/* gl_tema.css — passata grafica al blog, 05/10/2026.
 *
 * Non tocca il foglio di stile originale: sta dopo e corregge. Se qualcosa non
 * piace, si toglie la riga che lo carica in head.inc.html e torna tutto com'era.
 *
 * Le cose che non andavano, nell'ordine in cui le vede chi arriva:
 *   - il marchio in testa alto 80 pixel su uno schermo da 812: un decimo della
 *     pagina speso prima di cominciare;
 *   - la striscia dei produttori tagliata di netto sul bordo destro, senza
 *     niente che dicesse "si scorre", e le etichette su una, due o tre righe
 *     che facevano ballare le altezze;
 *   - gli articoli uno sotto l'altro senza respiro: foto, riga dei dati, titolo,
 *     filetto, e daccapo, tutto con la stessa distanza;
 *   - il rettangolo rosso fisso: angoli vivi, bordo giallo, tre punti
 *     esclamativi e un ">>" in coda;
 *   - l'azzurro #13dbd4 della fascia autore, che con il rosso e il giallo del
 *     marchio non c'entra niente.
 *
 * Qui non si cambia il marchio: rosso, giallo e blu restano. Si cambia quanto
 * spazio si prendono e quanto spesso.
 */

:root{
  --gl-fg:        #16161a;
  --gl-attenuato: #6b6b73;
  --gl-tenue:     #9a9aa3;
  --gl-filo:      #e8e8e4;
  --gl-fondo:     #ffffff;
  --gl-rosso:     #da121a;
}

/* ---------- respiro generale ---------- */
body{ color: var(--gl-fg); -webkit-font-smoothing: antialiased; }
a{ text-underline-offset: 2px; }
::selection{ background: #ffe8a3; color: #111; }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--gl-rosso); outline-offset: 2px; }

/* ---------- il marchio in testa ---------- */
.logo img, a.logo img{ max-height: 46px !important; width: auto !important; }
@media (max-width: 767px){
  .logo img, a.logo img{ max-height: 38px !important; }
}

/* ---------- la striscia dei produttori ---------- */
.influencers{
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
  /* sfuma a destra: dice che c'e' altro senza mettere una freccia */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
}
.influencers::-webkit-scrollbar{ display: none; }
.influencers > *{ scroll-snap-align: start; }
.influencers img{ border-radius: 50%; }
/* le etichette: due righe al massimo, poi i puntini. Prima una stava su tre
   righe e spingeva giu' tutta la fila. */
.influencers a > div:last-child,
.influencers span,
.influencers p{
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  color: var(--gl-attenuato) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.5em;
}

/* ---------- gli articoli in elenco ---------- */
.post-card{
  padding: 0 0 22px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--gl-filo);
}
.post-card:last-of-type{ border-bottom: 0; }
.post-card img{
  border-radius: 10px;
  display: block;
  background: #f3f3f0;
}
/* la riga dei dati: piccola, maiuscoletto, grigia. Era la stessa misura del
   testo e si confondeva con il titolo. */
.post-card span,
.post-card .fa-eye{
  font-size: 11.5px !important;
  letter-spacing: .04em;
  color: var(--gl-tenue) !important;
  font-style: normal !important;
}
.post-card h4,
.post-card h4 a{
  font-size: 19px;
  line-height: 1.28;
  letter-spacing: -.015em;
  font-weight: 800;
  color: var(--gl-fg);
  text-decoration: none;
}
.post-card h4{ margin: 7px 0 0; }
.post-card h4 a:hover{ color: var(--gl-rosso); }
@media (min-width: 992px){
  .post-card h4, .post-card h4 a{ font-size: 21px; }
}

/* ---------- la pagina dell'articolo ---------- */
#post-title{
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -.022em;
  font-weight: 800;
  margin: 10px 0 12px;
}
@media (min-width: 992px){ #post-title{ font-size: 40px; } }
#post-summary{
  font-size: 17px;
  line-height: 1.6;
  color: var(--gl-attenuato);
  margin: 0 0 4px;
}
#post-time{ color: var(--gl-tenue); font-size: 12.5px; letter-spacing: .03em; }
#post-content p{ line-height: 1.65; }
#post-content a{ color: var(--gl-rosso); }
/* l'azzurro della fascia autore non c'entra col marchio: resta solo come filo */
#post-author-box{ border-bottom-color: var(--gl-filo) !important; }
#post-author-box h6{ background: #f3f3f0 !important; color: var(--gl-attenuato) !important; }

/* ---------- il riquadro rosso fisso ---------- */
#buynow{
  border-radius: 12px !important;
  border-left: 0 !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.18) !important;
  max-width: 300px !important;
  width: auto !important;
  padding: 13px 34px 13px 15px !important;
  line-height: 1.35 !important;
}
#buynow small{ font-size: 13.5px !important; }
@media (max-width: 767px){
  #buynow{ max-width: calc(100% - 30px) !important; font-size: 13px !important; }
}

