/* ========================================================================== Temi grafici — si attivano con l'attributo data-skin sull'elemento Caricato dopo style.css, quindi sovrascrive le variabili di base. ========================================================================== */ /* ========================================================================== 1. ELEGANT / LUXURY Nero profondo, oro, serif alto contrasto, filetti sottili, molta aria. ========================================================================== */ html[data-skin="luxury"]{ --red:#b8963f; --red-d:#96762c; --amber:#d9b45f; --amber-d:#b8963f; --bg:#0b0b0c; --bg-2:#121214; --bg-3:#191919; --bg-4:#232322; --fg:#f2ede3; --fg-2:#a9a294; --fg-3:#75705f; --line:rgba(217,180,95,.16); --line-2:rgba(217,180,95,.34); --shadow:none; --shadow-lg:0 30px 80px rgba(0,0,0,.7); --r:2px; --r-lg:3px; --r-sm:2px; --gut:38px; --font-d:'Didot','Bodoni MT','Playfair Display',Georgia,'Times New Roman',serif; /* l'oro è chiaro: sopra ci va testo scuro, non bianco */ --red-ink:#14120e; --amber-ink:#14120e; } html[data-skin="luxury"][data-theme="light"]{ --bg:#f7f4ee; --bg-2:#fffdf9; --bg-3:#f0ebe0; --bg-4:#e5ddcc; --fg:#14120e; --fg-2:#5c5547; --fg-3:#8d8574; --line:rgba(120,95,35,.18); --line-2:rgba(120,95,35,.34); --red:#8d6f2a; --amber:#8d6f2a; --red-ink:#ffffff; --amber-ink:#ffffff; } html[data-skin="luxury"] h1, html[data-skin="luxury"] h2, html[data-skin="luxury"] .card__t, html[data-skin="luxury"] .cat__h h3{ font-family:var(--font-d);font-weight:400;letter-spacing:.01em; } html[data-skin="luxury"] .hero__h1{font-weight:400;letter-spacing:-.01em} html[data-skin="luxury"] .hero__kicker, html[data-skin="luxury"] .cattab, html[data-skin="luxury"] .btn{ text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:600; } html[data-skin="luxury"] .btn--lg{font-size:.8rem;letter-spacing:.2em} html[data-skin="luxury"] .card{ background:transparent;border:0;border-top:1px solid var(--line); border-radius:0;padding-top:4px; } html[data-skin="luxury"] .card:hover{transform:none;box-shadow:none;border-top-color:var(--line-2)} html[data-skin="luxury"] .card__img{border-radius:0;filter:saturate(.82) contrast(1.04)} html[data-skin="luxury"] .card__f{border-top:0} html[data-skin="luxury"] .price{font-family:var(--font-d);font-weight:400;color:var(--amber)} html[data-skin="luxury"] .grp__h{border-bottom:1px solid var(--line-2)} html[data-skin="luxury"] .grp__h h2{font-size:clamp(1.8rem,4.4vw,2.8rem)} html[data-skin="luxury"] .hero__bg{ background:radial-gradient(1100px 460px at 50% -14%,rgba(217,180,95,.14),transparent 66%); } html[data-skin="luxury"] .fcard{border-radius:0;background:transparent;border:1px solid var(--line)} html[data-skin="luxury"] .acc__h{border-bottom:1px solid var(--line)} /* ========================================================================== 2. BOLD EDITORIAL Contrasto secco, titoli enormi condensati, spigoli vivi, filetti spessi. ========================================================================== */ html[data-skin="editorial"]{ --red:#e02020; --red-d:#b31414; --amber:#111; --amber-d:#000; --bg:#ffffff; --bg-2:#ffffff; --bg-3:#f2f2f2; --bg-4:#e4e4e4; --fg:#0a0a0a; --fg-2:#3d3d3d; --fg-3:#7a7a7a; --line:rgba(0,0,0,.18); --line-2:#0a0a0a; --shadow:none; --shadow-lg:0 20px 50px rgba(0,0,0,.28); --r:0px; --r-lg:0px; --r-sm:0px; --gut:24px; --font-d:'Bebas Neue','Oswald','Anton','Arial Narrow',Impact,sans-serif; --red-ink:#ffffff; --amber-ink:#ffffff; } html[data-skin="editorial"][data-theme="dark"]{ --bg:#0a0a0a; --bg-2:#111; --bg-3:#1a1a1a; --bg-4:#262626; --fg:#fafafa; --fg-2:#c4c4c4; --fg-3:#8a8a8a; --line:rgba(255,255,255,.2); --line-2:#fafafa; --amber:#fafafa; --amber-ink:#0a0a0a; } html[data-skin="editorial"] h1,h2,h3{letter-spacing:-.045em} html[data-skin="editorial"] .hero__h1{ font-family:var(--font-d);font-size:clamp(3rem,12vw,7rem);line-height:.88; letter-spacing:-.02em;text-transform:uppercase; } html[data-skin="editorial"] .hero__h1 span{ background:none;color:var(--red);-webkit-text-fill-color:var(--red); } html[data-skin="editorial"] .grp__h{border-bottom:5px solid var(--line-2);padding-bottom:10px} html[data-skin="editorial"] .grp__h h2{ font-family:var(--font-d);text-transform:uppercase;font-size:clamp(2rem,6vw,3.4rem);line-height:.94; } html[data-skin="editorial"] .cat__h h3{ font-family:var(--font-d);text-transform:uppercase;font-size:1.9rem;letter-spacing:-.01em; } html[data-skin="editorial"] .card{border:2px solid var(--line-2);border-radius:0} html[data-skin="editorial"] .card:hover{transform:none;box-shadow:6px 6px 0 var(--red)} html[data-skin="editorial"] .card__img{border-radius:0;filter:contrast(1.1)} html[data-skin="editorial"] .card__t{ font-family:var(--font-d);text-transform:uppercase;font-size:1.3rem;letter-spacing:-.005em; } html[data-skin="editorial"] .card__f{border-top:2px solid var(--line-2)} html[data-skin="editorial"] .price{ font-family:var(--font-d);font-size:1.7rem;color:var(--fg); background:var(--red);color:#fff;padding:2px 10px; } html[data-skin="editorial"] .price small{color:rgba(255,255,255,.8)} html[data-skin="editorial"] .btn{border-radius:0;font-weight:800;text-transform:uppercase;letter-spacing:.06em} html[data-skin="editorial"] .btn--primary{box-shadow:4px 4px 0 var(--fg)} html[data-skin="editorial"] .cattab{border-radius:0;border:2px solid var(--line);font-weight:700} html[data-skin="editorial"] .cattab.is-active{background:var(--fg);color:var(--bg);border-color:var(--fg)} html[data-skin="editorial"] .search input{border-radius:0;border:2px solid var(--line)} html[data-skin="editorial"] .chip span{border-radius:0;border-width:2px} html[data-skin="editorial"] .qty{border-radius:0;border:2px solid var(--line-2)} html[data-skin="editorial"] .qty__b{border-radius:0} html[data-skin="editorial"] .hero__bg{ background:repeating-linear-gradient(90deg,transparent 0 78px,var(--line) 78px 79px); opacity:.5; } html[data-skin="editorial"] .fcard{border:2px solid var(--line-2);border-radius:0} /* ========================================================================== 3. WARM / PUB Toni caldi di legno e crema, forme morbide, atmosfera da birreria. ========================================================================== */ html[data-skin="pub"]{ --red:#a8471f; --red-d:#82340f; --amber:#e0912f; --amber-d:#c0761c; --bg:#1c1512; --bg-2:#251c17; --bg-3:#302319; --bg-4:#3d2d20; --fg:#f7ead6; --fg-2:#c3ab8e; --fg-3:#8d7960; --line:rgba(224,145,47,.18); --line-2:rgba(224,145,47,.38); --r:16px; --r-lg:26px; --r-sm:12px; --gut:26px; --font-d:'Rockwell','Roboto Slab',Georgia,'Bebas Neue',serif; --red-ink:#ffffff; --amber-ink:#2c1c10; } html[data-skin="pub"][data-theme="light"]{ --bg:#fdf6e9; --bg-2:#fffdf6; --bg-3:#f6ecd8; --bg-4:#ecdcbe; --fg:#2c1c10; --fg-2:#6b5236; --fg-3:#9c8460; --line:rgba(120,75,25,.16); --line-2:rgba(120,75,25,.32); } html[data-skin="pub"] h1,h2,h3,.card__t{font-family:var(--font-d)} html[data-skin="pub"] .hero__bg{ background: radial-gradient(900px 420px at 50% -10%,rgba(224,145,47,.22),transparent 64%), repeating-linear-gradient(96deg,transparent 0 26px,rgba(255,255,255,.022) 26px 52px); } html[data-skin="pub"] .card{box-shadow:0 3px 0 var(--line)} html[data-skin="pub"] .card:hover{box-shadow:0 6px 0 var(--line-2);transform:translateY(-3px)} html[data-skin="pub"] .card__f{border-top:1px dashed var(--line-2)} html[data-skin="pub"] .price{ font-family:var(--font-d);background:var(--amber);color:#2c1c10; padding:3px 12px;border-radius:100px;font-size:1.05rem; } html[data-skin="pub"] .price small{color:rgba(44,28,16,.7)} html[data-skin="pub"] .cat__h h3::before{content:"🍺";margin-right:6px;font-size:.9em} html[data-skin="pub"] .grp__h{border-bottom:3px dashed var(--line-2)} html[data-skin="pub"] .btn{font-weight:800} html[data-skin="pub"] .fcard{box-shadow:0 3px 0 var(--line)} /* ========================================================================== Elementi comuni introdotti dal Blocco 2 ========================================================================== */ /* ------------------------------------------------- categorie a fisarmonica -- */ .acc__h{ width:100%;display:flex;align-items:center;gap:12px;text-align:left; padding:16px 4px;border-bottom:1px solid var(--line);cursor:pointer; transition:color .18s; } .acc__h:hover{color:var(--amber)} .acc__h h3{flex:1;font-size:1.4rem;display:flex;align-items:center;gap:11px} .acc__ico{ width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2); display:grid;place-items:center;flex:none;transition:transform .3s var(--ease),background .18s; } .acc__ico svg{width:15px;height:15px;stroke-width:2.4} .acc[open] .acc__ico{transform:rotate(180deg);background:var(--red);color:#fff;border-color:var(--red)} .acc__d{color:var(--fg-3);font-size:.88rem;margin:8px 2px 0} .acc__body{padding-top:18px} .acc summary::-webkit-details-marker{display:none} .acc summary{list-style:none} @media (prefers-reduced-motion:no-preference){ .acc[open] .acc__body{animation:accIn .32s var(--ease)} } @keyframes accIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} /* --------------------------------------------------------- icone allergeni -- */ .ico-a{width:19px;height:19px;stroke-width:1.7;flex:none} .allg{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px} .allg__i{ display:grid;place-items:center;width:28px;height:28px;border-radius:50%; background:var(--bg-3);border:1px solid var(--line);color:var(--fg-2); cursor:help;transition:.16s; } .allg__i:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-1px)} .allg__i--tag{background:transparent;border-color:var(--line-2);color:var(--amber)} .allg__lbl{ font-size:.64rem;text-transform:uppercase;letter-spacing:.1em; color:var(--fg-3);font-weight:700;margin-right:2px; } /* ------------------------------------------------ dimensioni immagine card -- */ .card__img--small{aspect-ratio:16/7} .card__img--large{aspect-ratio:1/1} .card--nomedia .card__img{display:none} .card__img--zoom{cursor:zoom-in} /* ---------------------------------------------------------- pulsante video -- */ .card__video{ position:absolute;top:10px;right:10px;z-index:2; width:38px;height:38px;border-radius:50%; display:grid;place-items:center; background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); transition:transform .2s var(--ease),background .2s; } .card__video:hover{background:var(--red);border-color:var(--red);transform:scale(1.08)} .card__video svg{width:16px;height:16px;margin-left:2px} /* ----------------------------------------------------------------- lightbox -- */ .lb{ position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px; background:rgba(0,0,0,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); animation:fade .22s ease; } .lb__in{ position:relative;max-width:min(1000px,94vw);max-height:88vh; display:flex;flex-direction:column;gap:12px;align-items:center; } .lb__in img,.lb__in video{ max-width:100%;max-height:76vh;border-radius:var(--r);object-fit:contain; box-shadow:var(--shadow-lg);background:#000; } .lb__in iframe{ width:min(420px,92vw);height:min(748px,76vh);border:0;border-radius:var(--r);background:#000; } .lb__cap{color:#fff;font-size:.92rem;font-weight:600;text-align:center;max-width:600px} .lb__x{ position:absolute;top:-46px;right:-4px;width:40px;height:40px;border-radius:50%; background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;font-size:1.7rem;line-height:1; } .lb__x:hover{background:rgba(255,255,255,.26)} .lb__ext{ color:#fff;font-size:.86rem;text-decoration:underline;text-underline-offset:3px;opacity:.85; } /* ====================================================================== Template bevande: birre, vini, bibite ====================================================================== */ .drinks{display:grid;gap:10px} .drink{ display:flex;align-items:center;gap:14px;padding:12px 14px; background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r); transition:border-color .2s,transform .2s var(--ease); } .drink:hover{border-color:var(--line-2);transform:translateX(2px)} .drink.is-hidden{display:none} .drink__logo{ width:52px;height:52px;flex:none;border-radius:10px;object-fit:contain; background:var(--bg-3);padding:5px; } .drink__logo--ph{ display:grid;place-items:center;font-family:var(--font-d);font-size:1.1rem; color:var(--fg-3);text-transform:uppercase; } .drink__b{flex:1;min-width:0} .drink__t{font-size:1.02rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .drink__meta{ display:flex;flex-wrap:wrap;gap:5px;margin-top:5px; font-size:.74rem;color:var(--fg-3); } .drink__meta span{ padding:2px 9px;border-radius:100px;background:var(--bg-3); border:1px solid var(--line);white-space:nowrap; } .drink__meta span.grad{color:var(--amber);border-color:var(--line-2)} .drink__d{font-size:.83rem;color:var(--fg-2);margin-top:5px} .drink__prices{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;flex:none} .dvar{ display:flex;flex-direction:column;align-items:center;gap:1px; padding:6px 12px;border-radius:var(--r-sm);background:var(--bg-3); border:1px solid var(--line);transition:.16s;min-width:64px; } .dvar:hover{border-color:var(--red);background:var(--bg-4)} .dvar__l{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--fg-3);font-weight:700} .dvar__p{font-family:var(--font-d);font-size:1.05rem;color:var(--amber);line-height:1.1} .dvar.has{background:var(--red);border-color:var(--red)} .dvar.has .dvar__l,.dvar.has .dvar__p{color:#fff} .dvar__n{ position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px; border-radius:100px;background:var(--amber);color:#191612; font-size:.66rem;font-weight:800;display:grid;place-items:center; } .dvar{position:relative} @media (max-width:620px){ .drink{flex-wrap:wrap} .drink__prices{width:100%;justify-content:flex-start;margin-top:4px} .drink__logo{width:42px;height:42px} } /* ====================================================================== Carosello iniziale ====================================================================== */ .car{ position:relative;max-width:var(--wrap);margin:0 auto;overflow:hidden; background:var(--bg-3);border-radius:var(--r-lg); } @media (min-width:1280px){.car{margin:18px auto 0}} .car__track{display:flex;transition:transform .5s var(--ease);will-change:transform} .car__s{ flex:0 0 100%;position:relative;background:var(--bg-4); aspect-ratio:var(--car-ratio,16/9); /* limite di sicurezza: con formati verticali o immagini molto alte il carosello non deve mangiarsi l'intera pagina */ max-height:min(72vh,640px); } .car__s img,.car__s video{width:100%;height:100%;object-fit:cover;display:block} .car__cap{ position:absolute;left:0;right:0;bottom:0;padding:28px var(--gut) 26px; background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.35) 55%,transparent); color:#fff; } .car__cap h2{font-size:clamp(1.3rem,3.4vw,2.2rem);letter-spacing:-.02em;color:#fff} .car__cap p{margin-top:6px;font-size:.95rem;opacity:.92;max-width:640px} .car__cap .btn{margin-top:14px} .car__nav{ position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:42px;height:42px;border-radius:50%;display:grid;place-items:center; background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .18s; } .car__nav:hover{background:rgba(0,0,0,.72)} .car__nav--prev{left:12px} .car__nav--next{right:12px} .car__dots{ position:absolute;left:0;right:0;bottom:10px;z-index:2; display:flex;gap:7px;justify-content:center; } .car__dots button{ width:8px;height:8px;border-radius:100px;background:rgba(255,255,255,.45); transition:width .25s var(--ease),background .2s; } .car__dots button.is-on{width:26px;background:#fff} @media (max-width:640px){ .car{border-radius:0} .car__nav{width:34px;height:34px} .car__cap{padding:18px 16px 20px} } /* ====================================================================== Banner con titolo e pulsante ====================================================================== */ .bnr{ display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; padding:20px 24px;border-radius:var(--r-lg);margin:22px 0; border:1px solid var(--line);background:var(--bg-2); } .bnr__b{flex:1;min-width:230px} .bnr__b h3{font-size:1.15rem;letter-spacing:-.015em} .bnr__b p{margin-top:5px;font-size:.9rem;color:var(--fg-2)} .bnr--accent{ background:linear-gradient(100deg,color-mix(in srgb,var(--red) 16%,var(--bg-2)),var(--bg-2)); border-color:color-mix(in srgb,var(--red) 34%,transparent); } .bnr--accent h3{color:var(--amber)} .bnr--dark{background:var(--fg);border-color:var(--fg)} .bnr--dark h3{color:var(--bg)} .bnr--dark p{color:color-mix(in srgb,var(--bg) 78%,var(--fg))} .bnr--outline{background:transparent;border-style:dashed;border-color:var(--line-2)} @media (max-width:520px){ .bnr{padding:16px 18px} .bnr .btn{width:100%} } /* ====================================================================== Componi il tuo ====================================================================== */ .drawer--wide{width:min(560px,100%)} .price__from{ display:inline!important;font-family:var(--font);font-size:.62rem;font-weight:700; text-transform:uppercase;letter-spacing:.08em;color:var(--fg-3);margin-right:3px; } .btn.build svg{width:15px;height:15px} .bld__base{ font-size:.9rem;color:var(--fg-2);padding:11px 13px;margin-bottom:16px; background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-sm); } .bld__g{border:0;margin-bottom:22px} .bld__g legend{ font-size:.95rem;font-weight:800;letter-spacing:-.01em;padding:0 0 3px; display:flex;align-items:center;gap:8px;flex-wrap:wrap; } .bld__g legend em{font-style:normal;font-size:.76rem;font-weight:600;color:var(--fg-3)} .bld__req{ font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em; background:var(--red);color:#fff;padding:2px 7px;border-radius:100px; } .bld__hint{font-size:.82rem;color:var(--fg-3);margin-bottom:9px} .bld__opts{display:grid;gap:6px} .bld__o{ display:flex;align-items:center;gap:11px;padding:10px 13px;cursor:pointer; background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm); transition:border-color .15s,background .15s; } .bld__o:hover{border-color:var(--line-2)} .bld__o input{width:17px;height:17px;accent-color:var(--red);flex:none;margin:0} .bld__o.is-on{border-color:var(--red);background:color-mix(in srgb,var(--red) 9%,var(--bg-2))} .bld__on{flex:1;font-size:.92rem;font-weight:600} .bld__op{font-size:.83rem;font-weight:700;color:var(--amber);white-space:nowrap} .bld__o.is-on .bld__op{color:var(--red)} .bld__sum{display:flex;flex-wrap:wrap;gap:5px;min-height:26px;align-items:center} .bld__chip{ font-size:.73rem;font-weight:600;padding:3px 10px;border-radius:100px; background:var(--bg-2);border:1px solid var(--line);color:var(--fg-2); } .bld__sum .muted{font-size:.83rem;color:var(--fg-3)} .crow__parts{ display:block;font-size:.74rem;color:var(--fg-3);line-height:1.4;margin:2px 0 1px; } /* Su schermi stretti il rientro laterale non deve superare i 20px, qualunque sia il template scelto. */ @media (max-width:560px){ html[data-skin="luxury"], html[data-skin="editorial"], html[data-skin="pub"]{ --gut:20px; } }