/* COPIED FROM vendor/public/apply.css so both public sites look the same. * The BOARD PORTAL's design language, brought to the vendor page — set in * the MAIN SITE's typeface, or as close to it as we are allowed to get. * * Read off the live site with the debugger rather than guessed at, because * the guess was wrong. peripheralmanagement.com uses TWO faces, not one: * * headings acumin-pro, weight 300 (Light, not bold) * body Poppins, weight 300 * * So Poppins was right here all along and should never have been removed. * It is back, and it is the body face. * * Acumin Pro is the half we cannot have: Adobe delivers it through * Squarespace's kit, which is domain-locked — loaded from this origin it * reports wf-inactive and falls back, tested. Archivo stands in for it on * headings only, and "closest" is measured: set the site's own headline at * the site's own 30.8px and Archivo lands within ~2% of Acumin's line width * where Public Sans, Libre Franklin and Inter were all ~6% wider. * * Headings are LIGHT here because they are light there. A 700 headline is * the conventional landing-page choice and it is not what this brand does. * * Same tokens, same soft cards and pills — so the thing a * contractor signs up through looks like the thing Peripheral actually built, * rather than like a landing page bought from somewhere else. The dark hero * and the burnt orange of the old Trade Connect page are gone. */ /* BODY — the main site's body face, exactly. */ @font-face { font-family:"Poppins"; font-weight:300; font-display:swap; src:url(fonts/poppins-300.woff2) format("woff2"); } @font-face { font-family:"Poppins"; font-weight:400; font-display:swap; src:url(fonts/poppins-400.woff2) format("woff2"); } @font-face { font-family:"Poppins"; font-weight:500; font-display:swap; src:url(fonts/poppins-500.woff2) format("woff2"); } @font-face { font-family:"Poppins"; font-weight:600; font-display:swap; src:url(fonts/poppins-600.woff2) format("woff2"); } @font-face { font-family:"Poppins"; font-weight:700; font-display:swap; src:url(fonts/poppins-700.woff2) format("woff2"); } /* HEADINGS — standing in for Acumin Pro. */ @font-face { font-family:"Archivo"; font-weight:300; font-display:swap; src:url(fonts/archivo-300.woff2) format("woff2"); } @font-face { font-family:"Archivo"; font-weight:400; font-display:swap; src:url(fonts/archivo-400.woff2) format("woff2"); } @font-face { font-family:"Archivo"; font-weight:500; font-display:swap; src:url(fonts/archivo-500.woff2) format("woff2"); } @font-face { font-family:"Archivo"; font-weight:600; font-display:swap; src:url(fonts/archivo-600.woff2) format("woff2"); } @font-face { font-family:"Archivo"; font-weight:700; font-display:swap; src:url(fonts/archivo-700.woff2) format("woff2"); } :root { --bg:#E9E9EB; --card:#FFFFFF; --sunken:#F3F3F4; --ink:#141414; --ink2:#4A4F55; --ink3:#63686F; --ink4:#8A8F96; --hair:#E4E4E6; --warn:#B3261E; --good:#1F7A5C; --good-soft:#E4F1EB; --accent:#C2410C; --accent-fill:#FF964F; --accent-on:#2A1005; --accent-soft:#FBEAE1; --cool:#55606E; --cool-soft:#EDEFF2; --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --shadow:0 1px 2px rgba(27,34,51,.04), 0 10px 30px rgba(27,34,51,.06); --shadow-lift:0 2px 4px rgba(27,34,51,.06), 0 18px 44px rgba(27,34,51,.12); --r-lg:24px; --r-md:18px; --r-sm:14px; --night:#101215; /* The landing page's column. --maxw is the CONTENT width; --gut is the space outside it, and it has to grow with the window rather than sit at a fixed 2rem. At 1180 + 2rem the page looked correctly inset on a 1440 screen and almost edge-to-edge on a 1280 one, because the only margin was the padding. Now the gutter is 6vw until it caps. */ --maxw:1120px; --gut:clamp(1.15rem, 6vw, 4rem); } * { box-sizing:border-box; } html,body { margin:0; } body { font-family:var(--sans); background:var(--bg); color:var(--ink); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; } img { display:block; max-width:100%; } a { color:inherit; } .wrap { max-width:820px; margin:0 auto; padding:1.6rem 1rem 6rem; } .brand { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; } .brand img { height:26px; width:auto; } .brand .tag { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink4); font-weight:600; } .step { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:.5rem; } h1 { font-family:var(--display); font-weight:300; font-size:clamp(1.7rem,4.5vw,2.4rem); line-height:1.15; letter-spacing:-.02em; margin:0 0 .5rem; } .lede { color:var(--ink3); font-size:15.5px; margin:0 0 1.6rem; max-width:34rem; } .card { background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:1.3rem; } .muted { color:var(--ink3); font-size:13.5px; } /* The one rule that makes the whole thing defensible, said plainly. */ .rule { display:flex; gap:.6rem; align-items:flex-start; background:var(--cool-soft); color:var(--cool); border-radius:var(--r-md); padding:.8rem .95rem; font-size:13px; line-height:1.5; } .rule b { color:var(--ink); } .btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:0; cursor:pointer; font-family:inherit; background:var(--accent-fill); color:var(--accent-on); font-size:15px; font-weight:650; padding:1rem 1.6rem; border-radius:99px; transition:transform .16s cubic-bezier(.34,1.56,.64,1), filter .16s ease; } /* Anchors used as buttons: a button is not prose and must not be underlined. The apply flow only ever used