/*
* BGPages Premium Motion System
* Shared across all pages via seo_head.php →
* All animations are gated on html.bgp-motion (set by inline script in head).
* Without JS the class is never added, so reveals stay visible.
*/
/* ── Motion design tokens ────────────────────────────────── */
:root {
--motion-fast: 160ms;
--motion-medium: 240ms;
--motion-slow: 520ms;
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--shadow-hover: 0 20px 40px rgba(20, 35, 75, 0.14);
--shadow-card-hover: 0 8px 24px rgba(20, 35, 75, 0.12);
--accent-glow: 0 0 0 3px rgba(59, 130, 246, 0.20);
}
/* ── Scroll reveal — gated on .bgp-motion ────────────────── */
html.bgp-motion .reveal {
opacity: 0;
transform: translateY(22px);
transition:
opacity var(--motion-slow) var(--ease-out),
transform var(--motion-slow) var(--ease-out);
}
html.bgp-motion .reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger siblings inside a reveal-group */
html.bgp-motion .reveal-group > *:nth-child(1) { transition-delay: 60ms; }
html.bgp-motion .reveal-group > *:nth-child(2) { transition-delay: 120ms; }
html.bgp-motion .reveal-group > *:nth-child(3) { transition-delay: 180ms; }
html.bgp-motion .reveal-group > *:nth-child(4) { transition-delay: 240ms; }
html.bgp-motion .reveal-group > *:nth-child(5) { transition-delay: 300ms; }
/* ── Hero above-fold fade-up (CSS keyframes, fires immediately) ── */
@keyframes bgp-fade-up {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
/* Apply only when the page requests hero animation */
html.bgp-motion .hero-animate .home-hero-copy h1,
html.bgp-motion .hero-animate .support-hero-copy h1 {
animation: bgp-fade-up 0.62s var(--ease-out) 80ms both;
}
html.bgp-motion .hero-animate .home-accent-line,
html.bgp-motion .hero-animate .support-accent-line {
animation: bgp-fade-up 0.62s var(--ease-out) 170ms both;
}
html.bgp-motion .hero-animate .home-hero-copy > p,
html.bgp-motion .hero-animate .support-hero-copy > p {
animation: bgp-fade-up 0.62s var(--ease-out) 250ms both;
}
html.bgp-motion .hero-animate .support-inline-checks {
animation: bgp-fade-up 0.60s var(--ease-out) 330ms both;
}
html.bgp-motion .hero-animate .support-cta-row {
animation: bgp-fade-up 0.60s var(--ease-out) 400ms both;
}
html.bgp-motion .hero-animate .home-response-note,
html.bgp-motion .hero-animate .support-response-time {
animation: bgp-fade-up 0.55s var(--ease-out) 460ms both;
}
html.bgp-motion .hero-animate .home-mini-features {
animation: bgp-fade-up 0.55s var(--ease-out) 500ms both;
}
/* Hero sidebar / aside */
html.bgp-motion .hero-animate .home-hero-services,
html.bgp-motion .hero-animate aside.home-hero-services {
animation: bgp-fade-up 0.65s var(--ease-out) 230ms both;
}
/* Hero pills / badges */
html.bgp-motion .hero-animate .support-badges,
html.bgp-motion .hero-animate .home-hero-start {
animation: bgp-fade-up 0.50s var(--ease-out) 30ms both;
}
/* ── Header scroll shadow ─────────────────────────────────── */
.support-topbar {
transition: box-shadow var(--motion-medium) var(--ease-standard);
}
.support-topbar.is-scrolled {
box-shadow: 0 4px 22px rgba(20, 35, 75, 0.11);
}
/* ── Navigation link hover ───────────────────────────────── */
.support-main-nav a {
transition:
transform var(--motion-fast) var(--ease-out),
border-color var(--motion-fast) var(--ease-out),
background var(--motion-fast) var(--ease-out),
box-shadow var(--motion-fast) var(--ease-out);
}
.support-main-nav a:hover {
box-shadow: 0 3px 10px rgba(59, 130, 246, 0.12);
}
/* ── Button improvements ─────────────────────────────────── */
.btn {
transition:
transform var(--motion-medium) var(--ease-out),
box-shadow var(--motion-medium) var(--ease-out),
background var(--motion-medium) var(--ease-out),
border-color var(--motion-medium) var(--ease-out);
}
.btn:active {
transform: translateY(1px) !important;
transition-duration: 80ms !important;
}
.btn-primary:focus-visible {
outline: 3px solid rgba(59, 130, 246, 0.45);
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18), 0 14px 30px rgba(59, 130, 246, 0.32);
}
.btn-secondary:hover {
box-shadow: var(--shadow-card-hover);
}
.btn-secondary:focus-visible {
outline: 3px solid rgba(59, 130, 246, 0.4);
outline-offset: 3px;
}
/* ── Card hover — service, benefit, process, stat ───────── */
.home-service-card,
.support-service-card,
.support-benefit-card,
.support-process-step,
.support-stat-card,
.home-price-card {
transition:
transform var(--motion-medium) var(--ease-out),
box-shadow var(--motion-medium) var(--ease-out),
border-color var(--motion-medium) var(--ease-out);
}
.home-service-card:hover,
.support-service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
border-color: #c4d8f8;
}
.support-benefit-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card-hover);
border-color: #c4d8f8;
}
.support-process-step:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card-hover);
border-color: #cddcf6;
}
.support-stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card-hover);
}
/* Icon wrap tint on card hover */
.home-service-card:hover .icon-wrap,
.support-benefit-card:hover .icon-wrap,
.support-service-card:hover .icon-wrap {
background: #d9eeff;
transition: background var(--motion-medium) var(--ease-standard);
}
/* ── Pricing card hover ──────────────────────────────────── */
.home-price-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}
.home-price-card.featured:hover {
box-shadow:
0 0 0 2px rgba(59, 130, 246, 0.22),
0 22px 44px rgba(59, 130, 246, 0.26);
}
/* Subtle "Препоръчан" badge on featured card */
.home-price-card.featured::before {
content: "Препоръчан";
display: inline-block;
background: var(--gradient, linear-gradient(90deg,#3b82f6,#22c7f2));
color: #fff;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 0.22rem 0.7rem;
border-radius: 999px;
margin-bottom: 0.55rem;
}
/* ── Client card hover (dark band) ──────────────────────── */
.home-client-card {
transition:
transform var(--motion-medium) var(--ease-out),
background var(--motion-medium) var(--ease-out),
border-color var(--motion-medium) var(--ease-out);
}
.home-client-card:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.14);
border-color: rgba(196, 219, 255, 0.42);
}
/* ── Hero sidebar service tile ───────────────────────────── */
.home-service-tile {
transition:
transform var(--motion-medium) var(--ease-out),
box-shadow var(--motion-medium) var(--ease-out),
border-color var(--motion-medium) var(--ease-out);
}
.home-service-tile:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(20, 35, 75, 0.1);
border-color: #b6cff6;
}
/* ── Portfolio card image zoom (portfolio.php) ───────────── */
/* Card already has overflow:hidden + lift transition in page CSS.
We override the transition to use our motion tokens and add
image zoom + overlay on the link wrapper. */
.portfolio-card {
transition:
transform 0.30s var(--ease-out),
box-shadow 0.30s var(--ease-out) !important;
}
.portfolio-card:hover {
transform: translateY(-5px) !important;
box-shadow: var(--shadow-hover) !important;
}
/* Image zoom — the wrapping the ![]()
needs overflow:hidden */
.portfolio-card > a:first-child {
display: block;
overflow: hidden;
border-radius: 22px 22px 0 0;
}
.portfolio-card-img {
transition: transform 0.45s var(--ease-out) !important;
}
.portfolio-card:hover .portfolio-card-img {
transform: scale(1.04);
}
/* ── Form input enhancements ─────────────────────────────── */
.field input,
.field textarea,
.field select {
transition:
border-color var(--motion-medium) var(--ease-standard),
box-shadow var(--motion-medium) var(--ease-standard);
}
/* ── Related / quick links hover ─────────────────────────── */
.support-related-links a,
.support-quick-links a,
.support-links-row a {
transition:
transform var(--motion-fast) var(--ease-out),
border-color var(--motion-fast) var(--ease-out),
background var(--motion-fast) var(--ease-out);
}
.support-related-links a:hover,
.support-quick-links a:hover {
transform: translateY(-1px);
border-color: #b9cef4;
background: #eef4ff;
}
/* ── FAQ chevron (already has transition, keep consistent) ── */
.support-faq-item summary {
transition: background var(--motion-fast) var(--ease-standard);
}
.support-faq-item summary:hover {
background: #f4f8ff;
}
.support-faq-item summary .chevron {
transition: transform var(--motion-medium) var(--ease-out);
}
/* ── Support / prices price cards ────────────────────────── */
.support-price-card,
.support-plan-card,
.support-tier-card,
.support-pricing-card {
transition:
transform var(--motion-medium) var(--ease-out),
box-shadow var(--motion-medium) var(--ease-out),
border-color var(--motion-medium) var(--ease-out);
}
.support-price-card:hover,
.support-plan-card:hover,
.support-tier-card:hover,
.support-pricing-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
border-color: #c0d5f8;
}
/* Featured / recommended badge — prices_bg and poddruzhka */
.support-price-card.is-featured::before,
.support-pricing-card.featured::before {
content: "Препоръчан";
display: inline-block;
background: var(--gradient, linear-gradient(90deg,#3b82f6,#22c7f2));
color: #fff;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 0.22rem 0.7rem;
border-radius: 999px;
margin-bottom: 0.55rem;
}
.support-price-card.is-featured:hover,
.support-pricing-card.featured:hover {
box-shadow:
0 0 0 2px rgba(59, 130, 246, 0.22),
0 22px 44px rgba(59, 130, 246, 0.26);
}
/* Support package item cards */
.support-package-item {
transition:
transform var(--motion-medium) var(--ease-out),
box-shadow var(--motion-medium) var(--ease-out),
border-color var(--motion-medium) var(--ease-out);
}
.support-package-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card-hover);
border-color: #c4d8f8;
}
/* ── Mini-feature tile (hero) ────────────────────────────── */
.home-mini-feature {
transition:
transform var(--motion-fast) var(--ease-out),
border-color var(--motion-fast) var(--ease-out),
background var(--motion-fast) var(--ease-out);
}
.home-mini-feature:hover {
transform: translateY(-2px);
border-color: #b9cef4;
background: rgba(255, 255, 255, 0.95);
}
/* ── Reduced motion — zero out all motion ────────────────── */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
html.bgp-motion .reveal,
html.bgp-motion .reveal.is-visible {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}