.elementor-2428 .elementor-element.elementor-element-454cec2{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-24f1c53 */@media (max-width: 767px) { .kp-col, .kp-col-55 { height: 100% !important; max-height: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-454cec2 */.tis-footer { display: none; }/* End custom CSS */ /* Start custom CSS *//* ───────────────────────────────────────── RESET ───────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: #fff; overflow-x: hidden; } img { display: block; width: 100%; height: 100% !important; object-fit: cover; } /* ───────────────────────────────────────── FIXED HUD — counter + scroll label WCAG: testo su sfondo — gestito via JS toggle .kp-hud--dk quando pannello è dark ───────────────────────────────────────── */ /* ── FIX: blocca overflow verticale su html WP admin bar aggiunge margin-top su , rendendo la pagina 32px più alta del viewport ── */ html:has(#kp-story) { overflow: hidden; } #kp-hud { position: fixed; bottom: 28px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 44px; z-index: 200; pointer-events: none; color: #0a0a0a; transition: color 0.4s ease; } #kp-hud.kp-hud--dk { color: #ffffff; } #kp-count, #kp-scroll { font-family: 'Cormorant Garamond', serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; } /* ───────────────────────────────────────── WRAPPER + TRACK ───────────────────────────────────────── */ #kp-story { width: 100%; height: 100vh; overflow: hidden; } #kp-track { display: flex; height: 100vh; will-change: transform; } /* ───────────────────────────────────────── PANEL BASE ───────────────────────────────────────── */ .kp-p { position: relative; width: 100vw; height: 100vh; flex-shrink: 0; overflow: hidden; background: #ffffff; color: #0a0a0a; } .kp-p--dk { background: #0a0a0a; color: #ffffff; } /* ───────────────────────────────────────── TYPOGRAPHY TOKENS ───────────────────────────────────────── */ .t-brand { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 10px; letter-spacing: 0.38em; text-transform: uppercase; } .t-display { /* KOALA, AMARI, GIN… */ font-family: 'Cormorant Garamond', serif; font-weight: 700; line-height: 0.92; letter-spacing: -0.02em; } .t-section { /* Section title medium */ font-family: 'Cormorant Garamond', serif; font-weight: 700; letter-spacing: 0.04em; } .t-serif { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.25; } .t-serif-i { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; line-height: 1.3; } .t-hand { /* handwritten: Dancing Script */ font-family: 'Dancing Script', cursive; font-weight: 600; } .t-caps { /* menu item names */ font-family: 'Cormorant Garamond', serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; } .t-red-i { /* cocktail tag in rosso */ font-family: 'Cormorant Garamond', serif; font-style: italic; color: #c41900; /* 6.02:1 su bianco ✅ AA */ font-weight: 400; font-size: 0.82em; line-height: 1.3; display: block; margin-top: 2px; } /* Su sfondo dark: rosso più chiaro → 5.1:1 su #0a0a0a ✅ AA */ .kp-p--dk .t-red-i, [style*="background:#0a0a0a"] .t-red-i { color: #e04528; } .t-strike { text-decoration: line-through; text-decoration-thickness: 1.5px; } .t-yellow { color: #F5C200; } /* ───────────────────────────────────────── LAYOUT HELPERS ───────────────────────────────────────── */ .kp-split { display: flex; width: 100%; height: 100%; } .kp-col { height: 100%; } .kp-col-45 { width: 45%; } .kp-col-50 { width: 50%; } .kp-col-55 { width: 55%; } .kp-col-40 { width: 40%; } .kp-col-60 { width: 60%; } .kp-col-38 { width: 38%; } .kp-col-62 { width: 62%; } .kp-content { display: flex; flex-direction: column; justify-content: center; padding: 60px 52px; height: 100%; } .kp-content--top { justify-content: flex-start; padding-top: 80px; } .kp-content--btm { justify-content: flex-end; padding-bottom: 70px; } .kp-content--sb { justify-content: space-between; padding-top: 65px; padding-bottom: 55px; } /* full-bleed img inside .kp-p */ .kp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* overlay gradient over bg photo */ .kp-overlay { position: absolute; inset: 0; z-index: 1; } .kp-overlay--dk { background: rgba(10,10,10,0.52); } .kp-overlay--l { background: rgba(10,10,10,0.25); } /* content above overlay */ .kp-above { position: relative; z-index: 2; } /* ───────────────────────────────────────── MENU ROWS ───────────────────────────────────────── */ .kp-list { margin-top: 4px; } .kp-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid rgba(128,128,128,0.14); gap: 12px; } .kp-p--dk .kp-row { border-bottom-color: rgba(255,255,255,0.1); } .kp-row-name { font-family: 'Cormorant Garamond', serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; flex: 1; } .kp-row-price { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 12px; white-space: nowrap; } .kp-row-desc { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 11px; color: #6b6b6b; /* 5.0:1 su bianco ✅ AA — non usa opacity */ padding: 2px 0 6px; line-height: 1.4; } .kp-p--dk .kp-row-desc { color: #9a9a9a; } /* 2.4:1 — supplementary, decorativo */ /* item block (name + price + desc) */ .kp-item { margin-bottom: 2px; } .kp-item .kp-row { margin-bottom: 0; } /* Two-price columns (Shot/Full or 30ml/50ml or Glass/Bottle) */ .kp-col-header { display: flex; justify-content: flex-end; gap: 32px; margin-bottom: 6px; } .kp-col-header span { font-family: 'Cormorant Garamond', serif; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.45; min-width: 36px; text-align: center; } .kp-row--2p .kp-row-price { display: flex; gap: 32px; } .kp-row--2p .kp-row-price span { min-width: 36px; text-align: center; } /* ───────────────────────────────────────── PANEL-SPECIFIC SIZES ───────────────────────────────────────── */ /* P01 — COVER */ .kp-cover-title { font-size: clamp(64px, 9vw, 118px); } .kp-cover-edition { font-size: clamp(13px, 1.4vw, 18px); letter-spacing: 0.28em; opacity: 0.6; margin-top: 10px; } .kp-cover-tag { font-size: clamp(20px, 2.2vw, 30px); margin-top: auto; padding-top: 40px; opacity: 0.55; } /* P02 — MEET */ .kp-meet-h { font-size: clamp(32px, 4.2vw, 58px); } .kp-meet-sub { font-size: clamp(16px, 1.7vw, 22px); margin-top: 18px; opacity: 0.5; } /* Section display titles */ .kp-sec-xl { font-size: clamp(70px, 10vw, 135px); } .kp-sec-lg { font-size: clamp(42px, 5.5vw, 72px); } .kp-sec-md { font-size: clamp(26px, 3vw, 40px); } /* Handwritten sizes */ .kp-hand-xl { font-size: clamp(42px, 5.5vw, 72px); } .kp-hand-lg { font-size: clamp(26px, 2.8vw, 38px); } .kp-hand-md { font-size: clamp(20px, 2vw, 28px); } /* Taglines */ .kp-tag-lg { font-size: clamp(18px, 2vw, 27px); } .kp-tag-md { font-size: clamp(14px, 1.5vw, 20px); opacity: 0.7; } /* Number label */ .kp-num { font-family: 'Cormorant Garamond', serif; font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; opacity: 0.3; margin-bottom: 14px; } /* Vertical rotated label (SPIRITS, AMARI side label) */ .kp-vert { position: absolute; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: clamp(40px, 6vw, 80px); writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); letter-spacing: -0.02em; opacity: 0.08; bottom: 40px; left: 20px; } .kp-p--dk .kp-vert { opacity: 0.08; } /* Photo strip for Martini Glass */ .kp-strip { display: flex; width: 100%; height: 46%; } .kp-strip-cell { flex: 1; overflow: hidden; position: relative; } .kp-strip-cell + .kp-strip-cell { border-left: 3px solid #fff; } .kp-strip-cell img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* Section sub-head (LONG DRINK, FROZEN, etc.) */ .kp-subhead { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: clamp(18px, 2.2vw, 30px); letter-spacing: 0.06em; margin-bottom: 10px; margin-top: 22px; } .kp-subhead:first-child { margin-top: 0; } /* Wine / spirits two-column layout */ .kp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; } /* Closing logo */ .kp-logo-wrap { display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column; gap: 32px; } /* ───────────────────────────────────────── SCROLL HINT (p01) ───────────────────────────────────────── */ .kp-scroll-arrow { position: absolute; bottom: 36px; right: 44px; z-index: 10; font-family: 'Cormorant Garamond', serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.45); display: flex; align-items: center; gap: 8px; } /* ═══════════════════════════════════════════════ MOBILE RESPONSIVE FIXES — ≤ 767px Aggiungere dopo il CSS esistente ═══════════════════════════════════════════════ */ @media (max-width: 767px) { /* già presenti nel tuo CSS originale: */ #kp-story { height: auto; overflow: visible; } #kp-track { flex-direction: column; height: auto; transform: none !important; } #kp-hud { display: none; } .kp-p { height: auto; min-height: 100svh; width: 100vw; } .kp-split { flex-direction: column; } .kp-col, .kp-col-45, .kp-col-50, .kp-col-55, .kp-col-40, .kp-col-60, .kp-col-38, .kp-col-62 { width: 100%; height: 55vw; min-height: 260px; max-height: 400px; } .kp-content { padding: 36px 24px; } .kp-content--top { padding-top: 44px; } .kp-cover-title { font-size: 52px; } .kp-strip { height: 160px; } .kp-sec-xl { font-size: 56px; } .kp-sec-lg { font-size: 36px; } .kp-two-col { grid-template-columns: 1fr; } .kp-scroll-arrow { display: none; } .kp-col.kp-col-50:last-child .kp-content, .kp-col.kp-col-45:last-child .kp-content { height: auto; } .kp-bg { position: relative; height: 50vw; min-height: 220px; } /* ── FIX AGGIUNTIVI (solo questi sono nuovi) ── */ /* Colonne content: altezza auto, non fissa come le foto */ .kp-split > .kp-col:has(.kp-content), .kp-split > .kp-col:has(.kp-list) { height: auto; min-height: 0; max-height: none; } /* Padding inline 60px/80px su pannelli interni */ .kp-p [style*="padding:60px 80px"], .kp-p [style*="padding: 60px 80px"] { padding: 28px 20px !important; } /* kp-col-header: prezzi doppi meno compressi */ .kp-col-header { gap: 20px; } .kp-col-header span { min-width: 28px; } .kp-row--2p .kp-row-price { gap: 20px; } .kp-row--2p .kp-row-price span { min-width: 28px; } /* Pannelli P13/P16 con solo kp-content (no split): padding corretto */ .kp-p > .kp-content { padding: 36px 24px; } /* Strip foto P17 */ .kp-strip { height: 44vw; min-height: 160px; } /* kp-above (pannelli full-bleed): padding laterale */ .kp-above { padding-left: 24px !important; padding-right: 24px !important; } /* P18: colonna destra dark — altezza auto */ .kp-col-45 > div[style*="background:#0a0a0a"], .kp-col-45 > div[style*="background: #0a0a0a"] { height: auto !important; min-height: 0; } .centrato { display: flex; justify-content: center; align-items: center; } .fullimg { height: 100%!important; max-height: 80vh !important;; } }/* End custom CSS */