* { margin: 0; padding: 0; box-sizing: border-box; } :root { --duolingo-green: #58CC02; --sky-blue: #87CEEB; --light-sky-blue: #E0F6FF; --dodger-blue: #1E90FF; --powder-blue: #B0E0E6; --alice-blue: #F0F8FF; --white: #FFFFFF; --light-gray: #F8F9FA; --border-gray: #E0E3E8; --text-dark: #1F2937; --text-light: #6B7280; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.1); --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Theme overrides applied by setting data-theme on or */ [data-theme="black"] { --white: #000000; --text-dark: #f3f4f6; --text-light: #d1d5db; --alice-blue: #071018; --light-sky-blue: #021422; --sky-blue: #031826; --dodger-blue: #7aaef7; --border-gray: rgba(255,255,255,0.06); } /* Black theme background (apply when data-theme is set on ), do not change default otherwise */ html[data-theme="black"] body, html[data-theme="black"] body.home-page { background: radial-gradient(circle at 10% 10%, #0a0a0a 0%, #000000 60%) !important; color: var(--text-dark) !important; } /* Ensure CTA visibility in dark theme */ html[data-theme="black"] .btn-secondary, html[data-theme="black"] .user-menu .btn-secondary { /* Use a clear visible CTA in dark mode while animating the header background separately. Keep the CTA bright so it remains prominent. */ background: linear-gradient(90deg,#1e90ff,#4ea1ff) !important; color: #ffffff !important; box-shadow: 0 6px 18px rgba(78,161,255,0.18) !important; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Black theme navbar */ html[data-theme="black"] .nav { /* Keep a slightly translucent dark panel so the nav content remains visible while allowing the animated pseudo-elements to subtly show through. */ background: linear-gradient(180deg, #0b1b34 0%, #08172d 100%) !important; /* small blur / shadow so the nav remains above page content */ box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important; overflow: visible !important; color: var(--text-dark) !important; /* keep the same stacking context as before */ z-index: 1000 !important; } /* Ensure nav links, brand, and user-menu items are readable in dark mode */ html[data-theme="black"] .nav-link, html[data-theme="black"] .nav-brand { color: var(--text-dark) !important; } html[data-theme="black"] .nav-link:hover { background: rgba(255,255,255,0.04) !important; color: var(--duolingo-green) !important; } /* Make sure buttons in the header contrast well on the translucent panel */ html[data-theme="black"] .user-menu .btn-primary { /* Make login button green in dark mode navbar */ background: var(--duolingo-green) !important; color: #ffffff !important; padding: 10px 20px !important; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(88,204,2,0.28) !important; border: 1px solid rgba(255,255,255,0.04) !important; } html[data-theme="black"] .user-menu .btn-primary:hover { background: #49b300 !important; } html[data-theme="black"] .user-menu .btn-secondary { /* keep the bright CTA visible */ background: linear-gradient(90deg,#1e90ff,#4ea1ff) !important; color: #ffffff !important; } /* Black theme dropdown/menu contrast fixes */ html[data-theme="black"] .theme-switch { position: relative; display: inline-flex; align-items: center; } html[data-theme="black"] .theme-button { border-color: rgba(255,255,255,0.16) !important; color: #f3f4f6 !important; background: rgba(255,255,255,0.03) !important; } html[data-theme="black"] .theme-button svg { color: #f3f4f6 !important; } html[data-theme="black"] .theme-dropdown { background: linear-gradient(180deg, #0f1f3d 0%, #0b172b 100%) !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 10px 24px rgba(0,0,0,0.45) !important; color: #f3f4f6 !important; } html[data-theme="black"] .theme-option { color: #f3f4f6 !important; } html[data-theme="black"] .theme-option:hover, html[data-theme="black"] .theme-option:focus { background: rgba(255,255,255,0.1) !important; } html[data-theme="black"] .theme-option .theme-swatch { border: 1px solid rgba(255,255,255,0.25) !important; } html[data-theme="black"] .theme-option .theme-swatch[style*="#fff"] { border-color: rgba(255,255,255,0.45) !important; } /* remove navy theme - we only offer current, black, and white White theme will mirror black but with swapped button colors/backgrounds */ [data-theme="white"] { /* explicit white theme (same as defaults but ensures variables) */ --white: #ffffff; --text-dark: #0f1724; --text-light: #6b7280; --alice-blue: #f8fbff; --light-sky-blue: #eef8ff; --sky-blue: #e6f5ff; --dodger-blue: #1e90ff; --border-gray: #e6e9ef; } /* White theme background */ html[data-theme="white"] body, html[data-theme="white"] body.home-page { /* mirror of black theme but lighter: swapped backgrounds/buttons Closer background: slightly lighter warm cafe; furthest: brown-creme. */ background: radial-gradient(circle at 10% 10%, #fff6f0 0%, #f5e4d7 60%) !important; color: var(--text-dark) !important; } /* Light mode title area + cards: dark brown surfaces */ html[data-theme="white"] .hero-section, html[data-theme="white"] .page-header, html[data-theme="white"] .home-page .hero-section, html[data-theme="white"] .home-page .page-header { background: #4b2c20 !important; color: #ffffff !important; } html[data-theme="white"] .hero-section h1, html[data-theme="white"] .page-header h1, html[data-theme="white"] .page-header h2, html[data-theme="white"] .hero-section p, html[data-theme="white"] .page-header p { color: #ffffff !important; } html[data-theme="white"] .home-page .feature-item, html[data-theme="white"] .home-page .interactive-card { background: #4b2c20 !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 6px 18px rgba(75,44,32,0.18) !important; } html[data-theme="white"] .home-page .feature-item h3, html[data-theme="white"] .home-page .feature-item p, html[data-theme="white"] .home-page .interactive-card h3, html[data-theme="white"] .home-page .interactive-card p { color: #ffffff !important; } html[data-theme="white"] .card { background: #4b2c20 !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 6px 18px rgba(75,44,32,0.18) !important; } html[data-theme="white"] .card h1, html[data-theme="white"] .card h2, html[data-theme="white"] .card h3, html[data-theme="white"] .card p, html[data-theme="white"] .card label, html[data-theme="white"] .card .subtitle { color: #ffffff !important; } /* White theme keeps standard button styling but ensure contrast */ html[data-theme="white"] .btn-secondary, html[data-theme="white"] .user-menu .btn-secondary { /* Make Get Started dark brown with white text in white mode */ background: #4b2c20 !important; /* dark brown */ color: var(--white) !important; box-shadow: 0 4px 12px rgba(75,44,32,0.22) !important; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* white theme: make primary (Login) a light brown with white text */ html[data-theme="white"] .btn-primary, html[data-theme="white"] .user-menu .btn-primary { background: #b98f74 !important; /* light warm brown */ color: #ffffff !important; box-shadow: 0 4px 12px rgba(185,143,116,0.18) !important; } /* Ensure the navbar's small 'Get Started' button keeps the compact/original sizing in white mode */ html[data-theme="white"] .user-menu .btn-secondary { width: auto !important; padding: 10px 20px !important; } /* Coffee surfaces only in white/light theme */ html[data-theme="white"] .nav, html[data-theme="white"] .site-footer { background: #c4a57b !important; border-top: 1px solid rgba(75, 44, 32, 0.2) !important; box-shadow: 0 -6px 18px rgba(75, 44, 32, 0.1) !important; } html[data-theme="white"] .nav-link, html[data-theme="white"] .nav-brand { color: #ffffff !important; } html[data-theme="white"] .nav-link:hover { background: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } html[data-theme="white"] input, html[data-theme="white"] textarea { background: #f5ede3 !important; } html[data-theme="white"] .theme-dropdown { background: #c4a57b !important; border-color: rgba(196, 165, 123, 0.3) !important; } html[data-theme="white"] .theme-option { color: #ffffff !important; } html[data-theme="white"] .theme-option:hover { background: rgba(255, 255, 255, 0.1) !important; } html[data-theme="white"] .site-footer-brand { color: #ffffff !important; } html[data-theme="white"] .site-footer-copy, html[data-theme="white"] .site-footer-links a, html[data-theme="white"] .site-footer-bottom { color: #ffffff !important; } html[data-theme="white"] .site-footer-links a:hover { color: #f5ede3 !important; } /* Explicitly make navbar buttons dark brown in white theme for visual consistency */ html[data-theme="white"] .nav .user-menu .btn-primary, html[data-theme="white"] .nav .user-menu .btn-secondary { background: #4b2c20 !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(75,44,32,0.22) !important; } /* Ensure hero buttons remain the light warm brown in white theme (already present but keep explicit) */ html[data-theme="white"] .home-page .hero-buttons .btn-primary, html[data-theme="white"] .home-page .hero-buttons .btn-secondary { background: #b98f74 !important; color: var(--white) !important; } html[data-theme="white"] .home-page .content-callout { background: #4b2c20 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 6px 18px rgba(75, 44, 32, 0.18) !important; } html[data-theme="white"] .home-page .content-callout h3, html[data-theme="white"] .home-page .content-callout p { color: #ffffff !important; } html[data-theme="white"] .home-page .content-card-tag, html[data-theme="white"] .home-page .content-callout-badge { background: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.14) !important; } html, body { height: 100%; width: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background: #87cefa; min-height: 100vh; color: var(--text-dark); display: flex; flex-direction: column; } /* Navbar Styles */ .nav { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; background: var(--white) !important; box-shadow: var(--shadow-sm) !important; z-index: 1000 !important; padding: 0 20px !important; box-sizing: border-box !important; } .nav-container { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; height: 64px !important; box-sizing: border-box !important; } .nav-brand { font-size: 1.5rem !important; font-weight: 800 !important; color: var(--duolingo-green) !important; text-decoration: none !important; flex-shrink: 0 !important; white-space: nowrap !important; } .nav-links { display: flex !important; gap: 32px !important; align-items: center !important; flex: 0 1 auto !important; } .nav-link { color: var(--text-dark) !important; text-decoration: none !important; font-weight: 600 !important; padding: 8px 16px !important; border-radius: 8px !important; transition: var(--transition) !important; white-space: nowrap !important; flex-shrink: 0 !important; } .nav-link:hover { background: var(--alice-blue) !important; color: var(--duolingo-green) !important; } .nav-link.active { background: var(--duolingo-green) !important; color: var(--white) !important; } .user-menu { display: flex !important; align-items: center !important; gap: 16px !important; flex-shrink: 0 !important; } .user-menu .btn { padding: 8px 16px !important; font-size: 0.9rem !important; text-align: center !important; width: auto !important; padding: 10px 20px !important; } .user-menu .btn-primary, .user-menu .btn-secondary { width: auto !important; padding: 10px 20px !important; } .user-avatar { width: 40px !important; height: 40px !important; background: var(--duolingo-green) !important; border-radius: 50% !important; display: none !important; align-items: center !important; justify-content: center !important; color: var(--white) !important; font-weight: 600 !important; flex-shrink: 0 !important; } .logout-btn { background: var(--sky-blue) !important; color: var(--white) !important; border: none !important; padding: 8px 16px !important; border-radius: 8px !important; font-weight: 600 !important; cursor: pointer !important; transition: var(--transition) !important; flex-shrink: 0 !important; } .logout-btn:hover { background: var(--dodger-blue) !important; } /* Theme toggle button in navbar */ .theme-switch { position: relative; display: inline-flex; align-items: center; } .theme-button { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: transparent; border: 1px solid var(--border-gray); cursor: pointer; color: var(--text-dark); font-weight: 600; } .theme-button:focus { outline: 3px solid rgba(30,144,255,0.12); outline-offset: 2px; } .theme-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; background: var(--white); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,0.12); border: 1px solid var(--border-gray); padding: 8px; display: none; z-index: 2000; } .theme-dropdown.show { display: block; } .theme-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--text-dark); font-weight: 600; } .theme-option:hover { background: var(--alice-blue); } .theme-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.08); flex-shrink: 0; } /* Icon-only variant and dropdown styling */ .theme-button { width: 44px; height: 44px; padding: 8px; justify-content: center; background: transparent; } .theme-button svg { color: var(--text-dark); width: 18px; height: 18px; } .theme-dropdown { right: 0; left: auto; min-width: 110px; padding: 6px; display: none; } .theme-dropdown.show { display: block; } .theme-option { background: transparent; border: none; padding: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; cursor: pointer; } .theme-option:focus { outline: 2px solid rgba(30,144,255,0.12); } .theme-option .theme-swatch { width: 26px; height: 18px; border-radius: 4px; } .theme-option.selected { box-shadow: 0 0 0 2px rgba(30,144,255,0.12) inset; border-radius: 6px; } /* make sure dropdown is on top of nav */ .theme-dropdown { z-index: 2500; } /* Typography */ h1 { font-size: 2.5rem; font-weight: 900; line-height: 1.2; color: rgba(114, 211, 39, 0.9); } h2 { font-size: 2rem; font-weight: 800; line-height: 1.3; color: rgba(114, 211, 39, 0.9); } h3 { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); } p { font-size: 1rem; line-height: 1.6; color: var(--text-light); } .subtitle { font-size: 0.95rem; color: var(--text-light); } /* Containers */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .nav-container.admin-mode { column-gap: 18px; } .nav-links.admin-mode { flex: 1 1 auto; min-width: 0; justify-content: center; align-items: center; gap: 16px; flex-wrap: nowrap; margin: 0 12px; } .nav-links.admin-mode .nav-link { font-size: 1rem; padding: 8px 16px; line-height: 1.25; white-space: nowrap; border-radius: 8px; } .nav-links.admin-mode a[href="/connect"] { display: none !important; } @media (max-width: 1180px) { .nav-links.admin-mode { gap: 12px; } .nav-links.admin-mode .nav-link { font-size: 0.95rem; padding: 7px 14px; } } @media (max-width: 1024px) { .nav-container.admin-mode { align-items: flex-start; } .nav-links.admin-mode { flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin: 0; } } .card { background: var(--white); border-radius: 20px; box-shadow: var(--shadow-md); padding: 40px; transition: var(--transition); } .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } /* Forms */ .form-group { margin-bottom: 24px; } label { display: block; font-size: 0.95rem; font-weight: 600; color: var(--text-dark); margin-bottom: 10px; } input, textarea { width: 100%; padding: 14px 16px; border: 2px solid var(--light-gray); border-radius: 12px; font-size: 1rem; font-family: inherit; transition: var(--transition); background: var(--white); } input:focus, textarea:focus { outline: none; border-color: var(--primary-green); box-shadow: 0 0 0 4px rgba(0, 200, 83, 0.1); } input::placeholder { color: #BDBDBD; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: var(--transition); text-decoration: none; gap: 8px; } .btn-primary { background: var(--duolingo-green); color: var(--white); width: 100%; box-shadow: 0 4px 12px rgba(88, 204, 2, 0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(88, 204, 2, 0.4); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: var(--sky-blue); color: var(--white); width: 100%; box-shadow: 0 4px 12px rgba(135, 206, 235, 0.3); } .btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(135, 206, 235, 0.4); } .btn-outline { background: transparent; color: #58CC02; border: 2px solid #58CC02; } .btn-outline:hover { background: rgba(88, 204, 2, 0.05); } body.modal-open { overflow: hidden; } .auth-modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, 0.58); backdrop-filter: blur(6px); z-index: 2600; } .auth-modal-overlay.is-hidden { display: none; } .auth-modal { position: relative; width: min(100%, 520px); max-height: min(100vh - 48px, 760px); overflow: auto; border-radius: 24px; background: var(--white); box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28); border: 1px solid rgba(255, 255, 255, 0.35); } .auth-modal .auth-header { text-align: center; margin: 20px 24px 28px; } .auth-modal .auth-header .emoji { font-size: 3.25rem; margin-bottom: 14px; display: block; } .auth-modal .auth-header p { color: var(--text-light); } .auth-modal .auth-header { margin-bottom: 28px; } .auth-modal .auth-header h2 { color: #58CC02; } .auth-modal .card { margin-bottom: 18px; } .auth-modal .card:hover { transform: none; box-shadow: var(--shadow-md); } .auth-modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: none; border-radius: 999px; background: rgba(15, 23, 42, 0.08); color: var(--text-dark); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: var(--transition); z-index: 1; } .auth-modal-close:hover { background: rgba(15, 23, 42, 0.14); } .auth-modal-close:focus-visible, .auth-modal .btn:focus-visible, .auth-modal input:focus-visible { outline: 3px solid rgba(88, 204, 2, 0.24); outline-offset: 2px; } .auth-modal .form-actions { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; } .auth-modal .form-links { display: flex; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--light-gray); } .auth-modal .form-links a { flex: 1; text-align: center; color: #58CC02; font-size: 0.95rem; padding: 12px 0; transition: var(--transition); border-radius: 8px; } .auth-modal .form-links a:hover { background: rgba(88, 204, 2, 0.05); } .auth-modal .security-badge { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; padding: 12px; background: var(--light-sky-blue); border-radius: 12px; color: var(--sky-blue); font-size: 0.85rem; border: 2px solid rgba(135, 206, 235, 0.2); } @media (max-width: 640px) { .auth-modal-overlay { padding: 12px; align-items: flex-end; } .auth-modal { width: 100%; max-height: calc(100vh - 24px); border-radius: 20px 20px 0 0; } .auth-modal .card { padding: 28px 20px; } .auth-modal .form-links { flex-direction: column; } } .btn-text { background: transparent; color: var(--primary-green); padding: 8px 12px; } .btn-text:hover { background: rgba(0, 200, 83, 0.05); } /* Links */ a { color: #58CC02; text-decoration: none; font-weight: 500; transition: var(--transition); } a:hover { color: #4CAF50; text-decoration: none; } /* Messages */ .message { padding: 16px 20px; border-radius: 12px; margin-bottom: 20px; font-weight: 500; display: none; } .message.show { display: block; } .message.success { background: #E8F5E9; color: #2E7D32; border-left: 4px solid #58CC02; } .message.error { background: #FFEBEE; color: #C62828; border-left: 4px solid var(--primary-red); } .message.info { background: #E3F2FD; color: #1565C0; border-left: 4px solid #1CB0F6; } /* Divider */ .divider { display: flex; align-items: center; margin: 24px 0; color: var(--text-light); } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border-gray); } .divider span { margin: 0 16px; font-size: 0.9rem; } /* Footer */ .footer { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border-gray); text-align: center; color: var(--text-light); font-size: 0.9rem; } .site-footer { margin-top: auto; background: linear-gradient(135deg, #f0f8ff 0%, #e0f6ff 100%); border-top: 1px solid rgba(30, 144, 255, 0.2); box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.06); padding: 24px 20px; } .site-footer-inner { max-width: 1200px; margin: 0 auto; } .site-footer-top { margin-bottom: 14px; } .site-footer-brand { display: inline-block; font-size: 1.2rem; font-weight: 800; color: var(--duolingo-green); margin-bottom: 8px; } .site-footer-copy { margin: 0; color: var(--text-light); max-width: 540px; } .site-footer-links { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0; } .site-footer-links a { color: var(--text-light); font-weight: 600; } .site-footer-links a:hover { color: var(--dodger-blue); } .site-footer-bottom { border-top: 1px solid rgba(30, 144, 255, 0.18); margin-top: 14px; padding-top: 12px; color: var(--text-light); font-size: 0.92rem; } /* Loading */ .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(88, 204, 2, 0.3); border-top-color: #58CC02; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Responsive */ @media (max-width: 768px) { h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } .card { padding: 30px 20px; } }