/* ========================================================================== elverket.com — main.css White ground, painting-led, editorial. Serif display + grotesk UI. Mobile-first. Static: nothing moves, fades or eases; state changes are instant. Hover = an instant colour change, nothing else. The project's accent colours come from content/project.json and are set inline on (--accent, --accent-soft); the fallbacks here are only for a page rendered without them. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { --bg: #ffffff; --fg: #111111; --fg-2: #6b6b6b; --line: #e6e3de; --accent: #a8571a; /* text-safe: 5.2:1 on white */ --accent-soft: #d39155; /* large fills only, with ink text: 7.2:1 */ --serif: "Fraunces", Georgia, serif; --sans: "Inter", system-ui, sans-serif; --max: 1280px; --gutter: clamp(20px, 4vw, 64px); --step-0: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); --step-1: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem); --step-2: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); } /* -------------------------------------------------------------------------- /* -------------------------------------------------------------------------- 2. Fonts (self-hosted variable woff2, latin + latin-ext split) -------------------------------------------------------------------------- */ @font-face { font-family: "Fraunces"; src: url(/assets/fonts/fraunces.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Fraunces"; src: url(/assets/fonts/fraunces-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Fraunces"; src: url(/assets/fonts/fraunces-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Fraunces"; src: url(/assets/fonts/fraunces-italic-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; src: url(/assets/fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2192, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url(/assets/fonts/inter-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- 3. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: dark; background: var(--bg); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--step-0)/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; /* the page never scrolls sideways */ } a { color: inherit; } a:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; } img { max-width: 100%; height: auto; display: block; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } dl, dd, figure, ul, ol, blockquote { margin: 0; padding: 0; } h1, h2, h3 { font-family: var(--serif); font-weight: 300; letter-spacing: -0.01em; margin: 0; } h2 { font-size: var(--step-2); line-height: 1.05; } /* -------------------------------------------------------------------------- 3. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light; background: var(--bg); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--step-0)/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; } ::selection { background: var(--accent-soft); color: var(--fg); } a { color: inherit; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } img { max-width: 100%; height: auto; display: block; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } dl, dd, figure, ul, ol, blockquote { margin: 0; padding: 0; } h1, h2, h3 { font-family: var(--serif); font-weight: 300; letter-spacing: -0.01em; margin: 0; } h2 { font-size: var(--step-2); line-height: 1.05; } /* -------------------------------------------------------------------------- 4. Layout primitives -------------------------------------------------------------------------- */ .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(64px, 9vw, 144px); } /* Hairline between sections, drawn inside the wrap so it respects the gutter. Accent-tinted on the project page (body has --accent set from content). */ .rule { border-top: 1px solid var(--line); } .show-page .rule { border-top-color: var(--accent-soft); } .eyebrow { font: 500 0.75rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 clamp(28px, 4vw, 48px); } /* Editorial prose: serif, 62ch. The lede is one step up. */ .prose, .lede { font-family: var(--serif); max-width: 62ch; } .prose { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem); line-height: 1.55; margin-bottom: 1.4em; } .lede { font-size: var(--step-1); line-height: 1.4; margin-bottom: 1.6em; } /* -------------------------------------------------------------------------- 5. Buttons and links (instant state changes) -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; padding: 0.9em 1.6em; border: 1px solid var(--accent-soft); border-radius: 999px; text-decoration: none; font: 500 0.95rem/1 var(--sans); letter-spacing: 0.02em; color: var(--fg); background: var(--accent-soft); } .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); } .btn--muted { background: transparent; border-color: var(--line); color: var(--fg-2); pointer-events: none; } .link { font: 500 0.95rem/1.3 var(--sans); color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; } .link:hover { color: var(--fg); } /* -------------------------------------------------------------------------- 6. Header — static bar; the ticket pill is sticky once you scroll past the lead -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px 24px; padding: 20px var(--gutter); background: var(--bg); } .logo { display: block; line-height: 0; } .logo img { width: clamp(88px, 11vw, 132px); height: auto; } /* "← Elverket" on the project page: marks it as a subpage. */ .back { font: 500 0.75rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--fg-2); padding: 8px 0; white-space: nowrap; } .back:hover { color: var(--fg); } @media (max-width: 599px) { .back { font-size: 0.7rem; letter-spacing: 0.08em; } } .lang { display: flex; gap: 4px; margin-left: auto; font: 500 0.75rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; } .lang a { padding: 8px 6px; text-decoration: none; color: var(--fg-2); border-bottom: 1px solid transparent; } .lang a:hover { color: var(--fg); } .lang a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); } .btn--sticky { padding: 0.7em 1.2em; font-size: 0.85rem; } .btn--sticky[hidden] { display: none; } .btn--sticky.btn--muted { pointer-events: auto; } .btn--sticky.btn--muted:hover { background: transparent; color: var(--fg-2); border-color: var(--line); } /* -------------------------------------------------------------------------- 7. Lead — the painting with white margins, and the title block -------------------------------------------------------------------------- */ .lead { padding-block: clamp(16px, 3vw, 48px) clamp(64px, 9vw, 144px); } .painting picture { display: block; } .painting img { width: auto; max-width: 100%; max-height: 80vh; height: auto; object-fit: contain; margin-inline: auto; } .title { padding-top: clamp(40px, 6vw, 80px); } .lead--show .title { padding-top: 0; padding-bottom: clamp(40px, 6vw, 80px); } .title .eyebrow { margin-bottom: 20px; } /* The h1 is the handwritten wordmark; its alt carries the title. */ .title__h1 { line-height: 0; margin: 0 0 clamp(20px, 3vw, 32px); } .title__wordmark { width: min(80vw, 480px); height: auto; } @media (min-width: 900px) { .title__wordmark { width: min(50vw, 600px); } } .title__line { color: var(--fg-2); max-width: 48ch; margin-bottom: 28px; } .title__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; } /* -------------------------------------------------------------------------- 8. About the project: lede, prose, paintings between groups, facts row -------------------------------------------------------------------------- */ .about__flow > .lede { margin-bottom: clamp(32px, 4vw, 48px); } .about__fig { margin-block: clamp(48px, 7vw, 112px); } .about__fig picture { display: block; } .about__fig img { width: auto; max-width: 100%; max-height: min(85vh, 900px); /* portraits don't span the whole viewport */ height: auto; margin-inline: auto; } figcaption { margin-top: 10px; font-size: 0.8rem; color: var(--fg-2); } figcaption i { font-style: italic; } /* Facts: one hairline-bordered row (accent hairlines), wrapping on small screens. */ .facts { display: grid; grid-template-columns: 1fr; margin-top: clamp(48px, 7vw, 96px); border-top: 1px solid var(--accent-soft); border-bottom: 1px solid var(--accent-soft); } .facts > div { padding: 20px 0; } .facts > div + div { border-top: 1px solid var(--accent-soft); } .facts dt { font: 500 0.7rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .facts dd { font-size: 0.95rem; } @media (min-width: 700px) { .facts { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 var(--gutter); } .facts > div { padding: 28px 0; } .facts > div + div { border-top: 0; } } /* -------------------------------------------------------------------------- 9. Galleries — two-column grid, one on small screens -------------------------------------------------------------------------- */ .grid { list-style: none; display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 80px) var(--gutter); } @media (min-width: 700px) { .grid { grid-template-columns: repeat(2, 1fr); } } .grid picture { display: block; } .grid img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; object-position: left top; } /* -------------------------------------------------------------------------- 10. Quotes — serif italic, closed by the signature -------------------------------------------------------------------------- */ .quote { max-width: 62ch; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--step-1); line-height: 1.4; } .quote + .quote { margin-top: clamp(48px, 7vw, 96px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); } .quote blockquote p { margin-bottom: 1.1em; } .quote--small { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem); line-height: 1.5; max-width: 56ch; } .quote__source { margin-top: 1.5em; font: 500 0.75rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); } .signature { display: block; margin-top: clamp(48px, 7vw, 96px); } .signature img { width: 220px; height: auto; } /* -------------------------------------------------------------------------- 11. Credits — CSS columns (3 / 2 / 1), groups stay whole; music in 2 columns -------------------------------------------------------------------------- */ .credits__cols { columns: 1; column-gap: var(--gutter); } @media (min-width: 640px) { .credits__cols { columns: 2; } } @media (min-width: 1000px) { .credits__cols { columns: 3; } } .credits__group { break-inside: avoid; margin-bottom: clamp(28px, 3vw, 40px); } .credits__role { font: italic 400 1rem/1.3 var(--serif); color: var(--fg-2); margin-bottom: 8px; } .credits__names { list-style: none; line-height: 1.4; } .credits__names li + li { margin-top: 3px; } .credits__note { display: block; font-size: 0.85rem; color: var(--fg-2); } .music__heading { margin-top: clamp(48px, 7vw, 96px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); margin-bottom: clamp(24px, 3vw, 40px); } .music { list-style: none; display: grid; grid-template-columns: 1fr; gap: 18px var(--gutter); max-width: 62ch; } @media (min-width: 900px) { .music { grid-template-columns: repeat(2, 1fr); max-width: none; } } .music strong { display: block; font-weight: 500; } .music__credit { display: block; font: italic 400 0.9rem/1.5 var(--serif); color: var(--fg-2); } /* -------------------------------------------------------------------------- 12. Venue -------------------------------------------------------------------------- */ .venue__credit { margin-top: 1.5em; font-size: 0.85rem; color: var(--fg-2); max-width: 48ch; } /* -------------------------------------------------------------------------- 13. Footer — four columns, hairline top, small type -------------------------------------------------------------------------- */ .footer { border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 96px) 40px; font-size: 0.85rem; } .footer .eyebrow { margin-bottom: 12px; color: var(--fg-2); } .footer__grid { display: grid; grid-template-columns: 1fr; gap: 32px var(--gutter); } @media (min-width: 600px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .footer__grid { grid-template-columns: repeat(4, 1fr); } } .footer a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: var(--line); } .footer a:hover { color: var(--accent); text-decoration-color: var(--accent); } .footer p { margin: 0; } .footer__social { list-style: none; } .footer__social li + li { margin-top: 6px; } .footer__legal { margin-top: clamp(40px, 6vw, 72px); font-size: 0.8rem; color: var(--fg-2); }