/* case-study.css — deep case-study template for tinyblue.dev/projects//. * * Layers on top of subpage.css (which already styles .case-hero). Adds the * narrative anatomy every deep case study uses: * - .case-layout two-col: sticky TOC rail + content body * - .case-toc scroll-spy table of contents * - .case-factbar at-a-glance role/timeline/stack/status strip * - .case-section anchored narrative section (problem, build, etc.) * - .case-prose readable measure for body copy * - .case-results big animated outcome numbers * - .case-cards build / hard-parts cards * - .case-stack grouped tech chips + rationale * - .case-quote pull-quote * - .case-figure device-framed screenshot + caption * - .case-cta next-steps band * * All tokens (--maxw, --gutter, --bg-elev, --ink-*, --rule, --tb-blue, …) * come from landing.css / tinyblue-system.css. Reduced-motion handled at * the bottom. */ /* ─────────────────────────── Brand accent system ─────────────────────────── * Each case study sets data-accent on ; that picks a --case-accent * for the whole page (eyebrows, TOC, links, hovers, CTA) AND lays a very * faint fixed brand wash over the page background so the entire project * reads slightly in-brand without hurting readability. Defaults to the * tinyblue blue when no accent is set. */ :root { --case-accent: var(--tb-blue); --case-accent-soft: var(--tb-blue-soft); } body[data-accent="blue"] { --case-accent: #2f6fd0; } body[data-accent="red"] { --case-accent: #d12626; } body[data-accent="amber"] { --case-accent: #c8911e; } body[data-accent="crimson"] { --case-accent: #b3232a; } body[data-accent="yellow"] { --case-accent: #d2a200; } body[data-accent="violet"] { --case-accent: #7c4dd6; } body[data-accent="gold"] { --case-accent: #c79a3a; } body[data-accent="teal"] { --case-accent: #1f9e8a; } body[data-accent="orange"] { --case-accent: #ff7a3c; } body[data-accent="indigo"] { --case-accent: #5b6cff; } body[data-accent="rose"] { --case-accent: #d6437f; } body[data-accent="green"] { --case-accent: #3fa64b; } body[data-accent="navy"] { --case-accent: #3667b0; } body[data-accent] { --case-accent-soft: color-mix(in srgb, var(--case-accent) 12%, transparent); /* Faint, fixed two-corner wash layered over the base page background. A touch more presence than before — still subtle, not a flood. */ background: radial-gradient(1150px circle at 6% -8%, color-mix(in srgb, var(--case-accent) 17%, transparent), transparent 56%), radial-gradient(1000px circle at 100% 0%, color-mix(in srgb, var(--case-accent) 12%, transparent), transparent 52%), radial-gradient(900px circle at 50% 116%, color-mix(in srgb, var(--case-accent) 8%, transparent), transparent 60%), var(--bg) !important; background-attachment: fixed, fixed, fixed, fixed !important; } [data-theme="dark"] body[data-accent], body[data-accent][data-theme] { --case-accent-soft: color-mix(in srgb, var(--case-accent) 18%, transparent); } /* Slightly stronger wash in dark mode so the tint actually registers. */ [data-theme="dark"] body[data-accent] { background: radial-gradient(1150px circle at 6% -8%, color-mix(in srgb, var(--case-accent) 20%, transparent), transparent 56%), radial-gradient(1000px circle at 100% 0%, color-mix(in srgb, var(--case-accent) 13%, transparent), transparent 52%), radial-gradient(900px circle at 50% 116%, color-mix(in srgb, var(--case-accent) 10%, transparent), transparent 60%), var(--bg) !important; } @supports not (color: color-mix(in srgb, red 50%, transparent)) { body[data-accent] { background: var(--bg) !important; } } /* ─────────────────────────── Hero backdrop (atmospheric, fades into page) ─────────────────────────── * An optional full-bleed image behind the top of the page: most visible / * in focus at the very top, dissolving into the brand-tinted page color as * you scroll. A readability scrim keeps the hero copy legible on the left. * Set the image with `style="--case-bg: url(...)"` on the .case-backdrop el. * Theme-aware: the scrim fades to var(--bg) (light or dark). */ .case-backdrop { position: absolute; top: 0; left: 0; right: 0; height: clamp(560px, 82vh, 900px); z-index: 0; pointer-events: none; background: var(--case-bg, none) center top / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%); } .case-backdrop::before { content: ""; position: absolute; inset: 0; background: linear-gradient(102deg, var(--bg) 1%, color-mix(in srgb, var(--bg) 58%, transparent) 34%, color-mix(in srgb, var(--bg) 12%, transparent) 62%, transparent 78%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 28%, transparent) 0%, transparent 26%, transparent 60%, var(--bg) 100%); } /* Brand-wash variant: no photo, just an accent glow that fades into the page. Used on logo-hero pages so every project gets an immersive top. */ .case-backdrop--wash { height: clamp(440px, 64vh, 720px); background: radial-gradient(110% 82% at 80% -12%, color-mix(in srgb, var(--case-accent) 40%, transparent), transparent 60%), radial-gradient(92% 70% at 12% 0%, color-mix(in srgb, var(--case-accent) 20%, transparent), transparent 58%); } /* Lift the real content above the backdrop. */ main:has(.case-backdrop) > .case-hero, main:has(.case-backdrop) > .case-trust, main:has(.case-backdrop) > .case-layout { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .case-backdrop { will-change: auto; } } /* ─────────────────────────── Live case trust layer ─────────────────────────── */ .case-trust { max-width: var(--maxw); margin: 0 auto clamp(20px, 3vw, 36px); padding: 0 var(--gutter); } .case-trust__shell { display: grid; grid-template-columns: minmax(220px, .78fr) minmax(0, 1fr); gap: clamp(14px, 2.4vw, 28px); align-items: stretch; padding: clamp(14px, 2.2vw, 22px); border: 1px solid var(--rule); border-radius: calc(var(--radius-lg) + 2px); background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 82%, transparent), color-mix(in srgb, var(--bg-tint) 68%, transparent)), color-mix(in srgb, var(--bg-elev) 88%, transparent); box-shadow: 0 24px 48px -34px color-mix(in srgb, #000 44%, transparent); overflow: hidden; } .case-trust__intro { display: grid; align-content: space-between; gap: 14px; min-width: 0; } .case-trust__eyebrow { width: fit-content; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-mute); background: color-mix(in srgb, var(--bg-elev) 72%, transparent); font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.09em; line-height: 1; text-transform: uppercase; } .case-trust__eyebrow .tb-glyph { width: 13px; height: 13px; color: var(--tb-blue); } .case-trust__intro h2 { max-width: 13ch; margin: 0; color: var(--ink); font-size: clamp(22px, 2.7vw, 34px); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; } .case-trust__intro p, .case-trust__summary { min-width: 0; margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; } .case-trust__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 1px; border: 1px solid var(--rule); border-radius: calc(var(--radius-md) + 2px); background: var(--rule); overflow: hidden; } .case-trust__metric { min-width: 0; min-height: 104px; display: grid; align-content: space-between; gap: 10px; padding: 14px; color: var(--ink); background: color-mix(in srgb, var(--bg-elev) 88%, transparent); text-decoration: none; transition: transform 260ms var(--ease), background-color 260ms var(--ease), border-color 260ms var(--ease); } .case-trust__metric:hover { transform: translateY(-2px); background: var(--bg-tint); } .case-trust__metric span, .case-trust__metric strong, .case-trust__metric em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .case-trust__metric span { color: var(--ink-faint); font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.09em; line-height: 1; text-transform: uppercase; } .case-trust__metric strong { min-height: 27px; color: var(--ink); font-size: clamp(18px, 1.8vw, 25px); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; } .case-trust__metric em { color: var(--ink-mute); font-size: 12px; font-style: normal; line-height: 1.2; } .case-trust__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; margin-top: 12px; } .case-trust__button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); background: var(--bg-elev); cursor: pointer; font: 600 12.5px/1 var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif); text-decoration: none; white-space: nowrap; transition: transform 220ms var(--ease), border-color 220ms var(--ease), background-color 220ms var(--ease), color 220ms var(--ease); } .case-trust__button:hover, .case-trust__button.is-copied { transform: translateY(-1px); color: var(--tb-blue); border-color: var(--rule-strong); background: var(--tb-blue-soft); } .case-trust__button .tb-glyph { width: 13px; height: 13px; } .case-trust__updated { color: var(--ink-faint); font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } @media (max-width: 860px) { .case-trust__shell, .case-trust__actions { grid-template-columns: 1fr; } .case-trust__intro h2 { max-width: none; } } @media (max-width: 620px) { .case-trust { margin-bottom: 22px; } .case-trust__grid { grid-template-columns: 1fr; } .case-trust__metric { min-height: 86px; } .case-trust__button { width: 100%; } .case-trust__updated { white-space: normal; } } /* ─────────────────────────── Layout: TOC rail + body ─────────────────────────── */ .case-layout { max-width: var(--maxw); margin: 0 auto; padding: clamp(8px, 2vw, 24px) var(--gutter) clamp(40px, 6vw, 80px); display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; } .case-toc { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; } .case-toc__label { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 10px 12px; } .case-toc a { display: block; padding: 7px 12px; border-radius: 9px; color: var(--ink-mute); text-decoration: none; border-left: 2px solid transparent; transition: color 180ms ease, background 180ms ease, border-color 180ms ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .case-toc a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); } .case-toc a.is-active { color: var(--case-accent); border-left-color: var(--case-accent); background: var(--case-accent-soft); font-weight: 600; } .case-body { min-width: 0; } /* ─────────────────────────── Fact bar ─────────────────────────── */ .case-factbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin: 0 0 clamp(36px, 5vw, 56px); background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; } .case-fact { background: var(--bg-elev); padding: 16px 18px; } .case-fact__label { display: block; font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 6px; } .case-fact__value { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1.3; } .case-fact__value .case-fact__pip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: #34c759; box-shadow: 0 0 0 3px color-mix(in srgb, #34c759 22%, transparent); vertical-align: middle; } .case-fact__value--build .case-fact__pip { background: #ff9f0a; box-shadow: 0 0 0 3px color-mix(in srgb, #ff9f0a 22%, transparent); } .case-fact__value--private .case-fact__pip { background: #8e8e93; box-shadow: 0 0 0 3px color-mix(in srgb, #8e8e93 22%, transparent); } /* ─────────────────────────── Narrative section ─────────────────────────── */ .case-section { scroll-margin-top: 92px; padding: clamp(38px, 5.2vw, 64px) 0; border-top: 1px solid var(--rule); } .case-section:first-of-type { border-top: 0; padding-top: 0; } .case-section__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--case-accent); margin: 0 0 18px; } .case-section h2 { font-size: clamp(30px, 4.2vw, 48px); letter-spacing: -0.032em; line-height: 1.04; margin: 0 0 22px; max-width: 20ch; } .case-prose { max-width: 68ch; color: var(--ink-soft); font-size: 17px; line-height: 1.65; } .case-prose p { margin: 0 0 18px; } .case-prose p:last-child { margin-bottom: 0; } .case-prose strong { color: var(--ink); font-weight: 600; } .case-prose a { color: var(--case-accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--case-accent) 35%, transparent); } .case-prose a:hover { border-bottom-color: var(--case-accent); } /* A [NEEDS: …] marker so unfilled facts are obvious in draft + never read as real. */ .case-needs { display: inline-block; padding: 1px 7px; border-radius: 5px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.82em; background: color-mix(in srgb, #ff9f0a 16%, transparent); color: #b9770a; border: 1px dashed color-mix(in srgb, #ff9f0a 50%, transparent); } [data-theme="dark"] .case-needs { color: #ffcf80; } /* ─────────────────────────── Results (animated counters) ─────────────────────────── */ .case-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 8px; } .case-result { background: var(--bg-elev); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 22px 20px; box-shadow: var(--shadow-1); } .case-result__value { font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; color: var(--ink); font-variant-numeric: tabular-nums; /* Long single-word values (e.g. "Worldwide") must shrink/break to fit instead of clipping the card. Multi-word values wrap on spaces. */ overflow-wrap: anywhere; hyphens: auto; } .case-result__label { margin-top: 10px; font-size: 13px; color: var(--ink-mute); line-height: 1.4; } /* ─────────────────────────── Build / hard-parts cards ─────────────────────────── */ .case-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 16px; margin-top: 8px; } .case-card { background: var(--bg-elev); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-1); transition: transform 220ms cubic-bezier(0.32,0.72,0,1), border-color 220ms ease, box-shadow 220ms ease; } .case-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--case-accent) 30%, var(--rule)); box-shadow: var(--shadow-2); } .case-card__icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--case-accent-soft); color: var(--case-accent); margin-bottom: 14px; } .case-card__icon .tb-glyph { width: 20px; height: 20px; } .case-card h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -0.01em; } .case-card p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; } /* ─────────────────────────── Stack groups ─────────────────────────── */ .case-stack { display: grid; gap: 18px; margin-top: 8px; } .case-stack__group { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid var(--rule); } .case-stack__group:last-child { border-bottom: 0; padding-bottom: 0; } .case-stack__cat { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); } .case-stack__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .case-chip { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); border: 1px solid var(--rule); } .case-stack__why { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0; } /* ─────────────────────────── Pull-quote ─────────────────────────── */ .case-quote { margin: 8px 0 0; padding: 24px 28px; border-left: 3px solid var(--case-accent); background: linear-gradient(180deg, var(--case-accent-soft), transparent); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } .case-quote p { margin: 0; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45; letter-spacing: -0.015em; color: var(--ink); font-weight: 500; } .case-quote cite { display: block; margin-top: 12px; font-size: 13px; font-style: normal; color: var(--ink-mute); } /* ─────────────────────────── Device-framed figure ─────────────────────────── */ .case-figure { margin: 8px 0 0; } .case-figure__frame { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--bg-elev); box-shadow: var(--shadow-2); overflow: hidden; transition: transform 420ms cubic-bezier(0.32,0.72,0,1), box-shadow 420ms ease, border-color 420ms ease; } .case-figure__frame:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--case-accent) 38%, var(--rule)); box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--case-accent) 40%, transparent), var(--shadow-2); } .case-figure__frame img { display: block; width: 100%; height: auto; } @media (prefers-reduced-motion: reduce) { .case-figure__frame { transition: none; } .case-figure__frame:hover { transform: none; } } .case-figure__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--ink) 3%, transparent); } .case-figure__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); opacity: .5; } .case-figure figcaption { margin-top: 12px; font-size: 13px; color: var(--ink-mute); text-align: center; } .case-figure__placeholder { display: flex; align-items: center; justify-content: center; min-height: 200px; color: var(--ink-faint); font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 3%, transparent) 0 12px, transparent 12px 24px), var(--bg-elev); } /* ─────────────────────────── Logo hero panel ─────────────────────────── * Brand/artist logos are usually solid black, which disappears on the dark * hero backdrop. Heroes that show a logo (not a photo) get a consistent * light "logo card" panel in BOTH themes so the mark always reads — the * same pattern Apple uses to show partner logos on white chips in dark mode. */ .case-hero__media--logo { background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.95), transparent 60%), linear-gradient(180deg, #f6f6f8, #e9e9ee) !important; border-color: rgba(0, 0, 0, 0.10); } .case-hero__media--logo .case-hero__image { object-fit: contain; padding: clamp(28px, 5vw, 56px); mix-blend-mode: multiply; } /* Full-color / coin logos (SafePassage, Wharton): light tile, NORMAL blend (multiply would erase their white elements). */ .case-hero__media--brand { background: radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.92), transparent 60%), linear-gradient(180deg, #f6f6f8, #e9e9ee) !important; border-color: rgba(0, 0, 0, 0.10); } .case-hero__media--brand .case-hero__image { object-fit: contain; padding: clamp(30px, 5vw, 56px); } /* Adaptive logo (OG): light tile + dark-on-light logo in light mode; warm dark tile + gold-on-dark logo in dark mode — no glaring white box. */ .case-hero__media--logo-adaptive { background: linear-gradient(180deg, #f6f6f8, #e9e9ee) !important; border-color: rgba(0, 0, 0, 0.10); } .case-hero__media--logo-adaptive .case-hero__image { object-fit: contain; padding: clamp(30px, 5vw, 56px); } .case-hero__media--logo-adaptive .logo-dark { display: none; } [data-theme="dark"] .case-hero__media--logo-adaptive { background: radial-gradient(circle at 28% 8%, color-mix(in srgb, var(--case-accent) 26%, transparent), transparent 62%), linear-gradient(180deg, #221c0f, #14110a) !important; border-color: color-mix(in srgb, var(--case-accent) 34%, var(--rule)); } [data-theme="dark"] .case-hero__media--logo-adaptive .logo-light { display: none; } [data-theme="dark"] .case-hero__media--logo-adaptive .logo-dark { display: block; } /* ─────────────────────────── Nix V3 synthesis layer ─────────────────────────── */ .case-hero--nix { align-items: center; } .case-hero__media--phone { max-width: min(320px, 100%); justify-self: center; aspect-ratio: 9 / 16; border-radius: 42px; padding: 0; background: radial-gradient(circle at 52% 0%, color-mix(in srgb, var(--case-accent) 24%, transparent), transparent 48%), color-mix(in srgb, #05070c 94%, var(--case-accent) 6%); box-shadow: 0 34px 70px -38px color-mix(in srgb, var(--case-accent) 56%, transparent), 0 28px 54px -42px #000; overflow: hidden; } .case-hero__media--phone .case-hero__image { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: top center; } .nix-screen-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, .82fr); gap: clamp(14px, 2.4vw, 22px); align-items: start; } .nix-screen { min-width: 0; } .nix-screen img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; object-position: top center; border: 1px solid var(--rule); border-radius: 34px; background: var(--bg-elev); box-shadow: 0 24px 48px -32px color-mix(in srgb, #000 45%, transparent), inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent); transition: transform 320ms cubic-bezier(0.32,0.72,0,1), border-color 320ms cubic-bezier(0.32,0.72,0,1), box-shadow 320ms cubic-bezier(0.32,0.72,0,1); } .nix-screen:hover img { transform: translateY(-2px); border-color: color-mix(in srgb, var(--case-accent) 34%, var(--rule)); box-shadow: 0 26px 54px -30px color-mix(in srgb, var(--case-accent) 34%, transparent), inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent); } .nix-architecture { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--rule); overflow: hidden; } .nix-node { min-width: 0; padding: clamp(18px, 2.6vw, 26px); background: radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--case-accent) 11%, transparent), transparent 42%), color-mix(in srgb, var(--bg-elev) 91%, transparent); } .nix-node span { display: inline-flex; margin-bottom: 18px; color: var(--case-accent); font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .12em; } .nix-node h3 { margin: 0 0 8px; font-size: clamp(18px, 2vw, 24px); letter-spacing: -.025em; } .nix-node p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; } .nix-context-rail { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .nix-context-rail span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--bg-elev) 78%, transparent); font-size: 13px; box-shadow: 0 14px 28px -24px color-mix(in srgb, #000 38%, transparent); } .nix-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 8px 0 18px; } .nix-loop div { min-width: 0; padding: 16px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-elev) 82%, transparent); } .nix-loop strong, .nix-loop span { display: block; } .nix-loop strong { margin-bottom: 8px; color: var(--ink); font-size: 15px; } .nix-loop span { color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; } @media (max-width: 760px) { .nix-screen-grid, .nix-architecture, .nix-loop { grid-template-columns: 1fr; } .case-hero__media--phone { max-width: min(320px, 82vw); } } @media (prefers-reduced-motion: reduce) { .nix-screen img { transition: none; } .nix-screen:hover img { transform: none; } } /* ─────────────────────────── Platform availability row ─────────────────────────── * A clean "streams on" chip row. Used on the OG Network case study to show * the streaming platform is real and multi-device, without forcing busy ad * banners into the layout. Each chip links to the streaming site. */ .case-availability__label { margin: 20px 0 10px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); } .case-availability { display: flex; flex-wrap: wrap; gap: 10px; } .case-availability__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--bg-elev); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; transition: transform 200ms cubic-bezier(0.32,0.72,0,1), border-color 200ms ease, box-shadow 200ms ease, color 200ms ease; } .case-availability__chip .tb-glyph { width: 16px; height: 16px; color: var(--case-accent); } .case-availability__chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--case-accent) 38%, var(--rule)); box-shadow: var(--shadow-2); color: var(--case-accent); } /* ─────────────────────────── Responsive video embed ─────────────────────────── * 16:9 YouTube embed in the same device-framed, accent-shadowed style as * .case-figure. Used on artist case studies to surface one official video * without leaving the page. Lazy-loaded; youtube-nocookie for privacy. */ figure.case-video { margin: 8px 0 0; } .case-video__frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: #000; box-shadow: var(--shadow-2); transition: transform 420ms cubic-bezier(0.32,0.72,0,1), box-shadow 420ms ease, border-color 420ms ease; } .case-video__frame:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--case-accent) 38%, var(--rule)); box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--case-accent) 40%, transparent), var(--shadow-2); } .case-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .case-video figcaption { margin-top: 12px; font-size: 13px; color: var(--ink-mute); text-align: center; } @media (prefers-reduced-motion: reduce) { .case-video__frame { transition: none; } .case-video__frame:hover { transform: none; } } /* ─────────────────────────── Discography list ─────────────────────────── * Compact, scannable release list: year · title (+ note) · role tag. * Used in the artist "the music" section. */ .case-disco { display: grid; gap: 0; margin-top: 8px; } .case-disco__item { display: grid; grid-template-columns: 58px 1fr auto; gap: 16px; align-items: baseline; padding: 15px 4px; border-bottom: 1px solid var(--rule); } .case-disco__item:last-child { border-bottom: 0; } .case-disco__year { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; font-weight: 700; color: var(--case-accent); letter-spacing: 0.02em; } .case-disco__title { color: var(--ink); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; } .case-disco__title span { display: block; font-weight: 400; font-size: 13px; color: var(--ink-mute); margin-top: 3px; line-height: 1.45; } .case-disco__tag { font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap; font-family: var(--font-mono, ui-monospace, monospace); } @media (max-width: 560px) { .case-disco__item { grid-template-columns: 48px 1fr; } .case-disco__tag { grid-column: 2; margin-top: 4px; } } /* ─────────────────────────── Roster logo wall ─────────────────────────── * A grid of artist wordmarks (pure-black transparent PNG/WEBP). Black reads * on the light theme as-is; inverted to white for dark. Used on the Strange * Music case study to show the roster's scale without a busy photo collage. */ .case-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; } .case-roster__cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 3; padding: 18px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-elev); transition: transform 280ms cubic-bezier(0.32,0.72,0,1), border-color 280ms ease, box-shadow 280ms ease, background 280ms ease; } .case-roster__cell img { max-width: 100%; max-height: 54px; width: auto; height: auto; object-fit: contain; opacity: .8; transition: opacity 280ms ease, filter 280ms ease; } [data-theme="dark"] .case-roster__cell img { filter: invert(1) brightness(1.85); opacity: .72; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .case-roster__cell img { filter: invert(1) brightness(1.85); opacity: .72; } } .case-roster__cell:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--case-accent) 45%, var(--rule)); box-shadow: 0 18px 38px -22px color-mix(in srgb, var(--case-accent) 50%, transparent), var(--shadow-1); background: color-mix(in srgb, var(--case-accent) 6%, var(--bg-elev)); } .case-roster__cell:hover img { opacity: 1; } .case-roster__cell--label { background: color-mix(in srgb, var(--case-accent) 9%, var(--bg-elev)); border-color: color-mix(in srgb, var(--case-accent) 30%, var(--rule)); } @media (prefers-reduced-motion: reduce) { .case-roster__cell { transition: none; } .case-roster__cell:hover { transform: none; } } /* ─────────────────────────── Photo gallery grid ─────────────────────────── * Responsive image grid with cover-fit tiles, accent hover lift + zoom. * Used on the Soundstage case study to show real production photography. */ .case-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; } .case-gallery__item { display: block; position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--rule); box-shadow: var(--shadow-1); aspect-ratio: 3 / 2; background: var(--bg-elev); transition: transform 380ms cubic-bezier(0.32,0.72,0,1), box-shadow 380ms ease, border-color 380ms ease; } .case-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.32,0.72,0,1); } .case-gallery__item:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--case-accent) 40%, var(--rule)); box-shadow: 0 22px 44px -24px color-mix(in srgb, var(--case-accent) 45%, transparent), var(--shadow-2); } .case-gallery__item:hover img { transform: scale(1.05); } .case-gallery__item--wide { grid-column: span 2; aspect-ratio: 2 / 1; } @media (max-width: 560px) { .case-gallery__item--wide { grid-column: auto; aspect-ratio: 3 / 2; } } @media (prefers-reduced-motion: reduce) { .case-gallery__item, .case-gallery__item img { transition: none; } .case-gallery__item:hover { transform: none; } .case-gallery__item:hover img { transform: none; } } /* ─────────────────────────── Live data panel ─────────────────────────── * Real-time stat band fed by a same-origin API (e.g. /api/fleet.php on S.A.M). * Pulsing LIVE dot + relative "updated" time. The unfakeable flex. */ .case-live { margin-top: 8px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--bg-elev); box-shadow: var(--shadow-1); overflow: hidden; } .case-live__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--ink-mute); } .case-live__pulse { width: 9px; height: 9px; border-radius: 50%; background: #8e8e93; flex: 0 0 auto; } .case-live.is-live .case-live__pulse { background: #34c759; animation: case-pulse 2s infinite; } @keyframes case-pulse { 0% { box-shadow: 0 0 0 0 rgba(52,199,89,.5); } 70% { box-shadow: 0 0 0 9px rgba(52,199,89,0); } 100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); } } .case-live__status { font-weight: 600; color: var(--ink); } .case-live.is-live .case-live__status { color: #2ba84a; } .case-live__time { margin-left: auto; font-variant-numeric: tabular-nums; } .case-live__stats { display: grid; grid-template-columns: repeat(4, 1fr); } .case-live__stat { padding: 22px 18px; text-align: center; border-right: 1px solid var(--rule); } .case-live__stat:last-child { border-right: 0; } .case-live__num { display: block; font-size: clamp(28px, 4vw, 44px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--case-accent); font-variant-numeric: tabular-nums; } .case-live__num small { font-size: 0.5em; font-weight: 600; color: var(--ink-mute); } .case-live__label { display: block; margin-top: 7px; font-size: 12.5px; color: var(--ink-mute); } @media (max-width: 560px) { .case-live__stats { grid-template-columns: repeat(2, 1fr); } .case-live__stat:nth-child(2) { border-right: 0; } .case-live__stat:nth-child(1), .case-live__stat:nth-child(2) { border-bottom: 1px solid var(--rule); } } @media (prefers-reduced-motion: reduce) { .case-live.is-live .case-live__pulse { animation: none; } } /* ─────────────────────────── Related projects rail ─────────────────────────── * Cross-sell rail at the foot of each case study. */ .case-related { margin-top: clamp(36px, 5vw, 56px); } .case-related__label { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 16px; } .case-related__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .case-related__rail::-webkit-scrollbar { display: none; } .case-related__card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--bg-elev); text-decoration: none; color: var(--ink); transition: transform 280ms cubic-bezier(0.32,0.72,0,1), border-color 240ms ease, box-shadow 240ms ease; } .case-related__card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--case-accent) 40%, var(--rule)); box-shadow: 0 18px 38px -24px color-mix(in srgb, var(--case-accent) 45%, transparent), var(--shadow-1); } .case-related__kicker { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--case-accent); } .case-related__name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .case-related__desc { font-size: 13px; color: var(--ink-soft); line-height: 1.45; } /* ─────────────────────────── Lightbox ─────────────────────────── */ .case-lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 4vw; background: color-mix(in srgb, #000 86%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 260ms ease; } .case-lightbox.is-open { display: flex; opacity: 1; } .case-lightbox img { max-width: 100%; max-height: 92vh; border-radius: var(--radius-lg); box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); } .case-lightbox__close { position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; cursor: pointer; } .case-gallery__item { cursor: zoom-in; } /* ─────────────────────────── Next / CTA band ─────────────────────────── */ .case-cta { margin-top: clamp(36px, 5vw, 56px); padding: clamp(28px, 4vw, 40px); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: radial-gradient(circle at 12% 0%, var(--case-accent-soft), transparent 46%), var(--bg-elev); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; } .case-cta h2 { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.02em; } .case-cta p { margin: 0; color: var(--ink-soft); font-size: 15px; } .case-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; } /* ─────────────────────────── Reveal (matches site .reveal IO) ─────────────────────────── */ .case-section.reveal, .case-factbar.reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms cubic-bezier(0.32,0.72,0,1); } .case-section.reveal.is-in, .case-factbar.reveal.is-in { opacity: 1; transform: none; } /* ─────────────────────────── Responsive ─────────────────────────── */ @media (max-width: 960px) { .case-layout { grid-template-columns: 1fr; } .case-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); overflow-x: auto; } .case-toc__label { display: none; } .case-toc a { border-left: 0; padding: 6px 11px; font-size: 12.5px; background: color-mix(in srgb, var(--ink) 4%, transparent); } .case-toc a.is-active { border-left: 0; } .case-stack__group { grid-template-columns: 1fr; gap: 8px; } } @media (max-width: 540px) { .case-factbar { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { .case-section.reveal, .case-factbar.reveal { opacity: 1; transform: none; transition: none; } .case-card, .case-trust__metric, .case-trust__button { transition: none; } .case-card:hover, .case-trust__metric:hover, .case-trust__button:hover { transform: none; } }