/* ============================================================ FRAUK — shared stylesheet Lifted VERBATIM from the signed-off Claude Design bundle (commercial-fire-safety-compliance). Do not restyle. Tokens: Base #FBFCFE · Navy #0B2545 · Steel #3A6EA5 · CTA indigo #5B5BD6 (hovers to green #1B873F by design) · PASS/VERIFIED green #1B873F / #3BD07A / #E7F4EC. ============================================================ */ html,body{margin:0;padding:0} body{background:#FBFCFE;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-family:'Inter',system-ui,sans-serif;color:#1E293B} *{box-sizing:border-box} /* --- Primary CTA: scale-pop (slcCtaPop) + shine sweep (slcShine), FRAUK indigo, hover lifts to green. The shine is a ::after so every .cta gets it without adding a per button (needs position:relative + overflow:hidden). --- */ @keyframes slcCtaPop{0%,100%{transform:scale(1);box-shadow:0 12px 28px rgba(91,91,214,.42)}50%{transform:scale(1.035);box-shadow:0 18px 46px rgba(91,91,214,.62)}} @keyframes slcShine{0%{transform:translateX(-120px) skewX(-18deg)}55%,100%{transform:translateX(440px) skewX(-18deg)}} .cta{position:relative;overflow:hidden;animation:2.6s ease-in-out 0s infinite normal none running slcCtaPop;will-change:transform,box-shadow} .cta::after{content:"";position:absolute;top:0;left:0;width:70px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.5),transparent);transform:translateX(-120px) skewX(-18deg);animation:3.4s ease-in-out 0s infinite normal none running slcShine;pointer-events:none} .cta:hover{background:#1B873F!important;transform:translateY(-2px)!important;box-shadow:0 8px 24px rgba(27,135,63,.5)!important} .cta:active{transform:translateY(0)!important} @media(prefers-reduced-motion:reduce){.cta{animation:none!important}.cta::after{display:none!important}} /* --- Hero 3D certificate float --- */ @keyframes ah-float{0%{transform:translateY(-7px)}100%{transform:translateY(9px)}} .ah-floatwrap{animation:ah-float 6.5s ease-in-out infinite alternate} /* --- Scroll reveal --- Elements are hidden only when JS is active () and revealed as they scroll into view (IntersectionObserver adds .ah-revealed). With JS off or reduced-motion, content stays fully visible — it can never get stuck hidden. */ .js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)} .js [data-reveal].ah-revealed{opacity:1;transform:none} .js .ah-steps [data-reveal]:nth-child(2){transition-delay:.08s} .js .ah-steps [data-reveal]:nth-child(3){transition-delay:.16s} @media(prefers-reduced-motion:reduce){.ah-floatwrap{animation:none!important}.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}} /* --- Chatbot widget (ported from ChatBot.dc.html) --- */ @keyframes cb-pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}} @keyframes cb-pulse{0%,100%{box-shadow:0 8px 22px rgba(91,91,214,.42)}50%{box-shadow:0 8px 30px rgba(91,91,214,.7)}} @keyframes cb-msg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .cb-launch{animation:cb-pulse 2.8s ease-in-out infinite} .cb-msg{animation:cb-msg .26s ease both} .cb-panel{animation:cb-pop .22s cubic-bezier(.2,.8,.3,1) both} .cb-chip:hover{background:#EEF1FB!important;border-color:#5B5BD6!important} .cb-chatbtn:hover{border-color:#5B5BD6} .cb-scroll::-webkit-scrollbar{width:7px} .cb-scroll::-webkit-scrollbar-thumb{background:#DBE4EE;border-radius:99px} @media(prefers-reduced-motion:reduce){.cb-launch{animation:none}} @media(max-width:480px){.cb-panel{width:calc(100vw - 24px)!important}} @media(max-width:420px){.cb-chatlabel{display:none!important}} /* --- Header nav / burger responsive --- */ @media(min-width:880px){.ah-nav{display:flex!important}} @media(max-width:880px){.ah-burger{display:inline-flex!important}.ah-headcta{display:none!important}} /* --- Home / page layout responsive --- */ @media(max-width:980px){.ah-hero{grid-template-columns:1fr!important;gap:40px!important}.ah-hero-art{justify-self:center;order:2}.ah-hero>div:first-child{order:1}} @media(max-width:760px){.ah-h1{font-size:42px!important}.ah-sec{padding-left:20px!important;padding-right:20px!important}.ah-herocta{flex-direction:column!important;align-items:stretch!important}.ah-herocta .cta{justify-content:center}.ah-howlink{display:none!important}} @media(max-width:620px){.ah-steps{grid-template-columns:1fr!important}.ah-pillars{grid-template-columns:1fr 1fr!important}.ah-trust-row{flex-direction:column!important;align-items:flex-start!important}.ah-premises{grid-template-columns:1fr 1fr!important}} @media(max-width:860px){.ah-incl{grid-template-columns:1fr!important;gap:32px!important}.ah-data-grid{grid-template-columns:1fr!important}} @media(max-width:760px){.ah-premises{grid-template-columns:1fr 1fr!important}} @media(max-width:440px){.ah-premises{grid-template-columns:1fr!important}} /* --- Footer grid responsive --- */ @media(max-width:980px){.af-grid{grid-template-columns:1fr 1fr 1fr!important;gap:32px 24px!important}} @media(max-width:600px){.af-grid{grid-template-columns:1fr 1fr!important}} @media(max-width:400px){.af-grid{grid-template-columns:1fr!important;gap:28px!important}} /* --- Hover helpers (ported from DC style-hover attributes) --- */ .ah-headcta:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(11,37,69,.2),0 10px 22px rgba(91,91,214,.36)} .ah-navlink:hover{background:#F1F5F9;color:#0B2545} .ah-footlink:hover{color:#fff!important} .ah-premcard:hover{border-color:#5B5BD6!important;transform:translateY(-2px)} .ah-howlink:hover{border-color:#0B2545!important} .gl-townlink:hover{border-color:#5B5BD6!important} /* --- Quote wizard step-in animation --- */ @keyframes wz-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .wz-step{animation:wz-in .22s ease both} @media(prefers-reduced-motion:reduce){.wz-step{animation:none!important}} /* ============================================================ Small-screen responsive (phones down to 320px) ============================================================ */ /* Kill horizontal scroll site-wide. #mainContent is a sibling of the sticky header, so clipping it never breaks the sticky nav. overflow-x:clip (not hidden) avoids creating a scroll container / forcing overflow-y:auto. */ #mainContent{overflow-x:clip} img,svg{max-width:100%} /* <=400px: scale hero, headings and the 3D certificate so nothing overflows */ @media(max-width:400px){ .ah-sec{padding-left:18px!important;padding-right:18px!important} .ah-h1{font-size:34px!important;line-height:1.05!important} .ah-sec h2{font-size:27px!important;line-height:1.18!important} #ahHeroPersp{width:280px!important} .gl-h1{font-size:30px!important} .fc-h1{font-size:30px!important} .gl-sec,.fc-sec{padding-left:18px!important;padding-right:18px!important} /* data bar chart: tighten the fixed label/value columns so the bar still shows */ .ah-data-grid [style*="width:118px"]{width:84px!important} } /* <=340px (e.g. 320px): scale down one more step */ @media(max-width:340px){ .ah-h1{font-size:30px!important} .ah-sec h2{font-size:23px!important} #ahHeroPersp{width:250px!important} .gl-h1,.fc-h1{font-size:27px!important} }