/* ===================================================================== AI Design Empire — unified design system --------------------------------------------------------------------- The funnel pages (Lead Magnet, Starter Kit, Accelerator, Masterclass, AI Design System, Webinar) already share one look: a warm grey canvas carrying white / black / lime panels, Poppins, uppercase display type. This file carries that look over to the pages that predate it. Applied by build/build.js -> body[data-ade="panel"] (section pages) build/finish.js -> body[data-ade="doc"] (legal + 404) The .dc.html artboards are NOT edited. This file is the single place the shared look is defined, so it can be tuned or removed in one move. ===================================================================== */ :root{ --ade-canvas:#E4E4E0; --ade-panel:#FFFFFF; --ade-panel-2:#F3F3F0; --ade-dark:#14140F; --ade-mut:#6E6E66; --ade-accent:#DCF26E; --ade-radius:26px; --ade-gap:14px; --ade-max:1360px; --ade-inset:18px; --ade-top:clamp(80px,9.5vh,96px); --ade-sans:"Poppins",ui-sans-serif,system-ui,sans-serif; } /* --------------------------------------------------------------------- 1. Token remap — site-wide. The artboards draw most of their colour through these variables, so redefining them moves every page onto the funnel palette at once. !important is required: build.js writes some of them inline on . --------------------------------------------------------------------- */ :root{ --bg:var(--ade-canvas) !important; --fg:var(--ade-dark) !important; --mut:var(--ade-mut) !important; --bd:rgba(20,20,15,.12) !important; --muted:var(--ade-panel-2) !important; --ring:var(--ade-dark) !important; --a1:var(--ade-accent) !important; --a2:var(--ade-accent) !important; --burg-ink:var(--ade-dark) !important; --burg-bd:rgba(20,20,15,.18) !important; } /* --------------------------------------------------------------------- 2. Playfair Display retires — site-wide, including the funnel pages and the mobile sheet, so no italic serif survives anywhere. --------------------------------------------------------------------- */ [style*="Playfair"]{ font-family:var(--ade-sans) !important; font-style:normal !important; } /* --------------------------------------------------------------------- 2b. Leftovers from the burgundy palette the site used before the lime one. Both are written inline by the artboards, so they need to be matched on the style attribute. Site-wide: the funnel pages carry the link hover too. --------------------------------------------------------------------- */ a:hover{ color:inherit; opacity:.66; } a{ transition:opacity .2s var(--ease2,ease); } /* burgundy feature card -> the palette's dark */ [style*="rgb(104, 39, 39)"]{ background:linear-gradient(135deg,#14140F,#2A2A24) !important; } /* slate-blue hero and card fills -> the same dark, so every hero matches */ [style*="rgb(15, 23, 42)"]{ background:linear-gradient(135deg,#14140F,#26261F) !important; } /* --------------------------------------------------------------------- 3. Page canvas and panels — converted section pages only --------------------------------------------------------------------- */ body[data-ade="panel"]{ background:var(--ade-canvas); color:var(--ade-dark); font-family:var(--ade-sans); } body[data-ade="panel"] #main > div{ background:var(--ade-canvas); padding:var(--ade-top) var(--ade-inset) var(--ade-gap); } body[data-ade="panel"] #main > div > section, body[data-ade="panel"] #main > div > footer{ max-width:var(--ade-max); margin:0 auto var(--ade-gap); border-radius:var(--ade-radius); overflow:hidden; background-color:var(--ade-panel); } /* An ancestor with overflow:hidden becomes the scroll container for any position:sticky inside it, which kills the stickiness. The scroll scenes and filter bars need the radius without the clip. */ body[data-ade="panel"] #main > div > section:has([style*="position: sticky"]), body[data-ade="panel"] #main > div > section:has([style*="position:sticky"]){ overflow:visible; } /* One hero height across the site, matching the funnel pages. The artboards each set their own svh value inline. */ body[data-ade="panel"] #main > div > section:first-of-type{ min-height:clamp(430px,64svh,720px) !important; } /* The two fills the artboards hardcode instead of taking from a token. */ body[data-ade="panel"] #main > div > section[style*="rgb(20, 22, 26)"], body[data-ade="panel"] #main > div > footer{ background-color:var(--ade-dark) !important; } body[data-ade="panel"] #main > div > section[style*="rgba(252, 252, 252"]{ background-color:rgba(255,255,255,.82) !important; } /* --------------------------------------------------------------------- 4. Page canvas and panels — legal and 404 pages --------------------------------------------------------------------- */ body[data-ade="doc"] > div{ background:var(--ade-canvas); padding:var(--ade-top) var(--ade-inset) var(--ade-gap); } /* The panel lines up with the footer; the text keeps its reading column. */ body[data-ade="doc"] .doc{ max-width:var(--ade-max); margin:0 auto var(--ade-gap); padding:clamp(2.75rem,6vw,4.5rem) clamp(1.5rem,5vw,4rem); background:var(--ade-panel); border-radius:var(--ade-radius); } body[data-ade="doc"] .doc > *{ max-width:760px; margin-left:auto; margin-right:auto; } body[data-ade="doc"] > div > footer{ max-width:var(--ade-max); margin:0 auto; border-radius:var(--ade-radius); overflow:hidden; background-color:var(--ade-dark) !important; } /* --------------------------------------------------------------------- 5. Display type — uppercase Poppins, as on the funnel pages. h3 and below stay sentence case: they are card titles, not display. --------------------------------------------------------------------- */ body[data-ade] h1, body[data-ade] h2{ font-family:var(--ade-sans) !important; text-transform:uppercase; font-weight:300 !important; letter-spacing:-.03em !important; } body[data-ade] h3, body[data-ade] h4{ font-family:var(--ade-sans) !important; font-weight:300 !important; }