/* ═══════════════════════════════════════════════════════════════ SAPERE PLUS · Dark Mode — Void Theme Attivato con: Le variabili CSS fanno il lavoro pesante; i selettori qui sotto correggono solo ciò che non segue i vars. ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* ── Sfondi ───────────────────────────────────────────── */ --parchment: #0c0a07; --parchment-2: #181208; --ghost: #181410; --ghost-2: #221e18; --surface: #141210; /* ── Bordi ─────────────────────────────────────────────── */ --border: #2e2820; --border-light: #221e18; --void-border: #3a3228; /* ── Testi ─────────────────────────────────────────────── */ --ink: #e8e4d8; --graphite: #cec9be; --slate: #9a9288; --stone: #6a6258; --fog: #4a4440; /* ── void era il nero della page — ora diventa chiaro ── */ --void: #f0ece0; --void-2: #e8e4d8; --void-3: #ddd8ce; /* ── Sienna leggermente più luminosa su scuro ─────────── */ --sienna: #c05030; --sienna-hi: #d86840; --sienna-deep: #a03820; /* ── Amber caldo ─────────────────────────────────────── */ --amber: #c8804a; --amber-hi: #e8a870; } /* ── Grain: più leggero in dark per non disturbare le foto ── */ [data-theme="dark"] body::after { opacity: 0.018; } /* ── Header ──────────────────────────────────────────────── */ [data-theme="dark"] .site-header { background: transparent; } [data-theme="dark"] .site-header.scrolled { background: rgba(12, 10, 7, 0.96) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="dark"] .site-header.scrolled .header-inner { background: transparent; border-bottom-color: var(--border); } /* Nav links — grafite cald, nu alb pur */ [data-theme="dark"] .site-header .nav-link { color: var(--graphite); } [data-theme="dark"] .site-header .nav-link:hover { color: var(--ink); } [data-theme="dark"] .site-header .nav-link:hover::before { background: rgba(200, 128, 74, 0.1); border-color: rgba(200, 128, 74, 0.22); } [data-theme="dark"] .site-header .nav-link::after { background: var(--amber); } [data-theme="dark"] .site-header .nav-link.active { color: var(--amber); } /* Logo în dark theme */ [data-theme="dark"] .site-header .logo-s { stroke: var(--graphite); } [data-theme="dark"] .site-header .logo-plus { stroke: var(--amber); } [data-theme="dark"] .site-header .logo-text { color: var(--graphite); } [data-theme="dark"] .site-header .menu-btn span { background: var(--graphite); } /* Dark-header + dark theme — nav sopra fotografie */ [data-theme="dark"] .site-header.dark-header .nav-link { color: rgba(232, 224, 210, 0.9); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); } [data-theme="dark"] .site-header.dark-header .nav-link:hover { color: var(--amber-hi); } [data-theme="dark"] .site-header.dark-header .logo-s { stroke: rgba(232, 224, 210, 0.9); } [data-theme="dark"] .site-header.dark-header .logo-text { color: rgba(232, 224, 210, 0.9); } /* ── Nav admin trigger ─────────────────────────────────── */ [data-theme="dark"] .nav-admin-trigger { color: var(--graphite); } [data-theme="dark"] .nav-admin-menu { background: var(--ghost); border-color: var(--border); } /* ── Mobile nav ─────────────────────────────────────────── */ [data-theme="dark"] .mobile-nav { background: var(--ghost); border-left-color: var(--border); } [data-theme="dark"] .mobile-nav-overlay { background: rgba(12, 10, 7, 0.8); } /* ── Feature card e issue card (home) ─────────────────── */ [data-theme="dark"] .feature-card, [data-theme="dark"] .issue-card { background: var(--ghost); border-color: var(--border); } /* ── Footer ─────────────────────────────────────────────── */ [data-theme="dark"] .site-footer { background: var(--parchment); border-top-color: var(--border); } /* ── Journal note editoriale ─────────────────────────── */ [data-theme="dark"] .journal-note { background: var(--ghost); border-left-color: var(--sienna); } /* ── Link card in articolo ───────────────────────────── */ [data-theme="dark"] .journal-link-card { background: var(--ghost); border-color: var(--border); } /* ── Scrollbar ───────────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--parchment); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--sienna); } /* ════════════════════════════════════════════════════════ DARK MODE TOGGLE BUTTON ════════════════════════════════════════════════════════ */ .dark-toggle { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: transparent; cursor: pointer; color: inherit; border-radius: 50%; flex-shrink: 0; transition: background .2s, color .2s; padding: 0; } .dark-toggle:hover { background: rgba(140, 58, 28, 0.12); } /* In light mode: mostra luna */ .dark-toggle .icon-moon { display: block; } .dark-toggle .icon-sun { display: none; } /* In dark mode: mostra sole */ [data-theme="dark"] .dark-toggle .icon-moon { display: none; } [data-theme="dark"] .dark-toggle .icon-sun { display: block; } /* Adatta colore all'header dark */ .site-header.dark-header .dark-toggle, [data-theme="dark"] .dark-toggle { color: var(--ink); } .site-header.dark-header .dark-toggle:hover, [data-theme="dark"] .dark-toggle:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); } /* ════════════════════════════════════════════════════════ TABLE OF CONTENTS — SIDEBAR STICKY Visibile solo su schermi ≥ 1500px dove c'è spazio accanto alla colonna dell'articolo (max-width 1000px) ════════════════════════════════════════════════════════ */ .journal-toc { display: none; } @media (min-width: 1500px) { .journal-toc { display: block; position: fixed; top: 88px; right: 2rem; width: 300px; z-index: 10; pointer-events: auto; } } .toc-header { font-family: 'Vollkorn', serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sienna); padding-bottom: 0.6rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--border); } .toc-list { list-style: none; padding: 0; margin: 0; } .toc-list li { margin: 0; } .toc-link { display: block; font-family: 'Vollkorn', serif; font-size: 0.875rem; letter-spacing: 0.02em; line-height: 1.35; color: var(--stone); text-decoration: none; padding: 0.28rem 0.5rem; border-left: 1.5px solid transparent; transition: color .18s, border-color .18s; } .toc-link:hover { color: var(--sienna); border-left-color: var(--border); } .toc-link--active { color: var(--sienna); border-left-color: var(--sienna); } /* ── Status badges (usati in dashboard admin) ─────────── */ .status-badge { display: inline-flex; align-items: center; gap: 4px; font-family: 'Barlow Condensed', sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; } .status-badge::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .status-badge--published { background: rgba(45, 106, 79, 0.12); color: #1a5c38; border: 1px solid rgba(45, 106, 79, 0.25); } .status-badge--published::before { background: #2d6a4f; } .status-badge--draft { background: rgba(125, 35, 35, 0.1); color: #7d2323; border: 1px solid rgba(125, 35, 35, 0.2); } .status-badge--draft::before { background: #7d2323; } /* ── Checkbox label per is_published ────────────────── */ .checkbox-label { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.9rem; color: var(--text); user-select: none; } .checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--sienna); cursor: pointer; flex-shrink: 0; } .field-hint { font-size: 0.78rem; color: var(--muted); margin-top: 0.35rem; } [data-theme="dark"] .site-footer { background: var(--parchment); border-top: 1px solid var(--border); color: var(--ink); } [data-theme="dark"] .footer-desc { color: var(--graphite); } [data-theme="dark"] .footer-col-label { color: var(--ink); } [data-theme="dark"] .footer-links a { color: var(--ink); transition: color 0.3s ease; } [data-theme="dark"] .footer-links a:hover { color: var(--sienna); } [data-theme="dark"] .footer-bottom { border-top-color: var(--border-light); color: var(--ink); } [data-theme="dark"] .logo-text--lg { color: var(--ink); } [data-theme="dark"] .logo-s, [data-theme="dark"] .logo-plus { stroke: var(--amber); } [data-theme="dark"] .toc-header { color: var(--ink); } [data-theme="dark"] .toc-link { color: var(--ink); } [data-theme="dark"] .toc-link:hover { color: var(--sienna); } [data-theme="dark"] .toc-link--active { color: var(--sienna); } /* ════════════════════════════════════════════════════════════ HOMEPAGE — DARK MODE ════════════════════════════════════════════════════════════ */ /* ── Hero text pane: inversă față de imagine ───────────── Light mode = pergament cald (#f9f7ed) Dark mode = brunroșu profund (#1e1208) — opus, cu caracter ─────────────────────────────────────────────────────────── */ /* Titlu și subtitlu pe fundalul nou */ [data-theme="dark"] .hero-tagline { color: var(--ink); /* #e8e4d8 — cald, nu alb pur */ } [data-theme="dark"] .hero-sub { color: var(--graphite); /* #cec9be — ușor atenuat */ } /* Buton CTA — sienna profundă pe fond brunroșu */ [data-theme="dark"] .hero-cta { background: var(--sienna); /* #c05030 — terra, saturat */ color: #f0ece0; /* cald, nu alb pur */ border-color: rgba(192, 80, 48, 0.4); } [data-theme="dark"] .hero-cta:hover { background: var(--sienna-hi); /* #d86840 — mai viu */ color: #faf6ed; border-color: var(--sienna); } /* ── Feature card body — text pe sienna ─────────────────── */ /* .feature-body { background: var(--sienna) } — activ în ambele teme; în dark mode sienna devine #c05030 (mediu-roșu), deci textele cu culori întunecate (--fog, --ink etc.) au contrast insuficient */ [data-theme="dark"] .feature-body .feature-title { color: rgba(6, 6, 6, 0.9); } [data-theme="dark"] .feature-body .feature-sub { color: rgba(6, 6, 6, 0.9); } [data-theme="dark"] .feature-body .feature-excerpt { color: rgba(6, 6, 6, 0.9); } [data-theme="dark"] .feature-body .feature-author-label { color: rgba(6, 6, 6, 0.9); } [data-theme="dark"] .feature-body .feature-issue-label { color: rgba(6, 6, 6, 0.9); /* #e8a870 — accent cald */ } [data-theme="dark"] .feature-footer { color: rgba(6, 6, 6, 0.5); } [data-theme="dark"] .read-btn { background: var(--sienna); color: var(--void); /* #f0ece0 în dark mode */ border-color: var(--sienna); } [data-theme="dark"] .feature-cat { background: var(--sienna-deep); color: #fff; border-color: var(--sienna-hi); padding: 0.2rem 0.2rem; align-self: center; } /* ── Issue cards grid ────────────────────────────────────── */ [data-theme="dark"] .issues-grid { background: var(--border); /* linii grilă: #2e2820 */ } [data-theme="dark"] .issue-card { background: var(--ghost); /* #181410 — suprafață subtilă */ } [data-theme="dark"] .issue-card:hover { background: #261a0e; /* brunroșu cald, accent pe hover */ } [data-theme="dark"] .issue-card:hover .issue-card-title { color: var(--amber-hi); /* #e8a870 — în loc de sienna */ } [data-theme="dark"] .issue-num-tag { color: var(--amber); /* accent amber pe fond închis */ } [data-theme="dark"] .issue-card-title { color: var(--ink); } [data-theme="dark"] .issue-card-sub { color: var(--stone); } [data-theme="dark"] .issue-card-excerpt { color: var(--slate); } /* ── Section headings ───────────────────────────────────── */ [data-theme="dark"] .section-hd { border-bottom-color: var(--border); } [data-theme="dark"] .section-label { color: #fff; } [data-theme="dark"] .section-link { color: var(--amber); } [data-theme="dark"] .section-link:hover { color: var(--amber-hi); } [data-theme="dark"] .hero-btn { background: var(--amber-hi); color: rgb(13, 13, 13) !important; border-color: var(--amber); } [data-theme="dark"] .hero-title { color: #fff !important; } [data-theme="dark"] .hero-subtitle { color: #fff !important; } [data-theme="dark"] .journal-frame img { filter: brightness(0.85) contrast(1.05); transition: filter 0.4s ease; } [data-theme="dark"] .journal-frame img:hover { filter: brightness(0.95) contrast(1.1); } /* ── Manifesto ──────────────────────────────────────────── */ /* manifesto { background: var(--ink) } — în dark mode ink → #e8e4d8 (clar!) Trebuie suprascris explicit */ [data-theme="dark"] .manifesto { background-color: var(--parchment); } [data-theme="dark"] .manifesto::before { color: var(--amber); /* ghilimea decorativă — subtilă */ } [data-theme="dark"] .manifesto-eyebrow { color: var(--amber); } [data-theme="dark"] .manifesto-title { color: var(--ink); } [data-theme="dark"] .manifesto-text { color: var(--ink); } /* ── Corecție pentru header-ul la top pe paginile fără hero image ── */ [data-theme="dark"] .site-header .nav-link, [data-theme="dark"] .site-header .brand-logo { color: var(--ink) !important; } [data-theme="dark"] .site-header .logo-s { stroke: var(--ink) !important; } [data-theme="dark"] .site-header .logo-plus { stroke: var(--amber) !important; }