/* ===================================================================== premium.css — High-end finishing layer Loaded AFTER style/animations/responsive so it refines & overrides. Adds: brand-orange accent, custom cursor, grain & aurora depth, spotlight cards, refined type, scroll-driven motion, polished UI. ===================================================================== */ :root { /* Secondary accent pulled from the company logo (sun + swoosh) */ --c-orange: #F5821F; --c-orange-2: #FBB034; --c-gold: #FFC24B; --grad-orange: linear-gradient(135deg, #F5821F 0%, #FBB034 100%); --grad-sun: linear-gradient(135deg, #FF7A00 0%, #FFC24B 100%); /* Richer shadows for depth */ --sh-xl: 0 40px 90px -20px rgba(5,18,32,.45); --ink-deep: #05111d; } /* ------------------------------------------------------------- 1. GLOBAL REFINEMENT ------------------------------------------------------------- */ ::selection { background: var(--c-accent); color: #fff; } ::-moz-selection { background: var(--c-accent); color: #fff; } /* Guarantee no phantom horizontal scroll from fixed off-screen layers (grain, drawer). Use overflow-x:clip (NOT hidden) so does NOT become a scroll container — hidden here conflicts with body{overflow-x:hidden} and breaks scrolling & reveals. */ html { overflow-x: clip; } html { scrollbar-color: var(--c-accent) #0b1825; } @media (pointer: fine) { ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: #0b1825; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--c-accent), #0a2a4a); border-radius: 20px; border: 3px solid #0b1825; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--c-orange), var(--c-accent)); } } /* Crisper, more confident headings */ h1, h2, h3, .hero__title, .display, .h-xl { text-wrap: balance; letter-spacing: -.03em; } .lead { text-wrap: pretty; } /* ------------------------------------------------------------- 2. FILM GRAIN — subtle texture for richness ------------------------------------------------------------- */ .grain { position: fixed; inset: -8%; z-index: 9990; pointer-events: none; opacity: .045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grainShift 7s steps(6) infinite; } @keyframes grainShift { 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,-3%)} 80%{transform:translate(4%,3%)} 100%{transform:translate(0,0)} } /* ------------------------------------------------------------- 3. CUSTOM CURSOR (fine-pointer devices only) ------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { .has-cursor, .has-cursor a, .has-cursor button, .has-cursor .btn, .has-cursor input, .has-cursor textarea, .has-cursor select { cursor: none; } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); } .cursor-dot { width: 7px; height: 7px; background: var(--c-orange); transition: width .25s, height .25s, background .25s; } .cursor-ring { width: 38px; height: 38px; border: 1.5px solid rgba(0,119,255,.6); transition: width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s; } .cursor-ring.hover { width: 64px; height: 64px; border-color: var(--c-orange); background: rgba(245,130,31,.08); } .cursor-dot.hover { width: 0; height: 0; } .cursor-ring.down { width: 30px; height: 30px; } } /* ------------------------------------------------------------- 4. SCROLL PROGRESS BAR ------------------------------------------------------------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1001; background: linear-gradient(90deg, var(--c-accent), var(--c-orange)); box-shadow: 0 0 14px rgba(0,119,255,.6); transition: width .1s linear; } /* ------------------------------------------------------------- 5. PRELOADER — counter + curtain reveal ------------------------------------------------------------- */ .preloader { transition: transform .9s cubic-bezier(.76,0,.24,1), opacity .5s; } .preloader.hidden { transform: translateY(-100%); opacity: 1; visibility: visible; } .preloader__ring { border-top-color: var(--c-orange); } .preloader__count { font-family: var(--font-head); font-weight: 800; color: #fff; font-size: 3.2rem; letter-spacing: -.02em; margin-top: 14px; line-height: 1; background: var(--grad-metal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .preloader__bar { width: 180px; height: 2px; background: rgba(255,255,255,.14); margin: 18px auto 0; border-radius: 2px; overflow: hidden; } .preloader__bar > i { display: block; height: 100%; width: 0; background: var(--grad-orange); transition: width .2s; } /* ------------------------------------------------------------- 6. BRAND-ORANGE ACCENTS (cohesion with the logo) ------------------------------------------------------------- */ .eyebrow::before { background: var(--grad-orange); } .hero__title .accent { background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero__mouse::before { background: var(--c-orange-2); } .stat__num .suffix, .stats--light .stat__num .suffix { -webkit-text-fill-color: var(--c-orange); color: var(--c-orange); } .split__badge .n { color: var(--c-orange-2); } .feature:hover .feature__num { background: var(--grad-orange); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: all .4s; } .card__link:hover { color: var(--c-orange); } .slider__dot.active { background: var(--grad-orange); } .quote-card .mark { background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: .9; } .back-top:hover { background: var(--grad-orange); } .acc-item.open .pm { background: var(--grad-orange); } /* ------------------------------------------------------------- 7. BUTTONS — refined, less neon, more crafted ------------------------------------------------------------- */ .btn { letter-spacing: .01em; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s; } .btn--primary { background: var(--grad-accent); box-shadow: 0 10px 30px -8px rgba(0,119,255,.5), inset 0 1px 0 rgba(255,255,255,.25); } .btn--primary:hover { box-shadow: 0 18px 44px -10px rgba(0,119,255,.6), inset 0 1px 0 rgba(255,255,255,.35); transform: translateY(-3px); } /* orange sweep on primary hover */ .btn--primary::after { content:""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: var(--grad-orange); transition: opacity .4s; } .btn--primary:hover::after { opacity: 1; } .btn--dark { box-shadow: 0 10px 30px -12px rgba(5,18,32,.6); } .btn--lg { letter-spacing: .02em; } /* ------------------------------------------------------------- 8. CARDS — spotlight + gradient hairline + depth ------------------------------------------------------------- */ .card, .feature, .post, .info-card { --mx: 50%; --my: 50%; } .card::before, .feature::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(380px circle at var(--mx) var(--my), rgba(0,119,255,.14), transparent 42%); transition: opacity .45s; border-radius: inherit; } .card:hover::before, .feature:hover::before { opacity: 1; } .card__body, .card__media { position: relative; z-index: 2; } .card:hover { box-shadow: var(--sh-xl); border-color: rgba(0,119,255,.35); } .feature { transition: transform .45s var(--ease), box-shadow .45s, border-color .45s; } .feature:hover { box-shadow: var(--sh-xl); border-color: rgba(245,130,31,.3); } /* top hairline accent that grows on hover */ .feature::after { content:""; position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--grad-orange); transition: width .5s var(--ease); border-radius: 3px; } .feature:hover::after { width: 100%; } /* ------------------------------------------------------------- 9. NAV — deeper glass, refined ------------------------------------------------------------- */ .nav.scrolled { background: rgba(247,250,253,.72); box-shadow: 0 1px 0 rgba(12,23,34,.06), 0 12px 40px -12px rgba(7,26,45,.18); } .nav__link::after { background: var(--grad-orange); } .has-drop .drop { box-shadow: var(--sh-xl); } /* ------------------------------------------------------------- 10. DEPTH for dark sections + footer (vignette + aurora) ------------------------------------------------------------- */ .bg-dark { background: radial-gradient(120% 120% at 50% -10%, #0b2a47 0%, #071a2d 45%, var(--ink-deep) 100%); } .bg-dark::before { content:""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(600px 400px at 12% 18%, rgba(0,119,255,.16), transparent 60%), radial-gradient(520px 360px at 88% 82%, rgba(245,130,31,.10), transparent 60%); animation: auroraDrift 16s ease-in-out infinite alternate; } .bg-dark > .container { position: relative; z-index: 1; } @keyframes auroraDrift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.08); } } .footer { background: linear-gradient(180deg, #16181b 0%, #1d1f22 100%); } .footer::after { content:""; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 700px; height: 240px; background: radial-gradient(closest-side, rgba(0,119,255,.12), transparent); pointer-events: none; } /* ------------------------------------------------------------- 11. HERO — cinematic upgrades ------------------------------------------------------------- */ .hero__title { font-size: clamp(3rem, 8.5vw, 6.8rem); line-height: 1.02; } .hero__bg video, .hero__bg img { transform: scale(1.06); will-change: transform; } .hero::after { content:""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(180deg, transparent, rgba(7,26,45,.65)); z-index: 1; pointer-events: none; } .hero__inner { z-index: 3; } /* kicker line above headline */ .hero .eyebrow { font-size: .82rem; } /* ------------------------------------------------------------- 12. SCROLL REVEAL — premium line/word masks & clip images ------------------------------------------------------------- */ .reveal-line { display: block; overflow: hidden; } .reveal-line > span { display: inline-block; transform: translateY(115%); transition: transform 1s cubic-bezier(.16,.84,.44,1); } .reveal-line.in > span, .in .reveal-line > span { transform: translateY(0); } .reveal-word { display: inline-block; overflow: hidden; vertical-align: top; } .reveal-word > span { display: inline-block; transform: translateY(110%); opacity: 0; transition: transform .8s var(--ease), opacity .8s var(--ease); } .reveal-word.in > span { transform: none; opacity: 1; } /* Image clip reveal for media */ [data-clip] { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.76,0,.24,1); } [data-clip].in { clip-path: inset(0 0 0 0); } [data-clip] img { transform: scale(1.15); transition: transform 1.4s cubic-bezier(.76,0,.24,1); } [data-clip].in img { transform: scale(1); } /* ------------------------------------------------------------- 13. MARQUEE / pills refinement ------------------------------------------------------------- */ .marquee__item { opacity: .55; transition: opacity .3s, color .3s; } .marquee__item:hover { opacity: 1; color: var(--c-orange); } .pill { backdrop-filter: blur(6px); } .hero__trust .pill { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; } /* ------------------------------------------------------------- 14. SECTION RHYTHM — more confident spacing & hairlines ------------------------------------------------------------- */ .section { padding-block: clamp(4.5rem, 10vw, 9rem); } .section-head h2 { letter-spacing: -.035em; } .cta-band { box-shadow: var(--sh-xl); } .cta-band::after { content:""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(500px 300px at 15% 110%, rgba(245,130,31,.22), transparent 60%); } /* table polish */ table.cmp thead th { background: linear-gradient(135deg, #071a2d, #0e3358); } table.cmp td.yes { color: #15b364; } /* ------------------------------------------------------------- 15. FORM polish ------------------------------------------------------------- */ .field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 4px rgba(0,119,255,.14); } .form { box-shadow: var(--sh-xl); } /* ------------------------------------------------------------- 16. WHATSAPP / floating refinement ------------------------------------------------------------- */ .whatsapp-float { box-shadow: 0 12px 34px -6px rgba(37,211,102,.5); } /* ------------------------------------------------------------- 17. REAL FACILITY VIDEO / MEDIA FRAME ------------------------------------------------------------- */ .video-frame { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-xl); border: 1px solid rgba(255,255,255,.14); background: #05111d; } .video-frame video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; filter: contrast(1.05) saturate(1.08) brightness(1.02); } .video-frame__tag { position: absolute; top: 16px; left: 16px; z-index: 3; display: flex; align-items: center; gap: 9px; background: rgba(7,26,45,.55); backdrop-filter: blur(12px); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; padding: 9px 15px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.16); pointer-events: none; } .video-frame__tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-orange); animation: pulse 2s infinite; } .video-frame::after { content:""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -80px 60px -40px rgba(5,17,29,.6); } .spec-list { display: grid; gap: 12px; margin-top: 24px; } .spec-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--c-silver); font-weight: 500; } .spec-list .k { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(245,130,31,.14); color: var(--c-orange-2); } .spec-list .k svg { width: 16px; height: 16px; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .grain, .bg-dark::before { animation: none; } .cursor-dot, .cursor-ring { display: none; } .has-cursor, .has-cursor * { cursor: auto !important; } [data-clip] { clip-path: none; } [data-clip] img, .reveal-word > span, .reveal-line > span { transform: none; opacity: 1; } }