/* Theme Name: ABC Roofing Theme URI: https://www.abcroofrepair.com Author: ABC Roofing LLC Description: A professional roofing company theme with 3 switchable color palettes, fully responsive, and fully editable from the WordPress Customizer. Version: 1.0.0 License: GPL-2.0-or-later Text Domain: abcroof Tags: business, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, responsive-layout, theme-options */ /* ============================================================ TOKENS — palette injected by PHP in ============================================================ */ :root { --accent: #E0712A; --accent-d: #B9551A; --accent-ink: #3a1d08; --ink: #211b14; --ink-2: #514a40; --muted: #837a6d; --surface: #faf6f0; --surface-2: #f1ebe0; --card: #ffffff; --line: #e6ddcf; --on-accent: #ffffff; --font-head: "Archivo", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-cond: "Barlow Condensed", system-ui, sans-serif; --maxw: 1200px; --radius: 12px; --radius-sm: 8px; --btn-radius: 10px; --shadow: 0 2px 12px rgba(0,0,0,.07); --shadow-md: 0 8px 32px rgba(0,0,0,.10); --shadow-lg: 0 20px 60px rgba(0,0,0,.12); --transition: .22s cubic-bezier(.4,0,.2,1); } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-d); } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } input, textarea, select { font-family: var(--font-body); font-size: 1rem; } /* ============================================================ TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 800; line-height: 1.15; color: var(--ink); letter-spacing: -0.02em; } h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); } h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); } h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); } h4 { font-size: 1.2rem; } h5 { font-size: 1rem; } p { color: var(--ink-2); line-height: 1.7; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-cond); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; flex-shrink: 0; } .lede { font-size: clamp(1.05rem, 1.9vw, 1.25rem); color: var(--ink-2); max-width: 60ch; text-wrap: pretty; } /* ============================================================ LAYOUT ============================================================ */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .section { padding: clamp(60px, 9vw, 120px) 0; } .section-header { margin-bottom: clamp(36px, 5vw, 64px); } .section-header.centered { text-align: center; } .section-header.centered .eyebrow { justify-content: center; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--btn-radius); font-family: var(--font-body); font-weight: 600; font-size: .95rem; line-height: 1; transition: all var(--transition); white-space: nowrap; text-decoration: none; } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 16px rgba(0,0,0,.15); } .btn-primary:hover { background: var(--accent-d); color: var(--on-accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); } .btn-outline { background: transparent; color: var(--ink); border: 2px solid var(--line); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); background: transparent; } .btn-ghost-light { background: rgba(255,255,255,.12); color: #fff; border: 2px solid rgba(255,255,255,.3); backdrop-filter: blur(6px); } .btn-ghost-light:hover { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.6); } .btn svg { width: 18px; height: 18px; flex-shrink: 0; } /* ============================================================ BADGE / CHIP ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; font-size: .78rem; font-weight: 600; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); } .badge-accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* ============================================================ SITE HEADER / NAV ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--card); border-bottom: 1px solid var(--line); transition: box-shadow var(--transition); } .site-header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.08); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; } /* Logo */ .site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .site-logo img { height: 40px; width: auto; } .logo-text { font-family: var(--font-head); font-weight: 900; font-size: 1.25rem; color: var(--ink); letter-spacing: -0.03em; line-height: 1; } .logo-text span { color: var(--accent); } .logo-sub { font-size: .65rem; font-weight: 500; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; } /* Nav links */ .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { padding: 7px 13px; border-radius: 7px; font-size: .9rem; font-weight: 500; color: var(--ink-2); transition: all var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--accent); background: var(--surface-2); } /* Header actions */ .header-actions { display: flex; align-items: center; gap: 12px; } .header-phone { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; } .header-phone-number { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--ink); letter-spacing: -0.02em; } .header-phone-hours { font-size: .7rem; color: var(--muted); font-weight: 500; } /* Hamburger */ .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; border-radius: 8px; cursor: pointer; transition: background var(--transition); } .nav-toggle:hover { background: var(--surface-2); } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: all var(--transition); } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav */ .mobile-nav { display: none; flex-direction: column; gap: 4px; padding: 16px 24px 20px; background: var(--card); border-top: 1px solid var(--line); } .mobile-nav.open { display: flex; } .mobile-nav a { padding: 10px 12px; border-radius: 8px; font-weight: 500; color: var(--ink-2); transition: all var(--transition); } .mobile-nav a:hover { background: var(--surface-2); color: var(--accent); } .mobile-nav .btn { margin-top: 8px; justify-content: center; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; overflow: hidden; padding: clamp(60px, 9vw, 110px) 0 clamp(60px, 8vw, 100px); background: var(--surface); } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 70% 50%, var(--surface-2) 0%, transparent 70%); pointer-events: none; } .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; position: relative; } .hero-content { max-width: 600px; } .hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .hero-headline { margin-bottom: 8px; font-size: clamp(2.5rem, 5.5vw, 4.2rem); } .hero-headline-accent { display: block; color: var(--accent); position: relative; } .hero-description { font-size: clamp(1rem, 1.8vw, 1.15rem); color: var(--ink-2); max-width: 52ch; margin: 20px 0 36px; line-height: 1.75; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 40px; } .hero-rating { display: flex; align-items: center; gap: 10px; padding-top: 32px; border-top: 1px solid var(--line); } .hero-stars { color: #f59e0b; font-size: 1.1rem; letter-spacing: 2px; } .hero-rating-value { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: var(--ink); } .hero-rating-label { font-size: .85rem; color: var(--muted); line-height: 1.3; } /* Hero visual */ .hero-visual { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-lg); } .hero-visual img { width: 100%; height: 100%; object-fit: cover; } .hero-visual-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--surface-2) 0%, var(--line) 100%); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: var(--muted); } .hero-visual-placeholder svg { width: 64px; height: 64px; opacity: .4; } .hero-cert-badges { position: absolute; bottom: 16px; left: 16px; display: flex; gap: 8px; } .cert-chip { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: .72rem; font-weight: 700; color: var(--ink-2); box-shadow: var(--shadow); } /* ============================================================ TRUST STRIP ============================================================ */ .trust-strip { background: var(--ink); padding: 24px 0; overflow: hidden; } .trust-strip-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; } .trust-item { display: flex; align-items: center; gap: 10px; padding: 10px 28px; border-right: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.9); } .trust-item:last-child { border-right: none; } .trust-item svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; } .trust-item-text { font-size: .9rem; font-weight: 500; } /* ============================================================ WHY SECTION ============================================================ */ .why { background: var(--card); } .why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 48px; } .why-card { padding: 32px 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: all var(--transition); } .why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); } .why-icon { width: 52px; height: 52px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .why-icon svg { width: 26px; height: 26px; color: var(--accent); } .why-card h3 { font-size: 1.15rem; margin-bottom: 10px; } .why-card p { font-size: .93rem; } /* Stats row */ .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; background: var(--accent); border-radius: var(--radius); overflow: hidden; margin-top: 60px; } .stat-item { padding: 32px 24px; text-align: center; border-right: 1px solid rgba(255,255,255,.2); color: var(--on-accent); } .stat-item:last-child { border-right: none; } .stat-number { font-family: var(--font-head); font-weight: 900; font-size: clamp(2rem, 3.5vw, 2.8rem); display: block; line-height: 1; margin-bottom: 6px; } .stat-label { font-size: .82rem; font-weight: 500; opacity: .85; text-transform: uppercase; letter-spacing: .06em; } /* ============================================================ SERVICES ============================================================ */ .services { background: var(--surface); } .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; } .service-card { background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); transition: all var(--transition); display: flex; flex-direction: column; } .service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--accent); } .service-card-img { aspect-ratio: 16/9; overflow: hidden; background: var(--surface-2); position: relative; } .service-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .service-card:hover .service-card-img img { transform: scale(1.05); } .service-card-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--surface-2) 0%, var(--line) 100%); } .service-card-img-placeholder svg { width: 48px; height: 48px; color: var(--accent); opacity: .5; } .service-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; } .service-card-body h3 { font-size: 1.15rem; margin-bottom: 10px; } .service-card-body p { font-size: .9rem; flex: 1; } .service-card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: .88rem; font-weight: 600; color: var(--accent); } .service-card-link svg { width: 14px; height: 14px; transition: transform var(--transition); } .service-card:hover .service-card-link svg { transform: translateX(4px); } /* ============================================================ GALLERY / BEFORE-AFTER ============================================================ */ .gallery { background: var(--card); } .before-after-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; margin-bottom: 48px; } .before-after-slider { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; cursor: ew-resize; box-shadow: var(--shadow-md); user-select: none; } .before-after-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .before-after-after { clip-path: inset(0 50% 0 0); transition: none; } .before-after-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 44px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0; z-index: 2; } .before-after-line { flex: 1; width: 3px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.3); } .before-after-btn { width: 44px; height: 44px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(0,0,0,.25); flex-shrink: 0; margin: -1px 0; } .before-after-btn svg { width: 22px; height: 22px; color: var(--ink); } .before-after-label { position: absolute; top: 12px; padding: 4px 10px; border-radius: 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: rgba(0,0,0,.55); color: #fff; pointer-events: none; } .label-before { left: 12px; } .label-after { right: 12px; } .ba-info { padding: 8px 0 0; } .ba-info h3 { font-size: 1.5rem; margin-bottom: 10px; } .ba-info p { font-size: .93rem; } .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .project-card { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; position: relative; background: var(--surface-2); cursor: pointer; } .project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .project-card:hover img { transform: scale(1.06); } .project-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 60%); opacity: 0; transition: opacity var(--transition); display: flex; align-items: flex-end; padding: 16px; color: #fff; font-weight: 600; font-size: .9rem; } .project-card:hover .project-card-overlay { opacity: 1; } .project-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--surface-2) 0%, var(--line) 100%); } .project-placeholder svg { width: 40px; height: 40px; color: var(--accent); opacity: .4; } /* ============================================================ SERVICE AREA ============================================================ */ .area { background: var(--surface); } .area-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .area-map { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--surface-2); border: 1px solid var(--line); } .area-map img { width: 100%; height: 100%; object-fit: cover; } .area-map iframe { width: 100%; height: 100%; border: none; } .area-map-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: var(--muted); } .area-map-placeholder svg { width: 56px; height: 56px; opacity: .35; } .city-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 24px 0; } .city-item { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-2); font-weight: 500; } .city-item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .area-note { font-size: .88rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 20px; margin-top: 8px; } /* ============================================================ ESTIMATE FORM ============================================================ */ .estimate { background: var(--ink); } .estimate-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; } .estimate-left .eyebrow { color: var(--accent); } .estimate-left h2 { color: #fff; } .estimate-left .lede { color: rgba(255,255,255,.7); } .estimate-perks { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; } .estimate-perk { display: flex; align-items: flex-start; gap: 12px; color: rgba(255,255,255,.85); font-size: .93rem; } .perk-icon { width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 25%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .perk-icon svg { width: 14px; height: 14px; color: var(--accent); } /* Form */ .estimate-form-wrap { background: var(--card); border-radius: var(--radius); padding: 36px 32px; box-shadow: var(--shadow-lg); } .form-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 6px; } .form-sub { font-size: .85rem; color: var(--muted); margin-bottom: 24px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-full { grid-column: 1 / -1; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: .82rem; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; } .form-group input, .form-group select, .form-group textarea { padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-size: .93rem; color: var(--ink); background: var(--surface); transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .form-group textarea { resize: vertical; min-height: 90px; } .form-submit { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .form-submit .btn { justify-content: center; width: 100%; padding: 15px; } .form-disclaimer { font-size: .78rem; color: var(--muted); text-align: center; } /* Form success */ .form-success { display: none; text-align: center; padding: 32px 16px; } .form-success.visible { display: block; } .form-success-icon { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, transparent); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .form-success-icon svg { width: 32px; height: 32px; color: var(--accent); } .form-success h3 { font-size: 1.35rem; margin-bottom: 8px; } .form-success p { font-size: .9rem; } /* ============================================================ TESTIMONIALS ============================================================ */ .testimonials { background: var(--surface-2); } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .testimonial-card { background: var(--card); border-radius: var(--radius); padding: 28px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; } .testimonial-stars { color: #f59e0b; font-size: 1rem; letter-spacing: 3px; } .testimonial-text { font-size: .93rem; color: var(--ink-2); line-height: 1.7; flex: 1; } .testimonial-text::before { content: "\201C"; font-family: Georgia, serif; font-size: 3rem; color: var(--accent); line-height: .6; display: block; margin-bottom: 8px; opacity: .4; } .testimonial-author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); } .testimonial-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--accent); } .testimonial-name { font-weight: 700; font-size: .9rem; color: var(--ink); } .testimonial-location { font-size: .8rem; color: var(--muted); } /* ============================================================ SITE FOOTER ============================================================ */ .site-footer { background: var(--ink); color: rgba(255,255,255,.7); } .footer-main { padding: 60px 0 40px; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; border-bottom: 1px solid rgba(255,255,255,.1); } .footer-brand .logo-text { color: #fff; } .footer-brand .logo-sub { color: rgba(255,255,255,.45); } .footer-brand p { font-size: .88rem; color: rgba(255,255,255,.55); margin: 16px 0 20px; max-width: 36ch; line-height: 1.7; } .footer-badges { display: flex; gap: 8px; flex-wrap: wrap; } .footer-badge { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.6); } .footer-col h4 { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 16px; } .footer-col ul { display: flex; flex-direction: column; gap: 10px; } .footer-col a { font-size: .88rem; color: rgba(255,255,255,.65); transition: color var(--transition); } .footer-col a:hover { color: var(--accent); } .footer-contact-item { display: flex; align-items: flex-start; gap: 8px; font-size: .88rem; color: rgba(255,255,255,.65); margin-bottom: 10px; } .footer-contact-item svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: 2px; } .footer-contact-item a { color: rgba(255,255,255,.65); } .footer-contact-item a:hover { color: var(--accent); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; font-size: .8rem; color: rgba(255,255,255,.35); flex-wrap: wrap; gap: 12px; } .footer-bottom a { color: rgba(255,255,255,.45); } .footer-bottom a:hover { color: rgba(255,255,255,.8); } /* ============================================================ INNER PAGE HERO (banner for regular pages/posts) ============================================================ */ .page-banner { background: var(--ink); padding: 60px 0; position: relative; overflow: hidden; } .page-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 20% 50%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 60%); pointer-events: none; } .page-banner-inner { position: relative; } .page-banner .eyebrow { color: var(--accent); } .page-banner h1 { color: #fff; margin: 8px 0 0; font-size: clamp(1.8rem, 4vw, 3rem); } .page-banner-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: rgba(255,255,255,.45); margin-bottom: 12px; } .page-banner-breadcrumb a { color: rgba(255,255,255,.55); } .page-banner-breadcrumb a:hover { color: var(--accent); } .page-banner-breadcrumb span { color: rgba(255,255,255,.3); } /* ============================================================ PAGE CONTENT ============================================================ */ .page-content { padding: 60px 0; background: var(--card); } .page-content-inner { max-width: 860px; } .page-content .entry-content > * + * { margin-top: 1.5em; } .entry-content h1, .entry-content h2, .entry-content h3 { margin-top: 1.8em; } .entry-content p { font-size: 1.02rem; line-height: 1.75; color: var(--ink-2); } .entry-content ul, .entry-content ol { padding-left: 1.5em; color: var(--ink-2); } .entry-content li { margin-bottom: .4em; line-height: 1.65; } .entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .entry-content blockquote { border-left: 4px solid var(--accent); padding: 16px 20px; background: var(--surface); border-radius: 0 8px 8px 0; color: var(--ink-2); font-style: italic; } .entry-content img { border-radius: var(--radius-sm); box-shadow: var(--shadow); } /* ============================================================ BLOG — ARCHIVE ============================================================ */ .blog-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; padding: 60px 0; background: var(--surface); } .blog-grid { display: grid; gap: 28px; } .post-card { background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); display: grid; grid-template-columns: 240px 1fr; transition: all var(--transition); } .post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .post-card-thumb { aspect-ratio: 1; overflow: hidden; background: var(--surface-2); } .post-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .post-card:hover .post-card-thumb img { transform: scale(1.05); } .post-card-body { padding: 28px; display: flex; flex-direction: column; gap: 10px; } .post-card-meta { display: flex; align-items: center; gap: 12px; font-size: .78rem; color: var(--muted); } .post-card-meta .cat-tag { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); padding: 3px 9px; border-radius: 5px; font-weight: 600; } .post-card-title { font-size: 1.2rem; color: var(--ink); transition: color var(--transition); } .post-card:hover .post-card-title { color: var(--accent); } .post-card-excerpt { font-size: .88rem; color: var(--muted); flex: 1; } .post-card-link { font-size: .85rem; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; } /* Sidebar */ .blog-sidebar { } .widget { margin-bottom: 32px; } .widget-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--line); } /* ============================================================ SINGLE POST ============================================================ */ .single-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; padding: 60px 0; background: var(--surface); align-items: start; } .single-article { background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .single-thumb { aspect-ratio: 16/7; overflow: hidden; } .single-thumb img { width: 100%; height: 100%; object-fit: cover; } .single-body { padding: 40px 48px; } .single-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: .82rem; color: var(--muted); flex-wrap: wrap; } .single-meta .cat-tag { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); padding: 4px 10px; border-radius: 6px; font-weight: 600; } .single-title { font-size: clamp(1.6rem, 3.5vw, 2.5rem); margin-bottom: 8px; } /* Author box */ .author-box { display: flex; gap: 16px; padding: 24px; background: var(--surface); border-radius: var(--radius-sm); margin-top: 40px; border: 1px solid var(--line); } .author-avatar img { width: 56px; height: 56px; border-radius: 50%; } .author-info h4 { font-size: .95rem; margin-bottom: 4px; } .author-info p { font-size: .85rem; color: var(--muted); } /* Post navigation */ .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; } .post-nav-item { padding: 16px 20px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line); transition: all var(--transition); } .post-nav-item:hover { border-color: var(--accent); box-shadow: var(--shadow); } .post-nav-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; } .post-nav-title { font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.4; } .post-nav-item.next { text-align: right; } /* Comments */ .comments-section { margin-top: 32px; } .comment-list .comment { padding: 20px 0; border-bottom: 1px solid var(--line); } .comment-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .comment-author img { width: 36px; height: 36px; border-radius: 50%; } .comment-author-name { font-weight: 700; font-size: .9rem; } .comment-date { font-size: .78rem; color: var(--muted); } .comment-body p { font-size: .9rem; } #comment-form { display: grid; gap: 14px; margin-top: 24px; } #comment-form input, #comment-form textarea { padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-size: .93rem; color: var(--ink); background: var(--surface); outline: none; transition: border-color var(--transition); } #comment-form input:focus, #comment-form textarea:focus { border-color: var(--accent); } #comment-form textarea { min-height: 100px; resize: vertical; } /* ============================================================ 404 & SEARCH ============================================================ */ .error-page, .search-page { padding: 80px 0 100px; text-align: center; background: var(--surface); min-height: 60vh; display: flex; align-items: center; } .error-code { font-family: var(--font-head); font-weight: 900; font-size: clamp(6rem, 15vw, 12rem); color: var(--surface-2); line-height: 1; margin-bottom: 16px; display: block; } .error-page h2 { margin-bottom: 12px; } .error-page p { color: var(--muted); margin-bottom: 28px; } .error-page .btn { margin: 0 auto; } .search-results-grid { display: grid; gap: 20px; margin-top: 32px; text-align: left; } /* ============================================================ ANIMATIONS ============================================================ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .reveal.visible { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: .1s; } .reveal-delay-2 { transition-delay: .2s; } .reveal-delay-3 { transition-delay: .3s; } .reveal-delay-4 { transition-delay: .4s; } /* ============================================================ WORDPRESS CORE ============================================================ */ .wp-block-image img { border-radius: var(--radius-sm); } .alignwide { max-width: calc(var(--maxw) + 160px); } .alignfull { max-width: 100%; } .wp-caption { max-width: 100%; } .wp-caption-text { font-size: .82rem; color: var(--muted); text-align: center; margin-top: 6px; } .sticky .post-card { border-color: var(--accent); } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* Admin bar spacing */ .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } /* Pagination */ .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; } .page-numbers { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1.5px solid var(--line); font-weight: 600; font-size: .9rem; color: var(--ink-2); transition: all var(--transition); } .page-numbers:hover, .page-numbers.current { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .page-numbers.dots { border: none; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .footer-main { grid-template-columns: 1fr 1fr; } .footer-main .footer-brand { grid-column: 1 / -1; } .before-after-wrap { grid-template-columns: 1fr; } .ba-info { padding: 4px 0 0; } } @media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; } .hero-visual { max-width: 540px; } .area-inner { grid-template-columns: 1fr; } .estimate-inner { grid-template-columns: 1fr; } .blog-layout { grid-template-columns: 1fr; } .single-layout { grid-template-columns: 1fr; } .post-card { grid-template-columns: 1fr; } .post-card-thumb { aspect-ratio: 16/7; } .single-body { padding: 28px; } .form-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .nav-links { display: none; } .header-phone { display: none; } .nav-toggle { display: flex; } .header-cta { display: none; } .trust-strip-inner { gap: 0; } .trust-item { padding: 8px 16px; border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); width: 100%; justify-content: center; } .trust-item:last-child { border-bottom: none; } .stats-row { grid-template-columns: repeat(2, 1fr); } .stat-item:nth-child(2) { border-right: none; } .services-grid { grid-template-columns: 1fr; } .footer-main { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 28px; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; } .post-nav { grid-template-columns: 1fr; } } @media (max-width: 480px) { .hero-ctas { flex-direction: column; } .hero-ctas .btn { width: 100%; justify-content: center; } .estimate-form-wrap { padding: 24px 18px; } .city-grid { grid-template-columns: 1fr; } }