/* The original full-colour mark remains on a calm white brand surface. */ #tbp-home-intro[hidden] { display:none !important; } #tbp-home-intro { position:fixed; cursor:pointer; inset:0; z-index:100005; display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; padding:clamp(24px,6vh,72px) 24px max(24px,env(safe-area-inset-bottom)); background:#fff; color:#084828; font-family:Manrope,"DM Sans",sans-serif; text-align:center; overflow:auto; } #tbp-home-intro .tbp-home-intro__content { display:flex; flex-direction:column; align-items:center; width:min(100%,880px); } /* Tre righe, tre ruoli (Elind, 19/9: «non tutto deve essere extra bold»). Prima erano tutte in Oxanium, che sul sito esiste solo a peso 800: per forza gridavano tutte uguale. Ora il testo e' in Manrope, con un solo accento: - l'origine e' un'etichetta: piccola, media, un filo spaziata, piu' chiara; - il benvenuto e' la frase che si legge: semibold, la piu' grande; - il nome ToBePolo, e solo lui, resta nel carattere del marchio a 800; - la promessa e' testo: regolare, interlinea da lettura. */ #tbp-home-intro p { margin:0; color:#084828; font-family:Manrope,"DM Sans",sans-serif; text-wrap:balance; } #tbp-home-intro .tbp-home-intro__origin { font-size:clamp(13px,1.5vw,17px); font-weight:500; line-height:1.3; letter-spacing:.04em; color:#3f6b56; } #tbp-home-intro .tbp-home-intro__welcome { margin-top:clamp(8px,1.4vh,14px); font-size:clamp(24px,4.4vw,48px); font-weight:600; line-height:1.15; letter-spacing:-.02em; } /* 12/10: il pittogramma ha accanto il nome vero del marchio (piu' sotto); la sua misura sta in una variabile perche' il nome e' largo quanto il disegno. Un filo piu' piccolo di prima (76vw, 480px, 40vh): il marchio intero, pittogramma e nome, occupa lo stesso posto. */ #tbp-home-intro { --tbp-intro-logo:min(72vw,440px,36vh); } #tbp-home-intro:not([data-nome]) { --tbp-intro-logo:min(76vw,480px,40vh); } #tbp-home-intro .tbp-home-intro__logo { display:block; width:var(--tbp-intro-logo); height:auto; margin:clamp(24px,4.5vh,52px) auto clamp(20px,3.6vh,40px); object-fit:contain; background:transparent; } #tbp-home-intro .tbp-home-intro__claim { max-width:22em; font-size:clamp(17px,2.4vw,26px); font-weight:400; line-height:1.4; letter-spacing:0; color:#2f5a46; } /* 23/9 (video di Elind): prima origine, benvenuto, logo e promessa entravano uno alla volta e il logo arrivava per ultimo, con uno scatto. Ora il blocco entra tutto insieme, quando il logo e' pronto (lo decide lo script inline subito dopo la schermata), ed esce in dissolvenza sulla home. */ #tbp-home-intro .tbp-home-intro__logo { aspect-ratio:1 / 1; } /* 30/9, v8 «Dal logo alla Home» (scelta del CEO, kit rilascio/benvenuto-v8). Il marchio sta sopra le tre righe, nello stesso ordine della Home: alla fine vola nell'intestazione e le righe vanno al loro posto sotto di lui, senza incrociarsi (js/tbp-home-intro.js). Qui solo l'entrata, in CSS, cosi' parte al primo disegno anche se gli script arrivano tardi: marchio intero opacita' 0,3 s + scala 0,94 -> 1 in 1,2 s (curva morbida del sito) tre righe a 0,30 / 0,45 / 0,60 s, 0,6 s, salgono di 12 px nome ToBePolo lettere da sotto la linea di base, 40 ms l'una, da 0,50 s Curva: --tbp-moto-curva, cubic-bezier(.22,1,.36,1). Si animano solo transform e opacity. */ #tbp-home-intro .tbp-home-intro__marchio { display:block; position:relative; margin:0 auto clamp(20px,3.6vh,40px); transform-origin:50% 50%; } #tbp-home-intro .tbp-home-intro__marchio .tbp-home-intro__logo { margin:0 auto; } /* HTML in cache (fino a 10 minuti dopo la pubblicazione) con il vecchio ordine: il marchio in mezzo. */ #tbp-home-intro .tbp-home-intro__marchio:not(:first-child) { margin:clamp(24px,4.5vh,52px) auto clamp(20px,3.6vh,40px); } #tbp-home-intro:focus-visible { outline:none; } /* Uscita di riserva (riduci movimento, o Home senza intestazione riconoscibile): dissolvenza. */ /* 13/10: 0,22 s (prima 0,3). Mentre si dissolve il benvenuto continua a prendere i tocchi (prima pointer-events:none): un secondo tocco, o il clic dello stesso, non deve finire sulla Home sotto. */ #tbp-home-intro { transition:opacity .22s ease; } #tbp-home-intro.is-closing { opacity:0; } /* Nel layer «tbp-appearance», come le regole del tema scuro: fra dichiarazioni !important vince il layer sul non-layer, e a pari layer vince la specificita' (qui piu' alta grazie all'id). */ @layer tbp-appearance { /* 22/9 sera (Elind, dall'app in tema scuro): i testi erano diventati bianchi su bianco, perche' il tema scuro colora tutti i

