/* ============================================================================ SEASON GENERATOR — sistema di design delle pagine prodotto ---------------------------------------------------------------------------- Questo file e' la sola fonte dello stile. Le pagine non ridefiniscono colori ne' caratteri: usano i token e le classi che stanno qui. Tre regole che tengono insieme tutto: 1. LA LUCE VIVE NEL BUIO. Il prodotto e' luce: su fondo chiaro la si puo' rendere solo scurendo. Percio' le fasce che mostrano il prodotto acceso sono su fondo notte, e tutto quello che si legge sta sulla carta chiara. 2. GRIGLIE A FILO. Bordi da un pixel, niente angoli arrotondati, niente ombre diffuse. L'unica ombra e' quella sotto le foto delle schede, che serve a staccare un oggetto bianco da un piano chiaro. 3. TRE CARATTERI, TRE MESTIERI. Chivo per i titoli, Karla per il testo, IBM Plex Mono per numeri, codici, sigle ed etichette. Da mettere nel di ogni pagina: ========================================================================== */ :root{ /* --- superfici chiare: qui si legge --- */ --paper:#f7f9fa; /* fondo della pagina */ --panel:#ffffff; /* riquadri, tabelle, schede */ --ink:#12202a; /* testo */ --muted:#5f7381; /* testo secondario */ --rule:#d5dfe6; /* filetti */ --rule-soft:#e6edf1; /* filetti interni alle tabelle */ /* --- accento: azzurro, lo stesso azzurro del LED luna --- */ --accent:#0f7ab5; --accent-ink:#0a5c8a; /* per il testo dei link, contrasto AA su bianco */ /* --- semantica --- */ --ok:#3d8b27; --warn:#a9520f; --green:#4b9f38; /* il verde del marchio: azioni, non sfondi */ /* --- superfici notte: qui si mostra il prodotto acceso --- */ --night:#0a1219; --night-2:#0f1c25; --night-line:#22343f; --night-ink:#eaf2f6; --night-muted:#8ba3b1; /* --- le due luci del prodotto --- */ --lamp:#ffe6b3; /* bianco 5700 K, reso caldo perche' sia leggibile */ --moon:#7fb4ff; /* il canale blu, effetto luna */ /* --- il piano su cui si appoggiano le foto delle schede --- */ --plate-1:#e8f0f6; --plate-2:#cfdde8; --plate-3:#c3d4e1; --plate-line:#93aec4; --plate-ink:#41637c; } *{box-sizing:border-box} body{ margin:0;background:var(--paper);color:var(--ink); font-family:Karla,"Segoe UI",system-ui,sans-serif; font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased; } h1,h2,h3{ font-family:Chivo,"Segoe UI",system-ui,sans-serif;font-weight:900; margin:0;line-height:1.02;text-wrap:balance; } h1{font-size:clamp(2.4rem,5.4vw,4.1rem);letter-spacing:-.034em} h2{font-size:clamp(1.5rem,2.8vw,2.2rem);letter-spacing:-.024em} h3{font-size:1.02rem;font-weight:700;letter-spacing:-.01em} p{margin:0} a{color:var(--accent-ink)} .wrap{max-width:1220px;margin:0 auto;padding:0 22px} section{padding:56px 0} /* l'occhiello: sempre sopra un titolo, mai da solo */ .eyebrow{ font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.18em; text-transform:uppercase;color:var(--accent); } .mono,.code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums} .lede{margin-top:16px;font-size:1.06rem;color:var(--muted);max-width:58ch} .sec-head{display:flex;flex-direction:column;gap:9px;margin-bottom:24px;max-width:68ch} .sec-head p{color:var(--muted)} /* ---------------------------------------------------------------- testata */ .top{border-bottom:1px solid var(--rule);background:var(--panel)} .top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px; padding-top:14px;padding-bottom:14px;flex-wrap:wrap} .brand{display:grid;gap:1px;text-decoration:none;color:inherit} .brand span{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.2em;color:var(--accent)} .brand strong{font-family:Chivo,sans-serif;font-weight:900;font-size:1.02rem;letter-spacing:-.01em} .top nav{display:flex;gap:2px;flex-wrap:wrap} .top nav a{font-size:.86rem;padding:7px 12px;text-decoration:none;color:var(--muted); border:1px solid transparent} .top nav a:hover{color:var(--ink);border-color:var(--rule)} .top nav a[aria-current]{color:var(--ink);border-color:var(--rule);background:var(--paper);font-weight:700} /* ---------------------------------------------------------------- pulsanti */ .btn{display:inline-flex;align-items:center;min-height:46px;padding:11px 20px; text-decoration:none;font-weight:700;font-size:.95rem;border:1px solid transparent} .btn.primary{background:var(--green);color:#06180a;border-color:var(--green)} .btn.primary:hover{background:#57b342} .btn.moon{background:var(--moon);color:#08131f} .btn.moon:hover{background:#9cc6ff} .btn.ghost{border-color:rgba(255,255,255,.32);color:var(--night-ink)} .btn.ghost:hover{border-color:rgba(255,255,255,.7)} .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px} /* ------------------------------------------------- apertura su fondo notte Due varianti: .hero con un video dietro, .show senza. */ .hero{position:relative;background:var(--night);color:var(--night-ink); overflow:hidden;isolation:isolate} .hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; z-index:-2;opacity:.62} .hero .veil{position:absolute;inset:0;z-index:-1;background: linear-gradient(100deg,rgba(10,18,25,.96) 0%,rgba(10,18,25,.80) 42%,rgba(10,18,25,.28) 78%), linear-gradient(0deg,rgba(10,18,25,.92) 0%,transparent 46%)} .hero .wrap{padding-top:76px;padding-bottom:64px;min-height:min(78vh,660px); display:grid;align-content:end;gap:22px} .hero h1{max-width:15ch} .show{background:var(--night);color:var(--night-ink)} .show .wrap{padding-top:46px;padding-bottom:38px} .hero .eyebrow,.show .eyebrow{color:var(--moon)} .hero h1 em,.show h1 em{font-style:normal;color:var(--lamp)} .hero .lede,.show .lede{color:#bacdd8;max-width:54ch} .hero-caption{display:inline-flex;align-items:center;gap:10px;justify-self:start; padding:8px 13px;border:1px solid rgba(255,255,255,.20);background:rgba(10,18,25,.6); font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.05em;color:#b9cdd8} .hero-caption .dot{width:8px;height:8px;background:var(--lamp);display:inline-block} /* -------------------------------------------- il piano per le foto prodotto La scheda e' bianca: su un piano bianco il contorno sparisce. Il piano e' azzurrino e la foto ha un'ombra, cosi' l'oggetto si stacca. La foto va ritagliata esattamente sul contorno della scheda, senza margine di carta. */ .photo-plate{margin:14px 0 4px;padding:26px 26px 16px; background:linear-gradient(160deg,var(--plate-1) 0%,var(--plate-2) 62%,var(--plate-3) 100%); border:1px solid var(--plate-line)} .photo-plate img{display:block;width:100%;height:auto; filter:drop-shadow(0 3px 7px rgba(23,45,62,.34))} .photo-plate figcaption{margin-top:20px;padding-top:12px; border-top:1px solid rgba(23,45,62,.20); font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.05em; color:var(--plate-ink);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} /* --------------------------------------------------------- dati e numeri */ .specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); border-top:1px solid var(--rule);border-left:1px solid var(--rule)} .spec{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule); padding:13px 15px;background:var(--panel)} .spec dt{font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} .spec dd{margin:3px 0 0;font-family:Chivo,sans-serif;font-weight:900;font-size:1.28rem; letter-spacing:-.02em} .spec dd small{display:block;font-family:Karla,sans-serif;font-weight:400;font-size:.76rem; color:var(--muted);letter-spacing:0} /* le stesse celle, ma come dati sintetici accanto a un titolo */ .kpis{display:grid;grid-template-columns:1fr 1fr; border-top:1px solid var(--rule);border-left:1px solid var(--rule)} .kpi{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule); padding:13px 15px;background:var(--panel)} .kpi b{display:block;font-family:Chivo,sans-serif;font-weight:900;font-size:1.34rem; letter-spacing:-.02em;line-height:1.1} .kpi span{display:block;font-size:.76rem;color:var(--muted);margin-top:3px} /* riquadri su fondo notte */ .facts{display:grid;grid-template-columns:1fr 1fr; border-top:1px solid var(--night-line);border-left:1px solid var(--night-line)} .facts div{border-right:1px solid var(--night-line);border-bottom:1px solid var(--night-line); padding:14px 16px} .facts b{display:block;font-family:Chivo,sans-serif;font-weight:900;font-size:1.3rem; letter-spacing:-.02em;color:var(--night-ink)} .facts span{font-size:.78rem;color:var(--night-muted)} /* -------------------------------------------------------------- tabelle */ .table-scroll{overflow-x:auto;border:1px solid var(--rule);background:var(--panel)} table{border-collapse:collapse;width:100%;min-width:680px;font-size:.88rem} th,td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--rule-soft)} thead th{font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.13em; text-transform:uppercase;color:var(--muted);font-weight:500; background:var(--paper);border-bottom:1px solid var(--rule)} tbody tr:last-child td{border-bottom:0} tbody tr.is-current{background:#eef6fa} td.num,th.num{text-align:right;font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;white-space:nowrap} td .code{font-size:.8rem;color:var(--muted)} /* quando un dato non c'e', si dice: non si inventa e non si mette un trattino muto */ .missing{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--warn)} /* -------------------------------------------------------------- schede */ .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); border-top:1px solid var(--rule);border-left:1px solid var(--rule)} .card{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule); padding:22px;background:var(--panel);display:flex;flex-direction:column;gap:11px} .card .tag{align-self:flex-start;font-family:"IBM Plex Mono",monospace;font-size:.64rem; letter-spacing:.15em;text-transform:uppercase;padding:3px 8px; border:1px solid var(--rule);color:var(--muted)} .card.pro .tag{border-color:var(--accent);color:var(--accent-ink)} .card p,.card ul{font-size:.92rem;color:var(--muted)} .card ul{margin:0;padding-left:1.05em} .card li{margin-bottom:4px} .card li b{color:var(--ink)} /* i colori dei fili, quando si spiega un cablaggio */ .wires{display:flex;gap:5px;align-items:center;flex-wrap:wrap; font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--muted)} .wires .w{display:inline-block;width:24px;height:5px;border:1px solid var(--rule)} /* ----------------------------------------------------- avvisi in linea */ .alert{padding:10px 14px;font-size:.87rem;border-left:3px solid var(--warn);background:#fff6ee} .alert.ok{border-left-color:var(--ok);background:#f1f8ee} .alert b{font-weight:700} /* ------------------------------------------------ passi di un processo */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); border-top:1px solid var(--rule);border-left:1px solid var(--rule)} .step{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule); padding:17px 18px;background:var(--panel)} .step .when{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em; text-transform:uppercase;color:var(--accent)} .step b{display:block;font-family:Chivo,sans-serif;font-weight:900;font-size:1.24rem; letter-spacing:-.02em;margin:4px 0 5px} .step p{font-size:.88rem;color:var(--muted)} /* ------------------------------------------------------- chiusure pagina */ .notes{background:var(--panel);border-top:1px solid var(--rule)} .notes ol,.notes ul{margin:0;padding-left:1.2em;color:var(--muted);font-size:.9rem; display:grid;gap:8px} .notes b{color:var(--ink)} footer{border-top:1px solid var(--rule);padding:24px 0 44px;font-size:.8rem;color:var(--muted)} /* ------------------------------------------------------------- risposta */ @media (max-width:880px){ .kpis{grid-template-columns:1fr 1fr} .facts{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .hero video{display:none} *{transition:none!important;animation:none!important} } /* Barrette: note di catalogo; il marchio è gestito da brand-font.css. */ .sg-barrette-note{font-size:.875rem;color:var(--muted);margin-top:12px}