/* ========================================================================== build-site BASELINE stylesheet, copy verbatim, then THEME the block below. To theme per client, change ONLY: (1) the color tokens, (2) --font-sans, 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. (Reference brand: slate-teal + lime, Manrope.) 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. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap'); :root{ /* --- FONT (themed): Inter body + Space Grotesk headings, matching client HTML --- */ --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-head:'Space Grotesk','Inter',ui-sans-serif,system-ui,sans-serif; /* --- COLOR (themed for ECOairflow, client navy/blue dark theme) --- */ --primary:#4DAFEA; --primary-dark:#2f8fce; --primary-darker:#1d6ba3; /* SURFACE tokens: the brand colours at the darkness white text needs. --primary (#4DAFEA) and --accent (#3A9E3F) are correct as accents, borders and text ON the dark theme, and they stay exactly as they are for that. But used as a BACKGROUND under white text they measured 2.43:1 and 3.42:1, both below the 4.5:1 the project's own config requires. These four are for that job only. Hover goes darker, not lighter, so contrast improves on interaction instead of degrading (the old .btn-primary:hover went to --accent-dark #5EC464, which is 2.2:1). */ --primary-surface:#1d6ba3; /* white on this = 5.70:1 */ --primary-surface-hover:#175a8a; /* 7.33:1 */ --accent-surface:#2f7f33; /* 4.99:1 */ --accent-surface-hover:#26682a; /* 6.78:1 */ --accent:#3A9E3F; --accent-dark:#5EC464; --secondary:rgba(77,175,234,0.12); --bg:#0A1628; --surface:#122040; --surface-2:#16294d; --card:#13233f; --text:#FFFFFF; --text-secondary:#D4E6F5; --text-muted:#9BB5CC; --border:#22344f; --dark:#081324; --dark-mid:#0e1d38; --dark-soft:#16294d; --white:#fff; --radius-sm:6px; --radius-md:10px; --radius-lg:18px; --radius-pill:40px; --shadow-sm:0 1px 2px rgba(20,40,46,.06); --shadow-md:0 6px 20px rgba(20,40,46,.09); --shadow-lg:0 18px 50px rgba(20,40,46,.16); --maxw:1200px; --header-h:72px; /* nav bar height */ --topbar-h:36px; /* utility top bar height */ --header-total:108px; /* topbar + nav bar, body offset on non-transparent pages */ } /* ---------- 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%;display:block} /* 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