/* ========================================================= impact-premium.css — Impact-only luxury (v2.7.1) Requires: Load AFTER assets/css/styles.css v2.7.1 upgrade: ✅ HERO CARD HOVER SHEEN now matches index style: soft radial “museum light” (no straight line) + smooth fade/glide ========================================================= */ body.page-impact{ --im-bg: var(--bg, #06110D); --im-bg2: var(--bg2, #071812); --im-text: var(--text, #F4F0E8); --im-muted: var(--muted, rgba(244,240,232,.72)); --im-line: var(--line, rgba(244,240,232,.10)); --im-line-strong: var(--line-strong, rgba(244,240,232,.14)); --im-gold: var(--gold, #C9A227); --im-gold2: var(--gold2, #E1C76A); --im-emerald: var(--emerald, #1F8A70); --im-shadow: var(--shadow, 0 18px 46px rgba(0,0,0,.48)); --im-shadow-soft: var(--shadow-soft, 0 10px 26px rgba(0,0,0,.34)); --im-radius: 18px; --im-radius-lg: 26px; --im-blur: 12px; --im-ease: cubic-bezier(.2,.8,.2,1); /* Editorial type */ --im-serif: "Playfair Display", serif; --im-sans: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; position: relative; isolation: isolate; color: var(--im-text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Force green base */ background-color: var(--im-bg); background-image: radial-gradient(1100px 520px at 12% -10%, rgba(201,162,39,.085), transparent 62%), radial-gradient(1100px 520px at 92% -10%, rgba(31,138,112,.060), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.012), rgba(244,240,232,0) 45%), linear-gradient(180deg, var(--im-bg) 0%, var(--im-bg2) 100%); background-repeat: no-repeat; } /* Museum lighting on desktop */ @media (min-width: 992px){ body.page-impact{ background-attachment: fixed; } } /* Foil edge */ body.page-impact::before{ content:""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(920px 440px at 0% 22%, rgba(201,162,39,.085), transparent 62%), radial-gradient(920px 440px at 100% 32%, rgba(225,199,106,.060), transparent 62%), radial-gradient(880px 380px at 100% 72%, rgba(31,138,112,.050), transparent 62%); opacity: .95; } /* Smooth scroll (respect reduced motion) */ body.page-impact{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ body.page-impact{ scroll-behavior: auto; } body.page-impact *, body.page-impact *::before, body.page-impact *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Focus + selection */ body.page-impact :focus-visible{ outline: none; box-shadow: 0 0 0 .22rem rgba(201,162,39,.18); border-radius: 12px; } body.page-impact ::selection{ background: rgba(201,162,39,.22); color: rgba(244,240,232,.98); } /* Optional scrollbar polish */ body.page-impact *{ scrollbar-color: rgba(244,240,232,.16) rgba(244,240,232,.06); } body.page-impact *::-webkit-scrollbar{ height: 10px; width: 10px; } body.page-impact *::-webkit-scrollbar-thumb{ background: rgba(244,240,232,.14); border-radius: 999px; border: 2px solid rgba(6,17,13,.40); } body.page-impact *::-webkit-scrollbar-track{ background: rgba(244,240,232,.05); border-radius: 999px; } /* ========================================================= TYPOGRAPHY (impact-only) ========================================================= */ body.page-impact h1, body.page-impact .impact-title, body.page-impact .impact-sheet-title{ font-family: var(--im-serif); letter-spacing: .005em; } body.page-impact p, body.page-impact li{ font-family: var(--im-sans); font-size: 1.02rem; line-height: 1.82; } body.page-impact .muted{ color: rgba(244,240,232,.70); } body.page-impact .small{ font-size: .92rem; } /* ========================================================= LINKS — yellow like About/Index (impact-only) ========================================================= */ body.page-impact a{ text-decoration-thickness: 1px; text-underline-offset: .18em; } body.page-impact a:not(.btn):not(.im-navlink){ color: var(--im-gold2) !important; text-decoration-color: rgba(225,199,106,.55); } body.page-impact a:not(.btn):not(.im-navlink):hover{ color: var(--im-gold2) !important; text-decoration-thickness: 2px; text-decoration-color: rgba(225,199,106,.85); } /* ========================================================= BOOTSTRAP THEME BRIDGE (impact-only) ========================================================= */ body.page-impact{ --bs-body-bg: var(--im-bg); --bs-body-color: var(--im-text); --bs-secondary-color: var(--im-muted); --bs-border-color: var(--im-line); --bs-tertiary-bg: rgba(244,240,232,.03); --bs-primary: var(--im-gold); --bs-link-color: var(--im-gold2); --bs-link-hover-color: var(--im-gold2); --bs-border-radius: 1rem; --bs-border-radius-lg: 1.25rem; } body.page-impact section[id]{ scroll-margin-top: 96px; } /* ========================================================= PAGE WIDTH CONTROL (default) ========================================================= */ body.page-impact .container, body.page-impact .container-wide{ width: min(1200px, calc(100% - 48px)); margin-left: auto; margin-right: auto; max-width: none; padding-left: 0; padding-right: 0; } /* ========================================================= SECTION RHYTHM (premium bands) ========================================================= */ body.page-impact .section{ position: relative; padding: 92px 0; border-top: 1px solid var(--im-line); background: transparent; } body.page-impact .section::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(244,240,232,.016), rgba(244,240,232,0) 58%), radial-gradient(820px 420px at 10% -10%, rgba(201,162,39,.045), transparent 62%), radial-gradient(860px 440px at 110% 0%, rgba(31,138,112,.038), transparent 62%); } body.page-impact .section::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } body.page-impact .section.alt{ background: rgba(244,240,232,.007); } body.page-impact .section > .container, body.page-impact .section > .container-wide{ position: relative; z-index: 1; } /* Section head divider (paper-like) */ body.page-impact .impact-head{ position: relative; padding-bottom: 14px; margin-bottom: 22px; } body.page-impact .impact-head::after{ content:""; position:absolute; left: 0; bottom: 0; width: min(520px, 100%); height: 1px; background: linear-gradient(90deg, rgba(201,162,39,.55), rgba(244,240,232,.14), transparent); opacity: .95; } /* Premium rule line */ body.page-impact .impact-rule{ height: 1px; width: min(1100px, calc(100% - 48px)); margin: 0 auto; background: linear-gradient(90deg, rgba(244,240,232,0), rgba(244,240,232,.22), rgba(201,162,39,.30), rgba(244,240,232,.10), rgba(244,240,232,0) ); opacity: .95; } /* ========================================================= HERO — full-width inner + premium overlay HTML uses: .px-hero.px-hero--full -> .px-hero__inner.hero-grid ========================================================= */ body.page-impact .px-hero.px-hero--full{ width: 100%; max-width: none; position: relative; } /* Inner width (wider than normal page, centered) */ body.page-impact .px-hero.px-hero--full .px-hero__inner{ width: min(1380px, calc(100% - 48px)); margin-left: auto; margin-right: auto; } /* Hero overlay */ body.page-impact .px-hero{ position: relative; overflow: hidden; } body.page-impact .px-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(1060px 520px at 18% 0%, rgba(201,162,39,.14), transparent 62%), radial-gradient(1060px 520px at 92% 0%, rgba(31,138,112,.11), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.015), rgba(244,240,232,0) 55%); } body.page-impact .px-hero > *{ position: relative; z-index: 1; } /* Hero grid */ body.page-impact .px-hero .hero-grid{ display: grid; grid-template-columns: 1.35fr .95fr; gap: 28px; align-items: start; } body.page-impact .px-hero .hero-copy, body.page-impact .px-hero .px-hero-aside{ min-width: 0; } /* Badge polish (scoped) */ body.page-impact .px-hero .badge{ display: inline-flex; align-items: center; gap: 8px; padding: .45rem .70rem; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.03); color: rgba(244,240,232,.88); letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; } /* Title underline */ body.page-impact .px-hero h1{ position: relative; display: inline-block; margin-bottom: .35rem; } body.page-impact .px-hero h1::after{ content:""; display:block; height: 2px; margin-top: .65rem; width: min(240px, 64%); background: linear-gradient(90deg, rgba(201,162,39,.78), rgba(225,199,106,.20)); border-radius: 99px; opacity: .95; } /* Lead */ body.page-impact .px-hero .lead{ line-height: 1.82; color: rgba(244,240,232,.86); max-width: 74ch; } /* ========================================================= HERO PROOF STRIP — one premium strip (not 4 cards) HTML: .px-proof-strip > .px-proof ========================================================= */ body.page-impact .px-proof-strip{ margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid rgba(244,240,232,.12); border-radius: 18px; overflow: hidden; background: radial-gradient(700px 260px at 14% 0%, rgba(201,162,39,.08), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.05), rgba(244,240,232,.02)); box-shadow: 0 16px 38px rgba(0,0,0,.20); } body.page-impact .px-proof{ padding: .85rem .95rem; display: flex; gap: 12px; align-items: flex-start; } body.page-impact .px-proof:not(:first-child){ border-left: 1px solid rgba(244,240,232,.12); } body.page-impact .px-proof-ic{ width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(201,162,39,.22); background: rgba(201,162,39,.08); color: rgba(244,240,232,.95); flex: 0 0 auto; } body.page-impact .px-proof-title{ font-weight: 950; letter-spacing: .01em; color: rgba(244,240,232,.96); line-height: 1.25; } body.page-impact .px-proof-sub{ margin-top: 2px; color: rgba(244,240,232,.70); line-height: 1.45; font-size: .95rem; } /* Evidence pills */ body.page-impact .px-evidence{ margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; } body.page-impact .px-evidence-pill{ display: inline-flex; align-items: center; gap: 10px; padding: .50rem .80rem; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.03); text-decoration: none !important; color: rgba(244,240,232,.92) !important; font-weight: 900; transition: transform .16s var(--im-ease), border-color .16s var(--im-ease), background-color .16s var(--im-ease); } body.page-impact .px-evidence-pill:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.30); background: rgba(201,162,39,.08); } /* Legal line spacing */ body.page-impact .px-legal{ margin: .85rem 0 0; } /* Logo wall */ body.page-impact .px-logo-wall{ margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; } body.page-impact .px-logo-wall span{ display: inline-flex; align-items: center; padding: .40rem .70rem; border-radius: 999px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.02); color: rgba(244,240,232,.78); font-weight: 900; font-size: .88rem; letter-spacing: .01em; } /* ========================================================= HERO ASIDE — premium “glass paper” ========================================================= */ body.page-impact .px-hero-aside{ position: relative; border-radius: 28px; border: 1px solid rgba(244,240,232,.14); background: linear-gradient(180deg, rgba(244,240,232,.05), rgba(244,240,232,.018)), radial-gradient(700px 320px at 18% 0%, rgba(201,162,39,.10), transparent 62%), radial-gradient(720px 340px at 110% 10%, rgba(31,138,112,.08), transparent 65%); backdrop-filter: blur(14px); box-shadow: 0 22px 62px rgba(0,0,0,.28); padding: 1.05rem 1.05rem; isolation: isolate; /* ✅ important to clip sheen like “light inside glass” */ overflow: hidden; } /* ========================================================= ✅ FIX: HERO CARD HOVER SHEEN — same style as index (impact) Soft radial “museum light” + fades/glides (no straight line) ========================================================= */ body.page-impact .px-hero-aside::after{ content:""; position:absolute; inset:-45% -40%; /* oversized so edges never look “cut” */ pointer-events:none; background: radial-gradient(120% 70% at 10% 38%, rgba(244,240,232,.08) 0%, rgba(201,162,39,.14) 26%, rgba(244,240,232,.06) 44%, rgba(244,240,232,0) 70%); opacity: 0; transform: translateX(-24%) rotate(8deg); mix-blend-mode: overlay; transition: opacity .22s var(--im-ease), transform .55s var(--im-ease); } body.page-impact .px-hero-aside:hover::after{ opacity: .92; transform: translateX(10%) rotate(8deg); } /* Touch devices: keep it subtle */ @media (hover: none){ body.page-impact .px-hero-aside:hover::after{ opacity: .55; transform: translateX(2%) rotate(8deg); } } body.page-impact .px-hero-aside .kicker{ letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; color: rgba(244,240,232,.70); margin-bottom: 10px; } body.page-impact .px-hero-aside .card-title{ margin: .15rem 0 .25rem; font-family: var(--im-serif); font-size: clamp(1.20rem, 1.9vw, 1.55rem); line-height: 1.10; color: rgba(244,240,232,.95); } body.page-impact .px-hero-aside .card-sub{ margin: 0 0 .65rem 0; color: rgba(244,240,232,.72); line-height: 1.70; } /* Mini stack: one block, divided rows */ body.page-impact .px-hero-aside .mini-stack{ margin: .9rem 0 1rem; display: grid; gap: 0; border: 1px solid rgba(244,240,232,.12); border-radius: 18px; overflow: hidden; background: rgba(244,240,232,.02); } body.page-impact .px-hero-aside .mini{ padding: .75rem .85rem; } body.page-impact .px-hero-aside .mini + .mini{ border-top: 1px solid rgba(244,240,232,.10); } body.page-impact .px-hero-aside .mini-title{ font-weight: 900; color: rgba(244,240,232,.92); display: flex; align-items: center; gap: 10px; } body.page-impact .px-hero-aside .mini-title i{ width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; border: 1px solid rgba(201,162,39,.22); background: rgba(201,162,39,.08); } body.page-impact .px-hero-aside .mini-text{ margin-top: .25rem; color: rgba(244,240,232,.72); line-height: 1.55; } /* Aside footer */ body.page-impact .px-aside-foot{ margin-top: .95rem; padding-top: .95rem; border-top: 1px solid rgba(244,240,232,.12); } body.page-impact .px-aside-foot-kicker{ letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; color: rgba(244,240,232,.62); } body.page-impact .px-aside-foot-note{ margin: .25rem 0 0; } body.page-impact .px-aside-link{ margin-top: .65rem; display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; font-weight: 900; color: rgba(225,199,106,.95) !important; } body.page-impact .px-aside-link:hover{ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; } /* ========================================================= BUTTONS — quiet luxury (impact-only) ========================================================= */ body.page-impact .btn{ border-radius: 999px; letter-spacing: .01em; box-shadow: none; transition: transform .16s var(--im-ease), filter .16s var(--im-ease), border-color .16s var(--im-ease), background-color .16s var(--im-ease); } body.page-impact .btn:hover{ transform: translateY(-1px); } body.page-impact .btn:active{ transform: translateY(0); } body.page-impact .btn-primary{ background: radial-gradient(520px 220px at 18% 0%, rgba(201,162,39,.30), rgba(201,162,39,.10) 55%, rgba(201,162,39,.06)), linear-gradient(180deg, rgba(201,162,39,.18), rgba(201,162,39,.08)); border: 1px solid rgba(201,162,39,.52); color: rgba(244,240,232,.96); } body.page-impact .btn-primary:hover{ border-color: rgba(201,162,39,.70); filter: brightness(1.03); } body.page-impact .btn-secondary{ background: rgba(244,240,232,.04); border: 1px solid rgba(244,240,232,.16); color: rgba(244,240,232,.92); } body.page-impact .btn-secondary:hover{ border-color: rgba(201,162,39,.35); background: rgba(244,240,232,.05); } body.page-impact .btn-outline{ background: transparent; border: 1px solid rgba(244,240,232,.20); color: rgba(244,240,232,.92); } body.page-impact .btn-outline:hover{ border-color: rgba(201,162,39,.45); background: rgba(201,162,39,.08); color: rgba(244,240,232,.96); } body.page-impact .btn-ghost{ background: rgba(244,240,232,.03); border: 1px solid rgba(244,240,232,.14); color: rgba(244,240,232,.92); } body.page-impact .btn-ghost:hover{ border-color: rgba(201,162,39,.35); background: rgba(244,240,232,.05); } /* ========================================================= HEADERS ========================================================= */ body.page-impact .impact-kicker{ letter-spacing: .18em; text-transform: uppercase; font-size: .74rem; color: rgba(244,240,232,.68); margin-bottom: 10px; } body.page-impact .impact-title{ font-size: clamp(1.72rem, 2.4vw, 2.35rem); line-height: 1.06; margin: 0 0 10px 0; color: rgba(244,240,232,.97); } body.page-impact .impact-lead{ margin: 0; max-width: 82ch; color: rgba(244,240,232,.72); line-height: 1.84; } body.page-impact .impact-title-row{ display:flex; align-items:flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } /* ========================================================= Draft / Verified toggle ========================================================= */ body.page-impact .im-mode{ display:inline-flex; align-items:center; gap: 6px; padding: 6px; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(6,17,13,.42); backdrop-filter: blur(var(--im-blur)); box-shadow: 0 10px 26px rgba(0,0,0,.18); position: relative; isolation: isolate; } body.page-impact .im-mode::before{ content:""; position:absolute; inset:-1px; border-radius: 999px; pointer-events:none; background: radial-gradient(420px 220px at 20% 0%, rgba(201,162,39,.12), transparent 60%); opacity: .85; } body.page-impact .im-mode-btn{ position: relative; z-index: 1; appearance: none; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.03); color: rgba(244,240,232,.92); border-radius: 999px; padding: 7px 12px; font-weight: 900; font-size: .90rem; cursor: pointer; transition: transform .16s var(--im-ease), border-color .16s var(--im-ease), background-color .16s var(--im-ease); } body.page-impact .im-mode-btn:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.30); background: rgba(201,162,39,.08); } body.page-impact .im-mode-btn:active{ transform: translateY(0); } body.page-impact .im-mode-btn.is-active{ border-color: rgba(201,162,39,.55); background: radial-gradient(360px 160px at 20% 0%, rgba(201,162,39,.22), rgba(201,162,39,.10) 60%, rgba(201,162,39,.06)); } body.page-impact .im-mode-chip{ position: relative; z-index: 1; margin-left: 2px; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.02); color: rgba(244,240,232,.70); font-size: .82rem; letter-spacing: .10em; text-transform: uppercase; } body.page-impact .im-mode-help{ margin-top: .6rem; } /* Verified mode */ body.page-impact.im-verified .impact-metric-num{ color: rgba(225,199,106,.96); text-shadow: 0 0 22px rgba(201,162,39,.14); } body.page-impact.im-verified .impact-evidence{ border-top-color: rgba(201,162,39,.22); } body.page-impact.im-verified .im-mode-chip{ border-color: rgba(201,162,39,.40); background: rgba(201,162,39,.10); color: rgba(225,199,106,.92); } /* ========================================================= METRICS — executive report rows ========================================================= */ body.page-impact .impact-metrics{ border-top: 1px solid rgba(244,240,232,.12); } body.page-impact .impact-metric{ position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(90px, 140px) 1fr minmax(120px, 150px); gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid rgba(244,240,232,.10); } body.page-impact .impact-metric::after{ content:""; position:absolute; inset: -1px 0; pointer-events:none; opacity: 0; transition: opacity .22s var(--im-ease); background: linear-gradient(115deg, transparent 0%, rgba(244,240,232,.04) 22%, rgba(201,162,39,.06) 38%, rgba(244,240,232,.03) 54%, transparent 72%); } body.page-impact .impact-metric:hover::after{ opacity: 1; } body.page-impact .impact-metric-num{ font-family: var(--im-serif); font-size: clamp(1.70rem, 2.9vw, 2.40rem); line-height: 1; color: rgba(244,240,232,.97); letter-spacing: .01em; } body.page-impact .impact-metric-body h3{ margin: 0 0 6px 0; font-size: 1.06rem; letter-spacing: .01em; } body.page-impact .impact-metric-body p{ margin: 0; } body.page-impact .impact-metric-tag{ justify-self: end; display: inline-flex; align-items:center; padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.03); color: rgba(244,240,232,.80); font-weight: 900; font-size: .86rem; transition: border-color .2s var(--im-ease), background-color .2s var(--im-ease); } body.page-impact .impact-metric:hover .impact-metric-tag{ border-color: rgba(201,162,39,.28); background: rgba(201,162,39,.06); } body.page-impact .impact-evidence{ margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed rgba(244,240,232,.14); color: rgba(244,240,232,.68); font-size: .92rem; line-height: 1.55; } body.page-impact .impact-evidence a{ font-weight: 800; } body.page-impact .impact-callout{ margin-top: 14px; padding: 12px 14px; border-left: 3px solid rgba(201,162,39,.55); background: rgba(244,240,232,.03); border-radius: 12px; color: rgba(244,240,232,.84); line-height: 1.70; } /* ========================================================= Impact Sheet module ========================================================= */ body.page-impact .impact-sheet{ margin-top: 16px; border-radius: 18px; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.02); box-shadow: none; padding: 1rem 1.05rem 1.05rem; position: relative; } body.page-impact .impact-sheet-inner{ display:flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; } body.page-impact .impact-sheet-title{ margin: 0; font-size: 1.18rem; letter-spacing: .01em; } body.page-impact .impact-sheet-actions{ display:flex; gap: 10px; flex-wrap: wrap; } body.page-impact .impact-sheet-note{ margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(244,240,232,.10); } body.page-impact .impact-sheet-note code{ background: rgba(244,240,232,.05); border: 1px solid rgba(244,240,232,.10); padding: .08rem .35rem; border-radius: 8px; color: rgba(244,240,232,.92); } /* ========================================================= PARTNERS — strip + details grid ========================================================= */ body.page-impact .impact-partner-strip{ display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 0; margin: 6px 0 18px; border-top: 1px solid rgba(244,240,232,.12); border-bottom: 1px solid rgba(244,240,232,.10); } body.page-impact .impact-partner{ display: inline-flex; align-items: center; padding: .42rem .72rem; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.03); color: rgba(244,240,232,.90); font-weight: 900; letter-spacing: .01em; } body.page-impact .impact-details-grid{ margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } body.page-impact .impact-detail{ border-radius: 16px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.02); overflow: hidden; box-shadow: none; } body.page-impact .impact-detail summary{ list-style: none; cursor: pointer; padding: 14px 14px 12px; display: grid; gap: 6px; position: relative; } body.page-impact .impact-detail summary::-webkit-details-marker{ display:none; } body.page-impact .impact-detail summary::after{ content: "↘"; position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(6,17,13,.35); color: rgba(244,240,232,.92); transition: transform .18s var(--im-ease), border-color .18s var(--im-ease), background-color .18s var(--im-ease); } body.page-impact details[open].impact-detail summary::after{ transform: rotate(180deg); border-color: rgba(201,162,39,.35); background: rgba(201,162,39,.10); } body.page-impact .impact-detail-title{ font-weight: 950; color: rgba(244,240,232,.96); } body.page-impact .impact-detail-sub{ color: rgba(244,240,232,.70); font-size: .95rem; line-height: 1.55; padding-right: 48px; } body.page-impact .impact-detail-body{ padding: 0 14px 14px; border-top: 1px solid rgba(244,240,232,.10); color: rgba(244,240,232,.78); line-height: 1.72; } /* ========================================================= STORIES (editorial rail) ========================================================= */ body.page-impact .impact-stories{ list-style: none; margin: 0; padding: 0; border-left: 1px solid rgba(244,240,232,.12); } body.page-impact .impact-story{ position: relative; padding: 0 0 18px 18px; margin: 0 0 18px 0; } body.page-impact .impact-story::before{ content:""; position:absolute; left: -6px; top: 6px; width: 12px; height: 12px; border-radius: 999px; border: 1px solid rgba(201,162,39,.40); background: rgba(201,162,39,.12); } body.page-impact .impact-story-meta{ display:flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } body.page-impact .impact-story-kicker{ letter-spacing: .16em; text-transform: uppercase; font-size: .74rem; color: rgba(244,240,232,.70); font-weight: 950; } body.page-impact .impact-story-evidence{ color: rgba(244,240,232,.65); font-size: .90rem; } body.page-impact .impact-story h3{ margin: 0 0 8px 0; } body.page-impact .impact-story p{ margin: 0; } /* ========================================================= PANELS (Evidence blocks) ========================================================= */ body.page-impact .impact-panels{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; } body.page-impact .impact-panel{ border: 1px solid rgba(244,240,232,.12); border-radius: 16px; background: rgba(244,240,232,.02); box-shadow: none; padding: 1rem 1.05rem 1.1rem; } body.page-impact .impact-panel h3{ margin-top: 0; } body.page-impact .impact-list{ margin: .65rem 0 0; padding-left: 1.1rem; color: rgba(244,240,232,.76); line-height: 1.7; } body.page-impact .impact-panel-actions{ margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(244,240,232,.10); } /* ========================================================= MILESTONES ========================================================= */ body.page-impact .impact-timeline{ list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(244,240,232,.12); } body.page-impact .impact-milestone{ display: grid; grid-template-columns: minmax(110px, 150px) 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(244,240,232,.10); } body.page-impact .impact-year{ font-weight: 950; letter-spacing: .02em; color: rgba(244,240,232,.93); } body.page-impact .impact-milestone-body h3{ margin: 0 0 6px 0; } body.page-impact .impact-milestone-body p{ margin: 0; } /* ========================================================= DOWNLOADS — trust-download rows ========================================================= */ body.page-impact .impact-downloads{ margin-top: 18px; display: grid; gap: 12px; } body.page-impact a.trust-download{ display: flex; align-items: center; gap: 14px; padding: 14px 14px; border-radius: 16px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.02); text-decoration: none !important; color: rgba(244,240,232,.94) !important; transition: transform .16s var(--im-ease), border-color .16s var(--im-ease), background-color .16s var(--im-ease); } body.page-impact a.trust-download:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.28); background: rgba(201,162,39,.06); } body.page-impact .trust-dl-type{ min-width: 56px; text-align: center; padding: .35rem .55rem; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.03); color: rgba(244,240,232,.86); font-weight: 950; letter-spacing: .08em; font-size: .78rem; } body.page-impact .trust-dl-title{ display: block; font-weight: 950; letter-spacing: .01em; } body.page-impact .trust-dl-sub{ display: block; margin-top: 2px; color: rgba(244,240,232,.70); } body.page-impact .trust-dl-arrow{ margin-left: auto; font-weight: 950; color: rgba(225,199,106,.90); } /* ========================================================= CTA BAND (if not already styled in styles.css) ========================================================= */ body.page-impact .cta-band{ position: relative; padding: 78px 0; border-top: 1px solid rgba(244,240,232,.10); background: radial-gradient(900px 360px at 14% 0%, rgba(201,162,39,.10), transparent 62%), radial-gradient(900px 360px at 92% 0%, rgba(31,138,112,.09), transparent 62%), rgba(244,240,232,.006); } body.page-impact .cta-inner{ display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; } body.page-impact .cta-title{ margin: 0 0 .35rem 0; font-family: var(--im-serif); font-size: clamp(1.6rem, 2.2vw, 2.15rem); line-height: 1.08; } body.page-impact .cta-actions{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ========================================================= MICRO-UX: progress + mini-nav + top ========================================================= */ body.page-impact .im-progress{ position: fixed; left: 0; top: 0; width: 100%; height: 3px; z-index: 9999; background: rgba(244,240,232,.06); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(244,240,232,.10); } body.page-impact .im-progress > span{ display: block; height: 100%; width: 0%; background: linear-gradient(90deg, rgba(201,162,39,.95), rgba(31,138,112,.55)); } body.page-impact .im-mininav{ position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 10px); z-index: 9997; display:flex; gap: 8px; align-items:center; padding: 10px 10px; border-radius: 999px; border: 1px solid rgba(244,240,232,.18); background: rgba(6,17,13,.62); backdrop-filter: blur(var(--im-blur)); box-shadow: 0 14px 38px rgba(0,0,0,.30); opacity: 0; pointer-events: none; transition: opacity .2s var(--im-ease), transform .2s var(--im-ease), border-color .2s var(--im-ease); } body.page-impact .im-mininav.is-show{ opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } body.page-impact .im-mininav a{ position: relative; display:inline-flex; align-items:center; justify-content:center; padding: 8px 12px; border-radius: 999px; text-decoration:none !important; font-weight: 900; font-size: .88rem; color: rgba(244,240,232,.90) !important; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.03); transition: transform .16s var(--im-ease), border-color .16s var(--im-ease), background-color .16s var(--im-ease); } body.page-impact .im-mininav a:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.30); background: rgba(201,162,39,.08); } body.page-impact .im-mininav a:active{ transform: translateY(0); } body.page-impact .im-mininav a.is-active{ border-color: rgba(201,162,39,.55); background: rgba(201,162,39,.12); } body.page-impact .im-mininav a.is-active::before{ content:""; position:absolute; left: 10px; top: 50%; width: 6px; height: 6px; border-radius: 999px; transform: translateY(-50%); background: rgba(201,162,39,.95); box-shadow: 0 0 0 6px rgba(201,162,39,.12); } body.page-impact .im-top{ position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 9998; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(244,240,232,.16); background: rgba(6,17,13,.55); backdrop-filter: blur(var(--im-blur)); color: rgba(244,240,232,.92); font-weight: 950; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .2s var(--im-ease), transform .2s var(--im-ease), border-color .2s var(--im-ease), background-color .2s var(--im-ease); } body.page-impact .im-top.is-show{ opacity: 1; pointer-events: auto; transform: translateY(0); } body.page-impact .im-top:hover{ border-color: rgba(201,162,39,.35); background: rgba(6,17,13,.62); box-shadow: 0 10px 26px rgba(0,0,0,.22); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 980px){ body.page-impact .section{ padding: 74px 0; } body.page-impact .px-hero .hero-grid{ grid-template-columns: 1fr; gap: 18px; } body.page-impact .impact-panels{ grid-template-columns: 1fr; } body.page-impact .impact-metric{ grid-template-columns: 1fr; } body.page-impact .impact-metric-tag{ justify-self: start; margin-top: -6px; } body.page-impact .impact-milestone{ grid-template-columns: 1fr; } /* Proof strip goes to 2 cols */ body.page-impact .px-proof-strip{ grid-template-columns: repeat(2, minmax(0, 1fr)); } body.page-impact .px-proof{ border-left: 0; } body.page-impact .px-proof:nth-child(2n){ border-left: 1px solid rgba(244,240,232,.12); } body.page-impact .px-proof:nth-child(n+3){ border-top: 1px solid rgba(244,240,232,.12); } body.page-impact .impact-details-grid{ grid-template-columns: 1fr; } } @media (max-width: 560px){ body.page-impact .container, body.page-impact .container-wide{ width: min(1200px, calc(100% - 28px)); } body.page-impact .px-hero.px-hero--full .px-hero__inner{ width: min(1380px, calc(100% - 28px)); } body.page-impact .px-proof-strip{ grid-template-columns: 1fr; } body.page-impact .px-proof{ border-left: 0 !important; } body.page-impact .px-proof:nth-child(n+2){ border-top: 1px solid rgba(244,240,232,.12); } body.page-impact .im-mininav{ max-width: calc(100% - 90px); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.page-impact .im-mininav::-webkit-scrollbar{ display:none; } }