/* ============================================================ Skip's Modern Carpentry — base + shared component layer Design tokens live in the markup's inline styles (faithful to the Claude Design source). This file holds the global resets, the nav interactivity/responsive rules the original handled in JS, and the self-hosted font stack. ============================================================ */ :root { --oak: #7a582f; --oak-light: #ecbe8e; --oak-fixed: #ffddba; --green: #496455; --ink: #1a1c1b; --ink-soft: #4f453b; --line: #d3c4b7; --paper: #f9f9f7; --paper-2: #f4f4f1; --charcoal: #2f3130; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif; } a { text-decoration: none; color: inherit; } img { max-width: 100%; } input, select, textarea { font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", sans-serif; } input::placeholder, textarea::placeholder { color: #81756a; } /* Icon font: hide the ligature words until the icon font is ready so crawlers/readers never catch raw "call"/"menu" text, and reserve the glyph so there's no flash of the word. */ .material-symbols-outlined { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; } html:not(.icons-ready) .material-symbols-outlined { visibility: hidden; } /* ---------------- Navigation (static replacement for the JS-driven SkipNav component: CSS handles the desktop/mobile switch + dropdown hover + active underline; nav.js only toggles the mobile panel). ---- */ .nav-desktop { display: flex; align-items: center; gap: 2px; } .nav-cta { display: flex; align-items: center; gap: 10px; } .nav-toggle { display: none; } .mobile-callbar { display: none; } .nav-mobile-panel { display: none; } /* Open panel scrolls on its own so a long menu never scrolls the page behind it; body.nav-open locks the page underneath. */ .nav-mobile-panel.open { display: flex; max-height: calc(100dvh - 80px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } body.nav-open { overflow: hidden; } /* Active-page underline: the underline span is always in the markup but only shows under the link matching */ .nl .u { position: absolute; left: 12px; right: 12px; bottom: 20px; height: 2px; background: var(--oak); border-radius: 2px; transform: scaleX(0); transition: transform .2s ease; } .nl-services .u { right: 26px; } body[data-page="home"] .nl-home .u, body[data-page="services"] .nl-services .u, body[data-page="gallery"] .nl-gallery .u, body[data-page="reviews"] .nl-reviews .u, body[data-page="about"] .nl-about .u, body[data-page="contact"] .nl-contact .u { transform: scaleX(1); } /* Expandable "Deck Building & Repair" → city pages (desktop dropdown + mobile) */ .svc-expand { display: flex; align-items: center; } .svc-expand > a { flex: 1; } .svc-expand-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 4px 8px; margin-right: 4px; } .svc-expand-btn .material-symbols-outlined { transition: transform .2s ease; } .svc-expand-btn[aria-expanded="true"] .material-symbols-outlined { transform: rotate(180deg); } .svc-cities { display: none; flex-direction: column; } .svc-cities.open { display: flex; } /* Services dropdown — CSS hover (replaces the JS open/close state) */ .nav-drop { position: relative; height: 80px; display: flex; align-items: center; } .nav-drop .dropdown { position: absolute; top: 60px; left: 0; min-width: 270px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 30px rgba(26,28,27,.12); padding: 8px; display: flex; flex-direction: column; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .nav-drop:hover .dropdown, .nav-drop:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } @media (max-width: 1100px) { .nav-desktop, .nav-cta { display: none; } .nav-toggle { display: flex; } body { padding-bottom: 76px; } /* Floating rounded pill, reveals on scroll-up / hides on scroll-down. */ .mobile-callbar { display: flex; position: fixed; left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 70; border-radius: 9999px; overflow: hidden; box-shadow: 0 8px 26px rgba(26, 28, 27, .30); transition: transform .3s ease, opacity .3s ease; will-change: transform; } .mobile-callbar.callbar-hidden { transform: translateY(160%); opacity: 0; pointer-events: none; } } /* ---------------- Estimate wizard (contact page) ---------------- */ .wiz-opt { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 16px; border-radius: 6px; cursor: pointer; text-align: left; border: 1px solid var(--line); background: var(--paper); transition: border-color .15s, background .15s; } .wiz-opt.sel { border-color: var(--oak); background: #f4efe9; } .wiz-pill { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 500; padding: 11px 18px; border-radius: 9999px; cursor: pointer; border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); transition: border-color .15s, background .15s; } .wiz-pill.sel { border-color: var(--oak); background: #f4efe9; color: var(--oak); }