/* ===================================================================== HUMAN SYSTEMS INTELLIGENCE™ — DESIGN SYSTEM v1 --------------------------------------------------------------------- One source of truth for color, depth, glass, motion, and life. Load BEFORE style.css. Everything references tokens — never hard-code. THE COHERENCE ENGINE coherence.js runs a single clock and writes live "rhythm channels" as CSS variables on : --breath 0→1→0 sine, one full breath ≈ 7s (primary rhythm) --breath2 same wave, phase-shifted 25% (lagged layers) --drift 0→1→0 over 4 breaths (atmosphere, slow) --pulse 0→1 decaying (coherence events) Nothing animates independently: consumers mix these channels with calc(). One organism, one rhythm. Reduced-motion freezes channels at rest values — the page is still, never broken. ===================================================================== */ :root { /* ---- PRIMARY PALETTE (HSI color board) ---- */ --hsi-blue: #1E3A8A; /* primary brand */ --electric: #2563EB; /* connection, active states */ --sky: #60A5FA; /* flow, openness */ --ice: #DBEAFE; /* light, breath, spaciousness */ --silver: #C4CAD4; /* structure, neutral intelligence */ --silver-light: #E7EBF0; /* clean technology */ --pure-white: #FFFFFF; /* ---- NEUTRALS ---- */ --deep-navy: #0F172A; --charcoal: #1F2937; --slate: #334155; --cool-gray: #6B7280; --light-gray:#E5E7EB; --paper: #F8FAFC; /* ---- FUNCTIONAL (use sparingly, color = meaning) ---- */ --fn-information: #2563EB; --fn-harmony: #10B981; --fn-activation: #F59E0B; --fn-intelligence: #8B5CF6; --fn-vitality: #EF4444; --fn-flow: #06B6D4; /* ---- WARM LIGHT (HSI-sanctioned inner-light accent) ---- */ --gold: #E2BD7E; --gold-soft: rgba(246, 214, 156, 0.6); /* ---- SEMANTIC ---- */ --ink: var(--charcoal); --ink-soft: #46536b; --ink-faint: var(--cool-gray); --accent: var(--electric); --accent-deep: var(--hsi-blue); --surface: var(--pure-white); /* ---- GRADIENTS ---- */ --grad-hsi: linear-gradient(135deg, #1E3A8A, #2563EB); --grad-ocean: linear-gradient(135deg, #2563EB, #60A5FA); --grad-coherence: linear-gradient(135deg, #60A5FA, #DBEAFE); --grad-silver: linear-gradient(135deg, #C4CAD4, #F3F5F8); --grad-biofield: linear-gradient(135deg, #1E3A8A, #60A5FA 55%, #DBEAFE); --grad-card: linear-gradient(180deg, #FFFFFF, #F3F7FB); --grad-btn: linear-gradient(180deg, #3f7ec8, #1f4d8c); --grad-pearl: radial-gradient(circle at 38% 28%, #FFFFFF 0%, #F2F6FA 48%, #D7E1EC 100%); /* ---- GLOW ---- */ --glow-blue: rgba(96, 165, 250, 0.45); --glow-ice: rgba(219, 234, 254, 0.8); --glow-warm: var(--gold-soft); /* ---- DEPTH ---- */ --shadow-1: 0 2px 4px rgba(25, 50, 85, 0.06), 0 8px 18px rgba(25, 50, 85, 0.07); --shadow-2: 0 2px 4px rgba(25, 50, 85, 0.06), 0 18px 36px rgba(25, 50, 85, 0.12); --shadow-3: 0 4px 8px rgba(25, 50, 85, 0.07), 0 24px 48px rgba(25, 50, 85, 0.16); --inset-top: inset 0 1px 0 #FFFFFF; /* ---- BORDERS ---- */ --border-soft: 1px solid rgba(95, 120, 152, 0.22); --border-strong: 1px solid rgba(95, 120, 152, 0.32); --border-rim: 1px solid rgba(115, 135, 160, 0.5); /* ---- GLASS ---- */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.85); --glass-blur: saturate(1.4) blur(14px); /* ---- FOCUS / HOVER ---- */ --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35); --hover-lift: translateY(-3px); /* ---- MOTION (Design Language §14 timing) ---- */ --dur-breath: 9s; /* keep = engine BREATH_MS; breathing 8–12s */ --dur-micro: 0.2s; /* micro 150–250ms */ --dur-hover: 0.32s; /* hover 250–400ms */ --dur-card: 0.4s; /* card lift 300–500ms */ --dur-flow: 9s; /* flow loops 6–12s */ --dur-field: 36s; /* field 20–40s (= 4 breaths) */ --dur-fast: 0.18s; --dur-reveal: 0.8s; --ease-organic: cubic-bezier(0.37, 0, 0.63, 1); /* sine-like, no bounce */ --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1); /* ---- RADII ---- */ --r-card: 20px; --r-pill: 999px; --r-panel: 26px; /* ---- LIVE RHYTHM CHANNELS (written by coherence.js every frame) ---- */ --breath: 0.4; --breath2: 0.4; --drift: 0.5; --pulse: 0; --beat: 0; } /* ===================================================================== COHERENCE CONSUMERS — shared life, mixed from the channels above ===================================================================== */ /* Atmosphere: fixed whole-page light field that drifts with --drift */ .atmosphere { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 18% 8%, rgba(219, 234, 254, 0.55), transparent 70%), radial-gradient(55% 45% at 85% 90%, rgba(196, 202, 212, 0.35), transparent 70%); opacity: calc(0.45 + 0.4 * var(--drift)); } /* Anything given .breathes gently swells with the shared breath */ .breathes { transform: scale(calc(1 + 0.012 * var(--breath))); } /* Warm halo (pearl orb icons) — brightness rides the breath */ .sys-icon::before { opacity: calc(0.55 + 0.45 * var(--breath)); } /* Scroll reveal — sections surface softly, no bounce */ .reveal { opacity: 0; transform: translateY(14px); } .reveal.is-visible { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease-out-soft), transform var(--dur-reveal) var(--ease-out-soft); } /* ===================================================================== PRIMITIVES ===================================================================== */ /* Focus visibility — every interactive element */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; } /* Glass panel */ .glass { background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-radius: var(--r-panel); box-shadow: var(--shadow-1), var(--inset-top); } /* Information block */ .info-block { background: var(--grad-card); border: var(--border-soft); border-radius: var(--r-card); padding: 22px 24px; box-shadow: var(--shadow-1), var(--inset-top); } /* Living card — border light travels the perimeter on hover */ .card-live { position: relative; } .card-live::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; background: conic-gradient(from var(--card-angle, 0deg), transparent 0deg, var(--sky) 40deg, var(--ice) 80deg, transparent 130deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity 0.5s var(--ease-out-soft); } .card-live:hover::after { opacity: 1; animation: cardlight 4s linear infinite; } @property --card-angle { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes cardlight { to { --card-angle: 360deg; } } /* Framework-wheel orbs — hover life; the wave + pulse come from the engine */ .orb { transition: transform 0.35s var(--ease-out-soft); transform-box: fill-box; transform-origin: center; } .orb:hover, .orb:focus-visible { transform: scale(1.07); } .orb:focus-visible { outline: none; } /* Section divider star — twinkles WITH the breath (no private keyframe) */ .divider-star svg { animation: none !important; opacity: calc(0.35 + 0.65 * var(--breath)); transform: scale(calc(0.9 + 0.15 * var(--breath))); } /* ===================================================================== DARK / POSTER THEME — storyboards & gallery surfaces are black + luminous while the site stays white + clinical. Wrap poster/storyboard layouts in .theme-poster. ===================================================================== */ .theme-poster { --surface: #05080f; --ink: #E7EBF0; --ink-soft: #9fb0c8; background: radial-gradient(80% 60% at 50% 20%, #0d1830, #05080f); color: var(--ink); } .theme-poster .info-block { background: linear-gradient(180deg, rgba(23, 37, 64, 0.8), rgba(10, 18, 34, 0.9)); border: 1px solid rgba(96, 165, 250, 0.25); box-shadow: 0 0 34px rgba(37, 99, 235, 0.18); } .storyboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 760px) { .storyboard-grid { grid-template-columns: 1fr; } } /* ===================================================================== REDUCED MOTION — channels freeze at rest; nothing looks broken ===================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --breath: 0.4; --breath2: 0.4; --drift: 0.5; --pulse: 0; } .reveal { opacity: 1; transform: none; transition: none; } .card-live:hover::after { animation: none; opacity: 0.5; } .breathes { transform: none; } }