/* ============================================================ NOVAQORE LABS — critical.css Loaded synchronously; covers only above-fold content. Full styles are loaded asynchronously via preload in . Keep in sync with the matching sections in style.css. ============================================================ */ /* 1. DESIGN TOKENS */ :root { --clr-navy: #0A1A33; --clr-blue: #2563EB; --clr-violet: #7C3AED; --clr-offwhite: #F8FAFC; --clr-slate-900: #0F172A; --clr-slate-800: #1E293B; --clr-slate-700: #334155; --clr-slate-600: #475569; --clr-slate-500: #64748B; --clr-slate-400: #94A3B8; --clr-slate-300: #CBD5E1; --clr-slate-200: #E2E8F0; --clr-slate-100: #F1F5F9; --clr-white: #FFFFFF; --clr-bg: var(--clr-offwhite); --clr-bg-alt: var(--clr-slate-100); --clr-bg-dark: var(--clr-navy); --clr-text: var(--clr-slate-700); --clr-heading: var(--clr-navy); --clr-muted: var(--clr-slate-500); --clr-border: var(--clr-slate-200); --clr-cta: var(--clr-blue); --clr-cta-hover: #1D4ED8; --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.7; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --fs-h1: clamp(2rem, 5vw + 0.5rem, 3.5rem); --fs-h2: clamp(1.5rem, 3vw + 0.5rem, 2.25rem); --fs-h3: clamp(1.125rem, 2vw + 0.25rem, 1.5rem); --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; --section-py: clamp(4rem, 8vw, 6rem); --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.25rem; --radius-full: 9999px; --shadow-xs: 0 1px 2px rgba(10, 26, 51, .05); --shadow-sm: 0 1px 4px rgba(10, 26, 51, .07); --shadow-md: 0 4px 12px rgba(10, 26, 51, .09); --shadow-lg: 0 8px 28px rgba(10, 26, 51, .11); --ease: cubic-bezier(.4, 0, .2, 1); --t-fast: 150ms var(--ease); --t-base: 250ms var(--ease); --t-slow: 400ms var(--ease); --max-w: 1200px; --container-px: clamp(1rem, 4vw, 2rem); --nav-h: 68px; } /* 2. RESET & BASE */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--fw-normal); line-height: var(--lh-body); color: var(--clr-text); background: var(--clr-bg); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; font: inherit; border: none; background: none; } input, textarea, select { font: inherit; } h1, h2, h3, h4, h5, h6 { color: var(--clr-heading); font-weight: var(--fw-semibold); line-height: var(--lh-snug); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { max-width: 68ch; } /* 3. LAYOUT HELPERS */ .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--container-px); } .section { padding-block: var(--section-py); } .section--alt { background: var(--clr-bg-alt); } .section--dark { background: var(--clr-bg-dark); color: var(--clr-slate-300); } .section--dark h1, .section--dark h2, .section--dark h3 { color: var(--clr-white); } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .text-center { text-align: center; } .text-center p { margin-inline: auto; } /* 4. TYPOGRAPHY UTILITIES */ .section-label { display: inline-block; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--clr-blue); letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--sp-3); } .section-heading { font-size: var(--fs-h2); color: var(--clr-heading); margin-bottom: var(--sp-4); } .section-subhead { font-size: var(--text-lg); color: var(--clr-muted); max-width: 54ch; line-height: var(--lh-body); } .gradient-text { background: linear-gradient(135deg, var(--clr-blue) 0%, var(--clr-violet) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* 5. BUTTONS */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.7em 1.5em; border-radius: var(--radius-lg); font-size: var(--text-base); font-weight: var(--fw-semibold); transition: background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base), transform var(--t-fast); white-space: nowrap; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--clr-blue); color: var(--clr-white); box-shadow: 0 2px 8px rgba(37, 99, 235, .35); } .btn-primary:hover { background: var(--clr-cta-hover); box-shadow: 0 4px 14px rgba(37, 99, 235, .45); } .btn-secondary { background: transparent; color: var(--clr-blue); border: 2px solid var(--clr-blue); } .btn-secondary:hover { background: rgba(37, 99, 235, .06); } .btn-ghost { background: transparent; color: var(--clr-white); border: 2px solid rgba(255,255,255,.35); } .btn-ghost:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); } .btn-sm { padding: .5em 1.1em; font-size: var(--text-sm); } .btn-lg { padding: .85em 2em; font-size: var(--text-lg); } /* 6. CARDS */ .card { background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--radius-2xl); padding: var(--sp-8); transition: box-shadow var(--t-base), transform var(--t-base); } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .card--accent { border-color: var(--clr-blue); box-shadow: 0 0 0 1px var(--clr-blue); } .card--dashed { border-style: dashed; border-color: var(--clr-slate-300); background: var(--clr-slate-100); } /* 7. TAGS */ .tag { display: inline-flex; align-items: center; gap: var(--sp-1); padding: .2em .65em; background: var(--clr-slate-100); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--clr-slate-600); white-space: nowrap; } .tag--new { background: var(--clr-blue); color: var(--clr-white); } /* 8. NAVIGATION */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--clr-border); transition: box-shadow var(--t-base); } .site-header.scrolled { box-shadow: var(--shadow-md); } .site-header > .container { height: 100%; } .nav { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); } .nav__logo { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--clr-navy); flex-shrink: 0; } .nav__logo span { color: var(--clr-blue); } .nav__links { display: none; align-items: center; justify-content: center; gap: var(--sp-2); flex: 1; margin-inline: var(--sp-6); } @media (min-width: 1024px) { .nav__links { display: flex; } } .nav__item { position: relative; } .nav__link { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--clr-slate-700); transition: color var(--t-fast), background var(--t-fast); cursor: pointer; background: none; border: none; } .nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--clr-navy); background: var(--clr-slate-100); } .nav__chevron { width: 14px; height: 14px; transition: transform var(--t-fast); } .nav__link[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); } .nav__dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--sp-2); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast); z-index: 200; } .nav__item:hover .nav__dropdown, .nav__dropdown:focus-within { opacity: 1; visibility: visible; transform: translateY(0); } .nav__dropdown a { display: block; padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm); border-radius: var(--radius-md); color: var(--clr-slate-700); transition: background var(--t-fast), color var(--t-fast); } .nav__dropdown a:hover { background: var(--clr-slate-100); color: var(--clr-navy); } .nav__cta { flex-shrink: 0; } .nav__hamburger { display: flex; flex-direction: column; gap: 5px; padding: var(--sp-2); cursor: pointer; } @media (min-width: 1024px) { .nav__hamburger { display: none; } } .nav__hamburger span { display: block; width: 22px; height: 2px; background: var(--clr-navy); border-radius: 2px; transition: transform var(--t-base), opacity var(--t-base); } .nav__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__hamburger.open span:nth-child(2) { opacity: 0; } .nav__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav__mobile { display: none; position: fixed; inset: var(--nav-h) 0 0 0; background: var(--clr-white); padding: var(--sp-6) var(--sp-6); overflow-y: auto; z-index: 90; flex-direction: column; gap: var(--sp-2); } .nav__mobile.open { display: flex; } .nav__mobile a { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-lg); font-weight: var(--fw-medium); color: var(--clr-slate-800); transition: background var(--t-fast); } .nav__mobile a:hover { background: var(--clr-slate-100); } .nav__mobile .mobile-section-label { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--clr-muted); letter-spacing: .08em; text-transform: uppercase; padding: var(--sp-3) var(--sp-4) var(--sp-1); } /* 9. HERO */ .hero { padding-block: clamp(5rem, 12vw, 8rem) clamp(4rem, 8vw, 6rem); text-align: center; overflow: hidden; position: relative; background: radial-gradient(circle 1px at 1px 1px, rgba(255,255,255,.06) 0%, transparent 0%) 0 0 / 28px 28px, radial-gradient(ellipse 65% 55% at 12% 42%, rgba(109,40,217,.42) 0%, transparent 65%), radial-gradient(ellipse 55% 65% at 88% 18%, rgba(37,99,235,.42) 0%, transparent 65%), radial-gradient(ellipse 50% 45% at 60% 92%, rgba(124,58,237,.26) 0%, transparent 65%), radial-gradient(ellipse 38% 38% at 4% 88%, rgba(59,130,246,.18) 0%, transparent 65%), linear-gradient(145deg, #060a1f 0%, #0d1547 50%, #080c28 100%); } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 95% 55% at 50% -8%, rgba(59,130,246,.22) 0%, transparent 65%); pointer-events: none; z-index: 0; } .hero::after { content: ''; position: absolute; width: 720px; height: 720px; border-radius: 50%; border: 1px solid rgba(139,92,246,.15); top: -310px; right: -190px; box-shadow: 0 0 0 80px rgba(99,102,241,.04), 0 0 0 160px rgba(99,102,241,.025); pointer-events: none; z-index: 0; } .hero > .container { position: relative; z-index: 1; } @keyframes hero-bloom-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } } @keyframes hero-ring-drift { 0%,100% { transform: rotate(0deg) scale(1); } 40% { transform: rotate(4deg) scale(1.03); } 70% { transform: rotate(-3deg) scale(.97); } } @media (prefers-reduced-motion: no-preference) { .hero::before { animation: hero-bloom-pulse 9s ease-in-out infinite; } .hero::after { animation: hero-ring-drift 22s ease-in-out infinite; } } .hero__badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: .35em 1em; background: rgba(139,92,246,.16); border: 1px solid rgba(139,92,246,.35); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: #c4b5fd; margin-bottom: var(--sp-6); } .hero__title { font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--clr-white); line-height: var(--lh-tight); max-width: 18ch; margin-inline: auto; margin-bottom: var(--sp-6); } .hero__subhead { font-size: clamp(var(--text-base), 1.8vw, var(--text-xl)); color: rgba(255,255,255,.72); max-width: 52ch; margin-inline: auto; margin-bottom: var(--sp-8); line-height: var(--lh-body); } .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin-bottom: var(--sp-12); } .hero__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8) var(--sp-12); padding-top: var(--sp-8); border-top: 1px solid rgba(255,255,255,.1); max-width: 560px; margin-inline: auto; } .hero__stat-value { font-size: var(--text-3xl); font-weight: var(--fw-bold); color: var(--clr-white); line-height: 1; margin-bottom: var(--sp-1); } .hero__stat-label { font-size: var(--text-sm); color: rgba(255,255,255,.55); } /* 22. SKIP LINK */ .skip-link { position: absolute; top: -100px; left: var(--sp-4); padding: var(--sp-3) var(--sp-5); background: var(--clr-blue); color: var(--clr-white); border-radius: var(--radius-md); font-weight: var(--fw-semibold); z-index: 999; transition: top var(--t-fast); } .skip-link:focus { top: var(--sp-4); } /* 23. ANIMATION BASE */ .js-anim .reveal { opacity: 0; transform: translateY(24px); } /* 24. UTILITIES */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }