/* ========================================================================== UrboEase landing page — brand redesign Dark + gold, matching the customer/provider/serviceman app identity exactly (see lib/theme/dark_theme.dart in the Flutter apps for tokens). Loaded after main.css / urboease-polish.css to fully re-skin the page. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap'); :root { /* Full override of the vendor template's color-variable system — every one of these was a light-theme value (#fff / #f3f9ff / etc.) that leaked through onto wrapper elements we don't directly style. Redefining the whole set here (loaded last in ) is more robust than chasing individual leaks one at a time. */ --base-clr: #f6c602; --base-rgb: 246, 198, 2; --btn-clr: #f6c602; --btn-clr-dark: #c79a00; --btn-rgb: 246, 198, 2; --base-title: #f6c602; --base-white: #f6c602; --body-clr: #ffffff; --light-clr: #141414; --title-clr: #ffffff; --title-rgb: 255, 255, 255; --bs-body-bg: #050505; --bs-body-bg-rgb: 5, 5, 5; --section-bg: #0c0c0c; --section-bg-2: #0c0c0c; --section-light: #141414; --dark-clr: #f6c602; --dark-rgb: 246, 198, 2; --white-clr: #ffffff; --white-rgb: 255, 255, 255; --footer: #050505; --footer-bottom: #050505; --primary-clr: #f6c602; --primary-rgb: 246, 198, 2; --border-clr: #232323; --border-light: #232323; --border-light-only: #232323; --border-dark: #2c2c2c; --border-dark-only: #2c2c2c; --header-bg: rgba(12, 12, 12, 0.92); --ue-bg: #050505; --ue-surface: #0c0c0c; --ue-surface-2: #141414; --ue-surface-3: #1b1b1b; --ue-border: #232323; --ue-border-light: #2c2c2c; --ue-text: #ffffff; --ue-text-dim: #b0b0b0; --ue-text-faint: #7a7a7a; --ue-gold: #f6c602; --ue-gold-light: #fff3c4; --ue-gold-dark: #c79a00; --ue-gold-ink: #1a1400; --ue-font-display: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif; --ue-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; } /* ---------- base / overrides of vendor bootstrap defaults ---------- */ body { background: var(--ue-bg) !important; color: var(--ue-text) !important; font-family: var(--ue-font-body) !important; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, h5, h6, .title, .section-title { font-family: var(--ue-font-display) !important; color: var(--ue-text) !important; letter-spacing: -0.01em; } a { text-decoration: none; } img { max-width: 100%; } .container { max-width: 1240px; } /* ---------- eyebrow labels ---------- */ .eyebrow { display: inline-flex; align-items: center; font-family: var(--ue-font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ue-gold); margin-bottom: 14px; } .eyebrow--center { justify-content: center; width: 100%; } .eyebrow--on-dark { color: var(--ue-gold-light); } .section-title { font-size: 36px; font-weight: 700; line-height: 1.2; text-wrap: balance; margin-bottom: 16px; text-transform: none !important; } .py-25 { padding-top: 90px; padding-bottom: 90px; } /* ========================================================================== Top bar + header ========================================================================== */ .navbar-top { background: var(--ue-surface); border-bottom: 1px solid var(--ue-border); padding: 8px 0; } .navbar-top-wrapper { display: flex; align-items: center; justify-content: flex-end; gap: 24px; } .navbar-top .topbar-link, .navbar-top .tel-link { color: var(--ue-text-dim) !important; font-family: var(--ue-font-body); font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; } .navbar-top .tel-link:hover, .navbar-top .topbar-link:hover { color: var(--ue-gold) !important; } .navbar-top .lang-menu { background: var(--ue-surface-2); border: 1px solid var(--ue-border); } .navbar-top .dropdown-item { color: var(--ue-text-dim); } .navbar-top .dropdown-item:hover { background: var(--ue-surface-3); color: var(--ue-text); } header { background: transparent; } .navbar-bottom { background: rgba(5, 5, 5, 0.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--ue-border); position: sticky; top: 0; z-index: 40; transition: background 0.2s ease; } .navbar-bottom.active { background: rgba(5, 5, 5, 0.97); } .navbar-bottom-wrapper { display: flex; align-items: center; gap: 28px; padding: 14px 0; background: transparent !important; } .navbar-bottom-wrapper .logo { height: auto !important; width: auto !important; display: flex !important; align-items: center !important; } .navbar-bottom-wrapper .logo img { height: 32px !important; width: auto !important; object-fit: contain !important; } .navbar-bottom .menu { display: flex; align-items: center; gap: 28px; margin: 0 0 0 auto; padding: 0; list-style: none; } .navbar-bottom .menu a { font-family: var(--ue-font-body); font-size: 14.5px; font-weight: 600; color: var(--ue-text-dim); position: relative; padding: 4px 0; } .navbar-bottom .menu a:hover, .navbar-bottom .menu a.active { color: var(--ue-text); } .navbar-bottom .menu a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--ue-gold); border-radius: 2px; } .cmn--btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ue-gold); color: var(--ue-gold-ink) !important; font-family: var(--ue-font-body); font-weight: 700; font-size: 14.5px; padding: 13px 26px; border-radius: 10px; border: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; box-shadow: 0 8px 24px -8px rgba(246, 198, 2, 0.45); } .cmn--btn:hover { background: var(--ue-gold-light); transform: translateY(-1px); color: var(--ue-gold-ink) !important; } .cmn--btn2 { display: inline-flex; align-items: center; gap: 8px; color: var(--ue-text) !important; font-family: var(--ue-font-body); font-weight: 700; font-size: 14.5px; border-bottom: 2px solid var(--ue-gold); padding-bottom: 3px; } .cmn--btn2 i { color: var(--ue-gold); transition: transform 0.15s ease; } .cmn--btn2:hover i { transform: translateX(4px); } .nav-toggle span { background: var(--ue-text); } /* ========================================================================== Hero ========================================================================== */ .banner-section { padding: 64px 0 90px; position: relative; background: radial-gradient(680px 420px at 88% -8%, rgba(246, 198, 2, 0.14), transparent 70%), var(--ue-bg); } .banner-wrapper { display: flex; align-items: center; gap: 56px; } .banner-content { flex: 1 1 480px; max-width: 560px; } .banner-content .subtitle::before { display: none !important; content: none !important; } .banner-content .subtitle { display: inline-flex; align-items: center; font-family: var(--ue-font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ue-gold); margin-bottom: 18px; } .banner-content .title { font-size: 52px; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 22px; text-wrap: balance; } .banner-content .txt { font-family: var(--ue-font-body); font-size: 17px; line-height: 1.65; color: var(--ue-text-dim); max-width: 46ch; margin-bottom: 32px; } .hero-cta { gap: 14px; margin-bottom: 30px; } .hero-cta__primary { font-size: 15px; padding: 14px 28px; } .hero-cta__primary i { font-size: 18px; } .hero-cta__secondary { display: inline-flex; align-items: center; gap: 8px; color: var(--ue-text) !important; font-family: var(--ue-font-body); font-weight: 700; font-size: 15px; padding: 14px 22px; border: 1.5px solid var(--ue-border-light); border-radius: 10px; transition: border-color 0.15s ease, background 0.15s ease; } .hero-cta__secondary:hover { border-color: var(--ue-gold); background: rgba(246, 198, 2, 0.06); color: var(--ue-text) !important; } .hero-cta__secondary i { color: var(--ue-gold); } .trust-badges { gap: 10px; } .trust-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ue-font-body); font-size: 12.5px; font-weight: 600; color: var(--ue-text-dim); background: var(--ue-surface-2); border: 1px solid var(--ue-border); padding: 7px 13px; border-radius: 99px; } .trust-badge i { color: var(--ue-gold); font-size: 14px; } .banner-thumb { flex: 1 1 420px; position: relative; max-width: 480px; min-height: 420px; } .banner-thumb-main { position: relative; width: 84%; aspect-ratio: 4/5; border-radius: 20px; overflow: hidden; border: 1px solid var(--ue-border-light); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); } .banner-thumb-main img { width: 100%; height: 100%; object-fit: cover; object-position: 78% center; display: block; } .banner-thumb-accent { position: absolute; width: 42%; aspect-ratio: 1/1; border-radius: 16px; overflow: hidden; border: 3px solid var(--ue-bg); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.65); } .banner-thumb-accent img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; display: block; } .banner-thumb-accent--1 { right: -6%; top: 6%; } .banner-thumb-accent--2 { right: 4%; bottom: -4%; width: 38%; } .banner-stat-card { position: absolute; left: -8%; bottom: 10%; display: flex; align-items: center; gap: 12px; background: var(--ue-surface-2); border: 1px solid var(--ue-border-light); border-radius: 14px; padding: 14px 18px; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.7); max-width: 240px; } .banner-stat-card__icon { flex: none; width: 38px; height: 38px; border-radius: 10px; background: rgba(246, 198, 2, 0.14); color: var(--ue-gold); display: flex; align-items: center; justify-content: center; font-size: 18px; } .banner-stat-card strong { display: block; font-family: var(--ue-font-display); font-size: 13.5px; color: var(--ue-text); } .banner-stat-card span { font-family: var(--ue-font-body); font-size: 11.5px; color: var(--ue-text-faint); } /* ========================================================================== Promo card ========================================================================== */ .promo-section { padding: 0 0 20px; } .promo-card { display: flex; align-items: center; gap: 20px; background: linear-gradient(120deg, rgba(246, 198, 2, 0.14), rgba(246, 198, 2, 0.03)); border: 1px solid rgba(246, 198, 2, 0.3); border-radius: 16px; padding: 22px 26px; flex-wrap: wrap; } .promo-card__icon { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--ue-gold); color: var(--ue-gold-ink); display: flex; align-items: center; justify-content: center; font-size: 22px; } .promo-card__content { flex: 1 1 260px; } .promo-card__content h3 { font-size: 18px; font-weight: 700; margin: 0 0 4px; } .promo-card__content p { font-family: var(--ue-font-body); font-size: 13.5px; color: var(--ue-text-dim); margin: 0; } .promo-card__code { display: flex; align-items: center; gap: 10px; background: var(--ue-surface-2); border: 1.5px dashed var(--ue-gold); border-radius: 10px; padding: 10px 16px; cursor: pointer; } .promo-card__code span { font-family: var(--ue-font-display); font-weight: 700; letter-spacing: 0.05em; color: var(--ue-gold); } .promo-card__copy { background: none; border: none; color: var(--ue-text-dim); } /* ========================================================================== Services ========================================================================== */ .service-section { position: relative; } .service-section .container > .eyebrow, .service-section .section-title { text-align: left; } .service-slide-nav { position: absolute; right: 24px; top: 8px; display: flex; gap: 10px; z-index: 20; } .slide-icon { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ue-border-light); display: flex; align-items: center; justify-content: center; background: var(--ue-bg); color: var(--ue-text-dim); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .slide-icon:hover { border-color: var(--ue-gold); color: var(--ue-gold); } .service__item { display: block; background: var(--ue-surface-2); border: 1px solid var(--ue-border); border-radius: 16px; padding: 26px 22px; height: 100%; transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease; } .service__item:hover { border-color: rgba(246, 198, 2, 0.45); background: var(--ue-surface-3); transform: translateY(-3px); } .service__item-icon { width: 58px; height: 58px; border-radius: 14px; background: rgba(246, 198, 2, 0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .service__item-icon img { width: 30px; height: 30px; object-fit: contain; } .service__item .title { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .service__item .txt { font-family: var(--ue-font-body); font-size: 13px; color: var(--ue-text-faint); margin-bottom: 14px; min-height: 34px; } .service__item-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ue-font-body); font-size: 13px; font-weight: 700; color: var(--ue-gold); } .slider-wrapper .service__item-popup { background-color: var(--ue-surface-2) !important; border: 1px solid var(--ue-border-light); border-radius: 20px; padding: 20px; align-items: center; justify-content: center; overflow-y: auto; } .slider-wrapper .service__item-popup.active { opacity: 1 !important; visibility: visible !important; transform: none !important; } .service__item-popup-inner { position: relative; width: 100%; display: flex; gap: 40px; padding: 20px; } .service__item-popup .left-content { flex: 0 0 240px; } .service__item-popup .left-content .service__item-icon { width: 72px; height: 72px; } .service__item-popup .left-content .service__item-icon img { width: 38px; height: 38px; } .service__item-popup .right-content { flex: 1; } .service__item-popup .top-text { font-family: var(--ue-font-body); font-size: 14px; line-height: 1.7; color: var(--ue-text-dim); } .close__popup { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; background: var(--ue-surface-3); border: 1px solid var(--ue-border-light); color: var(--ue-text-dim); } .service-inner-slider-item { text-align: center; } .service-inner-slider-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; margin-bottom: 8px; border: 1px solid var(--ue-border-light); } .service-inner-slider-item span { display: block; font-family: var(--ue-font-body); font-size: 12px; color: var(--ue-text-dim); } /* ========================================================================== City expansion countdown ========================================================================== */ .expansion-section { padding-top: 10px; padding-bottom: 10px; } .expansion-card { position: relative; text-align: center; padding: 64px 32px; border-radius: 24px; border: 1px solid rgba(246, 198, 2, 0.28); background: radial-gradient(560px 280px at 50% 0%, rgba(246, 198, 2, 0.14), transparent 70%), var(--ue-surface); overflow: hidden; } .expansion-title { font-family: var(--ue-font-display); font-weight: 800; font-size: 44px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ue-text); margin: 0 0 14px; text-wrap: balance; } .expansion-sub { font-family: var(--ue-font-body); font-size: 15.5px; color: var(--ue-text-dim); max-width: 46ch; margin: 0 auto 40px; line-height: 1.6; } .expansion-countdown { display: flex; justify-content: center; gap: 14px; margin-bottom: 36px; flex-wrap: wrap; } .expansion-countdown__unit { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 92px; padding: 18px 0 14px; border-radius: 14px; background: var(--ue-surface-2); border: 1px solid var(--ue-border-light); } .expansion-countdown__num { font-family: var(--ue-font-display); font-size: 34px; font-weight: 700; color: var(--ue-gold); font-variant-numeric: tabular-nums; line-height: 1; } .expansion-countdown__label { margin-top: 8px; font-family: var(--ue-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ue-text-faint); } .expansion-cta { font-size: 14.5px; } @media (max-width: 575px) { .expansion-card { padding: 44px 20px; } .expansion-title { font-size: 30px; } .expansion-countdown__unit { width: 72px; padding: 14px 0 10px; } .expansion-countdown__num { font-size: 26px; } } /* ========================================================================== How it works ========================================================================== */ .how-it-works-section { background: var(--ue-surface); border-top: 1px solid var(--ue-border); border-bottom: 1px solid var(--ue-border); } .how-it-works-section .container { text-align: center; } .how-it-works-section .section-title { text-align: center; } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; text-align: left; } .step-card { position: relative; background: var(--ue-surface-2); border: 1px solid var(--ue-border); border-radius: 18px; padding: 30px 26px; } .step-card__num { font-family: var(--ue-font-display); font-size: 13px; font-weight: 700; color: var(--ue-text-faint); letter-spacing: 0.08em; } .step-card__icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(246, 198, 2, 0.12); color: var(--ue-gold); display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 14px 0 18px; } .step-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; } .step-card p { font-family: var(--ue-font-body); font-size: 14px; color: var(--ue-text-dim); line-height: 1.6; margin: 0; } /* ========================================================================== About ========================================================================== */ .about__wrapper { display: flex; align-items: center; gap: 56px; } .about__wrapper-content { flex: 1 1 420px; background: transparent !important; } .about__wrapper-content p { font-family: var(--ue-font-body); font-size: 15.5px; line-height: 1.75; color: var(--ue-text-dim); margin-bottom: 26px; } .about__wrapper-thumb { flex: 1 1 480px; position: relative; } .about__wrapper-thumb .main-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: center 78%; border-radius: 20px; border: 1px solid var(--ue-border-light); display: block; } /* ========================================================================== Provider CTA ========================================================================== */ .cta-section { padding: 0 0 90px; } .cta-wrapper { display: flex; align-items: stretch; background: linear-gradient(135deg, #141414 0%, #0a0a0a 100%); border: 1px solid var(--ue-border-light); border-radius: 24px; overflow: hidden; position: relative; } .cta-wrapper::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 260px at 100% 0%, rgba(246, 198, 2, 0.16), transparent 70%); pointer-events: none; } .cta-wrapper__thumb { flex: 0 0 300px; position: relative; } .cta-wrapper__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 320px; } .cta-wrapper .content { flex: 1; padding: 54px 48px; position: relative; z-index: 1; } .cta-wrapper .title { font-size: 30px; font-weight: 800; text-transform: none !important; margin-bottom: 14px; } .cta-wrapper .text-btn-title { font-family: var(--ue-font-body); font-size: 15.5px; color: var(--ue-text-dim); max-width: 46ch; margin-bottom: 26px; } /* ========================================================================== Newsletter ========================================================================== */ .subscribe-newsletter { background: var(--ue-surface); border-top: 1px solid var(--ue-border); } .subscribe-newsletter h3 { font-size: 22px; font-weight: 700; text-transform: none !important; } .subscribe-newsletter p { font-family: var(--ue-font-body); color: var(--ue-text-dim); font-size: 14.5px; } .subscribe-newsletter .form-control { background: var(--ue-surface-2); border: 1px solid var(--ue-border-light); color: var(--ue-text); } .subscribe-newsletter .form-control::placeholder { color: var(--ue-text-faint); } .subscribe-newsletter .form-control:focus { border-color: var(--ue-gold); box-shadow: none; background: var(--ue-surface-2); color: var(--ue-text); } .subscribe-btn { white-space: nowrap; } /* ========================================================================== Footer ========================================================================== */ footer { background: var(--ue-bg); border-top: 1px solid var(--ue-border); } .footer-top { padding: 70px 0 40px; } .footer__wrapper-widget .logo img { height: 30px; margin-bottom: 18px; } .footer__wrapper-widget .cont p { font-family: var(--ue-font-body); font-size: 14px; color: var(--ue-text-faint); max-width: 32ch; } .footer__wrapper-link { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer__wrapper-link a { font-family: var(--ue-font-body); font-size: 14px; color: var(--ue-text-dim); } .footer__wrapper-link a:hover { color: var(--ue-gold); } .footer__wrapper-contact h6 { font-family: var(--ue-font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ue-text-faint); margin: 10px 0 6px; } .footer__wrapper-contact .icon { width: 30px; height: 30px; filter: invert(76%) sepia(59%) saturate(700%) hue-rotate(1deg) brightness(103%); } .footer__wrapper-contact a, .footer__wrapper-contact span { font-family: var(--ue-font-body); font-size: 14.5px; color: var(--ue-text); } .footer-bottom { border-top: 1px solid var(--ue-border); font-family: var(--ue-font-body); font-size: 13px; color: var(--ue-text-faint); } /* ========================================================================== Inner page header (About Us, Terms & Conditions, etc.) ========================================================================== */ .page-header { border-radius: 0 !important; padding: 34px 0 22px !important; text-align: left !important; background: transparent !important; } .page-header::before { display: none !important; } .page-header .title { font-family: var(--ue-font-display) !important; font-size: 28px !important; font-weight: 700 !important; text-transform: capitalize !important; color: var(--ue-text) !important; } .page-header .title::before { content: ""; display: block; width: 26px; height: 3px; background: var(--ue-gold); border-radius: 2px; margin-bottom: 12px; } .dynamic-page-wrapper { font-family: var(--ue-font-body); color: var(--ue-text-dim); font-size: 15px; line-height: 1.75; max-width: 760px; } .dynamic-page-wrapper h1, .dynamic-page-wrapper h2, .dynamic-page-wrapper h3, .dynamic-page-wrapper h4 { color: var(--ue-text); font-family: var(--ue-font-display); margin-top: 28px; } .dynamic-page-wrapper a { color: var(--ue-gold); } .dynamic-page-wrapper ul, .dynamic-page-wrapper ol { padding-left: 22px; margin: 14px 0 24px; } .dynamic-page-wrapper li { margin-bottom: 10px; } .dynamic-page-wrapper p { margin-bottom: 18px; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 991px) { .banner-wrapper { flex-direction: column; } .banner-content { max-width: 100%; text-align: center; } .banner-content .subtitle, .banner-content .hero-cta, .banner-content .trust-badges { justify-content: center; } .banner-content .txt { margin-left: auto; margin-right: auto; } .banner-thumb { max-width: 380px; margin: 40px auto 0; } .about__wrapper { flex-direction: column; } .cta-wrapper { flex-direction: column; } .cta-wrapper__thumb { flex-basis: 220px; } .steps-grid { grid-template-columns: 1fr; } .navbar-bottom .menu { display: none; } } @media (max-width: 575px) { .banner-content .title { font-size: 36px; } .section-title { font-size: 27px; } .cta-wrapper .content { padding: 36px 26px; } .service__item-popup-inner { flex-direction: column; padding: 26px; } }