/* Shared stylesheet for all three sites. One source in the repo; the Dockerfile copies it into each site root, so every site serves it from its own origin. */ /* Vollkorn is a variable font (wght 400-900) by Friedrich Althausen, SIL Open Font License 1.1. The licence ships next to the file at /assets/fonts/OFL.txt, which the OFL requires. Latin subset only: the sites are German, and the other subsets would quadruple the download for glyphs nobody here renders. */ @font-face { font-family: "Vollkorn"; src: url("/assets/fonts/vollkorn-latin.woff2") format("woff2-variations"); font-weight: 400 900; font-style: normal; font-display: swap; } :root { /* Grey and green come from the existing logos and the old portal page, so the new pages stay recognisably the same house. */ --ground: #676766; --paper: #fbfaf7; --ink: #24241f; --stone: #5c5c58; --green: #889a4e; /* brand green, decorative only: 2.97 on paper, below AA */ --green-display: #7a8b44; /* 3.59 on paper - passes AA for large text */ --green-text: #6d7c3c; /* 4.38 on paper - passes AA at any size */ --hair: rgba(36, 36, 31, 0.14); --shadow: 0 0 24px 2px rgba(0, 0, 0, 0.35); --measure: 42rem; --step: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --ground: #171714; --paper: #2b2b27; --ink: #f2f1ec; --stone: #c9c7bf; --green: #a8bb63; --green-display: #c3d18e; --green-text: #a8bb63; --hair: rgba(242, 241, 236, 0.16); --shadow: none; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--stone); font-family: "Vollkorn", Georgia, "Times New Roman", serif; font-size: 1.0625rem; line-height: 1.6; font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; } /* The whole page is one card on the brand grey, the way the old portal page put a white box on grey. Padding on rather than a margin on the card so the grey frame survives on short viewports too. */ @media (min-width: 40rem) { body { padding: 3rem 1.5rem; } } .card { max-width: var(--measure); margin-inline: auto; padding: 2rem 1.5rem 2.5rem; background: var(--paper); box-shadow: var(--shadow); } @media (min-width: 40rem) { .card { padding: 3rem 3.5rem 3rem; } } /* Page-load reveal. One movement for the whole card, not a stagger of five: the card is a single object and behaves like one. */ @media (prefers-reduced-motion: no-preference) { .card { animation: rise 0.5s cubic-bezier(0.22, 0.68, 0.3, 1) both; } } @keyframes rise { from { opacity: 0; transform: translateY(0.75rem); } } /* ---------- masthead ---------- */ .masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--hair); } .masthead img { display: block; width: 84px; height: auto; } /* The logos are transparent, so nothing has to hide a white ground - but their grey half drops to 2.5:1 on the dark card. Inverting lifts the grey and the hue rotation puts the green back where it belongs. */ @media (prefers-color-scheme: dark) { .masthead img, .sister img, .portal-heads img { filter: invert(1) hue-rotate(180deg); } } .eyebrow { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-text); text-align: right; } /* ---------- claim ---------- */ .claim { margin: 2rem 0 0; font-size: var(--step); font-weight: 600; line-height: 1.05; color: var(--ink); letter-spacing: -0.015em; } /* Both houses share a claim and differ in one verb: "Das Besondere geniessen" at the Krug, "Das Besondere entdecken" at the Landhotel. The shared half stays quiet, the verb carries the colour. That one word is what tells the two cards apart, so nothing else on the page competes with it. */ .verb { margin: 0.5rem 0 2rem; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem); font-weight: 400; line-height: 1.2; color: var(--stone); } .verb b { font-weight: 600; color: var(--green-display); } /* ---------- hero ---------- */ /* The arch is the one shape the pages are built on. It repeats the curve the logos set their lettering on, and it is the reason the photo is not another rectangle. */ .hero { display: block; width: 100%; height: auto; aspect-ratio: 599 / 305; object-fit: cover; border-radius: 50% 50% 4px 4px / 30% 30% 4px 4px; background: var(--hair); } /* ---------- prose ---------- */ .intro { margin: 2rem 0 0; font-size: 1.125rem; } .intro + .intro { margin-top: 1rem; } .byline { margin: 1.25rem 0 0; color: var(--ink); font-style: italic; } /* ---------- facts ---------- */ .facts { margin: 2.5rem 0 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hair); } @media (min-width: 34rem) { .facts { grid-template-columns: 1fr 1fr; } } .fact { padding: 1rem 0; border-bottom: 1px solid var(--hair); } @media (min-width: 34rem) { .fact:nth-of-type(odd) { padding-right: 1.5rem; border-right: 1px solid var(--hair); } .fact:nth-of-type(even) { padding-left: 1.5rem; } } .fact dt { margin: 0 0 0.35rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-text); } .fact dd { margin: 0; color: var(--ink); line-height: 1.5; } .fact a { color: inherit; } /* ---------- actions ---------- */ .actions { margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem; } .action { flex: 1 1 auto; padding: 0.7rem 1.25rem; background: var(--green); color: var(--ink); font-weight: 600; text-align: center; text-decoration: none; /* Deliberately not arched. The arch belongs to the photo; repeated on a wide, low button it turns into a dome and reads as a mistake rather than a motif. */ border-radius: 4px; transition: transform 0.15s ease, background-color 0.15s ease; } .action:hover { background: var(--green-display); transform: translateY(-1px); } .action--quiet { background: transparent; color: var(--green-text); box-shadow: inset 0 0 0 1px var(--green); } .action--quiet:hover { background: transparent; box-shadow: inset 0 0 0 2px var(--green); } @media (prefers-reduced-motion: reduce) { .action { transition: none; } .action:hover { transform: none; } } /* ---------- sister house ---------- */ .sister { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 1rem; } .sister img { flex: none; width: 64px; height: auto; } .sister p { margin: 0; font-size: 0.9375rem; } /* ---------- footer ---------- */ .pagefoot { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--hair); font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; justify-content: space-between; } .pagefoot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; } .pagefoot p { margin: 0; } /* ---------- links ---------- */ a { color: var(--green-text); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--green-text); outline-offset: 3px; } /* ---------- legal pages ---------- */ .legal h1 { margin: 2rem 0 0; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); font-weight: 600; line-height: 1.15; color: var(--ink); } .legal h2 { margin: 2.25rem 0 0.5rem; font-size: 1.25rem; font-weight: 600; color: var(--ink); } .legal h3 { margin: 1.5rem 0 0.35rem; font-size: 1.0625rem; font-weight: 600; color: var(--ink); } .legal p, .legal ul { margin: 0.75rem 0; } .legal ul { padding-left: 1.25rem; } .legal li { margin: 0.25rem 0; } .legal address { font-style: normal; color: var(--ink); } .backlink { display: inline-block; margin-top: 2rem; } /* ---------- portal ---------- */ .portal-heads { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--hair); } .portal-heads img { display: block; width: 84px; height: auto; } .welcome { margin: 2.5rem 0 0; text-align: center; font-size: var(--step); font-weight: 600; line-height: 1.1; color: var(--green-display); } .houses { margin: 2rem 0 0; display: grid; gap: 2.5rem; } @media (min-width: 40rem) { .houses { grid-template-columns: 1fr 1fr; gap: 2rem; } } /* Equal-height columns so both buttons sit on one line, however long the two paragraphs turn out. */ .house { display: flex; flex-direction: column; } .house h2 { margin: 1.25rem 0 0.5rem; font-size: 1.25rem; font-weight: 600; color: var(--ink); line-height: 1.2; } .house p { margin: 0 0 1.25rem; font-size: 1rem; } .house .action { display: block; margin-top: auto; flex: none; } /* Not arched, unlike the hero photos on the two cards: these two images carry their claim printed across the top, and the arch cut the ends of it off. */ .house-img { display: block; width: 100%; height: auto; aspect-ratio: 443 / 305; object-fit: cover; border-radius: 4px; background: var(--hair); }