/* ── Self-hosted font: Orbitron (variable, 400–900) ─────────────────────── */ @font-face { font-family: Orbitron; src: url('/fonts/orbitron/Orbitron-VariableFont_wght.ttf') format('truetype'); font-weight: 400 900; font-style: normal; font-display: swap; } /* DreamTeam11 modern stylesheet — sectioned */ /* TABLE OF CONTENTS (navigatie, geen visuele impact) 01. Tokens / Settings (custom properties) 02. Reset & Base 03. Layout (header/footer/container/panels) 04. Utilities (helpers: spacing/text/colors/visibility) 05. Components (buttons/forms/selects/popovers/tables/tabs/alerts) 06. Pages (specifieke blokken: landing/auth/shop/etc.) 07. Animations (keyframes + utility-klassen, met reduced-motion respect) 08. Media query notities (breakpoints via tokens) Let op: - Geen inline styles; alleen tokens gebruiken voor z-index/spacing/contrast. - Feature flags zichtbaar houden in componenten (comment bijhouden). - Banners en TOC zijn documentatief; geen invloed op specificity of volgorde. */ /* ===================================================================== RESET & BASE ===================================================================== */ /* Bewust: native hidden afdwingen tegen resets/FOUC — laten staan */ [hidden] { display: none !important; } /* ===================== Tabs (matches page) Verberg panels die aria-hidden="true" hebben zodat meerdere panels in DOM niet tegelijk zichtbaar zijn. ===================== */ .dt-tab-panel[aria-hidden='true'] { display: none; } /* Basis reset */ * { box-sizing: border-box; } /* Responsive media: avoid horizontal overflow by constraining media to container */ img, video, canvas, iframe { max-width: 100%; height: auto; } /* Long text/code safety: wrap to prevent overflow on small screens */ pre { white-space: pre-wrap; word-wrap: break-word; overflow-x: auto; } code { word-break: break-word; } /* ===================================================================== TOKENS (:root custom properties) ===================================================================== */ :root { /* KLEUREN */ --bg: #101828; --bg-alt: #162234; --panel: #162234; --panel-2: #121c2b; --accent: #00e5a4; --accent-2: #2dd4bf; --text: #eef2f6; --muted: #b8c3d7; /* WCAG AA: verhoogd van #a8b3c7 voor 7:1 contrast */ --danger: #ef4444; --warning: #f59e0b; --success: #10b981; --accent-text-dark: #052c1f; /* optimale leesbaarheid op groen */ /* Palette */ --yellow: #facc15; --gold: #d4af37; --orange: #f97316; /* Text variants */ --text-yellow: var(--yellow); --text-gold: var(--gold); --text-orange: var(--orange); /* TYPOGRAFIE */ --font-sans: inter,system-ui,-apple-system,blinkmacsystemfont,'Segoe UI',roboto,'Helvetica Neue',arial,sans-serif; --font-display: orbitron, system-ui, sans-serif; --font-digital: "Bitcount Prop Single Ink", orbitron, ui-monospace, sfmono-regular, menlo, monaco, consolas, "liberation mono", "courier new", monospace; --fs-sm: .875rem; --fs-base: 1rem; --fs-xs: .75rem; --fs-2xs: .7rem; --fs-13: .8125rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* SPACING (4px scale) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* RADII */ --radius-sm: 4px; --radius: 8px; --radius-lg: 16px; --radius-pill: 999px; /* SHADOW */ --shadow: 0 6px 18px -6px rgb(0 0 0 / 50%); /* LAYOUT METRICS */ --header-mini-h: 72px; --header-h: var(--header-mini-h); --footer-ads-h: 44px; --footer-links-h: 46px; --content-max: 1200px; /* max breedte voor centrale content */ --header-stack-extra: 40px; /* extra hoogte voor uitgebreide header */ --auth-hero-min: 600px; /* vergrote hero hoogte */ --auth-col-width: 560px; /* vaste gelijke kolombreedte hero & panel */ /* LEGACY ALIAS TOKENS (samengevoegd) */ --dt-primary: var(--accent); --dt-primary-dark: #00c38c; /* donkerdere variant voor hover */ --dt-danger: var(--danger); --dt-color-yellow: var(--yellow); --dt-color-gold: var(--gold); --dt-color-orange: var(--orange); --dt-text: var(--text); --dt-text-muted: var(--muted); --dt-surface: var(--panel-2); --dt-border: rgb(255 255 255 / 15%); --dt-focus: var(--accent); --dt-focus-ring: 0 0 0 3px rgb(0 229 164 / 35%); /* toegevoegd voor consistente focus styling */ --dt-radius-sm: var(--radius-sm); --dt-radius-md: var(--radius); --dt-space-xs: var(--space-1); --dt-space-sm: var(--space-2); --dt-space-md: var(--space-4); --dt-input-height: 46px; --dt-input-padding-y: 10px; --dt-input-padding-x: 16px; --dt-input-icon-offset: 44px; /* ruimte bij icon links */ --dt-input-icon-right-offset: 44px; --dt-icon-gap: 14px; --dt-icon-size: 18px; --dt-font-size-sm: var(--fs-sm); --dt-surface-glass: rgb(7 13 26 / 76%); --dt-surface-glass-strong: linear-gradient(180deg, rgb(255 255 255 / 16%), rgb(255 255 255 / 5%)); --dt-surface-glass-border: 1px solid rgb(255 255 255 / 12%); --dt-surface-glass-shadow: 0 10px 30px -8px rgb(0 0 0 / 55%); --dt-surface-glass-blur: blur(14px) saturate(140%); /* GLASS (gedeelde tokens voor consistente glass panels / nav) */ --glass-bg: linear-gradient(180deg,rgb(255 255 255 / 16%),rgb(255 255 255 / 5%)); --glass-bg-soft: linear-gradient(180deg,rgb(255 255 255 / 12%),rgb(255 255 255 / 4%)); --glass-border: 1px solid rgb(255 255 255 / 22%); /* NAV STRUCTURE */ --nav-radius: 24px; /* uniforme afgeronde vorm voor hoofd nav cluster */ /* Z-INDEX MAP (tokens i.p.v. magic numbers) */ --z-base: 0; --z-header: 120; /* hoofdheader en sticky onderdelen */ --z-lang-trigger: 130; /* language/formation trigger */ --z-popover: 140; /* popovers (taal/formation/select) */ --z-dropdown: 150; /* generieke dropdowns boven popover indien nodig */ --z-modal: 200; /* modals/dialogen */ --z-toast: 300; /* toasts/overlays boven modals */ --z-mobile-menu: 110; /* mobiel menu (container) */ /* BUG-015 fix: zorg dat het binnenpaneel altijd boven de backdrop ligt om blur op inhoud te voorkomen */ --z-mobile-backdrop: 90; /* backdrop onder panel binnen mobiele menu-stacking context */ --z-mobile-menu-inner: 120; /* binnenkant van mobiel menu boven backdrop */ /* Extra tokens voor lokale lagen (conservatief gelijk aan huidige waarden) */ --z-sticky: 1; /* sticky group headers binnen lijsten */ --z-app-content: 1; /* lokale content boven achtergrond */ --z-watermark: -1; /* decoratieve watermerken achter content */ --z-modal-root: 5000; /* modale root overlay */ --z-formation: 350; /* formation selector wrapper */ --z-formation-dropdown: 600; /* formation dropdown boven generieke select */ --z-tooltip-under: 399; /* pijl onder generieke tooltip box */ --z-pitch-player: 2; /* speler op de pitch */ --z-pitch-overlay-4: 4; /* pitch lock overlay */ --z-pitch-overlay-5: 5; /* elevated elementen boven lock */ --z-pitch-overlay-6: 6; /* busy overlay */ --z-pitch-overlay-7: 7; /* spinner boven alles */ --z-skip-link: 200; /* skip link zichtbaar bij focus */ /* Tooltips & hoge overlays */ --z-tooltip: 400; /* generieke tooltip */ --z-tooltip-high: 1000; /* tooltip in header KPI cluster */ --z-tooltip-arrow: 999; /* bijpassende pijl, net onder de box */ --z-overlay-high: 3000; /* hoge overlaylaag (bijv. KPI cluster) */ --z-overlay-higher: 6000; /* nog hogere laag voor focus states */ /* BREAKPOINTS (gebruik in @media via hardvalues of CSS preprocessor mapping) */ --bp-sm: 640px; --bp-md: 900px; --bp-lg: 1024px; --bp-xl: 1200px; } /* Space between toggle and its dependent fieldset on teams page */ #private-options[data-private-options] { margin-top: 0.75rem; } /* (removed) Legacy month/year select block (2025-08-15) is vervangen door de unified glass select styles hieronder. */ /* Glass Select enhancement */ .dt-select.is-enhanced { position: relative; } .dt-select.is-enhanced select.dt-input.dt-select__native { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .dt-select__button { position: relative; width: 100%; height: var(--dt-input-height); padding: var(--dt-input-padding-y) var(--dt-input-padding-x); padding-left: 44px; padding-right: 44px; display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 6%)); border: 1px solid rgb(255 255 255 / 28%); border-radius: 16px; color: #fff; text-align: left; } .dt-select__button:focus { outline: none; box-shadow: 0 0 0 3px var(--dt-focus-ring, rgb(84 180 211 / 50%)); background: linear-gradient(180deg, rgb(255 255 255 / 26%), rgb(255 255 255 / 10%)); } .dt-select__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; } .dt-select__label-text,.dt-select__option-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-select__flag { width: 18px; height: 12px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgb(0 0 0 / 35%),0 1px 2px rgb(0 0 0 / 45%); flex: 0 0 auto; } .dt-select__dropdown { margin-top: 0; } /* --------------------------------------------- Transfers – meta icon row --------------------------------------------- */ .dt-meta { display: inline-flex; align-items: center; gap: var(--dt-space-2); } .dt-meta > span { display: inline-flex; align-items: center; gap: 6px; } .dt-meta .dt-badge { display: inline-flex; align-items: center; gap: 6px; } /* --------------------------------------------- Transfers – list row grid & alignment --------------------------------------------- */ .dt-transfer-grid { display: grid; grid-template-columns: 1fr 110px 100px 90px 140px auto; align-items: center; gap: var(--dt-space-2); } .dt-transfer-grid .col { display: flex; align-items: center; gap: 8px; min-width: 0; } .dt-transfer-grid .col--name { overflow: hidden; } .dt-transfer-grid .dt-player-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dt-transfer-grid .col--actions { justify-self: end; display: flex; gap: 8px; } .dt-transfer-grid .dt-flag-img { border-radius: 2px; } /* Dim owned rows subtly */ .dt-transfer-grid.is-owned, .dt-list__item.is-owned { opacity: .75; } .dt-transfer-grid.is-owned .dt-player-name { color: var(--dt-text-muted); } /* Responsive collapse: kleinere schermen tonen minder kolommen */ @media (width <= 900px) { .dt-transfer-grid { grid-template-columns: 1fr 90px 90px 0 0 auto;} .dt-transfer-grid .col--value { display: none;} } @media (width <= 640px) { .dt-transfer-grid { grid-template-columns: 1fr 80px 0 0 0 auto;} .dt-transfer-grid .col--goals { display: none;} } /* Popover-like dropdown positioning and styling (matches language popover aesthetics) */ .dt-select__dropdown { position: absolute; top: calc(100% + 10px); left: 0; right: 0; max-height: 280px; overflow: auto; padding: 12px; backdrop-filter: blur(16px) saturate(155%); border-radius: 16px; background: linear-gradient(180deg, rgb(16 24 40 / 92%), rgb(16 24 40 / 88%)); border: 1px solid rgb(255 255 255 / 18%); box-shadow: 0 10px 28px -8px rgb(0 0 0 / 65%); } /* ========================================================== dt-scout-report (Scouting rapport scherm) ========================================================== */ .dt-scout-report { display: grid; gap: 1.5rem; } .dt-history-meta { display: inline-flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; } .dt-history-meta > span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 4%)); border: 1px solid rgb(255 255 255 / 18%); color: var(--dt-text, #eef2f6); } .dt-history-meta > span strong { font-weight: 700; color: var(--dt-text, #eef2f6); } .dt-scout-report__header { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; } .dt-scout-report__player { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; } .dt-scout-report__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: var(--dt-focus-ring, 0 0 0 3px rgb(0 229 164 / 35%)); } .dt-scout-report__title { margin: 0; font-size: 1.25rem; } .dt-scout-report__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--dt-text-muted, #a8b3c7); } .dt-scout-report__sub { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--dt-text-muted, #a8b3c7); margin-top: .25rem; } .dt-scout-report__stats { display: flex; gap: 1rem; align-items: center; justify-content: flex-end; } .dt-stat { display: grid; gap: .25rem; text-align: right; } .dt-stat__label { font-size: .75rem; color: var(--dt-text-muted, #a8b3c7); } .dt-stat__value { font-weight: 600; } .dt-scout-report__section { border-top: 1px solid var(--dt-border, rgb(255 255 255 / 15%)); padding-top: 1rem; } .dt-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; } .dt-table { width: 100%; border-collapse: collapse; } .dt-table th, .dt-table td { border-bottom: 1px solid var(--dt-border, rgb(255 255 255 / 15%)); padding: .5rem .25rem; text-align: left; } .dt-timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; } .dt-tag { background: rgb(255 255 255 / 10%); color: var(--dt-text, #eef2f6); border-radius: .25rem; padding: .125rem .375rem; font-size: .75rem; } .dt-link { color: var(--dt-primary, #00e5a4); text-decoration: none; } .dt-link:hover { text-decoration: underline; } .dt-link-plain { color: inherit; text-decoration: none; } .dt-link-plain:hover { text-decoration: underline; } .dt-dim { color: var(--dt-text-muted, #a8b3c7); } .dt-mono { font-family: ui-monospace, sfmono-regular, menlo, monaco, consolas, "liberation mono", "courier new", monospace; font-size: .85em; } /* ========================================================================== Accordion (dt-accordion) -------------------------------------------------------------------------- */ .dt-accordion { border: 1px solid var(--dt-border, rgb(255 255 255 / 15%)); border-radius: var(--dt-radius-md, 8px); background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2%)); overflow: hidden; } .dt-accordion + .dt-accordion { margin-top: .75rem; } .dt-accordion__toggle { width: 100%; background: none; border: 0; display: flex; align-items: center; gap: .5rem; padding: .65rem .85rem; font: inherit; font-weight: 600; color: var(--dt-text, #eef2f6); cursor: pointer; text-align: left; position: relative; } .dt-accordion__toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--dt-focus, #00e5a4), 0 0 0 4px rgb(0 229 164 / 35%); } .dt-accordion__toggle svg { flex: 0 0 auto; opacity: .85; } .dt-accordion__toggle::after { content: ''; width: 10px; height: 10px; border-right: 2px solid currentcolor; border-bottom: 2px solid currentcolor; transform: rotate(45deg); position: absolute; right: 14px; top: 50%; margin-top: -6px; transition: transform .18s ease; opacity: .8; } .dt-accordion__toggle[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: -4px; } .dt-accordion__panel { padding: .75rem .9rem 1rem; border-top: 1px solid var(--dt-border, rgb(255 255 255 / 12%)); background: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1%)); } .dt-accordion__panel[hidden] { display: block; height: 0; padding-top: 0; padding-bottom: 0; margin: 0; overflow: hidden; border-top-color: transparent; } .dt-accordion__panel > :first-child { margin-top: 0; } .dt-accordion__panel > :last-child { margin-bottom: 0; } /* Unified list structure for glass select (UL > LI > button) */ .dt-select__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .dt-select__list > li { margin: 0; padding: 0; } .dt-select__group { position: sticky; top: 0; z-index: var(--z-sticky); background: rgb(13 27 42 / 85%); backdrop-filter: blur(10px); } .dt-select__list .dt-select__group { margin: 8px 2px 4px; padding: 2px 4px; font-size: var(--fs-12); color: rgb(255 255 255 / 75%); text-transform: none; letter-spacing: .2px; } /* Bewust: native option verbergen — laten staan */ .dt-select__option[hidden] { display: none !important; } .dt-select__option { width: 100%; display: flex; align-items: center; gap: 10px; margin: 6px 0; position: relative; background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 18%); color: var(--text); padding: 10px 12px; border-radius: 10px; font-size: var(--fs-13); cursor: pointer; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; } .dt-select__group { margin: 8px 2px 4px; padding: 2px 4px; font-size: var(--fs-12); color: rgb(255 255 255 / 75%); text-transform: none; letter-spacing: .2px; } .dt-select__option:hover, .dt-select__option:focus-visible { background: rgb(45 212 191 / 10%); border-color: rgb(45 212 191 / 65%); box-shadow: 0 0 0 1px rgb(45 212 191 / 55%) inset; outline: none; } .dt-select__option.is-selected { background: linear-gradient(180deg, rgb(45 212 191 / 18%), rgb(45 212 191 / 8%)); border-color: var(--accent); box-shadow: inset 0 0 0 2px rgb(0 229 164 / 32%); } .dt-select__option.is-selected::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--accent); } .dt-select[data-locked="1"] .dt-select__button, .dt-select.js-dt-select select[disabled] + .dt-select__button { opacity: .6; cursor: not-allowed; } .dt-select[data-locked="1"] .dt-select__button:hover, .dt-select.js-dt-select select[disabled] + .dt-select__button:hover { background: linear-gradient(180deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 6%)); border-color: rgb(255 255 255 / 28%); } .dt-select .dt-select__icon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 18px; color: rgb(255 255 255 / 85%); pointer-events: none; line-height: 1; } .dt-select__button .dt-select__icon { position: absolute; } .dt-select .dt-select__icon--left { left: 14px; right: auto; } .dt-select .dt-select__icon--right { right: 14px; left: auto; } .dt-select.is-enhanced > .dt-select__icon { display: none; } /* original icon hidden; clone lives inside button */ .dt-select.dt-select--yellow-icons .dt-select__icon--left, .dt-select.dt-select--yellow-icons .dt-select__button .dt-select__icon--left { color: var(--yellow); } .dt-select select.dt-input option { background: #0d1b2a; color: #fff; } @media (prefers-color-scheme: light) { .dt-select select.dt-input option { background: #fff; color: #111;} } /* Unified glass select style (2025-08-18) */ .dt-select { position: relative; } .dt-select select.dt-input { appearance: none; padding-right: 44px; /* space for caret */ padding-left: 44px; /* space for left icon */ background: linear-gradient(180deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 6%)); border: 1px solid rgb(255 255 255 / 28%); border-radius: 16px; color: #fff; color-scheme: dark; } .dt-select select.dt-input:focus { background: linear-gradient(180deg, rgb(255 255 255 / 26%), rgb(255 255 255 / 10%)); outline: none; box-shadow: var(--dt-focus-ring); border-color: var(--dt-focus); } /* Move caret from root to button to avoid vertical misplacement when dropdown opens */ .dt-select.is-enhanced::after { display: none; } .dt-select__button::after { content: ''; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid rgb(255 255 255 / 85%); pointer-events: none; } .dt-select.dt-select--yellow-icons .dt-select__button::after { border-top-color: var(--yellow); } .dt-select__button[aria-expanded="true"]::after { transform: translateY(-50%) rotate(180deg); } /* Ensure same look inside glass panels */ .dt-select__option { display: inline-flex; align-items: center; gap: 8px; } .dt-panel--glass .dt-select select.dt-input { background: linear-gradient(180deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 6%)); border-color: rgb(255 255 255 / 28%); } .dt-panel--glass .dt-select select.dt-input:focus { background: linear-gradient(180deg, rgb(255 255 255 / 26%), rgb(255 255 255 / 10%)); outline: none; box-shadow: var(--dt-focus-ring); border-color: var(--dt-focus); } /* Attach dropdown closely to control and increase opacity for readability */ .dt-select { position: relative; } .dt-select .dt-select__dropdown.dt-lang-popover { position: absolute; left: 0; right: 0; min-width: 100%; top: calc(100% + 2px); padding: 10px; /* BUG-021 FIX (FROZEN) – maak achtergrond volledig opaak en schakel blur uit Wijzig deze regels NIET zonder bugkaart te heropenen. TODO(popover): verwijderen zodra alle popovers opt-in .dt-popover--solid gebruiken en visueel gevalideerd zijn. */ background: #101828 !important; /* was semi-transparant gradient; nu solide i.v.m. leesbaarheid */ /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid rgb(255 255 255 / 22%); border-radius: 12px; z-index: var(--z-popover); /* boven content en mobiele menu laag 110 */ max-height: min(320px, 60vh); overflow: auto; } /* Unified focus ring (respecteert prefers-reduced-motion impliciet via geen anim) */ :where(a,button,input,select,textarea,[role="button"]):focus-visible { outline: none; box-shadow: var(--dt-focus-ring); } html,body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; overscroll-behavior: none; } /* GLOBAL BACKGROUND (stadion + zachte kleurvlekken) */ body { background: var(--bg); line-height: 1.4; overflow: auto; } /* Fixed, full-viewport achtergrond via pseudo-element om nested scroll-kaders te omzeilen */ body::before { content: ""; position: fixed; inset: 0; z-index: var(--z-base); pointer-events: none; background: linear-gradient(180deg, rgb(16 24 40 / 55%), rgb(16 24 40 / 72%)), radial-gradient(1200px 500px at 70% -10%, rgb(45 212 191 / 18%), transparent 60%), radial-gradient(1000px 420px at 12% 8%, rgb(59 130 246 / 16%), transparent 55%), url('/storage/images/background/modern-football-default.png'); background-size: auto,1200px 500px,1000px 420px,cover; background-repeat: no-repeat,no-repeat,no-repeat,no-repeat; background-position: center,70% -10%,12% 8%,center 25%; } /* Wanneer een pagina-specifieke achtergrond actief is: behoud alleen overlay-gradients (geen tweede foto) */ body.dt-has-page-bg::before { content: none; } /* Config-gedreven pagina-achtergrond: bakt gradients + foto in één laag */ .dt-page-bg { position: fixed; inset: 0; z-index: var(--z-base); pointer-events: none; background-image: linear-gradient(180deg, rgb(16 24 40 / 12%), rgb(16 24 40 / 22%)), radial-gradient(1200px 500px at 70% -10%, rgb(45 212 191 / 18%), transparent 60%), radial-gradient(1000px 420px at 12% 8%, rgb(59 130 246 / 16%), transparent 55%), var(--page-bg-image); background-size: auto, 1200px 500px, 1000px 420px, cover; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: center, 70% -10%, 12% 8%, center; filter: saturate(105%) contrast(102%); } body.dt-page--auth .dt-page-bg { background-image: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 40%, rgb(5 9 18 / 16%) 100%), var(--page-bg-image); background-size: auto, cover; background-position: center, center 35%; filter: saturate(110%) contrast(105%); } /* Content boven de achtergrondlaag plaatsen */ .dt-app { position: relative; z-index: var(--z-app-content); } /* Player Picker modal – glassy list style */ .dt-modal.is-open .dt-modal__dialog { background: linear-gradient(180deg, rgb(16 24 40 / 96%), rgb(16 24 40 / 92%)); border: 1px solid rgb(255 255 255 / 18%); border-radius: 16px; box-shadow: 0 20px 40px -20px rgb(0 0 0 / 70%); } .dt-modal__toolbar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; padding: 0 16px 8px; } .dt-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .dt-tab { background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 18%); color: var(--text); padding: 8px 12px; border-radius: 10px; font-size: var(--fs-13); cursor: pointer; } .dt-tab.is-active, .dt-tab:focus-visible { background: linear-gradient(180deg, rgb(45 212 191 / 20%), rgb(45 212 191 / 8%)); border-color: var(--accent); box-shadow: inset 0 0 0 2px rgb(0 229 164 / 28%), var(--dt-focus-ring); } /* Remove bullets and style list items like glass cards */ .dt-list { list-style: none; margin: 0; padding: 0; } .dt-list--select { padding: 8px; max-height: min(60vh, 560px); overflow: auto; } /* --- DT list items: compact global spacing --- Rely on parent .dt-list gap for vertical rhythm; avoid extra per-item margins to keep cards/lists consistent across pages (dashboard, modals, pickers). */ .dt-list__item { margin: 0; } .dt-list__btn { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 16%); color: var(--text); cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .06s ease; } .dt-list__btn:hover, .dt-list__btn:focus-visible { background: rgb(45 212 191 / 10%); border-color: rgb(45 212 191 / 55%); box-shadow: inset 0 0 0 1px rgb(45 212 191 / 45%); } .dt-list__btn:active { transform: translateY(1px); } .dt-list__primary { display: flex; flex-direction: column; gap: 4px; } .dt-list__title { font-weight: 600; color: var(--text); } .dt-list__subtitle { font-size: var(--fs-13); color: rgb(255 255 255 / 75%); } .dt-list__meta { font-size: var(--fs-13); color: rgb(255 255 255 / 85%); } /* New: Glass + accent list variants */ .dt-list.dt-list--glass .dt-list__item { list-style: none; } .dt-list.dt-list--glass .dt-list__btn { background: linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 4%)); border-color: rgb(255 255 255 / 22%); } .dt-list.dt-list--accent .dt-list__btn:hover, .dt-list.dt-list--accent .dt-list__btn:focus-visible { border-color: var(--accent); box-shadow: inset 0 0 0 2px rgb(0 229 164 / 28%); } /* ===================================================================== Player Matches Accordion (glassy variant) - Sluit visueel aan op .dt-list__btn glass cards - Alleen gebruikt op /matches pagina (class: .dt-player-acc) - Houdt spacing compact; verticale ritme via grid gap ===================================================================== */ .dt-tabs + .dt-tabs-panels { margin-top: var(--space-4); } /* Rebuilt accordion (matches page) */ .dt-player-acc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .dt-player-acc__item { margin: 0; padding: 0; border: 1px solid rgb(59 130 246 / 40%); border-radius: 14px; background: linear-gradient(180deg,rgb(255 255 255 / 12%),rgb(255 255 255 / 5%)), linear-gradient(135deg,rgb(59 130 246 / 28%),rgb(21 57 92 / 40%)); box-shadow: 0 4px 14px -6px rgb(0 0 0 / 55%); position: relative; } /* Trigger (kopregel) */ .dt-player-acc__trigger { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: transparent; border: 0; font: inherit; font-size: var(--fs-13); font-weight: var(--fw-semibold); cursor: pointer; color: var(--text); border-radius: 14px; } .dt-player-acc__trigger:focus-visible { outline: none; box-shadow: var(--dt-focus-ring); } .dt-player-acc__caret { flex: 0 0 20px; display: flex; justify-content: center; } /* Caret icon rotatie bij open */ .dt-player-acc__caret { display: inline-flex; transition: transform .25s ease; } .dt-player-acc__trigger[aria-expanded="true"] .dt-player-acc__caret { transform: rotate(180deg); } /* Panel content */ .dt-player-acc__panel { padding: 10px 16px 18px; border-top: 1px solid rgb(255 255 255 / 18%); background: linear-gradient(180deg,rgb(255 255 255 / 10%),rgb(255 255 255 / 3%)); border-radius: 0 0 14px 14px; animation: dt-acc-fade .25s ease; } .dt-player-acc__panel[hidden] { display: block; height: 0; padding: 0; overflow: hidden; border: 0; background: transparent; } @keyframes dt-acc-fade { from { opacity: 0; transform: translateY(-3px);} to { opacity: 1; transform: translateY(0);} } .dt-player-acc__panel > :first-child { margin-top: 0; } .dt-player-acc__panel > :last-child { margin-bottom: 0; } /* Loading + error states binnen panel (scoped minimal tweaks) */ .dt-player-matches__loading { display: flex; align-items: center; gap: 10px; font-size: var(--fs-13); color: var(--dt-text-muted); } .dt-player-matches__error { font-size: var(--fs-13); } /* Upcoming matches tabel kolommen tunen (meer ruimte voor clubnamen) */ .dt-player-matches { width: 100%; border-collapse: collapse; font-size: var(--fs-13); } .dt-player-matches th { text-align: left; font-weight: 600; padding: 4px 4px 6px; font-size: var(--fs-12); } .dt-player-matches td { padding: 4px 4px 6px; vertical-align: top; } .dt-player-match__teams { width: 55%; } /* extra ruimte voor clubnamen */ .dt-player-match__date { width: 25%; font-size: var(--fs-12); white-space: nowrap; } .dt-player-match__live { width: 20%; font-size: var(--fs-11); } .dt-player-matches tbody tr + tr td { border-top: 1px solid rgb(255 255 255 / 10%); } .dt-player-matches thead tr th + th, .dt-player-matches tbody tr td + td { padding-left: 10px; } .dt-player-matches .dt-icon { font-size: 0.9em; } @media (width <= 640px) { .dt-player-match__teams { width: auto;} .dt-player-match__date { width: auto;} .dt-player-match__live { width: auto;} } /* Responsiveness: kleinere padding op smalle schermen */ /* Modal footer button alignment */ .dt-modal__footer { display: flex; justify-content: flex-end; gap: 8px; } /* ===================================================================== COMPONENT – Invite form layout (responsive) Ensures each set is inline on desktop (2 cols) and stacked on mobile (1 col). 2025-08-27 ===================================================================== */ .dt-invite-field-group { display: grid; grid-template-columns: 1fr; /* mobile: stack fields */ gap: var(--space-3); width: 100%; align-items: start; } @media (width >= 768px) { .dt-invite-field-group { grid-template-columns: 1fr 1fr;} /* tablet/desktop: side-by-side */ } /* Layout: laat body scrollen op mobiel; vermijd geforceerde 100% height die iOS overscroll blokkeert */ .dt-app { min-height: 100dvh; display: flex; flex-direction: column; } .dt-app { max-width: 100%; overflow-x: hidden; } /* prevent accidental horizontal scroll */ /* Skip link (WCAG) – zichtbaar bij focus, bovenaan de pagina */ .dt-skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--accent-text-dark); padding: 8px 12px; border-radius: 8px; box-shadow: 0 2px 8px rgb(0 0 0 / 40%); z-index: var(--z-skip-link); } .dt-skip-link:focus,.dt-skip-link:focus-visible { left: 12px; top: 12px; outline: none; box-shadow: var(--dt-focus-ring); } /* HEADER (persistent, geen fixed nodig omdat main intern scrolt) */ .dt-site-header { flex: 0 0 auto; background: rgb(16 24 40 / 90%); /* 10% transparantie */ border-bottom: 1px solid rgb(255 255 255 / 8%); position: sticky; top: 0; left: 0; right: 0; display: flex; flex-direction: column; z-index: var(--z-header); } /* sticky bovenaan voor desktop + mobile */ .dt-page--minimal-header .dt-game-header__kpis { display: none; } @media (width >=901px) { /* Minimal desktop header on auth/onboarding pages: keep only language control. */ .dt-page--minimal-header .dt-game-header { background: transparent; border: 0; box-shadow: none; } .dt-page--minimal-header .dt-game-header__top { background: transparent; border: 0; min-height: auto; } .dt-page--minimal-header .dt-game-header__top-inner { display: flex; justify-content: flex-end; align-items: center; padding-top: 10px; padding-bottom: 6px; } .dt-page--minimal-header .dt-game-header__logo, .dt-page--minimal-header .dt-game-header__nav, .dt-page--minimal-header .dt-desktop-team { display: none !important; } .dt-page--minimal-header .dt-game-header__menu-cluster { margin-left: auto; display: flex; justify-content: flex-end; width: auto; } .dt-page--minimal-header .dt-game-header__control-group { margin-left: auto; } .dt-page--minimal-header .dt-lang-trigger { min-height: 52px; padding: 0 18px; border-radius: 18px; border-color: rgb(0 229 164 / 52%); background: linear-gradient(180deg, rgb(5 15 30 / 92%), rgb(7 18 34 / 82%)); box-shadow: 0 0 0 1px rgb(0 229 164 / 20%), 0 14px 28px -14px rgb(0 0 0 / 75%); } .dt-page--minimal-header .dt-lang-trigger:hover, .dt-page--minimal-header .dt-lang-trigger:focus-visible { border-color: rgb(0 229 164 / 72%); box-shadow: 0 0 0 1px rgb(0 229 164 / 35%), 0 0 22px -10px rgb(0 229 164 / 65%); } .dt-page--minimal-header .dt-lang-trigger__label { display: inline-flex; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .12em; color: rgb(241 245 249 / 96%); } } .dt-site-header--mini { height: calc(var(--header-mini-h) + 52px); } /* iets hoger voor nav inclusion */ .dt-site-header--full { height: calc(var(--header-mini-h) + var(--header-stack-extra)); } .dt-site-header__mini { height: var(--header-mini-h); display: flex; align-items: center; gap: 16px; padding: 0 20px; } /* KPI blok onder de primaire balk (vak 2) */ /* KPI + Acties blok (verticale stapeling) */ .dt-site-header__kpis { padding: 6px 0 30px; display: flex; flex-direction: column; gap: 8px; position: relative; z-index: var(--z-overlay-high); } /* extra bodemruimte zodat tooltip onder KPI niet over nav valt */ /* Simple responsive grid (utility) */ .dt-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } .dt-row--gap { gap: var(--space-4); } /* Small grid display helper */ .dt-d-grid { display: grid; } @media (width >= 768px) { .dt-row { grid-template-columns: repeat(2, 1fr);} } @media (width >= 1024px) { .dt-col-lg-4 { grid-column: span 1;} .dt-col-span-2 { grid-column: span 2; } .dt-row { grid-template-columns: repeat(3, 1fr);} } /* Checkout grid override: force two equal columns (50/50) across desktop Context: default .dt-row switches to 3 columns ≥1024px, which made checkout look 2/3. This scoped helper keeps exactly two columns for the checkout layout. */ .dt-row.checkout-grid--two { grid-template-columns: 1fr; } @media (width >= 768px) { .dt-row.checkout-grid--two { grid-template-columns: repeat(2, 1fr);} } @media (width >= 1024px) { .dt-row.checkout-grid--two { grid-template-columns: repeat(2, 1fr);} } .dt-site-header__kpis .dt-header-kpis { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 14px; } /* Header KPI items (scoped: alleen in header, niet in mobiel menu) */ .dt-site-header__kpis .dt-header-kpi { display: inline-flex; align-items: center; gap: 10px; padding-left: 14px; border-radius: 14px; background: radial-gradient(120% 100% at 0% 0%, rgb(0 229 164 / 18%), transparent 60%), linear-gradient(180deg,rgb(255 255 255 / 12%),rgb(255 255 255 / 5%)); border: 1px solid rgb(255 255 255 / 20%); color: var(--text); font-weight: 500; min-height: 30px; box-shadow: 0 4px 12px -6px rgb(0 0 0 / 55%); } /* kleine hover shimmer zonder maatwijziging */ .dt-site-header__kpis .dt-header-kpi:hover { border-color: rgb(255 255 255 / 28%); } /* tooltips (data-tooltip) — place below KPI and keep mobile-safe */ .dt-site-header__kpis .dt-header-kpi[data-tooltip] { position: relative; } .dt-site-header__kpis .dt-header-kpi[data-tooltip]:hover, .dt-site-header__kpis .dt-header-kpi[data-tooltip]:focus-visible { z-index: var(--z-overlay-higher); } .dt-site-header__kpis .dt-header-kpi[data-tooltip]:hover::after, .dt-site-header__kpis .dt-header-kpi[data-tooltip]:focus-visible::after { content: attr(data-tooltip); position: absolute; left: 50%; top: 100%; bottom: auto; /* reset globale bottom:100% */ margin-top: 12px; margin-bottom: 0; /* reset globale margin-bottom */ transform: translateX(-50%); background: rgb(9 12 20 / 98%); color: #fff; border: 1px solid rgb(255 255 255 / 28%); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.3; white-space: normal; width: max-content; /* groeit met tekst */ min-width: 260px; /* voorkom te smalle box bij korte labels */ max-width: min(380px, calc(100vw - 24px)); /* cap binnen viewport */ text-align: left; overflow-wrap: break-word; display: block; /* forceer block voor stabiele lay-out */ box-sizing: border-box; pointer-events: auto; /* blokkeer events voor elementen eronder (nav) zodat geen overlap-tooltips verschijnen */ z-index: var(--z-tooltip-high); box-shadow: 0 8px 18px -8px rgb(0 0 0 / 60%); } .dt-site-header__kpis .dt-header-kpi[data-tooltip]:hover::before, .dt-site-header__kpis .dt-header-kpi[data-tooltip]:focus-visible::before { content: ""; position: absolute; left: 50%; top: 100%; bottom: auto; /* reset globale bottom:100% */ transform: translate(-50%, -50%) rotate(45deg); width: 12px; height: 12px; background: rgb(9 12 20 / 98%); border: 1px solid rgb(255 255 255 / 28%); border-left: none; border-top: none; z-index: var(--z-tooltip-arrow); box-shadow: 0 2px 6px -2px rgb(0 0 0 / 50%); pointer-events: auto; } @media (width <= 420px) { .dt-pitch__player { width: 60px;} /* Vergroot shirt op kleinste breakpoint voor leesbaarheid */ .dt-player__placeholder-img { width: 28px; height: auto;} /* +1px nummer t.o.v. vorige waarde */ .dt-player__num { font-size: 11.5px; line-height: 1;} } @media (width <= 420px) { .dt-site-header__kpis .dt-header-kpi[data-tooltip]:hover::after, .dt-site-header__kpis .dt-header-kpi[data-tooltip]:focus-visible::after { transform: translateX(-50%); width: auto; /* op mobiel geen max-content-forcering */ min-width: 0; /* laat smal worden indien nodig */ max-width: calc(100vw - 16px); margin-top: 10px; padding: 8px 10px;} .dt-site-header__kpis .dt-header-kpi[data-tooltip]:hover::before, .dt-site-header__kpis .dt-header-kpi[data-tooltip]:focus-visible::before { left: 50%; transform: translate(-50%, -50%) rotate(45deg);} } .dt-site-header__kpis .dt-header-kpi i { font-size: var(--fs-xs); } /* geen hover/focus interactiviteit nodig voor informatieve KPI’s */ /* Team switcher select in KPI */ .dt-site-header__kpis .dt-header-kpi.dt-header-kpi--team { display: flex; gap: 10px; } .dt-site-header__kpis .dt-header-kpi.dt-header-kpi--team .dt-team-switch-form select { background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 22%); color: #fff; border-radius: 10px; padding: 6px 8px; font-size: var(--fs-xs); } .dt-site-header__kpis .dt-header-kpi.dt-header-kpi--team .dt-team-switch-form select:focus { outline: none; border-color: var(--accent); box-shadow: var(--dt-focus-ring); } /* account blok vervallen (actieknoppen geïntegreerd in nav) */ /* Scoped compact style voor KPI team-chip trigger (desktop) Doel: hoogte <= 30px zodat KPI-rij niet groeit. Opmerking: uitsluitend in header KPI-context, geen impact op language popover elders. */ .dt-site-header__kpis .dt-header-kpi--team .dt-lang-trigger { height: 28px; padding: 0 10px; border-radius: 10px; gap: 6px; font-size: var(--fs-13); } .dt-site-header__kpis .dt-header-kpi--team .dt-lang-trigger i { font-size: 14px; } .dt-site-header__kpis .dt-header-kpi--team .dt-lang-trigger .dt-team-trigger__icon { display: inline-block; font-size: 14px; color: rgb(255 255 255 / 95%); } .dt-site-header__kpis .dt-header-kpi--team .dt-team-trigger__label { max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Navigatie in compacte header */ .dt-site-header__nav { margin-top: 4px; } /* minder verticale ruimte */ .dt-site-header__nav .dt-nav__list { background: linear-gradient(180deg,rgb(255 255 255 / 14%),rgb(255 255 255 / 4%)); border: 1px solid rgb(255 255 255 / 22%); backdrop-filter: blur(18px) saturate(155%); padding: 4px 10px; border-radius: var(--nav-radius,26px); display: flex; gap: 4px; list-style: none; margin: 0; flex-wrap: wrap; scroll-behavior: smooth; } /* glass effect hersteld */ .dt-site-header__nav .dt-nav__list a { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px 4px; text-decoration: none; color: var(--text); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .5px; border-radius: 20px; transition: background .2s,color .2s; min-width: 66px; position: relative; } /* compacter item */ .dt-site-header__nav .dt-nav__list a i { font-size: 16px; } /* iets kleiner */ .dt-site-header__nav .dt-nav__list a:hover,.dt-site-header__nav .dt-nav__list a:focus { background: rgb(255 255 255 / 16%); outline: none; } .dt-site-header__nav .dt-nav__list a.is-active { background: linear-gradient(180deg,var(--accent),#02c996); color: var(--accent-text-dark); box-shadow: 0 4px 12px -4px rgb(0 229 164 / 50%); } /* Active underline indicator (extra visuele houvast) */ .dt-site-header__nav .dt-nav__list a.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 3px; border-radius: 3px; background: linear-gradient(90deg,var(--accent),var(--gold)); box-shadow: 0 0 4px -1px rgb(0 229 164 / 55%); } /* Gold icon hover/focus glow */ .dt-site-header__nav .dt-nav__list a:hover i.text-gold, .dt-site-header__nav .dt-nav__list a:focus-visible i.text-gold { text-shadow: 0 0 4px rgb(212 175 55 / 75%),0 0 2px rgb(212 175 55 / 95%); } /* Scrollbare nav op small / medium breedtes (voorkomt wrapping overflow) */ @media (width <=1160px) { .dt-site-header__nav { overflow: hidden;} .dt-site-header__nav .dt-nav__list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; gap: 6px;} .dt-site-header__nav .dt-nav__list > li { scroll-snap-align: start;} .dt-site-header__nav .dt-nav__list::-webkit-scrollbar { display: none;} } /* Language select in nav – pill style */ /* Nav language select verwijderd (nu terug in mini bar) */ /* ===================== MOBILE MENU: top bar + panel ==================== */ @media (width <=900px) { .dt-mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; height: 70px; background: #101828; border-bottom: 1px solid rgb(255 255 255 / 10%);} /* space-between zodat items op één lijn passen */ .dt-mobile-bar__logo img,.dt-mobile-bar__logo svg { height: 60px; width: 60px; max-width: none; object-fit: cover; display: block; border-radius: 50%; aspect-ratio: 1/1;} .dt-mobile-bar__toggle { background: var(--panel-2); border: 1px solid rgb(255 255 255 / 22%); width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); cursor: pointer; transition: background .2s,border-color .2s;} /* compacter zodat logo/taal beter centreert */ .dt-mobile-bar__toggle:hover,.dt-mobile-bar__toggle:focus { background: #1e2a3c; border-color: var(--accent); outline: none;} /* Bewust: desktop logo verbergen op mobiel — !important voor specificity */ .dt-desktop-logo { display: none !important;} .dt-mobile-bar__team select { background: rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 22%); color: #fff; padding: 6px 8px; border-radius: 10px; font-size: var(--fs-xs); max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .dt-mobile-bar__lang { margin-left: auto; display: flex; align-items: center;} .dt-mobile-bar__lang .dt-lang-trigger { height: 42px; padding: 0 12px; border-radius: 14px; gap: 6px; font-size: var(--fs-xs);} /* legacy .dt-lang-flag mobile size removed; PNG variant uses .dt-lang-flag-img */ /* Verberg desktop KPI/nav secties op mobiel zodra mobiele bar actief is */ /* Bewust: !important om desktop varianten uit beeld te houden op mobiel */ .dt-site-header__kpis,.dt-site-header__nav { display: none !important;} /* Mobile menu panel shell */ .dt-mobile-menu { position: fixed; inset: 70px 0 0; z-index: var(--z-mobile-menu); display: flex; flex-direction: column; pointer-events: none;} /* top afgestemd op nieuwe mobiele bar */ /* BUG-015: het binnenpaneel krijgt een hogere z-index dan de backdrop zodat blur nooit op content toegepast wordt */ .dt-mobile-menu__inner { background: #101828; /* var(--bg) */ backdrop-filter: none; border-top: 1px solid rgb(255 255 255 / 12%); padding: 18px 16px 70px; overflow-y: auto; flex: 1; transform: translateY(-12px); opacity: 0; transition: opacity .22s ease, transform .22s ease; pointer-events: auto; position: relative; z-index: var(--z-mobile-menu-inner);} /* boven backdrop */ .dt-mobile-menu.is-open .dt-mobile-menu__inner { transform: translateY(0); opacity: 1;} /* Backdrop onder het paneel binnen dezelfde stacking context */ .dt-mobile-menu__backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 45%); backdrop-filter: blur(2px); opacity: 0; transition: opacity .25s ease; pointer-events: none; border: 0; padding: 0; z-index: var(--z-mobile-backdrop);} /* backdrop onder panel, boven content */ .dt-mobile-menu.is-open .dt-mobile-menu__backdrop { opacity: 1; pointer-events: auto;} .dt-mobile-menu__kpis { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 12px; margin-bottom: 20px;} .dt-mobile-menu__nav-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap: 12px;} .dt-mobile-menu__nav-list a,.dt-mobile-menu__nav-list .dt-nav-btn { background: linear-gradient(180deg,rgb(255 255 255 / 16%),rgb(255 255 255 / 5%)); border: 1px solid rgb(255 255 255 / 20%); border-radius: 18px; padding: 14px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--text); font-size: var(--fs-xs); font-weight: var(--fw-semibold); position: relative; min-height: 92px;} /* glass/gradient hersteld */ .dt-mobile-menu__nav-list a i,.dt-mobile-menu__nav-list .dt-nav-btn i { font-size: 20px;} .dt-mobile-menu__nav-list a:hover,.dt-mobile-menu__nav-list a:focus, .dt-mobile-menu__nav-list .dt-nav-btn:hover,.dt-mobile-menu__nav-list .dt-nav-btn:focus { background: rgb(255 255 255 / 22%); outline: none;} .dt-mobile-menu__nav-list a:focus-visible, .dt-mobile-menu__nav-list .dt-nav-btn:focus-visible { box-shadow: var(--dt-focus-ring);} .dt-mobile-menu__nav-list a.is-active { background: linear-gradient(180deg,var(--accent),#02c996); color: var(--accent-text-dark); box-shadow: 0 6px 14px -4px rgb(0 229 164 / 55%);} .dt-mobile-menu__lang { margin-top: 28px; display: flex; justify-content: center;} body.is-mobmenu-open .dt-site-main { overflow: hidden;} } /* Desktop: verberg mobiele bar boven breakpoint zodat header niet inzakt */ @media (width >=901px) { /* Bewust: desktop lockout van mobiele UI — !important om mobiele regels te overrulen */ .dt-mobile-bar { display: none !important;} .dt-mobile-menu { display: none !important;} .dt-bottom-nav { display: none !important;} } /* Persistente mobiele bottom nav */ @media (width <=900px) { .dt-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header); background: #0f172a; /* iets donkerder voor AA */ border-top: 1px solid rgb(255 255 255 / 12%); box-shadow: 0 -6px 18px -8px rgb(0 0 0 / 55%); padding-bottom: env(safe-area-inset-bottom, 0);} .dt-bottom-nav .dt-navbar__nav { display: grid; grid-template-columns: repeat(5,1fr); gap: 0;} .dt-bottom-nav .dt-nav__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 6px 12px; color: var(--text); text-decoration: none; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); opacity: .95;} .dt-bottom-nav .dt-nav__link i { font-size: 18px;} .dt-bottom-nav .dt-nav__link:focus-visible { outline: none; box-shadow: var(--dt-focus-ring);} .dt-bottom-nav .dt-nav__link.is-active { color: var(--accent-text-dark); background: linear-gradient(180deg,var(--accent),#02c996);} body.is-mobmenu-open .dt-bottom-nav { display: none;} /* verbergen wanneer off-canvas open is */ /* ruimte onderaan main zodat content niet achter nav valt */ .dt-site-main { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0));} } /* Badge voor berichten */ .dt-nav-badge { position: absolute; top: 2px; right: 6px; background: var(--danger); color: #fff; font-size: 9px; font-weight: var(--fw-bold); line-height: 1; padding: 2px 5px 3px; border-radius: 12px; box-shadow: 0 2px 6px -2px rgb(0 0 0 / 55%); margin: 0; letter-spacing: .5px; } /* Logout button gestyled als nav item */ .dt-nav-logout-form { display: inline; } .dt-nav-logout-form .dt-nav-btn { background: none; border: 0; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text); font: inherit; cursor: pointer; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .5px; border-radius: 22px; min-width: 70px; padding: 8px 12px 6px; } .dt-nav-logout-form .dt-nav-btn i { font-size: 17px; } .dt-nav-logout-form .dt-nav-btn:hover,.dt-nav-logout-form .dt-nav-btn:focus { background: rgb(255 255 255 / 16%); outline: none; } /* ====================== BADGES (compact, pill) ====================== */ .dt-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--radius-pill); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .3px; line-height: 1; background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 18%); color: var(--text); } .dt-badge i { font-size: .95em; line-height: 1; } .dt-badge--sm { padding: 2px 6px; font-size: 10.5px; } .dt-badge--lg { padding: 5px 10px; font-size: var(--fs-xs); } /* Tone variants */ .dt-badge--accent { background: linear-gradient(180deg, rgb(0 229 164 / 22%), rgb(0 229 164 / 10%)); border-color: rgb(0 229 164 / 45%); color: var(--accent-text-dark); } .dt-badge--success { background: linear-gradient(180deg, rgb(16 185 129 / 22%), rgb(16 185 129 / 10%)); border-color: rgb(16 185 129 / 45%); } .dt-badge--warning { background: linear-gradient(180deg, rgb(245 158 11 / 28%), rgb(245 158 11 / 12%)); border-color: rgb(245 158 11 / 48%); } .dt-badge--danger { background: linear-gradient(180deg, rgb(239 68 68 / 28%), rgb(239 68 68 / 12%)); border-color: rgb(239 68 68 / 50%); } .dt-badge--info { background: linear-gradient(180deg, rgb(59 130 246 / 26%), rgb(59 130 246 / 12%)); border-color: rgb(59 130 246 / 46%); } .dt-badge--secondary { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 22%); } .dt-badge--subtle { background: rgb(255 255 255 / 6%); border-color: rgb(255 255 255 / 16%); font-weight: var(--fw-semibold); } .dt-badge--fm { background: linear-gradient(180deg, rgb(234 179 8 / 30%), rgb(234 179 8 / 12%)); border-color: rgb(234 179 8 / 50%); color: #fbbf24; } .dt-badge--stars { background: linear-gradient(180deg, rgb(168 85 247 / 28%), rgb(168 85 247 / 12%)); border-color: rgb(168 85 247 / 48%); color: #c084fc; } /* ====================== FORM BADGES (W/D/L chips) ====================== */ .dt-form-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .dt-form-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .3px; line-height: 1; text-transform: uppercase; border: 1px solid transparent; } .dt-form-badge--win { background: linear-gradient(180deg, rgb(16 185 129 / 32%), rgb(16 185 129 / 16%)); border-color: rgb(16 185 129 / 55%); color: #34d399; } .dt-form-badge--draw { background: linear-gradient(180deg, rgb(251 191 36 / 32%), rgb(251 191 36 / 16%)); border-color: rgb(251 191 36 / 55%); color: #fbbf24; } .dt-form-badge--loss { background: linear-gradient(180deg, rgb(239 68 68 / 32%), rgb(239 68 68 / 16%)); border-color: rgb(239 68 68 / 55%); color: #f87171; } /* Actie knoppen styling hergebruiken maar iets compacter in mini context */ .dt-site-header__account .dt-action-btn { position: relative; width: 50px; height: 50px; border-radius: 16px; background: linear-gradient(180deg,rgb(255 255 255 / 20%),rgb(255 255 255 / 7%)); border: 1px solid rgb(255 255 255 / 25%); backdrop-filter: blur(14px) saturate(150%); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); font-size: 20px; margin-right: 10px; transition: background .2s,border-color .2s,transform .2s; } .dt-site-header__account .dt-action-btn:hover,.dt-site-header__account .dt-action-btn:focus { background: linear-gradient(180deg,rgb(255 255 255 / 30%),rgb(255 255 255 / 12%)); border-color: var(--accent); outline: none; } .dt-site-header__account .dt-action-badge { position: absolute; top: 4px; right: 6px; background: var(--danger); color: #fff; font-size: 10px; font-weight: var(--fw-bold); line-height: 1; padding: 3px 5px; border-radius: 10px; box-shadow: 0 2px 6px -2px rgb(0 0 0 / 50%); } .dt-site-header__account form { margin: 0; } @media (width <=760px) { .dt-site-header__kpis .dt-header-kpis { grid-template-columns: repeat(2,1fr);} } .dt-site-header__mini .dt-site-header__logo { width: 108px; height: auto; display: block; } .dt-site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--space-4); } /* gecentreerde inhoud */ .dt-site-header__logo { width: 80px; height: auto; display: block; } /* .dt-lang legacy select verwijderd – taalkeuze nu via popover trigger */ /* Desktop language popover default hidden onder breakpoint */ .dt-desktop-lang { display: none; } @media (width >=901px) { .dt-desktop-lang { margin-left: auto; display: flex; align-items: center;} } /* TEXT COLOR UTILITIES (dt- prefix; aliases deprecated) */ .dt-lang-trigger__label { display: none; } .dt-text-gold { color: var(--gold); } /* canonical */ .dt-text-yellow { color: var(--yellow); } /* canonical */ .dt-text-orange { color: var(--orange); } /* canonical */ /* Backwards-compat aliases (deprecated) */ .dt-text-danger { color: var(--danger); } /* utility: red text for required asterisk */ .dt-text-red { color: var(--danger); } /* canonical red text */ .text-gold { color: var(--gold); } /* alias → gebruik .dt-text-gold voortaan */ .text-yellow { color: var(--yellow); } /* alias → gebruik .dt-text-yellow */ .text-orange { color: var(--orange); } /* alias → gebruik .dt-text-orange */ /* ===== Language popover (Option A) ===== */ .dt-lang--popover { position: relative; } .dt-lang-trigger { background: linear-gradient(180deg,rgb(255 255 255 / 16%),rgb(255 255 255 / 5%)); border: 1px solid rgb(255 255 255 / 22%); height: 46px; padding: 0 16px; border-radius: 16px; display: inline-flex; align-items: center; gap: 10px; color: var(--text); cursor: pointer; font: inherit; font-size: var(--fs-13); position: relative; z-index: var(--z-lang-trigger); } .dt-lang-trigger:hover,.dt-lang-trigger:focus { background: linear-gradient(180deg,rgb(255 255 255 / 26%),rgb(255 255 255 / 10%)); outline: none; border-color: var(--accent); } .dt-lang-trigger:focus-visible { box-shadow: var(--dt-focus-ring); } /* Legacy CSS-drawn language flag removed; all flags now use PNG via .dt-lang-flag-img */ /* PNG flag image variant (when using /images/flags/*.png in language selector) */ .dt-lang-flag-img { width: 20px; height: 14px; display: inline-block; border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / 40%),0 1px 2px rgb(0 0 0 / 60%); object-fit: cover; } /* Match mobile trigger size */ .dt-mobile-bar__lang .dt-lang-flag-img { width: 18px; height: 13px; } /* Active option ring (mirror of .dt-lang-flag rule) */ .dt-lang-option.is-active .dt-lang-flag-img { box-shadow: 0 0 0 1px rgb(0 0 0 / 40%),0 0 0 3px rgb(0 229 164 / 45%); } /* Legacy CSS-drawn language flags removed; we now use PNGs via .dt-lang-flag-img */ .dt-lang-popover { position: absolute; top: calc(100% + 10px); right: 0; min-width: 220px; max-width: min(320px, calc(100vw - 24px)); /* SOLID by default (FROZEN): leesbaarheid boven glass */ background: #101828 !important; /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid rgb(255 255 255 / 22%); padding: 12px; border-radius: 16px; box-shadow: 0 10px 28px -8px rgb(0 0 0 / 65%); animation: dtPopSlide .28s cubic-bezier(.16,.82,.25,1) both; z-index: var(--z-popover); } .dt-select__dropdown { z-index: var(--z-dropdown); } .dt-lang-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .dt-lang-option { width: 100%; display: flex; align-items: center; gap: 10px; background: rgb(255 255 255 / 12%); border: 1px solid rgb(255 255 255 / 22%); color: var(--text); padding: 6px 10px; border-radius: 10px; font-size: var(--fs-13); cursor: pointer; } .dt-lang-option:hover,.dt-lang-option:focus { background: rgb(255 255 255 / 22%); outline: none; border-color: var(--accent); } .dt-lang-option.is-active { background: linear-gradient(180deg,var(--accent),#02c996); color: var(--accent-text-dark); } /* Legacy active ring for .dt-lang-flag removed; PNG variant has its own active ring */ /* Note: .dt-lang-option.is-active .dt-lang-flag kept for backward-compat; PNG path uses .dt-lang-flag-img above */ @keyframes dtPopSlide { from { opacity: 0; transform: translateY(-6px) scale(.96);} to { opacity: 1; transform: translateY(0) scale(1);} } /* Flag macro styling */ .dt-lang-popover .dt-lang-option { background: var(--panel-2, #121c2b); border: 1px solid var(--dt-border, rgb(255 255 255 / 15%)); } .dt-lang-popover .dt-lang-option:hover, .dt-lang-popover .dt-lang-option:focus-visible { background: #1e2a3c; border-color: rgb(45 212 191 / 65%); box-shadow: 0 0 0 1px rgb(45 212 191 / 55%) inset; outline: none; } .dt-popover--solid { /* FROZEN: Solid popover variant — leesbaarheid boven blur/transparantie Wijzig deze regels NIET zonder de bugkaart te heropenen en visueel te valideren. */ background: #101828 !important; /* vaste paneelkleur */ /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; /* Houd border/radius/shadow consistent met design tokens */ border: 1px solid rgb(255 255 255 / 22%); border-radius: 14px; box-shadow: 0 10px 28px -8px rgb(0 0 0 / 65%); z-index: 9999 !important; /* boven alles */ } .dt-flag { display: inline-flex; align-items: center; justify-content: center; line-height: 1; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgb(0 0 0 / 40%),0 1px 2px rgb(0 0 0 / 60%); } .dt-flag img { display: block; width: 100%; height: 100%; object-fit: cover; } .dt-flag--sm { width: 16px; height: 12px; } .dt-flag--md { width: 20px; height: 14px; } .dt-flag--lg { width: 28px; height: 20px; } /* Mobile menu footer links */ .dt-mobile-menu__footer-links { margin-top: 34px; font-size: var(--fs-2xs); opacity: .9; } .dt-mobile-menu__footer-links .dt-footer-links-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: center; } .dt-mobile-menu__footer-links a { color: var(--text); text-decoration: none; } .dt-mobile-menu__footer-links a:hover,.dt-mobile-menu__footer-links a:focus { text-decoration: underline; } .dt-footer-links-copy { opacity: .6; } @media (width <=900px) { .dt-site-footer__links { display: none;} /* desktop only; mobiele versie nu in menu */ } /* Utility voor verbergen op mobiel expliciet herbruikbaar */ @media (width <=900px) { /* Bewust util: element verbergen op mobiel — !important kan componentregels overrulen */ .dt-hide-mobile { display: none !important;} } /* CONTENT (enige scroll-container) */ /* Main scroll container: fallback naar body scroll op kleine schermen als nested scroll issues ontstaan */ .dt-site-main { flex: 1 1 auto; overflow: visible; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; } @media (width <=900px) { /* Laat zowel body als main scrollen; verwijder nested lock */ body { overflow: auto;} body:not(.is-mobmenu-open) .dt-site-main { overflow: visible;} } /* Mobiel: alleen body locken wanneer menu open (doen we met body.is-mobmenu-open) */ @media (width <=900px) { .dt-site-main { overflow-y: auto;} } .dt-main { padding-block: var(--space-4); } /* verticale padding binnen main */ /* FOOTER (persistent onderaan, geen fixed) */ .dt-site-footer { flex: 0 0 auto; font-size: var(--fs-xs); line-height: 1.2; color: #fff; margin-top: auto; position: relative; z-index: var(--z-base); } /* default: niet sticky (mobiel) */ @media (width >=901px) { .dt-site-footer { position: sticky; bottom: 0;} /* desktop sticky */ } .dt-site-footer__ads { height: var(--footer-ads-h); display: flex; align-items: center; background: rgb(16 24 40 / 92%); border-top: 1px solid rgb(255 255 255 / 10%); } /* container binnenin centreert */ .dt-site-footer__links { height: var(--footer-links-h); display: flex; align-items: center; background: rgb(22 34 52 / 90%); /* 10% transparantie */ border-top: 1px solid rgb(255 255 255 / 8%); } /* container binnenin centreert */ .dt-site-footer__links ul { margin: 0; padding: 0; list-style: none; display: flex; gap: var(--space-4); flex-wrap: wrap; } .dt-site-footer__links a { color: #fff; text-decoration: none; font-size: var(--fs-xs); } .dt-site-footer__links a:hover,.dt-site-footer__links a:focus { text-decoration: underline; } /* UTIL */ /* Bewust a11y helper: !important op position voorkomt overschrijving door layout-helpers */ @media (width >=901px) { .dt-page--auth .dt-site-footer { position: static; } .dt-page--auth .dt-site-footer__links.dt-hide-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header); } .dt-page--auth .dt-site-main { padding-bottom: var(--footer-links-h); } } .dt-sr-only { position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* CONTAINER – gedeelde centrale breedte */ .dt-container { width: min(98%, var(--content-max)); margin-inline: auto; padding-inline: var(--space-4); } /* 98% fluid tot max */ /* Container specifieke layout hooks */ .dt-site-header .dt-container { height: 100%; } .dt-site-footer__ads .dt-container, .dt-site-footer__links .dt-container { display: flex; align-items: center; justify-content: center; height: 100%; } /* width volgt nu globale .dt-container (min(98%, max)) */ @supports (width: min(100%, 100%)) { /* future-proof guard; min() breed ondersteund maar voor zekerheid */ .dt-container { width: min(98%, var(--content-max));} } /* ===================================================================== BUTTONS — Outline / Glow system (v3) Kleur gestuurd via --_c / --_cr / --_cg / --_cb per variant. Varianten: primary (groen), secondary (grijs), danger (rood), ghost/outline/subtle (wit), yellow (geel), blue (blauw) ===================================================================== */ .dt-btn { --_c: #00e5a4; --_cr: 0; --_cg: 229; --_cb: 164; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1.5px solid rgb(var(--_cr) var(--_cg) var(--_cb) / 45%); border-radius: 999px; background: transparent; color: var(--_c); font-weight: var(--fw-semibold); font-size: var(--fs-sm); line-height: 1; text-decoration: none; cursor: pointer; user-select: none; overflow: hidden; position: relative; min-height: 40px; transition: background .2s, border-color .2s, box-shadow .2s, transform .18s; } .dt-btn:hover, .dt-btn:focus-visible { background: rgb(var(--_cr) var(--_cg) var(--_cb) / 10%); border-color: var(--_c); box-shadow: 0 0 20px -6px rgb(var(--_cr) var(--_cg) var(--_cb) / 40%); } .dt-btn:focus-visible { outline: none; } .dt-btn:active { transform: translateY(1px); } .dt-btn[disabled], .dt-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } /* Busy state: inline spinner op knoppen zonder layout shift */ .dt-btn.is-busy { cursor: progress; } .dt-btn.is-busy::before { content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentcolor; border-right-color: transparent; opacity: .95; animation: dtSpin .9s linear infinite; } .dt-btn.is-busy .dt-icon { opacity: 0; } /* Icoon — altijd geel; specifieke varianten kunnen dit overschrijven */ .dt-btn .dt-icon { color: var(--dt-yellow, #fbbf24); } /* Button icon-blok patroon: icon links in vakje voor standaard en lg buttons; xs/sm blijven plain. */ .dt-btn:not(.dt-btn--sm, .dt-btn--xs, .dt-btn--icon):has(.dt-icon:first-child) { justify-content: flex-start; padding-left: 0; } .dt-btn:not(.dt-btn--sm, .dt-btn--xs, .dt-btn--icon) .dt-icon:first-child { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; position: relative; isolation: isolate; width: 46px; padding-left: 2px; border-radius: 999px 0 0 999px; font-size: 16px; background: linear-gradient(180deg, rgb(var(--_cr) var(--_cg) var(--_cb) / 22%) 0%, rgb(var(--_cr) var(--_cg) var(--_cb) / 8%) 100%); border-right: 1px solid rgb(var(--_cr) var(--_cg) var(--_cb) / 20%); margin-inline-end: 10px; } /* Voetbal hex-patroon via ::after (::before is gereserveerd door FontAwesome voor het icon-glyph) */ .dt-btn:not(.dt-btn--sm, .dt-btn--xs, .dt-btn--icon) .dt-icon:first-child::after { content: ''; position: absolute; inset: 0; z-index: -1; background-color: rgb(var(--_cr) var(--_cg) var(--_cb) / 18%); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='27.712'%3E%3Cpolygon points='16,6.928 12,0 4,0 0,6.928 4,13.856 12,13.856' fill='none' stroke='black' stroke-width='1'/%3E%3Cpolygon points='28,13.856 24,6.928 16,6.928 12,13.856 16,20.784 24,20.784' fill='none' stroke='black' stroke-width='1'/%3E%3Cpolygon points='16,20.784 12,13.856 4,13.856 0,20.784 4,27.712 12,27.712' fill='none' stroke='black' stroke-width='1'/%3E%3Cpolygon points='4,13.856 0,6.928 -8,6.928 -12,13.856 -8,20.784 0,20.784' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E"); mask-size: 24px 27.712px; mask-repeat: repeat; pointer-events: none; } /* ── Kleur-varianten ────────────────────────────────────────────────── */ /* primary = groen (default) */ .dt-btn--primary { --_c: #00e5a4; --_cr: 0; --_cg: 229; --_cb: 164; } /* secondary = grijs */ .dt-btn--secondary { --_c: #94a3b8; --_cr: 148; --_cg: 163; --_cb: 184; } /* gold = goud (shop/cart knoppen) */ .dt-btn--gold { --_c: #d4af37; --_cr: 212; --_cg: 175; --_cb: 55; } .dt-btn--secondary .dt-icon { color: rgb(200 220 255 / 65%); } /* danger = rood */ .dt-btn--danger { --_c: #ef4444; --_cr: 239; --_cg: 68; --_cb: 68; } /* ghost = subtiel wit; geen kleur-glow */ .dt-btn--ghost { --_c: var(--dt-text, #e2e8f0); --_cr: 226; --_cg: 232; --_cb: 240; border-color: rgb(255 255 255 / 18%); } .dt-btn--ghost:hover, .dt-btn--ghost:focus-visible { background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 35%); box-shadow: none; } /* yellow — scout / premium actie */ .dt-btn--yellow { --_c: #fbbf24; --_cr: 251; --_cg: 191; --_cb: 36; } .dt-btn--yellow .dt-icon { color: rgb(255 255 255 / 80%); } /* blue — info / koop */ .dt-btn--blue { --_c: #3b82f6; --_cr: 59; --_cg: 130; --_cb: 246; } /* ── Formaten ───────────────────────────────────────────────────────── */ /* xs (kleinste, plain gap — geen icon-blokje) */ .dt-btn--xs { min-height: 0; padding: 5px 10px; font-size: 0.7rem; gap: 5px; border-radius: 7px; } /* sm (plain gap — geen icon-blokje) */ .dt-btn--sm { min-height: 32px; padding: 0 13px; font-size: var(--fs-13, 0.8125rem); gap: 6px; border-radius: 9px; } /* lg */ .dt-btn--lg { font-size: 1rem; min-height: 44px; padding: 0 22px; border-radius: 999px; gap: 0; } .dt-btn--lg .dt-icon:first-child { width: 58px; font-size: 18px; margin-inline-end: 14px; } /* ── Button Option C — pure neon: donker bg, geen hex-patroon, geen separator ── Gebruik als modifier: