/* ============================================================ KündigungExpress — Global Stylesheet style.css · Version 1.0 USAGE: Add this single line to every page's , replacing the entire block: PAGE TYPES COVERED: 1. Homepage (index.php) 2. Cluster pages (handyvertrag-kuendigen.html, fitnessstudio-vertrag-kuendigen.html) 3. SEO pages (kuendigungsfrist-handyvertrag.html, etc.) 4. Brand pages (telekom-kuendigung.html, etc.) ============================================================ */ /* ============================================================ 1. DESIGN TOKENS (CSS Variables) ============================================================ */ :root { /* Colors */ --bg: #F7F9FC; --card: #FFFFFF; --text: #0F172A; --muted: #475569; --border: #E2E8F0; --btn: #16A34A; --btnText: #FFFFFF; --soft: #F1F5F9; --softText: #334155; --soft-strong: #EAF7EF; /* Primary brand green — used for in-content links */ --primary: #16A34A; /* Green accents */ --green-soft-bg: rgba(22, 163, 74, 0.05); --green-soft-bg-strong: rgba(22, 163, 74, 0.08); --green-soft-shadow: 0 10px 24px rgba(22, 163, 74, 0.12); /* Spacing scale (fluid) */ --space-xl: clamp(40px, 5vw, 56px); --space-lg: clamp(28px, 3.5vw, 44px); --space-md: clamp(18px, 2.4vw, 28px); --space-sm: clamp(12px, 1.5vw, 18px); /* Section spacing */ --space-section: clamp(24px, 3.5vw, 40px); --space-section-tight: clamp(18px, 2.4vw, 28px); --space-card: clamp(18px, 2.2vw, 28px); } /* ============================================================ 2. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); } body { margin: 0; font-family: Arial, sans-serif; background: var(--bg); color: var(--text); } h1 { font-size: clamp(26px, 5vw, 38px); line-height: 1.15; margin: 0 0 14px; } h2 { font-size: 22px; margin: 0 0 var(--space-section-tight); color: var(--text); } h3 { font-size: 18px; margin: 22px 0 8px; } h4 { font-size: 16px; margin: 0 0 8px; } p { line-height: 1.7; color: var(--muted); margin: 0 0 14px; } ul { list-style: none; padding-left: 0; margin: 12px 0; } ul li { margin-bottom: 8px; } a { text-decoration: none; color: inherit; } /* In-content links — green everywhere except nav, header, footer, CTAs */ .card a:not(.btn):not(.selection-cta):not(.studio-pill):not(.card-link):not(.vertical-card):not(.popular-card):not(.hub-link), .page-content a:not(.btn):not(.selection-cta):not(.studio-pill):not(.card-link), .seo-page a:not(.btn) { color: var(--primary); font-weight: 700; text-decoration: none; } /* Brand name always black — must come after the green rule */ .brand a, header .brand a, .site-header .brand a, .wrap .brand a, .page-content .brand a, .seo-page .brand a { color: var(--text) !important; font-weight: 900 !important; text-decoration: none !important; } /* Footer links always grey */ footer a, footer a:visited, footer a:hover, footer a:active { color: #64748B !important; font-weight: normal !important; text-decoration: none !important; } .wrap p a:not(.btn):hover, .wrap li a:not(.btn):hover { opacity: 0.85; } /* Footer and nav links always grey — override everything */ footer a, footer a:visited, footer a:hover, footer a:active, nav a, nav a:visited, nav a:hover, nav a:active, .nav a, .nav a:visited, .nav a:hover, .nav a:active { color: inherit !important; text-decoration: none !important; font-weight: normal !important; } /* ============================================================ 3. LAYOUT ============================================================ */ .wrap { max-width: 980px; margin: 0 auto; padding: 24px 24px 8px; } @media (min-width: 1200px) { .wrap { padding: 24px 48px; } } main > section { margin-top: var(--space-section); } main > section:first-child, main > section:first-of-type { margin-top: 0; } /* ============================================================ 4. HEADER & NAVIGATION ============================================================ */ /* Desktop header — used on homepage & cluster pages */ header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } header a { text-decoration: none; color: inherit; } .brand { font-weight: 900; font-size: 20px; } .brand a { color: var(--text); text-decoration: none !important; font-weight: 900 !important; } nav a, .nav a { margin-left: 16px; color: var(--muted); font-size: 14px; text-decoration: none; } nav a:hover, .nav a:hover { color: var(--muted); opacity: 0.9; } /* .top — alternate desktop header used on SEO & brand pages */ .top { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; } /* Mobile sticky header (hidden on desktop) */ .site-header { display: none; } /* Mobile bottom CTA bar (hidden on desktop) */ .mobile-cta { display: none; } /* ============================================================ 5. FOOTER ============================================================ */ footer { margin-top: 16px; padding-bottom: 8px; text-align: center; font-size: 12px; color: #64748B; border-top: none; } footer a, footer a:visited, footer a:hover, footer a:active, nav a, nav a:visited, nav a:hover, nav a:active, .nav a, .nav a:visited, .nav a:hover, .nav a:active { color: inherit !important; text-decoration: none !important; font-weight: normal !important; } footer p { margin: 0 0 3px; color: #64748B; font-size: 12px; line-height: 1.5; } footer p:last-child { margin-bottom: 0; } /* Desktop footer spacing */ @media (min-width: 641px) { footer { padding: 8px 0 16px; } } /* ============================================================ 6. BUTTONS ============================================================ */ /* Primary CTA button — used on homepage & cluster pages */ .btn-primary { display: inline-block; background: var(--btn); color: #fff; padding: 16px 28px; border-radius: 16px; font-weight: 900; font-size: 16px; border: none; cursor: pointer; transition: all 0.2s ease; text-decoration: none !important; } .btn-primary:hover { filter: brightness(0.95); text-decoration: none !important; } /* .btn — same style, used on SEO & brand pages */ .btn { display: inline-block; background: var(--btn); color: #fff !important; padding: 14px 22px; border-radius: 16px; font-weight: 900; font-size: 16px; text-decoration: none !important; transition: all 0.2s ease; } .btn:hover { filter: brightness(0.95); } /* ============================================================ 7. TRUST ELEMENTS ============================================================ */ .trust-inline { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 14px; color: var(--softText); } .trust-inline span { background: var(--soft); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; } .trust-line { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 22px; font-size: 14px; color: #334155; justify-content: center; } .trust-line span { background: #F1F5F9; padding: 6px 12px; border-radius: 999px; font-weight: 500; } .trust-bar { margin-top: 22px; background: var(--soft); border: 1px solid var(--border); border-radius: 16px; padding: 14px 18px; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--softText); } .price-note { margin-top: 16px; font-weight: 700; color: #16A34A; } .mini-trust, .micro-trust, .hero-trust { margin-top: 14px; font-size: 13px; color: #64748B; } /* ============================================================ 8. HERO — Homepage ============================================================ */ .hero { background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 44px 36px; text-align: center; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06); margin-bottom: var(--space-section); } .hero h1 { text-align: center; margin: 0 auto 16px auto; max-width: 24ch; } .hero-sub { font-size: 16px; max-width: 620px; margin: 0 auto 20px; color: var(--muted); } /* ============================================================ 9. HEADINGS — Page-type alignment rules Homepage + Cluster: headings centered SEO + Brand pages: headings left-aligned Use .page-seo or .page-brand class on to activate left-aligned mode. Or use .text-left on a section. ============================================================ */ /* Default (homepage/cluster): centered */ h1 { text-align: center; max-width: 20ch; margin: 0 auto 16px auto !important; line-height: 1.15; } h2 { text-align: center; margin: 0 auto 14px auto !important; } h3 { text-align: center; margin: 0 auto 10px auto !important; } /* SEO & Brand pages: left-aligned Add class="page-content" to your outer .wrap or a parent div */ .page-content h1 { text-align: left !important; max-width: 30ch; margin: 0 0 20px 0 !important; line-height: 1.15; font-size: clamp(26px, 4vw, 36px); } .page-content h2 { text-align: left; margin: 40px 0 16px 0 !important; font-size: 22px; color: var(--text); } .page-content h3 { text-align: left; margin: 28px 0 12px 0 !important; font-size: 18px; color: var(--text); } .page-content h4 { text-align: left; margin: 20px 0 10px 0 !important; font-size: 16px; color: var(--text); } /* cta-mid always centered — overrides page-content left-align */ .cta-mid h1, .cta-mid h2, .cta-mid h3, .cta-mid h4, .page-content .cta-mid h1, .page-content .cta-mid h2, .page-content .page-content .cta-mid h2, .page-content .cta-mid h3, .page-content .cta-mid h4, .page-content .card .cta-mid h2, .page-content .card .cta-mid h3, .page-content .card .cta-mid h4 { text-align: center !important; } /* First h2 after h1 — tighter gap */ .page-content h1 + h2, .page-content h1 + p + h2 { margin-top: 28px !important; } /* ============================================================ BRAND/FITNESS PAGE — First CTA block (below H1) Button, trust-inline, pill-inline left-aligned on desktop, centered on mobile ============================================================ */ .page-content .card > .trust-inline, .page-content .card > .pill-inline { justify-content: flex-start; } @media (max-width: 640px) { .page-content .card > .trust-inline, .page-content .card > .pill-inline { justify-content: center; } } /* Paragraphs inside page-content */ .page-content p { font-size: 16px; line-height: 1.75; color: var(--muted); margin-bottom: 16px; } /* Lists inside page-content */ .page-content ul li, .page-content ol li { font-size: 16px; line-height: 1.7; color: var(--muted); padding: 4px 0; } /* Links inside page-content lists stay green */ .page-content ul li a, .page-content ol li a { color: var(--primary); font-weight: 700; } @media (min-width: 641px) { h2 { font-size: 24px; } } /* ============================================================ 10. WHY SECTION — Homepage 4-column feature grid ============================================================ */ .why-section { background: #F8FAFC; padding: 36px 0; } .why-section > .wrap { padding-top: 0; padding-bottom: 0; } .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; } .why-card { background: #FFFFFF; padding: 28px; display: flex; flex-direction: column; border-radius: 14px; border: 1px solid #E2E8F0; transition: all 0.25s ease; } .why-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); } .why-card h3 { margin-bottom: 10px; font-size: 17px; } .why-card p { font-size: 14px; color: #475569; } /* ============================================================ 11. VERTICAL CARDS — Homepage cluster selector ============================================================ */ .section-title { text-align: center; margin-bottom: 28px; } .vertical-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .vertical-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 32px; text-decoration: none; color: inherit; transition: all 0.25s ease; } .vertical-card:hover { transform: translateY(-4px); border-color: #16A34A; box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15), 0 14px 36px rgba(22, 163, 74, 0.15); } .vertical-icon { font-size: 28px; margin-bottom: 14px; } .vertical-card h3 { margin: 0 0 10px; font-size: 20px; } .vertical-cta { margin-top: 14px; font-weight: 800; color: #16A34A; } /* ============================================================ 12. HUB BLOCK — Internal link sections ============================================================ */ .hub-block { margin-top: 28px; } .hub-inner { background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 40px 48px; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04); } .hub-inner h2, .hub-inner h3 { padding-top: 8px; } .hub-title { text-align: center; font-size: 20px; margin: 0 0 8px; } .hub-sub { text-align: center; font-size: 14px; margin: 0 0 28px; } .hub-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } .hub-columns > div:last-child { border-left: 1px solid var(--border); padding-left: 40px; } .hub-col-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 800; color: #16A34A; margin-bottom: 14px; } .hub-links { display: flex; flex-direction: column; gap: 14px; } .hub-links a { font-weight: 700; color: var(--text); text-decoration: none; transition: 0.2s ease; } .hub-links a:hover { color: #16A34A; } /* ============================================================ 13. CTA FINAL — Bottom conversion block ============================================================ */ .cta-final { background: var(--card); border: 1px solid rgba(22, 163, 74, 0.25); border-radius: 24px; padding: var(--space-card); text-align: center; margin-top: var(--space-section); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); } .cta-final h2 { margin: 0 0 12px; } .cta-final > p { margin: 0 0 12px; } .cta-final .btn-primary, .cta-final .btn { margin: 0 0 12px; } .cta-final .micro-trust, .cta-final .hero-trust { margin: 0; } .cta-actions { display: flex; flex-direction: column; gap: 16px; max-width: 420px; margin: 24px auto 0; } /* ============================================================ 14. SEO BOX — Text content section ============================================================ */ .seo-section { padding: 0; } .seo-section > .wrap { padding: 0; } .seo-box { padding: 36px 40px; max-width: 100%; border-radius: 24px; border: 1px solid var(--border); background: var(--card); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04); } .seo-box h2 { font-size: 20px; } .seo-box p { color: #475569; line-height: 1.6; } /* ============================================================ 15. POPULAR SECTION — Brand quick-links grid ============================================================ */ .popular-section { padding: 0; background: transparent; } .popular-section > .wrap { background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 28px 36px !important; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04); } .popular-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .popular-card { display: flex; align-items: center; justify-content: center; min-height: 64px; background: #F8FAFC; padding: 20px; border-radius: 12px; text-align: center; border: 1px solid #E2E8F0; font-weight: 700; color: #16A34A; text-decoration: none !important; transition: all 0.25s ease; } .popular-card:hover { background: #FFFFFF; color: #0F172A; transform: translateY(-4px); border-color: #16A34A; box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15), 0 14px 36px rgba(22, 163, 74, 0.15); } a.popular-card, a.popular-card:hover, a.popular-card:visited { text-decoration: none !important; } /* ============================================================ 16. SOFT BLOCK — Generic highlighted block ============================================================ */ .soft-block { background: var(--soft); border: 1px solid var(--border); border-radius: 20px; padding: 22px; text-align: center; margin-top: 28px; } /* ============================================================ 17. CARD — SEO & Brand page main content wrapper ============================================================ */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 36px 40px; box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05); } /* Nested .card inside .card (e.g. cta-mid): tighter padding, no shadow */ .card .card { padding: 32px 36px; box-shadow: none; } @media (max-width: 640px) { .card { padding: 24px 20px; } .card .card { padding: 22px 18px; } } /* INFO BOX — Green alert / highlight box */ .info-box { background: var(--soft-strong); border: 1px solid #CFEBD9; padding: 20px 22px; border-radius: 16px; margin: 22px 0; line-height: 1.75; } /* ============================================================ 18. STEPS LIST ============================================================ */ .steps { background: var(--soft); padding: 18px; border-radius: 16px; margin: 18px 0; list-style: none; } .steps li { margin-bottom: 10px; } /* ============================================================ 19. CARD-LINK — Cluster page provider/topic cards ============================================================ */ .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-section-tight); margin-top: var(--space-section-tight); align-items: stretch; } .card-link { display: flex; flex-direction: column; justify-content: space-between; background: #FFFFFF; border: 1px solid var(--border); border-radius: 20px; padding: 26px; text-decoration: none; color: inherit; transition: all 0.18s ease; position: relative; min-height: 170px; } .card-link:hover { transform: translateY(-3px); border-color: var(--btn); box-shadow: var(--green-soft-shadow); } .card-link h3 { margin: 0 0 12px; font-size: 18px; font-weight: 800; color: var(--text); } .card-link p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); } /* Arrow decoration */ .card-link::after { content: "→"; position: absolute; right: 24px; bottom: 22px; font-size: 16px; color: #94A3B8; transition: all 0.18s ease; } .card-link:hover::after { transform: translateX(4px); color: var(--btn); } /* ============================================================ 20. BRAND HUB — Cluster page provider grid ============================================================ */ .brand-hub { margin-top: 40px; padding: 32px 32px 36px; background: var(--soft); border-radius: 20px; } .brand-hub h2 { margin-top: 0; margin-bottom: 22px; } .brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; } .brand-grid a { background: white; border: 1px solid var(--border); padding: 16px; border-radius: 14px; text-decoration: none; color: var(--text); font-weight: 700; transition: all 0.25s ease; } .brand-grid a:hover { background: #FFFFFF; color: var(--text); transform: translateY(-4px); border-color: #16A34A; box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15), 0 14px 36px rgba(22, 163, 74, 0.15); } /* ============================================================ 21. SECTION VARIANTS — Soft & Accent backgrounds ============================================================ */ .section-soft { background: var(--green-soft-bg); padding: var(--space-lg); border-radius: 20px; border: 1px solid rgba(22, 163, 74, 0.15); } .section-accent { background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%); padding: var(--space-lg); border-radius: 20px; border: 1px solid rgba(22, 163, 74, 0.15); } /* ============================================================ 22. STUDIO PILLS — Fitness cluster links ============================================================ */ .studio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } .studio-pill { display: block; background: rgba(22, 163, 74, 0.08); border: 1px solid rgba(22, 163, 74, 0.25); border-radius: 16px; padding: 14px 18px; text-decoration: none; color: var(--text); font-weight: 600; text-align: center; transition: all 0.18s ease; } .studio-pill:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); transform: translateY(-2px); } /* ============================================================ 23. RELATED LINKS — SEO page bottom navigation ============================================================ */ .related-links { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--border); } .related-links h2 { font-size: 18px; margin-bottom: 14px; } .related-links ul { list-style: none; padding: 0; margin: 0; } .related-links li { margin-bottom: 10px; } .related-links a { color: var(--btn); font-weight: 700; text-decoration: none; } .related-links a:hover { opacity: 0.85; } /* ============================================================ 24. MOBILE — max-width: 640px ============================================================ */ @media (max-width: 640px) { /* Show mobile header, hide desktop header */ .wrap > header, .top { display: none !important; } .site-header { display: flex !important; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; background: #FFFFFF; border-bottom: 1px solid var(--border); padding: 12px 16px; } .site-header .brand a { font-size: 18px; font-weight: 900; color: var(--text); text-decoration: none; } /* Mobile bottom CTA bar */ .mobile-cta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #FFFFFF; border-top: 1px solid var(--border); padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); gap: 10px; justify-content: center; z-index: 1000; } .mobile-cta a { flex: 1; background: #16A34A; color: #fff; text-align: center; padding: 12px; border-radius: 14px; font-weight: 800; text-decoration: none !important; display: block; white-space: normal; line-height: 1.2; } /* Body padding for fixed bars */ body { padding-top: 56px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); } /* Layout */ .wrap { padding: 16px max(16px, 4vw); } main > section { margin-top: 24px; } /* Hero */ .hero { padding: 24px 18px; margin-bottom: 24px; } .hero-sub { margin: 14px auto 16px; } .trust-inline { gap: 8px; margin-top: 10px; } .price-note { margin-top: 12px; } .btn-primary { margin-top: 14px; padding: 14px 20px; width: 100%; text-align: center; } .btn { width: 100%; text-align: center; } .cta-mid .btn, .page-content .cta-mid .btn { width: auto; display: inline-block; } /* Grids → single column */ .vertical-grid { grid-template-columns: 1fr; gap: 20px; } .why-grid { grid-template-columns: 1fr; } .popular-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .popular-card { min-height: 60px; padding: 14px; font-size: 14px; } .cards { grid-template-columns: 1fr; gap: 16px; } .card-link { padding: 20px; min-height: auto; } .brand-grid { grid-template-columns: repeat(2, 1fr); } .studio-grid { grid-template-columns: 1fr 1fr; } /* Hub */ .hub-columns { grid-template-columns: 1fr; gap: 28px; } .hub-columns > div:last-child { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 20px; } .hub-inner { padding: 24px 18px; } /* CTA */ .cta-final { padding: 26px 18px; margin-top: 24px; } .cta-actions { margin-top: 18px; gap: 12px; } /* Sections */ .section-soft, .section-accent, .seo-box { padding: 20px; } .popular-section > .wrap { padding: 22px !important; } /* Info box */ .info-box { padding: 18px; } /* Headings — SEO/Brand pages on mobile: center */ /* Mobile headings — homepage/cluster: centered */ h1, h2, h3, h4 { text-align: center; } /* Brand/SEO pages: left-aligned on mobile too */ .page-content h1, .page-content h2, .page-content h3, .page-content h4 { text-align: left; margin-left: 0 !important; margin-right: 0 !important; } /* cta-mid always centered on mobile too */ .cta-mid h2, .cta-mid h3, .page-content .cta-mid h2, .page-content .cta-mid h3, .page-content .card .cta-mid h2, .page-content .card .cta-mid h3 { text-align: center !important; } .cta-mid p, .page-content .cta-mid p, .page-content .card .cta-mid p { text-align: center !important; } /* h1 on brand/SEO pages: slightly constrained width */ .page-content h1 { max-width: 24ch; margin-bottom: 16px !important; } /* h1 on mobile */ h1 { font-size: 24px; line-height: 1.2; margin-bottom: 12px; } h2 { font-size: 20px; line-height: 1.25; } h3 { font-size: 16px; line-height: 1.3; } h4 { font-size: 15px; line-height: 1.3; } footer { margin-top: 12px; padding-bottom: 4px; } /* Brand/SEO page mobile — tighter content rhythm */ .page-content .card { padding: 22px 18px; } .page-content .card > h2 { margin-top: 28px !important; } .page-content .card > h3 { margin-top: 20px !important; } .page-content .card > p { font-size: 15px; line-height: 1.65; margin-bottom: 12px; } .page-content .card > ul li { font-size: 15px; padding: 2px 0; } .cta-mid { padding: 22px 18px; margin-top: 24px; } .pill-inline { gap: 6px; } .pill-inline span { font-size: 12px; padding: 4px 8px; } } /* ============================================================ 25. TABLET — max-width: 820px ============================================================ */ @media (max-width: 820px) { .cards { grid-template-columns: 1fr; gap: 16px; } .card-link { padding: 20px; min-height: auto; } .studio-grid { grid-template-columns: 1fr 1fr; } .section-soft, .section-accent, .cta-final { padding: 20px; } .hero { padding: 22px; margin-bottom: 24px; } } /* ============================================================ 26. TABLET (wide) — max-width: 1024px ============================================================ */ @media (max-width: 1024px) { .why-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ 27. MOBILE — max-width: 480px ============================================================ */ @media (max-width: 480px) { .studio-grid { grid-template-columns: 1fr; } } /* ============================================================ 28. PILL INLINE — Brand page trust pills (variant of trust-inline, left-aligned by default) ============================================================ */ .pill-inline { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 18px; font-size: 13px; color: #334155; } .pill-inline span { background: var(--soft); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; white-space: nowrap; } @media (max-width: 640px) { .pill-inline { justify-content: center; text-align: center; } } /* ============================================================ 29. CTA-MID — Inline mid-page conversion block Used inside .card on brand & cluster pages ============================================================ */ .cta-mid, .page-content .cta-mid { margin-top: var(--space-lg); background: linear-gradient(160deg, #F0FDF4 0%, #FFFFFF 100%); border: 1px solid rgba(22, 163, 74, 0.2); border-radius: 20px; padding: 22px 28px; text-align: center !important; box-shadow: 0 8px 32px rgba(22, 163, 74, 0.08); display: flex; flex-direction: column; align-items: center; } .cta-mid h2, .cta-mid h3, .page-content .cta-mid h2, .page-content .cta-mid h3, .page-content .card .cta-mid h2, .page-content .card .cta-mid h3 { margin: 0 0 8px !important; text-align: center !important; font-size: 20px; } .cta-mid p, .page-content .cta-mid p, .page-content .card .cta-mid p, .wrap .cta-mid p, .wrap.page-content .cta-mid p { margin: 0 auto 10px; max-width: 540px; text-align: center !important; } .cta-mid .btn-primary, .cta-mid .btn { display: inline-block; margin-bottom: 10px; } /* Bulletproof button centering inside cta-mid */ .cta-mid p:has(.btn), .cta-mid p:has(.btn-primary) { text-align: center !important; display: block; } .cta-mid p { text-align: center !important; } .cta-mid .pill-inline { justify-content: center; } .cta-mid .micro-trust { margin-top: 10px; font-size: 13px; color: #64748B; } @media (max-width: 640px) { .cta-mid, .page-content .cta-mid { padding: 26px 20px; } .page-content .cta-mid h2, .page-content .cta-mid h3, .page-content .card .cta-mid h2, .page-content .card .cta-mid h3 { text-align: center !important; } .page-content .cta-mid p, .page-content .card .cta-mid p { text-align: center !important; } } /* ============================================================ 30. MINI-TRUST / MICRO-URGENCY — Small trust lines ============================================================ */ .mini-trust { margin: 8px 0 20px; font-size: 13px; color: #475569; line-height: 1.5; } .micro-urgency { margin: 18px 0 10px; font-size: 14px; color: #334155; font-weight: 500; } @media (max-width: 640px) { .mini-trust, .micro-urgency { text-align: center; } } /* ============================================================ 31. BRAND DISCLAIMER — Small legal note on brand pages ============================================================ */ p.brand-disclaimer, .brand-disclaimer { font-size: 12px !important; color: #64748B !important; margin-top: 0 !important; margin-bottom: 3px !important; text-align: center; line-height: 1.5; max-width: 680px; margin-left: auto; margin-right: auto; } .brand-disclaimer a, .brand-disclaimer a:visited, .brand-disclaimer a:hover, .brand-disclaimer a:active { color: #64748B !important; font-weight: normal !important; text-decoration: none !important; } /* ============================================================ 32. CONTENT READABLE — Readable text column wrapper ============================================================ */ .content-readable { max-width: none; margin: 0; } .content-readable p { line-height: 1.8; margin-bottom: 20px; font-size: 16px; } .content-readable h3 { margin-top: 32px; margin-bottom: 12px; } /* ============================================================ 34. BRAND PAGE — Premium internal spacing ============================================================ */ /* Generous spacing between sections inside .card */ .card > h2 { margin-top: 40px !important; } .card > h3 { margin-top: 28px !important; } .card > p + h2, .card > ul + h2, .card > .pill-inline + h2 { margin-top: 36px !important; } /* First heading in card: no top margin */ .card > h1:first-child, .card > h2:first-child, .card > h3:first-child { margin-top: 0 !important; } /* Separator line between major sections */ .card > h2 { padding-top: 8px; border-top: 1px solid var(--border); } /* But NOT the very first h2 */ .card > h2:first-of-type { border-top: none; padding-top: 0; } /* List items inside .card */ .card > ul li, .card > ol li { font-size: 15px; line-height: 1.7; color: var(--muted); padding: 2px 0; } .card > ul li a, .card > ol li a { color: var(--primary); } /* Related links list — no separator */ .card .related-links h2 { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; } ol.steps { list-style: decimal; padding-left: 36px; margin: 18px 0; } ol.steps li { margin-bottom: 12px; line-height: 1.6; color: var(--muted); padding-left: 6px; } /* ============================================================ NOTE / HINT — small disclaimer block below CTAs ============================================================ */ .note, .hint { margin-top: 16px; padding: 12px 16px; background: var(--soft); border-radius: 12px; font-size: 13px; color: var(--muted); line-height: 1.6; } .note strong, .hint strong { color: var(--text); font-weight: 700; } .cta-mid .btn, .cta-mid .btn-primary { display: block; margin: 0 auto 16px; } .cta-mid h2, .cta-mid h3 { margin: 0 0 12px !important; } .cta-mid p, .page-content .cta-mid p, .page-content .card .cta-mid p, .wrap .cta-mid p, .wrap.page-content .cta-mid p { margin: 0 auto 14px; max-width: 540px; text-align: center !important; } .cta-mid .btn, .cta-mid .btn-primary { display: block; margin: 6px auto 6px !important; } .cta-mid{ padding:16px 18px !important; }