/* ============================================================ Fundación Rimas · Informe Anual 2025 Shared stylesheet — inherits the v1 brand system (index-v1.html). Tokens (colors, fonts, radius) are declared in each page's inline tailwind.config; this file carries the @font-face, the brand primitives ported from v1, and the report-only components (chapter header, contents overlay, campus card, growth timeline). ============================================================ */ /* --- Masny: brand accent face (cifras y titulares clave) --- */ @font-face { font-family: 'Masny'; font-style: normal; font-weight: 800; font-display: swap; src: url('/brand/fonts/Masny-ExtraBold.woff2') format('woff2'), url('/brand/fonts/Masny-ExtraBold.woff') format('woff'); } @font-face { font-family: 'Masny'; font-style: normal; font-weight: 900; font-display: swap; src: url('/brand/fonts/Masny-Black.woff2') format('woff2'), url('/brand/fonts/Masny-Black.woff') format('woff'); } * { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } ::selection { background: #EA1C24; color: #fff; } :focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(234, 28, 36, 0.35); } /* --- Brand primitives (ported verbatim from v1) --- */ .texture-dark { background-color: #000; background-image: url('/brand/textura-papel-negro.png'); background-size: cover; background-position: center; } .gradient-rojo { background: linear-gradient(115deg, #EA1C24 0%, #8F1015 78%, #6E0C10 100%); } .gradient-rojo-negro { background: linear-gradient(100deg, #EA1C24 0%, #000 100%); } .play-tri { display: inline-block; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; flex-shrink: 0; } .play-tri-lg { display: inline-block; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid currentColor; flex-shrink: 0; } .counter { font-variant-numeric: tabular-nums; } .fade-in { opacity: 0; transform: translateY(30px); transition: opacity .6s ease-out, transform .6s ease-out; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* --- Report navigation --- */ #report-nav { transition: background-color 250ms ease, box-shadow 250ms ease; } #report-nav.nav-solid { background-color: rgba(0,0,0,.92); backdrop-filter: blur(8px); } /* --- Chapter split-header (NN / article / noun) --- */ .chapter-num { font-family: 'Masny', sans-serif; font-weight: 900; line-height: .82; letter-spacing: -.01em; } /* --- Corner meta line --- */ .corner-meta { font-style: italic; font-size: .75rem; } /* --- Persistent "Siguiente" next-chapter link --- */ .next-link { transition: transform .2s ease, background-color .15s ease; } .next-link:hover { transform: translateX(4px); } /* --- Contents overlay --- */ #contents-overlay { transition: opacity .3s ease, visibility .3s ease; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } #contents-overlay[hidden] { display: none; } .contents-row { transition: color .15s ease, padding-left .2s ease; } .contents-row:hover { padding-left: .5rem; } /* --- Campus card (ch03) DigDeep anatomy --- */ .coords { font-variant-numeric: tabular-nums; letter-spacing: .06em; } /* ============================================================ CAMPUS GROWTH TIMELINE (ch02 centerpiece) ============================================================ */ .timeline { position: relative; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; /* Soft right-edge fade via a mask on the scroll viewport itself, so the last visible cards are never covered by an overlay. Lifted when scrolled to end. */ -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent); } .timeline-outer.at-end .timeline { -webkit-mask-image: none; mask-image: none; } .timeline-track { display: flex; align-items: stretch; min-width: max-content; gap: 0; padding: 2rem 0 1rem; } .timeline-axis { position: absolute; left: 0; right: 0; /* Run the line THROUGH the dot row, not the "campuses" label above it. The dot sits a constant ~66px below the count value, whose size is clamp(2.75rem,5vw, 4.25rem) — so reusing that clamp keeps the axis centered on the dots at every width (verified at 390 and 1440). */ top: calc(72px + clamp(2.75rem, 5vw, 4.5rem)); height: 2px; background: linear-gradient(90deg, rgba(234,28,36,.15), rgba(234,28,36,.55) 30%, rgba(234,28,36,.55) 85%, rgba(234,28,36,0)); } .tl-month { position: relative; flex: 0 0 auto; width: clamp(200px, 22vw, 300px); padding: 0 1rem; } .tl-count { font-family: 'Masny', sans-serif; font-weight: 900; font-size: clamp(2.75rem, 5vw, 4.5rem); line-height: 1; color: #EA1C24; } .tl-monthlabel { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 700; color: #808080; } .tl-dot { width: 14px; height: 14px; border-radius: 999px; background: #EA1C24; box-shadow: 0 0 0 5px rgba(234,28,36,.15); position: relative; z-index: 2; } .tl-node { opacity: 0; transform: translateY(16px); transition: opacity .5s ease-out, transform .5s ease-out; } .tl-node.revealed { opacity: 1; transform: translateY(0); } .tl-chip { display: block; border-radius: 14px; padding: .75rem .9rem; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.08); border-left: 3px solid #D9D9D9; text-decoration: none; } .tl-chip:hover { box-shadow: 0 12px 40px rgba(0,0,0,.16); } .tl-chip.is-star { border-left-color: #EA1C24; background: #FFECDE; } .tl-chip.is-popup { border-left-style: dashed; border-left-color: #808080; background: #F7F7F7; } .tl-star-flag { display: inline-flex; align-items: center; gap: .35rem; color: #EA1C24; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; } .timeline-hint { color: #808080; font-size: .75rem; } /* --- Cookie toggle (ported from v1) --- */ .cookie-banner { animation: slideUp .4s ease-out; } @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .cookie-banner.hiding { animation: slideDownOut .3s ease-in forwards; } @keyframes slideDownOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } } .cookie-banner-overlay { background: rgba(0,0,0,.5); backdrop-filter: blur(2px); } .cookie-toggle { position: relative; width: 44px; height: 24px; background: #d1d5db; border-radius: 12px; cursor: pointer; transition: background .3s ease; } .cookie-toggle.active { background: #EA1C24; } .cookie-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .3s ease; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .cookie-toggle.active::after { transform: translateX(20px); } .cookie-toggle.disabled { opacity: .6; cursor: not-allowed; } /* ============================================================ IMMERSIVE LAYER (DigDeep/MHS-style, in the v1 look) ============================================================ */ /* --- Scroll progress bar (top) + reading marker --- */ #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, #EA1C24, #8F1015); z-index: 60; transition: width .1s linear; } /* --- Big DigDeep-style coordinate badge --- */ .coord-badge { display: inline-flex; align-items: center; gap: .6rem; font-variant-numeric: tabular-nums; letter-spacing: .12em; font-weight: 700; font-size: clamp(.75rem, 1.4vw, .9rem); text-transform: uppercase; } .coord-badge .dot { width: 7px; height: 7px; border-radius: 999px; background: #EA1C24; box-shadow: 0 0 0 4px rgba(234,28,36,.25); } /* --- Cinematic full-bleed "moment" section --- */ .moment { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; } .moment-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-attachment: fixed; /* parallax on desktop */ z-index: 0; } .moment-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.92) 100%); } /* Mobile crops shift bright imagery under the title — stronger scrim (QA F3) */ @media (max-width: 640px) { .moment-scrim { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.94) 100%); } } .moment-inner { position: relative; z-index: 2; width: 100%; } .moment-eyebrow { color: rgba(255,255,255,.85); text-shadow: 0 1px 12px rgba(0,0,0,.55); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; } @media (max-width: 900px) { .moment-bg { background-attachment: scroll; } } /* Ambient video loop behind a moment (people-free brand asset). The poster frame doubles as the .moment-bg fallback so reduced-motion still has an image. */ .moment-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* --- Interactive Puerto Rico campus map --- */ .pr-map-wrap { position: relative; border-radius: 20px; overflow: hidden; padding: 12px; background: radial-gradient(120% 130% at 50% 0%, #17181c 0%, #0b0b0c 72%); border: 1px solid rgba(255,255,255,.07); } .pr-map { display: block; width: 100%; height: auto; } .pr-land { fill: #141414; stroke: rgba(234,28,36,.35); stroke-width: 1.5; } .pr-grid line { stroke: rgba(255,255,255,.05); stroke-width: 1; } .map-pin-hit { cursor: pointer; } .map-pin { fill: #EA1C24; transition: r .2s ease; } .map-pin-ring { fill: none; stroke: #EA1C24; opacity: .5; transform-box: fill-box; transform-origin: center; } .map-pin-hit:hover .map-pin { fill: #fff; } .map-pin-hit.is-star .map-pin { fill: #EA1C24; } .map-pin-hit.is-star .map-pin-ring { stroke: #fff; } @keyframes pinpulse { 0% { r: 6; opacity: .55; } 70% { r: 20; opacity: 0; } 100% { r: 20; opacity: 0; } } .map-pin-ring.pulse { animation: pinpulse 2.4s ease-out infinite; } .map-label { fill: #fff; font-size: 12px; font-weight: 700; opacity: 0; transition: opacity .2s ease; pointer-events: none; } .map-pin-hit:hover .map-label, .map-pin-hit:focus-visible .map-label { opacity: 1; } .map-coord { fill: rgba(255,255,255,.55); font-size: 12px; letter-spacing: .1em; opacity: 0; transition: opacity .2s ease; pointer-events: none; } .map-pin-hit:hover .map-coord { opacity: 1; } .map-legend { color: rgba(255,255,255,.6); font-size: .75rem; } /* --- UP NEXT full-bleed chapter transition --- */ .upnext { position: relative; overflow: hidden; } .upnext-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .28; z-index: 0; } .upnext-inner { position: relative; z-index: 2; } .upnext-num { font-family: 'Masny', sans-serif; font-weight: 900; line-height: .8; color: rgba(255,255,255,.12); font-size: clamp(6rem, 18vw, 16rem); } .upnext .cta { transition: transform .2s ease, gap .2s ease; } .upnext .cta:hover { transform: translateX(6px); } /* --- LISTEN / ESCUCHAR audio affordance --- */ .listen { display: inline-flex; align-items: center; gap: .75rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; border-radius: 999px; padding: .5rem .5rem .5rem 1rem; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .listen:hover { background: rgba(234,28,36,.18); border-color: rgba(234,28,36,.5); } .listen.on-light { background: #FFECDE; border-color: rgba(234,28,36,.25); color: #121212; } .listen .icon { width: 34px; height: 34px; border-radius: 999px; background: #EA1C24; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .listen .lbl { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; } .listen .meta { font-size: .75rem; opacity: .6; } .listen-bar { height: 3px; border-radius: 3px; background: rgba(234,28,36,.25); overflow: hidden; } .listen-bar > span { display: block; height: 100%; width: 0%; background: #EA1C24; } /* --- El Vagón 3D viewer --- */ .v3d { background: radial-gradient(120% 130% at 50% 0%, #17181c 0%, #0b0b0c 72%); } .v3d-fallback { transition: opacity .5s ease; } .v3d.v3d-active .v3d-fallback { opacity: 0; pointer-events: none; } .v3d-hint { position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s ease; background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: .3rem .9rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; } .v3d.v3d-active .v3d-hint { opacity: 1; } .v3d.v3d-touched .v3d-hint { opacity: 0; } /* --- Share row --- */ .share-btn { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; } /* ============================================================ SINGLE-PAGE EXPERIENCE (the index) ============================================================ */ html { scroll-padding-top: 68px; } .xp-chapter { scroll-margin-top: 68px; } /* Adaptive nav — always legible over light OR dark sections */ .xp-nav { transition: background-color .25s ease, backdrop-filter .25s ease, box-shadow .25s ease; } .xp-nav .nav-ink { color: #fff; transition: color .2s ease; } .xp-nav.nav-light { background: rgba(255,255,255,.85); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(0,0,0,.06); } .xp-nav.nav-light .nav-ink { color: #121212; } .xp-nav.nav-light .nav-logo-dark { display: none !important; } .xp-nav.nav-light .nav-logo-light { display: inline-block !important; } .xp-nav.nav-dark { background: rgba(0,0,0,.30); backdrop-filter: blur(8px); } /* Right-side chapter rail — minimal edge ticks; only shown where there is real gutter space (2xl+). Numbers appear on rail hover, labels on dot hover. It lives in the margin and never overlaps content. */ .xp-rail { position: fixed; right: 10px; top: 50%; transform: translateY(-50%); z-index: 40; flex-direction: column; gap: 9px; opacity: .7; transition: opacity .2s ease; } .xp-rail:hover { opacity: 1; } .xp-rail-dot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 1px 0; text-decoration: none; } .xp-rail-num { font-family: 'Masny', sans-serif; font-weight: 900; font-size: 12px; color: rgba(140,140,140,.9); width: 20px; text-align: center; opacity: 0; transform: translateX(4px); transition: opacity .2s ease, transform .2s ease, color .2s ease; text-shadow: 0 0 6px rgba(0,0,0,.3); } .xp-rail:hover .xp-rail-num { opacity: 1; transform: none; } .xp-rail-dot::after { content: ''; width: 16px; height: 2px; border-radius: 2px; background: rgba(150,150,150,.55); transition: background .2s ease, width .2s ease; } .xp-rail-label { opacity: 0; transform: translateX(6px); transition: opacity .2s ease, transform .2s ease; font-size: 12px; font-weight: 700; color: #121212; background: rgba(255,255,255,.94); padding: 2px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 12px rgba(0,0,0,.14); } .xp-rail-dot:hover .xp-rail-label { opacity: 1; transform: none; } .xp-rail-dot:hover .xp-rail-num { color: #EA1C24; opacity: 1; } .xp-rail-dot.active .xp-rail-num { color: #EA1C24; opacity: 1; transform: none; } .xp-rail-dot.active::after { background: #EA1C24; width: 26px; } /* Real PR map: municipality geometry */ .pr-land { fill: #3a3d44; stroke: rgba(255,255,255,.32); stroke-width: .6; stroke-linejoin: round; } .pr-land-group { filter: drop-shadow(0 6px 20px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(234,28,36,.16)); } /* 2025 reach layer: municipalities touched by any program (fills under pins) */ .pr-muni { fill: rgba(234,28,36,.30); stroke: rgba(234,28,36,.55); stroke-width: .6; stroke-linejoin: round; transition: fill .2s ease; cursor: default; } .pr-muni:hover { fill: rgba(234,28,36,.62); } /* styled name tooltip for impacted municipalities (built lazily by report.js) */ .pr-muni-tip { position: absolute; z-index: 5; left: 0; top: 0; opacity: 0; transform: translateY(2px); transition: opacity .15s ease, transform .15s ease; pointer-events: none; background: rgba(255,255,255,.96); color: #121212; padding: 6px 11px; border-radius: 14px; box-shadow: 0 2px 14px rgba(0,0,0,.18); white-space: nowrap; } .pr-muni-tip.is-on { opacity: 1; transform: none; } .pr-muni-tip .t1 { font-size: 12px; font-weight: 700; line-height: 1.2; } .pr-muni-tip .t2 { font-size: 12px; color: rgba(18,18,18,.6); line-height: 1.2; margin-top: 1px; } .muni-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: rgba(234,28,36,.30); border: 1px solid rgba(234,28,36,.65); } /* --- Crossing Borders "jump" map (cruzando-fronteras) -------------------- Full-bleed duotone-on-red treatment: the landmasses are dark shapes embossed into the section's red gradient (the red shows through as the "ocean"), the arc flips to warm white. All rules are scoped to .jump-svg so they never touch the academia campus map, which shares .map-pin / .map-pin-ring. */ .jump-bg-svg { display: block; width: 100%; height: 100%; } .jump-mobile-svg { display: block; width: 100%; height: auto; } /* Left-side readability scrim between the map layer and the text column */ .jump-scrim { background: linear-gradient(90deg, rgba(110,12,16,.92) 0%, rgba(110,12,16,.55) 55%, transparent 100%); z-index: 1; pointer-events: none; } .jump-svg .jump-land-group { filter: none; } .jump-svg .jump-land { fill: rgba(0,0,0,.30); stroke: rgba(255,255,255,.14); stroke-width: 0.8; stroke-linejoin: round; } /* soft wide underlay stroke gives the arc a glow without an SVG filter */ .jump-svg .jump-arc-glow { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 6; stroke-linecap: round; } .jump-svg .jump-arc { fill: none; stroke: #FFECDE; stroke-width: 2.75; stroke-dasharray: 6 7; stroke-linecap: round; } .jump-svg .jump-arc.travel { animation: jumpTravel 3.2s linear infinite; } @keyframes jumpTravel { to { stroke-dashoffset: -26; } } .jump-svg .jump-ring-static { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.4; } .jump-svg .map-pin { fill: #fff; } .jump-svg .map-pin-ring { fill: none; stroke: #fff; opacity: .55; transform-box: fill-box; transform-origin: center; } /* always-visible labels, with a deep-red halo that reads on the red field */ .jump-svg .jump-label { fill: rgba(255,255,255,.7); font-size: 14px; font-weight: 700; paint-order: stroke; stroke: rgba(74,5,9,.75); stroke-width: 3px; } .jump-svg .jump-dist { fill: rgba(255,255,255,.9); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: rgba(74,5,9,.75); stroke-width: 3px; } /* Labels scale with the SVG — bump sizes so they stay legible at 390px (QA F7) */ @media (max-width: 640px) { .jump-svg .jump-label, .jump-mobile-svg .jump-label { font-size: 22px; } .jump-svg .jump-dist, .jump-mobile-svg .jump-dist { font-size: 18px; } } /* Timeline "there is more" affordance */ .timeline-outer { position: relative; } .timeline-more { position: absolute; right: 14px; top: 44%; z-index: 3; display: inline-flex; align-items: center; gap: 6px; color: #fff; background: rgba(234,28,36,.9); border-radius: 999px; padding: 6px 12px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-family: inherit; border: 0; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.3); transition: background .15s ease, transform .15s ease; } .timeline-more:hover { background: rgba(234,28,36,1); transform: translateX(2px); } .timeline-outer.at-end .timeline-more { opacity: 0; pointer-events: none; transition: opacity .3s ease; } @keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } } .timeline-more .chev { display: inline-block; animation: nudge 1.1s ease-in-out infinite; } /* ============================================================ "EL INFORME ES UN ÁLBUM" — album/player layer ============================================================ */ /* Mini-player: persistent bottom bar, chapters as tracks */ .xp-player { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; background: rgba(8,8,8,.92); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.1); transform: translateY(100%); transition: transform .3s ease; } .xp-player.visible { transform: none; } /* Cinematic moments own the screen: while a pinned moment fills the viewport the player retreats, even if it was .visible (higher specificity wins). */ body.in-moment .xp-player { transform: translateY(100%); } /* The consent banner must never bury the player: when the player is on screen, the banner stacks directly above it instead of covering it. */ body.player-on #cookie-consent-banner { bottom: 58px; } .mp-btn { width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255,255,255,.08); transition: background .15s ease; } .mp-btn:hover { background: #EA1C24; } /* Touch ergonomics: 44px minimum targets on coarse pointers (QA sweep F1/F2/F8) */ @media (pointer: coarse) { .mp-btn { width: 44px; height: 44px; } .share-btn { width: 44px; height: 44px; } .timeline-more { padding: 12px 16px; } } /* Invisible enlarged hit area behind each map pin (visible pin stays 4.5u) */ .map-hit-area { fill: transparent; stroke: none; } .mp-wave { position: relative; height: 14px; } .mp-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; } .mp-bars span { flex: 1; border-radius: 1px; background: rgba(255,255,255,.16); min-height: 2px; } .mp-progress { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); } .mp-bars-fg span { background: #EA1C24; } .xp-body footer { padding-bottom: 5.5rem; } /* Highlights ticker */ .ticker-track { display: flex; width: max-content; animation: tickerX 55s linear infinite; } .ticker-track:hover, .ticker-track:active, .ticker-track:focus-within { animation-play-state: paused; } .ticker-seq { display: flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem; } .ticker-item { font-family: 'Masny', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.85); font-size: clamp(.85rem, 1.6vw, 1rem); white-space: nowrap; } .ticker-sep { display: inline-block; width: 5px; height: 5px; border-radius: 999px; background: rgba(234,28,36,.85); flex-shrink: 0; } @keyframes tickerX { to { transform: translateX(-50%); } } /* Equalizer — reach by period */ .eq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } @media (min-width: 768px) { .eq { grid-template-columns: repeat(5, 1fr); } } .eq-barwrap { height: 150px; display: flex; align-items: flex-end; border-radius: 10px; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.04)); } .eq-bar { width: 100%; height: 10px; border-radius: 10px 10px 5px 5px; background: linear-gradient(180deg, #EA1C24, #8F1015); transition: height 1s cubic-bezier(.2,.7,.2,1); } .eq-bar.hatched { background: repeating-linear-gradient(135deg, #EA1C24 0 6px, #B31219 6px 12px); } .eq-col.revealed .eq-bar { height: var(--h); } /* Pinned scroll-story (moments) */ .scrolly { position: relative; } .moment-pinned { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; display: flex; align-items: flex-end; } .moment-pinned .moment-bg { background-attachment: scroll; } .beats { position: relative; min-height: clamp(11rem, 32vh, 17rem); max-width: 42rem; } .beat { position: absolute; inset: 0; opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; } .beat.active { opacity: 1; transform: none; pointer-events: auto; } .beat-dots { display: flex; gap: 6px; } .beat-dot { width: 22px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); transition: background .2s ease; } .beat-dot.active { background: #EA1C24; } .scrolly-off { height: auto !important; } .scrolly-off .moment-pinned { position: relative; height: auto; min-height: 100svh; } .scrolly-off .beats { min-height: 0; } .scrolly-off .beat { position: static; opacity: 1; transform: none; margin-bottom: 1.25rem; } .scrolly-off .beat-dots, .scrolly-off .scrolly-hint { display: none; } /* --- prefers-reduced-motion: honor the accessibility contract --- */ @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } .eq-bar { height: var(--h) !important; transition: none; } .xp-player { transition: none; } .beat { transition: none; } * { scroll-behavior: auto; } .fade-in { opacity: 1 !important; transform: none !important; transition: none !important; } .tl-node { opacity: 1 !important; transform: none !important; transition: none !important; } .hero-video { display: none; } .moment-video { display: none; } .cookie-banner { animation: none; } .moment-bg { background-attachment: scroll !important; } .map-pin-ring.pulse { animation: none !important; } .jump-arc.travel { animation: none !important; } #scroll-progress { transition: none; } .timeline-more .chev { animation: none !important; } } /* ============================================================ PDF DOWNLOAD MENU — nav affordance (both editions) A no-JS
dropdown: offers the full report + 10-page short edition, each already resolved to the page's language. ============================================================ */ .pdf-menu { position: relative; display: inline-block; } .pdf-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; } .pdf-menu > summary::-webkit-details-marker { display: none; } .pdf-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; transition: transform .18s ease; } .pdf-menu[open] > summary .pdf-caret { transform: rotate(180deg); } .pdf-menu-panel { position: absolute; right: 0; top: calc(100% + .55rem); z-index: 60; min-width: 15rem; background: #fff; color: var(--rimas-dark, #121212); border-radius: 14px; padding: .4rem; box-shadow: 0 12px 40px rgba(0,0,0,.28); border: 1px solid rgba(0,0,0,.06); } .pdf-menu-panel::before { content: ""; position: absolute; right: 1.1rem; top: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); border-left: 1px solid rgba(0,0,0,.06); border-top: 1px solid rgba(0,0,0,.06); } .pdf-opt { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .7rem; border-radius: 10px; text-decoration: none; transition: background .15s ease; } .pdf-opt:hover { background: #F7F7F7; } .pdf-opt-t { font-weight: 700; font-size: .95rem; color: #121212; line-height: 1.1; } .pdf-opt-m { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: #EA1C24; font-weight: 600; } /* ============================================================ PRINT LAYER — page.pdf() proof / print edition Turns the immersive single-page experience into a paginated document: neutralizes scroll-reveal, removes interactive chrome, and establishes chapter-per-page rhythm. The screen experience is untouched (everything here is @media print). ============================================================ */ @media print { /* 1 · Neutralize ALL scroll-reveal / observer-gated states ---------- */ .fade-in, .tl-node, .beat, .eq-col, .eq-bar, .moment-inner, .upnext-inner { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } .eq-bar { height: var(--h, 60%) !important; } /* 2 · Hide interactive chrome ------------------------------------------ Nav, scroll rail, mini-player, progress bar, cookie consent, contents overlay, marquee affordances, audio players, share row. */ #report-nav, .xp-nav, .xp-rail, .xp-player, #mini-player, #scroll-progress, #contents-overlay, #cookie-consent-banner, #cookie-overlay, #cookie-preferences, .cookie-banner, .cookie-banner-overlay, .timeline-more, .timeline-hint, .scrolly-hint, .beat-dots, .v3d-hint, .listen, .share-btn, #nav-menu-btn { display: none !important; } /* Videos never print. Target the