/* Solar Surrey — Bright premium homeowner advisory design */ /* Font loading: Montserrat/Roboto are linked via tags in each page's , not @import (avoids the extra render-blocking round trip). */ :root { --background-main: #F8FAFC; --background-white: #FFFFFF; --background-soft: #F1F5F9; --text-main: #111827; --text-muted: #4B5563; --navy-detail: #0F172A; --deep-blue: #102A43; --teal: #2B91A3; --teal-dark: #1A5A6A; --soft-green: #ABDE99; --soft-green-muted: rgba(171, 222, 153, 0.18); --soft-green-border: rgba(171, 222, 153, 0.45); --border-soft: #E5E7EB; --premium-shadow: rgba(15, 23, 42, 0.10); /* Semantic aliases */ --color-bg: var(--background-main); --color-bg-white: var(--background-white); --color-bg-soft: var(--background-soft); --color-text: var(--text-main); --color-text-muted: var(--text-muted); --color-navy: var(--navy-detail); --color-accent: var(--teal); --color-accent-hover: var(--teal-dark); --color-border: var(--border-soft); --color-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.06); --color-card-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.06), 0 20px 40px rgba(15, 23, 42, 0.08); --font-heading: "Montserrat", "Inter", "Segoe UI", Arial, sans-serif; --font-body: "Roboto", "Inter", "Segoe UI", Arial, sans-serif; --max-width: 74rem; --header-height: 4.5rem; --radius: 0.5rem; --radius-lg: 0.875rem; --radius-xl: 1.125rem; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 3.25rem; --space-xl: 5.5rem; --transition: 0.2s ease; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.72; color: var(--color-text); background: var(--color-bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: var(--teal-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--transition); } a:hover { color: var(--teal); } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--navy-detail); line-height: 1.25; margin-top: 0; font-weight: 600; } h1 { font-size: clamp(1.875rem, 4.5vw, 2.875rem); font-weight: 600; letter-spacing: -0.02em; } h2 { font-size: clamp(1.3125rem, 2.8vw, 1.875rem); letter-spacing: -0.015em; margin-bottom: var(--space-sm); } h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--space-xs); } p { margin-top: 0; margin-bottom: var(--space-sm); } ul, ol { margin-top: 0; margin-bottom: var(--space-sm); padding-left: 1.25rem; } li + li { margin-top: 0.35rem; } .container { width: min(100% - 2.5rem, var(--max-width)); margin-inline: auto; } /* ─── Header — light premium ─── */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 20px rgba(15, 23, 42, 0.04); } .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-height); gap: var(--space-sm); } .logo { display: flex; flex-direction: column; text-decoration: none; flex-shrink: 0; gap: 0.15rem; } .logo-name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--navy-detail); } .logo-name::after { content: ""; display: block; width: 1.75rem; height: 2px; margin-top: 0.2rem; background: linear-gradient(90deg, var(--teal), var(--soft-green)); border-radius: 1px; } .logo-tagline { font-size: 0.6875rem; color: var(--text-muted); font-weight: 400; letter-spacing: 0.03em; } .nav-desktop { display: none; } .nav-desktop ul { display: flex; align-items: center; gap: 0.125rem; list-style: none; margin: 0; padding: 0; } .nav-desktop li { margin-top: 0; } .nav-desktop a { display: block; padding: 0.5rem 0.875rem; color: var(--text-muted); text-decoration: none; font-family: var(--font-heading); font-size: 0.875rem; font-weight: 500; border-radius: var(--radius); white-space: nowrap; transition: color var(--transition), background var(--transition); } .nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--navy-detail); background: var(--soft-green-muted); box-shadow: inset 0 -2px 0 var(--soft-green); } .header-cta { display: none; } /* ─── Buttons — refined, no neon gradients ─── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8125rem 1.625rem; font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 500; line-height: 1.3; text-decoration: none; border-radius: var(--radius); border: 1.5px solid transparent; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition); } .btn-primary { background: var(--teal); color: #fff; border-color: var(--teal); box-shadow: 0 2px 12px rgba(43, 145, 163, 0.22); } .btn-primary:hover { background: var(--soft-green); border-color: var(--soft-green-border); color: var(--navy-detail); box-shadow: 0 4px 16px rgba(171, 222, 153, 0.35); } .btn-secondary { background: var(--background-white); color: var(--navy-detail); border-color: var(--border-soft); } .btn-secondary:hover { background: var(--soft-green-muted); color: var(--navy-detail); border-color: var(--soft-green-border); } .btn-lg { padding: 0.9375rem 1.875rem; font-size: 0.975rem; } /* ─── Mobile menu ─── */ .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 2.75rem; height: 2.75rem; padding: 0.5rem; background: var(--background-white); border: 1px solid var(--border-soft); border-radius: var(--radius); cursor: pointer; flex-shrink: 0; } .menu-toggle-line { display: block; width: 100%; height: 2px; background: var(--navy-detail); border-radius: 1px; transition: transform var(--transition), opacity var(--transition); } .menu-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-mobile { display: none; border-top: 1px solid var(--border-soft); background: var(--background-white); padding: var(--space-sm) 0 var(--space-md); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); } .nav-mobile.is-open { display: block; } .nav-mobile ul { list-style: none; margin: 0; padding: 0; } .nav-mobile a { display: block; padding: 0.875rem 1rem; color: var(--text-main); text-decoration: none; font-family: var(--font-heading); font-size: 0.975rem; font-weight: 500; border-bottom: 1px solid var(--border-soft); } .nav-mobile a:hover, .nav-mobile a[aria-current="page"] { background: var(--soft-green-muted); color: var(--navy-detail); box-shadow: inset 3px 0 0 var(--soft-green); } .nav-mobile .btn { margin: var(--space-md) 1rem 0; width: calc(100% - 2rem); } @media (min-width: 960px) { .menu-toggle { display: none; } .nav-desktop { display: block; } .header-cta { display: inline-flex; padding: 0.625rem 1.25rem; font-size: 0.8125rem; } .nav-mobile { display: none !important; } } /* ─── Hero — bright premium (homepage) ─── */ .hero { position: relative; padding: var(--space-xl) 0; background: linear-gradient(180deg, var(--background-white) 0%, var(--background-main) 100%); overflow: hidden; } .hero::before { content: ""; position: absolute; top: -20%; right: -10%; width: 55%; height: 80%; background: radial-gradient(ellipse at center, rgba(43, 145, 163, 0.06) 0%, transparent 70%); pointer-events: none; } .hero::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-soft), transparent); pointer-events: none; } .hero-grid { position: relative; z-index: 1; display: grid; gap: var(--space-lg); align-items: center; } .hero-content { display: flex; flex-direction: column; gap: var(--space-md); } .hero-eyebrow { display: inline-block; width: fit-content; font-family: var(--font-heading); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--navy-detail); margin-bottom: 0; padding: 0.375rem 0.875rem; background: var(--soft-green-muted); border: 1px solid var(--soft-green-border); border-radius: 999px; } .hero h1 { color: var(--navy-detail); max-width: 20ch; } .hero-lead { font-size: clamp(1.0625rem, 2vw, 1.1875rem); color: var(--text-muted); max-width: 34rem; margin-bottom: 0; line-height: 1.7; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); padding-top: var(--space-xs); } .hero-visual { background: var(--background-white); border-radius: var(--radius-xl); border: 1px solid var(--border-soft); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 16px 48px var(--premium-shadow); } .hero-visual-inner { text-align: left; padding: var(--space-lg); width: 100%; border-left: 3px solid var(--soft-green); margin: var(--space-md); background: linear-gradient(135deg, var(--background-main) 0%, var(--background-white) 100%); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } .hero-icon { display: none; } .hero-visual-label { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; color: var(--navy-detail); margin-bottom: var(--space-md); line-height: 1.4; } .hero-trust-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .hero-trust-list li { position: relative; font-size: 0.9375rem; font-weight: 400; color: var(--text-muted); padding: 0.75rem 0 0.75rem 1.625rem; border-bottom: 1px solid var(--border-soft); letter-spacing: normal; text-transform: none; background: none; border-left: none; border-right: none; border-top: none; border-radius: 0; } .hero-trust-list li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 0.875rem; height: 0.875rem; background: var(--soft-green-muted); border: 1px solid var(--soft-green-border); border-radius: 50%; } .hero-trust-list li::after { content: ""; position: absolute; left: 0.3rem; top: 1.2rem; width: 0.3rem; height: 0.5rem; border: solid var(--navy-detail); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } .hero-trust-list li:last-child { border-bottom: none; padding-bottom: 0; } .hero-trust-list li:first-child { padding-top: 0; } @media (min-width: 768px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; } } /* Inner page hero — light with subtle accent */ .hero-compact { position: relative; padding: var(--space-lg) 0; background: var(--background-white); border-bottom: 1px solid var(--border-soft); } .hero-compact::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--teal), var(--soft-green)); opacity: 0.7; } .hero-compact .container, .hero-compact .hero-content { position: relative; } .hero-compact .hero-content { max-width: 44rem; padding-left: var(--space-sm); } .hero-compact h1 { color: var(--navy-detail); } .hero-compact .hero-lead { color: var(--text-muted); } /* Premium page imagery */ .hero-aside { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; } .hero-photo { margin: 0; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-soft); box-shadow: 0 16px 48px var(--premium-shadow); aspect-ratio: 3 / 2; background: var(--background-main); } .hero-photo img, .hero-figure img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-aside .hero-trust-list { padding: var(--space-md); background: var(--background-white); border-radius: var(--radius-lg); border: 1px solid var(--border-soft); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04); } .hero-compact--image { padding: var(--space-lg) 0 var(--space-md); } .hero-compact-grid { display: grid; gap: var(--space-lg); align-items: center; min-width: 0; } .hero-figure { margin: 0; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-soft); box-shadow: 0 12px 40px var(--premium-shadow); aspect-ratio: 3 / 2; background: var(--background-main); } @media (min-width: 768px) { .hero-compact-grid { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; } .hero-compact--image .hero-content { max-width: none; } } /* ─── Sections ─── */ .section { padding: var(--space-lg) 0; } .section-alt { background: var(--background-white); } .section-soft { background: var(--background-soft); } .section-header { max-width: 40rem; margin-bottom: var(--space-lg); } .section-header p { color: var(--text-muted); font-size: 1.0625rem; line-height: 1.72; } .section-label { display: inline-block; font-family: var(--font-heading); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--navy-detail); margin-bottom: var(--space-sm); padding-bottom: 0.375rem; border-bottom: 2px solid var(--soft-green); } /* ─── Cards — bright elegant ─── */ .card-grid { display: grid; gap: var(--space-md); } @media (min-width: 640px) { .card-grid-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .card-grid-3 { grid-template-columns: repeat(3, 1fr); } .card-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .card-grid-4 { grid-template-columns: repeat(4, 1fr); } } .card { position: relative; display: flex; flex-direction: column; background: var(--background-white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-md) calc(var(--space-md) + 0.25rem); box-shadow: var(--color-card-shadow); transition: box-shadow var(--transition), border-color var(--transition); } .card h3 { min-height: calc(1.25em * 2); } .card::before { content: ""; position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 2px; background: linear-gradient(90deg, transparent, var(--soft-green), transparent); opacity: 0.65; } .card:hover { box-shadow: var(--color-card-shadow-hover); border-color: var(--soft-green-border); } .card:hover::before { opacity: 1; } .card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; } .card-link:hover h3 { color: var(--teal-dark); } .card-icon { display: none; } .card p { color: var(--text-muted); font-size: 0.9375rem; margin-bottom: var(--space-md); line-height: 1.65; flex-grow: 1; } .card-more { font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 500; color: var(--teal); letter-spacing: 0.01em; margin-top: auto; } .card-link:hover .card-more { color: var(--navy-detail); } .card-media::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.3; } .card-media > * { position: relative; z-index: 1; } .card-media h3, .card-media p, .card-media .card-more { text-shadow: 0 0 6px var(--background-white), 0 0 6px var(--background-white), 0 1px 3px var(--background-white); } .card-media--solar::after { background-image: url("https://ik.imagekit.io/iwx5svscw/Solar%20system/Solar.png?updatedAt=1759772813336&tr=w-600,q-85,f-webp"); } .card-media--battery::after { background-image: url("https://ik.imagekit.io/iwx5svscw/Battery/Home%20Battery%208.png?updatedAt=1782935001970&tr=w-600,q-85,f-webp"); } .card-media--ev::after { background-image: url("https://ik.imagekit.io/iwx5svscw/EV%20Charging/EV%203.png?updatedAt=1764797807208&tr=w-600,q-85,f-webp"); } .card-media--50::after { opacity: 0.5; } .card-media--weybridge::after { background-image: url("https://ik.imagekit.io/iwx5svscw/Areas%20We%20Serve/Weybridge.png?updatedAt=1783282024244&tr=w-600,q-85,f-webp"); } .card-media--cobham::after { background-image: url("https://ik.imagekit.io/iwx5svscw/Areas%20We%20Serve/Cobham.png?updatedAt=1783282024213&tr=w-600,q-85,f-webp"); } .card-media--guildford::after { background-image: url("https://ik.imagekit.io/iwx5svscw/Areas%20We%20Serve/Guildford.png?updatedAt=1783282024203&tr=w-600,q-85,f-webp"); } .card-media--virginia-water::after { background-image: url("https://ik.imagekit.io/iwx5svscw/Areas%20We%20Serve/Virginia%20Water.png?updatedAt=1783282024230&tr=w-600,q-85,f-webp"); } /* ─── Feature list ─── */ .feature-list { list-style: none; padding: 0; margin: 0; } .feature-list li { position: relative; padding-left: 1.75rem; margin-bottom: var(--space-sm); line-height: 1.65; color: var(--text-main); } .feature-list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 1rem; height: 1rem; background: var(--soft-green-muted); border: 1px solid var(--soft-green-border); border-radius: 50%; } .feature-list li::after { content: ""; position: absolute; left: 0.35rem; top: 0.72em; width: 0.3rem; height: 0.5rem; border: solid var(--navy-detail); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } /* ─── Content grid ─── */ .content-grid { display: grid; gap: var(--space-lg); } @media (min-width: 768px) { .content-grid-2 { grid-template-columns: 1fr 1fr; align-items: start; } } /* ─── Info & disclaimer boxes ─── */ .info-box { background: var(--soft-green-muted); border: 1px solid var(--soft-green-border); border-left: 3px solid var(--soft-green); border-radius: var(--radius-lg); padding: var(--space-md); margin: var(--space-md) 0; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04); } .info-box p:last-child { margin-bottom: 0; } .disclaimer-box { background: var(--background-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-md); font-size: 0.9375rem; color: var(--text-muted); margin: var(--space-md) 0; } .disclaimer-box p:last-child { margin-bottom: 0; } /* ─── FAQ ─── */ .faq-list { display: flex; flex-direction: column; gap: var(--space-sm); } .faq-item { background: var(--background-white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03); transition: border-color var(--transition), box-shadow var(--transition); } .faq-item.is-open { border-color: var(--soft-green-border); box-shadow: var(--color-card-shadow); } .faq-item.is-open .faq-question { box-shadow: inset 3px 0 0 var(--soft-green); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 1.125rem var(--space-md); background: transparent; border: none; font-family: var(--font-heading); font-size: 0.975rem; font-weight: 500; color: var(--navy-detail); text-align: left; cursor: pointer; transition: background var(--transition); } .faq-question:hover { background: var(--background-main); } .faq-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; position: relative; } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--teal); border-radius: 1px; transition: transform var(--transition), opacity var(--transition); } .faq-icon::before { width: 12px; height: 1.5px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .faq-icon::after { width: 1.5px; height: 12px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .faq-answer { display: none; padding: 0 var(--space-md) 1.125rem; color: var(--text-muted); line-height: 1.7; font-size: 0.975rem; } .faq-item.is-open .faq-answer { display: block; } /* ─── Breadcrumbs ─── */ .breadcrumbs { position: relative; padding: 0.875rem 0; font-size: 0.8125rem; color: var(--navy-detail); } .breadcrumbs::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: var(--soft-green); border-bottom: 1px solid var(--soft-green-border); z-index: -1; } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } .breadcrumbs li { display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; margin-top: 0; } .breadcrumbs li:not(:last-child)::after { content: "/"; color: rgba(15, 23, 42, 0.35); margin-left: 0.25rem; } .breadcrumbs a { color: var(--navy-detail); text-decoration: none; font-weight: 500; } .breadcrumbs a:hover { color: var(--teal-dark); } /* ─── CTA band — single dark accent (5%) ─── */ .cta-band { background: var(--navy-detail); color: #fff; padding: calc(var(--space-lg) + 0.5rem) 0; text-align: center; } .cta-band h2 { color: #fff; font-weight: 500; margin-bottom: var(--space-sm); } .cta-band p { color: rgba(255, 255, 255, 0.78); max-width: 36rem; margin-inline: auto; margin-bottom: var(--space-md); font-size: 1.0625rem; line-height: 1.65; } .cta-band .btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .cta-band .btn-primary:hover { background: var(--soft-green); border-color: var(--soft-green); color: var(--navy-detail); box-shadow: 0 4px 20px rgba(171, 222, 153, 0.3); } .cta-note { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.5); margin-top: var(--space-md); max-width: 32rem; margin-inline: auto; line-height: 1.55; } .cta-note a { color: var(--soft-green); text-decoration: underline; } /* CTA band with background image */ .cta-band--bg-image { position: relative; background-color: var(--background-main); background-image: url("https://ik.imagekit.io/iwx5svscw/SolarIQ.ai/SolarIQ%20Background%201.png?updatedAt=1774819525895"); background-size: cover; background-position: center; overflow: hidden; } .cta-band--bg-image .container { position: relative; z-index: 1; } .cta-band--bg-image h2 { color: #fff; } .cta-band--bg-image p { color: rgba(255, 255, 255, 0.88); } .cta-band--bg-image .cta-note { color: rgba(255, 255, 255, 0.92); max-width: 34rem; margin-inline: auto; padding: 0.875rem 1.125rem; background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius); backdrop-filter: blur(6px); text-shadow: 0 1px 2px rgba(15, 23, 42, 0.4); line-height: 1.55; } .cta-band--bg-image .cta-note a { color: var(--soft-green); text-shadow: none; font-weight: 500; } .cta-band--bg-image .btn-primary { background: #fff; border-color: #fff; color: var(--teal-dark); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.18); } .cta-band--bg-image .btn-primary:hover { background: var(--soft-green); border-color: var(--soft-green); color: var(--navy-detail); box-shadow: 0 4px 20px rgba(171, 222, 153, 0.35); } /* Light bridge between dark/image CTA and footer */ .section-bridge { background: linear-gradient(180deg, var(--background-white) 0%, var(--background-main) 100%); border-top: 1px solid var(--border-soft); padding: 2.25rem 0; text-align: center; } .section-bridge-inner { position: relative; padding-top: 0.5rem; } .section-bridge-inner::before { content: ""; display: block; width: 2.5rem; height: 2px; margin: 0 auto 1.25rem; background: linear-gradient(90deg, var(--teal), var(--soft-green)); border-radius: 1px; } .section-bridge p { margin: 0 auto; max-width: 28rem; font-size: 0.9375rem; color: var(--text-muted); line-height: 1.65; } .section-bridge a { color: var(--teal-dark); font-weight: 500; text-decoration: none; } .section-bridge a:hover { color: var(--teal); text-decoration: underline; } /* ─── Sticky mobile CTA — light bar ─── */ .sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; padding: 0.75rem var(--space-sm); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); border-top: 1px solid var(--border-soft); box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08); } .sticky-cta .btn { width: 100%; } @media (max-width: 959px) { .sticky-cta { display: block; } body.has-sticky-cta { padding-bottom: 4.5rem; } } /* ─── Footer — dark closing detail only ─── */ .site-footer { background: var(--navy-detail); color: rgba(255, 255, 255, 0.82); padding: calc(var(--space-lg) + 0.5rem) 0 var(--space-md); border-top: 3px solid var(--soft-green); } .footer-grid { display: grid; gap: var(--space-lg); margin-bottom: var(--space-lg); } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .footer-grid { grid-template-columns: 2fr repeat(4, 1fr); gap: 2rem; } } .footer-brand .footer-heading { font-size: 1.0625rem; text-transform: none; letter-spacing: -0.01em; color: #fff; font-weight: 500; margin-bottom: var(--space-sm); } .footer-brand p { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.6); max-width: 22rem; line-height: 1.65; } .footer-heading { font-family: var(--font-heading); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(171, 222, 153, 0.75); margin-bottom: var(--space-sm); } .footer-links { list-style: none; margin: 0; padding: 0; } .footer-links li { margin-bottom: 0.5rem; } .footer-links a { color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 0.9375rem; transition: color var(--transition); } .footer-links a:hover { color: var(--soft-green); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: var(--space-md); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.45); line-height: 1.6; } .footer-bottom p { margin-bottom: 0.5rem; } .footer-bottom p:first-child { color: rgba(255, 255, 255, 0.58); } /* ─── Legal & guide pages ─── */ .legal-content { max-width: 44rem; } .legal-content h2 { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--border-soft); font-weight: 500; } .legal-content h2:first-of-type { margin-top: var(--space-md); padding-top: 0; border-top: none; } .guide-meta { display: inline-block; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-detail); margin-bottom: var(--space-md); padding: 0.3rem 0.75rem; background: var(--soft-green-muted); border: 1px solid var(--soft-green-border); border-radius: 999px; } /* ─── Contact ─── */ .contact-grid { display: grid; gap: var(--space-lg); } @media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; } } .contact-card { background: var(--background-white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--color-card-shadow); } .contact-card h2, .contact-card h3 { margin-top: 0; } .contact-card h2 { border-top: none; padding-top: 0; font-weight: 500; } /* ─── Tables ─── */ .table-wrap { overflow-x: auto; margin: var(--space-md) 0; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--color-card-shadow); background: var(--background-white); } table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } th, td { padding: 0.875rem 1.125rem; text-align: left; border-bottom: 1px solid var(--border-soft); } th { background: var(--background-main); font-family: var(--font-heading); font-weight: 500; color: var(--navy-detail); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; } tr:last-child td { border-bottom: none; } /* ─── Utilities ─── */ .text-muted { color: var(--text-muted); } .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mb-lg { margin-bottom: var(--space-lg); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ─── Mobile polish ─── */ @media (max-width: 767px) { :root { --space-lg: 2.5rem; --space-xl: 3.75rem; } .hero h1 { max-width: none; } .hero-actions .btn, .hero-compact .hero-actions .btn { width: 100%; } .hero-aside .hero-trust-list { padding: var(--space-sm); } .hero-compact-grid { gap: var(--space-md); } .logo-name::after { width: 1.5rem; } } @media (min-width: 768px) { .hero-actions .btn { width: auto; } }