/* ========================================================= L'Osteria Del Trucca — La Piazza del Trucca Sunlit Italian piazza · la bilancia nav · gravity motion ========================================================= */ :root{ --cream: #FBF3E2; /* piazza walls */ --lemon: #F6E7C9; /* card facades / sky */ --sea: #1E6E8C; /* adriatic / headings / lines */ --sea-light: #2E97AE; /* tiles / hover / chains */ --terra: #D9572B; /* CTA / tomato */ --gold: #E9A23B; /* the scale / counterweights (decorative) */ --gold-deep: #9A5B12; /* gold-toned text on LIGHT bg — passes AA */ --basil: #3E7B4F; /* fresh / aperto */ --ink: #2A2723; /* warm near-black text */ --maxw: 1180px; --r: 16px; --shadow: 0 14px 40px -22px rgba(30,110,140,.45); --shadow-soft: 0 8px 24px -16px rgba(42,39,35,.4); --f-display: "Bodoni Moda", Georgia, serif; --f-title: "Instrument Serif", Georgia, serif; --f-body: "Hanken Grotesk", system-ui, sans-serif; --f-script: "Caveat", cursive; --ease: cubic-bezier(.65,.05,.36,1); /* easeInOutCubic-ish */ --spring: cubic-bezier(.34,1.56,.64,1); /* overshoot settle */ } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:64px; scroll-padding-bottom:84px; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } /* clip horizontal overflow without trapping vertical scroll: overflow-x:clip on forces overflow-y to clip too (spec), which kills page scrolling — so contain it on only, via hidden. */ body{ overflow-x:hidden; } body{ margin:0; font-family:var(--f-body); color:var(--ink); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; font-size:clamp(15px,1.05vw,17px); } img{ display:block; max-width:100%; height:auto; } a{ color:var(--sea); text-decoration-color:color-mix(in srgb, var(--sea) 40%, transparent); text-underline-offset:3px; } a:hover{ color:var(--sea-light); } :focus-visible{ outline:3px solid var(--terra); outline-offset:3px; border-radius:6px; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:var(--cream); padding:.7rem 1.1rem; border-radius:0 0 10px 0; } .skip-link:focus{ left:0; } /* ---------- eyebrows / titles ---------- */ .eyebrow{ font-family:var(--f-body); text-transform:uppercase; letter-spacing:.22em; font-size:.74rem; font-weight:700; color:var(--gold-deep); margin:0 0 .6rem; } /* on the dark storia bg the bright gold is fine and intended */ .storia .eyebrow{ color:var(--gold); } .section-title{ font-family:var(--f-title); font-weight:400; font-size:clamp(2.4rem,6vw,4rem); color:var(--sea); margin:.1rem 0 .8rem; line-height:1.02; } .section-title.light{ color:var(--cream); } .lead{ font-size:clamp(1rem,1.4vw,1.18rem); max-width:60ch; margin:.2rem 0 0; } .lead.light{ color:color-mix(in srgb,var(--cream) 92%, var(--gold)); } .lead em{ font-style:normal; color:var(--terra); font-weight:600; } .lead.light em{ color:var(--gold); } /* ========================================================= SKY-STRIP (top) ========================================================= */ .sky-strip{ position:sticky; top:0; z-index:120; display:flex; align-items:center; gap:1rem; padding:.5rem clamp(.8rem,3vw,2rem); background:color-mix(in srgb, var(--lemon) 90%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid color-mix(in srgb,var(--sea-light) 30%, transparent); } .wappen{ flex:0 0 auto; display:block; } .wappen img{ height:38px; width:auto; } .piazza-map{ flex:1 1 auto; display:flex; align-items:center; gap:.7rem; justify-content:center; min-width:0; } .map-label{ font-family:var(--f-title); font-size:1rem; color:var(--sea); white-space:nowrap; opacity:.8; } .map-dots{ display:flex; gap:.55rem; align-items:center; list-style:none; margin:0; padding:.3rem .7rem; background:color-mix(in srgb,var(--cream) 70%, transparent); border-radius:999px; border:1px solid color-mix(in srgb,var(--sea-light) 28%, transparent); } /* visible dot stays small; the hit box is enlarged to ~44px */ .map-dot{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; margin:-13px -8px; /* grow hit area without growing layout */ } .map-dot span{ display:block; width:10px; height:10px; border-radius:50%; background:color-mix(in srgb,var(--sea) 40%, transparent); transition:transform .4s var(--spring), background .3s ease; } .map-dot:hover span{ background:var(--sea-light); } .map-dot.is-current span{ background:var(--terra); transform:scale(1.5); } .btn-reserve{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:var(--terra); color:#fff; text-decoration:none; font-weight:700; font-size:.92rem; letter-spacing:.01em; padding:.62rem 1.15rem; border-radius:999px; border:none; cursor:pointer; box-shadow:0 6px 18px -8px rgba(217,87,43,.7); transition:transform .25s var(--spring), box-shadow .25s ease, background .2s ease; } .btn-reserve:hover{ color:#fff; background:#c64d24; transform:translateY(-2px); box-shadow:0 10px 22px -8px rgba(217,87,43,.8); } .sky-reserve{ white-space:nowrap; } /* ========================================================= PIAZZA / QUARTERS ========================================================= */ .piazza{ display:block; } .quarter{ position:relative; max-width:var(--maxw); margin:0 auto; padding:clamp(3.5rem,8vw,7rem) clamp(1.1rem,4vw,2.5rem); } .quarter-head{ margin-bottom:1.4rem; } /* majolica divider: a repeating ceramic tile band (Vietri/Caltagirone motif) */ .majolica-rule{ height:26px; margin:1.6rem 0 2rem; background-color:var(--lemon); background-image: /* terracotta center dot */ radial-gradient(circle at 13px 13px, var(--terra) 0 2px, transparent 2.5px), /* gold medallion */ radial-gradient(circle at 13px 13px, var(--gold) 0 5px, transparent 5.5px), /* sea-blue four-point ceramic leaf */ radial-gradient(circle at 0 0, transparent 0 7px, color-mix(in srgb,var(--sea-light) 80%, transparent) 7px 9px, transparent 9.5px), radial-gradient(circle at 26px 0, transparent 0 7px, color-mix(in srgb,var(--sea-light) 80%, transparent) 7px 9px, transparent 9.5px), radial-gradient(circle at 0 26px, transparent 0 7px, color-mix(in srgb,var(--sea-light) 80%, transparent) 7px 9px, transparent 9.5px), radial-gradient(circle at 26px 26px, transparent 0 7px, color-mix(in srgb,var(--sea-light) 80%, transparent) 7px 9px, transparent 9.5px); background-size:26px 26px; background-position:center; border-top:1.5px solid color-mix(in srgb,var(--sea) 45%, transparent); border-bottom:1.5px solid color-mix(in srgb,var(--sea) 45%, transparent); border-radius:4px; opacity:.9; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); } /* ---------- HERO FOUNTAIN ---------- */ .hero{ text-align:center; padding-top:clamp(2rem,5vw,4rem); overflow-x:clip; } .hero-inner{ position:relative; z-index:2; } /* dappled water-light: sun rippling through a fountain / awning */ .caustic{ position:absolute; inset:-12% 0 auto 0; height:90%; z-index:0; pointer-events:none; opacity:.7; background: radial-gradient(26% 20% at 22% 24%, rgba(233,162,59,.26), transparent 62%), radial-gradient(20% 16% at 40% 14%, rgba(46,151,174,.20), transparent 62%), radial-gradient(22% 18% at 62% 30%, rgba(233,162,59,.18), transparent 62%), radial-gradient(18% 16% at 80% 20%, rgba(46,151,174,.20), transparent 62%), repeating-radial-gradient(circle at 50% 30%, rgba(46,151,174,.10) 0 6px, transparent 6px 22px), repeating-radial-gradient(circle at 30% 50%, rgba(233,162,59,.08) 0 8px, transparent 8px 26px); filter:blur(14px); animation:caustic-ripple 16s ease-in-out infinite alternate; } @keyframes caustic-ripple{ 0%{ transform:translate3d(-2%,0,0) scale(1); background-position:0 0; } 50%{ transform:translate3d(1.5%,1.5%,0) scale(1.05); } 100%{ transform:translate3d(3%,3%,0) scale(1.09); background-position:14px 10px; } } .fountain-arch{ position:relative; width:min(560px,90vw); aspect-ratio:600/520; margin:1.2rem auto 1.6rem; } /* the majolica-tiled archway that genuinely encloses the photo */ .majolica-arch{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:visible; filter:drop-shadow(0 16px 30px rgba(30,110,140,.35)); } .arch-frame{ opacity:0; transform:translateY(14px); transition:opacity 1s var(--ease), transform 1s var(--ease); } .arch-frame.painted{ opacity:1; transform:none; } .arch-line{ stroke:var(--sea); stroke-width:2.5; fill:none; } .arch-line-inner{ stroke:color-mix(in srgb,var(--sea) 70%, var(--cream)); stroke-width:2; } .arch-springer{ fill:var(--gold); stroke:var(--sea); stroke-width:1.6; } .arch-keystone{ fill:var(--gold); stroke:var(--sea); stroke-width:1.8; } .arch-keystone-gem{ fill:var(--terra); stroke:var(--cream); stroke-width:2; } /* the photo sits inside the arch opening as the fountain niche */ .hero-photo{ position:absolute; z-index:2; left:9.7%; top:7.7%; width:80.6%; height:auto; aspect-ratio:484/430; object-fit:cover; border-radius:48% 48% 14px 14px / 40% 40% 14px 14px; border:4px solid var(--cream); box-shadow:var(--shadow-soft); filter:brightness(1.06) saturate(1.05); } .display-caps{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; line-height:1.06; font-size:clamp(1.75rem,6vw,4.6rem); color:var(--sea); margin:.4rem 0 .4rem; text-wrap:balance; overflow-wrap:break-word; } .hero-sub{ font-family:var(--f-title); font-size:clamp(1.25rem,2.6vw,1.9rem); color:var(--terra); margin:.2rem 0; } .hero-script{ font-family:var(--f-script); font-size:clamp(1.3rem,3vw,1.8rem); color:var(--basil); margin:.1rem 0 1.4rem; } .scroll-cue{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; text-decoration:none; color:var(--sea); padding:.5rem .2rem; } .scroll-cue span{ animation:bob 1.8s ease-in-out infinite; } @keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } } /* ========================================================= CUCINA — menu on tilting scale-rows ========================================================= */ .mode-pill{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem; background:var(--lemon); border:1px solid color-mix(in srgb,var(--gold) 50%, transparent); border-radius:999px; padding:.4rem .9rem; font-size:.9rem; } .mode-pill-label{ color:color-mix(in srgb,var(--ink) 70%, transparent); } .mode-pill-value{ font-weight:700; color:var(--terra); } body[data-mode="takeaway"] .mode-pill-value{ color:var(--basil); } /* ---------- corso: sticky in-menu group nav (each chip a little pan) ---------- */ .corso{ position:sticky; top:54px; z-index:60; display:flex; gap:.4rem; overflow-x:auto; overflow-y:hidden; margin:1rem 0 1.6rem; padding:.5rem .2rem; scrollbar-width:thin; -webkit-overflow-scrolling:touch; background:color-mix(in srgb,var(--cream) 88%, transparent); backdrop-filter:blur(8px); border-top:1px solid color-mix(in srgb,var(--gold) 30%, transparent); border-bottom:1px solid color-mix(in srgb,var(--gold) 30%, transparent); scroll-snap-type:x proximity; } .corso-chip{ flex:0 0 auto; scroll-snap-align:start; display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:999px; text-decoration:none; font-family:var(--f-body); font-weight:600; font-size:.85rem; color:var(--ink); background:var(--lemon); border:1px solid color-mix(in srgb,var(--sea-light) 28%, transparent); white-space:nowrap; transition:background .2s ease, color .2s ease, transform .2s var(--spring); } .corso-chip:hover{ color:var(--ink); transform:translateY(-1px); } .corso-chip.is-current{ background:var(--sea); color:#fff; border-color:var(--sea); } .corso-pan{ width:18px; height:15px; flex:0 0 auto; transition:transform .4s var(--spring); } .corso-pan line{ stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; } .corso-pan path{ fill:var(--gold); stroke:var(--gold); stroke-width:1; } .corso-chip.is-current .corso-pan line{ stroke:#fff; } .corso-chip.is-current .corso-pan path{ fill:#fff; stroke:#fff; } .corso-chip.is-current .corso-pan{ transform:rotate(-7deg); } .menu{ display:flex; flex-direction:column; gap:2.4rem; scroll-margin-top:120px; } .menu-group{ scroll-margin-top:110px; } /* collapsed rows for long groups (e.g. Pizze Classiche) */ .dish.is-hidden-row{ display:none; } .menu-rows.rows-open .dish.is-hidden-row{ display:grid; } .show-all{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.7rem; background:transparent; border:1.5px solid color-mix(in srgb,var(--sea) 45%, transparent); color:var(--sea); font-family:var(--f-body); font-weight:700; font-size:.85rem; padding:.45rem 1rem; border-radius:999px; cursor:pointer; transition:background .2s ease, color .2s ease, transform .2s var(--spring); } .show-all:hover{ background:var(--sea); color:#fff; transform:translateY(-1px); } .menu-group{ } .menu-group__head{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; margin-bottom:.4rem; } .menu-group__title{ font-family:var(--f-title); font-weight:400; font-size:clamp(1.5rem,3vw,2.1rem); color:var(--sea); margin:0; } .menu-group__note{ font-size:.84rem; color:color-mix(in srgb,var(--ink) 65%, transparent); font-style:italic; } .group-tag{ font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--basil); padding:.18rem .5rem; border-radius:6px; } .group-tag.takeaway{ background:var(--gold); color:var(--ink); } .menu-rows{ list-style:none; margin:.4rem 0 0; padding:0; } /* one dish = a little scale-row */ .dish{ display:grid; grid-template-columns:1fr auto; align-items:start; gap:.6rem 1rem; padding:.7rem .2rem; border-bottom:1px dashed color-mix(in srgb,var(--sea-light) 32%, transparent); transform-origin:center top; transition:transform .5s var(--spring), background .3s ease; border-radius:10px; } .dish:hover, .dish.is-weighed{ background:color-mix(in srgb,var(--lemon) 60%, transparent); } /* the weighing tilt is rare — reserved for featured (photo) dishes */ .dish.has-photo{ transform-origin:left center; } .dish.has-photo:hover, .dish.has-photo.is-weighed{ transform:translateY(-3px) rotate(-1.2deg); box-shadow:var(--shadow-soft); } .dish.has-photo:hover .dish-price, .dish.has-photo.is-weighed .dish-price{ transform:translateY(-5px) rotate(-3deg); } .dish-main{ min-width:0; } .dish-name{ font-family:var(--f-title); font-weight:400; font-size:1.18rem; color:var(--ink); margin:0; overflow-wrap:anywhere; } /* phone-order code: muted small-caps suffix, never a styled accent prefix */ .dish-name .dish-code{ font-family:var(--f-body); font-weight:600; font-size:.62em; letter-spacing:.06em; text-transform:uppercase; color:color-mix(in srgb,var(--ink) 50%, transparent); margin-left:.45em; vertical-align:.08em; white-space:nowrap; } .dish-desc{ font-size:.92rem; color:color-mix(in srgb,var(--ink) 78%, transparent); margin:.15rem 0 0; overflow-wrap:anywhere; } /* note that slides from under the pan */ .dish-note{ font-family:var(--f-script); font-size:1.15rem; color:var(--terra); display:block; max-height:0; opacity:0; overflow:hidden; transition:max-height .4s var(--ease), opacity .35s ease, margin .3s ease; margin-top:0; } .dish:hover .dish-note, .dish.is-weighed .dish-note{ max-height:2.5em; opacity:1; margin-top:.25rem; } /* the price counterweight on a tiny pan — ink on gold for AA contrast */ .dish-price{ position:relative; justify-self:end; align-self:start; font-weight:700; font-variant-numeric:tabular-nums; font-size:1.05rem; color:var(--ink); padding:.35rem .8rem; background:var(--gold); border-radius:999px; white-space:nowrap; box-shadow:0 4px 12px -6px rgba(233,162,59,.8); transition:transform .5s var(--spring); } body[data-mode="takeaway"] .dish-price{ color:var(--ink); background:color-mix(in srgb,var(--gold) 72%, var(--basil)); } .dish-price.flash{ animation:reweigh .55s var(--spring); } @keyframes reweigh{ 0%{ transform:translateY(-6px) scale(.92); } 55%{ transform:translateY(2px) scale(1.05); } 100%{ transform:translateY(0) scale(1); } } /* take-away unavailable marker */ .dish.dimmed{ opacity:.5; } .dish .ta-na{ font-size:.78rem; color:color-mix(in srgb,var(--ink) 55%, transparent); font-style:italic; } /* dish photo that drops into the pan (only featured rows) */ .dish.has-photo .dish-main{ display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start; } .dish-photo{ width:72px; height:72px; border-radius:12px; object-fit:cover; border:3px solid var(--cream); box-shadow:var(--shadow-soft); transform:translateY(-6px) rotate(-3deg) scale(.96); transition:transform .5s var(--spring); flex:0 0 auto; } .dish.has-photo:hover .dish-photo, .dish.has-photo.is-weighed .dish-photo{ transform:translateY(0) rotate(0) scale(1); } /* ========================================================= FAMIGLIA ========================================================= */ .famiglia{ } .famiglia-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; } .fam-establish{ margin:0; } .fam-establish img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); border:4px solid var(--cream); box-shadow:var(--shadow); outline:1px solid color-mix(in srgb,var(--sea) 30%, transparent); filter:brightness(1.04) saturate(1.04); } .fam-establish figcaption{ font-family:var(--f-script); color:var(--sea); font-size:1.15rem; margin-top:.6rem; text-align:center; } .fam-text{ font-size:clamp(1rem,1.5vw,1.18rem); margin:0 0 1.4rem; } .fam-text em{ font-style:normal; color:var(--terra); font-weight:600; } .fam-photo{ margin:0 0 1.4rem; } .fam-photo img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r); border:4px solid var(--cream); box-shadow:var(--shadow); outline:1px solid color-mix(in srgb,var(--sea) 30%, transparent); filter:brightness(1.05) saturate(1.04); } .fam-people{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; } .fam-people li{ padding:.9rem 1.1rem; background:var(--lemon); border-radius:12px; border-left:4px solid var(--gold); } .fam-name{ display:block; font-family:var(--f-title); font-size:1.3rem; color:var(--sea); } .fam-role{ display:block; font-size:.9rem; color:color-mix(in srgb,var(--ink) 78%, transparent); } /* ========================================================= STORIA (dark parchment quarter) ========================================================= */ .storia{ color:var(--cream); border-radius:28px; overflow:hidden; max-width:none; margin:0; } .storia .quarter-head, .storia .storia-scene{ max-width:var(--maxw); margin-left:auto; margin-right:auto; } .storia-bg{ position:absolute; inset:0; z-index:0; background: linear-gradient(180deg, rgba(20,38,46,.86), rgba(20,38,46,.92)), url("assets/menu-cover.jpg") center/cover no-repeat; } .storia .quarter-head, .storia-scene{ position:relative; z-index:1; } .storia-scene{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; margin-top:1.5rem; } .legend-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.4rem; } .legend-step{ padding-left:.2rem; } .step-no{ display:inline-block; font-family:var(--f-script); font-size:1.5rem; color:var(--gold); margin-bottom:.1rem; } .legend-step p{ margin:.1rem 0 0; color:color-mix(in srgb,var(--cream) 90%, var(--gold)); font-size:clamp(1rem,1.5vw,1.15rem); } .legend-step strong{ color:var(--cream); } .legend-scale{ text-align:center; } .big-scale{ width:min(320px,80%); height:auto; margin:0 auto; } .bs-post,.bs-base,.bs-beam{ stroke:var(--gold); stroke-width:4; stroke-linecap:round; fill:none; } .bs-pan path{ fill:var(--gold); stroke:var(--gold); } .bs-pan line{ stroke:var(--sea-light); stroke-width:2.5; } .bs-pivot{ fill:var(--terra); } .bs-coin{ fill:var(--ink); font-size:20px; text-anchor:middle; font-family:serif; } .bs-beam-grp{ transform-origin:160px 62px; transform:rotate(0deg); transition:transform 1.1s var(--spring); } /* the scale tips further toward the guest with each legend step read */ .storia[data-tip="1"] .bs-beam-grp{ transform:rotate(-5deg); } .storia[data-tip="2"] .bs-beam-grp{ transform:rotate(-10deg); } .storia[data-tip="3"] .bs-beam-grp{ transform:rotate(-15deg); } /* the gold ★ coin slides toward the guest's (left) pan as it tips */ .bs-coin{ transition:transform 1.1s var(--spring); } .storia[data-tip="2"] .bs-coin{ transform:translate(-3px,4px); } .storia[data-tip="3"] .bs-coin{ transform:translate(-6px,9px); } .legend-caption{ font-family:var(--f-script); color:var(--gold); font-size:1.3rem; margin-top:.6rem; } /* ========================================================= TAVOLA ========================================================= */ .tavola-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3.5vw,2.6rem); align-items:start; } .hours-card,.visit-card{ background:var(--lemon); border-radius:var(--r); padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--shadow-soft); border:1px solid color-mix(in srgb,var(--gold) 30%, transparent); } .card-h{ font-family:var(--f-title); font-weight:400; font-size:1.6rem; color:var(--sea); margin:.2rem 0 1rem; } .open-state{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.9rem; } .open-dot{ width:11px; height:11px; border-radius:50%; background:#bbb; box-shadow:0 0 0 0 rgba(62,123,79,.5); } .open-dot.open{ background:var(--basil); animation:pulse 2.2s ease-in-out infinite; } .open-dot.closed{ background:var(--terra); } @keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(62,123,79,.5);} 50%{ box-shadow:0 0 0 7px rgba(62,123,79,0);} } .open-text{ color:var(--ink); } .hours{ width:100%; border-collapse:collapse; font-size:.95rem; } .hours th{ text-align:left; font-weight:600; padding:.4rem .4rem; white-space:nowrap; vertical-align:top; } .hours td{ text-align:right; padding:.4rem .4rem; font-variant-numeric:tabular-nums; } .hours tr{ border-bottom:1px solid color-mix(in srgb,var(--sea-light) 22%, transparent); } .hours .closed{ color:var(--terra); font-style:italic; } .hours tr.today{ background:color-mix(in srgb,var(--gold) 22%, transparent); } .hours tr.today th, .hours tr.today td{ font-weight:700; } .sommerpause{ margin-top:1rem; font-size:.88rem; padding:.7rem .9rem; background:color-mix(in srgb,var(--terra) 12%, transparent); border-left:4px solid var(--terra); border-radius:8px; } .majolica-map{ display:block; position:relative; margin:0 0 1rem; border-radius:12px; overflow:hidden; text-decoration:none; border:1px solid color-mix(in srgb,var(--sea) 35%, transparent); transition:transform .25s var(--spring), box-shadow .25s ease; } .majolica-map:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); } .majolica-map svg{ width:100%; height:auto; display:block; } .mm-bg{ fill:var(--sea); } .mm-lane{ stroke:color-mix(in srgb,var(--cream) 65%, transparent); stroke-width:3; fill:none; stroke-linecap:round; } .mm-lane-main{ stroke:var(--cream); stroke-width:4.5; } .mm-lane-thin{ stroke-width:2; stroke-dasharray:2 5; } .mm-block{ fill:color-mix(in srgb,var(--gold) 80%, transparent); stroke:var(--cream); stroke-width:1; } .mm-halo{ fill:rgba(217,87,43,.25); } .mm-pin{ fill:var(--terra); stroke:var(--cream); stroke-width:2; } .mm-pin-dot{ fill:var(--cream); } .mm-label{ fill:var(--cream); font-family:var(--f-body); font-size:11px; font-weight:700; letter-spacing:.02em; } .mm-cta{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; gap:.4rem; font-family:var(--f-body); font-weight:700; font-size:.82rem; color:#fff; padding:.5rem .8rem; background:linear-gradient(0deg, rgba(20,38,46,.82), rgba(20,38,46,0)); } .contact{ font-style:normal; margin:0 0 1rem; } .contact p{ margin:.3rem 0; } .c-label{ display:inline-block; min-width:5.5em; color:var(--sea); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; } .reserve-note{ font-size:.9rem; background:color-mix(in srgb,var(--basil) 12%, transparent); border-left:4px solid var(--basil); padding:.7rem .9rem; border-radius:8px; } .reserve-note strong{ color:var(--basil); } .tavola-cta{ display:flex; gap:.7rem; margin-top:1.1rem; flex-wrap:wrap; } .btn-ghost{ display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--sea); color:var(--sea); background:transparent; font-weight:700; padding:.55rem 1.1rem; border-radius:999px; text-decoration:none; transition:background .2s,color .2s,transform .2s var(--spring); } .btn-ghost:hover{ background:var(--sea); color:#fff; transform:translateY(-2px); } /* ========================================================= CORTILE (footer) ========================================================= */ .cortile{ background:var(--lemon); border-top:1px solid color-mix(in srgb,var(--gold) 35%, transparent); padding:clamp(2.5rem,6vw,4rem) clamp(1.1rem,4vw,2.5rem) 7rem; margin-top:2rem; } .cortile-inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem; } .cortile-logo{ height:54px; width:auto; } .cortile-tag{ font-family:var(--f-title); color:var(--sea); margin:.5rem 0 0; } .cortile-col h4{ font-family:var(--f-body); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; color:var(--gold-deep); margin:0 0 .6rem; } .cortile-col p{ margin:.2rem 0; font-size:.95rem; } .cortile-sign{ max-width:var(--maxw); margin:2rem auto .3rem; font-family:var(--f-script); font-size:2.4rem; color:var(--terra); text-align:center; } .cortile-credit{ max-width:var(--maxw); margin:0 auto; text-align:center; font-size:.8rem; color:color-mix(in srgb,var(--ink) 60%, transparent); } /* ========================================================= BILANCIA NAV (fixed bottom-center) ========================================================= */ .bilancia{ position:fixed; left:50%; bottom:1rem; transform:translateX(-50%); z-index:130; display:flex; align-items:center; gap:.3rem; background:color-mix(in srgb,var(--cream) 94%, transparent); backdrop-filter:blur(10px); border:1px solid color-mix(in srgb,var(--gold) 50%, transparent); border-radius:999px; padding:.4rem .5rem; box-shadow:0 18px 40px -18px rgba(42,39,35,.5); } .bil-pan{ display:flex; flex-direction:column; align-items:center; gap:.05rem; border:none; background:transparent; cursor:pointer; font-family:var(--f-body); padding:.45rem .9rem; border-radius:999px; color:var(--ink); transition:background .25s ease, color .2s ease; } .bil-pan .bil-eyebrow{ font-weight:700; font-size:.92rem; line-height:1.1; } .bil-pan .bil-sub{ font-size:.7rem; color:color-mix(in srgb,var(--ink) 60%, transparent); } .bil-pan-left.is-active{ background:var(--terra); color:#fff; } .bil-pan-left.is-active .bil-sub{ color:rgba(255,255,255,.85); } .bil-pan-right.is-active{ background:var(--basil); color:#fff; } .bil-pan-right.is-active .bil-sub{ color:rgba(255,255,255,.85); } .bil-scale{ width:84px; height:auto; flex:0 0 auto; } .bil-post,.bil-base,.bil-beam,.bil-chain{ stroke:var(--gold); stroke-width:3.5; stroke-linecap:round; } .bil-pan-dot{ fill:var(--gold); } .bil-dot-l{ fill:var(--terra); } .bil-dot-r{ fill:var(--basil); } .bil-pivot{ fill:var(--sea); } .bil-beam-grp{ transform-origin:120px 30px; transform:rotate(-7deg); transition:transform .6s var(--spring); } body[data-mode="takeaway"] .bil-beam-grp{ transform:rotate(7deg); } /* the whole Bilancia re-settles when the mode flips */ .bilancia.settling{ animation:bil-settle .65s var(--spring); } @keyframes bil-settle{ 0%{ transform:translateX(-50%) translateY(0); } 35%{ transform:translateX(-50%) translateY(4px) scale(.985); } 70%{ transform:translateX(-50%) translateY(-2px) scale(1.005); } 100%{ transform:translateX(-50%) translateY(0) scale(1); } } /* easter egg: a clearly intentional hard tip toward the guest */ .bilancia.tricked .bil-beam-grp{ transform:rotate(-22deg) !important; transition:transform .5s var(--spring); } .bilancia.tricked{ box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 60%, transparent), 0 18px 40px -18px rgba(42,39,35,.5); } .bil-center{ display:flex; flex-direction:column; align-items:center; gap:.05rem; border:none; background:var(--gold); color:var(--ink); cursor:pointer; width:46px; height:46px; border-radius:50%; flex:0 0 auto; font-size:1.1rem; line-height:1; margin:0 .15rem; transition:transform .25s var(--spring), background .2s; } .bil-center:hover{ transform:rotate(8deg) scale(1.06); background:#f0ad4f; } .bil-center-label{ font-size:.5rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } /* page-tilt easter egg */ body.trick-tilt{ transition:transform .5s var(--spring); transform:rotate(.5deg); } .bil-chime{ position:fixed; inset:0; pointer-events:none; z-index:-1; } /* ========================================================= REVEAL ANIMATIONS ========================================================= */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform:none; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:900px){ .famiglia-grid{ grid-template-columns:1fr; } .storia-scene{ grid-template-columns:1fr; } .tavola-grid{ grid-template-columns:1fr; } .cortile-inner{ grid-template-columns:1fr 1fr; } .map-label{ display:none; } } @media (max-width:640px){ .sky-strip{ gap:.5rem; padding:.45rem .8rem; } .wappen img{ height:30px; } .sky-reserve{ font-size:.8rem; padding:.5rem .8rem; } .map-dots{ padding:.25rem .4rem; gap:.5rem; } /* keep the ~44px hit box on mobile; visible dot stays small */ .map-dot{ width:44px; height:44px; margin:-14px -7px; } .map-dot span{ width:9px; height:9px; } .cortile-inner{ grid-template-columns:1fr; gap:1.4rem; } .hero-photo{ border-radius:46% 46% 12px 12px / 38% 38% 12px 12px; border-width:3px; } .dish{ grid-template-columns:minmax(0,1fr) auto; gap:.5rem .6rem; padding:.7rem .1rem; } .dish.has-photo .dish-main{ grid-template-columns:56px minmax(0,1fr); gap:.6rem; } .dish-photo{ width:56px; height:56px; } .dish-name{ font-size:1.06rem; } /* keep the price legible and fully on-screen on narrow phones */ .dish-price{ font-size:.98rem; padding:.3rem .6rem; } .menu, .menu-group, .menu-rows{ max-width:100%; } /* bilancia → sticky toggle pill */ .bilancia{ left:.6rem; right:.6rem; bottom:.6rem; transform:none; justify-content:space-between; padding:.35rem .4rem; gap:.2rem; } .bil-scale{ display:none; } .bil-pan{ flex:1 1 0; padding:.55rem .4rem; } .bil-pan .bil-eyebrow{ font-size:.86rem; } .bil-center{ width:46px; height:46px; } /* mobile bilancia is full-width (no centering transform) — settle in place */ .bilancia.settling{ animation:bil-settle-m .65s var(--spring); } @keyframes bil-settle-m{ 0%{ transform:translateY(0); } 35%{ transform:translateY(4px) scale(.99); } 70%{ transform:translateY(-2px) scale(1.004); } 100%{ transform:translateY(0) scale(1); } } } @media (max-width:480px){ .display-caps{ font-size:clamp(1.6rem,7.4vw,2.2rem); letter-spacing:.02em; } } @media (max-width:380px){ .bil-pan .bil-sub{ display:none; } } /* ========================================================= REDUCED MOTION (also toggled via .noanim on ) ========================================================= */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .reveal{ opacity:1; transform:none; } .caustic{ animation:none; } } .noanim *,.noanim *::before,.noanim *::after{ animation:none !important; transition:none !important; } .noanim .reveal{ opacity:1 !important; transform:none !important; } .noanim .caustic{ display:none; }