/* --------------------------------------------------------------------------- BrassWell marketing site draft — shared stylesheet. Palette, fonts, and the ruled-ledger-paper motif are lifted directly from the live waitlist page (Brasswell Waitlist Site/worker.js) so this draft stays visually the same brand, not a new one. Structure (nav, hero, feature cards, alternating sections, FAQ, CTA banner) is modeled on lettuce.co. --------------------------------------------------------------------------- */ :root{ --pine:#1E3D2F; --pine-dk:#142B21; --pine-soft:#e3eee8; --rust:#B54B2A; --rust-soft:#f5e6e4; --brass:#b8862b; --brass-soft:#f5ebd6; --cream:#F4EFE1; --paper-card:#fcfdfb; --ink:#24211B; --grey:#6B675C; --line: rgba(30,61,47,0.14); --radius: 10px; /* ---- elevation --------------------------------------------------------- Three steps, all tinted pine rather than neutral black — a gray shadow on a cream page reads as dirt, a tinted one reads as depth. Each is two layers: a tight contact shadow that grounds the edge, and a wide diffuse one that lifts the whole card. Borrowed from the reference shot, where every surface is a card floating over the background rather than a panel drawn onto it. */ --lift-1: 0 1px 2px rgba(30,61,47,.06), 0 4px 12px rgba(30,61,47,.05); --lift-2: 0 2px 4px rgba(30,61,47,.07), 0 12px 28px rgba(30,61,47,.08); --lift-3: 0 4px 8px rgba(30,61,47,.08), 0 28px 64px rgba(30,61,47,.13); /* Text that is pine on paper and cream on a dark field. Split out from --pine because --pine is also a BACKGROUND (buttons, the dark bands, the chart bars) — flipping one token for both roles turns the CTA banner cream and the text on it invisible. One token per job. */ --head: var(--pine); --ledger: rgba(30,61,47,0.10); /* FONT TOKENS — these were missing. Eight rules in this file already referenced var(--mono) / var(--serif), including the Product and Resources dropdown headings and the "See how it works →" links. With the token undefined, font-family resolved to nothing and those elements silently fell back to the inherited sans — so the mega-menu on the homepage was set in a different face from the identical menu on how-it-works.html, which defines these tokens in its own stylesheet. Nothing errors when a custom property is missing; the declaration is simply dropped, which is why this survived so long. Values copied verbatim from how-it-works.html so the two menus are now the same object, not two things that resemble each other. */ --sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --serif:'Fraunces',Georgia,'Times New Roman',serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace; /* Light text that sits on a DARK surface — the pine bands, the CTA banner, the statement, a filled primary button. Split out from --cream after --cream was repointed to the dark page background and took every one of these with it: near-black text on a near-black block, invisible. --cream is a SURFACE token. --on-dark is a TEXT token. They happened to be the same color in the light theme, which is exactly why one was doing both jobs and why it broke the moment the themes diverged. This value is deliberately NOT overridden in the dark block below. There is no theme in which text on a dark band should stop being light. */ --on-dark:#F4EFE1; } /* =========================================================================== DARK THEME Opt-in via ; the toggle in the draft page sets it. Not wired to prefers-color-scheme — that decision belongs to whoever ships this, and auto-switching a page under review makes it harder to compare. Surfaces invert; brand hues don't. Pine stays pine, but rust and brass are lifted a couple of steps because both sit around 4:1 on cream and drop under 3:1 on a dark field, which is below AA for body-size text. =========================================================================== */ html[data-theme="dark"]{ --cream:#0E1D16; /* page — pine pushed almost to black */ --paper-card:#16291F; /* raised card */ --pine-soft:#1E3B2C; /* tinted chip/fill */ --ink:#E9E4D6; /* body text */ --grey:#9AA79F; --head:#F1EDE1; --rust:#D9744C; /* +2 steps for contrast on dark */ --rust-soft:#3A2018; --brass:#D7A544; --brass-soft:#3A2E15; --line:rgba(233,228,214,0.14); --ledger:rgba(233,228,214,0.055); /* Shadows do almost nothing on a dark page — depth has to come from the surface being lighter than the page, plus a hairline. These stay only to ground the edges of the largest cards. */ --lift-1:0 1px 2px rgba(0,0,0,.35); --lift-2:0 2px 6px rgba(0,0,0,.4); --lift-3:0 8px 28px rgba(0,0,0,.45); } /* Tells the browser to render its OWN widgets dark: scrollbars, the caret, select menus, date pickers, autofill shading. Without it a dark page keeps a white scrollbar and light form chrome, which is the giveaway that a dark theme was painted on rather than declared. */ html{color-scheme:light dark;} html[data-theme="dark"]{color-scheme:dark;} html:not([data-theme]){color-scheme:light;} *{box-sizing:border-box;} html{scroll-behavior:smooth;} html,body{margin:0;padding:0;} body{ background-color:var(--cream); background-image: linear-gradient(var(--cream) 0, var(--cream) 27px, var(--ledger) 28px); background-size: 100% 28px; color:var(--ink); font-family:'IBM Plex Sans', system-ui, sans-serif; font-size:16px; line-height:1.5; } img{max-width:100%; display:block;} a{color:var(--head);} .container{max-width:1080px; margin:0 auto; padding:0 24px;} h1,h2,h3{font-family:'Fraunces', serif; font-weight:600; font-optical-sizing:auto; color:var(--head); margin:0 0 16px 0; letter-spacing:-0.01em;} h1{font-size:clamp(34px, 5.2vw, 56px); line-height:1.05;} h2{font-size:clamp(26px, 3.4vw, 38px); line-height:1.1;} h3{font-size:20px; line-height:1.25;} p{margin:0 0 16px 0;} .lede{font-size:18px; line-height:1.6; color:var(--ink); max-width:56ch;} .tag{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.12em; color:var(--rust); text-transform:uppercase; font-weight:600; margin:0 0 10px 0; display:block; } .rule{height:3px; background:var(--rust); width:64px; margin:0 0 20px 0; border:none;} /* ---- buttons ---- */ .btn{ display:inline-block; font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:15px; padding:13px 24px; border:1.5px solid var(--pine); border-radius:var(--radius); text-decoration:none; cursor:pointer; letter-spacing:0.01em; transition:background .15s ease, color .15s ease; } .btn-primary{background:var(--pine); color:var(--on-dark); border-color:var(--pine);} .btn-primary:hover{background:var(--pine-dk); border-color:var(--pine-dk);} .btn-ghost{background:transparent; color:var(--head); border-color:var(--pine);} .btn-ghost:hover{background:var(--pine-soft);} .btn-lg{padding:16px 30px; font-size:16px;} /* ---- nav ---- */ .site-nav{ position:sticky; top:0; z-index:20; background:var(--cream); border-bottom:1.5px solid var(--line); } .site-nav .container{display:flex; align-items:center; justify-content:space-between; height:76px;} .brand{display:flex; align-items:center; gap:11px; text-decoration:none;} /* The mark is the traced vector — same artwork as support/assets/brasswell-mark-black.svg and the two Cowork-built pages, not a CSS-drawn "B". The B inherits `color`; the two rules beneath it are always brand rust, in every variant. See BRAND-ASSETS.md: drawing the B with font-family:Georgia/Fraunces silently changes shape on machines without that font installed — the vector doesn't. */ .mark{display:block; height:34px; width:auto; color:#1F4436; flex:none;} .mark .rule{fill:#C0552A;} .brand-word{font-family:'Fraunces', serif; font-weight:600; font-size:19px; color:var(--head);} .nav-links{display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0;} /* Product / Pricing / Resources must be ONE rule. This selector used to be `.nav-links a` alone. Pricing is an and got the mono, uppercase, 12.5px treatment; Product and Resources are