/* ============================================================ Generative AI & the Creative Sector — playful editorial direction. Warm cream paper, Bricolage Grotesque display, generous rounding, chunky orange accents, friendly motion. No Google branding/colors. ============================================================ */ :root { --pf-orange: #FF6411; --pf-orange-dark: #d04e00; --pf-orange-soft: #ffd9c0; --pf-orange-mist: #fff0e6; --ink: #1c1e21; --ink-2: #2a2c30; --ink-3: #555a61; --muted: #8a8f96; --paper: #ffffff; --paper-warm: #fafafa; --paper-2: #f4f4f5; --paper-3: #e8e8e9; --paper-4: #fff0e6; --rule: #e6e6e7; --rule-soft: #f0f0f1; /* Charts palette — orange hero + neutral cools. */ --hue-1: #FF6411; --hue-2: #1c1e21; --hue-3: #c97a3a; /* muted ochre */ --hue-4: #6e6e72; /* neutral gray */ --hue-5: #5c8a96; /* dusty teal */ --hue-6: #a3744d; /* clay */ --font-display: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-accent: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; --font-ui: 'DM Sans', system-ui, sans-serif; --reader-max: 920px; --wide-max: 920px; --shell-max: 1360px; --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill:999px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* friendly ease-out */ --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1); /* gentle overshoot */ --ease-quad: cubic-bezier(0.4, 0, 0.2, 1); --shadow-soft: 0 4px 24px rgba(40, 26, 14, 0.06), 0 1px 3px rgba(40, 26, 14, 0.04); --shadow-lift: 0 12px 40px rgba(40, 26, 14, 0.10), 0 2px 6px rgba(40, 26, 14, 0.06); --shadow-pop: 0 8px 0 rgba(255, 100, 17, 0.16); } * { box-sizing: border-box; } html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; } /* Horizontal-overflow guard on only — NOT on . Setting it on body makes body the nearest scrolling ancestor for any position: sticky descendant (the TOC), and since body itself never scrolls vertically, the sticky element ends up pinned and stops following the viewport. Keeping it on html alone still clips any horizontal bleed at the viewport without breaking sticky. */ html { overflow-x: hidden; width: 100%; } ::selection { background: var(--pf-orange); color: #fff; } html { scroll-behavior: smooth; } /* ---- Reading progress bar (top) ---- */ .read-progress { position: fixed; inset: 0 auto auto 0; height: 4px; width: 0; background: var(--pf-orange); z-index: 100; border-radius: 0 4px 4px 0; transition: width 80ms linear; } /* ---- Top nav ---- */ .topnav { position: fixed; top: 16px; left: 16px; right: 16px; height: 60px; z-index: 90; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: rgba(254, 249, 241, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--rule); border-radius: 45px; box-shadow: var(--shadow-soft); font-family: var(--font-ui); transition: transform .35s var(--ease-out), opacity .35s var(--ease-out); } .topnav.hidden { transform: translateY(-150%); opacity: 0; } .topnav-brand { display: flex; align-items: center; gap: 14px; } .topnav-brand img { height: 20px; display: block; } .topnav-brand .div { width: 4px; height: 4px; background: var(--pf-orange); border-radius: 50%; } .topnav-brand .ti { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .topnav-actions { display: flex; gap: 8px; align-items: center; } .topnav .pill { font-size: 11px; font-weight: 500; padding: 6px 12px; border-radius: var(--r-pill); background: var(--pf-orange-mist); color: var(--pf-orange-dark); letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--font-ui); } /* ---- Cover ---- */ .cover { position: relative; min-height: 100vh; padding: 32px; overflow: hidden; color: #fff; } .cover-image { position: absolute; inset: 16px; background-image: url('assets/hero.jpg'); background-size: cover; background-position: center 35%; border-radius: 45px; z-index: 0; } .cover-image::after { /* dark scrim bottom + subtle vignette top so text reads */ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 30%, transparent 50%, rgba(20, 10, 4, 0.85) 100%); border-radius: 45px; } .cover-shell { position: relative; z-index: 1; max-width: var(--shell-max); margin: 0 auto; display: grid; grid-template-rows: auto 1fr; min-height: calc(100vh - 64px); gap: 32px; padding: 96px 32px 32px; /* top clears the floating 60px topnav (top:16 + 60 = 76, +20 breathing room) */ } .cover-header { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-ui); font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 500; } .cover-header .left, .cover-header .right { display: flex; gap: 12px; align-items: center; } .cover-header img { height: 22px; filter: brightness(0) invert(1); } .cover-header .chip { background: rgba(255,255,255,0.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; padding: 6px 14px; border-radius: var(--r-pill); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--font-ui); } .cover-header .chip.accent { background: var(--pf-orange); color: #fff; } .cover-main { display: flex; flex-direction: column; justify-content: flex-end; max-width: 1180px; padding-bottom: 16px; } .cover-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: var(--pf-orange); margin-bottom: 28px; text-shadow: 0 1px 12px rgba(0,0,0,0.4); } .cover-eyebrow .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pf-orange); box-shadow: 0 0 16px rgba(255,100,17,0.6); } .cover-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 9vw, 144px); line-height: 0.92; letter-spacing: -0.045em; margin: 0; color: #fff; text-shadow: 0 2px 28px rgba(0,0,0,0.45); } .cover-title .accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--pf-orange); letter-spacing: -0.025em; font-size: 1.04em; display: inline-block; padding: 0 0.04em; } .cover-subtitle { font-family: var(--font-body); font-weight: 400; font-size: clamp(20px, 2.4vw, 32px); line-height: 1.35; color: rgba(255,255,255,0.94); max-width: 780px; margin-top: 32px; letter-spacing: -0.005em; text-shadow: 0 1px 18px rgba(0,0,0,0.4); } .cover-footer { display: grid; grid-template-columns: repeat(4, auto) 1fr auto; gap: 32px 40px; align-items: end; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.2); color: #fff; } .cover-footer .stack { display: flex; flex-direction: column; gap: 6px; } .cover-footer .label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.65); } .cover-footer .val { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -0.01em; } .cover-footer .pf-img { height: 30px; align-self: center; filter: brightness(0) invert(1); } .cover-scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.78); z-index: 2; text-decoration: none; } .cover-scroll .arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--pf-orange); display: flex; align-items: center; justify-content: center; color: #fff; animation: scrollBob 2.4s ease-in-out infinite; box-shadow: 0 4px 24px rgba(255,100,17,0.5); } @keyframes scrollBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* ---- TOC (sticky left) ---- */ .layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; max-width: var(--shell-max); margin: 0 auto; padding: 0 32px; } .toc { grid-column: 1; grid-row: 1 / -1; position: sticky; top: 96px; align-self: start; font-family: var(--font-ui); padding: 8px 4px; background: transparent; color: var(--ink); margin-top: 28px; margin-right: 12px; z-index: 5; /* When the active chapter expands its sub-list the TOC can grow taller than the viewport — scroll inside the sticky pane rather than getting clipped against the page. */ max-height: calc(100vh - 112px); overflow-y: auto; scrollbar-width: thin; /* Fade gently when a dark chapter heading passes through; feels more intentional than the TOC trying to outshine the banner. */ transition: opacity .45s var(--ease-out); } .toc::-webkit-scrollbar { width: 6px; } .toc::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; } .toc.is-dim { opacity: 0.28; } .chapter-block { grid-column: 2; min-width: 0; padding: 96px 0 64px; } .chapter-block + .chapter-block { padding-top: 0; } .toc-title { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 8px 18px; display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); } .toc-title::after { content: ''; flex: 1; height: 1px; background: var(--rule); } .toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .toc a { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--muted); background: transparent; border: 1px solid transparent; /* Compact-by-default — the inactive pills sit quietly so the active one and its sub-list dominate. Hover and active expand to full size. */ padding: 7px 12px 7px 7px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; line-height: 1.25; letter-spacing: -0.005em; transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), padding .2s var(--ease-out), font-size .2s var(--ease-out), gap .2s var(--ease-out), transform .25s var(--ease-spring); } .toc a:hover, .toc a.active { padding: 13px 16px 13px 12px; font-size: 15px; gap: 14px; color: var(--ink); } .toc a:hover { background: var(--pf-orange-mist); border-color: var(--pf-orange-mist); transform: translateX(3px); } .toc a:hover .num { background: var(--pf-orange); color: #fff; } .toc a.active { background: var(--pf-orange); color: var(--ink); border-color: var(--pf-orange); } .toc a.active .num { background: var(--ink); color: var(--pf-orange); } .toc .num { /* Compact-by-default — grows on hover/active in lock-step with the pill */ width: 22px; height: 22px; border-radius: 50%; background: var(--paper-2); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; transition: width .2s var(--ease-out), height .2s var(--ease-out), font-size .2s var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out); font-family: var(--font-ui); } .toc a:hover .num, .toc a.active .num { width: 28px; height: 28px; font-size: 11px; } /* ---- Per-chapter accent colours ---- The three main report chapters carry their own accent — orange for Creative Sector, plum for Creators, green for Wider Economy — so the exec-summary banner colours tie back to where the reader lands. Used by the TOC active/hover states, the chapter-divider chip, and the H2 headings inside each chapter body. */ .chapter-block[data-chapter="creative-sector"], .chapter-divider[data-chapter="creative-sector"], .toc a[data-chapter="creative-sector"] { --chap-accent: var(--pf-orange); --chap-accent-on: var(--ink); --chap-accent-mist: var(--pf-orange-mist); } .chapter-block[data-chapter="creators"], .toc a[data-chapter="creators"] { --chap-accent: #5b4a6e; --chap-accent-on: #fff; --chap-accent-mist: #ece6f1; } .chapter-block[data-chapter="wider-economy"], .toc a[data-chapter="wider-economy"] { --chap-accent: #2f5a3a; --chap-accent-on: #fff; --chap-accent-mist: #e0ede3; } /* Chapter dividers sit on a dark photographic background — use brighter shades so the chip / dot / leading "+" don't disappear. */ .chapter-divider[data-chapter="creative-sector"] { --chap-accent: var(--pf-orange); } .chapter-divider[data-chapter="creators"] { --chap-accent: #b48fd0; } .chapter-divider[data-chapter="wider-economy"] { --chap-accent: #6abd7c; } /* TOC: hover + active states pick up the chapter accent */ .toc a[data-chapter="creators"]:hover, .toc a[data-chapter="wider-economy"]:hover { background: var(--chap-accent-mist); border-color: var(--chap-accent-mist); } .toc a[data-chapter="creators"]:hover .num, .toc a[data-chapter="wider-economy"]:hover .num { background: var(--chap-accent); color: var(--chap-accent-on); } .toc a[data-chapter="creators"].active, .toc a[data-chapter="wider-economy"].active { background: var(--chap-accent); color: var(--chap-accent-on); border-color: var(--chap-accent); } .toc a[data-chapter="creators"].active .num, .toc a[data-chapter="wider-economy"].active .num { background: var(--chap-accent-on); color: var(--chap-accent); } /* Section H2 headings inside the three accented chapters */ .chapter-block[data-chapter="creators"] .r-h2, .chapter-block[data-chapter="wider-economy"] .r-h2, .chapter-block[data-chapter="creative-sector"] .r-h2 { color: var(--chap-accent); } /* "Back to top" — sits at the foot of the TOC after the chapter list */ .toc-top { display: inline-flex; align-items: center; gap: 8px; margin: 18px 8px 4px; padding: 8px 12px 8px 10px; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); background: transparent; border: 1px solid var(--rule); text-decoration: none; transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), transform .25s var(--ease-spring); } .toc-top:hover { color: var(--ink); background: var(--paper-2); border-color: var(--paper-3); transform: translateY(-2px); } .toc-top svg { flex-shrink: 0; } /* TOC sub-section list — expands under the active chapter pill */ .toc ol.toc-subs { list-style: none; margin: 6px 0 10px; padding: 4px 0 4px 14px; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--rule); margin-left: 22px; } .toc li[data-chapter="creators"] .toc-subs { border-left-color: #5b4a6e; } .toc li[data-chapter="wider-economy"] .toc-subs { border-left-color: #2f5a3a; } .toc li[data-chapter="creative-sector"] .toc-subs { border-left-color: var(--pf-orange); } .toc .toc-subs a { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px 7px 8px; background: transparent; border: 1px solid transparent; border-radius: 8px; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--muted); text-decoration: none; letter-spacing: -0.005em; transition: background .2s var(--ease-out), color .2s var(--ease-out); } .toc .toc-subs a .dash { display: inline-block; flex-shrink: 0; width: 8px; height: 2px; border-radius: 1px; background: currentColor; opacity: 0.45; margin-top: 9px; transition: width .2s var(--ease-out), opacity .2s var(--ease-out); } .toc .toc-subs a:hover { background: var(--paper-2); color: var(--ink); } .toc .toc-subs a:hover .dash { opacity: 0.9; } .toc .toc-subs a.active { background: var(--paper-2); color: var(--ink); font-weight: 600; } .toc li[data-chapter="creators"] .toc-subs a.active { color: #5b4a6e; } .toc li[data-chapter="wider-economy"] .toc-subs a.active { color: #2f5a3a; } .toc li[data-chapter="creative-sector"] .toc-subs a.active { color: var(--pf-orange-dark); } .toc .toc-subs a.active .dash { width: 14px; opacity: 1; } /* ---- Main column ---- */ main { display: contents; } /* legacy, kept inert in case anything queries it */ .r-body { font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0 0 1.1em; text-wrap: pretty; } /* Inline citation/source hyperlinks (extracted from the source deck) */ .r-link, .r-link:visited { color: var(--pf-orange); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-skip-ink: auto; transition: color .15s var(--ease-out), text-decoration-color .15s var(--ease-out); } .r-link:hover { color: var(--ink); } .r-link strong { font-weight: 700; } .r-body.r-lead { font-size: 22px; line-height: 1.42; color: var(--ink); font-weight: 400; margin-bottom: 1.4em; letter-spacing: -0.015em; font-family: var(--font-accent); } .r-body.r-def { font-family: var(--font-body); font-size: 19px; font-weight: 500; color: var(--ink); padding: 20px 24px; background: var(--paper-warm); border-radius: var(--r-md); margin: 12px 0 1.4em; position: relative; } .r-body.r-def::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; background: var(--pf-orange); border-radius: var(--r-pill); } .r-body.r-date { color: var(--muted); font-size: 14px; } /* Headings */ .r-h { font-family: var(--font-display); color: var(--ink); margin: 0; letter-spacing: -0.035em; } .r-h1 { font-size: clamp(42px, 5.4vw, 76px); line-height: 1.0; font-weight: 800; } .r-h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.08; font-weight: 700; margin: 0 0 32px; text-wrap: balance; } .r-h3 { font-size: 26px; line-height: 1.2; font-weight: 600; margin: 0 0 16px; letter-spacing: -0.02em; } .r-h4 { font-size: 12px; line-height: 1.3; font-weight: 500; margin: 0 0 16px; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.18em; color: var(--pf-orange); display: inline-block; } /* Section wrapper */ .r-section { max-width: var(--reader-max); margin: 0 auto 80px; opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .r-section.in { opacity: 1; transform: none; } /* The wrapper section keeps the page's section animation but hands all chrome (background, border, shadow) to the inner .r-case-card. */ .r-section.r-case-wrap { background: transparent; padding: 0; /* keep the same vertical rhythm as standard sections */ max-width: var(--reader-max); } /* ============================================================ .r-case-card — unified card layout used for both case studies and deep dives. Structure: header strip · image+copy body · dark quote band. Mirrors the standalone-Vidio spec. ============================================================ */ .r-case-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-xl); box-shadow: 0 24px 60px -32px rgba(40, 26, 14, 0.18), 0 4px 12px rgba(40, 26, 14, 0.04); overflow: hidden; } /* ---- Header strip ---- */ .r-case-card__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 32px; border-bottom: 1px dashed var(--rule); background: var(--paper-warm); } .r-case-card__head-left { display: flex; align-items: center; gap: 18px; min-width: 0; flex-wrap: wrap; } .r-case-card__label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pf-orange); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } .r-case-card__label::before { content: ''; width: 28px; height: 1px; background: var(--pf-orange); display: inline-block; } .r-case-card__org { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); } .r-case-card__tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .r-case-card__tag { font-family: var(--font-ui); font-size: 11px; font-weight: 500; padding: 6px 11px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-pill); color: var(--ink-2, var(--ink)); white-space: nowrap; } /* ---- Body: image left | copy right ---- */ .r-case-card__body { display: grid; grid-template-columns: minmax(260px, 5fr) minmax(0, 7fr); gap: 0; } /* When there's no image the copy column expands to full width. */ .r-case-card__body:not(.has-image) { grid-template-columns: 1fr; } .r-case-card__image { position: relative; min-height: 100%; background: var(--paper-2); } .r-case-card__image img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; object-position: center 35%; display: block; } .r-case-card__badge { position: absolute; top: 20px; left: 20px; padding: 6px 11px; background: rgba(28, 30, 33, 0.78); color: #fff; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: var(--r-pill); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .r-case-card__copy { padding: 40px 44px 36px; border-left: 1px solid var(--rule); min-width: 0; } .r-case-card__body:not(.has-image) .r-case-card__copy { border-left: 0; } .r-case-card__copy > :first-child { margin-top: 0; } /* ---- Stat grid ---- */ .r-case-card__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; margin: 28px 0 0; } .r-case-card__stats[data-count="3"] { grid-template-columns: repeat(3, 1fr); } .r-case-card__stat { padding: 18px 20px; background: #fff; display: flex; flex-direction: column; gap: 4px; } .r-case-card__stat-val { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); } .r-case-card__stat-lbl { font-family: var(--font-ui); font-size: 11px; font-weight: 500; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } /* ---- Body copy ---- */ .r-case-card__lead { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.45; color: var(--ink); margin: 0 0 22px; } /* ---- Collapsed-state preview ---- */ .r-case-card__preview { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 0; background: #fff; } .r-case-card__preview:not(.has-image) { grid-template-columns: 1fr; } .r-case-card__preview-image { position: relative; background: var(--paper-2); min-height: 240px; } .r-case-card__preview-image img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block; } .r-case-card__preview-image .r-case-card__badge { position: absolute; top: 18px; left: 18px; background: rgba(0,0,0,0.75); color: #fff; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 14px; border-radius: var(--r-pill); } .r-case-card__preview-copy { padding: 32px 36px; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; justify-content: center; } .r-case-card__preview-copy .r-case-card__lead { margin: 0; } /* ---- Read-the-case-study / Show-less CTA ---- */ .r-case-card__cta { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 999px; font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; border: 2px solid var(--chap-accent, var(--pf-orange)); background: var(--chap-accent, var(--pf-orange)); color: var(--chap-accent-on, var(--ink)); transition: transform .2s var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out); } .r-case-card__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.18); background: var(--ink); color: #fff; border-color: var(--ink); } .r-case-card__cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .r-case-card__cta--close { background: transparent; color: var(--chap-accent, var(--ink)); border-color: var(--chap-accent, var(--rule)); } .r-case-card__footer { padding: 20px 36px 28px; background: #fff; display: flex; justify-content: flex-end; } @media (max-width: 720px) { .r-case-card__preview { grid-template-columns: 1fr; } /* Lock the image to a 16:9 letterbox so portrait-aspect heros don't fill the entire phone screen. */ .r-case-card__preview-image { min-height: 0; aspect-ratio: 16 / 9; } .r-case-card__preview-image img { width: 100%; height: 100%; min-height: 0; } .r-case-card__preview-copy { padding: 22px 20px 24px; gap: 18px; } .r-case-card__preview-copy .r-case-card__lead { font-size: 17px; line-height: 1.5; } .r-case-card__preview-copy .r-case-card__cta { width: 100%; justify-content: center; } .r-case-card__footer { padding: 16px 20px 22px; justify-content: stretch; } .r-case-card__footer .r-case-card__cta { width: 100%; justify-content: center; } } .r-case-card__copy .r-body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--ink-2, var(--ink)); margin: 0 0 18px; } .r-case-card__copy .r-body:last-child { margin-bottom: 0; } /* Inner break-out elements (icongrids, callouts) honour copy bounds */ .r-case-card__copy .r-icongrid, .r-case-card__copy .r-comparison, .r-case-card__copy .r-table-wrap, .r-case-card__copy .r-pullstat, .r-case-card__copy .r-quotebox, .r-case-card__copy .r-example, .r-case-card__copy .r-wordcloud, .r-case-card__copy .r-imgstrip, .r-case-card__copy .r-chart-block, .r-case-card__copy .r-statgroup { margin-left: 0; margin-right: 0; max-width: 100%; width: auto; } /* ---- Dark quote band ---- */ .r-case-card__quote { background: var(--ink); color: #fff; padding: 64px 64px 48px; position: relative; } .r-case-card__quote::before { content: ''; position: absolute; top: 36px; left: 56px; width: 92px; height: 92px; background: url('assets/quote.svg') center/contain no-repeat; pointer-events: none; } .r-case-card__quote-eyebrow { position: absolute; top: 32px; right: 36px; font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } .r-case-card__quote-text { font-family: var(--font-accent); font-style: normal; font-weight: 400; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.32; letter-spacing: -0.012em; color: #fff; max-width: 920px; margin: 92px 0 0; position: relative; z-index: 1; text-wrap: pretty; } .r-case-card__quote-att { display: flex; flex-direction: column; gap: 6px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.14); } .r-case-card__quote-lead { font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--pf-orange); margin-bottom: 2px; } .r-case-card__quote-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; color: #fff; } .r-case-card__quote-role { font-family: var(--font-body); font-weight: 400; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.4; color: rgba(255, 255, 255, 0.62); } .r-case-card__quote-org { color: #fff; font-weight: 500; } /* ---- Responsive collapse ---- */ @media (max-width: 1000px) { .r-case-card__head { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 22px; } .r-case-card__tags { justify-content: flex-start; } .r-case-card__body { grid-template-columns: 1fr; } .r-case-card__image img { min-height: 320px; } .r-case-card__copy { border-left: 0; border-top: 1px solid var(--rule); padding: 28px 22px; } .r-case-card__quote { padding: 48px 28px 36px; } .r-case-card__quote::before { width: 64px; height: 64px; left: 22px; top: 26px; } .r-case-card__quote-eyebrow { right: 22px; top: 22px; } .r-case-card__quote-text { margin-top: 72px; } } /* Example-with-image: real photo support */ .r-example-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); display: block; } /* Click-through video link variant (eg IKEA Kreativ → YouTube watch). */ .r-example-link { position: relative; display: block; text-decoration: none; border-radius: var(--r-md); overflow: hidden; transition: transform .35s var(--ease-spring); } .r-example-link:hover { transform: scale(1.012); } .r-example-link::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.28) 100%); pointer-events: none; transition: background .25s var(--ease-out); } .r-example-link:hover::after { background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.4) 100%); } .r-example-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.35)); transition: transform .25s var(--ease-spring); z-index: 1; } .r-example-link:hover .r-example-play { transform: translate(-50%, -50%) scale(1.08); } /* ---- Stats ---- */ .r-stat { margin: 32px 0; padding: 28px 32px; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--rule); position: relative; overflow: hidden; } /* Consecutive standalone stats sit side by side in a grid to save vertical space and let the eye compare them directly. */ .r-stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 32px 0; } .r-stat-row[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .r-stat-row[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .r-stat-row > .r-stat { margin: 0; } @media (max-width: 780px) { .r-stat-row, .r-stat-row[data-count="3"], .r-stat-row[data-count="4"] { grid-template-columns: 1fr; } } .r-stat::before { /* decorative orange dot */ content: ''; position: absolute; top: 24px; right: 24px; width: 12px; height: 12px; background: var(--pf-orange); border-radius: 50%; } .r-stat-value { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 6.4vw, 88px); line-height: 0.95; color: var(--ink); letter-spacing: -0.045em; } .r-stat-label { font-family: var(--font-ui); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--pf-orange); margin: 12px 0 14px; } .r-stat-desc { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 22px 0 0; max-width: 540px; } /* StatGroup: bento-style grid of stat tiles */ .r-statgroup { display: grid; gap: 16px; margin: 36px 0; max-width: 100%; } .r-statgroup[data-cols="2"] { grid-template-columns: repeat(2, 1fr); } .r-statgroup[data-cols="3"] { grid-template-columns: repeat(3, 1fr); } .r-statgroup[data-cols="4"] { grid-template-columns: repeat(2, 1fr); } /* StatGroup tiles cycle through 4 light backgrounds (warm → white → peach → grey). The dark variant was dropped — it made the affected tile shout louder than the rest. */ .r-statgroup .r-stat:nth-child(4n+1) { background: var(--paper-warm); } .r-statgroup .r-stat:nth-child(4n+2) { background: #fff; } .r-statgroup .r-stat:nth-child(4n+3) { background: var(--pf-orange-mist); } .r-statgroup .r-stat:nth-child(4n+3)::before { background: var(--ink); } .r-statgroup .r-stat:nth-child(4n+4) { background: var(--paper-2); } /* Standalone stats appearing in sequence (2+ in a section): rotate through the same light palette so no single tile dominates. */ .r-stat[data-seq="0"] { background: var(--pf-orange-mist); } .r-stat[data-seq="0"]::before { background: var(--ink); } .r-stat[data-seq="1"] { background: var(--paper-2); } .r-stat[data-seq="2"] { background: var(--paper-warm); } .r-stat[data-seq="3"] { background: #fff; } /* 3-stat layout variations — picked deterministically per group to vary rhythm */ .r-statgroup[data-cols="3"][data-layout="row"] { grid-template-columns: repeat(3, 1fr); } .r-statgroup[data-cols="3"][data-layout="2-1"] { grid-template-columns: 1fr 1fr; } .r-statgroup[data-cols="3"][data-layout="2-1"] > :nth-child(3) { grid-column: 1 / -1; } .r-statgroup[data-cols="3"][data-layout="1-2"] { grid-template-columns: 1fr 1fr; } .r-statgroup[data-cols="3"][data-layout="1-2"] > :nth-child(1) { grid-column: 1 / -1; } .r-statgroup[data-cols="3"][data-layout="stack"] { grid-template-columns: 1fr; } .r-statgroup[data-cols="3"][data-layout="hero-2"] { grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; } .r-statgroup[data-cols="3"][data-layout="hero-2"] > :nth-child(1) { grid-row: 1 / span 2; } .r-statgroup[data-cols="3"][data-layout="hero-2"] > :nth-child(1) .r-stat-value { font-size: clamp(64px, 7vw, 96px); } .r-statgroup .r-stat { margin: 0; padding: 28px 28px; } .r-statgroup .r-stat-value { font-size: 52px; } /* ---- Pull quote (case-study quote) ---- */ .r-quote { margin: 48px 0 56px; padding: 36px 40px 28px 64px; width: 100%; max-width: 100%; background: var(--ink); color: var(--paper-warm); border-radius: var(--r-lg); position: relative; } .r-quote::before { content: ''; position: absolute; left: 32px; top: 28px; width: 44px; height: 44px; background: url('assets/quotes.svg') no-repeat center / contain; z-index: 0; opacity: 0.85; } .r-quote blockquote { font-family: var(--font-accent); font-style: normal; font-weight: 400; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.35; letter-spacing: -0.018em; color: var(--paper-warm); margin: 0; padding: 0; background: none; position: relative; z-index: 1; text-wrap: pretty; } .r-quote figcaption { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--pf-orange); margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255, 100, 17, 0.3); letter-spacing: 0.01em; } /* ---- Lists ---- */ .r-list { padding-left: 0; margin: 0 0 1.2em; list-style: none; counter-reset: r; } .r-list li { position: relative; padding: 12px 0 12px 44px; font-family: var(--font-body); color: var(--ink-2); line-height: 1.6; font-size: 17px; } .r-list li + li { border-top: 1px solid var(--rule); } .r-list-unordered li::before { content: ''; position: absolute; left: 6px; top: 24px; width: 10px; height: 10px; background: var(--pf-orange); border-radius: 50%; } .r-list-ordered li { counter-increment: r; } .r-list-ordered li::before { content: counter(r); position: absolute; left: 0; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--pf-orange); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; } .r-list-intro { margin-bottom: 12px; } /* ---- Footnote ---- */ .r-footnote { font-family: var(--font-body); font-size: 14px; font-style: italic; color: var(--muted); margin-top: 36px; padding: 16px 20px; background: var(--paper-2); border-radius: var(--r-md); } /* ---- Icon grid ---- */ .r-icongrid { display: grid; gap: 20px; margin: 36px 0; max-width: 100%; } .r-icongrid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); } .r-icongrid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); } .r-icongrid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); } /* 3-up grid layout variations — same vocabulary as StatGroup */ .r-icongrid[data-cols="3"][data-layout="row"] { grid-template-columns: repeat(3, 1fr); } .r-icongrid[data-cols="3"][data-layout="2-1"] { grid-template-columns: 1fr 1fr; } .r-icongrid[data-cols="3"][data-layout="2-1"] > :nth-child(3) { grid-column: 1 / -1; } .r-icongrid[data-cols="3"][data-layout="1-2"] { grid-template-columns: 1fr 1fr; } .r-icongrid[data-cols="3"][data-layout="1-2"] > :nth-child(1) { grid-column: 1 / -1; } .r-icongrid[data-cols="3"][data-layout="stack"] { grid-template-columns: 1fr; } /* Stacked image-bearing cards: image left, text right, equal weight. */ .r-icongrid[data-layout="stack"]:not(.r-icongrid-colored) .r-icongrid-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: center; } .r-icongrid[data-layout="stack"]:not(.r-icongrid-colored) .r-icongrid-item > .r-icongrid-img, .r-icongrid[data-layout="stack"]:not(.r-icongrid-colored) .r-icongrid-item > .r-videoph { grid-column: 1; grid-row: 1 / span 99; width: 100%; height: auto; align-self: center; margin-bottom: 0; } .r-icongrid[data-layout="stack"]:not(.r-icongrid-colored) .r-icongrid-item > .r-icongrid-img { aspect-ratio: auto; } @media (max-width: 720px) { .r-icongrid[data-layout="stack"]:not(.r-icongrid-colored) .r-icongrid-item { grid-template-columns: 1fr; } .r-icongrid[data-layout="stack"]:not(.r-icongrid-colored) .r-icongrid-item > .r-icongrid-img, .r-icongrid[data-layout="stack"]:not(.r-icongrid-colored) .r-icongrid-item > .r-videoph { grid-column: 1; grid-row: auto; aspect-ratio: 16 / 9; margin-bottom: 16px; height: auto; } } .r-icongrid[data-cols="3"][data-layout="hero-2"] { grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; } .r-icongrid[data-cols="3"][data-layout="hero-2"] > :nth-child(1) { grid-row: 1 / span 2; } .r-icongrid-item { padding: 28px; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--rule); font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink-2); transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-out); min-width: 0; overflow-wrap: break-word; word-wrap: break-word; } .r-icongrid-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } /* Coloured iconGrid — applied when items are text-only (no images / video). Each col-count has its own cycle scoped to data-cols so cycles don't leak. */ .r-icongrid-colored .r-icongrid-item { border-color: transparent; } /* 3-up colored grid: cream → peach → grey. Dropped the ink variant — it shouted louder than its neighbours and unbalanced the row. */ .r-icongrid-colored[data-cols="3"] .r-icongrid-item:nth-child(3n+1) { background: var(--paper-warm); } .r-icongrid-colored[data-cols="3"] .r-icongrid-item:nth-child(3n+2) { background: var(--pf-orange-mist); } .r-icongrid-colored[data-cols="3"] .r-icongrid-item:nth-child(3n+3) { background: var(--paper-2); } /* 2-up colored grid: cream + peach (no ink card to avoid white-on-white edge cases) */ .r-icongrid-colored[data-cols="2"] .r-icongrid-item:nth-child(2n+1) { background: var(--paper-warm); color: var(--ink); } .r-icongrid-colored[data-cols="2"] .r-icongrid-item:nth-child(2n+2) { background: var(--pf-orange-mist); color: var(--ink); } .r-icongrid-item .r-h4 { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 12px; text-transform: none; letter-spacing: -0.02em; padding: 0; background: none; display: block; } .r-icongrid-item .r-leadin { font-family: var(--font-display); font-weight: 700; color: var(--ink); display: block; margin-bottom: 6px; font-size: 17px; } .r-imgph { background: var(--paper-2); border: 1.5px dashed var(--paper-3); aspect-ratio: 4 / 3; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--muted); font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; } .r-imgph-wide { aspect-ratio: 16 / 7; } .r-icongrid-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); margin-bottom: 16px; } /* Video embed slot — 16:9 YouTube placeholder (and real iframe holder) */ .r-videoph { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border-radius: var(--r-md); overflow: hidden; margin-bottom: 16px; } .r-videoph iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .r-videoph-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(255, 240, 220, 0.7); background: radial-gradient(circle at 30% 30%, rgba(255,100,17,0.25), transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,100,17,0.15), transparent 50%), var(--ink); transition: transform .35s var(--ease-spring); cursor: pointer; } .r-videoph-empty:hover { transform: scale(1.015); } .r-videoph-empty svg { transition: transform .25s var(--ease-spring); } .r-videoph-empty:hover svg { transform: scale(1.08); } .r-videoph-cap { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 240, 220, 0.6); } /* Click-through fallback (rights-restricted videos like Now and Then). Static cover image with a centred play overlay; opens watch URL in a new tab. */ .r-videoph-link { display: block; text-decoration: none; cursor: pointer; transition: transform .35s var(--ease-spring); } .r-videoph-link:hover { transform: scale(1.015); } .r-videoph-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .r-videoph-link::after { /* slight darken so the play button + caption read clearly */ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 100%); pointer-events: none; transition: background .25s var(--ease-out); } .r-videoph-link:hover::after { background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%); } .r-videoph-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.35)); transition: transform .25s var(--ease-spring); z-index: 1; } .r-videoph-link:hover .r-videoph-play { transform: translate(-50%, -50%) scale(1.08); } .r-videoph-link .r-videoph-cap { position: absolute; left: 14px; bottom: 12px; color: #fff; z-index: 1; } /* Video iconGrid — 2x2 grid for embed-sized videos */ .r-icongrid-video[data-cols="4"] { grid-template-columns: repeat(2, 1fr); } .r-icongrid-video .r-icongrid-item { padding: 24px; } /* ---- Comparison ---- */ .r-comparison { margin: 40px 0; padding: 32px; background: var(--pf-orange); color: var(--ink); border-radius: var(--r-lg); max-width: 100%; } .r-comp-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink); margin-bottom: 18px; line-height: 1.3; letter-spacing: -0.02em; } .r-comp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .r-comp-list li { display: flex; flex-direction: column; gap: 14px; font-family: var(--font-body); font-size: 17px; line-height: 1.45; color: var(--ink); padding: 22px 0; border-top: 1px solid rgba(26, 20, 16, 0.18); } .r-comp-list li:first-child { border-top: 1px solid rgba(26, 20, 16, 0.18); } .r-comp-icons { display: flex; flex-wrap: wrap; gap: 10px; } .r-comp-icon { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0; transform: scale(0.4); transition: opacity .45s var(--ease-out), transform .45s var(--ease-spring); transition-delay: calc(var(--i, 0) * 70ms); } .r-comp-list li.is-in .r-comp-icon { opacity: 1; transform: scale(1); } .r-comp-icon img { width: 58%; height: 58%; object-fit: contain; display: block; } @media (prefers-reduced-motion: reduce) { .r-comp-icon { transition: none; opacity: 1; transform: none; } } .r-comp-text { font-family: var(--font-body); font-size: 17px; line-height: 1.45; color: var(--ink); } /* ---- Timeline (horizontal carousel) ---- */ .r-timeline { margin: 36px 0; max-width: 100%; } /* Top bar: progress + nav buttons */ .r-tl-controls { display: flex; align-items: center; gap: 24px; margin-bottom: 18px; padding: 0 4px; } .r-tl-progress { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--paper-3); overflow: hidden; } .r-tl-progress-fill { height: 100%; background: var(--pf-orange); border-radius: var(--r-pill); transition: width .12s linear; min-width: 8%; } .r-tl-buttons { display: flex; gap: 8px; } .r-tl-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--pf-orange); background: #fff; color: var(--pf-orange); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s var(--ease-out); } .r-tl-btn:hover:not(:disabled) { background: var(--pf-orange); color: #fff; transform: scale(1.06); } .r-tl-btn:disabled { opacity: 0.35; cursor: not-allowed; } /* Horizontal scroll track */ .r-tl-track { display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; /* breathing room on right edge so last card peek is comfortable */ padding: 4px 4px 8px; /* let cards' shadows show on hover without clipping */ margin: -4px -4px 0; /* fade the right edge so the partial 3rd card softens into the background */ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 90px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 90px), transparent 100%); transition: -webkit-mask-image .25s var(--ease-out), mask-image .25s var(--ease-out); } .r-tl-track.is-end { -webkit-mask-image: none; mask-image: none; } .r-tl-track::-webkit-scrollbar { display: none; } .r-tl-event { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 22px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-out); /* 1.3 cards visible (≈0.3 of next card peeks): 1 gap × 20px = 20px */ flex: 0 0 calc((100% - 20px) / 1.3); scroll-snap-align: start; min-width: 0; } .r-tl-event:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } /* Intro card — sits at the start of the timeline track. White box with "Explore the timeline" + a big arrow nudging the reader to swipe. */ .r-tl-intro { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; /* Narrower than a regular event so it reads as an entry hint, not a card */ flex: 0 0 calc((100% - 20px) / 2.6); padding: 28px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); font-family: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-out), background .2s var(--ease-out); scroll-snap-align: start; } .r-tl-intro:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); background: var(--paper-warm); } .r-tl-intro-label { font-family: var(--font-display); font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; } .r-tl-intro-arrow { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; color: var(--pf-orange); background: var(--pf-orange-mist); border-radius: 50%; transition: transform .25s var(--ease-spring), background .2s var(--ease-out), color .2s var(--ease-out); } .r-tl-intro:hover .r-tl-intro-arrow { background: var(--pf-orange); color: #fff; transform: translateX(4px); } .r-tl-intro-hint { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .r-tl-image { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .r-tl-image .r-imgph { margin: 0; aspect-ratio: 4 / 3; flex: 1; border-radius: var(--r-md); } .r-tl-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); flex: 1; min-height: 0; } .r-tl-era { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); background: var(--pf-orange-mist); align-self: start; padding: 6px 14px; border-radius: var(--r-pill); text-align: center; } .r-tl-content { display: flex; flex-direction: column; justify-content: center; padding: 2px 0; min-width: 0; } .r-tl-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 10px; text-transform: none; letter-spacing: -0.02em; padding: 0; background: none; display: block; text-wrap: balance; } .r-tl-body { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); /* clamp body to keep cards consistent height */ display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; } .r-tl-hint { font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 12px; display: flex; align-items: center; gap: 8px; padding: 0 4px; } .r-tl-hint .dot { width: 6px; height: 6px; background: var(--pf-orange); border-radius: 50%; } /* ---- Tables ---- */ .r-table-wrap { margin: 32px 0; max-width: 100%; } .r-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-body); font-size: 15.5px; background: #fff; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--rule); } .r-table th { text-align: left; padding: 16px 20px; background: var(--ink); color: var(--pf-orange); font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .r-table td { padding: 20px; vertical-align: top; border-top: 1px solid var(--rule); line-height: 1.55; color: var(--ink-2); } .r-table tr:hover td { background: var(--paper-warm); } .r-table-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--ink); margin-bottom: 16px; text-transform: none; letter-spacing: -0.02em; padding: 0; background: none; display: block; } /* ---- Barrier → Solution cards ---- */ .r-barsol { margin: 36px 0; max-width: 100%; } .r-barsol-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--ink); margin-bottom: 20px; text-transform: none; letter-spacing: -0.02em; padding: 0; background: none; display: block; } .r-barsol-grid { display: grid; gap: 18px; } .r-barsol-card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-soft); background: #fff; transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-out); } .r-barsol-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } .r-barsol-side { padding: 26px 28px; font-family: var(--font-body); font-size: 15.5px; line-height: 1.55; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .r-barsol-side p { margin: 0; } .r-barsol-barrier { background: var(--ink); color: rgba(255, 240, 220, 0.82); position: relative; } .r-barsol-solution { background: var(--paper-warm); color: var(--ink-2); } .r-barsol-num { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pf-orange); } .r-barsol-label { font-family: var(--font-display); font-size: 28px; line-height: 1.1; font-weight: 700; color: #fff; margin: 0; letter-spacing: -0.02em; } .r-barsol-tag { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pf-orange); margin-top: 4px; } .r-barsol-solution .r-barsol-tag { color: var(--pf-orange-dark, #c84e09); } .r-barsol-arrow { display: flex; align-items: center; justify-content: center; background: var(--pf-orange); color: var(--ink); width: 56px; flex-shrink: 0; } @media (max-width: 720px) { .r-barsol-card { grid-template-columns: 1fr; } .r-barsol-arrow { width: 100%; height: 48px; } .r-barsol-arrow svg { transform: rotate(90deg); } } /* ---- Callouts ---- */ .r-pullstat { font-family: var(--font-display); font-weight: 600; font-style: normal; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.18; letter-spacing: -0.025em; color: var(--ink); padding: 44px 48px; margin: 48px auto; background: var(--pf-orange-mist); border-radius: var(--r-xl); width: 100%; max-width: 100%; position: relative; } .r-pullstat::before { content: '★'; position: absolute; top: 24px; right: 32px; font-size: 24px; color: var(--pf-orange); } .r-chart-caption { font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--muted); font-style: normal; margin: 12px 0 24px; max-width: var(--reader-max); } .r-quotebox { padding: 32px; background: var(--ink); color: var(--paper-warm); margin: 32px 0; border-radius: var(--r-lg); max-width: 100%; } .r-quotebox .r-h4 { color: var(--ink); background: var(--pf-orange); margin-bottom: 20px; } .r-quotebox ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .r-quotebox li { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.35; color: var(--paper-warm); padding: 14px 20px; background: rgba(255,255,255,0.06); border-radius: var(--r-md); letter-spacing: -0.01em; } .r-example { display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; align-items: start; margin: 32px 0; padding: 32px; background: var(--paper-warm); border-radius: var(--r-lg); max-width: 100%; } .r-example .r-imgph { margin-bottom: 0; aspect-ratio: 4 / 3; } .r-example .r-body { margin-bottom: 0; font-size: 16px; } .r-status-badge { display: inline-block; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pf-orange-dark); background: var(--pf-orange-mist); padding: 6px 12px; border-radius: var(--r-pill); } /* ---- Wordcloud (dynamic, jittered, animated) ---- */ .r-wordcloud { margin: 36px 0; padding: 56px 40px; background: var(--paper-warm); border-radius: var(--r-xl); max-width: 100%; position: relative; overflow: hidden; } .r-wordcloud::before, .r-wordcloud::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; } .r-wordcloud::before { width: 360px; height: 360px; background: radial-gradient(circle, var(--pf-orange) 0%, transparent 65%); opacity: 0.18; filter: blur(40px); top: -120px; right: -100px; } .r-wordcloud::after { width: 240px; height: 240px; background: radial-gradient(circle, var(--ink) 0%, transparent 70%); opacity: 0.10; filter: blur(40px); bottom: -100px; left: -60px; } .r-wordcloud .r-h4 { position: relative; z-index: 1; margin-bottom: 32px; } .r-wc-terms { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 24px 36px; align-items: center; justify-content: center; padding: 32px 8px 8px; min-height: 240px; line-height: 1.0; } .r-wc-term { font-family: var(--font-display); display: inline-block; letter-spacing: -0.025em; transform-origin: center; transition: transform .35s var(--ease-spring), color .25s var(--ease-out); cursor: default; white-space: nowrap; opacity: 0; animation: wcAppear .6s var(--ease-spring) forwards; } .r-wc-term:hover { transform: translateY(-2px) rotate(0deg) scale(1.08) !important; color: var(--pf-orange) !important; z-index: 2; } @keyframes wcAppear { from { opacity: 0; transform: translateY(20px) scale(0.85); } to { opacity: 1; } } /* ---- Image strip carousel (mirrors the Timeline pattern) ---- */ .r-imgstrip { margin: 36px 0; max-width: 100%; } .r-imgstrip-controls { display: flex; align-items: center; gap: 24px; margin-bottom: 18px; padding: 0 4px; } .r-imgstrip-progress { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--paper-3); overflow: hidden; } .r-imgstrip-progress-fill { height: 100%; background: var(--pf-orange); border-radius: var(--r-pill); transition: width .12s linear; min-width: 8%; } .r-imgstrip-buttons { display: flex; gap: 8px; } .r-imgstrip-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--pf-orange); background: #fff; color: var(--pf-orange); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s var(--ease-out); } .r-imgstrip-btn:hover:not(:disabled) { background: var(--pf-orange); color: #fff; transform: scale(1.06); } .r-imgstrip-btn:disabled { opacity: 0.35; cursor: not-allowed; } .r-imgstrip-track { display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; /* generous vertical padding so the hover scale renders without clipping */ padding: 24px 4px 32px; margin: -24px -4px -32px; /* fade the right edge so the partial 3rd item softens into the background */ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 90px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 90px), transparent 100%); transition: -webkit-mask-image .25s var(--ease-out), mask-image .25s var(--ease-out); } .r-imgstrip-track.is-end { -webkit-mask-image: none; mask-image: none; } .r-imgstrip-track::-webkit-scrollbar { display: none; } .r-imgstrip-item { margin: 0; /* 2.3 items visible (≈0.3 of next item peeks): 2 gaps × 20px = 40px */ flex: 0 0 calc((100% - 40px) / 2.3); scroll-snap-align: start; min-width: 0; position: relative; transition: transform .35s var(--ease-spring); } .r-imgstrip-item:hover { transform: scale(1.05); z-index: 1; } .r-imgstrip-item .r-imgph { aspect-ratio: 16 / 9; border-radius: var(--r-md); } .r-imgstrip-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--shadow-soft); transition: box-shadow .35s var(--ease-out); } .r-imgstrip-item:hover .r-imgstrip-img { box-shadow: var(--shadow-lift); } .r-imgstrip-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 14px; font-family: var(--font-display); font-size: 32px; font-weight: 800; color: #fff; text-align: left; letter-spacing: -0.02em; line-height: 1.05; text-shadow: 0 2px 12px rgba(0,0,0,0.45); background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0) 100%); border-bottom-left-radius: var(--r-md); border-bottom-right-radius: var(--r-md); pointer-events: none; } .r-imgstrip-hint { font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 12px; display: flex; align-items: center; gap: 8px; padding: 0 4px; } /* 2x2 static grid variant — used by slide 14's comparison strip so every frame is visible at once. Items reuse the .r-imgstrip-item caption overlay styling. */ .r-imggrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 36px 0; max-width: 100%; } .r-imggrid-item { position: relative; margin: 0; flex: none; scroll-snap-align: none; } .r-imggrid-item .r-imgstrip-img { aspect-ratio: 4 / 3; } @media (max-width: 720px) { .r-imggrid { grid-template-columns: 1fr; } } /* Credit line below the 2x2 AI-frame grid on slide 14 */ .r-imggrid-credit { margin: 12px 4px 0; font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; } .r-imgstrip-hint .dot { width: 6px; height: 6px; background: var(--pf-orange); border-radius: 50%; } @media (max-width: 720px) { .r-imgstrip-item { flex: 0 0 85%; } } /* ---- Chart block ---- */ .r-chart-block { margin: 56px 0; max-width: 100%; } .r-chart-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--ink); margin-bottom: 20px; line-height: 1.25; text-transform: none; letter-spacing: -0.02em; padding: 0; background: none; display: block; } .chart { background: #fff; padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--rule); box-shadow: var(--shadow-soft); } .chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--ink-2); margin-top: 18px; padding: 0 4px; } .chart-legend span { display: inline-flex; align-items: center; gap: 8px; background: var(--paper-warm); padding: 7px 14px; border-radius: var(--r-pill); } .chart-legend .swatch { width: 12px; height: 12px; border-radius: 50%; } /* Cinematic line chart — distinct swatch shapes per series */ .chart-legend .swatch-line { width: 26px; height: 3px; border-radius: 2px; } .chart-legend .swatch-line-dashed { width: 26px; height: 0; background: transparent; border-top: 2.5px dashed; border-radius: 0; } .chart-legend .swatch-ring { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2.5px solid; } /* ---- Chapter divider ---- */ .chapter-divider { /* Spans both grid columns of .layout, then full-bleeds to the viewport edges. Since .layout is centered on the viewport (margin: 0 auto), this works at every viewport width without overshoot. */ grid-column: 1 / -1; position: relative; z-index: 10; min-height: 56vh; padding: 100px 32px; margin: 80px 0 80px; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 40%, rgba(0,0,0,0.7) 100%), url('assets/chapter-bg.jpg') center / cover no-repeat #0a0a0a; color: #fff; } /* Vary the image crop per chapter for a touch of visual rhythm */ .chapter-divider.cd-dark { background-position: 35% 60%, 35% 60%; } .chapter-divider.cd-sand { background-position: 70% 50%, 70% 50%; } .chapter-divider.cd-orange { background-position: 20% 40%, 20% 40%; } .chapter-divider.cd-deep-orange { background-position: 80% 70%, 80% 70%; } .chapter-divider .inner { position: relative; z-index: 1; text-align: left; max-width: 1100px; margin: 0 auto; width: 100%; } .chapter-divider .chip { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; padding: 0; background: none; color: var(--chap-accent, var(--pf-orange)); margin-bottom: 32px; } .chapter-divider .chip .dot { width: 8px; height: 8px; border-radius: 50%; opacity: 1; background: var(--chap-accent, var(--pf-orange)); } .chapter-divider .heading { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 9vw, 132px); line-height: 0.96; letter-spacing: -0.045em; margin: 0 0 28px; max-width: 16ch; text-wrap: balance; color: #fff; text-shadow: 0 2px 28px rgba(0,0,0,0.5); } .chapter-divider .heading-plus { color: var(--chap-accent, var(--pf-orange)); margin-right: 0.18em; font-weight: 800; display: inline-block; text-shadow: 0 2px 28px rgba(0,0,0,0.55); } .chapter-divider .intro { font-family: var(--font-body); font-weight: 400; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.5; max-width: 700px; margin: 0; color: rgba(255,255,255,0.94); letter-spacing: -0.005em; text-shadow: 0 1px 18px rgba(0,0,0,0.45); } /* ---- Exec summary chapter opener (no full-bleed divider) ---- */ .chapter-opener { max-width: var(--reader-max); margin: 0 auto 48px; } .chapter-opener .chip { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-size: 12px; font-weight: 500; padding: 0; background: none; text-transform: uppercase; letter-spacing: 0.22em; color: var(--pf-orange); margin-bottom: 20px; } .chapter-opener .chip .dot { width: 8px; height: 8px; background: var(--pf-orange); border-radius: 50%; } .chapter-opener .r-h1 { font-size: clamp(40px, 5vw, 72px); } /* ---- Country fact sheets row ---- Sits between the last chapter and the footer. Brazil is the only live tile; the rest are greyed-out "Coming soon" placeholders. */ .factsheets { background: var(--paper-2); border-top: 1px solid var(--rule); padding: 72px 32px 80px; margin-top: 80px; } .factsheets-inner { max-width: var(--shell-max); margin: 0 auto; } .factsheets-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pf-orange); margin-bottom: 16px; } .factsheets-title { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 12px; text-wrap: balance; } .factsheets-sub { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0 0 32px; max-width: 56ch; } .factsheets-grid { /* Was a