/* ============================================================================ Weblys — mobile app-shell (PWA) Phone-only. Everything is gated to <=720px; tablet & desktop are untouched, so the full cinematic on the wide layout is never affected. The chrome has its OWN theme tokens (data-wm-theme on ) so it is correct in Sombre (default) and Clair without depending on the page's body.dark timing. ========================================================================== */ @media (min-width: 721px){ .wm-appbar,.wm-tabbar,.wm-back,.wm-sheet,#wmScrim{ display:none !important; } } @media (max-width: 720px){ /* the classic sticky header is replaced by the app-bar on phones */ header#top{ display:none !important; } body{ padding-top: calc(52px + env(safe-area-inset-top)); padding-bottom: calc(66px + env(safe-area-inset-bottom)); } /* tab navigation uses scrollIntoView; keep the target clear of the app-bar. goTo() targets each section's .container (past the tall 3D "stage"), so it lands on the content instead of an empty gutter. */ section[id], .hero, section > .container{ scroll-margin-top: calc(60px + env(safe-area-inset-top)); } /* « Calm the 3D » on phones: a scrim between the fixed WebGL canvas (z-index 0) and the content (sections are z-index 10). It ramps up as you scroll off the hero, muting the gold object to a faint backdrop — the navy background is unchanged (navy-over-navy) and every heading stays crisp above it. Driven by app-mobile.js off the hero's position. Hero gets z-index so it's never muted. */ .hero{ z-index:10; } #wmScrim{ position:fixed; inset:0; z-index:5; pointer-events:none; opacity:0; background:#0B1F3A; transition:opacity .22s ease; } html[data-wm-theme="light"] #wmScrim{ background:#FBFAF7; } /* ---- app-chrome theme tokens (default = Sombre) ---- */ html{ --wm-bg:#0e2545; --wm-text:#FBFAF7; --wm-muted:rgba(251,250,247,.66); --wm-accent:#E9D8A6; --wm-gold:#C8A24B; --wm-ink:#22160a; --wm-card:rgba(255,255,255,.05); --wm-cardb:rgba(233,216,166,.17); --wm-bar:rgba(9,20,38,.80); --wm-line:rgba(233,216,166,.14); } html[data-wm-theme="light"]{ --wm-bg:#F4F0E8; --wm-text:#1B2733; --wm-muted:#5C6A7A; --wm-accent:#8F6B24; --wm-gold:#C8A24B; --wm-card:#ffffff; --wm-cardb:rgba(11,31,58,.10); --wm-bar:rgba(251,250,247,.86); --wm-line:rgba(11,31,58,.08); } /* ---- top app-bar ---- */ .wm-appbar{ position:fixed;top:0;left:0;right:0;z-index:1200; height:calc(52px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top); display:flex;align-items:center;padding-left:18px;padding-right:8px;gap:2px; background:var(--wm-bar);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3); border-bottom:1px solid var(--wm-line); } .wm-brand{ font-family:var(--serif,Georgia,serif);font-weight:600;font-size:22px;letter-spacing:-.01em; color:var(--wm-text);text-decoration:none;margin-right:auto;line-height:1; } .wm-brand b{ color:var(--wm-gold); } .wm-ic{ width:42px;height:42px;border:0;background:transparent;color:var(--wm-text);border-radius:50%; display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent; } .wm-ic:active{ background:var(--wm-card); } .wm-ic svg{ width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round; } /* ---- bottom tab bar ---- */ .wm-tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:1200; height:calc(66px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom); background:var(--wm-bar);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3); border-top:1px solid var(--wm-line);display:flex;align-items:stretch; } .wm-tab{ flex:1;border:0;background:transparent;color:var(--wm-muted);cursor:pointer; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; font-family:var(--sans,system-ui);font-weight:600;font-size:10.5px;padding-top:7px;-webkit-tap-highlight-color:transparent; } .wm-tab svg{ width:23px;height:23px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round; } .wm-tab.on{ color:var(--wm-text); } .wm-tab.on svg{ stroke:var(--wm-gold); } .wm-tab.fab{ position:relative; } .wm-tab.fab .wm-fab{ position:absolute;top:-22px;width:58px;height:58px;border-radius:50%;background:var(--wm-gold); color:var(--wm-ink);display:grid;place-items:center;box-shadow:0 12px 26px -8px rgba(200,162,75,.7); } .wm-tab.fab .wm-fab svg{ width:26px;height:26px;stroke:var(--wm-ink);stroke-width:2; } .wm-tab.fab .wm-fl{ margin-top:38px; } /* ---- reusable bottom sheet ---- */ .wm-back{ position:fixed;inset:0;background:rgba(4,10,20,.5);opacity:0;pointer-events:none; transition:opacity .3s;z-index:1300;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); } .wm-back.on{ opacity:1;pointer-events:auto; } .wm-sheet{ position:fixed;left:0;right:0;bottom:0;z-index:1310;background:var(--wm-bg); border-radius:24px 24px 0 0;border-top:1px solid var(--wm-line);transform:translateY(101%); transition:transform .34s cubic-bezier(.4,0,.15,1);max-height:84vh;display:flex;flex-direction:column; padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -22px 54px -22px rgba(0,0,0,.55); } .wm-sheet.on{ transform:translateY(0); } .wm-handle{ width:40px;height:4px;border-radius:100px;background:var(--wm-muted);opacity:.45;margin:10px auto 4px; } .wm-sh-head{ display:flex;align-items:center;justify-content:space-between;padding:6px 20px 12px; } .wm-sh-head h3{ font-family:var(--serif,Georgia,serif);font-weight:600;font-size:20px;margin:0;color:var(--wm-text); } .wm-sh-x{ width:32px;height:32px;border:0;background:var(--wm-card);border-radius:50%;color:var(--wm-text);font-size:18px;cursor:pointer; } .wm-sh-body{ overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 20px 26px;color:var(--wm-text); } .wm-row{ display:flex;align-items:center;gap:14px;width:100%;padding:15px 4px;border:0;border-top:1px solid var(--wm-line); background:none;color:var(--wm-text);text-decoration:none;text-align:left;cursor:pointer; font-family:var(--sans,system-ui);font-weight:500;font-size:16px; } .wm-row:first-child{ border-top:0; } .wm-row svg{ width:21px;height:21px;stroke:var(--wm-accent);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0; } .wm-chev{ margin-left:auto;color:var(--wm-muted);font-size:20px;line-height:1; } .wm-seg{ display:flex;gap:6px;margin:12px 0 4px; } .wm-seg button{ flex:1;padding:11px;border-radius:12px;border:1px solid var(--wm-cardb);background:var(--wm-card); color:var(--wm-text);font-family:var(--sans,system-ui);font-weight:600;font-size:14px;cursor:pointer; } .wm-seg button.on{ background:var(--wm-gold);color:var(--wm-ink);border-color:transparent; } .wm-seg-l{ font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--wm-muted);margin:16px 0 2px;font-weight:700; } .wm-install{ display:block;width:100%;margin-top:16px;padding:15px;border-radius:14px;border:0;cursor:pointer; background:var(--wm-gold);color:var(--wm-ink);font-family:var(--sans,system-ui);font-weight:700;font-size:15px; } .wm-hint{ margin-top:14px;padding:14px;border-radius:14px;border:1px dashed var(--wm-cardb);color:var(--wm-muted); font-size:12.5px;line-height:1.5;display:flex;gap:10px;align-items:flex-start; } .wm-hint svg{ width:22px;height:22px;stroke:var(--wm-gold);flex-shrink:0;fill:none;stroke-width:1.7;margin-top:1px; } }