.js starts the sound on
the visitor's next click or keypress anywhere — so the button breathes
a ring instead of pretending to be off. */
.radio-fab.blocked{
color:var(--dawn-1);
border-color:rgba(240,178,106,.45);
animation:radio-fab-wake 2.4s ease-in-out infinite;
}
@keyframes radio-fab-wake{
0%,100%{box-shadow:0 0 0 0 rgba(240,178,106,0);}
50%{box-shadow:0 0 0 4px rgba(240,178,106,.20);}
}
.radio-fab-sr{
position:absolute;width:1px;height:1px;
margin:-1px;padding:0;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;
}
@media(prefers-reduced-motion:reduce){
.radio-fab{transition:none;}
.radio-fab.connecting .radio-fab-ic{animation:none;opacity:.45;}
.radio-fab.blocked{animation:none;box-shadow:0 0 0 2px rgba(240,178,106,.20);}
}
/* An img-slot that has had its real photograph wired in by
14-process-images.py. The dashed placeholder frame is gone; what remains is
the image itself plus the same bilingual figcaption the placeholder had. */
.img-slot.has-img picture{display:block;}
.img-slot.has-img img{
width:100%;
height:auto;
aspect-ratio:16/9;
object-fit:cover;
border-radius:2px;
display:block;
}
.img-slot-row .img-slot.has-img img{aspect-ratio:4/3;}
/* ---------------- search page: compact hero ----------------
.subpage-hero is min-height:68vh with justify-content:flex-end — content
sits at the BOTTOM of a tall box. That reads well for an editorial hero
with a big photograph behind it, but on the search page it pushed the
breadcrumb and the search box roughly 400px down a phone screen, so the
one control the page exists for was below the fold. Here the hero is only
as tall as its content, top-aligned, with just enough head room to clear
the fixed nav. */
.search-hero{
min-height:0;
justify-content:flex-start;
padding-top:calc(var(--gutter) + 3.4rem);
padding-bottom:clamp(1.8rem,4vw,2.8rem);
}
.search-hero h1{
font-size:24px;
margin-bottom:.6rem;
max-width:20ch;
}
.search-hero .breadcrumb{margin-bottom:.5rem;}
.search-hero .hero-eyebrow{margin-bottom:.4rem;}
.search-hero .search-box{margin-top:1.4rem;}
/* The floating search button that used to be hidden here is gone entirely
(owner 2026-08-19) — its slot now holds the background-radio button,
which is not redundant on the search page, so nothing is hidden. */
/* ---------------- hero on narrow screens ----------------
.hero is justify-content:flex-end inside a full-height section, so all the
slack collects ABOVE the headline. That is the intended editorial look on a
wide screen, but on a tall phone (19.5:9) it left roughly a third of the
first screen as empty gradient before "Discover Slovakia".
Shorten the box and trim the bottom padding so the headline sits higher;
the shorter box also lets the next section peek up, which reads as an
invitation to scroll rather than dead space. */
@media(max-width:720px){
.hero{
min-height:74svh;
padding-bottom:4rem;
}
.subpage-hero{
min-height:56svh;
padding-bottom:3rem;
}
/* The base top padding clears the fixed nav; on a phone the nav is shorter,
so it does not need the full desktop allowance. */
.story-section{padding-top:calc(var(--gutter) + 2.4rem);}
/* The scroll cue is absolutely positioned at the bottom of the hero. With
the shorter box the lede now runs into it, and clearing it would need
~6rem of bottom padding — which would undo the gain. Drop it here: the
shortened hero lets the next chapter peek above the fold, which is a
stronger invitation to scroll than the label was. */
.scroll-cue{display:none;}
}
/* ---------------- "open on YouTube" layer ----------------
Styles for /static/fv-external1.js, which adds an out-of-embed route for
every video. Needed because YouTube refuses embedded playback on some
networks (VPN exits especially) — the block sits between the viewer and
YouTube, so the only fix is to leave the embed entirely. The renderer
itself, featured-videos3.js, is a verbatim copy from myhealthcare and is
deliberately not touched by any of this. */
.fv-pop{
position:absolute;
top:8px;right:8px;
z-index:3;
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
padding:0;cursor:pointer;
background:rgba(10,8,14,.68);
border:1px solid rgba(255,255,255,.34);
border-radius:999px;
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.fv-pop svg{
width:15px;height:15px;
fill:none;stroke:#faf4e8;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;
}
.fv-pop:hover{background:rgba(255,148,102,.9);transform:scale(1.06);}
.fv-pop:focus-visible{outline:2px solid var(--dawn-1);outline-offset:2px;}
.fv-ext-link{
display:block;
margin:0 .95rem 1rem;
font-size:.64rem;
letter-spacing:.14em;
text-transform:uppercase;
font-weight:600;
text-decoration:none;
color:var(--dawn-1);
opacity:.72;
transition:opacity .2s ease;
}
.fv-ext-link:hover{opacity:1;text-decoration:underline;}
.fv-ext-all{
display:inline-block;
margin-left:1rem;
font-size:.7rem;
letter-spacing:.16em;
text-transform:uppercase;
font-weight:600;
text-decoration:none;
color:var(--dawn-1);
border-bottom:1px solid currentColor;
padding-bottom:2px;
}
.fv-ext-all:hover{color:var(--dusk-1);}
.fv-note{
max-width:70ch;
margin:1.5rem 0 .4rem;
font-size:.82rem;
line-height:1.6;
opacity:.72;
padding-left:.9rem;
border-left:2px solid rgba(255,217,160,.45);
}
@media(max-width:560px){
.fv-pop{width:38px;height:38px;} /* comfortable tap target on a phone */
.fv-pop svg{width:17px;height:17px;}
}
@media(prefers-reduced-motion:reduce){
.fv-pop{transition:none;}
.fv-pop:hover{transform:none;}
}
/* ---------------- NAV TOGGLE (mobile menu) ----------------
Below NAV_BP (1000px, raised from 720px 2026-08-02 — see the matching
comment near .nav-links above) .nav-links is hidden and menu3.html
ships a .nav-toggle hamburger; nav1.js toggles .open on the links,
which become a dark-glass dropdown panel under the fixed nav.
Above NAV_BP the button is hidden and nothing changes. */
.nav-toggle{
display:none;
-webkit-appearance:none;
appearance:none;
align-items:center;
justify-content:center;
width:2.6rem;
height:2.6rem;
padding:.5rem;
background:rgba(20,15,10,.45);
border:1px solid rgba(255,255,255,.35);
border-radius:8px;
cursor:pointer;
color:#fff;
/* With the bar now justify-content:flex-start, this is what keeps
the hamburger on the right edge below NAV_BP. */
margin-left:auto;
}
.nav-toggle svg{
width:100%;
height:100%;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
fill:none;
}
.nav-toggle:focus-visible{outline:2px solid var(--dawn-1);outline-offset:2px;}
@media(max-width:999.98px){
.nav-toggle{display:flex;}
.nav-links.open{
display:flex;
flex-direction:column;
gap:1rem;
position:fixed;
top:3.9rem;
right:var(--gutter);
padding:1.1rem 1.4rem;
background:rgba(20,15,10,.92);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.2);
border-radius:14px;
box-shadow:0 12px 40px rgba(0,0,0,.45);
z-index:120;
/* The hamburger list grew to 15 rows with the mega-menu build-out
(Caves/Spa/Wine/Bratislava/Košice ride along as .nav-extra
direct links) — let it scroll on short phone viewports. */
max-height:calc(100vh - 5rem);
max-height:calc(100svh - 5rem);
overflow-y:auto;
}
.nav-links.open > li > a{color:rgba(255,255,255,.88);}
.nav-links.open .nav-search{align-self:flex-start;}
}
/* ============================================================
MEGA MENU (menu4.html) — desktop only, 1000px (NAV_BP) up.
Same architecture as myhealthcare.com's navbar, re-cut for this
site's design language: each .has-mega li in the top bar owns a
.mega-menu — a full-width dark-glass band pinned under the fixed
nav (the li stays position:static, so the panel anchors to the
BAR, not the tab — a wide panel anchored to its own tab would
run off-screen). Columns are .mega-col with a .mega-col-header,
optional .mega-col-sublabel sub-groups, and a .mega-col-viewall
hub link.
Open/close is pure CSS (:hover / :focus-within, plus .tap-open
set by nav2.js for touch-only devices). The close uses a .25s
visibility delay INSTEAD of a hover-bridge pseudo-element: the
pointer needs to cross the nav's bottom padding to reach the
panel, and the grace period keeps the panel alive for that hop
without an invisible strip blocking clicks elsewhere.
============================================================ */
.has-mega{position:static;}
/* Reset the inherited top-bar typography (uppercase, wide tracking,
.78rem) before the panel's own styles apply. */
.mega-menu{
text-transform:none;
letter-spacing:normal;
font-size:1rem;
display:none;
}
@media(min-width:1000px){
.has-mega > a::after{
content:"\25BE"; /* ▾ */
display:inline-block;
margin-left:.35em;
font-size:.72em;
opacity:.75;
transform:translateY(-1px);
}
.has-mega > .mega-menu{
display:block;
position:absolute;
top:100%;
left:0;
right:0;
z-index:130;
background:rgba(16,11,24,.94);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border-top:1px solid rgba(255,255,255,.12);
border-bottom:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 60px rgba(0,0,0,.5);
/* Safety net like myhealthcare's: an absolutely positioned panel
that outgrows the viewport just extends past the bottom edge
with no scrollbar and its last rows become unreachable. */
max-height:calc(100vh - 6rem);
overflow-y:auto;
visibility:hidden;
opacity:0;
transform:translateY(-4px);
transition:opacity .18s ease, transform .18s ease,
visibility 0s linear .25s;
}
.has-mega:hover > .mega-menu,
.has-mega:focus-within > .mega-menu,
.has-mega.tap-open > .mega-menu{
visibility:visible;
opacity:1;
transform:none;
transition:opacity .18s ease, transform .18s ease, visibility 0s;
}
/* Search pill hugs the right edge of the bar (the bar itself is
justify-content:flex-start now). */
.nav-links .nav-search-item{margin-left:auto;}
/* Mobile-only direct links live in the hamburger panel; on
desktop their pages are reachable inside the mega panels. */
.nav-links .nav-extra{display:none;}
}
/* Columns start at the same left gutter as the nav content, so the
band reads as an extension of the bar. No centering max-width:
the bar's own content is left-anchored, and the panel follows it. */
.mega-inner{
display:flex;
align-items:flex-start;
gap:clamp(1.1rem,2.2vw,2.4rem);
padding:1.5rem var(--gutter) 1.9rem;
}
.mega-col{
flex:0 1 auto;
min-width:0;
max-width:19rem;
}
.mega-col + .mega-col{
border-left:1px solid rgba(255,255,255,.10);
padding-left:clamp(1.1rem,2.2vw,2.4rem);
}
.mega-col-header{
display:block;
font-size:.68rem;
font-weight:700;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--dawn-1);
text-decoration:none;
padding-bottom:.55rem;
margin-bottom:.6rem;
border-bottom:1px solid rgba(255,255,255,.14);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
a.mega-col-header:hover{color:#fff;}
.mega-col ul{
list-style:none;
margin:0;
padding:0;
}
.mega-col ul li{margin:0;padding:0;}
.mega-col ul li a{
display:block;
padding:.28rem 0;
font-size:.88rem;
color:rgba(255,255,255,.82);
text-decoration:none;
/* Ellipsize rather than wrap: one long label added later must not
become a two-line row and knock the columns out of rhythm.
(min-width:0 on .mega-col is what lets this engage at all.) */
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:color .15s ease;
}
.mega-col ul li a:hover{color:var(--dawn-1);}
.mega-col-sublabel{
font-size:.62rem;
font-weight:600;
letter-spacing:.2em;
text-transform:uppercase;
color:rgba(255,255,255,.45);
margin:.95rem 0 .35rem;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.mega-col-viewall{
display:block;
margin-top:.85rem;
padding-top:.6rem;
border-top:1px solid rgba(255,255,255,.10);
font-size:.78rem;
font-weight:600;
color:var(--dawn-1);
text-decoration:none;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.mega-col-viewall:hover{color:#fff;}
@media(max-width:999.98px){
/* The hamburger panel shows plain page links only; panels (and the
desktop-only caret) never render below NAV_BP. */
.mega-menu{display:none !important;}
}
@media(prefers-reduced-motion:reduce){
.has-mega > .mega-menu{transition:opacity 0s, visibility 0s linear .25s;transform:none;}
.has-mega:hover > .mega-menu,
.has-mega:focus-within > .mega-menu,
.has-mega.tap-open > .mega-menu{transition:none;}
}
/* ============================================================
IMAGE LIGHTBOX - click any wired .img-slot image to view it
full-screen at delivered resolution (1792px). Markup is built
by /static/lightbox1.js (event delegation, no per-page HTML).
z-index 400: above story sections (100) and lang toggle (300).
============================================================ */
.imglb-open{overflow:hidden;}
.img-slot.has-img img{cursor:zoom-in;}
.imglb{
position:fixed;inset:0;z-index:400;
background:rgba(6,8,18,.94);
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:clamp(.8rem,2vw,2rem);
animation:imglb-in .18s ease-out;
}
@keyframes imglb-in{from{opacity:0}to{opacity:1}}
.imglb-stage{
flex:1 1 auto;min-height:0;width:100%;
display:flex;align-items:center;justify-content:center;
overflow:auto;overscroll-behavior:contain;
}
.imglb-stage img{
max-width:100%;max-height:100%;
width:auto;height:auto;display:block;
cursor:zoom-in;user-select:none;
}
.imglb.zoomed .imglb-stage{align-items:flex-start;justify-content:flex-start;}
.imglb.zoomed .imglb-stage img{max-width:none;max-height:none;cursor:zoom-out;}
.imglb-caption{
flex:0 0 auto;color:rgba(255,255,255,.85);
font-size:.9rem;line-height:1.5;text-align:center;
padding:.8rem 1rem 0;max-width:80ch;
}
.imglb-close{
position:absolute;top:clamp(.6rem,1.5vw,1.4rem);right:clamp(.6rem,1.5vw,1.4rem);
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);
color:#fff;font-size:1.05rem;line-height:1;
width:2.6rem;height:2.6rem;border-radius:50%;cursor:pointer;
}
.imglb-close:hover{background:rgba(255,255,255,.22);}
.imglb-hint{
position:absolute;bottom:clamp(.6rem,1.5vw,1.2rem);right:clamp(.8rem,2vw,1.6rem);
color:rgba(255,255,255,.45);font-size:.72rem;letter-spacing:.08em;
text-transform:uppercase;pointer-events:none;
}
@media(prefers-reduced-motion:reduce){.imglb{animation:none;}}
/* ============================================================
LARGE-SCREEN TYPE SCALE (2026-08-02, owner request: fill the
16" MacBook Pro browser). Base rem grows on wide viewports,
so every rem/ch-based measure — nav, headlines, ledes, cards,
directories — scales up with it and the full-width layout
actually fills the window instead of floating in it.
============================================================ */
@media(min-width:1600px){
html{font-size:18px;}
}
@media(min-width:1920px){
html{font-size:19px;}
}
/* ============================================================
NAV "YOU ARE HERE" HIGHLIGHT (style12, 2026-08-02)
nav3.js marks the top-level item owning the current page with
.nav-current and the page's own link deeper in the nav with
.nav-current-page. The top-level treatment is simply the hover
state made persistent (dawn underline, full white), so the bar
reads "you are in Castles" without inventing a new visual.
The search pill (.nav-search) styles itself; keep it out.
============================================================ */
.nav-links > li > a.nav-current:not(.nav-search){
color:#fff;
/* 1px border + 3px box-shadow = a 4px bar in the hotter dawn-2 orange.
The shadow adds no layout height, so the current item doesn't jiggle
the flex row; dawn-1 at 1px disappeared into the amber backdrop
(owner feedback 2026-08-03). */
border-color:var(--dawn-2);
box-shadow:0 3px 0 var(--dawn-2);
}
/* Hamburger panel (below NAV_BP the row becomes a dropdown list):
the underline reads poorly on stacked rows — use the dawn color
itself as the "you are here" cue instead. */
@media(max-width:999.98px){
.nav-links.open > li > a.nav-current:not(.nav-search){
color:var(--dawn-1);
border-color:transparent;
}
}
/* The exact current page inside a mega panel column, the Regions
city rows, or the hamburger's .nav-extra links. */
.nav-links a.nav-current-page{
color:var(--dawn-1) !important;
font-weight:600;
}
/* ============================================================
FOOTER LEGAL LINKS — the "Disclaimer · Privacy Policy ·
Terms of Service" line in .footer-bottom (pages added
2026-08-03, mirroring pacificair.com / myhealthcare.com).
Base a{color:inherit} leaves these indistinguishable from
plain text, so give them an underline affordance.
============================================================ */
.footer-bottom a{
color:inherit;
text-decoration:underline;
text-underline-offset:2px;
opacity:.9;
}
.footer-bottom a:hover{opacity:1;}
/* ============================================================
FIXED-NAV CLEARANCE (owner report 2026-08-08: on the phone the
top of /business/ slid under the glass menu bar)
============================================================
1) scroll-padding-top makes every in-page #fragment jump (subpage
TOC pills, the /business/ city directory) and every y-proximity
snap settle BELOW the fixed nav instead of flush under it.
Scoped with :has() to pages that have a .subpage-hero, so the
homepage keeps its designed full-bleed chapter snapping (those
sections deliberately sit at y=0 behind the glass, with their
own big padding-top providing the clearance). Browsers without
:has() simply keep today's behavior.
2) On phones the subpage hero's first line (the breadcrumb) rested
only ~30px below the bar, so the slightest scroll pushed it into
the glass. 7rem of top padding gives it real headroom; bottom-
anchored heroes with short content are unaffected. */
html:has(.subpage-hero){scroll-padding-top:6.5rem;}
@media(max-width:600px){
.subpage-hero{padding-top:7rem;}
}
/* 2026-08-08 city-first nav: the top bar now carries 10 city items (owner
restructure — 8 kraj capitals + Orava + Tatry). At 1000–1199px the
full-size labels wrap to a second row (probe-verified at 1000/1060/1120),
so this band compacts the type until the bar has room again — originally
only up to 1500/1699px, since stock sizing fit fine above that with ten,
eleven or twelve items (see the two dated notes below for that history).
Keep the 1000px edge in sync with NAV_BP.
2026-08-18: Radio became the THIRTEENTH top-level item (TV split into TV +
Radio, owner), and stock sizing no longer fit anywhere — probe-verified
wrapping at 1700 and 1920 with the old max-width:1699.98px cap, because
past that cap .nav-links reverts to full-size type. Rather than chase the
upper edge outward again, this rule's upper bound was DROPPED: the compact
.68rem sizing now applies unconditionally from 1000px up, with no ceiling.
Re-probed clean (wrapped:false) at 1000/1200/1400/1550/1600/1650/1700/1750/
1920/2560 with nav-probe/fit3.html (rebuilt fresh from the live menu/style
per the README recipe — fit2.html had drifted to a stale style/nav/
lightbox version and was left as historical reference). If the item count
changes again, re-run that recipe before assuming this still holds. */
@media(min-width:1000px){
.nav-links{font-size:.68rem; gap:clamp(.4rem,1vw,.9rem); letter-spacing:.05em;}
}
@media(min-width:1000px) and (max-width:1399.98px){
/* 2026-08-17: TV became the TWELFTH top-level item (owner), and the band
had to widen 1200 -> 1400 and tighten. Measured in nav-probe/fit2.html,
which compares the BRAND's top offset with the links' rather than reading
the bar height — height alone is misleading, because html{font-size} steps
to 18px at 1600 and 19px at 1920 and the rem padding grows with it, so a
66 -> 78px bar at 1920 is the design scaling, not a wrap. The genuine wrap
was at 1000 and 1200 only (brand pushed to its own row); 1400 up was
always fine and is deliberately left alone. */
.nav-links{font-size:.58rem; gap:.26rem; letter-spacing:.01em;}
}
/* 2026-08-10: the band's upper edge moved 1200px -> 1500px when Piešťany
became the ELEVENTH city item (owner). The items themselves never wrap —
.nav-links stays one row at every desktop width — but past a threshold the
BRAND no longer fits beside them and .site-nav's flex-wrap pushes the links
to a second line, taking the bar from 66px to 89px. With ten items that
threshold sat just under 1200px; with eleven it sits just under 1500px.
Probe-verified with getBoundingClientRect at 1280/1400/1500/1600/1700/1920.
With twelve (2026-08-17) that edge became 1699.98px (see the top of this
block); with thirteen (2026-08-18) the edge was removed rather than moved
again — see the 2026-08-18 note above. */
/* 2026-08-09 owner directive: NO pictorial section backgrounds anywhere —
the layered silhouette scenes made text hard to read (owner screenshot
of /castles/holic/). Every .story-section now keeps only its plain
palette backdrop: the .bg-illustration SVG layer and the .veil vignette
are disabled sitewide. The homepage transit map is unaffected (it is
hero CONTENT, not a .bg-illustration). The empty .bg-illustration divs
stay in the page HTML on purpose — hiding here is one reversible rule
instead of edits to 121 pages. Do not re-enable per page. */
.story-section .bg-illustration,
.story-section .veil{display:none !important;}
/* 2026-08-09 city hero background photos (owner: "generate suitable
background images for the city pages - add prompts"). Each city hub hero
carries ONE .hero-bg-slot img-slot; until its photo is generated + wired
the slot renders nothing (frame and caption hidden), after wiring the
photo becomes a full-bleed cover layer UNDER .section-inner with a fixed
dark veil so hero text stays readable on any image (the plain-color
directive still governs every other section). pointer-events:none keeps
the lightbox off the hero background. */
.subpage-hero .hero-bg-slot{position:absolute;inset:0;margin:0;z-index:0;pointer-events:none;}
.subpage-hero .hero-bg-slot .img-slot-frame,
.subpage-hero .hero-bg-slot figcaption{display:none;}
.subpage-hero .hero-bg-slot picture,
.subpage-hero .hero-bg-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.subpage-hero .hero-bg-slot::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg, rgba(23,12,34,.5) 0%, rgba(23,12,34,.72) 60%, rgba(23,12,34,.86) 100%);}
.subpage-hero .section-inner{position:relative;z-index:1;}
/* 2026-08-09 owner: "remove the top of the page padding, it's terrible" —
with flat plain-color backdrops the 68vh bottom-anchored subpage hero
reads as a huge dead band above the breadcrumb (owner screenshots of
/trnava/ et al.). Heroes are now content-height and top-aligned,
starting right under the fixed glass bar. The homepage is untouched
(its hero is the transit map, content-frozen by owner directive). */
.subpage-hero{
min-height:0;
justify-content:flex-start;
padding-top:7.5rem;
padding-bottom:3rem;
}
@media(max-width:600px){
.subpage-hero{min-height:0;padding-top:7rem;padding-bottom:2.4rem;}
}
/* 2026-08-09 venue thumbnail grids on the city castles/shopping index pages
(owner: "create the thumbnails"). Each card shows the venue's own wired
photo and links to its dedicated page; names stay bilingual. */
.venue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.2rem;margin:2rem 0;}
.venue-card{display:block;text-decoration:none;color:inherit;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;transition:transform .2s ease,border-color .2s ease;}
.venue-card:hover{transform:translateY(-3px);border-color:var(--dawn-1);}
.venue-thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:rgba(0,0,0,.3);}
.venue-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.venue-card strong{display:block;padding:.7rem .9rem .1rem;font-size:1.02rem;line-height:1.3;}
.venue-card em{display:block;padding:0 .9rem .8rem;font-style:normal;opacity:.75;font-size:.85rem;}
/* Landing-page chapter grid: three thumbnails per row (owner spec), as many
rows as needed; collapses 3->2->1 on narrower screens. */
.venue-grid.three{grid-template-columns:repeat(3,1fr);}
@media(max-width:920px){.venue-grid.three{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.venue-grid.three{grid-template-columns:1fr;}}
/* 2026-08-09 — breadcrumbs lifted out of the hero into a full-width strip at
the very top of the page (owner: "breadcrumbs completely on the top of the
web page"). They used to sit inside .subpage-hero, below its 7.5rem
fixed-bar clearance and indented to the content column, so they read as part
of the headline block rather than as page chrome.
The strip now carries the clearance the hero used to carry. Nav height was
measured across breakpoints (65px @1400, 65 @1100, 78 @900 where it wraps,
70 @700/390), so 5.4rem / 5.9rem clear it everywhere with a small gap.
The explicit colour is load-bearing: outside a palette section the crumb
would inherit body{color:var(--ink)}, which is dark on this dark ground.
The :has() guard keeps pages with no breadcrumb (the homepage, /search/) on
the original hero padding — same :has() pattern already used above for
scroll-padding-top. */
.breadcrumb-bar{
background:var(--dusk-4);
color:#efe6f4;
border-bottom:1px solid rgba(255,255,255,.10);
/* Owner 2026-08-10: compact top — just clear the ~65px fixed bar. */
padding:4.5rem var(--gutter) .8rem;
/* The Google Map pill lives at this row's right-hand end (owner
2026-08-20: "same width as Search, place it under the Search"), so the
bar is a flex row: crumbs left, pill right. The RIGHT inset matches the
nav's own padding-right, which is what puts the pill exactly under the
Search pill instead of further in on the page gutter. */
display:flex;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:.55rem 1.2rem;
padding-right:clamp(.75rem,3vw,1.6rem);
/* html carries scroll-snap-type:y proximity and .story-section is a snap
target, so without this the hero — the first target — pulls the strip up
under the fixed bar on load. Making the strip its own snap target keeps
the top of the page an honest resting place. */
scroll-snap-align:start;
}
.breadcrumb-bar .breadcrumb{margin-bottom:0;opacity:.82;}
body:has(.breadcrumb-bar) .subpage-hero{padding-top:1.6rem;}
@media(max-width:1000px){
/* the bar wraps to two rows here and measures 78px, its tallest anywhere */
.breadcrumb-bar{padding-top:5.4rem;}
}
@media(max-width:600px){
.breadcrumb-bar{padding-bottom:.8rem;}
body:has(.breadcrumb-bar) .subpage-hero{padding-top:1.4rem;}
}
/* ============================================================
BODY PARAGRAPH RHYTHM (2026-08-17)
Sections generated by 34-build-pages.py emit plain for body prose, and
nothing in this sheet ever gave a bare
a bottom margin — the reset zeroes
it. Hand-built pages hid the gap by writing their body copy as
,
so the defect was invisible on the pages anyone looked at and universal on the
~500 generated ones: three paragraphs of a town's history ran together as a
single block with no break at all.
Scoped with :not([class]) so it touches only that generated body copy and
leaves .lede, .read-more, .breadcrumb, .quiz-* and the card paragraphs exactly
as they are — each of those already carries its own spacing.
============================================================ */
.subpage-section .section-inner > p:not([class]),
.subpage-hero .section-inner > p:not([class]){
margin:0 0 1.15rem;
max-width:78ch;
}
.subpage-section .section-inner > p:not([class]):last-child{margin-bottom:0;}
/* ====================================================================
NO RIGHT-ALIGNED TEXT — owner directive 2026-08-20.
The alternating left/right editorial rhythm is retired. Every section
reads left-aligned at every width, on every page. The owner's example
was /banska-bystrica/castles/filakovsky-hrad/legend/, but the ruling is
sitewide, not a per-page fix.
Neutralised here rather than deleted at source, exactly as the
.bg-illustration scenes were on 2026-08-09: hundreds of pages carry
class="align-right" in their markup, so this keeps the change to one
block and fully reversible. Below 600px the stylesheet already reset
these to left — this simply makes every width behave the way the phone
already did.
Do NOT reintroduce text-align:right. If a future design wants the
alternating rhythm back, that is an owner decision, not a tidy-up.
==================================================================== */
.align-right .section-inner{margin-left:0;text-align:left;}
.align-right .pull{border-left:2px solid currentColor;border-right:none;
padding-left:1.2rem;padding-right:0;margin-left:0;}
.align-right .stat-row{justify-content:flex-start;}
.align-right .lede{margin-left:0;}
/* Drop cap comes back: it was suppressed only because a float:left versal
cannot sit in right-aligned text. Scoped :first-of-type to match the base
rule, so a section opens with a versal and its later ledes do not. */
.align-right .lede:first-of-type::first-letter{float:left;}
.align-right .castle-group,
.align-right .castle-index{margin-left:0;margin-right:0;}
/* ------------------------------------------------------------------
SKIP LINK — 2026-08-20 accessibility audit.
The mega menu is 517 links. Closed panels are visibility:hidden so
their contents are not focusable, but a keyboard or screen-reader
visitor still crossed the whole top bar, and the hamburger panel at
narrow widths, on every single page before reaching any content.
There was no skip link anywhere on the live site.
Lives in the menu partial so every page gets it with no page edit;
its target is set at runtime by nav.js, because no page on this
site has a element to point at.
------------------------------------------------------------------ */
.skip-link{
position:absolute;
left:-9999px;
top:0;
z-index:400; /* above the fixed bar (300) */
padding:.7rem 1.15rem;
background:var(--dawn-1);
color:#1c1030;
font-size:.9rem;
font-weight:600;
text-decoration:none;
border-radius:0 0 4px 0;
}
.skip-link:focus{
left:0;
outline:3px solid #1c1030;
outline-offset:-3px;
}
/* A hero-background figure sits INSIDE .subpage-hero, immediately before the
hero's own .section-inner — so no section padding separates them, and
.img-slot carries a top margin but none at the bottom. The result was the
caption ("Prešov's main street at dusk — page background.") butting straight
into the eyebrow line below it on all 11 city hubs. Found while
screenshot-checking the new hub directory cards, 2026-08-20.
Scoped to the hero rather than added to .img-slot globally: 1,185 wired
figures elsewhere end their section, where the section's own padding already
provides the gap and extra margin would only add slack. */
.subpage-hero > .img-slot{margin-bottom:2rem;}
/* ------------------------------------------------------------------
OPEN IN GOOGLE MAPS — owner request 2026-08-20: a page that describes
a place should put "where is it" at the top, clearly and in colour.
Pill-shaped to match the radio fab and the EN/SK toggle, which is the
shape the owner picked for the site's buttons. Dawn gradient rather
than a flat fill so it reads as the page's one primary action against
whichever palette the section is using.
------------------------------------------------------------------ */
/* THE "ON MAP" PILL — an exact twin of the nav's Search pill (owner
2026-08-20, final ruling after three rounds: "Same fonts, same color,
same background, same width, same height" — no icon, no green, no
gradient). The shared geometry lives in one rule on BOTH selectors so
the two can never drift apart; the min-width makes them the SAME
width regardless of label length ("Search"/"On Map", "Hľadať"/"Na
mape"), which is also why each is centered inside it. */
.map-cta{
margin:0;
/* Two pills now — History then On Map (owner 2026-08-21). Flex gives them a
gap without touching the shared pill rule below, and a single-pill page
lays out exactly as it did before. */
display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;justify-content:flex-end;
}
/* .hist-btn is a handle for finding the button again, not a look: it carries
.map-btn and inherits the geometry the owner settled after three rounds
("Same fonts, same color, same background, same width, same height"). */
.nav-links .nav-search,
.map-btn{
display:inline-flex;align-items:center;justify-content:center;
min-width:7.2rem;
padding:.34rem .8rem;
border:1px solid rgba(255,255,255,.4);
border-radius:999px;
background:transparent;
color:#fff;
font-family:var(--sans);
font-size:.68rem;font-weight:600;
letter-spacing:.05em;text-transform:uppercase;
text-decoration:none;
white-space:nowrap;
}
.nav-links .nav-search:hover,
.map-btn:hover{background:rgba(255,255,255,.16);}
.map-btn:focus-visible{outline:3px solid var(--cream);outline-offset:3px;}
/* ── Year slider on location history pages ────────────────────────────────
The reader drags through fixed era stops and the history of this place at
that moment appears. Every era ships in the HTML as an ordinary list item,
so with JS off the page is a complete readable history; .tl-js is added by
timeline.js and is what collapses it to one era at a time. */
.tl{margin:2.4rem 0 0;}
.tl{position:relative;}
.tl-track{position:relative;padding:1.8rem 0 0;}
.tl-range{
-webkit-appearance:none;appearance:none;
display:block;width:100%;height:2.2rem;margin:0;
background:transparent;cursor:pointer;
}
.tl-range:focus{outline:none;}
.tl-range::-webkit-slider-runnable-track{
height:6px;border-radius:999px;
background:linear-gradient(90deg,var(--dawn-3),var(--dawn-2));
}
.tl-range::-moz-range-track{
height:6px;border-radius:999px;
background:linear-gradient(90deg,var(--dawn-3),var(--dawn-2));
}
.tl-range::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;
width:1.5rem;height:1.5rem;margin-top:-.55rem;border-radius:50%;
background:var(--cream);border:3px solid var(--dawn-2);
box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.tl-range::-moz-range-thumb{
width:1.5rem;height:1.5rem;border-radius:50%;
background:var(--cream);border:3px solid var(--dawn-2);
box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.tl-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--dawn-1);}
.tl-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--dawn-1);}
.tl-ticks{
list-style:none;margin:.1rem 0 0;padding:0;
display:flex;gap:0;
/* NOT overflow-x:auto. A scrolled strip stops lining up with the drag bar
above it — timeline.js keeps the rail inside this width instead, by
thinning LABELS rather than dropping stops. */
overflow:hidden;
}
.tl-ticks li{flex:1 1 0;min-width:0;display:flex;justify-content:center;}
/* the end stops align inward, or their year overspills the rail and is
clipped mid-digit */
.tl-ticks li.tl-edge-l{justify-content:flex-start;}
.tl-ticks li.tl-edge-r{justify-content:flex-end;}
.tl-ticks li[hidden]{display:none;}
.tl-tick{
appearance:none;border:0;background:transparent;cursor:pointer;
font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.03em;
color:currentColor;opacity:.5;
padding:.3rem .35rem;border-radius:.4rem;
transition:opacity .15s ease,background .15s ease;
}
.tl-tick:hover{opacity:.9;}
.tl-tick.is-on{opacity:1;background:var(--dawn-2);color:#1c1030;}
.tl-tick:focus-visible{outline:2px solid var(--dawn-1);outline-offset:2px;}
.tl-tick.is-dot{
display:block;width:100%;font-size:0;padding-left:0;padding-right:0;
background:transparent;
}
.tl-tick.is-dot::before{
content:"";display:block;width:.36rem;height:.36rem;border-radius:50%;
background:currentColor;opacity:.7;margin:.42rem auto;
}
.tl-tick.is-blank::before{opacity:0;}
.tl-tick.is-blank.is-on::before{opacity:1;}
.tl-tick.is-dot.is-on::before{
width:.6rem;height:.6rem;background:var(--dawn-2);opacity:1;margin:.3rem auto;
}
/* the year riding over the thumb — with labels thinned, this is what tells
the reader exactly which stop they are on */
.tl-bubble{
position:absolute;top:0;transform:translateX(-50%);
font-family:var(--sans);font-size:.78rem;font-weight:700;
font-variant-numeric:tabular-nums;letter-spacing:.02em;
background:var(--dawn-2);color:#1c1030;
padding:.15rem .5rem;border-radius:.4rem;white-space:nowrap;pointer-events:none;
}
/* offscreen twin of a tick at its widest — the script measures this to ask
whether a year still fits, because a real tick would answer with its
flex-constrained width instead */
.tl-gauge{
position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;
font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.03em;
padding:.3rem .35rem;
}
.tl-now{
margin:1.1rem 0 0;font-family:var(--sans);
font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
opacity:.75;
}
.tl-events{list-style:none;margin:.6rem 0 0;padding:0;}
.tl-event{margin:0 0 2.4rem;}
.tl-event:last-child{margin-bottom:0;}
.tl-when{
font-family:var(--sans);font-size:.8rem;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;
color:var(--dawn-2);margin:0 0 .3rem;
}
.tl-event h3{font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.2;margin:0 0 .7rem;}
/* with JS on, one era at a time */
.tl-js .tl-event{display:none;}
.tl-js .tl-event.is-on{display:block;animation:tl-in .35s ease both;}
@keyframes tl-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
.tl-js .tl-event.is-on{animation:none;}
}
@media (max-width:600px){
.tl-tick,.tl-gauge{font-size:.66rem;}
}
.tl-hint{font-size:.9rem;opacity:.7;margin:.4rem 0 0;font-style:italic;}
.tl-tick{text-decoration:none;display:inline-block;white-space:nowrap;}
.tl-year{color:var(--dawn-2);font-variant-numeric:tabular-nums;margin-right:.4em;}
.tl-more{margin:.8rem 0 0;font-size:.9rem;}
.tl-steps{margin-top:2rem;}
/* References at the foot of a history page — where the facts came from */
.refs-section{padding-top:2.4rem;padding-bottom:2.8rem;}
.ref-list{list-style:none;margin:1.4rem 0 0;padding:0;}
.ref-list li{
margin:0 0 .7rem;padding-left:1.2rem;position:relative;
font-size:.94rem;line-height:1.5;
}
.ref-list li::before{content:"→";position:absolute;left:0;opacity:.5;}
.ref-list a{text-decoration:underline;text-underline-offset:2px;}
.ref-note{opacity:.65;font-size:.86rem;}
/* the slider now leads the section, so it needs its own breathing room */
.tl{margin-top:1.2rem;}
.tl .headline{margin-top:2rem;}
.tl-hint{margin-top:.5rem;}
/* ── History YEAR pages — hero and measure ─────────────────────────────────
Owner-approved 2026-08-21 from a prototype on /nitra/towns/sahy/history/1827/.
Scoped to .history-year, which 50-build-history-timelines.py puts on the
year page's hero and nowhere else: a LANDING's .lede is intro prose rather
than a place name, so these rules would mangle it.
The hero reads as one line — place │ year · story — built with flex ORDER
rather than by reordering markup, so the builder's HTML is untouched. */
.history-year .section-inner{
display:flex;
flex-wrap:wrap;
align-items:baseline; /* three sizes on one line, not centred on their boxes */
column-gap:.7rem;
}
.history-year .tl-when{ order:1; flex:0 0 100%; }
/* .subpage-hero h1 carries max-width:40ch, which is right for a headline that
owns its own line. Here the h1 is only the SECOND HALF of a merged line —
place │ year · story — so a 40ch cap on it broke the title several words
before the column edge ("...and the last week" dropping to a second row on
/bratislava/history/1944/). The line now runs to the same edge as the prose
and the illustration. */
.history-year h1{ max-width:none; flex:1 1 auto; min-width:0; }
.history-year .lede{ order:2; }
.history-year h1{ order:3; margin:0; }
.history-year .lede{
margin:0;
font-family:var(--serif);
font-weight:700;
font-size:clamp(1.8rem,2.9vw,2.35rem);
line-height:1.1;
letter-spacing:-.02em;
/* inherit, NOT the light palette's ink: history year pages come in three
palettes — towns are the pale .mountains, cities and castles the dark
.castles, villages the dark .culture. A hard-coded --alp-4 here is
near-black and would have vanished on two of the three. */
color:inherit;
}
/* a hairline between the place and the year, in the palette's own ink for the
same reason */
.history-year .lede::after{
content:"";
display:inline-block;
width:1px;
height:1.1em;
margin-left:.75rem;
vertical-align:-.15em;
background:currentColor;
opacity:.4;
}
/* Below the wrap the place takes a row of its own, where the divider dangles
at the end of it pointing at nothing. */
@media (max-width:820px){
.history-year .lede::after{ display:none; }
.history-year .lede{ flex:0 0 100%; margin-bottom:.15rem; }
}
/* "Sahy" sat ~120px clear of the paragraph below: the hero's padding-bottom
and the section's padding-top, two gaps stacked where the reader sees one.
They are the same colour band on these pages, so the space separated
nothing. */
.history-year{ padding-bottom:1.3rem; }
#event.subpage-section{ padding-top:.8rem; }
/* The prose was capped at 78ch (~700px) while the illustration ran the full
column (~1080px), so the text looked indented against its own picture. */
.history-year .section-inner > p:not([class]),
#event .section-inner > p:not([class]){ max-width:none; }
/* THE ACCENT, ON THE ONE LIGHT PALETTE ONLY. --dawn-2 is a warm orange built
for this site's dark backgrounds. Measured against each palette a history
page actually uses:
.mountains (towns) dawn-2 1.50:1 dawn-3 5.39:1
.castles (cities) dawn-2 6.07:1 dawn-3 1.69:1
.culture (villages) dawn-2 3.43:1 dawn-3 1.05:1
So the orange fails only on the pale blue, and the plum would fail on both
dark palettes — at 1.05:1 it is invisible. Swapping globally would have
traded one broken palette for two. */
.mountains .tl-when,
.mountains .tl-year{ color:var(--dawn-3); }