/* ========================================================================== Gwendalina Beauty — contatti.css Stili di pagina per /contatti/: hero editoriale, griglia contatti + mappa con consenso, form, CTA compatta. Token e componenti condivisi: global.css. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Hero: eyebrow + titolo a sinistra, lead a destra (≥ 992px) -------------------------------------------------------------------------- */ .contact-hero .section__header { margin-bottom: 0; } /* Tra 992 e 1200px il tetto 56ch di .section__header (global.css §16) è dichiarato dopo .section__header--split { max-width: none } e comprimerebbe la griglia: qui la riapriamo. */ @media (min-width: 992px) { .contact-hero .section__header--split { max-width: none; } } /* Target touch ≥ 44px: l'altezza extra è compensata nel margine superiore */ .contact-hero .section__header > .contact-hero__link { min-height: 44px; margin-top: calc(var(--space-4) - .65rem); } @media (hover: hover) { /* la freccia punta in basso: trasla verticalmente */ .contact-hero__link:hover svg { transform: translateY(4px); } } /* -------------------------------------------------------------------------- 2. Griglia contatti (dettagli 5 col · vuoto 1 col · mappa 6 col) -------------------------------------------------------------------------- */ .contact-grid { padding-top: 0; } .contact-grid__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--gutter); padding-top: var(--section-spacing-sm); border-top: 1px solid var(--color-line); } .contact-details { display: flex; flex-direction: column; gap: var(--space-4); } .contact-item { min-width: 0; } .contact-item .eyebrow { margin-bottom: .4rem; } /* Valore grande in serif (telefono, email, indirizzo…) */ .contact-item__value { display: block; font-family: var(--font-heading); font-size: var(--text-h3); font-weight: 400; letter-spacing: -0.01em; line-height: var(--leading-heading); color: var(--color-text); overflow-wrap: anywhere; } /* Link: target ≥ 44px senza alterare il ritmo verticale, sottolineatura animata */ a.contact-item__value { position: relative; display: inline-block; max-width: 100%; padding-block: .45em .35em; margin-block: -.35em -.25em; text-decoration: none; } a.contact-item__value::after { content: ""; position: absolute; inset-inline: 0; bottom: .18em; height: 1px; background-color: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform var(--dur) var(--ease-out); } a.contact-item__value:hover::after, a.contact-item__value:focus-visible::after { transform: scaleX(1); transform-origin: left center; } /* Indirizzo su due righe + link alla mappa */ address.contact-item__value { margin-bottom: var(--space-1); } .contact-item__link { display: inline-block; padding-block: .75rem; margin-block: -.35rem; font-size: var(--text-small); font-weight: 500; letter-spacing: .02em; } .contact-item__link::after { bottom: .55rem; } /* Orari */ .contact-hours { max-width: 26rem; font-size: 1rem; } /* CTA WhatsApp */ .contact-details > .actions { margin-top: var(--space-2); } .btn__icon { flex: none; width: 20px; height: 20px; stroke: currentColor; fill: none; } .contact-details__note { max-width: 40ch; } /* Tablet: i canali su due colonne, CTA e nota a tutta larghezza */ @media (min-width: 600px) and (max-width: 991.98px) { .contact-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); } .contact-details > .actions, .contact-details > .contact-details__note { grid-column: 1 / -1; } } @media (min-width: 992px) { .contact-grid__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; } .contact-details { grid-column: 1 / span 5; gap: var(--space-5); } .contact-grid__map { grid-column: 7 / -1; } } /* -------------------------------------------------------------------------- 3. Mappa con consenso + foto del salone -------------------------------------------------------------------------- */ .contact-grid__map { display: flex; flex-direction: column; gap: var(--gutter); } .map-embed { position: relative; } .map-embed .embed-gate { width: 100%; border-radius: var(--radius); } /* La mappa caricata si accorda ai toni della palette */ .map-embed .embed-gate__frame { filter: saturate(.55) sepia(.1); } /* Link "Apri in Google Maps" nel pannello (generato da consent.js): target touch ≥ 44px */ .map-embed .embed-gate__link { padding-block: .55rem; } .map-embed .embed-gate__link::after { bottom: .45rem; } /* Foto dell'ingresso: solo su desktop, bilancia la colonna dei contatti */ .contact-grid__photo { display: none; } @media (min-width: 992px) { .contact-grid__photo { display: block; } } /* -------------------------------------------------------------------------- 4. Form -------------------------------------------------------------------------- */ .contact-form-section .section__header { max-width: none; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); } .contact-form-section .lead { max-width: 46ch; } /* Asterisco dei campi obbligatori (decorativo, aria-hidden) */ .contact-form .field__label > span[aria-hidden="true"] { color: var(--color-error); } .contact-form .field--checkbox { margin-top: var(--space-2); } /* Link Privacy nella label: linea fissa via ::after, niente doppia sottolineatura */ .contact-form .field--checkbox .link-underline { text-decoration: none; } .contact-form .field--checkbox .link-underline::after { transform: scaleX(1); transform-origin: left center; } .contact-form .form__actions { justify-content: space-between; margin-top: var(--space-3); } .contact-form .form__note { max-width: 32ch; } /* Nota di fallback senza JavaScript (dentro