/* AK Audio — "Aurora Signal" v2. One committed family (Archivo variable: width 62–125, weight 100–900). Display voice: Expanded Black uppercase — road-case stencil. Signature element: live WebGL aurora burning through giant AK letterforms. */ /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { margin: 0; background: var(--ak-night-950); color: var(--ak-ice-50); font-family: var(--ak-font-body); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; } /* cross-document view transitions (Chromium/Safari; Firefox just navigates) */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation-duration: 180ms; } ::view-transition-new(root) { animation-duration: 240ms; } h1, h2, h3 { font-family: var(--ak-font-display); margin: 0 0 var(--ak-space-4); text-wrap: balance; } h1 { font-size: clamp(2.4rem, 5vw, 4.3rem); line-height: 1.0; font-weight: 860; font-stretch: 112%; letter-spacing: -0.015em; } h2 { font-size: clamp(1.9rem, 3.6vw, 3.3rem); line-height: 1.04; font-weight: 830; font-stretch: 110%; letter-spacing: -0.01em; } h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.18; font-weight: 700; font-stretch: 106%; } p { margin: 0 0 var(--ak-space-3); max-width: 62ch; } a { color: var(--ak-cyan); } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ak-cyan); outline-offset: 3px; border-radius: 2px; } img { max-width: 100%; height: auto; display: block; } svg { display: block; } .container { max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 32px); } .eyebrow { font-size: 0.78rem; font-weight: 700; font-stretch: 115%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ak-cyan); margin: 0 0 var(--ak-space-3); } .muted { color: var(--ak-ice-200); } .dim { color: var(--ak-ice-400); } section { padding-block: clamp(80px, 10vw, 140px); } .visually-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ---------- scroll reveals (JS adds .js to ; no-JS users see everything) */ .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--stagger, 0ms); } .js .reveal.in { opacity: 1; transform: none; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 13px 26px; border-radius: var(--ak-radius-sm); font-family: var(--ak-font-body); font-size: 1rem; font-weight: 700; font-stretch: 105%; text-decoration: none; border: 1px solid transparent; transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), transform 160ms cubic-bezier(0.22, 1, 0.36, 1), border-color 160ms cubic-bezier(0.22, 1, 0.36, 1); } .btn-primary { background: var(--ak-cyan); color: var(--ak-night-950); } .btn-primary:hover { background: #3fe6dd; transform: translateY(-2px); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: rgba(16, 34, 51, 0.4); color: var(--ak-ice-50); border-color: var(--ak-line); } .btn-secondary:hover { border-color: var(--ak-cyan); transform: translateY(-2px); } .btn-secondary:active { transform: translateY(0); } /* ---------- header ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 10; transition: background-color 220ms ease, border-color 220ms ease; border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: rgba(6, 16, 26, 0.9); border-bottom-color: var(--ak-line); backdrop-filter: blur(10px); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--ak-space-4); min-height: 70px; } .brand { display: inline-flex; align-items: baseline; gap: 7px; text-decoration: none; color: var(--ak-ice-50); font-family: var(--ak-font-display); white-space: nowrap; } .brand .brand-ak { font-weight: 900; font-stretch: 125%; font-size: 1.45rem; letter-spacing: -0.02em; } .brand .brand-audio { font-weight: 450; font-size: 1.2rem; color: var(--ak-ice-200); letter-spacing: 0.02em; } .site-nav { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 34px); } .site-nav a:not(.btn) { color: var(--ak-ice-200); text-decoration: none; font-size: 0.95rem; font-weight: 550; position: relative; } .site-nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--ak-cyan); transition: right 220ms cubic-bezier(0.22, 1, 0.36, 1); } .site-nav a:not(.btn):hover { color: var(--ak-ice-50); } .site-nav a:not(.btn):hover::after { right: 0; } .site-nav .btn { min-height: 44px; padding: 11px 20px; } /* ---------- mobile menu ---------- */ .menu-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ak-line); border-radius: var(--ak-radius-sm); background: rgba(16, 34, 51, 0.4); cursor: pointer; align-items: center; justify-content: center; flex: none; } .menu-bars, .menu-bars::before, .menu-bars::after { content: ""; display: block; width: 18px; height: 2px; background: var(--ak-ice-50); border-radius: 2px; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease; } .menu-bars { position: relative; } .menu-bars::before, .menu-bars::after { position: absolute; left: 0; } .menu-bars::before { top: -6px; } .menu-bars::after { top: 6px; } .menu-toggle[aria-expanded="true"] .menu-bars { background: transparent; } .menu-toggle[aria-expanded="true"] .menu-bars::before { transform: translateY(6px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-bars::after { transform: translateY(-6px) rotate(-45deg); } .mobile-menu { display: none; border-top: 1px solid var(--ak-line); background: rgba(6, 16, 26, 0.97); backdrop-filter: blur(12px); padding: var(--ak-space-3) clamp(20px, 4vw, 32px) var(--ak-space-5); } .mobile-menu nav { display: grid; } .mobile-menu nav a { display: block; padding: 14px 2px; color: var(--ak-ice-50); text-decoration: none; font-family: var(--ak-font-display); font-weight: 700; font-stretch: 108%; font-size: 1.25rem; border-bottom: 1px solid var(--ak-line); } .mobile-menu nav a:active { color: var(--ak-cyan); } .mobile-menu .btn { width: 100%; margin-top: var(--ak-space-4); } @media (max-width: 760px) { .site-nav a:not(.btn) { display: none; } .site-nav .btn { white-space: nowrap; padding: 10px 14px; font-size: 0.92rem; } .menu-toggle { display: inline-flex; } .mobile-menu:not([hidden]) { display: block; } /* open menu needs the solid header behind it; panel CTA replaces header CTA */ .site-header:has(.mobile-menu:not([hidden])) { background: rgba(6, 16, 26, 0.97); border-bottom-color: var(--ak-line); } .site-header:has(.mobile-menu:not([hidden])) .site-nav .btn { display: none; } } /* ---------- hero: live aurora + AK knockout ---------- */ .hero { position: relative; min-height: clamp(560px, 96svh, 900px); display: flex; align-items: flex-end; overflow: hidden; /* CSS fallback sky if WebGL is unavailable — canvas paints over this */ background: radial-gradient(90% 60% at 70% 10%, rgba(37, 217, 208, 0.13), transparent 60%), radial-gradient(70% 50% at 30% 30%, rgba(122, 92, 255, 0.10), transparent 65%), var(--ak-night-950); } .hero .aurora-canvas, .hero .hero-knockout { position: absolute; inset: 0; width: 100%; height: 100%; } .hero .aurora-canvas { display: block; } .hero-knockout { pointer-events: none; } .knock-text { font-family: var(--ak-font-display); font-weight: 900; font-stretch: 125%; letter-spacing: -0.04em; } /* On small screens the letterforms crop into noise — the living sky alone carries the hero, and the overlay lightens so the aurora breathes. */ .knock-mobile { display: none; } @media (max-width: 900px) { .knock-desktop { display: none; } .hero-knockout > rect { opacity: 0.62; } } .hero .container { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(56px, 9vh, 110px); padding-top: 130px; } .hero-copy { max-width: 660px; } .hero-copy h1 { margin-bottom: var(--ak-space-4); } .hero-copy .lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--ak-ice-200); text-shadow: 0 1px 12px rgba(6, 16, 26, 0.8); } .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--ak-space-2); margin-top: var(--ak-space-5); } .hero-tagline { margin-top: var(--ak-space-6); display: flex; align-items: center; gap: var(--ak-space-3); color: var(--ak-ice-400); font-size: 0.95rem; } .hero-tagline::before { content: ""; width: 44px; height: 1px; background: var(--ak-cyan); flex: none; } @media (max-width: 900px) { .hero { align-items: flex-end; min-height: clamp(560px, 92svh, 780px); } } /* ---------- signal divider: draws itself into view ---------- */ .signal-wrap { padding-block: clamp(20px, 3vw, 40px); } .signal { width: 100%; height: 46px; color: var(--ak-cyan); opacity: 0.55; } .signal path { stroke-dasharray: 1300; stroke-dashoffset: 1300; transition: stroke-dashoffset 1600ms cubic-bezier(0.22, 1, 0.36, 1); } .signal.in path { stroke-dashoffset: 0; } html:not(.js) .signal path { stroke-dashoffset: 0; } /* ---------- services: editorial rows with hover signal ---------- */ .services-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: var(--ak-space-6); } .services-visual { position: sticky; top: 110px; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--ak-radius-lg); overflow: hidden; border: 1px solid var(--ak-line); } .services-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 450ms cubic-bezier(0.22, 1, 0.36, 1); } .services-visual img.is-active { opacity: 1; } @media (max-width: 820px) { .services-layout { grid-template-columns: 1fr; } .services-visual { display: none; } /* rows carry the content; save the bytes */ } .service-list { list-style: none; margin: 0; padding: 0; } .service-list li { display: block; padding: var(--ak-space-5) var(--ak-space-3); margin-inline: calc(-1 * var(--ak-space-3)); border-top: 1px solid var(--ak-line); border-radius: var(--ak-radius-sm); transition: background-color 220ms ease; } .service-list li:last-child { border-bottom: 1px solid var(--ak-line); } .service-list li:hover { background: rgba(16, 34, 51, 0.45); } .service-list h3 { margin: 0; font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 800; font-stretch: 112%; transition: color 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1); } .service-list li:hover h3 { color: var(--ak-cyan); transform: translateX(6px); } .service-list p { margin: var(--ak-space-2) 0 0; color: var(--ak-ice-200); } /* ---------- process ---------- */ .process-steps { list-style: none; margin: var(--ak-space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 56px); counter-reset: step; } .process-steps li { counter-increment: step; position: relative; padding-top: var(--ak-space-4); } .process-steps li::before { content: "0" counter(step); position: absolute; top: -0.35em; left: 0; font-family: var(--ak-font-display); font-weight: 900; font-stretch: 125%; font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--ak-line); } .process-steps li > * { position: relative; } .process-steps h3 { margin-bottom: var(--ak-space-2); padding-top: var(--ak-space-5); } .process-steps p { margin: 0; color: var(--ak-ice-200); } @media (max-width: 760px) { .process-steps { grid-template-columns: 1fr; gap: var(--ak-space-6); } } /* ---------- split sections ---------- */ .split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 88px); } @media (max-width: 820px) { .split { grid-template-columns: 1fr; } } .statement-list { list-style: none; margin: 0; padding: 0; } .statement-list li { padding-block: var(--ak-space-3); border-top: 1px solid var(--ak-line); color: var(--ak-ice-200); } .statement-list li:last-child { border-bottom: 1px solid var(--ak-line); } .statement-list strong { color: var(--ak-ice-50); font-weight: 700; } .raised { background: var(--ak-night-900); } .eventday-img { margin-top: var(--ak-space-5); border-radius: var(--ak-radius-lg); border: 1px solid var(--ak-line); max-width: 480px; } /* ---------- about brand moment ---------- */ .about-lockup { margin-top: var(--ak-space-5); max-width: 480px; } /* ---------- FAQ (animated open via grid-template-rows) ---------- */ .faq { max-width: 780px; margin-top: var(--ak-space-5); } .faq details { border-top: 1px solid var(--ak-line); } .faq details:last-child { border-bottom: 1px solid var(--ak-line); } .faq summary { cursor: pointer; padding-block: var(--ak-space-4); font-family: var(--ak-font-display); font-weight: 700; font-stretch: 106%; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--ak-space-3); transition: color 180ms ease; } .faq summary:hover { color: var(--ak-cyan); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--ak-cyan); font-size: 1.5rem; font-weight: 400; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } .faq details[open] summary::after { transform: rotate(45deg); } .faq .faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms cubic-bezier(0.22, 1, 0.36, 1); } .faq details[open] .faq-body { grid-template-rows: 1fr; } .faq .faq-body > div { overflow: hidden; } .faq .faq-body p { color: var(--ak-ice-200); padding-bottom: var(--ak-space-4); margin: 0; } /* ---------- final CTA ---------- */ .final-cta { position: relative; overflow: hidden; text-align: center; } .final-cta-bg { position: absolute; inset: 0; background: url("/assets/web/aurora-waveform-banner.webp") center / cover no-repeat; opacity: 0.28; pointer-events: none; } .final-cta .container { position: relative; } .final-cta h2 { margin-inline: auto; font-size: clamp(2.1rem, 4.4vw, 4rem); } .final-cta p { margin-inline: auto; color: var(--ak-ice-200); } .final-cta .hero-ctas { justify-content: center; } /* ---------- contact page ---------- */ .contact-hero { position: relative; overflow: hidden; padding-top: clamp(130px, 18vh, 190px); padding-bottom: clamp(20px, 4vh, 48px); background: radial-gradient(90% 70% at 60% 0%, rgba(37, 217, 208, 0.10), transparent 60%), var(--ak-night-950); } .contact-hero .aurora-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; } .contact-hero .container { position: relative; } .contact-options { display: flex; flex-wrap: wrap; gap: var(--ak-space-2); margin-block: var(--ak-space-5); } .contact-note { border: 1px solid var(--ak-line); border-radius: var(--ak-radius-md); background: var(--ak-night-900); padding: clamp(20px, 3vw, 32px); max-width: 640px; } .contact-note ul { margin: var(--ak-space-2) 0 0; padding-left: 1.2em; color: var(--ak-ice-200); } .contact-note li { margin-bottom: 6px; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--ak-line); padding-block: var(--ak-space-7); color: var(--ak-ice-400); font-size: 0.95rem; } .site-footer .container { display: flex; flex-wrap: wrap; gap: var(--ak-space-5) var(--ak-space-7); justify-content: space-between; align-items: flex-start; } .site-footer img { width: 200px; } .site-footer a { color: var(--ak-ice-200); text-decoration: none; } .site-footer a:hover { color: var(--ak-cyan); } .footer-contact { display: grid; gap: 8px; } /* ---------- motion discipline ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .js .reveal { opacity: 1; transform: none; } .signal path { stroke-dashoffset: 0; } }