:root { --bg: #ffffff; --ink: #111110; --ink-dim: #a3a19b; --ink-mid: #55534e; --rule: rgba(17, 17, 16, 0.12); --accent: #4b45c6; --sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "SFMono-Regular", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --pad: 16px; /* sidemargen — samme paa alle sider */ --header-h: 64px; } /* Mørk tilstand. Vælger man selv, sætter scriptet data-theme på og den vinder. Har man ikke valgt, følger siden systemets indstilling. */ html[data-theme="dark"] { --bg: #111110; --ink: #f4f3f0; --ink-dim: #6e6c67; --ink-mid: #b5b2ab; --rule: rgba(244, 243, 240, 0.16); --accent: #8f8aff; } @media (prefers-color-scheme: dark) { html:not([data-theme]) { --bg: #111110; --ink: #f4f3f0; --ink-dim: #6e6c67; --ink-mid: #b5b2ab; --rule: rgba(244, 243, 240, 0.16); --accent: #8f8aff; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 13px; line-height: 1.6; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; } a { color: inherit; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--bg); padding: 8px 12px; border: 1px solid var(--ink); } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; padding: 20px var(--pad); min-height: var(--header-h); } .site-header .brand { font-family: var(--sans); font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -0.01em; } .site-header .role { font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--ink-dim); letter-spacing: 0.01em; } .avail { margin: 0; font-size: 12px; color: var(--ink-dim); } .avail a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); } .avail a:hover { border-bottom-color: var(--accent); color: var(--accent); } .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; } /* ---------- sol-knap ---------- */ .theme-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--ink-dim); cursor: pointer; transition: color 0.18s ease, transform 0.3s ease; } .theme-toggle:hover { color: var(--ink); transform: rotate(35deg); } .theme-toggle svg { width: 17px; height: 17px; display: block; } /* ---------- nav ---------- */ .site-nav { display: flex; gap: 18px; font-size: 12px; } .site-nav a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.18s ease, border-color 0.18s ease; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--ink); border-bottom-color: var(--accent); } /* ---------- intro ---------- */ .intro { position: relative; display: flex; flex-direction: column; justify-content: flex-start; padding: 18px var(--pad) 10px; } .wordmark { font-family: var(--sans); font-size: clamp(42px, 10.5vw, 150px); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; margin: 0; } .intro-line { margin: 22px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink); max-width: 46ch; } .intro-foot { margin-top: 20px; display: flex; justify-content: flex-end; gap: 16px; font-size: 12px; color: var(--ink-dim); } .intro-foot a { text-decoration: none; } .intro-foot a:hover { color: var(--ink); } /* Navnetrækkerens felter: låst bredde, så teksten ikke sitrer mens bogstaverne flimrer. */ .wordmark .ch { display: inline-block; text-align: center; } .wordmark .ch.sp { width: .30em; } .wordmark .ch.tick { color: var(--ink-dim); } .wordmark .ch.done { color: inherit; } /* intro gate: hidden while the name resolves, fades in once it lands */ html.intro-run .fade-late { opacity: 0; transform: translateY(6px); } html.intro-run.intro-done .fade-late { opacity: 1; transform: none; transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s; } /* ---------- section chrome ---------- */ .sec { border-top: 1px solid var(--rule); padding: 26px var(--pad) 0; margin-top: 130px; } .sec-label { font-size: 12px; color: var(--ink-dim); letter-spacing: 0.08em; margin: 0 0 44px; } .sec-label .no { margin-right: 10px; } /* ---------- hero stage ---------- */ .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; padding: 0 var(--pad) var(--pad); } .hero-left { display: flex; flex-direction: column; min-width: 0; } .label { font-size: 12px; color: var(--ink-dim); letter-spacing: 0.08em; margin: 6px 0 18px; } .list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); } .list li { border-bottom: 1px solid var(--rule); } .list a { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 20px 2px; text-decoration: none; color: var(--ink-dim); transition: color 0.18s ease, padding-left 0.18s ease; } .list a .title { font-family: var(--sans); font-size: clamp(16px, 1.5vw, 23px); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; } /* Kunden staar foran projektnavnet, men daempet — saa kan oejet scanne kundekolonnen uden at overskriften bliver to saetninger. */ .list .client { color: var(--ink-dim); font-weight: 400; } .list .client::after { content: ""; display: inline-block; width: 0.5em; } .list a .year { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; } .list li.is-active a, .list a:hover, .list a:focus-visible { color: var(--ink); padding-left: 14px; } .archive-link { display: inline-block; margin-top: 20px; font-size: 12px; color: var(--ink-dim); text-decoration: none; } .archive-link:hover { color: var(--ink); } .caption { margin: auto 2px 4px; padding-top: 24px; color: var(--ink-dim); max-width: 44ch; } .caption strong { font-weight: 700; color: var(--ink); } /* ---------- image ---------- */ .frame { /* Samme format og samme opfoersel som galleriet paa projektsiderne: 3:2, og billedet skaleres ind i stedet for at blive beskaaret. */ position: relative; height: 0; padding-bottom: 66.7%; overflow: hidden; } .frame img { position: absolute; inset: 0; margin: auto; /* centrerer baade staaende og liggende */ width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transition: opacity 480ms ease; } .frame img.is-shown { opacity: 1; } .frame.is-direct img { transition-duration: 120ms; } /* ---------- services ---------- */ .svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; } .svc-ill { display: block; width: min(200px, 70%); height: auto; margin: 0 0 34px; } .svc h3 { font-family: var(--sans); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; } .svc ul { list-style: none; margin: 0; padding: 0; color: var(--ink-mid); } .svc li { padding: 3px 0; } /* ---------- clients ---------- */ .logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 44px 64px; } html[data-theme="dark"] .logo-row img, html:not([data-theme]) .logo-row img { } .logo-row img { height: 30px; width: auto; } /* ---------- about ---------- */ .about-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 44px; align-items: start; } .portrait { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; display: block; } .about-text { font-family: var(--sans); font-size: clamp(19px, 2vw, 26px); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; margin: 0 0 40px; max-width: 46ch; } .about-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, max-content)); gap: 40px; max-width: 640px; } .block h3 { font-size: 12px; font-weight: 400; color: var(--ink-dim); letter-spacing: 0.08em; margin: 0 0 6px; } .block ul { list-style: none; margin: 0; padding: 0; } .block a { text-decoration: none; border-bottom: 1px solid var(--rule); } .block a:hover { border-bottom-color: currentColor; } /* ---------- contact ---------- */ .big-mail { display: inline-block; font-family: var(--sans); font-size: clamp(26px, 6vw, 76px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; text-decoration: none; border-bottom: 3px solid var(--rule); padding-bottom: 6px; overflow-wrap: anywhere; transition: border-color 0.18s ease, color 0.18s ease; } .big-mail:hover { border-bottom-color: var(--accent); color: var(--accent); } .contact-alt { margin: 20px 0 0; color: var(--ink-dim); } .contact-alt a { text-decoration: none; } .contact-alt a:hover { color: var(--ink); } /* ---------- footer ---------- */ .site-footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 120px; padding: 22px var(--pad) 26px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-dim); } .site-footer p { margin: 0; } .site-footer a { text-decoration: none; } .site-footer a:hover { color: var(--ink); } /* ---------- reveal ---------- */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.in { opacity: 1; transform: none; } /* ---------- project pages ---------- */ .topbar { padding: 16px var(--pad); font-size: 12px; color: var(--ink-dim); } .topbar a { text-decoration: none; } .topbar a:hover { color: var(--ink); } .article { max-width: 780px; margin: 0 auto; padding: 24px 24px 110px; } .article h1 { font-family: var(--sans); font-size: clamp(30px, 5vw, 52px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 10px; } .article .meta { color: var(--ink-dim); margin: 0 0 40px; } .article h2 { font-size: 12px; font-weight: 400; color: var(--ink-dim); letter-spacing: 0.08em; margin: 44px 0 8px; } .article p { margin: 0 0 16px; max-width: 66ch; color: var(--ink-mid); } .article figure { margin: 36px 0; } .article img { width: 100%; height: auto; display: block; border-radius: 2px; } .article figcaption { margin-top: 8px; color: var(--ink-dim); } .article .tags { list-style: none; padding: 0; margin: 0; color: var(--ink-mid); } .article .list a { padding: 14px 2px; } .article .list .title { font-size: 17px; } .next { display: block; margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--rule); text-decoration: none; color: var(--ink-dim); } .next:hover { color: var(--ink); } /* ---------- responsive ---------- */ /* ---------- project page ---------- */ .proj { padding: 0 var(--pad) 110px; } /* tynd etiketlinje øverst, som i referencen */ .proj-label { font-family: var(--sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 18px; } .proj-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; } /* Fire felter i to raekker: raekke 1 galleri | tekst raekke 2 metadata | video Fordi metadata og video ligger i samme raekke, flugter deres overkanter af sig selv — uanset hvor lang teksten er. */ .proj-media { grid-column: 1; grid-row: 1; } .proj-text { grid-column: 2; grid-row: 1; } .proj-meta { grid-column: 1; grid-row: 2; } .proj-video { grid-column: 2; grid-row: 2; } /* Videoen er valgfri. Er der ingen, staar feltet bare tomt. */ .proj-video video { width: 100%; height: auto; display: block; background: #000; } .proj-video .video-caption { margin: 8px 0 0; font-size: 12px; color: var(--ink-dim); } /* ---------- kredit ---------- */ /* Fotografens navn staar lodret langs billedets venstre kant og laeses nedefra og op. Den ligger uden for layoutet — absolut placeret, saa den hverken reserverer plads eller flytter noget. De fleste billeder har ingen kredit, og de skal se ud som om feltet slet ikke findes. */ .media-wrap { position: relative; } .media-credit { position: absolute; right: 100%; /* lige uden for rammens venstre kant */ bottom: 0; margin: 0 3px 0 0; max-height: 100%; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; line-height: 1; /* smal nok til sidemargenens 16px */ letter-spacing: 0.02em; color: var(--ink-dim); white-space: nowrap; overflow: hidden; pointer-events: none; } /* ---------- galleri ---------- */ /* Højden kommer fra padding-bottom, ikke fra billederne, så rammen har sin fulde højde med det samme og siden ikke hopper. Alle billeder ligger oven på hinanden og krydsfader. */ .gallery { /* Rammen har samme format som rigshospitalet_1.webp — 3:2 liggende. Højden kommer fra padding, så den følger spaltens bredde. Billeder i andre formater beskæres ikke, men skaleres ned til at passe indeni: et stående billede bliver smallere og står centreret i samme ramme. */ position: relative; height: 0; padding-bottom: 66.7%; /* 2000 x 1334 */ overflow: hidden; } .gallery.is-clickable { cursor: pointer; } .gallery .shot { margin: 0; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.28s ease; } .gallery .shot.is-shown { opacity: 1; } /* Uden JavaScript sætter ingen .is-shown, og så ville galleriet stå tomt. Scriptet melder sig med .is-live; indtil da vises det første billede. */ .gallery:not(.is-live) .shot:first-child { opacity: 1; } /* Video behandles praecis som et billede — samme ramme, samme skalering, ingen beskaering. */ .gallery .shot img, .gallery .shot video { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 0; } .gallery-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 8px; font-family: var(--sans); font-size: 12px; color: var(--ink-dim); } .gallery-caption { margin: 0; min-height: 1.6em; } .gallery-nav { display: flex; gap: 10px; align-items: baseline; flex: none; } .gallery-nav button { font: inherit; color: var(--ink-dim); background: none; border: 0; padding: 0 2px; cursor: pointer; } .gallery-nav button:hover { color: var(--ink); } .gallery-count { font-variant-numeric: tabular-nums; } /* ---------- metadata ---------- */ .proj-meta { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.9; } .proj-meta > div { display: flex; gap: 10px; } .proj-meta dt { color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.04em; flex: none; min-width: 108px; } .proj-meta dd { margin: 0; color: var(--ink); } /* ---------- tekstspalten ---------- */ .proj-text h1 { font-family: var(--sans); font-size: clamp(21px, 2.3vw, 30px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: -0.14em 0 14px; } /* Underoverskrift: skrives som **tekst** på sin egen linje i projektfilen. Samme skrift og grad som brødteksten, bare fed. */ .proj-text h2 { font: inherit; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: inherit; margin: 26px 0 6px; } .proj-text h2:first-of-type { margin-top: 20px; } .proj-text strong { font-weight: 700; color: var(--ink); } /* Projektbeskrivelsens tekststørrelse — skru her. 13px er hvad den arvede fra body indtil nu, altså uændret. Prøv 15px hvis den skal være lettere at læse. */ .proj-text p { margin: 0 0 16px; color: var(--ink); font-size: 17px; line-height: 1.6; } .proj-text .tags { list-style: none; padding: 0; margin: 0; color: var(--ink-mid); } .proj-next { position: fixed; right: var(--pad); bottom: 14px; z-index: 40; font-size: 17px; text-decoration: none; color: var(--ink-dim); transition: color 0.18s ease; } .proj-next:hover { color: var(--ink); } @media (max-width: 860px) { /* --pad er 16px overalt, ogsaa her */ .proj-grid { grid-template-columns: 1fr; gap: 26px; } /* paa mobil stables alt i én spalte i almindelig raekkefoelge */ .proj-media, .proj-text, .proj-meta, .proj-video { grid-column: 1; grid-row: auto; } .intro { padding: 10px var(--pad) 6px; } .intro-line { margin-top: 18px; } .intro-foot { margin-top: 20px; } .sec { margin-top: 84px; } .sec-label { margin-bottom: 30px; } .hero { display: flex; flex-direction: column; gap: 0; height: auto; min-height: 0; max-height: none; } /* .media-wrap kom til efter at disse regler blev skrevet. Uden den her faldt rammen sammen til nul hoejde paa mobil, fordi .frame ikke laengere er direkte barn af .hero. */ .media-wrap { order: 1; width: 100%; } .frame { order: 1; height: auto; aspect-ratio: 4 / 3; } .caption { order: 2; margin: 10px 2px 0; padding-top: 0; min-height: 2.6em; } .hero-left { display: contents; } .label { order: 3; margin-top: 30px; } .list { order: 4; } .list a { padding: 16px 2px; } .list a .title { font-size: 17px; } .archive-link { order: 5; } .svc-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } .svc-ill { margin-bottom: 22px; } .logo-row { gap: 28px 40px; } html[data-theme="dark"] .logo-row img, html:not([data-theme]) .logo-row img { } .logo-row img { height: 24px; } .about-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .portrait { max-width: 200px; } .about-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; } .site-footer { margin-top: 84px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .frame img { transition-duration: 1ms; } .list a { transition: none; } .reveal { opacity: 1; transform: none; transition: none; } } /* Klientlogoerne er sorte SVG-filer. I moerk tilstand vendes de om, saa de ikke forsvinder i baggrunden. */ html[data-theme="dark"] .logo-row img { filter: invert(1); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .logo-row img { filter: invert(1); } }