/* Theme Name: TeamWorking Child Theme URI: https://www.teamworking.it Description: Tema figlio di GeneratePress per teamworking.it. Base clonabile per teambuilding-gulf.com e teambuildingincentive.ae. Author: TeamWorking Version: 5.11.0 Template: generatepress Text Domain: teamworking-child */ /* ------------------------------------------------------------------ Colori, tipografia e spaziature stanno nel Customizer di GeneratePress, non qui: così restano esportabili e riapplicabili sui due siti Gulf con un solo file di impostazioni. Qui sta solo ciò che il Customizer non copre. ------------------------------------------------------------------ */ :root { /* Misura di lettura, condivisa da testo e titoli. In rem, non in ch: `ch` si calcola sulla dimensione del carattere dell'elemento, quindi lo stesso valore darebbe ~760px su un paragrafo a 17px e ~1400px su un h2 a 32px — titoli e testo finirebbero su due larghezze diverse e disallineate. 47.5rem = 760px con root a 16px, e scala con le preferenze di dimensione del testo del browser. */ --tw-misura: 47.5rem; } /* ------------------------------------------------------------------ 1. SISTEMA DELLE LARGHEZZE — due soli livelli Prima il vincolo stava sui singoli elementi: paragrafi e titoli a 760px centrati, mentre griglie e immagini restavano a 1120px. Due larghezze centrate sullo stesso asse hanno bordi sinistri diversi, ed è per questo che i titoli sembravano rientrati e l'hero pareva avere padding enorme attorno al testo. Ora il vincolo sta sul CONTENITORE: il gruppo decide la sua larghezza e tutto ciò che contiene la riempie. Due livelli soli: colonna di lettura (760px) e piena larghezza (1120px). ------------------------------------------------------------------ */ :root { --tw-misura: 47.5rem; } /* Un solo bordo sinistro per tutta la pagina. Prima c'erano due larghezze entrambe centrate: 1160px per hero e griglie, 760px per i testi. Centrate sullo stesso asse, hanno bordi sinistri diversi (200px di scarto), e le sezioni sembravano rientrare una sì e una no. Ora tutti i blocchi occupano il contenitore e partono dallo stesso punto. A essere limitata è solo la lunghezza della riga di testo, che si ferma a 760px invece di stendersi per 1160. */ .entry-content > .wp-block-group, .entry-content > .wp-block-columns, .entry-content > .wp-block-image, .entry-content > h2, .entry-content > h3 { max-width: none; margin-left: 0; margin-right: 0; } /* Titoli: pieni, allineati al bordo del contenitore. */ .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { max-width: none; margin-left: 0; margin-right: 0; } /* Testo corrente: riga limitata alla misura di lettura e CENTRATA nel contenitore, margini uguali a sinistra e a destra. Vale per ogni paragrafo di prosa del sito, non blocco per blocco. */ .entry-content > .wp-block-group p, .entry-content > .wp-block-group ul, .entry-content > .wp-block-group ol, .entry-content > .wp-block-group blockquote, .entry-content > p { max-width: var(--tw-misura); margin-left: auto; margin-right: auto; } /* I gruppi di sola prosa si centrano come blocco intero, così il titolo resta allineato al testo che introduce invece di staccarsi. Regola isolata di proposito: :has() non è supportato ovunque, e in una lista con virgole un selettore non valido farebbe cadere anche le regole accanto — errore già commesso una volta. */ .entry-content > .wp-block-group:not(.tw-hero):not(.tw-nota):not(.tw-sezione-larga):not(:has(.wp-block-columns)) { max-width: var(--tw-misura); margin-left: auto; margin-right: auto; } /* Dentro un gruppo già centrato il testo riempie: niente doppio vincolo. */ .entry-content > .wp-block-group:not(.tw-hero):not(.tw-nota):not(.tw-sezione-larga):not(:has(.wp-block-columns)) p, .entry-content > .wp-block-group:not(.tw-hero):not(.tw-nota):not(.tw-sezione-larga):not(:has(.wp-block-columns)) ul, .entry-content > .wp-block-group:not(.tw-hero):not(.tw-nota):not(.tw-sezione-larga):not(:has(.wp-block-columns)) ol { max-width: none; } /* Dentro colonne e card comanda la colonna. */ .entry-content .wp-block-column p, .entry-content .wp-block-column ul, .entry-content .wp-block-column ol { max-width: none; } /* ------------------------------------------------------------------ 2. RESPIRO VERTICALE FRA LE SEZIONI ------------------------------------------------------------------ */ /* Preset di spaziatura. I blocchi annidati richiamano var(--wp--preset--spacing--NN) inline. Ridefinendoli qui valgono su tutte le pagine, anche dentro i gruppi che non sono figli diretti di .entry-content. */ .entry-content { --wp--preset--spacing--40: 0.6rem; --wp--preset--spacing--50: 0.85rem; --wp--preset--spacing--60: 0.85rem; --wp--preset--spacing--70: 1.05rem; --wp--preset--spacing--80: 1.9rem; --wp--style--block-gap: 0.7rem; } /* Ritmo verticale: una regola sola per tutta la pagina. Il problema non era una sezione ma l'accumulo: ogni gruppo aveva padding sopra E sotto, quindi fra due sezioni i due padding si sommavano, e ad ognuno si aggiungevano i margini di heading e paragrafi. Sezione dopo sezione la pagina si allungava. Qui azzero il padding verticale dei gruppi senza sfondo e impongo un unico passo fra i blocchi di primo livello. I gruppi con sfondo (hero, box) tengono il loro padding interno, che lì serve. */ .entry-content > .wp-block-group:not([class*="background-color"]) { padding-top: 0 !important; padding-bottom: 0 !important; } .entry-content > * + * { margin-top: 1.05rem; } .entry-content > .wp-block-columns + .wp-block-columns { margin-top: 0.7rem; } /* Gruppi con sfondo: padding interno contenuto. */ .entry-content > .wp-block-group[class*="background-color"] { padding: 1.2rem 1.3rem !important; } /* Hero: solo H1 e sottotitolo, nessuna riga di navigazione sopra. */ .entry-content > .wp-block-group.tw-hero { padding: 0 !important; background: none; } /* Gerarchia netta fra titolo e sottotitolo. L'H1 resta il peso della pagina; il sottotitolo scende a circa metà e passa dal serif dei titoli al sans del testo, così si legge come supporto e non come un secondo titolo. */ .tw-hero h1 { margin-bottom: 0.35rem; } .tw-hero h2 { font-family: Inter, sans-serif !important; font-size: 1.25rem !important; font-weight: 400 !important; line-height: 1.45 !important; letter-spacing: 0 !important; color: var(--contrast-2) !important; max-width: var(--tw-misura); margin-bottom: 0; } @media (max-width: 768px) { .tw-hero h2 { font-size: 1.1rem !important; } } /* Il contenitore interno dei gruppi ha un padding proprio (48px 20px) che non dipende dal gruppo esterno: sposta il testo di 20px verso destra rispetto alle immagini e aggiunge 48px di vuoto in fondo. Lo azzero: il padding lo decide il gruppo, non il suo interno. */ .entry-content .wp-block-group__inner-container { padding: 0 !important; } /* Titoli e paragrafi: margini più stretti, il respiro lo dà il passo fra le sezioni, non lo spazio attorno a ogni riga. */ .entry-content h2 { margin-top: 0; margin-bottom: 0.45rem; } /* Un h2 che apre una sezione al primo livello ha bisogno di stacco sopra: senza, si incolla al paragrafo che chiude la sezione prima. */ .entry-content > h2 { margin-top: 2rem; } .entry-content h3 { margin-top: 0.8rem; margin-bottom: 0.3rem; } .entry-content h4 { margin-top: 0.9rem; margin-bottom: 0.25rem; } .entry-content h1 { margin-bottom: 0.4rem; } .entry-content p { margin-bottom: 0.8rem; } .entry-content p:last-child { margin-bottom: 0; } .entry-content ul, .entry-content ol { margin-top: 0.35rem; margin-bottom: 0.8rem; } .entry-content li { margin-bottom: 0.25rem; } /* ------------------------------------------------------------------ 3. SEGNAPOSTO DI LAVORAZIONE Rende visibile a colpo d'occhio cosa manca ancora: immagini da caricare, pattern da inserire. Da rimuovere prima del go-live. ------------------------------------------------------------------ */ .tw-segnaposto { max-width: none !important; background: repeating-linear-gradient( 45deg, var(--sfondo-alt), var(--sfondo-alt) 10px, #EDEFF3 10px, #EDEFF3 20px ); border: 1px dashed var(--contrast-3); border-radius: 4px; padding: 1.25rem 1rem; text-align: center; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--contrast-2); } /* ------------------------------------------------------------------ 4. CARD DEI FORMAT Altezza uniforme nella riga e titolo che non si spezza male. ------------------------------------------------------------------ */ .entry-content .wp-block-columns .wp-block-column.has-background { border-radius: 6px; } .entry-content .wp-block-column.has-background h3 { margin-top: 0.25rem; } /* ------------------------------------------------------------------ 5. MOBILE Sotto i 768px la misura di lettura non serve: comanda il viewport. ------------------------------------------------------------------ */ @media (max-width: 768px) { .entry-content p, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content ul, .entry-content ol { max-width: none; } } /* ------------------------------------------------------------------ 6. HERO DI SEZIONE Fascia distinta in cima alla pagina. Resta dentro il contenitore: niente full-bleed, così il bordo sinistro continua ad allinearsi con il logo e con il testo sotto. ------------------------------------------------------------------ */ /* Fascia immagine dell'hero. Il segnaposto tiene 220px di altezza così la pagina non si riassesta quando arriva la foto; la foto vera riempie la fascia mantenendo le proporzioni del ritaglio. */ p.tw-hero-img { min-height: 170px; display: flex; align-items: center; justify-content: center; margin-top: 1.75rem; } figure.tw-hero-img { margin-top: 0.9rem !important; margin-bottom: 0; max-width: none; } /* 16:9 è lo standard degli hero, imposto dal CSS e non dal file. Qualunque immagine venga caricata in futuro viene resa in 16:9 senza doverla ritagliare a mano: object-fit la adatta, e il fuoco leggermente alto tiene i volti invece dei piedi. Chi carica un file già a 16:9 non subisce nessun ritaglio. */ figure.tw-hero-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 35%; display: block; border-radius: 6px; } /* ------------------------------------------------------------------ 7. FASCIA VISIVA "COME SI VIVE" Ospita da 2 a 4 elementi affiancati: video, foto, gallerie, embed. Le colonne si adattano da sole, quindi aggiungerne una in futuro non richiede di rifare la sezione. ------------------------------------------------------------------ */ .tw-fascia-visiva { max-width: none; gap: 1.9rem; } /* La colonna di testo deve reggere il confronto visivo col video: corpo più grande e interlinea più stretta. */ .tw-fascia-visiva .wp-block-column > p { font-size: 1.12rem; line-height: 1.55; } /* Il testo nella colonna affiancata non usa la misura di lettura generale: la larghezza gliela dà già la colonna. */ .tw-fascia-visiva .wp-block-column > h2, .tw-fascia-visiva .wp-block-column > p { max-width: none; margin-left: 0; margin-right: 0; } .tw-fascia-visiva .wp-block-column > * { margin-top: 0; height: 100%; } .tw-fascia-visiva figure { margin: 0; border-radius: 6px; overflow: hidden; } .tw-fascia-visiva .tw-segnaposto { height: 100%; min-height: 200px; display: flex; align-items: center; justify-content: center; margin: 0; } @media (max-width: 768px) { .tw-fascia-visiva { gap: 1rem; } .tw-fascia-visiva .tw-segnaposto { min-height: 140px; } } /* ------------------------------------------------------------------ 8. NOTA DI SERVIZIO Informazione utile ma non prioritaria: peso da nota, non da sezione. ------------------------------------------------------------------ */ /* La nota resta più leggera delle sezioni, ma sta nella stessa colonna della prosa: prima era larga 1160 mentre il testo attorno era a 760 centrato, e il suo titolo partiva 180px più a sinistra. La barra verticale sporge a sinistra della colonna invece di spingere il testo verso destra, così i bordi coincidono. */ .entry-content > .wp-block-group.tw-nota, .tw-nota { /* Caso particolare: non è prosa da leggere, è una nota di servizio. Non segue la centratura degli altri blocchi: sta ancorata al bordo sinistro del contenitore, come i titoli di sezione. La barra verticale sporge a sinistra così il testo parte esattamente sul bordo, senza rientro. */ max-width: var(--tw-misura) !important; margin-left: -1.2rem !important; margin-right: auto !important; margin-top: 1.6rem !important; padding: 0.1rem 0 0.1rem 1rem; border-left: 3px solid var(--contrast-3); box-sizing: content-box; } .tw-nota h3, .tw-nota p { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } .tw-nota h3 { font-family: Inter, sans-serif; font-size: 1.05rem !important; font-weight: 600; letter-spacing: 0; margin-top: 0 !important; margin-bottom: 0.3rem !important; color: var(--contrast-2); } .tw-nota p { font-size: 0.95rem; color: var(--contrast-2); margin-bottom: 0; } /* Immagini nelle card delle destinazioni: 8:5, piu' alte di quelle della griglia format perche' qui l'immagine deve far riconoscere il luogo. */ .tw-dest-img { margin: 0 0 0.8rem 0 !important; } .tw-dest-img img { width: 100%; aspect-ratio: 8 / 5; height: auto; object-fit: cover; display: block; border-radius: 4px; } /* Immagini nelle card della griglia format. */ .tw-card-img { margin: 0 0 0.7rem 0 !important; } .tw-card-img img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; border-radius: 4px; } /* ------------------------------------------------------------------ 9. HEADER — distanza fra logo e menu Con il contenitore a 1200px il menu finiva sul bordo destro e fra logo e menu restavano 501px di vuoto. Non stringo il contenitore, perché sposterebbe il logo e romperebbe l'allineamento col contenuto: tiro dentro il menu di 250px, così il vuoto a sinistra del menu e il margine alla sua destra sono uguali. ------------------------------------------------------------------ */ @media (min-width: 1025px) { .inside-header .main-navigation { margin-right: 250px; } } /* ------------------------------------------------------------------ 10. CTA FINALE È l'elemento che deve convertire: fascia piena, bottone rosso con etichetta grande. Il rosso #FF3300 con testo bianco dà 3,67:1, che basta solo per il testo grande — per questo il bottone è a 1,25rem in 600, non un link di testo corrente. ------------------------------------------------------------------ */ .tw-cta { max-width: none !important; border-radius: 8px; margin-top: 2.5rem !important; } .tw-cta h2 { max-width: none !important; color: var(--sfondo); margin-bottom: 0.6rem; } .tw-cta p { max-width: 34rem !important; margin-left: auto !important; margin-right: auto !important; color: var(--sfondo); } .tw-cta .wp-block-buttons { margin: 1.6rem 0 1.2rem; display: flex; justify-content: center; max-width: none !important; } .tw-cta .wp-block-button__link { padding: 0.85rem 2.4rem; border-radius: 6px; text-decoration: none; transition: background-color .15s ease; } .tw-cta .wp-block-button__link:hover { background-color: var(--sfondo) !important; color: var(--primario) !important; } .tw-cta a { color: var(--sfondo); } .tw-cta a:hover { color: var(--accento); } @media (max-width: 768px) { .tw-cta .wp-block-button__link { padding: 0.75rem 1.6rem; font-size: 1.1rem !important; } } /* ================================================================== 11. HOME — stili esclusivi della front page Tutto ciò che segue è confinato a .home: le pagine format non vengono toccate. ================================================================== */ :root { /* Terzo accento, solo home. Con il navy dà 9,49:1 in entrambi i versi; su bianco è 2,01:1, quindi mai testo ocra su chiaro. */ --accento-caldo: #F2A900; } /* --- 1. HERO SLIDER ------------------------------------------------ */ /* Cinque slide, un messaggio ciascuna, in dissolvenza incrociata. Niente JavaScript: le slide sono impilate una sopra l'altra e si alternano con @keyframes. La versione precedente animava scrollLeft a mano e non partiva mai; qui non c'è nulla che possa non partire, perché il ciclo è dichiarato nel CSS e non dipende da eventi. Tempi: 25s di giro, 5s a slide, 0,6s di dissolvenza. Erano 6s e 0,9s: il cambio risultava così morbido da non accorgersene. Oltre ai tempi più stretti c'è un lentissimo zoom sempre attivo, così l'immagine è visibilmente viva anche a metà di una slide. Il ritardo negativo sulla prima evita il nero iniziale: all'istante zero la slide 1 è già dentro la sua finestra di visibilità. */ .tw-hero-slider { position: relative; max-width: none !important; border-radius: 10px; overflow: hidden; min-height: 620px; margin-top: 0 !important; background: var(--primario); } .tw-slider-track, .tw-slider-track > .wp-block-group__inner-container { padding: 0 !important; margin: 0 !important; max-width: none !important; } /* La prima slide resta nel flusso e detta l'altezza del contenitore. Le altre le stanno sopra in assoluto. Così l'altezza è sempre quella del testo più lungo e non può più formarsi la fascia vuota in basso che si vedeva quando le immagini avevano un'altezza fissa di 620px e il testo, più alto, sbordava sul fondo del contenitore. */ .tw-slide { position: absolute; inset: 0; margin: 0 !important; padding: 0 !important; max-width: none !important; opacity: 0; animation: tw-dissolvenza 30s infinite; } .tw-slide:first-child { position: relative; } .tw-slide-1, .tw-slide-1 .tw-slide-testo, .tw-slide-1 img { animation-delay: -0.6s; } .tw-slide-2, .tw-slide-2 .tw-slide-testo, .tw-slide-2 img { animation-delay: 4.4s; } .tw-slide-3, .tw-slide-3 .tw-slide-testo, .tw-slide-3 img { animation-delay: 9.4s; } .tw-slide-4, .tw-slide-4 .tw-slide-testo, .tw-slide-4 img { animation-delay: 14.4s; } .tw-slide-5, .tw-slide-5 .tw-slide-testo, .tw-slide-5 img { animation-delay: 19.4s; } .tw-slide-6, .tw-slide-6 .tw-slide-testo, .tw-slide-6 img { animation-delay: 24.4s; } @keyframes tw-frase { 0% { opacity: 0; transform: translateY(14px); } 1.33% { opacity: 1; transform: translateY(0); } 15% { opacity: 1; transform: translateY(0); } 16.33% { opacity: 0; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } } @keyframes tw-dissolvenza { 0% { opacity: 0; } 2% { opacity: 1; } 16.67% { opacity: 1; } 18.67% { opacity: 0; } 100% { opacity: 0; } } /* Zoom lentissimo sempre in corso: 4% in cinque secondi. Impercettibile come movimento, ma toglie l'effetto fotografia ferma. */ @keyframes tw-zoom { 0% { transform: scale(1); } 18.67% { transform: scale(1.04); } 100% { transform: scale(1.04); } } /* Sei movimenti diversi invece di uno solo. Con lo stesso zoom su tutte e sei, dopo il secondo giro l'occhio lo riconosce e la sequenza sembra un carosello meccanico. Qui tre slide entrano avvicinandosi e tre allontanandosi, e ognuna ha il proprio centro di ingrandimento: la foto non si gonfia dal centro ma scivola verso il punto che conta — le persone, che nelle sei foto stanno in posti diversi. L'escursione resta minima, dal 4 al 5,5 per cento in cinque secondi: si deve sentire che l'immagine e' viva, non vedere che si muove. */ @keyframes tw-zoom-avanti { 0% { transform: scale(1); } 18.67% { transform: scale(1.055); } 100% { transform: scale(1.055); } } @keyframes tw-zoom-indietro { 0% { transform: scale(1.055); } 18.67% { transform: scale(1); } 100% { transform: scale(1); } } /* Pausa al passaggio del mouse e alla tastiera. */ .tw-hero-slider:hover .tw-slide, .tw-hero-slider:focus-within .tw-slide, .tw-hero-slider:hover .tw-slide-testo, .tw-hero-slider:focus-within .tw-slide-testo, .tw-hero-slider:hover .tw-slide img, .tw-hero-slider:focus-within .tw-slide img, .tw-hero-slider:hover .tw-slider-punti button::before, .tw-hero-slider:focus-within .tw-slider-punti button::before { animation-play-state: paused; } /* La foto riempie la slide; il testo le passa sopra. */ .tw-slide figure.wp-block-image { position: absolute; inset: 0; margin: 0 !important; max-width: none !important; } .tw-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; animation: tw-zoom 30s infinite; will-change: transform; } /* Velatura direzionale, non più il pannello uniforme al 62% che spegneva la foto su tutta la superficie. Qui il navy è denso solo dove sta la frase e si azzera del tutto prima del bordo destro: l'ultimo quarto dell'immagine è foto pulita, senza un velo sopra. Misurato sui pixel reali delle tre foto già caricate, il contrasto medio del bianco sul testo sta fra 8,6:1 e 10,6:1. Restano piccole zone chiare (riflessi, magliette bianche) dove scende sotto 3:1: le copre l'ombra stretta sul testo, perché scurire l'intera velatura per inseguirle riporterebbe al problema di partenza. Le foto definitive vanno scelte guardando questo. */ .tw-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(96deg, rgba(0, 0, 70, 0.64) 0%, rgba(0, 0, 70, 0.59) 30%, rgba(0, 0, 70, 0.46) 46%, rgba(0, 0, 70, 0.15) 60%, rgba(0, 0, 70, 0.00) 72%); pointer-events: none; z-index: 1; } /* Il testo esce prima della foto e rientra dopo. Con la sola dissolvenza dell'immagine, per 0,9s si leggevano due frasi grandi sovrapposte. Qui la frase uscente sparisce a 5,1s e quella entrante compare a 5,7s: in mezzo restano solo le due foto che si scambiano, che è esattamente ciò che deve vedersi. */ .tw-slide-testo { animation: tw-frase 30s infinite; opacity: 0; position: relative; z-index: 2; max-width: none !important; padding: 4.5rem 2.5rem 6.2rem !important; min-height: 620px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; } /* WordPress centra il contenitore interno con margin:auto per via del layout "constrained". In flexbox i margini auto battono align-items, quindi align-items:flex-start non bastava: il testo restava spinto a destra di 252px rispetto al bordo della slide. Vanno azzerati i margini, non aggiunto un allineamento. */ .tw-slide-testo > .wp-block-group__inner-container { padding: 0 !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; display: flex; flex-direction: column; align-items: flex-start; } /* Una riga sola per slide, quindi può essere davvero grande. Il limite in ch tiene la frase su due righe al massimo. */ .tw-slide-testo h1, .tw-slide-testo p.tw-slide-frase { color: #FFFFFF !important; font-family: "Source Serif 4", serif !important; font-size: clamp(2.0rem, 3.6vw, 3.2rem) !important; line-height: 1.12; font-weight: 600 !important; letter-spacing: -0.012em; margin: 0 !important; max-width: 17ch !important; /* Ombra corta e densa + alone largo: la prima stacca il bordo delle lettere dai riflessi chiari, la seconda dà profondità senza sporcare la foto. */ text-shadow: 0 1px 3px rgba(0, 0, 35, 0.85), 0 3px 28px rgba(0, 0, 35, 0.55); } .tw-slide-testo p.tw-tag, .tw-tag { display: inline-block; background: none; color: #FFFFFF !important; font-family: Inter, sans-serif !important; font-size: 0.78rem !important; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0 0 0.5rem; border-bottom: 2px solid var(--accento); margin: 0 0 1.1rem !important; max-width: none !important; text-shadow: 0 1px 6px rgba(0, 0, 35, 0.9); } /* Indicatori: dicono solo "ce ne sono altre", non sono cliccabili. */ .tw-slider-punti { position: absolute; left: 2.5rem; bottom: 2.2rem; z-index: 3; display: flex; gap: 0.5rem; } /* Sono