/* Color roles: --accent is reserved for solid button/active-nav backgrounds paired with white text - it stays the same brand blue in both themes (a white-on-blue button doesn't need to shift with the page). --link is the equivalent color for TEXT sitting directly on the page/card background (nav links, plain , badges, hover states) - identical to --accent in light mode (so light mode is visually unchanged), but a lighter blue in dark mode, since the light-mode accent blue reads at ~2.6:1 on a dark background - well under the 4.5:1 AA minimum. Splitting these was required to make dark mode actually meet contrast rather than just "switch colors". --surface/--surface-alt replace every hardcoded #fff/#f4f4f4 card, input, and header background so dark mode can redefine them once here instead of patching each component. --warn/--warn-bg/ --warn-border consolidate what were two near-identical hardcoded ambers (.notice's #fff8e1 and .var-placeholder's #fff3cd) into one variable pair. --ok-bg/--muted-bg do the same for the two remaining hardcoded badge backgrounds. --danger-action/--danger are the same split as --accent/--link, for the same reason: button.danger needs a background dark enough for white text in both themes, while .error/ .badge.removed need TEXT readable on the page background, which is a pale red in dark mode - one color can't do both. Theme activation, three layers (each --light-* and --dark-* hex value is written exactly once below; everything past this comment just points the real variable names at one namespace or the other): 1. Base :root - light values, so a browser with no dark-mode concept at all (or JS disabled, breaking the toggle below) still gets a fully-styled, correctly-contrasted site. 2. @media (prefers-color-scheme: dark), scoped with :not([data-theme]) - only applies when the visitor hasn't made an explicit choice via the nav toggle, so it can't fight a manual override. 3. [data-theme="dark"] / [data-theme="light"] - set by webapp/static/theme.js when the nav toggle is used. Higher specificity than both of the above (attribute selector on :root beats a bare :root, in or out of a media query), so a manual choice always wins regardless of what the OS/browser reports. Persisted server-side via User.theme_preference for a logged-in human (rendered straight into by base.html, so there's no flash of the wrong theme on load); never persisted for an anonymous visitor - see theme.js. */ :root { --light-bg: #fafafa; --light-fg: #1a1a1a; /* Darkened from the original #666 - #666 passes AA (4.5:1) against white/#fafafa but drops to ~4.95:1 on the palette's darkest light surface (.badge.shadow's #eee) - right at the edge, not the "reasonable margin above the legal minimum" contrast fix asked for. #555 clears every combination in this sheet with real headroom (6.4:1+) while staying visually "muted" rather than becoming regular body text. */ --light-muted: #555; --light-muted-bg: #eee; --light-border: #ddd; --light-surface: #fff; --light-surface-alt: #f4f4f4; --light-accent-bg: #eef2fb; --light-link: #2454b0; --light-danger: #b02a2a; --light-danger-bg: #fbeaea; --light-ok: #1a7a3c; --light-ok-bg: #e6f6ea; --light-warn: #7a5c00; --light-warn-bg: #fff8e1; --light-warn-border: #e0c56b; /* Card elevation (landing page only) - a plain rgba(0,0,0,...) shadow stops reading entirely once the surface it's cast on is already dark (--dark-surface #1e1e1e on --dark-bg #121212), so this needs its own per-theme value like everything else here rather than one constant: light mode gets a real (if faint) drop shadow, dark mode gets a subtle accent-tinted glow instead - the standard swap for communicating elevation once shadows themselves stop being visible. */ --light-shadow: rgba(30, 41, 82, 0.07); --light-shadow-hover: rgba(30, 41, 82, 0.14); --dark-bg: #121212; --dark-fg: #e8e8e8; --dark-muted: #a8a8a8; --dark-muted-bg: #2a2a2a; --dark-border: #3a3a3a; --dark-surface: #1e1e1e; --dark-surface-alt: #262626; --dark-accent-bg: #16233d; --dark-link: #7fb0ff; --dark-danger: #ff8a8a; --dark-danger-bg: #3a1414; --dark-ok: #6fd08c; --dark-ok-bg: #123420; --dark-warn: #e8c468; --dark-warn-bg: #3a2f0a; --dark-warn-border: #5c4a12; --dark-shadow: rgba(0, 0, 0, 0.45); /* Glow, not shadow - see --light-shadow-hover's comment above. */ --dark-shadow-hover: rgba(127, 176, 255, 0.22); /* Constant across both themes - see the comment block above. */ --accent: #2454b0; --danger-action: #b02a2a; --radius: 6px; /* Layer 1: default to light. */ --bg: var(--light-bg); --fg: var(--light-fg); --muted: var(--light-muted); --muted-bg: var(--light-muted-bg); --border: var(--light-border); --surface: var(--light-surface); --surface-alt: var(--light-surface-alt); --accent-bg: var(--light-accent-bg); --link: var(--light-link); --danger: var(--light-danger); --danger-bg: var(--light-danger-bg); --ok: var(--light-ok); --ok-bg: var(--light-ok-bg); --warn: var(--light-warn); --warn-bg: var(--light-warn-bg); --warn-border: var(--light-warn-border); --shadow: var(--light-shadow); --shadow-hover: var(--light-shadow-hover); } /* Layer 2: system preference, only when no manual choice has been made. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: var(--dark-bg); --fg: var(--dark-fg); --muted: var(--dark-muted); --muted-bg: var(--dark-muted-bg); --border: var(--dark-border); --surface: var(--dark-surface); --surface-alt: var(--dark-surface-alt); --accent-bg: var(--dark-accent-bg); --link: var(--dark-link); --danger: var(--dark-danger); --danger-bg: var(--dark-danger-bg); --ok: var(--dark-ok); --ok-bg: var(--dark-ok-bg); --warn: var(--dark-warn); --warn-bg: var(--dark-warn-bg); --warn-border: var(--dark-warn-border); --shadow: var(--dark-shadow); --shadow-hover: var(--dark-shadow-hover); } } /* Layer 3: manual override via the nav toggle - wins regardless of OS preference, in either direction. */ :root[data-theme="dark"] { --bg: var(--dark-bg); --fg: var(--dark-fg); --muted: var(--dark-muted); --muted-bg: var(--dark-muted-bg); --border: var(--dark-border); --surface: var(--dark-surface); --surface-alt: var(--dark-surface-alt); --accent-bg: var(--dark-accent-bg); --link: var(--dark-link); --danger: var(--dark-danger); --danger-bg: var(--dark-danger-bg); --ok: var(--dark-ok); --ok-bg: var(--dark-ok-bg); --warn: var(--dark-warn); --warn-bg: var(--dark-warn-bg); --warn-border: var(--dark-warn-border); --shadow: var(--dark-shadow); --shadow-hover: var(--dark-shadow-hover); } :root[data-theme="light"] { --bg: var(--light-bg); --fg: var(--light-fg); --muted: var(--light-muted); --muted-bg: var(--light-muted-bg); --border: var(--light-border); --surface: var(--light-surface); --surface-alt: var(--light-surface-alt); --accent-bg: var(--light-accent-bg); --link: var(--light-link); --danger: var(--light-danger); --danger-bg: var(--light-danger-bg); --ok: var(--light-ok); --ok-bg: var(--light-ok-bg); --warn: var(--light-warn); --warn-bg: var(--light-warn-bg); --warn-border: var(--light-warn-border); --shadow: var(--light-shadow); --shadow-hover: var(--light-shadow-hover); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.5; } header { border-bottom: 1px solid var(--border); background: var(--surface); } nav { max-width: 960px; margin: 0 auto; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } nav .brand { font-weight: 700; font-size: 1.1rem; color: var(--fg); text-decoration: none; margin-right: auto; display: flex; align-items: center; gap: 0.5rem; } nav .brand-logo { height: 120px; width: 120px; object-fit: contain; } nav a, nav button { color: var(--link); text-decoration: none; font-size: 0.95rem; } nav form.inline { display: inline; } nav button { background: none; border: none; padding: 0; cursor: pointer; font: inherit; } /* Distinguished from plain nav links/the Log out button with a pill border, since clicking it doesn't navigate anywhere - same visual language as .admin-nav a's pill shape, reused rather than inventing a new one. Label text (Auto/Light/Dark) is set by webapp/static/ theme.js; server-rendered as "Auto" so it's meaningful even before the script runs. */ .theme-toggle { border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.85rem; } main { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem 3rem; min-height: 60vh; } footer { border-top: 1px solid var(--border); padding: 1.25rem 1rem; font-size: 0.95rem; color: var(--muted); } footer p { max-width: 960px; margin: 0 auto; } h1 { font-size: 1.6rem; margin: 0 0 1rem; } h2 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; } a { color: var(--link); } .disclaimer { background: var(--accent-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; font-size: 0.95rem; color: var(--muted); margin-bottom: 1rem; } .error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); border-radius: var(--radius); padding: 0.6rem 0.9rem; margin-bottom: 1rem; font-size: 0.95rem; } .notice { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); border-radius: var(--radius); padding: 0.6rem 0.9rem; margin-bottom: 1rem; font-size: 0.95rem; } form.card, .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; max-width: 480px; } label { display: block; font-weight: 600; font-size: 0.95rem; margin: 0.9rem 0 0.25rem; } label.checkbox { display: flex; align-items: center; gap: 0.5rem; font-weight: normal; } input[type=text], input[type=email], input[type=password], input[type=url], select, textarea { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; background: var(--surface); color: var(--fg); } textarea { min-height: 8rem; font-family: ui-monospace, monospace; font-size: 0.9rem; } button, input[type=submit], .btn { display: inline-block; margin-top: 1rem; padding: 0.55rem 1.1rem; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; } button.secondary, .btn.secondary { background: var(--surface); color: var(--link); border: 1px solid var(--link); } /* --danger-action, not --danger: this is a solid button background paired with the base button rule's white text above, so it needs to stay the same darker red in both themes (same reasoning as --accent vs --link) - --danger itself becomes a pale red in dark mode so it stays readable as TEXT on a dark page (.error, .badge.removed), which would make white text on top of it unreadable if reused here. */ button.danger { background: var(--danger-action); } .filters { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .filters select, .filters input { width: auto; } .block-list { display: grid; gap: 0.75rem; } /* Browse page only (index.html) - two columns on desktop by default. Bare .block-list (search results, etc.) is untouched. Collapses back to one column under the existing 720px breakpoint below. */ .block-list-grid { grid-template-columns: repeat(2, 1fr); } .pagination { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0; font-size: 0.9rem; } .pagination span { color: var(--muted); } .block-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; display: block; color: var(--fg); text-decoration: none; } .block-card:hover { border-color: var(--link); } .block-card h3 { margin: 0 0 0.25rem; font-size: 1.05rem; } .block-card .meta { font-size: 0.8rem; color: var(--muted); } .badge { display: inline-block; font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--accent-bg); color: var(--link); margin-right: 0.35rem; } .badge.validated { background: var(--ok-bg); color: var(--ok); } .badge.pending { background: var(--warn-bg); color: var(--warn); } .badge.removed { background: var(--danger-bg); color: var(--danger); } .badge.shadow { background: var(--muted-bg); color: var(--muted); } pre.template { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; white-space: pre-wrap; word-break: break-word; font-size: 0.9rem; } /* In-place expand/collapse for block text on the moderation queue - a native
, so no JS is needed and it stays collapsed by default with no extra markup. */ .block-text-toggle { display: inline-block; margin-left: 0.4rem; vertical-align: middle; } .block-text-toggle summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border: 1px solid var(--border); border-radius: 4px; font-weight: 700; user-select: none; color: var(--muted); } .block-text-toggle summary::-webkit-details-marker { display: none; } .block-text-toggle summary::before { content: "+"; } .block-text-toggle[open] summary::before { content: "\2212"; } .block-text-toggle pre.template { margin: 0.5rem 0 0; max-width: 600px; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; } .stat-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1rem 0; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1.1rem; } .stat .value { font-size: 1.4rem; font-weight: 700; } .stat .label { font-size: 0.78rem; color: var(--muted); } .rating-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .rating-form select { width: auto; } .admin-nav { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .admin-nav a { font-size: 0.85rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--fg); text-decoration: none; } .admin-nav a:hover { border-color: var(--link); color: var(--link); } .admin-nav a.active { background: var(--accent); border-color: var(--accent); color: #fff; } .chart-section { margin: 1.75rem 0; } /* The canvas element's own CSS background/border only - Chart.js draws the actual bars/lines/labels via JS with its own colors, which this task's CSS-variable pass doesn't touch (admin/analytics wasn't in the pages this task asked to verify). */ .chart-section canvas { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; max-width: 100%; } th.sortable a { color: inherit; text-decoration: none; } th.sortable a:hover { color: var(--link); } .footer-links { margin-top: 0.5rem; } .footer-links a { margin-right: 0.25rem; } .cookie-notice { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -2px 8px rgba(0,0,0,0.08); padding: 0.85rem 1rem; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; } .cookie-notice p { margin: 0; font-size: 0.95rem; color: var(--muted); } .cookie-notice form { margin: 0; } .cookie-notice button { margin: 0; padding: 0.4rem 1rem; } /* Prompt builder (/build) */ .builder-layout { display: flex; gap: 1.5rem; align-items: flex-start; } .builder-left { flex: 0 0 40%; min-width: 0; } .builder-right { flex: 1 1 60%; min-width: 0; } .slot-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 0.6rem; } .slot-section summary { font-weight: 600; cursor: pointer; } .slot-desc { color: var(--muted); font-size: 0.95rem; margin: 0.35rem 0; } .slot-snippet { color: var(--muted); font-size: 0.95rem; font-family: ui-monospace, monospace; margin: 0.15rem 0 0.5rem; } .slot-empty { color: var(--muted); font-style: italic; } .slot-current { margin-bottom: 0.5rem; } .slot-suggestion { background: var(--accent-bg); border-radius: var(--radius); padding: 0.5rem 0.65rem; margin: 0.5rem 0; } #preview-card { min-height: 12rem; } .preview-empty { color: var(--muted); } .preview-label { font-size: 0.72rem; font-weight: 700; color: var(--link); letter-spacing: 0.03em; margin-top: 1rem; } .preview-label:first-child { margin-top: 0; } .preview-block { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, monospace; font-size: 0.9rem; margin: 0.25rem 0 0; } .var-placeholder { background: var(--warn-bg); color: var(--warn); padding: 0 0.15rem; border-radius: 3px; font-weight: 600; } /* Landing page (/) - alternating full-bleed/regular-width sections. .landing-hero/.landing-band break out of
's 960px cap via the standard left:50%/-50vw full-bleed technique; .landing-band-inner re-caps their content back to 960px so it lines up with every other section. overflow-x:hidden on body (below) is required alongside this - 100vw includes the scrollbar's own width, which without it can add a few px of horizontal scroll on some browsers. Section headings get a .landing-eyebrow above them (small/uppercase/ tracked, in --link) for real typographic hierarchy instead of relying on heading size alone. Most sections are plain text - not every section needs a graphic; the two that benefit most from one (the hero, and Composing blocks) get a .landing-mockup instead. */ body { overflow-x: hidden; } .landing-hero, .landing-band { position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; } .landing-hero { background: linear-gradient(180deg, var(--accent-bg) 0%, var(--bg) 100%); } .landing-band { background: var(--surface-alt); } .landing-band-inner, .landing-section { max-width: 960px; margin: 0 auto; padding: 3.5rem 1.25rem; } .landing-hero .landing-band-inner { padding: 4.5rem 1.25rem 4rem; } .landing-eyebrow { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); margin: 0 0 0.5rem; } .landing-heading { font-size: 1.55rem; font-weight: 700; line-height: 1.25; margin: 0 0 1rem; text-wrap: balance; } .landing-hero h1 { font-size: 2.6rem; font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 1rem; text-wrap: balance; } .landing-lede { font-size: 1.05rem; color: var(--muted); line-height: 1.6; max-width: 46ch; } .landing-section p, .landing-band p { line-height: 1.6; max-width: 62ch; } .landing-split { display: flex; align-items: center; gap: 3rem; } .landing-split > * { flex: 1 1 50%; min-width: 0; } .landing-graphic { display: flex; justify-content: center; } /* Problem/solution cards (Why it's useful, The First Composable...) - text-led, no icon: a colored left rule plus real heading/body hierarchy carries these instead of an icon that would just repeat what the heading already says. */ .landing-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .landing-card { text-align: left; border-left: 3px solid var(--link); box-shadow: 0 1px 3px var(--shadow); transition: transform 0.15s ease, box-shadow 0.15s ease; } .landing-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px var(--shadow-hover); } .landing-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 700; } .landing-card p { margin: 0; color: var(--muted); font-size: 0.92rem; max-width: none; } /* Dark UI mockups (hero, Composing blocks) - a deliberately fixed dark visual world independent of the page's own light/dark toggle, the same way an actual product screenshot wouldn't re-theme itself when the surrounding docs site's theme changes. Built from real UI language (rows, chips, a primary button, a floating search card) rather than line-art illustration, closer to what a genuine screenshot looks like. */ .landing-mockup { position: relative; width: 100%; max-width: 380px; margin: 0 auto; } .landing-mockup-has-float { padding-top: 3.4rem; } .landing-mockup-panel { position: relative; z-index: 1; background: linear-gradient(165deg, #16213a 0%, #070b14 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 1.5rem 1.4rem 1.6rem; box-shadow: 0 24px 50px rgba(4,8,20,0.4); color: rgba(255,255,255,0.92); } .landing-mockup-heading { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.15rem; } .landing-mockup-sub { font-size: 0.82rem; color: rgba(255,255,255,0.5); margin: 0 0 1.1rem; } .landing-mockup-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.2rem; } .landing-mockup-row { display: flex; align-items: center; gap: 0.6rem; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; padding: 0.6rem 0.75rem; font-size: 0.82rem; } .landing-mockup-row .landing-icon { width: 16px; height: 16px; color: rgba(255,255,255,0.65); flex-shrink: 0; } .landing-mockup-row-label { flex: 1; } .landing-mockup-chevron { color: rgba(255,255,255,0.35); font-size: 1rem; line-height: 1; } .landing-mockup-btn-primary { display: block; text-align: center; background: var(--accent); color: #fff; font-weight: 600; font-size: 0.88rem; padding: 0.7rem 1rem; border-radius: 10px; } .landing-mockup-float { position: absolute; top: 0; left: 0; z-index: 2; width: 78%; background: rgba(28,38,58,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; padding: 0.85rem 1rem; box-shadow: 0 14px 34px rgba(4,8,20,0.35); color: rgba(255,255,255,0.92); } .landing-mockup-float-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.45); margin-bottom: 0.5rem; } .landing-mockup-float-row { display: flex; gap: 0.5rem; align-items: center; } .landing-mockup-input { flex: 1; min-width: 0; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 0.45rem 0.6rem; font-size: 0.76rem; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .landing-mockup-btn { background: var(--accent); color: #fff; font-size: 0.76rem; font-weight: 600; padding: 0.45rem 0.8rem; border-radius: 8px; white-space: nowrap; flex-shrink: 0; } /* Composing-blocks variant - pills merging into one assembled preview. */ .landing-mockup-pills { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; } .landing-mockup-pill { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.78rem; } .landing-mockup-plus { color: rgba(255,255,255,0.3); font-size: 0.9rem; } .landing-mockup-divider { display: flex; justify-content: center; color: rgba(255,255,255,0.3); margin: 0.3rem 0 1.1rem; } .landing-mockup-divider .landing-icon { width: 1.1rem; height: 1.1rem; transform: rotate(90deg); } .landing-mockup-preview { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 0.9rem 1rem; } .landing-mockup-preview-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.45); margin: 0 0 0.5rem; } .landing-mockup-preview-text { font-family: ui-monospace, monospace; font-size: 0.76rem; line-height: 1.65; color: rgba(255,255,255,0.78); margin: 0; } .landing-icon { display: block; } @media (max-width: 720px) { .builder-layout { flex-direction: column; } .builder-left, .builder-right { flex: 1 1 100%; width: 100%; } .block-list-grid { grid-template-columns: 1fr; } .landing-cards { grid-template-columns: 1fr; } .landing-split { flex-direction: column; gap: 2rem; } .landing-hero h1 { font-size: 1.95rem; } .landing-hero .landing-band-inner { padding: 3rem 1.25rem; } }