/* ========================================================================== STRAND INTERGALACTIC — BASE Loads after strand-design-tokens.css. Every colour and type value below resolves to a token; the only literals are geometry (px radii, blur, durations), which the token file does not govern. ========================================================================== */ /* ---- Derived values ----------------------------------------------------- Not new colours — compositions of existing tokens, kept here (never in the token file) so the source of truth stays a flat list of decided values. --hairline is the token file's "dividers/borders on dark backgrounds" role, which needs an alpha the flat token cannot carry. */ :root { --hairline: color-mix(in srgb, var(--gray-on-dark) 20%, transparent); --hairline-strong: color-mix(in srgb, var(--gray-on-dark) 32%, transparent); --hairline-light: color-mix(in srgb, var(--gray-on-light) 24%, transparent); --wash-blue: color-mix(in srgb, var(--cta-blue) 8%, transparent); --wash-accent: color-mix(in srgb, var(--mood-accent) 10%, transparent); --edge-blue: color-mix(in srgb, var(--cta-blue) 28%, transparent); --edge-accent: color-mix(in srgb, var(--mood-accent) 30%, transparent); } html { scroll-behavior: smooth; } body { margin: 0; background: var(--navy-ink); color: var(--headline-white); font-family: var(--font-display); font-size: var(--body-3-size); line-height: var(--body-3-line-height); -webkit-font-smoothing: antialiased; } a { color: var(--cta-blue); text-decoration: none; } a:hover { color: var(--headline-light-blue); } ::selection { background: var(--cta-blue); color: var(--pure-white); } @keyframes strandPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } } @keyframes strandSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } image-slot { display: block; width: 100%; height: 100%; } /* dc-runtime.js injects "html,body,#dc-root,#dc-root>.sc-host{height:100%}" at load time, into a