/* ========================================================================== Dancesport.dk v2 — Design System (ds.css) Source: Claude Design project "Dancesport.dk v2", files - Designsystem Foundation.dc.html - A - Offentlig portal.dc.html (shared base styles only) Raw handoff kept at /docs/design/import/*.dc.html — treat this file as the canonical, hand-extracted implementation. Mobile-first. Two breakpoints: 768px (tablet) and 1160px (desktop). Radius is adjustable via --ds-radius (Foundation's "Tweaks" panel exposed Skarp/Standard/Blød = 6/10/14px). Multi-tenant theming: the neutral Dancesport.dk palette lives on :root. A tenant overrides its palette by setting data-tenant="" on or (e.g. data-tenant="dansebroen"). Only accent-family tokens and background differ per tenant — semantic status colors are fixed platform- wide (see "STATUS COLORS" below) and must never be themed per tenant. ========================================================================== */ /* ============ FONTS ============ */ /* Archivo 400–800 for all UI text; ui-monospace fallback stack for data (DanceID numbers, timestamps, back numbers). If self-hosting later, replace this @import with local @font-face declarations using the same family name so no other rule in this file needs to change. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap'); /* ============ TOKENS ============ */ :root { /* -- Typography -- */ --ds-font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --ds-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* -- Tenant-themeable brand tokens (Dancesport.dk neutral, default) -- */ --ds-color-primary: oklch(0.35 0.05 260); /* "Blæk" / primær */ --ds-color-primary-soft: oklch(0.95 0.02 260); /* primær, tint til baggrunde/pills */ --ds-color-surface-dark: oklch(0.24 0.03 262); /* mørk flade (ticket, hero) */ --ds-color-bg: #f9f9f8; /* platform-baggrund */ --ds-color-bg-social: #f4f3f1; /* social-flade (feed-baggrund) */ /* -- Neutral palette (tenant-independent) -- */ --ds-color-energy: oklch(0.70 0.19 145); /* energi-grøn / succes-accent */ --ds-color-energy-ink: oklch(0.20 0.05 150); /* tekst ovenpå energi-grøn */ --ds-color-energy-shadow: oklch(0.55 0.15 148); /* "hal-knap" bundskygge */ --ds-color-text: oklch(0.24 0.03 262); --ds-color-text-secondary: oklch(0.51 0.02 260); --ds-color-text-muted: oklch(0.65 0.01 260); --ds-color-surface: #ffffff; --ds-color-border: oklch(0.91 0.005 260); --ds-color-border-soft: oklch(0.95 0.003 260); --ds-color-border-strong: oklch(0.85 0.01 260); --ds-color-disabled-bg: oklch(0.94 0.005 260); --ds-color-disabled-text: oklch(0.65 0.01 260); /* -- Semantic status colors — SAME on every tenant, never override -- */ --ds-status-pending-bg: oklch(0.96 0.045 85); --ds-status-pending-text: oklch(0.50 0.11 75); --ds-status-pending-dot: oklch(0.72 0.15 75); --ds-status-approved-bg: oklch(0.95 0.05 150); --ds-status-approved-text: oklch(0.45 0.12 148); --ds-status-approved-dot: oklch(0.70 0.19 145); --ds-status-paid-bg: oklch(0.94 0.035 230); --ds-status-paid-text: oklch(0.42 0.09 230); --ds-status-paid-dot: oklch(0.62 0.12 230); /* "Tjekket ind" uses fixed ink (primary-neutral), NOT the tenant accent — confirmed against Foundation's swatch legend ("Blæk / Primær"). */ --ds-status-checkedin-bg: oklch(0.35 0.05 260); --ds-status-checkedin-text: #ffffff; --ds-status-waitlist-bg: oklch(0.94 0.005 260); --ds-status-waitlist-text: oklch(0.45 0.02 260); --ds-status-error-bg: oklch(0.95 0.04 25); /* afvist (filled) */ --ds-status-error-text: oklch(0.48 0.16 25); --ds-status-error-border: oklch(0.60 0.16 25); /* mangler betaling (outline) */ --ds-status-error-field-bg: oklch(0.98 0.01 25); /* invalid form-felt baggrund */ /* -- Radius scale (adjustable; default = "Standard 10px") -- */ --ds-radius: 10px; --ds-radius-sm: calc(var(--ds-radius) - 4px); /* badge/felt */ --ds-radius-input: calc(var(--ds-radius) - 2px); /* input/select */ --ds-radius-lg: calc(var(--ds-radius) + 4px); /* modal/sheet/ticket */ --ds-radius-pill: 999px; /* -- Spacing scale (4px grid) -- */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 24px; --ds-space-6: 32px; --ds-space-7: 48px; --ds-space-8: 64px; /* -- Layout -- */ --ds-container-max: 1180px; --ds-touch-min: 44px; /* min. touch-mål */ --ds-touch-hall: 64px; /* hal-/kiosk-komponenter (scanner, speaker) */ --ds-shadow-card: 0 1px 3px oklch(0.24 0.03 262 / 0.05); } /* -- DanseBroen tenant override -- */ [data-tenant="dansebroen"] { --ds-color-primary: oklch(0.44 0.16 358); --ds-color-primary-soft: oklch(0.96 0.025 358); --ds-color-surface-dark: oklch(0.24 0.07 340); --ds-color-bg: #f5f4f4; /* Note: energy/success and all --ds-status-* tokens are intentionally NOT overridden here — they are semantic and tenant-independent. */ } /* ============ RESET / BASE ============ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ds-color-bg); font-family: var(--ds-font-sans); font-size: 15px; line-height: 1.6; color: var(--ds-color-text); -webkit-font-smoothing: antialiased; } a { color: var(--ds-color-primary); text-decoration: none; } a:hover { filter: brightness(0.85); } img, svg { max-width: 100%; display: block; } input, select, textarea, button { font-family: inherit; box-sizing: border-box; } input, select, textarea { min-width: 0; width: 100%; } input[type="checkbox"], input[type="radio"] { width: auto; } /* ============ TYPOGRAFI ============ Scale taken verbatim from Foundation's type spec table. Mobile-first: Display/H1 step down on small screens, then reach full size at 768px+. */ .ds-display { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; } .ds-h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .ds-h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; } .ds-body { font-size: 15px; line-height: 1.6; } .ds-small { font-size: 13px; font-weight: 500; color: var(--ds-color-text-secondary); } .ds-data { font-family: var(--ds-font-mono); font-size: 13px; font-weight: 500; } /* Caps-overskrift: uppercase mono eyebrow label (used above headers) and the "caps headings" rule for the DanseBroen/WP track. */ .ds-eyebrow { font-family: var(--ds-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-color-text-secondary); } .ds-caps-heading { font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; } @media (min-width: 768px) { .ds-display { font-size: 44px; } .ds-h1 { font-size: 30px; } .ds-h2 { font-size: 21px; } } /* ============ LAYOUT / CONTAINERS ============ */ .container { width: 100%; margin: 0 auto; padding: 0 var(--ds-space-4); } @media (min-width: 768px) { .container { padding: 0 var(--ds-space-6); } } @media (min-width: 1160px) { .container { max-width: var(--ds-container-max); padding: 0 var(--ds-space-7); } } /* Tenant/platform topbar — logo mark + name + trailing meta */ .ds-topbar { background: var(--ds-color-surface); border-bottom: 1px solid var(--ds-color-border); padding: 0 var(--ds-space-4); height: 60px; display: flex; align-items: center; gap: var(--ds-space-3); } @media (min-width: 768px) { .ds-topbar { padding: 0 var(--ds-space-6); height: 64px; } } .ds-topbar__mark { width: 26px; height: 26px; flex: none; border-radius: var(--ds-radius-sm); background: var(--ds-color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; } .ds-topbar__name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ds-color-primary); } .ds-topbar__meta { margin-left: auto; font-family: var(--ds-font-mono); font-size: 11px; color: var(--ds-color-text-secondary); } /* ============ KNAPPER ============ Touch target ≥44px on every size except the compact/inline ghost link pattern; hall variant is 64px full-contrast for scanner/speaker/kiosk. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); height: var(--ds-touch-min); padding: 0 var(--ds-space-5); border: none; border-radius: var(--ds-radius); font-family: var(--ds-font-sans); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; transition: filter 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .btn:disabled, .btn[disabled] { background: var(--ds-color-disabled-bg); color: var(--ds-color-disabled-text); cursor: not-allowed; } .btn--primary { background: var(--ds-color-primary); color: #ffffff; } .btn--primary:hover:not(:disabled) { filter: brightness(1.15); } .btn--secondary { background: var(--ds-color-surface); color: var(--ds-color-text); border: 1.5px solid var(--ds-color-border-strong); } .btn--secondary:hover:not(:disabled) { border-color: oklch(0.6 0.03 260); } .btn--ghost { background: transparent; color: var(--ds-color-primary); padding: 0 var(--ds-space-4); } .btn--ghost:hover:not(:disabled) { background: var(--ds-color-primary-soft); } .btn--danger { background: var(--ds-status-error-bg); color: var(--ds-status-error-text); } .btn--danger:hover:not(:disabled) { background: oklch(0.92 0.06 25); } /* Pill-shaped compact button, e.g. topbar "Log ind" / "Tilmeld" actions */ .btn--sm { height: 40px; padding: 0 var(--ds-space-4); font-size: 13.5px; border-radius: var(--ds-radius); } .btn--pill { border-radius: var(--ds-radius-pill); } /* Hall/kiosk variant: max-contrast, full-width, for check-in scanners */ .btn--hall { width: 100%; height: var(--ds-touch-hall); border-radius: var(--ds-radius); background: var(--ds-color-energy); color: var(--ds-color-energy-ink); font-size: 18px; font-weight: 800; letter-spacing: 0.01em; box-shadow: 0 2px 0 var(--ds-color-energy-shadow); } .btn--hall:hover:not(:disabled) { filter: brightness(1.05); } /* ============ FORMULARFELTER ============ */ .field { display: flex; flex-direction: column; gap: var(--ds-space-2); font-size: 13px; font-weight: 600; } .field__input, .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field input[type="number"], .field select, .field textarea { height: 46px; padding: 0 var(--ds-space-4); border: 1.5px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-input); font-family: var(--ds-font-sans); font-size: 15px; color: var(--ds-color-text); background: var(--ds-color-surface); } .field textarea { height: auto; min-height: 96px; padding-top: var(--ds-space-3); } .field__input:focus, .field input:focus, .field select:focus { border-color: var(--ds-color-primary); outline: none; } /* Error state: red border + tinted background + hint text below */ .field--error .field__input, .field--error input, .field--error select { border-color: var(--ds-status-error-border); background: var(--ds-status-error-field-bg); } .field__hint { font-size: 12px; font-weight: 500; color: var(--ds-color-text-secondary); } .field--error .field__hint { color: var(--ds-status-error-text); } /* Search field: pill radius, subtle bg, fills white on focus */ .field--search .field__input, .field--search input[type="search"] { border-radius: var(--ds-radius-pill); background: var(--ds-color-bg); } .field--search .field__input:focus, .field--search input[type="search"]:focus { background: var(--ds-color-surface); } .field--checkbox { flex-direction: row; align-items: center; gap: var(--ds-space-3); font-size: 14px; font-weight: 400; cursor: pointer; } .field--checkbox input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--ds-color-primary); } /* ============ KORT (cards) ============ */ .card { background: var(--ds-color-surface); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius); padding: var(--ds-space-5); } .card--flush { padding: 0; overflow: hidden; } /* Event card: date badge + title/venue/status + CTA */ .card--event { display: flex; align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-4); box-shadow: var(--ds-shadow-card); } .card--event__date { flex: none; width: 56px; height: 62px; border-radius: var(--ds-radius-input); background: var(--ds-color-primary-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; } .card--event__day { font-size: 22px; font-weight: 800; color: var(--ds-color-primary); line-height: 1; } .card--event__month { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--ds-color-primary); text-transform: uppercase; } .card--event__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .card--event__title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .card--event__meta { font-size: 13px; color: var(--ds-color-text-secondary); } /* Dancer/pair card: avatar + name/DanceID + tag pills */ .card--dancer { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-4); } .card--dancer__avatar { flex: none; width: 46px; height: 46px; border-radius: var(--ds-radius-pill); background: var(--ds-color-energy); color: var(--ds-color-energy-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; } .card--dancer__name { font-size: 15px; font-weight: 700; } .card--dancer__id { font-family: var(--ds-font-mono); font-size: 11px; font-weight: 500; color: var(--ds-color-text-secondary); } /* Ticket / QR card: dark surface, always high-contrast for scanning */ .card--ticket { background: var(--ds-color-surface-dark); border-radius: var(--ds-radius-lg); padding: var(--ds-space-5); color: #ffffff; display: flex; flex-direction: column; gap: var(--ds-space-4); } .card--ticket__qr { align-self: center; width: 164px; height: 164px; background: #ffffff; border-radius: 12px; padding: var(--ds-space-3); display: flex; align-items: center; justify-content: center; } .card--ticket__note { text-align: center; font-size: 12px; opacity: 0.7; } /* ============ STATUS-BADGES ============ Semantic, tenant-independent. Never wire these to --ds-color-primary. */ .badge { display: inline-flex; align-items: center; gap: var(--ds-space-2); padding: 5px 12px; border-radius: var(--ds-radius-pill); font-size: 12.5px; font-weight: 600; line-height: 1.3; } .badge__dot { width: 7px; height: 7px; border-radius: var(--ds-radius-pill); flex: none; } .badge--pending { background: var(--ds-status-pending-bg); color: var(--ds-status-pending-text); } .badge--pending .badge__dot { background: var(--ds-status-pending-dot); } .badge--approved { background: var(--ds-status-approved-bg); color: var(--ds-status-approved-text); } .badge--approved .badge__dot { background: var(--ds-status-approved-dot); } .badge--paid { background: var(--ds-status-paid-bg); color: var(--ds-status-paid-text); } .badge--paid .badge__dot { background: var(--ds-status-paid-dot); } .badge--checkedin { background: var(--ds-status-checkedin-bg); color: var(--ds-status-checkedin-text); } .badge--waitlist { background: var(--ds-status-waitlist-bg); color: var(--ds-status-waitlist-text); } /* Afvist: filled red */ .badge--error { background: var(--ds-status-error-bg); color: var(--ds-status-error-text); } /* Mangler betaling: outline-only red, transparent fill */ .badge--error-outline { background: transparent; border: 1.5px solid var(--ds-status-error-border); color: var(--ds-status-error-text); } /* ============ PILLER (tags, not status) ============ */ .pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--ds-radius-pill); font-size: 11.5px; font-weight: 600; background: var(--ds-color-primary-soft); color: var(--ds-color-primary); } .pill--muted { background: var(--ds-color-disabled-bg); color: oklch(0.45 0.02 260); } /* Larger social-action pill, e.g. "👏 Hep · 86" */ .pill--social { padding: 6px 13px; font-size: 11px; font-weight: 800; background: var(--ds-color-primary); color: #ffffff; } /* ============ TABEL ============ Desktop: standard grid/table. Below 768px it collapses into stacked "cards": hide the header row, and each cell becomes a label:value line using its data-label attribute. Markup contract: ......

Danser
Emma Jensen

*/ .table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .table th { padding: 10px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-color-text-secondary); border-bottom: 1px solid var(--ds-color-border); text-align: left; } .table td { padding: 12px; border-bottom: 1px solid var(--ds-color-border-soft); } .table tr:last-child td { border-bottom: none; } .table tr:first-child td { border-bottom: 1px solid var(--ds-color-border-soft); } /* Row needing attention (e.g. missing payment) */ .table tr--flag td { background: var(--ds-status-error-field-bg); } @media (max-width: 767.98px) { .table--card-collapse thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .table--card-collapse, .table--card-collapse tbody, .table--card-collapse tr, .table--card-collapse td { display: block; width: 100%; } .table--card-collapse tr { margin-bottom: var(--ds-space-4); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius); padding: var(--ds-space-3) var(--ds-space-4); } .table--card-collapse td { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-3); padding: 6px 0; border-bottom: 1px solid var(--ds-color-border-soft); text-align: right; } .table--card-collapse td:last-child { border-bottom: none; } .table--card-collapse td::before { content: attr(data-label); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-color-text-secondary); text-align: left; } } /* ============ STEPPER ============ Event lifecycle indicator (kladde → publiceret → åben → lukket → ...). */ .stepper { display: flex; align-items: center; gap: 0; } .stepper__step { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-2); flex: 1; } .stepper__dot { width: 26px; height: 26px; border-radius: var(--ds-radius-pill); background: #fff; border: 2px solid var(--ds-color-border); color: var(--ds-color-disabled-text); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .stepper__label { font-size: 11.5px; font-weight: 600; color: var(--ds-color-disabled-text); } .stepper__connector { flex: 1; height: 2px; background: var(--ds-color-border); margin-bottom: 20px; } .stepper__step--done .stepper__dot { background: var(--ds-color-primary); border-color: var(--ds-color-primary); color: #fff; } .stepper__step--done .stepper__label { color: var(--ds-color-text-secondary); } .stepper__connector--done { background: var(--ds-color-primary); } .stepper__step--current .stepper__dot { background: var(--ds-color-energy); color: var(--ds-color-energy-ink); border-color: transparent; font-weight: 800; box-shadow: 0 0 0 4px var(--ds-status-approved-bg); } .stepper__step--current .stepper__label { color: var(--ds-color-text); font-weight: 700; } /* ============ TOM TILSTAND (empty state) ============ */ .empty-state { border: 1.5px dashed var(--ds-color-border-strong); border-radius: var(--ds-radius); padding: var(--ds-space-7) var(--ds-space-5); display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-3); text-align: center; } .empty-state__icon { width: 44px; height: 44px; border-radius: var(--ds-radius-pill); background: var(--ds-color-primary-soft); color: var(--ds-color-primary); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; } .empty-state__title { font-size: 16px; font-weight: 700; } .empty-state__body { font-size: 13.5px; color: var(--ds-color-text-secondary); max-width: 300px; line-height: 1.5; } /* ============ NOTIFIKATIONER ============ */ .notif-list { display: flex; flex-direction: column; } .notif { display: flex; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-2); border-radius: var(--ds-radius); cursor: pointer; } .notif:hover { background: var(--ds-color-bg); } .notif--unread { background: var(--ds-color-primary-soft); } .notif--unread:hover { background: var(--ds-color-primary-soft); } .notif__icon { flex: none; width: 34px; height: 34px; border-radius: var(--ds-radius-pill); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; } .notif__body { flex: 1; display: flex; flex-direction: column; gap: 2px; } .notif__text { font-size: 13.5px; } .notif__meta { font-size: 12px; color: var(--ds-color-text-secondary); }