/* ============================================================ Ayzen Studios — global brand theme (v1) Load this LAST in on every page. It overrides the shared CSS variables (--bg, --accent, etc.) so the whole site adopts the metallic-silver + electric-blue identity from the AYZEN logo. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap"); @import url("mobile.css"); /* ---- Palette: dark (default) ---- */ :root, [data-theme="dark"] { --bg: #05070d; --bg-2: #0a0e18; --bg-card: #0d1422; --card: #0d1422; --stage-bg: #04060c; --text: #eaf1fb; --muted: #8ea3c2; --accent: #2e9bff; --accent-2: #79e0ff; --accent-strong: #1f6dff; --border: rgba(125, 165, 220, 0.16); --glow: rgba(46, 155, 255, 0.32); --steel: linear-gradient(180deg, #ffffff 0%, #cdd9e8 42%, #8595ab 100%); --steel-blue: linear-gradient(135deg, #eaf6ff 0%, #8fd0ff 45%, #2e9bff 100%); --footer-accent: var(--accent); } /* ---- Palette: light ---- */ [data-theme="light"] { --bg: #eef2f8; --bg-2: #e6ecf5; --bg-card: #ffffff; --card: #ffffff; --stage-bg: #dfe7f2; --text: #0a1424; --muted: #4d5e76; --accent: #0a6fff; --accent-2: #1f8fff; --accent-strong: #0a5fdc; --border: rgba(20, 70, 140, 0.16); --glow: rgba(10, 111, 255, 0.14); --steel: linear-gradient(180deg, #1a2740 0%, #3a4d6e 60%, #5a6f93 100%); --steel-blue: linear-gradient(135deg, #0a5fdc 0%, #1f8fff 60%, #6fc0ff 100%); } /* ---- Body backdrop: subtle aurora + grid ---- */ body { font-family: "Outfit", system-ui, -apple-system, sans-serif; background-color: var(--bg); background-image: radial-gradient(1100px 620px at 82% -10%, rgba(46, 155, 255, 0.14), transparent 60%), radial-gradient(900px 520px at 8% 4%, rgba(121, 224, 255, 0.08), transparent 55%); background-attachment: fixed; } [data-theme="light"] body { background-image: radial-gradient(1100px 620px at 82% -10%, rgba(10, 111, 255, 0.10), transparent 60%), radial-gradient(900px 520px at 8% 4%, rgba(31, 143, 255, 0.06), transparent 55%); } /* ============================================================ Brand logo (wordmark) — replaces the old Creepster look. Works for: .logo, .site-footer__logo, .brand ============================================================ */ .logo, .brand, .site-footer__logo { font-family: "Space Grotesk", "Outfit", system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: uppercase; background: var(--steel); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; text-shadow: none !important; display: inline-flex !important; align-items: center; gap: 10px; } /* Logo lockup with the mark image (use markup: …) */ .brand-lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .brand-lockup__mark { width: 40px; height: 40px; border-radius: 11px; display: block; flex-shrink: 0; box-shadow: 0 6px 22px rgba(46, 155, 255, 0.30); } .brand-lockup__word { font-family: "Space Grotesk", "Outfit", sans-serif; font-weight: 700; font-size: clamp(18px, 2.4vw, 22px); letter-spacing: 0.14em; text-transform: uppercase; background: var(--steel); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; } .brand-lockup__sub { display: block; font-size: 9px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--accent); margin-top: 3px; font-weight: 600; -webkit-text-fill-color: var(--accent); } /* ============================================================ Headings — metallic, modern (override Creepster headings) ============================================================ */ .section-title, .hero h1 { font-family: "Space Grotesk", "Outfit", sans-serif !important; letter-spacing: -0.01em; } .section-title { background: var(--steel); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero h1 span { background: var(--steel-blue); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ Buttons — refined electric-blue ============================================================ */ .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important; box-shadow: 0 10px 30px var(--glow) !important; } .btn-ghost:hover, .btn-secondary:hover { border-color: var(--accent) !important; } /* ============================================================ Page transition overlay (Next.js-style wipe) ============================================================ */ .ayz-transition { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 50%, #0a1322 0%, #05070d 70%); opacity: 0; visibility: hidden; transition: opacity 0.42s ease, visibility 0.42s ease; } .ayz-transition.is-active { opacity: 1; visibility: visible; pointer-events: all; } .ayz-transition__mark { width: 64px; height: 64px; border-radius: 16px; opacity: 0; transform: scale(0.82); filter: drop-shadow(0 8px 26px rgba(46, 155, 255, 0.5)); } .ayz-transition.is-active .ayz-transition__mark { animation: ayzMarkPulse 0.9s ease forwards; } @keyframes ayzMarkPulse { 0% { opacity: 0; transform: scale(0.78) rotate(-4deg); } 45% { opacity: 1; transform: scale(1.04) rotate(0deg); } 100% { opacity: 1; transform: scale(1); } } /* Page enter animation */ .ayz-page-enter { animation: ayzPageIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes ayzPageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ Scroll reveal (data-reveal) + harmonise existing .reveal ============================================================ */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal-delay="1"] { transition-delay: 0.08s; } [data-reveal-delay="2"] { transition-delay: 0.16s; } [data-reveal-delay="3"] { transition-delay: 0.24s; } [data-reveal-delay="4"] { transition-delay: 0.32s; } /* ============================================================ Hide legacy spooky decorations site-wide ============================================================ */ .bg-web, .scroll-ghost, .float-deco.spider { display: none !important; } @media (prefers-reduced-motion: reduce) { .ayz-page-enter, .ayz-transition__mark { animation: none !important; } [data-reveal] { transition: none !important; } }