/** * Bariq Al Riyadh — Motion & Interaction System * ============================================= * Central home for every animation, transition and scroll-driven behaviour * on the site. Nothing here depends on an external animation library; the * only JS partner is js/bariq-motion.js (IntersectionObserver + a small * rAF-throttled scroll loop). * * Motion philosophy: this is a services company, not a portfolio. Motion * exists to confirm state changes and guide attention — never to perform. * Everything is short, subtle, and skippable. * * Sections: * 1. Motion tokens * 2. Reveal system * 3. Header shell (layout + state machine) * 4. Top bar * 5. Header brand / logo * 6. Desktop navigation * 7. Mobile drawer * 8. Sticky bottom CTA * 9. Buttons * 10. Cards * 11. Icon micro-interactions * 12. FAQ accordion * 13. Forms * 14. Reduced motion */ /* ============================================================ 1. MOTION TOKENS The only durations/easings allowed anywhere in the codebase. Templates must never hardcode a duration. ============================================================ */ :root { --motion-fast: 140ms; --motion-base: 220ms; --motion-medium: 320ms; --motion-slow: 480ms; /* Premium ease-out: fast start, long soft settle. Default for reveals. */ --motion-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Standard: for state toggles that should feel mechanical, not showy. */ --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* Reveal geometry — subtle by design. Never above 24px. */ --motion-reveal-y: 18px; --motion-reveal-scale: .97; /* Stagger: step between siblings, and a hard ceiling so the last card in a long row never leaves the user waiting. */ --motion-stagger-step: 70ms; --motion-stagger-max: 280ms; /* --- Header geometry (drives both layout and the transform states) --- */ --bq-topbar-h: 30px; --bq-header-h: 64px; --bq-header-total-h: calc(var(--bq-topbar-h) + var(--bq-header-h)); /* Drawer */ --bq-drawer-w: 90vw; --bq-drawer-max-w: 360px; /* Off-canvas offset. Positive = parks off the right edge, which is the start side in RTL. Flipped for LTR below so the system is not hardcoded to one direction. */ --bq-drawer-out: 100%; /* Z-index scale — keeps header/drawer/CTA stacking explicit. */ --bq-z-header: 1030; --bq-z-cta: 1035; --bq-z-overlay: 1040; --bq-z-drawer: 1045; } [dir="ltr"] { --bq-drawer-out: -100%; } @media (min-width: 992px) { :root { --bq-topbar-h: 36px; --bq-header-h: 76px; } } /* ============================================================ 2. REVEAL SYSTEM Markup API: data-reveal="fade|up|scale" what kind of entrance data-reveal-delay="120" explicit delay in ms (optional) data-reveal-group auto-stagger direct children The hidden state is only applied when JS is running (`.bq-js` is set by an inline snippet in ), so content is never trapped invisible if the script fails to load. ============================================================ */ .bq-js [data-reveal] { opacity: 0; transition: opacity var(--motion-slow) var(--motion-ease), transform var(--motion-slow) var(--motion-ease); transition-delay: var(--bq-reveal-delay, 0ms); will-change: opacity, transform; } .bq-js [data-reveal="up"] { transform: translate3d(0, var(--motion-reveal-y), 0); } .bq-js [data-reveal="scale"] { transform: scale(var(--motion-reveal-scale)); } .bq-js [data-reveal="fade"] { transform: none; } .bq-js [data-reveal].is-revealed { opacity: 1; transform: none; } /* Once played, drop the compositor hint — keeping will-change on dozens of settled elements wastes memory for no benefit. */ .bq-js [data-reveal].is-revealed { will-change: auto; } /* ============================================================ 3. HEADER SHELL + STATE MACHINE The header is fixed and a spacer reserves its height in flow, so none of its state changes can shift page content (CLS-safe by construction). Every state is expressed as a single `transform` on one element. States (classes live on ): (none) top of page — top bar + header both visible .bq-hdr-compact scrolled past threshold — top bar slid away .bq-hdr-hidden scrolling down — whole header parked off-screen ============================================================ */ .site-header.header-luxe { position: fixed; inset-inline: 0; top: 0; z-index: var(--bq-z-header); transform: translate3d(0, 0, 0); transition: transform var(--motion-medium) var(--motion-ease-standard), box-shadow var(--motion-base) var(--motion-ease-standard), background-color var(--motion-base) var(--motion-ease-standard); will-change: transform; } /* Reserves the header's footprint so the fixed header never overlaps content and never causes a layout shift when its own height changes. */ .bq-header-spacer { height: var(--bq-header-total-h); flex: none; } /* Compact: slide the header up by exactly the top bar's height, so the main bar lands flush at y=0. Only `transform` animates — no layout, no paint of the surrounding page. */ .bq-hdr-compact .site-header.header-luxe { transform: translate3d(0, calc(-1 * var(--bq-topbar-h)), 0); box-shadow: 0 6px 24px rgba(6, 20, 33, .28); } /* Auto-hide on downward scroll. */ .bq-hdr-hidden .site-header.header-luxe { transform: translate3d(0, -100%, 0); } /* Scrolled surface treatment: more solid, slight blur, hairline edge. */ .site-header.header-luxe .header-main { transition: background-color var(--motion-base) var(--motion-ease-standard), backdrop-filter var(--motion-base) var(--motion-ease-standard); } .bq-hdr-compact .site-header.header-luxe .header-main { background: rgba(10, 31, 51, .92); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border-bottom: 1px solid rgba(255, 255, 255, .08); } /* Header must never be hidden while the drawer is open. */ .bq-drawer-open .site-header.header-luxe { transform: translate3d(0, 0, 0); } /* ============================================================ 4. TOP BAR — utility strip only Mobile: ultra compact, a location label and one quick-call affordance. Desktop: location + both phone numbers. ============================================================ */ .header-luxe .header-top { height: var(--bq-topbar-h); min-height: var(--bq-topbar-h); display: flex; align-items: center; background: var(--bq-navy-deep, #0A1F33); border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: .78rem; overflow: hidden; } .header-luxe .header-top-inner { display: flex; /* * `flex-direction` and `flex-wrap` are declared explicitly to override * style.css, which switches this bar to `flex-direction: column` below * 992px. That single legacy rule is what stacked the message and both * phone links into three rows and grew the bar to 155px on a 320px * screen — nearly a quarter of the viewport before any content. * A utility bar is one line or it is not a utility bar. */ flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--bq-s-3, 12px); width: 100%; height: var(--bq-topbar-h); padding: 0; white-space: nowrap; } .header-luxe .header-top-message { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: rgba(255, 255, 255, .72); overflow: hidden; text-overflow: ellipsis; } .header-luxe .header-top-message .dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--bq-teal, #0BB3A4); /* style.css puts a 5px spread shadow on this dot, which reads as a blurry blob at utility-bar scale. */ box-shadow: none; } .header-luxe .header-top-actions { display: inline-flex; align-items: center; gap: var(--bq-s-4, 16px); flex: none; flex-wrap: nowrap; margin-inline-start: 0; } /* * Flattened to plain text links. style.css renders these as bordered pills * (padding + 1px border + background), which measured 31px inside a 30px * bar and overflowed it. In a utility strip this thin, a pill is decoration * that does not fit — the tappable phone affordance is the 46px button in * the main bar below. */ .header-luxe .header-top-link { display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: rgba(255, 255, 255, .82); font-size: .78rem; font-weight: 600; line-height: 1; transition: color var(--motion-fast) var(--motion-ease-standard); } .header-luxe .header-top-link:hover, .header-luxe .header-top-link:focus-visible { color: #fff; } .header-luxe .header-top-link i { font-size: .8rem; color: var(--bq-teal, #0BB3A4); } /* ============================================================ 5. HEADER BRAND / LOGO Sized by height with contain, and the box height is reserved, so swapping in the real horizontal logo cannot shift the header or crop the artwork. ============================================================ */ .header-luxe .header-main { height: var(--bq-header-h); background: var(--bq-navy, #0F2E4A); } .header-luxe .header-main > .container, .header-luxe .main-navbar { height: 100%; } .header-luxe .main-navbar { display: flex; align-items: center; justify-content: space-between; gap: var(--bq-s-3, 12px); padding: 0; flex-wrap: nowrap; } .header-luxe .navbar-brand-wrapper { flex: none; min-width: 0; } .header-luxe .navbar-brand { display: flex !important; align-items: center; max-width: min(62vw, 260px); height: calc(var(--bq-header-h) - 18px); padding: 0; margin: 0; transition: opacity var(--motion-fast) var(--motion-ease-standard); } .header-luxe .navbar-brand:hover { opacity: .88; } /* The logo image fills the reserved box without ever being cropped or stretched. Height is fixed so a slow-loading logo cannot shift layout. */ .header-luxe .navbar-brand .brand-logo, .header-luxe .navbar-brand .custom-logo-link { display: flex; align-items: center; height: 100%; } .header-luxe .navbar-brand img { width: auto; height: 100%; max-height: 100%; max-width: 100%; object-fit: contain; object-position: center; } .brand-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; } .brand-text__name { color: #fff; font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); font-weight: 700; white-space: nowrap; } .brand-text__sub { color: rgba(255, 255, 255, .6); font-size: clamp(.64rem, .6rem + .18vw, .76rem); white-space: nowrap; } /* ============================================================ 6. DESKTOP NAVIGATION ============================================================ */ .bq-nav { display: none; align-items: center; gap: var(--bq-s-5, 24px); margin-inline-start: auto; } @media (min-width: 992px) { .bq-nav { display: flex; } } .bq-nav .main-menu { display: flex; align-items: center; gap: var(--bq-s-2, 8px); margin: 0; padding: 0; list-style: none; } .bq-nav .main-menu > li > a { position: relative; display: inline-flex; align-items: center; padding: 10px 14px; color: rgba(255, 255, 255, .82); font-size: .96rem; font-weight: 600; border-radius: var(--bq-r-sm, 8px); transition: color var(--motion-fast) var(--motion-ease-standard); } .bq-nav .main-menu > li > a:hover, .bq-nav .main-menu > li > a:focus-visible { color: #fff; } /* Underline grows from the centre — one transform, no layout. */ .bq-nav .main-menu > li > a::after { content: ""; position: absolute; inset-inline: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--bq-teal, #0BB3A4); transform: scaleX(0); transform-origin: center; transition: transform var(--motion-base) var(--motion-ease); } .bq-nav .main-menu > li > a:hover::after, .bq-nav .main-menu > li.current-menu-item > a::after { transform: scaleX(1); } .bq-nav .main-menu > li.current-menu-item > a { color: #fff; } .header-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: 0; border-radius: var(--bq-r-pill, 999px); background: var(--bq-wa, #25D366); color: #fff; font-size: .95rem; font-weight: 700; box-shadow: 0 6px 18px rgba(37, 211, 102, .28); transition: transform var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-base) var(--motion-ease-standard), background-color var(--motion-fast) var(--motion-ease-standard); } .header-cta-btn:hover { background: var(--bq-wa-dark, #1EBE5A); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37, 211, 102, .36); } .header-cta-btn:active { transform: translateY(0) scale(.98); } /* ============================================================ 7. MOBILE DRAWER Slides on transform only; width and offsets never animate. ============================================================ */ .bq-burger { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--bq-r-md, 14px); background: rgba(255, 255, 255, .06); cursor: pointer; transition: background-color var(--motion-fast) var(--motion-ease-standard); } .bq-burger:hover { background: rgba(255, 255, 255, .12); } .bq-burger:active { transform: scale(.96); } @media (min-width: 992px) { .bq-burger { display: none; } } .bq-burger__bar { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; transition: transform var(--motion-base) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease-standard); } /* Burger morphs into an X while the drawer is open. */ .bq-drawer-open .bq-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .bq-drawer-open .bq-burger__bar:nth-child(2) { opacity: 0; } .bq-drawer-open .bq-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Quick-call pill sitting next to the burger on mobile. */ .header-phone-mobile { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--bq-r-md, 14px); background: rgba(11, 179, 164, .16); border: 1px solid rgba(11, 179, 164, .3); color: #fff; transition: background-color var(--motion-fast) var(--motion-ease-standard), transform var(--motion-fast) var(--motion-ease-standard); } .header-phone-mobile:hover, .header-phone-mobile:focus-visible { background: rgba(11, 179, 164, .28); color: #fff; } .header-phone-mobile:active { transform: scale(.94); } @media (min-width: 992px) { .header-phone-mobile { display: none; } } .bq-header-actions { display: flex; align-items: center; gap: 10px; flex: none; } @media (min-width: 992px) { .bq-header-actions { display: none; } } /* --- Overlay --- */ .bq-drawer-overlay { position: fixed; inset: 0; z-index: var(--bq-z-overlay); background: rgba(6, 20, 33, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity var(--motion-base) var(--motion-ease-standard), visibility 0s linear var(--motion-base); } .bq-drawer-open .bq-drawer-overlay { opacity: 1; visibility: visible; transition: opacity var(--motion-base) var(--motion-ease-standard), visibility 0s; } /* --- Panel --- */ .bq-drawer { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--bq-z-drawer); display: flex; flex-direction: column; width: var(--bq-drawer-w); max-width: var(--bq-drawer-max-w); background: var(--bq-navy, #0F2E4A); box-shadow: -18px 0 48px rgba(6, 20, 33, .4); transform: translate3d(var(--bq-drawer-out), 0, 0); visibility: hidden; transition: transform var(--motion-medium) var(--motion-ease), visibility 0s linear var(--motion-medium); overscroll-behavior: contain; will-change: transform; } .bq-drawer-open .bq-drawer { transform: translate3d(0, 0, 0); visibility: visible; transition: transform var(--motion-medium) var(--motion-ease), visibility 0s; } @media (min-width: 992px) { .bq-drawer, .bq-drawer-overlay { display: none; } } .bq-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bq-s-3, 12px); padding: var(--bq-s-4, 16px); border-bottom: 1px solid rgba(255, 255, 255, .1); min-height: var(--bq-header-total-h); } .bq-drawer__brand { display: flex; align-items: center; max-height: 44px; } .bq-drawer__brand img { height: 40px; width: auto; object-fit: contain; } .bq-drawer__close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--bq-r-md, 14px); background: transparent; color: #fff; font-size: 1.1rem; cursor: pointer; transition: background-color var(--motion-fast) var(--motion-ease-standard), transform var(--motion-fast) var(--motion-ease-standard); } .bq-drawer__close:hover { background: rgba(255, 255, 255, .1); } .bq-drawer__close:active { transform: scale(.94); } .bq-drawer__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--bq-s-4, 16px) var(--bq-s-4, 16px) var(--bq-s-2, 8px); } .bq-drawer .drawer-menu { margin: 0; padding: 0; list-style: none; } .bq-drawer .drawer-menu li + li { margin-top: 4px; } .bq-drawer .drawer-menu a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 12px 14px; border-radius: var(--bq-r-md, 14px); color: rgba(255, 255, 255, .88); font-size: 1.02rem; font-weight: 600; transition: background-color var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard); } .bq-drawer .drawer-menu a:hover, .bq-drawer .drawer-menu a:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; } .bq-drawer .drawer-menu .current-menu-item > a { background: rgba(11, 179, 164, .16); color: #fff; } .bq-drawer .drawer-menu a::after { content: "\f104"; /* chevron-left — points along the reading direction in RTL */ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .75rem; opacity: .35; transition: transform var(--motion-fast) var(--motion-ease-standard), opacity var(--motion-fast) linear; } [dir="ltr"] .bq-drawer .drawer-menu a::after { content: "\f105"; } .bq-drawer .drawer-menu a:hover::after { opacity: .8; transform: translateX(-3px); } [dir="ltr"] .bq-drawer .drawer-menu a:hover::after { transform: translateX(3px); } /* Menu items fade in with a tiny stagger — capped so the list never feels slow. Driven by an index custom property set in JS. */ .bq-drawer .drawer-menu li { opacity: 0; transform: translateY(6px); transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease); } .bq-drawer-open .bq-drawer .drawer-menu li { opacity: 1; transform: none; transition-delay: calc(var(--bq-i, 0) * 35ms + 80ms); } .bq-drawer__foot { flex: none; display: grid; gap: 10px; padding: var(--bq-s-4, 16px); padding-bottom: calc(var(--bq-s-4, 16px) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .12); } .bq-drawer__foot .bq-btn { width: 100%; } .bq-drawer__note { margin: 4px 0 0; color: rgba(255, 255, 255, .55); font-size: .78rem; text-align: center; } /* Lock the page behind the drawer without the iOS scroll-to-top jump: the body is frozen at its current offset by JS, not just `overflow:hidden`. */ .bq-drawer-open body { overflow: hidden; touch-action: none; } /* ============================================================ 8. STICKY BOTTOM CTA — state machine Hidden by default. JS reveals it only once the hero CTA has left the viewport, and hides it again over the footer CTA, while the drawer is open, or while a form field has focus (so it never covers the keyboard or the field being typed into). ============================================================ */ .bariq-mobile-cta { transform: translate3d(0, 110%, 0); opacity: 0; visibility: hidden; z-index: var(--bq-z-cta); transition: transform var(--motion-medium) var(--motion-ease), opacity var(--motion-base) var(--motion-ease-standard), visibility 0s linear var(--motion-medium); will-change: transform; } .bariq-mobile-cta.is-visible { transform: translate3d(0, 0, 0); opacity: 1; visibility: visible; transition: transform var(--motion-medium) var(--motion-ease), opacity var(--motion-base) var(--motion-ease-standard), visibility 0s; } .bariq-mobile-cta__btn { transition: background-color var(--motion-fast) var(--motion-ease-standard); } /* Touch feedback — mobile has no hover, so the pressed state does the work. */ .bariq-mobile-cta__btn:active { background-image: linear-gradient(rgba(0, 0, 0, .14), rgba(0, 0, 0, .14)); } /* ============================================================ 9. BUTTONS — one interaction system Hover lift is gated behind a real pointer so touch devices don't get a sticky hover state left behind after a tap. ============================================================ */ .bq-btn { transition: transform var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-base) var(--motion-ease-standard), background-color var(--motion-fast) var(--motion-ease-standard), border-color var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard); } /* Reset the blanket lift from bariq.css so the pointer query below owns it. */ .bq-btn:hover { transform: none; } @media (hover: hover) and (pointer: fine) { .bq-btn:hover { transform: translateY(-2px); } } .bq-btn:active { transform: scale(.98); } /* Loading state: the label stays put and the leading icon becomes a spinner, so the button never resizes or moves under the user's finger. */ .bq-btn.is-loading { pointer-events: none; opacity: .85; } .bq-btn.is-loading > i { position: relative; color: transparent; } .bq-btn.is-loading > i::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 1em; height: 1em; margin: -.5em 0 0 -.5em; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: bq-spin 700ms linear infinite; } @keyframes bq-spin { to { transform: rotate(360deg); } } /* ============================================================ 10. CARDS ============================================================ */ .bq-card { transition: transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease); } /* Kill the unconditional hover lift from bariq.css on touch. */ .bq-card--link:hover { transform: none; } @media (hover: hover) and (pointer: fine) { .bq-card--link:hover, .bq-card--link:focus-within { transform: translateY(-4px); } .bq-card--link:hover .bq-card__icon { transform: translateY(-2px) scale(1.04); } } .bq-card__icon { transition: transform var(--motion-base) var(--motion-ease), background-color var(--motion-base) var(--motion-ease-standard); } /* Touch feedback stands in for hover on mobile. */ .bq-card--link:active { transform: scale(.995); } /* ============================================================ 11. ICON MICRO-INTERACTIONS One-shot only. Nothing on this site loops forever. ============================================================ */ .bq-service__cta i, .header-top-link i, .footer-cta-btn i { transition: transform var(--motion-base) var(--motion-ease); } @media (hover: hover) and (pointer: fine) { /* Arrow/chevron nudge along the reading direction. */ .bq-service__cta:hover i { transform: translateX(-3px); } [dir="ltr"] .bq-service__cta:hover i { transform: translateX(3px); } /* Phone gives a single small tilt, never a loop. */ .footer-cta-btn.phone:hover i, .header-top-link:hover .fa-phone-alt { transform: rotate(-12deg); } } /* ============================================================ 12. FAQ ACCORDION Height animates via grid-template-rows (0fr -> 1fr): smooth, and unlike animating `height` it needs no JS measurement and no forced reflow. ============================================================ */ .bq-faq__q i { transition: transform var(--motion-base) var(--motion-ease); } .bq-faq__item.is-open .bq-faq__q i { transform: rotate(180deg); } .bq-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-base) var(--motion-ease); } .bq-faq__item.is-open .bq-faq__a { grid-template-rows: 1fr; } .bq-faq__a > p { overflow: hidden; transition: padding-bottom var(--motion-base) var(--motion-ease); } .bq-faq__q { transition: background-color var(--motion-fast) var(--motion-ease-standard), color var(--motion-fast) var(--motion-ease-standard); } .bq-faq__q:hover { background: var(--bq-surface-alt, #F6F9FB); } /* ============================================================ 13. FORMS ============================================================ */ .bq-input, .bq-select, .bq-textarea { transition: border-color var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-base) var(--motion-ease-standard), background-color var(--motion-fast) var(--motion-ease-standard); } .bq-form-status { transition: opacity var(--motion-base) var(--motion-ease-standard); } /* Inline success confirmation — replaces the old "just a status line" with a state the user can actually recognise as done. */ .bq-form-status.is-success { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--bq-r-md, 14px); background: rgba(37, 211, 102, .12); color: #12793f; font-weight: 700; } .bq-form-status.is-error { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--bq-r-md, 14px); background: rgba(192, 57, 43, .08); } /* Field-level error appears with a short fade — no shake, no bounce. */ .bq-field-error { animation: bq-error-in var(--motion-base) var(--motion-ease) both; } @keyframes bq-error-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ============================================================ 14. REDUCED MOTION Everything below is non-negotiable: no content may depend on animation to become visible or usable. ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* Reveal targets render in their final state immediately. */ .bq-js [data-reveal], .bq-js [data-reveal].is-revealed { opacity: 1 !important; transform: none !important; } .bq-drawer .drawer-menu li { opacity: 1; transform: none; } /* State changes still happen — they just happen instantly. */ .bariq-mobile-cta { transition: none; } /* The spinner is the one exception: a frozen spinner reads as "broken", so it keeps turning, just slower. */ .bq-btn.is-loading > i::after { animation: bq-spin 1.4s linear infinite !important; } }