/* ============================================================ MARYSTÈ · APP SHELL — design system condiviso Sfondo "opale vivo", bottom nav disegnata, token, primitive. Classi con prefisso ms- per non collidere con gli stili di pagina. Da includere in ogni pagina cliente insieme a app-shell.js. ============================================================ */ :root{ --ms-bg-1:#efe9df; --ms-bg-2:#ece7e4; --ms-bg-3:#efe6e0; --ms-bg-4:#f3efe8; --ms-ink:#3a4a38; --ms-ink-soft:#6a7a60; --ms-gold:#8a7226; --ms-gold-soft:#a68a3c; --ms-corsi:#7b8ae0; --ms-eventi:#a880d8; --ms-negozi:#cf8a66; --ms-shop:#d6ac54; --ms-medita:#4fbfab; --ms-libri:#dc8ea2; --ms-e1:0 1px 2px rgba(58,55,45,.06), 0 6px 16px -6px rgba(58,55,45,.10); --ms-e2:0 2px 4px rgba(58,55,45,.07), 0 14px 34px -12px rgba(58,55,45,.18); --ms-spring:cubic-bezier(.34,1.56,.64,1); --ms-ease:cubic-bezier(.22,1,.36,1); --ms-r:26px; } /* ---------- SFONDO OPALE (dietro al contenuto, z-index:-1) ---------- */ /* Le pagine con rendono il body trasparente e lo shell inietta il cielo dietro. Nessun bisogno di riavvolgere il contenuto. */ html{background:linear-gradient(175deg,var(--ms-bg-1),var(--ms-bg-4))} body.ms-opal{background:transparent !important} .ms-sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .ms-sky canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .ms-sky .ms-aurora{inset:-8%;width:116%;height:116%;filter:blur(46px) saturate(1.15);opacity:.9;display:none} .ms-sky::after{content:'';position:absolute;inset:0; background:radial-gradient(130% 90% at 50% -12%,transparent 42%,rgba(243,239,232,.5) 100%)} .ms-bloom{position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(360px circle at var(--ms-lx,50%) var(--ms-ly,26%),rgba(255,247,232,.5),transparent 62%)} .ms-dust{position:absolute;border-radius:50%;pointer-events:none;will-change:transform,opacity} @keyframes ms-twinkle{0%,100%{opacity:.05;transform:scale(.7)}50%{opacity:.6;transform:scale(1.15)}} /* Le pagine che usano lo shell mettono il contenuto sopra: helper */ .ms-above{position:relative;z-index:1} /* ---------- BOTTOM NAV DISEGNATA ---------- */ .ms-bnav{position:fixed;bottom:0;left:0;right:0;z-index:100; padding:0 14px calc(env(safe-area-inset-bottom,0));display:flex;justify-content:center;pointer-events:none} .ms-bnav-inner{position:relative;display:flex;align-items:center;justify-content:space-around; width:100%;max-width:430px;margin:0 auto 12px;height:64px;padding:0 4px;pointer-events:auto; background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.64)); -webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6); border:1px solid rgba(255,255,255,.65);border-radius:26px; box-shadow:var(--ms-e2),inset 0 1px 1px rgba(255,255,255,.7)} .ms-bnav-pill{position:absolute;top:8px;height:48px;border-radius:18px;z-index:0;opacity:0; background:linear-gradient(160deg,rgba(156,192,162,.5),rgba(120,168,128,.3)); box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 4px 12px -4px rgba(120,168,128,.6); transition:left .5s var(--ms-spring),width .5s var(--ms-spring),opacity .3s} .ms-bn{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; padding:9px 2px;text-decoration:none;transition:transform .4s var(--ms-spring)} .ms-bn:active{transform:scale(.9)} .ms-bn svg{width:23px;height:23px;stroke:rgba(70,80,64,.5);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; transition:stroke .35s,transform .45s var(--ms-spring)} .ms-bn span{font-size:.57rem;font-weight:600;color:rgba(70,80,64,.45);letter-spacing:.01em;transition:color .35s} .ms-bn.ms-act svg{stroke:#4a6a4e;transform:translateY(-1px) scale(1.06)} .ms-bn.ms-act span{color:#3f5a43;font-weight:700} @media (prefers-reduced-motion:reduce){ .ms-sky canvas,.ms-dust,.ms-bloom{display:none !important} }