, held still and calm where the text sits (system.js) */
.frame--cta { min-height: 420px; }
/* .frame--lit: the same for an object's frame that holds a few words in its clear half (the
product statement's facts in a .frame__text, lower left; the object stands right of centre) */
.frame--cta, .frame--lit {
border-color: transparent; background: var(--ground-bg); color: var(--ground-ink);
--bg: var(--ground-surface); --surface: var(--ground-surface); --ink: var(--ground-ink); --muted: var(--ground-muted);
--action: var(--ground-ink); --action-ink: var(--ground-surface);
--line: color-mix(in oklab, var(--ground-ink) 12%, transparent); --line-strong: color-mix(in oklab, var(--ground-ink) 24%, transparent);
}
.frame > .frame__fx { position: absolute; inset: 0; z-index: 0; }
/* on a light page the buttons on a lit ground keep the page's own action colour: one action, one look
(a dark page keeps the lit ground's ink, which reads on the bright ground) */
html:not([data-tone="dark"]) :is(.frame--cta, .frame--lit, .footer--statement) { --action: var(--p-action); --action-ink: var(--p-action-ink); }
/* a card on a photograph (a booking form over the room): the card holds the page's colours */
.frame--photo:has(> .card) { padding: clamp(var(--s-5), 5vw, var(--s-8)) clamp(var(--s-4), 4vw, var(--s-7)); }
.frame--photo > .card { position: relative; z-index: 1; width: min(100%, 480px); } /* flat: no shadow at rest (ST-97) */
.frame--cta > .frame__fx { opacity: .85; }
.frame--lit > .frame__text { z-index: 2; align-self: flex-end; margin-right: auto; width: min(100%, 360px); display: grid; gap: var(--s-5); }
/* 2:1 on a desktop; a phone gets 2:3, the words at the top and the object smaller and low under
them (its hero preset), so the facts never touch the object */
.frame--lit { --ratio: 50%; }
@media (max-width: 639px) { .frame--lit { --ratio: 150%; } .frame--lit > .frame__text { align-self: flex-start; } }
@media (max-width: 639px) { .frame--split { --ratio: 100%; } }
/* A hero, wide or split frame (x.ai's hero window): --w on the rising fragment's slot (its true width)
centres it while it fits; anchored 24px in and cut by the right edge once the frame is narrower.
--pair on the .stage (the main fragment's width plus the part of the second that sticks out)
centres the pair; below 1024 the main one alone. In a card's panel cards.css places it (.at-corner,
.at-rise, .at-right; a centred .at-rise.fit narrows with the panel), as its recipe says. */
.frame > .stage > .at-rise { --ax: max(24px, calc(50% - var(--w, 64%) / 2)); }
.frame--hero > .stage > .at-rise { --ax: max(24px, calc(50% - var(--pair, var(--w, 64%)) / 2)); }
.frame--hero > .stage > .at-over { --bx: max(24px, calc(50% - var(--pair, 800px) / 2)); }
@media (max-width: 1023px) { .frame--hero > .stage > .at-rise { --ax: max(24px, calc(50% - var(--w, 64%) / 2)); } }
/* a frame holding a cards.css .stage: the stage fills it and places the fragments (references/cards.md);
the hero and wide frames are 16:7 and square on a phone; below 1024 only the main fragment shows */
.frame:has(> .stage) { padding: 0; }
.frame--hero:has(> .stage) { aspect-ratio: 16 / 7; }
@media (max-width: 1023px) {
.frame--hero:has(> .stage) { aspect-ratio: 3 / 2; } /* a tablet: room for the main fragment's rows */
}
/* a tablet held upright (820x1180): a taller frame, so the hero fills the screen without a gap */
@media (min-width: 640px) and (max-width: 1023px) and (orientation: portrait) {
.frame--hero:has(> .stage) { aspect-ratio: 4 / 3; }
}
@media (max-width: 1023px) {
.frame--hero > .stage > :is(.at-over, .at-over-l) { display: none; }
}
/* a split frame is about 440-560px wide from 1024 to 1279: the main piece alone there */
@media (min-width: 1024px) and (max-width: 1279px) {
.frame--split > .stage > :is(.at-over, .at-over-l) { display: none; }
}
@media (max-width: 639px) {
.frame--hero:has(> .stage) { aspect-ratio: 1; }
.frame > .stage > :is(.at-over, .at-over-l) { display: none; }
/* phone: cards.css sets a fragment 16px in on both sides, and system.js holds every loop on its
finished picture, so no pause button lands on the UI */
}
/* a small object on a focal tile (.at-center): its true width (--w, 288px for the slider), narrowed
on a small panel so 24px of ground always shows on both sides (a span-4 panel is 304px at 1280) */
.stage > .at-center { width: calc(100% - 48px); max-width: var(--w, 288px); }
.stage > .at-center > :is([data-ui], .ui) { width: 100%; max-width: none; }
/* .to-edge stretches a fragment's surface past the bottom (cards.css); doc's surface is its page */
.stage > .to-edge > .ui-doc > .ui-doc__page { min-height: 100%; }
/* .hero-stage: whole fragments side by side in a frame, never overlapping or cut (a row of app
screens); the first is the main one, and the ones that no longer fit drop out from the end */
.hero-stage { container: hero-stage / inline-size; width: 100%; }
.hero-stage__row { display: flex; align-items: center; justify-content: center; gap: var(--s-5); }
.hero-stage__row > * { flex: none; max-width: 100%; }
@container hero-stage (max-width: 1060px) { .hero-stage__row > :nth-child(n + 3) { display: none; } }
@container hero-stage (max-width: 740px) { .hero-stage__row > :nth-child(n + 2) { display: none; } }
/* the pause button on every visual that moves by itself for more than 5 s (WCAG 2.2.2): ui.js adds it
to a loop when it starts to move, system.js to the hero's ground. Write a button.loop-pause into
the frame only for a loop of your own (hero-cycle). The same solid 32px disc in the page colours as
assets/ui/base.css's, 12px in from the bottom-right corner, with a 44px hit area. */
.loop-pause {
position: absolute; right: 12px; bottom: 12px; z-index: 6; display: grid; place-items: center;
width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 50%; cursor: pointer;
border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent); background: var(--bg); color: var(--ink);
box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 4px 12px -4px rgb(0 0 0 / .28);
}
.loop-pause::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.loop-pause svg { width: 14px; height: 14px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .loop-pause { display: none; } }
/* ---------------------------------------------------------------- navigation */
/* The header: fixed, opaque, one hairline under it, the same at every depth (no blur, no shadow, no
floating pill, never hidden on scroll). Its .wrap is the page's, so the logo starts on the left line
and the main button ends on the right one. Plain words, 15px, sentence case; one filled button. */
.nav {
position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav);
background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line);
}
.nav__bar { height: 100%; display: flex; align-items: center; gap: var(--s-8); }
/* a text logo: the display face at 500, 22px (the client's SVG logo replaces it when there is one) */
.nav__logo { display: inline-flex; align-items: center; gap: var(--s-2); font: 500 22px/1 var(--font-display); letter-spacing: -0.02em; flex: none; }
@media (max-width: 639px) { .nav__logo { font-size: 20px; } }
.nav__logo svg, .nav__logo img { height: 24px; width: auto; }
/* the brand's mark beside its name, in the accent (the client's logo replaces both). Dealt shapes:
*/
.mark { display: inline-block; flex: none; width: 22px; height: 22px; background: var(--accent);
-webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.mark[data-mark="dots"] { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5'/%3E%3Ccircle cx='17.5' cy='6.5' r='4.5'/%3E%3Ccircle cx='6.5' cy='17.5' r='4.5'/%3E%3Crect x='13' y='13' width='9' height='9' rx='1.5'/%3E%3C/svg%3E"); }
.mark[data-mark="arc"] { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 21.5V12a9.5 9.5 0 0 1 19 0v9.5h-6V12a3.5 3.5 0 0 0-7 0v9.5z'/%3E%3C/svg%3E"); }
.mark[data-mark="ring"] { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 5.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9z'/%3E%3C/svg%3E"); }
.mark[data-mark="petal"] { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.6' r='5'/%3E%3Ccircle cx='17.4' cy='12' r='5'/%3E%3Ccircle cx='12' cy='17.4' r='5'/%3E%3Ccircle cx='6.6' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"); }
.mark[data-mark="leaf"] { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21C3 10 10 3 21 3c0 11-7 18-18 18z'/%3E%3C/svg%3E"); }
.mark[data-mark="stack"] { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2.5' width='20' height='5.5' rx='2.75'/%3E%3Crect x='2' y='9.25' width='14' height='5.5' rx='2.75'/%3E%3Crect x='2' y='16' width='8' height='5.5' rx='2.75'/%3E%3C/svg%3E"); }
/* initial: the name's first letter on a small accent tile (
K);
wordmark: no mark, the name alone */
.mark.mark--initial { -webkit-mask: none; mask: none; display: inline-grid; place-items: center; border-radius: calc(var(--r-sm) * 0.75);
color: var(--accent-ink); font: var(--display-weight, 400) 13px/1 var(--font-display); letter-spacing: 0; }
.footer__mark .mark, .footer .nav__logo .mark { width: 0.8em; height: 0.8em; margin-right: 0.18em; vertical-align: -0.04em; }
.footer__mark .mark--initial, .footer .nav__logo .mark--initial { width: 1em; height: 1em; font-size: 0.6em; }
.nav--split .nav__logo .mark--initial { width: 26px; height: 26px; font-size: 15px; }
.nav__links { display: flex; align-self: stretch; gap: var(--s-1); flex: 1; min-width: 0; }
.nav__item { display: flex; align-items: center; height: 100%; }
.nav__link {
position: relative; display: inline-flex; align-items: center; gap: var(--s-1); height: 36px; padding: 0 var(--s-3); border-radius: var(--r-sm);
font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* a small laptop (1024-1279): the words sit closer, so a bar of four words never wraps or reaches the logo */
@media (min-width: 1024px) and (max-width: 1279px) {
.nav__bar { gap: var(--s-6); }
.nav__link { padding: 0 var(--s-2); }
.nav__link::before, .nav__link[aria-current="page"]::after { left: var(--s-2); right: var(--s-2); }
.nav__links { gap: 0; }
}
/* the words take no pill or fill (ST-08, ST-11): a 2px line draws under the word from the left on hover and focus and leaves to the right */
.nav__link::before { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -2px; height: 2px; border-radius: 2px; background: currentColor;
transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease); pointer-events: none; }
.nav__link:hover::before, .nav__link:focus-visible::before, .nav__item:hover > .nav__link::before, .nav__item:focus-within > .nav__link::before { transform: scaleX(1); transform-origin: left; }
.nav__actions > .nav__link::before { left: var(--s-2); right: var(--s-2); }
.nav__link .chev { width: 12px; height: 12px; opacity: .6; transition: transform var(--dur) var(--ease); }
/* the page you are on: a 2px bar under its word (still, the same inset as the hover line) */
.nav__link[aria-current="page"]::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -2px; height: 2px; border-radius: 2px; background: currentColor; }
.nav__expand { display: none; }
.nav__actions { display: flex; align-items: center; gap: var(--s-4); flex: none; }
/* the bar's button: the page's primary at the one button height (44, 48 with data-buttons="block"; ST-09) */
.nav__actions .btn { height: var(--btn-h); padding-inline: var(--s-5); font-size: 15px; }
.nav__actions > .nav__link { padding-inline: var(--s-2); }
.nav__toggle { display: none; }
.nav__menu {
position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); color: var(--ink);
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
padding: var(--s-7) 0 var(--s-8); opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity 120ms var(--ease), transform 120ms var(--ease), visibility 0s linear 120ms;
}
@media (min-width: 1024px) {
/* hover opens the full-width panel after 150ms of intent; a click on the word goes to its page */
.nav__item:hover > .nav__menu, .nav__item:focus-within > .nav__menu {
opacity: 1; visibility: visible; transform: none; transition-duration: 200ms, 200ms, 0s; transition-delay: 150ms, 150ms, 150ms;
}
.nav__item:hover > .nav__link .chev, .nav__item:focus-within > .nav__link .chev { transform: rotate(180deg); }
}
.menu-col { display: grid; gap: var(--s-2); align-content: start; }
.menu-col > .t-label { color: var(--muted); margin-bottom: var(--s-2); }
.menu-col a { display: grid; gap: var(--s-1); padding: var(--s-2) 0; font-weight: 500; }
.menu-col a span { font-weight: 400; color: var(--muted); font-size: var(--t-small); }
.menu-col a:hover { color: var(--action); }
.menu-card { display: grid; gap: var(--s-3); }
.menu-card .panel { --ratio: 56.25%; }
@media (max-width: 1023px) {
.nav__links, .nav__actions { display: none; }
/* the menu button takes the secondary button's look on a 44px tap area */
.nav__toggle {
display: inline-grid; place-items: center; margin-left: auto; width: 44px; height: 44px; border-radius: var(--r-btn);
border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; flex: none;
}
.nav.is-open .nav__links {
display: flex; flex-direction: column; position: fixed; top: var(--nav); left: 0; right: 0; bottom: 0;
padding: var(--s-4) var(--gut) calc(var(--btn-h) * 2 + 56px); background: var(--bg); overflow-y: auto; gap: 0;
}
.nav.is-open .nav__item { display: grid; grid-template-columns: 1fr auto; height: auto; border-bottom: 1px solid var(--line); }
.nav.is-open .nav__link { height: 56px; padding: 0; font-size: 20px; background: none; }
.nav.is-open .nav__link[aria-current="page"]::after { left: 0; right: auto; width: 24px; bottom: 10px; }
.nav.is-open .nav__link::before { display: none; }
.nav.is-open .nav__link .chev { display: none; }
.nav.is-open .nav__expand {
display: inline-grid; place-items: center; width: 44px; height: 56px; border: 0; background: none; color: var(--ink); cursor: pointer;
}
.nav__expand svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.nav__item.is-expanded .nav__expand svg { transform: rotate(180deg); }
.nav.is-open .nav__menu {
position: static; grid-column: 1 / -1; display: none; opacity: 1; visibility: visible; transform: none;
box-shadow: none; border: 0; padding: 0 0 var(--s-4);
}
.nav.is-open .nav__item.is-expanded .nav__menu { display: block; }
.nav.is-open .nav__menu :is(.container, .wrap) { width: 100%; }
.nav.is-open .nav__menu .grid { row-gap: var(--s-4); }
/* menu cards become plain rows in the sheet (their title and line), the picture panel hidden */
.nav.is-open .menu-card { display: grid; gap: var(--s-1); padding: var(--s-2) 0; }
.nav.is-open .menu-card .panel { display: none; }
.nav.is-open .nav__actions {
display: grid; gap: var(--s-2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
padding: var(--s-4) var(--gut) calc(var(--s-4) + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line);
}
.nav.is-open .nav__actions .btn { width: 100%; height: 48px; font-size: var(--t-body); }
/* a text action (Sign in, a phone line) under the buttons, centred at their height */
.nav.is-open .nav__actions .nav__link { display: inline-flex; order: 2; justify-content: center; height: var(--btn-h); font-size: var(--t-body); }
body.nav-locked { overflow: hidden; }
}
/* a tablet and a phone (1023 and below, ST-15): the main button stays in the bar, at the right line
with the menu button 12px after it; the plain words go to the sheet */
@media (max-width: 1023px) {
.nav__bar { gap: var(--s-3); }
.nav:not(.is-open) .nav__actions { display: flex; margin-left: auto; }
.nav:not(.is-open) .nav__actions > :not(.btn--primary) { display: none; }
.nav:not(.is-open) .nav__actions + .nav__toggle { margin-left: 0; }
}
@media (max-width: 639px) {
/* a long name (15 characters, "Verdigris Works"), the main button and the menu button fit 342px (390 wide) on
one line each, with no page CSS: the name steps down with the screen (18px at 390), the button is the small
size, and the three sit 8px apart. A name of 17 characters or more is the client's to shorten to its mark. */
.nav__bar { gap: var(--s-2); }
.nav__logo { font-size: clamp(16px, 4.6vw, 20px); gap: 6px; white-space: nowrap; }
.nav__logo .mark:not(.mark--initial) { width: 20px; height: 20px; }
.nav:not(.is-open) .nav__actions .btn { height: 44px; padding-inline: var(--s-3); font-size: var(--t-small); }
}
/* no script: the sheet cannot open, so the words stay in the bar (it scrolls sideways) and the dead menu button goes */
@media (scripting: none) and (max-width: 1023px) {
.nav__links { display: flex; overflow-x: auto; scrollbar-width: none; margin-right: var(--s-3); padding-right: var(--s-2); border-right: 1px solid var(--line); } /* stops short of the button, and a hairline marks where the row is cut (it scrolls) */
.nav__toggle { display: none; }
}
/* nav types (dealt, sections.md). Every one is the same fixed bar on the page's .wrap; the full-width
hover panel on a desktop and the full-screen sheet on a phone are shared, so only the bar's order
and its panel's contents differ.
(default) nav-mega: the logo, the words 64px right of it, the actions at the right line; the panel
holds two or three link columns and one picture card (Figma)
nav-cards: the same bar; its panel holds three or four picture cards (a.menu-card, span-4 or span-3)
.nav--centre: the words in the middle of the bar (Linear, Vercel)
.nav--split: the words left, the name in the middle, the actions right (shops, hotels, restaurants)
.nav--tone: the bar on the page's inverse ground, a band of colour over a light page (x.ai's black
bar); the panel under it stays on the page ground */
@media (min-width: 1024px) {
.nav--split .nav__bar, .nav--centre .nav__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.nav--split .nav__logo { grid-column: 2; grid-row: 1; font-size: 26px; }
.nav--split .nav__links { grid-column: 1; grid-row: 1; }
/* the first word starts on the left line (its box, its letters and its underline) */
.nav--split .nav__links > .nav__item:nth-child(1 of .nav__item) > .nav__link { padding-left: 0; }
.nav--split .nav__links > .nav__item:nth-child(1 of .nav__item) > .nav__link::before,
.nav--split .nav__links > .nav__item:nth-child(1 of .nav__item) > .nav__link[aria-current="page"]::after { left: 0; }
.nav--split .nav__actions, .nav--centre .nav__actions { grid-column: 3; grid-row: 1; justify-self: end; }
.nav--centre .nav__logo { grid-column: 1; grid-row: 1; justify-self: start; }
.nav--centre .nav__links { grid-column: 2; grid-row: 1; justify-content: center; flex: none; }
}
.nav--tone { --bg: var(--p-inv-bg); --ink: var(--p-inv-ink); --muted: var(--p-inv-muted); --accent: var(--p-inv-accent); --accent-ink: var(--p-inv-accent-ink);
--action: var(--p-inv-action); --action-ink: var(--p-inv-action-ink); --card: var(--p-inv-surface);
--line: color-mix(in oklab, var(--p-inv-ink) 14%, transparent); --line-strong: color-mix(in oklab, var(--p-inv-ink) 26%, transparent); }
.nav--tone .nav__menu { --bg: var(--p-bg); --ink: var(--p-ink); --muted: var(--p-muted); --action: var(--p-action); --line: color-mix(in oklab, var(--p-ink) 11%, transparent); }
/* the older float type is the plain bar now (a floating, frosted pill is not a header) */
/* ---------------------------------------------------------------- logo row */
.logos { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-5) var(--s-6); }
.logos > * { height: 28px; width: auto; max-width: 100%; color: var(--ink); }
.logos .wordmark { height: auto; font: 500 var(--t-card)/1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
/* --mono marks in a logo row: 28px tall, each in the same box (the mask keeps its shape) */
.logos .icon-mono { width: 120px; height: 28px; }
/* tablet and phone: a grid, so a wrapped row never leaves one logo on its own */
@media (max-width: 1023px) { .logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; } }
@media (max-width: 639px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------------------------------------------------------------- lists, quote, steps */
.checks { display: grid; gap: var(--s-3); }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); align-items: start; }
.checks li::before {
content: ""; width: 20px; height: 20px; margin-top: 2px; background: var(--action);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cmask id='m'%3E%3Crect width='20' height='20' fill='white'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='10' cy='10' r='10' mask='url(%23m)'/%3E%3C/svg%3E") center / 20px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cmask id='m'%3E%3Crect width='20' height='20' fill='white'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='10' cy='10' r='10' mask='url(%23m)'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.quote blockquote { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--t-h3);
line-height: 1.3; letter-spacing: var(--display-tracking); text-wrap: pretty; }
/* cards.css styles .quote as quote text; who said it stays in the text face */
.quote figcaption, .quote .person { font: 400 var(--t-small)/1.45 var(--font-text); letter-spacing: 0; color: var(--ink); }
.person { display: flex; align-items: center; gap: var(--s-3); }
.person img, .person .avatar { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; background: var(--surface); flex: none; }
.person .avatar { display: grid; place-items: center; font: 500 var(--t-small)/1 var(--font-text); color: var(--muted); }
/* the number beside a quote (quote-stat): below 1024 it sits under the quote, by space alone (ST-43) */
@media (max-width: 1023px) { .stat-aside { margin-top: var(--s-7); } }
/* a stats row: two to four short facts, the number above its label (data-m-count on a count) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-5) var(--gutter); margin: 0; }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-2); }
.stats dd { margin: 0; }
.stats .t-stat { font-size: clamp(26px, 1vw + 22px, 36px); }
@media (max-width: 639px) { .stats .t-stat { font-size: 26px; } }
.step-num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
border: 1px solid var(--line-strong); font: 500 var(--t-small)/1 var(--font-text); font-variant-numeric: tabular-nums; }
/* ---------------------------------------------------------------- tabs */
.tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tab {
height: var(--btn-h-sm); padding: 0 var(--s-4); border-radius: var(--r-btn); border: 1px solid var(--line);
background: transparent; color: var(--muted); font-size: var(--t-small); font-weight: 500; cursor: pointer;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tab:hover { color: var(--ink); border-color: var(--line-strong); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* the panel shown at load is there on the first frame (MO-62); system.js fades a chosen one in */
[role="tabpanel"][hidden] { display: none; }
/* ---------------------------------------------------------------- pricing */
.price { display: flex; align-items: baseline; gap: var(--s-2); }
.price .t-stat { font-size: var(--t-stat); }
.card--plan { gap: var(--s-4); }
.card--plan .btn { width: 100%; }
.card--plan .checks { margin-top: var(--s-2); }
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-3); border-radius: 999px; vertical-align: middle;
background: var(--action); color: var(--action-ink); font: 500 var(--t-label)/1 var(--font-text); letter-spacing: 0; }
.card--plan h3 .badge { margin-left: var(--s-2); }
/* ---------------------------------------------------------------- FAQ
Every answer is open, always (ST-47, MO-70): no accordion, no +/- marker, nothing changes height.
Older
markup shows its answer open too (system.js also sets [open]). */
.faq > :is(.faq__item, details) { display: grid; gap: var(--s-2); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); } /* each row closes with its rule (ST-43) */
.faq > :is(.faq__item, details):first-child { padding-top: 0; }
.faq :is(.faq__item > h3, summary) { display: block; font: 500 var(--t-lead)/1.4 var(--font-text); letter-spacing: 0; list-style: none; cursor: text; }
.faq summary { pointer-events: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq details::details-content { content-visibility: visible; }
.faq :is(.faq__item, details) p { color: var(--ink); max-width: 64ch; }
@media (max-width: 639px) { .faq > :is(.faq__item, details) { padding: var(--s-4) 0; } }
/* ---------------------------------------------------------------- footer */
.footer { padding-block: var(--section) var(--s-6); border-top: 1px solid var(--line); } /* an older footer after the last section; footer.closing (below) replaces it */
.footer .grid { row-gap: var(--s-7); }
.footer h4 { font: 500 var(--t-small)/1.4 var(--font-text); letter-spacing: 0; color: var(--muted); margin-bottom: var(--s-4); }
.footer ul { display: grid; gap: var(--s-3); font-size: var(--t-small); }
.footer ul a:hover { color: var(--action); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); justify-content: space-between;
margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line);
font-size: var(--t-label); color: var(--muted); }
.socials { display: flex; gap: var(--s-2); }
.socials a { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); }
.socials a:hover { border-color: var(--line-strong); }
.socials svg, .socials img, .socials .icon-mono { width: var(--icon); height: var(--icon); }
/* a brand mark in the text colour (icons.mjs --mono prints these): the SVG is a mask, so it
follows currentColor on every ground. The mask image is set in the tag's style attribute. */
.icon-mono { display: inline-block; flex: none; width: var(--icon); height: var(--icon); background: currentColor;
-webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
@media (max-width: 1023px) { .footer .footer__col { grid-column: auto / span 6; } .footer .grid > .span-4 { grid-column: 1 / -1; } }
@media (min-width: 640px) and (max-width: 1023px) { .footer .footer__col { grid-column: auto / span 3; } }
/* the company block's one line, set in the display face (footer-columns) */
.footer__lede { font: var(--display-weight) var(--t-h3)/1.25 var(--font-display); letter-spacing: var(--display-tracking); max-width: 22ch; }
/* the legal row's end: the socials sit right of the copyright line */
.footer__legal .socials a { width: 32px; height: 32px; }
/* footer types (dealt, sections.md).
.footer--dark (Figma, x.ai): a dark ground (with .ground-inverse), the name set large top left, the
link columns on the right. On a dark page it stays dark: a step darker than the page, a hairline
on top (system.js sets ), never a light slab under a dark page. */
.footer--dark { border-top: 0; padding-block: var(--section-band) var(--s-6); } /* a change of ground: the gap a band gets */
html[data-tone="dark"] .footer--dark {
--bg: color-mix(in oklab, var(--p-bg) 72%, #000); --surface: var(--p-surface); --ink: var(--p-ink); --muted: var(--p-muted);
--accent: var(--p-accent); --accent-ink: var(--p-accent-ink); --action: var(--p-action); --action-ink: var(--p-action-ink);
border-top: 1px solid var(--line);
}
.footer__mark { display: inline-flex; align-items: center; font: var(--display-weight) var(--t-h2)/1 var(--font-display); letter-spacing: var(--display-tracking); }
/* .footer--visit (a place): the address set large with the way there, the hours beside it, then
one row of the nav's words; no third ask for the main action */
.footer__address { font: var(--display-weight) var(--t-h2)/1.1 var(--font-display); letter-spacing: var(--display-tracking); font-style: normal; }
.footer__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); font-weight: 500; }
.footer__nav a:hover { color: var(--action); }
.footer__nav .socials { margin-left: auto; }
.footer--visit .footer__legal { margin-top: var(--s-5); border-top: 0; padding-top: 0; }
/* .footer--statement: the close and the footer in one inset slab on the page's lit ground (sand,
sky, sage or painting): one big line, one full-width button, then the columns */
.footer--statement {
margin: 0; border: 0; border-radius: 0; padding-block: var(--s-10) var(--s-6);
background: var(--ground-bg); color: var(--ground-ink);
--bg: var(--ground-bg); --surface: var(--ground-surface); --ink: var(--ground-ink); --muted: var(--ground-muted);
--action: var(--ground-ink); --action-ink: var(--ground-surface); --accent: var(--ground-accent);
--line: color-mix(in oklab, var(--ground-ink) 14%, transparent); --line-strong: color-mix(in oklab, var(--ground-ink) 28%, transparent);
}
.footer--statement .cta-type { padding-bottom: var(--s-9); margin-bottom: var(--s-8); border-bottom: 1px solid var(--line); }
@media (max-width: 639px) { .footer--statement:not(.closing) { padding-top: var(--s-9); } }
/* opening hours: , one dt (its days: "Mon to Fri", "Sat and
Sun", or data-days="mon-fri") and one dd a row. system.js marks today's row .is-today in the venue's
time zone (never the visitor's clock); the labels are read, so they stay in ink */
.hours { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-5); font-variant-numeric: tabular-nums; }
.hours dt { color: var(--ink); } .hours dd { margin: 0; }
.hours .is-today { font-weight: 500; }
.hours dt.is-today::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: var(--s-2); border-radius: 999px; background: var(--accent); vertical-align: 0.2em; }
/* the visit block (a place, sections.md), on the container's lines. Open by default: the words on the page ground,
no box (a box as wide as the section on a ground of its own reads as a band to the rhythm check, and a phone's
padding moves its words off the left line). .visit--card is the panel on --g-alt for the full page, where it
stands in a split column beside the client's photograph: from 1024px up only, at most half the container,
48px inside; under 1024 it is open type again. .visit--cols is the short page's: address, hours and access as
three columns, then the menu as .rows under it in the same section.
Its head is the label "Visit" left and the open-now line right; under it the address column and the hours column 24
apart; under both at most two 44px rows (access, a guesthouse's check-in, "By appointment").
- AccessStep-free at the front door
Photographs via Unsplash and Wikimedia Commons
one line a photograph, as photos.mjs credits prints them