/* ------------------------------------------------------------------ Shared shell for build-log / case-study stories. Ground + typography match the main site (navy cards on near-black, Helvetica Neue) so navigating back doesn't jar. Each story sets its own accent by overriding --accent / --accent-soft on .story, e.g. Nothing in here is specific to one project. ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; } html, body { background: var(--ground); } img, canvas, video { display: block; max-width: 100%; } h1, h2, h3, h4, p { margin: 0; } a { color: inherit; } :root { /* site palette */ --ground: #08090c; --panel: #122236; --panel-2: #0e1a29; --line: #26374e; --ink: #ffffff; --ink-2: #e6e7ea; --ink-soft: #9a9fa8; /* per-story accents — overridden inline */ --accent: #4f9dd8; --accent-soft: #6fb1e0; --display: "Helvetica Neue", Helvetica, Arial, sans-serif; --body: "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --shadow: 0 10px 30px rgba(0,0,0,.35); --shadow-lg: 0 20px 44px rgba(0,0,0,.45); color-scheme: dark; } .story { font-family: var(--body); background: var(--ground); color: var(--ink-2); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* ---------- layout ---------- */ .shell { max-width: 1080px; margin: 0 auto; padding: 0 24px; } .section { padding: clamp(52px, 8vw, 100px) 0; } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* ---------- back to site ---------- */ .storynav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .storynav .shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 13px; padding-bottom: 13px; } .storynav a { text-decoration: none; font-size: .86rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; transition: color .2s ease; } .storynav a:hover, .storynav a:focus-visible { color: var(--ink); } .storynav .who { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); } /* ---------- type ---------- */ .eyebrow { font-family: var(--mono); font-size: .95rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .lede { font-size: clamp(1.04rem, 2.3vw, 1.24rem); color: var(--ink-soft); max-width: 60ch; } .head { max-width: 64ch; margin-bottom: clamp(28px, 4.5vw, 50px); } .head h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.025em; font-size: clamp(1.75rem, 4.4vw, 2.9rem); line-height: 1.03; text-wrap: balance; margin: 13px 0 15px; color: var(--ink); } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); } .hero-inner { position: relative; z-index: 2; padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(40px, 6vw, 76px); } .hero canvas, .hero .hero-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .hero-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--ground) 30%, transparent) 0%, color-mix(in srgb, var(--ground) 82%, transparent) 70%, var(--ground) 100%); } .kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); background: var(--panel); border: 1px solid var(--line); padding: 7px 13px; border-radius: 100px; } .kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .story h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.5rem, 7.6vw, 5.6rem); line-height: .95; letter-spacing: -.03em; text-wrap: balance; margin-bottom: 20px; color: var(--ink); } .story h1 .thin { font-weight: 300; color: var(--ink-soft); letter-spacing: -.02em; } .story h1 .hi { color: var(--accent); } /* ---------- stat chips ---------- */ .stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; } .stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; min-width: 96px; } .stat b { display: block; font-family: var(--mono); font-weight: 600; font-size: 1.45rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--ink); } .stat span { font-size: .72rem; color: var(--ink-soft); letter-spacing: .04em; } /* ---------- cards / figures ---------- */ .card, .fig { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); margin: 0; } .fig { padding: clamp(14px, 1.8vw, 20px); } .card { padding: clamp(22px, 3vw, 32px); } .fig .shot { border-radius: 12px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); line-height: 0; } .fig figcaption { margin-top: 14px; } .fig .ct { display: block; font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 5px; color: var(--ink); } .fig .cd { display: block; font-size: .87rem; color: var(--ink-soft); line-height: 1.55; } .fig .cmeta { display: block; margin-top: 9px; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } /* grids */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.6vw, 26px); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); } .grid-3 .cd { font-size: .83rem; } .stack { display: grid; gap: clamp(12px, 1.8vw, 18px); } @media (max-width: 960px) { .grid-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } } /* comparison label */ .cmp-label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .cmp-label b { font-family: var(--display); font-weight: 700; font-size: .96rem; letter-spacing: -.01em; color: var(--ink); } .cmp-label span { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } /* ---------- data bars ---------- */ .chart-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; } .chart-top h3 { font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; color: var(--ink); } .bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(12px, 2.4vw, 26px); align-items: end; height: 250px; } .bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .bar .fill { width: 100%; height: var(--h); min-height: 5px; border-radius: 9px 9px 3px 3px; background: linear-gradient(180deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 55%, #000)); transform-origin: bottom; transform: scaleY(0); transition: transform 1s cubic-bezier(.2,.7,.2,1); } .bar.peak .fill { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); } .reveal.in .bar .fill { transform: scaleY(1); } .bar .val { position: absolute; bottom: calc(var(--h) + 12px); left: 0; right: 0; text-align: center; font-family: var(--mono); font-weight: 600; font-size: 1.02rem; font-variant-numeric: tabular-nums; color: var(--ink); opacity: 0; transition: opacity .5s ease .45s; } .bar.peak .val { color: var(--accent); } .reveal.in .bar .val { opacity: 1; } .bar .lbl { position: absolute; bottom: -30px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: .7rem; color: var(--ink-soft); letter-spacing: .06em; } .chart-note { margin-top: 52px; font-size: .9rem; color: var(--ink-soft); max-width: 58ch; } .chart-note b { color: var(--ink); font-weight: 600; } /* ---------- timeline entries ---------- */ .entries { display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 24px); } .entry { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 32px); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow); } .entry-mark { width: 56px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .entry-mark .n { font-family: var(--mono); font-weight: 600; font-size: 1.6rem; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; color: var(--ink); } .entry-mark svg { width: 32px; height: 40px; color: var(--ink-soft); } .entry-body h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 2.6vw, 1.5rem); letter-spacing: -.015em; line-height: 1.1; margin-bottom: 6px; color: var(--ink); } .entry-body .when { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--accent); text-transform: uppercase; margin-bottom: 12px; display: block; } .entry-body p { color: var(--ink-soft); font-size: .96rem; max-width: 62ch; } .entry-body p + p { margin-top: 12px; } .entry-body em { color: var(--ink-2); font-style: normal; font-weight: 600; } .tag { display: inline-block; margin-top: 14px; margin-right: 8px; font-family: var(--mono); font-size: .66rem; letter-spacing: .05em; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 100px; padding: 4px 11px; } @media (max-width: 640px) { .entry { grid-template-columns: 1fr; } .entry-mark { flex-direction: row; width: auto; gap: 14px; align-items: center; } .entry-mark svg { width: 24px; height: 30px; } } /* ---------- note cards (bugs / lessons) ---------- */ .notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 16px; } .note { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .note::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); opacity: .85; } .note .kind { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .note h4 { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; margin: 8px 0 10px; line-height: 1.15; color: var(--ink); } .note p { font-size: .88rem; color: var(--ink-soft); line-height: 1.55; } .note code, .entry-body code { font-family: var(--mono); font-size: .82em; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink-2); padding: 1px 5px; border-radius: 5px; } /* ---------- closing panel ---------- */ .closer { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, var(--panel)), var(--panel-2)); border: 1px solid var(--line); border-radius: 22px; padding: clamp(28px, 5vw, 54px); box-shadow: var(--shadow-lg); } .closer h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.025em; font-size: clamp(1.6rem, 4.2vw, 2.6rem); line-height: 1.05; margin: 13px 0 17px; text-wrap: balance; color: var(--ink); } .closer p { color: var(--ink-2); max-width: 60ch; font-size: 1rem; } .closer .eyebrow { color: var(--accent-soft); } .final-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); } .final-stats b { display: block; font-family: var(--mono); font-weight: 600; font-size: 1.8rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); } .final-stats span { font-size: .72rem; color: var(--ink-soft); letter-spacing: .04em; } /* ---------- footer ---------- */ .storyfoot { padding: 38px 0 66px; text-align: center; color: var(--ink-soft); font-size: .8rem; border-top: 1px solid var(--line); } .storyfoot .fmono { font-family: var(--mono); letter-spacing: .04em; } .storyfoot a { color: var(--ink-soft); } .storyfoot a:hover { color: var(--ink); } /* ---------- reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .06s; } .reveal.d2 { transition-delay: .12s; } :where(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .bar .fill { transform: scaleY(1); transition: none; } .bar .val { opacity: 1; } * { animation: none !important; } }