@import url("../assets/tokens.css");
/* ============================================================
Denver House Consultancy - site stylesheet
============================================================
Every colour, space, radius, shadow, layer and type size in this
file comes from the shared token layer at
schemeready/assets/tokens.css, which SchemeReady and the SchemeReady
app use as well. That file carries the older Denver House names
(--ink, --magenta, --grad and the rest) as aliases, and it holds the
dark theme, so the rules below follow the reader's choice on their
own.
Do not write a colour here. Add it to tokens.css, then run
schemeready/tools/check_contrast.py.
What the brand keeps in both themes
- the bright gradient, on the hexagon mark, the card top rule, the
checklist ticks and the soft washes
- the ink gradient wherever the gradient has to carry words
- the type scale and the weight of the headings
Every page loads, in :
(no defer)
The @import above is the fallback for anything that reaches this
stylesheet without the link.
============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--ds-font-sans);
color: var(--ds-text-default);
background: var(--ds-surface-page);
line-height: 1.65;
font-size: 16.5px;
-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
.container { width: min(var(--ds-container), 92%); margin-inline: auto; }
h1, h2, h3, h4 { color: var(--ds-text-heading); line-height: var(--ds-lh-heading); font-weight: 800; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.01em; }
h3 { font-size: 1.18rem; }
p + p { margin-top: .9em; }
a { color: var(--ds-brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
.grad-text {
background: var(--ds-brand-gradient-ink);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.eyebrow {
display: inline-block;
font-size: .8rem;
font-weight: var(--ds-weight-bold);
letter-spacing: .18em;
text-transform: uppercase;
background: var(--ds-brand-gradient-ink);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: var(--ds-space-sm);
}
.lead { font-size: 1.13rem; color: var(--ds-text-default); }
section { padding: 4.2rem 0; }
section.soft { background: var(--ds-surface-sunken); }
.section-head { max-width: 720px; margin-bottom: 2.4rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--ds-space-sm); }
/* ---------- Buttons ---------- */
.btn {
display: inline-block;
padding: var(--ds-space-sm) 1.7rem;
border-radius: var(--ds-radius-pill);
font-weight: var(--ds-weight-bold);
font-size: .98rem;
transition: transform var(--ds-motion-base) var(--ds-motion-ease),
box-shadow var(--ds-motion-base) var(--ds-motion-ease);
cursor: pointer;
border: none;
min-height: 44px;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary {
background: var(--ds-brand-gradient-ink);
color: var(--ds-brand-on-ink);
box-shadow: var(--ds-brand-shadow);
}
.btn-primary:hover { box-shadow: var(--ds-brand-shadow-strong); color: var(--ds-brand-on-ink); }
.btn-ghost {
background: var(--ds-surface-raised);
color: var(--ds-text-heading);
border: 2px solid var(--ds-border-strong);
}
.btn-ghost:hover { border-color: var(--ds-brand-ink); color: var(--ds-brand-ink); }
/* ---------- Header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: var(--ds-z-header);
background: var(--ds-surface-raised);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--ds-border-subtle);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-md);
padding: var(--ds-space-sm) 0;
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 46px; height: 46px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
font-weight: 900;
font-size: 1.18rem;
letter-spacing: .02em;
color: var(--ds-text-heading);
}
.brand-sub {
font-size: .62rem;
font-weight: var(--ds-weight-bold);
letter-spacing: .42em;
margin-top: var(--ds-space-3xs);
background: var(--ds-brand-gradient-ink);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.site-nav ul { display: flex; gap: var(--ds-space-lg); list-style: none; align-items: center; }
.site-nav a {
/* Matches .drop-trigger exactly. The Standards item is a button and the rest are
links; unless both use the same box, the button's text sits higher than the
links' baselines even though the boxes are centred on the same line. */
display: flex;
align-items: center;
color: var(--ds-text-heading);
font-weight: var(--ds-weight-medium);
font-size: .95rem;
padding: .4rem 0;
border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ds-brand-ink); text-decoration: none; }
.site-nav a.active { color: var(--ds-brand-ink); border-bottom-color: var(--ds-brand-ink); }
.site-nav .nav-cta {
background: var(--ds-brand-gradient-ink);
color: var(--ds-brand-on-ink);
padding: .55rem 1.25rem;
border-radius: var(--ds-radius-pill);
border-bottom: none;
}
.site-nav .nav-cta:hover { color: var(--ds-brand-on-ink); opacity: .92; }
.site-nav .nav-cta.active { color: var(--ds-brand-on-ink); border-bottom: none; }
/* Appearance toggle. theme.js draws the control; this only places it. */
.nav-theme { display: flex; align-items: center; }
.nav-theme .ds-theme-toggle { min-height: 38px; min-width: 38px; }
/* Standards dropdown */
.site-nav .nav-drop { position: relative; }
.drop-trigger {
background: none;
border: none;
cursor: pointer;
font: inherit;
font-weight: var(--ds-weight-medium);
font-size: .95rem;
color: var(--ds-text-heading);
padding: .4rem 0;
display: flex;
align-items: center;
gap: var(--ds-space-2xs);
border-bottom: 2px solid transparent;
}
.drop-trigger:hover { color: var(--ds-brand-ink); }
.drop-trigger.active { color: var(--ds-brand-ink); border-bottom-color: var(--ds-brand-ink); }
.caret { font-size: .65rem; transform: translateY(1px); }
.site-nav ul.dropdown {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
min-width: 290px;
background: var(--ds-surface-overlay);
border: 1px solid var(--ds-border-subtle);
border-radius: var(--ds-radius-md);
box-shadow: var(--ds-shadow-lg);
padding: var(--ds-space-xs);
z-index: var(--ds-z-dropdown);
}
.nav-drop:hover .dropdown,
.nav-drop:focus-within .dropdown,
.nav-drop.open .dropdown { display: block; }
.dropdown li + li { margin-top: var(--ds-space-3xs); }
.dropdown a {
display: block;
padding: .55rem .85rem;
border-radius: var(--ds-radius-sm);
border-bottom: none;
font-size: .93rem;
white-space: nowrap;
}
.dropdown a:hover { background: var(--ds-surface-sunken); color: var(--ds-brand-ink); }
.dropdown a.active { color: var(--ds-brand-ink); border-bottom: none; }
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: .4rem;
min-width: 40px;
min-height: 40px;
}
.nav-toggle span {
display: block;
width: 24px;
height: 3px;
border-radius: var(--ds-radius-pill);
background: var(--ds-text-heading);
margin: 5px 0;
transition: transform var(--ds-motion-base) var(--ds-motion-ease),
opacity var(--ds-motion-base) var(--ds-motion-ease);
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* ---------- Hero ---------- */
.hero {
position: relative;
padding: 5.5rem 0 5rem;
background:
radial-gradient(700px 380px at 88% -10%, var(--ds-brand-glow-3), transparent 65%),
radial-gradient(600px 340px at -5% 110%, var(--ds-brand-glow-1), transparent 65%),
radial-gradient(500px 300px at 50% 120%, var(--ds-brand-glow-2), transparent 65%),
var(--ds-surface-sunken);
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: var(--ds-space-2xl);
align-items: center;
}
.hero h1 { margin: .4rem 0 1.1rem; }
.hero .lead { max-width: 560px; }
.hero-ctas { display: flex; gap: .9rem; margin-top: 1.9rem; flex-wrap: wrap; }
.hero-badges { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: var(--ds-space-xl); }
.badge {
background: var(--ds-surface-raised);
border: 1px solid var(--ds-border-subtle);
border-radius: var(--ds-radius-pill);
padding: var(--ds-space-2xs) .95rem;
font-size: .82rem;
font-weight: var(--ds-weight-bold);
color: var(--ds-text-heading);
box-shadow: var(--ds-shadow-md);
}
.hero-art { display: flex; justify-content: center; }
.hero-art svg { width: min(320px, 70vw); filter: drop-shadow(var(--ds-brand-art-shadow)); }
/* Page hero (inner pages) */
.page-hero {
padding: var(--ds-space-3xl) 0 3.4rem;
background:
radial-gradient(600px 300px at 90% -20%, var(--ds-brand-glow-3), transparent 65%),
radial-gradient(500px 280px at 0% 130%, var(--ds-brand-glow-1), transparent 65%),
var(--ds-surface-sunken);
}
.page-hero h1 { margin: .4rem 0 .9rem; }
.page-hero .lead { max-width: 760px; }
.breadcrumb { font-size: .85rem; color: var(--ds-text-muted); margin-bottom: 1.2rem; }
.breadcrumb a { color: var(--ds-text-muted); }
.breadcrumb a:hover { color: var(--ds-brand-ink); }
/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
.card {
background: var(--ds-surface-raised);
border: 1px solid var(--ds-border-subtle);
border-radius: var(--ds-radius-md);
padding: 1.8rem;
box-shadow: var(--ds-shadow-md);
transition: transform var(--ds-motion-base) var(--ds-motion-ease),
box-shadow var(--ds-motion-base) var(--ds-motion-ease);
position: relative;
display: flex;
flex-direction: column;
}
a.card { color: var(--ds-text-default); }
a.card:hover { text-decoration: none; transform: translateY(-5px); box-shadow: var(--ds-shadow-lg); }
.card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
border-radius: var(--ds-radius-md) var(--ds-radius-md) 0 0;
background: var(--ds-brand-gradient);
}
.card h3 { margin: var(--ds-space-md) 0 .55rem; }
.card p { font-size: .96rem; }
.card .card-link {
margin-top: auto;
padding-top: 1.1rem;
font-weight: var(--ds-weight-bold);
color: var(--ds-brand-ink);
font-size: .93rem;
}
.card-icon {
width: 52px;
height: 52px;
border-radius: var(--ds-radius-md);
background: var(--ds-brand-gradient-soft);
display: flex;
align-items: center;
justify-content: center;
}
.card-icon svg { width: 28px; height: 28px; }
/* ---------- Feature / checklist ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-2xl); align-items: center; }
.checklist { list-style: none; margin-top: 1.2rem; }
.checklist li {
position: relative;
padding: .38rem 0 .38rem 2.1rem;
}
.checklist li::before {
content: "";
position: absolute;
left: 0;
top: .62rem;
width: 20px;
height: 20px;
border-radius: var(--ds-radius-circle);
background: var(--ds-brand-gradient);
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; counter-reset: step; }
.step {
background: var(--ds-surface-raised);
border: 1px solid var(--ds-border-subtle);
border-radius: var(--ds-radius-md);
padding: 1.6rem;
box-shadow: var(--ds-shadow-md);
}
.step-num {
width: 40px;
height: 40px;
border-radius: var(--ds-radius-circle);
background: var(--ds-brand-gradient-ink);
color: var(--ds-brand-on-ink);
font-weight: var(--ds-weight-heavy);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: .9rem;
font-size: 1.05rem;
}
.step h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.step p { font-size: .94rem; }
/* ---------- Clause / accordion ---------- */
.accordion {
border: 1px solid var(--ds-border-subtle);
border-radius: var(--ds-radius-md);
overflow: hidden;
background: var(--ds-surface-raised);
box-shadow: var(--ds-shadow-md);
}
.accordion details + details { border-top: 1px solid var(--ds-border-subtle); }
.accordion summary {
cursor: pointer;
padding: 1.05rem 1.4rem;
font-weight: var(--ds-weight-bold);
color: var(--ds-text-heading);
list-style: none;
display: flex;
align-items: center;
gap: var(--ds-space-sm);
transition: background var(--ds-motion-fast) var(--ds-motion-ease);
}
.accordion summary:hover { background: var(--ds-surface-sunken); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
content: "+";
margin-left: auto;
font-size: 1.3rem;
font-weight: var(--ds-weight-normal);
color: var(--ds-brand-ink);
transition: transform var(--ds-motion-slow) var(--ds-motion-ease);
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .acc-body { padding: 0 1.4rem 1.3rem; font-size: .97rem; }
.acc-tag {
flex: none;
font-size: .72rem;
font-weight: var(--ds-weight-heavy);
color: var(--ds-brand-on-ink);
background: var(--ds-brand-gradient-ink);
border-radius: var(--ds-radius-xs);
padding: .18rem .55rem;
letter-spacing: .04em;
}
/* ---------- Scheme tables ---------- */
.scheme-group { margin-bottom: 2.2rem; }
.scheme-group h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--ds-space-md); }
.scheme-list { display: grid; gap: .7rem; }
.scheme {
display: flex;
gap: var(--ds-space-md);
align-items: flex-start;
background: var(--ds-surface-raised);
border: 1px solid var(--ds-border-subtle);
border-radius: var(--ds-radius-md);
padding: .95rem 1.2rem;
box-shadow: var(--ds-shadow-sm);
}
.scheme-code {
flex: none;
min-width: 74px;
text-align: center;
font-weight: var(--ds-weight-heavy);
font-size: .85rem;
color: var(--ds-brand-on-ink);
background: var(--ds-brand-gradient-ink);
border-radius: var(--ds-radius-sm);
padding: .32rem var(--ds-space-xs);
margin-top: var(--ds-space-3xs);
}
.scheme p { font-size: .95rem; }
.scheme strong { color: var(--ds-text-heading); }
/* ---------- Info strip / stats ---------- */
.strip {
background: var(--ds-brand-gradient-ink);
color: var(--ds-brand-on-ink);
border-radius: var(--ds-radius-md);
padding: 2.6rem 2.4rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.6rem;
box-shadow: var(--ds-shadow-lg);
}
.strip h3 { color: var(--ds-brand-on-ink); font-size: 1.6rem; margin-bottom: var(--ds-space-3xs); }
.strip p { color: var(--ds-brand-on-ink); font-size: .95rem; }
/* ---------- CTA band ---------- */
.cta-band { padding: 4.5rem 0; }
.cta-box {
background: var(--ds-brand-gradient-ink);
border-radius: var(--ds-radius-xl);
color: var(--ds-brand-on-ink);
padding: 3.2rem 2.6rem;
text-align: center;
box-shadow: var(--ds-shadow-lg);
}
.cta-box h2 { color: var(--ds-brand-on-ink); margin-bottom: .7rem; }
.cta-box p { color: var(--ds-brand-on-ink); max-width: 620px; margin-inline: auto; }
.cta-box .btn { margin-top: 1.7rem; background: var(--ds-brand-on-ink); color: var(--ds-brand-ink-2); }
.cta-box .btn:hover { color: var(--ds-brand-ink-3); }
/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2.6rem; align-items: start; }
.contact-info .card { margin-bottom: 1.2rem; }
.contact-line { display: flex; gap: .9rem; align-items: flex-start; padding: .55rem 0; }
.contact-line svg { width: 22px; height: 22px; flex: none; margin-top: var(--ds-space-3xs); }
.contact-line span { font-size: .98rem; min-width: 0; }
/* The address is one long unbreakable word. Let it wrap rather than push
the narrow layout sideways. */
.contact-line span, .contact-line a, .site-footer a { overflow-wrap: anywhere; }
.contact-line strong { display: block; color: var(--ds-text-heading); font-size: .9rem; }
.form-card {
background: var(--ds-surface-raised);
border: 1px solid var(--ds-border-subtle);
border-radius: var(--ds-radius-md);
padding: 2.2rem;
box-shadow: var(--ds-shadow-md);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-md); }
.form-group { margin-bottom: 1.1rem; }
.form-group label {
display: block;
font-weight: var(--ds-weight-bold);
font-size: .88rem;
color: var(--ds-text-heading);
margin-bottom: var(--ds-space-2xs);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: var(--ds-space-sm) .9rem;
border: 1.5px solid var(--ds-border-strong);
border-radius: var(--ds-radius-sm);
font-family: inherit;
font-size: .97rem;
color: var(--ds-text-heading);
background: var(--ds-surface-sunken);
transition: border-color var(--ds-motion-fast) var(--ds-motion-ease),
box-shadow var(--ds-motion-fast) var(--ds-motion-ease);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--ds-brand-ink);
box-shadow: var(--ds-brand-focus-glow);
background: var(--ds-surface-raised);
}
.form-note { font-size: .85rem; color: var(--ds-text-muted); margin-top: .9rem; }
#form-status { margin-top: var(--ds-space-md); font-weight: var(--ds-weight-bold); display: none; }
#form-status.ok { display: block; color: var(--ds-success-fg); }
/* ---------- Footer ---------- */
.site-footer {
background: var(--ds-footer-bg);
color: var(--ds-footer-muted);
padding: 3.5rem 0 var(--ds-space-xl);
margin-top: var(--ds-space-3xl);
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 2.5rem;
padding-bottom: 2.4rem;
border-bottom: 1px solid var(--ds-footer-line);
}
.site-footer h4 { color: var(--ds-footer-text); font-size: 1rem; margin-bottom: var(--ds-space-md); }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a { color: var(--ds-footer-muted); font-size: .94rem; }
.site-footer a:hover { color: var(--ds-footer-text); }
.footer-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: var(--ds-space-md); }
.footer-brand .brand-name { color: var(--ds-footer-text); }
.footer-brand .brand-sub {
/* The footer block is dark in both themes, so the ink gradient would
read too low against it. The subtitle takes the footer's own text
colour instead of the gradient. */
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
color: var(--ds-footer-muted);
}
.footer-about { font-size: .92rem; max-width: 320px; }
.footer-bottom {
padding-top: 1.6rem;
display: flex;
justify-content: space-between;
gap: var(--ds-space-md);
flex-wrap: wrap;
align-items: center;
font-size: .84rem;
color: var(--ds-footer-muted);
}
/* The appearance control in the footer. theme.js draws it; this places
it and lets it sit on the dark footer block in both themes. */
.footer-theme {
display: flex;
align-items: center;
gap: var(--ds-space-xs);
/* Its own row above the legal line, so the reading order and the
visual order are the same at every width. */
flex-basis: 100%;
margin-bottom: var(--ds-space-md);
}
.footer-theme .ds-theme-toggle {
min-height: 40px;
min-width: 40px;
color: var(--ds-footer-text);
background: transparent;
border-color: var(--ds-footer-muted);
}
.footer-theme .ds-theme-toggle:hover {
background: var(--ds-footer-line);
color: var(--ds-footer-text);
}
.footer-theme .ds-theme-toggle-label { color: var(--ds-footer-text); }
.footer-theme .ds-theme-toggle:focus-visible {
outline: 3px solid var(--ds-footer-text);
outline-offset: 3px;
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.hero-grid, .split, .contact-grid { grid-template-columns: 1fr; }
.hero-art { order: -1; }
.hero-art svg { width: 180px; }
.card-grid, .card-grid.two, .steps, .strip { grid-template-columns: 1fr 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.card-grid, .card-grid.two, .steps, .strip, .footer-grid, .form-row { grid-template-columns: 1fr; }
.nav-toggle { display: block; }
.site-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--ds-surface-overlay);
border-bottom: 1px solid var(--ds-border-subtle);
box-shadow: var(--ds-shadow-lg);
display: none;
}
.nav-open .site-nav { display: block; }
.site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .6rem 4%; }
.site-nav > ul > li { border-bottom: 1px solid var(--ds-border-subtle); }
.site-nav > ul > li:last-child { border-bottom: none; padding: var(--ds-space-sm) 0; }
.site-nav a { display: block; padding: .85rem var(--ds-space-3xs); }
.site-nav a.active { border-bottom: none; }
.site-nav .nav-cta { text-align: center; }
.site-nav .nav-theme { padding: var(--ds-space-xs) var(--ds-space-3xs); }
/* Dropdown flattens into the mobile menu */
.drop-trigger { display: none; }
.site-nav ul.dropdown {
display: block;
position: static;
transform: none;
min-width: 0;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0;
}
.dropdown li + li { margin-top: 0; border-top: 1px solid var(--ds-border-subtle); }
.dropdown a { padding: .85rem var(--ds-space-3xs); border-radius: 0; white-space: normal; }
.dropdown a:hover { background: transparent; }
section { padding: var(--ds-space-2xl) 0; }
.hero { padding: 3.4rem 0 var(--ds-space-2xl); }
.scheme { flex-direction: column; gap: var(--ds-space-xs); }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* ============================================================
Additions, September 2026: SchemeReady readiness tools,
the expert hour page and accessibility helpers.
============================================================ */
/* Skip link: hidden until it receives keyboard focus */
.skip-link {
position: absolute;
top: 0;
left: -999px;
z-index: var(--ds-z-skip);
background: var(--ds-surface-inverse);
color: var(--ds-text-inverse);
font-weight: var(--ds-weight-bold);
padding: .7rem 1.1rem;
border-radius: 0 0 var(--ds-radius-sm) 0;
}
/* The ring is drawn inside the link's own dark block, in the colour that
block already carries its text in, so it is never clipped by the top left
corner of the window and it contrasts in both themes. */
.skip-link:focus {
left: 0;
text-decoration: none;
outline: 3px solid var(--ds-text-inverse);
outline-offset: -3px;
}
/* Visible keyboard focus on every interactive element */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--ds-border-focus);
outline-offset: 3px;
}
.btn-primary:focus-visible,
.site-nav .nav-cta:focus-visible { outline-color: var(--ds-border-focus); }
.site-footer :focus-visible { outline-color: var(--ds-footer-text); }
.cta-box :focus-visible,
.strip :focus-visible { outline-color: var(--ds-brand-on-ink); }
/* Navigation between tablet and desktop widths: the menu moves onto its own
row beneath the brand rather than wrapping beside it.
The bound has moved twice, for the same reason each time. It was 900px, and
the inline row did not actually fit until about 998px, so between those two
widths the wordmark and three items each broke onto two lines; that took it
to 1060px. Then the About page added a seventh item and the row stopped
fitting until about 1073px, so three items wrapped and the header grew from
70px to 92px between 1061 and 1073. It now runs to 1100px.
The measurements are from this Mac. The system font stack renders wider
under Segoe UI and Roboto, so the headroom above the measured threshold is
deliberate rather than generous. Adding an eighth nav item means measuring
this again. */
@media (min-width: 641px) and (max-width: 1100px) {
.header-inner { flex-wrap: wrap; row-gap: var(--ds-space-3xs); padding-bottom: var(--ds-space-xs); }
.site-nav { flex-basis: 100%; }
.site-nav ul { gap: 1.1rem; flex-wrap: wrap; justify-content: flex-end; }
.site-nav a, .drop-trigger { font-size: .9rem; }
}
/* Below 686px the row cannot hold all seven items at 1.1rem, and the
Contact Us pill drops to a row of its own */
@media (min-width: 641px) and (max-width: 686px) {
.site-nav ul { gap: .6rem; }
}
/* Readiness tools band on the home page */
.tools-band { background: var(--ds-brand-gradient-soft); }
.card-actions { margin-top: auto; padding-top: 1.3rem; display: flex; gap: .7rem; flex-wrap: wrap; }
.card .card-note { font-size: .88rem; color: var(--ds-text-default); margin-top: .9rem; }
.card .checklist { margin-top: .6rem; }
.card .checklist li { padding-top: var(--ds-space-2xs); padding-bottom: var(--ds-space-2xs); font-size: .95rem; }
/* Footer product line */
.footer-product { font-size: .92rem; margin-top: .9rem; max-width: 320px; }
.site-footer .footer-product a { color: var(--ds-sr-footer-link); text-decoration: underline; }
/* Expert hour page */
.price-tag {
display: inline-flex;
align-items: baseline;
gap: .45rem;
font-weight: var(--ds-weight-heavy);
color: var(--ds-text-heading);
font-size: 1.05rem;
margin-top: var(--ds-space-sm);
}
.price-tag .price-amount { font-size: 2rem; letter-spacing: -.02em; }
.notice {
background: var(--ds-surface-raised);
border: 1px solid var(--ds-border-subtle);
border-left: 5px solid var(--ds-brand-ink-3);
border-radius: var(--ds-radius-md);
padding: 1.4rem 1.6rem;
box-shadow: var(--ds-shadow-md);
}
.notice h3 { margin-bottom: var(--ds-space-xs); }
.notice p { font-size: .97rem; }
.booking-box {
background: var(--ds-surface-raised);
border: 1px solid var(--ds-border-subtle);
border-radius: var(--ds-radius-md);
padding: var(--ds-space-xl);
box-shadow: var(--ds-shadow-md);
}
.booking-box h3 { margin-bottom: .6rem; }
#booking:empty { display: none; }
.booking-fallback { margin-top: 1.2rem; }
.booking-fallback .btn { margin-top: var(--ds-space-sm); }
.terms-list { list-style: disc; padding-left: 1.3rem; margin-top: var(--ds-space-sm); }
.terms-list li { padding: var(--ds-space-2xs) 0; }
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.btn, a.card, .nav-toggle span, .accordion summary::after { transition: none; }
.btn:hover, a.card:hover { transform: none; }
}
/* ------------------------------------------------------------
Contrast lives in the shared token layer, proved by
schemeready/tools/check_contrast.py rather than asserted here.
- --ds-brand-ink is the brand written as text. It measures above
4.5:1 on every light surface and above 4.5:1 in dark.
- The eyebrow, the brand subtitle and .grad-text use the ink
gradient, whose three stops each meet 4.5:1 on both page
surfaces in both themes. The bright gradient is kept for fills,
rules and the mark, where it carries no words.
- The ink gradient as a fill carries --ds-brand-on-ink, which is
white in light and near black in dark, and clears 4.5:1 against
all three stops in both themes.
------------------------------------------------------------ */
/* ------------------------------------------------------------
Hero motif canvas
Drawn by schemeready/assets/hero-scene-denverhouse.js on the
shared engine in schemeready/assets/hero-canvas.js. The canvas
is created by script and inserted as the first child of .hero,
so it is never in the markup: if the script does not run there
is no empty element left behind and the hero is exactly what it
was. The engine sets position, size, pointer-events and the
z-index token inline; these rules are the part the page owns.
------------------------------------------------------------ */
.hero { isolation: isolate; }
.hero-grid { position: relative; z-index: var(--ds-z-raised); }
.hero-motif {
position: absolute;
inset: 0;
display: block;
pointer-events: none;
user-select: none;
}
@media print { [data-hero-canvas] { display: none; } }
/* ------------------------------------------------------------
The hero mark, animated
------------------------------------------------------------
The company mark is the hexagon and the tick, and on the home
page it is the largest thing on the screen. It used to be a
flat, still picture, which made the whole hero look like a
printed page: the motif canvas behind it draws at about one
per cent ink coverage, and next to a saturated 320px logo that
reads as nothing at all.
So the mark does the moving. It says the same sentence the
canvas says, at a size nobody can miss:
1. The outline traces itself, one continuous stroke around
all six edges, and closes.
2. The gradient fills the shape the outline just made.
3. The tick draws through it.
4. From then on the mark is never still: a slow band of
light crosses the face, and the hexagon sheds a ring of
itself outwards, both on a seven second cycle.
Steps 1 to 3 run once, in a shade over two seconds. Steps 4
are what somebody arriving late, or scrolling back up, sees.
The viewBox is wider than the mark (-16 to 116 rather than 0
to 100) so the rings have somewhere to go. The width below is
scaled by the same factor, so the hexagon itself lands at the
size it always was.
Nothing here is required for the mark to be correct: with no
CSS, or with animations off, the markup alone still draws the
finished logo.
------------------------------------------------------------ */
.hero-art svg.dh-mark {
width: min(414px, 88vw); /* 132/100 of the old 320px */
height: auto;
overflow: visible;
filter: none; /* moved onto the body, so the rings are not shadowed */
}
/* The gradient stops are set here rather than on the
elements, because a presentation attribute cannot hold var(). */
.dh-mark .dh-stop-1 { stop-color: var(--ds-brand-1); }
.dh-mark .dh-stop-2 { stop-color: var(--ds-brand-2); }
.dh-mark .dh-stop-3 { stop-color: var(--ds-brand-3); }
/* Icon colours live here, not on the elements, for the same reason as
the gradient stops above: a presentation attribute cannot hold var().
The stroke="#..." attributes stay put as the no-CSS fallback. */
.card-icon svg.icon-brand-1, .contact-line svg.icon-brand-1 { stroke: var(--ds-brand-1); }
.card-icon svg.icon-brand-2, .contact-line svg.icon-brand-2 { stroke: var(--ds-brand-2); }
.card-icon svg.icon-brand-3, .contact-line svg.icon-brand-3 { stroke: var(--ds-brand-3); }
.dh-mark__body {
filter: drop-shadow(var(--ds-brand-art-shadow));
transform-box: view-box;
transform-origin: 50px 50px;
}
/* --- the outline that traces first --- */
.dh-trace {
fill: none;
stroke: url(#lg-hero);
stroke-width: 2.4;
stroke-linejoin: round;
/* The six edges measure 280.6 user units in total; 282 covers
it with a shade to spare so the join never leaves a nick. */
stroke-dasharray: 282;
/* Undrawn by default. The animation pulls this to zero and holds it
there. It matters that the resting value is the hidden one: with
animations off there is no trace, rather than a 1.2 unit gradient
hairline standing proud of the face all the way round. */
stroke-dashoffset: 282;
}
/* --- the face --- */
.dh-face { fill: url(#lg-hero); }
/* --- the band of light that crosses the face --- */
.dh-sheen {
fill: url(#lg-hero-sheen);
transform-box: view-box;
transform-origin: 50px 50px;
transform: translateX(0) skewX(-16deg);
}
/* --- the tick --- */
.dh-tick {
fill: none;
stroke: #fff;
stroke-width: 13;
stroke-linecap: square;
/* 22.6 + 44.7 = 67.3 user units. */
stroke-dasharray: 68;
stroke-dashoffset: 0;
}
/* --- the rings the mark sheds --- */
.dh-ring {
fill: none;
stroke: url(#lg-hero);
/* User units, deliberately, so the ring thickens very slightly as it
spreads. non-scaling-stroke was tried first and was the wrong tool:
it pins the stroke to screen pixels, so 1.6 meant 1.6 physical pixels
across a 400px mark rather than the 4.9 the number implies, and the
ring all but disappeared. */
stroke-width: 2;
stroke-linejoin: round;
transform-box: view-box;
transform-origin: 50px 50px;
opacity: 0; /* still, until the animation runs */
}
/* ------------------------------------------------------------
The motion itself.
Everything above describes the finished mark. Everything below
is inside one query, so a reader who has asked their system for
less movement gets the finished mark and not one frame of
animation; there is no separate "reduced" path to keep correct.
------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
.dh-mark__body {
animation: dh-settle 1500ms cubic-bezier(.16, 1, .3, 1) both;
}
.dh-trace { animation: dh-draw-hex 900ms cubic-bezier(.5, 0, .2, 1) 120ms both; }
.dh-face { animation: dh-fill 650ms ease-out 900ms both; }
.dh-tick { animation: dh-draw-tick 750ms cubic-bezier(.4, 0, .25, 1) 1400ms both; }
.dh-sheen { animation: dh-sheen 7s linear 3s infinite; }
.dh-ring--1 { animation: dh-ring 7s cubic-bezier(.25, .6, .35, 1) 2.3s infinite; }
.dh-ring--2 { animation: dh-ring 7s cubic-bezier(.25, .6, .35, 1) 5.8s infinite; }
/* Replaying the arrival, when the reader scrolls back to the top
after being away. main.js adds the attribute and takes it off
again a frame later, which restarts every animation above. */
.hero-art[data-dh-replay] .dh-mark__body,
.hero-art[data-dh-replay] .dh-trace,
.hero-art[data-dh-replay] .dh-face,
.hero-art[data-dh-replay] .dh-tick { animation: none; }
}
@keyframes dh-settle {
from { transform: scale(.955); opacity: .25; }
to { transform: scale(1); opacity: 1; }
}
@keyframes dh-draw-hex {
from { stroke-dashoffset: 282; }
to { stroke-dashoffset: 0; }
}
@keyframes dh-fill {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes dh-draw-tick {
from { stroke-dashoffset: 68; }
to { stroke-dashoffset: 0; }
}
/* The band starts off the left edge of the face and finishes off
the right edge, so the jump back to the start is out of sight.
It crosses in the first sixth of the cycle and then waits. */
@keyframes dh-sheen {
0%, 2% { transform: translateX(0) skewX(-16deg); }
17% { transform: translateX(210px) skewX(-16deg); }
100% { transform: translateX(210px) skewX(-16deg); }
}
@keyframes dh-ring {
0% { transform: scale(1); opacity: 0; }
8% { opacity: .65; }
55% { transform: scale(1.28); opacity: 0; }
100% { transform: scale(1.28); opacity: 0; }
}
@media (max-width: 900px) {
.hero-art svg.dh-mark { width: 238px; } /* 132/100 of the old 180px */
}
@media print {
.dh-ring, .dh-sheen, .dh-trace { display: none; }
.dh-face, .dh-tick, .dh-mark__body { opacity: 1; transform: none; animation: none; }
}
/* The panel inverts the brand pair and uses --ds-brand-on-ink as a fill,
and the paper reset in tokens.css turns that token black, so this one
pill would print solid black whenever background graphics are on.
Outline it instead. */
@media print {
.cta-box .btn { background: none; color: #000000; border: 1px solid #000000; }
}
/* ------------------------------------------------------------
About page: the director's portrait.
A fixed square that always paints a lettered placeholder, with the
photograph laid over the top of it. The square is sized with
aspect-ratio, so the box is the same size whether or not the file
loads and nothing on the page moves when it arrives.
The photograph is an ![]()
in the markup rather than a background
here, because a background image is invisible to a screen reader
and a portrait of a named person should not be. The placeholder
underneath is what an ![]()
alone could not do: if the file is ever
missing, the letters show through instead of a broken-image icon.
------------------------------------------------------------ */
.portrait {
position: relative;
width: min(280px, 100%);
aspect-ratio: 1 / 1;
margin-inline: auto;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid var(--ds-border-subtle);
border-radius: var(--ds-radius-lg);
background-color: var(--ds-surface-sunken);
box-shadow: var(--ds-shadow-sm);
}
/* The photograph, over the placeholder. It covers the square whatever
its own proportions, and it is the only thing between the letters
and the reader, so a file that fails to load leaves them visible. */
.portrait img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.portrait-initials {
font-size: 3.2rem;
font-weight: var(--ds-weight-bold);
letter-spacing: .08em;
color: var(--ds-text-muted);
user-select: none;
}
.portrait-caption {
margin-top: var(--ds-space-md);
text-align: center;
font-size: .95rem;
color: var(--ds-text-muted);
}
.portrait-caption strong { color: var(--ds-text-heading); }