@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap'); /* ============================================================================ CORE WEB VITALS NOTES ============================================================================ 1. HERO BACKGROUND IMAGES — .hero-bg and .page-hero currently use `background-image: url(...)` so the browser cannot preload them and they are not visible to Largest Contentful Paint optimisation. The CSS backgrounds are kept here as a no-JS / legacy fallback. In your HTML, replace the inert background
(and the equivalent ::before on .page-hero) with a real : In , add a preload hint matching the same image: The CSS already positions .hero-bg absolutely with `inset: 0` and the inside should be `width:100%; height:100%; object-fit:cover`. ============================================================================ */ :root { /* TrueFix brand palette — Primary Navy #1C294E */ --navy: #1C294E; /* Primary brand navy — header, primary buttons, dark surfaces */ --navy-deep: #121C3A; /* Deeper shade for hovers and press states */ --navy-light: #2B3A68; /* Softer navy for gradients and hover variants */ --blue: #3B82F6; /* Royal blue accent — links, highlights, active states */ --blue-dark: #1C294E; /* Button primary matches brand navy */ --blue-light: #EEF2FB; /* Tinted navy wash — backgrounds, icon tiles */ --blue-mid: #8FA3D1; /* Mid navy — hero trust copy, dividers on dark */ --gold: #D4A84B; /* Brand gold accent — logo/brand highlight */ --gray-50: #F7F8FB; --gray-100: #EEF1F7; --gray-200: #DCE1EC; --gray-400: #8891A8; --gray-500: #5A6379; --gray-700: #2E3550; --white: #FFFFFF; --red: #EF4444; --green: #22C55E; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 32px; --shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04); --shadow-md: 0 4px 16px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04); --shadow-lg: 0 12px 30px rgba(15,23,42,0.12), 0 4px 10px rgba(15,23,42,0.06); --shadow-xl: 0 24px 48px rgba(15,23,42,0.14); --font: 'DM Sans', sans-serif; --transition: all 0.22s cubic-bezier(0.4,0,0.2,1); --max: 1200px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font); color: var(--navy); line-height: 1.6; background: var(--white); -webkit-font-smoothing: antialiased; } html, body { overflow-x: clip; max-width: 100%; } /* clip (not hidden) so position:sticky still works */ img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: var(--font); } .container { max-width: var(--max); margin: 0 auto; padding: 0 24px; } .section { padding: 80px 0; content-visibility: auto; contain-intrinsic-size: auto 500px; } .section-sm { padding: 56px 0; } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 50px; font-size: 15px; font-weight: 600; transition: var(--transition); cursor: pointer; font-family: var(--font); white-space: nowrap; } .btn-primary { background: var(--navy); color: white; box-shadow: 0 4px 14px rgba(28,41,78,0.32); } .btn-primary:hover { background: var(--navy-deep); box-shadow: 0 6px 20px rgba(28,41,78,0.42); transform: translateY(-1px); } .btn-outline { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.7); } .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: white; } .btn-outline-blue { background: transparent; color: var(--blue); border: 2px solid var(--blue); } .btn-outline-blue:hover { background: var(--blue-light); } .btn-dark { background: var(--navy-deep); color: white; } .btn-dark:hover { background: #0a1230; transform: translateY(-1px); } .btn-lg { padding: 16px 36px; font-size: 16px; } /* ===== NAVBAR ===== */ /* Sticky lives on the #site-header wrapper (see note in js/site.js) — the navbar itself can't stick because its wrapper is only as tall as the nav. */ #site-header { position: sticky; top: 0; z-index: 1001; box-shadow: 0 8px 20px -10px rgba(0,0,0,0.45); } .navbar { position: static; z-index: 1000; background: var(--navy); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 2px 12px rgba(0,0,0,0.15); } .nav-inner { display: flex; align-items: center; height: 72px; gap: 8px; max-width: var(--max); margin: 0 auto; padding: 0 24px; } .logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .logo-icon { width: 38px; height: 38px; background: var(--blue); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .logo-wordmark { font-size: 20px; font-weight: 800; color: white; letter-spacing: -0.5px; } .logo-wordmark span { color: var(--gold); } .nav-links { display: flex; align-items: center; gap: 2px; flex: 1; margin-left: 24px; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.82); transition: var(--transition); cursor: pointer; } .nav-link:hover { color: white; background: rgba(255,255,255,0.08); } .nav-link.active { color: var(--gold); } .nav-chevron { width: 14px; height: 14px; transition: var(--transition); } .nav-item:hover .nav-chevron { transform: rotate(180deg); } .dropdown { position: absolute; top: calc(100% + 8px); left: 0; background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-xl); border: 1px solid var(--gray-200); padding: 8px; min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: var(--transition); z-index: 200; } .dropdown-wide { min-width: 480px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--gray-700); transition: var(--transition); } .dropdown-link:hover { background: var(--blue-light); color: var(--blue); } .dropdown-link-icon { width: 28px; height: 28px; background: var(--blue-light); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Gold book-now button — matches offer CTA */ .btn-gold { background: linear-gradient(180deg, #DDB55A 0%, #C19333 100%); color: #1A1303; box-shadow: 0 4px 14px rgba(212,168,75,0.32), 0 1px 0 rgba(255,255,255,0.4) inset; font-weight: 700; } .btn-gold:hover { background: linear-gradient(180deg, #E4BE66 0%, #CA9E3C 100%); box-shadow: 0 6px 20px rgba(212,168,75,0.44), 0 1px 0 rgba(255,255,255,0.5) inset; transform: translateY(-1px); } .nav-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; } .mobile-btn { display: none; padding: 8px; border-radius: var(--radius-sm); color: white; } .mobile-menu { display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: white; overflow-y: auto; padding: 24px; z-index: 999; } .mobile-menu.open { display: block; } .mobile-nav-link { display: block; padding: 14px 0; font-size: 17px; font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--gray-100); } .mobile-nav-sub { padding: 8px 0 8px 16px; display: none; } .mobile-nav-sub.open { display: block; } .mobile-nav-sub a { display: block; padding: 8px 0; font-size: 15px; color: var(--gray-500); font-weight: 500; } /* ===== HERO ===== */ .hero { background: var(--navy); position: relative; overflow: hidden; min-height: 580px; display: flex; align-items: center; } /* .hero-bg — fallback background (preferred: real inside, see top-of-file notes) */ .hero-bg { position: absolute; inset: 0; background-image: url('../assets/truefix-technician-dishwasher-repair-toronto.jpg'); background-size: cover; background-position: 35% center; } .hero-bg > img, .hero-bg > picture, .hero-bg > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% center; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(15,23,42,0.96) 30%, rgba(15,23,42,0.78) 50%, rgba(15,23,42,0.35) 78%, rgba(15,23,42,0.18) 100%); } .hero-content { position: relative; z-index: 2; padding: 80px 0; } .hero-inner { max-width: var(--max); margin: 0 auto; padding: 0 24px; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: center; } .hero-text { min-width: 0; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(37,99,235,0.2); border: 1px solid rgba(37,99,235,0.4); color: var(--blue-mid); padding: 6px 14px; border-radius: 50px; font-size: 13px; font-weight: 600; margin-bottom: 24px; } .hero-title { font-size: clamp(36px, 5vw, 58px); font-weight: 800; color: white; line-height: 1.08; letter-spacing: -1.5px; margin-bottom: 20px; text-wrap: balance; } .hero-title span { color: var(--blue-mid); } .hero-sub { font-size: 17px; color: rgba(255,255,255,0.7); margin-bottom: 36px; max-width: 420px; line-height: 1.65; } .hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .hero-trust { display: flex; align-items: center; gap: 20px; margin-top: 48px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.12); flex-wrap: wrap; } .hero-trust-item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; } .hero-trust-item svg { color: var(--blue-mid); flex-shrink: 0; } /* ===== OFFER CARD (hero) ===== */ .offer-card { position: relative; width: 100%; isolation: isolate; } .offer-glow { position: absolute; inset: -40px -30px -40px -30px; background: radial-gradient(ellipse at center, rgba(212,168,75,0.22) 0%, rgba(212,168,75,0.08) 40%, transparent 70%); filter: blur(20px); z-index: -1; pointer-events: none; } .offer-inner { position: relative; background: linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%); border: 1px solid rgba(255,255,255,0.16); border-radius: 20px; padding: 28px 26px 24px; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.08) inset, 0 0 0 1px rgba(212,168,75,0.14); } .offer-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .offer-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(212,168,75,0.2); } .offer-amount { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; } .offer-amount-value { font-size: 56px; font-weight: 800; color: white; letter-spacing: -2px; line-height: 1; background: linear-gradient(180deg, #fff 0%, #E8D9B0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .offer-amount-label { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.78); line-height: 1.3; } .offer-desc { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.66); margin-bottom: 18px; } .offer-perks { display: flex; flex-direction: column; gap: 9px; margin: 0 0 22px; padding: 18px 0; list-style: none; border-top: 1px solid rgba(255,255,255,0.10); border-bottom: 1px solid rgba(255,255,255,0.10); } .offer-perks li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.85); } .offer-perks svg { color: var(--gold); flex-shrink: 0; } .offer-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 24px; padding: 14px 20px; border-radius: 12px; background: linear-gradient(180deg, #DDB55A 0%, #C19333 100%); color: #1A1303; font-size: 15px; font-weight: 700; letter-spacing: -0.1px; transition: var(--transition); box-shadow: 0 4px 16px rgba(212,168,75,0.28), 0 1px 0 rgba(255,255,255,0.4) inset; } .offer-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(212,168,75,0.42), 0 1px 0 rgba(255,255,255,0.5) inset; } .offer-fine { margin-top: 14px; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,0.48); text-align: center; } .offer-fine strong { color: var(--gold); font-weight: 700; letter-spacing: 0.5px; } /* Sub-page hero — fallback background; recommend a child + class="page-hero-bg" for LCP, see top-of-file notes */ .page-hero { background-color: var(--navy); background-image: url('../assets/truefix-technician-dishwasher-repair-toronto.jpg'); background-size: cover; background-position: center right; padding: 72px 0 56px; position: relative; overflow: hidden; } .page-hero > .page-hero-bg, .page-hero > picture.page-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center right; z-index: 0; } .page-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, rgba(15,23,42,0.92) 30%, rgba(15,23,42,0.65) 55%, rgba(15,23,42,0.15) 100%); } .page-hero-content { position: relative; z-index: 2; } .page-hero-eyebrow { font-size: 13px; font-weight: 600; color: var(--blue-mid); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; } .page-hero h1 { font-size: clamp(32px, 4vw, 50px); font-weight: 800; color: white; letter-spacing: -1px; margin-bottom: 16px; } .page-hero p { font-size: 18px; color: rgba(255,255,255,0.7); max-width: 580px; margin-bottom: 28px; } .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,0.5); margin-bottom: 20px; } .breadcrumb a { color: rgba(255,255,255,0.6); transition: var(--transition); } .breadcrumb a:hover { color: white; } .breadcrumb-sep { opacity: 0.4; } /* ===== SECTION HEADERS ===== */ .section-label { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; } .section-title { font-size: clamp(28px, 3.5vw, 42px); font-weight: 800; letter-spacing: -0.8px; line-height: 1.15; margin-bottom: 16px; text-wrap: balance; } .section-title span { color: var(--blue); } .section-sub { font-size: 17px; color: var(--gray-500); max-width: 560px; line-height: 1.65; } .section-header-center { text-align: center; } .section-header-center .section-sub { margin: 0 auto; } /* ===== CARDS ===== */ .card { background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); padding: 28px; transition: var(--transition); } .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--blue-mid); } .card-icon { width: 52px; height: 52px; background: var(--blue-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .card-icon svg { color: var(--blue); } .card-product { display: block; height: 110px; width: auto; margin: 0 0 4px; object-fit: contain; transition: transform 0.25s ease; } .service-card:hover .card-product { transform: translateY(-2px) scale(1.03); transform-origin: left center; } .card h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; } .card p { font-size: 15px; color: var(--gray-500); line-height: 1.6; } .card-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; font-size: 14px; color: var(--gray-700); } .card-check svg { color: var(--blue); flex-shrink: 0; margin-top: 2px; } /* Grid layouts */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .grid-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } /* ===== SERVICES SECTION ===== */ .services-scroll { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 16px; scrollbar-width: thin; scroll-snap-type: x mandatory; } .services-scroll::-webkit-scrollbar { height: 4px; } .services-scroll::-webkit-scrollbar-track { background: var(--gray-100); border-radius: 2px; } .services-scroll::-webkit-scrollbar-thumb { background: var(--blue-mid); border-radius: 2px; } .service-card { display: block; text-decoration: none; color: inherit; flex-shrink: 0; width: 260px; scroll-snap-align: start; background: white; border-radius: var(--radius-md); border: 1px solid var(--gray-200); padding: 24px; transition: var(--transition); } .service-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); } .service-card h3 { font-size: 17px; font-weight: 700; margin: 14px 0 10px; } .service-card p { font-size: 14px; color: var(--gray-500); line-height: 1.6; margin-bottom: 14px; } .service-card-checks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .service-card-link { font-size: 14px; font-weight: 600; color: var(--blue); display: flex; align-items: center; gap: 4px; } .service-card-link:hover gap { gap: 8px; } /* Service card with product photo (lead Fridge card) */ .service-card--photo { padding-top: 20px; } .card-photo { width: 88px; height: 88px; background: transparent; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 16px; position: relative; } .card-photo img { width: 94%; height: auto; object-fit: contain; transform: translateY(4%); filter: drop-shadow(0 4px 6px rgba(28,41,78,0.18)); transition: transform 0.25s ease; } .service-card:hover .card-photo img { transform: translateY(2%) scale(1.03); } /* ===== WHY US ===== */ .why-bg { background: var(--gray-50); content-visibility: auto; contain-intrinsic-size: auto 500px; } .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .why-item { background: white; border-radius: var(--radius-md); padding: 28px; border: 1px solid var(--gray-200); display: flex; gap: 18px; } .why-icon { width: 48px; height: 48px; background: var(--blue-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .why-icon svg { color: var(--blue); } .why-item h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .why-item p { font-size: 14px; color: var(--gray-500); } /* ===== STATS ===== */ .stats-bar { background: var(--navy); padding: 48px 0; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; } .stats-grid > div { position: relative; padding: 0 16px; } .stats-grid > div + div::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 60%; background: rgba(255,255,255,0.12); } .stat-number { font-family: var(--font); font-size: 42px; font-weight: 700; color: var(--gold); letter-spacing: -1px; line-height: 1.1; } .stat-number-sm { font-size: 30px; letter-spacing: -0.5px; } .stat-label { font-family: var(--font); font-size: 14px; color: rgba(255,255,255,0.75); font-weight: 500; margin-top: 8px; line-height: 1.4; } /* ===== TESTIMONIALS ===== */ .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .testimonial-card { background: white; border-radius: var(--radius-md); padding: 28px; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); } .testimonial-stars { color: #F59E0B; font-size: 16px; margin-bottom: 14px; letter-spacing: 2px; } .testimonial-text { font-size: 15px; color: var(--gray-700); line-height: 1.7; margin-bottom: 20px; font-style: italic; } .testimonial-author { display: flex; align-items: center; gap: 12px; } .author-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--blue-light); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--blue); font-size: 15px; flex-shrink: 0; } .author-name { font-size: 14px; font-weight: 700; } .author-location { font-size: 13px; color: var(--gray-500); } /* ===== AREAS GRID (compact landmark cards — only inside .areas-grid) ===== */ .areas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .areas-grid .area-card { position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 5/3; background: var(--navy); color: #fff; text-decoration: none; box-shadow: 0 2px 8px rgba(15,30,55,0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; padding: 0; border: none; } .areas-grid .area-card .area-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s ease; } .areas-grid .area-card .area-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,41,78,0.05) 0%, rgba(28,41,78,0.55) 55%, rgba(28,41,78,0.88) 100%); transition: background 0.25s ease; } .areas-grid .area-card .area-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .areas-grid .area-card .area-text { min-width: 0; } .areas-grid .area-card .area-name { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.15; color: #fff; } .areas-grid .area-card .area-sub { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.82); margin-top: 3px; line-height: 1.35; } .areas-grid .area-card .area-arrow { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--navy); display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease, background 0.25s ease; } .areas-grid .area-card .area-arrow svg { width: 12px; height: 12px; } .areas-grid .area-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,30,55,0.14); color: #fff; background: var(--navy); } .areas-grid .area-card:hover .area-bg { transform: scale(1.06); } .areas-grid .area-card:hover .area-overlay { background: linear-gradient(180deg, rgba(28,41,78,0.12) 0%, rgba(28,41,78,0.62) 55%, rgba(28,41,78,0.92) 100%); } .areas-grid .area-card:hover .area-arrow { transform: translateX(2px); background: #FFC83A; } /* Base / fallback .area-card — original quiet link card, used inside service-area pages for the "Appliances We Repair in " service link list. */ .area-card { background: white; border-radius: var(--radius-md); border: 1px solid var(--gray-200); padding: 22px 18px; display: flex; align-items: center; justify-content: space-between; transition: var(--transition); text-decoration: none; color: var(--navy); } .area-card:hover { border-color: var(--blue); background: var(--blue-light); color: var(--blue); box-shadow: var(--shadow-md); } .area-card span { font-size: 15px; font-weight: 600; } @media (max-width: 1024px) { .areas-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { /* Mobile photo-card list — only within .areas-grid */ .areas-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .areas-grid .area-card { aspect-ratio: auto; height: 56px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--gray-200); box-shadow: none; display: flex; align-items: center; gap: 10px; padding: 0; overflow: hidden; } .areas-grid .area-card .area-bg { position: relative; width: 56px; height: 56px; inset: auto; flex-shrink: 0; } .areas-grid .area-card .area-overlay { display: none; } .areas-grid .area-card .area-content { position: static; padding: 0 12px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 100%; flex: 1; } .areas-grid .area-card .area-text { flex: 1; min-width: 0; padding-left: 2px; } .areas-grid .area-card .area-name { font-size: 13px; font-weight: 700; color: var(--navy); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .areas-grid .area-card .area-sub { display: none; } .areas-grid .area-card .area-arrow { width: 22px; height: 22px; background: transparent; color: var(--gold); } .areas-grid .area-card .area-arrow svg { width: 14px; height: 14px; stroke-width: 3; } .areas-grid .area-card:hover { background: var(--gray-50); border-color: var(--gold); transform: none; box-shadow: none; } .areas-grid .area-card:hover .area-bg { transform: none; } } /* ===== CTA BANNER ===== */ .cta-banner { background: var(--navy); padding: 72px 0; content-visibility: auto; contain-intrinsic-size: auto 500px; } .cta-banner .btn-primary { background: var(--navy-deep); box-shadow: none; } .cta-banner .btn-primary:hover { background: #0a1230; box-shadow: none; } .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .cta-banner h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 800; color: white; letter-spacing: -0.8px; margin-bottom: 10px; } .cta-banner p { font-size: 17px; color: rgba(255,255,255,0.65); } .cta-banner .actions { display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; } /* ===== CONTACT FORM ===== */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-group.full { grid-column: 1 / -1; } label { font-size: 14px; font-weight: 600; color: var(--gray-700); } input, select, textarea { font-family: var(--font); font-size: 15px; color: var(--navy); padding: 13px 16px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); background: white; transition: var(--transition); outline: none; width: 100%; } input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); } textarea { resize: vertical; min-height: 130px; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .form-submit { margin-top: 8px; } .success-msg { display: none; background: #F0FDF4; border: 1px solid #86EFAC; color: #166534; padding: 16px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500; } .error-msg { display: none; background: #FEF2F2; border: 1px solid #FCA5A5; color: #991B1B; padding: 16px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500; margin-bottom: 24px; } .error-msg a { color: var(--navy); font-weight: 700; } /* ===== CONTACT INFO ===== */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .contact-info-card { display: flex; gap: 16px; padding: 22px; border-radius: var(--radius-md); border: 1px solid var(--gray-200); margin-bottom: 16px; } .contact-info-icon { width: 44px; height: 44px; background: var(--blue-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-info-icon svg { color: var(--blue); } .contact-info-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--gray-400); margin-bottom: 4px; } .contact-info-value { font-size: 16px; font-weight: 600; color: var(--navy); } .contact-info-sub { font-size: 13px; color: var(--gray-500); margin-top: 2px; } /* ===== BLOG ===== */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .blog-card { background: white; border-radius: var(--radius-md); border: 1px solid var(--gray-200); overflow: hidden; transition: var(--transition); } .blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } .blog-card-img { height: 200px; background: var(--gray-100); overflow: hidden; } .blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .blog-card:hover .blog-card-img img { transform: scale(1.04); } .blog-card-body { padding: 24px; } .blog-tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--blue); background: var(--blue-light); padding: 4px 10px; border-radius: 50px; margin-bottom: 12px; } .blog-card h3 { font-size: 18px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; color: var(--navy); } .blog-card p { font-size: 14px; color: var(--gray-500); line-height: 1.65; margin-bottom: 16px; } .blog-meta { font-size: 13px; color: var(--gray-400); display: flex; align-items: center; gap: 12px; } /* ===== ABOUT ===== */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .team-card { text-align: center; } .team-img { width: 100px; height: 100px; border-radius: 50%; background: var(--blue-light); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 800; color: var(--blue); } .team-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; } .team-role { font-size: 14px; color: var(--blue); font-weight: 600; margin-bottom: 8px; } .team-bio { font-size: 14px; color: var(--gray-500); } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .value-item { text-align: center; padding: 32px 24px; } .value-icon { width: 64px; height: 64px; background: var(--blue-light); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .value-icon svg { color: var(--blue); } .value-item h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; } .value-item p { font-size: 15px; color: var(--gray-500); } /* ===== SERVICE AREA PAGE ===== */ .area-info-grid { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; } .area-sidebar { position: sticky; top: 96px; } .sidebar-card { background: white; border-radius: var(--radius-md); border: 1px solid var(--gray-200); padding: 28px; box-shadow: var(--shadow-md); } .sidebar-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--gray-100); } .sidebar-phone { font-size: 26px; font-weight: 800; color: var(--blue); display: block; margin-bottom: 6px; } .sidebar-hours { font-size: 14px; color: var(--gray-500); margin-bottom: 20px; } .sidebar-services { display: flex; flex-direction: column; gap: 8px; } .sidebar-service { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--gray-700); } .sidebar-service svg { color: var(--blue); flex-shrink: 0; } .problem-list { display: flex; flex-direction: column; gap: 10px; } .problem-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--gray-50); border-radius: var(--radius-sm); border: 1px solid var(--gray-200); } .problem-item svg { color: var(--blue); flex-shrink: 0; margin-top: 2px; } .problem-item-text strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; } .problem-item-text span { font-size: 13px; color: var(--gray-500); } .process-steps { display: flex; flex-direction: column; gap: 0; } .process-step { display: flex; gap: 20px; position: relative; } .process-step:not(:last-child)::before { content: ''; position: absolute; left: 19px; top: 46px; width: 2px; bottom: -20px; background: var(--gray-200); } .step-num { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: white; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .step-content { padding-bottom: 32px; } .step-content h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; } .step-content p { font-size: 14px; color: var(--gray-500); } .brands-grid { display: flex; flex-wrap: wrap; gap: 12px; } .brand-pill { background: white; border: 1.5px solid var(--gray-200); border-radius: 50px; padding: 8px 20px; font-size: 14px; font-weight: 600; color: var(--gray-700); } /* ===== FOOTER ===== */ footer { background: var(--navy); color: rgba(255,255,255,0.8); } .footer-main { padding: 64px 0 40px; } .footer-grid { display: grid; grid-template-columns: 280px 1fr 1fr 1fr; gap: 48px; } .footer-brand .logo-wordmark { color: white; font-size: 22px; } .footer-brand .logo-wordmark span { color: var(--blue-mid); } .footer-tagline { font-size: 14px; color: rgba(255,255,255,0.5); margin-top: 10px; line-height: 1.6; } .footer-col h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.5); margin-bottom: 18px; } .footer-col ul { display: flex; flex-direction: column; gap: 10px; } .footer-col ul a { font-size: 14px; color: rgba(255,255,255,0.7); transition: var(--transition); } .footer-col ul a:hover { color: white; } .footer-bottom { padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.4); } .footer-contact { display: flex; gap: 20px; flex-wrap: wrap; } .footer-contact a { font-size: 14px; color: rgba(255,255,255,0.6); transition: var(--transition); font-weight: 500; } .footer-contact a:hover { color: white; } /* Footer social icons — brand-colored chips */ .footer-social { display: flex; gap: 10px; margin-top: 20px; } .footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: white; transition: var(--transition); } .footer-social-link:hover { transform: translateY(-2px); } .footer-social-yt { background: #FF0000; } .footer-social-yt:hover { background: #d90000; } .footer-social-ig { background: #000; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); } .footer-social-tt { background: #000; } .footer-social-tt:hover { background: #1a1a1a; } .footer-social-fb { background: #1877F2; } .footer-social-fb:hover { background: #0d65d9; } /* ===== UTILITIES ===== */ .text-blue { color: var(--blue); } .text-center { text-align: center; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; } .mb-48 { margin-bottom: 48px; } .mb-64 { margin-bottom: 64px; } .bg-gray { background: var(--gray-50); } .divider { border: none; border-top: 1px solid var(--gray-200); margin: 48px 0; } /* ===== RESPONSIVE ===== */ /* Tablet landscape / small desktop */ @media (max-width: 1024px) { .nav-links, .nav-cta { display: none; } .mobile-btn { display: flex; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .areas-grid { grid-template-columns: repeat(3, 1fr); } .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .area-info-grid { grid-template-columns: 1fr; } .area-sidebar { position: static; } .testimonial-grid { grid-template-columns: repeat(2, 1fr); } .blog-grid { grid-template-columns: repeat(2, 1fr); } .team-grid { grid-template-columns: repeat(2, 1fr); } .service-card { width: 240px; } /* Shrink offer card slightly on narrower desktops */ .hero-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; } } /* Tablet portrait */ @media (max-width: 900px) { .grid-2, .grid-split { grid-template-columns: 1fr; gap: 36px; } .why-grid { grid-template-columns: 1fr 1fr; } .cta-inner { flex-direction: column; text-align: center; align-items: center; } .cta-inner .actions { justify-content: center; } .contact-grid { grid-template-columns: 1fr; gap: 36px; } /* Hero offer card stacks below text on tablet/mobile */ .hero-grid { grid-template-columns: 1fr; gap: 40px; } .offer-card { max-width: 440px; margin: 0 auto; width: 100%; } .hero-bg { background-position: center 30%; background-size: cover; } .hero-overlay { background: linear-gradient(180deg, rgba(28,41,78,0.55) 0%, rgba(28,41,78,0.78) 55%, rgba(28,41,78,0.96) 100%); } } /* Mobile (phones) */ @media (max-width: 768px) { .container { padding: 0 20px; } .section { padding: 52px 0; } .section-sm { padding: 40px 0; } /* Typography */ .hero-title { font-size: clamp(32px, 8vw, 44px); letter-spacing: -1px; } .hero-sub { font-size: 16px; margin-bottom: 28px; } .section-title { font-size: clamp(26px, 6vw, 34px); } .section-sub { font-size: 16px; } /* Hero */ .hero { min-height: auto; } .hero-content { padding: 48px 0 44px; } .hero-bg { background-position: center 30%; background-size: cover; } .hero-overlay { background: linear-gradient(180deg, rgba(28,41,78,0.50) 0%, rgba(28,41,78,0.75) 55%, rgba(28,41,78,0.96) 100%); } .hero-actions { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; } .hero-actions .btn { width: 100%; justify-content: center; min-height: 52px; padding: 14px 24px; font-size: 16px; } .hero-trust { gap: 12px 18px; margin-top: 36px; padding-top: 28px; } .hero-trust-item { font-size: 13px; flex: 0 1 auto; } .hero-grid { gap: 32px; } .offer-inner { padding: 24px 22px 22px; border-radius: 18px; } .offer-amount-value { font-size: 48px; } .offer-glow { inset: -20px -10px; } /* Page hero */ .page-hero { padding: 48px 0 40px; } .page-hero h1 { font-size: clamp(28px, 7vw, 38px); } .page-hero p { font-size: 16px; } .page-hero { background-position: 70% center; } .page-hero::before { background: linear-gradient(170deg, rgba(15,23,42,0.94) 45%, rgba(15,23,42,0.78) 100%); } /* Grids — stack everything */ .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; gap: 16px; } .why-grid { grid-template-columns: 1fr; } /* Testimonials — horizontal swipe carousel on mobile */ .testimonial-grid { display: flex; grid-template-columns: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 14px; padding: 4px 20px 18px; margin: 0 -20px; scroll-snap-type: x mandatory; scroll-padding: 0 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .testimonial-grid::-webkit-scrollbar { display: none; } .testimonial-grid > .testimonial-card { flex: 0 0 86%; max-width: 86%; scroll-snap-align: start; scroll-snap-stop: always; } .blog-grid { grid-template-columns: 1fr; gap: 20px; } .team-grid { grid-template-columns: 1fr 1fr; gap: 20px; } .values-grid { grid-template-columns: 1fr; gap: 16px; } .areas-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .form-grid { grid-template-columns: 1fr; gap: 16px; } /* Footer Services list → 2 columns on mobile (4 left, 4 right). The Services column is the first .footer-col after .footer-brand. Must override `display: flex` from the base rule so CSS columns apply. */ .footer-brand + .footer-col ul { display: block; columns: 2; column-gap: 24px; } .footer-brand + .footer-col ul li { break-inside: avoid; margin-bottom: 10px; /* replaces the flex gap that's now gone */ } .footer-brand + .footer-col ul li:last-child { margin-bottom: 0; } /* Hide the brand tagline on mobile to keep the footer compact */ .footer-tagline { display: none; } /* Services — horizontal swipe carousel on mobile */ .services-scroll { flex-direction: row; overflow-x: auto; gap: 14px; padding: 4px 20px 16px; margin: 0 -20px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-padding-left: 20px; } .service-card { width: 78%; max-width: 300px; flex-shrink: 0; scroll-snap-align: start; } /* Hint that there's more — show partial next card via right padding */ .services-scroll::after { content: ""; flex: 0 0 8px; } /* Stats — 3 columns on mobile too */ .stats-bar { padding: 32px 0; } .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .stats-grid > div { padding: 0 6px; } .stat-number { font-size: 24px; letter-spacing: -0.5px; } .stat-number-sm { font-size: 18px; } .stat-label { font-size: 11px; margin-top: 4px; line-height: 1.3; } /* Cards */ .card { padding: 22px; } .why-item { padding: 22px; gap: 14px; } /* CTA banner */ .cta-banner { padding: 56px 0; } .cta-inner { flex-direction: column; text-align: center; align-items: center; } .cta-inner .actions { justify-content: center; width: 100%; flex-direction: column; } .cta-inner .actions .btn { width: 100%; justify-content: center; min-height: 52px; } /* Contact / footer */ .contact-grid { grid-template-columns: 1fr; } .footer-main { padding: 48px 0 32px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; } .footer-grid > .footer-col:nth-child(1), .footer-grid > .footer-col:nth-child(2) { grid-column: 1 / -1; } /* Mobile footer: split col 3 and col 4 children across the grid so Company (4th col's 2nd h4+ul) sits below the 1st areas column. */ .footer-grid > .footer-col:nth-child(3), .footer-grid > .footer-col:nth-child(4) { display: contents; } .footer-grid > .footer-col:nth-child(3) > h4 { grid-column: 1; grid-row: 3; } .footer-grid > .footer-col:nth-child(3) > ul { grid-column: 1; grid-row: 4; } .footer-grid > .footer-col:nth-child(4) > h4:nth-of-type(1) { grid-column: 2; grid-row: 3; } .footer-grid > .footer-col:nth-child(4) > ul:nth-of-type(1) { grid-column: 2; grid-row: 4; } .footer-grid > .footer-col:nth-child(4) > h4:nth-of-type(2) { grid-column: 1; grid-row: 5; margin-top: 16px !important; } .footer-grid > .footer-col:nth-child(4) > ul:nth-of-type(2) { grid-column: 1; grid-row: 6; } .footer-bottom { flex-direction: column; text-align: center; } /* Dropdown (already hidden in mobile menu) */ .dropdown-wide { grid-template-columns: 1fr; min-width: 200px; } /* Area sidebar */ .area-info-grid { grid-template-columns: 1fr; gap: 36px; } /* Navbar mobile tap target */ .nav-inner { height: 64px; padding: 0 16px; } .mobile-btn { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; margin-left: auto; } .logo img { height: 44px !important; } /* Mobile menu improvements */ .mobile-menu { top: 64px; padding: 20px; } .mobile-menu .btn { min-height: 52px; font-size: 16px; } .mobile-nav-link { padding: 16px 0 !important; font-size: 16px; min-height: 48px; display: flex !important; align-items: center; } .mobile-nav-sub a { padding: 12px 0 !important; min-height: 44px; display: flex !important; align-items: center; font-size: 15px; } /* Process / problem lists */ .process-step { gap: 14px; } .step-content { padding-bottom: 24px; } .step-content h4 { font-size: 15px; } /* Tables of content / generic */ .divider { margin: 36px 0; } /* Page-hero breadcrumb */ .breadcrumb { font-size: 13px; flex-wrap: wrap; } /* Prevent iOS Safari from auto-zooming when tapping form fields. Any input/select/textarea < 16px triggers the zoom on focus. */ input, select, textarea { font-size: 16px; } } /* ===== REDUCED MOTION ===== Honour OS-level reduced-motion preference. Disables hover lifts, scale/translate transforms, and shortens transitions site-wide so the motion-heavy `transition: var(--transition)` rules degrade safely. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .btn-primary:hover, .btn-dark:hover, .btn-gold:hover, .offer-cta:hover, .card:hover, .blog-card:hover, .footer-social-link:hover, .areas-grid .area-card:hover, .areas-grid .area-card:hover .area-bg, .service-card:hover .card-product, .service-card:hover .card-photo img, .blog-card:hover .blog-card-img img, .nav-item:hover .nav-chevron { transform: none !important; } } /* Small phones */ @media (max-width: 480px) { .container { padding: 0 16px; } .areas-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } .stats-grid > div { padding: 0 4px; } .stat-number { font-size: 20px; } .stat-number-sm { font-size: 16px; } .stat-label { font-size: 10px; } .hero-content { padding: 40px 0 36px; } .hero-title { font-size: clamp(28px, 9vw, 38px); } .page-hero { padding: 40px 0 32px; } .section { padding: 44px 0; } .card { padding: 20px; } .card-icon { width: 44px; height: 44px; margin-bottom: 14px; } .nav-inner { padding: 0 14px; } .logo img { height: 40px !important; } .testimonial-card { padding: 22px; } .blog-card-body { padding: 20px; } } /* ===== POST AUTHOR (blog) ===== */ .post-author { display: flex; gap: 18px; align-items: flex-start; margin: 36px 0 8px; padding: 24px; background: var(--gray-50, #F8FAFC); border: 1px solid var(--gray-200); border-left: 4px solid var(--gold, #C9A84C); border-radius: var(--radius-md); } .post-author-avatar { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; letter-spacing: -0.5px; font-family: inherit; } .post-author-text { flex: 1; min-width: 0; } .post-author-label { font-size: 11px; font-weight: 700; color: var(--gray-500); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; } .post-author-name { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 8px; letter-spacing: -0.2px; } .post-author-text p { font-size: 14.5px; color: var(--gray-700, #4B5563); line-height: 1.6; margin: 0 0 10px; } .post-author-link { font-size: 13.5px; font-weight: 600; color: var(--blue); text-decoration: none; } .post-author-link:hover { text-decoration: underline; } @media (max-width: 640px) { .post-author { padding: 18px; gap: 14px; } .post-author-avatar { width: 48px; height: 48px; font-size: 19px; } .post-author-name { font-size: 16px; } .post-author-text p { font-size: 14px; } }