/* ============================================================ CONTENT-PAGE.CSS — Shared Inner-Page Layout ============================================================ PURPOSE: Shared layout for every new Service / Resource / Location / Tool page built per docs/SITE_EXPANSION_PLAN.md (Phase 1+). NOT used by index.html or calculator.html — those keep their existing layouts. Link this file from new pages only, after components.css and before the page's own section overrides (if any), matching the documented CSS load order: variables.css -> base.css -> layout.css -> components.css -> sections/*.css (content-page.css included) Covers: breadcrumb bar, content hero band, two-column content + sidebar CTA, related-links block, and a generic card grid for index pages (mortgage-guides.html, locations.html) that don't warrant a bespoke stylesheet of their own. SAFE TO EDIT: - Spacing, colors, breakpoints below. DO NOT MODIFY: - Reuses existing tokens only (var(--ink) etc.) — do not hardcode colors here. See PROJECT_BRAIN.md's "DO NOT Hardcode Colors" rule. - The FAQ accordion is NOT redefined here — new pages reuse the existing .faq-item markup/CSS from sections/faq.css verbatim, so a page needs both files linked. ============================================================ */ /* ── Division Strip ──────────────────────────────────────────── Slim identity bar directly under #main-nav, used ONLY on the distressed-homeowner content silo (see docs/DISTRESSED_FUNNEL_ PLAN.md). Gives that cluster a "specialized division" feel without touching #main-nav itself, which traditional buyers also see. Do not add nav links here — text only. ────────────────────────────────────────────────────────────── */ .division-strip { margin-top: 72px; /* clears the fixed #main-nav (nav height, see hero.css) */ background: var(--ink); color: var(--white); padding: 0.55rem var(--gutter); text-align: center; font-size: 0.78rem; letter-spacing: 0.03em; } .division-strip strong { font-weight: 600; color: var(--gold-lt); } /* The distressed-homeowner silo's #main-nav .nav-links list was emptied (Services/À propos/Processus/FAQ used to point into index.html — removed per AUDIENCE_SEGMENTATION_AUDIT.md so the silo's primary nav no longer funnels visitors back to the traditional site). navigation.js still requires #navToggle to exist in the DOM (no null-guard there), so the hamburger button stays in markup but is hidden here rather than removed — it would otherwise open an empty dropdown. Scoped to silo pages only via .division-strip, which is exclusive to that cluster; specificity here beats layout.css's mobile `.nav-toggle { display: flex }` rule regardless of load order, so no !important needed. */ body:has(.division-strip) .nav-toggle { display: none; } /* ── Breadcrumb Bar ──────────────────────────────────────────── Sits directly under the fixed nav. Both a visual aid and the human-readable half of the BreadcrumbList JSON-LD each new page carries in its (see SITE_EXPANSION_PLAN.md Section 3.2). ────────────────────────────────────────────────────────────── */ .breadcrumb-bar { padding: 6.5rem var(--gutter) 1rem; /* top padding clears the 72px fixed nav */ background: var(--paper); border-bottom: 1px solid var(--line); } /* When .division-strip precedes it (distressed-homeowner silo), the strip already clears the fixed nav — drop the extra top padding so the two don't stack clearance twice. */ .division-strip + .breadcrumb-bar { padding-top: 1rem; } .breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; list-style: none; font-size: 0.78rem; color: var(--stone); } .breadcrumb-list a { color: var(--stone); text-decoration: none; } .breadcrumb-list a:hover { color: var(--ink); } .breadcrumb-list li:last-child { color: var(--ink); } .breadcrumb-list li:not(:last-child)::after { content: '/'; margin-left: 0.4rem; color: var(--line); } /* ── Content Hero Band ───────────────────────────────────────── H1 + intro paragraph answering the page's primary keyword in the first ~200 words (per SEO_GROWTH_PLAN.md on-page guidance), plus a CTA into the lead form. ────────────────────────────────────────────────────────────── */ .content-hero { padding: 3rem var(--gutter) 2.5rem; background: var(--white); max-width: 860px; } .content-hero h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.9rem, 3.5vw, 2.6rem); color: var(--ink); line-height: 1.2; margin-bottom: 1rem; } .content-hero .content-lead { font-size: 1rem; color: var(--stone); line-height: 1.7; margin-bottom: 1.5rem; } /* ── Content Body: main column + sidebar CTA ────────────────── Sidebar collapses above the main content on mobile (source order: main content first for SEO/reading order either way). ────────────────────────────────────────────────────────────── */ .content-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3.5rem; padding: 0 var(--gutter) 4rem; max-width: 1180px; margin: 0 auto; align-items: start; } .content-main h2 { font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; color: var(--ink); margin: 2.2rem 0 0.9rem; } .content-main h2:first-child { margin-top: 0; } .content-main p { font-size: 0.95rem; color: var(--stone); line-height: 1.75; margin-bottom: 1rem; } .content-main ul, .content-main ol { margin: 0 0 1rem 1.2rem; color: var(--stone); font-size: 0.95rem; line-height: 1.75; } /* Sticky sidebar CTA card — reuses .btn-primary from components.css */ .content-sidebar { position: sticky; top: 6.5rem; /* clears the fixed nav */ background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 1.6rem; } .content-sidebar h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.15rem; color: var(--ink); margin-bottom: 0.6rem; } .content-sidebar p { font-size: 0.85rem; color: var(--stone); line-height: 1.6; margin-bottom: 1rem; } /* ── Related Links Block ─────────────────────────────────────── 3-4 contextual links, per each article's planned "Internal linking" field in SEO_GROWTH_PLAN.md. ────────────────────────────────────────────────────────────── */ .related-links { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); } .related-links h3 { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem; } .related-links-list { display: flex; flex-direction: column; gap: 0.6rem; list-style: none; } .related-links-list a { font-size: 0.9rem; color: var(--ink); text-decoration: none; } .related-links-list a:hover { color: var(--gold); } /* ── Card Grid (index pages: mortgage-guides.html, locations.html) ── Generic version of the homepage's .services-grid pattern — same border-via-background trick, decoupled from homepage-specific classes so index pages don't need to pull in services.css. ────────────────────────────────────────────────────────────── */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; background: var(--line); border: 1px solid var(--line); margin: 2rem var(--gutter); } .content-card { background: var(--white); padding: 2rem 1.75rem; text-decoration: none; display: flex; flex-direction: column; gap: 0.75rem; transition: background 0.25s; } .content-card:hover { background: var(--paper); } .content-card h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.2rem; color: var(--ink); } .content-card p { font-size: 0.85rem; color: var(--stone); line-height: 1.6; } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .content-body { grid-template-columns: 1fr; } .content-sidebar { position: static; order: -1; /* CTA appears before body copy on mobile/tablet */ } } @media (max-width: 480px) { .card-grid { grid-template-columns: 1fr; } }