/* Quicksand font is now loaded from link to prevent FOUT/CLS */ body { font-family: var(--font-primary); background: var(--color-bg-gradient); font-weight: 400; overflow-x: hidden; word-wrap: break-word; overflow-wrap: break-word; } /* Typography inherits from design-tokens.css */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); font-weight: var(--font-weight-bold); color: var(--color-text-heading); line-height: var(--line-height-tight); } /* Default center alignment for most headings */ h2, h3, h4, h5, h6 { text-align: center; } /* Hero H1 - left on desktop, center on mobile */ .hero-section h1 { text-align: center; } @media (min-width: 768px) { .hero-section h1 { text-align: left; } } h1 { letter-spacing: -0.02em; font-size: var(--h1-mobile); } @media (min-width: 768px) { h1 { font-size: var(--h1-tablet); } } @media (min-width: 1024px) { h1 { font-size: var(--h1-desktop); } } /* CONVERSION TRIGGERS - Psychological Elements */ .toast-notification { position: fixed; bottom: 20px; right: 20px; background: white; border-left: 4px solid #f97316; border-radius: 8px; padding: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); z-index: 9999; animation: slideInRight 0.4s ease-out; max-width: 320px; font-size: 0.9rem; } @keyframes slideInRight { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } } .toast-notification.exit { animation: slideOutRight 0.4s ease-out forwards; } .toast-icon { font-size: 1.5rem; margin-right: 8px; } .live-indicator { display: inline-flex; align-items: center; gap: 6px; background: #dbeafe; color: #1e40af; padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; } .live-dot { width: 8px; height: 8px; background: #ef4444; border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .scarcity-badge { display: inline-block; background: linear-gradient(135deg, #f97316, #ea580c); color: white; padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; animation: pulse-scale 2s infinite; } @keyframes pulse-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .guarantee-badge { display: inline-flex; align-items: center; gap: 8px; background: #f0fdf4; border: 2px solid #22c55e; color: #15803d; padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; } .social-proof-counter { background: linear-gradient(135deg, #f97316, #fb923c); color: white; padding: 12px 20px; border-radius: 8px; font-weight: 700; font-size: 0.95rem; text-align: center; } /* CENTER BADGES ON MOBILE */ @media (max-width: 768px) { .flex.flex-wrap.gap-3.mb-8 { justify-content: center; } .social-proof-counter, .scarcity-badge { width: 100%; max-width: 300px; } .guarantee-badge { display: flex; justify-content: center; width: 100%; } } /* CALL NOW BUTTON - ATTENTION GRABBER */ .call-now-button { position: relative; overflow: hidden; animation: callNowPulse 1.5s ease-in-out infinite; box-shadow: 0 0 20px rgba(249, 115, 22, 0.6); } .call-now-button::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: callNowShine 2s infinite; pointer-events: none; } .call-now-button:hover { animation: callNowPulseHover 0.6s ease-in-out infinite !important; box-shadow: 0 0 40px rgba(249, 115, 22, 0.8) !important; } @keyframes callNowPulse { 0% { transform: scale(1); box-shadow: 0 0 20px rgba(249, 115, 22, 0.6); } 50% { transform: scale(1.08); box-shadow: 0 0 30px rgba(249, 115, 22, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.2); } 100% { transform: scale(1); box-shadow: 0 0 20px rgba(249, 115, 22, 0.6); } } @keyframes callNowPulseHover { 0%, 100% { transform: scale(1.08); box-shadow: 0 0 30px rgba(249, 115, 22, 0.8); } 50% { transform: scale(1.12); box-shadow: 0 0 50px rgba(249, 115, 22, 1); } } @keyframes callNowShine { 0% { left: -100%; } 100% { left: 100%; } } /* RINGING ANIMATION для иконки телефона */ .phone-icon { display: inline-block; animation: phoneRing 1s ease-in-out infinite; } @keyframes phoneRing { 0%, 100% { transform: rotate(0deg); } 10%, 20% { transform: rotate(-15deg); } 30%, 50%, 70%, 90% { transform: rotate(15deg); } 40%, 60%, 80% { transform: rotate(-15deg); } } /* ===== STANDARDIZED BUTTON STYLES ===== */ /* PRIMARY BUTTON - Filled (for Book Online Now) */ .btn-primary { display: inline-block; background: linear-gradient(135deg, #f97316 0%, #fb923c 100%); color: white; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 1rem; text-align: center; transition: all 0.3s ease; border: none; cursor: pointer; text-decoration: none; box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, #ea580c 0%, #f97316 100%); box-shadow: 0 8px 25px rgba(249, 115, 22, 0.45); transform: translateY(-2px); } .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(249, 115, 22, 0.25); } /* SECONDARY BUTTON - With Call Now animation (for Call Now) */ .btn-secondary { position: relative; display: inline-block; overflow: hidden; background: linear-gradient(135deg, #f97316 0%, #fb923c 100%); color: white; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 1rem; text-align: center; border: none; cursor: pointer; text-decoration: none; animation: callNowPulse 1.5s ease-in-out infinite; box-shadow: 0 0 20px rgba(249, 115, 22, 0.6); } .btn-secondary::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: callNowShine 2s infinite; pointer-events: none; } .btn-secondary:hover { animation: callNowPulseHover 0.6s ease-in-out infinite !important; box-shadow: 0 0 40px rgba(249, 115, 22, 0.8) !important; } .btn-secondary:active { animation: callNowPulse 1.5s ease-in-out infinite !important; box-shadow: 0 0 20px rgba(249, 115, 22, 0.6) !important; } /* OUTLINED BUTTON VARIANT - For secondary buttons without background */ .btn-secondary.outline { background: transparent !important; border: 1px solid #f97316 !important; color: #f97316 !important; animation: callNowPulse 1.5s ease-in-out infinite !important; box-shadow: 0 0 15px rgba(249, 115, 22, 0.4) !important; } .btn-secondary.outline::before { display: none !important; } .btn-secondary.outline:hover { animation: callNowPulseHover 0.6s ease-in-out infinite !important; box-shadow: 0 0 25px rgba(249, 115, 22, 0.6) !important; } .btn-secondary.outline .phone-icon { animation: phoneRing 1s ease-in-out infinite !important; } /* RESPONSIVE BUTTON SIZES */ @media (max-width: 640px) { .btn-primary, .btn-secondary { padding: 12px 20px; font-size: 1rem; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .btn-primary.large, .btn-secondary.large { padding: 14px 28px; font-size: 1.05rem; min-height: 48px; } } @media (min-width: 641px) and (max-width: 768px) { .btn-primary, .btn-secondary { padding: 12px 20px; font-size: 0.98rem; } .btn-primary.large, .btn-secondary.large { padding: 13px 28px; font-size: 1.05rem; } } @media (min-width: 769px) { .btn-primary, .btn-secondary { padding: 12px 24px; font-size: 1rem; } .btn-primary.large, .btn-secondary.large { padding: 14px 32px; font-size: 1.1rem; } } /* LOCATION CARD BUTTONS - Center and make full-width on mobile */ .card-warm button { display: block; width: 100%; text-align: center; padding: 12px 16px !important; background: linear-gradient(135deg, #f97316 0%, #fb923c 100%) !important; color: white !important; border-radius: 6px !important; font-weight: 600 !important; font-size: 1rem !important; border: none !important; cursor: pointer !important; transition: all 0.3s ease !important; margin-top: 8px !important; } .card-warm button:hover { background: linear-gradient(135deg, #ea580c 0%, #f97316 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3) !important; } @media (max-width: 640px) { .card-warm button { padding: 14px 16px !important; font-size: 1.05rem !important; } } h2 { letter-spacing: -0.01em; font-size: var(--h2-mobile); } @media (min-width: 768px) { h2 { font-size: var(--h2-tablet); } } @media (min-width: 1024px) { h2 { font-size: var(--h2-desktop); } } h3 { line-height: 1.2; font-size: var(--h3-mobile); } @media (min-width: 768px) { h3 { font-size: var(--h3-tablet); } } @media (min-width: 1024px) { h3 { font-size: var(--h3-desktop); } } h4 { font-weight: 600; line-height: 1.2; font-size: var(--h4-mobile); } @media (min-width: 768px) { h4 { font-size: var(--h4-tablet); } } @media (min-width: 1024px) { h4 { font-size: var(--h4-desktop); } } .gradient-warm { background: linear-gradient(135deg, #f97316 0%, #fb923c 100%); } .gradient-warm:hover { background: linear-gradient(135deg, #ea580c 0%, #f97316 100%); box-shadow: 0 10px 30px rgba(249, 115, 22, 0.3); } .card-warm { background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,250,240,0.95) 100%); border: 2px solid rgba(249, 115, 22, 0.15); transition: all 0.4s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .card-warm:hover { transform: translateY(-10px); border-color: rgba(249, 115, 22, 0.4); box-shadow: 0 15px 35px rgba(249, 115, 22, 0.2); } .warm-glow { box-shadow: 0 0 40px rgba(249, 115, 22, 0.2); } /* ACCESSIBILITY: Focus Indicators for Keyboard Navigation */ a:focus, button:focus, [role="button"]:focus, .btn-primary:focus, .btn-secondary:focus { outline: 4px solid #f97316 !important; outline-offset: 3px !important; border-radius: 4px; } /* Enhanced focus for mobile menu button */ #mobile-menu-btn:focus { outline: 4px solid #f97316 !important; outline-offset: 3px !important; } /* Focus for text buttons */ button:not(.btn-primary):not(.btn-secondary):focus { outline: 4px solid #f97316 !important; outline-offset: 2px !important; } /* Utility class for screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .focus\:not-sr-only:focus { position: static; width: auto; height: auto; padding: inherit; margin: inherit; overflow: visible; clip: auto; white-space: normal; } .flame-animation { animation: flame-flicker 3s ease-in-out infinite; } @keyframes flame-flicker { 0%, 100% { transform: scale(1) translateY(0px); } 50% { transform: scale(1.05) translateY(-5px); } } .warm-bg { background: linear-gradient(135deg, rgba(249, 115, 22, 0.05) 0%, rgba(251, 146, 60, 0.05) 100%); } @keyframes marquee-left { from { transform: translateX(-50%); } to { transform: translateX(0); } } @keyframes marquee-right { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* 3D Icon Styles */ .icon-3d { perspective: 1000px; display: inline-flex; align-items: center; justify-content: center; font-size: 2.25rem; transition: all 0.3s ease; transform-style: preserve-3d; } .icon-3d:hover { transform: rotateX(10deg) rotateY(10deg) translateZ(10px); filter: drop-shadow(0 10px 20px rgba(249, 115, 22, 0.3)); } .icon-box { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 20px; position: relative; overflow: hidden; box-shadow: 0 8px 20px rgba(249, 115, 22, 0.2); transition: all 0.3s ease; margin-left: auto; margin-right: auto; } .icon-box:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 35px rgba(249, 115, 22, 0.35); } .icon-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); pointer-events: none; } /* Typography Professional Enhancements */ body { line-height: 1.6; font-size: var(--body-mobile); } @media (min-width: 768px) { body { font-size: var(--body-tablet); } } @media (min-width: 1024px) { body { font-size: var(--body-desktop); } } p { font-size: var(--body-mobile); } @media (min-width: 768px) { p { font-size: var(--body-tablet); } } @media (min-width: 1024px) { p { font-size: var(--body-desktop); } } /* Small text - consistent across breakpoints */ small, .text-sm { line-height: 1.5; font-size: 0.875rem; /* 14px - slightly smaller than body */ } /* Extra small text - consistent across breakpoints */ .text-xs { line-height: 1.4; font-size: 0.75rem; /* 12px - smallest text size */ } /* Subtitle/Meta text styling */ .font-semibold { letter-spacing: 0.3px; font-size: var(--h4-mobile); } @media (min-width: 768px) { .font-semibold { font-size: var(--h4-tablet); } } @media (min-width: 1024px) { .font-semibold { font-size: var(--h4-desktop); } } /* BUTTON CONTAINERS - Stack on mobile, full width */ @media (max-width: 640px) { .flex.flex-col.sm\:flex-row > a, .flex.flex-col.sm\:flex-row > button { width: 100%; display: block; } } /* MOBILE IMAGE GALLERY - Horizontal scrolling carousel with 4 visible columns */ @media (max-width: 640px) { /* Show 4 images at a time on mobile (like marquee carousel on desktop) */ .grid.grid-cols-2.sm\:grid-cols-4.md\:grid-cols-6.lg\:grid-cols-8 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* Mobile text center alignment */ @media (max-width: 768px) { p, span, li, a, button, div { text-align: center; } /* Allow left align for specific elements */ nav, nav a { text-align: left; } .text-left { text-align: left; } /* Hero section - left column stays centered on mobile */ .hero-section .order-2 p, .hero-section .order-2 span { text-align: center; } } /* Desktop hero alignment - left column text is left-aligned */ @media (min-width: 768px) { .hero-section .order-2 h1, .hero-section .order-2 p, .hero-section .order-2 span, .hero-section .order-2 div { text-align: left; } } /* MOBILE-FRIENDLY TABLES */ @media (max-width: 767px) { table { display: block; width: 100%; } thead { display: none; } tbody { display: block; width: 100%; } tr { display: block; margin-bottom: 16px; border: 1px solid #fed7aa; border-radius: 8px; padding: 12px; background: white; } td { display: grid; grid-template-columns: 120px 1fr; align-items: start; padding: 8px 0 !important; border: none; text-align: left; } td::before { content: attr(data-label); font-weight: 700; color: #b45309; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.5px; } td:first-child { grid-column: 1 / -1; font-size: 1.125rem; font-weight: 700; color: #92400e; margin-bottom: 8px; padding-top: 0 !important; } td:first-child::before { display: none; } }