/* ========================================================================== Reset & base ========================================================================== */ .se *, .se *::before, .se *::after { box-sizing: border-box; } /* Visually-hidden but accessible-to-AT utility. Used for s on inputs that only show a placeholder (footer signup, My Trip / GPX / calculator email fields, search) so form controls have a real programmatic name -- fixes the Lighthouse "form elements do not have associated labels" audit without adding visible chrome. */ .se-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Sitewide safety net against horizontal overflow -- catches ANY future stray element (an image without max-width, a fixed-width table, an embedded widget whose container fix gets missed) that would otherwise force the whole page to scroll sideways on mobile. Applied to , not : is already the document's real scrolling element, so this doesn't turn into a second scroll container or interfere with .se-header's position:sticky (which sticks relative to that same root scroller either way). */ html { overflow-x: hidden; } /* Background texture is pre-composited onto the page's own cream colour at low opacity (see functions.php / se_bg_texture_id). Previously applied as background-attachment:fixed directly on .se (body) — reverted 2026-08-06: that technique has a real, reproducible Chromium/Safari bug where the fixed background visibly drifts relative to page content when the browser is zoomed to a non-100% level (confirmed by the user). Now rendered on a dedicated position:fixed div (.se-bg-fixed, inserted right after in header.php) instead — an ordinary fixed-position element, not a background-attachment special case, which browsers handle far more reliably under zoom. z-index:-1 keeps it behind all normal content; no stacking-context tricks needed since it's the very first element in body and nothing before it establishes a competing context. */ .se { background-color: var(--se-bg); color: var(--se-text); font-family: var(--se-font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .se-bg-fixed { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--se-bg-texture-url, none); background-repeat: no-repeat; background-position: top center; /* 100vw, not a fixed px value (was 1920px) — a fixed pixel width means the image can only ever exactly match a 1920px-wide viewport; at any other effective viewport width (including whatever a non-100% browser zoom level resolves to) it either falls short, revealing bare --se-bg color at the sides, or overflows past what's cropped. 100vw guarantees edge-to-edge coverage at any zoom level, closing off one concrete mechanism by which zooming could visibly change the background's apparent size/position relative to the page content. */ background-size: 100vw auto; } @media (max-width: 782px) { /* position:fixed full-viewport layers are unreliable/janky on mobile Safari (same reason the old background-attachment:fixed was dropped there too) — fall back to a normal scrolling background painted directly on body instead of the separate fixed layer. */ .se-bg-fixed { display: none; } .se { background-image: var(--se-bg-texture-url, none); background-repeat: no-repeat; background-position: top center; background-size: 100vw auto; } } .se img { max-width: 100%; height: auto; display: block; } .se a { color: inherit; text-decoration: none; } .se h1, .se h2, .se h3, .se h4 { font-family: var(--se-font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--se-space-4); color: var(--se-text); } .se h1 { font-size: clamp(2.1rem, 1.6rem + 2vw, 3.4rem); font-weight: 600; } .se h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); } .se h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); } /* ========================================================================== Layout primitives ========================================================================== */ .se-container { max-width: var(--se-container); margin-inline: auto; padding-inline: var(--se-space-5); } @media (min-width: 900px) { .se-container { padding-inline: var(--se-space-7); } } .se-section { padding-block: var(--se-space-8); } /* ========================================================================== Announcement bar — links to the Slovenia Trip Starter Kit lead magnet. Scrolls away with the page (not sticky); .se-header sticks at top:0 once scrolled past it, same as before this existed. ========================================================================== */ .se-announce { background: var(--se-primary); color: #fff; } .se-announce__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--se-space-3) var(--se-space-4); padding-block: var(--se-space-3); font-size: 0.95rem; text-align: center; } .se-announce__label { font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; font-size: 0.72rem; padding: 0.25em 0.7em; border-radius: var(--se-radius-pill); background: rgba(255, 255, 255, 0.18); color: #fff; } .se-announce__text { color: rgba(255, 255, 255, 0.95); font-weight: 500; } /* Two-class selector: bare ".se a { color: inherit }" (0,1,1) would otherwise beat a single-class ".se-announce__link" (0,1,0) and the link would inherit white from its dark-background ancestor — same specificity bug class documented elsewhere in this file (.se-hero__img, .se-404 title, .se-card--gem). */ .se-announce .se-announce__link { font-weight: 700; color: var(--se-primary); background: #fff; padding: 0.4em 1.1em; border-radius: var(--se-radius-pill); text-decoration: none; white-space: nowrap; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .se-announce__link:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); } @media (max-width: 560px) { .se-announce__text { display: none; } .se-announce__inner { padding-block: var(--se-space-2); font-size: 0.85rem; } } /* ========================================================================== Header / primary nav ========================================================================== */ .se-header { background: color-mix(in srgb, var(--se-bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--se-border); position: sticky; /* Stick below the WP admin bar (logged-in visitors only) instead of overlapping it — WP exposes its live height as this custom property. */ top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; transition: transform 0.25s ease, box-shadow 0.25s ease; } .se-header.is-hidden { transform: translateY(-100%); } .se-header.is-scrolled { box-shadow: var(--se-shadow-soft); } /* * display is intentionally NOT set here -- desktop (>=1440px) and mobile * (<1440px) use two genuinely different layout models (grid in both * cases, but different templates -- see each media query below), each * declaring its own `display`/`grid-template-columns` explicitly. * * History, because this took 4 real passes and the reasons matter for * whoever touches this next: * v1 centered the nav in whatever leftover space a grid column gave it * -- mathematically centered in that gap, but visually ~150px left of * the header's true center once the narrow logo (~61px) and wide utils * cluster (~370-430px) made that gap itself asymmetric. * v2 ("лого слева, меню+утилс занимает место между лого и правым * краем") isolated the logo at the true left edge and let nav+utils * flow together starting right after it -- fixed the asymmetry, but a * SEPARATE, pre-existing bug surfaced: logo+nav+utils' combined natural * width genuinely exceeds the viewport from ~1000px up to ~1350px on * longer-language content (DE). Patching that with ever-smaller fonts/ * padding at ever-widening "danger zone" breakpoints (1150px, then * 1400px) kept needing another round after the next language broke it. * v3 gave up on incremental font/padding patches: the mobile/desktop * breakpoint itself moved from 1000px to 1400px (verified live against * all 7 languages with full-size content), and nav+utils were wrapped * in .se-header__nav-cluster, given flex:1 1 auto, and centered inside * it via justify-content:center -- looked right in isolation, but a * REAL bug surfaced on the very next live check: a flex item that's * itself flex:1 1 auto can be squeezed by the OUTER flex algorithm to * narrower than its OWN children's combined natural width, and * justify-content:center on the inner flex container does NOT prevent * that -- it just lets the centered content silently spill out past * the (too-narrow) container's own edges. Confirmed live on DE at * exactly 1400px: nav visibly overlapped the logo by ~36px, utils * overflowed past the bar's right edge by the same amount, and * document.documentElement.scrollWidth never caught it (no page-level * scrollbar formed, since the overflow was contained/symmetric, not * page-width) -- meaning this bug was invisible to every overflow check * used earlier in this whole investigation. * v4 switched the whole desktop layout from flex to CSS grid * (`1fr auto 1fr`, third column a hidden mirror-copy of the logo) so * .se-header__nav-cluster could never silently spill past its own * container the way v3's flex:1+justify-content:center did. That part * of the diagnosis was correct and is kept (grid, not flex) -- but the * mirror-column idea turned out to be solving the wrong problem. Direct * measurement right after deploying it showed .se-header__bar was * STILL overflowing at 1400px, and the real cause had nothing to do * with flex vs. grid: .se-header__bar carries the sitewide * `.se-container` class, which caps `max-width` at --se-container * (1180px) -- so no matter how wide the viewport grows, the bar itself * NEVER gets wider than 1180px of usable content space. Raising the * mobile/desktop breakpoint (999->1150->1400px) kept "fixing" it only * by accident, for whichever language happened to fit in 1180px at * that specific zoom of the moment -- it could never be a real, lasting * fix, since the ceiling never moved. * v5 (this one) fixes the actual ceiling instead of working around it, * and drops the mirror-column complexity now that it's not needed: * .se-header .se-header__bar overrides max-width to none on desktop, so * the bar can genuinely grow with the viewport instead of plateauing at * 1180px. With real room to grow, a plain two-column grid -- * `auto 1fr` -- does exactly what was asked, literally: logo in column * 1 at its own natural width, .se-header__nav-cluster filling column 2 * and centering itself (nav+utils, as one group) via * justify-content:center within THAT column -- i.e. centered in the * space between the logo and the true right edge, not mirrored around * the bar's own former center. A grid `1fr` track's base size still * can't be squeezed below the nav-cluster's own content the way v3's * flex sibling could, so the "silent overlap" failure mode v3 hit stays * fixed; the only overflow risk left is honest, visible page-scrollbar * overflow if a viewport is narrower than the breakpoint below, which * was raised to 1440px and reverified against real, un-capped layout. */ .se-header__bar { align-items: center; gap: var(--se-space-5); padding-block: var(--se-space-3); } /* * Wraps

and .se-header__utils (see header.php) -- * see the .se-header__bar comment above for the full history of why. * display:contents on mobile (<1440px, the default here) removes this * wrapper from the box tree entirely -- its children behave as if they * were still direct children of .se-header__bar, so the existing mobile * grid rules (.se-nav's own position:absolute dropdown, * .se-header__utils's grid-column:3) keep working completely unchanged. * Desktop sizing (a real flex box holding nav+utils side by side, one * grid cell, centered within it) lives in the >=1440px block below. */ .se-header__nav-cluster { display: contents; } .se-header__logo { grid-column: 1; justify-self: start; font-family: var(--se-font-display); font-size: 1.35rem; font-weight: 600; color: var(--se-text); white-space: nowrap; display: flex; align-items: center; } .se-header__logo img { height: 61px; /* was 76px — reduced 20% per request */ width: auto; max-width: none; } /* * Narrow phones only (not the general <1000px mobile-nav breakpoint, * which also covers tablets with plenty of spare width) — the header row * (logo + search + language selector + menu icon) has zero slack at * ~375px viewports without this, confirmed via getBoundingClientRect() * after adding the language selector (se-lang-select). */ @media (max-width: 480px) { .se-header__logo img { height: 42px; } } .se-header__utils { /* grid-column/justify-self (mobile's own positioning inside .se-header__bar's grid) live in the mobile media query below -- on desktop this element is just a plain flex child inside .se-header__nav-cluster, no special positioning needed. */ position: relative; display: flex; align-items: center; gap: var(--se-space-2); } /* * Custom card-style dropdown, replacing a native