/* ============================================================ Karam Team — shared inner-page design system (Phase 2). Same tokens/voice as the homepage (css/home.css). Theme per page: default = Ridgeline (homeowner/city), = Nightfall (investor/service). Robust hex/rgba only (mobile-safe). ============================================================ */ :root { --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; --bg:#eef1ea; --surface:#f7f9f4; --raised:#ffffff; --ink:#1a211c; --muted:#57605a; --line:#d7ddcf; --accent:#2e5a49; --accent-2:#244838; --on-accent:#f1f5ee; --r-lg:16px; --r-md:11px; --maxw:1140px; --ease:cubic-bezier(.22,1,.36,1); } :root[data-theme="invest"] { --bg:#11150f; --surface:#181d16; --raised:#1e241b; --ink:#eaeee2; --muted:#99a595; --line:#2a3126; --accent:#7cbf9c; --accent-2:#97cfb1; --on-accent:#0e1a12; } * { box-sizing:border-box; } [hidden] { display:none !important; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body { margin:0; font-family:var(--sans); color:var(--ink); background-color:var(--bg); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4 { margin:0; line-height:1.1; letter-spacing:-.02em; text-wrap:balance; font-weight:680; } p { margin:0; } a { color:inherit; text-decoration:none; } :focus-visible { outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; } .skip-link { position:absolute; left:-9999px; top:auto; } .skip-link:focus { position:fixed; left:16px; top:16px; z-index:200; background:var(--accent); color:var(--on-accent); padding:.7em 1.1em; border-radius:8px; } .icon { width:1em; height:1em; display:inline-block; vertical-align:-.12em; fill:none; stroke:currentColor; stroke-width:2; } .wrap, .container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; } .eyebrow, .micro-label { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; } .btn { display:inline-flex; align-items:center; gap:.5em; cursor:pointer; font:inherit; font-weight:600; font-size:.98rem; line-height:1; padding:.85em 1.35em; border-radius:999px; border:1.5px solid transparent; white-space:nowrap; transition:transform .15s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .btn-primary { background:var(--accent); color:var(--on-accent); } .btn-primary:hover { background:var(--accent-2); transform:translateY(-1px); } .btn-outline, .btn-ghost { background:transparent; color:var(--ink); border-color:var(--line); } .btn-outline:hover, .btn-ghost:hover { border-color:var(--accent); color:var(--accent); } .btn .icon { width:1.05em; height:1.05em; transition:transform .2s var(--ease); } .btn:hover .icon { transform:translateX(2px); } .nowrap { white-space:nowrap; } /* ---------- header / nav ---------- */ header.site { border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; background-color:var(--bg); } header.site .wrap { display:flex; align-items:center; gap:16px; padding-block:15px; } .brand { display:flex; align-items:baseline; gap:8px; font-weight:680; letter-spacing:-.02em; font-size:1.1rem; } .brand .k { color:var(--accent); } .brand .sub { font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:500; } nav.main { margin-left:auto; display:none; gap:24px; } nav.main a { font-size:.92rem; color:var(--muted); transition:color .2s; } nav.main a:hover { color:var(--ink); } header.site .btn { padding:.58em 1em; } @media (min-width:900px){ nav.main{ display:flex; } } /* ---------- page hero ---------- */ .page-hero { padding-block:clamp(30px,5vw,58px) clamp(30px,5vw,54px); border-bottom:1px solid var(--line); } .breadcrumb { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:18px; } .breadcrumb a { color:var(--muted); } .breadcrumb a:hover { color:var(--accent); } .crumb-sep { color:var(--line); } .crumb-current { color:var(--ink); } .page-hero h1 { font-size:clamp(2rem,4.6vw,3.2rem); } .page-lead { margin-top:18px; font-size:clamp(1.05rem,1.5vw,1.24rem); color:var(--muted); max-width:52ch; } .hero-actions { margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; } /* ---------- content section + prose ---------- */ section.section, section.block { padding-block:clamp(40px,6vw,76px); } .page-with-toc { display:grid; gap:clamp(28px,5vw,56px); grid-template-columns:1fr; align-items:start; } @media (min-width:900px){ .page-with-toc { grid-template-columns:210px minmax(0,1fr); } } .mini-toc { align-self:start; } @media (min-width:900px){ .mini-toc { position:sticky; top:88px; } } .mini-toc .micro-label { display:block; margin-bottom:12px; } .mini-toc ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; border-left:1px solid var(--line); } .mini-toc li { padding-left:14px; } .mini-toc a { font-size:.92rem; color:var(--muted); } .mini-toc a:hover { color:var(--accent); } .section .container > h2, .page-body h2 { font-size:clamp(1.5rem,3vw,2.15rem); margin-top:clamp(34px,4vw,52px); } .section .container > h2:first-child, .page-body h2:first-child { margin-top:0; } .section .container > p, .page-body > p, .page-with-toc > div > p { color:var(--muted); max-width:68ch; margin-top:14px; font-size:1.04rem; } .page-with-toc > div > h2 { font-size:clamp(1.5rem,3vw,2.15rem); margin-top:clamp(34px,4vw,52px); } .page-with-toc > div > h2:first-child { margin-top:0; } .page-body a, .page-with-toc a.inline, .section .container p a, .row-detail a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; } /* ---------- check list ---------- */ .check-list { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px; grid-template-columns:1fr; } @media (min-width:600px){ .check-list { grid-template-columns:1fr 1fr; } } .check-list li { display:flex; align-items:flex-start; gap:11px; font-size:.98rem; color:var(--ink); } .check-list .icon { flex:none; width:20px; height:20px; color:var(--accent); margin-top:1px; } /* ---------- index rows (neighborhoods / related) ---------- */ .index-rows { list-style:none; margin:20px 0 0; padding:0; border-top:1px solid var(--line); } .index-row a { display:flex; align-items:center; gap:14px; padding:15px 4px; border-bottom:1px solid var(--line); transition:padding .2s var(--ease), color .2s; } .index-row a:hover { padding-left:12px; color:var(--accent); } .index-row .row-index { font-family:var(--mono); font-size:.72rem; color:var(--muted); } .index-row .row-name { flex:1; font-weight:600; font-size:1.02rem; letter-spacing:-.01em; } .index-row .icon { width:18px; height:18px; color:var(--muted); } .index-row a:hover .icon { color:var(--accent); } /* ---------- FAQ (details / ledger rows) ---------- */ .faq-list { margin-top:22px; border-top:1px solid var(--line); } .ledger-row { border-bottom:1px solid var(--line); } .ledger-row summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 4px; font-weight:600; font-size:1.04rem; letter-spacing:-.01em; } .ledger-row summary::-webkit-details-marker { display:none; } .ledger-row summary:hover { color:var(--accent); } .ledger-row .row-icon { flex:none; width:18px; height:18px; color:var(--accent); transition:transform .2s var(--ease); } .ledger-row[open] summary .row-icon { transform:rotate(45deg); } .row-detail { padding:0 4px 20px; color:var(--muted); max-width:70ch; line-height:1.6; font-size:1rem; } /* ---------- CTA banner ---------- */ .cta-banner { padding-block:clamp(30px,5vw,60px); padding-inline:22px; } .cta-banner .container { max-width:var(--maxw); margin-inline:auto; background:var(--accent); color:var(--on-accent); border-radius:var(--r-lg); padding:clamp(32px,5vw,64px); text-align:center; } .cta-banner h2 { font-size:clamp(1.7rem,4vw,2.7rem); color:var(--on-accent); } .cta-banner p { margin:14px auto 0; max-width:48ch; color:var(--on-accent); opacity:.85; } .cta-phone { display:inline-block; margin:22px 0 6px; font-size:clamp(1.5rem,4vw,2.2rem); font-weight:700; letter-spacing:-.02em; color:var(--on-accent); font-variant-numeric:tabular-nums; } .cta-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:16px; } .cta-banner .btn-primary { background:var(--on-accent); color:var(--accent); } .cta-banner .btn-primary:hover { opacity:.9; transform:translateY(-1px); background:var(--on-accent); } .cta-banner .btn-outline { color:var(--on-accent); border-color:currentColor; opacity:.92; } .cta-banner .btn-outline:hover { opacity:1; color:var(--on-accent); border-color:currentColor; } /* ---------- footer ---------- */ footer.site { padding-block:38px; border-top:1px solid var(--line); } footer.site .wrap { display:flex; flex-wrap:wrap; gap:20px 40px; justify-content:space-between; } .foot-brand { min-width:220px; } .foot-id { font-family:var(--mono); font-size:.72rem; color:var(--muted); margin-top:8px; letter-spacing:.04em; } .foot-links { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; } .foot-links a { color:var(--muted); } .foot-links a:hover { color:var(--accent); } footer.site .disc { font-size:.72rem; color:var(--muted); max-width:70ch; line-height:1.6; } footer.site .disc a { color:var(--muted); text-decoration:underline; text-underline-offset:2px; } /* ---------- blog index ---------- */ .post-index { display:grid; } .post-entry { padding:24px 0; border-bottom:1px solid var(--line); display:grid; gap:7px; } .post-entry:first-child { padding-top:0; } .post-date { font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--muted); } .post-entry h3 { font-size:clamp(1.2rem,2.2vw,1.55rem); font-weight:650; letter-spacing:-.01em; } .post-entry h3 a { transition:color .2s var(--ease); } .post-entry h3 a:hover { color:var(--accent); } .post-excerpt { color:var(--muted); font-size:1rem; max-width:72ch; line-height:1.55; } .post-entry.is-featured .post-thumb { display:block; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); margin-bottom:14px; aspect-ratio:1200/630; } .post-entry.is-featured .post-thumb img { width:100%; height:100%; object-fit:cover; display:block; } .post-index-cta { margin-top:46px; padding-top:34px; border-top:2px solid var(--accent); } .post-index-cta h3 { font-size:clamp(1.3rem,2.5vw,1.7rem); } .post-index-cta .intro { color:var(--muted); margin:10px 0 18px; max-width:54ch; } /* ---------- blog post ---------- */ .reading-label { font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--muted); margin-top:14px; } .post-body { max-width:70ch; } .post-body > p { color:var(--ink); margin-top:18px; font-size:1.08rem; line-height:1.7; } .post-body > p:first-child { margin-top:0; } .post-body h2 { font-size:clamp(1.4rem,2.6vw,1.9rem); margin-top:40px; margin-bottom:2px; } .post-body ul, .post-body ol { margin:16px 0 0; padding-left:1.3em; color:var(--ink); } .post-body li { margin-top:8px; line-height:1.6; } .post-body a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; } .post-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; padding-top:28px; border-top:1px solid var(--line); } .post-pagination { margin-top:34px; } .row-direction { display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; } @media (prefers-reduced-motion: reduce){ html { scroll-behavior:auto; } .btn, .index-row a, .ledger-row .row-icon, .post-entry h3 a { transition:none; } .btn:hover, .index-row a:hover { transform:none; } }