CSS Sito Cronaca nera.CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;      /* sfondo bianco */
  color: #111111;                 /* testo quasi nero */
  font-family: "Inter", Arial, Helvetica, sans-serif;
  line-height: 1.6;

 /* sfondo bianco centrale + colonne laterali con pagine di giornale */
  background-color: #ffffff;
  background-image: url("Giornale1.jpg"), url("Giornale1.jpg");
  background-repeat: repeat-y, repeat-y;          /* si ripetono in verticale */
  background-position: left top, right top;       /* una a sinistra, una a destra */
  background-size: 180px auto, 180px auto;       /* larghezza delle colonne */
}

.wrapper {
  width: 70%;
  max-width: 60em;
  margin: 0 auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ====== TITOLI CON FONT ELEGANTE ====== */

.site-title,
.case-title {
  font-family: "Playfair Display", "Times New Roman", serif;
}

/* ====== HEADER: BANDA BORDEAUX IN CIMA ====== */

header {
  text-align: center;
  padding-top: 1.5em;     /* più spazio sopra */
  padding-bottom: 0.8em;  /* più spazio sotto */
  background-color: #910125;   /* bordeaux/rosso scuro */
  border-bottom: 1px solid #4b0011;
}

.site-title {
  font-size: 2em;      /* titolo grande */
  margin: 0;
  color: #ffffff;         /* bianco */
}

.site-subtitle {
  font-size: 1.1em;      /* sottotitolo, non troppo piccolo */
  margin-top: 0.3em;
  margin-bottom: 0.4em;
  color: #ffffff;
}

/* ===== BARRA DI NAVIGAZIONE ===== */

.main-nav {
  margin-top: 0.6em;
  margin-bottom: 1.2em;
  background-color: #910125;         /* bordeaux come la barra superiore */
  padding: 0.4em 0;
  border-radius: 0.4em;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 1.4em;
}

.main-nav a {
  font-family: "Inter", sans-serif;
  color: #ffffff;                    /* testo bianco */
  text-decoration: none;
  font-size: 0.98em;
  font-weight: 500;
  transition: #e09898;
}

.main-nav a:hover {
  color: #ffd7e2;                    /* rosa chiaro al passaggio */
}


/* ====== TESTO INTRODUTTIVO DEL SITO ====== */

.intro-text {
  max-width: 50em;          /* intro più stretta, non invade le colonne */
  margin: 3em auto 2em auto;
}

.intro-text p {
  text-align: justify;     /* giustificato */
  font-size: 0.98em;       
  color: #333333;
}

/* ====== "SCEGLI IL CASO" COME BOTTONE OVALE ====== */

.case-list {
  text-align: center;
}

.choose-title {
  display: inline-block;
  padding: 0.5em 1.8em;
  margin-bottom: 0.3125em;
  background-color: #910125;   /* stesso rosso della barra */
  color: #ffffff;              /* testo bianco */
  border-radius: 999px;        /* forma ovale */
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ====== SEZIONI DEI CASI (UNO SOTTO L'ALTRO) ====== */

.case-section {
  margin-bottom: 2.5em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid #dddddd;
}

/* titolo del caso sopra la foto */
.case-title {
  font-size: 1.6rem;
  color: #910125;
  margin-bottom: 0.6em;
  text-align: left;
}

/* contenuto del caso: foto + testo accanto */
.case-content {
  display: flex;
  flex-direction: row;   /* una colonna (mobile) */
  gap: 1.2em;
  align-items: flex-start;
}

/* IMMAGINI NELLA HOME (card dei tre casi) */
.case-image {
  width: 1100px;       /* larghezza massima della foto */
  height: 260px
}

/* immagine del caso */
.case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* fa sì che l'immagine riempia perfettamente */
  display: block;
  border: 2px solid #910125;
  /* effetto base: un po' desaturata */
  filter: grayscale(80%) contrast(105%);
  transition: filter 0.2s ease;
}

/* quando passo sulla sezione, la foto si "accende" */
.case-section:hover img {
  filter: grayscale(0%) contrast(110%) saturate(110%);
}

/* testo accanto alla foto */
.case-text p {
  font-size: 0.95em;
  color: #666666;      /* grigio più chiaro di nero */
  text-align: justify;
  transition: color 0.2s ease, font-size 0.2s ease;
}

/* quando passo sulla sezione, il testo diventa più scuro e leggermente più grande */
.case-section:hover .case-text p {
  color: #111111;      /* quasi nero */
}


/* ====== LINK ====== */

a {
  color: #910125;
  text-decoration: none;
}

/* link in footer o testi normali: sottolineo solo al passaggio, NON sulle card */
footer a:hover {
  text-decoration: underline;
}

/* niente sottolineatura sulle sezioni dei casi; ci pensa l'effetto di ingrandimento */
.case-section a:hover {
  text-decoration: none;
}


/* ------ FOOTER CON LICENZA ------ */

.footer-license {
  text-align: center;
  font-size: 0.85em;        /* testo più piccolo */
  color: #444;
  padding: 1.25em 0.625em;
  margin-top: 3.125em;
  line-height: 1.5;
}

.footer-license strong {
  color: #910125;
}

/* immagine licenza più piccola e centrata */
.cc-badge img {
  width: 110px;              /* ridotta */
  margin: 0.75em auto 0.3125em auto;
  display: block;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.cc-badge img:hover {
  opacity: 1;
}

/* nome licenza */
.license-name {
  font-size: 0.8em;
  margin-top: 0.375em;
  color: #910125;
}

/* email */
.footer-email {
  margin-top: 0.625em;
  font-size: 0.8em;
  color: #555;
}

/* ====== BLOCCHI PAGINA ALDROVANDI E SCAZZI: TESTO A SINISTRA, FOTO A DESTRA ====== */

/* blocco intero: titolo + testo + foto */
.case-block {
  margin-top: 1.875em;
  margin-bottom: 2.5em;
  padding-bottom: 1.5625em;
  border-bottom: 1px solid #dddddd;
  text-align: left;
}

/* titolo del blocco (La notte dei fatti, ecc.) */
.block-title {
  font-family: "Playfair Display", serif;
  font-size: 1.6em;
  color: #910125;
  margin-top: 0;
  margin-bottom: 0.75em;
}

/* testo del blocco */
.block-text {
  font-size: 1rem;
  color: #555555;
  line-height: 1.65;
  text-align: justify;
}

/* FOTO CON DIDASCALIA – struttura base */

.photo-box {
  position: relative;
  width: 100%;
  margin-top: 0.625em;
  margin-bottom: 1.5625em;
  display: inline-block;
}

.photo-box img {
  width: 100%;
  border: 2px solid #910125;
  display: block;
  filter: grayscale(80%) contrast(105%);
  transition: filter 0.3s ease;
}

/* effetto "foto che si accende" */
.photo-box:hover img {
  filter: grayscale(0%) contrast(110%) saturate(115%);
}

/* didascalia nascosta di default */
.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;            /* larga quanto immagine */
  padding: 0.625em 0.75em;
  background-color: #910125;      /* barra bordeaux */
  color: #fff;
  font-size: 0.95em;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* didascalia visibile in hover */
.photo-box:hover .caption {
  opacity: 1;
}

/* RIGA DI DUE FOTO AFFIANCATE */

.photo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: 1.5625em auto;        /* spazio sopra/sotto + centrato */
  max-width: 56.25em;         /* larghezza massima della riga di foto */
  justify-content: center;  /* le foto stanno al centro */
}

/* ogni foto occupa metà riga (meno il gap) */
.photo-row .photo-box {
  position: relative;
  flex: 1 1 45%;          /* circa metà riga a testa */
  max-width: 45%;           /* permette di stringersi in modo uguale */
  overflow: hidden;
}
        

/* ----- RIGA DI 4 PERSONAGGI AFFIANCATI ----- */

.character-row {
  display: flex;
  justify-content: center;
  align-items: start;
  gap: 0.9375em;
  margin: 1.5625em auto;
  max-width: 62.5em;
}

.character-box {
  position: relative;
  flex: 0 0 22%;        /* quattro colonne */
  max-width: 22%;
  overflow: hidden;
  border: 2px solid #910125;
}

/* immagini */
.character-box img {
  width: 100%;
  display: block;
  filter: grayscale(80%) contrast(105%);
  transition: filter 0.3s ease;
}

/* hover effetto illuminato */
.character-box:hover img {
  filter: grayscale(0%) contrast(115%) saturate(115%);
}

/* didascalia */
.character-box .caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.4em 0.7em;
  background-color: #910125;
  color: #fff;
  font-size: 0.85em;
  box-sizing: border-box;    /* il padding rientra nella larghezza */
  word-wrap: break-word;     /* se ci sono parole lunghe, va a capo */
  opacity: 0;
  transition: opacity 0.25s ease;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* didascalia visibile a passaggio */
.character-box:hover .caption {
  opacity: 1;
}


/* ----- LINK DELLE FONTI ----- */

.sources-list a {
  color: #000000;               /* nero */
  text-decoration: none;        /* niente sottolineatura */
  transition: 0.2s ease;        /* transizione delicata */
}

.sources-list a:hover,
.sources-list a:focus,
.sources-list a:active {
  color: #910125;               /* rosso bordeaux come la barra */
  text-decoration: underline;   /* sottolineato solo al passaggio */
  text-underline-offset: 0.1875em;   /* sottolineatura più elegante */
}