/* ========================================================================= Design tokens Every colour, type size, space and timing used by the site lives here. Components read tokens; they never hard-code values. ========================================================================= */ @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 600; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Tomorrow"; src: url("/assets/fonts/tomorrow-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-latin-var.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; } :root { /* ---- Colour: base ---- */ --c-black: #000; --c-white: #fff; --c-ink: #eaf1f6; /* primary text */ --c-ink-2: #a8b3bc; /* body copy · 9.6:1 on black */ --c-ink-3: #7d8891; /* labels · 5.8:1 on black */ --c-ink-4: #6e7881; /* legal, fine print · 4.6:1 on black */ --c-hairline: rgb(255 255 255 / 0.08); --c-border: rgb(117 113 116 / 0.55); --c-border-hover: rgb(220 235 255 / 0.45); /* ---- Colour: brand light ---- */ --c-led: #d8f1ff; /* LED white, the signature light */ --c-led-core: #7fd3ff; /* LED core, focus rings, accents */ --c-led-glow: rgb(110 200 255 / 0.55); --c-gold: #d6b36a; /* "Arriving soon", landmark projects */ /* One colour per variant, lifted far enough off the real finish to stay legible as small type on black. The swatch derives its fill, border and glow from these, so a new variant needs only one value. */ --c-burgundy: #c2747a; /* The greens in the renders sit at a hue of 73, which is where this started. On the button that read as olive more than sage, so it is carried round to 95 — greener than the rooms actually are, because the swatch has to name the palette at the size of a word rather than match it. Lightness and saturation stay near the others, so the set still reads as one. */ --c-sage: #a7c294; /* Tide is the ocean's: a clear pale blue, nothing like the greens. Vine is a pale green, the new leaf on the vine — lighter, fresher and a little cooler than Sage, so the two greens never read as one. Both PROVISIONAL until their renders land: sample them then and lift the values as the others were. */ --c-tide: #a6d1f0; /* pale ocean blue */ --c-vine: #b4e2bd; /* pale new-leaf green */ /* The joinery, in the wood's own colour, lifted to read on black. */ --c-oak: #77726d; /* dark oak: black-stained timber, a charcoal just warm enough to read as wood */ --c-walnut: #d6b48c; /* raw walnut, blonde */ --c-obsidian: #9fb4c8; /* PROVISIONAL, as above. */ --c-ivory: #e4dbc6; --c-forge: #c4957a; /* worked bronze */ --c-char: #b3aca6; /* charred timber, a warm grey */ --c-amber: #e39a55; /* oranger than the page's gold, so the two are never mistaken for one another */ /* the floor plan's card: no finish of its own, so a cool, smoked grey */ --c-smoke: #c6cacf; --c-gold-glow: rgb(214 179 106 / 0.5); --c-error: #ff8a7e; /* ---- Colour: daylight ink (used after dawn, over the bright sky) ---- */ --c-day-ink: #0f1920; --c-day-ink-2: #33414c; --c-day-gold: #6b5214; --c-day-signal: #8e2418; /* The fade: white at the start, falling away into the dark. Used by the word "dark" in the announcement. */ --fade-out: linear-gradient( 100deg, #ffffff 0%, var(--c-ink-2) 38%, #575f67 72%, #2b3239 100% ); /* Its opposite number: the word warms instead of falling away. Same angle, so "Solum" and "dark" read as one gesture and its reverse across the announcement. It is the gold diluted, not the gold itself. At full strength the word turns metallic and starts advertising, and darkening the tail made it worse; held back to roughly three quarters it stays clearly gold while leaving the true colour to the "Arriving soon" mark. */ --fade-gold: linear-gradient( 100deg, #ffffff 0%, color-mix(in oklab, var(--c-gold) 26%, #ffffff) 40%, color-mix(in oklab, var(--c-gold) 58%, #ffffff) 76%, color-mix(in oklab, var(--c-gold) 76%, #ffffff) 100% ); /* ---- Pictures ---- A rounding small enough that it reads as a softened edge rather than as a rounded card. */ --img-radius: 4px; /* the section cards' corners (in the card's own width) */ --card-radius: 1.3cqw; /* and the two top ones cut, the pictures' and buttons' chamfer at the card's scale, each end of the cut very slightly rounded (-tall for the stacked card, whose width is shorter against its height). Straight cuts where shape() isn't supported; see the @supports below. */ --card-notch-clip: polygon(0 2.4cqw, 2.4cqw 0, calc(100% - 2.4cqw) 0, 100% 2.4cqw, 100% 100%, 0 100%); --card-notch-clip-tall: polygon(0 5.5cqw, 5.5cqw 0, calc(100% - 5.5cqw) 0, 100% 5.5cqw, 100% 100%, 0 100%); /* The glass buttons over the corner of the open picture. The chip is the floor plan's — same size, same gap — so the two read as one control wherever it turns up. */ --peek-size: 2rem; /* the floor plan's --chip */ --peek-gap: 6px; /* the floor plan's --chip-gap */ --peek-inset: var(--space-3); /* in from the picture's corner */ /* The pictures' own cut corner: the same diagonal as the buttons and swatches, scaled to a photograph. Quoted with its size here, where the size is declared, since a var() inside a custom property resolves at its declaration and could not be overridden further down. */ --img-notch: 16px; --img-notch-clip: polygon( 0 0, 100% 0, 100% calc(100% - var(--img-notch)), calc(100% - var(--img-notch)) 100%, 0 100%); /* ---- Glass surfaces ---- */ --glass-bg: rgb(6 10 14 / 0.72); --glass-blur: 18px; --glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.1); /* ---- Liquid glass ---- One glass for the whole page, after the standard Seth set (a frosted Apple mark, October 2026), smoked for a black page: an even frost with no streak across it; a thick bevel of soft light round its edge, brightest along the top, never a hard bright line; one soft shadow under it; and colour, where it catches any, only as a blurred wash inside its foot (each component lays that in itself, from its own colour: a radial gradient low in its background), never a coloured rim or a glow outside it. What is chosen (a toggle's lit pill) is the same glass, milkier. */ --glass-frost: linear-gradient(180deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.04)); --glass-filter: blur(24px) saturate(1.25); --glass-edge: inset 0 1px 1.5px rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.055), inset 0 0 12px rgb(255 255 255 / 0.035), inset 0 -1px 1px rgb(255 255 255 / 0.025); --glass-shadow: 0 12px 32px -14px rgb(0 0 0 / 0.7); --glass-lit-frost: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.105)); --glass-lit-edge: inset 0 1px 1.5px rgb(255 255 255 / 0.36), inset 0 0 0 1px rgb(255 255 255 / 0.09), inset 0 0 10px rgb(255 255 255 / 0.07); --glass-lit-shadow: 0 6px 16px -8px rgb(0 0 0 / 0.75); /* ---- Type families ---- */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* the editorial voice: used for the announcement, nothing else */ --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; /* the finish cards' question: the headlines' serif since 23 October 2026, in place of Things (a commercial face needing a web licence) */ --font-display: var(--font-serif); --font-tech: "Tomorrow", var(--font-sans); /* ---- Type scale (fluid, mobile first) ---- */ --fs-micro: 0.6875rem; /* 11px mono labels */ --fs-small: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --fs-body: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem); --fs-input: 1rem; /* 16px stops iOS zoom on focus */ --fs-statement: clamp(1.375rem, 1.05rem + 1.5vw, 2.125rem); /* A section's opening, the same in every one that has one: the headline in the serif, and the one line under it. */ --fs-headline: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem); --fs-headline-line: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); --fs-count: clamp(1.375rem, 1.1rem + 1.2vw, 2.25rem); --fs-title: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); /* ---- Tracking ---- */ --track-mono: 0.3em; --track-eyebrow: 0.5em; /* ---- Space ---- */ --gutter: clamp(1.25rem, 4vw, 3.5rem); /* the gutter, plus whatever the notch takes: for sections that set their own padding rather than inheriting the hero screen's */ --gutter-safe: calc(var(--gutter) + max(var(--safe-left), var(--safe-right))); /* The widest the page's content runs, on a desktop: the cards are drawn to the screen's height (finish-card.css) and their pictures keep their shape, so a card much wider than the screen is tall would be taller than the screen. Past it, on a very wide screen, the gutter grows to hold everything to it, centred, the black either side (see the media query at the end). */ --page-max: 190vh; /* ---- Frosted glass, for the cards ---- A heavy blur of what is behind a card, lifted and saturated so its light pools rather than greys; the card's own colours over it as a translucent wash; a fine grain in the glass; a sheen across its top; light along its top edge. Each card still sinks to black at its foot, so it has no foot: its fade is laid over the grain, and the light is along its top only. (The glass study's frosted.) */ --frost-filter: blur(30px) saturate(1.5) brightness(0.8); --frost-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .16 0 0 0 -.045'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px; --frost-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 35%); --frost-rim: inset 0 1px 0 rgb(255 255 255 / 0.14); --section-pad: clamp(4.5rem, 11vw, 10rem); /* The rhythm inside a section, the same in every one: --head-gap under an eyebrow that labels a block of content (a gallery, the floor plan, My SOLUM), so the label is read as a caption over it rather than a line of it. An eyebrow over its own headline sits closer, --space-6. --block-gap between the main parts of a section: what it shows, and the way on from it. --fine-gap above small print, under the button it qualifies. */ --head-gap: clamp(2.5rem, 4.5vw, 4rem); --block-gap: clamp(3rem, 5.5vw, 5rem); --fine-gap: var(--space-6); /* ---- The cut corner ---- Buttons and swatches take a chamfer off the bottom-right. The clip removes the corner and the border with it, so the cut has to draw its own edge: --notch-line is that line, ready to sit at the front of a background stack. It reads --notch-edge from whatever element uses it, so the line follows that element's border through its states. The line is laid out against the border box. A background sits in the padding box by default, which put the diagonal a border's width inside the clip and left the bottom and right borders running past its ends as a pair of spurs. */ --notch: 10px; --notch-edge: rgb(255 255 255 / 0.12); /* The notched corner itself takes no radius: the clip is square-cornered, so a curve there would only round the border behind the cut. */ --notch-corners: 4px 4px 0; --notch-line: linear-gradient(-45deg, transparent 50%, var(--notch-edge) 50% calc(50% + 1.5px), transparent calc(50% + 1.5px)) bottom right / var(--notch) var(--notch) no-repeat border-box; --notch-clip: polygon( 0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%); /* The same cut mirrored onto the bottom-left, for the times a shape's outer corner is on that side — a row of chips sitting in the corner of a cut-out, where the chamfer wants to be at the row's far end rather than pointing back into the row. */ --notch-corners-bl: 4px 4px 4px 0; --notch-line-bl: linear-gradient(45deg, transparent 50%, var(--notch-edge) 50% calc(50% + 1.5px), transparent calc(50% + 1.5px)) bottom left / var(--notch) var(--notch) no-repeat border-box; --notch-clip-bl: polygon( 0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch))); /* The height of a conveyor row. Shared by the interiors and the exteriors so the two read as one band down the page, whatever the pictures in them happen to be shaped like. */ --conveyor-h: clamp(21rem, 40vw, 34rem); /* The card on a phone, where there is no conveyor and each row is a strip of equal cards. Both rows take this shape, so the two sections read as one the way --conveyor-h makes them on a wider screen. Landscape, because every render is: the interiors are 1.33 to 1.41 and the exteriors 16:9. A portrait card would be throwing away the sides of all of them. The width leaves enough of the next card showing to say the strip scrolls. */ --card-phone-w: 83%; --card-phone-ar: 17 / 20; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --tap: 44px; /* minimum touch target */ /* ---- Safe areas (notches, home indicators) ---- */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* ---- Motion ---- */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-draw: cubic-bezier(0.3, 0.8, 0.2, 1); --dur-fast: 0.35s; --dur-base: 0.6s; --dur-reveal: 1.6s; --dur-phase: 1.8s; /* ---- Layers ---- */ --z-backdrop: 0; /* reserved for whatever the backdrop becomes */ --z-page: 10; } /* The section cards' cut corners, the ends of each cut softened */ @supports (clip-path: shape(from 0 0, line to 1px 1px)) { :root { --card-notch-clip: shape(from 0 100%, line to 0 calc(2.4cqw + 0.4cqw), curve to calc(0.4cqw * 0.7071) calc(2.4cqw - calc(0.4cqw * 0.7071)) with 0 2.4cqw, line to calc(2.4cqw - calc(0.4cqw * 0.7071)) calc(0.4cqw * 0.7071), curve to calc(2.4cqw + 0.4cqw) 0 with 2.4cqw 0, line to calc(100% - 2.4cqw - 0.4cqw) 0, curve to calc(100% - 2.4cqw + calc(0.4cqw * 0.7071)) calc(0.4cqw * 0.7071) with calc(100% - 2.4cqw) 0, line to calc(100% - calc(0.4cqw * 0.7071)) calc(2.4cqw - calc(0.4cqw * 0.7071)), curve to 100% calc(2.4cqw + 0.4cqw) with 100% 2.4cqw, line to 100% 100%, close); --card-notch-clip-tall: shape(from 0 100%, line to 0 calc(5.5cqw + 0.9cqw), curve to calc(0.9cqw * 0.7071) calc(5.5cqw - calc(0.9cqw * 0.7071)) with 0 5.5cqw, line to calc(5.5cqw - calc(0.9cqw * 0.7071)) calc(0.9cqw * 0.7071), curve to calc(5.5cqw + 0.9cqw) 0 with 5.5cqw 0, line to calc(100% - 5.5cqw - 0.9cqw) 0, curve to calc(100% - 5.5cqw + calc(0.9cqw * 0.7071)) calc(0.9cqw * 0.7071) with calc(100% - 5.5cqw) 0, line to calc(100% - calc(0.9cqw * 0.7071)) calc(5.5cqw - calc(0.9cqw * 0.7071)), curve to 100% calc(5.5cqw + 0.9cqw) with 100% 5.5cqw, line to 100% 100%, close); } } /* The gutter on a very wide screen: wide enough that the content keeps to --page-max, centred */ @media (min-width: 75rem) { :root { --gutter-safe: max( calc(var(--gutter) + max(var(--safe-left), var(--safe-right))), calc((100vw - var(--page-max)) / 2)); } }