/* ============================================================================ * qv-base — brand tokens, typography, buttons, reveal animation * ---------------------------------------------------------------------------- * Shared by every .qvh page (home, checkout, ...). Extracted from * qvickly-home.php so the palette lives in exactly one place. * ========================================================================== */ .qvh { --brand:#764af3; --deep:#5f33e0; --light:#936df5; --ink:#14121f; --soft:#4e4b66; --paper:#fdfcff; --tint:#f2f2ff; --tintd:#ede8ff; --hair:#d9d9e3; /* text ramp on the dark canvas: lede (emphasised body) > body > dim labels */ --lede:#cfc6f2; --bodyd:#b9b3d6; --dim:#8d86ad; /* --body is the .qvh text colour below; --kicker is the eyebrow purple and --link the chip/link tint. All three were used as literals on 30+ sites before they had names. */ --body:#e6e2f5; --kicker:#c9b8ff; --link:#efeaff; font-family:'Karla',sans-serif; color:var(--body); background:var(--ink); overflow-x:clip; } /* ============================================================================ * SCALE TOKENS * ---------------------------------------------------------------------------- * Before these existed base.css defined colour tokens only, so each of the 21 * page modules in pages/ re-derived its own type ramp, section rhythm, radius * set and easing by eye. The result was 63 distinct heading clamps, 36 section * paddings and 20 radii for what is really ~5 of each. * * Values are the MAJORITY value already in use, not a fresh design — migrating * a page to a token should be a no-op or a sub-pixel move, never a redesign. * Where the old journey.css baseline disagreed with what pages actually did, * the pages won (eyebrows are .14em/600, not .2em/500; lede maxes at 21px). * ========================================================================== */ .qvh { /* -- type ramp ------------------------------------------------------------ h1 hero / page opener h2 section opener h3 sub-section + CTA band card card & list-item titles lede emphasised intro body body default copy label eyebrows/meta */ --fs-h1: clamp(34px, 4.4vw, 60px); --fs-h2: clamp(30px, 3.8vw, 52px); --fs-h3: clamp(26px, 3vw, 40px); --fs-card: clamp(19px, 1.8vw, 24px); --fs-lede: clamp(17px, 1.5vw, 21px); --fs-body: clamp(16px, 1.4vw, 19px); --fs-small: clamp(15px, 1.3vw, 17px); --fs-label: 13.5px; /* eyebrow treatment — 8 pages carried "/* labels — 600, never 500 */" and 20 used .14em; that is the real convention, so it is the token. */ --label-ls: .14em; --label-fw: 600; /* -- vertical gaps (4px grid) -------------------------------------------- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; /* eyebrow->heading is two-tier in practice: page-level h1 sits lower than a section h2. Both were undocumented, which is why they looked arbitrary. */ --gap-eyebrow-h1:16px; --gap-eyebrow-h2:14px; --gap-h-p:18px; /* hero / page-level heading -> lede */ --gap-h-p-tight:14px; /* section + card heading -> body */ /* -- section rhythm ------------------------------------------------------- --sec-open clears the fixed header; see --header-h below. --hero-open is the SEPARATE, roomier opening used by the standalone (non-journey) pages. They historically hardcoded this instead of deriving it from --header-h, in four variants — 140/15vw/196, 140/15vw/200, 150/16vw/200 and 150/16vw/210 — which land within 10-14px of each other at every viewport. This token is the majority value; the spread is unified without changing the established look. Deliberately NOT --sec-open, which computes ~126-170px and would lift these heroes 20-40px. */ --sec-open: calc(var(--header-h) + clamp(44px, 8vh, 88px)); --hero-open: clamp(140px, 15vw, 200px); --sec: clamp(48px, 8vh, 96px); --sec-tight: clamp(32px, 5vh, 56px); --sec-close: clamp(96px, 13vh, 160px); /* -- shell --------------------------------------------------------------- */ --pad:clamp(20px,4vw,48px); /* every page already declared exactly this */ --maxw:1180px; /* -- cards --------------------------------------------------------------- */ --card-pad-sm:16px; --card-pad:clamp(22px, 2.6vw, 32px); --card-pad-lg:clamp(28px, 4.4vw, 56px); /* -- radius -------------------------------------------------------------- */ --r-sm:4px; --r-md:12px; --r-lg:20px; --r-pill:999px; /* -- motion -------------------------------------------------------------- */ --ease:cubic-bezier(.22,1,.36,1); --dur:.25s; --lift:-3px; /* hover lift; was -2/-3/-4/-5 across pages */ /* -- surfaces on the dark canvas ----------------------------------------- */ --surf-1:rgba(253,252,255,.04); --surf-2:rgba(253,252,255,.10); --line-1:rgba(201,184,255,.16); --line-2:rgba(201,184,255,.25); } /* Fixed-header height — ONE declaration. This was previously redeclared in all 8 --header-h pages plus journey.css (as --qv-header-h), each with its own 1199px override: 18 copies of one number under two names. The 8 pages that did NOT define it hardcoded clamp(140px,15vw,200px) instead, which only approximates the same result. Verified against the live render: the Nexros sticky header is 82px. */ .qvh { --header-h:82px; } @media (max-width:1199px){ .qvh { --header-h:80px; } } /* Breakpoints, for reference — do not invent new ones in a page module: 1199px theme/nav tier 920px journey engine collapses two-col 760px cards -> one col 480px small phone Pages currently also use 1020/1000/980/860/720/700/640/600/560/520/400. */ .qvh *, .qvh *::before, .qvh *::after { box-sizing:border-box; } .qvh h1,.qvh h2,.qvh h3 { font-family:'Rubik',sans-serif; text-transform:none !important; letter-spacing:-0.03em; line-height:1.05; margin:0; font-weight:700; color:#fdfcff; } .qvh .dot { color:var(--brand); } .qvh p { color:var(--bodyd); line-height:1.65; margin:0; } .qvh .wrap { max-width:1180px; margin-inline:auto; padding-inline:clamp(20px,4vw,48px); } .qvh .qvbtn { display:inline-block; font-family:'Rubik',sans-serif; font-weight:600; border-radius:999px; text-decoration:none; transition:all .25s cubic-bezier(.22,1,.36,1); } .qvh .qvbtn-primary { background:var(--brand); color:#fff !important; padding:16px 34px; font-size:17px; } /* :not(:disabled) so a disabled button does not lift on hover. Pages used to cancel this per-button with `transform:none !important`, which meant every new disabled button needed the same override; the guard belongs here. */ .qvh .qvbtn-primary:hover:not(:disabled) { background:var(--deep); transform:translateY(-2px); } .qvh .qvbtn-ghost { color:#fdfcff !important; padding:16px 6px; font-size:17px; background:none !important; box-shadow:none !important; } .qvh .qvbtn-ghost::after { content:"→"; margin-left:10px; display:inline-block; transition:transform .25s ease; color:var(--brand); } .qvh .qvbtn-ghost:hover::after { transform:translateX(6px); } /* The theme's `button, .button` rule forces text-transform:uppercase on every