/* ========================================================================= 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 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 :is() takes the specificity of its most specific argument (the ID), so the re-skins keep ID-grade specificity in ALL three 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 account/profile lists, 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. 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) .articles-list-container .article-card, html.fo-article-cards-glass :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section) .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) .articles-list-container .article-card > a, html.fo-article-cards-glass :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .articles-list-container .article-card, html.fo-article-cards-glass :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .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) .articles-list-container .article-card .article-category-container::before { display: none; } /* ========================================================================= 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) .articles-list-container .article-card:hover { animation: none; } html.fo-article-cards-diagonal :is(#articles-list-container-main, .grid-articles-in-section, .landing-page-articles-section) .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) .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) .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) .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) .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) .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) .articles-list-container > .row > [class*="col-lg-"] { flex: 0 0 50%; width: 50%; max-width: 50%; } }