/*!***************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/homepage/marketing-v2.css ***! \***************************************************************************************************************************************************************************************************************************************************************************/ /* Design tokens for the emergent.sh-derived marketing redesign. Scoped to /homepage/** via app/homepage/layout.tsx import — must not leak into the dashboard/student/institution-portal app chrome, which has its own system. */ /* Rajdhani is already loaded once, site-wide, via next/font/google in app/layout.tsx (registered under the --font-rajdhani CSS variable, applied to ) — no separate @import needed here. Referencing the literal family name "Rajdhani" would NOT resolve to that font (next/font registers it under an internal generated name, exposed only via the variable), so this must use var(--font-rajdhani) like every other font reference in the app (see app/globals.css's --font-sans/--font-heading/etc). */ .mkt-v2 { font-family: var(--font-rajdhani), ui-sans-serif, system-ui, sans-serif; /* CareerMatrix.tsx "YOUR CAREER" pill wall — each product module's brand-identity color, centralized here instead of scattered as literal hex in the component. These are deliberately theme-independent (a fixed per-module identity, not a --card/--foreground-style token that should shift with light/dark), so they live as plain custom properties on .mkt-v2 rather than inside .tone-dark/.tone-light. */ --matrix-career-dna-grad: linear-gradient(135deg, #6366f1, #a855f7); --matrix-helios-grad: linear-gradient(135deg, #4f46e5, #7c3aed, #a855f7); --matrix-glow-text: #ffffff; --matrix-glow-border: rgba(255, 255, 255, 0.35); --matrix-scout-grad: linear-gradient(135deg, #ede9fe, #ddd6fe); --matrix-scout-text: #6d28d9; --matrix-scout-border: #ddd6fe; --matrix-scribe-grad: linear-gradient(135deg, #cffafe, #a5f3fc); --matrix-scribe-text: #0e7490; --matrix-scribe-border: #a5f3fc; --matrix-forge-grad: linear-gradient(135deg, #ffedd5, #fed7aa); --matrix-forge-text: #c2410c; --matrix-forge-border: #fed7aa; --matrix-radar-grad: linear-gradient(135deg, #dcfce7, #bbf7d0); --matrix-radar-text: #15803d; --matrix-radar-border: #bbf7d0; --matrix-hive-grad: linear-gradient(135deg, #fef3c7, #fcd34d); --matrix-hive-text: #a16207; --matrix-hive-border: #fcd34d; --matrix-foundry-grad: linear-gradient(135deg, #fee2e2, #fecaca); --matrix-foundry-text: #b91c1c; --matrix-foundry-border: #fecaca; /* AgentCapture.tsx / StudentAgentCapture.tsx "device mockup" widgets — a fixed dark product-screenshot chrome that's intentionally the same regardless of the section's tone (it's meant to read as a screenshot, not themed UI), so these stay outside .tone-dark/.tone-light too. Only the STATIC colors are tokenized here — the framer-motion `animate={{ borderColor, backgroundColor }}` values in those files stay as literal rgba() strings, since Framer Motion interpolates between two concrete color values for its smooth transitions and can't animate between var() references the same way. */ --device-mockup-bg: #0b0b13; --device-mockup-titlebar-bg: #0e0e17; --device-mockup-gradient-start: #2563eb; --device-mockup-gradient-end: #a855f7; } /* Section-heading scale, mirroring .gl-h2/.gl-h3 (app/globals.css) so headings read as one consistent system across the whole marketing site instead of the 34 ad-hoc text-3xl..7xl combinations this page previously accumulated one section at a time. Deliberately NOT reusing .gl-h2/.gl-h3 directly: those set no color and would inherit correctly, but living inside a .tone-dark/.tone-light-scoped section here means anything that DOES resolve color through the global --foreground/--card tokens (as some .gl-* rules do) can break, since this system's tone classes locally redefine token names like --card to raw rgba()/hex strings, not the HSL triplets those global rules expect (see the .ucs-card note above for the same class of bug already found and fixed once). Kept self-contained here instead. Color is intentionally NOT set — callers still apply t-text/t-muted as before. */ .mkt-v2 .mv-h2 { font-weight: 700; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.05; letter-spacing: -0.02em; } .mkt-v2 .mv-h3 { font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.15; letter-spacing: -0.01em; } /* .ucs-card (app/globals.css) reads --card/--foreground/--muted-foreground — the app's REAL, account-wide light/dark theme tokens — not this system's own --bg/--text/--muted tone tokens. Left alone, the stacked cards' legibility depends on whatever the visitor's real theme happens to be. This section is always tone="dark" (Audiences.tsx), so pin these to the app's own DARK-theme values (not light) — matching the section's actual background — for just this subtree. Bare-value (not hsl()) numbers, matching how globals.css itself defines them as h/s/l components consumed via hsl(var(--x)). */ .mkt-v2 .ucs { --card: 262 20% 12%; --foreground: 260 10% 95%; --muted-foreground: 260 10% 60%; } /* .ucs-card__title (.gl-h3) has no color of its own in app/globals.css — it inherits whatever `color` was already COMPUTED higher up the real DOM tree (CSS inheritance passes the resolved value down, it does not re-evaluate var(--foreground) at each level), so the --foreground override above never reached it even though it reaches every sibling rule that references var(--foreground) directly (desc, list items). Set it explicitly instead of relying on inheritance. */ .mkt-v2 .ucs-card__title { color: hsl(var(--foreground)); } .mkt-v2 ::-moz-selection { background: rgba(99, 102, 241, 0.35); color: #fff; } .mkt-v2 ::selection { background: rgba(99, 102, 241, 0.35); color: #fff; } .mkt-v2 .font-display, .mkt-v2 .font-body, .mkt-v2 .font-mono { font-family: var(--font-rajdhani), sans-serif; } /* Brand gradient references the same --gradient-start/mid/end tokens as the rest of the app (app/globals.css :root) so it always matches the site's one true brand gradient instead of drifting into its own palette. */ .mkt-v2 .text-brand-gradient { background-image: linear-gradient(100deg, hsl(var(--gradient-start)) 0%, hsl(var(--gradient-mid)) 45%, hsl(var(--gradient-end)) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-right: 0.14em; } .mkt-v2 .bg-brand-gradient { background-image: linear-gradient(100deg, hsl(var(--gradient-start)) 0%, hsl(var(--gradient-mid)) 48%, hsl(var(--gradient-end)) 100%); } /* Ghost/outline word treatment for the manifesto-style multi-highlight paragraphs, matching the old .glow-text-stroke formula but keyed off this system's own --text tone var instead of the real-theme --foreground, so it stays legible inside tone-dark sections regardless of the app's real theme. */ .mkt-v2 .text-stroke { color: transparent; } .mkt-v2 .tone-dark .text-stroke { -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35); } .mkt-v2 .tone-light .text-stroke { -webkit-text-stroke: 1px rgba(15, 15, 24, 0.28); } .mkt-v2 .ring-brand { box-shadow: 0 0 0 1px hsl(var(--gradient-mid) / 0.5), 0 20px 60px -20px hsl(var(--gradient-mid) / 0.55); } .mkt-v2 .noise { position: relative; } .mkt-v2 .noise::before { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .mkt-v2 .marquee-mask { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); } @media (pointer: fine) { .mkt-v2.hide-cursor, .mkt-v2.hide-cursor * { cursor: none; } } /* Dual-tone system: each section declares its own designed tone for visual rhythm. Independent of the user's real light/dark theme preference (that still lives in contexts/ThemeContext.tsx and governs the app shell). */ .mkt-v2 .tone-dark { --bg: #05050a; --surface: #0f0f16; --text: #ffffff; --muted: rgba(255, 255, 255, 0.58); --faint: rgba(255, 255, 255, 0.34); --border: rgba(255, 255, 255, 0.1); --card: rgba(255, 255, 255, 0.02); --chip: rgba(255, 255, 255, 0.05); --accent: hsl(var(--gradient-mid)); --grid: rgba(255, 255, 255, 0.06); } .mkt-v2 .tone-light { --bg: #fbfaf8; --surface: #ffffff; --text: #0f0f18; --muted: #52525b; --faint: #a1a1aa; --border: rgba(15, 15, 24, 0.1); --card: #ffffff; --chip: #f2f1ef; --accent: hsl(var(--primary)); --grid: rgba(15, 15, 24, 0.05); } .mkt-v2 .tone { background: var(--bg); color: var(--text); } .mkt-v2 .t-text { color: var(--text); } .mkt-v2 .t-muted { color: var(--muted); } .mkt-v2 .t-faint { color: var(--faint); } .mkt-v2 .t-accent { color: var(--accent); } .mkt-v2 .t-border { border-color: var(--border); } .mkt-v2 .t-card { background: var(--card); border: 1px solid var(--border); } .mkt-v2 .t-surface { background: var(--surface); } .mkt-v2 .t-chip { background: var(--chip); } .mkt-v2 .hover\:t-text:hover { color: var(--text); } .mkt-v2 .hover\:t-accent:hover { color: var(--accent); } .mkt-v2 .group:hover .group-hover\:t-accent { color: var(--accent); } .mkt-v2 .card-brand { border: 1px solid var(--border); border-radius: 1rem; background-color: var(--card); background-image: linear-gradient(140deg, rgba(37, 99, 235, 0.13), rgba(99, 102, 241, 0.05) 46%, rgba(168, 85, 247, 0.13)); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .mkt-v2 .card-brand:hover { border-color: rgba(99, 102, 241, 0.5); box-shadow: 0 24px 60px -30px rgba(99, 102, 241, 0.55); } @keyframes mktMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .mkt-v2 .animate-marquee { animation-name: mktMarquee; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes mktFloaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .mkt-v2 .animate-floaty { animation: mktFloaty 7s ease-in-out infinite; } @keyframes mktAuroraShift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, -4%) scale(1.12); } 100% { transform: translate(-4%, 3%) scale(1); } } .mkt-v2 .animate-aurora { animation: mktAuroraShift 18s ease-in-out infinite alternate; } @keyframes mktOrbitSpin { to { transform: rotate(360deg); } } @keyframes mktOrbitSpinRev { to { transform: rotate(-360deg); } } @keyframes mktCorePulse { 0%, 100% { box-shadow: 0 0 40px 6px rgba(99,102,241,0.45), 0 0 90px 20px rgba(168,85,247,0.25); } 50% { box-shadow: 0 0 60px 12px rgba(99,102,241,0.7), 0 0 130px 34px rgba(168,85,247,0.4); } } @keyframes mktDashFlow { to { stroke-dashoffset: -40; } } .mkt-v2 .orbit-ring { animation: mktOrbitSpin 44s linear infinite; } .mkt-v2 .orbit-ring--slow { animation: mktOrbitSpin 64s linear infinite; } .mkt-v2 .orbit-node-counter { animation: mktOrbitSpinRev 44s linear infinite; } .mkt-v2 .orbit-node-counter--slow { animation: mktOrbitSpinRev 64s linear infinite; } .mkt-v2 .orbit-core { animation: mktCorePulse 4.5s ease-in-out infinite; } .mkt-v2 .orbit-line { stroke-dasharray: 6 8; animation: mktDashFlow 1.6s linear infinite; } @media (prefers-reduced-motion: reduce) { .mkt-v2 .orbit-ring, .mkt-v2 .orbit-ring--slow, .mkt-v2 .orbit-node-counter, .mkt-v2 .orbit-node-counter--slow, .mkt-v2 .orbit-core, .mkt-v2 .orbit-line, .mkt-v2 .logo-shine, .mkt-v2 .logo-shine::after { animation: none; } } .mkt-v2 .logo-shine { position: relative; display: inline-flex; overflow: hidden; border-radius: 6px; } .mkt-v2 .logo-shine::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, rgba(168, 85, 247, 0.35) 52%, transparent 70%); mix-blend-mode: screen; transform: translateX(-130%); animation: mktLogoSweep 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s 1 both; pointer-events: none; } @keyframes mktLogoSweep { 0% { transform: translateX(-130%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(130%); opacity: 0; } } @keyframes mktPulseBar { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .mkt-v2 [style*="pulseBar"] { animation-name: mktPulseBar; } @keyframes mktNodeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .mkt-v2 .node-float { animation: mktNodeFloat 3.2s ease-in-out infinite; } @keyframes mktVScrollUp { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes mktVScrollDown { from { transform: translateY(-50%); } to { transform: translateY(0); } } .mkt-v2 .vcol-inner { will-change: transform; } .mkt-v2 .vcol-up { animation: mktVScrollUp 26s linear infinite; } .mkt-v2 .vcol-down { animation: mktVScrollDown 26s linear infinite; } @media (prefers-reduced-motion: reduce) { .mkt-v2 .vcol-inner { animation: none !important; } } /* Final CTA band copy treatment — pairs with the globally-available .hp-cta-band / .hp-cta-band__bg-text / .gl-btn* classes (app/globals.css) to restore the old animated-gradient "Be early" band. */ .mkt-v2 .cta-band__eyebrow { display: block; margin-bottom: 1.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); } .mkt-v2 .cta-band__headline { display: flex; flex-direction: column; align-items: center; gap: 0.1em; margin: 0 0 1.35rem; line-height: 1; text-wrap: balance; } .mkt-v2 .cta-band__headline-lead { font-family: var(--font-rajdhani, "Rajdhani", sans-serif); font-size: clamp(2.15rem, 5vw, 3.35rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: #ffffff; } .mkt-v2 .cta-band__headline-accent { display: block; margin-top: 0.08em; font-size: clamp(2.85rem, 8.5vw, 5.75rem); line-height: 1.02; letter-spacing: -0.03em; padding-bottom: 0.12em; } .mkt-v2 .cta-band__sub { max-width: 32rem; margin: 0 auto 2.25rem; font-family: var(--font-rajdhani, "Rajdhani", sans-serif); font-size: clamp(1rem, 2vw, 1.15rem); font-weight: 500; line-height: 1.65; color: rgba(255, 255, 255, 0.75); } .mkt-v2 .cta-band__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; } .mkt-v2 .cta-band__fineprint { margin-top: 1.35rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .mkt-v2 html.lenis, .mkt-v2.lenis body { height: auto; } .mkt-v2.lenis-smooth { scroll-behavior: auto !important; } .mkt-v2 ::-webkit-scrollbar { width: 9px; height: 9px; } .mkt-v2 ::-webkit-scrollbar-track { background: transparent; } .mkt-v2 ::-webkit-scrollbar-thumb { background: linear-gradient(#4f46e5, #a855f7); border-radius: 9px; }