/* Rail Pics — one stylesheet, no build step. * * Structure: tokens, reset, layout, then components in the order a page uses * them. Every colour comes from a custom property so light and dark are the * same stylesheet: the palette is defined once for light, overridden once for * dark, and the theme is chosen by the OS unless the visitor picks one (in * which case site.js writes data-theme on ). * * Conventions: * - Component classes are flat and reusable (.btn, .card, .chip, .field). * Prefer composing them in templates over writing page-specific CSS. * - Mobile first: base rules are the small-screen layout, media queries add * space. Nothing may scroll horizontally. * - Spacing/radius/shadow only from the scale below, so pages stay consistent. */ /* ---------------------------------------------------------------- tokens -- */ :root { /* Palette — light. Dark overrides only these, further down. */ --bg: #f7f7f5; --bg-raised: #ffffff; --bg-glass: rgba(251, 251, 249, 0.8); /* Glass INSIDE glass (issue #113). An element with backdrop-filter is a * backdrop root for its descendants, so a panel inside the header blurs * the header's own paint and nothing else -- the page behind it comes * through raw, which is why the dropdowns read worse than the map panel * even though every value is identical. They cannot blur, so they carry * more of the colour instead. */ --bg-glass-nested: rgba(251, 251, 249, 0.95); --bg-sunken: #ececea; --bg-inverse: #16181d; --text: #16181d; --text-muted: #63676f; --text-inverse: #f5f6f8; --border: #dededa; --border-strong: #c3c3be; /* SBB red (issue #189, the owner's choice). #eb0000 is the railway's own * value and it clears 4.5:1 on this background, so it can carry link * text and not only fills. Dark mode lightens it -- the same red on * near-black does not. */ --accent: #eb0000; --accent-text: #ffffff; --accent-soft: rgba(235, 0, 0, 0.09); --map-cluster-small-halo: rgba(181, 226, 140, 0.6); --map-cluster-small: rgba(110, 204, 57, 0.6); --map-cluster-medium-halo: rgba(241, 211, 87, 0.6); --map-cluster-medium: rgba(240, 194, 12, 0.6); --map-cluster-large-halo: rgba(253, 156, 115, 0.6); --map-cluster-large: rgba(241, 128, 23, 0.6); --map-cluster-text: #16181d; /* The warm second accent (issue #65: "bring some colours"): signal * orange, the same family as the sun tool's lines, used for small * highlights -- never for whole surfaces. */ --accent-2: #d97a1a; --accent-2-soft: rgba(217, 122, 26, 0.12); --weather-sun: #f3b32a; --weather-cloud: #9cb7d6; --weather-high-cloud: #74839c; --weather-rain: #1d5fa4; --weather-snow: #4e91bd; --weather-storm: #7557b7; --weather-night: #183153; --weather-lightning: #f3b32a; --weather-fog: #7b818a; --danger: #b3261e; --shadow-sm: 0 1px 2px rgba(16, 18, 22, 0.06), 0 1px 3px rgba(16, 18, 22, 0.08); --shadow-md: 0 2px 6px rgba(16, 18, 22, 0.08), 0 8px 24px rgba(16, 18, 22, 0.10); --shadow-lg: 0 8px 20px rgba(16, 18, 22, 0.12), 0 24px 48px rgba(16, 18, 22, 0.16); /* Photos sit on a deliberately dark tile in both themes: a bright frame * around a photograph shifts how its own colours read. */ --photo-mat: #22242a; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Corners, after issue #189: "nicht mehr alles so abgerundet, bzw * einfach nur noch dort wo es Sinn macht." * * Surfaces -- cards, panels, sheets, photos -- are square. What stays * round is what rounding says something about: a control you press * (2px, enough to read as a button and not as a box), and the pills * that are pills because they are pills. */ --radius-sm: 2px; --radius-md: 0px; --radius-lg: 0px; --radius-pill: 999px; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --header-height: 60px; --content-width: 1180px; --prose-width: 720px; /* A Reisebericht's own measure (issue #276, the owner: "Zudem sind die * Textblöcke nicht lange genug"). `none` means the card it sits in is the * measure, which is the editor's textarea width -- see the * `.report-page .report-text` rule for the arithmetic, the character count * and how to dial it back. Kept apart from --prose-width because that one * is shared with thirteen other places and none of them asked to change. * * Width tokens live in this block only, like the two above: they do not * change with the theme, so the dark blocks have nothing to say about * them. */ --report-measure: none; /* The map's own credit line (issue #334). Theme-independent on purpose, * like the width tokens above and for a reason of its own: Google * renders its copyright row itself and offers no way to theme it, so a * credit bar of ours that turned dark sat beside a light one that could * not. These three are Google's treatment -- a translucent white plate, * dark grey lettering, a slightly darker grey for the links -- and they * are deliberately absent from the two dark blocks below. */ --map-credit-bg: rgba(255, 255, 255, 0.75); --map-credit-text: #3c4043; --map-credit-link: #202124; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0e1014; --bg-raised: #171a20; --bg-glass: rgba(18, 21, 27, 0.82); --bg-glass-nested: rgba(20, 23, 30, 0.96); --bg-sunken: #090a0d; --bg-inverse: #f5f6f8; --text: #f2f4f7; --text-muted: #98a0ad; --text-inverse: #16181d; --border: #262a33; --border-strong: #39404c; --accent: #ff5f52; --accent-text: #1a0503; --accent-soft: rgba(255, 95, 82, 0.16); --map-cluster-small-halo: rgba(181, 226, 140, 0.6); --map-cluster-small: rgba(110, 204, 57, 0.6); --map-cluster-medium-halo: rgba(241, 211, 87, 0.6); --map-cluster-medium: rgba(240, 194, 12, 0.6); --map-cluster-large-halo: rgba(253, 156, 115, 0.6); --map-cluster-large: rgba(241, 128, 23, 0.6); --map-cluster-text: #16181d; --accent-2: #f5993d; --accent-2-soft: rgba(245, 153, 61, 0.16); --weather-sun: #ffd43b; --weather-cloud: #aec9ed; --weather-high-cloud: #6f7d8f; --weather-rain: #3f7de0; --weather-snow: #a7d8f5; --weather-storm: #bda4ff; --weather-night: #b8cbff; --weather-lightning: #ffd43b; --weather-fog: #929ba8; --danger: #ff6b6b; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.55); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } } /* Explicit choice wins over the OS setting, in both directions. */ :root[data-theme="dark"] { --bg: #0e1014; --bg-raised: #171a20; --bg-glass: rgba(18, 21, 27, 0.82); --bg-glass-nested: rgba(20, 23, 30, 0.96); --bg-sunken: #090a0d; --bg-inverse: #f5f6f8; --text: #f2f4f7; --text-muted: #98a0ad; --text-inverse: #16181d; --border: #262a33; --border-strong: #39404c; --accent: #ff5f52; --accent-text: #1a0503; --accent-soft: rgba(255, 95, 82, 0.16); --map-cluster-small-halo: rgba(181, 226, 140, 0.6); --map-cluster-small: rgba(110, 204, 57, 0.6); --map-cluster-medium-halo: rgba(241, 211, 87, 0.6); --map-cluster-medium: rgba(240, 194, 12, 0.6); --map-cluster-large-halo: rgba(253, 156, 115, 0.6); --map-cluster-large: rgba(241, 128, 23, 0.6); --map-cluster-text: #16181d; --accent-2: #f5993d; --accent-2-soft: rgba(245, 153, 61, 0.16); --weather-sun: #ffd43b; --weather-cloud: #aec9ed; --weather-high-cloud: #6f7d8f; --weather-rain: #3f7de0; --weather-snow: #a7d8f5; --weather-storm: #bda4ff; --weather-night: #b8cbff; --weather-lightning: #ffd43b; --weather-fog: #929ba8; --danger: #ff6b6b; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.55); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } /* ----------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Always reserve the scrollbar's width, whether or not this page needs * one (issue #20). Without it a short page and a long one are laid out in * viewports 15px apart, so moving between them shifts and slightly * narrows the content -- measured on the homepage: page 1 fits a tall * screen and does not scroll, page 2 does, and everything jumped left by * exactly the scrollbar width. Browsers that do not know the property * simply behave as before. */ scrollbar-gutter: stable; /* Every fragment lands clear of the sticky header (issue #355). A save * in the photospot editor redirects to ?bearbeiten=1#anzeigename, and * without this the title field, its Speichern and its close link all * scrolled under the header: the editor looked like a page with no way * out. One property on the root scroller, instead of a scroll-margin * per anchor (the photo editor's fields keep theirs, which is larger * on purpose). */ scroll-padding-top: calc(var(--header-height) + var(--space-4)); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.55; /* Nothing may cause a horizontal scrollbar. */ overflow-x: hidden; /* The footer stays at the bottom of the window on a short page instead of * riding up under the content. dvh, not vh, so a phone's collapsing * address bar does not leave a gap. */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } /* Takes the leftover height, which is what pushes the footer down. */ body > main { flex: 1 0 auto; } body > .site-footer { flex-shrink: 0; } img, picture, video { max-width: 100%; } /* Photos carry intrinsic width/height ATTRIBUTES since issue #235, so the * browser can reserve the right box before the file arrives. Those * attributes map to CSS presentational hints -- and that is the trap: an * author rule saying `width: 100%` overrides the width hint, but nothing * was overriding the HEIGHT hint, so every card kept the pixel height of * the original photo and the gallery grew to thousands of pixels a row. * Found live on 2026-08-27, one day after the attributes shipped. * * `height: auto` is the default every sized image wants: the CSS decides * the box (aspect-ratio, max-height, object-fit) and the attribute is left * to do the one job it is for. A rule that genuinely wants a fixed height * still beats this one on specificity. */ img { height: auto; } /* Bigger, tighter, with clearer steps between the levels (issue #189). The * character of this site is meant to come from its typography and its grid * rather than from decoration -- which is the tradition Swiss railway * graphics sit in anyway. */ h1, h2, h3, h4, h5 { margin: 0 0 var(--space-3); line-height: 1.18; font-weight: 700; letter-spacing: -0.022em; text-wrap: balance; } h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); } h2 { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.75rem); } h3 { font-size: 1.15rem; letter-spacing: -0.015em; } h4, h5 { letter-spacing: -0.01em; } p { margin: 0 0 var(--space-3); } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Respect the OS "reduce motion" setting rather than animating regardless. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Visible only to screen readers — skip links, icon-button labels. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-3); top: -100px; z-index: 100; padding: var(--space-2) var(--space-4); background: var(--accent); color: var(--accent-text); border-radius: var(--radius-sm); transition: top 0.15s ease; } .skip-link:focus { top: var(--space-3); } /* ---------------------------------------------------------------- layout -- */ .page { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-8); } /* Two page widths, and they stay. Issue #177 asked for one -- everything at * the wide column, with prose capping itself inside it -- and the owner's * verdict on seeing it was "das hat nun alles verschlimmert". Reverted the * same day. Forms, prose and single cards read better in a narrow column * than they do stretched across 1180px, whatever the theory says. */ .page--narrow { max-width: var(--prose-width); } .page--flush { padding-left: 0; padding-right: 0; } @media (min-width: 720px) { .page { padding: var(--space-6) var(--space-6) var(--space-8); } } /* A heading, its line of explanation, and a rule under both (issue #189). * The rule is what turns a heading into a section instead of a floating * sentence, and it costs one border rather than a shadow. */ .page-header { margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); } .page-header p { color: var(--text-muted); margin: 0; max-width: var(--prose-width); } /* A caption, not a headline. Used where the heading names the thing above it * rather than announcing a page (issue #189): a photo title at the full * heading size competes with the photograph. */ .page-header--caption h1 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); letter-spacing: -0.015em; } .stack { display: flex; flex-direction: column; gap: var(--space-4); } .row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .row--tight{ gap: var(--space-2); } .push { margin-left: auto; } .muted { color: var(--text-muted); } .text-sm { font-size: 0.875rem; } .divider { height: 1px; border: 0; margin: var(--space-6) 0; background: var(--border); } /* ---------------------------------------------------------------- header -- */ .site-header { position: sticky; top: 0; /* Above everything the map floats (issue #117): its sidebar sits at * 1100 and Leaflet's controls at 1000, and because the header is its * own stacking context, its dropdowns can only be as high as it is -- * they were opening UNDER the map panel. */ z-index: 1200; /* The same liquid glass as every floating surface (owner's call: * "identisch") -- one recipe, --bg-glass + blur(14) saturate(1.5). */ background: var(--bg); background: var(--bg-glass); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); border-bottom: 1px solid var(--border); } .site-header__inner { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--space-4); height: var(--header-height); display: flex; align-items: center; gap: var(--space-3); } @media (min-width: 720px) { .site-header__inner { padding: 0 var(--space-6); } } .logo { display: flex; align-items: center; gap: var(--space-2); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; flex-shrink: 0; } .logo:hover { text-decoration: none; } /* Search grows to fill the middle; it is the widest thing in the header. */ .header-search { flex: 1 1 auto; min-width: 0; display: flex; } .header-search input { width: 100%; min-width: 0; padding: var(--space-2) var(--space-4); /* The same liquid glass as every other translucent surface * (issue #69): the search field was the last solid one. */ background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-pill); font: inherit; font-size: 0.9rem; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .header-search input { background: var(--bg-glass-nested); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); } } .header-search input::placeholder { color: var(--text-muted); } /* Search and Filter have separate boxes. The map's one filter section lives * in this dropdown; shared menu behavior handles all header menus. */ .header-search input { border-radius: var(--radius-md); } .header-filter { position: relative; flex: 0 0 auto; } .header-filter .header-search__filter { border-radius: var(--radius-md); } .header-filter .map-filter-dropdown { width: calc(var(--space-8) * 6); max-width: calc(100vw - var(--space-5)); min-width: 0; max-height: calc(100dvh - var(--header-height) - var(--space-5)); padding: var(--space-4); overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; } @media (max-width: 719px) { .header-filter .map-filter-dropdown { position: fixed; top: calc(var(--header-height) + var(--space-1)); right: var(--space-3); } } @media (max-width: 419px) { .site-header__inner { gap: var(--space-2); } .header-search input { padding-inline: var(--space-2); } .header-filter .header-search__filter { padding-inline: var(--space-2); gap: var(--space-1); } } /* The same as every other field: the shared outline, nothing of its own. */ /* On phones the search field moves into the drawer, and the nav collapses. */ .header-nav { display: none; align-items: center; gap: var(--space-1); } .header-nav a, .header-nav .menu__trigger { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: 0.9rem; white-space: nowrap; } .header-nav a:hover, .header-nav .menu__trigger:hover { background: var(--bg-sunken); text-decoration: none; } .header-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: inherit; cursor: pointer; } @media (min-width: 900px) { .header-nav { display: flex; } .nav-toggle { display: none; } } /* NO `overflow: hidden` here, and that is the whole point (issue #186). * * It used to be the scroll lock, and it is also what breaks `position: * sticky` on a descendant: with the overflow hidden the header stopped being * pinned the moment the drawer opened, fell back to its place at the top of * the DOCUMENT, and on a page scrolled 1900px down the whole menu opened * 1900px above the screen. It was open the entire time -- just up there. * * The lock lives in site.js now, which blocks the gestures outside the drawer * instead of freezing the scroller. That leaves the header sticky, so the * drawer opens where the reader is looking whatever the scroll position. */ /* Mobile drawer: the same links, stacked, revealed under the header. */ .drawer { display: none; border-bottom: 1px solid var(--border); background: var(--bg-raised); padding: var(--space-3) var(--space-4) var(--space-4); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .drawer { background: var(--bg-glass-nested); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); } } .drawer.is-open { display: block; /* Taller than the screen (a signed-in photographer has every link) means * the drawer scrolls itself rather than being cut off. `contain` stops * that scroll chaining to the page when it reaches its end -- which is * the "don't scroll while touching the menu" half of the problem. */ max-height: calc(100dvh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } @media (min-width: 900px) { .drawer, .drawer.is-open { display: none; } } .drawer a, .drawer button { display: block; width: 100%; padding: var(--space-3) var(--space-2); border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .drawer a:hover, .drawer button:hover { background: var(--bg-sunken); text-decoration: none; } .drawer__group { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); } .drawer__label { padding: 0 var(--space-2); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } /* ------------------------------------------------------------ menu (pop) -- */ .menu { position: relative; } .menu__trigger { display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: 0; color: inherit; font: inherit; cursor: pointer; } /* The one-off gaps that used to be inline `style` attributes (issue #163). * Deliberately NOT a utility scale: four names for four distances that were * already in the markup, so the values are tokens and the markup can be * restyled. A fifth would be a sign that the component should carry its own * spacing instead. See docs/design.md. */ .spaced-above--sm { margin-top: var(--space-3); } .spaced-above--md { margin-top: var(--space-4); } .spaced-above--lg { margin-top: var(--space-5); } .spaced-above--xl { margin-top: var(--space-6); } .spaced-below--sm { margin-bottom: var(--space-3); } .spaced-below--md { margin-bottom: var(--space-4); } .spaced-below--lg { margin-bottom: var(--space-5); } .spaced-below--xl { margin-bottom: var(--space-6); } /* ONE panel recipe (issue #163). Everything that floats near the thing that * opened it -- the menus, the search suggestions, the autocomplete, the map's * controls -- is this, plus its own positioning. Four declarations copied into * five places is how the autocomplete ended up looking like a browser widget * instead of like this site. See docs/design.md. */ .panel, .menu__panel, .suggest__panel, .header-search__panel { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .menu__panel { position: absolute; right: 0; top: calc(100% + var(--space-2)); min-width: 220px; padding: var(--space-2); z-index: 950; /* A real dropdown, not "some hovering thing" (issue #65): it grows out * of its trigger with a quick fade-and-settle, Apple/Google style. * visibility instead of display so the transition can run. */ opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top right; transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s; pointer-events: none; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .menu__panel { background: var(--bg-glass-nested); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); } } .menu__panel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.14s ease, transform 0.14s ease; pointer-events: auto; } .menu__panel a, .menu__panel button { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; } .menu__panel a:hover, .menu__panel button:hover { background: var(--bg-sunken); text-decoration: none; } .menu__panel [aria-current="true"] { color: var(--accent); font-weight: 600; } .menu__sep { height: 1px; margin: var(--space-2) 0; /* The text's own colour, faded just enough to stay a rule and not a * line of type (issue #71: "same color as the text"). */ background: currentColor; opacity: 0.35; } /* The browser's own `[hidden] { display: none }` is a plain type-less rule, so * any component that sets `display` beats it and the attribute quietly does * nothing. `.action-bar` (flex) and `.btn` (inline-flex) both did exactly that: * the upload page's action bar was never hidden when it had nothing to act on. * This is the one place !important is the right tool -- the whole point of the * attribute is that it wins. */ [hidden] { display: none !important; } /* --------------------------------------------------------------- buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--bg-raised); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 0.9rem; font-weight: 550; line-height: 1.2; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .btn:hover { background: var(--bg-sunken); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } .btn--primary { background: var(--accent); color: var(--accent-text); border-color: transparent; } .btn--primary:hover { background: color-mix(in srgb, var(--accent) 85%, var(--text)); } .btn--ghost { background: none; border-color: transparent; } .btn--ghost:hover { background: var(--bg-sunken); } /* Outlined, never filled -- and with a red accent (issue #189) that stopped * being a matter of taste: a filled danger button and a filled primary button * would be the same button. */ .btn--danger { color: var(--danger); border-color: var(--danger); background: none; } .btn--danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); } .btn--sm { padding: var(--space-2) var(--space-3); font-size: 0.8rem; } .btn--block { width: 100%; } /* Round icon-only button, e.g. the delete cross on upload previews. */ .btn--icon { width: 32px; height: 32px; padding: 0; border-radius: var(--radius-pill); font-size: 1rem; } /* A close cross drawn from two bars instead of typeset as "×". The glyph sits * on the font's math axis, which is above the middle of the line box, so a * flex-centred × is always a little high in its circle however the box is * centred. Two rotated bars are centred by construction, in any font. */ .btn--close { position: relative; /* No text inside, but keep the accessible name on the element. */ font-size: 0; line-height: 0; } .btn--close::before, .btn--close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 1.5px; border-radius: 1px; background: currentColor; } .btn--close::before { transform: translate(-50%, -50%) rotate(45deg); } .btn--close::after { transform: translate(-50%, -50%) rotate(-45deg); } /* Floating action bar, used by the upload page. */ .action-bar { position: sticky; bottom: 0; z-index: 500; display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); padding: var(--space-3); background: var(--bg); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border); } /* ----------------------------------------------------------------- chips -- */ .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; } .chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; } a.chip:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); text-decoration: none; } .chip--accent { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } /* One accent, not two (issue #189). The orange second accent beside the new * red read as a mistake rather than as a highlight; it keeps its token for * anything that genuinely wants a warm mark, but nothing in the chrome uses * it any more. */ .chip:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } /* ----------------------------------------------------------------- cards -- */ .card { background: var(--bg-raised); border: 1px solid var(--border); /* --radius-md like every other container box (issue #56): corners that * agree are most of what "lined up" means. Controls stay --radius-sm, * chips stay pills. */ border-radius: var(--radius-md); padding: var(--space-5); } .card--flush { padding: 0; overflow: hidden; } /* ------------------------------------------------------------ photo grid -- */ /* One grid for every gallery on the site. auto-fill keeps cards a sane size * from phone to desktop without per-page breakpoints. */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--space-4); } .photo-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: var(--space-4); } .photo-card { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md); background: var(--photo-mat); box-shadow: var(--shadow-sm); transition: transform 0.18s ease, box-shadow 0.18s ease; } .photo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } /* must not interrupt the card's sizing chain. */ .photo-card picture { display: contents; } .photo-card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .photo-card__body { position: absolute; inset: auto 0 0 0; padding: var(--space-5) var(--space-3) var(--space-3); color: #fff; /* Gradient rather than a flat panel: keeps more of the photo visible. */ background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.35) 55%, transparent); } .photo-card__title { margin: 0; font-size: 0.95rem; font-weight: 600; /* Two lines maximum, so cards in a row stay the same height. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* One big click target: a dedicated overlay anchor (see photo_card.html for * why not a stretched ::after). Real links inside the card sit above it. */ .photo-card__overlay { position: absolute; inset: 0; z-index: 1; } .photo-card__title a { position: relative; z-index: 2; } .photo-card__title a:hover { text-decoration: none; } .photo-card__meta { position: relative; z-index: 2; margin: var(--space-1) 0 0; font-size: 0.78rem; color: rgba(255, 255, 255, 0.82); } /* The photographer's name: a real link, above the stretched one. */ .photo-card__meta a { text-decoration: underline; text-underline-offset: 2px; } .photo-card__meta a:hover { color: #fff; } /* Hero card — the featured slot on the homepage. */ .photo-card--hero img { aspect-ratio: 16 / 9; } /* The two cards beside the hero live in a wrapper, which is one grid item. * Without a gap of its own they sat flush against each other while the hero * above them got the grid's gap -- the uneven spacing reported on mobile * (issue #31). Above 900px the wrapper becomes a column beside the hero and * the rule below adds the row sizing. */ .photo-grid--featured__side { display: grid; gap: var(--space-4); align-content: start; } @media (min-width: 900px) { .photo-grid--featured { grid-template-columns: 2fr 1fr; align-items: stretch; } .photo-grid--featured .photo-card--hero { height: 100%; } .photo-grid--featured .photo-card--hero img { height: 100%; aspect-ratio: auto; } .photo-grid--featured__side { grid-template-rows: 1fr 1fr; align-content: stretch; } .photo-grid--featured__side .photo-card, .photo-grid--featured__side .photo-card img { height: 100%; aspect-ratio: auto; } } /* The sort dropdown (issue #32, dropdown at the owner's request). Reuses the * generic menu contract; this only sizes it for page content rather than the * header, and gives the trigger a visible control shape -- a bare text * trigger reads as a label, not as something to click. */ .sort-menu { display: inline-block; min-width: 0; max-width: 100%; } .sort-menu .menu__trigger { max-width: 100%; padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-raised); font-size: 0.85rem; text-align: left; overflow-wrap: anywhere; cursor: pointer; } .sort-menu .menu__trigger:hover { border-color: var(--border-strong); } .sort-menu__label { color: var(--text-muted); } .sort-menu .menu__panel { /* These controls sit at the row's right edge. Keep even the hidden * panel inside the page, and let longer translated choices wrap. */ left: auto; right: 0; min-width: 100%; width: max-content; max-width: calc(100vw - var(--space-6)); font-size: 0.9rem; text-align: left; overflow-wrap: anywhere; } .sort-menu .menu__panel a, .sort-menu__current { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); } .sort-menu .menu__panel a:hover { background: var(--bg-sunken); text-decoration: none; } .sort-menu__current { font-weight: 650; background: var(--accent-soft); } @media (max-width: 719px) { .sort-menu { display: flex; justify-content: flex-end; width: 100%; } .sort-menu .menu__panel { max-width: 100%; } } /* Homepage sections (issue #37): real air between the featured strip, the * newest-photos preview and the Reiseberichte. */ /* --------------------------------------------------------- section title -- */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: var(--space-7) 0 var(--space-4); } .section-head:first-child { margin-top: 0; } .section-head h2 { margin: 0; } /* A short warm bar under every section title: rhythm and a dab of colour. */ .section-head h2::after { content: ""; display: block; width: 36px; height: 3px; margin-top: var(--space-2); border-radius: var(--radius-pill); background: var(--accent); } .section-head__hint { margin: 0; font-size: 0.85rem; color: var(--text-muted); } /* The page title, editable in place (issue #348). The input wears the * heading's own type so the words do not move when editing opens: same * size, same weight, same colour, and a hairline underneath instead of a * form field's box. The heading element stays -- the input sits inside it * -- so the page keeps exactly one h1 in both states. */ /* The in-place title editor (issue #348) takes the whole heading row, and * its close link sits beside Speichern INSIDE the form (issue #355). A save * redirects back into editing mode at #anzeigename; a close control that * wrapped under the row on its own, next to nothing, was never found. */ .title-edit { flex: 1 1 100%; min-width: 0; } .title-edit__form { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .title-edit__heading { flex: 1 1 16rem; margin: 0; min-width: 0; } .title-edit__input { width: 100%; font: inherit; color: inherit; letter-spacing: inherit; padding: 0 0 var(--space-1); border: 0; border-bottom: 2px solid var(--border-strong); border-radius: 0; background: transparent; } .title-edit__input:focus { outline: none; border-bottom-color: var(--accent); } .title-edit__hint { margin-top: var(--space-2); max-width: var(--prose-width); } /* ------------------------------------------------------------- photospot -- */ /* The spot's preview picture, under the heading (issue #335). The height is * capped because this is an identifier, not the gallery -- that is the grid * further down -- and `cover` therefore fills the box exactly, which is why * there is no mat behind it: the only thing a mat would sit under is the * caption, and a credit line on the photo stage's near-black plate reads * worse than one on the page. */ .spot-cover { margin: 0 0 var(--space-5); border-radius: var(--radius-md); overflow: hidden; } .spot-cover picture { display: contents; } /* The picture's own link, and only that one: the child combinator keeps * this off the credit line's link in the caption, which a descendant * selector turned into a zero-height block (measured). */ .spot-cover > a { display: block; line-height: 0; } .spot-cover img { width: 100%; max-height: 420px; object-fit: cover; object-position: center; } .spot-cover__caption { margin: 0; padding: var(--space-2) 0 0; line-height: 1.4; } /* The photographers' own notes about the place (issue #340). Prose, so it * takes the shared measure rather than the full page width. */ .spot-notes { max-width: var(--prose-width); margin: 0 0 var(--space-5); } .spot-notes__title { margin: 0 0 var(--space-2); font-size: 1.05rem; } .spot-notes p { margin: 0 0 var(--space-3); } .spot-notes p:last-child { margin-bottom: 0; } /* ---------------------------------------------------------- photo detail -- */ .photo-stage { background: var(--photo-mat); border-radius: var(--radius-md); overflow: hidden; margin: 0 auto var(--space-5); /* Only as wide as the photo it holds (issue #121), so the mat is what * lies UNDER the image rather than beside it. */ width: fit-content; max-width: 100%; } .photo-stage picture { display: contents; } .photo-stage { position: relative; } .photo-stage__download { position: absolute; right: var(--space-3); bottom: var(--space-3); opacity: 0; transition: opacity 0.15s ease; } .photo-stage:hover .photo-stage__download, .photo-stage__download:focus-within, .photo-stage__download:has(.is-open) { opacity: 1; } .photo-stage__download-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 0; border-radius: var(--radius-pill); background: rgba(0, 0, 0, 0.65); color: #fff; font: inherit; font-size: 0.82rem; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .photo-stage__download-btn:hover { background: rgba(0, 0, 0, 0.85); } /* The button sits at the image's bottom edge; the size list opens upwards. */ .menu__panel--up { top: auto; bottom: calc(100% + var(--space-2)); } .menu__panel a .muted { float: right; margin-left: var(--space-4); } .menu__note { margin: 0; padding: var(--space-2) var(--space-3); font-size: 0.82rem; color: var(--text-muted); max-width: 230px; } /* No hover on touch: the button has to be permanently visible there. */ @media (hover: none) { .photo-stage__download { opacity: 1; } } /* The image itself is the button that opens the full-screen view. A