/* ============================================================ Studio Practice — Project Dotmatrix Scoped dark "dot-matrix / printed-document" theme. Activated only on pages whose carries class "theme-dotmatrix". Additive over /assets/sp-design-v2.css: the light v2 tokens are NEVER mutated, so back-office / gated / leak pages stay light and revert is one step (drop the class + these assets). Values lifted from the approved claude.ai/design reference; markup is class-based here (no inline styles). ============================================================ */ @font-face { font-family: 'Departure Mono'; src: url('/assets/fonts/DepartureMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* Doto draws the full stop as a cross at display sizes. Override ONLY the period (U+002E) family-wide with a clean monospace dot. Declared after Google's Doto @font-face (loaded in before this sheet) and given the full weight range so it wins the glyph for U+002E at any heading weight. All other glyphs still come from real Doto; body/mono text is untouched. */ @font-face { font-family: 'Doto'; src: local('Menlo'), local('SF Mono'), local('Monaco'), local('Consolas'), local('DejaVu Sans Mono'), local('Courier New'); unicode-range: U+002E; font-weight: 100 900; font-style: normal; font-display: swap; } /* ---------- tokens (scoped) ---------- The .site-footer selector re-asserts the DARK token set inside the light sister so the footer stays consistent (dark) with every other page. */ .theme-dotmatrix, html.theme-dotmatrix.theme-light .site-footer { color-scheme: dark; /* Re-assert the text colour, not just the token, so a nested dark stage on the light sister (a dark plate on light paper) recolours headings that only INHERIT color. Without this they keep body's computed light-ink and render dark-on-dark. */ color: var(--dm-ink); --dm-bg: #16171b; /* page */ --dm-board: #15161a; /* board fill */ --dm-well: #0c0d10; /* canvas / figure wells + sunken zones (deepened for contrast) */ --dm-panel: #23252e; /* featured panels + lifted zones (widened off base #16171b) */ --dm-overlay: #121317; /* intro overlay */ --dm-ink: #f3f4f6; /* primary text */ --dm-body: #c7c9cf; /* body copy */ --dm-body-2: #e0e2e7; /* hero desc */ --dm-muted: #9a9ca3; --dm-muted-2: #8e9099; --dm-label: #7c7e85; --dm-label-2: #5a5c63; --dm-faint: #4d4f55; --dm-numeral: #3f4147; /* dim section numerals */ --dm-accent: #67a0e8; --dm-accent-2: #8fbcf2; --dm-accent-line: #2f4a6b; --dm-line: #26272c; /* hairline */ --dm-line-2: #40424b; /* stronger — zone edges */ --dm-btn: #4d4f55; /* button borders */ --dm-dot: rgba(150,156,168,0.20); /* board dim dot (alt texture) */ --dm-glow: 0 0 11px rgba(196,216,242,0.22); --dm-glow-2: 0 0 11px rgba(196,216,242,0.28), 0 0 2px rgba(255,255,255,0.20); /* tractor-feed — the default "era texture" (settled background) */ --dm-tractor-band: rgba(255,255,255,0.022); /* soft 64px feed band */ --dm-tractor-line: rgba(255,255,255,0.05); /* 1px perforation rule / 64px */ --dm-sprocket-fill: #1b1c21; /* margin strip */ --dm-sprocket-hole: #07080a; /* punched feed hole */ --dm-display: 'Doto', ui-monospace, 'SF Mono', monospace; --dm-mono: 'Departure Mono', ui-monospace, 'SF Mono', monospace; --dm-inner: 76%; --dm-inner-max: 2000px; --dm-sec-pad: clamp(48px, 7vw, 74px); } /* ---------- base / continuous-feed paper (tractor) ---------- */ .theme-dotmatrix body { background-color: var(--dm-bg); background-image: repeating-linear-gradient(to bottom, var(--dm-tractor-band) 0, var(--dm-tractor-band) 64px, transparent 64px, transparent 128px), repeating-linear-gradient(to bottom, transparent 0, transparent 63px, var(--dm-tractor-line) 63px, var(--dm-tractor-line) 64px); background-size: 100% 128px, 100% 64px; /* NOT background-attachment:fixed — that repaints the whole page on every scroll + view-transition snapshot (Safari perf trap, caused nav hangs). The tractor bands are uniform, so scrolling them looks identical. */ background-attachment: scroll; color: var(--dm-ink); font-family: var(--dm-mono); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; } /* sprocket-hole feed margins (decorative, pinned; no markup change) */ .theme-dotmatrix body::before, .theme-dotmatrix body::after { content: ""; position: fixed; top: 0; bottom: 0; width: 44px; z-index: 1; pointer-events: none; background-color: var(--dm-sprocket-fill); background-image: radial-gradient(circle at 50% 50%, var(--dm-sprocket-hole) 7px, rgba(0,0,0,0.55) 8px, transparent 9px); background-size: 44px 56px; } .theme-dotmatrix body::before { left: 0; border-right: 1px dashed var(--dm-line-2); box-shadow: inset -6px 0 12px rgba(0,0,0,0.45); } .theme-dotmatrix body::after { right: 0; border-left: 1px dashed var(--dm-line-2); box-shadow: inset 6px 0 12px rgba(0,0,0,0.45); } /* alternate era texture — one-class swap back to the LED dot board */ .theme-dotmatrix.dm-tex-board body { background-image: radial-gradient(circle, var(--dm-dot) 1px, transparent 1.5px); background-size: 8px 8px; background-color: var(--dm-board); background-attachment: scroll; } .theme-dotmatrix.dm-tex-board body::before, .theme-dotmatrix.dm-tex-board body::after { display: none; } .theme-dotmatrix ::selection { background: var(--dm-accent); color: var(--dm-bg); } .theme-dotmatrix a { color: inherit; text-decoration: none; } /* ============================================================ LIGHT SISTER — html.theme-dotmatrix.theme-light A light-mode sibling of the dark board: same Doto + Departure Mono, the same dot motif, hairlines, squared forms and single accent, inverted onto a cool light surface (NOT the old cream v2). Everything that reads --dm-* tokens (nav, footer, page chrome, components) flips automatically; only the few hardcoded dark values are overridden. Pair with dm-tex-board for the light dot-grid board. Used on /design-system. ============================================================ */ .theme-dotmatrix.theme-light { color-scheme: light; --dm-bg: #e5e8ec; /* page — stepped down from #eceef1 (off near-white) */ --dm-board: #e1e3e8; /* board fill — just under the paper */ --dm-well: #d8dbe1; /* wells — inset depth preserved vs the new paper */ --dm-panel: #ffffff; /* raised panels — stay white so they lift off paper */ --dm-overlay: #eef0f3; /* intro overlay — a hair above paper */ --dm-ink: #17181c; /* primary text (the dark page colour, inverted) */ --dm-body: #40424a; --dm-body-2: #2a2c32; --dm-muted: #6c6e76; --dm-muted-2: #7a7c84; --dm-label: #8a8c93; --dm-label-2: #a2a4ab; --dm-faint: #b6b8be; --dm-numeral: #cbcdd3; --dm-accent: #2f6fe0; /* deeper blue: same family, readable on light */ --dm-accent-2: #5a8ee8; --dm-accent-line: #bcd0ee; --dm-line: #dcdee3; --dm-line-2: #c9cbd1; --dm-btn: #b6b8be; --dm-dot: rgba(28,32,48,0.10); /* dark dot (alt board texture) */ --dm-tractor-band: rgba(24,28,44,0.020); /* faint feed band on light */ --dm-tractor-line: rgba(24,28,44,0.06); /* perforation rule / 64px */ --dm-sprocket-fill: #e4e6ea; /* light margin strip */ --dm-sprocket-hole: #cfd2d8; /* punched feed hole */ --dm-glow: none; --dm-glow-2: none; } /* frosted scrolled-nav bg (the dark rule hardcodes a dark rgba) */ .theme-dotmatrix.theme-light .nav.is-scrolled { background: rgba(236,238,241,0.9); } /* LED fills invert to accent dots so they read on a light track */ .theme-dotmatrix.theme-light .dm-meter-fill { background: repeating-linear-gradient(90deg, var(--dm-accent) 0 2.5px, transparent 2.5px 8px); box-shadow: none; } /* "lit LED" dots/nodes are near-white (#eef3fb) for the dark board — on light paper they vanish. Recolour to the accent (keeps their "lit" intent), drop glow. */ .theme-dotmatrix.theme-light .dm-tl-node::before, .theme-dotmatrix.theme-light .dm-tier-item::before { background: var(--dm-accent); box-shadow: none; } .theme-dotmatrix.theme-light .dm-doticon:not([data-doticon]) { --dmi-color: var(--dm-accent); --dmi-glow: none; } /* light sprocket margins (dark rule hardcodes a dark hole-ring + inset shadows) */ .theme-dotmatrix.theme-light body::before, .theme-dotmatrix.theme-light body::after { background-image: radial-gradient(circle at 15px 15px, var(--dm-sprocket-hole) 3.6px, rgba(24,28,44,0.14) 4.4px, transparent 5px); } .theme-dotmatrix.theme-light body::before { box-shadow: inset -6px 0 12px rgba(24,28,44,0.05); } .theme-dotmatrix.theme-light body::after { box-shadow: inset 6px 0 12px rgba(24,28,44,0.05); } /* footer stays the canonical DARK footer even on the light sister (site-wide consistency) */ .theme-dotmatrix.theme-light .site-footer { background: var(--dm-bg); } /* Content + header columns ride the GridSim "sp" grid (1320 cap · 24px margin), site-wide. The homepage hero keeps its own body.has-hero overrides (same values); the old 76%/2000 float is retired. */ .dm-inner { width: auto; max-width: 1320px; margin-inline: auto; padding-inline: 24px; } /* lit Doto heading helper */ .theme-dotmatrix .dm-lit { font-family: var(--dm-display); text-shadow: var(--dm-glow-2); } /* dotted document rule */ .dm-rule { height: 1px; background-image: radial-gradient(circle, var(--dm-line-2) 1px, transparent 1.4px); background-size: 7px 1px; background-repeat: repeat-x; border: 0; } /* ============================================================ NAV (injected ) — dark overrides only, layout from v2 ============================================================ */ .theme-dotmatrix .nav { background: transparent; border-bottom: 1px solid transparent; } .theme-dotmatrix .nav.is-scrolled { background: rgba(22,23,27,0.88); border-bottom-color: var(--dm-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .theme-dotmatrix .nav-sp-wordmark { font-family: var(--dm-display); font-weight: 800; font-size: 17px; letter-spacing: 0.04em; color: var(--dm-ink); } .theme-dotmatrix .nav-links a { font-family: var(--dm-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dm-muted); } .theme-dotmatrix .nav-links a:hover, .theme-dotmatrix .nav-links a.active { color: var(--dm-ink); } /* Book a Time = the standard squared CTA (see .dm-cta). Selectors mirror v2's own nav-book rules (incl. the over-hero state) but prefixed with html.theme-dotmatrix so they out-specify v2's pill in every nav state — a plain .theme-dotmatrix .nav-book loses to v2's `.nav-links a.nav-book`. */ html.theme-dotmatrix .nav-links a.nav-book, html.theme-dotmatrix body.has-hero .nav:not(.is-scrolled) .nav-links a.nav-book { font-family: var(--dm-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; color: var(--dm-ink); background: transparent; border: 1px solid var(--dm-accent); border-radius: 0; padding: 9px 16px; } html.theme-dotmatrix .nav-links a.nav-book:hover, html.theme-dotmatrix body.has-hero .nav:not(.is-scrolled) .nav-links a.nav-book:hover { color: var(--dm-bg); background: var(--dm-accent); border-color: var(--dm-accent); transform: none; box-shadow: none; letter-spacing: 0.16em; } .theme-dotmatrix .nav-hamburger span { background: var(--dm-ink); } /* Light-primary + dark photo hero (homepage only, body.has-hero): the nav rides LIGHT while over the hero; once scrolled onto the frosted light bar it returns to the default dark-on-light colours. Interior pages have no has-hero → default. */ .theme-dotmatrix.theme-light body.has-hero .nav:not(.is-scrolled) .nav-sp-wordmark, .theme-dotmatrix.theme-light body.has-hero .nav:not(.is-scrolled) .nav-links a { color: #eef1f5; } .theme-dotmatrix.theme-light body.has-hero .nav:not(.is-scrolled) .nav-links a:hover, .theme-dotmatrix.theme-light body.has-hero .nav:not(.is-scrolled) .nav-links a.active { color: #ffffff; } html.theme-dotmatrix.theme-light body.has-hero .nav:not(.is-scrolled) .nav-links a.nav-book { color: #eef1f5; border-color: rgba(238,241,245,0.55); } html.theme-dotmatrix.theme-light body.has-hero .nav:not(.is-scrolled) .nav-links a.nav-book:hover { color: #ffffff; background: var(--dm-accent); border-color: var(--dm-accent); } .theme-dotmatrix.theme-light body.has-hero .nav:not(.is-scrolled) .nav-hamburger span { background: #eef1f5; } /* mobile menu — flush-left dark sheet. The panel is injected by sp-shell.js. Hide it with `visibility` and keep the closed state opacity:1 with NO transition, so a freshly-inserted element has nothing to animate — that kills the ghost that flashed on every page load (a closed-state opacity transition fires 1->0 on insert in Safari). Opacity never changes, so the page can never bleed through the panel either. The slide-in is applied only on open. */ .theme-dotmatrix #sp-mobile-menu.mobile-menu { background: var(--dm-overlay, #121317); color: var(--dm-ink); opacity: 1; visibility: hidden; transform: translateY(-10px); } .theme-dotmatrix #sp-mobile-menu.mobile-menu.is-open { visibility: visible; transform: none; transition: transform 300ms var(--ease); } @media (prefers-reduced-motion: reduce) { .theme-dotmatrix #sp-mobile-menu.mobile-menu.is-open { transition: none; transform: none; } } .theme-dotmatrix #sp-mobile-menu.mobile-menu a { font-family: var(--dm-display); color: var(--dm-ink); } .theme-dotmatrix #sp-mobile-menu.mobile-menu .mobile-menu-close { font-family: var(--dm-mono); color: var(--dm-muted); } /* ============================================================ INTRO overlay (injected by sp-figure-matrix.js) ============================================================ */ .dm-intro { position: fixed; inset: 0; z-index: 200; background: var(--dm-overlay); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; } .dm-intro.is-out { animation: dmIntroFade 0.55s forwards; } .dm-intro-clip { overflow: hidden; } .dm-intro-word { font-family: var(--dm-display); font-weight: 800; font-size: clamp(34px, 6vw, 72px); letter-spacing: 0.02em; line-height: 0.95; color: var(--dm-ink); text-align: center; } .dm-intro.is-in .dm-intro-word { animation: dmIntroWipe 0.95s cubic-bezier(.7,0,.2,1) forwards; } .dm-intro-dots { display: flex; gap: 7px; } .dm-intro-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--dm-line-2); } .dm-intro-dots span:first-child { background: var(--dm-accent); } .dm-intro-label { font-family: var(--dm-mono); font-size: 11px; letter-spacing: 0.28em; color: var(--dm-label-2); text-transform: uppercase; } @keyframes dmIntroWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes dmIntroFade { to { opacity: 0; visibility: hidden; } } /* ============================================================ HERO — full-bleed canvas ============================================================ */ .dm-hero { position: relative; background: var(--dm-well); margin-top: -64px; } .dm-hero-fig { margin: 0; position: relative; overflow: hidden; border-bottom: 1px solid var(--dm-line); background: var(--dm-well) center / cover no-repeat; } .dm-figure { display: block; width: 100%; cursor: crosshair; } #heroFig { height: clamp(560px, 86vh, 880px); } .dm-hero-top { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(14,15,18,0.78), transparent); } .dm-hero-top .dm-inner { padding: 78px 0 16px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 0.2em; color: var(--dm-body); text-transform: uppercase; } .dm-hero-top .dm-doc-id { color: var(--dm-muted); } .dm-hero-cap { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(14,15,18,0.96) 0%, rgba(14,15,18,0.45) 55%, transparent 100%); } .dm-hero-cap .dm-inner { padding: 96px 0 56px; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; } .dm-hero-meta { max-width: 60ch; margin-bottom: 32px; } .dm-hero-cat { font-size: 11px; letter-spacing: 0.2em; color: var(--dm-accent); text-transform: uppercase; } .dm-hero-title { margin: 10px 0 0; font-family: var(--dm-display); font-weight: 800; font-size: clamp(44px, 6.6vw, 96px); line-height: 0.84; letter-spacing: 0.01em; } .dm-hero-desc { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--dm-body-2); } .dm-hero-url { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--dm-accent); letter-spacing: 0.08em; } .dm-hero-ctrl { display: flex; align-items: center; gap: 16px; } .dm-hero-index { font-family: var(--dm-display); font-weight: 300; font-size: 32px; color: var(--dm-muted); letter-spacing: 0.04em; } .dm-iconbtn { border: 1px solid var(--dm-btn); background: rgba(18,19,23,0.55); color: var(--dm-ink); width: 44px; height: 42px; cursor: pointer; font-size: 16px; font-family: var(--dm-mono); display: inline-flex; align-items: center; justify-content: center; } .dm-iconbtn:hover { border-color: var(--dm-accent); } .dm-hero-ticks { display: flex; border-bottom: 1px solid var(--dm-line); } .dm-tick { flex: 1; display: flex; align-items: center; justify-content: center; padding: 9px 0; cursor: pointer; border: 0; border-right: 1px solid var(--dm-line); border-top: 2px solid transparent; background: transparent; color: var(--dm-label-2); font-family: var(--dm-mono); font-size: 10px; letter-spacing: 0.06em; transition: all .16s; } .dm-tick:last-child { border-right: 0; } .dm-tick.is-active { border-top-color: var(--dm-accent); background: var(--dm-panel); color: var(--dm-ink); } /* ============================================================ DOCUMENT BODY ============================================================ */ .dm-doc { padding-top: 64px; } .dm-section-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--dm-line-2); padding-bottom: 18px; } .dm-section-head-l { display: flex; align-items: flex-end; gap: 22px; } .dm-section-num { font-family: var(--dm-display); font-weight: 700; font-size: clamp(34px, 5vw, 68px); line-height: 0.85; color: var(--dm-numeral); } .dm-section-title { margin: 0; font-family: var(--dm-display); font-weight: 800; font-size: clamp(30px, 4vw, 52px); line-height: 0.9; text-shadow: var(--dm-glow-2); } .dm-section-index { font-size: 11px; letter-spacing: 0.2em; color: var(--dm-muted-2); white-space: nowrap; } /* ---------- 01 voice / abstract ---------- */ /* headline left, smaller copy right — side-by-side keeps the section short */ .dm-abstract { padding: var(--dm-sec-pad) 4px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: start; } .dm-abstract-copy { padding-top: 6px; } .dm-abstract-label { font-size: 11px; letter-spacing: 0.22em; color: var(--dm-muted-2); text-transform: uppercase; } .dm-abstract-tag { font-size: 11px; letter-spacing: 0.16em; color: var(--dm-faint); text-transform: uppercase; margin-top: 28px; } .dm-abstract-h { margin: 22px 0 0; font-family: var(--dm-display); font-weight: 800; font-size: clamp(40px, 5.2vw, 76px); line-height: 0.9; text-shadow: var(--dm-glow); } .dm-h-line { display: block; } .dm-em { color: var(--dm-accent); } /* headline "power-on" bloom — JS arms it (.dm-anim), scroll-in fires it (.is-on). Without JS the lines just stay visible; reduced-motion skips the bloom. */ .dm-abstract-h.dm-anim .dm-h-line { opacity: 0; } .dm-abstract-h.dm-anim.is-on .dm-h-line { animation: dm-power-on 1250ms cubic-bezier(.2, .7, .2, 1) both; } .dm-abstract-h.dm-anim.is-on .dm-h-line:last-child { animation-delay: 480ms; } @keyframes dm-power-on { 0% { opacity: 0; transform: scale(0.92); filter: blur(3px); text-shadow: none; } 55% { opacity: 1; transform: scale(1.03); filter: blur(0); text-shadow: 0 0 28px rgba(196, 216, 242, 0.7), 0 0 3px rgba(255, 255, 255, 0.5); } 100% { opacity: 1; transform: scale(1); filter: blur(0); text-shadow: var(--dm-glow); } } @media (prefers-reduced-motion: reduce) { .dm-abstract-h.dm-anim .dm-h-line { opacity: 1; animation: none; } } .dm-abstract-p { margin: 0; font-size: 16px; line-height: 1.72; color: var(--dm-body); max-width: 52ch; } .dm-inline-link { display: inline-block; margin-top: 24px; font-size: 13px; color: var(--dm-accent); letter-spacing: 0.08em; border-bottom: 1px solid var(--dm-accent-line); padding-bottom: 3px; } /* ---------- featured panels ---------- */ .dm-featured { border: 1px solid var(--dm-line); background: var(--dm-panel); margin: 44px 0; } .dm-featured-head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 22px; border-bottom: 1px solid var(--dm-line); font-size: 11px; letter-spacing: 0.18em; color: var(--dm-muted-2); text-transform: uppercase; } .dm-fig-no { color: var(--dm-accent); } .dm-featured-grid { display: grid; grid-template-columns: 1fr 1fr; } .dm-featured-text { padding: 40px 22px 40px 40px; display: flex; flex-direction: column; justify-content: center; } .dm-featured-h { margin: 0; font-family: var(--dm-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); line-height: 0.96; text-shadow: var(--dm-glow-2); } .dm-featured-p { margin: 20px 0 0; font-size: 15px; line-height: 1.7; color: var(--dm-body); max-width: 48ch; } .dm-featured-well { padding: 14px; border-left: 1px solid var(--dm-line); } .dm-featured-rev .dm-featured-text { padding: 40px 40px 40px 22px; } .dm-featured-rev .dm-featured-well { border-left: 0; border-right: 1px solid var(--dm-line); } .dm-featured-rev .dm-featured-text { order: 2; } .dm-featured-fig { width: 100%; height: 312px; } /* ---------- 02 services ---------- */ .dm-section { padding: var(--dm-sec-pad) 4px; scroll-margin-top: 70px; } .dm-services { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--dm-line); } .dm-service { display: flex; flex-direction: column; padding: 26px; border-right: 1px solid var(--dm-line); } .dm-service:last-child { border-right: 0; } .dm-service-well { border: 1px solid var(--dm-line-2); background: var(--dm-well); padding: 7px; } .dm-service-fig { width: 100%; height: 148px; } .dm-service-row { display: flex; align-items: baseline; gap: 12px; margin-top: 22px; } .dm-service-num { font-family: var(--dm-display); font-weight: 300; font-size: 30px; color: var(--dm-accent); line-height: 1; } .dm-service-kicker { font-size: 10px; letter-spacing: 0.2em; color: var(--dm-label); text-transform: uppercase; } .dm-service-h { margin: 14px 0 0; font-family: var(--dm-display); font-weight: 700; font-size: 26px; } .dm-service-p { margin: 14px 0 0; font-size: 15px; line-height: 1.72; color: var(--dm-body); flex: 1; } .dm-ledger { margin-top: 22px; display: flex; flex-direction: column; font-size: 12px; color: var(--dm-muted-2); } .dm-ledger span { border-top: 1px solid var(--dm-line); padding: 8px 0; } /* ---------- 03 from the lab ---------- */ .dm-twocol { display: grid; grid-template-columns: 1fr 1fr; margin-top: 8px; } .dm-twocol > div { padding: 34px; } .dm-twocol > div:first-child { padding-left: 6px; border-right: 1px solid var(--dm-line); } .dm-twocol > div:last-child { padding-right: 6px; } .dm-card-kicker { font-size: 10px; letter-spacing: 0.2em; color: var(--dm-label); text-transform: uppercase; } .dm-card-h { margin: 10px 0 0; font-family: var(--dm-display); font-weight: 700; font-size: 24px; } .dm-card-p { margin: 16px 0 0; font-size: 15px; line-height: 1.7; color: var(--dm-body); } /* ---------- 04 process ---------- */ .dm-process { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; margin-top: 30px; align-items: start; } .dm-process-body { display: flex; flex-direction: column; gap: 18px; } .dm-process-body p { margin: 0; font-size: 16px; line-height: 1.72; color: var(--dm-body); } .dm-stats { border: 1px solid var(--dm-line); } .dm-stats-grid { display: grid; grid-template-columns: 1fr 1fr; } .dm-stat { padding: 18px; border-bottom: 1px solid var(--dm-line); } .dm-stat:nth-child(odd) { border-right: 1px solid var(--dm-line); } .dm-stat:nth-child(n+3) { border-bottom: 0; } .dm-stat-k { font-size: 10px; letter-spacing: 0.18em; color: var(--dm-label); text-transform: uppercase; } .dm-stat-v { font-family: var(--dm-display); font-weight: 600; font-size: 20px; margin-top: 8px; } /* ---------- contact ---------- */ .dm-contact { padding: var(--dm-sec-pad) 4px 60px; scroll-margin-top: 70px; } .dm-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; margin-top: 40px; } .dm-contact-h { margin: 0; font-family: var(--dm-display); font-weight: 800; font-size: clamp(40px, 6vw, 84px); line-height: 0.88; text-shadow: var(--dm-glow-2); } .dm-contact-p { margin: 26px 0 0; font-size: 15px; line-height: 1.72; color: var(--dm-body); max-width: 42ch; } .dm-form { display: flex; flex-direction: column; gap: 22px; } .dm-field { display: block; } .dm-field-label { font-size: 10px; letter-spacing: 0.2em; color: var(--dm-label); text-transform: uppercase; } .dm-field input, .dm-field textarea { width: 100%; margin-top: 8px; background: transparent; border: 0; border-bottom: 1px solid var(--dm-line-2); color: var(--dm-ink); padding: 8px 0; font-size: 15px; font-family: var(--dm-mono); outline: none; resize: vertical; } .dm-field input:focus, .dm-field textarea:focus { border-bottom-color: var(--dm-accent); } .dm-field input::placeholder, .dm-field textarea::placeholder { color: var(--dm-faint); } /* ---------- standard CTA (squared, outlined-accent) — every button CTA ---------- */ .dm-cta, .dm-submit { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; border: 1px solid var(--dm-accent); background: transparent; color: var(--dm-ink); padding: 12px 20px; font-family: var(--dm-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; border-radius: 0; cursor: pointer; text-decoration: none; transition: background 200ms ease, color 200ms ease; } .dm-cta:hover, .dm-submit:hover { background: var(--dm-accent); color: var(--dm-bg); } .dm-form-status { font-size: 12px; color: var(--dm-muted); min-height: 1em; } .dm-form-status[data-state="ok"] { color: var(--dm-accent-2); } .dm-form-status[data-state="err"] { color: #e8746a; } /* ============================================================ INTERIOR-PAGE COMPONENTS (about / mission / services / legal …) ============================================================ */ /* page header — every non-homepage page opens with one. A defined "letterhead" band: a subtle lift + slightly stronger feed lines than the page body, so the header reads as its own zone. (Light sister does the inverse — darker band on light — on .ds-hero.) */ .dm-page-hero { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 128px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--dm-line-2); background-color: #191a20; background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 64px, transparent 64px, transparent 128px), repeating-linear-gradient(to bottom, transparent 0, transparent 63px, rgba(255,255,255,0.07) 63px, rgba(255,255,255,0.07) 64px); background-size: 100% 128px, 100% 64px; } /* Light-primary pages: the letterhead band inverts to a LIGHT band (dark feed lines), so the dark headline ink reads. The hardcoded dark fill above is the dark-page treatment; this overrides it on the light sister. */ .theme-dotmatrix.theme-light .dm-page-hero { background-color: #e5e8ed; background-image: repeating-linear-gradient(to bottom, rgba(23,27,42,0.05) 0, rgba(23,27,42,0.05) 64px, transparent 64px, transparent 128px), repeating-linear-gradient(to bottom, transparent 0, transparent 63px, rgba(23,27,42,0.11) 63px, rgba(23,27,42,0.11) 64px); } .dm-page-hero > .dm-inner { position: relative; z-index: 1; } .dm-page-hero-ghost { position: absolute; right: -0.04em; top: 50%; transform: translateY(-50%); z-index: 0; font-family: var(--dm-display); font-weight: 800; font-size: clamp(180px, 32vw, 500px); line-height: 0.78; letter-spacing: 0.02em; white-space: nowrap; /* --dm-line-2 (stronger than the hairline) so the ghost reads on the lighter letterhead band — dense words like "enough." washed out at --dm-line. */ color: var(--dm-line-2); opacity: 0.5; pointer-events: none; user-select: none; } .dm-page-hero-eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dm-accent); } .dm-page-hero-h { margin: 22px 0 0; font-family: var(--dm-display); font-weight: 800; font-size: clamp(38px, 5.6vw, 84px); line-height: 0.94; letter-spacing: 0.01em; text-shadow: var(--dm-glow); max-width: 18ch; } .dm-page-hero-h .dm-em { color: var(--dm-accent); } .dm-page-meta { display: flex; flex-direction: column; gap: 8px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--dm-line); max-width: 72ch; font-family: var(--dm-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dm-muted); } /* closing CTA band */ .dm-cta-band { padding: clamp(60px, 9vw, 120px) 0; border-top: 1px solid var(--dm-line); background: var(--dm-bg); } .dm-cta-band-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: end; } .dm-cta-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dm-accent); } .dm-cta-h { margin: 20px 0 0; font-family: var(--dm-display); font-weight: 800; font-size: clamp(34px, 4.6vw, 64px); line-height: 0.94; text-shadow: var(--dm-glow); } .dm-cta-h .dm-em { color: var(--dm-accent); } .dm-cta-sub { margin: 22px 0 0; font-size: 15px; line-height: 1.7; color: var(--dm-body); max-width: 50ch; } .dm-cta-actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } /* long-form prose (legal, bio, manifesto) */ .dm-prose { max-width: 68ch; counter-reset: dm-sec; } .dm-prose > :first-child { margin-top: 0; } .dm-prose p { margin: 0 0 20px; font-size: 16px; line-height: 1.75; color: var(--dm-body); } .dm-prose strong { color: var(--dm-ink); font-weight: 400; } /* Doc / section-heading standard: Doto goes muddy under ~32px, so numbered doc headings use the readable monospace "printout" treatment. Title stays INK (accent blue is reserved for interactive — links/buttons/hover — so a blue title would read as a link); the accent lives only on the auto-number, which no one mistakes for a link. Doto stays for the big display headings. */ .dm-prose h2 { counter-increment: dm-sec; font-family: var(--dm-mono); font-weight: 400; font-size: clamp(18px, 2.4vw, 23px); line-height: 1.35; letter-spacing: 0.005em; color: var(--dm-ink); margin: 52px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--dm-line); } .dm-prose h2::before { content: counter(dm-sec) ".\00A0"; color: var(--dm-accent); } .dm-prose h3 { font-family: var(--dm-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dm-label); margin: 30px 0 12px; } .dm-prose ul, .dm-prose ol { margin: 0 0 20px; padding-left: 1.3em; color: var(--dm-body); } .dm-prose li { margin: 0 0 10px; line-height: 1.7; } .dm-prose a { color: var(--dm-accent); border-bottom: 1px solid var(--dm-accent-line); } .dm-prose--doc { margin-inline: auto; } .dm-prose-note { border: 1px solid var(--dm-line-2); background: var(--dm-panel); padding: 24px 28px; margin-top: 20px; } .dm-prose-note p { margin: 0 0 6px; font-size: 14px; color: var(--dm-body); } .dm-prose-note p:last-child { margin-bottom: 0; } .dm-prose-note strong { color: var(--dm-ink); } /* un-numbered part divider inside doc prose (e.g. Refund "Part A / Part B") — opts out of the auto-numbering counter so the numbered sections stay 1..n */ .dm-prose h2.dm-part { counter-increment: none; margin-top: 64px; font-size: clamp(20px, 2.8vw, 28px); color: var(--dm-ink); } .dm-prose h2.dm-part::before { content: none; } /* ---- 404 (dot-matrix error readout) ---- */ .dm-404 { min-height: 72vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(80px, 10vw, 140px) clamp(24px, 5vw, 72px); } .dm-404-eyebrow { font-family: var(--dm-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dm-label); margin: 0 0 24px; } .dm-404-code { font-family: var(--dm-display); font-weight: 800; font-size: clamp(120px, 22vw, 280px); line-height: 0.86; letter-spacing: 0.03em; color: var(--dm-ink); margin: 0; text-shadow: var(--dm-glow-2); user-select: none; } .dm-404-zero { color: var(--dm-line-2); text-shadow: none; } /* burnt-out LED segment */ .dm-404-title { font-family: var(--dm-display); font-weight: 800; font-size: clamp(28px, 4vw, 48px); line-height: 0.96; color: var(--dm-ink); margin: 28px 0 16px; max-width: 22ch; text-shadow: var(--dm-glow); } .dm-404-title em { color: var(--dm-body); font-style: normal; } /* muted, not accent (blue = interactive) */ .dm-404-desc { font-family: var(--dm-mono); font-size: 14px; line-height: 1.65; color: var(--dm-body); max-width: 48ch; margin: 0 auto 40px; } .dm-404-actions { display: flex; flex-direction: column; align-items: center; gap: 26px; } .dm-404-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; } .dm-404-nav a { font-family: var(--dm-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dm-accent); } @media (prefers-reduced-motion: no-preference) { .dm-404-zero { animation: dm-led-flicker 7s steps(1, end) infinite; } } @keyframes dm-led-flicker { 0%, 90%, 100% { color: var(--dm-line-2); } 93% { color: var(--dm-label); } 95% { color: var(--dm-line-2); } 97% { color: var(--dm-label); } } /* ---- LED dot-matrix icons (rendered by sp-doticons.js) ---- */ .dm-doticon { width: 60px; aspect-ratio: 1 / 1; --dmi-color: #eef3fb; --dmi-glow: rgba(210,225,245,0.7); } .dm-doticon svg { width: 100%; height: 100%; display: block; overflow: visible; } .dm-doticon .dmi-off circle { fill: var(--dm-line-2); } .dm-doticon .dmi-lit circle { fill: var(--dmi-color); } .dm-doticon .dmi-lit { filter: drop-shadow(0 0 1.5px var(--dmi-glow)) drop-shadow(0 0 4px var(--dmi-glow)); transform-origin: 50% 50%; } /* per-icon color treatment (LED hues; icons are decorative, not interactive) */ .dm-doticon[data-doticon="heart"] { --dmi-color: #ff5b60; --dmi-glow: rgba(255,91,96,0.72); } .dm-doticon[data-doticon="cup"] { --dmi-color: #f2a24e; --dmi-glow: rgba(242,162,78,0.68); } .dm-doticon[data-doticon="growth"] { --dmi-color: #5fcf8e; --dmi-glow: rgba(95,207,142,0.68); } .dm-doticon[data-doticon="bolt"] { --dmi-color: #f2c94e; --dmi-glow: rgba(242,201,78,0.68); } .dm-doticon[data-doticon="spark"] { --dmi-color: #8fbcf2; --dmi-glow: rgba(143,188,242,0.68); } /* power-on bloom when scrolled into view (JS toggles .is-lit) */ .dm-doticon--anim .dmi-lit { opacity: 0; transform: scale(0.86); } .dm-doticon--anim.is-lit .dmi-lit { opacity: 1; transform: scale(1); transition: opacity 720ms ease, transform 760ms cubic-bezier(0.2,0.7,0.2,1); } /* growth grows from its base */ .dm-doticon[data-doticon="growth"] .dmi-lit { transform-origin: 50% 92%; } @media (prefers-reduced-motion: no-preference) { /* default: gentle glow breath (bolt / spark) */ .dm-doticon.is-lit .dmi-lit { animation: dmi-pulse 4.6s ease-in-out 1000ms infinite; } /* per-icon character motion, layered over the glow breath */ .dm-doticon[data-doticon="heart"].is-lit .dmi-lit { animation: dmi-heart 3s ease-in-out 1000ms infinite, dmi-pulse 4.6s ease-in-out 1000ms infinite; } .dm-doticon[data-doticon="cup"].is-lit .dmi-lit { animation: dmi-steam 3.6s ease-in-out 1000ms infinite, dmi-pulse 4.6s ease-in-out 1000ms infinite; } .dm-doticon[data-doticon="growth"].is-lit .dmi-lit { animation: dmi-grow 3.4s ease-in-out 1000ms infinite, dmi-pulse 4.6s ease-in-out 1000ms infinite; } } @keyframes dmi-pulse { 0%, 100% { filter: drop-shadow(0 0 1.4px var(--dmi-glow)) drop-shadow(0 0 3px var(--dmi-glow)); } 50% { filter: drop-shadow(0 0 2.3px var(--dmi-glow)) drop-shadow(0 0 6.5px var(--dmi-glow)); } } @keyframes dmi-heart { 0%, 46%, 100% { transform: scale(1); } 10% { transform: scale(1.09); } 22% { transform: scale(1); } 32% { transform: scale(1.05); } } @keyframes dmi-steam { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } } @keyframes dmi-grow { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1px) scale(1.045); } } /* ---- 3-up cards with an LED icon (Mission "who this is for") ---- */ .dm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: 10px; } .dm-cards > article { border: 1px solid var(--dm-line); background: var(--dm-panel); padding: 30px 28px; } .dm-cards .dm-doticon { margin-bottom: 22px; } /* ---- heading / content split (Mission "the name") ---- */ .dm-split { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(40px, 6vw, 96px); align-items: start; } /* ---- horizontal dot-matrix timeline ---- */ .dm-timeline { margin-top: clamp(34px, 5vw, 56px); } .dm-tl-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 40px); border-top: 1px dotted var(--dm-line-2); padding-top: 30px; } .dm-tl-node { position: relative; } .dm-tl-node::before { content: ""; position: absolute; top: -34px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: #eef3fb; box-shadow: 0 0 7px rgba(210,225,245,0.6); } .dm-tl-date { font-family: var(--dm-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dm-label); } .dm-tl-label { font-family: var(--dm-display); font-weight: 700; font-size: clamp(18px, 2vw, 24px); line-height: 1; color: var(--dm-ink); margin-top: 8px; } .dm-tl-sub { font-family: var(--dm-mono); font-size: 12px; line-height: 1.55; color: var(--dm-body); margin-top: 8px; } /* ---- big Doto stat callouts ---- */ .dm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); border-block: 1px solid var(--dm-line); padding-block: clamp(34px, 4vw, 56px); } .dm-stat-num { font-family: var(--dm-display); font-weight: 800; font-size: clamp(48px, 7vw, 92px); line-height: 0.82; color: var(--dm-ink); text-shadow: var(--dm-glow-2); } .dm-stat-label { font-family: var(--dm-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dm-label); margin-top: 16px; } .dm-stat-sub { font-family: var(--dm-mono); font-size: 12.5px; line-height: 1.55; color: var(--dm-body); margin-top: 8px; } /* ---- manifesto lead prose with a Doto drop-cap ---- */ .dm-prose--lead p { font-size: 16.5px; } .dm-prose--lead > p:first-of-type::first-letter { font-family: var(--dm-display); font-weight: 800; font-size: 3.1em; line-height: 0.72; float: left; margin: 0.06em 0.14em 0 0; color: var(--dm-ink); text-shadow: var(--dm-glow); } /* ---- lead paragraph + pull-quote beats ---- */ .dm-lead { font-family: var(--dm-mono); font-size: 15px; line-height: 1.7; color: var(--dm-body); max-width: 62ch; margin: 0 0 clamp(28px, 4vw, 44px); } .dm-pullquote { margin: clamp(40px, 6vw, 72px) 0; padding-left: clamp(18px, 3vw, 36px); border-left: 2px solid var(--dm-line-2); } .dm-pullquote p { margin: 0; font-family: var(--dm-display); font-weight: 800; font-size: clamp(28px, 4vw, 52px); line-height: 1.04; color: var(--dm-ink); text-shadow: var(--dm-glow); } /* ---- LED meter (unified) — mission gap diagram + Core Web Vitals readouts ---- Row = label · dotted-LED track/fill · optional value. Fill extent set from data-fill by sp-meters.js (JS width, so no inline styles); draw-in is CSS, driven by the shared .reveal / .is-entering mechanism (on the meter itself or any ancestor). --gap variant = 2-col rows, wider label, capped width. */ .dm-meter { display: grid; gap: 14px; --dm-meter-label-w: 88px; } .dm-meter-row { display: grid; grid-template-columns: var(--dm-meter-label-w) 1fr auto; align-items: center; gap: 14px; } .dm-meter-label { font-family: var(--dm-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dm-label); } .dm-meter-track { position: relative; height: 12px; border: 1px solid var(--dm-line-2); overflow: hidden; } .dm-meter-fill { position: absolute; inset: 1px auto 1px 1px; width: 100%; background: repeating-linear-gradient(90deg, #eef3fb 0 2.5px, transparent 2.5px 8px); box-shadow: 0 0 6px rgba(210,225,245,0.3); transform-origin: left center; transform: scaleX(0); } .dm-meter-value { font-family: var(--dm-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--dm-accent); opacity: 0; } .dm-meter-note { font-family: var(--dm-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--dm-body); margin: 4px 0 0; } .dm-meter--gap { --dm-meter-label-w: 120px; gap: 16px; max-width: 640px; margin-top: clamp(30px, 4vw, 50px); } .dm-meter--gap .dm-meter-row { grid-template-columns: var(--dm-meter-label-w) 1fr; gap: 20px; } /* draw-in + value reveal when the meter (or its section) scrolls into view */ .dm-meter.is-entering .dm-meter-fill { transform: scaleX(1); transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1); } .dm-meter.is-entering .dm-meter-row:nth-child(2) .dm-meter-fill { transition-delay: 140ms; } .dm-meter.is-entering .dm-meter-row:nth-child(3) .dm-meter-fill { transition-delay: 280ms; } .dm-meter.is-entering .dm-meter-value { opacity: 1; transition: opacity 320ms ease; transition-delay: 780ms; } .dm-meter.is-entering .dm-meter-row:nth-child(2) .dm-meter-value { transition-delay: 900ms; } .dm-meter.is-entering .dm-meter-row:nth-child(3) .dm-meter-value { transition-delay: 1020ms; } @media (prefers-reduced-motion: reduce) { .dm-meter-fill { transform: none; } .dm-meter-value { opacity: 1; } } .dm-section-actions { margin-top: clamp(32px, 4vw, 44px); } /* ============================================================ SERVICES — pricing tiers, add-on cards, process steps ============================================================ */ /* hero descriptive paragraph (services lead under the h1) */ .dm-page-hero-desc { margin: 24px 0 0; max-width: 56ch; font-family: var(--dm-mono); font-size: 14.5px; line-height: 1.68; color: var(--dm-body); } .dm-page-hero-desc strong { color: var(--dm-ink); font-weight: 400; } /* card-grid column modifiers + card footer (add-ons) */ .dm-cards--two { grid-template-columns: 1fr 1fr; } .dm-cards--two > article { display: flex; flex-direction: column; } .dm-cards--two .dm-card-p { flex: 1; } .dm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--dm-line); } .dm-card-price { font-family: var(--dm-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--dm-body); } .dm-card-foot .dm-inline-link { margin-top: 0; } /* pricing tiers */ .dm-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 28px); margin-top: 12px; } .dm-tier { display: flex; flex-direction: column; border: 1px solid var(--dm-line); background: var(--dm-panel); padding: clamp(30px, 4vw, 46px); } .dm-tier--featured { border-color: var(--dm-line-2); box-shadow: 0 24px 60px -40px rgba(0,0,0,0.85); } .dm-tier-badge { font-family: var(--dm-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dm-label); margin-bottom: 22px; } .dm-tier-name { margin: 0 0 18px; font-family: var(--dm-display); font-weight: 800; font-size: clamp(30px, 3.6vw, 46px); line-height: 0.92; color: var(--dm-ink); text-shadow: var(--dm-glow); } .dm-tier-name em { font-style: normal; color: var(--dm-muted); } .dm-tier-price { font-family: var(--dm-mono); font-size: 22px; letter-spacing: 0.01em; color: var(--dm-ink); } .dm-tier-price-note { font-family: var(--dm-mono); font-size: 12px; color: var(--dm-muted); margin-top: 6px; } .dm-tier-rule { height: 1px; background: var(--dm-line); margin: 26px 0; } .dm-tier-inc { font-family: var(--dm-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dm-label); margin-bottom: 16px; } .dm-tier-items { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 13px; flex: 1; } .dm-tier-item { display: flex; gap: 13px; font-size: 14px; line-height: 1.55; color: var(--dm-body); padding-bottom: 13px; border-bottom: 1px solid var(--dm-line); } .dm-tier-item:last-child { padding-bottom: 0; border-bottom: 0; } .dm-tier-item::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; margin-top: 6px; border-radius: 50%; background: #eef3fb; box-shadow: 0 0 5px rgba(210,225,245,0.5); } .dm-tier-label { color: var(--dm-ink); } .dm-tier .dm-cta { align-self: stretch; justify-content: center; } .dm-tier-offer { margin-top: 16px; font-family: var(--dm-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dm-muted); text-align: center; } /* process — four numbered steps */ .dm-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: 12px; } .dm-steps > article { border: 1px solid var(--dm-line); background: var(--dm-panel); padding: 26px 24px; } .dm-step-num { font-family: var(--dm-display); font-weight: 300; font-size: clamp(30px, 3vw, 42px); line-height: 1; color: var(--dm-accent); } .dm-step-h { margin: 14px 0 0; font-family: var(--dm-display); font-weight: 700; font-size: 21px; line-height: 1.1; } .dm-step-p { margin: 14px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--dm-body); } @media (max-width: 860px) { .dm-cards { grid-template-columns: 1fr; } .dm-split { grid-template-columns: 1fr; gap: 28px; } .dm-tiers { grid-template-columns: 1fr; } .dm-steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .dm-steps { grid-template-columns: 1fr; } } @media (max-width: 760px) { .dm-tl-track { grid-template-columns: 1fr; gap: 30px; } .dm-tl-node::before { top: -22px; } .dm-stats { grid-template-columns: 1fr; gap: 30px; } } /* bio — portrait figure + prose */ .dm-bio { display: grid; grid-template-columns: 0.85fr 1.4fr; gap: clamp(32px, 5vw, 80px); align-items: start; } /* square matte LED portrait — full-frame square photo in a thin well mat, consistent with the other dot-matrix figures */ .dm-bio-fig { position: relative; border: 1px solid var(--dm-line-2); background: var(--dm-well); aspect-ratio: 1 / 1; } .dm-bio-fig canvas { position: absolute; top: 7px; left: 7px; width: calc(100% - 14px); height: calc(100% - 14px); display: block; } /* beliefs — numbered two-column list */ .dm-beliefs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 3vw, 56px); } .dm-belief { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--dm-line); } .dm-belief-num { font-family: var(--dm-display); font-weight: 300; font-size: 30px; line-height: 1; color: var(--dm-accent); } .dm-belief-title { font-family: var(--dm-display); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--dm-ink); margin: 0 0 10px; } .dm-belief-text { font-size: 14.5px; line-height: 1.65; color: var(--dm-muted); } /* metrics — big-number cards (experience / stats) */ .dm-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--dm-line); margin-top: 30px; } .dm-metric { padding: 34px 28px; border-right: 1px solid var(--dm-line); } .dm-metric:last-child { border-right: 0; } .dm-metric-num { font-family: var(--dm-display); font-weight: 800; font-size: clamp(48px, 6vw, 82px); line-height: 1; color: var(--dm-ink); text-shadow: var(--dm-glow); } .dm-metric-title { font-family: var(--dm-display); font-weight: 700; font-size: 16px; margin: 18px 0 10px; color: var(--dm-ink); } .dm-metric-desc { font-size: 14px; line-height: 1.65; color: var(--dm-muted); } /* interior-page stacking */ @media (max-width: 860px) { .dm-cta-band-grid { grid-template-columns: 1fr; align-items: start; gap: 28px; } .dm-bio { grid-template-columns: 1fr; } .dm-bio-fig { max-width: 340px; } .dm-beliefs { grid-template-columns: 1fr; } .dm-metrics { grid-template-columns: 1fr; } .dm-metric { border-right: 0; border-bottom: 1px solid var(--dm-line); } .dm-metric:last-child { border-bottom: 0; } } /* ============================================================ FOOTER (injected ) — dark overrides ============================================================ */ .theme-dotmatrix .site-footer { background: transparent; border-top: 1px solid var(--dm-line-2); color: var(--dm-muted); } .theme-dotmatrix .footer-wordmark span { font-family: var(--dm-display); font-weight: 800; letter-spacing: 0.04em; color: var(--dm-ink); } .theme-dotmatrix .footer-brand p { color: var(--dm-muted-2); } .theme-dotmatrix .footer-meta { color: var(--dm-label-2); } .theme-dotmatrix .footer-col h3 { font-family: var(--dm-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--dm-label); text-transform: uppercase; } .theme-dotmatrix .footer-col a { color: var(--dm-muted); } .theme-dotmatrix .footer-col a:hover { color: var(--dm-ink); } .theme-dotmatrix .footer-social a { color: var(--dm-muted); } .theme-dotmatrix .footer-social a:hover { color: var(--dm-accent); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 980px) { .dm-abstract { grid-template-columns: 1fr; gap: 22px; } .dm-abstract-copy { padding-top: 0; } .dm-featured-grid { grid-template-columns: 1fr; } .dm-featured-rev .dm-featured-text { order: 0; } .dm-featured-well, .dm-featured-rev .dm-featured-well { border-left: 0; border-right: 0; border-top: 1px solid var(--dm-line); } .dm-twocol { grid-template-columns: 1fr; } .dm-twocol > div:first-child { border-right: 0; border-bottom: 1px solid var(--dm-line); padding-left: 6px; } .dm-twocol > div:last-child { padding-left: 6px; } /* stacked: align with first child, was left-indented by base 34px pad */ .dm-process { grid-template-columns: 1fr; gap: 28px; } .dm-contact-grid { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 860px) { .theme-dotmatrix { --dm-inner: 88%; } .dm-services { grid-template-columns: 1fr; } .dm-service { border-right: 0; border-bottom: 1px solid var(--dm-line); } .dm-service:last-child { border-bottom: 0; } .dm-featured-text { padding: 28px 22px; } .dm-featured-rev .dm-featured-text { padding: 28px 22px; } } @media (max-width: 560px) { .theme-dotmatrix { --dm-inner: 90%; } /* content nears full width here — pull the feed margins so they don't clip it */ .theme-dotmatrix body::before, .theme-dotmatrix body::after { display: none; } #heroFig { height: clamp(420px, 70vh, 560px); } .dm-hero-cap .dm-inner { padding: 64px 0 32px; } .dm-hero-ctrl { gap: 10px; } .dm-featured-fig { height: 220px; } .dm-stats-grid { grid-template-columns: 1fr; } .dm-meter--gap { --dm-meter-label-w: 84px; } .dm-meter--gap .dm-meter-row { gap: 14px; } } /* ============================================================ REDUCED MOTION — kill the wipe/intro transitions (the JS also skips the sweep + intro entirely) ============================================================ */ @media (prefers-reduced-motion: reduce) { .dm-intro.is-in .dm-intro-word { animation: none; clip-path: none; } .dm-intro.is-out { animation: none; opacity: 0; visibility: hidden; } .dm-dotmark span { transition: none; opacity: 1; transform: none; } .dm-tick { transition: none; } } /* ============================================================ HOMEPAGE — Project Dotmatrix "dark done right" The dark board on the GridSim "sp" grid (1320 max-width · 24px margin · 12 cols · 24px gutter) with full-bleed tonal zones. Scoped to the homepage (body.has-hero) as the reference build; generalize to the other pages on rollout. Reversible: drop this block + restore the light flip. ============================================================ */ /* --- container: anchor to the sp grid (1320/24), replacing the 76%/2000 float --- */ body.has-hero .dm-doc.dm-inner, body.has-hero .dm-hero-top .dm-inner, body.has-hero .dm-hero-cap .dm-inner { width: auto; max-width: 1320px; margin-inline: auto; padding-inline: 24px; } body.has-hero .dm-hero-cap .dm-inner { padding-top: 64px; padding-bottom: 32px; } /* homepage: the hero (desktop ticks / mobile caption) flows straight into the first letterhead band — drop the 64px doc gap that read as an empty band */ body.has-hero .dm-doc { padding-top: 0; } /* --- every content section becomes a 12-col grid on the shared lines --- */ body.has-hero .dm-doc > section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-left: 0; padding-right: 0; position: relative; } /* default: section children span all 12; specific splits override below */ body.has-hero .dm-doc > section > * { grid-column: 1 / -1; } /* abstract — headline cols 1-6, body cols 8-12 */ body.has-hero .dm-abstract > .dm-abstract-lead { grid-column: 1 / 7; align-self: start; } body.has-hero .dm-abstract > .dm-abstract-copy { grid-column: 8 / 13; align-self: start; } /* contact — copy/form split on the same column lines */ body.has-hero .dm-contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; } body.has-hero .dm-contact-grid > :first-child { grid-column: 1 / 7; } body.has-hero .dm-contact-grid > :last-child { grid-column: 8 / 13; } /* Mobile: collapse the homepage section grids to one stacked column. Otherwise the abstract body (cols 8-12) and the contact copy/form split stay pinned to a narrow half-width column — in monospace that wraps to 2-3 words per line on a phone (an unreadable ribbon). Stack full-width below the heading instead. */ @media (max-width: 860px) { body.has-hero .dm-doc > section, body.has-hero .dm-contact-grid { grid-template-columns: 1fr; row-gap: 28px; } body.has-hero .dm-abstract > .dm-abstract-lead, body.has-hero .dm-abstract > .dm-abstract-copy, body.has-hero .dm-contact-grid > :first-child, body.has-hero .dm-contact-grid > :last-child { grid-column: 1 / -1; } /* mobile-only hero declutter (desktop keeps the numbered strip + index + full controls): hide the tick strip + index, shrink the play controls, strengthen the title scrim over the busy emblem, and tighten the hero -> content gap */ .dm-hero-index, .dm-hero-ticks { display: none; } .dm-hero-ctrl { gap: 10px; } .dm-iconbtn { width: 34px; height: 34px; font-size: 12px; } .dm-hero-cap { background: linear-gradient(to top, rgba(14,15,18,0.97) 0%, rgba(14,15,18,0.9) 40%, rgba(14,15,18,0.6) 70%, transparent 100%); } .dm-hero-meta { margin-bottom: 0; } body.has-hero .dm-hero-cap .dm-inner { padding-bottom: 16px; } } /* --- full-bleed tonal zones (content stays gridded, band spans the viewport) --- */ body.has-hero .dm-abstract, body.has-hero .dm-section:not([id]), body.has-hero #process, body.has-hero .dm-contact { background: transparent; } body.has-hero .dm-abstract::before, body.has-hero .dm-section:not([id])::before, body.has-hero #process::before, body.has-hero .dm-contact::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; margin-left: -50vw; width: 100vw; z-index: -1; border-top: 1px solid var(--dm-line-2); } body.has-hero .dm-abstract::before, body.has-hero .dm-section:not([id])::before, body.has-hero .dm-contact::before { background-color: var(--dm-well); background-image: repeating-linear-gradient( to bottom, rgba(255,255,255,0.014) 0, rgba(255,255,255,0.014) 64px, transparent 64px, transparent 128px); background-size: 100% 128px; } body.has-hero #process::before { background-color: var(--dm-panel); } /* featured — lifted, bordered plate spanning the grid width */ body.has-hero .dm-featured { border-color: var(--dm-line-2); } /* footer — onto the sp grid (site-wide): 1320 cap already correct, fix padding 72→24 and gutter 32→24 so its 12 columns (brand span-4 + 4× span-2) land on the lines */ .theme-dotmatrix .site-footer .inner { padding-inline: 24px; column-gap: 24px; } /* nav — bar stays full-width; cap its content to the sp grid (site-wide) so the logo lands on col 1, aligned with content + footer on every page */ .theme-dotmatrix .nav { padding-inline: max(24px, calc((100% - 1320px) / 2 + 24px)); } /* ============================================================ BACK-TO-TOP — scroll shortcut, injected on every page by sp-shell.js. Surfaces after ~a screenful of scroll; hidden otherwise. ============================================================ */ .dm-totop { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--dm-line-2); background: rgba(18, 19, 23, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--dm-ink); font-family: var(--dm-mono); font-size: 18px; line-height: 1; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s, border-color .2s, color .2s; } .dm-totop.is-shown { opacity: 1; visibility: visible; transform: none; } .dm-totop:hover { border-color: var(--dm-accent); color: var(--dm-accent); } @media (prefers-reduced-motion: reduce) { .dm-totop { transition: opacity .25s ease, visibility .25s; transform: none; } } /* ============================================================ INTERIOR PAGES — tonal zone rhythm ("dark done right" everywhere) Content sections drop into full-bleed recessed well bands with the feed-line texture, alternating with base-bg sections, so content pages carry the same printed-document rhythm as the homepage. Multi-section pages (dm-doc) band every other section; single-section pages (prose, USA memo) band their one content section. Homepage keeps its own zones. ============================================================ */ body:not(.has-hero) .dm-doc > .dm-section, body:not(.has-hero) main > .dm-section, body:not(.has-hero) .dm-cta-band { position: relative; } body:not(.has-hero) .dm-doc > .dm-section:nth-of-type(odd)::before, body:not(.has-hero) main > .dm-section::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; margin-left: -50vw; width: 100vw; z-index: -1; border-top: 1px solid var(--dm-line-2); border-bottom: 1px solid var(--dm-line-2); background-color: var(--dm-well); background-image: repeating-linear-gradient( to bottom, rgba(255,255,255,0.014) 0, rgba(255,255,255,0.014) 64px, transparent 64px, transparent 128px); background-size: 100% 128px; } /* closing CTA band — a full-bleed lifted plate so it spans the width like the sections above it, reading as the page's deliberate call to action */ body:not(.has-hero) .dm-cta-band { background: transparent; border-top: 0; } body:not(.has-hero) .dm-cta-band::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; margin-left: -50vw; width: 100vw; z-index: -1; border-top: 1px solid var(--dm-line-2); border-bottom: 1px solid var(--dm-line-2); background-color: var(--dm-panel); } /* ============================================================ SPECIAL carousel slide — USA 250 (July 4th). Celebratory type over the flag: warm gold from the seal, glowing headline, a clear CTA to the memo. ============================================================ */ .dm-hero-meta.is-special .dm-hero-cat { color: #e8c877; } .dm-hero-meta.is-special .dm-hero-title { text-shadow: 0 0 26px rgba(232, 200, 119, 0.30), 0 2px 10px rgba(0, 0, 0, 0.6); } .dm-hero-meta.is-special .dm-hero-url { display: inline-flex; align-items: center; margin-top: 20px; padding: 9px 16px; border: 1px solid rgba(232, 200, 119, 0.55); color: #f0d99a; letter-spacing: 0.08em; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; } .dm-hero-meta.is-special .dm-hero-url:hover { background: #e8c877; color: #1a1206; border-color: #e8c877; } /* "America" in red/white/blue — a flag gradient clipped to the Doto dots */ .dm-usa-flag { background: linear-gradient(96deg, #d92d3f 0%, #d92d3f 33%, #eceef2 42%, #eceef2 58%, #3f6fd6 67%, #3f6fd6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }