/* ══ MODAL: must render above the sticky header ══ */
/* Bootstrap's .modal / .modal-backdrop are z-index 1050 / 1040, while
the sticky header is z-index 9998 (and the services mega menu 9999).
A modal is supposed to always be topmost — with the header's z-index
that high, the sticky header (logo + hamburger) was instead painting
on top of the "Request Quote" modal's upper portion, since the modal
is fixed near the top of the viewport too. */
.modal {
z-index: 10050 !important;
}
.modal-backdrop {
z-index: 10040 !important;
}
/* ══════════════════════════════════════════
GLOBAL MOBILE OVERFLOW FIX
Fixes right-side space on ALL pages
══════════════════════════════════════════ */
/* Force everything to stay within screen */
html {
overflow-x: hidden !important;
}
body {
/* style.css (loaded before this file) sets overflow-x:hidden on body
in TWO places (its reboot rules and its own theme rules). That
turns into its own scroll container, which breaks
position:sticky for the header on every browser — merely not
re-declaring it here isn't enough, style.css's own rule still
applies. Explicitly force it back to visible. 's
overflow-x:hidden below still fully stops horizontal scroll
site-wide, so this does not reopen the mobile overflow bug. */
overflow-x: visible !important;
max-width: 100vw !important;
}
/* This is the ROOT CAUSE — Bootstrap row negative margins */
/* Must cancel them on mobile */
@media (max-width: 767.98px) {
/* Cancel Bootstrap row negative margins */
.row {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Keep column padding equal on both sides */
[class*="col-"] {
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Fix owl carousel — confirmed culprit from console */
.owl-carousel {
overflow: hidden !important;
max-width: 100% !important;
}
.owl-stage-outer {
overflow: hidden !important;
}
/* Fix sticky sidebar on service detail pages */
.sticky-top {
position: relative !important;
top: auto !important;
}
/* Exception — don't break flex/grid children */
.d-flex > *,
.row > * {
min-width: 0 !important;
}
}
/*ABOUT US*/
/* ── AI Section wrapper ────────────────────────────────── */
.psk-ai-section {
background: linear-gradient(160deg, #f8fafc 0%, #fff5f2 100%);
padding: 90px 0;
position: relative;
overflow: hidden;
}
.psk-ai-section::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 400px;
height: 400px;
border-radius: 50%;
background: rgba(252,94,40,0.05);
pointer-events: none;
}
.psk-ai-section::after {
content: '';
position: absolute;
bottom: -60px;
left: -60px;
width: 300px;
height: 300px;
border-radius: 50%;
background: rgba(4,14,38,0.04);
pointer-events: none;
}
/* ── AI Cards ──────────────────────────────────────────── */
.psk-ai-card {
background: #fff;
border: 1px solid #e8ecf2;
border-radius: 16px;
padding: 32px 28px;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.psk-ai-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(252,94,40,0.13);
border-color: rgba(252,94,40,0.25);
}
.psk-ai-card--featured {
background: linear-gradient(135deg, #fc5e28 0%, #e04010 100%);
border-color: transparent;
}
.psk-ai-card--featured:hover {
box-shadow: 0 16px 40px rgba(252,94,40,0.35);
}
.psk-ai-card__badge--top {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: #040e26;
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
padding: 5px 16px;
border-radius: 20px;
white-space: nowrap;
}
.psk-ai-card__icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
flex-shrink: 0;
}
.psk-ai-card h3 {
font-size: 1.15rem;
font-weight: 700;
color: #1e2a3a;
margin-bottom: 12px;
}
.psk-ai-card p {
font-size: 0.9rem;
color: #5a6a7a;
line-height: 1.75;
flex-grow: 1;
margin-bottom: 20px;
}
.psk-ai-card__badge {
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: 600;
color: #5a6a7a;
background: #f0f4f8;
padding: 6px 14px;
border-radius: 20px;
align-self: flex-start;
margin-top: auto;
}
/* ── AI Flow Steps ─────────────────────────────────────── */
.psk-ai-flow {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0;
background: #fff;
border: 1px solid #e8ecf2;
border-radius: 16px;
padding: 28px 32px;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.psk-ai-flow__step {
display: flex;
align-items: center;
gap: 14px;
padding: 8px 16px;
}
.psk-ai-flow__num {
width: 40px;
height: 40px;
border-radius: 50%;
background: #fc5e28;
color: #fff;
font-size: 16px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.psk-ai-flow__text {
display: flex;
flex-direction: column;
}
.psk-ai-flow__text strong {
font-size: 14px;
font-weight: 700;
color: #1e2a3a;
line-height: 1.3;
}
.psk-ai-flow__text span {
font-size: 12px;
color: #fc5e28;
font-weight: 600;
margin-top: 2px;
}
.psk-ai-flow__arrow {
color: #d0d8e4;
font-size: 14px;
padding: 0 4px;
}
/* ── AI Service Tags ───────────────────────────────────── */
.psk-ai-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.psk-ai-tags span {
background: #fff;
border: 1.5px solid #e0e8f0;
color: #1e2a3a;
padding: 7px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
transition: all 0.25s ease;
cursor: default;
}
.psk-ai-tags span:hover {
background: #fc5e28;
color: #fff;
border-color: #fc5e28;
}
.psk-ai-tags span:last-child {
background: #040e26;
color: #fff;
border-color: #040e26;
font-weight: 700;
}
/* ── Notify Block ──────────────────────────────────────── */
.psk-ai-notify {
background: #fff;
border: 1.5px solid #e8ecf2;
border-radius: 20px;
padding: 40px 36px;
position: relative;
box-shadow: 0 4px 24px rgba(0,0,0,0.07);
text-align: center;
}
.psk-ai-notify__pulse {
width: 10px;
height: 10px;
background: #fc5e28;
border-radius: 50%;
position: absolute;
top: 20px;
right: 20px;
animation: pskai-pulse 2s infinite;
}
@keyframes pskai-pulse {
0% { box-shadow: 0 0 0 0 rgba(252,94,40,0.5); }
70% { box-shadow: 0 0 0 12px rgba(252,94,40,0); }
100% { box-shadow: 0 0 0 0 rgba(252,94,40,0); }
}
/* ════════════════════════════════════════════════════════
HERO SECTION — prevent overflow on all screens
════════════════════════════════════════════════════════ */
.hero-wrap {
overflow: hidden !important;
max-width: 100vw !important;
}
.hero-wrap .container {
overflow: hidden !important;
}
[data-stellar-background-ratio] {
background-attachment: scroll !important;
}
/* ════════════════════════════════════════════════════════
GLOBAL MOBILE FIX — Equal left/right padding everywhere
Targets all screens ≤ 767px
════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
/* ── 1. Stop horizontal scrollbar completely ── */
html,
body {
overflow-x: hidden !important;
width: 100% !important;
}
/* ── 2. Fix Bootstrap row negative margins (root cause) ── */
.row,
.row.no-gutters {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ── 3. Container equal gutters on both sides ── */
.container,
.container-fluid {
padding-left: 15px !important;
padding-right: 15px !important;
width: 100% !important;
max-width: 100% !important;
}
/* ── 4. All columns equal padding ── */
[class*="col-"] {
padding-left: 15px !important;
padding-right: 15px !important;
}
/* ── 5. Sections — remove extra side padding, let container handle it ── */
.ftco-section,
.ftco-intro,
.ftco-services-2,
.ftco-counter,
.ftco-no-pt,
.ftco-no-pb,
.testimony-section,
.bg-half-light,
.bg-light,
section {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ── 6. aside-stretch panels overflow left on mobile — fix ── */
.aside-stretch,
.aside-stretch-right {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* ── 7. Services cards ── */
.services-wrap {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
}
/* ── 8. Project / Popular Services cards ── */
.project {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
}
/* ── 9. Blog entries ── */
.blog-entry {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ── 10. Media blocks (features strip) ── */
.media.block-6.services {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ── 11. Counter section left panel ── */
.ftco-counter .col-md-6.bg-secondary,
.ftco-counter .col-md-6 {
padding-left: 15px !important;
padding-right: 15px !important;
}
/* ── 12. Intro/CTA banner ── */
.ftco-intro .container .img {
padding-left: 15px !important;
padding-right: 15px !important;
}
/* ── 13. Prevent ALL images and carousels from overflowing ── */
img,
.img,
.block-20,
.owl-carousel,
.about-wrap {
max-width: 100% !important;
}
/* ── 14. Stellar/parallax background — disable on mobile ── */
[data-stellar-background-ratio] {
background-attachment: scroll !important;
background-position: center center !important;
}
/* ── 15. Hero section columns ── */
.hero-wrap .col-lg-7 {
padding-left: 15px !important;
padding-right: 15px !important;
}
/* ── 16. AI section cards on mobile ── */
.psk-ai-section {
padding: 60px 0 !important;
}
.psk-ai-card {
padding: 24px 20px !important;
margin-bottom: 15px !important;
}
.psk-ai-flow {
flex-direction: column !important;
align-items: flex-start !important;
padding: 20px !important;
}
.psk-ai-flow__arrow {
transform: rotate(90deg) !important;
padding: 4px 20px !important;
}
.psk-ai-notify {
padding: 28px 20px !important;
}
}
/* ══ OWL CAROUSEL MOBILE FIX ══ */
/* ══ OWL CAROUSEL MOBILE FIX ══ */
@media (max-width: 767.98px) {
.owl-carousel {
max-width: 100% !important;
overflow: hidden !important;
}
.owl-stage-outer {
overflow: hidden !important;
}
}
/* ══ RELATED SERVICES CARDS ══ */
.psk-service-card {
background: #fff;
border: 1px solid #e8ecf2;
border-radius: 16px;
padding: 24px 20px;
height: 100%;
display: flex;
flex-direction: column;
margin-bottom: 20px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
transition: all 0.3s ease;
position: relative;
}
.psk-service-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(252,94,40,0.12);
border-color: rgba(252,94,40,0.25);
}
.psk-service-card__popular {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
background: #fc5e28;
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 4px 14px;
border-radius: 20px;
white-space: nowrap;
}
.psk-service-card__header {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}
.psk-service-card__icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 20px;
}
.psk-service-card__tag {
font-size: 10px;
font-weight: 700;
color: #888;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
margin-bottom: 3px;
}
.psk-service-card__title {
font-size: 15px;
font-weight: 700;
color: #1e2a3a;
margin: 0;
line-height: 1.3;
}
.psk-service-card__desc {
font-size: 13px;
color: #5a6a7a;
line-height: 1.6;
margin-bottom: 14px;
flex-grow: 1;
}
.psk-service-card__docs {
background: #f8fafc;
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 14px;
}
.psk-service-card__docs-title {
font-size: 11px;
font-weight: 700;
color: #888;
margin-bottom: 8px;
letter-spacing: 0.3px;
}
.psk-service-card__docs-list {
list-style: none;
padding: 0;
margin: 0;
}
.psk-service-card__docs-list li {
font-size: 13px;
color: #1e2a3a;
padding: 3px 0;
line-height: 1.4;
}
.psk-service-card__doc-note {
color: #fc5e28;
font-size: 12px;
}
.psk-service-card__docs-more {
color: #888 !important;
font-style: italic;
font-size: 12px !important;
}
.psk-service-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid #f0f4f8;
}
.psk-service-card__time {
font-size: 12px;
color: #888;
}
/* Mobile fix */
@media (max-width: 767.98px) {
.psk-service-card {
margin-bottom: 16px !important;
}
.psk-service-card__title {
font-size: 14px !important;
}
.psk-related-section .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* ══ TESTIMONIAL SECTION FIX ══ */
.testimony-section .owl-carousel,
.carousel-testimony {
overflow: visible !important;
}
.testimony-section .owl-stage-outer {
overflow: hidden !important;
}
.testimony-section {
overflow: hidden !important;
}
/* Fix black background on right side */
.testimony-section .col-md-6.aside-stretch-right {
background: #040e26 !important;
}
.carousel-testimony .owl-item {
opacity: 1 !important;
visibility: visible !important;
}
/* Fix autoHeight not calculating correctly */
.carousel-testimony .owl-stage {
display: flex !important;
align-items: stretch !important;
}
/* ══ HERO: responsive height ══ */
/* style.css hard-codes .hero-wrap / .slider-text to a fixed 700px on
every screen size, with no mobile override. The actual text content
(heading + 2 paragraphs + buttons + phone line) doesn't come close to
filling 700px on mobile, and align-items-center then centers that
short block inside a much taller box — reading as huge empty space
above and below the text. Scale the height down for smaller screens
instead of leaving it fixed. */
@media (max-width: 991.98px) {
.hero-wrap,
.hero-wrap .slider-text {
height: 560px;
}
}
@media (max-width: 575.98px) {
.hero-wrap,
.hero-wrap .slider-text {
height: 520px;
}
}
/* ══ HERO: fix oversized gap between wrapped buttons on mobile ══ */
/* These buttons are inline-block inside a flex row now instead of a
— a
made the body's line-height:1.8 govern the space between
the buttons once they wrapped to separate lines on narrow screens,
producing a much bigger gap than a normal button margin. */
.psk-hero-btns {
gap: 12px;
margin-bottom: 1rem;
}
.psk-hero-btns .btn {
margin: 0;
}
/* ══ HEADER: fix invisible text on "Inquire Now" hover ══ */
/* style.css sets background AND text to the same orange on hover */
.btn.btn-primary:hover {
color: #fff !important;
}
/* ══ HEADER: sticky logo — smooth, non-cropping shrink ══ */
/* style.css only transitions height while scrolled (.psk-scrolled),
so growing back to full size on scroll-up snaps instantly instead of
easing — that instant jump is what reads as the logo getting "cut off".
Also style.css's scrolled state never shrinks the header's own
bottom padding (targets a ".pb-3" class that doesn't exist on this
markup — the header uses "pb-5"), so the box around the logo stays
tall while the image inside it shrinks. Both fixed here. */
.psk-header-wrap .pt-4 img {
transition: height 0.3s ease;
}
.psk-header-wrap.psk-scrolled .pt-4 {
padding-bottom: 8px !important;
}
/* ══ HEADER: compact mobile logo block ══ */
/* style.css's mobile rules (55px logo, 10px padding) were still loose,
and combined with .psk-header-wrap .row{margin:0} (needed to stop
horizontal overflow) plus the header row's own leftover px-3 padding,
the logo sat ~46px from the screen edge — much further in than the
topbar/nav content above and below it, reading as "extra white space
around the logo". px-3 was removed from header.blade.php; this locks
a single, consistent, tighter logo size and padding at all times on
mobile (previously it also toggled 55px<->60px between normal/scrolled
states — a second unwanted "zoom" on top of the flicker already fixed
in psk-services-detail.js). */
@media (max-width: 991px) {
.psk-header-wrap .pt-4 {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.psk-header-wrap .pt-4 img,
.psk-header-wrap.psk-scrolled .pt-4 img {
height: 52px !important;
}
/* Center the logo instead of left-aligned. Bootstrap's grid gives
EVERY .col-* — including .col-md-4 — "width:100%" unconditionally
(only the flex-basis/max-width % is breakpoint-gated), so on
mobile the logo's column is already the row's full width; putting
justify-content:center on the ROW had nothing to distribute and
did nothing. The centering has to go on the column itself, to
center its content (the logo link) within that full-width
column. Scoped to .col-md-4 inside the header's own row so it
can't reach into the services mega menu's grid elsewhere in
.psk-header-wrap. */
.psk-header-wrap .pt-4 .row > .col-md-4 {
justify-content: center;
}
}
/* ══ HEADER: merge logo row + hamburger into one compact row ══ */
/* The logo (header.blade.php) and the hamburger (navbar.blade.php) are
two separate stacked blocks, so on mobile — where the phone/address
info is hidden and the nav links are collapsed — you got a logo row
with empty space to its right, THEN a whole separate near-empty row
below just for the hamburger on the far right. That's the two blank
boxes. Standard mobile pattern is logo-left/hamburger-right on ONE
row. The hamburger is a fixed, known-size element regardless of the
(collapsed, hidden) nav content, so it's pulled out of the navbar's
own flow with absolute positioning and placed into the header row.
.psk-header-wrap is position:sticky, which — like relative/absolute —
establishes the containing block for absolutely positioned
descendants, so this positions against the header+nav wrapper as a
whole. When the menu is opened, #ftco-nav is untouched and still
opens normally in-flow below. */
@media (max-width: 991px) {
#ftco-navbar {
padding: 0 16px !important;
border-bottom: none !important;
}
#ftco-navbar .navbar-toggler {
position: absolute;
top: 8px;
right: 16px;
margin: 0 !important;
z-index: 10;
}
}
/* ══════════════════════════════════════════════════════════
ABOUT PAGE
══════════════════════════════════════════════════════════ */
/* ── Page banner hero (breadcrumbs + title), shared by ~12 pages
(About, Services, Blog, Forms, Track Application, Agent
Registration, etc.) — same fixed-height bug as the home page
hero: style.css hard-codes .hero-wrap-2 to 600px on every screen
size. Different pages put different amounts of content in this
banner — About has just a breadcrumb + heading, Services adds a
whole extra paragraph — so a single fixed height guessed for one
page clips content on another (.hero-wrap also has
overflow:hidden). min-height instead of height lets each page's
banner grow to fit its own content while still collapsing down
from the desktop 600px on mobile. !important because this
element also matches the home page's bare ".hero-wrap"
mobile-height rule earlier in this file — same specificity as
style.css's own ".hero-wrap.hero-wrap-2" rule, so relying on
source order alone to win was fragile. ── */
@media (max-width: 991.98px) {
.hero-wrap.hero-wrap-2,
.hero-wrap.hero-wrap-2 .slider-text {
height: auto !important;
min-height: 220px !important;
}
}
@media (max-width: 575.98px) {
.hero-wrap.hero-wrap-2,
.hero-wrap.hero-wrap-2 .slider-text {
min-height: 200px !important;
}
}
/* ── "Serving People Across Every District" stats section — built
entirely with inline styles sized for desktop (38px heading,
40px stat numbers, 28px/22px card padding, a 2-column stat grid)
with no mobile consideration at all. Scale it down instead of
leaving desktop sizes on a 320-375px screen. ── */
@media (max-width: 767.98px) {
.psk-counter-section h2 {
font-size: 26px !important;
}
.psk-counter-section .psk-stat-grid {
gap: 12px !important;
}
.psk-counter-section .psk-stat-grid > div {
padding: 18px 14px !important;
}
.psk-counter-section .psk-stat-grid .number {
font-size: 28px !important;
}
}
@media (max-width: 420px) {
.psk-counter-section .psk-stat-grid {
grid-template-columns: 1fr !important;
}
}
/* ── Section top/bottom spacing on mobile ── */
/* .ftco-section is shared across every page (style.css: padding:6em 0
i.e. 96px on mobile), and each section's heading block additionally
carries mb-5 pb-2 (~56px) below it — so on a small screen there was
up to ~96px of empty space before a section's heading even starts.
This is a global class, not scoped to the About page, so tightening
it improves every page consistently rather than being a one-page
hack. Desktop sizing (7em / 3em) is untouched.
IMPORTANT: many sections pair .ftco-section with .ftco-no-pt or
.ftco-no-pb specifically to sit flush against a neighboring section
(services.blade.php's filter tabs → category sections, home page's
stacked services/counter/testimonial strips, etc.). The plain
shorthand `padding: 3.5em 0` used here originally set BOTH top and
bottom on every .ftco-section regardless — at equal specificity
and both !important, this file loading after style.css meant it
silently overrode .ftco-no-pt/.ftco-no-pb back to padded, undoing
the "sit flush" intent and reintroducing large gaps between
sections that were deliberately designed to touch. :not() below
skips the property entirely on sections carrying that modifier,
instead of fighting it via specificity. */
@media (max-width: 767.98px) {
.ftco-section:not(.ftco-no-pt) {
padding-top: 3.5em !important;
}
.ftco-section:not(.ftco-no-pb) {
padding-bottom: 3.5em !important;
}
.heading-section.ftco-animate,
.row.justify-content-center.mb-5 {
margin-bottom: 2rem !important;
}
}
/* ── Buttons full-width on mobile, with proper side spacing ── */
/* These CTAs sit alone in their own row/column rather than paired
next to other controls, so full-width reads as a clear primary
action instead of a narrow, awkwardly-placed button. Side spacing
comes from the existing .container/column padding already in
place — not touched here — so this only changes width, not margin. */
@media (max-width: 575.98px) {
.psk-counter-section a[href*="/services"] {
display: flex !important;
width: 100%;
justify-content: center;
}
#ai-assistant-section .psk-ai-notify .btn {
width: 100%;
}
}
/* ── Equal-height feature cards ── */
/* .media.block-6.services cards (Home, About, Track Application,
Agent Registration) sit inside Bootstrap columns which already
stretch to match the tallest column in the row (that's the
flexbox default for .row), but the card div itself was never told
to fill that stretched column height — so with only slightly
different description lengths, cards in the same row end up with
different bottom edges instead of lining up. */
.media.block-6.services {
height: 100%;
}
/* Same issue, different card markup: the About page's "How Punjab
Saathi Works" 4-step cards (.psk-step-card) — step 4's title
wraps to two lines while steps 1-3 are one line, and with no
height propagated down through the wrapper div, that card ends
up visibly taller than its siblings instead of lining up. */
.psk-step-wrap,
.psk-step-card {
height: 100%;
}
/* Full-page "processing" overlay shown while a form (opted in via
data-psk-loading) is submitting — form submissions still POST and
redirect normally, this is purely a visual wait state so users don't
think a slow submission (e.g. file uploads) has failed or frozen.
Backdrop is a blurred, tinted see-through layer (not a flat opaque
fill) so the page stays visible/recognisable behind it — the card
itself is frosted glass, not solid white, to match. */
.psk-form-loader {
position: fixed;
inset: 0;
background: rgba(4, 14, 38, 0.55);
-webkit-backdrop-filter: blur(6px) saturate(120%);
backdrop-filter: blur(6px) saturate(120%);
display: none;
align-items: center;
justify-content: center;
z-index: 99999;
opacity: 0;
transition: opacity 0.25s ease;
}
.psk-form-loader.psk-form-loader--visible {
display: flex;
opacity: 1;
}
.psk-form-loader__box {
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.28);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
border-radius: 18px;
padding: 36px 44px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
max-width: 90%;
animation: psk-form-loader-pop 0.3s ease;
}
/* Fallback for browsers without backdrop-filter support (older Safari/
Firefox): fall back to a solid navy card instead of a near-invisible
14%-opacity box with unreadable white text. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.psk-form-loader__box {
background: #0f2050;
}
}
.psk-form-loader__logo-badge {
background: #ffffff;
border-radius: 999px;
padding: 14px 28px;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
animation: psk-form-loader-breathe 2.2s ease-in-out infinite;
}
.psk-form-loader__logo {
display: block;
width: 128px;
max-width: 52vw;
height: auto;
}
.psk-form-loader__spinner {
width: 46px;
height: 46px;
animation: psk-form-loader-rotate 1s linear infinite;
}
.psk-form-loader__track {
stroke: rgba(255, 255, 255, 0.25);
}
.psk-form-loader__arc {
stroke: #fc5e28;
stroke-linecap: round;
stroke-dasharray: 90, 150;
animation: psk-form-loader-dash 1.4s ease-in-out infinite;
}
.psk-form-loader__text {
margin: 0;
font-weight: 600;
color: #ffffff;
font-size: 0.95rem;
text-align: center;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.psk-form-loader__hint {
margin: -6px 0 0;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.72);
text-align: center;
}
@keyframes psk-form-loader-pop {
0% { opacity: 0; transform: scale(0.94) translateY(6px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes psk-form-loader-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes psk-form-loader-rotate {
100% { transform: rotate(360deg); }
}
@keyframes psk-form-loader-dash {
0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}
/* Decorative motion (entrance pop, logo pulse) is dropped for users who
asked their OS to reduce motion — the spinner keeps turning since it's
the one animation actually communicating "still working", not just
decoration, and removing it would leave no progress feedback at all. */
@media (prefers-reduced-motion: reduce) {
.psk-form-loader__box,
.psk-form-loader__logo-badge {
animation: none;
}
}