/* ─── tokens ───────────────────────────────────────────────────────────── Palette taken from the trade, not the tourist brochure: drafting ink, sage-gray mylar sheet, cyanotype blue for structure, mango for action. */ :root{ --ink: #0E1A1E; --ink-70: #3A4A4E; --ink-45: #6C7B7E; --sheet: #D8DFDC; --sheet-hi: #E6EBE8; --sheet-lo: #C5CFCB; --cyan: #2C6070; --mango: #DE8B24; --line: rgba(14,26,30,.22); --line-hi: rgba(14,26,30,.42); --display: "Arial Narrow", "Helvetica Neue Condensed", "Liberation Sans Narrow", sans-serif; --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace; --gut: clamp(18px, 4vw, 48px); --max: 1240px; --edge: clamp(10px, 2vw, 22px); /* breathing room outside the panels */ /* corner radii — panels, controls, pills */ --r: clamp(16px, 2.2vw, 28px); --r-sm: 12px; --r-xs: 8px; --surface: color-mix(in srgb, var(--sheet-hi) 74%, transparent); } /* Dark values live in one place so a page can force them with instead of waiting on the system setting. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ink:#DCE4E1; --ink-70:#A9B6B3; --ink-45:#7C8A87; --sheet:#0F1719; --sheet-hi:#182225; --sheet-lo:#0A1113; --cyan:#6FB0C4; --mango:#F0A544; --line:rgba(220,228,225,.20); --line-hi:rgba(220,228,225,.40); } } :root[data-theme="dark"]{ --ink:#DCE4E1; --ink-70:#A9B6B3; --ink-45:#7C8A87; --sheet:#0F1719; --sheet-hi:#182225; --sheet-lo:#0A1113; --cyan:#6FB0C4; --mango:#F0A544; --line:rgba(220,228,225,.20); --line-hi:rgba(220,228,225,.40); color-scheme:dark; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--sheet); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; /* graph paper, faint — the surface he actually draws on */ background-image: linear-gradient(var(--line) .5px, transparent .5px), linear-gradient(90deg, var(--line) .5px, transparent .5px); background-size:26px 26px; background-position:-.5px -.5px; } img{max-width:100%} :focus-visible{outline:2px solid var(--mango); outline-offset:3px} /* the hidden attribute must win over any display a component sets, or an element told to hide simply carries on showing */ [hidden]{display:none !important} /* the plan being drawn behind everything — walls streak in, a new plan per screen */ #plan{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none} .top, main, footer{position:relative} /* main sits above the footer: both were z-index 1, so the footer won on DOM order and painted over any drop-down that hung past the end of a section */ footer{z-index:1} main{z-index:2} /* ─── drafting primitives ─── */ .sheet{width:min(var(--max), 100% - var(--edge)*2); margin-inline:auto; padding-inline:var(--gut)} .rule{height:1px; background:var(--line-hi); border:0; margin:0} .eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-45); display:flex; align-items:center; gap:12px; } .eyebrow::after{content:""; flex:1; height:1px; background:var(--line)} h1,h2,h3{font-family:var(--display); font-weight:700; letter-spacing:-.005em; margin:0; text-transform:uppercase} h1{font-size:clamp(38px,7.4vw,86px); line-height:.94} h2{font-size:clamp(26px,4.2vw,46px); line-height:1.02} h3{font-size:clamp(17px,2vw,21px); line-height:1.2; letter-spacing:.02em} p{margin:0 0 1em} a{color:inherit} .lede{font-size:clamp(16px,1.9vw,19px); color:var(--ink-70); max-width:54ch} /* ─── opening screen ─────────────────────────────────────────────── The door. Photo full bleed when there is one; when there isn't, the panel goes translucent and the floor plan drawing behind becomes the backdrop instead — deliberate either way. */ body.gated{overflow:hidden} /* while the gate is up, the site itself stays out of sight — the only thing visible behind the translucent panel is the plan drawing itself */ .top, main, footer{transition:opacity .55s ease .1s} body.gated .top, body.gated main, body.gated footer{opacity:0} #gate{ position:fixed; inset:0; z-index:60; display:grid; align-content:center; background:color-mix(in srgb, var(--sheet) 78%, transparent); transition:opacity .5s ease, transform .5s cubic-bezier(.4,0,.2,1); } #gate.shut{opacity:0; transform:translateY(-2.5%); pointer-events:none} #gate .shot{ position:absolute; inset:0; background-size:cover; background-position:center 26%; opacity:0; transition:opacity .8s ease; } #gate.lit{background:#0E1A1E} #gate.lit .shot{opacity:1} /* Over a photo the type goes light on a dark scrim. Portraits are rarely bright enough to carry dark text, and a scrim heavy enough to fix that would grey him out. Weighted to the left and bottom so his face stays clear. */ #gate.lit .shot::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(8,14,16,.86) 0%, rgba(8,14,16,.55) 42%, rgba(8,14,16,.12) 72%), linear-gradient(0deg, rgba(8,14,16,.80) 0%, rgba(8,14,16,.10) 55%); } #gate.lit .gate-name{color:#F2F5F3} #gate.lit .gate-line{color:#C9D4D1} #gate.lit .gate-mark{color:#93A3A0} #gate.lit .gate-mark::after{background:rgba(242,245,243,.28)} #gate.lit .gate-role{color:#A9B6B3} #gate.lit .btn.ghost{color:#F2F5F3; border-color:rgba(242,245,243,.55)} #gate.lit .btn.ghost:hover{background:#F2F5F3; color:#0E1A1E} .gate-in{ position:relative; z-index:2; width:min(var(--max), 100% - var(--edge)*2); margin-inline:auto; padding-inline:var(--gut); } .gate-in > *{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards} .gate-in > :nth-child(1){animation-delay:.10s} .gate-in > :nth-child(2){animation-delay:.20s} .gate-in > :nth-child(3){animation-delay:.30s} .gate-in > :nth-child(4){animation-delay:.42s} .gate-in > :nth-child(5){animation-delay:.54s} .gate-in > :nth-child(6){animation-delay:.66s} .gate-in > :nth-child(7){animation-delay:.78s} /* the mark opens the sequence — it arrives before the name */ .gate-logo{ display:block; width:clamp(46px,6.5vw,66px); height:auto; color:var(--cyan); overflow:visible; margin-bottom:26px; } #gate.lit .gate-logo{color:#7FBFD3} @keyframes rise{to{opacity:1; transform:none}} .gate-mark{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-45); display:flex; align-items:center; gap:12px; margin-bottom:22px; } .gate-mark::after{content:""; flex:1; height:1px; background:var(--line-hi); max-width:190px} /* On a narrow screen the flex row breaks the name across two ragged lines. Drop to normal text flow and lose the rule — it has no room to sit anyway. */ @media (max-width:560px){ .gate-mark{display:block; font-size:10px; letter-spacing:.1em} .gate-mark::after{display:none} } /* Deliberately not an h1 — the hero headline behind it is the page's h1, and two of them muddies both the outline and the search snippet. */ .gate-name{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:-.005em; color:var(--ink); font-size:clamp(42px,9vw,104px); line-height:.92; margin:0 0 6px; } /* the slogan sits directly under the name, before the trade description — it is the promise, the line below is the job */ .gate-slogan{ font-family:var(--display); text-transform:uppercase; font-weight:700; font-size:clamp(17px,2.4vw,27px); line-height:1.05; letter-spacing:.01em; color:var(--cyan); margin:0 0 12px; max-width:20ch; } #gate.lit .gate-slogan{color:#7FBFD3} .gate-role{ font-family:var(--mono); font-size:clamp(11px,1.5vw,13px); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-45); margin-bottom:24px; } .gate-line{font-size:clamp(16px,2vw,20px); color:var(--ink-70); max-width:38ch; margin-bottom:36px} .gate-btns{display:flex; gap:12px; flex-wrap:wrap; align-items:center} .gate-btns .btn{padding:16px 26px; font-size:13px} /* ── appointment drop-down ── The two ways in live inside this instead of sitting loose on the page. */ .drop{position:relative} #apptBtn{cursor:pointer; font:inherit; font-family:var(--mono); font-size:13px; letter-spacing:.09em; text-transform:uppercase; padding:16px 26px} #apptBtn .caret{transition:transform .2s ease} .drop.open #apptBtn .caret{transform:rotate(180deg)} .drop-menu{ position:absolute; left:0; top:calc(100% + 10px); min-width:100%; background:var(--sheet-hi); border:1px solid var(--line-hi); border-radius:var(--r-sm); padding:6px; display:grid; gap:2px; z-index:5; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; box-shadow:0 14px 34px rgba(8,14,16,.18); } /* bridges the 10px gap so the pointer can travel button → menu without it closing */ .drop-menu::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px} .drop.open .drop-menu{opacity:1; visibility:visible; transform:none} .drop-menu a, .drop-menu button{ display:block; width:100%; text-align:left; cursor:pointer; padding:12px 18px; text-decoration:none; white-space:nowrap; border:0; background:none; border-radius:calc(var(--r-sm) - 5px); color:var(--ink); font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; transition:background .15s ease, color .15s ease, padding-left .18s cubic-bezier(.2,.7,.3,1); } .drop-menu a::after, .drop-menu button::after{ content:"→"; margin-left:10px; opacity:.45; display:inline-block; transition:transform .18s cubic-bezier(.2,.7,.3,1); } .drop-menu a:hover, .drop-menu a:focus-visible, .drop-menu button:hover, .drop-menu button:focus-visible{ background:var(--cyan); color:var(--sheet-hi); padding-left:22px; } .drop-menu a:hover::after, .drop-menu button:hover::after{transform:translateX(4px)} .drop-menu a:active, .drop-menu button:active{transform:scale(.98)} /* a chosen district keeps a mark against it when you come back to the step */ .drop-menu button[aria-checked="true"]{color:var(--mango)} .drop-menu button[aria-checked="true"]::before{content:"✓ "; opacity:.9} /* ─── where: region menu, then district menu ─── */ .q-where{display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:620px} @media (max-width:640px){ .q-where{grid-template-columns:1fr} } .q-pick{position:relative} .pick-cap{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-45); margin-bottom:6px; } .pick-btn{ width:100%; justify-content:space-between; padding:13px 17px; font-size:12px; background:var(--sheet-hi); color:var(--ink); border-color:var(--line-hi); } .pick-btn:hover{background:var(--sheet-hi); border-color:var(--cyan)} .pick-btn .lbl{text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .pick-btn .caret{transition:transform .2s ease; flex:none} .q-pick.open .pick-btn .caret{transform:rotate(180deg)} /* the district menu is inert until a region is chosen — say so, don't just fail */ .pick-btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none} .pick-btn:disabled:hover{border-color:var(--line-hi)} #districtPick.ready .pick-btn{border-color:var(--mango)} /* menu items carry a big heading and a quiet line under it */ /* Six districts is taller than the panel, so the menu used to spill across the footer. Cap it and let it scroll instead. */ .drop-menu.wide{ min-width:max(100%, 260px); white-space:normal; max-height:min(300px, 46vh); overflow-y:auto; overscroll-behavior:contain; } /* items here are in some menus and