/* ------------------------------------------------------------------ The Culture Institute of Australia — site styles Dark navy + cyan/purple gradient · Outfit ------------------------------------------------------------------ */ :root { /* Palette — Navy (default, on-brand) */ --bg: #051c34; --bg-2: #0a2747; --bg-3: #0f325a; --surface: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.06); --ink: #f4f6fa; --ink-2: rgba(244, 246, 250, 0.82); --muted: rgba(244, 246, 250, 0.55); --faint: rgba(244, 246, 250, 0.32); --line: rgba(244, 246, 250, 0.10); --line-2: rgba(244, 246, 250, 0.20); --accent: #10eeec; /* brand cyan */ --accent-2: #6b1fff; /* brand purple */ --accent-soft: #379cf1; /* mid blue */ --on-accent: #051c34; --bg-light: #f6f5f1; /* used for the white-contrast section */ --bg-light-2: #eeece5; --ink-on-light: #051633; --muted-on-light: #6a7686; --line-on-light: rgba(5, 22, 51, 0.12); /* Type */ --font-display: "Outfit", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-sans: "Outfit", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Layout */ --max: 1440px; --gutter: clamp(20px, 4vw, 56px); --section-pad: clamp(80px, 8vw, 144px); } /* Palette variants applied via [data-palette] on */ html[data-palette="light"] { --bg: #f6f5f1; --bg-2: #eeece5; --bg-3: #ffffff; --surface: rgba(5, 28, 52, 0.04); --surface-2: rgba(5, 28, 52, 0.06); --ink: #051c34; --ink-2: rgba(5, 28, 52, 0.82); --muted: rgba(5, 28, 52, 0.55); --faint: rgba(5, 28, 52, 0.30); --line: rgba(5, 28, 52, 0.10); --line-2: rgba(5, 28, 52, 0.22); --accent: #008f7a; --accent-2: #6b1fff; --accent-soft: #2a6fdb; --on-accent: #ffffff; } html[data-palette="violet"] { --bg: #0c0820; --bg-2: #14102f; --bg-3: #1a1640; --accent: #b794ff; --accent-2: #2af0d2; } /* Density */ html[data-density="compact"] { --section-pad: clamp(64px, 7vw, 112px); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { background: var(--bg); overflow-x: clip; } ::selection { background: var(--accent); color: var(--on-accent); } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } /* ---------- Reusable atoms ---------- */ .container { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); position: relative; } .mono { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .display { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.02em; line-height: 1.02; color: var(--ink); text-wrap: balance; } .display strong, .display em { font-weight: 700; font-style: normal; } .hairline { display: block; width: 100%; height: 1px; background: var(--accent); opacity: 0.7; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.04em; color: var(--muted); text-transform: none; font-weight: 400; } .section-num { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase; font-weight: 500; display: inline-flex; align-items: center; gap: 14px; } .section-num::before { content: ""; width: 24px; height: 1px; background: var(--accent); display: inline-block; } .gradient-text { background: none; color: var(--ink-on-light); -webkit-text-fill-color: var(--ink-on-light); } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 0; border: 1px solid transparent; font-family: var(--font-sans); font-size: 14px; letter-spacing: 0; font-weight: 500; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--ink); color: var(--bg); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .btn-arrow { width: 1em; height: 1em; } .btn-link { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-size: 15px; font-weight: 500; padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color 180ms ease, color 180ms ease; } .btn-link:hover { border-color: var(--accent); } .btn-link .tri { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent currentColor; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; gap: 32px; height: 84px; } .brand { display: inline-flex; align-items: center; } .brand img.logo { height: 56px; width: auto; display: block; } @media (max-width: 760px) { .brand img.logo { height: 44px; } } .nav-links { display: flex; gap: 44px; margin-left: auto; font-size: 15px; font-weight: 400; } .nav-links a { position: relative; color: var(--ink); padding: 8px 0; transition: color 180ms ease; } .nav-links a:hover { color: var(--accent); } .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); } .nav-cta { display: flex; gap: 10px; margin-left: 8px; } @media (max-width: 600px) { .nav-cta .btn { padding: 0 16px; height: 42px; font-size: 13px; } } /* Events dropdown */ .nav-dropdown { position: relative; display: flex; align-items: center; } .nav-dropdown-trigger { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; transition: color 180ms ease; } .nav-dropdown-trigger:hover { color: var(--accent); } .nav-dropdown-trigger.active::after { content: ""; position: absolute; left: 0; right: 14px; bottom: -1px; height: 2px; background: var(--accent); } .nav-dropdown-caret { transition: transform 180ms ease; opacity: 0.7; } .nav-dropdown:hover .nav-dropdown-caret, .nav-dropdown:focus-within .nav-dropdown-caret { transform: rotate(180deg); opacity: 1; } .nav-dropdown-menu { position: absolute; top: calc(100% + 14px); right: -8px; min-width: 360px; background: color-mix(in oklab, var(--bg) 96%, #000 4%); border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25); padding: 10px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 160ms ease, transform 160ms ease, visibility 160ms; z-index: 60; } .nav-dropdown-menu::before { /* hover bridge so the menu doesn't close in the gap */ content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; text-decoration: none; color: var(--ink); border-radius: 2px; transition: background 140ms ease, color 140ms ease; } .nav-dropdown-item:hover, .nav-dropdown-item:focus-visible { background: color-mix(in oklch, var(--accent) 10%, transparent); color: var(--ink); } .nav-dropdown-item:hover .nav-dropdown-title, .nav-dropdown-item:focus-visible .nav-dropdown-title { color: var(--accent); } .nav-dropdown-overview { flex-direction: column; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .nav-dropdown-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .nav-dropdown-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); padding-top: 4px; flex: 0 0 auto; } .nav-dropdown-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .nav-dropdown-title { font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); transition: color 140ms ease; } .nav-dropdown-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); } /* ---------- Mobile burger + drop-down ---------- */ .nav-burger { display: none; position: relative; width: 44px; height: 44px; margin-left: auto; padding: 0; background: transparent; border: 0; cursor: pointer; color: var(--ink); -webkit-tap-highlight-color: transparent; } .nav-burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .nav-burger-line { position: absolute; left: 50%; width: 24px; height: 2px; margin-left: -12px; background: currentColor; border-radius: 2px; transform-origin: 50% 50%; transition: top 280ms cubic-bezier(0.4, 0.0, 0.2, 1), transform 280ms cubic-bezier(0.4, 0.0, 0.2, 1), background 200ms ease; } .nav-burger-line-1 { top: 17px; } .nav-burger-line-2 { top: 25px; } .nav-burger.is-open { color: var(--accent); } .nav-burger.is-open .nav-burger-line-1 { top: 21px; transform: rotate(45deg); } .nav-burger.is-open .nav-burger-line-2 { top: 21px; transform: rotate(-45deg); } .nav-mobile { position: absolute; left: 0; right: 0; top: 100%; background: color-mix(in oklab, var(--bg) 96%, #000 4%); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.45); overflow: hidden; max-height: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: max-height 360ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 240ms ease, visibility 360ms; } .nav-mobile.is-open { max-height: calc(100vh - 84px); opacity: 1; visibility: visible; pointer-events: auto; } .nav-mobile-inner { display: flex; flex-direction: column; padding-block: 12px 28px; } .nav-mobile-item { display: block; padding: 18px 0; color: var(--ink); font-size: 20px; font-weight: 400; letter-spacing: -0.01em; text-decoration: none; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(-8px); transition: opacity 320ms ease, transform 320ms cubic-bezier(0.4, 0.0, 0.2, 1), color 180ms ease; } .nav-mobile-item:hover, .nav-mobile-item:focus-visible { color: var(--accent); } .nav-mobile-item.active { color: var(--accent); } .nav-mobile-sub { display: flex; flex-direction: column; padding: 6px 0 10px 16px; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(-8px); transition: opacity 320ms ease, transform 320ms cubic-bezier(0.4, 0.0, 0.2, 1); } .nav-mobile-subitem { padding: 10px 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 180ms ease; } .nav-mobile-subitem:hover, .nav-mobile-subitem:focus-visible { color: var(--accent); } .nav-mobile-cta { margin-top: 22px; align-self: flex-start; opacity: 0; transform: translateY(-8px); transition: opacity 320ms ease, transform 320ms cubic-bezier(0.4, 0.0, 0.2, 1); } .nav-mobile.is-open .nav-mobile-item, .nav-mobile.is-open .nav-mobile-sub, .nav-mobile.is-open .nav-mobile-cta { opacity: 1; transform: translateY(0); } .nav-mobile.is-open .nav-mobile-item:nth-child(1) { transition-delay: 60ms; } .nav-mobile.is-open .nav-mobile-item:nth-child(2) { transition-delay: 100ms; } .nav-mobile.is-open .nav-mobile-item:nth-child(3) { transition-delay: 140ms; } .nav-mobile.is-open .nav-mobile-item:nth-child(4) { transition-delay: 180ms; } .nav-mobile.is-open .nav-mobile-sub { transition-delay: 220ms; } .nav-mobile.is-open .nav-mobile-item:nth-child(6) { transition-delay: 260ms; } .nav-mobile.is-open .nav-mobile-cta { transition-delay: 300ms; } body.nav-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .nav-burger-line, .nav-mobile, .nav-mobile-item, .nav-mobile-sub, .nav-mobile-cta { transition-duration: 0ms !important; transition-delay: 0ms !important; } } @media (max-width: 860px) { .nav-dropdown { display: none; } .nav-links { display: none; } .nav-cta { display: none; } .nav-burger { display: inline-block; } } /* ---------- HubSpot embedded forms ---------- */ .hs-share-frame { width: 100%; min-height: 720px; border: 0; background: transparent; display: block; } .hs-form-frame { width: 100%; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding-top: clamp(64px, 7vw, 120px); padding-bottom: clamp(80px, 9vw, 160px); min-height: clamp(560px, 80vh, 920px); display: flex; align-items: center; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 0; width: 100%; } .hero-spacer { display: none; } .hero-text { position: relative; z-index: 2; max-width: 1100px; } .hero-text .hairline { margin-bottom: 32px; } .hero-text .eyebrow { margin-bottom: 28px; color: var(--ink-2); font-size: 15px; } .hero h1 { margin: 0; font-size: clamp(38px, 5vw, 68px); font-weight: 300; letter-spacing: -0.022em; line-height: 1.08; max-width: 18ch; } .hero h1 strong { font-weight: 500; color: var(--ink); } .hero-text .hairline { opacity: 0.45; } .hero-text .hairline.bot { margin-top: 36px; margin-bottom: 28px; opacity: 0.45; } .hero-cta-row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } /* Gradient blob behind hero — brand artwork, rotated; text lives beneath */ .hero { align-items: flex-end; padding-top: clamp(140px, 16vw, 240px); } .hero-blob { position: absolute; top: 38%; left: 62%; transform: translate(-50%, -50%) rotate(90deg); width: clamp(840px, 96vw, 1470px); height: clamp(840px, 96vw, 1470px); background-image: url('assets/bg-2.webp'); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; z-index: 1; opacity: 0.88; filter: saturate(0.92) brightness(0.94); /* slight fade-out in the very centre so the cyan-purple seam is calmer */ -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,0.7) 0%, #000 35%, #000 100%); mask-image: radial-gradient(circle, rgba(0,0,0,0.7) 0%, #000 35%, #000 100%); } /* soft bottom-half vignette so the copy beneath stays legible */ .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 35%, rgba(5,28,52,0.55) 60%, var(--bg) 100%), linear-gradient(95deg, var(--bg) 0%, rgba(5,28,52,0.55) 18%, transparent 45%); pointer-events: none; z-index: 1; } @media (max-width: 979px) { .hero-blob { opacity: 0.7; width: 130vw; height: 130vw; left: 70%; top: 30%; } } /* hero variant: statement (full width, centered) */ .hero[data-variant="statement"] .hero-grid { grid-template-columns: 1fr; } .hero[data-variant="statement"] .hero-text { max-width: 1300px; } .hero[data-variant="statement"] h1 { font-size: clamp(56px, 9vw, 132px); max-width: 18ch; } .hero[data-variant="statement"] .hero-blob { background-image: url('assets/bg-9.webp'); left: 50%; top: 50%; width: 90vw; height: 90vh; opacity: 0.5; filter: blur(40px); } /* hero variant: blob — the bowtie/sprite shape */ .hero[data-variant="blob"] .hero-blob { background-image: url('assets/bg-1.webp'); left: 60%; top: 50%; width: clamp(640px, 78vw, 1240px); height: clamp(640px, 78vw, 1240px); opacity: 0.85; } /* hero variant: split (default look from screenshot) */ .hero[data-variant="split"] .hero-blob { background-image: url('assets/bg-1.webp'); } /* ---------- "What boards need" — light-contrast section ---------- */ .boards { background: var(--bg-light); color: var(--ink-on-light); padding-block: clamp(120px, 12vw, 200px); position: relative; overflow: hidden; } .boards::before { content: ""; position: absolute; top: -15%; right: -8%; width: clamp(360px, 36vw, 600px); height: clamp(360px, 36vw, 600px); background-image: url('assets/bg-6.webp'); background-size: contain; background-repeat: no-repeat; opacity: 0.10; pointer-events: none; } .boards .container { max-width: 1200px; position: relative; z-index: 1; } .boards-head { margin-bottom: clamp(56px, 7vw, 112px); } .boards h2 { font-family: var(--font-display); font-size: clamp(32px, 4.2vw, 58px); font-weight: 300; letter-spacing: -0.022em; line-height: 1.08; margin: 0; max-width: 18ch; color: var(--ink-on-light); } .boards h2 strong { font-weight: 500; } .boards-grid { display: grid; grid-template-columns: 1fr; gap: 40px 64px; } @media (min-width: 900px) { .boards-grid { grid-template-columns: 1fr 1fr; } } .boards-grid p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink-on-light); margin: 0; max-width: 50ch; } .boards-grid .lead { font-size: clamp(20px, 1.7vw, 26px); font-weight: 500; line-height: 1.3; color: var(--ink-on-light); } /* ---------- Section scaffolding ---------- */ .section { padding-block: var(--section-pad); position: relative; } .section + .section { border-top: 1px solid var(--line); } .section-head { display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: clamp(40px, 5vw, 72px); max-width: 1100px; } @media (min-width: 900px) { .section-head.split { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 64px; max-width: none; } } .section-title { font-size: clamp(32px, 4vw, 56px); margin: 20px 0 0; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); max-width: 24ch; text-wrap: balance; } .section-title strong { font-weight: 500; } /* CultureCon headline image — replaces the section title on Events.html "Three cities" */ .cc-headline { display: block; width: clamp(280px, 36vw, 520px); height: auto; margin: 16px 0 0; } .section-kicker { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; text-wrap: pretty; } /* ---------- Practice / What we do ---------- */ .practice-list { border-top: 1px solid var(--line); } .practice-row { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 40px 0; border-bottom: 1px solid var(--line); align-items: start; cursor: pointer; transition: padding 200ms ease; } @media (min-width: 900px) { .practice-row { grid-template-columns: 200px 1.3fr 1fr 60px; gap: 48px; align-items: center; } } .practice-row:hover { padding-inline: 12px; } .practice-row .num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--accent); display: flex; align-items: center; gap: 12px; } .practice-row .num .tag { color: var(--muted); } .practice-row h3 { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.015em; margin: 0; font-weight: 500; } .practice-row p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; } .practice-row .arrow { justify-self: end; width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); display: grid; place-items: center; transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease; } .practice-row:hover .arrow { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: rotate(-45deg); } /* ---------- CultureHealth deep-dive ---------- */ .ch-section { padding-block: var(--section-pad); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); border-top: 1px solid var(--line); position: relative; overflow: hidden; } .ch-section::before { content: ""; position: absolute; bottom: -25%; left: -15%; width: clamp(500px, 50vw, 900px); height: clamp(500px, 50vw, 900px); background-image: url('assets/bg-2.webp'); background-size: contain; background-repeat: no-repeat; opacity: 0.10; pointer-events: none; } .ch-section .container { position: relative; z-index: 1; } .ch-hero { display: grid; grid-template-columns: 1fr; gap: 48px; margin-bottom: clamp(64px, 7vw, 112px); align-items: center; } @media (min-width: 900px) { .ch-hero { grid-template-columns: 1.2fr 1fr; gap: 80px; } } .ch-hero-logo { display: flex; align-items: center; } .ch-hero-copy { display: flex; flex-direction: column; gap: clamp(20px, 2vw, 28px); } .ch-hero-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(18px, 1.6vw, 24px) clamp(20px, 1.8vw, 28px); border: 1px solid color-mix(in oklch, var(--accent) 45%, transparent); background: color-mix(in oklch, var(--accent) 8%, transparent); color: var(--ink); text-decoration: none; border-radius: 2px; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .ch-hero-cta:hover { background: color-mix(in oklch, var(--accent) 16%, transparent); border-color: var(--accent); transform: translateY(-1px); } .ch-hero-cta-body { display: flex; flex-direction: column; gap: 4px; } .ch-hero-cta-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .ch-hero-cta-title { font-family: var(--font-display); font-size: clamp(18px, 1.5vw, 22px); font-weight: 400; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; } .ch-hero-cta-meta { font-size: 13px; color: var(--ink-2); line-height: 1.4; } .ch-hero-cta-arrow { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--accent); } .ch-mark { font-family: var(--font-display); font-size: clamp(48px, 7vw, 96px); font-weight: 300; letter-spacing: -0.025em; line-height: 0.95; margin: 0; } .ch-mark strong { font-weight: 700; } .ch-mark .tm { font-size: 0.4em; vertical-align: super; color: var(--accent); font-weight: 400; margin-left: 4px; } .ch-logo { width: clamp(280px, 32vw, 460px); height: auto; display: block; margin-bottom: 12px; } .ch-tagline { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 30px); font-weight: 400; letter-spacing: -0.01em; color: var(--ink); margin: 18px 0 0; } .ch-sub { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.45; color: var(--ink-2); margin: 0; } .ch-intro { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 1100px; margin-bottom: clamp(72px, 8vw, 128px); } @media (min-width: 900px) { .ch-intro { grid-template-columns: 1fr 1fr; gap: 56px; } } .ch-intro p { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0; } .ch-intro p strong { color: var(--ink); font-weight: 500; } /* CultureHealth 3 pillars */ .ch-pillars { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 24px; } @media (min-width: 760px) { .ch-pillars { grid-template-columns: repeat(3, 1fr); } } .ch-pillar { background: var(--bg); padding: 40px 32px; display: flex; flex-direction: column; gap: 12px; min-height: 240px; position: relative; overflow: hidden; } .ch-pillar::before { content: ""; position: absolute; inset: -50% -50% auto auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0%, transparent 60%); opacity: 0.08; pointer-events: none; } .ch-pillar-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); } .ch-pillar h3 { font-family: var(--font-display); font-size: clamp(28px, 3vw, 38px); font-weight: 500; letter-spacing: -0.02em; margin: 0; line-height: 1.05; } .ch-pillar p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 32ch; } .ch-strap { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); font-weight: 400; letter-spacing: -0.01em; color: var(--ink-2); text-align: right; margin: 0 0 clamp(72px, 8vw, 128px); } /* 5-dimensions table */ .ch-dimensions { margin-bottom: clamp(72px, 8vw, 128px); } .ch-dim-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .ch-dim-head h3 { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 44px); font-weight: 500; letter-spacing: -0.02em; margin: 0; max-width: 20ch; } .ch-dim-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 720px) { .ch-dim-grid { grid-template-columns: repeat(5, 1fr); } } .ch-dim { background: var(--bg); padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; min-height: 280px; } .ch-dim .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); } .ch-dim h4 { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.015em; margin: 8px 0 0; line-height: 1.15; } .ch-dim p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); } /* Comparison table */ .ch-compare { margin-bottom: clamp(72px, 8vw, 128px); } .ch-compare-head { margin-bottom: 32px; } .ch-compare-head h3 { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 44px); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 16px; max-width: 24ch; } .ch-compare-head p { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 60ch; } .ch-table { border: 1px solid var(--line); display: grid; grid-template-columns: 1.2fr 1fr 1fr; } .ch-table .h, .ch-table .c { padding: 20px 24px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; } .ch-table .h:not(:last-child), .ch-table .c:not(:nth-child(3n)) { border-right: 1px solid var(--line); } .ch-table .h { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; color: var(--muted); background: var(--surface); } .ch-table .h-eng { color: var(--accent-soft); } .ch-table .h-ch { color: var(--accent); } .ch-table .c { color: var(--ink-2); } .ch-table .c.label { color: var(--ink); font-weight: 500; background: var(--surface); } .ch-table .row-3 > * { border-bottom: 0; } @media (max-width: 760px) { .ch-table { grid-template-columns: 1fr; } .ch-table .h:not(:last-child), .ch-table .c:not(:nth-child(3n)) { border-right: 0; } } /* Receive / Who-for cards */ .ch-cards { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 48px; } @media (min-width: 900px) { .ch-cards { grid-template-columns: 1fr 1fr; } } .ch-card { background: var(--bg); padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; gap: 20px; } .ch-card h4 { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; letter-spacing: -0.015em; margin: 8px 0 0; } .ch-card ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 14px; } .ch-card li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: baseline; font-size: 15px; line-height: 1.55; color: var(--ink-2); } .ch-card li::before { content: "→"; color: var(--accent); } .ch-card li > span { display: block; } .ch-closer { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 40px); font-weight: 300; letter-spacing: -0.018em; line-height: 1.2; margin: clamp(56px, 6vw, 96px) 0 0; max-width: 38ch; } .ch-closer strong { font-weight: 700; } /* ---------- Events ---------- */ .events { position: relative; } .events::before { content: ""; position: absolute; top: 10%; right: -10%; width: 480px; height: 480px; background-image: url('assets/bg-6.webp'); background-size: contain; background-repeat: no-repeat; opacity: 0.18; pointer-events: none; z-index: 0; } .events .container { position: relative; z-index: 1; } .events-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 32px; } @media (min-width: 980px) { .events-grid { grid-template-columns: repeat(3, 1fr); } } .event-card { background: var(--bg); padding: clamp(32px, 3.2vw, 48px); display: flex; flex-direction: column; gap: 20px; min-height: 480px; position: relative; overflow: hidden; transition: background 200ms ease; isolation: isolate; } .event-card::before { content: ""; position: absolute; inset: -10% -8% 30% -8%; background-size: cover; background-repeat: no-repeat; background-position: center top; opacity: 0.78; mix-blend-mode: screen; z-index: -1; transition: opacity 320ms ease, transform 600ms ease; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); } .event-card:nth-child(1) { background: linear-gradient(155deg, #0a3258 0%, var(--bg) 70%); } .event-card:nth-child(1)::before { background-image: url('assets/bg-4-cyan.webp'); } .event-card:nth-child(2) { background: linear-gradient(155deg, #1a1444 0%, var(--bg) 70%); } .event-card:nth-child(2)::before { background-image: url('assets/bg-8-tilted.webp'); } .event-card:nth-child(3) { background: linear-gradient(155deg, #0e2853 0%, var(--bg) 65%); } .event-card:nth-child(3)::before { background-image: url('assets/bg-3-pill.webp'); } .event-card:hover { background: var(--surface); } .event-card:hover::before { opacity: 0.78; transform: scale(1.04); } .event-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .event-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); } .event-city { display: flex; align-items: baseline; gap: 10px; } .event-city-name { font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; } .event-city-country { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; } .event-title { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 4px 0 0; color: var(--ink); } .event-desc { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 38ch; } .event-meta { margin: 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; margin-top: auto; } .event-meta div { display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: baseline; } .event-meta dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0; } .event-meta dd { margin: 0; font-size: 14px; color: var(--ink); font-weight: 400; } .events-strap { font-size: 14px; color: var(--muted); text-align: center; margin: 24px 0 0; font-family: var(--font-mono); letter-spacing: 0.06em; } /* ---------- Clients ---------- */ .clients-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 640px) { .clients-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .clients-grid { grid-template-columns: repeat(6, 1fr); } } .client-cell { background: var(--bg); aspect-ratio: 5 / 3; display: grid; place-items: center; padding: 16px; transition: background 200ms ease; } .client-cell:hover { background: var(--surface); } .client-name { font-family: var(--font-display); font-size: clamp(15px, 1.4vw, 19px); letter-spacing: 0; font-weight: 400; color: var(--ink); opacity: 0.78; text-align: center; } /* ---------- Insights ---------- */ .insights-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 760px) { .insights-grid { grid-template-columns: 1fr 1fr 1fr; } } .insight-card { position: relative; background: var(--bg-2); display: flex; flex-direction: column; min-height: 480px; transition: transform 280ms ease, border-color 280ms ease; cursor: pointer; overflow: hidden; isolation: isolate; border: 1px solid var(--line); } .insight-card:hover { transform: translateY(-4px); border-color: var(--accent); } .insight-card-media { position: relative; height: 240px; background-size: cover; background-position: top center; background-repeat: no-repeat; background-color: var(--bg); flex: none; overflow: hidden; } .insight-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,28,52,0.35) 0%, rgba(5,28,52,0) 35%, rgba(5,28,52,0) 60%, rgba(5,28,52,0.55) 100%); transition: opacity 320ms ease; } .insight-card:hover .insight-card-media::after { opacity: 0.35; } /* Book-cover variant — show full portrait artwork, no crop */ .insight-card-media.is-cover-art { height: 320px; background-size: auto 100%; background-position: center; background-color: var(--surface, #0e2640); } .insight-card-media.is-cover-art::after { background: linear-gradient(180deg, rgba(5,28,52,0) 0%, rgba(5,28,52,0) 70%, rgba(5,28,52,0.25) 100%); } .insight-card-inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 18px; padding: 28px 28px 32px; flex: 1; background: var(--bg-2); } .insight-card .top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .insight-card h4 { font-family: var(--font-display); font-size: 24px; letter-spacing: -0.015em; line-height: 1.15; margin: 0; font-weight: 500; } .insight-card p { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin: 0; } .insight-card .footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); } .insight-card .read { font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-size: 11px; } /* Download box — for publications CTA */ .download-box { display: inline-flex; align-items: center; gap: 20px; padding: 20px 24px 20px 22px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: linear-gradient(120deg, color-mix(in oklab, var(--accent) 8%, transparent) 0%, transparent 60%), var(--surface, rgba(255,255,255,0.02)); text-decoration: none; color: var(--ink); max-width: 560px; transition: border-color 220ms ease, transform 220ms ease, background 220ms ease; } .download-box:hover { border-color: var(--accent); transform: translateY(-2px); } .download-box-icon { flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); background: rgba(255,255,255,0.02); } .download-box:hover .download-box-icon { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .download-box-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .download-box-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); } .download-box-title { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); line-height: 1.25; } .download-box-meta { font-size: 12px; color: var(--muted); } .download-box-cta { flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; padding-left: 16px; border-left: 1px solid var(--line); } @media (max-width: 640px) { .download-box { flex-wrap: wrap; } .download-box-cta { border-left: 0; padding-left: 0; } } /* ---------- About ---------- */ .section.about-section { position: relative; overflow: hidden; } .section.about-section::before { content: ""; position: absolute; top: 10%; right: -10%; width: clamp(360px, 36vw, 620px); height: clamp(360px, 36vw, 620px); background-image: url('assets/bg-9.webp'); background-size: contain; background-repeat: no-repeat; opacity: 0.10; pointer-events: none; } .section.about-section .container { position: relative; z-index: 1; } .about-grid { display: grid; grid-template-columns: 1fr; gap: 56px; } @media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1.2fr; gap: 96px; align-items: start; } } .about-quote { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); font-weight: 300; } .about-quote strong { font-weight: 700; } .about-paragraphs p { color: var(--ink-2); margin: 0 0 22px; font-size: 17px; line-height: 1.7; max-width: 56ch; } .about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); } .about-stats .v { font-family: var(--font-display); font-size: 44px; letter-spacing: -0.02em; line-height: 1; font-weight: 500; color: var(--ink); } .about-stats .l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 10px; } /* ---------- Engage / CTA ---------- */ .engage { background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); color: var(--ink); padding-block: clamp(96px, 11vw, 180px); position: relative; overflow: hidden; border-top: 1px solid var(--line); } .engage::before { content: ""; position: absolute; top: -10%; right: -15%; width: clamp(500px, 55vw, 900px); height: clamp(500px, 55vw, 900px); background-image: url('assets/bg-1.webp'); background-size: contain; background-repeat: no-repeat; opacity: 0.18; pointer-events: none; filter: blur(2px); } .engage .container { position: relative; z-index: 1; } .engage h2 { font-family: var(--font-display); font-size: clamp(40px, 6vw, 92px); letter-spacing: -0.02em; line-height: 1; margin: 16px 0 36px; color: var(--ink); font-weight: 300; max-width: 18ch; } .engage h2 strong { font-weight: 700; } .engage-grid { display: grid; grid-template-columns: 1fr; gap: 64px; align-items: start; } @media (min-width: 900px) { .engage-grid { grid-template-columns: 1.4fr 1fr; } } .engage-form { display: flex; flex-direction: column; gap: 0; max-width: 640px; } .engage-input { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 22px 4px; border-bottom: 1px solid var(--line-2); align-items: center; } .engage-input label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .engage-input input, .engage-input select { background: transparent; border: 0; outline: 0; color: var(--ink); font-family: var(--font-sans); font-size: 17px; width: 100%; } .engage-input input::placeholder { color: var(--faint); } .engage-input select option { color: #051633; background: #fff; } .engage .btn-primary { align-self: flex-start; margin-top: 28px; } .engage-contact { display: flex; flex-direction: column; gap: 32px; font-size: 15px; color: var(--ink-2); padding-left: clamp(0px, 2vw, 32px); border-left: 1px solid var(--line); } @media (max-width: 899px) { .engage-contact { border-left: 0; padding-left: 0; } } .engage-contact .block { display: flex; flex-direction: column; gap: 6px; padding-left: clamp(0px, 2vw, 24px); } .engage-contact .block .l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .engage-contact .block .v { color: var(--ink); font-size: 18px; font-weight: 500; } /* ---------- Footer ---------- */ .foot { background: var(--bg); border-top: 1px solid var(--line); padding-block: 64px 32px; } .foot-word { font-family: var(--font-display); font-size: clamp(56px, 11vw, 168px); line-height: 0.9; letter-spacing: -0.035em; color: var(--ink); margin: 0 0 72px; font-weight: 300; } .foot-word strong { font-weight: 700; } .foot-grid { display: grid; grid-template-columns: 1fr; gap: 48px; margin-bottom: 64px; } @media (min-width: 760px) { .foot-grid { grid-template-columns: 1.6fr repeat(3, 1fr); } } .foot-col h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; font-weight: 500; } .foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--ink-2); } .foot-col a { color: var(--ink-2); } .foot-col a:hover { color: var(--accent); } .foot-bot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } /* ---------- TCI Culture Wheel / Culturesphere feature ---------- */ .wheel-feature { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; background: var(--bg); border: 1px solid var(--line); padding: clamp(32px, 4vw, 64px); } @media (min-width: 980px) { .wheel-feature { grid-template-columns: 1fr 1fr; } } .wheel-feature-art { display: grid; place-items: center; position: relative; } .wheel-image { width: 100%; max-width: 540px; height: auto; display: block; border-radius: 50%; } .wheel-feature-body { display: flex; flex-direction: column; gap: 20px; } .csphere-logo { width: clamp(260px, 30vw, 380px); height: auto; display: block; margin: 0 0 4px; } .csphere-strap { font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 22px); font-weight: 400; color: var(--ink); margin: 0; letter-spacing: -0.005em; } .wheel-desc { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0; max-width: 56ch; } .wheel-desc strong { color: var(--ink); font-weight: 500; } .csphere-meta { margin: 12px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; } .csphere-meta > div { display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: baseline; } .csphere-meta dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0; } .csphere-meta dd { margin: 0; font-size: 14px; color: var(--ink); } .csphere-cta { margin-top: 12px; } /* CultureHealth section visual flourish */ .ch-section { position: relative; } .ch-section::after { content: ""; position: absolute; top: 5%; right: -8%; width: clamp(320px, 32vw, 560px); height: clamp(320px, 32vw, 560px); background-image: url('assets/bg-1.webp'); background-size: contain; background-repeat: no-repeat; opacity: 0.16; pointer-events: none; z-index: 0; } .ch-hero { position: relative; z-index: 1; } .ch-logo { width: clamp(260px, 30vw, 420px); } /* ---------- Practice cards (2x2 grid, varied gradient accents) ---------- */ .practice-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 760px) { .practice-grid { grid-template-columns: 1fr 1fr; gap: 28px; } } .practice-card { position: relative; padding: clamp(36px, 3.6vw, 56px); border: 1px solid var(--line); min-height: 360px; overflow: hidden; display: flex; flex-direction: column; gap: 20px; color: var(--ink); text-decoration: none; background: var(--bg-2); transition: transform 280ms ease, border-color 280ms ease; isolation: isolate; } .practice-card::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.55; z-index: -1; transition: opacity 320ms ease, transform 800ms ease; } .practice-card:hover { border-color: var(--accent); transform: translateY(-4px); } .practice-card:hover::before { opacity: 0.75; transform: scale(1.04); } /* Per-card brand-gradient backgrounds, each using a different bg-png + accent corner */ .practice-card:nth-child(1) { background: linear-gradient(135deg, #0a3358 0%, var(--bg-2) 65%); } .practice-card:nth-child(1)::before { background-image: url('assets/bg-2.webp'); background-position: center; background-size: cover; opacity: 0.55; } .practice-card:nth-child(2) { background: linear-gradient(225deg, #1c1a4a 0%, var(--bg-2) 60%); } .practice-card:nth-child(2)::before { background-image: url('assets/bg-1.webp'); background-position: center; background-size: cover; opacity: 0.55; } .practice-card:nth-child(3) { background: linear-gradient(135deg, #0e2853 0%, #0a1f43 70%); } .practice-card:nth-child(3)::before { background-image: url('assets/bg-9.webp'); background-position: center; background-size: cover; opacity: 0.55; } .practice-card:nth-child(4) { background: linear-gradient(225deg, #15214a 0%, var(--bg-2) 60%); } .practice-card:nth-child(4)::before { background-image: url('assets/bg-6.webp'); background-position: center; background-size: cover; opacity: 0.55; } .practice-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .practice-card-num { font-family: var(--font-display); font-size: clamp(40px, 4.4vw, 64px); font-weight: 200; letter-spacing: -0.04em; line-height: 1; color: var(--accent); } .practice-card-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); padding: 6px 12px; border: 1px solid var(--line-2); background: rgba(5,28,52,0.55); backdrop-filter: blur(4px); } .practice-card-title { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.022em; line-height: 1.1; margin: 12px 0 0; color: var(--ink); max-width: 22ch; } .practice-card-desc { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 50ch; } .practice-card-arrow { margin-top: auto; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); display: grid; place-items: center; align-self: flex-end; transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease; } .practice-card:hover .practice-card-arrow { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: rotate(-45deg); } /* ---------- Insight cards with varied tonal backgrounds ---------- */ .insight-card:hover h4 { color: var(--accent); } .insight-card h4 { transition: color 220ms ease; } /* ---------- Photo strip ---------- */ /* Intro section — photo backdrop on the right, navy bleed on the left */ .intro-section { position: relative; overflow: hidden; } .intro-photo { position: absolute; inset: 0 0 0 40%; background-image: url('assets/photos/audience-rob.webp'); background-size: cover; background-position: center; z-index: 0; filter: saturate(0.92) brightness(0.85); } .intro-overlay { position: absolute; inset: 0; background: linear-gradient(95deg, var(--bg) 0%, var(--bg) 35%, rgba(5,28,52,0.7) 55%, rgba(5,28,52,0.35) 100%); z-index: 1; } .intro-section .container { position: relative; z-index: 2; } .photo-strip { border-block: 1px solid var(--line); background: var(--bg); padding: 0; } .photo-strip-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); } @media (min-width: 760px) { .photo-strip-row { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } } .photo-strip-cell { margin: 0; background: var(--bg); height: clamp(220px, 30vw, 360px); overflow: hidden; position: relative; } .photo-strip-cell img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.92) contrast(1.02); transition: transform 600ms ease, filter 400ms ease; } .photo-strip-cell:hover img { transform: scale(1.04); filter: saturate(1.1) contrast(1.05); } /* ---------- Photo break ---------- */ .photo-break { position: relative; background-size: cover; background-position: center top; background-repeat: no-repeat; display: flex; align-items: center; overflow: hidden; border-block: 0; margin: 0; } .photo-break-tall { min-height: 70vh; padding-block: clamp(96px, 12vw, 180px); } .photo-break-short { min-height: 48vh; padding-block: clamp(72px, 9vw, 140px); } .photo-break-overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(5,28,52,0.92) 0%, rgba(5,28,52,0.55) 55%, rgba(5,28,52,0.30) 100%); z-index: 1; } .photo-break.align-right .photo-break-overlay { background: linear-gradient(-120deg, rgba(5,28,52,0.92) 0%, rgba(5,28,52,0.55) 55%, rgba(5,28,52,0.30) 100%); } .photo-break .container { position: relative; z-index: 2; } .photo-break .container { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); display: flex; flex-direction: column; } .photo-break.align-right .container { text-align: right; align-items: flex-end; } .photo-break.align-right .photo-break-logo { margin-left: auto; } .photo-break-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); display: inline-block; margin-bottom: 28px; } .photo-break-quote { margin: 0; max-width: 38ch; } .photo-break.align-right .photo-break-quote { max-width: 36ch; margin-left: auto; } .photo-break-logo { display: block; width: clamp(280px, 38vw, 540px); height: auto; margin-bottom: 32px; } .photo-break-logo-corner { position: absolute; top: clamp(24px, 3vw, 40px); right: clamp(32px, 4vw, 64px); width: clamp(280px, 38vw, 540px); height: auto; z-index: 3; } .photo-break-quote p { font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 58px); font-weight: 300; letter-spacing: -0.024em; line-height: 1.06; color: var(--ink); margin: 0 0 28px; text-shadow: 0 2px 24px rgba(0,0,0,0.4); } .photo-break-quote p strong { font-weight: 500; color: var(--accent); } .photo-break-cta { display: inline-flex; align-self: flex-start; align-items: center; gap: 14px; margin-top: 8px; padding: 14px 22px 14px 24px; border: 1px solid var(--accent); background: rgba(16, 238, 236, 0.08); color: var(--ink); font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; transition: background 220ms ease, color 220ms ease, transform 220ms ease, border-color 220ms ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .photo-break-cta:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: translateY(-2px); } .photo-break.align-right .photo-break-cta { align-self: flex-end; } .photo-break-quote cite { font-family: var(--font-mono); font-style: normal; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); display: inline-block; padding-top: 16px; border-top: 1px solid var(--line-2); } /* Dashboard variant — lighter overlay so the platform shows through */ .photo-break.variant-dashboard { background-size: 56% auto; background-position: right 5% bottom 8%; background-repeat: no-repeat; background-color: var(--bg); padding-top: clamp(72px, 8vw, 120px); } @media (max-width: 880px) { .photo-break.variant-dashboard { background-size: 110% auto; background-position: right -15% bottom -5%; } } .photo-break.variant-dashboard .photo-break-overlay { background: linear-gradient(95deg, var(--bg) 0%, var(--bg) 30%, rgba(5,28,52,0.85) 45%, rgba(5,28,52,0.20) 70%, transparent 100%); } /* ---------- Built to Burn book feature ---------- */ .book-feature { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 64px); align-items: start; padding-block: clamp(56px, 6vw, 96px); } @media (min-width: 760px) { .book-feature { grid-template-columns: 240px 1fr; gap: 72px; align-items: start; } } /* ---------- Built to Burn book mock — Option 1 (tilted, paper edges) ---------- */ .book-mock { position: relative; width: 100%; max-width: 200px; aspect-ratio: 2 / 3; transform: perspective(1600px) rotateY(-12deg) rotate(-2deg); transform-style: preserve-3d; filter: drop-shadow(0 30px 40px rgba(5,28,52,0.30)) drop-shadow(0 10px 16px rgba(5,28,52,0.18)); justify-self: center; margin: 56px 0 80px 24px; } .book-mock-cover { position: relative; width: 100%; height: 100%; background: #fff; border-radius: 2px 4px 4px 2px; overflow: hidden; z-index: 3; box-shadow: inset -8px 0 12px rgba(0,0,0,0.06), inset 4px 0 6px rgba(0,0,0,0.05); } .book-mock-cover img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; } /* page edges — right side, sits behind cover with slight Y-rotation */ .book-mock-pages { position: absolute; top: 0; bottom: 0; right: 0; width: 18px; background: linear-gradient(90deg, #d8d4c5 0%, #f5f3ed 30%, #f8f6f0 70%, #e8e4d8 100%), repeating-linear-gradient(to bottom, transparent 0, transparent 1px, rgba(5,28,52,0.04) 1.5px, transparent 2px); background-blend-mode: multiply; transform: rotateY(90deg) translateX(50%); transform-origin: right center; z-index: 2; box-shadow: inset 0 6px 8px rgba(5,28,52,0.10), inset 0 -6px 8px rgba(5,28,52,0.14); } /* back board — visible only as a sliver of darkness on the left edge */ .book-mock-back { position: absolute; top: 0; bottom: 0; left: 0; width: 18px; background: linear-gradient(180deg, #1a1a1a, #2a2a2a 50%, #1a1a1a); transform: rotateY(90deg) translateX(-50%); transform-origin: left center; z-index: 1; } .book-feature-body { display: flex; flex-direction: column; gap: 16px; } .book-feature-body p { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0; max-width: 56ch; } .book-columns { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 8px; } @media (min-width: 760px) { .book-columns { grid-template-columns: 1fr 1fr; gap: 40px; } } .book-columns p { font-size: 15px; line-height: 1.65; margin: 0 0 14px; max-width: none; } .book-columns p:last-child { margin-bottom: 0; } .book-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); } .book-title { font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 56px); font-weight: 300; letter-spacing: -0.025em; line-height: 1; margin: 4px 0 0; color: var(--ink); } .book-strap { font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 22px); font-weight: 400; letter-spacing: -0.005em; line-height: 1.3; color: var(--ink); margin: 4px 0 12px; max-width: 36ch; } .section.tone-light .book-feature-body p, .section.tone-light .book-feature-body .book-body { color: var(--ink-on-light); } .section.tone-light .book-feature-body .book-strap { color: var(--ink-on-light); } .section.tone-light .book-feature-body .book-eyebrow { color: var(--ink-on-light); } .section.tone-light .book-feature-body .book-meta { color: rgba(5,28,52,0.55); } .section.tone-light .book-title { color: var(--ink-on-light); } .book-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 12px; } /* ---------- Scroll-reveal ---------- */ .fade-in { opacity: 0; transform: translateY(16px); transition: opacity 700ms ease, transform 700ms ease; } .fade-in.in { opacity: 1; transform: none; } .page-hero { position: relative; padding-block: clamp(140px, 16vw, 260px) clamp(80px, 9vw, 144px); overflow: hidden; border-bottom: 1px solid var(--line); min-height: 60vh; } .page-hero .container { position: relative; z-index: 3; max-width: 1100px; } /* Default gradient background — large brand sphere */ .page-hero-gradient { position: absolute; top: 0; right: -12%; width: clamp(700px, 70vw, 1200px); height: clamp(700px, 70vw, 1200px); background-image: url('assets/bg-2.webp'); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.78; filter: saturate(0.95); z-index: 1; transform: rotate(90deg); } .page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(95deg, var(--bg) 0%, rgba(5,28,52,0.55) 18%, transparent 45%), linear-gradient(180deg, transparent 0%, transparent 50%, rgba(5,28,52,0.7) 85%, var(--bg) 100%); z-index: 2; } .page-hero.variant-warm .page-hero-gradient { background-image: url('assets/bg-1.webp'); top: -10%; right: -20%; width: clamp(700px, 80vw, 1300px); height: clamp(700px, 80vw, 1300px); } .page-hero.variant-prism .page-hero-gradient { background-image: url('assets/bg-9.webp'); top: 5%; right: -15%; opacity: 0.62; } .page-hero.variant-stage .page-hero-gradient { background-image: url('assets/bg-6.webp'); top: -5%; right: -10%; } .page-hero.variant-cyan .page-hero-gradient { background-image: url('assets/bg-4-cyan.webp'); top: -10%; right: -15%; opacity: 0.88; } .page-hero.variant-asterisk .page-hero-gradient { background-image: url('assets/bg-9-asterisk.webp'); top: -8%; right: -12%; opacity: 0.92; } .page-hero.variant-violet .page-hero-gradient { background-image: url('assets/bg-8-tilted.webp'); top: -10%; right: -15%; opacity: 0.88; } .page-hero-art { position: absolute; inset: 0; background-size: cover; background-position: center 20%; z-index: 1; filter: saturate(0.92); } .page-hero.has-art .page-hero-overlay { background: linear-gradient(95deg, var(--bg) 0%, rgba(5,28,52,0.75) 30%, rgba(5,28,52,0.50) 70%, rgba(5,28,52,0.85) 100%); } .page-hero-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 14px; margin-bottom: 28px; } .page-hero-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent); } .page-hero-title { font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 60px); font-weight: 300; letter-spacing: -0.024em; line-height: 1.06; color: var(--ink); margin: 0; max-width: 22ch; } .page-hero-title strong { font-weight: 500; color: var(--accent); } .page-hero-kicker { margin: 28px 0 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 60ch; } /* Section with aside (visual side panel) */ .section-body-split { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; } @media (min-width: 920px) { .section-body-split { grid-template-columns: 1.2fr 1fr; } } .section-body-main { min-width: 0; } .section-body-aside { position: relative; } /* Section tone variants — alternating depth so pages aren't single-colour */ .section.tone-darker { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section.tone-tint { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* WHITE PANEL — deep contrast inversion, clean & uniform. Rule: navy ink only; accents are navy too. No lilac/light purple on white. */ .section.tone-light { background: #ffffff; color: var(--ink-on-light); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; } .section.tone-light::before { content: none; } .section.tone-light .container { position: relative; z-index: 1; } .section.tone-light .section-title, .section.tone-light .display { color: var(--ink-on-light); } .section.tone-light .section-title strong { color: var(--ink-on-light); font-weight: 600; } .section.tone-light .section-kicker { color: rgba(5,28,52,0.72); } .section.tone-light .section-num { color: var(--ink-on-light); } .section.tone-light .section-num::before { background: var(--ink-on-light); } .section.tone-light .kv-list { background: transparent; border-top-color: var(--ink-on-light); } .section.tone-light .kv-list > div { border-bottom-color: rgba(5,28,52,0.10); } .section.tone-light .kv-list > div:hover { background: rgba(5,28,52,0.03); } .section.tone-light .kv-list dt { color: var(--ink-on-light); } .section.tone-light .kv-list dd { color: var(--ink-on-light); } .section.tone-light .kv-list dd p { color: rgba(5,28,52,0.72); } .section.tone-light .prose p { color: var(--ink-on-light); } .section.tone-light .prose p.lead { color: var(--ink-on-light); } .section.tone-light .prose p strong { color: var(--ink-on-light); font-weight: 600; } /* aside cards stay deep navy for tight contrast pocket */ .section.tone-light .aside-stat, .section.tone-light .aside-quote { background: #051c34; border: 0; color: var(--ink); box-shadow: 0 24px 60px -20px rgba(5,28,52,0.25); } .section.tone-light .aside-stat::before, .section.tone-light .aside-quote::before { display: none; } .section.tone-light .aside-stat-value { color: #10eeec; } .section.tone-light .aside-quote-text { color: var(--ink); } /* WARM / VIOLET / dark variants — keep deep navy, just add brand-art */ .section.tone-warm { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; } .section.tone-warm::before { content: ""; position: absolute; inset: -10% -15% auto auto; width: 55%; height: 130%; background-image: url('assets/bg-4-rainbow.webp'); background-size: contain; background-repeat: no-repeat; background-position: center right; opacity: 0.85; pointer-events: none; z-index: 0; } .section.tone-warm .container { position: relative; z-index: 1; } .section.tone-violet { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; } .section.tone-violet::before { content: ""; position: absolute; inset: auto auto -25% -15%; width: 55%; height: 130%; background-image: url('assets/bg-8-tilted.webp'); background-size: contain; background-repeat: no-repeat; opacity: 0.88; pointer-events: none; z-index: 0; } .section.tone-violet .container { position: relative; z-index: 1; } /* Cyan-leaning dark section variant */ .section.tone-cyan { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; } .section.tone-cyan::before { content: ""; position: absolute; inset: -15% -10% auto auto; width: 50%; height: 130%; background-image: url('assets/bg-4-cyan.webp'); background-size: contain; background-repeat: no-repeat; opacity: 0.85; pointer-events: none; z-index: 0; } .section.tone-cyan .container { position: relative; z-index: 1; } /* Prism — rainbow disc, off-centre */ .section.tone-prism { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; } .section.tone-prism::before { content: ""; position: absolute; inset: -10% auto auto -10%; width: 45%; height: 130%; background-image: url('assets/bg-3-pill.webp'); background-size: contain; background-repeat: no-repeat; opacity: 0.78; pointer-events: none; z-index: 0; } .section.tone-prism .container { position: relative; z-index: 1; } /* ---------- Page CTA card ---------- */ .page-cta { padding-block: clamp(56px, 6vw, 112px); } .page-cta-card { background: var(--bg-2); border: 1px solid var(--line); padding: clamp(36px, 4vw, 64px); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; position: relative; overflow: hidden; } .page-cta-card::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 60%; height: 140%; background-image: url('assets/bg-9.webp'); background-size: contain; background-repeat: no-repeat; background-position: center right; opacity: 0.14; pointer-events: none; } .page-cta-card > * { position: relative; z-index: 1; } .page-cta-title { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 44px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; margin: 0; max-width: 22ch; color: var(--ink); } .page-cta-body { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 56ch; } /* ---------- Hero kicker (replaces hairlines) ---------- */ .hero-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 36px; font-size: 13px; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.04em; flex-wrap: wrap; } .hero-kicker-tag { display: inline-flex; align-items: center; padding: 5px 12px; background: var(--accent); color: var(--on-accent); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; } .hero h1 { margin: 0 0 32px; font-size: clamp(36px, 4.6vw, 64px); font-weight: 300; letter-spacing: -0.024em; line-height: 1.05; max-width: 22ch; } .hero h1 em { font-style: normal; color: var(--accent); font-weight: 500; } .hero-sub { margin: 0 0 36px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 52ch; } /* ---------- Client strip ---------- */ .client-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 32px; } .client-strip-inner { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; } .client-strip-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); flex: none; } .client-strip-logos { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); align-items: center; flex: 1; } .client-strip-logo { position: relative; width: clamp(96px, 11vw, 140px); height: 56px; display: grid; place-items: center; transition: opacity 220ms ease; opacity: 0.55; } .client-strip-logo:hover { opacity: 1; } .client-strip-logo image-slot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; } .client-strip-logo image-slot::part(img) { object-fit: contain; filter: brightness(0) invert(1); } .client-strip-fallback { font-family: var(--font-display); font-size: clamp(14px, 1.2vw, 17px); font-weight: 500; color: var(--ink); letter-spacing: -0.005em; z-index: 1; text-align: center; } .client-strip-logo:has(image-slot[data-filled="true"]) .client-strip-fallback { display: none; } /* ---------- Karl Expert ---------- */ .karl { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; } .karl::before { content: ""; position: absolute; inset: 0; background-image: url('assets/photos/karl-walking.webp'); background-size: cover; background-position: center; opacity: 0.45; z-index: 0; filter: saturate(0.92); transform: scaleX(-1); } .karl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,39,71,0.4) 0%, rgba(10,39,71,0.85) 100%); z-index: 0; } .karl .container { position: relative; z-index: 1; } .karl-grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; } @media (min-width: 900px) { .karl-grid { grid-template-columns: 240px 1.6fr; } } .karl-portrait { aspect-ratio: 4 / 5; max-width: 240px; background: var(--bg-3); border: 1px solid var(--line); position: relative; overflow: hidden; } .karl-portrait-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .karl-body { display: flex; flex-direction: column; gap: 20px; } .karl-body .section-title { margin-top: 16px; } .karl-credentials { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin: 0; padding: 16px 0; border-block: 1px solid var(--line); } .karl-credentials em { color: var(--accent); font-style: italic; } .karl-bio { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0; max-width: 60ch; } .karl-cta { margin-top: 12px; } /* ---------- Case studies ---------- */ .cases-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 900px) { .cases-grid { grid-template-columns: repeat(3, 1fr); } } .case-card { background: var(--bg); padding: clamp(32px, 3vw, 48px); display: flex; flex-direction: column; gap: 20px; min-height: 460px; transition: background 200ms ease; } .case-card:hover { background: var(--surface); } .case-metric { display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .case-metric-value { font-family: var(--font-display); font-size: clamp(56px, 6vw, 88px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--accent); } .case-metric-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .case-sector { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); } .case-title { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; margin: 0; color: var(--ink); } .case-desc { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; } .case-card .btn-link { margin-top: auto; } /* ---------- Publications ---------- */ .pubs-grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 3vw, 48px); } @media (min-width: 760px) { .pubs-grid { grid-template-columns: repeat(3, 1fr); } } .pub-card { display: flex; flex-direction: column; gap: 22px; } .pub-cover { aspect-ratio: 3 / 4; background: var(--bg-2); background-size: cover; background-position: center; background-repeat: no-repeat; border: 1px solid var(--line); position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 20px 24px 60px -20px rgba(0,0,0,0.6), -1px 0 0 rgba(0,0,0,0.4) inset; transition: transform 320ms ease, box-shadow 320ms ease; } .pub-card:hover .pub-cover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 24px 32px 80px -20px rgba(0,0,0,0.7), -1px 0 0 rgba(0,0,0,0.4) inset; } /* spine accent on left edge */ .pub-cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%); z-index: 3; } /* user-droppable photo slot fills the cover */ .pub-cover image-slot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 200ms ease; } .pub-cover image-slot[data-filled="true"] { opacity: 1; } /* dark gradient overlay so title is legible over any photo */ .pub-cover-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,28,52,0.3) 0%, rgba(5,28,52,0.15) 40%, rgba(5,28,52,0.85) 100%); z-index: 2; } .pub-cover-content { position: absolute; inset: 0; z-index: 3; padding: 24px 24px 28px 32px; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); } .pub-cover-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .pub-cover-mark { height: 22px; width: auto; opacity: 0.92; } .pub-cover-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); padding: 5px 10px; border: 1px solid rgba(255,255,255,0.4); background: rgba(5,28,52,0.45); backdrop-filter: blur(6px); } .pub-cover-title-block { display: flex; flex-direction: column; gap: 12px; } .pub-cover-title { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; margin: 0; color: var(--ink); text-shadow: 0 1px 12px rgba(0,0,0,0.4); max-width: 14ch; } .pub-cover-edition { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244,246,250,0.75); padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.25); } .pub-body { display: flex; flex-direction: column; gap: 12px; } .pub-desc { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; } /* ---------- Sample CultureHealth report ---------- */ .sample-section { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ch-sample { background: var(--bg); border: 1px solid var(--line); padding: clamp(28px, 3vw, 48px); display: flex; flex-direction: column; gap: 28px; } .ch-sample-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .ch-sample-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .ch-sample-title { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -0.015em; margin: 8px 0 0; } .ch-sample-overall { text-align: right; display: flex; flex-direction: column; gap: 4px; } .ch-sample-overall-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .ch-sample-overall-value { font-family: var(--font-display); font-size: clamp(48px, 5vw, 64px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--accent); } .ch-sample-overall-value .of { font-size: 0.4em; color: var(--muted); margin-left: 2px; } .ch-sample-rows { display: flex; flex-direction: column; gap: 18px; } .ch-sample-row { display: grid; grid-template-columns: 130px 1fr 50px 90px; gap: 20px; align-items: center; } @media (max-width: 640px) { .ch-sample-row { grid-template-columns: 110px 1fr 40px; row-gap: 8px; } .ch-sample-band { grid-column: 1 / -1; } } .ch-sample-row-label { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--ink); } .ch-sample-bar { height: 10px; background: var(--line); position: relative; overflow: hidden; } .ch-sample-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-soft) 100%); } .ch-sample-score { font-family: var(--font-mono); font-size: 14px; color: var(--ink); text-align: right; font-weight: 500; } .ch-sample-band { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; padding: 5px 10px; border: 1px solid var(--line-2); } .ch-sample-band.band-healthy { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, transparent); } .ch-sample-band.band-watch { color: #ffb155; border-color: color-mix(in oklab, #ffb155 50%, transparent); } .ch-sample-band.band-low { color: var(--muted); border-color: var(--line-2); } .ch-sample-foot { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; max-width: 64ch; }