/* ====================================================================
* formicarium.it · Bacheca
* Layout Reddit-like su palette del forum (Wayback 2015):
* - dark grigio #151515 / #242424 / #383838
* - oro #CCB361 / #E0CD94 / #8C7A3E
* - crema #F6F3EB / #FBF9F3
* - accento #CA5902 (orange)
* ==================================================================== */
:root {
/* Brand colors — invariati in entrambi i temi */
--gold: #CCB361;
--gold-soft: #E0CD94;
--gold-dark: #8C7A3E;
/* --gold-text: oro semantico per testo. Ha contrasto WCAG AA contro lo
sfondo del tema corrente. In LIGHT mode #74651F (5.5:1 su white),
in DARK mode #CCB361 (~7.5:1 su #242421). Usato per link, counter
sidebar, breadcrumb, attach icons. Per bordi/bg/gradient usa
--gold-dark (l'oro mid-tone resta valido visivamente). */
--gold-text: #74651F;
--orange: #CA5902;
--orange-soft: #F07920;
--rust: #A6361B; /* recuperato dal cerchio del logo "vade ad formicam" */
--rust-soft: #C4583A;
--dark-1: #151515;
--dark-2: #242424;
--dark-3: #383838;
--gray-mid: #6D6D6D;
--gray-light: #989898;
/* Font stacks — serif editoriale, NO Inter/Roboto/Arial */
--font-body: "Iowan Old Style", "Charter", "Palatino Linotype", "Palatino",
"Book Antiqua", Georgia, serif;
--font-display: "Iowan Old Style", "Charter", "Palatino Linotype", "Palatino",
"Book Antiqua", Georgia, serif;
--font-meta: ui-sans-serif, -apple-system, "Avenir Next", "Avenir",
"Helvetica Neue", system-ui, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo",
"Consolas", monospace;
/* Light scheme (default) */
--bg-page: #F6F3EB;
--bg-card: #FFFFFF;
--bg-card-alt: #FBF9F3;
--bg-card-3: #EFEBD9;
--bg-row-alt: #F8F6F0;
--bg-score: linear-gradient(to bottom, #FBF9F3, #F6F3EB);
--bdr: #D8D0B8;
--bdr-soft: #EFEAD8;
--bdr-strong: #B5A074; /* bordo input/select visibile su bg-card-alt (light) */
--txt: #2A2A2A;
--txt-dim: #5A5A5A;
--txt-muted: #989898;
--shadow-card: 0 1px 2px rgba(0,0,0,0.05);
--shadow-card-h: 0 4px 14px rgba(0,0,0,0.10);
/* legacy aliases used elsewhere — keep working.
IMPORTANTE: --cream è SEMPRE chiaro (#F6F3EB), NON alias di --bg-page,
perché viene usato come fallback per la topnav in dark mode.
In light mode la topbar usa --topbar-text (= --txt) via override. */
--cream: #F6F3EB;
--cream-2: #FBF9F3;
--cream-bdr: var(--bdr);
--text: var(--txt);
--text-dim: var(--txt-dim);
/* Topbar palette — semantica adaptive light/dark (default = LIGHT).
Tutte le regole .site-banner/.topnav/.site-tagline usano questi
valori. Override in [data-color-scheme="slate"] + media query dark. */
--topbar-bg: #FBF9F3; /* banner cornice + tagline background (light) */
--topbar-bg-soft: #F6F3EB; /* gradient end topnav */
--topbar-text: #2A2A2A; /* voci primary nav */
--topbar-text-soft: #5A5A5A; /* utility (Login/Iscriviti/FAQ) */
--topbar-accent: #74651F; /* hover / active oro AA-compliant */
--topbar-accent-hi: #CCB361; /* highlight (active marker, focus ring) */
--topbar-border-top: rgba(204,179,97,0.35); /* nav top border */
--topbar-newtopic-fg: #74651F; /* + Nuovo topic, default */
--maxw-content: 1180px;
}
/* Dark scheme — toggled via [data-color-scheme="slate"] on */
[data-color-scheme="slate"] {
--bg-page: #1A1A18;
--bg-card: #242421;
--bg-card-alt: #1F1F1D;
--bg-card-3: #2A2A26;
--bg-row-alt: #1F1F1D;
--bg-score: linear-gradient(to bottom, #2A2A26, #242421);
--bdr: rgba(204,179,97,0.22);
--bdr-soft: rgba(204,179,97,0.10);
--bdr-strong: rgba(204,179,97,0.55); /* bordo input visibile su bg dark */
--txt: #E5DEC8;
--txt-dim: #A8A18C;
--txt-muted: #6F6A5A;
--gold-text: #CCB361; /* su bg dark, l'oro mid-tone passa AA (~7.5:1) */
--shadow-card: 0 1px 2px rgba(0,0,0,0.4);
--shadow-card-h: 0 4px 14px rgba(0,0,0,0.55);
/* Topbar dark — banner image cornice + topnav scura come prima del fix */
--topbar-bg: #151515; /* --dark-1 */
--topbar-bg-soft: #242424; /* --dark-2 (gradient start topnav) */
--topbar-text: #F6F3EB; /* --cream (voci nav su dark) */
--topbar-text-soft: #E0CD94; /* --gold-soft (utility su dark) */
--topbar-accent: #CCB361; /* --gold (hover/active su dark) */
--topbar-accent-hi: #CCB361;
--topbar-border-top: #000000;
--topbar-newtopic-fg: #E0CD94;
}
/* Auto dark se l'utente non ha mai espresso preferenza */
@media (prefers-color-scheme: dark) {
:root:not([data-color-scheme="default"]):not([data-color-scheme="slate"]) {
--bg-page: #1A1A18;
--bg-card: #242421;
--bg-card-alt: #1F1F1D;
--bg-card-3: #2A2A26;
--bg-row-alt: #1F1F1D;
--bg-score: linear-gradient(to bottom, #2A2A26, #242421);
--bdr: rgba(204,179,97,0.22);
--bdr-soft: rgba(204,179,97,0.10);
--bdr-strong: rgba(204,179,97,0.55);
--txt: #E5DEC8;
--txt-dim: #A8A18C;
--txt-muted: #6F6A5A;
--gold-text: #CCB361;
--shadow-card: 0 1px 2px rgba(0,0,0,0.4);
--shadow-card-h: 0 4px 14px rgba(0,0,0,0.55);
--topbar-bg: #151515;
--topbar-bg-soft: #242424;
--topbar-text: #F6F3EB;
--topbar-text-soft: #E0CD94;
--topbar-accent: #CCB361;
--topbar-accent-hi: #CCB361;
--topbar-border-top: #000000;
--topbar-newtopic-fg: #E0CD94;
}
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--txt);
background-color: var(--bg-page);
background-image: url("../theme/Page-BgTexture.jpg");
background-repeat: repeat;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
transition: background-color 0.2s ease, color 0.2s ease;
}
[data-color-scheme="slate"] body {
background-image: none;
}
@media (prefers-color-scheme: dark) {
:root:not([data-color-scheme="default"]) body { background-image: none; }
}
a { color: var(--gold-text); text-decoration: none; }
/* :visited senza override → fallback al UA stylesheet (viola/grigio scuro).
Mantieni stesso colore del default per coerenza visiva. */
a:visited { color: var(--gold-text); }
a:hover { color: var(--orange); text-decoration: underline; }
/* === Banner / nav ====================================================== */
.site-banner {
background-color: var(--topbar-bg);
border-bottom: 3px solid var(--gold);
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
position: sticky;
top: 0;
z-index: 50;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
font-family: var(--font-meta);
box-sizing: border-box;
}
.site-banner *,
.site-banner *::before,
.site-banner *::after {
box-sizing: border-box;
}
.site-banner ul {
list-style: none !important;
}
.site-banner li {
list-style: none !important;
display: inline-flex !important;
}
.banner-link { display: block; width: 100%; }
/* Header.jpg è 948×80 (aspect 11.85:1, banner strip orizzontale stretto).
Mobile (<720px): height fisso 78px + cover → leggibile su tablet/mobile dove
il sottotitolo "UN PICCOLO GRANDE MONDO" sarebbe comunque microscopico.
Desktop (≥720px): aspect-ratio 948/80 → banner cresce proporzionalmente col
viewport, immagine sempre intera, "UN PICCOLO GRANDE MONDO" sempre leggibile.
A 1280: 108px · 1440: 122px · 1920: 162px · 2560: 216px. */
.banner-strip {
width: 100%;
height: 78px;
background-size: cover;
background-position: left center;
background-repeat: no-repeat;
background-color: var(--topbar-bg);
}
@media (min-width: 720px) {
.banner-strip {
height: auto;
aspect-ratio: 948 / 80;
min-height: 78px;
}
}
/* Tagline "formicarium.it · vade ad formicam" sotto il banner image.
Su phpBB è (era l'unico h1 mancante, soddisfa WCAG page-has-heading-one).
Su bacheca / MkDocs è
(entrambi hanno già un h1 nel page content). */
.site-tagline {
margin: 0 !important;
padding: 7px 16px !important;
text-align: center !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 400 !important;
letter-spacing: 0.02em !important;
line-height: 1.3 !important;
color: var(--topbar-text) !important;
background: var(--topbar-bg-soft) !important;
border: 0 !important;
border-top: 1px solid rgba(204,179,97,0.18) !important;
text-transform: none !important;
}
.site-tagline em {
color: var(--topbar-accent) !important;
font-style: italic !important;
margin-left: 0.4em !important;
font-weight: 400 !important;
}
@media (min-width: 720px) {
.site-tagline { font-size: 14px !important; padding: 9px 16px !important; }
}
.topnav {
background: linear-gradient(to bottom, var(--topbar-bg-soft), var(--topbar-bg));
border-top: 1px solid var(--topbar-border-top);
}
.topnav__primary {
list-style: none !important;
margin: 0 auto !important;
padding: 0 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
max-width: var(--maxw-content);
overflow-x: auto;
scrollbar-width: thin;
width: auto !important;
}
.topnav__primary > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
}
.topnav__primary > li::before,
.topnav__primary > li::marker {
content: none !important;
display: none !important;
}
.topnav__primary > li > a {
display: inline-block !important;
padding: 11px 16px !important;
color: var(--topbar-text) !important;
font-weight: 500 !important;
font-size: 14px !important;
line-height: 1 !important;
white-space: nowrap;
border-bottom: 2px solid transparent;
text-decoration: none !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.topnav__primary > li > a:hover {
color: var(--topbar-accent) !important;
text-decoration: none !important;
background: rgba(204, 179, 97, 0.08);
}
.topnav__primary > li > a.is-active {
color: var(--topbar-accent) !important;
border-bottom-color: var(--topbar-accent-hi);
}
.topnav {
display: flex;
align-items: stretch;
}
.topnav__primary { flex: 1 1 auto; }
.topnav__search {
display: flex;
align-items: center;
padding: 6px 12px;
background: rgba(0,0,0,0.25);
border-left: 1px solid rgba(204,179,97,0.2);
}
.topnav__search input[type="search"] {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(204,179,97,0.35);
color: var(--topbar-text);
padding: 5px 10px;
border-radius: 999px 0 0 999px;
font-size: 13px;
width: 180px;
outline: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.topnav__search input[type="search"]::placeholder {
color: rgba(246,243,235,0.55);
}
.topnav__search input[type="search"]:focus {
border-color: var(--gold);
background: rgba(255,255,255,0.15);
width: 220px;
}
.topnav__search button {
background: var(--gold-dark);
border: 1px solid var(--gold-dark);
color: var(--topbar-bg);
padding: 5px 12px;
border-radius: 0 999px 999px 0;
cursor: pointer;
font-size: 13px;
border-left: none;
}
.topnav__search button:hover {
background: var(--orange);
border-color: #BF4E01;
}
.topnav__toggle {
background: transparent;
border: none;
border-left: 1px solid rgba(204,179,97,0.2);
color: var(--topbar-text);
cursor: pointer;
font-size: 18px;
padding: 0 14px;
line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s ease;
}
.topnav__toggle:hover { background: rgba(204,179,97,0.12); }
.topnav__toggle-dark { display: none; }
.topnav__toggle-light { display: inline; }
[data-color-scheme="slate"] .topnav__toggle-light { display: none; }
[data-color-scheme="slate"] .topnav__toggle-dark { display: inline; }
@media (prefers-color-scheme: dark) {
:root:not([data-color-scheme="default"]) .topnav__toggle-light { display: none; }
:root:not([data-color-scheme="default"]) .topnav__toggle-dark { display: inline; }
}
@media (max-width: 720px) {
/* Topnav mobile compatta: row+wrap invece di column.
Primary + newtopic + utility wrappano in 1-2 righe (era 3-4 righe). */
.topnav {
flex-direction: row !important;
flex-wrap: wrap;
align-items: stretch;
}
/* Voci primary più strette per entrare in 1 riga (6 voci × ~50-65px = 350px) */
.topnav__primary > li > a {
padding: 9px 11px !important;
font-size: 13px !important;
}
/* Nuovo topic compatto, accanto a utility */
.topnav__newtopic { flex: 0 0 auto; border-left: 1px solid rgba(204,179,97,0.18); border-top: 0; }
.topnav__newtopic > summary { padding: 9px 12px !important; font-size: 13px !important; }
/* Utility (Login/Iscriviti/FAQ) accanto su stessa riga, no più newline */
.topnav__utility {
flex: 0 0 auto !important;
width: auto !important;
border-top: 0 !important;
border-left: 1px solid rgba(204,179,97,0.18);
}
.topnav__utility > li > a {
padding: 9px 10px !important;
font-size: 12px !important;
}
/* Search e toggle invariati */
.topnav__search {
flex: 1 1 auto;
width: 100%;
border-left: 0;
border-top: 1px solid rgba(204,179,97,0.2);
justify-content: stretch;
}
.topnav__search input[type="search"] { flex: 1 1 auto; width: auto; }
.topnav__search input[type="search"]:focus { width: auto; }
.topnav__toggle {
position: absolute; top: 0; right: 0;
height: 38px; padding: 0 12px;
background: rgba(0, 0, 0, 0.35);
border-left: none;
border-bottom: 1px solid rgba(204,179,97,0.2);
}
}
/* === Utility nav (Login/Iscriviti/FAQ) — secondary, a destra ============ */
.topnav__utility {
list-style: none !important;
margin: 0 !important; padding: 0 !important;
display: flex !important; align-items: stretch; align-self: stretch;
border-left: 1px solid rgba(204, 179, 97, 0.18);
flex-direction: row !important;
}
.topnav__utility > li {
list-style: none !important;
margin: 0 !important; padding: 0 !important;
display: inline-flex !important;
}
.topnav__utility > li::before,
.topnav__utility > li::marker {
content: none !important; display: none !important;
}
.topnav__utility > li > a {
display: inline-flex !important; align-items: center;
padding: 11px 12px !important;
font-size: 13px !important; font-weight: 500 !important;
line-height: 1 !important;
color: var(--topbar-text-soft) !important;
text-decoration: none !important;
text-transform: none !important;
border-bottom: 2px solid transparent;
border-left: 1px solid rgba(204, 179, 97, 0.10);
white-space: nowrap;
transition: color 0.15s ease, background 0.15s ease;
}
.topnav__utility > li:first-child > a { border-left: 0; }
.topnav__utility > li > a:hover,
.topnav__utility > li > a:focus {
color: var(--topbar-accent); background: rgba(204, 179, 97, 0.10);
outline: none;
}
.topnav__utility .topnav__utility--primary {
color: var(--topbar-text); background: rgba(204, 179, 97, 0.10);
}
.topnav__utility .topnav__utility--primary:hover {
background: var(--topbar-accent-hi); color: var(--topbar-bg);
}
@media (max-width: 720px) {
.topnav__utility {
border-left: 0;
border-top: 1px solid rgba(204, 179, 97, 0.18);
flex-wrap: wrap;
width: 100%;
}
.topnav__utility > li > a { padding: 9px 12px; font-size: 12.5px; }
}
/* === Dropdown "+ Nuovo topic" =========================================== */
.topnav__newtopic {
position: relative; margin: 0;
align-self: stretch; display: flex; align-items: stretch;
border-left: 1px solid rgba(204, 179, 97, 0.18);
}
.topnav__newtopic > summary {
list-style: none; cursor: pointer;
padding: 11px 16px; font-weight: 600; font-size: 14px;
color: var(--topbar-newtopic-fg);
background: rgba(204, 179, 97, 0.06);
border-bottom: 2px solid transparent;
user-select: none; white-space: nowrap;
display: inline-flex; align-items: center;
}
.topnav__newtopic > summary::-webkit-details-marker { display: none; }
.topnav__newtopic > summary::marker { content: ""; }
.topnav__newtopic > summary:hover {
color: var(--topbar-accent); background: rgba(204, 179, 97, 0.14);
}
.topnav__newtopic[open] > summary {
color: var(--topbar-bg); background: var(--topbar-accent-hi);
border-bottom-color: var(--topbar-accent-hi);
}
.newtopic-menu {
position: absolute; top: 100%; right: 0;
min-width: 320px; max-width: 90vw; max-height: 70vh;
overflow: auto;
background: var(--cream); border: 1px solid var(--gold);
border-top: 0;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
padding: 10px 0 6px;
z-index: 100;
}
[data-color-scheme="slate"] .newtopic-menu,
html[data-color-scheme="slate"] .newtopic-menu {
background: var(--bg-card); border-color: var(--gold);
}
.newtopic-menu input[type="search"] {
display: block; width: calc(100% - 20px);
margin: 0 10px 8px; padding: 6px 10px;
font-size: 13px;
border: 1px solid rgba(140, 122, 62, 0.45);
border-radius: 3px;
background: #fff; color: var(--dark-1); outline: none;
}
[data-color-scheme="slate"] .newtopic-menu input[type="search"] {
background: var(--bg-card-alt); color: var(--txt); border-color: var(--bdr-strong);
}
.newtopic-menu input[type="search"]:focus { border-color: var(--rust); }
.newtopic-list { list-style: none; margin: 0; padding: 0; }
.newtopic-item { margin: 0; padding: 0; }
.newtopic-link {
display: block; padding: 5px 14px;
color: var(--dark-1); font-size: 13.5px;
text-decoration: none;
border-left: 3px solid transparent;
transition: background 0.12s ease, border-color 0.12s ease;
}
[data-color-scheme="slate"] .newtopic-link { color: var(--txt); }
.newtopic-link:hover, .newtopic-link:focus {
background: rgba(204, 179, 97, 0.18);
border-left-color: var(--rust);
}
.newtopic-cat {
display: block; padding: 8px 14px 3px;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--gold-text);
}
.newtopic-item--d1 .newtopic-link,
.newtopic-item--d1 .newtopic-cat { padding-left: 28px; }
.newtopic-item--d2 .newtopic-link,
.newtopic-item--d2 .newtopic-cat { padding-left: 42px; }
.newtopic-item--d3 .newtopic-link { padding-left: 56px; }
.newtopic-item--d4 .newtopic-link { padding-left: 70px; }
.newtopic-loading, .newtopic-empty {
padding: 12px 14px; font-size: 13px;
color: var(--gold-text); font-style: italic;
}
@media (max-width: 720px) {
.topnav__newtopic {
border-left: 0; border-top: 1px solid rgba(204,179,97,0.18);
}
.newtopic-menu { left: 0; right: 0; min-width: 0; }
}
/* === Cookie consent banner (GDPR) — fk-cookie-banner ====================
Mostrato fixed bottom finché l'utente non sceglie 'Accetta tutti' o 'Solo
necessari'. Estetica coerente (paper + serif), 2 pulsanti uguali in peso. */
.fk-cookie-banner {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 999;
background: var(--bg-card);
border-top: 3px solid var(--gold);
box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.18);
padding: 16px 18px;
font-family: var(--font-body);
animation: fk-cookie-slide-up 0.28s ease-out;
}
@keyframes fk-cookie-slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.fk-cookie-banner { animation: none; }
}
.fk-cookie-banner__inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
@media (min-width: 720px) {
.fk-cookie-banner__inner {
flex-direction: row;
align-items: center;
gap: 24px;
}
}
.fk-cookie-banner__text {
flex: 1 1 auto;
min-width: 0;
}
.fk-cookie-banner__text p {
margin: 0;
font-size: 13.5px;
line-height: 1.5;
color: var(--txt);
}
.fk-cookie-banner__text strong { color: var(--gold-text); }
.fk-cookie-banner__text a {
color: var(--gold-text);
text-decoration: underline;
text-underline-offset: 2px;
}
.fk-cookie-banner__actions {
flex: 0 0 auto;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.fk-cookie-banner__btn {
padding: 9px 16px;
font: 600 13.5px/1 var(--font-meta);
border-radius: 3px;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fk-cookie-banner__btn--primary {
background: var(--gold-dark);
color: #fff;
border: 1px solid var(--gold-dark);
}
.fk-cookie-banner__btn--primary:hover,
.fk-cookie-banner__btn--primary:focus {
background: var(--rust);
border-color: var(--rust);
outline: none;
}
.fk-cookie-banner__btn--secondary {
background: transparent;
color: var(--txt);
border: 1px solid var(--bdr);
}
.fk-cookie-banner__btn--secondary:hover,
.fk-cookie-banner__btn--secondary:focus {
background: var(--bg-card-alt);
border-color: var(--gold);
outline: none;
}
/* === Layout ============================================================ */
.layout {
max-width: var(--maxw-content);
margin: 24px auto;
padding: 0 16px;
display: grid;
/* minmax(0, 1fr) invece di 1fr: permette alla colonna grid di shrinkare
sotto il min-content dei figli (con .card__body { min-width: 0 } già
impostato, le card si adattano al viewport). Fix overflow 25px @ 360px. */
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
@media (min-width: 980px) {
.layout {
grid-template-columns: minmax(0, 1fr) 320px;
gap: 28px;
}
}
/* === Feed header ======================================================= */
.feed-header h1 {
margin: 0 0 4px;
font-size: 26px;
color: var(--txt);
letter-spacing: -0.01em;
}
.feed-header h1::after {
content: "";
display: block;
width: 64px; height: 3px;
background: var(--gold);
margin-top: 6px;
border-radius: 2px;
}
.feed-desc {
margin: 8px 0 18px;
color: var(--text-dim);
font-size: 14px;
}
.breadcrumb {
margin: 0 0 6px;
font-size: 12px;
color: var(--text-dim);
}
.breadcrumb a { color: var(--gold-text); }
.breadcrumb span { margin: 0 4px; color: var(--gray-light); }
.scope-actions { margin: 4px 0 8px; }
.btn--small { padding: 4px 10px; font-size: 12px; }
/* === Genus index ====================================================== */
.genus-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 10px;
margin: 16px 0 22px;
}
.genus-tile {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 14px 16px;
background: #fff;
border: 1px solid var(--cream-bdr);
border-left: 4px solid var(--gold);
border-radius: 4px;
text-decoration: none !important;
transition: all 0.15s ease;
}
.genus-tile:hover {
border-color: var(--gold);
border-left-color: var(--orange);
background: var(--cream-2);
transform: translateX(2px);
}
.genus-tile h3 {
margin: 0 0 4px;
color: var(--dark-1);
font-size: 15px;
font-weight: 700;
font-style: italic;
border: none;
padding: 0;
}
.genus-tile .genus-stats {
font-size: 12px;
color: var(--text-dim);
}
.genus-section-title {
margin: 22px 0 4px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--dark-2);
}
/* === Filter tabs ======================================================= */
/* === Filter dropdown (In evidenza / Nuovi / Top* / ecc) =================
Desktop: pill horizontal (come prima)
Mobile (≤720px): collapsible — solo voce attiva visibile,
click su chevron per espandere. Risparmia ~50px verticali. */
.filter-dropdown {
margin: 0 0 18px;
}
.filter-dropdown__summary {
display: none; /* nascosto su desktop, mostrato su mobile */
}
.filter-tabs,
.filter-dropdown__menu {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding-bottom: 8px;
border-bottom: 1px solid var(--cream-bdr);
}
/* MOBILE: collapsible */
@media (max-width: 720px) {
.filter-dropdown__summary {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 10px 14px;
background: var(--bg-card-alt);
border: 1px solid var(--bdr);
border-radius: 6px;
font-weight: 600;
font-size: 14px;
color: var(--txt);
list-style: none;
user-select: none;
}
.filter-dropdown__summary::-webkit-details-marker { display: none; }
.filter-dropdown__summary::marker { content: ""; }
.filter-dropdown__chevron {
color: var(--gold-text);
font-size: 14px;
transition: transform 0.18s ease;
}
.filter-dropdown[open] .filter-dropdown__chevron {
transform: rotate(180deg);
}
.filter-dropdown__summary:hover {
border-color: var(--gold);
background: var(--bg-card);
}
/* Menu nascosto di default; visibile quando aperto */
.filter-dropdown:not([open]) .filter-dropdown__menu {
display: none;
}
.filter-dropdown[open] .filter-dropdown__menu {
margin-top: 6px;
padding: 6px;
background: var(--bg-card-alt);
border: 1px solid var(--bdr);
border-radius: 6px;
border-bottom: 1px solid var(--cream-bdr);
flex-direction: column;
gap: 4px;
}
.filter-dropdown[open] .filter-dropdown__menu .tab {
border-radius: 3px;
text-align: left;
}
}
.tab {
display: inline-block;
padding: 7px 13px;
font-size: 13px;
font-weight: 600;
color: var(--txt-dim);
background: var(--bg-card-alt);
border: 1px solid var(--bdr);
border-radius: 999px;
white-space: nowrap;
transition: all 0.15s ease;
}
.tab:hover {
color: var(--txt);
background: var(--bg-card);
border-color: var(--gold);
text-decoration: none;
}
.tab--active {
color: #fff;
background: linear-gradient(to bottom, var(--gold), var(--gold-dark));
border-color: var(--gold-dark);
text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
}
.tab--active:hover {
color: #fff;
background: linear-gradient(to bottom, var(--orange-soft), #BF4E01);
border-color: #BF4E01;
}
/* === Card list ========================================================= */
.card-list {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.card {
display: flex;
background: var(--bg-card);
border: 1px solid var(--bdr);
border-radius: 6px;
box-shadow: var(--shadow-card);
overflow: hidden;
transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease,
background-color 0.2s ease;
}
.card:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-card-h);
border-color: var(--gold);
}
.card--pinned {
border-left: 4px solid var(--gold);
background: var(--bg-card);
position: relative;
}
.card--pinned::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0; width: 70px;
background: linear-gradient(to right, rgba(204,179,97,0.18), transparent);
pointer-events: none;
}
.card--pinned:hover {
border-left-color: var(--orange);
}
.card__pin {
display: inline-block;
padding: 1px 8px;
background: var(--gold);
color: var(--dark-1) !important;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: none;
}
.card__score {
flex: 0 0 64px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 14px 6px 12px;
background: var(--bg-score);
border-right: 1px solid var(--bdr);
text-align: center;
}
.card__score-num {
font-size: 18px;
font-weight: 700;
color: var(--gold-text);
line-height: 1.1;
}
.card__score-lbl {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
margin-top: 2px;
}
@media (min-width: 720px) {
.card__score { flex-basis: 76px; padding: 16px 8px 14px; }
.card__score-num { font-size: 21px; }
}
.card__body {
flex: 1 1 auto;
padding: 12px 16px 14px;
min-width: 0;
}
.card__meta {
font-size: 12px;
color: var(--text-dim);
margin-bottom: 4px;
display: flex;
flex-wrap: wrap;
gap: 4px 6px;
align-items: center;
}
.card__forum {
display: inline-block;
padding: 2px 8px;
background: var(--dark-1);
color: var(--gold-soft) !important;
border-radius: 999px;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.01em;
}
.card__forum:hover {
background: var(--orange);
color: #fff !important;
text-decoration: none;
}
.card__forum--genus {
background: linear-gradient(to bottom, var(--gold-dark), var(--dark-2));
color: var(--cream) !important;
}
.card__forum--genus em {
font-style: italic;
color: var(--gold-soft) !important;
}
.card__forum--genus:hover em {
color: #fff !important;
}
.card__sep { color: var(--cream-bdr); }
.card__author strong { color: var(--dark-2); font-weight: 600; }
.card__attach { color: var(--gold-text); }
.card__title {
margin: 4px 0 6px;
font-size: 17px;
line-height: 1.3;
font-weight: 700;
letter-spacing: -0.005em;
}
.card__title a {
color: var(--txt);
}
.card__title a:hover {
color: var(--orange);
text-decoration: none;
}
.card__species {
font-size: 12px;
color: var(--gold-text);
margin: 0 0 6px;
}
.card__preview {
margin: 4px 0 10px;
color: var(--text-dim);
font-size: 14px;
line-height: 1.45;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.card__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
font-size: 12px;
color: var(--text-dim);
}
.stat { white-space: nowrap; }
.stat--dim { color: var(--gray-light); }
.card__open {
margin-left: auto;
font-size: 13px;
font-weight: 600;
color: var(--gold-text);
}
.card__open:hover {
color: var(--orange);
text-decoration: none;
}
.empty {
text-align: center;
padding: 40px 20px;
color: var(--txt-dim);
background: var(--bg-card-alt);
border: 1px dashed var(--bdr);
border-radius: 6px;
}
.footnote {
margin: 22px 0 0;
font-size: 12px;
color: var(--gray-light);
text-align: center;
}
/* === Sidebar =========================================================== */
.sidebar {
display: flex;
flex-direction: column;
gap: 14px;
}
.side-card {
background: var(--bg-card);
border: 1px solid var(--bdr);
border-radius: 6px;
padding: 14px 16px;
box-shadow: var(--shadow-card);
}
.side-card h3 {
margin: 0 0 8px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--txt);
border-bottom: 1px solid var(--gold);
padding-bottom: 6px;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.side-more {
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--gold-text);
}
.side-card p {
margin: 6px 0;
font-size: 13px;
line-height: 1.5;
color: var(--text);
}
.side-card--about { background: var(--bg-card-alt); }
.side-card--note p { color: var(--txt-dim); font-style: italic; font-size: 12px; }
/* WCAG 2.4.7 + 1.4.1: link dentro block-text deve avere distinzione non-color
(es. underline) — altrimenti chi non distingue oro/grigio non vede il link. */
.side-card--note p a { text-decoration: underline; text-underline-offset: 2px; }
.side-list {
list-style: none;
margin: 0; padding: 0;
}
.side-list li {
border-bottom: 1px solid var(--bdr-soft);
}
.side-list li:last-child { border-bottom: 0; }
.side-list li a, .side-list li {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 6px 0;
font-size: 13px;
}
.side-list li a:hover { background: var(--bg-card-alt); padding-left: 4px; padding-right: 4px; text-decoration: none; }
.side-list__name { color: var(--txt); font-weight: 500; }
.side-list__count {
color: var(--gold-text);
font-variant-numeric: tabular-nums;
font-size: 12px;
}
.side-list--users li { counter-increment: usr; }
.side-list--users li::before {
content: counter(usr);
display: inline-block;
width: 18px;
text-align: center;
margin-right: 6px;
color: var(--gold);
font-weight: 700;
font-size: 12px;
}
.side-list--users { counter-reset: usr; }
.side-list--users li {
display: flex;
align-items: center;
}
.btn {
display: inline-block;
padding: 7px 14px;
background: linear-gradient(to bottom, var(--gold), var(--gold-dark));
color: #fff !important;
font-size: 13px;
font-weight: 600;
border-radius: 4px;
border: 1px solid var(--gold-dark);
text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
text-decoration: none !important;
}
.btn:hover {
background: linear-gradient(to bottom, var(--orange-soft), #BF4E01);
border-color: #BF4E01;
}
/* === Footer ============================================================ */
.site-footer {
background: var(--dark-1);
border-top: 3px solid var(--gold);
color: var(--cream);
padding: 22px 16px;
margin-top: 36px;
font-size: 13px;
}
.site-footer__inner {
max-width: var(--maxw-content);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
justify-content: center;
}
.site-footer a { color: var(--gold-soft); }
.site-footer a:hover { color: var(--gold); }
.site-footer .dot { color: var(--gold-text); }
.site-footer .dev-badge {
background: var(--orange);
color: #fff;
padding: 2px 8px;
border-radius: 3px;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.05em;
}
/* === Mobile tweaks ===================================================== */
@media (max-width: 519px) {
.card__score { flex-basis: 56px; padding: 12px 4px; }
.card__score-num { font-size: 16px; }
.card__title { font-size: 16px; }
.card__open { display: none; }
.feed-header h1 { font-size: 22px; }
}
/* ====================================================================
* DESIGN OVERRIDE — "Naturalist Cabinet · vade ad formicam"
* --------------------------------------------------------------------
* Skin editoriale che preserva intatta la palette Wayback 2015 (dark+oro)
* e tutte le classi del layout. Aggiunge: tipografia serif system,
* decorazioni stile timbro entomologico, paper-grain anche in dark,
* stagger reveal su page-load, accento rosso-ruggine recuperato dal
* cerchio del logo originale.
* ==================================================================== */
/* --- Tipografia editoriale ------------------------------------------- */
.feed-header h1,
.genus-section-title,
.side-card h3,
.card__title,
.empty,
.feed-desc,
h2.genus-section-title {
font-family: var(--font-display);
}
/* Display headline: serif larga, leggera contrazione del tracking */
.feed-header h1 {
font-size: 34px;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.012em;
margin: 8px 0 0;
}
@media (min-width: 720px) {
.feed-header h1 { font-size: 40px; }
}
/* Sostituisce il bar oro spesso con una "double rule" stile cabinet plate
+ ornamento ✦ centrale (richiamo del logo timbrato). */
.feed-header h1::after {
content: "";
display: block;
width: 96px;
height: 0;
margin-top: 14px;
border-top: 1px solid var(--gold);
border-bottom: 1px solid var(--gold);
background: transparent;
border-radius: 0;
padding-top: 3px;
position: relative;
}
/* Eyebrow "✦ vade ad formicam ✦" rimosso 2026-05-14: il claim è ora nel
.site-tagline sotto il banner image (uniforme sui 3 frontend), evitando
doppione visuale sulla sola bacheca. */
.feed-desc {
font-style: italic;
font-size: 16px;
line-height: 1.5;
max-width: 62ch;
color: var(--txt-dim);
margin-top: 14px;
}
/* Section titles in small-caps editoriali, niente uppercase brutale */
.genus-section-title {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--gold-text);
border-bottom: 1px solid var(--bdr);
padding-bottom: 6px;
margin: 32px 0 14px;
}
[data-color-scheme="slate"] .genus-section-title { color: var(--gold-soft); }
@media (prefers-color-scheme: dark) {
:root:not([data-color-scheme="default"]) .genus-section-title { color: var(--gold-soft); }
}
/* --- Sidebar headings stile timbro ----------------------------------- */
.side-card h3 {
font-family: var(--font-meta);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
border-bottom: 1px solid var(--gold);
padding-bottom: 7px;
position: relative;
}
.side-card h3::after {
/* hairline secondaria che crea il "double rule" da plate ottocentesco */
content: "";
position: absolute;
left: 0; right: 0; bottom: -3px;
border-bottom: 1px solid var(--bdr-soft);
}
.side-more {
font-family: var(--font-meta);
letter-spacing: 0.04em;
}
.side-card p,
.side-card--note p {
font-family: var(--font-body);
}
.side-card--about strong { color: var(--gold-text); }
/* --- Card titles serif + hover surprise ------------------------------ */
.card__title {
font-family: var(--font-display);
font-size: 19px;
font-weight: 600;
line-height: 1.28;
letter-spacing: -0.005em;
}
@media (min-width: 720px) {
.card__title { font-size: 20px; }
}
.card__title a {
background-image: linear-gradient(currentColor, currentColor);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0% 1px;
transition: background-size 0.32s cubic-bezier(.2,.7,.2,1), color 0.18s ease;
}
.card:hover .card__title a {
color: var(--rust);
background-size: 100% 1px;
}
[data-color-scheme="slate"] .card:hover .card__title a { color: var(--rust-soft); }
@media (prefers-color-scheme: dark) {
:root:not([data-color-scheme="default"]) .card:hover .card__title a { color: var(--rust-soft); }
}
/* Specie in italic raffinato, nome scientifico stile catalogo */
.card__species {
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
letter-spacing: 0.005em;
color: var(--gold-text);
}
[data-color-scheme="slate"] .card__species { color: var(--gold-soft); }
/* --- Meta in mono + tag forum stile timbro --------------------------- */
.card__meta,
.card__footer,
.breadcrumb,
.footnote,
.card__score-lbl,
.tab,
.card__forum,
.card__author strong {
font-family: var(--font-meta);
}
.card__score-num {
font-family: var(--font-mono);
font-feature-settings: "tnum" 1;
letter-spacing: -0.01em;
}
.card__score-lbl {
letter-spacing: 0.18em;
font-size: 9px;
font-weight: 700;
}
.card__forum {
font-family: var(--font-meta);
font-size: 10.5px;
letter-spacing: 0.05em;
text-transform: lowercase;
border: 1px solid rgba(204, 179, 97, 0.25);
}
.card__forum--genus em {
letter-spacing: 0.01em;
}
.card__author strong { font-weight: 700; letter-spacing: 0.005em; }
/* --- Breadcrumb con separatore ✦ tipografico ------------------------- */
.breadcrumb {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--txt-muted);
}
.breadcrumb span {
color: var(--rust);
opacity: 0.6;
font-size: 9px;
margin: 0 8px;
transform: translateY(-1px);
display: inline-block;
}
/* --- Filter tabs: pill ma con tipografia in small-caps --------------- */
.tab {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 999px;
}
.tab--active {
text-shadow: none;
background: var(--dark-1);
color: var(--gold);
border-color: var(--gold-dark);
}
.tab--active:hover {
background: var(--rust);
color: #fff;
border-color: var(--rust);
}
/* --- Buttons: editoriali, niente shadow saponata --------------------- */
.btn {
font-family: var(--font-meta);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
background: var(--dark-1);
border: 1px solid var(--gold-dark);
color: var(--gold) !important;
text-shadow: none;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(204, 179, 97, 0.08);
padding: 9px 18px;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:hover {
background: var(--rust);
border-color: var(--rust);
color: #fff !important;
}
.btn--small {
padding: 5px 12px;
font-size: 10.5px;
letter-spacing: 0.12em;
}
/* --- Genus tile: card editoriale con border hairline ----------------- */
.genus-tile {
border: 1px solid var(--bdr);
border-left: 3px solid var(--gold);
border-radius: 3px;
background: var(--bg-card);
padding: 16px 18px 14px;
transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.genus-tile:hover {
border-color: var(--gold);
border-left-color: var(--rust);
background: var(--bg-card-alt);
transform: translateX(3px);
}
.genus-tile h3 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
font-style: italic;
color: var(--txt);
letter-spacing: -0.005em;
}
.genus-tile .genus-stats {
font-family: var(--font-meta);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--txt-muted);
margin-top: 6px;
}
/* --- Card containers: radius più editoriale, hairline borders -------- */
.card {
border-radius: 3px;
border-color: var(--bdr);
}
.card__score { border-right: 1px solid var(--bdr-soft); }
.side-card { border-radius: 3px; }
.empty { border-radius: 3px; }
.card__pin { border-radius: 2px; font-family: var(--font-meta); letter-spacing: 0.14em; text-transform: uppercase; font-size: 9.5px; }
/* --- Search & nav typography ----------------------------------------- */
.topnav__primary > li > a {
font-family: var(--font-meta);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 13px 16px;
}
.topnav__search input[type="search"] {
font-family: var(--font-meta);
font-size: 12px;
letter-spacing: 0.04em;
}
/* --- Footer: motto VADE AD FORMICAM come cinta ----------------------- */
.site-footer { padding-top: 26px; padding-bottom: 22px; }
.site-footer__inner {
font-family: var(--font-meta);
font-size: 11.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.site-footer__inner > span:first-child {
font-family: var(--font-display);
font-style: italic;
font-size: 13.5px;
letter-spacing: 0.01em;
text-transform: none;
color: var(--gold-soft);
}
.site-footer::before {
content: "✦ vade ad formicam · piger ✦ considera vias eius et disce sapientiam ✦";
display: block;
text-align: center;
font-family: var(--font-meta);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--gold-text);
opacity: 0.8;
padding-bottom: 18px;
border-bottom: 1px solid rgba(204, 179, 97, 0.18);
margin-bottom: 18px;
max-width: var(--maxw-content);
margin-left: auto;
margin-right: auto;
}
@media (max-width: 600px) {
.site-footer::before { letter-spacing: 0.22em; font-size: 8.5px; }
}
/* --- Paper grain anche in dark mode ---------------------------------- */
/* Noise SVG inline (data URI) — riproduce la sensazione "carta antica"
anche su slate, dove la texture jpeg diventerebbe troppo scura. */
[data-color-scheme="slate"] body {
background-image:
url("data:image/svg+xml;utf8,");
background-repeat: repeat;
}
@media (prefers-color-scheme: dark) {
:root:not([data-color-scheme="default"]) body {
background-image:
url("data:image/svg+xml;utf8,");
background-repeat: repeat;
}
}
/* --- Stagger reveal su page-load (cards + genus tiles) --------------- */
@keyframes nat-rise {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.card-list .card,
.genus-grid .genus-tile {
animation: nat-rise 0.45s cubic-bezier(.2, .7, .2, 1) both;
}
.card-list .card:nth-child(1), .genus-grid .genus-tile:nth-child(1) { animation-delay: 0.02s; }
.card-list .card:nth-child(2), .genus-grid .genus-tile:nth-child(2) { animation-delay: 0.06s; }
.card-list .card:nth-child(3), .genus-grid .genus-tile:nth-child(3) { animation-delay: 0.10s; }
.card-list .card:nth-child(4), .genus-grid .genus-tile:nth-child(4) { animation-delay: 0.14s; }
.card-list .card:nth-child(5), .genus-grid .genus-tile:nth-child(5) { animation-delay: 0.18s; }
.card-list .card:nth-child(6), .genus-grid .genus-tile:nth-child(6) { animation-delay: 0.22s; }
.card-list .card:nth-child(7), .genus-grid .genus-tile:nth-child(7) { animation-delay: 0.26s; }
.card-list .card:nth-child(8), .genus-grid .genus-tile:nth-child(8) { animation-delay: 0.30s; }
.card-list .card:nth-child(n+9),
.genus-grid .genus-tile:nth-child(n+9) { animation-delay: 0.34s; }
@media (prefers-reduced-motion: reduce) {
.card-list .card,
.genus-grid .genus-tile { animation: none; }
.card__title a { transition: none; background-size: 100% 1px; }
}
/* --- Refinements: card stat icons + dot separators ------------------- */
.card__sep { color: var(--rust); opacity: 0.55; }
.site-footer .dot { color: var(--rust); opacity: 0.6; }
/* --- Body: kerning serif + selection color editoriale ---------------- */
::selection { background: var(--rust); color: #fff; }
[data-color-scheme="slate"] ::selection { background: var(--gold); color: var(--dark-1); }