/* ========================================================================== Hartman Walsh Industrial Services — Unified Site Theme Single stylesheet used across all pages: modern, responsive, and automatically light/dark themed via prefers-color-scheme. ========================================================================== */ :root { --hw-orange: #f7a600; --hw-orange-dark: #c98600; --hw-bg: #ffffff; --hw-bg-alt: #f7f7f8; --hw-surface: #ffffff; --hw-text: #222222; --hw-muted: #666666; --hw-border: #e0e0e0; --hw-link: #10441b; --hw-link-hover: #c98600; --hw-danger-bg: #fdecea; --hw-danger-text: #7a1f1f; --hw-danger-border: #f3b4b0; --hw-success-bg: #e9f7ee; --hw-success-text: #16532c; --hw-success-border: #a9dcb8; --font-main: "Helvetica Neue", Arial, Verdana, sans-serif; --radius: 8px; --shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } @media (prefers-color-scheme: dark) { :root { --hw-bg: #14161a; --hw-bg-alt: #1c1f24; --hw-surface: #20242a; --hw-text: #e8e8e8; --hw-muted: #a3a3a3; --hw-border: #33383f; --hw-link: #f7a600; --hw-link-hover: #ffc247; --hw-danger-bg: #3a1f1f; --hw-danger-text: #f5b3ae; --hw-danger-border: #6b2b2b; --hw-success-bg: #16321f; --hw-success-text: #9fe0b6; --hw-success-border: #285d3a; --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } } /* ------------------ Manual theme override (for testing) ------------------ Setting data-theme="light" or data-theme="dark" on forces a theme regardless of the OS prefers-color-scheme setting. See js/theme-switch.js. Attribute selectors below have higher specificity than the plain :root used in the media query above, so they always win when present. */ :root[data-theme="dark"] { --hw-bg: #14161a; --hw-bg-alt: #1c1f24; --hw-surface: #20242a; --hw-text: #e8e8e8; --hw-muted: #a3a3a3; --hw-border: #33383f; --hw-link: #f7a600; --hw-link-hover: #ffc247; --hw-danger-bg: #3a1f1f; --hw-danger-text: #f5b3ae; --hw-danger-border: #6b2b2b; --hw-success-bg: #16321f; --hw-success-text: #9fe0b6; --hw-success-border: #285d3a; --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } :root[data-theme="light"] { --hw-bg: #ffffff; --hw-bg-alt: #f7f7f8; --hw-surface: #ffffff; --hw-text: #222222; --hw-muted: #666666; --hw-border: #e0e0e0; --hw-link: #10441b; --hw-link-hover: #c98600; --hw-danger-bg: #fdecea; --hw-danger-text: #7a1f1f; --hw-danger-border: #f3b4b0; --hw-success-bg: #e9f7ee; --hw-success-text: #16532c; --hw-success-border: #a9dcb8; --shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* ---------------------------- Reset / Base ---------------------------- */ * { box-sizing: border-box; } html { height: 100%; } body { margin: 0; min-height: 100%; font-family: var(--font-main); font-size: 17px; line-height: 1.6; color: var(--hw-text); background: var(--hw-bg); } img { max-width: 100%; height: auto; } a { color: var(--hw-link); text-decoration: none; outline: none; } a:hover { color: var(--hw-link-hover); text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-main); color: var(--hw-text); font-weight: 700; margin: 0 0 0.6rem 0; } h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.3rem; margin-top: 2rem; } h4 { font-size: 1.1rem; margin-top: 1.5rem; } p, ul, ol { font-size: 1rem; line-height: 1.6; margin: 0 0 1rem 0; } ul, ol { padding-left: 1.25rem; } hr { border: none; border-top: 1px solid var(--hw-border); margin: 2rem 0; } /* ------------------------------ Layout --------------------------------- */ .container { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 1.25rem; } .site-header { padding: 1.25rem 0; border-bottom: 4px solid var(--hw-orange); background: var(--hw-surface); } .site-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; } .site-title { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.02em; } .site-title a { color: var(--hw-text); } .site-title a:hover { color: var(--hw-orange); text-decoration: none; } /* ------------------------- Standard site logo/header ------------------- */ .site-logo-link { display: inline-flex; align-items: center; line-height: 0; } .site-logo { display: block; height: 42px; width: auto; } .site-logo.logo-dark { display: none; } @media (prefers-color-scheme: dark) { .site-logo.logo-light { display: none; } .site-logo.logo-dark { display: block; } } :root[data-theme="dark"] .site-logo.logo-light { display: none; } :root[data-theme="dark"] .site-logo.logo-dark { display: block; } :root[data-theme="light"] .site-logo.logo-light { display: block; } :root[data-theme="light"] .site-logo.logo-dark { display: none; } .site-contact { font-size: 0.8rem; line-height: 1.4; color: var(--hw-muted); text-align: right; white-space: nowrap; } .site-contact .site-contact-row { display: flex; gap: 0.4em; justify-content: flex-end; } .site-contact .site-contact-label { font-weight: 700; color: var(--hw-text); } .page-title { margin-top: 2rem; font-size: 1.8rem; font-weight: 700; } .layout { display: flex; flex-wrap: wrap; gap: 1.5rem; max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem 1.25rem; } .layout .content, #content { flex: 1 1 600px; min-width: 0; } /* --------------------------- Navigation -------------------------------- */ #main_nav, .site-nav { flex: 0 0 220px; } #main_nav ul, .site-nav ul, ul.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } #main_nav li, .site-nav li, ul.nav li { margin: 0; padding: 0; background: none; } #main_nav a, .site-nav a, ul.nav a { display: block; padding: 0.6rem 0.9rem; border-radius: var(--radius); color: var(--hw-text); text-decoration: none; } #main_nav a:hover, .site-nav a:hover, ul.nav a:hover { background: var(--hw-bg-alt); color: var(--hw-orange-dark); text-decoration: none; } #main_nav li.is-active > a, .site-nav li.is-active > a, ul.nav li.is-active > a { background: var(--hw-orange); color: #1a1a1a; font-weight: 700; } /* --------------------------- Forms & Buttons ---------------------------- */ form { max-width: 640px; } fieldset { border: 1px solid var(--hw-border); border-radius: var(--radius); padding: 1rem 1.25rem 1.25rem; margin: 0 0 1.5rem 0; } legend { font-weight: 700; padding: 0 0.4rem; } label { display: block; font-weight: 600; margin: 0.75rem 0 0.3rem 0; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], select, textarea { width: 100%; font: inherit; font-size: 1rem; padding: 0.55rem 0.7rem; border: 1px solid var(--hw-border); border-radius: var(--radius); background: var(--hw-surface); color: var(--hw-text); } input[type="checkbox"], input[type="radio"] { width: auto; margin-right: 0.4rem; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--hw-orange); outline-offset: 1px; } button, input[type="submit"], input[type="button"], .btn { display: inline-block; font: inherit; font-size: 1rem; font-weight: 700; padding: 0.65rem 1.25rem; border: none; border-radius: var(--radius); background: var(--hw-orange); color: #1a1a1a; cursor: pointer; } button:hover, input[type="submit"]:hover, input[type="button"]:hover, .btn:hover { background: var(--hw-orange-dark); color: #ffffff; } /* ----------------------------- Tables ----------------------------------- */ table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem 0; } th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--hw-border); } th { background: var(--hw-bg-alt); font-weight: 700; } /* --------------------------- Alerts / Messages --------------------------- */ .alert { border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 1.5rem 0; border: 1px solid var(--hw-border); background: var(--hw-bg-alt); } .alert-error, .alert-danger { background: var(--hw-danger-bg); color: var(--hw-danger-text); border-color: var(--hw-danger-border); } .alert-success { background: var(--hw-success-bg); color: var(--hw-success-text); border-color: var(--hw-success-border); } .password-requirements { background: var(--hw-bg-alt); color: var(--hw-text); border: 1px solid var(--hw-border); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0.75rem 0; } .password-requirements h4 { margin: 0 0 0.5rem 0; color: var(--hw-text); } /* ----------------------------- Footer ------------------------------------ */ .footer, #footer { margin-top: 3rem; padding: 1.5rem 0; text-align: center; font-size: 0.9rem; color: var(--hw-muted); border-top: 1px solid var(--hw-border); } .footer a, #footer a { color: var(--hw-muted); } /* ------------------------------ Utility ----------------------------------- */ .card { background: var(--hw-surface); border: 1px solid var(--hw-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; } .text-muted { color: var(--hw-muted); } /* ---------------------------- Responsive ---------------------------------- */ @media (max-width: 720px) { body { font-size: 16px; } .layout { flex-direction: column; padding: 1rem 1rem 3rem 1rem; } #main_nav, .site-nav { flex: 1 1 auto; } #main_nav ul, .site-nav ul, ul.nav { flex-direction: row; flex-wrap: wrap; } .site-header .container { flex-direction: column; text-align: center; } .site-contact { text-align: center; } .site-contact .site-contact-row { justify-content: center; } .page-title { font-size: 1.5rem; } table, thead, tbody, th, td, tr { display: block; } thead tr { position: absolute; top: -9999px; left: -9999px; } td { border: none; border-bottom: 1px solid var(--hw-border); position: relative; padding-left: 45%; } td::before { content: attr(data-label); position: absolute; left: 0.75rem; width: 40%; white-space: nowrap; font-weight: 700; } }