/* Cozmic Learning — brand foundation ---------------------------------------------------------------------- Palette matches the new lightning-bolt-rocket logo: electric cyan primary on deep navy ground, with deeper blue facets and cream text. Cross-browser safe (no -webkit-only props, no experimental features). */ :root { /* PARENT BRAND ------------------------------------------------- */ /* Cyan tier — sharper and more electric than v1. Linear / SpaceX register: tech-electric, not kid-bright. */ --cozmic-cyan: #22d3ee; /* primary electric cyan (was #5cd4ff) */ --cozmic-cyan-bright: #67e8f9; /* highlight, halo glow */ --cozmic-cyan-deep: #0891b2; /* hover / pressed states */ --cozmic-cyan-soft: rgba(34, 211, 238, 0.16); /* tinted backgrounds */ /* Magenta — used sparingly as a second accent for electric tension. Linear pairs cyan with violet/pink; we mirror that. NEVER use this on body text or large surfaces — only as accent strokes, badges, hover underlines, etc. */ --cozmic-magenta: #d946ef; --cozmic-magenta-deep:#a21caf; --cozmic-blue: #1e6fc7; --cozmic-blue-deep: #0e3a8a; --cozmic-navy: #0a1124; /* deeper than before — more space */ --cozmic-navy-mid: #131c3a; /* mid-surface, card backgrounds */ --cozmic-navy-deep: #050818; /* deepest backdrop */ --cozmic-navy-ink: #0e1a3a; /* wordmark text on light */ --cozmic-cream: #f4f7fb; /* text on dark */ --cozmic-cream-soft: #dff5ff; --cozmic-cream-mute: #a5b4cf; /* secondary text on dark */ --cozmic-paper: #fbfcfe; --cozmic-rule: rgba(34, 211, 238, 0.16); --cozmic-rule-strong: rgba(34, 211, 238, 0.4); /* TYPE --------------------------------------------------------- */ --cozmic-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --cozmic-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Logo lockup component — drop-in via or .ghost variant. Designed to echo the logo's electric chrome glow. Use across all marketing pages so primary actions look identical everywhere. ==================================================================== */ .cozmic-cta { display: inline-block; padding: 15px 30px; background: linear-gradient(135deg, #22d3ee, #0891b2); color: #050818; font-family: var(--cozmic-font-display); font-weight: 800; font-size: 1rem; letter-spacing: -0.005em; text-decoration: none; border-radius: 10px; border: 1px solid rgba(34, 211, 238, 0.7); box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.2), 0 0 32px rgba(34, 211, 238, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45); transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s ease; cursor: pointer; animation: ctaPulse 3s ease-in-out infinite; } @keyframes ctaPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(34,211,238,0.2), 0 0 32px rgba(34,211,238,0.4), inset 0 1px 0 rgba(255,255,255,0.45); } 50% { box-shadow: 0 0 0 1px rgba(34,211,238,0.35), 0 0 44px rgba(34,211,238,0.65), inset 0 1px 0 rgba(255,255,255,0.5); } } .cozmic-cta:hover { transform: translateY(-3px); background: linear-gradient(135deg, #67e8f9, #22d3ee); box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.5), 0 14px 36px rgba(34, 211, 238, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.55); text-decoration: none; animation: none; } .cozmic-cta:active { transform: translateY(-1px); animation: none; } /* Ghost variant: transparent fill with cyan border. No pulse — secondary actions should be quieter than primary. */ .cozmic-cta-ghost { display: inline-block; padding: 15px 30px; background: transparent; color: #22d3ee; font-family: var(--cozmic-font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.005em; text-decoration: none; border-radius: 10px; border: 1px solid rgba(34, 211, 238, 0.5); transition: all 0.18s ease; } .cozmic-cta-ghost:hover { background: rgba(34, 211, 238, 0.1); border-color: rgba(34, 211, 238, 0.85); color: #67e8f9; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(34, 211, 238, 0.22); text-decoration: none; } /* ==================================================================== Section header — cyan accent bar above heading

Title

==================================================================== */ .cozmic-section-head { text-align: center; margin-bottom: 36px; } .cozmic-section-head .bar { display: inline-block; width: 52px; height: 2px; background: linear-gradient(90deg, transparent, #22d3ee, transparent); box-shadow: 0 0 16px rgba(34, 211, 238, 0.7); margin-bottom: 16px; } /* Magenta variant for the "tension" accent — use one per page, max */ .cozmic-section-head--magenta .bar { background: linear-gradient(90deg, transparent, #d946ef, transparent); box-shadow: 0 0 16px rgba(217, 70, 239, 0.6); } /* Hairline cyan stroke — for under headings, along card edges, etc. The Linear move: thin, precise, polished. */ .cozmic-hairline { height: 1px; background: linear-gradient(90deg, transparent, rgba(34,211,238,0.5), transparent); margin: 18px auto; width: 80%; max-width: 200px; } /* ==================================================================== Starfield background utility — pure CSS, no PNG. Add .cozmic-starfield to any element to get a quiet starfield over the navy gradient already on the body. ==================================================================== */ .cozmic-starfield { position: relative; } .cozmic-starfield::before { content: ""; position: absolute; inset: 0; /* 25 stars: 21 small + 4 "anchor" stars (1.8-2.2px, brighter). Anchor stars give the field rhythm; small stars provide density. */ background-image: /* Anchor stars (bright cyan, larger) */ radial-gradient(2.2px 2.2px at 18% 22%, rgba(103, 232, 249, 0.95), transparent 70%), radial-gradient(1.8px 1.8px at 46% 64%, rgba(34, 211, 238, 0.9), transparent 70%), radial-gradient(2px 2px at 76% 18%, rgba(103, 232, 249, 0.95), transparent 70%), radial-gradient(1.8px 1.8px at 88% 76%, rgba(217, 70, 239, 0.6), transparent 70%), /* Small stars (cream/cyan, varied opacity) */ radial-gradient(1px 1px at 6% 12%, rgba(244, 247, 251, 0.85), transparent 60%), radial-gradient(1px 1px at 14% 48%, rgba(244, 247, 251, 0.55), transparent 60%), radial-gradient(1px 1px at 22% 82%, rgba(244, 247, 251, 0.7), transparent 60%), radial-gradient(1px 1px at 28% 30%, rgba(165, 180, 207, 0.6), transparent 60%), radial-gradient(1px 1px at 34% 14%, rgba(244, 247, 251, 0.65), transparent 60%), radial-gradient(1.2px 1.2px at 38% 88%, rgba(103, 232, 249, 0.55), transparent 70%), radial-gradient(1px 1px at 42% 38%, rgba(244, 247, 251, 0.5), transparent 60%), radial-gradient(1px 1px at 52% 8%, rgba(244, 247, 251, 0.7), transparent 60%), radial-gradient(1px 1px at 58% 50%, rgba(244, 247, 251, 0.4), transparent 60%), radial-gradient(1.1px 1.1px at 62% 78%, rgba(244, 247, 251, 0.65), transparent 60%), radial-gradient(1px 1px at 68% 32%, rgba(165, 180, 207, 0.55), transparent 60%), radial-gradient(1px 1px at 72% 56%, rgba(244, 247, 251, 0.6), transparent 60%), radial-gradient(1px 1px at 80% 40%, rgba(244, 247, 251, 0.5), transparent 60%), radial-gradient(1px 1px at 84% 8%, rgba(244, 247, 251, 0.7), transparent 60%), radial-gradient(1.1px 1.1px at 90% 46%, rgba(103, 232, 249, 0.5), transparent 70%), radial-gradient(1px 1px at 94% 24%, rgba(244, 247, 251, 0.6), transparent 60%), radial-gradient(1px 1px at 96% 62%, rgba(165, 180, 207, 0.55), transparent 60%); background-size: 100% 100%; pointer-events: none; z-index: 0; opacity: 0.95; } .cozmic-starfield > * { position: relative; z-index: 1; } /* ==================================================================== Soft cyan glow utility for hero typography Add .cozmic-glow-text to a heading to give it the electric chrome feel. ==================================================================== */ .cozmic-glow-text { text-shadow: 0 0 20px rgba(92, 212, 255, 0.45), 0 0 40px rgba(92, 212, 255, 0.2); }