/* BuildQ — base styles & tokens
Theme is overridden via [data-palette] and [data-type] on .
*/
:root {
--max: 1320px;
--gutter: 32px;
/* Default: Midnight palette */
--bg: #0A0E18;
--bg-2: #0F1421;
--surface: #141A28;
--surface-2: #1B2236;
--border: rgba(237, 231, 218, 0.07);
--border-2: rgba(237, 231, 218, 0.14);
--border-strong: rgba(237, 231, 218, 0.24);
--fg: #EDE7DA;
--fg-2: #A6ADBE;
--fg-3: #6B7488;
--accent: #E5A269;
--accent-2: #C97F3E;
--accent-soft: rgba(229, 162, 105, 0.12);
/* Type stacks — re-pointed by [data-type] */
--font-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
--font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--density: 1;
}
html[data-palette="slate"] {
--bg: #0E1116;
--bg-2: #14181F;
--surface: #1A1F28;
--surface-2: #232936;
--border: rgba(225, 230, 240, 0.07);
--border-2: rgba(225, 230, 240, 0.14);
--border-strong: rgba(225, 230, 240, 0.24);
--fg: #E7ECF3;
--fg-2: #9AA3B3;
--fg-3: #5F6878;
--accent: #7FB3D5;
--accent-2: #4F8DBA;
--accent-soft: rgba(127, 179, 213, 0.12);
}
html[data-palette="bone"] {
--bg: #F5F1E8;
--bg-2: #EFEAE0;
--surface: #FFFFFF;
--surface-2: #FAF6EC;
--border: rgba(40, 36, 28, 0.09);
--border-2: rgba(40, 36, 28, 0.18);
--border-strong: rgba(40, 36, 28, 0.32);
--fg: #1B1810;
--fg-2: #5A554A;
--fg-3: #8A8478;
--accent: #B45B1F;
--accent-2: #8F4517;
--accent-soft: rgba(180, 91, 31, 0.10);
}
html[data-palette="forest"] {
--bg: #0C1612;
--bg-2: #11201A;
--surface: #162822;
--surface-2: #1D332B;
--border: rgba(232, 240, 234, 0.07);
--border-2: rgba(232, 240, 234, 0.14);
--border-strong: rgba(232, 240, 234, 0.24);
--fg: #E8F0EA;
--fg-2: #9CB1A4;
--fg-3: #627168;
--accent: #D4923F;
--accent-2: #B07423;
--accent-soft: rgba(212, 146, 63, 0.12);
}
/* Type pairings */
html[data-type="editorial"] {
--font-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
--font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
}
html[data-type="modern"] {
--font-display: "Newsreader", "Source Serif Pro", Georgia, serif;
--font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
}
html[data-type="grotesque"] {
--font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
--font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
}
/* Density */
html[data-density="tight"] { --density: 0.78; }
html[data-density="airy"] { --density: 1.18; }
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--bg); }
/* Layout */
.wrap {
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--gutter);
}
.wrap-narrow {
width: 100%;
max-width: 1080px;
margin: 0 auto;
padding: 0 var(--gutter);
}
section {
padding: calc(120px * var(--density)) 0;
position: relative;
}
section.tight { padding: calc(80px * var(--density)) 0; }
section.hero { padding: 0; }
/* Type utilities */
.eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-3);
font-weight: 400;
}
.display {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.02;
margin: 0;
color: var(--fg);
}
.display-1 { font-size: clamp(48px, 7.5vw, 108px); }
.display-2 { font-size: clamp(40px, 5.5vw, 80px); }
.display-3 { font-size: clamp(32px, 4vw, 56px); }
.display-4 { font-size: clamp(24px, 2.4vw, 36px); }
html[data-type="grotesque"] .display { letter-spacing: -0.03em; font-weight: 500; line-height: 1.04; }
.lede {
font-family: var(--font-body);
font-size: clamp(17px, 1.3vw, 19px);
line-height: 1.55;
color: var(--fg-2);
max-width: 560px;
margin: 0;
font-weight: 400;
}
.label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--fg-3);
}
.num-serif {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -0.02em;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px 10px 20px;
background: var(--fg);
color: var(--bg);
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 500;
letter-spacing: -0.005em;
border-radius: 999px;
transition: transform .25s ease, background .25s ease, color .25s ease;
white-space: nowrap;
}
.btn:hover { background: var(--accent); color: #14110A; transform: translateY(-1px); }
/* Arrow — custom SVG via CSS mask. Wherever JSX uses
→, the unicode
character is hidden (font-size: 0) and the mask paints the
SVG using currentColor. Inheriting currentColor means the
arrow follows the button text on hover. */
.arrow {
display: inline-block;
width: 14px;
height: 10px;
vertical-align: -1px;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5h12M13 5L9 1M13 5L9 9' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5h12M13 5L9 1M13 5L9 9' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
font-size: 0;
line-height: 0;
transition: transform .25s ease;
}
.btn:hover .arrow { transform: translate(3px, 0); }
/* .btn-accent — preserved opt-in for the rare on-brand anchor moment.
Use sparingly, ideally only once per page (top-nav CTA, hero CTA). */
.btn-accent {
background: var(--accent);
color: #14110A;
}
.btn-accent:hover { background: var(--accent-2); color: #14110A; }
.btn-ghost {
background: transparent;
border: 1px solid var(--border-2);
color: var(--fg);
}
.btn-ghost:hover { background: var(--surface); border-color: var(--border-strong); color: var(--fg); }
/* Hairlines & dividers */
.hairline { height: 1px; background: var(--border); width: 100%; }
.rule-strong { height: 1px; background: var(--border-2); width: 100%; }
/* Small utility */
.muted { color: var(--fg-2); }
.dim { color: var(--fg-3); }
.serif { font-family: var(--font-display); }
.mono { font-family: var(--font-mono); }
.cap { letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
/* ────────────── Editorial imagery ──────────────
Unified filter recipe applied site-wide. Pulls every photo
toward the same cool, slightly-desaturated palette so the
data-center server, the skyline, and the energy site all
read as part of one world.
Auto-applied by site-init.js to most ![]()
in ;
add the .no-filter class to opt an image out (logos do this). */
.img-editorial {
filter:
saturate(0.85)
contrast(1.05)
brightness(0.94)
hue-rotate(-4deg);
}
.img-wash {
position: relative;
}
.img-wash::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(15,21,35,0.10) 0%, rgba(15,21,35,0.45) 100%),
radial-gradient(60% 50% at 18% 14%, rgba(229,162,105,0.08) 0%, transparent 60%);
pointer-events: none;
}
/* ────────────── Choreographed reveals ──────────────
.reveal — fades up + de-blurs on first scroll into view.
.reveal.from-right / .from-left — directional variants for images.
site-init.js auto-applies these to typical content elements,
with staggered delays. Reduced-motion users see everything
immediately. */
.reveal {
opacity: 0;
transform: translateY(18px);
filter: blur(4px);
transition:
opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
filter 400ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform, filter;
}
.reveal.from-right { transform: translateX(36px) translateY(0); }
.reveal.from-left { transform: translateX(-36px) translateY(0); }
.reveal.is-visible {
opacity: 1;
transform: translate(0, 0);
filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; filter: none; transition: none; }
}
/* Reusable cinematic placeholder gradient (substation-dusk feel) */
.cinematic {
position: relative;
overflow: hidden;
background:
radial-gradient(120% 80% at 70% 20%, rgba(229,162,105,0.35), transparent 55%),
radial-gradient(140% 100% at 20% 110%, rgba(40,60,100,0.6), transparent 60%),
linear-gradient(180deg, #0E1626 0%, #050810 100%);
}
.cinematic::after {
content: "";
position: absolute; inset: 0;
background:
repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,0.06) 3px 4px),
radial-gradient(60% 40% at 50% 60%, rgba(0,0,0,0.0), rgba(0,0,0,0.5) 100%);
mix-blend-mode: multiply;
pointer-events: none;
}
html[data-palette="bone"] .cinematic {
background:
radial-gradient(120% 80% at 70% 20%, rgba(180,91,31,0.30), transparent 55%),
radial-gradient(140% 100% at 20% 110%, rgba(230,220,200,0.9), transparent 60%),
linear-gradient(180deg, #E8E0D0 0%, #C8BFB0 100%);
}
/* Grid overlay (debug, off by default) */
html[data-grid="on"] body::before {
content: "";
position: fixed; inset: 0; pointer-events: none; z-index: 100;
background-image:
linear-gradient(to right, rgba(229,162,105,0.08) 1px, transparent 1px);
background-size: calc((100% - 64px) / 12) 100%;
background-position: 32px 0;
max-width: var(--max);
margin: 0 auto;
}
/* ────────── Legal document body ────────── */
.legal-body {
max-width: 780px;
color: var(--fg-2);
font-size: 15.5px;
line-height: 1.72;
letter-spacing: 0.005em;
}
.legal-body .legal-p {
margin: 0 0 18px;
}
.legal-body .legal-p strong {
color: var(--fg);
font-weight: 500;
}
.legal-body .legal-h2 {
margin: 56px 0 22px;
padding-top: 28px;
border-top: 1px solid var(--border-2);
display: grid;
grid-template-columns: 64px 1fr;
gap: 16px;
align-items: baseline;
font-family: var(--font-display);
font-size: clamp(22px, 1.8vw, 26px);
letter-spacing: -0.005em;
line-height: 1.25;
color: var(--fg);
font-weight: 400;
}
.legal-body .legal-h2:first-child {
border-top: none;
padding-top: 0;
margin-top: 0;
}
.legal-body .legal-h2-num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
color: var(--accent);
text-transform: uppercase;
padding-top: 2px;
}
.legal-body .legal-h2-title {
min-width: 0;
}
.legal-body .legal-h3 {
margin: 36px 0 14px;
font-family: var(--font-display);
font-size: 17px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--fg);
}
.legal-body .legal-list {
margin: 0 0 22px;
padding-left: 22px;
list-style: none;
}
.legal-body .legal-list > li {
position: relative;
margin: 0 0 10px;
padding-left: 4px;
}
.legal-body .legal-list > li::before {
content: "";
position: absolute;
left: -16px;
top: 0.72em;
width: 6px;
height: 1px;
background: var(--accent);
opacity: 0.6;
}
.legal-body .legal-list .legal-list {
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
}
.legal-body .legal-list .legal-list > li::before {
background: var(--fg-3);
}
.legal-body a {
color: var(--fg);
text-decoration: underline;
text-decoration-color: rgba(229,162,105,0.5);
text-underline-offset: 3px;
}
.legal-body em { color: var(--fg-2); }
/* ─────────── Legal table (used on cookie policy) ─────────── */
.legal-table-wrap {
margin: 36px 0;
border: 1px solid var(--border-2);
border-radius: 6px;
overflow: hidden;
background: var(--bg-2);
}
.legal-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: 13.5px;
line-height: 1.55;
color: var(--fg);
}
.legal-table th {
text-align: left;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-3);
font-weight: 400;
padding: 18px 18px;
background: var(--surface);
border-bottom: 1px solid var(--border-2);
}
.legal-table td {
padding: 18px 18px;
border-bottom: 1px solid var(--border);
vertical-align: top;
color: var(--fg-2);
}
.legal-table tbody tr:last-child td {
border-bottom: 0;
}
.legal-table td:nth-child(1) {
color: var(--fg);
white-space: nowrap;
width: 1%;
}
.legal-table td:nth-child(2) {
color: var(--accent);
font-family: var(--font-mono);
font-size: 12.5px;
white-space: nowrap;
width: 1%;
}
.legal-table td:nth-child(2) code {
background: transparent;
padding: 0;
}
.legal-table td:nth-child(4),
.legal-table td:nth-child(5) {
white-space: nowrap;
color: var(--fg);
width: 1%;
}
.legal-body .legal-sub {
display: grid;
grid-template-columns: 56px 1fr;
gap: 14px;
align-items: baseline;
margin: 0 0 16px;
}
.legal-body .legal-sub.legal-sub-3 {
grid-template-columns: 56px 1fr;
margin-left: 70px;
}
.legal-body .legal-sub-num {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--accent);
padding-top: 1px;
white-space: nowrap;
}
.legal-body .legal-sub-body strong:first-child {
color: var(--fg);
font-weight: 500;
}