/* * ═══════════════════════════════════════════════════════════════════════════ * LUNARA — UNIFIED CSS * All 6 pages merged into one file for Laravel integration. * * Usage in layouts/app.blade.php: * * * * * * Each page blade template needs a body class: * Home: * Features: * Pricing: * About: * Journal: * Download: * * Structure: * 1. Reset * 2. Unified :root variables (all tokens merged) * 3. Global shared styles (nav, footer, buttons, reveal animations) * 4. Shared utility classes * 5. @keyframes (deduplicated — all 38 animations) * 6. Page-specific styles (scoped by body.page-X) * 7. Accessibility — prefers-reduced-motion (WCAG 2.1 SC 2.3.3) * * Z-INDEX SCALE (do not use values outside this set): * 1 — stacking context for content layers * 10 — dropdowns, tooltips * 200 — back-to-top button, sticky sub-headers * 300 — modals / drawers * 301 — modal close buttons * 9000 — custom cursor (#cursor, #cursor-ring) * 9999 — skip-to-content, notification toasts * ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ 1. RESET ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ═══════════════════════════════════════════════════════════════ 2. UNIFIED :ROOT DESIGN TOKENS All variables from all 6 pages merged into one master token set. ═══════════════════════════════════════════════════════════════ */ :root { /* ── Core palette ── */ --cream: #fdf9f4; --cream-warm: #f8f1e8; --cream-warm2: #f8f2e9; --paper: #f4ede2; --ivory: #fdfbf8; --bg: #f8f4ef; --bg-warm: #f3ede5; /* ── Ink / dark tones ── */ --ink: #1c1624; --ink-dark: #18121f; --ink-mid: #3d3250; --ink-soft: #7b6e8f; --dusk: #2e2535; --dusk-mid: #5a4e6b; --dusk-light: #8e82a0; /* ── Lavender family ── */ --lavender: #c8bfe7; --lavender-light: #ede9f8; --lav: #c8bfe7; --lav-deep: #8b7cba; --violet: #c4b8de; --violet-deep: #8b7cba; /* ── Peach / rose family ── */ --peach: #f0c9b8; --peach-light: #fce8de; --peach-deep: #c98472; --rose: #e8c4c0; --rose-deep: #c9837a; /* ── Neutrals ── */ --gold: #d9bc94; --gold-light: #efe2cc; --gold-light2: #ede0cc; --sage: #b8cfc4; --mint: #c3e0d4; --blue-soft: #bdd5ea; /* ── Home-page specific text tokens ── */ --text-dark: #2a2230; --text-mid: #4e2a7b; /* ── Glass effects ── */ --glass-bg: rgba(255,255,255,0.55); --glass-border: rgba(255,255,255,0.75); --glass: rgba(255,255,255,0.52); --glass-b: rgba(255,255,255,0.72); /* ── Shadows ── */ --shadow-soft: 0 8px 40px rgba(140,120,180,0.10); --shadow-card: 0 20px 60px rgba(140,120,180,0.14); --sh-soft: 0 8px 48px rgba(46,37,53,0.08); --sh-card: 0 24px 72px rgba(46,37,53,0.13); --sh-float: 0 40px 100px rgba(46,37,53,0.18); --sh-glow: 0 0 80px rgba(139,124,186,0.30); /* ── Border radii ── */ --radius-card: 28px; --radius-pill: 100px; --r-card: 28px; --r-pill: 999px; /* ── Feature accent colors (features page) ── */ --sleep-from: #b8aee0; --sleep-to: #8e7fd4; --feed-from: #f5c9b3; --feed-to: #e8956e; --growth-from: #bdd5ea; --growth-to: #7ab0d4; --mile-from: #d4c9f0; --mile-to: #4b3393; --health-from: #c3e0d4; --health-to: #7abfa5; --ai-from: #f0d4e8; --ai-to: #d4a8c7; } /* ═══════════════════════════════════════════════════════════════ 3. GLOBAL BASE STYLES ═══════════════════════════════════════════════════════════════ */ html { scroll-behavior: smooth; } body { /* font-family: 'DM Sans', sans-serif; */ font-family: 'Archivo', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Default light body (home, features, journal) */ body.page-home, body.page-features, body.page-journal { background: var(--cream); color: var(--text-dark); } /* Pricing uses warm bg + custom cursor */ body.page-pricing { background: var(--bg); color: var(--dusk); } /* cursor:none only applied when JS confirms #cursor element exists */ body.page-pricing.js-cursor { cursor: none; } /* Contact uses same warm bg, normal cursor */ body.page-contact { background: var(--bg); color: var(--dusk); } /* Article/journal pages */ body.page-six-month-sleep-schedule { background: var(--bg); color: var(--text-dark); } /* About opens dark */ body.page-about { background: var(--ink); color: var(--cream); } /* Download is full dark */ body.page-download { background: var(--ink-dark); color: var(--cream); } /* ═══════════════════════════════════════════════════════════════ 4. SHARED COMPONENTS — NAV ═══════════════════════════════════════════════════════════════ */ /* ── Universal base: works on EVERY page regardless of body class ── */ #main-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 12px 48px 12px 0; transition: padding 0.4s ease, background 0.4s ease, box-shadow 0.4s ease; background: #1c1624; } .nav-right { display: flex; align-items: center; gap: 32px; } @media (max-width: 900px) { #main-nav { padding: 10px 20px 10px 0; } } /* ── Logo image: universal consistent sizing ── */ .nav-logo-img, .nd-logo-img { height: 48px; width: auto; display: block; object-fit: contain; } /* ── Hamburger spans: universal fallback colour ── */ .nav-hamburger span { background: #1e1928; } /* ── Light nav (home, features, pricing, journal) ── */ body.page-home nav, body.page-features nav, body.page-pricing nav, body.page-journal nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 12px 48px; background: rgba(253,249,244,0.72); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border-bottom: 1px solid rgba(200,191,231,0.18); transition: all 0.4s ease; } body.page-home nav.scrolled, body.page-features nav.scrolled, body.page-pricing nav.scrolled, body.page-six-month-sleep-schedule nav.scrolled, body.page-journal nav.scrolled { padding: 10px 48px 10px 0; background: rgba(253,249,244,0.90); box-shadow: 0 4px 30px rgba(140,120,180,0.08); } body.page-home .hero-eyebrow{ display: inline-flex; align-items: center; gap: 8px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 8px 18px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; color: var(--text-mid); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 32px; animation: fade-up 0.9s ease both; animation-delay: 0.1s; } /* ── Dark nav (about, download) ── */ body.page-about nav, body.page-download nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 12px 56px; transition: all 0.5s ease; } body.page-about nav.scrolled { padding: 10px 56px 10px 0; background: rgba(28,22,36,0.80); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border-bottom: 1px solid rgba(200,191,231,0.10); } body.page-about nav.light-nav { background: rgba(253,249,244,0.80); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border-bottom: 1px solid rgba(200,191,231,0.18); } body.page-about nav.light-nav .logo { color: var(--ink); } body.page-about nav.light-nav .nav-links a { color: var(--ink-soft); } body.page-about nav.light-nav .nav-btn { background: var(--ink); color: var(--ivory); } body.page-download nav.scrolled { padding: 10px 56px 10px 0; background: rgba(24,18,31,0.85); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border-bottom: 1px solid rgba(200,191,231,0.10); box-shadow: 0 2px 40px rgba(0,0,0,0.25); } /* ── Logo shared ── */ .logo, .nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; text-decoration: none; display: flex; align-items: center; gap: 10px; letter-spacing: 0.02em; transition: color 0.4s; padding: 0 0 0 24px; } body.page-home .nav-logo, body.page-features .nav-logo { font-size: 26px; color: var(--text-dark); } body.page-pricing .logo { color: var(--dusk); } body.page-about .logo { color: var(--cream); } body.page-download .logo { color: var(--cream); } body.page-journal .logo { color: var(--ink); } .logo-gem, .nav-logo-dot { width: 8px; height: 8px; border-radius: 2px; background: linear-gradient(135deg, var(--lav-deep), var(--peach-deep)); transform: rotate(45deg); animation: gem-spin 8s ease-in-out infinite; } .logo-gem { border-radius: 2px; transform: rotate(45deg); animation: gem-pulse 3.5s ease-in-out infinite; } /* ── Nav links shared ── */ .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; } .nav-links a { font-size: 14px; font-weight: 400; text-decoration: none; letter-spacing: 0.01em; transition: color 0.3s ease; position: relative; } body.page-home .nav-links a, body.page-pricing .nav-links a { color: rgba(253, 249, 244, 0.65); } body.page-features .nav-links a { color: rgba(253, 249, 244, 0.65); } body.page-journal .nav-links a { color: rgba(253, 249, 244, 0.65); } body.page-contact .nav-links a { color: var(--dusk, #3d3250); } body.page-about .nav-links a { color: var(--dusk-mid); } body.page-download .nav-links a { color: rgba(253,249,244,0.65); } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: linear-gradient(90deg, var(--lav-deep), var(--peach-deep)); transition: width 0.35s ease; } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } body.page-home .nav-links a:hover, body.page-features .nav-links a:hover, body.page-journal .nav-links a:hover { color: #fdf9f4; } body.page-about .nav-links a.active, body.page-about .nav-links a:hover { color: var(--cream); } body.page-download .nav-links a:hover, body.page-download .nav-links a.active { color: var(--cream); } /* ── Hamburger button (desktop: hidden; mobile: visible) ── */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 8px; border-radius: 10px; position: relative; z-index: 301; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .nav-hamburger span { display: block; width: 22px; height: 1.5px; border-radius: 2px; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease, width 0.3s ease; transform-origin: center; } /* X shape when active */ .nav-hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-hamburger.active span:nth-child(2) { opacity: 0; width: 0; } .nav-hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Span colours — light pages */ body.page-home .nav-hamburger span, body.page-features .nav-hamburger span, body.page-journal .nav-hamburger span, body.page-pricing .nav-hamburger span, body.page-contact .nav-hamburger span { background: #fff; } /* Span colours — dark pages */ body.page-about .nav-hamburger span, body.page-download .nav-hamburger span { background: var(--cream, #fdf9f4); } /* ── Nav CTA buttons ── */ .nav-cta, .nav-btn { border: none; cursor: pointer; letter-spacing: 0.02em; font-family: 'DM Sans', sans-serif; text-decoration: none; display: inline-block; border-radius: var(--r-pill); transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s; } .nav-cta { background: linear-gradient(135deg, #b8aee0 0%, #d4a8c7 100%); color: white; padding: 11px 26px; font-size: 14px; font-weight: 500; box-shadow: 0 4px 20px rgba(184,174,224,0.40); } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(184,174,224,0.55); opacity: 0.92; } body.page-pricing .nav-btn { color: var(--ivory); padding: 11px 28px; font-size: 13px; font-weight: 400; letter-spacing: 0.05em; box-shadow: 0 4px 20px rgba(46,37,53,0.20); } body.page-pricing .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(46,37,53,0.28); background: var(--dusk-mid); } body.page-about .nav-btn { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.20); color: var(--cream); padding: 10px 26px; font-size: 13px; font-weight: 400; letter-spacing: 0.05em; backdrop-filter: blur(8px); } body.page-about .nav-btn:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); } body.page-download .nav-btn { background: linear-gradient(135deg, var(--lav-deep), var(--peach-deep)); color: white; padding: 11px 26px; font-size: 13px; font-weight: 400; letter-spacing: 0.04em; box-shadow: 0 4px 20px rgba(139,124,186,0.40); } body.page-download .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(139,124,186,0.55); } body.page-journal .nav-btn { color: var(--cream); padding: 10px 24px; font-size: 13px; font-weight: 400; letter-spacing: 0.04em; box-shadow: 0 4px 16px rgba(30,25,40,0.18); } body.page-journal .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(30,25,40,0.24); opacity: 0.88; } /* ── Dropdown chevron ── */ .dropdown-chevron { display: inline-block; vertical-align: middle; margin-left: 4px; margin-top: -1px; transition: transform 0.25s ease; } .has-dropdown:hover .dropdown-chevron { transform: rotate(180deg); } /* ── Desktop dropdown menu ── */ .nav-links .has-dropdown { position: relative; } .nav-dropdown { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); list-style: none; padding: 8px 0; margin: 0; min-width: 210px; background: rgba(253,249,244,0.97); border: 1px solid rgba(200,191,231,0.25); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 16px; box-shadow: 0 16px 48px rgba(30,25,40,0.13); opacity: 0; visibility: hidden; pointer-events: none; /* delay hide so mouse can travel from link to dropdown */ transition: opacity 0.22s ease 0.08s, transform 0.22s ease 0.08s, visibility 0.22s 0.08s; z-index: 300; } .has-dropdown:hover .nav-dropdown, .has-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition-delay: 0s; } /* Transparent bridge covers the 14px gap so hover isn't lost */ .nav-dropdown::after { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } .nav-dropdown::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; background: rgba(253,249,244,0.97); border-left: 1px solid rgba(200,191,231,0.25); border-top: 1px solid rgba(200,191,231,0.25); rotate: 45deg; } .nav-dropdown li a { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 13px; font-weight: 400; color: var(--text-dark) !important; text-decoration: none; white-space: nowrap; transition: color 0.2s, background 0.2s; border-radius: 0; } .nav-dropdown li a:hover, .nav-dropdown li a.active { color: var(--lav-deep, #7b6fad); background: rgba(200,191,231,0.12); } .nav-dropdown li a span { font-size: 15px; flex-shrink: 0; } /* ── Drawer: features group + sub-links ── */ .nav-drawer-group { display: flex; flex-direction: column; } /* Pixel-perfect match to .nav-drawer-link */ .nav-drawer-toggle { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 19px 26px; font-family: 'Cormorant Garamond', serif; font-size: clamp(26px, 7.5vw, 36px); font-weight: 300; letter-spacing: 0.01em; color: var(--text-dark, #1e1928); text-align: left; border-bottom: 1px solid rgba(184,174,224,0.09); position: relative; overflow: hidden; transition: color 0.3s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .nav-drawer-toggle::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(184,174,224,0.10) 0%, rgba(212,168,199,0.07) 100%); transform: translateX(-102%); transition: transform 0.42s cubic-bezier(0.16,1,0.3,1); } .nav-drawer-toggle:hover::before, .nav-drawer-toggle.active::before { transform: translateX(0); } .nav-drawer-toggle.active, .nav-drawer-toggle:hover { color: var(--lav-deep, #7b6fad); } .nav-drawer-toggle .nav-drawer-link-num { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 400; color: rgba(123,111,173,0.38); letter-spacing: 0.12em; align-self: flex-start; margin-top: 7px; flex-shrink: 0; } .nav-drawer-toggle:hover .nav-drawer-link-num, .nav-drawer-toggle.active .nav-drawer-link-num { color: rgba(123,111,173,0.72); } .nav-drawer-toggle .drawer-chevron { margin-left: auto; flex-shrink: 0; opacity: 0.35; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.25s; } .nav-drawer-toggle[aria-expanded="true"] .drawer-chevron { transform: rotate(180deg); opacity: 0.70; } /* Sub-panel */ .nav-drawer-sub { max-height: 0; overflow: hidden; transition: max-height 0.42s cubic-bezier(0.16,1,0.3,1); background: rgba(184,174,224,0.04); } .nav-drawer-sub.open { max-height: 420px; } /* Text in main links starts at: 26px (left padding) + ~28px (num col, DM Sans 10px) + 16px (gap) = ~70px Sub-links use padding-left: 70px so their text aligns under the parent label. */ .nav-drawer-sub-link { display: flex; align-items: center; gap: 10px; padding: 13px 26px 13px 70px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 400; color: #000; text-decoration: none; border-bottom: 1px solid rgba(184,174,224,0.07); transition: color 0.2s, background 0.2s; -webkit-tap-highlight-color: transparent; } .nav-drawer-sub-link:last-child { border-bottom: none; } .nav-drawer-sub-link:hover, .nav-drawer-sub-link.active { color: var(--lav-deep, #7b6fad); background: rgba(200,191,231,0.08); } /* ══════════════════════════════════════════════════════════════ MOBILE NAV — Premium right-slide glass panel + blur overlay ══════════════════════════════════════════════════════════════ */ /* ── Hamburger button micro-interactions ── */ .nav-hamburger { transition: background 0.3s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1); } .nav-hamburger:hover { background: rgba(120,110,150,0.10); } .nav-hamburger:active { transform: scale(0.88); background: rgba(120,110,150,0.16); } /* ── Full-screen blur overlay (mnav system) ── */ .mnav-overlay { position: fixed; inset: 0; z-index: 8998; background: rgba(10,6,18,0.60); backdrop-filter: blur(5px) saturate(0.80); -webkit-backdrop-filter: blur(5px) saturate(0.80); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.45s ease, visibility 0s linear 0.45s; } .mnav-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.45s ease, visibility 0s linear 0s; } /* ── OLD drawer class — neutralised ── */ .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 360px); z-index: 9000; /* Glassmorphism */ background: rgba(253,249,244,0.96); backdrop-filter: blur(48px) saturate(1.9); -webkit-backdrop-filter: blur(48px) saturate(1.9); /* Floating card edges */ border-left: 1px solid rgba(184,174,224,0.20); border-radius: 28px 0 0 28px; box-shadow: -28px 0 90px rgba(10,6,18,0.20), -8px 0 28px rgba(10,6,18,0.10), inset 1px 0 0 rgba(255,255,255,0.65); display: flex; flex-direction: column; overflow: hidden; /* Off-screen right, invisible */ transform: translateX(110%); visibility: hidden; pointer-events: none; transition: transform 0.55s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.55s; } .nav-drawer.open { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform 0.55s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0s; } /* Drawer decorative ambient orbs */ .nav-drawer-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.7s ease; } .nav-drawer.open .nav-drawer-orb { opacity: 1; } .nav-drawer-orb-1 { width: 240px; height: 240px; top: -80px; right: -70px; background: radial-gradient(circle, rgba(184,174,224,0.28) 0%, transparent 68%); transition-delay: 0.12s; } .nav-drawer-orb-2 { width: 190px; height: 190px; bottom: 90px; left: -55px; background: radial-gradient(circle, rgba(212,168,199,0.22) 0%, transparent 68%); transition-delay: 0.22s; } /* ── Drawer header ── */ .nav-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 26px 26px 22px; flex-shrink: 0; border-bottom: 1px solid rgba(184,174,224,0.12); position: relative; z-index: 1; } .nav-drawer-brand { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 400; color: var(--text-dark, #1e1928); text-decoration: none; display: flex; align-items: center; gap: 9px; letter-spacing: 0.02em; opacity: 0; transform: translateX(14px); transition: opacity 0.45s ease 0.18s, transform 0.45s cubic-bezier(0.16,1,0.3,1) 0.18s; } .nav-drawer.open .nav-drawer-brand { opacity: 1; transform: translateX(0); } /* Close ✕ button — spins in */ .nav-drawer-close { width: 40px; height: 40px; background: rgba(120,110,150,0.09); border: 1px solid rgba(184,174,224,0.14); cursor: pointer; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; position: relative; opacity: 0; transform: rotate(-75deg) scale(0.65); transition: background 0.25s ease, border-color 0.25s ease, transform 0.22s ease, opacity 0.38s ease 0.12s; } .nav-drawer.open .nav-drawer-close { opacity: 1; transform: rotate(0deg) scale(1); transition: background 0.25s ease, border-color 0.25s ease, transform 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.12s, opacity 0.38s ease 0.12s; } .nav-drawer-close:hover { background: rgba(120,110,150,0.18); border-color: rgba(184,174,224,0.28); transform: rotate(90deg) scale(1.08) !important; } .nav-drawer-close:active { transform: scale(0.84) !important; } .nav-drawer-close span { display: block; width: 15px; height: 1.5px; background: var(--text-dark, #1e1928); border-radius: 2px; position: absolute; transition: background 0.25s ease; } .nav-drawer-close span:nth-child(1) { transform: rotate(45deg); } .nav-drawer-close span:nth-child(2) { transform: rotate(-45deg); } .nav-drawer-close:hover span { background: var(--lav-deep, #7b6fad); } /* ═══════════════════════════════════════════════════════════════ PREMIUM MOBILE NAVIGATION (mnav-* system) Apple-level drawer · iOS spring animations · 56px+ touch targets ═══════════════════════════════════════════════════════════════ */ /* ── Drawer panel ── */ .mnav { position: fixed; top: 0; right: 0; bottom: 0; width: min(90vw, 360px); z-index: 9000; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(165deg, #1d1529 0%, #150f20 55%, #1b1230 100%); border-left: 1px solid rgba(184,174,224,0.10); border-radius: 28px 0 0 28px; box-shadow: -28px 0 90px rgba(0,0,0,0.60), -6px 0 30px rgba(0,0,0,0.35), inset 1px 0 0 rgba(255,255,255,0.05); transform: translateX(105%); visibility: hidden; pointer-events: none; transition: transform 0.52s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.52s; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } .mnav.open { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform 0.52s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0s; } /* ── Ambient depth orbs ── */ .mnav-orb { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.7s ease 0.1s; } .mnav.open .mnav-orb { opacity: 1; } .mnav-orb-1 { width: 300px; height: 300px; top: -90px; right: -90px; background: radial-gradient(circle, rgba(139,124,186,0.16) 0%, transparent 70%); } .mnav-orb-2 { width: 220px; height: 220px; bottom: 80px; left: -70px; background: radial-gradient(circle, rgba(201,132,114,0.11) 0%, transparent 70%); } /* ── Top bar: logo + download + close ── */ .mnav-bar { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 18px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.055); position: relative; z-index: 2; } .mnav-brand { display: flex; align-items: center; flex-shrink: 0; margin-right: auto; } .mnav-brand-img { height: 34px; width: auto; } /* Download CTA in top bar */ .mnav-bar-cta { display: flex; align-items: center; gap: 6px; padding: 9px 14px; background: linear-gradient(135deg, #8b7cba, #c98472); color: #fff !important; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; border-radius: 999px; white-space: nowrap; flex-shrink: 0; box-shadow: 0 4px 16px rgba(139,124,186,0.35); transition: transform 0.22s ease, box-shadow 0.22s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .mnav-bar-cta:hover { transform: translateY(-1px); box-shadow: 0 7px 22px rgba(139,124,186,0.50); } .mnav-bar-cta:active { transform: scale(0.96); } .mnav-bar-cta svg { flex-shrink: 0; transition: transform 0.2s; } .mnav-bar-cta:hover svg { transform: translateX(2px); } /* Close button */ .mnav-close { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.075); border: 1px solid rgba(255,255,255,0.10); display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(253,249,244,0.65); transition: background 0.2s, transform 0.35s cubic-bezier(0.16,1,0.3,1), color 0.2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; flex-shrink: 0; } .mnav-close:hover { background: rgba(255,255,255,0.13); color: #fdf9f4; transform: rotate(90deg); } .mnav-close:active { transform: scale(0.86) rotate(45deg); } /* ── Scrollable body ── */ .mnav-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 20px 0 8px; position: relative; z-index: 1; scrollbar-width: thin; scrollbar-color: rgba(184,174,224,0.20) transparent; } .mnav-scroll::-webkit-scrollbar { width: 3px; } .mnav-scroll::-webkit-scrollbar-thumb { background: rgba(184,174,224,0.20); border-radius: 2px; } /* ── Nav container ── */ .mnav-nav { flex-shrink: 0; display: flex; flex-direction: column; padding: 0 0 16px; } /* ── Nav link row — base for and