/* ============================================================ SCROLLY.CSS — Unified Design System for 4x4x.ru v2.0 Apple-grade scrollytelling primitives. Priority: typography → spacing → motion → components. ============================================================ */ /* ============================================================ GOOGLE FONTS — Inter ============================================================ */ /* Google Fonts moved to tags in HTML for faster loading */ /* ============================================================ DESIGN TOKENS ============================================================ */ :root { /* --- Surfaces (dark default) --- */ --s-bg: #000000; --s-bg-raised: #0a0a0a; --s-bg-card: #111111; --s-bg-card-alt: #161616; --s-bg-card-hover:#1a1a1a; --s-bg-overlay: rgba(0, 0, 0, 0.55); /* --- Neutral palette --- */ --n-900: #0a0a0a; --n-800: #141414; --n-700: #1c1c1e; --n-600: #2c2c2e; --n-500: #48484a; --n-400: #636366; --n-300: #8e8e93; --n-200: #aeaeb2; --n-100: #d1d1d6; --n-50: #f2f2f7; /* --- Text --- */ --t-primary: #f5f5f7; --t-secondary: #98989d; --t-tertiary: #737378; --t-inverse: #1d1d1f; /* --- Brand — Gold (restrained) --- */ --c-gold: #c9a84c; --c-gold-light: #d4af37; --c-gold-pale: #dfc26a; --c-gold-muted: #a08635; --c-gold-dim: rgba(201, 168, 76, 0.10); --c-gold-border: rgba(201, 168, 76, 0.22); --c-gold-glow: rgba(212, 175, 55, 0.18); /* --- Borders --- */ --b-subtle: rgba(255, 255, 255, 0.07); --b-medium: rgba(255, 255, 255, 0.12); --b-strong: rgba(255, 255, 255, 0.20); --b-hover: rgba(201, 168, 76, 0.35); --b-gold: rgba(201, 168, 76, 0.22); /* --- Shadows --- */ --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.24); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.32); --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.48); --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.64); --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.72); --shadow-gold: 0 8px 40px rgba(212, 175, 55, 0.20); /* --- Glass --- */ --glass-bg: rgba(0, 0, 0, 0.72); --glass-border: rgba(255, 255, 255, 0.05); --glass-blur: 20px; /* --- Radii --- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 24px; --r-2xl: 32px; --r-full: 9999px; /* --- Z-index layers --- */ --z-base: 1; --z-content: 10; --z-sticky: 100; --z-nav: 1000; --z-overlay: 2000; --z-modal: 3000; /* --- Motion --- */ --ease-apple: cubic-bezier(0.25, 0.10, 0.25, 1.00); --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out: cubic-bezier(0.16, 1.00, 0.30, 1.00); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00); --ease-in: cubic-bezier(0.42, 0.00, 1.00, 1.00); --dur-instant: 0.12s; --dur-fast: 0.20s; --dur-base: 0.40s; --dur-slow: 0.65s; --dur-reveal: 0.90s; --dur-cinematic: 1.10s; /* --- Typography --- */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; /* --- Type scale (fluid) --- */ --ts-xs: clamp(0.69rem, 0.65rem + 0.20vw, 0.80rem); --ts-sm: clamp(0.80rem, 0.76rem + 0.22vw, 0.94rem); --ts-base: clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem); --ts-lg: clamp(1.13rem, 1.05rem + 0.40vw, 1.38rem); --ts-xl: clamp(1.38rem, 1.20rem + 0.90vw, 2.00rem); --ts-2xl: clamp(1.75rem, 1.40rem + 1.75vw, 2.75rem); --ts-3xl: clamp(2.25rem, 1.65rem + 3.00vw, 4.00rem); --ts-4xl: clamp(3.00rem, 2.00rem + 5.00vw, 5.75rem); --ts-5xl: clamp(3.75rem, 2.50rem + 6.25vw, 7.50rem); /* --- Layout --- */ --nav-h: 58px; --section-pad: clamp(80px, 12vw, 160px); --section-pad-sm: clamp(48px, 8vw, 96px); --content-max: 1200px; --content-narrow: 760px; --content-wide: 1440px; --gutter: clamp(1.25rem, 4vw, 3rem); /* --- Spacing scale --- */ --sp-1: 0.25rem; --sp-2: 0.50rem; --sp-3: 0.75rem; --sp-4: 1.00rem; --sp-5: 1.25rem; --sp-6: 1.50rem; --sp-8: 2.00rem; --sp-10: 2.50rem; --sp-12: 3.00rem; --sp-16: 4.00rem; --sp-20: 5.00rem; --sp-24: 6.00rem; } /* ============================================================ LIGHT THEME Apple's light palette: pure white, subtle gray hierarchy. ============================================================ */ [data-theme="light"] { --s-bg: #ffffff; --s-bg-raised: #f5f5f7; --s-bg-card: #ffffff; --s-bg-card-alt: #f5f5f7; --s-bg-card-hover:#fafafa; --s-bg-overlay: rgba(255, 255, 255, 0.60); --t-primary: #1d1d1f; --t-secondary: #555558; --t-tertiary: #6e6e73; --b-subtle: rgba(0, 0, 0, 0.06); --b-medium: rgba(0, 0, 0, 0.10); --b-strong: rgba(0, 0, 0, 0.16); --glass-bg: rgba(255, 255, 255, 0.80); --glass-border: rgba(0, 0, 0, 0.06); --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.10); --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.12); --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.14); --shadow-gold: 0 8px 40px rgba(201, 168, 76, 0.18); --c-gold: #8b7230; --c-gold-light: #7a6428; --c-gold-pale: #a67c24; --c-gold-dim: rgba(201, 168, 76, 0.08); --c-gold-border: rgba(201, 168, 76, 0.28); --c-gold-glow: rgba(212, 175, 55, 0.14); --n-900: #f2f2f7; --n-800: #e5e5ea; --n-700: #d1d1d6; --n-600: #aeaeb2; --n-500: #8e8e93; --n-400: #636366; --n-300: #48484a; --n-200: #2c2c2e; --n-100: #1c1c1e; --n-50: #0a0a0a; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; } body { font-family: var(--font); font-size: var(--ts-base); background: var(--s-bg); color: var(--t-primary); line-height: 1.6; overflow-x: hidden; transition: background-color var(--dur-base) var(--ease-apple), color var(--dur-base) var(--ease-apple); } img, video { display: block; max-width: 100%; height: auto; } /* Focus visibility for keyboard navigation (WCAG 2.4.7) */ :focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: var(--r-sm); } :focus:not(:focus-visible) { outline: none; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* ============================================================ LANGUAGE VISIBILITY ============================================================ */ [data-lang="en"] .lang-ru { display: none !important; } [data-lang="ru"] .lang-en { display: none !important; } [data-lang="en"] .lang-en { display: inline; } [data-lang="ru"] .lang-ru { display: inline; } /* ============================================================ TYPOGRAPHY ============================================================ */ /* Eyebrow label */ .eyebrow { font-size: var(--ts-xs); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-gold); margin-bottom: var(--sp-4); display: block; } /* Headline scale */ .headline-xl { font-size: var(--ts-4xl); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; color: var(--t-primary); } .headline-lg { font-size: var(--ts-3xl); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; color: var(--t-primary); } .headline-md { font-size: var(--ts-2xl); font-weight: 600; letter-spacing: -0.025em; line-height: 1.14; color: var(--t-primary); } .headline-sm { font-size: var(--ts-xl); font-weight: 600; letter-spacing: -0.018em; line-height: 1.20; color: var(--t-primary); } /* Body copy */ .body-xl { font-size: var(--ts-lg); color: var(--t-secondary); line-height: 1.65; font-weight: 400; } .body-lg { font-size: var(--ts-lg); color: var(--t-secondary); line-height: 1.65; } .body-md { font-size: var(--ts-base); color: var(--t-secondary); line-height: 1.60; } .body-sm { font-size: var(--ts-sm); color: var(--t-tertiary); line-height: 1.55; } /* Gold accent text — clip gradient */ .gold-text { background: linear-gradient( 120deg, var(--c-gold-light) 0%, var(--c-gold-pale) 50%, var(--c-gold) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Mask-reveal text animation (clip from bottom) */ .mask-reveal { overflow: hidden; display: block; } .mask-reveal__inner { display: block; transform: translateY(110%); transition: transform var(--dur-cinematic) var(--ease-out); } .mask-reveal.is-visible .mask-reveal__inner { transform: translateY(0); } /* Per-word mask reveal for multi-word headlines — JS splits text */ .mask-reveal-word { display: inline-block; overflow: hidden; vertical-align: bottom; } .mask-reveal-word__inner { display: inline-block; transform: translateY(105%); transition: transform var(--dur-cinematic) var(--ease-out); } .mask-reveal-word.is-visible .mask-reveal-word__inner { transform: translateY(0); } /* ============================================================ NAVIGATION (Glass morphism — refined) ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); background: var(--glass-bg); border-bottom: 0.5px solid var(--glass-border); backdrop-filter: saturate(160%) blur(var(--glass-blur)); -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur)); transition: background var(--dur-base) var(--ease-apple), border-color var(--dur-base) var(--ease-apple); } .nav-logo { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; color: var(--t-primary); } .nav-links { display: flex; gap: 1.75rem; list-style: none; } .nav-links a { font-size: var(--ts-sm); font-weight: 450; color: var(--t-secondary); transition: color var(--dur-fast) var(--ease-apple); position: relative; } .nav-links a:hover, .nav-links a.active { color: var(--t-primary); } .nav-links a.active::after { content: ''; position: absolute; bottom: -5px; left: 0; right: 0; height: 1.5px; background: var(--c-gold); border-radius: 1px; } .nav-right { display: flex; align-items: center; gap: 0.5rem; } /* Theme & lang toggles */ .theme-toggle, .lang-toggle { width: 34px; height: 34px; border-radius: var(--r-full); border: 0.5px solid var(--b-subtle); background: transparent; color: var(--t-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--ts-sm); transition: border-color var(--dur-fast) var(--ease-apple), color var(--dur-fast) var(--ease-apple), background var(--dur-fast) var(--ease-apple); } .theme-toggle:hover, .lang-toggle:hover { border-color: var(--b-gold); color: var(--c-gold); background: var(--c-gold-dim); } /* Mobile hamburger */ .nav-burger { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 6px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } .nav-burger span { display: block; width: 20px; height: 1.5px; background: var(--t-primary); border-radius: 1px; transition: transform var(--dur-base) var(--ease-apple), opacity var(--dur-base) var(--ease-apple); } @media (max-width: 768px) { .nav-links { display: none; } .nav-burger { display: flex; } .nav-links.open { display: flex; flex-direction: column; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: var(--s-bg); padding: 2.5rem var(--gutter); gap: 2rem; z-index: 999; overflow-y: auto; } .nav-links.open a { font-size: 1.25rem; font-weight: 500; color: var(--t-primary); min-height: 48px; display: flex; align-items: center; } } /* ============================================================ LAYOUT CONTAINERS ============================================================ */ .section { padding: var(--section-pad) var(--gutter); } .section-sm { padding: var(--section-pad-sm) var(--gutter); } .section-inner { max-width: var(--content-max); margin: 0 auto; } .section-narrow { max-width: var(--content-narrow); margin: 0 auto; } .section-wide { max-width: var(--content-wide); margin: 0 auto; } /* General centered container */ .container { width: 100%; max-width: var(--content-max); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section-header { text-align: center; margin-bottom: clamp(3rem, 6vw, 5rem); } .section-header .eyebrow { margin-bottom: var(--sp-5); } .section-header .headline-lg, .section-header .headline-md { margin-bottom: var(--sp-6); } .section-header .body-lg { max-width: 640px; margin: 0 auto; } /* ============================================================ REVEAL ANIMATIONS All durations and easings defined once via tokens. ============================================================ */ /* Default — slide up */ [data-scrolly="reveal"], .scrolly-reveal { opacity: 0; transform: translateY(32px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } [data-scrolly="reveal"].is-visible, .scrolly-reveal.is-visible { opacity: 1; transform: translateY(0); } /* Scale reveal */ [data-scrolly-type="scale"] { opacity: 0; transform: scale(0.94); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } [data-scrolly-type="scale"].is-visible { opacity: 1; transform: scale(1); } /* Blur reveal */ [data-scrolly-type="blur"] { opacity: 0; filter: blur(8px); transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out), filter var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } [data-scrolly-type="blur"].is-visible { opacity: 1; filter: blur(0); transform: translateY(0); } /* Wipe — horizontal clip */ [data-scrolly-type="wipe"] { clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-reveal) var(--ease-out); } [data-scrolly-type="wipe"].is-visible { clip-path: inset(0 0% 0 0); } /* Fade only (no translate) */ [data-scrolly-type="fade"] { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out); } [data-scrolly-type="fade"].is-visible { opacity: 1; } /* Fade + subtle 20px slide (Apple body text style) */ [data-scrolly-type="fade-slide"] { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } [data-scrolly-type="fade-slide"].is-visible { opacity: 1; transform: translateY(0); } /* Mask — clip-path reveal bottom-to-top */ [data-scrolly-type="mask"] { clip-path: inset(100% 0 0 0); transition: clip-path var(--dur-reveal) var(--ease-out); } [data-scrolly-type="mask"].is-visible { clip-path: inset(0 0 0 0); } /* Slide from left */ [data-scrolly-type="slide-left"] { opacity: 0; transform: translateX(-28px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } [data-scrolly-type="slide-left"].is-visible { opacity: 1; transform: translateX(0); } /* Slide from right */ [data-scrolly-type="slide-right"] { opacity: 0; transform: translateX(28px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } [data-scrolly-type="slide-right"].is-visible { opacity: 1; transform: translateX(0); } /* Split — per character; JS adds .split-char spans */ [data-scrolly-type="split"] .split-char { display: inline-block; opacity: 0; transform: translateY(24px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); } [data-scrolly-type="split"].is-visible .split-char { opacity: 1; transform: translateY(0); } /* Stagger delays — applied by JS or directly in HTML */ .stagger-1 { transition-delay: 0.06s; } .stagger-2 { transition-delay: 0.12s; } .stagger-3 { transition-delay: 0.18s; } .stagger-4 { transition-delay: 0.24s; } .stagger-5 { transition-delay: 0.30s; } .stagger-6 { transition-delay: 0.36s; } .stagger-7 { transition-delay: 0.42s; } .stagger-8 { transition-delay: 0.48s; } .stagger-9 { transition-delay: 0.54s; } .stagger-10 { transition-delay: 0.60s; } /* ============================================================ STICKY SCENE ============================================================ */ .scrolly-sticky { position: relative; } .scrolly-sticky__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Steps — hidden by default; JS manages transitions */ .scrolly-sticky__step { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(16px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); pointer-events: none; } .scrolly-sticky__step.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Side progress dots */ .scrolly-dots { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: var(--z-content); } .scrolly-dots__dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--b-medium); transition: background var(--dur-base) var(--ease-apple), transform var(--dur-base) var(--ease-spring), width var(--dur-base) var(--ease-spring); } .scrolly-dots__dot.is-active { background: var(--c-gold); transform: scale(1.5); } /* ============================================================ PARALLAX / DEPTH LAYERS ============================================================ */ .scrolly-depth { position: relative; overflow: hidden; } .scrolly-depth__layer { position: absolute; inset: -20% 0; will-change: transform; } /* ============================================================ IMAGE SCRUB (crossfade stack) ============================================================ */ .scrolly-scrub { position: relative; width: 100%; height: 100%; overflow: hidden; } .scrolly-scrub__frame { position: absolute; inset: 0; opacity: 0; transition: opacity 0.12s linear; } .scrolly-scrub__frame img { width: 100%; height: 100%; object-fit: cover; } .scrolly-scrub__frame.is-active { opacity: 1; } /* ============================================================ WIPE TRANSITION ============================================================ */ .scrolly-wipe { position: relative; overflow: hidden; } .scrolly-wipe__layer { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: clip-path 0.35s var(--ease-smooth); } .scrolly-wipe__layer.is-revealed { clip-path: inset(0 0 0 0); } /* ============================================================ PHOTO CINEMATIC TREATMENT ============================================================ */ .photo-cinema { position: relative; overflow: hidden; background: var(--s-bg); } /* Image — subtle grading: slight desaturate + contrast lift */ .photo-cinema img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.08) saturate(0.75) brightness(0.88); transition: filter var(--dur-slow) var(--ease-smooth), transform var(--dur-cinematic) var(--ease-smooth); transform-origin: center; } .photo-cinema:hover img { filter: contrast(1.05) saturate(0.90) brightness(0.94); transform: scale(1.025); } /* Vignette — soft, not heavy */ .photo-cinema::before { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse at center, transparent 45%, rgba(0, 0, 0, 0.50) 100% ); pointer-events: none; z-index: 1; } /* Grain overlay — very subtle */ .photo-cinema::after { content: ''; position: absolute; inset: 0; background: url('/shared/img/grain.svg') repeat; background-size: 280px 280px; opacity: 0.045; mix-blend-mode: overlay; pointer-events: none; z-index: 2; } /* Bottom fade variant */ .photo-cinema--fade-bottom::after { background: url('/shared/img/grain.svg') repeat, linear-gradient(to bottom, transparent 55%, var(--s-bg) 100%); background-size: 280px 280px, 100% 100%; opacity: 1; mix-blend-mode: normal; } /* ============================================================ SVG TIMELINE ============================================================ */ .scrolly-timeline { position: relative; } .scrolly-timeline__line { stroke: var(--c-gold); stroke-width: 1.5; fill: none; stroke-dasharray: var(--line-length, 1000); stroke-dashoffset: var(--line-length, 1000); transition: stroke-dashoffset 0.08s linear; } /* ============================================================ COUNTUP ============================================================ */ .scrolly-count { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* ============================================================ CARDS Refined: 24px radius, gentle scale + shadow hover. No big translateY jumps — Apple uses opacity + scale. ============================================================ */ .card { background: var(--s-bg-card); border: 0.5px solid var(--b-subtle); border-radius: var(--r-xl); padding: clamp(1.75rem, 3.5vw, 2.75rem); transition: background var(--dur-base) var(--ease-apple), border-color var(--dur-base) var(--ease-apple), box-shadow var(--dur-base) var(--ease-apple), transform var(--dur-base) var(--ease-apple), opacity var(--dur-base) var(--ease-apple); } .card:hover { background: var(--s-bg-card-hover); border-color: var(--b-medium); box-shadow: var(--shadow-md); transform: scale(1.012); } /* Gold border accent card */ .card--gold { border-color: var(--c-gold-border); } .card--gold:hover { border-color: var(--c-gold); box-shadow: var(--shadow-gold); } /* Elevated card — sits higher */ .card--elevated { box-shadow: var(--shadow-sm); } .card--elevated:hover { box-shadow: var(--shadow-lg); transform: scale(1.016); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); } .card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } .card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* Light theme cards */ [data-theme="light"] .card { background: #ffffff; border-color: rgba(0, 0, 0, 0.07); box-shadow: var(--shadow-xs); } [data-theme="light"] .card:hover { background: #ffffff; box-shadow: var(--shadow-md); border-color: rgba(0, 0, 0, 0.10); } [data-theme="light"] .card--alt { background: var(--s-bg-raised); } /* ============================================================ BUTTONS Refined: 12px radius, no big jumps, feel is opacity+scale. ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.75rem; border-radius: var(--r-md); font-size: var(--ts-sm); font-weight: 550; letter-spacing: -0.01em; cursor: pointer; border: none; min-height: 48px; min-width: 48px; transition: opacity var(--dur-fast) var(--ease-apple), transform var(--dur-fast) var(--ease-apple), box-shadow var(--dur-fast) var(--ease-apple), background var(--dur-fast) var(--ease-apple); } .btn:active { transform: scale(0.97); } /* Primary gold */ .btn-gold { background: var(--c-gold); color: #000000; font-weight: 600; } .btn-gold:hover { opacity: 0.90; box-shadow: var(--shadow-gold); transform: scale(1.02); } /* Outline gold */ .btn-outline { background: transparent; border: 0.5px solid var(--c-gold-border); color: var(--c-gold); } .btn-outline:hover { background: var(--c-gold-dim); border-color: var(--c-gold); transform: scale(1.02); } /* Ghost — white/light border */ .btn-ghost { background: transparent; border: 0.5px solid var(--b-medium); color: var(--t-primary); } .btn-ghost:hover { background: var(--b-subtle); border-color: var(--b-strong); transform: scale(1.02); } /* Small variant */ .btn-sm { padding: 0.5rem 1.25rem; font-size: var(--ts-xs); min-height: 36px; border-radius: var(--r-sm); } /* Large variant */ .btn-lg { padding: 1rem 2.25rem; font-size: var(--ts-base); border-radius: var(--r-lg); min-height: 56px; } /* Icon button */ .btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--r-full); } /* ============================================================ HERO SECTION ============================================================ */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(var(--nav-h) + 3rem) var(--gutter) 5rem; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-content { position: relative; z-index: 2; max-width: 980px; width: 100%; } /* Ambient glow — very subtle */ .hero-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient( circle, var(--c-gold-glow) 0%, transparent 68% ); filter: blur(100px); animation: heroGlowPulse 8s ease-in-out infinite alternate; pointer-events: none; z-index: 0; opacity: 0.6; } @keyframes heroGlowPulse { 0% { opacity: 0.35; transform: scale(1.00); } 100% { opacity: 0.60; transform: scale(1.15); } } .hero-scroll-indicator { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--t-tertiary); font-size: var(--ts-xs); letter-spacing: 0.12em; text-transform: uppercase; animation: scrollChevron 2.2s ease-in-out infinite; } @keyframes scrollChevron { 0%, 100% { transform: translateX(-50%) translateY(0px); opacity: 0.5; } 50% { transform: translateX(-50%) translateY(7px); opacity: 1; } } /* ============================================================ FOOTER ============================================================ */ .footer { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter); border-top: 0.5px solid var(--b-subtle); text-align: center; color: var(--t-tertiary); font-size: var(--ts-sm); } /* ============================================================ HORIZONTAL SCROLL SECTION ============================================================ */ .scrolly-hscroll { overflow: hidden; } .scrolly-hscroll__track { display: flex; gap: 1.5rem; will-change: transform; } .scrolly-hscroll__panel { flex: 0 0 78vw; max-width: 860px; } @media (max-width: 768px) { .scrolly-hscroll__panel { flex: 0 0 90vw; } } /* ============================================================ DIVIDER / SEPARATOR ============================================================ */ .divider { height: 0.5px; background: var(--b-subtle); margin: 0; border: none; } .divider--gold { background: linear-gradient( 90deg, transparent 0%, var(--c-gold-border) 20%, var(--c-gold-border) 80%, transparent 100% ); } /* ============================================================ BADGE / TAG ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.85rem; border-radius: var(--r-full); font-size: var(--ts-xs); font-weight: 600; letter-spacing: 0.04em; border: 0.5px solid var(--b-medium); background: var(--s-bg-card); color: var(--t-secondary); } .badge--gold { border-color: var(--c-gold-border); background: var(--c-gold-dim); color: var(--c-gold); } /* ============================================================ FADE EDGE UTILITY Gradient mask on left/right edges of horizontal scroller. ============================================================ */ .fade-edge { -webkit-mask-image: linear-gradient( to right, transparent 0%, black 8%, black 92%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0%, black 8%, black 92%, transparent 100% ); } .fade-edge--bottom { -webkit-mask-image: linear-gradient( to bottom, black 60%, transparent 100% ); mask-image: linear-gradient( to bottom, black 60%, transparent 100% ); } /* ============================================================ UTILITY CLASSES ============================================================ */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-balance { text-wrap: balance; } /* Apple uses this everywhere */ .text-pretty { text-wrap: pretty; } .text-gold { color: var(--c-gold); } .text-muted { color: var(--t-secondary); } .text-dim { color: var(--t-tertiary); } .text-primary { color: var(--t-primary); } /* Margin top */ .mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); } .mt-10 { margin-top: var(--sp-10); } .mt-12 { margin-top: var(--sp-12); } .mt-16 { margin-top: var(--sp-16); } /* Margin bottom */ .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); } .mb-12 { margin-bottom: var(--sp-12); } /* Display */ .d-flex { display: flex; } .d-grid { display: grid; } .d-none { display: none; } .d-block { display: block; } /* Flex helpers */ .gap-2 { gap: var(--sp-2); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); } .gap-8 { gap: var(--sp-8); } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } /* Content visibility — performance */ .section:not(.hero) { content-visibility: auto; contain-intrinsic-size: auto 600px; } /* Visually hidden (accessibility) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ============================================================ CSS VIEW TIMELINE — Progressive Enhancement Falls back gracefully where unsupported. ============================================================ */ @supports (animation-timeline: view()) { [data-scrolly="reveal"]:not(.js-controlled) { animation: cssRevealSlideUp linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; opacity: 1; transform: none; transition: none; } @keyframes cssRevealSlideUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } [data-scrolly-type="scale"]:not(.js-controlled) { animation: cssRevealScale linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; opacity: 1; transform: none; transition: none; } @keyframes cssRevealScale { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } [data-scrolly-type="fade"]:not(.js-controlled) { animation: cssRevealFade linear both; animation-timeline: view(); animation-range: entry 0% entry 25%; opacity: 1; transition: none; } @keyframes cssRevealFade { from { opacity: 0; } to { opacity: 1; } } } /* ============================================================ REDUCED MOTION — Accessibility ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-scrolly="reveal"], .scrolly-reveal, [data-scrolly-type="scale"], [data-scrolly-type="blur"], [data-scrolly-type="wipe"], [data-scrolly-type="fade"], [data-scrolly-type="slide-left"], [data-scrolly-type="slide-right"], [data-scrolly-type="fade-slide"], [data-scrolly-type="mask"], .scrolly-depth__layer, .mask-reveal__inner, .mask-reveal-word__inner { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } .hero-glow { animation: none; opacity: 0.4; } .hero-scroll-indicator { animation: none; } } /* ============================================================ RESPONSIVE ============================================================ */ /* Tablet */ @media (min-width: 769px) and (max-width: 1024px) { :root { --section-pad: clamp(60px, 9vw, 110px); } } /* Mobile */ @media (max-width: 768px) { :root { --section-pad: clamp(48px, 10vw, 72px); --section-pad-sm: clamp(32px, 7vw, 48px); --nav-h: 54px; --gutter: 1.25rem; } /* Mobile type is already fluid via clamp — override floor if needed */ .headline-xl { letter-spacing: -0.03em; } .headline-lg { letter-spacing: -0.028em; } /* All touch targets at least 48px */ .btn, .theme-toggle, .lang-toggle { min-height: 48px; min-width: 48px; } /* Disable sticky scroll scenes on mobile — render as vertical flow */ .scrolly-sticky__pin { position: relative; height: auto; min-height: auto; } .scrolly-sticky__step { position: relative; opacity: 1; transform: none; pointer-events: auto; padding: 2rem 0; } .scrolly-dots { display: none; } /* Disable parallax layers on mobile */ .scrolly-depth__layer { position: relative; inset: auto; transform: none !important; } /* Simplify character-split animations on mobile */ [data-scrolly-type="split"] .split-char { display: inline; opacity: 1; transform: none; transition: none; } /* Mask reveal still works, just simpler */ .mask-reveal-word { overflow: visible; } .mask-reveal-word__inner { transform: none; transition: none; } .mask-reveal-word.is-visible .mask-reveal-word__inner { transform: none; } /* Card grid — single column on narrow mobile */ .card-grid, .card-grid--2, .card-grid--3 { grid-template-columns: 1fr; } /* Horizontal scroller panels */ .scrolly-hscroll__panel { flex: 0 0 90vw; } } /* Very small screens */ @media (max-width: 374px) { :root { --gutter: 1rem; } }