/* ══ font-fallback.css ══ */ /* ══════════════════════════════════════════════════════════════════ SELF-HOSTED FONTS — Cumulative Layout Shift fix ══════════════════════════════════════════════════════════════════ Previously Sora and Inter came from fonts.googleapis.com with display=swap. Measured effect: total page height dropped 654px the moment the real fonts arrived (~670ms), because the system fallback wraps text differently. That reflow was the entire remaining CLS on about.html (0.137) and why-merchant-navy.html (0.136). Self-hosting removes the third-party DNS + TLS + CSS round-trip, so the fonts are requested immediately from the same origin and are preloaded. font-display:optional means the browser uses the real font ONLY if it arrives before first paint — otherwise it keeps the fallback for the whole page load and NEVER swaps. Either way the layout is painted once. Trade-off, stated plainly: on a cold cache over a slow connection a visitor may see the fallback font for that first page view. Zero layout shift is worth more than guaranteeing the brand face on the very first paint, and from the second page view it is cached. ══════════════════════════════════════════════════════════════════ */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:optional; src:url('../fonts/inter-400.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:optional; src:url('../fonts/inter-500.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:optional; src:url('../fonts/inter-600.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:optional; src:url('../fonts/inter-700.woff2') format('woff2')} @font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:optional; src:url('../fonts/sora-600.woff2') format('woff2')} @font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:optional; src:url('../fonts/sora-700.woff2') format('woff2')} @font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:optional; src:url('../fonts/sora-800.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:optional; src:url('../fonts/jetbrains-mono-500.woff2') format('woff2')} /* Metric-matched fallbacks, so even when the real face is skipped the text occupies almost the same space. Measured at 100px on canvas: Inter 3447 wide / Sora 3772 / Arial 3212.8. */ @font-face{font-family:'Inter Fallback'; src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans'),local('Roboto'),local('Segoe UI'); size-adjust:107.29%;ascent-override:90.4%;descent-override:22.4%;line-gap-override:0%} @font-face{font-family:'Sora Fallback'; src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans'),local('Roboto'),local('Segoe UI'); size-adjust:117.41%;ascent-override:82.6%;descent-override:24.7%;line-gap-override:0%} /* ══ header.css ══ */ /* ============================================================ HBIMS-NAF&SA — Universal Header Ledger & Horizon design system · locked palette only Contract preserved: .hb-header #hb-header .hb-brand .hb-nav .hb-cta .hb-burger #hb-mob .hb-mob .hb-mob-links .hb-mob-app .hb-mob-apply · data-apply-modal-open · data-app-download-open ============================================================ */ :root{ /* ---- locked tokens ---- */ --hb-cream:#FCF7EA; /* primary background */ --hb-white:#FFFFFF; /* panels, cards */ --hb-editorial:#F5EAD8; /* editorial fill */ --hb-ink:#1D161C; /* headings / nav */ --hb-body:#2D2926; /* body text */ --hb-muted:#543C2C; /* secondary text */ --hb-bronze:#6E5327; /* utility strip ground */ --hb-gold:#E2B15D; /* CTA gold */ --hb-gold-hi:#EBB93F; /* CTA gold hover */ --hb-gold-dot:#F3D58C; /* live dot / focus on bronze */ --hb-burg:#7B2D26; /* primary CTA burgundy */ --hb-green:#2C6A47; /* Navya live green */ --hb-border:#ECD093; /* soft border */ /* ---- derived ---- */ --hb-burg-hi:color-mix(in srgb,var(--hb-burg) 86%,#FFFFFF); --hb-burg-lo:color-mix(in srgb,var(--hb-burg) 82%,#000000); --hb-gold-lo:color-mix(in srgb,var(--hb-gold) 84%,#000000); --hb-bronze-40:color-mix(in srgb,var(--hb-bronze) 40%,#FFFFFF); --hb-hover-wash:color-mix(in srgb,var(--hb-bronze) 6%,transparent); --hb-shadow-ink:29,22,28; /* ---- type ---- */ --hb-display:'Sora','Sora Fallback',ui-sans-serif,system-ui,sans-serif; --hb-text:'Inter','Inter Fallback',ui-sans-serif,system-ui,sans-serif; /* ---- metrics ---- */ --hb-strip-h:40px; --hb-bar-h:64px; --hb-max:1520px; --hb-pad:clamp(16px,2.5vw,32px); } /* ---------- scoped base ---------- */ .hb-header *,.hb-header *::before,.hb-header *::after, .hb-mob *,.hb-mob *::before,.hb-mob *::after{box-sizing:border-box;margin:0;padding:0} .hb-header summary,.hb-mob summary{list-style:none;cursor:pointer} .hb-header summary::-webkit-details-marker,.hb-mob summary::-webkit-details-marker{display:none} .hb-header svg,.hb-mob svg{display:block;flex:none} body.hb-lock{overflow:hidden} /* ---------- skip link ---------- */ .hb-skip{position:fixed;top:-52px;left:16px;z-index:1400;background:var(--hb-burg);color:#fff; padding:11px 18px;border-radius:10px;font:600 14px/1 var(--hb-text);text-decoration:none; transition:top .2s ease} .hb-skip:focus{top:12px} /* ---------- fixed shell + flow spacer ---------- */ .hb-header{position:fixed;top:0;left:0;right:0;z-index:1200; background:linear-gradient(180deg,#FFFDF6 0%,var(--hb-cream) 42%,#F6EEDB 100%)} .hb-header::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px; background:linear-gradient(90deg,rgba(226,177,93,0) 0%,var(--hb-gold) 14%,var(--hb-gold) 86%,rgba(226,177,93,0) 100%)} .hb-header::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0; box-shadow:0 14px 34px -20px rgba(var(--hb-shadow-ink),.35);transition:opacity .25s ease} .hb-header.is-scrolled::before{opacity:1} .hb-spacer{height:var(--hb-bar-h)} /* ============================================================ TIER 1 · UTILITY STRIP (desktop) ============================================================ */ .hb-strip{display:none;color:var(--hb-cream); background:linear-gradient(180deg,#7B5D2D 0%,var(--hb-bronze) 55%,#5B431C 100%); max-height:var(--hb-strip-h);overflow:visible;position:relative;z-index:2} .hb-strip-in{display:flex;align-items:center;justify-content:space-between;gap:18px; width:100%;max-width:var(--hb-max);margin:0 auto;height:var(--hb-strip-h); padding:0 var(--hb-pad)} .hb-strip-l,.hb-strip-r{display:flex;align-items:center;gap:18px;min-width:0} .hb-line{display:inline-flex;align-items:center;gap:8px;color:var(--hb-body); text-decoration:none;font:600 12.5px/1 var(--hb-text);letter-spacing:.01em;white-space:nowrap; padding:8px 15px 8px 12px;border-radius:999px; background:linear-gradient(180deg,#EFC97E 0%,var(--hb-gold) 55%,var(--hb-gold-lo) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(110,83,39,.32), 0 8px 16px -8px rgba(0,0,0,.6); transition:transform .16s ease,box-shadow .16s ease} .hb-line svg{width:14px;height:14px;color:var(--hb-burg)} .hb-line span{color:var(--hb-muted);font-weight:600} .hb-line strong{font-weight:700;color:var(--hb-ink)} .hb-line:hover{transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(110,83,39,.3), 0 12px 22px -9px rgba(0,0,0,.65)} /* Ask Navya — the only green in the header */ .hb-navya{display:inline-flex;align-items:center;gap:8px;background:var(--hb-green);color:#fff; border-radius:999px;padding:6px 13px 6px 10px;text-decoration:none;white-space:nowrap; font:600 12.5px/1 var(--hb-text);letter-spacing:.01em; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); transition:transform .18s ease,box-shadow .18s ease} .hb-navya:hover{transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 16px -9px rgba(44,106,71,.9)} .hb-navya svg{width:15px;height:15px;fill:#fff} .hb-ai{font:700 9.5px/1 var(--hb-text);letter-spacing:.09em;background:rgba(255,255,255,.16); padding:3px 7px;border-radius:6px} .hb-dot{width:7px;height:7px;border-radius:50%;background:var(--hb-gold-dot);position:relative} .hb-dot::after{content:"";position:absolute;inset:0;border-radius:50%; animation:hb-pulse 2s ease-out infinite} @keyframes hb-pulse{0%{box-shadow:0 0 0 0 rgba(243,213,140,.55)}70%,100%{box-shadow:0 0 0 8px rgba(243,213,140,0)}} .hb-chip{font:600 11.5px/1 var(--hb-text);letter-spacing:.05em;color:var(--hb-cream); border:1px solid rgba(252,247,234,.35);padding:5px 11px;border-radius:999px;white-space:nowrap;opacity:.92} .hb-strip-tag{display:none;flex:1;min-width:0;text-align:center;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;font:500 12px/1 var(--hb-text); color:var(--hb-cream);letter-spacing:.035em;opacity:.92;padding:0 14px} /* ============================================================ TIER 2 · MAIN BAR ============================================================ */ .hb-bar{position:relative;z-index:1;display:flex;align-items:center;gap:16px; height:var(--hb-bar-h);max-width:var(--hb-max);margin:0 auto;padding:0 var(--hb-pad)} /* ---- brand lockup ---- */ .hb-brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;flex:none} .hb-seal{position:relative;width:46px;height:46px;flex:none;border-radius:50%; background:var(--hb-white);border:1px solid var(--hb-border);display:grid;place-items:center; box-shadow:0 3px 9px -4px rgba(110,83,39,.45),inset 0 1px 0 #fff; transition:transform .18s ease} .hb-brand:hover .hb-seal{transform:translateY(-1px)} .hb-seal img{width:40px;height:40px;border-radius:50%} .hb-seal .tm{position:absolute;top:-3px;right:-6px;font:700 7.5px/1 var(--hb-text); color:var(--hb-bronze);background:var(--hb-cream);border:1px solid var(--hb-border); border-radius:999px;padding:2px 4px;letter-spacing:.03em} .hb-brand-txt{display:flex;flex-direction:column;min-width:0} .hb-brand-name{display:flex;align-items:flex-start;gap:2px;white-space:nowrap; font:700 17px/1.1 var(--hb-display);color:var(--hb-ink);letter-spacing:.01em} .hb-brand-name .tm{font:700 9px/1 var(--hb-text);color:var(--hb-bronze);margin-top:1px} .hb-brand-tag{display:block;font:500 11.5px/1.3 var(--hb-text);color:var(--hb-muted); letter-spacing:.015em;margin-top:3px;white-space:nowrap} /* ---- primary navigation ---- */ .hb-nav{display:none;align-items:center;gap:2px;margin:0 auto} .hb-nav>a,.hb-nav .nav-dd>summary{position:relative;display:inline-flex;align-items:center;gap:6px; padding:11px 10px;border-radius:10px;text-decoration:none;white-space:nowrap; font:600 14px/1 var(--hb-text);color:var(--hb-ink);letter-spacing:.004em; transition:background .16s ease,color .16s ease} .hb-nav>a::after,.hb-nav .nav-dd>summary::after{content:"";position:absolute;left:10px;right:10px; bottom:6px;height:2px;border-radius:2px;background:var(--hb-gold); transform:scaleX(0);transform-origin:left;transition:transform .2s ease} .hb-nav>a:hover,.hb-nav .nav-dd>summary:hover,.hb-nav .nav-dd[open]>summary{background:var(--hb-hover-wash)} .hb-nav>a:hover::after,.hb-nav .nav-dd>summary:hover::after, .hb-nav .nav-dd[open]>summary::after,.hb-nav .nav-dd:focus-within>summary::after{transform:scaleX(1)} .hb-nav>a.active{color:var(--hb-burg)} .hb-nav>a.active::after{transform:scaleX(1);background:var(--hb-burg)} .hb-caret{width:11px;height:11px;color:var(--hb-bronze);transition:transform .2s ease;margin-top:1px} .nav-dd[open]>summary .hb-caret{transform:rotate(180deg)} @media (hover:hover){.nav-dd:hover>summary .hb-caret{transform:rotate(180deg)}} /* ---- dropdown panels ---- */ .nav-dd{position:relative} .nav-dd-menu{position:absolute;top:calc(100% + 12px);left:50%;min-width:288px; transform:translate(-50%,8px);opacity:0;visibility:hidden;pointer-events:none; background:var(--hb-white);border:1px solid var(--hb-border);border-radius:16px; box-shadow:0 26px 52px -24px rgba(var(--hb-shadow-ink),.32); padding:10px;z-index:30; transition:opacity .18s ease,transform .18s ease,visibility .18s} .nav-dd-menu::before{content:"";position:absolute;top:-13px;left:0;right:0;height:13px} .nav-dd[open]>.nav-dd-menu,.nav-dd:focus-within>.nav-dd-menu{ opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)} @media (hover:hover){.nav-dd:hover>.nav-dd-menu{ opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}} .nav-dd-menu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px; text-decoration:none;color:var(--hb-body);font:500 14px/1.35 var(--hb-text); transition:background .14s ease,color .14s ease} .nav-dd-menu a:hover{background:var(--hb-cream);color:var(--hb-ink)} .dd-ic{width:19px;height:19px;color:var(--hb-bronze)} .dd-sub{display:block;font:500 11.5px/1.3 var(--hb-text);color:var(--hb-muted);margin-top:2px} .dd-n{font:600 11px/1 var(--hb-text);color:var(--hb-bronze);letter-spacing:.05em;min-width:20px} .dd-badge{margin-left:auto;font:700 9.5px/1 var(--hb-text);letter-spacing:.07em;color:var(--hb-burg); background:color-mix(in srgb,var(--hb-gold) 26%,#fff);border:1px solid var(--hb-border); padding:3px 8px;border-radius:999px} .dd-lead{border-bottom:1px solid var(--hb-border);border-radius:10px 10px 0 0; margin:-2px -2px 6px;padding:11px 12px 12px;font-weight:600;color:var(--hb-ink)} .dd-all{margin-top:6px;border-top:1px solid var(--hb-border);padding-top:11px; color:var(--hb-burg);font-weight:600;justify-content:flex-start} .dd-all svg{width:14px;height:14px;margin-left:2px} .nav-dd-wide{min-width:584px} .dd-cols{display:grid;grid-template-columns:1fr 1fr;gap:1px 8px} .dd-cols a{padding:8px 10px} /* ============================================================ CTA CLUSTER — the three lead sources ============================================================ */ .hb-cta{display:flex;align-items:center;gap:10px;margin-left:auto} .hb-btn{display:none;align-items:center;justify-content:center;gap:8px;height:44px; padding:0 18px;border-radius:12px;border:0;text-decoration:none;white-space:nowrap; font:600 14px/1 var(--hb-text);letter-spacing:.01em;cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease} .hb-btn:active{transform:translateY(1px)} .hb-btn svg{width:17px;height:17px} /* 3D coin ornament — engraved socket carrying each lead icon */ .hb-btn .hb-coin{width:25px;height:25px;flex:none;border-radius:50%;display:grid;place-items:center; background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.34) 100%); box-shadow:inset 0 1.5px 2px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.22), 0 1px 0 rgba(255,255,255,.3)} .hb-btn .hb-coin svg{width:14px;height:14px} /* ornament shape modifiers — matched to each action's meaning */ .hb-orn--squircle{border-radius:8px!important} .hb-orn--shield{border-radius:0!important;box-shadow:none!important; clip-path:polygon(50% 0,96% 15%,96% 58%,50% 100%,4% 58%,4% 15%); background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,0) 40%), linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.36))!important; filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))} .hb-orn--hex{border-radius:0!important;box-shadow:none!important; clip-path:polygon(25% 4%,75% 4%,97% 50%,75% 96%,25% 96%,3% 50%); background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,0) 40%), linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.36))!important; filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))} .hb-orn--diamond{border-radius:5px!important;transform:rotate(45deg); width:21px!important;height:21px!important} .hb-orn--diamond svg{transform:rotate(-45deg)} .hb-btn-gold{color:var(--hb-body); background:linear-gradient(180deg,#EFC97E 0%,var(--hb-gold) 55%,var(--hb-gold-lo) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(110,83,39,.28), 0 9px 18px -10px rgba(178,132,52,.55)} .hb-btn-gold:hover{transform:translateY(-1px); background:linear-gradient(180deg,#F2CE84 0%,var(--hb-gold-hi) 55%,var(--hb-gold) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(110,83,39,.28), 0 13px 24px -11px rgba(178,132,52,.6)} .hb-btn-primary{color:#fff; background:linear-gradient(180deg,var(--hb-burg-hi) 0%,var(--hb-burg) 58%,var(--hb-burg-lo) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.26), 0 11px 20px -10px rgba(123,45,38,.55);will-change:transform} .hb-btn-primary:hover{transform:translateY(-1px); background:linear-gradient(180deg,color-mix(in srgb,var(--hb-burg) 78%,#fff) 0%,var(--hb-burg-hi) 58%,var(--hb-burg) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -2px 0 rgba(0,0,0,.24), 0 15px 26px -11px rgba(123,45,38,.6)} .hb-btn-bronze{color:var(--hb-cream); background:linear-gradient(180deg,#7E5F31 0%,var(--hb-bronze) 58%,#57411E 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.3), 0 10px 20px -10px rgba(110,83,39,.65)} .hb-btn-bronze svg{color:var(--hb-gold-dot)} .hb-btn-bronze:hover{transform:translateY(-1px); background:linear-gradient(180deg,#8A6A38 0%,#7A5C2C 58%,var(--hb-bronze) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.28), 0 14px 26px -11px rgba(110,83,39,.72)} /* mobile-bar icon actions */ .hb-icnbtn{display:flex;align-items:center;justify-content:center;width:42px;height:42px; border-radius:11px;border:0;text-decoration:none; transition:transform .15s ease,box-shadow .15s ease; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.2), 0 8px 14px -8px rgba(29,22,28,.55)} .hb-icnbtn:hover{transform:translateY(-1px)} .hb-icnbtn svg{width:19px;height:19px} .hb-icn-call{color:var(--hb-body); background:linear-gradient(180deg,#EFC97E 0%,var(--hb-gold) 55%,var(--hb-gold-lo) 100%)} .hb-icn-wa{color:#fff; background:linear-gradient(180deg,#35815B 0%,var(--hb-green) 55%,#224F38 100%)} .hb-icn-wa svg{fill:#fff} .hb-burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; width:44px;height:44px;border-radius:11px;border:0;cursor:pointer; background:linear-gradient(180deg,var(--hb-burg-hi) 0%,var(--hb-burg) 58%,var(--hb-burg-lo) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.26), 0 8px 14px -8px rgba(123,45,38,.6); transition:transform .15s ease,box-shadow .15s ease} .hb-burger:hover{transform:translateY(-1px)} .hb-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--hb-cream)} /* ============================================================ TIER 3 · DRAWER ============================================================ */ .hb-mob{position:fixed;inset:0;z-index:1300;visibility:hidden;background:rgba(29,22,28,0); transition:background .26s ease,visibility .26s} .hb-mob.open{visibility:visible;background:rgba(29,22,28,.38)} .hb-mob-panel{margin-left:auto;height:100%;width:min(430px,100%);display:flex;flex-direction:column; background:linear-gradient(180deg,#FFFDF6 0%,var(--hb-cream) 34%,#F6EEDB 100%); transform:translateX(102%); transition:transform .3s cubic-bezier(.22,.8,.3,1); border-left:1px solid var(--hb-border); box-shadow:-28px 0 64px -34px rgba(var(--hb-shadow-ink),.5)} .hb-mob.open .hb-mob-panel{transform:none} .hb-mob-top{display:flex;align-items:center;gap:10px;padding:13px 16px; border-bottom:1px solid var(--hb-border)} .hb-mob-top .hb-seal{width:38px;height:38px} .hb-mob-top .hb-seal img{width:33px;height:33px} .hb-mob-top .hb-brand-name{font-size:15px} .hb-mob-x{margin-left:auto;width:42px;height:42px;border-radius:11px; border:1px solid var(--hb-border);background:var(--hb-white);color:var(--hb-ink); display:grid;place-items:center;cursor:pointer} .hb-mob-x svg{width:17px;height:17px} .hb-mob-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 12px 18px; overscroll-behavior:contain} .hb-mob-links{display:flex;flex-direction:column;gap:2px} .hb-mob-links>a,.hb-mob-dd>summary{display:flex;align-items:center;gap:11px;padding:13px 12px; border-radius:12px;text-decoration:none;color:var(--hb-ink); font:600 15.5px/1.2 var(--hb-text)} .hb-mob-links>a:hover,.hb-mob-dd>summary:hover{background:var(--hb-white)} .hb-mob-links>a.active{color:var(--hb-burg);background:var(--hb-white)} .hb-mob-dd>summary .hb-caret{margin-left:auto;width:13px;height:13px} .hb-mob-dd{border-radius:12px} .hb-mob-dd[open]{background:var(--hb-white);box-shadow:inset 0 0 0 1px var(--hb-border)} .hb-mob-dd[open]>summary .hb-caret{transform:rotate(180deg)} .hb-mob-dd-menu{display:flex;flex-direction:column;padding:2px 6px 8px} .hb-mob-dd-menu a{display:flex;align-items:center;gap:9px;padding:10px 10px 10px 18px; border-radius:9px;text-decoration:none;color:var(--hb-body);font:500 14.5px/1.35 var(--hb-text)} .hb-mob-dd-menu a:hover{background:var(--hb-cream)} .hb-mob-dd-menu a.active{color:var(--hb-burg)} .hb-mob-dd-menu .dd-sub{font-size:11px} .hb-mob-contact{display:grid;gap:8px;margin:12px 2px 2px} .hb-row{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:12px; border:1px solid var(--hb-border);background:var(--hb-white);text-decoration:none; color:var(--hb-ink);font:600 14px/1.25 var(--hb-text)} .hb-row svg{width:19px;height:19px;color:var(--hb-bronze)} .hb-row small{display:block;font:500 12px/1.3 var(--hb-text);color:var(--hb-muted);margin-top:2px} .hb-row-navya{background:var(--hb-green);border-color:var(--hb-green);color:#fff} .hb-row-navya svg{fill:#fff;color:#fff} .hb-row-navya small{color:rgba(255,255,255,.85)} .hb-row-navya .hb-dot{margin-left:auto} .hb-mob-ctas{display:grid;gap:9px;padding:13px 16px calc(15px + env(safe-area-inset-bottom)); border-top:1px solid var(--hb-border);background:var(--hb-cream)} .hb-mob-ctas .hb-btn{display:flex;width:100%;height:48px;font-size:15px} /* ============================================================ SCROLL CONDENSE — CSS scroll-driven, JS fallback class ============================================================ */ @media (min-width:1024px){ .hb-header.is-scrolled .hb-strip{max-height:0;opacity:0;overflow:hidden} .hb-strip{transition:max-height .28s ease,opacity .22s ease} } @supports (animation-timeline: scroll()){ @media (min-width:1024px) and (prefers-reduced-motion:no-preference){ .hb-strip{animation:hb-strip-out linear both;animation-timeline:scroll(root); animation-range:0px 140px} } @media (prefers-reduced-motion:no-preference){ .hb-header::before{animation:hb-elev linear both;animation-timeline:scroll(root); animation-range:0px 140px} } } @keyframes hb-strip-out{to{max-height:0;opacity:0;overflow:hidden}} @keyframes hb-elev{to{opacity:1}} /* ============================================================ FOCUS · MOTION SAFETY ============================================================ */ .hb-header :focus-visible,.hb-mob :focus-visible{outline:2px solid var(--hb-burg);outline-offset:2px} .hb-strip :focus-visible{outline-color:var(--hb-gold-dot)} .hb-skip:focus-visible{outline:2px solid var(--hb-gold-dot);outline-offset:2px} @media (prefers-reduced-motion:reduce){ .hb-header *,.hb-header *::before,.hb-header *::after, .hb-mob *,.hb-mob *::before,.hb-mob *::after{ animation:none!important;transition-duration:.01ms!important} .hb-dot::after{display:none} } /* ============================================================ RESPONSIVE LADDER — verified fit at every band <1024 mobile bar · 1024–1359 trio + burger · ≥1360 full nav ============================================================ */ @media (max-width:599px){.hb-brand-tag{display:none}} @media (max-width:379px){.hb-icnbtn,.hb-burger{width:40px;height:40px}} @media (max-width:359px){.hb-brand-name{font-size:15px}} @media (max-width:349px){.hb-icn-call{display:none}} @media (min-width:1024px){ .hb-strip{display:block} .hb-spacer{height:calc(var(--hb-strip-h) + 72px)} .hb-header{--hb-bar-h:72px} .hb-btn{display:inline-flex} .hb-icnbtn{display:none} } @media (min-width:1400px){ .hb-nav{display:flex} .hb-burger{display:none} .hb-brand-tag{display:none} /* tagline moves to the strip centre */ .hb-strip-tag{display:block} .hb-brand-name{font-size:16px} .hb-nav>a,.hb-nav .nav-dd>summary{padding:11px 8px;font-size:13.5px} .hb-nav>a::after,.hb-nav .nav-dd>summary::after{left:8px;right:8px} #hb-header .hb-btn{height:42px;padding:0 12px;font-size:13.5px;gap:7px} #hb-header .hb-btn svg{width:15px;height:15px} #hb-header .hb-btn .hb-coin{width:22px;height:22px} #hb-header .hb-btn .hb-coin svg{width:12.5px;height:12.5px} #hb-header .hb-btn .hb-orn--diamond{width:18px!important;height:18px!important} .hb-cta{gap:6px} .hb-bar{gap:14px} } /* narrow slice — App button condenses to its icon; text returns at 1440 */ @media (min-width:1360px) and (max-width:1439px){ #hb-header .hb-btn-bronze span:not(.hb-coin){display:none} #hb-header .hb-btn-bronze{width:42px;padding:0} } /* ── FIX · header clipped between 1281px and 1580px ──────────────── The horizontal nav appeared at 1360px but the full bar (brand + nav + 3 CTAs + 2 icon buttons) did not fit until ~1580px, so the right-hand controls were cut off the viewport on most laptop widths. The App button now stays icon-only, and nav/CTA spacing tightens, right up to 1579px. Nothing is hidden — everything fits. */ @media (min-width:1360px) and (max-width:1599px){ #hb-header .hb-btn-bronze span:not(.hb-coin), #hb-header .hb-btn--bronze span:not(.hb-coin), #hb-header .pg-app span:not(.hb-coin){display:none} #hb-header .hb-btn-bronze, #hb-header .hb-btn--bronze{width:42px;padding:0;justify-content:center} .hb-nav{gap:0} .hb-nav>a,.hb-nav .nav-dd>summary{padding:11px 6px;font-size:13px} .hb-nav>a::after,.hb-nav .nav-dd>summary::after{left:6px;right:6px} #hb-header .hb-btn{height:40px;padding:0 10px;font-size:13px;gap:6px} .hb-cta{gap:5px} .hb-bar{gap:10px} } /* ── FIX · two remaining pinch points ── 1024–1100px: three full CTAs + burger overflow. App button condenses. ≤380px: brand name + three icon buttons overflow. Icons shrink. */ @media (min-width:1024px) and (max-width:1140px){ #hb-header .hb-btn-bronze span:not(.hb-coin), #hb-header .hb-btn--bronze span:not(.hb-coin), #hb-header .pg-app span:not(.hb-coin){display:none} #hb-header .hb-btn-bronze, #hb-header .hb-btn--bronze{width:42px;padding:0;justify-content:center} #hb-header .hb-btn{padding:0 12px;font-size:13.2px} .hb-bar{gap:10px} } @media (max-width:399px){ .hb-icnbtn,.hb-burger{width:38px;height:38px} .hb-bar{gap:6px} .hb-brand-name{font-size:14.5px} } @media (max-width:340px){ .hb-icn-wa{display:none} /* WhatsApp also reachable in the drawer */ .hb-brand-name{font-size:13.5px} .hb-icnbtn,.hb-burger{width:36px;height:36px} } @media (max-width:330px){.hb-brand-tag,.hb-icn-call{display:none}.hb-brand-name{font-size:12.5px}} /* ══ buttons.css ══ */ /* ============================================================ HBIMS-NAF&SA — CANONICAL BUTTON SYSTEM Single source of truth. Loads AFTER header.css so it wins. Fixes two system faults: 1 · MOBILE VISIBILITY BUG header.css sets `.hb-btn{display:none}` for the HEADER's CTA cluster and only re-enables it at min-width:1024px. But every page-body CTA uses the same .hb-btn class, so 151 buttons across 35 pages were invisible below 1024px — phones and tablets. Fixed by scoping visibility to page content (main/footer/modals) and leaving the header's own hide-until-1024 behaviour intact. 2 · TWO NAMING CONVENTIONS index.html uses BEM double-dash (.hb-btn--gold); the other 71 pages use single-dash (.hb-btn-gold). Both are aliased here to one definition so the whole site renders identically. ============================================================ */ /* ---- 1 · visibility restored for page content ---- */ main .hb-btn, footer .hb-btn, .hb-ft .hb-btn, apply-modal .hb-btn, app-download-modal .hb-btn, .ab-cta-row .hb-btn, .hb-final__ctas .hb-btn, .cs-hero .hb-btn, .pg-hero .hb-btn, .up-hero .hb-btn, .cf-hero .hb-btn, .dg-hero .hb-btn{ display:inline-flex; align-items:center; justify-content:center; } /* ---- 2 · base plate ---- */ main .hb-btn, footer .hb-btn{ position:relative; gap:9px; min-height:46px; padding:0 21px; border:0; border-radius:12px; text-decoration:none; white-space:nowrap; font:700 13.6px/1 var(--hb-text,'Inter','Inter Fallback',system-ui,sans-serif); letter-spacing:.005em; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; } main .hb-btn:hover, footer .hb-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); } main .hb-btn:active, footer .hb-btn:active{ transform:translateY(1px); } main .hb-btn:focus-visible, footer .hb-btn:focus-visible{ outline:3px solid var(--hb-gold,#E2B15D); outline-offset:3px; } main .hb-btn[disabled]{ opacity:.45; pointer-events:none; transform:none; } /* ---- 3 · variants — both naming conventions aliased ---- */ /* PRIMARY — burgundy. The only approved primary CTA colour. */ .hb-btn-primary, .hb-btn--primary, .btn-red{ color:#FCF7EA; background:linear-gradient(180deg,#8C3B32 0%,#7B2D26 58%,#5A1F1A 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.3), 0 10px 20px -10px rgba(90,31,26,.68); } .hb-btn-primary:hover, .hb-btn--primary:hover{ color:#FCF7EA; } /* SECONDARY — gold. Never the primary action (fails contrast on bronze). */ .hb-btn-gold, .hb-btn--gold, .btn-gold{ color:#3F2F10; background:linear-gradient(180deg,#F0CE83 0%,#E2B15D 55%,#C89440 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.17), 0 10px 18px -10px rgba(143,106,46,.6); text-shadow:0 1px 0 rgba(255,255,255,.45); } .hb-btn-gold:hover, .hb-btn--gold:hover{ color:#3F2F10; } /* APP — bronze */ .hb-btn-bronze, .hb-btn--bronze, .pg-app{ color:#FCF7EA; background:linear-gradient(180deg,#8A6A38 0%,#6E5327 58%,#4A3714 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.3), 0 10px 18px -10px rgba(74,55,20,.62); } .hb-btn-bronze:hover, .hb-btn--bronze:hover, .pg-app:hover{ color:#FCF7EA; } /* STUDENT DESK — green */ .hb-btn-green, .hb-btn--green, .cs-desk{ color:#fff; background:linear-gradient(180deg,#35815B 0%,#2C6A47 55%,#224F38 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.28), 0 10px 18px -9px rgba(44,106,71,.58); } .hb-btn-green:hover, .hb-btn--green:hover, .cs-desk:hover{ color:#fff; } /* GHOST on dark grounds */ .hb-btn-ghost, .hb-btn--ghost, .pg-ghost, .hb-btn--outline-inverse{ color:#F3D58C; background:rgba(252,247,234,.08); box-shadow:inset 0 0 0 1.5px rgba(226,177,93,.45); } .hb-btn-ghost:hover, .hb-btn--ghost:hover, .pg-ghost:hover{ color:#F3D58C; box-shadow:inset 0 0 0 1.5px var(--hb-gold,#E2B15D); } /* OUTLINE on light grounds */ .hb-btn-outline, .hb-btn--outline, .hb-btn--tertiary{ color:#7B2D26; background:linear-gradient(180deg,#FFFDF6,#F6EEDB); box-shadow:inset 0 0 0 1.5px rgba(123,45,38,.32), 0 8px 16px -10px rgba(29,22,28,.32); } .hb-btn-outline:hover, .hb-btn--outline:hover{ color:#7B2D26; } /* ---- 4 · sizes ---- */ main .hb-btn-sm, main .hb-btn--sm{ min-height:40px; padding:0 16px; font-size:12.4px; } main .hb-btn-lg, main .hb-btn--lg{ min-height:56px; padding:0 30px; font-size:15px; } main .hb-btn-block, main .hb-btn--block{ width:100%; } /* ---- 5 · the coin ornament that carries each button's symbol ---- */ main .hb-btn .hb-coin, footer .hb-btn .hb-coin{ display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:linear-gradient(180deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.32) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 2px rgba(0,0,0,.34); } main .hb-btn .hb-coin img, main .hb-btn .hb-coin svg, footer .hb-btn .hb-coin img{ width:15px; height:15px; } /* ---- 6 · responsive: CTA rows stack cleanly, buttons stay tappable ---- */ .ab-cta-row{ display:flex; flex-wrap:wrap; gap:12px; } @media (max-width:640px){ .ab-cta-row{ flex-direction:column; align-items:stretch; } .ab-cta-row .hb-btn{ width:100%; min-height:50px; } /* 50px ≥ 44px tap target */ main .hb-btn{ white-space:normal; text-align:center; line-height:1.25; padding:12px 18px; } } /* ---- 7 · table header symbols ---- */ .cs-table thead th .hb-th-ic, .lg-table thead th .hb-th-ic, .ac-table thead th .hb-th-ic{ width:18px; height:18px; flex:none; margin-right:8px; vertical-align:-3px; opacity:.92; } .cs-table thead th:has(.hb-th-ic){ white-space:nowrap; } @media (max-width:560px){ .cs-table thead th .hb-th-ic{ width:15px; height:15px; margin-right:6px; } } /* ============================================================ FIX A · HEADER CTA CLUSTER MUST STAY COMPACT ON MOBILE index.html declares a global `.hb-btn{display:inline-flex}` inline, which overrides header.css's mobile hide. Result: the header's full CTA pills ("Get the App" etc.) rendered on phones and overflowed the viewport — visible on the homepage only. These selectors are more specific than a bare `.hb-btn`, so they win regardless of source order, on every page including index. ============================================================ */ .hb-header .hb-act .hb-btn, #hb-header .hb-act .hb-btn{ display:none !important; } @media (min-width:1024px){ .hb-header .hb-act .hb-btn, #hb-header .hb-act .hb-btn{ display:inline-flex !important; } } /* the compact icon buttons (call / WhatsApp / burger) always show */ .hb-header .hb-icnbtn, .hb-header .hb-burger{ display:grid; } /* ============================================================ FIX B · GHOST BUTTON CONTRAST .pg-ghost was defined gold-on-translucent for DARK grounds, but it is also used inside light cards (.pg-gpcta) where gold on cream fails contrast badly. Default is now a light-ground-safe burgundy outline; the gold treatment applies only on dark grounds. ============================================================ */ .pg-ghost, .hb-btn-ghost, .hb-btn--ghost{ color:#7B2D26; background:linear-gradient(180deg,#FFFDF6,#F6EEDB); box-shadow:inset 0 0 0 1.5px rgba(123,45,38,.34), 0 8px 16px -10px rgba(29,22,28,.3); } .pg-ghost:hover, .hb-btn-ghost:hover, .hb-btn--ghost:hover{ color:#7B2D26; box-shadow:inset 0 0 0 2px rgba(123,45,38,.55); } .ab--dark .pg-ghost, .pg-hero .pg-ghost, .cs-hero .pg-ghost, .up-hero .pg-ghost, .cf-hero .pg-ghost, .dg-hero .pg-ghost, .ab--dark .hb-btn-ghost, .ab--dark .hb-btn--ghost{ color:#F3D58C; background:rgba(252,247,234,.08); box-shadow:inset 0 0 0 1.5px rgba(226,177,93,.45); } /* the coin on a ghost button needs a light-ground treatment too */ .pg-ghost .hb-coin{ background:linear-gradient(180deg,rgba(123,45,38,.1),rgba(123,45,38,.2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } .ab--dark .pg-ghost .hb-coin, .pg-hero .pg-ghost .hb-coin{ background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.32)); box-shadow:inset 0 1px 0 rgba(255,255,255,.26); } /* ============================================================ FIX C · MOBILE CONTENT OPTIMISATION Tighter type, tighter gutters, no horizontal overflow. ============================================================ */ @media (max-width:640px){ .ab-wrap, .hb-sitemap__in{ width:min(100%,92vw); } main p, .cs-body p, .up-prose p{ font-size:14.8px; line-height:1.72; } .ab-title{ font-size:clamp(21px,5.6vw,27px); line-height:1.2; } .ab-sec{ padding-block:clamp(30px,7vw,44px); } .ab-checks li{ font-size:13.6px; line-height:1.6; } .cs-table, .lg-table{ min-width:0; font-size:13px; } .cs-table th, .cs-table td{ padding:10px 12px; } .cs-tablewrap{ margin-inline:-4vw; padding-inline:4vw; } .cf-card, .up-card, .pg-card, .pg-hl{ padding:20px 18px; } main img, main figure, main table{ max-width:100%; } .ab-explore a, .cs-chip{ font-size:12.4px; } } @media (max-width:400px){ .ab-title{ font-size:20px; } main .hb-btn{ font-size:12.8px; padding:12px 14px; } main .hb-btn .hb-coin{ width:22px; height:22px; } main .hb-btn .hb-coin img{ width:13px; height:13px; } } /* nothing may cause a sideways scroll */ html, body{ overflow-x:hidden; } /* ============================================================ ONE HERO LAW — every page uses the about-pattern light hero. The former dark-hero photographs live on as framed bands. ============================================================ */ .ab-hero-band{max-width:1080px;margin:26px auto 6px;border-radius:22px;overflow:hidden; border:1.5px solid #D9A64C; box-shadow:0 30px 58px -34px rgba(29,22,28,.45),inset 0 1px 0 rgba(255,255,255,.6)} .ab-hero-band img{display:block;width:100%;height:auto;aspect-ratio:5/2;object-fit:cover;object-position:50% 32%} @media (max-width:660px){.ab-hero-band img{aspect-ratio:16/10}} /* legacy hero inner classes neutralised on the light ground */ .ab-hero .cs-deck,.ab-hero .pg-deck,.ab-hero .up-exc,.ab-hero .dg-deck,.ab-hero .cf-sub{ color:var(--hb-body,#4A3A2A)} .ab-hero .up-meta{justify-content:center} .ab-hero .up-meta li{background:#F6EEDB;border:1px solid rgba(110,83,39,.3);color:#4A3A2A} .ab-hero .dg-jump a{background:#FFFDF6;border:1.5px solid rgba(176,133,66,.55);color:#6E5327} .ab-hero .dg-jump a:hover{background:#F6EEDB;border-color:#B08542} .ab-hero .cf-promise{background:linear-gradient(180deg,#FFFDF6,#F6EEDB); border:1.5px solid rgba(226,177,93,.55);backdrop-filter:none;-webkit-backdrop-filter:none} .ab-hero .cf-promise p{color:var(--hb-ink,#1D161C)} .ab-hero .cf-promise .k{color:#6E5327} .ab-hero .ab-cta-row{justify-content:center;margin-top:22px} /* ============================================================ ONE TABLE SKIN — homepage (hb-etable) colours on every table. Wrap-scoped selectors so they outrank the per-family stylesheets regardless of load order. ============================================================ */ .cs-tablewrap,.lg-tablewrap,.ac-tablewrap{border-radius:18px;overflow:auto; background:#FFFDF6; box-shadow:0 18px 38px -26px rgba(29,22,28,.35),inset 0 0 0 1px rgba(110,83,39,.28)} .cs-tablewrap .cs-table,.lg-tablewrap .lg-table,.ac-tablewrap .ac-table{ width:100%;border-collapse:collapse;min-width:520px;background:transparent} .cs-tablewrap .cs-table thead th,.lg-tablewrap .lg-table thead th,.ac-tablewrap .ac-table thead th{ font:700 11px/1.35 var(--hb-text,'Inter');letter-spacing:.1em;text-transform:uppercase; color:#6B5B4A;background:#F6EEDB; padding:10px 18px;text-align:left;border-bottom:1px solid rgba(110,83,39,.22)} .cs-tablewrap .cs-table td,.cs-tablewrap .cs-table tbody th, .lg-tablewrap .lg-table td,.lg-tablewrap .lg-table tbody th, .ac-tablewrap .ac-table td,.ac-tablewrap .ac-table tbody th{ padding:11px 18px;text-align:left;font-size:13.6px;line-height:1.5; background:transparent; border-bottom:1px solid rgba(110,83,39,.14)} .cs-tablewrap .cs-table tbody th,.lg-tablewrap .lg-table tbody th,.ac-tablewrap .ac-table tbody th{ font-weight:700;color:var(--hb-ink,#1D161C)} .cs-tablewrap .cs-table td,.lg-tablewrap .lg-table td,.ac-tablewrap .ac-table td{ font-family:var(--hb-font-mono,'JetBrains Mono',ui-monospace,monospace); font-weight:500;font-size:12.8px;color:#7B2D26} .cs-tablewrap .cs-table tbody tr:nth-child(odd) td, .cs-tablewrap .cs-table tbody tr:nth-child(odd) th, .lg-tablewrap .lg-table tbody tr:nth-child(odd) td, .lg-tablewrap .lg-table tbody tr:nth-child(odd) th{background:transparent} .cs-tablewrap .cs-table tbody tr:last-child th,.cs-tablewrap .cs-table tbody tr:last-child td, .lg-tablewrap .lg-table tbody tr:last-child th,.lg-tablewrap .lg-table tbody tr:last-child td, .ac-tablewrap .ac-table tbody tr:last-child th,.ac-tablewrap .ac-table tbody tr:last-child td{border-bottom:0} .cs-tablewrap .cs-table tbody tr:hover th,.cs-tablewrap .cs-table tbody tr:hover td, .lg-tablewrap .lg-table tbody tr:hover th,.lg-tablewrap .lg-table tbody tr:hover td, .ac-tablewrap .ac-table tbody tr:hover th,.ac-tablewrap .ac-table tbody tr:hover td{background:#F9F2E0} .cs-tablewrap .cs-table thead th .hb-th-ic{vertical-align:-3px} /* related-links rows must wrap — was forcing a 1527px line on campus */ .ab-explore{display:flex;flex-wrap:wrap;justify-content:center; column-gap:10px;row-gap:10px;white-space:normal} .ab-explore a{white-space:nowrap} /* zebra lives on the tr in some families — flatten it under the one skin */ .cs-tablewrap .cs-table tbody tr,.lg-tablewrap .lg-table tbody tr, .ac-tablewrap .ac-table tbody tr{background:transparent} /* ── FIX · variants hoisted out of index.html's inline