/* ============================================
Kronos Music — Main Stylesheet
kronosmusic.com · v3 clean rebuild
Dark tech-studio aesthetic with monochromatic
purple palette, ambient glow, grain texture,
and hip-hop editorial energy.
============================================ */
/* --- Fonts ---
Google Fonts (Barlow Condensed, Poppins) are loaded via tags in
each HTML with preconnect, so they fetch in parallel with this
stylesheet rather than as a dependent waterfall from an @import. */
@font-face {
font-family: 'Fashion';
src: url('media/font/Fashion.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ===========================================
DESIGN TOKENS — Single source of truth
All visual properties flow from here.
Never hardcode values in components.
=========================================== */
:root {
/* Safe-area inset exposed as CSS var so JS can read it */
--safe-top: env(safe-area-inset-top, 0px);
/* ---- Brand palette (from Kronos README) ---- */
--kronos-black: #0F0F0F; /* Default dark — backgrounds */
--kronos-dark-1: #250630; /* Deepest purple — gradient anchors */
--kronos-dark-2: #541C69; /* Mid-dark purple — hover states, depth */
--kronos-primary: #6C3082; /* Main accent — CTAs, key elements */
--kronos-light-1: #9158A6; /* Supporting purple — secondary text, icons */
--kronos-light-2: #B889C9; /* Soft purple — gradient endpoints */
--kronos-light-3: #DDC5E6; /* Near-white purple — headings, emphasis */
--kronos-light-4: #EBDFF0; /* Lightest purple — body text on dark */
--kronos-white: #F0F0F0; /* Default light — primary text */
/* ---- Surfaces (layered dark backgrounds) ---- */
--kronos-surface-0: #0A0A0A; /* Deepest layer — page background */
--kronos-surface-1: #111111; /* Raised surface — nav, footer */
--kronos-card-bg: #130318; /* Team card bg — purple-tinted dark */
/* ---- Glow / accent effects ---- */
--kronos-glow: rgba(108, 48, 130, 0.4); /* default purple aura */
--kronos-glow-soft: rgba(108, 48, 130, 0.15); /* subtle ambient glow */
--kronos-border-glow: rgba(145, 88, 166, 0.2); /* subtle purple-tint border */
/* ---- Typography ---- */
--kronos-font-display: 'Barlow Condensed', sans-serif; /* Titles, impact */
--kronos-font-body: 'Poppins', sans-serif; /* Body text, UI */
--kronos-font-accent: 'Fashion', sans-serif; /* Decorative / names */
/* Font scale (1.25 ratio) */
--font-xs: 0.75rem; /* 12px */
--font-sm: 0.875rem; /* 14px */
--font-base: 1rem; /* 16px */
--font-md: 1.125rem; /* 18px */
--font-lg: 1.5rem; /* 24px */
--font-xl: 2rem; /* 32px */
--font-2xl: 2.5rem; /* 40px */
--font-3xl: 3.5rem; /* 56px */
--font-hero: clamp(2.5rem, 6vw, 5rem);
/* ---- Spacing (8px grid) ---- */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
--space-7: 64px;
--space-8: 96px;
--space-9: 128px;
/* ---- Borders & Radii ---- */
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-pill: 999px;
--border-subtle: 1px solid var(--kronos-border-glow);
/* ---- Shadows & Elevation ---- */
--shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.3);
--shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.5);
--shadow-dramatic: 0 16px 64px rgba(0, 0, 0, 0.7);
--shadow-glow: 0 0 40px var(--kronos-glow), 0 0 80px var(--kronos-glow-soft);
--shadow-glow-sm: 0 0 20px var(--kronos-glow-soft);
/* ---- Transitions ---- */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--transition-fast: 150ms var(--ease-out-expo);
--transition-normal: 300ms var(--ease-out-expo);
--transition-slow: 600ms var(--ease-out-expo);
--transition-reveal: 800ms var(--ease-out-expo);
/* ---- Z-index layers ---- */
--z-base: 1;
--z-raised: 10;
--z-sticky: 100;
--z-overlay: 500;
--z-modal: 1000;
}
/* ===========================================
RESET & BASE
=========================================== */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
/* iOS Safari: contain the rubber-band bounce so page content can't
briefly scroll past the top/bottom edges and peek over fixed UI. */
overscroll-behavior-y: none;
background-color: var(--kronos-surface-0);
}
body {
font-family: var(--kronos-font-body);
font-size: var(--font-base);
font-weight: 300;
line-height: 1.7;
color: var(--kronos-light-4);
background-color: var(--kronos-surface-0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
overscroll-behavior-y: none;
/* Page-enter fade: runs on every load, gives all navigation
a smooth cross-page transition when paired with .page-leaving. */
animation: page-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes page-enter {
from { opacity: 0; }
to { opacity: 1; }
}
/* Added by JS on internal link click — body fades out before the
browser swaps documents, so the new page's page-enter takes over. */
body.page-leaving {
animation: page-leave 0.3s ease-in forwards;
}
@keyframes page-leave {
from { opacity: 1; }
to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
body, body.page-leaving { animation: none; }
}
/* Subtle film-grain texture overlay on the whole page */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-repeat: repeat;
}
a {
color: var(--kronos-light-2);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--kronos-white);
}
/* ---- Images ----
Images are fully protected from drag/select/save:
- `-webkit-user-drag: none` blocks drag on WebKit/Blink (Chrome, Safari, Edge)
- `user-drag: none` blocks drag on Firefox (future-proof)
- `user-select: none` blocks text-like selection + save shortcuts
- `pointer-events: none` is NOT used here — it would break ![]()
click
handlers in parent elements. The drag protection alone is enough to
fix the team-card carousel issue (dragging an img no longer starts
a browser drag operation and instead bubbles to the track's drag
handler). */
img {
max-width: 100%;
height: auto;
display: block;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none; /* disables iOS long-press save menu */
}
/* Accessibility: clear focus ring for keyboard navigation.
Uses :focus-visible so mouse clicks don't trigger the ring. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
outline: 2px solid var(--kronos-light-2);
outline-offset: 3px;
border-radius: 4px;
}
h1, h2, h3, h4, h5 {
font-family: var(--kronos-font-display);
font-weight: 700;
line-height: 1.1;
color: var(--kronos-white);
text-transform: uppercase;
letter-spacing: 0.02em;
}
h1 { font-size: var(--font-3xl); }
h2 { font-size: var(--font-3xl); }
h3 { font-size: var(--font-2xl); letter-spacing: 0.05em; }
h4 { font-size: var(--font-xl); }
/* ---- Utility classes ---- */
.section-padding {
padding: var(--space-8) 5vw;
}
.container {
max-width: 1100px;
margin: 0 auto;
}
.text-center { text-align: center; }
.text-justify {
text-align: justify;
text-justify: inter-word;
}
.nowrap { white-space: nowrap; }
.inline-pop {
font-family: var(--kronos-font-display);
font-weight: 700;
font-size: 1.15em;
color: var(--kronos-light-3);
}
/* Gradient divider line between sections */
.section-divider {
height: 1px;
border: none;
background: linear-gradient(
to right,
transparent,
var(--kronos-primary),
transparent
);
max-width: 600px;
margin: 0 auto;
}
/* Scroll-reveal: elements start hidden, JS reveals them */
.reveal {
opacity: 0;
transform: translateY(30px);
transition:
opacity var(--transition-reveal),
transform var(--transition-reveal);
}
.reveal--visible {
opacity: 1;
transform: translateY(0);
}
/* ===========================================
NAVIGATION
=========================================== */
/*
* Nav bar — fixed at top of viewport.
*
* The nav is physically EXTENDED UPWARD by `NAV_OVERFLOW` pixels
* (via negative top + added padding) so its background always
* covers the iPhone status bar / notch area + any overscroll gap.
* This replaces the fragile `env(safe-area-inset-top)` approach
* which returns 0 in some contexts.
*
* Variables injected:
* --nav-overflow: 60px extension above the viewport top
* --safe-top: iOS safe-area inset (0 on non-notch devices)
*/
.nav {
--nav-overflow: 60px;
position: fixed;
top: calc(var(--nav-overflow) * -1);
left: 0;
width: 100%;
z-index: var(--z-sticky);
padding: var(--space-3) 5vw;
padding-top: calc(var(--nav-overflow) + var(--safe-top) + var(--space-3));
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
/* Force GPU compositing on iOS so the nav stays locked to the viewport
during rubber-band and doesn't get painted under scrolling content. */
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition:
background var(--transition-normal),
backdrop-filter var(--transition-normal);
}
/* Glass-morphism nav on scroll — padding unchanged, only bg changes */
.nav--scrolled {
background: rgba(10, 10, 10, 0.7);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-bottom: var(--border-subtle);
}
/* Spacer reserves the logo slot in the nav flex layout.
The actual logo is a separate `.floating-logo` element that
animates from the hero center to this position on scroll. */
.nav__logo-spacer {
width: 55px;
height: 55px;
flex-shrink: 0;
}
.nav__links {
display: flex;
gap: var(--space-5);
list-style: none;
}
.nav__links a {
font-family: var(--kronos-font-display);
font-size: var(--font-sm);
font-weight: 600;
text-transform: uppercase;
color: var(--kronos-white);
letter-spacing: 0.12em;
transition: color var(--transition-fast);
position: relative;
}
/* Underline glow on hover */
.nav__links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(to right, var(--kronos-primary), var(--kronos-light-2));
transition: width var(--transition-normal);
}
.nav__links a:hover::after {
width: 100%;
}
.nav__links a:hover {
color: var(--kronos-light-3);
}
/* Desktop: hide the book CTA (it lives in the menu overlay on mobile only) */
.nav__links-book {
display: none;
}
.nav__burger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 10px; /* bigger tap target */
margin: -10px; /* cancel padding so visual size stays the same */
z-index: var(--z-overlay);
}
.nav__burger span {
display: block;
width: 24px;
height: 2px;
background: var(--kronos-white);
transition: transform var(--transition-normal), opacity var(--transition-fast);
transform-origin: center;
}
/* Burger → X animation (top bar rotates down, middle fades,
bottom bar rotates up; both meet at the middle). */
.nav__burger--open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav__burger--open span:nth-child(2) {
opacity: 0;
}
.nav__burger--open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ===========================================
FLOATING LOGO — moves from hero center to nav
Position is driven by JS via inline transform.
=========================================== */
/*
* Floating logo — fixed at viewport top-left origin.
* JS sets translate(x, y) scale(s) to position it.
* transform-origin: top left so scale shrinks toward
* the top-left corner = cleaner position math.
*/
.floating-logo {
position: fixed;
top: 0;
left: 0;
z-index: calc(var(--z-sticky) + 1);
pointer-events: auto;
transform-origin: top left;
will-change: transform;
transition: filter var(--transition-normal);
}
.floating-logo img {
display: block;
height: 340px;
width: auto;
margin-right: var(--space-3);
filter: brightness(0) invert(1) drop-shadow(0 0 30px var(--kronos-glow));
}
.floating-logo--docked img {
filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(108, 48, 130, 0.15));
}
/* Nav name — hidden until docked, then slides in from behind the logo */
.floating-logo__name {
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-42%) translateX(-40px);
white-space: nowrap;
font-family: var(--kronos-font-accent);
font-size: 9.5rem;
color: var(--kronos-white);
letter-spacing: 0.08em;
pointer-events: none;
margin-left: 12px;
opacity: 0;
clip-path: inset(-10% -100% -10% 0);
transition:
opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.floating-logo__name .name-full { display: inline; }
.floating-logo__name .name-short { display: none; }
.floating-logo--docked .floating-logo__name {
opacity: 1;
transform: translateY(-42%) translateX(0);
}
/* ===========================================
HERO
=========================================== */
.hero {
position: relative;
height: 100vh;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--kronos-surface-0);
}
/* Video background */
.hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(2px) brightness(0.25) saturate(0.6);
transform: scale(1.05);
}
/* Radial purple glow behind the hero content */
.hero::after {
content: '';
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, var(--kronos-glow) 0%, transparent 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: var(--z-base);
}
/* Bottom fade to black */
.hero__fade {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
background: linear-gradient(to top, var(--kronos-surface-0), transparent);
z-index: var(--z-base);
}
.hero__content {
position: relative;
z-index: var(--z-raised);
text-align: center;
padding: var(--space-4);
padding-top: 380px;
}
.hero__title {
font-family: var(--kronos-font-accent);
font-size: var(--font-hero);
font-weight: 400;
letter-spacing: 0.05em;
margin-bottom: var(--space-3);
color: var(--kronos-white);
}
.hero__tagline {
font-family: var(--kronos-font-display);
font-size: var(--font-md);
font-weight: 300;
color: var(--kronos-light-1);
letter-spacing: 0.2em;
text-transform: uppercase;
}
/* ===========================================
WELCOME / INTRO
=========================================== */
.welcome {
padding: var(--space-8) 5vw;
text-align: center;
}
.welcome h2 {
margin-bottom: var(--space-5);
font-size: var(--font-2xl);
letter-spacing: 0.02em;
}
.welcome p {
max-width: 800px;
margin: 0 auto;
font-size: var(--font-md);
line-height: 1.8;
text-align: justify;
}
.welcome__philosophy {
text-align: center;
padding-top: var(--space-5);
font-size: var(--font-md);
}
/* ===========================================
IMAGE OVERLAY SECTIONS (Label & Studio)
=========================================== */
.image-block {
width: 100%;
height: 550px;
display: flex;
align-items: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.image-block--label {
background-image:
linear-gradient(to right, rgba(10, 10, 10, 0.95) 30%, rgba(10, 10, 10, 0.4) 70%, transparent),
url('media/photos/contracts.webp');
}
.image-block--studio {
background-image:
linear-gradient(to right, rgba(10, 10, 10, 0.95) 30%, rgba(10, 10, 10, 0.4) 70%, transparent),
url('media/photos/studio.webp');
}
.image-block__inner {
width: 55%;
padding: 0 8%;
position: relative;
z-index: var(--z-base);
}
.image-block__title-sm {
font-size: var(--font-lg);
font-weight: 300;
letter-spacing: 0.1em;
color: var(--kronos-light-1);
text-transform: uppercase;
}
.image-block__title-lg {
font-size: var(--font-3xl);
font-weight: 800;
letter-spacing: 0.02em;
display: block;
}
.image-block__text {
margin-top: var(--space-4);
font-size: var(--font-base);
line-height: 1.8;
color: var(--kronos-light-4);
}
/* ===========================================
ABOUT
=========================================== */
.about {
padding: var(--space-7) 5vw;
}
.about h3 {
text-align: center;
margin-bottom: var(--space-6);
}
.about p {
max-width: 850px;
margin: 0 auto var(--space-4);
font-size: var(--font-base);
line-height: 1.9;
}
.about__image {
width: 100%;
max-width: 900px;
margin: var(--space-6) auto 0;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-dramatic);
border: var(--border-subtle);
}
.about__image img {
width: 100%;
height: auto;
display: block;
}
/* Cropped variant: forces a landscape frame (same vertical
footprint as the inauguration image) for portrait sources. */
.about__image--cropped img {
height: clamp(260px, 34vw, 400px);
object-fit: cover;
object-position: center 56%;
}
/* ===========================================
TEAM SECTION — Horizontal carousel
=========================================== */
.team {
padding: var(--space-5) 0 var(--space-4);
overflow: hidden;
}
.team h3 {
text-align: center;
margin-bottom: var(--space-4);
padding: 0 5vw;
}
.team > .container > p {
max-width: 850px;
margin: 0 auto var(--space-4);
padding: 0 5vw;
}
.team__slider {
position: relative;
padding: var(--space-2) 0;
}
.team__track {
display: flex;
list-style: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
/* No gap — cards overlap via negative margin */
padding: var(--space-6) calc(50vw - 180px);
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
/* Prevent text selection during drag */
-webkit-user-select: none;
user-select: none;
/* Mobile: momentum scrolling + snap */
-webkit-overflow-scrolling: touch;
}
.team__track::-webkit-scrollbar {
display: none;
}
.team__item {
scroll-snap-align: center;
flex-shrink: 0;
width: 360px;
transition: transform var(--transition-normal);
/* Stacking: first card on top, each next card slides behind */
position: relative;
z-index: 1;
}
/* Overlap: each card after the first slides under the previous */
.team__item:not(:first-child) {
margin-left: -60px;
}
.team__card {
width: 360px;
height: 720px;
background: var(--kronos-card-bg);
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid rgba(108, 48, 130, 0.15);
box-shadow: -1rem 0 3rem rgba(0, 0, 0, 0.7);
/* Smooth return from JS-driven 3D transforms */
transition:
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow var(--transition-normal),
border-color var(--transition-normal);
position: relative;
isolation: isolate;
will-change: transform;
}
/* Light reflection overlay — follows the cursor via --mx / --my */
.team__card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
600px circle at var(--mx, 50%) var(--my, 50%),
rgba(255, 255, 255, 0.08) 0%,
transparent 60%
);
opacity: 0;
transition: opacity var(--transition-normal);
z-index: 50;
pointer-events: none;
}
.team__card:hover::before {
opacity: 1;
}
/* Hovered item jumps to the top of the stack */
.team__item:hover {
z-index: 20;
}
/* Push all siblings AFTER the hovered item to the right */
.team__item:hover ~ .team__item {
transform: translateX(60px);
}
/* Auto-focus: when no card is hovered, the centered card behaves as if hovered.
Scoped via `:has(.team__card:hover)` so hovering the track's empty gaps
(before the first card, between cards, or the gutters) does NOT clear the
focused effect — only real hover on a card suppresses it. */
.team__track:not(:has(.team__card:hover)) .team__item--focused {
z-index: 20;
}
.team__track:not(:has(.team__card:hover)) .team__item--focused ~ .team__item {
transform: translateX(60px);
}
.team__track:not(:has(.team__card:hover)) .team__card--focused::before {
opacity: 1;
}
.team__track:not(:has(.team__card:hover)) .team__card--focused .team__photo img {
opacity: 1;
transform: scale(1.05);
}
.team__photo {
width: 100%;
height: 380px;
overflow: hidden;
position: relative;
}
/* Gradient fade at the bottom of the photo */
.team__photo::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient(to top, var(--kronos-card-bg), transparent);
pointer-events: none;
z-index: 2;
}
.team__photo img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
/* --tpx / --tpy are mouse-driven parallax offsets (px), set by JS.
--timg-scale swaps to the hover value below. */
transform:
translate(calc(var(--tpx, 0) * 1px), calc(var(--tpy, 0) * 1px))
scale(var(--timg-scale, 1));
transition: opacity var(--transition-slow), transform var(--transition-slow);
will-change: transform;
}
.team__card:hover .team__photo img,
.team__card--focused .team__photo img,
.team__card--active .team__photo img {
opacity: 1;
--timg-scale: 1.08;
}
.team__info {
padding: var(--space-4) var(--space-4) var(--space-5);
margin-top: -40px;
position: relative;
z-index: 3;
/* Solid background to guarantee no bleed-through */
background: var(--kronos-card-bg);
}
.team__name {
font-family: var(--kronos-font-display);
font-size: var(--font-lg);
font-weight: 700;
text-transform: uppercase;
text-align: center;
color: var(--kronos-light-3);
letter-spacing: 0.05em;
margin-bottom: var(--space-1);
}
.team__role {
font-size: var(--font-sm);
font-weight: 400;
text-align: center;
color: var(--kronos-light-1);
margin-bottom: var(--space-3);
letter-spacing: 0.03em;
}
.team__desc {
font-size: var(--font-sm);
line-height: 1.6;
color: var(--kronos-light-4);
text-align: justify;
}
/* Arrow buttons */
.team__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border: 1px solid var(--kronos-border-glow);
background: rgba(10, 10, 10, 0.7);
backdrop-filter: blur(10px);
color: var(--kronos-white);
font-size: 1.2rem;
border-radius: 50%;
cursor: pointer;
transition:
background var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast);
z-index: 30; /* above hovered cards (z-index: 20) */
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.team__arrow:hover {
background: var(--kronos-primary);
border-color: var(--kronos-primary);
box-shadow: var(--shadow-glow-sm);
}
.team__arrow--prev {
left: var(--space-4);
}
.team__arrow--next {
right: var(--space-4);
}
/* Page indicator dots — shown above the carousel */
.team__dots {
display: flex;
justify-content: center;
gap: 8px;
margin: var(--space-5) auto var(--space-3);
padding: 0 5vw;
flex-wrap: wrap;
}
.team__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(145, 88, 166, 0.3);
border: none;
padding: 0;
cursor: pointer;
transition:
width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
background 0.3s ease;
}
.team__dot:hover {
background: rgba(145, 88, 166, 0.5);
}
.team__dot--active {
width: 28px;
border-radius: 4px;
background: linear-gradient(to right, var(--kronos-primary), var(--kronos-light-2));
}
/* ===========================================
BUTTONS
=========================================== */
/*
* Modern ghost button with gradient border.
* Default: transparent fill, gradient border via background-clip trick.
* Hover: fills with gradient + ambient glow.
*/
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 36px;
font-family: var(--kronos-font-display);
font-weight: 600;
font-size: var(--font-sm);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--kronos-light-3);
background: transparent;
border: 1px solid var(--kronos-light-1);
border-radius: var(--radius-pill);
cursor: pointer;
transition:
all var(--transition-normal);
text-decoration: none;
position: relative;
overflow: hidden;
}
.btn__icon {
width: 18px;
height: 18px;
aspect-ratio: 1 / 1;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.btn__icon svg {
width: 18px;
height: 18px;
display: block;
overflow: visible;
}
.btn__icon svg path,
.btn__icon svg polygon,
.btn__icon svg rect,
.btn__icon svg circle {
fill: url(#iconGradient);
transition: fill var(--transition-normal);
}
.btn:hover .btn__icon svg path,
.btn:hover .btn__icon svg polygon,
.btn:hover .btn__icon svg rect,
.btn:hover .btn__icon svg circle {
fill: var(--kronos-white);
}
.btn--small .btn__icon {
width: 14px;
height: 14px;
}
.btn--small .btn__icon svg {
width: 14px;
height: 14px;
}
/* Gradient sweep overlay on hover */
.btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, var(--kronos-primary), var(--kronos-dark-2));
opacity: 0;
transition: opacity var(--transition-normal);
z-index: -1;
}
.btn:hover {
color: var(--kronos-white);
border-color: var(--kronos-light-2);
box-shadow:
0 0 20px var(--kronos-glow-soft),
0 0 60px rgba(108, 48, 130, 0.15);
transform: translateY(-2px);
}
.btn:hover::before {
opacity: 1;
}
.btn:active {
transform: translateY(0);
box-shadow: 0 0 10px var(--kronos-glow-soft);
}
.btn--small {
padding: 10px 24px;
font-size: var(--font-xs);
letter-spacing: 0.1em;
}
.btn-action {
margin-top: var(--space-5);
}
/* ===========================================
STUDIO TEXT
=========================================== */
.studio-text {
padding: var(--space-7) 5vw;
}
.studio-text h3 {
margin-bottom: var(--space-6);
}
.studio-text p {
max-width: 850px;
margin: 0 auto var(--space-4);
font-size: var(--font-base);
line-height: 1.9;
}
.studio-text h4 {
max-width: 850px;
margin: var(--space-6) auto var(--space-3);
font-weight: 600;
font-size: var(--font-xl);
color: var(--kronos-light-3);
}
.btn-wrap {
text-align: center;
margin-top: var(--space-6);
}
/* ===========================================
FEATURES GRID (Crown + 6 items)
=========================================== */
.features {
padding: var(--space-7) 5vw;
position: relative;
}
.features__grid {
display: flex;
align-items: stretch;
max-width: 1100px;
margin: 0 auto;
min-height: 600px;
}
.features__col {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-3);
}
.features__col--center {
display: flex;
align-items: center;
justify-content: center;
max-width: 300px;
position: relative;
z-index: 1;
}
/* Glow behind crown */
.features__col--center::before {
content: '';
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
background: radial-gradient(circle, var(--kronos-glow-soft) 0%, transparent 70%);
pointer-events: none;
}
.features__crown {
width: 100%;
/* 3D stage: perspective so the JS rotateX/Y on the img reads as depth.
We intentionally DO NOT use transform-style: preserve-3d here —
on iOS Safari a preserve-3d context traps mix-blend-mode, which
killed the metallic sheen on mobile. Perspective alone is enough
because only the img inside is transformed. */
perspective: 900px;
position: relative;
/* New stacking context so the sheen's blend mode composites against
the crown (not whatever is behind the section). */
isolation: isolate;
/* Let pointer events pass through the crown so hover lands on
the surrounding feature icons that overlap its bounding box. */
pointer-events: none;
}
.features__crown img {
width: 100%;
height: auto;
display: block;
transform-origin: center center;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
pointer-events: none;
}
/* Metallic sheen — a moving highlight band masked to the crown
silhouette. The mask uses the SVG's alpha so the shine only
appears on the crown itself. The crown tilts through this
fixed light source, which reads as a real reflection. */
.features__crown::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
110deg,
transparent 0%,
transparent 35%,
rgba(255, 255, 255, 0.55) 48%,
rgba(255, 240, 220, 0.8) 50%,
rgba(255, 255, 255, 0.55) 52%,
transparent 65%,
transparent 100%
);
background-size: 260% 100%;
background-position: 120% 0;
background-repeat: no-repeat;
-webkit-mask-image: url('media/svg/crown.svg');
-webkit-mask-size: contain;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-image: url('media/svg/crown.svg');
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
mix-blend-mode: plus-lighter;
opacity: 0.9;
animation: crown-shine 6s ease-in-out infinite;
/* Prompt the compositor to promote this to its own GPU layer,
which keeps the background-position animation smooth on mobile. */
will-change: background-position;
}
/* plus-lighter is widely supported now but older iOS (<16) needs a
fallback. screen is close enough visually. */
@supports not (mix-blend-mode: plus-lighter) {
.features__crown::after { mix-blend-mode: screen; }
}
@keyframes crown-shine {
0% { background-position: 130% 0; }
55% { background-position: -30% 0; }
100% { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
.features__crown::after { animation: none; opacity: 0; }
}
.features__item {
flex: 1;
display: flex;
/* Lift items above sibling columns so translateX that pushes
them into the center column's region still catches hover. */
position: relative;
z-index: 2;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) 0;
}
/* Left column: text on left (right-aligned), icon on right (toward crown) */
.features__col--left .features__item {
text-align: right;
}
/* Right column: icon on left (toward crown), text on right */
.features__col--right .features__item {
text-align: left;
}
/*
* Circular offset: top & bottom items pushed inward (toward crown),
* middle items pushed outward — matches the wreath curve.
*/
.features__col--left .features__item:nth-child(1) { transform: translateX(15%); }
.features__col--left .features__item:nth-child(2) { transform: translateX(-2rem); }
.features__col--left .features__item:nth-child(3) { transform: translateX(8%); }
.features__col--right .features__item:nth-child(1) { transform: translateX(-15%); }
.features__col--right .features__item:nth-child(2) { transform: translateX(2rem); }
.features__col--right .features__item:nth-child(3) { transform: translateX(-8%); }
/*
* Icon — JS inlines the SVG from data-icon,
* CSS applies gradient fill via url(#iconGradient).
* Hover switches to metallic gradient + glow.
*/
.features__icon {
width: 60px;
height: 60px;
flex-shrink: 0;
position: relative;
cursor: default;
transition: filter var(--transition-normal), transform var(--transition-normal);
}
.features__icon svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
/* Base gradient fill on all SVG paths */
.features__icon svg path {
fill: url(#iconGradient);
transition: fill var(--transition-normal);
}
/* Metallic sheen on hover — same technique as the crown.
A highlight band sweeps across once per hover, masked to
the icon's silhouette via its source SVG. The mask URL is
set per-icon via the `--icon-mask` custom property (JS
reads data-icon and sets it). */
.features__icon::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
110deg,
transparent 0%,
transparent 35%,
rgba(255, 255, 255, 0.45) 48%,
rgba(255, 240, 220, 0.7) 50%,
rgba(255, 255, 255, 0.45) 52%,
transparent 65%,
transparent 100%
);
background-size: 260% 100%;
background-position: 130% 0;
-webkit-mask: var(--icon-mask) center / contain no-repeat;
mask: var(--icon-mask) center / contain no-repeat;
mix-blend-mode: screen;
opacity: 0;
}
/* Only activate the sweep when the device actually supports hover
(skip tablets/phones where :hover fires on tap). */
@media (hover: hover) {
.features__icon:hover::after {
opacity: 1;
background-position: -30% 0;
transition:
background-position 0.9s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.15s ease-out;
}
}
@media (prefers-reduced-motion: reduce) {
.features__icon::after { display: none; }
}
.features__label h4 {
font-family: var(--kronos-font-display);
font-size: var(--font-base);
font-weight: 600;
margin-bottom: var(--space-1);
letter-spacing: 0.03em;
}
.features__label p {
font-size: var(--font-sm);
color: var(--kronos-light-1);
line-height: 1.4;
}
/* ===========================================
ENGINEERS
=========================================== */
/* ===========================================
ENGINEERS — Booking cards
=========================================== */
.engineers {
padding: var(--space-7) 5vw;
}
.engineers h3 {
text-align: center;
margin-bottom: var(--space-3);
}
.engineers__intro {
max-width: 580px;
margin: 0 auto var(--space-6);
text-align: center;
font-size: var(--font-base);
line-height: 1.7;
color: var(--kronos-light-1);
}
.engineers__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
justify-content: center;
gap: var(--space-5);
max-width: 1100px;
margin: 0 auto;
}
.engineers__card {
position: relative;
text-align: center;
/* Perspective on the card gives the child photo's rotation real depth.
The card itself doesn't transform — name and button stay put. */
perspective: 1000px;
}
/* --tx / --ty (deg) set by JS on mousemove. */
.engineers__photo {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 3 / 4;
border: 1px solid rgba(145, 88, 166, 0.15);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
transform-style: preserve-3d;
transform:
rotateX(var(--tx, 0deg))
rotateY(var(--ty, 0deg));
transition:
transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
border-color var(--transition-normal),
box-shadow var(--transition-normal);
will-change: transform;
}
.engineers__card:hover .engineers__photo {
border-color: rgba(145, 88, 166, 0.5);
box-shadow:
0 0 32px rgba(108, 48, 130, 0.3),
0 12px 48px rgba(0, 0, 0, 0.5);
}
/* --px / --py (px) offset the image opposite the cursor for parallax;
--img-scale swaps to the hover value below. */
.engineers__photo img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.85) saturate(0.9);
transform:
translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px))
scale(var(--img-scale, 1));
transition:
transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
filter var(--transition-slow);
will-change: transform;
}
.engineers__card:hover .engineers__photo img {
--img-scale: 1.08;
filter: brightness(1) saturate(1);
}
@media (prefers-reduced-motion: reduce) {
.engineers__photo,
.engineers__photo img {
transform: none !important;
}
}
/* Role overlay — bottom gradient with label */
.engineers__overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-5) var(--space-2) var(--space-3);
background: linear-gradient(to top, rgba(10, 10, 10, 0.92) 10%, transparent);
display: flex;
align-items: flex-end;
justify-content: center;
pointer-events: none;
}
/* Name overlay — same treatment but anchored to the top of the photo. */
.engineers__overlay--top {
top: 0;
bottom: auto;
padding: var(--space-4) var(--space-2) var(--space-5);
background: linear-gradient(to bottom, rgba(10, 10, 10, 0.92) 10%, transparent);
align-items: flex-start;
}
.engineers__role {
font-family: var(--kronos-font-display);
font-size: var(--font-xs);
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.3;
text-align: center;
text-transform: uppercase;
color: var(--kronos-light-3);
}
.engineers__name {
font-family: var(--kronos-font-display);
font-size: var(--font-xl);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0;
color: var(--kronos-white);
background: linear-gradient(135deg, var(--kronos-white), var(--kronos-light-3));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.engineers__book {
display: inline-flex;
margin-top: var(--space-4);
}
/* ===========================================
CONTACT
=========================================== */
.contact {
padding: var(--space-7) 5vw;
}
.contact h2 {
text-align: center;
margin-bottom: var(--space-6);
}
.contact__grid {
display: flex;
gap: var(--space-6);
max-width: 1100px;
margin: 0 auto;
align-items: start;
}
.contact__map {
flex: 1;
}
.contact__map iframe {
width: 100%;
height: 380px;
border: none;
border-radius: var(--radius-md);
filter: grayscale(100%) invert(90%) contrast(100%);
border: var(--border-subtle);
}
.contact__info {
flex: 1;
}
.contact__info p {
font-size: var(--font-base);
line-height: 1.9;
margin-bottom: var(--space-4);
}
/* ===========================================
FOOTER
=========================================== */
.footer {
border-top: var(--border-subtle);
padding: var(--space-6) 5vw var(--space-4);
background: var(--kronos-surface-1);
}
.footer__inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: stretch;
max-width: 1100px;
margin: 0 auto;
gap: var(--space-6);
}
/* Equal grid tracks + centered content give uniform visual rhythm
between blocks regardless of text length. */
.footer__inner > * {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.footer__brand {
position: relative;
gap: var(--space-2);
}
/* Absolute so the line doesn't take flow space — logo top then aligns
with the h4 headings in sibling columns. */
.footer__brand-line {
position: absolute;
top: -14px;
left: 0;
display: block;
width: 100%;
max-width: 240px;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--kronos-light-2) 50%,
transparent 100%
);
}
.footer__brand img {
height: 110px;
width: auto;
filter: brightness(0) invert(1);
margin-bottom: calc(-1 * var(--space-2));
}
.footer__brand-name {
font-family: var(--kronos-font-accent);
font-size: var(--font-lg);
font-weight: 400;
letter-spacing: 0.12em;
color: var(--kronos-light-3);
}
.footer__links {
flex: 1;
}
.footer__links h3 {
font-family: var(--kronos-font-display);
font-size: var(--font-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-3);
color: var(--kronos-light-3);
}
.footer__links ul {
list-style: none;
}
.footer__links li {
margin-bottom: var(--space-2);
font-size: var(--font-sm);
color: var(--kronos-light-2);
}
.footer__links a {
font-size: var(--font-sm);
color: var(--kronos-light-2);
}
.footer__links a:hover {
color: var(--kronos-white);
}
/* Contact list rows: icon + label inline, centered in the column. */
.footer__links li {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
}
/* Two-line address stays left-aligned as a block while its
stays centered in the column. */
.footer__address {
text-align: left;
}
.footer-list-icon {
width: 14px;
height: 14px;
aspect-ratio: 1 / 1;
flex-shrink: 0;
display: inline-flex;
line-height: 0;
}
.footer-list-icon svg {
width: 14px;
height: 14px;
display: block;
overflow: visible;
}
/* Solid fill — a shared url(#iconGradient) reference breaks on some
multi-shape SVGs (e.g. polygons in the email icon). */
.footer-list-icon svg path,
.footer-list-icon svg polygon,
.footer-list-icon svg rect,
.footer-list-icon svg circle,
.footer-list-icon svg g {
fill: var(--kronos-light-2);
}
.footer__social {
flex: 1;
}
.footer__social h3 {
font-family: var(--kronos-font-display);
font-size: var(--font-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-3);
color: var(--kronos-light-3);
}
.footer__social-grid {
display: grid;
grid-template-columns: repeat(2, 36px);
grid-template-rows: repeat(2, 36px);
gap: var(--space-4);
}
.footer__social-icon {
position: relative;
display: block;
width: 100%;
height: 100%;
isolation: isolate;
transition: transform var(--transition-normal);
}
.footer__social-icon svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.footer__social-icon svg path {
fill: url(#iconGradient);
transition: fill var(--transition-normal);
}
/* Metallic sheen (crown-shine keyframes), masked to each icon's
silhouette via --icon-mask. Loops so icons stay alive without hover. */
.footer__social-icon::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
110deg,
transparent 0%,
transparent 35%,
rgba(255, 255, 255, 0.55) 48%,
rgba(255, 240, 220, 0.8) 50%,
rgba(255, 255, 255, 0.55) 52%,
transparent 65%,
transparent 100%
);
background-size: 260% 100%;
background-position: 120% 0;
background-repeat: no-repeat;
-webkit-mask: var(--icon-mask) center / contain no-repeat;
mask: var(--icon-mask) center / contain no-repeat;
mix-blend-mode: plus-lighter;
opacity: 0.9;
animation: crown-shine 6s ease-in-out infinite;
will-change: background-position;
}
/* Stagger the sweep so the 2x2 grid doesn't flash in unison. */
.footer__social-icon:nth-child(2)::after { animation-delay: 1.5s; }
.footer__social-icon:nth-child(3)::after { animation-delay: 3s; }
.footer__social-icon:nth-child(4)::after { animation-delay: 4.5s; }
@supports not (mix-blend-mode: plus-lighter) {
.footer__social-icon::after { mix-blend-mode: screen; }
}
@media (hover: hover) {
.footer__social-icon:hover {
transform: translateY(-2px);
}
.footer__social-icon:hover svg path {
fill: url(#iconGradientHover);
}
}
@media (prefers-reduced-motion: reduce) {
.footer__social-icon::after { animation: none; opacity: 0; }
}
.footer__bottom {
text-align: center;
padding-top: var(--space-5);
margin-top: var(--space-5);
border-top: var(--border-subtle);
font-size: var(--font-xs);
color: var(--kronos-light-2);
letter-spacing: 0.05em;
}
.footer__bottom a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(145, 88, 166, 0.4);
transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.footer__bottom a:hover {
color: var(--kronos-white);
text-decoration-color: var(--kronos-light-2);
}
.footer__credit {
text-align: center;
margin-top: var(--space-2);
font-size: var(--font-xs);
color: var(--kronos-light-2);
letter-spacing: 0.08em;
}
/* ===========================================
LEGAL PAGE — standalone simple layout
=========================================== */
/* Legal page has no hero, so the floating logo is statically docked in
the nav corner. Scale values match the end-state computed by script.js
on the index page (logoH target = 55px / logoH base). */
.legal-page .floating-logo {
transform: translate(5vw, calc(var(--safe-top, 0px) + 14px)) scale(0.1618);
}
/* No hero on legal, so the nav always wears its scrolled/glass treatment
(overrides the script.js scroll toggle that removes it above 60px). */
.legal-page .nav {
background: rgba(10, 10, 10, 0.7);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-bottom: var(--border-subtle);
}
/* Simple back link replacing the full navigation on the legal page. */
.nav__back {
font-family: var(--kronos-font-display);
font-size: var(--font-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--kronos-white);
transition: color var(--transition-fast);
}
.nav__back:hover {
color: var(--kronos-light-3);
}
/* Push legal content below the fixed nav (nav visible height ≈ safe-top
+ 103px). Adds to the legal section's existing top padding. */
.legal-page .legal {
padding-top: calc(var(--safe-top, 0px) + 103px + var(--space-4));
}
/* Legal page footer: no navigation column, rebalance the 3 remaining
blocks so Contact/Social/Brand sit evenly rather than in a 4-up grid. */
.legal-page .footer__inner {
grid-template-columns: repeat(3, 1fr);
max-width: 900px;
}
@media (max-width: 1024px) {
.legal-page .footer__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.legal-page .footer__inner { grid-template-columns: 1fr; }
/* Mobile hero logo is 220px (vs desktop 340px), so the docked scale
that lands it at 55px differs. */
.legal-page .floating-logo {
transform: translate(5vw, calc(var(--safe-top, 0px) + 14px)) scale(0.25);
}
}
.legal {
padding: var(--space-7) 5vw;
}
.legal h1 {
text-align: center;
margin-bottom: var(--space-6);
}
.legal h2 {
max-width: 850px;
margin: var(--space-6) auto var(--space-3);
font-size: var(--font-lg);
color: var(--kronos-light-3);
}
.legal h3 {
max-width: 850px;
margin: var(--space-4) auto var(--space-2);
font-size: var(--font-base);
font-family: var(--kronos-font-display);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--kronos-light-2);
}
.legal p {
max-width: 850px;
margin: 0 auto var(--space-4);
font-size: var(--font-base);
line-height: 1.9;
}
.legal__list {
max-width: 850px;
margin: 0 auto var(--space-4);
padding-left: var(--space-5);
font-size: var(--font-base);
line-height: 1.9;
color: var(--kronos-light-4);
}
.legal__list li {
margin-bottom: var(--space-2);
}
/* ===========================================
RESPONSIVE — Tablet (max 1024px)
=========================================== */
@media (max-width: 1024px) {
.features__grid {
flex-direction: column;
align-items: center;
min-height: auto;
gap: 0;
}
.features__col {
padding: 0 var(--space-3);
width: 100%;
max-width: 500px;
}
.features__col--center {
max-width: 260px;
order: -1;
margin-bottom: var(--space-4);
}
.features__col--left .features__item,
.features__col--right .features__item {
transform: none !important;
}
/* Alternate icon left/right for visual rhythm.
Text aligns on the side OPPOSITE the icon. */
.features__col--left .features__item:nth-child(odd),
.features__col--right .features__item:nth-child(odd) {
flex-direction: row;
text-align: right;
}
.features__col--left .features__item:nth-child(even),
.features__col--right .features__item:nth-child(even) {
flex-direction: row-reverse;
text-align: left;
}
.features__label {
flex: 1;
}
.contact__grid {
flex-direction: column;
}
.contact__map {
width: 100%;
}
.contact__map iframe {
width: 100%;
border-radius: var(--radius-sm);
}
.image-block__inner {
width: 70%;
padding: 0 5%;
}
/* Engineers: tighter gap on tablet */
.engineers__grid {
gap: var(--space-3);
}
.engineers__name {
font-size: var(--font-lg);
}
/* Footer: 2 columns on tablet to avoid cramped 4-up layout */
.footer__inner {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
}
}
/* ===========================================
RESPONSIVE — Mobile (max 600px)
=========================================== */
@media (max-width: 650px) {
.floating-logo__name .name-full { display: none; }
.floating-logo__name .name-short { display: inline; }
}
@media (max-width: 600px) {
/* Nav on mobile: ALWAYS has an opaque background so the
60px upward extension (--nav-overflow) + iPhone safe-area
are never see-through. Scrolled state still adds a subtle
blur boost on top of this. */
.nav {
background: rgba(10, 10, 10, 0.85);
backdrop-filter: blur(20px) saturate(1.3);
-webkit-backdrop-filter: blur(20px) saturate(1.3);
}
/* ==========================================
MOBILE MENU — full-screen overlay
Dark backdrop + blur, links centered on screen
========================================== */
/* Fullscreen menu overlay, positioned BELOW the nav so the
burger stays tappable to close it.
Nav z-index: var(--z-sticky)
Menu z-index: var(--z-sticky) - 1 (explicitly below)
Uses `inset: 0` + `100dvh` for true full-screen, and
padding accounts for iPhone safe area + nav height so
the centered links sit in the visual middle of the
usable area (not behind the status bar or nav). */
.nav__links {
position: fixed;
inset: 0;
width: 100vw;
/* lvh = largest viewport = address-bar-hidden case. Covers the
full possible viewport on iOS so retracting the URL bar never
reveals page content below the menu. Fallback for older UAs. */
height: 100vh;
height: 100lvh;
margin: 0;
/* Top pad = safe-area + nav height + extra breathing room so the
flex-centered content sits visibly below viewport midline.
Bottom pad = space for the home-bar / browser UI. */
padding:
calc(var(--safe-top) + 140px)
5vw
calc(var(--safe-top) + var(--space-5));
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-5);
z-index: calc(var(--z-sticky) - 1);
opacity: 0;
pointer-events: none;
/* Compositing stability — iOS can shift fixed elements during
scroll momentum without this. */
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Dark glass backdrop — spans well beyond the overlay's own box so
iOS rubber-band, URL-bar collapse and rotation never expose the
page underneath. 100lvh-sized parent + -50vmax inset = solid wall. */
.nav__links::before {
content: '';
position: absolute;
inset: -50vmax;
background: rgba(10, 10, 10, 0.95);
backdrop-filter: blur(24px) saturate(1.3);
-webkit-backdrop-filter: blur(24px) saturate(1.3);
z-index: -1;
pointer-events: none;
}
.nav__links--open {
opacity: 1;
pointer-events: auto;
}
.nav__links li {
list-style: none;
opacity: 0;
transform: translateY(16px);
transition:
opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__links--open li {
opacity: 1;
transform: translateY(0);
}
/* Staggered link reveal */
.nav__links--open li:nth-child(1) { transition-delay: 0.08s; }
.nav__links--open li:nth-child(2) { transition-delay: 0.14s; }
.nav__links--open li:nth-child(3) { transition-delay: 0.20s; }
.nav__links--open li:nth-child(4) { transition-delay: 0.26s; }
.nav__links--open li:nth-child(5) { transition-delay: 0.34s; }
.nav__links a {
font-family: var(--kronos-font-display);
font-size: var(--font-2xl);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--kronos-white);
padding: var(--space-2) var(--space-3);
display: inline-block;
position: relative;
transition: color 0.2s ease;
}
/* Purple underline on tap/hover — matches site accent */
.nav__links a::after {
content: '';
position: absolute;
left: 50%;
bottom: 2px;
width: 0;
height: 2px;
background: linear-gradient(to right, var(--kronos-primary), var(--kronos-light-2));
transform: translateX(-50%);
transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__links a:active {
color: var(--kronos-light-3);
}
.nav__links a:active::after {
width: 60%;
}
/* Book-a-session CTA at the end of mobile menu */
.nav__links-book {
display: block;
margin-top: var(--space-4);
}
.nav__links-book .btn {
font-size: var(--font-sm);
padding: 14px 32px;
letter-spacing: 0.12em;
}
.nav__links-book .btn::after {
display: none; /* kill the underline from the nav link rules */
}
/* Burger stays in its default nav flex position.
The menu overlay is adjusted below to NOT cover the nav. */
.nav__burger {
display: flex;
}
/* ---- Hero & floating logo ---- */
.floating-logo img {
height: 220px;
}
.floating-logo__name {
font-size: 10.5rem;
}
.hero__content {
padding-top: 280px;
}
.hero__tagline {
font-size: var(--font-sm);
letter-spacing: 0.1em;
}
/* ---- Typography scale down ---- */
h1 { font-size: var(--font-2xl); }
h2 { font-size: var(--font-2xl); }
h3 { font-size: var(--font-xl); }
h4 { font-size: var(--font-lg); }
.welcome h2 { font-size: var(--font-xl); }
/* ---- Image blocks ---- */
.image-block {
height: 420px;
}
.image-block--label,
.image-block--studio {
background-position: 35%;
}
.image-block__inner {
width: 100%;
padding: 0 5vw;
}
.image-block__title-sm { font-size: var(--font-md); }
.image-block__title-lg { font-size: var(--font-2xl); }
/* ==========================================
Mobile team carousel — Apple Music / App Store style
- 78vw cards, 11vw peek of neighbors
- scroll-driven scale/opacity animation on adjacent cards
- smooth spring-feel via cubic-bezier
========================================== */
/* Trim the bottom gap under the carousel — the global
.section-padding mobile override (64px) is too heavy once
the track adds its own vertical padding. */
.team.section-padding {
padding-bottom: var(--space-4);
}
/* Peek floors at 56px on narrow screens; ≥510px, 11vw takes over.
Cards also overlap slightly (like the desktop stack) so neighbours
sit partially behind the focused card instead of fully separate.
Vertical padding gives the active-card's box-shadow room INSIDE the
scroll container's clipping area so the glow isn't cut off. */
.team__track {
padding: var(--space-5) max(56px, 11vw) var(--space-7);
gap: 0;
scroll-snap-type: x mandatory;
scroll-snap-stop: always;
overflow-x: auto;
scroll-behavior: smooth;
/* Enable scroll-driven animations timeline */
scroll-timeline: --track-scroll x;
}
.team__item {
width: calc(100vw - 2 * max(56px, 11vw));
flex-shrink: 0;
scroll-snap-align: center;
position: relative;
z-index: 1;
/* Default resting state: slightly shrunk */
transform: scale(0.88);
opacity: 0.55;
transition:
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
view-timeline: --card-view inline;
}
/* Slight horizontal overlap — each non-first card pulls back into
the previous one, mirroring the desktop layered look. */
.team__item:not(:first-child) {
margin-left: -30px;
}
/* Active card grows back to full size & opacity, and sits above
its neighbours so its edges visibly cover them. */
.team__item:has(.team__card--active) {
transform: scale(1);
opacity: 1;
z-index: 20;
}
/* Progressive scroll-driven animation (Chrome 115+ / Safari 26+).
As a card enters/exits the viewport horizontally, its scale
and opacity smoothly interpolate — feels native & premium. */
@supports (animation-timeline: view()) {
.team__item {
animation: card-scroll-fade linear both;
animation-timeline: --card-view;
animation-range: cover 0% cover 100%;
/* Let scroll-driven animation drive transform instead */
transform: none;
opacity: 1;
transition: none;
}
@keyframes card-scroll-fade {
0% { transform: scale(0.86); opacity: 0.4; }
50% { transform: scale(1); opacity: 1; }
100% { transform: scale(0.86); opacity: 0.4; }
}
}
.team__card {
width: 100%;
height: auto;
box-shadow: var(--shadow-medium);
transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.team__photo {
height: 80vw;
max-height: 380px;
}
/* Photos: dim when inactive, bright on focus */
.team__photo img {
opacity: 0.6;
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.team__card--active .team__photo img {
opacity: 1;
}
.team__card--active {
box-shadow:
0 0 40px rgba(108, 48, 130, 0.35),
0 12px 48px rgba(0, 0, 0, 0.5);
border-color: rgba(145, 88, 166, 0.4);
}
/* On mobile, tighten the light reflection so it stays inside the card */
.team__card--active::before {
opacity: 1;
background: radial-gradient(
80% 60% at 50% 0%,
rgba(145, 88, 166, 0.18) 0%,
transparent 70%
);
}
/* Dim non-active photos for stronger focus contrast
(opacity on .team__photo img base rule is 0.6;
this tightens it for mobile specifically) */
.team__item:not(:has(.team__card--active)) .team__photo img {
opacity: 0.4;
}
.team__item:hover {
z-index: 1;
}
.team__item:hover ~ .team__item {
transform: none;
}
.team__arrow {
display: none;
}
/* Mobile: slightly smaller dots. Small top margin so they don't
crowd the paragraph above; 0 bottom so the track can own the
gap and give the card's backlit glow room to fade out without
getting clipped at the track's overflow boundary. */
.team__dots {
gap: 6px;
margin: var(--space-3) auto 0;
position: relative;
z-index: 2;
}
.team__dot {
width: 6px;
height: 6px;
}
.team__dot--active {
width: 22px;
border-radius: 3px;
}
/* ---- Features ---- */
.features__col--center {
max-width: 200px;
}
.features__icon {
width: 44px;
height: 44px;
}
/* Alternating layout inherited from tablet breakpoint (max-width 1024) */
/* ---- Engineers ---- */
.engineers__grid {
grid-template-columns: 1fr;
gap: var(--space-4);
max-width: 340px;
}
.engineers__card {
width: 85%;
max-width: 380px;
/* Single-column grid: center each card in its 1fr track since the
explicit 85% width shorter than the track. */
justify-self: center;
}
/* ---- Contact ---- */
.contact__map {
width: 100vw;
margin-left: -5vw;
}
.contact__map iframe {
width: 100%;
height: 250px;
border-radius: 0;
filter: grayscale(100%) invert(100%) contrast(75%);
}
/* ---- Footer ---- */
.footer__inner {
grid-template-columns: 1fr;
gap: var(--space-5);
}
/* Single column on mobile — center the brand line above the logo
instead of hugging the column's left edge. */
.footer__brand-line {
left: 50%;
transform: translateX(-50%);
}
/* ---- Buttons ---- */
.btn {
padding: 12px 24px;
font-size: var(--font-xs);
}
/* ---- Spacing ---- */
.section-padding {
padding: var(--space-7) 5vw;
}
}