/* ========================================================================== THE GENESYS - blog listing Pairs with page-blog.php in this theme, which replaced the parent's template - so this is ordinary CSS against markup the theme owns, inside .gns-scope. The earlier version of this file restyled the PARENT's markup from outside and had to fight its white panel, pastel band and gradient-text heading with !important; none of that is needed now. ⚠️ SCOPE: the LISTING only. A single post is an Elementor Theme Builder document (#2018 "Dettaglio blog") and goes through editorial.css. The canvas has no blog screen. The composition borrows what the other screens already established: the mono eyebrow, the measured intro, a card on the surface colour inside a hairline, the pill filter, the 10px mono section label the home page uses over its own blog strip. ========================================================================== */ /* * ⚠️ `main.gns-blog`, not `.gns-blog`. genesys_redesign_body_class() has put * `gns-blog` on since the listing was first restyled, and the template's * root carries the same name - so an unscoped `.gns-blog { padding-top }` * matched BOTH, and the page opened one header-height lower than About: 91px * of body padding stacked on 91px of main padding. Everything else in this * file is a `.gns-blog__*` element class and cannot collide. */ main.gns-blog { --blog-gutter: 48px; --blog-wide: 1180px; display: block; /* The fixed site header: see the same note in about.css. */ padding-top: var(--gns-header-h, var(--top-margin, 63px)); padding-bottom: 96px; background: var(--gns-bg); color: var(--gns-text); font-family: var(--gns-font); } /* -------------------------------------------------------------- head --- */ .gns-blog__head { max-width: var(--blog-wide); margin: 0 auto; padding: 56px var(--blog-gutter) 40px; border-bottom: 1px solid var(--gns-border-faint); } .gns-blog__eyebrow { margin: 0 0 14px; font: 500 10.5px var(--gns-font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gns-cyan-ink); } .gns-blog__title { margin: 0; font-size: clamp(34px, 4vw, 52px); font-weight: 500; line-height: 1.04; letter-spacing: -.04em; color: var(--gns-text); text-wrap: balance; } .gns-blog__intro { max-width: 680px; margin: 18px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--gns-secondary); text-wrap: pretty; } /* The category filter: pills, the active one filled. */ .gns-blog__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .gns-blog__filter { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 1px solid var(--gns-border-strong); border-radius: var(--gns-r-pill); font-size: 12.5px; color: var(--gns-secondary-2); text-decoration: none; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } .gns-blog__filter:hover { border-color: var(--gns-border-cyan); color: var(--gns-text); } .gns-blog__filter.is-active { border-color: transparent; background: var(--gns-text); color: var(--gns-bg); font-weight: 700; } .gns-blog__filter-count { font: 500 10px var(--gns-font-mono); letter-spacing: .08em; color: var(--gns-muted); } .gns-blog__filter.is-active .gns-blog__filter-count { color: inherit; opacity: .7; } /* -------------------------------------------------------------- lead --- */ .gns-blog__lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 44px; align-items: center; max-width: var(--blog-wide); margin: 48px auto 0; padding: 0 var(--blog-gutter); } .gns-blog__lead-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--gns-border); border-radius: var(--gns-r-hero); background: var(--gns-elevated); box-shadow: var(--gns-glow-card); } .gns-blog__lead-media img, .gns-post__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--gns-ease-slice); } .gns-blog__lead-media:hover img { transform: scale(1.02); } .gns-blog__lead-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .gns-blog__lead-title { margin: 0; font-size: clamp(26px, 2.8vw, 38px); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; } .gns-blog__lead-title a, .gns-post__title a { color: var(--gns-text); text-decoration: none; } .gns-blog__lead-title a:hover, .gns-post__title a:hover { text-decoration: underline; text-decoration-color: var(--gns-cyan); text-underline-offset: 4px; } .gns-blog__lead-teaser { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--gns-body); text-wrap: pretty; } .gns-blog__read { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--gns-text); text-decoration: none; } .gns-blog__read span { transition: transform .15s ease; } .gns-blog__read:hover { color: var(--gns-cyan-ink); } .gns-blog__read:hover span { transform: translateX(3px); } /* ---------------------------------------------------------- post bits --- */ /* Category: the 10px mono label with a gradient dot, as on the home strip. */ .gns-post__cat { display: inline-flex; align-items: center; gap: 8px; font: 500 10px var(--gns-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gns-secondary-2); text-decoration: none; } .gns-post__cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gns-gradient); } .gns-post__cat:hover { color: var(--gns-text); } .gns-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gns-secondary-2); } .gns-post__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gns-border); } .gns-post__author { color: var(--gns-body); } .gns-post__dot { color: var(--gns-muted); } /* A story with no picture yet still gets a surface, not a hole. */ .gns-post__placeholder { display: block; width: 100%; height: 100%; background: radial-gradient(closest-side at 50% 60%, var(--gns-cyan-tint-2), transparent), var(--gns-grid), var(--gns-elevated); } /* -------------------------------------------------------------- grid --- */ .gns-blog__more { max-width: var(--blog-wide); margin: 64px auto 0; padding: 0 var(--blog-gutter); } /* The same label the home page hangs over its blog strip. */ .gns-blog__section-title { margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--gns-border-faint); font: 500 10.5px var(--gns-font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gns-muted); } .gns-blog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; } .gns-post { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--gns-border); border-radius: var(--gns-r-card); background: var(--gns-surface); transition: border-color .15s ease, transform .15s ease; } .gns-post:hover { border-color: var(--gns-border-cyan); transform: translateY(-2px); } .gns-post:hover .gns-post__media img { transform: scale(1.03); } .gns-post__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gns-elevated); } .gns-post__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px 20px; } .gns-post__title { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; } .gns-post__teaser { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--gns-body); } .gns-post__body .gns-post__meta { margin-top: auto; padding-top: 8px; } /* --------------------------------------------------------- end states --- */ .gns-blog__soon { max-width: var(--blog-wide); margin: 40px auto 0; padding: 0 var(--blog-gutter); font: 500 10.5px var(--gns-font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gns-muted); } .gns-blog__empty { max-width: 720px; margin: 56px auto 0; padding: 48px var(--blog-gutter); border: 1px solid var(--gns-border); border-radius: var(--gns-r-panel); background: var(--gns-surface); text-align: center; color: var(--gns-secondary); } .gns-blog__empty p { margin: 0 0 16px; font-size: 15px; } /* -------------------------------------------------------------- pages --- */ .gns-blog__pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 56px; } .gns-blog__page { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--gns-border-strong); border-radius: 10px; font-size: 13px; color: var(--gns-body); text-decoration: none; transition: border-color .15s ease, color .15s ease; } a.gns-blog__page:hover { border-color: var(--gns-cyan); color: var(--gns-text); } .gns-blog__page.is-current { background: var(--gns-cyan-tint-2); border-color: var(--gns-border-cyan); color: var(--gns-text); font-weight: 700; } @media (pointer: coarse) { .gns-blog__page { min-width: 44px; height: 44px; } } /* --------------------------------------------------------- responsive --- */ @media (max-width: 900px) { main.gns-blog { --blog-gutter: 20px; padding-bottom: 64px; } .gns-blog__head { padding: 36px var(--blog-gutter) 28px; } .gns-blog__lead { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 32px; } .gns-blog__more { margin-top: 48px; } } @media (max-width: 600px) { .gns-blog__grid { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .gns-post, .gns-post__media img, .gns-blog__lead-media img, .gns-blog__read span { transition: none; } }