/* ============================================================ Safa Othman — TWEAKS overrides Driven by the Tweaks panel. These rules read CSS variables / data-attributes that tweaks-app.jsx sets on /. ============================================================ */ :root { --accent-rgb: 198, 242, 78; } /* ---- Signal color recolors the ambient motion, not just buttons ---- */ .cursor-ring { border-color: rgba(var(--accent-rgb), 0.7) !important; } .cursor-ring.is-hot { background: rgba(var(--accent-rgb), 0.10) !important; border-color: rgba(var(--accent-rgb), 0.9) !important; } .cursor-dot { background: var(--accent) !important; } .aurora .a1 { background: radial-gradient(circle, rgba(var(--accent-rgb), 0.34), transparent 65%) !important; } .aurora .a2 { background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), transparent 65%) !important; } .aurora .a3 { background: radial-gradient(circle, rgba(var(--accent-rgb), 0.18), transparent 65%) !important; } /* ============================================================ MOTION — Calm · Balanced (default, no overrides) · Kinetic ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* ---- CALM: settle the room ---- */ body[data-motion="calm"] .aurora span { animation-duration: 46s !important; opacity: 0.30 !important; } body[data-motion="calm"] .float { animation: none !important; } body[data-motion="calm"] .marquee-track { animation-duration: 64s !important; } body[data-motion="calm"] .dot { animation-duration: 4.4s !important; } body[data-motion="calm"].js .reveal { transform: translateY(14px) !important; filter: none !important; transition-duration: 0.7s !important; } body[data-motion="calm"] .line-inner, body[data-motion="calm"] .word { transition-duration: 0.7s !important; } body[data-motion="calm"] .word { opacity: 0.45; } /* ---- KINETIC: charge everything up ---- */ body[data-motion="kinetic"] .aurora span { animation-duration: 11s !important; opacity: 0.64 !important; } body[data-motion="kinetic"] .aurora .a1 { filter: blur(60px); } body[data-motion="kinetic"] .float { animation-duration: 4.4s !important; } body[data-motion="kinetic"] .marquee-track { animation-duration: 13s !important; } body[data-motion="kinetic"] .dot { animation-duration: 1.5s !important; } body[data-motion="kinetic"].js .reveal { transform: translateY(52px) scale(0.965) !important; filter: blur(13px) !important; transition-duration: 1.05s !important; } body[data-motion="kinetic"] .line-inner { transition-duration: 1.2s !important; } body[data-motion="kinetic"] .word { transition-delay: calc(var(--wi, 0) * 0.04s) !important; } body[data-motion="kinetic"] .hero h1 .accent { text-shadow: 0 0 38px rgba(var(--accent-rgb), 0.35); } } /* ============================================================ DISPLAY TYPE — only retargets Latin (English); Arabic/Kurdish keep their dedicated font via the existing [lang] rules. ============================================================ */ html[data-display="editorial"]:lang(en) { --font-display: "Instrument Serif", Georgia, serif; } html[data-display="editorial"]:lang(en) .hero h1, html[data-display="editorial"]:lang(en) .section-title, html[data-display="editorial"]:lang(en) .footer-bigname { letter-spacing: -0.01em; font-weight: 400; } html[data-display="editorial"]:lang(en) .hero h1 { line-height: 0.98; } html[data-display="geometric"]:lang(en) { --font-display: "Space Grotesk", system-ui, sans-serif; } html[data-display="geometric"]:lang(en) .hero h1, html[data-display="geometric"]:lang(en) .section-title { letter-spacing: -0.03em; }