con !important. Qui il fondo e' sempre bianco, quindi i colori si fissano con la stessa forza; e la gerarchia chiesta: origine semibold, benvenuto black, marchio extra bold, promessa normale, tutto un filo piu' grande. */ /* 12/10 (CEO: «il testo in grassetto "Benvenuto" fa uno strano glitch»). Le tre righe alla fine diventano firma, titolo e promessa della Home: qui hanno gia' lo stesso carattere, lo stesso peso, la stessa spaziatura (in em) e, nel tema chiaro, lo stesso colore di quelle (testata: css/tbp-appearance.css; titolo e promessa: css/tbp-home-map.css), cosi' quando si posano la riga vera prende il loro posto senza che cambi niente. Prima erano: origine 600 spaziata, benvenuto 900 in Schibsted con «ToBePolo» in Oxanium verde e rosso, promessa 400. Si distinguono per misura. */ html #tbp-home-intro .tbp-home-intro__origin, html[data-tbp-theme] #tbp-home-intro .tbp-home-intro__origin { color:#084828 !important; -webkit-text-fill-color:#084828 !important; font-family:var(--tbp-font, "Schibsted Grotesk", sans-serif) !important; font-size:clamp(14px,1.4vw,16px) !important; font-weight:650 !important; line-height:1.4 !important; letter-spacing:normal !important; text-transform:none; } html #tbp-home-intro .tbp-home-intro__welcome, html[data-tbp-theme] #tbp-home-intro .tbp-home-intro__welcome { color:#084828 !important; -webkit-text-fill-color:#084828 !important; font-family:var(--tbp-font-titoli, Figtree, sans-serif) !important; font-size:clamp(26px,3vw,32px) !important; font-weight:800 !important; line-height:1.2 !important; letter-spacing:-.025em !important; } html #tbp-home-intro .tbp-home-intro__claim, html[data-tbp-theme] #tbp-home-intro .tbp-home-intro__claim { color:#2e5d45 !important; -webkit-text-fill-color:#2e5d45 !important; font-family:var(--tbp-font, "Schibsted Grotesk", sans-serif) !important; font-size:clamp(17px,1.8vw,20px) !important; font-weight:500 !important; line-height:1.35 !important; letter-spacing:normal !important; } /* HTML in cache (fino a 10 minuti dopo la pubblicazione): «ToBePolo» e' ancora in lettere separate. Stesso testo della frase. */ html #tbp-home-intro .tbp-home-intro__brand, html #tbp-home-intro .tbp-home-intro__brand b { color:inherit !important; -webkit-text-fill-color:currentColor !important; font:inherit !important; letter-spacing:inherit !important; } html[data-tbp-theme] #tbp-home-intro { background:#fff !important; color:#084828 !important; } /* 30/9, v8: al telefono il benvenuto e la promessa stanno su una riga, come nella Home dove volano alla fine (a 390 px 28 e 17 px, a 375 px 27 e 16,3 px; sotto i 350 px e nelle lingue lunghe vanno a capo da sole, text-wrap: balance). */ @media (max-width: 699px) { html #tbp-home-intro .tbp-home-intro__welcome, html[data-tbp-theme] #tbp-home-intro .tbp-home-intro__welcome { font-size:clamp(21px,6.2vw,25px) !important; } html #tbp-home-intro .tbp-home-intro__claim, html[data-tbp-theme] #tbp-home-intro .tbp-home-intro__claim { font-size:clamp(14px,4.1vw,16px) !important; max-width:none; } html #tbp-home-intro .tbp-home-intro__origin, html[data-tbp-theme] #tbp-home-intro .tbp-home-intro__origin { font-size:clamp(13px,3.6vw,14px) !important; } } } @keyframes tbp-intro-compare { from { opacity:0; } to { opacity:1; } } @keyframes tbp-intro-avvicina { from { transform:scale(.94); } to { transform:none; } } @keyframes tbp-intro-riga { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } } html.tbp-intro-moto #tbp-home-intro:not(.is-visible) .tbp-home-intro__content { opacity:0; } /* 13/10 (CEO: il benvenuto dura 2 secondi al massimo). Stessa entrata, piu' corta; i numeri sono gli stessi di T in js/tbp-home-intro.js (compare, avvicina, righe, durRiga, nome, durNome): marchio intero opacita' 0,22 s + scala 0,94 -> 1 in 0,7 s (prima 0,3 e 1,2 s) tre righe a 0,10 / 0,18 / 0,26 s, 0,42 s, salgono di 12 px (prima 0,30 / 0,45 / 0,60 per 0,6 s) nome ToBePolo da sotto la linea di base, 0,45 s da 0,06 s (prima 0,6 s da 0,15 s) */ html.tbp-intro-moto #tbp-home-intro.is-visible .tbp-home-intro__marchio { animation:tbp-intro-compare .22s linear both, tbp-intro-avvicina .7s cubic-bezier(.22,1,.36,1) both; } html.tbp-intro-moto #tbp-home-intro.is-visible .tbp-home-intro__origin { animation:tbp-intro-riga .42s cubic-bezier(.22,1,.36,1) .1s both; } html.tbp-intro-moto #tbp-home-intro.is-visible .tbp-home-intro__welcome { animation:tbp-intro-riga .42s cubic-bezier(.22,1,.36,1) .18s both; } html.tbp-intro-moto #tbp-home-intro.is-visible .tbp-home-intro__claim { animation:tbp-intro-riga .42s cubic-bezier(.22,1,.36,1) .26s both; } #tbp-home-intro .tbp-home-intro__sr { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } #tbp-home-intro .tbp-home-intro__brand { white-space:nowrap; } #tbp-home-intro .tbp-home-intro__brand .tbp-l { display:inline-block; } /* 12/10: il nome del marchio. Misure dal lockup verticale ufficiale (img/tobepolo-lockup-stacked.svg): il nome e' largo quanto il disegno del pittogramma (92,592 % del riquadro di img/tobepolo-logo.svg, che ha il 9,1975 % vuoto sopra e sotto), alto 1/5,9986 della sua larghezza, e sta a 4,5678 % di quella larghezza dal disegno. Sul riquadro del logo: larghezza 92,592 %, distanza 4,2294 %, quindi il nome entra nel margine vuoto del logo per 4,968 %. «sotto» (data-nome="sotto"): come nel lockup verticale. «sopra»: lo stesso, a specchio. Entra intero, da sotto la sua linea di base, dietro una maschera ferma (come facevano le lettere del nome dentro la frase): si muove solo con transform. Il posto si sceglie in inc/home-intro.php. */ #tbp-home-intro .tbp-home-intro__nome { display:block; position:relative; z-index:2; flex:0 0 auto; width:calc(var(--tbp-intro-logo) * .92592); aspect-ratio:2252.49 / 375.5; margin:calc(var(--tbp-intro-logo) * -.04968) auto clamp(16px,2.8vh,30px); overflow:hidden; transform-origin:50% 50%; } #tbp-home-intro[data-nome="sopra"] .tbp-home-intro__nome { order:-1; margin:clamp(24px,4.5vh,52px) auto calc(var(--tbp-intro-logo) * -.04968); } #tbp-home-intro .tbp-home-intro__nome-sale { display:block; position:absolute; inset:0; } #tbp-home-intro .tbp-home-intro__nome-img { display:block; position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } #tbp-home-intro .tbp-home-intro__nome-img--scuro { opacity:0; } /* con il nome sotto, il margine fra marchio e righe lo porta il nome; con il nome sopra, il margine alto */ #tbp-home-intro[data-nome="sotto"] .tbp-home-intro__marchio:first-child { margin-bottom:0; } #tbp-home-intro[data-nome="sopra"] .tbp-home-intro__marchio:first-child .tbp-home-intro__logo { margin-top:0; } @keyframes tbp-intro-nome { from { transform:translateY(104%); } to { transform:none; } } html.tbp-intro-moto #tbp-home-intro .tbp-home-intro__nome-sale { transform:translateY(104%); } html.tbp-intro-moto #tbp-home-intro.is-visible .tbp-home-intro__nome-sale { animation:tbp-intro-nome .45s cubic-bezier(.22,1,.36,1) .06s both; } /* Quando il canvas disegna stella, chioma e occhio di Marco Polo, il logo nasconde i suoi (zone come nella v7: angolo della stella + chioma fino alla base del tronco, secondo buco per l'occhio). */ #tbp-home-intro.is-tela .tbp-home-intro__logo { clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,78% 0%,100% 0%,100% 57.6%,75.36% 57.6%,73.44% 56.07%,73.44% 49.25%,75.86% 48.41%,76.45% 47.86%,76.86% 47.02%,76.98% 46.19%,76.92% 45.35%,76.45% 43.96%,75.61% 42.57%,74.28% 39.79%,74.28% 38.67%,78.73% 37.56%,78.73% 26.15%,78% 26.15%,78% 0,0 0,63.14% 25.73%,69.68% 25.73%,69.68% 30.74%,63.14% 30.74%,63.14% 25.73%,0 0); } #tbp-home-intro .tbp-home-intro__tela { position:absolute; z-index:1; pointer-events:none; display:block; } /* 30/9 pomeriggio (CEO: «nel tema ToBePolo e in Space Gray il logo e' tagliato»). Il logo del benvenuto resta il file chiaro (lo tengono fermo js/tbp-home-intro.js e data-tbp-marchio-fisso): canvas e buchi del clip-path qui sopra sono misurati su quel file. Il quadrato bianco dei due temi lo disegna questo pseudo-elemento DIETRO il logo, intero e mai ritagliato, con le misure dei file ufficiali: - tema scuro: il quadrato di img/tobepolo-logo-scuro.svg (bianco pieno). Sul fondo bianco non si vede; quando il fondo se ne va (volo verso l'intestazione) i volti restano bianchi, prima erano buchi sul nero e le teste sembravano tagliate. Si posa sul quadrato di tobepolo-lockup-scuro.svg; - tema ToBePolo: il quadrato con il filo verde di img/tobepolo-logo-tessera.svg, come la testata. Posizione: nei file il pittogramma e' translate(302,227 471,529) scale(0,84556); riportato sul logo chiaro (viewBox 160,97 170,29 3593,4) il quadrato 491,11 501,18 2931,62 sta a sinistra 1,7369 %, in alto -3,7631 %, lato 96,4845 %. Il pittogramma resta grande come negli altri temi. */ #tbp-home-intro .tbp-home-intro__marchio .tbp-home-intro__logo { position:relative; z-index:0; } html[data-tbp-theme="dark"] #tbp-home-intro .tbp-home-intro__marchio::before, html[data-tbp-theme="tobepolo"] #tbp-home-intro .tbp-home-intro__marchio::before { content:""; position:absolute; z-index:0; left:1.7369%; top:-3.7631%; width:96.4845%; height:96.4845%; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='491.11 501.18 2931.62 2931.62'%3E%3Crect x='491.11' y='501.18' width='2931.62' height='2931.62' rx='655.8' ry='655.8' fill='%23fff'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } html[data-tbp-theme="tobepolo"] #tbp-home-intro .tbp-home-intro__marchio::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='491.11 501.18 2931.62 2931.62'%3E%3Crect x='513.11' y='523.18' width='2887.62' height='2887.62' rx='633.8' ry='633.8' fill='%23fff' stroke='%23145E3F' stroke-opacity='0.18' stroke-width='44'/%3E%3C/svg%3E"); } /* Tasto della musica: in alto a destra, tondo, 44 px, niente bordo colorato. */ #tbp-home-intro .tbp-home-intro__musica { position:fixed; z-index:2; top:max(12px, calc(env(safe-area-inset-top) + 8px)); right:max(12px, calc(env(safe-area-inset-right) + 8px)); display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; min-height:44px; margin:0; padding:0; border:0; border-radius:50%; background:rgba(8,72,40,.07); color:#084828; box-shadow:none; cursor:pointer; -webkit-tap-highlight-color:transparent; } #tbp-home-intro .tbp-home-intro__musica:focus-visible { outline:2px solid #c9a227; outline-offset:2px; } #tbp-home-intro .tbp-home-intro__musica svg { display:block; width:22px; height:22px; } @layer tbp-appearance { html #tbp-home-intro .tbp-home-intro__musica, html[data-tbp-theme] #tbp-home-intro .tbp-home-intro__musica { background:rgba(8,72,40,.07) !important; color:#084828 !important; border:0 !important; box-shadow:none !important; } } /* 13/10 (CEO: «ha "Salta"»). Il tasto c'e' dal primo fotogramma, fermo (nessuna entrata), fuori dal blocco che compare: in basso al centro, dove arriva il pollice, 48 px di altezza. Sta sopra il margine sicuro dei telefoni. Negli schermi bassi (telefono in orizzontale) in basso toccherebbe la promessa: li' va in alto a destra. Stesso fondo del vecchio tasto della musica (verde al 7 %), niente bordo colorato. Centrato con i margini, non con transform: il «premuto» del sito usa scale e translate. Il fondo del benvenuto e' bianco in tutti e tre i temi, quindi i colori sono gli stessi ovunque. */ #tbp-home-intro .tbp-home-intro__salta { position:fixed; z-index:3; left:0; right:0; bottom:max(28px, calc(env(safe-area-inset-bottom) + 20px)); display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:-moz-fit-content; width:fit-content; min-width:132px; height:48px; min-height:48px; margin:0 auto; padding:0 28px; border:0; border-radius:999px; background:rgba(8,72,40,.07); color:#084828; box-shadow:none; font-family:var(--tbp-font, "Schibsted Grotesk", sans-serif); font-size:16px; font-weight:650; line-height:1; letter-spacing:0; text-transform:none; white-space:nowrap; cursor:pointer; -webkit-tap-highlight-color:transparent; -webkit-appearance:none; appearance:none; } #tbp-home-intro .tbp-home-intro__salta:focus-visible { outline:2px solid #084828; outline-offset:3px; } @media (hover:hover) { #tbp-home-intro .tbp-home-intro__salta:hover { background:rgba(8,72,40,.13); } } @media (max-height:560px) { #tbp-home-intro .tbp-home-intro__salta { left:auto; bottom:auto; top:max(12px, calc(env(safe-area-inset-top) + 8px)); right:max(12px, calc(env(safe-area-inset-right) + 8px)); margin:0; min-width:0; height:44px; min-height:44px; padding:0 20px; } } @layer tbp-appearance { html #tbp-home-intro .tbp-home-intro__salta, html[data-tbp-theme] #tbp-home-intro .tbp-home-intro__salta { background:rgba(8,72,40,.07) !important; color:#084828 !important; -webkit-text-fill-color:#084828 !important; border:0 !important; box-shadow:none !important; font-family:var(--tbp-font, "Schibsted Grotesk", sans-serif) !important; font-size:16px !important; font-weight:650 !important; letter-spacing:0 !important; text-transform:none !important; } @media (hover:hover) { html #tbp-home-intro .tbp-home-intro__salta:hover, html[data-tbp-theme] #tbp-home-intro .tbp-home-intro__salta:hover { background:rgba(8,72,40,.13) !important; } } } /* 30/9, v8: finche' c'e' il benvenuto Colombo non si vede (arriva dopo che il marchio si e' posato, js/tbp-colombo-chat.js); il banner dei cookie aspetta gia' da solo (inc/cookie-consent.php). */ html.tbp-intro-attiva .tbp-colombo-chat { visibility:hidden !important; opacity:0 !important; }