/* ilMioAcquario — blog LIST: tab mondo, pill categorie, articolo in evidenza, righe lista Modulo CSS caricato condizionalmente da baseof.html (vedi commento nel ). Generato dallo split di main.css per minimizzare le risorse per pagina. */ /* ---------- Blog: tab Tutti / Acqua dolce / Acqua marina ---------- */ .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; } /* Pill "mondo" con pallino (card in evidenza) */ .pill-mondo { display: inline-flex; align-items: center; gap: 7px; font-family: 'Manrope', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: oklch(0.96 0.01 220); color: var(--ink); } .pill-mondo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); } .pill-mondo--acqua-dolce { background: oklch(0.95 0.03 165); color: oklch(0.32 0.06 170); } .pill-mondo--acqua-dolce::before { background: oklch(0.55 0.11 165); } .pill-mondo--acqua-marina { background: oklch(0.95 0.025 240); color: oklch(0.32 0.06 245); } .pill-mondo--acqua-marina::before { background: oklch(0.55 0.15 245); } /* Etichetta "mondo" nelle righe della lista */ .mondo-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--verde-testo); } /* ---------- Blog: articolo in evidenza + lista (dal mockup allegato) ---------- */ .blog-hero { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); overflow: hidden; margin-bottom: 38px; } .blog-hero__foto { position: relative; display: block; aspect-ratio: 16/5; background: var(--grad-navy); overflow: hidden; } .blog-hero__foto img { width: 100%; height: 100%; object-fit: cover; } .blog-hero__pills { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; gap: 8px; } .blog-hero__body { padding: 22px 30px 26px; } .blog-hero__meta { margin: 0 0 4px; font-size: 13.5px; color: var(--ink-soft); } .blog-hero__meta b { color: var(--verde-testo); font-weight: 800; } .blog-hero__body h2 { margin: 0 0 10px; font-size: clamp(26px, 2.6vw, 32px); font-weight: 500; line-height: 1.28; max-width: 32ch; } .blog-hero__body h2 a:hover { text-decoration: underline; } .blog-hero__body > p { margin: 0 0 14px; color: var(--ink-soft); font-size: 16px; max-width: 82ch; } .pill-cat { display: inline-block; font-family: 'Manrope', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: var(--verde-chiaro); color: var(--verde-testo); } .pill-cat--news { background: oklch(0.93 0.045 245); color: oklch(0.45 0.11 250); } .pill-cat--opinioni { background: oklch(0.94 0.04 25); color: oklch(0.5 0.15 25); } .pill-cat--diari-di-vasca { background: oklch(0.93 0.05 305); color: oklch(0.44 0.13 305); } .pill-cat--recensioni { background: oklch(0.94 0.06 150); color: oklch(0.42 0.09 155); } .pill-cat--eventi { background: oklch(0.94 0.06 85); color: oklch(0.45 0.1 70); } .pill-cat--storia-e-cultura { background: oklch(0.93 0.03 200); color: oklch(0.42 0.07 220); } .icona-lettura { width: 13px; height: 13px; vertical-align: -2px; } .section__count { font-size: 14px; color: var(--ink-soft); font-weight: 600; } .lista-articoli { margin-top: 16px; } .riga-articolo { display: flex; gap: 24px; margin-bottom: 28px; } .riga-articolo + .riga-articolo { border-top: 1px solid var(--bordo); padding-top: 28px; } .riga-articolo__foto { position: relative; flex: 0 0 190px; height: 120px; border-radius: 10px; overflow: hidden; } .riga-articolo__foto::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 2; } .riga-articolo--acqua-dolce .riga-articolo__foto::before { background: oklch(0.5 0.09 165); } .riga-articolo--acqua-marina .riga-articolo__foto::before { background: oklch(0.5 0.11 248); } .riga-articolo__foto img { width: 100%; height: 100%; object-fit: cover; } .riga-articolo__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; font-size: 13px; color: var(--ink-soft); } .riga-articolo h3 { margin: 0 0 6px; font-family: 'Manrope', sans-serif; font-size: 19px; font-weight: 800; line-height: 1.3; } .riga-articolo:hover h3 { color: var(--verde-testo); } .riga-articolo__body > p:last-child { margin: 0; color: var(--ink-soft); font-size: 15px; max-width: 80ch; } .foto-placeholder--navy { background: repeating-linear-gradient(45deg, oklch(0.31 0.05 255), oklch(0.31 0.05 255) 16px, oklch(0.28 0.05 255) 16px, oklch(0.28 0.05 255) 32px); color: rgb(255 255 255 / 0.8); } @media (max-width: 720px) { .riga-articolo { flex-direction: column; gap: 12px; } .riga-articolo__foto { flex: none; width: 100%; height: auto; aspect-ratio: 16/8; } .blog-hero__body { padding: 18px 20px 22px; } }