:root { /* Layout dimensions (ALIGNMENT.md §1). Deliberately on :root, not on the section wrapper: --content-inset used to live on .card, so removing the card would have silently broken all 17 places that use it. */ /* User requirement: filters/results should ALWAYS align with the header bar (Home/Theme button) — "toolbar as the reference for the max width." A separate --browse-max just for the Browse page (first attempt) broke that, because .site-toolbar-inner kept using --strip-max. Now there's ONE shared value for the header bar, home hero, Compare page, AND Browse layout — that way they always stay mathematically aligned, no two widths that can drift apart. Was briefly 1600px (an attempt to use screen width better), but on wide/external displays that left almost no breathing room left/right at the screen edge ("no breathing room at the edges") — back to the original 1200px value, which leaves a noticeable margin on large screens again. */ --strip-max: 1200px; --page-gutter: 24px; /* Width of the row marker plus its gap: step badge 28px + 14px, or icon-chip 34px + 8px = 42px. That's where the TITLE TEXT starts. */ --marker-inset: 42px; /* On wide screens, content starts at the same spot as the title text, i.e. at the marker inset. On narrow screens this becomes 0 (see the media query at the end of the file) — hence the two separate variables. */ --content-inset: var(--marker-inset); /* Seam line between two sections (ALIGNMENT.md §5): opacity-based white, no fixed hex value per theme — a single definition for both modes. Measured at the Filter→Results seam (contrast of the line against the background above/below): light: 0.30 ≈ 1.2 (even at 1.0 it's only 1.38 — on the near-white gradients, white inevitably stays invisible, more opacity doesn't help there) dark: 0.30 ≈ 3.8 (clearly visible; 0.60 would already be harsh at ~6.9) Hence the lower end of the given range: in dark mode the line should stay subdued. See ALIGNMENT.md §5 for the asymmetry between the modes. */ --section-divider: rgba(255, 255, 255, 0.30); /* Layer 9: color system spec (Light). --bg now carries EVERY section (Filter/Results/ Sources/Compare) — the earlier per-section gradients are deliberately reduced to the same flat value (see --section-*-grad below); the brand color now only lives on interactive elements (buttons/active chips/links/badges) and in the hero gradient. */ --bg: #f7f8f9; --card-bg: #ffffff; --text: #0f172a; --text-muted: #47535f; --border: #a7b4bd; /* "Secondary" from the spec: active states, selected chips, links, icons. */ --accent: #14b8a6; --accent-light: #2dd4bf; --accent-dark: #0d9488; --accent-bg: #e6fbf6; --accent-contrast: #ffffff; --row-hover: #f0faf9; --header-bg: #edf6f5; --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 14px 32px -12px rgba(15, 23, 42, 0.22); --shadow-hover: 0 1px 3px rgba(15, 23, 42, 0.10), 0 24px 48px -16px rgba(15, 23, 42, 0.32); /* No more gradients outside the hero — every section carries the same flat page background. Variable names deliberately kept as-is (not renamed/removed) so every existing usage site stays unchanged and automatically picks up the new, flat value. */ --section-filter-grad: var(--bg); --section-results-grad: var(--bg); --section-sources-grad: var(--bg); --section-hero-grad: linear-gradient(135deg, #0c4a6e 0%, #0369a1 30%, #0891b2 60%, #14b8a6 85%, #5eead4 100%); --panel-bg: rgba(255, 255, 255, 0.82); /* A dedicated, noticeably more transparent value just for the header bar (Layer 6, Part A: "transparent + blur" like on apple.com) — --panel-bg itself stays at 0.82 for modals/the funnel button, where opacity for readability over a changing background matters more than the glass effect. */ --toolbar-bg: rgba(255, 255, 255, 0.55); --tab-inactive-bg: #cfd8dd; --tab-lift-shadow: 0 -2px 4px -3px rgba(15, 23, 42, 0.15); /* "Primary" from the spec: primary CTAs (Explore/Compare buttons), headings. */ --primary: #0369a1; --primary-hover: #075985; --primary-contrast: #ffffff; /* A noticeably lighter tone ONLY for gradients (user requirement: "the Compare button gradient should look more visible/3D") — --primary/--primary-hover are too close together to stand out as a gradient. */ --primary-light: #38bdf8; /* "Accent — Coral": secondary/utility actions (sort, reset, filter trigger). IMPORTANT: coral ALWAYS gets dark text (--coral-text), never white — identical in both themes, see the spec's contrast rule. */ --coral: #f2735c; --coral-hover: #e35f47; --coral-text: #0f172a; /* "Accent — Gold": Top-X% badge, "featured" preset marker, filter-count badge — replaces the previous bespoke amber (--achievement-*) with the exact same spec value. Dark text like coral: gold is light/saturated enough that white would have too little contrast. */ --gold: #fea816; --gold-text: #0f172a; /* Type color coding per the spec, now as a "soft badge" (user requirement): a light tint of the role color as the background + the same hue, saturated, as the text, instead of a solid fill + near-black text — fits better with the mostly-white background (Layer 9, §3) and reads less "muddy" than the old combination. */ --type-gymnasium-bg: #eef1fd; --type-gymnasium-text: #4c5fd5; --type-stadtteilschule-bg: #e6fbf9; --type-stadtteilschule-text: #0d9488; /* Muted teal ONLY for the slider fill (user requirement: "muted, not saturated") — the handle/thumb deliberately stays var(--accent), since per spec handles keep the action color. */ --accent-muted: rgba(20, 184, 166, 0.35); /* The filter-count badge stays gold (spec role "Accent-Gold: ... filter count badge"), unchanged. The Top-X% card badge (.card-achievement-badge) deviates from that and now has its OWN coral tokens (user requirement, an experiment) — so it's no longer an alias for --gold, but two separate roles. */ --achievement-bg: var(--gold); --achievement-text: var(--gold-text); --achievement-badge-bg: #fdece7; --achievement-badge-text: #e35f47; /* Genuinely neutral gray for the three card metric boxes (user requirement: "not teal") — deliberately its own token instead of reusing --header-bg, which has a visible blue-green cast in light mode (#edf6f5) — exactly what should be avoided here. */ --stat-block-bg: #f0f1f3; } @media (prefers-color-scheme: dark) { :root { /* Layer 9 (Dark): deep navy instead of pure black (spec), no more per-section gradients, hero gradient deliberately IDENTICAL to the light theme (see below). */ --bg: #0b1622; /* --card-bg/--border/--shadow (user requirement, see the "1+2+3" artifact preview): in the dark theme, --bg/--card-bg/--border were practically the same brightness AND the drop shadow is invisible on a black background — the filter box/cards barely stood out from the background. card-bg lightened away from the page (lever 2), border raised noticeably (lever 1), --shadow additionally gets a faint light top-edge sheen (lever 3) — the standard trick for depth in dark mode, where a dark drop shadow alone shows nothing. */ --card-bg: #17273a; --text: #f1f5f9; --text-muted: #8ea3a6; --border: #33484a; --accent: #2dd4bf; --accent-light: #5eead4; --accent-dark: #14b8a6; --accent-bg: rgba(45, 212, 191, 0.12); --accent-contrast: #04211d; --row-hover: rgba(45, 212, 191, 0.07); --header-bg: #1a2534; --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 32px -14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); --shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.45), 0 24px 48px -16px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05); --section-filter-grad: var(--bg); --section-results-grad: var(--bg); --section-sources-grad: var(--bg); /* Deliberately the same gradient definition as the light theme (spec: "pixel-identical between themes, don't create a separate dark hero gradient"). */ --section-hero-grad: linear-gradient(135deg, #0c4a6e 0%, #0369a1 30%, #0891b2 60%, #14b8a6 85%, #5eead4 100%); --panel-bg: rgba(17, 30, 46, 0.82); --toolbar-bg: rgba(17, 30, 46, 0.55); --tab-inactive-bg: #33454b; --tab-lift-shadow: 0 -2px 4px -3px rgba(0, 0, 0, 0.45); --primary: #38bdf8; --primary-hover: #0ea5e9; --primary-contrast: #04222f; --primary-light: #7dd3fc; --coral: #fb8a6c; --coral-hover: #f2735c; --coral-text: #0f172a; --gold: #fbbf24; --gold-text: #0f172a; --type-gymnasium-bg: rgba(139, 158, 232, 0.16); --type-gymnasium-text: #8b9ee8; --type-stadtteilschule-bg: rgba(34, 211, 196, 0.16); --type-stadtteilschule-text: #22d3c4; --accent-muted: rgba(45, 212, 191, 0.32); --achievement-bg: var(--gold); --achievement-text: var(--gold-text); --achievement-badge-bg: rgba(251, 138, 108, 0.16); --achievement-badge-text: #fb8a6c; --stat-block-bg: rgba(255, 255, 255, 0.06); } } :root[data-theme="dark"] { --bg: #0b1622; --card-bg: #17273a; --text: #f1f5f9; --text-muted: #8ea3a6; --border: #33484a; --accent: #2dd4bf; --accent-light: #5eead4; --accent-dark: #14b8a6; --accent-bg: rgba(45, 212, 191, 0.12); --accent-contrast: #04211d; --row-hover: rgba(45, 212, 191, 0.07); --header-bg: #1a2534; --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 32px -14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); --shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.45), 0 24px 48px -16px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05); --section-filter-grad: var(--bg); --section-results-grad: var(--bg); --section-sources-grad: var(--bg); --section-hero-grad: linear-gradient(135deg, #0c4a6e 0%, #0369a1 30%, #0891b2 60%, #14b8a6 85%, #5eead4 100%); --panel-bg: rgba(17, 30, 46, 0.82); --toolbar-bg: rgba(17, 30, 46, 0.55); --tab-inactive-bg: #33454b; --tab-lift-shadow: 0 -2px 4px -3px rgba(0, 0, 0, 0.45); --primary: #38bdf8; --primary-hover: #0ea5e9; --primary-contrast: #04222f; --primary-light: #7dd3fc; --coral: #fb8a6c; --coral-hover: #f2735c; --coral-text: #0f172a; --gold: #fbbf24; --gold-text: #0f172a; --type-gymnasium-bg: rgba(139, 158, 232, 0.16); --type-gymnasium-text: #8b9ee8; --type-stadtteilschule-bg: rgba(34, 211, 196, 0.16); --type-stadtteilschule-text: #22d3c4; --accent-muted: rgba(45, 212, 191, 0.32); --achievement-bg: var(--gold); --achievement-text: var(--gold-text); --achievement-badge-bg: rgba(251, 138, 108, 0.16); --achievement-badge-text: #fb8a6c; --stat-block-bg: rgba(255, 255, 255, 0.06); } :root[data-theme="light"] { --bg: #f7f8f9; --card-bg: #ffffff; --text: #0f172a; --text-muted: #47535f; --border: #a7b4bd; --accent: #14b8a6; --accent-light: #2dd4bf; --accent-dark: #0d9488; --accent-bg: #e6fbf6; --accent-contrast: #ffffff; --row-hover: #f0faf9; --header-bg: #edf6f5; --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 14px 32px -12px rgba(15, 23, 42, 0.22); --shadow-hover: 0 1px 3px rgba(15, 23, 42, 0.10), 0 24px 48px -16px rgba(15, 23, 42, 0.32); --section-filter-grad: var(--bg); --section-results-grad: var(--bg); --section-sources-grad: var(--bg); --section-hero-grad: linear-gradient(135deg, #0c4a6e 0%, #0369a1 30%, #0891b2 60%, #14b8a6 85%, #5eead4 100%); --panel-bg: rgba(255, 255, 255, 0.82); --toolbar-bg: rgba(255, 255, 255, 0.55); --tab-inactive-bg: #cfd8dd; --tab-lift-shadow: 0 -2px 4px -3px rgba(15, 23, 42, 0.15); --primary: #0369a1; --primary-hover: #075985; --primary-contrast: #ffffff; --primary-light: #38bdf8; --coral: #f2735c; --coral-hover: #e35f47; --coral-text: #0f172a; --gold: #fea816; --gold-text: #0f172a; --type-gymnasium-bg: #eef1fd; --type-gymnasium-text: #4c5fd5; --type-stadtteilschule-bg: #e6fbf9; --type-stadtteilschule-text: #0d9488; --accent-muted: rgba(20, 184, 166, 0.35); --achievement-bg: var(--gold); --achievement-text: var(--gold-text); --achievement-badge-bg: #fdece7; --achievement-badge-text: #e35f47; --stat-block-bg: #f0f1f3; } * { box-sizing: border-box; } /* NO overflow-x on html (neither hidden nor clip) — clip also turned out to be a sticky killer: position:sticky broke not only on real Safari/iPad, but reproducibly in Chromium too, as soon as html carried any overflow-x other than visible (verified with Playwright: .sidebar-panel followed the scroll 1:1 instead of sticking, as soon as this line was set). The original reason for the line (a ~44px-wide horizontal overlap from .trend-nodata-tooltip, which used to run past the viewport edge as a nowrap row) is fixed at the source (see .trend-nodata-tooltip: max-width + line wrapping) — which also makes the originally-feared mobile bottom-sheet problem (position:fixed; inset:0 picking up the inflated width instead of the real device width) moot, with no need for this line at all. */ body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); /* No more padding: the sections run to the screen edge and bring their own vertical spacing (ALIGNMENT.md §1/§5). */ padding: 0; /* Layer 9 (spec §3): "Remove all other gradients... apply consistently" — the two radial glow gradients used to sit BEHIND EVERY page (Browse/Compare/Sources too), not just behind the hero. Replaced with the flat page background. */ background: var(--bg); } /* Just a flow container now, no more width limit — that now lives per-section on .section-inner, so the background stays edge-to-edge and only the text is constrained. */ .wrap { width: 100%; } /* --- Full-bleed sections (ALIGNMENT.md §1) -------------------------------------------------- .section carries the background + vertical spacing and runs from screen edge to screen edge; .section-inner is ONLY a reading width (centered, no background of its own, no border, no shadow — otherwise it would be a card again). */ .section { position: relative; padding: 40px 0; } /* Applies to EVERY seam (hero→filter, filter→results, results→sources), since the hero section is the first one and so is the only one with no predecessor. */ .section + .section { border-top: 1px solid var(--section-divider); } .section-inner { max-width: var(--strip-max); margin: 0 auto; padding: 0 var(--page-gutter); } /* Layer 6: shared header bar, across pages (see the index.html comment on #siteToolbar). position:sticky instead of fixed+JS positioning: in its normal state it automatically reserves its own place in the flow (no jump in the content below it when it first sticks) and sticks itself to top:0 on its own as soon as it's about to scroll out of the viewport — JS only handles the show/hide via translateY per scroll direction (updateToolbarOnScroll() in app.js), not the positioning itself. */ .site-toolbar { position: sticky; top: 0; z-index: 250; background: var(--toolbar-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--section-divider); transition: transform 0.28s ease; } .site-toolbar.is-hidden { transform: translateY(-100%); } .site-toolbar-inner { max-width: var(--strip-max); margin: 0 auto; padding: 8px var(--page-gutter); } /* Fixed row: Home on the left, Language/Theme on the right. Deliberately NOT the same flex row as the dropdown menus (.toolbar-menu, see below) — only this way does its height stay constant regardless of whether a menu is open, and Home/triggers don't slide down when one opens. */ .toolbar-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .toolbar-home { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: 0.86rem; font-weight: 600; text-decoration: none; flex-shrink: 0; transition: color 0.15s ease, transform 0.15s ease; } .toolbar-home:hover { color: var(--accent-dark); transform: translateY(-1px); } .toolbar-home:active { transform: scale(0.96); } .toolbar-home svg { width: 17px; height: 17px; flex-shrink: 0; } .toolbar-right { display: flex; align-items: center; gap: 8px; } /* Schools/Compare: plain text links with no button chrome (no border/background) — deliberately the same look as .toolbar-home (color/weight/size), just without an icon. They live INSIDE .toolbar-right (before the existing lang/theme triggers), so .toolbar-bar's justify-content:space-between still only anchors Home on the left and this whole group on the right — the lang/theme triggers therefore stay completely unchanged in style/position/ behavior. Weight dialed to 600 (instead of 700), slightly dimmed; the color was set to --text-muted as a test, then reverted to --text (normal text color) per explicit request — should NOT look gray. */ .toolbar-nav-link { color: var(--text); font-size: 0.86rem; font-weight: 600; text-decoration: none; transition: color 0.15s ease; } .toolbar-nav-link:hover { color: var(--accent-dark); } /* Dedicated spacing ONLY between Schools and Compare, AND between Compare and the lang trigger (not via the shared .toolbar-right gap, which would otherwise also apply between Lang and Theme) — more generous than the usual 8px, so neither Schools+Compare nor Compare+Lang read as a matched pair (user requirement). */ .toolbar-nav-link-desktop:first-of-type { margin-right: 22px; } .toolbar-nav-link-desktop:last-of-type { margin-right: 22px; } /* Hamburger trigger for Schools/Compare (+ future further entries) on mobile: hidden by default, only visible < 600px (see the media query below). Deliberately FRAMELESS (no border/background/shadow like the lang/theme trigger) and larger than the original 17px icon — a plain icon glyph instead of a button chip, sits in the markup as the LAST child of .toolbar-right so it always sits furthest right on mobile (after Lang/Theme). */ .nav-menu-trigger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text); cursor: pointer; transition: color 0.15s ease, transform 0.15s ease; } .nav-menu-trigger:hover { color: var(--accent-dark); } .nav-menu-trigger:active { transform: scale(0.92); } .nav-menu-trigger svg { width: 24px; height: 24px; } /* #navMenu stacks vertically instead of wrapping row by row like the lang/theme menu — every new toolbar entry simply stacks below the others going forward (user requirement), no second column. */ .toolbar-menu-vertical { flex-direction: column; align-items: stretch; } /* Deliberately FRAMELESS (no border/background like lang-btn/theme-option) — plain text rows, only a subtle fill on hover/tap as feedback. */ .toolbar-menu-link { display: flex; align-items: center; padding: 10px 4px; border-radius: 6px; border: none; background: transparent; color: var(--text); font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .toolbar-menu-link:hover { background: var(--row-hover); color: var(--text); } .toolbar-menu-link:active { background: var(--row-hover); } @media (max-width: 600px) { .toolbar-nav-link-desktop { display: none; } .nav-menu-trigger { display: flex; } /* Home/Schools/Compare are a bit larger on mobile than the desktop base value (user requirement) — the Home icon grows at the same ratio (17px -> 20px, ~+18%, like the text 0.86rem -> 1rem), otherwise it would look too small/out of proportion next to the larger text. */ .toolbar-home { font-size: 1rem; } .toolbar-home svg { width: 20px; height: 20px; } .toolbar-menu-link { font-size: 1rem; } } /* Tablet/iPad only — Home/Schools/Compare noticeably larger here than the plain desktop value (0.86rem). Two earlier attempts with fixed width breakpoints (0.94rem, then 1rem at max-width:1024px) still didn't work per user feedback: many iPads in landscape (Air/Pro etc.) are WIDER than 1024px (e.g. 1180/1194/1366px) and so fell completely outside the old max-width window. Now detected via touch capability instead (hover:none + pointer:coarse = finger instead of mouse/trackpad) — catches it reliably regardless of orientation/exact width. min-width:601px prevents overlap with the mobile rule above (there the desktop links are already hidden via display:none anyway). Plain desktop/laptop with a mouse (pointer:fine) stays unchanged at 0.86rem/17px. */ @media (min-width: 601px) and (hover: none) and (pointer: coarse) { .toolbar-home { font-size: 1rem; } .toolbar-home svg { width: 20px; height: 20px; } .toolbar-nav-link { font-size: 1rem; } } /* Lang/theme trigger: deliberately NOT a circle (small border-radius instead of 999px) — a rounded rectangle, the same shape for both, so they read as a matched pair. */ .lang-trigger { height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--card-bg); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; color: var(--text); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .lang-trigger:hover { transform: scale(1.05); } .lang-trigger:active { transform: scale(0.94); } /* Only the trigger IN the header bar gets overridden, not the .theme-trigger base class itself — #themeTrigger here shares that class with the floating funnel button (#jumpToFilterBtn), which per spec must stay unchanged (44px, round). Scoped via the ID, the funnel button stays completely unaffected by this. */ #siteToolbar .theme-trigger { width: auto; height: 34px; padding: 0 10px; border-radius: 9px; background: var(--card-bg); backdrop-filter: none; } #siteToolbar .theme-trigger svg { width: 17px; height: 17px; } /* Both selection lists (Language/Theme) sit as their own block DIRECTLY below .toolbar-bar instead of as a sibling of their respective trigger (see the HTML comment on .toolbar-bar) — opening them grows .site-toolbar-inner itself (and with it the whole header bar including background/blur/border) downward, without touching the fixed .toolbar-bar row. */ .toolbar-menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: max-height 0.22s ease, opacity 0.18s ease, margin-top 0.22s ease; } .toolbar-menu.open { max-height: 200px; opacity: 1; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--section-divider); } .toolbar-menu .lang-btn, .theme-option { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } .toolbar-menu .lang-btn:hover, .theme-option:hover { background: var(--row-hover); color: var(--text); } .toolbar-menu .lang-btn:active, .theme-option:active { transform: scale(0.96); } .toolbar-menu .lang-btn.active, .theme-option.active { background: var(--accent-bg); color: var(--accent-dark); border-color: var(--accent); } .theme-option svg { width: 15px; height: 15px; flex-shrink: 0; } /* Shows only the SVG for the SELECTED theme state (not the resolved appearance of "System") in the trigger — the same hidden/visible toggling as .jump-icon-filter/.jump-icon-add on #jumpToFilterBtn, driven here by updateThemeTriggerIcon() in app.js. */ .theme-trigger-icon { display: none; } .theme-trigger-icon.active { display: block; } .section-hero { position: relative; overflow: hidden; background: var(--section-hero-grad); padding: 44px 0 48px; } .section-filter { background: var(--section-filter-grad); } .section-results { background: var(--section-results-grad); } .section-sources { background: var(--section-sources-grad); } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .hero-fade { opacity: 0; animation: heroFadeUp 0.75s ease forwards; } .scroll-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .scroll-reveal.revealed { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .hero-fade, .scroll-reveal { opacity: 1; transform: none; animation: none; transition: none; } } /* Illustration as a full-width background layer behind the centered text (Layer 6, Part B) — the same file, just repositioned instead of living in its own grid column. Dimmed (opacity) so the white text above it stays readable; an additional radial veil in the middle gives the text a bit more contrast headroom without altering the image itself. */ .hero-art-bg { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; overflow: hidden; } .hero-art-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(4, 20, 33, 0.32), transparent 72%); } /* aspect-ratio + object-fit instead of plain "width:100%, height:auto": without a width/height attribute on the itself, the intrinsic size browsers assume is inconsistent (Safari especially), which could crop the illustration on the sides depending on the device, even though the width was mathematically 100% of its already full-width container. A hardwired aspect ratio (= viewBox 1000×700) guarantees the complete illustration ALWAYS stays visible. max-width is now tied to --strip-max/--page-gutter (= 1152px) instead of a fixed 900px: that is exactly the content width of .section-inner, where the 5 preset cards also sit — on wide screens the illustration therefore reaches all the way under the last card ("Bilingual Schools") instead of stopping already at the third one. Deliberately NOT all the way to the viewport edge (that was tried and reverted: on very wide monitors the buildings looked too large/blocky) — tying it to --strip-max caps the illustration at the same width as the rest of the page content, so it never grows past the presets. */ .hero-city-img { width: 100%; max-width: calc(var(--strip-max) - 2 * var(--page-gutter)); height: auto; aspect-ratio: 1000 / 700; object-fit: contain; display: block; opacity: 0.3; } .hero-copy-centered { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; text-align: center; } .hero-copy-centered h1 { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: clamp(2.1rem, 4.4vw, 3.1rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px; color: #ffffff; text-shadow: 0 2px 16px rgba(3, 20, 35, 0.35); } /* Each line is its own data-i18n block instead of letting it wrap freely: "Compare the Facts." stays line 1, "Choose the Right School with Confidence." line 2 — independent of the natural text flow, which used to wrap onto 3 lines at 640px container width. nowrap keeps each line in one piece on desktop as much as possible; below 600px (see the media query below) it's allowed to wrap after all. */ .hero-headline-line { display: block; white-space: nowrap; } .hero-subtitle { font-size: 1.05rem; line-height: 1.6; color: rgba(255, 255, 255, 0.92); margin: 0 auto; text-shadow: 0 1px 10px rgba(3, 20, 35, 0.3); white-space: nowrap; } /* Quick preset cards (Layer 7): five equal-width cards, a grid on desktop, a horizontally scrolling row on mobile (see the media query below) — each card sets the matching Browse filter state before navigating (activatePreset() in app.js), Bilingual stays a disabled/ unclickable with a "Soon" badge. */ .hero-presets { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 90px; } .preset-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; border-radius: 14px; /* Higher opacity (was 0.12) — the crane/building illustration in the hero background used to show through noticeably and made the cards look flat/translucent; same hue, just more solid, so elevation/shadow stays visible and icon+title stand out clearly. */ background: rgba(255, 255, 255, 0.26); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(6px); text-align: center; text-decoration: none; color: #ffffff; cursor: pointer; transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .preset-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.36); border-color: rgba(255, 255, 255, 0.4); } .preset-card:active { transform: scale(0.97); } .preset-card-icon { width: 22px; height: 22px; flex-shrink: 0; } .preset-card-icon svg { width: 100%; height: 100%; } .preset-card-label { font-size: 0.82rem; font-weight: 700; line-height: 1.25; } /* Bilingual: deliberately not an , no hover lift, dimmed look + a fixed "Soon" chip instead of a click target — signals "exists, but not usable yet" instead of just being missing. */ .preset-card-disabled { opacity: 0.5; cursor: default; pointer-events: none; } .preset-card-soon { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); } @media (max-width: 600px) { /* Peek carousel instead of a grid: the last visible card is deliberately cut off, so it's clear there's more to scroll (user requirement — NEVER let a card end exactly flush with the right edge). -webkit-overflow-scrolling for smooth iOS scrolling. Deliberately NO scroll-snap (anymore) — user requirement: the row should run freely while swiping, the user should be able to let go wherever they want, without the system snapping/centering on a card. */ .hero-presets { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 10px; /* = mobile .stat-row margin-top (50px) further down: A→B and B→C are the same size, three clear groups like in the desktop comment on .hero-cta-row. The cluster's inner spacing (Presets↔CTA, .hero-cta-row margin-top on mobile) deliberately stays unchanged at 14px. */ margin: 50px calc(var(--page-gutter) * -1) 0; padding: 0 var(--page-gutter); scrollbar-width: none; } .hero-presets::-webkit-scrollbar { display: none; } .preset-card { flex: 0 0 auto; width: 40vw; max-width: 168px; } } /* Both CTAs deliberately share the same class/look (user requirement: equal weight, no primary/secondary distinction) — the difference is only the link target, not the style. */ .hero-cta-row { position: relative; z-index: 1; display: flex; justify-content: center; gap: 14px; /* Presets + CTA deliberately form ONE cluster (user requirement) — the break sits before the presets (A→B) and after the CTAs (B→C), see .hero-presets / .stat-row margin-top; both set to the same value (56px) so the two inter-group gaps are equal in size. */ margin-top: 18px; } /* Layer 9: the main CTAs (Explore/Compare) carry the primary blue instead of the secondary teal — per the spec, both are "primary" actions. */ .btn-cta { display: inline-flex; align-items: center; justify-content: center; padding: 13px 28px; border-radius: 999px; background: #ffffff; color: var(--primary); font-weight: 700; font-size: 0.95rem; text-decoration: none; border: 1px solid transparent; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 16px rgba(3, 20, 35, 0.18); } .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(3, 20, 35, 0.24); } .btn-cta:active { transform: scale(0.97); } @media (max-width: 600px) { /* Side by side instead of stacked, but each button may only take up half the available width (flex:1) — otherwise a long label would push the other button out of the row. */ /* Presets + CTA should read as ONE "cluster" on mobile (user requirement: barely any gap between them) — the clear break instead comes AFTER the CTAs, before Stats (see .stat-row margin-top further down). */ .hero-cta-row { gap: 10px; margin-top: 14px; } .btn-cta { flex: 1 1 0; padding: 12px 14px; font-size: 0.88rem; } } /* Layer 7: deliberately boxless (no background/radius/border) — plain number+label cells, separated by thin divider lines instead of card edges, so they clearly stand apart from the preset cards and don't compete with their visual lead. */ .stat-row { position: relative; z-index: 1; display: flex; gap: 0; /* = .hero-presets margin-top (90px): A→B and B→C should be equal in size (three clear groups: header+subheader / presets+CTA cluster / stats), see the comment on .hero-cta-row. */ margin-top: 90px; } .stat-card { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4px 18px; } .stat-card + .stat-card { border-left: 1px solid rgba(255, 255, 255, 0.3); } .stat-number { font-family: 'Manrope', inherit; font-size: 1.6rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); line-height: 1.15; } .stat-label { font-size: 0.72rem; font-weight: 500; color: rgba(255, 255, 255, 0.65); margin-top: 4px; } /* Mobile: not a 2×2 grid, but 1 (Schools Compared, full width) over 3 (Gymnasium/ Stadtteilschule/districts side by side) — a 3-column grid, first cell spans all three. First reset .stat-card border-left/-top (otherwise the desktop rule ".stat-card + .stat-card" would still apply), then, deliberately: a thin horizontal line across the whole bottom row (border-top on every cell except the first). The vertical divider lines between the three bottom cells are deliberately NOT a full border-left (that would touch/merge with the horizontal line above) — instead a short, vertically centered ::before stroke (a "|"-like mark) that floats freely between the top and bottom cell edge. */ @media (max-width: 600px) { .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .stat-card:first-child { grid-column: 1 / -1; } .stat-card:not(:first-child) { border-top: 1px solid rgba(255, 255, 255, 0.3); } /* The specificity of ".stat-card + .stat-card" (the desktop rule above) is exactly as high as ":nth-child" — as the later rule in cascade order it wins on a tie, so it's explicitly reset here on the second cell (the first of the bottom row of three). */ .stat-card:nth-child(2) { border-left: none; } .stat-card:nth-child(3), .stat-card:nth-child(4) { border-left: none; } .stat-card:nth-child(3)::before, .stat-card:nth-child(4)::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: rgba(255, 255, 255, 0.35); } } .subtitle { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 20px; line-height: 1.5; } /* The fine hatching from the earlier cards is kept as the section's texture — but now edge-to- edge across the full width instead of filling a floating box. No overflow:hidden needed, because nothing can stick out past a card edge anymore (ALIGNMENT.md §6). */ .section-filter::after, .section-results::after, .section-sources::after { content: ''; position: absolute; z-index: 0; inset: 0; background-image: repeating-linear-gradient(135deg, var(--border) 0, var(--border) 1px, transparent 1px, transparent 26px); opacity: 0.05; pointer-events: none; } .section-inner { position: relative; z-index: 1; } .section-title { display: flex; align-items: center; /* 8px instead of the usual 12px: icon-chip (34px) + 8px = 42px = --content-inset, so the title text starts at exactly the same spot as the text after the step badge (28px + 14px gap = also 42px) and every content row below it. See ALIGNMENT.md rule 1. */ gap: 8px; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--primary); } .section-title + .subtitle { margin-top: 4px; } /* Neutral instead of teal (user requirement): the marker before section titles is structural/orienting ("a new area starts here"), not an action — teal stays reserved for click/selection meaning. A light framed chip with a dark outline instead of a gradient tile. */ .icon-chip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px; background: var(--header-bg); border: 1px solid var(--border); color: var(--text); } .icon-chip svg { width: 18px; height: 18px; } .controls { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; align-items: center; /* .controls sits outside the numbered steps and so has no automatic left inset from badge+gap like .filter-step-body — --content-inset matches that up with the step titles on the left and mirrors the same spacing on the right, so the search field/counter/reset button as a group sit exactly between the two reference points. */ padding-left: var(--content-inset); padding-right: var(--content-inset); } /* Semi-bold like the 💡 hint banner in the results card (.view-hint-banner, font-weight: 600) — both are hints with the same role and should stand out equally. */ #addressHint { padding-right: var(--content-inset); font-weight: 600; } .controls .autocomplete-wrap { flex: 1 1 240px; } .controls input[type="search"] { width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.95rem; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .controls select { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.95rem; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .controls input[type="search"]:focus, .controls select:focus, .search-row input[type="text"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .result-count { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; } /* Host for the edge shadows (ALIGNMENT.md §9): sits OUTSIDE the scroll container so the shadows stay still while scrolling. Identical to .compare-tab-panel in the comparison modal/on the Compare page — same treatment for the same overflow. */ /* The outer margin sits on the host, not on the scroller: otherwise the host's top edge would sit 16px above the table and the shadows would start in empty space. */ .table-scroll-host { position: relative; margin-top: 16px; } .table-scroll-host.is-overflowing::before, .table-scroll-host.is-overflowing::after { content: ''; position: absolute; top: 1px; bottom: 1px; width: 26px; pointer-events: none; z-index: 3; } .table-scroll-host.is-overflowing::before { left: 1px; border-radius: 12px 0 0 12px; background: linear-gradient(to right, var(--card-bg), transparent); opacity: var(--compare-fade-start, 0); } .table-scroll-host.is-overflowing::after { right: 1px; border-radius: 0 12px 12px 0; background: linear-gradient(to left, var(--card-bg), transparent); opacity: var(--compare-fade-end, 1); } .table-scroll { /* A fixed height instead of a 6000px-tall table: only the body scrolls, the header row stays put via position:sticky (that rule already lives on thead th, it just didn't take effect before because there was no bounded scroll container). This value is just the starting value/mobile limit (no sidebar counterpart there, it's an overlay sheet) — from 900px up, syncTableHeightToSidebar() in app.js sets this value via inline style to the sidebar's actual height (user requirement: "the table box's height should be tied to the filter box's"). Plain CSS (grid stretch + flex min-height:0) was tried but didn't work: .browse-layout is itself only auto-height (no fixed height), so for the row height in grid tracking, the table's full content size counts, not the stretched box — without an external, fixed reference height this stays a pure measurement problem that only JS can solve. */ max-height: min(70vh, 720px); overflow-y: auto; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); /* EXCEPTION to the content inset (ALIGNMENT.md §5): the table starts at the left edge of the step badge or the card title icon — i.e. the edge of the card's inner area — and ends on the right mirroring the same spacing. Its 10 columns are the only spot where the 84px of inset isn't cosmetic, but decides whether it can be read at all without horizontal scrolling. The other content rows (counter pill, quick access, toggle, cards/map) keep the inset. */ margin-left: 0; margin-right: 0; transition: opacity 0.25s ease; } #schoolTable { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 920px; table-layout: auto; } thead th { background: var(--header-bg); text-align: left; vertical-align: bottom; padding: 10px 7px; font-size: 0.83rem; cursor: pointer; user-select: none; white-space: normal; border-bottom: 1px solid var(--border); position: sticky; top: 0; /* Without this: .sozial-badge (position:relative, for its tooltip) sits in the DOM AFTER , and both otherwise have z-index:auto — at the same stacking level, the later DOM position wins, so the badge row would paint itself over the supposedly-fixed column header while scrolling instead of disappearing beneath it (visible as "showing through" values in the Sozialindex header). Any positive value would do, 2 deliberately stays below the edge shadow's z-index (3, see .table-scroll-host.is-overflowing::before/::after), so its fade effect at the header row's corners still sits above it as before. */ z-index: 2; font-weight: 600; letter-spacing: 0.01em; line-height: 1.3; transition: color 0.15s ease; } thead th:hover { color: var(--accent-dark); } /* Thanks to vertical-align:bottom on the itself, .th-inner sits flush with the BOTTOM edge of the header row (stretched together to the tallest cell) — a uniform height in every column, regardless of whether the title wraps to one or two lines. */ .th-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; } .th-title-row { display: inline-flex; align-items: center; gap: 3px; } thead th .arrow { display: inline-block; color: var(--accent); opacity: 0; } thead th.sorted .arrow { opacity: 1; } tbody td { padding: 9px 7px; border-bottom: 1px solid var(--border); } tbody tr { cursor: pointer; transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } tbody tr:hover { background: var(--row-hover); box-shadow: inset 3px 0 0 var(--accent); transform: translateY(-1px); } tbody tr:last-child td { border-bottom: none; } .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: var(--accent-bg); color: var(--accent-dark); white-space: nowrap; } /* Type color coding only on the card (user requirement, "just on cards for now") — the table and comparison modal keep the neutral .badge teal look unchanged, since it wasn't requested there. */ .badge-type-gymnasium { background: var(--type-gymnasium-bg); color: var(--type-gymnasium-text); } .badge-type-stadtteilschule { background: var(--type-stadtteilschule-bg); color: var(--type-stadtteilschule-text); } .grade-chip { display: inline-block; /* Counterpart to .trend-arrow: both set to middle so the chip and arrow sit on the same center line instead of the baseline (see the comment there). */ vertical-align: middle; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; font-family: 'Manrope', inherit; font-weight: 600; font-variant-numeric: tabular-nums; } .dist-dots { display: inline-flex; gap: 2px; vertical-align: middle; margin-right: 5px; } .dist-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } /* Only the distance table cell: dots always above the km value instead of side by side inline (prevents the previous line-wrap lottery depending on cell width/digit count), both together as one block, horizontally centered. Dot size/spacing scaled up in the same 3:1 ratio as before (6px/2px) so it doesn't look cramped — the same scale as .distance-inline below (card view), just that there dots+value stay side by side inline. */ .distance-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; } .distance-cell .dist-dots { gap: 3px; margin-right: 0; } .distance-cell .dist-dot { width: 9px; height: 9px; } /* Card view: the layout (label + dots + km value on one line) stays unchanged, only the dots get scaled to the same size as in the table cell. */ .distance-inline .dist-dots { gap: 3px; } .distance-inline .dist-dot { width: 9px; height: 9px; } /* Most Preferred % cell: a chip (percentage, colored by tier) above a small Low/Medium/High label, same column layout as .distance-cell. */ .demand-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; } .demand-band-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text-muted); } .num { text-align: center; font-variant-numeric: tabular-nums; } /* A value and its trend indicator (▲▼▶◎) must NEVER wrap onto two lines (ALIGNMENT.md §6). You can't rely on the available column width for this: whether a wrap point even forms between the number and the arrow depends on the glyph's line-break class and the platform's font metrics — it wraps on iOS/Safari, not on Chromium/Linux. nowrap removes the wrap point regardless. If there isn't enough space, the column gets wider or the table scrolls (.table-scroll), instead of tearing the row apart. The distance cell is unaffected by this: its two lines come from .distance-cell's flex column layout, not from a line wrap. */ #schoolTable td.num { white-space: nowrap; } .col-center { text-align: center; } .na { color: var(--text-muted); } /* Rank-among-all-schools row in the comparison modal (Academics tab): the band bold/normal on top, "#rank of total schools" small/muted below — the same structure as the other two-line cells in this table (large label, small context). */ .rank-band { display: flex; flex-direction: column; gap: 2px; } .rank-band-label { font-weight: 700; color: var(--text); } .rank-band-sub { font-size: 0.78rem; color: var(--text-muted); } .empty-state { text-align: center; padding: 40px; color: var(--text-muted); } footer { /* No more margin-top: the spacing comes from its own padding, so the footer sits flush against the last section instead of showing a gap in the page background. */ padding: 28px var(--page-gutter) 40px; max-width: var(--strip-max); margin: 0 auto; color: var(--text-muted); font-size: 0.8rem; text-align: center; } #map { height: 480px; width: 100%; border-radius: 12px; border: 1px solid var(--border); margin-top: 14px; background: var(--bg); } .leaflet-interactive { filter: drop-shadow(0 1px 3px rgba(15, 23, 42, 0.35)); } .leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: var(--shadow); } .leaflet-popup-content { font-family: inherit; font-size: 0.88rem; line-height: 1.55; margin: 12px 14px; } .leaflet-popup-content strong { color: var(--accent-dark); } .popup-table { border-collapse: collapse; margin-top: 6px; } .popup-table td { padding: 2px 0; font-size: 0.85rem; } .popup-table td:first-child { color: var(--text-muted); padding-right: 12px; white-space: nowrap; } .popup-table td:last-child { font-weight: 600; text-align: right; } .popup-view-school { display: block; width: 100%; margin-top: 10px; padding: 6px 10px; border: none; border-radius: 8px; background: var(--accent); color: var(--accent-contrast); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: filter 0.15s ease; } .popup-view-school:hover { filter: brightness(1.08); } .leaflet-tooltip { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); font-family: inherit; font-size: 0.8rem; line-height: 1.45; padding: 6px 10px; } .leaflet-tooltip-top::before { border-top-color: var(--card-bg); } .leaflet-tooltip-bottom::before { border-bottom-color: var(--card-bg); } .leaflet-tooltip-left::before { border-left-color: var(--card-bg); } .leaflet-tooltip-right::before { border-right-color: var(--card-bg); } :root[data-theme="dark"] .leaflet-popup-content-wrapper, :root[data-theme="dark"] .leaflet-popup-tip { background: var(--card-bg); color: var(--text); } :root[data-theme="dark"] .leaflet-bar a { background: var(--card-bg); color: var(--text); border-color: var(--border); } :root[data-theme="dark"] .leaflet-bar { border-color: var(--border); } @media (prefers-color-scheme: dark) { .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--card-bg); color: var(--text); } .leaflet-bar a { background: var(--card-bg); color: var(--text); border-color: var(--border); } .leaflet-bar { border-color: var(--border); } } .search-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; /* No more --content-inset right inset (user requirement): was left over from the old full-width page and made the address field in the sidebar visibly end shorter than the school search above it, even though both should have the same column width. */ } .radius-filter-row { display: flex; flex-direction: column; gap: 7px; /* Same spacing between two control blocks as in step 3 (.adv-filters-body gap), so the address field and radius don't stick together. */ margin-top: 20px; /* No more right inset (user requirement, same as .adv-filters-body above): the radius block should reach the sidebar's right edge like District/Sozialindex/Grade etc. do. */ } .radius-filter-row > label { font-size: 0.76rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .radius-filter-row .dual-range-input:disabled { cursor: not-allowed; } /* opacity on .dual-range itself instead of just on track/fill, so the native thumb (::-webkit-slider-thumb/::-moz-range-thumb) visibly dims along with it — otherwise the handle would stay at full accent color while only the line beneath it looked faded. */ .radius-filter-row.disabled .dual-range, .radius-filter-row.disabled .adv-range-value { opacity: 0.45; } .radius-filter-row.disabled > label { opacity: 0.6; } .search-row .autocomplete-wrap { flex: 1 1 280px; } .search-row input[type="text"] { width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.95rem; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .autocomplete-wrap { position: relative; } /* Confirms the address was really resolved: sits at the right end of the address field instead of as its own text line below — that line used to repeat the address, which is already right there in the field above it (ALIGNMENT.md §4). Accent color and a bold stroke weight like the dropdown arrow, so it's recognizable at a glance. */ .address-ok-check { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--accent); pointer-events: none; } /* Keep space clear so a long address doesn't run under the checkmark. */ #addressSearch.has-check { padding-right: 42px; } /* An "X" to clear ONLY the address on purpose (user requirement) — sits to the left of the checkmark, in the same spot as the checkmark itself WHEN no checkmark is visible (just text, no resolved address yet); slides left as soon as the checkmark appears. */ .address-clear-btn { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); /* A bit larger than before (18px) and matched to the checkmark (20px) (user requirement: the two icons looked inconsistently sized) — plus coral as a signal color, so it's clear at a glance that this is a delete action, not a second confirmation next to the green checkmark. */ width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; color: var(--coral); cursor: pointer; } .address-clear-btn:hover { color: var(--coral-hover); } .address-clear-btn svg { width: 16px; height: 16px; } #addressSearch.has-check ~ .address-clear-btn { right: 40px; } #addressSearch.has-clear { padding-right: 40px; } #addressSearch.has-clear.has-check { padding-right: 68px; } /* Like .ms-panel: position:fixed + coordinates from JS, and attached to while open — otherwise .card's overflow:hidden would clip the list at the card's bottom edge (measured: 76px for the address list). See positionFloatingPanel(). */ .autocomplete-list { position: fixed; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-hover); max-height: 260px; overflow-y: auto; /* Above the mobile filter sheet overlay (.browse-sidebar, z-index:400) — otherwise the list attached to renders invisibly BEHIND the sheet when the address field/school search lives inside it (observed on mobile: address suggestions didn't appear). */ z-index: 420; } .autocomplete-item { padding: 9px 14px; font-size: 0.9rem; color: var(--text); cursor: pointer; } .autocomplete-item:hover, .autocomplete-item.active-suggestion { background: var(--accent-bg); } .autocomplete-empty { padding: 9px 14px; font-size: 0.85rem; color: var(--text-muted); } .search-status { color: var(--text-muted); font-size: 0.85rem; margin-top: 10px; } /* No more min-height that would have permanently reserved an empty row: in the normal case (no address searched), step 2 now ends cleanly after the radius slider, instead of pushing step 3 down against an invisible row. */ .search-status:empty { display: none; } .legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: 0.8rem; color: var(--text-muted); } .legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 3px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); } .hidden { display: none !important; } .distance-col { display: none; } #schoolTable.show-distance .distance-col { display: table-cell; } /* Layer 9: utility/quick-action buttons (Nearest Schools, Best Grades, Load More, Distance View) are "secondary" actions like Sort/Reset → coral, instead of the neutral default color. */ .btn-secondary { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--coral); background: var(--bg); /* var(--coral) instead of --coral-text: this is a ghost/outline button (the background stays the page color, only border+text are coral) — --coral-text is meant exclusively for text ON a solid coral background (dark text needs a dark contrast partner). In the dark theme, --bg (#0b1622) and --coral-text (#0f172a) sit almost exactly on top of each other, which made the button text completely invisible (user screenshot: "Reset"/"X more" unreadable). */ color: var(--coral); font-size: 0.88rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .btn-secondary:hover { background: rgba(242, 115, 92, 0.12); transform: scale(1.04) translateY(-1px); } .btn-secondary:active { transform: scale(0.96); } .btn-secondary.active { border-color: var(--coral); color: var(--coral); background: rgba(242, 115, 92, 0.18); } .map-actions { margin-top: 14px; } .sozial-badge { display: inline-flex; align-items: center; gap: 4px; position: relative; cursor: pointer; } /* Shared trend-arrow look for Average Grade AND Sozialindex — identical everywhere (table, cards, card popups, comparison modal): bold, noticeably larger than normal text, green/red/ gray depending on direction instead of the earlier thin Unicode arrows. */ .trend-arrow { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 1; margin-left: 3px; cursor: default; /* Centered against the value next to it: the chip is taller than the text line because of its inner padding, so aligned to the baseline the arrow would otherwise sit about 3px too high. With BOTH set to vertical-align:middle, their center points line up (see .grade-chip). */ vertical-align: middle; } /* Size comes from em, so it follows the surrounding font size (table, card, popup, legend) exactly like the earlier glyph did. font-weight/font-size are dropped — for an SVG the geometry controls the weight, not the font. */ .trend-arrow-glyph { width: 1.35em; height: 1.35em; display: block; } /* Neutral arrow (Layer 5.7, Sozialindex + application counts): a fixed teal color instead of the green/red/gray judgment from trendArrowHtml() — the direction (up/down/same) stays visible via the arrow's rotation, but without the "good" or "bad" undertone that green/red would wrongly suggest here. */ .trend-arrow-neutral { color: var(--accent-dark); } /* Guards the value+arrow pair against line wrapping AND centers both vertically relative to each other, everywhere there isn't already a dedicated inline-flex wrapper (.sozial-badge/.compare-stat-value already have one) — specifically the card-view popup/ tooltip and the "Current Applications" row. DELIBERATELY inline-flex + align-items:center itself instead of just white-space:nowrap: measured, the arrow otherwise sat about 1.3px too low (vertical-align:middle in normal text flow aligns to the line box, not the flexbox center axis — .sozial-badge/.compare-stat-value land at exactly 0px difference because they were ALWAYS already flex containers). Related to ALIGNMENT.md §9 (whitespace-free chaining alone isn't always enough on iOS/Safari). */ .value-trend-pair { display: inline-flex; align-items: center; white-space: nowrap; } /* Fills exactly the space the trend arrow would otherwise take up when there isn't enough history (ALIGNMENT.md rule 6) — otherwise the cell/card would look unfilled compared to rows with an arrow. Explains via tooltip WHY there's no arrow, instead of just showing nothing. */ .trend-nodata-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; margin-left: 3px; vertical-align: middle; border-radius: 50%; border: 1px solid var(--border); color: var(--text-muted); opacity: 0.75; cursor: pointer; flex-shrink: 0; } .trend-nodata-icon:hover { opacity: 1; border-color: var(--accent-light); color: var(--accent-dark); } .trend-nodata-icon svg { width: 7px; height: 7px; } /* Legend variant: the same glyph, but not interactive — the explanation is in the text there. Color/border from currentColor instead of a fixed theme variable, because the same legend appears both on a light background (Explanations modal, hint banner) and in the dark column-info popup — with var(--text-muted) it would be nearly invisible there. */ .trend-nodata-static { cursor: default; color: inherit; border-color: currentColor; opacity: 0.8; } .trend-nodata-static:hover { opacity: 0.8; border-color: currentColor; color: inherit; } .trend-nodata-tooltip { position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--card-bg); padding: 5px 9px; border-radius: 8px; font-size: 0.72rem; font-weight: 500; /* Wraps instead of nowrap + max-width (indirectly a user requirement: this was the ~44px overlap that made html { overflow-x: clip } necessary above) — with nowrap the box could be up to 246px wide depending on language and would run past the viewport on a card at the right edge, far more than the 13px-wide speech-bubble tip justifies. */ white-space: normal; max-width: 150px; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 30; box-shadow: var(--shadow); } .trend-nodata-icon:hover .trend-nodata-tooltip, .trend-nodata-icon.tooltip-open .trend-nodata-tooltip { opacity: 1; pointer-events: auto; } .sozial-tooltip { position: absolute; bottom: 130%; right: 0; background: var(--text); color: var(--card-bg); padding: 6px 10px; border-radius: 8px; font-size: 0.72rem; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 30; box-shadow: var(--shadow); } .sozial-badge:hover .sozial-tooltip, .sozial-badge.tooltip-open .sozial-tooltip { opacity: 1; pointer-events: auto; } .sources-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; } .source-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 8px 6px; border: none; border-radius: 8px; background: none; color: var(--text-muted); font-size: 0.85rem; font-family: inherit; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; } .source-line:hover { color: var(--accent-dark); background: var(--row-hover); } .source-line svg { flex-shrink: 0; opacity: 0.55; transition: transform 0.15s ease; } .source-line:hover svg { transform: translateX(2px); opacity: 0.9; } .sources-details summary { cursor: pointer; list-style: none; } .sources-details summary::-webkit-details-marker { display: none; } /* Reuses .step3-chevron (the Detailed Criteria arrow in the filter card) instead of its own ::after triangle — same size/weight as there, for the same reasons (too small, tied to the card edge via margin-left:auto instead of the title text). */ .sources-details[open] .step3-chevron { transform: rotate(90deg); } .sources-details .sources-list { margin-top: 14px; } #footerCredits { margin: 0; } .footer-disclaimer { margin: 10px auto 0; max-width: 640px; font-size: 0.7rem; line-height: 1.5; color: var(--text-muted); opacity: 0.75; } .leaflet-control-center a { display: flex; align-items: center; justify-content: center; } .floating-actions { /* At the bottom instead of on the side (user requirement: like the compare pill) — used to be vertically centered on the right, which "floated" in the middle of the screen with a very long card list instead of lining up at the bottom like other floating actions. */ position: fixed; right: 16px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 12px; } /* Shifts upward while the compare pill (also bottom:20px) is visible — otherwise the button would sit right on/behind it. Same body class as the .browse-layout bottom reserve further down (see updateCompareBar() in app.js). */ body.has-compare-bar .floating-actions { bottom: 90px; } /* .theme-trigger is the same class as #jumpToFilterBtn (the floating funnel button) — this base rule stays unchanged for it (44px, round). The header-bar variant is deliberately overridden further up via #siteToolbar .theme-trigger, see the comment there. */ .theme-trigger { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-bg); backdrop-filter: blur(8px); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; color: var(--text); cursor: pointer; flex-shrink: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } .theme-trigger:hover { transform: scale(1.07); } .theme-trigger:active { transform: scale(0.94); } .theme-trigger svg { width: 20px; height: 20px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .type-chips { display: flex; flex-wrap: wrap; gap: 8px; } .type-and-fav-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .type-chip { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .type-chip:hover { border-color: var(--accent-light); color: var(--text); transform: translateY(-1px); } .type-chip:active { transform: scale(0.95); } .type-chip.active { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-light), var(--accent-dark)); color: var(--accent-contrast); box-shadow: 0 4px 10px -4px rgba(13, 148, 136, 0.5); } .view-toggle { display: inline-flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px; /* No more margin-top: that was left over from the old layout, where .view-toggle sat directly below the results text. Now it's a flex child in .results-toolbar (align-items: center) — the margin-top pushed it down unnecessarily there and visibly shifted it below the sidebar's search input. */ } .view-toggle button { padding: 7px 16px; border-radius: 999px; border: none; background: transparent; color: var(--text-muted); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .view-toggle button:active { transform: scale(0.94); } .view-toggle button.active { background: linear-gradient(135deg, var(--accent-light), var(--accent-dark)); color: var(--accent-contrast); } th.compare-col { text-align: center; } td.compare-col { width: 34px; text-align: center; } th.rank-col, td.rank-col { width: 30px; text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 0.85rem; } .card-rank { position: absolute; top: -10px; left: -10px; width: 26px; height: 26px; border-radius: 50%; /* The same gradient duo as .type-chip.active/.view-toggle button.active instead of flat var(--accent) — consistent with the other secondary accents that carry a gradient. */ background: linear-gradient(135deg, var(--accent-light), var(--accent-dark)); color: var(--accent-contrast); font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } .compare-checkbox { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; } .compare-checkbox:disabled { cursor: not-allowed; opacity: 0.4; } @keyframes checkPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } } .compare-checkbox:checked, .ms-option input:checked { animation: checkPop 0.3s ease; } .cards-grid { display: grid; /* One column at every width (user requirement): with 3 (and even 2) columns it was hard to cleanly align every data point on a card — as a full-width row throughout ("thin, long rectangle") each card has enough width for its stat boxes/meta rows. This also removes the earlier 900px/600px intermediate steps (2 or 1 columns) — there's now only this one case. */ grid-template-columns: 1fr; gap: 16px; margin-top: 16px; transition: opacity 0.25s ease; } .school-card { position: relative; cursor: pointer; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; /* CSS grid tracks with fr units implicitly have min-width:auto, i.e. "never narrower than the widest unbreakable content" — a very long name with no wrap point (see .school-card-name: white-space:nowrap) would otherwise stretch the whole card column, instead of fitCardNames() shrinking it to fit within the card's intended width. min-width:0 here — not just on .school-card-name itself — removes that implicit lower bound from the grid track. */ min-width: 0; } .school-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } /* Visible feedback "this school is selected for comparison" on the card itself, not just on the small icon — the same teal tint as the active compare arrow (.card-compare-btn.active), so the card and icon speak the same language regardless of whether it was selected via mouse hover or touch. */ .school-card.is-compare-selected { background: var(--accent-bg); border-color: var(--accent); } .card-icon-group { position: absolute; bottom: -10px; right: -10px; display: flex; align-items: center; /* Neither gap nor padding here: EVERY pixel inside the pill must belong to one of the two buttons (their own padding now carries the visual spacing, see .card-icon-btn) — even a 2px margin on the group container would be a clickable gap that belongs to no button and wrongly passes taps through to the card click. */ gap: 0; padding: 0; border-radius: 999px; background: var(--card-bg); /* As a box-shadow instead of a border: a real border would eat 1px from the layout box that no button fills anymore — exactly the kind of 1px gap this whole change is meant to eliminate. box-shadow only paints the ring without including it in hit-testing. */ box-shadow: 0 0 0 1px var(--border), var(--shadow); max-width: calc(100% - 12px); } /* The button fills its entire visible area via its own padding instead of group padding/gap — every pixel inside the pill genuinely belongs to the