/* markfensom.dev — the design system. Dark by default, light a first-class
alternative. This file replaces styles.css and app.css.
Fonts are NOT imported from this file — importing a stylesheet from inside a
stylesheet costs an extra round trip before any text paints in the right face.
Every page that links this file must carry, in its , above the link:
Layer 1 of 2: tokens and the base layer. Components come next and extend it.
Rule of the house: no raw colour outside :root. If a component needs a shade
that is not here, the shade is missing — add it here first. */
:root {
color-scheme: dark light;
/* ── ground: page, banded section, card, shelf ──────────────────── */
--ink-950: #05070C; --ink-900: #0A0E16; --ink-850: #0E1420; --ink-800: #141C29;
/* ── lines ──────────────────────────────────────────────────────── */
--line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16);
/* ── ink ────────────────────────────────────────────────────────── */
--text: #EAEEF6; --text-2: #A7B0C0; --text-3: #7C8799;
/* ── blue ───────────────────────────────────────────────────────── */
--blue-700: #153FA8; --blue-600: #1E56E0; --blue-500: #2F6BFF;
--blue-400: #6E9BFF; --blue-300: #9CB8FF; --blue-100: #E3ECFF;
--glow: rgba(47,107,255,.30);
/* Semantic blue. Components use these, never the ramp directly — the ramp
is fixed brand values and the ramp step that works on a near-black ground
is not the one that works on white. */
--accent: var(--blue-500); /* the mark, the focus ring */
--accent-fill: var(--blue-600); /* filled buttons, the blue field */
--accent-hi: var(--blue-500); /* filled button, hovered */
--accent-text: var(--blue-400); /* figures and eyebrows on the ground */
--link: var(--blue-400);
--on-accent: #FFFFFF; /* type on a blue fill, both themes */
/* ── tints and shadow ───────────────────────────────────────────── */
/* Overlays lighten on a dark ground and darken on a light one, so a hover
wash is a token here, never a literal rgba(255,255,255,…) in the rule. */
--tint-1: rgba(255,255,255,.04); --tint-2: rgba(255,255,255,.05);
--tint-3: rgba(255,255,255,.08);
--accent-wash: rgba(47,107,255,.10); /* tinted chip and icon grounds */
--accent-line: rgba(47,107,255,.50);
--accent-on-wash: var(--blue-300); /* type on that wash */
--scrim: rgba(5,7,12,.72); /* the badge over a screenshot */
--scrim-2: rgba(5,7,12,.92); /* the docked phone bar */
/* The blue field is blue in BOTH themes, so its inks never flip. */
--on-accent-2: rgba(255,255,255,.82);
--on-accent-line: rgba(255,255,255,.55);
--on-accent-rule: rgba(255,255,255,.07);
--shadow-1: 0 10px 30px -10px var(--glow);
--shadow-2: 0 30px 70px -20px rgba(0,0,0,.90);
--shadow-3: 0 40px 90px -30px rgba(0,0,0,.85);
/* ── type ───────────────────────────────────────────────────────── */
--display: "Archivo", system-ui, sans-serif;
--body: "Geist", "Archivo", system-ui, sans-serif;
/* Scale. Display sizes are fluid so the page holds from 320 to 1920 without
a breakpoint per heading. */
--t-display: clamp(40px, 5.6vw, 76px);
--t-h2: clamp(30px, 3.9vw, 52px);
--t-h3: clamp(20px, 1.6vw, 24px);
--t-figure: clamp(32px, 3.3vw, 44px);
--t-lede: clamp(16.5px, 1.3vw, 18px);
--t-body: 16px;
--t-sm: 15px;
--t-xs: 13.5px;
--t-label: 12px;
--lh-display: 1.02; --lh-body: 1.6; --lh-lede: 1.65;
--track-display: -.03em; --track-label: .16em;
/* ── radii ──────────────────────────────────────────────────────── */
--r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
/* ── spacing, 4px step ──────────────────────────────────────────── */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px;
--s-9: 36px; --s-10: 40px; --s-12: 48px; --s-14: 56px;
--s-16: 64px; --s-18: 72px; --s-20: 80px; --s-24: 96px;
--s-26: 104px; --s-28: 112px;
/* ── layout ─────────────────────────────────────────────────────── */
--maxw: 1248px;
--gutter: clamp(20px, 5vw, 96px);
--nav-h: 80px;
--tap: 44px; /* nothing interactive is smaller than this */
--control-h: 46px;
}
/* ── light theme ──────────────────────────────────────────────────────
The same tokens, re-pointed. Not an afterthought: the tint and shadow
tokens invert, and the blue drops two steps down the ramp because
--blue-400 on white measures about 2.3:1 and is unusable for text. */
@media (prefers-color-scheme: light) {
:root {
--ink-950: #F7F8FA; --ink-900: #F1F3F7; --ink-850: #FFFFFF; --ink-800: #EDF0F5;
--line: rgba(0,0,0,.10); --line-2: rgba(0,0,0,.18);
--text: #0B0F17; --text-2: #49525F; --text-3: #626C7A;
--glow: rgba(47,107,255,.18);
--accent-text: var(--blue-700); --link: var(--blue-600);
--tint-1: rgba(0,0,0,.03); --tint-2: rgba(0,0,0,.05); --tint-3: rgba(0,0,0,.08);
--accent-wash: rgba(47,107,255,.09); --accent-line: rgba(47,107,255,.45);
--accent-on-wash: var(--blue-700);
--scrim: rgba(255,255,255,.82); --scrim-2: rgba(247,248,250,.94);
--shadow-1: 0 10px 28px -12px var(--glow);
--shadow-2: 0 20px 50px -22px rgba(9,14,24,.28);
--shadow-3: 0 28px 64px -30px rgba(9,14,24,.24);
}
}
/* ── base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ink-950);
color: var(--text);
font-family: var(--body);
font-size: var(--t-body);
line-height: var(--lh-body);
text-wrap: pretty;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
margin: 0;
font-family: var(--display);
font-weight: 700;
line-height: var(--lh-display);
letter-spacing: var(--track-display);
text-wrap: balance;
}
h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img, video, svg { display: block; max-width: 100%; }
picture { display: contents; } /* must not break the img's own layout */
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Focus is never silently removed — :focus-visible only, no blanket reset. */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--r-sm);
}
::selection { background: var(--accent-fill); color: var(--on-accent); }
/* Figures line up in columns. */
.num, .tabular { font-variant-numeric: tabular-nums; }
/* The one container. */
.wrap {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Skip link — visible only when focused. */
.skip {
position: absolute; left: var(--s-4); top: var(--s-4); z-index: 100;
padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
background: var(--ink-850); color: var(--text);
border: 1px solid var(--line-2);
transform: translateY(-200%);
}
.skip:focus { transform: none; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* ══ components ═══════════════════════════════════════════════════════
Every interactive target is at least --tap tall. Icons are inline
stroke SVG at 1.6, never an icon font. No gradients, no emoji. */
/* ── buttons ──────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
min-height: var(--control-h); padding: 0 var(--s-6);
border: 1px solid transparent; border-radius: var(--r-pill);
font-family: var(--body); font-weight: 600; font-size: var(--t-sm);
letter-spacing: -.01em; text-decoration: none; cursor: pointer;
background: none; color: inherit;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent-fill); color: var(--on-accent); box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--accent-hi); }
.btn-quiet { border-color: var(--line-2); color: var(--text); }
.btn-quiet:hover { background: var(--tint-2); }
.btn-on-blue { background: var(--on-accent); color: var(--blue-700); }
.btn-line { border-color: var(--on-accent-line); color: var(--on-accent); }
.btn-line:hover { background: var(--on-accent-rule); }
.btn-sm { min-height: var(--tap); padding: 0 var(--s-5); font-size: 14px; }
.btn svg, .go svg { width: 16px; height: 16px; flex: none; }
/* ── eyebrow, pill, tag, chip ─────────────────────────────────────── */
.label {
display: block; font-size: var(--t-label); font-weight: 600;
letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-text);
}
.pill {
display: inline-flex; align-items: center; gap: var(--s-3);
height: var(--s-8); padding: 0 var(--s-4) 0 var(--s-3);
border: 1px solid var(--line-2); border-radius: var(--r-pill);
background: var(--tint-1); font-size: var(--t-xs); color: var(--text-2);
}
.pill .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent-text); box-shadow: 0 0 0 4px var(--accent-wash);
}
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: auto; padding-top: var(--s-5); }
.tag {
font-size: var(--t-label); letter-spacing: .02em; padding: var(--s-1) var(--s-3);
border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--text-3);
}
.tag.on { border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent-on-wash); }
.chip {
font-size: var(--t-xs); color: var(--text-2); background: var(--ink-850);
border: 1px solid var(--line); border-radius: var(--r-pill); padding: var(--s-2) var(--s-4);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* ── icon tile ────────────────────────────────────────────────────── */
.ico {
width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
border: 1px solid var(--line-2); background: var(--accent-wash);
}
.ico svg {
width: 17px; height: 17px; fill: none; stroke: var(--accent-text);
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
/* ── figures ──────────────────────────────────────────────────────── */
.stat { padding: var(--s-10) 0; position: relative; }
.stat b {
display: block; font-family: var(--display); font-weight: 700;
font-size: var(--t-figure); line-height: 1; letter-spacing: -.04em;
color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: var(--s-3); font-size: var(--t-xs); color: var(--text-3); max-width: 22ch; }
/* ── card ─────────────────────────────────────────────────────────── */
.card {
position: relative; display: flex; flex-direction: column; overflow: hidden;
background: var(--ink-850); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.card .fig { position: relative; overflow: hidden; background: var(--ink-800); }
.card .fig img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.card .body { flex: 1; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-7) var(--s-7) var(--s-8); }
.card h3 { letter-spacing: -.025em; }
.card .txt { font-size: 14.5px; line-height: var(--lh-body); color: var(--text-2); }
.go { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 14px; font-weight: 600; color: var(--link); }
.idx {
position: absolute; top: var(--s-5); left: var(--s-6); z-index: 2;
font-family: var(--display); font-weight: 600; font-size: var(--t-label); letter-spacing: .1em;
color: var(--text-2); background: var(--scrim); border: 1px solid var(--line-2);
padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); backdrop-filter: blur(8px);
}
/* ── device frames ────────────────────────────────────────────────── */
.browser {
border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--ink-850);
padding: var(--s-3) var(--s-3) 0; box-shadow: var(--shadow-3);
}
.browser .bar { display: flex; align-items: center; gap: 7px; padding: 2px var(--s-1) var(--s-3); }
.browser .bar b { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); display: block; }
.browser .bar span {
margin-left: var(--s-3); height: 22px; flex: 1; border-radius: 6px; background: var(--tint-2);
display: flex; align-items: center; padding: 0 var(--s-3); font-size: 11px; color: var(--text-3);
}
.browser img, .browser video { width: 100%; border-radius: var(--r-md) var(--r-md) 0 0; }
.device {
border: 1px solid var(--line-2); border-radius: 26px; background: var(--ink-800);
padding: 7px; box-shadow: var(--shadow-2);
}
.device img, .device video { width: 100%; border-radius: 20px; }
/* ── bands and sections ───────────────────────────────────────────── */
.sec { padding: var(--s-28) 0; }
.sec h2 { margin-top: var(--s-5); }
.sec .sub { margin-top: var(--s-5); font-size: 17px; color: var(--text-2); max-width: 56ch; }
.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink-900); }
/* ── the blue field ───────────────────────────────────────────────── */
.close { position: relative; overflow: hidden; background: var(--accent-fill); color: var(--on-accent); }
.close::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(90deg, var(--on-accent-rule) 0 1px, transparent 1px 104px);
}
.close .wrap { position: relative; padding-block: var(--s-26); }
.close h2 { color: var(--on-accent); }
.close p { margin-top: var(--s-5); font-size: 17px; color: var(--on-accent-2); max-width: 46ch; }
.close a:not(.btn) { color: var(--on-accent); }