/* ============================================ KODA CARPET CLEANING — SHARED STYLESHEET ============================================ */ /* NOTE: fonts are NOT @imported here on purpose. An @import inside a stylesheet chains a second render-blocking request (browser must download styles.css before it even discovers the font request). Every page loads the Google Fonts directly in its instead, alongside the preconnect hints. */ :root { --color-primary: #4d211c; --color-bg: #ffffff; --color-bg-warm: #ffffff; --color-bg-cool: #f4f6f9; --color-bg-cream: #ffffff; --color-accent: #607898; --color-accent-mid: rgba(96, 120, 152, 0.45); --color-accent-lt: rgba(96, 120, 152, 0.18); --color-primary-mid: rgba(77, 33, 28, 0.55); --color-primary-lt: rgba(77, 33, 28, 0.10); --color-primary-xlt: rgba(77, 33, 28, 0.05); --color-card: #ffffff; --font-display: 'Nanum Myeongjo', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --radius-pill: 50px; --radius-card: 14px; --spacing-section: 100px; --spacing-component: 48px; --shadow-soft: 0 4px 30px rgba(77, 33, 28, 0.08); --shadow-card: 0 2px 20px rgba(77, 33, 28, 0.06); --shadow-elevated: 0 12px 40px rgba(77, 33, 28, 0.12); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background-color: var(--color-bg); color: var(--color-primary); font-family: var(--font-body); font-size: 17px; line-height: 1.7; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-primary); line-height: 1.2; } a { color: var(--color-accent); text-decoration: none; transition: color 0.3s; } a:hover { color: var(--color-primary); } img { max-width: 100%; display: block; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .container-wide { max-width: 1320px; margin: 0 auto; padding: 0 24px; } /* ---- BUTTONS ---- */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--color-primary); color: var(--color-bg); border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 16px; font-weight: 500; padding: 16px 36px; border: 2px solid var(--color-primary); cursor: pointer; transition: all 0.35s ease; letter-spacing: 0.02em; text-decoration: none; } .btn-primary:hover { background: #3a1815; border-color: #3a1815; color: var(--color-bg); transform: translateY(-2px); box-shadow: var(--shadow-elevated); } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--color-accent); border: 2px solid var(--color-accent); border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 15px; padding: 14px 30px; cursor: pointer; transition: all 0.35s ease; text-decoration: none; } .btn-secondary:hover { background: var(--color-accent); color: var(--color-bg); transform: translateY(-2px); } /* ---- NAV BUTTON FIX — always visible ---- */ .nav-links .btn-primary { padding: 10px 24px; font-size: 14px; background: var(--color-primary); color: var(--color-bg) !important; border-color: var(--color-primary); } .nav-links .btn-primary:hover { background: #3a1815; border-color: #3a1815; color: var(--color-bg) !important; } .nav-links .btn-primary::after { display: none !important; } /* ============================================ NAVIGATION ============================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--color-bg); transition: box-shadow 0.3s ease; border-bottom: 1px solid rgba(77, 33, 28, 0.06); } .nav.scrolled { box-shadow: 0 2px 30px rgba(77, 33, 28, 0.10); } .nav-inner { max-width: 1320px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 80px; } .nav-logo { display: flex; align-items: center; text-decoration: none; } .nav-logo img { height: 56px; width: auto; } .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; } .nav-links a { font-family: var(--font-display); font-size: 15px; color: var(--color-primary); position: relative; padding-bottom: 4px; transition: color 0.3s; } .nav-links a:not(.btn-primary)::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--color-accent); transition: width 0.3s ease; } .nav-links a:not(.btn-primary):hover::after, .nav-links a:not(.btn-primary).active::after { width: 100%; } /* Pill "Get a Quote" nav item. The six original pages each declare this locally; declaring it here too lets the pages added in the 2026-08-05 SEO build share one nav with no per-page CSS. */ .nav-links .nav-cta { background: var(--color-primary); color: var(--color-bg) !important; padding: 10px 24px; font-size: 14px; border-radius: var(--radius-pill); font-weight: 500; } .nav-links .nav-cta::after { display: none !important; } .nav-links .nav-cta:hover { background: #3a1815; color: var(--color-bg) !important; } .nav-phone { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--color-primary); text-decoration: none; margin-left: 12px; } .nav-phone:hover { color: var(--color-accent); } .nav-phone svg { flex-shrink: 0; } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .hamburger span { display: block; width: 26px; height: 2px; background: var(--color-primary); border-radius: 2px; transition: all 0.3s; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ============================================ SECTION BACKGROUNDS — smooth transitions ============================================ */ .section-base { background: var(--color-bg); } .section-warm { background: var(--color-bg-warm); } .section-cool { background: var(--color-bg-cool); } .section-cream { background: var(--color-bg-cream); } /* Smooth gradient transition between sections */ .section-fade-top { position: relative; } .section-fade-top::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 80px; background: linear-gradient(to bottom, var(--fade-from, var(--color-bg)), transparent); z-index: 0; pointer-events: none; } /* ============================================ ORGANIC WAVE SYSTEM ============================================ */ .wave-section { position: relative; overflow: hidden; } .wave-section .wave-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .wave-section .wave-content { position: relative; z-index: 1; } /* ============================================ SECTION HEADINGS ============================================ */ .section-header { text-align: center; margin-bottom: 60px; } .section-tag { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 12px; display: block; } .section-header h2 { font-size: clamp(30px, 3.5vw, 46px); margin-bottom: 16px; } .section-header p { font-size: 18px; max-width: 620px; margin: 0 auto; opacity: 0.75; } /* ============================================ SCROLL ANIMATIONS ============================================ */ .fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } /* ============================================ SERVICE PAGE HERO ============================================ */ .page-hero { min-height: 50vh; display: flex; align-items: center; padding: 140px 0 80px; position: relative; overflow: hidden; } .page-hero-content { position: relative; z-index: 2; max-width: 680px; } .page-hero h1 { font-size: clamp(36px, 4.5vw, 56px); font-weight: 600; margin-bottom: 20px; } .page-hero h1 em { font-style: italic; color: var(--color-accent); } .page-hero p { font-size: 19px; line-height: 1.75; opacity: 0.8; margin-bottom: 32px; } .page-hero-trust { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 14px; opacity: 0.7; margin-top: 20px; } .page-hero-trust-item { display: flex; align-items: center; gap: 6px; } .trust-stars { color: #c9a44c; letter-spacing: 1px; } /* ============================================ CONTENT BLOCKS ============================================ */ .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .content-grid.reverse { direction: rtl; } .content-grid.reverse > * { direction: ltr; } .content-block h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 18px; } .content-block p { font-size: 17px; opacity: 0.8; margin-bottom: 16px; line-height: 1.75; } .image-frame { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-elevated); aspect-ratio: 4/3; background: linear-gradient(135deg, rgba(77,33,28,0.06), rgba(96,120,152,0.08)); } .image-frame img { width: 100%; height: 100%; object-fit: cover; } /* Feature list */ .feature-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 24px; } .feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; } .feature-list svg { flex-shrink: 0; margin-top: 3px; } /* Process steps */ .process-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; } .process-step { background: var(--color-card); border-radius: var(--radius-card); padding: 32px 24px; text-align: center; box-shadow: var(--shadow-card); border-top: 3px solid var(--color-primary); transition: transform 0.3s, box-shadow 0.3s; } .process-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); } .process-step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary-lt); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--color-primary); } .process-step h4 { font-size: 17px; margin-bottom: 8px; } .process-step p { font-size: 14px; opacity: 0.7; line-height: 1.6; } /* CTA Banner */ .cta-banner { padding: 80px 0; text-align: center; position: relative; overflow: hidden; } .cta-banner .wave-content { position: relative; z-index: 2; } .cta-banner h2 { font-size: clamp(30px, 3.5vw, 48px); margin-bottom: 16px; } .cta-banner > .container p, .cta-banner .wave-content p { font-size: 18px; opacity: 0.8; margin-bottom: 32px; max-width: 540px; margin-left: auto; margin-right: auto; } .cta-buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } .cta-phone-big { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); color: var(--color-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: color 0.3s; } .cta-phone-big:hover { color: var(--color-accent); } /* ============================================ FOOTER ============================================ */ .footer { background: var(--color-primary); color: var(--color-bg); padding: 60px 0 0; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; margin-bottom: 48px; } .footer h3 { color: var(--color-bg); font-size: 16px; margin-bottom: 20px; letter-spacing: 0.04em; } .footer p, .footer a { color: rgba(255,255,255, 0.7); font-size: 15px; line-height: 1.8; } .footer a:hover { color: var(--color-bg); } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-links a { font-size: 15px; transition: color 0.3s, padding-left 0.3s; } .footer-links a:hover { padding-left: 4px; } .footer-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; } .footer-contact-item svg { flex-shrink: 0; margin-top: 3px; opacity: 0.6; } .footer-bottom { border-top: 1px solid rgba(255,255,255, 0.12); padding: 24px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-bottom p { font-size: 13px; opacity: 0.5; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { .content-grid { grid-template-columns: 1fr; gap: 40px; } .content-grid.reverse { direction: ltr; } .footer-grid { grid-template-columns: 1fr 1fr; } .page-hero { min-height: auto; } } @media (max-width: 768px) { .nav-links { display: none; } .hamburger { display: flex; } .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 80px; left: 0; right: 0; background: var(--color-bg); padding: 24px; gap: 20px; box-shadow: 0 12px 30px rgba(77, 33, 28, 0.1); border-top: 1px solid rgba(77, 33, 28, 0.06); } .nav-phone { display: none; } .process-steps { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .cta-buttons { flex-direction: column; align-items: center; } .cta-buttons .btn-primary, .cta-buttons .btn-secondary { width: 100%; } } /* ============================================ SHARED SEO / CONTENT COMPONENTS (ks- prefix) Added 2026-08-05 SEO pass. Used identically on every public page so the long-form copy, FAQ, service-area band and footer NAP look and behave the same everywhere. index.html and floor-types.html carry a verbatim inline copy of this block because they do not link styles.css. Font sizes here respect CLAUDE.md §4.1 web minimums (body >=16px, secondary >=14px, footer >=13px, nothing below 12px). ============================================ */ /* Skip link — first focusable element on every page */ .ks-skip { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #4d211c; color: #ffffff; padding: 12px 20px; border-radius: 0 0 8px 0; font-family: var(--font-display, serif); font-size: 15px; text-decoration: none; } .ks-skip:focus { left: 0; color: #ffffff; } /* Long-form prose section */ .ks-prose { padding: 88px 0; } .ks-prose .container { max-width: 860px; } .ks-prose h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 18px; } .ks-prose h3 { font-size: 22px; margin: 36px 0 12px; } .ks-prose p { font-size: 17px; line-height: 1.8; color: #1a1a1a; opacity: 0.88; margin-bottom: 18px; } .ks-prose ul { margin: 0 0 22px 0; padding-left: 22px; } .ks-prose li { font-size: 17px; line-height: 1.8; color: #1a1a1a; opacity: 0.88; margin-bottom: 8px; } .ks-prose a { color: #607898; text-decoration: underline; text-underline-offset: 3px; } .ks-prose a:hover { color: #4d211c; } .ks-prose .ks-eyebrow { font-family: var(--font-display, serif); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: #607898; display: block; margin-bottom: 12px; } /* Service-area band */ .ks-area { padding: 72px 0; background: #f4f6f9; } .ks-area .container { max-width: 900px; text-align: center; } .ks-area h2 { font-size: clamp(26px, 2.8vw, 36px); margin-bottom: 16px; } .ks-area p { font-size: 17px; line-height: 1.8; color: #1a1a1a; opacity: 0.85; max-width: 720px; margin: 0 auto 20px; } .ks-area-cities { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0; margin: 24px 0 0; } .ks-area-cities li { font-family: var(--font-display, serif); font-size: 15px; color: #4d211c; background: #ffffff; border: 1px solid rgba(77,33,28,0.12); border-radius: 50px; padding: 9px 20px; box-shadow: 0 2px 10px rgba(77,33,28,0.05); } .ks-area address { font-style: normal; font-size: 16px; line-height: 1.8; margin-top: 24px; color: #1a1a1a; } .ks-area address a { color: #607898; } /* FAQ accordion — visible content mirrored 1:1 by FAQPage schema */ .ks-faq { padding: 88px 0; background: var(--color-bg, #ffffff); } .ks-faq .container { max-width: 860px; } .ks-faq > .container > h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 12px; text-align: center; } .ks-faq .ks-faq-intro { font-size: 17px; text-align: center; opacity: 0.75; margin-bottom: 40px; color: #1a1a1a; } .ks-faq-list { display: flex; flex-direction: column; gap: 14px; } .ks-faq-item { background: #ffffff; border-radius: 14px; box-shadow: 0 2px 20px rgba(77,33,28,0.06); border-left: 3px solid #607898; overflow: hidden; } .ks-faq-item summary { font-family: var(--font-display, serif); font-size: 18px; font-weight: 600; color: #4d211c; padding: 20px 24px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .ks-faq-item summary::-webkit-details-marker { display: none; } .ks-faq-item summary::after { content: '+'; font-size: 26px; color: #607898; line-height: 1; flex-shrink: 0; transition: transform 0.25s ease; } .ks-faq-item[open] summary::after { transform: rotate(45deg); } .ks-faq-item p { font-size: 16px; line-height: 1.75; color: #1a1a1a; opacity: 0.85; padding: 0 24px 22px; margin: 0; } .ks-faq-item p + p { padding-top: 0; } .ks-faq-item a { color: #607898; } /* Footer NAP block — identical on every page (local-SEO NAP consistency) */ .ks-nap { font-style: normal; font-size: 15px; line-height: 1.8; } .ks-nap a { text-decoration: none; } .ks-nap-hours { font-size: 14px; opacity: 0.85; margin-top: 10px; } /* Map embed */ .ks-map { border: 0; width: 100%; height: 320px; border-radius: 14px; display: block; } /* ---- Photo hero used by the pages added in the 2026-08-05 SEO build (/contact, /about, /pet-odor-removal, /commercial-cleaning, the city pages and the four floor-type pages). The six original pages each define their own hero locally; this is the one shared version going forward. ---- */ .ks-hero { min-height: 480px; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; background-size: cover; background-position: center 60%; background-repeat: no-repeat; padding: 140px 0 80px; } .ks-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(96,120,152,0.80) 0%, rgba(96,120,152,0.55) 42%, rgba(96,120,152,0.72) 100%); } .ks-hero.burgundy::before { background: linear-gradient(135deg, rgba(77,33,28,0.80) 0%, rgba(77,33,28,0.55) 42%, rgba(96,120,152,0.62) 100%); } .ks-hero > .container { position: relative; z-index: 2; max-width: 860px; } .ks-hero h1 { font-size: clamp(32px, 4.2vw, 52px); font-weight: 700; color: #ffffff; margin-bottom: 14px; line-height: 1.15; text-shadow: 0 2px 16px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3); } .ks-hero .ks-hero-kicker { font-family: var(--font-display); font-size: clamp(19px, 2.1vw, 26px); font-style: italic; color: rgba(255,255,255,0.92); margin-bottom: 18px; text-shadow: 0 1px 10px rgba(0,0,0,0.4); } .ks-hero .ks-hero-sub { font-size: 18px; line-height: 1.75; color: #ffffff; max-width: 660px; margin: 0 auto 30px; text-shadow: 0 1px 8px rgba(0,0,0,0.35); } .ks-hero .cta-buttons { margin-bottom: 20px; } .ks-hero .btn-primary { background: #ffffff; color: #4d211c; border-color: #ffffff; } .ks-hero .btn-primary:hover { background: #ffffff; color: #4d211c; border-color: #ffffff; } .ks-hero .btn-secondary { color: #ffffff; border-color: rgba(255,255,255,0.55); } .ks-hero .btn-secondary:hover { background: rgba(255,255,255,0.15); color: #ffffff; } .ks-hero-trust { font-size: 14px; color: rgba(255,255,255,0.9); text-shadow: 0 1px 6px rgba(0,0,0,0.3); } .ks-hero-trust .trust-stars { color: #c9a44c; letter-spacing: 1px; } /* Card grid used on the commercial / city / about pages */ .ks-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .ks-card { background: #ffffff; border-radius: var(--radius-card); padding: 28px 26px; box-shadow: var(--shadow-card); border-top: 3px solid var(--color-primary); } .ks-card:nth-child(even) { border-top-color: var(--color-accent); } .ks-card h3 { font-size: 19px; margin-bottom: 10px; } .ks-card p { font-size: 16px; line-height: 1.7; color: #1a1a1a; opacity: 0.85; } /* Final CTA band */ .ks-cta { padding: 80px 0; text-align: center; background: linear-gradient(135deg, #607898 0%, #4d6a8a 60%, #3d5a7a 100%); } .ks-cta h2 { color: #ffffff; font-size: clamp(28px, 3.2vw, 42px); margin-bottom: 14px; } .ks-cta p { color: rgba(255,255,255,0.92); font-size: 18px; max-width: 560px; margin: 0 auto 30px; } .ks-cta .btn-primary { background: #ffffff; color: #4d211c; border-color: #ffffff; } .ks-cta .btn-primary:hover { background: #ffffff; color: #4d211c; border-color: #ffffff; } .ks-cta .btn-secondary { color: #ffffff; border-color: rgba(255,255,255,0.55); } .ks-cta .btn-secondary:hover { background: rgba(255,255,255,0.15); color: #ffffff; } .ks-cta-phone { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); color: #ffffff; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; } .ks-cta-phone:hover { color: rgba(255,255,255,0.75); } /* Footer service columns on the new pages */ .ks-footer-note { font-size: 13px; opacity: 0.55; margin-top: 14px; } @media (max-width: 768px) { .ks-prose { padding: 64px 0; } .ks-faq { padding: 64px 0; } .ks-area { padding: 56px 0; } } /* No-JS fallback: .fade-up starts at opacity 0 and is revealed by an IntersectionObserver. Without JS that hides ALL page content, including H1s. The inline script in each adds .js to during parse, so a plain-HTML visitor (JS disabled, JS failed, or a crawler that does not execute scripts) never matches .js and sees everything. The !important and `animation: none` are load-bearing, not cargo cult. upholstery.html implements .fade-up as a CSS *animation* rather than a class toggle, and an active/filled animation outranks every normal declaration in the cascade — so a plain `opacity: 1` here loses to it and eight elements, the H1 among them, stayed invisible with scripts off. Cancelling the animation outright is the only way this rule reliably wins on every page. */ html:not(.js) .fade-up { opacity: 1 !important; transform: none !important; animation: none !important; }