/* worldcapp.com - CSS custom del sito (classi wa_/lt_). Separato dal template Hive (theme-two.css), caricato dopo di esso. */ /* Compatibilita del tema storico con la griglia Bootstrap 5. Manteniamo i gutter, la larghezza desktop e la tipografia base del vecchio Bootstrap 3. */ body { font-size: 14px; line-height: 1.42857143; } a { text-decoration: none; } .container, .row { --bs-gutter-x: 30px; } @media (min-width: 1200px) { .container { max-width: 1170px; } } /* Spinner di caricamento (.loader, 3 anelli concentrici): il tema usava viola + azzurro fuori brand. Si alternano i due colori WorldcApp: blu scuro (esterno) / azzurro (mezzo) / blu scuro (interno). */ .preloader .loader { border-top-color: #00244a; } .preloader .loader:before { border-top-color: #009aff; } .preloader .loader:after { border-top-color: #00244a; } .preloader.is-hidden { opacity: 0; pointer-events: none; } .hamburger-toggle { padding: 0; border: 0; background: transparent; } .wa_title { color: #fff; font-weight: 300; font-size: 36px; } .wa_title_02 { color: #fff; font-weight: 300; font-size: 18px; } .wa_btns { text-align: center; } .wa_btns2 { margin-top: 10px; } .lt_video { height: 0; overflow: hidden; padding-bottom: 56.25%; padding-top: 30px; position: relative; } .lt_video iframe, .lt_video object, .lt_video embed { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } p.lt_white { color: #fff !important; } .lt_wg { -moz-box-shadow: 0 0 5px #fff; -webkit-box-shadow: 0 0 5px #fff; box-shadow: 0px 0px 5px #fff; } .lt_lns { text-decoration: none; } /* Logo WorldcApp piu grande in alto a sx; per non far crescere l'header si riduce il padding del nav cosi l'altezza totale resta ~uguale (~63px). Logo base 42->54px, padding nav 0.75em->0.35em. (I valori del logo sui grandi schermi sono scalati nei media query qui sotto.) */ .nav-container .site-nav .logo { max-height: 54px; } .site-nav.nav-sm { padding: 0.35em 0; } /* Logo (piu alto del testo del menu) e voci di menu stanno in due colonne allineate in alto: col logo ingrandito il menu sembrava sollevato. Si centrano verticalmente nella riga del nav desktop. SOLO da >=768px: su mobile il flex faceva collassare la colonna del menu (deskNav toggolato) alla larghezza del testo (~108px), lasciando cliccabile solo il testo. */ @media (min-width: 768px) { #deskNav .row { display: flex; align-items: center; } } /* Stesso problema nel nav mobile: logo e hamburger su due colonne allineate in alto -> hamburger sollevato. Centrati verticalmente. */ .site-nav.d-md-none .row { display: flex; align-items: center; } /* Voci di menu un filo piu grandi (theme: 14px base). */ .menu-horizontal > li a, .menu-horizontal > li span { font-size: 16px; } /* Hover voci di menu: il tema lasciava il colore invariato (#252525) -> nessun feedback. Si vira il SOLO testo all'azzurro brand (#009aff), niente sfondo. */ .menu-horizontal > li a:hover, .menu-horizontal > li span:hover, .menu-horizontal > li a:focus, .menu-horizontal > li span:focus { color: #009aff; } /* Nav mobile (deskNav aperto con l'hamburger): voci a tutta larghezza e riga INTERA cliccabile. Gli del tema sono inline -> era tappabile solo il testo. Si rendono blocco a 100% con un po' di padding orizzontale. */ @media (max-width: 767px) { #deskNav .menu-horizontal { width: 100%; } #deskNav .menu-horizontal > li { display: block; width: 100%; } #deskNav .menu-horizontal > li a, #deskNav .menu-horizontal > li span { display: block; width: 100%; padding-left: 16px; padding-right: 16px; } } /* =================================================================== Schermi grandi e molto grandi: scala tipografia, nav, hero e container. Gli heading usano em (cascata dal body) quindi scalano col font del body; qui si scalano in piu gli elementi in px (nav, bottoni, hero, logo) e si allarga il .container, che di base resta fisso ~1170px (Bootstrap 3). =================================================================== */ @media (min-width: 1600px) { body { font-size: 16px; } .container { width: 1480px; max-width: 1480px; } .menu-horizontal > li a, .menu-horizontal > li span { font-size: 17px; } .nav-container .site-nav .logo { max-height: 58px; } .btn { font-size: 14px; } .wa_title { font-size: 42px; } .wa_title_02 { font-size: 20px; } } @media (min-width: 2000px) { body { font-size: 18px; } .container { width: 1720px; max-width: 1720px; } .menu-horizontal > li a, .menu-horizontal > li span { font-size: 18px; } .nav-container .site-nav .logo { max-height: 64px; } .btn { font-size: 15px; } .wa_title { font-size: 48px; } .wa_title_02 { font-size: 22px; } } @media (min-width: 2560px) { body { font-size: 20px; } .container { width: 2000px; max-width: 2000px; } .menu-horizontal > li a, .menu-horizontal > li span { font-size: 20px; } .nav-container .site-nav .logo { max-height: 72px; } .btn { font-size: 16px; } .wa_title { font-size: 56px; } .wa_title_02 { font-size: 26px; } } @media (min-width: 3200px) { body { font-size: 23px; } .container { width: 2400px; max-width: 2400px; } .menu-horizontal > li a, .menu-horizontal > li span { font-size: 22px; } .nav-container .site-nav .logo { max-height: 82px; } .btn { font-size: 18px; } .wa_title { font-size: 64px; } .wa_title_02 { font-size: 30px; } } /* index.php: feature box "Install the App" / "Take up the Challenge". Le icone a gradiente clippato su card bianca si notavano troppo poco. Ora l'icona sta dentro un BADGE CIRCOLARE a gradiente brand (blu scuro -> azzurro) con glifo bianco e ombra: spicca nettamente. */ .home-features .feature-box i { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; font-size: 2.6em; /* dimensione del glifo dentro il cerchio */ line-height: 1; color: #fff; -webkit-text-fill-color: #fff; /* annulla il clip-text precedente */ background: -webkit-linear-gradient(top, #00244a 0%, #009aff 100%); background: linear-gradient(to bottom, #00244a 0%, #009aff 100%); box-shadow: 0 10px 24px rgba(0, 36, 74, 0.28); transition: transform 0.2s ease, box-shadow 0.2s ease; } .home-features .feature-box br { display: none; } /* Home: ingrandisce leggermente i testi della sezione intro (Now Creativity / World Cup! / Business? / Explore the Vision). Scoped a .home-intro per non toccare gli stessi h3/h4 nelle pagine editoriali (#aboutus e' condiviso). */ .home-intro h3 { font-size: 2.1em; } .home-intro h4 { font-size: 1.75em; } /* Meno spazio verticale attorno alle icone (sotto "World Cup!" e sopra "Business?"): il padding 2.5em delle feature-box era abbondante. */ .home-intro .feature-box { padding-top: 1.2em; padding-bottom: 1.2em; } .banner-image-box { display: flex; flex-wrap: wrap; } .banner-image-box > [class*="col-"] { position: relative; z-index: 1; align-self: flex-start; } .home-features .feature-details p { font-size: 1.55em; margin-top: 0; font-weight: 300; /* stesso gradiente brand delle icone sopra */ background: -webkit-linear-gradient(top, #00244a 0%, #009aff 100%); background: linear-gradient(to bottom, #00244a 0%, #009aff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } /* Sezioni chiare (.site-bg-light, es. blocco video #business e gli #aboutus): il grigio #f7f7f7 del template si confondeva col bianco -> leggermente piu scuro. */ .site-bg-light { background-color: #ececec; } /* Footer: sfondo dal grigio scuro #252525 al blu scuro brand #00244a. */ footer.site-bg-dark { background-color: #00244a; } /* Footer: testo (email/copyright/indirizzo/privacy) era 12px fisso e non scalava. Lo si lega al body cosi cresce ed e leggibile anche sui grandi schermi. */ footer .copyright, footer .support { font-size: 1em; } /* Footer scuro: i link .support (email/copyright/indirizzo/privacy) sono forzati a #fff dal tema e non avevano alcun hover -> nessun feedback. Si virano all'azzurro brand (#009aff), che su fondo scuro spicca. Transizione morbida coerente col resto. */ footer.site-bg-dark .support, footer.bg-primary .support, footer.site-bg-gradient .support { transition: color 0.25s ease; } footer.site-bg-dark .support:hover, footer.site-bg-dark .support:focus, footer.bg-primary .support:hover, footer.bg-primary .support:focus, footer.site-bg-gradient .support:hover, footer.site-bg-gradient .support:focus { color: #009aff; } /* Bottoni store (Play Store / App Store): icona e label erano in px fissi (24px / 15px) e non scalavano. Legandoli in em al .btn (che gia scala nei media query qui sopra) diventano responsive ovunque sono usati. */ .btn-icon i { font-size: 1.85em; } .btn-icon p { font-size: 1.15em; } /* I due bottoni store sono inline-block affiancati: il vertical-align di default (baseline) li disallineava (icone playstore/apple di altezza diversa). Li si allinea al centro e si centra anche icona+label dentro. */ /* Icona + label dentro il bottone erano in float (allineate in alto): si usa inline-flex con align-items center per centrarle verticalmente nella pillola. */ .wa_btns .btn-icon { display: inline-flex; align-items: center; vertical-align: middle; } .btn-icon i { line-height: 1; } /* Blocco gradient coi bottoni store: lo spazio sopra/sotto veniva dai
nell'HTML (uno sopra, DUE sotto) -> asimmetrico. Si neutralizzano i
diretti del blocco e si da un padding verticale simmetrico. (NB: .site-bg-gradient e SOLO questa banda CTA store nelle pagine contenuto; la home usa .bg-gradient-overlay, classe diversa, non toccata.) */ .site-bg-gradient { padding-top: 32px; padding-bottom: 32px; /* Da banda squadrata full-bleed a pannello contenuto e arrotondato, coerente col resto del restyle (cornice media, card). I margini verticali danno separazione costante sopra/sotto a prescindere dai
per-pagina -> su video.php non si appiccica piu al footer. max-width 720 = identico a figure/video, cosi i margini laterali del pannello combaciano con quelli dei media. */ max-width: 720px; margin: 40px auto; border-radius: 18px; box-shadow: 0 16px 48px rgba(0, 18, 46, 0.18); } /* su mobile non deve toccare i bordi: margini laterali al posto dell'auto */ @media (max-width: 767px) { .site-bg-gradient { margin-left: 16px; margin-right: 16px; } } .site-bg-gradient > br { display: none; } /* Il line box del contenitore dei bottoni era piu alto dei bottoni stessi (line-height ereditato) -> spazio fantasma che li faceva sembrare decentrati. Si azzera sul contenitore e si ripristina solo sulla label. */ .wa_btns { line-height: 0; } .wa_btns .btn-icon p { line-height: 1.3; } /* Nel gradient i bottoni devono stare centrati: il margin-top:10px di .wa_btns2 (utile nella hero per staccarli dal titolo) qui creava 10px di spazio in piu sopra -> azzerato solo dentro .site-bg-gradient. */ .site-bg-gradient .wa_btns2 { margin-top: 0; } /* Niente outline scuro del browser quando si clicca un link col mouse (es. il logo). Lo si mantiene per la navigazione da tastiera (focus-visible) cosi non si perde l'accessibilita. */ a:focus { outline: 0; } a:focus-visible { outline: 2px solid #009aff; outline-offset: 2px; } /* Niente underline sui link in hover: Bootstrap forza `a:hover,a:focus{text-decoration:underline}` -> lo si annulla ovunque. (Gli espliciti, es. footer WorldcApp/Privacy, NON sono toccati.) */ a:hover, a:focus { text-decoration: none; } /* =================================================================== Tipografia editoriale riutilizzabile (titolo / sottotitolo / testo). Tutto in em -> eredita dal body, quindi scala automaticamente sui grandi schermi grazie ai media query qui sopra. Da usare al posto di h3/h5/p "nudi" del template (p era 15px FISSO, non scalava mai). =================================================================== */ .lt_title { font-size: 2.4em; line-height: 1.25em; font-weight: 700; margin-bottom: 0.3em; } .lt_subtitle { font-size: 1.5em; line-height: 1.4em; font-weight: 300; color: #555; margin-bottom: 0.5em; } .lt_text { font-size: 1.2em; line-height: 1.85em; } /* =================================================================== RESTYLING CONSERVATIVO HOME (2026-06) — blocco additivo, reversibile. Quattro interventi mirati alla sola home, niente redesign: 1) hero su mobile non piu tagliato + parallax disattivato 2) feature box "Install / Take up the Challenge" -> aspetto card 3) sezione video #business -> cornice (radius/ombra/respiro) Tutto scoped a selettori della home (.home, .home-features, .home-intro, .banner-image-box, #business). Per tornare indietro basta rimuovere questo blocco. =================================================================== */ /* --- 1. HERO MOBILE ------------------------------------------------- .home aveva max-height:675px che su telefono TAGLIAVA l'hero e nascondeva "Join Now" + i bottoni store sotto la piega. Su mobile si toglie il cap, si da respiro sotto la navbar e si centra il copy. */ @media (max-width: 767px) { /* l'hero deve avvolgere il contenuto: le height:100% del template (.home .row, .banner-image-box, il col del telefono) lasciavano una banda di sfondo blu sotto il telefono. Si azzerano su mobile. */ .home, .home .container, .home .row, .banner-image-box, .banner-image-box div[class*='col-'] { height: auto !important; } .home { max-height: none; overflow: hidden; } .home.ht-100 { padding: 20px 0 0; } .home > .container { padding-left: 8px; padding-right: 8px; } .banner-image-box .highlight { text-align: center; } /* telefono grande su mobile: largo piu del 100% (l'immagine ha trasparenza ai lati, il telefono non tocca i bordi). I margini negativi simmetrici lo centrano; l'overflow:hidden sull'hero taglia l'eccesso ai lati senza creare scroll orizzontale. */ .banner-image-box img { width: 112%; max-width: none; max-height: none; margin: 8px -6% 0; } } /* Bottoni store (outline trasparenti su sfondo immagine): un filo di fondo per staccarli e leggerli meglio; in hover diventano pieni. */ .wa_btns2.btn-outline.inverse { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.6); } .wa_btns2.btn-outline.inverse:hover, .wa_btns2.btn-outline.inverse:focus, .wa_btns2.btn-outline.inverse:active { background: #fff; border-color: #fff; } /* in hover il fondo diventa bianco: icona e label (che ereditano il bianco di .btn-outline.inverse) vanno forzate a blu, altrimenti spariscono su bianco */ .wa_btns2.btn-outline.inverse:hover, .wa_btns2.btn-outline.inverse:hover i, .wa_btns2.btn-outline.inverse:hover p, .wa_btns2.btn-outline.inverse:focus, .wa_btns2.btn-outline.inverse:focus i, .wa_btns2.btn-outline.inverse:focus p, .wa_btns2.btn-outline.inverse:active, .wa_btns2.btn-outline.inverse:active i, .wa_btns2.btn-outline.inverse:active p { color: #00244a; } /* le icone icomoon hanno un color proprio sul ::before (playstore/apple), reso bianco nei bottoni inverse: il color sull' non le raggiunge, va forzato il ::before, altrimenti restano bianche sul fondo hover bianco */ .wa_btns2.btn-outline.inverse:hover i:before, .wa_btns2.btn-outline.inverse:focus i:before, .wa_btns2.btn-outline.inverse:active i:before { color: #00244a !important; } /* nel pannello .site-bg-gradient la label e'

con color:#fff !important: in hover il fondo diventa bianco e la label spariva (si vedeva cambiare colore solo l'icona). Va forzata a blu anch'essa, col !important per battere .lt_white. Cosi in hover tutto il bottone vira coerente. */ .wa_btns2.btn-outline.inverse:hover p.lt_white, .wa_btns2.btn-outline.inverse:focus p.lt_white, .wa_btns2.btn-outline.inverse:active p.lt_white { color: #00244a !important; } /* --- 2. FEATURE BOX -> CARD ---------------------------------------- Le due box erano solo icona + testo senza contenitore: sembravano link sparsi. Diventano card bianche con bordo, ombra e hover. */ .home-features [class*="col-"] { margin-bottom: 20px; } .home-features .feature-box { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px 24px; background: #fff; border: 1px solid #dbe5f0; border-radius: 16px; /* card bianca su fondo bianco: ombra piu marcata (doppio layer: ambient stretta + drop morbida) per staccarla bene dallo sfondo */ box-shadow: 0 2px 6px rgba(0, 36, 74, 0.06), 0 14px 34px rgba(0, 36, 74, 0.14); transition: transform 0.2s ease, box-shadow 0.2s ease; } /* il badge circolare e' centrato (la card e' flex-column align-center) con spazio uniforme sotto, prima della label */ .home-features .feature-box i { margin: 0 0 18px; } .home-features .feature-box .feature-details, .home-features .feature-details p { margin: 0; } .home-features .feature-box:hover { transform: translateY(-4px); box-shadow: 0 4px 10px rgba(0, 36, 74, 0.08), 0 22px 48px rgba(0, 36, 74, 0.20); } /* in hover anche il badge reagisce: si ingrandisce e accentua l'ombra */ .home-features .feature-box:hover i { transform: scale(1.06); box-shadow: 0 14px 30px rgba(0, 36, 74, 0.38); } /* --- 3. SEZIONE VIDEO (#business) ---------------------------------- Il poster (gia provvisto di play) era full-bleed e senza forma. Lo si limita, centra e si da cornice: radius + ombra + micro-zoom in hover. */ #business { padding: 44px 16px; } /* la .row di Bootstrap ha margin -15px: senza annullarlo il riquadro sforava ai bordi e la stondatura si tagliava */ #business .row { margin-left: 0; margin-right: 0; } #business .row > a { display: block; max-width: 920px; margin: 0 auto; padding-left: 0; padding-right: 0; } #business .row img { border-radius: 18px; box-shadow: 0 16px 48px rgba(0, 18, 46, 0.22); transition: transform 0.25s ease, box-shadow 0.25s ease; } #business .row > a:hover img { transform: scale(1.01); box-shadow: 0 22px 60px rgba(0, 18, 46, 0.30); } /* --- 4. FOOTER: icone social piu grandi ---------------------------- Erano .ico-xs (1.2em): poco visibili. Si ingrandiscono solo quelle del footer, senza toccare le altre icone .ico-xs del sito. */ footer .list-inline a i { font-size: 1.9em; } /* =================================================================== RESTYLING CONSERVATIVO PAGINE CONTENUTO (2026-06) — blocco additivo, reversibile. Stessa filosofia della home, applicata alle pagine .servicebox-lg (ch/about/web301/wow1/vgep1 + gemelli *2 vision/web302/ wow2/vgep2/ch2). Lì i media erano "crudi": immagini-figura e video a tutta larghezza, full-bleed, senza forma. Si dà loro la stessa cornice della sezione video #business della home: max-width, centratura, radius, ombra, micro-zoom in hover. IMPORTANTE: si mira SOLO a img[width="100%"] (le figure/infografiche). I loghi piccoli (TW_Logo 50%, vglogonew 60%) NON vengono toccati. Per tornare indietro basta rimuovere questo blocco. =================================================================== */ /* centratura + cap larghezza per immagini-figura e video (anche il wrapper iframe YouTube) */ .servicebox-lg .container img[width="100%"], .servicebox-lg .container iframe { display: block; max-width: 720px; margin-left: auto; margin-right: auto; } /* cornice: radius + ombra. SOLO su video e foto vere (img.lt_framed): la cornice flatta le foto, ma ROVINA le grafiche/diagrammi (web30 ha un bordo proprio disegnato a filo -> il radius gli taglia gli angoli; wow2 e' trasparente -> l'ombra gli disegna un rettangolo attorno al vuoto). Quelle restano solo centrate e capate (regola sopra), senza cornice. overflow:hidden cosi la stondatura clippa anche l'iframe (in absolute). */ .servicebox-lg .container img.lt_framed, .servicebox-lg .container iframe { border-radius: 16px; box-shadow: 0 14px 40px rgba(0, 18, 46, 0.18); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } /* la foto sta dentro un : il micro-zoom si attiva sul link */ .servicebox-lg .container a:hover img.lt_framed { transform: scale(1.01); box-shadow: 0 20px 52px rgba(0, 18, 46, 0.26); } /* Video nativi responsive, senza wrapper o dipendenze JavaScript. */ .servicebox-lg .container iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; } /* =================================================================== RITMO VERTICALE PAGINE CONTENUTO (2026-06) — blocco additivo. Sostituisce i
usati come spaziatura con margini ordinati e uniformi. Dall'HTML vengono tolti solo i
STRUTTURALI (in testa, in coda, tra blocchi); restano quelli semantici dentro frasi/titoli. Scoped a .servicebox-lg. =================================================================== */ /* Padding verticale di sezione uniforme. Il tema lo dava (5em) solo alle varianti imgleft/imgright; le pagine .site-bg-light semplici (about/vision) non l'avevano -> per quello i
in testa. Lo si uniforma per tutte. */ .servicebox-lg > .container, .servicebox-lg.servicebox-lg-imgleft > .container, .servicebox-lg.servicebox-lg-imgright > .container { padding-top: 3.5em; padding-bottom: 3.5em; } /* Heading: titolo vicino al sottotitolo, spazio sotto il sottotitolo. */ .servicebox-lg .lt_title { margin: 0 0 0.25em; } .servicebox-lg .lt_subtitle { margin: 0 0 1.6em; } /* Media (figure/diagrammi/video): respiro sopra e sotto. */ .servicebox-lg .container img[width="100%"], .servicebox-lg .container iframe { margin-top: 1.6em; margin-bottom: 1.6em; } /* Corpo testo staccato dal media sopra; cappato alla stessa larghezza dei media/pannello (720) e centrato -> colonna unica con margini laterali coerenti su tutta la pagina (testo, diagrammi, foto/video, CTA allineati). Bonus: righe di testo piu leggibili su desktop. */ .servicebox-lg .lt_text { max-width: 720px; margin: 1.6em auto 0; } /* Logo di chiusura (es. VENUS Gallery in fondo a vgep1/2): width 60% quindi non rientra nei margini di ritmo dei media[100%] -> stava appiccicato al testo. Centrato e con respiro sopra/sotto. */ .servicebox-lg .lt_endlogo { display: block; margin: 2.6em auto 0.6em; } /* Blocco di chiusura "WorldcApp / Now Creativity also has its / World Cup!" nelle pagine di dettaglio (_web30x, _wow1/2, wowability/2): erano

/

/

nudi appiccicati al corpo testo. Ora staccato sopra e con ritmo interno ordinato (titolo, micro-gap, tagline). */ .servicebox-lg .lt_closing { margin-top: 2.8em; } .servicebox-lg .lt_closing h2 { margin: 0 0 0.2em; } .servicebox-lg .lt_closing h4 { margin: 0.7em 0 0.05em; } .servicebox-lg .lt_closing h3 { margin: 0; } /* =================================================================== LARGHEZZA COLONNA CONTENUTO SU DESKTOP GRANDI (2026-06) — additivo, reversibile. Le pagine contenuto (.servicebox-lg = tutte tranne index/index2) tengono testo, figure, video e banda CTA in una colonna unica cappata a 720px. Su monitor grandi il .container si allarga ma quella colonna restava stretta in mezzo a tanto vuoto. Qui la si allarga a step, in parallelo ai breakpoint del .container piu sopra, restando leggibile e mantenendo l'allineamento testo/media/CTA. Per tornare indietro basta rimuovere questo blocco. =============== */ @media (min-width: 1600px) { .servicebox-lg .container img[width="100%"], .servicebox-lg .container iframe, .servicebox-lg .lt_text, .site-bg-gradient { max-width: 920px; } } @media (min-width: 2000px) { .servicebox-lg .container img[width="100%"], .servicebox-lg .container iframe, .servicebox-lg .lt_text, .site-bg-gradient { max-width: 1080px; } } @media (min-width: 2560px) { .servicebox-lg .container img[width="100%"], .servicebox-lg .container iframe, .servicebox-lg .lt_text, .site-bg-gradient { max-width: 1240px; } } @media (min-width: 3200px) { .servicebox-lg .container img[width="100%"], .servicebox-lg .container iframe, .servicebox-lg .lt_text, .site-bg-gradient { max-width: 1440px; } } /* CTA testuali ("Case History", "MORE", ...): uniformi globalmente — maiuscolo e stessa dimensione, a prescindere dei wrapper legacy (h5/font/b) che davano dimensioni diverse. Stile da link-bottone. */ .lt_cta { /* blocco centrato con margini propri: cosi la spaziatura verticale e' uniforme su tutte le pagine, a prescindere dal wrapper legacy (
, dentro/fuori lt_text). width:fit-content tiene l'area cliccabile sul solo testo. */ display: block; width: fit-content; margin: 1.4em auto 0.4em; font-size: 15px; /* assoluto: stessa dimensione ovunque, a prescindere dal contesto (dentro/fuori lt_text avevano em diversi) */ font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* Link CTA/navigazione (.lt_cta = MORE/Case History, .lt_lns = Explore the Vision / Creativity / CoMarketing): invertiti rispetto ai link normali -> azzurro brand di default, blu scuro brand in hover/focus. */ .lt_cta, .lt_lns { color: #009aff; transition: color 0.25s ease; } .lt_cta:hover, .lt_cta:focus, .lt_lns:hover, .lt_lns:focus { color: #00244a; } /* =================================================================== REVEAL ALLO SCROLL (2026-06) — pagine contenuto .servicebox-lg. I blocchi (titolo, sottotitolo, media, testo, CTA) entrano con un fadeInUp leggero la prima volta che compaiono in viewport. Gestito centralmente: lo script nell'header (partials/header.php) aggiunge .wcrev su SOLO se IntersectionObserver e' supportato e prefers-reduced-motion non e' attivo, poi mette .is-visible quando l'elemento entra in vista. Senza JS / reduced-motion: tutto visibile subito (niente FOUC). Lo stato nascosto e' gia dal primo paint perche .wcrev viene settata nell' prima del body. =================================================================== */ /* Gli iframe video restano fuori dal reveal e compaiono subito. */ @media (prefers-reduced-motion: no-preference) { html.wcrev .servicebox-lg .lt_title, html.wcrev .servicebox-lg .lt_subtitle, html.wcrev .servicebox-lg .container img[width="100%"], html.wcrev .servicebox-lg .lt_text, html.wcrev .site-bg-gradient { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } html.wcrev .servicebox-lg .lt_title.is-visible, html.wcrev .servicebox-lg .lt_subtitle.is-visible, html.wcrev .servicebox-lg .container img[width="100%"].is-visible, html.wcrev .servicebox-lg .lt_text.is-visible, html.wcrev .site-bg-gradient.is-visible { opacity: 1; transform: none; } }