/* ARIDES PREMIUM COSMETIC V2 */ /* Задача: - не перегламурить - усилить иерархию - большие блоки сделать "дороже" - маленькие карточки сделать чище - фото автобуса оформить как дорогую витрину */ /* ========================================================= PAGE BACKGROUND ========================================================= */ body { background: radial-gradient( 1200px 420px at 12% 0%, rgba(24,185,109,.055), transparent 58% ), radial-gradient( 1000px 360px at 100% 0%, rgba(65,129,255,.045), transparent 62% ), linear-gradient( 180deg, #f7fafc 0%, #f4f8fb 46%, #f7faf9 100% ); } /* ========================================================= HEADER ========================================================= */ .site-header { backdrop-filter: saturate(1.06); border-bottom: 1px solid rgba(219,228,236,.85); } /* ========================================================= ORDER FORM — hero side ========================================================= */ .order-form { position: relative; overflow: hidden; background: linear-gradient( 180deg, rgba(255,255,255,.99) 0%, rgba(250,252,253,.98) 100% ) !important; border: 1px solid rgba(214,223,231,.9) !important; box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 18px 34px rgba(23,39,56,.08), 0 5px 12px rgba(23,39,56,.03) !important; } .order-form::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 48px; background: linear-gradient( 180deg, rgba(255,255,255,.82), rgba(255,255,255,0) ); pointer-events: none; } /* ========================================================= HERO IMAGE / SHOWCASE ========================================================= */ .hero-center, .hero-media, .hero-visual, .hero-image, .hero-card { position: relative; overflow: hidden; border: 1px solid rgba(220,228,235,.88); border-radius: 28px; background: linear-gradient( 180deg, rgba(255,255,255,.96), rgba(247,250,252,.95) ); box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 24px 38px rgba(23,39,56,.08), 0 6px 15px rgba(23,39,56,.035); } .hero-center::after, .hero-media::after, .hero-visual::after, .hero-image::after, .hero-card::after { content: ""; position: absolute; left: 14px; right: 14px; top: 1px; height: 64px; border-radius: inherit; background: linear-gradient( 180deg, rgba(255,255,255,.42), rgba(255,255,255,0) ); pointer-events: none; } /* ========================================================= SMALL SERVICE CARDS ========================================================= */ .service-card { position: relative; overflow: hidden; background: linear-gradient( 180deg, rgba(255,255,255,1) 0%, rgba(250,252,253,.98) 100% ) !important; border: 1px solid rgba(220,228,235,.88) !important; box-shadow: 0 1px 0 rgba(255,255,255,.97) inset, 0 8px 18px rgba(23,39,56,.045), 0 2px 6px rgba(23,39,56,.02) !important; } .service-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.97) inset, 0 12px 22px rgba(23,39,56,.07), 0 4px 9px rgba(23,39,56,.028) !important; } .service-card::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 24px; background: linear-gradient( 180deg, rgba(255,255,255,.56), rgba(255,255,255,0) ); pointer-events: none; } /* ========================================================= BIG INFORMATION CARDS карта / почему / цены / отзывы ========================================================= */ .map-card, .why-card, .prices-card, .review-card { position: relative; overflow: hidden; background: linear-gradient( 180deg, rgba(255,255,255,.995) 0%, rgba(249,251,253,.985) 100% ) !important; border: 1px solid rgba(214,223,231,.92) !important; box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 18px 34px rgba(23,39,56,.07), 0 5px 12px rgba(23,39,56,.026) !important; } .map-card::before, .why-card::before, .prices-card::before, .review-card::before { content: ""; position: absolute; left: 12px; right: 12px; top: 1px; height: 44px; background: linear-gradient( 180deg, rgba(255,255,255,.72), rgba(255,255,255,0) ); pointer-events: none; } .map-card::after, .why-card::after, .prices-card::after, .review-card::after { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, rgba(24,185,109,.22), rgba(24,185,109,.07), rgba(24,185,109,.22) ); } .map-card:hover, .why-card:hover, .prices-card:hover, .review-card:hover { box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 22px 40px rgba(23,39,56,.09), 0 6px 14px rgba(23,39,56,.03) !important; } /* ========================================================= TYPOGRAPHY INSIDE BIG PANELS ========================================================= */ .map-card h2, .map-card h3, .why-card h2, .why-card h3, .prices-card h2, .prices-card h3, .review-card h2, .review-card h3 { color: #23334a !important; font-weight: 900 !important; letter-spacing: -.01em; } .map-card p, .why-card p, .prices-card p, .review-card p { color: #6d7c8e; } /* ========================================================= PRICE LIST ITEMS ========================================================= */ .prices-card li, .prices-card .price-item, .prices-card .pricing-row { border-radius: 16px; background: linear-gradient( 180deg, rgba(255,255,255,.96), rgba(248,250,252,.92) ); } /* ========================================================= REVIEW CARD CONTENT ========================================================= */ .review-card .fb-inline-reviews, .review-card .arides-review-carousel { border-radius: 18px; background: linear-gradient( 180deg, rgba(255,255,255,.82), rgba(248,251,252,.86) ); box-shadow: 0 1px 0 rgba(255,255,255,.95) inset; } /* ========================================================= BUTTONS ========================================================= */ .btn-order, button[type="submit"], .header-actions .btn { box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 -1px 0 rgba(0,80,42,.16) inset, 0 10px 18px rgba(16,169,91,.18) !important; } .service-arrow { background: linear-gradient( 180deg, #29c86f 0%, #18b968 100% ) !important; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 10px rgba(16,169,91,.14) !important; } /* ========================================================= AIR / SPACING ========================================================= */ .map-card, .why-card, .prices-card { margin-top: 6px; } .service-card + .service-card { margin-left: 0; } /* ========================================================= DESKTOP ONLY — stronger hierarchy ========================================================= */ @media (min-width: 1101px) { .service-card { box-shadow: 0 1px 0 rgba(255,255,255,.97) inset, 0 7px 15px rgba(23,39,56,.04), 0 2px 5px rgba(23,39,56,.016) !important; } .map-card, .why-card, .prices-card, .review-card, .order-form { box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 20px 36px rgba(23,39,56,.078), 0 6px 14px rgba(23,39,56,.028) !important; } } /* ========================================================= MOBILE — keep calm ========================================================= */ @media (max-width: 760px) { .hero-center, .hero-media, .hero-visual, .hero-image, .hero-card, .map-card, .why-card, .prices-card, .review-card, .order-form { box-shadow: 0 1px 0 rgba(255,255,255,.97) inset, 0 10px 22px rgba(23,39,56,.05) !important; } }