/* ═══════════════════════════════════════════════════════════════════════════ VIBE OS 4.0 — LIQUID GLASS DESIGN SYSTEM Inspired by Apple 2026 "Liquid Glass" design language Direction : Real material depth — translucent, specular, physical Colors : Deep Space black + f5f5f7 white + lime accent (10% rule) Type : Cairo (AR) / DM Sans (EN) — massive, confident scale Anti-patterns removed: gradient text, neon-on-dark, card spam, flat editorial, corporate blue, student aesthetics ═══════════════════════════════════════════════════════════════════════════ Load order: after ALL other CSS (must be last in every page ) ═══════════════════════════════════════════════════════════════════════════ */ /* ── LIQUID GLASS TOKENS ─────────────────────────────────────────────────── */ :root { /* Deep Space — blue-tinted black (Apple's deepest dark) */ --lg-bg: #04060e; --lg-surface: rgba(255,255,255,0.045); --lg-surface-2: rgba(255,255,255,0.075); /* Liquid Glass recipe — the real material */ --glass-fill: linear-gradient(145deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 100%); --glass-border: rgba(255,255,255,0.12); --glass-top: rgba(255,255,255,0.26); /* specular top edge */ --glass-blur: blur(40px) saturate(200%) brightness(1.06); --glass-shadow: 0 0 0 0.5px rgba(255,255,255,0.06) inset, /* inner ambient */ 0 1px 0 rgba(255,255,255,0.18) inset, /* top highlight */ 0 32px 80px rgba(0,0,0,0.55), /* depth shadow */ 0 4px 16px rgba(0,0,0,0.28); /* near shadow */ /* Text — Apple's f5f5f7 white */ --vs-text: #f5f5f7; --vs-text-2: rgba(245,245,247,0.60); --vs-text-3: rgba(245,245,247,0.35); /* Accent — lime — max once per section */ --vs-lime: #a3cf2b; --vs-lime-glow: rgba(163,207,43,0.18); --vs-lime-subtle: rgba(163,207,43,0.08); /* Structural hairlines */ --vs-line: rgba(255,255,255,0.07); --vs-line-strong: rgba(255,255,255,0.13); --vs-line-accent: rgba(163,207,43,0.22); /* Fluid type scale */ --vs-t-display: clamp(3.5rem, 10vw, 9rem); /* hero main heading */ --vs-t-hero: clamp(2.2rem, 5vw, 4.5rem); /* secondary hero */ --vs-t-h1: clamp(2rem, 4vw, 3.8rem); --vs-t-h2: clamp(1.5rem, 3vw, 2.6rem); --vs-t-body: clamp(1rem, 1.4vw, 1.125rem); --vs-t-small: 0.875rem; --vs-t-xs: 0.72rem; /* Motion */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.16, 1.00, 0.30, 1); --ease-out: cubic-bezier(0.00, 0.00, 0.20, 1); /* Layout rhythm */ --vs-gutter: clamp(20px, 5vw, 80px); --vs-section-v: clamp(80px, 10vw, 140px); /* Backward-compat aliases for existing sovereign vars */ --vs-bg: var(--lg-bg); --vs-surface: var(--lg-surface); --vs-lime-dim: #8aad22; --vs-lime-bg: var(--vs-lime-subtle); --vs-red: #d93a00; --vs-red-bg: rgba(217,58,0,0.08); --vs-surface-2: var(--lg-surface-2); --vs-surface-3: rgba(255,255,255,0.10); --vs-text-2: var(--vs-text-2); --vs-text-3: var(--vs-text-3); --vs-sp-1: 8px; --vs-sp-2: 16px; --vs-sp-3: 24px; --vs-sp-4: 32px; --vs-sp-6: 48px; --vs-sp-8: 64px; --vs-sp-12: 96px; --vs-sp-16: 128px; } /* ── GLOBAL BODY OVERRIDE ────────────────────────────────────────────────── */ /* html holds the solid background — body is transparent so body::before gradient shows */ html { background: var(--lg-bg); } body { background: transparent !important; color: var(--vs-text) !important; font-family: 'Cairo', 'Tajawal', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Hide OS cursor on ALL elements — one custom cursor only */ html, body, *, *::before, *::after { cursor: none !important; } html.lang-en body { font-family: 'DM Sans', 'Outfit', 'Inter', sans-serif; } /* ── CUSTOM CURSOR — Apple precision dot ────────────────────────────────── */ /* Note: supreme-v5.js uses .vs-cursor as a blob — z-index managed in infinity-protocol.css */ .vs-cursor { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: rgba(255,255,255,0.92); border-radius: 50%; pointer-events: none; z-index: 9999999; /* Must be above noise layer */ transform: translate(-50%, -50%); transition: width 0.15s var(--ease-smooth), height 0.15s var(--ease-smooth), opacity 0.2s ease; mix-blend-mode: difference; } .vs-cursor-ring { position: fixed; top: 0; left: 0; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,0.30); border-radius: 50%; pointer-events: none; z-index: 9999998; /* Just below cursor dot, above everything else */ transform: translate(-50%, -50%); transition: transform 0.28s var(--ease-smooth), width 0.28s var(--ease-smooth), height 0.28s var(--ease-smooth), opacity 0.25s ease, border-color 0.2s ease; } body:has(a:hover, button:hover) .vs-cursor-ring { width: 48px; height: 48px; border-color: rgba(163,207,43,0.5); } /* ── LIQUID GLASS NAV — macOS menu bar ───────────────────────────────────── */ .vibe-nav { background: rgba(4,6,14,0.72) !important; border-bottom: 1px solid var(--vs-line) !important; -webkit-backdrop-filter: blur(40px) saturate(160%) !important; backdrop-filter: blur(40px) saturate(160%) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 4px 24px rgba(0,0,0,0.3) !important; height: 60px !important; } .vibe-nav.scrolled { background: rgba(4,6,14,0.88) !important; } /* Reset pill-nav to flat Apple style */ .vn-links { background: transparent !important; border: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; gap: 2px !important; padding: 0 !important; animation: none !important; opacity: 1 !important; } .vn-links::after { display: none !important; } .vn-glider { display: none !important; } .vn-link { color: var(--vs-text-2) !important; font-size: 13.5px !important; font-weight: 500 !important; padding: 7px 13px !important; border-radius: 8px !important; letter-spacing: -0.01em !important; text-transform: none !important; transition: background 0.15s ease, color 0.15s ease !important; } .vn-link::after { display: none !important; } /* remove underline indicator */ .vn-link:hover, .vn-link:focus-visible { background: rgba(255,255,255,0.08) !important; color: var(--vs-text) !important; } .vn-link.active, .vn-link[aria-current="page"] { background: rgba(255,255,255,0.08) !important; color: var(--vs-text) !important; font-weight: 600 !important; } .vn-store-link { color: var(--vs-lime) !important; } /* CTA — glass lime button */ .vn-cta { background: rgba(163,207,43,0.88) !important; color: #04060e !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 700 !important; padding: 8px 17px !important; letter-spacing: -0.01em !important; text-transform: none !important; overflow: visible !important; box-shadow: 0 2px 8px rgba(163,207,43,0.22), 0 1px 0 rgba(255,255,255,0.22) inset !important; transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease, background 0.15s ease !important; } .vn-cta::before { display: none !important; } .vn-cta:hover { transform: scale(1.04) !important; background: rgba(163,207,43,1) !important; box-shadow: 0 6px 20px rgba(163,207,43,0.30) !important; } /* Icon buttons */ .vn-btn { background: rgba(255,255,255,0.05) !important; border: 1px solid var(--vs-line) !important; color: var(--vs-text-2) !important; border-radius: 8px !important; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important; } .vn-btn:hover { background: rgba(255,255,255,0.09) !important; border-color: var(--vs-line-strong) !important; color: var(--vs-text) !important; box-shadow: none !important; transform: none !important; } /* Logo */ .vn-logo-text { font-family: 'DM Sans', 'Outfit', sans-serif !important; font-weight: 900 !important; letter-spacing: -0.04em !important; } /* Mobile nav */ .vn-mobile { background: rgba(4,6,14,0.95) !important; -webkit-backdrop-filter: blur(40px) !important; backdrop-filter: blur(40px) !important; border-bottom: 1px solid var(--vs-line) !important; } .vn-mob-link { color: var(--vs-text-2); font-size: var(--vs-t-small); font-weight: 500; padding: 14px 20px; border-bottom: 1px solid var(--vs-line); transition: color 0.15s ease; } .vn-mob-link:hover { color: var(--vs-text); } /* ── SCROLLING TICKER ────────────────────────────────────────────────────── */ .vs-ticker { background: rgba(255,255,255,0.02); border-top: 1px solid var(--vs-line); border-bottom: 1px solid var(--vs-line); padding: 9px 0; overflow: hidden; } .vs-ticker-inner { display: flex; white-space: nowrap; animation: vs-scroll 30s linear infinite; will-change: transform; } .vs-ticker span { display: inline-block; padding: 0 22px; font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--vs-text-3); } .vs-tick-accent { color: var(--vs-lime) !important; } @keyframes vs-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── OLD HERO HIDDEN ─────────────────────────────────────────────────────── */ .hero { display: none !important; } /* ══════════════════════════════════════════════════════════════════════════ VIBE HERO — "الكلمة هي التصميم" The rotating word fills the viewport — nothing else matters. Scale: line-2 at 20vw = 320px on 1600px screen Reference: Figma, Vercel, Stripe, Linear — world-class hero pattern ══════════════════════════════════════════════════════════════════════════ */ /* ── HERO SHELL ──────────────────────────────────────────────────────────── */ .vsh { position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 clamp(20px, 5vw, 80px) clamp(40px, 5vw, 72px); overflow: hidden; background: var(--lg-bg); } /* ── CINEMATIC AMBIENT ORBS ──────────────────────────────────────────────── */ .vsh-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(120px); } .vsh-orb-1 { width: 60vw; height: 60vw; top: -20%; right: -10%; background: radial-gradient(ellipse, rgba(163,207,43,0.07) 0%, transparent 70%); } .vsh-orb-2 { width: 50vw; height: 50vw; bottom: -10%; left: -8%; background: radial-gradient(ellipse, rgba(0,137,123,0.06) 0%, transparent 70%); } .vsh-orb-3 { width: 30vw; height: 30vw; top: 30%; left: 30%; background: radial-gradient(ellipse, rgba(163,207,43,0.025) 0%, transparent 70%); filter: blur(80px); } /* ── INNER CONTAINER ─────────────────────────────────────────────────────── */ .vsh-inner { position: relative; z-index: 2; width: 100%; max-width: 1600px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; } /* ── EYEBROW ─────────────────────────────────────────────────────────────── */ .vsh-eyebrow { display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vs-text-3); margin-bottom: clamp(24px, 3.5vw, 40px); opacity: 0; animation: vsh-rise 0.8s var(--ease-smooth) 0.1s forwards; } .vsh-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; flex-shrink: 0; position: relative; } /* Pulse ring — separate element, GPU composited via opacity+scale only */ .vsh-dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; background: #34d399; opacity: 0; animation: vsh-pulse 2s ease-in-out infinite; will-change: opacity, transform; } @keyframes vsh-pulse { 0% { opacity: 0.55; transform: scale(1); } 70% { opacity: 0; transform: scale(2.4); } 100% { opacity: 0; transform: scale(1); } } .vsh-esep { color: var(--vs-line-strong); } .vsh-avail-label { color: #34d399; } /* ── THE STATEMENT — 3 lines of architecture ─────────────────────────────── */ .vsh-line { display: flex; justify-content: center; width: 100%; line-height: 1.1; letter-spacing: -0.04em; font-weight: 800; text-align: center !important; margin: 0 auto; } /* Line 1: "أصنع" — white, slightly smaller */ .vsh-line-static { font-size: clamp(2.5rem, 5vw, 4.5rem); color: var(--vs-text); opacity: 0; animation: vsh-rise 0.9s var(--ease-smooth) 0.22s forwards; } /* Line 2: THE rotating word — LIME, MASSIVE, fills the screen */ .vsh-line-word { font-size: clamp(3.5rem, 7vw, 6.5rem); margin: 0 auto; color: var(--vs-lime); opacity: 0; animation: vsh-rise 0.9s var(--ease-smooth) 0.36s forwards; will-change: opacity, transform; /* Lime glow — the word radiates light */ text-shadow: 0 0 60px rgba(163,207,43,0.15), 0 0 120px rgba(163,207,43,0.06); } .vsh-rotating-word { display: inline-block; min-width: 0.4em; position: relative; transition: opacity 0.25s ease, transform 0.3s var(--ease-spring); } /* Blinking cursor — typed feel */ .vsh-rotating-word::after { content: ''; display: inline-block; width: clamp(3px, 0.6vw, 8px); height: 0.75em; background: var(--vs-lime); margin-right: 6px; margin-left: 2px; vertical-align: middle; transform: translateY(-0.04em); animation: vsh-blink 1s step-end infinite; } @keyframes vsh-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Line 3: "تغيّر العالم." — dimmer, italic feel */ .vsh-line-suffix { font-size: clamp(1.8rem, 4vw, 3.5rem); color: var(--vs-text-2); font-weight: 700; letter-spacing: -0.02em; margin-top: clamp(8px, 1vw, 16px); opacity: 0; animation: vsh-rise 0.9s var(--ease-smooth) 0.5s forwards; } /* ── HORIZONTAL DIVIDER ──────────────────────────────────────────────────── */ .vsh-divider { display: none; /* Removed for Apple-like cleaner look */ } /* ── BOTTOM STRIP ────────────────────────────────────────────────────────── */ .vsh-bottom { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vw, 32px); margin-top: clamp(32px, 5vw, 64px); opacity: 0; animation: vsh-rise 0.9s var(--ease-smooth) 0.75s forwards; } /* Photo — liquid glass frame */ .vsh-photo-col { flex-shrink: 0; } .vsh-photo-glass { width: clamp(100px, 14vw, 220px); border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-border); border-top-color: var(--glass-top); box-shadow: var(--glass-shadow); position: relative; } .vsh-photo-glass::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); z-index: 2; } .vsh-photo { width: 100%; height: auto; display: block; filter: contrast(1.06) brightness(0.94); } /* Info column: description + CTAs */ .vsh-info-col { display: flex; flex-direction: column; gap: 20px; } .vsh-desc { font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--vs-text-2); line-height: 1.7; max-width: 60ch; margin: 0 auto; text-align: center; } .vsh-desc strong { color: var(--vs-text); font-weight: 700; } .vsh-ctas { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; } .vsh-btn-primary, .vsh-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 12px; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease; cursor: pointer; } .vsh-btn-primary { background: rgba(163,207,43,0.92); color: #04060e; border: none; box-shadow: 0 2px 8px rgba(163,207,43,0.22), 0 1px 0 rgba(255,255,255,0.22) inset; } .vsh-btn-primary:hover { transform: scale(1.04) translateY(-2px); background: #a3cf2b; box-shadow: 0 12px 32px rgba(163,207,43,0.30); color: #04060e; } .vsh-btn-ghost { background: linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.12); border-top-color: rgba(255,255,255,0.25); color: var(--vs-text); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .vsh-btn-ghost:hover { transform: scale(1.04) translateY(-2px); border-color: rgba(163,207,43,0.35); box-shadow: 0 12px 32px rgba(0,0,0,0.28); color: var(--vs-text); } /* Stats column */ .vsh-stats-col { display: flex; flex-direction: row; justify-content: center; gap: 16px; margin-top: 24px; } .vsh-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 32px; background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)); border: 1px solid var(--vs-line); border-top-color: rgba(255,255,255,0.12); border-radius: 16px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .vsh-stat-n { font-size: 1.4rem; font-weight: 900; line-height: 1; color: var(--vs-text); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .vsh-stat-l { font-size: 12px; font-weight: 500; letter-spacing: 0.05em; color: var(--vs-text-3); } /* ── ENTRANCE ANIMATION ──────────────────────────────────────────────────── */ @keyframes vsh-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* Legacy animation classes still used elsewhere */ .vs-animate-1, .vs-animate-2, .vs-animate-3, .vs-animate-4, .vs-animate-5 { opacity: 0; animation: vsh-rise 0.75s var(--ease-smooth) forwards; } .vs-animate-1 { animation-delay: 0.08s; } .vs-animate-2 { animation-delay: 0.18s; } .vs-animate-3 { animation-delay: 0.32s; } .vs-animate-4 { animation-delay: 0.48s; } .vs-animate-5 { animation-delay: 0.65s; } /* ── MOBILE ──────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .vsh-bottom { gap: 32px; } .vsh-photo-col { display: none; } .vsh-stats-col { flex-wrap: wrap; justify-content: center; } .vsh-stat { flex: 1; min-width: 140px; } } @media (max-width: 640px) { .vsh { padding-bottom: 48px; padding-top: 80px; justify-content: center; } .vsh-line-static { font-size: clamp(2.5rem, 15vw, 4rem); } .vsh-line-word { font-size: clamp(3rem, 18vw, 5rem); } .vsh-line-suffix { font-size: clamp(1.8rem, 8vw, 2.5rem); } .vsh-ctas { flex-direction: column; width: 100%; } .vsh-btn-primary, .vsh-btn-ghost { width: 100%; justify-content: center; } } /* ── TICKER compat ───────────────────────────────────────────────────────── */ .vs-trust-sep { color: var(--vs-line-strong); } /* ── GLOBAL LIQUID GLASS CARDS — site-wide upgrade ───────────────────────── */ .glass-card, .service-card, .srv-card, .feature-card, .milestone-card, .port-card, .spec-card, .info-card { background: var(--glass-fill) !important; border: 1px solid var(--glass-border) !important; border-top-color: var(--glass-top) !important; border-radius: 20px !important; -webkit-backdrop-filter: var(--glass-blur) !important; backdrop-filter: var(--glass-blur) !important; box-shadow: var(--glass-shadow) !important; position: relative; overflow: hidden; padding: clamp(24px, 4vw, 40px); } /* Specular line on every glass card */ .glass-card::before, .service-card::before, .srv-card::before, .feature-card::before, .milestone-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent); z-index: 1; pointer-events: none; } .glass-card:hover, .service-card:hover, .srv-card:hover, .feature-card:hover { transform: translateY(-6px) !important; border-color: rgba(255,255,255,0.16) !important; box-shadow: 0 0 0 0.5px rgba(255,255,255,0.08) inset, 0 1px 0 rgba(255,255,255,0.22) inset, 0 48px 100px rgba(0,0,0,0.6), 0 8px 24px rgba(163,207,43,0.07) !important; } /* ── SECTION TYPOGRAPHY UPGRADE ──────────────────────────────────────────── */ .section-title, h2.section-title { font-size: clamp(2rem, 4.5vw, 3.5rem) !important; font-weight: 900 !important; letter-spacing: -0.03em !important; line-height: 1.1 !important; color: var(--vs-text) !important; } .section-desc, p.section-desc { color: var(--vs-text-2) !important; font-size: clamp(1rem, 1.5vw, 1.125rem) !important; line-height: 1.8 !important; } /* Section tags — glass pill */ .section-tag, .srv-hero-tag, .port-tag, .courses-tag { background: rgba(163,207,43,0.07) !important; border: 1px solid rgba(163,207,43,0.18) !important; color: var(--vs-lime) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; } /* ── GLOBAL BUTTON OVERRIDE ──────────────────────────────────────────────── */ .btn-primary, a.btn-primary, button.btn-primary { background: rgba(163,207,43,0.92) !important; color: #04060e !important; border: none !important; border-radius: 12px !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: -0.01em !important; text-transform: none !important; padding: 13px 26px !important; box-shadow: 0 2px 8px rgba(163,207,43,0.22), 0 1px 0 rgba(255,255,255,0.22) inset !important; transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease, background 0.15s ease !important; filter: none !important; } .btn-primary:hover { transform: scale(1.04) translateY(-1px) !important; box-shadow: 0 10px 28px rgba(163,207,43,0.28) !important; background: rgba(163,207,43,1) !important; color: #04060e !important; } .btn-outline, a.btn-outline, button.btn-outline { background: var(--glass-fill) !important; border: 1px solid var(--glass-border) !important; border-top-color: var(--glass-top) !important; color: var(--vs-text) !important; border-radius: 12px !important; font-weight: 600 !important; font-size: 15px !important; letter-spacing: -0.01em !important; text-transform: none !important; padding: 12px 26px !important; -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.12) inset !important; transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease !important; } .btn-outline:hover { transform: scale(1.04) translateY(-1px) !important; border-color: rgba(163,207,43,0.38) !important; box-shadow: 0 10px 28px rgba(0,0,0,0.28) !important; color: var(--vs-text) !important; } /* ── VIBE-HIGHLIGHT ──────────────────────────────────────────────────────── */ .vibe-highlight { color: var(--vs-lime) !important; } /* ── GRADIENT TEXT — upgrade from old gradient ───────────────────────────── */ .text-gradient, .title-accent, .gradient-text { background: linear-gradient(135deg, #a3cf2b 0%, #00e5c8 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ── FOOTER — Liquid Glass ───────────────────────────────────────────────── */ .vibe-footer { background: rgba(255,255,255,0.02) !important; border-top: 1px solid var(--vs-line) !important; } .vf-bottom { border-top: 1px solid var(--vs-line) !important; } /* ── JOURNEY/TIMELINE ────────────────────────────────────────────────────── */ .milestone-card { transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease !important; } .milestone-orb { background: var(--glass-fill); border: 1px solid var(--glass-border); border-top-color: var(--glass-top); box-shadow: var(--glass-shadow); color: var(--vs-text) !important; font-weight: 800 !important; } /* ── PROFILE PHOTO (index hero fallback) ─────────────────────────────────── */ .vs-avail-dot, .avail-pulse { background: #34d399 !important; } /* ── PAGE TRANSITION ─────────────────────────────────────────────────────── */ .page-transition-overlay { background: var(--lg-bg) !important; } /* ── STAT COUNTERS (old system) ──────────────────────────────────────────── */ .stat-num-v2 { color: var(--vs-lime) !important; } /* ── SCROLLBAR ───────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(163,207,43,0.25); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(163,207,43,0.5); } /* ── SELECTION ───────────────────────────────────────────────────────────── */ ::selection { background: rgba(163,207,43,0.2); color: #f5f5f7; } /* ── AMBIENT ORB (existing system compat) ────────────────────────────────── */ .ambient-orb { opacity: 0.6; } /* ── RESPONSIVE — MOBILE ─────────────────────────────────────────────────── */ @media (max-width: 900px) { .vs-hero-body { grid-template-columns: 1fr; gap: 40px; } .vs-hero-photo-wrap { display: none; /* photo in stats area on mobile */ } .vs-hero-h1 { font-size: clamp(3rem, 14vw, 5.5rem); } } @media (max-width: 640px) { .vs-hero { padding: 70px 20px 50px; } .vs-hero-h1 { font-size: clamp(2.6rem, 16vw, 4.5rem); gap: 0.15em; } .vs-hero-stats { flex-wrap: wrap; gap: 8px; } .vs-stat { min-width: calc(50% - 4px); flex: none; padding: 16px 16px; } .vs-cta-row { flex-direction: column; gap: 10px; } .vs-btn { width: 100%; justify-content: center; } .vs-trust-bar { gap: 12px; font-size: 10px; } } /* ── PREFERS REDUCED MOTION ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .vs-animate-1, .vs-animate-2, .vs-animate-3, .vs-animate-4, .vs-animate-5 { opacity: 1 !important; transform: none !important; animation: none !important; } .vs-ticker-inner { animation-play-state: paused !important; } .vs-avail-dot { animation: none !important; } .vs-word-rotate::after { animation: none !important; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ═══════════════════════════════════════════════════════════════════════════ PHASE OMEGA: SCROLL-DRIVEN ARCHITECTURE (APPLE VISION) ═══════════════════════════════════════════════════════════════════════════ */ @supports (animation-timeline: view()) { .vsh { view-timeline-name: --vsh-hero; view-timeline-axis: block; } .vsh-inner { transform-origin: 50% 50%; animation: cinematicHeroFadeOut linear both; animation-timeline: --vsh-hero; animation-range: exit-crossing 0% exit-crossing 100%; will-change: transform, opacity, filter; } } @keyframes cinematicHeroFadeOut { 0% { transform: scale(1) translateY(0); opacity: 1; filter: blur(0px); } 100% { transform: scale(0.65) translateY(-50px); opacity: 0; filter: blur(40px); } } /* ══════════════════════════════════════════════════════════════════════════ CROSS-DOCUMENT PAGE TRANSITIONS — @view-transition (all pages) Declared in sovereign because sovereign loads on EVERY page. Source + destination both need this rule for the transition to fire. ══════════════════════════════════════════════════════════════════════════ */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }