/* ========================================================= Aigarai — looks.css Direction skins (Paper / Signal) + motion intensity. ========================================================= */ /* --------------------------------------------------------- DIRECTION A — "Paper" (light, editorial, Swiss) Uses :root defaults from base.css. A few refinements: --------------------------------------------------------- */ [data-direction="paper"] { --bg: #f6f5f1; --fg: #0c0c0c; --muted: #6d6a62; --line: rgba(12,12,12,0.14); --line-soft: rgba(12,12,12,0.08); --card: #ffffff; --display: "Bricolage Grotesque", "Space Grotesk", sans-serif; } [data-direction="paper"] .grain { mix-blend-mode: multiply; } [data-direction="paper"] .hero-title { font-weight: 600; } /* --------------------------------------------------------- DIRECTION B — "Signal" (dark, technical, mono accents) --------------------------------------------------------- */ [data-direction="signal"] { --bg: #0a0a0a; --fg: #f1f0ea; --muted: #8b8a81; --line: rgba(241,240,234,0.16); --line-soft: rgba(241,240,234,0.08); --card: #161616; --display: "Space Grotesk", sans-serif; } [data-direction="signal"] .grain { mix-blend-mode: screen; } [data-direction="signal"] body, body[data-loading] { } /* tighter, bolder, more "engineered" hero in Signal */ [data-direction="signal"] .hero-title { font-weight: 700; letter-spacing: -0.04em; } [data-direction="signal"] .accent-line .l-in { font-weight: 600; } [data-direction="signal"] .watermark span { opacity: 0.05; font-weight: 700; } /* Signal leans on mono for structural labels */ [data-direction="signal"] .brand-word { letter-spacing: 0.02em; } [data-direction="signal"] .about-statement, [data-direction="signal"] .studio-intro h2, [data-direction="signal"] .contact-title { letter-spacing: -0.03em; } /* card surfaces in Signal get a faint border glow on hover */ [data-direction="signal"] .team-photo { background: #111; } [data-direction="signal"] .form-success { background: #131313; } /* The eyebrow gets a bracketed, terminal feel in Signal */ [data-direction="signal"] .eyebrow::before { content: "["; color: var(--muted); margin-right: -4px; } [data-direction="signal"] .eyebrow::after { content: "]"; color: var(--muted); margin-left: 4px; } /* Signal: marquee uses display font but slightly mono-flavored tracking */ [data-direction="signal"] .marquee-track { letter-spacing: 0; } /* --------------------------------------------------------- ACCENT (monochrome by default; tweak can inject a hue) --accent is set inline on by the tweaks bridge. --------------------------------------------------------- */ [style*="--accent"] .eyebrow .dot { background: var(--accent); } /* ========================================================= MOTION INTENSITY data-motion = "lively" (default) | "calm" ========================================================= */ /* logo mark aperture spin — lively only */ @media (prefers-reduced-motion: no-preference) { [data-motion="lively"] .nav .mark .mark-fill { animation: aperture 16s linear infinite; transform-origin: 50% 50%; } [data-motion="lively"] .nav .mark:hover .mark-ring { animation: aperture 2.4s linear infinite; transform-origin: 50% 50%; } } @keyframes aperture { to { transform: rotate(360deg); } } /* calm: quiet the ambient loops */ [data-motion="calm"] .eyebrow .dot { animation: none; } [data-motion="calm"] .scroll-line { animation: none; transform: scaleX(1); opacity: 0.6; } [data-motion="calm"] .marquee-track { animation-duration: 60s; } [data-motion="calm"] { --rev-dur: 800ms; --rev-dist: 16px; } /* lively: snappier, longer marquee travel feel */ [data-motion="lively"] .marquee-track { animation-duration: 26s; } [data-direction="signal"][data-motion="lively"] .marquee-track { animation-duration: 22s; } @media (prefers-reduced-motion: reduce) { .marquee-track, .eyebrow .dot, .scroll-line, .mark .mark-fill, .mark .mark-ring { animation: none !important; } .scroll-line { transform: scaleX(1); } }