Compose: size (--sm/--lg) · ink (--signal/--craft) · fade (mask) · strength
========================================================================== */
.pattern {
--p-size: 28px;
--p-ink: var(--pattern-ink);
--p-ink-2: var(--pattern-ink-2);
--p-opacity: 1;
position: relative;
isolation: isolate;
}
.pattern::before {
content: '';
position: absolute;
inset: 0;
z-index: var(--z-below);
opacity: var(--p-opacity);
pointer-events: none;
border-radius: inherit;
background-repeat: repeat;
}
/* ── Size modifiers ───────────────────────────────────────────────────────── */
.pattern-xs { --p-size: 12px; }
.pattern-sm { --p-size: 18px; }
.pattern-lg { --p-size: 44px; }
.pattern-xl { --p-size: 72px; }
/* ── Ink modifiers ────────────────────────────────────────────────────────── */
/* On a media canvas the surface is near-black in BOTH themes, so the pattern
ink can't follow the theme — it is always light. */
.pattern-media { --p-ink: rgb(255 255 255 / 0.08); --p-ink-2: rgb(255 255 255 / 0.14); }
.pattern-signal { --p-ink: rgb(240 78 46 / 0.16); --p-ink-2: rgb(240 78 46 / 0.28); }
.pattern-craft { --p-ink: rgb(217 163 58 / 0.28); --p-ink-2: rgb(217 163 58 / 0.45); }
.pattern-strong { --p-opacity: 1.6; }
.pattern-faint { --p-opacity: 0.5; }
/* ── Fades — a pattern should never end on a hard edge ────────────────────── */
.fade-corners::before {
mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 30%, transparent 100%);
}
.fade-b::before {
mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}
.fade-t::before {
mask-image: linear-gradient(to top, #000 0%, transparent 92%);
}
.fade-r::before {
mask-image: linear-gradient(to right, #000 20%, transparent 100%);
}
.fade-center::before {
mask-image: radial-gradient(ellipse at 50% 50%, transparent 8%, #000 72%);
}
/* ── 01 · grid — the default surface texture, graph paper ─────────────────── */
.pattern-grid::before {
background-image:
linear-gradient(to right, var(--p-ink) var(--border-hair), transparent var(--border-hair)),
linear-gradient(to bottom, var(--p-ink) var(--border-hair), transparent var(--border-hair));
background-size: var(--p-size) var(--p-size);
}
/* ── 02 · blueprint — fine grid with a heavier major line every 5th ───────── */
.pattern-blueprint::before {
background-image:
linear-gradient(to right, var(--p-ink) var(--border-hair), transparent var(--border-hair)),
linear-gradient(to bottom, var(--p-ink) var(--border-hair), transparent var(--border-hair)),
linear-gradient(to right, var(--p-ink-2) var(--border-hair), transparent var(--border-hair)),
linear-gradient(to bottom, var(--p-ink-2) var(--border-hair), transparent var(--border-hair));
background-size:
var(--p-size) var(--p-size),
var(--p-size) var(--p-size),
calc(var(--p-size) * 5) calc(var(--p-size) * 5),
calc(var(--p-size) * 5) calc(var(--p-size) * 5);
}
/* ── 03 · dots ────────────────────────────────────────────────────────────── */
.pattern-dots::before {
background-image: radial-gradient(var(--p-ink-2) 1.2px, transparent 1.3px);
background-size: var(--p-size) var(--p-size);
}
/* ── 04 · halftone — dots that grow toward the bottom-right ───────────────── */
.pattern-halftone::before {
background-image: radial-gradient(var(--p-ink-2) 22%, transparent 23%);
background-size: var(--p-size) var(--p-size);
mask-image: linear-gradient(135deg, transparent 20%, #000 100%);
}
/* ── 05 · golden — construction circles on the φ split ────────────────────── */
.pattern-golden::before {
background-image:
radial-gradient(circle at 38.2% 50%, transparent calc(var(--p-size) * 1.6),
var(--p-ink-2) calc(var(--p-size) * 1.6 + 1px),
transparent calc(var(--p-size) * 1.6 + 2px)),
radial-gradient(circle at 61.8% 50%, transparent calc(var(--p-size) * 1.6),
var(--p-ink-2) calc(var(--p-size) * 1.6 + 1px),
transparent calc(var(--p-size) * 1.6 + 2px)),
linear-gradient(to right, transparent 38.1%, var(--p-ink) 38.1%, var(--p-ink) 38.3%, transparent 38.3%),
linear-gradient(to bottom, transparent 49.9%, var(--p-ink) 49.9%, var(--p-ink) 50.1%, transparent 50.1%);
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* ── 06 · scanline — CRT horizontals, for media surfaces ──────────────────── */
.pattern-scanline::before {
background-image: repeating-linear-gradient(
to bottom,
var(--p-ink) 0 1px,
transparent 1px calc(var(--p-size) / 5)
);
}
/* ── 07 · timecode — a film edge, ticks with a taller mark every 5th ──────── */
.pattern-timecode::before {
background-image:
repeating-linear-gradient(to right, var(--p-ink-2) 0 1px, transparent 1px var(--p-size)),
repeating-linear-gradient(to right, var(--p-ink-2) 0 1px, transparent 1px calc(var(--p-size) * 5));
background-size: 100% 12px, 100% 22px;
background-position: 0 100%, 0 100%;
background-repeat: repeat-x;
}
/* ── 08 · filmstrip — sprocket holes down both edges ──────────────────────── */
.pattern-filmstrip::before {
background-image:
repeating-linear-gradient(
to bottom,
var(--p-ink-2) 0 calc(var(--p-size) * 0.4),
transparent calc(var(--p-size) * 0.4) var(--p-size)
),
repeating-linear-gradient(
to bottom,
var(--p-ink-2) 0 calc(var(--p-size) * 0.4),
transparent calc(var(--p-size) * 0.4) var(--p-size)
);
background-size: calc(var(--p-size) * 0.5) 100%, calc(var(--p-size) * 0.5) 100%;
background-position: 0 0, 100% 0;
background-repeat: repeat-y;
}
/* ── 09 · hatch — 45° single-direction rule ───────────────────────────────── */
.pattern-hatch::before {
background-image: repeating-linear-gradient(
45deg,
var(--p-ink) 0 1px,
transparent 1px calc(var(--p-size) / 3)
);
}
/* ── 10 · crosshatch ──────────────────────────────────────────────────────── */
.pattern-crosshatch::before {
background-image:
repeating-linear-gradient(45deg, var(--p-ink) 0 1px, transparent 1px calc(var(--p-size) / 3)),
repeating-linear-gradient(-45deg, var(--p-ink) 0 1px, transparent 1px calc(var(--p-size) / 3));
}
/* ── 11 · waveform — audio bars, heights driven by a repeating gradient ───── */
.pattern-waveform::before {
background-image: repeating-linear-gradient(
to right,
var(--p-ink-2) 0 2px,
transparent 2px calc(var(--p-size) / 4)
);
mask-image: repeating-linear-gradient(
to right,
#000 0 2px,
transparent 2px calc(var(--p-size) / 4)
), linear-gradient(to top, #000 12%, rgb(0 0 0 / 0.35) 60%, rgb(0 0 0 / 0.6) 100%);
mask-composite: intersect;
-webkit-mask-composite: source-in;
}
/* ── 12 · rays — a soft diagonal light shaft ──────────────────────────────── */
.pattern-rays::before {
background-image: linear-gradient(
108deg,
transparent 30%,
var(--p-ink) 44%,
transparent 48%,
transparent 58%,
var(--p-ink) 68%,
transparent 74%
);
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* ── 13 · arcs — concentric rings, a lens diagram ─────────────────────────── */
.pattern-arcs::before {
background-image: repeating-radial-gradient(
circle at 50% 50%,
var(--p-ink-2) 0 1px,
transparent 1px calc(var(--p-size) * 0.9)
);
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* ── 14 · glow — a single warm bloom, for hero corners ────────────────────── */
.pattern-glow::before {
background-image: radial-gradient(
ellipse 60% 52% at 50% 6%,
var(--glow-color, rgb(240 78 46 / 0.16)) 0%,
transparent 70%
);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.pattern-glow.pattern-craft { --glow-color: rgb(217 163 58 / 0.18); }
/* ── 15 · mesh — multi-point soft gradient, the only "colourful" texture ──── */
.pattern-mesh::before {
background-image:
radial-gradient(ellipse 42% 46% at 12% 8%, rgb(240 78 46 / 0.20) 0%, transparent 70%),
radial-gradient(ellipse 40% 44% at 88% 14%, rgb(217 163 58 / 0.16) 0%, transparent 72%),
radial-gradient(ellipse 55% 50% at 62% 92%, rgb(43 123 239 / 0.12) 0%, transparent 74%);
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* ── 16 · noise — film grain, an inline SVG turbulence ────────────────────── */
.pattern-noise::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
background-size: 140px 140px;
/* No blend mode: overlay vanishes on a near-black surface, which is exactly
where grain is most wanted. Plain alpha reads on both. */
opacity: 0.22;
}
/* =============================================================================
PATTERNS · PART 2
Size is not just scale. A 12px grid wants a hairline; a 72px grid wants a
heavier, more confident line or it looks like dust. So --p-line rides along
with --p-size, and the size modifiers set both.
========================================================================== */
.pattern { --p-line: 1px; }
.pattern-xs { --p-size: 12px; --p-line: 1px; --p-opacity: 0.8; }
.pattern-sm { --p-size: 18px; --p-line: 1px; }
.pattern-lg { --p-size: 44px; --p-line: 1.5px; }
.pattern-xl { --p-size: 72px; --p-line: 2px; --p-opacity: 1.15; }
/* Line-style modifiers — they change the CHARACTER of the rule, not its size. */
.pattern-hairline { --p-line: 0.5px; --p-opacity: 0.85; }
.pattern-heavy { --p-line: 2px; }
.pattern-dashed::before { mask-image: repeating-linear-gradient(to right, #000 0 6px, transparent 6px 12px); }
/* The grid family, redrawn against --p-line so every size stays crisp. */
.pattern-grid::before {
background-image:
linear-gradient(to right, var(--p-ink) var(--p-line), transparent var(--p-line)),
linear-gradient(to bottom, var(--p-ink) var(--p-line), transparent var(--p-line));
background-size: var(--p-size) var(--p-size);
}
/* Vertical-only and horizontal-only rules — for tables, timelines, tickers. */
.pattern-cols::before {
background-image: linear-gradient(to right, var(--p-ink) var(--p-line), transparent var(--p-line));
background-size: var(--p-size) 100%;
}
.pattern-rows::before {
background-image: linear-gradient(to bottom, var(--p-ink) var(--p-line), transparent var(--p-line));
background-size: 100% var(--p-size);
}
/* Scanline, three densities. fine = 3px pitch (a real CRT), coarse = 12px
(a stylised one). The default sits between. */
.pattern-scanline-fine::before {
background-image: repeating-linear-gradient(to bottom, var(--p-ink) 0 1px, transparent 1px 3px);
}
.pattern-scanline-coarse::before {
background-image: repeating-linear-gradient(to bottom, var(--p-ink-2) 0 2px, transparent 2px 12px);
}
/* 17 · isometric — a 30° grid. Projects, architecture-ish pages. */
.pattern-iso::before {
background-image:
repeating-linear-gradient(30deg, var(--p-ink) 0 var(--p-line), transparent var(--p-line) var(--p-size)),
repeating-linear-gradient(-30deg, var(--p-ink) 0 var(--p-line), transparent var(--p-line) var(--p-size)),
repeating-linear-gradient(to bottom, var(--p-ink) 0 var(--p-line), transparent var(--p-line) var(--p-size));
}
/* 18 · plus — surveyor's crosses at each intersection. Quieter than a grid,
and the best texture under long-form text. */
.pattern-plus::before {
background-image:
linear-gradient(to right, transparent calc(50% - 3px), var(--p-ink-2) calc(50% - 3px), var(--p-ink-2) calc(50% + 3px), transparent calc(50% + 3px)),
linear-gradient(to bottom, transparent calc(50% - 3px), var(--p-ink-2) calc(50% - 3px), var(--p-ink-2) calc(50% + 3px), transparent calc(50% + 3px));
background-size: var(--p-size) var(--p-size);
mask-image:
linear-gradient(to right, #000 var(--p-line), transparent var(--p-line)),
linear-gradient(to bottom, #000 var(--p-line), transparent var(--p-line));
mask-size: var(--p-size) var(--p-size);
mask-composite: add;
-webkit-mask-composite: source-over;
}
/* 19 · stripes — 45° bands. The "work in progress" texture; use it for
drafts, skeletons and empty states. */
.pattern-stripes::before {
background-image: repeating-linear-gradient(
45deg,
var(--p-ink) 0 calc(var(--p-size) / 4),
transparent calc(var(--p-size) / 4) calc(var(--p-size) / 2)
);
}
/* 20 · checker — for transparency, image placeholders, "no artwork yet". */
.pattern-checker::before {
background-image:
linear-gradient(45deg, var(--p-ink) 25%, transparent 25% 75%, var(--p-ink) 75%),
linear-gradient(45deg, var(--p-ink) 25%, transparent 25% 75%, var(--p-ink) 75%);
background-size: var(--p-size) var(--p-size);
background-position: 0 0, calc(var(--p-size) / 2) calc(var(--p-size) / 2);
}
/* 21 · topo — contour lines. Travel pages, trip headers, maps. */
.pattern-topo::before {
background-image:
repeating-radial-gradient(ellipse 60% 45% at 22% 30%, var(--p-ink) 0 var(--p-line), transparent var(--p-line) calc(var(--p-size) * 0.8)),
repeating-radial-gradient(ellipse 55% 50% at 78% 72%, var(--p-ink) 0 var(--p-line), transparent var(--p-line) calc(var(--p-size) * 0.9));
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* 22 · circuit — right-angled traces with pads. Build logs, code pages. */
.pattern-circuit::before {
background-image:
linear-gradient(to right, var(--p-ink) var(--p-line), transparent var(--p-line)),
linear-gradient(to bottom, var(--p-ink) var(--p-line), transparent var(--p-line)),
radial-gradient(var(--p-ink-2) 2px, transparent 2.5px);
background-size:
calc(var(--p-size) * 2) calc(var(--p-size) * 2),
calc(var(--p-size) * 2) calc(var(--p-size) * 2),
calc(var(--p-size) * 2) calc(var(--p-size) * 2);
mask-image: linear-gradient(115deg, #000 20%, transparent 78%);
}
/* 23 · equaliser — bars of varying height along the bottom. Audio, podcast,
the newsletter block. */
.pattern-eq::before {
background-image:
repeating-linear-gradient(to right, var(--p-ink-2) 0 calc(var(--p-size) / 5), transparent calc(var(--p-size) / 5) calc(var(--p-size) / 2.2));
background-size: 100% 46%;
background-position: 0 100%;
background-repeat: repeat-x;
mask-image: linear-gradient(to top, #000 30%, transparent 100%);
}
/* 24 · sprocket — film perforations along the top and bottom edges. */
.pattern-sprocket::before {
background-image:
repeating-linear-gradient(to right, var(--p-ink-2) 0 calc(var(--p-size) / 3), transparent calc(var(--p-size) / 3) calc(var(--p-size) / 1.4)),
repeating-linear-gradient(to right, var(--p-ink-2) 0 calc(var(--p-size) / 3), transparent calc(var(--p-size) / 3) calc(var(--p-size) / 1.4));
background-size: 100% calc(var(--p-size) / 2.6), 100% calc(var(--p-size) / 2.6);
background-position: 0 0, 0 100%;
background-repeat: repeat-x;
}
/* 25 · matrix — a dot grid with a heavier dot every fifth. Reads as a screen
rather than as paper. */
.pattern-matrix::before {
background-image:
radial-gradient(var(--p-ink) 1px, transparent 1.2px),
radial-gradient(var(--p-ink-2) 1.6px, transparent 1.8px);
background-size: var(--p-size) var(--p-size), calc(var(--p-size) * 5) calc(var(--p-size) * 5);
}
/* 26 · spotlight — a single soft pool of light, following --p-x/--p-y. Set
those from JS for a cursor-tracking hero, or leave them for a static wash. */
.pattern-spotlight::before {
background-image: radial-gradient(
circle 42% at var(--p-x, 50%) var(--p-y, 22%),
color-mix(in srgb, var(--accent) 14%, transparent),
transparent 70%
);
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* 27 · ruler — measurement ticks with a heavier mark every fifth. Timelines,
changelogs, the resume. */
.pattern-ruler::before {
background-image:
repeating-linear-gradient(to right, var(--p-ink) 0 var(--p-line), transparent var(--p-line) var(--p-size)),
repeating-linear-gradient(to right, var(--p-ink-2) 0 var(--p-line), transparent var(--p-line) calc(var(--p-size) * 5));
background-size: 100% 8px, 100% 16px;
background-position: 0 0, 0 0;
background-repeat: repeat-x;
}
/* 28 · corners — tick marks at the four corners only. The lightest possible
"this is a frame" signal, for cards that shouldn't shout. */
.pattern-corners::before {
background-image:
linear-gradient(to right, var(--p-ink-2) 0 var(--p-size), transparent var(--p-size)),
linear-gradient(to bottom, var(--p-ink-2) 0 var(--p-size), transparent var(--p-size)),
linear-gradient(to left, var(--p-ink-2) 0 var(--p-size), transparent var(--p-size)),
linear-gradient(to top, var(--p-ink-2) 0 var(--p-size), transparent var(--p-size));
background-size: 100% var(--p-line), var(--p-line) 100%, 100% var(--p-line), var(--p-line) 100%;
background-position: 0 0, 0 0, 100% 100%, 100% 100%;
background-repeat: no-repeat;
}
/* ── Platform accents ────────────────────────────────────────────────────
The signature devices, re-cut for the places the channel actually lives.
Each is a small overlay, not a full texture. */
/* Instagram: the gradient ring, as a border only. */
.ring-ig {
position: relative;
border-radius: var(--radius-full);
padding: 3px;
background: conic-gradient(from 200deg, #f9a03f, #f04e2e, #d92d4e, #a12ea6, #f9a03f);
}
.ring-ig > * { border-radius: inherit; display: block; background: var(--bg-canvas); padding: 2px; }
/* A live ring — the same idea in the house accent, for "streaming now". */
.ring-live {
padding: 3px;
border-radius: var(--radius-full);
background: conic-gradient(from 0deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent), var(--accent));
animation: fx-spin 3.2s var(--ease-linear) infinite;
}
.ring-live > * { animation: fx-spin 3.2s var(--ease-linear) infinite reverse; }
/* ── The signal dot ────────────────────────────────────────────────────────
Signature device #1. Pattern file because it is pure ornament-with-meaning,
and because every component that shows "live" reuses exactly this. */
.dot {
display: inline-block;
width: var(--dot-md);
height: var(--dot-md);
border-radius: var(--radius-full);
background: var(--accent);
flex: none;
}
.dot-sm { width: var(--dot-sm); height: var(--dot-sm); }
.dot-lg { width: var(--dot-lg); height: var(--dot-lg); }
.dot-live { animation: fx-pulse 1.6s var(--ease-inout) infinite; }
.dot-muted { background: var(--fg-faint); } /* 28 CSS-only background patterns */
/* =============================================================================
08 · ACCESSIBILITY & UTILITY
Focus, skip links, screen-reader text, forced-colours, print. The parts of
the system that are non-negotiable regardless of what a component looks like.
========================================================================== */
/* ── Focus ─────────────────────────────────────────────────────────────────
Visible on every interactive element, in both themes, on any background.
Two-tone: an inner halo in the opposite value, an outer ring in the accent.
Mouse users don't see it; keyboard users always do. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: var(--border-2) solid var(--focus-ring);
outline-offset: var(--border-2);
border-radius: var(--radius-sm);
}
/* For elements sitting on media or an inverse surface, the halo carries it. */
.focus-halo:focus-visible {
outline: none;
box-shadow: var(--ring-focus);
}
/* Never remove the outline without replacing it. */
:focus:not(:focus-visible) {
outline: none;
}
/* ── Skip link ─────────────────────────────────────────────────────────────
Off-screen until focused, then a real, styled control at the top-left. */
.skip-link {
position: absolute;
top: var(--space-2);
left: var(--space-2);
z-index: var(--z-max);
transform: translateY(-200%);
background: var(--bg-inverse);
color: var(--fg-on-inverse);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-control);
font-family: var(--font-slate);
font-size: var(--text-xs);
letter-spacing: var(--tracking-slate);
text-transform: uppercase;
text-decoration: none;
transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible {
transform: translateY(0);
}
/* ── Screen-reader only ────────────────────────────────────────────────── */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.sr-only-focusable:not(:focus, :focus-within) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ── Touch targets ─────────────────────────────────────────────────────────
Anything smaller than 44px gets an invisible expanded hit area rather than
being made visually bigger. */
.tap-target {
position: relative;
}
.tap-target::after {
content: '';
position: absolute;
inset: 50%;
width: var(--tap-min);
height: var(--tap-min);
transform: translate(-50%, -50%);
}
/* ── Forced colours (Windows high contrast) ────────────────────────────────
Patterns and decorative layers disappear; structure survives because it is
built from real borders. */
@media (forced-colors: active) {
.pattern::before,
.canvas__scrim::after {
display: none;
}
.surface,
.surface-raised,
.surface-sunken {
border: 1px solid CanvasText;
}
:where(a, button, input, select, textarea, summary):focus-visible {
outline: 2px solid Highlight;
}
}
/* ── Utility ───────────────────────────────────────────────────────────────
Deliberately tiny. This is a foundation, not a utility framework — Tailwind
covers the rest. Only things the system itself depends on live here. */
.hidden { display: none !important; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
/* Horizontal scrollers (carousels) — snap, momentum, no visible bar. */
.scroller {
display: flex;
gap: var(--space-4);
overflow-x: auto;
overscroll-behavior-x: contain; /* never steal the page's vertical scroll */
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-block: var(--space-1);
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; flex: none; }
/* ── Print ─────────────────────────────────────────────────────────────────
The resume and any article should print cleanly: no chrome, no textures,
ink on paper, URLs spelled out. */
@media print {
:root {
--bg-canvas: #fff;
--bg-surface: #fff;
--fg-default: #000;
--fg-muted: #333;
--line-default: #999;
}
body {
background: #fff;
color: #000;
}
.pattern::before,
nav,
.no-print {
display: none !important;
}
a[href^='http']::after {
content: ' (' attr(href) ')';
font-family: var(--font-slate);
font-size: 0.8em;
color: #555;
}
.surface,
.surface-raised {
box-shadow: none;
border: 1px solid #999;
break-inside: avoid;
}
h1, h2, h3 { break-after: avoid; }
img, figure, table { break-inside: avoid; }
} /* focus, sr-only, forced-colours, print */
/* =============================================================================
09 · LOGO & BRAND MARKS
One idea: the record light, sitting where the tittle of the "i" belongs.
THE TITTLE. The dot over a lowercase i or j is called a tittle. The whole
identity is: that tittle is the REC light. Which means the mark is not
"wordmark plus a dot" — the dot is already part of the word, and it just
happens to be red and alive.
HOW IT'S BUILT. You can't recolour a font's own tittle, so the "i" is set
with the dotless Turkish ı (U+0131) and the tittle is drawn as an element
above it. Every size, weight and colour of the mark derives from that one
arrangement, so the dot never drifts.
Swarnıl
========================================================================== */
.logo {
--logo-size: 1.5rem;
--logo-dot: 0.15em; /* tittle diameter, relative to the type size */
--logo-lift: 0.72em; /* baseline → underside of the tittle. Space
Grotesk's x-height is 0.52em, so this leaves
a real tittle gap rather than floating. */
--logo-nudge: 0em; /* the tittle is dead centre over the stem, always */
--logo-color: var(--fg-default);
--logo-dot-color: var(--accent);
display: inline-flex;
align-items: baseline;
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: var(--logo-size);
line-height: 1;
letter-spacing: -0.045em;
color: var(--logo-color);
white-space: nowrap;
user-select: none;
}
/* The dotless i and its replacement tittle. */
.logo__i {
position: relative;
display: inline-block;
font-style: normal;
}
.logo__tittle {
position: absolute;
left: calc(50% + var(--logo-nudge));
bottom: var(--logo-lift);
width: var(--logo-dot);
height: var(--logo-dot);
transform: translateX(-50%);
border-radius: var(--radius-full);
background: var(--logo-dot-color);
font-style: normal;
}
/* Live state — the tittle breathes. Used only while something is actually
recording or streaming, never as decoration. */
.logo-live .logo__tittle { animation: fx-pulse 1.6s var(--ease-inout) infinite; }
/* ── Sizes ───────────────────────────────────────────────────────────────
A closed ladder, like every other ladder in this system. */
.logo-xs { --logo-size: 1rem; }
.logo-sm { --logo-size: 1.25rem; }
.logo-md { --logo-size: 1.5rem; }
.logo-lg { --logo-size: 2.25rem; }
.logo-xl { --logo-size: 3.5rem; }
.logo-2xl { --logo-size: clamp(3rem, 1.6rem + 6vw, 6rem); }
/* ── Colour variants ─────────────────────────────────────────────────────── */
.logo-inverse { --logo-color: var(--fg-on-inverse); }
.logo-mono { --logo-dot-color: currentColor; } /* single-colour print, embroidery */
.logo-ghost { --logo-color: var(--fg-muted); --logo-dot-color: var(--fg-faint); }
/* ── Lockups ─────────────────────────────────────────────────────────────
The wordmark rarely appears alone. These are the only three arrangements. */
/* 1 · stacked — wordmark over the tagline. Hero, end cards, print. */
.logo-stack {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
text-align: center;
}
.logo-stack .logo__tag {
font-family: var(--font-slate);
font-size: var(--text-2xs);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--fg-subtle);
}
/* 2 · inline — wordmark, hairline, tagline. Nav, footer, email header. */
.logo-inline {
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.logo-inline .logo__rule {
width: var(--space-6);
height: var(--border-hair);
background: var(--line-default);
flex: none;
}
/* 3 · badge — the mark in a container, for avatars and app icons. */
.logo-badge {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: var(--radius-lg);
background: var(--bg-inverse);
color: var(--fg-on-inverse);
}
.logo-badge-round { border-radius: var(--radius-full); }
/* ── Short forms ─────────────────────────────────────────────────────────
As the space shrinks the mark degrades in a fixed order:
Swarnıl → Sıl → S• → •
There is no "Sı": a lone dotless ı is just a stick, and it reads as an l.
The compact mark is a capital S with the tittle moved to its top right —
the same dot, relocated, which is why it still reads as the same logo. */
.logo-short { letter-spacing: -0.05em; }
/* S + dot — the compact mark, and the favicon.
THE DOT SITS AT 1 O'CLOCK. Not 12 — that reads as a tittle on the wrong
letter. Not 2 — it drifts off the shoulder and looks detached. One o'clock
is 30 degrees clockwise from vertical, orbiting at 0.62em from the optical
centre: far enough to be its own mark, close enough to belong to the S.
Both numbers are tokens, so the relationship is tunable in one place and
identical at every size.
------------------------------------------------------------------------ */
.logo-s {
--s-clock: 30deg; /* 1 o'clock = 360 / 12 */
--s-orbit: 0.5em; /* not far, not close: the dot clears the S's cap
by about a third of its own width */
position: relative;
display: inline-block;
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: var(--logo-size, 1.5rem);
line-height: 1;
letter-spacing: -0.05em;
color: var(--logo-color, var(--fg-default));
padding: 0.1em 0.44em 0.1em 0.04em;
}
.logo-s::after {
content: '';
position: absolute;
top: 50%;
left: 47%;
width: var(--logo-dot, 0.2em);
height: var(--logo-dot, 0.2em);
border-radius: var(--radius-full);
background: var(--logo-dot-color, var(--accent));
/* Polar placement: x = sin(t) * r, y = -cos(t) * r, then centre the dot on
that point. Static fallback first, for anything without trig support. */
translate: 0.15em -0.53em;
translate: calc(sin(var(--s-clock)) * var(--s-orbit) - var(--logo-dot, 0.2em) / 2)
calc(cos(var(--s-clock)) * var(--s-orbit) * -1 - var(--logo-dot, 0.2em) / 2);
}
.logo-s-live::after { animation: fx-pulse 1.6s var(--ease-inout) infinite; }
/* ── The recorder mark ───────────────────────────────────────────────────
No brackets, no box: a square canvas with the dot in the top-right corner,
exactly where a camera puts its REC light. This is the app icon, the
watermark and the merch mark. */
/* The dot alone — favicon, app icon, watermark, loading indicator. It is
legible at 16px, which nothing else in the system is. */
.logo-dot {
display: inline-block;
width: 1em;
height: 1em;
border-radius: var(--radius-full);
background: var(--accent);
position: relative;
}
/* Haloed dot, for when the mark sits on a busy photo. */
.logo-dot-halo {
box-shadow: 0 0 0 0.28em color-mix(in srgb, var(--accent) 22%, transparent),
0 0 0 0.56em color-mix(in srgb, var(--accent) 10%, transparent);
}
/* ── Favicon / app-icon sizes ────────────────────────────────────────────
What ships as a file, and what the mark degrades to at that size:
16 · 32 browser tab, bookmark → dot alone, no frame
48 · 64 Windows tile, pinned site → dot alone
180 apple-touch-icon → dot in a rounded square
192 · 512 PWA manifest → dot in a rounded square
1024 store listing → dot + Sı, generous padding
Preview them with .favicon, which pins the real pixel size. */
.favicon {
display: inline-grid;
place-items: center;
background: var(--bg-inverse);
color: var(--fg-on-inverse);
border-radius: 22.5%; /* the iOS "squircle" ratio, close enough */
overflow: hidden;
flex: none;
}
.favicon-16 { width: 16px; height: 16px; border-radius: 3px; }
.favicon-32 { width: 32px; height: 32px; border-radius: 6px; }
.favicon-48 { width: 48px; height: 48px; border-radius: 9px; }
.favicon-64 { width: 64px; height: 64px; border-radius: 12px; }
.favicon-180 { width: 180px; height: 180px; }
.favicon-512 { width: 180px; height: 180px; } /* previewed at 180 */
/* Inside a favicon the mark is a fixed fraction of the tile, so every size is
the same drawing. At 16px the S reads as a shape rather than a letter, and
the dot at 1 o'clock is what makes it identifiable. */
.favicon > .logo-s {
/* No padding inside a favicon: the box collapses to the glyph, the grid
centres THAT, and the dot orbits out of it. Centring the lockup instead
would push the S off-centre, and the S is what people recognise. */
padding: 0;
font-size: 72%;
--logo-dot: 0.24em;
--s-orbit: 0.5em;
--logo-color: currentColor; /* inherits the tile's fg, so it inverts free */
}
/* Small tiles need a proportionally bigger, blunter mark or it turns to mush. */
.favicon-16 > .logo-s { font-size: 84%; --logo-dot: 0.32em; --s-orbit: 0.46em; }
.favicon-32 > .logo-s { font-size: 78%; --logo-dot: 0.28em; --s-orbit: 0.48em; }
.favicon-48 > .logo-s { font-size: 76%; }
.favicon > .logo-dot { width: 38%; height: 38%; }
/* ── Responsive behaviour ────────────────────────────────────────────────
In the nav the mark drops to its short form on small screens. This is the
only place the system changes the logo automatically. */
/* Markup carries all three forms; CSS chooses. No JS, no layout shift, and the
accessible name stays the same because only the visual form changes.
…Swarnıl…
…Sıl…
…S•…
*/
.logo-responsive { display: inline-flex; align-items: center; }
.logo-responsive .logo__full { display: inline-flex; }
.logo-responsive .logo__abbr,
.logo-responsive .logo__mark { display: none; }
@media (max-width: 48rem) {
.logo-responsive .logo__full { display: none; }
.logo-responsive .logo__abbr { display: inline-flex; }
}
@media (max-width: 26rem) {
.logo-responsive .logo__abbr { display: none; }
.logo-responsive .logo__mark { display: inline-flex; }
}
/* Fluid size, for hero and end-card lockups that shouldn't step. */
.logo-fluid { --logo-size: clamp(1.5rem, 0.9rem + 2.6vw, 4rem); }
/* ── Clear space ─────────────────────────────────────────────────────────
Minimum breathing room around the mark = the tittle's diameter, on all four
sides. .logo-clear draws it for the spec sheet. */
.logo-clear {
position: relative;
padding: calc(var(--logo-size, 1.5rem) * 0.22 * 2);
}
.logo-clear::before {
content: '';
position: absolute;
inset: 0;
border: var(--border-hair) dashed var(--line-default);
border-radius: var(--radius-sm);
pointer-events: none;
}
/* ── Misuse (documented so it can be pointed at) ─────────────────────────
These classes exist to be shown crossed out on the brand page. Never ship
them. */
.logo-dont-stretch { transform: scaleX(1.35); }
.logo-dont-rotate { transform: rotate(-8deg); }
.logo-dont-recolor { --logo-dot-color: var(--info-line); }
.logo-dont-outline { -webkit-text-stroke: 1px currentColor; color: transparent; }
/* The bar keeps the full wordmark at every width — an abbreviated mark in a
bar that has room for the word is a puzzle for no reason. The short forms
stay available for places that genuinely have no room (a favicon, an
avatar, a watermark). */
.nav-bar .logo-responsive .logo__full { display: inline-flex; }
.nav-bar .logo-responsive .logo__abbr,
.nav-bar .logo-responsive .logo__mark { display: none; } /* the tittle mark, lockups, favicons */
/* =============================================================================
10 · ICONS
The icon system: one grid, one stroke, four variants. Icons are inline SVG
from a sprite — no icon font, no external requests, and they inherit colour
from the text they sit in.
THE GRID
24 × 24 viewBox, 2px padding → 20px live area
1.5px stroke, round caps, round joins
corner radius 2px, never sharper
optical centring beats geometric centring — nudge, don't calculate
A 16px icon is the 24px icon scaled, NOT redrawn. If a glyph dies at 16px
it is too detailed; simplify the drawing rather than adding a second size.
========================================================================== */
:root {
--icon-stroke: 1.5;
--icon-stroke-thin: 1.25;
--icon-stroke-bold: 2;
}
.icon {
display: inline-block;
width: var(--icon-md);
height: var(--icon-md);
flex: none;
vertical-align: -0.125em; /* sits on the text baseline, not below it */
fill: none;
stroke: currentColor;
stroke-width: var(--icon-stroke);
stroke-linecap: round;
stroke-linejoin: round;
color: inherit;
}
/* ── Sizes — the same ladder as everything else ─────────────────────────── */
.icon-xs { width: var(--icon-xs); height: var(--icon-xs); stroke-width: var(--icon-stroke-bold); }
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon-md { width: var(--icon-md); height: var(--icon-md); }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon-xl { width: var(--icon-xl); height: var(--icon-xl); stroke-width: var(--icon-stroke-thin); }
/* Small icons need a heavier stroke to hold; large icons need a lighter one.
That's optics, not maths — hence the overrides above. */
/* ── Variants ────────────────────────────────────────────────────────────
line the default — outline only
solid filled, for active/selected states
duotone outline plus a 12% fill of the same colour, for feature blocks
ghost the outline at 45%, for disabled and decorative use */
.icon-line { fill: none; stroke: currentColor; }
.icon-solid { fill: currentColor; stroke: none; }
.icon-duo { fill: color-mix(in srgb, currentColor 14%, transparent); stroke: currentColor; }
.icon-ghost { opacity: 0.45; }
/* Accent an icon without touching its markup. */
.icon-accent { color: var(--accent); }
.icon-muted { color: var(--fg-muted); }
/* ── Containers ──────────────────────────────────────────────────────────
An icon that needs to be tappable, or that carries a status. */
.icon-box {
display: inline-grid;
place-items: center;
width: var(--control-md);
height: var(--control-md);
border-radius: var(--radius-control);
background: var(--bg-sunken);
border: var(--border-hair) solid var(--line-default);
color: var(--fg-muted);
transition: var(--t-colors);
}
.icon-box:hover { color: var(--fg-default); border-color: var(--line-strong); }
.icon-box-round { border-radius: var(--radius-full); }
.icon-box-sm { width: var(--control-sm); height: var(--control-sm); }
.icon-box-lg { width: var(--control-lg); height: var(--control-lg); }
.icon-box-accent {
background: var(--accent-soft);
border-color: transparent;
color: var(--accent-soft-fg);
}
.icon-box-inverse {
background: var(--bg-inverse);
border-color: transparent;
color: var(--fg-on-inverse);
}
/* Feature icon — the big one at the top of a card or section. */
.icon-feature {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: var(--radius-lg);
background: var(--accent-soft);
color: var(--accent-soft-fg);
}
/* ── Badged icon — a count or a status dot on the corner ─────────────────── */
.icon-badged { position: relative; display: inline-flex; }
.icon-badged__dot {
position: absolute;
top: -2px;
right: -2px;
width: var(--dot-md);
height: var(--dot-md);
border-radius: var(--radius-full);
background: var(--accent);
box-shadow: 0 0 0 var(--border-2) var(--bg-canvas);
}
.icon-badged__n {
position: absolute;
top: -6px;
right: -8px;
min-width: 1rem;
height: 1rem;
padding-inline: 3px;
display: grid;
place-items: center;
border-radius: var(--radius-pill);
background: var(--accent);
color: var(--fg-on-accent);
font-family: var(--font-slate);
font-size: 10px;
line-height: 1;
box-shadow: 0 0 0 var(--border-2) var(--bg-canvas);
}
/* ── Motion ──────────────────────────────────────────────────────────────
Icons animate on the parent's state, never on their own. Three behaviours,
and that's the whole vocabulary. */
.icon-spin { animation: fx-spin 700ms var(--ease-linear) infinite; }
@media (hover: hover) and (pointer: fine) {
.icon-nudge { transition: var(--t-transform); }
*:hover > .icon-nudge { transform: translate3d(2px, 0, 0); }
.icon-lift { transition: var(--t-transform); }
*:hover > .icon-lift { transform: translate3d(0, -2px, 0); }
}
/* ── Sprite ──────────────────────────────────────────────────────────────
Icons live in one inline