/* MORVIC light/dark theme — use with theme-toggle.js and data-theme on */ :root { --navy: #0D2137; --blue: #1B3A5C; --blue-l: #2A5580; --page-bg: #080F18; --surface-1: #0D2137; --surface-2: #080F18; --surface-muted: rgba(13, 33, 55, 0.4); --surface-muted-2: rgba(13, 33, 55, 0.5); --surface-muted-3: rgba(13, 33, 55, 0.6); --surface-dark-soft: rgba(8, 15, 24, 0.8); --text: #F4F1EC; --text-soft: #C8C4BC; --muted: #6B7280; --orange: #E8670A; --orange-hover: #F58C3A; --btn-on-accent: #080F18; --border: rgba(42, 85, 128, 0.35); --border-soft: rgba(42, 85, 128, 0.25); --border-softer: rgba(42, 85, 128, 0.2); --border-muted: rgba(42, 85, 128, 0.15); --border-orange-glow: rgba(232, 103, 10, 0.5); --nav-scrim: rgba(8, 15, 24, 0.97); --grid-line: rgba(42, 85, 128, 0.05); --divider: rgba(42, 85, 128, 0.4); --divider-footer: rgba(42, 85, 128, 0.2); --tag-border: rgba(107, 114, 128, 0.3); --ghost-border: rgba(244, 241, 236, 0.25); --form-bg: rgba(13, 33, 55, 0.6); --signal-border: rgba(42, 85, 128, 0.3); --dev-title: rgba(244, 241, 236, 0.5); --voice-dont-bg: rgba(8, 15, 24, 0.8); --prod-hover: rgba(232, 103, 10, 0.5); /* Card stack — overridden in light theme below */ --card-fill: #0D2137; --card-fill-deep: #080F18; --card-border: rgba(42, 85, 128, 0.35); --card-border-soft: rgba(42, 85, 128, 0.25); --card-border-softer: rgba(42, 85, 128, 0.2); --card-text: #F4F1EC; --card-text-soft: #C8C4BC; --card-text-muted: #6B7280; --card-dev-title: rgba(244, 241, 236, 0.5); --footer-bg: #080F18; } @media (prefers-color-scheme: light) { html:not([data-theme="dark"]) { --page-bg: #F5F3EF; --surface-1: #ECEAE6; --text: #0D2137; --text-soft: #3d4f66; --muted: #5a6577; --orange: #E8621A; --orange-hover: #ea9348; --btn-on-accent: #0D2137; --border: rgba(13, 33, 55, 0.28); --border-soft: rgba(13, 33, 55, 0.22); --border-softer: rgba(13, 33, 55, 0.18); --border-muted: rgba(13, 33, 55, 0.12); --border-orange-glow: rgba(232, 98, 26, 0.55); --nav-scrim: rgba(245, 243, 239, 0.96); --grid-line: rgba(13, 33, 55, 0.07); --divider: rgba(13, 33, 55, 0.22); --divider-footer: rgba(13, 33, 55, 0.18); --ghost-border: rgba(13, 33, 55, 0.22); --form-bg: rgba(255, 255, 255, 0.75); --prod-hover: rgba(232, 98, 26, 0.45); --footer-bg: #E0DED9; --card-fill: #ffffff; --card-fill-deep: #f5f3ef; --card-border: rgba(13, 33, 55, 0.14); --card-border-soft: rgba(13, 33, 55, 0.1); --card-border-softer: rgba(13, 33, 55, 0.08); --card-text: #0d2137; --card-text-soft: #3d4f66; --card-text-muted: #5a6577; --card-dev-title: rgba(13, 33, 55, 0.45); } } html[data-theme="light"] { --page-bg: #F5F3EF; --surface-1: #ECEAE6; --text: #0D2137; --text-soft: #3d4f66; --muted: #5a6577; --orange: #E8621A; --orange-hover: #ea9348; --btn-on-accent: #0D2137; --border: rgba(13, 33, 55, 0.28); --border-soft: rgba(13, 33, 55, 0.22); --border-softer: rgba(13, 33, 55, 0.18); --border-muted: rgba(13, 33, 55, 0.12); --border-orange-glow: rgba(232, 98, 26, 0.55); --nav-scrim: rgba(245, 243, 239, 0.96); --grid-line: rgba(13, 33, 55, 0.07); --divider: rgba(13, 33, 55, 0.22); --divider-footer: rgba(13, 33, 55, 0.18); --ghost-border: rgba(13, 33, 55, 0.22); --form-bg: rgba(255, 255, 255, 0.75); --prod-hover: rgba(232, 98, 26, 0.45); --footer-bg: #E0DED9; --card-fill: #ffffff; --card-fill-deep: #f5f3ef; --card-border: rgba(13, 33, 55, 0.14); --card-border-soft: rgba(13, 33, 55, 0.1); --card-border-softer: rgba(13, 33, 55, 0.08); --card-text: #0d2137; --card-text-soft: #3d4f66; --card-text-muted: #5a6577; --card-dev-title: rgba(13, 33, 55, 0.45); } html[data-theme="dark"] { --page-bg: #080F18; --surface-1: #0D2137; --surface-2: #080F18; --surface-muted: rgba(13, 33, 55, 0.4); --surface-muted-2: rgba(13, 33, 55, 0.5); --surface-muted-3: rgba(13, 33, 55, 0.6); --surface-dark-soft: rgba(8, 15, 24, 0.8); --text: #F4F1EC; --text-soft: #C8C4BC; --muted: #6B7280; --orange: #E8670A; --orange-hover: #F58C3A; --btn-on-accent: #080F18; --border: rgba(42, 85, 128, 0.35); --border-soft: rgba(42, 85, 128, 0.25); --border-softer: rgba(42, 85, 128, 0.2); --border-muted: rgba(42, 85, 128, 0.15); --border-orange-glow: rgba(232, 103, 10, 0.5); --nav-scrim: rgba(8, 15, 24, 0.97); --grid-line: rgba(42, 85, 128, 0.05); --divider: rgba(42, 85, 128, 0.4); --divider-footer: rgba(42, 85, 128, 0.2); --tag-border: rgba(107, 114, 128, 0.3); --ghost-border: rgba(244, 241, 236, 0.25); --form-bg: rgba(13, 33, 55, 0.6); --signal-border: rgba(42, 85, 128, 0.3); --dev-title: rgba(244, 241, 236, 0.5); --voice-dont-bg: rgba(8, 15, 24, 0.8); --prod-hover: rgba(232, 103, 10, 0.5); --footer-bg: #080F18; } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--orange); border-radius: 2px; background: transparent; color: var(--orange); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .theme-toggle:hover { background: var(--orange); color: var(--btn-on-accent); } .theme-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .theme-icon { display: none; } .theme-toggle:not(.theme-is-light) .theme-icon-sun { display: block; } .theme-toggle.theme-is-light .theme-icon-moon { display: block; } /* Light mode: hide grid; solid hero + full-width sections (opaque, no pattern bleed) */ @media (prefers-color-scheme: light) { html:not([data-theme="dark"]) .grid-texture { display: none !important; } html:not([data-theme="dark"]) body { background-color: #F5F3EF; } html:not([data-theme="dark"]) .hero { background-color: #F5F3EF; } html:not([data-theme="dark"]) nav { background: linear-gradient(to bottom, rgba(245, 243, 239, 0.995), #F5F3EF); } html:not([data-theme="dark"]) #services, html:not([data-theme="dark"]) #contact { background-color: #ECEAE6; } html:not([data-theme="dark"]) .page-header { background-color: #F5F3EF; } html:not([data-theme="dark"]) .demos-section { background-color: #F5F3EF; } html:not([data-theme="dark"]) .cta-strip { background-color: #ECEAE6; } html:not([data-theme="dark"]) .cover { background-color: #F5F3EF; } html:not([data-theme="dark"]) #colour { background-color: #F5F3EF; } html:not([data-theme="dark"]) #typography { background-color: #ECEAE6; } html:not([data-theme="dark"]) #logo { background-color: #F5F3EF; } html:not([data-theme="dark"]) #tagline { background-color: #ECEAE6; } html:not([data-theme="dark"]) #identity { background-color: #F5F3EF; } } html[data-theme="light"] .grid-texture { display: none !important; } html[data-theme="light"] body { background-color: #F5F3EF; } html[data-theme="light"] .hero { background-color: #F5F3EF; } html[data-theme="light"] nav { background: linear-gradient(to bottom, rgba(245, 243, 239, 0.995), #F5F3EF); } html[data-theme="light"] #services, html[data-theme="light"] #contact { background-color: #ECEAE6; } html[data-theme="light"] .page-header { background-color: #F5F3EF; } html[data-theme="light"] .demos-section { background-color: #F5F3EF; } html[data-theme="light"] .cta-strip { background-color: #ECEAE6; } html[data-theme="light"] .cover { background-color: #F5F3EF; } html[data-theme="light"] #colour { background-color: #F5F3EF; } html[data-theme="light"] #typography { background-color: #ECEAE6; } html[data-theme="light"] #logo { background-color: #F5F3EF; } html[data-theme="light"] #tagline { background-color: #ECEAE6; } html[data-theme="light"] #identity { background-color: #F5F3EF; } /* 6px radius — cards, contact form shell, fields (all pages, light + dark) */ .service-card, .prod-card, .dev-card, .signal-received, .type-card, .tagline-alt, .voice-card.do, .voice-card.dont, .identity-item, .name-origin, .contact-form, .form-input, .form-textarea { border-radius: 6px; }