127 lines
3.2 KiB
CSS
127 lines
3.2 KiB
CSS
/* ---------------------------------------------------------------
|
|
FUND BUREAU — minimal frontpage
|
|
typography: Neue Haas Grotesk (lizenzpflichtig). lege deine
|
|
woff2-dateien in static/fonts/ ab, dann greifen die @font-face
|
|
regeln unten. bis dahin: klassischer Helvetica-fallback.
|
|
--------------------------------------------------------------- */
|
|
|
|
@font-face {
|
|
font-family: "Neue Haas Grotesk";
|
|
src: url("/fonts/neue-haas-grotesk-display-55-roman.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Neue Haas Grotesk";
|
|
src: url("/fonts/neue-haas-grotesk-display-65-medium.woff2") format("woff2");
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
--ink: #111;
|
|
--paper: #fff;
|
|
--gap: clamp(1.25rem, 4vw, 2.5rem);
|
|
/* gemeinsame spaltenbreite: titel, bild und adresse fluchten links */
|
|
--media: min(100%, 56vh, 560px);
|
|
--grotesk: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
html { -webkit-text-size-adjust: 100%; }
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
padding: var(--gap);
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
gap: var(--gap);
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
font-family: var(--grotesk);
|
|
font-weight: 400;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
|
|
|
|
a { color: inherit; text-decoration: none; }
|
|
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
|
|
|
|
/* wordmark, oben — linke kante auf der bildkante ------------------------- */
|
|
.wordmark {
|
|
width: var(--media);
|
|
margin-inline: auto;
|
|
}
|
|
.wordmark a {
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
font-size: clamp(1.5rem, 4.5vw, 3rem);
|
|
letter-spacing: -0.02em;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
}
|
|
.wordmark a:hover { text-decoration: none; }
|
|
|
|
/* mitte: quadratisches bild + adresse ------------------------------------ */
|
|
.stage {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--gap);
|
|
}
|
|
|
|
.hero {
|
|
margin: 0;
|
|
width: var(--media);
|
|
aspect-ratio: 1 / 1; /* quadratische box erzwingen */
|
|
}
|
|
.hero img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover; /* bild füllt die box, wird beschnitten */
|
|
background: #ececec;
|
|
}
|
|
|
|
/* intro + adresse, unter dem bild ---------------------------------------- */
|
|
.colophon {
|
|
width: var(--media);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4em var(--gap);
|
|
justify-content: space-between;
|
|
font-size: clamp(0.85rem, 1.6vw, 1rem);
|
|
line-height: 1.4;
|
|
}
|
|
.colophon .intro { margin: 0; max-width: 22ch; }
|
|
|
|
.colophon address {
|
|
font-style: normal;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.colophon address span,
|
|
.colophon address a { display: block; }
|
|
|
|
/* fuss ------------------------------------------------------------------- */
|
|
.credit {
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.02em;
|
|
opacity: 0.6;
|
|
text-transform: lowercase;
|
|
}
|
|
.credit p { margin: 0; }
|
|
|
|
@media (max-width: 600px) {
|
|
.colophon { flex-direction: column; }
|
|
}
|