/* ========================================================================== Nationwide Property Taxcare — header/footer TEMPLATE styles Scoped under `div.nptc-chrome` so the templates can run on any page of the site (the client's own pages included) without restyling their content. Values copied verbatim from styles.css. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* The wrapper itself must not create a box: position:sticky on the header needs as its containing block, not this div. */ div.nptc-chrome{ display: contents; --paper: #F5F1E7; --paper-dim: #EDE7D8; --ink: #16233A; --ink-soft: #4C596B; --oxblood: #7C2E2A; --oxblood-dim:#5C201D; --brass: #A9803F; --brass-light:#D9BE84; --line: #D8CFB8; --white: #FFFDF8; --display: 'Fraunces', serif; --body: 'Public Sans', sans-serif; --mono: 'IBM Plex Mono', monospace; --max: 1180px; } /* The baseline the chrome inherits from in the original document. */ div.nptc-chrome .topbar, div.nptc-chrome header.site-header, div.nptc-chrome footer{ font-family: 'Public Sans', sans-serif; font-size: 16px; line-height: 1.6; color: #16233A; -webkit-font-smoothing: antialiased; text-align: left; } div.nptc-chrome .topbar *, div.nptc-chrome header.site-header *, div.nptc-chrome footer *{ box-sizing: border-box; } div.nptc-chrome img{ max-width: 100%; display: block; } /* The chrome is full-bleed, so the page it lands on must not have the browser's default 8px body margin. Nearly every theme already resets this, but the templates must not depend on that. Two rules, kept separate so a browser without :has() still gets the class-based one. */ body.nptc-has-chrome{ margin: 0; } body:has(> div.nptc-chrome){ margin: 0; } div.nptc-chrome *{ box-sizing: border-box; } div.nptc-chrome img{ max-width:100%; display:block; } div.nptc-chrome a{ color: inherit; } div.nptc-chrome .wrap{ max-width: var(--max); margin: 0 auto; padding: 0 32px; } div.nptc-chrome h1, div.nptc-chrome h2, div.nptc-chrome h3, div.nptc-chrome h4{ font-family: var(--display); color: var(--ink); margin: 0 0 0.5em 0; font-weight: 600; letter-spacing: -0.01em; } div.nptc-chrome h1{ font-size: clamp(2.4rem, 4.4vw, 3.8rem); font-weight: 600; line-height: 1.05; } div.nptc-chrome h2{ font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.15; } div.nptc-chrome h3{ font-size: 1.3rem; } div.nptc-chrome p{ margin: 0 0 1em 0; color: var(--ink-soft); } div.nptc-chrome .topbar{ background: var(--ink); color: var(--paper-dim); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; } div.nptc-chrome .topbar .wrap{ display:flex; justify-content: space-between; align-items:center; padding-top:9px; padding-bottom:9px; } div.nptc-chrome .topbar a{ color: var(--brass-light); text-decoration:none; } div.nptc-chrome .topbar a:hover{ text-decoration:underline; } div.nptc-chrome .topbar .tb-right{ display:flex; gap:24px; } div.nptc-chrome .topbar .tb-note{ opacity:0.75; } div.nptc-chrome header.site-header{ background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top:0; z-index: 50; } div.nptc-chrome header.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; } div.nptc-chrome .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color: var(--ink); } div.nptc-chrome .brand-mark{ width:42px; height:42px; flex-shrink:0; } div.nptc-chrome .brand-name{ font-family: var(--display); font-weight:600; font-size:1.18rem; line-height:1.1; color: var(--ink); } div.nptc-chrome .brand-name span{ display:block; font-family: var(--mono); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--oxblood); font-weight:500; margin-top:3px; } div.nptc-chrome nav.main-nav{ display:flex; align-items:center; gap:32px; } div.nptc-chrome nav.main-nav a{ text-decoration:none; font-weight:600; font-size:0.94rem; color: var(--ink-soft); position:relative; padding: 4px 0; } div.nptc-chrome nav.main-nav a:hover, div.nptc-chrome nav.main-nav a.active{ color: var(--ink); } div.nptc-chrome nav.main-nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--oxblood); } div.nptc-chrome .nav-cta{ background: var(--oxblood); color: var(--white) !important; padding: 10px 20px; border-radius: 3px; font-size:0.9rem !important; } div.nptc-chrome .nav-cta:hover{ background: var(--oxblood-dim); color: var(--white) !important; } div.nptc-chrome .btn{ display:inline-flex; align-items:center; gap:10px; font-family: var(--body); font-weight:700; font-size:0.98rem; padding: 15px 28px; border-radius: 3px; text-decoration:none; border: 1.5px solid transparent; cursor:pointer; transition: transform .15s ease, background .15s ease, color .15s ease; } div.nptc-chrome .btn-primary{ background: var(--oxblood); color: var(--white); } div.nptc-chrome .btn-primary:hover{ background: var(--oxblood-dim); transform: translateY(-1px); } div.nptc-chrome .btn-outline{ background:transparent; color: var(--ink); border-color: var(--ink); } div.nptc-chrome .btn-outline:hover{ background: var(--ink); color: var(--paper); } div.nptc-chrome .hero .wrap{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:center; position:relative; z-index:2; } div.nptc-chrome .cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap:wrap; } div.nptc-chrome .cta-band .btn-outline{ border-color: var(--white); color: var(--white); } div.nptc-chrome .cta-band .btn-outline:hover{ background: var(--white); color: var(--oxblood); } div.nptc-chrome .form-section .wrap{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; } div.nptc-chrome .form-panel .btn{ margin-top: 26px; width:100%; justify-content:center; } div.nptc-chrome footer{ background: var(--ink); color: rgba(245,241,231,0.75); padding: 56px 0 28px; font-size: 0.92rem; } div.nptc-chrome footer .foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(245,241,231,0.15); } div.nptc-chrome footer h4{ color: var(--paper); font-family: var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom: 16px; } div.nptc-chrome footer .brand{ color: var(--paper); margin-bottom: 14px; } div.nptc-chrome footer .brand-name{ color: var(--paper); } div.nptc-chrome footer a{ text-decoration:none; color: rgba(245,241,231,0.75); } div.nptc-chrome footer a:hover{ color: var(--brass-light); } div.nptc-chrome footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } div.nptc-chrome .foot-bottom{ display:flex; justify-content:space-between; align-items:flex-start; gap: 20px; padding-top: 22px; font-size: 0.8rem; color: rgba(245,241,231,0.5); flex-wrap:wrap; } div.nptc-chrome .foot-bottom .disclaimer{ max-width: 640px; line-height:1.55; } @media (max-width: 900px){ div.nptc-chrome .topbar .tb-note{ display:none; } div.nptc-chrome .topbar .wrap{ justify-content:center; } div.nptc-chrome .topbar a:last-child{ display:none; } div.nptc-chrome nav.main-nav{ gap: 18px; } div.nptc-chrome nav.main-nav a:not(.nav-cta){ display:none; } div.nptc-chrome .hero .wrap{ grid-template-columns: 1fr; } div.nptc-chrome .form-section .wrap{ grid-template-columns: 1fr; } div.nptc-chrome footer .foot-grid{ grid-template-columns: 1fr; } div.nptc-chrome .cta-band .wrap{ flex-direction:column; align-items:flex-start; } } /* ========================================================================== Template-mode extras — the equivalents of what nptc-elementor-bridge.css does on a full NPTC page, but scoped to the chrome wrapper so it works on the client's own pages where body.nptc-page is absent. ========================================================================== */ /* 1. Dissolve Elementor's wrappers inside the template, so