/* ========================================================================== build-site BASELINE stylesheet — copy verbatim, then THEME the block below. To theme per client, change ONLY: (1) the color tokens, (2) --font-sans / --font-display, (3) the --radius-* scale, and load the matching Google font in each HTML . Do NOT edit the component rules or structural tokens further down — that is what guarantees the consistent, slick result. ⛔ THE TOKEN VALUES BELOW ARE PLACEHOLDERS, NOT A PALETTE TO SHIP. They are an arbitrary slate-teal + lime example so the file renders before theming. You MUST overwrite --primary / --accent / the band + surface colors / the fonts / radius with the CLIENT'S MEASURED brand (from 02-brand.spec.json design_system, derived from the logo swatches + Firecrawl branding). Shipping a site still on this teal/ lime/Manrope default when the client's brand is different is THE "every site looks the same" defect — it is a build failure, not an acceptable fallback. COLOR PAIRING CONTRACT (the fix for white-on-white / invisible header): - Keep these EXACT token names — the components read them. Do not rename to --brand/--ink/--accent-ink (those are ignored -> defaults -> unreadable text). - --text/--text-secondary/--text-muted are for LIGHT bands only (--bg/--surface). On dark bands (--dark/--dark-mid/--primary) text is #fff / rgba(255,255,255,.8). - --accent is ALWAYS a BRIGHT highlight (CTA fills, dots, underlines). Never a text color on a light band. If the brand's main color is dark, it is --primary (a band/button color), NOT --accent — pick a separate bright accent. - --text must be near-black; --bg near-white. Verify body contrast >=4.5:1. ========================================================================== */ :root{ /* --- FONT: Cormorant Infant for display headings (Marker Law brand) + Inter for body --- */ --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-display:'Cormorant Infant','Georgia',serif; /* --- COLOR: Marker Law brand palette --- */ --primary:#E8B600; /* brand gold */ --primary-dark:#C49D00; --primary-darker:#9B7A00; --primary-ink:#7F6400; /* darkest gold — small text on light chips (WCAG AA) */ --accent:#76B7CD; /* brand blue */ --accent-dark:#5EA3BE; --secondary:#E8F4FA; /* light blue tint for chips/eyebrows */ --bg:#FFFFFF; --surface:#F5F7FA; --surface-2:#EEF1F5; --text:#101E32; /* dark navy — brand ink */ --text-secondary:#2A3A52; --text-muted:#5A6473; --border:#E2E6EA; --dark:#101E32; /* navy — main dark band color */ --dark-mid:#1A2D47; --dark-soft:#213A5A; --white:#fff; --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-pill:40px; --shadow-sm:0 1px 2px rgba(16,30,50,.06); --shadow-md:0 6px 20px rgba(16,30,50,.10); --shadow-lg:0 18px 50px rgba(16,30,50,.18); --maxw:1200px; --header-h:72px; --topbar-h:0px; --header-total:72px; } /* ---------- Reset & Base ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--font-sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.65;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden} img{max-width:100%;height:auto;display:block}/* height:auto is REQUIRED: without it an HTML height="N" attribute on an inline-styled img leaks through and stretches the image (a width:100%+aspect-ratio img with no CSS height renders at the attribute height). Canonical responsive-image rule. */ /* SAFETY NET — inline ICONS never balloon. Every icon is a 24-grid line SVG; this gives a small default size so an icon dropped in a container without its own rule (faq-ico, ci-ico, a bare