/* ============================================================ AW RECEPTIONIST AI — DESIGN SYSTEM Portable design tokens + components for dashboards / apps. USAGE ───── 1. in 2. Add data-theme="dark" (default) or data-theme="light" to 3. Use CSS custom properties (var(--…)) for one-off overrides. 4. Pair with Space Grotesk + Instrument Serif from Google Fonts: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Instrument+Serif:ital@1 ============================================================ */ /* ─── LAYER ORDER ──────────────────────────────────────── */ @layer tokens, base, typography, components, utilities; /* ============================================================ LAYER: TOKENS All visual decisions live here as CSS custom properties. Override any token on :root or a scoped selector. ============================================================ */ @layer tokens { /* ── COLOR PALETTE ──────────────────────────────────── */ :root { /* surfaces */ --color-bg: #0d0d0f; --color-surface: #111113; --color-surface-2: #161618; --color-surface-3: #1c1c1f; /* for hover states, popovers */ /* borders */ --color-border: oklch(1 0 0 / .08); --color-border-2: oklch(1 0 0 / .13); /* stronger rule */ --color-border-thin: oklch(1 0 0 / .05); /* brand */ --color-primary: oklch(.72 .15 195); /* electric cyan-teal */ --color-primary-dim: oklch(.72 .15 195 / .14); --color-primary-glow: oklch(.72 .15 195 / .08); --color-secondary: oklch(.65 .12 255); /* blue-violet accent */ --color-secondary-dim:oklch(.65 .12 255 / .14); /* semantic status */ --color-success: oklch(.72 .22 145); --color-warning: oklch(.80 .18 85); --color-error: oklch(.60 .22 25); /* text */ --color-text: #e8e6e2; --color-text-muted: oklch(.62 0 0); --color-text-subtle: oklch(.40 0 0); --color-text-accent: var(--color-primary); } /* light mode overrides */ [data-theme="light"] { --color-bg: #f4f3f0; --color-surface: #ffffff; --color-surface-2: #eeece9; --color-surface-3: #e6e4e1; --color-border: oklch(0 0 0 / .09); --color-border-2: oklch(0 0 0 / .16); --color-border-thin: oklch(0 0 0 / .05); --color-text: #0e0e10; --color-text-muted: oklch(.42 0 0); --color-text-subtle: oklch(.62 0 0); } /* ── TYPOGRAPHY ─────────────────────────────────────── */ :root { --font-ui: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; /* italic editorial only */ --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace; /* fluid type scale */ --text-xs: .75rem; /* 12px */ --text-sm: .8125rem; /* 13px */ --text-base: 1rem; /* 16px */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: clamp(1.75rem, 3.5vw, 2.75rem); --text-3xl: clamp(2.25rem, 5vw, 4rem); --text-hero: clamp(2.75rem, 6.5vw, 5.5rem); /* line heights */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.6; --lh-loose: 1.75; /* letter spacing */ --ls-tight: -.035em; --ls-snug: -.02em; --ls-normal: 0; --ls-wide: .05em; --ls-wider: .1em; /* font weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; } /* ── SPACING SCALE ──────────────────────────────────── */ :root { --space-1: .25rem; /* 4px */ --space-2: .5rem; /* 8px */ --space-3: .75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-section: clamp(5rem, 9vh, 7.5rem); } /* ── BORDER RADIUS ──────────────────────────────────── */ :root { --radius-xs: 4px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px; } /* ── SHADOWS ────────────────────────────────────────── */ :root { --shadow-sm: 0 1px 2px oklch(0 0 0 / .3); --shadow-card: 0 1px 3px oklch(0 0 0 / .45), 0 8px 24px oklch(0 0 0 / .3); --shadow-hi: 0 4px 16px oklch(0 0 0 / .6), 0 16px 48px oklch(0 0 0 / .4); --shadow-glow: 0 0 40px var(--color-primary-dim); --shadow-glow-lg: 0 0 80px var(--color-primary-glow); } [data-theme="light"] { --shadow-sm: 0 1px 2px oklch(0 0 0 / .06); --shadow-card: 0 1px 3px oklch(0 0 0 / .07), 0 8px 24px oklch(0 0 0 / .05); --shadow-hi: 0 4px 16px oklch(0 0 0 / .1), 0 16px 48px oklch(0 0 0 / .08); } /* ── TRANSITIONS ────────────────────────────────────── */ :root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.7, 0, .84, 0); --ease-io: cubic-bezier(.83, 0, .17, 1); --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 350ms; } /* ── LAYOUT ─────────────────────────────────────────── */ :root { --nav-height: 64px; --sidebar-w: 260px; --container-sm: 640px; --container-md: 860px; --container-lg: 1180px; --container-xl: 1440px; } } /* ============================================================ LAYER: BASE Minimal reset + body defaults. ============================================================ */ @layer base { *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: dark light; } body { font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--lh-normal); background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--dur-slow), color var(--dur-slow); } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; } ul, ol { list-style: none; } ::selection { background: var(--color-primary-dim); color: var(--color-text); } /* focus ring */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-xs); } /* scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border-2); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); } } /* ============================================================ LAYER: TYPOGRAPHY Heading presets. Apply via class or element selector. ============================================================ */ @layer typography { .text-hero { font-size: var(--text-hero); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); } .text-hero em { /* editorial serif italic word */ font-family: var(--font-serif); font-style: italic; font-weight: var(--fw-regular); color: var(--color-primary); } .text-h1 { font-size: var(--text-3xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); } .text-h2 { font-size: var(--text-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-snug); line-height: var(--lh-snug); } .text-h3 { font-size: var(--text-xl); font-weight: var(--fw-semi); letter-spacing: var(--ls-snug); line-height: var(--lh-snug); } .text-h4 { font-size: var(--text-lg); font-weight: var(--fw-semi); } .text-body { font-size: var(--text-base); line-height: var(--lh-normal); } .text-sm { font-size: var(--text-sm); line-height: var(--lh-normal); } .text-xs { font-size: var(--text-xs); line-height: var(--lh-normal); } .text-mono { font-family: var(--font-mono); font-size: .875em; } .text-muted { color: var(--color-text-muted); } .text-subtle { color: var(--color-text-subtle); } .text-accent { color: var(--color-primary); } /* eyebrow / label above headings */ .eyebrow { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--color-primary); text-transform: uppercase; letter-spacing: var(--ls-wider); } /* tabular numbers for data/dashboards */ .tabular { font-variant-numeric: tabular-nums; } } /* ============================================================ LAYER: COMPONENTS Copy the blocks you need. Each is self-contained. ============================================================ */ @layer components { /* ── BUTTONS ────────────────────────────────────────── ─────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: .625rem 1.25rem; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--fw-medium); letter-spacing: .01em; white-space: nowrap; transition: all var(--dur-base) var(--ease-out); cursor: pointer; border: none; text-decoration: none; } .btn-primary { background: var(--color-primary); color: #0d0d0f; } .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: var(--color-secondary); color: #ffffff; } .btn-secondary:hover { filter: brightness(1.1); transform: translateY(-1px); } .btn-ghost { border: 1px solid var(--color-border); color: var(--color-text); background: transparent; } .btn-ghost:hover { background: oklch(1 0 0 / .04); border-color: var(--color-border-2); } .btn-danger { background: var(--color-error); color: #fff; } .btn-danger:hover { filter: brightness(1.1); transform: translateY(-1px); } .btn-subtle { background: oklch(1 0 0 / .05); color: var(--color-text-muted); } .btn-subtle:hover { background: oklch(1 0 0 / .09); color: var(--color-text); } /* sizes */ .btn-xs { padding: .3rem .625rem; font-size: var(--text-xs); } .btn-sm { padding: .45rem .875rem; font-size: var(--text-xs); } .btn-lg { padding: .875rem 1.875rem; font-size: var(--text-base); } .btn-xl { padding: 1.125rem 2.25rem; font-size: var(--text-md); } .btn-full { width: 100%; justify-content: center; } /* icon-only */ .btn-icon { padding: 0; width: 36px; height: 36px; justify-content: center; border-radius: var(--radius-sm); } .btn-icon.btn-sm { width: 28px; height: 28px; } .btn-icon.btn-lg { width: 44px; height: 44px; } /* ── CARDS ────────────────────────────────────────────
…
…
…
(glowing border) ─────────────────────────────────────────────────────── */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); } .card-flat { box-shadow: none; } .card-flat:hover { box-shadow: var(--shadow-card); } .card-elevated { background: var(--color-surface-2); box-shadow: var(--shadow-hi); } .card-accent { border-color: color-mix(in oklch, var(--color-primary) 40%, var(--color-border)); box-shadow: var(--shadow-card), var(--shadow-glow); } /* animated rotating gradient border (hero / featured card) */ @property --ga { syntax: ''; inherits: false; initial-value: 0deg; } .card-gradient-border { position: relative; } .card-gradient-border::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: conic-gradient(from var(--ga), var(--color-primary), var(--color-secondary), var(--color-primary) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ga-spin 5s linear infinite; pointer-events: none; z-index: 0; } .card-gradient-border > * { position: relative; z-index: 1; } @keyframes ga-spin { to { --ga: 360deg; } } /* card sizes */ .card-sm { padding: var(--space-4); border-radius: var(--radius-md); } .card-lg { padding: var(--space-10); border-radius: var(--radius-xl); } /* ── BADGES / PILLS ─────────────────────────────────── Active ─────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: .2rem .6rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--fw-medium); white-space: nowrap; } .badge-primary { background: var(--color-primary-dim); color: var(--color-primary); } .badge-secondary { background: var(--color-secondary-dim); color: var(--color-secondary); } .badge-success { background: oklch(.72 .22 145 / .12); color: var(--color-success); } .badge-warning { background: oklch(.80 .18 85 / .12); color: var(--color-warning); } .badge-error { background: oklch(.60 .22 25 / .12); color: var(--color-error); } .badge-muted { background: oklch(1 0 0 / .06); color: var(--color-text-muted); } /* live pulse dot */ .badge-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse-dot 1.6s ease infinite; } @keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} } /* ── FORM INPUTS ────────────────────────────────────── ─────────────────────────────────────────────────────── */ .input { width: 100%; padding: .625rem .875rem; background: oklch(1 0 0 / .04); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--lh-normal); outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .input::placeholder { color: var(--color-text-subtle); } .input:hover { border-color: var(--color-border-2); } .input:focus { border-color: oklch(.72 .15 195 / .5); box-shadow: 0 0 0 3px var(--color-primary-glow); } .input:disabled { opacity: .45; cursor: not-allowed; } .input-sm { padding: .4rem .7rem; font-size: var(--text-xs); } .input-lg { padding: .875rem 1.125rem; font-size: var(--text-base); } /* input group: icon + input */ .input-group { position: relative; display: flex; align-items: center; } .input-group .input { padding-left: 2.25rem; } .input-group__icon { position: absolute; left: .75rem; color: var(--color-text-subtle); pointer-events: none; } /* label */ .label { display: block; font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--color-text-muted); margin-bottom: var(--space-2); letter-spacing: .01em; } /* field = label + input stack */ .field { display: flex; flex-direction: column; gap: var(--space-2); } .field__hint { font-size: var(--text-xs); color: var(--color-text-subtle); } .field--error .input { border-color: var(--color-error); } .field--error .field__hint { color: var(--color-error); } /* ── TOGGLE SWITCH ──────────────────────────────────── ─────────────────────────────────────────────────────── */ .toggle { width: 44px; height: 24px; background: var(--color-border-2); border-radius: var(--radius-full); position: relative; cursor: pointer; transition: background var(--dur-base); flex-shrink: 0; } .toggle[aria-checked="true"] { background: var(--color-primary); } .toggle::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: white; top: 3px; left: 3px; transition: transform var(--dur-base) var(--ease-out); box-shadow: 0 1px 3px oklch(0 0 0/.3); } .toggle[aria-checked="true"]::after { transform: translateX(20px); } /* ── GLASS PANEL ────────────────────────────────────── The nav / modal / tooltip glass effect.
…
─────────────────────────────────────────────────────── */ .glass { background: rgba(13, 13, 15, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--color-border); } [data-theme="light"] .glass { background: rgba(244, 243, 240, .82); } /* ── DATA STAT ──────────────────────────────────────── Dashboard KPI tile.
98.7%
Accuracy
─────────────────────────────────────────────────────── */ .kpi { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .kpi__num { font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: 1; font-variant-numeric: tabular-nums; } .kpi__label { font-size: var(--text-sm); color: var(--color-text-muted); } .kpi__delta { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--text-xs); font-weight: var(--fw-medium); } .kpi__delta--up { color: var(--color-success); } .kpi__delta--down { color: var(--color-error); } /* ── WAVEFORM ───────────────────────────────────────── Animated audio waveform (used in hero / call cards).
─────────────────────────────────────────────────────── */ .waveform { display: flex; align-items: center; gap: 3px; height: 48px; } .wb { flex: 1; border-radius: 2px; background: var(--color-primary); opacity: .75; animation: wb-pulse 1s ease-in-out infinite; will-change: height; } @keyframes wb-pulse { 0%, 100% { height: 4px; } 50% { height: var(--wh, 28px); } } /* mini variant (bottom-aligned, used in bento cards) */ .waveform-mini { display: flex; align-items: flex-end; gap: 3px; height: 52px; } .waveform-mini .wb { border-radius: 2px 2px 0 0; opacity: .55; } /* ── AVATAR ───────────────────────────────────────────
AW
…
─────────────────────────────────────────────────────── */ .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--fw-bold); color: #0d0d0f; flex-shrink: 0; overflow: hidden; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-sm { width: 24px; height: 24px; font-size: .6rem; } .avatar-lg { width: 44px; height: 44px; font-size: var(--text-sm); } .avatar-xl { width: 64px; height: 64px; font-size: var(--text-md); } /* ── TABLE ────────────────────────────────────────────
…
…
─────────────────────────────────────────────────────── */ .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); color: var(--color-text); } .table th { padding: .625rem 1rem; text-align: left; font-weight: var(--fw-medium); color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--color-border); } .table td { padding: .875rem 1rem; border-bottom: 1px solid var(--color-border-thin); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover td { background: oklch(1 0 0 / .025); } /* wrap in .table-wrap for overflow */ .table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .table-wrap .table th:first-child, .table-wrap .table td:first-child { padding-left: var(--space-6); } .table-wrap .table th:last-child, .table-wrap .table td:last-child { padding-right: var(--space-6); } /* ── SIDEBAR LAYOUT ───────────────────────────────────
…
─────────────────────────────────────────────────────── */ .app-layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .sidebar { background: var(--color-surface); border-right: 1px solid var(--color-border); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .app-main { padding: var(--space-8); overflow-y: auto; } @media (max-width: 768px) { .app-layout { grid-template-columns: 1fr; } .sidebar { display: none; } } /* sidebar nav item */ .nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-text-muted); transition: background var(--dur-fast), color var(--dur-fast); cursor: pointer; } .nav-item:hover { background: oklch(1 0 0 / .05); color: var(--color-text); } .nav-item.active { background: var(--color-primary-glow); color: var(--color-primary); border: 1px solid var(--color-primary-dim); } /* ── TOP NAV BAR ────────────────────────────────────── ─────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 50; height: var(--nav-height); background: rgba(13,13,15,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; padding-inline: var(--space-6); gap: var(--space-4); transition: background var(--dur-slow); } [data-theme="light"] .topbar { background: rgba(244,243,240,.82); } /* ── DIVIDER ──────────────────────────────────────────
or
─────────────────────────────────────────────────────── */ .divider { border: none; border-top: 1px solid var(--color-border); margin-block: var(--space-4); } .divider-label { display: flex; align-items: center; gap: var(--space-4); color: var(--color-text-subtle); font-size: var(--text-xs); } .divider-label::before, .divider-label::after { content: ''; flex: 1; border-top: 1px solid var(--color-border); } /* ── TOOLTIP ──────────────────────────────────────────
Hover me
Tooltip text
─────────────────────────────────────────────────────── */ .tooltip-wrap { position: relative; display: inline-flex; } .tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--color-surface-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .35rem .75rem; font-size: var(--text-xs); white-space: nowrap; color: var(--color-text); box-shadow: var(--shadow-card); pointer-events: none; opacity: 0; transform: translateX(-50%) translateY(4px); transition: opacity var(--dur-fast), transform var(--dur-fast); } .tooltip-wrap:hover .tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── TYPING INDICATOR ───────────────────────────────── Three animated dots (used in chat / call widgets).
─────────────────────────────────────────────────────── */ .typing-dots { display: flex; gap: 4px; align-items: center; } .td { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); animation: td-anim 1.2s ease infinite; } .td:nth-child(2) { animation-delay: .2s; } .td:nth-child(3) { animation-delay: .4s; } @keyframes td-anim { 0%,60%,100% { opacity:.3; transform:translateY(0); } 30% { opacity:1; transform:translateY(-4px); } } /* ── NOTIFICATION CARD ────────────────────────────────
…svg…
Appointment Booked
Sarah K. — Thursday, 2 PM
─────────────────────────────────────────────────────── */ .notif { display: flex; align-items: flex-start; gap: var(--space-3); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); } .notif__icon { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; background: var(--color-primary-dim); display: flex; align-items: center; justify-content: center; color: var(--color-primary); } .notif__title { font-size: var(--text-sm); font-weight: var(--fw-semi); margin-bottom: .2rem; } .notif__text { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--lh-loose); } /* ── SCROLL REVEAL ──────────────────────────────────── Add .reveal to any element. JS adds .in on intersect. ─────────────────────────────────────────────────────── */ .reveal { opacity: 0; clip-path: inset(0 0 18px 0); transition: opacity .55s ease, clip-path .55s ease; } .reveal.in { opacity: 1; clip-path: inset(0); } } /* ============================================================ LAYER: UTILITIES Single-purpose helpers. Use sparingly. ============================================================ */ @layer utilities { /* display */ .flex { display: flex; } .iflex { display: inline-flex; } .grid { display: grid; } .block { display: block; } .hidden { display: none; } /* flex */ .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .shrink-0 { flex-shrink: 0; } /* gap */ .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } /* padding */ .p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); } .px-4 { padding-inline: var(--space-4); } .px-6 { padding-inline: var(--space-6); } .py-4 { padding-block: var(--space-4); } .py-6 { padding-block: var(--space-6); } /* margin */ .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mx-auto { margin-inline: auto; } /* width */ .w-full { width: 100%; } .max-w-sm { max-width: var(--container-sm); } .max-w-md { max-width: var(--container-md); } .max-w-lg { max-width: var(--container-lg); } /* text align */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* overflow */ .overflow-hidden { overflow: hidden; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* position */ .relative { position: relative; } .absolute { position: absolute; } .sticky { position: sticky; } .inset-0 { inset: 0; } /* border radius shortcuts */ .rounded-sm { border-radius: var(--radius-sm); } .rounded { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-full { border-radius: var(--radius-full); } /* opacity */ .opacity-0 { opacity: 0; } .opacity-50 { opacity: .5; } .opacity-100 { opacity: 1; } /* pointer */ .cursor-pointer { cursor: pointer; } .cursor-default { cursor: default; } .select-none { user-select: none; } .pointer-none { pointer-events: none; } /* sr-only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* transitions */ .transition { transition: all var(--dur-base) var(--ease-out); } .transition-fast { transition: all var(--dur-fast) var(--ease-out); } }