/* ========================================================================== dpdpsuite design system — hosted pages and the shared `.dps-` component vocabulary. Tokens live in tokens.css (--dps-*). Admin-only layout lives in admin.css (.ad-). Mobile-first; logical properties throughout so RTL (ur, sd, ks) mirrors cleanly. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonts (self-hosted from npm packages; never a third-party font CDN) -------------------------------------------------------------------------- */ @font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/vendor/inter/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/vendor/inter/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Noto Sans Devanagari"; font-style: normal; font-display: swap; font-weight: 400; src: url("/vendor/noto-deva/noto-sans-devanagari-devanagari-400-normal.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } @font-face { font-family: "Noto Sans Devanagari"; font-style: normal; font-display: swap; font-weight: 500; src: url("/vendor/noto-deva/noto-sans-devanagari-devanagari-500-normal.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } @font-face { font-family: "Noto Sans Devanagari"; font-style: normal; font-display: swap; font-weight: 600; src: url("/vendor/noto-deva/noto-sans-devanagari-devanagari-600-normal.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } @font-face { font-family: "Noto Sans Devanagari"; font-style: normal; font-display: swap; font-weight: 700; src: url("/vendor/noto-deva/noto-sans-devanagari-devanagari-700-normal.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } /* -------------------------------------------------------------------------- 2. Local tokens. Org-derived shades are declared on , where the inline `--dps-org` override lives, so they follow each organisation's brand colour. -------------------------------------------------------------------------- */ :root { --dps-gutter: 16px; --dps-band-overlap: 40px; --dps-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px -10px rgba(15, 23, 42, 0.12); --dps-card-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.05), 0 16px 32px -14px rgba(15, 23, 42, 0.22); } @media (min-width: 640px) { :root { --dps-gutter: 24px; } } @media (min-width: 1024px) { :root { --dps-gutter: 32px; --dps-band-overlap: 56px; } } body { --dps-org-50: var(--dps-brand-50); --dps-org-100: var(--dps-brand-100); --dps-org-200: var(--dps-brand-200); --dps-org-700: var(--dps-brand-700); --dps-org-800: var(--dps-brand-800); --dps-org-deep: var(--dps-brand-950); --dps-org-ring: rgba(20, 145, 155, 0.35); } @supports (color: color-mix(in oklab, red, blue)) { body { --dps-org-50: color-mix(in oklab, var(--dps-org) 7%, white); --dps-org-100: color-mix(in oklab, var(--dps-org) 15%, white); --dps-org-200: color-mix(in oklab, var(--dps-org) 32%, white); --dps-org-700: color-mix(in oklab, var(--dps-org) 84%, black); --dps-org-800: color-mix(in oklab, var(--dps-org) 66%, black); --dps-org-deep: color-mix(in oklab, var(--dps-org) 38%, #03121a); --dps-org-ring: color-mix(in oklab, var(--dps-org) 38%, transparent); } } /* -------------------------------------------------------------------------- 3. Reset and typography -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: 16px; } /* Pages with the sticky consent action bar: keep focused controls clear of it (WCAG 2.2 SC 2.4.11). The bar is ~118px tall on phones and ~81px from 768px up; add ~24px of breathing room. */ html:has(.dps-actionbar) { scroll-padding-block-end: 150px; } @media (min-width: 768px) { html:has(.dps-actionbar) { scroll-padding-block-end: 110px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; min-height: 100vh; font-family: var(--dps-font-sans); font-size: var(--dps-text-base); line-height: var(--dps-leading-normal); color: var(--dps-ink-900); background: var(--dps-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "cv11"; } :lang(hi), :lang(mr), :lang(ne), :lang(sa), :lang(kok), :lang(mai), :lang(doi), :lang(brx) { --dps-leading-normal: 1.7; --dps-leading-snug: 1.5; --dps-leading-tight: 1.35; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: var(--dps-leading-tight); letter-spacing: -0.015em; color: inherit; text-wrap: balance; } p, dl, dd, figure, blockquote { margin: 0; } p { text-wrap: pretty; } /* Zero specificity, so any component class can set its own margins. */ :where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; } img, svg, video { max-width: 100%; } img { display: block; height: auto; } code, kbd, samp, pre { font-family: var(--dps-font-mono); font-size: 0.92em; } strong, b { font-weight: 650; } hr { border: 0; } a { color: var(--dps-org-700); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { color: var(--dps-org-800); } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; } fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } legend { padding: 0; } summary { cursor: pointer; } summary::-webkit-details-marker { display: none; } [hidden]:not(.dps-age__block) { display: none !important; } :focus-visible { outline: 2px solid var(--dps-org); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--dps-org-100); color: var(--dps-ink-950); } .dps-icon { display: inline-block; flex-shrink: 0; vertical-align: -0.18em; } [dir="rtl"] .dps-flip-rtl { transform: scaleX(-1); } .dps-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .dps-skip { position: absolute; inset-inline-start: 12px; top: -80px; z-index: var(--dps-z-toast); padding: 10px 16px; border-radius: var(--dps-radius-sm); background: var(--dps-ink-900); color: #fff; font-weight: 600; text-decoration: none; transition: top var(--dps-dur-fast) var(--dps-ease); } .dps-skip:focus { top: 12px; color: #fff; } .dps-muted { color: var(--dps-ink-500); } .dps-mono { font-family: var(--dps-font-mono); font-size: 0.92em; letter-spacing: 0; word-break: break-all; } .dps-text-sm { font-size: var(--dps-text-sm); } .dps-text-base { font-size: var(--dps-text-base); } .dps-text-center { text-align: center; } .dps-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dps-ink-500); } :lang(hi) .dps-eyebrow { letter-spacing: 0.01em; font-size: 12.5px; } /* Devanagari needs a larger floor than Latin: matras and conjuncts blur below ~13px (#17). */ :is(:lang(hi), :lang(mr), :lang(ne), :lang(sa), :lang(kok), :lang(mai), :lang(doi), :lang(brx)) :is(.dps-eyebrow, .dps-badge, .dps-purpose__meta, .dps-orgbar__meta, .dps-receipt__label, .dps-doc__facts dt, .dps-dates__item dt, .dps-kv__row dt, .dps-langmenu__title, .dps-table thead th, .dps-help, .dps-actionbar__hint, .dps-decision__detail, .dps-footer__legal, .dps-doc__validity, .dps-dpo__sla, .dps-label__hint, .dps-receipt__time, .dps-receipt-list__time, .dps-text-sm, .dps-error) { font-size: 13.5px; letter-spacing: 0; text-transform: none; } :is(:lang(hi), :lang(mr), :lang(ne)) .dps-chip { font-size: 14px; } .dps-nowrap { white-space: nowrap; } .dps-kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--dps-border-strong); border-block-end-width: 2px; border-radius: 6px; background: var(--dps-surface); font-family: var(--dps-font-mono); font-size: 0.8em; color: var(--dps-ink-700); } .dps-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--dps-org-700); text-decoration: none; border-radius: 4px; } .dps-link:hover { text-decoration: underline; } .dps-link .dps-icon { transition: transform var(--dps-dur-fast) var(--dps-ease); } .dps-link:hover .dps-icon.lucide-arrow-right { transform: translateX(2px); } [dir="rtl"] .dps-link:hover .dps-icon.lucide-arrow-right { transform: scaleX(-1) translateX(2px); } /* -------------------------------------------------------------------------- 4. Layout primitives -------------------------------------------------------------------------- */ .dps-container { width: 100%; max-width: calc(var(--dps-container) + 2 * var(--dps-gutter)); margin-inline: auto; padding-inline: var(--dps-gutter); } .dps-container--narrow { max-width: calc(var(--dps-container-narrow) + 2 * var(--dps-gutter)); } .dps-stack { display: flex; flex-direction: column; gap: var(--dps-space-4); } .dps-stack--sm { gap: var(--dps-space-3); } .dps-stack--lg { gap: var(--dps-space-6); } @media (min-width: 1024px) { .dps-stack--lg { gap: var(--dps-space-8); } } .dps-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dps-space-3); } .dps-cluster--center { justify-content: center; } .dps-grid { display: grid; gap: var(--dps-space-4); grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .dps-grid--2, .dps-grid--3, .dps-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .dps-grid { gap: var(--dps-space-5); } .dps-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dps-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .dps-divider { height: 1px; margin-block: var(--dps-space-4); border: 0; background: var(--dps-border); } /* Content that overlaps the bottom of the gradient band (layered surfaces). */ .dps-main { display: block; padding-block-end: var(--dps-space-12); } .dps-main:focus { outline: none; } /* Short pages (errors, confirmations) keep the footer at the bottom of the window. */ body.dps-hosted { display: flex; flex-direction: column; } body.dps-hosted > .dps-main { flex: 1 0 auto; } .dps-layered { position: relative; z-index: 1; margin-block-start: calc(-1 * var(--dps-band-overlap)); } .dps-split { display: grid; gap: var(--dps-space-6); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 1024px) { .dps-split { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--dps-space-8); } } /* Sticky only when the whole sidebar fits in the window; otherwise the DPO and Board links at its end could never be scrolled into view while it is stuck (#4). */ @media (min-width: 1024px) and (min-height: 1000px) { .dps-split__aside { position: sticky; top: var(--dps-space-6); } } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .dps-btn { --_bg: var(--dps-surface); --_fg: var(--dps-ink-900); --_border: var(--dps-border-strong); --_bg-hover: var(--dps-ink-50); --_border-hover: var(--_border); --_shadow: var(--dps-shadow-xs); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--_border); border-radius: var(--dps-radius-md); background: var(--_bg); color: var(--_fg); box-shadow: var(--_shadow); font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; white-space: normal; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--dps-dur-fast) var(--dps-ease), border-color var(--dps-dur-fast) var(--dps-ease), box-shadow var(--dps-dur-fast) var(--dps-ease), transform var(--dps-dur-fast) var(--dps-ease), opacity var(--dps-dur-fast) var(--dps-ease); } .dps-btn:hover { background: var(--_bg-hover); border-color: var(--_border-hover); color: var(--_fg); } .dps-btn:active { transform: translateY(1px); } .dps-btn:focus-visible { outline: none; box-shadow: var(--_shadow), 0 0 0 3px var(--dps-surface), 0 0 0 5px var(--dps-org); } .dps-btn:disabled, .dps-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; } .dps-btn--primary { --_bg: var(--dps-org); --_fg: #fff; --_border: transparent; --_bg-hover: var(--dps-org-700); --_shadow: 0 1px 2px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .dps-btn--outline { --_bg: var(--dps-surface); --_bg-hover: var(--dps-org-50); --_border-hover: var(--dps-org-200); } .dps-btn--ghost { --_bg: transparent; --_border: transparent; --_shadow: none; --_fg: var(--dps-ink-700); --_bg-hover: var(--dps-ink-100); } .dps-btn--soft { --_bg: var(--dps-org-50); --_fg: var(--dps-org-700); --_border: var(--dps-org-100); --_bg-hover: var(--dps-org-100); --_shadow: none; } .dps-btn--danger { --_bg: var(--dps-danger-600); --_fg: #fff; --_border: transparent; --_bg-hover: var(--dps-danger-700); --_shadow: 0 1px 2px rgba(127, 29, 29, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .dps-btn--danger:focus-visible { box-shadow: 0 0 0 3px var(--dps-surface), 0 0 0 5px var(--dps-danger-600); } .dps-btn--danger-outline { --_fg: var(--dps-danger-700); --_border: #fecaca; --_bg-hover: #fef2f2; --_border-hover: #fca5a5; } .dps-btn--light { --_bg: #fff; --_fg: var(--dps-org-800); --_border: transparent; --_bg-hover: var(--dps-org-50); --_shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35); } .dps-btn--glass { --_bg: rgba(255, 255, 255, 0.1); --_fg: #fff; --_border: rgba(255, 255, 255, 0.24); --_bg-hover: rgba(255, 255, 255, 0.18); --_border-hover: rgba(255, 255, 255, 0.4); --_shadow: none; backdrop-filter: blur(8px); } .dps-btn--sm { min-height: 36px; padding: 6px 12px; gap: 6px; border-radius: 10px; font-size: 14px; } .dps-btn--lg { min-height: 52px; padding: 12px 22px; border-radius: 14px; font-size: 16px; } .dps-btn--block { display: flex; width: 100%; } .dps-btn--icon { width: 44px; padding: 0; } .dps-btn--icon.dps-btn--sm { width: 36px; } .dps-btn.is-loading { color: transparent; pointer-events: none; } .dps-btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 2px solid var(--_fg); border-inline-end-color: transparent; border-radius: 50%; animation: dps-spin 0.7s linear infinite; } @keyframes dps-spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 6. Cards -------------------------------------------------------------------------- */ .dps-card { position: relative; background: var(--dps-surface); border: 1px solid var(--dps-border); border-radius: var(--dps-radius-lg); box-shadow: var(--dps-card-shadow); } .dps-card__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dps-space-3); padding: var(--dps-space-4) var(--dps-space-5); border-block-end: 1px solid var(--dps-border); } .dps-card__body { padding: var(--dps-space-5); } .dps-card__footer { padding: var(--dps-space-4) var(--dps-space-5); border-block-start: 1px solid var(--dps-border); border-end-start-radius: inherit; border-end-end-radius: inherit; background: var(--dps-ink-50); } @media (min-width: 640px) { .dps-card__header { padding-inline: var(--dps-space-6); } .dps-card__body { padding: var(--dps-space-6); } .dps-card__footer { padding-inline: var(--dps-space-6); } } .dps-card__heading { display: flex; align-items: center; gap: var(--dps-space-3); min-width: 0; } .dps-card__title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 650; line-height: var(--dps-leading-snug); letter-spacing: -0.01em; } .dps-card--flat { background: var(--dps-ink-50); box-shadow: none; } .dps-card--interactive { color: inherit; text-decoration: none; transition: transform var(--dps-dur) var(--dps-ease), box-shadow var(--dps-dur) var(--dps-ease), border-color var(--dps-dur) var(--dps-ease); } .dps-card--interactive:hover { transform: translateY(-2px); border-color: var(--dps-org-200); box-shadow: var(--dps-card-shadow-hover); color: inherit; } .dps-card--accent { overflow: hidden; } .dps-card--accent::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 4px; background: linear-gradient(90deg, var(--dps-org), var(--dps-brand-400), var(--dps-accent-500)); } /* -------------------------------------------------------------------------- 7. Badges, chips, icon badges, avatar -------------------------------------------------------------------------- */ .dps-badge { --_bg: var(--dps-ink-100); --_fg: var(--dps-ink-700); --_ring: rgba(71, 85, 105, 0.16); display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 9px; border-radius: var(--dps-radius-pill); background: var(--_bg); color: var(--_fg); box-shadow: inset 0 0 0 1px var(--_ring); font-size: 12.5px; font-weight: 600; line-height: 1.35; white-space: nowrap; } .dps-badge--success { --_bg: var(--dps-success-100); --_fg: var(--dps-success-700); --_ring: rgba(21, 128, 61, 0.18); } .dps-badge--warning { --_bg: var(--dps-warning-100); --_fg: var(--dps-warning-700); --_ring: rgba(180, 83, 9, 0.18); } .dps-badge--danger { --_bg: var(--dps-danger-100); --_fg: var(--dps-danger-700); --_ring: rgba(185, 28, 28, 0.16); } .dps-badge--info { --_bg: var(--dps-info-100); --_fg: var(--dps-info-700); --_ring: rgba(29, 78, 216, 0.16); } .dps-badge--neutral { --_bg: var(--dps-ink-100); --_fg: var(--dps-ink-600); } .dps-badge--brand { --_bg: var(--dps-org-50); --_fg: var(--dps-org-700); --_ring: var(--dps-org-100); } .dps-badge--dot::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2.5px color-mix(in oklab, currentColor 18%, transparent); } .dps-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .dps-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--dps-border); border-radius: var(--dps-radius-sm); background: var(--dps-ink-50); color: var(--dps-ink-700); font-size: 13px; font-weight: 500; line-height: 1.35; } .dps-chip--muted { border-color: transparent; background: var(--dps-ink-100); color: var(--dps-ink-600); font-size: 12px; font-weight: 600; } .dps-chip--glass { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px); } .dps-icon-badge { --_bg: var(--dps-org-50); --_fg: var(--dps-org-700); display: inline-grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--_bg); color: var(--_fg); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--_fg) 14%, transparent), 0 1px 2px rgba(15, 23, 42, 0.05); } .dps-icon-badge .dps-icon { vertical-align: 0; } .dps-icon-badge--brand { --_bg: var(--dps-org-50); --_fg: var(--dps-org-700); } .dps-icon-badge--success { --_bg: #e7f8ee; --_fg: var(--dps-success-700); } .dps-icon-badge--warning { --_bg: #fdf3dc; --_fg: var(--dps-warning-700); } .dps-icon-badge--danger { --_bg: #fdeaea; --_fg: var(--dps-danger-700); } .dps-icon-badge--info { --_bg: #e4edfd; --_fg: var(--dps-info-700); } .dps-icon-badge--neutral { --_bg: var(--dps-ink-100); --_fg: var(--dps-ink-600); } .dps-icon-badge--sm { width: 32px; height: 32px; } .dps-icon-badge--lg { width: 56px; height: 56px; } .dps-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(140deg, var(--dps-org) 0%, var(--dps-org-700) 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 10px -3px rgba(2, 20, 24, 0.35); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; } .dps-avatar--lg { width: 56px; height: 56px; border-radius: 16px; font-size: 20px; } /* The dpdpsuite wordmark */ .dps-wordmark { display: inline-flex; align-items: center; gap: 7px; color: var(--dps-ink-900); font-size: 20px; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; } .dps-wordmark__glyph { width: 1.25em; height: 1.25em; color: var(--dps-brand-600); flex-shrink: 0; } .dps-wordmark__dpdp { font-weight: 800; } .dps-wordmark__suite { font-weight: 400; } .dps-wordmark--light { color: #fff; } .dps-wordmark--light .dps-wordmark__glyph { color: var(--dps-brand-300); } .dps-wordmark--sm { font-size: 15px; gap: 5px; } .dps-wordmark--lg { font-size: 22px; } /* -------------------------------------------------------------------------- 8. Switch (checkbox + label; 44px hit area; focus ring; locked variant) -------------------------------------------------------------------------- */ .dps-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding-block: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .dps-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; } .dps-switch__track { position: relative; flex-shrink: 0; width: 48px; height: 28px; border-radius: var(--dps-radius-pill); background: var(--dps-ink-300); box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.18); transition: background-color var(--dps-dur) var(--dps-ease), box-shadow var(--dps-dur) var(--dps-ease); } .dps-switch__thumb { position: absolute; inset-block-start: 3px; inset-inline-start: 3px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--dps-org-700); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3), 0 1px 1px rgba(15, 23, 42, 0.08); transition: inset-inline-start var(--dps-dur) var(--dps-ease), transform var(--dps-dur-fast) var(--dps-ease); } .dps-switch__thumb::after { /* a small tick appears when on */ content: ""; width: 10px; height: 6px; border-inline-start: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--dps-dur) var(--dps-ease); } .dps-switch__label { font-size: 15px; font-weight: 500; color: var(--dps-ink-800); } .dps-switch:hover .dps-switch__track { background: var(--dps-ink-400); } .dps-switch input:checked + .dps-switch__track { background: var(--dps-org); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); } .dps-switch input:checked + .dps-switch__track .dps-switch__thumb { inset-inline-start: 23px; } .dps-switch input:checked + .dps-switch__track .dps-switch__thumb::after { transform: translateY(-1px) rotate(-45deg) scale(1); } .dps-switch:hover input:checked + .dps-switch__track { background: var(--dps-org-700); } .dps-switch input:active + .dps-switch__track .dps-switch__thumb { transform: scale(0.92); } .dps-switch input:focus-visible + .dps-switch__track { box-shadow: 0 0 0 3px var(--dps-surface), 0 0 0 5px var(--dps-org); } .dps-switch--locked { cursor: not-allowed; } .dps-switch--locked .dps-switch__track { background: var(--dps-org-200); } .dps-switch--locked input:checked + .dps-switch__track { background: var(--dps-org-200); } .dps-switch--locked .dps-switch__thumb::after { display: none; } .dps-switch--locked .dps-switch__thumb .dps-icon { color: var(--dps-org-700); } /* Plain vocabulary markup (an empty thumb, no icon inside) still shows the lock. */ .dps-switch.dps-switch--locked input + .dps-switch__track > .dps-switch__thumb:empty::after { display: block; width: 11px; height: 11px; border: 0; transform: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat; } /* -------------------------------------------------------------------------- 9. Forms -------------------------------------------------------------------------- */ .dps-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .dps-label { font-size: 14px; font-weight: 600; color: var(--dps-ink-800); } .dps-label__hint { margin-inline-start: 4px; font-weight: 500; color: var(--dps-ink-500); font-size: 13px; } .dps-help { font-size: 13px; line-height: 1.45; color: var(--dps-ink-500); } .dps-error { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--dps-danger-700); } .dps-error .dps-icon { margin-block-start: 2px; } .dps-input, .dps-select, .dps-textarea { display: block; width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--dps-border-strong); border-radius: var(--dps-radius-md); background: var(--dps-surface); color: var(--dps-ink-900); box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04); font-size: 16px; /* 16px keeps iOS from zooming on focus */ line-height: 1.4; transition: border-color var(--dps-dur-fast) var(--dps-ease), box-shadow var(--dps-dur-fast) var(--dps-ease); } .dps-input::placeholder, .dps-textarea::placeholder { color: var(--dps-ink-400); } .dps-input:hover, .dps-select:hover, .dps-textarea:hover { border-color: var(--dps-ink-400); } .dps-input:focus, .dps-select:focus, .dps-textarea:focus { outline: none; border-color: var(--dps-org); box-shadow: 0 0 0 3px var(--dps-org-ring); } .dps-textarea { min-height: 132px; resize: vertical; } .dps-select { appearance: none; padding-inline-end: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; } [dir="rtl"] .dps-select { background-position: left 14px center; } .dps-select--sm { min-height: 36px; padding-block: 6px; font-size: 14px; border-radius: 10px; } .dps-select--glass { border-color: rgba(255, 255, 255, 0.24); background-color: rgba(255, 255, 255, 0.1); color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); box-shadow: none; } .dps-select--glass option { color: var(--dps-ink-900); } .dps-field.is-invalid .dps-input, .dps-field.is-invalid .dps-select, .dps-field.is-invalid .dps-textarea, [aria-invalid="true"] { border-color: var(--dps-danger-600); } .dps-field.is-invalid .dps-input:focus, .dps-field.is-invalid .dps-textarea:focus { box-shadow: var(--dps-shadow-focus-danger); } .dps-input-group { position: relative; display: flex; align-items: stretch; } .dps-input-group__addon { position: absolute; inset-block: 0; inset-inline-start: 0; display: grid; place-items: center; width: 44px; color: var(--dps-ink-400); pointer-events: none; } .dps-input-group__addon + .dps-input { padding-inline-start: 42px; } .dps-input-group:focus-within .dps-input-group__addon { color: var(--dps-org-700); } .dps-checkbox, .dps-radio { display: inline-flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-block: 10px; font-size: 15px; cursor: pointer; } .dps-checkbox input, .dps-radio input { flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--dps-org); cursor: inherit; } /* Radio tiles (age confirmation) */ .dps-choice-group { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 480px) { .dps-choice-group { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .dps-choice { position: relative; display: block; cursor: pointer; } .dps-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: inherit; } .dps-choice__box { display: flex; align-items: center; gap: 12px; min-height: 56px; height: 100%; padding: 12px 16px; border: 1.5px solid var(--dps-border-strong); border-radius: var(--dps-radius-md); background: var(--dps-surface); color: var(--dps-ink-800); font-size: 15px; font-weight: 550; line-height: 1.35; transition: border-color var(--dps-dur-fast) var(--dps-ease), background-color var(--dps-dur-fast) var(--dps-ease), box-shadow var(--dps-dur-fast) var(--dps-ease); } .dps-choice__box .dps-icon { color: var(--dps-ink-400); transition: color var(--dps-dur-fast) var(--dps-ease); } .dps-choice__box::after { content: ""; flex-shrink: 0; width: 20px; height: 20px; margin-inline-start: auto; border: 2px solid var(--dps-ink-300); border-radius: 50%; background: var(--dps-surface); transition: border var(--dps-dur-fast) var(--dps-ease); } .dps-choice:hover .dps-choice__box { border-color: var(--dps-ink-400); } .dps-choice input:checked + .dps-choice__box { border-color: var(--dps-org); background: var(--dps-org-50); box-shadow: 0 0 0 1px var(--dps-org); } .dps-choice input:checked + .dps-choice__box .dps-icon { color: var(--dps-org-700); } .dps-choice input:checked + .dps-choice__box::after { border: 6px solid var(--dps-org); } .dps-choice input:focus-visible + .dps-choice__box { box-shadow: 0 0 0 3px var(--dps-org-ring); } .dps-choice input[data-age-minor]:checked + .dps-choice__box { border-color: var(--dps-warning-600); background: #fffbeb; box-shadow: 0 0 0 1px var(--dps-warning-600); } .dps-choice input[data-age-minor]:checked + .dps-choice__box .dps-icon { color: var(--dps-warning-700); } .dps-choice input[data-age-minor]:checked + .dps-choice__box::after { border-color: var(--dps-warning-600); } .dps-form-actions { display: flex; flex-wrap: wrap; gap: var(--dps-space-3); padding-block-start: var(--dps-space-2); } /* -------------------------------------------------------------------------- 10. Alerts, callouts, notes -------------------------------------------------------------------------- */ .dps-alert { --_bg: var(--dps-info-100); --_fg: var(--dps-info-700); --_border: rgba(29, 78, 216, 0.18); display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--_border); border-inline-start-width: 4px; border-radius: var(--dps-radius-md); background: color-mix(in oklab, var(--_bg) 55%, white); color: var(--dps-ink-800); font-size: 15px; } .dps-alert:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--_fg) 16%, transparent); } .dps-alert__icon { display: flex; flex-shrink: 0; margin-block-start: 1px; color: var(--_fg); } .dps-alert__content { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; } .dps-alert__title { font-weight: 650; color: var(--dps-ink-900); line-height: var(--dps-leading-snug); } .dps-alert__body { display: flex; flex-direction: column; gap: 8px; color: var(--dps-ink-700); line-height: var(--dps-leading-normal); } .dps-alert__list { margin: 0; padding-inline-start: 1.2em; display: flex; flex-direction: column; gap: 4px; } .dps-alert__link { color: var(--_fg); font-weight: 550; text-decoration: underline; text-underline-offset: 2px; } .dps-alert__link:hover { text-decoration-thickness: 2px; } .dps-alert__hint { font-size: 14px; color: var(--dps-ink-600); } .dps-alert__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; } .dps-alert--success { --_bg: var(--dps-success-100); --_fg: var(--dps-success-700); --_border: rgba(21, 128, 61, 0.22); } .dps-alert--warning { --_bg: var(--dps-warning-100); --_fg: var(--dps-warning-700); --_border: rgba(180, 83, 9, 0.24); } .dps-alert--danger { --_bg: var(--dps-danger-100); --_fg: var(--dps-danger-700); --_border: rgba(185, 28, 28, 0.22); } .dps-alert--info { --_bg: var(--dps-info-100); --_fg: var(--dps-info-700); --_border: rgba(29, 78, 216, 0.18); } .dps-callout { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--dps-radius-md); background: var(--dps-org-50); border: 1px solid var(--dps-org-100); color: var(--dps-ink-700); font-size: 14.5px; } .dps-callout__title { display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--dps-org-800); } .dps-callout--danger { background: #fef6f6; border-color: #fde2e2; color: var(--dps-ink-800); } .dps-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--dps-radius-md); background: var(--dps-ink-100); color: var(--dps-ink-700); font-size: 15px; } .dps-note .dps-icon { margin-block-start: 2px; color: var(--dps-ink-500); } .dps-note--success { background: #ecfdf3; color: var(--dps-success-700); } .dps-note--success .dps-icon { color: var(--dps-success-600); } .dps-note--warning { background: #fffbeb; color: var(--dps-warning-700); } .dps-note--warning .dps-icon { color: var(--dps-warning-600); } .dps-checklist { display: flex; flex-direction: column; gap: 10px; } .dps-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--dps-ink-700); } .dps-checklist .dps-icon { margin-block-start: 2px; color: var(--dps-success-600); } .dps-checklist--sm li { font-size: 14px; } .dps-checklist--plain .dps-icon { color: var(--dps-ink-500); } /*

disclosure */ .dps-disclosure { border-block-start: 1px dashed var(--dps-border); } .dps-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding-block: 10px; list-style: none; color: var(--dps-ink-700); font-size: 14.5px; font-weight: 600; border-radius: 6px; } .dps-disclosure > summary > span { display: inline-flex; align-items: center; gap: 8px; } .dps-disclosure > summary:hover { color: var(--dps-org-700); } .dps-disclosure__chevron { color: var(--dps-ink-400); transition: transform var(--dps-dur) var(--dps-ease); } .dps-disclosure[open] .dps-disclosure__chevron { transform: rotate(180deg); } .dps-disclosure__body { margin-block-end: 4px; padding: 12px 14px; border-radius: var(--dps-radius-sm); background: var(--dps-ink-50); color: var(--dps-ink-700); font-size: 14.5px; animation: dps-fade-down var(--dps-dur) var(--dps-ease); } .dps-disclosure--plain { border: 0; } .dps-disclosure--plain > summary { justify-content: flex-start; color: var(--dps-org-700); min-height: 36px; padding-block: 4px; } .dps-disclosure--plain .dps-disclosure__body { background: none; padding: 8px 0 0; } @keyframes dps-fade-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 11. Tables -------------------------------------------------------------------------- */ .dps-table-wrap { overflow: auto; max-width: 100%; border: 1px solid var(--dps-border); border-radius: var(--dps-radius-md); background: var(--dps-surface); -webkit-overflow-scrolling: touch; } .dps-table-wrap--flush { border: 0; border-radius: 0 0 var(--dps-radius-lg) var(--dps-radius-lg); } .dps-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; } .dps-table th, .dps-table td { padding: 12px 16px; text-align: start; vertical-align: middle; border-block-end: 1px solid var(--dps-border); } .dps-table thead th { position: sticky; top: 0; z-index: 1; background: var(--dps-ink-50); color: var(--dps-ink-500); font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .dps-table tbody tr { transition: background-color var(--dps-dur-fast) var(--dps-ease); } .dps-table tbody tr:hover { background: var(--dps-org-50); } .dps-table tbody tr:last-child td { border-block-end: 0; } .dps-table__primary { display: block; font-weight: 600; color: var(--dps-ink-900); } .dps-table__secondary { display: block; font-size: 12.5px; color: var(--dps-ink-500); } .dps-table--compact th, .dps-table--compact td { padding: 8px 12px; font-size: 13.5px; } /* -------------------------------------------------------------------------- 12. Tabs -------------------------------------------------------------------------- */ .dps-tabs { display: flex; gap: 4px; overflow-x: auto; border-block-end: 1px solid var(--dps-border); scrollbar-width: none; } .dps-tabs::-webkit-scrollbar { display: none; } .dps-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 0; background: none; color: var(--dps-ink-500); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; border-radius: 8px 8px 0 0; transition: color var(--dps-dur-fast) var(--dps-ease), background-color var(--dps-dur-fast) var(--dps-ease); } .dps-tab:hover { color: var(--dps-ink-900); background: var(--dps-ink-50); } .dps-tab::after { content: ""; position: absolute; inset-inline: 10px; inset-block-end: -1px; height: 2px; border-radius: 2px; background: transparent; transition: background-color var(--dps-dur) var(--dps-ease); } .dps-tab[aria-selected="true"], .dps-tab.is-active { color: var(--dps-org-700); } .dps-tab[aria-selected="true"]::after, .dps-tab.is-active::after { background: var(--dps-org); } /* -------------------------------------------------------------------------- 13. Dialog (