/* Theme Name: Ohio Child - Kreita Theme URI: https://kreita.com/ Description: Tema figlio di Ohio per kreita.com. Tutte le personalizzazioni vanno qui: quelle fatte dentro il tema Ohio spariscono al primo aggiornamento. Author: Kreita Author URI: https://kreita.com/ Template: ohio Version: 1.0.0 Text Domain: ohio-child */ /* Le regole del padre arrivano da ohio-parent-style (vedi functions.php). Qui sotto solo le nostre correzioni. */ /* -------------------------------------------------------------------------- LA GABBIA DEL CONTENUTO — una sola, e da qui in poi CRESCE. Misurato il 10/8 su monitor grandi, ed era la segnalazione «layout troppo stretto»: larghezza barra contenuto schermo usato 1440 1400 1240 86% 1920 1880 1240 65% 2560 2520 1240 48% ⚠️ Il difetto non era la gabbia da 1240: era che **la barra del menu non ha mai avuto un tetto** (`.header-wrap` ha solo `margin:20px`, quindi e' sempre `100vw - 40`). A 2560 si vedeva una barra larga il doppio del contenuto, e l'occhio legge la contraddizione prima del testo. Il «1400» scritto nei commenti di `header.css` era una MISURA presa a 1440, non un limite. ⚠️ La gabbia parte a crescere solo **sopra i 1440**: sotto vale 1240 e non cambia una virgola di quello che il cliente ha gia' approvato. Sale di 45px ogni 100 di schermo e si ferma a 1560 — oltre, le griglie a tre colonne diventano larghe e le foto delle schede cominciano a lavorare male. ⚠️⚠️ **Allargare la gabbia NON deve allargare i paragrafi.** Le righe oggi stanno fra 48 e 84 caratteri, che e' la finestra giusta: sono le griglie e le schede a dover crescere. I tetti in `ch` sui blocchi di testo (`.k-sv__testo{max-width:68ch}` e simili) restano dove sono ed e' apposta. -------------------------------------------------------------------------- */ :root{ --k-gabbia: clamp(1240px, calc(1240px + (100vw - 1440px) * .45), 1560px); } /* -------------------------------------------------------------------------- I CARATTERI SUI MONITOR GRANDI. Corpo 16,4px e h1 86,4px erano identici a 1440 e a 2560: alla distanza a cui si sta davanti a un monitor grande il testo resta piccolo, e concorre alla sensazione di vuoto. Qui la base cresce del 6% sopra i 1700 e del 10% sopra i 2200 — verificato che scalano corpo, titoli, frase, testo, voci e menu. ⚠️ Due misure erano scritte in px e NON seguivano: le porto a rem piu' sotto, con lo stesso valore alla base (14,3 e 12,5 a 16px), cosi' a 1440 non cambia niente e sopra crescono insieme al resto. -------------------------------------------------------------------------- */ @media (min-width: 1700px){ html{ font-size: 17px } } @media (min-width: 2200px){ html{ font-size: 17.6px } } /* -------------------------------------------------------------------------- Etichette delle aree servizio sempre leggibili. Nel tema stanno a visibility:hidden e compaiono solo al passaggio del mouse: su desktop la home mostrava sei foto senza didascalia, e col dito non c'e' alcun hover. Le rendiamo visibili e teniamo l'effetto solo come rinforzo. -------------------------------------------------------------------------- */ .portfolio-item .caption, .portfolio-item .title, .portfolio-holder .caption { visibility: visible !important; opacity: 1 !important; } /* -------------------------------------------------------------------------- UNA GABBIA SOLA PER TUTTO IL SITO. Le pagine rifatte (copertina, aree, servizi, contatti, lavori) e il piede stanno tutte su **1240px + 1,5rem**: a 1440 il contenuto va da 124 a 1316. Le pagine ancora servite dal modello di Ohio (cookie e privacy policy, «i nostri servizi», archivi del blog, ricerca, 404) usano invece il suo `.page-container`, che e' **1296 + 20px** — cioe' contenuto da 92 a 1348, **32px piu' largo per lato**. Attaccate al piede si vedeva lo scalino, ed e' la segnalazione dell'8/8 «il piede non segue la larghezza del sito»: era il contrario, era la pagina a essere piu' larga. ⚠️ `:not(.-full-w)`: quando Ohio disattiva l'incolonnamento aggiunge quella classe e il contenitore deve restare a tutta larghezza. ⚠️ La barra del menu NON c'entra e resta com'e': e' una pasticca sospesa a 20px dai bordi, larga 1400, ed e' una scelta del 7/8. -------------------------------------------------------------------------- */ /* ⚠️ `:not(.page-container *)`: solo il contenitore piu' esterno. Le pagine a due colonne (privacy) ne annidano altri con un riempimento loro, e non vanno toccati — oggi sono tutti piu' stretti di 1240 e la regola non li muoverebbe, ma domani si', e sarebbe un guasto difficile da attribuire. */ .page-container:not(.-full-w):not(.page-container *) { max-width: var(--k-gabbia); padding-left: 1.5rem; padding-right: 1.5rem; } /* -------------------------------------------------------------------------- ANCHE LE SEZIONI DI ELEMENTOR SEGUONO LA GABBIA. Segnalato il 26/8: «i servizi di quest'area non sono allineati a sinistra e destra con l'hero iniziale». Misurato sulla pagina /software/, il contenuto comincia a: larghezza apertura servizi scarto 1440 120 120 0 1540 148 170 22 1600 164 200 36 1920 253 361 108 L'apertura, il piede, le pagine progetto e i contenitori di Ohio seguono tutti `--k-gabbia`, che sopra i 1440 cresce fino a 1560. Le sezioni di Elementor no: restano ferme a 1240, e da li' in su la pagina si disallinea. ⚠️ Sotto i 1440 non cambia NIENTE: `--k-gabbia` vale esattamente 1240, che e' la misura che quelle sezioni hanno gia'. La promessa fatta piu' su — «sotto i 1440 non cambia una virgola di quello che il cliente ha approvato» — resta. ⚠️ Serve il `body` davanti: la larghezza la scrive Elementor con una regola per SEZIONE (`.elementor-246007 .elementor-element-aeaad71 > …`), che pesa quanto questa. Con l'elemento in piu' questa pesa di piu' e vince sempre, qualunque sia l'ordine con cui i fogli arrivano. ⚠️ Solo le sezioni «boxed»: quelle a tutta larghezza hanno `max-width:none` ed e' voluto. Verificato prima di scrivere che su nessuna pagina del sito c'e' un contenitore piu' STRETTO di 1240, che questa regola allargherebbe. -------------------------------------------------------------------------- */ body .elementor .elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--k-gabbia); } /* -------------------------------------------------------------------------- /CONTATTI/: L'APERTURA FINIVA SOTTO LA BARRA DEL MENU. La barra e' fissa e non spinge giu' il contenuto: finisce a **128px**. ⚠️ Qui NON si tocca la sezione: il blocco scuro e' `section.k-ct-aree`, **dentro** la sezione. Dando il respiro alla sezione lo scuro scendeva e sopra restava una fascia CHIARA di 112px — sbagliato: lo scuro deve arrivare a filo e passare SOTTO la pasticca del menu, come le aperture del resto del sito. Lo spazio va dato **dentro** al blocco. ⚠️ La regola in `home.css` dice `calc(3.4rem + 117px)`: **117 e' vecchio**, la barra finisce a 128 da quando il 7/8 e' diventata sospesa. Con 3,4rem il testo restava a 43px dalla barra, e sotto i 900px (`2.2rem + 92px` = 127) finiva **esattamente sul bordo**: di li' il «va sotto l'header». Ora: 6rem + 128px = 224 → **96px d'aria**. Serve `!important` perche' `home.css` si carica dopo (priorita' 20 contro 10). ⚠️ Se cambia l'altezza della testata va ritoccato anche questo. ⚠️ Sta qui e non in `home.css` perche' quel foglio lo sta riscrivendo anche un'altra sessione: una regola appesa li' e' gia' stata persa una volta. -------------------------------------------------------------------------- */ .k-ct-aree { padding-top: calc(6rem + 128px) !important; } @media (max-width: 900px) { .k-ct-aree { padding-top: calc(4rem + 108px) !important; } }