/*======================================================= CARSOFT — GLASSMORPHISM LAYER Drop this after tooplate-carsoft.css in every page's =========================================================*/ /* ─── CSS variables for glass tokens ─────────────────── */ :root { --glass-bg: rgba(255, 255, 255, 0.07); --glass-bg-mid: rgba(255, 255, 255, 0.10); --glass-bg-strong: rgba(255, 255, 255, 0.14); --glass-border: 1px solid rgba(255, 255, 255, 0.14); --glass-border-accent: 1px solid rgba(244, 121, 84, 0.28); --glass-blur: blur(18px) saturate(160%); --glass-blur-sm: blur(10px) saturate(140%); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.10); --glass-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12); --glass-radius: 14px; } /* ─── @supports guard — solid fallback for old browsers ── */ @supports not (backdrop-filter: blur(1px)) { :root { --glass-bg: rgba(30, 38, 48, 0.95); --glass-bg-mid: rgba(30, 38, 48, 0.97); --glass-bg-strong: rgba(20, 28, 36, 0.98); } } /* ══════════════════════════════════════════════════════════ 1. NAVIGATION BAR ══════════════════════════════════════════════════════════ */ .navbar .container, .sticky-wrapper.is-sticky .container { background: rgba(20, 26, 34, 0.55) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: var(--glass-border) !important; border-radius: var(--border-radius-small) !important; box-shadow: var(--glass-shadow) !important; transition: background 0.3s ease, box-shadow 0.3s ease; } /* Slightly denser when scrolled */ .sticky-wrapper.is-sticky .container { background: rgba(15, 20, 28, 0.72) !important; box-shadow: var(--glass-shadow-lg) !important; } /* ─── Dropdown menus ─────────────────────────────────── */ .navbar .dropdown-menu { background: rgba(18, 24, 32, 0.9) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: var(--glass-border) !important; border-radius: var(--glass-radius) !important; box-shadow: var(--glass-shadow-lg) !important; } .navbar .dropdown-item { border-bottom-color: rgba(244, 121, 84, 0.15) !important; transition: background 0.2s ease, color 0.2s ease; } .navbar .dropdown-item:hover { background: rgba(244, 121, 84, 0.14) !important; color: #f47954 !important; } /* Mobile expanded nav */ @media (max-width: 991px) { .navbar .dropdown-menu { background: rgba(15, 20, 28, 0.78) !important; } } /* ══════════════════════════════════════════════════════════ 2. SITE FOOTER ══════════════════════════════════════════════════════════ */ .site-footer { background-color: transparent !important; background: rgba(12, 18, 24, 0.60) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border-top: var(--glass-border-accent) !important; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3); } /* Social icon pills */ .social-icon-link { background: rgba(244, 121, 84, 0.18) !important; backdrop-filter: var(--glass-blur-sm) !important; -webkit-backdrop-filter: var(--glass-blur-sm) !important; border: 1px solid rgba(244, 121, 84, 0.30) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } .social-icon-link:hover { background: rgba(244, 121, 84, 0.38) !important; border-color: rgba(244, 121, 84, 0.70) !important; box-shadow: 0 6px 18px rgba(244, 121, 84, 0.30) !important; color: #ffffff !important; } /* ══════════════════════════════════════════════════════════ 3. CONTACT SECTION — FORM & MAP ══════════════════════════════════════════════════════════ */ /* Glass wrapper around the form column */ /*.contact-section .col-lg-6:last-child { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: var(--glass-border) !important; border-radius: var(--glass-radius) !important; box-shadow: var(--glass-shadow) !important; padding: 30px 28px !important; }*/ /* Form inputs */ /*.contact-form .form-control, .booking-form .form-control { background: rgba(255, 255, 255, 0.06) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 10px !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07) !important; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } .contact-form .form-control:focus, .booking-form .form-control:focus { background: rgba(0, 191, 255, 0.10) !important; border-color: rgba(0, 191, 255, 0.45) !important; box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.12), inset 0 1px 0 rgba(255,255,255,0.10) !important; outline: none !important; } .contact-form .form-control:hover, .booking-form .form-control:hover { background: rgba(0, 191, 255, 0.08) !important; border-color: rgba(0, 191, 255, 0.30) !important; }*/ /* ══════════════════════════════════════════════════════════ 4. BOOKING FORM WRAP ══════════════════════════════════════════════════════════ */ .booking-form-wrap { background: rgba(20, 28, 38, 0.55) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: var(--glass-border) !important; border-radius: var(--border-radius-medium) !important; box-shadow: var(--glass-shadow-lg) !important; } /* ══════════════════════════════════════════════════════════ 5. MODAL ══════════════════════════════════════════════════════════ */ .modal-content { background: #425265 !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: var(--glass-border-accent) !important; border-radius: var(--glass-radius) !important; box-shadow: var(--glass-shadow-lg) !important; color: #ffffff; } .modal-header { border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important; } .modal-footer { border-top: 1px solid rgba(255, 255, 255, 0.10) !important; } .btn-close { filter: invert(1) opacity(0.7); } /* ══════════════════════════════════════════════════════════ 6. REVIEWS BLOCKS ══════════════════════════════════════════════════════════ */ .reviews-block { background: var(--glass-bg-mid) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; } .reviews-block-info { background: rgba(0, 0, 0, 0.20); backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; } /* ══════════════════════════════════════════════════════════ 7. SECTION BACKGROUNDS ══════════════════════════════════════════════════════════ */ /* Dark purple section */ .section-bg { background: rgba(72, 61, 139, 0.50) !important; backdrop-filter: var(--glass-blur-sm) !important; -webkit-backdrop-filter: var(--glass-blur-sm) !important; } /* Icons strip */ .section-icons { background: rgba(72, 61, 139, 0.45) !important; backdrop-filter: var(--glass-blur-sm) !important; -webkit-backdrop-filter: var(--glass-blur-sm) !important; border-top: var(--glass-border); border-bottom: var(--glass-border); } /* About dark section */ /* Service tip section */ .service-tip-section { background: rgba(239, 75, 75, 0.40) !important; backdrop-filter: var(--glass-blur-sm) !important; -webkit-backdrop-filter: var(--glass-blur-sm) !important; } /* FAQ section — image bg stays, overlay becomes glass */ .faq-section { /* keep background-image via tooplate-carsoft.css; add glass tint only */ background-color: rgba(239, 75, 75, 0.35) !important; } /* ══════════════════════════════════════════════════════════ 8. ACCORDION ══════════════════════════════════════════════════════════ */ .accordion-item { background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: var(--glass-blur-sm) !important; -webkit-backdrop-filter: var(--glass-blur-sm) !important; border: var(--glass-border) !important; border-radius: 11px !important; margin-bottom: 6px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important; overflow: hidden !important; } .accordion-button { background: linear-gradient( 135deg, rgba(72, 61, 139, 0.70) 0%, rgba(20, 28, 38, 0.80) 100% ) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; color: #ffffff !important; box-shadow: none !important; } .accordion-button:not(.collapsed) { background: linear-gradient( 135deg, rgba(72, 61, 139, 0.88) 0%, rgba(10, 16, 24, 0.90) 100% ) !important; } .accordion-button:hover { background: linear-gradient( 135deg, rgba(72, 61, 139, 0.95) 0%, rgba(10, 16, 24, 0.95) 100% ) !important; } .accordion-body { background: linear-gradient( 180deg, rgba(20, 28, 38, 0.60) 0%, rgba(35, 45, 58, 0.65) 100% ) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-top: 1px solid rgba(255,255,255,0.07) !important; box-shadow: none !important; } /* ══════════════════════════════════════════════════════════ 9. TIMELINE CONTENT ══════════════════════════════════════════════════════════ */ .timeline-content { background: var(--glass-bg-strong) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; color: #ffffff; } .timeline-content h6, .timeline-content p, .timeline-content li { color: rgba(255, 255, 255, 0.88) !important; } /* ══════════════════════════════════════════════════════════ 10. TEAM BLOCK ══════════════════════════════════════════════════════════ */ .team-block-info { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.30) 40%, rgba(239, 75, 75, 0.60) 100% ) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; } /* ══════════════════════════════════════════════════════════ 11. CONTACT BLOCK WRAP ══════════════════════════════════════════════════════════ */ .contact-block-wrap { background: var(--glass-bg-mid) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: var(--glass-border-accent) !important; box-shadow: var(--glass-shadow) !important; } .contact-block { background: rgba(221, 161, 94, 0.22) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(221, 161, 94, 0.30) !important; } /* ══════════════════════════════════════════════════════════ 12. SERVICES LIST ══════════════════════════════════════════════════════════ */ .services-list li { background: rgba(0, 191, 255, 0.08) !important; backdrop-filter: var(--glass-blur-sm) !important; -webkit-backdrop-filter: var(--glass-blur-sm) !important; border: 1px solid rgba(0, 191, 255, 0.18) !important; border-radius: 10px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20) !important; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important; } .services-list li:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(244, 121, 84, 0.40) !important; box-shadow: 0 6px 20px rgba(244, 121, 84, 0.18) !important; color: #ffffff !important; } .services-list li:hover button { color: #ffffff !important; } /* Collapse content panel */ .services-list li .collapse-servlist { background: rgba(255, 255, 255, 0.06) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border-radius: 8px !important; color: rgba(255, 255, 255, 0.90) !important; } /* ══════════════════════════════════════════════════════════ 13. HERO SECTION — glass badge/pill overlays ══════════════════════════════════════════════════════════ */ .hero-section::after, .hero-service-section::after { background: rgba(45, 55, 62, 0.30) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } /* Typing effect text block */ .typing-effect, .typing-effectsub { /* subtle frosted reading surface */ background: rgba(0, 0, 0, 0.22); backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; border-radius: 8px; padding: 0 12px; } /* ══════════════════════════════════════════════════════════ 14. CUSTOM BUTTONS — glass tint on border variants ══════════════════════════════════════════════════════════ */ .custom-border-btn { background: rgba(255, 255, 255, 0.06) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 2px solid rgba(255, 255, 255, 0.55) !important; } .custom-border-btn:hover { background: rgba(255, 255, 255, 0.18) !important; } /* CTA phone button */ .futuristic-cta { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; box-shadow: 0 4px 20px rgba(244, 121, 84, 0.30) !important; } .futuristic-cta:hover { box-shadow: 0 8px 28px rgba(0, 191, 255, 0.35) !important; } /* ══════════════════════════════════════════════════════════ 15. MENU BLOCK WRAP ══════════════════════════════════════════════════════════ */ .menu-block-wrap { background: rgba(0, 0, 0, 0.48) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; } /* ══════════════════════════════════════════════════════════ 16. SECTION OVERLAY ══════════════════════════════════════════════════════════ */ .section-overlay { /* blur the hero background for a glass backdrop */ backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; } /* ══════════════════════════════════════════════════════════ 17. COOKIE CONSENT POPUP ══════════════════════════════════════════════════════════ */ #cc-main .pm__body, #cc-main .cm, #cc-main .pm { background: rgba(14, 20, 28, 0.72) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border: var(--glass-border-accent) !important; box-shadow: var(--glass-shadow-lg) !important; border-radius: var(--glass-radius) !important; color: rgba(255, 255, 255, 0.88) !important; } #cc-main .cm__title, #cc-main .pm__title { color: #f47954 !important; } #cc-main .cm__desc, #cc-main .pm__section-desc { color: rgba(255, 255, 255, 0.75) !important; } /* ══════════════════════════════════════════════════════════ 18. GOOGLE MAP iframe border ══════════════════════════════════════════════════════════ */ .google-map { border: var(--glass-border-accent) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.40) !important; border-radius: var(--border-radius-medium) !important; } /* ══════════════════════════════════════════════════════════ 19. ROW-FORM (contact section row) ══════════════════════════════════════════════════════════ */ /*.row-form { background: rgba(0, 0, 0, 0.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: var(--border-radius-medium); padding: 30px 20px; border: var(--glass-border); }*/ /* ══════════════════════════════════════════════════════════ 20. CONTENT BLOCKS (service inner blocks) ══════════════════════════════════════════════════════════ */ .contenth2-block { background: rgba(45, 55, 62, 0.55) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: var(--glass-border) !important; border-radius: 10px !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important; } /* ══════════════════════════════════════════════════════════ 21. HOMEPAGE FILTER GRID (was duplicated inline in ro/index.php and ru/index.php — moved here so it's downloaded/parsed/ cached once instead of twice, and de-duped between languages). --home-glass-bg / --home-glass-border are namespaced (not --glass-bg / --glass-border) to avoid overriding those tokens sitewide for the other 32 service pages that share this file. ══════════════════════════════════════════════════════════ */ /* ----- CSS variables (primary/secondary) ----- */ :root { --primary: #425265; --secondary: #f47954; --home-glass-bg: rgba(66, 82, 101, 0.25); --home-glass-border: rgba(244, 121, 84, 0.3); --solid-bg: #2f3e4b; /* fallback for no backdrop-filter */ } /* ----- base glow (unchanged) ----- */ body::before { content: ''; position: fixed; top: -10%; right: -5%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(244,121,84,0.2) 0%, transparent 70%); border-radius: 50%; filter: blur(100px); z-index: 0; pointer-events: none; } .contenth2-block { color: white !important; font-weight: 600; letter-spacing: -0.02em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); font-size: clamp(1.8rem, 5vw, 2.5rem); margin-bottom: 1rem; } /* ----- filter bar (glass style - optimized) ----- */ .filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 2.5rem; padding: 0.5rem; border-radius: 4rem; border: 1px solid var(--home-glass-border); } /* only apply backdrop-filter on devices that support it and not on mobile */ @media (hover: hover) and (min-width: 769px) { .filter-bar { background: rgba(66, 82, 101, 0.15); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } /* mobile fallback for filter-bar */ @media (max-width: 768px) { .filter-bar { backdrop-filter: none !important; background: rgba(66, 82, 101, 0.85); border-radius: 2rem; gap: 0.5rem; padding: 0.5rem; } } .category-header { flex: 1 0 100%; color: white; text-align: center; margin-top: 1.5rem; margin-bottom: 0.5rem; } .filter-btn { background: transparent; border: 1px solid rgba(244, 121, 84, 0.3); color: rgba(255, 255, 255, 0.9); padding: 0.6rem 1.5rem; border-radius: 3rem; font-weight: 500; transition: all 0.2s; cursor: pointer; font-size: 1rem; } /* only apply backdrop-filter on desktop for buttons */ @media (hover: hover) and (min-width: 769px) { .filter-btn { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } } @media (max-width: 768px) { .filter-btn { backdrop-filter: none !important; padding: 0.5rem 1rem; font-size: 0.9rem; } } .filter-btn:hover, .filter-btn.active { background: var(--secondary); border-color: var(--secondary); color: white; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(244, 121, 84, 0.3); } /* fallback for no backdrop-filter */ @supports not (backdrop-filter: blur()) { .filter-bar { background: var(--solid-bg); } .filter-btn { background: rgba(66, 82, 101, 0.8); } } /* ----- card container (flex grid) ----- */ .card-container { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-top: 1rem; } /* ----- unified glass card style (optimized) ----- */ .card, .cardlinear { flex: 1 1 240px; min-width: 240px; max-width: 280px; background: var(--home-glass-bg); border: 1px solid var(--home-glass-border); border-radius: 2rem !important; padding: 1.5rem 1.2rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.4); color: white; text-align: left; display: flex; flex-direction: column; will-change: auto; /* remove forced layers */ } /* only apply backdrop-filter on devices that support it and not on mobile */ @media (hover: hover) and (min-width: 769px) { .card, .cardlinear { backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); } } @media (hover: hover) { .card:hover, .cardlinear:hover { background: rgba(244, 121, 84, 0.2); border-color: rgba(244, 121, 84, 0.8); transform: translateY(-6px); box-shadow: 0 20px 30px -10px rgba(244, 121, 84, 0.3); } } /* fallback for no backdrop-filter */ @supports not (backdrop-filter: blur()) { .card, .cardlinear { background: var(--solid-bg); } } /* ----- image area (no continuous animation) ----- */ .card-image { width: 70px; height: 70px; border-radius: 50%; background: rgba(244, 121, 84, 0.2); border: 1px solid rgba(244, 121, 84, 0.5); display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; font-size: 2.2rem; color: var(--secondary); box-shadow: 0 8px 16px rgba(0,0,0,0.3); transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; transform: translateY(0); will-change: auto; } @media (hover: hover) { .card-image { transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .card:hover .card-image { transform: translateY(-6px) scale(1.05); background: rgba(244, 121, 84, 0.35); border-color: var(--secondary); color: white; } } /* fallback if backdrop-filter not supported */ @supports not (backdrop-filter: blur()) { .card-image { background: rgba(244, 121, 84, 0.3); } } /* ----- titles & text (unchanged) ----- */ .contentser-block h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: white; text-shadow: 0 2px 5px rgba(0,0,0,0.3); line-height: 1.3; } .card p.text-white, .card p.textleft { color: rgba(255, 255, 255, 0.9) !important; font-size: 0.95rem; line-height: 1.5; margin-bottom: 1rem; flex-grow: 1; } /* ----- price tag (simplified for performance) ----- */ .services-btn { background: rgba(244, 121, 84, 0.2); border: 1px solid rgba(244, 121, 84, 0.5); border-radius: 20px; padding: 0.5rem 1.2rem; font-size: 0.95rem; font-weight: 600; color: var(--secondary) !important; text-align: center; transition: all 0.2s; align-self: flex-start; margin: 0.5rem 0 1rem 0; box-shadow: 0 4px 8px rgba(0,0,0,0.2); text-decoration: none; position: relative; } /* remove pseudo-elements entirely on mobile to reduce paint */ @media (min-width: 769px) { .services-btn { border-radius: 0 20px 20px 0; padding-left: 1.5rem; } .services-btn::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(244, 121, 84, 0.6); border-radius: 50%; backdrop-filter: blur(2px); box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .services-btn::after { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 8px; height: 2px; background: rgba(244, 121, 84, 0.5); border-radius: 2px; } } /* hover animation (only on devices that can hover) */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .card:hover .services-btn { animation: pulse 1.5s infinite; } } @keyframes pulse { 0% { box-shadow: 0 4px 8px rgba(244,121,84,0.2); } 50% { box-shadow: 0 8px 16px rgba(244,121,84,0.6); } 100% { box-shadow: 0 4px 8px rgba(244,121,84,0.2); } } @media (hover: hover) { .card:hover .services-btn { background: rgba(244, 121, 84, 0.35); border-color: var(--secondary); color: white !important; } .card:hover .services-btn::before { border-color: var(--secondary); background: rgba(244, 121, 84, 0.3); } .card:hover .services-btn::after { background: var(--secondary); } } /* ----- read more link (arrow animation) ----- */ .read-more { display: inline-block; color: var(--secondary) !important; text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: transform 0.2s, border-bottom-color 0.2s, color 0.2s; border-bottom: 1px solid rgba(244,121,84,0.3); padding-bottom: 2px; width: fit-content; margin-top: 0.25rem; } .read-more:hover { color: white !important; border-bottom-color: var(--secondary); transform: translateX(4px); } .read-more::after { content: " →"; font-size: 1rem; display: inline-block; transition: transform 0.2s; } .read-more:hover::after { transform: translateX(4px); } /* ----- mobile tap targets & fallbacks ----- */ @media (max-width: 768px) { .card, .cardlinear { backdrop-filter: none !important; background: rgba(66, 82, 101, 0.85); } .card-image { backdrop-filter: none !important; background: rgba(244, 121, 84, 0.3); } .services-btn { backdrop-filter: none !important; } .card-container { gap: 1rem; } .card, .cardlinear { min-width: 100%; max-width: 100%; padding: 1.2rem 1rem; } .services-btn, .read-more, .navbar-nav .nav-link, .dropdown-item { padding: 0.6rem 1.2rem; font-size: 1rem; } } /* ----- respect user motion preferences ----- */ @media (prefers-reduced-motion: reduce) { .card, .card-image, .services-btn, .read-more { transition: none !important; animation: none !important; } .card:hover .card-image { transform: none !important; } }