/* ========================================================================= NG Studio — Design System Un solo file CSS per tutto il sito. Nessuna libreria, nessuna dipendenza esterna: il sito non fa nessuna richiesta a server di terze parti. ========================================================================= */ /* ---------- 1. Token di design (colori, spazi, font) --------------------- */ :root { color-scheme: light; /* Superfici */ --paper: #FBFAF7; --paper-2: #F4F1EB; --card: #FFFFFF; /* Testo */ --ink: #12181A; --ink-2: #3E4A4D; --ink-3: #6E7A7D; /* Linee */ --line: #E5DFD5; --line-2: #D6CEC1; /* Marchio */ --brand: #0E5C46; --brand-2: #0A4634; --brand-soft: #E7F0EC; --brand-ring: rgba(14, 92, 70, .28); /* Accento caldo */ --accent: #B65A24; --accent-soft:#FAEDE3; /* Geometria */ --radius: 14px; --radius-lg: 24px; --radius-pill:999px; --maxw: 1160px; --gutter: clamp(20px, 5vw, 40px); /* Ombre */ --shadow-1: 0 1px 2px rgba(18, 24, 26, .04), 0 6px 18px rgba(18, 24, 26, .05); --shadow-2: 0 2px 4px rgba(18, 24, 26, .04), 0 18px 45px -18px rgba(14, 92, 70, .30); --shadow-3: 0 30px 70px -30px rgba(14, 92, 70, .45); /* Tipografia */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Fasce scure (chiamata finale, piede). Nel tema chiaro sono l'unico blocco nero della pagina; nel tema scuro devono SCHIARIRSI, altrimenti si fondono col fondo e il blocco sparisce. */ --banda: #12181A; --banda-ink: #B9C3C2; --banda-line: rgba(255,255,255,.10); /* Quanto si smorzano le due tavole con lo slogan: sul fondo chiaro niente, sul fondo scuro un filo, per non avere due rettangoli color panna che abbagliano in mezzo alla pagina. */ --tavole: none; } /* ---------- 1b. Tema scuro ---------------------------------------------- Il tema lo decide l'attributo data-tema sull'elemento , scritto: - da uno script di poche righe DENTRO AL , prima che la pagina si disegni, leggendo la scelta salvata o le preferenze del sistema; - dal bottone giorno/notte nella testata. Lo script sta nel e non in fondo apposta: se stesse in fondo la pagina comparirebbe chiara per un istante e poi diventerebbe scura, ed e quel lampo bianco in faccia la cosa che rende fastidiosi i temi scuri. Senza JavaScript resta il tema chiaro e non si rompe niente. */ [data-tema="scuro"] { color-scheme: dark; --paper: #0E1315; --paper-2: #141B1E; --card: #192225; --ink: #F1F5F4; --ink-2: #B4C0BF; --ink-3: #808E8D; --line: #25302F; --line-2: #35423F; /* Il verde del marchio a piena forza, su fondo quasi nero, e cupo e illeggibile: qui si usa la sua versione chiara, la stessa che il tema chiaro usa gia come alone dentro alla fascia finale. */ --brand: #4CC79D; --brand-2: #7BDCBB; --brand-soft: rgba(76,199,157,.13); --brand-ring: rgba(76,199,157,.34); --accent: #E2915A; --accent-soft:rgba(226,145,90,.13); /* Le ombre verdastre del tema chiaro, su fondo nero, diventano una macchia verde: qui tornano nere e piu profonde. */ --shadow-1: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.34); --shadow-2: 0 2px 4px rgba(0,0,0,.45), 0 18px 45px -18px rgba(0,0,0,.72); --shadow-3: 0 30px 70px -30px rgba(0,0,0,.9); --banda: #192225; --banda-ink: #A9B6B5; --banda-line: rgba(255,255,255,.09); --tavole: brightness(.94) saturate(.94); } /* La dissolvenza fra i due temi. Solo i colori: animando "all" si muoverebbe anche l'impaginazione e il cambio sembrerebbe un tremolio. La classe la mette e la toglie lo script per il tempo del cambio, cosi il primo disegno della pagina non parte con una dissolvenza addosso. */ html.tema-in-cambio, html.tema-in-cambio body, html.tema-in-cambio .site-header, html.tema-in-cambio .card, html.tema-in-cambio .site-footer, html.tema-in-cambio .cta-band, html.tema-in-cambio .faq details, html.tema-in-cambio .section-alt, html.tema-in-cambio input, html.tema-in-cambio select, html.tema-in-cambio textarea { transition: background-color .3s ease, color .3s ease, border-color .3s ease; } /* ---------- 2. Reset ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } @view-transition { navigation: none; } } body { font-family: var(--font-sans); font-size: 17px; line-height: 1.65; color: var(--ink-2); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--brand-ring); outline-offset: 3px; border-radius: 6px; } /* Il passaggio da una pagina all'altra viene sfumato dal browser. E una riga sola: chi la conosce vede la dissolvenza, gli altri navigano come sempre. */ @view-transition { navigation: auto; } /* Il testo selezionato prende il colore del marchio invece dell'azzurro di sistema. Dettaglio da niente, ma e uno di quelli che si notano. */ ::selection { background: color-mix(in srgb, var(--brand) 20%, transparent); color: var(--ink); } /* L'intestazione resta appiccicata in alto: senza questo, un collegamento con #ancora porterebbe il titolo di destinazione a finire nascosto sotto la barra. */ [id] { scroll-margin-top: 96px; } /* Barra di scorrimento sottile e nei colori del sito, dove il browser lo permette. */ @supports (scrollbar-color: auto) { html { scrollbar-color: var(--line-2) transparent; scrollbar-width: thin; } } /* ---------- 3. Tipografia ---------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--ink); line-height: 1.15; letter-spacing: -.015em; font-weight: 600; text-wrap: balance; } h1 { font-size: clamp(2.25rem, 5.2vw, 3.9rem); letter-spacing: -.03em; } h2 { font-size: clamp(1.75rem, 3.6vw, 2.65rem); letter-spacing: -.022em; } h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); } h4 { font-size: 1.06rem; font-family: var(--font-sans); font-weight: 650; letter-spacing: -.01em; } p { text-wrap: pretty; } strong { color: var(--ink); font-weight: 650; } .lead { font-size: clamp(1.08rem, 1.7vw, 1.28rem); line-height: 1.6; color: var(--ink-2); } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--brand); font-family: var(--font-sans); } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--brand); border-radius: 2px; flex: none; } .muted { color: var(--ink-3); } .small { font-size: .9rem; } .tiny { font-size: .82rem; line-height: 1.55; } /* ---------- 4. Layout --------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: 760px; } section { position: relative; } .section { padding-block: clamp(56px, 8vw, 104px); } .section-tight { padding-block: clamp(40px, 5vw, 64px); } .section-alt { background: var(--paper-2); } .section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } .section-head h2 { margin-top: 14px; } .section-head p { margin-top: 16px; font-size: 1.08rem; } .grid { display: grid; gap: clamp(16px, 2.2vw, 26px); } .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 940px) { .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); } } .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 68px); align-items: center; } @media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } } .stack > * + * { margin-top: 1rem; } .center { text-align: center; } /* ---------- 5. Bottoni -------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .92rem 1.5rem; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; border-radius: var(--radius-pill); border: 1.5px solid transparent; text-decoration: none; cursor: pointer; transition: transform .16s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn svg { flex: none; } .btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-2); } .btn-primary:hover { background: var(--brand-2); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } .btn-light { background: #fff; color: #12181A; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); } .btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); } .btn-sm { padding: .6rem 1.05rem; font-size: .92rem; } .btn-lg { padding: 1.05rem 1.9rem; font-size: 1.06rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .btn-row.center { justify-content: center; } .link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; color: var(--brand); text-decoration: none; border-bottom: 1.5px solid transparent; transition: border-color .2s, gap .2s; } .link-arrow:hover { border-bottom-color: currentColor; gap: .65rem; } .link-arrow::after { content: "\2192"; font-size: 1.05em; } /* ---------- 6. Header --------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 90; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease; } .site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 22px -18px rgba(0,0,0,.5); } /* Durante la dissolvenza fra due pagine questi due non sfumano insieme al resto: restano dove sono. La barra sembra una sola, continua, invece di sparire e ricomparire a ogni clic. */ .site-header { view-transition-name: testata; } /* .site-header e non .brand da solo: il marchio compare due volte per pagina, in testata e nel piede, e due elementi con lo stesso view-transition-name sono un errore — il browser rinuncia alla dissolvenza e lo scrive nella console. Quello che deve restare fermo fra una pagina e l'altra e comunque solo quello in alto. */ .site-header .brand { view-transition-name: marchio; } .nav { display: flex; align-items: center; gap: 20px; height: 74px; } .brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; flex: none; } /* Il marchio ora e la volpe ritagliata su fondo trasparente: gli angoli arrotondati e l'ombra servivano al quadratino pieno di prima, su una sagoma ritagliata farebbero un rettangolo d'ombra intorno al nulla. La misura si da in altezza perche la volpe e piu alta che larga. */ .brand-mark { height: 42px; width: auto; flex: none; } @media (max-width: 420px) { .brand-mark { height: 36px; } } /* Due file per lo stesso marchio: la volpe verde sparirebbe sul fondo scuro, quindi li c'e la versione chiara. Nella testata ci sono tutte e due e se ne vede una sola: scambiarle con il CSS costa 4 righe e non fa lampeggiare niente al cambio di tema, mentre cambiare il src da JavaScript farebbe ricaricare l'immagine e sfarfallare il logo. */ .brand-mark.per-scuro { display: none; } [data-tema="scuro"] .site-header .brand-mark.per-chiaro { display: none; } [data-tema="scuro"] .site-header .brand-mark.per-scuro { display: block; } .brand-name { font-family: var(--font-serif); font-size: 1.24rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; } .brand-name span { display: block; font-family: var(--font-sans); font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; } .nav-links { display: flex; align-items: center; gap: 4px; } /* :not(.btn) e indispensabile: senza, questa regola vincerebbe per specificita sul colore di .btn-primary e il testo del pulsante sparirebbe nel verde. */ .nav-links a:not(.btn) { padding: .5rem .8rem; border-radius: 9px; text-decoration: none; font-size: .96rem; font-weight: 550; color: var(--ink-2); transition: background-color .18s, color .18s; } .nav-links a:not(.btn):hover { background: var(--paper-2); color: var(--ink); } .nav-links a:not(.btn).active { color: var(--brand); font-weight: 650; } .nav-cta { margin-left: 8px; } .nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line-2); background: var(--card); border-radius: 11px; cursor: pointer; padding: 0; align-items: center; justify-content: center; } .nav-toggle span { display: block; width: 18px; height: 1.8px; background: var(--ink); border-radius: 2px; position: relative; transition: .22s; } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.8px; background: var(--ink); border-radius: 2px; transition: .22s; } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } @media (max-width: 920px) { .nav-toggle { display: inline-flex; } .nav-links { position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--card); border-bottom: 1px solid var(--line); padding: 14px var(--gutter) 22px; box-shadow: var(--shadow-2); display: none; } .nav-links.open { display: flex; } .nav-links a:not(.btn) { padding: .8rem .6rem; font-size: 1.05rem; } .nav-cta { margin: 10px 0 0; justify-content: center; } } /* ---------- 7. Hero ----------------------------------------------------- */ .hero { position: relative; padding-block: clamp(48px, 7vw, 92px) clamp(48px, 7vw, 88px); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -30% -20% auto -20%; height: 620px; z-index: -1; background: radial-gradient(60% 60% at 18% 22%, color-mix(in srgb, var(--brand) 13%, transparent) 0%, transparent 70%), radial-gradient(45% 55% at 88% 8%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 70%); filter: blur(8px); } .hero-grid { display: grid; grid-template-columns: 1.14fr .86fr; gap: clamp(32px, 5vw, 56px); align-items: center; } .hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); } @media (max-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } } .hero h1 { margin-top: 18px; } .hero .lead { margin-top: 20px; max-width: 36ch; } @media (max-width: 940px) { .hero .lead { max-width: none; } } .hero .btn-row { margin-top: 30px; } .hero-note { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; } /* La spunta e disegnata con una MASCHERA e non con un'immagine di sfondo che ha il verde scritto dentro: cosi il segno prende il colore da --brand e resta leggibile anche quando --brand cambia insieme al tema. Il tondino colorato sta nel ::before, il segno di spunta nel ::after. */ .hero-note li { list-style: none; display: flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--ink-3); position: relative; } .hero-note li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--brand-soft); } .hero-note li::after { content: ""; position: absolute; left: 0; top: 50%; margin-top: -8px; width: 16px; height: 16px; background-color: var(--brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat; } /* Intestazione delle pagine interne */ .page-hero { padding-block: clamp(38px, 5vw, 68px) clamp(28px, 4vw, 46px); position: relative; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: -60% -20% auto -20%; height: 480px; z-index: -1; background: radial-gradient(55% 60% at 20% 70%, color-mix(in srgb, var(--brand) 11%, transparent) 0%, transparent 70%); } .page-hero h1 { margin-top: 16px; font-size: clamp(2rem, 4.4vw, 3.1rem); } .page-hero .lead { margin-top: 18px; max-width: 62ch; } .breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .84rem; color: var(--ink-3); list-style: none; padding: 0; margin-bottom: 18px; } .breadcrumb a { color: var(--ink-3); text-decoration: none; } .breadcrumb a:hover { color: var(--brand); text-decoration: underline; } .breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: var(--line-2); } /* Blocco servizio dettagliato */ .svc { display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start; } @media (max-width: 520px) { .svc { grid-template-columns: minmax(0,1fr); } } .svc .icon-badge { margin-bottom: 0; width: 56px; height: 56px; border-radius: 16px; } .svc .icon-badge svg { width: 27px; height: 27px; } .svc h3 { margin-bottom: .5rem; } /* ---------- 8. Mockup browser / telefono -------------------------------- */ .mockup { position: relative; } .browser { border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-3); } .browser-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line); } .browser-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); flex: none; } .browser-url { margin-left: 8px; flex: 1; font-size: .74rem; color: var(--ink-3); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; text-align: center; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .browser-body { background: var(--card); } /* ---------- 9. Card ----------------------------------------------------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 2.6vw, 30px); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); } .card h3 { margin-bottom: .55rem; } .card p { font-size: .98rem; } .icon-badge { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); margin-bottom: 18px; flex: none; } .icon-badge.amber { background: var(--accent-soft); color: var(--accent); } .icon-badge svg { width: 23px; height: 23px; } .numbox { display: flex; gap: 18px; align-items: flex-start; } .numbox-n { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 600; color: var(--brand); width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--brand-soft); } /* ---------- 10. Liste di controllo ------------------------------------- */ /* La spunta e posizionata in assoluto, NON con flex: se la voce fosse un contenitore flex, ogni o al suo interno diventerebbe un elemento flex a se stante e il testo si spezzerebbe in colonne. */ .checklist { list-style: none; padding: 0; display: grid; gap: 11px; } .checklist li { position: relative; padding-left: 1.85rem; font-size: .99rem; } .checklist li::before { content: ""; position: absolute; left: 0; top: .22em; width: 21px; height: 21px; border-radius: 50%; background: var(--brand-soft); } /* Vedi la nota su .hero-note: il segno e una maschera, cosi segue --brand. */ .checklist li::after { content: ""; position: absolute; left: 0; top: .22em; width: 21px; height: 21px; background-color: var(--brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat; } .crosslist { list-style: none; padding: 0; display: grid; gap: 11px; } .crosslist li { position: relative; padding-left: 1.85rem; font-size: .99rem; color: var(--ink-3); } .crosslist li::before { content: "\2013"; position: absolute; left: 0; top: 0; width: 21px; text-align: center; color: var(--line-2); font-weight: 700; } /* ---------- 11. Prezzi -------------------------------------------------- */ .price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; } @media (max-width: 960px) { .price-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } } .price-card { position: relative; display: flex; flex-direction: column; } .price-card.featured { border-color: var(--brand); box-shadow: var(--shadow-2); background: linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 60%, var(--card)) 0%, var(--card) 220px); } .price-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .34rem .95rem; border-radius: var(--radius-pill); white-space: nowrap; } .price-name { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } .price-desc { font-size: .93rem; color: var(--ink-3); margin-top: 6px; } .price-value { display: flex; align-items: baseline; gap: .35rem; margin: 20px 0 4px; flex-wrap: wrap; } .price-value b { font-family: var(--font-serif); font-size: 2.7rem; font-weight: 600; color: var(--ink); letter-spacing: -.03em; line-height: 1; } .price-value small { font-size: .92rem; color: var(--ink-3); font-weight: 500; } .price-sub { font-size: .85rem; color: var(--ink-3); } .price-card .checklist { margin: 22px 0; padding-top: 22px; border-top: 1px solid var(--line); } .price-card .btn { margin-top: auto; width: 100%; } /* ---------- 12. FAQ ----------------------------------------------------- */ .faq { display: grid; gap: 12px; } .faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, box-shadow .2s; } .faq details[open] { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: var(--shadow-1); } .faq summary { cursor: pointer; list-style: none; padding: 1.15rem 3.2rem 1.15rem 1.35rem; font-weight: 650; color: var(--ink); position: relative; font-size: 1.02rem; line-height: 1.45; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 1.25rem; top: 1.45rem; width: 15px; height: 15px; transition: transform .25s ease; background-color: var(--brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; } .faq details[open] summary::after { transform: rotate(135deg); } .faq .faq-body { padding: 0 1.35rem 1.3rem; font-size: .99rem; } .faq .faq-body > * + * { margin-top: .8rem; } /* ---------- 13. Tabelle ------------------------------------------------- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 540px; } th, td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } thead th { background: var(--paper-2); font-weight: 700; color: var(--ink); font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; } tbody tr:last-child td { border-bottom: none; } td strong { color: var(--ink); } /* ---------- 14. Form ---------------------------------------------------- */ .form { display: grid; gap: 16px; } /* align-content: start e la riga che tiene i campi allineati fra loro. .field e una griglia dentro a .field-row, e le righe di una griglia si allargano per riempire l'altezza: siccome il campo "telefono" ha una riga in piu (il suggerimento sotto), la sua vicina "email" veniva stirata e la casella finiva 25 pixel piu in basso di quella di fianco. */ .field { display: grid; gap: 7px; align-content: start; } .field label { font-size: .9rem; font-weight: 650; color: var(--ink); } .field label .req { color: var(--accent); } .field input, .field select, .field textarea { width: 100%; padding: .82rem 1rem; border-radius: 11px; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); font-size: 1rem; transition: border-color .18s, box-shadow .18s; } .field textarea { min-height: 128px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); } .field .hint { font-size: .82rem; color: var(--ink-3); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 620px) { .field-row { grid-template-columns: minmax(0, 1fr); } } .consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: var(--ink-3); } .consent input { width: 19px; height: 19px; flex: none; margin-top: 2px; accent-color: var(--brand); } .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .form-msg { padding: 1rem 1.15rem; border-radius: 11px; font-size: .93rem; display: none; } .form-msg.show { display: block; } .form-msg.ok { background: var(--brand-soft); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); } .form-msg.err { background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } /* ---------- 15. Elementi vari ------------------------------------------ */ .pill { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .8rem; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand); font-size: .8rem; font-weight: 650; letter-spacing: .01em; } .pill.amber { background: var(--accent-soft); color: var(--accent); } .pill.plain { background: var(--paper-2); color: var(--ink-3); } .callout { border-left: 3px solid var(--brand); background: var(--brand-soft); padding: 1.1rem 1.35rem; border-radius: 0 var(--radius) var(--radius) 0; font-size: .97rem; } .callout.amber { border-left-color: var(--accent); background: var(--accent-soft); } .callout strong { display: block; margin-bottom: .3rem; color: var(--ink); } .stat-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } @media (max-width: 780px) { .stat-row { grid-template-columns: repeat(2, minmax(0,1fr)); } } .stat { background: var(--card); padding: 1.35rem 1.2rem; text-align: center; } .stat b { display: block; font-family: var(--font-serif); font-size: 1.85rem; color: var(--ink); letter-spacing: -.02em; } .stat span { display: block; font-size: .85rem; color: var(--ink-3); margin-top: 4px; line-height: 1.4; } .divider { height: 1px; background: var(--line); border: 0; margin-block: clamp(36px, 5vw, 60px); } /* Blocco CTA finale */ .cta-band { background: var(--banda); border-radius: var(--radius-lg); padding: clamp(34px, 5vw, 62px); text-align: center; position: relative; overflow: hidden; } .cta-band::before { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 320px; background: radial-gradient(50% 60% at 50% 100%, rgba(63,191,149,.28), transparent 70%); } /* Il contenuto va sollevato sopra all'alone del ::before. La tavola di sfondo no: quella deve restare sotto, ed e' l'unica eccezione. */ .cta-band > *:not(.sfondo) { position: relative; } .cta-band h2 { color: #fff; } .cta-band p { color: var(--banda-ink); margin: 16px auto 0; max-width: 56ch; } /* Nel tema scuro la fascia e solo appena piu chiara del fondo: senza un filo di bordo i suoi angoli arrotondati non si vedrebbero affatto. */ [data-tema="scuro"] .cta-band { border: 1px solid var(--line); } [data-tema="scuro"] .site-footer { border-top: 1px solid var(--line); } .cta-band .btn-row { margin-top: 30px; } /* Riquadro esempio del portfolio */ .demo-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; position: relative; } .demo-thumb { aspect-ratio: 16 / 10; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--paper-2); } .demo-thumb img, .demo-thumb svg { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,.7,.3,1); } /* La sfumatura scura in basso serve a due cose: fa leggere il nome bianco sopra a qualsiasi fotografia, e lega fra loro tre foto che hanno luce e colori diversi. Senza, le tre schede sembrerebbero di tre siti diversi. */ .demo-thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(168deg, rgba(9,13,14,0) 34%, rgba(9,13,14,.30) 62%, rgba(9,13,14,.84) 100%); } .demo-tag { position: absolute; left: 20px; right: 20px; bottom: 15px; color: #fff; z-index: 1; } .demo-tag span { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .8; } /* Il nome sta sulla fotografia ed e il titolo vero della scheda (un

): ripeterlo anche sotto, come prima, voleva dire scriverlo due volte nella stessa scheda e dare due intestazioni allo stesso blocco. */ .demo-tag h3 { margin: 2px 0 0; color: #fff; font-size: 1.3rem; line-height: 1.15; text-shadow: 0 1px 14px rgba(0,0,0,.45); } .demo-card:hover .demo-thumb img { transform: scale(1.06); } /* Tutta la scheda e cliccabile, non solo la freccia in fondo: il collegamento resta uno solo (conta per i lettori di schermo e per Google) ma si allarga fino ai bordi. Sul telefono e la differenza fra centrare e non centrare. */ .demo-card .link-arrow::before { content: ""; position: absolute; inset: 0; z-index: 2; } .demo-body { padding: 20px 24px 24px; display: flex; flex-direction: column; flex: 1; } .demo-body > p:first-child { margin-top: 0; } .demo-body h3 { font-size: 1.22rem; } .demo-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .demo-body .link-arrow { margin-top: 18px; align-self: flex-start; } /* Banda di avviso progetto dimostrativo */ .demo-banner { background: #B65A24; color: #fff; text-align: center; padding: .6rem var(--gutter); font-size: .87rem; font-weight: 600; position: relative; z-index: 100; } .demo-banner a { color: #fff; } /* Scheda persona */ .persona { display: grid; grid-template-columns: 92px 1fr; gap: 22px; align-items: start; } @media (max-width: 480px) { .persona { grid-template-columns: minmax(0,1fr); } } .persona-foto { width: 92px; height: 92px; border-radius: 22px; flex: none; display: grid; place-items: center; overflow: hidden; background: linear-gradient(140deg, var(--brand), var(--brand-2)); color: #fff; font-family: var(--font-serif); font-size: 1.9rem; letter-spacing: .02em; border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); } .persona-foto img { width: 100%; height: 100%; object-fit: cover; } .persona-ruolo { font-size: .84rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-top: 4px; } /* Timeline verticale */ .timeline { list-style: none; padding: 0; display: grid; gap: 0; } .timeline li { position: relative; padding: 0 0 26px 34px; border-left: 2px solid var(--line); } .timeline li:last-child { border-left-color: transparent; padding-bottom: 0; } .timeline li::before { content: ""; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand); border: 3px solid var(--paper); } .timeline h4 { margin-bottom: .3rem; } .timeline .quando { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 6px; } /* ---------- 16. Footer -------------------------------------------------- */ .site-footer { background: var(--banda); color: #98A4A4; padding-block: clamp(46px, 6vw, 70px) 0; margin-top: clamp(48px, 6vw, 80px); } .site-footer a { color: #C2CBCA; text-decoration: none; transition: color .18s; } .site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(24px, 3vw, 40px); } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0,1fr); } } .footer-grid h4 { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; font-weight: 700; } .footer-list { list-style: none; padding: 0; display: grid; gap: 10px; font-size: .94rem; } .site-footer .brand-name { color: #fff; } .site-footer .brand-name span { color: #7E8C8B; } .footer-about { font-size: .93rem; margin-top: 18px; max-width: 34ch; } .footer-legal { margin-top: clamp(34px, 4vw, 52px); border-top: 1px solid var(--banda-line); padding-block: 24px 30px; font-size: .82rem; line-height: 1.7; color: #7E8C8B; } .footer-legal-data { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 14px; padding: 0; list-style: none; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; align-items: center; } .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 18px; } /* Campo da compilare — evidenziato finche e un segnaposto */ .todo { background: repeating-linear-gradient(45deg, rgba(182,90,36,.16), rgba(182,90,36,.16) 6px, rgba(182,90,36,.07) 6px, rgba(182,90,36,.07) 12px); border-radius: 4px; padding: 0 5px; color: inherit; font-style: normal; box-shadow: inset 0 0 0 1px rgba(182,90,36,.35); } /* ---------- 17. Documenti legali --------------------------------------- */ .doc { max-width: 780px; margin-inline: auto; } .doc h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); } .doc h2:first-of-type { margin-top: 1.6rem; } .doc h3 { font-size: 1.1rem; margin-top: 1.6rem; } .doc p, .doc ul, .doc ol { margin-top: .9rem; font-size: 1rem; } .doc ul, .doc ol { padding-left: 1.3rem; display: grid; gap: .5rem; } .doc li::marker { color: var(--brand); } .doc .table-scroll { margin-top: 1.2rem; } .doc-toc { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem; margin-top: 2rem; } .doc-toc h4 { margin-bottom: .7rem; } .doc-toc ol { padding-left: 1.2rem; display: grid; gap: .35rem; font-size: .94rem; } .doc-toc a { color: var(--ink-2); text-decoration: none; } .doc-toc a:hover { color: var(--brand); text-decoration: underline; } /* ---------- 18. Comparsa allo scroll ------------------------------------ */ /* Tre direzioni: dal basso (quella predefinita), da sinistra e da destra per le sezioni a due colonne. Dentro alle griglie gli elementi entrano a cascata: il ritardo lo assegna lo script leggendo la posizione, cosi non va scritto a mano nell'HTML e resta giusto anche se si aggiunge una scheda. */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1); transition-delay: var(--ritardo, 0ms); will-change: opacity, transform; } .reveal.da-sinistra { transform: translate3d(-26px, 0, 0); } .reveal.da-destra { transform: translate3d(26px, 0, 0); } .reveal.in { opacity: 1; transform: none; will-change: auto; } /* Sul telefono i due spostamenti laterali vanno tolti. Il margine della pagina a 375 pixel e' di 20: un blocco spostato di 26 a sinistra ne esce di sei, e finche' non parte l'animazione il telefono mostra la barra di scorrimento orizzontale. Sei pixel di niente, ma sono sei pixel che si vedono su un sito che vende siti fatti bene. Verticale resta. */ @media (max-width: 700px) { .reveal.da-sinistra, .reveal.da-destra { transform: translateY(20px); } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- 19. Utility ------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--brand); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 10px 10px; text-decoration: none; font-weight: 650; transition: top .2s; } .skip-link:focus { top: 0; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: .6rem; } .mt-2 { margin-top: 1.2rem; } .mt-3 { margin-top: 2rem; } .mt-4 { margin-top: 3rem; } .nowrap { white-space: nowrap; } /* ---------- 20. Rifiniture ---------------------------------------------- */ /* Micro-animazioni. Regola che vale per tutte: devono farsi notare solo se le cerchi. Rispettano "prefers-reduced-motion" grazie alla regola generale in cima al file, che azzera durate e transizioni per chi ha chiesto meno movimento nelle impostazioni del sistema. */ /* Avanzamento della lettura: una riga sottile in cima, larga quanto la parte di pagina gia scorsa. La larghezza la scrive lo script in --letto. */ .progresso { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 95; transform: scaleX(var(--letto, 0)); transform-origin: 0 50%; background: linear-gradient(90deg, var(--brand), var(--accent)); pointer-events: none; transition: opacity .3s; } .progresso[data-spenta] { opacity: 0; } /* Voci di menu: la sottolineatura cresce da sinistra. Non sul menu del telefono, dove le voci diventano righe larghe tutto lo schermo. */ @media (min-width: 921px) { .nav-links a:not(.btn) { position: relative; } .nav-links a:not(.btn)::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem; height: 1.5px; border-radius: 2px; background: currentColor; opacity: .5; transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s cubic-bezier(.22,.7,.3,1); } .nav-links a:not(.btn):hover::after, .nav-links a:not(.btn).active::after { transform: scaleX(1); } } /* Riflesso che attraversa il pulsante principale quando ci passi sopra. */ .btn-primary { position: relative; overflow: hidden; isolation: isolate; } .btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.20) 50%, transparent 68%); transform: translateX(-130%); } .btn-primary:hover::after { transform: translateX(130%); transition: transform .75s cubic-bezier(.3,.6,.3,1); } /* Alone tenue che segue il puntatore sulle schede. Le coordinate le scrive lo script in --mx / --my; senza script il valore predefinito lascia l'alone spento, quindi la scheda resta esattamente com'era. */ .card-hover { position: relative; } .card-hover::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .35s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -50%), color-mix(in srgb, var(--brand) 10%, transparent), transparent 68%); } .card-hover:hover::before { opacity: 1; } /* Le pastiglie si accendono insieme alla scheda che le contiene. */ .pill { transition: background-color .25s ease, color .25s ease; } .card-hover:hover .pill.plain { background: var(--brand-soft); color: var(--brand); } /* La riga dei numeri: un filo di colore sopra, e la cifra che si stacca appena quando ci passi sopra. */ .stat { position: relative; transition: background-color .25s ease; } .stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.22,.7,.3,1); } .stat-row.in .stat::before { transform: scaleX(1); } .stat-row.in .stat:nth-child(2)::before { transition-delay: .09s; } .stat-row.in .stat:nth-child(3)::before { transition-delay: .18s; } .stat-row.in .stat:nth-child(4)::before { transition-delay: .27s; } .stat:hover { background: var(--paper); } .stat b { font-variant-numeric: tabular-nums; } /* L'anteprima del sito nell'intestazione entra da sola al caricamento e si inclina appena sotto al puntatore. E l'unica cosa animata sopra la piega: se il visitatore fa una cosa sola, guarda quella. */ @media (prefers-reduced-motion: no-preference) { .hero .pila { animation: entra-anteprima .95s cubic-bezier(.22,.7,.3,1) both .1s; } @keyframes entra-anteprima { from { opacity: 0; transform: translateY(26px) scale(.984); } to { opacity: 1; transform: none; } } .hero-grid > div:first-child > * { animation: entra-testo .8s cubic-bezier(.22,.7,.3,1) both; } .hero-grid > div:first-child > *:nth-child(1) { animation-delay: .04s; } .hero-grid > div:first-child > *:nth-child(2) { animation-delay: .12s; } .hero-grid > div:first-child > *:nth-child(3) { animation-delay: .2s; } .hero-grid > div:first-child > *:nth-child(4) { animation-delay: .28s; } .hero-grid > div:first-child > *:nth-child(5) { animation-delay: .36s; } @keyframes entra-testo { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } } /* Il pallino verde "aperto ora" dentro all'anteprima respira piano: e la prova visiva che il sito calcola qualcosa invece di stare fermo. */ @media (prefers-reduced-motion: no-preference) { .pallino-vivo { animation: respira 2.6s ease-in-out infinite; } @keyframes respira { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } } /* Titoli di sezione: il trattino dell'occhiello si disegna quando la sezione entra in vista, invece di essere gia li. Fuori da .reveal resta immobile. */ .eyebrow::before { transition: width .55s cubic-bezier(.22,.7,.3,1) .12s; } .reveal:not(.in) .eyebrow::before { width: 0; } /* Fascia finale scura: la sfumatura si muove appena, lentissima. */ @media (prefers-reduced-motion: no-preference) { .cta-band::before { animation: scorri-fondo 22s ease-in-out infinite alternate; } @keyframes scorri-fondo { from { transform: translate3d(-2%, 0, 0) scale(1.02); } to { transform: translate3d(2%, 1%, 0) scale(1.06); } } } /* I collegamenti del piede si spostano di un capello quando ci passi sopra. */ .footer-list a { display: inline-block; transition: color .18s ease, transform .18s ease; } .footer-list a:hover { transform: translateX(3px); } /* ---------- 21. La pila di anteprime nell'intestazione ------------------ */ /* Tre finestre di browser impilate. Dentro a ognuna non c'e' un disegno: c'e' davvero il sito dimostrativo, dentro a un iframe, che gira e calcola i suoi orari da solo. Quella davanti carica subito; le altre due partono con la fotografia di copertina del loro sito come sfondo e caricano solo quando qualcuno le porta avanti, cosi in pagina c'e' un iframe alla volta. Le due dietro sbucano in cima con la loro barra dell'indirizzo: e' quella che si legge e si clicca per scegliere. Lo spazio sopra alla pila serve a contenerle quando si allargano al passaggio del mouse. */ .pila { position: relative; display: grid; padding-top: 72px; --larghezza-finta: 1280px; } @media (max-width: 700px) { .pila { --larghezza-finta: 900px; padding-top: 60px; } } .finestra { grid-area: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-3); transition: transform .55s cubic-bezier(.22,.7,.3,1), filter .55s ease, box-shadow .55s ease; /* L'origine in ALTO al centro non e un dettaglio: con l'origine in basso il rimpicciolimento spinge giu il bordo superiore esattamente di quanto la traslazione lo alzava, i due effetti si annullano e le finestre dietro non sbucano affatto. Con l'origine in alto, il bordo superiore lo muove solo la traslazione, e i numeri qui sotto sono i pixel che si vedono davvero. */ transform-origin: 50% 0; } .finestra[data-posizione="0"] { z-index: 3; } .finestra[data-posizione="1"] { z-index: 2; transform: translate3d(0,-14px,0) scale(.95); filter: brightness(.93) saturate(.85); } .finestra[data-posizione="2"] { z-index: 1; transform: translate3d(0,-28px,0) scale(.90); filter: brightness(.85) saturate(.7); } /* A riposo sbucano di un filo: si vede che dietro c'e altro, ma nessun indirizzo compare tagliato a meta - che sembrerebbe un errore di misura. Col mouse sopra si aprono davvero e ogni barra si legge e si clicca. */ .pila:hover .finestra[data-posizione="1"], .pila:focus-within .finestra[data-posizione="1"] { transform: translate3d(0,-46px,0) scale(.95); filter: none; } .pila:hover .finestra[data-posizione="2"], .pila:focus-within .finestra[data-posizione="2"] { transform: translate3d(0,-88px,0) scale(.90); filter: brightness(.95) saturate(.9); } /* La barra dell'indirizzo: sulle finestre dietro e' il bottone per sceglierle. */ .finestra-barra { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line); } .finestra-url { margin-left: 8px; flex: 1; min-width: 0; font-size: .74rem; font-family: var(--font-mono); color: var(--ink-3); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; text-align: center; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s, border-color .2s, background-color .2s; } .finestra[data-posizione="0"] .finestra-url { cursor: default; } .finestra:not([data-posizione="0"]) .finestra-url:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); } /* Il corpo: l'iframe e disegnato alla misura di un vero schermo e poi rimpicciolito, cosi dentro si vede il sito nella sua versione da computer e non quella da telefono. Il fattore di riduzione lo calcola lo script sulla larghezza vera della finestra, e lo riscrive quando la pagina cambia misura. */ .finestra-corpo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--paper-2); background-size: cover; background-position: center; /* l'immagine la mette l'HTML: un url() dentro a una variabile CSS verrebbe risolto rispetto a questo foglio di stile, cioe /assets/css/, e non rispetto alla pagina. */ } .finestra-corpo iframe { position: absolute; top: 0; left: 0; border: 0; width: var(--larghezza-finta); height: calc(var(--larghezza-finta) * .75); transform: scale(var(--zoom, .34)); transform-origin: 0 0; pointer-events: none; /* l'anteprima si guarda, non si usa: si clicca per aprirla */ opacity: 0; transition: opacity .45s ease; } .finestra-corpo iframe.carica { opacity: 1; } /* Il richiamo sopra alla finestra davanti. Sulle altre resta nascosto: due inviti ad aprire due siti diversi, uno sopra l'altro, non aiutano nessuno. */ .finestra-apri { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 20px; text-decoration: none; color: #fff; background: linear-gradient(to top, rgba(9,13,14,.88) 0%, rgba(9,13,14,.42) 38%, transparent 70%); opacity: 0; transition: opacity .35s ease; } .finestra[data-posizione="0"] .finestra-apri { opacity: 0; } .finestra[data-posizione="0"]:hover .finestra-apri, .finestra[data-posizione="0"]:focus-within .finestra-apri { opacity: 1; } .finestra:not([data-posizione="0"]) .finestra-apri { display: none; } .finestra-apri b { font-family: var(--font-serif); font-size: 1.24rem; font-weight: 600; letter-spacing: -.02em; } .finestra-apri span { font-size: .88rem; color: rgba(255,255,255,.82); } .finestra-apri em { font-style: normal; font-weight: 650; font-size: .9rem; margin-top: 8px; display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; background: #fff; color: var(--brand); padding: .45rem 1rem; border-radius: var(--radius-pill); } .finestra-apri em::after { content: "\2192"; } .pila-aiuto { position: absolute; left: 0; right: 0; top: 0; margin: 0; font-size: .8rem; color: var(--ink-3); text-align: center; transition: opacity .3s ease; } .pila[data-scelto] .pila-aiuto { opacity: 0; } /* Su schermo stretto niente pila: una sola finestra, quella davanti, e le altre due si raggiungono dalla pagina degli esempi. Impilarle su 340px voleva dire tre barre dell'indirizzo illeggibili una sull'altra. */ @media (max-width: 560px) { .pila { padding-top: 0; } .pila-aiuto { display: none; } .finestra:not([data-posizione="0"]) { display: none; } } /* ---------- 22. Le tavole del marchio come sfondo ----------------------- */ /* Quattro immagini che vanno DIETRO al contenuto e mai accanto: slogan-business.jpg la volpe e "Foxing your business" slogan-scrolling.jpg la volpe e "Is your website foxing enough?" sfondo-volpe-chiaro.webp spigoli verdi chiari, la testa a destra sfondo-volpe-scuro.webp fondo verde, foglio panna, la volpe seduta Le prime due prima stavano nel flusso, dentro a una figura con l'ombra: due fermate obbligate alte mezzo schermo in mezzo alla lettura. Adesso sono carta da parati, che e' il loro mestiere - hanno il testo gia' scritto dentro e non chiedono di essere lette una seconda volta. Le altre due le disegna _build/sfondi.py. La regola, la stessa della filigrana di testo: non si vedono, si intravedono. Sopra il 20% di opacita' il testo sopra smette di essere comodo da leggere, e una carta da parati che disturba la lettura ha perso in partenza. Chi ha chiesto piu' contrasto al sistema non la vede affatto. L'elemento e' un vuoto e non un'immagine di sfondo sulla sezione: l'opacita' deve valere per la tavola e NON per il testo che ci sta sopra, e questo si ottiene solo con un livello suo. */ .con-sfondo { position: relative; isolation: isolate; overflow: hidden; } .sfondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; user-select: none; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: var(--quanto, .12); filter: var(--tavole); } /* Sul fondo scuro la stessa tavola rende diversamente, e non nello stesso verso per tutte: per questo l'opacita' del tema scuro e una variabile a parte e non una moltiplicazione buona per ogni caso. Il valore qui e il ripiego per le tavole disegnate, che sul nero si spengono. */ [data-tema="scuro"] .sfondo { opacity: var(--quanto-scuro, calc(var(--quanto, .12) * 1.5)); } @media (prefers-contrast: more) { .sfondo { display: none; } } /* Le due fotografie hanno la frase stampata dentro e stanno larghe il doppio di quanto sono alte. Stirate a copertura in una sezione alta piu di mille pixel verrebbero ingrandite due volte e mezzo, e della frase resterebbero tre lettere: qui ci vuole "contain", che le tiene intere. La banda di fondo che avanza sopra e sotto non si vede - e color panna come la carta della pagina, e al dieci per cento la differenza e di due punti. Sul tema scuro vanno GIU' e non su, al contrario delle tavole disegnate: qui il fondo e chiaro e le lettere sono nere, quindi sul nero la fotografia schiarisce la sezione e le lettere restano scure sopra al chiaro. Al 15% la frase si legge quanto i titoli veri e comincia a dare fastidio. */ .sfondo-business, .sfondo-scrolling { background-size: contain; --quanto: .10; --quanto-scuro: .045; } .sfondo-business { background-image: url("../img/slogan-business.jpg"); } .sfondo-scrolling { background-image: url("../img/slogan-scrolling.jpg"); } @media (max-width: 700px) { .sfondo { --quanto: .09; } } /* --- i tre blocchi che la tavola ce l'hanno per conto loro --------------- */ /* Prima schermata, intestazioni delle pagine interne e fascia della chiamata finale ce l'hanno sempre e su tutte le pagine: metterla con uno vorrebbe dire la stessa riga copiata in undici file, e prima o poi uno resta indietro. Qui e' uno pseudo-elemento e non si puo' dimenticare. Tutti e tre hanno gia position:relative e overflow:hidden; serve solo isolation, che tiene lo z-index:-1 sopra al proprio fondo e non dietro. */ .hero, .page-hero, .cta-band { isolation: isolate; } .hero::after, .page-hero::after, .cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: cover; filter: var(--tavole); } .hero::after { background-image: url("../img/sfondo-volpe-chiaro.webp"); opacity: .17; } /* Nelle pagine interne la volpe vera sta gia a destra del titolo: la tavola si gira, cosi la sua testa finisce dal lato opposto e le due non si accavallano. */ .page-hero::after { background-image: url("../img/sfondo-volpe-chiaro.webp"); transform: scaleX(-1); opacity: .13; } /* La fascia e l'unico blocco nero della pagina, e deve restare nero: la tavola scura ha un foglio color panna in mezzo, e sopra il 12% quel foglio schiarisce la fascia fino a farla sembrare una scheda grigia. Al 12% si vedono gli spigoli verdi negli angoli e basta, che e' quello che serve. Qui la tavola NON si gira, al contrario dell'intestazione: la sua volpe sta a sinistra, cioe' esattamente dove sta la volpe vera della home, e cosi' le si nasconde dietro. Girandola ne comparirebbe una seconda a destra, dietro ai bottoni. */ .cta-band::after { background-image: url("../img/sfondo-volpe-scuro.webp"); opacity: .12; } [data-tema="scuro"] .hero::after { opacity: .24; } [data-tema="scuro"] .page-hero::after { opacity: .19; } [data-tema="scuro"] .cta-band::after { opacity: .15; } @media (prefers-contrast: more) { .hero::after, .page-hero::after, .cta-band::after { display: none; } } @media (max-width: 700px) { .hero::after, .page-hero::after { background-size: 168% auto; background-position: center top; opacity: .11; } } /* ---------- 23. La mascotte --------------------------------------------- */ /* La volpe compare UNA volta per pagina, in una posa diversa da pagina a pagina: e quello che la fa sembrare una mascotte che gira per il sito e non una decorazione ripetuta col copia-incolla. Tre modi di metterla, tre classi: .volpe-guardia in piedi nell'intestazione della pagina, a destra del titolo. E decorativa: sotto ai 1024 pixel sparisce e la pagina torna esattamente com'era prima .volpe-scena dentro al flusso e grande, dove la volpe E il contenuto: pagina 404, pagina di ringraziamento, chiamata finale della home .volpe-firma piccola, in fondo ai documenti legali, come un timbro Regola che vale per tutte e tre: la volpe non deve mai finire sopra al testo. Dove sta in posizione assoluta (guardia) il testo ha una larghezza massima calcolata che le lascia il posto libero; dove il posto non c'e (schermi stretti) la volpe non si vede proprio. Le tre immagini le produce _build/mascotte.py; nelle pagine si scrive {{VOLPE:posa}} e ci pensa _build/build.py a scrivere misure e versione. */ /* Le proporzioni vere dei tre file, che servono a capire le misure qui sotto: seduta 460x623 (0,74) sdraiata 780x456 (1,71) fronte 384x646 (0,59). Per questo le pose si misurano in ALTEZZA e non in larghezza: a parita di larghezza la volpe di fronte verrebbe alta il triplo di quella sdraiata. */ .volpe { display: block; max-width: 100%; } /* Gli originali guardano tutti verso destra. Quando la volpe sta sul bordo destro le si gira il muso verso il testo: una mascotte che guarda fuori dalla pagina porta l'occhio del lettore fuori dalla pagina. */ .volpe.specchiata { transform: scaleX(-1); } /* --- a) di guardia nell'intestazione ---------------------------------- */ .page-hero.con-volpe .wrap { position: relative; } .page-hero .volpe-guardia { position: absolute; right: var(--gutter); bottom: 0; width: auto; pointer-events: none; } .page-hero .volpe-guardia.volpe-seduta { height: clamp(170px, 19vw, 240px); } .page-hero .volpe-guardia.volpe-fronte { height: clamp(170px, 19vw, 240px); } .page-hero .volpe-guardia.volpe-sdraiata { height: clamp(105px, 12vw, 158px); } /* Lo spazio che il titolo e il sommario lasciano libero alla volpe. La riga successiva rimette il tetto di 62ch al sommario: senza, sugli schermi molto larghi la riga tornerebbe lunga da leggere. */ .page-hero.con-volpe .wrap > * { max-width: calc(100% - 300px); } .page-hero.con-volpe .lead { max-width: min(62ch, calc(100% - 300px)); } .page-hero.con-volpe .volpe-guardia { max-width: none; } @media (max-width: 1023px) { .volpe-guardia { display: none; } .page-hero.con-volpe .wrap > * { max-width: none; } .page-hero.con-volpe .lead { max-width: 62ch; } } /* --- b) in scena, dentro al flusso ------------------------------------ */ .volpe-scena { margin-inline: auto; } .volpe-scena.volpe-seduta { width: min(250px, 58vw); } /* La volpe di fronte e la piu alta delle tre a parita di larghezza (e in piedi e stretta): 200 pixel di larghezza sono gia 336 di altezza. Piu grande di cosi, sulla 404 il titolo finirebbe sotto alla piega. */ .volpe-scena.volpe-fronte { width: min(200px, 52vw); } .volpe-scena.volpe-sdraiata { width: min(390px, 78vw); } /* La chiamata finale della home: banda scura, volpe a sinistra e testo a destra. E l'unico blocco del sito in cui il testo della banda non e centrato, ed e voluto: con la volpe accanto, centrato sembrerebbe storto. */ .cta-band.con-volpe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; text-align: left; } .cta-band.con-volpe p { margin-inline: 0; } .cta-band.con-volpe .btn-row { justify-content: flex-start; } .cta-band.con-volpe .volpe-scena { width: clamp(150px, 17vw, 215px); } @media (max-width: 880px) { .cta-band.con-volpe { grid-template-columns: minmax(0, 1fr); text-align: center; } .cta-band.con-volpe p { margin-inline: auto; } .cta-band.con-volpe .btn-row { justify-content: center; } .cta-band.con-volpe .volpe-scena { width: min(190px, 50vw); } } /* --- c) in firma, in fondo ai documenti legali ------------------------ */ /* Undici schermate di articoli e commi: in fondo la volpe fa da punto fermo. Piccola e leggermente smorzata, perche in un documento legale un'illustrazione a piena forza sembrerebbe finita li per sbaglio. */ .volpe-firma { margin: clamp(28px, 4vw, 44px) auto 0; opacity: .8; } .volpe-firma.volpe-seduta { width: 82px; } .volpe-firma.volpe-fronte { width: 76px; } .volpe-firma.volpe-sdraiata { width: 128px; } /* ---------- 24. Bottone giorno / notte ---------------------------------- */ /* Un bottone solo che fa da interruttore, non due bottoni con uno "acceso": lo stato lo dice l'icona (sole quando sei al buio e puoi tornare al chiaro, luna quando sei al chiaro). aria-pressed dice ai lettori di schermo se il tema scuro e attivo. */ .tema-btn { width: 42px; height: 42px; flex: none; padding: 0; display: inline-grid; place-items: center; position: relative; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--card); color: var(--ink-2); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s, transform .2s; } .tema-btn:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); } .tema-btn svg { width: 19px; height: 19px; grid-area: 1 / 1; transition: opacity .28s ease, transform .45s cubic-bezier(.3,1.4,.5,1); } /* Le due icone stanno una sopra l'altra nella stessa cella: quella che non serve si spegne e si gira, cosi il cambio e una rotazione e non un salto. */ .tema-btn .luna { opacity: 1; transform: rotate(0deg) scale(1); } .tema-btn .sole { opacity: 0; transform: rotate(-90deg) scale(.5); } [data-tema="scuro"] .tema-btn .luna { opacity: 0; transform: rotate(90deg) scale(.5); } [data-tema="scuro"] .tema-btn .sole { opacity: 1; transform: rotate(0deg) scale(1); } /* Sul telefono il bottone esce dal menu a tendina e resta sempre in vista, accanto all'hamburger: e una preferenza, non una voce di menu. */ @media (max-width: 920px) { .tema-btn { order: 2; margin-left: auto; } .nav-toggle { order: 3; } } /* ---------- 25. Lo slogan come sfondo ----------------------------------- */ /* Le due frasi del marchio ("Foxing your business", "Is your website foxing enough?") scritte enormi dietro al contenuto, quasi invisibili. Non sono testo vero: sono decorazione, quindi aria-hidden e pointer-events:none, altrimenti finirebbero lette ad alta voce e selezionabili col cursore. La regola che le tiene a bada: non superano mai il 4% di opacita nel tema chiaro. Sopra, diventano una filigrana che sporca la lettura; sotto, non si vedono affatto e tanto valeva non metterle. */ .con-filigrana { position: relative; isolation: isolate; overflow: hidden; } .filigrana { position: absolute; z-index: -1; pointer-events: none; user-select: none; font-family: var(--font-serif); font-weight: 600; letter-spacing: -.04em; line-height: .82; white-space: nowrap; color: var(--ink); opacity: .045; } [data-tema="scuro"] .filigrana { opacity: .07; } .filigrana em { font-style: italic; color: var(--brand); opacity: .85; } /* a) la filigrana grande, di traverso, in un angolo */ .filigrana-angolo { right: -2vw; bottom: -3vh; font-size: clamp(5rem, 15vw, 15rem); transform: rotate(-6deg); transform-origin: 100% 100%; } .filigrana-angolo.a-sinistra { left: -2vw; right: auto; transform: rotate(6deg); transform-origin: 0 100%; } /* b) la filigrana centrata dietro a un titolo, come un'ombra di carta */ .filigrana-dietro { left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: clamp(4rem, 12vw, 11rem); text-align: center; } /* c) la striscia che scorre piano: due copie affiancate, la seconda entra mentre la prima esce, cosi il giro non ha giunte visibili. Si ferma da sola per chi ha chiesto meno movimento nelle impostazioni del sistema. */ .filigrana-nastro { left: 0; right: 0; top: 50%; transform: translateY(-50%); overflow: hidden; display: flex; } .filigrana-nastro > span { display: inline-block; padding-right: .6em; flex: none; font-size: clamp(3.4rem, 9vw, 8rem); animation: nastro-scorre 46s linear infinite; } @keyframes nastro-scorre { from { transform: translateX(0); } to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .filigrana-nastro > span { animation: none; } } /* ---------- 26. Il varco: l'ingresso al sito ---------------------------- */ /* Schermata a tutto campo che precede la home. Si entra passando il mouse sul medaglione (o toccandolo, sul telefono): l'anello si carica e il velo si apre con un foro che cresce dal centro del medaglione. Tre paletti che non vanno tolti, o diventa una trappola invece che un ingresso: 1. compare UNA volta per sessione e solo sulla home (lo decide lo script); 2. senza JavaScript non compare affatto — il velo parte gia display:none ed e lo script del a metterlo in scena; 3. si esce anche con Invio, con Esc, con un tasto qualsiasi e comunque da solo dopo dodici secondi. Nessuno resta chiuso fuori. Il medaglione e un