/* ========================================================= exlibris.fun — design system Un solo foglio di stile. Nessun build, nessuna dipendenza. Tre temi (bianco / nero / azzurro) su variabili CSS: cambiare tema = cambiare un attributo su , zero re-render. ========================================================= */ /* ---------- font ---------- */ @font-face{font-family:Metropolis;src:url(fonts/metropolis-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:Metropolis;src:url(fonts/metropolis-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:Metropolis;src:url(fonts/metropolis-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:Metropolis;src:url(fonts/metropolis-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:Metropolis;src:url(fonts/metropolis-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap} /* fallback con metriche corrette: il testo non "salta" quando arriva Metropolis */ @font-face{font-family:'Metropolis Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans'); size-adjust:97%;ascent-override:95%;descent-override:24%;line-gap-override:0%} /* ---------- temi ---------- */ :root{ --blue:#266eed; --r:12px; --r-sm:9px; --r-lg:18px; --pad:clamp(16px,3.6vw,44px); --maxw:1260px; --gap:clamp(14px,1.6vw,22px); --shelf-h:clamp(132px,15.5vw,224px); --cell-min:clamp(112px,13vw,190px); --ease:cubic-bezier(.22,.68,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur:.24s; color-scheme:light; } /* bianco */ html[data-theme=light]{ --bg:#FBFAF7; --bg-2:#F3F1EA; --surface:#FFFFFF; --ink:#15150F; --ink-2:#66655C; --ink-3:#96948A; --line:#E7E3D8; --line-2:#D5D0C1; --accent:#266eed; --accent-fg:#FFFFFF; --accent-soft:#E8F0FE; --shelf:#DCD5C4; --shelf-edge:#C7BEA8; --spine-txt:rgba(255,255,255,.9); --scrim:rgba(21,21,15,.38); --tip-bg:#15150F; --tip-fg:#FBFAF7; --map-empty:#DFD9C8; --map-line:#FFFFFF; --cell-bg:#EDEAE0; --shadow:0 1px 2px rgba(21,21,15,.05),0 8px 24px -12px rgba(21,21,15,.18); --shadow-lg:0 24px 60px -20px rgba(21,21,15,.3); --s0:#B23F2C; --s1:#C2762F; --s2:#B99327; --s3:#5F7F42; --s4:#26756A; --s5:#2A5A99; --s6:#57478A; --s7:#A03F63; --s8:#7A362F; --s9:#3C4147; --s10:#83745B; --s11:#232326; color-scheme:light; } /* nero */ html[data-theme=dark]{ --bg:#0B0B0C; --bg-2:#141416; --surface:#141416; --ink:#F2F1EB; --ink-2:#9E9C94; --ink-3:#6C6A64; --line:#242427; --line-2:#35353A; --accent:#5C94FF; --accent-fg:#07070A; --accent-soft:#152341; --shelf:#2A2A2E; --shelf-edge:#3A3A40; --spine-txt:rgba(255,255,255,.9); --scrim:rgba(0,0,0,.66); --tip-bg:#F2F1EB; --tip-fg:#0B0B0C; --map-empty:#2C2C31; --map-line:#0B0B0C; --cell-bg:#26262A; --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px -14px rgba(0,0,0,.8); --shadow-lg:0 26px 64px -22px rgba(0,0,0,.9); --s0:#C24C36; --s1:#CE8339; --s2:#C7A031; --s3:#6C8F4B; --s4:#2C8478; --s5:#3468AE; --s6:#63529B; --s7:#B14A70; --s8:#8B4038; --s9:#4A5058; --s10:#93836A; --s11:#5A5A62; color-scheme:dark; } /* azzurro */ html[data-theme=blue]{ --bg:#266eed; --bg-2:#1E5ED4; --surface:#1D5DD3; --ink:#FFFFFF; --ink-2:rgba(255,255,255,.76); --ink-3:rgba(255,255,255,.56); --line:rgba(255,255,255,.22); --line-2:rgba(255,255,255,.34); --accent:#FFFFFF; --accent-fg:#1B4FB8; --accent-soft:rgba(255,255,255,.16); --shelf:rgba(255,255,255,.34); --shelf-edge:rgba(255,255,255,.5); --spine-txt:rgba(12,32,74,.86); --scrim:rgba(9,29,74,.6); --tip-bg:#0C224F; --tip-fg:#FFFFFF; --map-empty:rgba(255,255,255,.16); --map-line:#266eed; --cell-bg:#1650BE; --shadow:0 1px 2px rgba(6,22,58,.24),0 10px 30px -14px rgba(6,22,58,.6); --shadow-lg:0 26px 64px -22px rgba(6,22,58,.7); --s0:#FF6F4B; --s1:#FFA22E; --s2:#FFD245; --s3:#4FD08A; --s4:#16C4BD; --s5:#7FB0FF; --s6:#B287FF; --s7:#FF6F9E; --s8:#FF8A5C; --s9:#D9E2EC; --s10:#E4BE72; --s11:#FFFFFF; color-scheme:dark; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable;-webkit-tap-highlight-color:transparent} html,body{min-height:100%} body{ font-family:Metropolis,'Metropolis Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg);color:var(--ink); font-size:clamp(14.5px,.86rem + .18vw,16.5px);line-height:1.5;font-weight:400; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; letter-spacing:-.006em; overflow-x:hidden; } html.theming,html.theming body,html.theming *{transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),fill .3s var(--ease)!important} /* su iPhone il dito che indugia su un dorso apriva il menu "copia/condividi" e il trascinamento moriva lì: sui comandi niente selezione né callout. */ button,.spine,.tdot,.bar-col,.mini-cell{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;letter-spacing:inherit} input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit} a{color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} ::selection{background:var(--accent);color:var(--accent-fg)} /* ---------- tipografia ---------- */ .display{font-weight:800;letter-spacing:-.035em;line-height:1.02} .h1{font-size:clamp(28px,2.1vw + 20px,44px);font-weight:800;letter-spacing:-.035em;line-height:1.05} .h2{font-size:clamp(19px,.7vw + 16px,25px);font-weight:800;letter-spacing:-.03em;line-height:1.12} .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .muted{color:var(--ink-2)} .tiny{font-size:12.5px;color:var(--ink-3);line-height:1.45} .num{font-variant-numeric:tabular-nums} /* ---------- layout ---------- */ #app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column} .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} main{flex:1 0 auto;padding-bottom:clamp(60px,7vw,110px)} .section{padding-top:clamp(30px,4vw,58px)} .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px} /* ---------- topbar ---------- */ .topbar{ position:sticky;top:0;z-index:60; display:flex;align-items:center;justify-content:space-between;gap:16px; padding-block:clamp(10px,1.3vw,16px); background:var(--bg); background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease); } .topbar.scrolled{border-bottom-color:var(--line)} .topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .brand{display:block;flex:0 0 auto;cursor:pointer;background:none;border:0;padding:0;line-height:0} .logo{ display:block;width:auto;height:clamp(28px,2.4vw,36px);aspect-ratio:981/454; background-color:currentColor; -webkit-mask:url(../logo.svg) no-repeat center/contain; mask:url(../logo.svg) no-repeat center/contain; transition:transform .4s var(--ease-out),opacity var(--dur) var(--ease); } .brand:hover .logo{transform:rotate(-1.6deg) scale(1.03)} .topbar-right{display:flex;align-items:center;gap:clamp(8px,1vw,14px)} /* pallini tema */ .themes{display:flex;align-items:center;gap:7px;padding:5px 7px;border:1px solid var(--line);border-radius:999px} .tdot{ width:15px;height:15px;border-radius:50%;position:relative;display:block; border:1px solid var(--line-2);transition:transform .22s var(--ease-out),box-shadow .22s var(--ease); } .tdot[data-t=light]{background:#FBFAF7} .tdot[data-t=dark]{background:#111114} .tdot[data-t=blue]{background:#266eed;border-color:#266eed} .tdot:hover{transform:scale(1.22)} .tdot[aria-pressed=true]{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--ink)} .tdot[aria-pressed=true]:hover{transform:scale(1.1)} .iconbtn{ width:36px;height:36px;border-radius:50%;border:1px solid var(--line); display:grid;place-items:center;color:var(--ink-2); transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform .2s var(--ease-out),background var(--dur); } .iconbtn:hover{color:var(--ink);border-color:var(--ink-3);transform:translateY(-1px)} .iconbtn.on{background:var(--ink);color:var(--bg);border-color:var(--ink)} .avatar-img{width:34px;height:34px;border-radius:50%;object-fit:cover;display:block} /* ---------- bottoni ---------- */ .btn{ display:inline-flex;align-items:center;gap:8px;justify-content:center; border:1px solid var(--line-2);padding:9px 17px;border-radius:999px; font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap; transition:background var(--dur) var(--ease),color var(--dur) var(--ease), border-color var(--dur) var(--ease),transform .18s var(--ease-out),box-shadow var(--dur); } .btn:hover{border-color:var(--ink);transform:translateY(-1px)} .btn:active{transform:translateY(0) scale(.985)} .btn-primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);box-shadow:var(--shadow)} .btn-primary:hover{filter:brightness(1.06);border-color:var(--accent)} .btn-ghost{border-color:transparent;color:var(--ink-2);padding-inline:12px} .btn-ghost:hover{color:var(--ink);background:var(--bg-2);border-color:transparent} .btn-sm{padding:6px 13px;font-size:12.5px} .btn-danger:hover{border-color:#C2503C;color:#C2503C} .link{ color:var(--ink-2);text-decoration:none;cursor:pointer;font-weight:500; box-shadow:inset 0 -1px 0 var(--line-2);transition:color var(--dur),box-shadow var(--dur); } .link:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)} /* ---------- campi ---------- */ .field{ width:100%;border:1px solid var(--line-2);border-radius:var(--r-sm); padding:10px 13px;font-size:14px;background:var(--surface);color:var(--ink); outline:none;transition:border-color var(--dur),box-shadow var(--dur),background var(--dur); } .field::placeholder{color:var(--ink-3)} .field:hover{border-color:var(--ink-3)} .field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} select.field{cursor:pointer;appearance:none;padding-right:32px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 11px center} textarea.field{min-height:84px;resize:vertical} .search-field{position:relative;display:flex;align-items:center;flex:1;min-width:0} .search-field .field{padding-left:38px} .search-field svg{position:absolute;left:13px;color:var(--ink-3);pointer-events:none} .search-clear{position:absolute;right:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3)} .search-clear:hover{background:var(--bg-2);color:var(--ink)} /* ---------- home ---------- */ .hero{ padding-top:clamp(26px,5vw,64px);padding-bottom:clamp(24px,3.4vw,44px); display:grid;gap:clamp(20px,3vw,38px); grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center; } @media(max-width:760px){.hero{grid-template-columns:1fr}} .hero-title{font-size:clamp(34px,5.4vw,68px);font-weight:800;letter-spacing:-.045em;line-height:.98} /* Le stesse frasi in due lingue non occupano lo stesso numero di righe, e la riga in piu' o in meno spostava tutto quello che sta sotto: cambiando lingua la pagina sembrava un'altra. Riservando l'altezza di tre righe il blocco non si muove piu', in nessuna delle due. In em e non in pixel, cosi' regge anche quando lo schermo e' stretto e le righe diventano quattro. */ .hero-sub{margin-top:16px;font-size:clamp(15px,.5vw + 14px,18px);color:var(--ink-2);max-width:44ch;line-height:1.5;min-height:4.5em} .hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px} .btn-big{padding:13px 24px;font-size:15px} .hero-art{position:relative;height:clamp(160px,20vw,260px)} .hero-shelf{ position:absolute;inset:0;display:flex;align-items:flex-end;gap:3px;min-width:0; padding:0 12px 10px;border-bottom:5px solid var(--shelf);border-radius:0 0 4px 4px; } /* I dorsi hanno larghezze diverse — e' quello che li fa sembrare libri — ma senza il permesso di stringersi la loro somma teneva in ostaggio la larghezza di tutta la pagina. Con flex-shrink si accorciano in proporzione e restano diversi fra loro. */ .hero-shelf i{display:block;flex:0 1 auto;min-width:0;border-radius:2px 2px 0 0;animation:rise .7s var(--ease-out) backwards} @keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}} /* card librerie */ .lib-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr))} .lib-card{ position:relative;display:flex;flex-direction:column;gap:14px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:16px 16px 14px;cursor:pointer;text-align:left; transition:transform .28s var(--ease-out),box-shadow .28s var(--ease),border-color var(--dur); animation:rise .5s var(--ease-out) backwards;animation-delay:calc(var(--i,0)*45ms); } .lib-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)} .lib-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .lib-card-name{font-size:17.5px;font-weight:700;letter-spacing:-.02em;line-height:1.2;word-break:break-word} .lib-card-meta{font-size:12.5px;color:var(--ink-3);margin-top:3px} .mini{display:grid;gap:3px;border-radius:6px;overflow:hidden} .mini-row{display:flex;gap:3px} .mini-cell{ flex:1 1 0;min-width:0;height:26px;border-radius:3px; background:var(--cell-bg); display:flex;align-items:flex-end;gap:1px;padding:0 2px 2px;overflow:hidden; } .mini-cell i{display:block;flex:0 1 auto;width:3px;min-width:1px;border-radius:1px} .lib-card-actions{display:flex;gap:4px;flex-wrap:wrap;opacity:0;transform:translateY(3px);transition:opacity var(--dur),transform var(--dur)} .lib-card:hover .lib-card-actions,.lib-card:focus-within .lib-card-actions{opacity:1;transform:none} @media(hover:none){.lib-card-actions{opacity:1;transform:none}} .empty-box{ border:1px dashed var(--line-2);border-radius:var(--r);padding:clamp(26px,4vw,44px); text-align:center;color:var(--ink-2);background:var(--surface); } .empty-box p{max-width:46ch;margin:0 auto 16px} /* ---------- sezioni richiudibili della home ---------- */ .acc-sec{padding-top:clamp(22px,3vw,38px)} .acc-head{ display:flex;align-items:baseline;gap:12px;width:100%;text-align:left; padding:6px 0;border-radius:var(--r-sm); } .acc-head .h2{transition:color var(--dur)} .acc-head:hover .h2{color:var(--accent)} .acc-head .tiny{margin-left:auto} .chev{ display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;color:var(--ink-3); transform:rotate(0);transition:transform .32s var(--ease-out),color var(--dur);align-self:center; } .acc-head[aria-expanded=true] .chev{transform:rotate(90deg);color:var(--ink)} .acc-head:hover .chev{color:var(--ink)} .acc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease-out)} .acc.open{grid-template-rows:1fr} /* il padding starebbe dentro la riga da 0fr e lascerebbe passare una striscia di contenuto anche da chiuso: lo sposto sul figlio, che viene ritagliato */ .acc-in{overflow:hidden;min-height:0} .acc-in > *{margin:10px 2px 3px} .badge{ flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; padding:4px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent); border:1px solid transparent;align-self:center; } html[data-theme=blue] .badge{color:var(--ink);background:rgba(255,255,255,.18)} .badge-pub{background:transparent;border-color:var(--line-2);color:var(--ink-3)} .share-link{display:flex;gap:8px} .share-link input{font-size:13px} .share-social{display:flex;gap:8px;flex-wrap:wrap} .share-social .btn{text-decoration:none} .lib-card.is-pl{border-style:dashed} /* ---------- intro delle playlist ---------- */ .intro-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));margin-bottom:8px} .intro-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px; animation:rise .5s var(--ease-out) backwards; } .intro-card:nth-child(2){animation-delay:70ms} .intro-card:nth-child(3){animation-delay:140ms} .intro-n{font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--accent);margin-bottom:10px} .intro-t{font-weight:700;letter-spacing:-.02em;margin-bottom:5px} .intro-card p{font-size:13.5px;color:var(--ink-2);line-height:1.5} .note-box{ background:var(--accent-soft);border-radius:var(--r-sm);padding:11px 13px; font-size:12.5px;color:var(--ink-2);margin-bottom:16px;line-height:1.5; } /* ---------- wizard ---------- */ .wz{max-width:920px;margin:0 auto;padding:clamp(26px,4vw,56px) var(--pad) clamp(60px,8vw,110px)} .wz-bar{display:flex;gap:6px;margin-bottom:26px} .wz-bar i{height:3px;flex:1;border-radius:999px;background:var(--line);transition:background .35s var(--ease)} .wz-bar i.on{background:var(--accent)} .wz-title{font-size:clamp(26px,2.2vw + 18px,40px);font-weight:800;letter-spacing:-.035em;line-height:1.05;margin-bottom:10px} .wz-sub{color:var(--ink-2);max-width:56ch;margin-bottom:clamp(22px,3vw,34px)} .wz-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:clamp(26px,3vw,40px);padding-top:20px;border-top:1px solid var(--line)} .dim-ctl{display:flex;gap:clamp(14px,2.4vw,34px);flex-wrap:wrap;margin-bottom:22px} .stepper{display:flex;align-items:center;gap:12px} .stepper-label{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .stepper-btns{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;overflow:hidden} .stepper-btns button{width:34px;height:34px;color:var(--ink-2);font-size:16px;transition:background var(--dur),color var(--dur)} .stepper-btns button:hover:not(:disabled){color:var(--ink);background:var(--bg-2)} .stepper-btns button:disabled{color:var(--line-2);cursor:not-allowed} .stepper-val{width:40px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums} /* ---------- scaffali ---------- */ .shelf-scroll{position:relative;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin} .shelf-frame{ display:grid;gap:0;min-width:min-content; background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden; box-shadow:var(--shadow); } .shelf-cell{ position:relative;min-width:var(--cell-min);min-height:var(--shelf-h); border-right:1px solid var(--line);border-bottom:4px solid var(--shelf); padding:26px 10px 0;display:flex;align-items:flex-end;gap:2px; overflow:hidden;transition:background var(--dur) var(--ease); } .shelf-cell.dense{gap:1px;padding-inline:7px} .shelf-frame.compact{min-width:0} .shelf-frame.compact .shelf-cell{min-height:var(--cellh,86px);min-width:0;padding:20px 6px 0;border-bottom-width:3px} .shelf-frame.compact .shelf-tag{display:none} .shelf-frame.compact .cell-tools{top:3px;right:4px} .shelf-frame.compact .mini-btn{width:20px;height:20px;border-radius:6px} /* nel wizard il + è il soggetto della schermata: sempre visibile */ .shelf-frame.compact .cell-tools{opacity:1;transform:none} .shelf-frame.compact .shelf-pet{ flex:0 0 auto;align-self:flex-end;margin-left:auto;margin-right:6px; height:clamp(46px,62%,116px); /* Le piante servono a mettere colore in un ripiano vuoto: spegnerle toglieva l'unica ragione per cui ci sono. Piene, come i dorsi. */ pointer-events:none; animation:rise .6s var(--ease-out) backwards;animation-delay:.15s; } .shelf-pet svg{display:block;height:100%;width:auto} .shelf-empty{display:none} .shelf-frame.compact .spine-txt{display:none} .shelf-frame.compact .spine{width:clamp(3px,calc(var(--w)*.3),8px);border-radius:1px 1px 0 0} .shelf-frame.compact .spine::after{height:2px} .shelf-scroll.compact{overflow:visible;margin-inline:0;padding-inline:0} .shelf-cell.last-col{border-right:none} .shelf-cell.last-row{border-bottom:none} .shelf-cell:hover{background:color-mix(in srgb,var(--bg-2) 55%,transparent)} .shelf-tag{ position:absolute;top:7px;left:10px;font-size:10.5px;font-weight:600;letter-spacing:.1em; color:var(--ink-3);text-transform:uppercase;pointer-events:none; max-width:calc(100% - 60px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; opacity:0;transition:opacity var(--dur) var(--ease); } /* nelle playlist il nome del ripiano è contenuto, non decorazione: sempre visibile */ .shelf-tag.named{opacity:1;font-size:11.5px;letter-spacing:.02em;text-transform:none;color:var(--ink-2);font-weight:700} .shelf-input{position:absolute;top:5px;left:8px;width:calc(100% - 46px);font-size:12.5px;padding:5px 8px;z-index:6} .shelf-cell:hover .shelf-tag{opacity:1} .cell-tools{position:absolute;top:5px;right:6px;display:flex;gap:2px;z-index:4;opacity:0;transform:translateY(-2px);transition:opacity var(--dur),transform var(--dur)} .shelf-cell:hover .cell-tools,.shelf-cell:focus-within .cell-tools{opacity:1;transform:none} @media(hover:none){.cell-tools{opacity:1;transform:none}.shelf-tag{opacity:1}} .mini-btn{ width:24px;height:24px;border-radius:7px;display:grid;place-items:center; color:var(--ink-2);background:var(--surface);border:1px solid var(--line); transition:color var(--dur),background var(--dur),transform .18s var(--ease-out); } .mini-btn:hover{color:var(--accent-fg);background:var(--accent);border-color:var(--accent);transform:scale(1.08)} .shelf-pet{ flex:0 0 auto;align-self:flex-end;margin-left:auto;margin-right:6px; height:clamp(46px,62%,116px); /* Le piante servono a mettere colore in un ripiano vuoto: spegnerle toglieva l'unica ragione per cui ci sono. Piene, come i dorsi. */ pointer-events:none; animation:rise .6s var(--ease-out) backwards;animation-delay:.15s; } .shelf-pet svg{display:block;height:100%;width:auto} .shelf-empty{margin:0 auto 12px;align-self:flex-end;font-size:11px;color:var(--ink-3);opacity:.7;letter-spacing:.08em;text-transform:uppercase} .spine{ flex:0 1 auto;width:var(--w,14px);min-width:2px;height:var(--h,84%); background:var(--c,var(--s11));border-radius:2px 2px 0 0; position:relative;cursor:pointer;overflow:hidden; display:flex;align-items:flex-end;justify-content:center; box-shadow:inset -1px 0 0 rgba(0,0,0,.14),inset 1px 0 0 rgba(255,255,255,.13); transition:transform .2s var(--ease-out),opacity .2s var(--ease),filter .2s var(--ease); animation:spineIn .34s var(--ease-out) backwards; } @keyframes spineIn{from{transform:translateY(10px) scaleY(.92);opacity:0}to{transform:none;opacity:1}} .spine::after{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(rgba(255,255,255,.24),transparent)} .spine:hover{transform:translateY(-9px)} .spine-txt{ writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg); font-size:9px;font-weight:600;color:var(--spine-txt);letter-spacing:.01em; white-space:nowrap;overflow:hidden;padding:7px 0;max-height:100%; } /* voce di playlist che non possiedi: dorso vuoto, si distingue a colpo d'occhio */ .spine.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px var(--c,var(--ink-3))} .spine.ghost::after{display:none} .spine.ghost .spine-txt{color:var(--c,var(--ink-2))} .mini-cell i.ghost{opacity:.4} .spine.dim{opacity:.16;filter:saturate(.3)} .spine.dim:hover{transform:none} /* evidenziazione dalla ricerca globale */ .spotlight .spine{opacity:.14;filter:saturate(.25)} .spotlight .spine.spot{opacity:1;filter:none;animation:pop 1.1s var(--ease-out) 2} @keyframes pop{0%{transform:translateY(0)}22%{transform:translateY(-14px)}45%{transform:translateY(0)}} .spine.spot{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent),var(--shadow)} .shelf-cell.spot-cell{background:var(--accent-soft)} /* riordino */ .reordering .spine{touch-action:none;cursor:grab} .reordering .spine:hover{transform:translateY(-3px) rotate(-1deg)} .spine.dragging{opacity:.4;cursor:grabbing;transform:scale(1.04)} .drop-mark{flex:0 0 auto;width:3px;align-self:stretch;margin:22px 1px 0;border-radius:2px;background:var(--accent);animation:blink .9s ease-in-out infinite} @keyframes blink{50%{opacity:.35}} .shelf-cell.drop-in{background:var(--accent-soft)} .reorder-bar{align-items:center} .reorder-bar .rb-sort{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .reorder-bar .rb-end{display:flex;gap:8px;margin-left:auto} @media(max-width:640px){.reorder-bar .rb-end{margin-left:0;width:100%}.reorder-bar .rb-end .btn{flex:1}} .hint{ display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; font-size:13px;color:var(--ink-2);background:var(--accent-soft); border-radius:var(--r-sm);padding:10px 14px;margin-bottom:12px; animation:rise .3s var(--ease-out) } /* ---------- pagina libreria ---------- */ .lib-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:clamp(18px,2.4vw,32px) 0 16px} .crumb{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3);margin-bottom:8px} .crumb:hover{color:var(--ink)} .title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .title-row .mini-btn{opacity:0} .title-row:hover .mini-btn,.title-row:focus-within .mini-btn{opacity:1} @media(hover:none){.title-row .mini-btn{opacity:1}} .toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-bottom:18px} .toolbar .search-field{max-width:290px} .toolbar .field{min-width:0;width:auto} .chip{ display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600; padding:6px 12px;border-radius:999px;background:var(--bg-2);color:var(--ink-2); cursor:pointer;transition:background var(--dur),color var(--dur) } .chip:hover{color:var(--ink)} /* ---------- tooltip ---------- */ .tip{ position:fixed;z-index:200;max-width:290px;pointer-events:none; background:var(--tip-bg);color:var(--tip-fg); padding:11px 13px;border-radius:var(--r-sm);font-size:12.5px;line-height:1.45; box-shadow:var(--shadow-lg); opacity:0;transform:translateY(4px) scale(.97);transform-origin:bottom left; transition:opacity .14s var(--ease),transform .16s var(--ease-out); } .tip.on{opacity:1;transform:none} .tip .t-title{font-weight:700;letter-spacing:-.015em;margin-bottom:2px} .tip .t-meta{opacity:.66;font-size:11.5px} .tip .t-list{margin-top:7px;padding-top:7px;border-top:1px solid color-mix(in srgb,var(--tip-fg) 22%,transparent);font-size:11.5px} .tip .t-list div{opacity:.86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tip .t-notes{opacity:.8;font-size:11.5px;margin-top:6px;font-style:italic} /* ---------- modale ---------- */ .overlay{ position:fixed;inset:0;z-index:150;background:var(--scrim); display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,26px); animation:fade .2s var(--ease);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); } @keyframes fade{from{opacity:0}to{opacity:1}} .modal{ width:100%;max-width:560px;max-height:88vh;max-height:88dvh;overflow-y:auto; background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-lg); padding:clamp(20px,2.6vw,30px);box-shadow:var(--shadow-lg); animation:modalIn .3s var(--ease-out); } @keyframes modalIn{from{transform:translateY(10px) scale(.985);opacity:0}to{transform:none;opacity:1}} .modal-title{font-size:21px;font-weight:800;letter-spacing:-.03em} .modal-sub{font-size:12.5px;color:var(--ink-3);margin-bottom:18px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .form-grid .full{grid-column:1/-1} @media(max-width:560px){.form-grid{grid-template-columns:1fr}} .modal-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap} .lookup{background:var(--bg-2);border-radius:var(--r);padding:13px;margin-bottom:16px} .lookup-row{display:flex;gap:8px} .lookup-lang{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap} .lang-sel{width:auto;min-width:140px;padding-block:7px;font-size:13px} .ed-link{display:inline-block;margin-top:10px;font-size:13px} .results{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);max-height:242px;overflow-y:auto;overflow-x:hidden} .result{display:flex;gap:11px;align-items:center;padding:9px 11px;border-bottom:1px solid var(--line);cursor:pointer;transition:background var(--dur)} .result:last-child{border-bottom:none} .result:hover{background:var(--accent-soft)} .result img{width:30px;height:44px;object-fit:cover;border-radius:3px;background:var(--bg-2);flex:0 0 auto} .result .ph{width:30px;height:44px;border-radius:3px;background:var(--bg-2);flex:0 0 auto} .result-t{display:block;font-size:13.5px;font-weight:600;line-height:1.25} .result-m{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px} .status{font-size:12.5px;color:var(--ink-3);padding:9px 2px;display:flex;align-items:center;gap:8px} .spinner{width:13px;height:13px;border:2px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;flex:0 0 auto} @keyframes spin{to{transform:rotate(360deg)}} .cover-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px} .cover-mini{ width:58px;flex:0 0 auto;aspect-ratio:2/3;border-radius:6px;overflow:hidden; background:var(--bg-2);display:grid;place-items:center;color:var(--ink-3); border:1px solid var(--line); } .cover-mini img{width:100%;height:100%;object-fit:cover} .cover-ctl{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px} .cover-btns{display:flex;gap:8px;flex-wrap:wrap} /* ---------- colore della libreria ---------- */ .sw-dot{width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid var(--line-2)} .sw-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:16px} .sw{aspect-ratio:1;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); transition:transform .2s var(--ease-out),box-shadow .2s var(--ease)} .sw:hover{transform:scale(1.12)} .sw.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)} .sw-custom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .sw-custom label{display:flex;align-items:center;gap:8px} .sw-custom input[type=color]{width:44px;height:30px;padding:0;border:1px solid var(--line-2);border-radius:8px;background:none;cursor:pointer} .shelf-frame[data-tinted] .shelf-cell{background:var(--tint);border-bottom-color:var(--shelf)} .shelf-frame[data-tinted] .shelf-cell:hover{background:var(--tint-2)} html[data-theme=dark] .shelf-frame[data-tinted] .shelf-cell{background:var(--tint-2)} html[data-theme=dark] .shelf-frame[data-tinted] .shelf-cell:hover{background:var(--tint-3)} .lib-card.tinted .mini-cell{background:var(--tint-2)} html[data-theme=dark] .lib-card.tinted .mini-cell{background:var(--tint-3)} .csv-strip{ display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px; background:var(--bg-2);border-radius:var(--r-sm);padding:10px 14px;font-size:13.5px;color:var(--ink-2); } .csv-strip .btn{margin-left:auto} .csv-ai{background:var(--bg-2);border-radius:var(--r-sm);padding:13px 15px;margin-bottom:4px} .csv-ai-t{font-weight:700;letter-spacing:-.02em;margin-bottom:4px;font-size:14px} .csv-ai p{font-size:13px;color:var(--ink-2);line-height:1.5} .dup-opts{display:grid;gap:10px;margin-bottom:6px} .dup-opt{ text-align:left;border:1px solid var(--line-2);border-radius:var(--r);padding:14px 16px; display:flex;flex-direction:column;gap:3px;transition:border-color var(--dur),background var(--dur),transform .18s var(--ease-out); } .dup-opt:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)} .dup-t{font-weight:700;letter-spacing:-.02em} /* ---------- scheda del libro ---------- */ .modal.lightbox{max-width:640px} .lb-grid{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:clamp(16px,2.2vw,26px);align-items:start} @media(max-width:520px){.lb-grid{grid-template-columns:1fr}.lb-cover{max-width:150px}} .lb-cover{ position:relative;aspect-ratio:2/3;border-radius:var(--r-sm);overflow:hidden; background:var(--c,var(--s5));box-shadow:var(--shadow); } .lb-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2} .lb-cover.noimg img{display:none} .lb-fallback{ position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px 12px; background:linear-gradient(160deg,rgba(255,255,255,.22),transparent 60%); } .lb-fallback span{ font-weight:700;font-size:13.5px;line-height:1.25;letter-spacing:-.02em; color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35); display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden; } .lb-title{font-size:clamp(20px,1.4vw+15px,27px);font-weight:800;letter-spacing:-.03em;line-height:1.12} .lb-meta{color:var(--ink-2);margin-top:5px;font-size:14px} .lb-notes{margin-top:12px;color:var(--ink-2);font-size:14px;line-height:1.55;white-space:pre-wrap} .lb-where{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)} .lb-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px} /* ---------- profilo / statistiche ---------- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--gap);margin:18px 0 clamp(30px,4vw,50px)} .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;animation:rise .45s var(--ease-out) backwards;animation-delay:calc(var(--i,0)*50ms)} .stat-n{font-size:clamp(26px,2vw + 16px,38px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums} .stat-l{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:8px} .cards{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--gap);align-items:start} @media(max-width:900px){.cards{grid-template-columns:1fr}} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,1.6vw,22px)} .card + .card{margin-top:var(--gap)} .card-t{font-size:16px;font-weight:800;letter-spacing:-.025em} .card-s{font-size:12.5px;color:var(--ink-3);margin:4px 0 16px;line-height:1.45} .rank-row{display:flex;align-items:center;gap:11px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:14px} .rank-row:last-child{border-bottom:none} .rank-row .n{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:20px;font-weight:600} .rank-row .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rank-row .c{margin-left:auto;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;font-weight:600} .rank-bar{height:6px;border-radius:999px;background:var(--accent);opacity:.85;margin-left:auto;min-width:3px;flex:0 0 auto} /* mappa */ .map-wrap{position:relative} .worldmap{width:100%;height:auto;display:block;touch-action:manipulation} .worldmap path{ fill:var(--f,var(--map-empty));stroke:var(--map-line);stroke-width:.5; vector-effect:non-scaling-stroke;transition:fill .35s var(--ease),opacity .15s } .worldmap path.has{cursor:pointer} .worldmap path.has:hover{opacity:.75} .worldmap path.sel{stroke:var(--ink);stroke-width:1.4} .legend{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11.5px;color:var(--ink-3)} .legend i{width:26px;height:9px;display:block;border-radius:2px} .legend-steps{display:flex;gap:3px} .cpanel{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;animation:rise .3s var(--ease-out)} .cpanel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px} .cpanel-t{font-weight:700;letter-spacing:-.02em} /* niente scorrimento orizzontale: il testo ci sta già, la barra era solo un effetto dei margini negativi delle righe */ .cpanel-list{max-height:230px;overflow-y:auto;overflow-x:hidden;padding:0 2px} /* grafico decenni */ /* Griglia e non flex, e non e' un dettaglio. Con quarant'anni di decenni una riga flex si rifiuta di stringersi sotto la somma dei suoi contenuti: la scheda diventava larga 374px, la colonna della pagina non poteva piu' rimpicciolirsi, e su un telefono stretto tutto il sito finiva fuori squadra — le schede non centrate, il layout rotto. Con `minmax(0,1fr)` le colonne possono davvero arrivare a zero, quindi la larghezza minima del grafico e' quella dei suoi spazi vuoti e basta. */ .bar-top{margin-bottom:6px} .bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:flex-end;gap:3px; min-width:0;height:clamp(140px,14vw,210px);border-bottom:1px solid var(--line-2);padding-top:6px} .bar-col{min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end} .bar-col.has{cursor:pointer} .bar-col.sel .bar{opacity:1;box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--accent)} .bar{width:100%;min-height:2px;border-radius:4px 4px 0 0;background:var(--accent);opacity:.9; transition:opacity .18s var(--ease),transform .18s var(--ease-out);transform-origin:bottom; animation:grow .5s var(--ease-out) backwards;animation-delay:calc(var(--i,0)*18ms)} @keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}} .bar-col:hover .bar{opacity:1;transform:scaleY(1.03)} .bar-x{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;margin-top:8px; min-width:0;font-size:10.5px;color:var(--ink-3)} .bar-x span{min-width:0;text-align:center;white-space:nowrap;overflow:visible} /* risultati ricerca globale */ .gres{border-top:1px solid var(--line)} .gres-row{ display:flex;align-items:center;gap:12px;padding:11px 10px;margin-inline:-2px; border-bottom:1px solid var(--line);cursor:pointer;border-radius:var(--r-sm); transition:background var(--dur);animation:rise .3s var(--ease-out) backwards;animation-delay:calc(var(--i,0)*22ms) } .gres-row:hover{background:var(--bg-2)} .gres-sp{width:6px;height:26px;border-radius:2px;flex:0 0 auto;background:var(--c,var(--s5))} .gres-t{display:block;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gres-m{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gres-w{margin-left:auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap;flex:0 0 auto;display:flex;align-items:center;gap:6px} @media(max-width:620px){.gres-w{display:none}} /* account */ .acct{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px} .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);display:inline-block;margin-right:7px;vertical-align:1px} .dot.ok{background:#3F9E62}.dot.err{background:#C2603F} .seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden} .seg button{padding:7px 15px;font-size:12.5px;font-weight:600;color:var(--ink-2);transition:background var(--dur),color var(--dur)} .seg button.on{background:var(--ink);color:var(--bg)} .seg button:not(.on):hover{background:var(--bg-2);color:var(--ink)} /* footer */ .foot{border-top:1px solid var(--line);margin-top:auto} .foot-in{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap; padding-block:22px 28px;font-size:12.5px;color:var(--ink-3)} .foot a{color:var(--ink-2);text-decoration:none;box-shadow:inset 0 -1px 0 var(--line-2)} .foot a:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)} .foot .logo{height:20px;opacity:.5} /* toast */ .toast{ position:fixed;left:50%;bottom:26px;z-index:300;transform:translateX(-50%) translateY(16px); background:var(--tip-bg);color:var(--tip-fg);padding:11px 20px;border-radius:999px; font-size:13.5px;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none; transition:opacity .24s var(--ease),transform .3s var(--ease-out); } .toast.on{opacity:1;transform:translateX(-50%) translateY(0)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} /* ---------- home a schede ---------- */ .home-top{padding-top:clamp(14px,2vw,22px)} .tabs{ display:flex;gap:4px;margin-top:clamp(22px,3vw,34px); /* La riga sotto le schede è un'ombra interna e non un bordo: un bordo, sommato al margine negativo della scheda attiva, faceva sporgere il contenuto di un pixel: quel pixel rendeva la striscia trascinabile anche in verticale, e su iPhone si sentiva. Ora l'unico asse che scorre è l'orizzontale, e solo quando le schede non ci stanno. */ box-shadow:inset 0 -1px 0 var(--line); overflow-x:auto;overflow-y:hidden; overscroll-behavior:contain; scrollbar-width:none; } .tabs::-webkit-scrollbar{display:none} .tab{ position:relative;flex:0 0 auto;display:flex;align-items:center;gap:7px; padding:11px 14px;font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ink-3); border-bottom:2px solid transparent;white-space:nowrap; transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease); } .tab:hover{color:var(--ink-2)} .tab.on{color:var(--ink);border-bottom-color:var(--accent)} .tab-n{ font-size:11px;font-weight:800;min-width:18px;height:18px;padding:0 5px;border-radius:9px; display:grid;place-items:center;background:var(--bg-2);color:var(--ink-2); } .tab.on .tab-n{background:var(--accent);color:var(--accent-fg)} .tab-panel{padding-top:clamp(20px,3vw,30px);animation:rise .3s var(--ease-out)} /* Su telefono le quattro schede non ci stavano: l'ultima restava mezza fuori, e in italiano — dove le parole sono più lunghe — spariva del tutto. Da qui nasceva la sensazione che cambiando lingua cambiasse la pagina. Stringendo il respiro e il corpo del testo ci stanno tutte, in tutte e due le lingue, e la striscia non ha più niente da scorrere. */ @media (max-width:480px){ .tabs{gap:2px} .tab{padding:11px 8px;font-size:13px;gap:5px} .tab-n{font-size:10px;min-width:16px;height:16px;padding:0 4px} } /* Sotto i 380 non bastava: si tolgono i contatori. Su uno schermo così piccolo vedere che esistono quattro sezioni conta più che sapere quante librerie ci sono — il numero è comunque scritto dentro la scheda. */ @media (max-width:380px){ .tabs{gap:0} .tab{padding:11px 7px;font-size:12.5px} .tab .tab-n{display:none} } /* ---------- azioni della libreria e menu di troppo pieno ---------- */ .lib-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center} /* Le etichette in italiano sono più lunghe che in inglese: senza un minimo comune i bottoni cambiavano misura al cambio lingua e la riga si spezzava in un punto diverso. Il minimo è tarato sulla parola più lunga. */ .lib-acts>.btn{min-width:104px;justify-content:center} .lib-acts>.btn.btn-ico{min-width:0} .more{position:relative;display:inline-flex} .btn-ico{padding:0;width:36px;height:36px;justify-content:center;align-items:center} .btn-ico svg{display:block} /* Il pannello prende i colori del tooltip, non quelli delle superfici. Sul tema azzurro una superficie e lo sfondo sono due azzurri vicini: il menu si confondeva con la pagina e sembrava una scatola vuota che non aveva caricato niente. I colori del tooltip sono l'unica coppia del sistema garantita in contrasto su tutti e tre i temi. */ .menu{ position:absolute;top:calc(100% + 7px);right:0;z-index:60;min-width:210px; display:none;flex-direction:column;padding:6px; background:var(--tip-bg);color:var(--tip-fg);border-radius:var(--r); box-shadow:var(--shadow-lg); } .more.on .menu{display:flex;animation:rise .16s var(--ease-out)} .menu-i{ display:flex;align-items:center;gap:9px;width:100%; padding:10px;border-radius:var(--r-sm); font-size:14px;font-weight:600;color:inherit;text-align:left; background:none;border:0;cursor:pointer;white-space:nowrap;opacity:.84; transition:background var(--dur) var(--ease),opacity var(--dur) var(--ease); } .menu-i:hover{background:rgba(128,128,128,.26);opacity:1} .menu-i svg{flex:0 0 auto} @media (max-width:520px){ /* Su schermo stretto i bottoni vanno a capo e i tre pallini finivano da soli in fondo a sinistra: agganciato a loro, il menu si apriva mezzo fuori dallo schermo. Qui il riferimento diventa l'intera fila, e il pannello scende largo quanto lei — dove uno se lo aspetta. */ .more{position:static} .lib-acts{position:relative} .menu{left:0;right:0;min-width:0} .lib-acts>.btn{min-width:0;flex:1 1 40%} .lib-acts>.more{flex:0 0 auto} } /* ---------- negozio ---------- */ .shop-p.shop-free{color:var(--accent);letter-spacing:.02em} .shop-sample{ display:flex;align-items:center;justify-content:center;gap:8px; width:100%;margin-top:14px;text-decoration:none; } .shop{max-width:520px} .shop-note{ background:var(--accent-soft);border-radius:var(--r);padding:16px 18px; font-size:13.5px;line-height:1.55;color:var(--ink-2);display:flex;flex-direction:column;gap:8px; } .shop-note b{color:var(--ink);font-weight:800;font-size:14.5px;letter-spacing:-.02em} .shop-opts{display:grid;gap:10px;margin-top:16px} .shop-opt{ display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;text-align:left; border:1px solid var(--line-2);border-radius:var(--r);padding:14px 16px;background:var(--surface); transition:border-color var(--dur),transform .18s var(--ease-out); } .shop-opt:hover:not([disabled]){border-color:var(--accent);transform:translateY(-1px)} .shop-opt[disabled]{opacity:.55;cursor:default} .shop-k{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--ink)} .shop-d{grid-column:1;font-size:12.5px;color:var(--ink-3);line-height:1.4} .shop-p{grid-row:1/3;grid-column:2;font-size:14px;font-weight:800;color:var(--accent)} .shop-opt[disabled] .shop-p{color:var(--ink-3)} .shop-pick{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px} .buy-list{display:flex;flex-direction:column;gap:8px} .buy{ display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px; border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--surface); } .buy-k{ font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; padding:4px 8px;border-radius:6px;background:var(--bg-2);color:var(--ink-2); } .buy-k.print{background:var(--accent);color:var(--accent-fg)} .buy-n{font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:560px){ .buy{grid-template-columns:auto 1fr;gap:8px 10px} .buy-d{grid-column:1/3} .buy .btn{grid-column:1/3;justify-self:start} } .field-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .field-row .field{max-width:280px} /* ---------- guida "aggiungi alla schermata Home" ---------- Non è una finestra al centro: è un foglio che sale dal basso, dove sta il pollice e dove il telefono si aspetta le cose da leggere e da chiudere. */ .sheet-ov{align-items:flex-end;padding:0} .sheet{ width:100%;max-width:520px;margin:0 auto; background:var(--bg);border:1px solid var(--line-2);border-bottom:none; border-radius:var(--r-lg) var(--r-lg) 0 0; padding:10px clamp(20px,5vw,28px) calc(22px + env(safe-area-inset-bottom,0px)); box-shadow:var(--shadow-lg);animation:sheetIn .34s var(--ease-out); max-height:92vh;max-height:92dvh;overflow-y:auto; } @keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}} .sheet-grab{display:block;width:38px;height:4px;border-radius:2px;background:var(--line-2);margin:0 auto 14px} .tip-art{display:grid;place-items:center;margin-bottom:12px} .tip-art svg{width:auto;height:clamp(140px,26vh,190px);display:block} .tip-title{font-size:20px;font-weight:800;letter-spacing:-.03em;text-align:center} .tip-sub{font-size:13.5px;color:var(--ink-2);text-align:center;margin:6px 0 18px;line-height:1.45} .tip-steps{list-style:none;display:flex;flex-direction:column;gap:11px;counter-reset:tip} .tip-step{display:flex;align-items:center;gap:13px;font-size:14px;line-height:1.35;color:var(--ink-2);counter-increment:tip} .tip-step b{font-weight:700;color:var(--ink)} .tip-ic{ flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center; background:var(--bg-2);border:1px solid var(--line);color:var(--ink);position:relative; } .tip-ic::after{ content:counter(tip);position:absolute;top:-6px;left:-6px; width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--accent-fg); font-size:10.5px;font-weight:800;display:grid;place-items:center; } .tip-foot{display:flex;gap:8px;margin-top:20px} .tip-foot .btn{flex:1;justify-content:center;padding-block:11px} .tip-foot .btn[hidden]{display:none} /* ---------- installata sulla schermata Home ---------- Senza la barra del browser le distanze di sicurezza (notch, isola dinamica, indicatore Home, angoli in orizzontale) non le mette più nessuno: le mette l'app. Fuori dalla modalità standalone queste regole non esistono, e dentro `env()` vale 0 dove non serve, quindi non spostano niente su desktop. */ @media (display-mode:standalone),(display-mode:minimal-ui){ :root{--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)} /* niente rimbalzo elastico: sotto la pagina non c'è un browser, c'è il vuoto */ html,body{overscroll-behavior-y:none} .topbar{padding-top:calc(clamp(10px,1.3vw,16px) + var(--safe-t))} .topbar-in,.wrap{ padding-left:max(var(--pad),env(safe-area-inset-left,0px)); padding-right:max(var(--pad),env(safe-area-inset-right,0px)); } main{padding-bottom:calc(clamp(60px,7vw,110px) + var(--safe-b))} .foot-in{padding-bottom:calc(28px + var(--safe-b))} .toast{bottom:calc(26px + var(--safe-b))} .modal{padding-bottom:calc(clamp(20px,2.6vw,30px) + var(--safe-b))} } /* transizione fra viste */ .view{animation:viewIn .34s var(--ease-out)} @keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* Aggiornamento arrivato dalla sincronizzazione, non dall'utente: il contenuto cambia sul posto senza rigiocare le animazioni d'ingresso. Lo spinner della sincronizzazione e l'evidenziazione del libro cercato restano vivi. */ .view.quiet, .view.quiet .lib-card, .view.quiet .intro-card, .view.quiet .hero-shelf i, .view.quiet .shelf-pet, .view.quiet .spine:not(.spot), .view.quiet .stat, .view.quiet .bar, .view.quiet .cpanel{animation:none} @media(max-width:640px){ /* iOS ingrandisce la pagina quando il campo a fuoco ha meno di 16px: qui la ricerca dei libri faceva uno zoom fastidioso a ogni tocco */ .field,input,select,textarea{font-size:16px} .toolbar .search-field{max-width:none;flex:1 1 100%} .toolbar select.field{flex:1 1 30%;min-width:0} .lib-head{align-items:flex-start} .stats{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))} .modal{border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:92dvh} .overlay{align-items:flex-end;padding:0} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} }