/* The International Salon Project — static rebuild * * Preserves the identity of the WordPress original (Twenty Seventeen): a * full-bleed header photograph with the title over it, then full-width panel * sections, each introduced by its own photograph. * * Nothing here depends on WordPress. No webfont is loaded — the stack below * is what the OS already has, which is also what the original effectively * fell back to for most visitors. */ :root { --ink: #1a1a1a; --ink-soft: #4a4a4a; --rule: #d8d4cc; --paper: #fdfdfb; --accent: #7a6a52; --measure: 42rem; --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 1.0625rem; line-height: 1.72; } /* ---------- skip link ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 0.6rem 1rem; z-index: 100; } .skip-link:focus { left: 0; } /* ---------- masthead ---------- */ .masthead { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 60vh; padding: 1.1rem 1.5rem 2.5rem; color: #fff; } /* ---------- language switcher, top ---------- */ .masthead__top { position: relative; z-index: 1; width: 100%; max-width: 60rem; margin: 0 auto; display: flex; justify-content: flex-end; } .top-langs ul { display: flex; gap: 1.1rem; margin: 0; padding: 0; list-style: none; font-family: var(--sans); font-size: .82rem; letter-spacing: .1em; } .top-langs a { color: rgba(255,255,255,.82); text-decoration: none; padding: .2rem 0; border-bottom: 2px solid transparent; } .top-langs a:hover, .top-langs a:focus { color: #fff; border-bottom-color: rgba(255,255,255,.7); } /* The current language is marked by weight and a rule, not by colour alone — * colour alone fails for anyone who cannot distinguish it. */ .top-langs a[aria-current="true"] { color: #fff; font-weight: 700; border-bottom-color: #fff; } /* The front page gets the taller header and the scroll cue, matching the * original. Driven from rather than a class on

so the masthead * markup stays byte-identical across every page — which is what * check_build_consistency.sh asserts, and what stops chrome drifting unseen. */ .is-home .masthead { min-height: 88vh; } .is-page .scroll-cue { display: none; } /* Same held-image mechanism as the panels below — see that block for why * clip-path rather than background-attachment: fixed. Declared together so the * hero and the panels cannot drift apart. * * The layering is z-index 0 for the image and z-index 1 for the content, NOT * z-index -1 for the image. A negative z-index has to paint above the page * canvas to be seen at all, and whether it does depends on what stacking * context it lands in: with `isolation: isolate` on the masthead, the * clip-path-contained fixed image disappeared entirely — a blank scrim over * white, verified in headless Chromium at 1280x900. The positive pairing has * no such dependency, so do not "simplify" it back to -1. */ .masthead__media, .panel__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .masthead__inner, .scroll-cue, .panel__body { position: relative; z-index: 1; } .masthead__media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } @supports (clip-path: inset(0)) { @media (min-width: 46.0625rem) and (prefers-reduced-motion: no-preference) { .masthead__media { clip-path: inset(0); } .masthead__media img { position: fixed; width: 100vw; height: 100vh; object-position: center 42%; } } } /* Legibility floor for white text over an arbitrary photograph. Lighter than * the panels' scrim: the masthead carries a title and a menu, not paragraphs. */ .masthead__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.46) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.66) 100%); } .masthead__inner { width: 100%; max-width: 60rem; margin: 0 auto; } .site-title { margin: 0; font-size: clamp(1.9rem, 5.2vw, 3.6rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; text-shadow: 0 1px 14px rgba(0,0,0,.45); } .site-title a { color: inherit; text-decoration: none; } .site-title a:hover { text-decoration: underline; } .site-tagline { margin: 0.6rem 0 0; font-family: var(--sans); font-size: clamp(.95rem, 2vw, 1.15rem); font-style: italic; opacity: .93; text-shadow: 0 1px 10px rgba(0,0,0,.5); } /* ---------- navigation ---------- */ .nav { margin-top: 1.6rem; font-family: var(--sans); font-size: .95rem; } .nav ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin: 0; padding: 0; list-style: none; } .nav a { color: #fff; text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; } .nav a:hover, .nav a:focus { border-bottom-color: rgba(255,255,255,.85); } .nav a[aria-current="page"] { border-bottom-color: #fff; } /* ---------- scroll cue ---------- */ .scroll-cue { position: absolute; bottom: .9rem; left: 50%; transform: translateX(-50%); font-family: var(--sans); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-decoration: none; opacity: .85; } .scroll-cue:hover { opacity: 1; } .scroll-cue::after { content: " ↓"; } /* Present to assistive technology and to search engines, absent on screen — * used for the front page's h1, whose visible counterpart is the wordmark in * the shared masthead. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- content ---------- */ .wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; } main { display: block; } .intro { padding: 3.5rem 0 1rem; font-size: 1.28rem; line-height: 1.6; color: var(--ink-soft); } .intro p { margin: 0; } .page-body { padding: 3rem 0 4rem; } .page-body p { margin: 0 0 1.35rem; } .page-body p:last-child { margin-bottom: 0; } h1, h2 { font-size: 1.55rem; line-height: 1.3; margin: 2.6rem 0 1rem; font-weight: 700; } .page-body h1 { margin-top: 0; } h3 { font-family: var(--sans); font-size: 1.02rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 2.4rem 0 .9rem; } h2:first-child, h3:first-child { margin-top: 0; } a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--accent); } /* ---------- panels: content scrolls over a held photograph ---------- * * The photograph is a BACKGROUND layer for the whole panel, which is what the * WordPress original did — Twenty Seventeen's `.panel-image` was a * background-image held with `background-attachment: fixed`, and that held * image under scrolling content is the front page's identity. * * The effect is built the way virtuosenschule.de builds it: the image is * `position: fixed` and `clip-path` on .panel__media makes that element the * containing block, so the fixed layer is clipped to its own panel. This is * what background-attachment:fixed is supposed to do and does not do reliably * on iOS Safari — the original theme detected that and switched its own * parallax off there. */ .panel { position: relative; color: #f4f1ea; /* The ground the light text is guaranteed to sit on. Without it, an image * that fails to load leaves pale text on the paper background — unreadable, * and only on the one page where it matters most. */ background: #17150f; } /* .panel__media's box is declared with .masthead__media above — one place, so * the two cannot drift. */ /* DEFAULT = the safe rendering: the image simply fills its own panel. If every * enhancement below is unsupported or switched off, the page still looks * right. The ordering is deliberate — with the held effect as the default, a * browser that did not make .panel__media a containing block would let a * position:fixed image escape and cover the entire viewport, which is a * breakage rather than a downgrade. */ .panel__media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ENHANCEMENT = hold the image while the content scrolls over it. Gated three * ways: clip-path must actually be supported, the viewport must be wide enough * that mobile toolbar resizing will not judder, and the visitor must not have * asked for reduced motion. */ @supports (clip-path: inset(0)) { @media (min-width: 46.0625rem) and (prefers-reduced-motion: no-preference) { .panel__media { clip-path: inset(0); } .panel__media img { position: fixed; width: 100vw; height: 100vh; } } } /* Two zones, and the stops are in `vh` rather than `%` deliberately: a * percentage would resolve against each panel's own height, so the same rule * would land in a different place on a long panel than on a short one. In vh * the geometry is the viewport's, which is what the reader actually sees. * * 0 - 55vh nearly clear — this is the panel's image band, the part the * original had as a 100vh `.panel-image`. The photograph is meant * to be looked at here. * ~80vh on dark enough to carry ~700 words of body text at full contrast. * * The body's padding-top parks the heading right at the transition, so the * text starts where the ground has already gone dark. */ .panel__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(18,16,14,.30) 0, rgba(18,16,14,.38) 55vh, rgba(18,16,14,.90) 80vh, rgba(18,16,14,.93) 100% ); } .panel__body { padding: 68vh 1.5rem clamp(4rem, 11vh, 8rem); } /* Below the enhancement's breakpoint the image is NOT held, so .panel__media * would otherwise stretch over the panel's full height — often 3000px+ — and * `object-fit: cover` would scale a 2000x1099 landscape photograph to fill it. * The result is an extreme zoom into whatever happens to be at the centre; on * a 390px viewport that was a close-up of the back of someone's head. * * So on small screens the photograph becomes a band at the top, the way the * original's `.panel-image` was, and the panel's own dark background carries * the text below it. The scrim fades the band into that ground. */ @media (max-width: 46rem) { .panel__media { height: 56vh; bottom: auto; } .panel__media::after { background: linear-gradient( to bottom, rgba(23,21,15,.26) 0, rgba(23,21,15,.42) 55%, rgba(23,21,15,1) 100% ); } .panel__body { padding-top: 50vh; } } .panel__title { margin: 0 0 1.8rem; font-size: clamp(1.7rem, 4.4vw, 2.6rem); line-height: 1.15; } /* Inside a panel the type sits on a dark photograph, so the light-on-dark * variants of everything the body can contain live here rather than being * duplicated into the markup. */ .panel h3 { color: #d9c9a8; } .panel a { color: #fff; } .panel a:hover { color: #d9c9a8; } .panel .bank { background: rgba(255,255,255,.09); border-left-color: #d9c9a8; color: #f4f1ea; } .panel__more { font-family: var(--sans); font-size: .95rem; margin-top: 2rem; } .panel__more a { text-decoration-thickness: 2px; } /* ---------- video (click-to-load facade) ---------- */ .video { margin: 2rem 0; } .video__start { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; color: inherit; font: inherit; } .video__start img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s ease; } .video__start:hover img, .video__start:focus-visible img { opacity: .82; } .video__play { position: absolute; top: 50%; left: 50%; width: 4.5rem; height: 4.5rem; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(20,18,16,.72); border: 2px solid rgba(255,255,255,.9); } /* The triangle, drawn rather than shipped as an icon file. */ .video__play::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: .7rem 0 .7rem 1.15rem; border-color: transparent transparent transparent #fff; } .video__start:hover .video__play { background: rgba(20,18,16,.9); } .video__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1rem .9rem; font-family: var(--sans); font-size: .92rem; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); } .video__frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; } /* The standing explanation of what the click will do. It has to be visible * before the click, not after — that is the whole point. */ .video__note { margin: .6rem 0 0; font-family: var(--sans); font-size: .82rem; line-height: 1.5; opacity: .78; } /* ---------- bank details ---------- */ .bank { font-family: var(--sans); font-size: .97rem; line-height: 1.7; background: #f4f1ea; border-left: 3px solid var(--accent); padding: 1.1rem 1.3rem; margin: 0 0 1.35rem; } .bank strong { display: block; } /* ---------- legal pages ---------- */ /* A fact that is still missing. Crimson and bracketed so it is impossible to * mistake for finished text — an Impressum with quiet gaps looks compliant and * is not. The build prints a count of these on every run; see legal_gaps(). */ .todo { color: #a1121f; background: #fdeaec; font-family: var(--sans); font-size: .92em; font-weight: 700; padding: .05em .4em; border-radius: 2px; } .legal-nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0 0 1.2rem; padding: 0; list-style: none; } .page-body ul { margin: 0 0 1.35rem; padding-left: 1.2rem; } .page-body li { margin: 0 0 .5rem; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--rule); margin-top: 3rem; padding: 2.6rem 0 3.2rem; font-family: var(--sans); font-size: .93rem; color: var(--ink-soft); } .site-footer nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0 0 1.2rem; padding: 0; list-style: none; } .site-footer a { color: var(--ink-soft); } .site-footer a[aria-current] { color: var(--ink); font-weight: 700; } .footer-langs { margin-bottom: 1.2rem; } .disclaimer { margin: 1.4rem 0 0; font-size: .87rem; line-height: 1.6; color: #6b6b6b; max-width: 46rem; } .colophon { margin: 1.4rem 0 0; font-size: .85rem; color: #7a7a7a; } /* ---------- 404 ---------- */ .notfound { padding: 5rem 0; } .notfound h1 { font-size: 2rem; margin: 0 0 1rem; } /* ---------- motion / small screens ---------- */ @media (max-width: 34rem) { .masthead { min-height: 52vh; } .is-home .masthead { min-height: 72vh; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } @media (min-width: 35rem) { html { scroll-behavior: smooth; } }