/* ================================================================= DYNAMIC AUTOWORKS — STYLESHEET (v2 patch) Static. No build step, no frameworks, no dependencies. DESIGN NOTE Built around the shop's own artifact: the work order. Structural bands, monospace for anything that behaves like data, service op-codes, and a form rendered as a service ticket. The 15deg slant on the hero strip is the exact angle measured off the logo wordmark, so the page leans the way the mark does. THEMING Every colour is a variable. The light set lives in :root, the dark set overrides it on [data-theme="dark"] (set on ). Red is the accent in BOTH themes — only the base and text invert. REBRAND IN ONE PLACE: edit the variables below. ================================================================= */ /* ---------- LIGHT (default) ---------- */ :root { --paper: #EDEBE6; /* page base */ --surface: #F6F5F2; /* cards and panels */ --ink: #16171A; /* body text, matches the logo ink */ --steel: #6E7378; /* secondary text */ --zinc: #D6D3CC; /* hairlines and dividers */ /* structural bands: dark-on-light in this theme */ --band-bg: #16171A; --band-ink: #F6F5F2; --band-steel: #9BA0A6; --band-line: rgba(246,245,242,.14); --band-raise: #202226; --field-bg: #FFFFFF; --nav-bg: rgba(237,235,230,.94); --shadow: rgba(22,23,26,.5); --veil-a: rgba(20,21,24,.90); --veil-m: rgba(20,21,24,.62); --veil-b: rgba(20,21,24,.34); /* shared "shop floor" texture — diagonal rule lines + a corner glow. Same motif on the main site and the build pages so they read as one thing. Tuned per theme so it stays a texture, never a pattern. */ --grid-line: rgba(192,57,43,.055); --grid-glow: rgba(192,57,43,.10); /* ---- the one accent, constant across themes ---- */ --signal: #C0392B; /* muted red — brake caliper, not alarm */ --signal-d: #96281C; /* hover / pressed */ --signal-up: #E8776A; /* lifted red, for use on dark bands */ --signal-w: rgba(192,57,43,.14); /* ---- TYPE ---- */ --display: 'Archivo', system-ui, sans-serif; --body: 'Public Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; /* ---- SHAPE ---- */ --radius: 4px; /* deliberately tight — this is a workshop */ --maxw: 1180px; --narrow: 860px; --slant: 15deg; /* measured off the logo */ } /* ---------- DARK ---------- */ [data-theme="dark"] { --paper: #0D0E10; --surface: #17181B; --ink: #EDEBE6; --steel: #8A8F94; --zinc: #3A3C40; /* bands invert their relationship: raised, not sunken */ --band-bg: #17181B; --band-ink: #EDEBE6; --band-steel: #8A8F94; --band-line: rgba(237,235,230,.10); --band-raise: #202226; --field-bg: #101114; --nav-bg: rgba(13,14,16,.94); --shadow: rgba(0,0,0,.7); --veil-a: rgba(8,9,10,.92); --veil-m: rgba(8,9,10,.66); --veil-b: rgba(8,9,10,.36); --grid-line: rgba(192,57,43,.05); --grid-glow: rgba(192,57,43,.18); } /* ---------- RESET ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 92px; } body { font-family: var(--body); background: var(--paper); background-image: repeating-linear-gradient(115deg, transparent 0 38px, var(--grid-line) 38px 40px); background-attachment: fixed; color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color .45s ease, color .45s ease; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: var(--paper); padding: 12px 18px; font-family: var(--mono); font-size: .78rem; } .skip-link:focus { left: 12px; top: 12px; } /* ---------- SHARED ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .wrap-narrow { max-width: var(--narrow); } .mono { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; } .tag { color: var(--signal); margin-bottom: 14px; } .h2 { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: .98; letter-spacing: -.02em; text-transform: uppercase; } .lede { color: var(--steel); max-width: 56ch; margin-top: 16px; font-size: 1.02rem; } .head { margin-bottom: 46px; } .section { padding: 96px 0; } .band { background: var(--band-bg); color: var(--band-ink); transition: background .45s ease, color .45s ease; } .band .lede { color: var(--band-steel); } .band .h2 { color: var(--band-ink); } .band .tag { color: var(--signal-up); } .link { color: var(--signal); border-bottom: 1px solid currentColor; padding-bottom: 1px; } .band .link { color: var(--signal-up); } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; background: var(--signal); color: #fff; font-family: var(--display); font-weight: 700; font-size: .92rem; letter-spacing: .02em; text-transform: uppercase; padding: 15px 28px; border: 0; border-radius: var(--radius); cursor: pointer; transition: background .18s ease, transform .18s ease; } .btn:hover { background: var(--signal-d); } .btn:active { transform: translateY(1px); } .btn-sm { padding: 10px 18px; font-size: .8rem; } .btn-ghost { background: transparent; color: #F6F5F2; border: 1px solid rgba(246,245,242,.35); } .btn-ghost:hover { background: rgba(246,245,242,.1); } /* ---------- NAV ---------- */ .nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--zinc); transition: background .45s ease, border-color .45s ease; } .nav-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; } /* Header mark: the square vector stamp. Two files — ink for light, white for dark — cross-faded on theme change. No white plate needed; these are real vector with real transparency. */ .brand { flex: 0 0 auto; display: block; position: relative; width: 46px; height: 46px; } .brand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .45s ease; } .brand .mark-dark { opacity: 0; } [data-theme="dark"] .brand .mark-light { opacity: 0; } [data-theme="dark"] .brand .mark-dark { opacity: 1; } .nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: .93rem; font-weight: 500; } .nav-links a { padding: 6px 0; border-bottom: 2px solid transparent; } .nav-links a:hover { border-bottom-color: var(--signal); } .nav-actions { display: flex; align-items: center; gap: 14px; } .nav-phone { color: var(--steel); } .nav-phone:hover { color: var(--ink); } .nav-toggle { display: none; width: 42px; height: 38px; background: transparent; border: 1px solid var(--zinc); border-radius: 3px; cursor: pointer; padding: 10px 9px; } .nav-toggle span { display: block; height: 2px; background: var(--ink); margin: 3px 0; transition: transform .2s ease, opacity .2s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* ---------- THEME TOGGLE (animated pill) ---------- */ .theme-toggle { position: relative; display: inline-flex; align-items: center; width: 112px; height: 28px; padding: 3px; background: var(--zinc); border: 0; border-radius: 999px; cursor: pointer; transition: background .45s ease; flex: 0 0 auto; } .theme-toggle .pill { position: absolute; top: 3px; left: 3px; width: 53px; height: 22px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.22); transition: transform .38s cubic-bezier(.34,1.4,.64,1), background .45s ease; z-index: 1; } [data-theme="dark"] .theme-toggle .pill { transform: translateX(53px); } .theme-toggle .opt { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--mono); font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; transition: color .3s ease; } .theme-toggle .opt svg { width: 11px; height: 11px; flex: 0 0 auto; } .theme-toggle .opt-light { color: var(--ink); font-weight: 600; } .theme-toggle .opt-dark { color: var(--steel); font-weight: 500; } [data-theme="dark"] .theme-toggle .opt-light { color: var(--steel); font-weight: 500; } [data-theme="dark"] .theme-toggle .opt-dark { color: var(--ink); font-weight: 600; } /* ---------- HERO ---------- */ /* The hero must NOT clip: the angled strip at its base is skewed, so its corners sit outside the hero box. Clipping moved onto .hero-bg, which is the only thing that actually needs it (the cover-fit media). */ .hero { position: relative; background: #0D0E10; color: #F6F5F2; overflow: visible; } /* The photo is a CSS background here, NOT just the