/* ================================================== F3 design tokens — LIVE base for the redesigned pages -------------------------------------------------- The preview builds get these custom properties from home-page.css, whose :root block ships alongside a global `* { margin:0; padding:0 }` reset and an `html, body { ... }` override. Loading that whole file on a LIVE page would clobber the existing .eb-nav header / footer chrome. The token block is mirrored here on its own, and — critically — scoped to `.vb-rd`, the class added to the F3 SECTION (e.g. .auth-page), NOT to . That matters because nav.css declares its OWN :root tokens of the same name for the live header: nav.css :root { --accent:#0f1624; --bg:#eef0f4; --red:#ef4444; } If these F3 values were defined on body.vb-rd they would be inherited by the .eb-nav header (a body descendant) and repaint the chrome on the login page. Defining them on the redesigned section instead keeps them confined to F3 content; the header/footer sit outside .vb-rd and keep nav.css's values. Reused by every F3 page wired into the live site: each override section carries `class="... vb-rd"`. Keep in sync with the :root block in assets/css/home-page.css. ================================================== */ .vb-rd { --font-display: 'Rajdhani', 'Bricolage Grotesque', sans-serif; --font-body: 'Geist', sans-serif; --font-ui: 'Geist Mono', monospace; --royal: #ec5d72; --royal-deep: #c83a55; --royal-tint: #fde6ea; --royal-soft: #f5bcc6; --navy: #3e1820; --navy-deep: #240c12; --gold: #ffbf8f; --gold-deep: #e89055; --green: #22b358; --red: #e64a3a; --purple: #7b5cd1; --orange: #ff7a2a; --orange-deep: #d65a10; --bg: #ffffff; --bg-soft: #f7f8fa; --bg-deep: #eef1f4; --ink: #3e1820; --ink-soft: #4a5563; --ink-muted: #8a929c; --line: #e4e7ec; --line-soft: #eef1f4; --accent: #d83a55; --bar: #ec5d72; --r: 7.2px; --tracking: 0.62; --shadow-soft: 0 1.2px 2.4px rgba(62, 24, 32, 0.05), 0 9.6px 28.8px rgba(62, 24, 32, 0.07); --shadow-pop: 0 2.4px 4.8px rgba(62, 24, 32, 0.05), 0 28.8px 72px rgba(62, 24, 32, 0.10); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* status colours — used by the auth card's message line; the preview pulls these from order-page.css, mirrored here so the token base is self-contained. */ --status: #22b358; --status-soft: #e4f7ec; } /* ---- shared F3 utilities ---------------------------------------------- Page stylesheets like order-page.css are authored against home-page.css and assume its `.btn` base exists ("Inherits … .btn base … from home-page.css"). Since home-page.css can't load on a live page (its global reset would hit the chrome), the handful of shared utilities are ported here, each scoped under `.vb-rd` so they apply only inside an F3 section and never touch a chrome `.btn`. Mirror of home-page.css lines ~272-311. */ .vb-rd .btn { display: inline-flex; align-items: center; gap: 10.8px; padding: 15.6px 26.4px; border-radius: 3.6px; font-family: var(--font-ui); font-size: 14.4px; font-weight: 600; letter-spacing: calc(0.1em * var(--tracking)); text-transform: uppercase; transition: transform 180ms var(--ease-out), box-shadow 180ms ease, background 180ms ease, border-color 180ms ease; cursor: pointer; border: none; } .vb-rd .btn svg { width: 16.8px; height: 16.8px; } .vb-rd .btn-royal { background: linear-gradient(135deg, var(--royal) 0%, var(--royal-deep) 100%); color: #fff; box-shadow: 0 9.6px 36px -9.6px rgba(236, 93, 114, 0.5); } .vb-rd .btn-royal:hover { transform: translateY(-1.2px); box-shadow: 0 14.4px 43.2px -9.6px rgba(236, 93, 114, 0.6); } .vb-rd .btn-gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: var(--navy); box-shadow: 0 9.6px 36px -9.6px rgba(230, 180, 0, 0.55); } .vb-rd .btn-gold:hover { transform: translateY(-1.2px); box-shadow: 0 14.4px 43.2px -9.6px rgba(230, 180, 0, 0.65); } .vb-rd .btn-ghost-light { background: rgba(255,255,255,0.08); color: #fff; border: 1.2px solid rgba(255,255,255,0.25); } .vb-rd .btn-ghost-light:hover { background: rgba(255,255,255,0.16); transform: translateY(-1.2px); } .vb-rd .btn-ghost { background: var(--bg); color: var(--royal); border: 1.2px solid var(--line); } .vb-rd .btn-ghost:hover { border-color: var(--royal-soft); background: var(--royal-tint); transform: translateY(-1.2px); } /* ---- .panel card (ported from home-page.css; order-page.css also defines it, but checkout-page.css does not, so it lives here for any F3 page). ---- */ .vb-rd .panel { background: #fff; border: 1.2px solid var(--line); border-radius: calc(var(--r) + 2.4px); box-shadow: var(--shadow-soft); overflow: hidden; } .vb-rd .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14.4px; padding: 19.2px 24px; border-bottom: 1.2px solid var(--line-soft); background: var(--bg-soft); } .vb-rd .panel-title { font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; letter-spacing: calc(0.16em * var(--tracking)); text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 10.8px; } .vb-rd .panel-title svg { width: 16.8px; height: 16.8px; color: var(--accent); }