/* Instal·lació PWA opt-in integrada al megamenú i al drawer mòbil. */ .nav-item--install > .nav-trigger { color: var(--color-detailedicon); font-weight: 800; } .nav-item--install:not(.active) > .nav-trigger:hover, .nav-item--install > .nav-trigger[data-state="open"] { background: var(--color-detailedicon-solid-70); color: var(--card); } .nav:has(.nav-item--install .nav-trigger[data-state="open"]) > .nav-viewport { border-top-color: var(--color-detailedicon-solid-70); } .megamenu--install .pwa-install-content { min-width: min(320px, calc(100vw - 48px)); } .megamenu--install .pwa-install-panel__title { font-size: var(--font-lg); } .pwa-install-panel__title { margin: 0; font-family: var(--font-ui); font-weight: 800; font-size: var(--font-sm); color: var(--text-strong); line-height: 1.35; } .pwa-install-panel__hint { margin: 4px 0 0; font-size: var(--font-base); color: var(--muted); line-height: 1.35; } .pwa-install-panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); align-items: center; } /* Botó «Instal·la» — MATEIX model de color que el botó «✕ Tancar» (.btn.btn-ghost.sidebar-close a controls.css): píndola sòlida de primari fort amb text card, hover a primari ple. És autocontingut a propòsit (no usa .btn ni .sidebar-pill-btn): així no l'afecten les regles genèriques de controls.css (que amb :is()+:not() tenen una especificitat molt alta al hover i sobreescriurien aquests colors). */ .pwa-install-panel__cta { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ctrl-min-height); padding: var(--ctrl-pad-y) 14px; border-radius: var(--ctrl-radius); border: 1px solid var(--ui-overlay-subtle); background: var(--color-primary-strong); color: var(--card); font-family: var(--font-ui); font-weight: var(--ctrl-font-weight); font-size: var(--ctrl-font-size); letter-spacing: var(--ctrl-letter-spacing); white-space: nowrap; cursor: pointer; box-shadow: none; transition: var(--ctrl-transition); } @media (hover: hover) and (pointer: fine) { .pwa-install-panel__cta:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--card); } } .pwa-install-panel__cta:focus-visible { outline: none; box-shadow: var(--focus); } .pwa-install-panel__steps-toggle { min-height: 36px; padding-inline: var(--space-2); background: transparent; border: 0; color: var(--muted); font-size: var(--font-xs); font-weight: 700; cursor: pointer; } .pwa-install-panel__steps-toggle:hover, .pwa-install-panel__steps-toggle:focus-visible { color: var(--color-detailedicon); } .pwa-install-panel__steps { margin: var(--space-2) 0 0; padding-left: 1.2rem; font-size: var(--font-xs); color: var(--ink); line-height: 1.45; } .pwa-install-panel__steps li + li { margin-top: 4px; } .mobile-nav-item--install summary.mobile-nav-link { color: var(--color-detailedicon); } .mobile-nav-item--install summary.mobile-nav-link:hover, .mobile-nav-item--install details[open] > summary.mobile-nav-link { background: var(--color-detailedicon-solid-70); color: var(--card); } .mobile-nav-item--install summary.mobile-nav-link:hover svg, .mobile-nav-item--install details[open] > summary.mobile-nav-link svg { stroke: var(--card); } .mobile-submenu--install { padding: var(--space-2) var(--space-3) var(--space-3); } .mobile-submenu--install .pwa-install-panel__title { font-size: var(--font-md); } .mobile-submenu--install .pwa-install-panel__hint { font-size: var(--font-md-sm); } /* ⚠️ CONTRACTE ANTI-GLITCH — no el trenquis en cap refactor. * Les entrades d'instal·lació estan AMAGADES per defecte i es revelen NOMÉS amb * `html.pwa-install-ready`, classe que es decideix ABANS del primer paint * (script inline del a index.php: iOS Safari + elegibilitat recordada a * localStorage; el JS diferit només la confirma amb `beforeinstallprompt`). * Si reveles aquestes entrades per una altra via que s'apliqui després del paint * (p. ex. un atribut [hidden] tret des del JS diferit, o un `display` que depengui * només d'un esdeveniment asíncron), tornarà el reflow d'arrancada. Guardià: * tests/php/pwa-shell.smoke.php. */ .nav-item--install, .mobile-nav-item--install { display: none; } @media (min-width: 981px) { html.pwa-install-ready .nav-item--install { display: block; } } @media (max-width: 980px) { html.pwa-install-ready .mobile-nav-item--install { display: block; } }