/* ========================================================================== ORCA PRODUZIONI - tema v2.0 Ricostruzione 1:1 di orcaproduzioni.it (WordPress + Elementor Pro). Questo file e' ASSEMBLATO da frammenti scritti componente per componente sui valori RILEVATI dalla sorgente: CSS collegati, CSS inline (dove Elementor stampa i template di loop), CSS di tema e plugin, e i data-settings dei widget. La versione 1.x era stata scritta stimando i valori mancanti ed era sbagliata in 40 punti sul solo carosello. Due cose da NON "correggere" leggendo questo file: - il font AZO sta solo dove l'originale lo usa (titoli di sezione): nel carosello il titolo e' Helvetica 23px/600, non AZO; - il CSS scritto a mano dal cliente usa @media (max-width: 768px) mentre Elementor genera 767px. A 768px esatti si contraddicono, ed e' cosi' anche sul sito originale: non uniformare. ========================================================================== */ /* ========================================================================== DESIGN SYSTEM: FONT, VARIABILI, RESET, TIPOGRAFIA, BOTTONI ========================================================================== */ /* AZO (Azo Sans Uber): font del sito originale. Nel deploy statico gli url() relativi del CSS non vengono riscritti, quindi va inlinato qui. Convertito da TTF a woff2 (47KB -> 13KB), stessi contorni. */ @font-face { font-family: "AZO"; font-style: normal; font-weight: normal; font-display: swap; src: url(data:font/woff2;base64,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) format("woff2"); } /* ========================================================================== ORCA PRODUZIONI - base del design system Ogni valore qui dentro e' misurato sulla sorgente di orcaproduzioni.it: post-28.css (kit globale di Elementor), frontend.min.css, i tre CSS di hello-elementor, e-animation-grow-rotate.min.css, e-animation-bounce-in.min.css, piu' i post-*.css di pagina citati riga per riga nel rilievo. Dove la sorgente non dice niente, qui non c'e' niente: le lacune stanno scritte nel rapporto, non colmate a intuito. Breakpoint: sono due, e sono quelli veri di elementorFrontendConfig. tablet = max-width 1024px, mobile = max-width 767px. Nessun altro. ========================================================================== */ :root { /* ---- Colori -------------------------------------------------------- Il sito visibile e' bianco e nero: quasi ogni regola di pagina scrive #000000 / #FFFFFF a mano. I token del kit restano qui perche' sono i valori globali veri e alcuni affiorano (la fascia partner, il fondo chiaro di certe sezioni): servono a non doverli reinventare a valle. */ --or-nero: #000000; --or-bianco: #ffffff; /* Fondo pagina: .elementor-kit-28{background-color:var(--e-global-color-c696dce)}. */ --or-fondo-pagina: #ffffff; /* Fascia dei partner, home e about: post-60.css 8061ff6 / post-37.css 410bcbf7. */ --or-grigio-fascia: #555555; /* Token del kit (post-28.css). Non sono decorazione: sono i default che ogni widget non sovrascritto eredita. */ --or-kit-primary: #1c244b; --or-kit-secondary: #f3f5f8; --or-kit-text: #324a6d; --or-kit-accent: #467ff7; --or-kit-bianco: #ffffff; --or-kit-azzurro-chiaro: #c8d5dc; --or-kit-bianco-freddo: #f9fafd; --or-kit-trasparente: #02010100; --or-kit-nero-80: #000000cc; /* Alias storico: il fondo chiaro di alcune sezioni e' il "secondary" del kit. */ --or-hero-fondo: var(--or-kit-secondary); /* ---- Famiglie ------------------------------------------------------ Elementor scrive sempre la coda ", Sans-serif" (con la S maiuscola, che il browser tratta come il generico sans-serif): la riporto com'e' perche' e' la sorgente, non una scelta di stile. AZO va SOLO dove la sorgente lo dichiara: titoli di sezione e bottone "Learn More" della home. Il resto e' Helvetica, Poppins o Roboto. */ --or-font-display: "AZO", Sans-serif; --or-font-helvetica: "Helvetica", Sans-serif; --or-font-poppins: "Poppins", Sans-serif; --or-font-roboto: "Roboto", Sans-serif; /* Alias di comodo, con i valori veri dietro. */ --or-font-body: var(--or-font-helvetica); --or-font-eyebrow: var(--or-font-poppins); --or-font-menu: var(--or-font-roboto); /* ---- Scala tipografica, desktop ------------------------------------- I nomi dopo "kit-" sono gli id dei token di post-28.css: li tengo per poter risalire alla riga esatta della sorgente in caso di dubbio. */ --or-display-size: 65px; /* primary: titolo di sezione, AZO */ --or-display-lh: 1.2em; --or-eyebrow-size: 16px; /* 6558fb1: occhiello spaziato */ --or-body-size: 16px; /* corpo dei testi, Helvetica */ --or-body-lh: 1.3em; --or-btn-size: 23px; /* bottone "Learn More", AZO */ --or-kit-secondary-size: 36px; --or-kit-text-size: 16px; --or-kit-accent-size: 16px; --or-kit-h4-size: 22px; /* 392b9e0 */ --or-kit-lead-size: 22px; /* c05b693 */ --or-kit-link-italic-size: 16px; /* 92bce3b */ --or-kit-caption-italic-size: 16px; /* 397e168 */ --or-kit-xl-size: 85px; /* b2deeae */ --or-kit-xxl-size: 200px; /* fb1a3e0 */ --or-kit-helvetica-title-size: 42px; /* 4fe2d9d, letter-spacing -1.3px */ /* ---- Misure ricorrenti --------------------------------------------- Larghezza del contenuto: .e-con{--container-max-width:1140px} del kit, applicata come min(100%, larghezza) da frontend.min.css. I container del kit hanno padding di default 0 su tutti e quattro i lati (post-28.css): senza questa riga frontend.min.css metterebbe 10px. Spaziatura fra widget: 20px, ma dentro un .e-con vale 0 (vedi reset). */ --or-container: 1140px; --or-container-padding: 0px; --or-widget-spacing: 20px; /* Barra in cima: min-height 80px, post-79.css. La tengo qui perche' il video di apertura ci scorre sotto con margin-bottom -80px. */ --or-header-h: 80px; } @media (max-width: 1024px) { :root { --or-display-size: 45px; --or-eyebrow-size: 14px; --or-body-size: 14px; --or-btn-size: 14px; --or-kit-secondary-size: 25px; --or-kit-text-size: 14px; --or-kit-accent-size: 14px; --or-kit-lead-size: 14px; --or-kit-link-italic-size: 14px; --or-kit-caption-italic-size: 14px; --or-kit-xl-size: 65px; --or-kit-xxl-size: 145px; --or-kit-helvetica-title-size: 45px; --or-container: 1024px; } } @media (max-width: 767px) { :root { /* A 767px il kit cambia anche l'interlinea del titolo, non solo il corpo. L'occhiello e il testo NON hanno un secondo scalino: restano a 14px. */ --or-display-size: 28px; --or-display-lh: 1.1em; --or-kit-secondary-size: 20px; --or-kit-h4-size: 18px; --or-kit-xl-size: 48px; --or-kit-xxl-size: 100px; --or-kit-helvetica-title-size: 28px; --or-container: 767px; } } /* ========================================================================== RESET Non e' un reset moderno inventato: e' quello che il sito originale ha davvero sotto Elementor, cioe' hello-elementor/style.min.css piu' le poche regole di frontend.min.css che valgono su tutto il contenuto. Senza queste righe la geometria non torna (margini dei titoli, dei paragrafi, box-sizing, immagini fluide). ========================================================================== */ *, *::after, *::before { box-sizing: border-box; } html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { /* margin/padding: hello-elementor + :where(body){margin:0} e body{padding:0} del global-styles inline di WordPress. Il resto e' il default di hello-elementor: e' cio' che eredita qualunque testo non vestito da una regola di Elementor. Il colore #333 non e' un ripiego, e' il valore vero del sito: ogni testo che si vede dichiara il proprio colore, quindi #333 non affiora mai. */ margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #333333; background-color: var(--or-fondo-pagina); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin-block-start: 0.5rem; margin-block-end: 1rem; font-family: inherit; font-weight: 500; line-height: 1.2; color: inherit; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1rem; } p { margin-block-start: 0; margin-block-end: 0.9rem; } /* hello-elementor da ai link il rosa #c36. Sul sito vero non si vede mai: ogni link e' vestito da una regola di Elementor. Qui metto "inherit", ed e' importante che il selettore resti a livello di elemento (0,0,1): il tema precedente scriveva ".site a{color:inherit}" (0,1,1), che batteva ".or-btn{color:#fff}" (0,1,0) e rendeva il testo del bottone nero su fondo nero. E' la ragione della "pillola senza etichetta". */ a { background-color: transparent; text-decoration: none; color: inherit; box-shadow: none; } /* hello-elementor: img{border-style:none;height:auto;max-width:100%}; frontend.min.css aggiunge border-radius e box-shadow azzerati. */ img { border: none; border-radius: 0; box-shadow: none; height: auto; max-width: 100%; } /* Con il corpo a 400, "bolder" risolve a 700: e' il peso vero dei del testo introduttivo, che altrimenti verrebbero piu' leggeri. */ b, strong { font-weight: bolder; } dd, dl, dt, li, ol, ul { margin-block-start: 0; margin-block-end: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } figcaption { font-size: 16px; color: #333333; line-height: 1.4; font-style: italic; font-weight: 400; } /* ========================================================================== RADICE DEL SITO .site fa solo da fondo. Il tema precedente ci metteva anche famiglia, corpo e interlinea: da li' veniva l'1.3em applicato pure alle biografie del team, che nell'originale hanno 1.2em. La tipografia sta sulle classi, non sul contenitore. ========================================================================== */ .site { background-color: var(--or-fondo-pagina); } /* Larghezza del contenuto boxed: .e-con{--content-width:min(100%,var(--container-max-width))}. */ .or-container { width: 100%; max-width: min(100%, var(--or-container)); margin-inline: auto; } /* ========================================================================== TIPOGRAFIA CONDIVISA ========================================================================== */ /* Titolo di sezione. E' l'unico posto in cui l'originale usa AZO nei titoli (piu' il bottone della home). Margini e padding a zero come .elementor-heading-title, non come gli h1-h6 di hello. */ .or-display { margin: 0; padding: 0; font-family: var(--or-font-display); font-size: var(--or-display-size); font-weight: 600; font-style: normal; text-transform: none; text-decoration: none; line-height: var(--or-display-lh); letter-spacing: 0px; color: var(--or-nero); } /* Occhiello. Poppins, non AZO e non Helvetica: e' il token 6558fb1 del kit. Il letter-spacing di 10px e' quello vero, non un arrotondamento. */ .or-eyebrow { margin: 0; padding: 0; font-family: var(--or-font-eyebrow); font-size: var(--or-eyebrow-size); font-weight: 300; font-style: normal; text-transform: uppercase; text-decoration: none; line-height: 1.5em; letter-spacing: 10px; color: var(--or-nero); } /* Corpo del testo: Helvetica 400, interlinea 1.3em, nero pieno. */ .or-body { font-family: var(--or-font-body); font-size: var(--or-body-size); font-weight: 400; font-style: normal; text-transform: none; text-decoration: none; line-height: var(--or-body-lh); letter-spacing: 0px; color: var(--or-nero); /* Nell'originale i blocchi di testo non sono

: sono separati da

, cioe' da una riga vuota alta quanto l'interlinea. Il nostro markdown produce

, quindi lo stacco fra paragrafi vale 1.3em e non lo 0.9rem di hello. Dove invece l'originale ha

veri (le biografie del team), il blocco ridichiara --or-body-gap: 0.9rem. */ --or-body-gap: var(--or-body-lh); } .or-body p { margin: 0 0 var(--or-body-gap); } .or-body p:last-child { margin-bottom: 0; } .or-body b, .or-body strong { font-weight: 700; } /* ========================================================================== BOTTONE Tre varianti reali, non una sola. Cambiano font, raggio, padding e perfino l'animazione: tenerle distinte evita che AZO finisca su bottoni che nell'originale sono in Helvetica. ========================================================================== */ /* .or-btn = il bottone "Learn More" della home (post-60.css, 5b473ebf), l'unico bottone del sito in AZO, piu' i default di .elementor-button (frontend.min.css) che tutte e tre le varianti ereditano davvero. */ .or-btn { display: inline-block; text-align: center; text-decoration: none; line-height: 1em; background-color: var(--or-nero); color: var(--or-bianco); fill: var(--or-bianco); /* Attenzione: la transizione finale del sito NON e' "all .3s". e-animation-grow-rotate.min.css viene caricato dopo frontend.min.css, stessa specificita', e riscrive transition-property a "transform". Risultato: la scala e la rotazione sono animate, l'inversione bianco/nero e' istantanea. Se qui si scrivesse "all", il bottone sfumerebbe: sarebbe piu' carino e sbagliato. */ transition-duration: 0.3s; transition-property: transform; transition-timing-function: ease; font-family: var(--or-font-display); font-size: var(--or-btn-size); font-weight: 400; font-style: normal; text-transform: capitalize; letter-spacing: 0px; border-style: solid; border-width: 2px; border-color: var(--or-nero); border-radius: 100px; padding: 16px 30px; } .or-btn:hover, .or-btn:focus { background-color: var(--or-bianco); color: var(--or-nero); border-color: var(--or-nero); } .or-btn:hover svg, .or-btn:focus svg { fill: var(--or-nero); } /* Variante social "orcaproduzioni" con l'icona Instagram: pagina about (post-37.css, ac9c1e2) e pagine film (post-249.css, 4ba0dc55). Helvetica 20/600 con crenatura negativa, raggio 50px, e il padding e' quello di default perche' la sorgente non ne dichiara uno proprio. */ .or-btn--social { font-family: var(--or-font-helvetica); font-size: 20px; font-weight: 600; text-transform: none; letter-spacing: -0.5px; border-radius: 50px; padding: 12px 24px; } @media (max-width: 1024px) { .or-btn--social { font-size: 14px; } } /* Variante "Download the pitch deck" delle schede catalogo (post-1182.css e gemelli, 2ad76b4). Nessun bordo, raggio 35px, e in hover NON si inverte: rimbalza soltanto (vedi .or-anim-bounce). */ .or-btn--pitch { font-family: var(--or-font-helvetica); font-size: 24px; font-weight: 600; text-transform: capitalize; letter-spacing: 0px; border: none; border-radius: 35px; padding: 12px 24px; } .or-btn--pitch:hover, .or-btn--pitch:focus { background-color: var(--or-nero); color: var(--or-bianco); } @media (max-width: 1024px) { .or-btn--pitch { font-size: 14px; } } /* Contenuto interno del bottone quando c'e' un'icona: .elementor-button-content-wrapper{display:flex;flex-direction:row;gap:5px;justify-content:center}. L'icona misura 1em per lato, quindi cresce e cala col testo. */ .or-btn__content { display: flex; flex-direction: row; gap: 5px; justify-content: center; } .or-btn__icon svg { width: 1em; height: 1em; } .or-btn__text { display: inline-block; } /* ---- Animazioni di Elementor ------------------------------------------ Valori copiati dai due file di animazione, stati compresi: si attivano su hover, focus e active, non solo su hover. */ /* e-animation-grow-rotate.min.css */ .or-anim-grow:hover, .or-anim-grow:focus, .or-anim-grow:active { transform: scale(1.1) rotate(4deg); } /* Alias storico: i template esistenti scrivono or-btn--grow. */ .or-btn--grow:hover, .or-btn--grow:focus, .or-btn--grow:active { transform: scale(1.1) rotate(4deg); } /* e-animation-bounce-in.min.css: mezzo secondo a riposo, e una curva che sfonda sotto lo zero e sopra l'uno, cioe' il rimbalzo. */ .or-anim-bounce { transition-duration: 0.5s; } .or-anim-bounce:hover, .or-anim-bounce:focus, .or-anim-bounce:active { transform: scale(1.2); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } /* Chi non vuole movimento riceve lo stesso bottone, fermo: il contrasto bianco/nero regge l'affordance anche senza scala e rotazione. */ @media (prefers-reduced-motion: reduce) { .or-btn, .or-anim-bounce { transition: none; } .or-anim-grow:hover, .or-anim-grow:focus, .or-anim-grow:active, .or-btn--grow:hover, .or-btn--grow:focus, .or-btn--grow:active, .or-anim-bounce:hover, .or-anim-bounce:focus, .or-anim-bounce:active { transform: none; } } /* ========================================================================== BARRA IN CIMA, BLACKBAR, STRISCE SFOCATE ========================================================================== */ /* ========================================================================== ORCA PRODUZIONI - barra in cima, blackbar, strisce sfocate Rilievo di riferimento: rilievo/header.md. Ogni valore qui sotto e' copiato da li'. Dove il rilievo dice "NON TROVATO" non c'e' niente: le lacune restano lacune. Tre note che cambiano la struttura rispetto al primo tentativo, e che quindi vale la pena tenere sott'occhio leggendo il file: 1) La blackbar e' FIGLIA della barra, non una sorella. E' per questo che passando il mouse sulla striscia nera in basso la barra resta in hover e la striscia resta aperta: il puntatore non ha mai lasciato l'header. Le due strisce sfocate invece sono sorelle, fuori dall'header. 2) Il logotipo esteso e' fuori flusso (position:absolute, left:50%), non un elemento in colonna che scivola. Lo decide il CSS del FOOTER (post-567), caricato dopo quello dell'header e con selettore .logotitolo non scopato: vince lui. Da qui partenza a translateX(0) e ritorno in 0.5s, non quello che il cliente aveva scritto nell'header. 3) Nessun z-index negativo e nessun isolation:isolate. Il pointer delle voci di menu nell'originale e' un ::before con z-index:-1; qui e' z-index:0 con l'etichetta portata a z-index:1. Stesso risultato a schermo, ma senza il contesto di impilamento che nell'editor della console faceva finire l'evidenziatore sopra al contenuto (il famoso rettangolo verde pieno). Breakpoint: 1024/767 sono quelli veri di Elementor. 768 compare una volta sola ed e' scritto a mano dal cliente: a 768px esatti convive con le regole Elementor da 767. E' una contraddizione della sorgente, la riporto com'e' invece di uniformarla. ========================================================================== */ /* -------------------------------------------------------------------------- 1. La barra Trasparente a riposo, nera in hover. Il gradiente e' tutto trasparente (#00000000 -> #00000000): non si vede, ma resta perche' e' quello che Elementor disegna sopra al background-color, e senza di lui la transizione non sarebbe la stessa proprieta' animata. La transizione e' quella completa di .e-con, non un "background 0.5s" inventato: background prende --background-transition (0.5s), le altre tre restano ai loro default. -------------------------------------------------------------------------- */ .or-header { position: fixed; top: 0; left: 0; width: 100%; max-width: 100%; min-height: var(--or-header-h); display: flex; flex-direction: row; align-items: center; gap: 0px; /* Il margine negativo e' quello che fa passare il video di apertura sotto la barra invece che sotto un buco di 80px. */ margin: 0px 0px -80px 0px; padding: 0% 5%; z-index: 95; overflow: visible; border-radius: 0; background-color: transparent; background-image: linear-gradient(0deg, #00000000 0%, #00000000 100%); transition: background 0.5s ease, border 0.3s, box-shadow 0.3s, transform 0.4s; } .or-header:hover { background-color: var(--or-nero); } /* Aggiunta rispetto alla sorgente: chi naviga da tastiera non produce hover, e senza fondo nero le voci in focus finirebbero nere su nero. Stessi valori dell'hover, nessun valore nuovo. */ .or-header:focus-within { background-color: var(--or-nero); } /* -------------------------------------------------------------------------- 2. Il gruppo del marchio align-items non e' dichiarato nella sorgente: resta "normal" (stretch). Va lasciato cosi', perche' e' lo stretch che da al logotipo assoluto la sua posizione statica verticale. position:relative viene da .e-con ed e' il riferimento di left:50% del logotipo: senza, il logotipo si ancorerebbe alla barra intera. -------------------------------------------------------------------------- */ .or-header__brand { position: relative; width: 25%; display: flex; flex-direction: row; gap: 0px; padding: 0px; } @media (max-width: 1024px) and (min-width: 768px) { .or-header__brand { width: 15%; } } /* Sotto i 767px la sorgente porta il gruppo a flex-start su tutti e tre gli assi. Il risultato e' che il gruppo perde lo stretch, si riduce ai 53px del pittogramma e si incolla al bordo alto della barra da 80px: il marchio resta 13px piu' su del burger, che invece e' centrato dal `align-items:center` della barra. Sul desktop non si vede perche' li' lo stretch c'e'; su mobile e' il logo appoggiato al soffitto. Tengo l'allineamento orizzontale a sinistra (quello serve) e centro il gruppo in verticale, cosi' marchio e burger stanno sulla stessa linea. */ @media (max-width: 767px) { .or-header__brand { width: 50%; justify-content: flex-start; align-items: center; align-self: center; flex-wrap: nowrap; flex-grow: 0; flex-shrink: 0; /* Nella sorgente e' commentato "order start hack": porta il marchio davanti a tutto quando la barra va a capo. */ order: -99999; } } /* ---- Pittogramma -------------------------------------------------------- z-index 9999 funziona solo perche' il widget e' position:relative: su un elemento statico verrebbe ignorato. E' l'unico elemento della barra con una transizione sul filtro; il menu si inverte di scatto (vedi sotto). */ .or-header__logo { position: relative; z-index: 9999; text-align: left; transition: filter 0.5s ease; } .or-header:hover .or-header__logo, .or-header:focus-within .or-header__logo { filter: invert(1); } .or-header__logo a { display: inline-block; } .or-header__logo img { display: inline-block; vertical-align: middle; width: 53px; height: 53px; object-fit: contain; object-position: center center; } @media (max-width: 767px) { .or-header__logo { text-align: left; } /* L'altezza NON viene ridichiarata dalla sorgente: resta 53px anche con larghezza 50. Il contain fa il resto. */ .or-header__logo img { width: 50px; object-position: center left; } } /* ---- Logotipo esteso ----------------------------------------------------- Invisibile a riposo, compare solo in hover: e' il pezzo che si perde piu' facilmente. Fuori flusso, quindi non occupa spazio nel gruppo del marchio (che di fatto contiene il solo pittogramma). Le due durate sono asimmetriche e vengono da due file diversi: - andata (hover): opacity 1.5s ease, transform 1s ease (CSS dell'header) - ritorno (riposo): transform 0.5s ease, opacity 0.5s ease (CSS del footer) Il logotipo e' bianco su file e non viene invertito: si legge solo quando la barra e' nera, che e' esattamente quando compare. La larghezza dichiarata sull'immagine e' 125px, ma il contenitore e' 100px e img{max-width:100%} la taglia: a schermo sono 100px. Lascio i due valori distinti invece di "semplificare" a 100, perche' e' cosi' che si comporta la sorgente anche a 767px, dove l'immagine dichiara 170px e resta a 100. */ /* left NON e' il 50% della sorgente. Nell'originale il logotipo parte a meta' del gruppo del marchio e poi scivola a sinistra di una misura fissa (6em, 2em sotto i 768px): siccome il gruppo e' una percentuale della barra e la corsa e' in em, il punto d'arrivo si sposta con la larghezza della finestra. Misurato sul sito: a 390px il logotipo arriva a 14px dal pittogramma, a 767px a 93px (l'aria che si vede nello screenshot), a 900px e a 1280px ci finisce SOPRA, tanto che la O sparisce dietro il marchio e si legge "RCA". Qui il punto d'arrivo e' ancorato al pittogramma: larghezza del marchio piu' 12px, e la partenza e' quella piu' la corsa. La corsa, la direzione e i tempi restano quelli della sorgente, cambia solo dove si ferma: 12px dal marchio a ogni larghezza. */ .or-header__wordmark { position: absolute; left: calc(65px + 6em); margin-left: 0; width: 100px; z-index: 9998; text-align: left; opacity: 0; transform: translateX(0); transition: transform 0.5s ease, opacity 0.5s ease; } .or-header:hover .or-header__wordmark, .or-header:focus-within .or-header__wordmark { opacity: 1; transform: translateX(-6em); transition: opacity 1.5s ease, transform 1s ease; } .or-header__wordmark a { display: inline-block; } .or-header__wordmark img { display: inline-block; vertical-align: middle; width: 125px; height: 53px; object-fit: contain; object-position: center center; } /* 768, non 767: e' il breakpoint scritto a mano dal cliente, un pixel piu' largo di quello di Elementor. A 768px esatti questa regola e' gia' attiva mentre le regole a 767 no. Nella sorgente c'e' un !important, qui non serve: la regola viene dopo con la stessa specificita'. Il verso NON si inverte: si parte da 0 in entrambi i casi, la corsa e' solo piu' corta (-2em invece di -6em). */ @media (max-width: 768px) { .or-header:hover .or-header__wordmark, .or-header:focus-within .or-header__wordmark { transform: translateX(-2em); } /* Corsa piu' corta, quindi partenza piu' vicina: l'arrivo resta a 12px dal pittogramma, che a 768px e' ancora largo 53px. */ .or-header__wordmark { left: calc(65px + 2em); } } @media (max-width: 767px) { /* Sotto i 767 il pittogramma scende a 50px e il link porta 5px di margine suo: 57 + 5 = 62, cioe' di nuovo 12px dal marchio. */ .or-header__wordmark { left: calc(57px + 2em); } /* Nella sorgente il margine sta sul .elementor-widget-container, che qui non esiste: il link e' il primo figlio, quindi ce lo metto sopra. */ .or-header__wordmark a { margin: 0px 0px 0px 5px; } .or-header__wordmark img { width: 170px; } } /* -------------------------------------------------------------------------- 3. Il lato del menu 25% + 90% = 115%: non e' un errore di lettura, e' voluto. I due gruppi hanno flex 0 1 auto e si comprimono in proporzione. -------------------------------------------------------------------------- */ .or-header__navwrap { width: 90%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 2.2%; padding: 0px; } @media (max-width: 1024px) { .or-header__navwrap { gap: 6%; } } @media (max-width: 1024px) and (min-width: 768px) { .or-header__navwrap { width: 85%; } } @media (max-width: 767px) { .or-header__navwrap { width: 50%; } } /* ---- Il widget del menu ------------------------------------------------- L'inversione colpisce TUTTO il widget: voci, burger e tendina. Ed e' istantanea: la sorgente dichiara una transition solo sul pittogramma, mai qui. Metterci "filter 0.5s" sarebbe piu' morbido e sbagliato. */ .or-nav { position: relative; width: auto; display: flex; flex-direction: column; } .or-header:hover .or-nav, .or-header:focus-within .or-nav { filter: invert(1); } /* ---- La lista ------------------------------------------------------------ z-index 2 e il clearfix invisibile vengono dal CSS del widget: il primo tiene la lista sopra al pointer, il secondo e' un residuo storico che non si vede ma occupa una riga nel flusso. */ .or-nav__list { position: relative; z-index: 2; display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .or-nav__list::after { clear: both; content: " "; display: block; font: 0/0 serif; height: 0; overflow: hidden; visibility: hidden; } .or-nav__item { position: relative; border-width: 0; } .or-nav__link { position: relative; display: flex; align-items: center; font-family: var(--or-font-menu); font-weight: 300; font-style: normal; text-decoration: none; } /* L'etichetta e' un elemento a se' perche' deve stare SOPRA il pointer. Nell'originale il pointer sta sotto grazie a z-index:-1; qui il rapporto e' rovesciato (0 sotto, 1 sopra) per non creare contesti di impilamento con indici negativi, che nell'editor coprono il contenuto. */ .or-nav__label { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- 4. Menu orizzontale, da 1025px in su Sotto i 1025 il menu orizzontale sparisce e comanda il burger: e' la classe --dropdown-tablet del widget, non il breakpoint mobile. -------------------------------------------------------------------------- */ @media (min-width: 1025px) { .or-nav__item { display: flex; } .or-nav__link { flex-grow: 1; white-space: nowrap; padding: 4px 10px; font-size: 16px; line-height: 24px; letter-spacing: -0.45px; text-transform: capitalize; color: var(--or-nero); fill: var(--or-nero); /* Shorthand nudo: durata 0.4s su tutte le proprieta', easing ease. E' quello che scrive il widget, non un "color 0.3s" ridotto. */ transition: 0.4s; } /* 20px per lato, quindi 40px fra due voci e zero ai bordi. Tenere i due margini invece di un gap unico e' l'unico modo per avere lo stesso comportamento sull'ultima riga quando la lista va a capo. */ .or-nav__list > .or-nav__item:not(:first-child) > .or-nav__link { margin-inline-start: 20px; } .or-nav__list > .or-nav__item:not(:last-child) > .or-nav__link { margin-inline-end: 20px; } /* Pointer "background" con animazione sweep-right: un rettangolo nero ancorato al bordo sinistro che cresce verso destra (right: 100% -> 0) mentre sfuma da 0 a 1. Non e' uno scaleX: la larghezza cresce davvero, e la differenza si vede sui bordi. */ .or-nav__link::before { content: ""; display: block; position: absolute; top: 0; right: 100%; bottom: 0; left: 0; z-index: 0; background-color: var(--or-nero); opacity: 0; transition: 0.3s; } .or-nav__link:hover, .or-nav__link:focus { color: var(--or-bianco); } .or-nav__link:hover::before, .or-nav__link:focus::before { right: 0; opacity: 1; transform: scale(1); } /* La voce attiva resta nera anche in hover, e il suo pointer e' trasparente. Nella sorgente e' l'effetto di due regole con la stessa specificita' in cui vince l'ultima: qui basta l'ordine. aria-current copre sia "page" (pagina corrente) sia "location" (l'ancora ai progetti, marcata dall'osservatore). */ .or-nav__link[aria-current] { color: var(--or-nero); } .or-nav__link[aria-current]::before { background-color: #00000000; } } /* -------------------------------------------------------------------------- 5. Burger e tendina, fino a 1024px -------------------------------------------------------------------------- */ /* Il burger sta nel DOM a ogni larghezza, ma da 1025 in su e' il widget stesso a nasconderlo: si accende solo dove il menu orizzontale si spegne. Tenerlo qui a display:none, e accenderlo nella media query, evita che una regola successiva lo rimetta in piedi sul desktop. */ .or-nav__toggle { display: none; align-items: center; justify-content: center; margin-left: auto; padding: 0.25em; font-size: 22px; cursor: pointer; color: var(--or-nero); background-color: #ffffff00; border: 0 solid currentColor; border-radius: 0px; } /* In hover il burger non cambia: nella sorgente la regola di gruppo che lo sbiancherebbe perde contro una piu' specifica che lo tiene nero. */ .or-nav__toggle svg { width: 1em; height: auto; fill: var(--or-nero); } .or-nav__toggle .or-nav__icon--close { display: none; } .or-nav__toggle[aria-expanded="true"] .or-nav__icon--open { display: none; } .or-nav__toggle[aria-expanded="true"] .or-nav__icon--close { display: block; } @media (max-width: 1024px) { /* Bordo da 1px solo qui: sopra e sotto e' 0. Colore e stile non sono dichiarati, arrivano dai default (solid, currentColor = nero). */ .or-nav__toggle { display: flex; border-width: 1px; } /* La tendina apre con max-height + scaleY, non con display. La differenza conta: display non si anima e fa comparire il menu di scatto. top lo riscrive il JS con l'altezza reale del bottone, e la larghezza viene stirata a tutta la pagina (full_width: stretch). */ .or-nav__container { position: absolute; top: 100%; left: 0; width: 100%; z-index: 9997; margin-top: 22px; background-color: var(--or-bianco); font-size: 13px; overflow-x: hidden; overflow-y: auto; transform-origin: top; transition: max-height 0.3s, transform 0.3s; /* Stato chiuso. */ max-height: 0; overflow: hidden; transform: scaleY(0); } .or-nav[data-or-open="true"] .or-nav__container { /* --or-menu-height la scrive il JS: 1000vmax all'apertura, 0 alla chiusura. Il 100vh e' solo il valore di partenza del CSS. */ max-height: var(--or-menu-height, 100vh); transform: scaleY(1); overflow-y: auto; animation: or-hide-scroll 0.3s backwards; } .or-nav__list { flex-direction: column; flex-wrap: nowrap; } .or-nav__item { display: block; } /* Tipografia della tendina: diversa da quella del menu orizzontale. Maiuscolo e crenatura positiva, non "capitalize" con crenatura negativa. line-height 20px non e' una scelta: e' il default del widget, perche' il tema non ne dichiara una per la tendina. */ .or-nav__link { justify-content: center; padding: 10px 20px; font-size: 14px; line-height: 20px; letter-spacing: 1.53px; text-transform: uppercase; color: #33373d; } /* Nessuna transizione qui: la regola .4s del widget richiede l'antenato del menu principale, che la tendina non ha. Il cambio e' istantaneo. */ .or-nav__link:hover, .or-nav__link:focus, .or-nav__link[aria-current] { color: var(--or-bianco); background-color: var(--or-nero); } } /* Il bordo torna a zero sul telefono: e' un valore dichiarato apposta nella sorgente, non un'omissione. Il burger sta a 1px solo sul tablet. */ @media (max-width: 767px) { .or-nav__toggle { border-width: 0px; } } @keyframes or-hide-scroll { 0%, to { overflow: hidden; } } /* -------------------------------------------------------------------------- 6. La blackbar Figlia della barra: e' per questo che tenerci sopra il mouse non la chiude. Nessun z-index proprio (nella sorgente e' "revert"): vive dentro il contesto della barra, che sta a 95. Il gap da 20px non e' decorativo: con lo space-between si vede solo quando i due titoli si toccano, cioe' sulla pagina dal titolo lungo. -------------------------------------------------------------------------- */ .or-blackbar { position: fixed; bottom: 0; left: 0; width: 100%; min-height: var(--or-header-h); display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 20px 20px; padding: 0px; background-color: var(--or-nero); opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; } .or-header:hover .or-blackbar, .or-header:focus-within .or-blackbar { opacity: 1; visibility: visible; } /* Nella sorgente sono due widget, ciascuno col suo contenitore che porta i margini. Qui i due livelli sono fusi in uno: stessi valori, un nodo in meno. Il margine sinistro da 70px sulla destra e' voluto, non un refuso. */ .or-blackbar__page { margin: 10px 0px 0px 55px; } .or-blackbar__brand { margin: 10px 55px 0px 70px; text-align: right; } .or-blackbar__title { margin: 0; padding: 0; font-family: var(--or-font-helvetica); font-size: 20px; font-weight: 600; font-style: normal; text-transform: none; text-decoration: none; line-height: 1.2em; letter-spacing: 0px; color: var(--or-bianco); -webkit-text-stroke-color: var(--or-bianco); stroke: var(--or-bianco); } .or-blackbar__title--brand { font-weight: 400; } /* Da 1024 in giu' la striscia non esiste (elementor-hidden-tablet e -mobile). Le due regole di corpo qui sotto sono nella sorgente ma non si vedranno mai: le riporto perche' ci sono, non perche' servano. */ @media (max-width: 1024px) { .or-blackbar { display: none; } .or-blackbar__title { font-size: 45px; } } @media (max-width: 767px) { .or-blackbar__title { font-size: 28px; line-height: 1.1em; } } /* -------------------------------------------------------------------------- 7. Le due strisce sfocate Sorelle della barra, non figlie, e sotto di lei (94 contro 95). Sono vuote: servono solo a sfocare quello che ci passa dietro. La prima sfoca di 5px e resta piena fino a meta' altezza, la seconda di 2px fino a tre quarti. Essendo successive nel DOM con lo stesso z-index, la seconda dipinge sopra la prima. La maschera va dichiarata DUE volte: -webkit- (come nella sorgente) e senza prefisso. Prima c'erano solo le forme -webkit-, per fedelta' alla sorgente: ma dove l'alias -webkit-mask-image non esiste (Firefox, e i browser mobili che non sono WebKit ne' Blink) la maschera non si applica affatto e la sfocatura diventa un blocco netto alto 80px, col taglio orizzontale bene in vista. Riprodurre quel difetto non e' fedelta', e' solo un header rotto per una fetta di visitatori: la forma standard resta, e dove il -webkit- gia' funzionava non cambia niente. -------------------------------------------------------------------------- */ .or-blur { position: fixed; top: 0; left: 0; width: 100%; min-height: var(--or-header-h); display: flex; flex-direction: column; margin-left: auto; margin-right: auto; padding: 0px; z-index: 94; -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; mask-repeat: no-repeat; mask-size: cover; } .or-blur__inner { margin: 0 auto; max-width: 100%; width: 100%; padding-inline: 0; } @media (max-width: 767px) { .or-blur__inner { max-width: min(100%, 767px); } } .or-blur--strong { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100% ); mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100% ); } .or-blur--soft { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100% ); mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100% ); } /* -------------------------------------------------------------------------- 8. Chi non vuole movimento Gli stati restano tutti: la barra diventa nera, il logotipo compare, la blackbar sale, la tendina si apre. Solo, ci arrivano subito. Togliere gli stati invece delle transizioni renderebbe il sito meno usabile, non piu'. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .or-header, .or-header__logo, .or-header__wordmark, .or-header:hover .or-header__wordmark, .or-header:focus-within .or-header__wordmark, .or-nav__link, .or-nav__link::before, .or-nav__container, .or-blackbar { transition: none; } .or-nav[data-or-open="true"] .or-nav__container { animation: none; } } /* ========================================================================== PIEDE E FIRMA ANIMATA ========================================================================== */ /* ========================================================================== PIEDE Tre fasce sorelle nell'originale (`data-elementor-id=567`): la fascia scura con i marchi e i due elenchi, la striscia grigia della firma, e una terza fascia vuota alta 0px che qui non viene ricostruita perche' non produce nulla di visibile (rilievo, sez. 4). Ogni valore viene da `orca/css/fresh/post-567.css`: la parte generata da Elementor per i selettori `.elementor-567 .elementor-element-*`, e il blocco `/* Start custom CSS *\/` per la firma. Dove la geometria nasce da una meccanica di `frontend.min.css` (flex 0 1 auto dei container, min-width 0, gap del kit) la meccanica e' riportata come proprieta' vera, altrimenti le larghezze rese non tornerebbero. Verifica aritmetica dell'impianto, a 1440px: 32 (padding sopra) + 71,8 (riga dei marchi) + 20 (gap del kit) + 177 (blocco societa') + 48 (padding sotto) = 348,8px, cioe' l'altezza misurata della fascia. A 1000px: 32 + 60,1 + 20 + 993 + 48 = 1153,1px, di nuovo la misura. Le due somme chiudono solo con il gap a 20px e con il padding sopra l'indirizzo pari a 12px: vedi la nota su `.or-footer__address`. Il fondo NON e' nero: e' #1D1D1D, e la striscia della firma e' #444444. Il nero puro nel piede non compare mai. ========================================================================== */ /* Chiusura dei float del template builder: `.elementor-location-footer:before{content:"";display:table;clear:both}`. Nessun float nella nostra ricostruzione, ma e' una regola vera della sorgente e non costa nulla. Niente z-index e niente isolation: e' deliberato, un contesto di impilamento qui manderebbe l'evidenziatore dell'editor sopra al contenuto. */ .or-footer::before { content: ""; display: table; clear: both; } /* -------------------------------------------------------------------------- FASCIA 1 - contenitore esterno (`.elementor-element-5b83147`) In un container "boxed" di Elementor il padding orizzontale sta fuori (`.e-con`) e quello verticale sta dentro (`.e-con-inner`): non e' un vezzo, e' cio' che tiene il fondo scuro largo quanto la finestra mentre il contenuto resta centrato a 1140px. -------------------------------------------------------------------------- */ .or-footer__band { display: flex; /* `.e-con-boxed.e-flex` e' sempre colonna e nowrap: il flex vero sta nell'inner. Se qui mettessimo `row` le due colonne cambierebbero padre e la centratura salterebbe. */ flex-direction: column; flex-wrap: nowrap; align-content: normal; align-items: normal; justify-content: normal; /* `.e-con{position:relative;min-width:0;width:var(--width)}` */ position: relative; min-width: 0; width: 100%; padding-left: 10em; /* --padding-left:10em = 160px */ padding-right: 0em; background-color: #1d1d1d; } /* `.e-con>.e-con-inner`: larghezza piena fino a --content-width, centrato, e il padding verticale della fascia. `flex-grow:1` perche' l'inner e' l'unico figlio di un flex column: senza, la fascia della firma (che ha min-height) non centrerebbe il suo contenuto. */ .or-footer__band-inner { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: normal; align-items: normal; justify-content: normal; flex: 1 1 auto; height: 100%; /* `.e-con>.e-con-inner{height:100%}` */ gap: 20px 20px; /* --widgets-spacing del kit, mai sovrascritto qui */ width: 100%; max-width: min(100%, var(--or-container)); margin: 0 auto; padding-block: 2em 3em; /* 32px sopra, 48px sotto */ padding-inline: 0; } /* -------------------------------------------------------------------------- FASCIA 1 - colonna sinistra (`.elementor-element-3943b34`) 45% dichiarato e 100% dichiarato sulla colonna destra: sommati fanno 145%, e siccome i container sono `flex: 0 1 auto` con `min-width: 0` si riducono in proporzione dentro i 1140px meno i 20px di gap. E' da qui che escono i 347,59px e i 772,41px misurati, non da un 40/60 a occhio. -------------------------------------------------------------------------- */ .or-footer__left { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 0; position: relative; width: 100%; gap: 20px 20px; /* non dichiarato sul container: resta quello del kit */ padding: 0; } /* Il 45% vive solo da 768px in su: sotto quella soglia Elementor riporta `--width` a 100% e le due colonne si impilano. */ @media (min-width: 768px) { .or-footer__left { width: 45%; } } /* Riga dei due marchi (`.elementor-element-3f4e8af`): affiancati, non impilati, centrati sull'asse verticale e senza gap. */ .or-footer__marks { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: 0 1 auto; min-width: 0; position: relative; width: 100%; gap: 0px 0px; padding: 2em 0em 0em 0em; /* 32px sopra */ } /* I due widget immagine. `min-width:0` e `max-width:100%` sono le regole di frontend.min.css che permettono ai widget di scendere sotto la larghezza intrinseca dell'immagine: senza, i due marchi sfonderebbero la colonna invece di dividersela. */ .or-footer__mark { min-width: 0; max-width: 100%; } .or-footer__mark--pictogram { text-align: right; } .or-footer__mark--wordmark { text-align: left; } /* Il padding del pittogramma DEVE stare sul contenitore interno, non sul widget: e' un dettaglio che cambia i numeri. Con il padding sul widget (flex item) i 16px restano fuori dalla base flessibile e i due marchi si dividono lo spazio in parti uguali (181,8 e 165,79 misurati). Con il padding dentro, la base diventa 1096 contro 1080 e la riduzione proporzionale da' 175,07 e 172,52, che sono le misure vere del sito. */ .or-footer__mark--pictogram .or-footer__mark-box { padding: 0em 1em 0em 0em; } /* `.elementor-widget-image img{display:inline-block;vertical-align:middle}`. L'inline-block non e' decorativo: e' cio' che fa reagire l'immagine a `text-align` e che spiega perche' il widget del logotipo e' alto 24,09px mentre l'immagine dentro ne misura 20,6 (spazio del rigo). */ .or-footer__mark-img { display: inline-block; vertical-align: middle; /* Del reset (`img{height:auto;max-width:100%}`): ripetuto perche' senza, le due max-width qui sotto schiaccerebbero le proporzioni. */ height: auto; } /* Le percentuali si risolvono sul box di contenuto del widget: 25% di (175,07 - 16) = 39,77px, 75% di 172,52 = 129,38px. Sono le misure vere del sito, non due larghezze in pixel scelte a mano. */ .or-footer__mark--pictogram .or-footer__mark-img { max-width: 25%; } .or-footer__mark--wordmark .or-footer__mark-img { max-width: 75%; } /* Blocco societa' (`.elementor-element-62514e9`). Il rientro di 8em e' voluto: il testo parte 128px piu' a destra dei marchi. */ .or-footer__company { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 0; position: relative; width: 100%; gap: 0px 0px; padding: 0em 0em 3em 8em; } /* Ragione sociale (`.elementor-element-d540300`). Helvetica, NON AZO: il piede sfugge del tutto alla tipografia globale del kit, che qui metterebbe AZO 65px. Margine e padding a zero come `.elementor-heading-title`, non come gli h1-h6 del tema. */ .or-footer__company-name { margin: 0; padding: 0; text-align: left; font-family: var(--or-font-helvetica); font-size: 27px; font-weight: 600; text-transform: none; font-style: normal; text-decoration: none; line-height: 1em; letter-spacing: -1.3px; color: #ffffff; } /* Dati della societa' (`.elementor-element-f5e7480`): 12px peso 300, il testo piu' piccolo del sito. Il padding e' scritto in em sul widget che porta anche la font-size, esattamente come nell'originale, dove sta sul figlio che quella font-size la eredita. Il valore in pixel NON va congelato: e' proprio l'em che a 1024px fa esplodere il blocco (vedi il media query). Misurato sul sito vero: 12px a 1440, 14px a 500 (dove il testo e' 14px) e 45px a 1000. Il rilievo scrive "= sopra 16px a desktop": e' l'unico valore del documento che la sorgente smentisce, e non l'ho seguito. */ .or-footer__address { padding: 1em 0em 0em 0em; text-align: left; color: #c7c7c7; font-family: var(--or-font-helvetica); font-size: 12px; font-weight: 300; text-transform: none; font-style: normal; text-decoration: none; line-height: 1.5em; letter-spacing: 0px; } /* Un solo paragrafo con gli a capo dentro: `p{margin-bottom:0}`. */ .or-footer__address-text { margin-bottom: 0; } /* -------------------------------------------------------------------------- FASCIA 1 - colonna destra (`.elementor-element-4cacf36`) -------------------------------------------------------------------------- */ .or-footer__right { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 0; position: relative; width: 100%; gap: 0px 0px; padding: 2em 0em 0em 0em; } /* Riga delle due colonne di link (`.elementor-element-538b695`). Il gap e' scritto `00px 50px` nel sorgente: lo zero davanti e' un refuso dell'editor, ma e' CSS valido e viene riportato com'e' per non perdere la tracciabilita' del valore. */ .or-footer__linkrow { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; flex: 0 1 auto; min-width: 0; position: relative; width: 100%; gap: 00px 50px; margin: 0px; padding: 0px; } /* I due widget sitemap. Larghezza da contenuto (`flex: 0 1 auto`) con `min-width: 0`: e' la ragione per cui la colonna dei progetti puo' restringersi sotto la larghezza dei suoi titoli. */ .or-footer__sitemap { flex: 0 1 auto; min-width: 0; max-width: 100%; } /* `.projects-footer{overflow:hidden}` del CSS scritto a mano dal cliente: serve a nascondere lo sbordo di 12em qui sotto. */ .or-footer__sitemap--projects { overflow: hidden; } /* Il contenitore interno del widget esiste su entrambe le colonne, ma solo quella dei progetti porta il margine negativo: il box sborda di 192px a destra per dare respiro ai titoli lunghi, e l'overflow del widget impedisce la barra di scorrimento. A desktop e a 1024px non taglia niente; sotto i 768px taglia davvero, senza puntini, ed e' cosi' anche sull'originale. */ .or-footer__sitemap--projects .or-footer__sitemap-box { margin: 0em -12em 0em 0em; padding: 0em 0em 0em 0em; } /* `.elementor-sitemap-wrap` del widget sitemap di Elementor Pro. */ .or-footer__sitemap-wrap { display: flex; flex-flow: row wrap; } /* `flex-basis` scritto come frazione dal generatore: 1/1 per la prima colonna, 1/2 per quella dei progetti (che quindi occupa meta' del suo box da 487,52px, cioe' 243,76px). Le due regole hanno la stessa specificita' delle loro varianti nei media query, altrimenti la modifica per tablet non passerebbe. */ .or-footer__sitemap--site .or-footer__sitemap-section { flex-basis: calc(1 / 1 * 100%); } .or-footer__sitemap--projects .or-footer__sitemap-section { flex-basis: calc(1 / 2 * 100%); } /* Titolo di colonna: Helvetica 30px, di nuovo non AZO. I margini sono quelli degli h1-h6 del tema (0,5rem sopra, 1rem sotto), non quelli azzerati dei widget heading: qui il titolo e' un `

` vero dentro il widget sitemap, che non azzera niente. */ .or-footer__sitemap-title { margin-block: 0.5rem 1rem; font-family: var(--or-font-helvetica); font-size: 30px; font-weight: 600; text-transform: none; font-style: normal; text-decoration: none; line-height: 1em; letter-spacing: -1.3px; color: #ffffff; } /* Il pallino c'e'. `list-style-type: disc` e' dichiarato esplicitamente e il rientro di 40px e' il default del browser che nessuno azzera: le voci del piede sono un elenco puntato rientrato, non una lista pulita. Il tentativo precedente le aveva "ripulite", ed era una scelta di gusto applicata sopra una sorgente che dice il contrario. */ .or-footer__sitemap-list { margin-block: 0; margin-left: 0px; padding-inline-start: 40px; list-style-type: disc; } .or-footer__sitemap-item { margin: 0; } .or-footer__sitemap-item, .or-footer__sitemap-item a { color: #c7c7c7; font-family: var(--or-font-helvetica); font-size: 13px; font-weight: 300; text-transform: none; font-style: normal; text-decoration: none; line-height: 1.5em; letter-spacing: 0px; } /* I link del piede non reagiscono al mouse. Non e' un'assenza di regole: nella cascata originale `a:active,a:hover{color:#336}` del tema esiste e perde per specificita'. Qui la neutralizzazione e' esplicita, cosi' il comportamento resta quello anche se domani la base cambia. */ .or-footer__sitemap-item a:hover, .or-footer__sitemap-item a:active { color: #c7c7c7; text-decoration: none; } /* -------------------------------------------------------------------------- FASCIA 2 - la striscia della firma (`.elementor-element-eea4ded`) -------------------------------------------------------------------------- */ .or-footer__signband { display: flex; flex-direction: column; flex-wrap: nowrap; align-content: normal; align-items: normal; justify-content: normal; position: relative; min-width: 0; width: 100%; min-height: 40px; margin: 0px; padding: 0px; background-color: #444444; } /* L'inner e' largo 500px da 768px in su, e sotto torna alla larghezza del contenuto (cioe' tutta la finestra). `flex: 1 1 auto` piu' `justify-content: center` sono cio' che centra la firma nei 40px. */ .or-footer__signband-inner { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; height: 100%; gap: 20px 20px; width: 100%; max-width: min(100%, var(--or-container)); margin: 0 auto; padding-block: 0; /* --padding-top/bottom:0px di eea4ded */ padding-inline: 0; /* `.e-con>.e-con-inner{padding-inline:0}` */ } @media (min-width: 768px) { .or-footer__signband-inner { max-width: 500px; /* --content-width:500px */ } } /* `.footer-content`: nel sorgente la larghezza e' dichiarata due volte nello stesso blocco (500px e poi auto) e vince `auto`, quindi la striscia si prende i 500px dell'inner per via dell'align-self stretch del widget. E' importante: l'area sensibile al mouse e' TUTTA la striscia da 500px, non il segno da 20px. Chi passa il mouse a 200px di distanza attiva comunque l'animazione, ed e' la cosa che il primo tentativo aveva perso legando l'hover al solo link. */ .or-footer__sign { align-self: stretch; flex: 0 1 auto; display: flex; align-items: center; justify-content: center; position: relative; width: auto; } /* Nell'originale i tre `img` sono cliccabili uno per uno via JS, mentre la striscia intorno non lo e'. Qui l'ancora avvolge solo le tre immagini (le due scritte restano fuori flusso, quindi il link resta largo quanto il segno) e riproduce la stessa area di click, ma raggiungibile da tastiera: nell'originale la firma non lo era affatto. L'ancora deve restare `static`, altrimenti le due scritte assolute si posizionerebbero su di lei invece che sulla striscia. */ .or-footer__sign-link { display: flex; align-items: center; justify-content: center; } /* Il segno che gira. `z-index: 2` serve perche' a riposo le due scritte invisibili gli passano sopra (il logotipo parte a 723px mentre il segno occupa 710-730). Nell'originale bastava lo z-index sul flex item; qui l'immagine e' dentro l'ancora, quindi le serve anche `position: relative` per stare sopra ai due fratelli assoluti. Stesso risultato, z-index positivo, nessun contesto di impilamento inventato. */ .or-footer__sign-mark { position: relative; z-index: 2; width: 20px; height: auto; cursor: pointer; transition: transform 0.5s ease-in-out; } /* Le due scritte partono INVISIBILI: a riposo la firma mostra solo il segno da 20px. Restano cliccabili anche da invisibili, come nell'originale, perche' opacity 0 non toglie i click. */ .or-footer__sign-wordmark, .or-footer__sign-claim { position: absolute; width: 100px; opacity: 0; transform: translateX(0); transition: transform 0.5s ease, opacity 0.5s ease; } /* I 3px sono nel sorgente col commento "Sposta leggermente per centrare". */ .or-footer__sign-wordmark { left: 50%; margin-left: 3px; } .or-footer__sign-claim { right: 50%; margin-right: 3px; } /* Hover sulla striscia: giro completo del segno, le due scritte compaiono e si allontanano di 10px in direzioni opposte. */ .or-footer__sign:hover .or-footer__sign-mark, .or-footer__sign:focus-within .or-footer__sign-mark { transform: rotate(360deg); } .or-footer__sign:hover .or-footer__sign-wordmark, .or-footer__sign:focus-within .or-footer__sign-wordmark { opacity: 1; transform: translateX(10px); } .or-footer__sign:hover .or-footer__sign-claim, .or-footer__sign:focus-within .or-footer__sign-claim { opacity: 1; transform: translateX(-10px); } /* Il ritorno cambia SOLO la curva: `ease` andando, `ease-in-out` tornando, mezzo secondo in entrambi i versi. E' l'unico scopo del blocco "ANIMAZIONE INVERSA" del cliente, e sparisce se si scrive una sola transizione. */ .or-footer__sign:not(:hover):not(:focus-within) .or-footer__sign-wordmark, .or-footer__sign:not(:hover):not(:focus-within) .or-footer__sign-claim { transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; } /* Chi non vuole movimento vede comunque la firma completa al passaggio del mouse: cambia solo l'opacita', senza giro e senza scorrimenti. */ @media (prefers-reduced-motion: reduce) { .or-footer__sign-mark, .or-footer__sign-wordmark, .or-footer__sign-claim, .or-footer__sign:not(:hover):not(:focus-within) .or-footer__sign-wordmark, .or-footer__sign:not(:hover):not(:focus-within) .or-footer__sign-claim { transition: none; } .or-footer__sign:hover .or-footer__sign-mark, .or-footer__sign:focus-within .or-footer__sign-mark, .or-footer__sign:hover .or-footer__sign-wordmark, .or-footer__sign:focus-within .or-footer__sign-wordmark, .or-footer__sign:hover .or-footer__sign-claim, .or-footer__sign:focus-within .or-footer__sign-claim { transform: none; } } /* ========================================================================== TABLET - @media (max-width: 1024px) ATTENZIONE: il 45px sull'indirizzo non e' un errore di trascrizione. E' nel CSS compilato del sito: il cliente ha impostato per sbaglio il valore tablet del text-editor uguale a quello dei titoli. Effetto misurato a 1000px: il blocco societa' diventa alto 993px e la fascia passa da 348,8px a 1153,1px. E' riportato com'e' perche' questa e' una copia del sito, non una sua correzione: va segnalato al cliente, non aggiustato in silenzio. ========================================================================== */ @media (max-width: 1024px) { .or-footer__company-name { font-size: 45px; } .or-footer__address { font-size: 45px; } .or-footer__sitemap--site .or-footer__sitemap-section, .or-footer__sitemap--projects .or-footer__sitemap-section { flex-basis: calc(1 / 2 * 100%); } .or-footer__sitemap-title { font-size: 45px; } .or-footer__sitemap-item, .or-footer__sitemap-item a { font-size: 14px; } } /* ========================================================================== MOBILE - @media (max-width: 767px) 767 e non 768: e' il breakpoint vero di Elementor, che genera tutte le regole responsive del piede. Nel CSS scritto a mano dal cliente per l'header compare invece 768px, e a 768px esatti i due si contraddicono: nel piede il caso non si presenta perche' qui non c'e' CSS a mano con media query. A questa soglia Elementor riporta `--width` a 100% su tutti i container flex e attiva `--flex-wrap-mobile: wrap`: e' cosi' che le colonne si impilano, senza nessun `flex-direction: column` scritto a mano. ========================================================================== */ @media (max-width: 767px) { .or-footer__band { padding-left: 0em; padding-right: 0em; } .or-footer__band-inner { flex-wrap: wrap; padding-block: 3em 1em; /* 48px sopra, 16px sotto */ } .or-footer__left, .or-footer__marks, .or-footer__company, .or-footer__right, .or-footer__linkrow { flex-wrap: wrap; } /* I marchi si centrano e cambiano scala: 16% e 43%, cioe' 77,4px e 215px su una finestra da 500px. */ .or-footer__mark--pictogram, .or-footer__mark--wordmark { text-align: center; } .or-footer__mark--pictogram .or-footer__mark-img { max-width: 16%; } .or-footer__mark--wordmark .or-footer__mark-img { max-width: 43%; } .or-footer__company { padding: 2em 2em 0em 2em; } .or-footer__company-name { font-size: 28px; line-height: 1.1em; } .or-footer__address { font-size: 14px; line-height: 1.1em; } .or-footer__right { padding: 2em 2em 4em 2em; } /* La riga dei link resta `row`: sono i due widget a diventare `flex: 1 0 auto` con la sezione a larghezza piena, quindi vanno a capo per wrap. Scrivere `column` qui sembrerebbe uguale ma cambia come si comportano quando i titoli sono corti. */ .or-footer__linkrow { flex-direction: row; justify-content: flex-start; flex: 1 0 auto; } .or-footer__sitemap { flex: 1 0 auto; } .or-footer__sitemap--site .or-footer__sitemap-section, .or-footer__sitemap--projects .or-footer__sitemap-section { flex-basis: calc(1 / 1 * 100%); } .or-footer__sitemap-title { font-size: 28px; line-height: 1.1em; } /* Anche la striscia della firma dichiara --flex-wrap-mobile:wrap, quindi sotto i 768px il suo inner passa a wrap come quello della fascia grande. Con un figlio solo e la direzione a colonna non si vede niente, ma la meccanica e' quella. */ .or-footer__signband-inner { flex-wrap: wrap; } } /* ========================================================================== TITOLO DI SEZIONE E CAROSELLO DELLE LOCANDINE ========================================================================== */ /* ========================================================================== CAROSELLO DELLE LOCANDINE + TITOLO DI SEZIONE Frammento del solo componente "carosello". Colori, font e larghezza del contenuto arrivano da 00-base.css: qui non si ridefinisce nulla di quello. Ogni valore viene da rilievo/carosello.md. Le due sorgenti principali sono il