/* ============================================================
Webspt — Light Mode Overrides
Default site theme is dark (cyan/gold neon). When users opt in
via the theme toggle, the [data-theme="light"] attribute on
activates this stylesheet, which rewrites colors
without touching the original Astro-built stylesheets.
============================================================ */
/* Logo: swap between dark-bg variant (white text) and light-bg
variant (dark text). Two ![]()
tags live in the markup; only
the one matching the current theme is shown. */
.logo-img {
display: block;
}
.logo-light {
display: none;
}
[data-theme="light"] .logo-dark {
display: none;
}
[data-theme="light"] .logo-light {
display: block;
}
/* On the homepage hero, while still scrolled at top, the header
is transparent over the dark hero — keep the dark-variant logo
(white text) even in light mode. */
[data-theme="light"].has-hero .header:not(.scrolled) .logo-dark {
display: block;
}
[data-theme="light"].has-hero .header:not(.scrolled) .logo-light {
display: none;
}
/* Light theme palette — anchored to brand colors but inverted */
:root[data-theme="light"] {
--primary: #1a365d;
--blue: #2c5282;
--gold: #b7791f;
--neon: #0f7c8a; /* darker cyan that reads on white */
--neon2: #5a4cd1;
--text: #1a202c;
--gray: #4a5568;
--lm-bg: #f6f4ef; /* page background */
--lm-surface: #ffffff; /* card / section background */
--lm-surface-2: #efeae0; /* alternate panel */
--lm-border: #d6d3cc;
--lm-text: #1a202c;
--lm-text-soft: #3c4858;
--lm-text-mute: #6b7280;
--lm-header-bg: rgba(246, 244, 239, 0.94);
--lm-overlay: rgba(246, 244, 239, 0.6);
}
/* Body + general */
[data-theme="light"] body {
background: var(--lm-bg);
color: var(--lm-text);
}
[data-theme="light"] .loader {
background: var(--lm-bg);
}
[data-theme="light"] .loader-text {
color: var(--neon);
}
[data-theme="light"] .loader-bar {
background: rgba(0, 0, 0, 0.08);
}
/* Cursor */
[data-theme="light"] .cursor {
border-color: var(--neon);
}
/* Header — light mode is *context-aware*:
• On pages with a .hero section (homepage):
- At top (not scrolled): transparent background + WHITE text,
so it sits cleanly on top of the dark hero video.
- After scroll: cream background + dark text, identical to
the scrolled state on non-hero pages.
• On pages without a hero (news/pricing/article/…):
- The header is always cream + dark text. There's no dark
video underneath, so transparent + white would be invisible.
The .has-hero / .no-hero classes are added by theme-toggle.js
at DOM ready. Until that runs, we default to the "safe" cream
look so non-hero pages never flash white-on-white.
*/
/* Default (before JS): safe cream look — protects non-hero pages */
[data-theme="light"] .header {
background: rgba(246, 244, 239, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
/* Homepage: transparent header over hero, white text */
[data-theme="light"].has-hero .header:not(.scrolled) {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
}
[data-theme="light"].has-hero .header:not(.scrolled) nav a,
[data-theme="light"].has-hero .header:not(.scrolled) .lang-switch,
[data-theme="light"].has-hero .header:not(.scrolled) .header-phone {
color: rgba(255, 255, 255, 0.85) !important;
}
[data-theme="light"].has-hero .header:not(.scrolled) nav a:hover {
color: #ffffff !important;
}
[data-theme="light"].has-hero .header:not(.scrolled) .lang-switch {
border-color: rgba(255, 255, 255, 0.25) !important;
}
[data-theme="light"].has-hero .header:not(.scrolled) .lang-switch:hover {
border-color: var(--neon) !important;
color: var(--neon) !important;
}
[data-theme="light"].has-hero .header:not(.scrolled) .menu-btn {
color: #ffffff !important;
}
[data-theme="light"].has-hero .header:not(.scrolled) .theme-toggle {
border-color: rgba(255, 255, 255, 0.25) !important;
color: rgba(255, 255, 255, 0.85) !important;
}
[data-theme="light"].has-hero .header:not(.scrolled) .theme-toggle:hover {
border-color: var(--neon) !important;
color: var(--neon) !important;
}
/* All scrolled headers (and non-hero pages): cream + dark */
[data-theme="light"] .header.scrolled {
background: var(--lm-header-bg) !important;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] nav a,
[data-theme="light"] .lang-switch,
[data-theme="light"] .header-phone {
color: var(--lm-text-soft) !important;
}
[data-theme="light"] nav a:hover {
color: var(--neon) !important;
}
[data-theme="light"] .lang-switch {
border-color: var(--lm-border) !important;
}
[data-theme="light"] .lang-switch:hover {
border-color: var(--neon);
color: var(--neon);
box-shadow: 0 0 12px rgba(15, 124, 138, 0.18);
}
[data-theme="light"] .menu-btn {
color: var(--lm-text);
}
/* Hero — keep dark with image overlay for visual punch */
[data-theme="light"] .hero {
background: linear-gradient(135deg, #0d1b2a 0%, #1a365d 100%);
}
[data-theme="light"] .hero h1,
[data-theme="light"] .hero .sub {
color: #ffffff;
}
/* Trust strip */
[data-theme="light"] .trust {
background: var(--lm-surface);
border-top-color: var(--lm-border);
border-bottom-color: var(--lm-border);
}
[data-theme="light"] .trust p,
[data-theme="light"] .trust-logos span {
color: var(--lm-text-soft);
}
/* Section dividers */
[data-theme="light"] .section-divider {
background: linear-gradient(90deg, transparent, var(--lm-border), transparent);
}
/* Services / generic sections */
[data-theme="light"] .services,
[data-theme="light"] .news,
[data-theme="light"] .contact,
[data-theme="light"] section {
background: var(--lm-bg);
}
[data-theme="light"] .section-title h2 {
color: var(--lm-text);
}
[data-theme="light"] .section-title p {
color: var(--lm-text-soft);
}
/* Cards (services, news, portfolio info) */
[data-theme="light"] .service-card,
[data-theme="light"] .news-card,
[data-theme="light"] .ai-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .article-content,
[data-theme="light"] .case-card,
[data-theme="light"] .design-card {
background: var(--lm-surface);
border: 1px solid var(--lm-border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .service-card:hover,
[data-theme="light"] .news-card:hover,
[data-theme="light"] .ai-card:hover,
[data-theme="light"] .pricing-card:hover,
[data-theme="light"] .case-card:hover,
[data-theme="light"] .design-card:hover {
box-shadow: 0 8px 24px rgba(15, 124, 138, 0.12);
border-color: rgba(15, 124, 138, 0.3);
}
[data-theme="light"] .service-card h3,
[data-theme="light"] .news-card h3,
[data-theme="light"] .ai-card h3,
[data-theme="light"] .pricing-card h3 {
color: var(--lm-text);
}
[data-theme="light"] .service-card p,
[data-theme="light"] .news-card p,
[data-theme="light"] .ai-card p,
[data-theme="light"] .pricing-card p {
color: var(--lm-text-soft);
}
[data-theme="light"] .service-num {
color: rgba(15, 124, 138, 0.25);
}
/* Portfolio remains image-driven; overlay stays as-is */
/* AI section */
[data-theme="light"] .ai {
background: var(--lm-surface-2);
}
/* Pricing */
[data-theme="light"] .pricing {
background: var(--lm-bg);
}
[data-theme="light"] .pricing-card .price,
[data-theme="light"] .pricing-card .price-num {
color: var(--gold);
}
[data-theme="light"] .pricing-card li {
color: var(--lm-text-soft);
border-bottom-color: var(--lm-border);
}
/* News */
[data-theme="light"] .news {
background: var(--lm-surface-2);
}
[data-theme="light"] .news-card .news-meta,
[data-theme="light"] .news-meta {
color: var(--lm-text-mute);
}
[data-theme="light"] .news-tag {
background: rgba(15, 124, 138, 0.1);
color: var(--neon);
}
/* Contact form */
[data-theme="light"] .contact {
background: var(--lm-surface-2);
}
[data-theme="light"] .contact-form,
[data-theme="light"] .form-container {
background: var(--lm-surface);
border: 1px solid var(--lm-border);
}
[data-theme="light"] .form-group label {
color: var(--lm-text-soft);
}
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
background: var(--lm-bg);
border: 1px solid var(--lm-border);
color: var(--lm-text);
}
[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder {
color: var(--lm-text-mute);
}
[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group select:focus,
[data-theme="light"] .form-group textarea:focus {
border-color: var(--neon);
outline: none;
box-shadow: 0 0 0 3px rgba(15, 124, 138, 0.12);
}
[data-theme="light"] .captcha-box {
background: var(--lm-bg);
color: var(--lm-text);
border: 1px solid var(--lm-border);
}
/* Footer — kept dark for visual anchor + readability of brand info */
[data-theme="light"] .footer {
background: #0d1b2a;
}
[data-theme="light"] .footer,
[data-theme="light"] .footer h4,
[data-theme="light"] .footer p,
[data-theme="light"] .footer a {
color: rgba(255, 255, 255, 0.85);
}
[data-theme="light"] .footer-bottom {
color: rgba(255, 255, 255, 0.5);
}
/* Article pages (news/article-*) */
[data-theme="light"] .article-hero {
background: linear-gradient(135deg, #0d1b2a 0%, #1a365d 100%);
}
[data-theme="light"] .article-body,
[data-theme="light"] .article-container,
[data-theme="light"] article {
background: var(--lm-bg);
color: var(--lm-text);
}
[data-theme="light"] .article-body h2,
[data-theme="light"] .article-body h3,
[data-theme="light"] article h2,
[data-theme="light"] article h3 {
color: var(--lm-text);
}
[data-theme="light"] .article-body p,
[data-theme="light"] .article-body li,
[data-theme="light"] article p,
[data-theme="light"] article li {
color: var(--lm-text-soft);
}
[data-theme="light"] .article-body a,
[data-theme="light"] article a {
color: var(--neon);
}
[data-theme="light"] .article-body blockquote,
[data-theme="light"] article blockquote {
background: var(--lm-surface);
border-left-color: var(--neon);
color: var(--lm-text-soft);
}
[data-theme="light"] .article-body code,
[data-theme="light"] article code {
background: var(--lm-surface-2);
color: var(--primary);
}
/* Mobile nav drawer */
[data-theme="light"] .mobile-nav {
background: var(--lm-bg);
}
[data-theme="light"] .mobile-nav-link,
[data-theme="light"] .mobile-nav-close {
color: var(--lm-text);
}
[data-theme="light"] .mobile-nav-link {
border-bottom-color: var(--lm-border);
}
/* Back-to-top button */
[data-theme="light"] .back-top {
background: var(--lm-surface);
color: var(--neon);
border: 1px solid var(--lm-border);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
/* ============================================================
Theme toggle button — always present in both modes
============================================================ */
.theme-toggle {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.7);
width: 38px;
height: 38px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
font-size: 16px;
padding: 0;
line-height: 1;
}
.theme-toggle:hover {
border-color: var(--neon);
color: var(--neon);
box-shadow: 0 0 15px rgba(0, 212, 255, 0.15);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
[data-theme="light"] .theme-toggle {
border-color: var(--lm-border);
color: var(--lm-text-soft);
}
[data-theme="light"] .theme-toggle:hover {
border-color: var(--neon);
color: var(--neon);
box-shadow: 0 0 12px rgba(15, 124, 138, 0.18);
}
[data-theme="light"] .theme-toggle .icon-sun { display: inline; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
/* Floating Line button — keep brand */
/* (no override; LINE green works in both themes) */
/* Scroll indicator + glitch effects look better in dark only */
[data-theme="light"] .scroll-indicator {
display: none;
}
/* SVGs in light mode — particle canvas opacity reduce */
[data-theme="light"] #particleCanvas {
opacity: 0.4;
}
/* ============================================================
Additional fixes — components not covered above
============================================================ */
/* Trust strip logos — original uses light-on-dark text */
[data-theme="light"] .trust-logos {
color: var(--lm-text-soft);
}
[data-theme="light"] .trust-logos span,
[data-theme="light"] .trust-logos a {
color: var(--lm-text-soft);
opacity: 0.75;
}
/* Testimonials section */
[data-theme="light"] .testimonials {
background: var(--lm-bg);
}
[data-theme="light"] .testimonial-card {
background: var(--lm-surface);
border: 1px solid var(--lm-border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .testimonial-card:hover {
box-shadow: 0 8px 24px rgba(15, 124, 138, 0.12);
}
[data-theme="light"] .testimonial-card blockquote,
[data-theme="light"] .testimonial-card .quote {
color: var(--lm-text);
}
[data-theme="light"] .testimonial-card .author,
[data-theme="light"] .testimonial-card .name {
color: var(--lm-text-mute);
}
[data-theme="light"] .testimonial-card .stars {
color: var(--gold);
}
/* Industry-solutions tabs */
[data-theme="light"] .solutions {
background: var(--lm-surface-2);
}
[data-theme="light"] .tabs {
border-bottom-color: var(--lm-border);
}
[data-theme="light"] .tab-btn {
color: var(--lm-text-soft);
background: transparent;
}
[data-theme="light"] .tab-btn:hover {
color: var(--neon);
}
[data-theme="light"] .tab-btn.active {
color: var(--neon);
border-bottom-color: var(--neon);
}
[data-theme="light"] .tab-content {
background: var(--lm-surface);
border: 1px solid var(--lm-border);
border-radius: 8px;
}
[data-theme="light"] .tab-content h3 {
color: var(--lm-text);
}
[data-theme="light"] .tab-content p,
[data-theme="light"] .tab-content li {
color: var(--lm-text-soft);
}
/* News card detail */
[data-theme="light"] .news-card {
background: var(--lm-surface);
}
[data-theme="light"] .news-card .info h4,
[data-theme="light"] .news-card h4 {
color: var(--lm-text);
}
[data-theme="light"] .news-card .info p,
[data-theme="light"] .news-card p {
color: var(--lm-text-soft);
}
[data-theme="light"] .news-card .date,
[data-theme="light"] .news-card .info .date {
color: var(--lm-text-mute);
}
/* News list pages (news/index.html) */
[data-theme="light"] .news-list,
[data-theme="light"] .articles-grid {
background: var(--lm-bg);
}
[data-theme="light"] .news-list-card,
[data-theme="light"] .article-card {
background: var(--lm-surface);
border: 1px solid var(--lm-border);
color: var(--lm-text);
}
[data-theme="light"] .news-list-card h3,
[data-theme="light"] .article-card h3 {
color: var(--lm-text);
}
[data-theme="light"] .news-list-card p,
[data-theme="light"] .article-card p {
color: var(--lm-text-soft);
}
/* Contact section info */
[data-theme="light"] .contact-info h2 {
color: var(--lm-text);
}
[data-theme="light"] .contact-info p,
[data-theme="light"] .contact-info .item,
[data-theme="light"] .contact-details .item,
[data-theme="light"] .contact-details {
color: var(--lm-text-soft);
}
[data-theme="light"] .contact-info .item .icon {
color: var(--neon);
}
/* AI section cards */
[data-theme="light"] .ai-section,
[data-theme="light"] .ai {
background: var(--lm-bg);
}
[data-theme="light"] .ai-card {
background: var(--lm-surface);
}
[data-theme="light"] .ai-card .ai-icon,
[data-theme="light"] .ai-icon {
background: rgba(15, 124, 138, 0.08);
color: var(--neon);
}
/* Buttons in light mode */
[data-theme="light"] .btn-outline {
color: var(--lm-text);
border-color: var(--lm-border);
}
[data-theme="light"] .btn-outline:hover {
border-color: var(--neon);
color: var(--neon);
box-shadow: 0 0 12px rgba(15, 124, 138, 0.15);
}
/* Hero region buttons stay light (white text + white border) because
the hero background remains dark in light mode. */
[data-theme="light"] .hero .btn-outline {
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.4) !important;
background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme="light"] .hero .btn-outline:hover {
color: var(--neon) !important;
border-color: var(--neon) !important;
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 0 20px rgba(0, 212, 255, 0.25) !important;
}
/* Pricing card stuff (pricing pages) */
[data-theme="light"] .pricing-page,
[data-theme="light"] .pricing-grid {
background: var(--lm-bg);
}
[data-theme="light"] .pricing-card ul li,
[data-theme="light"] .pricing-card .feature {
color: var(--lm-text-soft);
border-bottom-color: var(--lm-border);
}
/* Design-ex (portfolio) pages */
[data-theme="light"] .design-grid,
[data-theme="light"] .portfolio-page {
background: var(--lm-bg);
}
/* Catch-all for generic text utility classes used by Astro page sections */
[data-theme="light"] .section-title .accent {
background: linear-gradient(90deg, var(--neon), var(--gold));
}
/* Stats / numeric blocks (often used in pricing/about) */
[data-theme="light"] .stat-num,
[data-theme="light"] .stat .num {
color: var(--neon);
}
[data-theme="light"] .stat-label,
[data-theme="light"] .stat .label {
color: var(--lm-text-mute);
}
/* Subtle gradients used as section dividers */
[data-theme="light"] section + .section-divider,
[data-theme="light"] .section-divider {
background: linear-gradient(90deg, transparent, var(--lm-border), transparent);
}
/* In case reveal stays at opacity:0 in light, ensure visibility - fallback */
[data-theme="light"] .reveal:not(.visible) {
/* Keep the animation behavior but ensure no permanent white-on-white */
color: inherit;
}
/* ============================================================
News list page (news/index.html, news-th/index.html)
Note: These pages use Astro