/* pwa.css — Landing PWA page (mff-site) Porta le lp-* classes della mff-pwa LandingPage su mff-site. Richiede: global.css (già caricato) ============================================================= */ /* ── Variables missing from global.css ──────────────────────── */ :root { --sans: 'Source Sans 3', system-ui, sans-serif; --serif: 'Playfair Display', Georgia, serif; --mono: 'JetBrains Mono', monospace; --card-border: rgba(181,96,58,0.2); --border-soft: rgba(181,96,58,0.11); --text-dim: #9BB0C8; } [data-theme="light"] { --card-border: #DCC8A8; --border-soft: #E8DFC8; --text-dim: #5C6473; } /* ── Language visibility ─────────────────────────────────────── */ /* PWA-i18n FIX 2026-06-08 — i18n.js imposta document.documentElement.lang (cioè ), NON un attributo data-lang. Il selettore precedente `[data-lang="..."]` non matchava mai → lo switch lingua non nascondeva nulla → pagina sempre in italiano. Allineato al JS. */ html[lang="en"] .lang-it, [lang="en"] .lang-it { display: none !important; } html[lang="it"] .lang-en, [lang="it"] .lang-en { display: none !important; } /* Fallback iniziale: prima che JS inietti il lang, mostra italiano e nasconde inglese (evita flash di entrambi sovrapposti). */ .lang-en { display: none; } html[lang="en"] .lang-en, [lang="en"] .lang-en { display: inline; } /* ─── Reveal animation ───────────────────────────────────────── */ .lp-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1), transform 0.55s cubic-bezier(0.4,0,0.2,1); } .lp-visible { opacity: 1; transform: translateY(0); } /* ─── Root wrapper ───────────────────────────────────────────── */ .lp-root { min-height: 100dvh; background: var(--bg-main); color: var(--text-main); font-family: var(--sans); /* Fix horizontal overflow su mobile (safe perché la sticky TOC bar è ora figlia diretta di , FUORI da .lp-root, quindi il containing block di .lp-root non la intrappola più). */ overflow-x: hidden; } /* ─── Container ──────────────────────────────────────────────── */ .lp-container { max-width: 1120px; margin: 0 auto; padding: 0 2rem; } /* ─── Nav ────────────────────────────────────────────────────── */ .lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 64px; background: rgba(13,27,53,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-light); } [data-theme="light"] .lp-nav { background: rgba(247,242,233,0.90); } .lp-nav-inner { max-width: 1120px; margin: 0 auto; padding: 0 2rem; height: 100%; display: flex; align-items: center; gap: 1rem; } .lp-nav-brand { font-family: var(--serif); font-weight: 700; font-size: 1.125rem; color: var(--text-main); letter-spacing: -0.01em; white-space: nowrap; background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; } .lp-nav-brand span.accent { color: var(--copper); } .lp-nav-links { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; } .lp-nav-item { padding: 0.375rem 0.75rem; border-radius: 6px; font-size: 0.6875rem; font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); background: none; border: none; cursor: pointer; transition: color 0.15s, background 0.15s; white-space: nowrap; text-decoration: none; } .lp-nav-item:hover { color: var(--text-main); background: rgba(181,96,58,0.08); } .lp-nav-item.is-active { color: var(--text-main); background: rgba(181,96,58,0.13); box-shadow: inset 0 -2px 0 var(--copper); } .lp-nav-privacy { opacity: 0.7; } .lp-nav-sep { width: 1px; height: 22px; background: var(--border-light); margin: 0 0.25rem; flex-shrink: 0; } .lp-nav-cta { padding: 0.4rem 1rem; border-radius: 6px; background: var(--copper); color: #fff; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: none; cursor: pointer; transition: background 0.15s, transform 0.08s, box-shadow 0.15s; white-space: nowrap; margin-left: 0.25rem; text-decoration: none; } .lp-nav-cta:hover { background: var(--copper-lt); transform: translateY(-1px); box-shadow: 0 3px 12px rgba(181,96,58,0.35); } .lp-theme-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: none; border: 1px solid var(--border-light); cursor: pointer; font-size: 1rem; color: var(--text-muted); transition: background 0.15s, border-color 0.15s; } .lp-theme-btn:hover { background: rgba(181,96,58,0.08); border-color: var(--copper); } @keyframes lp-theme-spin { 0% { transform: scale(1) rotate(0deg); } 35% { transform: scale(1.28) rotate(200deg); } 70% { transform: scale(0.92) rotate(340deg); } 100% { transform: scale(1) rotate(360deg); } } .lp-theme-btn.is-spinning { animation: lp-theme-spin 0.42s cubic-bezier(0.4, 0, 0.2, 1); } .lp-lang-single { display: inline-flex; align-items: center; gap: 6px; padding: 0.3rem 0.625rem; border: 1px solid var(--border-light); border-radius: 6px; background: none; cursor: pointer; font-size: 0.6875rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; } .lp-lang-single:hover { background: rgba(181,96,58,0.08); border-color: var(--copper); color: var(--text-main); } /* Mobile nav */ .lp-nav-mobile { display: none; align-items: center; gap: 0.5rem; margin-left: auto; } /* APP badge */ .lp-nav-app-badge { font-family: var(--sans); font-size: 0.575rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper); opacity: 0.7; background: rgba(181,96,58,0.1); border: 1px solid rgba(181,96,58,0.25); border-radius: 4px; padding: 1px 5px; margin-left: 2px; align-self: center; flex-shrink: 0; } /* ─── Hero ───────────────────────────────────────────────────── */ .lp-hero { position: relative; min-height: 100vh; padding: 7rem 0 5rem; display: flex; align-items: center; background: linear-gradient(150deg, var(--bg-main) 0%, var(--navy-mid) 45%, var(--bg-main) 100% ); overflow: hidden; } [data-theme="light"] .lp-hero { background: linear-gradient(150deg, #F7F2E9 0%, #E8DFC8 45%, #F7F2E9 100% ); } .lp-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(181,96,58,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(181,96,58,0.06) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; } [data-theme="light"] .lp-hero-grid { background-image: linear-gradient(rgba(181,96,58,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(181,96,58,0.08) 1px, transparent 1px); } .lp-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; } .lp-hero-left { display: flex; flex-direction: column; gap: 1.5rem; } .lp-hero-right { display: flex; flex-direction: column; gap: 1.5rem; } /* ─── Section labels & headings ──────────────────────────────── */ .lp-section-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--copper); margin-bottom: 0.625rem; } .lp-section-title { font-family: var(--serif); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.2; color: var(--text-main); margin-bottom: 0.875rem; } .lp-section-sub { font-size: 1rem; color: var(--text-muted); line-height: 1.7; max-width: 64ch; margin-bottom: 2.5rem; } /* ─── Hero title ─────────────────────────────────────────────── */ .lp-hero-title { font-family: var(--serif); font-size: clamp(2.5rem, 5.5vw, 4rem); font-weight: 900; line-height: 1.1; color: var(--text-main); letter-spacing: -0.02em; } .lp-title-accent { color: var(--copper); } .lp-hero-tagline { font-size: 1.0625rem; color: var(--text-muted); line-height: 1.75; max-width: 50ch; } .lp-hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; } .lp-hero-sub { font-size: 0.8125rem; color: var(--text-muted); opacity: 0.75; } /* ─── Stat boxes ─────────────────────────────────────────────── */ .lp-stat-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; } .lp-stat-box { background: var(--bg-card); border: 1px solid var(--border-light); border-top: 3px solid var(--copper); border-radius: 10px; padding: 1.125rem 1.25rem; box-shadow: var(--shadow-card); transition: var(--transition); backdrop-filter: blur(8px); } .lp-stat-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--copper); border-top-color: var(--copper); } .lp-stat-num { font-family: var(--serif); font-size: 2rem; font-weight: 900; color: var(--copper); line-height: 1; margin-bottom: 0.3rem; } .lp-stat-lbl { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } /* ─── Terminal decoration ────────────────────────────────────── */ .lp-terminal { background: #0A1426; border: 1px solid var(--border-dark); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-lift); font-family: var(--mono); font-size: 0.8125rem; } [data-theme="light"] .lp-terminal { background: #1A1F2E; border-color: #2D3748; } .lp-term-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; background: rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.06); } .lp-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .lp-dot.red { background: #FF5F57; } .lp-dot.yellow { background: #FEBC2E; } .lp-dot.green { background: #28C840; } .lp-term-title { font-size: 0.6875rem; color: rgba(255,255,255,0.35); margin-left: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-term-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.875rem; } .lp-term-line { display: flex; gap: 0.625rem; font-size: 0.8125rem; color: rgba(255,255,255,0.85); line-height: 1.6; } .lp-term-line.user { color: rgba(255,255,255,0.55); } .lp-term-role { font-weight: 700; flex-shrink: 0; min-width: 2.5rem; } .lp-term-line.user .lp-term-role { color: var(--text-muted); } .lp-term-line.assistant .lp-term-role { color: var(--copper); } .lp-tag { display: inline-block; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.04em; padding: 0.05rem 0.3rem; border-radius: 3px; margin-right: 0.25rem; vertical-align: middle; border: 1px solid transparent; } .lp-tag.l1 { color: #4ADE80; border-color: rgba(74,222,128,0.4); background: rgba(74,222,128,0.08); } .lp-tag.l2 { color: #60A5FA; border-color: rgba(96,165,250,0.4); background: rgba(96,165,250,0.08); } .lp-tag.l3 { color: #C084FC; border-color: rgba(192,132,252,0.4); background: rgba(192,132,252,0.08); } /* ─── Divider ────────────────────────────────────────────────── */ .lp-divider { border: none; height: 1px; background: linear-gradient( 90deg, transparent, var(--copper) 20%, var(--navy-mid) 70%, transparent ); margin: 0; opacity: 0.5; } /* ─── Sections ───────────────────────────────────────────────── */ .lp-section { padding: 5rem 0; } .lp-bg-alt { background: var(--bg-alt); } /* ─── Features (ep-card) ─────────────────────────────────────── */ .lp-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .lp-ep-card { background: var(--bg-card); border: 1px solid var(--card-border); border-top: 4px solid var(--card-accent, var(--copper)); border-radius: 12px; padding: 1.75rem 1.5rem; box-shadow: var(--shadow-card); transition: var(--transition); display: flex; flex-direction: column; gap: 0.625rem; } .lp-ep-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .lp-ep-icon { font-size: 1.75rem; line-height: 1; margin-bottom: 0.25rem; } .lp-ep-name { font-family: var(--serif); font-size: 1.1875rem; font-weight: 700; color: var(--text-main); line-height: 1.3; } .lp-ep-desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; } /* ─── Levels grid (module-card) ──────────────────────────────── */ .lp-levels-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.125rem; margin-top: 2.5rem; } .lp-module-card { background: var(--bg-card); border: 1px solid var(--card-border); border-radius: 10px; padding: 1.375rem 1.25rem; box-shadow: var(--shadow-card); transition: var(--transition); display: flex; flex-direction: column; gap: 0.375rem; cursor: default; } .lp-module-card:hover { border-color: var(--copper); transform: translateY(-3px); box-shadow: var(--shadow-lift); } .lp-module-fixed { border-color: rgba(181,96,58,0.4); background: rgba(181,96,58,0.04); } .lp-module-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .lp-module-badge { font-family: var(--mono); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; padding: 0.2rem 0.5rem; border-radius: 4px; border: 1px solid currentColor; line-height: 1; } .lp-fixed-badge { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--copper); background: rgba(181,96,58,0.1); border: 1px solid rgba(181,96,58,0.3); border-radius: 9999px; padding: 0.15rem 0.5rem; white-space: nowrap; } .lp-module-name { font-family: var(--serif); font-size: 0.9375rem; font-weight: 700; color: var(--text-main); line-height: 1.3; } .lp-module-bridge { font-size: 0.8125rem; font-weight: 600; font-style: italic; color: var(--copper); line-height: 1.45; opacity: 0.9; } .lp-module-desc { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.6; } /* ─── Steps (how it works) ───────────────────────────────────── */ .lp-steps { display: flex; flex-direction: column; gap: 0; margin-top: 2.5rem; position: relative; } .lp-steps::before { content: ''; position: absolute; left: 28px; top: 40px; bottom: 40px; width: 1px; background: linear-gradient(to bottom, var(--copper), transparent); opacity: 0.3; } .lp-step { display: flex; gap: 1.75rem; padding: 1.75rem 0; border-bottom: 1px solid var(--border-soft); align-items: flex-start; } .lp-step:last-child { border-bottom: none; } .lp-step-num { font-family: var(--mono); font-size: 1.25rem; font-weight: 800; color: var(--copper); opacity: 0.7; width: 56px; flex-shrink: 0; padding-top: 0.125rem; } .lp-step-content { flex: 1; } .lp-step-title { font-family: var(--serif); font-size: 1.1875rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.4rem; } .lp-step-desc { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.7; } /* ─── CTA section ────────────────────────────────────────────── */ .lp-cta-section { padding: 5rem 0 6rem; background: linear-gradient(150deg, var(--bg-main) 0%, var(--navy-mid) 50%, var(--bg-main) 100%); position: relative; overflow: hidden; text-align: center; } [data-theme="light"] .lp-cta-section { background: linear-gradient(150deg, #F7F2E9 0%, #E8DFC8 50%, #F7F2E9 100%); } .lp-cta-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(181,96,58,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(181,96,58,0.05) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; } .lp-cta-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.125rem; max-width: 600px; margin: 0 auto; } .lp-cta-title { font-family: var(--serif); font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 900; color: var(--text-main); line-height: 1.2; letter-spacing: -0.02em; } .lp-cta-subtitle { font-size: 1.125rem; color: var(--text-muted); line-height: 1.7; } /* ─── Buttons ────────────────────────────────────────────────── */ .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.625rem; border-radius: 8px; font-family: var(--sans); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border: none; cursor: pointer; transition: background 0.15s, transform 0.08s, box-shadow 0.15s, border-color 0.15s; white-space: nowrap; text-decoration: none; } .lp-btn-primary { background: var(--copper); color: #fff; box-shadow: 0 3px 12px rgba(181,96,58,0.28); } .lp-btn-primary:hover { background: var(--copper-lt); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(181,96,58,0.42); } .lp-btn-primary:active { transform: translateY(0); } .lp-btn-outline { background: transparent; color: var(--text-muted); border: 1px solid var(--border-light); } .lp-btn-outline:hover { color: var(--text-main); border-color: var(--copper); background: rgba(181,96,58,0.05); transform: translateY(-1px); } .lp-btn-lg { padding: 0.9rem 2.5rem; font-size: 1rem; letter-spacing: 0.12em; } /* ─── Footer ─────────────────────────────────────────────────── */ .lp-footer { background: var(--bg-section); border-top: 1px solid var(--border-light); padding: 2rem 0; } .lp-footer-logo { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--text-main); margin-bottom: 6px; text-align: center; } .lp-footer-logo span { color: var(--copper); } .lp-footer-claim { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.3em; color: var(--copper); text-transform: uppercase; margin: 6px 0 24px; text-align: center; } .lp-legal-accordion { border: 1px solid var(--border-soft); border-radius: 8px; margin-bottom: 20px; overflow: hidden; } .lp-legal-summary { padding: 12px 18px; font-size: 0.8125rem; font-weight: 600; color: var(--text-dim); cursor: pointer; user-select: none; list-style: none; transition: background 0.15s, color 0.15s; } .lp-legal-summary::-webkit-details-marker { display: none; } .lp-legal-summary:hover { background: rgba(181,96,58,0.05); color: var(--text-main); } .lp-legal-content { padding: 14px 18px 16px; font-size: 0.8rem; color: var(--text-muted); line-height: 1.7; border-top: 1px solid var(--border-soft); } .lp-footer-pids { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; } .lp-pid-btn { font-size: 0.625rem; padding: 5px 12px; color: var(--text-muted); border: 1px solid var(--border-soft); border-radius: 6px; background: none; cursor: pointer; text-decoration: none; font-weight: 600; transition: color 0.15s, border-color 0.15s; display: inline-block; } .lp-pid-btn:hover { color: var(--copper); border-color: var(--copper); } /* (Community placeholder rimosso 2026-06-05 cleanup — sostituito da .community-strip in global.css) */ /* ─── Ironic footer ──────────────────────────────────────────── */ .lp-footer-ironic { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; text-align: center; padding: 28px 20px; background: var(--bg-main); border-top: 1px solid var(--border-light); } .lp-footer-ironic-text { flex: 1; min-width: 200px; max-width: 500px; } .lp-footer-ironic-1 { font-size: 0.6875rem; font-weight: 700; color: var(--copper); letter-spacing: 0.06em; margin-bottom: 6px; text-transform: uppercase; } .lp-footer-ironic-2 { font-size: 0.6875rem; color: var(--text-muted); line-height: 1.6; } /* ─── Responsive ─────────────────────────────────────────────── */ @media (max-width: 1024px) { .lp-levels-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .lp-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; } .lp-hero-right { order: -1; } .lp-features-grid { grid-template-columns: 1fr; gap: 1.125rem; } .lp-levels-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .lp-nav-links { display: none; } .lp-nav-mobile { display: flex; } .lp-container { padding: 0 1.25rem; } .lp-hero { padding: 5.5rem 0 3.5rem; min-height: auto; } .lp-section { padding: 3.5rem 0; } .lp-cta-section { padding: 3.5rem 0 4.5rem; } .lp-stat-boxes { grid-template-columns: 1fr 1fr; } .lp-steps::before { left: 22px; } } @media (max-width: 560px) { .lp-levels-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 400px) { .lp-levels-grid { grid-template-columns: 1fr; } .lp-stat-boxes { grid-template-columns: 1fr 1fr; } .lp-hero-title { font-size: 2.25rem; } } /* sess.7 (2026-06-16) Mobile Fase B — fix pwa.html landing. Problemi rilevati pre-fix: - .lp-hero-cta-row con 2 bottoni side-by-side si stringe troppo su <400px - Terminal demo (riga lunga "MFF · L1 L2 L3 · deepseek/deepseek-r1:free") overflowva orizzontalmente — l-term-title aveva text-overflow:ellipsis ma il body con [L1] Secondo NEJM... sfondava - lp-stat-boxes 1fr 1fr troppo strette su iPhone SE 1st gen (320px) - CTA finale lp-btn-lg non rispetta touch target ≥44px su mobile */ @media (max-width: 540px) { /* CTA hero: full width per touch-target massimo + visibilità */ .lp-hero-cta-row .lp-btn { flex: 1; min-width: 0; } .lp-hero-cta-row { gap: 0.625rem; } /* Terminal demo body: testo deve wrappare, no horizontal scroll */ .lp-term-body { padding: 0.875rem; font-size: 0.75rem; } .lp-term-body * { word-break: break-word; } .lp-term-title { font-size: 0.65rem; } /* CTA finale touch-friendly */ .lp-btn-lg { min-height: 48px; padding-top: 0.75rem; padding-bottom: 0.75rem; } /* Card features 1fr (era già nel 900px ma chiarezza) + più aria interna */ .lp-ep-card { padding: 1rem; } } @media (max-width: 360px) { /* iPhone SE 1st gen: stat boxes 1 colonna (era 2) per leggibilità */ .lp-stat-boxes { grid-template-columns: 1fr; } .lp-hero-title { font-size: 1.875rem; } .lp-stat-num { font-size: 1.5rem; } .lp-container { padding-left: 1rem; padding-right: 1rem; } }