/* ========================================================================== Umbrella500 Green Awards — landing page Ported from design/aperture-landing.html. EVERYTHING is scoped under #gf-awards. The tokens are declared on the wrapper, not :root, so names like --panel and --muted cannot collide with the Hub theme or leak onto any other page. The prototype blurred gated content to fake both states in one file. This does not: gated markup is never rendered for a guest, so there is nothing to unblur. The lock treatments below hold the layout open where a value would have been. ========================================================================== */ /* Dark is the designed ground. The light palette below is the same design in the other key, not an inversion — it follows the Hub's own day/night switch (theme_mode_night), so the page never sits as a dark island in a light site. */ #gf-awards{ --ink:#0F1D28; --panel:#1B2E3D; --hairline:#284053; --cream:#F2ECE4; --muted:#9DB0BF; --sage:#98C4B2; --sage-action:#79C4A2; --sand:#E7D9C8; --gold:#E3B457; --ember:#E8785A; /* Artwork tones are their own tokens because they cannot simply follow panel/hairline: on dark those sit ABOVE the ground, on light they would sit below it and the aperture would disappear into the page. */ --blade-a:#1B2E3D; --blade-b:#284053; --blade-flat-a:#0F1D28; --blade-flat-b:#284053; /* Form field borders are a separate token from --hairline. Hairline is a decorative divider at ~1.5:1, which is fine for a rule between sections but fails WCAG 1.4.11 for a control boundary — a field outlined in it is one a low-vision user cannot find. Measured at 3.1:1 against the field fill. */ --field-border:#5E7A90; --icon-plate:#F2ECE4; /* light disc so dark-outlined icons read on the dark page */ --ease:cubic-bezier(.22,1,.36,1); --maxw:1120px; --pad:clamp(18px,4vw,40px); --sec:clamp(56px,9vw,110px); --hub-header-h:70px; /* .main-header is fixed at 70px; JS re-measures */ margin:0;background:var(--ink);color:var(--cream); font-family:Futura,"Futura PT","Century Gothic","Avenir Next",Avenir,"URW Gothic","Trebuchet MS",ui-sans-serif,sans-serif; font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased; } /* Light. Greens and golds are darkened, not just swapped — the dark palette's #79C4A2 and #E3B457 are chosen to glow against near-black and would fail contrast as text or button fills on a pale ground. */ #gf-awards[data-theme=light]{ --ink:#F4F2EE; --panel:#FFFFFF; --hairline:#D9D2C7; --cream:#14232F; --muted:#5A6873; --sage:#2F7A5E; --sage-action:#1F6E52; --sand:#8A6E45; --gold:#8A6210; --ember:#B33F22; --blade-a:#E6E1D8; --blade-b:#D2CABC; --blade-flat-a:#F4F2EE; --blade-flat-b:#D2CABC; --field-border:#94897A; /* 3.4:1 against a white field fill */ --icon-plate:transparent; /* the light page already gives the outlines contrast */ } /* The primary button fills with --sage-action and prints the page ground on it. On light that would be pale-on-mid-green, so the label goes white instead. */ #gf-awards[data-theme=light] .cta{color:#FFFFFF} #gf-awards[data-theme=light] .cta-ghost{color:var(--cream)} #gf-awards[data-theme=light] .welcome{color:#FFFFFF} #gf-awards[data-theme=light] .gf-banner.is-ok{color:#FFFFFF} #gf-awards[data-theme=light] .gf-banner.is-ok a{color:#FFFFFF} #gf-awards[data-theme=light] .hx{outline-color:var(--ink)} #gf-awards *,#gf-awards *::before,#gf-awards *::after{box-sizing:border-box} /* ---------- collisions with the Hub's Bootstrap ---------- Scoping under #gf-awards stops OUR rules leaking out. It does nothing to stop Bootstrap's rules leaking IN: a bare `.nav {display:flex}` still matches our element, and for any property we never declare, Bootstrap wins by default. Found by probing each of our class names on a bare element outside the wrapper and diffing the computed style: .nav -> display:flex Bootstrap's nav component. Our `.wrap.nav-in` became a FLEX ITEM of