/* ============================================================ SCOPRI24.IT - Design System AURORA v3.0 Concept: Blu ghiaccio · Moderno · Premium TEMI DISPONIBILI (classe su ): theme-light ← default AURORA theme-dark ← notte profonda theme-nature ← verde fresco theme-sunset ← tramonto caldo theme-violet ← viola cosmico LAYOUT (classe su ): layout-compact ← default layout-magazine ← articoli grandi layout-minimal ← solo testo FONT SIZE (classe su ): font-default | font-large ============================================================ */ /* ── RESET ── */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;padding:0;line-height:1.6;transition:background-color .3s,color .3s} img{max-width:100%;height:auto;display:block} a{text-decoration:none;transition:color .2s} ul,ol{list-style:none;margin:0;padding:0} input,select,textarea,button{font-family:inherit;font-size:inherit} h1,h2,h3,h4,h5,h6{margin:0 0 12px;line-height:1.25} /* ============================================================ TEMA LIGHT - AURORA (default) ============================================================ */ :root, html.theme-light{ --bg: #f0f9ff; --bg2: #e0f2fe; --bg3: #bae6fd; --surface: #ffffff; --surface2: #f8fcff; --border: #bae6fd; --border2: #7dd3fc; --text: #0c1a2e; --text2: #1e4060; --text3: #4a7a9b; --text4: #7ab8d4; --accent: #0ea5e9; --accent-dark: #0284c7; --accent-darker: #0369a1; --accent-light: #38bdf8; --accent-pale: #e0f2fe; --accent-bg: rgba(14,165,233,.08); --accent-bg2: rgba(14,165,233,.16); --accent-glow: rgba(14,165,233,.25); --nav-bg: #0c1a2e; --nav-bg2: #0f2240; --nav-text: rgba(255,255,255,.9); --nav-text2: rgba(255,255,255,.55); --nav-hover-bg: rgba(14,165,233,.15); --nav-active: #38bdf8; --nav-cta-bg: #0ea5e9; --nav-cta-text: #ffffff; --footer-bg: #0c1a2e; --footer-bg2: #0f2240; --footer-text: rgba(255,255,255,.5); --footer-text2: rgba(255,255,255,.25); --footer-link: #38bdf8; --shadow-xs: 0 1px 3px rgba(14,165,233,.08); --shadow-sm: 0 2px 8px rgba(14,165,233,.1); --shadow: 0 4px 20px rgba(14,165,233,.12); --shadow-lg: 0 8px 40px rgba(14,165,233,.16); --shadow-xl: 0 16px 64px rgba(14,165,233,.2); --radius-xs: 4px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 24px; --font-body: 'DM Sans','Segoe UI',system-ui,-apple-system,sans-serif; --font-head: 'DM Sans','Segoe UI',system-ui,-apple-system,sans-serif; --font-mono: 'JetBrains Mono','Fira Code',monospace; --logo-text: #0c1a2e; --logo-accent: #0ea5e9; --logo-tld: #7ab8d4; --logo-tag: #7ab8d4; /* Legacy */ --container-bg: #ffffff; --container-border: #bae6fd; } /* ============================================================ TEMA DARK ============================================================ */ html.theme-dark{ --bg: #060d18; --bg2: #0c1829; --bg3: #122035; --surface: #0f2035; --surface2: #122338; --border: #1e3a55; --border2: #2a4f70; --text: #e8f4fd; --text2: #93c5e8; --text3: #5a8aaa; --text4: #3a607a; --accent: #38bdf8; --accent-dark: #0ea5e9; --accent-darker: #0284c7; --accent-light: #7dd3fc; --accent-pale: rgba(56,189,248,.1); --accent-bg: rgba(56,189,248,.08); --accent-bg2: rgba(56,189,248,.15); --accent-glow: rgba(56,189,248,.2); --nav-bg: #030810; --nav-bg2: #060d18; --nav-text: rgba(232,244,253,.9); --nav-text2: rgba(232,244,253,.45); --nav-hover-bg: rgba(56,189,248,.12); --nav-active: #38bdf8; --nav-cta-bg: #0ea5e9; --nav-cta-text: #ffffff; --footer-bg: #020509; --footer-bg2: #030810; --footer-text: rgba(232,244,253,.4); --footer-text2: rgba(232,244,253,.2); --footer-link: #38bdf8; --shadow-xs: 0 1px 3px rgba(0,0,0,.3); --shadow-sm: 0 2px 8px rgba(0,0,0,.4); --shadow: 0 4px 20px rgba(0,0,0,.5); --shadow-lg: 0 8px 40px rgba(0,0,0,.6); --shadow-xl: 0 16px 64px rgba(0,0,0,.7); --logo-text: #e8f4fd; --logo-accent: #38bdf8; --logo-tld: rgba(56,189,248,.4); --logo-tag: rgba(56,189,248,.35); --container-bg: #0f2035; --container-border: #1e3a55; } /* ============================================================ TEMA NATURE ============================================================ */ html.theme-nature{ --bg: #f0fdf4; --bg2: #dcfce7; --bg3: #bbf7d0; --surface: #ffffff; --surface2: #f8fffe; --border: #bbf7d0; --border2: #86efac; --text: #052e16; --text2: #166534; --text3: #4a9a5a; --text4: #6ee7b7; --accent: #10b981; --accent-dark: #059669; --accent-darker: #047857; --accent-light: #34d399; --accent-pale: #dcfce7; --accent-bg: rgba(16,185,129,.08); --accent-bg2: rgba(16,185,129,.15); --accent-glow: rgba(16,185,129,.25); --nav-bg: #052e16; --nav-bg2: #064e3b; --nav-text: rgba(255,255,255,.9); --nav-text2: rgba(255,255,255,.5); --nav-hover-bg: rgba(16,185,129,.2); --nav-active: #34d399; --nav-cta-bg: #10b981; --nav-cta-text: #ffffff; --footer-bg: #052e16; --footer-bg2: #064e3b; --footer-text: rgba(255,255,255,.45); --footer-text2: rgba(255,255,255,.2); --footer-link: #34d399; --shadow-xs: 0 1px 3px rgba(16,185,129,.08); --shadow-sm: 0 2px 8px rgba(16,185,129,.1); --shadow: 0 4px 20px rgba(16,185,129,.12); --shadow-lg: 0 8px 40px rgba(16,185,129,.16); --shadow-xl: 0 16px 64px rgba(16,185,129,.2); --logo-text: #052e16; --logo-accent: #10b981; --logo-tld: #6ee7b7; --logo-tag: #6ee7b7; --container-bg: #ffffff; --container-border: #bbf7d0; } /* ============================================================ TEMA SUNSET ============================================================ */ html.theme-sunset{ --bg: #fff7ed; --bg2: #ffedd5; --bg3: #fed7aa; --surface: #ffffff; --surface2: #fffbf5; --border: #fed7aa; --border2: #fdba74; --text: #431407; --text2: #9a3412; --text3: #c2591a; --text4: #fb923c; --accent: #ea580c; --accent-dark: #c2410c; --accent-darker: #9a3412; --accent-light: #fb923c; --accent-pale: #ffedd5; --accent-bg: rgba(234,88,12,.08); --accent-bg2: rgba(234,88,12,.15); --accent-glow: rgba(234,88,12,.25); --nav-bg: #431407; --nav-bg2: #7c2d12; --nav-text: rgba(255,255,255,.9); --nav-text2: rgba(255,255,255,.5); --nav-hover-bg: rgba(234,88,12,.2); --nav-active: #fb923c; --nav-cta-bg: #ea580c; --nav-cta-text: #ffffff; --footer-bg: #431407; --footer-bg2: #7c2d12; --footer-text: rgba(255,255,255,.45); --footer-text2: rgba(255,255,255,.2); --footer-link: #fb923c; --shadow-xs: 0 1px 3px rgba(234,88,12,.08); --shadow-sm: 0 2px 8px rgba(234,88,12,.1); --shadow: 0 4px 20px rgba(234,88,12,.12); --shadow-lg: 0 8px 40px rgba(234,88,12,.16); --shadow-xl: 0 16px 64px rgba(234,88,12,.2); --logo-text: #431407; --logo-accent: #ea580c; --logo-tld: #fb923c; --logo-tag: #fb923c; --container-bg: #ffffff; --container-border: #fed7aa; } /* ============================================================ TEMA VIOLET ============================================================ */ html.theme-violet{ --bg: #faf5ff; --bg2: #f3e8ff; --bg3: #e9d5ff; --surface: #ffffff; --surface2: #fdfaff; --border: #e9d5ff; --border2: #d8b4fe; --text: #1e0a40; --text2: #4c1d95; --text3: #7c3aed; --text4: #c4b5fd; --accent: #8b5cf6; --accent-dark: #7c3aed; --accent-darker: #6d28d9; --accent-light: #a78bfa; --accent-pale: #f3e8ff; --accent-bg: rgba(139,92,246,.08); --accent-bg2: rgba(139,92,246,.15); --accent-glow: rgba(139,92,246,.25); --nav-bg: #1e0a40; --nav-bg2: #2d1060; --nav-text: rgba(255,255,255,.9); --nav-text2: rgba(255,255,255,.5); --nav-hover-bg: rgba(139,92,246,.2); --nav-active: #c4b5fd; --nav-cta-bg: #8b5cf6; --nav-cta-text: #ffffff; --footer-bg: #1e0a40; --footer-bg2: #2d1060; --footer-text: rgba(255,255,255,.45); --footer-text2: rgba(255,255,255,.2); --footer-link: #a78bfa; --shadow-xs: 0 1px 3px rgba(139,92,246,.08); --shadow-sm: 0 2px 8px rgba(139,92,246,.1); --shadow: 0 4px 20px rgba(139,92,246,.12); --shadow-lg: 0 8px 40px rgba(139,92,246,.16); --shadow-xl: 0 16px 64px rgba(139,92,246,.2); --logo-text: #1e0a40; --logo-accent: #8b5cf6; --logo-tld: #c4b5fd; --logo-tag: #c4b5fd; --container-bg: #ffffff; --container-border: #e9d5ff; } /* ============================================================ BODY & TIPOGRAFIA BASE ============================================================ */ body{ font-family:var(--font-body); font-size:16px; background:var(--bg); color:var(--text); } html.font-large body{font-size:18px} a{color:var(--accent)} a:hover{color:var(--accent-dark)} h1{font-size:clamp(22px,4vw,36px);font-weight:800;color:var(--text);letter-spacing:-.5px} h2{font-size:clamp(18px,3vw,26px);font-weight:700;color:var(--text);letter-spacing:-.3px} h3{font-size:clamp(15px,2vw,19px);font-weight:700;color:var(--text)} h4{font-size:15px;font-weight:700;color:var(--text)} p{margin:0 0 14px;color:var(--text2);line-height:1.7} p:last-child{margin-bottom:0} /* ============================================================ NAVBAR ============================================================ */ .s24-nav{ position:sticky;top:0;z-index:1000; background:linear-gradient(90deg,var(--nav-bg),var(--nav-bg2)); box-shadow:0 2px 20px rgba(0,0,0,.2); border-bottom:1px solid rgba(255,255,255,.05); } .s24-nav-inner{ max-width:1440px;margin:0 auto;padding:0 20px; height:60px;display:flex;align-items:center;gap:8px; } /* Logo */ .s24-logo{ display:flex;align-items:center;gap:10px; text-decoration:none;flex-shrink:0;margin-right:4px; } .s24-logo-icon{ width:38px;height:38px;border-radius:10px; background:rgba(14,165,233,.2); border:1.5px solid rgba(14,165,233,.35); display:flex;align-items:center;justify-content:center;flex-shrink:0; transition:background .2s,border-color .2s; } .s24-logo-icon svg{width:22px;height:22px} .s24-logo:hover .s24-logo-icon{background:rgba(14,165,233,.3);border-color:rgba(14,165,233,.5)} .s24-logo-text{ font-family:var(--font-head);font-size:20px;font-weight:800; color:#fff;letter-spacing:-.5px;line-height:1; } .s24-logo-num{color:var(--nav-active)} .s24-logo-tld{font-size:12px;font-weight:400;color:rgba(255,255,255,.35);margin-left:1px} /* Links */ .s24-nav-links{ display:flex;align-items:center;gap:2px;flex:1; margin:0;padding:0;list-style:none; } .s24-nav-links li a{ display:inline-flex;align-items:center;gap:5px; padding:7px 11px;border-radius:8px; font-size:13.5px;font-weight:600; color:var(--nav-text2);transition:background .18s,color .18s; white-space:nowrap; } .s24-nav-links li a i{font-size:12px} .s24-nav-links li a:hover, .s24-nav-links li a.active{ background:var(--nav-hover-bg); color:var(--nav-text); } .s24-nav-links li a.active{color:var(--nav-active)} /* CTA button */ .s24-nav-cta{ display:inline-flex;align-items:center;gap:6px; padding:8px 16px;border-radius:8px; background:var(--nav-cta-bg);color:var(--nav-cta-text) !important; font-size:13px;font-weight:700; transition:opacity .2s,transform .15s; margin-left:4px; } .s24-nav-cta:hover{opacity:.88;transform:translateY(-1px);text-decoration:none} /* User pill */ .s24-nav-user{ display:inline-flex;align-items:center;gap:7px; padding:5px 12px 5px 5px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.85); font-size:13px;font-weight:600; text-decoration:none; transition:background .18s; margin-left:4px; } .s24-nav-user:hover{background:rgba(255,255,255,.15);color:#fff;text-decoration:none} .s24-nav-user-avatar{ width:26px;height:26px;border-radius:50%; background:var(--accent); display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:800;color:#fff;flex-shrink:0; } /* Nav right: tema + hamburger */ .s24-nav-right{ display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0; } .s24-theme-btn{ all:unset;cursor:pointer; width:36px;height:36px;border-radius:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); display:flex;align-items:center;justify-content:center; color:rgba(255,255,255,.65);font-size:15px; transition:background .18s,color .18s; } .s24-theme-btn:hover{background:rgba(255,255,255,.16);color:#fff} /* Pannello temi */ .s24-theme-panel{ position:absolute;top:calc(100% + 8px);right:0; background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);box-shadow:var(--shadow-lg); padding:12px;min-width:210px;z-index:2000; display:none; animation:fadeDown .18s ease; } .s24-theme-panel.open{display:block} @keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .s24-theme-panel-title{ font-size:10px;font-weight:700;text-transform:uppercase; letter-spacing:.1em;color:var(--text4);margin-bottom:8px;padding:0 4px; } .s24-theme-options{display:flex;flex-direction:column;gap:2px} .s24-theme-opt{ all:unset;cursor:pointer; display:flex;align-items:center;gap:9px; padding:8px 10px;border-radius:8px; font-size:13.5px;font-weight:600;color:var(--text); transition:background .15s; } .s24-theme-opt:hover{background:var(--bg2)} .s24-theme-opt.active{background:var(--accent-bg2);color:var(--accent)} .s24-theme-dot{width:13px;height:13px;border-radius:50%;flex-shrink:0;border:2px solid rgba(0,0,0,.08)} /* Hamburger */ .s24-hamburger{ all:unset;cursor:pointer; width:36px;height:36px;display:none; flex-direction:column;align-items:center;justify-content:center;gap:5px; border-radius:8px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12); } .s24-hamburger span{ display:block;width:16px;height:2px; background:rgba(255,255,255,.8);border-radius:2px; transition:transform .22s,opacity .22s; } .s24-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .s24-hamburger.open span:nth-child(2){opacity:0} .s24-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Mobile nav */ @media(max-width:820px){ .s24-nav-links{ position:fixed;top:60px;left:0;right:0; background:linear-gradient(180deg,var(--nav-bg),var(--nav-bg2)); flex-direction:column;align-items:stretch; padding:10px 16px 16px;gap:2px;display:none; box-shadow:0 12px 32px rgba(0,0,0,.25); border-bottom:1px solid rgba(255,255,255,.05); } .s24-nav-links.open{display:flex} .s24-nav-links li a{padding:11px 14px;font-size:14px} .s24-hamburger{display:flex} .s24-logo-text{font-size:18px} .s24-nav-cta{padding:7px 13px} } /* ============================================================ FOOTER ============================================================ */ .s24-footer{ background:linear-gradient(180deg,var(--footer-bg),var(--footer-bg2)); padding:48px 20px 24px;margin-top:56px; border-top:1px solid rgba(255,255,255,.04); } .s24-footer-inner{max-width:1440px;margin:0 auto} .s24-footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px;margin-bottom:36px; } @media(max-width:768px){.s24-footer-top{grid-template-columns:1fr 1fr;gap:24px}} @media(max-width:480px){.s24-footer-top{grid-template-columns:1fr;gap:20px}} .s24-footer-brand .s24-footer-logo{ font-size:22px;font-weight:800;color:#fff; margin-bottom:10px;letter-spacing:-.5px; } .s24-footer-brand .s24-footer-logo span{color:var(--footer-link)} .s24-footer-brand p{ font-size:13px;color:var(--footer-text); line-height:1.65;margin-bottom:16px; } .s24-footer-social{display:flex;gap:8px} .s24-footer-social a{ width:36px;height:36px;border-radius:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); display:flex;align-items:center;justify-content:center; color:var(--footer-text);font-size:15px; transition:background .18s,color .18s,transform .15s; } .s24-footer-social a:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateY(-2px)} .s24-footer-col h4{ font-size:12px;font-weight:700;text-transform:uppercase; letter-spacing:.1em;color:rgba(255,255,255,.4);margin-bottom:12px; } .s24-footer-col ul{display:flex;flex-direction:column;gap:7px} .s24-footer-col ul a{ font-size:13px;color:var(--footer-text);font-weight:500; transition:color .18s; } .s24-footer-col ul a:hover{color:#fff} .s24-footer-divider{ height:1px;background:rgba(255,255,255,.06);margin-bottom:18px; } .s24-footer-bottom{ display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:10px; } .s24-footer-copy{font-size:12px;color:var(--footer-text2)} .s24-footer-legal{display:flex;gap:16px} .s24-footer-legal a{font-size:12px;color:var(--footer-text2);transition:color .18s} .s24-footer-legal a:hover{color:var(--footer-text)} /* ============================================================ CONTAINER LEGACY (compatibilita totale con tutto il sito) ============================================================ */ .container{ background:var(--container-bg); border:1px solid var(--container-border); border-radius:var(--radius); padding:20px;margin:14px 0; font-size:16px;color:var(--text); box-shadow:var(--shadow-xs); } .container::after{content:"";clear:both;display:table} .container img{ float:left;max-width:80px;max-height:80px; width:100%;margin-right:18px;border-radius:50%; } .container img.right{float:right;margin-left:18px;margin-right:0} .container span{font-size:20px;margin-right:12px} .darker{ background:var(--bg2); border-color:var(--border2); } /* ============================================================ BOTTONI ============================================================ */ button, .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:10px 20px; font-family:var(--font-body);font-size:14px;font-weight:700; border-radius:var(--radius-sm);border:none;cursor:pointer; background:var(--accent);color:#fff; transition:opacity .18s,transform .15s,box-shadow .18s; width:100%;margin:6px 0; } button:hover,.btn:hover{opacity:.88;transform:translateY(-1px)} button:active,.btn:active{transform:translateY(0)} .btn-sm{padding:7px 14px;font-size:13px;width:auto;margin:0} .btn-outline{ background:transparent;color:var(--accent); border:1.5px solid var(--accent); } .btn-outline:hover{background:var(--accent-bg2)} .btn-ghost{ background:var(--accent-bg);color:var(--accent); border:1px solid var(--accent-pale); } .cancelbtn{background:#ef4444;width:auto;padding:9px 16px;margin:0} /* ============================================================ FORM ============================================================ */ input[type=text],input[type=password],input[type=email], input[type=number],input[type=search],select,textarea{ width:100%;padding:10px 14px;margin:5px 0; border:1.5px solid var(--border);border-radius:var(--radius-sm); background:var(--surface);color:var(--text); font-family:var(--font-body);font-size:15px; transition:border-color .2s,box-shadow .2s; outline:none; } input:focus,select:focus,textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg2); } input::placeholder{color:var(--text4)} label{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:4px;display:block} .form-group{margin-bottom:16px} .form-error{font-size:12px;color:#ef4444;margin-top:4px} .form-hint{font-size:12px;color:var(--text4);margin-top:4px} /* ============================================================ CARD GENERICA ============================================================ */ .card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:20px; box-shadow:var(--shadow-xs); transition:box-shadow .2s,transform .2s,border-color .2s; } .card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); border-color:var(--border2); } .card-accent{border-top:3px solid var(--accent)} /* ============================================================ BADGE / CHIP / TAG ============================================================ */ .badge{ display:inline-flex;align-items:center;gap:4px; padding:3px 10px;border-radius:999px; font-size:11px;font-weight:700;letter-spacing:.04em; } .badge-accent{background:var(--accent-bg2);color:var(--accent);border:1px solid var(--accent-pale)} .badge-live{background:rgba(16,185,129,.12);color:#059669;border:1px solid rgba(16,185,129,.25)} .badge-new{background:rgba(239,68,68,.1);color:#dc2626;border:1px solid rgba(239,68,68,.2)} .badge-dark{background:var(--nav-bg);color:rgba(255,255,255,.8)} /* ============================================================ BREADCRUMB ============================================================ */ .s24-breadcrumb{ padding:11px 20px;display:flex;align-items:center;flex-wrap:wrap;gap:4px; font-size:13px;color:var(--text4); border-bottom:1px solid var(--border);background:var(--bg2); } .s24-breadcrumb a{color:var(--accent);font-weight:600} .s24-breadcrumb a:hover{color:var(--accent-dark)} .s24-breadcrumb .sep{color:var(--border2);margin:0 2px} .s24-breadcrumb .cur{color:var(--text);font-weight:600} /* ============================================================ PAGINATION ============================================================ */ .pagination{display:inline-flex;flex-wrap:wrap;gap:5px} .pagination a{ display:inline-flex;align-items:center;justify-content:center; min-width:36px;height:36px;padding:0 10px; border:1.5px solid var(--border);border-radius:var(--radius-sm); font-size:13px;font-weight:600;color:var(--text2); transition:background .18s,color .18s,border-color .18s; } .pagination a:hover,.pagination a.active{ background:var(--accent);color:#fff;border-color:var(--accent); } /* ============================================================ MODAL ============================================================ */ .modal{ display:none;position:fixed;z-index:9000; inset:0;background:rgba(0,0,0,.55); padding:20px;overflow:auto; align-items:center;justify-content:center; } .modal.open{display:flex} .modal-content{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-lg); width:100%;max-width:500px;padding:28px; box-shadow:var(--shadow-xl); animation:scaleIn .2s ease; position:relative; } @keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}} .modal-close{ position:absolute;top:14px;right:14px; all:unset;cursor:pointer;width:28px;height:28px; border-radius:6px;background:var(--bg2); display:flex;align-items:center;justify-content:center; color:var(--text3);font-size:14px;transition:background .15s; width:auto;margin:0; } .modal-close:hover{background:var(--border2)} /* ============================================================ COOKIE BANNER ============================================================ */ .cookie-message{ position:fixed;bottom:0;left:0;width:100%; padding:12px 20px; background:var(--surface); border-top:2px solid var(--accent); box-shadow:0 -4px 20px rgba(0,0,0,.1); z-index:9999; display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:10px; font-size:13px;color:var(--text2); } .cookie-message.hidden{display:none} .cookie-accept{ background:var(--accent);color:#fff;border:none; padding:7px 18px;border-radius:20px;cursor:pointer; font-weight:700;font-size:13px;width:auto;margin:0; transition:opacity .18s; } .cookie-accept:hover{opacity:.88} /* ============================================================ NOTICE / ALERT BOX ============================================================ */ .scopri24-notice{ padding:16px 18px; border:1px solid var(--border2); border-left:4px solid var(--accent); border-radius:var(--radius); background:var(--surface); color:var(--text);margin:16px 0; } .scopri24-notice h2{font-size:15px;color:var(--text);margin:0 0 8px} .scopri24-notice p{font-size:14px;color:var(--text2);margin:0 0 8px;line-height:1.6} .scopri24-notice__link{color:var(--accent);font-weight:600} /* ============================================================ POESIE ============================================================ */ .poesie{ font-family:Georgia,serif;font-size:17px; border-left:3px solid var(--border2); padding:6px 16px;color:var(--text2); font-style:italic;line-height:1.8; } /* ============================================================ TABLE ============================================================ */ .table-wrap{overflow:hidden;border:1px solid var(--border);border-radius:var(--radius)} .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} table{width:100%;border-collapse:collapse;font-size:14px} thead{background:var(--bg2)} th{padding:10px 14px;text-align:left;font-weight:700;color:var(--text);font-size:12px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap} td{padding:10px 14px;border-top:1px solid var(--border);color:var(--text2)} tr:hover td{background:var(--bg2)} /* ============================================================ UTILITY ============================================================ */ .text-accent{color:var(--accent)} .text-muted{color:var(--text3)} .text-center{text-align:center} .full-width{width:100%} .tag{color:var(--text4);cursor:pointer} .tag:hover{color:var(--text)} .time-right{float:right;color:var(--text4);font-size:12px} .logo{font-size:28px;font-weight:800;color:var(--accent);text-align:center} /* ============================================================ LAYOUT MAGAZINE (classe su ) ============================================================ */ html.layout-magazine .card{border-radius:var(--radius-lg);padding:24px} html.layout-magazine .container{border-radius:var(--radius-lg);padding:24px} html.layout-magazine h1{font-family:Georgia,'Times New Roman',serif} html.layout-magazine h2{font-family:Georgia,'Times New Roman',serif} /* ============================================================ LAYOUT MINIMAL ============================================================ */ html.layout-minimal .s24-nav{box-shadow:none;border-bottom:1px solid var(--border)} html.layout-minimal .card{box-shadow:none;border-radius:var(--radius-sm)} html.layout-minimal .container{box-shadow:none;border-radius:var(--radius-sm)} /* ============================================================ DARK MODE AGGIUSTAMENTI ============================================================ */ html.theme-dark input, html.theme-dark select, html.theme-dark textarea{background:var(--bg2);color:var(--text)} html.theme-dark .modal-content{background:var(--surface)} /* ============================================================ FOOTER LEGACY ============================================================ */ .footer{ width:100%;background:var(--footer-bg); display:flex;justify-content:center;align-items:center; flex-direction:column;padding:24px 20px;margin-top:0; } .footer .social-icon{ position:relative;display:flex;justify-content:center; align-items:center;margin:5px 0;flex-wrap:wrap;gap:5px; padding:8px; } .footer .social-icon__link{font-size:1.5rem;color:#fff;transition:transform .2s,color .2s} .footer .social-icon__link:hover{transform:scale(1.2);color:var(--footer-link)} .footer .menu__link{font-size:.95rem;color:var(--footer-text);font-weight:400} .footer .menu__link:hover{color:#fff} .footer p{color:var(--footer-text2);margin:6px 0;font-size:.85rem} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:480px){ body{font-size:15px} .container{padding:14px;font-size:15px} h1{font-size:20px} h2{font-size:16px} .s24-footer-top{grid-template-columns:1fr;gap:16px} .modal-content{padding:20px} }