/* ========================================================================== GRATICULE — Land & Hydrographic Survey Two complete themes, and both are things a surveyor actually looks at. OFFICE is the drafting sheet: cream film, graphite linework, brown contours, hydrographic blue, one crimson that only ever marks a section line or a control station. FIELD is the other half of the job — the black model space of the instrument display and the CAD screen, where the same linework goes cyan and the same crimson goes hot. It is a real theme, set on as data-mode="field": every token swaps, and the map redraws from its own palette rather than being filtered. Every colour pair in both themes was measured, not eyeballed. Body text clears WCAG AA at 4.5:1, large text and linework at 3:1. The muted tones are the ones that fail in practice, so they carry their ratio in a comment. Layout grammar is orthogonal throughout: rules, connectors and callouts run at 0/90 degrees or at exactly 45. There are no arbitrary curves and no radii above 2px anywhere in this file. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Office — drafting film and ink */ --paper: #ece7dc; --paper-2: #e3ddd0; --paper-3: #d8d1c0; --ink: #14181c; /* 14.4:1 on paper */ --ink-2: #333a41; /* 9.1:1 */ --muted: #5f5a50; /* 5.6:1 — measured */ --rule: #cdc4b2; --rule-soft: #ded6c8; --rule-hard: #a89e89; --signal: #b32240; /* 5.3:1 on paper — control marks, section line */ --signal-deep: #8c1830; --signal-wash: #f6e3e6; --on-signal: #ffffff; /* 6.5:1 on signal */ --contour: #96683c; /* 3.9:1 — linework and index labels only */ --contour-2: #b08c62; --water: #2c6c8a; /* 4.7:1 */ --water-fill: #cfe0e6; --grid-line: #97a8ae; /* Plate — the dark band that carries the rhythm in both themes */ --plate: #101418; --plate-2: #171d23; --plate-rule: #2a333c; --on-plate: #e6e1d6; /* 14.2:1 on plate */ --on-plate-mut:#99a0a8; /* 7.0:1 */ --plate-signal:#ef5f7d; /* 5.8:1 on plate */ --plate-cyan: #57c8d8; /* 9.4:1 on plate */ --shadow: 0 1px 2px rgba(20, 24, 28, .05), 0 10px 30px rgba(20, 24, 28, .07); --shadow-lift: 0 2px 5px rgba(20, 24, 28, .08), 0 24px 56px rgba(20, 24, 28, .14); --display: 'Fraunces', Georgia, 'Times New Roman', serif; --ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --wrap: 80rem; --wrap-tight: 54rem; --gutter: clamp(1.15rem, 4vw, 2.75rem); --bay: clamp(3.5rem, 7.5vw, 7rem); --ease: cubic-bezier(.2, .6, .3, 1); } /* Field — instrument display and CAD model space. */ [data-mode="field"] { --paper: #0b0e12; --paper-2: #10151a; --paper-3: #161c23; --ink: #e8e4d9; /* 14.9:1 on paper */ --ink-2: #c8c6bd; --muted: #98a2ac; /* 7.5:1 — the tone that decides this theme */ --rule: #2a3138; --rule-soft: #1c2228; --rule-hard: #3b444d; --signal: #ff5d7d; /* 6.5:1 on paper */ --signal-deep: #ff8ea4; --signal-wash: #1e0a10; --on-signal: #10060a; /* 6.7:1 on signal */ --contour: #4fb3c4; /* 7.9:1 — cyan linework, the CAD convention */ --contour-2: #7fd0dd; --water: #4f92cc; /* 6.0:1 */ --water-fill: #12242f; --grid-line: #33424c; --plate: #12171d; --plate-2: #191f26; --plate-rule: #2d363f; --shadow: none; --shadow-lift: 0 0 0 1px #2a3138; } /* -------------------------------------------------------------------------- 2. Reset and base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ui); font-size: 1rem; line-height: 1.62; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; transition: background-color .25s var(--ease), color .25s var(--ease); } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.06; letter-spacing: -.018em; margin: 0 0 .6em; font-variation-settings: 'SOFT' 0, 'WONK' 0; } h1 { font-size: clamp(2.6rem, 6.2vw, 4.9rem); } h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); } h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.2; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } .lede { font-size: clamp(1.06rem, 1.5vw, 1.26rem); line-height: 1.55; color: var(--ink-2); max-width: 44ch; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .label { font-family: var(--mono); font-size: .715rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; display: block; } .label--signal { color: var(--signal); } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--tight { max-width: var(--wrap-tight); } .bay { padding-block: var(--bay); } .bay--half { padding-block: calc(var(--bay) * .55); } .rule { border: 0; border-top: 1px solid var(--rule); margin: 0 0 var(--bay); } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--signal); color: var(--on-signal); padding: .7rem 1.1rem; font-family: var(--mono); font-size: .8rem; } .skip:focus { left: 0; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } /* -------------------------------------------------------------------------- 3. Header — the sheet band (Unigrid DNA: a persistent structural bar) -------------------------------------------------------------------------- */ .top { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--rule); } .band { background: var(--plate); color: var(--on-plate-mut); font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; } .band__in { display: flex; gap: 1.4rem; align-items: center; justify-content: space-between; min-height: 2rem; overflow: hidden; white-space: nowrap; } .band__set { display: flex; gap: 1.4rem; align-items: center; } .band b { color: var(--on-plate); font-weight: 500; } /* The band is a single nowrap line by design — a sheet header does not wrap. Below the point where both halves fit, the right-hand half is dropped rather than being clipped mid-word. */ @media (max-width: 52rem) { .band__set:last-child { display: none; } } @media (max-width: 30rem) { .band__set span:last-child { display: none; } } .bar { display: flex; align-items: center; gap: 1.5rem; min-height: 4.4rem; } .mark { text-decoration: none; display: block; margin-right: auto; } .mark__word { font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: .13em; display: block; line-height: 1; } .mark__sub { font-family: var(--mono); font-size: .625rem; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); display: block; margin-top: .32rem; } .nav { display: none; gap: 1.55rem; } .nav a { font-size: .85rem; font-weight: 500; text-decoration: none; padding-block: .3rem; border-bottom: 2px solid transparent; color: var(--ink-2); } .nav a:hover { color: var(--ink); border-bottom-color: var(--signal); } .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); } .tools { display: flex; align-items: center; gap: .55rem; } .mode { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 1px solid var(--rule-hard); color: var(--ink-2); font-family: var(--mono); font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; padding: .45rem .7rem; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); } .mode:hover { border-color: var(--ink); color: var(--ink); } .mode__led { width: .55rem; height: .55rem; background: var(--rule-hard); box-shadow: inset 0 0 0 1px var(--paper); } [data-mode="field"] .mode__led { background: var(--contour); } .mode__txt::after { content: 'Office'; } [data-mode="field"] .mode__txt::after { content: 'Field'; } .burger { background: none; border: 1px solid var(--rule-hard); color: var(--ink); width: 2.5rem; height: 2.3rem; display: grid; place-items: center; cursor: pointer; } .burger svg { width: 1.1rem; height: 1.1rem; } .drawer { border-top: 1px solid var(--rule); background: var(--paper-2); } .drawer nav { display: grid; padding-block: .8rem 1.3rem; } .drawer a { text-decoration: none; padding: .6rem 0; font-size: .95rem; font-weight: 500; border-bottom: 1px solid var(--rule-soft); } @media (min-width: 64rem) { .nav { display: flex; } .burger { display: none; } .drawer { display: none !important; } } /* -------------------------------------------------------------------------- 4. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .55rem; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; padding: .82rem 1.3rem; text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .btn:hover { background: var(--signal); border-color: var(--signal); color: var(--on-signal); } .btn--ghost { background: none; color: var(--ink); border-color: var(--rule-hard); } .btn--ghost:hover { background: none; color: var(--signal); border-color: var(--signal); } .btn--sm { padding: .55rem .85rem; font-size: .7rem; } .btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; } /* -------------------------------------------------------------------------- 5. The sheet — hero instrument -------------------------------------------------------------------------- */ .sheet { border-bottom: 1px solid var(--rule); } .sheet__grid { display: grid; } /* The text column is inset so its content lines up with the site's `wrap` gutter, which means the track has to grow by that same outer margin — otherwise the padding eats the track. At a fixed 30rem the content width fell to 71px at a 1920 viewport. Written this way the measure stays a constant 26rem minus gutters at every width above the breakpoint, and the map takes everything else. */ @media (min-width: 68rem) { .sheet__grid { grid-template-columns: minmax(20rem, calc(max(0px, 100vw - var(--wrap)) / 2 + 26rem)) 1fr; } } /* -- left margin column: the title block ---------------------------------- */ .sheet__text { padding: clamp(2.2rem, 5vw, 4.2rem) var(--gutter) clamp(2.4rem, 5vw, 3.6rem); display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--rule); } @media (min-width: 68rem) { .sheet__text { border-bottom: 0; border-right: 1px solid var(--rule); padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); } } /* The hero heading sits in a margin column that stops growing at 30rem while the viewport keeps going, and the column's own left padding grows with it. A vw clamp therefore overshoots the column at wide sizes — at 1440 it broke "measurement" across two lines mid-word. Size against the column itself. */ .sheet__text { container-type: inline-size; } .sheet__text h1 { font-size: clamp(2.1rem, 13cqi, 3.4rem); margin-bottom: .5em; text-wrap: balance; overflow-wrap: break-word; } .sheet__text .lede { max-width: 34ch; } .sheet__text .btn-row { margin-top: 1.8rem; } .creds { margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* -- right: the map body with marginalia rails ---------------------------- */ .sheet__map { background: var(--paper-2); display: grid; } .rail { font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; padding: .6rem clamp(.8rem, 2vw, 1.4rem); border-bottom: 1px solid var(--rule); min-height: 2.3rem; } .rail--foot { border-bottom: 0; border-top: 1px solid var(--rule); justify-content: space-between; } .rail b { color: var(--ink); font-weight: 500; } .rail__sp { margin-left: auto; } .plot { position: relative; aspect-ratio: 4 / 5; background: var(--paper); overflow: hidden; touch-action: pan-y; } @media (min-width: 46rem) { .plot { aspect-ratio: 16 / 10; } } @media (min-width: 68rem) { .plot { aspect-ratio: auto; min-height: 30rem; } } .plot canvas, .plot svg { position: absolute; inset: 0; width: 100%; height: 100%; } .plot svg { overflow: visible; } .plot__cursor { position: absolute; z-index: 3; pointer-events: none; background: var(--paper); border: 1px solid var(--ink); font-family: var(--mono); font-size: .655rem; line-height: 1.5; padding: .35rem .5rem; white-space: nowrap; transform: translate(.75rem, .75rem); opacity: 0; transition: opacity .12s linear; } .plot__cursor[data-on="1"] { opacity: 1; } .plot__cursor b { color: var(--signal); font-weight: 500; } /* Map furniture. The scale bar is 500 ground metres wide and the sheet is 2400 m across, so 500/2400 = 20.8333% of the plot is a true scale bar at any viewport — no JS, and it cannot drift out of step with the drawing. */ .plot__scale { position: absolute; z-index: 2; left: .9rem; bottom: .9rem; width: 20.8333%; pointer-events: none; } /* No min-width: a scale bar with a floor is no longer a scale bar. On a narrow sheet the middle graduation is dropped instead. */ @media (max-width: 34rem) { .plot__scale-txt em { display: none; } } .plot__scale-bar { display: flex; height: .42rem; border: 1px solid var(--ink); } .plot__scale-bar i { flex: 1; display: block; } .plot__scale-bar i:first-child { background: var(--ink); } .plot__scale-txt { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .6rem; color: var(--ink); margin-top: .18rem; } .plot__scale-txt em { font-style: normal; } .plot__north { position: absolute; z-index: 2; right: .9rem; top: .9rem; color: var(--ink); pointer-events: none; text-align: center; } .plot__north svg { width: .95rem; height: 1.6rem; margin-inline: auto; } .plot__north span { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; display: block; margin-top: .1rem; } /* Section handles: real buttons so they take focus and arrow keys. */ .handle { position: absolute; z-index: 4; width: 2.4rem; height: 2.4rem; margin: -1.2rem 0 0 -1.2rem; background: none; border: 0; padding: 0; cursor: grab; touch-action: none; display: grid; place-items: center; } .handle:active { cursor: grabbing; } .handle::before { content: ''; width: .85rem; height: .85rem; background: var(--signal); border: 2px solid var(--paper); transform: rotate(45deg); transition: transform .15s var(--ease); } .handle:hover::before, .handle:focus-visible::before { transform: rotate(45deg) scale(1.28); } .handle__tag { position: absolute; top: -.15rem; left: 1.5rem; font-family: var(--mono); font-size: .66rem; font-weight: 500; color: var(--signal); letter-spacing: .1em; } /* -- the profile ---------------------------------------------------------- */ .profile { background: var(--plate); color: var(--on-plate); } .profile__in { display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); padding: clamp(1.3rem, 3vw, 2rem) clamp(.9rem, 2.4vw, 1.6rem); } @media (min-width: 60rem) { .profile__in { grid-template-columns: 1fr 15rem; align-items: start; } } .profile__plot { position: relative; } .profile__plot svg { width: 100%; height: auto; } .profile__stats { display: grid; gap: 0; align-content: start; } /* Ten stacked rows is a long ladder on a phone. Below the sidebar breakpoint the readings pair up into two columns instead, which is how they sit on a field controller anyway. */ @media (max-width: 60rem) { .profile__stats { grid-template-columns: 1fr 1fr; column-gap: 1.4rem; } } @media (max-width: 24rem) { .profile__stats { grid-template-columns: 1fr; } } /* No pointer, no hover readout — so do not promise one. */ @media (hover: none) { .rail__hover { display: none; } } @media (hover: hover) { .rail__tap { display: none; } } .profile__stats div { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-bottom: 1px solid var(--plate-rule); font-family: var(--mono); font-size: .715rem; } .profile__stats dt, .profile__stats span:first-child { color: var(--on-plate-mut); letter-spacing: .07em; text-transform: uppercase; font-size: .655rem; } .profile__stats b { font-weight: 500; color: var(--on-plate); } .profile__note { font-family: var(--mono); font-size: .655rem; color: var(--on-plate-mut); line-height: 1.6; margin-top: .9rem; } .presets { display: flex; flex-wrap: wrap; gap: .4rem; } .presets button { background: none; border: 1px solid var(--plate-rule); color: var(--on-plate-mut); font-family: var(--mono); font-size: .655rem; letter-spacing: .08em; text-transform: uppercase; padding: .38rem .6rem; cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease); } .presets button:hover { color: var(--on-plate); border-color: var(--on-plate-mut); } .presets button[aria-pressed="true"] { color: var(--plate-signal); border-color: var(--plate-signal); } .toggle { display: inline-flex; align-items: center; gap: .45rem; background: none; border: 1px solid var(--rule-hard); color: var(--muted); font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .55rem; cursor: pointer; } .toggle[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); } .toggle i { width: .5rem; height: .5rem; border: 1px solid currentColor; display: block; } .toggle[aria-pressed="true"] i { background: currentColor; } /* -------------------------------------------------------------------------- 6. Capability index — a ruled table, not cards -------------------------------------------------------------------------- */ .index-list { border-top: 1px solid var(--ink); } .item { display: grid; gap: .3rem 1.6rem; grid-template-columns: 3.2rem 1fr; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; transition: background-color .2s var(--ease); } a.item:hover { background: var(--paper-2); } a.item:hover .item__go { color: var(--signal); transform: translateX(.25rem); } .item__n { font-family: var(--mono); font-size: .78rem; color: var(--signal); padding-top: .3rem; letter-spacing: .05em; } .item__h { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; } .item__h h3 { margin: 0; } .item__go { font-family: var(--mono); font-size: .7rem; color: var(--muted); margin-left: auto; transition: transform .2s var(--ease), color .2s var(--ease); } .item p { grid-column: 2; margin: 0; color: var(--ink-2); max-width: 62ch; } .item__spec { grid-column: 2; margin-top: .5rem; font-family: var(--mono); font-size: .68rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .25rem .9rem; } .item__spec span::before { content: '· '; color: var(--rule-hard); } .item__spec span:first-child::before { content: none; } @media (max-width: 40rem) { .item { grid-template-columns: 2.4rem 1fr; } } /* -------------------------------------------------------------------------- 7. Plate sections -------------------------------------------------------------------------- */ .plate-bay { background: var(--plate); color: var(--on-plate); } .plate-bay h2, .plate-bay h3 { color: var(--on-plate); } .plate-bay .lede, .plate-bay p { color: var(--on-plate-mut); } .plate-bay .label { color: var(--plate-signal); } .plate-bay .rule { border-color: var(--plate-rule); } .plate-bay .btn { background: var(--on-plate); border-color: var(--on-plate); color: var(--plate); } .plate-bay .btn:hover { background: var(--plate-signal); border-color: var(--plate-signal); color: var(--plate); } .plate-bay .btn--ghost { background: none; color: var(--on-plate); border-color: var(--plate-rule); } .plate-bay .btn--ghost:hover { background: none; color: var(--plate-signal); border-color: var(--plate-signal); } /* Anything muted inherits a token tuned for paper. On the plate that same token lands at 2.7:1, so every muted role is re-pointed rather than being patched per element. */ .plate-bay .field > label, .plate-bay .fieldset__legend, .plate-bay .kv dt, .plate-bay .est__out dt, .plate-bay .formnote, .plate-bay .profile__note, .plate-bay .item__spec, .plate-bay .record__meta { color: var(--on-plate-mut); } .plate-bay .field input, .plate-bay .field select, .plate-bay .field textarea { background: var(--plate-2); border-color: var(--plate-rule); color: var(--on-plate); } .plate-bay .field input::placeholder, .plate-bay .field textarea::placeholder { color: var(--on-plate-mut); opacity: 1; } .plate-bay .field input:focus, .plate-bay .field select:focus, .plate-bay .field textarea:focus { border-color: var(--on-plate); } .plate-bay .field__err { color: var(--plate-signal); } .plate-bay .field--bad input, .plate-bay .field--bad select, .plate-bay .field--bad textarea { border-color: var(--plate-signal); } .plate-bay :where(a, button, input, select, textarea):focus-visible { outline-color: var(--plate-signal); } .plate-bay .kv, .plate-bay .kv > div, .plate-bay .est__out, .plate-bay .est__out > div { border-color: var(--plate-rule); } .plate-bay .sent { background: var(--plate-2); border-color: var(--plate-signal); color: var(--on-plate); } .plate-bay .stage { border-top-color: var(--plate-rule); } .plate-bay .stage:first-child { border-top-color: var(--plate-signal); } .plate-bay .stage__n { color: var(--plate-signal); } .plate-bay .note { border-left-color: var(--plate-signal); color: var(--on-plate-mut); } .cols { display: grid; gap: clamp(1.6rem, 4vw, 3.4rem); } @media (min-width: 54rem) { .cols--2 { grid-template-columns: 1fr 1fr; } .cols--3 { grid-template-columns: repeat(3, 1fr); } .cols--sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } } /* accuracy ladder */ .ladder { display: grid; gap: 0; margin-top: 2rem; border-top: 1px solid var(--plate-rule); } .ladder__row { display: grid; grid-template-columns: 9.5rem 1fr 5.5rem; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--plate-rule); } .ladder__name { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; } .ladder__bar { position: relative; height: .5rem; background: var(--plate-2); } .ladder__bar i { position: absolute; top: 0; bottom: 0; display: block; background: var(--plate-cyan); } .ladder__val { font-family: var(--mono); font-size: .72rem; text-align: right; color: var(--on-plate-mut); } .ladder__scale { display: grid; grid-template-columns: 9.5rem 1fr 5.5rem; gap: 1rem; font-family: var(--mono); font-size: .62rem; color: var(--on-plate-mut); padding-top: .5rem; letter-spacing: .08em; } .ladder__ticks { display: flex; justify-content: space-between; } @media (max-width: 44rem) { .ladder__row, .ladder__scale { grid-template-columns: 1fr; gap: .35rem; } .ladder__val { text-align: left; } .ladder__scale { display: none; } } /* -------------------------------------------------------------------------- 8. Job records -------------------------------------------------------------------------- */ .records { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } @media (min-width: 56rem) { .records { grid-template-columns: repeat(3, 1fr); } } .record { background: var(--paper); padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .9rem; text-decoration: none; transition: background-color .2s var(--ease); } a.record:hover { background: var(--paper-2); } .record__no { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--signal); display: flex; justify-content: space-between; } .record__no span:last-child { color: var(--muted); } .record h3 { margin: 0; font-size: 1.24rem; } .record p { color: var(--ink-2); font-size: .93rem; margin: 0; } .record__meta { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--rule-soft); font-family: var(--mono); font-size: .655rem; color: var(--muted); display: grid; gap: .18rem; } .record__meta b { color: var(--ink-2); font-weight: 500; } /* -------------------------------------------------------------------------- 9. Process — Beck grammar: orthogonal and 45 only -------------------------------------------------------------------------- */ .flow { display: grid; gap: 0; margin-top: 2.4rem; } @media (min-width: 62rem) { .flow { grid-template-columns: repeat(6, 1fr); } } .flow--stack { grid-template-columns: 1fr !important; } .flow--stack .stage { border-left: 0; padding-inline: 0; } .stage { position: relative; padding: 1.4rem 1.2rem 1.5rem; border-top: 2px solid var(--rule); } .stage:first-child { border-top-color: var(--signal); } @media (min-width: 62rem) { .stage { border-left: 1px solid var(--rule); } .stage:first-child { border-left: 0; } } .stage__n { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; color: var(--signal); display: block; margin-bottom: .7rem; } .stage h3 { font-size: 1.05rem; margin-bottom: .4rem; } .stage p { font-size: .86rem; color: var(--ink-2); margin: 0; } /* -------------------------------------------------------------------------- 10. Prose blocks, tables, notes -------------------------------------------------------------------------- */ .prose { max-width: 66ch; } .prose h2 { margin-top: 2.4em; } .prose h2:first-child { margin-top: 0; } .prose h3 { margin-top: 2em; } .prose ul { padding-left: 1.1rem; margin: 0 0 1.1em; } .prose li { margin-bottom: .45em; } .spec-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .spec-table caption { text-align: left; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: .8rem; } .spec-table th, .spec-table td { text-align: left; padding: .7rem .8rem .7rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; } .spec-table th { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; border-bottom-color: var(--ink); } .spec-table td:last-child, .spec-table th:last-child { padding-right: 0; } .spec-table .num { color: var(--ink-2); white-space: nowrap; } .table-scroll { overflow-x: auto; } .note { border-left: 2px solid var(--signal); padding: .2rem 0 .2rem 1.1rem; color: var(--ink-2); font-size: .94rem; } .kv { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--rule); } .kv > div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule-soft); } .kv dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .kv dd { margin: 0; } @media (max-width: 40rem) { .kv > div { grid-template-columns: 1fr; gap: .1rem; } } /* -------------------------------------------------------------------------- 11. Forms — enquiry and brief estimator -------------------------------------------------------------------------- */ .field { display: grid; gap: .4rem; margin-bottom: 1.15rem; } .field > label, .fieldset__legend { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .field input, .field select, .field textarea { font-family: inherit; font-size: .95rem; color: var(--ink); background: var(--paper); border: 1px solid var(--rule-hard); padding: .68rem .75rem; width: 100%; border-radius: 0; } .field textarea { min-height: 8rem; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); } .field__err { color: var(--signal); font-family: var(--mono); font-size: .68rem; min-height: 1em; } .field--bad input, .field--bad select, .field--bad textarea { border-color: var(--signal); } .grid-2 { display: grid; gap: 0 1.2rem; } @media (min-width: 44rem) { .grid-2 { grid-template-columns: 1fr 1fr; } } .est { border: 1px solid var(--ink); background: var(--paper-2); padding: clamp(1.2rem, 3vw, 1.8rem); } .est__out { display: grid; gap: 0; margin: 1.2rem 0 0; border-top: 1px solid var(--rule-hard); } .est__out > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: .8rem; } .est__out dt { color: var(--muted); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; } .est__out dd { margin: 0; font-weight: 500; } .est__total { font-size: 1.35rem !important; } .est__total dd { color: var(--signal); } .est__work { font-family: var(--mono); font-size: .655rem; color: var(--muted); line-height: 1.7; margin-top: .9rem; } .formnote { font-family: var(--mono); font-size: .655rem; color: var(--muted); line-height: 1.7; } .sent { border: 1px solid var(--signal); background: var(--signal-wash); padding: 1rem 1.1rem; font-size: .93rem; margin-bottom: 1.2rem; } /* -------------------------------------------------------------------------- 12. Footer -------------------------------------------------------------------------- */ .foot { background: var(--plate); color: var(--on-plate-mut); padding-block: clamp(2.8rem, 6vw, 4.5rem) 2rem; } .foot__grid { display: grid; gap: 2rem; } @media (min-width: 50rem) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } } .foot__mark { font-family: var(--display); font-size: 1.25rem; font-weight: 600; letter-spacing: .13em; color: var(--on-plate); display: block; margin-bottom: .8rem; } .foot h2 { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-plate); margin-bottom: .9rem; } .foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; } .foot a { text-decoration: none; font-size: .88rem; } .foot a:hover { color: var(--on-plate); text-decoration: underline; } .foot p { font-size: .88rem; } .foot__fine { margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--plate-rule); display: grid; gap: .6rem; font-size: .78rem; } @media (min-width: 50rem) { .foot__fine { grid-template-columns: 1.7fr 1fr; align-items: start; } } /* -------------------------------------------------------------------------- 13. Reveals -------------------------------------------------------------------------- */ .js-anim .reveal { opacity: 0; transform: translateY(14px); } .js-anim .reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); } .js-anim .reveal--d1.in { transition-delay: .08s; } .js-anim .reveal--d2.in { transition-delay: .16s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js-anim .reveal { opacity: 1; transform: none; transition: none; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }