/* ===== RESET & BASE ===== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Google Fonts loaded via in HTML for proper loading order */ /* ===== ACCESSIBILITY: Skip Link ===== */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 10000; padding: 12px 24px; background: var(--accent); color: #0b0f1a; font-weight: 700; border-radius: 0 0 8px 8px; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 0; } /* ===== ACCESSIBILITY: Reduced Motion ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .fade-in { opacity: 1 !important; transform: none !important; } } /* ===== ACCESSIBILITY: Focus Visible ===== */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } :root { --bg-dark: #0b0f1a; --bg-section: #101728; --bg-card: #161d30; --bg-card-hover: #1c2540; --accent: #00e59b; --accent2: #00b8d4; --accent-gradient: linear-gradient(135deg, #00e59b 0%, #00b8d4 100%); --text: #e8ecf4; --text-muted: #8892a8; --text-heading: #ffffff; --border: rgba(255, 255, 255, 0.06); --radius: 16px; --radius-sm: 10px; --shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg-dark); color: var(--text); line-height: 1.7; overflow-x: hidden; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } /* ===== UTILITIES ===== */ .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } .section { padding: 100px 0; position: relative; } .section:nth-child(even) { background: var(--bg-section); } .section-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); margin-bottom: 12px; } .section-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; color: var(--text-heading); line-height: 1.15; margin-bottom: 16px; } .section-subtitle { font-size: 1.15rem; color: var(--text-muted); max-width: 650px; margin-bottom: 48px; } .gradient-text { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ===== SITE HEADER / NAV ===== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: rgba(11, 15, 26, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); transition: background 0.3s; } .site-nav { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 60px; } .nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 0.95rem; color: var(--text-heading); text-decoration: none; white-space: nowrap; } .nav-logo:hover { text-decoration: none; color: var(--accent); } .nav-logo img, .nav-logo-icon { width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; } .nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav-links a { padding: 6px 14px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); text-decoration: none; border-radius: 8px; transition: color 0.2s, background 0.2s; } .nav-links a:hover { color: var(--text-heading); background: rgba(255, 255, 255, 0.05); text-decoration: none; } .nav-links .nav-cta { background: var(--accent-gradient); color: #0b0f1a; padding: 6px 18px; border-radius: 100px; font-weight: 700; } .nav-links .nav-cta:hover { opacity: 0.9; background: var(--accent-gradient); } .nav-toggle { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 4px; } @media (max-width: 768px) { .nav-links { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; background: rgba(11, 15, 26, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 12px 24px; gap: 4px; } .nav-links.nav-open { display: flex; } .nav-links a { padding: 12px 16px; width: 100%; text-align: left; } .nav-toggle { display: block; } } /* ===== HERO ===== */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; padding: 80px 24px 60px; background: radial-gradient(ellipse at 50% 80%, rgba(0, 229, 155, 0.08) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(0, 184, 212, 0.06) 0%, transparent 50%), var(--bg-dark); } .hero-content { max-width: 800px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 100px; font-size: 0.8rem; font-weight: 600; color: var(--accent); background: rgba(0, 229, 155, 0.08); border: 1px solid rgba(0, 229, 155, 0.15); margin-bottom: 32px; letter-spacing: 1px; text-transform: uppercase; } .hero h1 { font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 900; color: var(--text-heading); line-height: 1.08; margin-bottom: 24px; } .hero p { font-size: 1.2rem; color: var(--text-muted); max-width: 560px; margin: 0 auto 40px; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; border-radius: 100px; font-size: 1rem; font-weight: 700; border: none; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .btn:hover { transform: translateY(-2px); text-decoration: none; } .btn-primary { background: var(--accent-gradient); color: #0b0f1a; box-shadow: 0 4px 24px rgba(0, 229, 155, 0.25); } .btn-primary:hover { box-shadow: 0 8px 32px rgba(0, 229, 155, 0.35); } .btn-outline { background: transparent; color: var(--text); border: 2px solid var(--border); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); } .hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .hero-scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); animation: bounce 2s infinite; color: var(--text-muted); } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } } /* ===== STAT CARDS ===== */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 48px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; text-align: center; transition: transform 0.3s, border-color 0.3s; } .stat-card:hover { transform: translateY(-4px); border-color: rgba(0, 229, 155, 0.2); } .stat-card .icon-circle { width: 56px; height: 56px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 16px; background: rgba(0, 229, 155, 0.1); color: var(--accent); } .stat-card .stat-value { font-size: 2.2rem; font-weight: 900; color: var(--text-heading); margin-bottom: 4px; } .stat-card .stat-label { font-size: 0.9rem; color: var(--text-muted); } /* ===== ICON FEATURE ROWS ===== */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; } .feature-item { display: flex; gap: 20px; align-items: flex-start; } .feature-item .icon-circle { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(0, 229, 155, 0.1); color: var(--accent); } .feature-item h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-heading); margin-bottom: 6px; } .feature-item p { font-size: 0.92rem; color: var(--text-muted); } /* ===== ZONE CARDS ===== */ .zone-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-bottom: 48px; } .zone-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; position: relative; overflow: hidden; } .zone-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; } .zone-card.zone-a::before { background: #ff6b6b; } .zone-card.zone-b::before { background: #ffd43b; } .zone-card.zone-c::before { background: #51cf66; } .zone-card .zone-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; } .zone-a .zone-label { color: #ff6b6b; } .zone-b .zone-label { color: #ffd43b; } .zone-c .zone-label { color: #51cf66; } .zone-card h3 { font-size: 1.15rem; font-weight: 800; color: var(--text-heading); margin-bottom: 8px; } .zone-card p { font-size: 0.9rem; color: var(--text-muted); } /* ===== TIME TABLE ===== */ .time-table { width: 100%; border-collapse: collapse; background: var(--bg-card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .time-table th { background: rgba(0, 229, 155, 0.08); color: var(--accent); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding: 16px 20px; text-align: left; } .time-table td { padding: 14px 20px; font-size: 0.95rem; border-top: 1px solid var(--border); color: var(--text); } .time-table tr:hover td { background: var(--bg-card-hover); } .time-table .badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; } .badge-peak { background: rgba(255, 107, 107, 0.15); color: #ff6b6b; } .badge-offpeak { background: rgba(255, 212, 59, 0.15); color: #ffd43b; } .badge-night { background: rgba(81, 207, 102, 0.15); color: #51cf66; } /* ===== PRICING TABLE ===== */ .pricing-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); } .pricing-table { width: 100%; min-width: 700px; border-collapse: collapse; background: var(--bg-card); } .pricing-table th { background: rgba(0, 229, 155, 0.08); color: var(--accent); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 14px 16px; text-align: left; white-space: nowrap; } .pricing-table td { padding: 12px 16px; font-size: 0.9rem; border-top: 1px solid var(--border); color: var(--text); } .pricing-table tr:hover td { background: var(--bg-card-hover); } .pricing-table .vehicle-name { font-weight: 700; color: var(--text-heading); display: flex; align-items: center; gap: 10px; } .pricing-table .vehicle-icon { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 229, 155, 0.1); color: var(--accent); flex-shrink: 0; } .pricing-table .charge-zone { font-size: 0.8rem; color: var(--text-muted); } /* ===== EFFICIENCY COMPARISON ===== */ .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; } @media (max-width: 640px) { .comparison-grid { grid-template-columns: 1fr; } } .comparison-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; text-align: center; } .comparison-card.bad { border-color: rgba(255, 107, 107, 0.2); } .comparison-card.good { border-color: rgba(0, 229, 155, 0.2); } .comparison-card .comp-icon { width: 64px; height: 64px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.5rem; } .comparison-card.bad .comp-icon { background: rgba(255, 107, 107, 0.1); color: #ff6b6b; } .comparison-card.good .comp-icon { background: rgba(0, 229, 155, 0.1); color: var(--accent); } .comparison-card .comp-title { font-size: 1rem; font-weight: 700; color: var(--text-heading); margin-bottom: 6px; } .comparison-card .comp-price { font-size: 2rem; font-weight: 900; margin-bottom: 4px; } .comparison-card.bad .comp-price { color: #ff6b6b; } .comparison-card.good .comp-price { color: var(--accent); } .comparison-card .comp-detail { font-size: 0.85rem; color: var(--text-muted); } /* ===== TIMELINE / PHASES ===== */ .timeline { position: relative; padding-left: 40px; } .timeline::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--border); } .timeline-item { position: relative; margin-bottom: 48px; } .timeline-item:last-child { margin-bottom: 0; } .timeline-dot { position: absolute; left: -40px; top: 4px; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; color: var(--accent); z-index: 1; } .timeline-item h3 { font-size: 1.2rem; font-weight: 800; color: var(--text-heading); margin-bottom: 4px; } .timeline-item .timeline-meta { font-size: 0.8rem; font-weight: 600; color: var(--accent); margin-bottom: 10px; } .timeline-item p { font-size: 0.92rem; color: var(--text-muted); } .timeline-item ul { list-style: none; margin-top: 12px; } .timeline-item ul li { font-size: 0.9rem; color: var(--text-muted); padding: 4px 0; padding-left: 20px; position: relative; } .timeline-item ul li::before { content: ''; position: absolute; left: 0; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: 0.4; } /* ===== FAQ ACCORDION ===== */ .faq-list { max-width: 750px; } .faq-item { border-bottom: 1px solid var(--border); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 22px 0; background: none; border: none; cursor: pointer; text-align: left; font-size: 1.05rem; font-weight: 600; color: var(--text-heading); font-family: inherit; line-height: 1.4; gap: 16px; } .faq-question:hover { color: var(--accent); } .faq-question .faq-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0, 229, 155, 0.1); color: var(--accent); transition: transform 0.3s; } .faq-item.open .faq-question .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; } .faq-item.open .faq-answer { max-height: 400px; } .faq-answer p { padding-bottom: 22px; font-size: 0.92rem; color: var(--text-muted); line-height: 1.7; } /* ===== DISCUSS SECTION ===== */ .discuss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .discuss-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; text-decoration: none; transition: transform 0.3s, border-color 0.3s; } .discuss-card:hover { transform: translateY(-4px); border-color: rgba(0, 229, 155, 0.2); text-decoration: none; } .discuss-card .icon-circle { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 229, 155, 0.1); color: var(--accent); margin-bottom: 16px; } .discuss-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-heading); margin-bottom: 8px; } .discuss-card p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; } /* ===== CTA SECTION ===== */ .cta-section { text-align: center; background: radial-gradient(ellipse at 50% 50%, rgba(0, 229, 155, 0.1) 0%, transparent 60%), var(--bg-dark) !important; } .cta-section .section-title { margin-bottom: 20px; } .cta-section .section-subtitle { margin: 0 auto 40px; text-align: center; } /* ===== FOOTER ===== */ .footer { padding: 40px 0; text-align: center; font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid var(--border); } .footer-copyright { margin-top: 8px; font-size: 0.78rem; color: var(--text-muted); } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .section { padding: 72px 0; } .hero { padding: 80px 20px 40px; } .hero h1 { font-size: 2.4rem; } .stats-grid { grid-template-columns: 1fr; } .zone-cards { grid-template-columns: 1fr; } .timeline { padding-left: 32px; } } /* ===== LANGUAGE SWITCHER (nav-integrated) ===== */ #lang-switcher { display: flex; gap: 2px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 100px; padding: 3px; margin-left: 12px; flex-shrink: 0; } #lang-switcher.loading { opacity: 0.5; pointer-events: none; } .lang-btn { background: transparent; border: none; color: var(--text-muted); padding: 5px 12px; border-radius: 100px; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: color 0.2s, background 0.2s; line-height: 1; white-space: nowrap; font-family: 'Inter', system-ui, sans-serif; } .lang-btn:hover { color: var(--text-heading); background: rgba(255, 255, 255, 0.06); } .lang-btn.active { color: #0b0f1a; background: var(--accent); } @media (max-width: 768px) { #lang-switcher { margin-left: auto; margin-right: 12px; } } /* ===== CONTENT VISIBILITY (Core Web Vitals) ===== */ .section:not(.hero) { content-visibility: auto; contain-intrinsic-size: 0 600px; } /* ===== ANIMATIONS ===== */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* ===== PRINT STYLES ===== */ @media print { .site-header, .hero-scroll, .hero-buttons, .nav-toggle, #lang-switcher, .btn { display: none !important; } body { background: #fff; color: #000; } .section, .hero { padding: 24px 0; break-inside: avoid; } .gradient-text { -webkit-text-fill-color: initial; background: none; color: #00805a; } .section-title, .hero h1 { color: #000; } } /* ===== HIGH CONTRAST MODE ===== */ @media (forced-colors: active) { .btn-primary { border: 2px solid ButtonText; } .gradient-text { -webkit-text-fill-color: initial; background: none; color: LinkText; } }