/* * PartyPlatform UI Foundation (Step 0 of the look-and-feel programme, RFC 2026-10-24_ui_foundation). * * ADDITIVE AND OPT-IN: every selector here is a `.ds-*` class or a `--ds-*` token. Nothing in this file * styles a bare element, so loading it changes no existing page. Pages adopt it step by step. * main.css ships `button{width:100%}` and `section{min-height:calc(100vh-100px)}`; .ds-* primitives * set every property they depend on, so they hold up against those rules without a reset. * * Breakpoints (media queries cannot read custom properties, so these are the canonical values): * phone : < 640px * tablet : 640px - 1023px (portrait iPad = 768 / 820) * desktop : >= 1024px (landscape iPad = 1024 / 1112 / 1180) * wide : >= 1280px (host top-nav shows labels only from here) * * Themes: light is the default (host tools). Add `.ds-dark` to any container (or ) for the * dark marketing / guest look. Components read semantic tokens, so they work in both. */ :root { /* Type: Inter only (self-hosted). 12px floor; body copy never below 16px on inputs (stops iOS zoom). */ --ds-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ds-text-xs: .75rem; --ds-text-sm: .875rem; --ds-text-base: 1rem; --ds-text-lg: 1.125rem; --ds-text-xl: 1.25rem; --ds-text-2xl: clamp(1.375rem, 1.2rem + .9vw, 1.75rem); --ds-text-3xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); --ds-text-display: clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem); --ds-leading-tight: 1.2; --ds-leading-snug: 1.35; --ds-leading-body: 1.6; /* Space (4px grid) */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; --ds-space-12: 48px; --ds-space-16: 64px; --ds-gutter: clamp(16px, 4vw, 32px); --ds-container: 1200px; /* Shape */ --ds-radius-sm: 8px; --ds-radius-md: 12px; --ds-radius-lg: 16px; --ds-radius-xl: 24px; --ds-radius-pill: 999px; /* Motion */ --ds-dur-fast: 120ms; --ds-dur-base: 200ms; --ds-dur-slow: 320ms; --ds-ease: cubic-bezier(.16, 1, .3, 1); /* Layers. One scale for every fixed or floating thing, so overlays stop fighting. */ --ds-z-sticky: 100; --ds-z-nav: 1000; --ds-z-dropdown: 1100; --ds-z-banner: 1200; --ds-z-modal: 1300; --ds-z-toast: 1400; /* Touch */ --ds-tap: 44px; --ds-safe-bottom: env(safe-area-inset-bottom, 0px); --ds-safe-top: env(safe-area-inset-top, 0px); /* Brand */ --ds-brand: #7b03fc; --ds-brand-hover: #6a02da; --ds-brand-pink: #ec4899; --ds-brand-gradient: linear-gradient(135deg, #7c3aed, #ec4899); --ds-on-brand: #ffffff; /* Light theme (default) */ --ds-bg: #f8fafc; --ds-surface: #ffffff; --ds-surface-2: #f1f5f9; --ds-ink: #0f172a; --ds-ink-2: #334155; --ds-ink-3: #475569; /* secondary copy: 7.6:1 on white */ --ds-line: #e2e8f0; --ds-line-strong: #7e8ca0; /* input borders: 3.4:1 against white (WCAG 1.4.11 needs 3:1) */ --ds-brand-text: #7b03fc; /* brand-coloured text and links */ --ds-danger: #b91c1c; --ds-danger-bg: #fef2f2; --ds-success: #047857; --ds-success-bg: #ecfdf5; --ds-warning: #b45309; --ds-warning-bg: #fffbeb; --ds-ring: #7b03fc; --ds-shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08); --ds-shadow-2: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .06); --ds-shadow-3: 0 16px 40px rgba(15, 23, 42, .14), 0 4px 12px rgba(15, 23, 42, .08); } /* Dark theme: marketing site and guest invitations. */ .ds-dark { --ds-bg: #0b0714; --ds-surface: #161026; --ds-surface-2: #1f1736; --ds-ink: #f8fafc; --ds-ink-2: #e2e8f0; --ds-ink-3: #cbd5e1; --ds-line: #2c2347; --ds-line-strong: #7c6fa3; --ds-brand-text: #c4a1ff; --ds-danger: #fca5a5; --ds-danger-bg: #3b1219; --ds-success: #6ee7b7; --ds-success-bg: #0d2a22; --ds-warning: #fcd34d; --ds-warning-bg: #33260a; --ds-ring: #c4a1ff; --ds-shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --ds-shadow-2: 0 6px 16px rgba(0, 0, 0, .45); --ds-shadow-3: 0 20px 48px rgba(0, 0, 0, .55); color-scheme: dark; } /* Optional scope for free-form content: neutralises the two site-wide bare-element rules in main.css. */ .ds-scope { font-family: var(--ds-font); color: var(--ds-ink); line-height: var(--ds-leading-body); -webkit-text-size-adjust: 100%; } .ds-scope :where(button) { width: auto; background: none; color: inherit; font: inherit; border: 0; border-radius: 0; padding: 0; margin: 0; } .ds-scope :where(section) { min-height: 0; } /* ---------- Layout helpers ---------- */ .ds-container { width: 100%; max-width: var(--ds-container); margin-inline: auto; padding-inline: var(--ds-gutter); } .ds-stack > * + * { margin-top: var(--ds-space-4); } .ds-cluster { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); align-items: center; } /* Cards fill the row at any width: 1 column on a phone, 2-3 on iPad, 3-4 on desktop. */ .ds-grid { display: grid; gap: var(--ds-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .ds-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Focus: one ring, visible on light and dark, never clipped ---------- */ .ds-btn:focus-visible, .ds-chip:focus-visible, .ds-input:focus-visible, .ds-select:focus-visible, .ds-textarea:focus-visible, .ds-check:focus-visible, .ds-switch:focus-visible, .ds-card--interactive:focus-visible, .ds-link:focus-visible { outline: 2px solid var(--ds-ring); outline-offset: 2px; } /* ---------- Button ---------- */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); box-sizing: border-box; width: auto; min-height: var(--ds-tap); padding: 0 var(--ds-space-5); font: 600 var(--ds-text-base)/1.2 var(--ds-font); letter-spacing: 0; text-decoration: none; white-space: nowrap; color: var(--ds-on-brand); background: var(--ds-brand); border: 1px solid transparent; border-radius: var(--ds-radius-md); cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; transition: transform var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-base) var(--ds-ease), box-shadow var(--ds-dur-base) var(--ds-ease), border-color var(--ds-dur-base) var(--ds-ease); } .ds-btn:not(:disabled):not([aria-disabled="true"]):active { transform: scale(.98); } .ds-btn--secondary { color: var(--ds-ink); background: var(--ds-surface); border-color: var(--ds-line-strong); } .ds-btn--ghost { color: var(--ds-brand-text); background: transparent; } .ds-btn--danger { color: #ffffff; background: #b91c1c; } .ds-btn--block { display: flex; width: 100%; } .ds-btn--sm { min-height: 36px; padding: 0 var(--ds-space-4); font-size: var(--ds-text-sm); } .ds-btn--lg { min-height: 52px; padding: 0 var(--ds-space-8); font-size: var(--ds-text-lg); } @media (pointer: coarse) { .ds-btn--sm { min-height: var(--ds-tap); } } @media (hover: hover) { .ds-btn:not(:disabled):not([aria-disabled="true"]):hover { background: var(--ds-brand-hover); box-shadow: var(--ds-shadow-2); transform: translateY(-1px); } .ds-btn--secondary:not(:disabled):hover { background: var(--ds-surface-2); } .ds-btn--ghost:not(:disabled):hover { background: var(--ds-surface-2); box-shadow: none; } .ds-btn--danger:not(:disabled):hover { background: #991b1b; } } .ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } /* Loading is honest: the label stays, a spinner appears, and a second tap does nothing. */ .ds-btn[aria-busy="true"] { pointer-events: none; } .ds-btn[aria-busy="true"]::after { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ds-spin .7s linear infinite; } @keyframes ds-spin { to { transform: rotate(360deg); } } /* ---------- Card ---------- */ .ds-card { box-sizing: border-box; background: var(--ds-surface); color: var(--ds-ink); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-1); padding: var(--ds-space-5); } .ds-card__title { margin: 0 0 var(--ds-space-2); font: 700 var(--ds-text-lg)/var(--ds-leading-snug) var(--ds-font); color: var(--ds-ink); } .ds-card__meta { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-ink-3); } .ds-card--interactive { cursor: pointer; transition: transform var(--ds-dur-base) var(--ds-ease), box-shadow var(--ds-dur-base) var(--ds-ease); } .ds-card--interactive:active { transform: scale(.99); } @media (hover: hover) { .ds-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-2); } } /* ---------- Chip (filters, tags, status). Interactive chips reach the 44px touch target. ---------- */ .ds-chip { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; width: auto; min-height: 32px; padding: 0 var(--ds-space-3); font: 600 var(--ds-text-sm)/1 var(--ds-font); color: var(--ds-ink-2); background: var(--ds-surface-2); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-pill); white-space: nowrap; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; /* a long event name truncates instead of pushing the page wide */ } button.ds-chip, a.ds-chip, .ds-chip[role="button"] { cursor: pointer; transition: background-color var(--ds-dur-base) var(--ds-ease), border-color var(--ds-dur-base) var(--ds-ease); } @media (pointer: coarse) { button.ds-chip, a.ds-chip, .ds-chip[role="button"] { min-height: var(--ds-tap); padding: 0 var(--ds-space-4); } } .ds-chip[aria-pressed="true"], .ds-chip.is-active { color: var(--ds-on-brand); background: var(--ds-brand); border-color: var(--ds-brand); } .ds-chip--success { color: var(--ds-success); background: var(--ds-success-bg); border-color: transparent; } .ds-chip--warning { color: var(--ds-warning); background: var(--ds-warning-bg); border-color: transparent; } .ds-chip--danger { color: var(--ds-danger); background: var(--ds-danger-bg); border-color: transparent; } /* ---------- Form field ---------- */ .ds-field { display: block; margin: 0 0 var(--ds-space-4); } .ds-label { display: block; margin: 0 0 var(--ds-space-2); font: 600 var(--ds-text-sm)/1.3 var(--ds-font); color: var(--ds-ink); } .ds-input, .ds-select, .ds-textarea { display: block; box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 var(--ds-space-4); font: 400 var(--ds-text-base)/1.4 var(--ds-font); /* 16px: iOS Safari will not zoom the page on focus */ color: var(--ds-ink); background: var(--ds-surface); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-md); transition: border-color var(--ds-dur-base) var(--ds-ease), box-shadow var(--ds-dur-base) var(--ds-ease); } .ds-textarea { min-height: 112px; padding-block: var(--ds-space-3); resize: vertical; } .ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-ink-3); opacity: 1; } .ds-input:focus, .ds-select:focus, .ds-textarea:focus { border-color: var(--ds-ring); box-shadow: 0 0 0 3px rgba(123, 3, 252, .25); outline: none; } .ds-dark .ds-input:focus, .ds-dark .ds-select:focus, .ds-dark .ds-textarea:focus { box-shadow: 0 0 0 3px rgba(196, 161, 255, .35); } .ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled { opacity: .6; background: var(--ds-surface-2); cursor: not-allowed; } .ds-hint { margin: var(--ds-space-2) 0 0; font-size: var(--ds-text-sm); color: var(--ds-ink-3); } /* Errors appear only once the field is actually invalid, never pre-emptively. */ .ds-error { display: none; margin: var(--ds-space-2) 0 0; font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-danger); } .ds-field.is-invalid .ds-error, .ds-input[aria-invalid="true"] ~ .ds-error { display: block; } .ds-field.is-invalid .ds-input, .ds-input[aria-invalid="true"] { border-color: var(--ds-danger); } /* Checkbox, radio and switch: one custom look, 44px hit row. Wrap in