/* * critical.css — above-the-fold, inline in via AssetManager::inject_critical_css (wp_head priority 1). * Contiene solo lo stretto necessario per il paint dei moduli home sopra la piega * (feature-articles / hero): card system + scrim + eyebrow + cta-read. * Le classi component sono gia' in input.css (tailwind.css); qui le replichiamo * inline per evitare FOUC prima del caricamento del foglio principale. */ :root { --purpleColor: #353366; --blueColor: #33a4dc; --canvas: #F4F5F7; --hairline: #E2E4E8; --ink: #15102B; --inkElevated: #1E1C3A; } .card { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: #fff; border: 1px solid var(--hairline); box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card--dark { background: var(--inkElevated); border-color: rgba(255,255,255,.08); box-shadow: none; color: #fff; } .card__media { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; } .card__media img { width: 100%; height: 100%; object-fit: cover; } .media-scrim { position: relative; } .media-scrim::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(15,14,32,.88) 0%, rgba(15,14,32,.45) 42%, rgba(15,14,32,0) 100%); z-index: 1; } .media-scrim__caption { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 1.25rem 1.5rem; } .eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blueColor); } .cta-read { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; font-weight: 600; font-size: .875rem; letter-spacing: .01em; color: var(--blueColor); }