/* Shared chrome: header states, mega menu, burger, canonical footer, accessibility and contrast fixes. Every page needs this one. */ /* The shell owns almost nothing: each page's own stylesheet paints the page, including body. This is only a floor so there is no flash of the host's ground before the active stylesheet is enabled. */ html,body{margin:0;background:#FFFFFF} #app{display:block} /* a route that has not been built yet */ .stub{ min-height:100svh;display:grid;place-content:center;gap:14px;text-align:center; padding:64px 24px;background:#fff;color:#06243C; font-family:"Hanken Grotesk","Avenir","Segoe UI",system-ui,sans-serif;font-weight:300; } .stub h1{font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:2rem;margin:0} .stub p{margin:0;color:#5C7488} .stub a{ color:#1C70EE;text-decoration:none;font-family:"Jost",system-ui,sans-serif; font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-top:8px; } .stub .stub-actions{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center} /* ── the Services mega menu ───────────────────────────────────────── Injected into whichever page is mounted, so one implementation serves all seven. It carries its own copy of the palette rather than reading the active page's tokens, so the panel is identical over the homepage's dark hero and over an interior page's white plate. */ .mega{ --m-paper:#FFFFFF; --m-ink:#06243C; --m-muted:#5C7488; --m-mut2:#93A5B4; --m-line:#DEE6ED; --m-line2:#F6F1E7; --m-accent:#8A5F16; position:absolute;top:100%;left:0;right:0; background:var(--m-paper); border-top:1px solid var(--m-line); border-bottom:1px solid var(--m-line); box-shadow:0 26px 50px -30px rgba(6,36,60,.42); color:var(--m-ink); } .mega[hidden]{display:none} .mega-in{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,54px); padding-block:clamp(26px,3vw,40px); } @media (max-width:1000px){ .mega-in{grid-template-columns:1fr 1fr} } @media (max-width:700px){ .mega-in{grid-template-columns:1fr;gap:22px} } .mega-col{display:grid;gap:12px;align-content:start} .mega-h{ font-family:"Jost","Avenir",system-ui,sans-serif; font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase; color:var(--m-mut2);margin:0;padding-bottom:11px;border-bottom:1px solid var(--m-line); } .mega-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px} .mega-col a{ display:grid;gap:1px;text-decoration:none; padding:9px 10px;margin-inline:-10px;border-radius:3px; font-family:"Hanken Grotesk","Avenir",system-ui,sans-serif; font-weight:300;font-size:1rem;color:var(--m-ink); transition:background .18s ease, color .18s ease; } .mega-col a:hover{background:var(--m-line2);color:var(--m-accent)} .mega-col a small{ font-family:"Jost","Avenir",system-ui,sans-serif; font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--m-mut2); } /* the one service with a page designed in this prototype */ .mega-col a.designed strong{font-weight:400} /* the descriptor carries the emphasis now, in the FAQ gold, so the row does not need a marker dot as well */ .mega-col a.designed small{color:#A9762A} /* ── the hamburger and its drawer ──────────────────────────────────── Carries its own palette for the same reason the mega panel does: it opens over the homepage's dark hero and over white interior headers. */ /* flex, not grid: implicit grid rows stretch to fill the 42px button, which puts the bars on a ~15px pitch and leaves the X transform below missing by 8px. Flex keeps the bars content-height, so the pitch is exactly 1.5px + 5px gap = 6.5px - the distance the X translate assumes. */ .burger{ --m-ink:#06243C; --m-line:#DEE6ED; display:none;width:42px;height:42px;flex:none; background:none;border:1px solid var(--m-line);border-radius:3px; cursor:pointer;padding:0;color:var(--m-ink); flex-direction:column;align-items:center;justify-content:center;gap:5px; } .burger span{display:block;width:17px;height:1.5px;background:currentColor;transition:transform .25s ease, opacity .2s ease} .burger.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .burger.on span:nth-child(2){opacity:0} .burger.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .drawer{ --d-paper:#FFFFFF; --d-ink:#06243C; --d-muted:#5C7488; --d-mut2:#93A5B4; --d-line:#DEE6ED; --d-line2:#F6F1E7; --d-accent:#8A5F16; position:absolute;top:100%;left:0;right:0; max-height:calc(100svh - 100%);overflow-y:auto;overscroll-behavior:contain; background:var(--d-paper);border-top:1px solid var(--d-line); box-shadow:0 26px 50px -30px rgba(6,36,60,.45);color:var(--d-ink); } .drawer[hidden]{display:none} .drawer-in{padding:clamp(18px,4vw,26px) var(--gutter) clamp(26px,6vw,36px);display:grid;gap:22px} .drawer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px} .drawer a{ display:block;text-decoration:none;color:var(--d-ink); font-family:var(--f-body);font-weight:300;font-size:1.06rem; padding:12px 12px;margin-inline:-12px;border-radius:3px;min-height:44px; } .drawer a:hover{background:var(--d-line2);color:var(--d-accent)} .drawer .drawer-top a{font-family:var(--f-display);font-weight:400;font-size:1.22rem} .drawer .drawer-top a[aria-current="page"]{color:var(--d-accent)} .drawer-grp{display:grid;gap:6px} .drawer-h{ font-family:var(--f-util);font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase; color:var(--d-mut2);margin:0;padding-bottom:9px;border-bottom:1px solid var(--d-line); } .drawer a.designed{display:flex;align-items:center;gap:.55em} /* the same size as the button in the top bar, not a full-width block. `.drawer a` out-specifies a bare `.drawer-cta`, which is why this was still rendering at body size - hence the descendant selector. */ .drawer a.drawer-cta{ justify-self:start;margin-top:6px;width:auto;min-height:0; display:inline-flex;align-items:center;gap:.6em; font-family:var(--f-util);font-weight:500;letter-spacing:.1em;text-transform:uppercase; padding:.72em 1.3em;font-size:.74rem;margin-inline:0;border-radius:2px; } @media (max-width:900px){ .burger{display:flex} /* the appointment button is the drawer's job below this width */ .bar > .btn{display:none} } @media (min-width:901px){ .drawer{display:none} } } /* the social row the shell injects into older footers */ .socials{display:flex;gap:10px;margin-top:20px} .socials a{ width:38px;height:38px;border:1px solid #1B2027;border-radius:999px; display:grid;place-items:center;color:#97A3AD; transition:color .2s ease, border-color .2s ease, background .2s ease; } .socials a:hover{color:#fff;border-color:#97A3AD;background:#12161B} .socials svg{width:16px;height:16px;display:block;fill:currentColor} /* ── the canonical footer ─────────────────────────────────────────── Brand block and three link columns, generously spaced; the policies and registration details sit in a separate base row. On a phone the columns stack in a single left-aligned run, which is what stops the middle one drifting out of line. */ footer.cfoot{background:#050506;color:#97A3AD;border-top:1px solid #14181C} .cf-in{ display:grid;grid-template-columns:minmax(280px,1.15fr) 2fr; gap:clamp(34px,5vw,80px); padding-block:clamp(52px,6vw,80px) clamp(34px,4vw,52px); } .cf-brand{display:grid;gap:18px;align-content:start;max-width:42ch} #app footer.cfoot .mark{color:#FFFFFF;width:clamp(104px,11vw,132px);aspect-ratio:69.94/12.45;display:block} .cf-about{ font-size:.95rem;line-height:1.75;color:#8D9AA5;margin:0;max-width:40ch; } .cf-meta{display:grid;gap:8px;font-size:.93rem;line-height:1.6} .cf-meta a{color:#97A3AD;text-decoration:none} .cf-meta a:hover{color:#F4F7FA} .cf-cols{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(26px,3.4vw,54px); } .cf-col{min-width:0} .cf-col h4{ font-family:var(--f-util,"Jost",system-ui,sans-serif); font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase; color:#F4F7FA;margin:0 0 16px; } .cf-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px} .cf-col a{color:#97A3AD;text-decoration:none;font-size:.94rem;line-height:1.4;transition:color .2s ease} .cf-col a:hover{color:#E2B266} footer.cfoot .socials{display:flex;gap:10px;margin-top:2px} footer.cfoot .socials a{ width:38px;height:38px;border:1px solid #1B2027;border-radius:999px; display:grid;place-items:center;color:#97A3AD; transition:color .2s ease, border-color .2s ease, background .2s ease; } footer.cfoot .socials a:hover{color:#E2B266;border-color:#3A2708;background:#12161B} footer.cfoot .socials svg{width:16px;height:16px;display:block;fill:currentColor} .cf-base{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:14px 34px;padding-block:22px clamp(26px,3vw,34px); border-top:1px solid #16191D; font-family:var(--f-util,"Jost",system-ui,sans-serif); font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#6C7A85; } .cf-legal{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.62rem;letter-spacing:.13em} #app .cf-legal a{ color:#8D9AA5;text-decoration:none;transition:color .2s ease; font-family:var(--f-util,"Jost",system-ui,sans-serif); font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;line-height:1.5; } .cf-reg{display:flex;flex-wrap:wrap;gap:8px 22px} @media (max-width:960px){ .cf-in{grid-template-columns:1fr;gap:clamp(32px,5vw,44px)} .cf-brand{max-width:none} } @media (max-width:640px){ /* a single left-aligned run: the three columns stack rather than sitting in a 2-up grid where the middle one lands off-axis */ .cf-cols{grid-template-columns:1fr;gap:30px} .cf-legal a{padding-block:6px} .cf-base{flex-direction:column;align-items:flex-start} } /* the "Highlight placeholders" toggle was a drafting aid, not part of the site. Hidden here so it never flashes, and removed from the DOM in the router once the page's own script has finished with it. */ #app .phbtn{display:none !important} /* ── artwork frames ───────────────────────────────────────────────── Several of these files carry their own empty margin, so a 1px frame drawn round the image box landed out in the whitespace and read as a broken border - worst on the phone screenshots. The templates no longer draw it; this covers the pages baked before they changed. */ #app .split-media img, #app figure img, #app .creative img, #app .shot img{border:0} #app .split-media img, #app figure img{background:none} /* ── text contrast ────────────────────────────────────────────────── The two muted greys were the site's one real contrast failure. The lighter of them carries eyebrows, captions, counts and figure labels - small uppercase type, which is exactly the case the guideline is about - and sat at 2.5:1 on white where 4.5 is required. Both are darkened by roughly one step, keeping the hue and the ramp between them: --muted-2 #93A5B4 -> #5B6E80 2.54 -> 5.27 on white, 4.81 on tint --muted #5C7488 -> #4F6377 4.87 -> 6.21 on white, 5.67 on tint Set on #app rather than :root so it reaches every page's own stylesheet, including the ones merged as published. Dark sections name their own colours and are untouched. */ /* Two smaller misses, both on small text over the tinted band: the section eyebrow in Castle blue 4.17 -> 5.42 the open FAQ question in gold 3.65 -> 5.63 The gold moves onto the shade already used for links and descriptors, so the page ends up with one gold rather than two. */ /* The accent carries small labels, breadcrumbs, step numbers and inline links, and at 12px on the tinted band it sat at 4.17. Darkened at the token so every one of those is covered rather than the handful I could name; it stays recognisably Castle blue. */ /* ── the burger drawer's own nav ──────────────────────────────────── Several page stylesheets carry a bare `@media (max-width:Npx){ nav {display:none} }`, written when the only