/* ============================================ RIVIERA APARTS — Custom Styles ============================================ */ /* Brand color tokens — mirror the Tailwind config (index.html) so this stylesheet references the palette instead of repeating hex literals. */ :root { --cream: #FDFBF7; --cream-dark: #F4F0EA; --charcoal: #1b262c; --off-black: #1a1a1a; --terracotta: #8b5e50; --terracotta-dark: #7a5245; --steel: #4A6D8C; --muted-gray: #5D6470; } /* Inline SVG icons (sprite at the top of ): sized by the inherited font-size so the existing text-* utilities keep working like the old icon font did. */ .icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor; } /* Film-grain noise overlay */ body::before { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; } /* Smooth scroll */ html { scroll-behavior: smooth; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--cream); } ::-webkit-scrollbar-thumb { background: var(--terracotta); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--terracotta-dark); } /* ============================================ Hero entrance Pure CSS so the LCP element (hero subtitle) paints on the first frames instead of waiting for main.js + IntersectionObserver. ============================================ */ @keyframes hero-in { from { opacity: 0; transform: translateY(30px); } } /* The headline and subtitle (children 2 and 3) stay static: they are the LCP candidates, and any opacity-from-0 animation re-emits LCP at the end of its delay. Only the framing elements animate in. */ .hero-intro > *:nth-child(1), .hero-intro > *:nth-child(4), .hero-intro > *:nth-child(5) { animation: hero-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } .hero-intro > *:nth-child(1) { animation-delay: 0.05s; } .hero-intro > *:nth-child(4) { animation-delay: 0.15s; } .hero-intro > *:nth-child(5) { animation-delay: 0.25s; } /* ============================================ Scroll Reveal Animations ============================================ */ /* Hidden-until-revealed only when JS actually runs (html.js is added inline in ); otherwise the content must render as-is. */ .js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } [data-reveal].revealed { opacity: 1; transform: translateY(0); } /* Staggered children */ .js [data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } [data-reveal-stagger].revealed > *:nth-child(1) { transition-delay: 0.05s; } [data-reveal-stagger].revealed > *:nth-child(2) { transition-delay: 0.12s; } [data-reveal-stagger].revealed > *:nth-child(3) { transition-delay: 0.19s; } [data-reveal-stagger].revealed > *:nth-child(4) { transition-delay: 0.26s; } [data-reveal-stagger].revealed > *:nth-child(5) { transition-delay: 0.33s; } [data-reveal-stagger].revealed > *:nth-child(6) { transition-delay: 0.40s; } [data-reveal-stagger].revealed > *:nth-child(7) { transition-delay: 0.47s; } [data-reveal-stagger].revealed > * { opacity: 1; transform: translateY(0); } /* ============================================ Gallery horizontal scroll ============================================ */ .gallery-scroll { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .gallery-scroll::-webkit-scrollbar { display: none; } .gallery-scroll > * { scroll-snap-align: start; flex-shrink: 0; } /* Floor tabs scroll horizontally on narrow screens; without this the global terracotta scrollbar paints a bar right under the active tab. */ #floorTabs { scrollbar-width: none; } #floorTabs::-webkit-scrollbar { display: none; } /* ============================================ Double-bezel card ============================================ */ /* Single elevation treatment (soft shadow), not edge + shadow together */ .card-bezel { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 20px 40px -15px rgba(0, 0, 0, 0.05); } .card-bezel-dark { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 20px 40px -15px rgba(0, 0, 0, 0.3); } /* ============================================ Navigation ============================================ */ .nav-scrolled { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08); } /* Very narrow phones: keep the nav phone number but drop the icon and shrink it slightly so logo + number + hamburger fit without crowding. */ @media (max-width: 360px) { #navPhone { font-size: 13px; gap: 0; } #navPhone .icon { display: none; } } /* Mobile menu overlay */ .mobile-menu { opacity: 0; visibility: hidden; /* visibility flips to hidden only AFTER the opacity fade, so the fade-out is visible; on open it flips instantly (see .active) */ transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.5s; } .mobile-menu.active { opacity: 1; visibility: visible; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s; } .mobile-menu a { opacity: 0; transform: translateY(20px); transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .mobile-menu.active a:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); } .mobile-menu.active a:nth-child(2) { transition-delay: 0.15s; opacity: 1; transform: translateY(0); } .mobile-menu.active a:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); } .mobile-menu.active a:nth-child(4) { transition-delay: 0.25s; opacity: 1; transform: translateY(0); } .mobile-menu.active a:nth-child(5) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); } .mobile-menu.active a:nth-child(6) { transition-delay: 0.35s; opacity: 1; transform: translateY(0); } .mobile-menu.active a:nth-child(7) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); } .mobile-menu.active a:nth-child(8) { transition-delay: 0.45s; opacity: 1; transform: translateY(0); } .mobile-menu.active a:nth-child(9) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); } /* Hamburger animation */ .hamburger span { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ============================================ Floor plan tabs ============================================ */ .floor-tab { transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .floor-tab.active { background-color: var(--terracotta); color: #fff; border-color: var(--terracotta); } /* Floor plan image transition */ .floor-plan-img { transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* Floor plan is clickable — reveal the picker hint on hover/focus */ @media (hover: hover) { .floor-plan-trigger:hover .floor-plan-hint { opacity: 1; } } .floor-plan-trigger:focus-visible .floor-plan-hint { opacity: 1; } /* On touch devices (no hover) keep the hint always visible so the affordance isn't hidden behind a hover that can never happen. */ @media (hover: none) { .floor-plan-hint { opacity: 1; } } /* ============================================ Form styles ============================================ */ .form-input { transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .form-input:focus { border-color: rgba(139, 94, 80, 0.5); /* var(--terracotta) @ 50% */ box-shadow: 0 0 0 3px rgba(139, 94, 80, 0.1); } /* ============================================ Lead Modal ============================================ */ .lead-modal { opacity: 0; visibility: hidden; /* visibility flips to hidden only AFTER the fade so the close transition shows */ transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s; } .lead-modal.active { opacity: 1; visibility: visible; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s; } .lead-modal-dialog { transform: translateY(16px) scale(0.98); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .lead-modal.active .lead-modal-dialog { transform: translateY(0) scale(1); } /* ============================================ FAQ accordion (native

) ============================================ */ .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary { list-style: none; } .faq-icon { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .faq-item[open] .faq-icon { transform: rotate(45deg); /* + becomes × */ } /* Allow height animations to/from `auto` (needed for the accordion below). */ :root { interpolate-size: allow-keywords; } /* Smooth open AND close — pure CSS via ::details-content. Direction-specific easing: the base rule applies while CLOSING (ease-in, snappy — no crawl at the end), the [open] rule applies while OPENING (ease-out, soft landing). Browsers without ::details-content support simply toggle instantly. */ .faq-item::details-content { height: 0; overflow: hidden; transition: height 0.26s cubic-bezier(0.4, 0, 1, 1), content-visibility 0.26s allow-discrete; } .faq-item[open]::details-content { height: auto; transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1), content-visibility 0.35s allow-discrete; } /* ============================================ Scroll indicator animation ============================================ */ @keyframes scrollBounce { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(8px); opacity: 1; } } .scroll-indicator { animation: scrollBounce 2s cubic-bezier(0.16, 1, 0.3, 1) infinite; } /* ============================================ Payment bar ============================================ */ .payment-bar { background: linear-gradient(90deg, var(--terracotta) 30%, var(--steel) 30%); } /* ============================================ Utility ============================================ */ .ease-luxury { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } /* Image hover zoom — only on hover-capable (non-touch) devices */ .img-zoom { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } @media (hover: hover) { .group:hover .img-zoom { transform: scale(1.05); } } /* ============================================ 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; } [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; } } /* ============================================ Typography ============================================ */ h1, h2, h3 { text-wrap: balance; } /* The precompiled tailwind.css only emits utilities it found at build time, so `leading-5` was never generated. Define it here (loaded after tailwind.css) so feature-list icons sized with `text-lg` drop their 28px line-height to the 20px of the adjacent `text-sm` label and align to the first text line. */ .leading-5 { line-height: 1.25rem; } /* ============================================ Touch & Safe Areas ============================================ */ a, button, select, input { touch-action: manipulation; } /* ============================================ Keyboard focus — consistent, on-brand ring (form inputs keep their own ring; these cover links, buttons, gallery cards and other tabbable controls) ============================================ */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; border-radius: 2px; } /* ============================================ g-plus CRM widgets — building-picker button & layout iframe (ported from the previous site123 custom CSS) ============================================ */ .g__building-button i { padding: 30px !important; background: #6a7690 !important; } .g__building-button i span { background-image: url('data:image/svg+xml;utf8,') !important; width: 40px !important; height: 40px !important; } #layout-iframe { z-index: 9999 !important; } .btn-close-iframe { z-index: 99991 !important; } @media (max-width: 700px) { #layout-iframe { height: 100dvh !important; width: 100% !important; top: 0 !important; left: 0 !important; } } /* Пока видна мобильная панель #stickyCta (body.crm-lift), поднимаем плавающие CRM-кнопки над ней, чтобы не было накладки. Только на мобиле — панель скрыта от lg (≥1024px). --crm-lift выставляет initStickyCta(). */ @media (max-width: 1023px) { /* Transition на самих кнопках (а не внутри .crm-lift), чтобы подъём И возврат анимировались одинаково — той же кривой/длительностью, что у #stickyCta (duration-500 + cubic-bezier(0.16,1,0.3,1)). */ .callback-button, .g__building-button, #cb-invitation-bubble { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } body.crm-lift .callback-button, body.crm-lift .g__building-button, body.crm-lift #cb-invitation-bubble { transform: translateY(calc(-1 * var(--crm-lift, 80px))) !important; } }