/* audience-common.css — extends master-common.css for /markets/, /sectors/, /case-studies/, /field-guides/, /careers/ */ /* Audience hero — flat dark band, code badge, lede, no video */ #abt .aud-hero { background: #0a0a0c; color: #fafaf9; padding: 4rem 0 3rem; position: relative; overflow: hidden; } #abt .aud-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.12); z-index: 3; } #abt .aud-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.12); z-index: 3; } /* Hero stock-image (optional): set via inline style="background-image:url(...)" */ /* Treatment is intentionally MILDER than before so photos are visible & impactful */ /* (was: grayscale 60% / brightness 0.45 / opacity 0.55 — washed out) */ #abt .aud-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(15%) brightness(0.62) saturate(1.05); opacity: 0.85; z-index: 0; } #abt .aud-hero-tint { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(2,109,191,0.22) 0%, rgba(10,10,12,0.55) 60%, rgba(10,10,12,0.75) 100%); z-index: 1; } /* ---- KALEIDOSCOPE HERO (used on service-line + upstream hubs) ---- */ /* 2x2 grid of mirrored video copies. Cell 1 normal, 2 flipped X, 3 flipped Y, 4 flipped XY. Browser caches the WebM after first decode; cells 2-4 share buffers efficiently. */ #abt .aud-hero-kaleido { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; overflow: hidden; pointer-events: none; } #abt .aud-hero-kaleido .kaleido-cell { width: 100%; height: 100%; object-fit: cover; opacity: 0.78; filter: grayscale(45%) saturate(1.12) brightness(0.72); } #abt .aud-hero-kaleido .kaleido-cell-1 { transform: scale(1, 1); } #abt .aud-hero-kaleido .kaleido-cell-2 { transform: scale(-1, 1); } #abt .aud-hero-kaleido .kaleido-cell-3 { transform: scale(1, -1); } #abt .aud-hero-kaleido .kaleido-cell-4 { transform: scale(-1, -1); } /* Soft brand-blue vignette ring tinting the kaleidoscope center & masking the seams. */ #abt .aud-hero-kaleido-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 0%, rgba(10,10,12,0.18) 38%, rgba(10,10,12,0.55) 75%, rgba(10,10,12,0.78) 100%), linear-gradient(0deg, var(--kaleido-accent, #3B9DEB) 0%, transparent 8%); mix-blend-mode: normal; } #abt .aud-hero-kaleido-vignette::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,109,191,0.10) 0%, transparent 30%, transparent 70%, rgba(2,109,191,0.10) 100%); } /* Hide the kaleidoscope altogether when the user prefers reduced motion. The underlying flat dark `.aud-hero` background remains; text stays legible. */ @media (prefers-reduced-motion: reduce) { #abt .aud-hero-kaleido { display: none; } #abt .aud-hero-kaleido-vignette { display: none; } } /* ---- FEATURE FIGURE — full-bleed cinematic image w/ scroll-driven zoom ---- Webflow / Awwwards-style "ken burns" parallax: the image scales from 1.18 to 1.0 as the section passes through the viewport. Native CSS where supported, JS fallback in js_block for Firefox + older Safari. */ /* The section wrapper kills horizontal padding so the figure goes edge-to-edge */ #abt .feature-figure-section { padding-left: 0 !important; padding-right: 0 !important; } #abt .feature-figure-section > .reveal-fade { padding: 0; } /* Base figure styles (kept for backwards-compat with any old non-bleed usage) */ #abt .feature-figure { position: relative; margin: 2.5rem 0; border: 1px solid #d4cdc0; border-radius: 6px; overflow: hidden; } #abt .feature-figure-img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; filter: grayscale(8%) saturate(1.05); } /* FULL-BLEED variant — the new default. No border, no rounded corners, fills the section width. Aspect ratio is taller (4/3 mobile → 21/9 desktop) so the image reads as a cinematic frame, not a thin band. */ #abt .feature-figure-bleed { margin: 0; border: 0; border-radius: 0; aspect-ratio: 4 / 3; max-width: 100%; } @media (min-width: 768px) { #abt .feature-figure-bleed { aspect-ratio: 21 / 9; } } @media (min-width: 1280px) { #abt .feature-figure-bleed { aspect-ratio: 24 / 9; } } /* Zoom container — clips the over-scaled image. Image inside scales between 1.18 → 1.0 driven by scroll (CSS view-timeline OR JS rAF fallback). */ #abt .feature-figure-zoom { position: absolute; inset: 0; overflow: hidden; } #abt .feature-figure-bleed .feature-figure-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transform: scale(1.18); transform-origin: center center; will-change: transform; transition: transform 0.05s linear; } /* Native scroll-driven zoom (Chrome 115+ / Edge / Safari 26+). Maps the image's transform to its position within the viewport — image reaches scale(1) at the natural mid-scroll point and the bleed is invisible. */ @supports (animation-timeline: view()) { #abt .feature-figure-bleed .feature-figure-img { animation: ff-zoom linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; transition: none; } } @keyframes ff-zoom { from { transform: scale(1.22); } to { transform: scale(1.02); } } /* Caption — overlay at bottom, constrained max-width with center alignment */ #abt .feature-figure-cap { position: absolute; left: 0; right: 0; bottom: 1.4rem; z-index: 2; color: #fafaf9; } #abt .feature-figure-cap-inner { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 768px) { #abt .feature-figure-cap { bottom: 2.2rem; } #abt .feature-figure-cap-inner { padding: 0 2.5rem; } } #abt .feature-figure-cap-band { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,12,0.88) 0%, rgba(10,10,12,0.45) 30%, rgba(10,10,12,0.0) 65%); z-index: 1; pointer-events: none; } #abt .feature-figure-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; color: #3B9DEB; margin-bottom: 0.5rem; } #abt .feature-figure-title { font-family: 'Fraunces', serif; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: #fafaf9; max-width: 920px; } @media (min-width: 768px) { #abt .feature-figure-title { font-size: 1.85rem; } } @media (min-width: 1280px) { #abt .feature-figure-title { font-size: 2.15rem; } } /* Reduced-motion: no scroll-zoom, settle on scale(1) */ @media (prefers-reduced-motion: reduce) { #abt .feature-figure-bleed .feature-figure-img { animation: none !important; transform: scale(1.04) !important; } } #abt .aud-hero > .max-w-7xl { position: relative; z-index: 2; } #abt .aud-code { display: inline-flex; align-items: center; gap: 0.6rem; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; color: #d6d3d1; margin-bottom: 1.5rem; flex-wrap: wrap; } #abt .aud-code .badge { background: #3B9DEB; color: #0a0a0c; padding: 0.25rem 0.55rem; letter-spacing: 0.12em; font-weight: 800; } #abt .aud-code a { color: #a8a29e; text-decoration: none; } #abt .aud-code a:hover { color: #fafaf9; } #abt .aud-h1 { font-family: 'Fraunces', serif; font-size: 2.4rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: #fafaf9; margin-bottom: 1rem; } @media (min-width: 768px) { #abt .aud-h1 { font-size: 3.2rem; } } @media (min-width: 1024px) { #abt .aud-h1 { font-size: 3.6rem; } } #abt .aud-h1 .accent { color: #3B9DEB; font-style: italic; } #abt .aud-lede { font-size: 1.05rem; color: #d6d3d1; max-width: 60ch; line-height: 1.55; margin-bottom: 1.6rem; } /* HERO 2-COLUMN GRID — left = positioning copy / oversized name / CTAs; right = floating spec card. Mirrors the homepage hero pattern (left text + right specimen) so service-hub heroes don't read as left-loaded against the kaleidoscope video. Below 1024px collapses to single column with the spec card stacking under the CTAs. */ #abt .aud-hero-grid { display: grid; grid-template-columns: 1fr; gap: 2.2rem; align-items: start; } @media (min-width: 1024px) { #abt .aud-hero-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3rem; align-items: center; } } /* HERO SPEC CARD — glass panel on the right of service-hub heroes. Backdrop-blur on the kaleidoscope video, brand-blue tonal border-left (per-hub via --card-accent), Fraunces italic title, dashed-rule spec rows, mono dossier footer. Same design vocabulary as the homepage hero-spec. */ #abt .aud-hero-card { background: rgba(10,10,12,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; padding: 1.4rem 1.5rem; max-width: 420px; margin-left: auto; } #abt .aud-hero-card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.8rem; margin-bottom: 1rem; border-bottom: 1px dashed rgba(255,255,255,0.18); font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.16em; color: #a8a29e; font-weight: 700; text-transform: uppercase; } #abt .aud-hero-card-head .stamp { background: var(--card-accent, #3B9DEB); color: #0a0a0c; padding: 0.2rem 0.55rem; letter-spacing: 0.12em; font-size: 0.58rem; } #abt .aud-hero-card-title { font-family: 'Fraunces', serif; font-style: italic; font-size: 0.98rem; color: #fafaf9; margin-bottom: 1rem; line-height: 1.4; } #abt .aud-hero-card-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 0.6rem 0; border-top: 1px dashed rgba(255,255,255,0.13); align-items: baseline; } #abt .aud-hero-card-row:first-of-type { border-top: 0; padding-top: 0.3rem; } #abt .aud-hero-card-row .lbl { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: #a8a29e; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4; } #abt .aud-hero-card-row .val { font-family: 'Fraunces', serif; font-weight: 700; color: var(--card-accent, #3B9DEB); font-size: 1rem; line-height: 1.1; text-align: right; white-space: nowrap; } #abt .aud-hero-card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 0.95rem; margin-top: 0.95rem; border-top: 1px solid rgba(255,255,255,0.2); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; color: #fafaf9; text-decoration: none; transition: color 0.3s ease; } #abt .aud-hero-card-foot:hover { color: var(--card-accent, #3B9DEB); } #abt .aud-hero-card-foot .arrow { transition: transform 0.3s ease; } #abt .aud-hero-card-foot:hover .arrow { transform: translateY(3px); } /* QUASAR-style oversized opener — used on service-hub & upstream hero blocks */ #abt .aud-hero-mark { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.2rem; flex-wrap: wrap; } #abt .aud-hero-glyph { width: 76px; height: 76px; flex-shrink: 0; } #abt .aud-hero-glyph svg { width: 100%; height: 100%; stroke: #3B9DEB; fill: none; stroke-width: 1.4; } #abt .aud-hero-name { font-family: 'Fraunces', serif; font-style: italic; font-weight: 800; font-size: 4.5rem; line-height: 0.95; letter-spacing: -0.03em; color: #fafaf9; margin: 0; } @media (min-width: 768px) { #abt .aud-hero-name { font-size: 6rem; } #abt .aud-hero-glyph { width: 92px; height: 92px; } } @media (min-width: 1280px) { #abt .aud-hero-name { font-size: 7rem; } #abt .aud-hero-glyph { width: 104px; height: 104px; } } #abt .aud-hero-kicker { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: 1.35rem; line-height: 1.25; color: #3B9DEB; margin: 0 0 1rem; max-width: 50ch; } @media (min-width: 768px) { #abt .aud-hero-kicker { font-size: 1.55rem; } } #abt .aud-meta { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: #a8a29e; letter-spacing: 0.04em; padding-top: 1.4rem; border-top: 1px dashed rgba(255,255,255,0.18); } #abt .aud-meta strong { color: #fafaf9; font-weight: 600; } /* Context paragraph — three-column editorial block */ #abt .aud-context { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; border-bottom: 1px solid #d4cdc0; } @media (min-width: 1024px) { #abt .aud-context { grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; } } #abt .aud-context h3 { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #026DBF; margin-bottom: 0.85rem; padding-bottom: 0.5rem; border-bottom: 1px solid #0a0a0c; } #abt .aud-context p { font-size: 0.94rem; line-height: 1.6; color: #57534e; } #abt .aud-context p strong { color: #0a0a0c; } #abt .aud-context ul { font-size: 0.92rem; line-height: 1.6; color: #57534e; padding-left: 0; list-style: none; } #abt .aud-context ul li { padding-left: 0; margin-bottom: 0.5rem; } #abt .aud-context ul li::before { content: '→ '; color: #026DBF; font-weight: 700; } /* Spec strip / sheet */ #abt .aud-spec { background: #fcfaf6; border: 1px solid #d4cdc0; padding: 1.4rem 1.5rem; } #abt .aud-spec-head { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; color: #565658; padding-bottom: 0.7rem; border-bottom: 1px dashed #d4cdc0; margin-bottom: 0.7rem; display: flex; justify-content: space-between; } #abt .aud-spec-head .stamp { background: #026DBF; color: white; padding: 0.18rem 0.5rem; font-size: 0.58rem; } #abt .aud-spec-row { display: grid; grid-template-columns: 130px 1fr; padding: 0.5rem 0; border-top: 1px dashed #e7e2d9; font-size: 0.82rem; } #abt .aud-spec-row:first-of-type { border-top: 0; padding-top: 0.6rem; } #abt .aud-spec-row .lbl { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: #8a857c; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 0.18rem; } #abt .aud-spec-row .val { color: #0a0a0c; } /* Case-metrics stat-tile grid — for the RESULTS section on case-study pages. Replaces the .aud-spec-row pattern there because results metrics often have long descriptive labels paired with short tag values, which leaves the right column visually under-weighted in a row layout. The stat-tile gives the value Fraunces visual weight regardless of length, with the descriptive detail underneath in body text. Auto-fit grid responds to viewport width. */ #abt .case-metrics-card { background: #fcfaf6; border: 1px solid #d4cdc0; border-radius: 4px; overflow: hidden; } #abt .case-metrics-head { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; color: #565658; padding: 0.95rem 1.4rem; border-bottom: 1px dashed #d4cdc0; display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; } #abt .case-metrics-head .stamp { background: #026DBF; color: #fff; padding: 0.22rem 0.55rem; font-size: 0.58rem; letter-spacing: 0.14em; border-radius: 2px; } #abt .case-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; } #abt .case-metric-tile { padding: 1.4rem 1.5rem 1.5rem; border-bottom: 1px dashed #e7e2d9; border-right: 1px dashed #e7e2d9; position: relative; transition: background 0.18s ease; } #abt .case-metric-tile:hover { background: rgba(2,109,191,0.025); } #abt .case-metric-tile::before { content: ''; position: absolute; left: 0; top: 1.4rem; height: 1.6rem; width: 3px; background: linear-gradient(180deg, #026DBF, #3B9DEB); border-radius: 0 2px 2px 0; opacity: 0.55; } #abt .case-metric-headline { font-family: 'Fraunces', serif; font-size: 1.85rem; font-weight: 700; color: #026DBF; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 0.55rem; } #abt .case-metric-detail { font-size: 0.86rem; color: #2a2a2c; line-height: 1.5; } @media (max-width: 640px) { #abt .case-metrics-grid { grid-template-columns: 1fr; } #abt .case-metric-headline { font-size: 1.55rem; } } /* === CARD SYSTEM REFERENCE (documented 2026-05-12 Tier 2) === The site has multiple card classes — each optimized for its context. This block documents the system so future contributors know which to use. ┌────────────────┬────────────────────┬──────────────────────────────────────┐ │ Class │ Used in │ When to use │ ├────────────────┼────────────────────┼──────────────────────────────────────┤ │ .specimen-card │ NEW work only │ Shared base; extend via class stack │ │ .svc-card │ home, service hubs │ Flagship: image + hover-dark flip │ │ .case-tile │ case-studies hub │ Outcome-led: BIG metric eyebrow │ │ .calc-card │ /calculators/ hub │ I/O schematic + paper card │ │ .calc-tile │ home calc-band │ Compact dark-stage tile (no image) │ │ .blog-card │ /blog/, related │ Image + meta + tags + foot │ │ .hub-card │ sectors, markets, │ Polymorphic; see hub-card doc above │ │ │ field-guides, 404 │ │ │ .ci-card │ inline calc promo │ Paper-on-dark calc promo card │ │ .pillar │ home, about │ Editorial pillar (no card chrome) │ │ .index-card │ about │ Numbered 4-up pillar card │ │ .career-role │ /careers/ │ Horizontal row-card (full-width) │ │ .feed-block │ sectors, markets │ Sidebar feed widget │ │ .testimonial │ home │ Quote + attribution card │ │ .contact-card │ /contact/ │ Inline-styled contact info card │ └────────────────┴────────────────────┴──────────────────────────────────────┘ PRIMITIVES SHARED ACROSS ALL CARD CLASSES (set via comma selector below): - anchor reset (text-decoration: none, color: inherit) - "no chunky left border" rule (per OPERATING-PLAYBOOK rule #20) Per-class CSS only contains what's unique to that variant. NEW WORK should prefer .specimen-card + modifier classes. Existing cards are not being migrated en masse — the visual + UX is well-tuned per context; mass rename brings regression risk for cosmetic gain. */ /* === Shared anchor-card reset (applies across all card classes) === */ #abt a.specimen-card, #abt a.svc-card, #abt a.case-tile, #abt a.calc-card, #abt a.calc-tile, #abt a.blog-card, #abt a.hub-card, #abt a.ci-card, #abt a.career-role { text-decoration: none; color: inherit; } /* === .specimen-card — the canonical primitive for NEW card work === Hairline border, paper-cream surface, hover lift, anchor reset. Use class stack: to add image-band behavior, --inverted to add dark hover, --horizontal for row-card layout. Per the table above, this is OPTIONAL — existing cards have their own well-tuned classes. */ #abt .specimen-card { display: flex; flex-direction: column; background: var(--c-paper, #fcfaf6); border: 1px solid var(--c-paper-border, #d4cdc0); border-radius: var(--r-sm, 6px); padding: 1.2rem 1.4rem; text-decoration: none; color: inherit; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; position: relative; } #abt .specimen-card:hover { transform: translateY(-3px); border-color: var(--c-brand, #026DBF); box-shadow: var(--shadow-brand-sm, 0 8px 24px -8px rgba(2,109,191,0.30)); } #abt .specimen-card--media { padding: 0; overflow: hidden; } #abt .specimen-card--media > .specimen-card-image { aspect-ratio: 16 / 9; overflow: hidden; background: #f4f0e8; } #abt .specimen-card--media > .specimen-card-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(40%); transition: filter 0.3s, transform 0.6s cubic-bezier(0.22,1,0.36,1); } #abt .specimen-card--media:hover > .specimen-card-image img { filter: grayscale(0%); transform: scale(1.04); } #abt .specimen-card--media > .specimen-card-body { padding: 1.2rem 1.4rem 1.4rem; flex: 1; } #abt .specimen-card--horizontal { flex-direction: row; align-items: center; gap: 1.5rem; } #abt .specimen-card--inverted:hover { background: var(--c-ink, #0a0a0c); color: #fafaf9; } /* Service-line cards reframed */ #abt .aud-services { padding: 3rem 0; border-bottom: 1px solid #d4cdc0; } #abt .aud-services-h { font-family: 'Fraunces', serif; font-size: 1.6rem; font-weight: 700; color: #0a0a0c; margin-bottom: 0.5rem; letter-spacing: -0.015em; } #abt .aud-services-sub { color: #57534e; font-size: 0.95rem; margin-bottom: 1.8rem; max-width: 60ch; } #abt .aud-services-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { #abt .aud-services-grid { grid-template-columns: repeat(3, 1fr); } } /* Hub catalog grid */ /* === .hub-card — the umbrella card pattern for hub indexes === Documented variants (these are INTENTIONAL, not drift — 2026-05-12): 1. WITH-IMAGE → sectors, markets, field-guides, case-studies (legacy) Has
; visual + image. 2. WITHOUT-IMAGE → 404 page No
; CSS gracefully omits. 3. CODE: PILL + PLAIN → sectors, markets, 404 CODESECTION 4. CODE: PILL + LIGHT → field-guides FG-0114 min The pill-light variant is for meta info (read time, etc.), not a section label. If you create a new hub-card variant, document it here. */ #abt .hub-grid { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid #d4cdc0; background: #fff; } @media (min-width: 768px) { #abt .hub-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { #abt .hub-grid { grid-template-columns: repeat(4, 1fr); } } #abt .hub-card { padding: 1.4rem 1.5rem; border-right: 1px solid #e7e2d9; border-bottom: 1px solid #e7e2d9; text-decoration: none; color: inherit; transition: background 0.2s, color 0.2s; display: flex; flex-direction: column; min-height: 220px; overflow: hidden; } #abt .hub-card:hover { background: #fcfaf6; } #abt .hub-card:hover .hub-card-h { color: #026DBF; } /* Optional image at top of hub card — present on sectors/markets/cases/guides hubs. Pulls negative margins to reach card edge; brand-blue duotone overlay matches the editorial treatment used on aud-hero + blog-card images. */ #abt .hub-card-img { position: relative; margin: -1.4rem -1.5rem 1rem; aspect-ratio: 16 / 9; overflow: hidden; background: #f4f0e8; } #abt .hub-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(45%); transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), filter 0.3s ease; } #abt .hub-card:hover .hub-card-img img { transform: scale(1.05); filter: grayscale(10%); } #abt .hub-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(2,109,191,0.20) 0%, rgba(10,10,12,0.05) 60%, rgba(59,157,235,0.10) 100%); pointer-events: none; } #abt .hub-card-code { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; color: #565658; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } #abt .hub-card-code .pill { background: #026DBF; color: white; padding: 0.16rem 0.48rem; letter-spacing: 0.12em; } #abt .hub-card-code .pill-light { background: rgba(2,109,191,0.12); color: #026DBF; padding: 0.16rem 0.48rem; letter-spacing: 0.1em; font-weight: 700; } #abt .hub-card-h { font-family: 'Fraunces', serif; font-size: 1.18rem; font-weight: 700; color: #0a0a0c; line-height: 1.2; margin-bottom: 0.6rem; transition: color 0.2s; } #abt .hub-card-body { font-size: 0.82rem; color: #57534e; line-height: 1.5; flex-grow: 1; margin-bottom: 0.85rem; } #abt .hub-card-link { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; color: #565658; letter-spacing: 0.1em; margin-top: auto; } /* ---- DELIVERY MODEL section (markets pages only) ---- A dark band that breaks the page rhythm — deliberately a moment of "office-honest, outcome-bold" framing. Headline + body left, spec card right. */ #abt .delivery-model-section { background: #0a0a0c; color: #fafaf9; padding: 3.5rem 0; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); position: relative; overflow: hidden; } #abt .delivery-model-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(2,109,191,0.15) 0%, rgba(10,10,12,0) 60%); pointer-events: none; } #abt .delivery-model-section > .max-w-7xl { position: relative; z-index: 1; } #abt .delivery-grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem; align-items: start; } @media (min-width: 1024px) { #abt .delivery-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: center; } } #abt .delivery-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; color: #3B9DEB; margin-bottom: 1rem; } #abt .delivery-headline { font-family: 'Fraunces', serif; font-size: 1.85rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #fafaf9; margin-bottom: 1.1rem; } @media (min-width: 768px) { #abt .delivery-headline { font-size: 2.4rem; } } @media (min-width: 1280px) { #abt .delivery-headline { font-size: 2.8rem; } } #abt .delivery-body { font-size: 1rem; line-height: 1.65; color: #d6d3d1; max-width: 56ch; } @media (min-width: 768px) { #abt .delivery-body { font-size: 1.05rem; } } /* The right-column glass spec card. Different from .aud-hero-card — values can wrap to multi-line because they're sentence-length, not numeric. */ #abt .delivery-card { background: rgba(255,255,255,0.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.16); border-radius: 6px; padding: 1.5rem 1.6rem; } #abt .delivery-card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.85rem; margin-bottom: 1rem; border-bottom: 1px dashed rgba(255,255,255,0.2); font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.16em; color: #a8a29e; font-weight: 700; text-transform: uppercase; } #abt .delivery-card-head .stamp { background: #3B9DEB; color: #0a0a0c; padding: 0.22rem 0.6rem; letter-spacing: 0.12em; font-size: 0.58rem; font-weight: 800; } #abt .delivery-card-row { padding: 0.85rem 0; border-top: 1px dashed rgba(255,255,255,0.13); } #abt .delivery-card-row:first-of-type { border-top: 0; padding-top: 0.4rem; } #abt .delivery-card-row .lbl { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: #3B9DEB; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.4rem; font-weight: 700; } #abt .delivery-card-row .val { display: block; font-size: 0.93rem; line-height: 1.5; color: #fafaf9; } @media (max-width: 480px) { #abt .delivery-headline { font-size: 1.5rem; } #abt .delivery-card { padding: 1.2rem 1.25rem; } #abt .delivery-model-section { padding: 2.5rem 0; } } /* Pull-quote & CTA */ #abt .aud-quote { padding: 3rem 0; } #abt .aud-cta { background: #fcfaf6; border-top: 1px solid #d4cdc0; border-bottom: 1px solid #d4cdc0; padding: 3rem 0; text-align: center; } #abt .aud-cta-h { font-family: 'Fraunces', serif; font-size: 1.8rem; font-weight: 700; color: #0a0a0c; margin-bottom: 0.6rem; line-height: 1.2; } @media (min-width: 768px) { #abt .aud-cta-h { font-size: 2.2rem; } } /* === CASE-STUDY-SPECIFIC === */ /* As of 2026-05-08d, case-study metrics + timelines use the canonical `.aud-spec` / `.aud-spec-row` component (single spec-table vocabulary site-wide). The legacy `.case-metric` and `.case-timeline-row` rules were dropped — same visual outcome, fewer components to maintain. The `.case-tech` pill-list stays as it is (no equivalent in spec-table). */ #abt .case-tech { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 1rem; } #abt .case-tech .tag { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; padding: 0.32rem 0.65rem; background: #fcfaf6; border: 1px solid #d4cdc0; color: #0a0a0c; } /* === FIELD-GUIDE-SPECIFIC === */ /* guide-tldr — specimen-card pattern (paper-cream bg, brand-blue left rule, ink Fraunces body). Was previously a brand-blue flood block; softened so the page reads as a cohesive editorial sequence rather than a blue stripe. */ #abt .guide-tldr { background: #fcfaf6; color: #0a0a0c; padding: 1.6rem 1.8rem; border: 1px solid #d4cdc0; } #abt .guide-tldr .label { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; color: #026DBF; margin-bottom: 0.7rem; padding-bottom: 0.6rem; border-bottom: 1px dashed #d4cdc0; } #abt .guide-tldr .body { font-family: 'Fraunces', serif; font-size: 1.1rem; line-height: 1.55; font-weight: 500; color: #0a0a0c; } #abt .guide-takeaways { counter-reset: tk; padding: 0; margin: 0; list-style: none; } #abt .guide-takeaways li { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px dashed #d4cdc0; counter-increment: tk; font-size: 0.95rem; line-height: 1.55; color: #0a0a0c; } #abt .guide-takeaways li:first-child { border-top: 1px solid #0a0a0c; } #abt .guide-takeaways li::before { content: '0' counter(tk); font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 700; color: #026DBF; letter-spacing: 0.1em; padding-top: 0.15rem; } #abt .guide-toc { background: #fcfaf6; border: 1px solid #d4cdc0; padding: 1.3rem 1.5rem; } #abt .guide-toc h4 { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; color: #565658; padding-bottom: 0.6rem; border-bottom: 1px dashed #d4cdc0; margin-bottom: 0.7rem; } #abt .guide-toc ol { font-size: 0.84rem; padding-left: 1.4rem; line-height: 1.7; color: #57534e; } #abt .guide-toc ol li { padding-left: 0.2rem; } #abt .guide-tags { padding: 1rem 0; border-top: 1px solid #d4cdc0; border-bottom: 1px solid #d4cdc0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; align-items: center; } #abt .guide-tags .label { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: #565658; letter-spacing: 0.12em; font-weight: 700; margin-right: 0.4rem; } #abt .guide-tags a { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; padding: 0.3rem 0.65rem; background: rgba(2,109,191,0.08); color: #026DBF; text-decoration: none; transition: background 0.15s, color 0.15s; } #abt .guide-tags a:hover { background: #026DBF; color: white; } /* === CAREERS-SPECIFIC === */ #abt .career-role { display: grid; grid-template-columns: 60px 1fr auto; gap: 1.2rem; align-items: center; padding: 1.2rem 1.4rem; border-top: 1px dashed #d4cdc0; transition: background 0.15s; text-decoration: none; color: inherit; } #abt .career-role:first-of-type { border-top: 1px solid #0a0a0c; } #abt .career-role:hover { background: #fcfaf6; } #abt .career-role .num { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; color: #026DBF; letter-spacing: 0.1em; } #abt .career-role .meta { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #565658; letter-spacing: 0.04em; } #abt .career-role .role-title { font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 700; color: #0a0a0c; } #abt .career-role .arrow { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: #565658; font-weight: 700; letter-spacing: 0.1em; } #abt .career-role:hover .arrow { color: #026DBF; } /* (Removed 2026-05-08d: legacy callout CSS for a hiring portal block that no longer exists in any rendered page. Apply flow is now a plain mailto.) */ /* (Flag icon CSS moved to master-common.css — flags appear in the SSI'd footer/header which is rendered on the homepage too, and the homepage only loads master-common.css, not audience-common.css.) */ /* ===================================================================== * MOBILE RESPONSIVE PASS (added 2026-05-07m) * Fixes identified by audit: * - aud-hero-card right-aligned on stacked mobile (margin-left: auto) * - kaleidoscope: 4 simultaneous video decoders too heavy on phones * - aud-hero-name oversized at 320px * - feature-figure 16:7 too short on narrow screens * - hub-grid 4-col too cramped at 1024px * - aud-context 3-col too cramped at 1024px * - aud-hero-card-row .val nowrap can overflow narrow card * ===================================================================== */ /* iPad LANDSCAPE + below — when the hero grid is single-column, the spec card should NOT auto-margin to the right (looks misaligned vs left-aligned copy). */ @media (max-width: 1023px) { #abt .aud-hero-card { margin-left: 0; max-width: 100%; } } /* TABLET PORTRAIT + below — kill the kaleidoscope on smaller devices. 4 concurrent autoplay videos = ~3.2MB on 4G + 4 decode pipelines that iOS Safari and Android Chrome serialize anyway. The flat dark hero band stays. */ @media (max-width: 767px) { #abt .aud-hero-kaleido, #abt .aud-hero-kaleido-vignette { display: none; } /* Allow long values in the spec card to wrap on narrow screens */ #abt .aud-hero-card-row .val { white-space: normal; } /* Feature figure 16:7 collapses to a thin band on phones; switch to 4:3 so the photo + caption are both legible */ #abt .feature-figure-img { aspect-ratio: 4 / 3; } /* Spec card padding tightens */ #abt .aud-hero-card { padding: 1.2rem 1.25rem; } } /* SMALL PHONE (≤480px) — shrink the giant hero name and glyph so they don't wrap-clip ascenders/descenders. The 4.5rem (72px) Fraunces italic is too big for a 320px viewport once the 76px glyph + gap is subtracted. */ @media (max-width: 480px) { #abt .aud-hero-name { font-size: 3rem; line-height: 1; } #abt .aud-hero-glyph { width: 52px; height: 52px; } #abt .aud-hero-mark { gap: 0.85rem; margin-bottom: 0.9rem; } #abt .aud-hero-kicker { font-size: 1.15rem; } #abt .aud-h1 { font-size: 2rem; } #abt .aud-hero { padding: 3rem 0 2.4rem; } #abt .aud-cta-h { font-size: 1.5rem; } } /* iPad LANDSCAPE — push the 4-col hub-grid breakpoint UP to 1280px, and the 3-col aud-context UP to 1100px. At 1024px both were too cramped. */ @media (min-width: 1024px) and (max-width: 1279px) { #abt .hub-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) and (max-width: 1099px) { #abt .aud-context { grid-template-columns: 1fr; gap: 2rem; } } /* ======================================================================== FEED-BLOCK COMPONENT — used on case-study + field-guide + audience pages for related-cases / related-guides / from-the-blog cards. Mirrors the master-common.css definitions so the same component renders identically across umbrella + audience pages. ======================================================================== */ #abt .feed-block { background: #fcfaf6; border: 1px solid #d4cdc0; padding: 1.3rem 1.5rem; margin-bottom: 1rem; } #abt .feed-block-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.7rem; border-bottom: 1px dashed #d4cdc0; margin-bottom: 0.4rem; } #abt .feed-block-title { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; color: #0a0a0c; text-transform: uppercase; } #abt .feed-block-link { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: #026DBF; text-decoration: none; letter-spacing: 0.08em; font-weight: 700; } #abt .feed-block-link:hover { text-decoration: underline; } #abt .feed-block .feed-list { list-style: none; padding: 0; margin: 0; border-top: 0; } #abt .feed-block .feed-item { border-top: 1px dashed #e7e2d9; } #abt .feed-block .feed-item:first-child { border-top: 0; } #abt .feed-block .feed-link { display: block; padding: 0.65rem 0; text-decoration: none; color: #0a0a0c; transition: background 0.12s, padding 0.12s, border-color 0.12s; border-left: 0; } #abt .feed-block .feed-link:hover { background: rgba(2,109,191,0.06); padding-left: 0.5rem; border-left: 3px solid #026DBF; } #abt .feed-block .feed-code { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #565658; margin-bottom: 0.25rem; } #abt .feed-block .feed-title { display: block; font-family: 'Fraunces', serif; font-size: 0.98rem; font-weight: 600; color: #0a0a0c; line-height: 1.3; margin-bottom: 0.3rem; } #abt .feed-block .feed-short { display: block; font-size: 0.82rem; color: #57534e; line-height: 1.45; } #abt .feed-empty { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: #8a857c; font-style: italic; padding: 1.2rem 0; text-align: center; border-top: 1px dashed #d4cdc0; border-bottom: 1px dashed #d4cdc0; } /* Feed grid — multi-column wrapper for "RELEVANT TO X" sections */ #abt .feed-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { #abt .feed-grid { grid-template-columns: repeat(3, 1fr); } } #abt .feed-grid .feed-block { margin-bottom: 0; } /* ========================================================= * BLOG — post page + hub * ========================================================= */ /* Hub */ #abt .blog-hub-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; color: #3B9DEB; text-transform: uppercase; margin-bottom: 0.7rem; } #abt .blog-hub-title { font-family: 'Fraunces', serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.015em; color: #0a0a0c; line-height: 1.08; margin-bottom: 0.6rem; } #abt .blog-hub-lede { font-size: 1.05rem; color: #565658; line-height: 1.55; max-width: 38rem; margin-bottom: 2rem; } /* News-feed density — denser than cases (browse mode, not trust mode). 3-up at desktop kicks in earlier, so the grid feels like a wall of stories. */ #abt .blog-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; } @media (min-width: 640px) { #abt .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 980px) { #abt .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } #abt .blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e7e2d9; border-radius: 4px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } #abt .blog-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -16px rgba(2,109,191,0.28); border-color: #3B9DEB; } #abt .blog-card-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #f4f0e8; } #abt .blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(40%); transition: filter 0.3s ease, transform 0.6s ease; } #abt .blog-card:hover .blog-card-img img { filter: grayscale(0%); transform: scale(1.04); } #abt .blog-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(2,109,191,0.18) 0%, rgba(10,10,12,0.05) 60%); pointer-events: none; } #abt .blog-card-body { padding: 1.2rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; } #abt .blog-card-meta { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; color: #3B9DEB; text-transform: uppercase; margin-bottom: 0.55rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } /* TLDR audio chip in the meta line — signals a 90-sec audio brief is available */ #abt .blog-card-audio { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; color: #026DBF; background: rgba(2,109,191,0.10); border: 1px solid rgba(2,109,191,0.22); padding: 0.16rem 0.42rem; border-radius: 999px; margin-left: auto; } #abt .blog-card-audio svg { width: 11px; height: 11px; display: block; } #abt .blog-card-title { font-family: 'Fraunces', serif; font-size: 1.12rem; font-weight: 600; color: #0a0a0c; line-height: 1.28; margin-bottom: 0.55rem; letter-spacing: -0.005em; } #abt .blog-card-short { font-size: 0.86rem; color: #565658; line-height: 1.5; flex: 1; } /* Tag chips below the short — scan-by-topic from the grid */ #abt .blog-card-tags { display: flex; flex-wrap: wrap; gap: 0.32rem; margin-top: 0.7rem; } #abt .blog-card-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.06em; color: #565658; background: #faf8f5; border: 1px solid #e7e2d9; border-radius: 2px; padding: 0.18rem 0.42rem; text-transform: lowercase; } #abt .blog-card-foot { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.12em; color: #026DBF; text-transform: uppercase; margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px dashed #d4cdc0; display: flex; align-items: center; justify-content: space-between; } /* Post page */ #abt .blog-post { background: transparent; } #abt .blog-post-header { margin-bottom: 1.6rem; } #abt .blog-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; color: #3B9DEB; text-transform: uppercase; margin-bottom: 0.9rem; display: inline-flex; align-items: center; gap: 0.55rem; } #abt .blog-eyebrow::after { content: ''; display: inline-block; width: 18px; height: 1px; background: rgba(59,157,235,0.45); } #abt .blog-title { font-family: 'Fraunces', serif; font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; color: #0a0a0c; margin-bottom: 1rem; } #abt .blog-lede { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.08rem; line-height: 1.5; color: #3a3a3c; margin-bottom: 1rem; } #abt .blog-byline { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; color: #565658; } #abt .blog-byline strong { color: #026DBF; } #abt .blog-hero-img { margin: 1.5rem 0 2.4rem; border-radius: 4px; overflow: hidden; border: 1px solid #d4cdc0; aspect-ratio: 21 / 9; position: relative; background: #f4f0e8; } #abt .blog-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(30%); } #abt .blog-hero-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(2,109,191,0.18) 0%, rgba(10,10,12,0) 55%, rgba(2,109,191,0.10) 100%); pointer-events: none; } /* Body — typography for the article content */ #abt .blog-body { font-size: 1.02rem; line-height: 1.72; color: #2a2a2c; } #abt .blog-body p { margin-bottom: 1.15rem; } #abt .blog-body p:first-of-type::first-letter { font-family: 'Fraunces', serif; font-weight: 700; color: #026DBF; font-size: 3.2rem; line-height: 0.92; float: left; padding: 0.35rem 0.55rem 0 0; letter-spacing: -0.02em; } #abt .blog-body h2 { font-family: 'Fraunces', serif; font-size: 1.55rem; font-weight: 700; color: #0a0a0c; line-height: 1.22; letter-spacing: -0.01em; margin: 2.4rem 0 1rem; padding-top: 0.6rem; border-top: 1px solid #e7e2d9; } #abt .blog-body h3 { font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 600; color: #0a0a0c; line-height: 1.3; margin: 1.8rem 0 0.7rem; } #abt .blog-body strong { color: #0a0a0c; font-weight: 700; } #abt .blog-body em { color: #2a2a2c; font-style: italic; } #abt .blog-body a { color: #026DBF; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } #abt .blog-body a:hover { color: #3B9DEB; } #abt .blog-body ul, #abt .blog-body ol { margin: 0 0 1.2rem 1.4rem; } #abt .blog-body li { margin-bottom: 0.45rem; line-height: 1.6; } #abt .blog-body li > p { margin-bottom: 0.4rem; } #abt .blog-body code { font-family: 'JetBrains Mono', monospace; font-size: 0.86em; background: #f4f0e8; color: #026DBF; padding: 0.12rem 0.34rem; border-radius: 3px; border: 1px solid #e7e2d9; } #abt .blog-body pre { background: #0a0a0c; color: #fafaf9; padding: 1rem 1.2rem; border-radius: 4px; overflow-x: auto; margin: 1.4rem 0; font-size: 0.84rem; line-height: 1.55; } #abt .blog-body pre code { background: transparent; color: inherit; padding: 0; border: 0; } #abt .blog-body blockquote { border-left: 4px solid #3B9DEB; padding: 0.4rem 1.2rem; margin: 1.6rem 0; font-family: 'Fraunces', serif; font-style: italic; color: #3a3a3c; background: rgba(59,157,235,0.06); } #abt .blog-body hr { border: 0; border-top: 1px solid #d4cdc0; margin: 2.4rem 0 1.6rem; } #abt .blog-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.92rem; } #abt .blog-body th { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; color: #565658; text-transform: uppercase; text-align: left; padding: 0.7rem 0.85rem; border-bottom: 2px solid #026DBF; background: #faf8f5; } #abt .blog-body td { padding: 0.7rem 0.85rem; border-bottom: 1px solid #e7e2d9; vertical-align: top; line-height: 1.5; } #abt .blog-body tr:hover td { background: rgba(2,109,191,0.03); } /* Tag chips at the bottom */ #abt .blog-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 2rem 0; } #abt .blog-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.1em; color: #565658; background: #faf8f5; border: 1px solid #d4cdc0; border-radius: 3px; padding: 0.32rem 0.65rem; text-transform: lowercase; } /* Closing CTA */ #abt .blog-cta { background: #faf8f5; border: 1px solid #d4cdc0; border-radius: 4px; padding: 1.6rem 1.8rem; margin: 2.4rem 0; display: flex; flex-direction: column; gap: 0.7rem; } @media (min-width: 720px) { #abt .blog-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.6rem; } } #abt .blog-cta-text { font-family: 'Fraunces', serif; font-size: 1.05rem; color: #0a0a0c; font-style: italic; } #abt .blog-cta-btn { background: linear-gradient(135deg, #026DBF 0%, #3B9DEB 100%); color: #fff; padding: 0.8rem 1.4rem; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 18px -4px rgba(2,109,191,0.4); transition: transform 0.18s ease, box-shadow 0.18s ease; } #abt .blog-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -6px rgba(2,109,191,0.5); } /* Related posts band at the bottom */ #abt .blog-related { background: #faf8f5; border-top: 1px solid #d4cdc0; padding: 2.6rem 0 3.2rem; margin-top: 2.4rem; } #abt .blog-related-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; color: #3B9DEB; text-transform: uppercase; margin-bottom: 1.2rem; display: inline-flex; align-items: center; gap: 0.55rem; } #abt .blog-related-eyebrow::after { content: ''; display: inline-block; width: 18px; height: 1px; background: rgba(59,157,235,0.45); } /* ========================================================= * TLDR AUDIO WIDGET — "Listen — 90s briefing for busy CXOs" * Sits at the top of post body (under hero image, above first paragraph). * Reusable: same widget works on /blog/, /case-studies/, /field-guides/. * Brand-blue gradient circular play button + progress + time display. * ========================================================= */ #abt .tldr-audio { display: flex; align-items: center; gap: 1rem; background: linear-gradient(135deg, rgba(2,109,191,0.06) 0%, rgba(59,157,235,0.04) 100%); border: 1px solid #d4cdc0; border-radius: 6px; padding: 1rem 1.2rem; margin: 0 0 2rem; position: relative; } #abt .tldr-audio-btn { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #026DBF 0%, #3B9DEB 100%); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px -4px rgba(2,109,191,0.4), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease; position: relative; } #abt .tldr-audio-btn:hover { transform: scale(1.06); box-shadow: 0 10px 24px -4px rgba(2,109,191,0.55), inset 0 1px 0 rgba(255,255,255,0.3); filter: brightness(1.05); } #abt .tldr-audio-btn:active { transform: scale(0.97); } #abt .tldr-audio-btn svg { width: 22px; height: 22px; fill: #fff; transition: opacity 0.15s ease; } #abt .tldr-audio-btn .icon-pause { display: none; } #abt .tldr-audio.is-playing .tldr-audio-btn .icon-play { display: none; } #abt .tldr-audio.is-playing .tldr-audio-btn .icon-pause { display: block; } /* Pulse ring animation while playing — brand-blue halo */ #abt .tldr-audio-btn::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(59,157,235,0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } #abt .tldr-audio.is-playing .tldr-audio-btn::after { opacity: 1; animation: tldr-pulse 1.6s ease-in-out infinite; } @keyframes tldr-pulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 0; } } #abt .tldr-audio-info { flex: 1; min-width: 0; } #abt .tldr-audio-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; color: #026DBF; text-transform: uppercase; margin-bottom: 0.3rem; display: flex; align-items: center; gap: 0.5rem; } #abt .tldr-audio-eyebrow::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3B9DEB; box-shadow: 0 0 0 3px rgba(59,157,235,0.2); } #abt .tldr-audio-title { font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 600; color: #0a0a0c; line-height: 1.25; margin-bottom: 0.18rem; } #abt .tldr-audio-sub { font-size: 0.78rem; color: #565658; line-height: 1.4; } #abt .tldr-audio-sub .tldr-audio-time { font-family: 'JetBrains Mono', monospace; color: #026DBF; font-weight: 600; margin-left: 0.4rem; } /* Progress bar — appears after first play */ #abt .tldr-audio-progress { position: absolute; left: 4px; right: 0; bottom: 0; height: 3px; background: transparent; border-radius: 0 0 6px 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; } #abt .tldr-audio.has-played .tldr-audio-progress { opacity: 1; pointer-events: auto; } #abt .tldr-audio-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #026DBF, #3B9DEB); transition: width 0.1s linear; } /* Share button — sits to the right of the info area. Uses Web Share API on supported browsers (mostly mobile) with clipboard fallback + toast on desktop. Icon swaps to checkmark on success for ~1.6s. */ #abt .tldr-audio-share { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(2,109,191,0.10); border: 1px solid rgba(2,109,191,0.22); color: #026DBF; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, color 0.16s ease; position: relative; } #abt .tldr-audio-share:hover { background: rgba(2,109,191,0.18); border-color: rgba(2,109,191,0.45); transform: translateY(-1px); } #abt .tldr-audio-share:active { transform: translateY(0); } #abt .tldr-audio-share svg { width: 16px; height: 16px; fill: currentColor; transition: opacity 0.15s ease; } #abt .tldr-audio-share .icon-check { display: none; } #abt .tldr-audio-share.is-shared { background: #026DBF; border-color: #026DBF; color: #fff; } #abt .tldr-audio-share.is-shared .icon-share { display: none; } #abt .tldr-audio-share.is-shared .icon-check { display: block; } /* Toast that confirms "Link copied" on clipboard fallback. Floats up from the share button, fades out after ~1.6s. Hidden by default. */ #abt .tldr-audio-share-toast { position: absolute; right: 0; top: -2.2rem; background: #0a0a0c; color: #fafaf9; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.32rem 0.6rem; border-radius: 3px; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; white-space: nowrap; box-shadow: 0 4px 12px rgba(10,10,12,0.18); } #abt .tldr-audio-share-toast::after { content: ''; position: absolute; bottom: -4px; right: 12px; width: 8px; height: 8px; background: #0a0a0c; transform: rotate(45deg); } #abt .tldr-audio.is-shared-toast .tldr-audio-share-toast { opacity: 1; transform: translateY(0); } @media (max-width: 640px) { #abt .tldr-audio { padding: 0.85rem 1rem; gap: 0.85rem; } #abt .tldr-audio-btn { width: 48px; height: 48px; } #abt .tldr-audio-btn svg { width: 18px; height: 18px; } #abt .tldr-audio-share { width: 34px; height: 34px; } #abt .tldr-audio-share svg { width: 14px; height: 14px; } #abt .tldr-audio-title { font-size: 0.92rem; } #abt .tldr-audio-sub { font-size: 0.74rem; } }