/* ---------- il riquadro dell'iscrizione ---------- */
.cookie_container .cookie_notification{ border-radius: 14px; }
#formiscrivi input[type=email]{ font-size: 16px; }   /* sotto i 16px iOS ingrandisce da solo */

/* ---------- le miniature dellelenco ---------- __pycache__/ aste-prospect/ aste/ bancodelloro/ boe_subastas/ capibara-influencer/ depack/ disibeint_api/ disibeint_arxiu/ disibeint_cannibal/ disibeint_chat/ disibeint_empresa/ disibeint_fichas_db/ disibeint_redazione/ elblog/ epterapiadelamano/ glacom-blog-translate/ glacom-cantoni/ gsc/ immobiliare/ influencers/ kanji-blog/ ldd/ legal_digest/ locales/ ortopedia/ persona/ prospect/ rank_disibeint/ rank_glacomnews/ realestate/ relany/ seo_audit/ sexessive-material/ sexessive-shop/ sexessive/ ttg26/ vibe/

/* ---------- le miniature dell'elenco ---------- */
/* Le foto degli articoli arrivano dai siti delle fiere e sono spesso verticali
   (563x1000): in colonna diventavano rettangoli alti e stretti, ognuno di
   proporzione diversa. Quadrate e ritagliate stanno in riga fra loro. */
.post-card img{ object-fit: cover !important; object-position: center !important; }
.post-card:not(:first-of-type) img{
  width: 96px !important;
  height: 96px !important;
  border-radius: 10px;
}
@media (min-width: 992px){
  .post-card:not(:first-of-type) img{ width: 128px !important; height: 128px !important; }
}

/* ---------- il menu ---------- */
/* Era testo nero su niente: nessuno sfondo, nessun segno sotto il dito, le
   voci che andavano a capo dove capitava e l'ultima ("Impulsa el comerç de
   proximitat!") da sola sulla seconda riga, attaccata a sinistra.
   Ora: una fascia chiara che lo stacca dal marchio e dagli articoli, le voci
   in fila centrate e distanziate uguali, e il filo rosso che cresce sotto
   quella su cui passi. */
@media (min-width: 992px){
  .col-12.d-none.d-lg-block{
    background: #fbfbf9;
    border-top: 1px solid var(--gl-filo);
    border-bottom: 1px solid var(--gl-filo);
    padding-top: 2px;
    padding-bottom: 2px;
  }
  ul.navbar-nav{
    display: flex !important;
    /* bootstrap mette le voci in colonna: senza questa riga restano incolonnate */
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 4px;
    row-gap: 0;
    padding-left: 0;
    margin: 0 auto;
  }
  ul.navbar-nav > li.nav-item{ margin: 0; }
}

ul.navbar-nav > li.nav-item > a,
ul.navbar-nav > li.nav-item > a.nav-link{
  position: relative;
  display: inline-block;
  padding: 10px 10px !important;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none !important;
  transition: color .15s ease;
}
/* gl_menu_solo_desktop: il colore vale solo nella barra chiara. Nel cassetto
   del telefono lo sfondo e' rosso e le voci devono restare bianche. */
@media (min-width: 992px){
  ul.navbar-nav > li.nav-item > a,
  ul.navbar-nav > li.nav-item > a.nav-link{ color: var(--gl-attenuato) !important; }
}
ul.navbar-nav > li.nav-item > a::after{
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 4px;
  height: 2px;
  background: var(--gl-rosso);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}
ul.navbar-nav > li.nav-item > a:hover,
ul.navbar-nav > li.nav-item > a:focus-visible{
  color: var(--gl-fg) !important;
}
ul.navbar-nav > li.nav-item > a:hover::after,
ul.navbar-nav > li.nav-item > a:focus-visible::after{
  transform: scaleX(1);
}
/* la voce della pagina in cui si e' gia' */
ul.navbar-nav > li.nav-item.active > a,
ul.navbar-nav > li.nav-item > a[aria-current]{
  color: var(--gl-fg) !important;
}
ul.navbar-nav > li.nav-item.active > a::after{ transform: scaleX(1); }

/* il cassetto sul telefono: voci staccate, e il dito si vede dove preme */
@media (max-width: 991px){
  ul.navbar-nav > li.nav-item{ border-bottom: 1px solid rgba(255,255,255,.25); }
  ul.navbar-nav > li.nav-item:last-child{ border-bottom: 0; }
  ul.navbar-nav > li.nav-item > a{
    display: block;
    padding: 13px 4px !important;
    font-size: 15px;
  }
  ul.navbar-nav > li.nav-item > a:active{ background: rgba(255,255,255,.14); }
  ul.navbar-nav > li.nav-item > a::after{ display: none; }
}

/* il bottone del cassetto */
.navbar-toggler, button.navbar-toggler{
  border: 0 !important;
  padding: 8px 6px !important;
  border-radius: 8px;
  transition: background .15s ease;
}
.navbar-toggler:hover{ background: #f2f2ef; }