/* CMS LITE theme layer: spectral activation + app chrome. Loads AFTER crystal.css. Spectral is opt-in via [data-cmsl-spectral="on"] on , composed purely of Crystal's prism tokens. */ /* ---------- App chrome (both modes) ---------- */ .cmsl-shell { min-height: 100vh; background: var(--crystal-canvas); color: var(--crystal-text-primary); } .cmsl-main { max-width: 980px; margin: 0 auto; padding: 24px 16px; } .h-header { display: flex; align-items: center; justify-content: space-between; background: #101010; height: 50px; padding: 0 25px; position: relative; z-index: 2; } .h-header__logo { width: 150px; height: 100%; display: flex; align-items: center; } .h-header__logo img { max-width: 100%; height: auto; } .h-header__right { display: flex; align-items: center; gap: 16px; } .h-header__software-title { color: #fff; font-size: 16px; line-height: 1; text-transform: uppercase; font-family: 'Fira Sans', sans-serif; font-weight: 900; letter-spacing: 0.8px; } .h-header__theme { display: flex; gap: 6px; } .h-header__theme button { min-height: 30px; padding: 4px 10px; border-radius: 99px; border: 1px solid #3a3a3a; background: transparent; color: #cfcfcf; font: 600 12px 'Fira Sans', sans-serif; letter-spacing: .4px; cursor: pointer; text-transform: uppercase; transition: background .15s ease, color .15s ease, border-color .15s ease; } .h-header__theme button[aria-pressed="true"] { background: #fff; color: #101010; border-color: #fff; } @media (hover:hover) { .h-header__theme button:hover { border-color: #8a8a8a; } } /* ---------- Spectral activation ---------- */ [data-cmsl-spectral="on"] .h-header { border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #8b5cf6, #6366f1, #06b6d4, #10b981) 1; } [data-cmsl-spectral="on"] .h-header__software-title, [data-cmsl-spectral="on"] .crystal-headline--section { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 25%, #06b6d4 55%, #f43f5e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-cmsl-spectral="on"] .crystal-card--elevated, [data-cmsl-spectral="on"] .crystal-card--interactive { box-shadow: var(--crystal-shadow-spectrum); } [data-cmsl-spectral="on"] .crystal-btn--primary { background: linear-gradient(135deg, #6d28d9, #4f46e5 60%, #0e7490); border-color: transparent; color: #fff; } @media (hover:hover) { [data-cmsl-spectral="on"] .crystal-btn--primary:hover { background: linear-gradient(135deg, #5b21b6, #4338ca 60%, #155e75); } } [data-cmsl-spectral="on"] .crystal-badge__dot { background: linear-gradient(135deg, #8b5cf6, #06b6d4); } [data-cmsl-spectral="on"] :focus-visible { outline: 3px solid rgba(139, 92, 246, .55); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { [data-cmsl-spectral="on"] .h-header__software-title, [data-cmsl-spectral="on"] .crystal-headline--section { background-size: 200% 100%; animation: cmsl-shimmer 6s ease-in-out infinite; } @keyframes cmsl-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } }