/* ============================================================ THE ITALIAN ADVENTURE — design foundation "Italian Golden Hour" · editorial museum · mobile-first ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Marcellus&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap'); :root { /* --- core palette: Tuscan gold + warm stone --- */ --gold-100: #f5ecd6; --gold-200: #ebdbad; --gold-300: #dac27f; --gold-400: #cca95a; --gold-500: #bf8e3b; --gold-600: #a3732e; --gold-700: #815525; --stone-50: #fafaf9; --stone-100: #f5f5f4; --stone-800: #292524; --stone-900: #1c1917; /* --- city tokens --- */ --milan-navy: #0f1e36; --milan-marble: #e0e4e8; --bologna-terracotta: #a23b26; --bologna-copper: #d36a45; --modena-balsamic: #4a2c17; --florence-gold: #c9a054; --florence-parchment: #f2efe9; --rome-burgundy: #5b111a; --rome-marble: #ece7e1; /* --- theme: light "parchment" --- */ --bg: #f4efe5; --bg-deep: #ece5d6; --surface: #fbf8f1; --ink: #211d18; --ink-soft: #5d564b; --ink-faint: #8a8174; --line: rgba(60, 45, 25, 0.16); --line-soft: rgba(60, 45, 25, 0.09); --panel: #1b150f; /* dark anchor panels */ --panel-ink: #ece4d2; --panel-ink-soft: #b2a78f; --shadow-luxury: 0 18px 44px -18px rgba(40, 28, 8, 0.18), 0 1px 3px rgba(40, 28, 8, 0.05); /* --- accent (overridden per city / tweak) --- */ --accent: var(--gold-500); --accent-deep: var(--gold-700); --accent-soft: rgba(191, 142, 59, 0.12); /* --- type --- */ --font-display: 'Cormorant Garamond', 'Times New Roman', serif; --font-body: 'Hanken Grotesk', 'Helvetica Neue', sans-serif; --font-quote: 'Cormorant Garamond', serif; --ease-lux: cubic-bezier(0.16, 1, 0.3, 1); --col: min(92vw, 41rem); --col-wide: min(94vw, 64rem); } /* --- dark "cathedral" theme --- */ html[data-theme="dark"] { --bg: #161210; --bg-deep: #100d0b; --surface: #1f1a16; --ink: #ece4d2; --ink-soft: #b8ad97; --ink-faint: #84796a; --line: rgba(236, 228, 210, 0.18); --line-soft: rgba(236, 228, 210, 0.09); --panel: #0e0b09; --panel-ink: #ece4d2; --panel-ink-soft: #a99e87; --shadow-luxury: 0 18px 44px -18px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4); --accent: var(--gold-400); --accent-deep: var(--gold-300); --accent-soft: rgba(204, 169, 90, 0.14); } /* --- city accent themes (set data-accent on ) --- */ html[data-accent="milan"] { --accent: #2a4a7a; --accent-deep: var(--milan-navy); --accent-soft: rgba(15, 30, 54, 0.08); } html[data-accent="bologna"] { --accent: var(--bologna-terracotta); --accent-deep: #74271a; --accent-soft: rgba(162, 59, 38, 0.10); } html[data-accent="modena"] { --accent: #6e4a22; --accent-deep: var(--modena-balsamic); --accent-soft: rgba(74, 44, 23, 0.10); } html[data-accent="florence"] { --accent: #b08434; --accent-deep: #8a6526; --accent-soft: rgba(201, 160, 84, 0.14); } html[data-accent="rome"] { --accent: #7a1f2b; --accent-deep: var(--rome-burgundy); --accent-soft: rgba(91, 17, 26, 0.09); } html[data-theme="dark"][data-accent="milan"] { --accent: #8eaad2; --accent-deep: #b9cce6; --accent-soft: rgba(142, 170, 210, 0.13); } html[data-theme="dark"][data-accent="bologna"] { --accent: #d36a45; --accent-deep: #e2906f; --accent-soft: rgba(211, 106, 69, 0.13); } html[data-theme="dark"][data-accent="modena"] { --accent: #c79a5d; --accent-deep: #dbb87f; --accent-soft: rgba(199, 154, 93, 0.13); } html[data-theme="dark"][data-accent="florence"] { --accent: #d4ab5f; --accent-deep: #e4c685; --accent-soft: rgba(212, 171, 95, 0.13); } html[data-theme="dark"][data-accent="rome"] { --accent: #c4626f; --accent-deep: #d98a94; --accent-soft: rgba(196, 98, 111, 0.13); } /* --- alternate type pairing (tweak) --- */ html[data-font="marcellus"] { --font-display: 'Marcellus', 'Times New Roman', serif; } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: inherit; } img { display: block; max-width: 100%; } ::selection { background: var(--gold-300); color: var(--stone-900); } /* ============================================================ TYPE UTILITIES ============================================================ */ .eyebrow { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); } .eyebrow--faint { color: var(--ink-faint); } .display { font-size: clamp(2.75rem, 12vw, 5.5rem); font-weight: 500; letter-spacing: 0.01em; } .title-1 { font-size: clamp(2.1rem, 8vw, 3.4rem); } .title-2 { font-size: clamp(1.6rem, 6vw, 2.3rem); } .title-3 { font-size: clamp(1.3rem, 5vw, 1.65rem); } .lede { font-size: clamp(1.125rem, 4.2vw, 1.3rem); line-height: 1.65; color: var(--ink-soft); font-weight: 300; } .quote { font-family: var(--font-quote); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 5.6vw, 1.9rem); line-height: 1.45; color: var(--ink); } .small-caps { font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--ink-soft); } .tabular { font-variant-numeric: tabular-nums; } /* ============================================================ ORNAMENTS ============================================================ */ .rule { display: flex; align-items: center; gap: 0.9rem; margin: 0; } .rule::before, .rule::after { content: ""; height: 1px; flex: 1; background: var(--line); } .rule__gem { width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); flex: none; } .rule--start::before { display: none; } .frame-gold { border: 1px solid var(--gold-600); outline: 1px solid var(--gold-600); outline-offset: 4px; } /* ============================================================ LAYOUT ============================================================ */ .col { width: var(--col); margin-inline: auto; } .col-wide { width: var(--col-wide); margin-inline: auto; } .section { padding-block: clamp(4rem, 12vw, 7.5rem); } .section--tight { padding-block: clamp(2.75rem, 8vw, 4.5rem); } .stack-2xs > * + * { margin-top: 0.5rem; } .stack-xs > * + * { margin-top: 1rem; } .stack-s > * + * { margin-top: 1.75rem; } .stack-m > * + * { margin-top: 2.75rem; } .stack-l > * + * { margin-top: 4.5rem; } /* ============================================================ TOP BAR + MENU (injected by site.js) ============================================================ */ .topbar { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 0.85rem clamp(1.1rem, 4vw, 2.2rem); transition: background 0.5s var(--ease-lux), box-shadow 0.5s, backdrop-filter 0.5s; } .topbar--solid { background: color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-soft); } .topbar__mark { font-family: var(--font-display); white-space: nowrap; font-size: clamp(0.82rem, 2.6vw, 1.05rem); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--ink); display: flex; align-items: baseline; gap: 0.55rem; } .topbar__mark b { font-weight: 600; color: var(--accent); font-size: 0.8em; } .topbar--overhero .topbar__mark, .topbar--overhero .menu-btn { color: #f2ead8; } .topbar--solid .topbar__mark, .topbar--solid .menu-btn { color: var(--ink); } .menu-btn { appearance: none; background: none; border: 0; cursor: pointer; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.2rem; min-height: 44px; } .menu-btn__glyph { display: inline-flex; flex-direction: column; gap: 5px; width: 26px; } .menu-btn__glyph i { height: 1px; background: currentColor; transition: transform 0.4s var(--ease-lux), width 0.4s var(--ease-lux); } .menu-btn__glyph i:last-child { width: 70%; align-self: flex-end; } .menu-btn:hover .menu-btn__glyph i:last-child { width: 100%; } /* narrow phones: keep the three topbar items inside the viewport */ @media (max-width: 480px) { .topbar { padding-inline: 0.9rem; } .topbar__mark { font-size: 0.72rem; letter-spacing: 0.1em; gap: 0.35rem; min-width: 0; } .menu-btn .menu-btn__label { display: none; } .menu-btn { gap: 0; padding-left: 0.5rem; } .oggi-btn { margin-right: 0.7rem; padding: 0.5rem 0.55rem; font-size: 0.6rem; letter-spacing: 0.14em; } .oggi-btn[data-sim]::after { content: ""; } } /* full menu overlay */ .menu { position: fixed; inset: 0; z-index: 70; background: var(--panel); color: var(--panel-ink); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity 0.55s var(--ease-lux), visibility 0.55s; } .menu.open { opacity: 1; visibility: visible; } .menu__inner { width: var(--col); margin-inline: auto; padding: 5.5rem 0 4rem; } .menu__close { position: absolute; top: 0.85rem; right: clamp(1.1rem, 4vw, 2.2rem); appearance: none; background: none; border: 0; cursor: pointer; color: var(--panel-ink); font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; padding: 0.6rem 0.2rem; min-height: 44px; } .menu__eyebrow { color: var(--gold-400); margin-bottom: 0.5rem; } .menu__list { list-style: none; margin: 0 0 2.6rem; padding: 0; } .menu__list a { display: flex; align-items: baseline; gap: 1rem; text-decoration: none; font-family: var(--font-display); font-size: clamp(1.6rem, 6.5vw, 2.2rem); padding: 0.45rem 0; color: var(--panel-ink); border-bottom: 1px solid rgba(236, 228, 210, 0.08); transition: color 0.3s, padding-left 0.4s var(--ease-lux); } .menu__list a:hover { color: var(--gold-300); padding-left: 0.6rem; } .menu__list a .n { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; color: var(--gold-500); min-width: 2.2rem; } .menu__list a.is-current { color: var(--gold-300); } .menu__list a .soon { margin-left: auto; font-family: var(--font-body); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--panel-ink-soft); border: 1px solid rgba(236, 228, 210, 0.22); padding: 0.25rem 0.55rem; } .menu__days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; list-style: none; margin: 0 0 2.6rem; padding: 0; } .menu__days a { display: block; text-decoration: none; text-align: center; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; color: var(--panel-ink); border: 1px solid rgba(236, 228, 210, 0.16); padding: 0.8rem 0.25rem; transition: border-color 0.3s, color 0.3s, background 0.3s; } .menu__days a:hover { border-color: var(--gold-500); color: var(--gold-300); } .menu__days a span { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; letter-spacing: 0; } /* ============================================================ REVEAL MOTION ============================================================ */ .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { html[data-motion="on"] .reveal { opacity: 0; transform: translateY(34px); transition: opacity 1.1s var(--ease-lux), transform 1.1s var(--ease-lux); transition-delay: var(--reveal-delay, 0s); } html[data-motion="on"] .reveal.is-in { opacity: 1; transform: none; } } /* ============================================================ SHARED COMPONENTS ============================================================ */ /* link styled as letterspaced caps with animated underline */ .cta { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent-deep); padding: 0.4rem 0; position: relative; min-height: 44px; } .cta::after { content: ""; position: absolute; left: 0; bottom: 0.2rem; height: 1px; width: 100%; background: var(--accent); transform-origin: left; transition: transform 0.45s var(--ease-lux); } .cta:hover::after { transform: scaleX(0.55); } .cta .arrow { font-family: var(--font-display); font-size: 1.1rem; line-height: 1; transition: transform 0.4s var(--ease-lux); } .cta:hover .arrow { transform: translateX(5px); } /* editorial card */ .card { background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--shadow-luxury); } /* dark anchor panel ("Una Nota Da Portare Dentro") */ .anchor-panel { background: var(--panel); color: var(--panel-ink); padding: clamp(2.5rem, 9vw, 4.5rem) clamp(1.4rem, 6vw, 3.5rem); position: relative; } .anchor-panel::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(204, 169, 90, 0.35); pointer-events: none; } .anchor-panel .eyebrow { color: var(--gold-400); } .anchor-panel .quote { color: var(--panel-ink); } .anchor-panel p { color: var(--panel-ink-soft); } /* stat register (luxury watch dials) */ .registers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .registers > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.5rem 1.1rem 1.35rem; } .registers .num { font-family: var(--font-display); font-size: clamp(2.3rem, 9vw, 3.2rem); line-height: 1; color: var(--accent-deep); font-variant-numeric: tabular-nums; } .registers .lbl { margin-top: 0.55rem; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); } @media (min-width: 720px) { .registers { grid-template-columns: repeat(3, 1fr); } } /* timeline */ .timeline { position: relative; padding-left: 1.1rem; } .timeline::before { content: ""; position: absolute; left: 0; top: 0.6rem; bottom: 0.5rem; width: 1px; background: linear-gradient(to bottom, var(--accent) 0%, var(--line) 30%, var(--line) 100%); } .tl-item { position: relative; padding: 0 0 2.4rem 1.5rem; } .tl-item:last-child { padding-bottom: 0.4rem; } .tl-item::before { content: ""; position: absolute; left: -1.1rem; top: 0.52rem; width: 9px; height: 9px; background: var(--bg); border: 1.5px solid var(--accent); transform: translateX(-4px) rotate(45deg); } .tl-item--major::before { background: var(--accent); } .tl-time { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; color: var(--accent-deep); font-variant-numeric: tabular-nums; } .tl-title { font-family: var(--font-display); font-size: clamp(1.35rem, 5vw, 1.6rem); font-weight: 500; margin-top: 0.3rem; } .tl-body { margin-top: 0.55rem; color: var(--ink-soft); font-size: 1rem; } .tl-meta { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.45rem; } .tl-meta span { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; color: var(--ink-soft); border: 1px solid var(--line); padding: 0.3rem 0.6rem; background: var(--surface); } /* table (dining) card */ .table-card { border: 1px solid var(--line); background: var(--surface); padding: 1.5rem 1.4rem; } .table-card + .table-card { margin-top: 1rem; } .table-card .name { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; } .table-card .addr { font-size: 0.8rem; letter-spacing: 0.08em; color: var(--ink-faint); margin-top: 0.25rem; } .table-card .order { margin-top: 0.85rem; font-size: 0.98rem; color: var(--ink-soft); } .table-card .order b { color: var(--ink); font-weight: 600; } /* footer */ .site-footer { background: var(--panel); color: var(--panel-ink-soft); margin-top: clamp(4rem, 12vw, 7rem); padding: clamp(3rem, 9vw, 5rem) 0 2.5rem; } .site-footer .quote { color: var(--panel-ink); font-size: clamp(1.25rem, 4.6vw, 1.6rem); } .site-footer .cred { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(236, 228, 210, 0.12); display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: space-between; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; } /* prev / next pager */ .pager { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pager a { text-decoration: none; padding: 1.4rem 1.1rem; display: block; transition: background 0.35s; } .pager a:hover { background: var(--accent-soft); } .pager a + a { border-left: 1px solid var(--line); text-align: right; } .pager .dir { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-faint); } .pager .where { font-family: var(--font-display); font-size: 1.2rem; margin-top: 0.3rem; color: var(--ink); } .pager a.disabled { pointer-events: none; opacity: 0.35; } /* ============================================================ ASK ITALY — concierge drawer ============================================================ */ .ask-fab { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 55; appearance: none; border: 1px solid var(--gold-600); cursor: pointer; background: var(--panel); color: var(--gold-300); font-family: var(--font-body); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; padding: 0 1.1rem; height: 48px; display: flex; align-items: center; gap: 0.6rem; box-shadow: var(--shadow-luxury); transition: transform 0.35s var(--ease-lux); } .ask-fab:hover { transform: translateY(-2px); } .ask-fab .gem { width: 7px; height: 7px; background: var(--gold-400); transform: rotate(45deg); } .ask-drawer { position: fixed; inset: auto 0 0 0; z-index: 80; background: var(--panel); color: var(--panel-ink); max-height: 86dvh; display: flex; flex-direction: column; transform: translateY(102%); transition: transform 0.55s var(--ease-lux); box-shadow: 0 -20px 60px rgba(0,0,0,0.35); } .ask-drawer.open { transform: translateY(0); } .ask-drawer::before { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px solid rgba(204, 169, 90, 0.3); } .ask-head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.5rem 0.9rem; } .ask-head h3 { font-size: 1.45rem; color: var(--panel-ink); } .ask-head .eyebrow { color: var(--gold-400); } .ask-close { appearance: none; background: none; border: 0; cursor: pointer; color: var(--panel-ink-soft); font-family: var(--font-body); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; min-height: 44px; padding: 0 0.3rem; } .ask-log { flex: 1; overflow-y: auto; padding: 0.4rem 1.5rem 1rem; display: flex; flex-direction: column; gap: 0.9rem; min-height: 10rem; } .ask-msg { max-width: 90%; font-size: 0.98rem; line-height: 1.6; } .ask-msg.user { align-self: flex-end; background: rgba(204, 169, 90, 0.14); border: 1px solid rgba(204, 169, 90, 0.3); padding: 0.7rem 1rem; color: var(--panel-ink); } .ask-msg.bot { align-self: flex-start; color: var(--panel-ink-soft); } .ask-msg.bot::before { content: "ITALIA · "; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.24em; color: var(--gold-500); } .ask-msg.bot.thinking { font-style: italic; opacity: 0.7; } .ask-chips { display: flex; gap: 0.5rem; padding: 0 1.5rem 0.8rem; overflow-x: auto; scrollbar-width: none; } .ask-chips::-webkit-scrollbar { display: none; } .ask-chips button { flex: none; appearance: none; cursor: pointer; background: none; border: 1px solid rgba(236, 228, 210, 0.22); color: var(--panel-ink-soft); font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.06em; padding: 0.5rem 0.85rem; transition: border-color 0.3s, color 0.3s; } .ask-chips button:hover { border-color: var(--gold-500); color: var(--gold-300); } .ask-form { display: flex; gap: 0.6rem; padding: 0.9rem 1.5rem calc(1.1rem + env(safe-area-inset-bottom)); border-top: 1px solid rgba(236, 228, 210, 0.12); } .ask-form input { flex: 1; min-width: 0; background: rgba(236, 228, 210, 0.06); border: 1px solid rgba(236, 228, 210, 0.2); color: var(--panel-ink); font-family: var(--font-body); font-size: 1rem; padding: 0.75rem 0.9rem; } .ask-form input:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; } .ask-form button { appearance: none; cursor: pointer; background: var(--gold-500); border: 0; color: #14100a; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 0 1.2rem; min-height: 44px; } .ask-form button:disabled { opacity: 0.5; cursor: default; } /* ============================================================ TWEAKS PANEL (vanilla) ============================================================ */ .tweaks { position: fixed; right: 1rem; top: 4.6rem; z-index: 90; width: min(86vw, 19rem); background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-luxury); display: none; font-family: var(--font-body); } .tweaks.open { display: block; } .tweaks__head { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1rem; border-bottom: 1px solid var(--line-soft); } .tweaks__head b { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; } .tweaks__head button { appearance: none; background: none; border: 0; cursor: pointer; color: var(--ink-faint); font-size: 1rem; padding: 0.2rem 0.4rem; } .tweaks__body { padding: 0.9rem 1rem 1.1rem; display: grid; gap: 0.95rem; max-height: 70dvh; overflow-y: auto; } .tweaks label.t-lbl { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.4rem; } .t-seg { display: flex; flex-wrap: wrap; gap: 0.3rem; } .t-seg button { appearance: none; cursor: pointer; background: none; border: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; padding: 0.42rem 0.7rem; transition: all 0.25s; } .t-seg button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); } .t-swatches { display: flex; gap: 0.45rem; flex-wrap: wrap; } .t-swatches button { appearance: none; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; outline: 1px solid var(--line); outline-offset: 2px; } .t-swatches button.on { outline: 2px solid var(--ink); } /* ============================================================ OGGI — trip clock UI ============================================================ */ .oggi-btn { text-decoration: none; font-family: var(--font-body); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: inherit; border: 1px solid currentColor; padding: 0.55rem 0.8rem; margin-left: auto; margin-right: 1.1rem; white-space: nowrap; opacity: 0.92; transition: opacity 0.3s; } .oggi-btn:hover { opacity: 1; } .oggi-btn b { color: var(--gold-400); font-weight: 700; } .topbar--solid .oggi-btn b { color: var(--accent-deep); } .oggi-btn[data-sim]::after { content: " ·sim"; opacity: 0.55; letter-spacing: 0.1em; text-transform: none; } .hero__oggi { display: inline-flex; align-items: baseline; gap: 0.8rem; margin-top: 2.6rem; text-decoration: none; border: 1px solid rgba(218, 194, 127, 0.5); padding: 0.9rem 1.3rem; color: #f2ead8; transition: border-color 0.35s, background 0.35s; } .hero__oggi:hover { border-color: var(--gold-300); background: rgba(218, 194, 127, 0.08); } .hero__oggi .ho-big { font-family: var(--font-display); font-size: 2.1rem; line-height: 1; color: var(--gold-300); font-variant-numeric: tabular-nums; } .hero__oggi .ho-lbl { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(242, 234, 216, 0.85); } .hero__oggi .ho-go { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-300); } .oggi-banner { margin-top: 1.6rem; display: inline-block; font-size: 0.78rem; letter-spacing: 0.08em; color: #f2ead8; border: 1px solid rgba(218, 194, 127, 0.5); background: rgba(10, 8, 6, 0.35); padding: 0.65rem 1rem; } .oggi-banner b { color: var(--gold-300); font-weight: 600; } .tl-flag { display: inline-block; margin-left: 0.7rem; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bg); background: var(--accent-deep); padding: 0.18rem 0.5rem; position: relative; top: -1px; } .tl-item--now::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .tl-item--next::before { background: var(--bg); } .tl-item--now > .tl-title, .tl-item--next > .tl-title { color: var(--accent-deep); } .oggi-chip { position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 54; appearance: none; cursor: pointer; text-decoration: none; white-space: nowrap; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--accent); font-family: var(--font-body); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 0 1rem; height: 48px; display: flex; align-items: center; gap: 0.4rem; box-shadow: var(--shadow-luxury); } .oggi-chip b { color: var(--accent-deep); font-variant-numeric: tabular-nums; } /* wallet (Il Portafoglio) */ .wallet-group + .wallet-group { margin-top: 2.4rem; } .wallet-group__head { display: flex; align-items: center; gap: 0.8rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-deep); } .wallet-group__head::after { content: ""; height: 1px; flex: 1; background: var(--line); } .wallet-card { border: 1px solid var(--line); background: var(--surface); padding: 1.25rem 1.2rem; margin-top: 0.8rem; } .wallet-card .wname { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); } .wallet-card .wsub { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.2rem; } .wallet-card .wmeta { margin-top: 0.4rem; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); } .wallet-card .wacts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; } .wallet-card .wacts > * { appearance: none; cursor: pointer; text-decoration: none; font-family: var(--font-body); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid var(--line); background: none; color: var(--ink-soft); padding: 0.55rem 0.8rem; min-height: 40px; display: inline-flex; align-items: center; gap: 0.45rem; transition: border-color 0.3s, color 0.3s; } .wallet-card .wacts > *:hover { border-color: var(--accent); color: var(--accent-deep); } .wallet-card .wacts .ref-code { font-variant-numeric: tabular-nums; letter-spacing: 0.12em; } .wallet-card .wacts .ref-code.copied { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); } /* focus visibility everywhere */ a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* image-slot defaults — height:auto lets author aspect-ratio win over the starter's 240×160 host default */ image-slot { background: var(--bg-deep); height: auto; }