/* The site chrome: the header and footer every MamaMaps page wears.
*
* Extracted from discovery-v3.css so the pages that are still Bootstrap --
* About, Contact, Profile, the deals tree, the booking funnel -- can wear the
* same header and footer as "/" without inheriting the app shell that would
* fight their layout. Those pages load this file and nothing else of v3's;
* "/" and the reading pages load it alongside discovery-v3.css.
*
* Three properties keep it safe next to Bootstrap, and all three are worth
* preserving if you edit this file:
*
* 1. No unqualified element selector. The only element selectors here are
* `body.v3-app` and `body.v3-doc`, which cannot match a page that does
* not opt in, so nothing reaches past the chrome into a page's content.
* 2. Buttons are `.uibtn`, not `.btn`. `.btn` is Bootstrap's own, and a
* global override of it would restyle every button on every CMS page.
* No other class name here appears in Bootstrap either -- checked.
* 3. The tokens below share exactly three names with the stylesheets loaded
* beside them (--radius-sm/md/lg, in magazine-theme.css and
* mamamaps-tokens.css) and mamamaps-tokens.css already maps all three to
* these same values -- that file exists to point the CMS pages at the v3
* palette. So the overlap is convergence, not a conflict. Change one and
* you have to change the other.
*
* Everything else -- the map, the rail, the cards, the bottom sheet -- stayed
* in discovery-v3.css. See README-styling.md.
*
* NOTE for the service worker: /static/* is cached cache-first with no
* revalidation, so bump `version` in places/static/js/places/serviceworker.js
* whenever this file changes.
*/
/* ---------------------------------------------------------------- tokens */
:root {
/* surfaces */
--surface: #faf8ff;
--surface-container-lowest: #ffffff;
--surface-container-low: #f2f3ff;
--surface-container: #ecedf9;
--surface-variant: #e1e2ee;
/* content */
--on-surface: #191b24;
--on-surface-variant: #424655;
--outline: #727787;
--outline-variant: #c2c6d8;
/* brand */
--primary: #0057cd;
--primary-container: #0d6efd;
--on-primary: #ffffff;
--on-primary-container: #ffffff;
/* accents */
--action-orange: #ff7a59;
--soft-teal: #2ec4b6;
--sun-yellow: #ffbf00;
--deep-onyx: #212529;
--cloud-white: #f8f9fa;
/* type */
--font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
--font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
--font-label: "Quicksand", system-ui, -apple-system, sans-serif;
/* shape + rhythm (8px base) */
--radius-sm: 0.25rem;
--radius: 0.5rem;
--radius-md: 0.75rem;
--radius-lg: 1rem;
--radius-full: 9999px;
--gutter: 24px;
--margin-desktop: 40px;
--margin-mobile: 16px;
--container-max: 1200px;
/* Gap above the first card in the list, and above a card revealed by
tapping a map pin. ONE value: .rail__scroll pads by it, and
discovery-v3.js reads it back with getComputedStyle so the resting
position and the reveal position cannot drift apart. Without the padding
the first card sat flush against the scroller's top edge and overflow
clipped its border -- it looked cropped before anything had scrolled. */
--card-top-gap: 12px;
/* the blue-tinted ambient shadows the design system calls for */
--shadow-sm: 0 1px 2px rgba(13, 110, 253, 0.06), 0 1px 3px rgba(13, 110, 253, 0.05);
--shadow-md: 0 4px 12px rgba(13, 110, 253, 0.10), 0 2px 4px rgba(13, 110, 253, 0.06);
--shadow-rail: 4px 0 24px rgba(13, 110, 253, 0.05);
}
.material-symbols-outlined {
font-family: "Material Symbols Outlined";
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.material-symbols-outlined.filled { font-variation-settings: "FILL" 1; }
/* Visually hidden but available to screen readers. The language switcher's
label needs it, so it lives here rather than in discovery-v3.css -- the CMS
pages get an identical rule from Bootstrap, but the chrome should not depend
on which stylesheet happens to be loaded beside it. */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ------------------------------------------------------------------- nav */
.topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(250, 248, 255, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(194, 198, 216, 0.3);
box-shadow: var(--shadow-sm);
flex: none;
}
.topbar__inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 16px var(--margin-desktop);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.topbar__left { display: flex; align-items: center; gap: 32px; min-width: 0; flex: 0 1 auto; }
.brand { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.brand img { height: 32px; width: auto; object-fit: contain; display: block; }
.mainnav { display: flex; align-items: center; gap: 24px; min-width: 0; }
.mainnav a {
font-family: var(--font-body);
color: var(--on-surface-variant);
text-decoration: none;
padding-bottom: 4px;
border-bottom: 2px solid transparent;
transition: color .3s, border-color .3s;
white-space: nowrap;
}
.mainnav a:hover { color: var(--primary); }
.mainnav a[aria-current="page"] {
color: var(--primary);
font-weight: 700;
border-bottom-color: var(--primary);
}
.topbar__right { display: flex; align-items: center; gap: 16px; flex: 0 1 auto; min-width: 0; }
/* Account, at every width. It replaced a "Login"/"Anmelden" ghost button that
cost ~100px on a bar already carrying four nav items, a location picker, the
language switcher and the ticketing CTA. */
.topbar__account {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
flex: none;
border-radius: var(--radius-full);
color: var(--on-surface-variant);
text-decoration: none;
transition: background .3s, color .3s;
}
.topbar__account:hover { background: var(--surface-container); color: var(--primary); }
/* The topbar is sticky, so the shell must subtract its real height -- and this
number has to MATCH what the bar actually renders, or the map shell on "/"
is that many pixels too tall and the page scrolls when it should not.
73px = 16px padding, twice, over a 40px account glyph (the tallest control
in the bar), plus the 1px bottom border. It was 69px while the glyph was
mobile-only and the 38px location picker was the tallest thing here.
Check it with: getComputedStyle-free, just
document.querySelector('.topbar').getBoundingClientRect().height at >1000px. */
.topbar { --topbar-h: 73px; }
/* location picker — a value + chevron, so it reads as "change this", not
"type a query here". Shrinks before the nav does. */
.locpicker { position: relative; flex: 0 1 auto; min-width: 0; }
.locpicker__trigger {
display: flex; align-items: center; gap: 8px;
max-width: 260px;
padding: 8px 12px 8px 14px;
border-radius: var(--radius-full);
border: 1px solid var(--outline-variant);
background: var(--surface-container);
font-family: var(--font-body);
font-size: 16px;
color: var(--on-surface);
cursor: pointer;
transition: background .2s, border-color .2s;
}
.locpicker__trigger:hover { background: var(--surface-variant); }
.locpicker__trigger[aria-expanded="true"] {
background: var(--surface);
border-color: var(--primary);
}
.locpicker__pin { color: var(--primary); font-size: 20px; flex: none; }
.locpicker__value {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-weight: 600;
}
.locpicker__caret { color: var(--outline); font-size: 20px; flex: none; }
.locpicker__menu {
position: absolute; top: calc(100% + 8px); left: 0;
min-width: 280px;
background: var(--surface);
border: 1px solid rgba(194, 198, 216, 0.5);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 8px;
z-index: 60;
}
.locpicker__menu[hidden] { display: none; }
.locpicker__current {
width: 100%; display: flex; align-items: center; gap: 12px;
padding: 12px; background: none; border: 0; cursor: pointer;
text-align: left; border-radius: var(--radius);
transition: background .2s;
}
.locpicker__current:hover { background: var(--surface-variant); }
.locpicker__current-icon {
width: 32px; height: 32px; flex: none;
border-radius: var(--radius-full);
background: rgba(13, 110, 253, 0.12);
color: var(--primary);
display: flex; align-items: center; justify-content: center;
}
.locpicker__current-icon .material-symbols-outlined { font-size: 18px; }
.locpicker__current-title {
display: block; font-family: var(--font-label);
font-size: 14px; line-height: 20px; font-weight: 700; color: var(--on-surface);
}
.locpicker__current-sub { display: block; font-size: 12px; color: var(--on-surface-variant); }
.locpicker__label {
margin: 8px 0 4px; padding: 0 12px;
font-family: var(--font-label);
font-size: 12px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--outline);
}
/* These rows are now (real links, so they work without JS). Without the
resets they inherit the browser's link styling -- blue and underlined --
which is why the popular areas looked like a list of hyperlinks rather than
menu rows. */
.locpicker__opt {
width: 100%; text-align: left;
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
border: 0; background: none; cursor: pointer;
border-radius: var(--radius);
font-family: var(--font-body); font-size: 15px;
font-weight: 500;
color: var(--on-surface);
text-decoration: none;
box-sizing: border-box;
transition: background .2s, color .2s;
}
.locpicker__opt:visited { color: var(--on-surface); }
.locpicker__opt:hover { background: var(--surface-variant); color: var(--primary); }
.locpicker__opt .material-symbols-outlined {
font-size: 20px; color: var(--outline-variant); flex: none;
transition: color .2s;
}
.locpicker__opt:hover .material-symbols-outlined { color: var(--primary); }
/* text search over locations, inside the picker */
.locpicker__search {
position: relative;
margin-bottom: 4px;
}
.locpicker__search .material-symbols-outlined {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
color: var(--outline); font-size: 20px; pointer-events: none;
}
.locpicker__search input {
width: 100%;
padding: 10px 12px 10px 40px;
border: 2px solid var(--outline-variant);
border-radius: var(--radius);
background: var(--surface-container-lowest);
font-family: var(--font-body);
font-size: 15px;
color: var(--on-surface);
outline: none;
transition: border-color .2s;
}
.locpicker__search input::placeholder { color: var(--outline); }
.locpicker__search input:focus { border-color: var(--primary); }
.locpicker__empty {
margin: 0; padding: 16px 12px;
font-size: 14px; color: var(--on-surface-variant);
}
.locpicker__empty[hidden] { display: none; }
/* buttons — 500ms hover transition, "squishy" active state */
.uibtn {
font-family: var(--font-label);
font-size: 14px; line-height: 20px; font-weight: 700;
border-radius: var(--radius-full);
cursor: pointer;
white-space: nowrap;
/* Most .uibtn are , which the browser underlines by default -- visible on
"Konto" and "Tickets buchen" in the topbar. Set here rather than on each
variant so a new one cannot reintroduce it; .uibtn--ondark already carried
its own copy for the same reason. */
text-decoration: none;
transform: scale(.95);
transition: background .5s, color .5s, box-shadow .5s, border-color .5s, transform .15s;
}
.uibtn:active { transform: scale(.90); }
.uibtn--ghost {
padding: 8px 16px;
background: transparent;
color: var(--on-surface);
border: 1px solid var(--outline-variant);
}
.uibtn--ghost:hover { background: var(--surface-variant); }
/* Action Orange is reserved for ticketing — the one CTA exception */
.uibtn--ticket {
padding: 8px 20px;
background: var(--action-orange);
color: var(--cloud-white);
border: 0;
box-shadow: var(--shadow-sm);
}
.uibtn--ticket:hover { box-shadow: var(--shadow-md); }
.uibtn--quiet {
padding: 8px 16px;
background: transparent;
border: 0;
color: var(--on-surface-variant);
}
.uibtn--quiet:hover { background: var(--surface-variant); }
.uibtn--primary {
padding: 12px 24px;
background: var(--primary);
color: var(--on-primary);
border: 0;
box-shadow: var(--shadow-sm);
display: inline-flex;
align-items: center;
gap: 8px;
}
.uibtn--primary .material-symbols-outlined { font-size: 18px; }
.uibtn--primary:hover { box-shadow: var(--shadow-md); }
/* ----------------------------------------------------------------- footer */
.sitefooter {
flex: none;
background: var(--deep-onyx);
border-top: 1px solid rgba(114, 119, 135, 0.2);
font-family: var(--font-label);
font-size: 14px; line-height: 20px;
}
/* venue acquisition band, sitting on top of the footer proper */
.venuecta { border-bottom: 1px solid rgba(114, 119, 135, 0.25); }
.venuecta__inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 32px var(--margin-desktop);
display: flex; align-items: center; justify-content: space-between;
gap: var(--gutter);
flex-wrap: wrap;
}
.venuecta h2 {
font-family: var(--font-display);
font-size: 22px; line-height: 30px; font-weight: 600;
color: var(--cloud-white);
margin: 0;
}
.venuecta p { color: var(--outline-variant); margin: 4px 0 0; }
.uibtn--ondark {
padding: 10px 24px;
background: var(--cloud-white);
color: var(--deep-onyx);
border: 0;
text-decoration: none;
display: inline-block;
flex: none;
}
.uibtn--ondark:hover { box-shadow: var(--shadow-md); }
.sitefooter__inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 48px var(--margin-desktop);
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: var(--gutter);
}
.sitefooter__brandcol { display: flex; flex-direction: column; align-items: flex-start; }
.sitefooter__brand { display: inline-block; margin-bottom: 16px; }
.sitefooter__brand img { height: 32px; width: auto; display: block; }
.sitefooter p { color: var(--outline-variant); margin: 0; }
.sitefooter__col { display: flex; flex-direction: column; gap: 12px; }
.sitefooter__col h3 {
font-family: var(--font-label);
font-size: 12px; line-height: 16px; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase;
color: var(--cloud-white);
margin: 0 0 4px;
}
.sitefooter__col a {
color: var(--outline-variant);
text-decoration: none;
opacity: .8;
transition: color .3s, opacity .3s;
}
.sitefooter__col a:hover { color: var(--cloud-white); opacity: 1; text-decoration: underline; }
/* four columns need more room than three did */
@media (max-width: 1100px) {
.sitefooter__inner { grid-template-columns: 1fr 1fr 1fr; }
.sitefooter__brandcol { grid-column: 1 / -1; }
}
/* --- Language switcher (header) ----------------------------------------- */
/* Mirrors .locpicker__trigger beside it, at about a third of the width: a
globe and a two-letter code. It sat in the dark footer until the header
took it, which is why it used to be painted for a dark ground.
The pill below is our markup; the