/* =====================================================================
New York Biz Funding — site chrome skin (header / footer / buttons / type tokens)
Matches the 2026-09 homepage design. Every class is namespaced "nybf-" so it can
be dropped into existing interior pages (style.css + v2-skin.css) without
touching their content. Nothing here targets bare elements or generic classes.
Include in (after the page's existing stylesheets):
Then replace the old .v2-bar + header.v2-hdr with chrome/header.html
and footer.v2-foot with chrome/footer.html.
===================================================================== */
:root{
/* color tokens (sampled from the design PNG) */
--nybf-blue:#0069fd; /* primary blue: icons, links */
--nybf-blue-hi:#0389fc; /* button gradient top */
--nybf-blue-mid:#0074fd; /* button gradient middle */
--nybf-blue-lo:#005cf9; /* button gradient bottom */
--nybf-blue-head:#0069fd; /* blue headline accent ("BUILT DIFFERENT.", "Texas Business.") */
--nybf-kicker:#1a6fd6; /* letter-spaced kicker labels */
--nybf-ink:#05070f; /* hero headline black-navy */
--nybf-navy:#0a1030; /* section headings */
--nybf-navy-2:#0a1030; /* card titles */
--nybf-body:#384a70; /* lead copy */
--nybf-text:#384465; /* body copy */
--nybf-muted:#5a6788; /* small print */
--nybf-nav:#101a38; /* nav links */
--nybf-band:#001a3a; /* stats band navy */
--nybf-panel:#f1f8fd; /* light blue panels */
--nybf-paper:#fefefe; /* page background */
--nybf-line:#e1e9f3; /* hairlines */
--nybf-card-line:#e9edf3; /* card borders */
/* type tokens */
--nybf-font:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--nybf-font-label:'Inter','Inter Tight',system-ui,sans-serif;
--nybf-font-quote:'Newsreader','Times New Roman',Georgia,serif;
--nybf-radius:4px;
--nybf-wrap:1180px;
}
/* ---------------- layout helper ---------------- */
.nybf-wrap{width:100%;max-width:var(--nybf-wrap);margin:0 auto;padding:0 20px;box-sizing:border-box}
@media (min-width:960px){.nybf-wrap{padding:0 40px}}
/* ---------------- buttons ---------------- */
.nybf-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:0 24px;border-radius:var(--nybf-radius);font-family:var(--nybf-font);font-size:15px;line-height:1;letter-spacing:-.2px;white-space:nowrap;text-decoration:none!important;box-sizing:border-box;cursor:pointer;transition:filter .15s,transform .15s,background-color .15s}
.nybf-btn svg{width:15px;height:15px;flex:none}
.nybf-btn--primary{background:linear-gradient(180deg,var(--nybf-blue-hi) 0%,var(--nybf-blue-mid) 50%,var(--nybf-blue-lo) 100%);color:#fff!important;font-weight:500;border:0;box-shadow:0 2px 6px rgba(0,80,220,.2)}
.nybf-btn--primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.nybf-btn--outline{background:rgba(255,255,255,.72);color:#192756!important;font-weight:400;border:1.5px solid #2b8cf7}
.nybf-btn--outline:hover{background:#fff}
.nybf-btn--outline-light{background:rgba(4,12,30,.18);color:#fff!important;font-weight:400;border:1.5px solid rgba(255,255,255,.95)}
.nybf-btn--outline-light:hover{background:rgba(4,12,30,.34)}
.nybf-btn--block{display:flex;width:100%}
@media (max-width:959.98px){.nybf-btn{min-height:50px;font-size:16px}}
/* ---------------- header ---------------- */
.nybf-hdr{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,#eef5fc 0%,#f8fbfe 100%);border-bottom:1px solid var(--nybf-line);font-family:var(--nybf-font)}
.nybf-hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.nybf-hdr__logo{display:flex;align-items:center;flex:none;line-height:0}
.nybf-hdr__logo img{width:146px;height:auto;display:block;margin-left:-4px}
.nybf-nav{display:none}
.nybf-hdr__cta{min-height:40px;padding:0 16px;font-size:14px;gap:8px}
.nybf-hdr__cta svg{width:13px;height:13px}
.nybf-burger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;border:0;background:none;color:var(--nybf-navy);cursor:pointer;flex:none}
.nybf-burger svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.nybf-hdr__right{display:flex;align-items:center;gap:6px}
.nybf-menu{display:none;border-top:1px solid var(--nybf-line);background:#fff;padding:4px 20px 18px}
.nybf-menu.is-open{display:block}
.nybf-menu a:not(.nybf-btn){display:block;padding:14px 2px;border-bottom:1px solid var(--nybf-line);color:var(--nybf-navy);font-weight:600;font-size:15px;text-decoration:none}
.nybf-menu .nybf-btn{margin-top:14px}
@media (min-width:960px){
.nybf-hdr__in{height:92px}
.nybf-hdr__logo img{width:212px;margin-left:-6px}
.nybf-burger,.nybf-menu,.nybf-menu.is-open{display:none}
.nybf-nav{display:flex;align-items:center;gap:23px;margin-left:auto;margin-right:26px}
.nybf-nav a{display:inline-flex;align-items:center;gap:4px;color:var(--nybf-nav);font-size:13.5px;letter-spacing:-.3px;text-decoration:none;white-space:nowrap}
.nybf-nav a:hover{color:var(--nybf-blue)}
.nybf-nav svg{width:8px;height:8px;margin-top:1px}
.nybf-hdr__cta{min-height:40px;padding:0 22px;font-size:14.8px;gap:12px}
.nybf-hdr__cta svg{width:15px;height:15px}
}
@media (min-width:1280px){.nybf-nav{gap:30px}.nybf-nav a{font-size:14px}}
/* ---------------- footer ---------------- */
.nybf-foot{background:#f3f7fc;border-top:1px solid var(--nybf-line);color:var(--nybf-text);font-family:var(--nybf-font);font-size:13px;line-height:1.5}
.nybf-foot__in{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;padding-top:30px;padding-bottom:20px}
.nybf-foot__logo{grid-column:1/-1;line-height:0}
.nybf-foot__logo img{width:170px;height:auto;display:block}
.nybf-foot h4{margin:0 0 8px;font-family:var(--nybf-font-label);font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--nybf-kicker)}
.nybf-foot nav a{display:block;padding:9px 0;font-size:14px;color:#283761;text-decoration:none}
.nybf-foot nav a:hover{color:var(--nybf-kicker);text-decoration:underline;text-underline-offset:3px}
.nybf-foot__legal{grid-column:1/-1;border-top:1px solid var(--nybf-line);padding-top:14px;font-size:12px;color:var(--nybf-muted)}
@media (min-width:960px){
.nybf-foot__in{grid-template-columns:1.1fr 1fr 1fr 1fr;gap:28px;padding-top:34px;padding-bottom:22px}
.nybf-foot__logo{grid-column:auto}
.nybf-foot__logo img{width:190px}
.nybf-foot nav a{padding:3px 0;font-size:13px}
}
/* ---------------- defensive font lock ----------------
Interior style.css sets serif families on h1–h4 and some links with higher specificity.
Lock the chrome's own typography so it renders identically on every page. */
.nybf-hdr,.nybf-hdr a,.nybf-hdr button,.nybf-menu a,.nybf-btn,.nybf-foot,.nybf-foot a,.nybf-foot div{font-family:var(--nybf-font)!important}
.nybf-foot h4{font-family:var(--nybf-font-label)!important;font-size:10.5px!important;font-weight:700!important;letter-spacing:2px!important;line-height:1.4!important;text-transform:uppercase!important;color:var(--nybf-kicker)!important;margin:0 0 8px!important}
/* ---------------- typography tokens (opt-in) ----------------
Utility classes for new markup, plus an opt-in scope: add class="nybf-type" to a
content wrapper (or ) to restyle its headings in the design's type system. */
.nybf-kicker{display:block;font-family:var(--nybf-font-label);font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--nybf-kicker)}
.nybf-h1{font-family:var(--nybf-font);font-weight:900;font-size:clamp(40px,6vw,62px);line-height:.88;letter-spacing:-1.2px;color:var(--nybf-ink);text-transform:uppercase}
.nybf-h2{font-family:var(--nybf-font);font-weight:800;font-size:clamp(32px,4.2vw,42px);line-height:1;letter-spacing:-1.2px;color:var(--nybf-navy)}
.nybf-accent{color:var(--nybf-blue-head);font-style:normal}
.nybf-lead{font-family:var(--nybf-font);font-size:18px;line-height:1.45;color:var(--nybf-body)}
.nybf-quote{font-family:var(--nybf-font-quote);font-size:23px;line-height:1.3;color:#161e3d}
.nybf-type h1,.nybf-type h2,.nybf-type h3{font-family:var(--nybf-font);color:var(--nybf-navy);letter-spacing:-.02em}
.nybf-type h1{font-weight:900}
.nybf-type h2{font-weight:800}
.nybf-type h3{font-weight:700}
.nybf-type p,.nybf-type li{font-family:var(--nybf-font)}
.nybf-type a:not([class]){color:var(--nybf-blue)}
/* ===== NYBF content theme (interior pages) ===== */
:root{--gold:#0069fd;--gold-dk:#005cf9;--maroon:#0a1030;--wine:#05070f;--ink:#05070f;--v2body:#384465;--v2line:#e1e9f3;--v2cream:#f1f8fd;
--ocean:#0a1030;--ocean-dark:#05070f;--ocean-light:#0a2f6e;--sun:#0069fd;--sun-light:#5aa2ff;--sun-dark:#005cf9;--cream:#f1f8fd;--cream-dark:#e6f0fb;--charcoal:#05070f;--black:#05070f;--border:#e1e9f3}
html body h1,html body h2,html body h3,html body .section-title,html body .page-hero h1,html body .apply-hero h1{font-family:var(--nybf-font)!important;letter-spacing:-.02em}
html body .v2-btn,html body a.v2-btn,html body .btn-primary,html body .btn-gold,html body .btn-sun,html body .city-cta-btn,html body .sticky-mobile-cta a{background:#0069fd!important;color:#fff!important;border-color:#0069fd!important}
html body .btn-primary:hover,html body .btn-gold:hover,html body .btn-sun:hover,html body .city-cta-btn:hover{background:#005cf9!important;color:#fff!important}
html body .city-eyebrow,html body .section-eyebrow{color:#1a6fd6!important}
html body .breadcrumb a{color:#0069fd!important}
/* ===== NYBF content theme pass 2 (hard-coded maroon/gold overrides) ===== */
html:root{--primary-blue:#0069fd;--primary-blue-active:#005cf9;--primary-blue-hover:#005cf9;--dark-blue:#0a1030}
html body .page-hero,html body .cta-banner{background:#0a1030!important}
html body .page-hero::before{background:linear-gradient(135deg,rgba(5,7,15,.9) 0%,rgba(10,16,48,.86) 45%,rgba(0,92,249,.72) 100%)!important}
html body .cta-banner .cta-overlay{background:linear-gradient(135deg,rgba(5,7,15,.9) 0%,rgba(0,26,58,.88) 55%,rgba(0,105,253,.78) 100%)!important}
html body .cta-banner h2 .accent,html body .page-hero .accent,html body .accent{color:#5aa2ff!important}
html body section[style*="background:#f7f8fa"] h2{font-family:var(--nybf-font)!important;color:#0a1030!important}
html body .apply-hero{background:linear-gradient(135deg,#0a1030 0%,#001a3a 55%,#005cf9 100%)!important}
html body .apply-hero-content h1 span,html body .apply-hero h1 .accent,html body .apply-hero h1 em,html body .apply-hero h1 strong{color:#5aa2ff!important}
html body .apply-hero .trust-item{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.22)!important;color:#fff!important}
html body .apply-hero .trust-item svg{stroke:#8fc0ff!important;color:#8fc0ff!important}
html body .form-section h2{font-family:var(--nybf-font)!important;color:#0a1030!important}
html body .btn-submit,html body button[type="submit"],html body .application-form-single button[type="submit"],html body .btn-cta-gold{background:#0069fd!important;color:#fff!important;border-color:#0069fd!important}
html body .btn-submit:hover,html body button[type="submit"]:hover,html body .btn-cta-gold:hover{background:#005cf9!important;color:#fff!important}
/* ===== NYBF eyebrow pill fix ===== */
html body .city-eyebrow{background:rgba(0,105,253,.18)!important;color:#fff!important;border:1px solid rgba(143,192,255,.45)!important}
html body .section-eyebrow{color:#1a6fd6!important}
/* ===== NYBF pass 3: remaining hard-coded gold/orange/green accents (apply page + clone city/matrix pages) ===== */
html body .floating-cta .btn,html body .floating-cta a.btn-cta-gold{background:#0069fd!important;color:#fff!important;border-color:#0069fd!important}
html body a[style*="#FF8C00"],html body a[style*="#ff8c00"]{color:#0069fd!important}
html body div[style*="#fff8e6"]{background:#f1f7ff!important;border-color:#8fc0ff!important}
html body .apply-hero .trust-item{border-color:rgba(255,255,255,.22)!important}
html body .city-eyebrow,html body .matrix-eyebrow{background:rgba(0,105,253,.2)!important;color:#fff!important;border:1px solid rgba(143,192,255,.5)!important}
html body .city-cta-btn,html body .matrix-cta-btn{background:#0069fd!important;color:#fff!important}
html body .city-cta-btn:hover,html body .matrix-cta-btn:hover{background:#005cf9!important;color:#fff!important}
html body .city-hero h1 strong,html body .matrix-hero h1 strong{color:#5aa2ff!important}
html body a[style*="border-left:3px solid #00A86B"]{border-left-color:#0069fd!important}
html body div[style*="color:#00A86B"]{color:#1a6fd6!important}