/* ============================================================ components.css — Globale komponenter (Fase 1) Header/topbånd, navigation, mobilmenu, knapper, footer. Kræver tokens.css + base.css. ============================================================ */ /* ============================================================ MASTHEAD — identitetsområde (normalt flow) + STICKY menurække Målt efter referencekompositionen (1280: identitet 199px, linje #C8C8C8, nav 13px/ls -0.26px spredt). Identitetsområdet er i normalt dokumentflow og ruller naturligt ud af viewporten. KUN .masthead__nav-sticky er sticky — og den er SØSKENDE til

, så dens containing block er , og den forbliver sticky gennem hele dokumentets resterende højde. ============================================================ */ .masthead { --mh-portrait: 199px; --mh-meta: 363px; --mh-gap: 24px; --mh-pad: 12px; position: static; background: var(--bg); } /* Sticky menurække. Solid hvid baggrund → indhold skinner ikke igennem. */ .masthead__nav-sticky { position: sticky; top: 0; z-index: 100; background: var(--bg); } /* ---- Identitetsrække: KUN logo (meta-tekstblokken fjernet i Fase 8) ---- */ .masthead__identity { display: flex; align-items: center; padding-block: var(--mh-pad); } .masthead__wordmark { align-self: center; min-width: 0; font-size: clamp(28px, 5.4vw, 86px); font-weight: var(--fw-medium); line-height: 0.9; letter-spacing: var(--ls-display); text-transform: uppercase; white-space: nowrap; } /* Logo-billede erstatter wordmark-teksten (Fase 8). Tekststilene ovenfor bevares som graceful fallback for alt-teksten, hvis billedet ikke loader. Højden er afledt af det tidligere wordmark (≈0.9×font) → samme optiske størrelse; bredden følger logoets forhold (ingen forvrængning). */ .masthead__wordmark img { display: block; width: auto; height: clamp(14px, 2.43vw, 38px); /* halveret i Fase 8 (~199×35 ved 1440) */ max-width: 100%; } .masthead__compact .masthead__wordmark img { height: 14px; } /* halveret; min-højde bevaret */ /* .masthead__meta (lokation + faglig beskrivelse) og .masthead__portrait er begge fjernet i Fase 8 — identitetsrækken indeholder nu KUN logoet. */ /* ---- Sprogskifter (DA/EN med lokale flag-SVG'er) ---- */ .language-switch { display: inline-flex; align-items: center; gap: 10px; margin-left: 12px; /* lille, kontrolleret afstand fra Instagram */ } .language-switch__link { position: relative; display: inline-flex; align-items: center; padding-bottom: 5px; /* plads til den diskrete grå streg */ } .language-switch__link img { display: block; height: 15px; width: auto; /* korrekte flagproportioner, ingen forvrængning */ } .language-switch__link[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 80%; height: 1px; background: var(--line-strong); /* diskret grå — ingen kraftig sort/baggrundsboks */ } /* ---- Hårfin linje mellem rækkerne ---- */ .masthead__rule { border: 0; border-top: 1px solid #C8C8C8; margin: 0; } /* ---- Navigationsrække (spredt) ---- */ .masthead__nav { display: flex; align-items: center; gap: clamp(24px, 11.5vw, 152px); padding-block: 10px; } .masthead__nav a { position: relative; font-size: 13px; font-weight: var(--fw-medium); letter-spacing: -0.26px; text-transform: uppercase; color: var(--fg); padding-bottom: 3px; } .masthead__nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-fast) var(--ease-standard); } .masthead__nav a:hover::after, .masthead__nav a:focus-visible::after, .masthead__nav a[aria-current="page"]::after { transform: scaleX(1); } /* Sociale links skubbes til højre i samme række */ .masthead__social { margin-left: auto; display: flex; align-items: center; gap: var(--space-xs); } /* ---- Kompakt sticky mobilheader (vises kun ≤768) ---- */ .masthead__compact { display: none; } .masthead__compact-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding-block: 14px; } .masthead__compact .masthead__wordmark { font-size: 17px; letter-spacing: 0.04em; white-space: nowrap; } /* Fallback-navigation uden JavaScript — skjult når html.js er sat */ .masthead__compact-nav { display: none; } .no-js .masthead__compact-nav { display: flex; flex-wrap: wrap; gap: 12px var(--space-xs); padding-bottom: 14px; } .masthead__compact-nav a { font-size: 13px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg); } .masthead__compact-nav a:hover, .masthead__compact-nav a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } /* Uden JS er "+"-knappen nytteløs → skjul den, fallback-nav træder i stedet */ .no-js .nav-toggle { display: none !important; } /* ---- "+"-kontrol (roterer til ×) ---- */ .nav-toggle { display: none; width: 34px; height: 34px; margin-right: -6px; align-items: center; justify-content: center; flex: 0 0 auto; } .nav-toggle__box { position: relative; width: 18px; height: 18px; transition: transform var(--motion-normal) var(--ease-standard); } .nav-toggle__box::before, .nav-toggle__box::after { content: ""; position: absolute; background: var(--fg); } .nav-toggle__box::before { left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); } .nav-toggle__box::after { top: 0; left: 50%; height: 100%; width: 1px; transform: translateX(-50%); } .nav-toggle[aria-expanded="true"] .nav-toggle__box { transform: rotate(45deg); } /* ============================================================ MOBILMENU — fuldskærms-overlay ============================================================ */ .menu { position: fixed; inset: 0; z-index: 90; background: var(--bg); padding-top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; justify-content: space-between; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--motion-normal) var(--ease-standard), transform var(--motion-normal) var(--ease-standard), visibility 0s linear var(--motion-normal); } .menu[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .menu__list { display: flex; flex-direction: column; } .menu__link { display: block; padding-block: var(--fs-sm); border-bottom: 1px solid var(--line); font-size: var(--fs-xl); font-weight: var(--fw-medium); letter-spacing: var(--ls-display); line-height: 1; text-transform: uppercase; transition: transform var(--motion-fast) var(--ease-standard); } .menu__link:hover, .menu__link:focus-visible { transform: translateX(10px); } .menu__foot { padding-block: var(--space-xs); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-muted); } body[data-menu-open="true"] { overflow: hidden; } /* ============================================================ KNAPPER — sort/hvid-inversion (ingen accentfarve) ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: 1px solid var(--fg); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; background: var(--bg); color: var(--fg); transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); } .btn:hover, .btn:focus-visible { background: var(--inv-bg); color: var(--inv-fg); } .btn--solid { background: var(--inv-bg); color: var(--inv-fg); } .btn--solid:hover, .btn--solid:focus-visible { background: var(--bg); color: var(--fg); } /* Tekstlink med underline-reveal */ .link { position: relative; font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; } .link::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-fast) var(--ease-standard); } .link:hover::after, .link:focus-visible::after { transform: scaleX(1); } /* ============================================================ FOOTER ============================================================ */ /* Sort afslutningsblok — målt på referencen: #0F0F0F, padding-top 100px, padding-bottom 20px, kant-til-kant, radius 0. Samme værdier på alle bredder. INGEN border-top og INGEN margin → sort møder hvid uden hvid stribe. */ .site-footer { background: #0F0F0F; padding-top: 100px; padding-bottom: 20px; margin: 0; border-radius: 0; } .site-footer__title { font-size: var(--fs-2xl); text-transform: uppercase; letter-spacing: var(--ls-display); line-height: var(--lh-display); margin-bottom: var(--fs-sm); color: #FFFFFF; } .site-footer__lead { color: rgba(255, 255, 255, 0.72); margin-bottom: var(--space-s); } .site-footer__row { display: flex; flex-wrap: wrap; gap: var(--fs-sm) var(--space-xs); align-items: center; padding-top: var(--space-xs); border-top: 1px solid rgba(255, 255, 255, 0.22); } .site-footer__copy { margin-left: auto; font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } /* Links på sort: hvid tekst + hvid underline-reveal (den globale sorte understregning og sorte fokus-outline ville forsvinde mod baggrunden). */ .site-footer .link { color: #FFFFFF; } .site-footer .link::after { background: #FFFFFF; } .site-footer :focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; } /* ============================================================ DEV-ONLY — må ikke med i den offentlige version ============================================================ */ .dev-placeholder { display: inline-block; padding: 6px 10px; border: 1px dashed var(--line-strong); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-faint); cursor: not-allowed; user-select: none; } /* ============================================================ SEKTIONSHOVED (titel + valgfrit "se alle"-link) ============================================================ */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fs-sm) var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-s); } /* ============================================================ PROJEKTLISTE — genbruges på forside og projektoversigt ============================================================ */ /* Grid: 1 kolonne ≤639 · 2 kolonner 640–1023 · 3 kolonner ≥1024. BEMÆRK: referencen går direkte 3 → 1 ved 810/809 og har INTET 2-kolonne-trin. Trinnene herunder er en bevidst afvigelse. Gap er derimod referencens målte værdi: 12px række, 8px kolonne. Med 4 projekter i 3 kolonner falder det fjerde automatisk ned i række 2, kolonne 1: venstrestillet, samme bredde, intet span, ingen centrering, ingen opskalering. */ .work { display: grid; grid-template-columns: 1fr; gap: 12px 8px; } @media (min-width: 640px) { .work { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .work { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .work__item { display: block; min-width: 0; } .work__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; /* som referencen */ background: var(--line); } .work__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; /* default; overstyres pr. projekt nedenfor */ transition: transform var(--motion-normal) var(--ease-standard); } /* Kortvarianter (kun projektoversigten): kvadratiske podcastcovers vises 'contain' på neutral flade; manglende thumbnail bliver et neutralt placeholder-kort med "VIDEO KOMMER" — aldrig et dødt . Forsidens kuraterede kort bruger ingen af disse klasser og er uberørt. */ .work__media--contain { background: #F2F2F2; } .work__media--contain img { object-fit: contain; } .work__media--empty { display: flex; align-items: center; justify-content: center; background: #F2F2F2; border: 1px solid #E2E2E2; } .work__media-placeholder-text { font-size: 12px; font-weight: var(--fw-semibold); line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: #9A9A9A; } /* Projektspecifik beskæring (16:9-kilde i 4:3-ramme skjuler 16,5% i hver side). Værdier fastsat efter visuel kontrol af hvert enkelt thumbnail. */ [data-project="aderbracksklinikerna"] .work__media img { object-position: 50% 50%; } [data-project="dr-ultra"] .work__media img { object-position: 50% 50%; } [data-project="aeldre-sagen"] .work__media img { object-position: 50% 50%; } [data-project="hairboost"] .work__media img { object-position: 50% 50%; } /* ORANGE: illustration + ORANGE-typografi ligger centreret (motiv ca. x 370–870 af 1280) og falder helt inden for 4:3-udsnittet (synligt x 160–1120). */ [data-project="orange"] .work__media img { object-position: 50% 50%; } /* Horten: centreret wordmark + undertekst (motiv ca. x 420–860) — ligeledes helt inden for udsnittet, intet vigtigt beskæres. */ [data-project="horten"] .work__media img { object-position: 50% 50%; } .work__item:hover .work__media img, .work__item:focus-visible .work__media img { transform: scale(1.03); } /* Metadata stables under mediet, som referencen */ .work__meta { margin-top: 12px; min-width: 0; } /* Lange projekttitler ombrydes frit — aldrig forkortet, aldrig overflow */ .work__title { min-width: 0; font-size: 13px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: -0.26px; line-height: 1.4; } .work__client { color: var(--fg-muted); } .work__cat { display: block; margin-top: 4px; font-size: 13px; letter-spacing: -0.26px; color: var(--fg-muted); } .work__item:hover .work__title, .work__item:focus-visible .work__title { text-decoration: underline; text-underline-offset: 4px; } /* ============================================================ KLIENTBÅND — marquee (alle værdier målt på referencen) ============================================================ */ /* Sektionen har referencens egen rytme: 80px top/bund, 16px mellem overskrift → linje → bånd. Skjules helt ≤809, som referencen. */ .clients-section { padding-block: 80px; } /* ---- Statisk 1px-linje ---- Én sammenhængende, statisk streg fra venstre til højre indholdskant. Ingen bevægelse, intet segment, ingen keyframes, ingen JavaScript. (Efter Mikkels egen visuelle observation af referencen.) */ .clients__rule { height: 1px; background: #C8C8C8; margin-top: 16px; } /* ---- Marquee ---- Ét sæt = 4 felter + 4 gaps = 4×230 + 4×8 = 952px Sporet = 4 sæt = 16×230 + 15×8 = 3800px Rest efter forskydning = 3800 − 952 = 2848px ≥ 1865px (bredeste container ved 1920) → aldrig hul i båndet. Varighed = 952px ÷ 60px/s = 15.867s */ .clients { --tile: 230px; --tile-gap: 8px; --set: calc(4 * var(--tile) + 4 * var(--tile-gap)); --marquee-dur: 15.867s; margin-top: 16px; overflow: clip; } .clients__track { display: flex; align-items: center; gap: var(--tile-gap); width: max-content; animation: clients-marquee var(--marquee-dur) linear infinite; } @keyframes clients-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--set))); } } /* Fallback UDEN Web Animations API: hover/fokus sænker via varighed. Deaktiveres når JS har taget kontrol (.clients--waapi), fordi et varighedsskift ellers ville give et synligt spring. */ .clients:not(.clients--waapi):hover .clients__track, .clients:not(.clients--waapi):focus-within .clients__track { animation-duration: calc(var(--marquee-dur) * 5); } .clients__item { flex: 0 0 var(--tile); } .client { position: relative; width: var(--tile); height: var(--tile); background: #EFEFEF; /* normal: lysegrå */ overflow: hidden; display: flex; align-items: center; justify-content: center; transition: background-color var(--motion-fast) var(--ease-standard); } /* Kun det enkelte hoverede/fokuserede kort bliver hvidt (= sidens --bg). Kun background-color animeres → ingen layout shift, marqueens position påvirkes ikke. focus-within er fremtidssikring (kortene er ikke fokuserbare og tilføjer ingen tastaturstop). */ .client:hover, .client:focus-within { background: #FFFFFF; } /* Fire sorte hjørnetrekanter. Referencen bruger 14×14 placeret i inset:-2px, men feltet er overflow:hidden → kun 12×12 er synligt. Her tegnes de synlige 12×12 fra bunden med gradienter — intet asset fra referencen er kopieret. SKJULT normalt (opacity:0), fades hurtigt ind KUN på det enkelte hoverede/fokuserede kort. Absolut pseudo-element → intet layout shift. */ .client::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--motion-fast) var(--ease-standard); background: linear-gradient(to bottom right, #0F0F0F 0 50%, transparent 50%) left top / 12px 12px no-repeat, linear-gradient(to bottom left, #0F0F0F 0 50%, transparent 50%) right top / 12px 12px no-repeat, linear-gradient(to top right, #0F0F0F 0 50%, transparent 50%) left bottom / 12px 12px no-repeat, linear-gradient(to top left, #0F0F0F 0 50%, transparent 50%) right bottom / 12px 12px no-repeat; } .client:hover::before, .client:focus-within::before { opacity: 1; } /* Logoerne i gråtoner i ALLE tilstande (normal, hover, focus-within, under marqueens bevægelse). Der skiftes ALDRIG til farve på hover. Fuld opacity → tydelige, ikke udvaskede. Referencens logoboks er 207×83. Bredden er sat PR. LOGO, så de fire mærker får omtrent samme optiske vægt (areal) trods vidt forskellige sideforhold — ikke samme CSS-bredde til alle. */ .client__logo { display: block; width: auto; height: auto; max-height: 83px; object-fit: contain; filter: grayscale(100%); opacity: 1; } [data-client="dr-ultra"] .client__logo { max-width: 150px; } /* 3,01:1 → 150×49,8 */ [data-client="hairboost"] .client__logo { max-width: 160px; } /* 3,38:1 → 160×47,3 */ [data-client="aeldre-sagen"] .client__logo { max-width: 207px; } /* 5,71:1 → 207×36,2 */ [data-client="aderbracksklinikerna"] .client__logo { max-width: 207px; } /* 6,57:1 → 207×31,5 */ .client__name { position: absolute; left: 0; right: 0; bottom: 0; font-size: 14px; font-weight: var(--fw-medium); line-height: 1.4; /* 19,6px — målt */ letter-spacing: -0.42px; color: #757575; /* målt */ text-align: center; /* Skjult normalt, vises KUN ved hover/fokus på DET enkelte kort. Absolut placeret → ændrer aldrig kortets størrelse eller logoets position (intet layout shift). Skjules visuelt med opacity — IKKE display:none — så navnet forbliver i markup + a11y-træet. */ opacity: 0; transform: translateY(6px); transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); } .client:hover .client__name, .client:focus-within .client__name { opacity: 1; transform: translateY(0); } /* Reduced motion: marqueen står stille, og de tre visuelle gentagelser fjernes, så kun de fire reelle, statiske logoer vises. Linjen er nu statisk pr. default; kort-hover-overgangene bliver øjeblikkelige via den globale reduced-motion-regel i base.css. */ @media (prefers-reduced-motion: reduce) { .clients__track { animation: none; } .clients__item[aria-hidden="true"] { display: none; } } /* Som referencen: hele klientsektionen er skjult ≤809 — inkl. overskrift. Der bygges ingen særskilt mobilvariant. */ @media (max-width: 809px) { .clients-section { display: none; } } /* D5-mobilsikring: line-height 0.8 (--lh-display) giver overlap, når de store danske overskrifter ombryder på smalle skærme. ≥601px bevares 0.8 (desktopudtrykket); ≤600px sættes 1 for de ombrydende overskrifter. */ @media (max-width: 600px) { .section-title, .site-footer__title { line-height: 1; } } /* ============================================================ RESPONSIVE ============================================================ */ /* Masthead trapper ned, så wordmark/meta/portræt aldrig overlapper */ @media (max-width: 1199px) { .masthead { --mh-portrait: 157px; --mh-meta: 320px; } } @media (max-width: 1023px) { .masthead { --mh-portrait: 120px; --mh-meta: 240px; --mh-gap: 20px; } .masthead__meta { font-size: 14px; } } @media (max-width: 768px) { /* Desktop-identitet + desktop-nav skjules; kompakt sticky mobilheader vises */ .masthead, .masthead__nav-sticky { display: none; } .masthead__compact { display: block; position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid #C8C8C8; } .nav-toggle { display: inline-flex; } .site-footer__copy { margin-left: 0; width: 100%; } } /* Sociale links nederst i mobilmenuen, adskilt fra hovednavigationen */ .menu__social { display: flex; gap: var(--space-xs); padding-top: var(--fs-sm); margin-top: var(--fs-sm); border-top: 1px solid #C8C8C8; } .menu__social a { font-size: 13px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-muted); } .menu__social a:hover, .menu__social a:focus-visible { color: var(--fg); } /* Mobil sprogskifter — i mobilmenuens afsluttende område efter de sociale links. Klikareal ≥40×40; samme diskrete grå streg under det aktive flag. */ .menu__lang { display: flex; align-items: center; gap: 12px; margin-top: var(--fs-sm); } .menu__lang .language-switch__link { min-width: 40px; min-height: 40px; justify-content: center; padding-bottom: 0; } .menu__lang .language-switch__link img { height: 18px; } .menu__lang .language-switch__link[aria-current="page"]::after { bottom: 8px; width: 26px; } @media (min-width: 769px) { .masthead__compact { display: none; } } @media (min-width: 769px) { .menu { display: none; } }