/* ilMioAcquario — scheda specie: testata, foto, parametri, scheda rapida, articoli che citano Modulo CSS caricato condizionalmente da baseof.html (vedi commento nel ). Generato dallo split di main.css per minimizzare le risorse per pagina. */ /* ---------- Scheda specie ---------- */ .pagina-scheda { padding-top: 28px; } .scheda-testata { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; margin-bottom: 28px; } .scheda-testata h1 { font-size: clamp(34px, 4vw, 48px); margin: 6px 0 0; } .scheda-testata__descr { color: var(--ink-soft); } .foto-principale { margin: 0; } .foto-principale__media { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16/10; background: var(--verde-chiaro); } .foto-principale img { width: 100%; height: 100%; object-fit: cover; display: block; } .foto-principale.foto-placeholder { border-radius: 12px; overflow: hidden; aspect-ratio: 16/10; background: var(--verde-chiaro); } .foto-principale figcaption { font-size: 11px; color: var(--ink-soft); padding: 6px 2px 0; line-height: 1.35; word-break: break-word; } .foto-principale figcaption a { color: inherit; text-decoration: underline; } .foto-principale figcaption a:hover { color: var(--verde, #2e7d32); } .foto-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; } .foto-thumbs img { border-radius: 8px; aspect-ratio: 16/9; object-fit: cover; } .foto-thumbs .foto-thumb { cursor: pointer; transition: opacity .15s ease, transform .15s ease; } .foto-thumbs .foto-thumb:hover { opacity: .82; transform: scale(1.02); } .foto-thumbs .foto-thumb:focus-visible { outline: 2px solid var(--verde, #2e7d32); outline-offset: 2px; } .parametri { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); margin-bottom: 24px; } .parametri__titolo { font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 800; margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--bordo); } .parametri__griglia { display: grid; grid-template-columns: repeat(4, 1fr); } .parametri__griglia > div { padding: 14px 20px; border-top: 1px solid var(--bordo); } .parametri__griglia > div:nth-child(-n+4) { border-top: 0; } .parametri__griglia span { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } .parametri__griglia b { font-size: 17px; } .nota-difficolta { background: var(--verde-chiaro); border-radius: 10px; padding: 14px 18px; margin-bottom: 24px; font-size: 15px; } .scheda-rapida dl { margin: 0; } .scheda-rapida dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--bordo); } .scheda-rapida dl > div:last-child { border-bottom: 0; } .scheda-rapida dt { color: var(--ink-soft); font-size: 14px; } .scheda-rapida dd { margin: 0; font-weight: 700; font-size: 14px; text-align: right; } .scheda-rapida dd a:hover { text-decoration: underline; } /* ---------- Articoli che citano la specie (schede — design 1a) ---------- */ .articoli-citano { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--bordo); } .articoli-citano__testata { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; } .articoli-citano__testata h2 { margin: 0; font-family: 'Lora', serif; font-weight: 500; font-size: 26px; color: var(--ink); } .articoli-citano__conta { font-size: 12.5px; font-weight: 800; color: oklch(0.45 0.1 195); } .articoli-citano__griglia { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; } .articolo-riga { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--bordo); } .articolo-riga:hover { background: oklch(0.965 0.01 195); } .articolo-riga__foto { width: 96px; height: 68px; border-radius: 8px; object-fit: cover; } .articolo-riga__foto--placeholder { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, oklch(0.9 0.02 200), oklch(0.9 0.02 200) 8px, oklch(0.86 0.02 205) 8px, oklch(0.86 0.02 205) 16px); } .articolo-riga__foto--placeholder span { font-family: ui-monospace, monospace; font-size: 8.5px; color: oklch(0.55 0.02 220); padding: 0 5px; text-align: center; } .articolo-riga__testo { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .articolo-riga__meta { display: flex; align-items: center; gap: 8px; } .badge-tipo { padding: 2px 9px; border-radius: 99px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .badge-tipo--guide { background: oklch(0.94 0.03 170); color: oklch(0.4 0.08 170); } .badge-tipo--blog { background: oklch(0.93 0.03 240); color: oklch(0.42 0.08 245); } .articolo-riga__min { font-size: 11px; font-weight: 700; color: oklch(0.55 0.02 220); } .articolo-riga b { font-weight: 800; font-size: 14px; line-height: 1.35; color: var(--ink); text-wrap: pretty; } @media (max-width: 860px) { .articoli-citano__griglia { grid-template-columns: 1fr; } }