wrapper - no max-width, no padding. Full-bleed sections (hero, * editorial-integrity, mission-hero, codeenable-reference) live directly here * and stretch to the viewport edges; constrained content opts into

* (Angular parity: app.html `.site-main { min-height: ... }` only). */ .site-main { flex: 1 0 auto; min-height: calc(100vh - 200px); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-primary); color: var(--color-text-inverse); padding: 0.75rem 1rem; border-radius: 0 0 var(--radius) 0; font-weight: 600; z-index: 1000; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; } /* =========================================================================== * Buttons * ========================================================================= */ button, .button, [role="button"] { cursor: pointer; font-family: inherit; } .button, a.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; min-width: 44px; padding: 0.75rem 1.75rem; border: none; border-radius: var(--radius); background-color: var(--color-primary); color: var(--color-text-inverse); font-size: 0.95rem; font-weight: 700; line-height: 1.2; text-decoration: none; transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease; box-shadow: var(--shadow-sm); } .button:hover, a.button:hover { background-color: var(--color-primary-hover); color: var(--color-text-inverse); transform: translateY(-2px); text-decoration: none; box-shadow: var(--shadow-md); } .button:active, a.button:active { transform: translateY(0); } .button-secondary, a.button-secondary { background-color: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); padding: calc(0.75rem - 2px) calc(1.75rem - 2px); } .button-secondary:hover, a.button-secondary:hover { background-color: var(--color-primary); color: var(--color-text-inverse); } .button-link { background: none; border: none; box-shadow: none; color: var(--color-primary); padding-inline: 0; min-height: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .button-link:hover { background: none; color: var(--color-primary-hover); transform: none; box-shadow: none; } /* =========================================================================== * Header * ========================================================================= */ .site-header { position: sticky; top: 0; z-index: 100; border-bottom: 2px solid var(--color-primary); background-color: var(--color-bg-elevated); } .site-header > .container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding-block: 0.85rem; } .site-logo { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.4rem; font-weight: 900; letter-spacing: -0.01em; color: var(--color-text); } .site-logo:hover { text-decoration: none; color: var(--color-text); } .brand-mark { width: 32px; height: 32px; flex: 0 0 auto; } .brand-word { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 900; /* Trailing letter-spacing adds phantom width on the right - pull it back so * the wordmark stays optically balanced next to the logo mark. */ margin-right: -0.16em; background-image: linear-gradient(110deg, var(--title-grad-from) 12%, var(--title-grad-to) 88%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--title-grad-to); text-shadow: var(--title-glow); } .site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; } .site-nav a { display: inline-flex; align-items: center; color: var(--color-text); padding: 0.5rem 0.85rem; border-radius: var(--radius); font-size: 0.95rem; font-weight: 500; transition: background-color 0.18s ease, color 0.18s ease; } .site-nav a:hover { background-color: var(--color-surface-2); color: var(--color-primary); text-decoration: none; } .site-header-tools { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; } /* =========================================================================== * Icon buttons in header (search submit, theme toggle, language switcher) * - All identical 40x40 squares with centred SVG. Matches Angular's icon-button * convention so eyes don't dart between asymmetric controls. * ========================================================================= */ .icon-button, .search-bar button, .theme-toggle, .language-switcher-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; padding: 0; background-color: transparent; border: 1px solid var(--color-border-strong); border-radius: var(--radius); color: var(--color-text); line-height: 1; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .icon-button:hover, .search-bar button:hover, .theme-toggle:hover, .language-switcher-toggle:hover { background-color: var(--color-surface-2); border-color: var(--color-primary); color: var(--color-primary); } .icon-button svg, .search-bar button svg, .theme-toggle svg, .language-switcher-toggle svg { width: 20px; height: 20px; display: block; } /* Sun/moon swap on theme. Specificity must beat the generic `.theme-toggle svg` * rule above (which sets display:block on every SVG inside the button), so both * dark- and light-mode rules are scoped through .theme-toggle. Default (no attr) * is treated as dark - show sun. */ .theme-toggle .theme-toggle-icon--moon { display: none; } .theme-toggle .theme-toggle-icon--sun { display: block; } [data-theme="light"] .theme-toggle .theme-toggle-icon--sun { display: none; } [data-theme="light"] .theme-toggle .theme-toggle-icon--moon { display: block; } /* Search bar (header) */ .search-bar { display: flex; align-items: center; gap: 0.4rem; } .search-bar input { height: 40px; padding: 0 0.85rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius); background-color: var(--color-surface-2); color: var(--color-text); font: inherit; font-size: 0.9rem; width: 0; max-width: 0; opacity: 0; transition: width 0.22s ease, max-width 0.22s ease, opacity 0.22s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .search-bar.is-open input, .search-bar input:focus, .search-bar input:not(:placeholder-shown) { width: clamp(11rem, 28vw, 17rem); max-width: clamp(11rem, 28vw, 17rem); opacity: 1; } .search-bar input::placeholder { color: var(--color-text-subtle); } .search-bar input:focus { outline: none; border-color: var(--color-primary); background-color: var(--color-bg-elevated); box-shadow: 0 0 0 3px var(--ring); } /* Language switcher dropdown */ .language-switcher { position: relative; } .language-switcher-toggle { width: auto; min-width: 40px; padding: 0 0.6rem; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; } .language-switcher-menu { position: absolute; right: 0; top: calc(100% + 0.45rem); margin: 0; padding: 0.35rem; list-style: none; min-width: 11.5rem; background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 50; animation: menu-in 0.16s ease; } .language-switcher-menu[hidden] { display: none; } .language-switcher-menu a { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.75rem; color: var(--color-text); font-size: 0.9rem; border-radius: var(--radius-sm); } .language-switcher-menu a:hover, .language-switcher-menu a:focus { background-color: var(--color-surface-2); color: var(--color-primary); text-decoration: none; } .language-switcher-menu .is-current { color: var(--color-primary); font-weight: 700; } .language-flag { width: 1.25em; height: auto; border-radius: 2px; flex: 0 0 auto; box-shadow: 0 0 0 1px var(--color-border) inset; } .language-code { font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; } .language-name { flex: 1 1 auto; color: var(--color-text-muted); font-size: 0.85rem; } @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* =========================================================================== * Category navigation (CSS-only dropdowns) * ========================================================================= */ .category-nav { background-color: var(--color-bg); border-top: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); } .category-nav-list { display: flex; flex-wrap: wrap; gap: 0.2rem; list-style: none; margin: 0 auto; padding: 0.4rem clamp(1rem, 3vw, 2.5rem); max-width: var(--max-width); } .category-nav-item { position: relative; } .category-nav-link, .category-nav-dropdown-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; color: var(--color-text-muted); border-radius: var(--radius); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; transition: background-color 0.18s ease, color 0.18s ease, text-shadow 0.18s ease; } .category-nav-link:hover, .category-nav-link:focus-visible, .category-nav-dropdown-link:hover, .category-nav-dropdown-link:focus-visible { background-color: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); text-shadow: 0 0 10px color-mix(in srgb, var(--color-primary) 40%, transparent); text-decoration: none; } /* Neon underline sweep on the top-level items (dropdown links keep just the * tinted hover fill - an absolute bar wouldn't sit right in the panel). */ .category-nav-link { position: relative; } .category-nav-link::before { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.2rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease; } .category-nav-link:hover::before, .category-nav-link:focus-visible::before { transform: scaleX(1); } .category-icon { font-size: 1.1em; line-height: 1; } .category-nav-item.has-children > .category-nav-link::after { content: "▾"; font-size: 0.7em; opacity: 0.7; margin-left: 0.2rem; } .category-nav-dropdown { position: absolute; left: 0; top: calc(100% + 0.2rem); z-index: 60; list-style: none; margin: 0; padding: 0.4rem; min-width: 14rem; background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: none; } /* Invisible bridge spanning the visual gap to the parent link so moving the cursor down into the dropdown does not break the :hover region. */ .category-nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -0.4rem; height: 0.4rem; } .category-nav-item:hover > .category-nav-dropdown, .category-nav-item:focus-within > .category-nav-dropdown { display: block; animation: menu-in 0.16s ease; } .category-nav-dropdown-link { display: flex; width: 100%; border-radius: var(--radius-sm); } /* --------------------------------------------------------------------------- * Mobile: collapse the category nav behind a hamburger so the sticky header * stays one row tall. Verbose languages (e.g. Polish) otherwise wrap the * horizontal nav onto several rows, growing the header until it overlaps the * hero title on scroll. The hamburger lives in the header tools, desktop-hidden. * The two icons are scoped through `.nav-toggle` so they beat `.icon-button svg` * (which forces display:block on every icon), mirroring the theme-toggle swap. * ------------------------------------------------------------------------- */ .nav-toggle { display: none; } .nav-toggle .nav-toggle__close { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; } @media (max-width: 768px) { .nav-toggle { display: inline-flex; } .category-nav { display: none; } .category-nav.is-open { display: block; animation: menu-in 0.16s ease; } .category-nav-list { flex-direction: column; flex-wrap: nowrap; gap: 0.1rem; padding-block: 0.5rem; } .category-nav-link { width: 100%; } /* No hover on touch: render child categories as an always-expanded, indented * sublist instead of a positioned dropdown that would never open. */ .category-nav-item.has-children > .category-nav-link::after { content: none; } .category-nav-dropdown { position: static; display: block; min-width: 0; margin: 0; padding: 0.1rem 0 0.2rem 1.4rem; background-color: transparent; border: none; border-radius: 0; box-shadow: none; animation: none; } .category-nav-dropdown::before { content: none; } } /* =========================================================================== * Editorial integrity banner (mirrors Angular `app-editorial-integrity`). * The mission-hero strip (``) is its twin and * shares the .mission-hero* tokens below. Both render as edge-to-edge bands * with tiny uppercase text and a single primary-tinted info glyph leading * the first paragraph - the public-web "we declare what we do" signal. * ========================================================================= */ .editorial-integrity, .mission-hero { background-color: var(--color-bg-elevated); color: var(--color-text); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .editorial-integrity__inner, .mission-hero__inner { max-width: var(--max-width); margin: 0 auto; padding: 0.75rem clamp(16px, 3vw, 32px); } .editorial-integrity__body, .mission-hero__lead { margin: 0 0 0.4em; color: var(--color-text-muted); font-size: 0.6875rem; line-height: 1.55; letter-spacing: 0.04em; text-transform: uppercase; text-align: justify; } .editorial-integrity__body:last-of-type, .mission-hero__lead:last-of-type { margin-bottom: 0; } .editorial-integrity__icon, .mission-hero__icon { display: inline-block; width: 1.4em; height: 1.4em; vertical-align: -0.3em; margin-right: 0.45em; color: var(--color-primary); flex-shrink: 0; } @media (max-width: 640px) { .editorial-integrity__inner, .mission-hero__inner { padding: 0.5rem clamp(12px, 3vw, 16px); } .editorial-integrity__body, .mission-hero__lead { font-size: 0.645rem; line-height: 1.5; } } /* =========================================================================== * Hero (home) * ========================================================================= */ .hero { position: relative; overflow: hidden; background-color: var(--color-bg-secondary); min-height: clamp(360px, 50vw, 540px); max-height: 600px; aspect-ratio: 16 / 9; width: 100%; margin: 0; border-radius: 0; } @media (max-width: 768px) { .hero { aspect-ratio: auto; max-height: none; min-height: 420px; /* Let the box grow to fit the title: flow the content in and pin it to * the bottom with flex instead of absolute positioning. A long title * (e.g. Polish) then extends the hero downward rather than overflowing * its top edge and being clipped by overflow: hidden. */ display: flex; flex-direction: column; justify-content: flex-end; } .hero-content { position: relative; inset: auto; } } .hero-image, .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.78) 100%); } .hero-content { position: absolute; inset: auto 0 0 0; max-width: 900px; margin-inline: auto; padding: clamp(1.5rem, 3vw, 3rem); color: #fff; text-align: center; z-index: 1; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; padding: 0.4rem 0.9rem; border-radius: var(--radius); background-color: rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .hero-title { margin: 0 auto 1rem; font-size: clamp(2rem, 1.4rem + 2.8vw, 3rem); font-weight: 900; line-height: 1.08; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); max-width: 22ch; } .hero-subtitle { margin: 0 auto 1.5rem; font-size: clamp(1rem, 0.85rem + 0.5vw, 1.15rem); line-height: 1.55; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); max-width: 60ch; } /* Cyberpunk "Read more": translucent slab, neon teal edge + glow, uppercase * tracking; hover floods with neon and switches the glow to magenta accent. */ .hero .button, .hero a.button { background-color: rgba(8, 10, 14, 0.5); color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 2px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.82rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); text-shadow: 0 0 8px rgba(0, 255, 204, 0.55); box-shadow: 0 0 14px rgba(0, 255, 204, 0.3), inset 0 0 10px rgba(0, 255, 204, 0.1); } .hero .button:hover, .hero a.button:hover { background-color: var(--color-primary); color: #05080a; border-color: var(--color-accent); text-shadow: none; box-shadow: 0 0 22px rgba(0, 255, 204, 0.6), 0 0 30px rgba(255, 0, 128, 0.45), inset 0 0 12px rgba(255, 255, 255, 0.2); } /* Fallback hero (no cover image) */ .hero.hero-fallback { aspect-ratio: auto; min-height: clamp(220px, 26vw, 320px); background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 55%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 55%), var(--color-bg-elevated); } .hero.hero-fallback .hero-content { position: relative; inset: auto; } .hero.hero-fallback .hero-title, .hero.hero-fallback .hero-subtitle { color: var(--color-text); text-shadow: none; } /* =========================================================================== * Featured (large landscape card on home page 1) * ========================================================================= */ .featured { margin-bottom: clamp(2rem, 3vw, 3rem); } .featured .article-card { border: 1px solid var(--color-border); box-shadow: var(--shadow-md); } @media (min-width: 56rem) { .featured .article-card { flex-direction: row; align-items: stretch; } .featured .card-cover { flex: 1 1 58%; min-height: 22rem; /* Row layout: cover sits on the left, so round the left corners. */ border-radius: var(--radius-md) 0 0 var(--radius-md); } .featured .card-cover img { height: 100%; aspect-ratio: auto; object-fit: cover; } .featured .card-body { flex: 1 1 42%; justify-content: center; padding: 2.5rem; gap: 1rem; } .featured .card-title { font-size: 1.85rem; } } /* =========================================================================== * Section headings (content pages) * ========================================================================= */ .home > h2, .related-articles > h2, .subcategories > h2 { margin-block: 0 1.25rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); } .lead { font-size: 1.1rem; line-height: 1.6; color: var(--color-text-muted); max-width: 60ch; } .empty-state { color: var(--color-text-muted); background-color: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius); padding: 2.5rem 1.5rem; text-align: center; } /* =========================================================================== * Article grid + cards (Angular `app-article-card`) * ========================================================================= */ .article-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 2vw, 1.75rem); } .article-card { position: relative; display: flex; flex-direction: column; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease; } /* Elevated shadow lives on a pseudo-element: hover animates cheap `opacity` instead of repainting a large blurred box-shadow on every frame. The card itself is never promoted to a GPU layer, so its text stays crisp. */ .article-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: -1; } .article-card:hover { transform: translateY(-4px); border-color: var(--color-border-strong); } .article-card:hover::after { opacity: 1; } .article-card .card-cover { display: block; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; background-color: var(--color-surface-2); } .article-card .card-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; /* Image is the only element promoted (no text → no AA blur); the scale is GPU-composited and clipped by the cover's own rounded layer. */ transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; backface-visibility: hidden; } .article-card:hover .card-cover img { transform: scale(1.04); } .article-card .card-body { display: flex; flex-direction: column; gap: 0.65rem; padding: 1.25rem; flex: 1; } .card-category { align-self: flex-start; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); } .card-category:hover { color: var(--color-accent); text-decoration: none; } .card-title { margin: 0; font-size: 1.25rem; line-height: 1.3; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-title a { color: var(--color-text); } .card-title a:hover { color: var(--color-primary); text-decoration: none; } .card-summary { margin: 0; color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.85rem; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--color-border); font-size: 0.82rem; color: var(--color-text-subtle); } .card-readmore { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.25rem; font-weight: 600; font-size: 0.9rem; color: var(--color-primary); } .card-readmore:hover { text-decoration: none; } .card-readmore::after { content: "→"; transition: transform 0.2s ease; } .article-card:hover .card-readmore::after { transform: translateX(4px); } .load-more { display: flex; justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); } /* =========================================================================== * Breadcrumbs * ========================================================================= */ .breadcrumbs { margin-bottom: 1.25rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; list-style: none; margin: 0; padding: 0; } .breadcrumbs li { display: inline-flex; align-items: center; color: var(--color-text-subtle); } .breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: color-mix(in srgb, var(--color-primary) 55%, transparent); } .breadcrumbs a { color: var(--color-text-muted); } .breadcrumbs a:hover { color: var(--color-primary); text-decoration: none; } /* Gentle neon accent on the current crumb - primary tint + a whisper of glow * (much softer than the header/title treatment). */ .breadcrumbs [aria-current="page"] { color: var(--color-primary-dark); font-weight: 600; text-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 28%, transparent); } /* =========================================================================== * Article detail - full-bleed cover, reading-width prose * ========================================================================= */ .article-detail { display: grid; grid-template-columns: [full-start] minmax(0, 1fr) [content-start] min(var(--article-width), 100%) [content-end] minmax(0, 1fr) [full-end]; margin-bottom: 2.5rem; } .article-detail > * { grid-column: content; } .article-header { margin-bottom: 1.5rem; } .article-header h1 { margin: 0 0 1rem; font-size: clamp(2rem, 1.4rem + 2vw, 2.625rem); line-height: 1.12; font-weight: 900; } .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; color: var(--color-text-muted); font-size: 0.92rem; } .article-author { font-weight: 600; color: var(--color-text); } .reading-time { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-text-subtle); } .reading-time::before { content: "⏱"; font-size: 0.95em; } /* Full-bleed hero: break out of the centered .container to the viewport edges. * The grid "full" column is itself centered in the viewport, so left:50% + * margin-left:-50vw lands the box's left edge at x=0 and width:100vw spans the * screen. No rounding / shadow - the image meets the viewport edges flush. */ .article-cover { grid-column: full; position: relative; left: 50%; width: 100vw; max-width: 100vw; margin-left: -50vw; aspect-ratio: 16 / 9; max-height: 34rem; object-fit: cover; border-radius: 0; margin-block: 0.25rem 2.5rem; box-shadow: none; } /* On phones a 16:9 full-width hero gets tall and pushes the title far down; * a 3:2 crop keeps it compact while still spanning edge to edge. */ @media (max-width: 40rem) { .article-cover { aspect-ratio: 3 / 2; max-height: 18rem; } } .article-blocks { font-size: 1.0625rem; line-height: 1.75; } /* =========================================================================== * Content blocks - Angular component styling translated to plain selectors * ========================================================================= */ .block { margin-block: 1.75rem; } /* --- Text block ----------------------------------------------------------- */ .block-text { font-size: 17px; line-height: 1.8; color: var(--color-text); } .block-text > :first-child { margin-top: 0; } .block-text h1, .block-text h2, .block-text h3, .block-text h4, .block-text h5, .block-text h6 { margin: 2rem 0 1rem; font-weight: 700; line-height: 1.3; color: var(--color-text); } .block-text h1 { font-size: 2.25rem; } .block-text h2 { font-size: 1.75rem; } .block-text h3 { font-size: 1.375rem; } .block-text h4 { font-size: 1.125rem; } .block-text h5 { font-size: 1rem; } .block-text h6 { font-size: 0.875rem; } .block-text p { margin: 0 0 1.25rem; } .block-text a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--color-primary) 55%, transparent); } .block-text a:hover { color: var(--color-primary-hover); text-decoration-color: currentColor; } .block-text strong, .block-text b { font-weight: 700; } .block-text em, .block-text i { font-style: italic; } .block-text ul, .block-text ol { margin: 0 0 1.25rem; padding-left: 2rem; } .block-text li { margin-block: 0.4rem; } .block-text blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; border-left: 4px solid var(--color-primary); background-color: var(--color-bg-secondary); font-style: italic; color: var(--color-text-muted); border-radius: 0 var(--radius) var(--radius) 0; } .block-text code { padding: 2px 6px; font-family: var(--font-mono); font-size: 0.9em; background-color: var(--color-code-bg); color: var(--color-code-fg); border-radius: var(--radius-sm); border: 1px solid var(--color-code-border); } .block-text pre { margin: 1.25rem 0; padding: 1rem; background-color: var(--color-code-bg); color: var(--color-code-fg); border: 1px solid var(--color-code-border); border-radius: var(--radius); overflow-x: auto; line-height: 1.55; } .block-text pre code { background: none; border: none; padding: 0; color: inherit; font-size: 0.92em; } .block-text img { width: auto; max-width: 100%; height: auto; border-radius: var(--radius); margin: 1.25rem 0; } .block-text table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; font-size: 0.95rem; } .block-text th, .block-text td { border: 1px solid var(--color-border); padding: 0.6rem 0.85rem; text-align: left; } .block-text th { background-color: var(--color-surface-2); font-weight: 700; } .block-text span[data-math], .block-text .math-fallback { color: var(--color-math-fg); } /* --- Image block --------------------------------------------------------- */ .block-image { margin-inline: 0; } .block-image img { width: 100%; height: auto; border-radius: var(--radius); display: block; } .block-image figcaption, .block-gallery figcaption { margin-top: 0.6rem; color: var(--color-text-subtle); font-size: 0.88rem; text-align: center; font-style: italic; } @media (min-width: 48rem) { .block-image.image-left, .block-image.image-right { max-width: 50%; } .block-image.image-left { float: left; margin: 0.25rem 1.5rem 1rem 0; } .block-image.image-right { float: right; margin: 0.25rem 0 1rem 1.5rem; } .block-image.image-wide { width: 100%; margin-block: 2.5rem; } } /* --- Code block ---------------------------------------------------------- */ .block-code { position: relative; border: 1px solid var(--color-code-border); border-radius: var(--radius); overflow: hidden; background-color: var(--color-code-bg); } .code-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.85rem; background-color: color-mix(in srgb, var(--color-code-bg) 70%, var(--color-surface-2)); border-bottom: 1px solid var(--color-code-border); font-size: 0.82rem; } .code-filename { font-family: var(--font-mono); color: var(--color-text-muted); font-weight: 600; } .code-header button { margin-left: auto; padding: 0.3rem 0.7rem; height: 28px; border: 1px solid var(--color-code-border); border-radius: var(--radius-sm); background-color: transparent; color: var(--color-text-muted); font: inherit; font-size: 0.78rem; font-weight: 600; transition: color 0.18s ease, border-color 0.18s ease; } .code-header button:hover { color: var(--color-primary); border-color: var(--color-primary); } .block-code pre { margin: 0; padding: 1rem 1.15rem; border: none; border-radius: 0; background-color: var(--color-code-bg); color: var(--color-code-fg); overflow-x: auto; line-height: 1.55; font-size: 0.875rem; } /* Syntax highlighting tokens (CodeHighlighter / T024) */ .tm-comment { color: #8b949e; font-style: italic; } .tm-keyword { color: #ff7b72; } .tm-operator { color: #ff7b72; } .tm-string { color: #a5d6ff; } .tm-number { color: #79c0ff; } .tm-constant { color: #79c0ff; } .tm-function { color: #d2a8ff; } .tm-type { color: #ffa657; } .tm-tag { color: #7ee787; } .tm-attr { color: #79c0ff; } .tm-variable { color: #ffa657; } [data-theme="light"] .tm-comment { color: #6e7781; } [data-theme="light"] .tm-keyword { color: #cf222e; } [data-theme="light"] .tm-operator { color: #0550ae; } [data-theme="light"] .tm-string { color: #0a3069; } [data-theme="light"] .tm-number { color: #0550ae; } [data-theme="light"] .tm-constant { color: #0550ae; } [data-theme="light"] .tm-function { color: #8250df; } [data-theme="light"] .tm-type { color: #953800; } [data-theme="light"] .tm-tag { color: #116329; } [data-theme="light"] .tm-attr { color: #0550ae; } [data-theme="light"] .tm-variable { color: #e36209; } /* --- CTA block (vibrant gradient, Angular parity) ------------------------- */ .block-cta { padding: clamp(1.75rem, 3vw, 2.5rem); border-radius: var(--radius-md); text-align: center; color: #fff; background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: var(--shadow-md); } .block-cta.cta-secondary { background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); } .block-cta.cta-accent { background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); } .block-cta .cta-title { margin: 0 0 0.5rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); font-weight: 900; color: #fff; } .block-cta .cta-description { margin: 0 auto 1.4rem; max-width: 50ch; color: rgba(255, 255, 255, 0.95); font-size: 1rem; } .block-cta .cta-button.button, .block-cta a.cta-button { background-color: #fff; color: #1a1a1a; box-shadow: var(--shadow-md); } .block-cta .cta-button.button:hover, .block-cta a.cta-button:hover { background-color: var(--color-primary); color: var(--color-text-inverse); } /* --- Gallery ------------------------------------------------------------- */ /* Masonry layout via CSS columns: images keep their natural aspect ratio and * flow into balanced columns with no cropping and no row-alignment gaps. */ .block-gallery { column-width: 220px; column-gap: 1rem; } .gallery-item { margin: 0 0 1rem; position: relative; break-inside: avoid; } .gallery-item a { display: block; overflow: hidden; border-radius: var(--radius); } .gallery-item img { width: 100%; height: auto; display: block; transition: transform 0.35s ease; } .gallery-item a:hover img { transform: scale(1.06); } /* --- Quote (purple/magenta gradient, white italic, Angular parity) ------- */ .block-quote { margin-inline: 0; padding: clamp(1.5rem, 2.5vw, 2.25rem); border-radius: var(--radius-md); background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; box-shadow: var(--shadow-md); } .block-quote blockquote { margin: 0 0 0.85rem; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); line-height: 1.45; font-style: italic; font-weight: 500; color: #fff; } .block-quote blockquote::before { content: "\201C"; margin-right: 0.15em; opacity: 0.85; } .block-quote blockquote::after { content: "\201D"; margin-left: 0.15em; opacity: 0.85; } .block-quote figcaption { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.92); font-style: normal; } .quote-author { font-weight: 700; color: #fff; } .quote-author::before { content: "- "; } .quote-source { font-size: 0.825rem; opacity: 0.85; font-style: italic; } .quote-author + .quote-source::before { content: ""; } /* --- Math ---------------------------------------------------------------- */ .block-math { overflow-x: auto; padding-block: 0.5rem; color: var(--color-math-fg); } .math-center { text-align: center; } .math-left { text-align: left; } .math-right { text-align: right; } /* --- Video --------------------------------------------------------------- */ .block-video .video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); background-color: #000; } .block-video .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* --- Product card -------------------------------------------------------- */ .block-product-card { display: flex; flex-direction: column; gap: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); box-shadow: var(--shadow-sm); border-top: 4px solid var(--color-primary); } .product-variant-fableship { border-top-color: #f59e0b; } .product-variant-codeenable { border-top-color: var(--color-accent); } .product-variant-generic { border-top-color: var(--color-primary); } .product-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .product-body { display: flex; flex-direction: column; gap: 0.75rem; padding: clamp(1.25rem, 2vw, 1.75rem); } .product-title { margin: 0; font-size: 1.4rem; font-weight: 900; } .product-description { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; } .product-price { margin: 0; font-size: 1.5rem; font-weight: 900; color: var(--color-primary); } .product-cta { align-self: flex-start; margin-top: 0.4rem; } @media (min-width: 40rem) { .block-product-card { flex-direction: row; align-items: stretch; border-top: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); } .product-variant-fableship { border-left-color: #f59e0b; } .product-variant-codeenable { border-left-color: var(--color-accent); } .product-variant-generic { border-left-color: var(--color-primary); } .product-image { flex: 0 0 40%; aspect-ratio: auto; object-fit: cover; } .product-body { justify-content: center; } } /* --- Ad block (slice 019: reference-only, single clickable surface) ------- */ .block-ad { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--color-border); background-color: var(--color-surface); box-shadow: var(--shadow-sm); color: var(--color-text); text-decoration: none; transition: box-shadow 0.18s ease, transform 0.18s ease; } .block-ad:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); /* The whole ad is one , so the global a:hover underline would otherwise underline the copy. */ text-decoration: none; } /* Transparency label (FR-022 single surface preserved: it lives inside the one ). Sits above the * over-image scrim (z-index) with its own AA-contrast chip so it stays legible on any background. */ .ad-label { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; padding: 0.2rem 0.6rem; /* Cyberpunk: notched (chamfered) corners instead of a rounded chip. */ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); background-color: rgba(5, 8, 16, 0.82); border: 1px solid #36f9f6; color: #36f9f6; font-family: "Cascadia Code", "JetBrains Mono", Consolas, ui-monospace, monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; /* Neon glow: cyan halo on the border + a magenta accent for the classic two-tone cyberpunk look. */ box-shadow: 0 0 6px rgba(54, 249, 246, 0.7), inset 0 0 4px rgba(255, 45, 213, 0.35); text-shadow: 0 0 6px rgba(54, 249, 246, 0.85); pointer-events: none; } /* A solid, dark, AA base colour is always painted behind the image so a missing or failed * background never breaks legibility and never shows a broken-image artifact (degraded state). */ .ad-media { display: block; background-color: #12161d; background-position: center; background-size: cover; background-repeat: no-repeat; } /* Over-image: copy sits on the image behind a mandatory, non-disableable contrast scrim. The text * token is white (#fff), which is known-AA against the scrim regardless of the underlying image. */ .ad-over-image .ad-media { position: relative; display: flex; align-items: flex-end; /* Height reduced ~20% vs the original clamp(180px, 28vw, 320px) — the ad was taking too much space. */ min-height: clamp(144px, 22.4vw, 256px); } .ad-over-image .ad-scrim { position: absolute; inset: 0; /* Single, transparent, uniform overlay across the WHOLE ad area. This is the only dark layer now — * the per-content backing band was removed so the overlay no longer stops partway up the image. * White copy stays AA-legible via this scrim plus the text-shadow on .ad-content below. */ background-color: rgba(0, 0, 0, 0.4); pointer-events: none; } .ad-over-image .ad-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.5rem; width: 100%; padding: clamp(1.25rem, 3vw, 2rem); color: #ffffff; /* No local backing band here anymore — the uniform .ad-scrim covers the whole ad. The text-shadow * stays as the per-line defence so each line of white copy remains AA-legible on any background. */ text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); } /* Force white on every descendant: global element rules (h1..h6, p) target these tags directly and would * otherwise win over the inherited white, painting dark copy onto the image. The descendant selector * (0,2,0) beats those element rules (0,0,1). */ .ad-over-image .ad-heading, .ad-over-image .ad-body, .ad-over-image .ad-content * { color: #ffffff; } /* Below-image: image on top (16:9), copy stacked beneath on the card surface. */ .ad-below-image .ad-media { width: 100%; /* Height reduced ~20% vs the original 16 / 9 — the ad was taking too much space. */ aspect-ratio: 20 / 9; } .ad-below-image .ad-content { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(1.25rem, 2vw, 1.75rem); } .ad-heading { display: block; font-size: 1.4rem; font-weight: 900; line-height: 1.25; } .ad-body { font-size: 0.95rem; line-height: 1.55; } .ad-body > :first-child { margin-top: 0; } .ad-body > :last-child { margin-bottom: 0; } .ad-below-image .ad-body { color: var(--color-text-muted); } /* =========================================================================== * Medical disclaimer (article footer, between blocks and tags) * ========================================================================= */ .article-disclaimer { margin-top: 2.5rem; padding: 1.25rem 1.5rem; border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent); border-left: 4px solid var(--color-warning); border-radius: var(--radius); background-color: color-mix(in srgb, var(--color-warning) 10%, transparent); color: var(--color-text); font-size: 0.92rem; line-height: 1.6; } .article-disclaimer strong { display: block; margin-bottom: 0.3rem; color: var(--color-text); } /* =========================================================================== * Article tags + share * ========================================================================= */ .article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } .article-tags .tags-heading { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-subtle); margin-right: 0.25rem; } .tag-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.85rem; border-radius: var(--radius-pill); background-color: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.84rem; font-weight: 500; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .tag-chip::before { content: "#"; color: var(--color-primary); font-weight: 700; } .tag-chip:hover { background-color: color-mix(in srgb, var(--color-primary) 18%, transparent); border-color: var(--color-primary); color: var(--color-text); text-decoration: none; } .article-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } .share-heading { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-subtle); margin-right: 0.25rem; } .article-share a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background-color: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-muted); transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .article-share a:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); transform: translateY(-2px); text-decoration: none; } .article-share svg { width: 18px; height: 18px; } /* =========================================================================== * Related articles * ========================================================================= */ .related-articles { margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-top: clamp(2rem, 3vw, 2.5rem); border-top: 1px solid var(--color-border); } /* =========================================================================== * Codeenable reference (above footer on every page) * ========================================================================= */ .codeenable-reference { margin-top: clamp(3rem, 5vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-lg); background: radial-gradient(60% 100% at 0% 0%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 60%), radial-gradient(60% 100% at 100% 100%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 60%), var(--color-bg-elevated); border: 1px solid var(--color-border); } .codeenable-reference__inner { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; max-width: var(--max-width); margin-inline: auto; } @media (min-width: 56rem) { .codeenable-reference__inner { grid-template-columns: 1.4fr 1fr; gap: 2.5rem; } } .codeenable-reference__eyebrow { display: inline-block; margin-bottom: 0.6rem; padding: 0.3rem 0.75rem; border-radius: var(--radius); background-color: color-mix(in srgb, var(--color-primary) 18%, transparent); color: var(--color-primary); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .codeenable-reference__title { margin: 0 0 0.5rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); font-weight: 800; } .codeenable-reference__title strong { color: var(--color-primary); } .codeenable-reference__body { margin: 0; color: var(--color-text-muted); font-size: 1rem; line-height: 1.6; } .codeenable-reference__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-start; } @media (min-width: 56rem) { .codeenable-reference__cta { justify-content: flex-end; } } /* =========================================================================== * Editorial / about / contact / legal / accessibility prose pages * ========================================================================= */ .about-page, .contact-page, .accessibility-page, .legal-page, .legal-index { max-width: var(--reading-width); margin-inline: auto; } /* Category & search are card-grid listings, not prose - they span the full * .container width (like the "Related articles" grid) rather than the narrow * reading measure. */ .category, .search { max-width: var(--max-width); margin-inline: auto; } .about-page > h1, .contact-page > h1, .accessibility-page > h1, .legal-page > h1, .legal-index > h1, .search > h1, .category > h1 { margin-bottom: 1rem; } .editorial-mission, .editorial-pledge, .publisher-info, .contact-email { margin-block: 2rem; } .editorial-pledge p { margin: 0 0 1rem; } .editorial-mission h3 { margin-top: 2rem; } .editorial-mission h4 { margin-block: 1.5rem 0.4rem; font-size: 1.05rem; color: var(--color-primary); } .publisher-info, .contact-email { padding: 1.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); background-color: var(--color-surface); } .contact-email a[href^="mailto:"] { font-size: 1.1rem; font-weight: 700; } .response-time { color: var(--color-text-subtle); font-size: 0.9rem; } .accessibility-page ul, .legal-body ul, .legal-body ol { padding-left: 1.4rem; } .legal-updated { color: var(--color-text-subtle); font-size: 0.92rem; margin-bottom: 2rem; } .legal-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; } .legal-list li a { display: block; padding: 1rem 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius); background-color: var(--color-surface); color: var(--color-text); font-weight: 600; transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .legal-list li a:hover { border-color: var(--color-primary); transform: translateX(4px); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--color-primary); } .category-description { font-size: 1.1rem; color: var(--color-text-muted); margin-bottom: 2rem; } .subcategories ul { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin-block: 1rem 2rem; } .subcategories li a { display: inline-flex; padding: 0.5rem 1rem; border-radius: var(--radius-pill); background-color: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); font-size: 0.92rem; } .subcategories li a:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; } /* =========================================================================== * Cyberpunk titles - neon cyan -> magenta gradient on article & category titles. * Theme-aware via --title-grad-* / --title-glow tokens. Placed after the base * card/category rules so the equal-specificity .card-title selectors win. * ========================================================================= */ .article-header h1, .category > h1, .card-title a { background-image: linear-gradient(110deg, var(--title-grad-from) 10%, var(--title-grad-to) 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Solid fallback for engines without background-clip:text support. */ color: var(--title-grad-to); text-shadow: var(--title-glow); } /* Reverse the sweep on card-title hover so the link still gives feedback (the * old solid color rule can't show through the transparent fill). */ .card-title a:hover { background-image: linear-gradient(110deg, var(--title-grad-to) 10%, var(--title-grad-from) 90%); -webkit-text-fill-color: transparent; color: var(--title-grad-from); } /* Selection stays readable over gradient text (transparent fill hides the * default highlight contrast otherwise). */ .article-header h1::selection, .category > h1::selection, .card-title a::selection { -webkit-text-fill-color: var(--color-text); color: var(--color-text); background: var(--color-primary); } /* Search page form */ .search-form { display: flex; gap: 0.6rem; margin-block: 1.5rem 2rem; } .search-form input { flex: 1; min-height: 48px; padding: 0.6rem 1.1rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius); background-color: var(--color-surface); color: var(--color-text); font: inherit; } .search-form input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--ring); } .search-form button { padding: 0.6rem 1.6rem; border: none; border-radius: var(--radius); background-color: var(--color-primary); color: var(--color-text-inverse); font: inherit; font-weight: 700; transition: transform 0.18s ease, background-color 0.18s ease; } .search-form button:hover { background-color: var(--color-primary-hover); transform: translateY(-2px); } .search-count { color: var(--color-text-muted); margin-bottom: 1.5rem; } /* =========================================================================== * Footer - Angular SSR parity. Class names match the SSR sibling's BEM * (footer-brand__heading, footer-info__heading, footer-disclaimer__icon, ...) * so a diff between the two DOMs stays trivial. Four-column grid that collapses * to two then one; full-width medical disclaimer; copyright + cookie-settings * row; brown-gradient Codeenable credit strip. * ========================================================================= */ .site-footer { flex-shrink: 0; border-top: 2px solid var(--color-primary); background-color: var(--color-bg-elevated); padding-block: clamp(2rem, 4vw, 2.5rem) 0; } .footer-content { max-width: var(--max-width); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); display: grid; grid-template-columns: minmax(180px, 1.2fr) repeat(2, minmax(140px, 1fr)) auto; align-items: start; gap: 32px; } @media (max-width: 900px) { .footer-content { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 560px) { .footer-content { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 24px; } } /* Brand column */ .footer-brand { display: flex; flex-direction: column; gap: 4px; } .footer-brand__heading { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); text-decoration: none; } .footer-brand__heading:hover { color: var(--color-text); text-decoration: none; } .footer-brand__mark { width: 22px; height: 22px; flex: 0 0 auto; display: block; } .footer-title { font-size: 1.125rem; font-weight: 900; color: var(--color-text); } .footer-tagline { font-size: 0.8125rem; color: var(--color-text-muted); max-width: 32ch; } .footer-brand__cta { margin-top: 6px; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; font-size: 0.8125rem; font-weight: 600; color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; } .footer-brand__cta:hover, .footer-brand__cta:focus-visible { color: var(--color-primary-hover); } /* Info + legal columns share a tight vertical list of links with a small heading. */ .footer-info, .footer-legal { display: flex; flex-direction: column; gap: 10px; } .footer-info__heading, .footer-legal__heading { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .footer-info__list, .footer-legal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .footer-info__list a, .footer-legal-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 4px; color: var(--color-text-muted); font-size: 0.8125rem; text-decoration: none; transition: color 0.2s ease; } .footer-info__list a:hover, .footer-info__list a:focus-visible, .footer-legal-list a:hover, .footer-legal-list a:focus-visible { color: var(--color-text); } .footer-legal-see-all { font-weight: 600; } @media (max-width: 560px) { .footer-info__list, .footer-legal-list { align-items: center; } .footer-brand__cta { align-self: center; } } /* Medical disclaimer banner spans the whole footer width with a shield icon. */ .footer-disclaimer { max-width: var(--max-width); margin: 24px auto 0; padding: 16px clamp(20px, 4vw, 24px); display: flex; align-items: flex-start; gap: 14px; background: color-mix(in srgb, var(--color-warning) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent); border-left: 4px solid var(--color-warning); border-radius: 6px; } @media (max-width: 560px) { .footer-disclaimer { flex-direction: column; align-items: center; text-align: center; } } .footer-disclaimer__icon { flex-shrink: 0; width: 24px; height: 24px; color: var(--color-warning); margin-top: 2px; } .footer-disclaimer__body { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--color-text); } .footer-disclaimer__label { display: inline; margin-right: 6px; font-weight: 700; color: var(--color-warning); text-transform: uppercase; letter-spacing: 0.03em; } /* Bottom row: copyright + cookie settings */ .footer-bottom { max-width: var(--max-width); margin: 0 auto; padding: 16px clamp(20px, 4vw, 48px); border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } @media (max-width: 560px) { .footer-bottom { justify-content: center; text-align: center; } } .footer-copy { font-size: 0.8125rem; color: var(--color-text-muted); } .footer-bottom__consent-link { font-size: 0.8125rem; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; } .footer-bottom__consent-link:hover { color: var(--color-primary); } /* Codeenable credit row - cyberpunk neon strip: cyan/magenta glow on a near-black * band (stays dark in both themes - neon reads best on dark) + an animated * cyan->white->magenta shimmer sweep across the link. */ .footer-credit { margin-top: 0; padding: 12px clamp(20px, 4vw, 48px); border-top: 1px solid color-mix(in srgb, #00ffcc 30%, transparent); background: radial-gradient(ellipse at 25% 50%, rgba(0, 255, 204, 0.10) 0%, transparent 60%), radial-gradient(ellipse at 78% 50%, rgba(255, 0, 128, 0.10) 0%, transparent 60%), #08090c; text-align: center; } .footer-credit-text { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; letter-spacing: 0.04em; color: #7fd8c8; } .footer-credit-text a { position: relative; font-weight: 700; text-decoration: none; background-image: linear-gradient( 100deg, #00ffcc 0%, #00ffcc 32%, #c8fff4 46%, #ffffff 50%, #ffb3d9 54%, #ff0080 68%, #ff0080 100% ); background-size: 250% 100%; background-position: 100% 0; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; transition: background-position 1.1s ease; } .footer-credit-text a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: linear-gradient(90deg, transparent, #00ffcc 35%, #ff0080 65%, transparent); transform: scaleX(0); transform-origin: center; transition: transform 0.3s ease; } .footer-credit-text a:hover, .footer-credit-text a:focus-visible { background-position: 0% 0; text-decoration: none; } .footer-credit-text a:hover::after, .footer-credit-text a:focus-visible::after { transform: scaleX(1); } .footer-credit-icon { flex-shrink: 0; width: 12px; height: 12px; color: #00ffcc; filter: drop-shadow(0 0 5px rgba(0, 255, 204, 0.6)); transition: transform 0.4s ease; } .footer-credit-text:hover .footer-credit-icon { transform: rotate(72deg) scale(1.15); } @media (prefers-reduced-motion: reduce) { .footer-credit-text a { transition: none; background-image: none; background-clip: initial; -webkit-background-clip: initial; color: #00ffcc; -webkit-text-fill-color: #00ffcc; } .footer-credit-text a::after, .footer-credit-icon { display: none; transition: none; } } /* Social links column inside the footer grid */ .social-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } @media (max-width: 560px) { .social-links { align-items: center; } } .social-links-heading { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .social-links-list { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; } .social-links-item { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--color-text-muted); border: 1px solid var(--color-border-strong); border-radius: 50%; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .social-links-item:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); transform: translateY(-2px); } .social-links-item svg { width: 16px; height: 16px; } /* =========================================================================== * Cookie consent * ========================================================================= */ .consent-banner { position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 200; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; max-width: var(--max-width); margin-inline: auto; padding: 1.25rem 1.5rem; background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-xl); } .consent-banner[hidden] { display: none; } /* A returning visitor with a valid consent cookie: hide the banner before paint. The state attribute is set client-side (pre-paint inline script) because the page is output-cached cookie-agnostically. */ [data-consent-state="set"] .consent-banner { display: none; } .consent-banner-body { flex: 1 1 22rem; } .consent-banner-title { margin: 0 0 0.35rem; font-size: 1.1rem; } .consent-banner-body p { margin: 0; color: var(--color-text-muted); font-size: 0.92rem; } .consent-banner-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .consent-panel { position: fixed; inset: 0; z-index: 210; margin: auto; max-width: 34rem; max-height: 90vh; overflow: auto; padding: 1.75rem; background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-xl); } .consent-panel[hidden] { display: none; } .consent-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; } .consent-panel-header h2 { margin: 0; } .consent-panel-close { width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: 50%; background-color: transparent; color: var(--color-text); font-size: 1.4rem; line-height: 1; } .consent-panel-close:hover { border-color: var(--color-primary); color: var(--color-primary); } .consent-categories { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .consent-category { padding: 1rem 1.15rem; border: 1px solid var(--color-border); border-radius: var(--radius); background-color: var(--color-bg); } .consent-category label { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; cursor: pointer; } .consent-category-state { margin-left: auto; font-size: 0.8rem; font-weight: 500; color: var(--color-text-subtle); } .consent-category-description { margin: 0.5rem 0 0; color: var(--color-text-muted); font-size: 0.88rem; } .consent-panel-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* =========================================================================== * Motion preferences * ========================================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* =========================================================================== * Responsive - tablet & up * ========================================================================= */ @media (min-width: 40rem) { .article-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64rem) { .article-grid { grid-template-columns: repeat(3, 1fr); } .related-articles .article-grid { grid-template-columns: repeat(3, 1fr); } }