/* ========================================================================== HawaiiGuide OS — /os Note: Site base is html { font-size: 62.5% } so px values are explicit. ========================================================================== */ :root { --hgos-ink: #f8fbf7; --hgos-muted: rgba(248, 251, 247, 0.78); --hgos-glass: rgba(7, 29, 27, 0.34); --hgos-glass-strong: rgba(7, 29, 27, 0.56); --hgos-line: rgba(255, 255, 255, 0.22); --hgos-shadow: 0 24px 80px rgba(0, 0, 0, 0.38); } .hgos, .hgos * { box-sizing: border-box; } /* The boot splash + Toolbox + tab sheet are PORTALED to at init (they must escape .hgos's isolation stacking context to beat the site nav's z-index) — so they need their own box-sizing coverage. */ .hgos-boot, .hgos-boot *, .hgos-applib, .hgos-applib *, .hgos-tabsheet, .hgos-tabsheet *, .hgos-sync-review, .hgos-sync-review * { box-sizing: border-box; } /* Keep the shared header controls on /os so search and the main menu behave exactly as they do everywhere else. The OS treatment pares the row back to the centered brand plus quiet edge controls instead of the full desktop megamenu. */ body.hgos-page .goUS-header { display: block; padding: 0 3%; margin-top: -3px !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; /* The resting state must clear instantly. Brave can restore a prior scroll position before os.html resets to the top; a two-way background transition then leaves a fading glass rectangle behind the logo on initial paint. The sticky rule below owns the one-way fade-in instead. */ transition: none; } /* Match the /plan site-shell masthead once the shared header becomes sticky. The resting state stays transparent; the glass surface appears only after scrolling. */ body.hgos-page .goUS-header.is-sticky { background: rgba(6, 26, 24, 0.90) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; backdrop-filter: blur(18px) saturate(140%) !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28) !important; transition: background-color 220ms ease, box-shadow 220ms ease; } body.hgos-page .goUS-header:not(.is-sticky) .goUS-nav-main { height: 63px !important; max-width: 1280px; } @media (min-width: 1024px) { body.hgos-page .goUS-header:not(.is-sticky) .goUS-nav-main { height: 72px !important; } body.hgos-page .goUS-header.is-sticky .goUS-nav-main { height: 64px !important; } body.hgos-page .goUS-header.is-sticky .progress-container { top: 60px; margin-top: 0 !important; } } body.hgos-page .goUS-header .goUS-nav-item.dropdowns { display: none; } body.hgos-page .goUS-header a.hover.logo { width: fit-content; margin: 0 auto; } body.hgos-page .goUS-header .goUS-nav-item.menu .nav-inline-block { right: auto; left: 0; } body.hgos-page .goUS-header .goUS-nav-item.search-sm .search-icon { right: 0; } /* At iPad/desktop widths the shared navigation drawer enters from the right. Keep its trigger on that edge, move Search to the left, and lower both controls into optical alignment with the centered logo. Phones retain the original placement because their drawer still enters from the left. */ @media (min-width: 1024px) { body.hgos-page .goUS-header .goUS-nav-item.menu .nav-inline-block { top: 7px; right: 0; left: auto; } body.hgos-page .goUS-header .goUS-nav-item.search-sm .search-icon { top: 7px; right: auto; left: 0; } } body.hgos-page .goUS-header .menu-icon span, body.hgos-page .goUS-header .search-icon span, body.hgos-page .goUS-header.is-sticky .menu-icon span, body.hgos-page .goUS-header.is-sticky .search-icon span { color: #fff !important; text-shadow: none; } body.hgos-page .goUS-header .menu-icon span i, body.hgos-page .goUS-header .search-icon span i { font-size: 27px !important; } body.hgos-page .goUS-header .menu-icon:hover span, body.hgos-page .goUS-header .menu-icon:focus-visible span, body.hgos-page .goUS-header .search-icon:hover span, body.hgos-page .goUS-header .search-icon:focus-visible span { color: #fff !important; } body.hgos-page #type-feature-page { margin-top: 0; } body.hgos-page .hg-ubar { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.24); } body.hgos-page .hg-ubar-inner { max-width: 1680px; } body.hgos-page .hgos-ubar-brand { display: none; align-items: center; align-self: stretch; margin-right: 8px; padding: 4px 14px 4px 0; border-right: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0; } body.hgos-page .hgos-ubar-brand:hover, body.hgos-page .hgos-ubar-brand:focus-visible { background: transparent; opacity: 0.82; } body.hgos-page .hgos-ubar-brand img { display: block; width: 124px; height: auto; } /* The global Highlight Links mode uses a pale background for text links. Preserve this white image mark against the OS toolbar instead. */ body.hgos-page.hg-a11y-highlight-links .hg-ubar .hgos-ubar-brand { padding: 4px 14px 4px 0 !important; border-radius: 0 !important; background: transparent !important; color: #fff !important; text-decoration: none !important; } body.hgos-page .hg-ubar-os[aria-current="page"] { background: rgba(69, 170, 242, 0.22); box-shadow: inset 0 0 0 1px rgba(69, 170, 242, 0.38), 0 0 18px rgba(69, 170, 242, 0.10); } @media (max-width: 1350px) { body.hgos-page .hg-ubar-concierge { display: none; } } body.hgos-page { background: #071d1b; overflow-x: hidden; } body.hgos-boot-open { overflow: hidden; } .hgos-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .hgos-ui-icon, .hgos-tile-icon { display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .hgos-ui-icon { width: 1.05em; height: 1.05em; } .hgos-tile-icon { width: 58%; height: 58%; } .hgos-tile-fa-icon { display: block; flex: 0 0 auto; line-height: 1; } .hgos-tile-icon[hidden] { display: none; } /* Visible keyboard focus (WCAG 2.4.7) — high-contrast ring on every control */ .hgos a:focus-visible, .hgos button:focus-visible, .hgos input:focus-visible, .hgos-app:focus-visible, .hgos-filter:focus-visible, .hgos-wayfinder-link:focus-visible, .hgos-recent-app:focus-visible, .hgos-boot-skip:focus-visible, .hgos-boot-close:focus-visible, .hgos-boot-replay:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } .hgos *:focus:not(:focus-visible) { outline: none; } /* Portaled dialogs no longer have a .hgos ancestor, so their keyboard focus treatment must be explicit instead of relying on the root rule. */ .hgos-applib button:focus-visible, .hgos-applib input:focus-visible, .hgos-tabsheet button:focus-visible, .hgos-tabsheet input:focus-visible, .hgos-sync-review a:focus-visible, .hgos-sync-review button:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } /* The site-wide a:hover color is for article prose — inside the OS every link sits on dark glass and stays white on hover/focus. */ .hgos a:hover, .hgos a:focus-visible { color: #fff; } @media (display-mode: standalone) { body.hgos-page .hgos-app-bridge { display: none; } } .hgos { position: relative; display: flex; flex-direction: column; /* The shared body offset clears the fixed utility bar and the restored header now provides the brand row. Keep only dashboard breathing room here. The column layout lets the mini-footer absorb spare viewport height instead of leaving an empty tail. */ min-height: 100vh; min-height: 100dvh; margin-top: 0; padding: 18px 24px 22px; overflow: hidden; color: var(--hgos-ink); isolation: isolate; } /* Dynamic OS wallpaper. wallpaperManager.js supplies the current and next images plus a blend amount using Pacific/Honolulu time. The night image and dark base are intentional first-paint fallbacks, so the page remains usable even before the module or CDN image has loaded. Both image layers retain the existing legibility gradient; all glass, blur, and UI layers remain above this fixed background container. */ .hgos-bg { --hgos-wallpaper-current: url("https://cdn.hawaiiguide.io/cdn-cgi/image/width=1600,quality=80,format=auto/all-os/night.PNG"); --hgos-wallpaper-next: var(--hgos-wallpaper-current); --hgos-wallpaper-progress: 0; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-color: #071d1b; transform: scale(1.015); } .hgos-bg::before, .hgos-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(3, 13, 20, 0.16), rgba(3, 13, 20, 0.25) 42%, rgba(3, 13, 20, 0.52)), var(--hgos-wallpaper-current); background-size: cover; background-position: center; background-repeat: no-repeat; } .hgos-bg::after { background-image: linear-gradient(180deg, rgba(3, 13, 20, 0.16), rgba(3, 13, 20, 0.25) 42%, rgba(3, 13, 20, 0.52)), var(--hgos-wallpaper-next); opacity: var(--hgos-wallpaper-progress); } .hgos-bg.hgos-wallpaper-ready::after { transition: opacity 60s linear; } @media (prefers-reduced-motion: reduce) { .hgos-bg.hgos-wallpaper-ready::after { transition: none; } } .hgos-screen { width: min(1680px, 100%); /* Content defines the panel height. The old min-height (100vh-ish) stretched empty glass below the grid on tall screens — John's iPad "weird gap at the bottom". */ margin: 0 auto 16px; padding: 14px; border: 1px solid var(--hgos-line); border-radius: 32px; /* Keep the panel translucent without backdrop-filter. Chromium/Brave promote the large filtered surface to a compositor layer that can read as a faint horizontal band behind the preceding transparent masthead. */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)); /* Do not cast the shared 80px modal shadow from the dashboard screen. Its upward blur reaches beyond the rounded panel and across the logo row, creating a faint full-width rectangle that moves with the OS body. The panel's border and glass fill provide enough separation on the wallpaper. */ box-shadow: none; } .hgos-statusbar, .hgos-heading, .hgos-controls, .hgos-filter-row, .hgos-wayfinder { display: flex; align-items: center; } .hgos-statusbar { justify-content: center; gap: 10px; padding: 4px 8px 14px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.88); } .hgos-status-pill[hidden] { /* display:inline-flex below would otherwise beat the hidden attribute, leaving an empty blank pill (countdown pill with no upcoming trip) */ display: none; } .hgos-status-pill { display: inline-flex; align-items: center; gap: 6px; min-width: 0; /* let a too-wide pill shrink instead of overflowing the row */ /* 40px tap floor (July 2026 UX review): 30px pills sat under the comfortable-touch threshold for the site's 35-55 audience. */ min-height: 40px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(0, 0, 0, 0.18); color: #fff; text-decoration: none; } /* setLivePill puts its text here. Ellipsis can't fire on a bare text node inside the inline-flex pill — it just hard-clips mid-letter (the "37 days until Big Islan" iPhone report) — so the span is the truncation surface when a pill has to shrink. */ .hgos-status-pill-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Big-event alert pill — first in the statusbar whenever _data/weather_alert.yml is active (volcano, hurricane, high surf). Dark colored-cast fill + bright border + tinted icon keeps white text safe over any wallpaper; the color pop among neutral pills is the attention signal (no animation on purpose). */ .hgos-status-alert { font-weight: 800; } .hgos-status-alert .hgos-status-pill-text { max-width: 36ch; } .hgos-status-alert-red { background: rgba(64, 14, 10, 0.62); border-color: rgba(255, 138, 129, 0.78); } .hgos-status-alert-red i { color: #ff9892; } .hgos-status-alert-orange { background: rgba(58, 34, 4, 0.62); border-color: rgba(247, 199, 93, 0.78); } .hgos-status-alert-orange i { color: #f7c75d; } .hgos-status-alert-blue { background: rgba(8, 34, 58, 0.62); border-color: rgba(124, 199, 255, 0.78); } .hgos-status-alert-blue i { color: #7cc7ff; } .hgos-status-alert-green { background: rgba(6, 42, 27, 0.62); border-color: rgba(117, 224, 173, 0.78); } .hgos-status-alert-green i { color: #75e0ad; } .hgos-status-link:hover, .hgos-status-link:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.18); } /* Sunset is headline status data, so keep its white label readable even over the light daytime wallpaper. The dark ocean fill remains glassy but holds AA contrast at rest and on hover. */ .hgos-status-sunset { color: #fff; background: rgba(4, 35, 49, 0.88); border-color: rgba(255, 209, 102, 0.70); } .hgos-status-sunset i { color: #ffd166; } .hgos-status-sunset:hover, .hgos-status-sunset:focus-visible { background: rgba(4, 35, 49, 0.96); } /* Sync-attention pill — amber, visible only when review, retry, or re-pairing needs the traveler. Review and retry open the native OS dialog; only the email/code re-pair flow continues on My Trip. */ .hgos-status-sync { border-color: rgba(245, 196, 95, 0.55); background: rgba(245, 196, 95, 0.14); color: #ffe9b8; font: inherit; cursor: pointer; } .hgos-status-sync::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #f5c45f; box-shadow: 0 0 0 3px rgba(245, 196, 95, 0.16); } .hgos-status-sync:hover, .hgos-status-sync:focus-visible { background: rgba(245, 196, 95, 0.24); } /* ── In-OS Trip Sync review ───────────────────────────────────── */ .hgos-sync-review { position: fixed; inset: 0; z-index: 100000000041; display: grid; place-items: center; padding: 18px; background: rgba(3, 13, 20, 0.72); backdrop-filter: blur(14px); } .hgos-sync-review[hidden] { display: none; } .hgos-sync-review-panel { position: relative; width: min(560px, 100%); max-height: min(86vh, 720px); overflow-y: auto; padding: 28px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 26px; background: rgba(6, 26, 24, 0.97); color: #fff; box-shadow: var(--hgos-shadow); } .hgos-sync-review-close { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; font-size: 26px; line-height: 1; cursor: pointer; } .hgos-sync-review-kicker { margin: 0 48px 5px 0; color: #f5c45f; font-size: 12px; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; } .hgos-sync-review-panel h2 { margin: 0 48px 10px 0; color: #fff; font-size: 26px; line-height: 1.15; } .hgos-sync-review-description { margin: 0 0 16px; color: rgba(255, 255, 255, 0.82); font-size: 16px; line-height: 1.5; } .hgos-sync-review-changes { display: flex; flex-direction: column; gap: 3px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid rgba(245, 196, 95, 0.36); border-radius: 14px; background: rgba(245, 196, 95, 0.10); } .hgos-sync-review-changes[hidden], .hgos-sync-review-choices[hidden], .hgos-sync-review-progress[hidden] { display: none; } .hgos-sync-review-changes span { color: rgba(255, 255, 255, 0.62); font-size: 11px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; } .hgos-sync-review-changes strong { color: #fff4d8; font-size: 16px; line-height: 1.4; } .hgos-sync-review-progress { margin: 0 0 12px; color: #ffe1a0; font-size: 14px; font-weight: 700; line-height: 1.45; } .hgos-sync-review-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hgos-sync-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-height: 108px; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 15px; background: rgba(255, 255, 255, 0.07); color: #fff; font: inherit; text-align: left; cursor: pointer; } .hgos-sync-choice:hover { background: rgba(255, 255, 255, 0.14); } .hgos-sync-choice-primary { border-color: rgba(29, 151, 113, 0.78); background: rgba(29, 151, 113, 0.20); } .hgos-sync-choice-primary:hover { background: rgba(29, 151, 113, 0.31); } .hgos-sync-choice strong { font-size: 16px; line-height: 1.25; } .hgos-sync-choice span { color: rgba(255, 255, 255, 0.72); font-size: 13px; line-height: 1.45; } .hgos-sync-choice:disabled { opacity: 0.60; cursor: wait; } .hgos-sync-review-feedback { min-height: 22px; margin: 13px 0 0; color: rgba(255, 255, 255, 0.76); font-size: 14px; line-height: 1.45; } .hgos-sync-review-feedback[data-tone="ok"] { color: #8ce0b6; font-weight: 700; } .hgos-sync-review-feedback[data-tone="notice"] { color: #ffe1a0; font-weight: 700; } .hgos-sync-review-feedback[data-tone="error"] { color: #ffaaa4; font-weight: 700; } .hgos-sync-review-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .hgos-sync-retry, .hgos-sync-settings { min-height: 44px; padding: 11px 18px; border: 1px solid #f5c45f; border-radius: 999px; background: #f5c45f; color: #102b27; font: inherit; font-size: 14px; font-weight: 850; line-height: 1.3; text-decoration: none; cursor: pointer; } .hgos-sync-retry[hidden], .hgos-sync-settings[hidden] { display: none; } .hgos-sync-retry:hover, .hgos-sync-settings:hover { background: #ffda86; color: #102b27; } @media (max-width: 520px) { .hgos-sync-review-panel { padding: 24px 18px 20px; border-radius: 22px; } .hgos-sync-review-panel h2 { font-size: 23px; } .hgos-sync-review-choices { grid-template-columns: 1fr; } .hgos-sync-choice { min-height: 0; } } /* Keep the primary OS controls in the statusbar on every device so a traveler changing screens does not have to relearn their location. */ .hgos-status-widgets, .hgos-status-replay { display: inline-flex; font: inherit; cursor: pointer; } /* Ask the Guide voice pill — unlike the twins above it has no heading counterpart, so it stays visible at every size (the FABs that carry it elsewhere are hidden on the OS). Phones drop the label. */ .hgos-status-talk { font: inherit; cursor: pointer; } /* Phones repeat the utility bar's compass as a quiet destination mark. Tablet and wider screens use the same badge inside .hgos-heading. */ .hgos-os-signature { display: none; } .hgos-status-mobile-break { display: none; } .hgos-heading { /* Centered (John, July 2026): the Wayfinder and toolbar below sit on a center axis — the left-hung heading was the one off-axis element. Phones override to display:block and keep the compact left layout. */ justify-content: center; gap: 16px; padding: 0 8px 18px; } .hgos-heading h1 { margin: 0; } .hgos-heading h1 { /* No max-width: the 660px cap dated from when buttons sat beside the heading and force-wrapped the sentence at desktop sizes even with room to spare (John's July 2026 report). Buttons moved to the toolbar below; let the line run. */ font-size: clamp(28px, 4vw, 48px); line-height: 1.05; color: #fff; text-shadow: 0 4px 22px rgba(0, 0, 0, 0.34); } /* One OS identity at every width: phones float this mark in the statusbar; tablet and wider screens place the same compass badge in the heading. */ .hgos-heading-copy { display: flex; align-items: center; gap: 16px; min-width: 0; } .hgos-heading-signature { display: inline-flex; flex: 0 0 auto; width: 68px; height: 68px; align-items: center; flex-direction: column; justify-content: center; gap: 1px; border: 1px solid rgba(245, 196, 95, 0.52); border-radius: 20px; background: radial-gradient(circle at 34% 22%, rgba(245, 196, 95, 0.28), transparent 48%), linear-gradient(145deg, rgba(13, 65, 68, 0.94), rgba(3, 24, 34, 0.90)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.30); /* No backdrop-filter: the gradient above is ~0.9 opaque, so the blur was invisible but still cost a GPU layer (July 2026 perf pass — the page carried 32 live blur layers and janked on scroll). */ color: rgba(255, 255, 255, 0.92); font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: 0.10em; } .hgos-signature-compass { display: block; width: 34px; height: 34px; border-radius: 50%; } .hgos-heading-text { min-width: 0; } .hgos-boot-replay { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 999px; background: rgba(0, 0, 0, 0.22); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; } .hgos-boot-replay:hover, .hgos-boot-replay:focus-visible { background: rgba(255, 255, 255, 0.17); } .hgos-heading-btns { display: none; align-items: center; gap: 8px; flex: 0 0 auto; } .hgos-actions { display: flex; align-items: center; /* Centered under the Wayfinder (John's July 2026 report) — the right-aligned cluster read as stranded in the hero whitespace. */ justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 8px 14px; } /* Mouse/trackpad screens don't need the 40px touch floor — full-size pills read oversized on desktop (John's July 2026 report). Touch devices (coarse pointer, incl. iPads) keep the 40px tap target. */ @media (hover: hover) and (pointer: fine) { .hgos-actions .hgos-status-pill { min-height: 32px; padding: 5px 13px; font-size: 15px; } } /* The single Customize entry owns widget visibility, selection, and layout. */ .hgos-status-customize { background: rgba(3, 24, 34, 0.76); } /* A visible bridge from OS to the installable app. The older status pills were too easy to miss and disappeared entirely on phones. */ .hgos-app-bridge { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin: 24px 8px 6px; padding: 13px 15px; border: 1px solid rgba(245, 196, 95, 0.38); border-radius: 20px; background: linear-gradient(135deg, rgba(7, 48, 53, 0.98), rgba(9, 58, 60, 0.97)); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); color: #fff; text-decoration: none; } .hgos-app-bridge:hover, .hgos-app-bridge:focus-visible { background: linear-gradient(135deg, rgba(10, 61, 65, 0.99), rgba(12, 72, 72, 0.98)); } .hgos-app-bridge-icon { width: 58px; height: 58px; border-radius: 14px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28); } .hgos-app-bridge-copy { display: grid; min-width: 0; gap: 2px; } .hgos-app-bridge-kicker { width: max-content; padding: 2px 6px; border-radius: 999px; background: rgba(3, 24, 34, 0.74); color: #fff0c9; font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .hgos-app-bridge-copy strong { color: #fff; font-size: 18px; line-height: 1.2; } .hgos-app-bridge-copy small { color: #fff; font-size: 13px; font-weight: 700; line-height: 1.35; } .hgos-app-bridge-cta { display: inline-flex; align-items: center; gap: 5px; min-height: 42px; padding: 0 15px; border-radius: 999px; background: #f0b84a; color: #102b27; font-size: 13px; font-weight: 900; white-space: nowrap; } /* Rearrange toggle — active state reads unmistakably "you're in edit mode" (Tori's ask): solid white pill + label flips to "Done" via JS */ .hgos-edit-toggle.is-on { background: #fff; border-color: #fff; color: #102b27; } .hgos-edit-toggle.is-on:hover, .hgos-edit-toggle.is-on:focus-visible { background: rgba(255, 255, 255, 0.88); } .hgos-top-toggle.is-collapsed { border-color: rgba(240, 184, 74, 0.78); background: rgba(240, 184, 74, 0.28); } .hgos-top-extras[hidden] { display: none; } /* Desktop: every widget renders at the SAME width regardless of its wide/compact class. Standard desktop stays two-across so comparison cards retain enough room. Flex lets incomplete final rows expand at standard widths — the same rule as the phone bento. */ .hgos-widget-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .hgos-widget { --hgos-widget-accent: #78d9bd; --hgos-widget-accent-rgb: 120, 217, 189; --hgos-widget-status: var(--hgos-widget-accent); --hgos-widget-status-rgb: var(--hgos-widget-accent-rgb); position: relative; display: flex; flex-direction: column; /* Same iOS armor as .hgos-app (John's report: widgets went black on edit-mode press — Safari's NATIVE link-drag plate + callout were never suppressed here when the widget grid became draggable) */ -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; min-width: 0; min-height: 148px; padding: 14px 15px 13px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 24px; background: radial-gradient(circle at 8% 0%, rgba(var(--hgos-widget-accent-rgb), 0.18), transparent 52%), linear-gradient(145deg, rgba(10, 39, 43, 0.94), rgba(5, 24, 30, 0.86)); color: #fff; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 18px 44px rgba(0, 0, 0, 0.24); /* No backdrop-filter on widgets: the tile gradient is 0.86-0.94 opaque (0.99 on phones), so per-tile blur added nothing visible while being the single biggest contributor to the 32-layer blur pileup. */ touch-action: manipulation; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .hgos-widget::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 24px 0 0 24px; background: var(--hgos-widget-accent); opacity: 0.88; pointer-events: none; } .hgos-widget-size-wide, .hgos-widget-size-compact { /* 6px = half the 12px gap, so two cards + gap fill the row */ flex: 1 1 calc(50% - 6px); } /* Wide desktop has enough room for a denser dashboard: at the 1440px breakpoint each widget still receives roughly 445px within the OS panel. Keep incomplete customizable rows at the same card width and center them so an orphan never stretches into an empty-looking full-width panel. */ @media (min-width: 1440px) { .hgos-widget-grid { justify-content: center; } .hgos-widget-size-wide, .hgos-widget-size-compact { /* 8px = two-thirds of the 12px gap, so three cards + two gaps fill */ flex-grow: 0; flex-basis: calc(33.333% - 8px); } } .hgos-widget:hover, .hgos-widget:focus-visible { transform: translateY(-3px); border-color: rgba(var(--hgos-widget-accent-rgb), 0.66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 22px 52px rgba(0, 0, 0, 0.32); } .hgos-widget:active { transform: translateY(0) scale(0.985); } .hgos-widget:focus-visible { outline-color: var(--hgos-widget-accent); outline-width: 3px; } .hgos.is-editing .hgos-widget { cursor: grab; } .hgos.is-editing .hgos-widget:active { cursor: grabbing; } .hgos-widget-icon, .hgos-app-icon, .hgos-wayfinder-icon { display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 12px 26px rgba(0, 0, 0, 0.26); } .hgos-widget-icon { position: relative; /* anchors the edit-mode "−" remove badge */ width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; background: linear-gradient(145deg, rgba(var(--hgos-widget-accent-rgb), 0.64), rgba(var(--hgos-widget-accent-rgb), 0.28)); font-size: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 10px 24px rgba(var(--hgos-widget-accent-rgb), 0.20); } .hgos-widget-head { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 28px; align-items: center; gap: 10px; min-width: 0; } .hgos-widget-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; justify-self: end; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.76); font-size: 16px; transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease; } .hgos-widget:hover .hgos-widget-arrow, .hgos-widget:focus-visible .hgos-widget-arrow { transform: translateX(2px); background: rgba(var(--hgos-widget-accent-rgb), 0.16); color: #fff; } .hgos-widget-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .hgos-widget-copy strong { color: #fff; font-size: 16px; line-height: 1.15; overflow-wrap: anywhere; } .hgos-widget-copy em { margin-top: 2px; color: rgba(255, 255, 255, 0.90); font-size: 13px; font-style: normal; font-weight: 800; line-height: 1.2; letter-spacing: 0.035em; text-transform: uppercase; overflow-wrap: anywhere; } .hgos-widget-stage { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: flex-end; min-width: 0; margin-top: 12px; } .hgos-widget-desc { display: block; margin: 0; color: rgba(255, 255, 255, 0.90); font-size: 15px; line-height: 1.42; overflow-wrap: anywhere; } /* Once the renderer has a real answer, the generic explainer yields to it. The description remains useful as the pre-data/fallback state. */ .hgos-widget.has-live-data .hgos-widget-desc { display: none; } .hgos-widget-live { display: block; width: 100%; min-width: 0; color: #fff; font-variant-numeric: tabular-nums lining-nums; } .hgos-widget-live[hidden] { display: none; } .hgos-widget-reading { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .hgos-widget-primary { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 7px; min-width: 0; } .hgos-widget-value { color: #fff; font-size: 32px; font-size: clamp(29px, 2.6vw, 34px); font-weight: 850; line-height: 0.95; letter-spacing: -0.03em; text-wrap: balance; padding-left: 2px; } .hgos-widget-unit { align-self: flex-end; margin-bottom: 2px; color: rgba(255, 255, 255, 0.90); font-size: 14px; font-weight: 800; line-height: 1.1; } .hgos-widget-status { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 24px; padding: 3px 9px; border: 1px solid rgba(var(--hgos-widget-status-rgb), 0.34); border-radius: 999px; background: rgba(3, 24, 34, 0.88); color: #fff; font-size: 14px; font-weight: 850; line-height: 1.2; letter-spacing: 0.01em; overflow-wrap: anywhere; } .hgos-widget-status::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--hgos-widget-status); box-shadow: 0 0 0 3px rgba(var(--hgos-widget-status-rgb), 0.13); } /* Companion stats read as one compact chip row — value and label inline — instead of the stacked boxes that doubled tile height. */ .hgos-widget-secondary { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .hgos-widget-stat { display: inline-flex; flex-direction: row; /* wrap: on narrow half cards the label drops below the value instead of squeezing the value into mid-token breaks ("6:1/5") */ flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; max-width: 100%; padding: 4px 11px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 999px; background: rgba(255, 255, 255, 0.055); } .hgos-widget-stat-value { color: rgba(255, 255, 255, 0.96); font-size: 15px; font-weight: 850; line-height: 1.25; overflow-wrap: anywhere; } .hgos-widget-stat-label { color: rgba(255, 255, 255, 0.90); font-size: 14px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; } .hgos-widget-meter { position: relative; width: 100%; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.26); } .hgos-widget-meter-fill { display: block; width: var(--hgos-widget-meter, 0%); height: 100%; border-radius: inherit; background: var(--hgos-widget-status); box-shadow: 0 0 14px rgba(var(--hgos-widget-status-rgb), 0.48); } /* One quiet footer line per card (context · meta merged in the renderer) — the old two stacked faint lines were the single biggest avoidable height cost across the gallery. */ .hgos-widget-foot { display: block; color: rgba(255, 255, 255, 0.88); font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; } /* Fetch-backed widgets paint an explicit updating state immediately. Keep the semantic value available to assistive tech without drawing an empty box that looks like failed content; the colored status dot carries the live motion. */ .hgos-widget-reading.is-loading .hgos-widget-value { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hgos-widget-reading.is-loading .hgos-widget-status::before { animation: hgosWidgetLoading 1.25s ease-in-out infinite; } .hgos-widget[data-hgos-loading="1"] .hgos-widget-stage { justify-content: center; } @keyframes hgosWidgetLoading { 50% { opacity: 0.35; transform: scale(0.72); } } /* Layout archetypes keep unlike data from collapsing back into one template. */ .hgos-widget-layout-comparison .hgos-widget-stat:first-child { border-color: rgba(var(--hgos-widget-accent-rgb), 0.32); background: rgba(var(--hgos-widget-accent-rgb), 0.11); } .hgos-widget-layout-action .hgos-widget-stage, .hgos-widget-layout-content .hgos-widget-stage { justify-content: center; } .hgos-widget-layout-content .hgos-widget-value { font-size: clamp(19px, 2vw, 24px); line-height: 1.15; letter-spacing: -0.02em; } .hgos-widget-layout-timeline .hgos-widget-secondary { position: relative; padding-top: 9px; } .hgos-widget-layout-timeline .hgos-widget-secondary::before { content: ""; position: absolute; top: 2px; right: 5px; left: 5px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--hgos-widget-accent), rgba(255, 255, 255, 0.20)); } /* Widget cards share one instrument surface; tone is an accent system. The global tone gradients below continue to paint app icons. */ .hgos-widget[class*="hgos-tone-"] { background: radial-gradient(circle at 8% 0%, rgba(var(--hgos-widget-accent-rgb), 0.18), transparent 52%), linear-gradient(145deg, rgba(10, 39, 43, 0.94), rgba(5, 24, 30, 0.86)); } .hgos-widget.hgos-tone-green { --hgos-widget-accent: #5cdaa4; --hgos-widget-accent-rgb: 92, 218, 164; } .hgos-widget.hgos-tone-orange { --hgos-widget-accent: #ff9a52; --hgos-widget-accent-rgb: 255, 154, 82; } .hgos-widget.hgos-tone-blue { --hgos-widget-accent: #70b8ff; --hgos-widget-accent-rgb: 112, 184, 255; } .hgos-widget.hgos-tone-purple { --hgos-widget-accent: #b9a2ff; --hgos-widget-accent-rgb: 185, 162, 255; } .hgos-widget.hgos-tone-teal { --hgos-widget-accent: #54d5ce; --hgos-widget-accent-rgb: 84, 213, 206; } .hgos-widget.hgos-tone-aqua { --hgos-widget-accent: #63d8f4; --hgos-widget-accent-rgb: 99, 216, 244; } .hgos-widget.hgos-tone-forest { --hgos-widget-accent: #79d596; --hgos-widget-accent-rgb: 121, 213, 150; } .hgos-widget.hgos-tone-gold { --hgos-widget-accent: #f5c45f; --hgos-widget-accent-rgb: 245, 196, 95; } .hgos-widget.hgos-tone-coral { --hgos-widget-accent: #ff8a81; --hgos-widget-accent-rgb: 255, 138, 129; } .hgos-widget.hgos-tone-rose { --hgos-widget-accent: #f590b7; --hgos-widget-accent-rgb: 245, 144, 183; } .hgos-widget.hgos-tone-slate { --hgos-widget-accent: #b5c6da; --hgos-widget-accent-rgb: 181, 198, 218; } .hgos-widget[data-hgos-severity="good"], .hgos-widget[data-hgos-severity="low"], .hgos-widget[data-hgos-severity="normal"] { --hgos-widget-status: #75e0ad; --hgos-widget-status-rgb: 117, 224, 173; } .hgos-widget[data-hgos-severity="info"] { --hgos-widget-status: #7cc7ff; --hgos-widget-status-rgb: 124, 199, 255; } .hgos-widget[data-hgos-severity="active"] { --hgos-widget-status: #79e2bd; --hgos-widget-status-rgb: 121, 226, 189; } .hgos-widget[data-hgos-severity="watch"], .hgos-widget[data-hgos-severity="moderate"] { --hgos-widget-status: #f7c75d; --hgos-widget-status-rgb: 247, 199, 93; } .hgos-widget[data-hgos-severity="high"], .hgos-widget[data-hgos-severity="sensitive-groups"], .hgos-widget[data-hgos-severity="unhealthy-for-sensitive-groups"] { --hgos-widget-status: #ffae6b; --hgos-widget-status-rgb: 255, 174, 107; } .hgos-widget[data-hgos-severity="very-high"], .hgos-widget[data-hgos-severity="extreme"], .hgos-widget[data-hgos-severity="warning"], .hgos-widget[data-hgos-severity="delayed"], .hgos-widget[data-hgos-severity="unhealthy"], .hgos-widget[data-hgos-severity="very-unhealthy"], .hgos-widget[data-hgos-severity="hazardous"], .hgos-widget[data-hgos-severity="danger"] { --hgos-widget-status: #ff9892; --hgos-widget-status-rgb: 255, 152, 146; } .hgos-widget[data-hgos-severity="high"]::before, .hgos-widget[data-hgos-severity="sensitive-groups"]::before, .hgos-widget[data-hgos-severity="unhealthy-for-sensitive-groups"]::before, .hgos-widget[data-hgos-severity="very-high"]::before, .hgos-widget[data-hgos-severity="extreme"]::before, .hgos-widget[data-hgos-severity="warning"]::before, .hgos-widget[data-hgos-severity="delayed"]::before, .hgos-widget[data-hgos-severity="unhealthy"]::before, .hgos-widget[data-hgos-severity="very-unhealthy"]::before, .hgos-widget[data-hgos-severity="hazardous"]::before, .hgos-widget[data-hgos-severity="danger"]::before { background: var(--hgos-widget-status); box-shadow: 0 0 16px rgba(var(--hgos-widget-status-rgb), 0.35); } /* ── Widget ambient motion (trip-os-widget-ambient.html) ──────────── Decorative per-kind scenes behind the card content. Contract: slow loops, transform/opacity only, accent-colored at low alpha. The layer disappears under prefers-reduced-motion and in Rearrange mode. */ .hgos-widget-ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; } /* Card content stacks above the ambient scene */ .hgos-widget-head, .hgos-widget-stage { z-index: 1; } /* Keep the two sun scenes decorative: their bright accent lines must never become the effective background of the white widget title or eyebrow. */ .hgos-widget[data-hgos-widget="sunset"] .hgos-widget-head, .hgos-widget[data-hgos-widget="uv"] .hgos-widget-head { isolation: isolate; } .hgos-widget[data-hgos-widget="sunset"] .hgos-widget-head::before, .hgos-widget[data-hgos-widget="uv"] .hgos-widget-head::before { content: ""; position: absolute; inset: -6px 22px -6px -6px; z-index: -1; border-radius: 13px; background: linear-gradient(90deg, rgba(3, 24, 34, 0.94) 0%, rgba(3, 24, 34, 0.84) 72%, rgba(3, 24, 34, 0) 100%); pointer-events: none; } .hgos-widget-stage { position: relative; } .hgos-widget-ambient svg { position: absolute; display: block; overflow: visible; fill: none; stroke: none; } .hgos.is-editing .hgos-widget-ambient { display: none; } /* Rain Watch — staggered drops falling the card's full height */ .hgos-amb-rain svg { inset: 0; width: 100%; height: 100%; } .hgos-amb-drop { stroke: rgba(var(--hgos-widget-accent-rgb), 0.5); stroke-width: 2.5; stroke-linecap: round; opacity: 0; animation: hgosAmbFall 5.2s linear infinite; } .hgos-amb-t2 { animation-delay: 1.3s; } .hgos-amb-t3 { animation-delay: 2.6s; } .hgos-amb-t4 { animation-delay: 3.9s; } @keyframes hgosAmbFall { 0% { opacity: 0; transform: translateY(-14px); } 12% { opacity: 0.85; } 80% { opacity: 0.6; } 100% { opacity: 0; transform: translateY(180px); } } /* UV Index — sun rays in a slow, patient rotation */ .hgos-amb-uv svg { top: 50%; right: 12px; width: 84px; height: 84px; margin-top: -42px; } .hgos-amb-sunwheel { stroke: rgba(var(--hgos-widget-accent-rgb), 0.4); stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: hgosAmbSpin 70s linear infinite; } .hgos-amb-suncore { stroke: rgba(var(--hgos-widget-accent-rgb), 0.42); stroke-width: 3; animation: hgosAmbBreathe 6s ease-in-out infinite alternate; } @keyframes hgosAmbSpin { to { transform: rotate(360deg); } } @keyframes hgosAmbBreathe { from { opacity: 0.55; } to { opacity: 1; } } /* Golden Hour — a sun easing down toward the horizon line */ .hgos-amb-sunset svg { right: 14px; bottom: 30px; width: 96px; height: 74px; } .hgos-amb-horizon { stroke: rgba(var(--hgos-widget-accent-rgb), 0.34); stroke-width: 2; stroke-linecap: round; } .hgos-amb-dipsun { animation: hgosAmbDip 11s ease-in-out infinite alternate; } .hgos-amb-dipcore { fill: rgba(var(--hgos-widget-accent-rgb), 0.34); } .hgos-amb-dipglow { stroke: rgba(var(--hgos-widget-accent-rgb), 0.22); stroke-width: 2; animation: hgosAmbBreathe 5.5s ease-in-out infinite alternate; } @keyframes hgosAmbDip { from { transform: translateY(-2px); } to { transform: translateY(9px); } } /* Air & Vog — haze bands drifting on different clocks */ .hgos-amb-air svg { top: 50%; right: 10px; width: 130px; height: 64px; margin-top: -32px; } .hgos-amb-haze { fill: rgba(var(--hgos-widget-accent-rgb), 0.22); animation: hgosAmbDrift 13s ease-in-out infinite alternate; } .hgos-amb-haze.hgos-amb-t2 { fill: rgba(var(--hgos-widget-accent-rgb), 0.16); animation-duration: 17s; animation-delay: -6s; animation-direction: alternate-reverse; } .hgos-amb-haze.hgos-amb-t3 { fill: rgba(var(--hgos-widget-accent-rgb), 0.12); animation-duration: 15s; animation-delay: -11s; } @keyframes hgosAmbDrift { from { transform: translateX(-9px); } to { transform: translateX(9px); } } /* Ocean Waves — two swell lines sliding at different speeds. Wave period is 60/80 units and each loop travels exactly one period, so the motion is seamless. */ .hgos-amb-ocean svg { right: 0; bottom: 0; left: 0; width: 100%; height: 38px; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 48%); mask-image: linear-gradient(to bottom, transparent 0%, #000 48%); } .hgos-amb-wave { stroke: rgba(var(--hgos-widget-accent-rgb), 0.4); stroke-width: 2.5; stroke-linecap: round; animation: hgosAmbSwell 9s linear infinite; } .hgos-amb-wave.hgos-amb-t2 { stroke: rgba(var(--hgos-widget-accent-rgb), 0.22); animation: hgosAmbSwell2 14s linear infinite; } @keyframes hgosAmbSwell { to { transform: translateX(-60px); } } @keyframes hgosAmbSwell2 { to { transform: translateX(-80px); } } /* Jellyfish Window — one jelly pulsing upward with a gentle sway */ .hgos-amb-jelly svg { top: 22px; right: 16px; width: 64px; height: 108px; } .hgos-amb-jellyfloat { transform-box: fill-box; transform-origin: center; opacity: 0; animation: hgosAmbJelly 12s ease-in-out infinite; } .hgos-amb-bell { fill: rgba(var(--hgos-widget-accent-rgb), 0.2); stroke: rgba(var(--hgos-widget-accent-rgb), 0.42); stroke-width: 2; } .hgos-amb-tent { stroke: rgba(var(--hgos-widget-accent-rgb), 0.34); stroke-width: 2; stroke-linecap: round; } @keyframes hgosAmbJelly { 0% { opacity: 0; transform: translateY(18px) rotate(-3deg); } 14% { opacity: 1; } 50% { transform: translateY(4px) rotate(3deg); } 86% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px) rotate(-2deg); } } /* Whale Watch — a fluke rocking at the surface, bubbles rising */ .hgos-amb-whale svg { right: 12px; bottom: 26px; width: 104px; height: 74px; } .hgos-amb-fluke { fill: rgba(var(--hgos-widget-accent-rgb), 0.26); transform-box: fill-box; transform-origin: 50% 100%; animation: hgosAmbRock 7.5s ease-in-out infinite alternate; } .hgos-amb-bubble { fill: rgba(var(--hgos-widget-accent-rgb), 0.4); opacity: 0; animation: hgosAmbBubble 6s ease-out infinite; } .hgos-amb-bubble.hgos-amb-t2 { animation-delay: 3.2s; animation-duration: 7s; } @keyframes hgosAmbRock { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } } @keyframes hgosAmbBubble { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-24px); } } /* Gas Prices — a fuel drop falls, the puddle answers with a ripple. One shared 4.6s clock; the ripple wakes at the keyframe where the drop lands, so the two stay in sync without delays. */ .hgos-amb-gas svg { top: 50%; right: 18px; width: 52px; height: 96px; margin-top: -48px; } .hgos-amb-gasdrop { fill: rgba(var(--hgos-widget-accent-rgb), 0.45); opacity: 0; animation: hgosAmbGasDrop 4.6s cubic-bezier(0.5, 0, 0.85, 0.4) infinite; } .hgos-amb-ripple { stroke: rgba(var(--hgos-widget-accent-rgb), 0.42); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; animation: hgosAmbRipple 4.6s linear infinite; } @keyframes hgosAmbGasDrop { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 0.9; } 52% { opacity: 0.9; } 58% { opacity: 0; transform: translateY(58px); } 100% { opacity: 0; transform: translateY(58px); } } @keyframes hgosAmbRipple { 0%, 54% { opacity: 0; transform: scale(0.35); } 60% { opacity: 0.7; } 92% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } } /* Flights — one plane gliding up and across, then gone a while */ .hgos-amb-flights svg { top: 6px; right: 0; width: 200px; height: 90px; } .hgos-amb-plane { stroke: rgba(var(--hgos-widget-accent-rgb), 0.4); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: hgosAmbGlide 16s linear infinite; } @keyframes hgosAmbGlide { 0% { opacity: 0; transform: translate(-26px, 64px); } 8% { opacity: 0.75; } 52% { opacity: 0.75; } 60% { opacity: 0; transform: translate(206px, 2px); } 100% { opacity: 0; transform: translate(206px, 2px); } } /* Live Cams — the quiet pulse of a live signal */ .hgos-amb-cams svg { top: 50%; right: 20px; width: 48px; height: 48px; margin-top: -24px; } .hgos-amb-camdot { fill: rgba(var(--hgos-widget-accent-rgb), 0.55); animation: hgosAmbBreathe 2.8s ease-in-out infinite alternate; } .hgos-amb-camring { stroke: rgba(var(--hgos-widget-accent-rgb), 0.5); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; animation: hgosAmbPing 2.8s ease-out infinite; } @keyframes hgosAmbPing { 0% { opacity: 0.6; transform: scale(1); } 75% { opacity: 0; transform: scale(2.1); } 100% { opacity: 0; transform: scale(2.1); } } /* Today — agenda lines glowing in sequence, the day plan ticking itself off. Anchor card: the calmest scene of the whole set. */ .hgos-amb-today svg { top: 50%; right: 14px; width: 72px; height: 64px; margin-top: -32px; } .hgos-amb-agline { stroke: rgba(var(--hgos-widget-accent-rgb), 0.4); stroke-width: 3; stroke-linecap: round; opacity: 0; animation: hgosAmbSeq 8s ease-in-out infinite; } .hgos-amb-agline.hgos-amb-t2 { animation-delay: 2.6s; } .hgos-amb-agline.hgos-amb-t3 { animation-delay: 5.2s; } @keyframes hgosAmbSeq { 0% { opacity: 0; } 12% { opacity: 0.7; } 42% { opacity: 0.7; } 58% { opacity: 0; } 100% { opacity: 0; } } /* On Island — a compass needle wandering, never quite settled. Anchor card: slow and quiet. */ .hgos-amb-onisland svg { top: 50%; right: 14px; width: 72px; height: 72px; margin-top: -36px; } .hgos-amb-compassring { stroke: rgba(var(--hgos-widget-accent-rgb), 0.22); stroke-width: 2; } .hgos-amb-needle { fill: rgba(var(--hgos-widget-accent-rgb), 0.3); transform-box: fill-box; transform-origin: center; animation: hgosAmbWander 9s ease-in-out infinite alternate; } @keyframes hgosAmbWander { from { transform: rotate(-11deg); } to { transform: rotate(13deg); } } /* My Trip — the shaka gives a barely-there welcome wave. */ .hgos-amb-mytrip .fa-shaka { display: block; position: absolute; top: 50%; right: 16px; margin-top: -34px; color: rgba(var(--hgos-widget-accent-rgb), 0.28); font-size: 68px; line-height: 1; transform-origin: 68% 78%; animation: hgosAmbRock 9s ease-in-out infinite alternate; } /* Rental Cars — highway center dashes sliding along the card's bottom edge, below the text baseline (a dash row at text height reads as strikethrough). Dash period is 28 units and each loop travels exactly one period, so it's seamless. */ .hgos-amb-road svg { right: 0; bottom: 0; left: 0; width: 100%; height: 18px; } .hgos-amb-dashes { stroke: rgba(var(--hgos-widget-accent-rgb), 0.34); stroke-width: 3; stroke-linecap: round; animation: hgosAmbDashes 5.5s linear infinite; } @keyframes hgosAmbDashes { to { transform: translateX(-28px); } } /* Hotel Rates — a crescent moon over the night's stay, stars twinkling on their own clocks */ .hgos-amb-hotel svg { top: 50%; right: 14px; width: 84px; height: 84px; margin-top: -42px; } .hgos-amb-moon { fill: rgba(var(--hgos-widget-accent-rgb), 0.2); animation: hgosAmbBreathe 7s ease-in-out infinite alternate; } .hgos-amb-star { stroke: rgba(var(--hgos-widget-accent-rgb), 0.45); stroke-width: 2; stroke-linecap: round; opacity: 0; animation: hgosAmbSeq 6.5s ease-in-out infinite; } .hgos-amb-star.hgos-amb-t2 { animation-delay: 3.2s; } /* Trail Closures — footprints walking up the card in sequence */ .hgos-amb-trails svg { top: 50%; right: 12px; width: 64px; height: 96px; margin-top: -48px; } .hgos-amb-print { fill: rgba(var(--hgos-widget-accent-rgb), 0.38); opacity: 0; animation: hgosAmbSeq 6.4s linear infinite; } .hgos-amb-print.hgos-amb-t2 { animation-delay: 1.6s; } .hgos-amb-print.hgos-amb-t3 { animation-delay: 3.2s; } .hgos-amb-print.hgos-amb-t4 { animation-delay: 4.8s; } /* Park Status — the ranger-station flag waves on its pole */ .hgos-amb-parks svg { top: 50%; right: 14px; width: 64px; height: 84px; margin-top: -42px; } .hgos-amb-pole { stroke: rgba(var(--hgos-widget-accent-rgb), 0.3); stroke-width: 2.5; stroke-linecap: round; } .hgos-amb-banner { fill: rgba(var(--hgos-widget-accent-rgb), 0.18); stroke: rgba(var(--hgos-widget-accent-rgb), 0.36); stroke-width: 2; stroke-linejoin: round; transform-box: fill-box; transform-origin: left center; animation: hgosAmbRock 6.5s ease-in-out infinite alternate; } /* Reservations — a booking softly confirming itself every few seconds */ .hgos-amb-resv svg { top: 50%; right: 14px; width: 64px; height: 64px; margin-top: -32px; } .hgos-amb-confirm { stroke: rgba(var(--hgos-widget-accent-rgb), 0.42); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; opacity: 0; animation: hgosAmbConfirm 7.5s ease-out infinite; } @keyframes hgosAmbConfirm { 0% { opacity: 0; transform: scale(0.82); } 8% { opacity: 0.85; transform: scale(1.05); } 14% { transform: scale(1); } 52% { opacity: 0.85; } 68% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } /* This Week — festival confetti drifting down the card */ .hgos-amb-events svg { inset: 0; width: 100%; height: 100%; } .hgos-amb-conf { fill: rgba(var(--hgos-widget-accent-rgb), 0.42); opacity: 0; animation: hgosAmbConfetti 10s ease-in infinite; } .hgos-amb-conf.hgos-amb-t2 { animation-delay: 3.3s; } .hgos-amb-conf.hgos-amb-t3 { animation-delay: 6.6s; } @keyframes hgosAmbConfetti { 0% { opacity: 0; transform: translate(0, -10px); } 10% { opacity: 0.65; } 55% { transform: translate(-8px, 86px); } 80% { opacity: 0.45; } 100% { opacity: 0; transform: translate(5px, 176px); } } /* Audio Drives — a dot making the run from pin A to pin B */ .hgos-amb-drive svg { top: 50%; right: 12px; width: 84px; height: 84px; margin-top: -42px; } .hgos-amb-routeline { stroke: rgba(var(--hgos-widget-accent-rgb), 0.2); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 7; } .hgos-amb-routestop { fill: rgba(var(--hgos-widget-accent-rgb), 0.34); } .hgos-amb-traveler { fill: rgba(var(--hgos-widget-accent-rgb), 0.6); opacity: 0; animation: hgosAmbTravel 6.5s ease-in-out infinite; } @keyframes hgosAmbTravel { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 0.85; } 80% { opacity: 0.85; transform: translate(48px, -44px); } 92% { opacity: 0; transform: translate(48px, -44px); } 100% { opacity: 0; transform: translate(48px, -44px); } } /* Nearby Now — a you-are-here dot sending out its radar ripples */ .hgos-amb-nearby svg { top: 50%; right: 20px; width: 64px; height: 64px; margin-top: -32px; } .hgos-amb-neardot { fill: rgba(var(--hgos-widget-accent-rgb), 0.5); animation: hgosAmbBreathe 4.6s ease-in-out infinite alternate; } .hgos-amb-nearring { stroke: rgba(var(--hgos-widget-accent-rgb), 0.45); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; animation: hgosAmbPing 4.6s ease-out infinite; } .hgos-amb-nearring.hgos-amb-t2 { animation-delay: 2.3s; } /* Trending Now — a sparkline climbing, a sparkle drifting up it */ .hgos-amb-trending svg { top: 50%; right: 12px; width: 110px; height: 84px; margin-top: -42px; } .hgos-amb-trendline { stroke: rgba(var(--hgos-widget-accent-rgb), 0.28); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .hgos-amb-trendtip { fill: rgba(var(--hgos-widget-accent-rgb), 0.5); animation: hgosAmbBreathe 5s ease-in-out infinite alternate; } .hgos-amb-risespark { stroke: rgba(var(--hgos-widget-accent-rgb), 0.5); stroke-width: 2; stroke-linecap: round; opacity: 0; animation: hgosAmbRise 9s ease-in-out infinite; } @keyframes hgosAmbRise { 0% { opacity: 0; transform: translate(-9px, 12px); } 14% { opacity: 0.7; } 72% { opacity: 0.7; } 100% { opacity: 0; transform: translate(13px, -16px); } } @media (prefers-reduced-motion: reduce) { .hgos-widget-ambient { display: none; } } .hgos-recent { margin: 0 0 16px; padding: 12px 12px 13px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; /* Whisper container (July 2026 softening pass): its recent-app pills carry their own chrome — matches the .hgos-controls treatment. */ background: rgba(6, 26, 30, 0.32); } .hgos-recent[hidden] { display: none; } .hgos-recent-label { margin: 0 0 9px; padding: 0 2px; color: rgba(255, 255, 255, 0.85); /* lighter surface needs more ink */ font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .hgos-recent-row { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; /* overflow-x:auto clips vertically too — leave room for the pills' hover lift and focus ring so they don't get cut off */ padding: 7px 6px; margin: -4px -4px 0; } .hgos-recent-row::-webkit-scrollbar { display: none; } .hgos-recent-app { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 6px 14px 6px 6px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; transition: transform 0.18s ease, background 0.18s ease; } .hgos-recent-app:hover, .hgos-recent-app:focus-visible { transform: translateY(-2px); background: rgba(255, 255, 255, 0.16); } .hgos-recent-app .hgos-app-icon { width: 34px; height: 34px; border-radius: 11px; font-size: 16px; } .hgos-recent-app .hgos-app-icon-art { background: transparent !important; box-shadow: none; } .hgos-recent-app .hgos-app-art { filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.28)); } .hgos-recent-name { white-space: nowrap; } .hgos-controls { justify-content: space-between; gap: 12px; margin: 0 0 18px; /* Soft container (John, July 2026, take three): the original 0.72-opaque panel double-boxed the self-contained search + chip pills into one big black bar; removing it entirely left them floating with no grouping once custom Trip Kit chips wrapped to a second row. This light tint + hairline is just enough to read as one unit without competing with the Wayfinder. Phones still flatten this container in the mobile block. */ padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 24px; background: rgba(6, 26, 30, 0.32); } .hgos-search-panel { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 190px; } .hgos-mobile-tool, .hgos-search-close { display: none; } .hgos-search-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hgos-search { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 190px; color: #fff; } /* (0,2,2) with the type attribute so the master stylesheet's global `input[type='search']` rules (see CLAUDE.md Form Controls) can't repaint these fields with the light-gray site default */ .hgos .hgos-search input[type='search'] { appearance: none; -webkit-appearance: none; width: 100%; height: auto; min-height: 42px; margin: 0; border: 0; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.34); background: rgba(4, 20, 24, 0.62); /* softened from solid #061a20 (July 2026) */ color: #fff; font-family: inherit; font-size: 16px; padding: 0 14px; outline: none; box-shadow: none; } /* The field is a primary discovery control, so the placeholder uses full white on an opaque deep-ocean fill instead of a translucent gray. */ .hgos .hgos-search input[type='search']::placeholder { color: #fff; opacity: 1; } .hgos .hgos-search input[type='search']:focus { background: rgba(255, 255, 255, 0.18); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22); } .hgos-filter-row { flex: 0 1 auto; gap: 7px; overflow-x: auto; scrollbar-width: none; /* When the row scrolls (phones), the active chip's bubble shouldn't kiss the container edge / search field — scroll snapping breathing room pairs with setGroup()'s scrollIntoView (John's iPad report) */ scroll-padding: 0 10px; } .hgos-filter { scroll-margin: 0 10px; } /* Tablet and wide screens: WRAP instead of scroll — with custom tabs the row outgrew its line and the "All" chip silently scrolled out of view (John's "can't deselect Beach Day" report: his way back to everything had vanished off the left edge). Phones use the compact filter menu defined below. */ @media (min-width: 761px) { .hgos-filter-row { flex-wrap: wrap; overflow-x: visible; justify-content: flex-end; } } .hgos-filter-row::-webkit-scrollbar { display: none; } .hgos-filter { min-height: 38px; padding: 0 13px; border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 999px; background: rgba(9, 32, 38, 0.55); /* softened from solid #0b2830 (July 2026) */ color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; } .hgos-filter.is-active { border-color: #f0b84a; background: #f0b84a; color: #102b27; } /* ── Custom tabs (user-created) ──────────────────────────────── */ .hgos-custom-tabs { display: contents; /* chips flow inline with the built-in filter row */ } /* Resting state must NOT read as selected (John's "stuck on Beach Day" report — the permanent gold fill looked active next to the neutral built-ins). Rest = a whisper of gold on the border only; active = the full gold fill. */ .hgos-filter-custom { border-color: rgba(240, 184, 74, 0.32); background: rgba(255, 255, 255, 0.08); display: inline-flex; align-items: center; } .hgos-filter-custom-wrap { display: inline-flex; align-items: center; gap: 5px; } .hgos-filter-custom.is-active { border-color: #f0b84a; background: rgba(240, 184, 74, 0.38); color: #fff; } /* Delete is a separate real button, exposed only in Rearrange mode. */ .hgos-filter-custom-wrap .hgos-tab-del { display: none; width: 34px; height: 34px; padding: 0; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 50%; background: rgba(8, 25, 31, 0.88); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; } .hgos.is-editing .hgos-filter-custom-wrap .hgos-tab-del { display: inline-flex; } .hgos.is-editing .hgos-filter-custom-wrap .hgos-tab-del:hover, .hgos.is-editing .hgos-filter-custom-wrap .hgos-tab-del:focus-visible { border-color: rgba(255, 255, 255, 0.72); background: rgba(173, 45, 50, 0.92); } /* While a tile is being dragged, custom chips become drop targets */ .hgos-filter-custom.is-droppable { animation: hgosChipPulse 1s ease-in-out infinite; border-color: #f0b84a; } @keyframes hgosChipPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 184, 74, 0.0); } 50% { box-shadow: 0 0 0 5px rgba(240, 184, 74, 0.28); } } /* "This Trip" auto-tab — system-computed (teal, no delete ✕): contents follow the trip-context resolver (pre-trip kit → on-island kit) */ .hgos-filter-trip { border-color: rgba(34, 166, 160, 0.4); background: rgba(255, 255, 255, 0.08); } .hgos-filter-trip.is-active { border-color: #22a6a0; background: rgba(34, 166, 160, 0.42); color: #fff; } .hgos-filter-new { border-style: dashed; color: rgba(255, 255, 255, 0.72); } .hgos-filter-new:hover, .hgos-filter-new:focus-visible { color: #fff; border-color: rgba(255, 255, 255, 0.6); } /* Share bar — appears under the controls when a user tab is active */ .hgos-tab-share { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: -6px 0 14px; color: rgba(255, 255, 255, 0.72); font-size: 13px; font-weight: 700; } .hgos-tab-share[hidden] { display: none; } .hgos-tab-share-btn { padding: 6px 14px; border: 1px solid rgba(240, 184, 74, 0.6); border-radius: 999px; background: rgba(240, 184, 74, 0.16); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; } .hgos-tab-share-btn:hover { background: rgba(240, 184, 74, 0.32); } /* ── Tab sheet (create a tab / file an app under tabs) ───────── */ .hgos-tabsheet { position: fixed; inset: 0; z-index: 100000000041; /* above nav chrome, below the boot splash */ display: grid; place-items: center; padding: 18px; background: rgba(3, 13, 20, 0.66); backdrop-filter: blur(12px); } .hgos-tabsheet[hidden] { display: none; } .hgos-tabsheet-panel { width: min(430px, 100%); max-height: min(70vh, 560px); display: flex; flex-direction: column; padding: 20px 18px 14px; border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 24px; background: rgba(6, 26, 24, 0.94); color: #fff; box-shadow: var(--hgos-shadow); } .hgos-tabsheet-title { margin: 0 0 12px; font-size: 18px; font-weight: 800; line-height: 1.25; } .hgos-tabsheet-body { overflow-y: auto; min-height: 0; } .hgos-tabsheet-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 12px; margin: 0 0 8px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px; background: rgba(255, 255, 255, 0.07); color: #fff; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; } .hgos-tabsheet-row:hover { background: rgba(255, 255, 255, 0.14); } .hgos-tabsheet-row .hgos-tabsheet-state { flex: 0 0 auto; font-size: 13px; color: rgba(255, 255, 255, 0.6); } .hgos-tabsheet-row.is-on { border-color: rgba(240, 184, 74, 0.8); background: rgba(240, 184, 74, 0.18); } .hgos-tabsheet-row.is-on .hgos-tabsheet-state { color: #f0b84a; } .hgos-tabsheet-input { width: 100%; min-height: 44px; margin: 0 0 10px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 14px; background: rgba(255, 255, 255, 0.10); color: #fff; font-family: inherit; font-size: 16px; outline: none; appearance: none; -webkit-appearance: none; box-shadow: none; } .hgos-tabsheet-input::placeholder { color: rgba(255, 255, 255, 0.5); } .hgos-tabsheet-hint { margin: 2px 0 10px; font-size: 13px; color: rgba(255, 255, 255, 0.62); } .hgos-tabsheet-section { margin: 14px 2px 8px; color: rgba(255, 255, 255, 0.72); font-size: 11px; font-weight: 900; letter-spacing: 0.10em; text-transform: uppercase; } .hgos-tabsheet-section:first-child { margin-top: 2px; } .hgos-tabsheet-row--layout { min-height: 48px; border-color: rgba(240, 184, 74, 0.34); background: rgba(240, 184, 74, 0.10); } .hgos-tabsheet-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 10px; } .hgos-tabsheet-btn { min-height: 42px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; } .hgos-tabsheet-btn:hover { background: rgba(255, 255, 255, 0.24); } .hgos-tabsheet-done { background: #f0b84a; border-color: #f0b84a; color: #102b27; } .hgos-tabsheet-done:hover { background: #f6c766; } /* Quiet decline on the shared-tab import sheet — the gold footer button is the accept, so saying "no" needs its own honest control */ .hgos-tabsheet-decline { display: block; margin: 2px auto 0; padding: 8px 14px; border: none; background: none; color: rgba(255, 255, 255, 0.6); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .hgos-tabsheet-decline:hover { color: #fff; } .hgos-app-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 18px; /* The in-flow Wayfinder needs no viewport parking band; keep the tool grid's bottom rhythm independent from the navigation rail. */ padding: 10px 6px 26px; } .hgos-arrange-help { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 6px 12px; padding: 10px 12px; border: 1px solid rgba(245, 196, 95, 0.46); border-radius: 14px; background: rgba(245, 196, 95, 0.13); color: #fff2cf; font-size: 13px; font-weight: 700; line-height: 1.4; text-align: left; } .hgos-arrange-help[hidden] { display: none; } .hgos-arrange-help-copy { flex: 1 1 auto; text-align: center; } .hgos-arrange-help-copy strong { white-space: nowrap; } .hgos-arrange-done { flex: 0 0 auto; min-height: 40px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.82); border-radius: 999px; background: #f5c45f; color: #17342f; font-family: inherit; font-size: 13px; font-weight: 900; white-space: nowrap; cursor: pointer; } .hgos-arrange-done:hover, .hgos-arrange-done:focus-visible { background: #ffe09a; color: #0b2424; } @media (max-width: 560px) { .hgos-arrange-help { flex-direction: column; align-items: stretch; } .hgos-arrange-done { width: 100%; min-height: 44px; } } .hgos-app { display: grid; justify-items: center; align-content: start; gap: 7px; min-width: 0; color: #fff; text-align: center; text-decoration: none; transition: transform 0.18s ease; /* Long-press is the DRAG gesture (SortableJS) — suppress iOS Safari's link callout menu ("Open in New Tab / Copy Link / Save image…") and the text-selection loupe, which otherwise fire at ~500ms and win. -webkit-user-drag blocks Safari's NATIVE link-drag too (the system "black plate" drag preview) — Sortable runs forceFallback, so native DnD must never engage on these tiles. */ -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; /* No will-change here: permanently promoting all 24 tiles to GPU layers made the icons' drop-shadow rasterize mid-animation as a boxy alpha smudge. WAAPI promotes layers temporarily while animating anyway. */ } .hgos-app[hidden], .hgos-empty[hidden] { display: none !important; } .hgos-app-ghost { position: fixed !important; z-index: 9998; pointer-events: none; } .hgos-app:hover, .hgos-app:focus-visible { transform: translateY(-3px); color: #fff; } .hgos-app.is-launching { transform: translateY(-4px) scale(0.96); } /* The drop-slot ghost (John's UX ask): Sortable parks the ORIGINAL element at the prospective drop position while the floating clone follows the finger — style that parked element as a dashed empty slot so travelers can see exactly where the tile will land. */ .hgos-app.is-drag-src, .hgos-widget.is-drag-src { position: relative; opacity: 1; } .hgos-app.is-drag-src > *, .hgos-widget.is-drag-src > * { opacity: 0.14; /* faint preview of what lands here */ } .hgos-app.is-drag-src::after, .hgos-widget.is-drag-src::after { content: ""; position: absolute; inset: 2px; border: 2px dashed rgba(255, 255, 255, 0.55); border-radius: 18px; background: rgba(255, 255, 255, 0.06); pointer-events: none; } .hgos-widget.is-drag-src::after { border-radius: 22px; /* match the widget card's rounding */ } /* ── HawaiiGuide arrange state ───────────────────────────────── */ /* The familiar home-screen wiggle confirms that a long-press entered Rearrange mode; the gold outline keeps the state distinctively HG. */ @keyframes hgosWiggle { 0%, 100% { transform: rotate(-1.35deg); } 50% { transform: rotate(1.35deg); } } .hgos-app-grid.is-arranging .hgos-app:not(.is-drag-src):not(.sortable-fallback) { animation: hgosWiggle 0.34s ease-in-out infinite; border-radius: 18px; outline: 1px dashed rgba(245, 196, 95, 0.72); outline-offset: 5px; cursor: grab; } .hgos-widget-grid.is-arranging .hgos-widget:not(.is-drag-src):not(.sortable-fallback) { animation: hgosWiggle 0.36s ease-in-out infinite reverse; outline: 1px dashed rgba(245, 196, 95, 0.72); outline-offset: 4px; cursor: grab; } .hgos-app-grid.is-arranging .hgos-app:nth-child(2n):not(.is-drag-src):not(.sortable-fallback), .hgos-widget-grid.is-arranging .hgos-widget:nth-child(2n):not(.is-drag-src):not(.sortable-fallback) { animation-direction: reverse; animation-duration: 0.38s; } @media (prefers-reduced-motion: reduce) { .hgos-app-grid.is-arranging .hgos-app, .hgos-widget-grid.is-arranging .hgos-widget { animation: none; } } .hgos-layout-bar { margin: 0 0 14px; color: rgba(255, 255, 255, 0.66); font-size: 12.5px; font-weight: 700; text-align: center; } .hgos-layout-bar[hidden] { display: none; } /* "Save my OS offline" bar — sits under the grid with the layout bar; status text updates live during the cache-route download */ .hgos-offline-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; /* Bare row below the OS panel — the button pill IS the affordance; the old glass card around it read as a redundant second container (John, July 2026). background:none declared (not omitted) so nothing underneath can mask through. */ width: min(560px, calc(100% - 8px)); margin: 14px auto 16px; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; color: rgba(255, 255, 255, 0.72); font-size: 14px; font-weight: 700; text-align: center; } .hgos-offline-bar[hidden] { display: none; } .hgos-offline-btn { padding: 10px 20px; font-size: 14px; } .hgos-offline-btn:disabled { opacity: 0.6; cursor: default; } .hgos-offline-status { color: rgba(255, 255, 255, 0.82); } .hgos-layout-reset { padding: 4px 12px; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 999px; background: rgba(3, 24, 34, 0.82); color: #fff; font-size: 12.5px; font-weight: 800; cursor: pointer; } .hgos-layout-reset:hover, .hgos-layout-reset:focus-visible { border-color: rgba(245, 196, 95, 0.68); background: rgba(3, 24, 34, 0.96); } /* Armed state: unmistakably "this is the confirmation tap" */ .hgos-layout-reset.is-armed { border-color: rgba(217, 48, 37, 0.95); background: rgba(217, 48, 37, 0.85); color: #fff; } .hgos-layout-reset.is-armed:hover { background: rgba(217, 48, 37, 1); } /* ── Add Tools tile + HawaiiGuide Toolbox panel ─────────────── */ .hgos-app-add { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; } .hgos-app-add-icon { border: 2px dashed rgba(255, 255, 255, 0.44); border-radius: 22px; background: rgba(255, 255, 255, 0.07); box-shadow: none; color: rgba(255, 255, 255, 0.85); } .hgos-app-add:hover .hgos-app-add-icon, .hgos-app-add:focus-visible .hgos-app-add-icon { border-color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.14); color: #fff; } /* Grid-end Rearrange tile — active edit state is unmistakable */ .hgos-app-edit.is-on .hgos-app-add-icon { border-style: solid; border-color: #fff; background: rgba(255, 255, 255, 0.92); color: #102b27; } .hgos-applib { position: fixed; inset: 0; /* Above the site header/nav chrome (which uses z-indexes in the 100000000030s) — John's iPhone showed the dialog's title + close button sliding UNDER the sticky nav, unreachable. */ z-index: 100000000040; display: grid; place-items: center; padding: 18px; background: rgba(3, 13, 20, 0.72); backdrop-filter: blur(14px); } .hgos-applib[hidden] { display: none; } .hgos-applib-panel { width: min(560px, 100%); max-height: min(76vh, 640px); display: flex; flex-direction: column; padding: 20px 18px 12px; border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 26px; background: rgba(6, 26, 24, 0.92); color: #fff; box-shadow: var(--hgos-shadow); } .hgos-applib-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .hgos-applib-head h2 { margin: 0; color: #fff; font-size: 22px; line-height: 1.15; } .hgos-applib-close { width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 50%; background: rgba(255, 255, 255, 0.10); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; } .hgos-applib-close:hover { background: rgba(255, 255, 255, 0.22); } .hgos-applib-note { margin: 6px 0 12px; color: rgba(255, 255, 255, 0.76); font-size: 14px; line-height: 1.4; } .hgos-applib-search { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 14px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.72); } .hgos-applib-search input[type='search'] { appearance: none; -webkit-appearance: none; width: 100%; height: auto; min-height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: #fff; font-family: inherit; font-size: 15px; outline: none; box-shadow: none; } .hgos-applib-search input[type='search']::placeholder { color: rgba(255, 255, 255, 0.55); } .hgos-applib-list { overflow-y: auto; padding-right: 4px; } .hgos-applib-group[hidden], .hgos-applib-row[hidden], .hgos-applib-empty[hidden] { display: none; } .hgos-applib-group-label { margin: 14px 0 4px; padding: 0 4px; color: rgba(255, 255, 255, 0.60); font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .hgos-applib-group:first-child .hgos-applib-group-label { margin-top: 2px; } .hgos-applib-empty { margin: 14px 4px; color: rgba(255, 255, 255, 0.72); font-size: 14px; text-align: center; } .hgos-applib-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.09); } .hgos-applib-row:last-child { border-bottom: 0; } /* (0,2,0) so the app grid's 84px .hgos-app-icon base — which sits LATER in this file — can't inflate the panel's icons over the app names */ .hgos-applib-row .hgos-app-icon { width: 42px; height: 42px; border-radius: 13px; font-size: 18px; } .hgos-applib-copy { display: flex; flex-direction: column; min-width: 0; } .hgos-applib-copy strong { font-size: 15px; line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hgos-applib-copy em { color: rgba(255, 255, 255, 0.66); font-size: 12.5px; font-style: normal; font-weight: 700; } .hgos-applib-toggle { min-width: 82px; min-height: 34px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; } .hgos-applib-toggle:hover { background: rgba(255, 255, 255, 0.22); } .hgos-applib-toggle.is-on { border-color: rgba(29, 151, 113, 0.9); background: rgba(29, 151, 113, 0.55); } .hgos-applib-toggle:disabled { opacity: 0.55; cursor: not-allowed; filter: saturate(0.45); } .hgos-applib-toggle:disabled:hover { background: rgba(255, 255, 255, 0.12); } .hgos-applib-toggle.is-on:disabled:hover { background: rgba(29, 151, 113, 0.55); } .hgos-app-icon { width: 84px; height: 84px; border-radius: 22px; font-size: 34px; } .hgos-app-icon-art { background: transparent !important; box-shadow: none; overflow: visible; } .hgos-app-art { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 11px 16px rgba(0, 0, 0, 0.28)); /* The PNG is part of the tile, not a saveable/draggable image: no iOS "Save image in…" callout, no desktop image ghost-drag */ -webkit-touch-callout: none; -webkit-user-drag: none; } .hgos-app-title { max-width: 118px; color: #fff; font-size: 14px; font-weight: 800; line-height: 1.14; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.62); overflow-wrap: anywhere; } .hgos-app-label { max-width: 118px; margin-top: -3px; color: rgba(255, 255, 255, 0.88); /* was .72 — AA over bright bg areas */ font-size: 14px; /* was 12 — compact-widget floor for the 35-55 audience */ font-weight: 700; line-height: 1.1; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.60); } .hgos-empty { margin: 0 0 18px; padding: 18px; border-radius: 18px; background: rgba(0, 0, 0, 0.22); color: rgba(255, 255, 255, 0.84); font-size: 16px; text-align: center; } .hgos-empty-text { margin: 0 0 12px; } .hgos-empty-cta { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; } .hgos-empty-cta:hover, .hgos-empty-cta:focus-visible { background: rgba(255, 255, 255, 0.26); } /* ── App icon badges + date chip ─────────────────────────────── */ .hgos-app-icon { position: relative; } .hgos-badge { position: absolute; top: -6px; right: -8px; z-index: 2; min-width: 22px; height: 22px; padding: 0 6px; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 999px; background: #b3261e; /* was #d93025 — 4.5:1 with white numerals */ color: #fff; font-size: 12px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38); } .hgos-badge-dot { min-width: 16px; width: 16px; height: 16px; padding: 0; } .hgos-badge-amber { background: #f0b84a; } .hgos-date-chip { position: absolute; bottom: -6px; right: -7px; z-index: 2; min-width: 24px; height: 22px; padding: 0 5px; border-radius: 8px; background: rgba(255, 255, 255, 0.96); color: #0f6d51; font-size: 13px; font-weight: 900; line-height: 22px; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); } /* Remove badge — appears on every tile in Rearrange mode. Tap = remove the app from your OS (re-addable via the Toolbox). */ .hgos-remove-badge, .hgos-widget .hgos-remove-badge, .hgos-app .hgos-remove-badge { position: absolute; top: -8px; left: -8px; margin: 0; z-index: 3; display: none; align-items: center; justify-content: center; width: 24px; height: 24px; border: 2px solid rgba(255, 255, 255, 0.92); border-radius: 50%; background: rgba(18, 22, 26, 0.92); color: #fff; font-size: 16px; font-weight: 800; line-height: 1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.42); cursor: pointer; } /* Badges key on the EXPLICIT Rearrange state (root .is-editing, set only by setEditMode) — not the drag-transient .is-arranging. John's iPad showed badges with editing off: any path that strands the transient class (bfcache restore, an early Sortable choose) used to surface them. Rearrange = badges; everything else = never. */ .hgos.is-editing .hgos-app-grid .hgos-remove-badge, .hgos.is-editing .hgos-widget-grid .hgos-remove-badge { display: flex; } /* Badges are for the live grid only — hide them in cloned icons */ .hgos-recent-app .hgos-badge, .hgos-recent-app .hgos-date-chip, .hgos-recent-app .hgos-remove-badge, .hgos-launch-icon .hgos-badge, .hgos-launch-icon .hgos-date-chip, .hgos-launch-icon .hgos-remove-badge { display: none; } /* ── Second widget row: Now Playing + live rotator ───────────── */ .hgos-widget-row2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; margin-bottom: 16px; } .hgos-np, .hgos-rotator { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 26px; /* Soft card (July 2026 softening pass): text sits directly on this surface, so it stays darker than the whisper containers but well below the anchor tiles. */ background: rgba(6, 26, 30, 0.58); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16); } .hgos-rotator { /* Horizontal swipes change cards; vertical stays with the page scroll */ touch-action: pan-y; } .hgos-np { display: grid; grid-template-columns: 76px minmax(0, 1fr) 56px; gap: 14px; align-items: center; padding: 14px 16px; } .hgos-np-art { display: block; width: 76px; height: 76px; border-radius: 16px; object-fit: cover; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32); } .hgos-np-art-link { display: block; border-radius: 16px; } .hgos-np-art-link:focus-visible { outline: 3px solid #f5c45f; outline-offset: 3px; } .hgos-np-copy { display: flex; flex-direction: column; min-width: 0; color: #fff; } .hgos-np-copy em { color: rgba(255, 255, 255, 0.90); font-size: 13px; font-style: normal; font-weight: 800; text-transform: uppercase; } .hgos-np-new { display: inline-flex; align-items: center; margin-left: 5px; padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(245, 196, 95, 0.72); background: #17342f; color: #ffe4a3; font-size: 9px; line-height: 1.2; letter-spacing: 0.04em; vertical-align: 1px; } .hgos-np-new[hidden] { display: none; } .hgos-np-copy strong { margin-top: 2px; font-size: 17px; line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hgos-np-meta { margin-top: 3px; color: #fff; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hgos-np-meta a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } .hgos-np-bar { display: block; height: 4px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.16); } .hgos-np-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1d9771, #f0b84a); transition: width 0.4s linear; } .hgos-np-btn { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; transition: background 0.18s ease, transform 0.18s ease; } .hgos-np-btn:hover { background: rgba(255, 255, 255, 0.28); transform: scale(1.05); } .hgos-np-btn .hgos-tile-icon { width: 46%; height: 46%; } .hgos-np.is-playing .hgos-np-btn { background: rgba(255, 255, 255, 0.30); } /* ── Rotator ─────────────────────────────────────────────────── */ .hgos-rot-pane { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 13px; align-items: center; min-height: 104px; padding: 14px 16px 22px; color: #fff; text-decoration: none; } .hgos-rot-pane[hidden] { display: none; } .hgos-rot-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 15px; color: #fff; font-size: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 12px 26px rgba(0, 0, 0, 0.26); } .hgos-rot-copy { display: flex; flex-direction: column; min-width: 0; } .hgos-rot-copy em { color: rgba(255, 255, 255, 0.90); font-size: 13px; font-style: normal; font-weight: 800; text-transform: uppercase; } .hgos-rot-copy strong { margin-top: 2px; font-size: 17px; line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hgos-rot-copy span { margin-top: 3px; color: #fff; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hgos-rot-pane:hover .hgos-rot-copy strong, .hgos-rot-pane:focus-visible .hgos-rot-copy strong { text-decoration: underline; text-underline-offset: 3px; } .hgos-rot-dots { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 2px; pointer-events: none; } .hgos-rot-dot { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; pointer-events: auto; } .hgos-rot-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.38); transition: background 0.15s ease, transform 0.15s ease; } .hgos-rot-dot:hover::before, .hgos-rot-dot:focus-visible::before { background: rgba(255, 255, 255, 0.72); } .hgos-rot-dot.is-on::before { background: #fff; transform: scale(1.2); } .hgos-rot-pause { min-width: 50px; height: 32px; padding: 0 9px; border: 0; border-radius: 999px; background: rgba(3, 24, 34, 0.68); color: rgba(255, 255, 255, 0.86); font-family: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer; pointer-events: auto; } .hgos-rot-pause:hover, .hgos-rot-pause:focus-visible { background: rgba(3, 24, 34, 0.92); color: #fff; } /* ── Spotlight (site-wide search) ────────────────────────────── */ .hgos-spotlight { margin: 0 0 18px; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 22px; /* Soft card (July 2026 softening pass). */ background: rgba(6, 26, 30, 0.58); } .hgos-spotlight[hidden] { display: none; } .hgos-spotlight-label { margin: 0 0 8px; padding: 0 4px; color: rgba(255, 255, 255, 0.66); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .hgos-spot-row { display: block; padding: 9px 10px; border-radius: 14px; color: #fff; text-decoration: none; } .hgos-spot-row:hover, .hgos-spot-row:focus-visible { background: rgba(255, 255, 255, 0.12); } .hgos-spot-row strong { display: block; font-size: 15px; line-height: 1.25; } .hgos-spot-row span { display: block; margin-top: 1px; color: rgba(255, 255, 255, 0.72); font-size: 13px; line-height: 1.35; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hgos-spotlight-more { display: inline-block; margin: 6px 4px 0; color: rgba(255, 255, 255, 0.86); font-size: 13px; font-weight: 800; text-decoration: none; } .hgos-spotlight-more:hover, .hgos-spotlight-more:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .hgos-launch-scrim, .hgos-launch-card { position: fixed; pointer-events: none; } .hgos-launch-scrim { inset: 0; z-index: 9997; background: rgba(5, 18, 17, 0); backdrop-filter: blur(0); transition: background 0.28s ease, backdrop-filter 0.28s ease; } .hgos-launch-scrim.is-active { background: rgba(5, 18, 17, 0.46); backdrop-filter: blur(10px); } .hgos-launch-card { z-index: 9998; left: var(--hgos-launch-left); top: var(--hgos-launch-top); width: var(--hgos-launch-width); height: var(--hgos-launch-height); display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--hgos-launch-radius, 22px); background: rgba(255, 255, 255, 0.10); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28); color: #fff; opacity: 0.98; transform: translateZ(0); transition: left 0.32s cubic-bezier(.2, .8, .2, 1), top 0.32s cubic-bezier(.2, .8, .2, 1), width 0.32s cubic-bezier(.2, .8, .2, 1), height 0.32s cubic-bezier(.2, .8, .2, 1), border-radius 0.32s cubic-bezier(.2, .8, .2, 1), background 0.32s ease; } .hgos-launch-card.is-active { left: 18px; top: 18px; width: calc(100vw - 36px); height: calc(100vh - 36px); border-radius: 34px; background: rgba(16, 44, 40, 0.82); } .hgos-launch-content { display: grid; justify-items: center; gap: 14px; width: min(320px, 72vw); opacity: 0; transform: scale(0.78); transition: opacity 0.18s ease 0.08s, transform 0.24s cubic-bezier(.2, .8, .2, 1) 0.04s; } .hgos-launch-card.is-active .hgos-launch-content { opacity: 1; transform: scale(1); } .hgos-launch-icon { width: 82px; height: 82px; } .hgos-launch-icon .hgos-app-icon { width: 100%; height: 100%; } .hgos-launch-title { color: #fff; font-size: 20px; font-weight: 900; line-height: 1.1; text-align: center; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.48); } /* The global stylesheet's footer clearfix (footer:before/:after, display:table) would become phantom flex items in here. */ .hgos-mini-footer::before, .hgos-mini-footer::after { content: none; } .hgos-mini-footer { display: flex; align-items: center; align-self: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; width: calc(100% + 48px); margin: auto -24px -22px; padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); background: rgba(3, 24, 34, 0.68); box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.16); color: rgba(255, 255, 255, 0.72); font-size: 12px; font-weight: 800; backdrop-filter: blur(22px) saturate(140%); } .hgos-mini-footer a { color: rgba(255, 255, 255, 0.86); text-decoration: none; } .hgos-mini-footer a:hover, .hgos-mini-footer a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* "Shortcut: hawaiiguide.io" — the vanity domain 301s straight here */ .hgos-footer-shortcut strong { color: #f0b84a; font-weight: 800; } .hgos-wayfinder { position: relative; z-index: 8; display: grid; grid-template-columns: 92px repeat(4, minmax(0, 1fr)); gap: 4px; width: min(760px, calc(100% - 28px)); margin: 0 auto 18px; padding: 8px 10px; overflow: hidden; border: 1px solid rgba(245, 196, 95, 0.46); border-radius: 18px; background: radial-gradient(circle at 5% 0%, rgba(245, 196, 95, 0.18), transparent 32%), linear-gradient(115deg, rgba(13, 65, 68, 0.97), rgba(3, 24, 34, 0.96)); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.30); /* No backdrop-filter: the gradient above is 0.96+ opaque — the blur was invisible (July 2026 perf pass). */ } .hgos-wayfinder-brand { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; padding: 0 10px; border-right: 1px solid rgba(245, 196, 95, 0.28); color: #f5c45f; font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: 0.10em; text-transform: uppercase; } .hgos-wayfinder-brand .fa-hook { font-size: 22px; line-height: 1; } .hgos-wayfinder-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 52px; padding: 5px 7px; border-radius: 12px; color: #fff; font-size: 13px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); text-decoration: none; transition: background 0.18s ease, transform 0.18s ease; } .hgos-wayfinder-link:hover, .hgos-wayfinder-link:focus-visible { background: rgba(255, 255, 255, 0.11); transform: translateY(-1px); } .hgos-wayfinder-icon { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid rgba(245, 196, 95, 0.42); border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #f5c45f; font-size: 16px; box-shadow: none; } .hgos-wayfinder-copy { display: flex; flex-direction: column; min-width: 0; } .hgos-wayfinder-copy strong { font-size: 13px; font-weight: 900; line-height: 1.1; white-space: nowrap; } .hgos-wayfinder-copy small { margin-top: 2px; color: rgba(255, 255, 255, 0.90); font-size: 12px; font-weight: 700; line-height: 1.1; white-space: nowrap; } .hgos-tone-green { background: linear-gradient(145deg, #1d9771, #0f6d51); } .hgos-tone-orange { background: linear-gradient(145deg, #f27a24, #bd4e19); } .hgos-tone-blue { background: linear-gradient(145deg, #2f82d7, #15549e); } .hgos-tone-purple { background: linear-gradient(145deg, #7c5fd7, #47349d); } .hgos-tone-teal { background: linear-gradient(145deg, #22a6a0, #126f70); } .hgos-tone-aqua { background: linear-gradient(145deg, #28afd2, #136f9c); } .hgos-tone-forest { background: linear-gradient(145deg, #2f8d4e, #15572e); } .hgos-tone-gold { background: linear-gradient(145deg, #f0b84a, #c47a13); } .hgos-tone-coral { background: linear-gradient(145deg, #e85d4f, #ad2d32); } .hgos-tone-rose { background: linear-gradient(145deg, #d95f8d, #96345f); } .hgos-tone-slate { background: linear-gradient(145deg, #64748b, #334155); } /* ── One-time sync nudge (first customization only) ──────────── */ .hgos-sync-nudge { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 9; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(560px, calc(100% - 28px)); padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 20px; background: rgba(6, 30, 27, 0.90); color: rgba(255, 255, 255, 0.92); font-size: 14px; line-height: 1.35; box-shadow: 0 20px 52px rgba(0, 0, 0, 0.38); backdrop-filter: blur(18px); animation: hgosNudgeIn 0.35s cubic-bezier(.2, .8, .2, 1); } .hgos-sync-nudge[hidden] { display: none; } .hgos-sync-nudge-text { flex: 1 1 auto; min-width: 0; } .hgos-sync-nudge-cta { flex: 0 0 auto; padding: 7px 13px; border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 999px; background: rgba(29, 151, 113, 0.55); color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; } .hgos-sync-nudge-cta:hover, .hgos-sync-nudge-cta:focus-visible { background: rgba(29, 151, 113, 0.80); } .hgos-sync-nudge-close { flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.10); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; } .hgos-sync-nudge-close:hover { background: rgba(255, 255, 255, 0.22); } @keyframes hgosNudgeIn { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @media (prefers-reduced-motion: reduce) { .hgos-sync-nudge { animation: none; } .hgos-boot-panel .hgos-boot-oslogo { animation: none; } } .hgos-boot { position: fixed; inset: 0; z-index: 100000000042; /* intro splash tops everything, incl. site nav */ display: grid; place-items: center; padding: 18px; background: radial-gradient(circle at 50% 18%, rgba(29, 151, 113, 0.38), transparent 34%), rgba(3, 13, 20, 0.88); backdrop-filter: blur(28px); } .hgos-boot[hidden] { display: none; } .hgos-boot-panel { position: relative; width: min(420px, 100%); padding: 34px 28px; border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 30px; background: rgba(4, 24, 22, 0.72); color: #fff; text-align: center; box-shadow: var(--hgos-shadow); } .hgos-boot-close { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 50%; background: rgba(3, 24, 34, 0.76); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } .hgos-boot-panel img { width: 132px; height: auto; margin: 0 auto 18px; } /* The OS app icon is the boot logo — gentle settle-in timed against the 2.05s boot bar. Its transparent canvas keeps the glass squircle clean. */ .hgos-boot-panel .hgos-boot-oslogo { width: 96px; height: 96px; border-radius: 0; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.50)); animation: hgosBootLogo 0.7s cubic-bezier(.2, .8, .2, 1) both; } @keyframes hgosBootLogo { from { opacity: 0; transform: scale(0.84); } to { opacity: 1; transform: scale(1); } } .hgos-boot-kicker { margin: 0 0 6px; font-size: 13px; font-weight: 900; text-transform: uppercase; color: rgba(255, 255, 255, 0.70); } .hgos-boot h2 { margin: 0; color: #fff; font-size: clamp(24px, 7vw, 30px); line-height: 1.12; } .hgos-boot-bar { height: 8px; margin: 24px 0 16px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.14); } .hgos-boot-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1d9771, #f0b84a, #28afd2); animation: hgosBoot 2.05s cubic-bezier(.2, .8, .2, 1) forwards; } .hgos-boot-note { margin: 0 0 20px; color: rgba(255, 255, 255, 0.85); font-size: 17px; /* site readability floor (UX review) */ line-height: 1.45; } .hgos-boot-skip { min-height: 48px; padding: 0 30px; border: 0; border-radius: 999px; /* Gold primary (UX review: Enter read as an afterthought next to "Loading…" — the splash self-dismisses at 2.3s, so the fix is a louder CTA, not a title swap that would flash for 250ms) */ background: #f0b84a; color: #102b27; font-size: 15px; font-weight: 900; cursor: pointer; } @keyframes hgosBoot { to { width: 100%; } } @media (min-width: 1025px) { .hgos-boot-panel { width: min(620px, 100%); padding: 52px 56px; } .hgos-boot-panel .hgos-boot-oslogo { width: 128px; height: 128px; margin-bottom: 24px; } .hgos-boot h2 { font-size: 42px; } .hgos-boot-note { max-width: 470px; margin-right: auto; margin-left: auto; font-size: 20px; } .hgos-boot-skip { min-height: 54px; padding: 0 36px; font-size: 17px; } } @media (max-width: 980px) { .hgos { padding-top: 14px; } .hgos-app-grid { grid-template-columns: repeat(6, minmax(68px, 1fr)); } } @media (max-width: 760px) { .hgos { width: 100vw; max-width: 100vw; padding: 10px 10px 14px; overflow-x: hidden; } .hgos-screen { width: 100%; max-width: 100%; padding: 10px; border-radius: 26px; overflow: hidden; } .hgos-statusbar { position: relative; min-height: 82px; padding: 0 78px 8px 2px; flex-wrap: wrap; gap: 8px; justify-content: flex-start; } .hgos-status-pill { font-size: 14px; } /* Keep the existing purpose statement visible for returning visitors. The one-time tour is not a dependable explanation, while the compact line below costs little vertical space. */ .hgos-heading { display: block; padding: 0 2px 12px; } .hgos-heading-copy { position: static; display: block; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; } .hgos-heading-signature { display: none; } .hgos-heading h1 { max-width: none; /* 24px floor (July 2026 UX review): the old 18px floor rendered the page's one wayfinding anchor at body-text size on phones. */ font-size: clamp(24px, 6.4vw, 28px); line-height: 1.15; } .hgos-heading-btns { display: none; } .hgos-app-bridge { grid-template-columns: 48px minmax(0, 1fr); gap: 11px; margin: 22px 0 4px; padding: 12px; border-radius: 18px; background: linear-gradient(135deg, rgba(7, 48, 53, 0.98), rgba(9, 58, 60, 0.97)); } .hgos-app-bridge-icon { width: 48px; height: 48px; border-radius: 12px; } .hgos-app-bridge-copy strong { font-size: 16px; } .hgos-app-bridge-copy small { color: #fff; font-size: 12px; } .hgos-app-bridge-cta { grid-column: 2; justify-self: start; min-height: 36px; margin-top: -2px; padding: 0 13px; border: 1px solid rgba(245, 196, 95, 0.48); background: rgba(245, 196, 95, 0.14); color: #fff0c9; } .hgos-status-widgets, .hgos-status-replay { display: inline-flex; } /* These are actions, not translucent status readouts. A deeper glass fill keeps their white labels/icons above AA contrast even when the daytime wallpaper paints a bright blue behind the OS panel. */ .hgos-status-widgets, .hgos-status-talk, .hgos-status-replay { min-height: 44px; border-color: rgba(255, 255, 255, 0.34); background: rgba(3, 24, 34, 0.78); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 5px 14px rgba(0, 0, 0, 0.18); } .hgos-status-widgets:hover, .hgos-status-widgets:focus-visible, .hgos-status-talk:hover, .hgos-status-talk:focus-visible, .hgos-status-replay:hover, .hgos-status-replay:focus-visible { background: rgba(3, 24, 34, 0.94); } .hgos-status-talk { width: auto; justify-content: center; gap: 6px; padding: 0 12px; } .hgos-status-replay { width: auto; justify-content: center; gap: 6px; padding: 0 12px; } .hgos-actions { justify-content: center; /* match the centered Wayfinder above */ margin: 0 0 14px; gap: 8px; } .hgos-widget, .hgos-widget[class*="hgos-tone-"] { background: radial-gradient(circle at 8% 0%, rgba(var(--hgos-widget-accent-rgb), 0.14), transparent 52%), linear-gradient(145deg, rgba(5, 32, 36, 0.99), rgba(3, 20, 27, 0.99)); } .hgos-widget[data-hgos-widget="mytrip"] .hgos-widget-status { border-color: rgba(112, 184, 255, 0.62); background: #061a20; color: #fff; } .hgos-widget-status { background: #061a20; color: #fff; font-size: 14px; } .hgos-amb-onisland svg { right: -8px; width: 54px; height: 54px; margin-top: -27px; opacity: 0.24; } .hgos-os-signature { display: inline-flex; position: absolute; top: -4px; right: 2px; width: 68px; height: 68px; align-items: center; flex-direction: column; justify-content: center; gap: 1px; min-height: 0; margin: 0; padding: 0; border: 1px solid rgba(245, 196, 95, 0.52); border-radius: 20px; background: radial-gradient(circle at 34% 22%, rgba(245, 196, 95, 0.28), transparent 48%), linear-gradient(145deg, rgba(13, 65, 68, 0.94), rgba(3, 24, 34, 0.90)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.30); /* No backdrop-filter — ~0.9-opaque gradient (July 2026 perf pass). */ color: rgba(255, 255, 255, 0.92); font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: 0.10em; pointer-events: none; } .hgos-os-signature .hgos-signature-compass { width: 34px; height: 34px; } /* Phone pill cluster: the mic icon alone reads as "voice" — the label would crowd the Hide widgets + replay row. */ .hgos-talk-label { display: inline; } .hgos.is-compact .hgos-controls { margin-top: 0; } /* Phone: uniform HALF-row cards, the same 50% rule as desktop (John, 2026-07-13: full-width phone cards left the board wasting horizontal space — make them 50% in all cases so it reads compactly). This supersedes the one-day full-width uniform pass; the compact treatment below (hidden eyebrow, tighter head, borderless arrow, 28px value, one-notch-smaller chips) is what keeps the denser comparison/agenda fills legible at ~170px — the reading row, chip row, and footer all wrap, so narrow cards grow taller instead of clipping. Flex-grow lets an odd last card fill its whole row — same no-holes rule as desktop, for ANY set/order the traveler picks in Customize/Rearrange. Ultra-narrow phones fall back to full-width rows (max-width: 350px block below). */ .hgos-widget-grid { gap: 10px; } .hgos-widget-size-wide, .hgos-widget-size-compact { /* 5px = half the 10px gap, so two cards + gap fill the row */ flex: 1 1 calc(50% - 5px); } .hgos-widget-row2 { grid-template-columns: 1fr; } /* No-trip phones: the weather pill sat alone on the status row — let the sunset pill keep it company (both are narrow; one line even at 320px). When a trip countdown is visible the line is already full, so sunset yields to it — the row must never wrap to two. The sync-attention pill outranks sunset the same way: when it shows, something needs fixing and it must not be the thing that wraps off. */ .hgos-status-countdown:not([hidden]) ~ .hgos-status-sunset, .hgos-status-sync:not([hidden]) ~ .hgos-status-sunset { display: none; } .hgos-np { grid-template-columns: 60px minmax(0, 1fr) 48px; gap: 12px; padding: 12px 14px; } .hgos-np-art { width: 60px; height: 60px; border-radius: 13px; } .hgos-np-art-link { border-radius: 13px; } .hgos-np-btn { width: 48px; height: 48px; } .hgos-widget { min-height: 146px; padding: 12px; border-radius: 21px; } .hgos-widget::before { border-radius: 21px 0 0 21px; } .hgos-widget-icon { width: 36px; height: 36px; flex-basis: 36px; margin: 0; border-radius: 12px; } .hgos-widget-head { grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 8px; } .hgos-widget-arrow { width: 20px; height: 26px; border: 0; background: transparent; } .hgos-widget-copy strong { font-size: 15px; } /* The eyebrow ("AAA DAILY", "SUN SAFETY") costs a line the half card can't spare — the title + live fill carry the identity. Restored on ultra-narrow full-width rows below. */ .hgos-widget-copy em { display: none; } .hgos-widget-stage { margin-top: 10px; } .hgos-widget-value { font-size: 28px; } /* Keep status text at the 14px readability floor. The opaque deep-ocean fill preserves contrast even when a half-width card wraps the label. */ .hgos-widget-status { font-size: 14px; } .hgos-widget-stat-value { font-size: 14px; } .hgos-widget-stat-label, .hgos-widget-foot { font-size: 13px; } .hgos-controls { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0 0 12px; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; } .hgos-mobile-tool { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(0, 0, 0, 0.22); color: #fff; font-family: inherit; font-size: 13px; font-weight: 850; cursor: pointer; } .hgos-search-toggle { grid-column: 1 / -1; min-height: 48px; border-color: #f0b84a; background: #f0b84a; color: #102b27; font-size: 15px; } .hgos-filter-menu-toggle { grid-column: 1 / -1; justify-content: space-between; border-color: rgba(255, 255, 255, 0.34); background: rgba(3, 24, 34, 0.84); } .hgos-filter-menu-toggle [data-hgos-active-filter] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hgos-search-panel, .hgos-filter-row { grid-column: 1 / -1; min-width: 0; } .hgos-search-status { display: block; position: static; grid-column: 1 / -1; width: auto; height: auto; min-height: 18px; margin: 0; overflow: visible; clip: auto; white-space: normal; color: #fff; font-size: 13px; font-weight: 800; line-height: 1.35; text-align: right; } .hgos-search-panel { display: none; gap: 8px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 18px; background: rgba(0, 0, 0, 0.18); backdrop-filter: blur(18px); } .hgos.is-search-open .hgos-search-panel { display: flex; } .hgos-search { flex: 1 1 auto; min-width: 0; margin: 0; } .hgos-search-close { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.10); color: #fff; font-family: inherit; font-size: 12px; font-weight: 850; cursor: pointer; } .hgos-filter-row { display: none; flex-direction: column; align-items: stretch; gap: 6px; max-height: min(360px, 52dvh); padding: 8px; overflow-y: auto; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 18px; background: rgba(0, 0, 0, 0.20); backdrop-filter: blur(18px); } .hgos.is-filter-open .hgos-filter-row { display: flex; } .hgos-filter { display: flex; align-items: center; justify-content: center; width: 100%; scroll-margin: 0; } .hgos-filter-custom-wrap { width: 100%; } .hgos-filter-custom-wrap .hgos-filter-custom { flex: 1 1 auto; } .hgos-app-grid { grid-template-columns: repeat(4, minmax(64px, 1fr)); gap: 16px 10px; padding-bottom: 26px; } .hgos-app-icon { width: 60px; height: 60px; border-radius: 17px; font-size: 25px; } .hgos-app-title, .hgos-app-label { max-width: 76px; } .hgos-mini-footer { width: 100vw; margin: auto 0 -14px; padding-right: 18px; padding-left: 18px; } .hgos-screen { margin-bottom: 10px; } } /* Tablet uses the full controls and earns extra app columns from its available width. */ @media (min-width: 761px) and (max-width: 1024px) { .hgos-app-grid { grid-template-columns: repeat(6, minmax(64px, 1fr)); } } /* Keep the short OS purpose statement on one line across current iPhone portrait widths. Below 320px (including aggressive zoom), the standard wrapping rule remains available instead of forcing horizontal overflow. */ @media (min-width: 320px) and (max-width: 480px) { .hgos-heading h1 { font-size: clamp(18px, 5.6vw, 26px); white-space: nowrap; } /* Accessibility modes may substantially widen or enlarge the headline; restore wrapping so the purpose statement never clips inside the panel. */ body.hgos-page.hg-a11y-larger-text .hgos-heading h1, body.hgos-page.hg-a11y-readable-font .hgos-heading h1 { white-space: normal; } } @media (max-width: 760px) { .hgos-wayfinder { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: calc(100% - 16px); padding: 6px; border-radius: 16px; } /* No brand cell on phones (July 2026 UX review): the "WAYFINDER" wordmark rendered at 9px — near-illegible — while costing the four real links ~20% of their width. Desktop/tablet keep it. */ .hgos-wayfinder-brand { display: none; } .hgos-wayfinder-link { display: grid; justify-items: center; gap: 3px; min-height: 54px; padding: 3px 1px; } .hgos-wayfinder-icon { width: 28px; height: 28px; flex-basis: 28px; font-size: 14px; } .hgos-wayfinder-copy strong { font-size: 12px; } .hgos-wayfinder-copy small { display: none; } } @media (max-width: 420px) { .hgos { padding-left: 8px; padding-right: 8px; } .hgos-screen { width: 100%; max-width: 100%; } .hgos-app-grid { grid-template-columns: repeat(3, minmax(70px, 1fr)); } } @media (max-width: 350px) { .hgos-wayfinder-copy strong { font-size: 11px; } .hgos-statusbar { min-height: 82px; padding-right: 60px; } .hgos-os-signature { top: -2px; width: 52px; height: 52px; justify-content: center; border-radius: 16px; } .hgos-os-signature > span { display: none; } .hgos-os-signature .hgos-signature-compass { width: 30px; height: 30px; } /* Ultra-narrow phones (iPhone SE class): half cards drop under ~135px and genuinely starve the fills — fall back to full-width rows and restore the roomier head, eyebrow, and type the 50% treatment above trims. */ .hgos-widget-size-wide, .hgos-widget-size-compact { flex-basis: 100%; } .hgos-widget-head { grid-template-columns: 36px minmax(0, 1fr) 26px; gap: 9px; } .hgos-widget-arrow { width: 26px; height: 26px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); } .hgos-widget-copy em { display: block; } .hgos-widget-value { font-size: 30px; } .hgos-widget-status { font-size: 14px; } .hgos-widget-stat-value { font-size: 15px; } .hgos-widget-stat-label, .hgos-widget-foot { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .hgos-widget-reading.is-loading .hgos-widget-status::before { opacity: 1; transform: none; animation: none; } .hgos-widget, .hgos-widget-arrow, .hgos-app, .hgos-launch-scrim, .hgos-launch-card, .hgos-launch-content, .hgos-wayfinder, .hgos-boot-bar span { transition: none; animation-duration: 0.01ms; } } /* ── Site-wide shaka FAB: hidden on the OS ────────────────────────── It floats over the bottom-right app icons (John's report), and its jobs are already native here — My Trip is an app tile + Wayfinder stop, Ask the Guide lives in AI Tools. !important because the FAB script toggles inline styles on scroll. */ body.hgos-page .hg-mfab { display: none !important; } /* ── Widget gallery (customizable) ───────────────────────────────── .hgos-widget is display:grid, which beats the hidden attribute — this keeps toggled-off widgets truly gone. */ .hgos-widget[hidden] { display: none; } /* .hgos-widgets-bar removed July 2026: Customize + Rearrange moved up into the .hgos-actions toolbar so every widget verb lives in one row. */