/* ============================================================= BFC POLISH LAYER — presentation-only refinement layer. Loaded last. Nothing is removed; existing design tokens, copy, imagery and structure are preserved and refined. ============================================================= */ :root{ --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.22,.61,.36,1); --gut:clamp(1.25rem,4vw,2.5rem); --lift-1:0 1px 2px rgba(0,0,0,.30),0 8px 24px -10px rgba(0,0,0,.55); --lift-2:0 2px 6px rgba(0,0,0,.34),0 22px 52px -18px rgba(0,0,0,.72); --hair:linear-gradient(90deg,transparent,rgba(201,168,76,.38),transparent); --glass:rgba(11,25,41,.55); } /* ---------- 1 · TYPE : kill justification + hyphen breaks ---------- */ .about-text,.why-text,.team-bio,.svc-desc,.services-desc,.proj-scope, .footer-brand-desc,.hero-sub,#about p,#contact p,#relocation p,.reveal p{ text-align:start !important; text-justify:auto !important; hyphens:manual !important; -webkit-hyphens:manual !important; text-align-last:auto !important; } p,li,dd,figcaption,blockquote,.faq-a{ hyphens:manual; -webkit-hyphens:manual; text-wrap:pretty; } .h2,.hero-h1,h3,h4,.svc-name,.proj-title,.counter-lbl{text-wrap:balance;} body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-feature-settings:"kern" 1,"liga" 1; } /* Comfortable measure (60-72 characters is the readability sweet spot) */ .about-text,.why-text,.services-desc,#about p,#contact p,#relocation p{max-width:68ch;} .hero-sub{max-width:60ch;} .svc-desc,.proj-scope,.team-bio,.footer-brand-desc{max-width:60ch;} p{line-height:1.72;} .hero-h1{letter-spacing:.028em;} /* Micro-label floor: these sat at 9.9-10.9px, below comfortable reading */ .stat-lbl,.scroll-indicator span,.info-card-label,.proj-date,.fv-lbl, .client-sector,.cred-title,.team-skill,.c-label,.form-label,.ft-col-title, .saas-stat span,.hp-tour-tag,.skill-tag,.brn-pill{ font-size:.72rem !important; } /* Counters must not jitter while animating */ .counter-num,.stat-num,.saas-stat b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;} ::selection{background:var(--gold);color:var(--navy);} ::-moz-selection{background:var(--gold);color:var(--navy);} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-thumb{ background:rgba(201,168,76,.45); border-radius:99px; border:3px solid var(--navy); } ::-webkit-scrollbar-thumb:hover{background:rgba(201,168,76,.7);} html{scrollbar-color:rgba(201,168,76,.45) var(--navy);scrollbar-width:thin;} /* ---------- 2 · ONE LAYOUT SPINE ---------- */ .container{ max-width:1280px; padding-left:var(--gut); padding-right:var(--gut); } /* the team block used a 1400px break-out that made the page edge jump */ .team-intro,.team-grid{ width:auto !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; } /* width/height attributes are present on images for layout stability; height:auto keeps their real proportions so nothing is ever stretched. Any image the site gives an explicit CSS height (cropped cards etc.) wins on specificity and is untouched. */ img{max-width:100%;height:auto;} img,svg,video{vertical-align:middle;} /* ---------- 3 · NAVIGATION : glass instead of nothing ---------- */ #nav{ background:linear-gradient(to bottom,rgba(11,25,41,.72) 0%,rgba(11,25,41,.34) 55%,rgba(11,25,41,0) 100%); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); transition:background var(--d-fast) var(--e-out),padding var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out),border-color var(--d-fast); } #nav.scrolled{ background:rgba(11,25,41,.86) !important; -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); box-shadow:0 1px 0 rgba(201,168,76,.16),0 12px 34px -20px rgba(0,0,0,.9); } .nav-links a.is-active{color:var(--white);} .nav-links a.is-active::after{width:100%;} .nav-links a::after{height:2px;bottom:-5px;transition:width var(--d-fast) var(--e-out);} /* Reading-progress bar */ #bfc-progress{ position:fixed;top:0;left:0;height:2px;width:100%; transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--gold-dim),var(--gold),var(--gold-light)); z-index:1200;pointer-events:none; transition:transform .12s linear,opacity var(--d-fast); } /* Skip link — keyboard users land on content, not the whole nav */ .bfc-skip{ position:fixed;top:.5rem;left:.5rem;z-index:2000; transform:translateY(-160%); background:var(--gold);color:var(--navy); font-family:'Barlow Condensed',sans-serif;font-weight:700; letter-spacing:.14em;text-transform:uppercase;font-size:.78rem; padding:.7rem 1.1rem;text-decoration:none;border-radius:3px; transition:transform var(--d-fast) var(--e-out); } .bfc-skip:focus{transform:translateY(0);} /* ---------- 4 · ACCESSIBILITY : visible focus + real tap targets ---------- */ a:focus-visible,button:focus-visible,summary:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; } a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none;} input:focus-visible,textarea:focus-visible,select:focus-visible{ outline-offset:1px; box-shadow:0 0 0 4px rgba(201,168,76,.16); } .nav-links a{min-height:44px;display:inline-flex;align-items:center;} .ft-links a{padding:.2rem 0;} /* 44px touch targets only where the pointer is actually a finger, so the desktop footer keeps its tight rhythm */ @media (pointer:coarse){ .ft-links a,.footer-legal a,.social-link,.c-value a{ min-height:44px;display:flex;align-items:center; } .social-link,.footer-social a{min-width:44px;justify-content:center;} } .svc-tab,.pslider-btn,.kh-dot,.pslider-dots span{touch-action:manipulation;} .kh-dot,.pslider-dots>*{position:relative;} .kh-dot::after,.pslider-dots>*::after{ content:'';position:absolute;inset:-14px; } .kh-dot::after,.pslider-dots>*::after{inset:-5px;} /* ---------- 5 · SURFACES : consistent, quieter, deeper ---------- */ .svc-card,.proj-card,.team-card,.client-card,.counter-card,.info-card, .cred-card,.live-news-card,.saas-card,.faq-item{ box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out),background var(--d-fast) var(--e-out); } .proj-card:hover,.team-card:hover,.cred-card:hover,.saas-card:hover{ transform:translateY(-6px); box-shadow:var(--lift-2),inset 0 1px 0 rgba(255,255,255,.07); border-color:rgba(201,168,76,.4); } .svc-card:hover,.client-card:hover{ box-shadow:var(--lift-1),inset 0 1px 0 rgba(255,255,255,.07); } /* image crops: slower, silkier zoom + richer scrim */ .svc-ai-img,.proj-card-img-bg,.team-avatar img{ transition:transform var(--d-slow) var(--e-out),filter var(--d-med) var(--e-out) !important; } .svc-card:hover .svc-ai-img{transform:scale(1.06) !important;} .svc-img-wrap::after{ background:linear-gradient(to top,rgba(11,25,41,.92) 0%,rgba(11,25,41,.35) 45%,rgba(11,25,41,0) 100%) !important; } .proj-card-img{position:relative;} .proj-card-img::after{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(11,25,41,.75),rgba(11,25,41,0) 65%); } img[data-bfc-fade]{opacity:0;transition:opacity var(--d-med) var(--e-out);} img[data-bfc-fade="in"]{opacity:1;} /* ---------- 6 · CONTROLS ---------- */ .btn-gold,.btn-out,.btn-whatsapp{ position:relative;overflow:hidden;border-radius:2px; transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out); } .btn-gold{box-shadow:0 6px 18px -10px rgba(201,168,76,.85);} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(201,168,76,.95);} .btn-out:hover{background:rgba(201,168,76,.1);transform:translateY(-2px);} .btn-gold:active,.btn-out:active,.btn-whatsapp:active{transform:translateY(0);} .btn-gold::before{ content:'';position:absolute;top:0;left:-40%;width:35%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg);opacity:0; } .btn-gold:hover::before{animation:bfcSheen var(--d-med) var(--e-out) forwards;} @keyframes bfcSheen{0%{left:-40%;opacity:.9}100%{left:120%;opacity:0}} /* ---------- 7 · GOLD TICKER : soft edges, pausable ---------- */ .ticker{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); } .ticker:hover .ticker-track{animation-play-state:paused;} .ticker-item::after{opacity:.4 !important;} /* ---------- 8 · FAQ ---------- */ .faq-item{transition:background var(--d-fast),border-color var(--d-fast);} .faq-q{cursor:pointer;transition:color var(--d-fast);} .faq-q::-webkit-details-marker{display:none;} .faq-item[open]{background:rgba(201,168,76,.045);} .faq-item[open] .faq-q{color:var(--gold);} .faq-a{animation:bfcFaq var(--d-fast) var(--e-out) both;} @keyframes bfcFaq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* ---------- 9 · WHATSAPP : 8.75:1 contrast instead of 1.98:1 ---------- */ .wa-float{animation:none !important;box-shadow:0 6px 24px -6px rgba(37,211,102,.5),0 2px 6px rgba(0,0,0,.35) !important;} .wa-float svg{fill:#08131f !important;} .wa-float:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 12px 34px -8px rgba(37,211,102,.75) !important;} .wa-float::before{ content:'';position:absolute;inset:0;border-radius:50%; border:1px solid rgba(37,211,102,.55); animation:bfcHalo 2.8s var(--e-out) infinite; } @keyframes bfcHalo{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.55);opacity:0}100%{opacity:0}} .proj-card-img::after{content:none !important;} /* ---------- 10 · MOTION : faster, subtler, and never a blank page ---------- */ /* Failsafe: if JS never runs, every .reveal block is still visible. */ html:not(.bfc-js) .reveal{opacity:1 !important;transform:none !important;} .reveal{ transform:translateY(18px); transition:opacity var(--d-med) var(--e-out),transform var(--d-med) var(--e-out) !important; } .reveal.visible{opacity:1 !important;transform:none !important;} .bfc-instant{opacity:1 !important;transform:none !important;transition:none !important;} /* Fixed header no longer covers the heading you jumped to */ section[id],div[id],h2[id],h3[id]{scroll-margin-top:104px;} /* ---------- 11 · LIVE NEWS : no more black rectangles ---------- */ .live-news-card img,.img-container img{ width:100%;height:100%;object-fit:cover; background:linear-gradient(135deg,#12233a,#1a3350); } .img-container,.live-news-card .img-container{background:#12233a;} img[data-bfc-broken]{display:none !important;} /* ---------- 12 · LAZY BACKDROPS ---------- */ [data-bfc-bg]{background-color:var(--navy);} /* ---------- 13 · ICONS : one stroked set instead of mixed emoji ---------- */ .bfc-ico{ display:inline-flex;align-items:center;justify-content:center; width:1em;height:1em;color:var(--gold);vertical-align:-.12em; } .bfc-ico svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} .svc-tab .bfc-ico{width:1.05em;height:1.05em;margin-right:.15em;} .proj-card-img .bfc-ico{color:rgba(255,255,255,.94);filter:drop-shadow(0 2px 12px rgba(0,0,0,.65));} /* ---------- 14 · REDUCED MOTION ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal{opacity:1 !important;transform:none !important;} .ticker-track,#rss-ticker-track{animation:none !important;} .wa-float::before{display:none;} } /* ---------- 15 · PRINT ---------- */ @media print{ #nav,.wa-float,#bfc-progress,.ticker,.scroll-indicator,.bfc-skip{display:none !important;} body{background:#fff !important;color:#111 !important;} .reveal{opacity:1 !important;transform:none !important;} } /* ---------- 16 · ONE DISPLAY VOICE ---------- Three headings had escaped the type system and were rendering in 'Segoe UI' / plain Barlow while every other section heading used Bebas Neue. Same words, same order — one voice. */ h2[style*="Segoe"], #faq h2, .faq-wrap h2, #live-news-section h2, #process h2{ font-family:'Bebas Neue','Barlow Condensed',sans-serif !important; font-size:clamp(2.4rem,5vw,3.8rem) !important; font-weight:400 !important; letter-spacing:.04em !important; line-height:1 !important; color:var(--white) !important; text-wrap:balance; } #faq h2 span,#live-news-section h2 span,h2[style*="Segoe"] span{color:var(--gold) !important;} /* the FAQ rule beneath the heading, tuned to the new cap height */ .faq-rule{background:var(--hair) !important;height:1px !important;} /* Two sections carried an inline 'Segoe UI' stack, so half the page was set in a system font and half in Barlow. One body face now. */ [style*="Segoe"]{font-family:'Barlow',sans-serif !important;} h2[style*="Segoe"]{font-family:'Bebas Neue','Barlow Condensed',sans-serif !important;} /* ============================================================ 17. CLIENT ROLLBACK - Meeting Room Booking System (#saas) This section is deliberately kept at its original pre-polish presentation at the client's request. ============================================================ */ #saas .container{max-width:1180px;padding:0 2rem} #saas p,#saas .saas-p,#saas .reveal p{text-align:left!important;text-justify:auto!important} #saas p,#saas li,#saas .saas-p,#saas .saas-list li{text-wrap:wrap!important} #saas h2,#saas h3,#saas h4,#saas .h2,#saas .saas-h3,#saas .counter-lbl{text-wrap:wrap!important} #saas .saas-stat b{font-variant-numeric:normal;font-feature-settings:normal} #saas .saas-stat span{font-size:.68rem!important} #saas .reveal{transform:translateY(28px);transition:opacity .7s ease,transform .7s ease!important} #saas .reveal.visible{transform:none!important} #saas img{vertical-align:baseline} #saas .btn-gold,#saas .btn-out,#saas .btn-whatsapp{overflow:visible;border-radius:0;box-shadow:none} #saas .btn-gold{transition:background .3s,transform .2s} #saas .btn-out{transition:.3s} #saas .btn-gold:hover{transform:translateY(-1px);box-shadow:none} #saas .btn-out:hover{background:var(--gold);color:var(--navy);transform:none} #saas .btn-gold:active,#saas .btn-out:active,#saas .btn-whatsapp:active{transform:none} #saas .btn-gold::before,#saas .btn-out::before{content:none!important;display:none!important} /* ============================================================ 18. CINEMATIC SYSTEM (inspired by Hubtown, Awwwards SOTD) Chapter rail / utility bar / bevels / hero motion / intro. Additive only. Nothing above this line is modified. ============================================================ */ :root{ --bev:10px; --hub-cool:#c9d6e4; --hub-line:rgba(201,168,76,.20); --hub-deep:#060f1b; } /* 18.1 --- micro-label typography ------------------------------------ */ .hub-mono{font-family:Barlow,system-ui,-apple-system,sans-serif;text-transform:uppercase;letter-spacing:.18em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} #hero .hero-eyebrow,.counter-lbl,.scroll-indicator,.sec-eyebrow,.eyebrow{letter-spacing:.18em;font-variant-numeric:tabular-nums} .counter b,.counter-num,.stat b{font-variant-numeric:tabular-nums} /* 18.2 --- bevelled geometry ----------------------------------------- */ .hub-bev,body .btn-gold,body .btn-out,body .nav-cta{ clip-path:polygon(var(--bev) 0,100% 0,100% calc(100% - var(--bev)),calc(100% - var(--bev)) 100%,0 100%,0 var(--bev)); } #saas .btn-gold,#saas .btn-out{clip-path:none!important} /* 18.3 --- chapter rail ---------------------------------------------- */ #hub-rail{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:900;display:none;flex-direction:column;gap:15px;margin:0;padding:0;list-style:none} @media(min-width:1500px){#hub-rail{display:flex}} #hub-rail a{display:flex;align-items:center;gap:11px;font:400 11px/1 Barlow,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.24em;color:rgba(201,214,228,.34);text-decoration:none;transition:color var(--d-fast) var(--e-out)} #hub-rail a i{width:6px;height:6px;display:block;background:currentColor;transform:rotate(45deg);opacity:.55;transition:var(--d-fast) var(--e-out)} #hub-rail a span{transform:translateX(-4px);opacity:.0001;transition:var(--d-fast) var(--e-out)} #hub-rail:hover a span{transform:none;opacity:1} #hub-rail a:hover{color:rgba(226,192,106,.9)} #hub-rail a.on{color:#e2c06a} #hub-rail a.on span{transform:none;opacity:1} #hub-rail a.on i{background:#c9a84c;opacity:1;box-shadow:0 0 0 4px rgba(201,168,76,.16)} /* 18.4 --- bottom utility bar ---------------------------------------- */ #hub-bar{position:fixed;left:0;right:0;bottom:0;z-index:940;display:none;align-items:center;justify-content:space-between;height:44px;padding:0 20px;background:rgba(6,15,27,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--hub-line);font:400 11px/1 Barlow,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.18em;color:var(--hub-cool)} @media(min-width:1024px){#hub-bar{display:flex}} #hub-bar .hub-bar-l,#hub-bar .hub-bar-r{display:flex;align-items:center;gap:22px} #hub-bar a,#hub-bar span{color:inherit;text-decoration:none;display:flex;align-items:center;gap:8px;transition:color var(--d-fast)} #hub-bar a:hover{color:#e2c06a} #hub-bar .hub-dot{width:6px;height:6px;background:#5fbf7d;border-radius:50%;box-shadow:0 0 0 3px rgba(95,191,125,.18)} #hub-bar .hub-sep{opacity:.28} #hub-bar .hub-cta{padding:7px 14px;background:#c9a84c;color:#0b1929;font-weight:600;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)} #hub-bar .hub-cta:hover{background:#e2c06a;color:#0b1929} @media(min-width:1024px){ body.hub-bar-on{padding-bottom:44px} body.hub-bar-on .wa-float{bottom:60px} body.hub-bar-on #bfc-progress{bottom:44px} } /* 18.5 --- hero cinematic layers ------------------------------------- */ #hero .container{position:relative;z-index:5} #hero-fx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden} #hero-fx canvas{position:absolute;inset:0;width:100%;height:100%;display:block} #hero-ray{position:absolute;inset:-25% -12%;z-index:2;pointer-events:none;mix-blend-mode:screen; background:radial-gradient(58% 42% at 18% 8%,rgba(201,168,76,.17),transparent 62%),radial-gradient(48% 38% at 88% 22%,rgba(122,170,255,.11),transparent 62%); animation:hubRay 22s var(--e-inout) infinite alternate} @keyframes hubRay{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.14)}} .hero-bg-slide{will-change:transform;animation:hubKB 30s var(--e-inout) infinite alternate} @keyframes hubKB{from{transform:scale(1.03)}to{transform:scale(1.11) translate3d(-1.4%,-1.1%,0)}} /* 18.6 --- headline line reveal -------------------------------------- */ #hero h1 .hub-ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em} #hero h1 .hub-ln>i{display:block;font-style:inherit;transform:translateY(108%);opacity:0; transition:transform var(--d-slow) var(--e-out),opacity var(--d-slow) var(--e-out)} #hero h1.hub-in .hub-ln>i{transform:none;opacity:1} #hero .hub-fade{opacity:0;transform:translateY(14px);transition:opacity var(--d-slow) var(--e-out),transform var(--d-slow) var(--e-out)} #hero .hub-fade.hub-in{opacity:1;transform:none} /* 18.7 --- intro sequence -------------------------------------------- */ #hub-intro{position:fixed;inset:0;z-index:9998;background:var(--hub-deep);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px; transition:opacity var(--d-med) var(--e-out),visibility var(--d-med);animation:hubFailSafe 2.4s forwards} #hub-intro.out,html.hub-done #hub-intro{opacity:0!important;visibility:hidden!important;pointer-events:none!important} @keyframes hubFailSafe{0%,92%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}} #hub-intro .hub-mark{font:700 13px/1 Barlow,sans-serif;letter-spacing:.34em;text-transform:uppercase;color:#c9d6e4} #hub-intro .hub-mark b{color:#c9a84c;font-weight:700} #hub-intro .hub-track{width:200px;height:1px;background:rgba(201,168,76,.18);position:relative;overflow:hidden} #hub-intro .hub-track i{position:absolute;left:0;top:0;height:100%;width:0;background:#c9a84c;transition:width .18s linear} #hub-intro .hub-pct{font:400 10px/1 Barlow,sans-serif;letter-spacing:.26em;color:rgba(201,214,228,.55);font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){ #hero-ray,.hero-bg-slide{animation:none!important} #hero h1 .hub-ln>i{transform:none!important;opacity:1!important;transition:none!important} #hero .hub-fade{opacity:1!important;transform:none!important} #hub-intro{display:none!important} } /* 18.8 --- mobile: no ambient light animation ----------------------- */ @media(max-width:699px){ #hero-ray{animation:none!important;opacity:.5} } /* ============================================================ 19. CINEMATIC v2 — frame / inertia / ambience / reveals ============================================================ */ :root{ --fr:12px; } /* 19.1 inset viewport frame ------------------------------------------ */ @media(min-width:1100px){ #bfc-vframe{position:fixed;inset:0;z-index:9985;pointer-events:none; box-shadow:inset 0 0 0 var(--fr) #060f1b, inset 0 0 0 calc(var(--fr) + 1px) rgba(201,168,76,.14)} #bfc-vframe::after{content:"";position:absolute;inset:var(--fr);pointer-events:none; clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px); box-shadow:inset 0 0 0 1px rgba(201,168,76,.16)} #bfc-vframe i{position:absolute;background:#060f1b;pointer-events:none} #bfc-vframe i.tl{top:var(--fr);left:var(--fr);width:23px;height:23px;clip-path:polygon(0 0,100% 0,0 100%)} #bfc-vframe i.br{bottom:var(--fr);right:var(--fr);width:23px;height:23px;clip-path:polygon(100% 0,100% 100%,0 100%)} html.bfc-fr #nav{left:var(--fr);right:var(--fr);top:var(--fr);width:auto} html.bfc-fr #hub-bar{left:var(--fr);right:var(--fr);bottom:var(--fr)} html.bfc-fr #hub-rail{left:calc(var(--fr) + 16px)} html.bfc-fr .wa-float{right:calc(var(--fr) + 20px)} html.bfc-fr body.hub-bar-on{padding-bottom:calc(44px + var(--fr))} html.bfc-fr #bfc-progress{left:var(--fr);right:var(--fr)} } /* 19.2 ambient field -------------------------------------------------- */ #bfc-amb{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9} #bfc-amb canvas{width:100%;height:100%;display:block} /* 19.3 custom cursor -------------------------------------------------- */ @media(hover:hover) and (pointer:fine) and (min-width:1100px){ html.bfc-cur,html.bfc-cur *{cursor:none!important} #bfc-cd,#bfc-cr{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;border-radius:50%; transform:translate3d(-50%,-50%,0);will-change:transform} #bfc-cd{width:5px;height:5px;background:#e2c06a} #bfc-cr{width:32px;height:32px;border:1px solid rgba(201,168,76,.55); transition:width var(--d-fast) var(--e-out),height var(--d-fast) var(--e-out),background var(--d-fast),border-color var(--d-fast),opacity var(--d-fast)} html.cur-hot #bfc-cr{width:58px;height:58px;background:rgba(201,168,76,.10);border-color:rgba(226,192,106,.85)} html.cur-hot #bfc-cd{opacity:0} html.cur-hide #bfc-cd,html.cur-hide #bfc-cr{opacity:0} } /* 19.4 masked word reveals (custom elements so site rules cannot hit) - */ bfc-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.09em;margin-bottom:-.09em} bfc-w>bfc-i{display:inline-block;transform:translateY(110%);opacity:0; transition:transform var(--d-slow) var(--e-out),opacity var(--d-med) var(--e-out)} .bfc-on bfc-w>bfc-i{transform:none;opacity:1} bfc-w,bfc-i{color:inherit;font:inherit;letter-spacing:inherit} /* 19.5 image wipe reveals -------------------------------------------- */ .bfc-iv{clip-path:inset(0 0 100% 0);transform:scale(1.1); transition:clip-path var(--d-slow) var(--e-out),transform 1.6s var(--e-out)} .bfc-iv.bfc-on{clip-path:inset(0 0 0 0);transform:scale(1)} /* 19.6 magnetic ------------------------------------------------------- */ .bfc-mag{will-change:transform;transition:transform var(--d-fast) var(--e-out)} /* 19.7 display typography + rhythm ----------------------------------- */ @media(min-width:1100px){ main section:not(#saas):not(#hero) h2, main section:not(#saas):not(#hero) .h2{ font-size:clamp(52px,4.6vw,78px)!important;line-height:.94!important;letter-spacing:-.012em} main section:not(#saas):not(#hero):not(#counters){padding-top:clamp(84px,6.8vw,140px);padding-bottom:clamp(84px,6.8vw,140px)} } /* 19.8 inertia scroll ------------------------------------------------- */ html.bfc-lenis{scroll-behavior:auto!important} @media (prefers-reduced-motion:reduce){ bfc-w>bfc-i{transform:none!important;opacity:1!important;transition:none!important} .bfc-iv{clip-path:none!important;transform:none!important} #bfc-amb{display:none!important} } /* ============================================================ 20. CINEMATIC v3 — ambience tuning / safe cursor / full-screen menu / page transition ============================================================ */ /* 20.1 ambient field now reads as light OVER the page --------------- */ #bfc-amb{z-index:300;mix-blend-mode:screen;opacity:1} #bfc-amb canvas{filter:blur(4px) brightness(2);transform:scale(1.04)} /* 20.2 menu trigger --------------------------------------------------- */ #bfc-menu-btn{display:none;align-items:center;gap:9px;margin-left:16px;padding:11px 16px; background:transparent;border:1px solid rgba(201,168,76,.42);color:#e2c06a;cursor:pointer; font:600 11px/1 Barlow,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.2em; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); transition:background var(--d-fast),color var(--d-fast),border-color var(--d-fast)} @media(min-width:1100px){#bfc-menu-btn{display:inline-flex}} #bfc-menu-btn:hover{background:#c9a84c;border-color:#c9a84c;color:#0b1929} #bfc-menu-btn u{display:grid;grid-template-columns:4px 4px;gap:3px;text-decoration:none} #bfc-menu-btn u b{width:4px;height:4px;background:currentColor;display:block} /* 20.3 full-screen menu ----------------------------------------------- */ #bfc-menu{position:fixed;inset:12px;z-index:9995;background:#060f1b; clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px); box-shadow:inset 0 0 0 1px rgba(201,168,76,.18); display:grid;grid-template-rows:auto 1fr;padding:26px 48px 40px; opacity:0;visibility:hidden;transform:translateY(-14px); transition:opacity var(--d-med) var(--e-out),transform var(--d-med) var(--e-out),visibility var(--d-med)} html.menu-open #bfc-menu{opacity:1;visibility:visible;transform:none} html.menu-open{overflow:hidden} #bfc-menu .mn-top{display:flex;align-items:center;justify-content:space-between; padding-bottom:22px;border-bottom:1px solid rgba(201,168,76,.14)} #bfc-menu .mn-brand{font:700 12px/1 Barlow,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#c9d6e4} #bfc-menu .mn-brand b{color:#c9a84c} #bfc-menu .mn-close{background:none;border:1px solid rgba(201,168,76,.4);color:#e2c06a;cursor:pointer; padding:11px 16px;font:600 11px/1 Barlow,sans-serif;letter-spacing:.2em;text-transform:uppercase; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);transition:var(--d-fast)} #bfc-menu .mn-close:hover{background:#c9a84c;color:#0b1929;border-color:#c9a84c} #bfc-menu .mn-body{display:grid;grid-template-columns:1.55fr .95fr;gap:60px;align-content:center;padding-top:26px} #bfc-menu .mn-list{list-style:none;margin:0;padding:0} #bfc-menu .mn-list li{overflow:hidden} #bfc-menu .mn-list a{display:flex;align-items:baseline;gap:16px;text-decoration:none;color:#e8eef7; font-family:"Bebas Neue",Barlow,sans-serif;font-size:clamp(34px,4.1vw,62px);line-height:1.08; letter-spacing:.005em;transform:translateY(105%);opacity:0;transition:transform var(--d-med) var(--e-out),opacity var(--d-med),color var(--d-fast)} html.menu-open #bfc-menu .mn-list a{transform:none;opacity:1} #bfc-menu .mn-list a em{font:400 11px/1 Barlow,sans-serif;font-style:normal;letter-spacing:.22em; color:rgba(201,214,228,.34);transform:translateY(-.7em);display:inline-block} #bfc-menu .mn-list a:hover{color:#e2c06a} #bfc-menu .mn-side{border-left:1px solid rgba(201,168,76,.14);padding-left:44px; font:400 13px/1.85 Barlow,sans-serif;color:#9fb2c6; opacity:0;transform:translateY(16px);transition:opacity var(--d-med) var(--d-fast),transform var(--d-med) var(--d-fast) var(--e-out)} html.menu-open #bfc-menu .mn-side{opacity:1;transform:none} #bfc-menu .mn-side h4{font:400 10px/1 Barlow,sans-serif;letter-spacing:.24em;text-transform:uppercase; color:#c9a84c;margin:0 0 12px} #bfc-menu .mn-side p{margin:0 0 26px} #bfc-menu .mn-side a{color:#c9d6e4;text-decoration:none;border-bottom:1px solid rgba(201,168,76,.28)} #bfc-menu .mn-side a:hover{color:#e2c06a} /* 20.4 page transition ------------------------------------------------ */ #bfc-trans{position:fixed;inset:0;z-index:9997;background:#060f1b;pointer-events:none; transform:translateY(101%);transition:transform var(--d-med) var(--e-inout)} #bfc-trans.up{transform:translateY(0)} #bfc-trans.down{transform:translateY(-101%);transition:transform var(--d-med) var(--e-inout)} @media (prefers-reduced-motion:reduce){ #bfc-menu,#bfc-menu .mn-list a,#bfc-menu .mn-side{transition:none!important} #bfc-trans{display:none!important} } /* 20.5 arrival reveal — failsafe: ends OFF-SCREEN with fill-forwards, so a stalled rAF/JS can never leave the page covered */ @keyframes bfcTransArrive{from{transform:translateY(0)}to{transform:translateY(-101%)}} #bfc-trans.arrive{animation:bfcTransArrive var(--d-med) var(--e-inout) forwards} #bfc-trans.up{animation:none} /* ===================================================================== BFC POLISH — APPEND BLOCK v2 Paste at the END of /bfc-polish.css. Everything here excludes #saas, respects prefers-reduced-motion, and fails silently (pure CSS, no dependencies). ===================================================================== */ /* ---------- 1. MOTION TOKENS ------------------------------------------ THE single highest-impact change. Retrofit these onto your EXISTING reveals, wipes, magnetic buttons and menu: same curve, long durations, real staggers. Award-site motion = one easing family, everywhere. */ :root{ --e-out: cubic-bezier(.16, 1, .3, 1); /* expo-out — reveals, entrances */ --e-inout: cubic-bezier(.65, 0, .35, 1); /* wipes, the menu, transitions */ --d-slow: 1.15s; /* heading word reveals, image wipes */ --d-med: .8s; /* cards, list items */ --d-fast: .4s; /* hovers only */ --stagger: 70ms; /* per-item delay step */ } /* Retrofit template — duplicate per existing polish selector, e.g.: .your-reveal-class { transition-duration:var(--d-slow); transition-timing-function:var(--e-out); } bfc-w { transition:transform var(--d-slow) var(--e-out), opacity var(--d-slow) var(--e-out); } */ a, button { transition-timing-function:var(--e-out); } /* ---------- 2. SECTION INDEX NUMBERS ---------------------------------- Hubtown's chaptering, without touching your HTML. #saas and #hero deliberately absent from both lists. */ body { counter-reset: bfcsec; } :is(#about,#services,#projects,#clients,#testimonials,#why,#team, #contact,#live-news-section,#process,#faq){ counter-increment: bfcsec; } :is(#about,#services,#projects,#clients,#testimonials,#why,#team, #contact,#live-news-section,#process,#faq) h2::before{ content: counter(bfcsec, decimal-leading-zero); display:block; font-family: Barlow, sans-serif; font-size:12px; font-weight:600; line-height:1; letter-spacing:.3em; color: var(--gold, #C9A84C); opacity:.65; margin:0 0 16px; } /* Reusable micro-label (matches Hubtown's 12px tracked caps). Apply to your existing eyebrow texts ("What We Do", "Our Work"…) by adding the class, or map their selectors to this rule. */ .bfc-micro{ font:500 12px/1 Barlow, sans-serif; text-transform:uppercase; letter-spacing:.24em; color:var(--muted, #8A9BB0); } /* ---------- 3. DEPTH: GRADIENT FIELD + GRAIN -------------------------- Kills the "flat navy" look. Two washes anchor the light where the ribbon bundle lives; grain is a 300-byte inline SVG, no request. */ body{ background-image: radial-gradient(120% 80% at 85% -10%, rgba(201,168,76,.055), transparent 55%), radial-gradient(90% 70% at -10% 110%, rgba(226,192,106,.04), transparent 60%); background-attachment: fixed; } html::after{ content:""; position:fixed; inset:0; z-index:299; pointer-events:none; opacity:.045; mix-blend-mode:overlay; transition:opacity var(--d-med) linear; background-image:url("data:image/svg+xml;utf8,"); } html.bfc-over-saas::after{ opacity:0; } /* JS toggles this over #saas */ /* ---------- 4. UNIFIED IMAGE GRADE ------------------------------------ One photographic world across mixed-source photos. Subtle by design; #saas untouched (not listed). */ :is(#projects,#services,#about,#clients) img{ filter:saturate(.82) contrast(1.05) brightness(.97); } /* ---------- 5. EMOJI → ENGINEERING CHIPS ------------------------------ is injected by the JS block. Fixed size, bevelled cut corner, gold-tinted monochrome. If the tint filter ever fails, the chip alone still normalises the emojis. Delete freely if the client objects. */ bfc-chip{ display:inline-grid; place-items:center; width:44px; height:44px; font-size:20px; line-height:1; background:rgba(201,168,76,.07); border:1px solid rgba(201,168,76,.28); clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); filter:grayscale(1) sepia(1) hue-rotate(-8deg) saturate(3) brightness(1.05); } /* ---------- 6. SCROLL-DRIVEN CHOREOGRAPHY (no JS per frame) ----------- Compositor-driven: immune to your rAF-suspension and clipped-rect observer bugs, cannot desync fixed layers, costs zero script time. Progressive enhancement via @supports (Chrome/Edge, Safari 26+). */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .bfc-drift{ /* class added by JS tagger */ animation:bfcDrift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } @keyframes bfcDrift{ from{ transform:translateY(12px); } to { transform:translateY(-12px); } } } } @supports (animation-timeline: scroll()){ .bfc-progress{ /* div injected by JS */ position:fixed; left:0; right:0; bottom:0; height:2px; z-index:1200; background:linear-gradient(90deg, var(--gold,#C9A84C), var(--gold-light,#E2C06A)); transform-origin:0 50%; transform:scaleX(0); animation:bfcProg linear both; animation-timeline:scroll(root); pointer-events:none; } @keyframes bfcProg{ to{ transform:scaleX(1); } } } /* ---------- 7. TRUST DETAILS ------------------------------------------ */ ::selection{ background:var(--gold,#C9A84C); color:var(--navy,#0B1929); } #saas ::selection{ background:revert; color:revert; } /* exclusion */ :focus-visible{ outline:2px solid var(--gold,#C9A84C); outline-offset:3px; } #saas :focus-visible{ outline:revert; outline-offset:revert; } /* ---------- 8. GLOBAL SAFETY ------------------------------------------ */ @media (prefers-reduced-motion: reduce){ .bfc-drift, .bfc-progress{ animation:none !important; } } /* ====== 20. PHASE 2b - STAGGER CHOREOGRAPHY (tokens only, saas excluded) ====== */ @media (prefers-reduced-motion:no-preference){ #services .svc-card.reveal,#projects .proj-card.reveal,#clients .client-card.reveal,#team .team-card.reveal,#counters .counter-card.reveal{transition-delay:0ms} #services .svc-card.reveal:nth-child(2),#projects .proj-card.reveal:nth-child(2),#clients .client-card.reveal:nth-child(2),#team .team-card.reveal:nth-child(2),#counters .counter-card.reveal:nth-child(2){transition-delay:calc(var(--stagger) * 1)} #services .svc-card.reveal:nth-child(3),#projects .proj-card.reveal:nth-child(3),#clients .client-card.reveal:nth-child(3),#team .team-card.reveal:nth-child(3),#counters .counter-card.reveal:nth-child(3){transition-delay:calc(var(--stagger) * 2)} #services .svc-card.reveal:nth-child(4),#projects .proj-card.reveal:nth-child(4),#clients .client-card.reveal:nth-child(4),#team .team-card.reveal:nth-child(4),#counters .counter-card.reveal:nth-child(4){transition-delay:calc(var(--stagger) * 3)} #services .svc-card.reveal:nth-child(5),#projects .proj-card.reveal:nth-child(5),#clients .client-card.reveal:nth-child(5),#team .team-card.reveal:nth-child(5),#counters .counter-card.reveal:nth-child(5){transition-delay:calc(var(--stagger) * 4)} #services .svc-card.reveal:nth-child(6),#projects .proj-card.reveal:nth-child(6),#clients .client-card.reveal:nth-child(6),#team .team-card.reveal:nth-child(6),#counters .counter-card.reveal:nth-child(6){transition-delay:calc(var(--stagger) * 5)} #services .svc-card.reveal:nth-child(7),#projects .proj-card.reveal:nth-child(7),#clients .client-card.reveal:nth-child(7),#team .team-card.reveal:nth-child(7),#counters .counter-card.reveal:nth-child(7){transition-delay:calc(var(--stagger) * 6)} #services .svc-card.reveal:nth-child(8),#projects .proj-card.reveal:nth-child(8),#clients .client-card.reveal:nth-child(8),#team .team-card.reveal:nth-child(8),#counters .counter-card.reveal:nth-child(8){transition-delay:calc(var(--stagger) * 7)} #services .svc-card.reveal:nth-child(n+9),#projects .proj-card.reveal:nth-child(n+9),#clients .client-card.reveal:nth-child(n+9),#team .team-card.reveal:nth-child(n+9){transition-delay:calc(var(--stagger) * 8)} } @media (prefers-reduced-motion:reduce){ #services .svc-card.reveal,#projects .proj-card.reveal,#clients .client-card.reveal,#team .team-card.reveal,#counters .counter-card.reveal{transition-delay:0s!important} } /* ========================================================================== 21 · MOBILE AUDIT FIXES · 2026-08-15 Previous version saved as bfc-polish.backup-2026-08-15.css ========================================================================== */ /* 21.1 The ticker must never freeze on a touch screen --------------------- The pause-on-hover rule in section 7 has no pointer guard, so the sticky hover emulation in mobile Safari / Chrome latched onto the gold bar the first time a finger passed over it and the marquee stayed paused. */ .ticker:hover .ticker-track, .ticker-wrapper:hover #rss-ticker-track{animation-play-state:running !important;} @media (hover:hover) and (pointer:fine){ .ticker:hover .ticker-track, .ticker-wrapper:hover #rss-ticker-track{animation-play-state:paused !important;} } /* 21.2 ... and must keep moving in Low Power Mode / Reduce Motion -------- Section 14 killed every animation, and iOS Low Power Mode plus Android battery saver both report prefers-reduced-motion: reduce. */ @media (prefers-reduced-motion:reduce){ .ticker-track{ animation:ticker 36s linear infinite !important; animation-duration:36s !important; animation-iteration-count:infinite !important; animation-play-state:running !important; } #rss-ticker-track{ animation:scroll-right 90s linear infinite !important; animation-duration:90s !important; animation-iteration-count:infinite !important; animation-play-state:running !important; } } /* 21.3 Steady compositing for the long tracks on iOS -------------------- */ .ticker-track,#rss-ticker-track{will-change:transform;backface-visibility:hidden;} /* 21.4 Counters read "35+" and "100%" instead of stacking the suffix ---- */ .counter-num,.counter-suf{display:inline-block !important;vertical-align:baseline;} .counter-suf{margin-left:.04em;} /* 21.5 Tap targets ------------------------------------------------------- The 12 project dots were squeezed from 10px to 2px by flex shrink. */ .pslider-dots{flex-wrap:wrap;justify-content:center;row-gap:8px;} .pslider-dot{flex:0 0 auto !important;} @media (max-width:1024px),(pointer:coarse){ .pslider-dots{gap:14px !important;} .pslider-dot{position:relative;} .pslider-dot::after{content:'';position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;} .hamburger{width:44px !important;height:44px !important; align-items:center !important;justify-content:center !important;} .hamburger span{width:24px;} .mob-menu a{display:flex;align-items:center;min-height:44px;} } /* 21.6 Legibility floor on phones --------------------------------------- These sat between 9.3px and 10.9px, below comfortable reading size. */ @media (max-width:600px){ .hero-tag{font-size:.7rem !important;letter-spacing:.1em !important;} .proj-badge{font-size:.7rem !important;} .proj-card-body > div:first-child{font-size:.74rem !important;} .live-news-body > div:first-child{font-size:.74rem !important;} .saas-stat > span{font-size:.74rem !important;} .mn-side h4{font-size:.74rem !important;} .footer-brand-sub{font-size:.7rem !important;} } /* ============================================================ 22 . SCROLL PERFORMANCE PACK . 2026-08-15 Removes the per-frame full-viewport repaints that cause the desktop scroll hiccup. No intended visual change. ============================================================ */ /* 22.1 - Ambient wash off the scrolling background layer. background-attachment:fixed makes the browser repaint the whole viewport background on EVERY scroll frame, and #nav's backdrop-filter then has to re-blur that fresh paint. Same two gradients, now painted once onto a static composited layer. */ html{background-color:#0B1929;} body{background-image:none !important;background-color:transparent !important;} body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-color:#0B1929; background-image: radial-gradient(120% 80% at 85% -10%,rgba(201,168,76,.055),transparent 55%), radial-gradient(90% 70% at -10% 110%,rgba(226,192,106,.04),transparent 60%); transform:translateZ(0); } /* 22.2 - Cheaper glass. An 18px blur across a full-width fixed bar is the second largest per-frame cost; 10px is visually near identical. */ #nav,#nav.scrolled{ -webkit-backdrop-filter:blur(10px) saturate(1.35); backdrop-filter:blur(10px) saturate(1.35); } #hub-bar{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } /* Phones and tablets get no live blur at all - opaque bar instead. */ @media (max-width:1024px),(pointer:coarse){ #nav,#nav.scrolled,#hub-bar,header.sh{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } #nav,#nav.scrolled{background-color:rgba(11,25,41,.95) !important;} } /* 22.3 - Keep the ambient canvas and the progress bar on their own compositor layers so they never dirty the document. */ body>canvas{transform:translateZ(0);will-change:transform;} #bfc-progress,.bfc-progress{will-change:width;} #bfc-vframe,#bfc-trans{will-change:opacity;} /* 22.4 - Full-bleed decorative loops idle when the tab is not visible and never force layout. */ .bfc-drift,#hero-ray,.hub-kb{backface-visibility:hidden;} /* 22.5 - A smooth anchor scroll across an 18,000px page reads as lag. */ @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} /* ============================================================ 23 . SCROLL PERFORMANCE (2) . 2026-08-15 The ambient field canvas is fixed and full-viewport, so a mix-blend-mode forced the compositor to read back and re-blend the entire screen on every frame - the remaining hiccup between About and Booking. On a #0B1929 base, screen and normal are visually indistinguishable (A/B checked), so the blend goes. ============================================================ */ body>canvas{mix-blend-mode:normal !important;} /* ========================================================== 24 . HEADER NAV UNIFORMITY + ACTIVE STATE (inner pages) ========================================================== */ header.sh .wrap{gap:14px;} nav.sn{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(.85rem,1.5vw,1.75rem);} nav.sn a{margin-left:0 !important;white-space:nowrap;position:relative;padding:6px 0;} nav.sn a[aria-current="page"],nav.sn a.on{color:var(--gold);} nav.sn a[aria-current="page"]::after,nav.sn a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);} @media (max-width:1180px){nav.sn a{font-size:.74rem;letter-spacing:.08em;}} @media (max-width:700px){ header.sh .wrap{flex-wrap:wrap;} nav.sn{display:flex !important;width:100%;margin-top:9px;padding-bottom:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:1.1rem;} nav.sn::-webkit-scrollbar{display:none;} nav.sn a{font-size:.72rem;letter-spacing:.09em;} } /* ---- rail: keep item rhythm even with 9 entries ---- */ @media (min-width:1500px) and (max-height:820px){#hub-rail{gap:12px;}} /* ========================================================== 25 . EXPENSIVE PASS - type scale, gold rationing, rhythm, surfaces ========================================================== */ :root{ --text:#C9D4E2; --text-bright:#E8EDF5; --line-soft:rgba(255,255,255,.07); --card-surface:#10233A; --e-lux:cubic-bezier(.22,1,.36,1); } /* 25.1 - type -------------------------------------------- */ body{font-size:clamp(1rem,.95rem + .25vw,1.125rem);line-height:1.65;color:var(--text);} h1,h2,h3,h4,h5{color:var(--text-bright);} h1{font-size:clamp(3rem,7.5vw + 1rem,6.5rem);line-height:.95;letter-spacing:.012em;} h2{font-size:clamp(2.25rem,4.5vw + .5rem,4.25rem);line-height:1.02;letter-spacing:.012em;} h3{font-size:clamp(1.375rem,1.5vw + .75rem,1.75rem);line-height:1.15;letter-spacing:.025em;} /* cards keep a compact h3 */ .live-news-card h3,.live-news-body h3,.proj-card h3,.svc-card h3,.team-card h3, .cred-card h3,.saas-stat h3,.client-icon h3,.faq-item h3,.acc h3{ font-size:1.05rem;line-height:1.35;letter-spacing:.02em; } p{max-width:68ch;} .proj-card p,.svc-card p,.team-card p,.cred-card p,.saas-stat p,.live-news-card p, .client-icon p,footer p,#hub-bar p,.mob-menu p,#bfc-menu p,nav p,td p,figcaption p, .hero p,#hero p,.sh p{max-width:none;} /* 25.2 - gold rationing: gold = state, action, index ------ */ .counter-num,.counter-value{color:var(--text-bright) !important;} h2 .gold,h3 .gold,h4 .gold{color:#EDE6D8;} #hero h1 .gold,#hero .gold,.hero .gold{color:var(--gold);} .label,.c-label,.client-sector,.team-role,.cred-title,.ft-col-title{ color:var(--muted) !important;letter-spacing:.22em; } .skill-tag{ color:var(--text) !important; border-color:rgba(255,255,255,.10) !important; background:rgba(255,255,255,.02) !important; } /* 25.3 - card surfaces ----------------------------------- */ .svc-card,.proj-card,.team-card,.cred-card,.saas-stat,.live-news-card,.client-icon, .svc-tile,.ins-card,.value-card{ background:var(--card-surface); border:1px solid var(--line-soft); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); border-radius:0; transition:border-color .32s var(--e-lux),transform .32s var(--e-lux); } .svc-card:hover,.proj-card:hover,.team-card:hover,.cred-card:hover, .live-news-card:hover,.svc-tile:hover,.ins-card:hover,.value-card:hover{ border-color:rgba(201,168,76,.35); transform:translateY(-2px); } /* 25.4 - spacing rhythm ---------------------------------- */ section:not(#saas):not(#hero):not(.hero){padding-block:clamp(88px,12vh,160px);} .container,.wrap{max-width:1240px;padding-inline:clamp(20px,4vw,48px);} header.sh .wrap{max-width:1240px;} /* 25.5 - drafting sheet: ONE fixed pseudo-layer ----------- */ #bfc-plotter{mix-blend-mode:screen !important;z-index:300 !important;} /* drafting grid merged into the single fixed background layer */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-color:#0B1929; background-image: linear-gradient(rgba(201,168,76,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(201,168,76,.03) 1px, transparent 1px), radial-gradient(120% 80% at 85% -10%, rgba(201,168,76,.055), transparent 55%), radial-gradient(90% 70% at -10% 110%, rgba(226,192,106,.04), transparent 60%); background-size:40px 40px, 40px 40px, auto, auto; background-repeat:repeat, repeat, no-repeat, no-repeat; transform:translateZ(0); } /* ========================================================== 25 . AMBIENT SHEET + EDITORIAL SYSTEM ========================================================== */ /* --- single fixed sheet: drafting grid + wash + base colour --- */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-color:#0B1929; background-image: linear-gradient(rgba(201,168,76,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(201,168,76,.03) 1px, transparent 1px), radial-gradient(120% 80% at 85% -10%, rgba(201,168,76,.055), transparent 55%), radial-gradient(90% 70% at -10% 110%, rgba(226,192,106,.04), transparent 60%); background-size:40px 40px, 40px 40px, auto, auto; transform:translateZ(0); } /* ========================================================== EDITORIAL SYSTEM - gold rationing / type / rhythm / surfaces ========================================================== */ :root{ --text:#C9D4E2; --text-bright:#E8EDF5; --muted:#8a9bb0; --surface:#10233A; --hair:rgba(255,255,255,.07); --e-out:cubic-bezier(.22,1,.36,1); } /* --- type scale --- */ h1,.h1{font-size:clamp(3rem,7.5vw + 1rem,6.5rem);line-height:.95;letter-spacing:.012em;} h2,.h2{font-size:clamp(2.25rem,4.5vw + .5rem,4.25rem);line-height:1.02;letter-spacing:.012em;} h3,.h3{font-size:clamp(1.375rem,1.5vw + .75rem,1.75rem);line-height:1.15;letter-spacing:.025em;} body{font-size:clamp(1rem,.95rem + .25vw,1.125rem);line-height:1.65;color:var(--text);} p,li{max-width:68ch;} nav li,.nav-links li,#hub-rail a,.mob-menu a{max-width:none;} /* --- spacing rhythm --- */ section:not(#hero):not(#saas){padding-block:clamp(88px,12vh,160px);} .container{max-width:1240px;padding-inline:clamp(20px,4vw,48px);} /* --- gold rationing: keep gold for CTA, active state, index numbers --- */ .bfc-ico{color:var(--muted) !important;} .label,.c-label,.client-sector,.cred-title,.ft-col-title,.team-role,.why-n,.proj-badge{color:var(--muted) !important;} .counter-num,.proj-value{color:var(--text-bright) !important;} .skill-tag{color:var(--text) !important;background:transparent !important;border-color:var(--hair) !important;} .svc-go{color:var(--text) !important;} h2 span,.h2 span{color:#EDE6D8;} /* --- surfaces --- */ .svc-card,.proj-card,.team-card,.client-card,.why-item,.cred-item,.contact-item,.live-news-card,.svc-panel,.faq-item{ background:var(--surface);border:1px solid var(--hair);border-radius:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:border-color .32s var(--e-out), transform .32s var(--e-out); } .svc-card:hover,.proj-card:hover,.team-card:hover,.client-card:hover,.live-news-card:hover,.faq-item:hover{ border-color:rgba(201,168,76,.35);transform:translateY(-2px); } /* --- grain: no blend layer, flat 4% --- */ html::after{opacity:.04 !important;mix-blend-mode:normal !important;} /* --- the plotter canvas must keep its overlay blend --- */ #bfc-plot{mix-blend-mode:screen !important;z-index:300 !important;} @media (prefers-reduced-motion:reduce){#bfc-plot{opacity:.55;}} /* --- type scale: override the older pinned headline rules --- */ .hero-h1{font-size:clamp(3rem,7.5vw + 1rem,6.5rem);line-height:.95;letter-spacing:.012em;} @media (min-width:1100px){ main section:not(#saas):not(#hero) h2, main section:not(#saas):not(#hero) .h2{font-size:clamp(2.25rem,4.5vw + .5rem,4.25rem) !important;line-height:1.02 !important;} } h2[style*="Segoe"],#faq h2,.faq-wrap h2,#live-news-section h2,#process h2{font-size:clamp(2.25rem,4.5vw + .5rem,4.25rem) !important;line-height:1.02 !important;} /* plotter: 100vw includes the scrollbar -> kill the 12px horizontal scroll */ #bfc-plot,#bfc-plotter{left:0 !important;top:0 !important;width:100% !important;height:100% !important;max-width:100% !important;} /* --- hardening: must beat page-level inline