/* ========================================================================== TopElectricSUV — Homepage redesign, "Modern Automotive Editorial" design-01/styles.css Single DOM, single stylesheet. Theme switching is done purely through the custom properties below ([data-theme="dark"]), never by duplicating components. No frameworks, no web fonts, no icon fonts. GeneratePress / GenerateBlocks mapping notes are inline as comments (GP = GeneratePress customizer setting, GB = GenerateBlocks block). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ :root { /* Light theme (default) */ --bg: #ffffff; /* page background */ --bg-2: #f5f7f9; /* secondary background: bands, image placeholders */ --surface: #ffffff; /* card background */ --text: #111827; /* primary text */ --muted: #5b6470; /* secondary text: dates, excerpts, bylines */ --border: #e2e6ea; /* hairlines */ --accent: #0d47a1; /* existing TopElectricSUV link blue */ --accent-hover: #1e73be;/* existing GP accent blue */ --accent-tint: #e8f0fb; /* Header + footer "frame" — the current site uses a dark graphite nav and the only brand asset is a white wordmark, so the frame stays dark in light mode. */ --frame: #1c2126; --frame-2: #262c33; --frame-text: #ffffff; --frame-muted: #aab4c0; --frame-border:#333b44; /* Typography — system stack, no web fonts */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* Spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --radius: 4px; --container: 1280px; --gutter: 24px; --header-h: 60px; --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06); --shadow-md: 0 8px 24px rgba(17, 24, 39, 0.12); } [data-theme="dark"] { --bg: #0d1117; --bg-2: #151b23; --surface: #18212b; --text: #f5f7fa; --muted: #aab4c0; --border: #2a3440; --accent: #6ea8ff; /* brand blue, lifted for AA contrast on dark */ --accent-hover: #93c0ff; --accent-tint: #16243a; --frame: #0a0e13; --frame-2: #151b23; --frame-text: #f5f7fa; --frame-muted: #aab4c0; --frame-border:#2a3440; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); } /* No-JS fallback: honour the OS preference when the bootstrap script cannot run. (With JS, the attribute is always set before first paint.) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #0d1117; --bg-2: #151b23; --surface: #18212b; --text: #f5f7fa; --muted: #aab4c0; --border: #2a3440; --accent: #6ea8ff; --accent-hover: #93c0ff; --accent-tint: #16243a; --frame: #0a0e13; --frame-2: #151b23; --frame-text: #f5f7fa; --frame-muted: #aab4c0; --frame-border: #2a3440; } } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } body { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, p, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input { font: inherit; } time { color: var(--muted); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 14px; background: var(--accent); color: #fff; border-radius: var(--radius); font-weight: 600; } .skip-link:focus { top: 12px; color: #fff; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* Reserved-ratio media boxes: every image slot has a fixed aspect ratio so the layout never shifts while images load (CLS). Maps to GB Image "aspect ratio". */ .ratio-16-9, .ratio-16-10, .ratio-4-3, .ratio-3-2 { display: block; position: relative; overflow: hidden; background: var(--bg-2); border-radius: var(--radius); } .ratio-16-9 { aspect-ratio: 16 / 9; } .ratio-16-10 { aspect-ratio: 16 / 10; } .ratio-4-3 { aspect-ratio: 4 / 3; } .ratio-3-2 { aspect-ratio: 3 / 2; } .ratio-16-9 img, .ratio-16-10 img, .ratio-4-3 img, .ratio-3-2 img { width: 100%; height: 100%; object-fit: cover; } /* Only functional transitions, and only where they are cheap (color/opacity). */ a, button, .icon-btn { transition: color .15s ease, background-color .15s ease, border-color .15s ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 3. Shared editorial primitives -------------------------------------------------------------------------- */ /* Category eyebrow — maps to GB Headline (post terms) */ .cat { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); line-height: 1.2; } .cat:hover { color: var(--accent-hover); } .cat--label { color: var(--muted); } /* Meta row — maps to GB Headline (post date / author) */ .meta { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); font-size: 0.8125rem; color: var(--muted); line-height: 1.4; } .meta__by::after { content: "\00b7"; margin-left: var(--s-2); } /* "View all →" link */ .more-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--accent); white-space: nowrap; } .more-link:hover { color: var(--accent-hover); } .more-link svg { flex: none; } .btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: var(--radius); font-size: 0.9375rem; font-weight: 600; line-height: 1; } .btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-hover); color: #fff; } /* Section header: title + rule + link — maps to GB Container (flex row) + Headline */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-3); margin-bottom: var(--s-5); border-bottom: 2px solid var(--text); } .section-title { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; } .section-foot { margin-top: var(--s-5); text-align: right; } /* Card (image top) — maps to Query Loop > GB Container + Image + Headline */ .card { display: flex; flex-direction: column; min-width: 0; } .card__media { margin-bottom: var(--s-3); } .card__body { display: flex; flex-direction: column; gap: var(--s-2); } .card__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; } .card__title a:hover { color: var(--accent); } .card__excerpt { font-size: 0.9375rem; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .card--lg .card__title { font-size: 1.375rem; line-height: 1.25; } .card--lg .card__excerpt { -webkit-line-clamp: 3; font-size: 1rem; } /* Horizontal list item (thumbnail left) — maps to Query Loop with a 2-col GB Grid */ .list--divided .li { padding: var(--s-4) 0; border-top: 1px solid var(--border); } .list--divided .li:first-child { padding-top: 0; border-top: 0; } .list--divided .li:last-child { padding-bottom: 0; } .list--compact .li { padding: var(--s-3) 0; } .li { display: flex; gap: var(--s-4); align-items: flex-start; } .li__media { flex: 0 0 120px; width: 120px; } .li__body { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; } .li__title { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; } .li time { font-size: 0.8125rem; } /* Responsive grids — maps to GB Grid */ .grid { display: grid; gap: var(--s-6) var(--s-5); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* -------------------------------------------------------------------------- 4. Header (GP: Site Header, Primary Navigation, Sticky navigation) -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--frame); color: var(--frame-text); border-bottom: 1px solid var(--frame-border); } .header__inner { display: flex; align-items: center; gap: var(--s-5); height: var(--header-h); } .brand { display: flex; align-items: center; flex: none; } .brand img { width: auto; height: 50px; } /* Primary navigation */ .nav { flex: 1 1 auto; min-width: 0; } .nav__list { display: flex; align-items: center; gap: var(--s-1); } .nav__list > li { position: relative; } .nav__list > li > a, .nav__more-btn { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; font-size: 0.9375rem; font-weight: 500; color: var(--frame-text); border-radius: var(--radius); white-space: nowrap; } .nav__list > li > a:hover, .nav__more-btn:hover, .nav__more-btn[aria-expanded="true"] { background: var(--frame-2); color: var(--frame-text); } /* "More" dropdown — a single-level list, not a mega menu */ .nav__sub { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 220px; padding: 6px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-md); display: none; } .nav__more.is-open .nav__sub { display: block; } .nav__sub a { display: block; padding: 9px 12px; border-radius: var(--radius); font-size: 0.9375rem; font-weight: 500; } .nav__sub a:hover { background: var(--bg-2); color: var(--accent); } /* Icon buttons: search, theme, hamburger */ .header__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); color: var(--frame-text); } .icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--frame-2); color: var(--frame-text); } .icon-btn svg { display: block; } /* Theme toggle shows the icon of the theme you would switch TO */ .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } .nav-toggle { display: none; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-menu { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } /* Search bar drops below the header when opened */ .search-bar { border-top: 1px solid var(--frame-border); background: var(--frame); } .search-form { display: flex; gap: var(--s-2); padding-block: var(--s-3); } .search-form input, .footer__search input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid var(--frame-border); border-radius: var(--radius); background: var(--frame-2); color: var(--frame-text); } .search-form input::placeholder, .footer__search input::placeholder { color: var(--frame-muted); } .search-form input:focus, .footer__search input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; } /* -------------------------------------------------------------------------- 5. Layout shell -------------------------------------------------------------------------- */ .site-main { padding-block: var(--s-6) var(--s-8); } /* Main + sidebar — maps to GP "Right sidebar" layout (content 1fr / sidebar 300px) or a 2-column GB Grid. */ .layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-8) var(--s-7); margin-top: var(--s-8); } .main-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); row-gap: var(--s-8); min-width: 0; } .main-col > .section { grid-column: 1 / -1; min-width: 0; } .main-col > .section--reviews { grid-column: 1 / 2; } .main-col > .section--phevs { grid-column: 2 / 3; } /* -------------------------------------------------------------------------- 6. Section 1 — Lead story -------------------------------------------------------------------------- */ .hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--s-6) var(--s-6); padding-bottom: var(--s-6); border-bottom: 1px solid var(--border); } .hero__main { grid-row: 1 / 3; display: flex; flex-direction: column; min-width: 0; } .hero__media { margin-bottom: var(--s-4); } .hero__body { display: flex; flex-direction: column; gap: var(--s-3); } .hero__title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; } .hero__excerpt { font-size: 1.0625rem; line-height: 1.55; color: var(--muted); max-width: 62ch; } .hero__sec { min-width: 0; } .hero__sec .card__title { font-size: 1.125rem; } /* -------------------------------------------------------------------------- 7. Section 3 — First Look Review -------------------------------------------------------------------------- */ .firstlook { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-6); align-items: start; } .firstlook__list .li__title { font-size: 1rem; } /* -------------------------------------------------------------------------- 8. Section 4 — Editor's Picks -------------------------------------------------------------------------- */ .picks .card__title { font-size: 1.125rem; } /* -------------------------------------------------------------------------- 9. Section 5 — Hybrid Cars band (tinted, intro column + 3 cards) -------------------------------------------------------------------------- */ .band { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-6); padding: var(--s-6); background: var(--bg-2); border-radius: 6px; } .band__intro { display: flex; flex-direction: column; gap: var(--s-3); } .band__intro .section-title { padding-bottom: var(--s-3); border-bottom: 2px solid var(--text); } .band__desc { font-size: 0.9375rem; line-height: 1.55; color: var(--muted); } .band__grid { gap: var(--s-5) var(--s-4); } .band__grid .card__title { font-size: 1rem; } .band__grid .card__media { background: var(--surface); } /* -------------------------------------------------------------------------- 10. Section 6 — Reviews (large horizontal cards) + PHEVs (list) -------------------------------------------------------------------------- */ .reviews { display: flex; flex-direction: column; } .review { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-4); padding: var(--s-5) 0; border-top: 1px solid var(--border); } .review:first-child { padding-top: 0; border-top: 0; } .review:last-child { padding-bottom: 0; } .review__body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; } .review__title { font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; } .review__summary { font-size: 0.9375rem; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* -------------------------------------------------------------------------- 11. Sidebar widgets -------------------------------------------------------------------------- */ .sidebar { display: flex; flex-direction: column; gap: var(--s-7); min-width: 0; } /* Categories + Discover More stay in view while the reader scrolls the long main column (CSS-only; the aside stretches to the grid row height). */ .sidebar__sticky { display: flex; flex-direction: column; gap: var(--s-7); position: sticky; top: calc(var(--header-h) + var(--s-5)); } .widget__title { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding-bottom: var(--s-3); margin-bottom: var(--s-4); border-bottom: 2px solid var(--text); } .widget .li__media { flex-basis: 96px; width: 96px; } .widget .li__title { font-size: 0.9375rem; } .widget__more { margin-top: var(--s-4); } /* Most Read — numbered, text only (no thumbnails: cheap and fast) */ .ranked { counter-reset: rank; } .ranked__item { counter-increment: rank; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 var(--s-2); padding: var(--s-3) 0; border-top: 1px solid var(--border); } .ranked__item:first-child { padding-top: 0; border-top: 0; } .ranked__item::before { content: counter(rank, decimal-leading-zero); grid-row: 1 / 3; font-size: 1.375rem; font-weight: 800; line-height: 1; color: var(--border); letter-spacing: -0.02em; } [data-theme="dark"] .ranked__item::before { color: #3a4654; } .ranked__item .cat { grid-column: 2; margin-bottom: var(--s-1); } .ranked__title { grid-column: 2; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; } /* Categories — chips */ .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .chip { display: inline-block; padding: 7px 12px; font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--border); border-radius: 999px; color: var(--text); } .chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); } /* Discover More — compact arrow list with hairline separators */ .discover li { border-top: 1px solid var(--border); } .discover li:first-child { border-top: 0; } .discover a { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; font-size: 0.9375rem; font-weight: 600; } .discover a svg { color: var(--muted); } .discover a:hover svg { color: var(--accent); } /* -------------------------------------------------------------------------- 12. Footer (GP Footer widgets, dark in both themes) -------------------------------------------------------------------------- */ .site-footer { background: var(--frame); color: var(--frame-muted); border-top: 1px solid var(--frame-border); font-size: 0.9375rem; } .footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); padding-block: var(--s-7); } .footer__brand img { width: auto; height: 32px; margin-bottom: var(--s-4); } .footer__brand p { line-height: 1.55; max-width: 44ch; } .social { display: flex; gap: var(--s-2); margin-top: var(--s-4); } .social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--frame-border); color: var(--frame-text); } .social a:hover { border-color: var(--frame-text); color: var(--frame-text); } .footer__title { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--frame-text); margin-bottom: var(--s-3); } .footer__col li { padding: 4px 0; } .footer__col a { color: var(--frame-muted); } .footer__col a:hover { color: var(--frame-text); } .footer__search { display: flex; gap: var(--s-2); } .footer__note { margin-top: var(--s-3); font-size: 0.8125rem; line-height: 1.45; } .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding-block: var(--s-4); border-top: 1px solid var(--frame-border); font-size: 0.8125rem; } .to-top { display: inline-flex; align-items: center; gap: 6px; color: var(--frame-text); font-weight: 600; } /* ========================================================================== 13. Responsive — genuine reflow, not scaling Breakpoints: 1279 (compact desktop) / 1023 (tablet) / 767 (large phone) / 479 ========================================================================== */ /* ---- ≤1279: compact desktop (1024–1279) ---- */ @media (max-width: 1279px) { .layout { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-8) var(--s-6); } .main-col { column-gap: var(--s-6); } .nav__list > li > a, .nav__more-btn { padding: 0 9px; font-size: 0.875rem; } /* Hybrid band: intro stacks above the cards at this width */ .band { grid-template-columns: 1fr; padding: var(--s-5); } .band__intro { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: var(--s-3) var(--s-5); } .band__intro .section-title { border-bottom: 0; padding-bottom: 0; } .band__desc { flex: 1 1 320px; } } /* ---- ≤1024: tablet layout (sidebar drops below main; 1024 is treated as tablet) ---- */ @media (max-width: 1024px) { /* Lead story: primary full width, the two secondaries side by side below */ .hero { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: var(--s-6) var(--s-5); } .hero__main { grid-row: auto; grid-column: 1 / -1; } /* Sidebar moves below the main content and becomes a 2-column widget grid */ .layout { grid-template-columns: 1fr; margin-top: var(--s-7); } .sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); padding-top: var(--s-7); border-top: 1px solid var(--border); } .sidebar__sticky { position: static; gap: var(--s-7); } /* Main column: single column; Reviews/PHEVs stack; mobile priority order */ .main-col { grid-template-columns: 1fr; row-gap: var(--s-7); } .main-col > .section--reviews, .main-col > .section--phevs { grid-column: 1 / -1; } .section--latest { order: 1; } .section--firstlook { order: 2; } .section--picks { order: 3; } .section--reviews { order: 4; } .section--hybrid { order: 5; } .section--phevs { order: 6; } .widget--featured { order: 1; } .sidebar__sticky { order: 2; } .widget--popular { order: 3; } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .picks.grid--3, .band__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .firstlook { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } .firstlook .li__media { flex-basis: 104px; width: 104px; } .band { grid-template-columns: 1fr; padding: var(--s-5); } .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } } /* ---- ≤1023: tablet header (logo / search / theme / hamburger) ---- */ @media (max-width: 1023px) { :root { --header-h: 56px; } .nav-toggle { display: inline-flex; } .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--frame); border-bottom: 1px solid var(--frame-border); box-shadow: var(--shadow-md); } .nav.is-open { display: block; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-2) var(--gutter) var(--s-3); } .nav__list > li > a, .nav__more-btn { width: 100%; height: 44px; padding: 0 var(--s-3); font-size: 1rem; justify-content: space-between; } .nav__more-btn svg { width: 14px; height: 14px; } .nav__sub { position: static; display: none; min-width: 0; padding: 0 0 var(--s-2) var(--s-3); background: transparent; color: var(--frame-text); border: 0; box-shadow: none; } .nav__more.is-open .nav__sub { display: block; } .nav__sub a { color: var(--frame-muted); padding: 10px 12px; } .nav__sub a:hover { background: var(--frame-2); color: var(--frame-text); } } /* ---- ≤767: large phone ---- */ @media (max-width: 767px) { :root { --gutter: 16px; } .site-main { padding-block: var(--s-5) var(--s-7); } .hero { grid-template-columns: 1fr; gap: var(--s-5); padding-bottom: var(--s-5); } .hero__title { font-size: clamp(1.375rem, 1rem + 2.4vw, 1.75rem); } .hero__excerpt { font-size: 1rem; } .layout { margin-top: var(--s-6); gap: var(--s-7); } .main-col { row-gap: var(--s-6); } .section-head { margin-bottom: var(--s-4); } .grid--3, .picks.grid--3 { grid-template-columns: 1fr; gap: var(--s-5); } .card--lg .card__title { font-size: 1.25rem; } .firstlook { grid-template-columns: 1fr; } .band { padding: var(--s-4); } .band__intro { flex-direction: column; align-items: stretch; } .band__intro .section-title { border-bottom: 2px solid var(--text); padding-bottom: var(--s-3); } .band__grid { grid-template-columns: 1fr; } .review { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-3); padding: var(--s-4) 0; } .review__title { font-size: 1rem; } .review__summary { -webkit-line-clamp: 2; font-size: 0.875rem; } .sidebar { grid-template-columns: 1fr; gap: var(--s-6); padding-top: var(--s-6); } .sidebar__sticky { gap: var(--s-6); } .li__media { flex-basis: 104px; width: 104px; } .footer__grid { grid-template-columns: 1fr; gap: var(--s-5); padding-block: var(--s-6); } .footer__bottom { flex-direction: column; align-items: flex-start; } } /* ---- ≤479: small phone (390–479) ---- */ @media (max-width: 479px) { .brand img { height: 26px; } .header__actions { gap: 0; } .icon-btn { width: 38px; height: 38px; } .card__title { font-size: 1rem; } .review { grid-template-columns: 1fr; } .review__media { max-width: 100%; } .review__summary { -webkit-line-clamp: 3; } .section-title { font-size: 1.25rem; } } /* Print: drop the frame chrome, keep the content */ @media print { .site-header, .site-footer, .skip-link { display: none; } .ratio-16-9, .ratio-16-10, .ratio-4-3, .ratio-3-2 { background: none; } }