/* I font (Fraunces / Inter / IBM Plex Mono) sono caricati da Google Fonts direttamente in index.php , non da qui, per evitare un giro di rete in piu' (il @import in CSS blocca il rendering finche' non e' risolto). Vedi README.txt se preferite ospitarli in locale. */ /* ---------- Tokens (identita' del sito: rosso + oro) ---------- */ :root{ --red: #C41E1A; --red-dark: #8F1410; --gold: #F2A900; --gold-deep: #A96900; --ink: #221B15; --ink-soft: #5B5044; --paper: #FFFEFC; --paper-dim: #F7EFDD; --paper-dim-2: #F1E6C9; --line: #E6D8BE; --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --nav-w: 232px; --side-w: 272px; --max-w: 1320px; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3{ font-family:var(--font-display); margin:0; } :focus-visible{ outline:2px solid var(--red); outline-offset:2px; } .hidelabeltxt{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .system-unpublished{ opacity:.5; } .system-unpublished::after{ content:" (non pubblicato)"; font-family:var(--font-mono); font-size:.7rem; color:var(--red); } .wrap{ max-width:var(--max-w); margin:0 auto; padding:0 1.5rem; } /* ---------- Utility strip ---------- */ .utility-bar{ background:var(--ink); color:#E9E1D2; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; } .utility-bar .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:.5rem; padding-bottom:.5rem; } .utility-bar .since{ opacity:.75; } .utility-bar .socials{ display:flex; gap:.9rem; } .utility-bar .socials a{ display:flex; align-items:center; opacity:.85; transition:opacity .15s; } .utility-bar .socials a:hover{ opacity:1; color:var(--gold); } .utility-bar svg{ width:15px; height:15px; } /* ---------- Header ---------- */ header.site-head{ border-bottom:1px solid var(--gold); padding: 1.6rem 0 1.3rem; background:var(--paper); } .brand-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; } .brand{ display:flex; align-items:center; gap:.85rem; } .brand-mark{ width:52px; height:52px; flex:none; } .brand-text{ display:flex; flex-direction:column; } .wordmark{ font-family:var(--font-display); font-weight:900; font-size:2.55rem; line-height:1; color:var(--red); letter-spacing:-0.01em; } .wordmark em{ font-style:italic; font-weight:700; color:var(--gold-deep); } .tagline{ font-family:var(--font-display); font-style:italic; font-weight:600; color:var(--ink-soft); font-size:1.05rem; margin-top:.15rem; } .head-search form{ display:flex; align-items:center; gap:.5rem; } .head-search input{ font-family:var(--font-body); border:1px solid var(--line); background:var(--paper-dim); padding:.55rem .8rem; font-size:.85rem; width:190px; border-radius:3px; color:var(--ink); } .head-search button{ border:1px solid var(--red); background:var(--red); color:#fff; padding:.55rem .9rem; font-size:.8rem; font-weight:600; border-radius:3px; cursor:pointer; } .mobile-toggle{ display:none; } /* ---------- Breadcrumb ---------- */ .crumb{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); padding:1.1rem 0 0; margin:0; } .crumb a:hover{ color:var(--red); } .crumb .sep{ margin:0 .45rem; opacity:.5; } .crumb .current{ color:var(--red); } /* ---------- Layout grid ---------- */ .layout{ display:grid; grid-template-columns: var(--nav-w) 1fr var(--side-w); gap:2.75rem; padding: 1.75rem 0 4rem; align-items:start; } /* ---------- Left nav (alimentato da mod_menu) ---------- */ nav.sitenav{ position:sticky; top:1.25rem; } .nav-label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.6rem; display:block; } .sitenav ul{ border-top:1px solid var(--line); } .sitenav li{ border-bottom:1px solid var(--line); } .sitenav li ul{ border-top:none; margin-left:.9rem; } .sitenav li ul li{ border-bottom:none; border-top:1px dashed var(--line); } .sitenav a{ display:block; padding:.68rem .15rem; font-weight:600; font-size:.94rem; color:var(--ink); border-left:3px solid transparent; transition: all .15s ease; } .sitenav a:hover{ color:var(--red); padding-left:.45rem; } .sitenav li.current a, .sitenav li.active a{ color:var(--red); border-left-color:var(--gold); padding-left:.6rem; background:var(--paper-dim); } .nav-foot{ margin-top:1.5rem; padding:1rem; background:var(--ink); color:#E9E1D2; border-radius:4px; font-size:.82rem; line-height:1.5; } .nav-foot a{ color:var(--gold); font-weight:600; } /* ---------- Main column ---------- */ main{ min-width:0; } .cat-head{ padding: 0 0 1.6rem; border-bottom:1px solid var(--line); margin-bottom:1.5rem; } .cat-head h1{ font-size:2rem; font-weight:800; color: var(--gold);} .cat-head p{ color:var(--ink-soft); margin-top:.5rem; max-width:60ch; } .dek{ color:var(--ink-soft); font-size:1.02rem; margin-bottom:.9rem; } /* Hero / featured (blog.php, lead item) */ .items-leading{ margin-bottom: .5rem; } .hero{ display:grid; grid-template-columns: 1.15fr .85fr; gap:1.75rem; border-bottom:1px solid var(--line); padding-bottom:2rem; margin-bottom:2rem; } .hero-media, .card-media{ position:relative; border-radius:4px; overflow:hidden; background: linear-gradient(135deg, var(--paper-dim-2), var(--paper-dim)); display:flex; align-items:center; justify-content:center; } .hero-media{ aspect-ratio:4/3; } .card-media{ aspect-ratio:16/10; } .hero-media svg{ width:38%; opacity:.55; } .card-media svg{ width:26%; opacity:.5; } .pill{ display:inline-flex; align-items:center; gap:.35rem; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--red); border:1px solid var(--red); padding:.28rem .55rem; border-radius:20px; background:#fff; } .hero-title{ font-size:2.1rem; line-height:1.08; font-weight:800; margin:.85rem 0 .6rem; } .hero-title a:hover{ color:var(--red); } .meta{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:.74rem; color:var(--ink-soft); letter-spacing:.02em; } .meta .dot{ opacity:.5; } .readmore{ color:var(--red); font-weight:700; font-size:.9rem; } .readmore:hover{ text-decoration:underline; } /* Signature stamp element (facoltativo, riusabile a mano nei contenuti) */ .stamp{ --s: 84px; width:var(--s); height:var(--s); border-radius:50%; border:1.5px solid var(--red); display:flex; align-items:center; justify-content:center; text-align:center; transform: rotate(-9deg); color:var(--red); font-family:var(--font-mono); font-size:.56rem; text-transform:uppercase; letter-spacing:.05em; line-height:1.25; mix-blend-mode:multiply; opacity:.82; position:relative; flex:none; } .stamp::before{ content:""; position:absolute; inset:5px; border:1px solid var(--red); border-radius:50%; } .stamp-corner{ position:absolute; top:14px; right:14px; } /* In evidenza (intro items) */ .section-label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--line); padding-bottom:.6rem; margin-bottom:1.1rem; display:flex; justify-content:space-between; align-items:center; } .evidenza-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:2.25rem; } .card{ display:flex; flex-direction:column; gap:.5rem; } .card-body{ display:flex; flex-direction:column; gap:.5rem; } .card h3{ font-size:1.15rem; line-height:1.2; font-weight:800; } .card h3 a:hover{ color:var(--red); } .card p{ margin:0; color:var(--ink-soft); font-size:.92rem; } /* Ultimi aggiornamenti (link items / sottocategorie) */ .latest-list{ border-top:1px solid var(--line); } .latest-list li{ display:flex; gap:1rem; align-items:baseline; justify-content:space-between; padding:.85rem 0; border-bottom:1px solid var(--line); } .latest-list a{ font-weight:700; font-size:.98rem; } .latest-list a:hover{ color:var(--red); } .latest-list time{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); flex:none; } .cat-children{ margin-top:1rem; } /* ---------- Right sidebar widgets (qualunque modulo, via modChrome_widget) ---------- */ aside.sidewidgets{ display:flex; flex-direction:column; gap:1.6rem; } .widget{ border-top:3px solid var(--gold); padding-top:.85rem; } .widget-title{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--red); margin-bottom:.75rem; font-weight:600; } .widget ul li{ border-bottom:1px dashed var(--line); padding:.55rem 0; } .widget ul li:last-child{ border-bottom:none; } .widget a{ font-size:.88rem; font-weight:600; display:flex; justify-content:space-between; gap:.6rem; } .widget a:hover{ color:var(--red); } .widget a .n{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); font-weight:500; flex:none; } .widget-video{ background:var(--ink); color:#F3ECDC; padding:1.1rem; border-radius:0 0 4px 4px; margin-bottom:1.6rem; } .widget-video .widget-title{ color:var(--gold); margin-bottom:.5rem; } .widget-video p{ font-size:.86rem; margin:0 0 .7rem; line-height:1.5; } /* ---------- Footer ---------- */ footer.site-foot{ border-top:1px solid var(--line); background:var(--gold); margin-top:2rem; } .site-foot .wrap{ padding:2rem 1.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.82rem; color:var(--ink-soft); } .site-foot a:hover{ color:var(--red); } .foot-links{ display:flex; gap:1.2rem; flex-wrap:wrap; } /* ---------- Category list view (default.php / default_articles.php) ---------- */ .filter-bar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; font-family:var(--font-mono); font-size:.76rem; color:var(--ink-soft); border-bottom:1px solid var(--line); padding-bottom:.9rem; margin-bottom:.25rem; } .filter-bar select, .filter-bar input[type="text"]{ font-family:var(--font-mono); font-size:.76rem; border:1px solid var(--line); border-radius:3px; padding:.3rem .5rem; background:var(--paper); color:var(--ink); } .article-rows{ border-top:1px solid var(--line); } .article-row{ display:grid; grid-template-columns: 88px 1fr auto; gap:1.25rem; align-items:center; padding:1.15rem 0; border-bottom:1px solid var(--line); } .article-row .rdate{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); line-height:1.35; } .article-row .rtitle{ font-size:1.05rem; font-weight:800; line-height:1.25; } .article-row .rtitle a:hover{ color:var(--red); } .article-row .rmeta{ font-size:.78rem; color:var(--ink-soft); margin-top:.25rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; } .tag-pill{ font-family:var(--font-mono); font-size:.63rem; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--red); color:var(--red); padding:.15rem .45rem; border-radius:20px; } .rviews{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft); text-align:right; white-space:nowrap; } .rviews strong{ display:block; color:var(--ink); font-size:.95rem; } .counter{ font-family:var(--font-mono); font-size:.76rem; color:var(--ink-soft); margin:1.5rem 0 0; text-align:center; } /* Paginazione (generata da html/pagination.php) */ .pagination{ display:flex; justify-content:center; gap:.4rem; padding:1rem 0 0; font-family:var(--font-mono); font-size:.82rem; list-style:none; margin:0; } .pagination a, .pagination span{ min-width:2.1rem; text-align:center; padding:.4rem .5rem; border:1px solid var(--line); border-radius:3px; display:inline-block; } .pagination a:hover{ border-color:var(--red); color:var(--red); } .pagination .current{ background:var(--red); border-color:var(--red); color:#fff; font-weight:700; } .pagination .disabled{ opacity:.4; } /* ---------- Article page ---------- */ .article-head{ padding-top:0; } .article-head h1{ font-size:2.3rem; line-height:1.1; font-weight:900; margin:.85rem 0 1rem; } .article-meta{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); border-bottom:1px solid var(--line); padding-bottom:1.1rem; margin-bottom:1.5rem; } .article-meta .author{ color:var(--ink); font-weight:600; } .share{ margin-left:auto; display:flex; gap:.5rem; } .share a{ width:30px; height:30px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.15s; } .share a:hover{ border-color:var(--red); color:var(--red); } .share svg{ width:14px; height:14px; } .article-figure{ margin:0 0 1.75rem; position:relative; } figcaption{ background:var(--paper-dim); border-left:3px solid var(--gold); padding:.7rem 1rem; font-size:.86rem; color:var(--ink-soft); margin-top:.75rem; } .article-body{ font-size:1.05rem; max-width:68ch; } .article-body p{ margin:0 0 1.2rem; } .article-body a{ color:var(--red); text-decoration:underline; text-underline-offset:2px; } .article-body img{ border-radius:4px; margin:.5rem 0; } .byline-box{ display:flex; gap:1rem; align-items:center; margin:2rem 0; padding:1.1rem; background:var(--paper-dim); border-radius:4px; max-width:68ch; } .byline-avatar{ width:46px; height:46px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:1.1rem; flex:none; } .byline-box .name{ font-weight:700; } .byline-box .role{ font-size:.82rem; color:var(--ink-soft); } .comment-cta{ max-width:68ch; border:1px dashed var(--line); border-radius:6px; padding:1.1rem 1.3rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem; } .comment-cta strong{ font-family:var(--font-display); font-size:1.05rem; } .btn{ border:1px solid var(--red); background:var(--red); color:#fff; font-weight:700; font-size:.85rem; padding:.6rem 1.1rem; border-radius:3px; cursor:pointer; white-space:nowrap; } .btn:hover{ background:var(--red-dark); } /* ---------- Responsive ---------- */ @media (max-width: 980px){ .layout{ grid-template-columns:1fr; } nav.sitenav{ position:static; } .sitenav{ display:none; } .sitenav.open{ display:block; } .mobile-toggle{ display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--line); background:var(--paper); font-family:var(--font-mono); font-size:.78rem; padding:.5rem .8rem; border-radius:3px; cursor:pointer; margin-top:1rem; } .hero{ grid-template-columns:1fr; } .evidenza-grid{ grid-template-columns:1fr; } .head-search{ display:none; } .article-row{ grid-template-columns:1fr; } .rviews{ text-align:left; } } @media print{ .utility-bar, .site-head .head-search, .mobile-toggle, .sitenav, aside.sidewidgets, footer.site-foot, .comment-cta, .share{ display:none !important; } .layout{ grid-template-columns:1fr; } }