/* ── PHP-port additions ────────────────────────────────────────────────── Everything visual lives in main.css (the compiled Tailwind stylesheet from the original Next.js build). This file only contains: 1. styles that the React app injected at runtime via styled-jsx; 2. a couple of tiny helpers for the vanilla-JS components. */ /* next/font parity: Next.js applied these font-family variables via . The PHP port has no such class on , so the variables resolved to empty and the whole site fell back to system-ui. Define them globally here (loads after fonts.css defines the @font-face rules and after main.css consumes the vars via @theme). */ :root { --font-barlow-sans: "Barlow", "Barlow Fallback", system-ui, -apple-system, sans-serif; --font-barlow-display: "Barlow Condensed", "Barlow Condensed Fallback", system-ui, sans-serif; } /* [hidden] must always win, even against display utilities. */ [hidden] { display: none !important; } /* ClientStrip logo marquee edge fade (was styled-jsx in ClientStrip.tsx). */ .mask-fade { -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); } /* Leaflet map theming (was styled-jsx global in LeafletMap.tsx). */ .leaflet-container { font-family: inherit; background: #f1f5f9; filter: hue-rotate(200deg) saturate(95%) contrast(95%) brightness(96%); } .leaflet-popup-content-wrapper { border-radius: 12px; border: 1px solid var(--color-hairline); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); padding: 4px; } .leaflet-popup-tip-container { display: none; } /* Scroll-to-top visibility toggle (React toggled utility classes inline). */ [data-scroll-top].is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Hero showcase: stacked slides fade like the React version (opacity/scale utilities are toggled by home.js — this only pins the transition). */ .hero-slide { transition: opacity 0.7s var(--ease-out-quint), transform 0.7s var(--ease-out-quint); } /* FAQ accordion panel animation (grid-template-rows technique from the React page). */ .faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease-out; } .faq-item.open .faq-panel { grid-template-rows: 1fr; } /* FAQ accordion open/closed colours — tokenised (was inline hex + JS style mutation). faq.js now only toggles the .open class + aria-expanded. */ .faq-item { transition: border-color 0.2s, background-color 0.2s; } .faq-item [data-faq-q] { color: var(--color-ink); transition: color 0.2s; } .faq-item [data-faq-badge] { border-color: var(--color-hairline); background: transparent; transition: border-color 0.2s, background-color 0.2s; } .faq-item [data-faq-plus] { color: var(--color-muted); transition: transform 0.2s, color 0.2s; } .faq-item.open { border-color: color-mix(in oklab, var(--color-brand) 35%, transparent); background: var(--color-concrete); } .faq-item.open [data-faq-q] { color: var(--color-brand-ink); } .faq-item.open [data-faq-badge] { border-color: var(--color-brand); background: var(--color-brand); } .faq-item.open [data-faq-plus] { color: #fff; transform: rotate(45deg); } /* Admin toast stack (markup identical to the React ToastContainer). */ .toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; }