/* ============================================================ Soulard Electrical – site.css Three color schemes driven entirely by CSS custom properties. To activate a scheme, set data-theme on : ← default No views need to change. Swap the attribute in _Layout.cshtml or via JavaScript when you add a toggle later. ============================================================ */ /* ------------------------------------------------------------ ORIGINAL site.css – preserved ------------------------------------------------------------ */ html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } /* Focus ring – accessibility */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } /* Ensure html is at least full viewport height */ html { position: relative; min-height: 100%; } /* Space for fixed/absolute footer (original) – overridden below by the flexbox layout which removes the need for this */ body { margin-bottom: 60px; } /* ------------------------------------------------------------ 1. SCHEME: Professional / Corporate (DEFAULT) Navy · White · Cool Grey ------------------------------------------------------------ */ :root, [data-theme="professional"] { /* Brand */ --color-primary: #1B3A6B; /* navy */ --color-primary-hover: #14305A; --color-primary-text: #FFFFFF; --color-secondary: #5A7FA8; /* slate blue */ --color-secondary-hover: #4A6F98; --color-secondary-text: #FFFFFF; --color-accent: #848484; /* med gray accent */ /* Surface */ --color-bg: #F5F7FA; --color-surface: #FFFFFF; --color-surface-alt: #EDF1F7; /* cards, zebra rows */ --color-border: #D0D9E8; /* Text */ --color-text: #1A2233; --color-text-muted: #5C6A80; --color-text-inverse: #FFFFFF; /* Nav */ --color-nav-bg: #FFFFFF; --color-nav-border: #D0D9E8; --color-nav-brand: #1B3A6B; --color-nav-link: #1B3A6B; --color-nav-link-hover: #848484; /* Footer */ --color-footer-bg: #F5F7FA; /* light grey */ --color-footer-text: #3D4F6B; /* medium navy-grey */ --color-footer-link: #1B3A6B; /* navy – 7.2:1 on #F5F7FA ✓ */ /* Feedback */ --color-success: #1E7A4A; --color-danger: #C0392B; /* Shadows */ --shadow-card: 0 2px 8px rgba(27, 58, 107, 0.10); --shadow-nav: 0 2px 6px rgba(27, 58, 107, 0.08); } /* ------------------------------------------------------------ 2. SCHEME: Bold / Modern Deep Charcoal · Electric Blue · White ------------------------------------------------------------ */ [data-theme="bold"] { /* Brand */ --color-primary: #0057FF; /* electric blue */ --color-primary-hover: #0044CC; --color-primary-text: #FFFFFF; --color-secondary: #00C2CB; /* cyan */ --color-secondary-hover: #00A8B0; --color-secondary-text: #0D0D0D; --color-accent: #FF3D57; /* vivid red accent */ /* Surface */ --color-bg: #111318; /* near-black */ --color-surface: #1C1F26; /* charcoal card */ --color-surface-alt: #22262F; --color-border: #2E333E; /* Text */ --color-text: #E8EAF0; --color-text-muted: #7A8299; --color-text-inverse: #0D0D0D; /* Nav */ --color-nav-bg: #1C1F26; --color-nav-border: #2E333E; --color-nav-brand: #0057FF; --color-nav-link: #E8EAF0; --color-nav-link-hover: #0057FF; /* Footer */ --color-footer-bg: #0D0F13; --color-footer-text: #A0A8BC; /* lightened from #7A8299 for better contrast */ --color-footer-link: #5BA4FF; /* lightened blue – 5.8:1 on #0D0F13 ✓ */ /* Feedback */ --color-success: #00C48C; --color-danger: #FF3D57; /* Shadows */ --shadow-card: 0 4px 20px rgba(0, 87, 255, 0.15); --shadow-nav: 0 2px 12px rgba(0, 0, 0, 0.40); } /* ------------------------------------------------------------ 3. SCHEME: Dark Mode Near-black · Soft white · Purple-tinted accents ------------------------------------------------------------ */ [data-theme="dark"] { /* Brand */ --color-primary: #7C9EFF; /* soft periwinkle */ --color-primary-hover: #6080EE; --color-primary-text: #0D0D14; --color-secondary: #A78BFA; /* soft violet */ --color-secondary-hover: #9070E8; --color-secondary-text: #0D0D14; --color-accent: #F59E0B; /* warm amber */ /* Surface */ --color-bg: #0D0D14; --color-surface: #16161F; --color-surface-alt: #1E1E2A; --color-border: #2A2A3A; /* Text */ --color-text: #E2E4EE; --color-text-muted: #6B6E84; --color-text-inverse: #0D0D14; /* Nav */ --color-nav-bg: #16161F; --color-nav-border: #2A2A3A; --color-nav-brand: #7C9EFF; --color-nav-link: #C8CADC; --color-nav-link-hover: #7C9EFF; /* Footer */ --color-footer-bg: #0A0A10; --color-footer-text: #8E91AA; /* lightened from #6B6E84 for better contrast */ --color-footer-link: #A8BEFF; /* lightened periwinkle – 7.1:1 on #0A0A10 ✓ */ /* Feedback */ --color-success: #34D399; --color-danger: #F87171; /* Shadows */ --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.50); --shadow-nav: 0 2px 8px rgba(0, 0, 0, 0.60); } /* ============================================================ BASE STYLES – consume the variables above All components use var(--color-*) exclusively so they automatically adapt to whichever scheme is active. ============================================================ */ /* --- Focus ring (theme-aware override of original rule) ----- */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--color-surface), 0 0 0 0.25rem var(--color-primary); } /* --- Page foundation ---------------------------------------- */ html, body { height: 100%; margin: 0; } body { display: flex; flex-direction: column; min-height: 100vh; background-color: var(--color-bg); color: var(--color-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; transition: background-color 0.25s ease, color 0.25s ease; } .page-content { flex: 1 0 auto; } /* --- Links -------------------------------------------------- */ a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-hover); text-decoration: underline; } /* --- Navbar ------------------------------------------------- */ .navbar { background-color: var(--color-nav-bg) !important; border-bottom-color: var(--color-nav-border) !important; box-shadow: var(--shadow-nav); } .navbar-brand { color: var(--color-nav-brand) !important; font-weight: 700; font-size: 1.25rem; } .navbar-brand:hover { color: var(--color-accent) !important; } .nav-link { color: var(--color-nav-link) !important; } .nav-link:hover { color: var(--color-nav-link-hover) !important; } /* --- Footer ------------------------------------------------- */ footer.site-footer { flex-shrink: 0; background-color: var(--color-footer-bg) !important; color: var(--color-footer-text) !important; padding: 1.25rem 1rem; text-align: center; font-size: 0.875rem; border-top: 1px solid var(--color-border) !important; /* subtle separator */ } footer.site-footer a { color: var(--color-footer-link) !important; text-decoration: underline; text-underline-offset: 3px; } footer.site-footer a:hover { color: var(--color-accent) !important; text-decoration: underline; } /* --- Cards -------------------------------------------------- */ .card { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; box-shadow: var(--shadow-card); transition: transform 0.15s ease, box-shadow 0.15s ease; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card), 0 4px 12px rgba(0,0,0,0.08); } .card-title { color: var(--color-text) !important; } .card-text { color: var(--color-text-muted) !important; } /* --- Buttons ----------------------------------------------- */ .btn-primary { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; color: var(--color-primary-text) !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--color-primary-hover) !important; border-color: var(--color-primary-hover) !important; } .btn-outline-primary { color: var(--color-primary) !important; border-color: var(--color-primary) !important; } .btn-outline-primary:hover { background-color: var(--color-primary) !important; color: var(--color-primary-text) !important; } .btn-outline-secondary { color: var(--color-text-muted) !important; border-color: var(--color-border) !important; } .btn-outline-secondary:hover { background-color: var(--color-surface-alt) !important; color: var(--color-text) !important; } /* --- Sections (hero, services, contact) -------------------- */ .hero { background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); } .hero h1 { color: var(--color-text); } .hero .lead { color: var(--color-text-muted); } .services { background-color: var(--color-surface-alt) !important; } .services h2, .contact h2 { color: var(--color-text); } .contact { background-color: var(--color-surface); border-top: 1px solid var(--color-border); padding-top: 2rem !important; padding-bottom: 2rem !important; } /* --- Forms (Contact page) ---------------------------------- */ .form-label { color: var(--color-text); } .form-control, .form-select { background-color: var(--color-surface-alt) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } .form-control:focus, .form-select:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 0.2rem rgba(var(--color-primary), 0.15) !important; background-color: var(--color-surface) !important; } .form-control::placeholder { color: var(--color-text-muted) !important; opacity: 0.7; } .form-check-input:checked { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; } .form-check-label { color: var(--color-text); } /* --- Alerts ------------------------------------------------- */ .alert-success { background-color: var(--color-success); border-color: var(--color-success); color: #fff; } .alert-danger { background-color: var(--color-danger); border-color: var(--color-danger); color: #fff; } /* --- Text utilities ---------------------------------------- */ .text-muted { color: var(--color-text-muted) !important; } /* --- Contact logo ------------------------------------------ */ .contact-logo { width: auto; height: 160px; display: block; margin: 0 auto 0.1rem; } @@media (max-width: 576px) { .contact-logo { height: 120px; } } /* --- Partners ---------------------------------------------- */ .partners { background-color: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .partners h2 { color: var(--color-text); } .partner-card { background-color: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--bs-border-radius-lg, 0.5rem); transition: transform 0.15s ease, box-shadow 0.15s ease; height: 100%; } .partner-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); } .partner-logo { max-height: 64px; width: 100%; max-width: 160px; object-fit: contain; display: block; margin: 0 auto; filter: grayscale(20%); transition: filter 0.2s ease; } .partner-card:hover .partner-logo { filter: grayscale(0%); } .partner-name { font-weight: 600; font-size: 0.95rem; color: var(--color-text); } .partner-desc { color: var(--color-text-muted); } /* --- Responsive tweaks ------------------------------------- */ @media (max-width: 576px) { .navbar-brand { font-size: 1rem; } .hero { padding-top: 2rem; padding-bottom: 2rem; } .display-6 { font-size: 1.5rem; } }