/* ========================================================================= MyTutor360 — Foglio di stile condiviso da tutte le pagine del sito. Palette Bianco / Nero / Rosso. Nessuna dipendenza esterna oltre ai font di Google (caricati nell' di ogni pagina). COME MODIFICARE: - I colori sono tutte variabili qui sotto (blocco :root): cambiane uno e si aggiorna in tutto il sito. - I font sono impostati per famiglia: Archivo (titoli), Inter (testo), IBM Plex Mono (etichette/bottoni/tag). - Ogni sezione è separata da un commento ----------, così ti orienti. ========================================================================= */ /* ---------- Variabili di colore (design system) ---------- */ :root{ --bg: #0A0A0A; /* sfondo pagina, nero pieno */ --panel: #141414; /* sfondo card e pannelli */ --parchment: #F4F4F2; /* testo principale, bianco caldo */ --sage: #8C8C8C; /* testo secondario, grigio */ --brass: #E4002B; /* accento rosso: CTA, tag, hover, capolettera */ --brass-dim: #7A0018; /* rosso scuro: bordi e dettagli */ --brass-hover: #FF163C; /* rosso acceso: hover della CTA piena */ --whatsapp: #3FA772; /* verde, SOLO per il bottone WhatsApp */ --line: rgba(244,244,242,0.12); /* linea sottile (hairline) */ --line-strong: rgba(244,244,242,0.26); /* linea più marcata */ } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--parchment); font-family:'Inter', sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; } /* Contenitore centrale. .wrap--narrow serve alle pagine di sola lettura (articoli, privacy, cookie) per una riga di testo più corta e leggibile. */ .wrap{ max-width:920px; margin:0 auto; padding:0 28px; } .wrap--narrow{ max-width:720px; } section{ scroll-margin-top:80px; } /* ---------- Nav (sticky in alto) ---------- */ nav{ position:sticky; top:0; z-index:50; background:rgba(14,14,14,0.9); /* nero semitrasparente, coerente con --panel */ backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .nav-inner{ max-width:920px; margin:0 auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; height:64px; } .nav-logo{ font-family:'Archivo', sans-serif; font-weight:600; font-size:16px; color:var(--parchment); text-decoration:none; } .nav-logo span{ color:var(--brass); } /* la parola "Tutor" in rosso */ .nav-links{ display:flex; gap:30px; list-style:none; margin:0; padding:0; } .nav-links a{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--sage); text-decoration:none; transition:color 0.2s ease; } .nav-links a:hover{ color:var(--parchment); } .nav-cta{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--bg); background:var(--brass); padding:8px 14px; border-radius:3px; text-decoration:none; white-space:nowrap; transition:background 0.15s ease; } .nav-cta:hover{ background:var(--brass-hover); } @media (max-width:760px){ .nav-links{ display:none; } } /* ---------- Hero (solo home) ---------- */ .hero{ min-height:calc(100vh - 64px); display:flex; flex-direction:column; justify-content:center; padding:60px 0 80px; } .hero-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass); display:flex; align-items:center; gap:14px; margin-bottom:36px; opacity:0; animation:rise 0.7s ease forwards; } .hero-eyebrow::before{ content:""; width:28px; height:1px; background:var(--brass); display:inline-block; flex-shrink:0; } .hero-headline{ font-family:'Archivo', sans-serif; font-weight:500; font-size:clamp(36px, 6vw, 70px); line-height:1.05; letter-spacing:-0.02em; margin:0 0 44px; max-width:15ch; color:var(--parchment); opacity:0; animation:rise 0.8s ease 0.15s forwards; } .hero-headline .light-part{ font-weight:400; color:var(--sage); } /* resto della frase, più leggero */ /* Parola rotante: "panico" → "blocco" → "peso". Il tempismo è in assets/hero-rotate.js; qui c'è l'aspetto e l'animazione. */ .word-rotate{ display:inline-block; min-width:5.8ch; /* riserva lo spazio della parola più lunga: niente salti nel layout */ text-align:left; color:var(--parchment); font-weight:900; /* pesantissima, come lo era "peso" */ white-space:nowrap; } .word-rotate__item{ display:inline-block; font-weight:900; opacity:1; transform:translateY(0); transition:transform 450ms cubic-bezier(.4,0,.2,1), opacity 450ms cubic-bezier(.4,0,.2,1); will-change:transform, opacity; } .word-rotate__item.is-leaving{ transform:translateY(-0.55em); opacity:0; } /* uscita verso l'alto */ .word-rotate__item.is-entering{ transform:translateY(0.55em); opacity:0; transition:none; } /* partenza dal basso */ @keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } } .hero-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; opacity:0; animation:rise 0.8s ease 0.3s forwards; } /* ---------- Bottoni ---------- */ .btn{ display:inline-flex; align-items:center; gap:10px; font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.04em; text-decoration:none; padding:14px 24px; border-radius:4px; transition:transform 0.15s ease, opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .btn:hover{ transform:translateY(-2px); } .btn-primary{ background:var(--brass); color:var(--bg); font-weight:500; } .btn-primary:hover{ background:var(--brass-hover); } .btn-ghost{ background:rgba(255,255,255,0.045); /* leggero riempimento a riposo */ color:#f5f4f2; /* testo bianco pieno, alto contrasto */ border:1px solid rgba(255,255,255,0.22); /* bordo più visibile */ } .btn-ghost:hover{ background:rgba(255,255,255,0.09); /* hover: riempimento e bordo si intensificano */ border-color:rgba(255,255,255,0.35); color:#f5f4f2; } /* ---------- Header di sezione (eyebrow + titolo + intro) ---------- */ .section-head{ padding:88px 0 48px; } .eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--brass); display:flex; align-items:center; gap:14px; margin-bottom:22px; } .eyebrow::before{ content:""; width:28px; height:1px; background:var(--brass); display:inline-block; } h2.title{ font-family:'Archivo', sans-serif; font-weight:700; font-size:clamp(32px, 5vw, 48px); line-height:1.1; letter-spacing:-0.01em; margin:0 0 18px; color:var(--parchment); max-width:16ch; } .section-intro{ color:var(--sage); font-size:17px; max-width:54ch; margin:0; } /* ---------- Chi siamo ---------- */ #chi-siamo{ border-top:1px solid var(--line); } .founders{ padding-bottom:56px; } .founder{ display:grid; grid-template-columns:200px 1fr; gap:36px; padding:40px 0; } .founder + .founder{ border-top:1px solid var(--line); } .founder-name{ font-family:'Archivo', sans-serif; font-weight:600; font-size:28px; margin:0 0 6px; } .founder-role{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--brass); } .founder-bio{ font-size:17px; } .founder-bio::first-letter{ /* capolettera rosso */ font-family:'Archivo', sans-serif; font-weight:900; font-size:58px; line-height:0.7; float:left; padding:6px 10px 0 0; color:var(--brass); } .researchers{ padding:56px 0 88px; border-top:1px solid var(--line); } .researchers-label{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.15em; text-transform:uppercase; color:var(--sage); margin-bottom:28px; } .researcher-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 44px; } .researcher{ padding:24px 0; border-top:1px solid var(--line); } .researcher-name-row{ display:flex; align-items:baseline; gap:10px; margin-bottom:6px; flex-wrap:wrap; } .researcher-name{ font-family:'Archivo', sans-serif; font-weight:600; font-size:20px; } .tag{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--brass); border:1px solid var(--brass-dim); border-radius:3px; padding:3px 8px; white-space:nowrap; } .researcher-bio{ font-size:15px; color:var(--sage); max-width:46ch; } /* ---------- Blog (griglia card) ---------- */ #blog{ border-top:1px solid var(--line); padding-bottom:96px; } .blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; /* il gap di 1px + sfondo linea crea l'effetto "schedario" */ background:var(--line); border:1px solid var(--line); margin-top:8px; } /* Variante a colonna singola: usata nella pagina elenco articoli (blog/index.html) */ .blog-grid--list{ grid-template-columns:1fr; } .blog-card{ background:var(--panel); padding:28px 24px; display:flex; flex-direction:column; gap:14px; text-decoration:none; color:var(--parchment); transition:background 0.2s ease; } .blog-card:hover{ background:#1E1E1E; } /* leggerissimo schiarimento, niente colori estranei */ .blog-num{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--brass); letter-spacing:0.05em; } .blog-title{ font-family:'Archivo', sans-serif; font-weight:600; font-size:19px; line-height:1.3; margin:0; } .blog-excerpt{ font-size:14px; color:var(--sage); margin:0; flex-grow:1; } .blog-read{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--brass); margin-top:auto; } /* Etichetta per gli articoli non ancora pubblicati: grigia, non rossa */ .blog-read--soon{ color:var(--sage); } .blog-footer{ margin-top:32px; } .blog-footer a{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--sage); text-decoration:none; border-bottom:1px solid var(--line-strong); padding-bottom:3px; } .blog-footer a:hover{ color:var(--brass); border-color:var(--brass); } /* ---------- Contatti ---------- */ #contatti{ border-top:1px solid var(--line); padding-bottom:100px; } .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:16px; } .contact-card{ background:var(--panel); padding:38px 32px; display:flex; flex-direction:column; gap:14px; } .contact-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass); } .contact-detail{ font-family:'Archivo', sans-serif; font-weight:500; font-size:21px; line-height:1.3; } .contact-note{ font-size:14px; color:var(--sage); margin:0; } .btn-whatsapp{ background:var(--whatsapp); color:#0F1C15; font-weight:500; margin-top:4px; } .btn-whatsapp svg{ width:16px; height:16px; fill:#0F1C15; } .btn-outline{ background:transparent; border:1px solid var(--line-strong); color:var(--parchment); margin-top:4px; } .btn-outline svg{ width:15px; height:15px; fill:var(--parchment); } .btn-outline:hover{ border-color:var(--brass); } .contact-footer-note{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--sage); margin-top:26px; } /* ---------- Pagine interne: intestazione e link "indietro" ---------- */ .page-head{ padding:72px 0 40px; } .page-head .title{ max-width:22ch; } .back-link{ display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--sage); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:3px; transition:color 0.2s ease, border-color 0.2s ease; } .back-link:hover{ color:var(--brass); border-color:var(--brass); } /* ---------- Blog: pagina del singolo articolo ---------- */ .article{ padding-bottom:96px; } /* Riquadro "articolo in arrivo": bordo rosso a sinistra per farsi notare */ .article-notice{ border:1px solid var(--brass-dim); border-left:3px solid var(--brass); background:var(--panel); padding:22px 24px; margin:8px 0 40px; } .article-notice p{ margin:0; color:var(--sage); font-size:15px; } .article-notice strong{ color:var(--parchment); font-weight:600; } /* Titolo lungo di un articolo vero: usa tutta la larghezza della colonna */ .article .page-head .title{ max-width:none; } /* Intro / occhiello dell'articolo (le prime righe, più grandi e in grigio) */ .article-lead{ font-size:19px; color:var(--sage); max-width:62ch; margin-bottom:8px; } .article-lead p{ margin:0 0 18px; } /* Corpo dell'articolo: qui va il testo vero (paragrafi, sottotitoli, elenchi) */ .article-body{ color:var(--parchment); font-size:17px; max-width:66ch; } .article-body p{ margin:0 0 20px; } .article-body h2{ font-family:'Archivo', sans-serif; font-weight:700; font-size:26px; line-height:1.2; letter-spacing:-0.01em; margin:48px 0 14px; color:var(--parchment); } .article-body h3{ font-family:'Archivo', sans-serif; font-weight:600; font-size:19px; margin:32px 0 10px; color:var(--parchment); } .article-body ul{ padding-left:22px; margin:0 0 20px; } .article-body li{ margin-bottom:10px; } .article-body strong{ color:var(--parchment); font-weight:600; } .article-body a{ color:var(--brass); text-decoration:none; border-bottom:1px solid var(--brass-dim); } .article-body a:hover{ border-color:var(--brass); } /* ---------- "Continua a leggere" (in fondo a ogni articolo) ---------- */ .read-next{ margin-top:72px; padding-top:36px; border-top:1px solid var(--line-strong); } .read-next__label{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.15em; text-transform:uppercase; color:var(--sage); margin-bottom:6px; } /* Ogni voce è una riga con hairline divider, coerente con l'elenco del team */ .read-next__item{ display:block; padding:22px 0; border-top:1px solid var(--line); text-decoration:none; color:var(--parchment); } .read-next__title{ font-family:'Archivo', sans-serif; font-weight:600; font-size:18px; line-height:1.3; margin:0 0 4px; transition:color 0.2s ease; } .read-next__desc{ font-size:14px; color:var(--sage); margin:0; } .read-next__item:hover .read-next__title{ color:var(--brass); } /* ---------- Pagine legali (privacy, cookie) ---------- */ .legal{ padding-bottom:96px; } .legal h2{ font-family:'Archivo', sans-serif; font-weight:700; font-size:22px; line-height:1.25; margin:44px 0 12px; color:var(--parchment); } .legal h3{ font-family:'Archivo', sans-serif; font-weight:600; font-size:17px; margin:26px 0 8px; color:var(--parchment); } .legal p, .legal li{ color:var(--sage); font-size:16px; } .legal a{ color:var(--brass); text-decoration:none; border-bottom:1px solid var(--brass-dim); } .legal a:hover{ border-color:var(--brass); } .legal ul{ padding-left:20px; margin:0 0 20px; } .legal li{ margin-bottom:8px; } /* Data di aggiornamento, in mono e piccola */ .legal-updated{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.04em; color:var(--sage); margin-top:6px; } /* Riquadro con i dati del titolare (da compilare) */ .legal-meta{ border:1px solid var(--line); background:var(--panel); padding:20px 24px; margin:12px 0 20px; font-size:15px; } .legal-meta p{ margin:4px 0; } /* Nota finale: "questa è una bozza, falla controllare da un legale" */ .legal-draft-note{ border:1px solid var(--brass-dim); border-left:3px solid var(--brass); background:var(--panel); padding:20px 24px; margin-top:48px; font-size:15px; color:var(--sage); } .legal-draft-note strong{ color:var(--parchment); } /* ---------- Footer ---------- */ footer{ border-top:1px solid var(--line); } .footer-inner{ max-width:920px; margin:0 auto; padding:28px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .footer-copy{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--sage); letter-spacing:0.02em; } .footer-links{ display:flex; gap:22px; list-style:none; margin:0; padding:0; } .footer-links a{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.04em; color:var(--sage); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; transition:color 0.2s ease, border-color 0.2s ease; } .footer-links a:hover{ color:var(--brass); border-color:var(--brass); } /* ---------- Cookie banner (iniettato da assets/cookie-consent.js) ---------- */ .cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:100; background:var(--panel); border-top:1px solid var(--line-strong); padding:18px 20px; animation:cookie-rise 0.4s ease; } @keyframes cookie-rise{ from{ transform:translateY(100%); } to{ transform:translateY(0); } } .cookie-banner__inner{ max-width:920px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .cookie-banner__text{ font-size:13.5px; color:var(--sage); margin:0; max-width:62ch; } .cookie-banner__text a{ color:var(--brass); text-decoration:none; border-bottom:1px solid var(--brass-dim); } .cookie-banner__text a:hover{ border-color:var(--brass); } .cookie-banner__actions{ display:flex; gap:12px; flex-shrink:0; } .cookie-btn{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.04em; text-transform:uppercase; padding:10px 18px; border-radius:4px; cursor:pointer; border:1px solid var(--line-strong); background:transparent; color:var(--parchment); transition:transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .cookie-btn:hover{ transform:translateY(-1px); } .cookie-btn--reject:hover{ border-color:var(--brass); } .cookie-btn--accept{ background:var(--brass); border-color:var(--brass); color:var(--bg); font-weight:500; } .cookie-btn--accept:hover{ background:var(--brass-hover); border-color:var(--brass-hover); } @media (max-width:560px){ .cookie-banner__inner{ align-items:stretch; } .cookie-banner__actions{ width:100%; } .cookie-btn{ flex:1; } } /* ---------- Responsive: da 2/3 colonne a colonna singola ---------- */ @media (max-width: 760px){ .founder{ grid-template-columns:1fr; gap:12px; } .researcher-grid{ grid-template-columns:1fr; } .blog-grid{ grid-template-columns:1fr; } .contact-grid{ grid-template-columns:1fr; } } @media (max-width:520px){ .footer-inner{ flex-direction:column; align-items:flex-start; } } /* ---------- Accessibilità ---------- */ /* Contorno ben visibile per chi naviga da tastiera */ :focus-visible{ outline:2px solid var(--brass); outline-offset:3px; } /* Rispetta la preferenza di sistema "riduci le animazioni" */ @media (prefers-reduced-motion: reduce){ .hero-eyebrow, .hero-headline, .hero-actions{ opacity:1; animation:none; } .cookie-banner{ animation:none; } .word-rotate__item{ transition:none; } /* niente rotazione: resta "peso" fisso */ html{ scroll-behavior:auto; } }