/* components.css — componenti workshop_supplier. Core + CSS owned, niente dipendenze. Fornitore di attrezzature per officina e industria: header fisso indaco con wp:navigation, hero a TAGLIO DIAGONALE (pannello di marca che invade la foto), hub categorie fotografico, striscia servizi a icone, BLOCCHI-DATI sulle schede (il device che regge il catalogo tecnico), muro dei marchi e bande chiare per i blocchi densi. Contrasti WCAG AA verificati (ink/paper 17.3 · on_dark/brand 10.9 · ink_on_light/sage_tint 16.2 · accent_dark/brand 5.6 · accent_ink/sage_tint 5.1). VINCOLI: mai bianco su --accent (3.08), mai --accent su --brand (3.52), mai --accent su fondo chiaro (3.00). Vedi tokens.css. */ /* ---------- Eyebrow / label (Inter uppercase molto tracciato, registro tecnico) ---------- */ .eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-dark); display: inline-flex; gap: var(--space-3); align-items: center; } .eyebrow::before { content: ""; width: 1.8em; height: 2px; background: currentColor; } /* Sul chiaro l'arancione non regge come testo (3.00): si usa la variante scurita. */ .eyebrow--on-light { color: var(--accent-ink); } /* ---------- Buttons (pill, radius misurato sul template) ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: .78em 1.5em; border-radius: var(--radius-pill); font-weight: 600; font-size: var(--text-sm); text-decoration: none; border: 2px solid transparent; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn:hover { transform: translateY(-1px); } /* Il bottone arancione porta testo SCURO: bianco su arancione fa 3.08 e non passa. */ .btn--accent { background: var(--accent); color: var(--paper); } .btn--accent:hover { background: var(--accent-deep); color: var(--paper); } .btn--ghost { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.34); } .btn--ghost:hover { border-color: var(--ink); background: rgba(255,255,255,.07); } .btn--ghost.on-light { color: var(--accent-ink); border-color: var(--line-light); } .btn--ghost.on-light:hover { border-color: var(--accent-ink); background: rgba(0,0,0,.04); } /* Ponte core/button -> look ForgePress (editabile, round-trip valido; formalizzato in theme.json). */ .wp-block-button__link { border-radius: var(--radius-pill); padding: .78em 1.5em; font-weight: 600; font-size: var(--text-sm); border: 2px solid transparent; } .wp-block-button.is-accent .wp-block-button__link { background: var(--accent); color: var(--paper); } .wp-block-button.is-ghost .wp-block-button__link { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.34); } .wp-block-button.is-ghost.on-light .wp-block-button__link { color: var(--accent-ink); border-color: var(--line-light); background: transparent; } /* ---------- Header (fisso, indaco pieno, wordmark lockup, wp:navigation) ---------- */ /* display:contents dissolve il wrapper del template-part WP, altrimenti lo sticky si stacca subito. */ .wp-block-template-part { display: contents; } .site-header { position: sticky; top: 0; z-index: 50; background: var(--brand); border-bottom: 3px solid var(--accent); transition: box-shadow var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease); } /* Contrazione allo scroll (classe commutata da reveal.js su [data-shrink]): la barra si assottiglia e stacca dalla pagina con un'ombra. È un segnale di reattività, non una decorazione — e recupera verticale sulle pagine lunghe di catalogo. */ .site-header.is-scrolled { background: var(--brand-dark); box-shadow: 0 12px 34px rgba(0,0,0,.42); } .site-header__row { transition: padding-top var(--dur-slow) var(--ease), padding-bottom var(--dur-slow) var(--ease); } .site-header.is-scrolled .site-header__row { padding-block: var(--space-2); } .wordmark__mark { transition: height var(--dur-slow) var(--ease); } .site-header.is-scrolled .wordmark__mark { height: 34px; } /* Header centrato verticalmente: spazio sopra = sotto, nav sulla stessa linea del wordmark. ⚠ La riga dell'header NON è vincolata alla misura del contenuto (1220px): a quella larghezza le quattro zone (marchio · menu · telefono · CTA) saturavano la riga e `margin-left:auto` sulla nav non aveva più spazio da consumare, per cui il menu finiva incollato al nome del sito a 24px — contro i 48 fra menu e telefono. Misurato nel DOM. Con la riga larga il marchio resta solo a sinistra e le tre zone d'azione formano un gruppo a destra, con un vuoto vero in mezzo. Lo stacco MINIMO è il `gap` della riga, non `margin-left:auto`: l'auto dà spazio solo se ne avanza, il gap lo garantisce sempre. */ .site-header__row { display: flex; align-items: center; gap: clamp(1.5rem, 2.6vw, 3rem); max-width: 1560px; padding-block: var(--space-5); } .site-header__row > * { align-self: center; margin-block: 0; } /* Lockup: emblema (punta da trapano + "dal 1950", ritagliato dal marchio del cliente) + nome in tipografia. Il file logo originale è 9.5:1 e porta DUE marchi: a quel rapporto il nome sarebbe illeggibile. */ .wordmark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--on-dark); } .wordmark__mark { height: 46px; width: auto; flex: 0 0 auto; display: block; align-self: center; } .wordmark__txt { display: inline-flex; flex-direction: column; line-height: 1.02; align-self: center; } .wordmark__name { font-family: var(--font-display); font-weight: 600; font-size: 1.32rem; letter-spacing: .01em; color: var(--on-dark); white-space: nowrap; text-transform: uppercase; } .wordmark__kicker { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-dark); white-space: nowrap; } @media (max-width: 420px) { .wordmark__kicker { display: none; } } /* wp:navigation reso: