/* ========================================================================= Valleywide TV & Appliance Repair — Main Stylesheet ------------------------------------------------------------------------- This one file styles the whole website. It is mobile-first: the base styles target phones, and the @media blocks near the bottom add tablet and desktop layouts. HOW TO EDIT COLORS / FONTS (for future maintenance): Almost everything visual is controlled by the variables in the :root block directly below. Change a value once there and it updates the whole site. You should rarely need to touch anything past the variables. ========================================================================= */ /* The VALLEYWIDE wordmark uses a condensed system font stack so the page needs no external font request (faster first render). To restore the exact Saira Condensed look without the speed cost, self-host a subsetted WOFF2 and add an @font-face rule here instead of loading it from Google Fonts. */ /* ------------------------------------------------------------------------- 1. DESIGN TOKENS (edit these to re-skin the site) ------------------------------------------------------------------------- */ :root { /* Brand colors — BLUE + GRAY scheme with a warm GOLD accent. (Note: the variables are still named --navy / --orange for simplicity, but --orange now holds the gold accent color.) */ --navy: #16548c; /* primary BLUE (header, headings, brand) */ --navy-dark: #0f3a61; /* darker blue (top bar, footer, hero gradient) */ --navy-light: #2f74b5; /* lighter blue (gradients, eyebrow/link accent) */ --orange: #2563eb; /* ACCENT BLUE — CTA buttons & highlights */ --orange-dark: #1d4ed8; /* accent blue hover state */ --green: #1c854a; /* success-message green (kept for the form) */ --green-dark: #156b3a; /* success-message green (heading/hover) */ --star: #2f74b5; /* rating stars (blue, on light backgrounds) */ --btn: #2b3139; /* VERY DARK GRAY CTA buttons (call/request/repair) */ --btn-dark: #1c2128; /* near-black hover state */ /* Neutrals */ --ink: #14202e; /* main body text */ --muted: #51637a; /* secondary / supporting text */ --line: #e2e8f0; /* hairline borders */ --bg: #ffffff; /* page background */ --bg-soft: #eaeef4; /* alternating section background (a touch darker for contrast) */ --bg-navytint:#e7edf6; /* very light blue tint */ --white: #ffffff; /* Typography */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-head: var(--font-body); /* same stack, heavier weight for headings */ --font-display: "Arial Narrow", "Roboto Condensed", var(--font-body); /* bold condensed wordmark, system stack */ --fs-base: 1.0625rem; /* ~17px — slightly large for easy reading */ /* Spacing scale */ --space-1: .375rem; --space-2: .75rem; --space-3: 1.125rem; --space-4: 1.75rem; --space-5: 2.5rem; --space-6: 4rem; /* Layout */ --maxw: 1500px; /* max content width (fills more of wide screens) */ --radius: 12px; /* rounded corner size */ --radius-sm: 8px; --shadow: 0 6px 20px rgba(13, 59, 102, .08); --shadow-lg: 0 16px 40px rgba(13, 59, 102, .14); --header-h: 72px; /* used for scroll-offset on anchor links */ } /* ------------------------------------------------------------------------- 2. RESET & BASE ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); /* anchors clear sticky header */ -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.65; color: var(--ink); /* Clean white background. Individual sections supply their own light bands (--bg-soft / --bg-navytint) for gentle visual rhythm between them. */ background: var(--bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--navy-light); } a:hover { color: var(--navy); } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; color: var(--navy); margin: 0 0 .5em; font-weight: 800; letter-spacing: -0.01em; } h1 { font-size: clamp(1.9rem, 5.5vw, 3rem); } h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); } h3 { font-size: clamp(1.15rem, 2.5vw, 1.4rem); } p { margin: 0 0 1rem; } /* Accessibility: visible focus outline for keyboard users */ :focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; } /* Skip link (jump straight to main content) */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: .75rem 1.25rem; z-index: 1000; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; color: #fff; } /* ------------------------------------------------------------------------- 3. LAYOUT HELPERS ------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; } .section { padding-block: var(--space-5); } .section--soft { background: var(--bg-soft); } .section--tint { background: var(--bg-navytint); } .section--navy { background: var(--navy); color: #dce7f2; } .section--navy h2, .section--navy h3 { color: #fff; } .section--navy .eyebrow { color: #93c5fd; } /* light blue eyebrow, visible on dark blue */ .section-head { max-width: 720px; margin: 0 auto var(--space-4); text-align: center; } .section-head p { color: var(--muted); margin-bottom: 0; } .section--navy .section-head p { color: #b9cbe0; } .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: var(--navy); /* readable blue on light backgrounds */ margin-bottom: .5rem; } /* Generic responsive grid used by many sections */ .grid { display: grid; gap: 1.25rem; } @media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 720px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 640px) and (max-width: 999px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } } /* ------------------------------------------------------------------------- 4. BUTTONS ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-size: 1.05rem; font-weight: 700; line-height: 1.1; text-decoration: none; padding: .85rem 1.4rem; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease; min-height: 48px; /* comfortable tap target */ } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn .icon { width: 1.15em; height: 1.15em; flex: none; } /* Gray CTA buttons with white text. */ .btn--call { background: var(--btn); color: #fff; } .btn--call:hover { background: var(--btn-dark); color: #fff; } .btn--primary { background: var(--btn); color: #fff; } .btn--primary:hover { background: var(--btn-dark); color: #fff; } .btn--navy { background: var(--navy); color: #fff; } .btn--navy:hover { background: var(--navy-dark); color: #fff; } /* Outline button (sits on light backgrounds) */ .btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); } .btn--outline:hover { background: var(--navy); color: #fff; } /* White outline (sits on navy / hero backgrounds) */ .btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.6); } .btn--ghost:hover { background: #fff; color: var(--navy); } .btn--lg { font-size: 1.15rem; padding: 1rem 1.7rem; min-height: 54px; } .btn--block { width: 100%; } /* A row of buttons that wraps nicely on small screens */ .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; } .btn-row--center { justify-content: center; } /* ------------------------------------------------------------------------- 5. HEADER (top utility bar + main nav) ------------------------------------------------------------------------- */ .topbar { background: var(--navy-dark); color: #cfe0f0; font-size: .9rem; } .topbar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem 1.25rem; padding-block: .5rem; text-align: center; } .topbar__tag { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; } .topbar__tag .icon { width: 1em; height: 1em; color: #cfe0f0; } .topbar__phones { display: inline-flex; flex-wrap: wrap; gap: .25rem 1.1rem; } .topbar a { color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap; } .topbar a:hover { color: #93c5fd; } .topbar a .label { color: #9fb8d4; font-weight: 500; } /* Main header (sticky) */ .site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(13,59,102,.05); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); } /* Logo (text-based so no image file is required) */ .brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; } .brand__mark { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: var(--navy); color: #fff; border-radius: 10px; } .brand__mark .icon { width: 24px; height: 24px; } /* When the mark holds the real logo image (homepage), drop the navy tile. */ .brand__mark--img { width: 46px; height: 46px; background: none; border-radius: 0; } .brand__mark--img img { width: 100%; height: 100%; object-fit: contain; display: block; } .brand__name { display: flex; flex-direction: column; line-height: 1.05; } .brand__name strong { color: var(--navy); font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; line-height: 1; } .brand__name span { color: var(--navy-light); font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } /* Navigation */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; background: var(--navy); border: none; border-radius: 8px; cursor: pointer; } .nav-toggle span { display: block; height: 3px; width: 22px; margin-inline: auto; background: #fff; border-radius: 2px; transition: .2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .main-nav { display: none; } /* shown via .is-open on mobile, always on desktop */ .main-nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: .5rem 1.25rem 1.25rem; } .main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; } .main-nav a { display: block; padding: .75rem .5rem; color: var(--navy); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line); } .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--orange); } .header-cta { display: none; } /* the header "Request Service" button shows on desktop */ /* ---- Services dropdown menu -------------------------------------------- Mobile: the submenu appears as an indented list when the Services item is tapped open (script.js toggles .is-open). Desktop styles are in section 21. */ .has-dropdown > a { display: flex; align-items: center; gap: .35rem; } .caret { width: .7em; height: .7em; flex: none; transition: transform .2s ease; } .has-dropdown.is-open > a .caret { transform: rotate(180deg); } .dropdown { list-style: none; margin: 0; padding: 0; } .has-dropdown .dropdown { display: none; } .has-dropdown.is-open .dropdown { display: block; } .main-nav .dropdown a { padding-left: 1.6rem; font-weight: 600; color: var(--navy-light); } /* ------------------------------------------------------------------------- 6. HERO ------------------------------------------------------------------------- */ .hero { position: relative; color: #eaf1f8; /* Dark blue gradient layered OVER a stock photo so the headline stays readable. To use your OWN photo, drop a file in images/hero/ and change the url() below to it. */ background: linear-gradient(90deg, rgba(9,28,48,.94) 0%, rgba(10,30,52,.82) 42%, rgba(10,30,52,.55) 72%, rgba(10,30,52,.42) 100%), url("images/hero/hero-appliances.jpg") center / cover no-repeat; background-color: var(--navy-dark); overflow: hidden; } .hero::after { /* subtle circuit-like glow, pure CSS */ content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 80% 0%, rgba(120,170,220,.28), transparent 60%); pointer-events: none; } .hero .container { position: relative; z-index: 1; padding-block: clamp(3.5rem, 8vw, 6.5rem); } .hero h1 { color: #fff; max-width: none; } /* business-name headline: one line on desktop, wraps neatly on phones */ .hero__lead { font-size: 1.2rem; color: #cdddee; max-width: 52ch; margin-bottom: var(--space-4); } .hero__badges { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: var(--space-4); } .hero__badge { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .95rem; color: #dce8f4; } .hero__badge .icon { width: 1.3em; height: 1.3em; color: #9fc4e8; flex: none; } /* Green "Factory Authorized" credential pill */ .hero__badge--authorized { background: var(--green); color: #fff; padding: .3rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 700; } .hero__badge--authorized .icon { color: #fff; width: 1.5em; height: 1.5em; } /* Hero CTAs read clearly on the dark banner: a solid white primary button and a white outline ("ghost") secondary, like the reference site. */ .hero .btn--primary { background: #fff; color: var(--navy); border-color: #fff; } .hero .btn--primary:hover { background: #e8f0f8; color: var(--navy-dark); } .hero .btn--call { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.65); } .hero .btn--call:hover { background: #fff; color: var(--navy); } /* ------------------------------------------------------------------------- 7. TRUST BAR ------------------------------------------------------------------------- */ .trustbar { background: var(--bg-navytint); color: var(--navy); border-block: 1px solid var(--line); } .trustbar .container { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; padding-block: 1rem; text-align: center; } .trustbar__item { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; } .trustbar__item .icon { width: 1.25em; height: 1.25em; } /* ------------------------------------------------------------------------- 8. CARDS (services, problems, features) ------------------------------------------------------------------------- */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); height: 100%; display: flex; flex-direction: column; } .card--link { transition: transform .15s ease, box-shadow .15s ease; text-decoration: none; color: inherit; } .card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .card h3 { margin-bottom: .35rem; } .card p { color: var(--muted); margin-bottom: 1rem; } .card p:last-child { margin-bottom: 0; } .card__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 12px; background: var(--bg-navytint); color: var(--navy); margin-bottom: 1rem; } .card__icon .icon { width: 30px; height: 30px; } .card--accent .card__icon { background: #dbeafe; color: var(--orange); } .card__more { margin-top: auto; font-weight: 700; color: var(--navy-light); display: inline-flex; align-items: center; gap: .3rem; } .card--link:hover .card__more { gap: .55rem; } /* Simple checkmark list — the green circle + white tick is drawn entirely with CSS (a ::before pseudo-element), so no image file is required. */ .check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .check-list li { position: relative; padding-left: 1.9rem; } .check-list li::before { content: "✓"; position: absolute; left: 0; top: .15em; width: 1.2rem; height: 1.2rem; display: grid; place-items: center; background: var(--navy); color: #fff; border-radius: 50%; font-size: .8rem; font-weight: 700; line-height: 1; } /* Two-column "media" block: text beside a list/box */ .split { display: grid; gap: 1.75rem; align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--reverse > :first-child { order: 2; } } /* Content photos (stock images). object-fit keeps them tidy at any size. */ .media-img { width: 100%; height: 100%; min-height: 220px; max-height: 380px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); display: block; } .media-band { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); display: block; margin-top: 1.5rem; } /* Pill list (used for symptoms / quick tags) */ .pills { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; } .pills li { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .4rem .9rem; font-weight: 600; font-size: .95rem; color: var(--navy); } .section--navy .pills li { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #fff; } /* ------------------------------------------------------------------------- 9. PROCESS STEPS ------------------------------------------------------------------------- */ .steps { counter-reset: step; display: grid; gap: 1.25rem; } @media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } } .step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.25rem; box-shadow: var(--shadow); } .step__num { counter-increment: step; width: 44px; height: 44px; margin-bottom: .75rem; display: grid; place-items: center; background: var(--navy); color: #fff; border-radius: 50%; font-weight: 800; font-size: 1.25rem; } .step__num::before { content: counter(step); } .step h3 { font-size: 1.15rem; } .step p { color: var(--muted); margin: 0; } /* ------------------------------------------------------------------------- 10. WHY-CHOOSE FEATURES (compact) ------------------------------------------------------------------------- */ .feature { display: flex; gap: 1rem; align-items: flex-start; } .feature__icon { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--bg-navytint); color: var(--navy); display: grid; place-items: center; } .feature__icon .icon { width: 26px; height: 26px; } .feature h3 { font-size: 1.1rem; margin-bottom: .2rem; } .feature p { color: var(--muted); margin: 0; } /* ------------------------------------------------------------------------- 11. BRANDS ------------------------------------------------------------------------- */ .brands { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; list-style: none; padding: 0; margin: 0; } .brands li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem 1.1rem; font-weight: 700; color: var(--navy); box-shadow: var(--shadow); font-size: 1.05rem; } /* ------------------------------------------------------------------------- 12. SERVICE AREAS ------------------------------------------------------------------------- */ .areas { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 0; } .areas li { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: .5rem 1rem; font-weight: 600; } .areas li .icon { width: 1em; height: 1em; color: #93c5fd; } /* Homepage "Our Service Area" coverage block: cities + city list on the left, an embedded Google map on the right (stacks on phones). */ .coverage { display: grid; gap: 1.75rem; align-items: stretch; } @media (min-width: 900px) { .coverage { grid-template-columns: 1fr 1.1fr; } } .coverage__info h3 { margin-bottom: 1rem; } .coverage__cities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem .9rem; } @media (min-width: 560px) { .coverage__cities { grid-template-columns: repeat(3, 1fr); } } .coverage__cities li { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--navy); } .coverage__cities .icon { width: 1em; height: 1em; color: var(--navy-light); flex: none; } .coverage__all { display: flex; align-items: center; gap: .45rem; margin: 1rem 0 0; font-weight: 700; color: var(--navy); } .coverage__all .icon { width: 1.1em; height: 1.1em; color: var(--navy-light); flex: none; } .coverage__map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); min-height: 340px; } .coverage__map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; } /* ZIP service-area checker (sits at the top of the coverage info column). */ .zipcheck { background: var(--bg-navytint, #e7edf6); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.2rem; margin-bottom: 1.6rem; } .zipcheck h3 { margin: 0 0 .3rem; } .zipcheck__hint { margin: 0 0 .85rem; color: var(--muted); font-size: .95rem; } .zipcheck__form { display: flex; gap: .6rem; flex-wrap: wrap; } .zipcheck__input { flex: 1 1 9rem; min-width: 0; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font: inherit; font-weight: 700; letter-spacing: .06em; color: var(--navy); } .zipcheck__input::placeholder { color: var(--muted); font-weight: 500; letter-spacing: normal; } .zipcheck__input:focus { border-color: var(--navy-light); outline: none; box-shadow: 0 0 0 3px rgba(21,81,127,.15); } .zipcheck__form .btn { flex: 0 0 auto; } .zipcheck__result { margin: .9rem 0 0; padding: .7rem .9rem; border-radius: var(--radius); font-weight: 700; font-size: .95rem; line-height: 1.45; } .zipcheck__result--yes { background: #e6f4ec; color: #15623a; border: 1px solid #b7e0c6; } .zipcheck__result--maybe { background: #fdf4d8; color: #7a5a00; border: 1px solid #f0d590; } .zipcheck__result--no { background: #fdeee6; color: #9a4313; border: 1px solid #f6cdb4; } /* Primary "Request Service" button inside the sticky Get in Touch sidebar. */ .gint__cta { margin-top: .35rem; } /* Device-aware CTAs: show sms / "Text Us" actions on phones, and swap them for an email/request action on desktop, where an sms: link does nothing useful. */ .cta-mobile { display: inline-flex; } .cta-desktop { display: none; } @media (min-width: 1000px) { .cta-mobile { display: none; } .cta-desktop { display: inline-flex; } } /* ------------------------------------------------------------------------- 13. TESTIMONIALS ------------------------------------------------------------------------- */ .testimonial { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); height: 100%; display: flex; flex-direction: column; } .stars { color: var(--star); letter-spacing: 2px; font-size: 1.05rem; } /* Review header: colored initial avatar + name / city / stars */ .testimonial__head { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; } .avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.2rem; line-height: 1; } .testimonial__who { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .testimonial__name { font-weight: 700; color: var(--navy); } .testimonial__city { font-weight: 500; color: var(--muted); font-size: .85rem; } /* Collapsed review text (clamped to a few lines until "Read more" is tapped) */ .testimonial__quote { margin: 0 0 .85rem; font-size: 1rem; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } .testimonial.is-expanded .testimonial__quote { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .testimonial__more { align-self: flex-start; margin-top: auto; background: none; border: 0; padding: .1rem 0; cursor: pointer; color: var(--navy-light); font: inherit; font-weight: 700; } .testimonial__more:hover { color: var(--navy); text-decoration: underline; } .placeholder-note { background: #eef4fb; border: 1px dashed var(--navy-light); border-radius: var(--radius-sm); padding: 1rem 1.25rem; color: #2a4a68; font-size: .95rem; } /* ------------------------------------------------------------------------- 14. FAQ ACCORDION (native
— works even without JavaScript) ------------------------------------------------------------------------- */ .faq { display: grid; gap: .75rem; max-width: 820px; margin-inline: auto; } /* The homepage FAQ is the last block before the footer. The section background fades from the light tint down to the footer's navy, and the question list is masked so the answers melt into the footer starting around the 3rd question. */ .faq-section { background: linear-gradient(to bottom, var(--bg-navytint) 0%, var(--bg-navytint) 22%, var(--navy-dark) 100%); } .faq--fade { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 14%, rgba(0,0,0,0) 94%); mask-image: linear-gradient(to bottom, #000 0%, #000 14%, rgba(0,0,0,0) 94%); } /* Once any question is open, drop the fade mask completely so its answer is fully visible (the fade is only a "there's more below" hint for the collapsed state). The .is-open class is toggled by script.js (section 12). */ .faq--fade.is-open { -webkit-mask-image: none; mask-image: none; } .faq-section.faq-has-open .faq__more { visibility: hidden; } /* A gently bouncing down-chevron under the faded questions, hinting that the questions can be tapped open / there's more below. Sits OUTSIDE .faq--fade so the mask doesn't hide it; light-colored to read on the dark gradient. */ .faq__more { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-top: 1rem; color: #cfe0f0; } .faq__more span { font-size: .85rem; font-weight: 600; letter-spacing: .02em; } .faq__more svg { width: 30px; height: 30px; animation: faqMoreBounce 1.8s ease-in-out infinite; } @keyframes faqMoreBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } @media (prefers-reduced-motion: reduce) { .faq__more svg { animation: none; } } .faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; } .faq summary { list-style: none; cursor: pointer; padding: 1.1rem 3rem 1.1rem 1.25rem; font-weight: 700; color: var(--navy); position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--navy-light); transition: transform .2s; } .faq details[open] summary::after { content: "–"; } .faq .faq__body { padding: 0 1.25rem 1.25rem; color: var(--muted); } .faq .faq__body p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------------- 15. CONTACT + FORM ------------------------------------------------------------------------- */ .contact-grid { display: grid; gap: 2rem; } @media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.2fr; align-items: start; } } .info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); } .info-card + .info-card { margin-top: 1.25rem; } .info-row { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1rem; } .info-row:last-child { margin-bottom: 0; } .info-row .icon { width: 1.4rem; height: 1.4rem; color: var(--orange); flex: none; margin-top: .2rem; } .site-footer .info-row .icon { color: #93c5fd; } /* lighter icon on the dark footer */ .info-row strong { display: block; color: var(--navy); } .info-row a { color: var(--navy-light); text-decoration: none; font-weight: 600; } /* Desktop "Text Us" number: shown as plain (non-clickable) text, since SMS links do nothing useful on most desktops. The matching mobile sms link is .cta-mobile; on desktop that hides and this .tel-plain span shows instead. */ .info-row .tel-plain { color: var(--navy-light); font-weight: 600; } /* Simple two-line hours (used in the Get-in-Touch panel + contact card) */ .hours { display: flex; flex-direction: column; gap: .15rem; margin: .35rem 0 0; font-size: .95rem; color: var(--muted); } .hours .hours__emergency { margin-top: .4rem; font-weight: 700; color: var(--navy); } /* "Get in Touch" repair quick-links — vertical gold pill buttons that jump to (and pre-fill) the service request form. Inspired by the reference site. */ .repair-divider { height: 1px; background: var(--line); margin: 1.25rem 0; border: 0; } .repair-menu { display: grid; gap: .6rem; } .repair-link { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.15rem; border-radius: 999px; background: var(--btn); color: #fff; font-weight: 700; text-decoration: none; border: 2px solid transparent; transition: background-color .15s ease, transform .12s ease; } .repair-link:hover { background: var(--btn-dark); transform: translateY(-1px); } .repair-link .icon { width: 1.1em; height: 1.1em; flex: none; } /* The last "see all services" link is a quieter outline style */ .repair-link--ghost { background: transparent; color: var(--navy); border-color: var(--line); } .repair-link--ghost:hover { background: var(--bg-soft); transform: translateY(-1px); } /* Form */ .form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); } .form-field { margin-bottom: 1.1rem; } .form-field > label { display: block; font-weight: 600; color: var(--navy); margin-bottom: .35rem; } .form-field .req { color: #c0392b; } /* red asterisk = clearer "required" cue */ .form-field .hint { font-weight: 400; color: var(--muted); font-size: .85rem; } .form-control { width: 100%; font: inherit; color: var(--ink); padding: .75rem .85rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; } .form-control:focus { border-color: var(--navy-light); outline: none; box-shadow: 0 0 0 3px rgba(21,81,127,.15); } textarea.form-control { min-height: 130px; resize: vertical; } .form-row { display: grid; gap: 1.1rem; } @media (min-width: 560px) { .form-row--2 { grid-template-columns: 1fr 1fr; } } .radio-group { display: flex; flex-wrap: wrap; gap: .65rem; } .radio-pill { position: relative; } .radio-pill input { position: absolute; opacity: 0; } .radio-pill label { display: inline-block; padding: .55rem 1rem; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 600; } .radio-pill input:checked + label { background: var(--navy); color: #fff; border-color: var(--navy); } .radio-pill input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 2px; } /* Preferred contact method: Phone & Text are phone-only. On desktop only Email shows and script.js (section 11) selects it and disables the hidden two. */ @media (min-width: 1000px) { .radio-pill.pref-mobile { display: none; } /* On desktop Email is the only option, so hide the whole field; script.js still selects Email and marks the email box required behind the scenes. */ .pref-field { display: none; } } .consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; color: var(--muted); } .consent input { margin-top: .35rem; width: 1.15rem; height: 1.15rem; flex: none; } /* Success message shown after Netlify form submit (toggled by script.js) */ .form-success { display: none; background: #e7f6ec; border: 1px solid var(--green); color: #14542e; border-radius: var(--radius); padding: 1.5rem; text-align: center; } .form-success.is-visible { display: block; } .form-success h3 { color: var(--green-dark); } /* Error message shown if the PHP handler couldn't send (toggled by script.js) */ .form-error { display: none; background: #fdeee6; border: 1px solid #e0b4a3; color: #8a3417; border-radius: var(--radius); padding: 1.5rem; text-align: center; } .form-error.is-visible { display: block; } .form-error h3 { color: #9a4313; } /* ------------------------------------------------------------------------- 16. PAGE HEADER (interior pages) ------------------------------------------------------------------------- */ .page-hero { /* Solid navy gradient by default; the per-page rules below override this so each interior page opens with its own accent color. */ background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: #dce8f4; text-align: center; } .page-hero .container { padding-block: var(--space-5); } .page-hero h1 { color: #fff; } .page-hero p { color: #bcd0e6; max-width: 60ch; margin-inline: auto; margin-bottom: 0; } /* Breadcrumb */ .crumbs { font-size: .9rem; color: #9fb8d4; margin-bottom: .5rem; } .crumbs a { color: #cfe0f0; text-decoration: none; } .crumbs a:hover { color: #fff; } /* ------------------------------------------------------------------------- PER-PAGE BACKGROUND TINTS (subtle — so each interior page feels a little different without changing the layout). Each page redefines --bg (the page background) and --bg-soft (the alternating section bands) to a faint tint of its own hue; the navy hero and white cards are unchanged. TO REVERT: delete this block. ------------------------------------------------------------------------- */ body.page-services { --bg: #f5f9fd; --bg-soft: #e7eef7; } /* blue */ body.page-fridge { --bg: #f4fafc; --bg-soft: #e3eff4; } /* cyan */ body.page-washer { --bg: #f3faf8; --bg-soft: #e2f1ec; } /* teal */ body.page-dryer { --bg: #fdf9f4; --bg-soft: #f5ecdf; } /* warm */ body.page-oven { --bg: #fdf7f6; --bg-soft: #f6e8e5; } /* red */ body.page-microwave { --bg: #faf7fd; --bg-soft: #eee7f6; } /* purple */ body.page-tv { --bg: #f6f7fd; --bg-soft: #e6e8f6; } /* indigo */ body.page-about { --bg: #f5faf6; --bg-soft: #e5f1e9; } /* green */ body.page-areas { --bg: #f3f9fb; --bg-soft: #e1eef2; } /* deep teal */ body.page-testimonials { --bg: #fdfaf3; --bg-soft: #f3ebd8; } /* gold */ body.page-contact { --bg: #f8f7fd; --bg-soft: #e9e7f5; } /* violet */ body.page-tvparts { --bg: #f6f8fa; --bg-soft: #e7edf2; } /* slate */ /* Article / legal text */ .prose { max-width: 760px; margin-inline: auto; } .prose h2 { margin-top: 2rem; } .prose ul { padding-left: 1.25rem; } .prose li { margin-bottom: .4rem; } .prose .updated { color: var(--muted); font-size: .9rem; } /* ------------------------------------------------------------------------- 17. CALL-TO-ACTION STRIP ------------------------------------------------------------------------- */ .cta-strip { background: linear-gradient(120deg, var(--navy), var(--navy-light)); color: #fff; text-align: center; } .cta-strip .container { padding-block: var(--space-5); } .cta-strip h2 { color: #fff; } .cta-strip p { color: #cdddee; max-width: 52ch; margin-inline: auto; margin-bottom: var(--space-4); } /* ------------------------------------------------------------------------- 18. FOOTER ------------------------------------------------------------------------- */ .site-footer { background: var(--navy-dark); color: #b9cbe0; font-size: .95rem; } .site-footer .container { padding-block: var(--space-5); } .footer-grid { display: grid; gap: 2rem; } @media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; } } .site-footer h4 { color: #fff; font-size: 1.05rem; margin-bottom: .9rem; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .site-footer a { color: #cfe0f0; text-decoration: none; } .site-footer a:hover { color: #93c5fd; } .footer-brand strong { color: #fff; font-size: 1.15rem; display: block; } .footer-brand .tag { color: #93c5fd; font-weight: 700; } .footer-phone { font-size: 1.2rem; font-weight: 800; color: #fff !important; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: var(--space-4); padding-top: var(--space-3); display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: space-between; align-items: center; font-size: .85rem; color: #8ba6c4; } .footer-bottom nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; } .footer-disclaimer { font-size: .8rem; color: #7e9abb; margin-top: 1rem; line-height: 1.6; } /* ------------------------------------------------------------------------- 19. FLOATING MOBILE CALL BAR (sticky bottom bar on phones only) ------------------------------------------------------------------------- */ .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: 1px; background: var(--line); box-shadow: 0 -4px 16px rgba(0,0,0,.15); } .callbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .85rem .5rem; font-weight: 700; text-decoration: none; color: #fff; font-size: .98rem; } .callbar a .icon { width: 1.1em; height: 1.1em; } .callbar a:nth-child(1) { background: var(--btn); } .callbar a:nth-child(2) { background: var(--btn-dark); } .callbar a:nth-child(3) { background: var(--btn); } body { padding-bottom: 60px; } /* leave room for the call bar on mobile */ /* ------------------------------------------------------------------------- PINNED "GET IN TOUCH" DRAWER (the repair quick-menu, on every page) A tab is pinned to the right edge; tapping it slides out a panel with the phone numbers, hours, and clickable repair links. script.js opens/closes it. ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- TWO-COLUMN CONTENT LAYOUT + STICKY "GET IN TOUCH" SIDEBAR On desktop each page is a centered grid: main content (left) + a boxed sidebar card (right) that sticks as you scroll. On tablet/phone it stacks (the sidebar drops below the main content). Header & footer stay full-width because they live OUTSIDE the .layout wrapper. ------------------------------------------------------------------------- */ /* Mobile: no extra side padding here — the sections keep their own .container padding, so the layout just stacks (content, then the sidebar card). */ .layout { max-width: var(--maxw); margin-inline: auto; } @media (min-width: 1000px) { .layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; /* content + ~400px sidebar (a touch wider) */ gap: 44px; align-items: start; /* required so the sticky sidebar can move */ padding-inline: 1.25rem; } } .layout__main { min-width: 0; } /* stops wide children from blowing out the grid */ /* The boxed "Get in Touch" sidebar card */ .gint__panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; margin: 2rem 1.25rem 0; /* spacing + side margin when stacked on mobile */ } .gint__panel h3 { margin: 0 0 .75rem; } .gint__panel .btn-row { flex-direction: column; } /* stack the call buttons */ .gint__panel .btn-row .btn { width: 100%; } .gint__panel .repair-menu { margin-top: .25rem; } @media (min-width: 1000px) { .gint__panel { position: sticky; top: 100px; /* sits just below the sticky header */ align-self: start; margin: 0; max-height: calc(100vh - 120px); overflow-y: auto; /* scroll inside if the menu is taller than the screen */ } /* On the Contact page this same menu is in the sidebar, so hide the inline copy and let the form use the full main column. */ .page-contact .contact-grid { grid-template-columns: 1fr; } .page-contact .contact-grid > div:first-child { display: none; } } /* ------------------------------------------------------------------------- EXPERIMENT: home-page two-column layout with its own sidebar column (may be reverted). The hero, trust bar and FAQ stay full-width; only the middle sections (.home-layout__main) share a centered grid with a sticky sidebar column on the right, so the content shifts left into its own space instead of being overlaid. Below 1080px it stacks and the sidebar is hidden (the homepage already has a Contact section + the mobile call bar). TO REVERT: delete this block, unwrap the
/
wrappers + the