/* ============================================================ Artline — Header + Footer globali (assets/css/artline-header-footer.css) Caricato su OGNI pagina del sito (WooCommerce incluso), non solo sulle 4 pagine vetrina. A differenza di assets/css/pages/*.css, qui le regole NON sono scoped sotto un body.sitiamo-page--: si applicano ovunque. Per questo il file è volutamente limitato ai soli componenti header/nav/ footer-contatti + le classi di supporto che quei componenti riusano (.wrap, .eyebrow, .glow-dark) — niente reset globali di pagina (quelli restano confinati alle 4 pagine vetrina, che hanno il proprio documento HTML completo). ============================================================ */ :root { --black: #080807; --ink: #16150f; --paper: #f4efe4; --paper-2: #ece5d6; --white: #faf7f0; --gold: #c69a4c; --gold-soft: #e2c079; --gold-deep: #a37e37; --grey: #8a857a; --grey-line: rgba(24, 22, 16, 0.14); --grey-line-dark: rgba(226, 192, 121, 0.16); --ff-display: "Jost", system-ui, -apple-system, sans-serif; --ff-ui: "Jost", system-ui, -apple-system, sans-serif; --pad: 22px; --maxw: 1280px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Reset locale, confinato ai soli componenti header/footer (mai un `*` globale: romperebbe lo stile delle pagine WooCommerce). Deliberatamente un semplice `.site-header *` (specificità 0,1,0), NON una versione con :not() multipli: ogni :not(.classe) aggiunge specificità come se fosse una classe in più, e con 4 :not() il reset (0,5,0) finiva per battere le nostre stesse regole successive (.site-nav__cta, ecc. — 0,1,0), azzerandone padding/margin invece di essere sovrascritto da loro. Qui il reset resta più "debole" delle regole dei componenti che seguono nel file (stessa logica delle pagine vetrina, dove il reset è scoped sotto body.sitiamo-page--X ma comunque meno specifico dei selettori dei singoli componenti). Il toggle-carrello di Sitiamo non ha bisogno di essere escluso: la nostra regola dedicata più sotto (.site-header__right .sitiamo-cart-toggle, 2 classi) è già più specifica di questo reset a prescindere dall'ordine. */ .site-header *, .contatti * { margin: 0; padding: 0; box-sizing: border-box; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } .eyebrow { font-family: var(--ff-ui); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-deep); display: inline-flex; align-items: center; gap: 0.7em; } .eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); display: inline-block; } .eyebrow--light { color: var(--gold-soft); } .eyebrow--light::before { background: var(--gold-soft); } /* Bagliore oro che segue il cursore (usato dal blocco Contatti) */ .glow-dark { position: relative; overflow: hidden; } .glow-dark > .wrap { position: relative; z-index: 1; } .gold-glow { position: absolute; top: 0; left: 0; width: 620px; height: 620px; border-radius: 50%; transform: translate(-50%, -50%); transform-origin: center; left: var(--gx, -1000px); top: var(--gy, -1000px); pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.5s var(--ease); background: radial-gradient(circle, rgba(200,160,70,0.16) 0%, rgba(184,147,78,0.09) 34%, rgba(184,147,78,0) 68%); } /* ============================================================ HEADER ============================================================ */ .site-header { /* !important su position/max-width/margin: difesa di sicurezza contro .site-header{position:relative;padding-block-*:1rem} e .site-header:not(.dynamic-header){max-width:1140px;margin-inline:auto} di Hello Elementor — stessa specificità (0,1,0)/(0,2,0) della nostra regola, quindi senza !important il risultato dipenderebbe dall'ordine di stampa nel (già forzato lato PHP via dipendenze di enqueue, ma preferiamo non fare affidamento solo su quello). */ position: fixed !important; top: 0; left: 0; right: 0; z-index: 100; max-width: none !important; margin: 0 !important; padding: 14px var(--pad); /* Niente sfumatura qui (a differenza delle pagine vetrina): questo file carica solo sul resto del sito (shop, prodotto, carrello, account...), dove non c'è un hero scuro dietro l'header su cui la dissolvenza abbia senso — sopra un contenuto chiaro si vedrebbe solo una fascia grigia sporca. Sempre lo stesso solido usato da .is-solid sulle vetrine. */ background: rgba(9,9,8,0.94); transition: padding 0.5s var(--ease); } .site-header.is-solid { padding-top: 10px; padding-bottom: 10px; box-shadow: 0 1px 0 rgba(184,147,78,0.22); } /* Sposta l'header sotto la admin bar di WordPress quando si è loggati */ body.admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } /* L'header è fixed/fuori dal flusso: sulle pagine vetrina va bene (l'hero a schermo intero è disegnato apposta per stargli dietro), ma sul resto del sito (shop, prodotto, carrello, account, blog...) il contenuto normale partirebbe nascosto sotto la barra. Spingiamo giù il contenuto ovunque TRANNE che sulle pagine vetrina. */ body:not(.sitiamo-page) { padding-top: 96px; } .site-header__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .site-header__right { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); } /* Icona carrello (shortcode [sitiamo_cart_toggle]) — reskin per l'header scuro */ /* !important: woo-base.css ha una regola sistemica pre-esistente (body.woocommerce-page a:not(...):not(...):not(...), specificità 0,4,2) che neutralizza il verde di default del kit Elementor su TUTTI i link delle pagine WooCommerce — scritta prima che esistesse l'header/footer Artline, quindi non li esclude e li forza a colore testo nero. */ .site-header__right .sitiamo-cart-toggle { padding: 6px; color: var(--white) !important; position: relative; z-index: 95; } .site-header__right .sitiamo-cart-toggle:hover { color: var(--gold-soft) !important; opacity: 1; } .site-header__right .sitiamo-cart-toggle__count { background-color: var(--gold); color: var(--black) !important; } .site-header__logo { display: block; line-height: 0; flex-shrink: 0; position: relative; z-index: 95; } .site-header__logo img { height: 54px; width: auto; transition: height 0.5s var(--ease); } .site-header.is-solid .site-header__logo img { height: 44px; } /* Hamburger mobile */ .site-nav__toggle { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 40px; height: 40px; padding: 0; margin: 0; border: none; background: transparent; cursor: pointer; position: relative; z-index: 95; } .site-nav__toggle-bar { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); } .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:first-child { transform: translateY(3.5px) rotate(45deg); } .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:last-child { transform: translateY(-3.5px) rotate(-45deg); } .site-nav__item-row { display: inline-flex; align-items: center; gap: 0.2em; } .site-nav__caret-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 4px; margin: 0; cursor: pointer; color: var(--white); line-height: 1; } .site-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); flex-wrap: nowrap; justify-content: flex-end; } .site-nav__link { display: none; font-family: var(--ff-ui); font-weight: 400; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--white) !important; position: relative; padding: 6px 0; } .site-nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold-soft); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); } .site-nav__link:hover { color: var(--gold-soft) !important; } .site-nav__link:hover::after { transform: scaleX(1); } .site-nav__cta { border-radius: 999px; font-family: var(--ff-ui); font-weight: 400; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--black) !important; background: var(--gold); padding: 0.8em 1.5em; white-space: nowrap; transition: background 0.45s var(--ease); } .site-nav__cta:hover { background: var(--gold-soft); color: var(--black) !important; } /* Sottomenu "Collezioni" */ .site-nav__item { display: none; position: relative; } .site-nav__caret { font-size: 0.6em; line-height: 1; transition: transform 0.35s var(--ease); } .site-nav__item:hover .site-nav__caret, .site-nav__item:focus-within .site-nav__caret, .site-nav__item.is-open .site-nav__caret { transform: rotate(-180deg); } .site-nav__submenu { position: absolute; top: 100%; left: 50%; min-width: 220px; margin: 0; padding: 10px; list-style: none; background: rgba(9,9,8,0.97); border: 1px solid rgba(226,192,121,0.18); border-radius: 14px; box-shadow: 0 20px 40px rgba(0,0,0,0.35); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 6px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s; z-index: 20; } .site-nav__item:hover .site-nav__submenu, .site-nav__item:focus-within .site-nav__submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .site-nav__submenu li + li { margin-top: 2px; } .site-nav__submenu a { display: block; padding: 10px 16px; font-family: var(--ff-ui); font-weight: 400; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--white) !important; border-radius: 8px; white-space: nowrap; transition: background 0.3s var(--ease), color 0.3s var(--ease); } .site-nav__submenu a:hover, .site-nav__submenu a:focus { background: rgba(226,192,121,0.14); color: var(--gold-soft) !important; } /* ============================================================ CONTATTI (footer) ============================================================ */ .contatti { background: var(--black); color: var(--white); padding: 92px 0 84px; } .contatti__lead { margin-bottom: 56px; display: flex; flex-direction: column; gap: 32px; } .contatti__logo { width: 190px; height: auto; align-self: flex-start; } .contatti__title { font-family: var(--ff-display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(2rem, 7vw, 2.5rem); line-height: 1; margin-top: 24px; } .contatti__title em { font-style: normal; font-weight: 500; color: var(--gold-soft); } .contatti__grid { display: grid; grid-template-columns: 1fr; gap: 34px; border-top: 1px solid var(--grey-line-dark); padding-top: 44px; } .contatti__block { display: flex; flex-direction: column; gap: 6px; } .contatti__label { font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 8px; } .contatti__value { font-family: var(--ff-display); font-weight: 500; font-size: 1.5rem; line-height: 1.3; color: var(--white) !important; text-decoration: none; } a.contatti__value:hover { color: var(--gold-soft) !important; } .contatti__value--static { color: rgba(250,247,240,0.85); font-weight: 400; } /* ============================================================ MINI FOOTER (dati legali + credito agenzia) ============================================================ */ .site-legal-footer { background: var(--black); border-top: 1px solid var(--grey-line-dark); padding: 26px 0; } .site-legal-footer__inner { display: flex; flex-direction: column; gap: 12px; } .site-legal-footer__legal { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; letter-spacing: 0.04em; color: rgba(250,247,240,0.5); } .site-legal-footer__credits { font-size: 0.78rem; letter-spacing: 0.04em; color: rgba(250,247,240,0.5); } .site-legal-footer__credits strong { font-weight: 600; color: rgba(250,247,240,0.75); } .site-legal-footer__credits a { color: var(--gold-soft); font-weight: 700; text-decoration: none; } .site-legal-footer__credits a:hover { color: var(--gold); } /* ============================================================ RESPONSIVE — mobile (< 768px) ============================================================ */ @media (max-width: 767px) { .contatti__title { font-size: 1.9rem; } .contatti__value { font-size: 1.3rem; word-break: break-word; } .contatti__logo { width: 160px; } /* Pannello di navigazione mobile a schermo intero */ .site-nav { position: fixed; inset: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; background: rgba(8,8,7,0.98); padding: 150px 24px 40px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-16px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s; overflow-y: auto; z-index: 90; } body.nav-open .site-nav { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .site-nav__item { display: block; width: 100%; border-bottom: 1px solid rgba(226,192,121,0.14); } .site-nav__item-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0; } .site-nav__link { display: block; width: 100%; font-size: 1.3rem; padding: 18px 4px; } .site-nav__item .site-nav__link { width: auto; flex: 1; border-bottom: none; } .site-nav__caret-btn { width: 44px; height: 44px; } .site-nav__cta { margin-top: 28px; align-self: flex-start; } .site-nav__submenu { position: static; opacity: 1; visibility: hidden; max-height: 0; overflow: hidden; transform: none; box-shadow: none; border: none; background: transparent; padding: 0; margin: 0; pointer-events: auto; transition: max-height 0.35s var(--ease); } .site-nav__item.is-open .site-nav__submenu { visibility: visible; max-height: 240px; padding: 4px 0 16px; } /* La regola desktop :hover/:focus-within ha specificità più alta del reset "position: static" qui sopra e sul mobile il bottone freccia resta a fuoco dopo il tap: senza questo reset il transform "translate(-50%, 0)" resta attivo e sposta il sottomenu fuori dal viewport (metà della sua larghezza verso sinistra). */ .site-nav__item:hover .site-nav__submenu, .site-nav__item:focus-within .site-nav__submenu, .site-nav__item.is-open .site-nav__submenu { transform: none; } .site-nav__submenu a { color: rgba(250,247,240,0.72); padding: 10px 4px; font-size: 0.9rem; } .site-nav__caret { font-size: 1rem; } } /* ============================================================ RESPONSIVE — 768px ============================================================ */ @media (min-width: 768px) { :root { --pad: 40px; } .site-nav__link { display: inline-block; } .site-nav__item { display: inline-flex; align-items: center; } .site-nav__toggle { display: none; } .site-header__right .sitiamo-cart-toggle { order: 2; } .contatti__lead { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; } .contatti__logo { align-self: center; width: 230px; flex-shrink: 0; } .contatti__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } .site-legal-footer__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; } .site-legal-footer__legal { flex-direction: row; flex-wrap: wrap; gap: 18px; } } /* ============================================================ RESPONSIVE — 1200px ============================================================ */ @media (min-width: 1200px) { :root { --pad: 64px; } .wrap { width: 75%; max-width: 1500px; padding-left: 0; padding-right: 0; } .site-header__logo img { height: 66px; } .site-header.is-solid .site-header__logo img { height: 54px; } .contatti { padding: 130px 0 100px; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .site-header *, .contatti * { animation: none !important; transition: none !important; } }