/* PubblicaQui — design system delle pagine pubbliche. Editoriale, pulito, mobile-first. Titoli in Fraunces, testo in Inter (ospitati in /assets/font/). Colori della testata: la pagina imposta --testata, --testata-testo e --testata-accento sull'elemento (src/config/testate.ts, variabiliColore). Tutto il resto usa i token qui sotto: niente colori sparsi. Sezioni: 1 font · 2 token · 3 base · 4 struttura · 5 testata e piede · 6 bottoni · 7 blocchi editoriali · 8 card e prezzi · 9 moduli · 10 passi e calendario · 11 anteprima sul giornale · 12 avvisi e tabelle · 13 utilità */ /* 1 · Font */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/font/Fraunces-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/font/Inter-latin.woff2') format('woff2'); } /* 2 · Token */ :root { --inchiostro: #16181d; --inchiostro-2: #3a3e46; --grigio: #5f6368; --grigio-chiaro: #8a8f98; --linea: #e6e1d6; --linea-forte: #cfc8b8; --carta: #faf8f3; --carta-2: #f2eee4; --bianco: #ffffff; --accento: #e4472b; --accento-scuro: #b8321a; --accento-tenue: #fde9e4; --verde: #1e7a46; --verde-tenue: #e3f3e9; --giallo: #9a6700; --giallo-tenue: #fff4d6; --rosso: #b3261e; --rosso-tenue: #fce8e6; --blu: #1f5fbf; --blu-tenue: #e7effb; /* Testata corrente (valori predefiniti: il marchio) */ --testata: var(--inchiostro); --testata-testo: var(--bianco); --testata-accento: var(--accento); --font-titoli: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-testo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --t-xs: 0.8125rem; --t-s: 0.9375rem; --t-m: 1.0625rem; --t-l: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --t-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); --t-xxl: clamp(2.1rem, 1.5rem + 3vw, 3.6rem); --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --raggio: 10px; --raggio-piccolo: 6px; --ombra: 0 1px 2px rgb(22 24 29 / 0.06), 0 6px 24px rgb(22 24 29 / 0.06); --ombra-forte: 0 2px 4px rgb(22 24 29 / 0.08), 0 16px 40px rgb(22 24 29 / 0.12); --larghezza: 1120px; --larghezza-stretta: 720px; --gutter: 16px; --durata: 160ms; } @media (min-width: 720px) { :root { --gutter: 24px; } } /* 3 · Base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } body { margin: 0; background: var(--carta); color: var(--inchiostro); font-family: var(--font-testo); font-size: var(--t-m); line-height: 1.6; font-feature-settings: 'ss01', 'cv11'; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-titoli); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 var(--s-4); font-variation-settings: 'opsz' 72; text-wrap: balance; } h1 { font-size: var(--t-xxl); font-variation-settings: 'opsz' 144; } h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-l); } h4 { font-size: var(--t-m); font-family: var(--font-testo); letter-spacing: 0; } p, ul, ol, dl, blockquote, figure, table { margin: 0 0 var(--s-4); } ul, ol { padding-left: 1.25em; } li + li { margin-top: var(--s-1); } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--accento-scuro); } strong, b { font-weight: 650; } small { font-size: var(--t-xs); } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--carta-2); padding: 0.1em 0.35em; border-radius: 4px; } hr { border: 0; border-top: 1px solid var(--linea); margin: var(--s-6) 0; } :focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; border-radius: 3px; } ::selection { background: var(--accento-tenue); } /* 4 · Struttura */ .contenitore { width: 100%; max-width: calc(var(--larghezza) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .contenitore.stretto { max-width: calc(var(--larghezza-stretta) + 2 * var(--gutter)); } .sezione { padding-block: var(--s-7); } .sezione-tenue { background: var(--carta-2); } .sezione-scura { background: var(--inchiostro); color: var(--carta); } .sezione-scura a:hover { color: var(--bianco); } @media (min-width: 900px) { .sezione { padding-block: var(--s-8); } } .griglia { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .griglia-2 { display: grid; gap: var(--s-5); } @media (min-width: 860px) { .griglia-2 { grid-template-columns: 1fr 1fr; align-items: start; } } .impila > * + * { margin-top: var(--s-4); } .salta-contenuto { position: absolute; left: var(--s-2); top: -100px; z-index: 100; background: var(--inchiostro); color: var(--bianco); padding: var(--s-2) var(--s-4); border-radius: var(--raggio-piccolo); } .salta-contenuto:focus { top: var(--s-2); color: var(--bianco); } /* 5 · Testata del sito e piede */ .barra-attivazione { background: var(--giallo-tenue); color: #5c3d00; font-size: var(--t-s); text-align: center; padding: var(--s-2) var(--gutter); border-bottom: 1px solid #f1dfa6; } .barra-prova { background: var(--blu-tenue); color: #123a75; font-size: var(--t-xs); text-align: center; padding: var(--s-1) var(--gutter); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; } .intestazione { position: sticky; top: 0; z-index: 20; background: rgb(250 248 243 / 0.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linea); } .intestazione .contenitore { display: flex; align-items: center; gap: var(--s-4); min-height: 64px; } .marchio { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; color: var(--inchiostro); font-family: var(--font-titoli); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; font-variation-settings: 'opsz' 48; } .marchio img { width: 32px; height: 32px; } .marchio em { font-style: normal; color: var(--accento); } .marchio:hover { color: var(--inchiostro); } .navigazione { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); } .navigazione-voci { display: none; list-style: none; margin: 0; padding: 0; gap: var(--s-1); } .navigazione-voci a { display: inline-block; padding: var(--s-2) var(--s-3); border-radius: var(--raggio-piccolo); text-decoration: none; font-size: var(--t-s); font-weight: 500; color: var(--inchiostro-2); } .navigazione-voci a:hover, .navigazione-voci a[aria-current='page'] { color: var(--inchiostro); background: var(--carta-2); } @media (min-width: 880px) { .navigazione-voci { display: flex; } .menu-mobile { display: none; } } .menu-mobile { position: relative; } .menu-mobile summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--raggio-piccolo); border: 1px solid var(--linea); background: var(--bianco); } .menu-mobile summary::-webkit-details-marker { display: none; } .menu-mobile summary span, .menu-mobile summary span::before, .menu-mobile summary span::after { display: block; width: 18px; height: 2px; background: var(--inchiostro); position: relative; content: ''; } .menu-mobile summary span::before { position: absolute; top: -6px; } .menu-mobile summary span::after { position: absolute; top: 6px; } .menu-mobile[open] summary { background: var(--carta-2); } .menu-mobile ul { position: absolute; right: 0; top: calc(100% + var(--s-2)); min-width: 220px; list-style: none; margin: 0; padding: var(--s-2); background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: var(--ombra-forte); } .menu-mobile li + li { margin-top: 0; } .menu-mobile a { display: block; padding: var(--s-3); text-decoration: none; border-radius: var(--raggio-piccolo); } .menu-mobile a:hover { background: var(--carta-2); } .piede { background: var(--inchiostro); color: #d9d5cc; font-size: var(--t-s); padding-block: var(--s-7) var(--s-6); margin-top: var(--s-7); } .piede a { color: #f1ede4; } .piede a:hover { color: var(--bianco); } .piede .marchio { color: var(--bianco); } .piede-griglia { display: grid; gap: var(--s-6); } @media (min-width: 760px) { .piede-griglia { grid-template-columns: 2fr 1fr 1fr; } } .piede h2 { font-family: var(--font-testo); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--grigio-chiaro); margin-bottom: var(--s-3); } .piede ul { list-style: none; padding: 0; } .piede-legale { border-top: 1px solid #2d3038; margin-top: var(--s-6); padding-top: var(--s-4); font-size: var(--t-xs); color: var(--grigio-chiaro); } /* 6 · Bottoni */ .bottone { --b-sfondo: var(--bianco); --b-testo: var(--inchiostro); --b-bordo: var(--linea-forte); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: var(--s-3) var(--s-5); border: 1px solid var(--b-bordo); border-radius: 999px; background: var(--b-sfondo); color: var(--b-testo); font: 600 var(--t-s) / 1.2 var(--font-testo); text-decoration: none; cursor: pointer; transition: transform var(--durata), background var(--durata), box-shadow var(--durata), border-color var(--durata); -webkit-tap-highlight-color: transparent; } .bottone:hover { color: var(--b-testo); border-color: var(--inchiostro); box-shadow: var(--ombra); } .bottone:active { transform: translateY(1px); } .bottone-primario { --b-sfondo: var(--accento); --b-testo: var(--bianco); --b-bordo: var(--accento); } .bottone-primario:hover { --b-sfondo: var(--accento-scuro); border-color: var(--accento-scuro); } .bottone-scuro { --b-sfondo: var(--inchiostro); --b-testo: var(--bianco); --b-bordo: var(--inchiostro); } .bottone-scuro:hover { --b-sfondo: #000; } .bottone-testata { --b-sfondo: var(--testata); --b-testo: var(--testata-testo); --b-bordo: var(--testata); } .bottone-testata:hover { filter: brightness(0.92); border-color: var(--testata); } .bottone-secondario { --b-sfondo: transparent; } .bottone-grande { min-height: 56px; padding-inline: var(--s-6); font-size: var(--t-m); } .bottone-piccolo { min-height: 36px; padding: var(--s-1) var(--s-4); font-size: var(--t-xs); } .bottone-pieno { width: 100%; } .bottone-testo { border-color: transparent; background: transparent; padding-inline: var(--s-2); text-decoration: underline; } .bottone-testo:hover { box-shadow: none; border-color: transparent; } .bottone[disabled], .bottone[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; } .azioni { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .azioni-centrate { justify-content: center; } /* 7 · Blocchi editoriali */ .eroe { padding-block: var(--s-7) var(--s-6); position: relative; } @media (min-width: 900px) { .eroe { padding-block: var(--s-8); } } .eroe h1 { max-width: 16ch; } .eroe h1 em { font-style: italic; color: var(--accento); font-weight: 500; } .eroe .sottotitolo { font-size: var(--t-l); color: var(--inchiostro-2); max-width: 40ch; line-height: 1.45; } .occhiello { display: inline-block; font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accento-scuro); margin-bottom: var(--s-3); } .titolo-sezione { max-width: 28ch; } .introduzione { font-size: var(--t-l); color: var(--inchiostro-2); max-width: 60ch; } .testo-lungo { max-width: 68ch; } .testo-lungo h2 { margin-top: var(--s-6); font-size: var(--t-l); } .passi-lista { counter-reset: passo; list-style: none; padding: 0; display: grid; gap: var(--s-4); } @media (min-width: 760px) { .passi-lista { grid-template-columns: repeat(4, 1fr); } } .passi-lista li { counter-increment: passo; margin: 0; padding-top: var(--s-4); border-top: 2px solid var(--inchiostro); } .passi-lista li::before { content: counter(passo, decimal-leading-zero); display: block; font-family: var(--font-titoli); font-size: var(--t-xl); color: var(--accento); line-height: 1; margin-bottom: var(--s-2); } .faq details { border-bottom: 1px solid var(--linea); padding-block: var(--s-3); } .faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-2); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; font-size: 1.4em; line-height: 1; color: var(--accento); } .faq details[open] summary::after { content: '−'; } .faq details p { color: var(--inchiostro-2); } /* 8 · Card, testate, prezzi, etichette */ .scheda { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--s-5); box-shadow: var(--ombra); } .scheda > :last-child { margin-bottom: 0; } .scheda-testata { position: relative; overflow: hidden; padding-top: calc(var(--s-5) + 6px); } .scheda-testata::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: var(--testata); } .scheda-testata .dominio { font-size: var(--t-xs); color: var(--grigio); text-transform: lowercase; } .nome-testata { font-family: var(--font-titoli); font-weight: 700; font-size: var(--t-l); margin: 0; letter-spacing: -0.02em; } a.scheda { display: block; text-decoration: none; transition: transform var(--durata), box-shadow var(--durata); } a.scheda:hover { transform: translateY(-2px); box-shadow: var(--ombra-forte); color: inherit; } .scheda-formato { display: flex; flex-direction: column; } .scheda-formato ul { list-style: none; padding: 0; margin-bottom: var(--s-5); } .scheda-formato li { padding-left: 1.5em; position: relative; } .scheda-formato li::before { content: ''; position: absolute; left: 0.2em; top: 0.55em; width: 0.55em; height: 0.3em; border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(-45deg); } .scheda-formato .azioni { margin-top: auto; } .scheda-formato .badge { align-self: flex-start; } .scheda-evidenza { border-color: var(--inchiostro); box-shadow: var(--ombra-forte); } .prezzo { font-family: var(--font-titoli); font-weight: 700; font-size: var(--t-xl); line-height: 1; letter-spacing: -0.02em; font-variation-settings: 'opsz' 96; } .prezzo small { font-family: var(--font-testo); font-size: var(--t-xs); font-weight: 500; color: var(--grigio); letter-spacing: 0; } .prezzo-barrato { color: var(--grigio); text-decoration: line-through; font-size: var(--t-s); margin-left: var(--s-2); } .badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0.15em 0.6em; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; background: var(--carta-2); color: var(--inchiostro-2); white-space: nowrap; } .badge-lancio { background: var(--accento-tenue); color: var(--accento-scuro); } .badge-verde { background: var(--verde-tenue); color: var(--verde); } .badge-giallo { background: var(--giallo-tenue); color: var(--giallo); } .badge-rosso { background: var(--rosso-tenue); color: var(--rosso); } .etichetta-sponsor { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.2em 0.55em; border-radius: 3px; background: var(--testata); color: var(--testata-testo); } .pallino-testata { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--testata); vertical-align: 0.05em; } /* 9 · Moduli */ .modulo { display: grid; gap: var(--s-5); } .campo { display: grid; gap: var(--s-2); } .campo > label, .campo > .etichetta-campo, fieldset > legend { font-weight: 600; font-size: var(--t-s); } fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } fieldset > legend { padding: 0; margin-bottom: var(--s-3); } .facoltativo { font-weight: 400; color: var(--grigio); } input[type='text'], input[type='email'], input[type='tel'], input[type='url'], input[type='number'], input[type='date'], input[type='password'], input[type='search'], select, textarea { width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4); font: 400 1rem / 1.4 var(--font-testo); color: var(--inchiostro); background: var(--bianco); border: 1px solid var(--linea-forte); border-radius: var(--raggio-piccolo); transition: border-color var(--durata), box-shadow var(--durata); appearance: none; -webkit-appearance: none; } textarea { min-height: 160px; resize: vertical; line-height: 1.55; } select { background-image: linear-gradient(45deg, transparent 50%, var(--inchiostro) 50%), linear-gradient(135deg, var(--inchiostro) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: var(--s-6); } input:hover, select:hover, textarea:hover { border-color: var(--grigio-chiaro); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--inchiostro); box-shadow: 0 0 0 3px rgb(31 95 191 / 0.25); } input[aria-invalid='true'], select[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--rosso); } .aiuto { font-size: var(--t-xs); color: var(--grigio); margin: 0; } .errore-campo { font-size: var(--t-xs); color: var(--rosso); font-weight: 600; margin: 0; } .contatore { font-size: var(--t-xs); color: var(--grigio); text-align: right; } .spunta { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-s); } .spunta input { width: 22px; height: 22px; margin-top: 0.1em; flex: none; accent-color: var(--inchiostro); } .scelte { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .scelta { position: relative; display: block; cursor: pointer; } .scelta input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .scelta .scelta-corpo { display: block; height: 100%; background: var(--bianco); border: 1.5px solid var(--linea-forte); border-radius: var(--raggio); padding: var(--s-4); transition: border-color var(--durata), box-shadow var(--durata), transform var(--durata); } .scelta:hover .scelta-corpo { border-color: var(--grigio-chiaro); } .scelta input:checked + .scelta-corpo { border-color: var(--testata); box-shadow: 0 0 0 2px var(--testata), var(--ombra); } .scelta input:focus-visible + .scelta-corpo { outline: 3px solid var(--blu); outline-offset: 2px; } .scelta input:disabled + .scelta-corpo { opacity: 0.45; cursor: not-allowed; } .esca { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; } .caricamento-foto { border: 2px dashed var(--linea-forte); border-radius: var(--raggio); padding: var(--s-5); text-align: center; background: var(--bianco); } .caricamento-foto.trascina { border-color: var(--testata); background: var(--carta-2); } .miniature { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .miniature img { aspect-ratio: 1; object-fit: cover; border-radius: var(--raggio-piccolo); width: 100%; } /* 10 · Passi del modulo e calendario */ .avanzamento { display: flex; gap: var(--s-1); list-style: none; padding: 0; margin: 0 0 var(--s-5); counter-reset: av; } .avanzamento li { flex: 1; margin: 0; height: 4px; border-radius: 2px; background: var(--linea); } .avanzamento li.fatto, .avanzamento li[aria-current='step'] { background: var(--testata); } .avanzamento-testo { font-size: var(--t-xs); color: var(--grigio); margin-bottom: var(--s-2); } .passo-modulo { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--s-5); box-shadow: var(--ombra); } .passo-modulo h2 { font-size: var(--t-l); } .navigazione-passi { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--linea); } .barra-mobile { position: sticky; bottom: 0; z-index: 10; background: var(--bianco); border-top: 1px solid var(--linea); padding: var(--s-3) var(--gutter); box-shadow: 0 -4px 16px rgb(22 24 29 / 0.06); } .calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .calendario-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); } .calendario-testa h3 { margin: 0; font-size: var(--t-m); text-transform: capitalize; } .calendario .nome-giorno { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grigio); text-align: center; padding-block: var(--s-1); } .giorno { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--raggio-piccolo); border: 1px solid transparent; background: var(--bianco); font: 600 var(--t-s) / 1 var(--font-testo); color: var(--inchiostro); cursor: pointer; padding: 2px; } .giorno small { font-weight: 500; font-size: 0.62rem; color: var(--verde); margin-top: 3px; } .giorno:hover { border-color: var(--inchiostro); } .giorno[aria-pressed='true'], .giorno.scelto { background: var(--testata); color: var(--testata-testo); border-color: var(--testata); } .giorno[aria-pressed='true'] small, .giorno.scelto small { color: var(--testata-testo); } .giorno:disabled, .giorno.non-disponibile { background: transparent; color: var(--grigio-chiaro); cursor: not-allowed; text-decoration: line-through; border-color: transparent; } .giorno.pieno small { color: var(--rosso); } .giorno.vuoto { visibility: hidden; } .legenda { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--t-xs); color: var(--grigio); margin-top: var(--s-3); } /* 11 · Anteprima sul giornale (card nei colori della testata) */ .anteprima-giornale { background: var(--bianco); border-radius: var(--raggio); overflow: hidden; border: 1px solid var(--linea); box-shadow: var(--ombra-forte); } .anteprima-giornale .barra-giornale { background: var(--testata); color: var(--testata-testo); padding: var(--s-2) var(--s-4); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .anteprima-giornale .barra-giornale strong { font-family: var(--font-titoli); font-size: 1.15rem; letter-spacing: -0.01em; } .anteprima-giornale .barra-giornale span { font-size: var(--t-xs); opacity: 0.85; } .anteprima-giornale .corpo-giornale { padding: var(--s-5); } .anteprima-giornale .foto-giornale { aspect-ratio: 16 / 9; background: var(--carta-2); object-fit: cover; width: 100%; } .anteprima-giornale h3 { font-size: var(--t-l); margin: var(--s-3) 0 var(--s-2); } .anteprima-giornale .sommario { color: var(--inchiostro-2); font-size: var(--t-s); } .anteprima-giornale .data-giornale { font-size: var(--t-xs); color: var(--grigio); } .contenuto-pubblicato .pq-etichetta { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--testata-accento); } .contenuto-pubblicato .pq-citazione { border-left: 3px solid var(--testata); margin-inline: 0; padding-left: var(--s-4); font-family: var(--font-titoli); font-size: var(--t-l); } .contenuto-pubblicato .pq-citazione cite { display: block; font-family: var(--font-testo); font-size: var(--t-xs); font-style: normal; color: var(--grigio); margin-top: var(--s-2); } .contenuto-pubblicato .pq-nota-ai { font-size: var(--t-xs); color: var(--grigio); } /* 12 · Avvisi e tabelle */ .avviso { border-radius: var(--raggio-piccolo); padding: var(--s-3) var(--s-4); border: 1px solid var(--linea); background: var(--bianco); font-size: var(--t-s); } .avviso > :last-child { margin-bottom: 0; } .avviso-info { background: var(--blu-tenue); border-color: #c5d6f3; color: #143d7a; } .avviso-ok { background: var(--verde-tenue); border-color: #bfe3cd; color: #145a33; } .avviso-attenzione { background: var(--giallo-tenue); border-color: #f1dfa6; color: #5c3d00; } .avviso-errore { background: var(--rosso-tenue); border-color: #f4c7c3; color: #8c1d18; } .tabella-riepilogo { width: 100%; border-collapse: collapse; font-size: var(--t-s); } .tabella-riepilogo th, .tabella-riepilogo td { padding: var(--s-2) 0; border-bottom: 1px solid var(--linea); vertical-align: top; } .tabella-riepilogo th { text-align: left; font-weight: 500; color: var(--inchiostro-2); padding-right: var(--s-4); } .tabella-riepilogo td { text-align: right; font-variant-numeric: tabular-nums; } .tabella-riepilogo .totale th, .tabella-riepilogo .totale td { font-weight: 700; color: var(--inchiostro); border-bottom: 0; font-size: var(--t-m); padding-top: var(--s-3); } .dicitura { font-size: var(--t-xs); color: var(--grigio); } .tabella-scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Pagina di pagamento finta (MODALITA_PROVA) */ .etichetta-prova { display: inline-block; background: var(--blu); color: var(--bianco); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; padding: var(--s-1) var(--s-3); border-radius: 999px; } .azioni-prova { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); } /* Pagine d'errore */ .errore-pagina { text-align: center; padding-block: var(--s-8); } .errore-pagina .codice { font-family: var(--font-titoli); font-size: clamp(4rem, 3rem + 6vw, 8rem); line-height: 1; color: var(--accento); margin: 0; } /* 13 · Utilità */ .solo-lettori { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .centrato { text-align: center; } .centrato .introduzione, .centrato .titolo-sezione { margin-inline: auto; } .tenue { color: var(--grigio); } .piccolo { font-size: var(--t-s); } .minuscolo { font-size: var(--t-xs); } .senza-margine { margin: 0; } .spazio-sopra { margin-top: var(--s-6); } .spazio-sotto { margin-bottom: var(--s-6); } .nascosto { display: none !important; } .lista-semplice { list-style: none; padding: 0; } .lista-semplice li + li { margin-top: 0; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════════ A · Sito pubblico (agente A): componenti, home, pagine delle testate, anteprima sul giornale, pagine del cliente. ═══════════════════════════════════════════════════════════════════════════════════════════════════ */ /* A · componenti */ .icona { width: 1.35em; height: 1.35em; flex: none; display: inline-block; vertical-align: -0.28em; } .icona-mini { width: 0.95em; height: 0.95em; vertical-align: -0.12em; } .icona-piccola { width: 1.1em; height: 1.1em; vertical-align: -0.18em; } .icona-grande { width: 2rem; height: 2rem; } .icona-spunta { color: var(--verde); width: 1.05em; height: 1.05em; margin-top: 0.25em; stroke-width: 2.6; } .bottone .icona { width: 1.15em; height: 1.15em; } .bottone-chiaro { --b-sfondo: var(--bianco); --b-testo: var(--inchiostro); --b-bordo: var(--bianco); } .bottone-chiaro:hover { --b-sfondo: #f3f0e8; border-color: var(--bianco); box-shadow: 0 10px 30px rgb(0 0 0 / 0.25); } .bottone-vetro { --b-sfondo: rgb(255 255 255 / 0.08); --b-testo: var(--bianco); --b-bordo: rgb(255 255 255 / 0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .bottone-vetro:hover { --b-sfondo: rgb(255 255 255 / 0.16); color: var(--bianco); border-color: rgb(255 255 255 / 0.6); } .bottone-rotondo { width: 40px; min-width: 40px; padding: 0; font-size: 1.3rem; } .bottone.in-corso { opacity: 0.7; cursor: progress; } .occhiello-chiaro { color: #ffb4a6; } /* Wordmark delle testate */ .mt { display: inline-flex; align-items: baseline; font-weight: 800; font-size: 1.4rem; line-height: 1; letter-spacing: -0.035em; white-space: nowrap; } .mt b { font-weight: inherit; color: var(--testata); } .mt i { font-style: normal; color: var(--testata-accento); } .mt-serif { font-family: var(--font-titoli); font-weight: 700; letter-spacing: -0.02em; font-variation-settings: 'opsz' 72; } .mt-sans { font-family: var(--font-testo); } .mt-insider i { color: var(--testata); opacity: 0.55; } .mt-rimini i, .mt-olbia i { color: var(--inchiostro); } .mt-chiaro b { color: var(--bianco); } .mt-chiaro i { color: rgb(255 255 255 / 0.72); opacity: 1; } .mt-parma.mt-chiaro i { color: #f5a11d; } .testo-testata { color: var(--testata); } .lista-spunte { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-2); } .lista-spunte li { display: flex; gap: var(--s-2); margin: 0; font-size: var(--t-s); line-height: 1.45; } .lista-compatta { gap: 2px; margin-bottom: var(--s-3); } .lista-compatta li { font-size: var(--t-xs); } .garanzie { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-xs); color: var(--inchiostro-2); } .garanzie li { margin: 0; display: inline-flex; align-items: center; gap: var(--s-2); } .garanzie .icona { color: var(--verde); } .garanzie-chiare { color: #cfd3db; } .garanzie-chiare .icona { color: #7ee2a8; } .testa-sezione { margin-bottom: var(--s-6); } .testa-sezione .introduzione { margin-bottom: 0; } /* A · home: copertina scura con l'edicola delle testate in vendita (edicola-1 … edicola-4) */ .copertina { position: relative; overflow: hidden; isolation: isolate; background: #0b0d12; color: #eceef2; } .copertina-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .copertina-luce { position: absolute; inset: -20% -10%; background: radial-gradient(40% 45% at 12% 18%, rgb(0 82 255 / 0.34), transparent 70%), radial-gradient(38% 42% at 88% 12%, rgb(200 16 46 / 0.30), transparent 70%), radial-gradient(40% 45% at 78% 92%, rgb(10 125 148 / 0.30), transparent 70%), radial-gradient(34% 40% at 30% 96%, rgb(245 161 29 / 0.20), transparent 70%); filter: blur(10px); animation: respira 18s ease-in-out infinite alternate; } .copertina-trama { position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 25%, transparent 80%); } @keyframes respira { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(2%, -2%, 0); } } .copertina-griglia { display: grid; gap: var(--s-7); align-items: center; padding-block: var(--s-7) var(--s-8); } @media (min-width: 960px) { .copertina-griglia { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding-block: var(--s-8); min-height: min(760px, calc(100svh - 64px)); } } .copertina h1 { color: var(--bianco); font-size: clamp(2.3rem, 1.4rem + 4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.035em; max-width: 13ch; margin-bottom: var(--s-5); } .copertina h1 em { font-style: italic; font-weight: 500; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(100deg, #7fa6ff 0%, #ff8a73 55%, #ffd27a 100%); -webkit-background-clip: text; background-clip: text; padding-right: 0.06em; } .copertina-occhiello { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 14px 6px 10px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.16); background: rgb(255 255 255 / 0.05); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.02em; color: #d6d9e0; margin-bottom: var(--s-5); } .punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgb(61 220 132 / 0.6); animation: pulsa 2.2s ease-out infinite; } @keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgb(61 220 132 / 0.55); } 80%, 100% { box-shadow: 0 0 0 10px rgb(61 220 132 / 0); } } .copertina-attacco { font-size: var(--t-l); line-height: 1.5; color: #b9bec9; max-width: 44ch; margin-bottom: var(--s-6); } .copertina .briciole a, .copertina .briciole { color: #b9bec9; } .edicola { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } .prima-pagina { position: relative; background: #fbfaf7; color: var(--inchiostro); border-radius: 10px; padding: 12px; box-shadow: 0 24px 60px rgb(0 0 0 / 0.45), 0 2px 6px rgb(0 0 0 / 0.3); display: grid; gap: 8px; align-content: start; min-width: 0; } .pp-testata { display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid #e3ded2; padding-bottom: 6px; min-width: 0; } .pp-testata .mt { font-size: 1.05rem; } .pp-testata small { font-size: 0.55rem; color: var(--grigio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-menu { display: flex; gap: 6px; background: var(--testata); border-radius: 3px; padding: 4px 6px; overflow: hidden; } .pp-menu span { font-size: 0.5rem; font-weight: 700; color: var(--testata-testo); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .pp-foto { display: block; aspect-ratio: 16 / 9; border-radius: 4px; background: linear-gradient(135deg, color-mix(in srgb, var(--testata) 55%, #fff), color-mix(in srgb, var(--testata) 20%, #fff)); } .pp-titolo, .pp-righe span, .pp-colonne span, .pp-linea { display: block; height: 7px; border-radius: 3px; background: #2b2f38; } .pp-titolo { height: 9px; margin-top: 6px; } .pp-corto { width: 62%; } .pp-apertura { display: grid; gap: 4px; } .pp-righe { display: grid; gap: 4px; } .pp-righe span { background: #cfcabd; height: 5px; } .pp-colonne { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .pp-colonne span { height: 26px; background: linear-gradient(#cfcabd 0 5px, transparent 5px 9px, #e4dfd3 9px 14px, transparent 14px 18px, #e4dfd3 18px 23px, transparent 23px); } .pp-sponsor { border: 2px solid var(--accento); border-radius: 6px; padding: 8px; display: grid; gap: 4px; background: #fff7f4; box-shadow: 0 0 0 4px rgb(228 71 43 / 0.12); } .pp-sponsor .etichetta-sponsor { justify-self: start; font-size: 0.5rem; background: var(--accento); color: #fff; } .pp-sponsor strong { font-family: var(--font-titoli); font-size: 0.95rem; line-height: 1.1; } .pp-sponsor .pp-linea { background: #d9c7c0; height: 5px; } .edicola-bollino { display: none; } @media (max-width: 959px) { .pp-3, .pp-4 { display: none; } .edicola-1 { grid-template-columns: minmax(0, 20rem); } } @media (min-width: 960px) { .edicola { display: block; height: 540px; } .prima-pagina { position: absolute; width: 58%; max-width: 300px; animation: galleggia 9s ease-in-out infinite alternate; } .pp-1 { top: 0; left: 0; transform: rotate(-7deg); z-index: 1; } .pp-2 { top: 64px; left: 24%; transform: rotate(2deg); z-index: 4; animation-delay: -3s; } .pp-3 { top: 16px; right: 0; transform: rotate(8deg); z-index: 2; animation-delay: -5s; } .pp-4 { bottom: 0; right: 10%; transform: rotate(-3deg); z-index: 3; animation-delay: -7s; } /* Due prime pagine: una a sinistra e una a destra, sfalsate; il bollino resta in basso a sinistra */ .edicola-2 { height: 500px; } .edicola-2 .pp-1 { top: 8px; left: 0; width: 60%; transform: rotate(-6deg); z-index: 1; } .edicola-2 .pp-2 { top: 96px; left: auto; right: 0; width: 60%; transform: rotate(4deg); z-index: 4; } /* Una sola: al centro */ .edicola-1 { height: 460px; } .edicola-1 .pp-1 { top: 24px; left: 50%; width: 64%; transform: translateX(-50%) rotate(-3deg); } .edicola-bollino { position: absolute; z-index: 5; left: 2%; bottom: 40px; width: 132px; height: 132px; border-radius: 50%; background: var(--accento); color: #fff; display: grid; place-items: center; align-content: center; text-align: center; font-size: 0.72rem; line-height: 1.12; transform: rotate(-10deg); box-shadow: 0 18px 40px rgb(228 71 43 / 0.45); padding: 16px; } .edicola-bollino .icona { width: 22px; height: 22px; margin: 0 auto 2px; } .edicola-bollino b { font-family: var(--font-titoli); font-size: 0.92rem; font-weight: 700; } } @keyframes galleggia { from { translate: 0 0; } to { translate: 0 -10px; } } .nastro-lancio { background: linear-gradient(90deg, #fff1ec, #fff8e8); border-block: 1px solid #f3d9cf; } .nastro-lancio p { margin: 0; padding-block: var(--s-3); font-size: var(--t-s); text-align: center; } .nastro-lancio .badge { margin-right: var(--s-2); } .nastro-lancio a { font-weight: 700; color: var(--accento-scuro); } /* Card delle testate */ .griglia-giornali { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } .scheda-giornale { background: var(--bianco); border-radius: var(--raggio); overflow: hidden; border: 1px solid var(--linea); box-shadow: var(--ombra); display: flex; flex-direction: column; transition: transform var(--durata), box-shadow var(--durata); } .scheda-giornale:hover { transform: translateY(-3px); box-shadow: var(--ombra-forte); } .scheda-giornale-testa { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5) var(--s-4) var(--s-4); background: var(--testata); border-bottom: 3px solid var(--testata-accento); text-decoration: none; position: relative; overflow: hidden; } .scheda-giornale-testa::after { content: ''; position: absolute; inset: auto -20% -60% 40%; height: 140%; background: radial-gradient(circle, rgb(255 255 255 / 0.18), transparent 60%); } .scheda-giornale-testa .mt { font-size: 1.6rem; } .scheda-giornale-dominio { font-size: var(--t-xs); color: rgb(255 255 255 / 0.8); letter-spacing: 0.02em; } .scheda-giornale-corpo { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; } .scheda-giornale-corpo p { margin: 0; } .scheda-giornale-motto { font-family: var(--font-titoli); font-style: italic; font-size: var(--t-m); line-height: 1.3; } .scheda-giornale-zona { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--testata); display: flex; gap: var(--s-1); align-items: center; } .scheda-giornale-piede { margin-top: auto; padding-top: var(--s-3); display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); border-top: 1px solid var(--linea); } .scheda-giornale-prezzo { font-weight: 700; font-size: var(--t-m); } .scheda-giornale-prezzo small { color: var(--grigio); font-weight: 500; } /* Formati e listino */ .griglia-formati { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); align-items: stretch; } .scheda-formato-grande { position: relative; background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; padding: var(--s-6) var(--s-5) var(--s-5); display: flex; flex-direction: column; box-shadow: var(--ombra); } .scheda-formato-grande h3 { font-size: var(--t-l); margin: var(--s-3) 0 var(--s-1); } .scheda-formato-grande .badge { align-self: flex-start; } .scheda-formato-grande .bottone { margin-top: auto; } .scheda-formato-grande.in-evidenza { border: 2px solid var(--inchiostro); box-shadow: var(--ombra-forte); } @media (min-width: 1000px) { .scheda-formato-grande.in-evidenza { transform: translateY(-10px); } } .nastrino { position: absolute; top: -13px; right: var(--s-5); margin: 0; background: var(--inchiostro); color: var(--bianco); font-size: var(--t-xs); font-weight: 700; padding: 4px 12px; border-radius: 999px; letter-spacing: 0.02em; } .prezzo-formato { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin: var(--s-4) 0; } .prezzo-formato .prezzo { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem); } .prezzo-formato .badge { white-space: normal; } .formato-testate { display: flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); color: var(--grigio); margin: 0 0 var(--s-3); } .pallino { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--testata); box-shadow: 0 0 0 2px var(--bianco); } .pallino + .pallino { margin-left: -6px; } .formato-tempi { font-size: var(--t-xs); color: var(--grigio); display: flex; gap: var(--s-1); align-items: center; } .titolo-listino { margin-top: var(--s-7); font-size: var(--t-l); } .listino { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); } .listino table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: var(--t-s); margin: 0; } .listino th, .listino td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--linea); text-align: center; white-space: nowrap; } .listino thead th { background: var(--carta); font-weight: 600; } .listino thead .mt { font-size: 1rem; } .listino tbody th { text-align: left; font-weight: 650; } .listino tbody th small { display: block; font-weight: 500; color: var(--grigio); font-size: var(--t-xs); } .listino tbody tr:last-child > * { border-bottom: 0; } .listino td strong { font-size: var(--t-m); } .listino td s { color: var(--grigio); font-size: var(--t-xs); margin-left: 4px; } .listino-lancio { color: var(--accento-scuro); } .listino-vuoto { color: var(--grigio-chiaro); } /* Come funziona */ .passi-come { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .passi-come li { position: relative; margin: 0; padding: var(--s-5); background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden; } .passi-come li .icona { color: var(--accento); margin-bottom: var(--s-3); position: relative; } .passi-come h3 { font-size: var(--t-l); margin-bottom: var(--s-2); position: relative; } .passi-come p { margin: 0; color: var(--inchiostro-2); font-size: var(--t-s); position: relative; } .passi-come-numero { position: absolute; top: 6px; right: 14px; font-family: var(--font-titoli); font-size: 3.4rem; font-weight: 700; line-height: 1; color: var(--carta-2); } /* Esempio su fondo scuro */ .sezione-scura { background: #0e1016; } .sezione-scura h2 { color: var(--bianco); } .esempio-griglia { display: grid; gap: var(--s-7); align-items: center; } @media (min-width: 960px) { .esempio-griglia { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } } .esempio-testo > p { color: #b9bec9; font-size: var(--t-m); } .lista-note { list-style: none; padding: 0; margin: var(--s-5) 0 var(--s-6); display: grid; gap: var(--s-3); } .lista-note li { display: flex; gap: var(--s-3); margin: 0; color: #d9dce3; font-size: var(--t-s); } .lista-note .icona { color: #ff8a73; margin-top: 2px; } .lista-note b { color: var(--bianco); } /* Regole */ .regole-griglia { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .regola { padding: var(--s-5); border-radius: var(--raggio); background: var(--bianco); border: 1px solid var(--linea); } .regola .icona { color: var(--inchiostro); background: var(--carta-2); border-radius: 12px; padding: 8px; width: 44px; height: 44px; margin-bottom: var(--s-3); } .regola h3 { font-size: var(--t-m); font-family: var(--font-testo); font-weight: 700; margin-bottom: var(--s-2); letter-spacing: 0; } .regola p { margin: 0; font-size: var(--t-s); color: var(--inchiostro-2); } .settori-esclusi { margin-top: var(--s-5); border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--s-3) var(--s-5); background: var(--bianco); } .settori-esclusi summary { cursor: pointer; font-weight: 650; padding-block: var(--s-2); } .settori-lista { columns: 2 220px; margin: var(--s-3) 0; } .settori-lista li { break-inside: avoid; font-size: var(--t-s); } /* Banda finale */ .banda-cta { background: linear-gradient(120deg, var(--testata) 0%, color-mix(in srgb, var(--testata) 65%, #000) 100%); color: var(--testata-testo); } .banda-cta:not([style]) { background: linear-gradient(120deg, #e4472b 0%, #b8321a 60%, #7d1f10 100%); color: #fff; } .banda-cta-dentro { display: grid; gap: var(--s-5); align-items: center; padding-block: var(--s-7); } @media (min-width: 860px) { .banda-cta-dentro { grid-template-columns: 1fr auto; } } .banda-cta h2 { color: inherit; margin-bottom: var(--s-2); } .banda-cta p { margin: 0; opacity: 0.9; max-width: 56ch; } .pagina-home .piede, .pagina-testata .piede { margin-top: 0; } /* A · pagine delle testate */ .copertina-testata { background: color-mix(in srgb, var(--testata) 82%, #000); } .copertina-testata .copertina-luce { background: radial-gradient(45% 55% at 20% 20%, rgb(255 255 255 / 0.18), transparent 70%), radial-gradient(40% 50% at 90% 90%, rgb(0 0 0 / 0.35), transparent 70%); } .copertina-testata h1 em { background: none; color: var(--bianco); text-decoration: underline; text-decoration-color: var(--testata-accento); text-decoration-thickness: 4px; text-underline-offset: 8px; } .pagina-rimini .copertina-testata h1 em, .pagina-olbia .copertina-testata h1 em, .pagina-insider .copertina-testata h1 em { text-decoration-color: rgb(255 255 255 / 0.55); } .copertina-marchio { margin: var(--s-4) 0 var(--s-3); } .copertina-marchio .mt { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); } .pagina-parma .copertina-testata { border-bottom: 4px solid #f5a11d; } .date-libere { background: var(--bianco); color: var(--inchiostro); border-radius: 16px; padding: var(--s-5); box-shadow: 0 30px 80px rgb(0 0 0 / 0.35); max-width: 440px; justify-self: center; width: 100%; } .date-libere-titolo { font-weight: 700; display: flex; gap: var(--s-2); align-items: center; } .date-libere-lista { list-style: none; padding: 0; margin: var(--s-3) 0; display: grid; gap: var(--s-2); min-height: 196px; align-content: start; } .date-libere-lista li { margin: 0; } .date-libere-lista a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 44px; padding: var(--s-2) var(--s-4); border: 1px solid var(--linea); border-radius: var(--raggio-piccolo); text-decoration: none; font-weight: 600; font-size: var(--t-s); transition: border-color var(--durata), background var(--durata); } .date-libere-lista a:hover { border-color: var(--testata); background: var(--carta); color: var(--inchiostro); } .date-libere-lista a span { font-weight: 500; font-size: var(--t-xs); color: var(--verde); white-space: nowrap; } .date-libere-attesa { color: var(--grigio); font-size: var(--t-s); padding: var(--s-3) 0; } .date-libere-nota { font-size: var(--t-xs); color: var(--grigio); } /* A · anteprima sul giornale */ .esempio-griglia > *, .cliente-griglia > *, .anteprima-cliente-griglia > *, .copertina-griglia > * { min-width: 0; } .giornale { position: relative; margin: 0; max-width: 100%; min-width: 0; background: var(--bianco); color: var(--inchiostro); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgb(0 0 0 / 0.28), 0 2px 8px rgb(0 0 0 / 0.12); border: 1px solid rgb(0 0 0 / 0.08); text-align: left; } .giornale-nastro { position: absolute; top: 22px; right: -46px; z-index: 3; margin: 0; transform: rotate(40deg); background: #ffd23f; color: #3b2c00; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 56px; box-shadow: 0 4px 12px rgb(0 0 0 / 0.2); } .giornale-browser { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #eeebe4; border-bottom: 1px solid #ddd8cc; } .giornale-browser i { width: 10px; height: 10px; border-radius: 50%; background: #d4cfc3; flex: none; } .giornale-browser i:first-child { background: #ff6159; } .giornale-browser i:nth-child(2) { background: #ffbd2e; } .giornale-browser i:nth-child(3) { background: #28c941; } .giornale-browser span { margin-left: 10px; flex: 1; min-width: 0; background: var(--bianco); border-radius: 999px; padding: 2px 12px; font-size: 0.72rem; color: var(--grigio); display: flex; align-items: center; gap: 4px; } .giornale-testata { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 14px 18px 10px; } .giornale-testata .mt { font-size: 1.7rem; } .giornale-testata small { font-size: 0.72rem; color: var(--grigio); } .giornale-menu { display: flex; gap: 16px; padding: 8px 18px; background: var(--testata); overflow: hidden; white-space: nowrap; } .giornale-parma .giornale-menu { border-bottom: 3px solid var(--testata-accento); } .giornale-menu span { color: var(--testata-testo); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .giornale-pagina { padding: 16px 18px 20px; display: grid; gap: 10px; } .giornale-sezione { margin: 4px 0 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grigio); display: flex; align-items: center; gap: 8px; } .giornale-sezione::after { content: ''; flex: 1; height: 1px; background: var(--linea); } .giornale-card { display: grid; grid-template-columns: 42% 1fr; gap: 12px; align-items: start; padding: 10px; border: 1px solid var(--linea); border-radius: 8px; background: #fffdf9; } .giornale-card-foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--carta-2); } .giornale-card-testo { display: grid; gap: 6px; align-content: start; min-width: 0; } .giornale-card-testo .etichetta-sponsor { justify-self: start; } .giornale-card-titolo { margin: 0; font-family: var(--font-titoli); font-weight: 700; font-size: 1.02rem; line-height: 1.2; overflow-wrap: anywhere; } .giornale-card-sommario { margin: 0; font-size: 0.8rem; color: var(--inchiostro-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .giornale .etichetta-sponsor { background: var(--testata); color: var(--testata-testo); } .etichetta-grande { font-size: 0.78rem; padding: 0.35em 0.75em; } .giornale-articolo { display: grid; gap: 8px; min-width: 0; } .giornale-articolo .etichetta-sponsor { justify-self: start; } .giornale-titolo { margin: 2px 0 0; font-family: var(--font-titoli); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); line-height: 1.12; letter-spacing: -0.02em; overflow-wrap: anywhere; } .giornale-sommario { margin: 0; font-size: 0.98rem; color: var(--inchiostro-2); line-height: 1.45; } .giornale-meta { margin: 0; font-size: 0.75rem; color: var(--grigio); text-transform: uppercase; letter-spacing: 0.04em; } .giornale-foto { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--carta-2); } .giornale-credito { margin: -4px 0 0; font-size: 0.7rem; color: var(--grigio); } .giornale .contenuto-pubblicato { font-size: 0.94rem; line-height: 1.6; overflow-wrap: anywhere; } .giornale .contenuto-pubblicato h2 { font-size: 1.1rem; margin: 14px 0 6px; } .giornale .contenuto-pubblicato p { margin: 0 0 10px; } .giornale .contenuto-pubblicato a { color: var(--testata); font-weight: 600; } .giornale .pq-etichetta { display: none; } .giornale-galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; } .giornale-galleria img { aspect-ratio: 1; object-fit: cover; border-radius: 4px; } .giornale-nota { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 18px; background: var(--giallo-tenue); color: #5c3d00; font-size: 0.8rem; border-top: 1px solid #f1dfa6; } .foto-segnaposto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: color-mix(in srgb, var(--testata) 70%, #000); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--testata) 10%, #fff) 0 12px, color-mix(in srgb, var(--testata) 16%, #fff) 12px 24px); font-size: 0.78rem; font-weight: 600; } .giornale-card .foto-segnaposto .icona { width: 1.6rem; height: 1.6rem; } @media (max-width: 480px) { .giornale-card { grid-template-columns: 1fr; } .giornale-card-foto { aspect-ratio: 16 / 9; } } /* A · pagine del cliente */ .pagina-cliente .piede { margin-top: var(--s-6); } .cliente-griglia { display: grid; gap: var(--s-6); align-items: start; } @media (min-width: 900px) { .cliente-griglia { grid-template-columns: minmax(0, 1fr) 340px; } .riepilogo-cliente { position: sticky; top: 88px; } } .riepilogo-cliente { border-top: 5px solid var(--testata); } .riepilogo-cliente-testata .mt { font-size: 1.5rem; } .linea-tempo { list-style: none; padding: 0; margin: var(--s-6) 0 0; position: relative; } .linea-tempo li { position: relative; display: flex; gap: var(--s-4); margin: 0; padding-bottom: var(--s-5); } .linea-tempo li::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 0; width: 2px; background: var(--linea); } .linea-tempo li:last-child::before { display: none; } .linea-tempo li.lt-fatto::before { background: var(--testata); } .lt-punto { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--linea-forte); background: var(--bianco); color: var(--bianco); position: relative; z-index: 1; } .lt-fatto .lt-punto { background: var(--testata); border-color: var(--testata); color: var(--testata-testo); } .lt-ora .lt-punto { border-color: var(--testata); box-shadow: 0 0 0 5px color-mix(in srgb, var(--testata) 18%, transparent); } .lt-ora .lt-punto::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--testata); } .lt-fermo .lt-punto { background: var(--rosso); border-color: var(--rosso); color: #fff; } .lt-poi .lt-titolo { color: var(--grigio); } .lt-testo p { margin: 0; } .lt-titolo { font-weight: 700; padding-top: 2px; } .lt-quando { font-size: var(--t-xs); color: var(--grigio); } .lt-descrizione { font-size: var(--t-s); color: var(--inchiostro-2); margin-top: 4px !important; } .lt-link { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); } .lt-link a { font-weight: 700; color: var(--testata); } .anteprima-cliente-testa { max-width: 760px; margin-bottom: var(--s-6); } .anteprima-cliente-griglia { display: grid; gap: var(--s-6); align-items: start; } @media (min-width: 980px) { .anteprima-cliente-griglia { grid-template-columns: minmax(0, 1fr) 360px; } .decisione { position: sticky; top: 88px; } } .decisione { display: grid; gap: var(--s-4); } .decisione h2 { font-size: var(--t-l); display: flex; gap: var(--s-2); align-items: center; } .decisione-approva { border-top: 5px solid var(--testata); } .grazie { padding-block: var(--s-8); background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--testata) 14%, transparent), transparent 70%); } .grazie-sigillo { width: 84px; height: 84px; margin: 0 auto var(--s-4); border-radius: 50%; display: grid; place-items: center; background: var(--verde); color: #fff; box-shadow: 0 0 0 10px var(--verde-tenue); animation: compare 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4) both; } .grazie-sigillo .icona { width: 44px; height: 44px; stroke-width: 2.6; } @keyframes compare { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .grazie-passi { list-style: none; padding: 0; margin: var(--s-6) auto; display: grid; gap: var(--s-3); max-width: 520px; text-align: left; } .grazie-passi li { display: flex; gap: var(--s-3); align-items: center; margin: 0; padding: var(--s-3) var(--s-4); background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); } .grazie-passi .icona { color: var(--testata); } .rotella { width: 44px; height: 44px; margin: 0 auto var(--s-4); border-radius: 50%; border: 4px solid var(--linea); border-top-color: var(--testata); animation: gira 0.9s linear infinite; } @keyframes gira { to { transform: rotate(360deg); } } .attesa-pagamento { padding-block: var(--s-7); } .scheda-societa { margin-top: var(--s-4); background: var(--carta-2); box-shadow: none; } .tabella-riepilogo td { white-space: nowrap; } .navigazione .bottone-piccolo { white-space: nowrap; }