Leon-in
95eb362bfc
QuantumLab template converted to Next.js 16 + React 19 + TypeScript: - 8 page routes (home, about, blog, contact, careers, team-members, coming-soon, 404) - Dynamic routes for blog posts, career positions, and team members - GSAP animations (marquee, counters, button hovers) - IntersectionObserver-based scroll reveal (blur-to-clear transitions) - Dark mode with next-themes - React Hook Form + Zod contact form - Framer Motion page transitions - Lottie animations via lottie-web Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
93 lines
1.9 KiB
CSS
93 lines
1.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Webflow base resets are in webflow.css */
|
|
|
|
/* Dark mode: override Webflow CSS variables */
|
|
.dark {
|
|
--core--colors--neutral--800: #f5f5f5;
|
|
--core--colors--neutral--700: #e0e0e0;
|
|
--core--colors--neutral--600: #a0a0a0;
|
|
--core--colors--neutral--500: #707070;
|
|
--core--colors--neutral--400: #2a2a2a;
|
|
--core--colors--neutral--300: #1e1e1e;
|
|
--core--colors--neutral--200: #161616;
|
|
--core--colors--neutral--100: #0d0d0d;
|
|
--font--colors--title: var(--core--colors--neutral--800);
|
|
--font--colors--paragraph: var(--core--colors--neutral--600);
|
|
}
|
|
|
|
.dark body,
|
|
.dark .page-wrapper {
|
|
background-color: #0d0d0d;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.dark .section-small,
|
|
.dark .section,
|
|
.dark .hero-v1-grid-wrapper,
|
|
.dark .cta-section:not(.v4) {
|
|
background-color: #0d0d0d;
|
|
}
|
|
|
|
.dark .border-wrapper,
|
|
.dark .corner-gradient-container:not(.row) {
|
|
background-color: #141414;
|
|
}
|
|
|
|
.dark .input:not(.dark-mode) {
|
|
background-color: #1a1a1a;
|
|
border-color: #2a2a2a;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.dark .input:not(.dark-mode)::placeholder {
|
|
color: #666;
|
|
}
|
|
|
|
.dark .header-wrapper,
|
|
.dark .header-wrapper---absolute {
|
|
background-color: rgba(13, 13, 13, 0.9);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.dark .link .link-text {
|
|
color: #d0d0d0;
|
|
}
|
|
|
|
.dark .footer-wrapper {
|
|
background-color: #0a0a0a;
|
|
}
|
|
|
|
/* Show/hide elements based on theme */
|
|
.show-dark-mode {
|
|
display: none;
|
|
}
|
|
|
|
.dark .show-dark-mode {
|
|
display: block;
|
|
}
|
|
|
|
.dark .show-light-mode {
|
|
display: none;
|
|
}
|
|
|
|
/* Theme toggle button */
|
|
.theme-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--core--colors--neutral--400);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
color: var(--core--colors--neutral--700);
|
|
transition: background-color 0.2s, color 0.2s;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
background-color: var(--core--colors--neutral--300);
|
|
}
|
|
|