/* =============================================================================
DataOrbix — COMPONENT LIBRARY · do-components.css · v1.0 · 2026-06-29
PURPOSE
───────────────────────────────────────────────────────────────────────────────
A portable, conflict-free set of semantic class names that encode every
established DataOrbix UI pattern exactly once. Drop any class onto any element
in any page and it renders consistently — no inline overrides, no !important
wars, no wildcard bleed.
HOW TO USE
───────────────────────────────────────────────────────────────────────────────
1. Link this file AFTER vercel-theme.css in every page :
2. Apply class names directly in HTML — no custom CSS needed.
3. Never use generic wildcards like [class*="-card"] in new CSS.
Always add new components here as explicit named classes.
LOAD ORDER (required)
───────────────────────────────────────────────────────────────────────────────
css/style.css ← base tokens & legacy styles
css/vercel-theme.css ← monochrome token overrides
css/do-components.css ← THIS FILE — component standards (wins cascade)
COMPONENT INDEX
───────────────────────────────────────────────────────────────────────────────
§1 DESIGN TOKENS (local vars — all sourced from vercel-theme)
§2 PILLAR CARD .do-pillar-grid / .do-pillar
§3 SURFACE CARD .do-surface-grid / .do-surface-card
§4 ICON .do-icon
§5 TYPOGRAPHY .do-title / .do-desc / .do-eyebrow / .do-tag
§6 BADGE / PILL .do-badge / .do-pill
§7 SECTION SHELL .do-section
============================================================================= */
/* ─────────────────────────────────────────────────────────────────────────────
§1 DESIGN TOKENS
Local aliases so every component reads from the same source of truth.
───────────────────────────────────────────────────────────────────────────── */
:root {
/* Surfaces */
--do-bg: #000000;
--do-card: #111111;
--do-card-sub: #161616;
--do-card-hover: #1A1A1A;
/* Borders */
--do-border: #333333;
--do-border-hover: #444444;
--do-border-focus: #555555;
--do-border-divider: rgba(255, 255, 255, 0.055); /* pillar column divider */
/* Typography */
--do-text-primary: #FFFFFF;
--do-text-secondary: #A1A1A1;
--do-text-muted: #888888;
--do-text-disabled: #555555;
/* Semantic (traffic-light — never used decoratively) */
--do-success: #22c55e;
--do-warning: #f59e0b;
--do-error: #ef4444;
/* Brand accent */
--do-orange: rgb(244, 117, 63); /* DataOrbix orange — DORI / AI accent */
/* Hover wash (pillar-style) */
--do-hover-wash: rgba(255, 255, 255, 0.018);
/* Pillar underline (::after) */
--do-underline-color: rgba(160, 210, 220, 0.25);
/* Transitions */
--do-transition-bg: background 0.28s ease;
--do-transition-icon: stroke 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
--do-transition-surf: background 0.2s ease, border-color 0.2s ease;
/* Radius */
--do-radius: 6px;
/* Icon */
--do-icon-size: 20px;
--do-icon-color: #888888;
--do-icon-color-hover:#FFFFFF;
}
/* ─────────────────────────────────────────────────────────────────────────────
§2 PILLAR CARD
───────────────────────────────────────────────────────────────────────────────
Pattern: transparent, no box, left-border divider on every cell,
faint hover wash, animated bottom underline on hover.
Matches: feature-card, compliance-badge, careers-pillar
HTML:
───────────────────────────────────────────────────────────────────────────── */
.do-pillar-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
column-gap: 0;
row-gap: 2rem;
}
.do-pillar {
background: transparent;
border: none;
border-left: 1px solid var(--do-border-divider);
border-radius: 0;
padding: 2rem 2.25rem;
position: relative;
display: flex;
flex-direction: column;
gap: 1rem;
transition: var(--do-transition-bg);
cursor: default;
}
/* Animated bottom underline */
.do-pillar::after {
content: '';
position: absolute;
bottom: 0;
left: 2.25rem;
right: 2.25rem;
height: 1px;
background: var(--do-underline-color);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.32s ease;
border-radius: 2px;
}
.do-pillar:hover {
background: var(--do-hover-wash);
}
.do-pillar:hover::after {
transform: scaleX(1);
}
/* Icon brightens on pillar hover */
.do-pillar:hover .do-icon svg {
stroke: var(--do-icon-color-hover);
transform: rotate(5deg);
}
/* ─────────────────────────────────────────────────────────────────────────────
§3 SURFACE CARD
───────────────────────────────────────────────────────────────────────────────
Pattern: raised #111 surface, 1px #333 border, 6px radius,
border lifts to #444 on hover — no glow, no shadow, no transform.
Use for data panels, modals, dashboard widgets.
HTML:
───────────────────────────────────────────────────────────────────────────── */
.do-surface-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
}
.do-surface-card {
background: var(--do-card);
border: 1px solid var(--do-border);
border-radius: var(--do-radius);
padding: 1.75rem 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
transition: var(--do-transition-surf);
cursor: default;
}
.do-surface-card:hover {
background: var(--do-card-hover);
border-color: var(--do-border-hover);
box-shadow: none;
}
/* Icon brightens on surface-card hover */
.do-surface-card:hover .do-icon svg {
stroke: var(--do-icon-color-hover);
transform: rotate(5deg);
}
/* ─────────────────────────────────────────────────────────────────────────────
§4 ICON
───────────────────────────────────────────────────────────────────────────────
Unboxed SVG icon: no background, no border, muted grey at rest,
white + rotate(5deg) on parent hover.
HTML (inside .do-pillar or .do-surface-card):
───────────────────────────────────────────────────────────────────────────── */
.do-icon {
width: auto;
height: auto;
background: none;
border: none;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 4px 4px 0;
flex-shrink: 0;
}
.do-icon svg {
width: var(--do-icon-size);
height: var(--do-icon-size);
stroke: var(--do-icon-color);
stroke-width: 1.5px;
fill: none;
transition: var(--do-transition-icon);
}
/* ─────────────────────────────────────────────────────────────────────────────
§5 TYPOGRAPHY
───────────────────────────────────────────────────────────────────────────────
Consistent type scale across all card types.
───────────────────────────────────────────────────────────────────────────── */
/* Section eyebrow — small all-caps label above a heading */
.do-eyebrow {
display: block;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--do-text-muted);
margin: 0 0 0.35rem;
}
/* ─────────────────────────────────────────────────────────────────────────
Kicker label strip — pill-shaped inline label row.
Sourced from .hero-kicker. Use above section headings where you want
a bordered capsule with multiple text spans (e.g. "POWERED BY | DORI").
Baseline colour: --do-text-muted (#888). Override child spans as needed:
POWERED BY DORI
|
DORI
───────────────────────────────────────────────────────────────────────── */
.do-label {
/* Layout */
display: inline-flex;
align-items: center;
gap: 12px;
/* Pill border */
border: 1px solid var(--do-border);
border-radius: var(--do-radius);
background: transparent;
padding: 0.35rem 0.85rem;
/* Typography */
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--do-text-muted);
/* Rendering — antialiased + GPU compositing hints */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
transform: translateZ(0);
backface-visibility: hidden;
}
/* Separator span — the | divider between label segments */
.do-label-sep {
color: var(--do-text-muted);
font-weight: 300;
opacity: 0.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Card / pillar primary heading */
.do-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--do-text-primary);
margin: 0;
line-height: 1.3;
}
/* Card / pillar body copy */
.do-desc {
font-size: 0.875rem;
color: var(--do-text-secondary);
line-height: 1.7;
margin: 0.2rem 0 0;
}
/* Small tag / capability label */
.do-tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--do-text-muted);
margin-top: 1rem;
}
.do-tag svg {
width: 12px;
height: 12px;
stroke: currentColor;
stroke-width: 1.5px;
fill: none;
}
/* ─────────────────────────────────────────────────────────────────────────────
§6 BADGE / PILL
───────────────────────────────────────────────────────────────────────────────
Compact inline label — for status indicators, counts, categories.
NOT a card container — never applied to title or desc elements.
.do-badge → small rectangular pill (rounded 6px)
.do-pill → fully rounded capsule (border-radius: 9999px)
Semantic modifiers (use one):
.do-badge--success .do-badge--warning .do-badge--error
.do-badge--muted .do-badge--neutral
───────────────────────────────────────────────────────────────────────────── */
.do-badge,
.do-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
padding: 0.25rem 0.6rem;
border: 1px solid transparent;
white-space: nowrap;
line-height: 1;
}
.do-badge { border-radius: var(--do-radius); }
.do-pill { border-radius: 9999px; }
/* Modifier: neutral (default) */
.do-badge--neutral,
.do-pill--neutral {
background: rgba(255, 255, 255, 0.04);
border-color: var(--do-border);
color: var(--do-text-muted);
}
/* Modifier: muted — even quieter */
.do-badge--muted,
.do-pill--muted {
background: transparent;
border-color: var(--do-border);
color: var(--do-text-disabled);
}
/* Modifier: success */
.do-badge--success,
.do-pill--success {
background: rgba(34, 197, 94, 0.08);
border-color: rgba(34, 197, 94, 0.25);
color: var(--do-success);
}
/* Modifier: warning */
.do-badge--warning,
.do-pill--warning {
background: rgba(245, 158, 11, 0.08);
border-color: rgba(245, 158, 11, 0.25);
color: var(--do-warning);
}
/* Modifier: error */
.do-badge--error,
.do-pill--error {
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.25);
color: var(--do-error);
}
/* Live dot inside a pill (e.g. "Currently in Closed Beta") */
.do-pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* ─────────────────────────────────────────────────────────────────────────────
§7 SECTION SHELL
───────────────────────────────────────────────────────────────────────────────
Consistent section spacing and max-width container.
HTML:
───────────────────────────────────────────────────────────────────────────── */
.do-section {
padding: 6rem 0;
background: var(--do-bg);
}
.do-section-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.do-section-header {
text-align: center;
max-width: 720px;
margin: 0 auto 3rem;
}
.do-section-title {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
color: var(--do-text-primary);
line-height: 1.2;
letter-spacing: -0.02em;
margin: 0.5rem 0 1rem;
}
.do-section-subtitle {
font-size: 1rem;
color: var(--do-text-secondary);
line-height: 1.7;
margin: 0;
}