/* Global shell migration owner, 2026-07-26: header, mobile nav and footer. */ :root { --oonite-canvas-day:#f5f5f7; --oonite-canvas-night:#111114; --global-nav-idle:#684cff; --global-nav-idle-surface:#eeeaff; --global-nav-hover:#5635e8; --global-nav-hover-surface:#e3dcff; --global-nav-active:#684cff; --global-nav-active-text:#fff; --global-nav-mobile-idle:#b7a8f8; } /* Cards navigate without a pressed-scale or browser tap-highlight layer. */ a { -webkit-tap-highlight-color: transparent; } /* Avatar media boxes belong to the persistent shell contract. Route-owned account CSS can refine these values, but removing a route stylesheet must never expose the image's natural dimensions during navigation. */ .account-hero-avatar { box-sizing:border-box; display:grid; flex:0 0 76px; width:76px; height:76px; overflow:hidden; } .account-hero-avatar img { display:block; width:100%; height:100%; object-fit:cover; } :where(a[class*="-card"], article[class*="-card"], [class*="-card"][role="button"], .guide-place-row, .schedule-row, .tonight-event):active { transform: none !important; filter: none !important; opacity: 1; } html { scrollbar-width:none; -ms-overflow-style:none; } html::-webkit-scrollbar, #app::-webkit-scrollbar, body::-webkit-scrollbar, .app-shell-main-content::-webkit-scrollbar { width:0; height:0; display:none; } /* The inline theme bootstrap marks before the module starts. Keep the first painted frame on the correct canvas even though route classes and route-owned styles are attached a moment later. */ html.day-mode, html.day-mode body, html.day-mode #app { background:var(--oonite-canvas-day); color:#171715; } html.night-mode, html.night-mode body, html.night-mode #app { background:var(--oonite-canvas-night); color:#f7f7fb; } /* The blocking database loader is a stable body-level layer. It must not inherit the App Shell's sidebar, outlet, or Page Frame geometry. */ .global-loading-layer { position:fixed; z-index:10000; inset:0; display:grid; place-items:center; min-width:0; min-height:100dvh; overflow:hidden; box-sizing:border-box; isolation:isolate; background:var(--oonite-canvas-day); } .global-loading-layer[hidden] { display:none; } /* Route navigation keeps the current content mounted while the next data request completes. This strip is the only transition indicator; it never consumes layout space or replaces an already readable page. */ .route-progress { position:fixed; z-index:11000; top:0; left:0; width:100%; height:2px; overflow:hidden; pointer-events:none; background:transparent; } .route-progress::after { display:block; width:38%; height:100%; border-radius:999px; background:linear-gradient(90deg, transparent, var(--global-nav-active, #684cff), #00ff09, transparent); content:""; animation:oonite-route-progress 1.1s ease-in-out infinite; } .route-progress[hidden] { display:none; } @keyframes oonite-route-progress { from { transform:translateX(-120%); } to { transform:translateX(360%); } } .route-content-pending { box-sizing:border-box; min-height:120px; display:grid; place-items:center; margin:0; padding:40px 20px; color:#979797; font-size:13px; letter-spacing:.01em; } body.day-mode .route-content-pending { color:#8a8794; } html.night-mode .global-loading-layer, body.night-mode .global-loading-layer { background:var(--oonite-canvas-night); } /* Keep the existing loader content and animation, but let the root layer own the viewport canvas and positioning contract. */ .global-loading-layer > .database-state { position:static; inset:auto; z-index:auto; width:100%; max-width:none; height:100%; min-height:100%; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; } /* Startup loading is mounted before the App Shell. Keep its canvas identical to the first-painted document background so the shell does not flash as a gray strip at the right edge while content is hydrating. */ .database-state { inset:0; width:auto; height:auto; min-height:100dvh; background:var(--oonite-canvas-day); } html.night-mode .database-state, body.night-mode .database-state { background:var(--oonite-canvas-night); } #app { scrollbar-width:none; -ms-overflow-style:none; } .app-shell-main-content { scrollbar-width:none; -ms-overflow-style:none; } .app-shell-main-content > [data-oonite-page-frame='true'] { scrollbar-width:none; -ms-overflow-style:none; } #app > main, #app > section, #app > article { scrollbar-width:none; -ms-overflow-style:none; } .app-shell-main-content > [data-oonite-page-frame='true']::-webkit-scrollbar { width:0; height:0; } #app > main::-webkit-scrollbar, #app > section::-webkit-scrollbar, #app > article::-webkit-scrollbar { width:0; height:0; } /* Route-level empty states sit below the fixed shell instead of starting underneath the brand bar. This covers signed-out defaults and missing records consistently, including when the mobile navigation is inserted between the header and the route content. */ #app > section.empty, #app .app-shell .app-shell-main-content > section.empty { box-sizing:border-box; display:flex; min-height:100dvh; flex-direction:column; align-items:center; justify-content:center; padding-top:80px !important; padding-bottom:112px !important; scroll-margin-top:64px; } /* Signed-out and unavailable route shells should sit on the shared day canvas, not inside a full-height white panel. */ body.day-mode:has(> #app > section.empty), body.day-mode:has(> #app > section.empty) #app { background:#f5f5f7; } body.day-mode #app > section.empty h1 { margin:0; color:#6f6a7d; font-size:clamp(21px,5.4vw,26px); font-weight:700; letter-spacing:-.015em; line-height:1.16; } body.day-mode #app > section.empty p { max-width:34em; margin:11px 0 0; color:#9d99aa; font-size:13px; line-height:1.45; } @media (max-width:719px) { #app > section.empty, #app .app-shell .app-shell-main-content > section.empty { padding-top:84px !important; padding-bottom:calc(128px + env(safe-area-inset-bottom)) !important; } } @media (min-width:720px) { #app > section.empty, #app .app-shell .app-shell-main-content > section.empty { padding-top:88px !important; padding-bottom:96px !important; } } /* Shared empty-state contract. Route copy and actions stay page-specific, but unavailable content should use one OONITE surface, rhythm and signal color across the product. */ #app .app-shell .app-shell-main-content > section.empty, #app .app-shell .app-shell-main-content .empty.empty-with-actions, #app .app-shell .app-shell-main-content .night-empty-state, #app .app-shell .app-shell-main-content .notification-empty, #app .app-shell .app-shell-main-content .notification-message-empty, #app .app-shell .app-shell-main-content .moments-empty, #app .app-shell .app-shell-main-content .public-profile-no-cards, #app .app-shell .app-shell-main-content .public-profile-empty, #app .app-shell .app-shell-main-content .owned-appointment-empty, #app .app-shell .app-shell-main-content .account-badges-empty { box-sizing:border-box; display:grid !important; min-height:156px !important; width:100%; align-content:center; justify-items:center; gap:6px !important; padding:24px !important; border:1px solid color-mix(in srgb,var(--account-muted,var(--muted)) 14%,transparent) !important; border-radius:16px !important; background:color-mix(in srgb,var(--account-text,var(--ink)) 3%,transparent) !important; box-shadow:none !important; color:var(--account-muted,var(--muted)) !important; text-align:center; } /* Page-level empty routes need the same breathing room as Plaza and Nearby; the shell already reserves the utility header, so this adds only the page rhythm gap and keeps the state visibly below the topbar. */ #app .app-shell .app-shell-main-content > section.empty[data-oonite-page-frame='true'] { margin-top:var(--oonite-page-top) !important; } #app .app-shell .app-shell-main-content > section.empty h1, #app .app-shell .app-shell-main-content > section.empty h2, #app .app-shell .app-shell-main-content > section.empty h3, #app .app-shell .app-shell-main-content .empty.empty-with-actions h1, #app .app-shell .app-shell-main-content .empty.empty-with-actions h2, #app .app-shell .app-shell-main-content .night-empty-state h2, #app .app-shell .app-shell-main-content .notification-empty strong, #app .app-shell .app-shell-main-content .notification-message-empty strong, #app .app-shell .app-shell-main-content .moments-empty strong, #app .app-shell .app-shell-main-content .public-profile-no-cards h3, #app .app-shell .app-shell-main-content .public-profile-empty h1, #app .app-shell .app-shell-main-content .owned-appointment-empty h2, #app .app-shell .app-shell-main-content .account-badges-empty h2 { margin:0 !important; color:var(--account-text,var(--ink)) !important; font-size:18px !important; font-weight:700 !important; line-height:1.15 !important; } #app .app-shell .app-shell-main-content > section.empty p, #app .app-shell .app-shell-main-content .empty.empty-with-actions p, #app .app-shell .app-shell-main-content .night-empty-state p, #app .app-shell .app-shell-main-content .notification-message-empty span, #app .app-shell .app-shell-main-content .moments-empty p, #app .app-shell .app-shell-main-content .public-profile-no-cards p, #app .app-shell .app-shell-main-content .public-profile-empty p, #app .app-shell .app-shell-main-content .owned-appointment-empty p, #app .app-shell .app-shell-main-content .account-badges-empty p { max-width:440px !important; margin:0 !important; color:var(--account-muted,var(--muted)) !important; font-size:12px !important; line-height:1.45 !important; } #app .app-shell .app-shell-main-content .night-empty-state > span:first-child, #app .app-shell .app-shell-main-content .notification-empty > span:first-child { color:var(--luca-purple,#684cff) !important; font-size:22px !important; line-height:1.2 !important; opacity:.84; } /* Full-page states without an existing signal icon use the same quiet OONITE marker. Existing page-specific icons remain in place and inherit the same purple role through the rules above. */ #app .app-shell .app-shell-main-content > section.empty::before, #app .app-shell .app-shell-main-content .notification-message-empty::before, #app .app-shell .app-shell-main-content .moments-empty::before, #app .app-shell .app-shell-main-content .public-profile-empty::before, #app .app-shell .app-shell-main-content .owned-appointment-empty::before { content:'◎'; display:block; color:var(--luca-purple,#684cff); font-size:22px; line-height:1.2; opacity:.84; } #app .app-shell .app-shell-main-content .account-badges-empty .account-badges-icon { color:var(--luca-purple,#684cff) !important; font-size:22px !important; line-height:1.2 !important; } @media (max-width:719px) { #app .app-shell .app-shell-main-content > section.empty, #app .app-shell .app-shell-main-content .empty.empty-with-actions, #app .app-shell .app-shell-main-content .night-empty-state, #app .app-shell .app-shell-main-content .notification-empty, #app .app-shell .app-shell-main-content .notification-message-empty, #app .app-shell .app-shell-main-content .moments-empty, #app .app-shell .app-shell-main-content .public-profile-no-cards, #app .app-shell .app-shell-main-content .public-profile-empty, #app .app-shell .app-shell-main-content .owned-appointment-empty, #app .app-shell .app-shell-main-content .account-badges-empty { min-height:132px !important; padding:20px 16px !important; } } /* Detail routes switch to this stable shell before route CSS and remote data finish loading. It prevents the previous list page from flashing through while still giving the user the same media/copy structure as the final Moment or Night Card detail. */ #app > main.detail-route-loading { position:relative; z-index:205; display:block; width:100%; min-height:100dvh; margin:0; padding:64px 16px 112px; box-sizing:border-box; overflow:hidden; background:#f5f5f7; color:#171715; } body.night-mode #app > main.detail-route-loading { background:#111114; color:#fff; } #app > main.detail-route-loading .detail-loading-sheet { width:min(100%,1000px); min-height:calc(100dvh - 176px); margin:0 auto; background:transparent; box-shadow:none; } #app > main.detail-route-loading .detail-loading-sheet > .night-detail-layout { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr); min-height:calc(100dvh - 176px); gap:24px; } #app > main.detail-route-loading .detail-loading-media-column { position:relative; min-width:0; } #app > main.detail-route-loading .detail-loading-media-block, #app > main.detail-route-loading .detail-loading-gallery { position:relative; display:block; width:100%; min-height:calc(100dvh - 176px); overflow:hidden; border-radius:22px; background:#e8e8ed; } #app > main.detail-route-loading .detail-loading-gallery { min-height:0; aspect-ratio:4 / 5; } #app > main.detail-route-loading .detail-loading-gallery .moment-detail-gallery-track, #app > main.detail-route-loading .detail-loading-gallery figure, #app > main.detail-route-loading .detail-loading-gallery figure > .detail-loading-shimmer { display:block; width:100%; height:100%; margin:0; } #app > main.detail-route-loading .detail-loading-copy { display:grid; align-content:center; gap:16px; min-width:0; padding:42px 24px 70px; } #app > main.detail-route-loading .detail-loading-profile { min-width:0; } #app > main.detail-route-loading .detail-loading-author { display:flex; align-items:center; gap:10px; min-height:48px; } #app > main.detail-route-loading .detail-loading-author > div { display:grid; min-width:0; gap:8px; } #app > main.detail-route-loading .detail-loading-avatar { display:block; width:42px; height:42px; flex:0 0 42px; border-radius:50%; background:#e4e3e9; } #app > main.detail-route-loading .detail-loading-copy h1, #app > main.detail-route-loading .detail-loading-copy p { margin:0; } #app > main.detail-route-loading .detail-loading-copy h1 { min-height:42px; font-size:clamp(28px,4vw,44px); line-height:1.08; } #app > main.detail-route-loading .detail-loading-caption { min-height:62px; padding:14px 16px; border-radius:14px; background:#ececf0; } #app > main.detail-route-loading .detail-loading-text { display:block; color:currentColor; line-height:1.35; } #app > main.detail-route-loading .detail-loading-author-name { min-width:130px; font-size:15px; font-weight:800; } #app > main.detail-route-loading .detail-loading-meta { min-width:88px; color:#92919a; font-size:11px; } #app > main.detail-route-loading .detail-loading-title { min-width:48%; } #app > main.detail-route-loading .detail-loading-copy-line { display:block; width:76%; height:13px; min-height:13px; border-radius:999px; } #app > main.detail-route-loading .detail-loading-copy-line.short { width:48%; } #app > main.detail-route-loading .detail-loading-shimmer { display:block; min-height:18px; border-radius:999px; background:linear-gradient(100deg,#e5e4e9 20%,#f3f2f5 42%,#e5e4e9 64%); background-size:240% 100%; animation:detail-loading-shimmer 1.25s ease-in-out infinite; } body.night-mode #app > main.detail-route-loading .detail-loading-media-block, body.night-mode #app > main.detail-route-loading .detail-loading-gallery { background:#1b1b20; } body.night-mode #app > main.detail-route-loading .detail-loading-shimmer { background:linear-gradient(100deg,#222229 20%,#30303a 42%,#222229 64%); background-size:240% 100%; } body.night-mode #app > main.detail-route-loading .detail-loading-caption { background:#1b1b20; } @keyframes detail-loading-shimmer { from { background-position:100% 0; } to { background-position:-100% 0; } } @media (prefers-reduced-motion:reduce) { #app > main.detail-route-loading .detail-loading-shimmer { animation:none; } } @media (max-width:719px) { #app > main.detail-route-loading { padding:64px 12px calc(110px + env(safe-area-inset-bottom)); } #app > main.detail-route-loading .detail-loading-sheet, #app > main.detail-route-loading .detail-loading-sheet > .night-detail-layout { min-height:0; } #app > main.detail-route-loading .detail-loading-sheet > .night-detail-layout { display:block; } #app > main.detail-route-loading .detail-loading-media-block, #app > main.detail-route-loading .detail-loading-gallery { min-height:52dvh; border-radius:20px; } #app > main.detail-route-loading .detail-loading-copy { padding:24px 10px 42px; } } /* Route-owned detail styles load after this file. Keep their final gallery rules from turning the loading placeholder into a second, oval surface or a nested card. The loading state should read as the same media -> author -> copy flow as the completed detail page. */ #app > main.detail-route-loading .detail-loading-sheet, #app > main.detail-route-loading .detail-loading-sheet > .night-detail-layout, #app > main.detail-route-loading .detail-loading-media-column { background:transparent !important; box-shadow:none !important; } #app > main.detail-route-loading .detail-loading-media-block, #app > main.detail-route-loading .detail-loading-gallery, #app > main.detail-route-loading .detail-loading-gallery .moment-detail-gallery-track, #app > main.detail-route-loading .detail-loading-gallery figure, #app > main.detail-route-loading .detail-loading-gallery figure > .detail-loading-shimmer { border-radius:20px !important; clip-path:none !important; } #app > main.detail-route-loading .detail-loading-gallery .moment-detail-gallery-track, #app > main.detail-route-loading .detail-loading-gallery figure { overflow:hidden !important; } #app > main.detail-route-loading .detail-loading-gallery figure > .detail-loading-shimmer, #app > main.detail-route-loading .detail-loading-media-block > .detail-loading-shimmer { min-height:100% !important; height:100% !important; background:linear-gradient(115deg,#e5e4e9 18%,#f1f0f4 44%,#e5e4e9 70%) !important; background-size:240% 100% !important; } #app > main.detail-route-loading .detail-loading-copy { background:var(--moment-surface,#fff) !important; } body.night-mode #app > main.detail-route-loading .detail-loading-copy { background:#17171a !important; } @media (max-width:719px) { #app > main.detail-route-loading .detail-loading-media-column { width:100% !important; } #app > main.detail-route-loading .detail-loading-media-block, #app > main.detail-route-loading .detail-loading-gallery { min-height:0 !important; aspect-ratio:4 / 5 !important; border-radius:20px !important; } #app > main.detail-route-loading .detail-loading-copy { margin-top:12px !important; border-radius:24px !important; } } /* Match the two loading variants to the exact mobile geometry of their finished route. A shared generic shell cannot do this: Moment is a fixed scroller below the 52px header, while Night Card uses the document flow. */ @media (max-width:719px) { #app > main.detail-route-loading.moment-loading-page { position:fixed; inset:calc(52px + env(safe-area-inset-top)) 0 0; width:100%; height:calc(100dvh - 52px - env(safe-area-inset-top)); min-height:0; overflow:auto; padding:0; background:#f5f5f7 !important; } html.night-mode #app > main.detail-route-loading.moment-loading-page { background:#111114 !important; } #app > main.detail-route-loading.moment-loading-page .detail-loading-sheet > .night-detail-layout { display:block; width:calc(100% - 48px); min-height:0; margin:0 auto; padding:12px 0 calc(110px + env(safe-area-inset-bottom)); } #app > main.detail-route-loading.moment-loading-page .detail-loading-media-block, #app > main.detail-route-loading.moment-loading-page .detail-loading-gallery { width:100% !important; min-height:0 !important; aspect-ratio:4 / 5 !important; } #app > main.detail-route-loading.moment-loading-page .detail-loading-copy { width:100% !important; margin:12px 0 0 !important; padding:24px 19px 42px !important; } #app > main.detail-route-loading.night-card-loading-page { position:relative; width:100%; min-height:100dvh; overflow-x:hidden; padding:64px 0 96px !important; background:#fff !important; } html.night-mode #app > main.detail-route-loading.night-card-loading-page { background:#050506 !important; } #app > main.detail-route-loading.night-card-loading-page .detail-loading-sheet > .night-detail-layout { display:flex; width:100%; min-height:0; flex-direction:column; gap:0; padding:0 !important; box-sizing:border-box; } #app > main.detail-route-loading.night-card-loading-page .detail-loading-media-column { width:calc(100% - 32px) !important; margin:0 16px !important; } #app > main.detail-route-loading.night-card-loading-page .detail-loading-media-block { width:100% !important; min-height:0 !important; } #app > main.detail-route-loading.night-card-loading-page .detail-loading-media-block { aspect-ratio:4 / 5 !important; } #app > main.detail-route-loading.night-card-loading-page .detail-loading-copy { width:calc(100% - 32px) !important; margin:12px 16px 0 !important; padding:14px 0 20px !important; border-radius:24px !important; background:#fff !important; box-shadow:0 14px 36px rgba(32,24,64,.08) !important; } html.night-mode #app > main.detail-route-loading.night-card-loading-page .detail-loading-copy { background:#111114 !important; box-shadow:0 14px 36px rgba(0,0,0,.24) !important; } } html.night-mode #app > main.detail-route-loading .detail-loading-gallery figure > .detail-loading-shimmer, html.night-mode #app > main.detail-route-loading .detail-loading-media-block > .detail-loading-shimmer { background:linear-gradient(115deg,#1b1b20 18%,#292931 44%,#1b1b20 70%) !important; background-size:240% 100% !important; } #app > .global-header, body.day-mode #app > .global-header, body.night-mode #app > .global-header { position:fixed; z-index:300; top:0; right:0; left:0; display:flex; width:100%; height:48px; min-height:48px; align-items:center; justify-content:center; padding:0; background:#050505; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; } body.day-mode #app > .global-header { background:#f5f5f7; } #app > .global-footer .footer-brand-logo, #app .app-shell .app-shell-main-content > .global-footer .footer-brand-logo { display:block; width:clamp(132px,14vw,190px); height:auto; } #app > .global-header .global-nav-inner { position:absolute; top:0; left:50%; display:grid; grid-template-columns:auto 1fr auto; width:min(1360px,calc(100% - 64px)); max-width:1360px; height:100%; align-items:center; margin:0; padding:0; box-sizing:border-box; transform:translateX(-50%); } #app > .global-header .topbar-brand { display:flex; height:100%; align-items:center; grid-column:1; justify-self:start; margin:0; } #app > .global-header .topbar-brand .brand { display:flex; min-height:40px; align-items:center; margin:0; } #app > .global-header .topbar-brand .brand-logo { display:block; margin:0; } #app > .global-header .topbar-brand .brand-logo { width:164px; max-width:100%; height:auto; max-height:36px; } #app > .global-header .main-nav { position:absolute; top:50%; left:50%; z-index:20; display:flex; align-items:center; justify-content:center; justify-self:center; gap:6px; margin:0; padding:0; background:transparent; box-shadow:none; transform:translate(-50%,-50%); } #app > .global-header .menu-toggle, #app > .global-header .topbar-nav { display:none; } #app > .global-header .main-nav a, body.day-mode #app > .global-header .main-nav a, body.night-mode #app > .global-header .main-nav a { display:inline-flex; height:40px; min-height:40px; align-items:center; border:0; border-radius:999px; padding:0 14px; background:var(--global-nav-idle-surface); color:var(--global-nav-idle); font-size:11px; font-weight:700; box-shadow:none; transition:background-color .18s ease,color .18s ease,transform .18s ease; } #app > .global-header .main-nav a:not(.active):hover, #app > .global-header .main-nav a:not(.active):focus-visible { background:var(--global-nav-hover-surface); color:var(--global-nav-hover); } #app > .global-header .main-nav a:focus-visible { outline:2px solid color-mix(in srgb,var(--global-nav-active) 42%,transparent); outline-offset:2px; } #app > .global-header .main-nav a:active { transform:scale(.97); } body.night-mode #app > .global-header .main-nav a { background:rgba(104,76,255,.18); color:#ae9fff; } #app > .global-header .main-nav a.active, body.day-mode #app > .global-header .main-nav a.active, body.night-mode #app > .global-header .main-nav a.active { background:var(--global-nav-active); color:var(--global-nav-active-text); } #app > .global-header .main-nav a span { color:inherit; } #app > .global-header .topbar-actions { display:flex; height:100%; align-items:center; gap:6px; grid-column:3; justify-self:end; margin:0; } #app > .global-header .account-nav { position:relative; display:flex; height:40px; align-items:center; gap:6px; } #app > .global-header .account-nav-trigger, body.day-mode #app > .global-header .account-nav-trigger, body.night-mode #app > .global-header .account-nav-trigger { display:flex; height:40px; min-height:40px; align-items:center; gap:5px; border:0; border-radius:999px; padding:0 9px 0 6px; background:var(--global-nav-idle-surface); color:#2f255f; -webkit-text-fill-color:#2f255f; box-shadow:none; transition:background-color .18s ease,transform .18s ease; } #app > .global-header .account-nav-trigger:hover, #app > .global-header .account-nav-trigger:focus-visible, body.day-mode #app > .global-header .account-nav-trigger:hover, body.day-mode #app > .global-header .account-nav-trigger:focus-visible, body.night-mode #app > .global-header .account-nav-trigger:hover, body.night-mode #app > .global-header .account-nav-trigger:focus-visible { background:var(--global-nav-hover-surface); } #app > .global-header .account-nav-trigger:focus-visible { outline:2px solid color-mix(in srgb,var(--global-nav-active) 42%,transparent); outline-offset:2px; } #app > .global-header .account-nav-trigger:active { transform:scale(.97); } body.night-mode #app > .global-header .account-nav-trigger{ border:1px solid #2d2938; background:#17171b; color:#c1b5ff; -webkit-text-fill-color:#c1b5ff; } body.night-mode #app > .global-header .account-nav-trigger:hover, body.night-mode #app > .global-header .account-nav-trigger:focus-visible{ background:#211c2c; } #app > .global-header .account-nav-trigger.account-nav-guest, body.day-mode #app > .global-header .account-nav-trigger.account-nav-guest{ width:40px; min-width:40px; max-width:40px; justify-content:center; border:1px solid color-mix(in srgb,var(--luca-purple) 54%,transparent); border-radius:50%; padding:0; background:color-mix(in srgb,var(--luca-purple) 9%,var(--global-nav-idle-surface)); color:var(--luca-purple); -webkit-text-fill-color:var(--luca-purple); } #app > .global-header .account-nav-trigger.account-nav-guest:hover, #app > .global-header .account-nav-trigger.account-nav-guest:focus-visible, body.day-mode #app > .global-header .account-nav-trigger.account-nav-guest:hover, body.day-mode #app > .global-header .account-nav-trigger.account-nav-guest:focus-visible{ background:color-mix(in srgb,var(--luca-purple) 16%,var(--global-nav-idle-surface)); } body.night-mode #app > .global-header .account-nav-trigger.account-nav-guest{ border-color:color-mix(in srgb,var(--luca-purple) 70%,#fff); background:color-mix(in srgb,var(--luca-purple) 16%,#17171b); color:#aa9aff; -webkit-text-fill-color:#aa9aff; } body.night-mode #app > .global-header .account-nav-trigger.account-nav-guest:hover, body.night-mode #app > .global-header .account-nav-trigger.account-nav-guest:focus-visible{ background:color-mix(in srgb,var(--luca-purple) 26%,#17171b); } #app > .global-header .account-nav-guest .account-nav-avatar svg{ display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } #app > .global-header .account-nav-trigger .account-nav-avatar { display:grid; width:28px; height:28px; flex:0 0 28px; place-items:center; overflow:hidden; border-radius:50%; background:color-mix(in srgb,var(--luca-purple) 14%,transparent); font-size:14px; font-weight:900; line-height:1; } #app > .global-header .account-nav-trigger .account-nav-avatar img { display:block; width:100%; height:100%; object-fit:cover; } #app > .global-header .account-nav-trigger .account-nav-avatar [data-night-avatar-fallback][hidden] { display:none; } #app > .global-header .account-nav-trigger > i { color:inherit; font-size:10px; font-style:normal; line-height:1; } #app > .global-header .night-hello-bell { position:relative; display:grid; width:40px; height:40px; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--global-nav-active); transition:background-color .18s ease,color .18s ease,transform .18s ease; } body.night-mode #app > .global-header .night-hello-bell { color:#f5f5f7; } #app > .global-header .night-hello-bell:hover, #app > .global-header .night-hello-bell:focus-visible { background:var(--global-nav-hover-surface); color:var(--global-nav-hover); } body.night-mode #app > .global-header .night-hello-bell:hover, body.night-mode #app > .global-header .night-hello-bell:focus-visible { background:rgba(255,255,255,.12); color:#c8bdff; } #app > .global-header .night-hello-bell:active { transform:scale(.95); } #app > .global-header .night-hello-bell svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } #app > .global-header .night-hello-badge, #app > .global-header .account-nav .night-hello-badge { position:absolute; top:-2px; right:-1px; border:2px solid #f5f5f7; } #app > .global-header .account-dropdown { position:absolute; top:calc(100% + 8px); right:0; z-index:320; display:grid; width:min(264px,calc(100vw - 32px)); padding:8px; border:0; border-radius:18px; background:#f5f5f7; color:#191919; box-shadow:0 16px 40px rgba(38,28,112,.16); } body.night-mode #app > .global-header .account-dropdown { border:1px solid rgba(255,255,255,.12); background:#17171b; color:#f5f5f7; box-shadow:0 20px 48px rgba(0,0,0,.5); } #app > .global-header .account-dropdown[hidden] { display:none; } #app > .global-header .account-dropdown a { display:flex; min-height:42px; align-items:center; gap:10px; margin-bottom:4px; padding:0 14px; border:0; border-radius:999px; background:transparent; color:var(--global-nav-idle); font-weight:800; line-height:1; text-decoration:none; } body.night-mode #app > .global-header .account-dropdown a { color:#b7a8f8; } #app > .global-header .account-dropdown a:hover, #app > .global-header .account-dropdown a:focus-visible, #app > .global-header .account-dropdown a[aria-current="page"] { background:var(--global-nav-hover-surface); color:var(--global-nav-hover); } body.night-mode #app > .global-header .account-dropdown a:hover, body.night-mode #app > .global-header .account-dropdown a:focus-visible { background:rgba(104,76,255,.18); color:#d5cdff; } body.night-mode #app > .global-header .account-dropdown a[aria-current="page"] { background:#684cff; color:#fff; } #app > .global-header .account-dropdown a svg, #app > .global-header .account-dropdown-signout svg { display:block; width:20px; height:20px; flex:0 0 20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } #app > .global-header .account-dropdown-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; padding-top:8px; border-top:1px solid rgba(104,76,255,.18); } body.night-mode #app > .global-header .account-dropdown-footer { border-top-color:rgba(255,255,255,.12); } #app > .global-header .account-dropdown-signout { display:flex; min-height:38px; align-items:center; justify-content:center; gap:7px; border:0; border-radius:999px; padding:0 12px; background:transparent; color:#b76565; font-weight:800; } #app > .global-header .account-dropdown-signout:hover, #app > .global-header .account-dropdown-signout:focus-visible { background:rgba(183,101,101,.1); color:#a75454; } body.night-mode #app > .global-header .account-dropdown-signout { color:#ef9b9b; } body.night-mode #app > .global-header .account-dropdown-signout:hover, body.night-mode #app > .global-header .account-dropdown-signout:focus-visible { background:rgba(239,155,155,.12); color:#ffc0c0; } #app > .global-footer, #app .app-shell .app-shell-main-content > .global-footer { width:100%; max-width:none; overflow-x:hidden; } @media (min-width:720px) and (max-width:1023px) { #app > .global-header .global-nav-inner { left:24px; width:calc(100vw - 48px); transform:none; } } @media (max-width:719px) { #app > .global-header, body.day-mode #app > .global-header, body.night-mode #app > .global-header { height:52px; min-height:52px; justify-content:flex-start; } #app > .global-header .global-nav-inner { position:relative; top:auto; left:auto; display:flex; width:100%; max-width:none; height:44px; margin:0; padding-right:max(16px,env(safe-area-inset-right)); padding-left:max(16px,env(safe-area-inset-left)); transform:none; } #app > .global-header .main-nav { display:none; } #app > .global-header .night-hello-bell { display:none; } #app > .global-header .topbar-actions { margin-left:auto; } #app > .global-header .account-nav-trigger, body.day-mode #app > .global-header .account-nav-trigger, body.night-mode #app > .global-header .account-nav-trigger { height:38px; min-height:38px; gap:5px; padding:0 12px 0 6px; } #app > .global-mobile-nav { position:fixed; z-index:220; bottom:max(16px,env(safe-area-inset-bottom)); left:50%; display:grid; grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr) minmax(0,1fr); width:min(400px,calc(100% - 20px)); height:56px; align-items:center; align-content:center; justify-items:center; margin:0; padding:4px 8px; overflow:visible; border:1px solid rgba(104,76,255,.1); border-radius:999px; background:rgba(255,255,255,.96); box-shadow:0 16px 40px rgba(36,26,86,.18); -webkit-backdrop-filter:none; backdrop-filter:none; box-sizing:border-box; transform:translateX(-50%); } body.night-mode #app > .global-mobile-nav { border-color:rgba(255,255,255,.1); background:rgba(17,17,20,.96); box-shadow:0 16px 40px rgba(0,0,0,.42); } #app > .global-mobile-nav a, .day-mode main #app > .global-mobile-nav a { position:relative; display:grid; width:100%; min-width:0; height:48px; place-items:center; align-content:center; gap:4px; padding:0 8px; overflow:visible; border:0; border-radius:999px; background:transparent; color:#b7a8f8; font-size:11px; font-weight:800; letter-spacing:.01em; text-decoration:none; text-transform:none; box-sizing:border-box; transition:transform .18s ease,background-color .18s ease; } #app > .global-mobile-nav .mobile-nav-icon { display:block; width:22px; height:22px; object-fit:contain; opacity:.42; transition:opacity .18s ease,transform .18s ease; } #app > .global-mobile-nav svg.mobile-nav-icon { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } #app > .global-mobile-nav svg.mobile-nav-message-icon { fill:currentColor; stroke:none; } #app > .global-mobile-nav svg.mobile-nav-solid-icon { fill:currentColor; stroke:none; } #app > .global-mobile-nav .nav-text-wordmark { display:none; } #app > .global-mobile-nav .mobile-nav-notification-badge { position:absolute; top:1px; right:calc(50% - 22px); z-index:3; display:grid; min-width:17px; height:17px; place-items:center; padding:0 4px; border:2px solid rgba(255,255,255,.96); border-radius:999px; background:#ec3f88; color:#fff; -webkit-text-fill-color:#fff; font-size:9px; font-weight:850; line-height:1; box-sizing:border-box; box-shadow:0 5px 12px rgba(236,63,136,.28); } body.night-mode #app > .global-mobile-nav .mobile-nav-notification-badge { border-color:rgba(17,17,20,.96); } #app > .global-mobile-nav a.active, .day-mode main #app > .global-mobile-nav a.active { background:transparent; color:#6439fc; } #app > .global-mobile-nav a.active .nav-text-wordmark { color:#6439fc; } #app > .global-mobile-nav a.active .mobile-nav-icon { opacity:1; } #app > .global-mobile-nav a:not(.active):active { color:#6439fc; } #app > .global-mobile-nav a[href^="#my-night"] { z-index:2; width:82px; height:68px; justify-self:center; padding:0; background:transparent; box-shadow:none; } #app > .global-mobile-nav a[href^="#my-night"] .nav-text-wordmark { display:none; } #app > .global-mobile-nav a[href^="#my-night"] .mobile-nav-icon { width:72px; height:62px; opacity:.72; } #app > .global-mobile-nav a[href^="#my-night"].active .mobile-nav-icon { opacity:1; } #app > .global-mobile-nav a:active { transform:scale(.97); } body.article-route #app > .global-mobile-nav, body.night-card-route #app > .global-mobile-nav, body.my-night-checkin-active #app > .global-mobile-nav, body.account-route #app > .global-mobile-nav { display:none; } body.mobile-nav-hidden #app > .global-mobile-nav { opacity:0; pointer-events:none; box-shadow:none; transform:translate3d(-50%,calc(100% + 24px),0); } #app > .global-mobile-nav { transition:transform .28s ease,opacity .22s ease,box-shadow .22s ease; will-change:transform; } #app > .global-header .night-hello-bell { width:40px; height:40px; } #app > .global-header .night-hello-bell svg { width:19px; height:19px; } #app > .global-header .night-hello-badge, #app > .global-header .account-nav .night-hello-badge { top:0; right:0; min-width:16px; height:16px; padding:0 4px; border-width:1.5px; font-size:9px; } #app > .global-header .account-nav-trigger .account-nav-avatar { display:grid; } #app > .global-header .account-nav-trigger:not(.account-nav-guest) { width:52px; max-width:52px; height:40px; min-height:40px; gap:5px; padding:0 7px 0 5px; } #app > .global-footer, #app .app-shell .app-shell-main-content > .global-footer { margin-top:18px; padding:18px 16px calc(96px + env(safe-area-inset-bottom)); border-top:0; } #app > .global-footer .footer-feature-row, #app > .global-footer .footer-brand, #app .app-shell .app-shell-main-content > .global-footer .footer-feature-row, #app .app-shell .app-shell-main-content > .global-footer .footer-brand { display:none; } #app > .global-footer .footer-inner, #app .app-shell .app-shell-main-content > .global-footer .footer-inner { display:block; max-width:none; padding:0; border:0; text-align:center; } #app > .global-footer .footer-copy, #app .app-shell .app-shell-main-content > .global-footer .footer-copy { max-width:none; margin:0; color:#8a8a8f; font-size:11px; line-height:1.45; text-align:center; } } @media (min-width:720px) { #app > .global-mobile-nav { display:none; } } /* Shared screen-reader-only label primitive. */ #app .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .site-announcement{position:relative;z-index:28;display:flex;align-items:center;justify-content:center;gap:16px;min-height:46px;padding:9px 56px 9px 18px;background:#171522;color:#fff}.site-announcement>a,.site-announcement>span{color:inherit;text-decoration:none}.site-announcement span{display:flex;align-items:center;justify-content:center;gap:10px}.site-announcement strong{font-size:13px}.site-announcement small{font-size:12px;opacity:.82}.site-announcement button{position:absolute;right:18px;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:inherit;font-size:20px}.site-announcement.is-event{background:#6d4cff}.site-announcement.is-urgent{background:#e82d55}.night-city-ranking-preview{min-height:320px;display:grid;place-items:center;text-align:center}.night-city-ranking-preview header{justify-content:center!important}.night-city-ranking-preview header>div{max-width:560px} @media(max-width:719px){.site-announcement{padding:10px 46px 10px 14px}.site-announcement span{display:grid;justify-items:start;gap:2px}.site-announcement button{right:10px}.night-city-ranking-preview{min-height:240px}} /* Detail routes enter as a light spatial layer instead of replacing the screen abruptly. */ body.article-route { overflow-x:clip; } @keyframes oonite-detail-enter { from { opacity:0; transform:translate3d(0,12px,0) scale(.985); } to { opacity:1; transform:translate3d(0,0,0) scale(1); } } @keyframes oonite-detail-media-enter { from { opacity:.72; transform:scale(1.018); } to { opacity:1; transform:scale(1); } } body.place-route #app > .place-detail, body.article-route #app > .article-detail-page, body.night-card-route #app > .night-card-detail-page, body.moment-route #app > .moment-detail-page, body.public-profile-route #app > .public-profile-page { transform-origin:50% 20%; animation:oonite-detail-enter .32s cubic-bezier(.2,.78,.24,1) both; } body.place-route #app > .place-detail .place-hero-gallery, body.night-card-route #app > .night-card-detail-page .night-detail-image, body.moment-route #app > .moment-detail-page .moment-detail-gallery { transform-origin:50% 42%; animation:oonite-detail-media-enter .38s cubic-bezier(.2,.78,.24,1) both; } @media(max-width:719px) { body.place-route #app > .place-detail, body.article-route #app > .article-detail-page, body.night-card-route #app > .night-card-detail-page, body.moment-route #app > .moment-detail-page, body.public-profile-route #app > .public-profile-page { transform-origin:50% 12%; animation-duration:.36s; } } @media(prefers-reduced-motion:reduce) { body.place-route #app > .place-detail, body.article-route #app > .article-detail-page, body.night-card-route #app > .night-card-detail-page, body.moment-route #app > .moment-detail-page, body.public-profile-route #app > .public-profile-page, body.place-route #app > .place-detail .place-hero-gallery, body.night-card-route #app > .night-card-detail-page .night-detail-image, body.moment-route #app > .moment-detail-page .moment-detail-gallery { animation:none; } } /* Async community details can render more than once while their data settles. Replaying the page-enter animation on each render reads as repeated flashing, so these routes must enter in their final stable geometry. */ body.night-card-route #app > .night-card-detail-page, body.moment-route #app > .moment-detail-page, body.night-card-route #app > .night-card-detail-page .night-detail-image, body.moment-route #app > .moment-detail-page .moment-detail-gallery { animation:none !important; opacity:1 !important; transform:none !important; } /* iOS zooms the viewport when a focused form control computes below 16px. */ @media (max-width:719px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea { font-size:16px !important; } } /* App shell tokens and shared desktop/tablet layout skeleton. */ :root { /* Global OONITE design language. These roles are shared by every route; route files can consume them without inventing a new visual vocabulary. */ --oonite-global-font-family:"DM Sans",sans-serif; --oonite-global-brand-lime:#00ff09; --oonite-global-brand-purple:#684cff; --oonite-global-brand-purple-deep:#5633d9; --oonite-global-brand-purple-soft:#eeeaff; --oonite-global-color-night:#000; --oonite-global-color-day:#fafaf9; --oonite-global-surface-night:#1d1d1d; --oonite-global-surface-day:#fff; --oonite-global-text-on-dark:#fff; --oonite-global-text-on-light:#191919; --oonite-global-text-muted:#979797; --oonite-global-line-dark:#353535; --oonite-global-line-light:#e5e4e1; --oonite-global-type-xs:10px; --oonite-global-type-sm:12px; --oonite-global-type-body:15px; --oonite-global-type-lead:17px; --oonite-global-type-h3:19px; --oonite-global-type-h2:28px; --oonite-global-type-h1:clamp(40px,7vw,60px); --oonite-global-space-1:4px; --oonite-global-space-2:8px; --oonite-global-space-3:12px; --oonite-global-space-4:16px; --oonite-global-space-5:24px; --oonite-global-space-6:32px; --oonite-global-space-7:40px; --oonite-global-space-8:48px; --oonite-global-radius-sm:8px; --oonite-global-radius-md:12px; --oonite-global-radius-lg:20px; --oonite-global-radius-pill:999px; --oonite-global-shadow-soft:0 7px 22px rgba(34,31,27,.065); --oonite-global-shadow-raised:0 16px 44px rgba(0,0,0,.22); --oonite-global-shadow-floating:0 20px 60px rgba(0,0,0,.28); --oonite-global-control-height:40px; --oonite-global-control-height-compact:36px; --oonite-global-section-gap:32px; --oonite-global-section-gap-compact:24px; --oonite-global-focus-ring:color-mix(in srgb,var(--oonite-global-brand-purple) 28%,transparent); --oonite-color-ink:#17151d; --oonite-color-muted:#6d6879; --oonite-color-white:#fff; --oonite-color-purple:var(--oonite-global-brand-purple-deep); --oonite-color-purple-bright:var(--oonite-global-brand-purple); --oonite-color-purple-soft:#f0ecff; --oonite-color-lime:var(--oonite-global-brand-lime); --oonite-surface-day:#f5f5f7; --oonite-surface-sidebar-day:#fff; --oonite-surface-sidebar-night:#19171f; --oonite-line-day:#eeeaf2; --oonite-line-night:#2a2634; --oonite-focus-ring:color-mix(in srgb,var(--oonite-color-purple-bright) 42%,transparent); --oonite-radius-sm:var(--oonite-global-radius-sm); --oonite-radius-md:var(--oonite-global-radius-md); --oonite-radius-lg:var(--oonite-global-radius-lg); --oonite-radius-pill:var(--oonite-global-radius-pill); --oonite-shadow-soft:var(--oonite-global-shadow-soft); --oonite-shadow-floating:var(--oonite-global-shadow-floating); --oonite-type-display:var(--oonite-global-type-h1); --oonite-type-title:var(--oonite-global-type-h2); --oonite-type-body:var(--oonite-global-type-body); --oonite-type-nav:var(--oonite-global-type-sm); --oonite-type-label:var(--oonite-global-type-xs); --oonite-space-1:var(--oonite-global-space-1); --oonite-space-2:var(--oonite-global-space-2); --oonite-space-3:var(--oonite-global-space-3); --oonite-space-4:var(--oonite-global-space-4); --oonite-space-5:var(--oonite-global-space-5); --oonite-space-6:var(--oonite-global-space-6); --oonite-control-height:var(--oonite-global-control-height); --oonite-control-height-compact:var(--oonite-global-control-height-compact); --oonite-shell-utility-height: 48px; --oonite-page-gutter: clamp(20px, 2.6vw, 36px); --oonite-page-top: clamp(32px, 4vw, 56px); --oonite-page-bottom: clamp(56px, 6vw, 88px); --oonite-content-width-wide: min(1480px, 100%); --oonite-content-width-standard: min(1240px, 100%); --oonite-content-width-detail: min(1280px, 100%); /* Keep the fixed rail close to the compact Check-in entry so the shell reads as a focused consumer navigation, not a dashboard column. */ --app-shell-sidebar-width: clamp(168px, 12vw, 176px); --app-shell-sidebar-width-collapsed: 82px; --app-shell-sidebar-width-active: var(--app-shell-sidebar-width); --app-shell-sidebar-padding: 18px; --app-shell-sidebar-top-padding:28px; --app-shell-sidebar-nav-height:38px; --app-shell-sidebar-nav-gap:4px; --app-shell-sidebar-icon-size:22px; --app-shell-main-gap: 0px; /* Keep the utility Topbar slightly grayer than the main workspace so the content area reads as a calm canvas and white cards remain distinct. */ --app-shell-surface-app:#fafbfc; --app-shell-surface-main:#fafbfc; --app-shell-surface-page:#fafbfc; --app-shell-surface-section:#fff; --app-shell-surface-card:#fff; --app-shell-surface-overlay:rgba(255,255,255,.92); --app-shell-surface-line:#e5e4e1; --app-shell-surface-card-shadow:var(--oonite-global-shadow-soft); --app-shell-page-section-gap:var(--oonite-global-section-gap); --app-shell-main-content-padding: var(--oonite-page-gutter); --app-shell-main-max-width-standard: var(--oonite-content-width-standard); --app-shell-main-max-width-wide: var(--oonite-content-width-wide); --app-shell-main-max-width-detail: var(--oonite-content-width-detail); --app-shell-main-max-width: var(--app-shell-main-max-width-standard); --app-shell-secondary-width: clamp(264px, 22vw, 340px); --app-shell-nav-active-bg: #f0ecff; --app-shell-nav-active-text: #5633d9; --app-shell-nav-idle-text: #5f5a68; --app-shell-nav-hover-bg: #f7f5fb; --app-shell-nav-line: #eeeaf2; --app-shell-sidebar-surface: #fff; --app-shell-sidebar-top: var(--oonite-shell-utility-height); } body.night-mode .app-shell { --app-shell-nav-active-bg:#2b2342; --app-shell-nav-active-text:#c0b4ff; --app-shell-nav-idle-text:#aaa3b8; --app-shell-nav-hover-bg:#24202d; --app-shell-nav-line:#2a2634; --app-shell-sidebar-surface:#19171f; --app-shell-surface-app:#111114; --app-shell-surface-main:#111114; --app-shell-surface-page:#111114; --app-shell-surface-section:#17171b; --app-shell-surface-card:#1d1d1d; --app-shell-surface-overlay:rgba(23,23,27,.94); --app-shell-surface-line:#35343c; --app-shell-surface-card-shadow:0 12px 30px rgba(0,0,0,.22); } #app:has(> .app-shell[data-app-shell-mode='collapsed']) { --app-shell-sidebar-width-active:var(--app-shell-sidebar-width-collapsed); } .app-shell { --app-shell-sidebar-width-active: var(--app-shell-sidebar-width); --app-shell-main-max-width: var(--app-shell-main-max-width-standard); display:grid; grid-template-columns: var(--app-shell-sidebar-width-active) minmax(0, 1fr); grid-template-areas:"sidebar main"; align-items:start; gap:var(--app-shell-main-gap); width:100%; min-height:100dvh; max-width:none; margin:0; padding:0; background:var(--app-shell-surface-app); color:inherit; box-sizing:border-box; } .app-shell[data-app-shell-content-width='wide'] { --app-shell-main-max-width: var(--app-shell-main-max-width-wide); } .app-shell[data-app-shell-content-width='detail'] { --app-shell-main-max-width: var(--app-shell-main-max-width-detail); } .app-shell[data-app-shell-mode='collapsed'] { --app-shell-sidebar-width-active: var(--app-shell-sidebar-width-collapsed); grid-template-columns: var(--app-shell-sidebar-width-active) minmax(0, 1fr); grid-template-areas:"sidebar main"; } .app-shell[data-app-shell-has-secondary='true'] { grid-template-columns: var(--app-shell-sidebar-width-active) minmax(0, 1fr) var(--app-shell-secondary-width); grid-template-areas:"sidebar main secondary"; } .app-shell-sidebar { grid-area:sidebar; position:fixed; z-index:400; top:0; left:0; align-self:start; min-width:0; height:100dvh; min-height:100dvh; width:var(--app-shell-sidebar-width-active); max-width:none; margin:0; box-sizing:border-box; padding:var(--app-shell-sidebar-top-padding) var(--app-shell-sidebar-padding) 20px; border-right:1px solid var(--app-shell-nav-line); background:var(--app-shell-sidebar-surface); } .app-shell-brand { display:flex; align-items:center; gap:10px; height:36px; margin:0 8px 32px; } .app-shell-brand-mark { display:none; width:40px; height:40px; overflow:hidden; background-image:url('assets/luca-choice-logo.svg'); background-repeat:no-repeat; background-position:left center; background-size:auto 21px; color:transparent; font-size:0; line-height:0; } .app-shell-brand-logo { display:block; width:126px; height:auto; } .app-shell-nav-group { display:grid; gap:var(--app-shell-sidebar-nav-gap); margin:0 0 12px; max-width:none; padding:0; box-sizing:border-box; } .app-shell-nav-group + .app-shell-nav-group { margin-top:18px; padding-top:18px; border-top:1px solid var(--app-shell-nav-line); } .app-shell-nav-group-title { margin:6px 10px 8px; font-size:var(--oonite-type-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--app-shell-nav-idle-text); } .app-shell-nav-links { display:grid; gap:4px; } #app > .app-shell .app-shell-nav-group .night-checkin-fab { display:flex; width:clamp(112px,10vw,128px); min-height:48px; align-items:center; justify-content:space-between; gap:8px; margin:0 0 6px; padding:0 8px; border:2px solid var(--oonite-color-purple-bright); border-radius:var(--oonite-radius-pill); background:var(--oonite-color-white); color:var(--oonite-color-purple-bright); -webkit-text-fill-color:currentColor; box-shadow:var(--oonite-shadow-soft); font-family:inherit; cursor:pointer; transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease,opacity .18s ease; } #app > .app-shell .app-shell-nav-group .night-checkin-fab img { display:block; width:30px; height:30px; flex:0 0 30px; object-fit:contain; } #app > .app-shell .app-shell-nav-group .night-checkin-fab span { display:inline-flex; width:24px; height:24px; flex:0 0 24px; align-items:center; justify-content:center; border-radius:var(--oonite-radius-pill); background:var(--oonite-color-purple-bright); color:var(--oonite-color-white); -webkit-text-fill-color:var(--oonite-color-white); font-size:21px; font-weight:500; line-height:1; } #app > .app-shell .app-shell-nav-group .night-checkin-fab:hover, #app > .app-shell .app-shell-nav-group .night-checkin-fab:focus-visible { background:#f7f5ff; } body.night-mode #app > .app-shell .app-shell-nav-group .night-checkin-fab { background:#fff; color:var(--oonite-color-purple-bright); border-color:var(--oonite-color-purple-bright); } body.night-mode #app > .app-shell .app-shell-nav-group .night-checkin-fab:hover, body.night-mode #app > .app-shell .app-shell-nav-group .night-checkin-fab:focus-visible { background:#f7f5ff; box-shadow:var(--oonite-shadow-soft); } #app > .app-shell .app-shell-nav-group .night-checkin-fab:focus-visible { outline:2px solid var(--oonite-focus-ring); outline-offset:2px; } /* The Sidebar reuses the original My Night chooser and check-in sheet. Keep this shell-scoped copy available on routes that do not load My Night CSS. */ #app > .app-shell .night-action-sheet { --shell-checkin-surface:#fff; --shell-checkin-soft:#f5f3fa; --shell-checkin-line:#ded9ef; --shell-checkin-text:#17161c; --shell-checkin-muted:#777380; --shell-checkin-purple:#684cff; position:fixed; z-index:240; inset:0; display:grid; place-items:center; padding:24px; box-sizing:border-box; } #app > .app-shell .night-action-sheet[hidden] { display:none; } #app > .app-shell .night-action-sheet .night-sheet-backdrop { position:absolute; z-index:0; inset:0; background:rgba(255,255,255,.68); -webkit-backdrop-filter:blur(14px) saturate(115%); backdrop-filter:blur(14px) saturate(115%); } body.night-mode #app > .app-shell .night-action-sheet .night-sheet-backdrop { background:rgba(0,0,0,.68); } #app > .app-shell .night-action-sheet .night-sheet, #app > .app-shell .night-action-sheet .night-checkin-sheet { position:relative; z-index:1; width:min(100%,760px); max-height:min(86dvh,720px); margin:auto; overflow:auto; padding:25px 24px 40px; border-radius:24px; background:var(--shell-checkin-surface); color:var(--shell-checkin-text); box-shadow:0 28px 80px rgba(0,0,0,.28); box-sizing:border-box; } body.night-mode #app > .app-shell .night-action-sheet .night-sheet, body.night-mode #app > .app-shell .night-action-sheet .night-checkin-sheet { --shell-checkin-surface:#17171a; --shell-checkin-soft:#222228; --shell-checkin-line:#3b3745; --shell-checkin-text:#f7f7fb; --shell-checkin-muted:#aaa6b0; background:var(--shell-checkin-surface); color:var(--shell-checkin-text); box-shadow:0 28px 80px rgba(0,0,0,.45); } #app > .app-shell .night-action-sheet .night-sheet-close { position:absolute; top:10px; right:12px; z-index:2; display:grid; width:40px; min-width:40px; height:40px; place-items:center; border:0; border-radius:50%; padding:0; background:transparent; color:var(--shell-checkin-muted); font-size:28px; line-height:1; } #app > .app-shell .night-action-sheet .night-checkin-sheet.is-create-chooser { overflow:visible; border:0; padding:0; background:transparent; box-shadow:none; } #app > .app-shell .night-action-sheet .night-checkin-sheet.is-create-chooser [data-night-checkin-content], #app > .app-shell .night-action-sheet .night-create-chooser, #app > .app-shell .night-action-sheet .night-create-options { min-height:0; border:0; background:transparent; box-shadow:none; } #app > .app-shell .night-action-sheet .night-checkin-sheet.is-create-chooser .night-sheet-close { top:-42px; right:0; color:#111; } body.night-mode #app > .app-shell .night-action-sheet .night-checkin-sheet.is-create-chooser .night-sheet-close { color:#fff; } #app > .app-shell .night-action-sheet .night-create-chooser { padding:0; color:var(--shell-checkin-text); } #app > .app-shell .night-action-sheet .night-create-options { display:grid; grid-template-columns:1fr 1fr; gap:16px; overflow:visible; border-radius:0; } #app > .app-shell .night-action-sheet .night-create-options button { display:grid; min-height:132px; justify-items:start; align-content:end; gap:4px; padding:16px; border:1px solid var(--shell-checkin-line); border-radius:20px; background:var(--shell-checkin-soft); color:var(--shell-checkin-text); text-align:left; } #app > .app-shell .night-action-sheet .night-create-options .night-create-night-card-option { border-color:transparent; background:var(--shell-checkin-purple); color:#fff; } #app > .app-shell .night-action-sheet .night-create-options .night-create-night-card-option strong, #app > .app-shell .night-action-sheet .night-create-options .night-create-night-card-option small { color:#fff; -webkit-text-fill-color:#fff; } #app > .app-shell .night-action-sheet .night-create-options .night-create-night-card-option small { color:rgba(255,255,255,.78); } #app > .app-shell .night-action-sheet .night-create-options .night-create-moment-option { border-color:#e4dff0; background:#fff; color:#17161c; box-shadow:0 10px 24px rgba(50,38,92,.08); } #app > .app-shell .night-action-sheet .night-create-options .night-create-moment-option small { color:#777380; } #app > .app-shell .night-action-sheet .night-create-options button:hover, #app > .app-shell .night-action-sheet .night-create-options button:focus-visible { border-color:var(--shell-checkin-purple); background:color-mix(in srgb,var(--shell-checkin-purple) 9%,var(--shell-checkin-surface)); transform:none; } #app > .app-shell .night-action-sheet .night-create-options .night-create-night-card-option:hover, #app > .app-shell .night-action-sheet .night-create-options .night-create-night-card-option:focus-visible { border-color:transparent; background:color-mix(in srgb,var(--shell-checkin-purple) 88%,#17161c); } #app > .app-shell .night-action-sheet .night-create-options .night-create-moment-option:hover, #app > .app-shell .night-action-sheet .night-create-options .night-create-moment-option:focus-visible { border-color:var(--shell-checkin-purple); background:color-mix(in srgb,var(--shell-checkin-purple) 5%,#fff); } #app > .app-shell .night-action-sheet .night-create-options button span { margin-bottom:auto; font-size:28px; line-height:1; } #app > .app-shell .night-action-sheet .night-create-options button strong { font-size:28px; line-height:1.1; } #app > .app-shell .night-action-sheet .night-create-options button small { color:var(--shell-checkin-muted); font-size:11px; line-height:1.25; } #app > .app-shell .night-action-sheet .night-create-options .night-create-expiry-note, #app > .app-shell .night-action-sheet .night-create-options .night-create-moment-note { display:block; margin-top:5px; font-size:10px; font-style:normal; font-weight:400; line-height:1.4; } #app > .app-shell .night-action-sheet .night-create-options .night-create-expiry-note { margin-top:6px; padding:5px 7px; border-radius:9px; background:color-mix(in srgb,var(--shell-checkin-purple) 10%,var(--shell-checkin-surface)); color:var(--shell-checkin-purple); } #app > .app-shell .night-action-sheet .night-create-options .night-create-night-card-option .night-create-expiry-note { background:rgba(255,255,255,.15); color:#fff; } #app > .app-shell .night-action-sheet .night-create-options .night-create-moment-note { color:inherit; font-size:9px; } @media (max-width:1023px) { #app > .app-shell .night-action-sheet .night-create-options { grid-template-columns:1fr; gap:12px; } #app > .app-shell .night-action-sheet .night-create-options button { min-height:122px; } #app > .app-shell .night-action-sheet .night-create-options button strong { font-size:24px; } } #app > .app-shell .my-night-route-page .night-checkin-fab { display:none; } .app-shell-nav-link { display:flex; align-items:center; gap:11px; min-height:var(--app-shell-sidebar-nav-height); border-radius:var(--oonite-radius-sm); padding:0 10px; color:var(--app-shell-nav-idle-text); font-size:var(--oonite-type-nav); font-weight:650; text-decoration:none; transition:background-color .18s ease,color .18s ease; } .app-shell-nav-link:hover, .app-shell-nav-link:focus-visible { background:var(--app-shell-nav-hover-bg); } .app-shell-nav-link:focus-visible { outline:2px solid var(--oonite-focus-ring); outline-offset:1px; } .app-shell-nav-link.is-active { background:var(--app-shell-nav-active-bg); color:var(--app-shell-nav-active-text); font-weight:800; } .app-shell-more-menu { position:relative; margin:0; } .app-shell-more-menu > summary { list-style:none; cursor:pointer; } .app-shell-more-menu > summary::-webkit-details-marker { display:none; } .app-shell-more-menu[open] > summary { background:var(--app-shell-nav-hover-bg); color:var(--app-shell-nav-active-text); } .app-shell-more-links { position:absolute; z-index:450; left:calc(100% + 12px); bottom:0; display:grid; gap:4px; width:220px; margin:0; padding:8px; border:1px solid var(--app-shell-nav-line); border-radius:18px; background:var(--app-shell-sidebar-surface); box-shadow:var(--oonite-shadow-floating); box-sizing:border-box; transform-origin:left bottom; animation:app-shell-more-pop .16s ease-out both; } @keyframes app-shell-more-pop { from { opacity:0; transform:translateX(-4px) scale(.97); } to { opacity:1; transform:none; } } .app-shell-more-links::before { content:""; position:absolute; left:-6px; bottom:15px; width:10px; height:10px; border-left:1px solid var(--app-shell-nav-line); border-bottom:1px solid var(--app-shell-nav-line); background:var(--app-shell-sidebar-surface); transform:rotate(45deg); } .app-shell-more-links .app-shell-more-link { position:relative; z-index:1; width:100%; box-sizing:border-box; min-height:var(--oonite-control-height); padding:0 14px; border-radius:999px; background:transparent; } .app-shell-more-link { display:flex; align-items:center; color:var(--app-shell-nav-idle-text); font-size:var(--oonite-type-nav); font-weight:650; line-height:1; text-decoration:none; transition:background-color .18s ease,color .18s ease; } .app-shell-more-link:hover, .app-shell-more-link:focus-visible { background:var(--app-shell-nav-hover-bg); color:var(--app-shell-nav-active-text); } .app-shell-more-link:focus-visible { outline:2px solid color-mix(in srgb, var(--app-shell-nav-active-text) 42%, transparent); outline-offset:-2px; } .app-shell-more-link.is-unavailable { color:rgba(248,248,248,.38); cursor:default; } body.day-mode .app-shell-more-menu > summary { color:var(--app-shell-nav-idle-text); } body.day-mode .app-shell-more-link { color:var(--app-shell-nav-idle-text); } body.day-mode .app-shell-more-link.is-unavailable { color:#aaa8b1; } body.night-mode #app > .app-shell .app-shell-more-links { border-color:var(--app-shell-nav-line); box-shadow:0 20px 48px rgba(0,0,0,.5); } body.night-mode #app > .app-shell .app-shell-more-links::before { background:var(--app-shell-sidebar-surface); border-color:var(--app-shell-nav-line); } @media (min-width:720px) { /* Night mode keeps the sidebar readable against the dark shell. Purple is reserved for the icon signal and active surface; navigation labels remain a calm near-white. */ body.night-mode #app > .app-shell .app-shell-nav-link, body.night-mode #app > .app-shell .app-shell-more-menu > summary, body.night-mode #app > .app-shell .app-shell-more-link { color:#f7f5fb !important; } body.night-mode #app > .app-shell .app-shell-nav-link.is-active, body.night-mode #app > .app-shell .app-shell-more-menu[open] > summary { color:#fff !important; } } .app-shell-nav-icon { display:grid; place-items:center; width:var(--app-shell-sidebar-icon-size); height:var(--app-shell-sidebar-icon-size); flex:0 0 var(--app-shell-sidebar-icon-size); } .app-shell-nav-icon svg { width:19px; height:19px; display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .app-shell-main { grid-area:main; min-width:0; width:100%; max-width:none; margin:0; padding:0; background:var(--app-shell-surface-main); overflow-x:clip; box-sizing:border-box; } .app-shell-main-content { width:100%; min-width:0; margin:0; padding:var(--oonite-shell-utility-height) var(--oonite-page-gutter) 0; background:var(--app-shell-surface-main); box-sizing:border-box; max-width:none; } .app-shell-main-content > section, .app-shell-main-content > main, .app-shell-main-content > article { width:100%; } #app > .app-shell .app-shell-main-content > section, #app > .app-shell .app-shell-main-content > main, #app > .app-shell .app-shell-main-content > article { max-width:none; margin:0; padding-right:0; padding-left:0; box-sizing:border-box; } /* Global Page Frame contract. The route root is marked by app.js after it is moved into the live Shell DOM, so the frame never owns page data or interaction setup. It only provides the shared outer geometry. */ #app > .app-shell .app-shell-main-content > [data-oonite-page-frame='true'] { width:100%; max-width:var(--oonite-content-width-standard); min-width:0; margin:0 auto; padding:var(--oonite-page-top) 0 var(--oonite-page-bottom); background:var(--app-shell-surface-page); box-sizing:border-box; } #app > .app-shell .app-shell-main-content > [data-oonite-page-frame='true'][data-oonite-page-frame-width='wide'] { max-width:var(--oonite-content-width-wide); } #app > .app-shell .app-shell-main-content > [data-oonite-page-frame='true'][data-oonite-page-frame-width='detail'] { max-width:var(--oonite-content-width-detail); } /* Shared surface primitives for future page-level polish. Existing routes may keep their special page surfaces; these attributes provide one vocabulary when a route opts into the global hierarchy. */ #app > .app-shell [data-oonite-surface='section'] { background:var(--app-shell-surface-section); border:1px solid var(--app-shell-surface-line); border-radius:var(--oonite-radius-lg); } #app > .app-shell [data-oonite-surface='card'] { background:var(--app-shell-surface-card); border:1px solid var(--app-shell-surface-line); border-radius:var(--oonite-radius-md); box-shadow:none; } #app > .app-shell [data-oonite-surface='elevated'] { background:var(--app-shell-surface-card); border:1px solid var(--app-shell-surface-line); border-radius:var(--oonite-radius-md); box-shadow:var(--app-shell-surface-card-shadow); } #app > .app-shell [data-oonite-surface='overlay'] { background:var(--app-shell-surface-overlay); border:1px solid var(--app-shell-surface-line); border-radius:var(--oonite-radius-lg); box-shadow:var(--oonite-shadow-floating); } @media (min-width:720px) { /* Page Frame is the single outer vertical rhythm source on Desktop/Tablet. Route interiors still own their special section spacing. */ #app > .app-shell .app-shell-main-content > [data-oonite-page-frame='true'] { padding-top:var(--oonite-page-top); padding-bottom:var(--oonite-page-bottom); } } .app-shell-secondary { grid-area:secondary; min-width:0; width:100%; max-width:none; margin:0; box-sizing:border-box; padding:0 0 24px; } .app-shell-secondary-panel { position:sticky; top:56px; width:100%; box-sizing:border-box; padding:0 var(--app-shell-sidebar-padding) 16px; } .app-shell[data-app-shell-mode='collapsed'] .app-shell-nav-link { justify-content:center; gap:0; padding:0 8px; } .app-shell[data-app-shell-mode='collapsed'] .app-shell-nav-label, .app-shell[data-app-shell-mode='collapsed'] .app-shell-nav-group-title, .app-shell[data-app-shell-mode='collapsed'] .app-shell-brand-logo { display:none; } .app-shell[data-app-shell-mode='collapsed'] .app-shell-more-links { display:none; } .app-shell[data-app-shell-mode='collapsed'] .app-shell-brand-mark { display:grid; } #app > .app-shell[data-app-shell-mode='collapsed'] .app-shell-nav-group .night-checkin-fab { width:48px; height:48px; min-height:48px; margin:0 auto 4px; padding:0; border-width:2px; border-radius:999px; position:relative; justify-content:center; } #app > .app-shell[data-app-shell-mode='collapsed'] .app-shell-nav-group .night-checkin-fab img { width:28px; height:28px; flex-basis:28px; } #app > .app-shell[data-app-shell-mode='collapsed'] .app-shell-nav-group .night-checkin-fab span { position:absolute; right:-5px; bottom:-5px; width:22px; height:22px; border:2px solid #fff; font-size:18px; } .app-shell[data-app-shell-mode='collapsed'][data-app-shell-has-secondary='true'] { grid-template-columns: var(--app-shell-sidebar-width-active) minmax(0, 1fr) var(--app-shell-secondary-width); grid-template-areas:"sidebar main secondary"; } @media (max-width:1199px) { .app-shell { --oonite-shell-utility-height: 52px; --oonite-page-gutter: clamp(18px, 3vw, 24px); --oonite-page-top: clamp(28px, 4vw, 44px); --oonite-page-bottom: clamp(48px, 6vw, 72px); --app-shell-sidebar-top: var(--oonite-shell-utility-height); } } @media (max-width:719px) { .app-shell { display:none; } } /* Shell routes keep the fixed header for utility actions only. */ #app > .global-header.app-shell-utility-header .topbar-brand, #app > .global-header.app-shell-utility-header .main-nav, #app > .global-header.app-shell-utility-header .menu-toggle { display:none; } @media (min-width:720px) { #app > .global-header.app-shell-utility-header, body.day-mode #app > .global-header.app-shell-utility-header, body.night-mode #app > .global-header.app-shell-utility-header { left:var(--app-shell-sidebar-width-active); width:calc(100% - var(--app-shell-sidebar-width-active)); } } #app > .global-header.app-shell-utility-header .global-nav-inner { grid-template-columns:minmax(0, 1fr) auto; } #app > .global-header.app-shell-utility-header .topbar-actions { grid-column:2; } /* Tablet keeps the compact shell state, but preserves labels so the product journey remains legible without asking people to decode icon-only controls. */ @media (min-width:720px) and (max-width:1023px) { #app:has(> .app-shell[data-app-shell-mode='collapsed']) { --app-shell-sidebar-width-active:168px; } .app-shell[data-app-shell-mode='collapsed'] { --app-shell-sidebar-width-active:168px; grid-template-columns:var(--app-shell-sidebar-width-active) minmax(0,1fr); } .app-shell[data-app-shell-mode='collapsed'] .app-shell-nav-link { justify-content:flex-start; gap:11px; padding:0 10px; } .app-shell[data-app-shell-mode='collapsed'] .app-shell-nav-label, .app-shell[data-app-shell-mode='collapsed'] .app-shell-nav-group-title, .app-shell[data-app-shell-mode='collapsed'] .app-shell-brand-logo { display:block; } .app-shell[data-app-shell-mode='collapsed'] .app-shell-brand-mark { display:none; } #app > .app-shell[data-app-shell-mode='collapsed'] .app-shell-nav-group .night-checkin-fab { width:clamp(112px,10vw,128px); height:auto; min-height:48px; margin:0 0 6px; padding:0 8px; border-radius:999px; position:relative; justify-content:space-between; } #app > .app-shell[data-app-shell-mode='collapsed'] .app-shell-nav-group .night-checkin-fab img { position:static; width:30px; height:30px; flex-basis:30px; } #app > .app-shell[data-app-shell-mode='collapsed'] .app-shell-nav-group .night-checkin-fab span { position:static; width:24px; height:24px; border:0; font-size:21px; } .app-shell[data-app-shell-mode='collapsed'] .app-shell-more-menu[open] .app-shell-more-links { display:grid; } } /* Collapsed shell navigation stays legible: icon first, compact label below. The expanded desktop rail and mobile navigation keep their existing layout. */ @media (min-width:720px) { /* Desktop/sidebar palette: purple is the OONITE navigation signal; labels stay quiet and dark so the rail supports the page instead of competing with it. Mobile navigation has its own visual system above. */ #app > .app-shell .app-shell-nav-link, #app > .app-shell .app-shell-more-menu > summary, #app > .app-shell .app-shell-more-link { color:#3f3a48; font-weight:560; } #app > .app-shell .app-shell-nav-link.is-active, #app > .app-shell .app-shell-more-menu[open] > summary { color:#3f3a48; font-weight:650; } #app > .app-shell .app-shell-nav-icon { color:var(--global-nav-active); } #app > .app-shell .app-shell-nav-link.is-active .app-shell-nav-icon, #app > .app-shell .app-shell-more-menu[open] .app-shell-nav-icon { color:var(--global-nav-active); } .app-shell[data-app-shell-mode='collapsed'] .app-shell-nav-link { flex-direction:column; justify-content:center; gap:3px; min-height:52px; padding:4px 3px; text-align:center; } .app-shell[data-app-shell-mode='collapsed'] .app-shell-nav-label { display:block; max-width:100%; overflow:hidden; font-size:9px; font-weight:750; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; } .app-shell[data-app-shell-mode='collapsed'] .app-shell-brand-logo { display:none; } .app-shell[data-app-shell-mode='collapsed'] .app-shell-brand-mark { display:grid; } } /* Tablet keeps the compact rail labels, but its brand remains the complete OONITE lockup rather than the desktop icon-only fallback. */ @media (min-width:720px) and (max-width:1023px) { .app-shell[data-app-shell-mode='collapsed'] .app-shell-brand { justify-content:flex-start; } .app-shell[data-app-shell-mode='collapsed'] .app-shell-brand-logo { display:block; width:126px; max-width:100%; height:auto; } .app-shell[data-app-shell-mode='collapsed'] .app-shell-brand-mark { display:none; } }