/* ========================================================== ALPHASTRIKE OS Design Engine File : 05_components.css Version : 1.0.0 Created : 12 August 2026 Maintainer : ALPHASTRIKE Description : Small generic page-composition utilities that don't belong to any single locked component (components/*). Named page headers, chips, badges, dividers - the connective tissue between components on a page. Prefixed "as-" (ALPHASTRIKE core) to stay visually distinct from locked "alpha-" component classes. Copyright (c) 2026 ALPHASTRIKE All Rights Reserved. ============================================================*/ /* ----------------------------------------------------------- PAGE HEADER The eyebrow / title / description pattern repeated across every page and component demo - promoted to a shared utility. ----------------------------------------------------------- */ .as-page-header { max-width: 720px; margin-bottom: var(--alpha-spacing-12); } .as-page-header__eyebrow { color: var(--alpha-text-accent); font-family: var(--alpha-font-body); font-size: var(--alpha-font-size-label); font-weight: var(--alpha-font-weight-bold); letter-spacing: var(--alpha-letter-spacing-label); text-transform: uppercase; margin-bottom: var(--alpha-spacing-3); } .as-page-header__title { margin-bottom: var(--alpha-spacing-4); } .as-page-header__description { color: var(--alpha-text-secondary); font-size: var(--alpha-font-size-body); } .as-page-header--center { margin-inline: auto; text-align: center; } /* ----------------------------------------------------------- CHIP / TAG For flat lists of named items (strategies, capabilities) that don't warrant a full card. ----------------------------------------------------------- */ .as-chip { display: inline-flex; align-items: center; gap: var(--alpha-spacing-2); border: var(--alpha-border-thin) solid var(--alpha-border-default); background: var(--alpha-surface-secondary); color: var(--alpha-text-secondary); font-size: var(--alpha-font-size-caption); padding: var(--alpha-spacing-2) var(--alpha-spacing-4); border-radius: var(--alpha-radius-full); } .as-chip strong { color: var(--alpha-text-accent); font-family: var(--alpha-font-body); font-weight: var(--alpha-font-weight-bold); } /* ----------------------------------------------------------- BADGE ----------------------------------------------------------- */ .as-badge { display: inline-flex; align-items: center; gap: var(--alpha-spacing-2); font-size: var(--alpha-font-size-caption); font-weight: var(--alpha-font-weight-bold); letter-spacing: var(--alpha-letter-spacing-label); text-transform: uppercase; color: var(--alpha-text-accent); border: var(--alpha-border-thin) solid var(--alpha-border-accent); border-radius: var(--alpha-radius-full); padding: var(--alpha-spacing-1) var(--alpha-spacing-3); } .as-badge--muted { color: var(--alpha-text-muted); border-color: var(--alpha-border-default); } .as-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--alpha-radius-full); background: var(--alpha-interactive-default); } /* ----------------------------------------------------------- DIVIDER ----------------------------------------------------------- */ .as-divider { border: none; border-top: var(--alpha-border-thin) solid var(--alpha-border-default); margin-block: var(--alpha-spacing-8); } /* ----------------------------------------------------------- CUSTOM CURSOR Opt-in via , driven by core/js/03_cursor.js. Desktop/fine-pointer only - the script itself feature-detects and no-ops on touch devices, so no media query needed here for correctness, only for hiding the native cursor. ----------------------------------------------------------- */ body.as-cursor-active { cursor: none; } body.as-cursor-active a, body.as-cursor-active button { cursor: none; } .as-cursor-dot, .as-cursor-ring { position: fixed; top: 0; left: 0; z-index: var(--as-z-toast, 500); pointer-events: none; border-radius: var(--alpha-radius-full); transition: opacity var(--alpha-motion-duration-fast) var(--alpha-motion-ease-standard); } .as-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--alpha-color-brand-yellow); } .as-cursor-ring { width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 1px solid var(--alpha-border-accent); } /* Hover growth delta increased 50% (16px -> 24px over the resting 32px ring = 56px), per request 2026-08-12. */ body.as-cursor-hover .as-cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: var(--alpha-color-brand-yellow); } /* ----------------------------------------------------------- GLASS SURFACE Uses the glassmorphism tokens defined in 01_variables.css. ----------------------------------------------------------- */ .as-glass { background: var(--as-glass-bg); border: 1px solid var(--as-glass-border); backdrop-filter: blur(var(--as-glass-blur)); -webkit-backdrop-filter: blur(var(--as-glass-blur)); } /* ----------------------------------------------------------- FLOW DIAGRAM A row of icon + label nodes joined by thin connector lines - used on trading/automation/enterprise to turn an existing text sequence (five engines, the confirmation workflow, the AMC cycle) into a diagram. Per design-system/guidelines/ imagery.md Sec 8 "Diagrams": simple geometry, clear labels, consistent alignment, controlled line weights. Icons are inline SVG per node (Sec 10: line icons, 1.5pt stroke, square corners, single weight - iconography foundation). Wraps to a vertical stack under 640px. ----------------------------------------------------------- */ .as-flow { display: flex; align-items: flex-start; gap: var(--alpha-spacing-2); margin-block: var(--alpha-spacing-8); } .as-flow__node { display: flex; flex-direction: column; align-items: center; gap: var(--alpha-spacing-3); flex: 0 0 auto; width: 108px; text-align: center; } .as-flow__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: 0 0 auto; border: var(--alpha-border-thin) solid var(--alpha-border-default); border-radius: var(--alpha-radius-sm); color: var(--alpha-text-accent); background: var(--alpha-surface-secondary); } .as-flow__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; } .as-flow__label { color: var(--alpha-text-secondary); font-family: var(--alpha-font-body); font-size: var(--alpha-font-size-label); font-weight: var(--alpha-font-weight-bold); letter-spacing: var(--alpha-letter-spacing-label); text-transform: uppercase; line-height: var(--alpha-line-height-compact); } .as-flow__connector { flex: 1 1 24px; min-width: 24px; height: 48px; position: relative; } .as-flow__connector::before { content: ""; position: absolute; top: 24px; left: 0; right: 6px; height: 1px; background: var(--alpha-border-default); } .as-flow__connector::after { content: ""; position: absolute; top: 20px; right: 0; width: 7px; height: 7px; border-top: 1.5px solid var(--alpha-border-default); border-right: 1.5px solid var(--alpha-border-default); transform: rotate(45deg); } @media (max-width: 640px) { .as-flow { flex-direction: column; align-items: flex-start; gap: 0; } .as-flow__node { flex-direction: row; width: auto; text-align: left; gap: var(--alpha-spacing-4); } .as-flow__connector { width: 48px; height: 20px; min-width: 0; } .as-flow__connector::before { top: 0; bottom: 6px; left: 23px; right: auto; width: 1px; height: auto; } .as-flow__connector::after { top: auto; bottom: 0; left: 20px; right: auto; transform: rotate(135deg); } }