/* Shared chrome for the ARfield marketing pages. * * Each page still carries its own body styles; this file supplies only the * pieces that must look identical everywhere — the sticky nav, the header * treatment and the footer. Loaded as a separate stylesheet because the CSP * allows 'unsafe-inline' for style but not for script, and keeping it external * means one edit updates every page instead of four. */ :root{ --navy:#0A1628;--navy2:#16294A;--blue:#4F8EF7;--blue-dk:#2f6fd0; /* Brand blue #4F8EF7 is 3.21:1 on white — below WCAG AA's 4.5:1 for small text. This darker shade of the same hue passes at 4.52:1 and is used wherever blue carries small text or sits under white text. */ --blue-a11y:#1669f5; --line:#e4eaf2;--muted:#5b6875; --shadow-lg:0 1px 2px rgba(10,22,40,.06),0 8px 18px rgba(10,22,40,.07),0 28px 60px rgba(10,22,40,.10); } /* Inline links are underlined, not colour-only (WCAG 1.4.1). Nav, footer and button links opt out because their shape already identifies them. */ .page-body a:not(.btn):not(.cta){text-decoration:underline;text-underline-offset:2px} /* --- sticky nav --- */ .site-nav{position:sticky;top:0;z-index:50;background:rgba(10,22,40,.94); backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid rgba(255,255,255,.08)} .site-nav .navwrap{max-width:1060px;margin:0 auto;padding:0 22px;display:flex; align-items:center;justify-content:space-between;height:58px} .site-nav .logo{color:#fff;font-weight:800;font-size:16px;letter-spacing:.2px;text-decoration:none} .site-nav .links{display:flex;gap:22px;align-items:center} .site-nav .links a{color:rgba(255,255,255,.76);font-size:14px;font-weight:500;text-decoration:none} .site-nav .links a:hover{color:#fff} .site-nav .navcta{background:var(--blue-a11y);color:#fff!important;padding:9px 16px; border-radius:9px;font-weight:700;text-decoration:none} .site-nav .navcta:hover{background:var(--blue-dk)} @media(max-width:760px){.site-nav .links a:not(.navcta){display:none}} /* --- page header --- */ .page-head{background:linear-gradient(150deg,var(--navy) 0%,var(--navy2) 65%,#1d3560 100%); color:#fff;padding:52px 0 46px;position:relative;overflow:hidden} .page-head::after{content:'';position:absolute;inset:auto -10% -70% -10%;height:70%; background:radial-gradient(ellipse at center,rgba(79,142,247,.2),transparent 70%);pointer-events:none} .page-head .eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.7px; text-transform:uppercase;color:#9cc0ff;background:rgba(79,142,247,.14); border:1px solid rgba(79,142,247,.3);padding:5px 13px;border-radius:999px;margin-bottom:16px} /* --- footer --- The child selectors are NOT redundant. Each page carries its own `p{color:var(--ink)}` rule, which beats an inherited colour and rendered near-black text on the navy footer at 1.3:1 — caught by the accessibility gate on three pages at once. Setting the colour on the actual elements is what makes it stick. */ .site-foot{background:var(--navy);color:rgba(255,255,255,.82);padding:36px 0; text-align:center;font-size:14px} .site-foot p,.site-foot strong,.site-foot div,.site-foot span{ color:rgba(255,255,255,.82)} .site-foot strong{color:#fff} /* Underlined, not colour-only (WCAG 1.4.1). The email link sits mid-sentence in the footer paragraph, so a reader who can't distinguish the blue has no other cue that it's a link — the accessibility gate flagged exactly this. */ .site-foot a{color:#9cc0ff;text-decoration:underline;text-underline-offset:2px} .site-foot a:hover{color:#fff} .site-foot .fl{margin-top:10px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap} /* Touch targets stay finger-sized on the devices this is actually read on. */ @media(max-width:760px){ .site-nav .navcta,.site-foot a{min-height:44px;display:inline-flex;align-items:center} } /* ========================================================================== BLOG Used by web/blog/*.html, which are GENERATED by scripts/build-blog.mjs — edit the generator or this file, never the generated HTML. Unlike the other marketing pages, blog pages carry no inline