/* ========================================================================== KJ GUIDE SYSTEM — shared chrome for the single-topic guides (downsizing, sellers, probate, divorce) Matches clients.kelsiejimenez.com: warm white ground, Playfair headings, Times New Roman body, Lato for labels, sage as accent only. These pages already carry the right typography inline; this sheet adds the shared topbar, left-aligns the hero, and removes leftover pill buttons. Loaded LAST in so it wins over each page's legacy inline styles. ========================================================================== */ :root{ --kj-bg:#FDFCFA;--kj-bg-warm:#F8F5EE; --kj-ink:#1C1C1C;--kj-ink-soft:#6E6E68; --kj-forest:#2B3D30;--kj-forest-2:#344A39; --kj-sage:#99A189;--kj-line:#E8E6DF; --kj-display:"Playfair Display",Georgia,serif; --kj-util:"Lato",system-ui,sans-serif; } /* ---------- shared topbar ------------------------------------------------ */ .kj-topbar{border-bottom:1px solid var(--kj-line);background:var(--kj-bg); position:sticky;top:0;z-index:90;} .kj-topbar .kj-wrap{max-width:1140px;margin:0 auto;padding:14px 30px; display:flex;align-items:center;justify-content:space-between;gap:18px;} .kj-topbar .kj-brand{font-family:var(--kj-display);font-size:1.02rem;font-weight:500; color:var(--kj-ink);text-decoration:none;line-height:1.2;} .kj-topbar .kj-brand span{display:block;font-family:var(--kj-util);font-size:.62rem; letter-spacing:.18em;text-transform:uppercase;color:var(--kj-ink-soft); margin-top:2px;font-weight:700;} .kj-topbar nav{display:flex;align-items:center;} .kj-topbar nav a{margin-left:22px;font-family:var(--kj-util);font-size:.78rem; letter-spacing:.14em;text-transform:uppercase;font-weight:700; color:var(--kj-ink-soft);text-decoration:none;white-space:nowrap;} .kj-topbar nav a:hover,.kj-topbar nav a.on{color:var(--kj-forest);} .kj-topbar nav a.kj-book{color:var(--kj-ink);border-bottom:1.5px solid var(--kj-forest); padding-bottom:3px;} .kj-topbar nav a.kj-book:hover{color:var(--kj-forest);} @media (max-width:760px){ .kj-topbar .kj-wrap{padding:12px 20px;} .kj-topbar nav a{margin-left:14px;font-size:.66rem;letter-spacing:.08em;} } @media (max-width:520px){ .kj-topbar nav a{margin-left:10px;font-size:.6rem;letter-spacing:.04em;} .kj-book-rest{display:none;} } /* ---------- hero: bottom-left over the scrim, never centered ------------- */ .hero{min-height:56vh !important;} .hero-center{justify-content:flex-end !important;align-items:flex-start !important; text-align:left !important;padding:60px 30px 44px !important;} .hero-center-inner{max-width:1140px !important;width:100% !important;margin:0 auto !important;} .hero-title{font-size:clamp(1.9rem,4.4vw,3rem) !important;line-height:1.1 !important; max-width:22ch !important;text-shadow:0 2px 24px rgba(0,0,0,.5) !important;} .hero-eyebrow{margin-bottom:14px !important;font-size:11.5px !important;} .hero-sub{text-align:left !important;max-width:62ch !important; margin:0 !important;margin-left:max(0px,calc((100% - 1140px)/2)) !important;} .hero-bar .kj-wrap,.hero-bar{padding-left:30px !important;padding-right:30px !important;} /* ---------- no pills: navigation links get a hairline underline ---------- */ .hero-cta,.btn-pill,a.pill{ border-radius:0 !important;background:none !important; border:none !important;border-bottom:1.5px solid currentColor !important; padding:8px 0 6px !important; font-family:var(--kj-util) !important;font-size:.78rem !important; letter-spacing:.14em !important;text-transform:uppercase !important;font-weight:700 !important; } .hero .hero-cta{color:#fff !important;} .hero-cta:hover{opacity:.75;}