/* ========================================================================= TopManager Online Shop - ARTICLE (blog) card STYLES (BO -> Tema interfata -> "Stiluri carduri produse si articole" -> Carduri articole) ------------------------------------------------------------------------- Pure-CSS re-skins of the SAME article-card markup (_Articles.cshtml). Each style is activated by an html-level opt-in class emitted by InterfaceThemeRenderer.GetHtmlClasses(): html.fo-article-cards-immersive | -glass | -luxe | -duotone | -editorial | -minimal | -business | -journal | -spotlight | -polaroid | -neon | -cover | -filmstrip | -diagonal | -beam plus the cards-per-row opt-ins: html.fo-article-cards-cols-{1..3} (desktop >= 992px) html.fo-article-cards-cols-sm-{1,2} (mobile < 768px) and the per-style knobs: html.fo-article-cards-neon-secondary / -accent (Neon tube colour) plus two tokens read with each style's own default as fallback: the corner radius --tm-article-card-radius (BO "Rotunjire colturi card") and the natural-flow photo ratio --tm-acard-ratio (BO "Format imagine" - emitted only for the natural-flow styles Editorial / Minimal / Spotlight / Polaroid / Filmstrip / Diagonal). Design guarantees: * "Default = apply nothing": with no class on NOTHING here matches, so the standard card stays byte-for-byte identical. * Blog-first: these styles are designed around the article card's OWN elements (category ribbon, photo, title, date) - they are NOT product re-skins. Elegant, editorial, business-like. * Theme-aware: every colour reads a --tm-* design token with the original literal as fallback, so all styles follow the selected FO theme (light, dark or Custom) automatically. * Functional-state safe: the job/ad/breaking-news/draft/not-approved hints, the edit/delete options and the job-interest commands keep working - styles only re-skin chrome, image treatment and typography. * Scope: everywhere the shared _Articles GRID renders - every selector is anchored on :is(#articles-list-container-main, <- the articles/blog listing page (Articles/Index) .grid-articles-in-section, <- web-studio "Articole" sections, render type Grid .landing-page-articles-section, <- the legacy landing-page articles section #other-articles-same-categ-container, <- article details: "similar articles" (AJAX-loaded _Articles) .articles-list-wrapper) <- _ArticlesList wrapper: account "my articles" + public profile + AJAX article paging :is() takes the specificity of its most specific argument (the ID), so the re-skins keep ID-grade specificity in ALL these contexts and cleanly outweigh both the theme's "#main-contents:has(.body-with-sidebar)" height rules and the web-studio section CSS (own.os.website.page.section.articles.css) breakpoint-pinned card/media/title heights - no per-selector defensive duplication, and no half-applied "hybrid" looks. The sidebar articles, the article carousels and the section render types List / Slider / MainCard have their own dedicated markup or styling and are deliberately NOT touched (their cards are not the shared grid card). This file is authored as plain CSS (no Sass features) so the compiled .css twin stays identical - see the front-end assets convention in CLAUDE.md. ========================================================================= */ /* ========================================================================= Shared: full-bleed photo base (Immersive + Glass). The media container becomes an absolutely-positioned, full-card background; the card carries an explicit height because both its children (photo + title panel) leave the flow. The blurred mirror overlay is dropped (the photo itself covers the card, so there is nothing to fill). ========================================================================= */ html.fo-article-cards-immersive :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card, html.fo-article-cards-glass :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { height: 380px; overflow: hidden; } html.fo-article-cards-immersive :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card > a, html.fo-article-cards-glass :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card > a { display: block; position: static; height: 100%; } html.fo-article-cards-immersive :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container, html.fo-article-cards-glass :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container { position: absolute; inset: 0; height: 100%; max-height: none; border-radius: 0; z-index: 0; } html.fo-article-cards-immersive :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container img, html.fo-article-cards-glass :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 4s cubic-bezier(.2, .6, .3, 1); } /* Slow, cinematic zoom on card hover (replaces the standard quick zoom). */ html.fo-article-cards-immersive :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover .article-media-container img, html.fo-article-cards-glass :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover .article-media-container img { transform: scale(1.07); } html.fo-article-cards-immersive :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container .article-media-overlay, html.fo-article-cards-glass :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container .article-media-overlay { display: none; } html.fo-article-cards-immersive :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container, html.fo-article-cards-glass :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container { height: auto; } /* The edit/delete options sit over the photo - keep them readable. */ html.fo-article-cards-immersive :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .more-options-wrapper a, html.fo-article-cards-glass :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .more-options-wrapper a { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } @media (max-width: 767.98px) { html.fo-article-cards-immersive :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card, html.fo-article-cards-glass :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { height: 320px; } } /* ========================================================================= IMERSIV (Immersive) - the photo fills the whole card; the title and date rest on an elegant dark scrim docked at the bottom. ========================================================================= */ html.fo-article-cards-immersive :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { border-radius: var(--tm-article-card-radius, 14px); background: var(--tm-footer-bg, #1c1e24); } html.fo-article-cards-immersive :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container { position: absolute; left: 0; right: 0; bottom: 0; width: auto; padding: 44px 22px 18px 22px; background: linear-gradient(180deg, rgba(10, 12, 16, 0) 0%, rgba(10, 12, 16, .78) 62%, rgba(10, 12, 16, .88) 100%); z-index: 2; } html.fo-article-cards-immersive :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container h3.article-title { color: #fff; font-size: 20px; font-weight: 600; line-height: 1.3; max-height: 78px; /* 3 lines of 20px / 1.3 */ text-shadow: 0 1px 3px rgba(0, 0, 0, .45); } html.fo-article-cards-immersive :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-date { color: rgba(255, 255, 255, .78); margin-top: 4px; letter-spacing: .5px; } /* ========================================================================= STICLA (Glass) - the photo fills the card and the title floats on a frosted-glass panel. ========================================================================= */ html.fo-article-cards-glass :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { border-radius: var(--tm-article-card-radius, 16px); background: var(--tm-footer-bg, #1c1e24); } html.fo-article-cards-glass :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container { position: absolute; left: 14px; right: 14px; bottom: 14px; width: auto; padding: 14px 18px; border-radius: 12px; background: rgba(20, 24, 32, .38); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border: 1px solid rgba(255, 255, 255, .28); z-index: 2; } html.fo-article-cards-glass :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container h3.article-title { color: #fff; font-size: 18px; font-weight: 600; line-height: 1.3; max-height: 70px; /* 3 lines of 18px / 1.3 */ text-shadow: 0 1px 2px rgba(0, 0, 0, .4); } html.fo-article-cards-glass :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-date { color: rgba(255, 255, 255, .8); margin-top: 4px; } /* ========================================================================= LUXE - gallery elegance: hairline accent frame, inset "matted" photo (clipped INSIDE the inner frame - the matte stays clean between the two borders), serif headline, spaced small-caps category and date. ========================================================================= */ html.fo-article-cards-luxe :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { background: var(--tm-surface, #fff); border: 1px solid rgba(200, 162, 74, .45); /* the border follows the theme accent */ border: 1px solid color-mix(in srgb, var(--tm-accent, #c8a24a) 45%, transparent); border-radius: var(--tm-article-card-radius, 0); box-shadow: none; transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; } html.fo-article-cards-luxe :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, .10); } /* The inner hairline frame; the photo below is clipped inside it. */ html.fo-article-cards-luxe :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::after { content: ''; position: absolute; left: 8px; right: 8px; top: 8px; bottom: 8px; opacity: .5; z-index: 4; border-radius: var(--tm-article-card-radius, 0); border: 1px solid var(--tm-accent, #c8a24a); pointer-events: none; transition: opacity .45s; } html.fo-article-cards-luxe :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover::after { opacity: .9; } /* The photo sits INSIDE the inner frame (8px frame + a 6px matte), so nothing of it shows between the two borders. */ html.fo-article-cards-luxe :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container { width: auto; margin: 14px 14px 0 14px; border-radius: 0; } html.fo-article-cards-luxe :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container { padding: 16px 22px 18px 22px; } html.fo-article-cards-luxe :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container h3.article-title { font-family: Georgia, 'Times New Roman', serif; font-size: 19px; font-weight: 600; letter-spacing: .4px; line-height: 1.35; max-height: 78px; /* 3 lines of 19px / 1.35 */ color: var(--tm-text, #333); } html.fo-article-cards-luxe :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-date { text-transform: uppercase; letter-spacing: 2px; font-size: 11px; margin-top: 6px; } /* The category ribbon becomes a discreet accent-outlined label. */ html.fo-article-cards-luxe :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container { background: var(--tm-surface, #fff); color: var(--tm-accent, #c8a24a); left: 22px; top: 22px; border-radius: 0; border: 1px solid var(--tm-accent, #c8a24a); box-shadow: 0 2px 10px rgba(0, 0, 0, .10); } html.fo-article-cards-luxe :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container::before { display: none; } html.fo-article-cards-luxe :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container a { color: var(--tm-accent, #c8a24a); letter-spacing: 2px; font-size: 11px; } /* The hover underline turns into a solid accent hairline. */ html.fo-article-cards-luxe :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::before { background: var(--tm-accent, #c8a24a); } /* ========================================================================= DUOTON (Duotone) - the article photos render duotone in the THEME gradient (primary -> secondary); hovering the card reveals the true colours. Only the image treatment changes. ========================================================================= */ html.fo-article-cards-duotone :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container img { filter: grayscale(1) contrast(1.05); transition: filter .5s, transform .5s; } html.fo-article-cards-duotone :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover .article-media-container img { filter: none; } /* The theme tint layered over the (grayscale) photo. :has() scopes it to cards that actually show a real photo, so the coloured no-picture placeholder and the embedded-video previews stay untinted; browsers without :has() simply skip the tint (grayscale-only fallback). */ html.fo-article-cards-duotone :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container:has(> img)::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: color; background: linear-gradient(120deg, var(--tm-primary, #0088d4), var(--tm-secondary, #00c893)); transition: opacity .5s; } html.fo-article-cards-duotone :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover .article-media-container:has(> img)::after { opacity: 0; } /* The blurred mirror behind the photo goes monochrome too. */ html.fo-article-cards-duotone :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container .article-media-overlay { filter: blur(4px) brightness(0.8) grayscale(1); } html.fo-article-cards-duotone :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { border-radius: var(--tm-article-card-radius, 2px); } html.fo-article-cards-duotone :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container h3.article-title { font-weight: 700; color: var(--tm-text, #444); } /* ========================================================================= EDITORIAL - a magazine spread: the card chrome disappears, the photo stands alone, and below it an accent overline introduces a generous serif headline with a spaced small-caps date. Natural flow height. ========================================================================= */ html.fo-article-cards-editorial :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { height: auto; background: transparent; box-shadow: none; border-radius: 0; } html.fo-article-cards-editorial :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover { box-shadow: none; } /* No gradient hover underline - the accent overline IS the signature. */ html.fo-article-cards-editorial :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::before { display: none; } html.fo-article-cards-editorial :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container { /* From >=576px the base CSS pins the media + title as position:absolute inside a FIXED-height card. This is a natural-flow style (height:auto), so both children must return to the flow - otherwise the card collapses to 0 and the title floats to the very top. The photo keeps a steady ratio instead of the base fixed height. */ position: relative; height: auto; aspect-ratio: var(--tm-acard-ratio, 16 / 9); border-radius: var(--tm-article-card-radius, 6px); } html.fo-article-cards-editorial :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container { position: relative; bottom: auto; height: auto; padding: 16px 6px 6px 6px; } /* The accent overline above the headline. */ html.fo-article-cards-editorial :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container::before { content: ''; display: block; width: 36px; height: 3px; margin-bottom: 10px; background: var(--tm-accent, #ff6500); } html.fo-article-cards-editorial :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container h3.article-title { font-family: Georgia, 'Times New Roman', serif; font-size: 22px; font-weight: 600; line-height: 1.3; max-height: 88px; /* 3 lines of 22px / 1.3 */ color: var(--tm-text, #2b2b2b); transition: color .3s; } html.fo-article-cards-editorial :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover .article-title-container h3.article-title { color: var(--tm-primary, #0088d4); } html.fo-article-cards-editorial :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-date { text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; margin-top: 8px; } /* The category becomes a clean white label over the photo. */ html.fo-article-cards-editorial :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container { background: var(--tm-surface, #fff); left: 14px; top: 14px; border-radius: 2px; box-shadow: 0 2px 10px rgba(0, 0, 0, .14); } html.fo-article-cards-editorial :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container::before { display: none; } html.fo-article-cards-editorial :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container a { color: var(--tm-text, #333); } /* ========================================================================= MINIMALIST (Minimal) - flat and airy: no chrome at all, a softly rounded photo, a frosted category pill and a title that underlines itself elegantly on hover. Natural flow height. ========================================================================= */ html.fo-article-cards-minimal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { height: auto; background: transparent; box-shadow: none; border-radius: 0; } html.fo-article-cards-minimal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover { box-shadow: none; } html.fo-article-cards-minimal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::before { display: none; } html.fo-article-cards-minimal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container { /* Natural-flow style: undo the base >=576px absolute pinning (see Editorial). */ position: relative; height: auto; aspect-ratio: var(--tm-acard-ratio, 16 / 9); border-radius: var(--tm-article-card-radius, 14px); } html.fo-article-cards-minimal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container { position: relative; bottom: auto; height: auto; padding: 14px 4px 4px 4px; } html.fo-article-cards-minimal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container h3.article-title { font-size: 17px; font-weight: 600; line-height: 1.4; max-height: 75px; /* 3 lines of 17px / 1.4 (+ the underline reserve) */ color: var(--tm-text, #333); background: linear-gradient(var(--tm-primary, #0088d4), var(--tm-primary, #0088d4)) left bottom / 0% 2px no-repeat; transition: background-size .35s ease; padding-bottom: 3px; } html.fo-article-cards-minimal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover .article-title-container h3.article-title { background-size: 100% 2px; } html.fo-article-cards-minimal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-date { margin-top: 6px; } /* The category ribbon becomes a quiet frosted pill over the photo. */ html.fo-article-cards-minimal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container { background: rgba(255, 255, 255, .86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); left: 12px; top: 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .10); } html.fo-article-cards-minimal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container::before { display: none; } html.fo-article-cards-minimal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container a { color: #333; } /* ========================================================================= BUSINESS - crisp and corporate: a slim gradient bar in the theme colours crowns a precisely-bordered card with firm typography and a structured meta line; the card lifts discreetly on hover. ========================================================================= */ html.fo-article-cards-business :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { background: var(--tm-surface, #fff); border: 1px solid var(--tm-border, #e3e7ec); border-radius: var(--tm-article-card-radius, 8px); box-shadow: 0 1px 2px rgba(16, 24, 40, .06); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } html.fo-article-cards-business :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover { transform: translateY(-3px); border-color: var(--tm-primary, #0088d4); box-shadow: 0 12px 28px -12px rgba(16, 24, 40, .20); } /* The signature top bar in the theme gradient. */ html.fo-article-cards-business :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3; background: linear-gradient(90deg, var(--tm-primary, #0088d4), var(--tm-secondary, #00c893)); border-radius: var(--tm-article-card-radius, 8px) var(--tm-article-card-radius, 8px) 0 0; } /* The top bar replaces the bottom hover underline. */ html.fo-article-cards-business :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::before { display: none; } html.fo-article-cards-business :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container { border-radius: 0; } html.fo-article-cards-business :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container { padding: 14px 20px 16px 20px; } html.fo-article-cards-business :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container h3.article-title { font-size: 17px; font-weight: 600; letter-spacing: .1px; line-height: 1.4; max-height: 72px; /* 3 lines of 17px / 1.4 */ color: var(--tm-text, #2c3038); } html.fo-article-cards-business :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-date { text-transform: uppercase; letter-spacing: 1px; font-size: 11px; font-weight: 600; margin-top: 6px; } /* The category ribbon becomes a squared corporate tag in the primary colour. */ html.fo-article-cards-business :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container { background: var(--tm-primary, #0088d4); left: 14px; top: 14px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); } html.fo-article-cards-business :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container::before { display: none; } /* ========================================================================= JURNAL (Journal) - a refined newspaper feel: a double ink rule on top, fine borders, a serif headline and the date as a bordered label that straddles the photo edge. ========================================================================= */ html.fo-article-cards-journal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { background: var(--tm-surface, #fdfcf9); border: 1px solid var(--tm-border, #ddd6c9); border-top: 4px double var(--tm-text, #55524c); border-radius: var(--tm-article-card-radius, 0); } html.fo-article-cards-journal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container { border-radius: 0; } html.fo-article-cards-journal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container { padding: 18px 22px 18px 22px; } html.fo-article-cards-journal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container h3.article-title { font-family: Georgia, 'Times New Roman', serif; font-size: 20px; font-weight: 700; line-height: 1.3; max-height: 78px; /* 3 lines of 20px / 1.3 */ color: var(--tm-text, #2e2c28); } /* The date label straddling the photo/text boundary, set like lead type. */ html.fo-article-cards-journal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-date { position: absolute; top: -13px; right: 18px; background: var(--tm-surface, #fff); border: 1px solid var(--tm-border, #b9b19f); padding: 3px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; z-index: 3; } /* The category ribbon is set in "ink". */ html.fo-article-cards-journal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container { background: var(--tm-text, #45423c); left: 14px; top: 14px; border-radius: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); } html.fo-article-cards-journal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container::before { display: none; } html.fo-article-cards-journal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container a { color: var(--tm-surface, #fdfcf9); } /* The hover underline becomes an ink hairline. */ html.fo-article-cards-journal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::before { background: var(--tm-text, #55524c); height: 1px; } /* ========================================================================= SPOTLIGHT - the photo glows in the theme gradient and a light content plate floats over its lower edge, lifting gently on hover. Natural flow height. ========================================================================= */ html.fo-article-cards-spotlight :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { height: auto; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; } html.fo-article-cards-spotlight :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover { box-shadow: none; } html.fo-article-cards-spotlight :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::before { display: none; } html.fo-article-cards-spotlight :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container { /* Natural-flow style: undo the base >=576px absolute pinning (see Editorial). */ position: relative; height: auto; aspect-ratio: var(--tm-acard-ratio, 16 / 9); border-radius: var(--tm-article-card-radius, 12px); } /* The theme-gradient glow over the photo; it clears up on hover. */ html.fo-article-cards-spotlight :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: multiply; background: linear-gradient(160deg, var(--tm-primary, #0088d4), var(--tm-secondary, #00c893)); opacity: .38; transition: opacity .5s; } html.fo-article-cards-spotlight :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover .article-media-container::after { opacity: .16; } /* The floating content plate. */ html.fo-article-cards-spotlight :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container { /* The plate floats over the photo's lower edge via a negative top margin, so it must sit in the flow (relative), not stay pinned to the card bottom (base absolute). */ position: relative; bottom: auto; height: auto; width: auto; margin: -30px 18px 0 18px; padding: 16px 18px; border-radius: 12px; background: var(--tm-surface, #fff); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .28); z-index: 2; transition: transform .35s ease, box-shadow .35s ease; } html.fo-article-cards-spotlight :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover .article-title-container { transform: translateY(-4px); box-shadow: 0 20px 38px -14px rgba(0, 0, 0, .34); } html.fo-article-cards-spotlight :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container h3.article-title { font-size: 17px; font-weight: 600; line-height: 1.4; max-height: 72px; /* 3 lines of 17px / 1.4 */ color: var(--tm-text, #333); } html.fo-article-cards-spotlight :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-date { margin-top: 6px; } /* The category becomes an accent pill over the photo. */ html.fo-article-cards-spotlight :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container { background: var(--tm-accent, #ff6500); left: 14px; top: 14px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); } html.fo-article-cards-spotlight :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container::before { display: none; } /* ========================================================================= POLAROID - a snapshot from the pinboard: the photo sits matted in a thick white frame, the card leans slightly (alternating per column) under an accent "tape", the caption is handwritten, and hovering straightens it with a springy pop. Natural flow height. ========================================================================= */ html.fo-article-cards-polaroid :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { --tm-apolaroid-base: -1.4deg; height: auto; background: var(--tm-surface, #fff); border-radius: var(--tm-article-card-radius, 3px); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); transform: rotate(var(--tm-apolaroid-base)); transition: transform .45s cubic-bezier(.25, 1.6, .4, 1), box-shadow .45s; } /* pseudo-random lean per grid column */ html.fo-article-cards-polaroid :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container > .row > div:nth-of-type(2n) .article-card { --tm-apolaroid-base: 1.5deg; } html.fo-article-cards-polaroid :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container > .row > div:nth-of-type(3n) .article-card { --tm-apolaroid-base: -.6deg; } html.fo-article-cards-polaroid :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover { transform: rotate(0) scale(1.015); box-shadow: 0 16px 34px rgba(0, 0, 0, .18); z-index: 5; } /* the accent tape (repurposes the base bottom hover line) */ html.fo-article-cards-polaroid :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::before { top: -10px; bottom: auto; left: 50%; width: 86px; height: 22px; border-radius: 2px; transform: translateX(-50%) rotate(-3deg); background: var(--tm-accent-light, #ffa86f); opacity: .55; z-index: 11; } /* the base hover rule stretches ::before to 100% - pin the tape size */ html.fo-article-cards-polaroid :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover::before { width: 86px; } /* the matted photo (squarish, like a real polaroid) */ html.fo-article-cards-polaroid :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container { position: relative; width: auto; height: auto; max-height: none; aspect-ratio: var(--tm-acard-ratio, 4 / 3); margin: 14px 14px 0 14px; border-radius: 0; background: var(--tm-surface-alt, #f0f0f0); } /* the handwritten caption */ html.fo-article-cards-polaroid :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container { position: relative; bottom: auto; height: auto; align-items: center; text-align: center; padding: 12px 16px 22px 16px; } html.fo-article-cards-polaroid :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container h3.article-title { font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; font-size: 17px; line-height: 1.4; max-height: 76px; /* ~3 lines of 17px / 1.4 */ color: var(--tm-text, #444); } html.fo-article-cards-polaroid :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-date { font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; font-size: 12px; margin-top: 4px; } /* ========================================================================= NEON - electric blog: dark card with a neon-tube contour in a theme colour (primary by default; the "Culoare neon" knob chains fo-article-cards-neon-secondary / -accent), the title glows on hover and the category becomes a neon-outlined pill. Chrome-only re-skin - the card keeps its standard layout. ========================================================================= */ html.fo-article-cards-neon :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { --tm-neon: var(--tm-primary, #0088d4); background: var(--tm-footer-bg, #16181f); border: 1px solid var(--tm-neon); border-radius: var(--tm-article-card-radius, 12px); box-shadow: 0 0 14px rgba(0, 136, 212, .40), inset 0 0 22px rgba(0, 136, 212, .10); box-shadow: 0 0 14px color-mix(in srgb, var(--tm-neon) 42%, transparent), inset 0 0 22px color-mix(in srgb, var(--tm-neon) 10%, transparent); transition: box-shadow .35s, transform .35s; } html.fo-article-cards-neon.fo-article-cards-neon-secondary :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { --tm-neon: var(--tm-secondary, #00c893); } html.fo-article-cards-neon.fo-article-cards-neon-accent :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { --tm-neon: var(--tm-accent, #ff6500); } html.fo-article-cards-neon :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover { transform: translateY(-3px); box-shadow: 0 0 26px rgba(0, 136, 212, .60), inset 0 0 30px rgba(0, 136, 212, .14); box-shadow: 0 0 26px color-mix(in srgb, var(--tm-neon) 62%, transparent), inset 0 0 30px color-mix(in srgb, var(--tm-neon) 14%, transparent); animation: tm-acard-neon-flicker .9s linear 1; } /* the glow IS the hover signature - drop the base gradient line */ html.fo-article-cards-neon :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::before { display: none; } /* the photo corners follow the neon chrome */ html.fo-article-cards-neon :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container { border-radius: calc(var(--tm-article-card-radius, 12px) - 1px) calc(var(--tm-article-card-radius, 12px) - 1px) 0 0; } html.fo-article-cards-neon :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container h3.article-title { color: #f2f4f8; } html.fo-article-cards-neon :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover .article-title-container h3.article-title { color: var(--tm-neon); text-shadow: 0 0 12px rgba(0, 136, 212, .55); text-shadow: 0 0 12px color-mix(in srgb, var(--tm-neon) 55%, transparent); } html.fo-article-cards-neon :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-date { color: rgba(255, 255, 255, .6); } /* the category ribbon becomes a neon-outlined pill */ html.fo-article-cards-neon :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container { background: rgba(0, 0, 0, .35); border: 1px solid var(--tm-neon); border-radius: 999px; left: 12px; box-shadow: 0 0 10px rgba(0, 136, 212, .35); box-shadow: 0 0 10px color-mix(in srgb, var(--tm-neon) 38%, transparent); } html.fo-article-cards-neon :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container::before { display: none; } html.fo-article-cards-neon :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .more-options-wrapper a { color: rgba(255, 255, 255, .85); } @keyframes tm-acard-neon-flicker { 0%, 100% { opacity: 1; } 6% { opacity: .72; } 10% { opacity: 1; } 16% { opacity: .84; } 24% { opacity: 1; } } /* ========================================================================= COPERTA (Cover) - the article as a magazine cover: the photo fills the whole card, a fine white frame sits inset like a printed border, and the masthead (category overline + big serif title + spaced date) is centered at the TOP over a downward-fading veil. Fixed height (like Immersive). ========================================================================= */ html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { height: 380px; overflow: hidden; border-radius: var(--tm-article-card-radius, 6px); background: var(--tm-footer-bg, #1c1e24); } html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card > a { display: block; position: static; height: 100%; } html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container { position: absolute; inset: 0; height: 100%; max-height: none; border-radius: 0; z-index: 0; } html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 4s cubic-bezier(.2, .6, .3, 1); } html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover .article-media-container img { transform: scale(1.07); } html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container .article-media-overlay { display: none; } /* the top-down veil the masthead reads on (plus a soft bottom anchor) */ html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(8, 10, 14, .74) 0%, rgba(8, 10, 14, .40) 32%, rgba(8, 10, 14, 0) 58%, rgba(8, 10, 14, .30) 100%); } /* the printed inner frame (repurposes the base bottom hover line) */ html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::before { top: 10px; bottom: 10px; left: 10px; right: 10px; width: auto; height: auto; border-radius: 0; background: none; border: 1px solid rgba(255, 255, 255, .5); z-index: 3; } html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover::before { width: auto; } /* the masthead: centered at the top of the cover */ html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container { position: absolute; top: 0; left: 0; right: 0; bottom: auto; width: auto; height: auto; align-items: center; text-align: center; padding: 52px 28px 0 28px; z-index: 2; } html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container h3.article-title { font-family: Georgia, 'Times New Roman', serif; font-size: 24px; font-weight: 700; line-height: 1.25; max-height: 90px; /* 3 lines of 24px / 1.25 */ color: #fff; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); } html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-date { color: rgba(255, 255, 255, .75); text-transform: uppercase; letter-spacing: 2px; font-size: 11px; margin-top: 8px; } /* the category becomes the small centered overline above the masthead */ html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container { left: 50%; top: 22px; transform: translateX(-50%); background: transparent; border-radius: 0; box-shadow: none; z-index: 3; } html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container::before { display: none; } html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container a { color: rgba(255, 255, 255, .85); letter-spacing: 3px; font-size: 11px; } /* the edit/delete options sit over the photo - keep them readable */ html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .more-options-wrapper a { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } @media (max-width: 767.98px) { html.fo-article-cards-cover :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { height: 320px; } } /* ---- Cover card aspect (BO -> "Format card"): the built-in cover is a fixed 380px (320px mobile); "Portret" stands the card up like a book, "Peisaj" lays it down like an album - both switch the card to a width-driven aspect-ratio (the chained class out-specifies the base + mobile height rules, so it applies on every breakpoint). ---- */ html.fo-article-cards-cover.fo-article-cards-cover-portrait :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { height: auto; aspect-ratio: 3 / 4; } html.fo-article-cards-cover.fo-article-cards-cover-landscape :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { height: auto; aspect-ratio: 16 / 9; } /* ========================================================================= PELICULA (Filmstrip) - the photo runs between two perforated film bars, the date is set like a clapper-board slate (monospace, with an accent play marker) - made for video-heavy blogs. Natural flow height. ========================================================================= */ html.fo-article-cards-filmstrip :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { height: auto; background: var(--tm-surface, #fff); border-radius: var(--tm-article-card-radius, 8px); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); /* the 16px gap above the film is card PADDING, not the media's margin: a margin-top collapses through the card (no border/padding above it), the film bar lands at y=0 and the y=19px perforations slip 3px below it, onto the photo - the gap must not collapse for the holes to sit centered in the bar */ padding-top: 16px; } /* the film: the photo between two dark bars */ html.fo-article-cards-filmstrip :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container { position: relative; width: auto; height: auto; max-height: none; aspect-ratio: var(--tm-acard-ratio, 16 / 9); margin: 0 16px; border-radius: 4px; border-top: 16px solid #14141a; border-bottom: 16px solid #14141a; background: #14141a; } html.fo-article-cards-filmstrip :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover .article-media-container img { filter: brightness(1.06); } /* the top perforations (repurpose the base hover line; the bottom ones live on the title container - the media's overflow:hidden would clip anything painted in its border area) */ html.fo-article-cards-filmstrip :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::before { top: 19px; bottom: auto; left: 22px; right: 22px; width: auto; height: 10px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .88) 0 8px, transparent 8px 20px); z-index: 3; } html.fo-article-cards-filmstrip :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover::before { width: auto; } html.fo-article-cards-filmstrip :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container { position: relative; bottom: auto; height: auto; padding: 14px 18px 18px 18px; } /* the bottom perforations */ html.fo-article-cards-filmstrip :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container::before { content: ''; position: absolute; top: -13px; left: 22px; right: 22px; height: 10px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .88) 0 8px, transparent 8px 20px); pointer-events: none; } html.fo-article-cards-filmstrip :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container h3.article-title { font-size: 18px; font-weight: 700; line-height: 1.35; max-height: 73px; /* 3 lines of 18px / 1.35 */ color: var(--tm-text, #2b2b2b); } /* the slate: monospace date with an accent play marker */ html.fo-article-cards-filmstrip :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-date { font-family: 'Courier New', Courier, monospace; text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; font-weight: 700; margin-top: 6px; } html.fo-article-cards-filmstrip :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-date::before { content: '\25B8 '; /* the small play marker */ color: var(--tm-accent, #ff6500); } /* the category chip goes "production black", pinned onto the photo */ html.fo-article-cards-filmstrip :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container { background: #14141a; left: 8px; top: 44px; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); } html.fo-article-cards-filmstrip :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container::before { display: none; } /* ========================================================================= DIAGONAL - modern business: the photo ends on a diagonal cut with a theme-gradient seam hugging the edge, firm left-aligned typography and a date that points forward (the arrow slides on hover). On hover the diagonal eases flat - the cut and its seam settle into a straight horizontal underline. Natural flow height. ========================================================================= */ html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { height: auto; background: var(--tm-surface, #fff); border: 1px solid var(--tm-border, #e6e9ee); border-radius: var(--tm-article-card-radius, 10px); box-shadow: 0 2px 8px rgba(16, 24, 40, .06); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover { transform: translateY(-4px); border-color: var(--tm-primary, #0088d4); box-shadow: 0 14px 30px -12px rgba(16, 24, 40, .20); } /* the seam replaces the base bottom hover line */ html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::before { display: none; } /* the diagonally-cut photo; on hover the cut eases flat (see below), so the clip-path transitions - both polygons keep the same 4 points so the browser can interpolate them */ html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container { position: relative; width: auto; height: auto; max-height: none; aspect-ratio: var(--tm-acard-ratio, 16 / 9); border-radius: calc(var(--tm-article-card-radius, 10px) - 1px) calc(var(--tm-article-card-radius, 10px) - 1px) 0 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 86%); transition: clip-path .5s cubic-bezier(.2, .8, .3, 1); } /* the theme-gradient seam hugging the diagonal edge - same duration and easing as the photo's cut, so the two stay glued while flattening */ html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--tm-primary, #0088d4), var(--tm-secondary, #00c893)); clip-path: polygon(0 82%, 100% 96%, 100% 100%, 0 86%); transition: clip-path .5s cubic-bezier(.2, .8, .3, 1); } /* on hover the diagonal settles into a straight horizontal edge: the photo squares off and the seam becomes a flat underline hugging its bottom */ html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover .article-media-container { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover .article-media-container::after { clip-path: polygon(0 96%, 100% 96%, 100% 100%, 0 100%); } html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container { position: relative; bottom: auto; height: auto; padding: 10px 20px 16px 20px; } html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container h3.article-title { font-size: 18px; font-weight: 700; letter-spacing: .1px; line-height: 1.35; max-height: 73px; /* 3 lines of 18px / 1.35 */ color: var(--tm-text, #2c3038); } /* the date points forward; the arrow slides on hover */ html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-date { text-transform: uppercase; letter-spacing: 1px; font-size: 11px; font-weight: 600; color: var(--tm-primary, #0088d4); margin-top: 6px; } html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-date::after { content: '\2192'; display: inline-block; margin-left: 6px; transition: transform .3s ease; } html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover .article-date::after { transform: translateX(4px); } /* the category ribbon becomes a squared corporate tag in the primary colour */ html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container { background: var(--tm-primary, #0088d4); left: 14px; top: 14px; border-radius: 3px; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); } html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container::before { display: none; } /* ========================================================================= FASCICUL LUMINOS (Beam) - orbiting light: a luminous beam in the theme's primary travels continuously around the card's contour (a masked conic-gradient ring whose start angle is the registered --tm-abeam-angle, animated by keyframes), while a blurred twin of the same ring glows OUTSIDE the edge as the beam's trail; it burns brighter on hover. Chrome-only re-skin - the card keeps its standard layout. Browsers without @property degrade to a slow 4-step "ticking" orbit; reduced motion keeps the elegant static gradient ring. ========================================================================= */ @property --tm-abeam-angle { syntax: ''; inherits: false; initial-value: 0deg; } html.fo-article-cards-beam :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card { background: var(--tm-surface, #fff); border-radius: var(--tm-article-card-radius, 16px); box-shadow: 0 6px 22px rgba(0, 0, 0, .08); transition: transform .35s cubic-bezier(.2, .9, .3, 1.1), box-shadow .35s; } html.fo-article-cards-beam :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .13); } /* the orbiting beam: a masked ring (content-box XOR trick) repurposing the base bottom hover line - a faint constant track sits UNDER the bright moving head, so the contour never disappears while the beam is on the far side */ html.fo-article-cards-beam :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::before { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; z-index: 4; border-radius: var(--tm-article-card-radius, 16px); padding: 2px; background: conic-gradient(from var(--tm-abeam-angle, 0deg), transparent 0deg, transparent 258deg, rgba(0, 136, 212, .5) 300deg, rgba(255, 255, 255, .95) 327deg, rgba(0, 136, 212, .9) 341deg, transparent 359deg), conic-gradient(rgba(0, 136, 212, .22) 0deg 360deg); background: conic-gradient(from var(--tm-abeam-angle, 0deg), transparent 0deg, transparent 258deg, color-mix(in srgb, var(--tm-primary, #0088d4) 50%, transparent) 300deg, rgba(255, 255, 255, .95) 327deg, color-mix(in srgb, var(--tm-primary, #0088d4) 90%, transparent) 341deg, transparent 359deg), conic-gradient(color-mix(in srgb, var(--tm-primary, #0088d4) 22%, transparent) 0deg 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; animation: tm-acard-beam-orbit 5.5s linear infinite; } /* the base hover rule stretches ::before to 100% width - pin the ring */ html.fo-article-cards-beam :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover::before { width: auto; } /* the glow trail outside the edge: the same orbiting ring, wider and blurred */ html.fo-article-cards-beam :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::after { content: ''; position: absolute; top: -7px; right: -7px; bottom: -7px; left: -7px; opacity: .75; z-index: 0; border-radius: calc(var(--tm-article-card-radius, 16px) + 7px); padding: 9px; pointer-events: none; background: conic-gradient(from var(--tm-abeam-angle, 0deg), transparent 0deg, transparent 270deg, rgba(0, 136, 212, .6) 315deg, rgba(0, 136, 212, .95) 336deg, transparent 358deg); background: conic-gradient(from var(--tm-abeam-angle, 0deg), transparent 0deg, transparent 270deg, color-mix(in srgb, var(--tm-primary, #0088d4) 60%, transparent) 315deg, color-mix(in srgb, var(--tm-primary, #0088d4) 95%, transparent) 336deg, transparent 358deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; filter: blur(7px); animation: tm-acard-beam-orbit 5.5s linear infinite; } html.fo-article-cards-beam :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover::after { opacity: 1; } /* the photo corners follow the ring */ html.fo-article-cards-beam :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container { border-radius: calc(var(--tm-article-card-radius, 16px) - 2px) calc(var(--tm-article-card-radius, 16px) - 2px) 0 0; } html.fo-article-cards-beam :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-title-container h3.article-title { color: var(--tm-text, #333); transition: color .3s; } html.fo-article-cards-beam :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover .article-title-container h3.article-title { color: var(--tm-primary, #0088d4); } /* the category ribbon becomes a light pill with a beam-coloured outline */ html.fo-article-cards-beam :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container { background: var(--tm-surface, #fff); border: 1px solid rgba(0, 136, 212, .5); border: 1px solid color-mix(in srgb, var(--tm-primary, #0088d4) 50%, transparent); border-radius: 999px; left: 12px; top: 12px; box-shadow: 0 2px 10px rgba(0, 136, 212, .25); box-shadow: 0 2px 10px color-mix(in srgb, var(--tm-primary, #0088d4) 28%, transparent); } html.fo-article-cards-beam :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container::before { display: none; } html.fo-article-cards-beam :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-category-container a { color: var(--tm-primary, #0088d4); } /* the orbit: the intermediate steps keep a graceful "ticking" fallback in browsers that cannot interpolate the (unregistered) angle */ @keyframes tm-acard-beam-orbit { 0% { --tm-abeam-angle: 0deg; } 25% { --tm-abeam-angle: 90deg; } 50% { --tm-abeam-angle: 180deg; } 75% { --tm-abeam-angle: 270deg; } 100% { --tm-abeam-angle: 360deg; } } /* ========================================================================= Reduced motion: the looks stay, the electric / springy animations stop. ========================================================================= */ @media (prefers-reduced-motion: reduce) { html.fo-article-cards-neon :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card:hover { animation: none; } /* Beam: the orbit stops - the elegant static gradient ring stays. */ html.fo-article-cards-beam :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::before, html.fo-article-cards-beam :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card::after { animation: none; } html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container, html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container .article-card .article-media-container::after { transition: none; } } /* ========================================================================= CARDS PER ROW - grid overrides for the articles listing. The listing uses Bootstrap columns (col-lg-6, plus col-lg-12 on the last odd card), so the opt-ins re-size the column cells directly. An explicit choice also normalises the "last odd card stretches full-width" behaviour, so the grid stays perfectly uniform. ========================================================================= */ @media (min-width: 992px) { html.fo-article-cards-cols-1 :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container > .row > [class*="col-lg-"] { flex: 0 0 100%; width: 100%; max-width: 100%; } html.fo-article-cards-cols-2 :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container > .row > [class*="col-lg-"] { flex: 0 0 50%; width: 50%; max-width: 50%; } html.fo-article-cards-cols-3 :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container > .row > [class*="col-lg-"] { flex: 0 0 33.3333%; width: 33.3333%; max-width: 33.3333%; } } @media (max-width: 767.98px) { html.fo-article-cards-cols-sm-1 :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container > .row > [class*="col-lg-"] { flex: 0 0 100%; width: 100%; max-width: 100%; } html.fo-article-cards-cols-sm-2 :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section, #other-articles-same-categ-container, .articles-list-wrapper) .articles-list-container > .row > [class*="col-lg-"] { flex: 0 0 50%; width: 50%; max-width: 50%; } }