/* ================================================== 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 `.ebl-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.ebl-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 .ebl-rd and keep nav.css's values. Reused by every F3 page wired into the live site: each override section carries `class="... ebl-rd"`. Keep in sync with the :root block in assets/css/home-page.css. ================================================== */ .ebl-rd { --font-display: 'League', 'Oswald', 'Rajdhani', sans-serif; --font-body: 'Geist', sans-serif; --font-ui: 'Geist Mono', ui-monospace, monospace; --royal: #1659ac; --royal-deep: #0e478c; --royal-tint: #e8f1fb; --royal-soft: #b9d4f0; --navy: #1b1f2a; --navy-deep: #11141c; --gold: #ffd83f; --gold-deep: #eec200; --green: #22b358; --red: #e64a3a; --purple: #7b5cd1; --orange: #ff7a2a; --orange-deep: #d65a10; --bg: #ffffff; --bg-soft: #f5f6f8; --bg-deep: #eceef1; --ink: #1b1f2a; --ink-soft: #445870; --ink-muted: #8a8578; --line: #e6e8ec; --line-soft: #f0f1f3; --accent: #1659ac; --bar: #1659ac; --r: 7.92px; --tracking: 0.62; --shadow-soft: 0 1.2px 2.4px rgba(27, 31, 42, 0.05), 0 9.6px 28.8px rgba(27, 31, 42, 0.07); --shadow-pop: 0 2.4px 4.8px rgba(27, 31, 42, 0.05), 0 28.8px 72px rgba(27, 31, 42, 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; } /* ---- .ebl-rd BASE (font / colour / anchor reset) ----------------------- home-page.css applies `.ebl-rd { font-family:var(--font-body); color:var(--ink) }` + `.ebl-rd a { color:inherit; text-decoration:none }` right after its token block (home-page.css ~57-65). The F3 pages that DON'T load home-page.css (order, booster, blog, legal, 404, checkout) used to inherit a base font from the parent main.css `body{font-family:Montserrat}` and its bare `a{text- decoration:none}` — both gone now that boosting-main is stripped. Without this the F3 SECTION text falls back to UA serif and button/crumb anchors get the UA underline. Re-home the base here (loads on every F3 page via ebl_enqueue_f3_base) so those pages match the home-page.css-loading ones. Scoped to .ebl-rd — the chrome (.eb-nav / footer, OUTSIDE .ebl-rd) is untouched and keeps nav.css / chrome-f3.css fonts. Keep in sync with home-page.css. */ .ebl-rd { font-family: var(--font-body); color: var(--ink); } .ebl-rd a { color: inherit; text-decoration: none; } /* ---- 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 `.ebl-rd` so they apply only inside an F3 section and never touch a chrome `.btn`. Mirror of home-page.css lines ~272-311. */ .ebl-rd .btn { display: inline-flex; align-items: center; gap: 11.88px; padding: 17.16px 29.04px; border-radius: 3.96px; font-family: var(--font-ui); font-size: 15.84px; 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; /* Neutralise the PARENT main.css .btn primitive that leaks onto every F3 button: its default card box-shadow (1.86px 1.67px ... rgba) and its skewed EBL-blue #0062a6 ::after hover-sweep. The gradient F3 buttons (.btn-royal/.btn-gold) set their own box-shadow AFTER this rule so they keep it; flat buttons (.btn-climb/ .btn-back/.btn-dark) no longer show the stray shadow. .ebl-rd-scoped → chrome .btn untouched. This kills the bleed site-wide, not just on one page. */ box-shadow: none; } .ebl-rd .btn::after { content: none !important; } .ebl-rd .btn svg { width: 18.48px; height: 18.48px; } .ebl-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(22, 89, 172, 0.5); } .ebl-rd .btn-royal:hover { transform: translateY(-1.32px); box-shadow: 0 14.4px 43.2px -9.6px rgba(22, 89, 172, 0.6); } .ebl-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(238, 194, 0, 0.55); } .ebl-rd .btn-gold:hover { transform: translateY(-1.32px); box-shadow: 0 14.4px 43.2px -9.6px rgba(238, 194, 0, 0.65); } .ebl-rd .btn-ghost-light { background: rgba(255,255,255,0.08); color: #fff; border: 1.2px solid rgba(255,255,255,0.25); } .ebl-rd .btn-ghost-light:hover { background: rgba(255,255,255,0.16); transform: translateY(-1.32px); } .ebl-rd .btn-ghost { background: var(--bg); color: var(--royal); border: 1.2px solid var(--line); } .ebl-rd .btn-ghost:hover { border-color: var(--royal-soft); background: var(--royal-tint); transform: translateY(-1.32px); } /* ---- .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). ---- */ .ebl-rd .panel { background: #fff; border: 1.2px solid var(--line); border-radius: calc(var(--r) + 2.64px); box-shadow: var(--shadow-soft); overflow: hidden; } .ebl-rd .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 15.84px; padding: 21.12px 26.4px; border-bottom: 1.2px solid var(--line-soft); background: var(--bg-soft); } .ebl-rd .panel-title { font-family: var(--font-ui); font-size: 14.52px; font-weight: 600; letter-spacing: calc(0.16em * var(--tracking)); text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 11.88px; } .ebl-rd .panel-title svg { width: 18.48px; height: 18.48px; color: var(--accent); }