/* ============================================================ Valencia Summer 2026 — App-like navigation + view switching Layered on top of styles.css + live-mode.css (reuses their tokens). Progressive enhancement: until js/app-nav.js adds `.app-nav-ready` to , every section is visible (the old long scroll still works), so a JS failure can never brick the live site. ============================================================ */ :root { --appbar-h: 58px; --tabbar-h: 64px; } /* Sections that the redesign retires but keeps in the DOM (so their scripts — countdown, etc. — never error on missing nodes). */ .legacy-hidden { display: none !important; } /* ---------- View system ---------- */ /* Active only once JS is in control. Without it, [data-route] sections just render normally (graceful fallback). */ .app-nav-ready [data-route] { display: none; } .app-nav-ready [data-route].view-active { display: block; animation: vlViewIn .22s ease both; } @keyframes vlViewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .app-nav-ready { padding-top: var(--appbar-h); padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); } /* The old fixed top nav + mobile bar + hero/dashboard are replaced. They stay in the DOM (so their scripts never error) but never show once JS is in control. */ .app-nav-ready #nav, .app-nav-ready #mobile-nav, .app-nav-ready #hero, .app-nav-ready #dashboard, .app-nav-ready #community { display: none !important; } /* ============================================================ Top app bar (brand always; full nav on desktop) ============================================================ */ .appbar { position: fixed; top: 0; left: 0; right: 0; height: var(--appbar-h); z-index: 1000; display: flex; align-items: center; gap: var(--space-4, 16px); padding: 0 clamp(14px, 4vw, 28px); background: rgba(255, 255, 255, .92); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--cream-dark, #e8e2d4); box-shadow: 0 1px 0 rgba(0,0,0,.02); } .appbar-brand { font-family: var(--font-display, serif); font-weight: 800; font-size: 1.12rem; color: var(--terracotta, #E07A5F); text-decoration: none; white-space: nowrap; letter-spacing: .2px; } .appbar-brand .sun { margin-right: 4px; } .appbar-nav { display: none; margin-left: auto; align-items: center; gap: 4px; } .appbar-link { appearance: none; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem; color: var(--deep-blue, #3D5A80); text-decoration: none; padding: 8px 12px; border-radius: 999px; line-height: 1; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s; } .appbar-link:hover { background: var(--cream, #F4F1DE); } .appbar-link.active { background: var(--terracotta, #E07A5F); color: #fff; } /* Desktop dropdowns (Fun ▾ / Plan ▾) */ .appbar-menu { position: relative; } .appbar-menu > .appbar-link::after { content: "▾"; font-size: .8em; opacity: .7; } .appbar-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 196px; background: #fff; border: 1px solid var(--cream-dark, #e8e2d4); border-radius: 14px; box-shadow: var(--shadow-xl, 0 20px 40px rgba(0,0,0,.14)); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .16s ease; z-index: 1001; } .appbar-menu.open .appbar-dropdown { opacity: 1; visibility: visible; transform: none; } .appbar-dropdown button { appearance: none; border: 0; background: none; width: 100%; text-align: left; cursor: pointer; font: inherit; font-weight: 600; color: var(--dark, #2b2b2b); padding: 9px 12px; border-radius: 9px; display: flex; align-items: center; gap: 9px; } .appbar-dropdown button:hover { background: var(--cream, #F4F1DE); } .appbar-dropdown .group-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .8px; font-weight: 800; color: var(--terracotta, #E07A5F); padding: 8px 12px 4px; } .appbar-dropdown .group-label.plan { color: var(--deep-blue, #3D5A80); } @media (min-width: 860px) { .appbar-nav { display: flex; } } /* ============================================================ Bottom tab bar (phone) ============================================================ */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); display: flex; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--cream-dark, #e8e2d4); } .tabbar-item { flex: 1; appearance: none; border: 0; background: none; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--gray, #8a8a8a); padding: 6px 2px; transition: color .15s; } .tabbar-item .ic { font-size: 21px; line-height: 1; } .tabbar-item .lbl { font-size: .64rem; font-weight: 700; letter-spacing: .2px; } .tabbar-item.active { color: var(--terracotta, #E07A5F); } .tabbar-item.active .ic { transform: translateY(-1px); } @media (min-width: 860px) { .tabbar { display: none; } .app-nav-ready { padding-bottom: 0; } } /* Float chat/bell above the bottom bar on phones */ @media (max-width: 859px) { .app-nav-ready #chat-toggle, .app-nav-ready .chat-toggle, .app-nav-ready .vl-bell, .app-nav-ready .push-bell { bottom: calc(var(--tabbar-h) + 14px) !important; } /* Stack back-to-top above the chat button so they don't collide in the corner. */ .app-nav-ready #back-to-top, .app-nav-ready .back-to-top { bottom: calc(var(--tabbar-h) + 84px) !important; } } /* ============================================================ Home launchpad tiles ============================================================ */ .home-extra { padding: clamp(18px, 4vw, 30px) 0 0; } .home-hello { text-align: center; margin-bottom: 14px; } .home-hello h2 { font-family: var(--font-display, serif); color: var(--deep-blue, #3D5A80); font-size: clamp(1.5rem, 5vw, 2rem); margin: 0 0 4px; } .home-hello p { color: var(--dark-light, #5a5a5a); margin: 0; } .home-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 560px; margin: 0 auto; } @media (min-width: 560px) { .home-tiles { grid-template-columns: repeat(4, 1fr); } } .home-tile { appearance: none; border: 1px solid var(--cream-dark, #e8e2d4); background: var(--white, #fff); border-radius: var(--radius-xl, 16px); padding: 14px 8px; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)); transition: transform .15s, box-shadow .15s; } .home-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 12px 24px rgba(0,0,0,.1)); } .home-tile .ic { font-size: 26px; line-height: 1; } .home-tile .lbl { font-weight: 800; font-size: .82rem; color: var(--deep-blue, #3D5A80); } /* ============================================================ More hub (the two worlds) ============================================================ */ .more-hub { max-width: 620px; margin: 0 auto; padding: clamp(18px, 5vw, 36px) 0; } .more-group { margin-bottom: 22px; } .more-group-label { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; color: var(--terracotta, #E07A5F); margin: 0 0 10px; } .more-group-label.plan { color: var(--deep-blue, #3D5A80); } .more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .more-item { appearance: none; border: 1px solid var(--cream-dark, #e8e2d4); background: var(--white, #fff); border-radius: var(--radius-lg, 14px); padding: 16px 14px; cursor: pointer; font: inherit; display: flex; align-items: center; gap: 11px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)); transition: transform .15s, box-shadow .15s; text-align: left; } .more-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 6px 14px rgba(0,0,0,.08)); } .more-item .ic { font-size: 24px; line-height: 1; } .more-item .txt b { display: block; font-size: .96rem; color: var(--deep-blue, #3D5A80); } .more-item .txt span { font-size: .76rem; color: var(--gray, #8a8a8a); } /* Section heading used by the More + Home views */ .view-heading { text-align: center; padding-top: clamp(16px, 4vw, 28px); } .view-heading .section-tag { display: inline-block; }