/* ============================================================================= NextRide — marketing site Recreated from the design handoff ("NextRide Landing.dc.html" + README.md). Every colour, size and spacing value below comes from that handoff. Page-root knobs (set as attributes on ): data-lang="en|sq" which copy set is visible (default en) data-theme="light|dark" pin the palette; omit to follow the OS data-panel="auto|white|navy|sand" product-panel + map palette (default auto) data-lead="copper|navy" which brand colour leads type (default copper) data-header="pill|bar" header shape (default pill) ========================================================================== */ /* ---------------------------------------------------------------- 1. Tokens */ :root{ color-scheme:light; /* Brand */ --navy:#00186E; --copper:#CD8C64; --copper-deep:#8A5636; --ink:#1A1512; /* Page surface */ --bg:#FFFFFF; --fg:#8A5636; --fg-2:#6E6259; --accent:#00186E; --rule:rgba(26,21,18,.12); --glass:rgba(255,255,255,.6); --header-border:#E5D6C3; /* Product UI surfaces — phone screens, roster, notifications */ --panel:#FFFFFF; --panel-fg:#1A1512; --panel-2:#8A817A; --panel-rule:rgba(26,21,18,.14); --panel-accent:#00186E; --map:#F7F2EC; --road:#E8DFD4; --route:#00186E; /* Logo lockups swap by surface, never by CSS filter. C = full colour (light surfaces), W = solid white (dark surfaces). */ --logo-c:block; --logo-w:none; --mark-c:block; --mark-w:none; /* Layout — 8px base, every value a multiple */ --pad-x:clamp(20px,4vw,48px); --pad-y:clamp(48px,7vw,104px); --maxw:1280px; } /* Dark palette — opt in with data-theme="dark" on . The page is white by default and deliberately does NOT follow the visitor's OS setting, matching the design. To make it follow the OS instead, wrap a copy of this block in @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ ... } } */ :root[data-theme="dark"]{ color-scheme:dark; --bg:#0B1116; --fg:#E2B896; --fg-2:#9A9490; --accent:#9FB4F5; --copper:#DDA283; --rule:rgba(232,224,216,.16); --glass:rgba(14,20,25,.55); --header-border:rgba(229,214,195,.32); --panel:#121A20; --panel-fg:#F1EBE5; --panel-2:#8E9599; --panel-rule:rgba(241,235,229,.16); --panel-accent:#9FB4F5; --map:#131F27; --road:#1E2E38; --route:#9FB4F5; --logo-c:none; --logo-w:block; --mark-c:none; --mark-w:block; } /* Brand lead — which of the two brand colours carries type vs accents */ :root[data-lead="navy"]{ --fg:#00186E; --accent:#8A5636 } :root[data-theme="dark"][data-lead="navy"]{ --fg:#C6D2F2; --accent:#DDA283 } /* Product-panel colour variants. Declared after the theme blocks so an explicit data-panel always wins over the theme's panel tokens. */ :root[data-panel="white"]{ --panel:#FFFFFF; --panel-fg:#1A1512; --panel-2:#8A817A; --panel-rule:rgba(26,21,18,.14); --panel-accent:#00186E; --map:#F7F2EC; --road:#E8DFD4; --route:#00186E; --mark-c:block; --mark-w:none; } :root[data-panel="sand"]{ --panel:#FBF5EE; --panel-fg:#1A1512; --panel-2:#8A817A; --panel-rule:rgba(26,21,18,.14); --panel-accent:#00186E; --map:#F1E7DA; --road:#E3D4C2; --route:#00186E; --mark-c:block; --mark-w:none; } :root[data-panel="navy"]{ --panel:#00186E; --panel-fg:#FFFFFF; --panel-2:rgba(255,255,255,.64); --panel-rule:rgba(255,255,255,.22); --panel-accent:#E4B08D; --map:#001657; --road:#0A2278; --route:#FFFFFF; --mark-c:none; --mark-w:block; } /* ------------------------------------------------------------------ 2. Base */ *,*::before,*::after{ box-sizing:border-box } html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } html,body{ margin:0; padding:0; background:var(--bg) } body{ color:var(--fg); font-family:"Space Grotesk Variable","Space Grotesk",ui-sans-serif,system-ui,sans-serif; font-weight:400; line-height:1.65; min-height:100vh; /* Set on rather than a wrapper div: it propagates to the viewport and so leaves the sticky header a scrolling containing block. */ overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{ max-width:100%; border:0 } svg{ display:block } a{ color:var(--fg); text-decoration:none; border-bottom:1px solid var(--rule) } a:hover{ color:var(--accent); border-bottom-color:var(--accent) } :where(a,button):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; } h1,h2,h3,p{ margin:0 } /* ---------------------------------------------------------- 3. Language sets Both copy sets ship in the markup. data-lang on decides which set is visible; English is the default. */ [data-sq]{ display:none !important } [data-lang="sq"] [data-sq]{ display:revert !important } [data-lang="sq"] [data-en]{ display:none !important } /* --------------------------------------------------------- 4. Shared pieces */ .skip{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .skip:focus{ position:fixed; top:16px; left:16px; z-index:100; width:auto; height:auto; margin:0; padding:10px 18px; overflow:visible; clip-path:none; border:1px solid var(--panel-rule); border-radius:999px; background:var(--panel); color:var(--panel-fg); font-size:14px; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:var(--pad-y) var(--pad-x); } .section{ border-top:1px solid var(--rule) } .eyebrow{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); } .eyebrow--muted{ color:var(--fg-2) } .ui-label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--panel-2); } .map{ width:100%; height:auto } /* Language toggle — the inactive label sits at .4 */ .lang{ display:flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; } .lang__btn{ font:inherit; letter-spacing:inherit; text-transform:inherit; background:none; border:0; padding:4px 8px; color:var(--fg); cursor:pointer; } .lang__btn[aria-pressed="false"]{ opacity:.4 } .lang__sep{ color:var(--rule) } .lang--footer .lang__btn{ padding:4px 0 } /* Logo lockups */ .logo--c{ display:var(--logo-c) } .logo--w{ display:var(--logo-w) } .mark--c{ display:var(--mark-c) } .mark--w{ display:var(--mark-w) } /* ---------------------------------------------------------------- 5. Header */ .site-header{ position:sticky; top:0; z-index:20; padding:16px var(--pad-x) 8px; } .site-header__inner{ max-width:1120px; margin:0 auto; padding:8px 10px 8px 16px; border-radius:999px; border:1px solid var(--header-border); background:var(--glass); -webkit-backdrop-filter:saturate(1.8) blur(18px); backdrop-filter:saturate(1.8) blur(18px); display:flex; align-items:center; justify-content:space-between; gap:12px; } .brand{ border:0; display:flex; align-items:center; min-width:0; flex:0 1 182px; } .brand img{ width:100%; max-width:182px; height:auto } .header-tools{ display:flex; align-items:center; gap:14px; flex:0 0 auto; } .header-link{ border:0; font-size:14px; color:var(--fg-2); } /* The header "Privacy" link also lives in the footer, so it can go on phones */ @media (max-width:559px){ .header-link{ display:none } } /* Full-bleed bar variant */ :root[data-header="bar"] .site-header{ padding:0 } :root[data-header="bar"] .site-header__inner{ max-width:none; border-radius:0; border-width:0 0 1px; padding:12px var(--pad-x); } /* ------------------------------------------------------------------ 6. Hero */ #top{ scroll-margin-top:96px } .wrap--hero{ padding-block:clamp(40px,6vw,88px) } .hero{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(40px,6vw,80px); } .hero__text{ flex:1 1 380px; /* min() keeps the 300px floor from overflowing a 320px viewport */ min-width:min(300px,100%); } .hero__eyebrow{ margin-bottom:24px } .hero h1{ font-size:clamp(38px,6.4vw,80px); line-height:1.04; letter-spacing:-.03em; font-weight:600; text-wrap:balance; } .hero__lead{ margin-top:32px; max-width:44ch; font-size:clamp(17px,1.5vw,21px); line-height:1.6; color:var(--fg-2); } .hero__visual{ flex:0 1 320px; display:flex; justify-content:center; } .phone{ width:296px; max-width:100%; border:1px solid var(--panel-rule); border-radius:36px; background:var(--panel); padding:10px; } .phone__screen{ border-radius:28px; overflow:hidden; background:var(--panel); } .phone__status{ display:flex; justify-content:space-between; gap:12px; padding:14px 18px 10px; font-size:12px; letter-spacing:.06em; color:var(--panel-2); } .phone__eta{ padding:18px; border-top:1px solid var(--panel-rule); display:flex; align-items:flex-end; justify-content:space-between; gap:16px; } .phone__stop{ font-size:15px; color:var(--panel-fg); margin-top:4px; } .eta{ text-align:right; line-height:1 } .eta__num{ font-size:30px; letter-spacing:-.02em; color:var(--panel-accent); } .eta__unit{ font-size:13px; color:var(--panel-2); margin-left:2px; } /* ------------------------------------------------------------------- 7. Gap */ .gap__statement{ max-width:28ch; font-size:clamp(24px,3.2vw,40px); line-height:1.25; letter-spacing:-.02em; font-weight:500; text-wrap:pretty; } .gap__support{ margin-top:24px; max-width:40ch; font-size:clamp(16px,1.4vw,19px); color:var(--fg-2); } .gap__lede{ color:var(--accent) } /* --------------------------------------------------------------- 8. Timeline Four sections hang off one continuous vertical rail so the page reads as a day passing. Each row is its own two-column grid; the rail cell stretches to the full row height, so consecutive rows draw one unbroken line. */ .tl-row{ display:grid; grid-template-columns:clamp(20px,3vw,32px) 1fr; column-gap:clamp(20px,3vw,40px); } .tl-rail{ position:relative; display:flex; justify-content:center; } .tl-rail__line{ width:1px; background:var(--rule); } .tl-rail__dot{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:10px; height:10px; border-radius:50%; background:var(--accent); } /* The roster row is the centerpiece — its marker is bigger */ .tl-rail__dot--lg{ width:14px; height:14px } .tl-label{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-2); padding-bottom:40px; } .tl-body{ padding-bottom:clamp(56px,7vw,96px) } .tl-body--last{ padding-bottom:0 } .tl-time{ font-size:13px; letter-spacing:.1em; color:var(--accent); } .tl-body h2{ margin-top:12px; font-size:clamp(28px,3.6vw,46px); line-height:1.12; letter-spacing:-.025em; font-weight:600; } .tl-body--roster h2{ font-size:clamp(34px,5vw,64px); line-height:1.06; letter-spacing:-.03em; max-width:22ch; } .tl-cols{ display:flex; flex-wrap:wrap; gap:clamp(32px,4vw,64px); margin-top:32px; align-items:flex-start; } .tl-cols--roster{ margin-top:36px } .tl-prose{ flex:1 1 320px; max-width:42ch; font-size:clamp(16px,1.4vw,19px); color:var(--fg-2); } .tl-prose--roster{ flex:1 1 300px; max-width:40ch; color:var(--fg); } .tl-prose--roster .lede{ font-size:clamp(17px,1.6vw,21px); line-height:1.6; } .tl-prose--roster p + p{ margin-top:24px; font-size:clamp(16px,1.4vw,19px); color:var(--fg-2); } /* Notification panel (rows 1 and 4) */ .note{ flex:0 1 360px; width:100%; max-width:400px; border:1px solid var(--panel-rule); background:var(--panel); border-radius:14px; padding:16px 18px; display:flex; gap:14px; align-items:flex-start; } .note__mark{ width:24px; height:auto; margin-top:2px; flex:none; } .note__text{ flex:1; min-width:0 } .note__head{ display:flex; justify-content:space-between; gap:12px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--panel-2); } .note__body{ margin-top:6px; font-size:16px; color:var(--panel-fg); line-height:1.45; } .note__meta{ margin-top:4px; font-size:14px; color:var(--panel-2); } /* Transit map panel (row 2) */ .transit{ flex:1 1 320px; max-width:520px; width:100%; border:1px solid var(--panel-rule); border-radius:14px; overflow:hidden; background:var(--panel); } .transit__stats{ display:flex; flex-wrap:wrap; column-gap:32px; row-gap:8px; padding:16px 18px; border-top:1px solid var(--panel-rule); font-size:14px; color:var(--panel-2); } .stat__v{ color:var(--panel-fg) } .stat__v--accent{ color:var(--panel-accent) } /* Roster panel (row 3, centerpiece) */ .roster{ flex:1 1 380px; max-width:560px; width:100%; border:1px solid var(--panel-rule); border-radius:14px; background:var(--panel); } .roster__head{ display:flex; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--panel-rule); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--panel-2); } .roster__count{ color:var(--panel-accent) } .roster__body{ padding:8px 20px 20px } .roster__group{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--panel-2); padding:24px 0 8px; } .roster__group:first-child{ padding-top:16px } .roster__list{ margin:0; padding:0; list-style:none; } .roster__row{ display:flex; align-items:center; gap:14px; padding:10px 0; border-top:1px solid var(--panel-rule); } .roster__row--off{ opacity:.55 } .roster__mark{ width:9px; height:9px; border-radius:50%; background:var(--panel-accent); flex:none; } .roster__mark--ahead{ background:none; border:1.5px solid var(--panel-2); } .roster__mark--off{ width:9px; height:1.5px; border-radius:0; background:var(--panel-2); } .roster__name{ flex:1; min-width:0; font-size:16px; color:var(--panel-fg); } .roster__meta{ font-size:13px; color:var(--panel-2); text-align:right; } /* -------------------------------------------------------------- 9. Schools */ .schools{ display:flex; flex-wrap:wrap; gap:clamp(32px,5vw,80px); } .schools__lead{ flex:1 1 280px; max-width:36ch } .schools__lead h2{ margin-top:16px; font-size:clamp(26px,3vw,38px); line-height:1.15; letter-spacing:-.025em; font-weight:600; } .schools__prose{ flex:1 1 320px; max-width:52ch; font-size:clamp(16px,1.4vw,19px); color:var(--fg-2); } .schools__prose p + p{ margin-top:20px } /* --------------------------------------------------------- 10. Coming next */ .next__statement{ margin-top:20px; max-width:34ch; font-size:clamp(20px,2.4vw,30px); line-height:1.35; letter-spacing:-.02em; font-weight:500; } .next__support{ margin-top:16px; max-width:44ch; font-size:clamp(16px,1.4vw,19px); color:var(--fg-2); } /* --------------------------------------------------------------- 11. Footer */ .site-footer{ border-top:1px solid var(--rule) } .footer__wrap{ max-width:var(--maxw); margin:0 auto; padding:clamp(40px,5vw,72px) var(--pad-x); } .footer__cols{ display:flex; flex-wrap:wrap; gap:clamp(32px,5vw,80px); justify-content:space-between; } .footer__brand{ flex:1 1 260px; max-width:34ch } .footer__logo{ height:26px; width:auto; max-width:100% } .footer__note{ margin-top:20px; font-size:15px; color:var(--fg-2); } .footer__col{ flex:0 1 auto } .footer__list{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:16px; font-size:15px; } .footer__bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin-top:clamp(32px,4vw,56px); padding-top:24px; border-top:1px solid var(--rule); } .footer__place{ font-size:14px; color:var(--fg-2); } /* --------------------------------------------------------------- 12. Loader A curtain over the page while the document loads: the brand mark animating on ink, then the curtain draws down off the page while the header and hero rise in behind it. Down, not up: it uncovers the top of the viewport first, so the reveal runs header, headline, lead — the order the page is read in. Going the other way would hand the visitor the middle of section two. Painted first, but written last on purpose — the whole effect is this section plus the #loader markup plus loader.js, and those three are the only places it lives. Delete them together to ship the page without it. It is shown only while carries data-loading, which the inline script in sets. With JavaScript off nothing sets it, so the curtain never appears and the page is readable immediately. */ /* The curtain keeps one palette in both themes: copper on black, which is the ground the clip was drawn on. --curtain MUST stay black. The clip is opaque and carries no alpha channel, so the only thing hiding its rectangle is a backdrop that matches its own ground exactly — and that ground is pure #000 (measured: 96–99.6% of the dark pixels are exactly 0,0,0, the rest off by a value or two). Lighten this and the clip becomes a visible black box. A blend mode is not a way around that: mix-blend-mode:screen reads correctly in the CSSOM but Chrome can put a GPU-composited