/* ===== Styles from index.html ===== */
/* ========================================
CSS CUSTOM PROPERTIES (Design Tokens)
======================================== */
:root {
/* Typography - Font Families */
--font-family-primary: 'Noto Sans Bengali', 'Hind Siliguri', 'Kalpurush', system-ui, sans-serif;
--font-family-secondary: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
/* Typography - Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem;
--font-size-3xl: 2.25rem;
--font-size-4xl: 3rem;
--font-size-5xl: 4rem;
/* Typography - Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Typography - Line Heights */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Typography - Letter Spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Heading Definitions */
--heading-h1-size: var(--font-size-4xl);
--heading-h1-weight: 700;
--heading-h1-line-height: 1.1;
--heading-h1-letter-spacing: -0.02em;
--heading-h2-size: var(--font-size-3xl);
--heading-h2-weight: 700;
--heading-h2-line-height: 1.2;
--heading-h2-letter-spacing: -0.01em;
--heading-h3-size: var(--font-size-2xl);
--heading-h3-weight: 600;
--heading-h3-line-height: 1.25;
--heading-h3-letter-spacing: 0;
--heading-h4-size: var(--font-size-xl);
--heading-h4-weight: 600;
--heading-h4-line-height: 1.3;
--heading-h4-letter-spacing: 0;
/* Body & Text Styles */
--text-body-size: var(--font-size-base);
--text-body-weight: 400;
--text-body-line-height: 1.6;
--text-body-letter-spacing: 0;
--text-lead-size: var(--font-size-lg);
--text-lead-weight: 400;
--text-lead-line-height: 1.7;
/* Colors - Primary (BNP Green) */
--color-primary-50: #ecfdf5;
--color-primary-100: #d1fae5;
--color-primary-200: #a7f3d0;
--color-primary-300: #6ee7b7;
--color-primary-400: #34d399;
--color-primary-500: #10b981;
--color-primary-600: #059669;
--color-primary-700: #047857;
--color-primary-800: #065f46;
--color-primary-900: #064e3b;
--color-primary: #006a4e;
/* Colors - Secondary (Trust Blue) */
--color-secondary-50: #eff6ff;
--color-secondary-100: #dbeafe;
--color-secondary-200: #bfdbfe;
--color-secondary-300: #93c5fd;
--color-secondary-400: #60a5fa;
--color-secondary-500: #3b82f6;
--color-secondary-600: #2563eb;
--color-secondary-700: #1d4ed8;
--color-secondary-800: #1e40af;
--color-secondary-900: #1e3a8a;
--color-secondary: #1e40af;
/* Colors - Accent (Optimism Yellow - WCAG adjusted) */
--color-accent-50: #fffbeb;
--color-accent-100: #fef3c7;
--color-accent-200: #fde68a;
--color-accent-300: #fcd34d;
--color-accent-400: #fbbf24;
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;
--color-accent-700: #b45309;
--color-accent-800: #92400e;
--color-accent-900: #78350f;
--color-accent: #b45309;
/* Colors - Neutrals */
--color-neutral-0: #ffffff;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-neutral-400: #a3a3a3;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-neutral-950: #0a0a0a;
/* Colors - Semantic */
--color-success-light: #dcfce7;
--color-success: #16a34a;
--color-success-dark: #15803d;
--color-error-light: #fee2e2;
--color-error: #dc2626;
--color-error-dark: #b91c1c;
--color-warning-light: #fef3c7;
--color-warning: #d97706;
--color-warning-dark: #b45309;
--color-info-light: #dbeafe;
--color-info: #2563eb;
--color-info-dark: #1d4ed8;
/* Colors - Backgrounds */
--color-bg-primary: var(--color-neutral-0);
--color-bg-secondary: var(--color-neutral-50);
--color-bg-tertiary: var(--color-neutral-100);
--color-bg-inverse: var(--color-neutral-900);
/* Colors - Surfaces */
--color-surface-1: var(--color-neutral-0);
--color-surface-2: var(--color-neutral-50);
--color-surface-3: var(--color-neutral-100);
/* Colors - Text */
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-600);
--color-text-muted: var(--color-neutral-400);
--color-text-disabled: var(--color-neutral-300);
--color-text-inverse: var(--color-neutral-0);
--color-text-inverse-secondary: var(--color-neutral-300);
--color-text-link: var(--color-primary);
--color-text-link-hover: var(--color-primary-800);
/* Colors - Borders */
--color-border-default: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
--color-border-muted: var(--color-neutral-100);
--color-border-focus: var(--color-primary);
--color-border-error: var(--color-error);
--color-border-success: var(--color-success);
/* Spacing Scale (4px increments) */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
/* Semantic Spacing */
--spacing-xs: var(--space-1);
--spacing-sm: var(--space-2);
--spacing-md: var(--space-4);
--spacing-lg: var(--space-6);
--spacing-xl: var(--space-8);
--spacing-2xl: var(--space-12);
--spacing-3xl: var(--space-16);
--spacing-4xl: var(--space-24);
/* Layout - Containers */
--container-xs: 320px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--container-max: 1200px;
/* Layout - Grid */
--grid-columns: 12;
--grid-gap: var(--space-4);
--grid-gap-sm: var(--space-2);
--grid-gap-lg: var(--space-6);
/* Section Padding */
--section-padding-y-sm: var(--space-8);
--section-padding-y-md: var(--space-12);
--section-padding-y-lg: var(--space-16);
--section-padding-y-xl: var(--space-24);
/* Borders & Shadows */
--radius-none: 0;
--radius-sm: 0.125rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Transitions */
--duration-instant: 0ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-in: cubic-bezier(0.4, 0, 1, 1);
--easing-out: cubic-bezier(0, 0, 0.2, 1);
--easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Z-Index Scale */
--z-deep: -999;
--z-default: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-overlay: 40;
--z-modal: 50;
--z-popover: 60;
--z-tooltip: 70;
--z-toast: 80;
--z-top: 999;
/* Icons */
--icon-xs: 12px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
--icon-2xl: 48px;
/* Aspect Ratios */
--aspect-square: 1 / 1;
--aspect-video: 16 / 9;
--aspect-photo: 4 / 3;
--aspect-portrait: 3 / 4;
--aspect-wide: 21 / 9;
/* Button Tokens */
--btn-primary-bg: var(--color-primary);
--btn-primary-bg-hover: var(--color-primary-800);
--btn-primary-bg-active: var(--color-primary-900);
--btn-primary-bg-disabled: var(--color-neutral-300);
--btn-primary-text: var(--color-neutral-0);
--btn-primary-text-disabled: var(--color-neutral-500);
--btn-focus-ring-width: 2px;
--btn-focus-ring-offset: 2px;
--btn-focus-ring-color: var(--color-primary-400);
}
/* Responsive Base Font */
html {
font-size: 16px;
font-size: clamp(14px, 2.5vw, 18px);
}
/* Responsive Typography */
@media (min-width: 640px) {
:root {
--heading-h1-size: var(--font-size-5xl);
}
}
@media (min-width: 1024px) {
:root {
--heading-h1-size: 4.5rem;
--heading-h2-size: var(--font-size-4xl);
}
}
/* ========================================
BASE RESET & TYPOGRAPHY
======================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-primary);
font-size: var(--text-body-size);
font-weight: var(--text-body-weight);
line-height: var(--text-body-line-height);
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* English language uses secondary font */
html[lang="en"] body {
font-family: var(--font-family-secondary);
}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6 {
font-family: var(--font-family-secondary);
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text-primary);
}
h1 {
font-size: var(--heading-h1-size);
font-weight: var(--heading-h1-weight);
line-height: var(--heading-h1-line-height);
letter-spacing: var(--heading-h1-letter-spacing);
}
h2 {
font-size: var(--heading-h2-size);
font-weight: var(--heading-h2-weight);
line-height: var(--heading-h2-line-height);
letter-spacing: var(--heading-h2-letter-spacing);
}
h3 {
font-size: var(--heading-h3-size);
font-weight: var(--heading-h3-weight);
line-height: var(--heading-h3-line-height);
letter-spacing: var(--heading-h3-letter-spacing);
}
h4 {
font-size: var(--heading-h4-size);
font-weight: var(--heading-h4-weight);
line-height: var(--heading-h4-line-height);
letter-spacing: var(--heading-h4-letter-spacing);
}
p {
margin-bottom: var(--space-4);
}
p:last-child {
margin-bottom: 0;
}
/* ========================================
UTILITY CLASSES
======================================== */
.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;
}
.text-lead {
font-size: var(--text-lead-size);
font-weight: var(--text-lead-weight);
line-height: var(--text-lead-line-height);
color: var(--color-text-secondary);
}
.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-none { display: none; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-inverse { background-color: var(--color-bg-inverse); }
.text-inverse { color: var(--color-text-inverse); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
/* ========================================
LAYOUT COMPONENTS
======================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
@media (min-width: 640px) {
.container {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
}
@media (min-width: 1024px) {
.container {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
}
.section {
padding-top: var(--section-padding-y-md);
padding-bottom: var(--section-padding-y-md);
}
@media (min-width: 1024px) {
.section {
padding-top: var(--section-padding-y-lg);
padding-bottom: var(--section-padding-y-lg);
}
}
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gap);
}
.col-12 { grid-column: span 12; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
@media (max-width: 767px) {
.col-md-4,
.col-md-6 {
grid-column: span 12;
}
}
@media (min-width: 768px) {
.col-md-4 { grid-column: span 4; }
.col-md-6 { grid-column: span 6; }
}
/* ========================================
HEADER COMPONENT
======================================== */
.header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border-muted);
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 var(--space-4);
max-width: 1440px;
margin: 0 auto;
}
@media (min-width: 1024px) {
.header__container {
height: 72px;
padding: 0;
}
}
.header__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
text-decoration: none;
flex-shrink: 0;
}
.header__logo-icon {
width: 40px;
height: 40px;
background-color: var(--color-primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-0);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
.nav {
display: none;
align-items: center;
gap: var(--space-0-5);
flex: 1;
justify-content: center;
}
@media (min-width: 1024px) {
.nav {
display: flex;
}
}
.nav__link {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 var(--space-2);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
.nav__link:hover {
color: var(--color-text-primary);
background-color: var(--color-neutral-100);
}
.nav__link--active {
color: var(--color-primary);
background-color: var(--color-primary-50);
}
.header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-primary);
}
.mobile-menu-btn:hover {
background-color: var(--color-neutral-100);
}
@media (min-width: 1024px) {
.mobile-menu-btn {
display: none;
}
}
/* ========================================
LANGUAGE TOGGLE
======================================== */
.lang-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 36px;
padding: 0 var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-family: var(--font-family-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border: 2px solid var(--color-secondary-200);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--duration-fast) var(--easing-default);
}
.lang-toggle:hover {
background-color: var(--color-secondary-200);
border-color: var(--color-secondary-300);
}
.lang-toggle:focus-visible {
outline: 2px solid var(--color-secondary-400);
outline-offset: 2px;
}
/* ========================================
BUTTON COMPONENT
======================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-medium);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
html[lang="en"] .btn {
font-family: var(--font-family-secondary);
}
.btn--sm {
height: 32px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
}
.btn--md {
height: 40px;
padding: 0 var(--space-4);
font-size: var(--font-size-base);
}
.btn--lg {
height: 48px;
padding: 0 var(--space-6);
font-size: var(--font-size-md);
}
.btn--primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.btn--primary:hover {
background-color: var(--btn-primary-bg-hover);
}
.btn--primary:active {
background-color: var(--btn-primary-bg-active);
}
.btn--primary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
background-color: var(--btn-primary-bg-disabled);
color: var(--btn-primary-text-disabled);
cursor: not-allowed;
}
.btn--secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--secondary:hover {
background-color: var(--color-primary-50);
}
.btn--secondary:active {
background-color: var(--color-primary-100);
}
.btn--secondary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--ghost {
background-color: transparent;
color: var(--color-primary);
}
.btn--ghost:hover {
background-color: var(--color-primary-50);
}
.btn--inverse {
background-color: var(--color-neutral-0);
color: var(--color-neutral-900);
}
.btn--inverse:hover {
background-color: var(--color-neutral-100);
}
/* ========================================
CARD COMPONENT
======================================== */
.card {
background-color: var(--color-surface-1);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.card__header {
padding: var(--space-4) var(--space-4) 0;
}
.card__body {
padding: var(--space-4);
}
.card__footer {
padding: 0 var(--space-4) var(--space-4);
}
.card--elevated {
box-shadow: var(--shadow-md);
}
.card--interactive {
cursor: pointer;
transition: box-shadow var(--duration-fast) var(--easing-default),
transform var(--duration-fast) var(--easing-default);
}
.card--interactive:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.card--interactive:focus-within {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
/* ========================================
LINK COMPONENT
======================================== */
.link {
color: var(--color-text-link);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
transition: color var(--duration-fast) var(--easing-default);
}
.link:hover {
color: var(--color-text-link-hover);
}
.link:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ========================================
HERO SECTION
======================================== */
.hero {
background-color: var(--color-bg-primary);
text-align: center;
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
@media (min-width: 1024px) {
.hero {
padding-top: var(--space-24);
padding-bottom: var(--space-24);
}
}
.hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-3);
background-color: var(--color-primary-50);
color: var(--color-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
}
.hero__title {
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-6);
}
.hero__subtitle {
max-width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-8);
}
.hero__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.hero__actions {
flex-direction: row;
justify-content: center;
}
}
/* ========================================
PRIORITY CARDS SECTION
======================================== */
.priorities {
background-color: var(--color-bg-secondary);
}
.priorities__header {
text-align: center;
margin-bottom: var(--space-12);
}
.priorities__title {
margin-bottom: var(--space-4);
}
.priorities__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
}
.priority-card {
height: 100%;
display: flex;
flex-direction: column;
}
.priority-card__icon {
width: 48px;
height: 48px;
background-color: var(--color-primary-100);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-4);
color: var(--color-primary);
}
.priority-card__stat {
display: inline-block;
padding: var(--space-1) var(--space-2);
background-color: var(--color-accent-100);
color: var(--color-accent);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
}
.priority-card__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
.priority-card__desc {
color: var(--color-text-secondary);
flex-grow: 1;
}
.priority-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin-top: var(--space-4);
color: var(--color-primary);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
}
.priority-card__link:hover {
text-decoration: underline;
}
/* ========================================
PROOF STRIP SECTION
======================================== */
.proof-strip {
background-color: var(--color-primary);
color: var(--color-text-inverse);
text-align: center;
}
.proof-strip__title {
color: var(--color-text-inverse);
margin-bottom: var(--space-8);
}
.proof-strip__stats {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
margin-bottom: var(--space-8);
}
@media (min-width: 768px) {
.proof-strip__stats {
flex-direction: row;
justify-content: center;
gap: var(--space-16);
}
}
.stat {
text-align: center;
}
.stat__number {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
line-height: 1;
margin-bottom: var(--space-2);
}
.stat__label {
font-size: var(--font-size-md);
opacity: 0.9;
}
.proof-strip__cta {
margin-top: var(--space-4);
}
/* ========================================
DHAKA-8 TEASER SECTION
======================================== */
.dhaka8-teaser {
background-color: var(--color-bg-secondary);
}
.dhaka8-teaser__content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-8);
}
@media (min-width: 1024px) {
.dhaka8-teaser__content {
flex-direction: row;
text-align: left;
gap: var(--space-16);
}
}
.dhaka8-teaser__text {
flex: 1;
}
.dhaka8-teaser__title {
margin-bottom: var(--space-4);
}
.dhaka8-teaser__desc {
color: var(--color-text-secondary);
margin-bottom: var(--space-6);
}
.dhaka8-teaser__areas {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-6);
}
@media (min-width: 1024px) {
.dhaka8-teaser__areas {
justify-content: flex-start;
}
}
.area-tag {
display: inline-flex;
align-items: center;
padding: var(--space-1-5) var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
}
.dhaka8-teaser__map {
flex: 1;
max-width: 400px;
width: 100%;
}
.map-placeholder {
aspect-ratio: var(--aspect-square);
background-color: var(--color-neutral-200);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
/* ========================================
FOOTER COMPONENT
======================================== */
.footer {
background-color: var(--color-neutral-900);
color: var(--color-text-inverse);
padding: var(--space-12) 0 var(--space-8);
}
.footer__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
.footer__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.footer__heading {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.footer__link {
display: block;
padding: var(--space-1) 0;
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
.footer__link:hover {
color: var(--color-text-inverse);
}
.footer__bottom {
padding-top: var(--space-8);
border-top: 1px solid var(--color-neutral-800);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 768px) {
.footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
.footer__copyright {
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
.footer__lite-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
/* ========================================
CHECKBOX (for lite mode)
======================================== */
.checkbox {
width: 20px;
height: 20px;
appearance: none;
background-color: transparent;
border: 2px solid var(--color-neutral-500);
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.checkbox:checked {
background-color: var(--color-primary-400);
border-color: var(--color-primary-400);
}
.checkbox:checked::after {
content: '';
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
}
/* ========================================
LITE MODE STYLES
======================================== */
.lite-mode img:not(.essential),
.lite-mode video,
.lite-mode iframe {
display: none !important;
}
.lite-mode .hero {
background-image: none !important;
}
.lite-mode * {
animation: none !important;
transition: none !important;
}
.lite-mode .card--interactive:hover {
transform: none;
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ========================================
ICON SVG
======================================== */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }
/* ===== Styles from about.html ===== */
/* ========================================
CSS CUSTOM PROPERTIES (Design Tokens)
======================================== */
:root {
/* Typography - Font Families */
--font-family-primary: 'Noto Sans Bengali', 'Hind Siliguri', 'Kalpurush', system-ui, sans-serif;
--font-family-secondary: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
/* Typography - Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem;
--font-size-3xl: 2.25rem;
--font-size-4xl: 3rem;
--font-size-5xl: 4rem;
/* Typography - Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Typography - Line Heights */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Typography - Letter Spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Heading Definitions */
--heading-h1-size: var(--font-size-4xl);
--heading-h1-weight: 700;
--heading-h1-line-height: 1.1;
--heading-h1-letter-spacing: -0.02em;
--heading-h2-size: var(--font-size-3xl);
--heading-h2-weight: 700;
--heading-h2-line-height: 1.2;
--heading-h2-letter-spacing: -0.01em;
--heading-h3-size: var(--font-size-2xl);
--heading-h3-weight: 600;
--heading-h3-line-height: 1.25;
--heading-h3-letter-spacing: 0;
--heading-h4-size: var(--font-size-xl);
--heading-h4-weight: 600;
--heading-h4-line-height: 1.3;
--heading-h4-letter-spacing: 0;
/* Body & Text Styles */
--text-body-size: var(--font-size-base);
--text-body-weight: 400;
--text-body-line-height: 1.6;
--text-body-letter-spacing: 0;
--text-lead-size: var(--font-size-lg);
--text-lead-weight: 400;
--text-lead-line-height: 1.7;
/* Colors - Primary (BNP Green) */
--color-primary-50: #ecfdf5;
--color-primary-100: #d1fae5;
--color-primary-200: #a7f3d0;
--color-primary-300: #6ee7b7;
--color-primary-400: #34d399;
--color-primary-500: #10b981;
--color-primary-600: #059669;
--color-primary-700: #047857;
--color-primary-800: #065f46;
--color-primary-900: #064e3b;
--color-primary: #006a4e;
/* Colors - Secondary (Trust Blue) */
--color-secondary-50: #eff6ff;
--color-secondary-100: #dbeafe;
--color-secondary-200: #bfdbfe;
--color-secondary-300: #93c5fd;
--color-secondary-400: #60a5fa;
--color-secondary-500: #3b82f6;
--color-secondary-600: #2563eb;
--color-secondary-700: #1d4ed8;
--color-secondary-800: #1e40af;
--color-secondary-900: #1e3a8a;
--color-secondary: #1e40af;
/* Colors - Accent (Optimism Yellow - WCAG adjusted) */
--color-accent-50: #fffbeb;
--color-accent-100: #fef3c7;
--color-accent-200: #fde68a;
--color-accent-300: #fcd34d;
--color-accent-400: #fbbf24;
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;
--color-accent-700: #b45309;
--color-accent-800: #92400e;
--color-accent-900: #78350f;
--color-accent: #b45309;
/* Colors - Neutrals */
--color-neutral-0: #ffffff;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-neutral-400: #a3a3a3;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-neutral-950: #0a0a0a;
/* Colors - Semantic */
--color-success-light: #dcfce7;
--color-success: #16a34a;
--color-success-dark: #15803d;
--color-error-light: #fee2e2;
--color-error: #dc2626;
--color-error-dark: #b91c1c;
--color-warning-light: #fef3c7;
--color-warning: #d97706;
--color-warning-dark: #b45309;
--color-info-light: #dbeafe;
--color-info: #2563eb;
--color-info-dark: #1d4ed8;
/* Colors - Backgrounds */
--color-bg-primary: var(--color-neutral-0);
--color-bg-secondary: var(--color-neutral-50);
--color-bg-tertiary: var(--color-neutral-100);
--color-bg-inverse: var(--color-neutral-900);
/* Colors - Surfaces */
--color-surface-1: var(--color-neutral-0);
--color-surface-2: var(--color-neutral-50);
--color-surface-3: var(--color-neutral-100);
/* Colors - Text */
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-600);
--color-text-muted: var(--color-neutral-400);
--color-text-disabled: var(--color-neutral-300);
--color-text-inverse: var(--color-neutral-0);
--color-text-inverse-secondary: var(--color-neutral-300);
--color-text-link: var(--color-primary);
--color-text-link-hover: var(--color-primary-800);
/* Colors - Borders */
--color-border-default: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
--color-border-muted: var(--color-neutral-100);
--color-border-focus: var(--color-primary);
--color-border-error: var(--color-error);
--color-border-success: var(--color-success);
/* Spacing Scale (4px increments) */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
/* Semantic Spacing */
--spacing-xs: var(--space-1);
--spacing-sm: var(--space-2);
--spacing-md: var(--space-4);
--spacing-lg: var(--space-6);
--spacing-xl: var(--space-8);
--spacing-2xl: var(--space-12);
--spacing-3xl: var(--space-16);
--spacing-4xl: var(--space-24);
/* Layout - Containers */
--container-xs: 320px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--container-max: 1200px;
/* Layout - Grid */
--grid-columns: 12;
--grid-gap: var(--space-4);
--grid-gap-sm: var(--space-2);
--grid-gap-lg: var(--space-6);
/* Section Padding */
--section-padding-y-sm: var(--space-8);
--section-padding-y-md: var(--space-12);
--section-padding-y-lg: var(--space-16);
--section-padding-y-xl: var(--space-24);
/* Borders & Shadows */
--radius-none: 0;
--radius-sm: 0.125rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Transitions */
--duration-instant: 0ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-in: cubic-bezier(0.4, 0, 1, 1);
--easing-out: cubic-bezier(0, 0, 0.2, 1);
--easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Z-Index Scale */
--z-deep: -999;
--z-default: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-overlay: 40;
--z-modal: 50;
--z-popover: 60;
--z-tooltip: 70;
--z-toast: 80;
--z-top: 999;
/* Icons */
--icon-xs: 12px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
--icon-2xl: 48px;
/* Aspect Ratios */
--aspect-square: 1 / 1;
--aspect-video: 16 / 9;
--aspect-photo: 4 / 3;
--aspect-portrait: 3 / 4;
--aspect-wide: 21 / 9;
/* Button Tokens */
--btn-primary-bg: var(--color-primary);
--btn-primary-bg-hover: var(--color-primary-800);
--btn-primary-bg-active: var(--color-primary-900);
--btn-primary-bg-disabled: var(--color-neutral-300);
--btn-primary-text: var(--color-neutral-0);
--btn-primary-text-disabled: var(--color-neutral-500);
--btn-focus-ring-width: 2px;
--btn-focus-ring-offset: 2px;
--btn-focus-ring-color: var(--color-primary-400);
/* Timeline Tokens */
--timeline-line-color: var(--color-border-default);
--timeline-dot-size: 16px;
--timeline-dot-color: var(--color-primary);
--timeline-dot-success: var(--color-success);
}
/* Responsive Base Font */
html {
font-size: 16px;
font-size: clamp(14px, 2.5vw, 18px);
}
/* Responsive Typography */
@media (min-width: 640px) {
:root {
--heading-h1-size: var(--font-size-5xl);
}
}
@media (min-width: 1024px) {
:root {
--heading-h1-size: 4.5rem;
--heading-h2-size: var(--font-size-4xl);
}
}
/* ========================================
BASE RESET & TYPOGRAPHY
======================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-primary);
font-size: var(--text-body-size);
font-weight: var(--text-body-weight);
line-height: var(--text-body-line-height);
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* English language uses secondary font */
html[lang="en"] body {
font-family: var(--font-family-secondary);
}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6 {
font-family: var(--font-family-secondary);
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text-primary);
}
h1 {
font-size: var(--heading-h1-size);
font-weight: var(--heading-h1-weight);
line-height: var(--heading-h1-line-height);
letter-spacing: var(--heading-h1-letter-spacing);
}
h2 {
font-size: var(--heading-h2-size);
font-weight: var(--heading-h2-weight);
line-height: var(--heading-h2-line-height);
letter-spacing: var(--heading-h2-letter-spacing);
}
h3 {
font-size: var(--heading-h3-size);
font-weight: var(--heading-h3-weight);
line-height: var(--heading-h3-line-height);
letter-spacing: var(--heading-h3-letter-spacing);
}
h4 {
font-size: var(--heading-h4-size);
font-weight: var(--heading-h4-weight);
line-height: var(--heading-h4-line-height);
letter-spacing: var(--heading-h4-letter-spacing);
}
p {
margin-bottom: var(--space-4);
}
p:last-child {
margin-bottom: 0;
}
/* ========================================
UTILITY CLASSES
======================================== */
.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;
}
.text-lead {
font-size: var(--text-lead-size);
font-weight: var(--text-lead-weight);
line-height: var(--text-lead-line-height);
color: var(--color-text-secondary);
}
.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-none { display: none; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-inverse { background-color: var(--color-bg-inverse); }
.text-inverse { color: var(--color-text-inverse); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
/* ========================================
LAYOUT COMPONENTS
======================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
@media (min-width: 640px) {
.container {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
}
@media (min-width: 1024px) {
.container {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
}
.section {
padding-top: var(--section-padding-y-md);
padding-bottom: var(--section-padding-y-md);
}
@media (min-width: 1024px) {
.section {
padding-top: var(--section-padding-y-lg);
padding-bottom: var(--section-padding-y-lg);
}
}
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gap);
}
.col-12 { grid-column: span 12; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
@media (max-width: 767px) {
.col-md-4,
.col-md-6,
.col-md-3 {
grid-column: span 12;
}
}
@media (min-width: 768px) {
.col-md-4 { grid-column: span 4; }
.col-md-6 { grid-column: span 6; }
.col-md-3 { grid-column: span 3; }
}
/* ========================================
HEADER COMPONENT
======================================== */
.header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border-muted);
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 var(--space-4);
}
@media (min-width: 1024px) {
.header__container {
height: 72px;
padding: 0;
}
}
.header__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
text-decoration: none;
}
.header__logo-icon {
width: 40px;
height: 40px;
background-color: var(--color-primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-0);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
.nav {
display: none;
align-items: center;
gap: var(--space-1);
}
@media (min-width: 1024px) {
.nav {
display: flex;
}
}
.nav__link {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
.nav__link:hover {
color: var(--color-text-primary);
background-color: var(--color-neutral-100);
}
.nav__link--active {
color: var(--color-primary);
background-color: var(--color-primary-50);
}
.header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-primary);
}
.mobile-menu-btn:hover {
background-color: var(--color-neutral-100);
}
@media (min-width: 1024px) {
.mobile-menu-btn {
display: none;
}
}
/* ========================================
LANGUAGE TOGGLE
======================================== */
.lang-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 36px;
padding: 0 var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-family: var(--font-family-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border: 2px solid var(--color-secondary-200);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--duration-fast) var(--easing-default);
}
.lang-toggle:hover {
background-color: var(--color-secondary-200);
border-color: var(--color-secondary-300);
}
.lang-toggle:focus-visible {
outline: 2px solid var(--color-secondary-400);
outline-offset: 2px;
}
/* ========================================
BUTTON COMPONENT
======================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-medium);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
html[lang="en"] .btn {
font-family: var(--font-family-secondary);
}
.btn--sm {
height: 32px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
}
.btn--md {
height: 40px;
padding: 0 var(--space-4);
font-size: var(--font-size-base);
}
.btn--lg {
height: 48px;
padding: 0 var(--space-6);
font-size: var(--font-size-md);
}
.btn--primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.btn--primary:hover {
background-color: var(--btn-primary-bg-hover);
}
.btn--primary:active {
background-color: var(--btn-primary-bg-active);
}
.btn--primary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--secondary:hover {
background-color: var(--color-primary-50);
}
.btn--secondary:active {
background-color: var(--color-primary-100);
}
.btn--secondary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--ghost {
background-color: transparent;
color: var(--color-primary);
}
.btn--ghost:hover {
background-color: var(--color-primary-50);
}
/* ========================================
HERO ABOUT SECTION
======================================== */
.hero-about {
background-color: var(--color-bg-secondary);
padding-top: var(--space-12);
padding-bottom: var(--space-12);
}
@media (min-width: 1024px) {
.hero-about {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
}
.hero-about__content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-8);
}
@media (min-width: 1024px) {
.hero-about__content {
flex-direction: row;
text-align: left;
gap: var(--space-12);
}
}
.hero-about__text {
flex: 1;
}
.hero-about__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-3);
background-color: var(--color-primary-100);
color: var(--color-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
margin-bottom: var(--space-4);
}
.hero-about__title {
margin-bottom: var(--space-4);
}
.hero-about__subtitle {
max-width: 600px;
color: var(--color-text-secondary);
margin-bottom: var(--space-6);
}
@media (min-width: 1024px) {
.hero-about__subtitle {
margin-left: 0;
margin-right: 0;
}
}
.hero-about__image {
flex-shrink: 0;
width: 280px;
height: 280px;
background-color: var(--color-neutral-200);
border-radius: var(--radius-2xl);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
overflow: hidden;
}
@media (min-width: 1024px) {
.hero-about__image {
width: 320px;
height: 320px;
}
}
/* ========================================
TIMELINE NAVIGATION
======================================== */
.timeline-nav {
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border-muted);
padding: var(--space-4) 0;
position: sticky;
top: 64px;
z-index: var(--z-dropdown);
}
@media (min-width: 1024px) {
.timeline-nav {
top: 72px;
}
}
.timeline-nav__list {
display: flex;
gap: var(--space-2);
overflow-x: auto;
padding-bottom: var(--space-2);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.timeline-nav__list::-webkit-scrollbar {
display: none;
}
.timeline-nav__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background-color: var(--color-neutral-100);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
white-space: nowrap;
text-decoration: none;
transition: all var(--duration-fast) var(--easing-default);
}
.timeline-nav__link:hover {
background-color: var(--color-primary-100);
color: var(--color-primary);
}
.timeline-nav__link--active {
background-color: var(--color-primary);
color: var(--color-text-inverse);
}
/* ========================================
TIMELINE COMPONENT
======================================== */
.timeline-section {
padding-top: var(--space-12);
padding-bottom: var(--space-8);
scroll-margin-top: 140px;
}
@media (min-width: 1024px) {
.timeline-section {
scroll-margin-top: 160px;
}
}
.timeline-section:nth-child(even) {
background-color: var(--color-bg-secondary);
}
.timeline__header {
text-align: center;
margin-bottom: var(--space-10);
}
.timeline__title {
margin-bottom: var(--space-2);
}
.timeline__subtitle {
color: var(--color-text-secondary);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
padding-left: var(--space-8);
}
.timeline::before {
content: '';
position: absolute;
left: 7px;
top: 0;
bottom: 0;
width: 2px;
background-color: var(--timeline-line-color);
}
@media (min-width: 768px) {
.timeline {
padding-left: var(--space-12);
}
.timeline::before {
left: 11px;
}
}
.timeline__item {
position: relative;
padding-bottom: var(--space-8);
}
.timeline__item:last-child {
padding-bottom: 0;
}
.timeline__dot {
position: absolute;
left: calc(-1 * var(--space-8) + 7px - 8px);
top: 4px;
width: var(--timeline-dot-size);
height: var(--timeline-dot-size);
background-color: var(--color-bg-primary);
border: 3px solid var(--timeline-dot-color);
border-radius: var(--radius-full);
z-index: 1;
}
@media (min-width: 768px) {
.timeline__dot {
left: calc(-1 * var(--space-12) + 11px - 8px);
}
}
.timeline__item--success .timeline__dot {
border-color: var(--timeline-dot-success);
background-color: var(--color-success-light);
}
.timeline__date {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
}
.timeline__item--success .timeline__date {
background-color: var(--color-success-light);
color: var(--color-success-dark);
}
.timeline__content-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
.timeline__content-desc {
color: var(--color-text-secondary);
margin-bottom: var(--space-3);
}
.timeline__source {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.timeline__source-link {
color: var(--color-text-link);
text-decoration: underline;
text-underline-offset: 2px;
}
.timeline__source-link:hover {
color: var(--color-text-link-hover);
}
/* ========================================
REFLECTION SECTION
======================================== */
.reflection {
background-color: var(--color-primary);
color: var(--color-text-inverse);
text-align: center;
}
.reflection__title {
color: var(--color-text-inverse);
margin-bottom: var(--space-8);
}
.reflection__quote {
max-width: 800px;
margin: 0 auto var(--space-6);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-relaxed);
font-style: italic;
}
@media (min-width: 768px) {
.reflection__quote {
font-size: var(--font-size-2xl);
}
}
.reflection__attribution {
font-size: var(--font-size-md);
opacity: 0.9;
}
/* ========================================
FAMILY SECTION
======================================== */
.family {
background-color: var(--color-bg-secondary);
}
.family__content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-8);
max-width: 900px;
margin: 0 auto;
}
@media (min-width: 768px) {
.family__content {
flex-direction: row;
text-align: left;
gap: var(--space-12);
}
}
.family__image {
flex-shrink: 0;
width: 200px;
height: 200px;
background-color: var(--color-neutral-200);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.family__text {
flex: 1;
}
.family__title {
margin-bottom: var(--space-4);
}
.family__desc {
color: var(--color-text-secondary);
margin-bottom: var(--space-4);
}
.family__info {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.family__info-item {
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.family__info-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--color-primary);
}
/* ========================================
CTA SECTION
======================================== */
.cta-section {
background-color: var(--color-bg-primary);
text-align: center;
}
.cta-section__title {
margin-bottom: var(--space-4);
}
.cta-section__desc {
max-width: 600px;
margin: 0 auto var(--space-8);
color: var(--color-text-secondary);
}
.cta-section__buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.cta-section__buttons {
flex-direction: row;
justify-content: center;
}
}
/* ========================================
FOOTER COMPONENT
======================================== */
.footer {
background-color: var(--color-neutral-900);
color: var(--color-text-inverse);
padding: var(--space-12) 0 var(--space-8);
}
.footer__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
.footer__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.footer__heading {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.footer__link {
display: block;
padding: var(--space-1) 0;
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
.footer__link:hover {
color: var(--color-text-inverse);
}
.footer__bottom {
padding-top: var(--space-8);
border-top: 1px solid var(--color-neutral-800);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 768px) {
.footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
.footer__copyright {
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
.footer__lite-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
/* ========================================
CHECKBOX (for lite mode)
======================================== */
.checkbox {
width: 20px;
height: 20px;
appearance: none;
background-color: transparent;
border: 2px solid var(--color-neutral-500);
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.checkbox:checked {
background-color: var(--color-primary-400);
border-color: var(--color-primary-400);
}
.checkbox:checked::after {
content: '';
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
}
/* ========================================
LITE MODE STYLES
======================================== */
.lite-mode img:not(.essential),
.lite-mode video,
.lite-mode iframe {
display: none !important;
}
.lite-mode .hero-about {
background-image: none !important;
}
.lite-mode * {
animation: none !important;
transition: none !important;
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ========================================
ICON SVG
======================================== */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }
/* ===== Styles from compare.html ===== */
/* ========================================
CSS CUSTOM PROPERTIES (Design Tokens)
======================================== */
:root {
/* Typography - Font Families */
--font-family-primary: 'Noto Sans Bengali', 'Hind Siliguri', 'Kalpurush', system-ui, sans-serif;
--font-family-secondary: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
/* Typography - Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem;
--font-size-3xl: 2.25rem;
--font-size-4xl: 3rem;
--font-size-5xl: 4rem;
/* Typography - Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Typography - Line Heights */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Typography - Letter Spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Heading Definitions */
--heading-h1-size: var(--font-size-4xl);
--heading-h1-weight: 700;
--heading-h1-line-height: 1.1;
--heading-h1-letter-spacing: -0.02em;
--heading-h2-size: var(--font-size-3xl);
--heading-h2-weight: 700;
--heading-h2-line-height: 1.2;
--heading-h2-letter-spacing: -0.01em;
--heading-h3-size: var(--font-size-2xl);
--heading-h3-weight: 600;
--heading-h3-line-height: 1.25;
--heading-h3-letter-spacing: 0;
--heading-h4-size: var(--font-size-xl);
--heading-h4-weight: 600;
--heading-h4-line-height: 1.3;
--heading-h4-letter-spacing: 0;
/* Body & Text Styles */
--text-body-size: var(--font-size-base);
--text-body-weight: 400;
--text-body-line-height: 1.6;
--text-body-letter-spacing: 0;
--text-lead-size: var(--font-size-lg);
--text-lead-weight: 400;
--text-lead-line-height: 1.7;
/* Colors - Primary (BNP Green) */
--color-primary-50: #ecfdf5;
--color-primary-100: #d1fae5;
--color-primary-200: #a7f3d0;
--color-primary-300: #6ee7b7;
--color-primary-400: #34d399;
--color-primary-500: #10b981;
--color-primary-600: #059669;
--color-primary-700: #047857;
--color-primary-800: #065f46;
--color-primary-900: #064e3b;
--color-primary: #006a4e;
/* Colors - Secondary (Trust Blue) */
--color-secondary-50: #eff6ff;
--color-secondary-100: #dbeafe;
--color-secondary-200: #bfdbfe;
--color-secondary-300: #93c5fd;
--color-secondary-400: #60a5fa;
--color-secondary-500: #3b82f6;
--color-secondary-600: #2563eb;
--color-secondary-700: #1d4ed8;
--color-secondary-800: #1e40af;
--color-secondary-900: #1e3a8a;
--color-secondary: #1e40af;
/* Colors - Accent (Optimism Yellow - WCAG adjusted) */
--color-accent-50: #fffbeb;
--color-accent-100: #fef3c7;
--color-accent-200: #fde68a;
--color-accent-300: #fcd34d;
--color-accent-400: #fbbf24;
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;
--color-accent-700: #b45309;
--color-accent-800: #92400e;
--color-accent-900: #78350f;
--color-accent: #b45309;
/* Colors - Neutrals */
--color-neutral-0: #ffffff;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-neutral-400: #a3a3a3;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-neutral-950: #0a0a0a;
/* Colors - Semantic */
--color-success-light: #dcfce7;
--color-success: #16a34a;
--color-success-dark: #15803d;
--color-error-light: #fee2e2;
--color-error: #dc2626;
--color-error-dark: #b91c1c;
--color-warning-light: #fef3c7;
--color-warning: #d97706;
--color-warning-dark: #b45309;
--color-info-light: #dbeafe;
--color-info: #2563eb;
--color-info-dark: #1d4ed8;
/* Colors - Backgrounds */
--color-bg-primary: var(--color-neutral-0);
--color-bg-secondary: var(--color-neutral-50);
--color-bg-tertiary: var(--color-neutral-100);
--color-bg-inverse: var(--color-neutral-900);
/* Colors - Surfaces */
--color-surface-1: var(--color-neutral-0);
--color-surface-2: var(--color-neutral-50);
--color-surface-3: var(--color-neutral-100);
/* Colors - Text */
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-600);
--color-text-muted: var(--color-neutral-400);
--color-text-disabled: var(--color-neutral-300);
--color-text-inverse: var(--color-neutral-0);
--color-text-inverse-secondary: var(--color-neutral-300);
--color-text-link: var(--color-primary);
--color-text-link-hover: var(--color-primary-800);
/* Colors - Borders */
--color-border-default: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
--color-border-muted: var(--color-neutral-100);
--color-border-focus: var(--color-primary);
--color-border-error: var(--color-error);
--color-border-success: var(--color-success);
/* Spacing Scale (4px increments) */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
/* Semantic Spacing */
--spacing-xs: var(--space-1);
--spacing-sm: var(--space-2);
--spacing-md: var(--space-4);
--spacing-lg: var(--space-6);
--spacing-xl: var(--space-8);
--spacing-2xl: var(--space-12);
--spacing-3xl: var(--space-16);
--spacing-4xl: var(--space-24);
/* Layout - Containers */
--container-xs: 320px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--container-max: 1200px;
/* Layout - Grid */
--grid-columns: 12;
--grid-gap: var(--space-4);
--grid-gap-sm: var(--space-2);
--grid-gap-lg: var(--space-6);
/* Section Padding */
--section-padding-y-sm: var(--space-8);
--section-padding-y-md: var(--space-12);
--section-padding-y-lg: var(--space-16);
--section-padding-y-xl: var(--space-24);
/* Borders & Shadows */
--radius-none: 0;
--radius-sm: 0.125rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Transitions */
--duration-instant: 0ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-in: cubic-bezier(0.4, 0, 1, 1);
--easing-out: cubic-bezier(0, 0, 0.2, 1);
--easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Z-Index Scale */
--z-deep: -999;
--z-default: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-overlay: 40;
--z-modal: 50;
--z-popover: 60;
--z-tooltip: 70;
--z-toast: 80;
--z-top: 999;
/* Icons */
--icon-xs: 12px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
--icon-2xl: 48px;
/* Aspect Ratios */
--aspect-square: 1 / 1;
--aspect-video: 16 / 9;
--aspect-photo: 4 / 3;
--aspect-portrait: 3 / 4;
--aspect-wide: 21 / 9;
/* Button Tokens */
--btn-primary-bg: var(--color-primary);
--btn-primary-bg-hover: var(--color-primary-800);
--btn-primary-bg-active: var(--color-primary-900);
--btn-primary-bg-disabled: var(--color-neutral-300);
--btn-primary-text: var(--color-neutral-0);
--btn-primary-text-disabled: var(--color-neutral-500);
--btn-focus-ring-width: 2px;
--btn-focus-ring-offset: 2px;
--btn-focus-ring-color: var(--color-primary-400);
}
/* Responsive Base Font */
html {
font-size: 16px;
font-size: clamp(14px, 2.5vw, 18px);
}
/* Responsive Typography */
@media (min-width: 640px) {
:root {
--heading-h1-size: var(--font-size-5xl);
}
}
@media (min-width: 1024px) {
:root {
--heading-h1-size: 4.5rem;
--heading-h2-size: var(--font-size-4xl);
}
}
/* ========================================
BASE RESET & TYPOGRAPHY
======================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-primary);
font-size: var(--text-body-size);
font-weight: var(--text-body-weight);
line-height: var(--text-body-line-height);
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* English language uses secondary font */
html[lang="en"] body {
font-family: var(--font-family-secondary);
}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6 {
font-family: var(--font-family-secondary);
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text-primary);
}
h1 {
font-size: var(--heading-h1-size);
font-weight: var(--heading-h1-weight);
line-height: var(--heading-h1-line-height);
letter-spacing: var(--heading-h1-letter-spacing);
}
h2 {
font-size: var(--heading-h2-size);
font-weight: var(--heading-h2-weight);
line-height: var(--heading-h2-line-height);
letter-spacing: var(--heading-h2-letter-spacing);
}
h3 {
font-size: var(--heading-h3-size);
font-weight: var(--heading-h3-weight);
line-height: var(--heading-h3-line-height);
letter-spacing: var(--heading-h3-letter-spacing);
}
h4 {
font-size: var(--heading-h4-size);
font-weight: var(--heading-h4-weight);
line-height: var(--heading-h4-line-height);
letter-spacing: var(--heading-h4-letter-spacing);
}
p {
margin-bottom: var(--space-4);
}
p:last-child {
margin-bottom: 0;
}
/* ========================================
UTILITY CLASSES
======================================== */
.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;
}
.text-lead {
font-size: var(--text-lead-size);
font-weight: var(--text-lead-weight);
line-height: var(--text-lead-line-height);
color: var(--color-text-secondary);
}
.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
/* ========================================
LAYOUT COMPONENTS
======================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
@media (min-width: 640px) {
.container {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
}
@media (min-width: 1024px) {
.container {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
}
.section {
padding-top: var(--section-padding-y-md);
padding-bottom: var(--section-padding-y-md);
}
@media (min-width: 1024px) {
.section {
padding-top: var(--section-padding-y-lg);
padding-bottom: var(--section-padding-y-lg);
}
}
/* ========================================
HEADER COMPONENT
======================================== */
.header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border-muted);
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 var(--space-4);
}
@media (min-width: 1024px) {
.header__container {
height: 72px;
padding: 0;
}
}
.header__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
text-decoration: none;
}
.header__logo-icon {
width: 40px;
height: 40px;
background-color: var(--color-primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-0);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
.nav {
display: none;
align-items: center;
gap: var(--space-1);
}
@media (min-width: 1024px) {
.nav {
display: flex;
}
}
.nav__link {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
.nav__link:hover {
color: var(--color-text-primary);
background-color: var(--color-neutral-100);
}
.nav__link--active {
color: var(--color-primary);
background-color: var(--color-primary-50);
}
.header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-primary);
}
.mobile-menu-btn:hover {
background-color: var(--color-neutral-100);
}
@media (min-width: 1024px) {
.mobile-menu-btn {
display: none;
}
}
/* ========================================
LANGUAGE TOGGLE
======================================== */
.lang-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 36px;
padding: 0 var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-family: var(--font-family-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border: 2px solid var(--color-secondary-200);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--duration-fast) var(--easing-default);
}
.lang-toggle:hover {
background-color: var(--color-secondary-200);
border-color: var(--color-secondary-300);
}
.lang-toggle:focus-visible {
outline: 2px solid var(--color-secondary-400);
outline-offset: 2px;
}
/* ========================================
BUTTON COMPONENT
======================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-medium);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
html[lang="en"] .btn {
font-family: var(--font-family-secondary);
}
.btn--sm {
height: 32px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
}
.btn--md {
height: 40px;
padding: 0 var(--space-4);
font-size: var(--font-size-base);
}
.btn--lg {
height: 48px;
padding: 0 var(--space-6);
font-size: var(--font-size-md);
}
.btn--primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.btn--primary:hover {
background-color: var(--btn-primary-bg-hover);
}
.btn--primary:active {
background-color: var(--btn-primary-bg-active);
}
.btn--primary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--secondary:hover {
background-color: var(--color-primary-50);
}
.btn--secondary:active {
background-color: var(--color-primary-100);
}
.btn--secondary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--ghost {
background-color: transparent;
color: var(--color-primary);
}
.btn--ghost:hover {
background-color: var(--color-primary-50);
}
/* ========================================
HERO COMPARE SECTION
======================================== */
.hero-compare {
background: linear-gradient(135deg, var(--color-neutral-50) 0%, var(--color-secondary-50) 100%);
text-align: center;
padding-top: var(--space-16);
padding-bottom: var(--space-12);
}
@media (min-width: 1024px) {
.hero-compare {
padding-top: var(--space-20);
padding-bottom: var(--space-16);
}
}
.hero-compare__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-3);
background-color: var(--color-info-light);
color: var(--color-info);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
}
.hero-compare__title {
max-width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-4);
}
.hero-compare__subtitle {
max-width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-6);
}
.hero-compare__disclaimer {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background-color: var(--color-warning-light);
color: var(--color-warning-dark);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-lg);
border: 1px solid var(--color-warning);
}
.hero-compare__disclaimer-icon {
flex-shrink: 0;
}
/* ========================================
CANDIDATE OVERVIEW SECTION
======================================== */
.candidate-overview {
background-color: var(--color-bg-primary);
padding-top: var(--space-12);
padding-bottom: var(--space-8);
}
.candidate-overview__header {
text-align: center;
margin-bottom: var(--space-8);
}
.candidate-overview__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 768px) {
.candidate-overview__grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
}
}
.candidate-card {
background-color: var(--color-surface-1);
border: 2px solid var(--color-border-default);
border-radius: var(--radius-xl);
padding: var(--space-6);
text-align: center;
}
.candidate-card--bnp {
border-color: var(--color-primary-200);
}
.candidate-card--ncp {
border-color: var(--color-accent-200);
}
.candidate-card__photo {
width: 120px;
height: 120px;
margin: 0 auto var(--space-4);
background-color: var(--color-neutral-200);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
font-size: var(--font-size-xs);
}
.candidate-card__name {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-2);
}
.candidate-card__party {
display: inline-flex;
padding: var(--space-1) var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-full);
margin-bottom: var(--space-3);
}
.candidate-card__party--bnp {
background-color: var(--color-primary-100);
color: var(--color-primary);
}
.candidate-card__party--ncp {
background-color: var(--color-accent-100);
color: var(--color-accent);
}
.candidate-card__meta {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.candidate-card__meta-item {
margin-bottom: var(--space-1);
}
/* ========================================
DIMENSION SECTION
======================================== */
.dimensions {
background-color: var(--color-bg-secondary);
}
.dimensions__header {
text-align: center;
margin-bottom: var(--space-10);
}
.dimensions__title {
margin-bottom: var(--space-3);
}
.dimensions__subtitle {
color: var(--color-text-secondary);
max-width: 600px;
margin: 0 auto;
}
.dimension-card {
background-color: var(--color-surface-1);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-xl);
margin-bottom: var(--space-6);
overflow: hidden;
}
.dimension-card__header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
background-color: var(--color-neutral-50);
border-bottom: 1px solid var(--color-border-muted);
}
.dimension-card__icon {
width: 40px;
height: 40px;
background-color: var(--color-secondary-100);
color: var(--color-secondary);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.dimension-card__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
}
.dimension-card__content {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-px);
background-color: var(--color-border-muted);
}
@media (min-width: 768px) {
.dimension-card__content {
grid-template-columns: 1fr 1fr;
}
}
.dimension-card__column {
padding: var(--space-5);
background-color: var(--color-surface-1);
}
.dimension-card__column--bnp {
border-left: 4px solid var(--color-primary);
}
.dimension-card__column--ncp {
border-left: 4px solid var(--color-accent);
}
@media (min-width: 768px) {
.dimension-card__column--bnp {
border-left: 4px solid var(--color-primary);
}
.dimension-card__column--ncp {
border-left: none;
border-right: 4px solid var(--color-accent);
}
}
.dimension-card__label {
display: inline-flex;
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
}
.dimension-card__label--bnp {
background-color: var(--color-primary-100);
color: var(--color-primary);
}
.dimension-card__label--ncp {
background-color: var(--color-accent-100);
color: var(--color-accent);
}
.dimension-card__value {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-4);
}
.dimension-card__value--unknown {
color: var(--color-text-muted);
font-style: italic;
}
.dimension-card__source {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.dimension-card__source-link {
color: var(--color-text-link);
text-decoration: underline;
text-underline-offset: 2px;
}
.dimension-card__source-link:hover {
color: var(--color-text-link-hover);
}
/* ========================================
METHODOLOGY SECTION
======================================== */
.methodology {
background-color: var(--color-bg-primary);
}
.methodology__content {
max-width: 800px;
margin: 0 auto;
}
.methodology__header {
text-align: center;
margin-bottom: var(--space-8);
}
.methodology__title {
margin-bottom: var(--space-3);
}
.methodology__box {
background-color: var(--color-info-light);
border: 1px solid var(--color-info);
border-radius: var(--radius-xl);
padding: var(--space-6);
}
.methodology__list {
margin-bottom: var(--space-4);
}
.methodology__item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.methodology__item:last-child {
margin-bottom: 0;
}
.methodology__item-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
background-color: var(--color-info);
color: var(--color-neutral-0);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
}
.methodology__item-text {
flex: 1;
}
.methodology__update {
text-align: center;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-top: var(--space-4);
}
/* ========================================
CTA SECTION
======================================== */
.cta-section {
background-color: var(--color-primary);
color: var(--color-text-inverse);
text-align: center;
}
.cta-section__title {
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.cta-section__subtitle {
opacity: 0.9;
max-width: 600px;
margin: 0 auto var(--space-8);
}
.cta-section__buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.cta-section__buttons {
flex-direction: row;
justify-content: center;
}
}
.btn--inverse {
background-color: var(--color-neutral-0);
color: var(--color-neutral-900);
}
.btn--inverse:hover {
background-color: var(--color-neutral-100);
}
.btn--inverse-outline {
background-color: transparent;
color: var(--color-neutral-0);
border-color: var(--color-neutral-0);
}
.btn--inverse-outline:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* ========================================
FOOTER COMPONENT
======================================== */
.footer {
background-color: var(--color-neutral-900);
color: var(--color-text-inverse);
padding: var(--space-12) 0 var(--space-8);
}
.footer__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
.footer__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.footer__heading {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.footer__link {
display: block;
padding: var(--space-1) 0;
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
.footer__link:hover {
color: var(--color-text-inverse);
}
.footer__bottom {
padding-top: var(--space-8);
border-top: 1px solid var(--color-neutral-800);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 768px) {
.footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
.footer__copyright {
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
.footer__lite-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
/* ========================================
CHECKBOX (for lite mode)
======================================== */
.checkbox {
width: 20px;
height: 20px;
appearance: none;
background-color: transparent;
border: 2px solid var(--color-neutral-500);
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.checkbox:checked {
background-color: var(--color-primary-400);
border-color: var(--color-primary-400);
}
.checkbox:checked::after {
content: '';
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
}
/* ========================================
LITE MODE STYLES
======================================== */
.lite-mode img:not(.essential),
.lite-mode video,
.lite-mode iframe {
display: none !important;
}
.lite-mode .hero-compare {
background: var(--color-neutral-50) !important;
}
.lite-mode * {
animation: none !important;
transition: none !important;
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ========================================
ICON SVG
======================================== */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }
/* ===== Styles from contact.html ===== */
/* ========================================
CSS CUSTOM PROPERTIES (Design Tokens)
======================================== */
:root {
/* Typography - Font Families */
--font-family-primary: 'Noto Sans Bengali', 'Hind Siliguri', 'Kalpurush', system-ui, sans-serif;
--font-family-secondary: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
/* Typography - Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem;
--font-size-3xl: 2.25rem;
--font-size-4xl: 3rem;
--font-size-5xl: 4rem;
/* Typography - Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Typography - Line Heights */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Typography - Letter Spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Heading Definitions */
--heading-h1-size: var(--font-size-4xl);
--heading-h1-weight: 700;
--heading-h1-line-height: 1.1;
--heading-h1-letter-spacing: -0.02em;
--heading-h2-size: var(--font-size-3xl);
--heading-h2-weight: 700;
--heading-h2-line-height: 1.2;
--heading-h2-letter-spacing: -0.01em;
--heading-h3-size: var(--font-size-2xl);
--heading-h3-weight: 600;
--heading-h3-line-height: 1.25;
--heading-h3-letter-spacing: 0;
--heading-h4-size: var(--font-size-xl);
--heading-h4-weight: 600;
--heading-h4-line-height: 1.3;
--heading-h4-letter-spacing: 0;
/* Body & Text Styles */
--text-body-size: var(--font-size-base);
--text-body-weight: 400;
--text-body-line-height: 1.6;
--text-body-letter-spacing: 0;
--text-lead-size: var(--font-size-lg);
--text-lead-weight: 400;
--text-lead-line-height: 1.7;
/* Colors - Primary (BNP Green) */
--color-primary-50: #ecfdf5;
--color-primary-100: #d1fae5;
--color-primary-200: #a7f3d0;
--color-primary-300: #6ee7b7;
--color-primary-400: #34d399;
--color-primary-500: #10b981;
--color-primary-600: #059669;
--color-primary-700: #047857;
--color-primary-800: #065f46;
--color-primary-900: #064e3b;
--color-primary: #006a4e;
/* Colors - Secondary (Trust Blue) */
--color-secondary-50: #eff6ff;
--color-secondary-100: #dbeafe;
--color-secondary-200: #bfdbfe;
--color-secondary-300: #93c5fd;
--color-secondary-400: #60a5fa;
--color-secondary-500: #3b82f6;
--color-secondary-600: #2563eb;
--color-secondary-700: #1d4ed8;
--color-secondary-800: #1e40af;
--color-secondary-900: #1e3a8a;
--color-secondary: #1e40af;
/* Colors - Accent (Optimism Yellow - WCAG adjusted) */
--color-accent-50: #fffbeb;
--color-accent-100: #fef3c7;
--color-accent-200: #fde68a;
--color-accent-300: #fcd34d;
--color-accent-400: #fbbf24;
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;
--color-accent-700: #b45309;
--color-accent-800: #92400e;
--color-accent-900: #78350f;
--color-accent: #b45309;
/* Colors - Neutrals */
--color-neutral-0: #ffffff;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-neutral-400: #a3a3a3;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-neutral-950: #0a0a0a;
/* Colors - Semantic */
--color-success-light: #dcfce7;
--color-success: #16a34a;
--color-success-dark: #15803d;
--color-error-light: #fee2e2;
--color-error: #dc2626;
--color-error-dark: #b91c1c;
--color-warning-light: #fef3c7;
--color-warning: #d97706;
--color-warning-dark: #b45309;
--color-info-light: #dbeafe;
--color-info: #2563eb;
--color-info-dark: #1d4ed8;
/* Colors - Backgrounds */
--color-bg-primary: var(--color-neutral-0);
--color-bg-secondary: var(--color-neutral-50);
--color-bg-tertiary: var(--color-neutral-100);
--color-bg-inverse: var(--color-neutral-900);
/* Colors - Surfaces */
--color-surface-1: var(--color-neutral-0);
--color-surface-2: var(--color-neutral-50);
--color-surface-3: var(--color-neutral-100);
/* Colors - Text */
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-600);
--color-text-muted: var(--color-neutral-400);
--color-text-disabled: var(--color-neutral-300);
--color-text-inverse: var(--color-neutral-0);
--color-text-inverse-secondary: var(--color-neutral-300);
--color-text-link: var(--color-primary);
--color-text-link-hover: var(--color-primary-800);
/* Colors - Borders */
--color-border-default: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
--color-border-muted: var(--color-neutral-100);
--color-border-focus: var(--color-primary);
--color-border-error: var(--color-error);
--color-border-success: var(--color-success);
/* Spacing Scale (4px increments) */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
/* Semantic Spacing */
--spacing-xs: var(--space-1);
--spacing-sm: var(--space-2);
--spacing-md: var(--space-4);
--spacing-lg: var(--space-6);
--spacing-xl: var(--space-8);
--spacing-2xl: var(--space-12);
--spacing-3xl: var(--space-16);
--spacing-4xl: var(--space-24);
/* Layout - Containers */
--container-xs: 320px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--container-max: 1200px;
/* Layout - Grid */
--grid-columns: 12;
--grid-gap: var(--space-4);
--grid-gap-sm: var(--space-2);
--grid-gap-lg: var(--space-6);
/* Section Padding */
--section-padding-y-sm: var(--space-8);
--section-padding-y-md: var(--space-12);
--section-padding-y-lg: var(--space-16);
--section-padding-y-xl: var(--space-24);
/* Borders & Shadows */
--radius-none: 0;
--radius-sm: 0.125rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Transitions */
--duration-instant: 0ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-in: cubic-bezier(0.4, 0, 1, 1);
--easing-out: cubic-bezier(0, 0, 0.2, 1);
--easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Z-Index Scale */
--z-deep: -999;
--z-default: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-overlay: 40;
--z-modal: 50;
--z-popover: 60;
--z-tooltip: 70;
--z-toast: 80;
--z-top: 999;
/* Icons */
--icon-xs: 12px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
--icon-2xl: 48px;
/* Aspect Ratios */
--aspect-square: 1 / 1;
--aspect-video: 16 / 9;
--aspect-photo: 4 / 3;
--aspect-portrait: 3 / 4;
--aspect-wide: 21 / 9;
/* Button Tokens */
--btn-primary-bg: var(--color-primary);
--btn-primary-bg-hover: var(--color-primary-800);
--btn-primary-bg-active: var(--color-primary-900);
--btn-primary-bg-disabled: var(--color-neutral-300);
--btn-primary-text: var(--color-neutral-0);
--btn-primary-text-disabled: var(--color-neutral-500);
--btn-focus-ring-width: 2px;
--btn-focus-ring-offset: 2px;
--btn-focus-ring-color: var(--color-primary-400);
}
/* Responsive Base Font */
html {
font-size: 16px;
font-size: clamp(14px, 2.5vw, 18px);
}
/* Responsive Typography */
@media (min-width: 640px) {
:root {
--heading-h1-size: var(--font-size-5xl);
}
}
@media (min-width: 1024px) {
:root {
--heading-h1-size: 4.5rem;
--heading-h2-size: var(--font-size-4xl);
}
}
/* ========================================
BASE RESET & TYPOGRAPHY
======================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-primary);
font-size: var(--text-body-size);
font-weight: var(--text-body-weight);
line-height: var(--text-body-line-height);
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html[lang="en"] body {
font-family: var(--font-family-secondary);
}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6 {
font-family: var(--font-family-secondary);
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
height: auto;
}
input, button, textarea, select {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
ul, ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text-primary);
}
h1 {
font-size: var(--heading-h1-size);
font-weight: var(--heading-h1-weight);
line-height: var(--heading-h1-line-height);
letter-spacing: var(--heading-h1-letter-spacing);
}
h2 {
font-size: var(--heading-h2-size);
font-weight: var(--heading-h2-weight);
line-height: var(--heading-h2-line-height);
letter-spacing: var(--heading-h2-letter-spacing);
}
h3 {
font-size: var(--heading-h3-size);
font-weight: var(--heading-h3-weight);
line-height: var(--heading-h3-line-height);
letter-spacing: var(--heading-h3-letter-spacing);
}
h4 {
font-size: var(--heading-h4-size);
font-weight: var(--heading-h4-weight);
line-height: var(--heading-h4-line-height);
letter-spacing: var(--heading-h4-letter-spacing);
}
p {
margin-bottom: var(--space-4);
}
p:last-child {
margin-bottom: 0;
}
/* ========================================
UTILITY CLASSES
======================================== */
.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;
}
.text-lead {
font-size: var(--text-lead-size);
font-weight: var(--text-lead-weight);
line-height: var(--text-lead-line-height);
color: var(--color-text-secondary);
}
.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
/* ========================================
LAYOUT COMPONENTS
======================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
@media (min-width: 640px) {
.container {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
}
@media (min-width: 1024px) {
.container {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
}
.section {
padding-top: var(--section-padding-y-md);
padding-bottom: var(--section-padding-y-md);
}
@media (min-width: 1024px) {
.section {
padding-top: var(--section-padding-y-lg);
padding-bottom: var(--section-padding-y-lg);
}
}
/* ========================================
HEADER COMPONENT
======================================== */
.header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border-muted);
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 var(--space-4);
}
@media (min-width: 1024px) {
.header__container {
height: 72px;
padding: 0;
}
}
.header__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
text-decoration: none;
}
.header__logo-icon {
width: 40px;
height: 40px;
background-color: var(--color-primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-0);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
.nav {
display: none;
align-items: center;
gap: var(--space-1);
}
@media (min-width: 1024px) {
.nav {
display: flex;
}
}
.nav__link {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
.nav__link:hover {
color: var(--color-text-primary);
background-color: var(--color-neutral-100);
}
.nav__link--active {
color: var(--color-primary);
background-color: var(--color-primary-50);
}
.header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-primary);
}
.mobile-menu-btn:hover {
background-color: var(--color-neutral-100);
}
@media (min-width: 1024px) {
.mobile-menu-btn {
display: none;
}
}
/* ========================================
LANGUAGE TOGGLE
======================================== */
.lang-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 36px;
padding: 0 var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-family: var(--font-family-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border: 2px solid var(--color-secondary-200);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--duration-fast) var(--easing-default);
}
.lang-toggle:hover {
background-color: var(--color-secondary-200);
border-color: var(--color-secondary-300);
}
.lang-toggle:focus-visible {
outline: 2px solid var(--color-secondary-400);
outline-offset: 2px;
}
/* ========================================
BUTTON COMPONENT
======================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-medium);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
html[lang="en"] .btn {
font-family: var(--font-family-secondary);
}
.btn--sm {
height: 32px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
}
.btn--md {
height: 40px;
padding: 0 var(--space-4);
font-size: var(--font-size-base);
}
.btn--lg {
height: 48px;
padding: 0 var(--space-6);
font-size: var(--font-size-md);
}
.btn--primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.btn--primary:hover {
background-color: var(--btn-primary-bg-hover);
}
.btn--primary:active {
background-color: var(--btn-primary-bg-active);
}
.btn--primary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
background-color: var(--btn-primary-bg-disabled);
color: var(--btn-primary-text-disabled);
cursor: not-allowed;
}
.btn--secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--secondary:hover {
background-color: var(--color-primary-50);
}
.btn--secondary:active {
background-color: var(--color-primary-100);
}
.btn--secondary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--ghost {
background-color: transparent;
color: var(--color-primary);
}
.btn--ghost:hover {
background-color: var(--color-primary-50);
}
/* ========================================
ICON SVG
======================================== */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }
/* ========================================
HERO — CONTACT
======================================== */
.hero-contact {
background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 50%, var(--color-accent-50) 100%);
text-align: center;
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
@media (min-width: 1024px) {
.hero-contact {
padding-top: var(--space-24);
padding-bottom: var(--space-24);
}
}
.hero-contact__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
}
.hero-contact__title {
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-6);
}
.hero-contact__subtitle {
max-width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-8);
}
.hero-contact__stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.hero-stat {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-3) var(--space-5);
background-color: var(--color-neutral-0);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
}
.hero-stat__number {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
line-height: var(--line-height-none);
}
.hero-stat__label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-top: var(--space-1);
}
.hero-contact__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.hero-contact__actions {
flex-direction: row;
justify-content: center;
}
}
/* ========================================
CONTACT CHANNELS SECTION
======================================== */
.channels {
background-color: var(--color-bg-primary);
}
.channels__header {
text-align: center;
margin-bottom: var(--space-12);
}
.channels__title {
margin-bottom: var(--space-4);
}
.channels__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
}
.channels__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 768px) {
.channels__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.channel-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-8) var(--space-6);
background-color: var(--color-surface-1);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-xl);
transition: all var(--duration-normal) var(--easing-default);
}
.channel-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.channel-card__icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
margin-bottom: var(--space-4);
}
.channel-card__icon--whatsapp {
background-color: var(--color-success-light);
color: var(--color-success);
}
.channel-card__icon--messenger {
background-color: var(--color-secondary-100);
color: var(--color-secondary);
}
.channel-card__icon--phone {
background-color: var(--color-accent-100);
color: var(--color-accent);
}
.channel-card__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
.channel-card__desc {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-4);
line-height: var(--line-height-relaxed);
}
.channel-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-text-link);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
.channel-card__link:hover {
color: var(--color-text-link-hover);
}
.channel-card__link:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ========================================
ASK A QUESTION SECTION
======================================== */
.ask-section {
background-color: var(--color-bg-secondary);
}
.ask-section__header {
text-align: center;
margin-bottom: var(--space-8);
}
.ask-section__title {
margin-bottom: var(--space-4);
}
.ask-section__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
}
.ask-section__privacy {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background-color: var(--color-success-light);
color: var(--color-success-dark);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-md);
margin-top: var(--space-4);
}
.ask-form {
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-1-5);
}
.form-label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
}
.form-input,
.form-select {
width: 100%;
height: 44px;
padding: 0 var(--space-3);
font-size: var(--font-size-base);
color: var(--color-text-primary);
background-color: var(--color-neutral-0);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md);
transition: border-color var(--duration-fast) var(--easing-default),
box-shadow var(--duration-fast) var(--easing-default);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-100);
}
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: var(--space-10);
}
.form-textarea {
width: 100%;
min-height: 120px;
padding: var(--space-3);
font-size: var(--font-size-base);
color: var(--color-text-primary);
background-color: var(--color-neutral-0);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md);
resize: vertical;
font-family: inherit;
line-height: var(--line-height-normal);
transition: border-color var(--duration-fast) var(--easing-default),
box-shadow var(--duration-fast) var(--easing-default);
}
.form-group--error .form-input,
.form-group--error .form-select,
.form-group--error .form-textarea {
border-color: var(--color-error);
}
.form-group--error .form-input:focus,
.form-group--error .form-select:focus,
.form-group--error .form-textarea:focus {
box-shadow: 0 0 0 3px var(--color-error-light);
}
.form-error-msg {
font-size: var(--font-size-xs);
color: var(--color-error);
display: none;
}
.form-group--error .form-error-msg {
display: block;
}
.ask-form__submit {
align-self: center;
}
.ask-form__success {
display: none;
text-align: center;
padding: var(--space-8);
background-color: var(--color-success-light);
border-radius: var(--radius-xl);
}
.ask-form__success--visible {
display: block;
}
.ask-form__success-icon {
width: 48px;
height: 48px;
margin: 0 auto var(--space-4);
color: var(--color-success);
}
.ask-form__success-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-success-dark);
margin-bottom: var(--space-2);
}
.ask-form__success-desc {
color: var(--color-success-dark);
font-size: var(--font-size-sm);
}
/* ========================================
PUBLIC Q&A SECTION
======================================== */
.qa-section {
background-color: var(--color-bg-primary);
}
.qa-section__header {
text-align: center;
margin-bottom: var(--space-8);
}
.qa-section__title {
margin-bottom: var(--space-4);
}
.qa-section__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
}
.qa-list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.qa-item {
background-color: var(--color-surface-1);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-lg);
overflow: hidden;
}
.qa-item summary {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
cursor: pointer;
font-weight: var(--font-weight-medium);
list-style: none;
transition: background-color var(--duration-fast) var(--easing-default);
}
.qa-item summary::-webkit-details-marker {
display: none;
}
.qa-item summary:hover {
background-color: var(--color-neutral-50);
}
.qa-item summary::after {
content: '';
margin-left: auto;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
transition: transform var(--duration-fast) var(--easing-default);
flex-shrink: 0;
}
.qa-item[open] summary::after {
transform: rotate(180deg);
}
.qa-item__timestamp {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-2-5);
background-color: var(--color-neutral-100);
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-md);
flex-shrink: 0;
}
.qa-item__answer {
padding: 0 var(--space-4) var(--space-4);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}
.qa-item__answer-label {
font-weight: var(--font-weight-bold);
color: var(--color-primary);
display: block;
margin-bottom: var(--space-2);
}
/* ========================================
OFFICE INFO SECTION
======================================== */
.office-section {
background-color: var(--color-bg-primary);
}
.office-section__header {
text-align: center;
margin-bottom: var(--space-12);
}
.office-section__title {
margin-bottom: var(--space-4);
}
.office-section__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
}
.office-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 768px) {
.office-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.office-card {
padding: var(--space-6);
background-color: var(--color-surface-1);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-xl);
}
.office-card__icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-primary-50);
color: var(--color-primary);
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
}
.office-card__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-4);
}
.office-card__details {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.office-card__detail {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}
.office-card__detail-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--color-text-muted);
margin-top: 2px;
}
/* ========================================
CTA SECTION
======================================== */
.cta-section {
background-color: var(--color-bg-secondary);
text-align: center;
}
.cta-section__title {
margin-bottom: var(--space-4);
}
.cta-section__desc {
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
margin-bottom: var(--space-8);
}
.cta-section__buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.cta-section__buttons {
flex-direction: row;
justify-content: center;
}
}
/* ========================================
FOOTER COMPONENT
======================================== */
.footer {
background-color: var(--color-neutral-900);
color: var(--color-text-inverse);
padding: var(--space-12) 0 var(--space-8);
}
.footer__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
.footer__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.footer__heading {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.footer__link {
display: block;
padding: var(--space-1) 0;
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
.footer__link:hover {
color: var(--color-text-inverse);
}
.footer__bottom {
padding-top: var(--space-8);
border-top: 1px solid var(--color-neutral-800);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 768px) {
.footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
.footer__copyright {
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
.footer__lite-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
/* ========================================
CHECKBOX (for lite mode)
======================================== */
.checkbox {
width: 20px;
height: 20px;
appearance: none;
background-color: transparent;
border: 2px solid var(--color-neutral-500);
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.checkbox:checked {
background-color: var(--color-primary-400);
border-color: var(--color-primary-400);
}
.checkbox:checked::after {
content: '';
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
}
/* ========================================
LITE MODE STYLES
======================================== */
.lite-mode img:not(.essential),
.lite-mode video,
.lite-mode iframe {
display: none !important;
}
.lite-mode .hero-contact {
background-image: none !important;
background: var(--color-neutral-50) !important;
}
.lite-mode * {
animation: none !important;
transition: none !important;
}
.lite-mode .channel-card:hover {
transform: none;
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ===== Styles from dhaka-8.html ===== */
/* ========================================
CSS CUSTOM PROPERTIES (Design Tokens)
======================================== */
:root {
/* Typography - Font Families */
--font-family-primary: 'Noto Sans Bengali', 'Hind Siliguri', 'Kalpurush', system-ui, sans-serif;
--font-family-secondary: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
/* Typography - Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem;
--font-size-3xl: 2.25rem;
--font-size-4xl: 3rem;
--font-size-5xl: 4rem;
/* Typography - Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Typography - Line Heights */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Typography - Letter Spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Heading Definitions */
--heading-h1-size: var(--font-size-4xl);
--heading-h1-weight: 700;
--heading-h1-line-height: 1.1;
--heading-h1-letter-spacing: -0.02em;
--heading-h2-size: var(--font-size-3xl);
--heading-h2-weight: 700;
--heading-h2-line-height: 1.2;
--heading-h2-letter-spacing: -0.01em;
--heading-h3-size: var(--font-size-2xl);
--heading-h3-weight: 600;
--heading-h3-line-height: 1.25;
--heading-h3-letter-spacing: 0;
--heading-h4-size: var(--font-size-xl);
--heading-h4-weight: 600;
--heading-h4-line-height: 1.3;
--heading-h4-letter-spacing: 0;
/* Body & Text Styles */
--text-body-size: var(--font-size-base);
--text-body-weight: 400;
--text-body-line-height: 1.6;
--text-body-letter-spacing: 0;
--text-lead-size: var(--font-size-lg);
--text-lead-weight: 400;
--text-lead-line-height: 1.7;
/* Colors - Primary (BNP Green) */
--color-primary-50: #ecfdf5;
--color-primary-100: #d1fae5;
--color-primary-200: #a7f3d0;
--color-primary-300: #6ee7b7;
--color-primary-400: #34d399;
--color-primary-500: #10b981;
--color-primary-600: #059669;
--color-primary-700: #047857;
--color-primary-800: #065f46;
--color-primary-900: #064e3b;
--color-primary: #006a4e;
/* Colors - Secondary (Trust Blue) */
--color-secondary-50: #eff6ff;
--color-secondary-100: #dbeafe;
--color-secondary-200: #bfdbfe;
--color-secondary-300: #93c5fd;
--color-secondary-400: #60a5fa;
--color-secondary-500: #3b82f6;
--color-secondary-600: #2563eb;
--color-secondary-700: #1d4ed8;
--color-secondary-800: #1e40af;
--color-secondary-900: #1e3a8a;
--color-secondary: #1e40af;
/* Colors - Accent (Optimism Yellow - WCAG adjusted) */
--color-accent-50: #fffbeb;
--color-accent-100: #fef3c7;
--color-accent-200: #fde68a;
--color-accent-300: #fcd34d;
--color-accent-400: #fbbf24;
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;
--color-accent-700: #b45309;
--color-accent-800: #92400e;
--color-accent-900: #78350f;
--color-accent: #b45309;
/* Colors - Neutrals */
--color-neutral-0: #ffffff;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-neutral-400: #a3a3a3;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-neutral-950: #0a0a0a;
/* Colors - Semantic */
--color-success-light: #dcfce7;
--color-success: #16a34a;
--color-success-dark: #15803d;
--color-error-light: #fee2e2;
--color-error: #dc2626;
--color-error-dark: #b91c1c;
--color-warning-light: #fef3c7;
--color-warning: #d97706;
--color-warning-dark: #b45309;
--color-info-light: #dbeafe;
--color-info: #2563eb;
--color-info-dark: #1d4ed8;
/* Colors - Backgrounds */
--color-bg-primary: var(--color-neutral-0);
--color-bg-secondary: var(--color-neutral-50);
--color-bg-tertiary: var(--color-neutral-100);
--color-bg-inverse: var(--color-neutral-900);
/* Colors - Surfaces */
--color-surface-1: var(--color-neutral-0);
--color-surface-2: var(--color-neutral-50);
--color-surface-3: var(--color-neutral-100);
/* Colors - Text */
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-600);
--color-text-muted: var(--color-neutral-400);
--color-text-disabled: var(--color-neutral-300);
--color-text-inverse: var(--color-neutral-0);
--color-text-inverse-secondary: var(--color-neutral-300);
--color-text-link: var(--color-primary);
--color-text-link-hover: var(--color-primary-800);
/* Colors - Borders */
--color-border-default: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
--color-border-muted: var(--color-neutral-100);
--color-border-focus: var(--color-primary);
--color-border-error: var(--color-error);
--color-border-success: var(--color-success);
/* Spacing Scale (4px increments) */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
/* Semantic Spacing */
--spacing-xs: var(--space-1);
--spacing-sm: var(--space-2);
--spacing-md: var(--space-4);
--spacing-lg: var(--space-6);
--spacing-xl: var(--space-8);
--spacing-2xl: var(--space-12);
--spacing-3xl: var(--space-16);
--spacing-4xl: var(--space-24);
/* Layout - Containers */
--container-xs: 320px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--container-max: 1200px;
/* Layout - Grid */
--grid-columns: 12;
--grid-gap: var(--space-4);
--grid-gap-sm: var(--space-2);
--grid-gap-lg: var(--space-6);
/* Section Padding */
--section-padding-y-sm: var(--space-8);
--section-padding-y-md: var(--space-12);
--section-padding-y-lg: var(--space-16);
--section-padding-y-xl: var(--space-24);
/* Borders & Shadows */
--radius-none: 0;
--radius-sm: 0.125rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Transitions */
--duration-instant: 0ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-in: cubic-bezier(0.4, 0, 1, 1);
--easing-out: cubic-bezier(0, 0, 0.2, 1);
--easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Z-Index Scale */
--z-deep: -999;
--z-default: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-overlay: 40;
--z-modal: 50;
--z-popover: 60;
--z-tooltip: 70;
--z-toast: 80;
--z-top: 999;
/* Icons */
--icon-xs: 12px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
--icon-2xl: 48px;
/* Aspect Ratios */
--aspect-square: 1 / 1;
--aspect-video: 16 / 9;
--aspect-photo: 4 / 3;
--aspect-portrait: 3 / 4;
--aspect-wide: 21 / 9;
/* Button Tokens */
--btn-primary-bg: var(--color-primary);
--btn-primary-bg-hover: var(--color-primary-800);
--btn-primary-bg-active: var(--color-primary-900);
--btn-primary-bg-disabled: var(--color-neutral-300);
--btn-primary-text: var(--color-neutral-0);
--btn-primary-text-disabled: var(--color-neutral-500);
--btn-focus-ring-width: 2px;
--btn-focus-ring-offset: 2px;
--btn-focus-ring-color: var(--color-primary-400);
}
/* Responsive Base Font */
html {
font-size: 16px;
font-size: clamp(14px, 2.5vw, 18px);
}
/* Responsive Typography */
@media (min-width: 640px) {
:root {
--heading-h1-size: var(--font-size-5xl);
}
}
@media (min-width: 1024px) {
:root {
--heading-h1-size: 4.5rem;
--heading-h2-size: var(--font-size-4xl);
}
}
/* ========================================
BASE RESET & TYPOGRAPHY
======================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-primary);
font-size: var(--text-body-size);
font-weight: var(--text-body-weight);
line-height: var(--text-body-line-height);
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* English language uses secondary font */
html[lang="en"] body {
font-family: var(--font-family-secondary);
}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6 {
font-family: var(--font-family-secondary);
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text-primary);
}
h1 {
font-size: var(--heading-h1-size);
font-weight: var(--heading-h1-weight);
line-height: var(--heading-h1-line-height);
letter-spacing: var(--heading-h1-letter-spacing);
}
h2 {
font-size: var(--heading-h2-size);
font-weight: var(--heading-h2-weight);
line-height: var(--heading-h2-line-height);
letter-spacing: var(--heading-h2-letter-spacing);
}
h3 {
font-size: var(--heading-h3-size);
font-weight: var(--heading-h3-weight);
line-height: var(--heading-h3-line-height);
letter-spacing: var(--heading-h3-letter-spacing);
}
h4 {
font-size: var(--heading-h4-size);
font-weight: var(--heading-h4-weight);
line-height: var(--heading-h4-line-height);
letter-spacing: var(--heading-h4-letter-spacing);
}
p {
margin-bottom: var(--space-4);
}
p:last-child {
margin-bottom: 0;
}
/* ========================================
UTILITY CLASSES
======================================== */
.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;
}
.text-lead {
font-size: var(--text-lead-size);
font-weight: var(--text-lead-weight);
line-height: var(--text-lead-line-height);
color: var(--color-text-secondary);
}
.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-none { display: none; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-inverse { background-color: var(--color-bg-inverse); }
.text-inverse { color: var(--color-text-inverse); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
/* ========================================
LAYOUT COMPONENTS
======================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
@media (min-width: 640px) {
.container {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
}
@media (min-width: 1024px) {
.container {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
}
.section {
padding-top: var(--section-padding-y-md);
padding-bottom: var(--section-padding-y-md);
}
@media (min-width: 1024px) {
.section {
padding-top: var(--section-padding-y-lg);
padding-bottom: var(--section-padding-y-lg);
}
}
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gap);
}
.col-12 { grid-column: span 12; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
@media (max-width: 767px) {
.col-md-4,
.col-md-6,
.col-md-3 {
grid-column: span 12;
}
}
@media (min-width: 768px) {
.col-md-4 { grid-column: span 4; }
.col-md-6 { grid-column: span 6; }
.col-md-3 { grid-column: span 3; }
}
/* ========================================
HEADER COMPONENT
======================================== */
.header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border-muted);
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 var(--space-4);
}
@media (min-width: 1024px) {
.header__container {
height: 72px;
padding: 0;
}
}
.header__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
text-decoration: none;
}
.header__logo-icon {
width: 40px;
height: 40px;
background-color: var(--color-primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-0);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
.nav {
display: none;
align-items: center;
gap: var(--space-1);
}
@media (min-width: 1024px) {
.nav {
display: flex;
}
}
.nav__link {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
.nav__link:hover {
color: var(--color-text-primary);
background-color: var(--color-neutral-100);
}
.nav__link--active {
color: var(--color-primary);
background-color: var(--color-primary-50);
}
.header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-primary);
}
.mobile-menu-btn:hover {
background-color: var(--color-neutral-100);
}
@media (min-width: 1024px) {
.mobile-menu-btn {
display: none;
}
}
/* ========================================
LANGUAGE TOGGLE
======================================== */
.lang-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 36px;
padding: 0 var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-family: var(--font-family-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border: 2px solid var(--color-secondary-200);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--duration-fast) var(--easing-default);
}
.lang-toggle:hover {
background-color: var(--color-secondary-200);
border-color: var(--color-secondary-300);
}
.lang-toggle:focus-visible {
outline: 2px solid var(--color-secondary-400);
outline-offset: 2px;
}
/* ========================================
BUTTON COMPONENT
======================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-medium);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
html[lang="en"] .btn {
font-family: var(--font-family-secondary);
}
.btn--sm {
height: 32px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
}
.btn--md {
height: 40px;
padding: 0 var(--space-4);
font-size: var(--font-size-base);
}
.btn--lg {
height: 48px;
padding: 0 var(--space-6);
font-size: var(--font-size-md);
}
.btn--primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.btn--primary:hover {
background-color: var(--btn-primary-bg-hover);
}
.btn--primary:active {
background-color: var(--btn-primary-bg-active);
}
.btn--primary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
background-color: var(--btn-primary-bg-disabled);
color: var(--btn-primary-text-disabled);
cursor: not-allowed;
}
.btn--secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--secondary:hover {
background-color: var(--color-primary-50);
}
.btn--secondary:active {
background-color: var(--color-primary-100);
}
.btn--secondary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--ghost {
background-color: transparent;
color: var(--color-primary);
}
.btn--ghost:hover {
background-color: var(--color-primary-50);
}
.btn--inverse {
background-color: var(--color-neutral-0);
color: var(--color-neutral-900);
}
.btn--inverse:hover {
background-color: var(--color-neutral-100);
}
/* ========================================
CARD COMPONENT
======================================== */
.card {
background-color: var(--color-surface-1);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.card__header {
padding: var(--space-4) var(--space-4) 0;
}
.card__body {
padding: var(--space-4);
}
.card__footer {
padding: 0 var(--space-4) var(--space-4);
}
.card--elevated {
box-shadow: var(--shadow-md);
}
.card--interactive {
cursor: pointer;
transition: box-shadow var(--duration-fast) var(--easing-default),
transform var(--duration-fast) var(--easing-default);
}
.card--interactive:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.card--interactive:focus-within {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
/* ========================================
LINK COMPONENT
======================================== */
.link {
color: var(--color-text-link);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
transition: color var(--duration-fast) var(--easing-default);
}
.link:hover {
color: var(--color-text-link-hover);
}
.link:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ========================================
HERO DHAKA-8 SECTION
======================================== */
.hero-dhaka8 {
background: linear-gradient(135deg, var(--color-secondary-50) 0%, var(--color-primary-50) 100%);
text-align: center;
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
@media (min-width: 1024px) {
.hero-dhaka8 {
padding-top: var(--space-24);
padding-bottom: var(--space-24);
}
}
.hero-dhaka8__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
}
.hero-dhaka8__title {
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-6);
}
.hero-dhaka8__subtitle {
max-width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-8);
}
.hero-dhaka8__areas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
}
.area-tag {
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-4);
background-color: var(--color-neutral-0);
color: var(--color-secondary);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-full);
border: 2px solid var(--color-secondary-200);
box-shadow: var(--shadow-sm);
}
.area-tag--primary {
background-color: var(--color-primary);
color: var(--color-neutral-0);
border-color: var(--color-primary);
}
/* ========================================
AREA DEFINITION SECTION
======================================== */
.area-definition {
background-color: var(--color-bg-primary);
}
.area-definition__header {
text-align: center;
margin-bottom: var(--space-12);
}
.area-definition__title {
margin-bottom: var(--space-4);
}
.area-definition__subtitle {
max-width: 700px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
}
.area-definition__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 768px) {
.area-definition__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.area-card {
text-align: center;
padding: var(--space-6);
background-color: var(--color-surface-2);
border-radius: var(--radius-xl);
border: 1px solid var(--color-border-muted);
}
.area-card__icon {
width: 64px;
height: 64px;
margin: 0 auto var(--space-4);
background-color: var(--color-secondary-100);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-secondary);
}
.area-card__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-2);
color: var(--color-secondary);
}
.area-card__wards {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-4);
}
.area-card__areas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2);
}
.area-card__tag {
display: inline-block;
padding: var(--space-1) var(--space-2);
background-color: var(--color-neutral-0);
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-default);
}
/* ========================================
DEMOGRAPHICS SECTION
======================================== */
.demographics {
background-color: var(--color-secondary);
color: var(--color-text-inverse);
}
.demographics__header {
text-align: center;
margin-bottom: var(--space-12);
}
.demographics__title {
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.demographics__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
opacity: 0.9;
}
.demographics__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
@media (min-width: 768px) {
.demographics__grid {
grid-template-columns: repeat(5, 1fr);
}
}
.demo-stat {
text-align: center;
}
.demo-stat__number {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
line-height: 1;
margin-bottom: var(--space-2);
}
@media (min-width: 768px) {
.demo-stat__number {
font-size: var(--font-size-3xl);
}
}
.demo-stat__label {
font-size: var(--font-size-sm);
opacity: 0.9;
}
.demo-stat__source {
font-size: var(--font-size-xs);
opacity: 0.7;
margin-top: var(--space-1);
}
/* ========================================
WARDS SECTION
======================================== */
.wards-section {
background-color: var(--color-bg-secondary);
}
.wards-section__header {
text-align: center;
margin-bottom: var(--space-12);
}
.wards-section__title {
margin-bottom: var(--space-4);
}
.wards-section__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
}
.wards-section__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
@media (min-width: 768px) {
.wards-section__grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.wards-section__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.ward-card {
background-color: var(--color-surface-1);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-lg);
padding: var(--space-4);
text-align: center;
transition: all var(--duration-fast) var(--easing-default);
}
.ward-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.ward-card__number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background-color: var(--color-primary-100);
color: var(--color-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
border-radius: var(--radius-full);
margin-bottom: var(--space-3);
}
.ward-card__name {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
margin-bottom: var(--space-1);
}
.ward-card__area {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
/* ========================================
KEY ISSUES SECTION
======================================== */
.issues-section {
background-color: var(--color-bg-primary);
}
.issues-section__header {
text-align: center;
margin-bottom: var(--space-12);
}
.issues-section__title {
margin-bottom: var(--space-4);
}
.issues-section__subtitle {
max-width: 700px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
}
.issues-section__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 768px) {
.issues-section__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.issues-section__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.issue-card {
display: flex;
gap: var(--space-4);
padding: var(--space-5);
background-color: var(--color-surface-2);
border-radius: var(--radius-xl);
border: 1px solid var(--color-border-muted);
transition: all var(--duration-fast) var(--easing-default);
}
.issue-card:hover {
border-color: var(--color-accent);
box-shadow: var(--shadow-md);
}
.issue-card__icon {
flex-shrink: 0;
width: 48px;
height: 48px;
background-color: var(--color-accent-100);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
}
.issue-card__content {
flex: 1;
}
.issue-card__stat {
display: inline-block;
padding: var(--space-0-5) var(--space-2);
background-color: var(--color-accent-100);
color: var(--color-accent);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-md);
margin-bottom: var(--space-2);
}
.issue-card__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
.issue-card__desc {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin: 0;
}
/* ========================================
INTAKE FORM SECTION
======================================== */
.intake-section {
background-color: var(--color-primary);
color: var(--color-text-inverse);
}
.intake-section__header {
text-align: center;
margin-bottom: var(--space-12);
}
.intake-section__title {
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.intake-section__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
opacity: 0.9;
}
.intake-form {
max-width: 600px;
margin: 0 auto;
padding: var(--space-8);
background-color: var(--color-neutral-0);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
}
.intake-form__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
@media (min-width: 640px) {
.intake-form__grid {
grid-template-columns: repeat(2, 1fr);
}
}
.intake-form__full {
grid-column: 1 / -1;
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.form-label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
}
.form-label--required::after {
content: ' *';
color: var(--color-error);
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-base);
color: var(--color-text-primary);
background-color: var(--color-neutral-0);
border: 2px solid var(--color-border-default);
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
.form-input:hover,
.form-select:hover,
.form-textarea:hover {
border-color: var(--color-border-strong);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-100);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--color-text-muted);
}
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%23737373'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
padding-right: var(--space-10);
}
.form-textarea {
min-height: 120px;
resize: vertical;
}
.form-error {
font-size: var(--font-size-sm);
color: var(--color-error);
display: none;
}
.form-group--error .form-input,
.form-group--error .form-select,
.form-group--error .form-textarea {
border-color: var(--color-error);
}
.form-group--error .form-error {
display: block;
}
.intake-form__submit {
margin-top: var(--space-4);
}
.intake-form__success {
display: none;
text-align: center;
padding: var(--space-8);
}
.intake-form__success.is-visible {
display: block;
}
.intake-form__success-icon {
width: 64px;
height: 64px;
margin: 0 auto var(--space-4);
background-color: var(--color-success-light);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-success);
}
.intake-form__success-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
margin-bottom: var(--space-2);
}
.intake-form__success-text {
color: var(--color-text-secondary);
}
.intake-form__fields.is-hidden {
display: none;
}
/* ========================================
CTA SECTION
======================================== */
.cta-section {
background-color: var(--color-bg-secondary);
text-align: center;
}
.cta-section__title {
margin-bottom: var(--space-4);
}
.cta-section__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-8);
color: var(--color-text-secondary);
}
.cta-section__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.cta-section__actions {
flex-direction: row;
justify-content: center;
}
}
/* ========================================
FOOTER COMPONENT
======================================== */
.footer {
background-color: var(--color-neutral-900);
color: var(--color-text-inverse);
padding: var(--space-12) 0 var(--space-8);
}
.footer__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
.footer__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.footer__heading {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.footer__link {
display: block;
padding: var(--space-1) 0;
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
.footer__link:hover {
color: var(--color-text-inverse);
}
.footer__bottom {
padding-top: var(--space-8);
border-top: 1px solid var(--color-neutral-800);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 768px) {
.footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
.footer__copyright {
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
.footer__lite-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
/* ========================================
CHECKBOX (for lite mode)
======================================== */
.checkbox {
width: 20px;
height: 20px;
appearance: none;
background-color: transparent;
border: 2px solid var(--color-neutral-500);
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.checkbox:checked {
background-color: var(--color-primary-400);
border-color: var(--color-primary-400);
}
.checkbox:checked::after {
content: '';
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
}
/* ========================================
LITE MODE STYLES
======================================== */
.lite-mode img:not(.essential),
.lite-mode video,
.lite-mode iframe {
display: none !important;
}
.lite-mode .hero-dhaka8 {
background: var(--color-bg-secondary) !important;
}
.lite-mode * {
animation: none !important;
transition: none !important;
}
.lite-mode .card--interactive:hover,
.lite-mode .ward-card:hover,
.lite-mode .issue-card:hover {
transform: none;
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ========================================
ICON SVG
======================================== */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }
.icon--2xl { width: var(--icon-2xl); height: var(--icon-2xl); }
/* ===== Styles from events.html ===== */
/* ========================================
CSS CUSTOM PROPERTIES (Design Tokens)
======================================== */
:root {
/* Typography - Font Families */
--font-family-primary: 'Noto Sans Bengali', 'Hind Siliguri', 'Kalpurush', system-ui, sans-serif;
--font-family-secondary: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
/* Typography - Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem;
--font-size-3xl: 2.25rem;
--font-size-4xl: 3rem;
--font-size-5xl: 4rem;
/* Typography - Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Typography - Line Heights */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Typography - Letter Spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Heading Definitions */
--heading-h1-size: var(--font-size-4xl);
--heading-h1-weight: 700;
--heading-h1-line-height: 1.1;
--heading-h1-letter-spacing: -0.02em;
--heading-h2-size: var(--font-size-3xl);
--heading-h2-weight: 700;
--heading-h2-line-height: 1.2;
--heading-h2-letter-spacing: -0.01em;
--heading-h3-size: var(--font-size-2xl);
--heading-h3-weight: 600;
--heading-h3-line-height: 1.25;
--heading-h3-letter-spacing: 0;
--heading-h4-size: var(--font-size-xl);
--heading-h4-weight: 600;
--heading-h4-line-height: 1.3;
--heading-h4-letter-spacing: 0;
/* Body & Text Styles */
--text-body-size: var(--font-size-base);
--text-body-weight: 400;
--text-body-line-height: 1.6;
--text-body-letter-spacing: 0;
--text-lead-size: var(--font-size-lg);
--text-lead-weight: 400;
--text-lead-line-height: 1.7;
/* Colors - Primary (BNP Green) */
--color-primary-50: #ecfdf5;
--color-primary-100: #d1fae5;
--color-primary-200: #a7f3d0;
--color-primary-300: #6ee7b7;
--color-primary-400: #34d399;
--color-primary-500: #10b981;
--color-primary-600: #059669;
--color-primary-700: #047857;
--color-primary-800: #065f46;
--color-primary-900: #064e3b;
--color-primary: #006a4e;
/* Colors - Secondary (Trust Blue) */
--color-secondary-50: #eff6ff;
--color-secondary-100: #dbeafe;
--color-secondary-200: #bfdbfe;
--color-secondary-300: #93c5fd;
--color-secondary-400: #60a5fa;
--color-secondary-500: #3b82f6;
--color-secondary-600: #2563eb;
--color-secondary-700: #1d4ed8;
--color-secondary-800: #1e40af;
--color-secondary-900: #1e3a8a;
--color-secondary: #1e40af;
/* Colors - Accent (Optimism Yellow - WCAG adjusted) */
--color-accent-50: #fffbeb;
--color-accent-100: #fef3c7;
--color-accent-200: #fde68a;
--color-accent-300: #fcd34d;
--color-accent-400: #fbbf24;
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;
--color-accent-700: #b45309;
--color-accent-800: #92400e;
--color-accent-900: #78350f;
--color-accent: #b45309;
/* Colors - Neutrals */
--color-neutral-0: #ffffff;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-neutral-400: #a3a3a3;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-neutral-950: #0a0a0a;
/* Colors - Semantic */
--color-success-light: #dcfce7;
--color-success: #16a34a;
--color-success-dark: #15803d;
--color-error-light: #fee2e2;
--color-error: #dc2626;
--color-error-dark: #b91c1c;
--color-warning-light: #fef3c7;
--color-warning: #d97706;
--color-warning-dark: #b45309;
--color-info-light: #dbeafe;
--color-info: #2563eb;
--color-info-dark: #1d4ed8;
/* Colors - Backgrounds */
--color-bg-primary: var(--color-neutral-0);
--color-bg-secondary: var(--color-neutral-50);
--color-bg-tertiary: var(--color-neutral-100);
--color-bg-inverse: var(--color-neutral-900);
/* Colors - Surfaces */
--color-surface-1: var(--color-neutral-0);
--color-surface-2: var(--color-neutral-50);
--color-surface-3: var(--color-neutral-100);
/* Colors - Text */
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-600);
--color-text-muted: var(--color-neutral-400);
--color-text-disabled: var(--color-neutral-300);
--color-text-inverse: var(--color-neutral-0);
--color-text-inverse-secondary: var(--color-neutral-300);
--color-text-link: var(--color-primary);
--color-text-link-hover: var(--color-primary-800);
/* Colors - Borders */
--color-border-default: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
--color-border-muted: var(--color-neutral-100);
--color-border-focus: var(--color-primary);
--color-border-error: var(--color-error);
--color-border-success: var(--color-success);
/* Spacing Scale (4px increments) */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
/* Semantic Spacing */
--spacing-xs: var(--space-1);
--spacing-sm: var(--space-2);
--spacing-md: var(--space-4);
--spacing-lg: var(--space-6);
--spacing-xl: var(--space-8);
--spacing-2xl: var(--space-12);
--spacing-3xl: var(--space-16);
--spacing-4xl: var(--space-24);
/* Layout - Containers */
--container-xs: 320px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--container-max: 1200px;
/* Layout - Grid */
--grid-columns: 12;
--grid-gap: var(--space-4);
--grid-gap-sm: var(--space-2);
--grid-gap-lg: var(--space-6);
/* Section Padding */
--section-padding-y-sm: var(--space-8);
--section-padding-y-md: var(--space-12);
--section-padding-y-lg: var(--space-16);
--section-padding-y-xl: var(--space-24);
/* Borders & Shadows */
--radius-none: 0;
--radius-sm: 0.125rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Transitions */
--duration-instant: 0ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-in: cubic-bezier(0.4, 0, 1, 1);
--easing-out: cubic-bezier(0, 0, 0.2, 1);
--easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Z-Index Scale */
--z-deep: -999;
--z-default: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-overlay: 40;
--z-modal: 50;
--z-popover: 60;
--z-tooltip: 70;
--z-toast: 80;
--z-top: 999;
/* Icons */
--icon-xs: 12px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
--icon-2xl: 48px;
/* Aspect Ratios */
--aspect-square: 1 / 1;
--aspect-video: 16 / 9;
--aspect-photo: 4 / 3;
--aspect-portrait: 3 / 4;
--aspect-wide: 21 / 9;
/* Button Tokens */
--btn-primary-bg: var(--color-primary);
--btn-primary-bg-hover: var(--color-primary-800);
--btn-primary-bg-active: var(--color-primary-900);
--btn-primary-bg-disabled: var(--color-neutral-300);
--btn-primary-text: var(--color-neutral-0);
--btn-primary-text-disabled: var(--color-neutral-500);
--btn-focus-ring-width: 2px;
--btn-focus-ring-offset: 2px;
--btn-focus-ring-color: var(--color-primary-400);
}
/* Responsive Base Font */
html {
font-size: 16px;
font-size: clamp(14px, 2.5vw, 18px);
}
/* Responsive Typography */
@media (min-width: 640px) {
:root {
--heading-h1-size: var(--font-size-5xl);
}
}
@media (min-width: 1024px) {
:root {
--heading-h1-size: 4.5rem;
--heading-h2-size: var(--font-size-4xl);
}
}
/* ========================================
BASE RESET & TYPOGRAPHY
======================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-primary);
font-size: var(--text-body-size);
font-weight: var(--text-body-weight);
line-height: var(--text-body-line-height);
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html[lang="en"] body {
font-family: var(--font-family-secondary);
}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6 {
font-family: var(--font-family-secondary);
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
height: auto;
}
input, button, textarea, select {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
ul, ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text-primary);
}
h1 {
font-size: var(--heading-h1-size);
font-weight: var(--heading-h1-weight);
line-height: var(--heading-h1-line-height);
letter-spacing: var(--heading-h1-letter-spacing);
}
h2 {
font-size: var(--heading-h2-size);
font-weight: var(--heading-h2-weight);
line-height: var(--heading-h2-line-height);
letter-spacing: var(--heading-h2-letter-spacing);
}
h3 {
font-size: var(--heading-h3-size);
font-weight: var(--heading-h3-weight);
line-height: var(--heading-h3-line-height);
letter-spacing: var(--heading-h3-letter-spacing);
}
h4 {
font-size: var(--heading-h4-size);
font-weight: var(--heading-h4-weight);
line-height: var(--heading-h4-line-height);
letter-spacing: var(--heading-h4-letter-spacing);
}
p {
margin-bottom: var(--space-4);
}
p:last-child {
margin-bottom: 0;
}
/* ========================================
UTILITY CLASSES
======================================== */
.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;
}
.text-lead {
font-size: var(--text-lead-size);
font-weight: var(--text-lead-weight);
line-height: var(--text-lead-line-height);
color: var(--color-text-secondary);
}
.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
/* ========================================
LAYOUT COMPONENTS
======================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
@media (min-width: 640px) {
.container {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
}
@media (min-width: 1024px) {
.container {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
}
.section {
padding-top: var(--section-padding-y-md);
padding-bottom: var(--section-padding-y-md);
}
@media (min-width: 1024px) {
.section {
padding-top: var(--section-padding-y-lg);
padding-bottom: var(--section-padding-y-lg);
}
}
/* ========================================
HEADER COMPONENT
======================================== */
.header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border-muted);
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 var(--space-4);
}
@media (min-width: 1024px) {
.header__container {
height: 72px;
padding: 0;
}
}
.header__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
text-decoration: none;
}
.header__logo-icon {
width: 40px;
height: 40px;
background-color: var(--color-primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-0);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
.nav {
display: none;
align-items: center;
gap: var(--space-1);
}
@media (min-width: 1024px) {
.nav {
display: flex;
}
}
.nav__link {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
.nav__link:hover {
color: var(--color-text-primary);
background-color: var(--color-neutral-100);
}
.nav__link--active {
color: var(--color-primary);
background-color: var(--color-primary-50);
}
.header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-primary);
}
.mobile-menu-btn:hover {
background-color: var(--color-neutral-100);
}
@media (min-width: 1024px) {
.mobile-menu-btn {
display: none;
}
}
/* ========================================
LANGUAGE TOGGLE
======================================== */
.lang-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 36px;
padding: 0 var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-family: var(--font-family-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border: 2px solid var(--color-secondary-200);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--duration-fast) var(--easing-default);
}
.lang-toggle:hover {
background-color: var(--color-secondary-200);
border-color: var(--color-secondary-300);
}
.lang-toggle:focus-visible {
outline: 2px solid var(--color-secondary-400);
outline-offset: 2px;
}
/* ========================================
BUTTON COMPONENT
======================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-medium);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
html[lang="en"] .btn {
font-family: var(--font-family-secondary);
}
.btn--sm {
height: 32px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
}
.btn--md {
height: 40px;
padding: 0 var(--space-4);
font-size: var(--font-size-base);
}
.btn--lg {
height: 48px;
padding: 0 var(--space-6);
font-size: var(--font-size-md);
}
.btn--primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.btn--primary:hover {
background-color: var(--btn-primary-bg-hover);
}
.btn--primary:active {
background-color: var(--btn-primary-bg-active);
}
.btn--primary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
background-color: var(--btn-primary-bg-disabled);
color: var(--btn-primary-text-disabled);
cursor: not-allowed;
}
.btn--secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--secondary:hover {
background-color: var(--color-primary-50);
}
.btn--secondary:active {
background-color: var(--color-primary-100);
}
.btn--secondary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--ghost {
background-color: transparent;
color: var(--color-primary);
}
.btn--ghost:hover {
background-color: var(--color-primary-50);
}
/* ========================================
ICON SVG
======================================== */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }
/* ========================================
HERO — EVENTS
======================================== */
.hero-events {
background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 50%, var(--color-accent-50) 100%);
text-align: center;
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
@media (min-width: 1024px) {
.hero-events {
padding-top: var(--space-24);
padding-bottom: var(--space-24);
}
}
.hero-events__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
}
.hero-events__title {
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-6);
}
.hero-events__subtitle {
max-width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-8);
}
.hero-events__stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.hero-stat {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-3) var(--space-5);
background-color: var(--color-neutral-0);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
}
.hero-stat__number {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
line-height: var(--line-height-none);
}
.hero-stat__label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-top: var(--space-1);
}
.hero-events__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.hero-events__actions {
flex-direction: row;
justify-content: center;
}
}
/* ========================================
UPCOMING EVENTS SECTION
======================================== */
.upcoming-events {
background-color: var(--color-bg-primary);
}
.upcoming-events__header {
text-align: center;
margin-bottom: var(--space-12);
}
.upcoming-events__title {
margin-bottom: var(--space-4);
}
.upcoming-events__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
}
.upcoming-events__notice {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background-color: var(--color-info-light);
color: var(--color-info);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-md);
margin-top: var(--space-4);
}
.upcoming-events__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 768px) {
.upcoming-events__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.upcoming-events__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ========================================
EVENT CARD
======================================== */
.event-card {
background-color: var(--color-surface-1);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow var(--duration-fast) var(--easing-default),
transform var(--duration-fast) var(--easing-default);
}
.event-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.event-card__top {
display: flex;
align-items: stretch;
}
.event-card__date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 72px;
padding: var(--space-3);
background-color: var(--color-primary);
color: var(--color-text-inverse);
}
.event-card__date-day {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-none);
}
.event-card__date-month {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
}
.event-card__date-year {
font-size: var(--font-size-xs);
opacity: 0.8;
}
.event-card__badge-wrap {
display: flex;
align-items: center;
padding: var(--space-3) var(--space-4);
flex: 1;
}
.event-card__badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2-5);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.event-card__badge--rally {
background-color: var(--color-primary-100);
color: var(--color-primary);
}
.event-card__badge--dialogue {
background-color: var(--color-secondary-100);
color: var(--color-secondary);
}
.event-card__badge--meeting {
background-color: var(--color-accent-100);
color: var(--color-accent);
}
.event-card__badge--assembly {
background-color: var(--color-error-light);
color: var(--color-error-dark);
}
.event-card__badge--meetup {
background-color: var(--color-success-light);
color: var(--color-success-dark);
}
.event-card__body {
padding: var(--space-4);
}
.event-card__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-3);
line-height: var(--line-height-snug);
}
.event-card__meta {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.event-card__meta-item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.event-card__meta-icon {
flex-shrink: 0;
width: var(--icon-sm);
height: var(--icon-sm);
color: var(--color-text-muted);
}
.event-card__desc {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-4);
line-height: var(--line-height-relaxed);
}
.event-card__rsvp-link {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-primary);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
transition: color var(--duration-fast) var(--easing-default);
}
.event-card__rsvp-link:hover {
color: var(--color-primary-800);
text-decoration: underline;
}
/* ========================================
PAST EVENTS SECTION
======================================== */
.past-events {
background-color: var(--color-bg-secondary);
}
.past-events__header {
text-align: center;
margin-bottom: var(--space-8);
}
.past-events__title {
margin-bottom: var(--space-4);
}
.past-events__list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.past-event {
background-color: var(--color-surface-1);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-lg);
overflow: hidden;
}
.past-event summary {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
cursor: pointer;
font-weight: var(--font-weight-medium);
list-style: none;
transition: background-color var(--duration-fast) var(--easing-default);
}
.past-event summary::-webkit-details-marker {
display: none;
}
.past-event summary:hover {
background-color: var(--color-neutral-50);
}
.past-event summary::after {
content: '';
margin-left: auto;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
transition: transform var(--duration-fast) var(--easing-default);
flex-shrink: 0;
}
.past-event[open] summary::after {
transform: rotate(180deg);
}
.past-event__date-badge {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-2-5);
background-color: var(--color-neutral-100);
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-md);
flex-shrink: 0;
}
.past-event__content {
padding: 0 var(--space-4) var(--space-4);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}
.past-event__attendance {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin-top: var(--space-2);
padding: var(--space-1) var(--space-2);
background-color: var(--color-success-light);
color: var(--color-success-dark);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-md);
}
/* ========================================
RSVP FORM SECTION
======================================== */
.rsvp-section {
background-color: var(--color-bg-primary);
}
.rsvp-section__header {
text-align: center;
margin-bottom: var(--space-8);
}
.rsvp-section__title {
margin-bottom: var(--space-4);
}
.rsvp-section__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
}
.rsvp-section__privacy {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background-color: var(--color-success-light);
color: var(--color-success-dark);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-md);
margin-top: var(--space-4);
}
.rsvp-form {
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-1-5);
}
.form-label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
}
.form-input,
.form-select {
width: 100%;
height: 44px;
padding: 0 var(--space-3);
font-size: var(--font-size-base);
color: var(--color-text-primary);
background-color: var(--color-neutral-0);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md);
transition: border-color var(--duration-fast) var(--easing-default),
box-shadow var(--duration-fast) var(--easing-default);
}
.form-input:focus,
.form-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-100);
}
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: var(--space-10);
}
.form-group--error .form-input,
.form-group--error .form-select {
border-color: var(--color-error);
}
.form-group--error .form-input:focus,
.form-group--error .form-select:focus {
box-shadow: 0 0 0 3px var(--color-error-light);
}
.form-error-msg {
font-size: var(--font-size-xs);
color: var(--color-error);
display: none;
}
.form-group--error .form-error-msg {
display: block;
}
.rsvp-form__submit {
align-self: center;
}
.rsvp-form__success {
display: none;
text-align: center;
padding: var(--space-8);
background-color: var(--color-success-light);
border-radius: var(--radius-xl);
}
.rsvp-form__success--visible {
display: block;
}
.rsvp-form__success-icon {
width: 48px;
height: 48px;
margin: 0 auto var(--space-4);
color: var(--color-success);
}
.rsvp-form__success-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-success-dark);
margin-bottom: var(--space-2);
}
.rsvp-form__success-desc {
color: var(--color-success-dark);
font-size: var(--font-size-sm);
}
/* ========================================
RULES OF ENGAGEMENT SECTION
======================================== */
.rules-section {
background-color: var(--color-primary);
color: var(--color-text-inverse);
}
.rules-section__header {
text-align: center;
margin-bottom: var(--space-12);
}
.rules-section__title {
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.rules-section__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
opacity: 0.9;
}
.rules-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
max-width: 900px;
margin: 0 auto;
}
@media (min-width: 768px) {
.rules-list {
grid-template-columns: repeat(2, 1fr);
}
}
.rules-item {
display: flex;
gap: var(--space-4);
padding: var(--space-5);
background-color: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.rules-item__icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.15);
border-radius: var(--radius-md);
color: var(--color-neutral-0);
}
.rules-item__text {
flex: 1;
}
.rules-item__title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-neutral-0);
margin-bottom: var(--space-1);
}
.rules-item__desc {
font-size: var(--font-size-sm);
opacity: 0.85;
line-height: var(--line-height-relaxed);
}
/* ========================================
CTA SECTION
======================================== */
.cta-section {
background-color: var(--color-bg-secondary);
text-align: center;
}
.cta-section__title {
margin-bottom: var(--space-4);
}
.cta-section__desc {
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
margin-bottom: var(--space-8);
}
.cta-section__buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.cta-section__buttons {
flex-direction: row;
justify-content: center;
}
}
/* ========================================
FOOTER COMPONENT
======================================== */
.footer {
background-color: var(--color-neutral-900);
color: var(--color-text-inverse);
padding: var(--space-12) 0 var(--space-8);
}
.footer__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
.footer__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.footer__heading {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.footer__link {
display: block;
padding: var(--space-1) 0;
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
.footer__link:hover {
color: var(--color-text-inverse);
}
.footer__bottom {
padding-top: var(--space-8);
border-top: 1px solid var(--color-neutral-800);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 768px) {
.footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
.footer__copyright {
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
.footer__lite-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
/* ========================================
CHECKBOX (for lite mode)
======================================== */
.checkbox {
width: 20px;
height: 20px;
appearance: none;
background-color: transparent;
border: 2px solid var(--color-neutral-500);
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.checkbox:checked {
background-color: var(--color-primary-400);
border-color: var(--color-primary-400);
}
.checkbox:checked::after {
content: '';
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
}
/* ========================================
LITE MODE STYLES
======================================== */
.lite-mode img:not(.essential),
.lite-mode video,
.lite-mode iframe {
display: none !important;
}
.lite-mode .hero-events {
background-image: none !important;
background: var(--color-neutral-50) !important;
}
.lite-mode * {
animation: none !important;
transition: none !important;
}
.lite-mode .event-card:hover {
transform: none;
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ===== Styles from issues.html ===== */
/* ========================================
CSS CUSTOM PROPERTIES (Design Tokens)
======================================== */
:root {
/* Typography - Font Families */
--font-family-primary: 'Noto Sans Bengali', 'Hind Siliguri', 'Kalpurush', system-ui, sans-serif;
--font-family-secondary: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
/* Typography - Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem;
--font-size-3xl: 2.25rem;
--font-size-4xl: 3rem;
--font-size-5xl: 4rem;
/* Typography - Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Typography - Line Heights */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Typography - Letter Spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Heading Definitions */
--heading-h1-size: var(--font-size-4xl);
--heading-h1-weight: 700;
--heading-h1-line-height: 1.1;
--heading-h1-letter-spacing: -0.02em;
--heading-h2-size: var(--font-size-3xl);
--heading-h2-weight: 700;
--heading-h2-line-height: 1.2;
--heading-h2-letter-spacing: -0.01em;
--heading-h3-size: var(--font-size-2xl);
--heading-h3-weight: 600;
--heading-h3-line-height: 1.25;
--heading-h3-letter-spacing: 0;
--heading-h4-size: var(--font-size-xl);
--heading-h4-weight: 600;
--heading-h4-line-height: 1.3;
--heading-h4-letter-spacing: 0;
/* Body & Text Styles */
--text-body-size: var(--font-size-base);
--text-body-weight: 400;
--text-body-line-height: 1.6;
--text-body-letter-spacing: 0;
--text-lead-size: var(--font-size-lg);
--text-lead-weight: 400;
--text-lead-line-height: 1.7;
/* Colors - Primary (BNP Green) */
--color-primary-50: #ecfdf5;
--color-primary-100: #d1fae5;
--color-primary-200: #a7f3d0;
--color-primary-300: #6ee7b7;
--color-primary-400: #34d399;
--color-primary-500: #10b981;
--color-primary-600: #059669;
--color-primary-700: #047857;
--color-primary-800: #065f46;
--color-primary-900: #064e3b;
--color-primary: #006a4e;
/* Colors - Secondary (Trust Blue) */
--color-secondary-50: #eff6ff;
--color-secondary-100: #dbeafe;
--color-secondary-200: #bfdbfe;
--color-secondary-300: #93c5fd;
--color-secondary-400: #60a5fa;
--color-secondary-500: #3b82f6;
--color-secondary-600: #2563eb;
--color-secondary-700: #1d4ed8;
--color-secondary-800: #1e40af;
--color-secondary-900: #1e3a8a;
--color-secondary: #1e40af;
/* Colors - Accent (Optimism Yellow - WCAG adjusted) */
--color-accent-50: #fffbeb;
--color-accent-100: #fef3c7;
--color-accent-200: #fde68a;
--color-accent-300: #fcd34d;
--color-accent-400: #fbbf24;
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;
--color-accent-700: #b45309;
--color-accent-800: #92400e;
--color-accent-900: #78350f;
--color-accent: #b45309;
/* Colors - Neutrals */
--color-neutral-0: #ffffff;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-neutral-400: #a3a3a3;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-neutral-950: #0a0a0a;
/* Colors - Semantic */
--color-success-light: #dcfce7;
--color-success: #16a34a;
--color-success-dark: #15803d;
--color-error-light: #fee2e2;
--color-error: #dc2626;
--color-error-dark: #b91c1c;
--color-warning-light: #fef3c7;
--color-warning: #d97706;
--color-warning-dark: #b45309;
--color-info-light: #dbeafe;
--color-info: #2563eb;
--color-info-dark: #1d4ed8;
/* Colors - Backgrounds */
--color-bg-primary: var(--color-neutral-0);
--color-bg-secondary: var(--color-neutral-50);
--color-bg-tertiary: var(--color-neutral-100);
--color-bg-inverse: var(--color-neutral-900);
/* Colors - Surfaces */
--color-surface-1: var(--color-neutral-0);
--color-surface-2: var(--color-neutral-50);
--color-surface-3: var(--color-neutral-100);
/* Colors - Text */
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-600);
--color-text-muted: var(--color-neutral-400);
--color-text-disabled: var(--color-neutral-300);
--color-text-inverse: var(--color-neutral-0);
--color-text-inverse-secondary: var(--color-neutral-300);
--color-text-link: var(--color-primary);
--color-text-link-hover: var(--color-primary-800);
/* Colors - Borders */
--color-border-default: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
--color-border-muted: var(--color-neutral-100);
--color-border-focus: var(--color-primary);
--color-border-error: var(--color-error);
--color-border-success: var(--color-success);
/* Spacing Scale (4px increments) */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
/* Semantic Spacing */
--spacing-xs: var(--space-1);
--spacing-sm: var(--space-2);
--spacing-md: var(--space-4);
--spacing-lg: var(--space-6);
--spacing-xl: var(--space-8);
--spacing-2xl: var(--space-12);
--spacing-3xl: var(--space-16);
--spacing-4xl: var(--space-24);
/* Layout - Containers */
--container-xs: 320px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--container-max: 1200px;
/* Layout - Grid */
--grid-columns: 12;
--grid-gap: var(--space-4);
--grid-gap-sm: var(--space-2);
--grid-gap-lg: var(--space-6);
/* Section Padding */
--section-padding-y-sm: var(--space-8);
--section-padding-y-md: var(--space-12);
--section-padding-y-lg: var(--space-16);
--section-padding-y-xl: var(--space-24);
/* Borders & Shadows */
--radius-none: 0;
--radius-sm: 0.125rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Transitions */
--duration-instant: 0ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-in: cubic-bezier(0.4, 0, 1, 1);
--easing-out: cubic-bezier(0, 0, 0.2, 1);
--easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Z-Index Scale */
--z-deep: -999;
--z-default: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-overlay: 40;
--z-modal: 50;
--z-popover: 60;
--z-tooltip: 70;
--z-toast: 80;
--z-top: 999;
/* Icons */
--icon-xs: 12px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
--icon-2xl: 48px;
/* Aspect Ratios */
--aspect-square: 1 / 1;
--aspect-video: 16 / 9;
--aspect-photo: 4 / 3;
--aspect-portrait: 3 / 4;
--aspect-wide: 21 / 9;
/* Button Tokens */
--btn-primary-bg: var(--color-primary);
--btn-primary-bg-hover: var(--color-primary-800);
--btn-primary-bg-active: var(--color-primary-900);
--btn-primary-bg-disabled: var(--color-neutral-300);
--btn-primary-text: var(--color-neutral-0);
--btn-primary-text-disabled: var(--color-neutral-500);
--btn-focus-ring-width: 2px;
--btn-focus-ring-offset: 2px;
--btn-focus-ring-color: var(--color-primary-400);
}
/* Responsive Base Font */
html {
font-size: 16px;
font-size: clamp(14px, 2.5vw, 18px);
}
/* Responsive Typography */
@media (min-width: 640px) {
:root {
--heading-h1-size: var(--font-size-5xl);
}
}
@media (min-width: 1024px) {
:root {
--heading-h1-size: 4.5rem;
--heading-h2-size: var(--font-size-4xl);
}
}
/* ========================================
BASE RESET & TYPOGRAPHY
======================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-primary);
font-size: var(--text-body-size);
font-weight: var(--text-body-weight);
line-height: var(--text-body-line-height);
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* English language uses secondary font */
html[lang="en"] body {
font-family: var(--font-family-secondary);
}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6 {
font-family: var(--font-family-secondary);
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text-primary);
}
h1 {
font-size: var(--heading-h1-size);
font-weight: var(--heading-h1-weight);
line-height: var(--heading-h1-line-height);
letter-spacing: var(--heading-h1-letter-spacing);
}
h2 {
font-size: var(--heading-h2-size);
font-weight: var(--heading-h2-weight);
line-height: var(--heading-h2-line-height);
letter-spacing: var(--heading-h2-letter-spacing);
}
h3 {
font-size: var(--heading-h3-size);
font-weight: var(--heading-h3-weight);
line-height: var(--heading-h3-line-height);
letter-spacing: var(--heading-h3-letter-spacing);
}
h4 {
font-size: var(--heading-h4-size);
font-weight: var(--heading-h4-weight);
line-height: var(--heading-h4-line-height);
letter-spacing: var(--heading-h4-letter-spacing);
}
p {
margin-bottom: var(--space-4);
}
p:last-child {
margin-bottom: 0;
}
/* ========================================
UTILITY CLASSES
======================================== */
.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;
}
.text-lead {
font-size: var(--text-lead-size);
font-weight: var(--text-lead-weight);
line-height: var(--text-lead-line-height);
color: var(--color-text-secondary);
}
.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
/* ========================================
LAYOUT COMPONENTS
======================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
@media (min-width: 640px) {
.container {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
}
@media (min-width: 1024px) {
.container {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
}
.section {
padding-top: var(--section-padding-y-md);
padding-bottom: var(--section-padding-y-md);
}
@media (min-width: 1024px) {
.section {
padding-top: var(--section-padding-y-lg);
padding-bottom: var(--section-padding-y-lg);
}
}
/* ========================================
HEADER COMPONENT
======================================== */
.header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border-muted);
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 var(--space-4);
}
@media (min-width: 1024px) {
.header__container {
height: 72px;
padding: 0;
}
}
.header__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
text-decoration: none;
}
.header__logo-icon {
width: 40px;
height: 40px;
background-color: var(--color-primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-0);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
.nav {
display: none;
align-items: center;
gap: var(--space-1);
}
@media (min-width: 1024px) {
.nav {
display: flex;
}
}
.nav__link {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
.nav__link:hover {
color: var(--color-text-primary);
background-color: var(--color-neutral-100);
}
.nav__link--active {
color: var(--color-primary);
background-color: var(--color-primary-50);
}
.header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-primary);
}
.mobile-menu-btn:hover {
background-color: var(--color-neutral-100);
}
@media (min-width: 1024px) {
.mobile-menu-btn {
display: none;
}
}
/* ========================================
LANGUAGE TOGGLE
======================================== */
.lang-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 36px;
padding: 0 var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-family: var(--font-family-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border: 2px solid var(--color-secondary-200);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--duration-fast) var(--easing-default);
}
.lang-toggle:hover {
background-color: var(--color-secondary-200);
border-color: var(--color-secondary-300);
}
.lang-toggle:focus-visible {
outline: 2px solid var(--color-secondary-400);
outline-offset: 2px;
}
/* ========================================
BUTTON COMPONENT
======================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-medium);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
html[lang="en"] .btn {
font-family: var(--font-family-secondary);
}
.btn--sm {
height: 32px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
}
.btn--md {
height: 40px;
padding: 0 var(--space-4);
font-size: var(--font-size-base);
}
.btn--lg {
height: 48px;
padding: 0 var(--space-6);
font-size: var(--font-size-md);
}
.btn--primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.btn--primary:hover {
background-color: var(--btn-primary-bg-hover);
}
.btn--primary:active {
background-color: var(--btn-primary-bg-active);
}
.btn--primary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--secondary:hover {
background-color: var(--color-primary-50);
}
.btn--secondary:active {
background-color: var(--color-primary-100);
}
.btn--secondary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
/* ========================================
HERO SECTION - ISSUES
======================================== */
.hero-issues {
background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
text-align: center;
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
@media (min-width: 1024px) {
.hero-issues {
padding-top: var(--space-24);
padding-bottom: var(--space-24);
}
}
.hero-issues__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-3);
background-color: var(--color-primary-100);
color: var(--color-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
}
.hero-issues__title {
max-width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-6);
}
.hero-issues__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-8);
}
/* ========================================
ISSUES GRID SECTION
======================================== */
.issues-section {
background-color: var(--color-bg-primary);
}
.issues-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 640px) {
.issues-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.issues-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ========================================
ISSUE CARD COMPONENT
======================================== */
.issue-card {
display: flex;
flex-direction: column;
background-color: var(--color-surface-1);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: all var(--duration-fast) var(--easing-default);
}
.issue-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
border-color: var(--color-primary-200);
}
.issue-card:focus-within {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.issue-card__header {
padding: var(--space-6) var(--space-6) 0;
}
.issue-card__icon {
width: 56px;
height: 56px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-4);
}
.issue-card__icon--primary {
background-color: var(--color-primary-100);
color: var(--color-primary);
}
.issue-card__icon--secondary {
background-color: var(--color-secondary-100);
color: var(--color-secondary);
}
.issue-card__icon--accent {
background-color: var(--color-accent-100);
color: var(--color-accent);
}
.issue-card__icon--success {
background-color: var(--color-success-light);
color: var(--color-success);
}
.issue-card__icon--error {
background-color: var(--color-error-light);
color: var(--color-error);
}
.issue-card__icon--info {
background-color: var(--color-info-light);
color: var(--color-info);
}
.issue-card__stat {
display: inline-block;
padding: var(--space-1) var(--space-2);
background-color: var(--color-accent-100);
color: var(--color-accent);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
}
.issue-card__body {
padding: 0 var(--space-6) var(--space-6);
flex-grow: 1;
display: flex;
flex-direction: column;
}
.issue-card__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
color: var(--color-text-primary);
}
.issue-card__desc {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
flex-grow: 1;
margin-bottom: var(--space-4);
}
.issue-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-primary);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
.issue-card__link:hover {
color: var(--color-primary-800);
text-decoration: underline;
}
/* ========================================
CTA SECTION
======================================== */
.cta-section {
background-color: var(--color-primary);
color: var(--color-text-inverse);
text-align: center;
}
.cta-section__title {
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.cta-section__desc {
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-8);
opacity: 0.9;
}
.cta-section__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.cta-section__actions {
flex-direction: row;
justify-content: center;
}
}
.btn--inverse {
background-color: var(--color-neutral-0);
color: var(--color-neutral-900);
}
.btn--inverse:hover {
background-color: var(--color-neutral-100);
}
.btn--inverse-outline {
background-color: transparent;
color: var(--color-neutral-0);
border-color: var(--color-neutral-0);
}
.btn--inverse-outline:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* ========================================
FOOTER COMPONENT
======================================== */
.footer {
background-color: var(--color-neutral-900);
color: var(--color-text-inverse);
padding: var(--space-12) 0 var(--space-8);
}
.footer__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
.footer__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.footer__heading {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.footer__link {
display: block;
padding: var(--space-1) 0;
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
.footer__link:hover {
color: var(--color-text-inverse);
}
.footer__bottom {
padding-top: var(--space-8);
border-top: 1px solid var(--color-neutral-800);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 768px) {
.footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
.footer__copyright {
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
.footer__lite-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
/* ========================================
CHECKBOX (for lite mode)
======================================== */
.checkbox {
width: 20px;
height: 20px;
appearance: none;
background-color: transparent;
border: 2px solid var(--color-neutral-500);
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.checkbox:checked {
background-color: var(--color-primary-400);
border-color: var(--color-primary-400);
}
.checkbox:checked::after {
content: '';
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
}
/* ========================================
LITE MODE STYLES
======================================== */
.lite-mode img:not(.essential),
.lite-mode video,
.lite-mode iframe {
display: none !important;
}
.lite-mode .hero-issues {
background-image: none !important;
background: var(--color-bg-secondary) !important;
}
.lite-mode * {
animation: none !important;
transition: none !important;
}
.lite-mode .issue-card:hover {
transform: none;
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ========================================
ICON SVG
======================================== */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }
/* ===== Styles from anti-corruption.html ===== */
/* ========================================
CSS CUSTOM PROPERTIES (Design Tokens)
======================================== */
:root {
/* Typography - Font Families */
--font-family-primary: 'Noto Sans Bengali', 'Hind Siliguri', 'Kalpurush', system-ui, sans-serif;
--font-family-secondary: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
/* Typography - Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem;
--font-size-3xl: 2.25rem;
--font-size-4xl: 3rem;
--font-size-5xl: 4rem;
/* Typography - Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Typography - Line Heights */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Heading Definitions */
--heading-h1-size: var(--font-size-4xl);
--heading-h1-weight: 700;
--heading-h1-line-height: 1.1;
--heading-h1-letter-spacing: -0.02em;
--heading-h2-size: var(--font-size-3xl);
--heading-h2-weight: 700;
--heading-h2-line-height: 1.2;
--heading-h2-letter-spacing: -0.01em;
--heading-h3-size: var(--font-size-2xl);
--heading-h3-weight: 600;
--heading-h3-line-height: 1.25;
--heading-h4-size: var(--font-size-xl);
--heading-h4-weight: 600;
--heading-h4-line-height: 1.3;
/* Body & Text Styles */
--text-body-size: var(--font-size-base);
--text-body-weight: 400;
--text-body-line-height: 1.6;
--text-lead-size: var(--font-size-lg);
--text-lead-weight: 400;
--text-lead-line-height: 1.7;
/* Colors - Primary (BNP Green) */
--color-primary-50: #ecfdf5;
--color-primary-100: #d1fae5;
--color-primary-200: #a7f3d0;
--color-primary-300: #6ee7b7;
--color-primary-400: #34d399;
--color-primary-500: #10b981;
--color-primary-600: #059669;
--color-primary-700: #047857;
--color-primary-800: #065f46;
--color-primary-900: #064e3b;
--color-primary: #006a4e;
/* Colors - Secondary (Trust Blue) */
--color-secondary-50: #eff6ff;
--color-secondary-100: #dbeafe;
--color-secondary-200: #bfdbfe;
--color-secondary-300: #93c5fd;
--color-secondary-400: #60a5fa;
--color-secondary-500: #3b82f6;
--color-secondary-600: #2563eb;
--color-secondary-700: #1d4ed8;
--color-secondary-800: #1e40af;
--color-secondary-900: #1e3a8a;
--color-secondary: #1e40af;
/* Colors - Accent (Optimism Yellow - WCAG adjusted) */
--color-accent-50: #fffbeb;
--color-accent-100: #fef3c7;
--color-accent-200: #fde68a;
--color-accent-300: #fcd34d;
--color-accent-400: #fbbf24;
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;
--color-accent-700: #b45309;
--color-accent-800: #92400e;
--color-accent-900: #78350f;
--color-accent: #b45309;
/* Colors - Neutrals */
--color-neutral-0: #ffffff;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-neutral-400: #a3a3a3;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-neutral-950: #0a0a0a;
/* Colors - Semantic */
--color-success-light: #dcfce7;
--color-success: #16a34a;
--color-success-dark: #15803d;
--color-error-light: #fee2e2;
--color-error: #dc2626;
--color-error-dark: #b91c1c;
--color-warning-light: #fef3c7;
--color-warning: #d97706;
--color-warning-dark: #b45309;
--color-info-light: #dbeafe;
--color-info: #2563eb;
--color-info-dark: #1d4ed8;
/* Colors - Backgrounds */
--color-bg-primary: var(--color-neutral-0);
--color-bg-secondary: var(--color-neutral-50);
--color-bg-tertiary: var(--color-neutral-100);
--color-bg-inverse: var(--color-neutral-900);
/* Colors - Surfaces */
--color-surface-1: var(--color-neutral-0);
--color-surface-2: var(--color-neutral-50);
--color-surface-3: var(--color-neutral-100);
/* Colors - Text */
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-600);
--color-text-muted: var(--color-neutral-400);
--color-text-disabled: var(--color-neutral-300);
--color-text-inverse: var(--color-neutral-0);
--color-text-inverse-secondary: var(--color-neutral-300);
--color-text-link: var(--color-primary);
--color-text-link-hover: var(--color-primary-800);
/* Colors - Borders */
--color-border-default: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
--color-border-muted: var(--color-neutral-100);
--color-border-focus: var(--color-primary);
/* Spacing Scale (4px increments) */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
/* Layout - Containers */
--container-max: 1200px;
--container-narrow: 800px;
/* Section Padding */
--section-padding-y-sm: var(--space-8);
--section-padding-y-md: var(--space-12);
--section-padding-y-lg: var(--space-16);
/* Borders & Shadows */
--radius-sm: 0.125rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
/* Transitions */
--duration-fast: 150ms;
--duration-normal: 300ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
/* Z-Index Scale */
--z-sticky: 20;
/* Icons */
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
/* Button Tokens */
--btn-primary-bg: var(--color-primary);
--btn-primary-bg-hover: var(--color-primary-800);
--btn-primary-bg-active: var(--color-primary-900);
--btn-primary-text: var(--color-neutral-0);
--btn-focus-ring-width: 2px;
--btn-focus-ring-offset: 2px;
--btn-focus-ring-color: var(--color-primary-400);
}
/* Responsive Base Font */
html {
font-size: 16px;
font-size: clamp(14px, 2.5vw, 18px);
}
@media (min-width: 640px) {
:root {
--heading-h1-size: var(--font-size-5xl);
}
}
@media (min-width: 1024px) {
:root {
--heading-h1-size: 4.5rem;
--heading-h2-size: var(--font-size-4xl);
}
}
/* ========================================
BASE RESET & TYPOGRAPHY
======================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-primary);
font-size: var(--text-body-size);
font-weight: var(--text-body-weight);
line-height: var(--text-body-line-height);
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html[lang="en"] body,
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6 {
font-family: var(--font-family-secondary);
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
height: auto;
}
input, button, textarea, select {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
ul, ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text-primary);
}
h1 {
font-size: var(--heading-h1-size);
font-weight: var(--heading-h1-weight);
line-height: var(--heading-h1-line-height);
letter-spacing: var(--heading-h1-letter-spacing);
}
h2 {
font-size: var(--heading-h2-size);
font-weight: var(--heading-h2-weight);
line-height: var(--heading-h2-line-height);
letter-spacing: var(--heading-h2-letter-spacing);
}
h3 {
font-size: var(--heading-h3-size);
font-weight: var(--heading-h3-weight);
line-height: var(--heading-h3-line-height);
}
p {
margin-bottom: var(--space-4);
}
p:last-child {
margin-bottom: 0;
}
/* ========================================
UTILITY CLASSES
======================================== */
.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;
}
.text-lead {
font-size: var(--text-lead-size);
font-weight: var(--text-lead-weight);
line-height: var(--text-lead-line-height);
color: var(--color-text-secondary);
}
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
@media (min-width: 640px) {
.container {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
}
@media (min-width: 1024px) {
.container {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
}
.container--narrow {
max-width: var(--container-narrow);
}
.section {
padding-top: var(--section-padding-y-md);
padding-bottom: var(--section-padding-y-md);
}
@media (min-width: 1024px) {
.section {
padding-top: var(--section-padding-y-lg);
padding-bottom: var(--section-padding-y-lg);
}
}
/* ========================================
HEADER COMPONENT
======================================== */
.header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border-muted);
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 var(--space-4);
}
@media (min-width: 1024px) {
.header__container {
height: 72px;
padding: 0;
}
}
.header__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
}
.header__logo-icon {
width: 40px;
height: 40px;
background-color: var(--color-primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-0);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
.nav {
display: none;
align-items: center;
gap: var(--space-1);
}
@media (min-width: 1024px) {
.nav {
display: flex;
}
}
.nav__link {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
.nav__link:hover {
color: var(--color-text-primary);
background-color: var(--color-neutral-100);
}
.nav__link--active {
color: var(--color-primary);
background-color: var(--color-primary-50);
}
.header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-primary);
}
.mobile-menu-btn:hover {
background-color: var(--color-neutral-100);
}
@media (min-width: 1024px) {
.mobile-menu-btn {
display: none;
}
}
/* ========================================
LANGUAGE TOGGLE
======================================== */
.lang-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 36px;
padding: 0 var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-family: var(--font-family-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border: 2px solid var(--color-secondary-200);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--duration-fast) var(--easing-default);
}
.lang-toggle:hover {
background-color: var(--color-secondary-200);
border-color: var(--color-secondary-300);
}
.lang-toggle:focus-visible {
outline: 2px solid var(--color-secondary-400);
outline-offset: 2px;
}
/* ========================================
BUTTON COMPONENT
======================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-medium);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
html[lang="en"] .btn {
font-family: var(--font-family-secondary);
}
.btn--sm {
height: 32px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
}
.btn--md {
height: 40px;
padding: 0 var(--space-4);
font-size: var(--font-size-base);
}
.btn--lg {
height: 48px;
padding: 0 var(--space-6);
font-size: var(--font-size-md);
}
.btn--primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.btn--primary:hover {
background-color: var(--btn-primary-bg-hover);
}
.btn--primary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--secondary:hover {
background-color: var(--color-primary-50);
}
.btn--ghost {
background-color: transparent;
color: var(--color-primary);
}
.btn--ghost:hover {
background-color: var(--color-primary-50);
}
/* ========================================
HERO SECTION - ISSUE
======================================== */
.hero-issue {
background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%);
text-align: center;
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
@media (min-width: 1024px) {
.hero-issue {
padding-top: var(--space-24);
padding-bottom: var(--space-24);
}
}
.hero-issue__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-3);
background-color: var(--color-primary);
color: var(--color-neutral-0);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
}
.hero-issue__icon {
width: 64px;
height: 64px;
background-color: var(--color-neutral-0);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-6);
color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.hero-issue__title {
max-width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-6);
}
.hero-issue__stat {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
background-color: var(--color-accent-100);
color: var(--color-accent);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
border-radius: var(--radius-lg);
margin-bottom: var(--space-6);
}
.hero-issue__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* ========================================
ISSUE SECTION STYLES
======================================== */
.issue-section {
border-bottom: 1px solid var(--color-border-muted);
}
.issue-section:last-of-type {
border-bottom: none;
}
.issue-section--alt {
background-color: var(--color-bg-secondary);
}
.issue-section__header {
margin-bottom: var(--space-8);
}
.issue-section__number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: var(--color-primary);
color: var(--color-neutral-0);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
border-radius: var(--radius-full);
margin-bottom: var(--space-4);
}
.issue-section__title {
margin-bottom: var(--space-2);
}
.issue-section__subtitle {
color: var(--color-text-secondary);
}
/* ========================================
PROBLEM SECTION
======================================== */
.problem-content {
max-width: var(--container-narrow);
}
.problem-content p {
font-size: var(--font-size-md);
line-height: 1.8;
margin-bottom: var(--space-6);
}
.problem-content p:last-child {
margin-bottom: 0;
}
.problem-highlight {
background-color: var(--color-accent-100);
padding: var(--space-6);
border-radius: var(--radius-lg);
border-left: 4px solid var(--color-accent);
margin: var(--space-8) 0;
}
.problem-highlight__stat {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-accent);
margin-bottom: var(--space-2);
}
.problem-highlight__text {
color: var(--color-text-secondary);
margin-bottom: 0;
}
/* ========================================
COMMITMENTS SECTION
======================================== */
.commitments-list {
max-width: var(--container-narrow);
}
.commitment-item {
display: flex;
gap: var(--space-4);
padding: var(--space-6);
background-color: var(--color-surface-1);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
transition: all var(--duration-fast) var(--easing-default);
}
.commitment-item:hover {
border-color: var(--color-primary-200);
box-shadow: var(--shadow-md);
}
.commitment-item:last-child {
margin-bottom: 0;
}
.commitment-item__number {
flex-shrink: 0;
width: 48px;
height: 48px;
background-color: var(--color-primary-100);
color: var(--color-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
}
.commitment-item__content {
flex-grow: 1;
}
.commitment-item__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
.commitment-item__desc {
color: var(--color-text-secondary);
margin-bottom: 0;
}
/* ========================================
PROGRESS SECTION
======================================== */
.progress-table {
width: 100%;
border-collapse: collapse;
background-color: var(--color-surface-1);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.progress-table th,
.progress-table td {
padding: var(--space-4);
text-align: left;
border-bottom: 1px solid var(--color-border-muted);
}
.progress-table th {
background-color: var(--color-primary);
color: var(--color-neutral-0);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.progress-table tr:last-child td {
border-bottom: none;
}
.progress-table tr:hover td {
background-color: var(--color-bg-secondary);
}
.progress-table td {
font-size: var(--font-size-sm);
}
.progress-badge {
display: inline-flex;
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-md);
}
.progress-badge--target {
background-color: var(--color-secondary-100);
color: var(--color-secondary);
}
.progress-badge--timeline {
background-color: var(--color-accent-100);
color: var(--color-accent);
}
/* Mobile table responsive */
@media (max-width: 767px) {
.progress-table,
.progress-table thead,
.progress-table tbody,
.progress-table th,
.progress-table td,
.progress-table tr {
display: block;
}
.progress-table thead {
display: none;
}
.progress-table tr {
margin-bottom: var(--space-4);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-lg);
}
.progress-table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border-muted);
}
.progress-table td::before {
content: attr(data-label);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
text-transform: uppercase;
}
.progress-table td:last-child {
border-bottom: none;
}
}
/* ========================================
SOURCES SECTION
======================================== */
.sources-list {
max-width: var(--container-narrow);
}
.source-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
background-color: var(--color-surface-1);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-lg);
margin-bottom: var(--space-3);
transition: all var(--duration-fast) var(--easing-default);
}
.source-item:hover {
border-color: var(--color-secondary-200);
background-color: var(--color-secondary-50);
}
.source-item:last-child {
margin-bottom: 0;
}
.source-item__icon {
flex-shrink: 0;
width: 32px;
height: 32px;
background-color: var(--color-secondary-100);
color: var(--color-secondary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
}
.source-item__content {
flex-grow: 1;
}
.source-item__title {
font-weight: var(--font-weight-semibold);
color: var(--color-secondary);
margin-bottom: var(--space-1);
}
.source-item__meta {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.source-item__link {
color: var(--color-secondary);
text-decoration: underline;
text-underline-offset: 2px;
}
.source-item__link:hover {
color: var(--color-secondary-800);
}
/* ========================================
CTA SECTION
======================================== */
.cta-section {
background-color: var(--color-primary);
color: var(--color-text-inverse);
text-align: center;
}
.cta-section__title {
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.cta-section__desc {
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-8);
opacity: 0.9;
}
.cta-section__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.cta-section__actions {
flex-direction: row;
justify-content: center;
}
}
.btn--inverse {
background-color: var(--color-neutral-0);
color: var(--color-neutral-900);
}
.btn--inverse:hover {
background-color: var(--color-neutral-100);
}
.btn--inverse-outline {
background-color: transparent;
color: var(--color-neutral-0);
border-color: var(--color-neutral-0);
}
.btn--inverse-outline:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* ========================================
FOOTER COMPONENT
======================================== */
.footer {
background-color: var(--color-neutral-900);
color: var(--color-text-inverse);
padding: var(--space-12) 0 var(--space-8);
}
.footer__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
.footer__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.footer__heading {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.footer__link {
display: block;
padding: var(--space-1) 0;
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
transition: color var(--duration-fast) var(--easing-default);
}
.footer__link:hover {
color: var(--color-text-inverse);
}
.footer__bottom {
padding-top: var(--space-8);
border-top: 1px solid var(--color-neutral-800);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 768px) {
.footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
.footer__copyright {
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
.footer__lite-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
/* ========================================
CHECKBOX (for lite mode)
======================================== */
.checkbox {
width: 20px;
height: 20px;
appearance: none;
background-color: transparent;
border: 2px solid var(--color-neutral-500);
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.checkbox:checked {
background-color: var(--color-primary-400);
border-color: var(--color-primary-400);
}
.checkbox:checked::after {
content: '';
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
}
/* ========================================
LITE MODE STYLES
======================================== */
.lite-mode img:not(.essential),
.lite-mode video,
.lite-mode iframe {
display: none !important;
}
.lite-mode .hero-issue {
background: var(--color-bg-secondary) !important;
}
.lite-mode * {
animation: none !important;
transition: none !important;
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ========================================
ICON SVG
======================================== */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }
/* ========================================
BREADCRUMB
======================================== */
.breadcrumb {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4) 0;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.breadcrumb__link {
color: var(--color-text-link);
text-decoration: none;
}
.breadcrumb__link:hover {
text-decoration: underline;
}
.breadcrumb__separator {
color: var(--color-text-muted);
}
.breadcrumb__current {
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
}
/* ===== Styles from climate-city-resilience.html ===== */
:root{--font-family-primary:'Noto Sans Bengali','Hind Siliguri','Kalpurush',system-ui,sans-serif;--font-family-secondary:'Inter','Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-md:1.125rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:1.875rem;--font-size-3xl:2.25rem;--font-size-4xl:3rem;--font-size-5xl:4rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.625;--heading-h1-size:var(--font-size-4xl);--heading-h2-size:var(--font-size-3xl);--heading-h3-size:var(--font-size-2xl);--heading-h4-size:var(--font-size-xl);--text-body-size:var(--font-size-base);--text-lead-size:var(--font-size-lg);--color-primary-50:#ecfdf5;--color-primary-100:#d1fae5;--color-primary-200:#a7f3d0;--color-primary-400:#34d399;--color-primary-800:#065f46;--color-primary:#006a4e;--color-secondary-50:#eff6ff;--color-secondary-100:#dbeafe;--color-secondary-200:#bfdbfe;--color-secondary-300:#93c5fd;--color-secondary-400:#60a5fa;--color-secondary:#1e40af;--color-accent-100:#fef3c7;--color-accent:#b45309;--color-neutral-0:#fff;--color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-300:#d4d4d4;--color-neutral-400:#a3a3a3;--color-neutral-500:#737373;--color-neutral-600:#525252;--color-neutral-800:#262626;--color-neutral-900:#171717;--color-success-light:#dcfce7;--color-success:#16a34a;--color-bg-primary:var(--color-neutral-0);--color-bg-secondary:var(--color-neutral-50);--color-text-primary:var(--color-neutral-900);--color-text-secondary:var(--color-neutral-600);--color-text-muted:var(--color-neutral-400);--color-text-inverse:var(--color-neutral-0);--color-text-inverse-secondary:var(--color-neutral-300);--color-text-link:var(--color-primary);--color-text-link-hover:var(--color-primary-800);--color-border-muted:var(--color-neutral-100);--color-surface-1:var(--color-neutral-0);--space-1:0.25rem;--space-1-5:0.375rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--space-24:6rem;--container-max:1200px;--container-narrow:800px;--section-padding-y-md:var(--space-12);--section-padding-y-lg:var(--space-16);--radius-sm:0.125rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgb(0 0 0/0.05);--shadow-md:0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);--duration-fast:150ms;--easing-default:cubic-bezier(0.4,0,0.2,1);--z-sticky:20;--icon-sm:16px;--icon-lg:24px;--icon-xl:32px;--btn-primary-bg:var(--color-primary);--btn-primary-bg-hover:var(--color-primary-800);--btn-primary-text:var(--color-neutral-0);--btn-focus-ring-width:2px;--btn-focus-ring-offset:2px;--btn-focus-ring-color:var(--color-primary-400)}
html{font-size:16px;font-size:clamp(14px,2.5vw,18px);scroll-behavior:smooth}
@media(min-width:640px){:root{--heading-h1-size:var(--font-size-5xl)}}
@media(min-width:1024px){:root{--heading-h1-size:4.5rem;--heading-h2-size:var(--font-size-4xl)}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-family-primary);font-size:var(--text-body-size);line-height:1.6;color:var(--color-text-primary);background-color:var(--color-bg-primary);-webkit-font-smoothing:antialiased}
html[lang="en"] body,html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] h4{font-family:var(--font-family-secondary)}
img,svg{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight)}
h1{font-size:var(--heading-h1-size);letter-spacing:-0.02em}h2{font-size:var(--heading-h2-size);letter-spacing:-0.01em}h3{font-size:var(--heading-h3-size)}
p{margin-bottom:var(--space-4)}p:last-child{margin-bottom:0}
.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}
.text-lead{font-size:var(--text-lead-size);line-height:1.7;color:var(--color-text-secondary)}
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-4)}
@media(min-width:640px){.container{padding:0 var(--space-6)}}@media(min-width:1024px){.container{padding:0 var(--space-8)}}
.container--narrow{max-width:var(--container-narrow)}.section{padding:var(--section-padding-y-md) 0}
@media(min-width:1024px){.section{padding:var(--section-padding-y-lg) 0}}
.header{position:sticky;top:0;z-index:var(--z-sticky);background:var(--color-bg-primary);border-bottom:1px solid var(--color-border-muted)}
.header__container{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 var(--space-4)}
@media(min-width:1024px){.header__container{height:72px;padding:0 var(--space-8)}}
.header__logo{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}
.header__logo-icon{width:40px;height:40px;background:var(--color-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-neutral-0);font-weight:var(--font-weight-bold)}
.nav{display:none;align-items:center;gap:var(--space-1)}@media(min-width:1024px){.nav{display:flex}}
.nav__link{display:inline-flex;align-items:center;height:40px;padding:0 var(--space-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);border-radius:var(--radius-md);transition:all var(--duration-fast) var(--easing-default)}
.nav__link:hover{color:var(--color-text-primary);background:var(--color-neutral-100)}.nav__link--active{color:var(--color-primary);background:var(--color-primary-50)}
.header__actions{display:flex;align-items:center;gap:var(--space-2)}
.mobile-menu-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;border-radius:var(--radius-md);cursor:pointer;color:var(--color-text-primary)}
.mobile-menu-btn:hover{background:var(--color-neutral-100)}@media(min-width:1024px){.mobile-menu-btn{display:none}}
.lang-toggle{display:flex;align-items:center;justify-content:center;min-width:48px;height:36px;padding:0 var(--space-3);background:var(--color-secondary-100);color:var(--color-secondary);font-family:var(--font-family-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);border:2px solid var(--color-secondary-200);border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast) var(--easing-default)}
.lang-toggle:hover{background:var(--color-secondary-200);border-color:var(--color-secondary-300)}.lang-toggle:focus-visible{outline:2px solid var(--color-secondary-400);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-family-primary);font-weight:var(--font-weight-medium);white-space:nowrap;cursor:pointer;border:2px solid transparent;border-radius:var(--radius-md);transition:all var(--duration-fast) var(--easing-default);text-decoration:none}
html[lang="en"] .btn{font-family:var(--font-family-secondary)}.btn--md{height:40px;padding:0 var(--space-4);font-size:var(--font-size-base)}.btn--lg{height:48px;padding:0 var(--space-6);font-size:var(--font-size-md)}
.btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-text)}.btn--primary:hover{background:var(--btn-primary-bg-hover)}.btn--primary:focus-visible{outline:var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);outline-offset:var(--btn-focus-ring-offset)}
.btn--secondary{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}.btn--secondary:hover{background:var(--color-primary-50)}
.btn--inverse{background:var(--color-neutral-0);color:var(--color-neutral-900)}.btn--inverse:hover{background:var(--color-neutral-100)}
.btn--inverse-outline{background:transparent;color:var(--color-neutral-0);border-color:var(--color-neutral-0)}.btn--inverse-outline:hover{background:rgba(255,255,255,0.1)}
.hero-issue{background:linear-gradient(135deg,var(--color-secondary-50) 0%,var(--color-secondary-100) 100%);text-align:center;padding:var(--space-16) 0}
@media(min-width:1024px){.hero-issue{padding:var(--space-24) 0}}
.hero-issue__badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1-5) var(--space-3);background:var(--color-secondary);color:var(--color-neutral-0);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);border-radius:var(--radius-full);margin-bottom:var(--space-6)}
.hero-issue__icon{width:64px;height:64px;background:var(--color-neutral-0);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-6);color:var(--color-secondary);box-shadow:var(--shadow-md)}
.hero-issue__title{max-width:800px;margin:0 auto var(--space-6)}.hero-issue__stat{display:inline-flex;padding:var(--space-3) var(--space-6);background:var(--color-accent-100);color:var(--color-accent);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);border-radius:var(--radius-lg);margin-bottom:var(--space-6)}
.hero-issue__subtitle{max-width:600px;margin:0 auto}.issue-section{border-bottom:1px solid var(--color-border-muted)}.issue-section:last-of-type{border-bottom:none}.issue-section--alt{background:var(--color-bg-secondary)}
.issue-section__header{margin-bottom:var(--space-8)}.issue-section__number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--color-secondary);color:var(--color-neutral-0);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);border-radius:var(--radius-full);margin-bottom:var(--space-4)}
.issue-section__title{margin-bottom:var(--space-2)}.issue-section__subtitle{color:var(--color-text-secondary)}.problem-content{max-width:var(--container-narrow)}
.problem-content p{font-size:var(--font-size-md);line-height:1.8;margin-bottom:var(--space-6)}
.problem-highlight{background:var(--color-accent-100);padding:var(--space-6);border-radius:var(--radius-lg);border-left:4px solid var(--color-accent);margin:var(--space-8) 0}
.problem-highlight__stat{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-accent);margin-bottom:var(--space-2)}.problem-highlight__text{color:var(--color-text-secondary);margin-bottom:0}
.commitments-list{max-width:var(--container-narrow)}.commitment-item{display:flex;gap:var(--space-4);padding:var(--space-6);background:var(--color-surface-1);border:1px solid var(--color-border-muted);border-radius:var(--radius-lg);margin-bottom:var(--space-4);transition:all var(--duration-fast) var(--easing-default)}
.commitment-item:hover{border-color:var(--color-secondary-200);box-shadow:var(--shadow-md)}.commitment-item:last-child{margin-bottom:0}
.commitment-item__number{flex-shrink:0;width:48px;height:48px;background:var(--color-secondary-100);color:var(--color-secondary);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}
.commitment-item__content{flex-grow:1}.commitment-item__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-2)}.commitment-item__desc{color:var(--color-text-secondary);margin-bottom:0}
.progress-table{width:100%;border-collapse:collapse;background:var(--color-surface-1);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.progress-table th,.progress-table td{padding:var(--space-4);text-align:left;border-bottom:1px solid var(--color-border-muted)}
.progress-table th{background:var(--color-secondary);color:var(--color-neutral-0);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:0.05em}
.progress-table tr:last-child td{border-bottom:none}.progress-table tr:hover td{background:var(--color-bg-secondary)}.progress-table td{font-size:var(--font-size-sm)}
.progress-badge{display:inline-flex;padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-md)}
.progress-badge--target{background:var(--color-secondary-100);color:var(--color-secondary)}.progress-badge--timeline{background:var(--color-accent-100);color:var(--color-accent)}
@media(max-width:767px){.progress-table,.progress-table thead,.progress-table tbody,.progress-table th,.progress-table td,.progress-table tr{display:block}.progress-table thead{display:none}.progress-table tr{margin-bottom:var(--space-4);border:1px solid var(--color-border-muted);border-radius:var(--radius-lg)}.progress-table td{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4)}.progress-table td::before{content:attr(data-label);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);font-size:var(--font-size-xs);text-transform:uppercase}.progress-table td:last-child{border-bottom:none}}
.sources-list{max-width:var(--container-narrow)}.source-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface-1);border:1px solid var(--color-border-muted);border-radius:var(--radius-lg);margin-bottom:var(--space-3);transition:all var(--duration-fast) var(--easing-default)}
.source-item:hover{border-color:var(--color-secondary-200);background:var(--color-secondary-50)}.source-item:last-child{margin-bottom:0}
.source-item__icon{flex-shrink:0;width:32px;height:32px;background:var(--color-secondary-100);color:var(--color-secondary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}
.source-item__content{flex-grow:1}.source-item__title{font-weight:var(--font-weight-semibold);color:var(--color-secondary);margin-bottom:var(--space-1)}.source-item__meta{font-size:var(--font-size-sm);color:var(--color-text-muted)}
.cta-section{background:var(--color-secondary);color:var(--color-text-inverse);text-align:center}.cta-section__title{color:var(--color-text-inverse);margin-bottom:var(--space-4)}.cta-section__desc{max-width:600px;margin:0 auto var(--space-8);opacity:0.9}
.cta-section__actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}@media(min-width:640px){.cta-section__actions{flex-direction:row;justify-content:center}}
.footer{background:var(--color-neutral-900);color:var(--color-text-inverse);padding:var(--space-12) 0 var(--space-8)}
.footer__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8);margin-bottom:var(--space-12)}@media(min-width:768px){.footer__grid{grid-template-columns:repeat(4,1fr)}}
.footer__heading{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-inverse);margin-bottom:var(--space-4)}
.footer__link{display:block;padding:var(--space-1) 0;font-size:var(--font-size-sm);color:var(--color-text-inverse-secondary);transition:color var(--duration-fast) var(--easing-default)}.footer__link:hover{color:var(--color-text-inverse)}
.footer__bottom{padding-top:var(--space-8);border-top:1px solid var(--color-neutral-800);display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}@media(min-width:768px){.footer__bottom{flex-direction:row;justify-content:space-between}}
.footer__copyright{font-size:var(--font-size-sm);color:var(--color-text-inverse-secondary)}.footer__lite-toggle{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-inverse-secondary)}
.checkbox{width:20px;height:20px;appearance:none;background:transparent;border:2px solid var(--color-neutral-500);border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.checkbox:checked{background:var(--color-primary-400);border-color:var(--color-primary-400)}.checkbox:checked::after{content:'';width:6px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox:focus-visible{outline:2px solid var(--color-primary-400);outline-offset:2px}
.lite-mode img:not(.essential),.lite-mode video,.lite-mode iframe{display:none!important}.lite-mode .hero-issue{background:var(--color-bg-secondary)!important}.lite-mode *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}
.icon{display:inline-flex;align-items:center;justify-content:center;color:currentColor}.icon--sm{width:var(--icon-sm);height:var(--icon-sm)}.icon--lg{width:var(--icon-lg);height:var(--icon-lg)}.icon--xl{width:var(--icon-xl);height:var(--icon-xl)}
.breadcrumb{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4) 0;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.breadcrumb__link{color:var(--color-text-link)}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__separator{color:var(--color-text-muted)}.breadcrumb__current{color:var(--color-text-primary);font-weight:var(--font-weight-medium)}
/* ===== Styles from education.html ===== */
:root{--font-family-primary:'Noto Sans Bengali','Hind Siliguri','Kalpurush',system-ui,sans-serif;--font-family-secondary:'Inter','Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-md:1.125rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:1.875rem;--font-size-3xl:2.25rem;--font-size-4xl:3rem;--font-size-5xl:4rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.625;--heading-h1-size:var(--font-size-4xl);--heading-h2-size:var(--font-size-3xl);--heading-h3-size:var(--font-size-2xl);--heading-h4-size:var(--font-size-xl);--text-body-size:var(--font-size-base);--text-lead-size:var(--font-size-lg);--color-primary-50:#ecfdf5;--color-primary-100:#d1fae5;--color-primary-200:#a7f3d0;--color-primary-400:#34d399;--color-primary-800:#065f46;--color-primary:#006a4e;--color-secondary-50:#eff6ff;--color-secondary-100:#dbeafe;--color-secondary-200:#bfdbfe;--color-secondary-300:#93c5fd;--color-secondary-400:#60a5fa;--color-secondary:#1e40af;--color-accent-100:#fef3c7;--color-accent:#b45309;--color-neutral-0:#fff;--color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-300:#d4d4d4;--color-neutral-400:#a3a3a3;--color-neutral-500:#737373;--color-neutral-600:#525252;--color-neutral-800:#262626;--color-neutral-900:#171717;--color-success-light:#dcfce7;--color-success:#16a34a;--color-bg-primary:var(--color-neutral-0);--color-bg-secondary:var(--color-neutral-50);--color-text-primary:var(--color-neutral-900);--color-text-secondary:var(--color-neutral-600);--color-text-muted:var(--color-neutral-400);--color-text-inverse:var(--color-neutral-0);--color-text-inverse-secondary:var(--color-neutral-300);--color-text-link:var(--color-primary);--color-text-link-hover:var(--color-primary-800);--color-border-muted:var(--color-neutral-100);--color-surface-1:var(--color-neutral-0);--space-1:0.25rem;--space-1-5:0.375rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--space-24:6rem;--container-max:1200px;--container-narrow:800px;--section-padding-y-md:var(--space-12);--section-padding-y-lg:var(--space-16);--radius-sm:0.125rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgb(0 0 0/0.05);--shadow-md:0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);--duration-fast:150ms;--easing-default:cubic-bezier(0.4,0,0.2,1);--z-sticky:20;--icon-sm:16px;--icon-lg:24px;--icon-xl:32px;--btn-primary-bg:var(--color-primary);--btn-primary-bg-hover:var(--color-primary-800);--btn-primary-text:var(--color-neutral-0);--btn-focus-ring-width:2px;--btn-focus-ring-offset:2px;--btn-focus-ring-color:var(--color-primary-400)}
html{font-size:16px;font-size:clamp(14px,2.5vw,18px);scroll-behavior:smooth}
@media(min-width:640px){:root{--heading-h1-size:var(--font-size-5xl)}}
@media(min-width:1024px){:root{--heading-h1-size:4.5rem;--heading-h2-size:var(--font-size-4xl)}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-family-primary);font-size:var(--text-body-size);line-height:1.6;color:var(--color-text-primary);background-color:var(--color-bg-primary);-webkit-font-smoothing:antialiased}
html[lang="en"] body,html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] h4{font-family:var(--font-family-secondary)}
img,svg{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight)}
h1{font-size:var(--heading-h1-size);letter-spacing:-0.02em}h2{font-size:var(--heading-h2-size);letter-spacing:-0.01em}h3{font-size:var(--heading-h3-size)}
p{margin-bottom:var(--space-4)}p:last-child{margin-bottom:0}
.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}
.text-lead{font-size:var(--text-lead-size);line-height:1.7;color:var(--color-text-secondary)}
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-4)}
@media(min-width:640px){.container{padding:0 var(--space-6)}}@media(min-width:1024px){.container{padding:0 var(--space-8)}}
.container--narrow{max-width:var(--container-narrow)}.section{padding:var(--section-padding-y-md) 0}
@media(min-width:1024px){.section{padding:var(--section-padding-y-lg) 0}}
.header{position:sticky;top:0;z-index:var(--z-sticky);background:var(--color-bg-primary);border-bottom:1px solid var(--color-border-muted)}
.header__container{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 var(--space-4)}
@media(min-width:1024px){.header__container{height:72px;padding:0 var(--space-8)}}
.header__logo{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}
.header__logo-icon{width:40px;height:40px;background:var(--color-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-neutral-0);font-weight:var(--font-weight-bold)}
.nav{display:none;align-items:center;gap:var(--space-1)}@media(min-width:1024px){.nav{display:flex}}
.nav__link{display:inline-flex;align-items:center;height:40px;padding:0 var(--space-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);border-radius:var(--radius-md);transition:all var(--duration-fast) var(--easing-default)}
.nav__link:hover{color:var(--color-text-primary);background:var(--color-neutral-100)}.nav__link--active{color:var(--color-primary);background:var(--color-primary-50)}
.header__actions{display:flex;align-items:center;gap:var(--space-2)}
.mobile-menu-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;border-radius:var(--radius-md);cursor:pointer;color:var(--color-text-primary)}
.mobile-menu-btn:hover{background:var(--color-neutral-100)}@media(min-width:1024px){.mobile-menu-btn{display:none}}
.lang-toggle{display:flex;align-items:center;justify-content:center;min-width:48px;height:36px;padding:0 var(--space-3);background:var(--color-secondary-100);color:var(--color-secondary);font-family:var(--font-family-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);border:2px solid var(--color-secondary-200);border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast) var(--easing-default)}
.lang-toggle:hover{background:var(--color-secondary-200);border-color:var(--color-secondary-300)}.lang-toggle:focus-visible{outline:2px solid var(--color-secondary-400);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-family-primary);font-weight:var(--font-weight-medium);white-space:nowrap;cursor:pointer;border:2px solid transparent;border-radius:var(--radius-md);transition:all var(--duration-fast) var(--easing-default);text-decoration:none}
html[lang="en"] .btn{font-family:var(--font-family-secondary)}.btn--md{height:40px;padding:0 var(--space-4);font-size:var(--font-size-base)}.btn--lg{height:48px;padding:0 var(--space-6);font-size:var(--font-size-md)}
.btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-text)}.btn--primary:hover{background:var(--btn-primary-bg-hover)}.btn--primary:focus-visible{outline:var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);outline-offset:var(--btn-focus-ring-offset)}
.btn--secondary{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}.btn--secondary:hover{background:var(--color-primary-50)}
.btn--inverse{background:var(--color-neutral-0);color:var(--color-neutral-900)}.btn--inverse:hover{background:var(--color-neutral-100)}
.btn--inverse-outline{background:transparent;color:var(--color-neutral-0);border-color:var(--color-neutral-0)}.btn--inverse-outline:hover{background:rgba(255,255,255,0.1)}
.hero-issue{background:linear-gradient(135deg,var(--color-secondary-50) 0%,var(--color-secondary-100) 100%);text-align:center;padding:var(--space-16) 0}
@media(min-width:1024px){.hero-issue{padding:var(--space-24) 0}}
.hero-issue__badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1-5) var(--space-3);background:var(--color-secondary);color:var(--color-neutral-0);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);border-radius:var(--radius-full);margin-bottom:var(--space-6)}
.hero-issue__icon{width:64px;height:64px;background:var(--color-neutral-0);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-6);color:var(--color-secondary);box-shadow:var(--shadow-md)}
.hero-issue__title{max-width:800px;margin:0 auto var(--space-6)}.hero-issue__stat{display:inline-flex;padding:var(--space-3) var(--space-6);background:var(--color-accent-100);color:var(--color-accent);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);border-radius:var(--radius-lg);margin-bottom:var(--space-6)}
.hero-issue__subtitle{max-width:600px;margin:0 auto}.issue-section{border-bottom:1px solid var(--color-border-muted)}.issue-section:last-of-type{border-bottom:none}.issue-section--alt{background:var(--color-bg-secondary)}
.issue-section__header{margin-bottom:var(--space-8)}.issue-section__number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--color-secondary);color:var(--color-neutral-0);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);border-radius:var(--radius-full);margin-bottom:var(--space-4)}
.issue-section__title{margin-bottom:var(--space-2)}.issue-section__subtitle{color:var(--color-text-secondary)}.problem-content{max-width:var(--container-narrow)}
.problem-content p{font-size:var(--font-size-md);line-height:1.8;margin-bottom:var(--space-6)}
.problem-highlight{background:var(--color-accent-100);padding:var(--space-6);border-radius:var(--radius-lg);border-left:4px solid var(--color-accent);margin:var(--space-8) 0}
.problem-highlight__stat{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-accent);margin-bottom:var(--space-2)}.problem-highlight__text{color:var(--color-text-secondary);margin-bottom:0}
.commitments-list{max-width:var(--container-narrow)}.commitment-item{display:flex;gap:var(--space-4);padding:var(--space-6);background:var(--color-surface-1);border:1px solid var(--color-border-muted);border-radius:var(--radius-lg);margin-bottom:var(--space-4);transition:all var(--duration-fast) var(--easing-default)}
.commitment-item:hover{border-color:var(--color-secondary-200);box-shadow:var(--shadow-md)}.commitment-item:last-child{margin-bottom:0}
.commitment-item__number{flex-shrink:0;width:48px;height:48px;background:var(--color-secondary-100);color:var(--color-secondary);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}
.commitment-item__content{flex-grow:1}.commitment-item__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-2)}.commitment-item__desc{color:var(--color-text-secondary);margin-bottom:0}
.progress-table{width:100%;border-collapse:collapse;background:var(--color-surface-1);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.progress-table th,.progress-table td{padding:var(--space-4);text-align:left;border-bottom:1px solid var(--color-border-muted)}
.progress-table th{background:var(--color-secondary);color:var(--color-neutral-0);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:0.05em}
.progress-table tr:last-child td{border-bottom:none}.progress-table tr:hover td{background:var(--color-bg-secondary)}.progress-table td{font-size:var(--font-size-sm)}
.progress-badge{display:inline-flex;padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-md)}
.progress-badge--target{background:var(--color-secondary-100);color:var(--color-secondary)}.progress-badge--timeline{background:var(--color-accent-100);color:var(--color-accent)}
@media(max-width:767px){.progress-table,.progress-table thead,.progress-table tbody,.progress-table th,.progress-table td,.progress-table tr{display:block}.progress-table thead{display:none}.progress-table tr{margin-bottom:var(--space-4);border:1px solid var(--color-border-muted);border-radius:var(--radius-lg)}.progress-table td{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4)}.progress-table td::before{content:attr(data-label);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);font-size:var(--font-size-xs);text-transform:uppercase}.progress-table td:last-child{border-bottom:none}}
.sources-list{max-width:var(--container-narrow)}.source-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface-1);border:1px solid var(--color-border-muted);border-radius:var(--radius-lg);margin-bottom:var(--space-3);transition:all var(--duration-fast) var(--easing-default)}
.source-item:hover{border-color:var(--color-secondary-200);background:var(--color-secondary-50)}.source-item:last-child{margin-bottom:0}
.source-item__icon{flex-shrink:0;width:32px;height:32px;background:var(--color-secondary-100);color:var(--color-secondary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}
.source-item__content{flex-grow:1}.source-item__title{font-weight:var(--font-weight-semibold);color:var(--color-secondary);margin-bottom:var(--space-1)}.source-item__meta{font-size:var(--font-size-sm);color:var(--color-text-muted)}
.cta-section{background:var(--color-secondary);color:var(--color-text-inverse);text-align:center}.cta-section__title{color:var(--color-text-inverse);margin-bottom:var(--space-4)}.cta-section__desc{max-width:600px;margin:0 auto var(--space-8);opacity:0.9}
.cta-section__actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}@media(min-width:640px){.cta-section__actions{flex-direction:row;justify-content:center}}
.footer{background:var(--color-neutral-900);color:var(--color-text-inverse);padding:var(--space-12) 0 var(--space-8)}
.footer__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8);margin-bottom:var(--space-12)}@media(min-width:768px){.footer__grid{grid-template-columns:repeat(4,1fr)}}
.footer__heading{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-inverse);margin-bottom:var(--space-4)}
.footer__link{display:block;padding:var(--space-1) 0;font-size:var(--font-size-sm);color:var(--color-text-inverse-secondary);transition:color var(--duration-fast) var(--easing-default)}.footer__link:hover{color:var(--color-text-inverse)}
.footer__bottom{padding-top:var(--space-8);border-top:1px solid var(--color-neutral-800);display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}@media(min-width:768px){.footer__bottom{flex-direction:row;justify-content:space-between}}
.footer__copyright{font-size:var(--font-size-sm);color:var(--color-text-inverse-secondary)}.footer__lite-toggle{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-inverse-secondary)}
.checkbox{width:20px;height:20px;appearance:none;background:transparent;border:2px solid var(--color-neutral-500);border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.checkbox:checked{background:var(--color-primary-400);border-color:var(--color-primary-400)}.checkbox:checked::after{content:'';width:6px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox:focus-visible{outline:2px solid var(--color-primary-400);outline-offset:2px}
.lite-mode img:not(.essential),.lite-mode video,.lite-mode iframe{display:none!important}.lite-mode .hero-issue{background:var(--color-bg-secondary)!important}.lite-mode *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}
.icon{display:inline-flex;align-items:center;justify-content:center;color:currentColor}.icon--sm{width:var(--icon-sm);height:var(--icon-sm)}.icon--lg{width:var(--icon-lg);height:var(--icon-lg)}.icon--xl{width:var(--icon-xl);height:var(--icon-xl)}
.breadcrumb{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4) 0;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.breadcrumb__link{color:var(--color-text-link)}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__separator{color:var(--color-text-muted)}.breadcrumb__current{color:var(--color-text-primary);font-weight:var(--font-weight-medium)}
/* ===== Styles from jobs-skills.html ===== */
:root {
--font-family-primary: 'Noto Sans Bengali', 'Hind Siliguri', 'Kalpurush', system-ui, sans-serif;
--font-family-secondary: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem;
--font-size-md: 1.125rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem; --font-size-3xl: 2.25rem; --font-size-4xl: 3rem; --font-size-5xl: 4rem;
--font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;
--line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.625;
--heading-h1-size: var(--font-size-4xl); --heading-h2-size: var(--font-size-3xl);
--heading-h3-size: var(--font-size-2xl); --heading-h4-size: var(--font-size-xl);
--text-body-size: var(--font-size-base); --text-lead-size: var(--font-size-lg);
--color-primary-50: #ecfdf5; --color-primary-100: #d1fae5; --color-primary-200: #a7f3d0;
--color-primary-400: #34d399; --color-primary-800: #065f46; --color-primary: #006a4e;
--color-secondary-50: #eff6ff; --color-secondary-100: #dbeafe; --color-secondary-200: #bfdbfe;
--color-secondary-300: #93c5fd; --color-secondary-400: #60a5fa; --color-secondary: #1e40af;
--color-accent-100: #fef3c7; --color-accent: #b45309;
--color-neutral-0: #ffffff; --color-neutral-50: #fafafa; --color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5; --color-neutral-300: #d4d4d4; --color-neutral-400: #a3a3a3;
--color-neutral-500: #737373; --color-neutral-600: #525252; --color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-success-light: #dcfce7; --color-success: #16a34a;
--color-bg-primary: var(--color-neutral-0); --color-bg-secondary: var(--color-neutral-50);
--color-text-primary: var(--color-neutral-900); --color-text-secondary: var(--color-neutral-600);
--color-text-muted: var(--color-neutral-400); --color-text-inverse: var(--color-neutral-0);
--color-text-inverse-secondary: var(--color-neutral-300);
--color-text-link: var(--color-primary); --color-text-link-hover: var(--color-primary-800);
--color-border-muted: var(--color-neutral-100); --color-surface-1: var(--color-neutral-0);
--space-1: 0.25rem; --space-1-5: 0.375rem; --space-2: 0.5rem; --space-3: 0.75rem;
--space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;
--space-12: 3rem; --space-16: 4rem; --space-24: 6rem;
--container-max: 1200px; --container-narrow: 800px;
--section-padding-y-md: var(--space-12); --section-padding-y-lg: var(--space-16);
--radius-sm: 0.125rem; --radius-md: 0.375rem; --radius-lg: 0.5rem;
--radius-xl: 0.75rem; --radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--duration-fast: 150ms; --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--z-sticky: 20;
--icon-sm: 16px; --icon-lg: 24px; --icon-xl: 32px;
--btn-primary-bg: var(--color-primary); --btn-primary-bg-hover: var(--color-primary-800);
--btn-primary-text: var(--color-neutral-0);
--btn-focus-ring-width: 2px; --btn-focus-ring-offset: 2px; --btn-focus-ring-color: var(--color-primary-400);
}
html { font-size: 16px; font-size: clamp(14px, 2.5vw, 18px); scroll-behavior: smooth; }
@media (min-width: 640px) { :root { --heading-h1-size: var(--font-size-5xl); } }
@media (min-width: 1024px) { :root { --heading-h1-size: 4.5rem; --heading-h2-size: var(--font-size-4xl); } }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-family-primary); font-size: var(--text-body-size); line-height: 1.6; color: var(--color-text-primary); background-color: var(--color-bg-primary); -webkit-font-smoothing: antialiased; }
html[lang="en"] body, html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4 { font-family: var(--font-family-secondary); }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-family-primary); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
h1 { font-size: var(--heading-h1-size); letter-spacing: -0.02em; }
h2 { font-size: var(--heading-h2-size); letter-spacing: -0.01em; }
h3 { font-size: var(--heading-h3-size); }
p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }
.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; }
.text-lead { font-size: var(--text-lead-size); line-height: 1.7; color: var(--color-text-secondary); }
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 640px) { .container { padding: 0 var(--space-6); } }
@media (min-width: 1024px) { .container { padding: 0 var(--space-8); } }
.container--narrow { max-width: var(--container-narrow); }
.section { padding: var(--section-padding-y-md) 0; }
@media (min-width: 1024px) { .section { padding: var(--section-padding-y-lg) 0; } }
.header { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-bg-primary); border-bottom: 1px solid var(--color-border-muted); }
.header__container { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 var(--space-4); }
@media (min-width: 1024px) { .header__container { height: 72px; padding: 0 var(--space-8); } }
.header__logo { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-primary); }
.header__logo-icon { width: 40px; height: 40px; background: var(--color-primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-neutral-0); font-weight: var(--font-weight-bold); }
.nav { display: none; align-items: center; gap: var(--space-1); }
@media (min-width: 1024px) { .nav { display: flex; } }
.nav__link { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--space-3); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); border-radius: var(--radius-md); transition: all var(--duration-fast) var(--easing-default); }
.nav__link:hover { color: var(--color-text-primary); background: var(--color-neutral-100); }
.nav__link--active { color: var(--color-primary); background: var(--color-primary-50); }
.header__actions { display: flex; align-items: center; gap: var(--space-2); }
.mobile-menu-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; border-radius: var(--radius-md); cursor: pointer; color: var(--color-text-primary); }
.mobile-menu-btn:hover { background: var(--color-neutral-100); }
@media (min-width: 1024px) { .mobile-menu-btn { display: none; } }
.lang-toggle { display: flex; align-items: center; justify-content: center; min-width: 48px; height: 36px; padding: 0 var(--space-3); background: var(--color-secondary-100); color: var(--color-secondary); font-family: var(--font-family-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); border: 2px solid var(--color-secondary-200); border-radius: var(--radius-full); cursor: pointer; transition: all var(--duration-fast) var(--easing-default); }
.lang-toggle:hover { background: var(--color-secondary-200); border-color: var(--color-secondary-300); }
.lang-toggle:focus-visible { outline: 2px solid var(--color-secondary-400); outline-offset: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-family-primary); font-weight: var(--font-weight-medium); white-space: nowrap; cursor: pointer; border: 2px solid transparent; border-radius: var(--radius-md); transition: all var(--duration-fast) var(--easing-default); text-decoration: none; }
html[lang="en"] .btn { font-family: var(--font-family-secondary); }
.btn--md { height: 40px; padding: 0 var(--space-4); font-size: var(--font-size-base); }
.btn--lg { height: 48px; padding: 0 var(--space-6); font-size: var(--font-size-md); }
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn--primary:hover { background: var(--btn-primary-bg-hover); }
.btn--primary:focus-visible { outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color); outline-offset: var(--btn-focus-ring-offset); }
.btn--secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--secondary:hover { background: var(--color-primary-50); }
.btn--inverse { background: var(--color-neutral-0); color: var(--color-neutral-900); }
.btn--inverse:hover { background: var(--color-neutral-100); }
.btn--inverse-outline { background: transparent; color: var(--color-neutral-0); border-color: var(--color-neutral-0); }
.btn--inverse-outline:hover { background: rgba(255,255,255,0.1); }
.hero-issue { background: linear-gradient(135deg, var(--color-secondary-50) 0%, var(--color-secondary-100) 100%); text-align: center; padding: var(--space-16) 0; }
@media (min-width: 1024px) { .hero-issue { padding: var(--space-24) 0; } }
.hero-issue__badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1-5) var(--space-3); background: var(--color-secondary); color: var(--color-neutral-0); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); border-radius: var(--radius-full); margin-bottom: var(--space-6); }
.hero-issue__icon { width: 64px; height: 64px; background: var(--color-neutral-0); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-6); color: var(--color-secondary); box-shadow: var(--shadow-md); }
.hero-issue__title { max-width: 800px; margin: 0 auto var(--space-6); }
.hero-issue__stat { display: inline-flex; padding: var(--space-3) var(--space-6); background: var(--color-accent-100); color: var(--color-accent); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); border-radius: var(--radius-lg); margin-bottom: var(--space-6); }
.hero-issue__subtitle { max-width: 600px; margin: 0 auto; }
.issue-section { border-bottom: 1px solid var(--color-border-muted); }
.issue-section:last-of-type { border-bottom: none; }
.issue-section--alt { background: var(--color-bg-secondary); }
.issue-section__header { margin-bottom: var(--space-8); }
.issue-section__number { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--color-secondary); color: var(--color-neutral-0); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); border-radius: var(--radius-full); margin-bottom: var(--space-4); }
.issue-section__title { margin-bottom: var(--space-2); }
.issue-section__subtitle { color: var(--color-text-secondary); }
.problem-content { max-width: var(--container-narrow); }
.problem-content p { font-size: var(--font-size-md); line-height: 1.8; margin-bottom: var(--space-6); }
.problem-highlight { background: var(--color-accent-100); padding: var(--space-6); border-radius: var(--radius-lg); border-left: 4px solid var(--color-accent); margin: var(--space-8) 0; }
.problem-highlight__stat { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-accent); margin-bottom: var(--space-2); }
.problem-highlight__text { color: var(--color-text-secondary); margin-bottom: 0; }
.commitments-list { max-width: var(--container-narrow); }
.commitment-item { display: flex; gap: var(--space-4); padding: var(--space-6); background: var(--color-surface-1); border: 1px solid var(--color-border-muted); border-radius: var(--radius-lg); margin-bottom: var(--space-4); transition: all var(--duration-fast) var(--easing-default); }
.commitment-item:hover { border-color: var(--color-secondary-200); box-shadow: var(--shadow-md); }
.commitment-item:last-child { margin-bottom: 0; }
.commitment-item__number { flex-shrink: 0; width: 48px; height: 48px; background: var(--color-secondary-100); color: var(--color-secondary); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; }
.commitment-item__content { flex-grow: 1; }
.commitment-item__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }
.commitment-item__desc { color: var(--color-text-secondary); margin-bottom: 0; }
.progress-table { width: 100%; border-collapse: collapse; background: var(--color-surface-1); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.progress-table th, .progress-table td { padding: var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border-muted); }
.progress-table th { background: var(--color-secondary); color: var(--color-neutral-0); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.05em; }
.progress-table tr:last-child td { border-bottom: none; }
.progress-table tr:hover td { background: var(--color-bg-secondary); }
.progress-table td { font-size: var(--font-size-sm); }
.progress-badge { display: inline-flex; padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border-radius: var(--radius-md); }
.progress-badge--target { background: var(--color-secondary-100); color: var(--color-secondary); }
.progress-badge--timeline { background: var(--color-accent-100); color: var(--color-accent); }
@media (max-width: 767px) {
.progress-table, .progress-table thead, .progress-table tbody, .progress-table th, .progress-table td, .progress-table tr { display: block; }
.progress-table thead { display: none; }
.progress-table tr { margin-bottom: var(--space-4); border: 1px solid var(--color-border-muted); border-radius: var(--radius-lg); }
.progress-table td { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); }
.progress-table td::before { content: attr(data-label); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); font-size: var(--font-size-xs); text-transform: uppercase; }
.progress-table td:last-child { border-bottom: none; }
}
.sources-list { max-width: var(--container-narrow); }
.source-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface-1); border: 1px solid var(--color-border-muted); border-radius: var(--radius-lg); margin-bottom: var(--space-3); transition: all var(--duration-fast) var(--easing-default); }
.source-item:hover { border-color: var(--color-secondary-200); background: var(--color-secondary-50); }
.source-item:last-child { margin-bottom: 0; }
.source-item__icon { flex-shrink: 0; width: 32px; height: 32px; background: var(--color-secondary-100); color: var(--color-secondary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.source-item__content { flex-grow: 1; }
.source-item__title { font-weight: var(--font-weight-semibold); color: var(--color-secondary); margin-bottom: var(--space-1); }
.source-item__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.cta-section { background: var(--color-secondary); color: var(--color-text-inverse); text-align: center; }
.cta-section__title { color: var(--color-text-inverse); margin-bottom: var(--space-4); }
.cta-section__desc { max-width: 600px; margin: 0 auto var(--space-8); opacity: 0.9; }
.cta-section__actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
@media (min-width: 640px) { .cta-section__actions { flex-direction: row; justify-content: center; } }
.footer { background: var(--color-neutral-900); color: var(--color-text-inverse); padding: var(--space-12) 0 var(--space-8); }
.footer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); margin-bottom: var(--space-12); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(4, 1fr); } }
.footer__heading { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-inverse); margin-bottom: var(--space-4); }
.footer__link { display: block; padding: var(--space-1) 0; font-size: var(--font-size-sm); color: var(--color-text-inverse-secondary); transition: color var(--duration-fast) var(--easing-default); }
.footer__link:hover { color: var(--color-text-inverse); }
.footer__bottom { padding-top: var(--space-8); border-top: 1px solid var(--color-neutral-800); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
@media (min-width: 768px) { .footer__bottom { flex-direction: row; justify-content: space-between; } }
.footer__copyright { font-size: var(--font-size-sm); color: var(--color-text-inverse-secondary); }
.footer__lite-toggle { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-inverse-secondary); }
.checkbox { width: 20px; height: 20px; appearance: none; background: transparent; border: 2px solid var(--color-neutral-500); border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.checkbox:checked { background: var(--color-primary-400); border-color: var(--color-primary-400); }
.checkbox:checked::after { content: ''; width: 6px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checkbox:focus-visible { outline: 2px solid var(--color-primary-400); outline-offset: 2px; }
.lite-mode img:not(.essential), .lite-mode video, .lite-mode iframe { display: none !important; }
.lite-mode .hero-issue { background: var(--color-bg-secondary) !important; }
.lite-mode * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
.icon { display: inline-flex; align-items: center; justify-content: center; color: currentColor; }
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }
.breadcrumb { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.breadcrumb__link { color: var(--color-text-link); }
.breadcrumb__link:hover { text-decoration: underline; }
.breadcrumb__separator { color: var(--color-text-muted); }
.breadcrumb__current { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
/* ===== Styles from public-safety-drugs-extortion.html ===== */
:root{--font-family-primary:'Noto Sans Bengali','Hind Siliguri','Kalpurush',system-ui,sans-serif;--font-family-secondary:'Inter','Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-md:1.125rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:1.875rem;--font-size-3xl:2.25rem;--font-size-4xl:3rem;--font-size-5xl:4rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.625;--heading-h1-size:var(--font-size-4xl);--heading-h2-size:var(--font-size-3xl);--heading-h3-size:var(--font-size-2xl);--heading-h4-size:var(--font-size-xl);--text-body-size:var(--font-size-base);--text-lead-size:var(--font-size-lg);--color-primary-50:#ecfdf5;--color-primary-100:#d1fae5;--color-primary-200:#a7f3d0;--color-primary-400:#34d399;--color-primary-800:#065f46;--color-primary:#006a4e;--color-secondary-50:#eff6ff;--color-secondary-100:#dbeafe;--color-secondary-200:#bfdbfe;--color-secondary-300:#93c5fd;--color-secondary-400:#60a5fa;--color-secondary:#1e40af;--color-accent-100:#fef3c7;--color-accent:#b45309;--color-neutral-0:#fff;--color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-300:#d4d4d4;--color-neutral-400:#a3a3a3;--color-neutral-500:#737373;--color-neutral-600:#525252;--color-neutral-800:#262626;--color-neutral-900:#171717;--color-success-light:#dcfce7;--color-success:#16a34a;--color-bg-primary:var(--color-neutral-0);--color-bg-secondary:var(--color-neutral-50);--color-text-primary:var(--color-neutral-900);--color-text-secondary:var(--color-neutral-600);--color-text-muted:var(--color-neutral-400);--color-text-inverse:var(--color-neutral-0);--color-text-inverse-secondary:var(--color-neutral-300);--color-text-link:var(--color-primary);--color-text-link-hover:var(--color-primary-800);--color-border-muted:var(--color-neutral-100);--color-surface-1:var(--color-neutral-0);--space-1:0.25rem;--space-1-5:0.375rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--space-24:6rem;--container-max:1200px;--container-narrow:800px;--section-padding-y-md:var(--space-12);--section-padding-y-lg:var(--space-16);--radius-sm:0.125rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgb(0 0 0/0.05);--shadow-md:0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);--duration-fast:150ms;--easing-default:cubic-bezier(0.4,0,0.2,1);--z-sticky:20;--icon-sm:16px;--icon-lg:24px;--icon-xl:32px;--btn-primary-bg:var(--color-primary);--btn-primary-bg-hover:var(--color-primary-800);--btn-primary-text:var(--color-neutral-0);--btn-focus-ring-width:2px;--btn-focus-ring-offset:2px;--btn-focus-ring-color:var(--color-primary-400)}
html{font-size:16px;font-size:clamp(14px,2.5vw,18px);scroll-behavior:smooth}
@media(min-width:640px){:root{--heading-h1-size:var(--font-size-5xl)}}
@media(min-width:1024px){:root{--heading-h1-size:4.5rem;--heading-h2-size:var(--font-size-4xl)}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-family-primary);font-size:var(--text-body-size);line-height:1.6;color:var(--color-text-primary);background-color:var(--color-bg-primary);-webkit-font-smoothing:antialiased}
html[lang="en"] body,html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] h4{font-family:var(--font-family-secondary)}
img,svg{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight)}
h1{font-size:var(--heading-h1-size);letter-spacing:-0.02em}h2{font-size:var(--heading-h2-size);letter-spacing:-0.01em}h3{font-size:var(--heading-h3-size)}
p{margin-bottom:var(--space-4)}p:last-child{margin-bottom:0}
.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}
.text-lead{font-size:var(--text-lead-size);line-height:1.7;color:var(--color-text-secondary)}
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-4)}
@media(min-width:640px){.container{padding:0 var(--space-6)}}@media(min-width:1024px){.container{padding:0 var(--space-8)}}
.container--narrow{max-width:var(--container-narrow)}.section{padding:var(--section-padding-y-md) 0}
@media(min-width:1024px){.section{padding:var(--section-padding-y-lg) 0}}
.header{position:sticky;top:0;z-index:var(--z-sticky);background:var(--color-bg-primary);border-bottom:1px solid var(--color-border-muted)}
.header__container{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 var(--space-4)}
@media(min-width:1024px){.header__container{height:72px;padding:0 var(--space-8)}}
.header__logo{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}
.header__logo-icon{width:40px;height:40px;background:var(--color-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-neutral-0);font-weight:var(--font-weight-bold)}
.nav{display:none;align-items:center;gap:var(--space-1)}@media(min-width:1024px){.nav{display:flex}}
.nav__link{display:inline-flex;align-items:center;height:40px;padding:0 var(--space-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);border-radius:var(--radius-md);transition:all var(--duration-fast) var(--easing-default)}
.nav__link:hover{color:var(--color-text-primary);background:var(--color-neutral-100)}.nav__link--active{color:var(--color-primary);background:var(--color-primary-50)}
.header__actions{display:flex;align-items:center;gap:var(--space-2)}
.mobile-menu-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;border-radius:var(--radius-md);cursor:pointer;color:var(--color-text-primary)}
.mobile-menu-btn:hover{background:var(--color-neutral-100)}@media(min-width:1024px){.mobile-menu-btn{display:none}}
.lang-toggle{display:flex;align-items:center;justify-content:center;min-width:48px;height:36px;padding:0 var(--space-3);background:var(--color-secondary-100);color:var(--color-secondary);font-family:var(--font-family-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);border:2px solid var(--color-secondary-200);border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast) var(--easing-default)}
.lang-toggle:hover{background:var(--color-secondary-200);border-color:var(--color-secondary-300)}.lang-toggle:focus-visible{outline:2px solid var(--color-secondary-400);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-family-primary);font-weight:var(--font-weight-medium);white-space:nowrap;cursor:pointer;border:2px solid transparent;border-radius:var(--radius-md);transition:all var(--duration-fast) var(--easing-default);text-decoration:none}
html[lang="en"] .btn{font-family:var(--font-family-secondary)}.btn--md{height:40px;padding:0 var(--space-4);font-size:var(--font-size-base)}.btn--lg{height:48px;padding:0 var(--space-6);font-size:var(--font-size-md)}
.btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-text)}.btn--primary:hover{background:var(--btn-primary-bg-hover)}.btn--primary:focus-visible{outline:var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);outline-offset:var(--btn-focus-ring-offset)}
.btn--secondary{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}.btn--secondary:hover{background:var(--color-primary-50)}
.btn--inverse{background:var(--color-neutral-0);color:var(--color-neutral-900)}.btn--inverse:hover{background:var(--color-neutral-100)}
.btn--inverse-outline{background:transparent;color:var(--color-neutral-0);border-color:var(--color-neutral-0)}.btn--inverse-outline:hover{background:rgba(255,255,255,0.1)}
.hero-issue{background:linear-gradient(135deg,var(--color-secondary-50) 0%,var(--color-secondary-100) 100%);text-align:center;padding:var(--space-16) 0}
@media(min-width:1024px){.hero-issue{padding:var(--space-24) 0}}
.hero-issue__badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1-5) var(--space-3);background:var(--color-secondary);color:var(--color-neutral-0);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);border-radius:var(--radius-full);margin-bottom:var(--space-6)}
.hero-issue__icon{width:64px;height:64px;background:var(--color-neutral-0);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-6);color:var(--color-secondary);box-shadow:var(--shadow-md)}
.hero-issue__title{max-width:800px;margin:0 auto var(--space-6)}.hero-issue__stat{display:inline-flex;padding:var(--space-3) var(--space-6);background:var(--color-accent-100);color:var(--color-accent);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);border-radius:var(--radius-lg);margin-bottom:var(--space-6)}
.hero-issue__subtitle{max-width:600px;margin:0 auto}.issue-section{border-bottom:1px solid var(--color-border-muted)}.issue-section:last-of-type{border-bottom:none}.issue-section--alt{background:var(--color-bg-secondary)}
.issue-section__header{margin-bottom:var(--space-8)}.issue-section__number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--color-secondary);color:var(--color-neutral-0);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);border-radius:var(--radius-full);margin-bottom:var(--space-4)}
.issue-section__title{margin-bottom:var(--space-2)}.issue-section__subtitle{color:var(--color-text-secondary)}.problem-content{max-width:var(--container-narrow)}
.problem-content p{font-size:var(--font-size-md);line-height:1.8;margin-bottom:var(--space-6)}
.problem-highlight{background:var(--color-accent-100);padding:var(--space-6);border-radius:var(--radius-lg);border-left:4px solid var(--color-accent);margin:var(--space-8) 0}
.problem-highlight__stat{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-accent);margin-bottom:var(--space-2)}.problem-highlight__text{color:var(--color-text-secondary);margin-bottom:0}
.commitments-list{max-width:var(--container-narrow)}.commitment-item{display:flex;gap:var(--space-4);padding:var(--space-6);background:var(--color-surface-1);border:1px solid var(--color-border-muted);border-radius:var(--radius-lg);margin-bottom:var(--space-4);transition:all var(--duration-fast) var(--easing-default)}
.commitment-item:hover{border-color:var(--color-secondary-200);box-shadow:var(--shadow-md)}.commitment-item:last-child{margin-bottom:0}
.commitment-item__number{flex-shrink:0;width:48px;height:48px;background:var(--color-secondary-100);color:var(--color-secondary);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}
.commitment-item__content{flex-grow:1}.commitment-item__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-2)}.commitment-item__desc{color:var(--color-text-secondary);margin-bottom:0}
.progress-table{width:100%;border-collapse:collapse;background:var(--color-surface-1);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.progress-table th,.progress-table td{padding:var(--space-4);text-align:left;border-bottom:1px solid var(--color-border-muted)}
.progress-table th{background:var(--color-secondary);color:var(--color-neutral-0);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:0.05em}
.progress-table tr:last-child td{border-bottom:none}.progress-table tr:hover td{background:var(--color-bg-secondary)}.progress-table td{font-size:var(--font-size-sm)}
.progress-badge{display:inline-flex;padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-md)}
.progress-badge--target{background:var(--color-secondary-100);color:var(--color-secondary)}.progress-badge--timeline{background:var(--color-accent-100);color:var(--color-accent)}
@media(max-width:767px){.progress-table,.progress-table thead,.progress-table tbody,.progress-table th,.progress-table td,.progress-table tr{display:block}.progress-table thead{display:none}.progress-table tr{margin-bottom:var(--space-4);border:1px solid var(--color-border-muted);border-radius:var(--radius-lg)}.progress-table td{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4)}.progress-table td::before{content:attr(data-label);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);font-size:var(--font-size-xs);text-transform:uppercase}.progress-table td:last-child{border-bottom:none}}
.sources-list{max-width:var(--container-narrow)}.source-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface-1);border:1px solid var(--color-border-muted);border-radius:var(--radius-lg);margin-bottom:var(--space-3);transition:all var(--duration-fast) var(--easing-default)}
.source-item:hover{border-color:var(--color-secondary-200);background:var(--color-secondary-50)}.source-item:last-child{margin-bottom:0}
.source-item__icon{flex-shrink:0;width:32px;height:32px;background:var(--color-secondary-100);color:var(--color-secondary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}
.source-item__content{flex-grow:1}.source-item__title{font-weight:var(--font-weight-semibold);color:var(--color-secondary);margin-bottom:var(--space-1)}.source-item__meta{font-size:var(--font-size-sm);color:var(--color-text-muted)}
.cta-section{background:var(--color-secondary);color:var(--color-text-inverse);text-align:center}.cta-section__title{color:var(--color-text-inverse);margin-bottom:var(--space-4)}.cta-section__desc{max-width:600px;margin:0 auto var(--space-8);opacity:0.9}
.cta-section__actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}@media(min-width:640px){.cta-section__actions{flex-direction:row;justify-content:center}}
.footer{background:var(--color-neutral-900);color:var(--color-text-inverse);padding:var(--space-12) 0 var(--space-8)}
.footer__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8);margin-bottom:var(--space-12)}@media(min-width:768px){.footer__grid{grid-template-columns:repeat(4,1fr)}}
.footer__heading{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-inverse);margin-bottom:var(--space-4)}
.footer__link{display:block;padding:var(--space-1) 0;font-size:var(--font-size-sm);color:var(--color-text-inverse-secondary);transition:color var(--duration-fast) var(--easing-default)}.footer__link:hover{color:var(--color-text-inverse)}
.footer__bottom{padding-top:var(--space-8);border-top:1px solid var(--color-neutral-800);display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}@media(min-width:768px){.footer__bottom{flex-direction:row;justify-content:space-between}}
.footer__copyright{font-size:var(--font-size-sm);color:var(--color-text-inverse-secondary)}.footer__lite-toggle{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-inverse-secondary)}
.checkbox{width:20px;height:20px;appearance:none;background:transparent;border:2px solid var(--color-neutral-500);border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.checkbox:checked{background:var(--color-primary-400);border-color:var(--color-primary-400)}.checkbox:checked::after{content:'';width:6px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox:focus-visible{outline:2px solid var(--color-primary-400);outline-offset:2px}
.lite-mode img:not(.essential),.lite-mode video,.lite-mode iframe{display:none!important}.lite-mode .hero-issue{background:var(--color-bg-secondary)!important}.lite-mode *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}
.icon{display:inline-flex;align-items:center;justify-content:center;color:currentColor}.icon--sm{width:var(--icon-sm);height:var(--icon-sm)}.icon--lg{width:var(--icon-lg);height:var(--icon-lg)}.icon--xl{width:var(--icon-xl);height:var(--icon-xl)}
.breadcrumb{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4) 0;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.breadcrumb__link{color:var(--color-text-link)}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__separator{color:var(--color-text-muted)}.breadcrumb__current{color:var(--color-text-primary);font-weight:var(--font-weight-medium)}
/* ===== Styles from youth-playgrounds-sports.html ===== */
:root{--font-family-primary:'Noto Sans Bengali','Hind Siliguri','Kalpurush',system-ui,sans-serif;--font-family-secondary:'Inter','Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-md:1.125rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:1.875rem;--font-size-3xl:2.25rem;--font-size-4xl:3rem;--font-size-5xl:4rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.625;--heading-h1-size:var(--font-size-4xl);--heading-h2-size:var(--font-size-3xl);--heading-h3-size:var(--font-size-2xl);--heading-h4-size:var(--font-size-xl);--text-body-size:var(--font-size-base);--text-lead-size:var(--font-size-lg);--color-primary-50:#ecfdf5;--color-primary-100:#d1fae5;--color-primary-200:#a7f3d0;--color-primary-400:#34d399;--color-primary-800:#065f46;--color-primary:#006a4e;--color-secondary-50:#eff6ff;--color-secondary-100:#dbeafe;--color-secondary-200:#bfdbfe;--color-secondary-300:#93c5fd;--color-secondary-400:#60a5fa;--color-secondary:#1e40af;--color-accent-100:#fef3c7;--color-accent:#b45309;--color-neutral-0:#fff;--color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-300:#d4d4d4;--color-neutral-400:#a3a3a3;--color-neutral-500:#737373;--color-neutral-600:#525252;--color-neutral-800:#262626;--color-neutral-900:#171717;--color-success-light:#dcfce7;--color-success:#16a34a;--color-bg-primary:var(--color-neutral-0);--color-bg-secondary:var(--color-neutral-50);--color-text-primary:var(--color-neutral-900);--color-text-secondary:var(--color-neutral-600);--color-text-muted:var(--color-neutral-400);--color-text-inverse:var(--color-neutral-0);--color-text-inverse-secondary:var(--color-neutral-300);--color-text-link:var(--color-primary);--color-text-link-hover:var(--color-primary-800);--color-border-muted:var(--color-neutral-100);--color-surface-1:var(--color-neutral-0);--space-1:0.25rem;--space-1-5:0.375rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--space-24:6rem;--container-max:1200px;--container-narrow:800px;--section-padding-y-md:var(--space-12);--section-padding-y-lg:var(--space-16);--radius-sm:0.125rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgb(0 0 0/0.05);--shadow-md:0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);--duration-fast:150ms;--easing-default:cubic-bezier(0.4,0,0.2,1);--z-sticky:20;--icon-sm:16px;--icon-lg:24px;--icon-xl:32px;--btn-primary-bg:var(--color-primary);--btn-primary-bg-hover:var(--color-primary-800);--btn-primary-text:var(--color-neutral-0);--btn-focus-ring-width:2px;--btn-focus-ring-offset:2px;--btn-focus-ring-color:var(--color-primary-400)}
html{font-size:16px;font-size:clamp(14px,2.5vw,18px);scroll-behavior:smooth}
@media(min-width:640px){:root{--heading-h1-size:var(--font-size-5xl)}}
@media(min-width:1024px){:root{--heading-h1-size:4.5rem;--heading-h2-size:var(--font-size-4xl)}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-family-primary);font-size:var(--text-body-size);line-height:1.6;color:var(--color-text-primary);background-color:var(--color-bg-primary);-webkit-font-smoothing:antialiased}
html[lang="en"] body,html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] h4{font-family:var(--font-family-secondary)}
img,svg{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight)}
h1{font-size:var(--heading-h1-size);letter-spacing:-0.02em}h2{font-size:var(--heading-h2-size);letter-spacing:-0.01em}h3{font-size:var(--heading-h3-size)}
p{margin-bottom:var(--space-4)}p:last-child{margin-bottom:0}
.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}
.text-lead{font-size:var(--text-lead-size);line-height:1.7;color:var(--color-text-secondary)}
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-4)}
@media(min-width:640px){.container{padding:0 var(--space-6)}}@media(min-width:1024px){.container{padding:0 var(--space-8)}}
.container--narrow{max-width:var(--container-narrow)}.section{padding:var(--section-padding-y-md) 0}
@media(min-width:1024px){.section{padding:var(--section-padding-y-lg) 0}}
.header{position:sticky;top:0;z-index:var(--z-sticky);background:var(--color-bg-primary);border-bottom:1px solid var(--color-border-muted)}
.header__container{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 var(--space-4)}
@media(min-width:1024px){.header__container{height:72px;padding:0 var(--space-8)}}
.header__logo{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}
.header__logo-icon{width:40px;height:40px;background:var(--color-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-neutral-0);font-weight:var(--font-weight-bold)}
.nav{display:none;align-items:center;gap:var(--space-1)}@media(min-width:1024px){.nav{display:flex}}
.nav__link{display:inline-flex;align-items:center;height:40px;padding:0 var(--space-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);border-radius:var(--radius-md);transition:all var(--duration-fast) var(--easing-default)}
.nav__link:hover{color:var(--color-text-primary);background:var(--color-neutral-100)}.nav__link--active{color:var(--color-primary);background:var(--color-primary-50)}
.header__actions{display:flex;align-items:center;gap:var(--space-2)}
.mobile-menu-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;border-radius:var(--radius-md);cursor:pointer;color:var(--color-text-primary)}
.mobile-menu-btn:hover{background:var(--color-neutral-100)}@media(min-width:1024px){.mobile-menu-btn{display:none}}
.lang-toggle{display:flex;align-items:center;justify-content:center;min-width:48px;height:36px;padding:0 var(--space-3);background:var(--color-secondary-100);color:var(--color-secondary);font-family:var(--font-family-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);border:2px solid var(--color-secondary-200);border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast) var(--easing-default)}
.lang-toggle:hover{background:var(--color-secondary-200);border-color:var(--color-secondary-300)}.lang-toggle:focus-visible{outline:2px solid var(--color-secondary-400);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-family-primary);font-weight:var(--font-weight-medium);white-space:nowrap;cursor:pointer;border:2px solid transparent;border-radius:var(--radius-md);transition:all var(--duration-fast) var(--easing-default);text-decoration:none}
html[lang="en"] .btn{font-family:var(--font-family-secondary)}.btn--md{height:40px;padding:0 var(--space-4);font-size:var(--font-size-base)}.btn--lg{height:48px;padding:0 var(--space-6);font-size:var(--font-size-md)}
.btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-text)}.btn--primary:hover{background:var(--btn-primary-bg-hover)}.btn--primary:focus-visible{outline:var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);outline-offset:var(--btn-focus-ring-offset)}
.btn--secondary{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}.btn--secondary:hover{background:var(--color-primary-50)}
.btn--inverse{background:var(--color-neutral-0);color:var(--color-neutral-900)}.btn--inverse:hover{background:var(--color-neutral-100)}
.btn--inverse-outline{background:transparent;color:var(--color-neutral-0);border-color:var(--color-neutral-0)}.btn--inverse-outline:hover{background:rgba(255,255,255,0.1)}
.hero-issue{background:linear-gradient(135deg,var(--color-secondary-50) 0%,var(--color-secondary-100) 100%);text-align:center;padding:var(--space-16) 0}
@media(min-width:1024px){.hero-issue{padding:var(--space-24) 0}}
.hero-issue__badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1-5) var(--space-3);background:var(--color-secondary);color:var(--color-neutral-0);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);border-radius:var(--radius-full);margin-bottom:var(--space-6)}
.hero-issue__icon{width:64px;height:64px;background:var(--color-neutral-0);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-6);color:var(--color-secondary);box-shadow:var(--shadow-md)}
.hero-issue__title{max-width:800px;margin:0 auto var(--space-6)}.hero-issue__stat{display:inline-flex;padding:var(--space-3) var(--space-6);background:var(--color-accent-100);color:var(--color-accent);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);border-radius:var(--radius-lg);margin-bottom:var(--space-6)}
.hero-issue__subtitle{max-width:600px;margin:0 auto}.issue-section{border-bottom:1px solid var(--color-border-muted)}.issue-section:last-of-type{border-bottom:none}.issue-section--alt{background:var(--color-bg-secondary)}
.issue-section__header{margin-bottom:var(--space-8)}.issue-section__number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--color-secondary);color:var(--color-neutral-0);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);border-radius:var(--radius-full);margin-bottom:var(--space-4)}
.issue-section__title{margin-bottom:var(--space-2)}.issue-section__subtitle{color:var(--color-text-secondary)}.problem-content{max-width:var(--container-narrow)}
.problem-content p{font-size:var(--font-size-md);line-height:1.8;margin-bottom:var(--space-6)}
.problem-highlight{background:var(--color-accent-100);padding:var(--space-6);border-radius:var(--radius-lg);border-left:4px solid var(--color-accent);margin:var(--space-8) 0}
.problem-highlight__stat{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-accent);margin-bottom:var(--space-2)}.problem-highlight__text{color:var(--color-text-secondary);margin-bottom:0}
.commitments-list{max-width:var(--container-narrow)}.commitment-item{display:flex;gap:var(--space-4);padding:var(--space-6);background:var(--color-surface-1);border:1px solid var(--color-border-muted);border-radius:var(--radius-lg);margin-bottom:var(--space-4);transition:all var(--duration-fast) var(--easing-default)}
.commitment-item:hover{border-color:var(--color-secondary-200);box-shadow:var(--shadow-md)}.commitment-item:last-child{margin-bottom:0}
.commitment-item__number{flex-shrink:0;width:48px;height:48px;background:var(--color-secondary-100);color:var(--color-secondary);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}
.commitment-item__content{flex-grow:1}.commitment-item__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-2)}.commitment-item__desc{color:var(--color-text-secondary);margin-bottom:0}
.progress-table{width:100%;border-collapse:collapse;background:var(--color-surface-1);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.progress-table th,.progress-table td{padding:var(--space-4);text-align:left;border-bottom:1px solid var(--color-border-muted)}
.progress-table th{background:var(--color-secondary);color:var(--color-neutral-0);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:0.05em}
.progress-table tr:last-child td{border-bottom:none}.progress-table tr:hover td{background:var(--color-bg-secondary)}.progress-table td{font-size:var(--font-size-sm)}
.progress-badge{display:inline-flex;padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-md)}
.progress-badge--target{background:var(--color-secondary-100);color:var(--color-secondary)}.progress-badge--timeline{background:var(--color-accent-100);color:var(--color-accent)}
@media(max-width:767px){.progress-table,.progress-table thead,.progress-table tbody,.progress-table th,.progress-table td,.progress-table tr{display:block}.progress-table thead{display:none}.progress-table tr{margin-bottom:var(--space-4);border:1px solid var(--color-border-muted);border-radius:var(--radius-lg)}.progress-table td{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4)}.progress-table td::before{content:attr(data-label);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);font-size:var(--font-size-xs);text-transform:uppercase}.progress-table td:last-child{border-bottom:none}}
.sources-list{max-width:var(--container-narrow)}.source-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface-1);border:1px solid var(--color-border-muted);border-radius:var(--radius-lg);margin-bottom:var(--space-3);transition:all var(--duration-fast) var(--easing-default)}
.source-item:hover{border-color:var(--color-secondary-200);background:var(--color-secondary-50)}.source-item:last-child{margin-bottom:0}
.source-item__icon{flex-shrink:0;width:32px;height:32px;background:var(--color-secondary-100);color:var(--color-secondary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}
.source-item__content{flex-grow:1}.source-item__title{font-weight:var(--font-weight-semibold);color:var(--color-secondary);margin-bottom:var(--space-1)}.source-item__meta{font-size:var(--font-size-sm);color:var(--color-text-muted)}
.cta-section{background:var(--color-secondary);color:var(--color-text-inverse);text-align:center}.cta-section__title{color:var(--color-text-inverse);margin-bottom:var(--space-4)}.cta-section__desc{max-width:600px;margin:0 auto var(--space-8);opacity:0.9}
.cta-section__actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}@media(min-width:640px){.cta-section__actions{flex-direction:row;justify-content:center}}
.footer{background:var(--color-neutral-900);color:var(--color-text-inverse);padding:var(--space-12) 0 var(--space-8)}
.footer__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8);margin-bottom:var(--space-12)}@media(min-width:768px){.footer__grid{grid-template-columns:repeat(4,1fr)}}
.footer__heading{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-inverse);margin-bottom:var(--space-4)}
.footer__link{display:block;padding:var(--space-1) 0;font-size:var(--font-size-sm);color:var(--color-text-inverse-secondary);transition:color var(--duration-fast) var(--easing-default)}.footer__link:hover{color:var(--color-text-inverse)}
.footer__bottom{padding-top:var(--space-8);border-top:1px solid var(--color-neutral-800);display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}@media(min-width:768px){.footer__bottom{flex-direction:row;justify-content:space-between}}
.footer__copyright{font-size:var(--font-size-sm);color:var(--color-text-inverse-secondary)}.footer__lite-toggle{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-inverse-secondary)}
.checkbox{width:20px;height:20px;appearance:none;background:transparent;border:2px solid var(--color-neutral-500);border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.checkbox:checked{background:var(--color-primary-400);border-color:var(--color-primary-400)}.checkbox:checked::after{content:'';width:6px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox:focus-visible{outline:2px solid var(--color-primary-400);outline-offset:2px}
.lite-mode img:not(.essential),.lite-mode video,.lite-mode iframe{display:none!important}.lite-mode .hero-issue{background:var(--color-bg-secondary)!important}.lite-mode *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}
.icon{display:inline-flex;align-items:center;justify-content:center;color:currentColor}.icon--sm{width:var(--icon-sm);height:var(--icon-sm)}.icon--lg{width:var(--icon-lg);height:var(--icon-lg)}.icon--xl{width:var(--icon-xl);height:var(--icon-xl)}
.breadcrumb{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4) 0;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.breadcrumb__link{color:var(--color-text-link)}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__separator{color:var(--color-text-muted)}.breadcrumb__current{color:var(--color-text-primary);font-weight:var(--font-weight-medium)}
/* ===== Styles from legacy.html ===== */
/* ========================================
CSS CUSTOM PROPERTIES (Design Tokens)
======================================== */
:root {
/* Typography - Font Families */
--font-family-primary: 'Noto Sans Bengali', 'Hind Siliguri', 'Kalpurush', system-ui, sans-serif;
--font-family-secondary: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
/* Typography - Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem;
--font-size-3xl: 2.25rem;
--font-size-4xl: 3rem;
--font-size-5xl: 4rem;
/* Typography - Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Typography - Line Heights */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Typography - Letter Spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Heading Definitions */
--heading-h1-size: var(--font-size-4xl);
--heading-h1-weight: 700;
--heading-h1-line-height: 1.1;
--heading-h1-letter-spacing: -0.02em;
--heading-h2-size: var(--font-size-3xl);
--heading-h2-weight: 700;
--heading-h2-line-height: 1.2;
--heading-h2-letter-spacing: -0.01em;
--heading-h3-size: var(--font-size-2xl);
--heading-h3-weight: 600;
--heading-h3-line-height: 1.25;
--heading-h3-letter-spacing: 0;
--heading-h4-size: var(--font-size-xl);
--heading-h4-weight: 600;
--heading-h4-line-height: 1.3;
--heading-h4-letter-spacing: 0;
/* Body & Text Styles */
--text-body-size: var(--font-size-base);
--text-body-weight: 400;
--text-body-line-height: 1.6;
--text-body-letter-spacing: 0;
--text-lead-size: var(--font-size-lg);
--text-lead-weight: 400;
--text-lead-line-height: 1.7;
/* Colors - Primary (BNP Green) */
--color-primary-50: #ecfdf5;
--color-primary-100: #d1fae5;
--color-primary-200: #a7f3d0;
--color-primary-300: #6ee7b7;
--color-primary-400: #34d399;
--color-primary-500: #10b981;
--color-primary-600: #059669;
--color-primary-700: #047857;
--color-primary-800: #065f46;
--color-primary-900: #064e3b;
--color-primary: #006a4e;
/* Colors - Secondary (Trust Blue) */
--color-secondary-50: #eff6ff;
--color-secondary-100: #dbeafe;
--color-secondary-200: #bfdbfe;
--color-secondary-300: #93c5fd;
--color-secondary-400: #60a5fa;
--color-secondary-500: #3b82f6;
--color-secondary-600: #2563eb;
--color-secondary-700: #1d4ed8;
--color-secondary-800: #1e40af;
--color-secondary-900: #1e3a8a;
--color-secondary: #1e40af;
/* Colors - Accent (Optimism Yellow - WCAG adjusted) */
--color-accent-50: #fffbeb;
--color-accent-100: #fef3c7;
--color-accent-200: #fde68a;
--color-accent-300: #fcd34d;
--color-accent-400: #fbbf24;
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;
--color-accent-700: #b45309;
--color-accent-800: #92400e;
--color-accent-900: #78350f;
--color-accent: #b45309;
/* Colors - Neutrals */
--color-neutral-0: #ffffff;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-neutral-400: #a3a3a3;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-neutral-950: #0a0a0a;
/* Colors - Semantic */
--color-success-light: #dcfce7;
--color-success: #16a34a;
--color-success-dark: #15803d;
--color-error-light: #fee2e2;
--color-error: #dc2626;
--color-error-dark: #b91c1c;
--color-warning-light: #fef3c7;
--color-warning: #d97706;
--color-warning-dark: #b45309;
--color-info-light: #dbeafe;
--color-info: #2563eb;
--color-info-dark: #1d4ed8;
/* Colors - Backgrounds */
--color-bg-primary: var(--color-neutral-0);
--color-bg-secondary: var(--color-neutral-50);
--color-bg-tertiary: var(--color-neutral-100);
--color-bg-inverse: var(--color-neutral-900);
/* Colors - Surfaces */
--color-surface-1: var(--color-neutral-0);
--color-surface-2: var(--color-neutral-50);
--color-surface-3: var(--color-neutral-100);
/* Colors - Text */
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-600);
--color-text-muted: var(--color-neutral-400);
--color-text-disabled: var(--color-neutral-300);
--color-text-inverse: var(--color-neutral-0);
--color-text-inverse-secondary: var(--color-neutral-300);
--color-text-link: var(--color-primary);
--color-text-link-hover: var(--color-primary-800);
/* Colors - Borders */
--color-border-default: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
--color-border-muted: var(--color-neutral-100);
--color-border-focus: var(--color-primary);
--color-border-error: var(--color-error);
--color-border-success: var(--color-success);
/* Spacing Scale (4px increments) */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
/* Semantic Spacing */
--spacing-xs: var(--space-1);
--spacing-sm: var(--space-2);
--spacing-md: var(--space-4);
--spacing-lg: var(--space-6);
--spacing-xl: var(--space-8);
--spacing-2xl: var(--space-12);
--spacing-3xl: var(--space-16);
--spacing-4xl: var(--space-24);
/* Layout - Containers */
--container-xs: 320px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--container-max: 1200px;
/* Layout - Grid */
--grid-columns: 12;
--grid-gap: var(--space-4);
--grid-gap-sm: var(--space-2);
--grid-gap-lg: var(--space-6);
/* Section Padding */
--section-padding-y-sm: var(--space-8);
--section-padding-y-md: var(--space-12);
--section-padding-y-lg: var(--space-16);
--section-padding-y-xl: var(--space-24);
/* Borders & Shadows */
--radius-none: 0;
--radius-sm: 0.125rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Transitions */
--duration-instant: 0ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-in: cubic-bezier(0.4, 0, 1, 1);
--easing-out: cubic-bezier(0, 0, 0.2, 1);
--easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Z-Index Scale */
--z-deep: -999;
--z-default: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-overlay: 40;
--z-modal: 50;
--z-popover: 60;
--z-tooltip: 70;
--z-toast: 80;
--z-top: 999;
/* Icons */
--icon-xs: 12px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
--icon-2xl: 48px;
/* Aspect Ratios */
--aspect-square: 1 / 1;
--aspect-video: 16 / 9;
--aspect-photo: 4 / 3;
--aspect-portrait: 3 / 4;
--aspect-wide: 21 / 9;
/* Button Tokens */
--btn-primary-bg: var(--color-primary);
--btn-primary-bg-hover: var(--color-primary-800);
--btn-primary-bg-active: var(--color-primary-900);
--btn-primary-bg-disabled: var(--color-neutral-300);
--btn-primary-text: var(--color-neutral-0);
--btn-primary-text-disabled: var(--color-neutral-500);
--btn-focus-ring-width: 2px;
--btn-focus-ring-offset: 2px;
--btn-focus-ring-color: var(--color-primary-400);
}
/* Responsive Base Font */
html {
font-size: 16px;
font-size: clamp(14px, 2.5vw, 18px);
}
/* Responsive Typography */
@media (min-width: 640px) {
:root {
--heading-h1-size: var(--font-size-5xl);
}
}
@media (min-width: 1024px) {
:root {
--heading-h1-size: 4.5rem;
--heading-h2-size: var(--font-size-4xl);
}
}
/* ========================================
BASE RESET & TYPOGRAPHY
======================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-primary);
font-size: var(--text-body-size);
font-weight: var(--text-body-weight);
line-height: var(--text-body-line-height);
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* English language uses secondary font */
html[lang="en"] body {
font-family: var(--font-family-secondary);
}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6 {
font-family: var(--font-family-secondary);
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text-primary);
}
h1 {
font-size: var(--heading-h1-size);
font-weight: var(--heading-h1-weight);
line-height: var(--heading-h1-line-height);
letter-spacing: var(--heading-h1-letter-spacing);
}
h2 {
font-size: var(--heading-h2-size);
font-weight: var(--heading-h2-weight);
line-height: var(--heading-h2-line-height);
letter-spacing: var(--heading-h2-letter-spacing);
}
h3 {
font-size: var(--heading-h3-size);
font-weight: var(--heading-h3-weight);
line-height: var(--heading-h3-line-height);
letter-spacing: var(--heading-h3-letter-spacing);
}
h4 {
font-size: var(--heading-h4-size);
font-weight: var(--heading-h4-weight);
line-height: var(--heading-h4-line-height);
letter-spacing: var(--heading-h4-letter-spacing);
}
p {
margin-bottom: var(--space-4);
}
p:last-child {
margin-bottom: 0;
}
/* ========================================
UTILITY CLASSES
======================================== */
.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;
}
.text-lead {
font-size: var(--text-lead-size);
font-weight: var(--text-lead-weight);
line-height: var(--text-lead-line-height);
color: var(--color-text-secondary);
}
.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
/* ========================================
LAYOUT COMPONENTS
======================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
@media (min-width: 640px) {
.container {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
}
@media (min-width: 1024px) {
.container {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
}
.section {
padding-top: var(--section-padding-y-md);
padding-bottom: var(--section-padding-y-md);
}
@media (min-width: 1024px) {
.section {
padding-top: var(--section-padding-y-lg);
padding-bottom: var(--section-padding-y-lg);
}
}
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gap);
}
/* ========================================
HEADER COMPONENT
======================================== */
.header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border-muted);
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 var(--space-4);
}
@media (min-width: 1024px) {
.header__container {
height: 72px;
padding: 0;
}
}
.header__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
text-decoration: none;
}
.header__logo-icon {
width: 40px;
height: 40px;
background-color: var(--color-primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-0);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
.nav {
display: none;
align-items: center;
gap: var(--space-1);
}
@media (min-width: 1024px) {
.nav {
display: flex;
}
}
.nav__link {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
.nav__link:hover {
color: var(--color-text-primary);
background-color: var(--color-neutral-100);
}
.nav__link--active {
color: var(--color-primary);
background-color: var(--color-primary-50);
}
.header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-primary);
}
.mobile-menu-btn:hover {
background-color: var(--color-neutral-100);
}
@media (min-width: 1024px) {
.mobile-menu-btn {
display: none;
}
}
/* ========================================
LANGUAGE TOGGLE
======================================== */
.lang-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 36px;
padding: 0 var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-family: var(--font-family-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border: 2px solid var(--color-secondary-200);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--duration-fast) var(--easing-default);
}
.lang-toggle:hover {
background-color: var(--color-secondary-200);
border-color: var(--color-secondary-300);
}
.lang-toggle:focus-visible {
outline: 2px solid var(--color-secondary-400);
outline-offset: 2px;
}
/* ========================================
BUTTON COMPONENT
======================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-medium);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
html[lang="en"] .btn {
font-family: var(--font-family-secondary);
}
.btn--sm {
height: 32px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
}
.btn--md {
height: 40px;
padding: 0 var(--space-4);
font-size: var(--font-size-base);
}
.btn--lg {
height: 48px;
padding: 0 var(--space-6);
font-size: var(--font-size-md);
}
.btn--primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.btn--primary:hover {
background-color: var(--btn-primary-bg-hover);
}
.btn--primary:active {
background-color: var(--btn-primary-bg-active);
}
.btn--primary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--secondary:hover {
background-color: var(--color-primary-50);
}
.btn--secondary:active {
background-color: var(--color-primary-100);
}
.btn--secondary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--inverse {
background-color: var(--color-neutral-0);
color: var(--color-neutral-900);
}
.btn--inverse:hover {
background-color: var(--color-neutral-100);
}
/* ========================================
HERO SECTION - LEGACY VARIANT
======================================== */
.hero-legacy {
background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
text-align: center;
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
@media (min-width: 1024px) {
.hero-legacy {
padding-top: var(--space-24);
padding-bottom: var(--space-24);
}
}
.hero-legacy__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background-color: var(--color-primary);
color: var(--color-neutral-0);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
}
.hero-legacy__title {
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-6);
}
.hero-legacy__subtitle {
max-width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-8);
}
.hero-legacy__stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.hero-stat {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-4) var(--space-6);
background-color: var(--color-neutral-0);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
min-width: 140px;
}
.hero-stat__number {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
line-height: 1;
}
.hero-stat__label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-top: var(--space-1);
}
.hero-legacy__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.hero-legacy__actions {
flex-direction: row;
justify-content: center;
}
}
/* ========================================
DECADE NAVIGATION
======================================== */
.decade-nav {
position: sticky;
top: 64px;
z-index: var(--z-dropdown);
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border-muted);
padding: var(--space-3) 0;
}
@media (min-width: 1024px) {
.decade-nav {
top: 72px;
}
}
.decade-nav__list {
display: flex;
gap: var(--space-2);
overflow-x: auto;
padding: 0 var(--space-4);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.decade-nav__list::-webkit-scrollbar {
display: none;
}
.decade-nav__link {
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
background-color: var(--color-neutral-100);
border-radius: var(--radius-full);
white-space: nowrap;
transition: all var(--duration-fast) var(--easing-default);
}
.decade-nav__link:hover {
background-color: var(--color-primary-100);
color: var(--color-primary);
}
.decade-nav__link--active {
background-color: var(--color-primary);
color: var(--color-neutral-0);
}
/* ========================================
LEGACY TIMELINE
======================================== */
.timeline-section {
padding-top: var(--space-16);
padding-bottom: var(--space-8);
}
.timeline-section__header {
text-align: center;
margin-bottom: var(--space-12);
}
.timeline-section__decade {
display: inline-block;
padding: var(--space-2) var(--space-6);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
border-radius: var(--radius-full);
margin-bottom: var(--space-4);
}
.legacy-timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
padding-left: var(--space-8);
}
.legacy-timeline::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background-color: var(--color-neutral-200);
border-radius: var(--radius-full);
}
@media (min-width: 768px) {
.legacy-timeline {
padding-left: var(--space-12);
}
}
.legacy-timeline__item {
position: relative;
padding-bottom: var(--space-8);
}
.legacy-timeline__item:last-child {
padding-bottom: 0;
}
.legacy-timeline__dot {
position: absolute;
left: calc(-1 * var(--space-8) - 8px);
top: 4px;
width: 20px;
height: 20px;
background-color: var(--color-neutral-0);
border: 4px solid var(--color-neutral-300);
border-radius: var(--radius-full);
}
@media (min-width: 768px) {
.legacy-timeline__dot {
left: calc(-1 * var(--space-12) - 8px);
}
}
.legacy-timeline__item--milestone .legacy-timeline__dot {
border-color: var(--color-primary);
background-color: var(--color-primary-100);
}
.legacy-timeline__item--success .legacy-timeline__dot {
border-color: var(--color-success);
background-color: var(--color-success-light);
}
.legacy-timeline__year {
display: inline-block;
padding: var(--space-1) var(--space-3);
background-color: var(--color-neutral-100);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-md);
margin-bottom: var(--space-2);
}
.legacy-timeline__item--milestone .legacy-timeline__year {
background-color: var(--color-primary-100);
color: var(--color-primary);
}
.legacy-timeline__item--success .legacy-timeline__year {
background-color: var(--color-success-light);
color: var(--color-success-dark);
}
.legacy-timeline__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
.legacy-timeline__desc {
color: var(--color-text-secondary);
margin-bottom: var(--space-3);
}
.legacy-timeline__source {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.legacy-timeline__source a {
color: var(--color-primary);
text-decoration: underline;
}
.legacy-timeline__source a:hover {
color: var(--color-primary-800);
}
/* ========================================
INFRASTRUCTURE SHOWCASE
======================================== */
.infrastructure {
background-color: var(--color-bg-secondary);
}
.infrastructure__header {
text-align: center;
margin-bottom: var(--space-12);
}
.infrastructure__title {
margin-bottom: var(--space-4);
}
.infrastructure__subtitle {
max-width: 600px;
margin: 0 auto;
color: var(--color-text-secondary);
}
.infrastructure__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 768px) {
.infrastructure__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.infrastructure__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.infrastructure-card {
background-color: var(--color-surface-1);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: transform var(--duration-fast) var(--easing-default),
box-shadow var(--duration-fast) var(--easing-default);
}
.infrastructure-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.infrastructure-card__image {
aspect-ratio: var(--aspect-video);
background-color: var(--color-neutral-200);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.infrastructure-card__content {
padding: var(--space-6);
}
.infrastructure-card__year {
display: inline-block;
padding: var(--space-1) var(--space-2);
background-color: var(--color-primary-100);
color: var(--color-primary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-md);
margin-bottom: var(--space-2);
}
.infrastructure-card__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
.infrastructure-card__desc {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* ========================================
SURVIVOR SECTION
======================================== */
.survivor {
background-color: var(--color-primary);
color: var(--color-text-inverse);
text-align: center;
}
.survivor__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background-color: rgba(255, 255, 255, 0.2);
color: var(--color-neutral-0);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
}
.survivor__title {
color: var(--color-text-inverse);
margin-bottom: var(--space-8);
}
.survivor__quote {
max-width: 800px;
margin: 0 auto var(--space-8);
padding: var(--space-8);
background-color: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-xl);
border-left: 4px solid var(--color-accent-400);
}
.survivor__quote-text {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-relaxed);
font-style: italic;
margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
.survivor__quote-text {
font-size: var(--font-size-3xl);
}
}
.survivor__quote-attribution {
font-size: var(--font-size-md);
opacity: 0.9;
}
.survivor__stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-8);
margin-bottom: var(--space-8);
}
.survivor__stat {
text-align: center;
}
.survivor__stat-number {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
line-height: 1;
}
.survivor__stat-label {
font-size: var(--font-size-md);
opacity: 0.9;
margin-top: var(--space-2);
}
.survivor__desc {
max-width: 700px;
margin: 0 auto var(--space-8);
font-size: var(--font-size-lg);
opacity: 0.95;
}
.survivor__cta {
margin-top: var(--space-4);
}
/* ========================================
CTA SECTION
======================================== */
.cta-section {
background-color: var(--color-bg-secondary);
text-align: center;
}
.cta-section__title {
margin-bottom: var(--space-4);
}
.cta-section__desc {
max-width: 600px;
margin: 0 auto var(--space-8);
color: var(--color-text-secondary);
}
.cta-section__buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.cta-section__buttons {
flex-direction: row;
justify-content: center;
}
}
/* ========================================
FOOTER COMPONENT
======================================== */
.footer {
background-color: var(--color-neutral-900);
color: var(--color-text-inverse);
padding: var(--space-12) 0 var(--space-8);
}
.footer__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
.footer__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.footer__heading {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.footer__link {
display: block;
padding: var(--space-1) 0;
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
.footer__link:hover {
color: var(--color-text-inverse);
}
.footer__bottom {
padding-top: var(--space-8);
border-top: 1px solid var(--color-neutral-800);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 768px) {
.footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
.footer__copyright {
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
.footer__lite-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
/* ========================================
CHECKBOX (for lite mode)
======================================== */
.checkbox {
width: 20px;
height: 20px;
appearance: none;
background-color: transparent;
border: 2px solid var(--color-neutral-500);
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.checkbox:checked {
background-color: var(--color-primary-400);
border-color: var(--color-primary-400);
}
.checkbox:checked::after {
content: '';
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
}
/* ========================================
LITE MODE STYLES
======================================== */
.lite-mode img:not(.essential),
.lite-mode video,
.lite-mode iframe {
display: none !important;
}
.lite-mode .hero-legacy {
background-image: none !important;
background: var(--color-bg-secondary) !important;
}
.lite-mode * {
animation: none !important;
transition: none !important;
}
.lite-mode .infrastructure-card:hover {
transform: none;
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ========================================
ICON SVG
======================================== */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }
/* ===== Styles from media.html ===== */
/* ========================================
CSS CUSTOM PROPERTIES (Design Tokens)
======================================== */
:root {
/* Typography - Font Families */
--font-family-primary: 'Noto Sans Bengali', 'Hind Siliguri', 'Kalpurush', system-ui, sans-serif;
--font-family-secondary: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
/* Typography - Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem;
--font-size-3xl: 2.25rem;
--font-size-4xl: 3rem;
--font-size-5xl: 4rem;
/* Typography - Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Typography - Line Heights */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Typography - Letter Spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Heading Definitions */
--heading-h1-size: var(--font-size-4xl);
--heading-h1-weight: 700;
--heading-h1-line-height: 1.1;
--heading-h1-letter-spacing: -0.02em;
--heading-h2-size: var(--font-size-3xl);
--heading-h2-weight: 700;
--heading-h2-line-height: 1.2;
--heading-h2-letter-spacing: -0.01em;
--heading-h3-size: var(--font-size-2xl);
--heading-h3-weight: 600;
--heading-h3-line-height: 1.25;
--heading-h3-letter-spacing: 0;
--heading-h4-size: var(--font-size-xl);
--heading-h4-weight: 600;
--heading-h4-line-height: 1.3;
--heading-h4-letter-spacing: 0;
/* Body & Text Styles */
--text-body-size: var(--font-size-base);
--text-body-weight: 400;
--text-body-line-height: 1.6;
--text-body-letter-spacing: 0;
--text-lead-size: var(--font-size-lg);
--text-lead-weight: 400;
--text-lead-line-height: 1.7;
/* Colors - Primary (BNP Green) */
--color-primary-50: #ecfdf5;
--color-primary-100: #d1fae5;
--color-primary-200: #a7f3d0;
--color-primary-300: #6ee7b7;
--color-primary-400: #34d399;
--color-primary-500: #10b981;
--color-primary-600: #059669;
--color-primary-700: #047857;
--color-primary-800: #065f46;
--color-primary-900: #064e3b;
--color-primary: #006a4e;
/* Colors - Secondary (Trust Blue) */
--color-secondary-50: #eff6ff;
--color-secondary-100: #dbeafe;
--color-secondary-200: #bfdbfe;
--color-secondary-300: #93c5fd;
--color-secondary-400: #60a5fa;
--color-secondary-500: #3b82f6;
--color-secondary-600: #2563eb;
--color-secondary-700: #1d4ed8;
--color-secondary-800: #1e40af;
--color-secondary-900: #1e3a8a;
--color-secondary: #1e40af;
/* Colors - Accent (Optimism Yellow - WCAG adjusted) */
--color-accent-50: #fffbeb;
--color-accent-100: #fef3c7;
--color-accent-200: #fde68a;
--color-accent-300: #fcd34d;
--color-accent-400: #fbbf24;
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;
--color-accent-700: #b45309;
--color-accent-800: #92400e;
--color-accent-900: #78350f;
--color-accent: #b45309;
/* Colors - Neutrals */
--color-neutral-0: #ffffff;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-neutral-400: #a3a3a3;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-neutral-950: #0a0a0a;
/* Colors - Semantic */
--color-success-light: #dcfce7;
--color-success: #16a34a;
--color-success-dark: #15803d;
--color-error-light: #fee2e2;
--color-error: #dc2626;
--color-error-dark: #b91c1c;
--color-warning-light: #fef3c7;
--color-warning: #d97706;
--color-warning-dark: #b45309;
--color-info-light: #dbeafe;
--color-info: #2563eb;
--color-info-dark: #1d4ed8;
/* Colors - Backgrounds */
--color-bg-primary: var(--color-neutral-0);
--color-bg-secondary: var(--color-neutral-50);
--color-bg-tertiary: var(--color-neutral-100);
--color-bg-inverse: var(--color-neutral-900);
/* Colors - Surfaces */
--color-surface-1: var(--color-neutral-0);
--color-surface-2: var(--color-neutral-50);
--color-surface-3: var(--color-neutral-100);
/* Colors - Text */
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-600);
--color-text-muted: var(--color-neutral-400);
--color-text-disabled: var(--color-neutral-300);
--color-text-inverse: var(--color-neutral-0);
--color-text-inverse-secondary: var(--color-neutral-300);
--color-text-link: var(--color-primary);
--color-text-link-hover: var(--color-primary-800);
/* Colors - Borders */
--color-border-default: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
--color-border-muted: var(--color-neutral-100);
--color-border-focus: var(--color-primary);
--color-border-error: var(--color-error);
--color-border-success: var(--color-success);
/* Spacing Scale (4px increments) */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
/* Semantic Spacing */
--spacing-xs: var(--space-1);
--spacing-sm: var(--space-2);
--spacing-md: var(--space-4);
--spacing-lg: var(--space-6);
--spacing-xl: var(--space-8);
--spacing-2xl: var(--space-12);
--spacing-3xl: var(--space-16);
--spacing-4xl: var(--space-24);
/* Layout - Containers */
--container-xs: 320px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--container-max: 1200px;
/* Layout - Grid */
--grid-columns: 12;
--grid-gap: var(--space-4);
--grid-gap-sm: var(--space-2);
--grid-gap-lg: var(--space-6);
/* Section Padding */
--section-padding-y-sm: var(--space-8);
--section-padding-y-md: var(--space-12);
--section-padding-y-lg: var(--space-16);
--section-padding-y-xl: var(--space-24);
/* Borders & Shadows */
--radius-none: 0;
--radius-sm: 0.125rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Transitions */
--duration-instant: 0ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-in: cubic-bezier(0.4, 0, 1, 1);
--easing-out: cubic-bezier(0, 0, 0.2, 1);
--easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Z-Index Scale */
--z-deep: -999;
--z-default: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-overlay: 40;
--z-modal: 50;
--z-popover: 60;
--z-tooltip: 70;
--z-toast: 80;
--z-top: 999;
/* Icons */
--icon-xs: 12px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
--icon-2xl: 48px;
/* Aspect Ratios */
--aspect-square: 1 / 1;
--aspect-video: 16 / 9;
--aspect-photo: 4 / 3;
--aspect-portrait: 3 / 4;
--aspect-wide: 21 / 9;
/* Button Tokens */
--btn-primary-bg: var(--color-primary);
--btn-primary-bg-hover: var(--color-primary-800);
--btn-primary-bg-active: var(--color-primary-900);
--btn-primary-bg-disabled: var(--color-neutral-300);
--btn-primary-text: var(--color-neutral-0);
--btn-primary-text-disabled: var(--color-neutral-500);
--btn-focus-ring-width: 2px;
--btn-focus-ring-offset: 2px;
--btn-focus-ring-color: var(--color-primary-400);
}
/* Responsive Base Font */
html {
font-size: 16px;
font-size: clamp(14px, 2.5vw, 18px);
}
/* Responsive Typography */
@media (min-width: 640px) {
:root {
--heading-h1-size: var(--font-size-5xl);
}
}
@media (min-width: 1024px) {
:root {
--heading-h1-size: 4.5rem;
--heading-h2-size: var(--font-size-4xl);
}
}
/* ========================================
BASE RESET & TYPOGRAPHY
======================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-primary);
font-size: var(--text-body-size);
font-weight: var(--text-body-weight);
line-height: var(--text-body-line-height);
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* English language uses secondary font */
html[lang="en"] body {
font-family: var(--font-family-secondary);
}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6 {
font-family: var(--font-family-secondary);
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text-primary);
}
h1 {
font-size: var(--heading-h1-size);
font-weight: var(--heading-h1-weight);
line-height: var(--heading-h1-line-height);
letter-spacing: var(--heading-h1-letter-spacing);
}
h2 {
font-size: var(--heading-h2-size);
font-weight: var(--heading-h2-weight);
line-height: var(--heading-h2-line-height);
letter-spacing: var(--heading-h2-letter-spacing);
}
h3 {
font-size: var(--heading-h3-size);
font-weight: var(--heading-h3-weight);
line-height: var(--heading-h3-line-height);
letter-spacing: var(--heading-h3-letter-spacing);
}
h4 {
font-size: var(--heading-h4-size);
font-weight: var(--heading-h4-weight);
line-height: var(--heading-h4-line-height);
letter-spacing: var(--heading-h4-letter-spacing);
}
p {
margin-bottom: var(--space-4);
}
p:last-child {
margin-bottom: 0;
}
/* ========================================
UTILITY CLASSES
======================================== */
.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;
}
.text-lead {
font-size: var(--text-lead-size);
font-weight: var(--text-lead-weight);
line-height: var(--text-lead-line-height);
color: var(--color-text-secondary);
}
.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-none { display: none; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-inverse { background-color: var(--color-bg-inverse); }
.text-inverse { color: var(--color-text-inverse); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
/* ========================================
LAYOUT COMPONENTS
======================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
@media (min-width: 640px) {
.container {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
}
@media (min-width: 1024px) {
.container {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
}
.section {
padding-top: var(--section-padding-y-md);
padding-bottom: var(--section-padding-y-md);
}
@media (min-width: 1024px) {
.section {
padding-top: var(--section-padding-y-lg);
padding-bottom: var(--section-padding-y-lg);
}
}
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gap);
}
.col-12 { grid-column: span 12; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
@media (max-width: 767px) {
.col-md-4,
.col-md-6 {
grid-column: span 12;
}
}
@media (min-width: 768px) {
.col-md-4 { grid-column: span 4; }
.col-md-6 { grid-column: span 6; }
}
/* ========================================
HEADER COMPONENT
======================================== */
.header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border-muted);
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 var(--space-4);
}
@media (min-width: 1024px) {
.header__container {
height: 72px;
padding: 0;
}
}
.header__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
text-decoration: none;
}
.header__logo-icon {
width: 40px;
height: 40px;
background-color: var(--color-primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-0);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
.nav {
display: none;
align-items: center;
gap: var(--space-1);
}
@media (min-width: 1024px) {
.nav {
display: flex;
}
}
.nav__link {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
.nav__link:hover {
color: var(--color-text-primary);
background-color: var(--color-neutral-100);
}
.nav__link--active {
color: var(--color-primary);
background-color: var(--color-primary-50);
}
.header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-primary);
}
.mobile-menu-btn:hover {
background-color: var(--color-neutral-100);
}
@media (min-width: 1024px) {
.mobile-menu-btn {
display: none;
}
}
/* ========================================
LANGUAGE TOGGLE
======================================== */
.lang-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 36px;
padding: 0 var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-family: var(--font-family-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border: 2px solid var(--color-secondary-200);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--duration-fast) var(--easing-default);
}
.lang-toggle:hover {
background-color: var(--color-secondary-200);
border-color: var(--color-secondary-300);
}
.lang-toggle:focus-visible {
outline: 2px solid var(--color-secondary-400);
outline-offset: 2px;
}
/* ========================================
BUTTON COMPONENT
======================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-medium);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
html[lang="en"] .btn {
font-family: var(--font-family-secondary);
}
.btn--sm {
height: 32px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
}
.btn--md {
height: 40px;
padding: 0 var(--space-4);
font-size: var(--font-size-base);
}
.btn--lg {
height: 48px;
padding: 0 var(--space-6);
font-size: var(--font-size-md);
}
.btn--primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.btn--primary:hover {
background-color: var(--btn-primary-bg-hover);
}
.btn--primary:active {
background-color: var(--btn-primary-bg-active);
}
.btn--primary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
background-color: var(--btn-primary-bg-disabled);
color: var(--btn-primary-text-disabled);
cursor: not-allowed;
}
.btn--secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--secondary:hover {
background-color: var(--color-primary-50);
}
.btn--secondary:active {
background-color: var(--color-primary-100);
}
.btn--secondary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--ghost {
background-color: transparent;
color: var(--color-primary);
}
.btn--ghost:hover {
background-color: var(--color-primary-50);
}
.btn--inverse {
background-color: var(--color-neutral-0);
color: var(--color-neutral-900);
}
.btn--inverse:hover {
background-color: var(--color-neutral-100);
}
/* ========================================
CARD COMPONENT
======================================== */
.card {
background-color: var(--color-surface-1);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.card__header {
padding: var(--space-4) var(--space-4) 0;
}
.card__body {
padding: var(--space-4);
}
.card__footer {
padding: 0 var(--space-4) var(--space-4);
}
.card--elevated {
box-shadow: var(--shadow-md);
}
.card--interactive {
cursor: pointer;
transition: box-shadow var(--duration-fast) var(--easing-default),
transform var(--duration-fast) var(--easing-default);
}
.card--interactive:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.card--interactive:focus-within {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
/* ========================================
LINK COMPONENT
======================================== */
.link {
color: var(--color-text-link);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
transition: color var(--duration-fast) var(--easing-default);
}
.link:hover {
color: var(--color-text-link-hover);
}
.link:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ========================================
HERO SECTION - MEDIA
======================================== */
.hero-media {
background: linear-gradient(135deg, var(--color-secondary-50) 0%, var(--color-primary-50) 100%);
text-align: center;
padding-top: var(--space-16);
padding-bottom: var(--space-12);
}
@media (min-width: 1024px) {
.hero-media {
padding-top: var(--space-24);
padding-bottom: var(--space-16);
}
}
.hero-media__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
}
.hero-media__title {
max-width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-4);
}
.hero-media__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-6);
}
.hero-media__features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
}
.hero-media__feature {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background-color: var(--color-neutral-0);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
box-shadow: var(--shadow-sm);
}
.hero-media__feature-icon {
color: var(--color-primary);
}
/* ========================================
FILTER TABS
======================================== */
.filter-section {
background-color: var(--color-bg-primary);
padding: var(--space-6) 0;
border-bottom: 1px solid var(--color-border-muted);
position: sticky;
top: 64px;
z-index: var(--z-sticky);
}
@media (min-width: 1024px) {
.filter-section {
top: 72px;
}
}
.filter-tabs {
display: flex;
gap: var(--space-2);
overflow-x: auto;
padding-bottom: var(--space-2);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.filter-tabs::-webkit-scrollbar {
display: none;
}
.filter-tab {
display: inline-flex;
align-items: center;
gap: var(--space-2);
height: 40px;
padding: 0 var(--space-4);
background-color: var(--color-neutral-100);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border: none;
border-radius: var(--radius-full);
cursor: pointer;
white-space: nowrap;
transition: all var(--duration-fast) var(--easing-default);
}
.filter-tab:hover {
background-color: var(--color-neutral-200);
color: var(--color-text-primary);
}
.filter-tab--active {
background-color: var(--color-primary);
color: var(--color-neutral-0);
}
.filter-tab--active:hover {
background-color: var(--color-primary-800);
color: var(--color-neutral-0);
}
.filter-tab:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
}
.filter-tab__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 var(--space-1);
background-color: var(--color-neutral-200);
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-full);
}
.filter-tab--active .filter-tab__count {
background-color: var(--color-primary-800);
color: var(--color-neutral-0);
}
/* ========================================
STATEMENTS GRID
======================================== */
.statements-section {
background-color: var(--color-bg-secondary);
}
.statements-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 768px) {
.statements-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.statements-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ========================================
STATEMENT CARD
======================================== */
.statement-card {
display: flex;
flex-direction: column;
background-color: var(--color-surface-1);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow var(--duration-fast) var(--easing-default);
}
.statement-card:hover {
box-shadow: var(--shadow-md);
}
.statement-card__video {
position: relative;
aspect-ratio: var(--aspect-video);
background-color: var(--color-neutral-200);
}
.statement-card__video-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
background: linear-gradient(135deg, var(--color-neutral-800) 0%, var(--color-neutral-700) 100%);
color: var(--color-text-inverse);
cursor: pointer;
transition: background var(--duration-fast) var(--easing-default);
}
.statement-card__video-placeholder:hover {
background: linear-gradient(135deg, var(--color-neutral-700) 0%, var(--color-neutral-600) 100%);
}
.statement-card__play-icon {
width: 56px;
height: 56px;
background-color: var(--color-primary);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--duration-fast) var(--easing-default);
}
.statement-card__video-placeholder:hover .statement-card__play-icon {
transform: scale(1.1);
}
.statement-card__video-label {
font-size: var(--font-size-sm);
opacity: 0.9;
}
.statement-card__video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
.statement-card__content {
padding: var(--space-4);
flex-grow: 1;
display: flex;
flex-direction: column;
}
.statement-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.statement-card__category {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-2);
background-color: var(--color-primary-100);
color: var(--color-primary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-md);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.statement-card__category--safety {
background-color: var(--color-error-light);
color: var(--color-error);
}
.statement-card__category--youth {
background-color: var(--color-secondary-100);
color: var(--color-secondary);
}
.statement-card__category--governance {
background-color: var(--color-accent-100);
color: var(--color-accent);
}
.statement-card__category--election {
background-color: var(--color-success-light);
color: var(--color-success);
}
.statement-card__date {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.statement-card__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-3);
line-height: var(--line-height-snug);
}
.statement-card__transcript {
flex-grow: 1;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-4);
}
.statement-card__transcript-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
background: none;
border: none;
cursor: pointer;
padding: 0;
margin-top: var(--space-2);
}
.statement-card__transcript-toggle:hover {
text-decoration: underline;
}
.statement-card__source {
display: flex;
align-items: center;
gap: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border-muted);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.statement-card__source-link {
color: var(--color-text-link);
text-decoration: underline;
text-underline-offset: 2px;
}
.statement-card__source-link:hover {
color: var(--color-text-link-hover);
}
/* ========================================
ARCHIVE SECTION
======================================== */
.archive-section {
background-color: var(--color-bg-primary);
}
.archive-section__header {
text-align: center;
margin-bottom: var(--space-8);
}
.archive-section__title {
margin-bottom: var(--space-3);
}
.archive-section__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
}
.archive-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
@media (min-width: 768px) {
.archive-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.archive-item {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-4);
background-color: var(--color-surface-2);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-lg);
transition: border-color var(--duration-fast) var(--easing-default);
}
.archive-item:hover {
border-color: var(--color-primary-200);
}
.archive-item__icon {
width: 48px;
height: 48px;
background-color: var(--color-primary-100);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
flex-shrink: 0;
}
.archive-item__content {
flex-grow: 1;
min-width: 0;
}
.archive-item__title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-1);
}
.archive-item__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
margin-bottom: var(--space-2);
}
.archive-item__hash {
font-family: var(--font-family-mono);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
background-color: var(--color-neutral-100);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
word-break: break-all;
}
.archive-item__download {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
margin-top: var(--space-2);
}
.archive-item__download:hover {
text-decoration: underline;
}
/* ========================================
REPORT SECTION
======================================== */
.report-section {
background: linear-gradient(135deg, var(--color-error-light) 0%, var(--color-warning-light) 100%);
}
.report-section__container {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.report-section__header {
text-align: center;
margin-bottom: var(--space-8);
}
.report-section__icon {
width: 64px;
height: 64px;
background-color: var(--color-error);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-0);
margin: 0 auto var(--space-4);
}
.report-section__title {
margin-bottom: var(--space-3);
}
.report-section__subtitle {
color: var(--color-text-secondary);
}
.report-form {
background-color: var(--color-neutral-0);
padding: var(--space-6);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
.form-group {
margin-bottom: var(--space-4);
}
.form-group:last-of-type {
margin-bottom: var(--space-6);
}
.form-label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
margin-bottom: var(--space-2);
}
.form-input,
.form-textarea {
width: 100%;
padding: var(--space-3);
font-size: var(--font-size-base);
color: var(--color-text-primary);
background-color: var(--color-neutral-0);
border: 2px solid var(--color-border-default);
border-radius: var(--radius-md);
transition: border-color var(--duration-fast) var(--easing-default);
}
.form-input:focus,
.form-textarea:focus {
outline: none;
border-color: var(--color-primary);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--color-text-muted);
}
.form-textarea {
min-height: 120px;
resize: vertical;
}
.form-helper {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
margin-top: var(--space-1);
}
.report-form__success {
display: none;
padding: var(--space-4);
background-color: var(--color-success-light);
color: var(--color-success-dark);
border-radius: var(--radius-md);
text-align: center;
margin-top: var(--space-4);
}
.report-form__success.visible {
display: block;
}
/* ========================================
CTA SECTION
======================================== */
.cta-section {
background-color: var(--color-bg-secondary);
text-align: center;
}
.cta-section__title {
margin-bottom: var(--space-4);
}
.cta-section__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-8);
color: var(--color-text-secondary);
}
.cta-section__buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.cta-section__buttons {
flex-direction: row;
justify-content: center;
}
}
/* ========================================
FOOTER COMPONENT
======================================== */
.footer {
background-color: var(--color-neutral-900);
color: var(--color-text-inverse);
padding: var(--space-12) 0 var(--space-8);
}
.footer__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
.footer__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.footer__heading {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.footer__link {
display: block;
padding: var(--space-1) 0;
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
.footer__link:hover {
color: var(--color-text-inverse);
}
.footer__bottom {
padding-top: var(--space-8);
border-top: 1px solid var(--color-neutral-800);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 768px) {
.footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
.footer__copyright {
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
.footer__lite-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
/* ========================================
CHECKBOX (for lite mode)
======================================== */
.checkbox {
width: 20px;
height: 20px;
appearance: none;
background-color: transparent;
border: 2px solid var(--color-neutral-500);
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.checkbox:checked {
background-color: var(--color-primary-400);
border-color: var(--color-primary-400);
}
.checkbox:checked::after {
content: '';
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
}
/* ========================================
LITE MODE STYLES
======================================== */
.lite-mode img:not(.essential),
.lite-mode video,
.lite-mode iframe {
display: none !important;
}
.lite-mode .hero-media {
background: var(--color-neutral-100) !important;
}
.lite-mode .statement-card__video {
display: none;
}
.lite-mode * {
animation: none !important;
transition: none !important;
}
.lite-mode .card--interactive:hover {
transform: none;
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ========================================
ICON SVG
======================================== */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }
/* ===== Styles from next-gen.html ===== */
/* ========================================
CSS CUSTOM PROPERTIES (Design Tokens)
======================================== */
:root {
/* Typography - Font Families */
--font-family-primary: 'Noto Sans Bengali', 'Hind Siliguri', 'Kalpurush', system-ui, sans-serif;
--font-family-secondary: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
/* Typography - Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem;
--font-size-3xl: 2.25rem;
--font-size-4xl: 3rem;
--font-size-5xl: 4rem;
/* Typography - Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Typography - Line Heights */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Typography - Letter Spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Heading Definitions */
--heading-h1-size: var(--font-size-4xl);
--heading-h1-weight: 700;
--heading-h1-line-height: 1.1;
--heading-h1-letter-spacing: -0.02em;
--heading-h2-size: var(--font-size-3xl);
--heading-h2-weight: 700;
--heading-h2-line-height: 1.2;
--heading-h2-letter-spacing: -0.01em;
--heading-h3-size: var(--font-size-2xl);
--heading-h3-weight: 600;
--heading-h3-line-height: 1.25;
--heading-h3-letter-spacing: 0;
--heading-h4-size: var(--font-size-xl);
--heading-h4-weight: 600;
--heading-h4-line-height: 1.3;
--heading-h4-letter-spacing: 0;
/* Body & Text Styles */
--text-body-size: var(--font-size-base);
--text-body-weight: 400;
--text-body-line-height: 1.6;
--text-body-letter-spacing: 0;
--text-lead-size: var(--font-size-lg);
--text-lead-weight: 400;
--text-lead-line-height: 1.7;
/* Colors - Primary (BNP Green) */
--color-primary-50: #ecfdf5;
--color-primary-100: #d1fae5;
--color-primary-200: #a7f3d0;
--color-primary-300: #6ee7b7;
--color-primary-400: #34d399;
--color-primary-500: #10b981;
--color-primary-600: #059669;
--color-primary-700: #047857;
--color-primary-800: #065f46;
--color-primary-900: #064e3b;
--color-primary: #006a4e;
/* Colors - Secondary (Trust Blue) */
--color-secondary-50: #eff6ff;
--color-secondary-100: #dbeafe;
--color-secondary-200: #bfdbfe;
--color-secondary-300: #93c5fd;
--color-secondary-400: #60a5fa;
--color-secondary-500: #3b82f6;
--color-secondary-600: #2563eb;
--color-secondary-700: #1d4ed8;
--color-secondary-800: #1e40af;
--color-secondary-900: #1e3a8a;
--color-secondary: #1e40af;
/* Colors - Accent (Optimism Yellow - WCAG adjusted) */
--color-accent-50: #fffbeb;
--color-accent-100: #fef3c7;
--color-accent-200: #fde68a;
--color-accent-300: #fcd34d;
--color-accent-400: #fbbf24;
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;
--color-accent-700: #b45309;
--color-accent-800: #92400e;
--color-accent-900: #78350f;
--color-accent: #b45309;
/* Colors - Neutrals */
--color-neutral-0: #ffffff;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-neutral-400: #a3a3a3;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-neutral-950: #0a0a0a;
/* Colors - Semantic */
--color-success-light: #dcfce7;
--color-success: #16a34a;
--color-success-dark: #15803d;
--color-error-light: #fee2e2;
--color-error: #dc2626;
--color-error-dark: #b91c1c;
--color-warning-light: #fef3c7;
--color-warning: #d97706;
--color-warning-dark: #b45309;
--color-info-light: #dbeafe;
--color-info: #2563eb;
--color-info-dark: #1d4ed8;
/* Colors - Backgrounds */
--color-bg-primary: var(--color-neutral-0);
--color-bg-secondary: var(--color-neutral-50);
--color-bg-tertiary: var(--color-neutral-100);
--color-bg-inverse: var(--color-neutral-900);
/* Colors - Surfaces */
--color-surface-1: var(--color-neutral-0);
--color-surface-2: var(--color-neutral-50);
--color-surface-3: var(--color-neutral-100);
/* Colors - Text */
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-600);
--color-text-muted: var(--color-neutral-400);
--color-text-disabled: var(--color-neutral-300);
--color-text-inverse: var(--color-neutral-0);
--color-text-inverse-secondary: var(--color-neutral-300);
--color-text-link: var(--color-primary);
--color-text-link-hover: var(--color-primary-800);
/* Colors - Borders */
--color-border-default: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
--color-border-muted: var(--color-neutral-100);
--color-border-focus: var(--color-primary);
--color-border-error: var(--color-error);
--color-border-success: var(--color-success);
/* Spacing Scale (4px increments) */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
/* Semantic Spacing */
--spacing-xs: var(--space-1);
--spacing-sm: var(--space-2);
--spacing-md: var(--space-4);
--spacing-lg: var(--space-6);
--spacing-xl: var(--space-8);
--spacing-2xl: var(--space-12);
--spacing-3xl: var(--space-16);
--spacing-4xl: var(--space-24);
/* Layout - Containers */
--container-xs: 320px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--container-max: 1200px;
/* Layout - Grid */
--grid-columns: 12;
--grid-gap: var(--space-4);
--grid-gap-sm: var(--space-2);
--grid-gap-lg: var(--space-6);
/* Section Padding */
--section-padding-y-sm: var(--space-8);
--section-padding-y-md: var(--space-12);
--section-padding-y-lg: var(--space-16);
--section-padding-y-xl: var(--space-24);
/* Borders & Shadows */
--radius-none: 0;
--radius-sm: 0.125rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Transitions */
--duration-instant: 0ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-in: cubic-bezier(0.4, 0, 1, 1);
--easing-out: cubic-bezier(0, 0, 0.2, 1);
--easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Z-Index Scale */
--z-deep: -999;
--z-default: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-overlay: 40;
--z-modal: 50;
--z-popover: 60;
--z-tooltip: 70;
--z-toast: 80;
--z-top: 999;
/* Icons */
--icon-xs: 12px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
--icon-2xl: 48px;
/* Aspect Ratios */
--aspect-square: 1 / 1;
--aspect-video: 16 / 9;
--aspect-photo: 4 / 3;
--aspect-portrait: 3 / 4;
--aspect-wide: 21 / 9;
/* Button Tokens */
--btn-primary-bg: var(--color-primary);
--btn-primary-bg-hover: var(--color-primary-800);
--btn-primary-bg-active: var(--color-primary-900);
--btn-primary-bg-disabled: var(--color-neutral-300);
--btn-primary-text: var(--color-neutral-0);
--btn-primary-text-disabled: var(--color-neutral-500);
--btn-focus-ring-width: 2px;
--btn-focus-ring-offset: 2px;
--btn-focus-ring-color: var(--color-primary-400);
}
/* Responsive Base Font */
html {
font-size: 16px;
font-size: clamp(14px, 2.5vw, 18px);
}
/* Responsive Typography */
@media (min-width: 640px) {
:root {
--heading-h1-size: var(--font-size-5xl);
}
}
@media (min-width: 1024px) {
:root {
--heading-h1-size: 4.5rem;
--heading-h2-size: var(--font-size-4xl);
}
}
/* ========================================
BASE RESET & TYPOGRAPHY
======================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-primary);
font-size: var(--text-body-size);
font-weight: var(--text-body-weight);
line-height: var(--text-body-line-height);
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* English language uses secondary font */
html[lang="en"] body {
font-family: var(--font-family-secondary);
}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6 {
font-family: var(--font-family-secondary);
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text-primary);
}
h1 {
font-size: var(--heading-h1-size);
font-weight: var(--heading-h1-weight);
line-height: var(--heading-h1-line-height);
letter-spacing: var(--heading-h1-letter-spacing);
}
h2 {
font-size: var(--heading-h2-size);
font-weight: var(--heading-h2-weight);
line-height: var(--heading-h2-line-height);
letter-spacing: var(--heading-h2-letter-spacing);
}
h3 {
font-size: var(--heading-h3-size);
font-weight: var(--heading-h3-weight);
line-height: var(--heading-h3-line-height);
letter-spacing: var(--heading-h3-letter-spacing);
}
h4 {
font-size: var(--heading-h4-size);
font-weight: var(--heading-h4-weight);
line-height: var(--heading-h4-line-height);
letter-spacing: var(--heading-h4-letter-spacing);
}
p {
margin-bottom: var(--space-4);
}
p:last-child {
margin-bottom: 0;
}
/* ========================================
UTILITY CLASSES
======================================== */
.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;
}
.text-lead {
font-size: var(--text-lead-size);
font-weight: var(--text-lead-weight);
line-height: var(--text-lead-line-height);
color: var(--color-text-secondary);
}
.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
/* ========================================
LAYOUT COMPONENTS
======================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
@media (min-width: 640px) {
.container {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
}
@media (min-width: 1024px) {
.container {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
}
.section {
padding-top: var(--section-padding-y-md);
padding-bottom: var(--section-padding-y-md);
}
@media (min-width: 1024px) {
.section {
padding-top: var(--section-padding-y-lg);
padding-bottom: var(--section-padding-y-lg);
}
}
/* ========================================
HEADER COMPONENT
======================================== */
.header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border-muted);
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 var(--space-4);
}
@media (min-width: 1024px) {
.header__container {
height: 72px;
padding: 0;
}
}
.header__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
text-decoration: none;
}
.header__logo-icon {
width: 40px;
height: 40px;
background-color: var(--color-primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-0);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
.nav {
display: none;
align-items: center;
gap: var(--space-1);
}
@media (min-width: 1024px) {
.nav {
display: flex;
}
}
.nav__link {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
.nav__link:hover {
color: var(--color-text-primary);
background-color: var(--color-neutral-100);
}
.nav__link--active {
color: var(--color-primary);
background-color: var(--color-primary-50);
}
.header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-primary);
}
.mobile-menu-btn:hover {
background-color: var(--color-neutral-100);
}
@media (min-width: 1024px) {
.mobile-menu-btn {
display: none;
}
}
/* ========================================
LANGUAGE TOGGLE
======================================== */
.lang-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 36px;
padding: 0 var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-family: var(--font-family-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border: 2px solid var(--color-secondary-200);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--duration-fast) var(--easing-default);
}
.lang-toggle:hover {
background-color: var(--color-secondary-200);
border-color: var(--color-secondary-300);
}
.lang-toggle:focus-visible {
outline: 2px solid var(--color-secondary-400);
outline-offset: 2px;
}
/* ========================================
BUTTON COMPONENT
======================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-medium);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
html[lang="en"] .btn {
font-family: var(--font-family-secondary);
}
.btn--sm {
height: 32px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
}
.btn--md {
height: 40px;
padding: 0 var(--space-4);
font-size: var(--font-size-base);
}
.btn--lg {
height: 48px;
padding: 0 var(--space-6);
font-size: var(--font-size-md);
}
.btn--primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.btn--primary:hover {
background-color: var(--btn-primary-bg-hover);
}
.btn--primary:active {
background-color: var(--btn-primary-bg-active);
}
.btn--primary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
background-color: var(--btn-primary-bg-disabled);
color: var(--btn-primary-text-disabled);
cursor: not-allowed;
}
.btn--secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--secondary:hover {
background-color: var(--color-primary-50);
}
.btn--secondary:active {
background-color: var(--color-primary-100);
}
.btn--secondary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--ghost {
background-color: transparent;
color: var(--color-primary);
}
.btn--ghost:hover {
background-color: var(--color-primary-50);
}
.btn--inverse {
background-color: var(--color-neutral-0);
color: var(--color-neutral-900);
}
.btn--inverse:hover {
background-color: var(--color-neutral-100);
}
/* ========================================
ICON SVG
======================================== */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }
/* ========================================
HERO — NEXT-GEN VARIANT
======================================== */
.hero-nextgen {
background: linear-gradient(135deg, var(--color-secondary-50) 0%, var(--color-primary-50) 50%, var(--color-accent-50) 100%);
text-align: center;
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
@media (min-width: 1024px) {
.hero-nextgen {
padding-top: var(--space-24);
padding-bottom: var(--space-24);
}
}
.hero-nextgen__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
}
.hero-nextgen__title {
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-6);
}
.hero-nextgen__subtitle {
max-width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-8);
}
.hero-nextgen__stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.hero-stat {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background-color: var(--color-neutral-0);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
box-shadow: var(--shadow-sm);
}
.hero-stat__number {
color: var(--color-secondary);
font-weight: var(--font-weight-bold);
}
.hero__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.hero__actions {
flex-direction: row;
justify-content: center;
}
}
/* ========================================
CONCEPT EXPLAINER SECTION
======================================== */
.concept {
background-color: var(--color-bg-primary);
}
.concept__header {
text-align: center;
margin-bottom: var(--space-12);
}
.concept__header h2 {
margin-bottom: var(--space-4);
}
.concept__header p {
max-width: 700px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
}
.concept__steps {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
max-width: 900px;
margin: 0 auto;
}
@media (min-width: 768px) {
.concept__steps {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
}
.concept__step {
text-align: center;
padding: var(--space-6);
background-color: var(--color-surface-2);
border-radius: var(--radius-xl);
border: 1px solid var(--color-border-muted);
}
.concept__step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background-color: var(--color-secondary);
color: var(--color-neutral-0);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
border-radius: var(--radius-full);
margin-bottom: var(--space-4);
}
.concept__step-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background-color: var(--color-secondary-100);
color: var(--color-secondary);
border-radius: var(--radius-lg);
margin: 0 auto var(--space-4);
}
.concept__step-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
.concept__step-desc {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* ========================================
COUNCIL STRUCTURE SECTION
======================================== */
.council {
background-color: var(--color-bg-secondary);
}
.council__header {
text-align: center;
margin-bottom: var(--space-12);
}
.council__header h2 {
margin-bottom: var(--space-4);
}
.council__header p {
max-width: 700px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
}
.council__category {
margin-bottom: var(--space-10);
}
.council__category:last-child {
margin-bottom: 0;
}
.council__category-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-6);
padding-bottom: var(--space-3);
border-bottom: 2px solid var(--color-secondary-200);
color: var(--color-secondary);
}
.council__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
@media (min-width: 768px) {
.council__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.council__card {
background-color: var(--color-surface-1);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--duration-fast) var(--easing-default),
transform var(--duration-fast) var(--easing-default);
}
.council__card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.council__card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background-color: var(--color-secondary-100);
color: var(--color-secondary);
border-radius: var(--radius-lg);
margin-bottom: var(--space-3);
}
.council__card-icon--accent {
background-color: var(--color-accent-100);
color: var(--color-accent);
}
.council__card-icon--success {
background-color: var(--color-success-light);
color: var(--color-success);
}
.council__card-icon--error {
background-color: var(--color-error-light);
color: var(--color-error);
}
.council__card-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
.council__card-desc {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* ========================================
VETO POWER MECHANISM SECTION
======================================== */
.veto-mechanism {
background-color: var(--color-bg-primary);
}
.veto__header {
text-align: center;
margin-bottom: var(--space-12);
}
.veto__header h2 {
margin-bottom: var(--space-4);
}
.veto__header p {
max-width: 700px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
}
.veto__steps {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
max-width: 900px;
margin: 0 auto;
position: relative;
}
@media (min-width: 768px) {
.veto__steps {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
}
}
.veto__step {
text-align: center;
padding: var(--space-5);
background-color: var(--color-surface-2);
border-radius: var(--radius-xl);
border: 2px solid var(--color-border-default);
position: relative;
}
.veto__step--highlight {
border-color: var(--color-secondary);
background-color: var(--color-secondary-50);
}
.veto__step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: var(--color-primary);
color: var(--color-neutral-0);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
border-radius: var(--radius-full);
margin-bottom: var(--space-3);
}
.veto__step--highlight .veto__step-number {
background-color: var(--color-secondary);
}
.veto__step-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
.veto__step-desc {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.veto__note {
text-align: center;
margin-top: var(--space-8);
padding: var(--space-4) var(--space-6);
background-color: var(--color-primary-50);
border-left: 4px solid var(--color-primary);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
color: var(--color-primary-800);
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* ========================================
APPLICATION FORM SECTION
======================================== */
.apply-section {
background-color: var(--color-secondary-50);
}
.apply__header {
text-align: center;
margin-bottom: var(--space-10);
}
.apply__header h2 {
margin-bottom: var(--space-4);
}
.apply__header p {
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
}
.apply-form {
max-width: 640px;
margin: 0 auto;
background-color: var(--color-surface-1);
padding: var(--space-8);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
}
.form-group {
margin-bottom: var(--space-5);
}
.form-group:last-of-type {
margin-bottom: var(--space-6);
}
.form-label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin-bottom: var(--space-2);
}
.form-input,
.form-select,
.form-textarea {
display: block;
width: 100%;
padding: var(--space-2-5) var(--space-3);
font-size: var(--font-size-base);
font-family: var(--font-family-primary);
color: var(--color-text-primary);
background-color: var(--color-neutral-0);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md);
transition: border-color var(--duration-fast) var(--easing-default),
box-shadow var(--duration-fast) var(--easing-default);
}
html[lang="en"] .form-input,
html[lang="en"] .form-select,
html[lang="en"] .form-textarea {
font-family: var(--font-family-secondary);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--color-border-focus);
box-shadow: 0 0 0 3px var(--color-primary-100);
}
.form-input--error,
.form-select--error,
.form-textarea--error {
border-color: var(--color-border-error);
}
.form-input--error:focus,
.form-select--error:focus,
.form-textarea--error:focus {
box-shadow: 0 0 0 3px var(--color-error-light);
}
.form-textarea {
min-height: 120px;
resize: vertical;
}
.form-error-msg {
display: none;
font-size: var(--font-size-xs);
color: var(--color-error);
margin-top: var(--space-1);
}
.form-group--error .form-error-msg {
display: block;
}
.form-group--error .form-input,
.form-group--error .form-select,
.form-group--error .form-textarea {
border-color: var(--color-border-error);
}
.apply-form__submit {
width: 100%;
}
.apply-form__success {
display: none;
text-align: center;
padding: var(--space-8);
}
.apply-form__success--visible {
display: block;
}
.apply-form__success-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background-color: var(--color-success-light);
color: var(--color-success);
border-radius: var(--radius-full);
margin: 0 auto var(--space-4);
}
.apply-form__success-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
color: var(--color-success-dark);
}
.apply-form__success-desc {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* ========================================
CTA SECTION
======================================== */
.cta-section {
background-color: var(--color-primary);
color: var(--color-text-inverse);
text-align: center;
}
.cta-section h2 {
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.cta-section p {
color: var(--color-text-inverse-secondary);
max-width: 600px;
margin: 0 auto var(--space-8);
}
.cta-section__buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.cta-section__buttons {
flex-direction: row;
justify-content: center;
}
}
/* ========================================
FOOTER COMPONENT
======================================== */
.footer {
background-color: var(--color-neutral-900);
color: var(--color-text-inverse);
padding: var(--space-12) 0 var(--space-8);
}
.footer__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
.footer__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.footer__heading {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.footer__link {
display: block;
padding: var(--space-1) 0;
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
.footer__link:hover {
color: var(--color-text-inverse);
}
.footer__bottom {
padding-top: var(--space-8);
border-top: 1px solid var(--color-neutral-800);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 768px) {
.footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
.footer__copyright {
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
.footer__lite-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
/* ========================================
CHECKBOX (for lite mode)
======================================== */
.checkbox {
width: 20px;
height: 20px;
appearance: none;
background-color: transparent;
border: 2px solid var(--color-neutral-500);
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.checkbox:checked {
background-color: var(--color-primary-400);
border-color: var(--color-primary-400);
}
.checkbox:checked::after {
content: '';
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
}
/* ========================================
LITE MODE STYLES
======================================== */
.lite-mode img:not(.essential),
.lite-mode video,
.lite-mode iframe {
display: none !important;
}
.lite-mode .hero-nextgen {
background-image: none !important;
background: var(--color-bg-secondary) !important;
}
.lite-mode * {
animation: none !important;
transition: none !important;
}
.lite-mode .council__card:hover {
transform: none;
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ===== Styles from roadmap.html ===== */
/* ========================================
CSS CUSTOM PROPERTIES (Design Tokens)
======================================== */
:root {
/* Typography - Font Families */
--font-family-primary: 'Noto Sans Bengali', 'Hind Siliguri', 'Kalpurush', system-ui, sans-serif;
--font-family-secondary: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
/* Typography - Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem;
--font-size-3xl: 2.25rem;
--font-size-4xl: 3rem;
--font-size-5xl: 4rem;
/* Typography - Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Typography - Line Heights */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Typography - Letter Spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Heading Definitions */
--heading-h1-size: var(--font-size-4xl);
--heading-h1-weight: 700;
--heading-h1-line-height: 1.1;
--heading-h1-letter-spacing: -0.02em;
--heading-h2-size: var(--font-size-3xl);
--heading-h2-weight: 700;
--heading-h2-line-height: 1.2;
--heading-h2-letter-spacing: -0.01em;
--heading-h3-size: var(--font-size-2xl);
--heading-h3-weight: 600;
--heading-h3-line-height: 1.25;
--heading-h3-letter-spacing: 0;
--heading-h4-size: var(--font-size-xl);
--heading-h4-weight: 600;
--heading-h4-line-height: 1.3;
--heading-h4-letter-spacing: 0;
/* Body & Text Styles */
--text-body-size: var(--font-size-base);
--text-body-weight: 400;
--text-body-line-height: 1.6;
--text-body-letter-spacing: 0;
--text-lead-size: var(--font-size-lg);
--text-lead-weight: 400;
--text-lead-line-height: 1.7;
/* Colors - Primary (BNP Green) */
--color-primary-50: #ecfdf5;
--color-primary-100: #d1fae5;
--color-primary-200: #a7f3d0;
--color-primary-300: #6ee7b7;
--color-primary-400: #34d399;
--color-primary-500: #10b981;
--color-primary-600: #059669;
--color-primary-700: #047857;
--color-primary-800: #065f46;
--color-primary-900: #064e3b;
--color-primary: #006a4e;
/* Colors - Secondary (Trust Blue) */
--color-secondary-50: #eff6ff;
--color-secondary-100: #dbeafe;
--color-secondary-200: #bfdbfe;
--color-secondary-300: #93c5fd;
--color-secondary-400: #60a5fa;
--color-secondary-500: #3b82f6;
--color-secondary-600: #2563eb;
--color-secondary-700: #1d4ed8;
--color-secondary-800: #1e40af;
--color-secondary-900: #1e3a8a;
--color-secondary: #1e40af;
/* Colors - Accent (Optimism Yellow - WCAG adjusted) */
--color-accent-50: #fffbeb;
--color-accent-100: #fef3c7;
--color-accent-200: #fde68a;
--color-accent-300: #fcd34d;
--color-accent-400: #fbbf24;
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;
--color-accent-700: #b45309;
--color-accent-800: #92400e;
--color-accent-900: #78350f;
--color-accent: #b45309;
/* Colors - Neutrals */
--color-neutral-0: #ffffff;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-neutral-400: #a3a3a3;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-neutral-950: #0a0a0a;
/* Colors - Semantic */
--color-success-light: #dcfce7;
--color-success: #16a34a;
--color-success-dark: #15803d;
--color-error-light: #fee2e2;
--color-error: #dc2626;
--color-error-dark: #b91c1c;
--color-warning-light: #fef3c7;
--color-warning: #d97706;
--color-warning-dark: #b45309;
--color-info-light: #dbeafe;
--color-info: #2563eb;
--color-info-dark: #1d4ed8;
/* Colors - Backgrounds */
--color-bg-primary: var(--color-neutral-0);
--color-bg-secondary: var(--color-neutral-50);
--color-bg-tertiary: var(--color-neutral-100);
--color-bg-inverse: var(--color-neutral-900);
/* Colors - Surfaces */
--color-surface-1: var(--color-neutral-0);
--color-surface-2: var(--color-neutral-50);
--color-surface-3: var(--color-neutral-100);
/* Colors - Text */
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-600);
--color-text-muted: var(--color-neutral-400);
--color-text-disabled: var(--color-neutral-300);
--color-text-inverse: var(--color-neutral-0);
--color-text-inverse-secondary: var(--color-neutral-300);
--color-text-link: var(--color-primary);
--color-text-link-hover: var(--color-primary-800);
/* Colors - Borders */
--color-border-default: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
--color-border-muted: var(--color-neutral-100);
--color-border-focus: var(--color-primary);
--color-border-error: var(--color-error);
--color-border-success: var(--color-success);
/* Spacing Scale (4px increments) */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
/* Semantic Spacing */
--spacing-xs: var(--space-1);
--spacing-sm: var(--space-2);
--spacing-md: var(--space-4);
--spacing-lg: var(--space-6);
--spacing-xl: var(--space-8);
--spacing-2xl: var(--space-12);
--spacing-3xl: var(--space-16);
--spacing-4xl: var(--space-24);
/* Layout - Containers */
--container-xs: 320px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--container-max: 1200px;
/* Layout - Grid */
--grid-columns: 12;
--grid-gap: var(--space-4);
--grid-gap-sm: var(--space-2);
--grid-gap-lg: var(--space-6);
/* Section Padding */
--section-padding-y-sm: var(--space-8);
--section-padding-y-md: var(--space-12);
--section-padding-y-lg: var(--space-16);
--section-padding-y-xl: var(--space-24);
/* Borders & Shadows */
--radius-none: 0;
--radius-sm: 0.125rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Transitions */
--duration-instant: 0ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-in: cubic-bezier(0.4, 0, 1, 1);
--easing-out: cubic-bezier(0, 0, 0.2, 1);
--easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Z-Index Scale */
--z-deep: -999;
--z-default: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-overlay: 40;
--z-modal: 50;
--z-popover: 60;
--z-tooltip: 70;
--z-toast: 80;
--z-top: 999;
/* Icons */
--icon-xs: 12px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
--icon-2xl: 48px;
/* Aspect Ratios */
--aspect-square: 1 / 1;
--aspect-video: 16 / 9;
--aspect-photo: 4 / 3;
--aspect-portrait: 3 / 4;
--aspect-wide: 21 / 9;
/* Button Tokens */
--btn-primary-bg: var(--color-primary);
--btn-primary-bg-hover: var(--color-primary-800);
--btn-primary-bg-active: var(--color-primary-900);
--btn-primary-bg-disabled: var(--color-neutral-300);
--btn-primary-text: var(--color-neutral-0);
--btn-primary-text-disabled: var(--color-neutral-500);
--btn-focus-ring-width: 2px;
--btn-focus-ring-offset: 2px;
--btn-focus-ring-color: var(--color-primary-400);
}
/* Responsive Base Font */
html {
font-size: 16px;
font-size: clamp(14px, 2.5vw, 18px);
}
/* Responsive Typography */
@media (min-width: 640px) {
:root {
--heading-h1-size: var(--font-size-5xl);
}
}
@media (min-width: 1024px) {
:root {
--heading-h1-size: 4.5rem;
--heading-h2-size: var(--font-size-4xl);
}
}
/* ========================================
BASE RESET & TYPOGRAPHY
======================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-primary);
font-size: var(--text-body-size);
font-weight: var(--text-body-weight);
line-height: var(--text-body-line-height);
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* English language uses secondary font */
html[lang="en"] body {
font-family: var(--font-family-secondary);
}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6 {
font-family: var(--font-family-secondary);
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text-primary);
}
h1 {
font-size: var(--heading-h1-size);
font-weight: var(--heading-h1-weight);
line-height: var(--heading-h1-line-height);
letter-spacing: var(--heading-h1-letter-spacing);
}
h2 {
font-size: var(--heading-h2-size);
font-weight: var(--heading-h2-weight);
line-height: var(--heading-h2-line-height);
letter-spacing: var(--heading-h2-letter-spacing);
}
h3 {
font-size: var(--heading-h3-size);
font-weight: var(--heading-h3-weight);
line-height: var(--heading-h3-line-height);
letter-spacing: var(--heading-h3-letter-spacing);
}
h4 {
font-size: var(--heading-h4-size);
font-weight: var(--heading-h4-weight);
line-height: var(--heading-h4-line-height);
letter-spacing: var(--heading-h4-letter-spacing);
}
p {
margin-bottom: var(--space-4);
}
p:last-child {
margin-bottom: 0;
}
/* ========================================
UTILITY CLASSES
======================================== */
.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;
}
.text-lead {
font-size: var(--text-lead-size);
font-weight: var(--text-lead-weight);
line-height: var(--text-lead-line-height);
color: var(--color-text-secondary);
}
.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
/* ========================================
LAYOUT COMPONENTS
======================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
@media (min-width: 640px) {
.container {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
}
@media (min-width: 1024px) {
.container {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
}
.section {
padding-top: var(--section-padding-y-md);
padding-bottom: var(--section-padding-y-md);
}
@media (min-width: 1024px) {
.section {
padding-top: var(--section-padding-y-lg);
padding-bottom: var(--section-padding-y-lg);
}
}
/* ========================================
HEADER COMPONENT
======================================== */
.header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border-muted);
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 var(--space-4);
}
@media (min-width: 1024px) {
.header__container {
height: 72px;
padding: 0;
}
}
.header__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
text-decoration: none;
}
.header__logo-icon {
width: 40px;
height: 40px;
background-color: var(--color-primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-0);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
.nav {
display: none;
align-items: center;
gap: var(--space-1);
}
@media (min-width: 1024px) {
.nav {
display: flex;
}
}
.nav__link {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
.nav__link:hover {
color: var(--color-text-primary);
background-color: var(--color-neutral-100);
}
.nav__link--active {
color: var(--color-primary);
background-color: var(--color-primary-50);
}
.header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-primary);
}
.mobile-menu-btn:hover {
background-color: var(--color-neutral-100);
}
@media (min-width: 1024px) {
.mobile-menu-btn {
display: none;
}
}
/* ========================================
LANGUAGE TOGGLE
======================================== */
.lang-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 36px;
padding: 0 var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-family: var(--font-family-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border: 2px solid var(--color-secondary-200);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--duration-fast) var(--easing-default);
}
.lang-toggle:hover {
background-color: var(--color-secondary-200);
border-color: var(--color-secondary-300);
}
.lang-toggle:focus-visible {
outline: 2px solid var(--color-secondary-400);
outline-offset: 2px;
}
/* ========================================
BUTTON COMPONENT
======================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-medium);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
html[lang="en"] .btn {
font-family: var(--font-family-secondary);
}
.btn--sm {
height: 32px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
}
.btn--md {
height: 40px;
padding: 0 var(--space-4);
font-size: var(--font-size-base);
}
.btn--lg {
height: 48px;
padding: 0 var(--space-6);
font-size: var(--font-size-md);
}
.btn--primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.btn--primary:hover {
background-color: var(--btn-primary-bg-hover);
}
.btn--primary:active {
background-color: var(--btn-primary-bg-active);
}
.btn--primary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--secondary:hover {
background-color: var(--color-primary-50);
}
.btn--secondary:active {
background-color: var(--color-primary-100);
}
.btn--secondary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--inverse {
background-color: var(--color-neutral-0);
color: var(--color-neutral-900);
}
.btn--inverse:hover {
background-color: var(--color-neutral-100);
}
/* ========================================
HERO SECTION - ROADMAP VARIANT
======================================== */
.hero-roadmap {
background: linear-gradient(135deg, var(--color-secondary-50) 0%, var(--color-primary-50) 100%);
text-align: center;
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
@media (min-width: 1024px) {
.hero-roadmap {
padding-top: var(--space-24);
padding-bottom: var(--space-24);
}
}
.hero-roadmap__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background-color: var(--color-secondary);
color: var(--color-neutral-0);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
}
.hero-roadmap__title {
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-6);
}
.hero-roadmap__subtitle {
max-width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-8);
}
.hero-roadmap__pillars {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.hero-pillar-pill {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-4) var(--space-6);
background-color: var(--color-neutral-0);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
min-width: 160px;
}
.hero-pillar-pill__number {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-secondary);
line-height: 1;
}
.hero-pillar-pill__label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-top: var(--space-1);
}
.hero-roadmap__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.hero-roadmap__actions {
flex-direction: row;
justify-content: center;
}
}
/* ========================================
PILLAR CARD COMPONENT
======================================== */
.pillar-section {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
.pillar-section--alt {
background-color: var(--color-bg-secondary);
}
.pillar-header {
display: flex;
align-items: flex-start;
gap: var(--space-6);
margin-bottom: var(--space-8);
}
@media (max-width: 639px) {
.pillar-header {
flex-direction: column;
align-items: center;
text-align: center;
}
}
.pillar-header__icon {
flex-shrink: 0;
width: 72px;
height: 72px;
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-0);
font-size: var(--font-size-3xl);
}
.pillar-header__icon--1 {
background: linear-gradient(135deg, var(--color-secondary-600) 0%, var(--color-secondary-800) 100%);
}
.pillar-header__icon--2 {
background: linear-gradient(135deg, var(--color-error) 0%, var(--color-error-dark) 100%);
}
.pillar-header__icon--3 {
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%);
}
.pillar-header__text {
flex: 1;
}
.pillar-header__number {
display: inline-block;
padding: var(--space-1) var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-full);
margin-bottom: var(--space-3);
}
.pillar-header__title {
margin-bottom: var(--space-2);
}
.pillar-header__subtitle {
color: var(--color-text-secondary);
font-size: var(--font-size-lg);
}
/* Problem Block */
.pillar-problem {
background-color: var(--color-neutral-0);
border: 1px solid var(--color-border-default);
border-left: 4px solid var(--color-accent-500);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin-bottom: var(--space-8);
}
.pillar-section--alt .pillar-problem {
background-color: var(--color-neutral-0);
}
.pillar-problem__label {
display: inline-block;
padding: var(--space-1) var(--space-2);
background-color: var(--color-accent-100);
color: var(--color-accent);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pillar-problem__text {
color: var(--color-text-secondary);
}
/* Commitments */
.pillar-commitments {
margin-bottom: var(--space-8);
}
.pillar-commitments__label {
display: inline-block;
padding: var(--space-1) var(--space-2);
background-color: var(--color-primary-100);
color: var(--color-primary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-md);
margin-bottom: var(--space-4);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.commitment-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.commitment-item {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-4);
background-color: var(--color-neutral-0);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-lg);
}
.pillar-section--alt .commitment-item {
background-color: var(--color-neutral-0);
}
.commitment-item__number {
flex-shrink: 0;
width: 32px;
height: 32px;
background-color: var(--color-primary-100);
color: var(--color-primary);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
}
.commitment-item__text {
flex: 1;
}
.commitment-item__title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-1);
}
.commitment-item__desc {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* Tracking Section */
.pillar-tracking {
background-color: var(--color-neutral-0);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin-bottom: var(--space-6);
}
.pillar-section--alt .pillar-tracking {
background-color: var(--color-neutral-0);
}
.pillar-tracking__label {
display: inline-block;
padding: var(--space-1) var(--space-2);
background-color: var(--color-success-light);
color: var(--color-success-dark);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-md);
margin-bottom: var(--space-4);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tracking-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.tracking-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.tracking-item__icon {
flex-shrink: 0;
width: 24px;
height: 24px;
color: var(--color-success);
margin-top: 2px;
}
.tracking-item__text {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* Source Block */
.pillar-source {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.pillar-source a {
color: var(--color-primary);
text-decoration: underline;
}
.pillar-source a:hover {
color: var(--color-primary-800);
}
/* ========================================
PROGRESS ACCOUNTABILITY SECTION
======================================== */
.accountability {
background-color: var(--color-primary);
color: var(--color-text-inverse);
text-align: center;
}
.accountability__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background-color: rgba(255, 255, 255, 0.2);
color: var(--color-neutral-0);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
}
.accountability__title {
color: var(--color-text-inverse);
margin-bottom: var(--space-6);
}
.accountability__desc {
max-width: 700px;
margin: 0 auto var(--space-8);
font-size: var(--font-size-lg);
opacity: 0.95;
}
.accountability__methods {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-6);
margin-bottom: var(--space-8);
}
.accountability-method {
text-align: center;
max-width: 240px;
}
.accountability-method__icon {
width: 56px;
height: 56px;
background-color: rgba(255, 255, 255, 0.15);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-3);
color: var(--color-neutral-0);
}
.accountability-method__title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-1);
}
.accountability-method__desc {
font-size: var(--font-size-sm);
opacity: 0.85;
}
/* ========================================
CTA SECTION
======================================== */
.cta-section {
background-color: var(--color-bg-secondary);
text-align: center;
}
.cta-section__title {
margin-bottom: var(--space-4);
}
.cta-section__desc {
max-width: 600px;
margin: 0 auto var(--space-8);
color: var(--color-text-secondary);
}
.cta-section__buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.cta-section__buttons {
flex-direction: row;
justify-content: center;
}
}
/* ========================================
FOOTER COMPONENT
======================================== */
.footer {
background-color: var(--color-neutral-900);
color: var(--color-text-inverse);
padding: var(--space-12) 0 var(--space-8);
}
.footer__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
.footer__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.footer__heading {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.footer__link {
display: block;
padding: var(--space-1) 0;
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
.footer__link:hover {
color: var(--color-text-inverse);
}
.footer__bottom {
padding-top: var(--space-8);
border-top: 1px solid var(--color-neutral-800);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 768px) {
.footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
.footer__copyright {
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
.footer__lite-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
/* ========================================
CHECKBOX (for lite mode)
======================================== */
.checkbox {
width: 20px;
height: 20px;
appearance: none;
background-color: transparent;
border: 2px solid var(--color-neutral-500);
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.checkbox:checked {
background-color: var(--color-primary-400);
border-color: var(--color-primary-400);
}
.checkbox:checked::after {
content: '';
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
}
/* ========================================
LITE MODE STYLES
======================================== */
.lite-mode img:not(.essential),
.lite-mode video,
.lite-mode iframe {
display: none !important;
}
.lite-mode .hero-roadmap {
background-image: none !important;
background: var(--color-bg-secondary) !important;
}
.lite-mode * {
animation: none !important;
transition: none !important;
}
.lite-mode .hero-pillar-pill:hover {
transform: none;
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ========================================
ICON SVG
======================================== */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }
/* ===== Styles from youth.html ===== */
/* ========================================
CSS CUSTOM PROPERTIES (Design Tokens)
======================================== */
:root {
/* Typography - Font Families */
--font-family-primary: 'Noto Sans Bengali', 'Hind Siliguri', 'Kalpurush', system-ui, sans-serif;
--font-family-secondary: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
/* Typography - Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem;
--font-size-3xl: 2.25rem;
--font-size-4xl: 3rem;
--font-size-5xl: 4rem;
/* Typography - Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Typography - Line Heights */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Typography - Letter Spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Heading Definitions */
--heading-h1-size: var(--font-size-4xl);
--heading-h1-weight: 700;
--heading-h1-line-height: 1.1;
--heading-h1-letter-spacing: -0.02em;
--heading-h2-size: var(--font-size-3xl);
--heading-h2-weight: 700;
--heading-h2-line-height: 1.2;
--heading-h2-letter-spacing: -0.01em;
--heading-h3-size: var(--font-size-2xl);
--heading-h3-weight: 600;
--heading-h3-line-height: 1.25;
--heading-h3-letter-spacing: 0;
--heading-h4-size: var(--font-size-xl);
--heading-h4-weight: 600;
--heading-h4-line-height: 1.3;
--heading-h4-letter-spacing: 0;
/* Body & Text Styles */
--text-body-size: var(--font-size-base);
--text-body-weight: 400;
--text-body-line-height: 1.6;
--text-body-letter-spacing: 0;
--text-lead-size: var(--font-size-lg);
--text-lead-weight: 400;
--text-lead-line-height: 1.7;
/* Colors - Primary (BNP Green) */
--color-primary-50: #ecfdf5;
--color-primary-100: #d1fae5;
--color-primary-200: #a7f3d0;
--color-primary-300: #6ee7b7;
--color-primary-400: #34d399;
--color-primary-500: #10b981;
--color-primary-600: #059669;
--color-primary-700: #047857;
--color-primary-800: #065f46;
--color-primary-900: #064e3b;
--color-primary: #006a4e;
/* Colors - Secondary (Trust Blue) */
--color-secondary-50: #eff6ff;
--color-secondary-100: #dbeafe;
--color-secondary-200: #bfdbfe;
--color-secondary-300: #93c5fd;
--color-secondary-400: #60a5fa;
--color-secondary-500: #3b82f6;
--color-secondary-600: #2563eb;
--color-secondary-700: #1d4ed8;
--color-secondary-800: #1e40af;
--color-secondary-900: #1e3a8a;
--color-secondary: #1e40af;
/* Colors - Accent (Optimism Yellow - WCAG adjusted) */
--color-accent-50: #fffbeb;
--color-accent-100: #fef3c7;
--color-accent-200: #fde68a;
--color-accent-300: #fcd34d;
--color-accent-400: #fbbf24;
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;
--color-accent-700: #b45309;
--color-accent-800: #92400e;
--color-accent-900: #78350f;
--color-accent: #b45309;
/* Colors - Neutrals */
--color-neutral-0: #ffffff;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-neutral-400: #a3a3a3;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-neutral-950: #0a0a0a;
/* Colors - Semantic */
--color-success-light: #dcfce7;
--color-success: #16a34a;
--color-success-dark: #15803d;
--color-error-light: #fee2e2;
--color-error: #dc2626;
--color-error-dark: #b91c1c;
--color-warning-light: #fef3c7;
--color-warning: #d97706;
--color-warning-dark: #b45309;
--color-info-light: #dbeafe;
--color-info: #2563eb;
--color-info-dark: #1d4ed8;
/* Colors - Backgrounds */
--color-bg-primary: var(--color-neutral-0);
--color-bg-secondary: var(--color-neutral-50);
--color-bg-tertiary: var(--color-neutral-100);
--color-bg-inverse: var(--color-neutral-900);
/* Colors - Surfaces */
--color-surface-1: var(--color-neutral-0);
--color-surface-2: var(--color-neutral-50);
--color-surface-3: var(--color-neutral-100);
/* Colors - Text */
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-600);
--color-text-muted: var(--color-neutral-400);
--color-text-disabled: var(--color-neutral-300);
--color-text-inverse: var(--color-neutral-0);
--color-text-inverse-secondary: var(--color-neutral-300);
--color-text-link: var(--color-primary);
--color-text-link-hover: var(--color-primary-800);
/* Colors - Borders */
--color-border-default: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
--color-border-muted: var(--color-neutral-100);
--color-border-focus: var(--color-primary);
--color-border-error: var(--color-error);
--color-border-success: var(--color-success);
/* Spacing Scale (4px increments) */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
/* Semantic Spacing */
--spacing-xs: var(--space-1);
--spacing-sm: var(--space-2);
--spacing-md: var(--space-4);
--spacing-lg: var(--space-6);
--spacing-xl: var(--space-8);
--spacing-2xl: var(--space-12);
--spacing-3xl: var(--space-16);
--spacing-4xl: var(--space-24);
/* Layout - Containers */
--container-xs: 320px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--container-max: 1200px;
/* Layout - Grid */
--grid-columns: 12;
--grid-gap: var(--space-4);
--grid-gap-sm: var(--space-2);
--grid-gap-lg: var(--space-6);
/* Section Padding */
--section-padding-y-sm: var(--space-8);
--section-padding-y-md: var(--space-12);
--section-padding-y-lg: var(--space-16);
--section-padding-y-xl: var(--space-24);
/* Borders & Shadows */
--radius-none: 0;
--radius-sm: 0.125rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Transitions */
--duration-instant: 0ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-in: cubic-bezier(0.4, 0, 1, 1);
--easing-out: cubic-bezier(0, 0, 0.2, 1);
--easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Z-Index Scale */
--z-deep: -999;
--z-default: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-overlay: 40;
--z-modal: 50;
--z-popover: 60;
--z-tooltip: 70;
--z-toast: 80;
--z-top: 999;
/* Icons */
--icon-xs: 12px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
--icon-2xl: 48px;
/* Aspect Ratios */
--aspect-square: 1 / 1;
--aspect-video: 16 / 9;
--aspect-photo: 4 / 3;
--aspect-portrait: 3 / 4;
--aspect-wide: 21 / 9;
/* Button Tokens */
--btn-primary-bg: var(--color-primary);
--btn-primary-bg-hover: var(--color-primary-800);
--btn-primary-bg-active: var(--color-primary-900);
--btn-primary-bg-disabled: var(--color-neutral-300);
--btn-primary-text: var(--color-neutral-0);
--btn-primary-text-disabled: var(--color-neutral-500);
--btn-focus-ring-width: 2px;
--btn-focus-ring-offset: 2px;
--btn-focus-ring-color: var(--color-primary-400);
}
/* Responsive Base Font */
html {
font-size: 16px;
font-size: clamp(14px, 2.5vw, 18px);
}
/* Responsive Typography */
@media (min-width: 640px) {
:root {
--heading-h1-size: var(--font-size-5xl);
}
}
@media (min-width: 1024px) {
:root {
--heading-h1-size: 4.5rem;
--heading-h2-size: var(--font-size-4xl);
}
}
/* ========================================
BASE RESET & TYPOGRAPHY
======================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-primary);
font-size: var(--text-body-size);
font-weight: var(--text-body-weight);
line-height: var(--text-body-line-height);
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* English language uses secondary font */
html[lang="en"] body {
font-family: var(--font-family-secondary);
}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6 {
font-family: var(--font-family-secondary);
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text-primary);
}
h1 {
font-size: var(--heading-h1-size);
font-weight: var(--heading-h1-weight);
line-height: var(--heading-h1-line-height);
letter-spacing: var(--heading-h1-letter-spacing);
}
h2 {
font-size: var(--heading-h2-size);
font-weight: var(--heading-h2-weight);
line-height: var(--heading-h2-line-height);
letter-spacing: var(--heading-h2-letter-spacing);
}
h3 {
font-size: var(--heading-h3-size);
font-weight: var(--heading-h3-weight);
line-height: var(--heading-h3-line-height);
letter-spacing: var(--heading-h3-letter-spacing);
}
h4 {
font-size: var(--heading-h4-size);
font-weight: var(--heading-h4-weight);
line-height: var(--heading-h4-line-height);
letter-spacing: var(--heading-h4-letter-spacing);
}
p {
margin-bottom: var(--space-4);
}
p:last-child {
margin-bottom: 0;
}
/* ========================================
UTILITY CLASSES
======================================== */
.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;
}
.text-lead {
font-size: var(--text-lead-size);
font-weight: var(--text-lead-weight);
line-height: var(--text-lead-line-height);
color: var(--color-text-secondary);
}
.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-none { display: none; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-inverse { background-color: var(--color-bg-inverse); }
.text-inverse { color: var(--color-text-inverse); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
/* ========================================
LAYOUT COMPONENTS
======================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
@media (min-width: 640px) {
.container {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
}
@media (min-width: 1024px) {
.container {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
}
.section {
padding-top: var(--section-padding-y-md);
padding-bottom: var(--section-padding-y-md);
}
@media (min-width: 1024px) {
.section {
padding-top: var(--section-padding-y-lg);
padding-bottom: var(--section-padding-y-lg);
}
}
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gap);
}
.col-12 { grid-column: span 12; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
@media (max-width: 767px) {
.col-md-4,
.col-md-6 {
grid-column: span 12;
}
}
@media (min-width: 768px) {
.col-md-4 { grid-column: span 4; }
.col-md-6 { grid-column: span 6; }
}
/* ========================================
HEADER COMPONENT
======================================== */
.header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border-muted);
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 var(--space-4);
}
@media (min-width: 1024px) {
.header__container {
height: 72px;
padding: 0;
}
}
.header__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
text-decoration: none;
}
.header__logo-icon {
width: 40px;
height: 40px;
background-color: var(--color-primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-0);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
.nav {
display: none;
align-items: center;
gap: var(--space-1);
}
@media (min-width: 1024px) {
.nav {
display: flex;
}
}
.nav__link {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
.nav__link:hover {
color: var(--color-text-primary);
background-color: var(--color-neutral-100);
}
.nav__link--active {
color: var(--color-primary);
background-color: var(--color-primary-50);
}
.header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-primary);
}
.mobile-menu-btn:hover {
background-color: var(--color-neutral-100);
}
@media (min-width: 1024px) {
.mobile-menu-btn {
display: none;
}
}
/* ========================================
LANGUAGE TOGGLE
======================================== */
.lang-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 36px;
padding: 0 var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-family: var(--font-family-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border: 2px solid var(--color-secondary-200);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--duration-fast) var(--easing-default);
}
.lang-toggle:hover {
background-color: var(--color-secondary-200);
border-color: var(--color-secondary-300);
}
.lang-toggle:focus-visible {
outline: 2px solid var(--color-secondary-400);
outline-offset: 2px;
}
/* ========================================
BUTTON COMPONENT
======================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-medium);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--easing-default);
}
html[lang="en"] .btn {
font-family: var(--font-family-secondary);
}
.btn--sm {
height: 32px;
padding: 0 var(--space-3);
font-size: var(--font-size-sm);
}
.btn--md {
height: 40px;
padding: 0 var(--space-4);
font-size: var(--font-size-base);
}
.btn--lg {
height: 48px;
padding: 0 var(--space-6);
font-size: var(--font-size-md);
}
.btn--primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
.btn--primary:hover {
background-color: var(--btn-primary-bg-hover);
}
.btn--primary:active {
background-color: var(--btn-primary-bg-active);
}
.btn--primary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--secondary:hover {
background-color: var(--color-primary-50);
}
.btn--secondary:active {
background-color: var(--color-primary-100);
}
.btn--secondary:focus-visible {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
.btn--ghost {
background-color: transparent;
color: var(--color-primary);
}
.btn--ghost:hover {
background-color: var(--color-primary-50);
}
.btn--inverse {
background-color: var(--color-neutral-0);
color: var(--color-neutral-900);
}
.btn--inverse:hover {
background-color: var(--color-neutral-100);
}
/* ========================================
CARD COMPONENT
======================================== */
.card {
background-color: var(--color-surface-1);
border: 1px solid var(--color-border-muted);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.card__header {
padding: var(--space-4) var(--space-4) 0;
}
.card__body {
padding: var(--space-4);
}
.card__footer {
padding: 0 var(--space-4) var(--space-4);
}
.card--elevated {
box-shadow: var(--shadow-md);
}
.card--interactive {
cursor: pointer;
transition: box-shadow var(--duration-fast) var(--easing-default),
transform var(--duration-fast) var(--easing-default);
}
.card--interactive:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.card--interactive:focus-within {
outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
outline-offset: var(--btn-focus-ring-offset);
}
/* ========================================
LINK COMPONENT
======================================== */
.link {
color: var(--color-text-link);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
transition: color var(--duration-fast) var(--easing-default);
}
.link:hover {
color: var(--color-text-link-hover);
}
.link:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ========================================
HERO SECTION (Youth Page Variant)
======================================== */
.hero-youth {
background: linear-gradient(135deg, var(--color-secondary-50) 0%, var(--color-primary-50) 100%);
text-align: center;
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
@media (min-width: 1024px) {
.hero-youth {
padding-top: var(--space-24);
padding-bottom: var(--space-24);
}
}
.hero-youth__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-3);
background-color: var(--color-secondary-100);
color: var(--color-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
}
.hero-youth__title {
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-6);
}
.hero-youth__subtitle {
max-width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-8);
}
.hero-youth__stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-6);
margin-top: var(--space-8);
}
.hero-stat {
text-align: center;
padding: var(--space-4);
background-color: var(--color-neutral-0);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
min-width: 140px;
}
.hero-stat__number {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
line-height: 1;
margin-bottom: var(--space-1);
}
.hero-stat__label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* ========================================
YOUTH TILES SECTION
======================================== */
.youth-tiles {
background-color: var(--color-bg-primary);
}
.youth-tiles__header {
text-align: center;
margin-bottom: var(--space-12);
}
.youth-tiles__title {
margin-bottom: var(--space-4);
}
.youth-tiles__subtitle {
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-secondary);
}
.youth-tiles__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 640px) {
.youth-tiles__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.youth-tiles__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ========================================
YOUTH TILE COMPONENT
======================================== */
.youth-tile {
height: 100%;
display: flex;
flex-direction: column;
transition: box-shadow var(--duration-fast) var(--easing-default),
transform var(--duration-fast) var(--easing-default);
}
.youth-tile:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.youth-tile__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.youth-tile__icon {
width: 48px;
height: 48px;
flex-shrink: 0;
background-color: var(--color-primary-100);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
}
.youth-tile__icon--secondary {
background-color: var(--color-secondary-100);
color: var(--color-secondary);
}
.youth-tile__icon--accent {
background-color: var(--color-accent-100);
color: var(--color-accent);
}
.youth-tile__icon--success {
background-color: var(--color-success-light);
color: var(--color-success);
}
.youth-tile__icon--error {
background-color: var(--color-error-light);
color: var(--color-error);
}
.youth-tile__stat {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-2);
background-color: var(--color-accent-100);
color: var(--color-accent);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-md);
white-space: nowrap;
}
.youth-tile__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
color: var(--color-text-primary);
}
.youth-tile__summary {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
margin-bottom: var(--space-3);
flex-grow: 1;
}
/* Details/Summary for expandable content */
.youth-tile__details {
border-top: 1px solid var(--color-border-muted);
margin-top: auto;
padding-top: var(--space-3);
}
.youth-tile__details summary {
display: flex;
align-items: center;
gap: var(--space-1);
color: var(--color-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
list-style: none;
transition: color var(--duration-fast) var(--easing-default);
}
.youth-tile__details summary::-webkit-details-marker {
display: none;
}
.youth-tile__details summary:hover {
color: var(--color-primary-800);
}
.youth-tile__details summary:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.youth-tile__details summary .icon {
transition: transform var(--duration-fast) var(--easing-default);
}
.youth-tile__details[open] summary .icon {
transform: rotate(90deg);
}
.youth-tile__expanded {
padding-top: var(--space-4);
animation: slideDown var(--duration-fast) var(--easing-out);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.youth-tile__desc {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
margin-bottom: var(--space-3);
}
.youth-tile__source {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
margin-bottom: var(--space-3);
}
.youth-tile__source cite {
font-style: normal;
}
.youth-tile__link {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
.youth-tile__link:hover {
color: var(--color-primary-800);
text-decoration: underline;
}
.youth-tile__link:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ========================================
CTA SECTION
======================================== */
.cta-section {
background-color: var(--color-secondary);
color: var(--color-text-inverse);
text-align: center;
}
.cta-section__title {
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.cta-section__desc {
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-8);
opacity: 0.9;
}
.cta-section__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 640px) {
.cta-section__actions {
flex-direction: row;
justify-content: center;
}
}
/* ========================================
FOOTER COMPONENT
======================================== */
.footer {
background-color: var(--color-neutral-900);
color: var(--color-text-inverse);
padding: var(--space-12) 0 var(--space-8);
}
.footer__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
.footer__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.footer__heading {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-inverse);
margin-bottom: var(--space-4);
}
.footer__link {
display: block;
padding: var(--space-1) 0;
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
.footer__link:hover {
color: var(--color-text-inverse);
}
.footer__bottom {
padding-top: var(--space-8);
border-top: 1px solid var(--color-neutral-800);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (min-width: 768px) {
.footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
.footer__copyright {
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
.footer__lite-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-inverse-secondary);
}
/* ========================================
CHECKBOX (for lite mode)
======================================== */
.checkbox {
width: 20px;
height: 20px;
appearance: none;
background-color: transparent;
border: 2px solid var(--color-neutral-500);
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.checkbox:checked {
background-color: var(--color-primary-400);
border-color: var(--color-primary-400);
}
.checkbox:checked::after {
content: '';
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
}
/* ========================================
LITE MODE STYLES
======================================== */
.lite-mode img:not(.essential),
.lite-mode video,
.lite-mode iframe {
display: none !important;
}
.lite-mode .hero-youth {
background-image: none !important;
background: var(--color-bg-secondary) !important;
}
.lite-mode * {
animation: none !important;
transition: none !important;
}
.lite-mode .youth-tile:hover {
transform: none;
}
.lite-mode .card--interactive:hover {
transform: none;
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ========================================
ICON SVG
======================================== */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
fill: currentColor;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }