/* =========================================================================== Menu / home hub — standalone page (no map, no Leaflet). Kept separate from the tracker's style.css so it stays light and new menu options are easy to add. =========================================================================== */ :root { --bg: #0f172a; --accent: #22c55e; --accent-stop: #ef4444; --text: #e2e8f0; --muted: #94a3b8; --surface: #1e293b; --border: #334155; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* Light theme — toggled by the theme button (class on ). */ html.light { --bg: #bdd1d1; /* rgb(189 209 209) — tinted, not pure white */ --text: #0f172a; --muted: #4f6565; --surface: #dce7e7; /* cards: a lighter tint of the same hue */ --border: #9fb7b7; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; overflow: hidden; /* the menu hub is a fixed page — never scrolls */ overscroll-behavior: none; /* and no rubber-band bounce on mobile */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); } /* Full-page layout. Username pins top-left, theme top-right on mobile; the rest of the options sit in a bottom-right bar (top-right on bigger screens). */ .menu { position: relative; height: 100dvh; /* fixed to the viewport … */ overflow: hidden; /* … so the page itself never scrolls */ display: flex; flex-direction: column; padding: calc(var(--safe-top) + 58px) 16px calc(var(--safe-bottom) + 44px); } /* Top block: title + the option buttons, sitting near the top (clear of the corner username/theme controls). margin-bottom:auto pushes the action bar and copyright down to the bottom of the screen. The options list grows as the app does, so this block SCROLLS when it no longer fits: the compaction rules below keep the usual case on one screen, and anything taller stays reachable instead of being clipped. The surrounding chrome (username, theme, action bar, copyright) never moves. */ .menu-main { flex: 0 1 auto; min-height: 0; margin-bottom: auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* don't rubber-band the page behind it */ scrollbar-width: thin; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; padding-bottom: 4px; /* the last button never sits flush on the bar */ } .menu-title { margin: 0; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: center; justify-content: center; gap: 10px; } .menu-title .ico { width: 28px; height: 28px; flex-shrink: 0; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .menu-sub { margin: 0 0 16px; color: var(--muted); font-size: 0.92rem; text-align: center; } /* The list of menu options — add more here as the app grows. flex-shrink: 0 so the buttons keep their size and .menu-main scrolls instead of squashing them into each other. */ .menu-buttons { display: flex; flex-direction: column; flex-shrink: 0; gap: 13px; width: 100%; max-width: 420px; } .menu-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 17px 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); text-decoration: none; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); transition: transform 0.08s ease, background 0.2s ease, border-color 0.2s ease; } .menu-btn:active { transform: scale(0.98); } .menu-btn.primary { background: var(--accent); color: #052e16; border-color: transparent; } .menu-btn.primary .menu-btn-hint { color: #053d1c; } .menu-btn-ico { display: inline-flex; line-height: 0; } .menu-btn-ico .ico { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .menu-btn-lbl { font-size: 1.2rem; font-weight: 700; } .menu-btn-hint { font-size: 0.78rem; color: var(--muted); } /* Mobile: username pinned top-left, theme toggle pinned top-right. */ .menu-user { position: absolute; top: calc(var(--safe-top) + 14px); left: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; max-width: 52vw; font-size: 0.92rem; font-weight: 600; color: var(--text); } .menu-user .ico { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .menu-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #btn-menu-theme { position: absolute; top: calc(var(--safe-top) + 10px); right: 14px; z-index: 1; width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%; } #btn-menu-theme .menu-bar-lbl { display: none; } /* icon-only in the corner */ /* Mobile: the action bar is pinned at the bottom, centred. */ .menu-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; width: 100%; margin-top: 8px; } .menu-bar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; /* Mobile: icon-only round buttons so they always fit the bottom bar. Labels (and pill padding) come back on wider screens — see @media below. */ width: 46px; height: 46px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); font-size: 0.88rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform 0.08s ease, background 0.2s ease; } .menu-bar-btn:active { transform: scale(0.95); } .menu-bar-btn .menu-bar-lbl { display: none; } /* icon-only on mobile */ .menu-bar-btn.logout { color: var(--accent-stop); border-color: rgba(239, 68, 68, 0.4); } .menu-bar-btn .ico { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* The theme button swaps moon/sun. */ #btn-menu-theme .ico-sun { display: none; } html.light #btn-menu-theme .ico-moon { display: none; } html.light #btn-menu-theme .ico-sun { display: block; } /* Bigger screens: one options bar on top, anchored top-right (username stays top-left). The centre block fills the space below. */ @media (min-width: 760px) { .menu { padding-top: calc(var(--safe-top) + 16px); } /* bar sits at the top here */ /* "safe center" so a list too tall to fit still scrolls from its first button — plain centring would push the top out of the scroll box, out of reach. Browsers without `safe` keep the previous declaration. */ .menu-main { flex: 1; margin-bottom: 0; justify-content: center; justify-content: safe center; } .menu-bar { order: -1; /* render the bar above the main block */ justify-content: flex-end; flex-wrap: nowrap; margin-top: 0; margin-bottom: 8px; } .menu-user { top: calc(var(--safe-top) + 22px); font-size: 1rem; } /* Back to labelled pills once there's room for them. */ .menu-bar-btn { width: auto; height: auto; padding: 9px 14px; border-radius: 999px; } .menu-bar-btn .menu-bar-lbl { display: inline; } #btn-menu-theme { position: static; } .menu-title { font-size: 2.4rem; } .menu-btn { padding: 26px 22px; } } /* Short screens (small phones, landscape): progressively compact the centre block so the whole list — including the bottom options bar — fits without scrolling. Past the last step it scrolls rather than shrinking to nothing. */ @media (max-height: 900px) { .menu-sub { margin-bottom: 10px; } .menu-buttons { gap: 10px; } .menu-btn { padding: 13px 16px; } } /* Mid-size phones and 768px laptops: trim the frame rather than the buttons, so the hints survive. */ @media (max-height: 840px) { .menu { padding-top: calc(var(--safe-top) + 48px); padding-bottom: calc(var(--safe-bottom) + 30px); } .menu-sub { margin-bottom: 8px; } .menu-buttons { gap: 8px; } .menu-btn { padding: 10px 16px; } } @media (max-height: 700px) { .menu { padding-top: calc(var(--safe-top) + 44px); padding-bottom: calc(var(--safe-bottom) + 24px); } .menu-main { gap: 4px; } .menu-title { font-size: 1.55rem; } .menu-sub { margin-bottom: 8px; font-size: 0.85rem; } .menu-buttons { gap: 8px; } .menu-btn { padding: 10px 14px; gap: 2px; } .menu-btn-lbl { font-size: 1.05rem; } .menu-btn-hint { display: none; } .menu-copy { margin-top: 8px; } } /* Very short (landscape phones): drop the subtitle and tighten further so the title, the whole list and the action bar still all fit. */ @media (max-height: 480px) { .menu { padding-top: calc(var(--safe-top) + 12px); padding-bottom: calc(var(--safe-bottom) + 14px); } .menu-sub { display: none; } .menu-title { font-size: 1.35rem; } .menu-title .ico { width: 22px; height: 22px; } .menu-buttons { gap: 8px; } .menu-btn { padding: 9px 12px; } .menu-btn-ico { display: none; } .menu-copy { display: none; } } /* Copyright line pinned at the bottom of the menu page. */ .menu-copy { margin-top: 12px; text-align: center; color: var(--muted); font-size: 0.75rem; opacity: 0.85; } .hidden { display: none !important; }