/** * Design tokens — light theme default. * Dark mode: data-theme on , scope via data-theme-scope (full | partial). */ :root, [data-theme="light"] { color-scheme: light; /* Brand palette (raw) */ --palette-blue: #0540f2; --palette-blue-hover: #282c6b; --palette-blue-bright: #0554f2; --palette-blue-focus: #056cf2; --palette-blue-glow: #0540f266; --palette-midnight: #282c6b; --palette-midnight-deep: #152659; --palette-slate: #273882; --palette-steel: #2d87c6; --palette-teal: #026873; --palette-goldenrod: #febb00; --palette-tomato: #f25a38; --palette-green: green; --palette-green-dark: #005a00; /* Neutrals (light) */ --palette-black: #000000; --palette-white: #ffffff; --palette-white-soft: #fafafa; --palette-ghost-white: ghostwhite; --palette-alice-blue: aliceblue; --palette-apple-gray: #f2f2f7; --palette-azureish: #dbe9f4; --palette-dim-grey: #474747; --palette-body-muted: #6d6d6d; --palette-heading-dark: #150438; /* Neutrals (dark — standard gray scale) */ --palette-dark-0: #0d0d0d; --palette-dark-1: #121212; --palette-dark-2: #1a1a1a; --palette-dark-3: #242424; --palette-dark-4: #2e2e2e; --palette-dark-5: #3a3a3a; --palette-dark-text: #e8e8e8; --palette-dark-text-muted: #b0b0b0; --palette-dark-text-subtle: #8a8a8a; --palette-dark-border: #404040; /* Semantic colors */ --color-text: var(--palette-black); --color-text-muted: #000000cc; --color-text-subtle: #00000099; --color-text-faint: #00000099; --color-text-ghost: #000000cc; --color-text-on-dark: var(--palette-white); --color-text-on-hero: var(--palette-ghost-white); --color-text-accent: var(--palette-blue); --color-text-nav-current: var(--palette-blue-focus); --color-text-pricing-heading: var(--palette-midnight); --color-text-pricing-list: var(--palette-black); --color-bg-page: var(--palette-ghost-white); --color-bg-body-legacy: var(--palette-ghost-white); --color-bg-footer: var(--palette-alice-blue); --color-bg-nav: var(--palette-alice-blue); --color-bg-nav-transparent: transparent; --color-bg-surface: var(--palette-white); --color-bg-surface-muted: var(--palette-apple-gray); --color-bg-surface-accent: var(--palette-azureish); --color-bg-surface-hero-glass: #ffffff1a; --color-bg-card: var(--palette-white); --color-bg-hero-card: var(--palette-white); --color-bg-nav-menu-mobile: #ffffff1a; --color-bg-menu-open: transparent; --color-bg-nav-divider: var(--palette-white); --color-theme-toggle-track: #c8d0e0; --color-theme-toggle-border: #6b7588; --color-theme-toggle-thumb: var(--palette-white); --color-theme-toggle-icon: var(--palette-midnight-deep); --color-bg-nav-scrolled: var(--palette-alice-blue); --color-border-nav-scrolled: #0000000f; --color-border-default: #80808066; --color-border-subtle: #80808033; --color-border-light: #00000033; --color-border-hero: var(--palette-white); --color-border-nav-mobile: var(--palette-white); --color-border-divider: var(--palette-black); --color-border-footer-mobile: #c4c4c4; --color-border-transparent: transparent; --color-border-solid: var(--palette-black); --color-button-primary: var(--palette-blue); --color-button-primary-hover: var(--palette-blue-hover); --color-button-text: var(--palette-white); --color-focus-ring: var(--palette-blue-focus); --color-input-border: #cccccc; --color-input-bg: var(--palette-white); --color-input-text: #333333; --color-input-placeholder: #999999; /* Typography */ --font-family-base: "Montserrat Regular", Georgia, sans-serif; --font-family-bold: "Montserrat Bold", Georgia, sans-serif; /* Layout */ --container-max: 1200px; --container-narrow: 940px; --container-tablet: 728px; --bp-desktop: 992px; --bp-tablet-max: 991px; --bp-mobile-max: 767px; --bp-mobile-sm-max: 479px; --space-page-inline: clamp(1rem, 4vw, 2rem); --space-section-y: clamp(2.5rem, 6vw, 6.25rem); --space-grid-gap: 16px; --touch-target-min: 2.75rem; --text-hero: clamp(1.375rem, 2.25vw + 0.85rem, 3rem); --text-section-heading: clamp(1.25rem, 2.5vw + 0.5rem, 2rem); --text-prose-max: 65ch; --nav-drawer-max-height: min(22rem, calc(100dvh - 5rem)); --nav-drawer-link-leading: 1.35; --nav-drawer-blur: 24px; --nav-drawer-glass-saturate: 1.65; --color-nav-drawer-glass-bg: #ffffff2b; --color-nav-drawer-glass-border: #ffffff42; --shadow-nav-drawer-glass: 0 0.5rem 1.75rem #0000002e, inset 0 1px 0 #ffffff59; --color-nav-overlay-scrim: #00000026; --radius-button: 7px; --radius-button-hover: 20px; --radius-card: 10px; --radius-section: 20px; --shadow-pricing-feature: 0 0 10px var(--palette-blue-glow); --shadow-toggle-thumb: 0 1px 3px #00000033; /* Motion */ --ease-standard: cubic-bezier(0.165, 0.84, 0.44, 1); --duration-button: 0.3s; --duration-button-bg: 0.6s; --duration-reveal: 0.6s; --duration-social: 0.5s; --duration-theme-toggle: 0.25s; --duration-nav-drawer: 0.35s; /* Nav */ --nav-sticky-z: 10; --nav-overlay-z: 1000; --social-sidebar-z: 10; --lang-picker-z: 20; --color-lang-glass-bg: #ffffffbf; --color-lang-glass-border: #ffffffcc; --color-lang-glass-item-hover: #ffffff80; --shadow-lang-glass: 0 0.5rem 1.75rem #0000001f, inset 0 1px 0 #ffffffe6; --lang-glass-blur: 16px; } /* Shared dark semantic tokens (neutral grays) */ html[data-theme="dark"][data-theme-scope="full"], html[data-theme="dark"][data-theme-scope="partial"] .hero ~ *, html[data-theme="dark"][data-theme-scope="partial"] .aboutus ~ *, html[data-theme="dark"][data-theme-scope="partial"] .section-8.contact-page-hero { color-scheme: dark; --color-text: var(--palette-dark-text); --color-text-muted: var(--palette-dark-text-muted); --color-text-subtle: var(--palette-dark-text-subtle); --color-text-faint: var(--palette-dark-text-subtle); --color-text-ghost: var(--palette-dark-text-muted); --color-text-on-dark: var(--palette-dark-text); --color-text-accent: var(--palette-goldenrod); --color-text-nav-current: var(--palette-goldenrod); --color-text-pricing-heading: var(--palette-goldenrod); --color-text-pricing-list: var(--palette-dark-text-muted); --color-bg-page: var(--palette-dark-1); --color-bg-body-legacy: var(--palette-dark-1); --color-bg-footer: var(--palette-dark-2); --color-bg-nav: var(--palette-dark-2); --color-bg-surface: var(--palette-dark-2); --color-bg-surface-muted: var(--palette-dark-3); --color-bg-surface-accent: var(--palette-dark-4); --color-bg-surface-hero-glass: #ffffff14; --color-bg-card: var(--palette-dark-2); --color-bg-hero-card: var(--palette-dark-3); --color-bg-nav-menu-mobile: #ffffff14; --color-bg-nav-divider: var(--palette-dark-5); --color-theme-toggle-track: #3d3d3d; --color-theme-toggle-border: #6e6e6e; --color-theme-toggle-thumb: var(--palette-goldenrod); --color-theme-toggle-icon: #f0f0f0; --color-bg-nav-scrolled: #1a1a1ab8; --color-border-nav-scrolled: #ffffff1a; --color-border-default: #ffffff2e; --color-border-subtle: #ffffff1a; --color-border-light: #ffffff24; --color-border-divider: var(--palette-dark-border); --color-border-footer-mobile: var(--palette-dark-border); --color-border-solid: var(--palette-dark-border); --color-button-primary-hover: var(--palette-blue-bright); --color-input-border: var(--palette-dark-border); --color-input-bg: var(--palette-dark-3); --color-input-text: var(--palette-dark-text); --color-input-placeholder: var(--palette-dark-text-subtle); --shadow-pricing-feature: 0 0 10px #0554f240; --shadow-toggle-thumb: 0 1px 4px #00000080; --color-nav-drawer-glass-bg: #ffffff18; --color-nav-drawer-glass-border: #ffffff28; --shadow-nav-drawer-glass: 0 0.5rem 1.75rem #00000055, inset 0 1px 0 #ffffff24; --color-lang-glass-bg: #ffffff24; --color-lang-glass-border: #ffffff38; --color-lang-glass-item-hover: #ffffff1f; --shadow-lang-glass: 0 0.5rem 1.75rem #00000066, inset 0 1px 0 #ffffff2e; } /* Hero / contact top photo scrim (dark mode only) */ html[data-theme="dark"] { --color-hero-scrim: rgba(0, 0, 0, 0.48); } /* Partial: light chrome on hero blocks only */ html[data-theme="dark"][data-theme-scope="partial"] { color-scheme: light; } html[data-theme="dark"][data-theme-scope="partial"] .body { background-color: var(--palette-dark-1); } /* Partial + dark: light nav over hero only (not when scrolled) */ html[data-theme="dark"][data-theme-scope="partial"] .site-nav.navbar.transparent:not(.is-scrolled) { --color-bg-nav-scrolled: var(--palette-alice-blue); --color-text: var(--palette-black); --color-text-nav-current: var(--palette-blue-focus); --color-border-default: #ffffff66; --color-bg-nav-divider: var(--palette-white); } /* Partial + dark + scrolled: dark glass (same as full dark), amber current link */ html[data-theme="dark"][data-theme-scope="partial"] .site-nav.navbar.transparent.is-scrolled { --color-text: var(--palette-dark-text); --color-text-nav-current: var(--palette-goldenrod); --color-bg-nav-scrolled: #1a1a1ab8; --color-border-nav-scrolled: #ffffff1a; --color-bg-nav-divider: var(--palette-dark-5); } @media (prefers-reduced-motion: reduce) { :root { --duration-button: 0.01ms; --duration-button-bg: 0.01ms; --duration-reveal: 0.01ms; --duration-social: 0.01ms; --duration-theme-toggle: 0.01ms; --duration-nav-drawer: 0.01ms; } }