/* ==========================================================================
La Lama Nera - stili principali
Struttura: variabili, base, testata, contenuti, compatibilita' contenuti, footer.
Mobile first: il layout desktop parte da 1080px.
========================================================================== */
/* --- Variabili ----------------------------------------------------------- */
:root {
--c-bg: #0a0806;
--c-bg-deep: #050403;
--c-panel: rgba(10, 7, 4, 0.97);
--c-text: #e9e1cf;
--c-text-soft: #b3a88f;
--c-heading: #f3e7c9;
--c-gold: #efb525;
--c-bronze: #977039;
--c-line: rgba(239, 181, 37, 0.35);
--c-line-soft: rgba(239, 181, 37, 0.15);
--f-title: 'Uncial Antiqua', Georgia, serif;
--f-text: 'Raleway', 'Segoe UI', Arial, sans-serif;
--f-ui: 'Overlock', 'Segoe UI', Arial, sans-serif;
--f-mono: 'Lekton', 'Courier New', monospace;
--w-max: 1200px;
--w-text: 800px;
--gutter: clamp(16px, 4vw, 40px);
--topbar-h: 56px;
--titlebar-h: 0px; /* striscia del titolo: solo desktop (vedi sotto) */
--admin-bar: 0px;
}
body.admin-bar { --admin-bar: 32px; }
@media (max-width: 782px) {
body.admin-bar { --admin-bar: 46px; }
}
/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
background: var(--c-bg);
-webkit-text-size-adjust: 100%;
scroll-padding-top: calc(var(--topbar-h) + var(--admin-bar) + 12px);
}
body {
margin: 0;
background: var(--c-bg);
color: var(--c-text);
font-family: var(--f-text);
font-weight: 300;
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
line-height: 1.65;
overflow-wrap: break-word;
}
body.nav-open { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; }
a {
color: var(--c-gold);
text-decoration: none;
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
}
a:hover { text-decoration: underline; }
:focus-visible {
outline: 2px solid var(--c-gold);
outline-offset: 2px;
}
button { font: inherit; cursor: pointer; }
strong, b { font-weight: 600; }
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
padding: 0.5em 1em;
background: var(--c-gold);
color: #000;
}
.skip-link:focus { left: 1rem; top: calc(var(--admin-bar) + 0.5rem); }
.wrap {
width: 100%;
max-width: var(--w-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap--content { max-width: calc(var(--w-text) + 2 * var(--gutter)); }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon--inline { width: 1em; height: 1em; vertical-align: -0.15em; color: var(--c-gold); }
.menu { list-style: none; margin: 0; padding: 0; }
.menu a { color: inherit; text-decoration: none; }
/* --- Barra superiore (menu) ---------------------------------------------- */
/*
* La testata intera e' "appiccicosa", spostata in alto dell'altezza della striscia del titolo:
* scorrendo, la striscia esce dallo schermo e la barra del menu resta fissa.
* (Una barra sticky dentro la testata si fermerebbe solo finche' la testata e' visibile.)
*/
.site-header {
position: sticky;
top: calc(var(--admin-bar) - var(--titlebar-h));
z-index: 100;
}
.topbar {
position: relative;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.82));
border-bottom: 1px solid var(--c-line);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.topbar__inner {
display: flex;
align-items: center;
gap: 0.5rem;
min-height: var(--topbar-h);
}
.nav-toggle,
.music-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 40px;
padding: 0.35rem 0.7rem;
background: none;
border: 1px solid var(--c-bronze);
border-radius: 4px;
color: var(--c-gold);
}
.nav-toggle:hover,
.music-toggle:hover { border-color: var(--c-gold); }
.nav-toggle__close { display: none; }
.nav-open .nav-toggle__open { display: none; }
.nav-open .nav-toggle__close { display: block; }
.music-toggle { position: relative; }
.music-toggle.is-off { color: var(--c-text-soft); }
.music-toggle.is-off::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 26px;
height: 2px;
background: currentColor;
transform: translate(-50%, -50%) rotate(-45deg);
}
/* Nome del sito */
.site-title,
.topbar__title {
margin: 0;
font-family: var(--f-title);
line-height: 1.1;
text-align: center;
}
.site-title a,
.topbar__title a { color: var(--c-gold); text-decoration: none; }
.topbar__title { flex: 1; font-size: clamp(1rem, 0.8rem + 1.2vw, 1.35rem); }
/* Striscia del titolo: solo desktop (su telefono il nome e' nella barra del menu) */
.titlebar { display: none; }
/* Pannello del menu (telefono e tablet) */
.nav-panel {
display: none;
position: fixed;
inset: calc(var(--topbar-h) + var(--admin-bar)) 0 0 0;
overflow-y: auto;
padding: 0.5rem var(--gutter) 2.5rem;
background: var(--c-bg);
border-top: 1px solid var(--c-line);
}
.nav-open .nav-panel { display: block; }
.menu--main > li {
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid var(--c-line-soft);
}
.menu--main > li > a {
flex: 1;
padding: 0.8rem 0;
font-family: var(--f-title);
font-size: 1.25rem;
color: #fff;
}
.menu--main > li.current-menu-ancestor > a,
.menu--main > li.current-menu-item > a { color: var(--c-gold); }
.submenu-toggle {
display: inline-flex;
padding: 0.6rem;
background: none;
border: 0;
color: var(--c-gold);
}
.submenu-toggle .icon { transition: transform 0.2s; }
.submenu-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.menu--main .sub-menu {
display: none;
flex-basis: 100%;
list-style: none;
margin: 0 0 0.75rem;
padding: 0 0 0 1rem;
border-left: 2px solid var(--c-bronze);
}
.menu--main li.is-open > .sub-menu { display: block; }
.menu--main .sub-menu a {
display: block;
padding: 0.45rem 0;
font-family: var(--f-ui);
font-size: 1.05rem;
color: #e8dcc0;
}
.menu--main .sub-menu .current-menu-item > a { color: var(--c-gold); }
.nav-panel__extra {
display: grid;
gap: 1.25rem;
margin-top: 1.5rem;
}
.nav-panel__extra .menu--external { flex-direction: column; gap: 0.6rem; }
/* Link esterni */
.menu--external {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.25rem;
font-family: var(--f-ui);
}
.menu--external a { color: #fff; }
.menu--external a:hover { color: var(--c-gold); text-decoration: none; }
/* Ricerca */
.search-form {
display: flex;
align-items: center;
width: 100%;
max-width: 320px;
background: #000;
border: 1px solid var(--c-bronze);
border-radius: 4px;
overflow: hidden;
}
.search-form label { flex: 1; }
.search-form__input {
width: 100%;
padding: 0.5rem 0.75rem;
background: transparent;
border: 0;
color: #fff;
font: inherit;
font-family: var(--f-ui);
}
.search-form__input::placeholder { color: var(--c-text-soft); }
.search-form__input:focus { outline: none; }
.search-form:focus-within { border-color: var(--c-gold); box-shadow: 0 0 0 1px var(--c-gold); }
.search-form__button {
display: inline-flex;
padding: 0.5rem 0.75rem;
background: none;
border: 0;
color: var(--c-gold);
}
/* --- Desktop ------------------------------------------------------------- */
@media (min-width: 1080px) {
.nav-toggle,
.topbar__title,
.topbar__music { display: none; }
/* Striscia del titolo sopra il menu (altezza fissa: 64px + 1px di bordo) */
:root { --titlebar-h: 65px; }
.titlebar {
display: block;
background: #000;
border-bottom: 1px solid var(--c-line-soft);
}
.titlebar__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 2rem;
height: 64px;
}
.titlebar__search { justify-self: start; width: 100%; max-width: 260px; }
.titlebar__right { justify-self: end; display: flex; align-items: center; gap: 1.25rem; }
.titlebar__external .menu--external { flex-wrap: nowrap; gap: 1rem; font-size: 0.95rem; white-space: nowrap; }
.site-title { font-size: clamp(1.5rem, 1rem + 1vw, 2rem); }
.nav-panel {
display: block;
position: static;
flex: 1;
overflow: visible;
padding: 0;
background: none;
border: 0;
}
.nav-panel__extra { display: none; }
.menu--main { display: flex; justify-content: space-evenly; }
.menu--main > li { display: block; position: relative; border: 0; }
.menu--main > li > a {
display: block;
position: relative;
padding: 1rem 0.9rem;
font-size: 1rem;
transition: color 0.2s;
}
/* Sottolineatura oro che si allarga */
.menu--main > li > a::after {
content: '';
position: absolute;
left: 50%;
right: 50%;
bottom: 0.65rem;
height: 1px;
background: var(--c-gold);
transition: left 0.25s, right 0.25s;
}
.menu--main > li:hover > a,
.menu--main > li:focus-within > a { color: var(--c-gold); }
.menu--main > li:hover > a::after,
.menu--main > li:focus-within > a::after,
.menu--main > li.current-menu-ancestor > a::after,
.menu--main > li.current-menu-item > a::after { left: 0.9rem; right: 0.9rem; }
.submenu-toggle { display: none; }
/* Pannello a tendina */
.menu--main .sub-menu {
display: block;
position: absolute;
top: 100%;
left: 50%;
z-index: 10;
min-width: 220px;
margin: 0;
padding: 0.5rem 0;
background: var(--c-panel);
border: 1px solid var(--c-bronze);
border-top: 2px solid var(--c-gold);
border-radius: 0 0 4px 4px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65);
opacity: 0;
visibility: hidden;
transform: translate(-50%, 6px);
transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.menu--main li:hover > .sub-menu,
.menu--main li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
/* Freccina oro */
.menu--main .sub-menu::before {
content: '';
position: absolute;
top: -9px;
left: 50%;
margin-left: -7px;
border: 7px solid transparent;
border-top: 0;
border-bottom-color: var(--c-gold);
}
.menu--main .sub-menu li + li {
border-top: 1px solid transparent;
border-image: linear-gradient(to right, transparent, var(--c-line), transparent) 1;
}
.menu--main .sub-menu a {
padding: 0.5rem 1.4rem 0.5rem 1.25rem;
border-left: 2px solid transparent;
font-size: 0.95rem;
white-space: nowrap;
transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.menu--main .sub-menu a:hover,
.menu--main .sub-menu .current-menu-item > a {
color: var(--c-gold);
background-color: rgba(239, 181, 37, 0.08);
border-left-color: var(--c-gold);
}
}
/* --- Banner di sezione --------------------------------------------------- */
.hero {
background: #000;
border-bottom: 1px solid var(--c-line);
}
.hero__frame { position: relative; }
/* Senza immagine: sfondo neutro nero e oro con fascia celtica */
.hero--plain .hero__frame {
display: grid;
place-items: center;
min-height: clamp(150px, 22vw, 340px);
background:
url(../img/celtic-square.png) center bottom 12px / auto 22px repeat-x,
radial-gradient(ellipse at center, #2b1e0e 0%, #120c06 55%, #070504 100%);
}
/* Con immagine: sempre intera (ha la cornice), al massimo 1600px, centrata sul nero */
.hero--image .hero__frame {
max-width: 1600px;
margin-inline: auto;
}
.hero__img {
display: block;
width: 100%;
height: auto;
}
.hero__text {
position: relative;
z-index: 1;
padding: 1.5rem var(--gutter) 2.25rem;
text-align: center;
}
/* Su telefono il testo sta sotto l'immagine */
.hero--image .hero__text { padding: 1rem var(--gutter) 1.25rem; }
/* Da tablet in su il testo sta sull'immagine, nella zona scelta (Opzioni pagina) */
@media (min-width: 700px) {
/* Griglia 3x3: orizzontale 34% / 50% / 66%, verticale 30% / 50% / 70% (dentro la cornice) */
.hero--image { --hero-x: 34%; --hero-y: 50%; }
.hero--pos-center { --hero-x: 50%; }
.hero--pos-right { --hero-x: 66%; }
.hero--vpos-top { --hero-y: 30%; }
.hero--vpos-bottom { --hero-y: 70%; }
.hero--image .hero__frame::after {
content: '';
position: absolute;
inset: 0;
/* Sfumatura scura sotto il testo: leggibile con qualunque immagine */
background: radial-gradient(ellipse 34% 45% at var(--hero-x) var(--hero-y), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}
.hero--image .hero__text {
position: absolute;
top: var(--hero-y);
left: var(--hero-x);
width: 44%;
padding: 0;
transform: translate(-50%, -50%);
}
}
.hero__title {
margin: 0;
font-family: var(--f-title);
font-weight: 400;
font-size: clamp(1.9rem, 1rem + 4vw, 3.6rem);
line-height: 1.1;
color: var(--c-gold);
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9), 0 0 2px #000;
}
.hero__title a { color: inherit; text-decoration: none; }
.hero__subtitle {
margin: 0.4rem 0 0;
font-family: var(--f-ui);
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
color: var(--c-heading);
text-shadow: 0 1px 6px #000;
}
/* --- Slider della home --------------------------------------------------- */
/* Usa le regole del banner (.hero--image, griglia 3x3); le slide sono sovrapposte e si dissolvono */
.slider {
background: #000;
border-bottom: 1px solid var(--c-line);
}
.slider__track { display: grid; }
.slide {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transition: opacity 0.8s ease, visibility 0.8s;
}
.slide.is-active { opacity: 1; visibility: visible; }
.slide .hero__text { text-align: left; }
.slide .hero__title { font-size: clamp(1.6rem, 1rem + 2.2vw, 2.6rem); }
.slide__desc {
margin: 0.6rem 0 0;
font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.05rem);
line-height: 1.55;
color: var(--c-text);
text-shadow: 0 1px 6px #000;
}
.slide__button {
display: inline-block;
margin-top: 1rem;
padding: 0.55rem 1.2rem;
background: rgba(0, 0, 0, 0.55);
border: 1px solid var(--c-gold);
border-radius: 3px;
color: var(--c-gold);
font-family: var(--f-ui);
font-size: 1rem;
text-decoration: none;
transition: background-color 0.2s, color 0.2s;
}
.slide__button:hover,
.slide__button:focus-visible { background: var(--c-gold); color: #000; text-decoration: none; }
/* Testi lunghi: sopra l'immagine solo da 1100px; fra 700 e 1100 stanno sotto, come su telefono */
@media (min-width: 700px) and (max-width: 1099px) {
.slide .hero__frame::after { display: none; }
.slide.hero--image .hero__text {
position: static;
width: auto;
padding: 1rem var(--gutter) 1.25rem;
transform: none;
}
}
.slider__controls {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0 0.9rem;
}
.slider__btn {
display: inline-flex;
padding: 0.4rem;
background: none;
border: 1px solid var(--c-bronze);
border-radius: 50%;
color: var(--c-gold);
}
.slider__btn:hover { border-color: var(--c-gold); }
.slider__prev .icon { transform: rotate(90deg); }
.slider__next .icon { transform: rotate(-90deg); }
.slider__pause .icon--play { display: none; }
.slider.is-paused .slider__pause .icon--pause { display: none; }
.slider.is-paused .slider__pause .icon--play { display: block; }
.slider__dots { display: flex; gap: 0.25rem; }
/* Area cliccabile 24px, pallino visibile 12px */
.slider__dot {
position: relative;
width: 24px;
height: 24px;
padding: 0;
background: none;
border: 0;
}
.slider__dot::before {
content: '';
position: absolute;
inset: 6px;
border: 1px solid var(--c-gold);
border-radius: 50%;
}
.slider__dot[aria-current="true"]::before { background: var(--c-gold); }
/* --- Percorso (breadcrumb) ----------------------------------------------- */
.breadcrumb {
padding-top: 1rem;
margin-bottom: 1.5rem;
font-family: var(--f-ui);
font-size: 0.95rem;
color: var(--c-text-soft);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: '\203A'; margin-right: 0.5rem; color: var(--c-bronze); }
.breadcrumb [aria-current] { color: var(--c-text); }
/* Su telefono: solo il livello superiore, come "indietro" */
@media (max-width: 640px) {
.breadcrumb li { display: none; }
.breadcrumb li:nth-last-child(2) { display: inline-flex; }
.breadcrumb li:nth-last-child(2)::before { content: '\2039'; margin-right: 0.4rem; color: var(--c-gold); }
}
/* --- Contenuti ----------------------------------------------------------- */
.site-main { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.site-main > .wrap--content:first-child { padding-top: clamp(1rem, 3vw, 2rem); }
.entry__header { margin-bottom: 1.5rem; text-align: center; }
.entry__title {
margin: 0;
font-family: var(--f-title);
font-weight: 400;
font-size: clamp(1.8rem, 1.2rem + 2.5vw, 2.8rem);
line-height: 1.15;
color: var(--c-gold);
}
.entry__content::after { content: ''; display: table; clear: both; }
.entry__content p { margin: 0 0 1em; }
.entry__content h2,
.entry__content h3,
.entry__content h4 {
font-family: var(--f-ui);
line-height: 1.25;
margin: 1.8em 0 0.6em;
}
.entry__content h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); font-weight: 700; color: var(--c-heading); }
.entry__content h3 { font-size: 1.25rem; font-weight: 700; color: var(--c-gold); }
.entry__content h4 { font-size: 1.1rem; font-weight: 700; color: var(--c-heading); }
.entry__content ul,
.entry__content ol { padding-left: 1.4em; }
.entry__content li { margin-bottom: 0.3em; }
.entry__content hr {
height: 1px;
margin: 2rem 0;
border: 0;
background: linear-gradient(to right, transparent, var(--c-line), transparent);
}
/* Separatore decorativo:
*/
.entry__content hr.ornament {
height: 33px;
margin: 2rem auto;
background: url(../img/ornament.gif) center / auto 100% no-repeat;
}
@media (min-width: 700px) {
.entry__content p,
.entry__content li { text-align: justify; hyphens: auto; }
}
/* Tabelle: se sono troppo larghe scorrono dentro il loro riquadro */
.entry__content table {
display: block;
width: fit-content;
max-width: 100%;
overflow-x: auto;
margin: 1.5em auto;
border-collapse: collapse;
}
.entry__content th,
.entry__content td { padding: 0.3em 0.6em; vertical-align: top; }
/* Allineamenti e immagini di WordPress */
.alignleft { float: left; margin: 0.3em 1.5em 1em 0; }
.alignright { float: right; margin: 0.3em 0 1em 1.5em; }
.aligncenter { display: block; margin: 1em auto; }
@media (max-width: 560px) {
.alignleft,
.alignright { float: none; display: block; margin: 1em auto; }
}
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--c-text-soft); text-align: center; }
/* Galleria di WordPress (la versione completa arriva nella fase 3) */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.75rem;
margin: 1.5em 0;
}
.gallery-columns-2,
.gallery-columns-3,
.gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) {
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
}
.gallery-item { margin: 0; }
/* Passe-partout nero con filo bronzo: l'immagine non tocca il bordo */
.gallery-icon img {
display: block;
width: 100%;
height: auto;
padding: 10px;
background: #000;
border: 1px solid var(--c-bronze);
transition: border-color 0.2s;
}
.gallery-icon a:hover img,
.gallery-icon a:focus-visible img { border-color: var(--c-gold); }
.entry__content .gallery-caption { margin: 0.4rem 0 0; font-size: 0.85rem; line-height: 1.35; color: var(--c-text-soft); text-align: center; }
.entry__content .gallery-caption strong { display: block; font-family: var(--f-ui); font-size: 1rem; color: var(--c-text); }
/* Immagini che hanno gia' la loro cornice (popoli): niente passe-partout, solo un filo al passaggio del mouse.
Righe incomplete centrate (gruppi di 1, 3, 5 immagini). */
.gallery--plain { display: flex; flex-wrap: wrap; justify-content: center; }
.gallery--plain .gallery-item { flex: 0 0 calc((100% - 0.75rem) / 2); }
@media (min-width: 700px) {
.gallery--plain.gallery-columns-3 .gallery-item { flex-basis: calc((100% - 1.5rem) / 3); }
.gallery--plain.gallery-columns-4 .gallery-item { flex-basis: calc((100% - 2.25rem) / 4); }
}
/* Una sola immagine per sezione (stirpi degli elfi): a tutta larghezza su telefono, meta' testo da tablet */
.gallery--plain.gallery--single .gallery-item { flex-basis: 100%; }
@media (min-width: 700px) {
.gallery--plain.gallery--single .gallery-item { flex-basis: 50%; }
}
.gallery--plain .gallery-icon img { padding: 0; background: none; border: 0; outline: 1px solid transparent; outline-offset: 3px; transition: outline-color 0.2s; }
.gallery--plain .gallery-icon a:hover img,
.gallery--plain .gallery-icon a:focus-visible img { outline-color: var(--c-gold); }
/* Elenchi e risultati */
.summary { padding-block: 1rem; border-bottom: 1px solid var(--c-line-soft); }
.summary__title { margin: 0 0 0.3rem; font-family: var(--f-ui); font-size: 1.3rem; }
.summary__excerpt { color: var(--c-text-soft); }
.nav-links { display: flex; justify-content: center; gap: 0.75rem; margin-top: 2rem; font-family: var(--f-ui); }
/* --- Schede (pagine di sezione e articoli correlati) --------------------- */
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 1.25rem;
margin: 2rem 0 0;
padding: 0;
list-style: none;
}
.card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background: #120d08;
border: 1px solid rgba(151, 112, 57, 0.6);
border-radius: 4px;
transition: border-color 0.2s, transform 0.2s;
}
.card:hover,
.card:focus-within { border-color: var(--c-gold); transform: translateY(-2px); }
.card__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
background: #1a130b;
}
.card__img--placeholder {
background:
url(../img/celtic-square.png) center / 44px repeat,
#1a130b;
opacity: 0.35;
}
.card__body { padding: 0.75rem 1rem 1rem; }
.card__title { margin: 0; font-family: var(--f-ui); font-size: 1.1rem; line-height: 1.25; }
.card__title a { color: var(--c-heading); text-decoration: none; }
.card__title a::after { content: ''; position: absolute; inset: 0; } /* tutta la scheda e' cliccabile */
.card:hover .card__title a { color: var(--c-gold); }
.card__excerpt { margin: 0.4rem 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--c-text-soft); }
/* Righe delle pagine di sezione: miniatura quadrata a sinistra, titolo e descrizione a destra */
.cards--section { grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px) {
.cards--section { grid-template-columns: repeat(2, 1fr); }
}
.card--row { flex-direction: row; align-items: flex-start; }
.card--row .card__img {
flex: none;
width: clamp(84px, 22vw, 120px);
border-right: 1px solid rgba(151, 112, 57, 0.6);
}
.card--row .card__body { padding: 0.7rem 1rem 0.8rem; }
.related {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--c-line-soft);
}
.related__title { margin: 0; font-family: var(--f-ui); font-size: 1.3rem; color: var(--c-gold); }
.cards--related { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-top: 1rem; }
.cards--related .card__title { font-size: 1rem; }
/* --- Galleria a schermo intero ------------------------------------------- */
.lightbox {
width: 100vw;
height: 100vh;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: rgba(5, 4, 3, 0.96);
color: var(--c-text);
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.8); }
.lightbox__figure {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
padding: 3.5rem 3.5rem 1.5rem;
}
.lightbox__img {
max-width: 100%;
max-height: calc(100% - 3rem);
object-fit: contain;
border: 1px solid var(--c-bronze);
}
.lightbox__caption { margin-top: 0.75rem; font-family: var(--f-ui); text-align: center; color: var(--c-heading); }
.lightbox__count { color: var(--c-text-soft); font-size: 0.9rem; }
.lightbox__btn {
position: absolute;
display: inline-flex;
padding: 0.6rem;
background: rgba(0, 0, 0, 0.6);
border: 1px solid var(--c-bronze);
border-radius: 50%;
color: var(--c-gold);
}
.lightbox__btn:hover { border-color: var(--c-gold); }
.lightbox__btn[hidden] { display: none; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 0.75rem; top: 50%; transform: translateY(-50%) rotate(90deg); }
.lightbox__next { right: 0.75rem; top: 50%; transform: translateY(-50%) rotate(-90deg); }
@media (max-width: 640px) {
.lightbox__figure { padding: 3.5rem 0.5rem 1rem; }
.lightbox__prev,
.lightbox__next { top: auto; bottom: 1rem; }
}
.entry__content a[data-lightbox] { cursor: zoom-in; }
/* --- Lente d'ingrandimento ----------------------------------------------- */
.entry__content[data-lens] img {
cursor: crosshair;
-webkit-touch-callout: none;
user-select: none;
}
.lens {
position: absolute;
z-index: 50;
display: none;
border: 8px solid var(--c-gold);
border-radius: 50%;
background-color: #fff;
background-repeat: no-repeat;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.7);
pointer-events: none;
}
.lens.is-visible { display: block; }
/* --- Compatibilita' con le classi usate nei contenuti -------------------- */
.celtic_line {
height: 40px;
margin: 1.5rem 0;
background: url(../img/celtic-square.png) center / auto 100% repeat-x;
}
.books { text-align: center; }
img.book { display: inline-block; width: auto; max-height: 180px; margin: 4px; }
.flexwrapper { display: flex; flex-wrap: wrap; gap: 1rem; }
.r_wrapper { overflow-x: auto; }
.entry__content table.center { margin-inline: auto; }
img.centered { display: block; margin-inline: auto; }
.elvish { font-family: var(--f-title); }
.gold { color: var(--c-gold); }
.entry__content p.right { text-align: right; }
.entry__content p.compact { line-height: 1.2; }
.entry__content p.cover { margin: 10px 30px; font-size: 0.95rem; }
.comingsoon { font-family: var(--f-title); font-size: 3em; text-align: center; color: var(--c-gold); }
/* Glossari */
.entry__content td.term { white-space: nowrap; color: var(--c-gold); font-size: 0.9rem; line-height: 1.3; }
.entry__content td.desc { font-size: 0.9rem; line-height: 1.3; }
/* Avviso di anticipazioni in testa agli elenchi dei personaggi */
.entry__content .spoiler-notice { margin: 0 0 1.5rem; padding: 0.75rem 1rem; border: 1px solid var(--c-bronze); border-left-width: 4px; background: rgba(0, 0, 0, 0.35); font-size: 0.95rem; }
.entry__content .spoiler-notice strong { color: var(--c-gold); }
/* Tabelle bordate */
.entry__content table.boxed { border: 1px solid var(--c-gold); }
.entry__content table.boxed th { color: var(--c-gold); font-weight: 400; }
.entry__content table.boxed td,
.entry__content table.boxed th { padding: 0.3em 0.7em; vertical-align: middle; }
.entry__content table.boxed .mid { text-align: center; border-inline: 1px dotted var(--c-gold); }
.entry__content table.boxed tr.sep > * { border-bottom: 1px solid var(--c-gold); }
.entry__content table.boxed tr.dot > * { border-bottom: 1px dotted var(--c-gold); }
/* Citazioni */
.entry__content blockquote {
margin: 2em 0;
padding-left: 1.25em;
border-left: 2px solid var(--c-bronze);
font-style: italic;
color: #e3d8bf;
}
.entry__content blockquote.cover,
.entry__content blockquote.review {
position: relative;
padding: 0 2.75rem;
border: 0;
}
.entry__content blockquote.cover { font-family: var(--f-mono); line-height: 1.4; }
.entry__content blockquote.cover::before,
.entry__content blockquote.review::before,
.entry__content blockquote.cover::after,
.entry__content blockquote.review::after {
position: absolute;
font: 4.5em/1 Georgia, 'Times New Roman', serif;
font-style: normal;
color: #cfcfcf;
}
.entry__content blockquote.cover::before,
.entry__content blockquote.review::before { content: '\201C'; left: 0; top: -0.1em; }
.entry__content blockquote.cover::after,
.entry__content blockquote.review::after { content: '\201D'; right: 0; bottom: -0.55em; }
/* Ritratti dei personaggi: a destra del testo su desktop, centrati su telefono.
![]()
*/
.entry__content .portrait-link {
float: right;
width: clamp(200px, 36%, 280px);
margin: 0.3em 0 1em 1.5em;
cursor: zoom-in;
}
.entry__content .portrait {
display: block;
width: 100%;
height: auto;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}
@media (max-width: 560px) {
.entry__content .portrait-link {
float: none;
display: block;
width: min(100%, 320px);
margin: 0 auto 1em;
}
}
/* Ogni sezione, e gli elenchi di link (Display Posts), ripartono sotto un'eventuale immagine flottante */
.entry__content h2,
.entry__content .goto,
.entry__content .text,
.entry__content .display-posts-listing { clear: both; }
/* Fisarmonica: Titolo
...
