/* ===================================================================== ORCHID NAILS & SPA — PROFESSIONAL DESIGN POLISH --------------------------------------------------------------------- Lớp polish nâng cấp design chuyên nghiệp đè lên style.css, style_n.css và style-na.css hiện có. KHÔNG sửa HTML — chỉ dùng class sẵn. Load sau cùng trong để thắng specificity. ===================================================================== */ /* ===================================================================== 1. DESIGN TOKENS ===================================================================== */ :root { /* Brand */ --polish-primary: #98609e; --polish-primary-deep: #734478; --polish-primary-soft: #cda2de; --polish-accent: #ecd3ed; --polish-bg: #faf5f9; --polish-text: #734478; /* Glow colors */ --polish-glow-purple: rgba(152, 96, 158, 0.45); --polish-glow-pink: rgba(236, 211, 237, 0.65); --polish-glow-soft: rgba(255, 255, 255, 0.6); --polish-glow-rose: rgba(217, 134, 134, 0.4); --polish-glow-gold: rgba(212, 175, 55, 0.45); /* Multi-layer shadow system (3-depth) — warm purple undertone */ --polish-shadow-xs: 0 1px 2px rgba(115, 68, 120, 0.06); --polish-shadow-sm: 0 2px 4px rgba(115, 68, 120, 0.06), 0 4px 12px rgba(115, 68, 120, 0.08); --polish-shadow-md: 0 4px 8px rgba(115, 68, 120, 0.08), 0 12px 24px rgba(115, 68, 120, 0.10), 0 24px 48px rgba(115, 68, 120, 0.06); --polish-shadow-lg: 0 8px 16px rgba(115, 68, 120, 0.10), 0 24px 48px rgba(115, 68, 120, 0.14), 0 40px 80px rgba(115, 68, 120, 0.08); --polish-shadow-xl: 0 12px 24px rgba(115, 68, 120, 0.12), 0 32px 64px rgba(115, 68, 120, 0.16), 0 56px 112px rgba(115, 68, 120, 0.10); --polish-shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 0 24px var(--polish-glow-pink), 0 8px 32px rgba(115, 68, 120, 0.12); --polish-shadow-ring: 0 0 0 1px rgba(152, 96, 158, 0.18), 0 0 32px var(--polish-glow-purple); /* Text glow */ --polish-text-glow-sm: 0 0 8px rgba(205, 162, 222, 0.5); --polish-text-glow-md: 0 0 12px var(--polish-glow-purple), 0 0 28px var(--polish-glow-pink); --polish-text-glow-lg: 0 0 18px var(--polish-glow-purple), 0 0 38px var(--polish-glow-pink), 0 0 78px rgba(236, 211, 237, 0.4); /* Glass tokens */ --polish-glass-soft: rgba(255, 255, 255, 0.55); --polish-glass-mid: rgba(255, 255, 255, 0.72); --polish-glass-strong: rgba(255, 255, 255, 0.88); --polish-glass-warm: rgba(255, 248, 241, 0.6); --polish-blur-sm: 8px; --polish-blur-md: 16px; --polish-blur-lg: 24px; --polish-blur-xl: 32px; /* Motion */ --polish-ease: cubic-bezier(0.4, 0, 0.2, 1); --polish-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --polish-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --polish-dur-fast: 180ms; --polish-dur: 320ms; --polish-dur-slow: 520ms; /* Radii */ --polish-radius-sm: 12px; --polish-radius-md: 20px; --polish-radius-lg: 28px; --polish-radius-xl: 36px; --polish-radius-pill: 999px; } /* ===================================================================== 1B. GLOBAL SAFETY — prevent any element from creating horizontal scroll ===================================================================== */ html, body { overflow-x: hidden; max-width: 100vw; } @keyframes polish-pulse { /* Elegant ring breathing — no transform, only box-shadow expansion. Tạo cảm giác "tỏa sáng nhẹ" thay vì "phình to" rẻ tiền. */ 0% { box-shadow: 0 0 0 0 rgba(152, 96, 158, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 8px 20px rgba(115, 68, 120, 0.30); } 70% { box-shadow: 0 0 0 14px rgba(152, 96, 158, 0), 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 8px 20px rgba(115, 68, 120, 0.30); } 100% { box-shadow: 0 0 0 0 rgba(152, 96, 158, 0), 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 8px 20px rgba(115, 68, 120, 0.30); } } @keyframes polish-shimmer { 0% { background-position: -200% 50%; } 100% { background-position: 200% 50%; } } @keyframes polish-glow-bloom { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.08); } } @keyframes polish-fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes polish-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes polish-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes polish-spin { to { transform: rotate(360deg); } } @keyframes polish-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* ===================================================================== 3. SCROLL REVEAL (dùng class .polish-reveal + .is-visible) ===================================================================== */ .polish-reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--polish-ease-out), transform 700ms var(--polish-ease-out); will-change: opacity, transform; } .polish-reveal.is-visible { opacity: 1; transform: translateY(0); } .polish-reveal[data-delay="1"] { transition-delay: 80ms; } .polish-reveal[data-delay="2"] { transition-delay: 160ms; } .polish-reveal[data-delay="3"] { transition-delay: 240ms; } .polish-reveal[data-delay="4"] { transition-delay: 320ms; } /* ===================================================================== 4. GLOBAL SECTION TITLES — text glow ===================================================================== */ .hero-title-x, .promotions h2, .aboutv2-title, .blanc-service-title, .blanc-story-title, .blanc-gallery-title { text-shadow: var(--polish-text-glow-sm); transition: text-shadow var(--polish-dur) var(--polish-ease); } .hero-title-x:hover, .promotions h2:hover, .blanc-service-title:hover, .blanc-gallery-title:hover { text-shadow: var(--polish-text-glow-md); } /* Contact-lite title sits on a DARK background image — do NOT use the soft purple text-glow (it becomes cheap magenta). Use white fill + purple stroke + DARK drop shadow for dramatic effect. */ .blanc-contact-lite-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff; -webkit-text-stroke: 2.5px var(--polish-primary); /* Strong dark shadow + purple glow */ text-shadow: 0 4px 12px rgba(0, 0, 0, 0.75), 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 32px rgba(152, 96, 158, 0.5); letter-spacing: 2px !important; transition: letter-spacing var(--polish-dur) var(--polish-ease), text-shadow var(--polish-dur) var(--polish-ease); /* Triple drop-shadow for dramatic dark effect */ filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 16px rgba(115, 68, 120, 0.4)); } .blanc-contact-lite-title:hover { letter-spacing: 2.5px !important; -webkit-text-stroke: 2.5px var(--polish-primary-soft); text-shadow: 0 4px 12px rgba(0, 0, 0, 0.75), 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 40px rgba(205, 162, 222, 0.75); } /* Subtitle on dark contact bg — keep readable, no glow */ .blanc-contact-lite-sub { color: rgba(255, 255, 255, 0.92) !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } .hero-title-x.brand, .blanc-title-brand { text-shadow: var(--polish-text-glow-md); background: linear-gradient( 135deg, var(--polish-primary) 0%, var(--polish-primary-soft) 50%, var(--polish-primary) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; background-size: 200% 200%; animation: polish-shimmer 8s linear infinite; } /* Brand text script (Great Vibes) gets soft glow only — gradient clip breaks thin script fonts. */ .brand, .hero-title-x.brand { -webkit-text-fill-color: initial; background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--polish-primary); text-shadow: var(--polish-text-glow-md); } /* ===================================================================== 5. NAVBAR — glassmorphism depth + glow ===================================================================== */ .nav-blanc-wrap.nav-top-x, .nav-blanc-wrap.nav-scroll-x { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.62) 100% ) !important; -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 8px 24px rgba(115, 68, 120, 0.08), 0 24px 60px rgba(115, 68, 120, 0.04); } .nav-blanc-wrap.nav-scroll-x { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 12px 32px rgba(115, 68, 120, 0.10), 0 32px 80px rgba(115, 68, 120, 0.06); } .nav-blanc-wrap.nav-scroll-x::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient( 90deg, transparent 0%, var(--polish-glow-purple) 50%, transparent 100% ); pointer-events: none; } .logo-blanc img { filter: drop-shadow(0 4px 12px rgba(152, 96, 158, 0.25)); transition: transform var(--polish-dur) var(--polish-ease-out); } .logo-blanc img:hover { transform: scale(1.04); } .icon-blanc { position: relative; background: var(--polish-glass-soft); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset, 0 2px 6px rgba(115, 68, 120, 0.08); transition: all var(--polish-dur) var(--polish-ease); } .icon-blanc:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 0 0 1px var(--polish-primary) inset, 0 0 18px var(--polish-glow-purple), 0 6px 16px rgba(115, 68, 120, 0.20); color: var(--polish-primary); background: var(--polish-glass-strong); } /* Menu links with animated underline */ .rd-nav-link { position: relative; transition: color var(--polish-dur) var(--polish-ease); } .rd-nav-link::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 0; height: 2px; border-radius: 2px; background: linear-gradient( 90deg, var(--polish-primary) 0%, var(--polish-primary-soft) 100% ); box-shadow: 0 0 12px var(--polish-glow-purple); transition: all var(--polish-dur) var(--polish-ease-out); transform: translateX(-50%); } .rd-nav-link:hover::after, .rd-nav-item.active .rd-nav-link::after { width: 100%; } /* ===================================================================== 6. BUTTONS — universal polish (gradient + lift + glow) ===================================================================== */ .btn-nav-blanc, .blanc-contact-lite-btn, .blanc-gallery-btn, .blanc-choose-btn, .button-default-outline, #continue-booking-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; letter-spacing: 0.4px; background: linear-gradient( 135deg, var(--polish-primary) 0%, var(--polish-primary-soft) 100% ); color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 6px 14px rgba(115, 68, 120, 0.22), 0 12px 28px rgba(115, 68, 120, 0.14); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); transition: transform var(--polish-dur) var(--polish-ease-out), box-shadow var(--polish-dur) var(--polish-ease-out), background var(--polish-dur) var(--polish-ease); overflow: hidden; isolation: isolate; } .btn-nav-blanc::before, .blanc-contact-lite-btn::before, .blanc-gallery-btn::before, .blanc-choose-btn::before, .button-default-outline::before, #continue-booking-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70% ); background-size: 200% 100%; background-position: 100% 0; opacity: 0; transition: opacity var(--polish-dur) var(--polish-ease); pointer-events: none; z-index: -1; } .btn-nav-blanc:hover, .blanc-contact-lite-btn:hover, .blanc-gallery-btn:hover, .blanc-choose-btn:hover, .button-default-outline:hover, #continue-booking-btn:hover { transform: translateY(-2px); background: linear-gradient( 135deg, var(--polish-primary-deep) 0%, var(--polish-primary) 100% ); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 0 0 4px rgba(152, 96, 158, 0.18), 0 0 32px var(--polish-glow-purple), 0 12px 24px rgba(115, 68, 120, 0.30), 0 24px 48px rgba(115, 68, 120, 0.20); color: #ffffff !important; } .btn-nav-blanc:hover::before, .blanc-contact-lite-btn:hover::before, .blanc-gallery-btn:hover::before, .blanc-choose-btn:hover::before, .button-default-outline:hover::before, #continue-booking-btn:hover::before { opacity: 1; animation: polish-shimmer 1.4s var(--polish-ease) infinite; } .btn-nav-blanc:active, .blanc-contact-lite-btn:active, .blanc-gallery-btn:active, .blanc-choose-btn:active, .button-default-outline:active, #continue-booking-btn:active { transform: translateY(0); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset, inset 0 2px 6px rgba(0, 0, 0, 0.18); } /* Disabled state */ #continue-booking-btn:disabled, .btn[disabled] { background: linear-gradient( 135deg, rgba(152, 96, 158, 0.4) 0%, rgba(205, 162, 222, 0.4) 100% ) !important; color: rgba(255, 255, 255, 0.75) !important; cursor: not-allowed; filter: grayscale(0.4); box-shadow: var(--polish-shadow-sm) !important; transform: none !important; } /* ===================================================================== 7. HERO — premium glass card with elegant typography hierarchy --------------------------------------------------------------------- Layered design: - Mesh-gradient bloom (2 colors) trên background - Glassmorphism card 3 lớp (white outer + lavender glow + inner highlight) - 3-tier typography: ✦ WELCOME TO ✦ → script brand name → italic slogan - 3 info blocks với vertical diamond dividers ===================================================================== */ .hero-slider-x { min-height: 640px !important; } .hero-slider-x::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient( ellipse 70% 60% at 15% 25%, rgba(236, 211, 237, 0.55) 0%, transparent 60% ), radial-gradient( ellipse 65% 60% at 85% 75%, rgba(152, 96, 158, 0.45) 0%, transparent 60% ), radial-gradient( ellipse 50% 40% at 50% 50%, rgba(255, 255, 255, 0.18) 0%, transparent 70% ); pointer-events: none; animation: polish-glow-bloom 14s var(--polish-ease) infinite; mix-blend-mode: screen; } .hero-overlay-x { position: relative; padding-top: 30px; padding-bottom: 30px; } .hero-overlay-x::after { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient( ellipse 80% 70% at 50% 50%, transparent 0%, rgba(45, 25, 50, 0.18) 60%, rgba(45, 25, 50, 0.42) 100% ); pointer-events: none; } /* ---- THE GLASS CARD ---- */ .hero-card-x { position: relative; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.92) 0%, rgba(250, 245, 249, 0.82) 50%, rgba(255, 248, 252, 0.88) 100% ) !important; -webkit-backdrop-filter: saturate(1.8) blur(28px) !important; backdrop-filter: saturate(1.8) blur(28px) !important; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 32px !important; padding: 64px 56px 48px !important; max-width: 760px !important; width: min(92%, 760px); text-align: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7) inset, 0 0 0 4px rgba(255, 255, 255, 0.18), 0 0 0 6px rgba(152, 96, 158, 0.08), 0 12px 32px rgba(115, 68, 120, 0.18), 0 32px 80px rgba(115, 68, 120, 0.14), 0 0 64px var(--polish-glow-pink), 0 0 32px var(--polish-glow-purple) !important; transition: transform 700ms var(--polish-ease-out); overflow: visible; } .hero-card-x::before { /* Top decorative ribbon — uppercase micro tagline */ content: "✦ Welcome to ✦"; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); padding: 6px 22px; background: linear-gradient( 135deg, var(--polish-primary) 0%, var(--polish-primary-deep) 100% ); color: #ffffff; font-family: 'Cinzel', 'Times New Roman', serif; font-size: 11px; font-weight: 600; letter-spacing: 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 4px 12px rgba(115, 68, 120, 0.30), 0 0 24px var(--polish-glow-purple); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); white-space: nowrap; z-index: 5; } .hero-card-x::after { /* Bottom decorative line + diamond */ content: ""; position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); width: 220px; height: 1px; background: linear-gradient( 90deg, transparent 0%, var(--polish-primary) 50%, transparent 100% ); box-shadow: 0 0 12px var(--polish-glow-purple); opacity: 0.7; } .hero-card-x:hover { transform: translateY(-6px); } /* ---- H1 TITLE — script font (Great Vibes) when has .brand ---- */ .hero-title-x.brand { font-family: 'Great Vibes', 'Alex Brush', cursive !important; font-size: clamp(2.4rem, 5vw, 3.6rem) !important; font-weight: 400 !important; font-style: italic; line-height: 1.45 !important; letter-spacing: 1px !important; text-transform: none !important; margin: 32px 0 8px !important; padding-top: 10px; max-width: 100%; word-break: break-word; background: linear-gradient( 135deg, var(--polish-primary) 0%, var(--polish-primary-soft) 45%, var(--polish-primary) 90% ); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: polish-shimmer 8s var(--polish-ease) infinite; text-shadow: 0 0 32px var(--polish-glow-purple), 0 0 64px var(--polish-glow-pink); filter: drop-shadow(0 4px 12px rgba(115, 68, 120, 0.20)); position: relative; display: block; } /* Script accent — "BLANC" needs a subtle underline flourish */ .hero-title-x.brand::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -8px; height: 2px; background: linear-gradient( 90deg, transparent 0%, var(--polish-primary) 50%, transparent 100% ); box-shadow: 0 0 12px var(--polish-glow-purple); border-radius: 2px; } /* H1 TITLE — non-brand (display) */ .hero-title-x:not(.brand) { font-family: 'Cinzel', 'Times New Roman', serif !important; font-size: clamp(2rem, 4vw, 3.2rem) !important; font-weight: 400 !important; letter-spacing: 10px !important; text-transform: uppercase !important; line-height: 1.2 !important; color: var(--polish-primary) !important; text-shadow: 0 0 24px var(--polish-glow-purple), 0 0 48px var(--polish-glow-pink); margin: 28px 0 6px !important; -webkit-text-fill-color: var(--polish-primary); } /* ---- SUBTITLE (slogan) — proper elegant italic serif ---- Use Playfair Display italic — a proper elegant serif, not script. Title uses stylized script (Great Vibes); subtitle gets a refined editorial italic that reads cleanly at any size. Display: block + text-align: center + inline ✦ decorations ensures the text can NEVER be truncated — it always wraps within the card. */ .hero-sub-x { font-family: 'Playfair Display', 'Cormorant Garamond', 'Times New Roman', serif !important; font-size: clamp(1.05rem, 1.4vw, 1.3rem) !important; color: var(--polish-primary-deep) !important; font-style: italic; font-weight: 500; letter-spacing: 3px !important; text-transform: lowercase !important; margin-top: 6px !important; margin-bottom: 0 !important; padding: 0 8px; text-shadow: 0 0 10px var(--polish-glow-pink), 0 1px 2px rgba(255, 255, 255, 0.8); line-height: 1.4 !important; display: block; max-width: 100%; text-align: center; word-break: break-word; } /* ✦ decorations rendered as INLINE text — never absolute, never clipped */ .hero-sub-x::before { content: "✦ "; color: var(--polish-primary-soft); font-family: 'Cinzel', 'Times New Roman', serif; font-style: normal; font-size: 11px; text-shadow: 0 0 8px var(--polish-glow-purple); letter-spacing: 0; } .hero-sub-x::after { content: " ✦"; color: var(--polish-primary-soft); font-family: 'Cinzel', 'Times New Roman', serif; font-style: normal; font-size: 11px; text-shadow: 0 0 8px var(--polish-glow-purple); letter-spacing: 0; } /* Default slogan for empty .hero-sub-auto — override BEFORE pseudo. Note: the leading ✦ is intentionally omitted here — the base .hero-sub-x::before rule already provides a small Cinzel ✦, and the ::after rule provides a matching trailing ✦. Re-adding one here would make the leading icon look bigger / italic / different color than the trailing one. Just supply the slogan text. */ .hero-sub-x.hero-sub-auto::before { content: "✦ Refined Nail Artistry & Spa ✦"; position: static; transform: none; color: var(--polish-primary-soft); font-family: 'Cinzel', 'Times New Roman', serif; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; text-shadow: 0 0 8px var(--polish-glow-purple); padding: 0; } /* Hide the trailing ✦ for the auto slogan — it's already in the content above */ .hero-sub-x.hero-sub-auto::after { content: none; } .hero-sub-x.hero-sub-auto { text-align: center; } /* ---- 3 INFO BLOCKS — elegant grid with diamond dividers ---- */ .hero-info-x { margin-top: 40px !important; display: flex !important; justify-content: center; align-items: stretch; gap: 0 !important; flex-wrap: wrap; } /* Target all three blocks: first/third have .hero-info-block-x, second is plain div */ .hero-info-block-x, .hero-info-x > div { position: relative; flex: 1 1 0; min-width: 170px; max-width: 220px; padding: 20px 18px 18px !important; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.55) 0%, rgba(250, 245, 249, 0.45) 100% ); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 22px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 4px 14px rgba(115, 68, 120, 0.10), 0 0 24px rgba(236, 211, 237, 0.25); transition: transform 320ms var(--polish-ease), box-shadow 320ms var(--polish-ease), background 320ms var(--polish-ease); text-align: center; margin: 0 10px; } .hero-info-block-x:hover, .hero-info-x > div:hover { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.78) 0%, rgba(250, 245, 249, 0.68) 100% ); transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 12px 28px rgba(115, 68, 120, 0.18), 0 0 40px var(--polish-glow-pink); } /* Vertical diamond dividers between blocks */ .hero-info-block-x + div::before, .hero-info-x > div + .hero-info-block-x::before { content: "✦"; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); color: var(--polish-primary-soft); font-size: 14px; text-shadow: 0 0 12px var(--polish-glow-purple); z-index: 2; } /* Info block label (h5) */ .hero-info-block-x h5, .hero-info-x > div h5 { display: block; font-family: 'Cinzel', 'Times New Roman', serif !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 4px !important; text-transform: uppercase; color: var(--polish-primary) !important; margin: 0 0 10px !important; text-shadow: 0 0 8px var(--polish-glow-purple), 0 1px 1px rgba(255, 255, 255, 0.8); position: relative; padding-bottom: 8px; } .hero-info-block-x h5::after, .hero-info-x > div h5::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 1px; background: linear-gradient( 90deg, transparent 0%, var(--polish-primary-soft) 50%, transparent 100% ); } /* Info block content (p) */ .hero-info-block-x p, .hero-info-x > div p { margin: 0 !important; color: var(--polish-text) !important; font-size: 0.95rem !important; line-height: 1.55 !important; font-weight: 500; } .hero-info-link-x { color: inherit !important; text-decoration: none !important; transition: color 280ms var(--polish-ease); } .hero-info-link-x:hover { color: var(--polish-primary-deep) !important; text-shadow: 0 0 8px var(--polish-glow-purple); } /* ===================================================================== 8. PROMOTIONS — glass strip with shimmer ===================================================================== */ .promotions { background: linear-gradient( 180deg, rgba(250, 245, 249, 1) 0%, rgba(245, 235, 240, 1) 100% ) !important; position: relative; overflow: hidden; } .promotions::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 50% 50%, var(--polish-glow-pink) 0%, transparent 60% ); opacity: 0.6; pointer-events: none; animation: polish-glow-bloom 8s var(--polish-ease) infinite; } .promotions > * { position: relative; z-index: 1; } .promotions .divider-lg { background: linear-gradient( 90deg, transparent 0%, var(--polish-primary) 50%, transparent 100% ) !important; height: 2px !important; box-shadow: 0 0 16px var(--polish-glow-purple); position: relative; overflow: visible; } .promotionSwiper { padding: 24px 16px !important; background: var(--polish-glass-warm); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--polish-radius-pill); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45) inset, 0 8px 20px rgba(115, 68, 120, 0.10), 0 0 32px var(--polish-glow-pink); position: relative; overflow: hidden; } .promotionSwiper::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70% ); background-size: 200% 100%; animation: polish-shimmer 6s linear infinite; pointer-events: none; z-index: 0; } .promotionSwiper > * { position: relative; z-index: 1; } /* ===================================================================== 9. ABOUT — image frame glow ===================================================================== */ .aboutv2 { position: relative; } .aboutv2::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 70% 60% at 90% 50%, var(--polish-glow-pink) 0%, transparent 65% ); pointer-events: none; z-index: 1; animation: polish-glow-bloom 14s var(--polish-ease) infinite; } .aboutv2-wrapper > * { position: relative; z-index: 2; } .aboutv2-img, .blanc-team-photo-wrap { position: relative; transition: all var(--polish-dur-slow) var(--polish-ease-out); box-shadow: var(--polish-shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.4) inset; /* Disable hover scale which can cause weird "jumpy" feel on text selection */ } .aboutv2-img:hover, .blanc-team-photo-wrap:hover { transform: translateY(-4px); /* Gentle lift only, no scale */ box-shadow: var(--polish-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 24px var(--polish-glow-purple); } /* Removed the ::after gradient overlay — it created a "weird shimmer" effect on text selection / hover. The image's natural lighting is now visible without artificial overlays. */ .aboutv2-img::after, .blanc-team-photo-wrap::after { content: none; } .aboutv2-title { text-shadow: var(--polish-text-glow-sm); } .aboutv2-right img { box-shadow: var(--polish-shadow-md); transition: all var(--polish-dur-slow) var(--polish-ease-out); } .aboutv2-right img:hover { transform: translateY(-6px); box-shadow: var(--polish-shadow-xl), 0 0 48px var(--polish-glow-pink); } /* ===================================================================== 10. SERVICES — multi-layer shadow + lift + glow ===================================================================== */ .blanc-service-zone { position: relative; } .blanc-service-zone::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 65% 55% at 15% 45%, var(--polish-glow-pink) 0%, transparent 65% ); pointer-events: none; z-index: 1; animation: polish-glow-bloom 16s var(--polish-ease) infinite; } .blanc-service-zone::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 65% 55% at 85% 70%, var(--polish-glow-purple) 0%, transparent 65% ); pointer-events: none; z-index: 1; animation: polish-glow-bloom 18s var(--polish-ease) infinite reverse; } .blanc-service-shell > * { position: relative; z-index: 2; } .blanc-service-card { position: relative; background: var(--polish-glass-strong) !important; -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.65) !important; border-radius: var(--polish-radius-md) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, var(--polish-shadow-md) !important; transition: transform var(--polish-dur-slow) var(--polish-ease-out), box-shadow var(--polish-dur-slow) var(--polish-ease-out) !important; isolation: isolate; overflow: visible !important; } .blanc-service-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient( 135deg, rgba(152, 96, 158, 0.4) 0%, transparent 50%, rgba(236, 211, 237, 0.4) 100% ); z-index: -1; opacity: 0; transition: opacity var(--polish-dur-slow) var(--polish-ease); pointer-events: none; } .blanc-service-card:hover { transform: translateY(-10px) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 0 0 6px rgba(255, 255, 255, 0.2), 0 16px 32px rgba(115, 68, 120, 0.18), 0 32px 64px rgba(115, 68, 120, 0.16), 0 0 64px var(--polish-glow-purple) !important; } .blanc-service-card:hover::before { opacity: 1; } .blanc-service-photo { border-top-left-radius: var(--polish-radius-md) !important; border-top-right-radius: var(--polish-radius-md) !important; position: relative; } .blanc-service-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 0%, transparent 50%, rgba(115, 68, 120, 0.25) 100% ); pointer-events: none; transition: opacity var(--polish-dur) var(--polish-ease); } .blanc-service-photo img { transition: transform var(--polish-dur-slow) var(--polish-ease-out); } .blanc-service-card:hover .blanc-service-photo img { transform: scale(1.08); } .blanc-service-card-title { text-shadow: var(--polish-text-glow-sm); transition: text-shadow var(--polish-dur) var(--polish-ease); } .blanc-service-card:hover .blanc-service-card-title { text-shadow: var(--polish-text-glow-md); } /* ===================================================================== 11. STORY / TEAM / VALUES — flip cards depth ===================================================================== */ .blanc-story-zone { position: relative; } .blanc-story-zone::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 65% 55% at 90% 50%, var(--polish-glow-purple) 0%, transparent 65% ); pointer-events: none; z-index: 1; animation: polish-glow-bloom 14s var(--polish-ease) infinite; } .blanc-story-shell > * { position: relative; z-index: 2; } .blanc-team-photo-wrap { border-radius: 110px 24px 110px 24px !important; } .blanc-flip-value { transition: transform var(--polish-dur-slow) var(--polish-ease-out); min-height: 300px; height: auto; } .blanc-flip-value:hover { transform: translateY(-6px); } .blanc-flip-value-inner { transition: transform 1s var(--polish-ease-out) !important; height: auto !important; min-height: 300px; } .blanc-flip-face { border-radius: 26px !important; border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, var(--polish-shadow-md) !important; transition: box-shadow var(--polish-dur-slow) var(--polish-ease-out); } .blanc-flip-value:hover .blanc-flip-face { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, var(--polish-shadow-xl), 0 0 48px var(--polish-glow-pink) !important; } .blanc-flip-front { background: linear-gradient( 135deg, rgba(217, 206, 194, 0.9) 0%, rgba(189, 177, 196, 0.9) 100% ) !important; } .blanc-flip-overlay { background: linear-gradient( 180deg, rgba(75, 38, 80, 0.30) 0%, rgba(115, 68, 120, 0.70) 100% ) !important; transition: opacity var(--polish-dur) var(--polish-ease); } .blanc-flip-value:hover .blanc-flip-overlay { opacity: 0.8; } .blanc-flip-title { /* Elegant serif headline to match the purple theme. Sizes are deliberately conservative — long words like "Professionalism" must still fit inside the card without overflowing on any common viewport. */ font-family: 'Cinzel', 'Playfair Display', 'Times New Roman', serif !important; font-size: clamp(0.95rem, 1.3vw, 1.35rem) !important; font-weight: 600 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; line-height: 1.25 !important; color: #ffffff !important; /* Layered purple glow + soft shadow for depth on light/dark imagery */ text-shadow: 0 2px 6px rgba(60, 30, 70, 0.55), 0 0 14px var(--polish-glow-purple), 0 0 28px var(--polish-glow-pink); /* Decorative line under the title — uses ::after */ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 12px; text-align: center; z-index: 2; /* Wrap long words instead of overflowing the card */ word-break: break-word; overflow-wrap: anywhere; hyphens: auto; max-width: 100%; transition: text-shadow var(--polish-dur) var(--polish-ease), transform var(--polish-dur) var(--polish-ease), letter-spacing var(--polish-dur) var(--polish-ease); } .blanc-flip-title::after { content: ""; display: block; width: 42px; height: 1px; margin: 10px auto 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.85) 30%, var(--polish-primary-soft) 50%, rgba(255, 255, 255, 0.85) 70%, transparent 100% ); box-shadow: 0 0 10px var(--polish-glow-purple); opacity: 0.9; transition: width var(--polish-dur) var(--polish-ease), opacity var(--polish-dur) var(--polish-ease); } .blanc-flip-value:hover .blanc-flip-title { letter-spacing: 2.5px !important; text-shadow: 0 2px 8px rgba(60, 30, 70, 0.65), 0 0 22px var(--polish-glow-pink), 0 0 40px var(--polish-glow-purple); } .blanc-flip-value:hover .blanc-flip-title::after { width: 64px; opacity: 1; } /* Mobile: drop letter-spacing further on very narrow cards */ @media (max-width: 480px) { .blanc-flip-title { letter-spacing: 1px !important; font-size: clamp(0.85rem, 3.2vw, 1.05rem) !important; padding: 10px 8px; } .blanc-flip-title::after { width: 32px; margin-top: 8px; } .blanc-flip-value:hover .blanc-flip-title { letter-spacing: 1.5px !important; } } .blanc-flip-back { background: linear-gradient( 135deg, var(--polish-primary) 0%, var(--polish-primary-deep) 50%, var(--polish-primary) 100% ) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 0 0 6px rgba(255, 255, 255, 0.18), 0 12px 32px rgba(115, 68, 120, 0.30), 0 0 48px var(--polish-glow-purple) !important; color: #ffffff !important; position: absolute; inset: 0; /* Card grows to fit content — no fixed height clip */ height: auto !important; min-height: 260px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .blanc-flip-back::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 30% 0%, var(--polish-glow-pink) 0%, transparent 40% ), radial-gradient( circle at 100% 100%, rgba(255, 255, 255, 0.10) 0%, transparent 40% ); pointer-events: none; opacity: 0.30; /* Subtler than 0.45 — less bright */ z-index: 0; } .blanc-flip-back-inner { position: relative; z-index: 2; /* Above the ::before overlay */ color: #ffffff !important; padding: 24px 22px !important; width: 100% !important; box-sizing: border-box; text-align: center; display: block; /* Allow content to flow naturally */ } .blanc-flip-back-inner p { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); font-size: 0.88rem !important; line-height: 1.55 !important; margin: 0 !important; max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; } .blanc-values-title { text-shadow: var(--polish-text-glow-sm); } /* ===================================================================== 12. TESTIMONIALS — polished Google-style review cards /* ===================================================================== 12B. TESTIMONIALS SECTION — bigger title + tighter gaps ===================================================================== */ /* Section spacing — reduce top/bottom padding to tighten the layout */ .parallax-container { padding: 70px 0 !important; } .parallax-content { padding-top: 0 !important; padding-bottom: 0 !important; } .parallax-content .container { padding-top: 0 !important; padding-bottom: 0 !important; } /* Bigger title — TESTIMONIALS */ .blanc-story-title.blanc-story-title-center { font-size: clamp(2rem, 5vw, 2.6rem) !important; font-weight: 700 !important; letter-spacing: 1.5px !important; margin: 0 0 14px !important; line-height: 1.2 !important; } /* Subtitle — reduce gap above and below */ .blanc-story-text { margin: 0 auto 22px !important; max-width: 720px; line-height: 1.55; font-size: 1rem; } /* Divider line — keep but reduce spacing */ .blanc-story-text + .divider-lg { margin: 0 auto 24px !important; height: 2px !important; width: 100px !important; } /* Carousel container — reduce padding from section */ .owl-carousel#testimonials { margin-top: 4px !important; } /* On mobile — even tighter */ @media (max-width: 768px) { .parallax-container { padding: 50px 0 !important; } .blanc-story-title.blanc-story-title-center { font-size: 1.85rem !important; margin: 0 0 12px !important; } .blanc-story-text { margin: 0 auto 16px !important; font-size: 0.95rem; } .blanc-story-text + .divider-lg { margin: 0 auto 18px !important; } } /* ---------- CAROUSEL CARDS (existing rules continue below) ---------- */ .testimonial-card, .owl-carousel .item .testimonial-card, .owl-item .testimonial-card, .parallax-container .testimonial-card { position: relative; /* Override legacy curved-shape styling from style.css */ background: linear-gradient( 180deg, rgba(255, 255, 255, 0.96) 0%, rgba(252, 246, 252, 0.96) 100% ) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; backdrop-filter: blur(18px) saturate(1.4) !important; border: 1px solid rgba(205, 162, 222, 0.35) !important; border-top-left-radius: var(--polish-radius-lg) !important; border-top-right-radius: var(--polish-radius-lg) !important; border-bottom-left-radius: var(--polish-radius-lg) !important; border-bottom-right-radius: var(--polish-radius-lg) !important; padding: 32px 26px 28px !important; margin: 12px !important; min-height: 320px !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 4px 12px rgba(115, 68, 120, 0.08), 0 12px 32px rgba(115, 68, 120, 0.10), 0 0 0 1px rgba(205, 162, 222, 0.10) !important; transition: transform var(--polish-dur-slow) var(--polish-ease-out), box-shadow var(--polish-dur-slow) var(--polish-ease-out), border-color var(--polish-dur) var(--polish-ease) !important; overflow: visible !important; display: flex !important; flex-direction: column; } .testimonial-card:hover { transform: translateY(-6px) !important; border-color: rgba(205, 162, 222, 0.6) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7) inset, 0 12px 24px rgba(115, 68, 120, 0.14), 0 24px 56px rgba(115, 68, 120, 0.18), 0 0 48px var(--polish-glow-pink) !important; } /* Large opening quote — subtle, behind content */ .testimonial-card::before { content: "“" !important; position: absolute !important; top: -4px !important; right: 22px !important; left: auto !important; font-family: "Playfair Display", "Times New Roman", serif !important; font-style: italic; font-weight: 700; font-size: 120px !important; line-height: 1 !important; color: var(--polish-primary-soft) !important; opacity: 0.18 !important; text-shadow: none !important; pointer-events: none !important; z-index: 0 !important; height: auto !important; } /* ---- Top section: avatar + name + stars + source ---- */ .review-card-top { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 14px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(205, 162, 222, 0.22); } .review-avatar-wrap { position: relative; flex: 0 0 auto; } .review-avatar-initial { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 600; font-size: 1.05rem; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); border: 2px solid #ffffff; box-shadow: 0 0 0 1px rgba(205, 162, 222, 0.4), 0 4px 10px rgba(115, 68, 120, 0.18); } .review-google-badge { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04); } .review-google-badge svg { display: block; width: 14px; height: 14px; } .review-meta { flex: 1 1 auto; min-width: 0; text-align: left; } .review-name, .testimonial-card .testimonial-name.review-name { margin: 0 0 4px !important; font-family: 'Cinzel', 'Playfair Display', 'Times New Roman', serif !important; font-size: 0.95rem !important; font-weight: 600 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; color: var(--polish-primary-deep) !important; line-height: 1.25 !important; /* Truncate excessively long names gracefully */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .review-stars { display: inline-flex; gap: 2px; color: #fbbc04; /* Google star gold */ font-size: 14px; line-height: 1; margin-bottom: 4px; text-shadow: 0 0 8px rgba(251, 188, 4, 0.35); } .review-source { display: block; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; font-size: 0.72rem; color: rgba(115, 68, 120, 0.65); letter-spacing: 0.3px; font-style: italic; } /* ---- Review body ---- */ .testimonial-card .testimonial-content.review-content, .review-content { position: relative; z-index: 1; margin: 0 !important; font-family: 'Playfair Display', 'Cormorant Garamond', 'Times New Roman', serif !important; font-size: 0.95rem !important; line-height: 1.65 !important; color: var(--polish-text) !important; font-style: italic; text-align: left; /* Clamp very long reviews so card heights stay aligned in the carousel */ display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; } /* Legacy avatar (img.testimonial-img) — hide if present, keep gradient border for any non-review variants */ .testimonial-card .testimonial-img { display: none; } .testimonial-card img:not(.testimonial-img), .testimonial-card .testimonial-avatar, .testimonial-avatar { border: 3px solid transparent !important; background: linear-gradient(#fff, #fff) padding-box, linear-gradient( 135deg, var(--polish-primary) 0%, var(--polish-primary-soft) 50%, var(--polish-accent) 100% ) border-box !important; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5), 0 0 24px var(--polish-glow-purple) !important; } .testimonial-rating, .testimonial-stars { color: #fbbc04 !important; text-shadow: 0 0 12px rgba(251, 188, 4, 0.4); } /* Mobile tweaks */ @media (max-width: 768px) { .testimonial-card { padding: 26px 20px 22px !important; min-height: 280px !important; } .testimonial-card::before { font-size: 90px !important; right: 14px !important; } .review-avatar-initial { width: 46px; height: 46px; font-size: 0.95rem; } .review-name, .testimonial-card .testimonial-name.review-name { font-size: 0.85rem !important; letter-spacing: 1px !important; } .review-content { -webkit-line-clamp: 8; font-size: 0.9rem !important; } } /* ===================================================================== 13. CONTACT LITE — glass cards + icon glow rings ===================================================================== */ .blanc-contact-lite { position: relative; background: linear-gradient( 135deg, #2a1238 0%, #4a1d5e 30%, #6b2d7a 60%, #4a1d5e 100% ) !important; /* Dark shadow around the section for depth */ box-shadow: inset 0 80px 80px -40px rgba(0, 0, 0, 0.5), inset 0 -80px 80px -40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.15); } .blanc-contact-lite::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 60% 50% at 15% 30%, rgba(205, 162, 222, 0.35) 0%, transparent 60% ), radial-gradient( ellipse 50% 60% at 85% 70%, rgba(152, 96, 158, 0.4) 0%, transparent 60% ); pointer-events: none; z-index: 1; animation: polish-glow-bloom 14s var(--polish-ease) infinite; } .blanc-contact-lite::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse at center, transparent 30%, rgba(20, 5, 35, 0.35) 100% ); pointer-events: none; z-index: 1; } .blanc-contact-lite-inner > * { position: relative; z-index: 2; } .blanc-contact-lite-card { background: var(--polish-glass-warm) !important; -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); /* Stronger 2-layer stroke: white outer + purple inner glow ring */ border: 2px solid rgba(255, 255, 255, 0.85) !important; outline: 1px solid rgba(152, 96, 158, 0.4); outline-offset: 0; border-radius: var(--polish-radius-lg) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 0 4px rgba(255, 255, 255, 0.15), /* DARK shadow on dark bg for depth */ 0 16px 32px rgba(0, 0, 0, 0.55), 0 32px 64px rgba(0, 0, 0, 0.40), 0 0 24px rgba(152, 96, 158, 0.30) !important; transition: transform var(--polish-dur-slow) var(--polish-ease-out), box-shadow var(--polish-dur-slow) var(--polish-ease-out) !important; } .blanc-contact-lite-card:hover { transform: translateY(-8px); border-color: var(--polish-primary-soft) !important; outline-color: rgba(205, 162, 222, 0.6); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 0 0 6px rgba(255, 255, 255, 0.20), /* DARK hover shadow lifts up */ 0 24px 48px rgba(0, 0, 0, 0.6), 0 48px 96px rgba(0, 0, 0, 0.45), var(--polish-shadow-xl), 0 0 64px var(--polish-glow-purple) !important; } .blanc-contact-lite-label, .blanc-contact-lite-item-title { text-shadow: var(--polish-text-glow-sm); } .blanc-contact-lite-item-title, .blanc-contact-lite-item-title i, .blanc-contact-lite-info i, .blanc-contact-lite-info svg { color: var(--polish-primary); filter: drop-shadow(0 0 6px var(--polish-glow-purple)); } /* Wrap any inline icons in a glowing gradient circle */ .blanc-contact-lite-social a { position: relative; background: linear-gradient( 135deg, var(--polish-primary) 0%, var(--polish-primary-soft) 100% ) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset, 0 4px 12px rgba(115, 68, 120, 0.25), 0 0 16px var(--polish-glow-purple) !important; transition: transform var(--polish-dur) var(--polish-ease-spring), box-shadow var(--polish-dur) var(--polish-ease) !important; } .blanc-contact-lite-social a:hover { transform: translateY(-3px) scale(1.10); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 0 4px rgba(255, 255, 255, 0.18), 0 8px 20px rgba(115, 68, 120, 0.30), 0 0 32px var(--polish-glow-purple) !important; } .blanc-contact-lite-social a i { color: #ffffff !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); } .blanc-contact-lite-link { transition: color var(--polish-dur) var(--polish-ease), text-shadow var(--polish-dur) var(--polish-ease); } .blanc-contact-lite-link:hover { color: var(--polish-primary-deep) !important; text-shadow: var(--polish-text-glow-sm); } .blanc-contact-lite-map-wrap { border-radius: var(--polish-radius-xl) !important; /* Double-stroke frame: bold white inner border + purple outer ring */ border: 3px solid rgba(255, 255, 255, 0.9) !important; outline: 2px solid rgba(152, 96, 158, 0.5); outline-offset: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 0 0 5px rgba(255, 255, 255, 0.18), var(--polish-shadow-lg), 0 0 48px var(--polish-glow-pink) !important; transition: box-shadow var(--polish-dur-slow) var(--polish-ease); } .blanc-contact-lite-map-wrap:hover { border-color: var(--polish-primary-soft) !important; outline-color: rgba(205, 162, 222, 0.8); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7) inset, 0 0 0 7px rgba(255, 255, 255, 0.20), var(--polish-shadow-xl), 0 0 64px var(--polish-glow-purple) !important; } .blanc-contact-lite-map { height: 420px !important; filter: saturate(0.95) contrast(1.02); } /* ===================================================================== 14. GALLERY — rounded-organic + hover zoom + overlay glow ===================================================================== */ .blanc-gallery-zone { position: relative; } .blanc-gallery-zone::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 65% 55% at 15% 50%, var(--polish-glow-purple) 0%, transparent 65% ); pointer-events: none; z-index: 1; animation: polish-glow-bloom 16s var(--polish-ease) infinite; } .blanc-gallery-shell > * { position: relative; z-index: 2; } .blanc-gallery-card, .hl-gallery-card-uniform { position: relative; border-radius: var(--polish-radius-md) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, var(--polish-shadow-md) !important; transition: transform var(--polish-dur-slow) var(--polish-ease-out), box-shadow var(--polish-dur-slow) var(--polish-ease-out) !important; overflow: hidden; } .blanc-gallery-card:hover, .hl-gallery-card-uniform:hover { transform: translateY(-6px) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 0 0 4px rgba(255, 255, 255, 0.18), var(--polish-shadow-xl), 0 0 48px var(--polish-glow-purple) !important; } .blanc-gallery-card::after, .hl-gallery-card-uniform::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(152, 96, 158, 0.0) 0%, rgba(152, 96, 158, 0.0) 50%, rgba(115, 68, 120, 0.55) 100% ); opacity: 0; transition: opacity var(--polish-dur) var(--polish-ease); pointer-events: none; z-index: 1; } .blanc-gallery-card:hover::after, .hl-gallery-card-uniform:hover::after { opacity: 1; } .blanc-gallery-card img, .hl-gallery-card-uniform img { transition: transform 700ms var(--polish-ease-out) !important; } .blanc-gallery-card:hover img, .hl-gallery-card-uniform:hover img { transform: scale(1.10) !important; } /* ===================================================================== 15. FLOATING ACTION BUTTONS — elegant glow ring breathing --------------------------------------------------------------------- KHÔNG dùng transform: scale rẻ tiền. Chỉ box-shadow ring expand + fade để tạo cảm giác "tỏa sáng" tinh tế. Hover chỉ translateY nhẹ + glow. ===================================================================== */ .floating-button { position: fixed; z-index: 990; } .btn-call-us, .btn-book-now, .floating-button a, .floating-button button { position: relative; background: linear-gradient( 135deg, var(--polish-primary) 0%, var(--polish-primary-soft) 100% ) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 8px 20px rgba(115, 68, 120, 0.30), 0 0 24px var(--polish-glow-purple) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform var(--polish-dur) var(--polish-ease), box-shadow var(--polish-dur) var(--polish-ease) !important; overflow: visible; } /* Elegant pulse ring — uses ::before (not ::after, leaves room for icons that may use ::after). The ring is INVISIBLE itself; only its expanding box-shadow renders as a soft purple halo that breathes. */ .btn-call-us::before, .btn-book-now::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: transparent; pointer-events: none; z-index: -1; animation: polish-pulse 2.6s var(--polish-ease-out) infinite; } .btn-call-us:hover, .btn-book-now:hover, .floating-button a:hover, .floating-button button:hover { /* NO scale — only a subtle lift + glow boost, feels premium */ transform: translateY(-3px) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 0 6px rgba(255, 255, 255, 0.20), 0 12px 28px rgba(115, 68, 120, 0.35), 0 0 48px var(--polish-glow-purple) !important; } .btn-call-us:hover::before, .btn-book-now:hover::before { /* Pause the pulse on hover for a calmer feel */ animation-play-state: paused; } .btn-call-us i, .btn-book-now i, .floating-button i { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); position: relative; z-index: 1; } /* ===================================================================== 16. MODAL — refined glass with multi-layer shadow ===================================================================== */ #policy-modal.modal-custom, .modal-custom { -webkit-backdrop-filter: blur(8px) saturate(1.4) !important; backdrop-filter: blur(8px) saturate(1.4) !important; background: rgba(45, 25, 50, 0.45) !important; } .modal-content-custom { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.96) 0%, rgba(250, 245, 249, 0.94) 100% ) !important; -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); border: 1px solid rgba(255, 255, 255, 0.7) !important; border-radius: var(--polish-radius-lg) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 0 0 8px rgba(255, 255, 255, 0.15), 0 24px 48px rgba(0, 0, 0, 0.28), 0 48px 96px rgba(115, 68, 120, 0.22), 0 0 80px var(--polish-glow-pink) !important; overflow: hidden; } .modal-left { position: relative; background: linear-gradient( 135deg, var(--polish-primary) 0%, var(--polish-primary-deep) 100% ) !important; overflow: hidden; } .modal-left::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 30% 30%, var(--polish-glow-pink) 0%, transparent 60% ), radial-gradient( circle at 80% 80%, rgba(255, 255, 255, 0.25) 0%, transparent 60% ); pointer-events: none; opacity: 0.7; animation: polish-glow-bloom 10s var(--polish-ease) infinite; } .modal-left > * { position: relative; z-index: 1; } .close-custom { background: var(--polish-glass-strong) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(217, 55, 78, 0.4) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 16px rgba(217, 55, 78, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15) !important; transition: transform var(--polish-dur) var(--polish-ease-spring), box-shadow var(--polish-dur) var(--polish-ease) !important; } .close-custom:hover { transform: rotate(90deg) scale(1.1); background: rgba(255, 255, 255, 1) !important; box-shadow: 0 0 0 1px rgba(217, 55, 78, 0.6) inset, 0 0 24px rgba(217, 55, 78, 0.45), 0 8px 20px rgba(217, 55, 78, 0.20) !important; } #agree-check { accent-color: var(--polish-primary); width: 20px; height: 20px; cursor: pointer; filter: drop-shadow(0 0 4px var(--polish-glow-purple)); } /* ===================================================================== 17. PRELOADER — glow ring spinner ===================================================================== */ .preloader { background: radial-gradient( circle at center, rgba(250, 245, 249, 1) 0%, rgba(245, 235, 240, 1) 100% ) !important; } .preloader::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at center, var(--polish-glow-pink) 0%, transparent 50% ); opacity: 0.5; pointer-events: none; animation: polish-glow-bloom 4s var(--polish-ease) infinite; } .cssload-speeding-wheel { border: 4px solid transparent !important; border-top-color: var(--polish-primary) !important; border-right-color: var(--polish-primary-soft) !important; box-shadow: 0 0 24px var(--polish-glow-purple), 0 0 48px var(--polish-glow-pink) !important; animation: polish-spin 1s linear infinite !important; } .preloader p { color: var(--polish-primary) !important; text-shadow: var(--polish-text-glow-sm); letter-spacing: 4px; font-weight: 500; margin-top: 24px; } /* ===================================================================== 18. WAVES / DIVIDERS — subtle glow ===================================================================== */ .blanc-service-wave, .blanc-story-wave-top, .blanc-overview-wave-bottom, .divider-lg { filter: drop-shadow(0 0 8px var(--polish-glow-purple)); } /* ===================================================================== 19. RESPONSIVE — TRULY MOBILE-FRIENDLY --------------------------------------------------------------------- Breakpoints: - 1199px tablet landscape / small desktop - 991px tablet portrait - 768px large phone / mobile landscape - 600px mobile portrait - 480px small phone - 380px very small phone ===================================================================== */ /* ---------- TABLET LANDSCAPE (≤ 1199px) ---------- */ @media (max-width: 1199px) { /* Navbar */ .nav-blanc-inner { padding: 8px 16px 10px; } .nav-blanc-wrap { height: 110px; } .logo-blanc img { height: 70px; } .menu-blanc { gap: 12px; } .rd-nav-link { font-size: 13px; } /* Hero */ .hero-card-x { padding: 48px 40px 38px !important; max-width: 640px !important; width: min(94%, 640px) !important; } .hero-title-x.brand { font-size: clamp(2.4rem, 4.5vw, 3.4rem) !important; } .hero-title-x:not(.brand) { font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important; } .hero-info-block-x, .hero-info-x > div { max-width: 200px; padding: 16px 14px !important; } /* Services grid 3 cols */ .blanc-service-grid { grid-template-columns: repeat(3, 1fr) !important; } /* Flip values grid 3 cols */ .blanc-values-grid { grid-template-columns: repeat(3, 1fr) !important; } /* Contact cards 1 col on tablet */ .blanc-contact-lite-main { grid-template-columns: 1fr !important; } /* Gallery grid */ .blanc-gallery-grid { grid-template-columns: 1.3fr 1fr 1fr !important; grid-template-rows: repeat(3, 180px) !important; } .blanc-gallery-card-large { grid-column: 1 / 2 !important; grid-row: 1 / 4 !important; } /* Section padding */ .aboutv2, .blanc-service-zone, .promotions, .blanc-story-zone, .blanc-contact-lite, .blanc-gallery-zone { padding: 70px 20px 80px !important; } } /* ---------- TABLET PORTRAIT (≤ 991px) ---------- */ @media (max-width: 991px) { /* About layout stack */ .aboutv2-top, .aboutv2-bottom { grid-template-columns: 1fr !important; gap: 30px; } .aboutv2-gallery { grid-template-columns: 1fr 1fr !important; } /* Team block stack */ .blanc-team-block { grid-template-columns: 1fr !important; gap: 30px; } /* Contact */ .blanc-contact-lite-card { padding: 24px 20px !important; } /* Gallery 2 col */ .blanc-gallery-grid { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; } .blanc-gallery-card, .blanc-gallery-card-large { grid-column: auto !important; grid-row: auto !important; height: 200px !important; } .blanc-gallery-card-large { grid-column: 1 / 3 !important; height: 280px !important; } } /* ---------- MOBILE LANDSCAPE / LARGE PHONE (≤ 768px) ---------- */ @media (max-width: 768px) { /* Body / global */ body { padding-top: 70px; } /* Navbar — collapse to mobile mode */ .nav-blanc-wrap { height: 70px; } .nav-blanc-inner { padding: 8px 14px; min-height: 54px; } .logo-blanc img { height: 50px; margin: 0; } .nav-center-blanc { position: static; flex: 0 0 auto; text-align: left; } .nav-social-blanc, .nav-action-blanc { display: none; } .menu-blanc { position: absolute; top: 100%; left: 0; right: 0; background: var(--polish-glass-strong); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border-bottom: 1px solid rgba(255, 255, 255, 0.5); flex-direction: column; align-items: stretch; gap: 0; padding: 12px 16px 20px; display: none; box-shadow: 0 12px 32px rgba(115, 68, 120, 0.15); } .menu-blanc.active { display: flex; } .menu-blanc li { width: 100%; text-align: center; } .rd-nav-link { display: block; padding: 12px 8px; font-size: 14px; } .rd-nav-link::after { display: none; } .nav-toggle-blanc { display: flex; align-items: center; justify-content: center; } /* Hero */ .hero-slider-x { /* hero-slide-x is position:absolute, so we need EXPLICIT min-height to keep the card visible — auto makes it collapse to 0. */ min-height: 720px !important; height: 720px !important; padding: 0 !important; overflow: hidden !important; } .hero-overlay-x { height: 100% !important; align-items: center !important; padding: 20px !important; } .hero-card-x { padding: 64px 22px 40px !important; border-radius: 24px !important; max-width: 96% !important; width: 96% !important; margin: 0 auto !important; } /* Display WELCOME TO ribbon reliably inside the card flow */ .hero-card-x::before { position: static !important; display: block !important; width: fit-content !important; max-width: 90%; margin: 0 auto 28px !important; transform: none !important; left: auto !important; top: auto !important; font-size: 9px !important; padding: 5px 14px !important; letter-spacing: 3px !important; } .hero-card-x::after { width: 140px; } /* Title sits well below the ribbon with generous breathing room. Script font (Great Vibes) has tall ascenders that get clipped at tight line-heights — keep the box tall and pad the top. */ .hero-title-x.brand { font-size: clamp(2.4rem, 11vw, 3.4rem) !important; margin-top: 56px !important; line-height: 1.55 !important; padding-top: 18px !important; } .hero-title-x:not(.brand) { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; letter-spacing: 6px !important; } .hero-sub-x { font-size: 1rem !important; letter-spacing: 2px !important; } .hero-info-x { flex-direction: column; gap: 14px !important; margin-top: 28px !important; } .hero-info-block-x, .hero-info-x > div { width: 100%; max-width: 360px; margin: 0 auto; } .hero-info-block-x + div::before, .hero-info-x > div + .hero-info-block-x::before { left: 50% !important; top: -18px !important; right: auto !important; transform: translateX(-50%) !important; } /* Floating buttons — split to OPPOSITE sides of the screen: CALL US on the LEFT, BOOK NOW on the RIGHT. */ .floating-button { bottom: 16px !important; left: 0 !important; right: 0 !important; top: auto !important; transform: none !important; width: 100% !important; height: 52px !important; display: block !important; pointer-events: none; } /* Each button itself is positioned fixed on its own side */ .floating-button .btn-call-us, .floating-button > div:first-child > .btn-call-us { position: fixed !important; left: 16px !important; right: auto !important; bottom: 16px !important; top: auto !important; z-index: 990; margin: 0 !important; float: none !important; pointer-events: auto; } .floating-button .btn-book-now, .floating-button > div:last-child > .btn-book-now { position: fixed !important; right: 16px !important; left: auto !important; bottom: 16px !important; top: auto !important; z-index: 990; margin: 0 !important; float: none !important; pointer-events: auto; } /* Hide the wrapping columns on mobile — buttons are now self-positioned */ .floating-button > div { display: contents !important; } .floating-button a, .btn-call-us, .btn-book-now { /* Force rectangular with subtle radius — NOT a circle */ border-radius: 999px !important; width: auto !important; min-width: 140px !important; max-width: calc(50vw - 32px) !important; height: 48px !important; padding: 0 20px !important; margin: 0 !important; font-size: 13px !important; font-weight: 600; letter-spacing: 0.4px; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; float: none !important; color: #ffffff !important; text-indent: 0 !important; overflow: visible; white-space: nowrap; position: fixed !important; z-index: 990; bottom: 16px !important; } .floating-button .btn-call-us, .floating-button > div:first-child > .btn-call-us { left: 16px !important; right: auto !important; } .floating-button .btn-book-now, .floating-button > div:last-child > .btn-book-now { right: 16px !important; left: auto !important; } .floating-button a i, .btn-call-us i, .btn-book-now i { color: #ffffff !important; text-indent: 0; position: static; transform: none; font-size: 16px; } /* Section title sizes */ .hero-title-x, .promotions h2, .aboutv2-title, .blanc-service-title, .blanc-story-title, .blanc-gallery-title { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; } .blanc-service-subtitle, .aboutv2-subtitle, .blanc-story-title { font-size: clamp(1.1rem, 4vw, 1.4rem) !important; } /* Section padding */ .aboutv2, .blanc-service-zone, .promotions, .blanc-story-zone, .blanc-contact-lite, .blanc-gallery-zone { padding: 60px 16px 70px !important; } /* Glow / ambient pseudo-elements — OFF on mobile. They look great on desktop but on narrow viewports the gradients still read as hard color blocks and add visual noise, so disable them entirely. */ .aboutv2::before, .blanc-service-zone::before, .blanc-service-zone::after, .blanc-story-zone::before, .blanc-contact-lite::before, .blanc-gallery-zone::before, .promotions::before, .hero-slider-x::before { display: none !important; } /* Service cards — 1 col */ .blanc-service-grid { grid-template-columns: 1fr !important; gap: 18px !important; } .blanc-service-photo { height: 240px !important; } /* Flip values — 2 col */ .blanc-values-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } .blanc-flip-value { min-height: 280px !important; } .blanc-flip-value-inner { min-height: 280px !important; height: auto !important; } /* Testimonials */ .testimonial-card { padding: 24px 18px !important; } .testimonial-card::before { font-size: 80px !important; top: -4px !important; right: 14px !important; left: auto !important; } /* Contact */ .blanc-contact-lite-card { padding: 22px 18px !important; border-radius: 20px !important; } .blanc-contact-lite-label { font-size: 1.2rem !important; } .blanc-contact-lite-map { height: 300px !important; } .blanc-contact-lite-map-wrap { border-radius: 22px !important; } /* Gallery */ .blanc-gallery-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .blanc-gallery-card { border-radius: 14px !important; height: 160px !important; } .blanc-gallery-card-large { height: 220px !important; grid-column: 1 / 3 !important; } /* Buttons */ .btn-nav-blanc, .blanc-contact-lite-btn, .blanc-gallery-btn, .blanc-choose-btn, .button-default-outline { font-size: 13px !important; padding: 9px 20px !important; } /* Modal */ .modal-content-custom { padding: 24px 20px !important; border-radius: 20px !important; } .modal-left, .modal-right { padding: 22px 18px !important; } .modal-flex { flex-direction: column !important; } /* Floating buttons */ .floating-button { right: 16px !important; bottom: 16px !important; } .btn-call-us, .btn-book-now { width: 52px !important; height: 52px !important; font-size: 16px !important; } } /* ---------- MOBILE PORTRAIT (≤ 600px) ---------- */ @media (max-width: 600px) { .hero-card-x { padding: 44px 18px 34px !important; border-radius: 22px !important; } .hero-card-x::before { top: -14px; font-size: 9px; padding: 4px 14px; } .hero-title-x.brand { font-size: clamp(2.2rem, 10vw, 3rem) !important; } .hero-sub-x { font-size: 0.95rem !important; } .hero-info-block-x, .hero-info-x > div { padding: 14px 12px !important; } .blanc-service-photo { height: 220px !important; } .blanc-contact-lite-map { height: 260px !important; } .testimonial-card { padding: 22px 16px !important; } } /* ---------- SMALL PHONE (≤ 480px) ---------- */ @media (max-width: 480px) { .hero-card-x { padding: 40px 16px 30px !important; border-radius: 20px !important; } .hero-title-x.brand { font-size: 2.2rem !important; } .hero-title-x:not(.brand) { font-size: 1.4rem !important; letter-spacing: 4px !important; } .hero-sub-x { font-size: 0.9rem !important; letter-spacing: 1.5px !important; } .floating-button a, .btn-call-us, .btn-book-now { width: 48px !important; height: 48px !important; font-size: 15px !important; } .floating-button { right: 12px !important; bottom: 12px !important; } } /* ---------- VERY SMALL PHONE (≤ 380px) ---------- */ @media (max-width: 380px) { .hero-card-x { padding: 36px 14px 28px !important; } .hero-title-x.brand { font-size: 1.9rem !important; } .hero-info-block-x, .hero-info-x > div { padding: 12px 10px !important; } .blanc-contact-lite-social a { width: 38px !important; height: 38px !important; } } /* ---------- WHO WE ARE GALLERY → MOBILE 3-IN-A-ROW LAYOUT ---------- On mobile, display all 3 images side-by-side in a horizontal row (similar to reference layout). No carousel — all visible at once. Desktop layout is preserved (3-column grid). */ @media (max-width: 768px) { /* 3-column grid showing all 3 images in a single row */ .aboutv2-gallery { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; width: 100% !important; height: 180px !important; border-radius: 20px !important; overflow: hidden; background: transparent; box-shadow: none; } /* Each image — fixed dimensions, no absolute positioning */ .aboutv2-img { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 1 !important; transform: none !important; animation: none !important; box-shadow: 0 4px 12px rgba(115, 68, 120, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.4) inset; } /* Decorative border-radius — uniform 16px on all 3 images (asymmetric shapes can cause "weird" cropping on text select) */ .aboutv2-img-1, .aboutv2-img-2, .aboutv2-img-3 { border-radius: 16px !important; } } @media (max-width: 480px) { .aboutv2-gallery { height: 140px !important; gap: 6px !important; } .aboutv2-img-1, .aboutv2-img-2, .aboutv2-img-3 { border-radius: 20px !important; } } /* ===================================================================== 20. REDUCED MOTION ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .polish-reveal { opacity: 1 !important; transform: none !important; } } /* ===================================================================== 21. PRINT — strip polish for clean print ===================================================================== */ @media print { .nav-blanc-wrap, .floating-button, #policy-modal, .preloader, .blanc-service-wave, .blanc-story-wave-top { display: none !important; } .hero-card-x, .blanc-service-card, .blanc-contact-lite-card, .testimonial-card { box-shadow: none !important; border: 1px solid #ccc !important; backdrop-filter: none !important; } }