/* ========================================================= Baldwin Builders - Global + Header CSS (ORGANIZED) You said: header.css is used on every page, so this file includes your GLOBAL base + your HEADER styles together. NOTE: - I did NOT change any values/rules — only reorganized, deduped, and removed conflicting duplicates (2x :root, 2x html/body, 2x focus styles). - This should render the same as your current combined file. ========================================================= */ /* ------------------------- Fonts ------------------------- */ /* Google Fonts moved to tags in HTML for performance */ /* ------------------------- Design Tokens (GLOBAL) (Merged + single :root) ------------------------- */ :root{ /* Brand */ --teal: #128C99; --teal-deep: #0B5F68; --teal-soft: rgba(18,140,153,0.18); --tan: rgb(228, 221, 189); --tan-soft: rgba(228,221,189,0.18); /* Header + panels */ --header-bg: rgb(19, 19, 19); --panel-bg: rgba(16, 23, 28, 0.98); /* Neutrals */ --black: #070A0C; --charcoal: #0D1216; --panel: #10171C; --panel-2: #0F151A; --border: rgba(255,255,255,0.08); /* Text */ --text: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.72); /* Effects */ --shadow: 0 18px 44px rgba(0,0,0,0.60); --shadow-soft: 0 12px 28px rgba(0,0,0,0.45); --radius: 18px; /* Type */ --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* ------------------------- Global Base / Resets ------------------------- */ *{ box-sizing: border-box; } html{ font-size: 100%; -webkit-text-size-adjust: 100%; /* iOS text scaling consistency */ text-size-adjust: 100%; /* Fixed header offset so anchor jumps don't hide under header */ scroll-padding-top: 92px; } html, body{ margin: 0; padding: 0; background: var(--black); color: var(--text); overflow-x: hidden; /* prevents accidental horizontal scroll */ font-family: var(--font-sans); font-weight: 400; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } main{ height: auto; } /* Better keyboard focus defaults for interactive elements */ a:focus-visible, button:focus-visible{ outline: 3px solid rgba(228,221,189,0.55); outline-offset: 3px; border-radius: 10px; } /* Optional: tighter “corporate” headings */ h1, h2, h3, h4, h5, h6{ font-family: var(--font-sans); font-weight: 650; /* browser uses closest (600/700) */ letter-spacing: -0.01em; } /* ========================================================= HEADER (Fixed + Responsive + Dropdown) ========================================================= */ /* ------------------------- Header Shell ------------------------- */ .site-header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: transform 0.35s ease-in-out; } .site-header.hide{ transform: translateY(-100%); } /* Scope header container so it doesn't affect other .container usage */ .site-header .container{ max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; } /* ------------------------- Brand ------------------------- */ .brand-link{ display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; } .logo{ height: 54px; width: auto; } .brand-name{ font-size: 1.6rem; font-weight: 500; color: rgba(255,255,255,0.92); white-space: nowrap; } /* Header-specific stronger focus rings (wins over global) */ .site-header a:focus-visible, .site-header button:focus-visible{ outline: 3px solid rgba(228,221,189,0.75); outline-offset: 3px; border-radius: 12px; } /* ------------------------- Desktop Nav ------------------------- */ .main-nav{ position: relative; } .nav-list{ list-style: none; display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; } .nav-list a{ text-decoration: none; color: rgba(255,255,255,0.88); font-weight: 500; padding: 10px 10px; border-radius: 10px; transition: color 0.2s ease, background 0.2s ease; } .nav-list a:hover{ color: var(--tan); background: rgba(255,255,255,0.06); } /* ------------------------- Dropdown (Services only) ------------------------- */ .dropdown{ position: relative; } .dropdown > a::after{ content: " ▼"; font-size: 12px; margin-left: 6px; color: rgba(255,255,255,0.55); } .dropdown-menu{ position: absolute; top: calc(100% + 8px); left: 0; background: var(--panel-bg); list-style: none; padding: 10px 0; min-width: 260px; border-radius: 14px; box-shadow: 0 10px 22px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.10); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; } .dropdown-menu li{ padding: 0; } .dropdown-menu li a{ display: block; padding: 10px 16px; color: rgba(255,255,255,0.88); border-radius: 0; } .dropdown-menu li a:hover{ color: rgba(18,140,153,0.95); background: rgba(255,255,255,0.06); } /* Open states: - hover (desktop) - focus-within (keyboard) - .open (JS for mobile tap) */ .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu, .dropdown.open .dropdown-menu{ opacity: 1; visibility: visible; transform: translateY(0); } /* ------------------------- CTA Button ------------------------- */ .cta-button{ background: var(--teal-deep); color: #fff !important; padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); transition: transform 0.2s ease, background 0.2s ease; white-space: nowrap; } .cta-button:hover{ background: var(--teal); transform: translateY(-1px); } /* ------------------------- Hamburger (hidden on desktop) ------------------------- */ .nav-toggle{ display: none; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 10px 11px; cursor: pointer; line-height: 0; margin-left:auto; } .nav-toggle__bar{ display: block; width: 22px; height: 2px; background: rgba(255,255,255,0.92); border-radius: 2px; margin: 3px 0; } /* ------------------------- Mobile Layout - Shows hamburger - Nav becomes drop-down panel - Dropdown becomes accordion ------------------------- */ @media (max-width: 980px){ .site-header .container{ padding: 10px 14px; } .logo{ height: 46px; } .brand-name{ font-size: 1.2rem; } .nav-toggle{ display: flex; flex-direction: column; align-items: center; justify-content: center; } .main-nav{ position: absolute; left: 0; right: 0; top: 100%; background: var(--panel-bg); border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 18px 45px rgba(0,0,0,0.45); transform: translateY(-6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; } .site-header.nav-open .main-nav{ opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .nav-list{ flex-direction: column; align-items: stretch; gap: 0; padding: 10px 12px 14px; } .nav-list > li{ border-top: 1px solid rgba(255,255,255,0.06); } .nav-list > li:first-child{ border-top: none; } .nav-list a{ display: block; padding: 14px 12px; } /* Dropdown arrow changes on mobile */ .dropdown > a::after{ content: " ▾"; } .dropdown-menu{ position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: transparent; padding: 0 0 10px 0; display: none; /* JS toggles .open */ min-width: 100%; } .dropdown.open .dropdown-menu{ display: block; } .dropdown-menu li a{ padding: 10px 18px; color: rgba(255,255,255,0.86); } }