/* ============================================================================= SmartMBX Academy — Bottom app-dock (app-dock.css) The thumb-reachable mobile/standalone tab-bar that makes the store feel like a native app. Emitted on every storefront page by partials/store-head.php and enhanced by assets/app-dock.js. MOBILE-FIRST: shown on phones + installed PWAs, HIDDEN ≥960px so desktop keeps the premium top-nav. CSP-SAFE: external 'self' stylesheet (allowed); ALL styling is class-driven — the PHP markup carries NO inline style="" and NO on*= handlers. Icons are inline in the markup using presentation attributes (stroke/fill), never inline CSS, so they inherit currentColor and flip gold on the active tab. --dock-h is published on :root so other surfaces (the cart toast in store.css) can anchor ABOVE the dock with `calc(var(--dock-h) + …)`. ============================================================================= */ :root{ --dock-h: 64px; /* visual bar height (excludes the safe-area inset added below) */ } .app-dock{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: stretch; justify-content: space-around; height: calc(var(--dock-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: linear-gradient(180deg, rgba(12,17,28,.94), rgba(7,11,20,.98)); border-top: 1px solid var(--line, #1e2230); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 -10px 30px rgba(0,0,0,.34); /* never intercept the page above it beyond its own box */ font-family: var(--font-ui, system-ui, sans-serif); } .app-dock-tab{ position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; /* ≥44px thumb target (height comes from the bar; width is ≥ a fifth of the viewport, comfortably ≥44px on any phone). */ min-height: 44px; padding: 7px 4px 6px; color: var(--ink-muted, #9a96a8); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color .2s ease, transform .2s ease; } .app-dock-tab:hover{ color: var(--ink, #f1ecdf); text-decoration: none; } .app-dock-tab:active{ transform: scale(.94); } .app-dock-tab:focus-visible{ outline: 2px solid var(--gold, #c9a227); outline-offset: -3px; border-radius: 10px; } .app-dock-ico{ display: block; width: 23px; height: 23px; flex: 0 0 auto; pointer-events: none; } .app-dock-ico svg{ display: block; width: 100%; height: 100%; } .app-dock-label{ font-size: 10.5px; font-weight: 600; letter-spacing: .2px; line-height: 1; white-space: nowrap; } /* ---- Active tab — gold, with a short top accent rule ---------------------- */ .app-dock-tab[aria-current="page"]{ color: var(--gold2, #e8b84b); } .app-dock-tab[aria-current="page"]::before{ content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--grad-gold, linear-gradient(95deg, #c9a227, #e8b84b)); box-shadow: 0 0 10px rgba(201,162,39,.5); } /* ---- Cart badge (mirrors the header count via app-dock.js) ---------------- */ .app-dock-tab-cart{ overflow: visible; } .app-dock-badge{ position: absolute; top: 5px; left: calc(50% + 9px); min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 700; line-height: 1; color: #0a0805; background: var(--grad-gold, linear-gradient(95deg, #c9a227, #e8b84b)); border-radius: 999px; box-shadow: 0 1px 5px rgba(201,162,39,.5); } .app-dock-badge[hidden]{ display: none; } /* =========================================================================== VISIBILITY — mobile / standalone only Shown ≤959px (and whenever launched as an installed PWA, app-dock.js adds .is-standalone to ). Hidden on the desktop web so the top-nav stays the primary chrome. When the dock IS shown, give .store-main extra bottom padding so the last content row clears the bar. =========================================================================== */ @media (min-width: 960px){ .app-dock{ display: none; } } /* Installed app on a large screen still gets the dock (native-app feel). */ html.is-standalone .app-dock{ display: flex; } @media (max-width: 959px){ /* The store already has generous bottom padding; add the dock's height so the footer/last card never hides behind it. */ .store-body .store-main{ padding-bottom: calc(96px + var(--dock-h) + env(safe-area-inset-bottom)); } } html.is-standalone .store-body .store-main{ padding-bottom: calc(96px + var(--dock-h) + env(safe-area-inset-bottom)); } /* ---- Light theme — ivory frosted bar -------------------------------------- */ [data-theme="light"] .app-dock{ background: linear-gradient(180deg, rgba(255,253,248,.92), rgba(246,241,231,.97)); border-top-color: var(--line, #e6ddcb); box-shadow: 0 -10px 30px rgba(60,50,30,.12); } [data-theme="light"] .app-dock-badge{ color: #241a05; } /* ---- Reduced motion ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .app-dock-tab{ transition: none; } .app-dock-tab:active{ transform: none; } }