/* Bundle created: 2025-08-15T23:09:39.134656 */
:root {
--color-bg: #ffffff;
--color-surface: #f8fafc;
--color-text: #0f172a;
--color-text-light: #64748b;
--color-text-muted: #94a3b8;
--color-primary: #1e40af;
--color-primary-hover: #1d4ed8;
--color-primary-light: rgba(30, 64, 175, 0.1);
--color-secondary: #64748b;
--color-secondary-hover: #475569;
--color-success: #059669;
--color-success-hover: #047857;
--color-success-light: rgba(5, 150, 105, 0.1);
--color-warning: #d97706;
--color-warning-hover: #b45309;
--color-warning-light: rgba(217, 119, 6, 0.1);
--color-danger: #dc2626;
--color-danger-hover: #b91c1c;
--color-danger-light: rgba(220, 38, 38, 0.1);
--color-border: #e2e8f0;
--color-border-light: #f1f5f9;
--color-shadow: rgba(0,0,0,0.1);
--color-shadow-lg: rgba(0,0,0,0.15);
--hero-background-color: #fbf7f0;
--color-hover-primary: rgba(30, 64, 175, 0.08);     /* Very subtle primary */
--color-hover-secondary: rgba(100, 116, 139, 0.08); /* Subtle gray */
--color-hover-surface: rgba(0, 0, 0, 0.04);        /* Light surface hover */
--color-hover-border: rgba(0, 0, 0, 0.08);         /* Border on hover */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
--radius-xs: 0.125rem;
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 1rem;
--radius-xl: 1.5rem;
--radius-2xl: 2rem;
--radius-full: 9999px;
--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', 'SF Mono', 'Cascadia Code', 'Roboto Mono', monospace;
--text-xs: 0.75rem;      /* 12px */
--text-sm: 0.875rem;     /* 14px */
--text-base: 1rem;       /* 16px */
--text-lg: 1.125rem;     /* 18px */
--text-xl: 1.25rem;      /* 20px */
--text-2xl: 1.5rem;      /* 24px */
--text-3xl: 1.875rem;    /* 30px */
--text-4xl: 2.25rem;     /* 36px */
--text-5xl: 3rem;        /* 48px */
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
--font-thin: 100;
--font-extralight: 200;
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
--font-black: 900;
--shadow-sm: 0 1px 2px 0 var(--color-shadow);
--shadow-md: 0 4px 6px -1px var(--color-shadow);
--shadow-lg: 0 10px 15px -3px var(--color-shadow);
--shadow-xl: 0 20px 25px -5px var(--color-shadow);
--z-dropdown: 1000;
--z-modal: 1050;
--z-tooltip: 1100;
}
[data-theme="dark"] {
--color-bg: #020617;
--color-surface: #0f172a;
--color-text: #f1f5f9;
--color-text-light: #94a3b8;
--color-text-muted: #64748b;
--color-primary: #f1f5f9;
--color-primary-hover: #e2e8f0;
--color-primary-light: rgba(241, 245, 249, 0.1);
--color-secondary: #94a3b8;
--color-secondary-hover: #cbd5e1;
--color-success: #10b981;
--color-success-hover: #059669;
--color-success-light: rgba(16, 185, 129, 0.1);
--color-warning: #f59e0b;
--color-warning-hover: #d97706;
--color-warning-light: rgba(245, 158, 11, 0.1);
--color-danger: #ef4444;
--color-danger-hover: #dc2626;
--color-danger-light: rgba(239, 68, 68, 0.1);
--color-border: #1e293b;
--color-border-light: #334155;
--color-shadow: rgba(0,0,0,0.3);
--color-shadow-lg: rgba(0,0,0,0.4);
--hero-background-color: #0f172a;
--color-hover-primary: rgba(241, 245, 249, 0.12);
--color-hover-secondary: rgba(148, 163, 184, 0.12);
--color-hover-surface: rgba(255, 255, 255, 0.06);
--color-hover-border: rgba(255, 255, 255, 0.12);
}
html { scroll-behavior: smooth; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body {
margin: 0; padding: 0;
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--text-sm);
line-height: var(--leading-normal);
font-weight: var(--font-normal);
letter-spacing: -0.025em;
transition: background-color 0.3s, color 0.3s;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-semibold);
line-height: var(--leading-tight);
margin: 0;
letter-spacing: -0.025em;
}
h1 { font-size: var(--text-4xl); font-weight: var(--font-extrabold); }
h2 { font-size: var(--text-3xl); font-weight: var(--font-bold); }
h3 { font-size: var(--text-2xl); font-weight: var(--font-semibold); }
h4 { font-size: var(--text-xl); font-weight: var(--font-semibold); }
h5 { font-size: var(--text-lg); font-weight: var(--font-medium); }
h6 { font-size: var(--text-base); font-weight: var(--font-medium); }
input, select, textarea, button {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--font-normal);
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
transition: border-color 0.2s, box-shadow 0.2s;
letter-spacing: -0.025em;
}
input:focus, select:focus, textarea:focus, button:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-color: var(--color-primary);
}
input[type="radio"], input[type="checkbox"] {
width: 1.25em; height: 1.25em; border-radius: 50%;
padding: 0; border: 1px solid var(--color-border);
accent-color: var(--color-primary);
}
input[type="radio"]:focus { outline: none; box-shadow: none; }
button {
border: none;
background: none;
padding: 0;
margin: 0;
cursor: pointer;
font-family: inherit; /* Use the body's font */
text-align: center;
text-decoration: none;
}
.nav {
background: var(--color-bg);
box-shadow: 0 1px 3px var(--color-shadow);
padding: 1rem 4rem;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
}
.nav-left {
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--color-primary);
text-decoration: none;
letter-spacing: -0.025em;
}
.nav-right {
display: flex;
gap: 1.5rem;
align-items: center;
}
.nav-link {
color: var(--color-text);
text-decoration: none;
padding: 0.5rem 0.75rem;
font-size: var(--text-sm);
font-weight: var(--font-medium);
position: relative;
transition: color 0.3s;
letter-spacing: -0.025em;
}
.nav-link:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.nav-link:hover {
color: var(--color-primary);
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background-color: var(--color-primary);
left: 1rem;
bottom: 4px;
transition: all 0.3s;
}
.nav-link:hover::after {
width: calc(100% - 2rem);
}
.theme-toggle {
color: var(--color-text);
text-decoration: none;
padding: 0.5rem 0.75rem;
font-size: var(--text-sm);
position: relative;
transition: color 0.3s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.theme-toggle:hover {
color: var(--color-primary);
}
.theme-toggle:focus,
.theme-toggle:focus-visible {
outline: none;
}
.hamburger {
display: none;
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
color: var(--color-text);
margin-left: 1rem;
position: relative;
z-index: 101;
transition: color 0.3s;
padding: 0.5rem;
border-radius: 0.25rem;
}
.hamburger:focus,
.hamburger:focus-visible,
.hamburger:active,
.hamburger:focus-within {
outline: none !important;
box-shadow: none !important;
border: none !important;
}
.hamburger:hover {
background-color: var(--color-border);
border-radius: 50%; /* Make hover background circular */
}
.hamburger:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: 50%; /* Make focus outline circular */
}
.hamburger-icon {
display: block;
width: 32px;
height: 32px;
position: relative;
}
.hamburger-bar {
position: absolute;
left: 0;
width: 32px;
height: 4px;
background: currentColor;
border-radius: 2px;
transition: all 0.3s;
}
.hamburger-bar1 { top: 6px; }
.hamburger-bar2 { top: 14px; }
.hamburger-bar3 { top: 22px; }
.hamburger.open .hamburger-bar1 {
top: 14px;
transform: rotate(45deg);
}
.hamburger.open .hamburger-bar2 {
opacity: 0;
}
.hamburger.open .hamburger-bar3 {
top: 14px;
transform: rotate(-45deg);
}
@media (max-width: 900px) {
.nav-right {
display: flex;
flex-direction: column;
gap: 1.5rem;
background: var(--color-bg);
position: absolute;
top: 64px;
right: 1rem;
width: 280px;
box-shadow: 0 4px 12px var(--color-shadow);
padding: 1.5rem;
z-index: 100;
border-radius: 0.5rem;
border: 1px solid var(--color-border);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
align-items: flex-end;
}
.nav-right.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-link {
padding: 0.75rem 1rem;
border-radius: 0.25rem;
transition: all 0.3s;
}
.nav-link:hover {
background-color: var(--color-border);
}
.nav-link::after {
display: none;
}
.theme-toggle {
padding: 0.75rem 1rem;
border-radius: 0.25rem;
align-self: flex-end;
}
.theme-toggle:hover {
background-color: var(--color-border);
}
.hamburger {
display: block;
}
.nav {
position: relative;
padding: 1rem 1.5rem;
}
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.grid { display: grid; gap: 2rem; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
font-weight: var(--font-semibold);
border-radius: var(--radius-md);
border: none;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
line-height: 1;
}
.btn-primary {
background: var(--color-primary);
color: white;
}
.btn-primary:hover:not(.btn-disabled) {
background: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-secondary {
background: var(--color-secondary);
color: white;
}
.btn-secondary:hover:not(.btn-disabled) {
background: var(--color-secondary-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-success {
background: var(--color-success);
color: white;
}
.btn-success:hover:not(.btn-disabled) {
background: var(--color-success-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-warning {
background: var(--color-warning);
color: white;
}
.btn-warning:hover:not(.btn-disabled) {
background: var(--color-warning-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-danger {
background: var(--color-danger);
color: white;
}
.btn-danger:hover:not(.btn-disabled) {
background: var(--color-danger-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-outline {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
}
.btn-outline:hover:not(.btn-disabled) {
background: var(--color-primary);
color: white;
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-outline-secondary {
background: transparent;
color: var(--color-secondary);
border: 1px solid var(--color-secondary);
}
.btn-outline-secondary:hover:not(.btn-disabled) {
background: var(--color-secondary);
color: white;
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-outline-success {
background: transparent;
color: var(--color-success);
border: 1px solid var(--color-success);
}
.btn-outline-success:hover:not(.btn-disabled) {
background: var(--color-success);
color: white;
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-outline-danger {
background: transparent;
color: var(--color-danger);
border: 1px solid var(--color-danger);
}
.btn-outline-danger:hover:not(.btn-disabled) {
background: var(--color-danger);
color: white;
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-ghost {
background: transparent;
color: var(--color-text);
border: 1px solid transparent;
}
.btn-ghost:hover:not(.btn-disabled) {
background: var(--color-border-light);
transform: translateY(-1px);
}
.btn-ghost-primary {
background: transparent;
color: var(--color-primary);
border: 1px solid transparent;
}
.btn-ghost-primary:hover:not(.btn-disabled) {
background: var(--color-primary-light);
transform: translateY(-1px);
}
.btn-light-primary {
background: var(--color-primary-light);
color: var(--color-primary);
border: 1px solid transparent;
}
.btn-light-primary:hover:not(.btn-disabled) {
background: var(--color-primary);
color: white;
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-light-success {
background: var(--color-success-light);
color: var(--color-success);
border: 1px solid transparent;
}
.btn-light-success:hover:not(.btn-disabled) {
background: var(--color-success);
color: white;
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-light-warning {
background: var(--color-warning-light);
color: var(--color-warning);
border: 1px solid transparent;
}
.btn-light-warning:hover:not(.btn-disabled) {
background: var(--color-warning);
color: white;
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-light-danger {
background: var(--color-danger-light);
color: var(--color-danger);
border: 1px solid transparent;
}
.btn-light-danger:hover:not(.btn-disabled) {
background: var(--color-danger);
color: white;
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-xs {
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-xs);
}
.btn-sm {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
}
.btn-md {
padding: var(--space-md) var(--space-lg);
font-size: var(--text-base);
}
.btn-lg {
padding: var(--space-lg) var(--space-xl);
font-size: var(--text-lg);
}
.btn-xl {
padding: var(--space-xl) var(--space-2xl);
font-size: var(--text-xl);
}
.btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.btn:active:not(.btn-disabled) {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
.btn-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
transform: none !important;
box-shadow: none !important;
}
.btn-loading {
position: relative;
pointer-events: none;
}
.btn-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1rem;
height: 1rem;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: btn-spin 1s linear infinite;
}
@keyframes btn-spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.btn-icon {
padding: var(--space-sm);
aspect-ratio: 1;
border-radius: var(--radius-full);
}
.btn-icon.btn-sm {
padding: var(--space-xs);
}
.btn-icon.btn-lg {
padding: var(--space-md);
}
@media (max-width: 768px) {
.btn-xl {
padding: var(--space-lg) var(--space-xl);
font-size: var(--text-lg);
}
.btn-lg {
padding: var(--space-md) var(--space-lg);
font-size: var(--text-base);
}
}
.card {
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: var(--space-lg);
border: 1px solid var(--color-border);
transition: transform 0.3s, box-shadow 0.3s;
}
.card-elevated {
box-shadow: var(--shadow-lg);
}
.card-outlined {
border: 2px solid var(--color-border);
box-shadow: none;
}
.card-interactive:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.card-centered {
text-align: center;
}
.card-sm {
padding: var(--space-md);
border-radius: var(--radius-md);
}
.card-lg {
padding: var(--space-xl);
border-radius: var(--radius-xl);
}
.card-xl {
padding: var(--space-2xl);
border-radius: var(--radius-2xl);
}
.card-header {
margin-bottom: var(--space-lg);
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--color-border);
}
.card-title {
font-size: var(--text-xl);
font-weight: var(--font-semibold);
color: var(--color-primary);
margin-bottom: var(--space-sm);
}
.card-subtitle {
font-size: var(--text-lg);
font-weight: var(--font-medium);
color: var(--color-text);
margin-bottom: var(--space-sm);
}
.card-description {
color: var(--color-text-light);
line-height: var(--leading-relaxed);
margin: 0;
}
.card-primary {
border-color: var(--color-primary);
background: var(--color-primary-light);
}
.card-success {
border-color: var(--color-success);
background: var(--color-success-light);
}
@media (max-width: 768px) {
.card {
padding: var(--space-md);
}
.card-lg {
padding: var(--space-lg);
}
.card-xl {
padding: var(--space-xl);
}
}
.field {
margin-bottom: 1rem;
}
.field label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--color-text);
}
.input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--color-border);
border-radius: 0.5rem;
background: var(--color-bg);
color: var(--color-text);
font-size: 1rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.input-sm {
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
.input-lg {
padding: 1rem 1.25rem;
font-size: 1.125rem;
}
.input-error {
border-color: #dc2626;
}
.input-error:focus {
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.input-error-message {
color: #dc2626;
font-size: 0.875rem;
margin-top: 0.25rem;
}
.input-helper {
color: var(--color-text-light);
font-size: 0.875rem;
margin-top: 0.25rem;
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-xs);
font-weight: var(--font-medium);
border-radius: var(--radius-full);
white-space: nowrap;
line-height: 1;
}
.badge-primary {
background: var(--color-primary);
color: white;
}
.badge-secondary {
background: var(--color-secondary);
color: white;
}
.badge-success {
background: var(--color-success);
color: white;
}
.badge-warning {
background: var(--color-warning);
color: white;
}
.badge-danger {
background: var(--color-danger);
color: white;
}
.badge-light-primary {
background: var(--color-primary-light);
color: var(--color-primary);
}
.badge-light-success {
background: var(--color-success-light);
color: var(--color-success);
}
.badge-light-warning {
background: var(--color-warning-light);
color: var(--color-warning);
}
.badge-light-danger {
background: var(--color-danger-light);
color: var(--color-danger);
}
.badge-outline {
background: transparent;
color: var(--color-text);
border: 1px solid var(--color-border);
}
.badge-outline-primary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
}
.badge-outline-success {
background: transparent;
color: var(--color-success);
border: 1px solid var(--color-success);
}
.badge-outline-warning {
background: transparent;
color: var(--color-warning);
border: 1px solid var(--color-warning);
}
.badge-outline-danger {
background: transparent;
color: var(--color-danger);
border: 1px solid var(--color-danger);
}
.badge-sm {
padding: 0.125rem var(--space-xs);
font-size: 0.625rem;
}
.badge-lg {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
}
.badge-dot {
padding: var(--space-xs);
border-radius: var(--radius-full);
aspect-ratio: 1;
}
.badge-dot::before {
content: '';
width: 0.5rem;
height: 0.5rem;
border-radius: var(--radius-full);
background: currentColor;
}
.alert {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-lg);
border-radius: var(--radius-lg);
border: 1px solid transparent;
font-size: var(--text-base);
line-height: var(--leading-relaxed);
}
.alert-icon {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.125rem;
}
.alert-content {
flex: 1;
}
.alert-title {
font-weight: var(--font-semibold);
margin-bottom: var(--space-xs);
color: inherit;
}
.alert-description {
margin: 0;
opacity: 0.9;
}
.alert-primary {
background: var(--color-primary-light);
color: var(--color-primary);
border-color: var(--color-primary);
}
.alert-success {
background: var(--color-success-light);
color: var(--color-success);
border-color: var(--color-success);
}
.alert-warning {
background: var(--color-warning-light);
color: var(--color-warning);
border-color: var(--color-warning);
}
.alert-danger {
background: var(--color-danger-light);
color: var(--color-danger);
border-color: var(--color-danger);
}
.alert-info {
background: var(--color-primary-light);
color: var(--color-primary);
border-color: var(--color-primary);
}
.alert-primary-filled {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
.alert-success-filled {
background: var(--color-success);
color: white;
border-color: var(--color-success);
}
.alert-warning-filled {
background: var(--color-warning);
color: white;
border-color: var(--color-warning);
}
.alert-danger-filled {
background: var(--color-danger);
color: white;
border-color: var(--color-danger);
}
.alert-dismissible {
position: relative;
padding-right: 3rem;
}
.alert-dismiss {
position: absolute;
top: var(--space-md);
right: var(--space-md);
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: var(--space-xs);
border-radius: var(--radius-sm);
opacity: 0.7;
transition: opacity 0.2s;
}
.alert-dismiss:hover {
opacity: 1;
}
.alert-dismiss:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.alert-sm {
padding: var(--space-md);
font-size: var(--text-sm);
}
.alert-lg {
padding: var(--space-xl);
font-size: var(--text-lg);
}
.alert-border-left {
border-left-width: 4px;
border-radius: var(--radius-md);
}
.alert-border-top {
border-top-width: 4px;
border-radius: var(--radius-md);
}
@media (max-width: 768px) {
.alert {
padding: var(--space-md);
gap: var(--space-sm);
}
.alert-lg {
padding: var(--space-lg);
font-size: var(--text-base);
}
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip-content {
position: absolute;
z-index: var(--z-tooltip);
padding: var(--space-sm) var(--space-md);
background: var(--color-text);
color: var(--color-bg);
font-size: var(--text-sm);
line-height: var(--leading-normal);
border-radius: var(--radius-md);
white-space: nowrap;
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
pointer-events: none;
}
.tooltip:hover .tooltip-content,
.tooltip:focus-within .tooltip-content {
opacity: 1;
visibility: visible;
}
.tooltip-top .tooltip-content {
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
margin-bottom: var(--space-sm);
}
.tooltip-top:hover .tooltip-content,
.tooltip-top:focus-within .tooltip-content {
transform: translateX(-50%) translateY(0);
}
.tooltip-bottom .tooltip-content {
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
margin-top: var(--space-sm);
}
.tooltip-bottom:hover .tooltip-content,
.tooltip-bottom:focus-within .tooltip-content {
transform: translateX(-50%) translateY(0);
}
.tooltip-left .tooltip-content {
right: 100%;
top: 50%;
transform: translateY(-50%) translateX(-8px);
margin-right: var(--space-sm);
}
.tooltip-left:hover .tooltip-content,
.tooltip-left:focus-within .tooltip-content {
transform: translateY(-50%) translateX(0);
}
.tooltip-right .tooltip-content {
left: 100%;
top: 50%;
transform: translateY(-50%) translateX(8px);
margin-left: var(--space-sm);
}
.tooltip-right:hover .tooltip-content,
.tooltip-right:focus-within .tooltip-content {
transform: translateY(-50%) translateX(0);
}
.tooltip-content::after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
}
.tooltip-top .tooltip-content::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-top-color: var(--color-text);
}
.tooltip-bottom .tooltip-content::after {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-bottom-color: var(--color-text);
}
.tooltip-left .tooltip-content::after {
left: 100%;
top: 50%;
transform: translateY(-50%);
border-left-color: var(--color-text);
}
.tooltip-right .tooltip-content::after {
right: 100%;
top: 50%;
transform: translateY(-50%);
border-right-color: var(--color-text);
}
.tooltip-light .tooltip-content {
background: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--color-border);
}
.tooltip-light .tooltip-content::after {
border-top-color: var(--color-bg);
}
.tooltip-primary .tooltip-content {
background: var(--color-primary);
color: white;
}
.tooltip-primary .tooltip-content::after {
border-top-color: var(--color-primary);
}
.tooltip-sm .tooltip-content {
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-xs);
}
.tooltip-lg .tooltip-content {
padding: var(--space-md) var(--space-lg);
font-size: var(--text-base);
white-space: normal;
max-width: 200px;
}
.tooltip-nowrap .tooltip-content {
white-space: nowrap;
}
.lesson-container {
font-family: var(--font-sans) !important;
font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 2rem;
line-height: var(--leading-relaxed);
font-size: var(--text-base);
color: var(--color-text);
font-weight: var(--font-normal);
letter-spacing: -0.025em;
text-rendering: optimizeLegibility;
}
.lesson-container h1,
.lesson-container h2,
.lesson-container h3,
.lesson-container h4,
.lesson-container h5,
.lesson-container h6 {
font-family: var(--font-sans) !important;
font-weight: var(--font-semibold);
letter-spacing: -0.025em;
}
.lesson-container h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
text-align: center;
}
.lesson-container h2 {
font-size: 1.875rem;
margin: 2rem 0 1rem 0;
color: var(--color-text);
}
.lesson-container h3 {
font-size: 1.5rem;
margin: 1.5rem 0 1rem 0;
color: var(--color-text);
}
.lesson-container p {
font-family: var(--font-sans) !important;
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 1.25rem;
color: var(--color-text);
}
.lesson-container strong {
font-weight: 600;
}
.lesson-container em {
font-style: italic;
}
.lesson-container .lesson-vocab-card,
.lesson-container .lesson-alert,
.lesson-container .lesson-mcq,
.lesson-container .lesson-flash-card {
font-family: var(--font-sans);
}
.lesson-container > * + * {
margin-top: 1.5rem;
}
.lesson-container .lesson-vocab-card * {
font-family: inherit;
}
.lesson-container .lesson-alert * {
font-family: inherit;
}
.lesson-container .lesson-mcq * {
font-family: inherit;
}
.lesson-container .lesson-flash-card * {
font-family: inherit;
}
.lesson-container *,
.lesson-container *::before,
.lesson-container *::after {
font-family: var(--font-sans) !important;
}
.accordion-section {
background-color: var(--color-surface);
padding: 4rem 0;
}
.accordion-content {
max-width: 800px;
margin: 0 auto;
padding: 0 2rem;
}
.accordion-title {
font-size: 2.5rem;
color: var(--color-text);
text-align: center;
margin-bottom: 3rem;
font-weight: 700;
}
.accordion-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.accordion-item {
border: 1px solid var(--color-border);
border-radius: 1rem;
background: var(--color-bg);
overflow: hidden;
transition: all 0.3s;
box-shadow: 0 2px 8px var(--color-shadow);
}
.accordion-trigger {
width: 100%;
padding: 1.5rem;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
transition: all 0.3s;
border-radius: 1rem;
outline: none !important;
}
.accordion-question-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion-question-text {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text);
margin: 0;
}
.accordion-icon {
font-size: 1.5rem;
color: var(--color-primary);
transition: transform 0.3s ease;
font-weight: 300;
line-height: 1;
}
.accordion-item-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion-item[data-state="open"] .accordion-item-content {
max-height: 200px;
}
.accordion-answer-text {
padding: 0 1.5rem 1.5rem 1.5rem;
color: var(--color-text-light);
line-height: 1.6;
margin: 0;
}
.accordion-item[data-state="open"] {
box-shadow: 0 4px 16px var(--color-shadow);
}
@media (max-width: 768px) {
.accordion-title {
font-size: 2rem;
}
.accordion-section {
padding: 3rem 1rem;
}
.accordion-content {
padding: 0 1rem;
}
}
.home-page {
min-height: 100vh;
background-color: var(--color-bg);
overflow-x: hidden; /* Add this to prevent horizontal scroll */
}
.home-hero-section {
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 100%);
padding: 4rem 2rem;
border-bottom: 1px solid var(--color-border);
overflow-x: hidden; /* Add this */
}
.home-hero-container {
max-width: 1000px;
margin: 2rem auto 0;
display: flex;
align-items: center;
gap: 3rem;
min-height: 60vh;
width: 100%; /* Add this */
box-sizing: border-box; /* Add this */
}
.home-hero-content {
flex: 1;
}
.home-hero-subtitle {
font-size: 1.25rem;
color: var(--color-text-light);
line-height: 1.6;
margin-bottom: 2rem;
}
.home-hero-image-container {
flex-shrink: 0;
}
.home-hero-image {
width: 350px;  /* Increased from 280px */
height: 350px; /* Increased from 280px */
border-radius: 1.5rem; /* Changed from 50% (circle) to rounded corners */
object-fit: cover;
box-shadow: 0 8px 32px var(--color-shadow);
}
.video-section {
background-color: var(--color-bg);
padding: 4rem 0;
}
.video-section-content {
max-width: 1000px;
margin: 0 auto;
padding: 0 2rem;
text-align: center;
}
.video-section-title {
font-size: 2.5rem;
color: var(--color-text);
margin-bottom: 1rem;
font-weight: 700;
}
.video-section-subtitle {
font-size: 1.125rem;
color: var(--color-text-light);
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-video {
width: 100%;
max-width: 800px;
height: auto;
border-radius: 1rem;
box-shadow: 0 8px 32px var(--color-shadow);
}
.quiz-section {
background-color: var(--color-bg);
padding: 4rem 0;
}
.quiz-section-content {
max-width: 1000px;
margin: 0 auto;
padding: 0 2rem;
text-align: center;
}
.quiz-card {
background: var(--color-bg);
border-radius: 1.5rem;
padding: 3rem 2rem;
max-width: 600px;
margin: 0 auto;
border: 1px solid var(--color-border);
}
.quiz-title {
font-size: 1.75rem;
margin-bottom: 1rem;
color: var(--color-primary);
font-weight: 600;
}
.quiz-desc {
color: var(--color-text-light);
margin-bottom: 2rem;
font-size: 1.125rem;
line-height: 1.6;
}
.quiz-button {
font-size: 1.125rem;
padding: 1rem 2rem;
border-radius: 0.75rem;
transition: all 0.3s;
border: none;
cursor: pointer;
}
.quiz-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px var(--color-shadow);
}
.modern-teach-sections {
overflow-x: hidden;
}
.section-general {
background: var(--color-bg);
}
.section-test {
background: #f9f8f7;
}
[data-theme="dark"] .section-test {
background: #2a2a2a;
}
.section-business {
background: var(--color-bg);
}
.teach-section-full {
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 6rem 2rem;
}
.teach-content-wrapper {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
z-index: 2;
position: relative;
}
.section-reverse {
direction: rtl;
}
.section-reverse > * {
direction: ltr;
}
.modern-section-title {
font-size: 3.5rem;
color: var(--color-text);
margin-bottom: 2rem;
font-weight: 700;
}
.modern-bullet-list {
list-style: none;
padding: 0;
margin: 0;
}
.modern-bullet-list li {
position: relative;
padding-left: 2rem;
margin-bottom: 1.5rem;
font-size: 1.25rem;
color: var(--color-text);
line-height: 1.6;
}
.modern-bullet-list li::before {
content: "✦";
color: var(--color-primary);
font-weight: bold;
position: absolute;
left: 0;
font-size: 1.5rem;
}
.learn-more-btn {
margin-top: 2rem;
}
.modern-image-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.modern-section-image {
width: 100%;
max-width: 600px;
height: auto;
z-index: 2;
position: relative;
border-radius: 1.5rem;
}
.section-divider {
width: 100%;
height: 150px;
display: block;
margin: 0;
padding: 0;
margin-top: 2rem; /* Space from content above */
}
@media (max-width: 768px) {
.teach-content-wrapper {
grid-template-columns: 1fr;
gap: 3rem;
text-align: center;
}
.modern-image-container {
order: 1;
}
.modern-text-content {
order: 2;
}
.section-reverse {
direction: ltr;
}
.modern-section-title {
font-size: 2.5rem;
}
.modern-bullet-list li {
font-size: 1.1rem;
}
.modern-section-image {
max-width: 350px;
}
.teach-section-full {
padding: 4rem 1rem;
}
.section-divider {
height: 100px;
margin-top: 1rem; /* Reduced spacing on mobile */
}
}
.faq-section {
background-color: var(--color-surface);
padding: 4rem 0;
}
.faq-section-content {
max-width: 800px;
margin: 0 auto;
padding: 0 2rem;
}
.faq-section-title {
font-size: 2.5rem;
color: var(--color-text);
text-align: center;
margin-bottom: 3rem;
font-weight: 700;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.faq-item {
border: 1px solid var(--color-border);
border-radius: 1rem;
background: var(--color-bg);
overflow: hidden;
transition: all 0.3s;
box-shadow: 0 2px 8px var(--color-shadow);
}
.faq-trigger {
width: 100%;
padding: 1.5rem;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
transition: all 0.3s;
border-radius: 1rem;
outline: none !important;
}
.faq-question-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-question-text {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text);
margin: 0;
}
.faq-icon {
font-size: 1.5rem;
color: var(--color-primary);
transition: transform 0.3s ease;
font-weight: 300;
line-height: 1;
}
.faq-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-item[data-state="open"] .faq-content {
max-height: 200px;
}
.faq-answer-text {
padding: 0 1.5rem 1.5rem 1.5rem;
color: var(--color-text-light);
line-height: 1.6;
margin: 0;
}
.faq-item[data-state="open"] {
box-shadow: 0 4px 16px var(--color-shadow);
}
@media (max-width: 768px) {
.home-hero-container {
flex-direction: column-reverse;
text-align: center;
gap: 2rem;
margin: 1rem auto 0; /* Reduce top margin on mobile */
min-height: auto; /* Remove fixed height on mobile */
padding: 0 1rem; /* Add horizontal padding */
}
.home-hero-title {
font-size: 2.5rem;
}
.home-hero-image {
width: 280px; /* Increased from 220px */
height: 280px; /* Increased from 220px */
}
.video-section-title,
.teach-section-title,
.faq-section-title {
font-size: 2rem;
}
.home-hero-section,
.video-section,
.quiz-section,
.teach-section,
.faq-section {
padding: 3rem 1rem; /* Reduce horizontal padding */
}
.video-section-content,
.quiz-section-content,
.teach-section-content,
.faq-section-content {
padding: 0 1rem;
width: 100%;
box-sizing: border-box;
}
.teach-cards-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (min-width: 768px) {
.teach-cards-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 480px) {
.home-hero-section {
padding: 2rem 1rem; /* Further reduce padding */
}
.home-hero-container {
gap: 1.5rem;
min-height: auto;
padding: 0; /* Remove padding, rely on section padding */
}
.video-section-content,
.quiz-section-content,
.teach-section-content,
.faq-section-content {
padding: 0 0.5rem; /* Very minimal padding on small screens */
}
.home-hero-title {
font-size: 2rem;
line-height: 1.2; /* Tighter line height for mobile */
}
.home-hero-subtitle {
font-size: 1.125rem;
}
.teach-card {
padding: 1.5rem;
margin: 0 0.5rem; /* Add small margin to prevent edge touching */
}
.quiz-card {
padding: 2rem 1.5rem;
margin: 0 0.5rem; /* Add small margin */
}
.home-hero-image {
width: 250px; /* Increased from 200px */
height: 250px; /* Increased from 200px */
max-width: 100%;
}
.hero-video {
width: 100%;
max-width: 100%;
height: auto;
margin: 0 auto;
}
}
.cta-section {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
height: 400px; /* Adjusted height for better visibility */
}
.cta-section-content {
max-width: 600px;
width: 100%;
}
.cta-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-top: 2rem;
}
.booking-btn {
font-size: 1.125rem;
padding: 1rem 2rem;
border-radius: 0.75rem;
transition: all 0.3s;
border: 2px solid white;
cursor: pointer;
text-decoration: none;
}
.booking-btn.btn-primary {
background-color: white;
color: var(--color-primary);
border-color: white;
}
.booking-btn.btn-outline {
background-color: transparent;
color: white;
border-color: white;
}
.booking-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.booking-btn.btn-primary:hover {
background-color: var(--color-surface);
}
.booking-btn.btn-outline:hover {
background-color: white;
color: var(--color-primary);
}
@media (max-width: 768px) {
.booking-section {
min-height: 300px;
padding: 1.5rem;
}
.booking-buttons {
flex-direction: column;
gap: 1rem;
}
.booking-btn {
width: 100%;
max-width: 280px;
}
}
.resources-page {
min-height: 100vh;
background-color: var(--color-bg);
}
.resources-hero-section {
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 100%);
padding: 4rem 2rem;
border-bottom: 1px solid var(--color-border);
}
.resources-hero-container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.resources-hero-content {
max-width: 800px;
margin: 0 auto;
}
.resources-hero-title {
font-size: 2.5rem;
color: var(--color-text);
margin-bottom: var(--space-lg);
font-weight: 600;
line-height: 1.2;
}
.resources-hero-subtitle {
font-size: 1.125rem;
color: var(--color-text-light);
line-height: 1.6;
margin: 0;
}
.resources-section {
padding: 4rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.resource-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
justify-content: center;
}
.resource-card {
background: var(--color-bg);
border-radius: 1rem;
padding: 1.5rem;
box-shadow: 0 1px 3px var(--color-shadow);
transition: transform 0.3s, box-shadow 0.3s;
text-align: left;
}
.resource-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 6px var(--color-shadow);
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.resource-title {
color: var(--color-text);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.resource-excerpt {
color: var(--color-text-light);
line-height: 1.6;
margin-bottom: 1rem;
}
@media (max-width: 768px) {
.resources-hero-title {
font-size: 2rem;
}
.resources-hero-subtitle {
font-size: 1.125rem;
}
.resources-hero-section {
padding: 3rem 1rem;
}
.resources-section {
padding: 3rem 1rem;
}
}
@media (max-width: 900px) {
.resource-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 480px) {
.resources-hero-title {
font-size: 2rem;
}
.resources-hero-subtitle {
font-size: 1rem;
}
.resources-hero-section {
padding: 2rem 1rem;
}
.resources-section {
padding: 2rem 1rem;
}
}
.general-english-hero {
padding: var(--space-3xl) 0;
text-align: center;
}
.general-english-hero-content {
max-width: 700px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.general-english-hero h1 {
font-size: 2.5rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: var(--space-lg);
line-height: 1.2;
}
.general-english-hero p {
font-size: 1.125rem;
color: var(--color-text-light);
line-height: 1.6;
}
article {
max-width: 800px;
margin: 0 auto;
padding: var(--space-2xl) var(--space-lg);
}
article section {
margin-bottom: var(--space-2xl);
}
article section > div {
padding: var(--space-lg) 0;
border-bottom: 1px solid var(--color-border-light);
}
article section > div:last-child {
border-bottom: none;
}
article h2 {
font-size: 1.875rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: var(--space-xl);
text-align: center;
}
article h3 {
font-size: 1.5rem;
font-weight: 500;
color: var(--color-text);
margin-bottom: var(--space-md);
text-align: left;
}
article p {
font-size: 1rem;
color: var(--color-text-light);
line-height: 1.7;
margin-bottom: var(--space-md);
}
article p:last-child {
margin-bottom: 0;
}
article section:last-child {
text-align: center;
padding: var(--space-2xl) 0;
border-top: 1px solid var(--color-border);
margin-top: var(--space-2xl);
}
article section:last-child h2 {
margin-bottom: var(--space-lg);
}
article section:last-child p {
margin-bottom: var(--space-lg);
}
article section:last-child div {
display: flex;
gap: var(--space-md);
justify-content: center;
margin: var(--space-lg) 0;
flex-wrap: wrap;
}
article section:last-child a {
display: inline-block;
color: var(--color-primary);
padding: var(--space-sm) var(--space-lg);
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm);
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
}
article section:last-child a:hover {
background: var(--color-primary);
color: white;
}
@media (max-width: 768px) {
.general-english-hero h1 {
font-size: 2rem;
}
article {
padding: var(--space-xl) var(--space-md);
}
article h2 {
font-size: 1.5rem;
}
article h3 {
font-size: 1.25rem;
}
article section:last-child div {
flex-direction: column;
align-items: center;
}
article section:last-child a {
width: 200px;
text-align: center;
}
}
.university-prep-hero {
padding: var(--space-3xl) 0;
text-align: center;
}
.university-prep-hero-content {
max-width: 700px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.university-prep-hero h1 {
font-size: 2.5rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: var(--space-lg);
line-height: 1.2;
}
.university-prep-hero p {
font-size: 1.125rem;
color: var(--color-text-light);
line-height: 1.6;
}
article {
max-width: 800px;
margin: 0 auto;
padding: var(--space-2xl) var(--space-lg);
}
article section {
margin-bottom: var(--space-2xl);
}
article section > div {
padding: var(--space-lg) 0;
border-bottom: 1px solid var(--color-border-light);
}
article section > div:last-child {
border-bottom: none;
}
article h2 {
font-size: 1.875rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: var(--space-xl);
text-align: center;
}
article h3 {
font-size: 1.5rem;
font-weight: 500;
color: var(--color-text);
margin-bottom: var(--space-md);
text-align: left;
}
article p {
font-size: 1rem;
color: var(--color-text-light);
line-height: 1.7;
margin-bottom: var(--space-md);
}
article p:last-child {
margin-bottom: 0;
}
article section:last-child {
text-align: center;
padding: var(--space-2xl) 0;
border-top: 1px solid var(--color-border);
margin-top: var(--space-2xl);
}
article section:last-child h2 {
margin-bottom: var(--space-lg);
}
article section:last-child p {
margin-bottom: var(--space-lg);
}
article section:last-child div {
display: flex;
gap: var(--space-md);
justify-content: center;
margin: var(--space-lg) 0;
flex-wrap: wrap;
}
article section:last-child a {
display: inline-block;
color: var(--color-primary);
padding: var(--space-sm) var(--space-lg);
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm);
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
}
article section:last-child a:hover {
background: var(--color-primary);
color: white;
}
@media (max-width: 768px) {
.university-prep-hero h1 {
font-size: 2rem;
}
article {
padding: var(--space-xl) var(--space-md);
}
article h2 {
font-size: 1.5rem;
}
article h3 {
font-size: 1.25rem;
}
article section:last-child div {
flex-direction: column;
align-items: center;
}
article section:last-child a {
width: 200px;
text-align: center;
}
}
.business-english-hero {
padding: var(--space-3xl) 0;
text-align: center;
}
.business-english-hero-content {
max-width: 700px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.business-english-hero h1 {
font-size: 2.5rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: var(--space-lg);
line-height: 1.2;
}
.business-english-hero p {
font-size: 1.125rem;
color: var(--color-text-light);
line-height: 1.6;
}
article {
max-width: 800px;
margin: 0 auto;
padding: var(--space-2xl) var(--space-lg);
}
article section {
margin-bottom: var(--space-2xl);
}
article section > div {
padding: var(--space-lg) 0;
border-bottom: 1px solid var(--color-border-light);
}
article section > div:last-child {
border-bottom: none;
}
article h2 {
font-size: 1.875rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: var(--space-xl);
text-align: center;
}
article h3 {
font-size: 1.5rem;
font-weight: 500;
color: var(--color-text);
margin-bottom: var(--space-md);
text-align: left;
}
article p {
font-size: 1rem;
color: var(--color-text-light);
line-height: 1.7;
margin-bottom: var(--space-md);
}
article p:last-child {
margin-bottom: 0;
}
article section:last-child {
text-align: center;
padding: var(--space-2xl) 0;
border-top: 1px solid var(--color-border);
margin-top: var(--space-2xl);
}
article section:last-child h2 {
margin-bottom: var(--space-lg);
}
article section:last-child p {
margin-bottom: var(--space-lg);
}
article section:last-child div {
display: flex;
gap: var(--space-md);
justify-content: center;
margin: var(--space-lg) 0;
flex-wrap: wrap;
}
article section:last-child a {
display: inline-block;
color: var(--color-primary);
padding: var(--space-sm) var(--space-lg);
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm);
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
}
article section:last-child a:hover {
background: var(--color-primary);
color: white;
}
@media (max-width: 768px) {
.business-english-hero h1 {
font-size: 2rem;
}
article {
padding: var(--space-xl) var(--space-md);
}
article h2 {
font-size: 1.5rem;
}
article h3 {
font-size: 1.25rem;
}
article section:last-child div {
flex-direction: column;
align-items: center;
}
article section:last-child a {
width: 200px;
text-align: center;
}
}
.contact-input,
.contact-textarea {
width: 100%;
padding: 1rem;
border: 1px solid var(--color-border);
border-radius: 0.5rem;
background: var(--color-surface);
color: var(--color-text);
font-size: 1rem;
font-family: inherit;
transition: border-color 0.3s, box-shadow 0.3s;
}
.contact-input:focus,
.contact-textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.contact-textarea {
resize: vertical;
min-height: 120px;
}
.contact-button {
width: 100%;
padding: 1rem 2rem;
background: var(--color-primary);
color: white;
border: none;
border-radius: 0.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.contact-button:hover {
background: #1e40af;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.contact-button:active {
transform: translateY(0);
}
.about-page {
min-height: 100vh;
background-color: var(--color-bg);
}
.about-hero-section {
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 100%);
padding: 4rem 2rem;
border-bottom: 1px solid var(--color-border);
}
.about-hero-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 3rem;
}
.about-hero-content {
flex: 1;
}
.about-hero-title {
font-size: 2.5rem;
color: var(--color-text);
margin-bottom: var(--space-lg);
font-weight: 600;
line-height: 1.2;
}
.about-hero-subtitle {
font-size: 1.125rem;
color: var(--color-text-light);
line-height: 1.6;
margin: 0;
}
.about-hero-image-container {
flex-shrink: 0;
}
.about-hero-image {
width: 280px;
height: 280px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 8px 32px var(--color-shadow);
}
.about-section {
max-width: 1000px;
margin: 0 auto;
padding: 0 2rem;
}
.about-personal-story,
.about-experience,
.about-teaching-approach {
padding: 4rem 0;
}
.about-personal-story {
background-color: var(--color-bg);
}
.about-experience {
background-color: var(--color-surface);
}
.about-teaching-approach {
background-color: var(--color-bg);
}
.about-section-title {
font-size: 1.875rem;
color: var(--color-text);
text-align: center;
margin-bottom: var(--space-xl);
font-weight: 600;
}
.about-content {
max-width: 800px;
margin: 0 auto;
}
.about-intro {
font-size: 1.125rem;
color: var(--color-text-light);
font-weight: normal;
margin-bottom: var(--space-lg);
text-align: center;
}
.about-text {
font-size: 1rem;
color: var(--color-text-light);
line-height: 1.7;
margin-bottom: var(--space-md);
}
.about-subsection {
margin-bottom: 2.5rem;
}
.about-subsection-title {
font-size: 1.5rem;
color: var(--color-text);
margin-bottom: var(--space-md);
font-weight: 500;
}
.about-list,
.about-achievements {
list-style: none;
padding: 0;
margin: 0;
}
.about-list li,
.about-achievements li {
position: relative;
padding-left: 1.5rem;
margin-bottom: var(--space-sm);
font-size: 1rem;
color: var(--color-text-light);
line-height: 1.7;
}
.about-list li::before {
content: "•";
color: var(--color-primary);
font-weight: bold;
position: absolute;
left: 0;
}
.about-achievements li::before {
content: "✓";
color: var(--color-primary);
font-weight: bold;
position: absolute;
left: 0;
}
.teach-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.teach-card {
background: var(--color-bg);
border-radius: 1.5rem;
padding: 2.5rem 2rem;
border: 1px solid var(--color-border);
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.teach-icon {
font-size: 3rem;
margin-bottom: 1.5rem;
display: block;
}
.teach-subtitle {
font-size: 1.5rem;
color: var(--color-text);
margin-bottom: var(--space-md);
font-weight: 500;
}
.teach-desc {
color: var(--color-text-light);
font-size: 1rem;
line-height: 1.7;
margin: 0;
flex-grow: 1;
}
.about-approach-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-top: 2rem;
}
.about-approach-point {
background: var(--color-bg);
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 2px 8px var(--color-shadow);
border: 1px solid var(--color-border);
}
.about-approach-title {
font-size: 1.25rem;
color: var(--color-text);
margin-bottom: var(--space-md);
font-weight: 500;
}
.about-approach-desc {
font-size: 1rem;
color: var(--color-text-light);
line-height: 1.7;
margin: 0;
}
@media (max-width: 768px) {
.about-hero-container {
flex-direction: column;
text-align: center;
gap: 2rem;
}
.about-hero-title {
font-size: 2rem;
}
.about-hero-image {
width: 220px;
height: 220px;
}
.about-section-title {
font-size: 1.5rem;
}
.about-personal-story,
.about-experience,
.about-teaching-approach {
padding: 3rem 0;
}
.teach-cards-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (min-width: 768px) {
.about-approach-grid {
grid-template-columns: 1fr 1fr;
}
.teach-cards-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 480px) {
.about-hero-section {
padding: 3rem 1rem;
}
.about-section {
padding: 0 1rem;
}
.about-hero-title {
font-size: 2rem;
}
.about-hero-subtitle {
font-size: 1.125rem;
}
.about-approach-point {
padding: 1.25rem;
}
}
.booking-header {
padding: 4rem 2rem 2rem 2rem;
text-align: center;
}
.booking-title {
font-size: 2.5rem;
font-weight: 600;
line-height: 1.2;
margin: 0 0 var(--space-lg) 0;
text-align: center;
color: var(--color-text);
}
.booking-subtitle {
font-size: 1.125rem;
line-height: 1.6;
text-align: center;
color: var(--color-text-light);
margin-bottom: var(--space-2xl);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.pricing-cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 900px;
margin: 0 auto;
padding: 0 2rem;
}
.pricing-card-content {
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
}
.pricing-card-title {
margin: 0 0 var(--space-md) 0;
font-size: 1.5rem;
font-weight: 500;
color: var(--color-text);
}
.pricing-card-price-container {
margin-bottom: 1.5rem;
}
.pricing-card-price {
font-size: 2.5rem;
font-weight: 600;
color: var(--color-primary);
}
.pricing-card-duration {
font-size: 1rem;
color: var(--color-text-light);
}
.pricing-card-features {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.pricing-card-feature {
margin-bottom: var(--space-sm);
font-size: 1rem;
line-height: 1.7;
color: var(--color-text-light);
}
.booking-button {
background: var(--color-primary);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 0.75rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
width: 100%;
display: block;
text-decoration: none;
text-align: center;
transition: background 0.2s, transform 0.2s;
margin-top: auto;
}
.booking-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.booking-button-container {
text-align: center;
margin: 20px 0;
z-index: 999;
position: relative;
}
.booking-page-container {
min-height: 100vh;
background: var(--color-bg);
}
.pricing-card {
background: var(--color-surface);
border-radius: 1.5rem;
padding: 2rem;
box-shadow: 0 4px 20px var(--color-shadow);
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
height: 100%;
}
.pricing-card a {
position: relative;
z-index: 10;
pointer-events: auto;
display: block !important;
}
.pricing-card {
pointer-events: auto;
}
.pricing-card * {
pointer-events: auto;
}
@media (max-width: 768px) {
.pricing-cards-container {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.booking-title {
font-size: 2rem !important;
}
.pricing-card {
padding: 1.5rem !important;
}
.booking-header {
padding: 2rem 1rem 1rem 1rem;
}
}
input[type="checkbox"] {
width: 1.25rem;
height: 1.25rem;
border-radius: 0.25rem;
accent-color: var(--color-primary);
}
label {
cursor: pointer;
}
@media (max-width: 480px) {
.pricing-cards-container {
padding: 0 0.5rem;
}
.booking-header {
padding: 1.5rem 0.5rem 1rem 0.5rem;
}
.booking-title {
font-size: 1.75rem !important;
}
.booking-subtitle {
font-size: 1.1rem;
}
}
.free-trial-page {
max-width: 600px;
margin: 0 auto;
padding: 3rem 2rem;
background: var(--color-bg);
border-radius: 1rem;
box-shadow: 0 4px 6px -1px var(--color-shadow);
}
.free-trial-title {
text-align: center;
margin-bottom: 1rem;
font-size: 2.5rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.2;
}
.free-trial-subtitle {
text-align: center;
color: var(--color-text-light);
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 2.5rem;
}
.free-trial-form {
margin-bottom: 2.5rem;
}
.input-group {
margin-bottom: 1.5rem;
}
.free-trial-input,
.free-trial-textarea {
width: 100%;
padding: 1rem;
border: 2px solid var(--color-border);
border-radius: 0.5rem;
font-size: 1rem;
font-family: inherit;
background: var(--color-surface);
color: var(--color-text);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.free-trial-input:focus,
.free-trial-textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.free-trial-textarea {
resize: vertical;
min-height: 120px;
}
.free-trial-button {
width: 100%;
padding: 1rem 2rem;
background: var(--color-primary);
color: white;
border: none;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.free-trial-button:hover {
background: var(--color-primary-dark);
transform: translateY(-1px);
}
.free-trial-button:active {
transform: translateY(0);
}
.benefits-section {
background: var(--color-surface);
padding: 2rem;
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}
.benefits-title {
color: var(--color-text);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
text-align: center;
}
.benefits-list {
list-style: none;
padding: 0;
margin: 0;
}
.benefits-list li {
padding: 0.75rem 0;
color: var(--color-text-light);
position: relative;
padding-left: 2rem;
font-size: 1rem;
line-height: 1.5;
}
.benefits-list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--color-success);
font-weight: 600;
font-size: 1.1rem;
}
.benefits-list li:not(:last-child) {
border-bottom: 1px solid var(--color-border);
}
@media (max-width: 768px) {
.free-trial-page {
padding: 2rem 1rem;
margin: 1rem;
}
.free-trial-title {
font-size: 2rem;
}
.free-trial-subtitle {
font-size: 1rem;
}
}
.single-lesson-page {
max-width: 600px;
margin: 2rem auto;
padding: 2.5rem 2rem;
background: var(--color-bg);
border-radius: 1rem;
box-shadow: 0 4px 6px -1px var(--color-shadow);
}
.single-lesson-title {
text-align: center;
margin-bottom: 1rem;
font-size: 2.5rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.2;
}
.single-lesson-subtitle {
text-align: center;
color: var(--color-text-light);
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 2.5rem;
}
.single-lesson-form {
margin-bottom: 2.5rem;
}
.input-group {
margin-bottom: 1.5rem;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--color-text);
font-size: 1rem;
}
.single-lesson-input,
.single-lesson-select {
width: 100%;
padding: 1rem;
border: 2px solid var(--color-border);
border-radius: 0.5rem;
font-size: 1rem;
font-family: inherit;
background: var(--color-surface);
color: var(--color-text);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.single-lesson-input:focus,
.single-lesson-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.single-lesson-button {
width: 100%;
padding: 1rem 2rem;
background: var(--color-primary);
color: white;
border: 2px solid var(--color-primary);
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: 2rem;
}
.single-lesson-button:hover {
background: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
transform: translateY(-1px);
}
.single-lesson-button:active {
transform: translateY(0);
}
.lesson-details {
background: var(--color-surface);
padding: 2rem;
border-radius: 0.75rem;
border: 1px solid var(--color-border);
margin-bottom: 2rem;
}
.details-title {
color: var(--color-text);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
text-align: center;
}
.details-list {
list-style: none;
padding: 0;
margin: 0;
}
.details-list li {
padding: 0.75rem 0;
color: var(--color-text-light);
position: relative;
padding-left: 2rem;
font-size: 1rem;
line-height: 1.5;
}
.details-list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--color-success);
font-weight: 600;
font-size: 1.1rem;
}
.details-list li:not(:last-child) {
border-bottom: 1px solid var(--color-border);
}
.back-link {
display: block;
text-align: center;
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
padding: 0.75rem 1.5rem;
border: 2px solid var(--color-primary);
border-radius: 0.5rem;
transition: all 0.2s ease;
max-width: 250px;
margin: 0 auto;
}
.back-link:hover {
background: var(--color-primary);
color: white;
transform: translateY(-1px);
}
.single-lesson-select option {
padding: 0.5rem;
}
.single-lesson-input[type="date"]::-webkit-calendar-picker-indicator {
color: var(--color-primary);
cursor: pointer;
}
@media (max-width: 768px) {
.single-lesson-page {
padding: 2rem 1rem;
margin: 1rem;
}
.single-lesson-title {
font-size: 2rem;
}
.single-lesson-subtitle {
font-size: 1rem;
}
.lesson-details {
padding: 1.5rem;
}
}
.option-label {
border-radius: 0.5rem;
padding: 0.5rem 1rem;
transition: background 0.2s, color 0.2s;
cursor: pointer;
}
input[type="radio"]:disabled + .option-label {
cursor: default;
}
.test-page {
min-height: 100vh;
background-color: var(--color-bg);
}
.test-section {
padding: 4rem 2rem;
background-color: var(--color-bg);
}
.test-section-content {
max-width: 800px;
margin: 0 auto;
}
.test-progress-section {
padding: 1rem;
margin-bottom: 1.5rem;
text-align: center;
}
.test-progress-text {
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 0.75rem;
}
.test-progress-bar {
background: var(--color-border);
height: 8px;
border-radius: 4px;
overflow: hidden;
}
.test-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-primary), #3b82f6);
border-radius: 4px;
transition: width 0.3s ease;
}
.test-answered-text {
font-size: 1rem;
color: var(--color-text-light);
margin: 0;
}
.test-question-card {
background: var(--color-surface);
border-radius: 1.5rem;
padding: 3rem;
box-shadow: 0 8px 32px var(--color-shadow);
border: 1px solid var(--color-border);
}
.test-form {
width: 100%;
}
.test-question-content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.test-question-title {
font-size: 1.5rem;
color: var(--color-text);
margin: 0;
font-weight: 600;
line-height: 1.4;
}
.test-options-grid {
display: flex;
flex-direction: column;
gap: 1rem;
}
.test-option-label {
display: flex;
align-items: center;
padding: 1rem 1.5rem;
background: var(--color-bg);
border: 2px solid var(--color-border);
border-radius: 0.75rem;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.125rem;
color: var(--color-text);
position: relative;
}
.test-option-label:hover {
border-color: var(--color-primary);
box-shadow: 0 4px 12px var(--color-shadow);
}
.test-radio-input {
margin-right: 1rem;
width: 1.25rem;
height: 1.25rem;
accent-color: var(--color-primary);
}
.test-radio-input:disabled {
cursor: not-allowed;
pointer-events: none;
}
.test-radio-input:disabled:focus,
.test-radio-input:disabled:focus-visible {
outline: none !important;
box-shadow: none !important;
}
.test-option-label:has(.test-radio-input:disabled) {
cursor: default;
pointer-events: none;
}
.test-option-label:has(.test-radio-input:disabled):focus,
.test-option-label:has(.test-radio-input:disabled):focus-visible {
outline: none !important;
box-shadow: none !important;
}
.test-radio-input:disabled + .test-option-label {
cursor: default;
pointer-events: none;
}
.test-radio-input:disabled ~ .test-option-label:focus,
.test-radio-input:disabled ~ .test-option-label:focus-visible {
outline: none !important;
box-shadow: none !important;
}
.test-option-correct {
background: #dcfce7;
border-color: #16a34a;
color: #166534;
}
.test-option-incorrect {
background: #fecaca;
border-color: #dc2626;
color: #dc2626;
}
.test-feedback-section {
text-align: center;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
margin: 0.75rem 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 2rem;
max-height: 2rem;
}
.test-feedback {
font-weight: 600;
font-size: 1.125rem;
margin: 0;
line-height: 1.2;
}
.test-navigation {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.test-btn {
padding: 0.875rem 2rem;
border-radius: 0.75rem;
font-size: 1.125rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.test-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.test-btn-primary {
background: var(--color-primary);
color: white;
}
.test-btn-primary:hover:not(:disabled) {
background: var(--color-primary-hover);
box-shadow: 0 4px 12px var(--color-shadow);
}
.test-btn-secondary {
background: var(--color-border);
color: var(--color-text);
}
.test-results-hero-section {
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 100%);
padding: 4rem 2rem;
border-bottom: 1px solid var(--color-border);
}
.test-results-hero-container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.test-results-hero-content {
max-width: 800px;
margin: 0 auto;
}
.test-results-hero-title {
font-size: 3.5rem;
color: var(--color-text);
margin-bottom: 1rem;
font-weight: 700;
line-height: 1.1;
}
.test-results-hero-subtitle {
font-size: 1.25rem;
color: var(--color-text-light);
line-height: 1.6;
margin: 0;
}
.test-results-summary {
text-align: center;
margin-bottom: 3rem;
}
.test-results-title {
font-size: 2.5rem;
color: var(--color-primary);
margin-bottom: 2rem;
font-weight: 700;
}
.test-score-display {
margin-bottom: 2rem;
}
.test-score-number {
font-size: 4rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.test-score-percentage {
font-size: 1.5rem;
color: var(--color-text-light);
margin: 0;
}
.test-level-card {
background: var(--color-surface);
border-radius: 1.5rem;
padding: 2rem;
max-width: 600px;
margin: 0 auto;
box-shadow: 0 4px 16px var(--color-shadow);
border: 1px solid var(--color-border);
}
.test-level-title {
font-size: 1.75rem;
color: var(--color-text);
margin-bottom: 1rem;
font-weight: 600;
}
.test-level-description {
font-size: 1.125rem;
color: var(--color-text-light);
line-height: 1.6;
margin: 0;
}
.test-review-section {
margin-bottom: 3rem;
}
.test-review-title {
font-size: 2rem;
color: var(--color-text);
text-align: center;
margin-bottom: 2rem;
font-weight: 700;
}
.test-review-list {
display: flex;
flex-direction: column;
gap: 2rem;
}
.test-review-question {
background: var(--color-surface);
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 2px 8px var(--color-shadow);
border: 1px solid var(--color-border);
}
.test-review-question-number {
font-size: 1.25rem;
color: var(--color-primary);
margin-bottom: 0.5rem;
font-weight: 600;
}
.test-review-question-text {
font-size: 1.125rem;
color: var(--color-text);
margin-bottom: 1.5rem;
font-weight: 500;
}
.test-review-options {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.test-review-option {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-size: 1rem;
}
.test-review-icon {
margin-right: 0.75rem;
font-weight: bold;
width: 1.5rem;
text-align: center;
}
.test-review-correct {
background: #dcfce7;
color: #166534;
}
.test-review-incorrect {
background: #fecaca;
color: #dc2626;
}
.test-review-neutral {
background: var(--color-bg);
color: var(--color-text-light);
}
.test-actions {
text-align: center;
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.test-action-btn {
padding: 1rem 2rem;
border-radius: 0.75rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.test-action-btn-primary {
background: var(--color-primary);
color: white;
}
.test-action-btn-primary:hover {
background: var(--color-primary-hover);
box-shadow: 0 4px 12px var(--color-shadow);
}
.test-action-btn-secondary {
background: var(--color-border);
color: var(--color-text);
}
.test-action-btn-secondary:hover {
background: var(--color-text-light);
box-shadow: 0 4px 12px var(--color-shadow);
}
@media (max-width: 768px) {
.test-hero-title,
.test-results-hero-title {
font-size: 2.5rem;
}
.test-hero-subtitle,
.test-results-hero-subtitle {
font-size: 1.125rem;
}
.test-hero-section,
.test-results-hero-section {
padding: 3rem 1rem;
}
.test-section {
padding: 3rem 1rem;
}
.test-question-card {
padding: 2rem;
}
.test-progress-section {
padding: 0.75rem;
margin-bottom: 1rem;
}
.test-navigation {
flex-direction: column;
}
.test-btn {
width: 100%;
}
.test-actions {
flex-direction: column;
align-items: center;
}
.test-action-btn {
width: 100%;
max-width: 300px;
}
.test-review-question {
padding: 1.5rem;
}
}
@media (max-width: 480px) {
.test-hero-title,
.test-results-hero-title {
font-size: 2rem;
}
.test-score-number {
font-size: 3rem;
}
.test-results-title {
font-size: 2rem;
}
.test-question-title {
font-size: 1.25rem;
}
.test-option-label {
padding: 0.875rem 1rem;
font-size: 1rem;
}
}