/* ───────────────────────────────────────────────────────── Lais Welter — Portfolio Base styles, layout primitives, themes ───────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--clay-font-body); background: var(--lw-canvas); color: var(--clay-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; cursor: auto; overflow-x: hidden; background-image: var(--lw-dots, none); background-size: 32px 32px; background-attachment: fixed; } /* Dotted background — toggled via [data-dots] on */ :root[data-dots] { --lw-dots: radial-gradient( circle at 1.5px 1.5px, rgba(40,45,55,0.18) 1px, transparent 1.2px ); } :root[data-theme="dark"][data-dots] { --lw-dots: radial-gradient( circle at 1.5px 1.5px, rgba(255,250,240,0.14) 1px, transparent 1.2px ); } a { color: inherit; } img { display: block; max-width: 100%; } /* Theme: cream (default) */ :root[data-theme="cream"] { --lw-canvas: #fffaf0; --lw-surface: #f5f0e0; --lw-surface-soft: #faf5e8; --lw-surface-strong: #ebe6d6; --lw-ink: #0a0a0a; --lw-body: #3a3a3a; --lw-muted: #6a6a6a; --lw-hairline: rgba(10,10,10,0.08); --lw-accent: var(--clay-brand-pink); --lw-accent-2: var(--clay-brand-peach); --lw-accent-3: var(--clay-brand-lavender); --lw-accent-4: var(--clay-brand-ochre); --lw-deep: var(--clay-brand-teal); } /* Theme: dark */ :root[data-theme="dark"] { --lw-canvas: #0e1414; --lw-surface: #182020; --lw-surface-soft: #131a1a; --lw-surface-strong: #1f2929; --lw-ink: #fffaf0; --lw-body: #c4cccc; --lw-muted: #8a9494; --lw-hairline: rgba(255,250,240,0.10); --lw-accent: var(--clay-brand-pink); --lw-accent-2: var(--clay-brand-peach); --lw-accent-3: var(--clay-brand-lavender); --lw-accent-4: var(--clay-brand-ochre); --lw-deep: #ffb084; } /* Theme: paper (high contrast) */ :root[data-theme="paper"] { --lw-canvas: #f3ede0; --lw-surface: #e8dfca; --lw-surface-soft: #ede5d2; --lw-surface-strong: #d9ceb3; --lw-ink: #1a1a14; --lw-body: #3a3a32; --lw-muted: #6a6a5e; --lw-hairline: rgba(26,26,20,0.10); --lw-accent: #d9486f; --lw-accent-2: #e89060; --lw-accent-3: #9b87cc; --lw-accent-4: #c9a13e; --lw-deep: #1a3a3a; } /* Accent override (tweakable) */ :root[data-accent="pink"] { --lw-accent: var(--clay-brand-pink); } :root[data-accent="peach"] { --lw-accent: var(--clay-brand-peach); } :root[data-accent="lavender"] { --lw-accent: var(--clay-brand-lavender); } :root[data-accent="ochre"] { --lw-accent: var(--clay-brand-ochre); } :root[data-accent="teal"] { --lw-accent: var(--clay-brand-teal); } :root[data-accent="mint"] { --lw-accent: var(--clay-brand-mint); } /* Smooth theme transitions */ body, .lw-nav, .lw-card, .lw-cta, .lw-stat, .lw-pill { transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease; } /* ─────────── Layout primitives ─────────── */ .lw-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; } @media (max-width: 720px) { .lw-wrap { padding: 0 20px; } } .lw-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--clay-font-body); font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lw-muted); } .lw-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lw-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lw-accent) 18%, transparent); animation: lw-pulse 2.4s ease-in-out infinite; } @keyframes lw-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.7); opacity: 0.5; } } /* ─────────── Nav ─────────── */ .lw-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--lw-canvas) 88%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--lw-hairline); } .lw-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .lw-nav-brand { display: flex; align-items: center; gap: 12px; font-family: var(--clay-font-display); font-weight: 500; font-size: 20px; letter-spacing: -0.5px; text-decoration: none; color: var(--lw-ink); } .lw-nav-brand-mark { width: 36px; height: 36px; display: grid; place-items: center; } .lw-nav-links { display: flex; align-items: center; gap: 28px; } .lw-nav-link { font-size: 14px; font-weight: 500; color: var(--lw-body); text-decoration: none; opacity: 0.85; transition: opacity 0.2s ease; } .lw-nav-link:hover { opacity: 1; } .lw-nav-cta { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 9999px; background: var(--lw-ink); color: var(--lw-canvas); text-decoration: none; font-size: 14px; font-weight: 600; border: 1px solid var(--lw-ink); transition: transform 0.2s ease, background 0.2s ease; } .lw-nav-cta:hover { transform: translateY(-1px); } .lw-nav-cta .arr { transition: transform 0.2s ease; } .lw-nav-cta:hover .arr { transform: translate(3px,-3px); } /* ─────────── Nav right cluster + language toggle ─────────── */ .lw-nav-right { display: flex; align-items: center; gap: 22px; } .lw-lang { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 5px; border-radius: 9999px; border: 1px solid var(--lw-hairline); background: color-mix(in srgb, var(--lw-ink) 4%, transparent); } .lw-lang-opt { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: var(--clay-font-body); font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px; color: var(--lw-body); opacity: 0.6; height: 26px; padding: 0 11px; border-radius: 9999px; transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease; } .lw-lang-opt:hover { opacity: 0.95; } .lw-lang-opt.is-active { background: var(--lw-ink); color: var(--lw-canvas); opacity: 1; } .lw-lang-sep { width: 1px; height: 14px; background: var(--lw-hairline); margin: 0 1px; } /* Case-study nav variant sits on a translucent bar; keep the toggle legible */ .lw-nav--cs .lw-lang { background: color-mix(in srgb, var(--lw-ink) 5%, transparent); } @media (max-width: 720px) { .lw-nav-right { gap: 12px; } .lw-nav-links { display: none; } .lw-lang { height: 34px; } } /* ─────────── Hero ─────────── */ .lw-hero { position: relative; padding: clamp(48px, 8vw, 96px) 0 clamp(32px, 4.5vw, 60px); overflow: hidden; } .lw-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 4vw, 56px); align-items: center; } @media (max-width: 980px) { .lw-hero-grid { grid-template-columns: 1fr; } } .lw-hero-tag { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 9999px; background: color-mix(in srgb, var(--lw-accent) 18%, var(--lw-canvas)); color: var(--lw-ink); font-size: 13px; font-weight: 600; margin-bottom: 24px; border: 1px solid color-mix(in srgb, var(--lw-accent) 35%, transparent); } .lw-hero-tag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lw-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lw-accent) 35%, transparent); } .lw-hero h1 { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(48px, 7.2vw, 96px); line-height: 1.05; letter-spacing: -3px; margin: 0 0 clamp(40px, 4vw, 56px); padding-bottom: 0.28em; color: var(--lw-ink); text-wrap: normal; } html[lang="pt-BR"] .lw-hero h1 { font-size: clamp(42px, 6.2vw, 84px); letter-spacing: -2.5px; } .lw-hero h1 .ital { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; letter-spacing: -2px; color: var(--lw-accent); } .lw-hero-sub { font-size: 18px; line-height: 1.6; color: var(--lw-body); max-width: 540px; margin: 0 0 36px; } .lw-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } .lw-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 9999px; font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .lw-btn-dark { background: var(--lw-ink); color: var(--lw-canvas); } .lw-btn-dark:hover { transform: translateY(-2px); } .lw-btn-ghost { background: transparent; color: var(--lw-ink); border-color: var(--lw-hairline); } .lw-btn-ghost:hover { background: var(--lw-surface-soft); } .lw-btn .arr { display: inline-block; transition: transform 0.25s ease; } .lw-btn:hover .arr { transform: translateX(4px); } .lw-hero-meta { display: flex; gap: 28px; margin-top: 48px; padding-top: 28px; border-top: 1px dashed var(--lw-hairline); flex-wrap: wrap; } .lw-hero-meta-item { display: flex; flex-direction: column; gap: 4px; } .lw-hero-meta-k { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lw-muted); } .lw-hero-meta-v { font-size: 14px; font-weight: 600; color: var(--lw-ink); } /* Signature visual area */ .lw-sig { position: relative; aspect-ratio: 1 / 1.05; max-width: 520px; margin-left: auto; width: 100%; } .lw-sig svg { width: 100%; height: 100%; display: block; } /* ─────────── Marquee ─────────── */ .lw-marquee { border-top: 1px solid var(--lw-hairline); border-bottom: 1px solid var(--lw-hairline); background: var(--lw-surface-soft); overflow: hidden; padding: 20px 0; } .lw-marquee-track { display: flex; gap: 64px; width: max-content; animation: lw-marq 35s linear infinite; align-items: center; } .lw-marquee-item { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -1.5px; color: var(--lw-ink); white-space: nowrap; display: flex; align-items: center; gap: 64px; } .lw-marquee-item .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--lw-accent); flex-shrink: 0; } .lw-marquee-item .ital { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--lw-muted); } @keyframes lw-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ─────────── Stats strip ─────────── */ .lw-stats { padding: 72px 0 24px; } .lw-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--lw-hairline); border-bottom: 1px solid var(--lw-hairline); } @media (max-width: 880px) { .lw-stats-grid { grid-template-columns: repeat(2, 1fr); } } .lw-stat { padding: 36px 28px; border-right: 1px solid var(--lw-hairline); position: relative; } .lw-stat:last-child { border-right: none; } @media (max-width: 880px) { .lw-stat:nth-child(2n) { border-right: none; } .lw-stat:nth-child(-n+2) { border-bottom: 1px solid var(--lw-hairline); } } .lw-stat-k { font-family: var(--clay-font-display); font-weight: 500; font-size: 56px; line-height: 1; letter-spacing: -2.5px; color: var(--lw-ink); display: flex; align-items: baseline; } .lw-stat-k .pct { font-size: 32px; letter-spacing: -1px; margin-left: 2px; color: var(--lw-accent); } .lw-stat-label { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--lw-ink); } .lw-stat-sub { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--lw-muted); } /* ─────────── Section header ─────────── */ .lw-section { padding: clamp(72px, 10vw, 128px) 0; } .lw-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 64px; flex-wrap: wrap; } .lw-section-head h2 { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(40px, 5.4vw, 72px); line-height: 1; letter-spacing: -2.5px; margin: 16px 0 0; color: var(--lw-ink); text-wrap: balance; max-width: 760px; } .lw-section-head h2 .ital { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--lw-accent); } .lw-section-head .right { font-size: 14px; color: var(--lw-muted); max-width: 320px; line-height: 1.55; } /* ─────────── Work cards ─────────── */ .lw-work-list { display: flex; flex-direction: column; gap: 28px; } .lw-work-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 32px; overflow: hidden; background: var(--lw-surface); border: 1px solid var(--lw-hairline); position: relative; } @media (max-width: 980px) { .lw-work-card { grid-template-columns: 1fr; } } .lw-work-card.reverse > .lw-work-media { order: 2; } @media (max-width: 980px) { .lw-work-card.reverse > .lw-work-media { order: 0; } } /* layout: stacked variant (full-bleed image up top, content below) */ .lw-work-list[data-layout="stacked"] .lw-work-card { grid-template-columns: 1fr; } .lw-work-list[data-layout="stacked"] .lw-work-card.reverse > .lw-work-media { order: 0; } .lw-work-list[data-layout="stacked"] .lw-work-media { min-height: 460px; } /* layout: index variant (compact text list, image floats on hover) */ .lw-work-list[data-layout="index"] { border-top: 1px solid var(--lw-hairline); gap: 0; } .lw-work-list[data-layout="index"] .lw-work-card { grid-template-columns: 1fr; border-radius: 0; border: none; border-bottom: 1px solid var(--lw-hairline); background: transparent; } .lw-work-list[data-layout="index"] .lw-work-card.reverse > .lw-work-media { order: 0; } .lw-work-list[data-layout="index"] .lw-work-media, .lw-work-list[data-layout="index"] .lw-work-extras { display: none; } .lw-work-list[data-layout="index"] .lw-work-body { display: grid; grid-template-columns: 64px 1.4fr 1fr auto; gap: 24px; align-items: center; padding: 32px 24px; } .lw-work-list[data-layout="index"] .lw-work-meta-row { display: none; } .lw-work-list[data-layout="index"] .lw-work-pso { display: none; } .lw-work-list[data-layout="index"] .lw-work-title { font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -1.5px; margin: 0; } .lw-work-list[data-layout="index"] .lw-work-summary { font-size: 15px; margin: 0; color: var(--lw-muted); } .lw-work-list[data-layout="index"] .lw-work-num { font-family: var(--clay-font-display); font-weight: 500; font-size: 24px; color: var(--lw-muted); letter-spacing: -0.5px; } .lw-work-list[data-layout="index"] .lw-work-card:hover { background: var(--lw-surface-soft); } .lw-work-media { position: relative; background: var(--lw-surface-strong); min-height: 440px; display: flex; align-items: center; justify-content: center; padding: 36px; overflow: hidden; } .lw-work-media img { width: 100%; height: 100%; object-fit: contain; filter: contrast(1.05) saturate(1.02); } .lw-work-media.tone-pink { background: var(--clay-brand-pink); } .lw-work-media.tone-teal { background: var(--clay-brand-teal); } .lw-work-media.tone-lavender { background: var(--clay-brand-lavender); } .lw-work-media.tone-peach { background: var(--clay-brand-peach); } .lw-work-media.tone-ochre { background: var(--clay-brand-ochre); } .lw-work-media.tone-cream { background: var(--lw-surface-strong); } .lw-work-media.tone-dark { background: #0a1a1a; } .lw-work-media.tone-paper { background: #ede5d2; } .lw-work-media .lw-pill-tone { position: absolute; top: 24px; left: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 9999px; background: rgba(255,255,255,0.92); color: #0a0a0a; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; z-index: 2; } .lw-work-body { padding: 48px 44px 44px; background: var(--lw-canvas); display: flex; flex-direction: column; gap: 20px; } @media (max-width: 980px) { .lw-work-body { padding: 36px 28px; } } .lw-num { font-family: var(--clay-font-display); font-weight: 500; font-size: 20px; letter-spacing: -0.5px; color: var(--lw-muted); } .lw-work-title { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.05; letter-spacing: -1.5px; color: var(--lw-ink); margin: 4px 0 0; text-wrap: balance; } .lw-work-meta-row { display: flex; flex-wrap: wrap; gap: 8px; } .lw-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9999px; background: var(--lw-surface-soft); color: var(--lw-body); font-size: 12px; font-weight: 500; border: 1px solid var(--lw-hairline); } .lw-pill.solid { background: var(--lw-ink); color: var(--lw-canvas); border-color: transparent; } .lw-work-summary { font-size: 16px; line-height: 1.6; color: var(--lw-body); margin: 0; } .lw-work-pso { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 8px; } .lw-pso-row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-top: 1px dashed var(--lw-hairline); } .lw-pso-row:first-child { border-top: none; padding-top: 0; } .lw-pso-k { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lw-muted); padding-top: 3px; } .lw-pso-v { font-size: 14px; line-height: 1.55; color: var(--lw-ink); } .lw-pso-v strong { font-weight: 600; color: var(--lw-accent); } .lw-work-outcomes { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; } .lw-outcome { display: flex; flex-direction: column; padding: 14px 18px; border-radius: 14px; background: var(--lw-surface-soft); border: 1px solid var(--lw-hairline); min-width: 130px; flex: 1; } .lw-outcome-k { font-family: var(--clay-font-display); font-weight: 500; font-size: 28px; line-height: 1; letter-spacing: -1px; color: var(--lw-ink); } .lw-outcome-k .pct, .lw-outcome-k .x { color: var(--lw-accent); } .lw-outcome-label { margin-top: 6px; font-size: 12px; color: var(--lw-muted); line-height: 1.35; } .lw-work-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 44px 44px; background: var(--lw-canvas); } .lw-work-extras-img { border-radius: 16px; overflow: hidden; background: var(--lw-surface-strong); aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; padding: 18px; } .lw-work-extras-img img { width: 100%; height: 100%; object-fit: contain; filter: contrast(1.05) saturate(1.02); } .lw-work-extras-img.tone-pink { background: var(--clay-brand-pink); } .lw-work-extras-img.tone-teal { background: var(--clay-brand-teal); } .lw-work-extras-img.tone-lavender { background: var(--clay-brand-lavender); } .lw-work-extras-img.tone-peach { background: var(--clay-brand-peach); } .lw-work-extras-img.tone-ochre { background: var(--clay-brand-ochre); } .lw-work-extras-img.tone-cream { background: var(--lw-surface-strong); } .lw-work-extras-img.tone-dark { background: #0a1a1a; } .lw-work-extras-img.tone-paper { background: #ede5d2; } @media (max-width: 980px) { .lw-work-extras { padding: 0 28px 28px; grid-template-columns: 1fr; } .lw-work-media { min-height: 320px; padding: 20px; } } /* ─────────── About ─────────── */ .lw-about { background: var(--lw-surface-soft); border-top: 1px solid var(--lw-hairline); border-bottom: 1px solid var(--lw-hairline); } .lw-about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 80px); align-items: start; } @media (max-width: 880px) { .lw-about-grid { grid-template-columns: 1fr; } } .lw-about-portrait { position: relative; aspect-ratio: 4 / 5; border-radius: 32px; overflow: hidden; background: var(--clay-brand-peach); display: flex; align-items: flex-end; justify-content: center; padding: 28px; } .lw-about-portrait .blob { position: absolute; inset: 0; z-index: 0; } .lw-about-portrait .silhouette { position: relative; z-index: 1; width: 82%; } .lw-about-portrait .tag { position: absolute; top: 24px; left: 24px; z-index: 2; background: rgba(255,250,240,0.95); color: var(--clay-ink); padding: 8px 14px; border-radius: 9999px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; } .lw-about-portrait .tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; } .lw-about-body h3 { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -2px; margin: 18px 0 24px; color: var(--lw-ink); text-wrap: balance; } .lw-about-body h3 .ital { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--lw-accent); } .lw-about-body p { font-size: 17px; line-height: 1.65; color: var(--lw-body); margin: 0 0 18px; max-width: 600px; } .lw-philosophy { margin-top: 32px; padding: 24px; border-radius: 20px; background: var(--lw-canvas); border: 1px solid var(--lw-hairline); } .lw-philosophy-q { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.35; color: var(--lw-ink); margin: 0; } .lw-philosophy-q::before { content: "“"; color: var(--lw-accent); font-size: 32px; line-height: 0; vertical-align: -8px; margin-right: 4px; } .lw-philosophy-q::after { content: "”"; color: var(--lw-accent); font-size: 32px; line-height: 0; vertical-align: -8px; margin-left: 2px; } .lw-skills { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } @media (max-width: 600px) { .lw-skills { grid-template-columns: 1fr; } } .lw-skill-group h4 { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lw-muted); margin: 0 0 14px; } .lw-skill-list { display: flex; flex-wrap: wrap; gap: 8px; } .lw-skill { padding: 8px 14px; border-radius: 9999px; background: var(--lw-canvas); border: 1px solid var(--lw-hairline); font-size: 13px; font-weight: 500; color: var(--lw-ink); } .lw-skill.accent { background: var(--lw-accent); color: var(--lw-on-accent, #fff); border-color: transparent; } /* ─────────── CTA / Let's talk ─────────── */ .lw-cta-wrap { padding: clamp(72px, 10vw, 128px) 0; } .lw-cta { position: relative; border-radius: 36px; padding: clamp(40px, 6vw, 80px); background: var(--clay-brand-teal); color: var(--clay-on-dark); overflow: hidden; } .lw-cta::before { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: var(--clay-brand-pink); filter: blur(2px); opacity: 0.95; } .lw-cta::after { content: ""; position: absolute; right: 60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; background: var(--clay-brand-peach); opacity: 0.9; } .lw-cta-inner { position: relative; z-index: 1; max-width: 720px; } .lw-cta-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--clay-on-dark); opacity: 0.85; } .lw-cta-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; } .lw-cta h2 { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(48px, 7vw, 96px); line-height: 0.95; letter-spacing: -3px; margin: 18px 0 28px; color: var(--clay-on-dark); text-wrap: balance; } .lw-cta h2 .ital { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--clay-brand-peach); } .lw-cta p { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.85); margin: 0 0 36px; max-width: 520px; } .lw-cta-buttons { display: flex; gap: 14px; flex-wrap: wrap; } .lw-btn-cream { background: var(--clay-canvas); color: var(--clay-ink); } .lw-btn-cream:hover { transform: translateY(-2px); background: #fff; } .lw-btn-outline { background: transparent; color: var(--clay-on-dark); border-color: rgba(255,250,240,0.5); } .lw-btn-outline:hover { background: rgba(255,250,240,0.1); } /* ─────────── Footer ─────────── */ .lw-foot { border-top: 1px solid var(--lw-hairline); padding: 36px 0 48px; } .lw-foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .lw-foot small { font-size: 13px; color: var(--lw-muted); } .lw-foot-links { display: flex; gap: 20px; } .lw-foot-link { font-size: 13px; color: var(--lw-body); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .lw-foot-link:hover { color: var(--lw-ink); } /* ─────────── Custom cursor ─────────── */ #cursor-dot, #cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; mix-blend-mode: difference; } #cursor-dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); transition: transform 0.12s ease, opacity 0.2s ease, width 0.18s ease, height 0.18s ease; } #cursor-ring { width: 36px; height: 36px; border: 1.5px solid rgba(255,255,255,0.85); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.28s cubic-bezier(.2,.7,.2,1), height 0.28s cubic-bezier(.2,.7,.2,1), opacity 0.28s ease, border-color 0.28s ease, background 0.28s ease; } body.cursor-hover #cursor-ring { width: 64px; height: 64px; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.95); } body.cursor-hover #cursor-dot { width: 4px; height: 4px; } body.cursor-text #cursor-ring { width: 4px; height: 28px; border-radius: 4px; border-width: 0; background: rgba(255,255,255,0.9); } body.cursor-text #cursor-dot { opacity: 0; } @media (hover: none), (pointer: coarse) { body { cursor: auto; } #cursor-dot, #cursor-ring { display: none; } } /* ─────────── Loader ─────────── */ #lw-loader { position: fixed; inset: 0; z-index: 10000; background: var(--lw-canvas); display: grid; place-items: center; transition: opacity 0.6s ease, visibility 0.6s ease; } #lw-loader.done { opacity: 0; visibility: hidden; } .lw-loader-stage { width: min(78vw, 520px); aspect-ratio: 1; position: relative; } .lw-loader-stage svg { width: 100%; height: 100%; display: block; } .lw-loader-cap { position: absolute; bottom: 32px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--lw-muted); display: flex; align-items: center; justify-content: center; gap: 12px; } .lw-loader-bar { width: 160px; height: 2px; background: var(--lw-hairline); border-radius: 2px; overflow: hidden; } .lw-loader-bar i { display: block; height: 100%; width: 0; background: var(--lw-accent); animation: lw-load-fill 2.2s ease forwards; } @keyframes lw-load-fill { to { width: 100%; } } /* ─────────── Reveal on scroll ─────────── */ .lw-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; } .lw-reveal.in { opacity: 1; transform: translateY(0); } /* Case-study reveal: gentle cubic ease + light directional + stagger */ .lw-cs .lw-reveal { transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .lw-cs .lw-cs-twocol-r.lw-reveal { transition-delay: 0.07s; } .lw-cs .lw-cs-ba-cell.lw-reveal { transform: translateY(28px) scale(0.985); } .lw-cs .lw-cs-ba-cell:nth-child(2).lw-reveal { transition-delay: 0.13s; } .lw-cs .lw-cs-ba-cell.lw-reveal.in { transform: translateY(0) scale(1); } .lw-cs .lw-cs-pull.lw-reveal { transform: translateY(14px); } @media (prefers-reduced-motion: reduce) { .lw-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Home page (#top without the .lw-cs case-study class): keep content always visible. The home's scroll-reveal hook can misfire in bundled/iframe contexts (React re-renders strip the imperatively-added .in class), so we guarantee the work / about / contact sections always show. Case studies (#top.lw-cs) keep their scroll-driven reveal animation. */ #top:not(.lw-cs) .lw-reveal { opacity: 1; transform: none; } /* Read-progress bar */ .lw-cs-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 60; background: var(--lw-accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; will-change: transform; } /* Subtle lift on before/after media when hovered */ .lw-cs-ba-media { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease; } .lw-cs-ba-media:hover { transform: translateY(-5px); box-shadow: 0 26px 64px -30px rgba(0, 0, 0, 0.5); } /* ─────────── Tweaks panel scoped tweaks ─────────── */ .lw-acc-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin-right: 6px; border: 1px solid rgba(0,0,0,0.12); } /* ═══════════════════════════════════════════════════════════════════════ RESULTS — editorial stat grid with count-up numbers ═══════════════════════════════════════════════════════════════════════ */ .lw-results { padding: clamp(40px, 6vw, 88px) 0 clamp(28px, 4vw, 56px); } .lw-res-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: clamp(36px, 4vw, 56px); } .lw-res-eyebrow { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; padding: 8px 16px 8px 13px; border-radius: 9999px; background: color-mix(in srgb, var(--lw-accent) 14%, var(--lw-canvas)); border: 1px solid color-mix(in srgb, var(--lw-accent) 32%, transparent); font-family: var(--clay-font-body); font-size: 13px; font-weight: 600; color: var(--lw-ink); } .lw-res-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lw-accent); } .lw-res-heading { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.02; letter-spacing: -1.8px; color: var(--lw-ink); margin: 0; max-width: 18ch; text-wrap: balance; } .lw-res-heading .ital { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; letter-spacing: -1px; color: var(--lw-accent); } .lw-res-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--lw-hairline); border-bottom: 1px solid var(--lw-hairline); } .lw-result { padding: clamp(28px, 2.4vw, 40px) clamp(20px, 1.8vw, 30px); border-right: 1px solid var(--lw-hairline); display: flex; flex-direction: column; } .lw-result:last-child { border-right: none; } .lw-res-num { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(52px, 4.6vw, 72px); line-height: 1; letter-spacing: -3px; color: var(--lw-ink); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; } .lw-res-pct { font-size: 0.56em; letter-spacing: -1px; margin-left: 1px; color: var(--lw-accent); } .lw-res-title { font-family: var(--clay-font-display); font-weight: 600; font-size: 15px; line-height: 1.25; letter-spacing: -0.2px; color: var(--lw-ink); margin-top: clamp(18px, 2vw, 26px); text-wrap: balance; } .lw-res-desc { font-family: var(--clay-font-body); font-size: 13px; line-height: 1.5; color: var(--lw-muted); margin-top: 8px; text-wrap: pretty; } @media (max-width: 880px) { .lw-res-grid { grid-template-columns: repeat(2, 1fr); } .lw-result:nth-child(2n) { border-right: none; } .lw-result:nth-child(-n+2) { border-bottom: 1px solid var(--lw-hairline); } } @media (max-width: 520px) { .lw-res-grid { grid-template-columns: 1fr; } .lw-result { border-right: none; border-bottom: 1px solid var(--lw-hairline); } .lw-result:last-child { border-bottom: none; } } /* ═══════════════════════════════════════════════════════════════════════ REDESIGN — Selected Work as horizontal rows ═══════════════════════════════════════════════════════════════════════ */ .lw-work-home { padding-top: clamp(28px, 3.5vw, 52px); padding-bottom: clamp(56px, 8vw, 96px); } .lw-work-home-title { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(40px, 5.4vw, 72px); line-height: 0.98; letter-spacing: -0.02em; color: var(--lw-ink); margin: 0 0 clamp(40px, 5vw, 72px); } .lw-wrow-list { display: flex; flex-direction: column; gap: clamp(64px, 9vw, 120px); } .lw-wrow { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(28px, 5vw, 72px); align-items: center; } @media (max-width: 980px) { .lw-wrow { grid-template-columns: 1fr; gap: 24px; } } /* alternate rows — image on the left */ .lw-wrow.flip .lw-wrow-body { order: 2; } .lw-wrow.flip .lw-wrow-media { order: 1; } @media (max-width: 980px) { .lw-wrow.flip .lw-wrow-body { order: 0; } .lw-wrow.flip .lw-wrow-media { order: 0; } } .lw-wrow-body { display: flex; flex-direction: column; gap: 18px; max-width: 540px; } .lw-wrow-meta { display: flex; align-items: baseline; gap: 14px; font-family: var(--clay-font-display); font-weight: 500; font-size: 16px; color: var(--lw-muted); letter-spacing: -0.2px; } .lw-wrow-num { color: var(--lw-ink); } .lw-wrow-num em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--lw-muted); margin-left: 4px; } .lw-wrow-year::before { content: "·"; margin-right: 14px; color: var(--lw-muted); } .lw-wrow-client { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(40px, 4.8vw, 64px); line-height: 1; letter-spacing: -2.2px; color: var(--lw-ink); margin: 0; text-wrap: balance; } .lw-wrow-title { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.6px; color: var(--lw-accent); margin: -6px 0 4px; text-wrap: balance; } .lw-wrow-blurb { font-size: 16px; line-height: 1.6; color: var(--lw-body); margin: 0; } .lw-wrow-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .lw-wrow-tag { padding: 7px 13px; border-radius: 9999px; background: transparent; color: var(--lw-body); font-size: 12px; font-weight: 500; border: 1px solid var(--lw-hairline); } .lw-wrow-cta { margin-top: 14px; align-self: flex-start; } .lw-wrow-media { position: relative; display: block; border-radius: 20px; overflow: hidden; background: transparent; text-decoration: none; transition: transform 0.4s cubic-bezier(.2,.7,.2,1); } .lw-wrow-media:hover { transform: translateY(-4px); } .lw-wrow-media img { display: block; width: 100%; height: auto; object-fit: contain; } .lw-wrow-media image-slot { display: block; width: 100%; height: auto; border-radius: 20px; } .lw-wrow-media.tone-pink { background: var(--clay-brand-pink); } .lw-wrow-media.tone-teal { background: var(--clay-brand-teal); } .lw-wrow-media.tone-lavender { background: var(--clay-brand-lavender); } .lw-wrow-media.tone-peach { background: var(--clay-brand-peach); } .lw-wrow-media.tone-ochre { background: var(--clay-brand-ochre); } .lw-wrow-media.tone-cream { background: var(--lw-surface-strong); } .lw-wrow-media.tone-dark { background: #0a1a1a; } .lw-wrow-media.tone-paper { background: #ede5d2; } .lw-wrow-media-tag { position: absolute; top: 20px; left: 20px; padding: 8px 14px; border-radius: 9999px; background: rgba(255,250,240,0.94); color: #0a0a0a; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; z-index: 2; } .lw-wrow-foot { margin-top: clamp(56px, 8vw, 96px); padding: 24px 28px; border-radius: 18px; border: 1px dashed var(--lw-hairline); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .lw-wrow-foot-k { font-family: var(--clay-font-display); font-weight: 500; font-size: 18px; color: var(--lw-ink); letter-spacing: -0.4px; } .lw-wrow-foot-v { font-size: 14px; color: var(--lw-muted); line-height: 1.55; } /* ═══════════════════════════════════════════════════════════════════════ REDESIGN — About portrait (real photo) + capabilities block ═══════════════════════════════════════════════════════════════════════ */ .lw-about-portrait { position: relative; aspect-ratio: 4 / 5; border-radius: 32px; overflow: hidden; background: var(--clay-brand-peach); padding: 0; display: block; } .lw-about-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; } .lw-about-portrait .tag { position: absolute; top: 22px; left: 22px; z-index: 2; background: rgba(255,250,240,0.96); color: var(--clay-ink, #0a0a0a); padding: 8px 14px; border-radius: 9999px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; } .lw-about-portrait .tag i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.18); animation: lw-pulse 2.4s ease-in-out infinite; } .lw-about-portrait-caption { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; padding: 14px 18px; border-radius: 16px; background: rgba(10,10,10,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fffaf0; display: flex; flex-direction: column; gap: 2px; } .lw-about-portrait-caption .k { font-family: var(--clay-font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.4px; } .lw-about-portrait-caption .v { font-size: 12px; opacity: 0.85; } /* Capabilities text-block — replaces the pill grid */ .lw-cap { margin-top: 40px; display: flex; flex-direction: column; } .lw-cap-row { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 22px 0; border-top: 1px dashed var(--lw-hairline); align-items: baseline; } .lw-cap-row:last-child { border-bottom: 1px dashed var(--lw-hairline); } @media (max-width: 600px) { .lw-cap-row { grid-template-columns: 1fr; gap: 8px; } } .lw-cap-k { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--lw-muted); } .lw-cap-v { font-size: 16px; line-height: 1.6; color: var(--lw-body); margin: 0; max-width: 560px; } .lw-cap-v em { font-style: normal; font-weight: 600; color: var(--lw-ink); background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--lw-accent) 35%, transparent) 62%); padding: 0 2px; } /* ═══════════════════════════════════════════════════════════════════════ REDESIGN — Let's talk ═══════════════════════════════════════════════════════════════════════ */ .lw-cta2 { position: relative; border-radius: 32px; padding: clamp(36px, 5vw, 64px); background: var(--lw-surface-soft); border: 1px solid var(--lw-hairline); overflow: hidden; } .lw-cta2-top { display: flex; align-items: center; gap: 18px; margin-bottom: 36px; } .lw-cta2-avatar { position: relative; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--clay-brand-peach); flex-shrink: 0; } .lw-cta2-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; } .lw-cta2-avatar-dot { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 50%; background: #22c55e; border: 3px solid var(--lw-surface-soft); } .lw-cta2-status { display: flex; flex-direction: column; gap: 2px; } .lw-cta2-status-k { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lw-muted); } .lw-cta2-status-v { font-size: 15px; color: var(--lw-ink); font-weight: 500; } .lw-cta2-h { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(40px, 6vw, 84px); line-height: 0.96; letter-spacing: -2.6px; color: var(--lw-ink); margin: 0 0 20px; text-wrap: balance; max-width: 920px; } .lw-cta2-h .ital { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--lw-accent); } .lw-cta2-p { font-size: 17px; line-height: 1.55; color: var(--lw-body); margin: 0 0 36px; max-width: 560px; } .lw-cta2-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-bottom: 28px; } @media (max-width: 880px) { .lw-cta2-grid { grid-template-columns: 1fr; } } .lw-cta2-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; border-radius: 18px; background: var(--lw-canvas); border: 1px solid var(--lw-hairline); color: var(--lw-ink); text-decoration: none; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .lw-cta2-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--lw-accent) 40%, transparent); } .lw-cta2-card .arr { position: absolute; top: 18px; right: 22px; font-size: 18px; color: var(--lw-muted); transition: transform 0.2s ease, color 0.2s ease; } .lw-cta2-card:hover .arr { transform: translate(3px,-3px); color: var(--lw-accent); } .lw-cta2-card-k { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lw-muted); } .lw-cta2-card-v { font-family: var(--clay-font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.8px; color: var(--lw-ink); } .lw-cta2-card--primary { background: var(--lw-ink); color: var(--lw-canvas); border-color: var(--lw-ink); } .lw-cta2-card--primary .lw-cta2-card-k { color: rgba(255,250,240,0.65); } .lw-cta2-card--primary .lw-cta2-card-v { color: var(--lw-canvas); } .lw-cta2-card--primary .arr { color: rgba(255,250,240,0.7); } .lw-cta2-card--primary:hover .arr { color: var(--lw-accent); } .lw-cta2-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px dashed var(--lw-hairline); font-size: 13px; color: var(--lw-muted); flex-wrap: wrap; } .lw-cta2-foot strong { color: var(--lw-ink); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════ CASE STUDY PAGE ═══════════════════════════════════════════════════════════════════════ */ .lw-cs { cursor: default; } .lw-cs body { cursor: auto; } .lw-cs-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; color: var(--lw-muted); text-decoration: none; margin-bottom: 32px; } .lw-cs-back:hover { color: var(--lw-ink); } .lw-cs-back .arr { transition: transform 0.2s ease; } .lw-cs-back:hover .arr { transform: translateX(-4px); } .lw-cs-hero { padding: clamp(48px, 8vw, 96px) 0 0; } .lw-cs-hero-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lw-muted); margin-bottom: 28px; } .lw-cs-hero-meta span + span::before { content: "·"; margin-right: 16px; color: var(--lw-hairline); } .lw-cs-h1 { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(48px, 7vw, 104px); line-height: 1.05; letter-spacing: -3px; margin: 0 0 clamp(40px, 4vw, 60px); padding-bottom: 0.28em; color: var(--lw-ink); text-wrap: normal; max-width: 1040px; } .lw-cs-intro { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.55; color: var(--lw-body); margin: 0 0 56px; max-width: 760px; } .lw-cs-facts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 24px 0; border-top: 1px solid var(--lw-hairline); border-bottom: 1px solid var(--lw-hairline); margin-bottom: clamp(56px, 8vw, 96px); } @media (max-width: 880px) { .lw-cs-facts { grid-template-columns: repeat(2, 1fr); gap: 18px; } } .lw-cs-facts > div { display: flex; flex-direction: column; gap: 6px; padding-right: 18px; border-right: 1px dashed var(--lw-hairline); } .lw-cs-facts > div:last-child { border-right: none; } @media (max-width: 880px) { .lw-cs-facts > div { border-right: none; padding-right: 0; } } .lw-cs-facts .k { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lw-muted); } .lw-cs-facts .v { font-size: 15px; font-weight: 500; color: var(--lw-ink); line-height: 1.4; } .lw-cs-cover { border-radius: 32px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; margin-bottom: clamp(72px, 10vw, 128px); } .lw-cs-cover.tone-pink { background: var(--clay-brand-pink); } .lw-cs-cover.tone-teal { background: var(--clay-brand-teal); } .lw-cs-cover.tone-lavender { background: var(--clay-brand-lavender); } .lw-cs-cover.tone-peach { background: var(--clay-brand-peach); } .lw-cs-cover.tone-ochre { background: var(--clay-brand-ochre); } .lw-cs-cover.tone-cream { background: var(--lw-surface-strong); } .lw-cs-cover.tone-dark { background: #0a1a1a; } .lw-cs-cover.tone-paper { background: #ede5d2; } .lw-cs-cover img { display: block; width: 100%; height: auto; object-fit: contain; } .lw-cs-section { padding: clamp(56px, 8vw, 96px) 0; } .lw-cs-section + .lw-cs-section { padding-top: 0; } .lw-cs-twocol { display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; } @media (max-width: 880px) { .lw-cs-twocol { grid-template-columns: 1fr; } } .lw-cs-twocol-l { position: sticky; top: 96px; } @media (max-width: 880px) { .lw-cs-twocol-l { position: static; } } .lw-cs-h2 { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(32px, 4vw, 52px); line-height: 1; letter-spacing: -2px; margin: 14px 0 0; color: var(--lw-ink); text-wrap: balance; } .lw-cs-h3 { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -1.6px; margin: 14px 0 22px; color: var(--lw-ink); text-wrap: balance; max-width: 800px; } .lw-cs-lede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--lw-body); margin: 0 0 28px; max-width: 720px; } .lw-cs-problems { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; max-width: 720px; } .lw-cs-problems li { display: grid; grid-template-columns: 18px 1fr; gap: 14px; align-items: baseline; padding-bottom: 14px; border-bottom: 1px dashed var(--lw-hairline); font-size: 16px; line-height: 1.5; color: var(--lw-ink); } .lw-cs-problems li:last-child { border-bottom: none; } .lw-cs-problems .bullet { width: 10px; height: 10px; border-radius: 50%; background: var(--lw-accent); transform: translateY(2px); } .lw-cs-process { background: var(--lw-surface-soft); } .lw-cs-steps { display: flex; flex-direction: column; gap: 0; } .lw-cs-step { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--lw-hairline); align-items: baseline; } .lw-cs-step:first-child { border-top: none; padding-top: 0; } .lw-cs-step-num { font-family: var(--clay-font-display); font-weight: 500; font-size: 28px; letter-spacing: -1px; color: var(--lw-accent); } .lw-cs-step-body h4 { font-family: var(--clay-font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.6px; margin: 0 0 8px; color: var(--lw-ink); } .lw-cs-step-body p { font-size: 15px; line-height: 1.55; color: var(--lw-body); margin: 0; } .lw-cs-block { max-width: 1080px; margin: 0 auto; } .lw-cs-block-idx { display: inline-block; font-family: var(--clay-font-display); font-weight: 500; font-size: 14px; letter-spacing: 1.6px; color: var(--lw-muted); padding: 6px 12px; border: 1px solid var(--lw-hairline); border-radius: 9999px; } .lw-cs-block-body { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--lw-body); margin: 0 0 36px; max-width: 760px; } .lw-cs-shot { border-radius: 28px; overflow: hidden; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; } .lw-cs-shot.tone-pink { background: var(--clay-brand-pink); } .lw-cs-shot.tone-teal { background: var(--clay-brand-teal); } .lw-cs-shot.tone-lavender { background: var(--clay-brand-lavender); } .lw-cs-shot.tone-peach { background: var(--clay-brand-peach); } .lw-cs-shot.tone-ochre { background: var(--clay-brand-ochre); } .lw-cs-shot.tone-cream { background: var(--lw-surface-strong); } .lw-cs-shot.tone-dark { background: #0a1a1a; } .lw-cs-shot.tone-paper { background: #ede5d2; } .lw-cs-shot img { display: block; width: 100%; height: auto; object-fit: contain; } .lw-cs-outcomes-wrap { background: var(--lw-canvas); } .lw-cs-outcomes-wrap .lw-eyebrow + .lw-cs-h2 { margin-bottom: 36px; } .lw-cs-outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 56px; } @media (max-width: 880px) { .lw-cs-outcomes { grid-template-columns: repeat(2, 1fr); } } .lw-cs-outcome { padding: 24px 22px; border-radius: 18px; background: var(--lw-surface-soft); border: 1px solid var(--lw-hairline); } .lw-cs-outcome-k { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -2px; color: var(--lw-accent); } .lw-cs-outcome-label { margin-top: 14px; font-size: 14px; line-height: 1.4; color: var(--lw-ink); font-weight: 500; } .lw-cs-outcome-label .sub { color: var(--lw-muted); font-weight: 400; font-size: 12px; } .lw-cs-quote { margin: 0; padding: 36px; border-radius: 24px; border: 1px solid var(--lw-hairline); background: var(--lw-canvas); max-width: 880px; } .lw-cs-quote blockquote { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; color: var(--lw-ink); margin: 0 0 18px; text-wrap: balance; } .lw-cs-quote figcaption { font-size: 13px; color: var(--lw-muted); font-weight: 500; letter-spacing: 0.2px; } .lw-cs-next-card { padding: clamp(36px, 5vw, 64px); border-radius: 28px; background: var(--lw-surface-soft); border: 1px solid var(--lw-hairline); display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 4vw, 56px); align-items: center; } @media (max-width: 820px) { .lw-cs-next-card { grid-template-columns: 1fr; } } .lw-cs-next-media { display: block; border-radius: 20px; overflow: hidden; background: var(--lw-surface-strong); transition: transform 0.4s cubic-bezier(.2,.7,.2,1); } .lw-cs-next-media:hover { transform: translateY(-4px); } .lw-cs-next-media.tone-dark { background: #0a1a1a; } .lw-cs-next-media.tone-peach { background: var(--clay-brand-peach); } .lw-cs-next-media.tone-lavender { background: var(--clay-brand-lavender); } .lw-cs-next-media.tone-cream { background: var(--lw-surface-strong); } .lw-cs-next-media img { display: block; width: 100%; height: auto; object-fit: contain; } .lw-cs-next-media image-slot { display: block; width: 100%; height: auto; border-radius: 20px; } .lw-cs-next-card .lw-cs-h2 a { text-decoration: none; color: inherit; } .lw-cs-next-card .lw-cs-h2 a:hover { color: var(--lw-accent); } .lw-cs-next-row { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; } /* ─────────── Case study: rich narrative chapters ─────────── */ /* Headline outcome strip — sits right under the cover */ .lw-cs-headline-wrap { padding: 0 0 clamp(56px, 7vw, 96px); } .lw-cs-headline { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; padding: clamp(36px, 5vw, 60px) clamp(36px, 5vw, 64px); border-radius: 32px; background: #0a1a1a; color: var(--clay-on-dark); overflow: hidden; isolation: isolate; } .lw-cs-headline::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 92% 18%, rgba(255,77,139,0.22), transparent 55%), radial-gradient(circle at 8% 92%, rgba(184,164,237,0.18), transparent 55%); z-index: -1; } @media (max-width: 780px) { .lw-cs-headline { grid-template-columns: 1fr; gap: 24px; } } .lw-cs-headline-l { display: flex; flex-direction: column; gap: 14px; } .lw-cs-headline-label { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; margin: 0; color: rgba(255,250,240,0.88); max-width: 480px; text-wrap: pretty; } .lw-cs-headline-r { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 12px; } @media (max-width: 780px) { .lw-cs-headline-r { align-items: flex-start; } } .lw-cs-headline-figure { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(96px, 14vw, 180px); line-height: 0.9; letter-spacing: -6px; color: var(--clay-brand-pink); } .lw-cs-headline-arrow { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(16px, 1.6vw, 20px); letter-spacing: 0.4px; color: rgba(255,250,240,0.7); white-space: nowrap; } .lw-eyebrow--onDark { color: rgba(255,250,240,0.65); } .lw-cs-h2--onDark { color: var(--clay-on-dark); } /* Chapters wrapper + chapter section */ .lw-cs-chapters { background: var(--lw-canvas); } .lw-cs-chapter { padding: clamp(64px, 8vw, 112px) 0; border-top: 1px dashed var(--lw-hairline); } .lw-cs-chapter:first-child { border-top: none; } .lw-cs-chapter-num { display: inline-block; font-family: var(--clay-font-display); font-weight: 500; font-size: 18px; color: var(--lw-accent); letter-spacing: -0.5px; margin-bottom: 6px; } .lw-cs-chapter .lw-eyebrow { display: block; margin-bottom: 14px; } /* Paragraph utilities */ .lw-cs-para { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.7; color: var(--lw-body); margin: 0 0 18px; max-width: 720px; text-wrap: pretty; } .lw-cs-para:last-child { margin-bottom: 0; } .lw-cs-para--strong { color: var(--lw-ink); font-weight: 500; font-size: clamp(17px, 1.45vw, 19px); } .lw-cs-para--muted { color: var(--lw-muted); font-style: italic; font-size: 15px; } .lw-cs-lede + .lw-cs-para, .lw-cs-lede + .lw-cs-bullets { margin-top: 22px; } /* Intersection tags (Business Context chapter) */ .lw-cs-intersection { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 4px; } .lw-cs-intersection-tag { padding: 8px 16px; border-radius: 9999px; background: var(--lw-surface-soft); border: 1px solid var(--lw-hairline); font-size: 13px; font-weight: 500; letter-spacing: 0.2px; color: var(--lw-ink); } /* Generic bullet list (research patterns) */ .lw-cs-bullets { list-style: none; padding: 0; margin: 22px 0; display: flex; flex-direction: column; border-top: 1px solid var(--lw-hairline); } .lw-cs-bullets li { display: grid; grid-template-columns: 36px 1fr; gap: 18px; padding: 16px 0; align-items: baseline; border-bottom: 1px solid var(--lw-hairline); font-size: 16px; line-height: 1.55; color: var(--lw-ink); } .lw-cs-bullets .bullet { display: inline-flex; align-items: center; justify-content: flex-start; width: auto; height: auto; border-radius: 0; background: none; transform: none; font-family: var(--clay-font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.5px; color: var(--lw-accent); font-variant-numeric: tabular-nums; } /* Risk list — same shape, tinted */ .lw-cs-risks { margin: 22px 0 8px; } .lw-cs-risks-intro { font-size: 15px; letter-spacing: 0.2px; color: var(--lw-muted); margin: 0 0 10px; text-transform: none; } .lw-cs-bullets--risk .bullet { color: var(--clay-brand-pink); } /* Section body — multi-paragraph + subheadings */ .lw-cs-block-body-flow { display: flex; flex-direction: column; gap: 14px; max-width: 720px; } .lw-cs-block-body-flow .lw-cs-block-body { margin: 0; } .lw-cs-block-subhead { font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -0.5px; color: var(--lw-ink); margin: 14px 0 -4px; text-wrap: balance; } /* Constraints — Who / What they wanted */ .lw-cs-constraints { margin: 22px 0; border-top: 1px solid var(--lw-hairline); } .lw-cs-constraint { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--lw-hairline); align-items: baseline; } @media (max-width: 600px) { .lw-cs-constraint { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; } } .lw-cs-constraint-who { font-family: var(--clay-font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.5px; color: var(--lw-ink); } .lw-cs-constraint-want { font-size: 15.5px; line-height: 1.55; color: var(--lw-body); } /* Strategic option cards */ .lw-cs-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 8px; } @media (max-width: 880px) { .lw-cs-options { grid-template-columns: 1fr; } } .lw-cs-option { padding: 22px; border-radius: 18px; background: var(--lw-surface-soft); border: 1px solid var(--lw-hairline); display: flex; flex-direction: column; gap: 10px; opacity: 0.7; transition: opacity 0.2s ease; } .lw-cs-option.is-picked { background: var(--clay-brand-teal); color: var(--clay-on-dark); border-color: transparent; opacity: 1; box-shadow: 0 10px 30px rgba(10,26,26,0.18); } .lw-cs-option-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .lw-cs-option-tag { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lw-muted); } .lw-cs-option.is-picked .lw-cs-option-tag { color: rgba(255,250,240,0.55); } .lw-cs-option-badge { padding: 4px 10px; border-radius: 9999px; background: var(--clay-brand-pink); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; } .lw-cs-option-title { font-family: var(--clay-font-display); font-weight: 500; font-size: 19px; line-height: 1.2; letter-spacing: -0.5px; margin: 0; color: inherit; text-wrap: balance; } .lw-cs-option-body { font-size: 14px; line-height: 1.55; margin: 0; color: var(--lw-body); } .lw-cs-option.is-picked .lw-cs-option-body { color: rgba(255,250,240,0.82); } /* Pull quote inside a chapter */ .lw-cs-pull { position: relative; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--lw-hairline); font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; color: var(--lw-ink); max-width: 640px; text-wrap: balance; } .lw-cs-pull-mark { font-family: 'Instrument Serif', serif; font-style: italic; color: var(--lw-accent); font-size: clamp(40px, 4vw, 56px); line-height: 0; vertical-align: -10px; margin-right: 6px; } /* Learnings — dark contrast block */ .lw-cs-learnings-wrap { padding: clamp(56px, 8vw, 96px) 0; } .lw-cs-learnings { position: relative; padding: clamp(40px, 6vw, 72px); border-radius: 32px; background: #0a1a1a; color: var(--clay-on-dark); overflow: hidden; isolation: isolate; } .lw-cs-learnings::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 10% 100%, rgba(232,185,74,0.18), transparent 50%), radial-gradient(circle at 95% 0%, rgba(255,176,132,0.12), transparent 55%); z-index: -1; } .lw-cs-learnings .lw-cs-h2 { margin: 12px 0 28px; max-width: 880px; } .lw-cs-learnings-body { max-width: 760px; display: flex; flex-direction: column; gap: 0; } .lw-cs-learnings-body .lw-cs-para { color: rgba(255,250,240,0.85); font-size: clamp(16px, 1.4vw, 18px); } .lw-cs-learnings-body .lw-cs-para:last-child { color: var(--clay-on-dark); } /* Reflection — quiet closing band */ .lw-cs-reflection-wrap { background: var(--lw-surface-soft); } .lw-cs-reflection { max-width: 920px; } .lw-cs-reflection .lw-cs-h2 { margin: 12px 0 28px; } .lw-cs-reflection-body .lw-cs-para { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; max-width: 760px; } .lw-cs-reflection-body .lw-cs-para:first-child { font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.35; color: var(--lw-ink); margin-bottom: 22px; } /* ─────────── Case study image slots (image-slot web component) ─────────── */ .lw-cs-cover image-slot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; margin: 0; } .lw-cs-shot image-slot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; } .lw-cs-slot { margin: 28px 0 8px; border-radius: 20px; overflow: hidden; background: transparent; border: none; } .lw-cs-slot image-slot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; } /* ─────────── Case study TOC sidebar ─────────── */ .lw-cs-toc { position: fixed; top: 50%; right: 28px; transform: translateY(-50%); z-index: 40; display: none; background: color-mix(in srgb, var(--lw-canvas) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--lw-hairline); border-radius: 20px; padding: 18px 16px 18px 18px; width: 240px; max-height: calc(100vh - 140px); overflow-y: auto; box-shadow: 0 18px 48px -24px rgba(10,10,10,0.18); } @media (min-width: 1280px) { .lw-cs-toc { display: block; } .lw-cs-toc-toggle { display: none !important; } } .lw-cs-toc-headrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--lw-hairline); } .lw-cs-toc-head { display: block; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--lw-muted); margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .lw-cs-toc-collapse { appearance: none; border: none; background: none; cursor: pointer; color: var(--lw-muted); font-size: 18px; line-height: 1; padding: 2px 4px; border-radius: 6px; transition: color 0.15s ease, background 0.15s ease; } .lw-cs-toc-collapse:hover { color: var(--lw-ink); background: color-mix(in srgb, var(--lw-ink) 6%, transparent); } .lw-cs-toc-mini { position: fixed; top: 50%; right: 28px; transform: translateY(-50%); z-index: 40; display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--lw-hairline); background: color-mix(in srgb, var(--lw-canvas) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 18px 48px -24px rgba(10,10,10,0.18); cursor: pointer; } .lw-cs-toc-mini.cs-toc-left { right: auto; left: 28px; } @media (min-width: 1280px) { .lw-cs-toc-mini { display: flex; } } .lw-cs-toc-mini .dots { display: inline-flex; flex-direction: column; gap: 3px; } .lw-cs-toc-mini .dots span { width: 14px; height: 2px; border-radius: 1px; background: var(--lw-ink); } .lw-cs-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .lw-cs-toc-list li a { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: baseline; padding: 8px 6px; border-radius: 8px; text-decoration: none; color: var(--lw-muted); font-size: 13px; line-height: 1.35; letter-spacing: 0.1px; transition: color 0.15s ease, background 0.15s ease; } .lw-cs-toc-list li a:hover { color: var(--lw-ink); background: color-mix(in srgb, var(--lw-ink) 4%, transparent); } .lw-cs-toc-list li.is-active a { color: var(--lw-ink); font-weight: 600; } .lw-cs-toc-num { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 14px; color: var(--lw-accent); letter-spacing: 0; } .lw-cs-toc-list li.is-active .lw-cs-toc-num { color: var(--lw-accent); } .lw-cs-toc-label { text-transform: capitalize; text-wrap: balance; } /* Mobile / narrow viewports: small floating toggle that opens the TOC as a drawer */ .lw-cs-toc-toggle { position: fixed; right: 18px; bottom: 24px; z-index: 41; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 12px; background: var(--lw-ink); color: var(--lw-canvas); border: 0; border-radius: 9999px; font-family: var(--clay-font-display, 'Outfit', sans-serif); font-weight: 500; font-size: 13px; letter-spacing: 0.4px; box-shadow: 0 14px 28px -12px rgba(10,10,10,0.4); cursor: pointer; } .lw-cs-toc-toggle .dots { display: inline-flex; flex-direction: column; gap: 3px; } .lw-cs-toc-toggle .dots span { width: 14px; height: 2px; background: var(--lw-canvas); border-radius: 2px; } @media (max-width: 1279px) { .lw-cs-toc { display: none; position: fixed; right: 18px; bottom: 88px; left: auto; top: auto; transform: none; width: min(280px, calc(100vw - 36px)); max-height: 60vh; } .lw-cs-toc.is-open { display: block; } } /* Hide TOC entirely in print */ @media print { .lw-cs-toc, .lw-cs-toc-toggle { display: none !important; } } /* ─────────── Case bullets — variant treatments ─────────── */ /* Default 'numbered' style is already defined in .lw-cs-bullets above. Each variant below overrides layout + bullet rendering. */ /* ── Variant: stickers (clay chip pills, tilted, brand palette) ── */ .lw-cs-bullets--stickers { list-style: none; margin: 22px 0 8px; padding: 0; border-top: 0; display: flex; flex-wrap: wrap; gap: 12px; } .lw-cs-bullets--stickers li { display: inline-flex; align-items: center; gap: 0; padding: 11px 18px; border-radius: 9999px; background: var(--clay-brand-peach); color: var(--lw-ink); font-size: 14px; font-weight: 500; letter-spacing: 0.2px; border: 0; line-height: 1.3; box-shadow: 0 10px 22px -14px rgba(10,10,10,0.35); transform-origin: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .lw-cs-bullets--stickers li:hover { transform: translateY(-2px) rotate(0deg) !important; box-shadow: 0 14px 28px -14px rgba(10,10,10,0.4); } .lw-cs-bullets--stickers li:nth-child(5n+1) { background: var(--clay-brand-peach); transform: rotate(-2deg); } .lw-cs-bullets--stickers li:nth-child(5n+2) { background: var(--clay-brand-lavender); transform: rotate(1.5deg); } .lw-cs-bullets--stickers li:nth-child(5n+3) { background: var(--clay-brand-ochre); transform: rotate(-1deg); } .lw-cs-bullets--stickers li:nth-child(5n+4) { background: var(--clay-brand-pink); color: #fff; transform: rotate(2deg); } .lw-cs-bullets--stickers li:nth-child(5n+5) { background: #f5ead8; transform: rotate(-1.5deg); } .lw-cs-bullets--stickers .bullet { display: none; } /* Risk variant of stickers — all pink */ .lw-cs-bullets--stickers.lw-cs-bullets--risk li { background: var(--clay-brand-pink); color: #fff; } /* ── Variant: stepper (vertical timeline with dotted connector) ── */ .lw-cs-bullets--stepper { list-style: none; margin: 22px 0 8px; padding: 0 0 0 4px; border-top: 0; position: relative; display: flex; flex-direction: column; gap: 0; } .lw-cs-bullets--stepper::before { content: ""; position: absolute; left: 17px; top: 22px; bottom: 22px; width: 0; border-left: 1.5px dashed color-mix(in srgb, var(--lw-ink) 22%, transparent); } .lw-cs-bullets--stepper li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 10px 0; align-items: center; border-bottom: 0; font-size: 16px; line-height: 1.5; color: var(--lw-ink); } .lw-cs-bullets--stepper .bullet { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lw-canvas); border: 1.5px solid var(--lw-accent); color: var(--lw-accent); font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: 14px; letter-spacing: 0; position: relative; z-index: 1; transform: none; box-shadow: 0 0 0 4px var(--lw-canvas); transition: background 0.15s ease, color 0.15s ease; } .lw-cs-bullets--stepper li:hover .bullet { background: var(--lw-accent); color: var(--lw-on-accent, #fff); } /* Risk variant: tint nodes pink (always) */ .lw-cs-bullets--stepper.lw-cs-bullets--risk .bullet { border-color: var(--clay-brand-pink); color: var(--clay-brand-pink); } /* ── Variant: cards (tinted cards in a 2-col grid w/ colored edge) ── */ .lw-cs-bullets--cards { list-style: none; margin: 22px 0 8px; padding: 0; border-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 720px) { .lw-cs-bullets--cards { grid-template-columns: 1fr; } } .lw-cs-bullets--cards li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; padding: 16px 16px 16px 22px; border-radius: 16px; border: 1px solid var(--lw-hairline); background: var(--lw-surface-soft); border-bottom: 1px solid var(--lw-hairline); font-size: 15px; line-height: 1.5; color: var(--lw-ink); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .lw-cs-bullets--cards li:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(10,10,10,0.25); } .lw-cs-bullets--cards li::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--lw-accent); } .lw-cs-bullets--cards li:nth-child(4n+1)::before { background: var(--clay-brand-pink); } .lw-cs-bullets--cards li:nth-child(4n+2)::before { background: var(--clay-brand-lavender); } .lw-cs-bullets--cards li:nth-child(4n+3)::before { background: var(--clay-brand-ochre); } .lw-cs-bullets--cards li:nth-child(4n+4)::before { background: var(--clay-brand-teal); } .lw-cs-bullets--cards .bullet { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: 20px; letter-spacing: 0; color: var(--lw-accent); transform: none; } .lw-cs-bullets--cards li:nth-child(4n+1) .bullet { color: var(--clay-brand-pink); } .lw-cs-bullets--cards li:nth-child(4n+2) .bullet { color: var(--clay-brand-lavender); } .lw-cs-bullets--cards li:nth-child(4n+3) .bullet { color: var(--clay-brand-ochre); } .lw-cs-bullets--cards li:nth-child(4n+4) .bullet { color: var(--clay-brand-teal); } /* Risk variant of cards: all pink edges */ .lw-cs-bullets--cards.lw-cs-bullets--risk li::before { background: var(--clay-brand-pink); } .lw-cs-bullets--cards.lw-cs-bullets--risk .bullet { color: var(--clay-brand-pink); } /* ─────────── Case study: per-case layout tweaks (BMW/automotive) ─────────── */ /* TOC side flip — default is right, .cs-toc-left moves to left edge */ .lw-cs-toc.cs-toc-left { right: auto; left: 28px; } @media (max-width: 1279px) { .lw-cs-toc.cs-toc-left { left: 18px; right: auto; } } /* Image-scale variable applied via inline style on .lw-cs root */ .lw-cs.cs-img-scaled .lw-cs-cover { width: calc(var(--cs-img-scale, 100) * 1%); max-width: 100%; margin-left: auto; margin-right: auto; } .lw-cs.cs-img-scaled .lw-cs-shot { width: calc(var(--cs-img-scale, 100) * 1%); max-width: 100%; margin-left: auto; margin-right: auto; } /* ─── Centered chapter layout ─── */ .lw-cs-chapter.cs-layout-centered .lw-cs-twocol { display: flex; flex-direction: column; align-items: center; text-align: left; } .lw-cs-chapter.cs-layout-centered .lw-cs-twocol-l { width: 100%; max-width: 820px; text-align: center; margin: 0 auto 36px; display: flex; flex-direction: column; align-items: center; } .lw-cs-chapter.cs-layout-centered .lw-cs-twocol-l .lw-eyebrow { display: block; margin-bottom: 10px; } .lw-cs-chapter.cs-layout-centered .lw-cs-twocol-l .lw-cs-chapter-num { margin-bottom: 4px; } .lw-cs-chapter.cs-layout-centered .lw-cs-h2 { text-wrap: balance; max-width: 760px; } .lw-cs-chapter.cs-layout-centered .lw-cs-twocol-r { width: 100%; max-width: 920px; } /* Text elements stay narrower than the column for readability */ .lw-cs-chapter.cs-layout-centered .lw-cs-twocol-r > .lw-cs-lede, .lw-cs-chapter.cs-layout-centered .lw-cs-twocol-r > .lw-cs-para, .lw-cs-chapter.cs-layout-centered .lw-cs-twocol-r > .lw-cs-pull, .lw-cs-chapter.cs-layout-centered .lw-cs-twocol-r > .lw-cs-bullets, .lw-cs-chapter.cs-layout-centered .lw-cs-twocol-r > .lw-cs-risks, .lw-cs-chapter.cs-layout-centered .lw-cs-twocol-r > .lw-cs-constraints, .lw-cs-chapter.cs-layout-centered .lw-cs-twocol-r > .lw-cs-intersection, .lw-cs-chapter.cs-layout-centered .lw-cs-twocol-r > .lw-cs-options { max-width: 760px; margin-left: auto; margin-right: auto; } /* Slot can grow wider than text */ .lw-cs-chapter.cs-layout-centered .lw-cs-twocol-r > .lw-cs-slot { max-width: 100%; margin-top: 36px; } .lw-cs-chapter.cs-layout-centered .lw-cs-twocol-r > .lw-cs-slot image-slot { aspect-ratio: 16 / 9; height: auto; } /* Pullquote: center align in centered layout */ .lw-cs-chapter.cs-layout-centered .lw-cs-pull { text-align: center; margin-left: auto; margin-right: auto; max-width: 760px; } /* Mobile: stickers/cards stay legible but text-align resets */ @media (max-width: 720px) { .lw-cs-chapter.cs-layout-centered .lw-cs-twocol-l { align-items: stretch; text-align: left; } } /* ─────────── Before / After comparison (stacked, full-width) ─────────── */ .lw-cs-ba { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); margin: 36px 0 8px; } .lw-cs-ba--wide { width: calc(var(--cs-img-scale, 100) * 1%); max-width: calc(100vw - 48px); margin: 40px auto 8px; } .lw-cs.cs-page-bmw .lw-cs-ba--wide, .lw-cs.cs-page-briza .lw-cs-ba--wide { position: relative; left: 50%; transform: translateX(-50%); } @media (max-width: 720px) { .lw-cs-ba { grid-template-columns: 1fr; } } .lw-cs-ba-cell { margin: 0; display: flex; flex-direction: column; gap: 14px; } .lw-cs-ba-tag { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; padding: 6px 14px; border-radius: 9999px; background: var(--lw-ink); color: var(--lw-canvas); } .lw-cs-ba-tag.is-after { background: var(--lw-accent); color: #fff; } .lw-cs-ba-media { border-radius: 16px; overflow: hidden; background: transparent; } .lw-cs-ba-media image-slot { display: block; width: 100%; height: auto; border-radius: 16px; } /* ─────────── BMW case: wide image slot (breaks out of twocol) ─────────── */ .lw-cs-slot--wide { margin: 36px auto 8px; width: calc(var(--cs-img-scale, 110) * 1%); max-width: calc(100vw - 48px); border-radius: 24px; } .lw-cs-slot--wide image-slot { aspect-ratio: 16 / 9; display: block; width: 100%; height: auto; border-radius: 24px; } /* When the slot scale > 100%, center it via translate so it overflows symmetrically */ .lw-cs.cs-page-bmw .lw-cs-slot--wide { position: relative; left: 50%; transform: translateX(-50%); } /* Override the older cs-img-scaled rules so they no longer fight the slot--wide */ .lw-cs.cs-img-scaled .lw-cs-cover { width: calc(var(--cs-img-scale, 100) * 1%); max-width: calc(100vw - 48px); margin-left: auto; margin-right: auto; position: relative; left: 50%; transform: translateX(-50%); } .lw-cs.cs-img-scaled .lw-cs-shot { width: calc(var(--cs-img-scale, 100) * 1%); max-width: calc(100vw - 48px); margin-left: auto; margin-right: auto; position: relative; left: 50%; transform: translateX(-50%); } /* ─────────── Stat card grid (3-up data callouts) ─────────── */ .lw-cs-statgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 32px 0 12px; } @media (max-width: 880px) { .lw-cs-statgrid { grid-template-columns: 1fr; } } .lw-cs-statcard { position: relative; padding: 22px 20px 22px; border-radius: 20px; background: var(--lw-surface-soft); border: 1px solid var(--lw-hairline); display: flex; flex-direction: column; gap: 6px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .lw-cs-statcard:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -20px rgba(10,10,10,0.25); } .lw-cs-statcard:nth-child(3n+1) { background: color-mix(in srgb, var(--clay-brand-pink) 10%, var(--lw-surface-soft)); } .lw-cs-statcard:nth-child(3n+2) { background: color-mix(in srgb, var(--clay-brand-lavender) 14%, var(--lw-surface-soft)); } .lw-cs-statcard:nth-child(3n+3) { background: color-mix(in srgb, var(--clay-brand-ochre) 14%, var(--lw-surface-soft)); } .lw-cs-statcard-eyebrow { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lw-muted); display: block; } .lw-cs-statcard-k { display: block; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: clamp(26px, 2.6vw, 34px); line-height: 1; letter-spacing: -0.8px; color: var(--lw-ink); } .lw-cs-statcard-label { margin: 4px 0 0; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 16px; letter-spacing: -0.2px; line-height: 1.3; color: var(--lw-ink); } .lw-cs-statcard-sub { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--lw-body); } /* ─────────── Highlight callout (dark inline insight) ─────────── */ .lw-cs-highlight { margin: 32px 0 12px; padding: 28px 30px; border-radius: 24px; background: #0a1a1a; color: var(--clay-on-dark); position: relative; overflow: hidden; isolation: isolate; } .lw-cs-highlight::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(255,77,139,0.22), transparent 55%), radial-gradient(circle at 0% 100%, rgba(184,164,237,0.18), transparent 55%); z-index: -1; } .lw-cs-highlight-eyebrow { display: block; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,250,240,0.6); margin-bottom: 12px; } .lw-cs-highlight-body { margin: 0; font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; letter-spacing: -0.4px; color: var(--clay-on-dark); text-wrap: balance; max-width: 720px; } .lw-cs-highlight-who { display: block; margin-top: 14px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.3px; color: rgba(255,250,240,0.65); } .lw-cs-highlight.tone-cream { background: var(--lw-surface-strong); color: var(--lw-ink); } .lw-cs-highlight.tone-cream::before { background: radial-gradient(circle at 100% 0%, rgba(255,77,139,0.18), transparent 55%), radial-gradient(circle at 0% 100%, rgba(184,164,237,0.16), transparent 55%); } .lw-cs-highlight.tone-cream .lw-cs-highlight-body { color: var(--lw-ink); } .lw-cs-highlight.tone-cream .lw-cs-highlight-eyebrow { color: var(--lw-muted); } /* ─────────── Comparison grid (side-by-side picked vs alternatives) ─────────── */ .lw-cs-cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 32px 0 12px; } .lw-cs-cmp-card { position: relative; padding: 22px 20px; border-radius: 18px; background: var(--lw-surface-soft); border: 1px solid var(--lw-hairline); display: flex; flex-direction: column; gap: 8px; transition: transform 0.2s ease; } .lw-cs-cmp-card:hover { transform: translateY(-2px); } .lw-cs-cmp-card.is-picked { background: #0a1a1a; color: var(--clay-on-dark); border-color: transparent; box-shadow: 0 14px 30px -16px rgba(10,10,10,0.45); } .lw-cs-cmp-eyebrow { display: block; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lw-muted); } .lw-cs-cmp-card.is-picked .lw-cs-cmp-eyebrow { color: rgba(255,250,240,0.55); } .lw-cs-cmp-title { margin: 4px 0 0; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 18px; letter-spacing: -0.3px; line-height: 1.25; color: inherit; text-wrap: balance; } .lw-cs-cmp-body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--lw-body); } .lw-cs-cmp-card.is-picked .lw-cs-cmp-body { color: rgba(255,250,240,0.82); } .lw-cs-cmp-flag { position: absolute; top: 14px; right: 14px; padding: 4px 10px; border-radius: 9999px; background: var(--clay-brand-pink); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; } /* ─────────── Block subhead (left col, for sub-sections inside a chapter) ─────────── */ .lw-cs-subhead { display: block; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -0.4px; color: var(--lw-ink); margin-top: 12px; text-wrap: balance; } /* In centered layout, subheads also center */ .lw-cs-chapter.cs-layout-centered .lw-cs-subhead { text-align: center; margin: 0 auto; } /* Each chapter contains 1..N blocks. Add breathing room between blocks within the same chapter. */ .lw-cs-chapter > .lw-wrap + .lw-wrap { margin-top: clamp(40px, 6vw, 72px); } /* ─────────── BMW hero: 40px padding around contained image ─────────── */ .lw-cs.cs-page-bmw .lw-cs-cover { padding: 0; box-sizing: border-box; background: transparent; display: flex; align-items: center; justify-content: center; border-radius: 28px; } .lw-cs.cs-page-bmw .lw-cs-cover image-slot { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; border-radius: 0; } /* ─────────── Comparison cards with sub-items list ─────────── */ .lw-cs-cmp-card.has-items .lw-cs-cmp-body { margin-bottom: 6px; } .lw-cs-cmp-items { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid color-mix(in srgb, var(--lw-ink) 8%, transparent); padding-top: 12px; } .lw-cs-cmp-card.is-picked .lw-cs-cmp-items { border-top-color: rgba(255,250,240,0.16); } .lw-cs-cmp-items li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: baseline; font-size: 13px; line-height: 1.45; color: var(--lw-body); } .lw-cs-cmp-card.is-picked .lw-cs-cmp-items li { color: rgba(255,250,240,0.85); } .lw-cs-cmp-items .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lw-accent); transform: translateY(2px); } .lw-cs-cmp-card.is-picked .lw-cs-cmp-items .dot { background: var(--clay-brand-pink); } /* ─────────── Insight card (AI-thinking style diagnostic) ─────────── */ .lw-cs-insight { margin: 28px 0 12px; border-radius: 22px; background: var(--lw-canvas); border: 1px solid var(--lw-hairline); overflow: hidden; box-shadow: 0 12px 28px -20px rgba(10,10,10,0.18); } .lw-cs-insight-head { display: flex; align-items: center; gap: 10px; padding: 16px 22px; background: color-mix(in srgb, var(--clay-brand-lavender) 16%, var(--lw-canvas)); border-bottom: 1px solid var(--lw-hairline); } .lw-cs-insight-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--clay-brand-lavender) 50%, transparent); color: var(--lw-ink); border-radius: 8px; } .lw-cs-insight-title { flex: 1; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: -0.2px; color: var(--lw-ink); } .lw-cs-insight-badge { padding: 4px 10px; border-radius: 9999px; background: var(--lw-canvas); border: 1px solid var(--lw-hairline); font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--clay-brand-pink); } .lw-cs-insight-rows { display: flex; flex-direction: column; } .lw-cs-insight-row { display: grid; grid-template-columns: 180px 1fr; gap: 22px; padding: 16px 22px; border-bottom: 1px solid var(--lw-hairline); align-items: baseline; } .lw-cs-insight-row:last-child { border-bottom: none; } @media (max-width: 720px) { .lw-cs-insight-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 18px; } } .lw-cs-insight-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lw-muted); } .lw-cs-insight-body { margin: 0; font-size: 15px; line-height: 1.55; color: var(--lw-ink); } /* ─────────── Bento grid (mixed-size data callouts) ─────────── */ .lw-cs-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(140px, auto); gap: 14px; margin: 28px 0 12px; } @media (max-width: 880px) { .lw-cs-bento { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .lw-cs-bento { grid-template-columns: 1fr; } } .lw-cs-bento-cell { position: relative; padding: 22px 20px; border-radius: 20px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .lw-cs-bento-cell:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -22px rgba(10,10,10,0.3); } /* Size presets */ .lw-cs-bento-cell.size-lg { grid-column: span 2; grid-row: span 2; } .lw-cs-bento-cell.size-md { grid-column: span 2; } .lw-cs-bento-cell.size-sm { grid-column: span 1; } .lw-cs-bento-cell.size-wide { grid-column: span 4; } @media (max-width: 880px) { .lw-cs-bento-cell.size-lg { grid-column: span 2; grid-row: span 1; } .lw-cs-bento-cell.size-md { grid-column: span 2; } .lw-cs-bento-cell.size-sm { grid-column: span 1; } .lw-cs-bento-cell.size-wide { grid-column: span 2; } } @media (max-width: 540px) { .lw-cs-bento-cell.size-lg, .lw-cs-bento-cell.size-md, .lw-cs-bento-cell.size-sm, .lw-cs-bento-cell.size-wide { grid-column: span 1; } } /* Tone presets */ .lw-cs-bento-cell.tone-dark { background: #0a1a1a; color: var(--clay-on-dark); } .lw-cs-bento-cell.tone-light { background: var(--lw-canvas); border: 1px solid var(--lw-hairline); color: var(--lw-ink); } .lw-cs-bento-cell.tone-soft { background: var(--lw-surface-soft); color: var(--lw-ink); } .lw-cs-bento-cell.tone-pink { background: color-mix(in srgb, var(--clay-brand-pink) 18%, var(--lw-surface-soft)); color: var(--lw-ink); } .lw-cs-bento-cell.tone-lavender { background: color-mix(in srgb, var(--clay-brand-lavender) 22%, var(--lw-surface-soft)); color: var(--lw-ink); } .lw-cs-bento-cell.tone-ochre { background: color-mix(in srgb, var(--clay-brand-ochre) 22%, var(--lw-surface-soft)); color: var(--lw-ink); } .lw-cs-bento-cell.tone-teal { background: var(--clay-brand-teal); color: var(--clay-on-dark); } .lw-cs-bento-eyebrow { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; opacity: 0.6; } .lw-cs-bento-k { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: clamp(28px, 3.4vw, 44px); line-height: 1; letter-spacing: -1px; margin-top: 2px; } .lw-cs-bento-cell.size-lg .lw-cs-bento-k { font-size: clamp(40px, 5vw, 64px); } .lw-cs-bento-label { margin: 4px 0 0; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 16px; letter-spacing: -0.2px; line-height: 1.3; text-wrap: balance; } .lw-cs-bento-cell.size-lg .lw-cs-bento-label { font-size: 20px; } .lw-cs-bento-sub { margin: 6px 0 0; font-size: 13px; line-height: 1.5; opacity: 0.78; } .lw-cs-bento-spark { position: absolute; bottom: 18px; left: 20px; right: 20px; height: 36px; opacity: 0.65; pointer-events: none; color: currentColor; } .lw-cs-bento-cell.size-lg .lw-cs-bento-spark { height: 56px; } /* ─────────── Numbered list (richer numbered items with title + body) ─────────── */ .lw-cs-nlist-wrap { margin: 28px 0 12px; } .lw-cs-nlist-intro { font-size: 14px; line-height: 1.5; color: var(--lw-muted); margin: 0 0 14px; letter-spacing: 0.2px; } .lw-cs-nlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--lw-hairline); counter-reset: nlist; } .lw-cs-nlist-item { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 20px 0 22px; border-bottom: 1px solid var(--lw-hairline); align-items: flex-start; transition: background 0.18s ease, padding 0.18s ease; } .lw-cs-nlist-item:hover { background: color-mix(in srgb, var(--lw-ink) 2%, transparent); padding-left: 12px; } .lw-cs-nlist-num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--lw-ink); color: var(--lw-canvas); font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: 0; flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .lw-cs-nlist-item:hover .lw-cs-nlist-num { background: var(--clay-brand-pink); color: #fff; transform: rotate(-3deg); } .lw-cs-nlist-body { padding-top: 4px; min-width: 0; } .lw-cs-nlist-title { margin: 0 0 6px; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 17px; letter-spacing: -0.2px; line-height: 1.3; color: var(--lw-ink); text-wrap: balance; } .lw-cs-nlist-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--lw-body); max-width: 620px; } @media (max-width: 540px) { .lw-cs-nlist-item { grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; } .lw-cs-nlist-num { width: 40px; height: 40px; font-size: 18px; } } /* ──────────────────────────────────────────────────────── Case-study background-tone tweak Applied via data-bg on . Overrides --lw-canvas so the whole case study breathes a different white. ──────────────────────────────────────────────────────── */ :root[data-bg="warm-white"] { --lw-canvas: #faf8f4; --lw-surface: #f1ede4; --lw-surface-soft: #f6f2e8; --lw-surface-strong: #e8e2d4; --lw-hairline: rgba(10,10,10,0.07); } :root[data-bg="off-white"] { --lw-canvas: #fcfbf8; --lw-surface: #f3efe6; --lw-surface-soft: #f8f4eb; --lw-surface-strong: #ebe5d6; --lw-hairline: rgba(10,10,10,0.06); } :root[data-bg="pure-white"] { --lw-canvas: #ffffff; --lw-surface: #f2efe9; --lw-surface-soft: #f7f4ee; --lw-surface-strong: #ebe5d6; --lw-hairline: rgba(10,10,10,0.07); } /* cream just keeps the theme default */ /* ──────────────────────────────────────────────────────── Briza case page — wide media + image scale ──────────────────────────────────────────────────────── */ .lw-cs.cs-page-briza .lw-cs-slot--wide { position: relative; left: 50%; transform: translateX(-50%); } .lw-cs.cs-page-briza .lw-cs-cover { padding: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: transparent; border-radius: 28px; } .lw-cs.cs-page-briza .lw-cs-cover image-slot { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 16 / 10; } /* Briza wide image slot: a softly-tinted backdrop similar to BMW but neutral */ .lw-cs.cs-page-briza .lw-cs-slot--wide { background: transparent; border: none; } .lw-cs.cs-page-briza .lw-cs-slot--wide image-slot { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 24px; background: var(--lw-surface-strong); } /* ──────────────────────────────────────────────────────── Multi-block chapters: tighten subhead at top of left col for blocks > 0 (no chapter num/eyebrow/title above it). ──────────────────────────────────────────────────────── */ .lw-cs-chapter .lw-wrap + .lw-wrap .lw-cs-twocol-l { padding-top: 0; } /* For blocks beyond the first inside the same chapter, lift the subhead so it sits at the top of the left column without the eyebrow/title hierarchy */ .lw-cs-chapter .lw-wrap + .lw-wrap .lw-cs-subhead { margin-top: 0; color: var(--lw-body); letter-spacing: -0.2px; } /* ──────────────────────────────────────────────────────── CardGrid — 3-col light cards (Scalability, AI workflows) ──────────────────────────────────────────────────────── */ .lw-cs-cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0 8px; } @media (max-width: 880px) { .lw-cs-cardgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .lw-cs-cardgrid { grid-template-columns: 1fr; } } .lw-cs-cardgrid-cell { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; background: color-mix(in srgb, var(--lw-canvas) 92%, var(--lw-surface) 8%); border: 1px solid var(--lw-hairline); border-radius: 18px; min-height: 130px; } .lw-cs-cardgrid-eyebrow { font-family: var(--clay-font-body); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lw-muted); } .lw-cs-cardgrid-k { display: inline-block; font-family: var(--clay-font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--lw-muted); margin-bottom: 2px; } .lw-cs-cardgrid-title { margin: 0; font-family: var(--clay-font-body); font-weight: 500; font-size: 14.5px; line-height: 1.35; letter-spacing: -0.1px; color: var(--lw-ink); text-wrap: pretty; } .lw-cs-cardgrid-body { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--lw-body); } /* Wide variant — break out of two-col when wideMedia is on */ .lw-cs-cardgrid--wide { margin: 36px 0 8px; width: calc(var(--cs-img-scale, 100) * 1%); max-width: calc(100vw - 48px); } .lw-cs.cs-page-briza .lw-cs-cardgrid--wide { position: relative; left: 50%; transform: translateX(-50%); } /* ──────────────────────────────────────────────────────── SlotRow — 3 image-slots side-by-side inside a tinted panel (Authentication & Creator Mgmt screens) ──────────────────────────────────────────────────────── */ .lw-cs-slotrow { margin: 32px 0 8px; padding: 0; background: transparent; } .lw-cs-slotrow.tone-cream, .lw-cs-slotrow.tone-peach, .lw-cs-slotrow.tone-dark { background: transparent; } .lw-cs-slotrow-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 760px) { .lw-cs-slotrow-inner { grid-template-columns: 1fr; } } .lw-cs-slotrow-cell { background: transparent; border-radius: 12px; overflow: hidden; } .lw-cs-slotrow-cell image-slot { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; } /* Wide variant */ .lw-cs-slotrow--wide { width: calc(var(--cs-img-scale, 100) * 1%); max-width: calc(100vw - 48px); margin: 36px auto 8px; } .lw-cs.cs-page-briza .lw-cs-slotrow--wide { position: relative; left: 50%; transform: translateX(-50%); } /* ──────────────────────────────────────────────────────── Dots everywhere — let the body's dotted background show through every case-study section. Previously the chapters wrapper + outcomes/reflection wraps painted an opaque canvas color over them. ──────────────────────────────────────────────────────── */ .lw-cs-chapters, .lw-cs-outcomes-wrap, .lw-cs-reflection-wrap { background: transparent; } /* Learnings dark callout is meant to be solid — keep it. Reflection wrap used to be tinted; keep a soft tint via a transparent overlay so dots remain visible. */ .lw-cs-reflection-wrap { background: linear-gradient( to bottom, color-mix(in srgb, var(--lw-surface-soft) 75%, transparent) 0%, color-mix(in srgb, var(--lw-surface-soft) 75%, transparent) 100% ); } /* ──────────────────────────────────────────────────────── Per-section background (Briza) — alternates between the original dotted canvas (cs-bg-plain, transparent so the body dots show through) and one slightly-darker solid band (cs-bg-tint). Two colors only. ──────────────────────────────────────────────────────── */ .lw-cs-chapter.cs-bg-plain, .lw-cs-chapter.cs-bg-tint { border-top: none; } .lw-cs-chapter.cs-bg-plain { background: transparent; } .lw-cs-chapter.cs-bg-tint { background: color-mix(in srgb, var(--clay-surface-strong) 52%, var(--lw-canvas)); } /* Slots stay frameless on the tint band too — just the image. */ .lw-cs-chapter.cs-bg-tint .lw-cs-slot { background: transparent; border: none; } /* ──────────────────────────────────────────────────────── Strategic Tradeoffs — card layout (toggleable via tweak) ──────────────────────────────────────────────────────── */ .lw-cs-tradecards { display: flex; flex-direction: column; gap: 16px; margin: 6px 0 8px; } .lw-cs-tradecard { position: relative; padding: 24px 26px 26px; border-radius: 20px; background: color-mix(in srgb, #ffffff 70%, var(--lw-surface)); border: 1px solid var(--lw-hairline); box-shadow: 0 18px 40px -32px rgba(10, 10, 10, 0.35); } .lw-cs-tradecard-num { display: inline-block; font-family: var(--clay-font-display); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; color: var(--lw-accent); margin-bottom: 10px; } .lw-cs-tradecard-who { margin: 0 0 10px; font-family: var(--clay-font-display); font-weight: 500; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.15; letter-spacing: -0.6px; color: var(--lw-ink); text-wrap: balance; } .lw-cs-tradecard-want { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--lw-body); text-wrap: pretty; } /* ──────────────────────────────────────────────────────── Image captions under slots / slot rows ──────────────────────────────────────────────────────── */ .lw-cs-figure { margin: 0; padding: 0; } .lw-cs-figcaption { margin: 14px auto 8px; max-width: 720px; font-family: var(--clay-font-body); font-size: 13.5px; line-height: 1.55; letter-spacing: 0.1px; color: var(--lw-muted); text-align: center; text-wrap: pretty; } /* ──────────────────────────────────────────────────────── Reflection closing image ──────────────────────────────────────────────────────── */ .lw-cs-slot--reflect { margin-top: 36px; max-width: 920px; } .lw-cs-slot--reflect image-slot { aspect-ratio: 16 / 9; } /* ──────────────────────────────────────────────────────── Contain slots — show the whole image, no crop, no tint band ──────────────────────────────────────────────────────── */ .lw-cs-slot--contain image-slot, .lw-cs.cs-page-briza .lw-cs-slot--wide.lw-cs-slot--contain image-slot, .lw-cs.cs-page-briza .lw-cs-slot--wide image-slot { background: transparent; } /* ──────────────────────────────────────────────────────── Final-design carousel ──────────────────────────────────────────────────────── */ .lw-cs-carousel { margin: 36px 0 8px; } .lw-cs-carousel--wide { width: calc(var(--cs-img-scale, 100) * 1%); max-width: calc(100vw - 48px); margin: 36px auto 8px; } .lw-cs.cs-page-briza .lw-cs-carousel--wide, .lw-cs.cs-page-bmw .lw-cs-carousel--wide { position: relative; left: 50%; transform: translateX(-50%); } .lw-cs-carousel-stage { position: relative; border-radius: 24px; overflow: hidden; } .lw-cs-carousel-track { display: flex; align-items: center; transition: transform 0.5s cubic-bezier(.2,.7,.2,1); } .lw-cs-carousel-slide { flex: 0 0 100%; min-width: 0; } .lw-cs-carousel-slide image-slot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: transparent; } .lw-cs-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; display: grid; place-items: center; border: none; border-radius: 9999px; background: var(--lw-ink); color: var(--lw-canvas); font-family: var(--clay-font-display); font-size: 26px; line-height: 1; cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; opacity: 0.9; } .lw-cs-carousel-nav:hover { opacity: 1; transform: translateY(-50%) scale(1.06); } .lw-cs-carousel-nav.prev { left: 18px; } .lw-cs-carousel-nav.next { right: 18px; } .lw-cs-carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; } .lw-cs-carousel-dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 9999px; background: color-mix(in srgb, var(--lw-ink) 22%, transparent); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .lw-cs-carousel-dot:hover { background: color-mix(in srgb, var(--lw-ink) 40%, transparent); } .lw-cs-carousel-dot.is-active { background: var(--lw-accent); transform: scale(1.25); } @media (max-width: 640px) { .lw-cs-carousel-nav { width: 40px; height: 40px; font-size: 22px; } .lw-cs-carousel-nav.prev { left: 10px; } .lw-cs-carousel-nav.next { right: 10px; } }