/*!
* ds-bundle-v4.css — GERADO. Não editar à mão.
* Concatenação de ds-typography, ds-layout, ds-components, ds-cards e ds-overlays,
* na mesma ordem em que eram enfileirados soltos, para preservar a cascata.
* Origem: os 5 arquivos ds-*-v4.css deste diretório, que continuam sendo a fonte.
* Regerar: concatenar nesta ordem após qualquer alteração nos originais.
* Gerado em: 2026-08-08 23:00:56 UTC
*/
/* ===== ds-typography-v4.css ===== */
/**
* Booknetic for Theme V4 — Design System typography.
*
* Provides:
* • Heading display utilities (.ds-display-{sm,md,lg,xl})
* • Heading scale utilities (.ds-h1 .. .ds-h6)
* • Body text utilities (.ds-text-{2xs..3xl})
* • Lead / eyebrow / overline (.ds-lead, .ds-eyebrow, .ds-overline)
* • Prose container (.ds-prose) — long-form content
* • Truncate / clamp helpers (.ds-truncate, .ds-clamp-{2,3,4})
* • Font features (kerning, opsz, ss01 when supported)
*
* Mobile-first: every utility scales with clamp() where it makes sense.
*/
/* ============================================================ */
/* BASE RESET (only applied to elements inside .ds-prose or by */
/* explicit utility classes — never mass-applied) */
/* ============================================================ */
html { font-family: var(--ds-font-sans); }
.ds-typography,
.ds-prose,
body.bft-v4 .ds-typography,
body.bft-v4 .ds-prose {
font-family: var(--ds-font-sans);
color: var(--ds-color-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "kern", "ss01", "cv11", "calt";
text-rendering: optimizeLegibility;
}
/* ============================================================ */
/* DISPLAY (marketing hero) */
/* ============================================================ */
.ds-display-sm,
.ds-display-md,
.ds-display-lg,
.ds-display-xl {
font-family: var(--ds-font-display);
font-weight: var(--ds-font-bold);
line-height: var(--ds-leading-tight);
letter-spacing: var(--ds-tracking-tighter);
color: var(--ds-color-text);
margin: 0;
}
.ds-display-sm { font-size: var(--ds-display-sm); }
.ds-display-md { font-size: var(--ds-display-md); }
.ds-display-lg { font-size: var(--ds-display-lg); }
.ds-display-xl { font-size: var(--ds-display-xl); font-weight: var(--ds-font-extrabold); }
/* Gradient text helper */
.ds-text-gradient {
background: var(--ds-gradient-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ============================================================ */
/* HEADING SCALE */
/* ============================================================ */
.ds-h1,
.ds-h2,
.ds-h3,
.ds-h4,
.ds-h5,
.ds-h6 {
font-family: var(--ds-font-display);
font-weight: var(--ds-font-bold);
line-height: var(--ds-leading-snug);
letter-spacing: var(--ds-tracking-tight);
color: var(--ds-color-text);
margin: 0;
}
.ds-h1 { font-size: clamp(1.875rem, 0.95rem + 2.6vw, 2.625rem); line-height: var(--ds-leading-tight); }
.ds-h2 { font-size: clamp(1.5rem, 0.95rem + 1.8vw, 2.125rem); }
.ds-h3 { font-size: clamp(1.25rem, 0.95rem + 1.0vw, 1.625rem); }
.ds-h4 { font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.25rem); }
.ds-h5 { font-size: var(--ds-text-lg); }
.ds-h6 { font-size: var(--ds-text-base); letter-spacing: var(--ds-tracking-wider); text-transform: uppercase; color: var(--ds-color-text-muted); }
/* ============================================================ */
/* BODY TEXT UTILITIES */
/* ============================================================ */
.ds-text-2xs { font-size: var(--ds-text-2xs); line-height: var(--ds-leading-normal); }
.ds-text-xs { font-size: var(--ds-text-xs); line-height: var(--ds-leading-normal); }
.ds-text-sm { font-size: var(--ds-text-sm); line-height: var(--ds-leading-normal); }
.ds-text-base{ font-size: var(--ds-text-base);line-height: var(--ds-leading-normal); }
.ds-text-md { font-size: var(--ds-text-md); line-height: var(--ds-leading-relaxed); }
.ds-text-lg { font-size: var(--ds-text-lg); line-height: var(--ds-leading-relaxed); }
.ds-text-xl { font-size: var(--ds-text-xl); line-height: var(--ds-leading-relaxed); }
.ds-text-2xl { font-size: var(--ds-text-2xl); line-height: var(--ds-leading-snug); }
.ds-text-3xl { font-size: var(--ds-text-3xl); line-height: var(--ds-leading-snug); }
/* Color modifiers */
.ds-text-strong { color: var(--ds-color-text); }
.ds-text-muted { color: var(--ds-color-text-muted); }
.ds-text-subtle { color: var(--ds-color-text-subtle); }
.ds-text-link { color: var(--ds-color-text-link); }
.ds-text-link:hover { color: var(--ds-color-text-link-hover); }
.ds-text-success { color: var(--ds-color-success-text); }
.ds-text-warning { color: var(--ds-color-warning-text); }
.ds-text-danger { color: var(--ds-color-danger-text); }
.ds-text-info { color: var(--ds-color-info-text); }
/* Weight modifiers */
.ds-font-thin { font-weight: var(--ds-font-thin); }
.ds-font-regular { font-weight: var(--ds-font-regular); }
.ds-font-medium { font-weight: var(--ds-font-medium); }
.ds-font-semibold { font-weight: var(--ds-font-semibold); }
.ds-font-bold { font-weight: var(--ds-font-bold); }
.ds-font-extrabold { font-weight: var(--ds-font-extrabold); }
/* Family modifiers */
.ds-font-sans { font-family: var(--ds-font-sans); }
.ds-font-display { font-family: var(--ds-font-display); }
.ds-font-mono { font-family: var(--ds-font-mono); font-feature-settings: "zero", "ss01"; }
/* Numeric tabular figures (for prices, stats, counters) */
.ds-tabular-nums { font-variant-numeric: tabular-nums; }
/* ============================================================ */
/* SPECIAL VARIANTS */
/* ============================================================ */
/* Lead paragraph — used right under a headline */
.ds-lead {
font-size: clamp(var(--ds-text-md), 0.9rem + 0.4vw, var(--ds-text-xl));
line-height: var(--ds-leading-relaxed);
color: var(--ds-color-text-muted);
max-width: 60ch;
}
/* Eyebrow — uppercase mini-label above a heading */
.ds-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--ds-text-xs);
font-weight: var(--ds-font-bold);
letter-spacing: var(--ds-tracking-widest);
text-transform: uppercase;
color: var(--ds-color-text-link);
}
/* Overline — same as eyebrow but contrast-low */
.ds-overline {
font-size: var(--ds-text-2xs);
font-weight: var(--ds-font-semibold);
letter-spacing: var(--ds-tracking-widest);
text-transform: uppercase;
color: var(--ds-color-text-subtle);
}
/* Caption — used on figures, micro-help, footnotes */
.ds-caption {
font-size: var(--ds-text-xs);
color: var(--ds-color-text-muted);
line-height: var(--ds-leading-normal);
}
/* Code chip */
.ds-code {
font-family: var(--ds-font-mono);
font-size: 0.92em;
padding: 2px 6px;
border-radius: var(--ds-radius-xs);
background: var(--ds-color-surface);
border: 1px solid var(--ds-color-border-subtle);
color: var(--ds-color-text);
}
/* ============================================================ */
/* PROSE — long-form (blog posts, docs) */
/* ============================================================ */
.ds-prose {
font-size: var(--ds-text-lg);
line-height: var(--ds-leading-relaxed);
color: var(--ds-color-text);
max-width: var(--ds-container-prose);
}
.ds-prose > * + * { margin-top: 1em; }
.ds-prose h1 { font-size: clamp(1.875rem, 0.95rem + 2.6vw, 2.625rem); font-family: var(--ds-font-display); font-weight: var(--ds-font-bold); margin: 1.6em 0 .6em; letter-spacing: var(--ds-tracking-tight); line-height: var(--ds-leading-tight); }
.ds-prose h2 { font-size: clamp(1.5rem, 0.95rem + 1.8vw, 2rem); font-family: var(--ds-font-display); font-weight: var(--ds-font-bold); margin: 1.6em 0 .6em; letter-spacing: var(--ds-tracking-tight); line-height: var(--ds-leading-snug); }
.ds-prose h3 { font-size: clamp(1.25rem, 0.95rem + 1.0vw, 1.5rem); font-family: var(--ds-font-display); font-weight: var(--ds-font-bold); margin: 1.4em 0 .5em; letter-spacing: var(--ds-tracking-tight); }
.ds-prose h4 { font-size: var(--ds-text-xl); font-weight: var(--ds-font-semibold); margin: 1.4em 0 .5em; }
.ds-prose p { color: var(--ds-color-text); margin: 1em 0; }
.ds-prose a { color: var(--ds-color-text-link); text-decoration: underline; text-decoration-color: var(--ds-color-border-strong); text-underline-offset: 0.18em; transition: var(--ds-transition-color); }
.ds-prose a:hover { color: var(--ds-color-text-link-hover); text-decoration-color: var(--ds-color-text-link-hover); }
.ds-prose strong { font-weight: var(--ds-font-semibold); color: var(--ds-color-text); }
.ds-prose em { font-style: italic; }
.ds-prose ul, .ds-prose ol { padding-left: 1.4em; margin: 1em 0; color: var(--ds-color-text); }
.ds-prose li { margin: .35em 0; }
.ds-prose li::marker { color: var(--ds-color-text-muted); }
.ds-prose blockquote {
margin: 1.6em 0;
padding: 1em 1.2em;
border-left: 3px solid var(--ds-color-primary);
background: var(--ds-color-primary-soft);
border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0;
color: var(--ds-color-text);
font-style: italic;
}
.ds-prose blockquote p { margin: 0; }
.ds-prose pre {
background: var(--ds-color-bg-elevated);
border: 1px solid var(--ds-color-border);
border-radius: var(--ds-radius-lg);
padding: 14px 16px;
overflow-x: auto;
font-family: var(--ds-font-mono);
font-size: var(--ds-text-sm);
line-height: var(--ds-leading-relaxed);
}
.ds-prose code { font-family: var(--ds-font-mono); font-size: 0.92em; padding: 2px 6px; background: var(--ds-color-surface); border-radius: var(--ds-radius-xs); }
.ds-prose pre code { padding: 0; background: transparent; border: 0; font-size: inherit; }
.ds-prose hr { border: 0; border-top: 1px solid var(--ds-color-border-subtle); margin: 2em 0; }
.ds-prose img { border-radius: var(--ds-radius-lg); }
.ds-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: var(--ds-text-sm); }
.ds-prose th, .ds-prose td { padding: 10px 12px; border-bottom: 1px solid var(--ds-color-border-subtle); text-align: left; }
.ds-prose th { color: var(--ds-color-text-muted); font-weight: var(--ds-font-semibold); }
/* ============================================================ */
/* TRUNCATION HELPERS */
/* ============================================================ */
.ds-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.ds-clamp-2,
.ds-clamp-3,
.ds-clamp-4 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ds-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.ds-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.ds-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }
/* ============================================================ */
/* RESPONSIVE TUNING */
/* ============================================================ */
/* Slightly tighter lead text on narrow viewports */
@media (max-width: 480px) {
.ds-lead { font-size: var(--ds-text-md); }
}
/* ===== ds-layout-v4.css ===== */
/**
* Booknetic for Theme V4 — Design System layout primitives.
*
* Composable building blocks (Every Layout pattern, modernized):
* .ds-container — responsive content cradle with gutter
* .ds-section — vertical rhythm spacing
* .ds-stack — vertical flow with consistent gap
* .ds-cluster — wrap-friendly horizontal group
* .ds-row — single-line horizontal with gap
* .ds-split — first/last anchored, middle grows
* .ds-grid — responsive grid with min/max sizing
* .ds-grid--{2,3,4} — fixed column counts
* .ds-sidebar-layout — sidebar that flips to single column under bp
* .ds-center — center content with max width
* .ds-spacer — generic vertical gap
*
* Modifiers:
* .ds-gap-{1..16} — utility gap overrides
* .ds-pad-{1..12} — utility padding overrides
* .ds-mt-{1..12} — utility margin-top
* .ds-mb-{1..12} — utility margin-bottom
*
* Breakpoints used (CSS-only — no JS):
* sm: 480 / md: 768 / lg: 1024 / xl: 1280 / 2xl: 1536
*/
/* ============================================================ */
/* CONTAINER */
/* ============================================================ */
.ds-container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: var(--ds-gutter);
padding-right: var(--ds-gutter);
max-width: var(--ds-container-xl);
}
.ds-container--xs { max-width: var(--ds-container-xs); }
.ds-container--sm { max-width: var(--ds-container-sm); }
.ds-container--md { max-width: var(--ds-container-md); }
.ds-container--lg { max-width: var(--ds-container-lg); }
.ds-container--xl { max-width: var(--ds-container-xl); }
.ds-container--2xl { max-width: var(--ds-container-2xl); }
.ds-container--prose { max-width: var(--ds-container-prose); }
.ds-container--fluid { max-width: none; }
@media (min-width: 768px) {
.ds-container {
padding-left: var(--ds-gutter-md);
padding-right: var(--ds-gutter-md);
}
}
@media (min-width: 1280px) {
.ds-container {
padding-left: var(--ds-gutter-lg);
padding-right: var(--ds-gutter-lg);
}
}
/* ============================================================ */
/* SECTION */
/* ============================================================ */
.ds-section {
padding-top: var(--ds-section-y);
padding-bottom: var(--ds-section-y);
}
.ds-section--sm { padding-top: var(--ds-section-y-sm); padding-bottom: var(--ds-section-y-sm); }
.ds-section--lg { padding-top: var(--ds-section-y-lg); padding-bottom: var(--ds-section-y-lg); }
.ds-section--flush { padding-top: 0; padding-bottom: 0; }
/* ============================================================ */
/* STACK — vertical flow */
/* ============================================================ */
.ds-stack {
display: flex;
flex-direction: column;
gap: var(--ds-stack-gap, var(--ds-space-4));
}
.ds-stack--xs { --ds-stack-gap: var(--ds-space-2); }
.ds-stack--sm { --ds-stack-gap: var(--ds-space-3); }
.ds-stack--md { --ds-stack-gap: var(--ds-space-4); }
.ds-stack--lg { --ds-stack-gap: var(--ds-space-6); }
.ds-stack--xl { --ds-stack-gap: var(--ds-space-8); }
.ds-stack--2xl { --ds-stack-gap: var(--ds-space-12); }
.ds-stack--center { align-items: center; text-align: center; }
.ds-stack--end { align-items: flex-end; }
/* ============================================================ */
/* CLUSTER — wrap-friendly horizontal */
/* ============================================================ */
.ds-cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-cluster-gap, var(--ds-space-3));
}
.ds-cluster--xs { --ds-cluster-gap: var(--ds-space-1_5); }
.ds-cluster--sm { --ds-cluster-gap: var(--ds-space-2); }
.ds-cluster--lg { --ds-cluster-gap: var(--ds-space-4); }
.ds-cluster--xl { --ds-cluster-gap: var(--ds-space-6); }
.ds-cluster--between { justify-content: space-between; }
.ds-cluster--around { justify-content: space-around; }
.ds-cluster--end { justify-content: flex-end; }
.ds-cluster--center { justify-content: center; }
/* ============================================================ */
/* ROW — single line horizontal (overflow: hidden friendly) */
/* ============================================================ */
.ds-row {
display: flex;
align-items: center;
gap: var(--ds-row-gap, var(--ds-space-3));
min-width: 0;
}
.ds-row > * { min-width: 0; }
.ds-row--between { justify-content: space-between; }
.ds-row--end { justify-content: flex-end; }
.ds-row--center { justify-content: center; }
.ds-row--start { justify-content: flex-start; }
/* ============================================================ */
/* SPLIT — first/last anchored, middle grows (perfect for nav) */
/* ============================================================ */
.ds-split {
display: flex;
align-items: center;
gap: var(--ds-space-4);
}
.ds-split > :nth-child(2) { flex: 1; min-width: 0; }
/* ============================================================ */
/* GRID */
/* ============================================================ */
.ds-grid {
display: grid;
gap: var(--ds-grid-gap, var(--ds-space-4));
}
/* Auto-fill grid with a min column width */
.ds-grid--auto { grid-template-columns: repeat(auto-fill, minmax(var(--ds-grid-min, 240px), 1fr)); }
.ds-grid--auto-sm { --ds-grid-min: 180px; }
.ds-grid--auto-md { --ds-grid-min: 240px; }
.ds-grid--auto-lg { --ds-grid-min: 320px; }
/* Fixed column counts (mobile-first: collapse on narrow widths) */
.ds-grid--1 { grid-template-columns: 1fr; }
.ds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ds-grid--12{ grid-template-columns: repeat(12, minmax(0, 1fr)); }
@media (max-width: 1023px) {
.ds-grid--3,
.ds-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
.ds-grid--2,
.ds-grid--3,
.ds-grid--4 { grid-template-columns: 1fr; }
.ds-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Gap modifiers */
.ds-grid--gap-xs { --ds-grid-gap: var(--ds-space-2); }
.ds-grid--gap-sm { --ds-grid-gap: var(--ds-space-3); }
.ds-grid--gap-md { --ds-grid-gap: var(--ds-space-4); }
.ds-grid--gap-lg { --ds-grid-gap: var(--ds-space-6); }
.ds-grid--gap-xl { --ds-grid-gap: var(--ds-space-8); }
/* ============================================================ */
/* SIDEBAR LAYOUT (sidebar + main) */
/* ============================================================ */
.ds-sidebar-layout {
display: grid;
gap: var(--ds-space-6);
grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
.ds-sidebar-layout {
grid-template-columns: 280px minmax(0, 1fr);
}
.ds-sidebar-layout--right {
grid-template-columns: minmax(0, 1fr) 320px;
}
.ds-sidebar-layout--wide {
grid-template-columns: 320px minmax(0, 1fr);
}
}
/* ============================================================ */
/* CENTER */
/* ============================================================ */
.ds-center {
margin-left: auto;
margin-right: auto;
max-width: var(--ds-center-max, 60ch);
text-align: center;
}
.ds-center--narrow { --ds-center-max: 42ch; }
.ds-center--wide { --ds-center-max: 80ch; }
.ds-center--prose { --ds-center-max: var(--ds-container-prose); }
/* ============================================================ */
/* SPACER */
/* ============================================================ */
.ds-spacer { display: block; height: var(--ds-space-6); }
.ds-spacer--xs { height: var(--ds-space-2); }
.ds-spacer--sm { height: var(--ds-space-4); }
.ds-spacer--md { height: var(--ds-space-6); }
.ds-spacer--lg { height: var(--ds-space-8); }
.ds-spacer--xl { height: var(--ds-space-12); }
.ds-spacer--2xl { height: var(--ds-space-16); }
/* ============================================================ */
/* DIVIDER */
/* ============================================================ */
.ds-divider {
border: 0;
border-top: 1px solid var(--ds-color-border-subtle);
margin: var(--ds-space-6) 0;
}
.ds-divider--strong { border-top-color: var(--ds-color-border); }
.ds-divider--vertical {
width: 1px;
height: 1em;
background: var(--ds-color-border-subtle);
border: 0;
margin: 0 var(--ds-space-3);
display: inline-block;
}
/* ============================================================ */
/* UTILITY OVERRIDES (gap / padding / margin) */
/* ============================================================ */
.ds-gap-0 { gap: 0; }
.ds-gap-1 { gap: var(--ds-space-1); }
.ds-gap-2 { gap: var(--ds-space-2); }
.ds-gap-3 { gap: var(--ds-space-3); }
.ds-gap-4 { gap: var(--ds-space-4); }
.ds-gap-5 { gap: var(--ds-space-5); }
.ds-gap-6 { gap: var(--ds-space-6); }
.ds-gap-8 { gap: var(--ds-space-8); }
.ds-gap-10 { gap: var(--ds-space-10); }
.ds-gap-12 { gap: var(--ds-space-12); }
.ds-gap-16 { gap: var(--ds-space-16); }
.ds-pad-0 { padding: 0; }
.ds-pad-1 { padding: var(--ds-space-1); }
.ds-pad-2 { padding: var(--ds-space-2); }
.ds-pad-3 { padding: var(--ds-space-3); }
.ds-pad-4 { padding: var(--ds-space-4); }
.ds-pad-5 { padding: var(--ds-space-5); }
.ds-pad-6 { padding: var(--ds-space-6); }
.ds-pad-8 { padding: var(--ds-space-8); }
.ds-pad-12 { padding: var(--ds-space-12); }
.ds-mt-0 { margin-top: 0; }
.ds-mt-1 { margin-top: var(--ds-space-1); }
.ds-mt-2 { margin-top: var(--ds-space-2); }
.ds-mt-3 { margin-top: var(--ds-space-3); }
.ds-mt-4 { margin-top: var(--ds-space-4); }
.ds-mt-6 { margin-top: var(--ds-space-6); }
.ds-mt-8 { margin-top: var(--ds-space-8); }
.ds-mt-12 { margin-top: var(--ds-space-12); }
.ds-mb-0 { margin-bottom: 0; }
.ds-mb-1 { margin-bottom: var(--ds-space-1); }
.ds-mb-2 { margin-bottom: var(--ds-space-2); }
.ds-mb-3 { margin-bottom: var(--ds-space-3); }
.ds-mb-4 { margin-bottom: var(--ds-space-4); }
.ds-mb-6 { margin-bottom: var(--ds-space-6); }
.ds-mb-8 { margin-bottom: var(--ds-space-8); }
.ds-mb-12 { margin-bottom: var(--ds-space-12); }
/* Safe-area padding (mobile notch) */
.ds-pad-safe-bottom { padding-bottom: max(var(--ds-space-4), env(safe-area-inset-bottom)); }
.ds-pad-safe-top { padding-top: max(var(--ds-space-4), env(safe-area-inset-top)); }
/* ============================================================ */
/* RESPONSIVE VISIBILITY */
/* ============================================================ */
.ds-hide { display: none !important; }
.ds-block { display: block !important; }
.ds-inline { display: inline !important; }
.ds-inline-block { display: inline-block !important; }
.ds-inline-flex { display: inline-flex !important; }
.ds-flex { display: flex !important; }
@media (max-width: 767px) { .ds-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .ds-show-mobile { display: none !important; } }
@media (max-width: 1023px) { .ds-hide-tablet { display: none !important; } }
@media (min-width: 1024px) { .ds-show-tablet { display: none !important; } }
@media (max-width: 1279px) { .ds-hide-desktop { display: none !important; } }
@media (min-width: 1280px) { .ds-show-desktop { display: none !important; } }
/* ===== ds-components-v4.css ===== */
/**
* Booknetic for Theme V4 — Design System component primitives.
*
* Buttons, inputs, selects, textarea, switch, checkbox, radio, badge,
* pill, alert, tooltip, dropdown, tabs, accordion, breadcrumbs, table.
*
* Every component:
* • Has size variants (sm / md / lg) where it makes sense
* • Has hover / focus-visible / active / disabled / is-loading states
* • Uses --ds-* tokens — no hard-coded colors
* • Honors prefers-reduced-motion via shared transitions
*/
/* ============================================================ */
/* BUTTON */
/* ============================================================ */
.ds-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ds-space-2);
height: var(--ds-control-h);
padding: 0 var(--ds-space-5);
background: transparent;
border: 1px solid transparent;
border-radius: var(--ds-radius-button);
color: var(--ds-color-text);
font-family: inherit;
font-size: var(--ds-text-sm);
font-weight: var(--ds-font-semibold);
letter-spacing: var(--ds-tracking-normal);
line-height: 1;
cursor: pointer;
text-decoration: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: var(--ds-transition-all);
white-space: nowrap;
}
.ds-btn:active { transform: scale(0.97); }
.ds-btn:focus-visible { outline: 0; box-shadow: var(--ds-ring-focus); }
.ds-btn[disabled],
.ds-btn.is-disabled {
opacity: var(--ds-opacity-disabled);
cursor: not-allowed;
pointer-events: none;
}
/* Variants */
.ds-btn--primary {
background: var(--ds-gradient-cta);
color: var(--ds-color-primary-contrast);
box-shadow: var(--ds-shadow-cta);
}
.ds-btn--primary:hover { background: var(--ds-gradient-cta-hover); box-shadow: var(--ds-shadow-cta-h); }
.ds-btn--secondary {
background: var(--ds-color-surface);
border-color: var(--ds-color-border);
color: var(--ds-color-text);
}
.ds-btn--secondary:hover { background: var(--ds-color-surface-hover); border-color: var(--ds-color-border-strong); }
.ds-btn--ghost {
background: transparent;
color: var(--ds-color-text-muted);
}
.ds-btn--ghost:hover { background: var(--ds-color-surface); color: var(--ds-color-text); }
.ds-btn--link {
background: transparent;
color: var(--ds-color-text-link);
height: auto;
padding: 0;
font-weight: var(--ds-font-medium);
}
.ds-btn--link:hover { color: var(--ds-color-text-link-hover); text-decoration: underline; text-underline-offset: 0.2em; }
.ds-btn--link:active { transform: none; }
.ds-btn--success {
background: var(--ds-gradient-success);
color: var(--ds-color-primary-contrast);
box-shadow: var(--ds-shadow-success);
}
.ds-btn--warning {
background: var(--ds-gradient-warning);
color: #1F1300;
}
.ds-btn--danger {
background: var(--ds-gradient-danger);
color: var(--ds-color-primary-contrast);
box-shadow: var(--ds-shadow-danger);
}
.ds-btn--danger-ghost {
background: transparent;
border-color: rgba(251, 113, 133, 0.4);
color: var(--ds-color-danger-text);
}
.ds-btn--danger-ghost:hover { background: var(--ds-color-danger-soft); border-color: rgba(251, 113, 133, 0.6); }
/* Sizes */
.ds-btn--sm { height: var(--ds-control-h-sm); padding: 0 var(--ds-space-3); font-size: var(--ds-text-xs); }
.ds-btn--lg { height: var(--ds-control-h-lg); padding: 0 var(--ds-space-6); font-size: var(--ds-text-md); }
.ds-btn--xl { height: var(--ds-control-h-xl); padding: 0 var(--ds-space-8); font-size: var(--ds-text-lg); }
.ds-btn--block { display: flex; width: 100%; }
.ds-btn--icon { padding: 0; width: var(--ds-control-h); }
.ds-btn--icon.ds-btn--sm { width: var(--ds-control-h-sm); }
.ds-btn--icon.ds-btn--lg { width: var(--ds-control-h-lg); }
.ds-btn--pill { border-radius: var(--ds-radius-pill); padding-left: var(--ds-space-5); padding-right: var(--ds-space-5); }
/* Loading state */
.ds-btn.is-loading { color: transparent !important; pointer-events: none; }
.ds-btn.is-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid currentColor;
color: var(--ds-color-text);
border-right-color: transparent;
border-radius: 50%;
animation: ds-spin 720ms linear infinite;
}
.ds-btn--primary.is-loading::after,
.ds-btn--success.is-loading::after,
.ds-btn--danger.is-loading::after { color: var(--ds-color-primary-contrast); }
@keyframes ds-spin { to { transform: rotate(360deg); } }
/* Reset for kbd inside button */
.ds-btn .ds-kbd { margin-left: auto; }
/* ============================================================ */
/* KBD */
/* ============================================================ */
.ds-kbd {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 6px;
background: var(--ds-color-surface);
border: 1px solid var(--ds-color-border);
border-radius: var(--ds-radius-xs);
color: var(--ds-color-text-muted);
font: 600 var(--ds-text-2xs)/1 var(--ds-font-mono);
letter-spacing: var(--ds-tracking-wider);
}
/* ============================================================ */
/* INPUT / TEXTAREA / SELECT */
/* ============================================================ */
.ds-input,
.ds-textarea,
.ds-select {
width: 100%;
min-width: 0;
height: var(--ds-control-h);
padding: 0 var(--ds-space-3);
background: var(--ds-color-surface);
border: 1px solid var(--ds-color-border);
border-radius: var(--ds-radius-input);
color: var(--ds-color-text);
font-family: inherit;
font-size: var(--ds-text-sm);
line-height: 1.4;
outline: none;
box-shadow: var(--ds-shadow-xs);
transition: var(--ds-transition-border), var(--ds-transition-shadow), var(--ds-transition-bg);
-webkit-appearance: none;
appearance: none;
}
.ds-input::placeholder,
.ds-textarea::placeholder { color: var(--ds-color-text-subtle); opacity: 1; }
.ds-input:hover,
.ds-textarea:hover,
.ds-select:hover { border-color: var(--ds-color-border-strong); }
.ds-input:focus,
.ds-textarea:focus,
.ds-select:focus {
border-color: var(--ds-color-border-focus);
box-shadow: var(--ds-ring-focus);
background: var(--ds-color-surface-active);
}
.ds-input[aria-invalid="true"],
.ds-input.is-invalid,
.ds-textarea.is-invalid {
border-color: var(--ds-color-border-error);
box-shadow: var(--ds-ring-danger);
}
.ds-input[disabled],
.ds-textarea[disabled],
.ds-select[disabled] {
opacity: var(--ds-opacity-disabled);
cursor: not-allowed;
}
.ds-textarea {
height: auto;
min-height: 96px;
padding: var(--ds-space-3) var(--ds-space-3);
resize: vertical;
}
/* Native select chevron */
.ds-select {
padding-right: var(--ds-space-8);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--ds-space-3) center;
background-size: 14px 14px;
}
/* Sizes */
.ds-input--sm, .ds-select--sm, .ds-textarea--sm { height: var(--ds-control-h-sm); font-size: var(--ds-text-xs); padding: 0 var(--ds-space-3); }
.ds-input--lg, .ds-select--lg { height: var(--ds-control-h-lg); font-size: var(--ds-text-md); padding: 0 var(--ds-space-4); }
.ds-input--xl, .ds-select--xl { height: var(--ds-control-h-xl); font-size: var(--ds-text-lg); padding: 0 var(--ds-space-5); }
/* ============================================================ */
/* FIELD WRAPPER (label + helper + error) */
/* ============================================================ */
.ds-field {
display: flex;
flex-direction: column;
gap: var(--ds-space-1_5);
min-width: 0;
}
.ds-label {
display: block;
font-size: var(--ds-text-xs);
font-weight: var(--ds-font-semibold);
color: var(--ds-color-text-secondary);
letter-spacing: var(--ds-tracking-wide);
}
.ds-label--required::after {
content: "*";
color: var(--ds-color-danger-text);
margin-left: 2px;
}
.ds-field__hint {
font-size: var(--ds-text-xs);
color: var(--ds-color-text-subtle);
margin: 0;
}
.ds-field__error {
font-size: var(--ds-text-xs);
color: var(--ds-color-danger-text);
margin: 0;
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
}
/* Input affixes (icon left, kbd right, button right) */
.ds-input-wrap {
position: relative;
display: block;
width: 100%;
}
.ds-input-wrap__icon-left,
.ds-input-wrap__icon-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
color: var(--ds-color-text-muted);
pointer-events: none;
}
.ds-input-wrap__icon-left { left: var(--ds-space-3); }
.ds-input-wrap__icon-right { right: var(--ds-space-3); }
.ds-input-wrap--has-left .ds-input { padding-left: 36px; }
.ds-input-wrap--has-right .ds-input { padding-right: 36px; }
.ds-input-wrap__action {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
pointer-events: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
border: 0;
border-radius: var(--ds-radius-sm);
color: var(--ds-color-text-muted);
cursor: pointer;
transition: var(--ds-transition-color), var(--ds-transition-bg);
}
.ds-input-wrap__action:hover { background: var(--ds-color-surface); color: var(--ds-color-text); }
/* ============================================================ */
/* CHECKBOX & RADIO */
/* ============================================================ */
.ds-check,
.ds-radio {
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
cursor: pointer;
font-size: var(--ds-text-sm);
color: var(--ds-color-text-secondary);
user-select: none;
}
.ds-check input,
.ds-radio input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.ds-check__box,
.ds-radio__dot {
flex-shrink: 0;
width: 18px;
height: 18px;
background: var(--ds-color-surface);
border: 1.5px solid var(--ds-color-border-strong);
transition: var(--ds-transition-border), var(--ds-transition-bg);
position: relative;
}
.ds-check__box { border-radius: 5px; }
.ds-radio__dot { border-radius: 50%; }
.ds-check input:checked + .ds-check__box,
.ds-radio input:checked + .ds-radio__dot {
background: var(--ds-color-primary);
border-color: var(--ds-color-primary);
}
.ds-check input:checked + .ds-check__box::after {
content: "";
position: absolute;
left: 5px; top: 1px;
width: 5px; height: 10px;
border: solid var(--ds-color-primary-contrast);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.ds-radio input:checked + .ds-radio__dot::after {
content: "";
position: absolute;
inset: 4px;
background: var(--ds-color-primary-contrast);
border-radius: 50%;
}
.ds-check input:focus-visible + .ds-check__box,
.ds-radio input:focus-visible + .ds-radio__dot { box-shadow: var(--ds-ring-focus); }
/* ============================================================ */
/* SWITCH */
/* ============================================================ */
.ds-switch {
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
cursor: pointer;
font-size: var(--ds-text-sm);
color: var(--ds-color-text-secondary);
user-select: none;
}
.ds-switch input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.ds-switch__track {
position: relative;
width: 36px;
height: 22px;
background: var(--ds-color-border);
border-radius: var(--ds-radius-pill);
transition: var(--ds-transition-bg);
}
.ds-switch__track::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 16px;
height: 16px;
background: #FFFFFF;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
transition: transform var(--ds-dur-fast) var(--ds-ease-premium);
}
.ds-switch input:checked + .ds-switch__track { background: var(--ds-gradient-cta); }
.ds-switch input:checked + .ds-switch__track::after { transform: translateX(14px); }
.ds-switch input:focus-visible + .ds-switch__track { box-shadow: var(--ds-ring-focus); }
/* ============================================================ */
/* BADGE / PILL */
/* ============================================================ */
.ds-badge,
.ds-pill {
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
padding: 2px 8px;
background: var(--ds-color-surface);
color: var(--ds-color-text-secondary);
font-size: var(--ds-text-2xs);
font-weight: var(--ds-font-semibold);
border-radius: var(--ds-radius-xs);
white-space: nowrap;
}
.ds-pill { border-radius: var(--ds-radius-pill); padding: 3px 10px; }
.ds-badge--brand, .ds-pill--brand { background: var(--ds-color-primary-soft); color: var(--ds-purple-300); }
.ds-badge--success, .ds-pill--success { background: var(--ds-color-success-soft); color: var(--ds-color-success-text); }
.ds-badge--warning, .ds-pill--warning { background: var(--ds-color-warning-soft); color: var(--ds-color-warning-text); }
.ds-badge--danger, .ds-pill--danger { background: var(--ds-color-danger-soft); color: var(--ds-color-danger-text); }
.ds-badge--info, .ds-pill--info { background: var(--ds-color-info-soft); color: var(--ds-color-info-text); }
.ds-badge--dot::before,
.ds-pill--dot::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 6px currentColor;
}
/* ============================================================ */
/* ALERT */
/* ============================================================ */
.ds-alert {
display: flex;
align-items: flex-start;
gap: var(--ds-space-3);
padding: var(--ds-space-3) var(--ds-space-4);
background: var(--ds-color-surface);
border: 1px solid var(--ds-color-border-subtle);
border-left-width: 3px;
border-radius: var(--ds-radius-md);
color: var(--ds-color-text);
font-size: var(--ds-text-sm);
line-height: var(--ds-leading-relaxed);
}
.ds-alert--info { background: var(--ds-color-info-soft); border-left-color: var(--ds-color-info); }
.ds-alert--success { background: var(--ds-color-success-soft); border-left-color: var(--ds-color-success); }
.ds-alert--warning { background: var(--ds-color-warning-soft); border-left-color: var(--ds-color-warning); }
.ds-alert--danger { background: var(--ds-color-danger-soft); border-left-color: var(--ds-color-danger); }
.ds-alert__icon { flex-shrink: 0; color: currentColor; margin-top: 2px; }
.ds-alert__title { font-weight: var(--ds-font-semibold); margin: 0 0 2px; }
.ds-alert__body { color: var(--ds-color-text-muted); margin: 0; }
/* ============================================================ */
/* TOOLTIP (CSS-only, uses native title fallback) */
/* ============================================================ */
.ds-tooltip {
position: relative;
display: inline-block;
}
.ds-tooltip__bubble {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: var(--ds-color-bg-elevated);
border: 1px solid var(--ds-color-border);
border-radius: var(--ds-radius-sm);
color: var(--ds-color-text);
font-size: var(--ds-text-xs);
font-weight: var(--ds-font-medium);
padding: 6px 10px;
white-space: nowrap;
box-shadow: var(--ds-shadow-md);
opacity: 0;
pointer-events: none;
transition: opacity var(--ds-dur-fast) var(--ds-ease-out), transform var(--ds-dur-fast) var(--ds-ease-out);
z-index: var(--ds-z-tooltip);
}
.ds-tooltip:hover .ds-tooltip__bubble,
.ds-tooltip:focus-within .ds-tooltip__bubble {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ============================================================ */
/* DROPDOWN MENU */
/* ============================================================ */
.ds-dropdown {
position: relative;
display: inline-flex;
}
.ds-dropdown__panel {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 200px;
background: var(--ds-color-bg-elevated);
border: 1px solid var(--ds-color-border);
border-radius: var(--ds-radius-lg);
padding: var(--ds-space-1);
box-shadow: var(--ds-shadow-xl);
z-index: var(--ds-z-dropdown);
opacity: 0;
pointer-events: none;
transform: translateY(-4px) scale(0.98);
transition: opacity var(--ds-dur-fast) var(--ds-ease-out), transform var(--ds-dur-fast) var(--ds-ease-out);
}
.ds-dropdown__panel--left { right: auto; left: 0; }
.ds-dropdown[data-open="true"] .ds-dropdown__panel {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.ds-dropdown__item {
display: flex;
align-items: center;
gap: var(--ds-space-2);
width: 100%;
padding: var(--ds-space-2) var(--ds-space-3);
background: transparent;
border: 0;
border-radius: var(--ds-radius-sm);
color: var(--ds-color-text);
font: inherit;
font-size: var(--ds-text-sm);
cursor: pointer;
text-align: left;
text-decoration: none;
transition: var(--ds-transition-bg), var(--ds-transition-color);
}
.ds-dropdown__item:hover { background: var(--ds-color-surface); }
.ds-dropdown__item.is-active { background: var(--ds-color-surface-active); color: var(--ds-color-text-link); }
.ds-dropdown__item--danger { color: var(--ds-color-danger-text); }
.ds-dropdown__item--danger:hover { background: var(--ds-color-danger-soft); }
.ds-dropdown__divider {
height: 1px;
margin: var(--ds-space-1) var(--ds-space-1);
background: var(--ds-color-border-subtle);
}
/* ============================================================ */
/* TABS */
/* ============================================================ */
.ds-tabs {
display: inline-flex;
background: var(--ds-color-surface);
border: 1px solid var(--ds-color-border);
border-radius: var(--ds-radius-lg);
padding: 3px;
gap: 2px;
}
.ds-tabs__btn {
display: inline-flex;
align-items: center;
gap: var(--ds-space-1_5);
height: 30px;
padding: 0 var(--ds-space-3);
background: transparent;
border: 0;
border-radius: var(--ds-radius-sm);
color: var(--ds-color-text-muted);
font: inherit;
font-size: var(--ds-text-xs);
font-weight: var(--ds-font-semibold);
cursor: pointer;
transition: var(--ds-transition-all);
}
.ds-tabs__btn:hover { color: var(--ds-color-text); }
.ds-tabs__btn[aria-selected="true"],
.ds-tabs__btn.is-active {
background: var(--ds-gradient-cta);
color: var(--ds-color-primary-contrast);
box-shadow: 0 4px 12px -4px rgba(139, 92, 246, 0.5);
}
/* Tabs underline variant */
.ds-tabs--underline {
background: transparent;
border: 0;
border-bottom: 1px solid var(--ds-color-border-subtle);
border-radius: 0;
padding: 0;
gap: var(--ds-space-4);
}
.ds-tabs--underline .ds-tabs__btn {
height: 40px;
border-radius: 0;
border-bottom: 2px solid transparent;
padding: 0 var(--ds-space-1);
}
.ds-tabs--underline .ds-tabs__btn[aria-selected="true"],
.ds-tabs--underline .ds-tabs__btn.is-active {
background: transparent;
color: var(--ds-color-text);
box-shadow: none;
border-bottom-color: var(--ds-color-primary);
}
/* ============================================================ */
/* ACCORDION (native ) */
/* ============================================================ */
.ds-accordion {
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
}
.ds-accordion__item {
background: var(--ds-color-surface);
border: 1px solid var(--ds-color-border-subtle);
border-radius: var(--ds-radius-md);
overflow: hidden;
transition: var(--ds-transition-border);
}
.ds-accordion__item[open] { border-color: var(--ds-color-border); }
.ds-accordion__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-3);
padding: var(--ds-space-3) var(--ds-space-4);
cursor: pointer;
font-size: var(--ds-text-sm);
font-weight: var(--ds-font-semibold);
color: var(--ds-color-text);
list-style: none;
}
.ds-accordion__summary::-webkit-details-marker { display: none; }
.ds-accordion__summary::after {
content: "";
width: 12px;
height: 12px;
border-right: 1.5px solid var(--ds-color-text-muted);
border-bottom: 1.5px solid var(--ds-color-text-muted);
transform: rotate(45deg);
transition: transform var(--ds-dur-fast) var(--ds-ease-out);
}
.ds-accordion__item[open] .ds-accordion__summary::after {
transform: rotate(-135deg);
}
.ds-accordion__body {
padding: 0 var(--ds-space-4) var(--ds-space-4);
color: var(--ds-color-text-muted);
font-size: var(--ds-text-sm);
line-height: var(--ds-leading-relaxed);
}
/* ============================================================ */
/* BREADCRUMBS */
/* ============================================================ */
.ds-breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-1_5);
font-size: var(--ds-text-xs);
color: var(--ds-color-text-muted);
}
.ds-breadcrumbs a {
color: var(--ds-color-text-muted);
text-decoration: none;
transition: var(--ds-transition-color);
}
.ds-breadcrumbs a:hover { color: var(--ds-color-text); }
.ds-breadcrumbs__sep::before { content: "/"; color: var(--ds-color-text-subtle); }
.ds-breadcrumbs__current { color: var(--ds-color-text); font-weight: var(--ds-font-semibold); }
/* ============================================================ */
/* TABLE */
/* ============================================================ */
.ds-table {
width: 100%;
border-collapse: collapse;
background: var(--ds-color-surface);
border: 1px solid var(--ds-color-border-subtle);
border-radius: var(--ds-radius-lg);
overflow: hidden;
font-size: var(--ds-text-sm);
color: var(--ds-color-text);
}
.ds-table thead th {
padding: var(--ds-space-3) var(--ds-space-4);
text-align: left;
color: var(--ds-color-text-muted);
font-size: var(--ds-text-2xs);
font-weight: var(--ds-font-bold);
letter-spacing: var(--ds-tracking-wider);
text-transform: uppercase;
background: var(--ds-color-surface-muted);
border-bottom: 1px solid var(--ds-color-border-subtle);
}
.ds-table tbody td {
padding: var(--ds-space-3) var(--ds-space-4);
border-bottom: 1px solid var(--ds-color-border-subtle);
color: var(--ds-color-text);
vertical-align: middle;
}
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover td { background: var(--ds-color-surface-hover); }
/* ============================================================ */
/* AVATAR */
/* ============================================================ */
.ds-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
background: var(--ds-gradient-cta);
color: var(--ds-color-primary-contrast);
font-size: var(--ds-text-sm);
font-weight: var(--ds-font-bold);
flex-shrink: 0;
border: 2px solid transparent;
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-avatar--sm { width: 28px; height: 28px; font-size: var(--ds-text-2xs); }
.ds-avatar--lg { width: 56px; height: 56px; font-size: var(--ds-text-lg); }
.ds-avatar--xl { width: 80px; height: 80px; font-size: var(--ds-text-2xl); }
.ds-avatar-stack { display: inline-flex; }
.ds-avatar-stack .ds-avatar + .ds-avatar { margin-left: -10px; border-color: var(--ds-color-bg); }
/* ============================================================ */
/* REDUCED MOTION */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
.ds-btn,
.ds-input, .ds-textarea, .ds-select,
.ds-dropdown__panel,
.ds-tooltip__bubble,
.ds-switch__track::after,
.ds-accordion__summary::after,
.ds-tabs__btn {
transition: none !important;
animation: none !important;
}
.ds-btn:active { transform: none !important; }
}
/* ===== ds-cards-v4.css ===== */
/**
* Booknetic for Theme V4 — Design System cards.
*
* .ds-card — base card primitive (composable)
* .ds-card--feature — feature card with icon, title, body, CTA
* .ds-card--pricing — pricing card with header/price/features/cta
* .ds-card--testimonial— quote + avatar + role
* .ds-card--profession — profession select card (icon big + label)
* .ds-card--stat — stat number with label + delta
* .ds-card--media — image-top card
* .ds-card--bordered — heavier border, no shadow
* .ds-card--ghost — transparent bg, only border
* .ds-card--interactive— hover lift + clickable cursor
* .ds-card--featured — gradient border ribbon (pricing emphasis)
*/
/* ============================================================ */
/* BASE */
/* ============================================================ */
.ds-card {
display: flex;
flex-direction: column;
gap: var(--ds-space-3);
padding: var(--ds-space-5);
background: var(--ds-color-surface);
border: 1px solid var(--ds-color-border-subtle);
border-radius: var(--ds-radius-card);
box-shadow: var(--ds-shadow-md);
color: var(--ds-color-text);
transition: var(--ds-transition-all);
position: relative;
}
.ds-card--lg { padding: var(--ds-space-6); border-radius: var(--ds-radius-card-lg); }
.ds-card--sm { padding: var(--ds-space-4); gap: var(--ds-space-2); }
.ds-card--bordered{ background: transparent; border-color: var(--ds-color-border); box-shadow: none; }
.ds-card--ghost { background: transparent; border: 0; box-shadow: none; padding: 0; }
.ds-card--flat { box-shadow: none; }
.ds-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ds-space-3);
}
.ds-card__title {
font-family: var(--ds-font-display);
font-size: var(--ds-text-lg);
font-weight: var(--ds-font-bold);
letter-spacing: var(--ds-tracking-tight);
color: var(--ds-color-text);
margin: 0;
line-height: var(--ds-leading-snug);
}
.ds-card__subtitle {
font-size: var(--ds-text-sm);
color: var(--ds-color-text-muted);
margin: 0;
line-height: var(--ds-leading-relaxed);
}
.ds-card__body {
font-size: var(--ds-text-sm);
color: var(--ds-color-text-muted);
line-height: var(--ds-leading-relaxed);
}
.ds-card__footer {
display: flex;
align-items: center;
gap: var(--ds-space-2);
margin-top: auto;
padding-top: var(--ds-space-2);
}
.ds-card--interactive {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ds-card--interactive:hover {
background: var(--ds-color-surface-hover);
border-color: var(--ds-color-border);
box-shadow: var(--ds-shadow-lg);
transform: translate3d(0, -2px, 0);
}
.ds-card--interactive:active { transform: scale(0.99); }
/* ============================================================ */
/* FEATURE CARD */
/* ============================================================ */
.ds-card--feature {
gap: var(--ds-space-3);
}
.ds-card--feature .ds-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--ds-color-primary-soft);
color: var(--ds-purple-300);
border-radius: var(--ds-radius-lg);
margin-bottom: var(--ds-space-1);
}
/* ============================================================ */
/* PRICING CARD */
/* ============================================================ */
.ds-card--pricing {
gap: var(--ds-space-4);
min-height: 100%;
}
.ds-card--pricing .ds-card__pricing-head {
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
}
.ds-card--pricing .ds-card__plan-name {
font-size: var(--ds-text-sm);
font-weight: var(--ds-font-bold);
letter-spacing: var(--ds-tracking-wide);
color: var(--ds-color-text);
text-transform: uppercase;
margin: 0;
}
.ds-card--pricing .ds-card__plan-tagline {
font-size: var(--ds-text-sm);
color: var(--ds-color-text-muted);
margin: 0;
}
.ds-card--pricing .ds-card__plan-price {
display: flex;
align-items: baseline;
gap: var(--ds-space-1);
margin: var(--ds-space-3) 0 var(--ds-space-1);
}
.ds-card--pricing .ds-card__plan-price-amount {
font-family: var(--ds-font-display);
font-size: var(--ds-text-6xl);
font-weight: var(--ds-font-bold);
letter-spacing: var(--ds-tracking-tighter);
color: var(--ds-color-text);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.ds-card--pricing .ds-card__plan-price-cycle {
font-size: var(--ds-text-sm);
color: var(--ds-color-text-muted);
}
.ds-card--pricing .ds-card__plan-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
}
.ds-card--pricing .ds-card__plan-features li {
display: flex;
align-items: flex-start;
gap: var(--ds-space-2);
font-size: var(--ds-text-sm);
color: var(--ds-color-text-secondary);
line-height: var(--ds-leading-relaxed);
}
.ds-card--pricing .ds-card__plan-features li::before {
content: "";
flex-shrink: 0;
margin-top: 4px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--ds-color-success-soft);
background-image: url("data:image/svg+xml;utf8,");
background-size: 10px 10px;
background-position: center;
background-repeat: no-repeat;
}
.ds-card--pricing .ds-card__plan-features li.is-locked {
color: var(--ds-color-text-subtle);
text-decoration-line: line-through;
text-decoration-color: rgba(255, 255, 255, 0.15);
}
.ds-card--pricing .ds-card__plan-features li.is-locked::before {
background-image: url("data:image/svg+xml;utf8,");
background-color: rgba(255, 255, 255, 0.04);
}
.ds-card--pricing .ds-card__plan-cta {
margin-top: auto;
}
/* Featured (recommended) pricing card */
.ds-card--featured {
background: linear-gradient(180deg, rgba(139, 92, 246, 0.10) 0%, rgba(99, 102, 241, 0.04) 100%);
border: 1px solid transparent;
box-shadow: var(--ds-shadow-lg), var(--ds-shadow-glow-sm);
position: relative;
overflow: visible;
}
.ds-card--featured::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: var(--ds-gradient-brand);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 0;
}
.ds-card--featured > * { position: relative; z-index: 1; }
.ds-card__ribbon {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
padding: 4px 12px;
background: var(--ds-gradient-cta);
color: var(--ds-color-primary-contrast);
font-size: var(--ds-text-2xs);
font-weight: var(--ds-font-bold);
letter-spacing: var(--ds-tracking-wider);
text-transform: uppercase;
border-radius: var(--ds-radius-pill);
box-shadow: var(--ds-shadow-cta);
z-index: 2;
}
/* ============================================================ */
/* TESTIMONIAL CARD */
/* ============================================================ */
.ds-card--testimonial {
gap: var(--ds-space-4);
}
.ds-card__quote {
font-size: var(--ds-text-lg);
line-height: var(--ds-leading-relaxed);
color: var(--ds-color-text);
margin: 0;
font-style: italic;
letter-spacing: var(--ds-tracking-tight);
}
.ds-card__quote-mark {
font-family: var(--ds-font-display);
font-size: 48px;
line-height: 0.6;
color: var(--ds-color-primary);
opacity: 0.45;
margin: 0 0 -8px;
}
.ds-card__attribution {
display: flex;
align-items: center;
gap: var(--ds-space-3);
}
.ds-card__attribution-name {
font-size: var(--ds-text-sm);
font-weight: var(--ds-font-semibold);
color: var(--ds-color-text);
line-height: 1.3;
}
.ds-card__attribution-role {
font-size: var(--ds-text-xs);
color: var(--ds-color-text-muted);
}
.ds-card__stars {
display: inline-flex;
gap: 2px;
color: #FBBF24;
}
.ds-card__stars svg { width: 14px; height: 14px; fill: currentColor; }
/* ============================================================ */
/* PROFESSION CARD */
/* ============================================================ */
.ds-card--profession {
align-items: center;
text-align: center;
gap: var(--ds-space-2);
padding: var(--ds-space-5) var(--ds-space-3);
cursor: pointer;
transition: var(--ds-transition-all);
}
.ds-card--profession:hover {
background: var(--ds-color-surface-active);
border-color: var(--ds-color-border-focus);
transform: translate3d(0, -2px, 0);
}
.ds-card--profession.is-selected {
background: var(--ds-color-surface-active);
border-color: var(--ds-color-border-focus);
box-shadow: var(--ds-shadow-glow-sm);
}
.ds-card--profession .ds-card__icon {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--ds-color-primary-soft);
color: var(--ds-purple-300);
border-radius: var(--ds-radius-lg);
border: 1px solid var(--ds-color-border-subtle);
}
.ds-card--profession.is-selected .ds-card__icon {
background: var(--ds-color-primary-soft-h);
border-color: var(--ds-color-border-focus);
}
.ds-card--profession .ds-card__label {
font-size: var(--ds-text-sm);
font-weight: var(--ds-font-semibold);
color: var(--ds-color-text);
letter-spacing: var(--ds-tracking-normal);
line-height: var(--ds-leading-snug);
}
/* ============================================================ */
/* STAT CARD */
/* ============================================================ */
.ds-card--stat {
gap: var(--ds-space-1);
padding: var(--ds-space-5);
}
.ds-card__stat-label {
font-size: var(--ds-text-2xs);
font-weight: var(--ds-font-bold);
letter-spacing: var(--ds-tracking-widest);
text-transform: uppercase;
color: var(--ds-color-text-subtle);
margin: 0;
}
.ds-card__stat-value {
font-family: var(--ds-font-display);
font-size: var(--ds-text-5xl);
font-weight: var(--ds-font-bold);
letter-spacing: var(--ds-tracking-tight);
color: var(--ds-color-text);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.ds-card__stat-delta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--ds-text-xs);
font-weight: var(--ds-font-semibold);
}
.ds-card__stat-delta--up { color: var(--ds-color-success-text); }
.ds-card__stat-delta--down { color: var(--ds-color-danger-text); }
/* ============================================================ */
/* MEDIA CARD (image top) */
/* ============================================================ */
.ds-card--media {
overflow: hidden;
padding: 0;
}
.ds-card--media .ds-card__media {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background: var(--ds-color-surface-muted);
}
.ds-card--media .ds-card__content {
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
padding: var(--ds-space-4) var(--ds-space-5) var(--ds-space-5);
}
/* ============================================================ */
/* CARD GRID HELPERS */
/* ============================================================ */
.ds-card-grid {
display: grid;
gap: var(--ds-space-4);
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ds-card-grid--lg { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.ds-card-grid--sm { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* ============================================================ */
/* REDUCED MOTION */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
.ds-card,
.ds-card--interactive:hover,
.ds-card--profession:hover {
transition: none !important;
transform: none !important;
}
}
/* ===== ds-overlays-v4.css ===== */
/**
* Booknetic for Theme V4 — Design System overlays.
*
* .ds-overlay — root scrim wrapper (positions and animates)
* .ds-overlay__scrim — backdrop with blur
* .ds-modal — centered modal panel
* .ds-drawer — side drawer (left/right)
* .ds-sheet — bottom sheet (mobile)
* .ds-popover — small floating panel anchored to a trigger
* .ds-toast — ephemeral notification
*
* Open state is driven by [data-state="open"] (set by ds-overlays-v4.js or
* by any controller). Closed = default (display:none via attribute selector).
*
* Focus trap, ESC handling, scroll lock, and toast queueing live in
* ds-overlays-v4.js.
*/
/* ============================================================ */
/* OVERLAY ROOT */
/* ============================================================ */
.ds-overlay {
position: fixed;
inset: 0;
z-index: var(--ds-z-overlay);
display: flex;
pointer-events: none;
opacity: 0;
transition: opacity var(--ds-dur-base) var(--ds-ease-out);
}
.ds-overlay[data-state="open"] {
pointer-events: auto;
opacity: 1;
}
.ds-overlay__scrim {
position: absolute;
inset: 0;
background: var(--ds-color-overlay-scrim);
backdrop-filter: blur(var(--ds-blur-sm));
cursor: pointer;
}
body.ds-overlay-open { overflow: hidden; }
/* ============================================================ */
/* MODAL */
/* ============================================================ */
.ds-modal {
position: relative;
width: 100%;
max-width: 520px;
margin: auto;
background: var(--ds-color-bg-elevated);
border: 1px solid var(--ds-color-border);
border-radius: var(--ds-radius-overlay) var(--ds-radius-overlay) 0 0;
box-shadow: var(--ds-shadow-2xl);
padding: var(--ds-space-6);
color: var(--ds-color-text);
transform: translateY(40px) scale(0.98);
transition: transform var(--ds-dur-slow) var(--ds-ease-out);
max-height: 92vh;
overflow-y: auto;
z-index: var(--ds-z-modal);
}
@media (min-width: 720px) {
.ds-modal { border-radius: var(--ds-radius-overlay); }
.ds-overlay--modal { padding: var(--ds-space-6); align-items: center; justify-content: center; }
}
.ds-overlay--modal { align-items: flex-end; justify-content: center; }
.ds-overlay--modal[data-state="open"] .ds-modal { transform: translateY(0) scale(1); }
.ds-modal--sm { max-width: 420px; }
.ds-modal--lg { max-width: 640px; }
.ds-modal--xl { max-width: 800px; }
.ds-modal__close {
position: absolute;
top: var(--ds-space-3);
right: var(--ds-space-3);
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-radius: var(--ds-radius-sm);
color: var(--ds-color-text-muted);
cursor: pointer;
transition: var(--ds-transition-color), var(--ds-transition-bg);
}
.ds-modal__close:hover { color: var(--ds-color-text); background: var(--ds-color-surface); }
.ds-modal__close:focus-visible { outline: 0; box-shadow: var(--ds-ring-focus); }
.ds-modal__header { display: flex; flex-direction: column; gap: var(--ds-space-1); margin-bottom: var(--ds-space-4); }
.ds-modal__title { font-family: var(--ds-font-display); font-size: var(--ds-text-2xl); font-weight: var(--ds-font-bold); letter-spacing: var(--ds-tracking-tight); color: var(--ds-color-text); margin: 0; }
.ds-modal__sub { font-size: var(--ds-text-sm); color: var(--ds-color-text-muted); margin: 0; line-height: var(--ds-leading-relaxed); }
.ds-modal__body { font-size: var(--ds-text-sm); color: var(--ds-color-text); line-height: var(--ds-leading-relaxed); }
.ds-modal__actions {
display: flex;
gap: var(--ds-space-2);
flex-direction: column-reverse;
margin-top: var(--ds-space-5);
}
@media (min-width: 480px) {
.ds-modal__actions { flex-direction: row; justify-content: flex-end; }
}
.ds-modal__actions .ds-btn { flex: 1; }
@media (min-width: 480px) {
.ds-modal__actions .ds-btn { flex: 0 0 auto; }
}
/* ============================================================ */
/* DRAWER */
/* ============================================================ */
.ds-overlay--drawer { align-items: stretch; justify-content: flex-end; }
.ds-overlay--drawer-left { justify-content: flex-start; }
.ds-drawer {
position: relative;
width: 100%;
max-width: 420px;
background: var(--ds-color-bg-elevated);
border-left: 1px solid var(--ds-color-border);
box-shadow: var(--ds-shadow-2xl);
padding: var(--ds-space-5);
color: var(--ds-color-text);
transform: translateX(40px);
transition: transform var(--ds-dur-slow) var(--ds-ease-out);
overflow-y: auto;
z-index: var(--ds-z-sheet);
display: flex;
flex-direction: column;
}
.ds-overlay--drawer-left .ds-drawer {
border-left: 0;
border-right: 1px solid var(--ds-color-border);
transform: translateX(-40px);
}
.ds-overlay--drawer[data-state="open"] .ds-drawer,
.ds-overlay--drawer-left[data-state="open"] .ds-drawer {
transform: translateX(0);
}
.ds-drawer--narrow { max-width: 320px; }
.ds-drawer--wide { max-width: 540px; }
/* ============================================================ */
/* SHEET (bottom) */
/* ============================================================ */
.ds-overlay--sheet { align-items: flex-end; justify-content: center; }
.ds-sheet {
position: relative;
width: 100%;
max-width: 640px;
background: var(--ds-color-bg-elevated);
border-top-left-radius: var(--ds-radius-overlay);
border-top-right-radius: var(--ds-radius-overlay);
border: 1px solid var(--ds-color-border);
border-bottom: 0;
box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.6);
max-height: 88vh;
color: var(--ds-color-text);
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform var(--ds-dur-slow) var(--ds-ease-out);
overflow: hidden;
touch-action: pan-y;
z-index: var(--ds-z-sheet);
}
.ds-overlay--sheet[data-state="open"] .ds-sheet { transform: translateY(0); }
.ds-sheet__handle {
display: block;
background: transparent;
border: 0;
padding: var(--ds-space-3) 0 var(--ds-space-1);
cursor: grab;
flex-shrink: 0;
}
.ds-sheet__handle::after {
content: "";
display: block;
width: 40px;
height: 4px;
background: var(--ds-color-border-strong);
border-radius: var(--ds-radius-pill);
margin: 0 auto;
}
.ds-sheet__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ds-space-2) var(--ds-space-5) var(--ds-space-3);
border-bottom: 1px solid var(--ds-color-border-subtle);
flex-shrink: 0;
}
.ds-sheet__title { font-size: var(--ds-text-md); font-weight: var(--ds-font-bold); margin: 0; }
.ds-sheet__body { padding: var(--ds-space-4) var(--ds-space-5); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ds-sheet__footer {
padding: var(--ds-space-4) var(--ds-space-5) max(var(--ds-space-5), env(safe-area-inset-bottom));
border-top: 1px solid var(--ds-color-border-subtle);
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
flex-shrink: 0;
}
/* ============================================================ */
/* POPOVER (anchored to a trigger) */
/* ============================================================ */
.ds-popover {
position: absolute;
background: var(--ds-color-bg-elevated);
border: 1px solid var(--ds-color-border);
border-radius: var(--ds-radius-lg);
box-shadow: var(--ds-shadow-xl);
padding: var(--ds-space-3);
color: var(--ds-color-text);
min-width: 220px;
max-width: 320px;
z-index: var(--ds-z-dropdown);
opacity: 0;
transform: translateY(-4px) scale(0.97);
transition: opacity var(--ds-dur-fast) var(--ds-ease-out), transform var(--ds-dur-fast) var(--ds-ease-out);
pointer-events: none;
}
.ds-popover[data-state="open"] {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* ============================================================ */
/* TOAST */
/* ============================================================ */
.ds-toast-region {
position: fixed;
top: calc(var(--ds-space-4) + env(safe-area-inset-top));
right: var(--ds-space-4);
z-index: var(--ds-z-toast);
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
max-width: 380px;
pointer-events: none;
}
@media (max-width: 480px) {
.ds-toast-region {
left: var(--ds-space-3);
right: var(--ds-space-3);
max-width: none;
}
}
.ds-toast {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: var(--ds-space-2);
padding: var(--ds-space-3) var(--ds-space-4);
background: var(--ds-color-bg-elevated);
border: 1px solid var(--ds-color-border);
border-left-width: 3px;
border-radius: var(--ds-radius-md);
box-shadow: var(--ds-shadow-xl);
color: var(--ds-color-text);
font-size: var(--ds-text-sm);
animation: ds-toast-in var(--ds-dur-base) var(--ds-ease-out) both;
}
.ds-toast--success { border-left-color: var(--ds-color-success); }
.ds-toast--warning { border-left-color: var(--ds-color-warning); }
.ds-toast--danger { border-left-color: var(--ds-color-danger); }
.ds-toast--info { border-left-color: var(--ds-color-info); }
.ds-toast__icon { flex-shrink: 0; margin-top: 1px; }
.ds-toast__body { min-width: 0; }
.ds-toast__title { font-weight: var(--ds-font-semibold); margin: 0 0 2px; }
.ds-toast__msg { color: var(--ds-color-text-muted); margin: 0; }
.ds-toast.is-leaving { animation: ds-toast-out var(--ds-dur-base) var(--ds-ease-in) both; }
@keyframes ds-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ds-toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } }
/* ============================================================ */
/* REDUCED MOTION */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
.ds-overlay,
.ds-modal,
.ds-drawer,
.ds-sheet,
.ds-popover,
.ds-toast { transition: none !important; animation: none !important; transform: none !important; }
}