/* ============================================================ MediCalc — Design System v3.0 Fonts: system font stack (zero external dependencies) Accent: Medical Teal #0d9488 + Slate Layout: max 1200px, generous whitespace Modes: light (default) + dark (.dark on ) Lighthouse 100/100 optimised ============================================================ */ /* ---------- 0. FONT STACK — zero external dependencies ---------- */ /* System font stack: renders with the native OS font on every device. Apple → SF Pro Display / SF Pro Text Windows → Segoe UI Variable / Segoe UI Android → Roboto Linux → Ubuntu / Cantarell / DejaVu Sans All provide excellent medical-grade readability with zero network requests. */ /* ---------- 1. DESIGN TOKENS ---------- */ :root { /* Surfaces */ --bg: #f0f4f8; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #eef2f7; /* Text */ --text: #0d1b2a; --text-2: #1e3a5f; --text-muted: #5a7a9a; /* Primary — Medical Teal */ --accent: #0d9488; --accent-h: #0f766e; --accent-soft: rgba(13,148,136,.10); --accent-mid: rgba(13,148,136,.20); /* Semantic */ --success: #059669; --warning: #d97706; --danger: #dc2626; --info: #2563eb; --success-bg: rgba(5,150,105,.08); --warning-bg: rgba(217,119,6,.08); --danger-bg: rgba(220,38,38,.08); --info-bg: rgba(37,99,235,.08); /* Structural */ --border: #dde4ee; --border-2: #c8d4e3; --radius-xs: 4px; --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 3px rgba(13,27,42,.06), 0 2px 8px rgba(13,27,42,.04); --shadow: 0 2px 8px rgba(13,27,42,.08), 0 6px 24px rgba(13,27,42,.05); --shadow-lg: 0 8px 32px rgba(13,27,42,.12), 0 2px 8px rgba(13,27,42,.06); --transition: .2s cubic-bezier(.4,0,.2,1); /* Typography — system fonts only, zero external requests */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; /* Layout */ --max-w: 1200px; --content-w: 820px; } html.dark { --bg: #080f18; --surface: #0f1a27; --surface-2: #162033; --surface-3: #1d2b40; --text: #e8f0f8; --text-2: #b8cfe4; --text-muted: #6e90b0; --border: #1d2b40; --border-2: #253548; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 2px 8px rgba(0,0,0,.5), 0 6px 24px rgba(0,0,0,.3); --shadow-lg: 0 8px 32px rgba(0,0,0,.6); --accent-soft: rgba(13,148,136,.15); --accent-mid: rgba(13,148,136,.25); } /* ---------- 2. BASE ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body { font-family: var(--font); background: var(--bg); color: var(--text); line-height:1.65; display:flex; flex-direction:column; min-height:100vh; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* NO transition su background/color: causerebbe FOUC ad ogni navigazione. Le transizioni tema sono applicate solo via JS dopo il caricamento pagina. */ } img,svg{display:block;max-width:100%} a{color:inherit} button,input,select,textarea{font-family:var(--font)} /* ---------- 3. LAYOUT ---------- */ .container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 1.75rem} .container--narrow{max-width:var(--content-w)} main{flex:1;padding-bottom:3rem} /* ---------- 4. HEADER ---------- */ .site-header{ position:sticky;top:0;z-index:200; background:rgba(255,255,255,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border); /* transition attivata via JS dopo load per evitare FOUC */ } html.dark .site-header{background:rgba(15,26,39,.92)} .header-inner{ display:flex;align-items:center;gap:1.25rem; padding:.875rem 0; } /* Logo */ .logo{ display:flex;align-items:center;gap:.6rem; font-family:var(--font); font-size:1.25rem;font-weight:800; color:var(--accent); text-decoration:none;letter-spacing:-.03em; flex-shrink:0; transition:opacity var(--transition); } .logo:hover{opacity:.8} .logo__icon{ width:32px;height:32px; background:var(--accent); border-radius:var(--radius-sm); display:flex;align-items:center;justify-content:center; flex-shrink:0; } .logo__icon svg{color:#fff;width:18px;height:18px} /* Nav */ .main-nav{display:flex;align-items:center;gap:.125rem;flex:1;flex-wrap:nowrap;overflow:hidden} .main-nav a{ padding:.4rem .75rem; border-radius:var(--radius-sm); font-size:.875rem;font-weight:600; color:var(--text-muted); text-decoration:none; white-space:nowrap; transition:color var(--transition),background var(--transition); letter-spacing:.005em; } .main-nav a:hover,.main-nav a.active{ color:var(--accent);background:var(--accent-soft) } .main-nav a.active{font-weight:700} /* Header Controls */ .header-controls{display:flex;align-items:center;gap:.5rem;flex-shrink:0} .lang-select{ font-family:var(--font); font-size:.8rem;font-weight:700; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.35rem .6rem; cursor:pointer; appearance:none; transition:border-color var(--transition); } .lang-select:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)} .theme-toggle{ width:36px;height:36px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); display:flex;align-items:center;justify-content:center; cursor:pointer; transition:all var(--transition); } .theme-toggle:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)} .theme-toggle svg{width:16px;height:16px} .icon-moon{display:none} html.dark .icon-sun{display:none} html.dark .icon-moon{display:block} /* ---------- 5. HERO ---------- */ .hero{ padding:4.5rem 0 3.5rem; text-align:center; position:relative; overflow:hidden; } .hero::before{ content:''; position:absolute;inset:0; background: radial-gradient(ellipse 70% 50% at 50% -5%, rgba(13,148,136,.1), transparent), radial-gradient(ellipse 40% 30% at 80% 80%, rgba(37,99,235,.06), transparent); pointer-events:none; } .hero::after{ content:''; position:absolute; bottom:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); } .hero-badge{ display:inline-flex;align-items:center;gap:.4rem; background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-mid); border-radius:30px; font-size:.75rem;font-weight:800; letter-spacing:.06em;text-transform:uppercase; padding:.3rem 1rem; margin-bottom:1.75rem; font-family:var(--font); } .hero h1{ font-family:var(--font); font-size:clamp(2rem,4.5vw,3.25rem); font-weight:900; letter-spacing:-.04em; line-height:1.12; color:var(--text); margin-bottom:1.1rem; max-width:720px; margin-left:auto;margin-right:auto; } .hero h1 em{ color:var(--accent); font-style:normal; background:linear-gradient(135deg,var(--accent),#0891b2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .hero-sub{ font-size:1.1rem; color:var(--text-muted); max-width:580px; margin:0 auto 2.25rem; line-height:1.7; } .hero-pills{ display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem; margin-bottom:3rem; } .hero-pill{ display:inline-flex;align-items:center;gap:.4rem; font-size:.8rem;font-weight:600; color:var(--text-2); background:var(--surface); border:1px solid var(--border); border-radius:20px;padding:.3rem .9rem; box-shadow:var(--shadow-sm); } /* ---------- 6. CALCULATOR GRID ---------- */ .calc-section{padding:0 0 3rem} .section-eyebrow{ font-size:.75rem;font-weight:800; letter-spacing:.1em;text-transform:uppercase; color:var(--accent);margin-bottom:.5rem; font-family:var(--font); } .section-title{ font-family:var(--font); font-size:clamp(1.35rem,2.5vw,1.75rem); font-weight:800; letter-spacing:-.03em; color:var(--text); margin-bottom:1.75rem; } .calc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.25rem; } .calc-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; text-decoration:none;color:inherit; display:flex;flex-direction:column;gap:.875rem; transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition); box-shadow:var(--shadow-sm); position:relative;overflow:hidden; } .calc-card::after{ content:''; position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--accent),#0891b2); transform:scaleX(0);transform-origin:left; transition:transform var(--transition); } .calc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--accent)} .calc-card:hover::after{transform:scaleX(1)} .card-eyebrow{ font-size:.7rem;font-weight:800; letter-spacing:.07em;text-transform:uppercase; color:var(--text-muted); font-family:var(--font); } .card-icon{ width:52px;height:52px; border-radius:var(--radius-sm); background:var(--accent-soft); border:1px solid var(--accent-mid); display:flex;align-items:center;justify-content:center; flex-shrink:0; } .card-icon svg{color:var(--accent);width:24px;height:24px} .calc-card h2{ font-family:var(--font); font-size:1.2rem;font-weight:800; letter-spacing:-.025em;color:var(--text); } .calc-card p{ font-size:.9rem;color:var(--text-muted);line-height:1.65; flex:1; } .card-cta{ display:inline-flex;align-items:center;gap:.4rem; font-size:.85rem;font-weight:700; color:var(--accent); font-family:var(--font); margin-top:.25rem; transition:gap var(--transition); } .calc-card:hover .card-cta{gap:.6rem} /* ---------- 7. HOW / STEPS ---------- */ .steps-section{padding:3rem 0;border-top:1px solid var(--border)} .steps-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem; } .step-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.75rem; box-shadow:var(--shadow-sm); position:relative; } .step-num{ font-family:var(--font); font-size:.7rem;font-weight:900; color:var(--accent); letter-spacing:.1em;text-transform:uppercase; margin-bottom:.75rem; } .step-card h3{ font-family:var(--font); font-size:1rem;font-weight:800; color:var(--text);margin-bottom:.4rem; } .step-card p{font-size:.875rem;color:var(--text-muted);line-height:1.65} /* ---------- 8. TRUST ---------- */ .trust-section{padding:3rem 0;border-top:1px solid var(--border)} .trust-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; } .trust-card{ display:flex;flex-direction:column;gap:.5rem; padding:1.4rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); } .trust-card .tc-icon{ width:36px;height:36px; border-radius:var(--radius-xs); background:var(--success-bg); display:flex;align-items:center;justify-content:center; } .trust-card .tc-icon svg{color:var(--success);width:18px;height:18px} .trust-card strong{font-family:var(--font);font-size:.9rem;font-weight:800;color:var(--text)} .trust-card span{font-size:.82rem;color:var(--text-muted);line-height:1.55} /* ---------- 9. FAQ ---------- */ .faq-section{padding:3rem 0;border-top:1px solid var(--border)} .faq-list{display:flex;flex-direction:column;gap:.5rem} .faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color var(--transition); } .faq-item:hover,.faq-item.open{border-color:var(--accent)} .faq-q{ all:unset; display:flex;align-items:center;justify-content:space-between;gap:1rem; width:100%; padding:1rem 1.5rem; font-family:var(--font); font-weight:700;font-size:.95rem; cursor:pointer;color:var(--text); box-sizing:border-box; } .faq-q:hover{color:var(--accent)} .faq-q svg{flex-shrink:0;width:16px;height:16px;transition:transform var(--transition)} .faq-item.open .faq-q svg{transform:rotate(180deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease} .faq-item.open .faq-a{max-height:500px} .faq-a-inner{ padding:.25rem 1.5rem 1.25rem; font-size:.9rem;color:var(--text-muted);line-height:1.75; } /* ---------- 10. PAGE HERO (calc pages) ---------- */ .page-hero{padding:2.5rem 0 2rem;position:relative} .page-hero::after{ content:''; position:absolute;bottom:0;left:0;right:0; height:1px; background:linear-gradient(90deg,var(--accent),transparent); } .page-breadcrumb{ font-size:.8rem;color:var(--text-muted); margin-bottom:.75rem; display:flex;align-items:center;gap:.4rem; } .page-breadcrumb a{color:var(--accent);text-decoration:none} .page-breadcrumb a:hover{text-decoration:underline} .page-title{ font-family:var(--font); font-size:clamp(1.6rem,3vw,2.4rem); font-weight:900; letter-spacing:-.04em; line-height:1.15; color:var(--text); margin-bottom:.6rem; } .page-title span{color:var(--accent)} .page-sub{ font-size:1rem; color:var(--text-muted); max-width:680px; line-height:1.7; } /* ---------- 11. ALERT BOXES ---------- */ .alert{ display:flex;gap:.875rem;align-items:flex-start; border-radius:var(--radius-sm); padding:1rem 1.25rem; font-size:.875rem;line-height:1.65; margin-bottom:1.5rem; } .alert svg{flex-shrink:0;margin-top:2px;width:18px;height:18px} .alert-warning{background:var(--warning-bg);border:1px solid var(--warning);color:var(--text-2)} .alert-warning svg{color:var(--warning)} .alert-danger{background:var(--danger-bg);border:1px solid var(--danger);color:var(--text-2)} .alert-danger svg{color:var(--danger)} .alert-info{background:var(--info-bg);border:1px solid var(--info);color:var(--text-2)} .alert-info svg{color:var(--info)} .alert-success{background:var(--success-bg);border:1px solid var(--success);color:var(--text-2)} .alert-success svg{color:var(--success)} /* ---------- 12. INFO EXPLAINER ---------- */ .explainer{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--radius); padding:1.5rem 1.75rem; margin-bottom:1.5rem; box-shadow:var(--shadow-sm); } .explainer h2{ font-family:var(--font); font-size:1rem;font-weight:800; color:var(--accent);margin-bottom:.6rem; margin-top:1.25rem; } .explainer h2:first-child{margin-top:0} .explainer p{font-size:.9rem;color:var(--text-muted);line-height:1.7;margin-bottom:.5rem} .explainer strong{color:var(--text-2);font-weight:700} /* ---------- 13. MODEL SELECTOR ---------- */ .model-selector-wrap{ display:flex;align-items:center;gap:1rem;flex-wrap:wrap; background:linear-gradient(135deg,var(--accent-soft),transparent); border:2px solid var(--accent); border-radius:var(--radius); padding:1.25rem 1.5rem; margin-bottom:1.75rem; } .model-selector-wrap label{ font-family:var(--font); font-weight:800;font-size:.9rem;color:var(--text);flex-shrink:0; } .model-selector-wrap select{ font-family:var(--font); font-size:.95rem;font-weight:600; color:var(--text);background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.55rem .9rem;cursor:pointer;flex:1;min-width:0; } /* ---------- 14. FORM ---------- */ .calc-form{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2.25rem; box-shadow:var(--shadow); } .form-section-title{ font-family:var(--font); font-size:.75rem;font-weight:900; color:var(--accent); letter-spacing:.08em;text-transform:uppercase; padding-bottom:.65rem; border-bottom:2px solid var(--accent-mid); margin-bottom:1.5rem;margin-top:2rem; display:flex;align-items:center;gap:.5rem; } .form-section-title:first-child{margin-top:0} .form-section-title::before{ content:''; width:4px;height:14px; background:var(--accent); border-radius:2px;display:inline-block; } .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem} .form-row-3{grid-template-columns:1fr 1fr 1fr} .form-group{margin-bottom:1.25rem} .form-group label{ display:block; font-size:.84rem;font-weight:700; color:var(--text-2); margin-bottom:.45rem; letter-spacing:.005em; } .form-hint{ font-size:.76rem;color:var(--text-muted); margin-top:.3rem;line-height:1.5; } .form-control{ width:100%; padding:.7rem .95rem; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--bg);color:var(--text); font-family:var(--font);font-size:.95rem; transition:border-color var(--transition),box-shadow var(--transition); } .form-control:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--surface); } .form-control::placeholder{color:var(--text-muted)} select.form-control{cursor:pointer} /* ---------- 15. BUTTONS ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.8rem 1.75rem; font-family:var(--font);font-size:.95rem;font-weight:800; border-radius:var(--radius-sm);border:none; cursor:pointer;text-decoration:none; letter-spacing:.01em; transition:all var(--transition); } .btn:active{transform:scale(.97)} .btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent-h)); color:#fff; box-shadow:0 2px 10px rgba(13,148,136,.35); } .btn-primary:hover{ background:linear-gradient(135deg,var(--accent-h),#115e59); box-shadow:0 4px 18px rgba(13,148,136,.45); transform:translateY(-1px); } .btn-secondary{ background:var(--surface-2);color:var(--text); border:1.5px solid var(--border); } .btn-secondary:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} .btn-block{width:100%} .btn-sm{padding:.5rem 1rem;font-size:.85rem} .btn-lg{padding:1rem 2.25rem;font-size:1.05rem;border-radius:var(--radius)} button:disabled{opacity:.45;cursor:not-allowed;transform:none !important;box-shadow:none !important} /* ---------- 16. RESULT BOX ---------- */ .result-box{ margin-top:1.75rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface-2); overflow:hidden; animation:fadeUp .35s ease both; } @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} .result-box.risk-low {border-color:var(--success);background:var(--success-bg)} .result-box.risk-medium {border-color:var(--warning);background:var(--warning-bg)} .result-box.risk-high {border-color:var(--danger);background:var(--danger-bg)} .result-inner{padding:1.75rem 2rem} .result-eyebrow{ font-family:var(--font); font-size:.72rem;font-weight:800; letter-spacing:.1em;text-transform:uppercase; color:var(--text-muted);margin-bottom:.4rem; } .result-title{ font-family:var(--font); font-size:1.15rem;font-weight:900; letter-spacing:-.02em;margin-bottom:.3rem; color:var(--text); } .result-value{ font-family:var(--font); font-size:3.5rem;font-weight:900; letter-spacing:-.05em; line-height:1;margin-bottom:.75rem; } .result-value small{ font-size:.85rem;font-weight:500; color:var(--text-muted);letter-spacing:0; vertical-align:middle; } /* Gauge */ .gauge-wrap{margin:1.25rem 0 1rem} .gauge-bar{ height:12px;border-radius:12px; background:linear-gradient(90deg,#059669 0%,#d97706 50%,#dc2626 100%); position:relative; } .gauge-needle{ position:absolute;top:50%; transform:translate(-50%,-50%); width:20px;height:20px; border-radius:50%; background:var(--surface); border:3px solid var(--text); box-shadow:0 2px 8px rgba(0,0,0,.25); transition:left .7s cubic-bezier(.34,1.56,.64,1); } .gauge-labels{ display:flex;justify-content:space-between; font-size:.7rem;color:var(--text-muted); margin-top:.4rem;font-weight:600; } /* Next-steps table */ .ns-table{ width:100%;border-collapse:collapse; font-size:.85rem;margin-top:1.25rem; border-radius:var(--radius-sm);overflow:hidden; } .ns-table th{ text-align:left;padding:.6rem .85rem; background:var(--surface-3); font-family:var(--font);font-weight:800;font-size:.78rem; letter-spacing:.04em;text-transform:uppercase;color:var(--text-2); border-bottom:2px solid var(--border-2); } .ns-table td{ padding:.6rem .85rem; border-bottom:1px solid var(--border); color:var(--text-muted);vertical-align:top;line-height:1.5; } .ns-table tr:last-child td{border-bottom:none} /* Result actions */ .result-actions{ display:flex;gap:.75rem;flex-wrap:wrap; padding:1.25rem 2rem; background:var(--surface-3); border-top:1px solid var(--border); } /* ---------- 17. BMI SCALE ---------- */ .bmi-scale{margin:1.25rem 0} .bmi-bar{ display:flex;border-radius:var(--radius-sm); overflow:hidden;height:14px; } .bmi-bar span{flex:1} .bmi-thin {background:#93c5fd} .bmi-ok {background:#059669} .bmi-over {background:#d97706} .bmi-ob1 {background:#f97316} .bmi-ob2 {background:#dc2626} .bmi-ob3 {background:#7f1d1d} .bmi-pts{ display:flex;justify-content:space-between; font-size:.7rem;color:var(--text-muted); margin-top:.3rem;font-weight:600; } .bmi-ptr-wrap{position:relative;height:22px;margin:.2rem 0} .bmi-ptr{ position:absolute;width:3px;height:22px; background:var(--text);border-radius:2px; transform:translateX(-50%); transition:left .65s cubic-bezier(.34,1.56,.64,1); } /* ---------- 18. CONTENT SECTIONS (info below calc) ---------- */ .info-section{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2rem 2.25rem; box-shadow:var(--shadow-sm); margin-bottom:1.5rem; } .info-section h2{ font-family:var(--font); font-size:1.05rem;font-weight:900; color:var(--text);margin-bottom:.6rem;margin-top:1.5rem; } .info-section h2:first-child{margin-top:0} .info-section h3{ font-family:var(--font); font-size:.9rem;font-weight:800; color:var(--accent);margin:.85rem 0 .3rem; } .info-section p{ font-size:.9rem;color:var(--text-muted); line-height:1.75;margin-bottom:.6rem; } .info-section ul{ padding-left:1.4rem;margin:.35rem 0 .75rem; } .info-section li{ font-size:.9rem;color:var(--text-muted); line-height:1.65;margin-bottom:.25rem; } .info-section strong{color:var(--text-2);font-weight:700} .source-cite{ background:var(--surface-2); border-left:3px solid var(--accent); border-radius:0 var(--radius-xs) var(--radius-xs) 0; padding:.5rem 1rem;margin-top:.5rem; font-size:.8rem;color:var(--text-muted); font-style:italic;line-height:1.6; } /* ---------- 19. DISCLAIMER AREA ---------- */ .disclaimer-area{ padding-top:1.75rem; border-top:1px solid var(--border); margin-top:1.75rem; } /* ---------- 20. STATS BAR (homepage) ---------- */ .stats-bar{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:3rem; box-shadow:var(--shadow-sm); } .stat-item{ background:var(--surface); padding:1.5rem;text-align:center; } .stat-num{ font-family:var(--font); font-size:2rem;font-weight:900; color:var(--accent); letter-spacing:-.04em; line-height:1; } .stat-label{ font-size:.8rem;color:var(--text-muted); margin-top:.3rem;font-weight:600; } /* ---------- 21. PRIVACY PAGE ---------- */ .privacy-hero{ background:linear-gradient(135deg,var(--accent-soft),transparent); border-radius:var(--radius); padding:2rem; margin-bottom:2rem; border:1px solid var(--accent-mid); } .privacy-toc{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1.25rem 1.5rem; margin-bottom:2rem; } .privacy-toc h3{ font-family:var(--font);font-size:.85rem;font-weight:900; color:var(--text-2);margin-bottom:.75rem; text-transform:uppercase;letter-spacing:.06em; } .privacy-toc ol{padding-left:1.5rem;display:flex;flex-direction:column;gap:.2rem} .privacy-toc li{font-size:.88rem} .privacy-toc a{color:var(--accent);text-decoration:none;font-weight:600} .privacy-toc a:hover{text-decoration:underline} .privacy-section{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; margin-bottom:1.25rem; scroll-margin-top:90px; box-shadow:var(--shadow-sm); } .privacy-section h2{ font-family:var(--font); font-size:1.1rem;font-weight:900; color:var(--text); margin-bottom:1rem;padding-bottom:.75rem; border-bottom:2px solid var(--accent-mid); display:flex;align-items:center;gap:.6rem; } .privacy-section h2 span.num{ display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:50%; background:var(--accent);color:#fff; font-size:.75rem;font-weight:900;flex-shrink:0; } .privacy-section h3{ font-family:var(--font);font-size:.95rem;font-weight:800; color:var(--accent);margin:1.25rem 0 .4rem; } .privacy-section p,.privacy-section li{ font-size:.9rem;color:var(--text-muted);line-height:1.75; } .privacy-section ul,.privacy-section ol{padding-left:1.5rem;margin:.5rem 0 1rem} .privacy-section li{margin-bottom:.25rem} .privacy-section strong{color:var(--text-2);font-weight:700} .privacy-section a{color:var(--accent)} .privacy-section code{ font-family:'SFMono-Regular',Consolas,monospace;font-size:.82rem; background:var(--surface-2);border:1px solid var(--border); border-radius:var(--radius-xs);padding:.1em .4em; color:var(--accent); } .privacy-tag{ display:inline-flex;align-items:center;gap:.25rem; padding:.15rem .5rem;border-radius:var(--radius-xs); font-size:.72rem;font-weight:800; vertical-align:middle; } .privacy-tag.no{background:var(--success-bg);color:var(--success);border:1px solid var(--success)} .privacy-tag.yes{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger)} .privacy-tag.info{background:var(--info-bg);color:var(--info);border:1px solid var(--info)} .data-table{ width:100%;border-collapse:collapse; font-size:.85rem;margin:.75rem 0; } .data-table th{ text-align:left;padding:.55rem .75rem; background:var(--surface-2); font-family:var(--font);font-weight:800;font-size:.78rem; color:var(--text-2);border-bottom:2px solid var(--border-2); } .data-table td{ padding:.55rem .75rem; border-bottom:1px solid var(--border); color:var(--text-muted);vertical-align:top; line-height:1.5; } .data-table tr:last-child td{border-bottom:none} /* ---------- 22. METODOLOGIA PAGE ---------- */ .method-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2rem;margin-bottom:1.25rem; box-shadow:var(--shadow-sm); } .method-card h2{ font-family:var(--font); font-size:1.15rem;font-weight:900; color:var(--text);margin-bottom:1rem; } .method-card h3{ font-family:var(--font); font-size:.9rem;font-weight:800; color:var(--accent);margin:.85rem 0 .35rem; } .method-card p,.method-card li{font-size:.88rem;color:var(--text-muted);line-height:1.75} .method-card ul{padding-left:1.4rem;margin:.35rem 0} .method-card code{ font-family:'SFMono-Regular',monospace; background:var(--surface-2);border:1px solid var(--border); font-size:.82rem;border-radius:4px; padding:.2em .5em;color:var(--accent); } .formula-block{ background:var(--surface-2); border:1px solid var(--border);border-left:3px solid var(--accent); border-radius:var(--radius-xs); padding:.75rem 1rem;margin:.5rem 0; font-family:'SFMono-Regular',monospace; font-size:.82rem;color:var(--text-2); line-height:1.7;overflow-x:auto; } /* ---------- 23. COOKIE BANNER ---------- */ .cookie-banner{ position:fixed;bottom:1.25rem; left:50%;transform:translateX(-50%) translateY(200%); max-width:540px;width:calc(100% - 2rem); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1.5rem; box-shadow:var(--shadow-lg); z-index:500; transition:transform .45s cubic-bezier(.34,1.56,.64,1); } .cookie-banner.show{transform:translateX(-50%) translateY(0)} .cookie-banner.hidden{display:none} .cookie-text{font-size:.85rem;color:var(--text-muted);line-height:1.65;margin-bottom:1rem} .cookie-actions{display:flex;gap:.5rem;justify-content:flex-end} /* ---------- 24. FOOTER ---------- */ .site-footer{ margin-top:2rem; background:var(--surface); border-top:1px solid var(--border); } .footer-main{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.5rem; padding:3rem 0 2rem; } .footer-brand p{ font-size:.85rem;color:var(--text-muted); margin-top:.5rem;line-height:1.65;max-width:280px; } .footer-col h4{ font-family:var(--font);font-size:.8rem;font-weight:900; color:var(--text-2); text-transform:uppercase;letter-spacing:.08em; margin-bottom:.85rem; } .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.4rem} .footer-col ul li a{ font-size:.86rem; color:var(--text-2); /* stesso grigio scuro del testo body — coerente */ text-decoration:none; font-weight:500; } .footer-col ul li a:hover{color:var(--accent);text-decoration:underline} .footer-disclaimer{ font-size:.78rem;color:var(--text-muted); background:var(--surface-2);border:1px solid var(--border); border-radius:var(--radius-sm); padding:.875rem 1rem;line-height:1.65; margin-bottom:1.5rem; } .footer-disclaimer strong{color:var(--danger)} .footer-bottom{ display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:.75rem; font-size:.78rem;color:var(--text-muted); border-top:1px solid var(--border); padding:1.25rem 0 1.5rem; } /* Tutti i link del footer: stile uniforme */ .footer-bottom a, .footer-col ul li a{ color:var(--text-2); text-decoration:none; font-weight:500; } .footer-bottom a:hover, .footer-col ul li a:hover{ color:var(--accent); text-decoration:underline; } /* ---------- 25. ADMIN ---------- */ .admin-login{ min-height:100vh;display:flex;align-items:center;justify-content:center; background:var(--bg); } .admin-box{ width:380px;max-width:95vw; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2.25rem; box-shadow:var(--shadow-lg); } /* ---------- 26. UTILITY ---------- */ .mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem} .mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem} .mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem} .text-center{text-align:center}.text-muted{color:var(--text-muted)} .text-accent{color:var(--accent)}.text-danger{color:var(--danger)} .text-success{color:var(--success)}.text-bold{font-weight:700} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} .divider{border:none;border-top:1px solid var(--border);margin:2rem 0} .tag{ display:inline-flex;align-items:center;gap:.3rem; font-size:.72rem;font-weight:800; padding:.2rem .6rem;border-radius:30px; background:var(--surface-2);color:var(--text-muted); border:1px solid var(--border); font-family:var(--font);letter-spacing:.04em; } .tag-green{background:var(--success-bg);color:var(--success);border-color:var(--success)} .tag-amber{background:var(--warning-bg);color:var(--warning);border-color:var(--warning)} .tag-red{background:var(--danger-bg);color:var(--danger);border-color:var(--danger)} /* ---------- 27. RESPONSIVE ---------- */ @media(max-width:900px){ .footer-main{grid-template-columns:1fr 1fr;row-gap:2rem} .footer-brand{grid-column:1/-1} } @media(max-width:768px){ .form-row,.form-row-3{grid-template-columns:1fr} .calc-form{padding:1.5rem} .info-section{padding:1.5rem} .main-nav{display:none} .stats-bar{grid-template-columns:1fr;gap:0} .hero{padding:2.75rem 0 2.25rem} .result-value{font-size:2.75rem} .footer-main{grid-template-columns:1fr} } @media(max-width:480px){ .container{padding:0 1.1rem} .calc-card{padding:1.5rem} .hero h1{font-size:1.75rem} .hero-pills{display:none} .result-inner{padding:1.25rem 1.5rem} } /* ---------- 28. PRINT ---------- */ @media print{ html.dark{background:#fff;color:#000} .site-header,.site-footer,form,#cookie-banner, .hero,.steps-section,.trust-section,.faq-section, .model-selector-wrap,.alert,.result-actions{display:none!important} .result-box{display:block!important;box-shadow:none;border:1px solid #ccc;page-break-inside:avoid} body::before{ content:"MediCalc — Referto Clinico Informativo — Solo Scopo Divulgativo"; display:block;text-align:center;font-weight:bold; margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #333; } } /* ---------- 29. MOBILE NAV OVERLAY ---------- */ .mobile-menu-btn{ display:none; width:36px;height:36px; border:1px solid var(--border);background:var(--surface-2); border-radius:var(--radius-sm);color:var(--text-muted); align-items:center;justify-content:center;cursor:pointer; flex-shrink:0; } @media(max-width:768px){ .mobile-menu-btn{display:flex} .main-nav{ display:none; position:fixed;inset:0;top:60px;z-index:100; background:var(--surface); flex-direction:column;gap:0; padding:1rem; box-shadow:var(--shadow-lg); } .main-nav.open{display:flex} .main-nav a{ padding:.75rem 1rem; font-size:1rem;border-radius:var(--radius-sm); border-bottom:1px solid var(--border); } } /* ── v3.1 additions ── */ .skip-link{position:absolute;top:-9999px;left:1rem;background:var(--accent);color:#fff;padding:.5rem 1rem;border-radius:0 0 var(--radius-sm) var(--radius-sm);font-weight:700;text-decoration:none;z-index:9999} .skip-link:focus{top:0} .page-layout{display:grid;grid-template-columns:1fr 320px;gap:1.5rem;align-items:start} .page-sidebar .info-section{position:sticky;top:80px} @media(max-width:900px){.page-layout{grid-template-columns:1fr}.page-sidebar .info-section{position:static}} .form-required-mark{color:var(--danger);margin-left:2px;font-size:.85em;font-weight:700} .lang-form{display:flex;align-items:center} /* Improved hero for homepage */ .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;padding:4.5rem 0 3.5rem;text-align:left} .hero-grid .hero-badge{margin-bottom:1.25rem;display:inline-flex} .hero-grid h1{margin-left:0;margin-right:0;text-align:left} .hero-grid .hero-sub{margin-left:0;text-align:left} .hero-visual{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-lg);position:relative;overflow:hidden} .hero-visual::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--accent-soft),transparent);pointer-events:none} .hero-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem} .hero-stat{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;text-align:center} .hero-stat .hs-num{font-size:1.75rem;font-weight:900;color:var(--accent);letter-spacing:-.04em;line-height:1} .hero-stat .hs-lbl{font-size:.75rem;color:var(--text-muted);margin-top:.25rem;font-weight:600} @media(max-width:768px){ .hero-grid{grid-template-columns:1fr;text-align:center;padding:2.5rem 0 2rem} .hero-grid h1,.hero-grid .hero-sub{text-align:center} .hero-grid .hero-badge{margin-left:auto;margin-right:auto} .hero-visual{display:none} } /* ── Posts / Articoli ── */ .posts-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.25rem; margin-bottom:2rem; } .post-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.75rem; box-shadow:var(--shadow-sm); display:flex;flex-direction:column;gap:.75rem; position:relative; transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition); } .post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)} .post-card-link{position:absolute;inset:0;border-radius:var(--radius)} .post-card-meta{display:flex;align-items:center;gap:.75rem} .post-card-title{font-size:1.1rem;font-weight:800;letter-spacing:-.02em;line-height:1.35} .post-card-title a{color:var(--text);text-decoration:none;position:relative;z-index:1} .post-card-title a:hover{color:var(--accent)} .post-card-excerpt{font-size:.875rem;color:var(--text-muted);line-height:1.65;flex:1} .post-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:.75rem;border-top:1px solid var(--border-2)} .post-card-cta{font-size:.85rem;font-weight:700;color:var(--accent);text-decoration:none;position:relative;z-index:1} /* Post body typography */ .post-body h2{font-size:1.2rem;font-weight:800;color:var(--text);margin:1.75rem 0 .6rem;letter-spacing:-.02em} .post-body h3{font-size:1rem;font-weight:700;color:var(--accent);margin:1.25rem 0 .4rem} .post-body p{font-size:.93rem;color:var(--text-muted);line-height:1.8;margin-bottom:.85rem} .post-body ul,.post-body ol{padding-left:1.4rem;margin:.35rem 0 1rem} .post-body li{font-size:.93rem;color:var(--text-muted);line-height:1.7;margin-bottom:.3rem} .post-body strong{color:var(--text-2);font-weight:700} .post-body h2:first-child{margin-top:0} /* ══════════════════════════════════════════════════════ DROPDOWN MENU — Calcolatori (attivo quando >= soglia) ══════════════════════════════════════════════════════ */ /* Trigger: voce "Calcolatori" con freccia */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { display: flex; align-items: center; gap: .3rem; padding: .4rem .75rem; border-radius: var(--radius-sm); font-size: .875rem; font-weight: 600; color: var(--text-muted); text-decoration: none; cursor: pointer; background: none; border: none; font-family: var(--font); white-space: nowrap; transition: color var(--transition), background var(--transition); line-height: inherit; } .nav-dropdown-trigger:hover, .nav-dropdown.open .nav-dropdown-trigger { color: var(--accent); background: var(--accent-soft); } .nav-dropdown-trigger.active-group { color: var(--accent); font-weight: 700; } .nav-dropdown-trigger svg { width: 12px; height: 12px; flex-shrink: 0; transition: transform var(--transition); } .nav-dropdown.open .nav-dropdown-trigger svg { transform: rotate(180deg); } /* Pannello dropdown */ .nav-dropdown-panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 520px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.25rem; display: none; z-index: 300; animation: dropFade .15s ease; } @keyframes dropFade { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .nav-dropdown.open .nav-dropdown-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } /* Gruppo categoria nel panel */ .nav-drop-group {} .nav-drop-group-title { font-size: .68rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 1px solid var(--border); } .nav-drop-group ul { list-style: none; display: flex; flex-direction: column; gap: .15rem; } .nav-drop-group li a { display: flex; align-items: center; gap: .5rem; padding: .45rem .65rem; border-radius: var(--radius-sm); font-size: .875rem; font-weight: 500; color: var(--text-2); text-decoration: none; transition: background var(--transition), color var(--transition); } .nav-drop-group li a:hover, .nav-drop-group li a.active { background: var(--accent-soft); color: var(--accent); } .nav-drop-group li a.active { font-weight: 700; } .nav-drop-group li a svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; opacity: .7; } /* ── Mobile: dropdown diventa accordion nell'hamburger ── */ @media (max-width: 768px) { .nav-dropdown { width: 100%; } .nav-dropdown-trigger { width: 100%; justify-content: space-between; padding: .75rem 1rem; border-radius: var(--radius-sm); border-bottom: 1px solid var(--border); } .nav-dropdown-panel { position: static; transform: none; min-width: 0; box-shadow: none; border: none; border-radius: 0; padding: 0 0 .5rem 1rem; background: var(--surface-2); animation: none; } .nav-dropdown.open .nav-dropdown-panel { display: block; } .nav-drop-group { margin-top: .5rem; } .nav-drop-group-title { font-size: .65rem; padding: .25rem .5rem .25rem 0; margin-bottom: .25rem; } .nav-drop-group li a { padding: .5rem .5rem .5rem 0; } } /* Chiudi dropdown cliccando fuori */ .nav-dropdown-overlay { position: fixed; inset: 0; z-index: 299; display: none; } .nav-dropdown.open .nav-dropdown-overlay { display: block; } /* ── Transizioni tema: attivate via JS DOPO il primo paint ────────────── Senza questa tecnica, ogni navigazione mostra un flash perché il browser anima il background da "non definito" al colore target. Con .theme-transitions le transizioni esistono solo dopo il load. ── */ html.theme-transitions, html.theme-transitions *, html.theme-transitions *::before, html.theme-transitions *::after { transition: background-color .25s cubic-bezier(.4,0,.2,1), border-color .25s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1) !important; }