/* ═══════════════════════════════════════════════════════════════ OBxOPs Design System — CSS Framework OuterBox Technical Operations · Internal Applications Based on OuterBox Brand Standards (May 2025) + Internal UX Patterns Usage: Link this file first, then add project-specific styles. Font: Load Roboto from Google Fonts in your HTML : Note: All classes use the `obx-` prefix (parent brand). Do not rename. ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────── 1. DESIGN TOKENS (CSS Custom Properties) Brand-approved values from OuterBox Brand Standards 2025. Adopted for OBxOPs internal applications. All colors, spacing, typography, and motion in one place. ───────────────────────────────────── */ :root { /* ── Core Palette ── */ --obx-dark-blue: #17212E; /* Primary text, dark backgrounds */ --obx-blue: #1D4E89; /* Brand blue, mid-tone backgrounds */ --obx-deep-blue: #033F63; /* Saturated blue, darker background variant */ --obx-frost: #EEF3F6; /* Light backgrounds, borders on dark */ --obx-glacier: #F7F9FB; /* Lightest background, callout fills */ --obx-white: #FFFFFF; /* ── Accent Colors (≤10% of layout) ── */ --obx-orange: #C75300; /* Subtitles, bullet points, accents */ --obx-gold: #FFB703; /* Headings on dark, highlights, scores */ --obx-sunset: #F29112; /* Bridge tone, sprites, limited large text on dark */ --obx-bright-blue: #0066DC; /* Hyperlinks, CTAs, interactive states */ /* ── Neutrals ── */ --obx-slate: #5C6C80; /* Secondary text, callout box text, icon combos w/ gold */ --obx-grey: #747D85; /* Alternate dark backgrounds */ --obx-border-frost: #EEF3F6; /* Border on dark backgrounds */ --obx-border-glacier: #F7F9FB; /* Border on frost backgrounds */ --obx-border-dark: #C5CBD0; /* Chart/graph borders */ /* ── Functional / Semantic ── */ --obx-success: #4AA17B; --obx-success-light:#97CDBA; --obx-success-dark: #178262; --obx-error: #D95F55; --obx-error-light: #ED9180; --obx-error-dark: #A72F3B; --obx-info: #0C6E92; /* Charts, single-color bars */ /* ── Chart Colors (reports/graphs only) ── */ --obx-chart-1: #1E4E89; --obx-chart-2: #8BABD3; --obx-chart-3: #F29112; --obx-chart-4: #0C6E92; /* ── Typography ── */ --font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; /* Headlines >16pt */ --line-height-body: 1.15; --line-height-relaxed: 1.5; --line-height-loose: 1.75; /* ── Spacing Scale (4px base) ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ── Border Radius ── */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-round: 50%; /* ── Shadows ── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 8px 32px rgba(0,0,0,0.15); --shadow-xl: 0 16px 48px rgba(0,0,0,0.2); --shadow-brand: 0 5px 10px rgba(0,0,0,0.2); /* Per brand: 20% opacity, 30° angle, 5px dist, 10px blur */ /* ── Transitions ── */ --ease-default: 0.25s ease; --ease-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Layout ── */ --content-max: 800px; /* Brand rule: body copy ≤800px wide */ --layout-max: 1100px; /* Full layout max */ --border-weight: 8px; /* Brand standard for image/callout borders */ } /* ───────────────────────────────────── 2. RESET & BASE ───────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-primary); font-weight: var(--font-weight-regular); line-height: var(--line-height-body); color: var(--obx-dark-blue); background: var(--obx-white); } /* Dark mode body variant */ body.obx-dark { background: var(--obx-dark-blue); color: var(--obx-white); } img, svg { display: block; max-width: 100%; } a { color: var(--obx-bright-blue); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: var(--obx-gold); color: var(--obx-dark-blue); } /* ───────────────────────────────────── 3. TYPOGRAPHY Roboto hierarchy per brand standards. Use .obx-title through .obx-caption classes or the semantic heading defaults. ───────────────────────────────────── */ /* Heading defaults */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); font-weight: var(--font-weight-black); line-height: 1.2; color: var(--obx-dark-blue); } .obx-dark h1, .obx-dark h2, .obx-dark h3, .obx-dark h4, .obx-dark h5, .obx-dark h6 { color: var(--obx-white); } /* Brand hierarchy */ .obx-title, h1 { font-size: 22px; font-weight: var(--font-weight-black); color: var(--obx-blue); /* or black per brand standards */ } .obx-h1, h2 { font-size: 18px; font-weight: var(--font-weight-black); line-height: var(--line-height-body); } .obx-h2, h3 { font-size: 14px; font-weight: var(--font-weight-black); line-height: var(--line-height-body); } .obx-h3, h4 { font-size: 12px; font-weight: var(--font-weight-black); line-height: var(--line-height-body); } .obx-subtitle { font-size: 12px; font-weight: var(--font-weight-regular); color: var(--obx-orange); line-height: var(--line-height-body); } .obx-body, p { font-size: 10pt; font-weight: var(--font-weight-regular); line-height: var(--line-height-body); } .obx-small { font-size: 9px; font-weight: var(--font-weight-regular); line-height: var(--line-height-body); } .obx-caption { font-size: 9px; font-weight: var(--font-weight-regular); font-style: italic; line-height: var(--line-height-body); } /* Display sizes (for app UIs, dashboards, hero sections) */ .obx-display-xl { font-size: clamp(2.5rem, 5vw, 4.8rem); font-weight: var(--font-weight-black); line-height: 1; letter-spacing: 1px; } .obx-display-lg { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: var(--font-weight-black); line-height: 1.1; } .obx-display-md { font-size: clamp(1.4rem, 3vw, 2.5rem); font-weight: var(--font-weight-black); line-height: 1.15; } /* Label / tag / overline */ .obx-label { font-size: 0.65rem; font-weight: var(--font-weight-bold); letter-spacing: 3px; text-transform: uppercase; color: var(--obx-slate); } .obx-dark .obx-label { color: var(--obx-gold); } /* All-caps rule: only ≤5 words per brand standards */ .obx-caps { text-transform: uppercase; letter-spacing: 2px; } /* Gold heading on dark */ .obx-gold-heading { color: var(--obx-gold); } /* Blue heading on light */ .obx-blue-heading { color: var(--obx-blue); } /* Muted text */ .obx-muted { color: var(--obx-slate); } .obx-dark .obx-muted { color: rgba(238,243,246,0.5); } /* ───────────────────────────────────── 4. LAYOUT ───────────────────────────────────── */ .obx-container { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--space-6); } .obx-content { max-width: var(--content-max); /* Brand: ≤800px for body copy */ } .obx-section { padding: var(--space-16) 0; } .obx-flex { display: flex; gap: var(--space-4); } .obx-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .obx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } @media (max-width: 768px) { .obx-grid-2, .obx-grid-3 { grid-template-columns: 1fr; } } /* ───────────────────────────────────── 5. COMPONENTS ───────────────────────────────────── */ /* ── Buttons ── */ .obx-btn { font-family: var(--font-primary); font-size: 0.85rem; font-weight: var(--font-weight-bold); padding: 14px 40px; border: 2px solid var(--obx-gold); background: transparent; color: var(--obx-gold); cursor: pointer; letter-spacing: 2px; text-transform: uppercase; transition: all var(--ease-default); border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: var(--space-2); line-height: 1; } .obx-btn:hover { background: var(--obx-gold); color: var(--obx-dark-blue); text-decoration: none; } .obx-btn-sm { font-size: 0.75rem; padding: 10px 22px; letter-spacing: 1.5px; } /* Button color variants */ .obx-btn-orange { border-color: var(--obx-orange); color: var(--obx-orange); } .obx-btn-orange:hover { background: var(--obx-orange); color: var(--obx-white); } .obx-btn-blue { border-color: var(--obx-bright-blue); color: var(--obx-bright-blue); } .obx-btn-blue:hover { background: var(--obx-bright-blue); color: var(--obx-white); } .obx-btn-red { border-color: var(--obx-error); color: var(--obx-error); } .obx-btn-red:hover { background: var(--obx-error); color: var(--obx-white); } .obx-btn-ghost { border-color: var(--obx-slate); color: var(--obx-slate); font-size: 0.7rem; padding: 8px 16px; } .obx-btn-ghost:hover { border-color: var(--obx-frost); color: var(--obx-frost); background: rgba(255,255,255,0.04); } /* Filled variant for CTA-heavy screens */ .obx-btn-filled { background: var(--obx-bright-blue); border-color: var(--obx-bright-blue); color: var(--obx-white); } .obx-btn-filled:hover { background: var(--obx-blue); border-color: var(--obx-blue); } /* Light theme buttons */ .obx-light .obx-btn, body:not(.obx-dark) .obx-btn { border-color: var(--obx-blue); color: var(--obx-blue); } body:not(.obx-dark) .obx-btn:hover { background: var(--obx-blue); color: var(--obx-white); } /* ── Cards / Callout Boxes ── */ /* On light backgrounds: frost border, white fill */ .obx-card { background: var(--obx-white); border: var(--border-weight) solid var(--obx-frost); border-radius: var(--radius-xl); padding: var(--space-6); transition: all var(--ease-default); } /* On dark backgrounds: white border, frost fill */ .obx-dark .obx-card, .obx-card-dark { background: var(--obx-frost); border-color: var(--obx-white); } /* Headings inside light-filled containers on dark backgrounds need dark text. Without this, .obx-dark h3 { color: white } wins over utility classes and makes headings invisible on frost/glacier/white fills. */ .obx-dark .obx-card h1, .obx-dark .obx-card h2, .obx-dark .obx-card h3, .obx-dark .obx-card h4, .obx-dark .obx-card h5, .obx-dark .obx-card h6, .obx-dark .obx-callout h1, .obx-dark .obx-callout h2, .obx-dark .obx-callout h3, .obx-dark .obx-callout h4, .obx-dark .obx-callout h5, .obx-dark .obx-callout h6, .obx-dark .obx-featured h1, .obx-dark .obx-featured h2, .obx-dark .obx-featured h3, .obx-dark .obx-featured h4, .obx-dark .obx-featured h5, .obx-dark .obx-featured h6 { color: var(--obx-dark-blue); } /* Glacier callout (no border) */ .obx-callout { background: var(--obx-glacier); border-radius: var(--radius-lg); padding: var(--space-6); } /* Elevated card with drop shadow */ .obx-card-elevated { box-shadow: var(--shadow-brand); } /* ── Featured Box (per brand p.17) ── */ .obx-featured { background: var(--obx-white); border: 8px solid var(--obx-frost); border-radius: var(--radius-xl); padding: var(--space-8); text-align: center; } /* ── Input Fields ── */ .obx-input { font-family: var(--font-primary); font-size: 1rem; font-weight: var(--font-weight-medium); padding: 12px 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(29,78,137,0.4); border-radius: var(--radius-sm); color: var(--obx-white); outline: none; transition: border-color 0.3s; width: 100%; } .obx-input:focus { border-color: var(--obx-gold); background: rgba(255,255,255,0.06); } .obx-input::placeholder { color: rgba(255,255,255,0.2); } /* Light theme inputs */ body:not(.obx-dark) .obx-input { background: var(--obx-glacier); border-color: var(--obx-frost); color: var(--obx-dark-blue); } body:not(.obx-dark) .obx-input:focus { border-color: var(--obx-blue); background: var(--obx-white); } body:not(.obx-dark) .obx-input::placeholder { color: var(--obx-slate); } /* ── Tooltip ── */ .obx-tooltip-wrap { position: relative; } .obx-tooltip { display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 300px; max-width: 90vw; background: var(--obx-dark-blue); border: 1px solid rgba(255,183,3,0.25); border-radius: var(--radius-lg); padding: 14px 16px; z-index: 50; pointer-events: none; box-shadow: var(--shadow-xl); animation: obx-tooltipIn 0.2s ease; } /* Arrow */ .obx-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: rgba(255,183,3,0.25); } .obx-tooltip-wrap:hover .obx-tooltip { display: block; } @keyframes obx-tooltipIn { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ── Badges / Tags ── */ .obx-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.65rem; font-weight: var(--font-weight-bold); letter-spacing: 3px; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-sm); background: rgba(255,183,3,0.1); color: var(--obx-gold); } body:not(.obx-dark) .obx-badge { background: rgba(29,78,137,0.08); color: var(--obx-blue); } /* ── Progress Dots ── */ .obx-dots { display: flex; gap: 6px; } .obx-dot { width: 8px; height: 8px; border-radius: var(--radius-round); background: rgba(255,255,255,0.08); transition: all 0.3s; } .obx-dot-done { background: var(--obx-success); } .obx-dot-active { background: var(--obx-gold); box-shadow: 0 0 8px rgba(255,183,3,0.4); } /* ── Overlay / Modal ── */ .obx-overlay { display: none; position: fixed; inset: 0; background: rgba(23,33,46,0.94); z-index: 100; align-items: center; justify-content: center; flex-direction: column; animation: obx-fadeIn 0.4s ease; } .obx-overlay.show { display: flex; } /* ── Accent Top Bar (gradient stripe) ── */ .obx-accent-bar { position: relative; } .obx-accent-bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--obx-orange), var(--obx-gold), var(--obx-sunset)); } /* ── Screenshot Highlight (per brand p.19) ── */ .obx-highlight { outline: 2px solid var(--obx-gold); background: rgba(255,255,0,0.1); } /* ── Tabs ── */ .obx-tabs { display: flex; border-bottom: 2px solid rgba(255,255,255,0.08); gap: 0; overflow-x: auto; } .obx-tab { font-family: var(--font-primary); font-size: 0.75rem; font-weight: var(--font-weight-bold); letter-spacing: 1.5px; text-transform: uppercase; padding: 12px 20px; background: none; border: none; color: var(--obx-slate); cursor: pointer; position: relative; transition: color var(--ease-default); white-space: nowrap; } .obx-tab:hover { color: var(--obx-frost); } .obx-tab.active { color: var(--obx-gold); } .obx-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--obx-gold); } body:not(.obx-dark) .obx-tabs { border-bottom-color: var(--obx-frost); } body:not(.obx-dark) .obx-tab { color: var(--obx-slate); } body:not(.obx-dark) .obx-tab:hover { color: var(--obx-dark-blue); } body:not(.obx-dark) .obx-tab.active { color: var(--obx-blue); } body:not(.obx-dark) .obx-tab.active::after { background: var(--obx-blue); } .obx-tab-panel { display: none; padding: var(--space-4) 0; } .obx-tab-panel.active { display: block; animation: obx-fadeIn 0.3s ease; } /* ── Collapse / Accordion ── */ .obx-collapse { border-bottom: 1px solid rgba(255,255,255,0.06); } .obx-collapse:first-child { border-top: 1px solid rgba(255,255,255,0.06); } .obx-collapse-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; background: none; border: none; font-family: var(--font-primary); font-size: 0.9rem; font-weight: var(--font-weight-bold); color: var(--obx-white); cursor: pointer; transition: color var(--ease-default); text-align: left; } .obx-collapse-trigger:hover { color: var(--obx-gold); } .obx-collapse-trigger::after { content: '\203A'; font-size: 1.2rem; line-height: 1; transition: transform var(--ease-default); color: var(--obx-slate); } .obx-collapse.open .obx-collapse-trigger::after { transform: rotate(90deg); } .obx-collapse-content { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .obx-collapse.open .obx-collapse-content { max-height: 600px; } .obx-collapse-body { padding: 0 0 var(--space-4) 0; } body:not(.obx-dark) .obx-collapse { border-bottom-color: var(--obx-frost); } body:not(.obx-dark) .obx-collapse:first-child { border-top-color: var(--obx-frost); } body:not(.obx-dark) .obx-collapse-trigger { color: var(--obx-dark-blue); } body:not(.obx-dark) .obx-collapse-trigger:hover { color: var(--obx-blue); } /* ── Navigation ── */ .obx-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-6); height: 56px; background: var(--obx-dark-blue); border-bottom: 1px solid rgba(255,255,255,0.06); } .obx-nav-brand { font-family: var(--font-primary); font-weight: var(--font-weight-black); font-size: 1rem; color: var(--obx-white); letter-spacing: 0.5px; display: flex; align-items: center; gap: var(--space-2); text-decoration: none; } .obx-nav-brand:hover { text-decoration: none; } .obx-nav-brand span { font-weight: var(--font-weight-regular); color: var(--obx-slate); font-size: 0.8rem; } .obx-nav-items { display: flex; align-items: center; gap: var(--space-1); list-style: none; } .obx-nav-item { font-size: 0.8rem; font-weight: var(--font-weight-medium); color: var(--obx-slate); padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--ease-default); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); } .obx-nav-item:hover { color: var(--obx-white); background: rgba(255,255,255,0.04); text-decoration: none; } .obx-nav-item.active { color: var(--obx-gold); } .obx-nav-light { background: var(--obx-white); border-bottom-color: var(--obx-frost); } .obx-nav-light .obx-nav-brand { color: var(--obx-dark-blue); } .obx-nav-light .obx-nav-brand span { color: var(--obx-slate); } .obx-nav-light .obx-nav-item { color: var(--obx-slate); } .obx-nav-light .obx-nav-item:hover { color: var(--obx-dark-blue); background: var(--obx-glacier); } .obx-nav-light .obx-nav-item.active { color: var(--obx-blue); } @media (max-width: 768px) { .obx-nav { height: auto; flex-wrap: wrap; padding: var(--space-3) var(--space-4); gap: var(--space-2); } .obx-nav-items { width: 100%; overflow-x: auto; } } /* ── Utility Navigation ── */ .obx-util-nav { display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--space-6); height: 32px; background: rgba(0,0,0,0.2); gap: var(--space-4); } .obx-util-nav-item { font-size: 0.65rem; font-weight: var(--font-weight-medium); color: var(--obx-slate); text-decoration: none; letter-spacing: 0.5px; transition: color var(--ease-default); } .obx-util-nav-item:hover { color: var(--obx-frost); text-decoration: none; } .obx-util-nav-light { background: var(--obx-glacier); } .obx-util-nav-light .obx-util-nav-item { color: var(--obx-slate); } .obx-util-nav-light .obx-util-nav-item:hover { color: var(--obx-dark-blue); } /* ── Icons (Material Symbols integration) ── */ /* Load via Google Fonts: Material+Symbols+Outlined */ .material-symbols-outlined { vertical-align: middle; } /* Inline icon alignment with text */ .obx-icon-inline { vertical-align: -0.125em; } /* ───────────────────────────────────── 6. SPRITES (Decorative Squares) The brand's "pieces of flair." Max 3 per grouping. No matching colors or sizes within a group. Triangular layout for 3, offset for 2. ───────────────────────────────────── */ .obx-sprites { display: flex; gap: 6px; align-items: flex-end; } .obx-sprite { border-radius: 1px; } /* Sizes */ .obx-sprite-lg { width: 14px; height: 14px; } .obx-sprite-md { width: 10px; height: 10px; } .obx-sprite-sm { width: 7px; height: 7px; } .obx-sprite-xs { width: 5px; height: 5px; } /* Colors */ .obx-sprite-gold { background: var(--obx-gold); } .obx-sprite-sunset { background: var(--obx-sunset); } .obx-sprite-orange { background: var(--obx-orange); } .obx-sprite-blue { background: var(--obx-bright-blue); } .obx-sprite-navy { background: var(--obx-blue); } .obx-sprite-dark { background: var(--obx-dark-blue); } /* ───────────────────────────────────── 7. ANIMATIONS & MOTION ───────────────────────────────────── */ @keyframes obx-fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes obx-scaleIn { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } @keyframes obx-flipReveal { 0% { transform: scaleY(1); } 50% { transform: scaleY(0); } 100% { transform: scaleY(1); } } @keyframes obx-slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes obx-flashOut { from { opacity: 1; } to { opacity: 0; } } /* Utility classes */ .obx-fade-in { animation: obx-fadeIn 0.6s ease; } .obx-slide-up { animation: obx-slideUp 0.5s ease; } .obx-scale-in { animation: obx-scaleIn 0.35s ease; } /* Full-screen flash (strike/reveal feedback) */ .obx-flash { display: none; position: fixed; inset: 0; z-index: 150; pointer-events: none; } .obx-flash-error { display: block; background: rgba(217,95,85,0.08); animation: obx-flashOut 0.4s ease forwards; } .obx-flash-success { display: block; background: rgba(255,183,3,0.06); animation: obx-flashOut 0.3s ease forwards; } /* ───────────────────────────────────── 8. UTILITY CLASSES ───────────────────────────────────── */ /* Text alignment */ .obx-text-center { text-align: center; } .obx-text-left { text-align: left; } .obx-text-right { text-align: right; } /* Flex utilities */ .obx-flex-center { display: flex; align-items: center; justify-content: center; } .obx-flex-between { display: flex; align-items: center; justify-content: space-between; } .obx-flex-col { display: flex; flex-direction: column; } .obx-flex-wrap { flex-wrap: wrap; } .obx-gap-1 { gap: var(--space-1); } .obx-gap-2 { gap: var(--space-2); } .obx-gap-3 { gap: var(--space-3); } .obx-gap-4 { gap: var(--space-4); } .obx-gap-6 { gap: var(--space-6); } .obx-gap-8 { gap: var(--space-8); } /* Spacing */ .obx-mt-0 { margin-top: 0; } .obx-mt-2 { margin-top: var(--space-2); } .obx-mt-4 { margin-top: var(--space-4); } .obx-mt-8 { margin-top: var(--space-8); } .obx-mb-2 { margin-bottom: var(--space-2); } .obx-mb-4 { margin-bottom: var(--space-4); } .obx-mb-8 { margin-bottom: var(--space-8); } .obx-p-4 { padding: var(--space-4); } .obx-p-6 { padding: var(--space-6); } .obx-p-8 { padding: var(--space-8); } /* Background colors */ .obx-bg-dark { background: var(--obx-dark-blue); } .obx-bg-blue { background: var(--obx-blue); } .obx-bg-deep { background: var(--obx-deep-blue); } .obx-bg-frost { background: var(--obx-frost); } .obx-bg-glacier { background: var(--obx-glacier); } .obx-bg-white { background: var(--obx-white); } /* Text colors */ .obx-color-gold { color: var(--obx-gold); } .obx-color-orange { color: var(--obx-orange); } .obx-color-blue { color: var(--obx-blue); } .obx-color-bright { color: var(--obx-bright-blue); } .obx-color-slate { color: var(--obx-slate); } .obx-color-white { color: var(--obx-white); } .obx-color-dark { color: var(--obx-dark-blue); } .obx-color-success { color: var(--obx-success); } .obx-color-error { color: var(--obx-error); } /* Font weight */ .obx-light { font-weight: var(--font-weight-light); } .obx-regular { font-weight: var(--font-weight-regular); } .obx-medium { font-weight: var(--font-weight-medium); } .obx-bold { font-weight: var(--font-weight-bold); } .obx-black { font-weight: var(--font-weight-black); } /* Visibility */ .obx-hidden { display: none; } .obx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* Width */ .obx-w-full { width: 100%; } .obx-max-content { max-width: var(--content-max); } .obx-max-layout { max-width: var(--layout-max); } /* Border radius */ .obx-rounded-sm { border-radius: var(--radius-sm); } .obx-rounded-md { border-radius: var(--radius-md); } .obx-rounded-lg { border-radius: var(--radius-lg); } .obx-rounded-xl { border-radius: var(--radius-xl); } .obx-rounded { border-radius: var(--radius-round); } /* ───────────────────────────────────── 9. SELECTION / SCROLLBAR Subtle on-brand customization. ───────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--obx-dark-blue); } ::-webkit-scrollbar-thumb { background: var(--obx-slate); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--obx-grey); }