/* ============================================================
DANIEL GLAZE PORTFOLIO — Global Styles
============================================================
Edit the Custom Properties section below to change colors,
fonts, and spacing globally across the entire site.
============================================================ */
/* Fonts load via a in each page's (faster than a
CSS @import, which can't start until this stylesheet arrives). */
/* ── Custom Properties ─────────────────────────────────────── */
:root {
/* Background */
--bg: #EEEDEB;
/* Text — all ADA AA compliant against --bg */
--text-primary: #2A2420; /* Main body text */
--text-secondary: #4A3E38; /* Subtext, captions */
--text-muted: #665B54; /* Labels, placeholders. MEASURED 2026-09-12:
5.63:1 on --bg #eeedeb, 5.19:1 on card
#e7e4df, 5.14:1 on the darkest card surface
#e6e3de. ⚑ #6F645D (the previous value) was
4.91 / 4.53 / 4.49 — it PASSED or FAILED
purely on which surface it landed on, and
~40 elements across the case studies sat in
the 4.49-4.82 band. A token with no headroom
is a token that fails the next time someone
adds a surface. ⚑ The value before that,
#7A6E67, sat at 4.22 and was corrected here
and NOWHERE ELSE — index.html re-declared it
inline until 2026-09-12. Sweep the tree. */
/* Borders & UI */
--border: #C9C2BB;
--frame-rest: #B5ADA4; /* Retro frame lines at rest */
--surface: #E8E5E0; /* Slightly darker surface for cards */
/* ── Category Colors ─────────────────────────────────────── */
/* Change these to update category accent colors site-wide */
/* Category accents — aliased to the 4-step theme scales
(nav.css :root) so the whole site shares one color system.
Pre-reconciliation values: banking #C0614A terracotta,
ai-products #5B7FA6 dusty blue, website #6A8C6F sage,
research #7E6A8A warm purple. */
--banking: var(--crimson-4);
--ai-products: var(--teal-4);
--website: var(--rust-4);
--research: var(--gold-4);
/* ── Typography ──────────────────────────────────────────── */
--font-serif: 'Merriweather', Georgia, serif;
--font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'Roboto Slab', Georgia, serif;
/* ── Spacing ─────────────────────────────────────────────── */
--sp-1: 8px;
--sp-2: 16px;
--sp-3: 24px;
--sp-4: 32px;
--sp-5: 48px;
--sp-6: 64px;
--sp-7: 96px;
--sp-8: 128px;
/* ── Layout ──────────────────────────────────────────────── */
--max-width: 1200px;
--content-pad: clamp(24px, 5vw, 80px);
--header-height: 72px;
/* ── Shape ───────────────────────────────────────────────── */
--radius-card: 20px;
--radius-sm: 8px;
--radius-xs: 4px;
/* ── Transitions ─────────────────────────────────────────── */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}
/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
background-color: var(--bg);
color: var(--text-primary);
font-family: var(--font-sans);
font-weight: 400;
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Noise Texture Overlay ───────────────────────────────────
8% grain over the background — gives the site a warm,
tactile, vintage feel. Adjust opacity here if needed.
──────────────────────────────────────────────────────────── */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.08;
pointer-events: none;
z-index: 9998;
}
/* ── Disco Cursor Override ───────────────────────────────────
Applied by disco.js when hovering interactive elements.
──────────────────────────────────────────────────────────── */
body.disco-cursor-active {
cursor: none;
}
/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3 {
font-family: var(--font-serif);
line-height: 1.2;
color: var(--text-primary);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 400; }
h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 700; }
p {
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.75;
color: var(--text-secondary);
}
a {
color: inherit;
text-decoration: none;
}
img {
display: block;
max-width: 100%;
height: auto;
}
/* ── Accent Label ────────────────────────────────────────────
Used for category labels, interactive elements, metadata.
──────────────────────────────────────────────────────────── */
.label {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: none;
color: var(--text-muted);
}
/* ── Layout Utilities ──────────────────────────────────────── */
.container {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--content-pad);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
/* ══════════════════════════════════════════════════════════════
HEADER & NAVIGATION
══════════════════════════════════════════════════════════════ */
.site-header {
position: sticky;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
background-color: var(--bg);
border-bottom: 1px solid var(--border);
z-index: 100;
display: flex;
align-items: center;
}
/* Replicate the noise on the header background */
.site-header::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.06;
pointer-events: none;
}
.header-inner {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--content-pad);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--sp-3);
position: relative;
}
/* Logo — left */
.header-logo {
justify-self: start;
display: flex;
align-items: center;
text-decoration: none;
transition: opacity 0.2s ease;
}
/* .header-logo:hover used to dim to .75; since 2026-09-09 the hover is the
ring-reveal replay in nav.css (index.html inlines its own copy), and
nav.css sets the hover opacity back to 1. */
.header-logo:focus-visible {
outline: 2px solid var(--text-primary);
outline-offset: 4px;
border-radius: var(--radius-xs);
}
.header-logo svg {
height: 44px;
width: auto;
}
/* Work Dropdown — center */
.nav-work {
position: relative;
justify-self: center;
}
.nav-work-trigger {
font-family: var(--font-mono);
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: none;
color: var(--text-primary);
background: none;
border: 1px solid var(--border);
border-radius: 100px;
padding: 8px 20px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: border-color 0.2s ease, background 0.2s ease;
}
.nav-work-trigger:hover,
.nav-work-trigger[aria-expanded="true"] {
background: var(--text-primary);
color: var(--bg);
border-color: var(--text-primary);
}
.nav-work-trigger:focus-visible {
outline: 2px solid var(--text-primary);
outline-offset: 3px;
}
.nav-work-trigger svg {
width: 12px;
height: 12px;
transition: transform 0.25s var(--ease-out);
}
.nav-work-trigger[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.nav-dropdown {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: var(--sp-1);
min-width: 220px;
box-shadow: 0 8px 32px rgba(42, 36, 32, 0.12);
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-8px);
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s var(--ease-out);
z-index: 200;
}
.nav-dropdown.is-open {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 12px 16px;
border-radius: var(--radius-xs);
font-family: var(--font-sans);
font-size: 0.9rem;
color: var(--text-secondary);
transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
background: var(--surface);
color: var(--text-primary);
outline: none;
}
.nav-dropdown a:focus-visible {
box-shadow: inset 0 0 0 2px var(--text-primary);
}
/* Category color dots in dropdown */
.nav-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
/* (legacy .nav-dot. rules removed — no markup uses
them; the live dropdown is nav.css's icon items) */
/* ── The About affordance: the disco pill (2026-09-09) ──
Replaces the bare 44px disco ball and its tooltip. The ball's own mirror
tiles over a capsule at the Work pill's height, labelled "About Me",
drawn by js/disco-ball-3d.js into the canvas. The grey face under the
canvas is the no-WebGL fallback: still a labelled button. Still at
rest; turns and sparks on hover/focus (the sparks are placed by the JS,
drawn here). The pill itself never moves (hover-transform rule). */
.header-disco { justify-self: end; }
/* ── About, below 1280px: a plain header link (2026-09-09) ──
The disco pill is hidden at the collapsed breakpoint, and it is the only
route to about.html from the homepage and the case studies, so a phone
could not reach About at all. Daniel's call: on mobile it drops to a plain
text link, same face as the Work trigger, no pill, no motion. Hidden here;
the ≤1279px block turns it on where it turns the pill off. */
.header-about-link {
display: none;
justify-self: end;
align-items: center;
min-height: 44px; /* touch target; the text is ~11px tall */
padding: 0 4px;
margin-right: -4px; /* keep the letters flush with the edge */
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1;
color: var(--text-primary);
text-decoration: none;
white-space: nowrap;
}
.header-about-link:hover,
.header-about-link:focus-visible {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
.header-about-link:focus-visible {
outline: 2px solid var(--text-primary);
outline-offset: 2px;
}
.disco-pill {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.10em;
color: var(--text-primary);
text-decoration: none;
white-space: nowrap;
line-height: 1;
padding: 12px 22px; /* 37px tall: the Work pill's height */
border-radius: 100px;
background: #c4bfb8;
isolation: isolate;
cursor: pointer;
filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.22)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
}
.disco-pill canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
border-radius: inherit;
z-index: 0;
pointer-events: none;
}
/* the letters sit on a solid 1px cream outline plus a soft halo, so their
immediate background is cream (13.5:1 to ink) on every tile, black grout
included. That outline is what makes 1.4.3 defensible over a mirror: an
automated check measures ink against the CSS face (#c4bfb8, 7:1) and
never sees the canvas. */
.disco-pill .lbl {
position: relative;
z-index: 1;
text-shadow:
-1px -1px 0 #EEEDEB, 1px -1px 0 #EEEDEB, -1px 1px 0 #EEEDEB, 1px 1px 0 #EEEDEB,
0 -1px 0 #EEEDEB, 0 1px 0 #EEEDEB, -1px 0 0 #EEEDEB, 1px 0 0 #EEEDEB,
0 0 5px rgba(238, 237, 235, 0.9);
}
.disco-pill:focus-visible {
outline: 2px solid var(--text-primary);
outline-offset: 4px;
}
.disco-spark {
position: absolute;
z-index: 2;
width: 9px;
height: 9px;
margin: -4.5px 0 0 -4.5px;
pointer-events: none;
opacity: 0;
background:
linear-gradient(#fff8ee, #fff8ee) center / 1.5px 100% no-repeat,
linear-gradient(#fff8ee, #fff8ee) center / 100% 1.5px no-repeat;
filter: drop-shadow(0 0 2px rgba(255, 248, 238, 0.9));
animation: disco-spark 0.55s ease-out both;
}
@keyframes disco-spark {
0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
35% { opacity: 1; transform: scale(1) rotate(25deg); }
100% { opacity: 0; transform: scale(0.4) rotate(60deg); }
}
@media (prefers-reduced-motion: reduce) {
.disco-spark { display: none; }
}
/* ══════════════════════════════════════════════════════════════
HERO SECTION
══════════════════════════════════════════════════════════════ */
.hero {
padding: var(--sp-8) 0 var(--sp-7);
}
.hero-inner {
max-width: 680px;
}
.hero-eyebrow {
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.15em;
text-transform: none;
color: var(--text-muted);
margin-bottom: var(--sp-3);
}
.hero h1 {
margin-bottom: var(--sp-2);
}
.hero-sub {
font-family: var(--font-serif);
font-size: clamp(1rem, 2vw, 1.25rem);
font-weight: 300;
font-style: italic;
color: var(--text-secondary);
margin-bottom: 0;
}
/* ══════════════════════════════════════════════════════════════
CASE STUDY GRID SECTIONS
══════════════════════════════════════════════════════════════ */
.work-section {
padding: var(--sp-7) 0;
border-top: 1px solid var(--border);
}
.section-header {
display: flex;
align-items: baseline;
gap: var(--sp-3);
margin-bottom: var(--sp-5);
}
.section-label {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: none;
color: var(--text-muted);
}
.section-title {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary);
}
.section-color-bar {
height: 2px;
width: 48px;
border-radius: 2px;
flex-shrink: 0;
transition: width 0.4s var(--ease-out);
}
.work-section:hover .section-color-bar { width: 80px; }
/* Case Study Grid */
.case-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-4);
}
/* ── Case Study Card ─────────────────────────────────────────
Each card is a flex row: image frame left, text right.
──────────────────────────────────────────────────────────── */
.case-card {
display: flex;
gap: var(--sp-3);
background: rgba(255,255,255,0.35);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: var(--sp-3);
transition: box-shadow 0.3s ease, transform 0.3s var(--ease-out);
}
.case-card:hover {
box-shadow: 0 12px 40px rgba(42, 36, 32, 0.1);
transform: translateY(-2px);
}
/* Card image wrapper — square, with SVG frame overlay */
.card-image-link {
display: block;
position: relative;
flex-shrink: 0;
width: 160px;
height: 160px;
border-radius: var(--radius-sm);
overflow: visible;
text-decoration: none;
}
.card-image-link:focus-visible {
outline: 2px solid var(--text-primary);
outline-offset: 6px;
border-radius: var(--radius-sm);
}
.card-image-bg {
position: absolute;
inset: 0;
border-radius: var(--radius-sm);
background: var(--surface);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* INSERT case study preview images inside .card-image-bg */
.card-image-bg img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-sm);
}
/* Placeholder shown when no image is set */
.img-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
gap: 8px;
}
.img-placeholder-icon {
width: 40px;
height: 40px;
opacity: 0.25;
}
.img-placeholder-text {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.08em;
color: var(--text-muted);
text-align: center;
padding: 0 8px;
}
/* Retro SVG frame — absolutely positioned over the image */
.retro-frame {
position: absolute;
inset: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
pointer-events: none;
overflow: visible;
}
/* All frame line elements at rest — warm gray */
.fl {
stroke: var(--frame-rest);
fill: none;
transition: stroke 0.25s ease, fill 0.25s ease;
}
/* Diamond ornament elements use fill, not stroke */
.fl.diamond {
stroke: none;
fill: var(--frame-rest);
}
/* On card hover: staggered color reveal, one line at a time */
.case-card:hover .fl-1 { stroke: var(--card-color); transition-delay: 0.00s; }
.case-card:hover .fl-2 { stroke: var(--card-color); transition-delay: 0.06s; }
.case-card:hover .fl-3 { stroke: var(--card-color); transition-delay: 0.12s; }
.case-card:hover .fl-4 { stroke: var(--card-color); transition-delay: 0.18s; }
.case-card:hover .fl-5 { stroke: var(--card-color); transition-delay: 0.24s; }
.case-card:hover .fl-6 { stroke: var(--card-color); transition-delay: 0.30s; }
.case-card:hover .fl-7.diamond { fill: var(--card-color); transition-delay: 0.36s; }
.case-card:hover .fl-8.diamond { fill: var(--card-color); transition-delay: 0.42s; }
.case-card:hover .fl-9.diamond { fill: var(--card-color); transition-delay: 0.48s; }
.case-card:hover .fl-10.diamond { fill: var(--card-color); transition-delay: 0.54s; }
/* Card text content */
.card-content {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--sp-2);
min-width: 0;
}
.card-category-label {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: none;
color: var(--text-muted);
}
.card-title {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
color: var(--text-primary);
margin: 0;
}
.card-summary {
font-size: 0.85rem;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: none;
color: var(--text-primary);
text-decoration: none;
border-bottom: 1px solid var(--border);
padding-bottom: 2px;
width: fit-content;
transition: border-color 0.2s ease, color 0.2s ease;
}
.case-card:hover .card-cta {
border-color: var(--card-color);
color: var(--card-color);
}
.card-cta:focus-visible {
outline: 2px solid var(--text-primary);
outline-offset: 4px;
border-radius: var(--radius-xs);
}
.card-cta-arrow {
transition: transform 0.2s var(--ease-out);
}
.card-cta:hover .card-cta-arrow { transform: translateX(3px); }
/* ══════════════════════════════════════════════════════════════
PHOTO SECTION (Homepage — below case study grids)
══════════════════════════════════════════════════════════════ */
.photo-section {
padding: var(--sp-7) 0 var(--sp-8);
border-top: 1px solid var(--border);
display: flex;
justify-content: center;
}
.photo-frame-link {
position: relative;
display: block;
width: clamp(260px, 40vw, 460px);
text-decoration: none;
border-radius: var(--radius-card);
}
.photo-frame-link:focus-visible {
outline: 2px solid var(--text-primary);
outline-offset: 8px;
border-radius: var(--radius-card);
}
.photo-image-bg {
position: relative;
width: 100%;
aspect-ratio: 4/5;
background: var(--surface);
border-radius: var(--radius-card);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* INSERT: Daniel's photo inside .photo-image-bg */
.photo-image-bg img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-card);
}
.photo-placeholder {
text-align: center;
padding: var(--sp-4);
}
.photo-placeholder p {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-muted);
letter-spacing: 0.08em;
}
.photo-retro-frame {
position: absolute;
inset: -16px;
width: calc(100% + 32px);
height: calc(100% + 32px);
pointer-events: none;
overflow: visible;
}
/* Photo tooltip */
.photo-tooltip {
position: absolute;
bottom: calc(100% + 16px);
left: 50%;
transform: translateX(-50%);
background: var(--text-primary);
color: var(--bg);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
white-space: nowrap;
padding: 8px 16px;
border-radius: 100px;
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s var(--ease-out);
transform: translateX(-50%) translateY(6px);
}
.photo-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--text-primary);
}
@media (hover: hover) {
.photo-frame-link:hover .photo-tooltip {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.photo-frame-link:hover .fl {
stroke: var(--research); /* Warm purple for photo frame */
transition-delay: calc(var(--line-index, 0) * 0.07s);
}
.photo-frame-link:hover .fl.diamond {
fill: var(--research);
}
}
/* ══════════════════════════════════════════════════════════════
FOOTER
══════════════════════════════════════════════════════════════ */
.site-footer {
border-top: 1px solid var(--border);
padding: var(--sp-5) 0;
}
.footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
flex-wrap: wrap;
}
.footer-copy {
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.footer-links {
display: flex;
gap: var(--sp-3);
}
.footer-links a {
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--text-muted);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-links a:hover {
color: var(--text-primary);
border-color: var(--text-primary);
}
.footer-links a:focus-visible {
outline: 2px solid var(--text-primary);
outline-offset: 4px;
}
/* ══════════════════════════════════════════════════════════════
ABOUT PAGE
══════════════════════════════════════════════════════════════ */
.about-hero {
padding: var(--sp-7) 0 var(--sp-6);
}
.about-disco-stage {
display: none; /* Shown by disco.js on first visit */
justify-content: center;
padding-bottom: var(--sp-5);
height: 200px;
align-items: flex-end;
}
.about-content {
padding: var(--sp-7) 0;
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-6);
align-items: start;
}
.about-bio h2 {
margin-bottom: var(--sp-3);
}
.about-bio p + p {
margin-top: var(--sp-3);
}
.about-aside {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.about-block {
border-top: 1px solid var(--border);
padding-top: var(--sp-3);
}
.about-block h3 {
font-size: 0.9rem;
font-family: var(--font-mono);
font-weight: 400;
letter-spacing: 0.1em;
text-transform: none;
color: var(--text-muted);
margin-bottom: var(--sp-2);
}
.skills-list {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--sp-1);
}
.skills-list li {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 100px;
padding: 4px 12px;
color: var(--text-secondary);
}
/* (legacy .about-cta pill removed 2026-07-19 — it collided with
the new about.html closing CTA row in about.css; the only
other user is archive/about-v1.html) */
/* ══════════════════════════════════════════════════════════════
CASE STUDY PAGES
══════════════════════════════════════════════════════════════ */
/* Tab navigation */
.case-study-tabs {
position: sticky;
top: var(--header-height);
background: var(--bg);
border-bottom: 1px solid var(--border);
z-index: 50;
padding: 0;
}
.case-study-tabs::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.05;
pointer-events: none;
}
.tabs-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--content-pad);
display: flex;
align-items: stretch;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.tabs-inner::-webkit-scrollbar { display: none; }
.tab-btn {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: none;
color: var(--text-muted);
background: none;
border: none;
border-bottom: 2px solid transparent;
padding: 18px 24px;
cursor: pointer;
white-space: nowrap;
transition: color 0.2s ease, border-color 0.2s ease;
position: relative;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.is-active {
color: var(--page-color, var(--text-primary));
border-bottom-color: var(--page-color, var(--text-primary));
}
.tab-btn:focus-visible {
outline: 2px solid var(--text-primary);
outline-offset: -4px;
}
/* Case study overview (above fold) */
.cs-overview {
padding: var(--sp-7) 0 var(--sp-6);
border-bottom: 1px solid var(--border);
}
.cs-overview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-6);
align-items: start;
}
.cs-title {
font-size: clamp(1.8rem, 4vw, 3rem);
margin-bottom: var(--sp-3);
}
.cs-intro p {
font-size: 1.05rem;
line-height: 1.8;
}
.cs-intro p + p { margin-top: var(--sp-3); }
/* Metrics / stats */
.cs-metrics {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-3);
margin-top: var(--sp-4);
}
.metric {
border-top: 2px solid var(--page-color, var(--border));
padding-top: var(--sp-2);
}
.metric-value {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 3vw, 2.2rem);
font-weight: 700;
color: var(--page-color, var(--text-primary));
line-height: 1;
margin-bottom: 4px;
}
.metric-label {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: none;
color: var(--text-muted);
}
/* Hero visuals */
.cs-visuals {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.cs-visual-slot {
aspect-ratio: 16/9;
background: var(--surface);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.cs-visual-slot img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cs-visual-placeholder {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
color: var(--text-muted);
text-align: center;
padding: var(--sp-2);
}
/* Honesty callout */
.cs-callout {
margin-top: var(--sp-4);
border-left: 3px solid var(--page-color, var(--border));
padding: var(--sp-3) var(--sp-3);
background: rgba(255,255,255,0.3);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.cs-callout .label {
display: block;
margin-bottom: var(--sp-1);
}
.cs-callout p {
font-style: italic;
font-size: 0.95rem;
}
/* Deep dive narrative */
.cs-narrative {
padding: var(--sp-7) 0 var(--sp-8);
position: relative;
}
.cs-section {
margin-bottom: var(--sp-6);
max-width: 720px;
}
.cs-section h2 {
font-size: 1.3rem;
margin-bottom: var(--sp-3);
display: flex;
align-items: center;
gap: var(--sp-2);
}
.cs-section-number {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
color: var(--page-color, var(--text-muted));
border: 1px solid var(--page-color, var(--border));
border-radius: 100px;
padding: 2px 10px;
}
.cs-inline-image {
margin: var(--sp-4) 0;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--border);
}
.cs-inline-image img {
width: 100%;
}
.cs-inline-image figcaption {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
color: var(--text-muted);
padding: var(--sp-1) var(--sp-2);
background: var(--surface);
border-top: 1px solid var(--border);
}
/* Prototype embed container */
.cs-prototype {
margin: var(--sp-5) 0;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--border);
}
.cs-prototype-label {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: none;
color: var(--text-muted);
padding: 12px var(--sp-3);
background: var(--surface);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 8px;
}
.cs-prototype iframe {
width: 100%;
height: 600px;
border: none;
display: block;
}
/* Scroll-animated retro line — runs down the right side of narrative */
.cs-scroll-line {
position: absolute;
right: 0;
top: var(--sp-7);
bottom: var(--sp-7);
width: 60px;
pointer-events: none;
}
/* ══════════════════════════════════════════════════════════════
DISCO CURSOR — floating element, positioned by disco.js
══════════════════════════════════════════════════════════════ */
#disco-cursor {
position: fixed;
width: 36px;
height: 36px;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
display: none; /* Shown by disco.js */
}
/* ══════════════════════════════════════════════════════════════
ABOUT PAGE — Disco Ball Animation Stage
══════════════════════════════════════════════════════════════ */
.disco-ball-stage {
display: flex;
justify-content: center;
align-items: flex-end;
height: 260px;
padding-bottom: var(--sp-4);
overflow: hidden;
}
.disco-ball-wrap {
position: relative;
width: 120px;
height: 120px;
}
.disco-reflections {
position: absolute;
inset: -80px;
pointer-events: none;
}
/* ══════════════════════════════════════════════════════════════
RESPONSIVE — Tablet & Mobile
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
:root {
--header-height: 64px;
}
.case-grid {
grid-template-columns: 1fr;
}
.cs-overview-grid,
.about-grid {
grid-template-columns: 1fr;
}
.cs-metrics {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
:root {
--content-pad: 20px;
}
.case-card {
flex-direction: column;
}
.card-image-link {
width: 100%;
height: 200px;
}
.hero {
padding: var(--sp-6) 0 var(--sp-5);
}
.footer-inner {
flex-direction: column;
align-items: flex-start;
}
/* No cursor effects on touch devices */
.photo-tooltip { display: none; }
#disco-cursor { display: none !important; }
}
/* ══════════════════════════════════════════════════════════════
FOCUS STYLES — Keyboard navigation
══════════════════════════════════════════════════════════════ */
:focus-visible {
outline: 2px solid var(--text-primary);
outline-offset: 3px;
}
/* Skip link for keyboard users */
.skip-link {
position: absolute;
top: -100%;
left: 0;
background: var(--text-primary);
color: var(--bg);
padding: 12px 24px;
font-family: var(--font-mono);
font-size: 0.8rem;
z-index: 9999;
transition: top 0s;
}
.skip-link:focus {
top: 0;
}
/* ══════════════════════════════════════════════════════════════
THE VINYL BUTTON — site-wide (moved here from css/about.css 2026-09-09,
verbatim, so the case-study closers can wear it; about/resume still
carry the same markup). The .is-next closer variant is in case-study.css.
══════════════════════════════════════════════════════════════ */
/* ── Closing CTA row: THE VINYL BUTTON ─────────────────────
2026-09-09. Replaces the rounded rectangle with the up-left offset
shadow (Daniel: "underwhelmed"). Chosen from eleven sandbox options
(sandbox/buttons-vinyl.html, buttons-crazy.html, buttons-real.html)
on the brief: elegant, nostalgic, "remember my 1970s", vinyl, a cool
hover, no glow. The winner is the DRAWN record:
- At rest: a plain button. Nothing moves, nothing shows.
- Hover / focus / press: a record (assets/images/vinyl-dg.svg, 16KB,
grooves + sheen + the DG logo as its label) fades in behind the
label and turns at a slow 33⅓, clipped by the button's own edge;
the label goes cream on the black vinyl (about 14:1).
- The hover target never moves (hover-transform rule): the motion is
on the record, the button stays put.
- Reduced motion: the record still appears, it does not spin.
Class names are unchanged (.about-cta / .about-btn / -primary) so the
resume page's row inherits it. Each button now needs the record img
and a .lbl span in its markup; see about.html's CTA row.
Sizes: 13px mono, 14x24 padding (the 11px/12x22 of the old button
was the LABEL size, and a button is functional text).
2026-09-09: the label disc shrank (r 172 -> 105 of 500; the cream reaches
41px into the button, 30%, Daniel's box: the DG was reading as the point
of the button); the label slide shrank with it (26 -> 14px); the sheen
left the SVG for a static ::after; spin 2.2s -> 3.2s per turn. The
record is regenerated by sandbox/vinyl-label/gen.py.
The disco-pill option was retired to the sandbox; its rationale is
in sandbox/buttons-real.html. Revert = git revert this commit. */
.about-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
margin-top: 4px;
}
.about-btn {
--face: var(--surface);
--edge: var(--text-primary);
position: relative;
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-weight: 400;
font-size: 0.8125rem; /* 13px */
letter-spacing: .01em;
text-decoration: none;
color: var(--text-primary);
padding: 14px 36px; /* symmetric, so the label sits centred at rest */
border: 1.5px solid var(--edge); /* the visible edge, on the element itself (2026-09-10; it used to be
on ::before with the clip on clip-path) */
border-radius: var(--radius-sm);
background: transparent;
isolation: isolate;
/* the record is clipped by the button's own edge. ⚑ overflow, not clip-path:
clip-path is paint-only and the record's box still counted as layout
overflow, so a closer near the end of a page added its 740px disc's lower
half to the document (220px of dead scroll under the footer, caught by the
T&P review 2026-09-10). overflow:hidden clips at the padding box, which is
why the edge moved from ::before onto the element's own border: borders
are never clipped by their own element's overflow. Focus outlines are not
either. */
overflow: hidden;
cursor: pointer;
}
/* the face lives on a pseudo-element at z -1 so the record (z 0) sits
between the face and the label */
.about-btn::before {
content: "";
position: absolute;
inset: 0;
border-radius: calc(var(--radius-sm) - 1.5px); /* the inner radius, so it meets the border cleanly */
background: var(--face);
z-index: -1;
}
.about-btn-primary { --face: var(--rainbow-1); --edge: var(--rainbow-1); color: var(--bg); }
/* on hover the label slides right to clear the record's label disc, the
way a platter nudges a sleeve: 26px, exponential ease-out. At rest it is
centred. The button itself never moves. */
.about-btn .lbl { position: relative; z-index: 1; transform: translateX(0); transition: color .25s var(--ease-out), transform .35s var(--ease-out); }
.about-btn .rec {
position: absolute;
z-index: 0;
width: 330px; height: 330px; max-width: none; /* the site caps img at 100%; this one must overhang */
left: -161px; top: 50%; margin-top: -165px; /* centre 4px inside the left edge: the DG label shows, the grooves reach 169px in, past the widest button in the row */
display: block;
opacity: 0;
transform: rotate(0deg);
transition: opacity .3s var(--ease-out);
pointer-events: none;
}
.about-btn:hover .rec,
.about-btn:focus-visible .rec,
.about-btn:active .rec { opacity: 1; animation: about-btn-spin 3.2s linear infinite; } /* 2.2s -> 3.2s, Daniel 2026-09-09 */
.about-btn:hover .lbl,
.about-btn:focus-visible .lbl,
.about-btn:active .lbl { color: var(--bg); transform: translateX(14px); }
@keyframes about-btn-spin { to { transform: rotate(360deg); } }
/* the lamp: a static sheen over the turning record, two soft wedges and a
faint radial falloff, so the grooves pass under a reflection that stays
put (2026-09-09: the sheen used to be drawn INSIDE the SVG and spun with
it, which is what made it read as a spinning graphic). Same box as .rec;
z 0 between the record and the label; fades in with the record. */
.about-btn::after {
content: "";
position: absolute;
z-index: 0;
width: 330px; height: 330px;
left: -161px; top: 50%; margin-top: -165px;
border-radius: 50%;
background:
radial-gradient(circle at 50% 50%, rgba(255,248,238,0) 30%, rgba(255,248,238,.05) 62%, rgba(255,248,238,0) 96%),
conic-gradient(from -42deg at 50% 50%,
rgba(255,248,238,0) 0deg, rgba(255,248,238,.34) 16deg, rgba(255,248,238,0) 34deg,
rgba(255,248,238,0) 180deg, rgba(255,248,238,.26) 196deg, rgba(255,248,238,0) 214deg);
-webkit-mask: radial-gradient(circle at 50% 50%, transparent 19%, #000 27%, #000 97%, transparent 100%);
mask: radial-gradient(circle at 50% 50%, transparent 19%, #000 27%, #000 97%, transparent 100%);
opacity: 0;
transition: opacity .3s var(--ease-out);
pointer-events: none;
}
.about-btn:hover::after,
.about-btn:focus-visible::after,
.about-btn:active::after { opacity: 1; }
.about-btn:focus-visible { outline: 2px solid var(--rainbow-1); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
.about-btn .rec { animation: none !important; }
}