/* Theme Name: Automotion Test 2 Theme URI: https://github.com/joni/automotion-test2 Author: Joni Author URI: https://github.com/joni Description: A Dieline-inspired editorial test theme. Dark-by-default, massive wordmark masthead, full-width split-row article layout, light/dark scheme toggle. Tokens-only design system; reuses the Hind + Poppins font pair from the active Automotion theme. Sibling test theme — not for production. Version: 0.2.0 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 7.4 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: automotion-test2 Tags: block-theme, full-site-editing, accessibility-ready, one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template */ /* --------------------------------------------------------------------------- * Color scheme — DARK is default, light is the opt-in override * * theme.json carries the dark palette as concrete hex values. The light * scheme overrides --wp--preset--color--* directly when [data-theme="light"] * is set on :root. * ------------------------------------------------------------------------- */ :root { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; --wp--preset--color--base: #ffffff; --wp--preset--color--contrast: #1a1a1a; --wp--preset--color--secondary: #e6e6e6; --wp--preset--color--accent: #c8102e; --wp--preset--color--muted: #6b6b6b; } /* Smooth scheme transitions on the elements that flip palette */ body, .wp-block-template-part, .has-base-background-color, .has-contrast-color, .has-contrast-background-color, .has-secondary-background-color { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* --------------------------------------------------------------------------- * Horizontal-overflow safety net * * Anything wider than the viewport — a stray with explicit column * widths, an iframe embed, an image with width attribute — would otherwise * push the page into a horizontal scroll on mobile. `overflow-x: clip` on * stops that without creating a scroll container (which would break * `position: sticky` on the header — `hidden` would). * * Specific overflow cases (spec tables, brand mastheads, etc.) are handled * with proper inline scrolling at their own selectors below; this is just * the last-resort guard for content the editor pastes in. * ------------------------------------------------------------------------- */ html { overflow-x: clip; } /* Images and videos in post content never escape the column */ .wp-block-post-content img, .wp-block-post-content video, .wp-block-post-content iframe { max-width: 100%; height: auto; } /* --------------------------------------------------------------------------- * Site logo (currentColor SVG) — Dieline-style HUGE wordmark masthead * * Logo lives at the top of the page in its own full-width container, * spanning ~70-90% of the viewport. Heavy visual presence is the point. * ------------------------------------------------------------------------- */ .site-masthead { padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30); } .site-logo, .site-logo a { display: block; color: var(--wp--preset--color--contrast); line-height: 0; } .site-logo svg { display: block; width: 100%; max-width: 100%; height: auto; } .site-logo svg path { fill: currentColor; } @media (max-width: 767px) { /* Hide the large brand masthead on mobile so the nav menu starts at the * top of the viewport. Branding still surfaces through the Valikko * overlay menu and the sticky compact nav (minilogo) once scrolled. */ .site-masthead { display: none; } .site-logo svg { max-height: 56px; width: auto; max-width: 100%; margin-inline: auto; } } /* --------------------------------------------------------------------------- * Header nav — STICKY on scroll. The masthead scrolls away naturally; * only this nav row sticks to the top of the viewport. * * IMPORTANT: WordPress wraps the header template-part in an outer *
element. That wrapper is only as * tall as masthead+nav (~347px) and forms the containing block for the * sticky child — meaning sticky cannot escape the wrapper. Once the wrapper * scrolls off, the sticky goes with it. * * Fix: collapse the wrapper out of the box tree with `display: contents`. * Its children (masthead + site-header) now resolve their containing block * against `.wp-site-blocks`, which spans the full document height, so * sticky behaves correctly. * * Static preview (preview/index-desktop.html) has no template-part wrapper, * which is why this bug only appeared on the deployed WP site. * ------------------------------------------------------------------------- */ header.wp-block-template-part { display: contents; } .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--wp--preset--color--base); padding-top: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--30); border-bottom: 1px solid var(--wp--preset--color--secondary); } .admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } } /* Menubar * Desktop ≥768px: Uutiset · Suositut · Haku · [Kampanjat] · [Valikko] * Mobile <768px: Suositut · [search-icon] · [Valikko] * Mobile scrolled: [logo] ......................... [hamburger] */ .site-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40); flex-wrap: wrap; font-family: var(--wp--preset--font-family--heading); font-size: 1.875rem; /* 30px */ font-weight: 500; } .site-nav__link { color: var(--wp--preset--color--contrast); text-decoration: none; padding: 0.5rem 0; transition: color 0.15s ease; white-space: nowrap; } .site-nav__link:hover { color: var(--wp--preset--color--accent); } .site-nav__pill { display: inline-flex; align-items: center; border: 1px solid var(--wp--preset--color--secondary); border-radius: 999px; padding: 0.5rem 1.25rem; background: transparent; color: var(--wp--preset--color--contrast); font-family: inherit; font-size: inherit; font-weight: inherit; text-decoration: none; text-transform: none; letter-spacing: 0; cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .site-nav__pill:hover { background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--contrast); } .site-nav__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 0; color: var(--wp--preset--color--contrast); cursor: pointer; padding: 0; } .site-nav__icon svg { width: 22px; height: 22px; } /* Default desktop: show desktop items, hide mobile-only icon, hide compact bar */ .site-nav [data-show="mobile"] { display: none; } .site-nav--compact { display: none; } /* Zero out WP's auto-injected sibling BLOCK margin on .site-header children. * The constrained layout container injects `margin-block-start: * var(--wp--style--block-gap)` on every non-first child, which was pushing * .site-nav--compact down ~24px from the top of the sticky bar when the * full nav was hidden — leaving a gap between the admin bar and the mini- * logo on mobile sticky-scrolled state. * * IMPORTANT: only zero block margins (top/bottom). The constrained layout * also injects `margin-inline: auto` to center children at the wide-size * (1640px). Zeroing margin-inline breaks horizontal alignment — the nav * extends to the padding edge (x=16) instead of the constrained-content * edge (x=26), so "Uutiset" overflows past the masthead logo from the left. * Block-only zeroing preserves the auto-inline-margin centering. */ .site-header > .site-nav, .site-header > .reading-progress, .site-header > .scroll-to-top { margin-top: 0 !important; margin-bottom: 0 !important; } @media (max-width: 767px) { /* Mobile (default state): hide desktop-only items, show search icon */ .site-nav [data-show="desktop"] { display: none; } .site-nav [data-show="mobile"] { display: inline-flex; } .site-nav { font-size: 1.125rem; gap: var(--wp--preset--spacing--30); } .site-nav__pill { padding: 0.4rem 0.9rem; font-size: 1rem; } } /* --------------------------------------------------------------------------- * Sticky-scrolled MOBILE state — full nav hides, compact bar shows * Logo (left) · Hamburger (right) * Triggered by body.is-scrolled class set by header-scroll.js * ------------------------------------------------------------------------- */ .site-nav__minilogo { display: inline-flex; align-items: center; color: var(--wp--preset--color--contrast); line-height: 0; } .site-nav__minilogo svg { width: auto; height: 28px; display: block; } .site-nav__minilogo svg path { fill: currentColor; } .site-nav__hamburger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 0; color: var(--wp--preset--color--contrast); cursor: pointer; padding: 0; } .site-nav__hamburger svg { width: 24px; height: 24px; } @media (max-width: 767px) { /* On mobile the compact nav (Automotion minilogo + hamburger) is the * primary header — visible from the landing, not just when scrolled. * The full nav with link pills is desktop-only. */ .site-nav--full { display: none; } .site-nav--compact { display: flex; align-items: center; justify-content: space-between; width: 100%; } } /* Account / utility pills (sign up, log in, search) on the right of nav */ .nav-account { display: inline-flex; gap: var(--wp--preset--spacing--20); align-items: center; } .nav-account a, .nav-account button { border: 1px solid var(--wp--preset--color--secondary); border-radius: 999px; padding: 0.5rem 1rem; font-family: var(--wp--preset--font-family--heading); font-weight: 500; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast); background: transparent; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease; } .nav-account a:hover, .nav-account button:hover { background-color: var(--wp--preset--color--secondary); } .nav-account .signup { background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--contrast); } .nav-account .signup:hover { background-color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); } /* Search icon button */ .nav-account .search-icon { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .nav-account .search-icon svg { width: 18px; height: 18px; } /* Hamburger icon (right of account pills) */ .nav-account .hamburger { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; } .nav-account .hamburger span { display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } /* --------------------------------------------------------------------------- * Theme scheme toggle (sun/moon) * ------------------------------------------------------------------------- */ .theme-toggle { background: transparent; border: 1px solid var(--wp--preset--color--secondary); border-radius: 999px; cursor: pointer; padding: 0.5rem; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--wp--preset--color--contrast); transition: background-color 0.15s ease; } .theme-toggle:hover { background-color: var(--wp--preset--color--secondary); } .theme-toggle svg { width: 16px; height: 16px; display: block; } .theme-toggle .theme-toggle__sun { display: block; } .theme-toggle .theme-toggle__moon { display: none; } :root[data-theme="light"] .theme-toggle .theme-toggle__sun { display: none; } :root[data-theme="light"] .theme-toggle .theme-toggle__moon { display: block; } /* --------------------------------------------------------------------------- * Site overlay — FULL-SCREEN menu, opened by [data-action="open-menu"] * * Layout: * ┌──────────────────────────────────────────┐ * │ [logo SVG] [SULJE ✕] │ ← sticky bar (always visible) * ├──────────────────────────────────────────┤ * │ │ * │ Etusivu │ ← centered scrollable list * │ Uutiset │ * │ Luetuimmat │ * │ … │ * │ │ * └──────────────────────────────────────────┘ * * The bar uses position: sticky so it stays pinned at the top while the * link list scrolls (when there are more items than fit). The whole * overlay is position: fixed so it sits above everything else regardless * of where it lives in the DOM tree. * * Body lock when overlay open uses overflow:hidden + padding-right compensation * (see the .overlay-open rule below) to avoid the layout shifting left when * the page scrollbar disappears. We do NOT set scrollbar-gutter:stable on * html: in Chrome that style forces position:fixed elements to use the * gutter-reduced width as their containing block, leaving a sliver of the * underlying page visible at the right edge of the overlay. * ------------------------------------------------------------------------- */ .site-overlay { /* Stretch to all four edges of the viewport via inset:0. Don't set * width/height — the containing block for a fixed-positioned element * is the viewport, and Chrome on Windows reports `100vw` as the body * content width (excluding scrollbar-gutter), so explicit `width: 100vw` * leaves a sliver of the underlying page visible on the right. The * inset trick uses the actual viewport box. */ position: fixed; inset: 0; z-index: 200; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; overflow-y: auto; overscroll-behavior: contain; } .site-overlay[hidden] { display: none; } .site-overlay.is-open { opacity: 1; visibility: visible; } /* Sticky top bar — logo left, close right. Stays pinned while menu scrolls. */ .site-overlay__bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: clamp(1rem, 2.2vw, 1.75rem) clamp(1.25rem, 4vw, 3rem); background: var(--wp--preset--color--base); } .admin-bar .site-overlay__bar { padding-top: calc(clamp(1rem, 2.2vw, 1.75rem) + 32px); } @media screen and (max-width: 782px) { .admin-bar .site-overlay__bar { padding-top: calc(clamp(1rem, 2.2vw, 1.75rem) + 46px); } } .site-overlay__brand { display: inline-flex; align-items: center; color: var(--wp--preset--color--contrast); text-decoration: none; line-height: 0; transition: color 0.15s ease; } .site-overlay__brand:hover { color: var(--wp--preset--color--accent); } .site-overlay__brand svg { width: auto; height: 28px; display: block; } .site-overlay__brand svg path { fill: currentColor; } .site-overlay__close { display: inline-flex; align-items: center; gap: 0.6rem; background: transparent; border: 0; color: var(--wp--preset--color--contrast); cursor: pointer; padding: 0.5rem; margin: -0.5rem; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--eyebrow); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.15s ease; } .site-overlay__close:hover { color: var(--wp--preset--color--accent); } .site-overlay__close svg { width: 16px; height: 16px; } .site-overlay__close-label { display: inline-block; } /* Scroll region — fills remaining viewport, centered nav within. */ .site-overlay__scroll { min-height: calc(100vh - 5rem); min-height: calc(100dvh - 5rem); display: flex; align-items: center; justify-content: center; } .admin-bar .site-overlay__scroll { min-height: calc(100vh - 5rem - 32px); min-height: calc(100dvh - 5rem - 32px); } @media screen and (max-width: 782px) { .admin-bar .site-overlay__scroll { min-height: calc(100vh - 5rem - 46px); min-height: calc(100dvh - 5rem - 46px); } } /* Centered nav — single list of all menu items, font 600. */ .site-overlay__nav { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.4rem, 1.5vh, 1.25rem); padding: clamp(2rem, 6vh, 4rem) clamp(1.25rem, 4vw, 3rem); text-align: center; width: 100%; } .site-overlay__link { font-family: var(--wp--preset--font-family--heading); font-size: clamp(2.25rem, 7vw, 5.5rem); font-weight: 600; color: var(--wp--preset--color--contrast); text-decoration: none; letter-spacing: -0.025em; line-height: 1.05; padding: 0.05em 0; transition: color 0.15s ease; } .site-overlay__link:hover { color: var(--wp--preset--color--accent); } /* Body lock when overlay open. Use scrollbar-gutter: stable on html * (above) to keep the page width identical so there's no layout shift * when the body scrollbar disappears. */ body.overlay-open { overflow: hidden; } /* --------------------------------------------------------------------------- * Reading progress bar — sits at the BOTTOM EDGE of the sticky nav (under it), * spanning the full viewport width. Element lives inside .site-header so it * positions absolute against the sticky nav and travels with it. No admin-bar * offset needed (sticky parent already handles that). * Only rendered on single articles via .single-post body class. * Pure CSS via scroll-driven animations on supporting browsers. * ------------------------------------------------------------------------- */ .reading-progress { display: none; } body.single-post .reading-progress { display: block; position: absolute; /* Sit flush below the nav's bottom border. Using `bottom: -3px` instead of * `top: 100%` because `top:100%` resolves against the parent's content * box (not padding box) on elements with `has-global-padding`, causing a * ~24px gap. `bottom: -3px` (where 3px = bar height) places the bar's top * edge exactly at the parent's bottom border. */ top: auto; bottom: -3px; left: 0; right: 0; height: 3px; background: var(--wp--preset--color--accent); z-index: 150; transform-origin: left center; transform: scaleX(0); pointer-events: none; } @supports (animation-timeline: scroll()) { body.single-post .reading-progress { animation: reading-progress-fill linear; animation-timeline: scroll(root); } } @keyframes reading-progress-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* --------------------------------------------------------------------------- * Scroll-to-top button — appears in bottom-right after first viewport. * Toggled by .is-scrolled class on body (already managed by theme-toggle.js). * ------------------------------------------------------------------------- */ .scroll-to-top { position: fixed; right: var(--wp--preset--spacing--40); bottom: var(--wp--preset--spacing--40); width: 44px; height: 44px; border-radius: 999px; background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); border: 0; cursor: pointer; z-index: 90; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } body.is-scrolled .scroll-to-top { opacity: 1; transform: translateY(0); pointer-events: auto; } .scroll-to-top:hover { background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); } .scroll-to-top svg { width: 18px; height: 18px; } /* Smooth scroll for anchor links and scroll-to-top */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (max-width: 767px) { .site-overlay__link { font-size: clamp(2rem, 9vw, 3.5rem); } .site-overlay__close-label { display: none; } /* on mobile show only the X */ .site-overlay__bar { padding: 1rem 1.25rem; } .site-overlay__brand svg { height: 22px; } } /* --------------------------------------------------------------------------- * Article list — Dieline-style full-width split rows * * Each post is a 2-column flex row: image (left ~67%) + text (right ~33%). * Dropped the 3-col grid in favor of this image-dominant layout. * ------------------------------------------------------------------------- */ .article-card-grid .wp-block-post-template { display: flex !important; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 0; } .article-card-grid .wp-block-post-template > .wp-block-post { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--wp--preset--spacing--60); padding: var(--wp--preset--spacing--70) 0; border-top: 1px solid var(--wp--preset--color--secondary); align-items: start; } /* Article-card images render taller (3:2) for stronger visual presence */ .article-card-grid .wp-block-post-featured-image { aspect-ratio: 3 / 2; background: linear-gradient( 135deg, var(--wp--preset--color--secondary) 0%, color-mix(in srgb, var(--wp--preset--color--secondary) 70%, transparent) 100% ); } .article-card-grid .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; } /* Note: previously the first card removed its top border, but on the homepage * that left no separator between the featured hero and the article list. The * border now applies to ALL cards including the first, giving: * - homepage: a horizontal line dividing the featured hero from the list * - archive/search/author pages: a clean section divider above the first card * Vertical spacing is symmetric (spacing--70 above AND below the line). */ .article-card-grid .wp-block-post-featured-image { margin: 0; overflow: hidden; } .article-card-grid .wp-block-post-featured-image img { width: 100%; height: auto; display: block; transition: transform 0.45s ease; } .article-card-grid .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.02); } .article-card-grid .wp-block-post-title { margin: 0; } .article-card-grid .wp-block-post-title a { color: var(--wp--preset--color--contrast); transition: color 0.15s ease; } .article-card-grid .wp-block-post:hover .wp-block-post-title a { color: var(--wp--preset--color--accent); } .article-card-grid .wp-block-post-terms { margin-top: var(--wp--preset--spacing--30); /* font/colour/decoration come from the global .wp-block-post-terms pill * style — only the spacing-from-title is unique to the card grid. */ } .article-card-grid .wp-block-post-excerpt { margin-top: var(--wp--preset--spacing--40); color: var(--wp--preset--color--muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .article-card-grid .wp-block-post-excerpt p { margin: 0; } /* Sticky right-column text — the card's text (title, terms, excerpt) pins to * the top of the viewport while you scroll past the image, and releases the * moment the image's bottom passes (since both share the grid row height). * `align-self: start` is required so the grid item takes its content height * instead of stretching to fill the row — otherwise sticky has no slack. */ .article-card-grid .wp-block-post-template > .wp-block-post > .wp-block-group { position: sticky; top: calc(var(--wp--preset--spacing--40, 1.5rem) + 89px); /* sticky nav (~89px) + small breathing gap */ align-self: start; } .admin-bar .article-card-grid .wp-block-post-template > .wp-block-post > .wp-block-group { top: calc(var(--wp--preset--spacing--40, 1.5rem) + 89px + 32px); /* + admin bar (32) */ } @media screen and (max-width: 782px) { .admin-bar .article-card-grid .wp-block-post-template > .wp-block-post > .wp-block-group { top: calc(var(--wp--preset--spacing--40, 1.5rem) + 89px + 46px); /* admin bar is 46px on narrow */ } } /* Mobile: collapse the split row into a vertical stack — disable sticky too */ @media (max-width: 767px) { .article-card-grid .wp-block-post-template > .wp-block-post { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); } .article-card-grid .wp-block-post-template > .wp-block-post > .wp-block-group { position: static; top: auto; } } /* Compact card grid — used on 404, search empty state, related side-strips. Smaller cards in a true 3-col grid (16:9 images, title, date). */ .compact-card-grid .wp-block-post-template { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50); list-style: none; padding: 0; margin: 0; } .compact-card-grid .wp-block-post { display: flex; flex-direction: column; border: 0; padding: 0; } .compact-card-grid .wp-block-post-featured-image { margin: 0 0 var(--wp--preset--spacing--30); aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient( 135deg, var(--wp--preset--color--secondary) 0%, color-mix(in srgb, var(--wp--preset--color--secondary) 70%, transparent) 100% ); } .compact-card-grid .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; } .compact-card-grid .wp-block-post-title { font-size: var(--wp--preset--font-size--card-title); margin: 0; } .compact-card-grid .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; } .compact-card-grid .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); } .compact-card-grid .wp-block-post-date { margin-top: var(--wp--preset--spacing--20); } @media (max-width: 767px) { .compact-card-grid .wp-block-post-template { grid-template-columns: 1fr; } } /* Eyebrow style — used on small uppercase markers throughout. */ .has-eyebrow-font-size { font-family: var(--wp--preset--font-family--heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.4; } /* --------------------------------------------------------------------------- * Popular / recent post lists (numbered ranked list with thumbs + excerpt) * * Two surfaces use this: * - Sidebar on single.html ("Luetuimmat" via parts/related-posts.html) * - Side-by-side blocks on the Uutiset category landing page * ("Luetuimmat" + "Uusimmat") * * Each row: number column | title + excerpt | thumbnail. Thin secondary * divider between rows (matches the reference design). * ------------------------------------------------------------------------- */ .popular-sidebar { position: sticky; top: var(--wp--preset--spacing--40); align-self: start; } .popular-sidebar h4 { margin: 0 0 var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--30); border-top: 1px solid var(--wp--preset--color--secondary); } :is(.popular-list, .recent-list) .wp-block-post-template { list-style: none; padding: 0; margin: 0; counter-reset: popular-rank; display: flex; flex-direction: column; gap: 0; } :is(.popular-list, .recent-list) .wp-block-post { counter-increment: popular-rank; display: grid; grid-template-columns: 32px minmax(0, 1fr) 96px; column-gap: var(--wp--preset--spacing--40); row-gap: var(--wp--preset--spacing--20); align-items: start; padding: var(--wp--preset--spacing--40) 0; border-top: 1px solid var(--wp--preset--color--secondary); margin: 0 !important; /* defeat WP's auto block-gap margin between siblings */ } :is(.popular-list, .recent-list) .wp-block-post:first-child { border-top: 0; padding-top: var(--wp--preset--spacing--30); } :is(.popular-list, .recent-list) .wp-block-post::before { content: counter(popular-rank); font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--muted); line-height: 1.3; grid-column: 1; grid-row: 1 / span 2; } :is(.popular-list, .recent-list) .wp-block-post-title { font-size: var(--wp--preset--font-size--medium); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 0; grid-column: 2; grid-row: 1; text-transform: none; /* override the global eyebrow-y treatment */ } :is(.popular-list, .recent-list) .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; } :is(.popular-list, .recent-list) .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); } :is(.popular-list, .recent-list) .wp-block-post-excerpt { grid-column: 2; grid-row: 2; margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } :is(.popular-list, .recent-list) .wp-block-post-excerpt p { margin: 0; } :is(.popular-list, .recent-list) .wp-block-post-featured-image { grid-column: 3; grid-row: 1 / span 2; margin: 0; width: 96px; height: 96px; overflow: hidden; border-radius: 4px; background: var(--wp--preset--color--secondary); } :is(.popular-list, .recent-list) .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Two side-by-side popular/recent lists used on the Uutiset category * landing page. Each .category-lists__col gets equal flex-basis so the * Luetuimmat + Uusimmat columns sit beside each other; collapses to a * single column on tablet/mobile. */ .category-lists { border-top: 1px solid var(--wp--preset--color--secondary); padding-top: var(--wp--preset--spacing--50); gap: var(--wp--preset--spacing--70) !important; } .category-lists__col { flex: 1 1 calc(50% - var(--wp--preset--spacing--70)); min-width: 0; } .category-lists__col h4 { border-top: 0; /* outer .category-lists already has a top border */ padding-top: 0; } @media (max-width: 767px) { .category-lists__col { flex-basis: 100%; } } /* Tablet+mobile: collapse sidebar below the body content. */ @media (max-width: 991px) { .popular-sidebar { position: static; } /* Override the inline grid on preview HTML and the wp:columns block-default */ main.article-layout { display: block !important; grid-template-columns: 1fr !important; } main.article-layout .wp-block-columns { flex-direction: column; flex-wrap: nowrap; } main.article-layout .wp-block-column { flex-basis: 100% !important; min-width: 0; max-width: 100%; } main.article-layout > article, main.article-layout > aside { max-width: 100% !important; } } /* --------------------------------------------------------------------------- * Featured-hero block (top of homepage — Dieline pattern) * Full-bleed image followed by left-aligned title + excerpt. * ------------------------------------------------------------------------- */ .featured-hero { margin-bottom: var(--wp--preset--spacing--70); } .featured-hero__image { margin: 0; width: 100%; overflow: hidden; aspect-ratio: 21 / 9; } .featured-hero__image img, .featured-hero__image a { width: 100%; height: 100%; object-fit: cover; display: block; } .featured-hero__content { padding-top: var(--wp--preset--spacing--50); } .featured-hero__content h2 { margin: 0 0 var(--wp--preset--spacing--40); } .featured-hero__content p { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--medium); line-height: 1.6; margin: 0; } .featured-hero__content a { color: var(--wp--preset--color--contrast); text-decoration: none; } .featured-hero__content a:hover { color: var(--wp--preset--color--accent); } @media (max-width: 767px) { .featured-hero__image { aspect-ratio: 4 / 3; } } /* --------------------------------------------------------------------------- * Article head (single article: title + tags) * * Above the tablet breakpoint, the head's title and tag row are constrained * to ~66% of the layout width so they line up with the body column on the * left (the right 34% is occupied by the Suositut sidebar once the body * content starts). On tablet/mobile the body collapses to a single column, * so we let the head go full width. * ------------------------------------------------------------------------- */ .article-head .wp-block-post-title { margin: 0; } @media (min-width: 992px) { .article-head > .wp-block-post-title, .article-head > .article-cats { max-width: 66%; /* Override WP's constrained-layout auto-centering. Margin-left of 10px * matches the auto-margin WP applies to .wp-block-columns inside the * main below — keeping the title's left edge aligned with the body * paragraph column. */ margin-left: 10px !important; margin-right: auto !important; } } /* --------------------------------------------------------------------------- * Tag pills — applied globally to wp:post-terms anywhere on the site * (single article tag row, article-card-grid eyebrow, archive cards, etc.). * White pill on dark background; flips to filled accent on hover. * ------------------------------------------------------------------------- */ .wp-block-post-terms { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; /* Hide WP's auto-injected ", " separator between term anchors. * The wrapper's font-size:0 collapses the text nodes between * elements; pills restore their own font-size below. */ font-size: 0; line-height: 0; } .wp-block-post-terms a { display: inline-block; padding: 0.3rem 0.85rem; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); border-radius: 999px; text-decoration: none; font-family: var(--wp--preset--font-family--heading); font-weight: 500; font-size: var(--wp--preset--font-size--small); line-height: 1.2; letter-spacing: 0; text-transform: none; transition: background-color 0.15s ease, color 0.15s ease; } .wp-block-post-terms a:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); } /* WP injects a comma separator between multiple terms; hide it (the flex * gap on the wrapper provides the visual spacing between pills). */ .wp-block-post-terms a + a::before { content: ""; } /* --------------------------------------------------------------------------- * Long-form post-content (single article + static pages) * ------------------------------------------------------------------------- */ .wp-block-post-content { font-family: var(--wp--preset--font-family--body); line-height: 1.7; } .wp-block-post-content p { margin-block: var(--wp--preset--spacing--40); } .wp-block-post-content > h2:not(:first-child), .wp-block-post-content > h3:not(:first-child) { margin-top: var(--wp--preset--spacing--60); } .wp-block-post-content > h2 + p, .wp-block-post-content > h3 + p { margin-top: var(--wp--preset--spacing--30); } .wp-block-post-content img { max-width: 100%; height: auto; margin-block: var(--wp--preset--spacing--50); } .wp-block-post-content ul, .wp-block-post-content ol { margin-block: var(--wp--preset--spacing--40); padding-left: 1.5rem; } .wp-block-post-content li { margin-bottom: 0.5rem; } .wp-block-post-content a { color: var(--wp--preset--color--contrast); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.15s ease; } .wp-block-post-content a:hover { color: var(--wp--preset--color--accent); } .wp-block-post-content strong { font-weight: 700; } .wp-block-post-content em { font-style: italic; } /* ----- wp:pullquote — large emphasis quote, distinct from inline quote ----- */ .wp-block-post-content .wp-block-pullquote { border-top: 1px solid var(--wp--preset--color--secondary); border-bottom: 1px solid var(--wp--preset--color--secondary); padding: var(--wp--preset--spacing--60) 0; margin-block: var(--wp--preset--spacing--60); text-align: center; } .wp-block-post-content .wp-block-pullquote p { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; margin: 0; max-width: 30ch; margin-left: auto; margin-right: auto; } .wp-block-post-content .wp-block-pullquote cite { display: block; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--eyebrow); font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--muted); margin-top: var(--wp--preset--spacing--40); } /* ----- wp:gallery — block-aware grid (WP handles the layout, we add gap) ----- */ .wp-block-post-content .wp-block-gallery { margin-block: var(--wp--preset--spacing--50); gap: var(--wp--preset--spacing--30); } .wp-block-post-content .wp-block-gallery .wp-block-image figcaption { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--eyebrow); color: var(--wp--preset--color--muted); text-align: left; margin-top: var(--wp--preset--spacing--20); } /* ----- wp:image figcaption styling (used both inline and in gallery) ----- */ .wp-block-post-content .wp-block-image figcaption { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--eyebrow); color: var(--wp--preset--color--muted); margin-top: var(--wp--preset--spacing--20); line-height: 1.4; } /* ----- wp:cover — full-bleed image with text overlay ----- */ .wp-block-post-content .wp-block-cover { margin-block: var(--wp--preset--spacing--60); min-height: 320px; border-radius: 0; overflow: hidden; } .wp-block-post-content .wp-block-cover .wp-block-cover__inner-container { padding: var(--wp--preset--spacing--60); } .wp-block-post-content .wp-block-cover h2, .wp-block-post-content .wp-block-cover h3 { color: #ffffff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); } /* ----- wp:table — clean editorial table ----- * Two table flavors are supported: * 1. wp:table block (`.wp-block-table > table`) — full-width with bold-uppercase * header row across the top. * 2. Plain
in post HTML with
in the first column (key/value layout * like Tekniset tiedot) — labels left-aligned, values left-aligned. * Both share the same typography and divider styling. */ .wp-block-post-content .wp-block-table, .wp-block-post-content > table, .wp-block-post-content > figure > table { margin-block: var(--wp--preset--spacing--50); overflow-x: auto; } /* Mobile: bare elements (pasted-in raw HTML, not wrapped in wp:table) * become horizontally scrollable so wide spec tables don't push the page off * the right edge of the viewport. The trick: turn the table itself into a * block-level scroll container, and re-apply `display: table` to the tbody * so the columns still line up internally. * * This was the smoking gun behind reports of "broken" mobile in articles * with the Tekniset tiedot 4-column spec table (~860px wide). */ @media (max-width: 767px) { .wp-block-post-content > table, .wp-block-post-content > figure > table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } .wp-block-post-content > table > tbody, .wp-block-post-content > table > thead, .wp-block-post-content > figure > table > tbody, .wp-block-post-content > figure > table > thead { display: table; width: max-content; min-width: 100%; } } .wp-block-post-content .wp-block-table table, .wp-block-post-content > table { width: 100%; border-collapse: collapse; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); } .wp-block-post-content .wp-block-table th, .wp-block-post-content .wp-block-table td, .wp-block-post-content > table th, .wp-block-post-content > table td { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); text-align: left; border-bottom: 1px solid var(--wp--preset--color--secondary); vertical-align: top; } .wp-block-post-content .wp-block-table th { font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: var(--wp--preset--color--contrast); border-bottom: 2px solid var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--eyebrow); text-transform: uppercase; letter-spacing: 0.04em; } /* Plain
with
in first column — typical key/value spec sheet * (Tekniset tiedot). Labels left-aligned, slightly heavier weight. */ .wp-block-post-content > table th { font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: var(--wp--preset--color--contrast); white-space: nowrap; width: 1%; /* shrink to content; value column takes the rest */ padding-right: var(--wp--preset--spacing--50); } .wp-block-post-content .wp-block-table tr:last-child td, .wp-block-post-content > table tr:last-child td, .wp-block-post-content > table tr:last-child th { border-bottom: 0; } /* ----- wp:embed (YouTube, Vimeo, etc.) — responsive 16:9 ----- */ .wp-block-post-content .wp-block-embed { margin-block: var(--wp--preset--spacing--50); } .wp-block-post-content .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; } .wp-block-post-content .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ----- wp:code + wp:preformatted — monospace with subtle bg ----- */ .wp-block-post-content .wp-block-code, .wp-block-post-content .wp-block-preformatted { background: var(--wp--preset--color--secondary); padding: var(--wp--preset--spacing--40); border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.875rem; line-height: 1.5; overflow-x: auto; margin-block: var(--wp--preset--spacing--50); } .wp-block-post-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9em; background: var(--wp--preset--color--secondary); padding: 2px 6px; border-radius: 3px; } .wp-block-post-content .wp-block-code code, .wp-block-post-content .wp-block-preformatted { background: transparent; padding: 0; } /* ----- wp:separator inside post content ----- */ .wp-block-post-content .wp-block-separator { border: 0; border-top: 1px solid var(--wp--preset--color--secondary); margin: var(--wp--preset--spacing--60) auto; max-width: 100px; } .wp-block-post-content .wp-block-separator.is-style-wide { max-width: 100%; } /* ----- wp:button hover and link styling consistent with theme ----- */ .wp-block-button .wp-block-button__link { font-family: var(--wp--preset--font-family--heading); font-weight: 600; border-radius: 999px; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); transition: background-color 0.15s ease, color 0.15s ease; } .wp-block-button.is-style-outline .wp-block-button__link { border: 1px solid currentColor; background: transparent; color: var(--wp--preset--color--contrast); } /* Single post hero — full-bleed featured image */ .single-post > .wp-block-post-featured-image { margin-bottom: var(--wp--preset--spacing--60); } .single-post > .wp-block-post-featured-image img { width: 100%; max-height: 80vh; object-fit: cover; display: block; } /* --------------------------------------------------------------------------- * Pagination (homepage, archive, search) — restrained, eyebrow-style numerics * ------------------------------------------------------------------------- */ .wp-block-query-pagination { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--small); font-weight: 500; gap: var(--wp--preset--spacing--40) !important; flex-wrap: wrap; align-items: center; } .wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { color: var(--wp--preset--color--contrast); text-decoration: none; padding: 0.5rem 0.75rem; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; transition: background-color 0.15s ease, color 0.15s ease; } .wp-block-query-pagination a:hover, .wp-block-query-pagination .page-numbers:hover { background-color: var(--wp--preset--color--secondary); color: var(--wp--preset--color--contrast); } .wp-block-query-pagination .page-numbers.current { background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); font-weight: 700; } .wp-block-query-pagination-previous, .wp-block-query-pagination-next { font-weight: 600; } /* --------------------------------------------------------------------------- * Author bio block — end of single article * ------------------------------------------------------------------------- */ .author-bio .wp-block-avatar img { border-radius: 999px; display: block; width: 80px; height: 80px; flex-shrink: 0; } .author-bio .wp-block-post-author-name a { color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-weight: 700; text-decoration: none; letter-spacing: -0.01em; } .author-bio .wp-block-post-author-name a:hover { color: var(--wp--preset--color--accent); } .author-bio .wp-block-post-author-biography { font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--muted); line-height: 1.6; } .author-bio .wp-block-post-author-biography p { margin: 0; } /* --------------------------------------------------------------------------- * Comments section (single article) * ------------------------------------------------------------------------- */ .article-comments { max-width: 1640px; margin: 0 auto; } .article-comments .wp-block-comments-title { font-size: var(--wp--preset--font-size--x-large); font-weight: 600; margin: 0 0 var(--wp--preset--spacing--50); max-width: 800px; } .article-comments .wp-block-comments { max-width: 800px; } .comment-item { max-width: 800px; } .comment-meta { gap: var(--wp--preset--spacing--30); align-items: center; } .comment-meta .wp-block-avatar img { border-radius: 999px; display: block; } .comment-meta .wp-block-comment-author-name a { color: var(--wp--preset--color--contrast); text-decoration: none; font-weight: 600; } .comment-meta .wp-block-comment-author-name a:hover { color: var(--wp--preset--color--accent); } .wp-block-comment-content { font-family: var(--wp--preset--font-family--body); line-height: 1.65; color: var(--wp--preset--color--contrast); } .wp-block-comment-content p { margin-block: var(--wp--preset--spacing--20); } .wp-block-comment-reply-link a, .wp-block-comment-edit-link a { color: var(--wp--preset--color--muted); text-decoration: none; font-family: var(--wp--preset--font-family--heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--wp--preset--font-size--eyebrow); } .wp-block-comment-reply-link a:hover, .wp-block-comment-edit-link a:hover { color: var(--wp--preset--color--accent); } /* Comments pagination */ .article-comments .wp-block-comments-pagination { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--small); } /* Comment reply form */ .wp-block-post-comments-form { max-width: 800px; margin-top: var(--wp--preset--spacing--60); } .wp-block-post-comments-form > h3, .wp-block-post-comments-form .comment-reply-title { font-size: var(--wp--preset--font-size--large); font-weight: 700; margin: 0 0 var(--wp--preset--spacing--40); } .wp-block-post-comments-form .comment-form, .wp-block-post-comments-form form { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); } .wp-block-post-comments-form label { display: block; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--muted); margin-bottom: var(--wp--preset--spacing--20); } .wp-block-post-comments-form input[type="text"], .wp-block-post-comments-form input[type="email"], .wp-block-post-comments-form input[type="url"], .wp-block-post-comments-form textarea { width: 100%; background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--secondary); border-radius: 4px; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium); line-height: 1.5; box-sizing: border-box; } .wp-block-post-comments-form textarea { min-height: 8rem; resize: vertical; } .wp-block-post-comments-form input:focus-visible, .wp-block-post-comments-form textarea:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; } .wp-block-post-comments-form input[type="submit"], .wp-block-post-comments-form .submit { background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); border: 0; border-radius: 999px; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; align-self: flex-start; width: auto; transition: background-color 0.15s ease; } .wp-block-post-comments-form input[type="submit"]:hover, .wp-block-post-comments-form .submit:hover { background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); } /* --------------------------------------------------------------------------- * Footer * ------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--wp--preset--color--secondary); } /* Legal links — single inline row at desktop, vertical stack at mobile. * (Locale chip removed — not needed on a single-language site.) */ .footer-legal-links { display: flex; flex-wrap: wrap; gap: 0 var(--wp--preset--spacing--50); row-gap: 0.4em; } .footer-legal-links a { color: var(--wp--preset--color--muted); text-decoration: none; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); transition: color 0.15s ease; } .footer-legal-links a:hover { color: var(--wp--preset--color--contrast); } /* Giant wordmark — same SVG as the top masthead, scaled to fill the * constrained content width (matches the homepage automotion logo). */ .footer-wordmark { display: block; color: var(--wp--preset--color--contrast); line-height: 0; margin-top: var(--wp--preset--spacing--50); } .footer-wordmark svg { display: block; width: 100%; max-width: 100%; height: auto; } .footer-wordmark svg path { fill: currentColor; } /* Copyright — small, muted, sits flush below the wordmark. */ .footer-copyright { margin: var(--wp--preset--spacing--30) 0 0 !important; line-height: 1.4; } @media (max-width: 767px) { .site-footer.wp-block-group { padding-top: var(--wp--preset--spacing--50) !important; padding-bottom: var(--wp--preset--spacing--30) !important; } /* Stack the legal links vertically — one per line, comfortable spacing * between rows. Mirrors the Volvo mobile reference. */ .footer-legal-links { flex-direction: column; gap: var(--wp--preset--spacing--40); } .footer-wordmark { margin-top: var(--wp--preset--spacing--40); } } /* --------------------------------------------------------------------------- * Newsletter form (no Gutenberg form block; tokenised via classes) * ------------------------------------------------------------------------- */ .newsletter-form { display: flex; gap: var(--wp--preset--spacing--20); flex-wrap: wrap; } .newsletter-form input[type="email"] { flex: 1 1 200px; min-width: 0; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--secondary); border-radius: 999px; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); } .newsletter-form input[type="email"]:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; } .newsletter-form button { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); border: 0; border-radius: 999px; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: background-color 0.15s ease; } .newsletter-form button:hover { background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); } /* --------------------------------------------------------------------------- * Focus visibility — strong, accent-colored ring on all interactive elements. * Works in both palettes (accent contrasts well against base + contrast). * ------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible, .wp-block-navigation-item__content:focus-visible, .wp-block-search__button:focus-visible, .site-nav__pill:focus-visible, .site-nav__icon:focus-visible, .site-overlay__link:focus-visible, .site-overlay__close:focus-visible, .theme-toggle:focus-visible, .scroll-to-top:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; border-radius: 4px; } /* Skip-link for keyboard users — hidden until focused */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 0.75rem 1rem; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: var(--wp--preset--font-size--small); text-decoration: none; border-radius: 0 0 4px 0; } .skip-link:focus { left: 0; } /* --------------------------------------------------------------------------- * Hide horizontal scroll on edge cases. * NOTE: overflow on breaks position:sticky descendants — keep this * scoped to only. Use clip instead of hidden on body to preserve * sticky behavior in all browsers. * ------------------------------------------------------------------------- */ body { overflow-x: clip; max-width: 100%; } /* --------------------------------------------------------------------------- * Mobile (≤767px) — comprehensive responsive rules * * Test via Chrome DevTools (F12 → Ctrl+Shift+M → iPhone 12 Pro 390×844) * since automated browser tools don't propagate resize to JS innerWidth. * ------------------------------------------------------------------------- */ @media (max-width: 767px) { /* Sticky nav — tighter padding, smaller font for mobile breakpoint */ .site-header { padding-top: var(--wp--preset--spacing--20); padding-bottom: var(--wp--preset--spacing--20); } .site-header .wp-block-navigation { font-size: var(--wp--preset--font-size--small); display: none; /* WP's overlayMenu:mobile takes over here */ } /* Account pills — drop the labeled pills, keep icons + toggle + hamburger */ .nav-account a:not(.signup) { display: none; } .nav-account .signup { padding: 0.4rem 0.75rem; font-size: var(--wp--preset--font-size--small); } .nav-account .search-icon, .nav-account .hamburger, .nav-account .theme-toggle { width: 36px; height: 36px; } /* Featured hero — taller image (4:3), smaller content padding */ .featured-hero { margin-bottom: var(--wp--preset--spacing--50); } .featured-hero__image { aspect-ratio: 4 / 3; } .featured-hero__content { padding-top: var(--wp--preset--spacing--40); } .featured-hero__content h2 { font-size: var(--wp--preset--font-size--x-large); } .featured-hero__content p { font-size: var(--wp--preset--font-size--small); } /* Article card grid — stack image above text vertically (was 67/33 split) */ .article-card-grid .wp-block-post-template > .wp-block-post { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--50) 0; } .article-card-grid .wp-block-post-title { font-size: var(--wp--preset--font-size--x-large); } /* Single article — smaller h1, body+sidebar already collapse via @991 rule */ .single-post .wp-block-post-title, .article-head .wp-block-post-title, .article-title { font-size: var(--wp--preset--font-size--x-large); } .article-head { padding-top: var(--wp--preset--spacing--50) !important; padding-bottom: var(--wp--preset--spacing--40) !important; } .article-meta { flex-direction: column; gap: var(--wp--preset--spacing--20) !important; } /* Popular sidebar — tighter when stacked below body on mobile */ .popular-sidebar { margin-top: var(--wp--preset--spacing--60); padding-top: var(--wp--preset--spacing--50); border-top: 1px solid var(--wp--preset--color--secondary); } :is(.popular-list, .recent-list) .wp-block-post { grid-template-columns: 20px minmax(0, 1fr) 64px; } :is(.popular-list, .recent-list) .wp-block-post-featured-image { width: 64px; height: 48px; } /* Footer — columns stack vertically on mobile */ .site-footer .wp-block-group.is-layout-flex { flex-direction: column; gap: var(--wp--preset--spacing--50) !important; /* WP applies align-items:center on space-between flex containers, * which in column-direction collapses each child to its content * width — that's why "Sisältö" was 86px and "Tietoa" was 136px on * mobile. Switch to stretch so each column fills the viewport. */ align-items: stretch !important; } /* Belt-and-suspenders: even if WP's container class sets flex-basis to a * fixed pixel value via injected inline