/* ============================================================ Hands on Manila — Impact Report 2026 microsite Global styles: token sheets + page chrome + keyframes ============================================================ */ @import url('./tokens/fonts.css'); @import url('./tokens/colors.css'); @import url('./tokens/typography.css'); @import url('./tokens/spacing.css'); @import url('./tokens/base.css'); /* Archivo Expanded — impact headline face (.druk) */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Expanded:wght@600;700;800;900&display=swap'); html { scroll-behavior: smooth; } body { margin: 0; background: #000000; color: var(--text-strong); font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: var(--hom-red); color: #fff; } .druk { font-family: 'Archivo Expanded', 'Archivo', sans-serif; font-weight: 900; text-transform: uppercase; line-height: 0.92; letter-spacing: -0.005em; } a { color: inherit; } /* ---- keyframes ---- */ @keyframes hom-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes hom-pulsering { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes hom-dash { to { stroke-dashoffset: -1000; } } @keyframes hom-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } } @keyframes hom-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } } @keyframes hom-scrollcue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } } @keyframes hom-reveal { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } } @keyframes hom-stage-rise { from { opacity: 0; transform: translateY(64px); } to { opacity: 1; transform: none; } } .hom-navlink:hover { color: var(--hom-red) !important; } /* ---- scroll reveals (IntersectionObserver driven for cross-browser support) ---- */ [data-reveal] { opacity: 0; transform: translateY(34px); } [data-reveal].is-in { animation: hom-reveal 0.9s var(--ease-out) both; } .hom-stage[data-reveal].is-in { animation-name: hom-stage-rise; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; } } /* ---- nav chrome state (driven by data-* attrs on ) ---- */ html[data-scrolled="1"] #hom-nav-scrim { opacity: 1 !important; } html[data-scrolled="1"] .hom-navlink { color: var(--neutral-700) !important; } html[data-scrolled="1"] #hom-nav-logo-w { opacity: 0 !important; } html[data-scrolled="1"] #hom-nav-logo-b { opacity: 1 !important; } html[data-sec="trust"] .hom-navlink[data-sec="trust"], html[data-sec="impact"] .hom-navlink[data-sec="impact"], html[data-sec="method"] .hom-navlink[data-sec="method"], html[data-sec="financials"] .hom-navlink[data-sec="financials"], html[data-sec="future"] .hom-navlink[data-sec="future"] { color: var(--hom-red) !important; background-color: var(--hom-red-50) !important; } #hom-nav { transition: padding .25s var(--ease-out); } #hom-nav-scrim { transition: opacity .25s var(--ease-out); } .hom-navlink { transition: color .2s ease, background-color .2s ease; } #hom-nav-logo-w, #hom-nav-logo-b { transition: opacity .25s var(--ease-out); } /* ---- modal open/close (attribute driven) ---- */ #hom-overlay[data-show="1"], #hom-overlay[data-show="closing"] { display: flex !important; } #hom-overlay[data-show="1"] { opacity: 1 !important; } #hom-overlay[data-show="closing"] { opacity: 0 !important; } #hom-overlay[data-show="1"] #hom-modal-wrap { transform: none !important; } /* ---- labelled placeholder for not-yet-final imagery ---- */ .hom-ph { display: flex; align-items: center; justify-content: center; text-align: center; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 10px, rgba(255,255,255,0.06) 10px 20px), var(--neutral-100); color: var(--neutral-500); font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; padding: 8px; overflow: hidden; } .hom-ph--dark { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 12px, rgba(255,255,255,0.08) 12px 24px), linear-gradient(160deg, #2a1030, #14060f); color: rgba(255,255,255,0.72); } /* ---- responsive: collapse two-column grids on small screens ---- */ @media (max-width: 860px) { #hom-method-grid, #hom-fin-grid, #hom-pres, #hom-stories { grid-template-columns: 1fr !important; } #hom-nav-links { display: none !important; } #hom-nav { padding-left: 20px !important; padding-right: 20px !important; } }