/* =============================================================
NEWLEARN.IN — main.css [ORGANIZED BUILD]
Reorganized into component blocks (see component tags below).
Legacy/dead mobile-nav code removed (superseded by drawer system).
Duplicate shimmer keyframe removed. Misplaced keyframes relocated
to their correct component (why-newlearn / newsletter).
FONT STACK:
Display : 'Plus Jakarta Sans'
Body : 'Sora'
Mono : 'JetBrains Mono'
Add to before stylesheets:
============================================================= */
/* ─────────────────────────────────────────────
component: tokens | START
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
1. CSS CUSTOM PROPERTIES — DESIGN TOKENS
───────────────────────────────────────────── */
:root {
/* — Brand Palette — */
--nl-ink: #09090F; /* true near-black — richer depth */
--nl-ink-soft: #23263A; /* body text — stronger contrast */
--nl-ink-muted: #5C6080; /* captions, meta — more readable */
--nl-ink-faint: #9699AD; /* placeholders, disabled */
--nl-surface: #FFFFFF; /* page background */
--nl-surface-2: #F3F4FA; /* section alternate bg */
--nl-surface-3: #EAECF6; /* card hover tint — slightly deeper */
--nl-border: #DFE1EE; /* subtle borders */
--nl-border-strong:#B8BBCE; /* stronger borders */
/* — Accent: Premium Electric Indigo — */
--nl-accent: #3D5AF1; /* primary CTA — saturated indigo */
--nl-accent-dark: #2440D4; /* hover state */
--nl-accent-light: #EBF0FF; /* tinted bg for icons/tags */
--nl-accent-glow: rgba(61,90,241,0.20);
/* — Secondary accents — */
--nl-teal: #00BFA8; /* secondary highlight / badges */
--nl-teal-light: #DDF7F3;
--nl-amber: #F0940A; /* star / warm accent — richer gold */
--nl-amber-light: #FEF0D0;
--nl-rose: #F23558; /* new / hot badge */
--nl-rose-light: #FFE4EA;
--nl-green: #0EA572; /* free badge — deeper emerald */
--nl-green-light: #CDFAEB;
/* — Gradient Tokens — premium deeper richness — */
--nl-grad-hero: linear-gradient(145deg, #07081A 0%, #121648 55%, #0A0F3A 100%);
--nl-grad-accent: linear-gradient(135deg, #3D5AF1 0%, #7B3DF5 100%);
--nl-grad-accent-vivid: linear-gradient(135deg, #4F6BFF 0%, #9B4BFF 100%);
--nl-grad-card: linear-gradient(160deg, #FFFFFF 0%, #F3F4FA 100%);
--nl-grad-cta: linear-gradient(140deg, #141852 0%, #3D5AF1 55%, #7B3DF5 100%);
/* — Shadows — deeper, more premium — */
--nl-shadow-xs: 0 1px 3px rgba(9,9,15,0.07), 0 1px 2px rgba(9,9,15,0.05);
--nl-shadow-sm: 0 2px 8px rgba(9,9,15,0.09), 0 1px 3px rgba(9,9,15,0.06);
--nl-shadow-md: 0 4px 20px rgba(9,9,15,0.11), 0 2px 8px rgba(9,9,15,0.07);
--nl-shadow-lg: 0 12px 40px rgba(9,9,15,0.14), 0 4px 16px rgba(9,9,15,0.09);
--nl-shadow-xl: 0 24px 64px rgba(9,9,15,0.18), 0 8px 24px rgba(9,9,15,0.11);
--nl-shadow-accent:0 8px 32px rgba(61,90,241,0.32);
--nl-shadow-accent-lg: 0 16px 48px rgba(61,90,241,0.38);
/* — Typography — UPGRADED — */
--nl-font-display: 'Plus Jakarta Sans', sans-serif;
--nl-font-body: 'Sora', sans-serif;
--nl-font-mono: 'JetBrains Mono', monospace;
/* Type scale — unchanged values, used everywhere */
--nl-text-xs: 0.75rem; /* 12px */
--nl-text-sm: 0.875rem; /* 14px */
--nl-text-base: 1rem; /* 16px */
--nl-text-md: 1.125rem; /* 18px */
--nl-text-lg: 1.25rem; /* 20px */
--nl-text-xl: 1.5rem; /* 24px */
--nl-text-2xl: 1.875rem; /* 30px */
--nl-text-3xl: 2.25rem; /* 36px */
--nl-text-4xl: 3rem; /* 48px */
--nl-text-5xl: 3.75rem; /* 60px */
--nl-text-6xl: 4.5rem; /* 72px */
/* Line heights — refined for premium reading rhythm */
--nl-leading-tight: 1.18; /* headings — slightly looser than 1.12 */
--nl-leading-snug: 1.38; /* sub-headings */
--nl-leading-base: 1.65; /* body — more air = more premium */
--nl-leading-loose: 1.85; /* large sub-text */
/* — Spacing — */
--nl-space-1: 0.25rem;
--nl-space-2: 0.5rem;
--nl-space-3: 0.75rem;
--nl-space-4: 1rem;
--nl-space-5: 1.25rem;
--nl-space-6: 1.5rem;
--nl-space-8: 2rem;
--nl-space-10: 2.5rem;
--nl-space-12: 3rem;
--nl-space-16: 4rem;
--nl-space-20: 5rem;
--nl-space-24: 6rem;
--nl-space-32: 8rem;
/* — Radius — */
--nl-r-sm: 6px;
--nl-r-md: 12px;
--nl-r-lg: 18px;
--nl-r-xl: 24px;
--nl-r-2xl: 32px;
--nl-r-full: 9999px;
/* — Transitions — */
--nl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--nl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--nl-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
--nl-dur-fast: 150ms;
--nl-dur-base: 240ms;
--nl-dur-slow: 400ms;
/* — Layout — */
--nl-container: 1280px;
--nl-container-sm: 900px;
--nl-header-h: 72px;
}
/* ─────────────────────────────────────────────
component: tokens | END
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
component: base | START
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
2. RESET & BASE
───────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
font-size: 16px;
/* Subpixel rendering for sharper text */
text-rendering: optimizeLegibility;
}
body.aa0105-nl-body {
font-family: var(--nl-font-body);
font-size: var(--nl-text-base);
font-weight: 400;
color: var(--nl-ink-soft);
background-color: var(--nl-surface);
line-height: var(--nl-leading-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
/* Premium: slightly optical weight boost */
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
img, video {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
ul, ol {
list-style: none;
}
button {
cursor: pointer;
border: none;
background: none;
font-family: inherit;
}
input, textarea, select {
font-family: inherit;
font-size: inherit;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--nl-font-display);
color: var(--nl-ink);
line-height: var(--nl-leading-tight);
font-weight: 700;
/* Optical kerning for headings */
font-feature-settings: "kern" 1, "liga" 1;
letter-spacing: -0.02em;
}
p {
line-height: var(--nl-leading-base);
}
/* Focus ring — accessibility */
:focus-visible {
outline: 2px solid var(--nl-accent);
outline-offset: 3px;
border-radius: var(--nl-r-sm);
}
/* ─────────────────────────────────────────────
component: base | END
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
component: typography | START
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
3. TYPOGRAPHY SYSTEM
───────────────────────────────────────────── */
/* Display — hero headings
Plus Jakarta Sans at 800 weight = editorial, premium, sharp */
.aa0105-nl-hero-heading {
font-family: var(--nl-font-display);
font-size: clamp(2.5rem, 5.8vw, 4.75rem); /* 40px → 76px */
font-weight: 800;
line-height: 1.10;
letter-spacing: -0.035em; /* tighter tracking = more premium */
color: #FFFFFF;
/* Richer multi-layer glow — more depth, not blown out */
text-shadow:
0 2px 8px rgba(61,90,241,0.22),
0 8px 32px rgba(61,90,241,0.12),
0 1px 0 rgba(255,255,255,0.06);
}
/* Section headings — sharper weight contrast */
.aa0105-nl-section-title {
font-family: var(--nl-font-display);
font-size: clamp(var(--nl-text-xl), 3vw, var(--nl-text-3xl));
font-weight: 800; /* up from 700 — heavier = premium */
letter-spacing: -0.03em;
color: var(--nl-ink);
margin-bottom: var(--nl-space-4);
line-height: var(--nl-leading-tight);
}
/* Section eyebrow — more refined tracking */
.aa0105-nl-section-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--nl-space-2);
font-family: var(--nl-font-body);
font-size: 0.7rem; /* 11.2px — crisper at smaller size */
font-weight: 700;
letter-spacing: 0.14em; /* wider tracking = more premium tag */
text-transform: uppercase;
color: var(--nl-accent);
margin-bottom: var(--nl-space-3);
/* Subtle pill shape for eyebrow labels */
background: var(--nl-accent-light);
padding: 0.3em 0.9em;
border-radius: var(--nl-r-full);
border: 1px solid rgba(61,90,241,0.18);
width: fit-content;
}
/* Eyebrow on dark backgrounds */
.aa0105-nl-eyebrow-light {
color: rgba(255,255,255,0.80);
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.16);
}
/* Section sub text — richer weight and leading */
.aa0105-nl-section-sub {
font-family: var(--nl-font-body);
font-size: var(--nl-text-md);
font-weight: 400;
color: var(--nl-ink-muted);
max-width: 580px;
line-height: var(--nl-leading-loose);
letter-spacing: -0.005em; /* subtle — just enough to polish */
}
/* Screen reader only */
.aa0105-nl-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ─────────────────────────────────────────────
component: typography | END
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
component: layout | START
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
4. CONTAINER & LAYOUT HELPERS
───────────────────────────────────────────── */
.aa0105-nl-container {
width: 100%;
max-width: var(--nl-container);
margin-inline: auto;
padding-inline: var(--nl-space-6);
}
@media (max-width: 768px) {
.aa0105-nl-container {
padding-inline: var(--nl-space-4);
}
}
.aa0105-nl-section-head {
margin-bottom: var(--nl-space-12);
}
.aa0105-nl-section-head-center {
text-align: center;
}
.aa0105-nl-section-head-center .aa0105-nl-section-sub {
margin-inline: auto;
}
.aa0105-nl-section-head-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--nl-space-6);
flex-wrap: wrap;
}
/* ─────────────────────────────────────────────
component: layout | END
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
component: buttons | START
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
5. BUTTONS
───────────────────────────────────────────── */
.aa0105-nl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--nl-space-2);
font-family: var(--nl-font-body);
font-size: var(--nl-text-sm);
font-weight: 700; /* up from 600 — heavier = premium */
letter-spacing: 0.005em;
padding: 0.65rem 1.5rem; /* slightly more breathing room */
border-radius: var(--nl-r-full);
border: 2px solid transparent;
cursor: pointer;
transition:
background var(--nl-dur-base) var(--nl-ease),
color var(--nl-dur-base) var(--nl-ease),
border-color var(--nl-dur-base) var(--nl-ease),
box-shadow var(--nl-dur-base) var(--nl-ease),
transform var(--nl-dur-fast) var(--nl-ease-spring);
text-decoration: none;
white-space: nowrap;
position: relative;
overflow: hidden;
}
/* Sheen overlay on hover */
.aa0105-nl-btn::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,0);
transition: background var(--nl-dur-fast) var(--nl-ease);
border-radius: inherit;
pointer-events: none;
}
.aa0105-nl-btn:hover::after {
background: rgba(255,255,255,0.09);
}
.aa0105-nl-btn:active {
transform: scale(0.97);
}
/* Primary — richer shadow */
.aa0105-nl-btn-primary {
background: var(--nl-grad-accent);
color: #FFFFFF;
border-color: transparent;
box-shadow: 0 4px 16px rgba(61,90,241,0.38), 0 1px 3px rgba(61,90,241,0.24);
}
.aa0105-nl-btn-primary:hover {
box-shadow: var(--nl-shadow-accent-lg);
transform: translateY(-2px);
}
/* Outline */
.aa0105-nl-btn-outline {
background: transparent;
color: var(--nl-accent);
border-color: var(--nl-accent);
}
.aa0105-nl-btn-outline:hover {
background: var(--nl-accent-light);
border-color: var(--nl-accent);
}
/* Outline on dark bg */
.aa0105-nl-sec1-hero .aa0105-nl-btn-outline {
color: rgba(255,255,255,0.92);
border-color: rgba(255,255,255,0.38);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.aa0105-nl-sec1-hero .aa0105-nl-btn-outline:hover {
background: rgba(255,255,255,0.11);
border-color: rgba(255,255,255,0.72);
color: #FFFFFF;
}
/* White (for dark section CTA) */
.aa0105-nl-btn-white {
background: #FFFFFF;
color: var(--nl-accent);
border-color: #FFFFFF;
font-weight: 800;
}
.aa0105-nl-btn-white:hover {
background: #EFF2FF;
box-shadow: 0 4px 24px rgba(0,0,0,0.18);
transform: translateY(-2px);
}
/* Sizes */
.aa0105-nl-btn-lg {
font-size: var(--nl-text-base);
font-weight: 700;
padding: 0.9rem 2.1rem;
letter-spacing: 0.01em;
}
.aa0105-nl-btn-sm {
font-size: 0.8125rem; /* 13px — crispier than xs token */
font-weight: 700;
padding: 0.45rem 1rem;
letter-spacing: 0.01em;
}
/* ─────────────────────────────────────────────
component: buttons | END
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
component: hero | START
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
7. SECTION 1 — HERO
───────────────────────────────────────────── */
.aa0105-nl-sec1-hero {
position: relative;
background: var(--nl-grad-hero);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: calc(var(--nl-header-h) + var(--nl-space-16));
padding-bottom: var(--nl-space-24);
overflow: hidden;
}
/* Deeper, richer mesh background */
.aa0105-nl-sec1-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 65% 55% at 72% 38%, rgba(61,90,241,0.22) 0%, transparent 68%),
radial-gradient(ellipse 45% 45% at 18% 68%, rgba(123,61,245,0.15) 0%, transparent 62%),
radial-gradient(ellipse 35% 35% at 82% 82%, rgba(0,191,168,0.10) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
/* Tighter, more refined grid pattern */
.aa0105-nl-sec1-hero::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.020) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.020) 1px, transparent 1px);
background-size: 56px 56px;
pointer-events: none;
z-index: 0;
}
.aa0105-nl-hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--nl-space-16);
align-items: center;
}
/* — Hero Text — */
.aa0105-nl-hero-text {
display: flex;
flex-direction: column;
gap: var(--nl-space-6);
}
/* Hero eyebrow pill */
.aa0105-nl-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--nl-space-2);
font-family: var(--nl-font-body);
font-size: 0.7rem;
font-weight: 700;
color: var(--nl-teal);
letter-spacing: 0.12em;
text-transform: uppercase;
background: rgba(0,191,168,0.10);
border: 1px solid rgba(0,191,168,0.28);
border-radius: var(--nl-r-full);
padding: 0.45em 1em;
width: fit-content;
animation: aa0105-fadeInUp 0.7s var(--nl-ease) both;
}
.aa0105-nl-hero-eyebrow::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--nl-teal);
box-shadow: 0 0 8px var(--nl-teal);
animation: aa0105-pulse 2s ease-in-out infinite;
}
.aa0105-nl-hero-heading {
animation: aa0105-fadeInUp 0.7s 0.12s var(--nl-ease) both;
}
/* Gradient text highlight — richer, more vivid */
.aa0105-nl-hero-highlight {
background: var(--nl-grad-accent-vivid);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline;
}
/* Hero sub — more readable weight */
.aa0105-nl-hero-sub {
font-family: var(--nl-font-body);
font-size: clamp(var(--nl-text-base), 1.5vw, var(--nl-text-md));
font-weight: 400;
letter-spacing: -0.005em;
color: rgba(255,255,255,0.68);
line-height: 1.85;
max-width: 520px;
animation: aa0105-fadeInUp 0.7s 0.22s var(--nl-ease) both;
}
.aa0105-nl-hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--nl-space-3);
align-items: center;
animation: aa0105-fadeInUp 0.7s 0.32s var(--nl-ease) both;
}
/* Trust badges */
.aa0105-nl-hero-trust {
display: flex;
flex-wrap: wrap;
gap: var(--nl-space-5);
align-items: center;
animation: aa0105-fadeInUp 0.7s 0.42s var(--nl-ease) both;
}
.aa0105-nl-trust-item {
display: flex;
align-items: center;
gap: var(--nl-space-2);
font-family: var(--nl-font-body);
font-size: var(--nl-text-sm);
font-weight: 500;
color: rgba(255,255,255,0.52);
letter-spacing: -0.005em;
}
.aa0105-nl-trust-item svg {
color: var(--nl-amber);
flex-shrink: 0;
}
/* — Hero Visual — */
.aa0105-nl-hero-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 460px;
padding-top: 20px;
transform: translateY(8px);
animation: aa0105-premiumHeroReveal 1.2s cubic-bezier(.22,1,.36,1) both;
}
/* Blob glow — deeper, richer */
.aa0105-nl-hero-blob {
position: absolute;
width: 520px;
height: 520px;
border-radius: 50%;
background: radial-gradient(circle, rgba(61,90,241,0.30) 0%, rgba(123,61,245,0.10) 50%, transparent 72%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: aa0105-blob-pulse 4s ease-in-out infinite;
pointer-events: none;
}
/* Floating visual cards */
.aa0105-nl-hero-card-float {
position: absolute;
border-radius: var(--nl-r-xl);
overflow: hidden;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 20px 48px rgba(0,0,0,0.26);
}
.aa0105-nl-hero-card-float img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
/* Float card label — refined typography */
.aa0105-nl-hcf-label {
position: absolute;
bottom: var(--nl-space-3);
left: var(--nl-space-3);
background: rgba(9,9,15,0.78);
color: #FFFFFF;
font-family: var(--nl-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
padding: var(--nl-space-1) var(--nl-space-3);
border-radius: var(--nl-r-full);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.aa0105-nl-hcf-1 {
width: 360px;
height: 220px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: aa0105-float-1 6s ease-in-out infinite;
z-index: 2;
}
.aa0105-nl-hcf-2 {
width: 240px;
height: 150px;
bottom: 8%;
right: 8%;
transform: none;
animation: aa0105-float-2 7s 1s ease-in-out infinite;
z-index: 3;
}
/* Badge float — refined type */
.aa0105-nl-hero-badge-float {
position: absolute;
top: 12%;
right: 12%;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-radius: var(--nl-r-full);
padding: var(--nl-space-2) var(--nl-space-4);
font-family: var(--nl-font-body);
font-size: var(--nl-text-sm);
font-weight: 600;
letter-spacing: -0.005em;
color: #FFFFFF;
white-space: nowrap;
box-shadow: var(--nl-shadow-md);
animation: aa0105-float-badge 5s 0.5s ease-in-out infinite;
z-index: 4;
}
.aa0105-nl-hero-badge-float strong {
color: var(--nl-teal);
margin-right: 2px;
font-weight: 700;
}
/* Scroll indicator */
.aa0105-nl-hero-scroll {
position: absolute;
bottom: var(--nl-space-8);
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
animation: aa0105-fadeIn 1s 1s var(--nl-ease) both;
}
.aa0105-nl-scroll-dot {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255,255,255,0.38);
animation: aa0105-scroll-bounce 2s ease-in-out infinite;
}
/* Hero responsive */
@media (max-width: 1024px) {
.aa0105-nl-hero-inner {
grid-template-columns: 1fr;
gap: var(--nl-space-12);
text-align: center;
}
.aa0105-nl-hero-sub {
max-width: 100%;
margin-inline: auto;
}
.aa0105-nl-hero-actions {
justify-content: center;
}
.aa0105-nl-hero-trust {
justify-content: center;
}
.aa0105-nl-hero-visual {
min-height: 320px;
order: -1;
}
.aa0105-nl-hcf-1 {
width: 260px;
height: 160px;
transform: translate(-52%, -52%);
}
.aa0105-nl-hcf-2 {
width: 180px;
height: 110px;
right: 5%;
transform: none;
}
}
@media (max-width: 640px) {
.aa0105-nl-sec1-hero {
padding-top: calc(var(--nl-header-h) + var(--nl-space-8));
padding-bottom: var(--nl-space-16);
}
.aa0105-nl-hero-inner {
gap: var(--nl-space-8);
}
.aa0105-nl-hero-visual {
min-height: 240px;
}
.aa0105-nl-hcf-1 {
width: 200px;
height: 125px;
}
.aa0105-nl-hcf-2 {
display: none;
}
.aa0105-nl-hero-badge-float {
font-size: var(--nl-text-xs);
padding: var(--nl-space-1) var(--nl-space-3);
}
}
/* ─────────────────────────────────────────────
8. KEYFRAME ANIMATIONS
───────────────────────────────────────────── */
@keyframes aa0105-fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes aa0105-fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes aa0105-float-1 {
0%, 100% {
transform: translate(-50%, -50%) translateY(0px);
}
50% {
transform: translate(-50%, -50%) translateY(-10px);
}
}
@keyframes aa0105-float-2 {
0%, 100% { transform: translateX(10%) translateY(0px); }
50% { transform: translateX(10%) translateY(-10px); }
}
@keyframes aa0105-float-badge {
0%, 100% { transform: translateY(0px) rotate(-1deg); }
50% { transform: translateY(-8px) rotate(1deg); }
}
@keyframes aa0105-blob-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.65; }
50% { transform: translate(-50%, -50%) scale(1.14); opacity: 1; }
}
@keyframes aa0105-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--nl-teal); }
50% { opacity: 0.5; box-shadow: 0 0 14px var(--nl-teal); }
}
@keyframes aa0105-scroll-bounce {
0%, 100% { transform: translateY(0); opacity: 0.45; }
50% { transform: translateY(8px); opacity: 1; }
}
@keyframes aa0105-premiumHeroReveal {
from {
opacity: 0;
transform: translateY(36px) scale(0.93);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ─────────────────────────────────────────────
component: hero | END
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
component: stats | START
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
1. SECTION 2 — STATS BAR
───────────────────────────────────────────── */
.aa0105-nl-sec2-stats {
position: relative;
background: var(--nl-ink); /* uses upgraded #09090F from tokens */
padding-block: var(--nl-space-12);
overflow: hidden;
}
/* Accent glow strip at top — slightly stronger opacity */
.aa0105-nl-sec2-stats::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--nl-grad-accent);
opacity: 0.85; /* up from 0.7 — more visible pop */
}
/* Radial glow center — deeper indigo */
.aa0105-nl-sec2-stats::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 120% at 50% 50%, rgba(61,90,241,0.09) 0%, transparent 70%);
pointer-events: none;
}
/* Grid */
.aa0105-nl-stats-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
}
/* Each stat item */
.aa0105-nl-stat-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--nl-space-8) var(--nl-space-4); /* up from space-6 — more breathing room */
position: relative;
gap: var(--nl-space-1);
opacity: 0;
transform: translateY(16px);
transition:
opacity 0.6s var(--nl-ease),
transform 0.6s var(--nl-ease);
}
/* Staggered reveal */
.aa0105-nl-stat-item.aa0105-nl-in-view:nth-child(1) { transition-delay: 0.00s; opacity: 1; transform: translateY(0); }
.aa0105-nl-stat-item.aa0105-nl-in-view:nth-child(2) { transition-delay: 0.08s; opacity: 1; transform: translateY(0); }
.aa0105-nl-stat-item.aa0105-nl-in-view:nth-child(3) { transition-delay: 0.16s; opacity: 1; transform: translateY(0); }
.aa0105-nl-stat-item.aa0105-nl-in-view:nth-child(4) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
.aa0105-nl-stat-item.aa0105-nl-in-view:nth-child(5) { transition-delay: 0.32s; opacity: 1; transform: translateY(0); }
/* Vertical dividers — slightly more visible */
.aa0105-nl-stat-item:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 20%;
height: 60%;
width: 1px;
background: rgba(255,255,255,0.10); /* up from 0.08 */
}
/* ── Stat Number ──
Plus Jakarta Sans 800 at large size with tight tracking
= premium financial/dashboard number aesthetic */
.aa0105-nl-stat-num {
font-family: var(--nl-font-display);
font-size: clamp(1.875rem, 3.5vw, 3.25rem); /* 30px → 52px — slightly tighter ceiling */
font-weight: 800;
color: #FFFFFF;
letter-spacing: -0.045em; /* tighter than before — cleaner */
line-height: 1;
display: inline-block;
/* Subtle text-shadow for depth on dark bg */
text-shadow: 0 2px 12px rgba(61,90,241,0.20);
}
/* +/% suffix — vivid accent colour, properly sized */
.aa0105-nl-stat-plus {
font-family: var(--nl-font-display);
font-size: clamp(1.25rem, 2.5vw, 2rem); /* proportionally scaled */
font-weight: 700;
color: var(--nl-accent);
line-height: 1;
display: inline-block;
vertical-align: top;
margin-top: 3px;
/* Glowing accent suffix */
text-shadow: 0 0 16px rgba(61,90,241,0.45);
}
/* Number + suffix flex wrapper */
.aa0105-nl-stat-item > strong,
.aa0105-nl-stat-item > span.aa0105-nl-stat-plus {
display: inline;
}
.aa0105-nl-stat-item {
position: relative;
}
.aa0105-nl-stat-num-wrap {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 2px;
line-height: 1;
}
/* ── Stat Label ──
Sora at small size — more refined than DM Sans here */
.aa0105-nl-stat-label {
font-family: var(--nl-font-body);
font-size: 0.8125rem; /* 13px — between xs and sm, crisper */
color: rgba(255,255,255,0.42);
font-weight: 500; /* up from 400 — more intentional */
margin-top: var(--nl-space-2);
letter-spacing: 0.03em; /* slight tracking = polished utility */
line-height: 1.45;
}
/* Responsive */
@media (max-width: 900px) {
.aa0105-nl-stats-grid {
grid-template-columns: repeat(3, 1fr);
row-gap: var(--nl-space-2);
}
.aa0105-nl-stat-item:nth-child(3)::after {
display: none;
}
}
@media (max-width: 560px) {
.aa0105-nl-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.aa0105-nl-stat-item:nth-child(2)::after {
display: none;
}
.aa0105-nl-stat-item:nth-child(4)::after {
display: none;
}
}
/* ─────────────────────────────────────────────
component: stats | END
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
component: cards | START
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
2. SECTION 3 — FEATURED LEARNING CARDS
───────────────────────────────────────────── */
.aa0105-nl-sec3-featured {
position: relative;
background: var(--nl-surface);
padding-block: var(--nl-space-24);
overflow: hidden;
}
/* Subtle bg ambient */
.aa0105-nl-sec3-featured::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 60% at 10% 20%, rgba(61,90,241,0.038) 0%, transparent 70%),
radial-gradient(ellipse 40% 50% at 90% 80%, rgba(0,191,168,0.032) 0%, transparent 70%);
pointer-events: none;
}
/* ── Cards Grid ── */
.aa0105-nl-cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--nl-space-6);
position: relative;
z-index: 1;
}
@media (max-width: 1100px) {
.aa0105-nl-cards-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 780px) {
.aa0105-nl-cards-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--nl-space-4);
}
}
@media (max-width: 480px) {
.aa0105-nl-cards-grid {
grid-template-columns: 1fr;
gap: var(--nl-space-4);
}
}
/* ── Individual Card ──
Cleaner border, richer hover shadow */
.aa0105-nl-card {
background: var(--nl-surface);
border: 1px solid var(--nl-border);
border-radius: var(--nl-r-xl);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--nl-shadow-sm);
transition:
transform var(--nl-dur-base) var(--nl-ease-spring),
box-shadow var(--nl-dur-base) var(--nl-ease),
border-color var(--nl-dur-base) var(--nl-ease);
/* Reveal animation */
opacity: 0;
transform: translateY(20px);
}
.aa0105-nl-card.aa0105-nl-in-view {
opacity: 1;
transform: translateY(0);
transition:
opacity 0.55s var(--nl-ease),
transform 0.55s var(--nl-ease),
box-shadow var(--nl-dur-base) var(--nl-ease),
border-color var(--nl-dur-base) var(--nl-ease);
}
/* Staggered card reveal */
.aa0105-nl-card.aa0105-nl-in-view:nth-child(1) { transition-delay: 0.00s; }
.aa0105-nl-card.aa0105-nl-in-view:nth-child(2) { transition-delay: 0.06s; }
.aa0105-nl-card.aa0105-nl-in-view:nth-child(3) { transition-delay: 0.12s; }
.aa0105-nl-card.aa0105-nl-in-view:nth-child(4) { transition-delay: 0.18s; }
.aa0105-nl-card.aa0105-nl-in-view:nth-child(5) { transition-delay: 0.24s; }
.aa0105-nl-card.aa0105-nl-in-view:nth-child(6) { transition-delay: 0.30s; }
.aa0105-nl-card.aa0105-nl-in-view:nth-child(7) { transition-delay: 0.36s; }
.aa0105-nl-card.aa0105-nl-in-view:nth-child(8) { transition-delay: 0.42s; }
/* Card hover lift — deeper shadow for premium feel */
.aa0105-nl-card:hover {
transform: translateY(-7px) scale(1.013);
box-shadow: var(--nl-shadow-lg), 0 0 0 1.5px rgba(61,90,241,0.35) inset;
border-color: rgba(61,90,241,0.28);
}
/* ── Card Link ── */
.aa0105-nl-card-link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
outline-offset: 4px;
}
.aa0105-nl-card-link:focus-visible {
outline: 2px solid var(--nl-accent);
border-radius: var(--nl-r-xl);
}
/* ── Card Image Wrapper ── */
.aa0105-nl-card-img-wrap {
position: relative;
overflow: hidden;
aspect-ratio: 5 / 3;
background: var(--nl-surface-2);
flex-shrink: 0;
}
/* Lazy load image */
.aa0105-nl-card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition:
transform var(--nl-dur-slow) var(--nl-ease),
opacity 0.4s var(--nl-ease),
filter 0.4s var(--nl-ease);
opacity: 0;
filter: blur(6px);
}
.aa0105-nl-card-img.aa0105-nl-img-loaded {
opacity: 1;
filter: blur(0);
}
/* Premium shimmer — uses a richer, slightly bluish tint
instead of flat grey, matching the brand */
.aa0105-nl-card-img-wrap::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
var(--nl-surface-2) 0%,
#E8EAFC 38%, /* subtle brand-tinted mid highlight */
var(--nl-surface-3) 55%,
var(--nl-surface-2) 80%
);
background-size: 240% 100%;
animation: aa0105-shimmer 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
z-index: 0;
transition: opacity 0.35s var(--nl-ease);
}
/* Hide shimmer once image loads */
.aa0105-nl-card-img-wrap.aa0105-nl-img-loaded::before {
opacity: 0;
pointer-events: none;
}
/* Image scale on hover */
.aa0105-nl-card:hover .aa0105-nl-card-img {
transform: scale(1.07);
}
/* Gradient overlay on image bottom */
.aa0105-nl-card-img-wrap::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 55%;
background: linear-gradient(to top, rgba(9,9,15,0.32) 0%, transparent 100%);
pointer-events: none;
z-index: 1;
}
/* ── Card Badges ──
Tighter padding, slightly bolder font for premium look */
.aa0105-nl-card-badge {
position: absolute;
top: var(--nl-space-3);
left: var(--nl-space-3);
z-index: 2;
font-family: var(--nl-font-body);
font-size: 0.6875rem; /* 11px explicit — sharp at badge size */
font-weight: 800; /* up from 700 — badges need to punch */
letter-spacing: 0.08em; /* wider tracking on tiny badge text */
text-transform: uppercase;
padding: 4px 10px; /* up from 3px — slightly more height */
border-radius: var(--nl-r-full);
background: var(--nl-amber);
color: #FFFFFF;
box-shadow: 0 2px 10px rgba(240,148,10,0.45);
}
.aa0105-nl-badge-new {
background: var(--nl-rose);
box-shadow: 0 2px 10px rgba(242,53,88,0.45);
}
.aa0105-nl-badge-free {
background: var(--nl-green);
box-shadow: 0 2px 10px rgba(14,165,114,0.45);
}
/* ── Card Body ── */
.aa0105-nl-card-body {
display: flex;
flex-direction: column;
gap: var(--nl-space-2);
padding: var(--nl-space-5);
flex: 1;
}
/* Category label — tighter, more refined */
.aa0105-nl-card-cat {
font-family: var(--nl-font-body);
font-size: 0.6875rem; /* 11px — consistent with badge sizing */
font-weight: 700;
letter-spacing: 0.10em; /* wide tracking = editorial label */
text-transform: uppercase;
color: var(--nl-accent);
}
/* ── Card Title ──
Plus Jakarta Sans 700 — the key text premium upgrade */
.aa0105-nl-card-title {
font-family: var(--nl-font-display);
font-size: 1rem; /* 16px explicit */
font-weight: 700;
color: var(--nl-ink);
line-height: 1.40; /* slightly looser than snug token — more readable in card */
letter-spacing: -0.018em; /* tighter tracking = premium heading feel */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color var(--nl-dur-fast) var(--nl-ease);
}
.aa0105-nl-card:hover .aa0105-nl-card-title {
color: var(--nl-accent);
}
/* ── Card Description ──
Sora body at small size — optimal reading at card width */
.aa0105-nl-card-desc {
font-family: var(--nl-font-body);
font-size: 0.8125rem; /* 13px — crisper than 14px at card width */
font-weight: 400;
color: var(--nl-ink-muted);
line-height: 1.68; /* slightly looser for card readability */
letter-spacing: -0.003em;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
/* ── Card Meta Row ── */
.aa0105-nl-card-meta {
display: flex;
align-items: center;
gap: var(--nl-space-3);
margin-top: var(--nl-space-3);
padding-top: var(--nl-space-3);
border-top: 1px solid var(--nl-border);
}
/* ── Content Type Tags ──
Slightly more padding, heavier font — more confident */
.aa0105-nl-card-type {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--nl-font-body);
font-size: 0.6875rem; /* 11px consistent with badge */
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: var(--nl-r-full);
}
/* Type colour variants */
.aa0105-nl-type-article {
background: var(--nl-accent-light);
color: var(--nl-accent);
}
.aa0105-nl-type-video {
background: var(--nl-rose-light);
color: var(--nl-rose);
}
.aa0105-nl-type-download {
background: var(--nl-green-light);
color: var(--nl-green);
}
.aa0105-nl-type-series {
background: var(--nl-teal-light);
color: var(--nl-teal);
}
/* ── Read time ── */
.aa0105-nl-card-read {
font-family: var(--nl-font-body);
font-size: 0.75rem; /* 12px */
color: var(--nl-ink-faint);
font-weight: 500;
letter-spacing: 0.01em;
margin-left: auto;
}
/* ── Cards CTA row ── */
.aa0105-nl-cards-cta {
display: flex;
justify-content: center;
margin-top: var(--nl-space-12);
}
/* ── Keyframe: shimmer — premium brand-tinted version ── */
@keyframes aa0105-shimmer {
0% { background-position: -240% 0; }
100% { background-position: 240% 0; }
}
/* ─────────────────────────────────────────────
component: cards | END
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
component: categories | START
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
1. SECTION 4 — CATEGORY QUICK LINKS
───────────────────────────────────────────── */
.aa0105-nl-sec4-categories {
position: relative;
background: var(--nl-surface-2);
padding-block: var(--nl-space-24);
overflow: hidden;
}
/* Decorative corner blobs — deeper accent */
.aa0105-nl-sec4-categories::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(61,90,241,0.08) 0%, transparent 70%);
pointer-events: none;
}
.aa0105-nl-sec4-categories::after {
content: '';
position: absolute;
bottom: -60px;
left: -60px;
width: 280px;
height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,191,168,0.07) 0%, transparent 70%);
pointer-events: none;
}
/* ── Category Grid ── */
.aa0105-nl-cat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--nl-space-5);
position: relative;
z-index: 1;
}
@media (max-width: 1100px) {
.aa0105-nl-cat-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--nl-space-4);
}
}
@media (max-width: 860px) {
.aa0105-nl-cat-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 580px) {
.aa0105-nl-cat-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--nl-space-3);
}
}
/* ── Category Card ──
Tighter border, deeper padding, stronger hover */
.aa0105-nl-cat-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--nl-space-3);
padding: var(--nl-space-8) var(--nl-space-5);
background: var(--nl-surface);
border: 1.5px solid rgba(255,255,255,0.12);
box-shadow:
0 0 0 1px rgba(255,255,255,0.05),
0 8px 24px rgba(0,0,0,0.12);
border-radius: var(--nl-r-xl);
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
cursor: pointer;
opacity: 0;
transform: translateY(16px);
transition:
opacity 0.5s var(--nl-ease),
transform 0.5s var(--nl-ease),
border-color var(--nl-dur-base) var(--nl-ease),
box-shadow var(--nl-dur-base) var(--nl-ease),
background var(--nl-dur-base) var(--nl-ease);
}
.aa0105-nl-cat-card.aa0105-nl-in-view {
opacity: 1;
transform: translateY(0);
}
/* Stagger delays */
.aa0105-nl-cat-card.aa0105-nl-in-view:nth-child(1) { transition-delay: 0.00s; }
.aa0105-nl-cat-card.aa0105-nl-in-view:nth-child(2) { transition-delay: 0.05s; }
.aa0105-nl-cat-card.aa0105-nl-in-view:nth-child(3) { transition-delay: 0.10s; }
.aa0105-nl-cat-card.aa0105-nl-in-view:nth-child(4) { transition-delay: 0.15s; }
.aa0105-nl-cat-card.aa0105-nl-in-view:nth-child(5) { transition-delay: 0.20s; }
.aa0105-nl-cat-card.aa0105-nl-in-view:nth-child(6) { transition-delay: 0.25s; }
.aa0105-nl-cat-card.aa0105-nl-in-view:nth-child(7) { transition-delay: 0.30s; }
.aa0105-nl-cat-card.aa0105-nl-in-view:nth-child(8) { transition-delay: 0.35s; }
/* Hover — deeper shadow + stronger accent border */
.aa0105-nl-cat-card:hover {
border-color: rgba(61,90,241,0.6);
box-shadow:
0 0 0 1px rgba(61,90,241,0.25),
0 14px 40px rgba(61,90,241,0.18);
background: var(--nl-surface);
transform: translateY(-6px);
}
/* Sheen sweep */
.aa0105-nl-cat-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(61,90,241,0.00) 0%,
rgba(61,90,241,0.07) 50%,
rgba(61,90,241,0.00) 100%
);
opacity: 0.25;
transition: opacity var(--nl-dur-base) var(--nl-ease);
pointer-events: none;
}
.aa0105-nl-cat-card:hover::before {
opacity: 1;
}
/* Focus ring */
.aa0105-nl-cat-card:focus-visible {
outline: 2px solid var(--nl-accent);
outline-offset: 3px;
}
/* ── Icon Container ──
Slightly larger — 60px — more presence */
.aa0105-nl-cat-icon {
width: 60px;
height: 60px;
display: grid;
place-items: center;
border-radius: var(--nl-r-lg);
background: var(--nl-accent-light);
color: var(--nl-accent);
flex-shrink: 0;
transition:
background var(--nl-dur-base) var(--nl-ease),
color var(--nl-dur-base) var(--nl-ease),
transform var(--nl-dur-base) var(--nl-ease-spring),
box-shadow var(--nl-dur-base) var(--nl-ease);
}
/* Unique per-icon colours */
.aa0105-nl-cat-card:nth-child(1) .aa0105-nl-cat-icon { background: var(--nl-accent-light); color: var(--nl-accent); }
.aa0105-nl-cat-card:nth-child(2) .aa0105-nl-cat-icon { background: var(--nl-rose-light); color: var(--nl-rose); }
.aa0105-nl-cat-card:nth-child(3) .aa0105-nl-cat-icon { background: var(--nl-teal-light); color: var(--nl-teal); }
.aa0105-nl-cat-card:nth-child(4) .aa0105-nl-cat-icon { background: var(--nl-amber-light); color: var(--nl-amber); }
.aa0105-nl-cat-card:nth-child(5) .aa0105-nl-cat-icon { background: var(--nl-green-light); color: var(--nl-green); }
.aa0105-nl-cat-card:nth-child(6) .aa0105-nl-cat-icon { background: var(--nl-accent-light); color: var(--nl-accent); }
.aa0105-nl-cat-card:nth-child(7) .aa0105-nl-cat-icon { background: var(--nl-teal-light); color: var(--nl-teal); }
.aa0105-nl-cat-card:nth-child(8) .aa0105-nl-cat-icon { background: var(--nl-rose-light); color: var(--nl-rose); }
/* Hover — always accent, with glow shadow */
.aa0105-nl-cat-card:hover .aa0105-nl-cat-icon {
background: var(--nl-accent) !important;
color: #FFFFFF !important;
transform: scale(1.14) rotate(-5deg);
box-shadow: 0 6px 20px rgba(61,90,241,0.38);
}
/* ── Category Name ──
KEY UPGRADE: 800 weight, tighter tracking, explicit size
Plus Jakarta Sans 800 = editorial card heading feel */
.aa0105-nl-cat-name {
font-family: var(--nl-font-display);
font-size: 1.0625rem; /* 17px — slightly above base = more presence */
font-weight: 800; /* up from 700 — this is the big change */
color: var(--nl-ink);
letter-spacing: -0.022em; /* tight = premium, modern */
line-height: 1.30; /* snug for card text */
transition: color var(--nl-dur-fast) var(--nl-ease);
}
.aa0105-nl-cat-card:hover .aa0105-nl-cat-name {
color: var(--nl-accent);
}
/* ── Count label ──
More refined — Sora 600 with better tracking */
.aa0105-nl-cat-count {
font-family: var(--nl-font-body);
font-size: 0.75rem; /* 12px explicit */
color: var(--nl-ink-faint);
font-weight: 600; /* up from 500 — more intentional */
letter-spacing: 0.04em; /* slight tracking on small labels */
transition: color var(--nl-dur-fast) var(--nl-ease);
}
.aa0105-nl-cat-card:hover .aa0105-nl-cat-count {
color: var(--nl-ink-muted);
}
/* Arrow indicator on hover */
.aa0105-nl-cat-card::after {
content: '→';
position: absolute;
bottom: var(--nl-space-4);
right: var(--nl-space-4);
font-size: var(--nl-text-sm);
font-weight: 700;
color: var(--nl-accent);
opacity: 0;
transform: translateX(-6px);
transition:
opacity var(--nl-dur-base) var(--nl-ease),
transform var(--nl-dur-base) var(--nl-ease);
}
.aa0105-nl-cat-card:hover::after {
opacity: 1;
transform: translateX(0);
}
/* =========================
MOBILE CARD VISIBILITY FIX
========================= */
@media (max-width: 768px) {
.aa0105-nl-cat-card {
border: 1.5px solid rgba(255,255,255,0.18);
box-shadow:
0 0 0 1px rgba(255,255,255,0.08),
0 10px 28px rgba(0,0,0,0.18);
}
.aa0105-nl-cat-card::before {
opacity: 0.35;
}
}
/* ─────────────────────────────────────────────
component: categories | END
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
component: blog | START
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
2. SECTION 5 — LATEST BLOG / ARTICLES
───────────────────────────────────────────── */
.aa0105-nl-sec5-blog {
position: relative;
background: var(--nl-surface);
padding-block: var(--nl-space-24);
overflow: hidden;
}
/* Separating accent line at top — slightly more visible */
.aa0105-nl-sec5-blog::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: var(--nl-grad-accent);
border-radius: var(--nl-r-full);
opacity: 0.65; /* up from 0.5 — more deliberate */
}
/* Background texture */
.aa0105-nl-sec5-blog::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 50% at 85% 30%, rgba(61,90,241,0.035) 0%, transparent 60%);
pointer-events: none;
}
/* ── Blog Grid ── */
.aa0105-nl-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--nl-space-8);
position: relative;
z-index: 1;
}
@media (max-width: 900px) {
.aa0105-nl-blog-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--nl-space-6);
}
}
@media (max-width: 580px) {
.aa0105-nl-blog-grid {
grid-template-columns: 1fr;
gap: var(--nl-space-5);
}
}
/* ── Blog Card ── */
.aa0105-nl-blog-card {
display: flex;
flex-direction: column;
background: var(--nl-surface);
border: 1px solid var(--nl-border);
border-radius: var(--nl-r-xl);
overflow: hidden;
box-shadow: var(--nl-shadow-xs);
opacity: 0;
transform: translateY(18px);
transition:
opacity 0.55s var(--nl-ease),
transform 0.55s var(--nl-ease),
box-shadow var(--nl-dur-base) var(--nl-ease),
border-color var(--nl-dur-base) var(--nl-ease);
}
.aa0105-nl-blog-card.aa0105-nl-in-view {
opacity: 1;
transform: translateY(0);
}
.aa0105-nl-blog-card.aa0105-nl-in-view:nth-child(1) { transition-delay: 0.00s; }
.aa0105-nl-blog-card.aa0105-nl-in-view:nth-child(2) { transition-delay: 0.10s; }
.aa0105-nl-blog-card.aa0105-nl-in-view:nth-child(3) { transition-delay: 0.20s; }
/* Hover — deeper lift + accent border hint */
.aa0105-nl-blog-card:hover {
box-shadow: var(--nl-shadow-md);
border-color: rgba(61,90,241,0.22);
transform: translateY(-5px);
}
/* ── Blog Card Link ── */
.aa0105-nl-blog-card-link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.aa0105-nl-blog-card-link:focus-visible {
outline: 2px solid var(--nl-accent);
border-radius: var(--nl-r-xl);
outline-offset: 3px;
}
/* ── Blog Image Wrapper ── */
.aa0105-nl-blog-img-wrap {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--nl-surface-2);
flex-shrink: 0;
}
/* Lazy load */
.aa0105-nl-blog-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition:
transform var(--nl-dur-slow) var(--nl-ease),
opacity 0.4s var(--nl-ease),
filter 0.4s var(--nl-ease);
opacity: 0;
filter: blur(6px);
}
.aa0105-nl-blog-img.aa0105-nl-img-loaded {
opacity: 1;
filter: blur(0);
}
/* Premium brand-tinted shimmer — matches card shimmer */
.aa0105-nl-blog-img-wrap::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
var(--nl-surface-2) 0%,
#E8EAFC 38%,
var(--nl-surface-3) 55%,
var(--nl-surface-2) 80%
);
background-size: 240% 100%;
animation: aa0105-shimmer 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
z-index: 0;
transition: opacity 0.35s var(--nl-ease);
}
.aa0105-nl-blog-img-wrap.aa0105-nl-img-loaded::before {
opacity: 0;
pointer-events: none;
}
/* Image hover zoom */
.aa0105-nl-blog-card:hover .aa0105-nl-blog-img {
transform: scale(1.06);
}
/* ── Blog Category Tag (on image) ──
Sora 800 at 11px with backdrop = editorial overlay */
.aa0105-nl-blog-cat-tag {
position: absolute;
top: var(--nl-space-3);
left: var(--nl-space-3);
z-index: 2;
font-family: var(--nl-font-body);
font-size: 0.6875rem; /* 11px */
font-weight: 800; /* up from 700 — punchier label */
letter-spacing: 0.09em; /* wider tracking on image overlay tag */
text-transform: uppercase;
padding: 5px 12px; /* up from 4px — taller = more premium */
border-radius: var(--nl-r-full);
background: rgba(9,9,15,0.74);
color: #FFFFFF;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.13);
transition: background var(--nl-dur-fast) var(--nl-ease);
}
.aa0105-nl-blog-card:hover .aa0105-nl-blog-cat-tag {
background: var(--nl-accent);
border-color: var(--nl-accent);
}
/* ── Blog Body ── */
.aa0105-nl-blog-body {
display: flex;
flex-direction: column;
gap: var(--nl-space-3);
padding: var(--nl-space-6); /* up from space-5 — more breathing room */
flex: 1;
}
/* ── Blog Date ──
Sora 600 at 12px with light tracking = clean meta */
.aa0105-nl-blog-date {
font-family: var(--nl-font-body);
font-size: 0.75rem; /* 12px explicit */
color: var(--nl-ink-faint);
font-weight: 600; /* up from 500 — more intentional */
letter-spacing: 0.05em;
display: block;
text-transform: uppercase; /* dates look great in small-caps style */
}
/* ── Blog Title ──
KEY UPGRADE: 800 weight, -0.025em tracking, larger size
This is the most important text on the card */
.aa0105-nl-blog-title {
font-family: var(--nl-font-display);
font-size: 1.1875rem; /* 19px — bigger than before (18px) */
font-weight: 800; /* up from 700 — thick, premium, editorial */
color: var(--nl-ink);
line-height: 1.32; /* tight enough for a punchy heading */
letter-spacing: -0.025em; /* strong tight tracking = modern premium */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color var(--nl-dur-fast) var(--nl-ease);
}
.aa0105-nl-blog-card:hover .aa0105-nl-blog-title {
color: var(--nl-accent);
}
/* ── Blog Excerpt ──
Sora 400 at 13.5px — highly readable body copy at card width */
.aa0105-nl-blog-excerpt {
font-family: var(--nl-font-body);
font-size: 0.84375rem; /* 13.5px — between sm and base, optimal */
font-weight: 400;
color: var(--nl-ink-muted);
line-height: 1.72; /* generous leading = editorial readability */
letter-spacing: -0.005em;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
/* Read more arrow — slightly bolder */
.aa0105-nl-blog-body::after {
content: 'Read Article →';
font-family: var(--nl-font-body);
font-size: 0.75rem; /* 12px */
font-weight: 700; /* up from 600 */
color: var(--nl-accent);
letter-spacing: 0.04em;
margin-top: var(--nl-space-2);
opacity: 0;
transform: translateX(-6px);
transition:
opacity var(--nl-dur-base) var(--nl-ease),
transform var(--nl-dur-base) var(--nl-ease);
display: block;
text-transform: uppercase; /* small caps CTA = editorial polish */
}
.aa0105-nl-blog-card:hover .aa0105-nl-blog-body::after {
opacity: 1;
transform: translateX(0);
}
/* ─────────────────────────────────────────────
component: blog | END
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
component: why-newlearn | START
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
1. SECTION 6 — WHY NEWLEARN
───────────────────────────────────────────── */
.aa0105-nl-sec6-why {
position: relative;
background: var(--nl-surface-2);
padding-block: var(--nl-space-24);
overflow: hidden;
}
/* Ambient glow top-right — slightly stronger */
.aa0105-nl-sec6-why::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 440px;
height: 440px;
border-radius: 50%;
background: radial-gradient(circle, rgba(61,90,241,0.09) 0%, transparent 70%);
pointer-events: none;
}
/* Ambient glow bottom-left */
.aa0105-nl-sec6-why::after {
content: '';
position: absolute;
bottom: -80px;
left: -80px;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,191,168,0.07) 0%, transparent 70%);
pointer-events: none;
}
/* ── Two-col inner layout ── */
.aa0105-nl-why-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--nl-space-20);
align-items: center;
position: relative;
z-index: 1;
}
@media (max-width: 960px) {
.aa0105-nl-why-inner {
grid-template-columns: 1fr;
gap: var(--nl-space-12);
}
}
/* ─────────────────────────────────
VISUAL / MOCKUP SIDE
───────────────────────────────── */
.aa0105-nl-why-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 380px;
opacity: 0;
transform: translateX(-24px);
transition: opacity 0.7s var(--nl-ease), transform 0.7s var(--nl-ease);
}
.aa0105-nl-why-visual.aa0105-nl-in-view {
opacity: 1;
transform: translateX(0);
}
/* ── Browser Mockup ── */
.aa0105-nl-why-mockup {
width: 100%;
max-width: 420px;
background: var(--nl-surface);
border: 1px solid var(--nl-border);
border-radius: var(--nl-r-xl);
box-shadow: var(--nl-shadow-xl);
overflow: hidden;
position: relative;
z-index: 2;
}
/* Browser top bar */
.aa0105-nl-mockup-bar {
display: flex;
align-items: center;
gap: 6px;
padding: var(--nl-space-3) var(--nl-space-4);
background: var(--nl-surface-2);
border-bottom: 1px solid var(--nl-border);
}
.aa0105-nl-mockup-bar span {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.aa0105-nl-mockup-bar span:nth-child(1) { background: #FF5F57; }
.aa0105-nl-mockup-bar span:nth-child(2) { background: #FEBC2E; }
.aa0105-nl-mockup-bar span:nth-child(3) { background: #28C840; }
/* Mockup content area */
.aa0105-nl-mockup-content {
padding: var(--nl-space-5);
display: flex;
flex-direction: column;
gap: var(--nl-space-3);
}
/* Placeholder skeleton lines — brand-tinted pulse */
.aa0105-nl-mockup-line {
height: 13px; /* slightly taller — more presence */
border-radius: var(--nl-r-full);
background: var(--nl-surface-3);
animation: aa0105-mockup-pulse 2.4s ease-in-out infinite;
}
.aa0105-nl-ml-wide { width: 75%; }
.aa0105-nl-ml-med { width: 55%; }
.aa0105-nl-ml-full { width: 100%; margin-top: var(--nl-space-2); }
.aa0105-nl-mockup-line:nth-child(2) { animation-delay: 0.2s; }
.aa0105-nl-mockup-line:nth-child(4) { animation-delay: 0.4s; }
.aa0105-nl-mockup-line:nth-child(5) { animation-delay: 0.6s; }
/* Mini card row inside mockup */
.aa0105-nl-mockup-card-row {
display: flex;
gap: var(--nl-space-3);
margin-block: var(--nl-space-2);
}
.aa0105-nl-mockup-mini-card {
flex: 1;
height: 68px; /* slightly taller — more substance */
border-radius: var(--nl-r-md);
background: var(--nl-surface-3);
border: 1px solid var(--nl-border);
animation: aa0105-mockup-pulse 2.4s ease-in-out infinite;
}
.aa0105-nl-mockup-mini-card:nth-child(2) { animation-delay: 0.3s; }
.aa0105-nl-mockup-mini-card:nth-child(3) { animation-delay: 0.6s; }
/* Active / highlighted card */
.aa0105-nl-mmc-active {
background: linear-gradient(
135deg,
rgba(61,90,241,0.14) 0%,
rgba(123,61,245,0.09) 100%
);
border-color: rgba(61,90,241,0.32);
}
/* ── Floating Badges ──
Sora 700 — crisp, premium floating label feel */
.aa0105-nl-why-badge-float {
position: absolute;
display: flex;
align-items: center;
gap: var(--nl-space-2);
font-family: var(--nl-font-body);
font-size: 0.8125rem; /* 13px — crisper than 14px base */
font-weight: 700; /* up from 600 — more confident */
letter-spacing: -0.01em;
color: var(--nl-ink);
background: var(--nl-surface);
border: 1px solid var(--nl-border);
border-radius: var(--nl-r-full);
padding: var(--nl-space-2) var(--nl-space-4);
box-shadow: var(--nl-shadow-md);
white-space: nowrap;
z-index: 4;
}
.aa0105-nl-why-badge-float svg {
flex-shrink: 0;
}
.aa0105-nl-wbf-1 {
top: 10%;
right: -10px;
color: var(--nl-green);
animation: aa0105-float-badge-r 5s ease-in-out infinite;
}
.aa0105-nl-wbf-1 svg { color: var(--nl-green); }
.aa0105-nl-wbf-2 {
bottom: 12%;
left: -10px;
color: var(--nl-accent);
animation: aa0105-float-badge-l 6s 0.8s ease-in-out infinite;
}
.aa0105-nl-wbf-2 svg { color: var(--nl-accent); }
@media (max-width: 960px) {
.aa0105-nl-wbf-1 { right: 5%; }
.aa0105-nl-wbf-2 { left: 5%; }
}
/* ─────────────────────────────────
TEXT / FEATURES SIDE
───────────────────────────────── */
.aa0105-nl-why-text {
display: flex;
flex-direction: column;
gap: var(--nl-space-6);
opacity: 0;
transform: translateX(24px);
transition: opacity 0.7s 0.15s var(--nl-ease), transform 0.7s 0.15s var(--nl-ease);
}
.aa0105-nl-why-text.aa0105-nl-in-view {
opacity: 1;
transform: translateX(0);
}
/* ── Feature list ── */
.aa0105-nl-why-list {
display: flex;
flex-direction: column;
gap: var(--nl-space-4); /* slightly tighter — cleaner grouping */
list-style: none;
}
/* ── Each feature item ──
More padding, deeper hover, stronger border */
.aa0105-nl-why-item {
display: flex;
align-items: flex-start;
gap: var(--nl-space-4);
padding: var(--nl-space-5) var(--nl-space-5);
background: var(--nl-surface);
border: 1.5px solid var(--nl-border); /* slightly thicker border = premium */
border-radius: var(--nl-r-lg);
cursor: default;
transition:
border-color var(--nl-dur-base) var(--nl-ease),
box-shadow var(--nl-dur-base) var(--nl-ease),
transform var(--nl-dur-base) var(--nl-ease-spring),
background var(--nl-dur-base) var(--nl-ease);
}
.aa0105-nl-why-item:hover {
border-color: rgba(61,90,241,0.28);
box-shadow:
0 6px 28px rgba(61,90,241,0.10),
0 2px 8px rgba(61,90,241,0.06);
transform: translateX(5px);
background: rgba(235,240,255,0.45); /* very subtle tint on hover */
}
/* Icon */
.aa0105-nl-why-icon {
width: 48px; /* up from 44px — more presence */
height: 48px;
border-radius: var(--nl-r-md);
display: grid;
place-items: center;
flex-shrink: 0;
background: var(--nl-accent-light);
color: var(--nl-accent);
transition:
background var(--nl-dur-base) var(--nl-ease),
color var(--nl-dur-base) var(--nl-ease),
transform var(--nl-dur-base) var(--nl-ease-spring),
box-shadow var(--nl-dur-base) var(--nl-ease);
}
/* Varied colours per item */
.aa0105-nl-why-item:nth-child(1) .aa0105-nl-why-icon { background: var(--nl-amber-light); color: var(--nl-amber); }
.aa0105-nl-why-item:nth-child(2) .aa0105-nl-why-icon { background: var(--nl-teal-light); color: var(--nl-teal); }
.aa0105-nl-why-item:nth-child(3) .aa0105-nl-why-icon { background: var(--nl-accent-light); color: var(--nl-accent);}
.aa0105-nl-why-item:nth-child(4) .aa0105-nl-why-icon { background: var(--nl-green-light); color: var(--nl-green); }
.aa0105-nl-why-item:hover .aa0105-nl-why-icon {
background: var(--nl-accent) !important;
color: #FFFFFF !important;
transform: scale(1.12);
box-shadow: 0 4px 16px rgba(61,90,241,0.32);
}
/* Feature text block */
.aa0105-nl-why-content {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--nl-space-1);
}
/* ── Feature Title ──
KEY UPGRADE: 800 weight, tighter tracking, explicit size
This is the label people scan first on this section */
.aa0105-nl-why-title {
font-family: var(--nl-font-display);
font-size: 1.0625rem; /* 17px — above base = clear hierarchy */
font-weight: 800; /* up from 700 — thick and confident */
color: var(--nl-ink);
letter-spacing: -0.022em; /* tight tracking = premium heading */
line-height: 1.28;
transition: color var(--nl-dur-fast) var(--nl-ease);
}
.aa0105-nl-why-item:hover .aa0105-nl-why-title {
color: var(--nl-accent);
}
/* ── Feature Description ──
Sora 400 at 13.5px — readable body under a bold heading */
.aa0105-nl-why-desc {
font-family: var(--nl-font-body);
font-size: 0.84375rem; /* 13.5px — crisper in tight layout */
font-weight: 400;
color: var(--nl-ink-muted);
line-height: 1.70;
letter-spacing: -0.004em;
}
/* ── Why section responsive ── */
@media (max-width: 960px) {
.aa0105-nl-why-visual {
transform: translateY(-24px);
order: -1;
}
.aa0105-nl-why-visual.aa0105-nl-in-view {
transform: translateY(0);
}
.aa0105-nl-why-text {
transform: translateY(24px);
}
.aa0105-nl-why-text.aa0105-nl-in-view {
transform: translateY(0);
}
}
/* Mockup skeleton pulse */
@keyframes aa0105-mockup-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.40; } /* slightly deeper for more visual contrast */
}
/* Floating badge — right side */
@keyframes aa0105-float-badge-r {
0%, 100% { transform: translateY(0px) rotate(1deg); }
50% { transform: translateY(-10px) rotate(-1deg); }
}
/* Floating badge — left side */
@keyframes aa0105-float-badge-l {
0%, 100% { transform: translateY(0px) rotate(-1deg); }
50% { transform: translateY(-8px) rotate(1deg); }
}
/* ─────────────────────────────────────────────
component: why-newlearn | END
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
component: newsletter | START
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
2. SECTION 7 — NEWSLETTER / CTA BANNER
───────────────────────────────────────────── */
.aa0105-nl-sec7-newsletter {
position: relative;
background: var(--nl-grad-cta);
padding-block: var(--nl-space-24);
overflow: hidden;
}
/* Grid overlay — slightly tighter grid = more refined */
.aa0105-nl-sec7-newsletter::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
background-size: 44px 44px;
pointer-events: none;
z-index: 0;
}
/* Radial glow — deeper for premium feel */
.aa0105-nl-sec7-newsletter::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 30% 50%, rgba(61,90,241,0.28) 0%, transparent 60%),
radial-gradient(ellipse 50% 70% at 80% 40%, rgba(123,61,245,0.22) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
/* ── Inner layout ── */
.aa0105-nl-newsletter-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--nl-space-16);
align-items: center;
}
@media (max-width: 860px) {
.aa0105-nl-newsletter-inner {
grid-template-columns: 1fr;
gap: var(--nl-space-10);
text-align: center;
}
}
/* ── Newsletter text side ── */
.aa0105-nl-newsletter-text {
display: flex;
flex-direction: column;
gap: var(--nl-space-4);
opacity: 0;
transform: translateX(-20px);
transition: opacity 0.65s var(--nl-ease), transform 0.65s var(--nl-ease);
}
.aa0105-nl-newsletter-text.aa0105-nl-in-view {
opacity: 1;
transform: translateX(0);
}
/* ── Newsletter Title ──
KEY UPGRADE: tighter range clamp, stronger tracking,
better weight contrast against white background */
.aa0105-nl-newsletter-title {
font-family: var(--nl-font-display);
font-size: clamp(1.625rem, 3vw, 2.5rem); /* 26px → 40px — tighter top end */
font-weight: 800;
color: #FFFFFF;
line-height: 1.16; /* very tight for impact heading */
letter-spacing: -0.030em; /* tighter tracking = bold, premium CTA */
/* Subtle glow on dark gradient bg */
text-shadow:
0 2px 12px rgba(255,255,255,0.10),
0 8px 32px rgba(61,90,241,0.20);
}
/* ── Newsletter Sub ──
Sora 400 — clean, airy body on dark bg */
.aa0105-nl-newsletter-sub {
font-family: var(--nl-font-body);
font-size: 1rem;
font-weight: 400;
letter-spacing: -0.008em;
color: rgba(255,255,255,0.68); /* slightly more visible — up from 0.65 */
line-height: 1.85;
max-width: 460px;
}
@media (max-width: 860px) {
.aa0105-nl-newsletter-sub {
margin-inline: auto;
}
}
/* ── Form side ── */
.aa0105-nl-newsletter-form-wrap {
display: flex;
flex-direction: column;
gap: var(--nl-space-3);
opacity: 0;
transform: translateX(20px);
transition: opacity 0.65s 0.15s var(--nl-ease), transform 0.65s 0.15s var(--nl-ease);
}
.aa0105-nl-newsletter-form-wrap.aa0105-nl-in-view {
opacity: 1;
transform: translateX(0);
}
/* Form row — slightly more opaque glass */
.aa0105-nl-newsletter-form {
display: flex;
gap: var(--nl-space-3);
align-items: stretch;
background: rgba(255,255,255,0.10); /* up from 0.08 — more solid feel */
border: 1px solid rgba(255,255,255,0.20);
border-radius: var(--nl-r-xl);
padding: var(--nl-space-2);
backdrop-filter: blur(16px); /* stronger blur = premium glass */
-webkit-backdrop-filter: blur(16px);
transition:
border-color var(--nl-dur-base) var(--nl-ease),
box-shadow var(--nl-dur-base) var(--nl-ease);
}
.aa0105-nl-newsletter-form:focus-within {
border-color: rgba(255,255,255,0.45);
box-shadow: 0 0 0 3px rgba(255,255,255,0.10);
}
/* ── Email input ──
Sora 400 — clean placeholder, premium feel */
.aa0105-nl-email-input {
flex: 1;
background: transparent;
border: none;
outline: none;
font-family: var(--nl-font-body);
font-size: var(--nl-text-base);
font-weight: 400;
letter-spacing: -0.008em;
color: #FFFFFF;
padding: var(--nl-space-3) var(--nl-space-4);
min-width: 0;
}
.aa0105-nl-email-input::placeholder {
color: rgba(255,255,255,0.38);
font-weight: 400;
}
/* Subscribe button */
.aa0105-nl-newsletter-form .aa0105-nl-btn-white {
flex-shrink: 0;
border-radius: var(--nl-r-lg);
padding-inline: var(--nl-space-6);
font-size: var(--nl-text-sm);
font-weight: 800; /* btn-white is 800 from main1 tokens */
letter-spacing: 0.01em;
}
/* ── Privacy note ──
Sora 500 — more intentional than 400 at tiny size */
.aa0105-nl-newsletter-note {
font-family: var(--nl-font-body);
font-size: 0.6875rem; /* 11px — clean disclaimer */
font-weight: 500;
color: rgba(255,255,255,0.38);
text-align: left;
line-height: 1.55;
letter-spacing: 0.01em;
padding-inline: var(--nl-space-2);
}
@media (max-width: 860px) {
.aa0105-nl-newsletter-note {
text-align: center;
}
}
/* Form stacked on small screens */
@media (max-width: 480px) {
.aa0105-nl-newsletter-form {
flex-direction: column;
gap: var(--nl-space-2);
}
.aa0105-nl-newsletter-form .aa0105-nl-btn-white {
width: 100%;
padding-block: var(--nl-space-3);
}
}
/* ── Decorative shapes ── */
.aa0105-nl-newsletter-deco {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.aa0105-nl-nd-1 {
width: 280px;
height: 280px;
top: -80px;
right: 10%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
animation: aa0105-deco-spin 18s linear infinite;
}
.aa0105-nl-nd-2 {
width: 170px;
height: 170px;
bottom: -50px;
left: 5%;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
animation: aa0105-deco-spin 24s linear infinite reverse;
}
/* Decorative circle spin */
@keyframes aa0105-deco-spin {
from { transform: rotate(0deg) scale(1); }
to { transform: rotate(360deg) scale(1.05); }
}
/* ─────────────────────────────────────────────
component: newsletter | END
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
component: utilities | START
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
SECTION DIVIDER UTILITY
───────────────────────────────────────────── */
.aa0105-nl-divider {
width: 100%;
height: 1px;
background: var(--nl-border);
border: none;
margin: 0;
}
.aa0105-nl-divider-accent {
height: 3px; /* up from 2px — more presence */
background: var(--nl-grad-accent);
opacity: 0.55; /* up from 0.4 — more visible */
border-radius: var(--nl-r-full);
max-width: 80px;
margin-inline: auto;
border: none;
}
/* ─────────────────────────────────────────────
4. GLOBAL SMOOTH TRANSITIONS UTILITY
───────────────────────────────────────────── */
.aa0105-nl-no-transition * {
transition: none !important;
animation: none !important;
}
/* ─────────────────────────────────────────────
5. PRINT STYLES
───────────────────────────────────────────── */
@media print {
.aa0105-nl-sec7-newsletter,
.aa0105-nl-hero-scroll {
display: none !important;
}
.aa0105-nl-sec1-hero {
background: #FFFFFF !important;
color: var(--nl-ink) !important;
min-height: auto !important;
padding-top: var(--nl-space-8) !important;
}
.aa0105-nl-hero-heading,
.aa0105-nl-hero-highlight {
color: var(--nl-ink) !important;
-webkit-text-fill-color: var(--nl-ink) !important;
}
.aa0105-nl-hero-sub {
color: var(--nl-ink-muted) !important;
}
body {
font-size: 12pt;
color: #000;
font-family: var(--nl-font-body);
}
a {
text-decoration: underline;
color: #000;
}
.aa0105-nl-card,
.aa0105-nl-blog-card {
break-inside: avoid;
box-shadow: none !important;
border: 1px solid #ccc !important;
}
}
/* ─────────────────────────────────────────────
component: utilities | END
───────────────────────────────────────────── */