/* ============================================================ City Home Service – Premium customer theme (premium.css) Loaded ONLY on customer-facing pages, after customer.css. Admin / provider panels are not affected. ============================================================ */ :root { --ink: #0b1f24; --ink-soft: #35505a; --paper: #f6faf9; --line: #e3ecea; --gold: #f5b301; --ring: 0 0 0 4px rgba(13,148,136,.16); --lift-sm: 0 1px 2px rgba(11,31,36,.05), 0 8px 24px rgba(11,31,36,.06); --lift-md: 0 2px 4px rgba(11,31,36,.05), 0 18px 44px rgba(11,31,36,.09); --lift-brand: 0 14px 34px rgba(13,148,136,.28); } /* ── Base ─────────────────────────────────────────────────── */ body { background: var(--paper); color: var(--ink); text-rendering: optimizeLegibility; } ::selection { background: rgba(13,148,136,.22); } h1, h2, h3, h4, h5, h6 { color: var(--ink); letter-spacing: -.025em; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; } .text-muted { color: #5b7078 !important; } .section-title { color: var(--ink); font-weight: 800; letter-spacing: -.03em; } .section-subtitle { color: #5b7078; max-width: 640px; margin-left: auto; margin-right: auto; } .bg-white { background: #fff !important; } .bg-light { background: var(--paper) !important; } /* ── Buttons ──────────────────────────────────────────────── */ .btn-primary-gradient { background-image: linear-gradient(135deg, #0f766e 0%, #0d9488 45%, #14b8a6 100%); background-size: 160% auto; border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 24px rgba(13,148,136,.28); font-weight: 700; letter-spacing: 0; } .btn-primary-gradient:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), var(--lift-brand); } .btn-primary-gradient:active { transform: translateY(0); } .btn-outline-primary-gradient { border: 1.5px solid #b7dcd7; color: var(--primary-dark); background: #fff; font-weight: 700; } .btn-outline-primary-gradient:hover { transform: translateY(-1px); } .btn { font-weight: 700; } .btn-primary { background: var(--primary); border-color: var(--primary); box-shadow: 0 8px 20px rgba(13,148,136,.22); } /* ── Navbar ───────────────────────────────────────────────── */ .navbar-cp { background: rgba(255,255,255,.78); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid rgba(11,31,36,.06); padding: .7rem 0; } .navbar-cp.scrolled { box-shadow: 0 8px 30px rgba(11,31,36,.07); padding: .55rem 0; } .navbar-brand-text { font-weight: 800; letter-spacing: -.03em; font-size: 1.05rem; } .navbar-brand-subtext { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .navbar-logo-img { filter: drop-shadow(0 4px 8px rgba(13,148,136,.18)); } .nav-browse-link { display: inline-flex; align-items: center; padding: .55rem 1.1rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--ink); border: 1px solid var(--line); background: #fff; transition: all .25s; } .nav-browse-link:hover { border-color: var(--primary); color: var(--primary-dark); box-shadow: var(--lift-sm); } .nav-cart-btn { position: relative; width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); color: var(--ink); } .mob-menu-btn { border-radius: 14px; } /* ── Hero ─────────────────────────────────────────────────── */ .hero-section { background: radial-gradient(700px 420px at 85% 10%, rgba(20,184,166,.28), transparent 60%), radial-gradient(520px 360px at 0% 100%, rgba(14,165,233,.18), transparent 60%), linear-gradient(160deg, rgba(5,14,19,.94) 0%, rgba(8,28,33,.84) 100%), url('../images/hero-bg.jpeg'); background-size: cover; background-position: center; min-height: 78vh; } .hero-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%); } .hero-section::after { background: var(--paper); } .hero-section p.text-white-50.fw-600 { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #d9f5f1 !important; font-size: .74rem !important; letter-spacing: .06em !important; } .display-title { font-weight: 800; letter-spacing: -.045em; line-height: 1.08; text-wrap: balance; } .hero-section .lead-text { color: rgba(226,240,238,.78) !important; line-height: 1.65; } .hero-search { background: rgba(255,255,255,.96); border-radius: 20px; padding: 8px 8px 8px 16px; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 0 6px rgba(255,255,255,.07); } .hero-search input { color: var(--ink); font-weight: 500; } .hero-search .btn-primary-gradient { border-radius: 14px; padding: .7rem 1.3rem; } .hero-section .vr { display: none; } .hero-section .d-flex.gap-4.mt-4 { gap: .6rem !important; } .hero-section .d-flex.gap-4.mt-4 > .text-center { flex: 1; max-width: 120px; padding: .7rem .5rem; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hero-section .d-flex.gap-4.mt-4 .fs-4 { font-size: 1.2rem !important; letter-spacing: -.02em; } /* ── Promo / urgent banner ───────────────────────────────── */ .promo-card, .instant-banner { border-radius: 22px; box-shadow: var(--lift-md); } /* ── Category cards ──────────────────────────────────────── */ .cat-card { border-radius: 22px; border: 1px solid var(--line); background: #fff; box-shadow: var(--lift-sm); } .cat-card:hover { transform: translateY(-4px); box-shadow: var(--lift-md); border-color: #b7e4de; } .cat-img-box { background: #eef5f4; } .cat-img-box::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to top, rgba(11,31,36,.22), transparent); pointer-events: none; } .cat-card:hover .cat-img-box img { transform: scale(1.06); } .cat-card .cat-name { padding: .9rem .6rem 1rem; font-size: .86rem; font-weight: 700; letter-spacing: -.01em; } /* ── Service cards ───────────────────────────────────────── */ .service-card, .card-cp { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--lift-sm); } .service-card:hover, .card-cp:hover { box-shadow: var(--lift-md); border-color: #b7e4de; transform: translateY(-3px); } .service-card-img { border-radius: 14px; background: #eef5f4; } .service-card h5 { letter-spacing: -.02em; color: var(--ink); } .service-price { color: var(--primary-dark); font-weight: 800; letter-spacing: -.02em; } .service-duration { color: var(--muted); } .badge.rounded-pill { background: #e6f7f4 !important; color: var(--primary-dark) !important; font-weight: 700; border: 1px solid #c4ebe5; } /* ── Forms ────────────────────────────────────────────────── */ .form-control, .form-select, .form-control-cp { border: 1.5px solid #d8e5e2; border-radius: 14px; background: #fff; color: var(--ink); padding: .72rem .95rem; transition: border-color .2s, box-shadow .2s; } .form-control:focus, .form-select:focus, .form-control-cp:focus { border-color: var(--primary); box-shadow: var(--ring); background: #fff; } .form-label, label.fw-600 { font-weight: 700; color: var(--ink); font-size: .85rem; } /* ── Auth, booking, order summary, tracking ──────────────── */ .auth-card, .booking-card, .address-card, .tracking-status-card, .promo-card { border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--lift-md); background: #fff; } .time-slot-btn { border-radius: 12px; border: 1.5px solid #d8e5e2; font-weight: 600; transition: all .2s; } .time-slot-btn:hover { border-color: var(--primary); } .time-slot-btn.active, .time-slot-btn.selected { background: var(--gradient-main); color: #fff; border-color: transparent; box-shadow: var(--lift-brand); } .dropdown-menu { border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: var(--lift-md) !important; padding: .4rem; } .dropdown-item { border-radius: 10px; font-weight: 600; font-size: .88rem; padding: .55rem .8rem; } .dropdown-item:hover { background: #effaf8; } /* ── Mobile drawer ───────────────────────────────────────── */ .mob-drawer { box-shadow: 0 0 60px rgba(0,0,0,.35); } .mob-drawer-nav a { border-radius: 14px; } /* ── Floating WhatsApp: soft ring ────────────────────────── */ .whatsapp-float-btn { box-shadow: 0 12px 28px rgba(37,211,102,.38), 0 0 0 6px rgba(37,211,102,.14) !important; } /* ── Scrollbar (desktop) ─────────────────────────────────── */ @media (hover: hover) { ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #c5d8d5; border-radius: 10px; border: 2px solid var(--paper); } ::-webkit-scrollbar-thumb:hover { background: #9fc2bd; } } /* ── Mobile tuning ───────────────────────────────────────── */ @media (max-width: 575.98px) { .hero-section { min-height: auto; padding-bottom: 1.5rem; } .hero-search { border-radius: 18px; } .section-title { text-wrap: balance; } .cat-card .cat-name { font-size: .8rem; } .service-card:hover, .card-cp:hover, .cat-card:hover { transform: none; } } /* ── Keep the lower-home sections in the same palette ────── */ .hiw-section, .faq-section { background-color: var(--paper); } .trust-section { background: #fff; } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .btn-primary-gradient:hover, .cat-card:hover, .service-card:hover, .card-cp:hover { transform: none; } } /* ═══════════════════════════════════════════════════════════ ORDER SUMMARY / BILL (checkout.php + cart-checkout.php) White receipt-style card, dark readable text. ═══════════════════════════════════════════════════════════ */ .order-summary { position: relative; overflow: hidden; background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line); border-radius: 22px; padding: 1.4rem 1.25rem 1.25rem; box-shadow: var(--lift-md); } .order-summary::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-main); } .order-summary > h5 { color: var(--ink); font-size: 1.05rem !important; font-weight: 800; margin-bottom: .9rem !important; padding-bottom: .8rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .5rem; } .order-summary > h5::before { content: "🧾"; font-size: 1.1rem; } .order-summary .price-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .55rem 0; font-size: .9rem; font-weight: 600; color: var(--ink-soft); border-bottom: 1px dashed #e3ecea; } .order-summary .price-row span:first-child { flex: 1; min-width: 0; line-height: 1.4; } .order-summary .price-row span:last-child { flex: 0 0 auto; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* bootstrap text-* utilities used on rows – make them readable on white */ .order-summary .text-muted, .order-summary .text-light, .order-summary .small.text-muted { color: #64748b !important; } .order-summary .text-muted span:last-child, .order-summary .text-light span:last-child { color: #475569 !important; } .order-summary .text-primary { color: var(--primary-dark) !important; } .order-summary .text-primary span:last-child { color: var(--primary-dark) !important; } /* discount rows: green pill look */ .order-summary .price-row.text-success { color: #047857 !important; background: #ecfdf5; border: 1px solid #bbf7d0; border-radius: 12px; padding: .5rem .7rem; margin: .35rem 0; } .order-summary .price-row.text-success span:last-child { color: #047857 !important; font-weight: 800; } .order-summary .price-row.text-success.d-none { display: none !important; } /* tax rows */ .order-summary .price-row.small { font-size: .82rem; padding: .4rem 0; } .order-summary .text-decoration-line-through { text-decoration-thickness: 1.5px; opacity: .85; } /* total */ .order-summary .price-row.total { margin-top: .9rem !important; padding: .9rem 1rem; border: 0; border-radius: 16px; background: linear-gradient(135deg, #ecfdf5 0%, #d9f7f2 100%); box-shadow: inset 0 0 0 1px #b6e8df; align-items: center; font-size: 1.05rem; font-weight: 800; color: var(--ink); } .order-summary .price-row.total span:first-child { color: var(--ink); font-weight: 800; } .order-summary .price-row.total span:last-child { color: var(--primary-dark); font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; } .order-summary .price-row:last-of-type { border-bottom: 0; } .order-summary > p { color: #64748b !important; font-size: .75rem; margin-top: .8rem !important; } @media (max-width: 575.98px) { .order-summary { padding: 1.2rem 1rem 1rem; border-radius: 20px; } .order-summary .price-row { font-size: .86rem; } .order-summary .price-row.total span:last-child { font-size: 1.3rem; } } /* ═══════════════════════════════════════════════════════════ PREMIUM POLISH v2 — visual refinement only. No markup, content or logic is changed; everything below layers on top of the existing theme (customer pages only). ═══════════════════════════════════════════════════════════ */ :root { --ease: cubic-bezier(.22, .61, .36, 1); --lift-lg: 0 4px 8px rgba(11,31,36,.05), 0 28px 64px rgba(11,31,36,.12); } body { -webkit-tap-highlight-color: rgba(13,148,136,.12); font-feature-settings: "kern", "liga"; } /* ── Section headings: centred accent bar ─────────────────── */ .text-center > .section-title::after { content: ""; display: block; width: 46px; height: 4px; border-radius: 999px; margin: .7rem auto 0; background: linear-gradient(90deg, #0d9488, #34d399); box-shadow: 0 4px 12px rgba(13,148,136,.3); } .text-center > .section-subtitle { margin-top: .9rem; } /* ── Buttons: smoother, richer ────────────────────────────── */ .btn-primary-gradient, .btn-outline-primary-gradient, .btn-primary { transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-position .5s var(--ease), border-color .25s, color .25s; } .btn-primary-gradient:hover { background-position: right center; } .btn-outline-primary-gradient:hover { border-color: var(--primary); background: #f0fdfa; box-shadow: var(--lift-sm); } /* Category filter pills on the services page */ .btn-outline-secondary.rounded-pill { background: #fff; border: 1px solid var(--line); color: var(--ink-soft); transition: all .25s var(--ease); } .btn-outline-secondary.rounded-pill:hover { background: #f0fdfa; border-color: var(--primary); color: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--lift-sm); } .btn-primary.rounded-pill { box-shadow: 0 10px 24px rgba(13,148,136,.28); } /* ── Cards: softer motion, deeper lift, image zoom ────────── */ .service-card, .card-cp, .cat-card { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; } .service-card:hover, .card-cp:hover { box-shadow: var(--lift-lg); border-color: #8fdcd1; } .cat-card:hover { box-shadow: var(--lift-lg); border-color: #8fdcd1; } .service-card .service-card-img img, .service-card-img img { transition: transform .6s var(--ease); } .service-card:hover .service-card-img img { transform: scale(1.05); } .service-price { font-variant-numeric: tabular-nums; } /* ── How it works / Trust cards ───────────────────────────── */ .hiw-card, .trust-card { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } @media (hover: hover) { .hiw-card:hover, .trust-card:hover { transform: translateY(-3px); box-shadow: var(--lift-md); border-color: #b7e4de; } } .hiw-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 14px rgba(13,148,136,.12); } .trust-icon { box-shadow: 0 6px 14px rgba(16,185,129,.14); } /* ── FAQ (homepage + category pages) ──────────────────────── */ .faq-section { background: radial-gradient(620px 240px at 50% 0%, rgba(13,148,136,.09), transparent 70%), var(--paper); } .faq-item { position: relative; border: 1px solid var(--line) !important; border-radius: 18px !important; box-shadow: var(--lift-sm); margin-bottom: 12px; transition: box-shadow .3s var(--ease), border-color .3s, transform .3s var(--ease); } .faq-item:hover { border-color: #b7e4de !important; box-shadow: var(--lift-md); } .faq-item:has(.accordion-button:not(.collapsed)) { border-color: #7fd8cc !important; box-shadow: 0 16px 40px rgba(13,148,136,.14); } .faq-item:has(.accordion-button:not(.collapsed))::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 1; background: linear-gradient(180deg, #0d9488, #34d399); } .faq-item .accordion-button { padding: 18px 20px; font-size: .96rem; font-weight: 700; color: var(--ink); } .faq-item .accordion-button:not(.collapsed) { color: var(--primary-dark); background: linear-gradient(90deg, #ecfdf9 0%, #ffffff 100%); box-shadow: none; } .faq-item .accordion-button::after { width: 28px; height: 28px; flex: 0 0 28px; background-color: #eef5f4; transition: transform .3s var(--ease), background-color .3s; } .faq-item .accordion-button:not(.collapsed)::after { background-color: #ccfbf1; } .faq-item .accordion-body { padding: 2px 20px 20px; font-size: .9rem; line-height: 1.75; color: var(--ink-soft); background: #fff; } /* ── Footer: refined link hover ───────────────────────────── */ .footer-col a { transition: color .2s, padding-left .2s; } .footer-col a:hover { color: #5eead4; } .footer-cp .footer-brand .d-flex a { transition: background .2s, transform .2s, border-color .2s; } .footer-cp .footer-brand .d-flex a:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); transform: translateY(-2px); } /* ── Mobile: keep it calm, no hover-jumps ─────────────────── */ @media (max-width: 575.98px) { .faq-item { border-radius: 16px !important; margin-bottom: 10px; } .faq-item .accordion-button { padding: 16px; font-size: .92rem; } .faq-item .accordion-body { padding: 2px 16px 18px; } .text-center > .section-title::after { width: 40px; height: 3px; margin-top: .55rem; } .btn-outline-secondary.rounded-pill:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { .service-card .service-card-img img, .service-card-img img, .hiw-card, .trust-card, .faq-item, .footer-col a, .btn-outline-secondary.rounded-pill { transition: none !important; } .service-card:hover .service-card-img img, .hiw-card:hover, .trust-card:hover { transform: none !important; } } /* ═══════════════════════════════════════════════════════════ PREMIUM POLISH v3 — bolder, clearly visible refresh. Visual only: no content, layout structure or logic changed. `body` prefix makes these win over per-page inline