/* ============================================================ BLACK TEAM — reset, typografi og layoutprimitiver ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* ------------------------------------------------------------ Kontekstbevidst accent. Brandguldet giver kun 2,95:1 på papir og dumper WCAG AA, mens det giver 5,92:1 på natblå. I stedet for at vælge én farve der er middelmådig begge steder, skifter accenten efter underlaget: komponenter refererer altid til var(--accent), aldrig direkte til --bt-amber. --accent er brødtekst-sikker, --accent-lg er til store overskrifter, tal og ikoner (>=3:1). ------------------------------------------------------------ */ :root { --accent: var(--bt-gold-text); --accent-lg: var(--bt-gold-lg); } .section--dark, .section--deep, .panel--dark, .card--dark, .levelcard, .valuestrip, .refbar, .panel__head, .site-header, .site-footer, .hero { --accent: var(--bt-amber); --accent-lg: var(--bt-amber); } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bt-header-h) + 1rem); } /* Bemærk: sæt IKKE overflow på . Det gør rodelementet til sticky-elementers scrollport og slår position: sticky fra i hele dokumentet — hvilket dræber de pinnede scroll-sekvenser. overflow-x på er sikkert, fordi browsere propagerer body's overflow til viewporten i stedet for at gøre body til en scroll-container. Mobilmenuens overløb løses i components.css i stedet. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bt-bg); color: var(--bt-fg); font-family: var(--bt-font-body); font-size: var(--bt-fs-body); line-height: var(--bt-lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; } p, ul, ol, dl, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg, video { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--bt-amber); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--bt-amber); color: #12100A; } /* ---------- Skriftklasser ---------- */ .display { font-family: var(--bt-font-display); font-weight: 700; line-height: var(--bt-lh-tight); letter-spacing: var(--bt-track-display); text-transform: uppercase; } .h1 { font-size: var(--bt-fs-hero); } .h2 { font-size: var(--bt-fs-display); } .h3 { font-size: var(--bt-fs-h2); } /* Sektionsoverskrift som på one-pagerne: versal + guldstreg under */ .section-title { font-family: var(--bt-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: var(--bt-lh-snug); font-size: var(--bt-fs-h2); } .section-title--ruled { padding-bottom: 0.55rem; border-bottom: 2px solid var(--accent-lg); display: inline-block; } /* Øjenbryn: "SERVICESBESKRIVELSE", "CAPABILITY & COMMERCIAL BRIEF" */ .eyebrow { font-family: var(--bt-font-display); font-weight: 500; text-transform: uppercase; letter-spacing: var(--bt-track-micro); font-size: var(--bt-fs-small); color: var(--accent); margin: 0 0 0.9rem; } .eyebrow--muted { color: var(--bt-text-faint); } .lead { font-size: var(--bt-fs-lead); line-height: 1.5; color: var(--bt-text-muted); } .label { font-family: var(--bt-font-display); font-weight: 500; text-transform: uppercase; letter-spacing: var(--bt-track-label); font-size: var(--bt-fs-micro); } .amber { color: var(--accent); } .muted { color: var(--bt-text-muted); } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--bt-maxw); margin-inline: auto; padding-inline: var(--bt-gutter); } .wrap--narrow { max-width: 880px; } .wrap--wide { max-width: 1480px; } .section { padding-block: var(--bt-section-y); position: relative; } .section--tight { padding-block: calc(var(--bt-section-y) * 0.6); } .section--flush-top { padding-top: 0; } /* Mørke bånd — one-pagernes vekslen mellem papir og natblå */ .section--dark { background: var(--bt-ink-900); color: var(--bt-on-dark); } .section--dark .lead, .section--dark .muted { color: var(--bt-on-dark-muted); } .section--dark .eyebrow--muted { color: var(--bt-on-dark-faint); } .section--deep { background: var(--bt-ink-950); color: var(--bt-on-dark); } .section--alt { background: var(--bt-paper-alt); } .grid { display: grid; gap: clamp(1.25rem, 0.6rem + 1.8vw, 2.5rem); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--sidebar { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } @media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--sidebar { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } } .stack > * + * { margin-top: var(--stack-gap, 1rem); } .stack--lg { --stack-gap: 1.75rem; } .stack--sm { --stack-gap: 0.5rem; } .prose { max-width: var(--bt-maxw-text); } .prose p + p { margin-top: 1.1em; } .prose strong { font-weight: 600; color: var(--bt-text); } .section--dark .prose strong { color: #fff; } /* Hairline-deler som i print */ .rule { height: var(--bt-hairline); background: var(--bt-line); border: 0; margin-block: 2rem; } .section--dark .rule { background: var(--bt-ink-700); } .rule--amber { background: var(--accent-lg); height: 2px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%); z-index: 200; background: var(--bt-amber); color: #12100A; padding: 0.7rem 1.25rem; font-weight: 600; border-radius: 0 0 var(--bt-radius) var(--bt-radius); transition: transform var(--bt-dur-fast) var(--bt-ease); } .skip-link:focus { transform: translate(-50%, 0); } /* Baggrundstekstur: den svage kornethed one-pagerne har */ .grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }