dalcode-website/app/globals.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);
  --font--colors--title-dm: #f5f5f5;
  --font--colors--paragraph-dm: #b0b0b0;
}

.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;
}

/* Header */
.dark .header-wrapper,
.dark .header-wrapper---absolute {
  background-color: rgba(13, 13, 13, 0.9);
  backdrop-filter: blur(12px);
}

.dark .w-nav-link,
.dark .w-dropdown-btn,
.dark .w-dropdown-toggle,
.dark .w-dropdown-link {
  color: #e0e0e0;
}

.dark .link .link-text {
  color: #d0d0d0;
}

/* Footer */
.dark .footer-wrapper {
  background-color: #0a0a0a;
}

.dark .footer-link {
  color: #b0b0b0;
  border-bottom-color: #2a2a2a;
}

.dark .footer-link:hover {
  color: #f5f5f5;
}

.dark .footer-top,
.dark .footer-middle,
.dark .footer-links-wrapper,
.dark .footer-bottom {
  border-color: #2a2a2a;
}

.dark .footer-logo-wrapper {
  border-color: #2a2a2a;
}

.dark .footer-button {
  border-color: #2a2a2a;
  color: #f5f5f5;
}

.dark .footer-link-bg {
  background-color: #2a2a2a;
}

.dark .footer-contact-link-icon-wrapper {
  border-color: #2a2a2a;
}

.dark .footer-contact-link-bg {
  background-color: #1e1e1e;
}

.dark .text-color-neutral-400 {
  color: #707070;
}

.dark .icon-40px---dark-mode {
  background-color: #1e1e1e;
  color: #f5f5f5;
}

.dark .link-square-icon-left---dark-mode {
  color: #f5f5f5;
}

.dark .text-link {
  color: #f5f5f5;
}

.dark .text-link:hover {
  color: #a0a0a0;
}

/* Cards */
.dark .card {
  background-color: #141414;
  border-color: #2a2a2a;
}

.dark .card.contact-card-v1 {
  border-color: #2a2a2a;
}

.dark .contact-link-text {
  color: var(--font--colors--title) !important;
}

.dark .contact-card-link-bg {
  background-color: #2a2a2a;
}

.dark .contact-card-v1-link-wrapper {
  border-color: #2a2a2a;
}

/* CTA sections */
.dark .cta-section {
  background-color: #0d0d0d;
}

/* Tab links */
.dark .w-tab-link {
  color: #e0e0e0;
  background-color: #1e1e1e;
}

.dark .w-tab-link.w--current {
  background-color: #2a2a2a;
}

/* Section backgrounds */
.dark .section.bg-neutral,
.dark .section-small.bg-neutral {
  background-color: #111;
}

.dark .bg-neutral-100 {
  background-color: #0d0d0d;
}

.dark .bg-neutral-200 {
  background-color: #141414;
}

.dark .bg-neutral-300 {
  background-color: #1a1a1a;
}

/* Accordion & misc cards */
.dark .card.accordion-card-v1,
.dark .card.accordion-card-v2,
.dark .card.accordin-card-v3 {
  background-color: #141414;
}

.dark .card.accordion-card-v2:hover,
.dark .card.accordin-card-v3:hover {
  background-color: #1e1e1e;
}

/* Blog cards */
.dark .blog-card-v1 {
  border-color: #2a2a2a;
}

/* Blockquote */
.dark blockquote {
  background-color: #1e1e1e;
  color: #f5f5f5;
}

/* Notification bar */
.dark .notification-bar {
  background-color: #1e1e1e;
  color: #f5f5f5;
}

/* Primary button: in dark mode, bg becomes light (#f5f5f5) via variable inversion,
   so text must be dark for contrast */
.dark .primary-button {
  color: #0d0d0d;
  border-color: #2a2a2a;
}

.dark .primary-button:hover {
  color: #0d0d0d;
}

.dark .primary-button .button-icon-wrapper svg {
  color: #0d0d0d;
}

.dark .primary-button .button-icon-bg {
  background-color: #1a1a1a;
}

.dark .primary-button .button-icon-bg-inside {
  background-color: #2a2a2a;
}

/* Badge */
.dark .badge {
  background-color: #1e1e1e;
}

/* SVG icons inherit currentColor — ensure parent elements are visible */
.dark .footer-link-icon {
  color: #707070;
}

/* Contact page hover backgrounds */
.dark .contact-icon-bg {
  background-color: #2a2a2a;
}

.dark .contact-card-link-bg {
  background-color: #2a2a2a;
}

/* Newsletter input in dark mode */
.dark .input.dark-mode {
  background-color: #1a1a1a;
  border-color: #333;
  color: #f5f5f5;
}

.dark .input.dark-mode:hover,
.dark .input.dark-mode:focus {
  background-color: #222;
  border-color: #444;
}

.dark .input.dark-mode::placeholder {
  color: #666;
}

.dark .form-button.inside-input.dark-mode {
  background-color: #f5f5f5;
  color: #0d0d0d;
}

/* Dropdown menu */
.dark .w-dropdown-list {
  background-color: #1e1e1e;
}

.dark [data-nav-menu-open] {
  background-color: #1e1e1e;
}

/* Gradient overlays — use dark base */
.dark .hero-v1-bg-gradient,
.dark .about-section-gradient {
  background-image: none;
}

/* 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);
}

/* Careers page — positions list */
.positions-list-wrapper {
  display: flex;
  flex-direction: column;
}

.position-item {
  display: flex !important;
  align-items: center;
  padding: 24px 28px;
  text-decoration: none;
  border-bottom: 1px solid var(--core--colors--neutral--300);
  transition: background-color 0.2s;
}

.position-item:last-child {
  border-bottom: none;
}

.position-item:hover {
  background-color: var(--core--colors--neutral--200);
}

.dark .position-item:hover {
  background-color: #1a1a1a;
}

.position-item-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 24px;
}

.position-info {
  flex: 1;
}

.position-details {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* Locale switcher */
.locale-switcher {
  position: relative;
  margin-left: 8px;
}

.locale-switcher-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--core--colors--neutral--400);
  background: transparent;
  cursor: pointer;
  color: var(--core--colors--neutral--700);
  font-size: 0.8rem;
  font-weight: 500;
  transition: background-color 0.2s;
}

.locale-switcher-trigger:hover {
  background-color: var(--core--colors--neutral--300);
}

.locale-switcher-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 80px;
  border: 1px solid var(--core--colors--neutral--400);
  border-radius: 8px;
  background: var(--core--colors--neutral--100);
  z-index: 100;
  overflow: hidden;
}

.dark .locale-switcher-dropdown {
  background: #1e1e1e;
}

.locale-switcher-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--font--colors--paragraph);
  text-align: left;
  transition: background-color 0.15s;
}

.locale-switcher-option:hover {
  background-color: var(--core--colors--neutral--300);
}

.dark .locale-switcher-option:hover {
  background-color: #2a2a2a;
}

.locale-switcher-option.active {
  font-weight: 600;
}