/* ============================================================ Giardino Vivo — fondamenta condivise da tutte le pagine. Mobile first: gli stili di base sono per il telefono, i breakpoint (min-width) aggiungono il layout per schermi più grandi. 640px telefono grande / tablet verticale 900px menu orizzontale, layout a colonne Palette presa dalle immagini del rustico: imposte verdi, granito, nebbia sul lago, luce della sera. L'accento cambia con la stagione. ============================================================ */ :root { --font-display: "Petrona", Georgia, serif; --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; --t-small: 0.875rem; --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --t-lead: clamp(1.1rem, 1.02rem + 0.45vw, 1.35rem); --t-h3: clamp(1.3rem, 1.18rem + 0.6vw, 1.75rem); --t-h2: clamp(1.85rem, 1.5rem + 1.8vw, 3.2rem); --t-h1: clamp(2.5rem, 1.7rem + 4vw, 5.6rem); --t-statement: clamp(1.55rem, 1.2rem + 1.9vw, 3rem); --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: clamp(3rem, 2.4rem + 2.5vw, 4rem); --s-6: clamp(4rem, 3rem + 4vw, 6.5rem); --s-7: clamp(5rem, 3.5rem + 7vw, 10rem); --gutter: clamp(1.25rem, 4vw, 3rem); --max: 1320px; --header-h: 64px; --nebbia: #edefea; --carta: #f8f9f5; --inchiostro: #1b2a21; --granito: #565b53; --linea: rgba(27, 42, 33, 0.14); --imposta: #2f5d3e; --imposta-scura: #224530; --sera: #efc488; --bosco: #16241b; --focus: #1d5fae; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } @media (min-width: 900px) { :root { --header-h: 76px; } } /* Accento stagionale: lavanda, grano, foglia, ghiaccio */ :root, :root[data-season="primavera"] { --fiore: #7d6aaa; } :root[data-season="estate"] { --fiore: #a8741c; } :root[data-season="autunno"] { --fiore: #a9502a; } :root[data-season="inverno"] { --fiore: #52707c; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); } body { margin: 0; font-family: var(--font-body); font-size: var(--t-body); line-height: 1.6; color: var(--inchiostro); background: var(--nebbia); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: clip; } /* Menu aperto: la pagina sotto non scorre. Solo su : con overflow hidden anche sul body, il body diventerebbe il contenitore di scorrimento e l'header sticky uscirebbe dallo schermo. */ html.nav-open { overflow: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 var(--s-2); text-wrap: balance; overflow-wrap: break-word; } h1 { font-size: var(--t-h1); letter-spacing: -0.025em; } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); line-height: 1.2; } h4 { font-size: var(--t-body); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; } p { margin: 0 0 var(--s-2); max-width: 64ch; text-wrap: pretty; } a { color: var(--imposta); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } @media (hover: hover) { a:hover { color: var(--imposta-scura); text-decoration-color: var(--fiore); } } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } button { font: inherit; } .wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; } .wrap--text { width: min(100% - 2 * var(--gutter), 720px); margin-inline: auto; } .lead { font-size: var(--t-lead); color: var(--granito); line-height: 1.5; } .statement { font-family: var(--font-display); font-size: var(--t-statement); line-height: 1.22; letter-spacing: -0.01em; max-width: 28ch; margin: 0; } /* --- Pulsanti: su telefono uno sotto l'altro, poi in linea --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 50px; padding: 0.7em 1.5em; border-radius: 999px; border: 1.5px solid transparent; font-weight: 600; font-size: 1rem; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease); } .btn--primary { background: var(--imposta); color: #fff; } .btn--line { border-color: currentColor; color: var(--inchiostro); background: transparent; } .btn--light { background: var(--carta); color: var(--inchiostro); } .btn--line-light { border-color: rgba(255, 255, 255, 0.7); color: #fff; } @media (hover: hover) { .btn--primary:hover { background: var(--imposta-scura); color: #fff; } .btn--line:hover { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); } .btn--light:hover { background: #fff; color: var(--inchiostro); } .btn--line-light:hover { background: #fff; border-color: #fff; color: var(--inchiostro); } } .actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: var(--s-4); } @media (min-width: 640px) { .actions { flex-direction: row; flex-wrap: wrap; gap: var(--s-2); } } /* ============================================================ Intestazione e menu Lo sfondo sfocato sta su ::before e non sull'header: un backdrop-filter sull'header farebbe da contenitore al pannello fixed del menu, che non occuperebbe più tutto lo schermo. ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; color: var(--inchiostro); } .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--nebbia) 88%, transparent); border-bottom: 1px solid var(--linea); transition: opacity 300ms var(--ease); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .site-header::before { background: color-mix(in srgb, var(--nebbia) 78%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } /* In home l'header sta sopra al film finché il film è in scena */ .site-header--over { position: fixed; inset: 0 0 auto; } .site-header--over.is-over-film { color: #fff; } .site-header--over.is-over-film::before { opacity: 0; } .site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--header-h); } .brand, .nav-toggle { position: relative; z-index: 2; } .brand { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: inherit; text-decoration: none; letter-spacing: -0.01em; } .brand:hover { color: inherit; } .brand__mark { width: 26px; height: 26px; } .nav-toggle { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-right: -12px; padding: 0; background: none; border: 0; border-radius: 50%; color: inherit; cursor: pointer; } .nav-toggle svg { width: 26px; height: 26px; } .nav-toggle__close, .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; } /* Pannello a tutto schermo (telefono e tablet) */ .main-nav { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: calc(var(--header-h) + var(--s-2)) var(--gutter) max(var(--s-4), env(safe-area-inset-bottom)); background: var(--nebbia); color: var(--inchiostro); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transition: opacity 200ms var(--ease), visibility 0s linear 200ms; } .main-nav[data-open="true"] { visibility: visible; opacity: 1; transition: opacity 200ms var(--ease), visibility 0s; } /* Con il menu aperto logo e pulsante tornano scuri anche sopra il film */ html.nav-open .site-header { color: var(--inchiostro); } .main-nav__list { list-style: none; margin: 0; padding: 0; display: grid; } .main-nav__list a:not(.btn) { display: flex; align-items: center; min-height: 64px; border-bottom: 1px solid var(--linea); font-family: var(--font-display); font-size: 1.75rem; color: var(--inchiostro); text-decoration: none; } .main-nav__list a[aria-current="page"]:not(.btn) { color: var(--imposta); } .main-nav__list li:last-child { margin-top: var(--s-4); } .main-nav__cta { width: 100%; } .main-nav__contact { margin-top: auto; padding-top: var(--s-4); font-size: 0.95rem; color: var(--granito); } .main-nav__contact p { margin: 0; } .main-nav__contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--inchiostro); } @media (min-width: 900px) { .nav-toggle { display: none; } .main-nav { position: static; display: block; padding: 0; background: none; color: inherit; overflow: visible; visibility: visible; opacity: 1; transition: none; } .main-nav__list { display: flex; align-items: center; gap: var(--s-4); } .main-nav__list a:not(.btn) { display: inline; min-height: 0; border: 0; padding-block: 0.4em; font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: inherit; background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat; transition: background-size 220ms var(--ease); } .main-nav__list a:not(.btn):hover, .main-nav__list a[aria-current="page"]:not(.btn) { color: inherit; background-size: 100% 1.5px; } .main-nav__list li:last-child { margin-top: 0; } .main-nav__cta { width: auto; min-height: 44px; padding-block: 0.5em; } .main-nav__contact { display: none; } } /* ============================================================ Piè di pagina ============================================================ */ .site-footer { background: var(--bosco); color: rgba(255, 255, 255, 0.78); padding-block: var(--s-5) var(--s-4); font-size: 0.95rem; } .site-footer a { color: #fff; } .footer-grid { display: grid; gap: var(--s-4); } .footer-grid h4 { color: var(--sera); margin-bottom: var(--s-1); } .footer-grid ul { list-style: none; margin: 0; padding: 0; } /* Link del footer comodi da toccare */ .footer-grid li a { display: inline-flex; align-items: center; min-height: 44px; } .footer-grid li:not(:has(a)) { padding-block: 0.6rem; } .footer-bottom { display: grid; gap: var(--s-2); margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--t-small); color: rgba(255, 255, 255, 0.6); } .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, 0.8); } @media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } .footer-grid li a { min-height: 36px; } .footer-bottom { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); } .footer-bottom > span:nth-child(2) { text-align: center; } .footer-bottom a { min-height: 0; } } /* --- Utilità --- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--inchiostro); color: #fff; padding: 0.8em 1.2em; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }