/* ========================================================= CASE STUDY (v2) — LAYOUT ONLY, on top of the home's type system. No new font sizes: all text reuses .display-xl/.display-l/.display-m, the base body size, .lead and .label from styles.css. ========================================================= */ .cs2 { width: 100%; padding-inline: var(--gutter); } .cs2-section { position: relative; padding: var(--sp-section) 0; } .bleed { margin-inline: calc(-1 * var(--gutter)); } /* ---- hero ---- */ .cs2-hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: 120px var(--gutter) 48px; overflow: hidden; } .cs2-hero__top { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .cs2-hero__mid { margin: auto 0; } .cs2-hero__sub { margin-top: clamp(16px, 3vh, 30px); max-width: 34ch; } .cs2-hero__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; } .cs2-hero__cta { display: inline-flex; gap: 10px; align-items: center; } .cs2-hero__cta .arrow { display: inline-block; animation: bob 1.9s var(--ease) infinite; } /* text tokens inherit the per-section foreground (morphed by JS) so they stay legible on both dark and light sections — one size system, adaptive colour */ /* labels adapt to the per-section foreground; 70% keeps small mono labels above WCAG AA on the light sections too */ .cs2-page .label { color: color-mix(in srgb, currentColor 70%, transparent); } .cs2-page .lead { color: color-mix(in srgb, currentColor 82%, transparent); max-width: 42ch; } /* ---- autoplay media hero (intro video, plays on entry, pausable) ---- */ .cs2-hero.has-media, .ona-hero.has-media { position: relative; } .hero-media { position: absolute; inset: 0; z-index: 0; background: #14120e; overflow: hidden; } .hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,8,7,0.55) 0%, rgba(8,8,7,0.12) 38%, rgba(8,8,7,0.66) 100%); } /* hero content sits above the video; transparent areas let hover reach the video for its controls */ .cs2-hero.has-media > :not(.hero-media), .ona-hero.has-media > :not(.hero-media) { position: relative; z-index: 1; pointer-events: none; } .cs2-hero.has-media a, .cs2-hero.has-media button, .ona-hero.has-media a, .ona-hero.has-media button { pointer-events: auto; } /* ---- Work dropdown (project pages: hover Work to jump between projects) ---- */ /* lives on (outside the blend-mode nav) so the panel stays solid */ .work-dd { position: fixed; z-index: 70; transform: translate(-50%, -6px); min-width: 232px; display: flex; flex-direction: column; padding: 4px 0; background: #efe8dc; color: #111; border-radius: 3px; box-shadow: 0 24px 70px rgba(23,20,15,0.32); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s; } .work-dd::before { content: ""; position: absolute; left: -12px; right: -12px; top: -22px; height: 24px; } .work-dd.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .work-dd__item { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 7px 18px; font-size: 12.5px; line-height: 1.2; color: #6b6152; border-bottom: 1px solid rgba(17,17,16,0.07); transition: color 0.2s var(--ease); } .work-dd__item:last-child { border-bottom: 0; } .work-dd__item:hover { color: #b35b4a; } .work-dd__item.is-current { color: #111; } .work-dd__item .work-dd__idx { font-family: var(--font-mono); font-size: 9.5px; color: #93897a; } @media (hover: none), (max-width: 860px) { .work-dd { display: none; } } /* ---- showcase hero: title | media | meta, media grows on scroll ---- */ .cs2-showcase { position: relative; padding-inline: var(--gutter); } .cs2-showcase__sticky { padding-block: clamp(90px, 13vh, 148px) clamp(36px, 6vh, 72px); } .cs2-showcase__row { display: grid; grid-template-columns: 1.25fr minmax(0, 2.7fr) 1.05fr; gap: clamp(20px, 2.8vw, 52px); align-items: center; } .cs2-showcase__side { align-self: center; } .cs2-showcase__lead { margin: clamp(16px, 2.4vh, 26px) 0 0; max-width: 30ch; color: color-mix(in srgb, currentColor 76%, transparent); } .cs2-showcase__meta { display: flex; flex-direction: column; gap: clamp(16px, 2.6vh, 28px); text-align: right; align-self: center; } .cs2-showcase__meta dt { margin-bottom: 7px; color: color-mix(in srgb, currentColor 55%, transparent); } .cs2-showcase__meta dd { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; } .cs2-showcase__media { position: relative; overflow: hidden; transform-origin: center center; will-change: transform; } .cs2-showcase__media video, .cs2-showcase__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; outline: none; background: rgba(127,127,127,0.12); } .cs2-showcase__foot { display: flex; justify-content: center; align-items: center; margin-top: clamp(28px, 5vh, 56px); } .cs2-showcase__scroll { display: inline-flex; align-items: center; gap: 9px; color: color-mix(in srgb, currentColor 62%, transparent); transition: color 0.3s var(--ease); } .cs2-showcase__scroll:hover { color: currentColor; } .cs2-showcase__scroll .arrow { display: inline-block; animation: bob 1.9s var(--ease) infinite; } /* desktop: the composition holds (sticky) while the media grows on scroll — visible, no scroll-jacking */ @media (min-width: 861px) { /* contained hero — title / video / meta always visible (robust, no scroll-dependent reveal) */ .cs2-showcase__row { grid-template-columns: 1fr minmax(0, 3.2fr) 1fr; } .cs2-showcase__sticky { min-height: 84vh; display: flex; flex-direction: column; justify-content: center; } } @media (max-width: 860px) { .cs2-showcase__row { grid-template-columns: 1fr; gap: clamp(18px, 4vh, 30px); text-align: left; } .cs2-showcase__side { order: 1; } .cs2-showcase__lead { max-width: 42ch; } .cs2-showcase__media { order: 2; } .cs2-showcase__meta { flex-direction: row; flex-wrap: wrap; gap: 18px 32px; text-align: left; order: 3; } } @media (prefers-reduced-motion: reduce) { .cs2-showcase { min-height: 0; } .cs2-showcase__sticky { position: static; min-height: 0; } .cs2-showcase__media { transform: none; } } /* ---- meta / facts row ---- */ .cs2-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 44px); border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); padding-top: clamp(18px, 3vh, 28px); } .cs2-facts dt { margin-bottom: 8px; opacity: 0.6; } .cs2-facts dd { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; } @media (max-width: 700px) { .cs2-facts { grid-template-columns: 1fr 1fr; gap: 22px; } } /* ---- section head ---- */ .cs2-head { margin-bottom: var(--sp-head); max-width: 60ch; } .cs2-num { display: block; color: var(--accent-ink); margin-bottom: 16px; } /* section heading sits one step below the (locked) hero title: hero = display-l, section = --fs-heading. Scoped to .cs2-head so the hero (.cs2-showcase__title) is never affected. */ .cs2-head h2 { font-size: var(--fs-heading); } /* ---- text ---- */ .cs2-body { max-width: 54ch; } .cs2-lead { max-width: 40ch; } .cs2-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: start; } @media (max-width: 820px) { .cs2-two { grid-template-columns: 1fr; } } /* desktop|mobile pairing — align-items:start so aspect-ratio boxes size from width, not height (prevents the responsive-section horizontal overflow that clipped the mobile mockups) */ .cs2-devices { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-stack); align-items: start; } @media (max-width: 820px) { .cs2-devices { grid-template-columns: 1fr; } } .cs2-statement em { font-style: normal; color: var(--accent); } /* ---- media ---- */ .cs2-cover, .wide { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: rgba(127,127,127,0.12); } .cs2-tall { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: rgba(127,127,127,0.12); } .media-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 30px); } @media (max-width: 700px) { .media-row { grid-template-columns: 1fr; } } .cs2-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 30px); } @media (max-width: 700px) { .cs2-three { grid-template-columns: 1fr; } } /* ---- portrait shot grids (e.g. 4:5 social pieces) ---- */ .cs2-shots { display: grid; gap: clamp(12px, 2vw, 28px); } .cs2-shots--2 { grid-template-columns: repeat(2, 1fr); } .cs2-shots--3 { grid-template-columns: repeat(3, 1fr); } .cs2-shots img, .cs2-shots video { width: 100%; height: 100%; object-fit: cover; display: block; background: rgba(127,127,127,0.1); } .cs2-shots--45 img, .cs2-shots--45 video { aspect-ratio: 4 / 5; } .cs2-shots--23 img, .cs2-shots--23 video { aspect-ratio: 2 / 3; } @media (max-width: 720px) { .cs2-shots--3 { grid-template-columns: 1fr 1fr; } .cs2-shots--2 { grid-template-columns: 1fr; } } /* crossfade cell: two stacked images alternate for a bit of movement */ .cs2-xfade { position: relative; overflow: hidden; } .cs2-shots--45 .cs2-xfade { aspect-ratio: 4 / 5; } .cs2-shots--23 .cs2-xfade { aspect-ratio: 2 / 3; } .cs2-xfade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cs2-xfade img:last-child { animation: cs2xfade 3s ease-in-out infinite; } @keyframes cs2xfade { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cs2-xfade img:last-child { animation: none; opacity: 1; } } figure { margin: 0; } figcaption { margin-top: 12px; } /* ---- asset placeholders (Susanna drops in her own video / mockups) ---- */ .cs2-ph { width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; aspect-ratio: 16 / 9; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); } .cs2-ph--tall { aspect-ratio: 4 / 5; } .cs2-ph--wide { aspect-ratio: 21 / 9; } .cs2-ph__inner { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: clamp(20px, 4vw, 48px); max-width: 46ch; } .cs2-ph__mark { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); color: var(--accent); font-size: 15px; } .cs2-ph__note { color: color-mix(in srgb, currentColor 62%, transparent); } /* ---- what / why / how (the argument of each decision) ---- */ .cs2-wwh { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 52px); } .cs2-wwh > div { border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); padding-top: clamp(14px, 2vh, 22px); } .cs2-wwh .label { color: var(--accent); display: block; margin-bottom: 12px; } .cs2-wwh p { max-width: 42ch; } @media (max-width: 820px) { .cs2-wwh { grid-template-columns: 1fr; } } /* ---- editorial flow (browsing paths / journeys, not a technical diagram) ---- */ .cs2-flow { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(10px, 1.6vw, 24px); } .cs2-flow .sep { color: var(--accent-ink); font-family: var(--font-mono); align-self: center; } /* diagram/process scale — supporting, deliberately below section headings and statements (overrides any .display-m on the node: this rule loads after styles.css) */ .cs2-flow__node { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; font-size: var(--fs-diagram); } /* ---- editorial sitemap / IA index (Conference) — one restrained structure scale ---- */ .cp-map { border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); } .cp-map__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; padding: clamp(11px, 1.5vh, 17px) 0; border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); } .cp-map__node { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; font-size: var(--fs-diagram); } .cp-map__sub { font-size: clamp(0.8rem, 0.9vw, 0.92rem); color: color-mix(in srgb, currentColor 58%, transparent); } .cp-map .sep { color: var(--accent-ink); font-family: var(--font-mono); } .cp-map__note { font-size: clamp(0.82rem, 0.92vw, 0.95rem); line-height: 1.5; max-width: 62ch; color: color-mix(in srgb, currentColor 64%, transparent); } /* ---- stats (real, non-confidential figures) ---- */ .cs2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 56px); } .cs2-stats > div { border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); padding-top: clamp(14px, 2vh, 22px); } .cs2-stats .n { color: var(--accent); } .cs2-stats .l { margin-top: 10px; display: block; } @media (max-width: 700px) { .cs2-stats { grid-template-columns: 1fr; } } /* ---- CTA flow / steps ---- */ .cs2-steps { border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); } .cs2-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: clamp(16px, 3vw, 52px); padding: clamp(24px, 4vh, 44px) 0; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); } .cs2-step__idx { color: var(--accent); align-self: start; padding-top: 0.4em; } .cs2-step__desc { margin-top: 10px; max-width: 52ch; } /* ---- next project ---- */ .cs2-next { min-height: 68vh; display: flex; flex-direction: column; justify-content: center; } .cs2-next__label { color: var(--muted); margin-bottom: 18px; } .cs2-next a { display: inline-flex; align-items: baseline; gap: 0.15em; } .cs2-next a .arrow { font-size: 0.35em; opacity: 0.55; transition: transform 0.5s var(--ease); } .cs2-next a:hover .arrow { transform: translate(0.3em, -0.3em); } /* dark first paint (JS morphs per section after) */ body.cs2-page { background-color: #14120e; color: #efe8dc; } /* small accent text: use the lightened terracotta on dark sections so it clears WCAG AA (the base --accent-ink is the darker terracotta tuned for the light sections) */ [data-bg="17,17,16"] { --accent-ink: #c96f59; } /* small, muted supporting note (e.g. workflow / tools) */ .cs2-note { font-size: clamp(0.85rem, 0.95vw, 0.98rem); line-height: 1.55; max-width: 54ch; color: color-mix(in srgb, currentColor 66%, transparent); } /* ---------- MOBILE: tighten the closing / footer of case-study pages ---------- */ @media (max-width: 560px) { .cs2-next { min-height: auto; } .footer.cs2 { margin-top: clamp(40px, 8vh, 72px); } /* drop the hero "Scroll ↓" cue on project pages — it lands mid-layout on phones */ .cs2-showcase__foot { display: none; } }