/* ilMioAcquario — guide LIST: menu Temi, guida in evidenza, card guida, gruppi per tema Modulo CSS caricato condizionalmente da baseof.html (vedi commento nel ). Generato dallo split di main.css per minimizzare le risorse per pagina. */ /* ---------- Layout Guide (rail sinistra con Temi) ---------- */ /* ---------- Tab tipo di acqua (Tutte / Acqua dolce / Acqua marina) ---------- Stesse regole usate nel blog (blog.css). Duplicate qui perché la sezione Guide non carica blog.css e le tab restavano senza stile. */ .tabs-mondo { display: flex; gap: 34px; border-bottom: 1px solid var(--bordo); margin-bottom: 30px; overflow-x: auto; } .tab-mondo { display: flex; align-items: center; gap: 8px; padding: 2px 2px 12px; margin-bottom: -1px; background: none; border: 0; border-bottom: 3px solid transparent; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink-soft); cursor: pointer; white-space: nowrap; } .tab-mondo:hover { color: var(--ink); } .tab-mondo.is-active { color: var(--ink); border-bottom-color: var(--ink); } .tab-mondo__n { font-size: 11.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: oklch(0.93 0.008 220); color: var(--ink-soft); } .tab-mondo.is-active .tab-mondo__n { background: var(--header); color: #fff; } .barra-mondo { background: var(--bianco); border-bottom: 1px solid var(--bordo); } .barra-mondo .tabs-mondo { max-width: var(--max); margin: 0 auto; padding: 16px 36px 0; border-bottom: 0; } /* ---------- Menu Temi (stesso stile del menu albero famiglie) ---------- */ .temi { background: transparent; border: 0; box-shadow: none; padding: 0; } .temi__eyebrow { display: block; color: var(--verde-testo); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 12px 10px; } .temi__voce { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--ink-soft); } .temi__voce:hover { background: var(--verde-chiaro); color: var(--verde-testo); } .temi__voce.is-active { background: var(--verde-chiaro); color: var(--verde-testo); font-weight: 700; } .temi__voce--tutte { font-weight: 700; padding: 9px 12px; margin-bottom: 2px; color: inherit; } .temi__n { font-size: 13px; font-weight: 600; color: var(--ink-soft); } .temi__voce.is-active .temi__n { color: var(--verde-testo); } /* ---------- Guida in evidenza ---------- */ .layout--guide .section__count { font-size: 14px; color: var(--ink-soft); font-weight: 600; } .guida-hero { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); overflow: hidden; margin-bottom: 30px; } .guida-hero__foto { display: flex; align-items: center; justify-content: center; background: var(--verde-testo); min-height: 260px; } .guida-hero__foto img { width: 100%; height: 100%; object-fit: cover; } .guida-hero__body { padding: 26px 28px; } .guida-hero__top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .guida-hero__body h2 { font-family: 'Lora', serif; font-size: 27px; line-height: 1.2; margin: 0 0 12px; } .guida-hero__body > p { color: var(--ink-soft); font-size: 16px; margin: 0 0 18px; } .guida-hero__meta { display: flex; gap: 34px; margin-bottom: 18px; } .guida-hero__meta div { display: flex; flex-direction: column; } .guida-hero__meta b { font-size: 16px; font-weight: 800; } .guida-hero__meta span { font-size: 13px; color: var(--ink-soft); } /* ---------- Card guida (griglia) ---------- */ .card-guida { display: flex; flex-direction: column; background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); overflow: hidden; transition: box-shadow 0.15s; } .card-guida:hover { box-shadow: 0 6px 18px rgb(10 40 50 / 0.12); } .card-guida__foto { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: var(--verde-chiaro); } .card-guida__foto img { width: 100%; height: 100%; object-fit: cover; } .card-guida__foto .badge { position: absolute; top: 12px; left: 12px; } .card-guida__foto::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 2; } .card-guida--acqua-dolce .card-guida__foto::before { background: oklch(0.5 0.09 165); } .card-guida--acqua-marina .card-guida__foto::before { background: oklch(0.5 0.11 248); } .card-guida__body { padding: 16px 18px 20px; } .card-guida__body h3 { margin: 6px 0 8px; font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 800; line-height: 1.25; } .card-guida__body p { margin: 0; color: var(--ink-soft); font-size: 15px; } @media (max-width: 720px) { .guida-hero { grid-template-columns: 1fr; } .guida-hero__foto { min-height: 180px; } } /* ---------- Guide raggruppate per tema ---------- */ .tema-gruppo { scroll-margin-top: 84px; margin-bottom: 30px; } .tema-titolo { font-size: 15px; font-weight: 800; letter-spacing: 0.02em; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--verde-chiaro); font-family: 'Manrope', sans-serif; display: flex; align-items: baseline; gap: 10px; } .tema-titolo .eyebrow { font-size: 11px; } @media (max-width: 960px) { .layout--guida { grid-template-columns: 1fr; } .rail--sinistra { position: static; } }