/* ═══════════════════════════════════════════════════════════════════════════ SPRAWL DESIGN SYSTEM — Canonical Stylesheet (index.css) ═══════════════════════════════════════════════════════════════════════════ GENERATED FROM: primitives/ token files DO NOT hardcode values — all colors, spacing, and motion are CSS variables. THEMES: Default = YOUNES_BAGHOR (Industrial Cyber-Brutalism) Override = SPRAWL.software (add class "theme-enterprise" to ) USAGE: ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Fonts ─── NOTE: Loaded via tags in HTML for non-blocking rendering. Do NOT re-add @import here. See index.html for font loading. */ /* ─── Reset ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { overflow-x: clip; } /* ═══════════════════════════════════════════════════════════════════════════ THEME: YOUNES_BAGHOR — Industrial Cyber-Brutalism (Default) ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Colors (from primitives/colors.json) ── */ --color-cyan: #00ffcc; --color-cyan-rgb: 0, 255, 204; --color-magenta: #ff007f; --color-magenta-rgb: 255, 0, 127; --color-void: #121214; --color-matrix: #1d1d22; --color-ash: #2d2d33; --color-slate: #f4f4f5; --color-muted: #a1a1aa; /* Increased from #71717a for WCAG AAA 7:1 compliance */ --color-amber: #ffb800; /* ── Semantic Colors ── */ --bg-primary: var(--color-void); --bg-surface: var(--color-matrix); --bg-elevated: var(--color-ash); --text-primary: var(--color-slate); --text-secondary: #d4d4d8; /* Restyled for perfect WCAG AAA readability (13.5:1 ratio) */ --text-muted: var(--color-muted); /* Restyled for perfect WCAG AAA legibility (7.4:1 ratio) */ --border-default: var(--color-ash); --accent-primary: var(--color-cyan); --accent-primary-rgb: var(--color-cyan-rgb); --accent-secondary: var(--color-magenta); --accent-secondary-rgb: var(--color-magenta-rgb); /* ── Typography (from primitives/typography.json) ── */ --font-sans: 'Outfit', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; --text-xs: 0.95rem; --text-sm: 1.05rem; --text-base: 1.2rem; --text-md: 1.35rem; --text-lg: 1.6rem; --text-xl: 2.25rem; --text-2xl: 3.20rem; --text-3xl: 4.25rem; --text-4xl: 6rem; --font-light: 300; --font-regular: 400; --font-semibold: 600; --font-bold: 700; --font-black: 800; --tracking-tight: -0.03em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; /* ── Spacing (from primitives/spacing.json) ── */ --space-0: 0; --space-px: 1px; --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; /* ── Borders (from primitives/borders.json) ── */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; --border-standard: 1px solid var(--color-ash); --border-subtle: 1px solid rgba(255, 255, 255, 0.06); --border-accent-cyan: 1px solid rgba(var(--color-cyan-rgb), 0.3); --border-accent-magenta: 1px solid rgba(var(--color-magenta-rgb), 0.3); /* ── Motion (from primitives/motion.json) ── */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --duration-fast: 100ms; --duration-standard: 200ms; --duration-slow: 300ms; --transition-fast: all 100ms cubic-bezier(0.4, 0, 0.2, 1); --transition-standard: all 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: all 300ms cubic-bezier(0.4, 0, 0.2, 1); /* ── Shadows (from primitives/shadows.json) ── */ --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 10px 30px rgba(0, 0, 0, 0.5); --shadow-glow-cyan: 0 0 8px rgba(0, 255, 204, 0.4); --shadow-glow-magenta: 0 0 12px rgba(255, 0, 127, 0.55); --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3); /* ── Layout ── */ --container-max: 1280px; } /* ═══════════════════════════════════════════════════════════════════════════ THEME: SPRAWL.software — High-Precision Technical Minimalism Apply by adding class="theme-enterprise" to . Only accent colors and glows change — structure stays identical. ═══════════════════════════════════════════════════════════════════════════ */ html.theme-enterprise { --color-cyan: #10b981; --color-cyan-rgb: 16, 185, 129; --color-magenta: #8b5cf6; --color-magenta-rgb: 139, 92, 246; --accent-primary-rgb: var(--color-cyan-rgb); --accent-secondary-rgb: var(--color-magenta-rgb); --color-muted: #a1a1aa; --text-secondary: #d4d4d8; --text-muted: var(--color-muted); --shadow-glow-cyan: 0 0 0px transparent; --shadow-glow-magenta: 0 0 0px transparent; --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.2); } /* ═══════════════════════════════════════════════════════════════════════════ BASE ELEMENTS ═══════════════════════════════════════════════════════════════════════════ */ body { background-color: var(--bg-primary); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-regular); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--text-primary); line-height: 1.2; } h1 { font-size: var(--text-2xl); font-weight: var(--font-black); letter-spacing: var(--tracking-tight); } h2 { font-size: var(--text-xl); font-weight: var(--font-black); letter-spacing: var(--tracking-tight); color: var(--text-primary); } h3 { font-size: var(--text-lg); font-weight: var(--font-black); color: var(--text-primary); } h4 { font-size: var(--text-md); font-weight: var(--font-semibold); } p { font-size: var(--text-base); line-height: 1.6; color: var(--text-secondary); } a { color: var(--accent-primary); text-decoration: none; transition: var(--transition-fast); } a:hover { color: var(--color-slate); } code, pre { font-family: var(--font-mono); font-size: var(--text-sm); } code { background-color: var(--bg-surface); border: var(--border-subtle); border-radius: var(--radius-sm); padding: 0.15em 0.4em; } pre { background-color: var(--bg-surface); border: var(--border-standard); border-radius: var(--radius-md); padding: var(--space-lg); overflow-x: auto; line-height: 1.5; } pre code { background: none; border: none; padding: 0; } img { max-width: 100%; height: auto; display: block; } ::selection { background-color: rgba(var(--color-cyan-rgb), 0.25); color: var(--color-slate); } /* ── Focus (Accessibility) ── */ :focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ═══════════════════════════════════════════════════════════════════════════ LAYOUT UTILITIES ═══════════════════════════════════════════════════════════════════════════ */ .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--space-xl); padding-right: var(--space-xl); } /* ── Section Divider (Colored Ruler) ── */ .sds-divider { border: none; height: 1px; background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.08) 15%, var(--accent-primary) 50%, var(--accent-secondary) 85%, transparent 100% ); margin: 12rem auto; position: relative; width: 100%; opacity: 0.6; } .sds-divider::after { content: "✦"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: var(--bg-primary); padding: 0 var(--space-md); color: var(--accent-primary); font-size: var(--text-xs); font-family: var(--font-mono); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Structural Shells ── */ .shell-header { position: sticky; top: 0; z-index: 100; background-color: rgba(9, 9, 11, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: var(--border-standard); padding: var(--space-md) var(--space-xl); display: flex; align-items: center; justify-content: space-between; } .shell-body { flex-grow: 1; display: flex; flex-direction: column; position: relative; z-index: 1; } .section { padding-top: 8rem; padding-bottom: 8rem; } @media (max-width: 768px) { .section { padding-top: 5rem; padding-bottom: 5rem; } .sds-divider { margin: 6rem auto; } } /* ── Flex Utilities ── */ .stack { display: flex; flex-direction: column; gap: var(--space-md); } .stack-sm { display: flex; flex-direction: column; gap: var(--space-sm); } .stack-md { display: flex; flex-direction: column; gap: var(--space-md); } .stack-lg { display: flex; flex-direction: column; gap: var(--space-xl); } .row { display: flex; flex-direction: row; align-items: center; gap: var(--space-md); } .row-center { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--space-md); } .row-between { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } /* ── The 12-Column Grid (Carbon Inspired) ── */ .sds-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-lg); width: 100%; } /* Base columns (mobile first, stacks to 100% implicitly if no class, but if defined, spans) */ .sds-col-1 { grid-column: span 1; } .sds-col-2 { grid-column: span 2; } .sds-col-3 { grid-column: span 3; } .sds-col-4 { grid-column: span 4; } .sds-col-5 { grid-column: span 5; } .sds-col-6 { grid-column: span 6; } .sds-col-7 { grid-column: span 7; } .sds-col-8 { grid-column: span 8; } .sds-col-9 { grid-column: span 9; } .sds-col-10 { grid-column: span 10; } .sds-col-11 { grid-column: span 11; } .sds-col-12 { grid-column: span 12; } /* Medium Breakpoint (Tablet: 768px+) */ @media (min-width: 768px) { .sds-col-md-1 { grid-column: span 1; } .sds-col-md-2 { grid-column: span 2; } .sds-col-md-3 { grid-column: span 3; } .sds-col-md-4 { grid-column: span 4; } .sds-col-md-5 { grid-column: span 5; } .sds-col-md-6 { grid-column: span 6; } .sds-col-md-7 { grid-column: span 7; } .sds-col-md-8 { grid-column: span 8; } .sds-col-md-9 { grid-column: span 9; } .sds-col-md-10 { grid-column: span 10; } .sds-col-md-11 { grid-column: span 11; } .sds-col-md-12 { grid-column: span 12; } } /* Large Breakpoint (Desktop: 1024px+) */ @media (min-width: 1024px) { .sds-col-lg-1 { grid-column: span 1; } .sds-col-lg-2 { grid-column: span 2; } .sds-col-lg-3 { grid-column: span 3; } .sds-col-lg-4 { grid-column: span 4; } .sds-col-lg-5 { grid-column: span 5; } .sds-col-lg-6 { grid-column: span 6; } .sds-col-lg-7 { grid-column: span 7; } .sds-col-lg-8 { grid-column: span 8; } .sds-col-lg-9 { grid-column: span 9; } .sds-col-lg-10 { grid-column: span 10; } .sds-col-lg-11 { grid-column: span 11; } .sds-col-lg-12 { grid-column: span 12; } } /* Legacy shortcuts (mapped to new grid for compatibility) */ .grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } .grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } @media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } /* ═══════════════════════════════════════════════════════════════════════════ BRAND ELEMENTS ═══════════════════════════════════════════════════════════════════════════ */ /* ── Logo Wordmark ── */ .brand-logo { font-family: var(--font-mono); font-weight: var(--font-bold); font-size: var(--text-xl); color: var(--text-primary); letter-spacing: var(--tracking-tight); display: flex; align-items: flex-end; gap: var(--space-sm); text-decoration: none; flex-shrink: 0; } .brand-logo .accent { color: var(--accent-secondary); font-size: 0.82em; transform: translateY(-5px); display: inline-block; } .brand-monogram { margin-right: 0px; flex-shrink: 0; height: 48px; width: auto; display: block; } .logo-badge { background-color: var(--bg-elevated); border: var(--border-standard); border-radius: var(--radius-md); padding: var(--space-xs) var(--space-md); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); text-transform: lowercase; letter-spacing: var(--tracking-normal); margin-bottom: 2px; } /* ── Status Badge ── */ .badge { display: inline-flex; align-items: center; gap: var(--space-sm); background-color: rgba(39, 39, 42, 0.5); border: var(--border-standard); padding: 0.4rem var(--space-md); border-radius: var(--radius-full); font-family: var(--font-mono); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--accent-primary); } .badge::before { content: ''; width: 6px; height: 6px; background-color: var(--accent-primary); border-radius: 50%; box-shadow: var(--shadow-glow-cyan); animation: badge-pulse 1.5s infinite; } @keyframes badge-pulse { 0% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0.5; transform: scale(1); } } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Panel / Card Surface ═══════════════════════════════════════════════════════════════════════════ */ .panel { background-color: var(--bg-surface); border: var(--border-standard); border-radius: var(--radius-lg); padding: var(--space-xl); } .panel-header { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: var(--font-black); color: var(--text-primary); text-transform: uppercase; border-bottom: var(--border-standard); padding-bottom: var(--space-md); margin-bottom: var(--space-lg); } .panel > .badge { margin-bottom: var(--space-sm); } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Buttons (from catalog/buttons.md) ═══════════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border: var(--border-subtle); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); text-decoration: none; cursor: pointer; background: transparent; color: var(--text-primary); transition: var(--transition-standard); } .btn-cyan { color: var(--color-cyan); } .btn-cyan:hover { border-color: rgba(var(--color-cyan-rgb), 0.3); box-shadow: var(--shadow-glow-cyan); } .btn-magenta { color: var(--color-magenta); } .btn-magenta:hover { border-color: rgba(var(--color-magenta-rgb), 0.3); box-shadow: var(--shadow-glow-magenta); } /* ── Playground Config Toggle Buttons ── */ .playground-btn { background-color: rgba(39, 39, 42, 0.4); border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); padding: var(--space-xs) var(--space-sm); cursor: pointer; transition: var(--transition-fast); outline: none; user-select: none; } .playground-btn:hover { border-color: rgba(255, 255, 255, 0.15); color: var(--text-secondary); } .playground-btn.active { background-color: rgba(var(--color-cyan-rgb), 0.1) !important; border-color: var(--color-cyan) !important; color: var(--color-cyan) !important; } .btn-solid { background-color: var(--accent-primary); color: var(--color-void); border-color: var(--accent-primary); font-weight: var(--font-bold); } .btn-solid:hover { opacity: 0.9; box-shadow: var(--shadow-glow-cyan); } .btn-solid-cyan { background-color: var(--color-cyan) !important; color: var(--color-void) !important; border-color: var(--color-cyan) !important; font-weight: var(--font-bold) !important; } .btn-solid-cyan:hover { opacity: 0.9; box-shadow: var(--shadow-glow-cyan) !important; } .btn-icon { width: 12px; height: 12px; } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Cards (from catalog/cards.md) ═══════════════════════════════════════════════════════════════════════════ */ .card { background-color: var(--bg-surface); border: var(--border-standard); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition-standard); display: flex; flex-direction: column; } .card:hover { border-color: rgba(255, 255, 255, 0.1); box-shadow: var(--shadow-card-hover); transform: translateY(-4px); } .card.hover-cyan:hover { border-color: rgba(var(--color-cyan-rgb), 0.2); } .card.hover-magenta:hover { border-color: rgba(var(--color-magenta-rgb), 0.2); } .card-img { aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--color-void); border-bottom: var(--border-standard); } .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); } .card:hover .card-img img { transform: scale(1.05); } .card-body { padding: var(--space-lg); display: flex; flex-direction: column; flex-grow: 1; gap: var(--space-md); } .card-body p { margin: 0; } .card-body terminal-player { margin-top: var(--space-md); } .card-body terminal-player .sds-terminal-container { max-width: 100% !important; font-size: var(--text-xs) !important; min-height: 180px !important; } .card-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--segment-primary); text-transform: uppercase; letter-spacing: var(--tracking-wider); display: flex; align-items: center; gap: var(--space-sm); font-weight: var(--font-bold); } .card-title { font-family: var(--font-sans); font-weight: var(--font-bold); color: var(--text-primary); line-height: 1.3; font-size: var(--text-lg); min-height: 2.6rem; } @media (min-width: 768px) { .card-title { font-size: var(--text-lg); min-height: 5.8rem; } .features-grid .card-title { min-height: 7.6rem; } .governance-grid .card-title { min-height: 3.5rem; } .card:has(terminal-player) .card-body p { min-height: 11rem; } } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Terminal Simulator (from catalog/terminal_simulators.md) 100-character line width standard. ═══════════════════════════════════════════════════════════════════════════ */ .terminal { background-color: #0b0c10; border: var(--border-standard); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-lg); font-family: var(--font-mono); font-size: 0.85rem; color: #e4e4e7; line-height: 1.4; overflow-x: auto; white-space: pre; } /* Terminal color spans */ .t-cyan { color: var(--color-cyan); } .t-magenta { color: var(--color-magenta); } .t-amber { color: var(--color-amber); } .t-yellow { color: var(--color-amber); } .t-muted { color: var(--color-muted); } .t-white { color: var(--color-slate); } .t-bold { font-weight: bold; } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Glassmorphism Overlay ═══════════════════════════════════════════════════════════════════════════ */ .glass { background: rgba(9, 9, 11, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-lg); } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Navigation Link ═══════════════════════════════════════════════════════════════════════════ */ .nav-link { font-family: var(--font-mono); font-size: var(--text-base); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); text-decoration: none; transition: var(--transition-fast); } .nav-link:hover { color: var(--accent-primary); } .nav-link.active { color: var(--accent-primary); } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Accent Text Utilities ═══════════════════════════════════════════════════════════════════════════ */ .text-cyan { color: var(--color-cyan); } .text-magenta { color: var(--color-magenta-aaa); } .text-amber { color: var(--color-amber); } .text-muted { color: var(--text-secondary); } .text-mono { font-family: var(--font-mono); } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Forms & Inputs (from catalog/forms.md) ═══════════════════════════════════════════════════════════════════════════ */ .form-group { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-md); } .label { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--font-semibold); } .input { width: 100%; background-color: var(--bg-surface); border: var(--border-standard); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-base); transition: var(--transition-standard); outline: none; } .input:focus { border-color: var(--accent-primary); box-shadow: inset 0 0 0 1px var(--accent-primary), var(--shadow-glow-cyan); } .input::placeholder { color: var(--text-secondary); opacity: 0.5; } /* Invalid State */ .input.invalid { border-color: var(--color-magenta); } .input.invalid:focus { box-shadow: inset 0 0 0 1px var(--color-magenta), var(--shadow-glow-magenta); } .error-msg { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-magenta); margin-top: 4px; } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Tables (from catalog/tables.md) ═══════════════════════════════════════════════════════════════════════════ */ .table-container { width: 100%; overflow-x: auto; border: var(--border-standard); border-radius: var(--radius-lg); background-color: var(--bg-surface); } .table { width: 100%; border-collapse: collapse; text-align: left; } .table th { padding: var(--space-md) var(--space-lg); border-bottom: var(--border-standard); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--font-semibold); background-color: rgba(0, 0, 0, 0.2); } .table td { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: var(--text-primary); font-size: var(--text-sm); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table tr:hover td { background-color: rgba(255, 255, 255, 0.02); } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Timeline (from catalog/layouts.md) ═══════════════════════════════════════════════════════════════════════════ */ .timeline { display: flex; flex-direction: column; gap: var(--space-xl); padding-left: var(--space-xl); border-left: 2px solid rgba(var(--accent-secondary-rgb), 0.25); margin-left: var(--space-md); position: relative; } .timeline-item { position: relative; } .timeline-node { position: absolute; left: calc(-1.5rem - 7px - 6px); /* Align perfectly over the 2px border */ top: 6px; width: 10px; height: 10px; background-color: var(--accent-secondary); border-radius: 50%; box-shadow: 0 0 10px var(--accent-secondary); transition: background-color var(--transition-standard), box-shadow var(--transition-standard); } .timeline-card { padding: var(--space-lg); border-left: 2px solid var(--accent-secondary); background-color: var(--bg-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .timeline-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: var(--space-md); } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Feedback & Loading (from catalog/feedback.md) ═══════════════════════════════════════════════════════════════════════════ */ .skeleton { background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite linear; border-radius: var(--radius-sm); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .toast { position: fixed; bottom: var(--space-xl); right: var(--space-xl); background-color: var(--bg-surface); border: var(--border-standard); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); display: flex; align-items: center; gap: var(--space-md); box-shadow: var(--shadow-card-hover); z-index: 50; animation: slide-up var(--duration-standard) var(--ease-out); } @keyframes slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .toast-success { border-color: var(--accent-primary); } .toast-error { border-color: var(--color-magenta); } .toast-warning { border-color: var(--color-amber); } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Advanced Controls (catalog/controls.md) ═══════════════════════════════════════════════════════════════════════════ */ .checkbox, .radio { appearance: none; width: 16px; height: 16px; border: var(--border-standard); background-color: var(--bg-surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-right: var(--space-xs); } .checkbox { border-radius: 2px; } .radio { border-radius: 50%; } .checkbox:checked, .radio:checked { background-color: var(--accent-primary); border-color: var(--accent-primary); box-shadow: var(--shadow-glow-cyan); } .checkbox:checked::after { content: ""; width: 4px; height: 8px; border: solid var(--color-void); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-bottom: 2px; } .radio:checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-void); } .toggle { appearance: none; width: 40px; height: 20px; background-color: rgba(255, 255, 255, 0.1); border-radius: 10px; position: relative; cursor: pointer; transition: var(--transition-standard); } .toggle::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background-color: var(--text-secondary); border-radius: 50%; transition: var(--transition-standard); } .toggle:checked { background-color: var(--accent-primary); box-shadow: var(--shadow-glow-cyan); } .toggle:checked::before { transform: translateX(20px); background-color: var(--color-void); } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Overlays & Context (catalog/overlays.md) ═══════════════════════════════════════════════════════════════════════════ */ .overlay-backdrop { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1000; display: flex; align-items: center; justify-content: center; } .modal { background-color: var(--bg-surface); border: var(--border-standard); border-radius: var(--radius-lg); box-shadow: var(--shadow-glass); width: 100%; max-width: 500px; padding: var(--space-2xl); position: relative; animation: modal-enter var(--duration-standard) var(--ease-out); } @keyframes modal-enter { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 400px; background-color: var(--bg-surface); border-left: var(--border-standard); box-shadow: var(--shadow-glass); z-index: 1001; padding: var(--space-2xl); overflow-y: auto; animation: drawer-enter var(--duration-standard) var(--ease-out); } @keyframes drawer-enter { from { transform: translateX(100%); } to { transform: translateX(0); } } .tooltip-wrapper { position: relative; display: inline-block; } .tooltip { visibility: hidden; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); background-color: var(--text-primary); color: var(--color-void); font-family: var(--font-mono); font-size: var(--text-xs); padding: 4px 8px; border-radius: var(--radius-sm); white-space: nowrap; opacity: 0; transition: opacity var(--duration-fast); pointer-events: none; z-index: 100; } .tooltip-wrapper:hover .tooltip { visibility: visible; opacity: 1; } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Advanced Navigation (catalog/navigation-advanced.md) ═══════════════════════════════════════════════════════════════════════════ */ .tabs { display: flex; border-bottom: var(--border-standard); gap: var(--space-lg); margin-bottom: var(--space-xl); } .tab { padding: var(--space-sm) 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wide); cursor: pointer; border-bottom: 2px solid transparent; transition: var(--transition-fast); } .tab:hover { color: var(--text-primary); } .tab.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); text-shadow: var(--shadow-glow-cyan); } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Data Disclosure (catalog/disclosure.md) ═══════════════════════════════════════════════════════════════════════════ */ .faq-container { max-width: 800px; margin: 0 auto; width: 100%; } .accordion { border: var(--border-standard); border-radius: var(--radius-md); margin-bottom: var(--space-md); background-color: var(--bg-surface); transition: all var(--duration-standard) var(--ease-standard); } .accordion:hover { border-color: rgba(255, 255, 255, 0.15); } .accordion[open] { border-color: rgba(255, 255, 255, 0.2); } .accordion summary { padding: var(--space-lg) var(--space-xl); font-weight: var(--font-semibold); font-size: var(--text-base); color: var(--text-primary); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; user-select: none; transition: background-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard); } .accordion summary:hover { background-color: rgba(255, 255, 255, 0.02); color: var(--text-primary); } .accordion summary:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; } .accordion summary::-webkit-details-marker { display: none; } .accordion summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent-primary); font-size: var(--text-md); } .accordion[open] summary::after { content: "-"; } .accordion-content { padding: var(--space-lg) var(--space-xl); border-top: var(--border-standard); } .accordion-content p { margin: 0; line-height: 1.6; } .accordion-content .text-mono { font-family: var(--font-mono); font-size: 0.9em; background-color: rgba(255, 255, 255, 0.05); padding: 2px 6px; border-radius: var(--radius-sm); color: var(--text-primary); } .progress-track { width: 100%; height: 6px; background-color: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; } .progress-bar { height: 100%; background-color: var(--accent-primary); box-shadow: var(--shadow-glow-cyan); transition: width var(--transition-standard); } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Application Shell (catalog/layouts.md) ═══════════════════════════════════════════════════════════════════════════ */ .sds-app-layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .sds-app-header { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 var(--space-xl); background-color: var(--bg-surface); border-bottom: var(--border-standard); flex-shrink: 0; } .sds-app-body { display: flex; flex: 1; overflow: hidden; position: relative; } /* Premium Minimalist Scrollbars */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 10px; transition: background var(--duration-fast); } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--color-cyan-rgb), 0.25); } .sds-sidebar { width: 250px; flex-shrink: 0; background-color: var(--bg-surface); border-right: var(--border-standard); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; transition: transform var(--duration-standard) var(--ease-out); z-index: 50; } .sds-main { flex-grow: 1; overflow-y: auto; min-width: 0; padding: var(--space-2xl) var(--space-4xl); background-color: var(--bg-primary); } /* Mobile Sidebar Behavior */ @media (max-width: 767px) { .sds-sidebar { position: absolute; top: 0; bottom: 0; left: 0; transform: translateX(-100%); box-shadow: var(--shadow-glass); } .sds-sidebar.open { transform: translateX(0); } .sds-main { padding: var(--space-xl) var(--space-lg); } } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Marketing Layout & Navbar (catalog/websites.md) ═══════════════════════════════════════════════════════════════════════════ */ .sds-marketing-layout { display: flex; flex-direction: column; min-height: 100vh; background-color: #070708; background-image: radial-gradient(circle at top, rgba(var(--color-magenta-rgb), 0.08) 0%, transparent 65%), linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 100% 100%, 48px 48px, 48px 48px; background-position: center top; } .sds-navbar { position: sticky; top: 0; z-index: 100; background-color: rgba(18, 12, 33, 0.85); /* Deep dark violet */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(139, 92, 246, 0.2); /* Subtle Sovereign Violet border */ transition: var(--transition-standard); } .sds-navbar-container { display: flex; align-items: center; justify-content: space-between; height: 90px; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-xl); gap: var(--space-md); } .brand-logo, .sds-navbar-links, .sds-toggle-wrapper, .sds-navbar-container > .row { flex-shrink: 0; } @media (max-width: 1150px) { .sds-navbar-container { padding: 0 var(--space-md); } } .sds-navbar-links { display: flex; align-items: center; gap: var(--space-xl); } .sds-navbar .nav-link { text-transform: none; font-family: var(--font-sans); font-size: 16px; font-weight: var(--font-semibold); display: inline-flex; align-items: center; } .sds-navbar .btn { text-transform: none; font-family: var(--font-sans); font-size: 16px; font-weight: var(--font-semibold); border-radius: var(--radius-md); padding: 0 var(--space-lg); height: 42px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; transition: var(--transition-standard); } .sds-navbar .btn-github { border: var(--border-standard); background-color: var(--bg-surface); } .sds-navbar .btn-github:hover { border-color: rgba(var(--color-cyan-rgb), 0.3); box-shadow: var(--shadow-glow-cyan); } .sds-navbar .btn-github .github-icon { margin-right: var(--space-xs); vertical-align: middle; } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Infinite Scrolling Marquee ═══════════════════════════════════════════════════════════════════════════ */ .sds-marquee { overflow: hidden; white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-md) 0; position: relative; width: 100%; background-color: var(--bg-surface); border-top: var(--border-standard); border-bottom: var(--border-standard); } .sds-marquee-title { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-cyan); text-transform: uppercase; letter-spacing: var(--tracking-wider); opacity: 0.85; } .sds-marquee::before, .sds-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none; } .sds-marquee::before { left: 0; background: linear-gradient(to right, var(--bg-surface), transparent); } .sds-marquee::after { right: 0; background: linear-gradient(to left, var(--bg-surface), transparent); } .sds-marquee-track { display: flex; width: max-content; animation: sds-marquee-scroll 50s linear infinite; } .sds-marquee-item { display: flex; align-items: center; justify-content: center; padding: 0 var(--space-2xl); font-family: var(--font-mono); font-weight: var(--font-bold); font-size: var(--text-md); color: var(--text-secondary); letter-spacing: var(--tracking-wider); text-transform: uppercase; } @keyframes sds-marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ── Marquee Icon Enhancements ── */ .sds-marquee-item svg, .sds-marquee-item img { width: 48px; height: 48px; margin-right: var(--space-lg); flex-shrink: 0; transition: var(--transition-fast); } .sds-marquee-item .icon-cyan { color: var(--color-cyan); } .sds-marquee-item .icon-violet { color: var(--color-magenta); } .sds-marquee-item { font-size: var(--text-xs); font-weight: var(--font-semibold); transition: var(--transition-fast); cursor: default; padding: 0 calc(var(--space-2xl) * 1.25); } .sds-marquee-item:hover { color: var(--text-primary); } .sds-marquee-item:hover svg, .sds-marquee-item:hover img { transform: scale(1.15); filter: drop-shadow(0 0 6px currentColor); } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Browser Mockup Frame (Media Showcase) ═══════════════════════════════════════════════════════════════════════════ */ .sds-browser-mockup { border: var(--border-standard); border-radius: var(--radius-lg); background-color: var(--bg-surface); overflow: hidden; box-shadow: var(--shadow-glass); } .sds-browser-header { height: 36px; background-color: rgba(255, 255, 255, 0.03); border-bottom: var(--border-standard); display: flex; align-items: center; padding: 0 var(--space-md); gap: var(--space-xs); } .sds-browser-dot { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); } .sds-browser-dot:nth-child(1) { background-color: #ff5f56; } .sds-browser-dot:nth-child(2) { background-color: #ffbd2e; } .sds-browser-dot:nth-child(3) { background-color: #27c93f; } .sds-browser-address { flex-grow: 1; max-width: 300px; height: 20px; background-color: rgba(0, 0, 0, 0.2); border: var(--border-subtle); border-radius: var(--radius-sm); margin: 0 auto; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); } .sds-browser-content { background-color: var(--bg-primary); position: relative; } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Media & Image aspect rules ═══════════════════════════════════════════════════════════════════════════ */ .sds-aspect-media { position: relative; width: 100%; overflow: hidden; } .sds-aspect-16-9 { aspect-ratio: 16 / 9; } .sds-aspect-4-3 { aspect-ratio: 4 / 3; } .sds-aspect-2-1 { aspect-ratio: 2 / 1; } .sds-aspect-media img, .sds-aspect-media video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border: none; } /* Responsive visibility utilities */ @media (min-width: 768px) { .mobile-only { display: none !important; } } @media (max-width: 1150px) { .desktop-only { display: none !important; } } /* ── Brand Canvas Hero Banner (.sds-wave-panel) ── */ .sds-wave-panel { position: relative; background-color: #070709; border: var(--border-standard); border-radius: var(--radius-xl); padding: var(--space-3xl); overflow: hidden; box-shadow: var(--shadow-glass); z-index: 1; } /* Ambient radial glow mapped directly to brand variables (magenta & cyan) */ .sds-wave-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 10% 50%, rgba(var(--color-magenta-rgb), 0.18) 0%, transparent 60%), radial-gradient(circle at 90% 50%, rgba(var(--color-cyan-rgb), 0.12) 0%, transparent 60%); z-index: -2; pointer-events: none; } /* Dynamic mathematical sine-wave grid pattern using repeating linear-gradients & SVGs */ .sds-wave-panel::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.35; background-image: /* Dotted digital matrix wave */ url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40 Q 20 15, 40 40 T 80 40' fill='none' stroke='rgba%28255,255,255,0.06%29' stroke-width='1.5'/%3E%3Cpath d='M0 20 Q 20 -5, 40 20 T 80 20' fill='none' stroke='rgba%28255,255,255,0.03%29' stroke-width='1'/%3E%3Cpath d='M0 60 Q 20 35, 40 60 T 80 60' fill='none' stroke='rgba%28255,255,255,0.03%29' stroke-width='1'/%3E%3Ccircle cx='10' cy='30' r='1.5' fill='%23ffffff' opacity='0.12'/%3E%3Ccircle cx='30' cy='50' r='1.5' fill='%23ffffff' opacity='0.12'/%3E%3Ccircle cx='50' cy='30' r='1.5' fill='%23ffffff' opacity='0.12'/%3E%3Ccircle cx='70' cy='50' r='1.5' fill='%23ffffff' opacity='0.12'/%3E%3C/svg%3E"), /* Cross-hatch vector scan grid overlay */ linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 80px 80px, 16px 16px, 16px 16px; background-position: center; mix-blend-mode: screen; z-index: -1; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════════ THEME TOGGLE (Reusable JS Pattern) ═══════════════════════════════════════════════════════════════════════════ Usage in HTML: ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ SPRAWL WEBSITE CUSTOM EXTENSIONS & UTILITIES ═══════════════════════════════════════════════════════════════════════════ */ /* ── High-Contrast Accessibility Tokens (WCAG AAA) ── */ :root { --color-cyan-aaa: #34d399; /* Light Emerald (Contrast 7.4:1 on dark void) */ --color-cyan-aaa-rgb: 52, 211, 153; --color-magenta-aaa: #c4b5fd; /* Light Violet (Contrast 7.8:1 on dark void) */ --color-magenta-aaa-rgb: 196, 181, 253; } /* ── Typography Utility Classes ── */ .text-xs { font-size: var(--text-xs) !important; } .text-sm { font-size: var(--text-sm) !important; } .text-base { font-size: var(--text-base) !important; } .text-md { font-size: var(--text-md) !important; } .text-lg { font-size: var(--text-lg) !important; } .text-xl { font-size: var(--text-xl) !important; } .text-2xl { font-size: var(--text-2xl) !important; } .text-3xl { font-size: var(--text-3xl) !important; } .text-4xl { font-size: var(--text-4xl) !important; } .text-center { text-align: center !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-mono { font-family: var(--font-mono) !important; } .text-semibold { font-weight: var(--font-semibold) !important; } .text-bold { font-weight: var(--font-bold) !important; } .text-black { font-weight: var(--font-black) !important; } .hidden { display: none !important; } /* ── View Control ── */ body[data-view="developer"] .team-view-only { display: none !important; } body[data-view="team"] .developer-view-only { display: none !important; } /* ── Re-enable Brand Glows in Enterprise Theme ── */ html.theme-enterprise { --shadow-glow-cyan: 0 0 10px rgba(16, 185, 129, 0.45) !important; --shadow-glow-magenta: 0 0 12px rgba(139, 92, 246, 0.5) !important; } /* ── Active Segment View Themes ── */ body[data-view="developer"] { --accent-primary: var(--color-magenta-aaa); --accent-primary-rgb: var(--color-magenta-aaa-rgb); --accent-secondary: var(--color-cyan-aaa); --accent-secondary-rgb: var(--color-cyan-aaa-rgb); --segment-primary: var(--color-magenta-aaa); --segment-primary-rgb: var(--color-magenta-aaa-rgb); --segment-secondary: var(--color-cyan-aaa); --segment-secondary-rgb: var(--color-cyan-aaa-rgb); background-image: radial-gradient(circle at 80% 25%, rgba(139, 92, 246, 0.16) 0%, transparent 65%), radial-gradient(circle at 20% 75%, rgba(16, 185, 129, 0.08) 0%, transparent 60%), linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px; transition: background var(--transition-slow); } body[data-view="team"] { --accent-primary: var(--color-cyan-aaa); --accent-primary-rgb: var(--color-cyan-aaa-rgb); --accent-secondary: var(--color-magenta-aaa); --accent-secondary-rgb: var(--color-magenta-aaa-rgb); --segment-primary: var(--color-cyan-aaa); --segment-primary-rgb: var(--color-cyan-aaa-rgb); --segment-secondary: var(--color-magenta-aaa); --segment-secondary-rgb: var(--color-magenta-aaa-rgb); background-image: radial-gradient(circle at 80% 25%, rgba(16, 185, 129, 0.15) 0%, transparent 65%), radial-gradient(circle at 20% 75%, rgba(139, 92, 246, 0.08) 0%, transparent 60%), linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px; transition: background var(--transition-slow); } /* ── Interactive Card & Element Hovers ── */ .card, .panel, .sds-wave-panel, .sds-browser-mockup, .diagnostic-card, .share-card, .copy-container, .drawer { transition: border-color var(--transition-standard), box-shadow var(--transition-standard), transform var(--transition-standard); } .card:hover { border-color: var(--segment-primary) !important; box-shadow: 0 0 20px rgba(var(--segment-primary-rgb), 0.4) !important; transform: translateY(-4px); } .panel:hover, .sds-wave-panel:hover, .diagnostic-card:hover, .share-card:hover { border-color: var(--segment-secondary) !important; box-shadow: 0 0 25px rgba(var(--segment-secondary-rgb), 0.35) !important; transform: translateY(-4px); } .copy-container:hover { border-color: var(--segment-primary) !important; box-shadow: 0 0 18px rgba(var(--segment-primary-rgb), 0.35) !important; } .sds-browser-mockup:hover { border-color: var(--segment-primary) !important; box-shadow: 0 0 35px rgba(var(--segment-primary-rgb), 0.35) !important; } /* ── Sticky Toggle Container ── */ .sds-toggle-wrapper { display: flex; justify-content: center; margin-top: var(--space-lg); margin-bottom: var(--space-xs); } .sds-toggle-label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wider); } @media (max-width: 1150px) { .sds-toggle-label { display: none !important; } } .sds-toggle-container-wrapper { display: flex; justify-content: center; position: relative; z-index: 99; margin-bottom: -3.5rem; } .sds-toggle-container { display: inline-flex; background-color: rgba(20, 20, 22, 0.8); border: 1px solid rgba(var(--segment-primary-rgb), 0.25); box-shadow: 0 0 12px rgba(var(--segment-primary-rgb), 0.1); border-radius: var(--radius-lg); padding: 4px; position: relative; z-index: 10; transition: border-color var(--transition-standard), box-shadow var(--transition-standard); animation: toggle-glow-pulse 3s infinite alternate; } @keyframes toggle-glow-pulse { 0% { border-color: rgba(var(--segment-primary-rgb), 0.25); box-shadow: 0 0 8px rgba(var(--segment-primary-rgb), 0.05); } 100% { border-color: rgba(var(--segment-primary-rgb), 0.5); box-shadow: 0 0 16px rgba(var(--segment-primary-rgb), 0.2); } } .sds-toggle-btn { background: transparent; border: none; border-radius: var(--radius-md); padding: 0.5rem var(--space-lg); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--text-muted); cursor: pointer; text-transform: uppercase; letter-spacing: var(--tracking-wider); transition: all var(--transition-standard); display: flex; align-items: center; gap: var(--space-sm); } .sds-toggle-btn:hover, .sds-toggle-btn:focus-visible { color: var(--text-primary); outline: none; } .sds-toggle-btn.active { background-color: var(--segment-primary) !important; color: var(--color-void) !important; box-shadow: 0 2px 10px rgba(var(--segment-primary-rgb), 0.4) !important; } .sds-toggle-btn.active .toggle-icon { stroke: var(--color-void); } /* ── Telemetry Status Bar ── */ .telemetry-bar { background-color: var(--bg-surface); border-top: var(--border-standard); border-bottom: var(--border-standard); padding: var(--space-md) 0; position: relative; z-index: 10; } .telemetry-grid { gap: var(--space-md); } .telemetry-item-box { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); } .telemetry-dot { width: 8px; height: 8px; background-color: var(--accent-primary); border-radius: 50%; box-shadow: var(--shadow-glow-cyan); animation: telemetry-pulse 2s infinite alternate; flex-shrink: 0; } .telemetry-content { display: flex; flex-direction: column; gap: 2px; } .telemetry-label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wider); } .telemetry-val { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--text-primary); } @keyframes telemetry-pulse { 0% { opacity: 0.6; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1.05); box-shadow: 0 0 10px rgba(var(--accent-primary-rgb), 0.6); } } /* ── Dynamic Accent Classes ── */ .badge { color: var(--segment-primary) !important; border-color: rgba(var(--segment-primary-rgb), 0.25) !important; } .badge::before { background-color: var(--segment-primary) !important; box-shadow: 0 0 10px rgba(var(--segment-primary-rgb), 0.5) !important; } .badge-secondary { color: var(--accent-secondary) !important; border-color: rgba(var(--accent-secondary-rgb), 0.25) !important; } .badge-secondary::before { background-color: var(--accent-secondary) !important; box-shadow: 0 0 10px rgba(var(--accent-secondary-rgb), 0.5) !important; } .t-tab.active { color: var(--segment-primary) !important; border-bottom-color: var(--segment-primary) !important; } .copy-btn { color: var(--segment-primary) !important; } .btn-cyan { color: var(--segment-primary) !important; } .btn-cyan:hover, .btn-cyan:focus-visible { border-color: rgba(var(--segment-primary-rgb), 0.3) !important; box-shadow: 0 0 15px rgba(var(--segment-primary-rgb), 0.55) !important; } /* ── Spotlights Atmospheric Container ── */ .sds-spotlights-container { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .sds-spotlight { position: absolute; border-radius: var(--radius-full); filter: blur(180px); opacity: 0; mix-blend-mode: screen; transition: opacity var(--transition-slow), transform var(--transition-slow), top var(--transition-slow), left var(--transition-slow), bottom var(--transition-slow), right var(--transition-slow); } body[data-view="developer"] .dev-spotlight-violet { width: 950px; height: 950px; opacity: 0.22; top: -250px; right: -250px; background-color: rgba(139, 92, 246, 0.9); } body[data-view="developer"] .dev-spotlight-emerald { width: 650px; height: 650px; opacity: 0.1; bottom: -200px; left: -200px; background-color: rgba(16, 185, 129, 0.85); } body[data-view="team"] .team-spotlight-emerald { width: 950px; height: 950px; opacity: 0.15; top: -250px; right: -250px; background-color: rgba(16, 185, 129, 0.9); } body[data-view="team"] .team-spotlight-violet { width: 650px; height: 650px; opacity: 0.1; bottom: -200px; left: -200px; background-color: rgba(139, 92, 246, 0.85); } /* ── Interactive CLI Simulator ── */ .terminal-simulator { background-color: #0b0c10; border: var(--border-standard); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; width: 100%; display: flex; flex-direction: column; z-index: 5; position: relative; } .terminal-header { height: 38px; background-color: rgba(255, 255, 255, 0.03); border-bottom: var(--border-standard); display: flex; align-items: center; padding: 0 var(--space-md); justify-content: space-between; } .terminal-dots { display: flex; gap: 6px; } .terminal-dot { width: 8px; height: 8px; border-radius: var(--radius-full); } .td-close { background-color: #ff5f56; } .td-min { background-color: #ffbd2e; } .td-max { background-color: #27c93f; } .terminal-title { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); } .tui-showcase-tabs { display: flex; flex-direction: row; align-items: center; gap: var(--space-xs); justify-content: flex-start; } #tui-showcase-img { object-fit: contain !important; background-color: #0b0c10; } .terminal-tabs { display: flex; background-color: rgba(0, 0, 0, 0.2); border-bottom: var(--border-standard); } .t-tab-btn, .tui-tab-btn { background: transparent; border: none; border-right: var(--border-standard); border-bottom: 2px solid transparent; padding: var(--space-sm) var(--space-md); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); cursor: pointer; transition: var(--transition-fast); } .t-tab-btn:hover, .t-tab-btn:focus-visible, .tui-tab-btn:hover, .tui-tab-btn:focus-visible { color: var(--text-primary); outline: none; } .t-tab-btn.active, .tui-tab-btn.active { background-color: #0b0c10; color: var(--segment-primary) !important; border-bottom-color: var(--segment-primary) !important; } .terminal-body { padding: var(--space-lg); font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.5; min-height: 300px; overflow-x: auto; white-space: pre; text-align: left; } /* ── Interactive CLI Showcase (Page Wide Styles) ── */ #cli-showcase .terminal-simulator { max-width: 960px; margin: 0 auto; } #cli-showcase p.text-base { max-width: 720px; margin: 0 auto; } /* ── Copy Block Component ── */ .copy-container { display: flex; align-items: center; background-color: var(--bg-surface); border: var(--border-standard); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); gap: var(--space-md); width: 100%; max-width: 450px; min-width: 0; transition: var(--transition-standard); } .copy-text { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-primary); flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .copy-btn { background: transparent; border: var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); color: var(--segment-primary); font-family: var(--font-mono); font-size: var(--text-xs); cursor: pointer; text-transform: uppercase; letter-spacing: var(--tracking-wider); transition: var(--transition-fast); } .copy-btn:hover, .copy-btn:focus-visible { background-color: var(--bg-elevated); outline: none; } /* ── Custom ROI Card ── */ .roi-card { background-color: var(--bg-surface); border: var(--border-standard); border-radius: var(--radius-xl); padding: var(--space-2xl); position: relative; overflow: hidden; } .roi-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); } @media (min-width: 992px) { .roi-grid { grid-template-columns: repeat(2, 1fr); } .roi-divider { position: absolute; top: var(--space-2xl); bottom: var(--space-2xl); left: 50%; width: 1px; background-color: var(--color-ash); } } .roi-header { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-bottom: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); } .roi-header.bad { color: var(--color-magenta-aaa); } .roi-header.good { color: var(--segment-primary); } .roi-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-md); } .roi-list li { font-size: var(--text-base); color: var(--text-secondary); display: flex; gap: var(--space-sm); align-items: flex-start; } .roi-icon { flex-shrink: 0; font-family: var(--font-mono); font-weight: var(--font-bold); } .roi-list li strong { color: var(--text-primary); } /* ── Custom Share Block ── */ .share-card { background-color: var(--bg-surface); border: var(--border-standard); border-radius: var(--radius-lg); padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); } .share-blockquote { background-color: rgba(0, 0, 0, 0.2); border-left: 2px solid var(--segment-primary); padding: var(--space-md) var(--space-lg); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; } /* ── Custom Diagram Flow (If needed, retained for style validation) ── */ .diagram-container { border: var(--border-standard); border-radius: var(--radius-lg); background-color: rgba(0,0,0,0.15); padding: var(--space-2xl) var(--space-xl); display: flex; flex-direction: column; gap: var(--space-lg); align-items: center; } .diagram-row { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); width: 100%; } @media (min-width: 768px) { .diagram-row { flex-direction: row; justify-content: center; } } .diag-node { background-color: var(--bg-surface); border: var(--border-standard); border-radius: var(--radius-md); padding: var(--space-md); text-align: center; min-width: 150px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-primary); transition: var(--transition-fast); } .diag-node:hover { border-color: var(--segment-primary); } .diag-node.active { border-color: var(--segment-primary); background-color: var(--bg-elevated); } .diag-arrow { font-family: var(--font-mono); color: var(--segment-secondary); font-weight: var(--font-bold); transform: rotate(90deg); } @media (min-width: 768px) { .diag-arrow { transform: rotate(0deg); } } /* ── Diagnostic Pricing Card ── */ .diagnostic-card { background-color: var(--bg-surface); border: 2px solid var(--segment-primary) !important; border-radius: var(--radius-xl); padding: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-xl); position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(var(--segment-primary-rgb), 0.08) !important; } .diag-badge { display: inline-block; width: fit-content; margin-bottom: var(--space-sm); background-color: rgba(var(--segment-primary-rgb), 0.1) !important; border: 1px solid var(--segment-primary) !important; color: var(--segment-primary) !important; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); padding: 4px 8px; border-radius: var(--radius-full); text-transform: uppercase; } .diag-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); } .diag-list li { font-size: var(--text-sm); color: var(--text-secondary); display: flex; gap: var(--space-sm); align-items: center; } .diag-list-icon { color: var(--segment-primary) !important; font-weight: var(--font-bold); font-family: var(--font-mono); } /* ── Contact Drawer Form Specifics ── */ .drawer-backdrop { z-index: 1000; transition: opacity var(--transition-standard); } .drawer-backdrop.hidden { display: none !important; } .drawer { display: flex; flex-direction: column; gap: var(--space-lg); } .drawer-header { border-bottom: var(--border-standard); padding-bottom: var(--space-md); display: flex; align-items: center; justify-content: space-between; } .drawer-close { background: transparent; border: none; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-lg); cursor: pointer; transition: var(--transition-fast); padding: var(--space-xs); display: flex; align-items: center; justify-content: center; } .drawer-close:hover, .drawer-close:focus-visible { color: var(--text-primary); outline: none; } .drawer-form { display: flex; flex-direction: column; gap: var(--space-md); } .drawer-form .form-group { margin-bottom: 0; } .drawer-submit { margin-top: var(--space-md); } /* Footer heading label */ .footer-heading { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-muted); } /* Install Block Repositioning & Alignment */ .install-block { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); align-items: center; text-align: center; width: 100%; } .install-tabs { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--space-xs); } .install-cmd-container { max-width: 500px; width: 100%; margin: 0 auto; } @media (min-width: 1024px) { .install-block { align-items: flex-end; text-align: right; } .install-tabs { justify-content: flex-end; } .install-cmd-container { margin: 0 0 0 auto; } } /* Mobile Navigation Header & Switcher Stack */ @media (max-width: 767px) { .sds-navbar-container { flex-direction: column; height: auto !important; padding: var(--space-md) var(--space-md) !important; gap: var(--space-sm) !important; } .sds-toggle-wrapper, .sds-toggle-container-wrapper { width: 100%; justify-content: center; } .sds-toggle-container { width: 100%; display: flex; } .sds-toggle-btn { flex: 1; justify-content: center; padding: 0.6rem var(--space-sm); font-size: var(--text-xs); } } /* ── CLI Tabs Component ── */ .cli-tabs-section { width: 100%; } .cli-tab-triggers { display: flex; flex-direction: column; gap: var(--space-sm); } .cli-tab-trigger { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-md); background: var(--bg-surface); border: var(--border-standard); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-standard); text-align: left; width: 100%; } .cli-tab-trigger:hover { border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.02); } .cli-tab-trigger.active { border-color: var(--segment-primary); background: rgba(var(--segment-primary-rgb), 0.05); box-shadow: 0 0 15px rgba(var(--segment-primary-rgb), 0.15); } .cli-tab-cmd { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--segment-primary); font-weight: var(--font-bold); margin-bottom: var(--space-xs); } .cli-tab-title { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--text-primary); } .cli-tab-desc { display: none; } .cli-tab-desc.active { display: block; } .cli-tab-players { position: relative; width: 100%; } .cli-tab-player { display: none; } .cli-tab-player.active { display: block; } .cli-tab-player terminal-player .sds-terminal-container { min-height: 280px !important; } /* Pricing Card Refinements */ .card-subtitle { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-xs); margin-bottom: var(--space-md); display: block; line-height: 1.4; } h2.section-title { margin-top: 0 !important; margin-bottom: 4rem !important; font-size: var(--text-2xl) !important; font-weight: var(--font-black) !important; position: relative; } /* ── Cross-Sell Banner ── */ .cross-sell-banner { margin-top: var(--space-4xl); padding: var(--space-lg) var(--space-xl); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.02); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); } .cross-sell-banner p { color: var(--text-muted); font-size: var(--text-sm); margin: 0; } .cross-sell-banner .btn { font-size: var(--text-sm); } /* ── Step Number Badge ── */ .step-number { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--accent-primary); color: var(--accent-primary); font-family: var(--font-mono); font-size: var(--text-lg); font-weight: var(--font-bold); flex-shrink: 0; box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.15); } /* ── Scroll-to-Top Button ── */ .scroll-to-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 100; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(var(--bg-surface-rgb, 30, 30, 34), 0.8); backdrop-filter: blur(8px); color: var(--text-muted); font-size: var(--text-lg); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: all 0.3s ease; } .scroll-to-top.visible { opacity: 1; pointer-events: auto; } .scroll-to-top:hover { color: var(--accent-primary); border-color: var(--accent-primary); transform: translateY(-2px); } @media (max-width: 768px) { .scroll-to-top { bottom: 1rem; right: 1rem; } } /* ── Layout Utilities ── */ .flex-col-between { display: flex; flex-direction: column; justify-content: space-between; } .flex-col-center { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); } .items-center { align-items: center; } .w-full { width: 100%; } .text-uppercase { text-transform: uppercase; } .relative { position: relative; } .z-1 { z-index: 1; position: relative; } .m-0 { margin: 0; } /* ── Spacing Utilities ── */ .mb-4xl { margin-bottom: var(--space-4xl); } .mb-md { margin-bottom: var(--space-md); } .mb-sm { margin-bottom: var(--space-sm); } .mb-xs { margin-bottom: var(--space-xs); } .mt-md { margin-top: var(--space-md); } .mt-sm { margin-top: var(--space-sm); } .mt-xs { margin-top: var(--space-xs); } .my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); } /* ── Color Utilities ── */ .text-accent-primary { color: var(--accent-primary); } .text-accent-secondary { color: var(--accent-secondary); } .text-secondary { color: var(--text-secondary); } /* ── Feature Icon ── */ .feature-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-lg); border: 1px solid rgba(var(--accent-primary-rgb), 0.2); background: rgba(var(--accent-primary-rgb), 0.06); color: var(--accent-primary); margin-bottom: var(--space-md); flex-shrink: 0; } /* ── Folder Tree (Hero Visual) ── */ .folder-tree { display: flex; flex-direction: column; gap: 0; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.7; } .folder-tree-source, .folder-tree-output { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); } .folder-tree-label { display: block; font-family: var(--font-sans); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-muted); margin-bottom: var(--space-xs); } .folder-tree-code { margin: 0; padding: 0; background: none; border: none; font-family: inherit; font-size: inherit; line-height: inherit; color: var(--text-secondary); white-space: pre; overflow-x: auto; } .ft-folder { color: var(--accent-primary); font-weight: 600; } .ft-file { color: var(--text-secondary); } .folder-tree-arrow { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); color: var(--accent-primary); font-size: var(--text-lg); font-weight: 700; } .folder-tree-arrow-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wider); } /* ── Hero Visual Wrapper (Terminal Player or Mockup Image) ── */ .hero-terminal-wrapper { position: relative; border: 1px solid var(--accent-primary); border-radius: var(--radius-lg); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7), var(--shadow-glow-magenta); transition: box-shadow var(--transition-standard), transform var(--transition-standard), border-color var(--transition-standard); width: 100%; overflow: hidden; background-color: #09090b; } .hero-terminal-wrapper terminal-player { display: block; width: 100%; height: 560px; } .hero-terminal-wrapper .sds-terminal-container { border: none !important; box-shadow: none !important; border-radius: 0 !important; height: 100% !important; } .hero-terminal-wrapper .hero-image { display: block; width: 100%; height: auto; border-radius: inherit; } .hero-terminal-wrapper:hover { border-color: var(--accent-secondary); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.85), 0 0 24px rgba(139, 92, 246, 0.45); transform: translateY(-2px); } /* ── Hero Left-Side Install Block ── */ .hero-install-block { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; text-align: left; width: 100%; } .hero-install-block .copy-container { max-width: 480px; width: 100%; } /* ═══════════════════════════════════════════════════════════════════════════ AWARD-WINNING INTERACTIVE STYLING & UTILITIES ═══════════════════════════════════════════════════════════════════════════ */ /* ── Glowing Mouse-Tracking Spotlight ── */ .glow-spotlight { position: fixed; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-primary-rgb), 0.12) 0%, rgba(var(--accent-secondary-rgb), 0.04) 50%, transparent 80%); filter: blur(90px); pointer-events: none; z-index: 0; transform: translate(-50%, -50%); transition: transform 0.15s cubic-bezier(0.1, 0.8, 0.2, 1); display: block; } /* ── Interactive Command Palette Modal ── */ .cmd-palette { position: fixed; top: 25%; left: 50%; transform: translate(-50%, -40px) scale(0.96); width: 90%; max-width: 600px; background: rgba(14, 14, 17, 0.88); border: 1px solid var(--accent-primary); border-radius: var(--radius-lg); box-shadow: 0 32px 64px rgba(0, 0, 0, 0.85), var(--shadow-glow-cyan); z-index: 1000; opacity: 0; pointer-events: none; transition: transform var(--transition-slow), opacity var(--transition-slow), border-color var(--transition-standard); backdrop-filter: blur(24px); overflow: hidden; } .cmd-palette.active { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); } .cmd-palette-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(5, 5, 6, 0.75); backdrop-filter: blur(6px); z-index: 999; opacity: 0; pointer-events: none; transition: opacity var(--transition-standard); } .cmd-palette-backdrop.active { opacity: 1; pointer-events: auto; } .cmd-palette-header { display: flex; align-items: center; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-default); background: rgba(255, 255, 255, 0.01); } .cmd-palette-input { flex-grow: 1; background: transparent; border: none; color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-sm); outline: none; margin-left: var(--space-sm); } .cmd-palette-input::placeholder { color: var(--text-muted); } .cmd-palette-results { max-height: 280px; overflow-y: auto; padding: var(--space-sm); } .cmd-palette-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); cursor: pointer; color: var(--text-secondary); font-size: var(--text-xs); font-family: var(--font-mono); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); user-select: none; border: 1px solid transparent; margin-bottom: 2px; } .cmd-palette-item:hover, .cmd-palette-item.selected { background: rgba(var(--accent-primary-rgb), 0.08); color: var(--text-primary); border-color: rgba(var(--accent-primary-rgb), 0.25); } .cmd-palette-shortcut { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-sm); color: var(--text-muted); border: 1px solid rgba(255, 255, 255, 0.02); } /* ── Interactive Compatibility Matrix Cards ── */ .compat-card { background: var(--bg-surface); border: var(--border-standard); border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-sm); cursor: pointer; transition: all var(--transition-standard); text-decoration: none; position: relative; overflow: hidden; height: 100%; } .compat-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--accent-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-standard); } .compat-card:hover { transform: translateY(-4px); border-color: var(--accent-primary); box-shadow: 0 12px 28px -6px rgba(var(--accent-primary-rgb), 0.2), var(--shadow-glow-cyan); } .compat-card:hover::after { transform: scaleX(1); } .compat-card.highlight-sync { animation: borderHighlightPulse 1.2s infinite alternate; } @keyframes borderHighlightPulse { 0% { border-color: var(--accent-primary); box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.25); } 100% { border-color: var(--accent-secondary); box-shadow: 0 0 20px rgba(var(--accent-secondary-rgb), 0.45); } } /* ── Interactive Sandbox Shield Layout ── */ .sandbox-shield-container { display: flex; flex-direction: column; border: var(--border-standard); border-radius: var(--radius-lg); background-color: rgba(9, 9, 11, 0.6); backdrop-filter: blur(12px); overflow: hidden; } .sandbox-shield-header { padding: var(--space-md) var(--space-lg); border-bottom: var(--border-standard); background-color: rgba(255, 255, 255, 0.015); display: flex; align-items: center; justify-content: space-between; } .sandbox-shield-body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); } .sandbox-shield-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } @media (max-width: 768px) { .sandbox-shield-grid { grid-template-columns: 1fr; } } .sandbox-shield-pane { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-md); background: rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: var(--space-sm); transition: all var(--transition-standard); } .sandbox-shield-pane.allowed { border-color: rgba(16, 185, 129, 0.25); } .sandbox-shield-pane.allowed:hover { border-color: rgba(16, 185, 129, 0.6); box-shadow: 0 0 15px rgba(16, 185, 129, 0.15); } .sandbox-shield-pane.blocked { border-color: rgba(239, 68, 68, 0.25); } .sandbox-shield-pane.blocked:hover { border-color: rgba(239, 68, 68, 0.6); box-shadow: 0 0 15px rgba(239, 68, 68, 0.15); } .sandbox-shield-title { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; display: flex; align-items: center; gap: var(--space-sm); } .sandbox-shield-title.allowed { color: #10b981; } .sandbox-shield-title.blocked { color: #ef4444; } /* ── Code Flashing Highlight Animation ── */ @keyframes codeFlash { 0% { background-color: rgba(var(--accent-primary-rgb), 0.25); box-shadow: inset 0 0 10px rgba(var(--accent-primary-rgb), 0.2); } 100% { background-color: transparent; box-shadow: inset 0 0 0px transparent; } } .code-flash { animation: codeFlash 1s ease-out; } /* ── Floating Spotlights Background Grid ── */ .blueprint-grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; z-index: 0; } /* ── Keyboard shortcut prompt button ── */ .keyboard-trigger { display: flex; align-items: center; gap: var(--space-xs); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 4px var(--space-sm); color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; cursor: pointer; transition: all var(--transition-fast); user-select: none; } .keyboard-trigger:hover { border-color: var(--accent-primary); color: var(--text-primary); background: rgba(var(--accent-primary-rgb), 0.05); } /* ── Centered Hero Layout ── */ #hero.section { padding-top: 5rem; /* Reduced by 50% from 10rem */ } #hero > div { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1200px; margin: var(--space-2xl) auto var(--space-3xl) auto; /* Reduced margin-top by 50% from var(--space-4xl) */ padding: 0 var(--space-xl); } #hero .badge { text-transform: none; background-color: rgba(30, 20, 50, 0.4); border: 1px solid rgba(var(--color-cyan-rgb), 0.3); margin-bottom: var(--space-xl); } #hero h1 { font-family: var(--font-sans); font-size: var(--text-3xl); font-weight: var(--font-black); letter-spacing: var(--tracking-tight); line-height: 1.15; margin-bottom: var(--space-xl); } @media (min-width: 768px) { #hero h1 { font-size: 3.6rem; } } #hero h1 span.emerald { color: var(--color-cyan-aaa); /* High-Contrast Light Emerald (WCAG AAA) */ } #hero h1 span.violet { color: var(--color-magenta-aaa); /* High-Contrast Light Violet (WCAG AAA) */ } #hero p:not(.text-xs) { font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-secondary); line-height: 1.6; max-width: 720px; margin-bottom: var(--space-2xl); } @media (min-width: 768px) { #hero p:not(.text-xs) { font-size: var(--text-lg); } } /* ── Centered Hero Interactive Installer (Overrides canonical terminal/copy components) ── */ #hero .terminal-simulator { max-width: 768px; background-color: var(--bg-surface); margin-bottom: var(--space-sm); } #hero .terminal-tabs { background-color: rgba(0, 0, 0, 0.15); } #hero .t-tab-btn { flex: 1; text-align: center; padding: var(--space-md) var(--space-sm); } #hero .t-tab-btn:hover { background-color: rgba(255, 255, 255, 0.02); } #hero .t-tab-btn.active { background-color: rgba(255, 255, 255, 0.04); } #hero .terminal-body { min-height: auto; white-space: normal; } #hero .copy-container { max-width: 100%; background-color: var(--bg-primary); } #hero .copy-btn { background-color: var(--bg-elevated); border: var(--border-standard); border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-semibold); padding: var(--space-xs) var(--space-md); text-transform: none; letter-spacing: var(--tracking-normal); } #hero .copy-btn:hover { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(var(--color-cyan-rgb), 0.3); } #hero #installer-caption { margin-top: var(--space-xs); margin-bottom: 0; font-family: var(--font-sans); } /* ── Centered Hero Bottom Links ── */ #hero .hero-footer { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); font-family: var(--font-sans); font-size: var(--text-sm); margin-top: var(--space-xl); } #hero .hero-footer a { color: var(--text-muted); text-decoration: none; transition: var(--transition-fast); } #hero .hero-footer a:hover { color: var(--accent-primary); } #hero .hero-footer span { width: 1px; height: 12px; background-color: var(--border-default); } /* ─── Product Philosophy Section ─── */ #philosophy h2, #tui-discovery h2, #initialize-steps h2, #sandbox-section h2 { font-size: calc(var(--text-3xl) * 0.8) !important; } @media (min-width: 768px) { #philosophy h2, #tui-discovery h2, #initialize-steps h2, #sandbox-section h2 { font-size: calc(5.5rem * 0.8) !important; } } .philosophy-grid .card-title { min-height: auto; margin-bottom: var(--space-sm); font-size: var(--text-md); } .philosophy-grid .philosophy-icon { border-color: rgba(var(--color-cyan-aaa-rgb), 0.2) !important; background: rgba(var(--color-cyan-aaa-rgb), 0.06) !important; color: var(--color-cyan-aaa) !important; } .philosophy-grid .philosophy-label { color: var(--color-cyan-aaa) !important; } .philosophy-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); } .philosophy-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-lg); margin-bottom: var(--space-lg); flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); transition: var(--transition-standard); } .philosophy-header .philosophy-icon { margin-bottom: 0; } .philosophy-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: var(--tracking-wider); } /* Icon Colors using Theme Variables */ .philosophy-icon.icon-box-cyan { border-color: rgba(var(--color-cyan-rgb), 0.2); background: rgba(var(--color-cyan-rgb), 0.06); color: var(--color-cyan); } .philosophy-icon.icon-box-blue { border-color: rgba(59, 130, 246, 0.2); background: rgba(59, 130, 246, 0.06); color: #3b82f6; } .philosophy-icon.icon-box-magenta { border-color: rgba(var(--color-magenta-rgb), 0.2); background: rgba(var(--color-magenta-rgb), 0.06); color: var(--color-magenta); } /* Label colors */ .philosophy-label.label-emerald { color: var(--color-cyan); } .philosophy-label.label-blue { color: #3b82f6; } .philosophy-label.label-violet { color: var(--color-magenta); } /* Highlighted/Active Card Style */ .philosophy-grid .card.card-highlight { border-color: rgba(var(--color-magenta-rgb), 0.35) !important; background-color: rgba(var(--color-magenta-rgb), 0.02); box-shadow: 0 4px 20px rgba(var(--color-magenta-rgb), 0.06); } .philosophy-grid .card.card-highlight:hover { border-color: rgba(var(--color-magenta-rgb), 0.6) !important; box-shadow: 0 10px 30px rgba(var(--color-magenta-rgb), 0.12); transform: translateY(-4px); } #initialize-steps .card-title { color: var(--color-cyan-aaa) !important; margin-bottom: 0 !important; min-height: auto !important; } #initialize-steps .step-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); } #initialize-steps .step-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-lg); margin-bottom: 0 !important; flex-shrink: 0; border: 1px solid rgba(var(--color-cyan-aaa-rgb), 0.2); background: rgba(var(--color-cyan-aaa-rgb), 0.06); color: var(--color-cyan-aaa); transition: var(--transition-standard); } #initialize-steps .step-icon svg { width: 24px; height: 24px; stroke-width: 2.5px; } /* ─── Interactive TUI Discovery Section ─── */ #tui-discovery h2 { margin-top: 0 !important; margin-bottom: var(--space-lg) !important; } #tui-discovery h2 span { color: var(--color-cyan-aaa); } #tui-discovery h2::before { display: none !important; } #tui-discovery .terminal-title { color: var(--color-cyan); } .tui-feature-item { display: flex; align-items: flex-start; gap: var(--space-md); line-height: 1.6; } .tui-bullet { color: var(--color-magenta); font-size: var(--text-md); line-height: 1.2; margin-top: 2px; } .tui-body { background-color: #0b0c10 !important; color: #e4e4e7; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.5; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); min-height: auto !important; white-space: normal !important; } .tui-prompt { font-weight: var(--font-bold); color: var(--text-primary); } .tui-instruction { color: var(--text-muted); font-size: var(--text-xs); margin-bottom: var(--space-sm); } .tui-content { display: flex; flex-direction: column; gap: 2px; } .tui-category { color: var(--text-muted); font-weight: var(--font-bold); margin-top: var(--space-sm); margin-bottom: var(--space-xs); } .tui-item { display: flex; align-items: center; padding: 4px var(--space-md) 4px 28px; border-radius: var(--radius-sm); color: var(--color-muted); position: relative; } .tui-item.checked { color: var(--text-primary); } .tui-checkbox { margin-right: var(--space-sm); } .tui-item.checked .tui-checkbox { color: var(--color-cyan); } .tui-item.unchecked .tui-checkbox { color: var(--text-muted); } .tui-item.active { background-color: rgba(255, 255, 255, 0.05); color: var(--text-primary); } .tui-pointer { position: absolute; left: 8px; color: var(--color-cyan); font-weight: var(--font-bold); } .tui-footer { display: flex; justify-content: space-between; border-top: 1px dashed rgba(255, 255, 255, 0.08); padding-top: var(--space-md); margin-top: var(--space-md); color: var(--text-muted); font-size: var(--text-xs); } /* ─── Initialize Steps Section ─── */ #initialize-steps h2::before { display: none !important; } #initialize-steps .step-number { width: 48px; height: 48px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); color: var(--text-muted); font-size: calc(var(--text-xs) * 1.5); box-shadow: none; margin-bottom: var(--space-md); } #initialize-steps code { display: block; background-color: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: var(--radius-md); padding: var(--space-md); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-primary); margin-top: var(--space-md); width: 100%; text-align: left; line-height: 1.6; } #initialize-steps code .prompt { color: var(--text-muted); margin-right: var(--space-xs); user-select: none; } /* ─── Local Environment Sandboxing Section ─── */ #sandbox-section h2 span { color: var(--color-cyan-aaa); } .sandbox-column-right { display: flex; flex-direction: column; justify-content: center; min-height: 480px; } .sandbox-terminal { display: block; width: 100%; height: 480px; } .manifest-mockup-img { display: block; width: 100%; height: auto; } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Interactive TUI Simulator ═══════════════════════════════════════════════════════════════════════════ */ .tui-simulator { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .tui-body { background-color: #0b0e14 !important; color: var(--text-primary) !important; padding: var(--space-md) !important; } .tui-list { margin-top: var(--space-sm); margin-bottom: var(--space-md); max-height: 380px; overflow-y: auto; } .tui-folder { color: var(--color-cyan-aaa); font-weight: var(--font-bold); margin-top: var(--space-sm); margin-bottom: var(--space-xs); padding-left: 4px; } .tui-row { display: flex; align-items: center; padding: 6px 12px; border-radius: var(--radius-xs); cursor: pointer; transition: background-color var(--transition-fast); position: relative; } .tui-row:hover, .tui-row.active { background-color: rgba(255, 255, 255, 0.05); } .tui-row input.tui-input { position: absolute; opacity: 0; width: 0; height: 0; } /* Arrow indicator on hover/active */ .tui-row .tui-arrow { width: 18px; display: inline-block; color: var(--color-cyan-aaa); font-weight: var(--font-bold); } .tui-row .tui-arrow::before { content: " "; } .tui-row:hover .tui-arrow::before, .tui-row.active .tui-arrow::before { content: "→ "; } /* Checkbox/Status Icon state (using ☐ and ✔) */ .tui-row .tui-status { margin-right: 8px; } .tui-row .tui-status::before { content: "☐ "; color: var(--text-muted); } .tui-row input:checked + .tui-arrow + .tui-status::before { content: "✔ "; color: var(--color-cyan-aaa); } .tui-row .tui-name { color: var(--text-secondary); } .tui-row:hover .tui-name, .tui-row.active .tui-name { color: var(--text-primary); } .tui-row input:checked + .tui-arrow + .tui-status + .tui-name { color: var(--text-primary); } /* TUI Footer */ .tui-footer { display: flex; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: var(--space-sm); color: var(--text-muted); font-family: var(--font-mono); } /* Compile Button inside TUI Section */ .tui-compile-btn { display: block; width: 100%; padding: var(--space-sm); background-color: var(--color-cyan-aaa); color: #000; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); border: none; border-radius: var(--radius-sm); cursor: pointer; text-align: center; text-transform: uppercase; letter-spacing: var(--tracking-wider); transition: all var(--transition-fast); margin-top: var(--space-md); box-shadow: var(--shadow-sm); } .tui-compile-btn:hover { background-color: #fff; color: #000; } .tui-compile-btn:disabled { background-color: var(--text-muted); color: var(--bg-surface); cursor: not-allowed; } .preview-panel { display: flex; flex-direction: column; height: 100%; } .preview-panel .card-header { padding: var(--space-sm) var(--space-md); } .preview-body { flex-grow: 1; background-color: rgba(0, 0, 0, 0.2); overflow-y: auto; min-height: 380px; padding: var(--space-md); border-radius: 0 0 var(--radius-md) var(--radius-md); } .preview-body pre { margin: 0; white-space: pre-wrap; word-break: break-all; line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Zero Platform Lock-In Section ═══════════════════════════════════════════════════════════════════════════ */ .lock-in-card { max-width: 800px; margin: 0 auto; background-color: var(--bg-surface); border: var(--border-standard); border-radius: var(--radius-lg); box-shadow: var(--shadow-glass); } .lock-in-body { padding: var(--space-3xl) var(--space-xl); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-lg); } .lock-in-title { font-family: var(--font-sans); font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); margin: 0; } .lock-in-title span { color: var(--color-cyan-aaa); } .lock-in-subtitle { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-secondary); max-width: 540px; margin: 0; line-height: 1.6; } .lock-in-command-box { display: inline-flex; align-items: center; gap: var(--space-sm); background-color: rgba(0, 0, 0, 0.35); border: 1px solid rgba(var(--accent-secondary-rgb), 0.25); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-xl); margin: var(--space-sm) 0; } .lock-in-prompt { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); user-select: none; } .lock-in-command { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--accent-secondary); } .lock-in-footer { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-muted); margin: 0; } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: FAQ Layout Enhancements ═══════════════════════════════════════════════════════════════════════════ */ #faq { position: relative; overflow: hidden; } #faq .section-title, #faq .faq-container { position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT: Wave Panel Content Layout (CTA Banners) ═══════════════════════════════════════════════════════════════════════════ */ .sds-wave-panel.cta-banner { padding: var(--space-3xl) var(--space-xl); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-lg); } .cta-title { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: var(--font-black); color: var(--text-primary); margin: 0; z-index: 1; } .cta-subtitle { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-secondary); max-width: 600px; margin: 0; line-height: 1.6; z-index: 1; } /* Copy box styled exactly like the mockup image */ .cta-copy-box { display: flex; align-items: center; background-color: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); padding: var(--space-xs) var(--space-md); max-width: 500px; width: 100%; justify-content: space-between; z-index: 1; transition: border-color var(--duration-standard) var(--ease-standard); box-sizing: border-box; } .cta-copy-box:hover { border-color: rgba(255, 255, 255, 0.15); } .cta-copy-text { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--space-md); flex-grow: 1; text-align: left; } .cta-copy-btn { background: none; border: none; border-left: 1px solid rgba(255, 255, 255, 0.12); padding-left: var(--space-md); color: var(--accent-primary); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: var(--tracking-wider); cursor: pointer; transition: color var(--duration-standard) var(--ease-standard); white-space: nowrap; } .cta-copy-btn:hover { color: var(--text-primary); } .cta-action-row { display: flex; justify-content: center; gap: var(--space-md); z-index: 1; width: 100%; margin-top: var(--space-xs); } .cta-btn-github { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; border-color: rgba(255, 255, 255, 0.15); background: transparent; color: var(--text-primary); } .cta-btn-github:hover { border-color: var(--accent-primary); color: var(--accent-primary); } /* Bottom CTA Installer Tabs */ .cta-banner .terminal-tabs { max-width: 500px; width: 100%; border: var(--border-standard); border-bottom: none; border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; background-color: rgba(0, 0, 0, 0.2); } .cta-banner .t-tab-btn { flex: 1; text-align: center; padding: var(--space-sm) var(--space-xs); border-right: var(--border-standard); border-bottom: 2px solid transparent; } .cta-banner .t-tab-btn:last-child { border-right: none; } /* Adjust cta-copy-box when tabs are present above it */ .cta-banner .terminal-tabs + .cta-copy-box { border-radius: 0 0 var(--radius-md) var(--radius-md); } /* ── Role Tab Link Highlights ── */ .sds-tab-link { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; cursor: pointer; background: transparent; border: 1px solid transparent; color: var(--text-muted) !important; transition: all var(--transition-standard); outline: none; } .sds-tab-link:hover, .sds-tab-link:focus-visible { color: var(--text-primary) !important; } .sds-tab-link.active { background-color: rgba(var(--segment-primary-rgb), 0.08) !important; border-color: rgba(var(--segment-primary-rgb), 0.3) !important; color: var(--segment-primary) !important; box-shadow: 0 0 12px rgba(var(--segment-primary-rgb), 0.1); } /* ── Scroll-to-Top Button ── */ .scroll-to-top { position: fixed; bottom: var(--space-xl); right: var(--space-xl); z-index: 100; width: 44px; height: 44px; border-radius: var(--radius-md); border: 1px solid rgba(var(--segment-primary-rgb), 0.3); background: rgba(18, 12, 33, 0.85); backdrop-filter: blur(8px); color: var(--segment-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--transition-standard), visibility var(--transition-standard), transform var(--transition-standard), border-color var(--transition-fast), box-shadow var(--transition-fast); } .scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-to-top:hover { border-color: var(--segment-primary); box-shadow: 0 0 16px rgba(var(--segment-primary-rgb), 0.4); }