/* * ROOT-LEVEL FIX -- read this one first. * * custom.css's own :root block defines several "neutral" design tokens * that turn out to be green-tinted or outright green, reused throughout * the whole theme (60+ usages just for --rp-ink): * * --rp-ink: #101b16 (default heading/body text color) * --rp-muted: #65716b (secondary/muted text color) * --rp-line: #e6ece7 (default border/divider color) * --rp-deep: #04291a (dark accent slot, low usage) * --rp-primary-dark: #05632f (hover/pressed-state color for buttons * and links, e.g. .rp-button:hover, * .rp-menu-add-button:hover -- despite * the name, never actually derived from * --rp-primary, just hardcoded green) * * This is almost certainly the source of most of the "green in multiple * places" reports: --rp-ink alone touches most headings and body text * site-wide, and --rp-primary-dark means every hover/tap-and-hold state * on a primary button was flashing green instead of a darker shade of * the actual brand color. Redefining them here, since :root custom * properties cascade to every consumer automatically -- this one block * fixes far more than any individual selector override below it. */ /* skipped 67 gradient-bearing declarations (hand-fixed separately) */ /* =================================================================== * AUTO-GENERATED comprehensive pass -- every remaining hardcoded green * SOLID-color declaration (gradients excluded, hand-fixed above) across * all restoprime-*.css files. Always uses background-color (never the * background shorthand) so any photo/gradient image on the original * vendor rule is left untouched -- only recolors, never removes. * Replaced with color-mix() of --rp-primary at a percentage chosen from * the original color's brightness. See RESTOPRIME-CUSTOMIZATIONS.md. * =================================================================== */ html body .rp-license-lock-card { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 12%, transparent) !important; /* was hardcoded green, custom.css */ } /* Header */ html body .rp-site-header { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-eyebrow { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-eyebrow-light { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-button-light:hover { background-color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } /* Home */ html body .rp-hero-stats span { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-offer-icon { background-color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-offer-dismiss { color: color-mix(in srgb, var(--rp-primary) 45%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-cuisine-strip { border-color: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 8%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-showcase-section .swiper-slide { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 4%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-showcase-section .swiper-slide:hover { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 10%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-showcase-section .swiper-button-next, html body .rp-showcase-section .swiper-button-prev { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 13%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-partner-cta p { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-partner-cta .rp-section-kicker { color: color-mix(in srgb, var(--rp-primary) 45%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-results-intro-pills span { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-results .section-filter label, html body .rp-results .section-filter p { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-results-promo { background-color: color-mix(in srgb, var(--rp-primary) 15%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-results-promo p { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-results .rounded-box { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 4%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-results .rounded-box:hover { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 12%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-map-pin { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 26%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-results-partner p { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-results-partner .rp-section-kicker { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-live-dot { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 45%, white) 18%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-merchant-perks { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 5%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-menu-page .list-item-rows:hover { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 8%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-menu-page .menu-right .sticky-cart { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-restaurant-partner { background-color: color-mix(in srgb, var(--rp-primary) 15%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-restaurant-partner p { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-restaurant-partner .rp-section-kicker { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-cuisine-card:hover > img, html body .rp-cuisine-card:hover > span, html body .rp-cuisine-all > span { border-color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-cuisine-directory-card { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 4%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-cuisine-directory-card:hover { border-color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 10%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-restaurant-card, html body .rp-featured-card { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 4%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-restaurant-card:hover, html body .rp-featured-card:hover { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 10%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-card-brand em { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } /* Native KMRS cart drawer: keep checkout visible while long item lists scroll. */ html body .drawer-preview-cart.el-drawer { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 16%, transparent) !important; /* was hardcoded green, custom.css */ } html body .drawer-preview-cart .section-cart::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .drawer-preview-cart .quantity .qty-btn { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-phone-frame { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 22%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-app-qr { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 10%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-trusted-logo { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-trusted-logo span { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-results-limited { background-color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-results-promo h2 em { color: color-mix(in srgb, var(--rp-primary) 45%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-results-discount-badge { background-color: color-mix(in srgb, var(--rp-primary) 45%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-results-grid-toolbar button.is-active { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 8%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-result-card-title span { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-404-shortcuts > a { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 4%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-404-shortcuts > a:hover { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 10%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-404-partner-copy .rp-section-kicker { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-404-partner-points { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-404-partner-points i { color: color-mix(in srgb, var(--rp-primary) 45%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-contact-hero-notes > div { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 12%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-contact-panel { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 7%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-contact-field .form-control:focus { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 9%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-contact-shortcuts > a { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 4%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-contact-partner-copy .rp-section-kicker { color: color-mix(in srgb, var(--rp-primary) 45%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-contact-partner-copy > div i { color: color-mix(in srgb, var(--rp-primary) 45%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-search-kicker { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-search-hero-copy > p { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-search-suggestions { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-search-page .rp-food-card { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-search-page .rp-food-card:hover { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 12%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-search-page .slider_nav .btn-green-circle { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 14%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-merchant-perks > .rp-merchant-perk { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 11%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-merchant-service-switch { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-merchant-service-switch__copy small { color: color-mix(in srgb, var(--rp-primary) 45%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-merchant-service-switch .btn-group-rounded .btn { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-merchant-service-switch .btn-group-rounded .btn.active { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 20%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-menu-category-rail { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-mobile-menu-trigger { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 27%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-mobile-menu-trigger:focus { outline: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 22%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-mobile-category-sheet { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 25%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-menu-popular-card { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 2%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-menu-popular-card:hover { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 10%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-menu-item-card:focus { outline: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 24%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-menu-row-card:hover { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 8%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-menu-image-empty { color: color-mix(in srgb, var(--rp-primary) 45%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-kmrs-layout-two-column .rp-menu-row-card { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 2%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-kmrs-layout-two-column .rp-menu-row-card:hover { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 10%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-kmrs-layout-two-column .rp-menu-row-action .rp-menu-item-price { color: color-mix(in srgb, var(--rp-primary) 15%, black) !important; /* was hardcoded green, custom.css */ } /* Restaurant-menu cart: a focused checkout panel using the native KMRS cart * data and actions, styled to match the RestoPrime menu reference. */ html body .rp-menu-page .menu-right .rp-menu-sidebar-cart .sticky-cart { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 10%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-menu-cart-delivery { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-menu-cart-delivery-icon { background-color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-menu-page .menu-right .rp-menu-sidebar-cart .section-cart::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-menu-page .menu-right .rp-menu-sidebar-cart .qty-btn { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-menu-page.rp-menu-cart-rail-active .rp-menu-sidebar-cart .sticky-cart { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 8%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-menu-info-card { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 4%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-location-mode { color: color-mix(in srgb, var(--rp-primary) 15%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-detail-search .zmdi { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-native-language-selector .language-bar .dropdown-menu { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 14%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-offers-hero-copy>p { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-offers-benefits i { border-color: color-mix(in srgb, var(--rp-primary) 45%, white) !important; /* was hardcoded green, custom.css */ color: color-mix(in srgb, var(--rp-primary) 15%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-offers-location, html body .rp-offers-sort { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 4%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-offer-filters button { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 4%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-offer-filters button.is-active { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 20%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-offer-card { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 4%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-offer-card:hover { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 10%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-offer-rating i { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-offer-terms { color: color-mix(in srgb, var(--rp-primary) 15%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-offer-terms span { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-offer-action { border-color: color-mix(in srgb, var(--rp-primary) 45%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-offers-weekly p { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-offers-empty { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-login-back-menu { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-login-back-menu:hover { border-color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .login-container .rp-login-back-menu { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-checkout-progress .is-active { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-checkout-progress .is-active b { background-color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ border-color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-checkout-form>.card-body, html body .rp-checkout-form>#vm_delivery_details>.card-body, html body .rp-checkout-form>#location-checkout-address>.card-body { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 4%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-checkout-form .badge-dark { background-color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-checkout-form .chevron-section:hover { border-color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-checkout-form .chevron-section .flexcol:first-child { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-checkout-form .border-green { border-color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-checkout-form .btn-link { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-checkout-form #vue-payment-list .chevron-section.selected, html body .rp-checkout-form #vue-wallet .chevron-section.selected { border-color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-checkout-form .payment-logo-wrap { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-checkout-form .text-success { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-checkout-aside #vue-cart>.card { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 7%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-checkout-aside .rp-menu-cart-delivery strong { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-checkout-aside .cart-summary h6 { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-menu-page.rp-kmrs-categories-left .rp-menu-category-rail::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, custom.css */ } html body .rp-mobile-menu-cart-backdrop.is-active { background-color: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 48%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-menu-page.rp-mobile-menu-cart-open .menu-right { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 22%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-track-status-card, html body .rp-track-card, html body .rp-track-map, html body .rp-track-flow { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 4%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-track-status-card h1 { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-track-step.is-done i { background-color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ border-color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-track-step.is-current i { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 12%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-track-card-title>strong { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-track-delivery p:before { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-track-actions a, html body .rp-track-actions button { border-color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-track-map-badge, html body .rp-track-rider { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 12%, transparent) !important; /* was hardcoded green, custom.css */ } html body .rp-track-map-badge>span { background-color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-track-map-badge strong { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-track-finished>i { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-track-finished a { background-color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-track-flow article>i { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-track-flow article.is-active { border-color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-track-flow article.is-done>i { background-color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, custom.css */ } html body .rp-floating-cart { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 30%, transparent) !important; /* was hardcoded green, restoprime-floating-cart.css */ } html body .rp-floating-cart:hover, html body .rp-floating-cart:focus-visible { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 38%, transparent) !important; /* was hardcoded green, restoprime-floating-cart.css */ } html body .rp-floating-cart__badge { border-color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, restoprime-floating-cart.css */ color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, restoprime-floating-cart.css */ } html body .rp-home .rp-hero-search .el-input__wrapper::before { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, restoprime-home-fidelity.css */ } html body .rp-home-widgets .rp-restaurant-card, html body .rp-home-widgets .rp-featured-card { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, restoprime-home-fidelity.css */ } html body .rp-home-widgets .rp-featured-card-body button, html body .rp-home-widgets .rp-delivery-banner-copy .rp-button { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 14%, transparent) !important; /* was hardcoded green, restoprime-home-fidelity.css */ } html body .rp-home-widgets .rp-featured-card-body button:hover, html body .rp-home-widgets .rp-delivery-banner-copy .rp-button:hover { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 20%, transparent) !important; /* was hardcoded green, restoprime-home-fidelity.css */ } html body .rp-home-widgets .rp-carousel-buttons button { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, restoprime-home-fidelity.css */ } html body .rp-home-widgets .rp-carousel-buttons button:hover:not(:disabled), html body .rp-home-widgets .rp-carousel-buttons button:focus-visible { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 14%, transparent) !important; /* was hardcoded green, restoprime-home-fidelity.css */ } html body .rp-home-widgets .rp-home-carousel:focus-visible { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 18%, transparent) !important; /* was hardcoded green, restoprime-home-fidelity.css */ } /* The homepage cards are backed by KMRS' native cart endpoint. This turns a * successful add into a clear, compact quantity state without creating a * second browser-only cart. */ html body .rp-featured-card.is-in-cart { border-color: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 35%, transparent) !important; /* was hardcoded green, restoprime-home-fidelity.css */ box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 12%, transparent) !important; /* was hardcoded green, restoprime-home-fidelity.css */ } html body .rp-featured-card .rp-featured-add-button.is-in-cart:hover { background-color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, restoprime-home-fidelity.css */ } html body .rp-mobile-phone-art::after { background-color: color-mix(in srgb, var(--rp-primary) 15%, black) !important; /* was hardcoded green, restoprime-home-fidelity.css */ box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 18%, transparent) !important; /* was hardcoded green, restoprime-home-fidelity.css */ } html body .rp-mobile-tabbar { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 9%, transparent) !important; /* was hardcoded green, restoprime-mobile-nav.css */ } html body .rp-mobile-tab--cart .rp-mobile-tab-icon { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 26%, transparent) !important; /* was hardcoded green, restoprime-mobile-nav.css */ } /* Make the legacy header's live cart action unmistakable as well. */ html body .rp-featured-card-body button { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 18%, transparent) !important; /* was hardcoded green, restoprime-mobile-nav.css */ } html body .rp-button { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 20%, transparent) !important; /* was hardcoded green, restoprime-mobile-nav.css */ } html body .rp-partner-card { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 10%, transparent) !important; /* was hardcoded green, restoprime-partner-flow.css */ } html body .rp-partner-card .form-control:focus { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 10%, transparent) !important; /* was hardcoded green, restoprime-partner-flow.css */ } html body .rp-partner-card .btn-green, html body .rp-flow-shell .btn-green, html body .rp-flow-shell .btn-success { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 20%, transparent) !important; /* was hardcoded green, restoprime-partner-flow.css */ } html body .rp-partner-proof { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 16%, transparent) !important; /* was hardcoded green, restoprime-partner-flow.css */ } html body .rp-partner-stats { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, restoprime-partner-flow.css */ } html body .rp-partner-feature { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 5%, transparent) !important; /* was hardcoded green, restoprime-partner-flow.css */ } html body .rp-flow-card { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 9%, transparent) !important; /* was hardcoded green, restoprime-partner-flow.css */ } html body .rp-flow-success-icon { background-color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, restoprime-partner-flow.css */ } /* Reviews remain KMRS-powered, but are presented as one deliberate RestoPrime section rather than a stock Bootstrap block below repeated merchant details. */ html body .rp-menu-page ~ #section-review.rp-menu-reviews { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-menu-review-item .bg-lighter { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-menu-reviews-loadmore { border-color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-menu-gallery-section { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 5%, transparent) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } /* One intentional pre-footer content module: the selected RestoPrime detail is visible while Gallery, Reviews, Info and Booking never stack. */ html body .rp-details-shell { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-details-tabs a, html body .rp-details-tabs button { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-details-tabs [aria-selected="true"] { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 18%, transparent) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body #rp-details-tab-outlet .rp-details-info, html body #rp-details-tab-outlet .rp-menu-gallery-section, html body #rp-details-tab-outlet .rp-menu-reviews, html body #rp-details-tab-outlet #vue-booking-reservation { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-details-shell--content-only .rp-details-info { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-details-shell + #vue-booking-reservation { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-menu-search .el-input__wrapper { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 4%, transparent) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-menu-search .el-input__wrapper:hover, html body .rp-menu-search .el-input__wrapper.is-focus { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-menu-search-results .el-card { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-native-drawer-close { color: color-mix(in srgb, var(--rp-primary) 15%, black) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-mobile-merchant-context { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 8%, transparent) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-mobile-location-card > .zmdi-chevron-down { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-mobile-estimate-card .zmdi-chevron-down { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-mobile-menu-category-shell { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 6%, transparent) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-mobile-category-chip { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } /* The reference image carousel remains in its original place. After it leaves view, JS reveals this compact text-first rail so even a merchant with 20+ live KMRS categories always has a small, selectable navigator. */ html body .rp-mobile-category-sticky { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 12%, transparent) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-mobile-category-sticky__menu { border-color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-mobile-category-sticky__link { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-mobile-category-section-links a { color: color-mix(in srgb, var(--rp-primary) 15%, black) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-menu-row-card, html body .rp-kmrs-layout-two-column .rp-menu-row-card, html body .rp-kmrs-layout-left-image .rp-menu-row-card, html body .rp-kmrs-layout-right-image .rp-menu-row-card { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 4%, transparent) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-menu-row-action .rp-menu-add-button { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 20%, transparent) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-mobile-menu-cart-bar { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 28%, transparent) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-mobile-menu-cart-icon count { border-color: color-mix(in srgb, var(--rp-primary) 15%, black) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } html body .rp-mobile-menu-cart-view strong em { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, restoprime-restaurant-detail.css */ } /* RestoPrime results-page refinements. The Vue feed, KMRS filter state, map selection, and grid/list controls remain native. */ html body .rp-results .column-1 { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 4%, transparent) !important; } html body .rp-sort-select { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, restoprime-results.css */ } html body .rp-sort-select:focus { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 11%, transparent) !important; /* was hardcoded green, restoprime-results.css */ } html body .rp-results-partner-mark { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 18%, transparent) !important; /* was hardcoded green, restoprime-results.css */ } html body .rp-results-partner-points { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; /* was hardcoded green, restoprime-results.css */ } html body .rp-results-partner-points i { color: color-mix(in srgb, var(--rp-primary) 45%, white) !important; /* was hardcoded green, restoprime-results.css */ } html body .rp-site-header .rp-native-controls .language-bar .img-30-flag { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 11%, transparent) !important; /* was hardcoded green, restoprime-shell-nav.css */ } /* The native KMRS cart action is deliberately kept as an so it can open * the existing cart preview. Give that real control enough contrast and a * generous hit target instead of replacing it with a decorative icon. */ html body .rp-site-header .top-menu .cart-handle { border-color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 8%, transparent) !important; } html body .rp-site-header .top-menu .cart-handle:hover, html body .rp-site-header .top-menu .cart-handle:focus-visible { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 14%, transparent) !important; /* was hardcoded green, restoprime-shell-nav.css */ } html body .rp-site-header .top-menu .cart-handle .badge { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 22%, transparent) !important; /* was hardcoded green, restoprime-shell-nav.css */ } html body .rp-site-header .top-menu .line-left > a, html body .rp-site-header .top-menu .userprofile > a { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 14%, transparent) !important; /* was hardcoded green, restoprime-shell-nav.css */ } html body .rp-site-header .rp-location--home .rp-location-widget .widget-dropdown > button > span + span, html body .rp-site-header .rp-location--restaurant .rp-location-widget .widget-dropdown > button > span + span { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, restoprime-shell-nav.css */ } html body .rp-global-service-switch .dropdown-menu, html body .rp-global-services-mobile .dropdown-menu { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 14%, transparent) !important; /* was hardcoded green, restoprime-shell-nav.css */ } html body .rp-global-service-switch .dropdown-menu a, html body .rp-global-services-mobile .dropdown-menu a { color: color-mix(in srgb, var(--rp-primary) 15%, black) !important; /* was hardcoded green, restoprime-shell-nav.css */ } html body .rp-global-service-switch .dropdown-menu a:hover, html body .rp-global-services-mobile .dropdown-menu a:hover { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, restoprime-shell-nav.css */ } html body .rp-global-services-mobile { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 5%, transparent) !important; /* was hardcoded green, restoprime-shell-nav.css */ } html body .rp-global-services-mobile__label { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, restoprime-shell-nav.css */ } html body .rp-global-services-mobile__label i { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, restoprime-shell-nav.css */ } html body .rp-site-header:not(.rp-site-header--restaurant) .rp-location.d-none.d-lg-flex > i { color: color-mix(in srgb, var(--rp-primary) 55%, black) !important; /* was hardcoded green, restoprime-shell-nav.css */ } html body .rp-site-header:not(.rp-site-header--restaurant) .rp-location.d-none.d-lg-flex .rp-location-widget .widget-dropdown > button { color: color-mix(in srgb, var(--rp-primary) 15%, black) !important; /* was hardcoded green, restoprime-shell-nav.css */ } :root { --rp-ink: #181818; --rp-muted: #6b6b6b; --rp-line: #e8e8e8; --rp-deep: color-mix(in srgb, var(--rp-primary) 35%, black); --rp-primary-dark: color-mix(in srgb, var(--rp-primary) 80%, black); /* --rp-soft: #f5f9f6 (pale mint card background) and --rp-shadow: 0 14px 38px rgba(18,49,31,.08) (drop shadow tint) found in the same :root block but with very few direct var() consumers -- most of the 328 rgb(18,49,31) instances found in the full-theme scan are literal copies of this shadow color pasted into individual rules rather than referencing the variable, so those are handled by the auto-generated block below instead. Still worth fixing the root definition itself for the handful of places that do read it directly. */ --rp-soft: color-mix(in srgb, var(--rp-primary) 4%, white); --rp-shadow: 0 14px 38px color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 8%, transparent); } /* * Rapidoo brand-color overrides for RestoPrime by Gangiz.com. * * This file lives in themes/restoprime/custom/, a slot RestoPrime's own * main_layout.php already loads automatically (registered last, after every * other RestoPrime stylesheet) and never touches during theme updates -- it * is not part of their tracked integration file list. Nothing here edits * vendor files directly. * * Every rule below fixes a spot where RestoPrime hardcoded its default * green (#08783b / #0c9148 / #09843f family) instead of using the theme's * own --rp-primary / --rp-accent CSS variables, which every other button, * link and icon in the theme correctly uses. See * RESTOPRIME-CUSTOMIZATIONS.md in this project for the full audit and the * exact source line each rule replaces -- check that file against any * future RestoPrime update before touching this one. */ /* "Restaurant offers" perk icon on the merchant page (matches the other three perk icons, which already correctly use --rp-primary). */ html body .rp-merchant-perks .rp-merchant-perk-offer > i { color: var(--rp-primary) !important; } /* Checkout sidebar cart "Save"/checkout button. RestoPrime's own base rule (.rp-body .btn-green) already does this correctly with !important; this more specific selector was overriding it with hardcoded green. */ html body .rp-checkout-aside .btn-green { box-shadow: 0 8px 18px rgba(0, 0, 0, .18) !important; background: var(--rp-primary) !important; } /* Merchant menu page sidebar cart checkout button -- gradient's first stop already used --rp-primary, second stop was hardcoded. */ html body .rp-menu-page .menu-right .rp-menu-sidebar-cart .btn.btn-green { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 18%, transparent) !important; background: var(--rp-primary) !important; } /* Floating cart drawer checkout button -- same partial-gradient bug. */ html body .drawer-preview-cart .el-drawer__body > .btn.btn-green { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 55%, black) 20%, transparent) !important; background: var(--rp-primary) !important; } /* "Free delivery" / "New" promotional badges on merchant cards. */ html body .rp-offer-badge-delivery, html body .rp-offer-badge-new { background-color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; color: var(--rp-primary) !important; } /* "Pick a time" scheduling modal (#ModalTRNOptions, from the inherited components/schedule-order.php -- RestoPrime doesn't ship its own version of this view, so it's copied unmodified from the base KMRS theme at install time). Its Save button is plain `.btn.btn-green`, no RestoPrime wrapper class, so it should already be covered by their own `.rp-body .btn-green` base rule -- but on mobile it isn't (Bootstrap's modal plugin repositions the modal in the DOM when it opens, which is the most likely reason `.rp-body` as an ancestor selector stops matching). ID-scoped, so this doesn't depend on DOM ancestry at all. */ html body #ModalTRNOptions .btn-green, html body .btn-green { background: var(--rp-primary) !important; } /* Mobile "Delivery from $X" pill overlaid on the merchant hero photo. Both gradient stops and the border tint were hardcoded dark-green rgba() values, not tied to --rp-primary at all -- confirmed by comparing a Rapidoo-branded install against an unmodified default-color install: identical dark green in both, so it wasn't reading the theme setting. */ html body .rp-mobile-hero-offer { border-color: rgba(255, 255, 255, .2) !important; background: var(--rp-primary) !important; } /* Mobile "Open now" / "Closed now" / "Checking hours" status pill on the merchant hero. Background was a flat dark-green rgba() regardless of status (open/closed/scheduled/checking already correctly change the dot and text color separately -- see .rp-merchant-status--closed etc., left alone, that part is genuine semantic status color). The pill's own backdrop doesn't carry status meaning by itself, so instead of tying it to --rp-primary (which would make a "Closed now" badge confusingly look like an urgent brand-colored alert), matched it to the same neutral dark backdrop already used by its sibling badges (rating, hours). */ html body .rp-merchant-status { color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; background: rgba(2, 13, 8, .56) !important; } /* Small brand-colored accents elsewhere, same literal-primary-as-decimal-rgb signature as the rest of this file's fixes: focus-ring outlines and an "already in cart" indicator border. */ html body .rp-mobile-menu-trigger:focus, html body .rp-menu-item-card:focus { outline-color: color-mix(in srgb, var(--rp-primary) 22%, transparent); } html body .rp-featured-card .rp-featured-add-button.is-in-cart { border-color: color-mix(in srgb, var(--rp-primary) 30%, transparent) !important; } html body .rp-delivery-banner .rp-eyebrow { border-color: color-mix(in srgb, var(--rp-primary) 18%, transparent) !important; } /* * Dark hero/banner sections -- homepage hero, search hero, merchant hero, * and the four recurring "partner CTA" banners. An earlier pass treated * these as an intentional fixed dark-green design language shared across * ~8 component instances and left them alone; user feedback confirmed they * actually read as a bug (green showing up "in other pages/parts" beyond * what earlier fixes covered), so reversing that call and bringing all of * them under --rp-primary here. * * Also a genuine bug independent of that judgment call: .rp-hero-copy h1 em * (the "fast" emphasis word) is defined TWICE in their own custom.css -- * once correctly as var(--rp-accent), once later hardcoded to #48d178 -- * and the later, wrong one wins the cascade on every viewport, not just * mobile. Restated here so it wins for real. * * Each flat background below is replaced with a dark tint of --rp-primary * (color-mix against black) rather than the raw brand color, to preserve * the "dark moody hero" look and keep white text/photo legible -- a solid * bright crimson fill here would be far too loud and reduce contrast. */ html body .rp-hero-copy h1 em { color: var(--rp-accent) !important; } html body .rp-hero-stats > div > i { background-color: color-mix(in srgb, var(--rp-primary) 22%, transparent) !important; color: color-mix(in srgb, var(--rp-primary) 55%, white) !important; } html body .rp-hero { background-color: color-mix(in srgb, var(--rp-primary) 40%, black) !important; } html body .rp-search-hero { background-color: color-mix(in srgb, var(--rp-primary) 40%, black) !important; } html body .rp-partner-cta { background-color: color-mix(in srgb, var(--rp-primary) 45%, black) !important; } html body .rp-results-partner { background-color: color-mix(in srgb, var(--rp-primary) 40%, black) !important; } /* NOTE: there's a second, gradient-only `.rp-results-partner` definition in restoprime-results.css (search/results page, no photo -- two hardcoded dark-green gradient stops in `background-image`). Not fixed here: with the identical class name reused across what appear to be two different pages, a background-image override risks applying to the wrong one and wiping out the photo version above instead. Needs a look at the actual pages side by side before touching it -- see RESTOPRIME-CUSTOMIZATIONS.md. */ html body .rp-404-partner { background-color: color-mix(in srgb, var(--rp-primary) 40%, black) !important; } html body .rp-contact-partner-banner { background-color: color-mix(in srgb, var(--rp-primary) 40%, black) !important; } /* "All" category chip on the homepage cuisine strip. Unconditionally hardcoded light-green (not a :hover-only rule despite living in the same declaration as the hover states for its siblings) -- every other category chip (Burgers, Pizza, ...) is a plain photo with no tint, so "All" reads as the active/selected one via this background, just using flat vendor green instead of a light tint of --rp-primary. */ html body .rp-cuisine-all > span { border-color: color-mix(in srgb, var(--rp-primary) 25%, white) !important; background: color-mix(in srgb, var(--rp-primary) 12%, white) !important; } /* * Photo-darkening scrims. Every dark hero/banner section fixed above * (#10, #13, #14, #15) has a *separate* overlay layer on top of the base * background -- a left-to-right fade from near-opaque dark green to * transparent, so text stays readable over the photo. These sit ABOVE the * background-color fixes and are mostly-opaque (.9+) on the side where the * text lives, so without fixing these too, those earlier fixes are largely * masked by this layer and the section still reads as green. * * Each one below is a different selector (some are :before/:after * pseudo-elements) with slightly different fade percentages per section, * but the same shape: opaque dark tint fading to transparent. Approximated * rather than matched stop-for-stop against every responsive breakpoint * variant in their file -- close enough to read as "your brand, darkened * for legibility" rather than exact-original-pixel-match. */ html body .rp-hero-overlay { background: linear-gradient(90deg, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 96%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 85%, transparent) 55%, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 30%, transparent) 100% ) !important; } html body .rp-search-hero-shade { background: linear-gradient(90deg, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 96%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 80%, transparent) 55%, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 15%, transparent) 100% ) !important; } html body .rp-results-promo:before { background: linear-gradient(90deg, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 95%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 80%, transparent) 50%, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 15%, transparent) 90% ) !important; } html body .rp-restaurant-partner:before { background: linear-gradient(90deg, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 95%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 80%, transparent) 50%, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 10%, transparent) 100% ) !important; } html body .rp-404-partner:before { background: linear-gradient(90deg, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 97%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 85%, transparent) 55%, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 25%, transparent) 85% ) !important; } html body .rp-contact-partner-banner:after { background: linear-gradient(90deg, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 93%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 65%, transparent) 55%, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 5%, transparent) 85% ) !important; } /* Restaurant/merchant page's own dark mobile header bar (separate rule from the homepage header, which is already correctly white/neutral) -- the dark nav bar behind the hamburger menu, logo, search icon and cart on a merchant page. !important in the original, so matched here. */ html body .rp-site-header--restaurant { background: linear-gradient(120deg, color-mix(in srgb, var(--rp-primary) 15%, black), color-mix(in srgb, var(--rp-primary) 20%, black) ) !important; } /* Faint page-background gradient behind the merchant menu page (pale mint fading to white). Low visual impact but still literally green-tinted. */ html body body:has(.rp-menu-page) { background: linear-gradient(180deg, color-mix(in srgb, var(--rp-primary) 4%, white) 0, #fff 62%); } /* Merchant hero's hours/distance badge icons (clock, pin) -- the badge background itself was already fixed (#8, neutral dark), but the icons inside it have their own separate hardcoded light-green color. */ html body .rp-merchant-meta span i { color: color-mix(in srgb, var(--rp-primary) 55%, white) !important; } /* Homepage "download the app" / QR promo banner -- light pale-mint background+border, same pattern as .rp-cuisine-all (#16): a light tint of --rp-primary rather than the dark treatment used for hero sections, since this is a light card, not a dark photo backdrop. */ html body .rp-mobile-app { border-color: color-mix(in srgb, var(--rp-primary) 12%, white); background: linear-gradient(100deg, color-mix(in srgb, var(--rp-primary) 6%, white), color-mix(in srgb, var(--rp-primary) 2%, white) ); } /* Mobile Delivery/Pickup service-type cards on the merchant page. */ html body .rp-mobile-service-card { box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 5%, transparent) !important; color: var(--rp-ink) !important; } html body .rp-mobile-service-card.is-active { border-color: color-mix(in srgb, var(--rp-primary) 45%, white) !important; background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--rp-primary) 8%, white)) !important; } html body .rp-mobile-service-card__icon { background: color-mix(in srgb, var(--rp-primary) 12%, white); } html body .rp-mobile-service-card > .zmdi-arrow-right { background-color: color-mix(in srgb, var(--rp-primary) 12%, white) !important; } html body .rp-mobile-location-card, html body .rp-mobile-estimate-card { color: var(--rp-ink) !important; } /* Active category chip's photo ring on the merchant menu page -- the text color and underline already correctly use --rp-primary; only the image border/shadow around it were hardcoded green. */ html body .rp-mobile-category-chip.active .rp-mobile-category-chip__media { border-color: color-mix(in srgb, var(--rp-primary) 45%, white) !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--rp-primary) 14%, transparent) !important; } /* Desktop/mobile "Delivery/Pickup/Dinein/Takeout" service-type dropdown button (confirmed via actual DOM inspection: ). The text color (#153b28) was already caught by the automated pass above -- these two were too pale (#f2f7f3 background, #dfe8e2 border) to trip the "is this actually green" brightness heuristic, so they slipped through as technically-still-hardcoded even though barely perceptible. */ html body .rp-global-service-switch .widget-dropdown > button, html body .rp-global-services-mobile .widget-dropdown > button { color: color-mix(in srgb, var(--rp-primary) 15%, black) !important; background: color-mix(in srgb, var(--rp-primary) 6%, white) !important; border-color: color-mix(in srgb, var(--rp-primary) 14%, white) !important; } /* "More" category-menu button on the merchant/menu page mobile category rail (zmdi-more-horiz). There are TWO different `.rp-mobile-menu-trigger` rules sharing the same class name across two files: one (custom.css, no media query) is a floating action button already correctly using var(--rp-primary); the other (restoprime-restaurant-detail.css, only inside @media max-width:767.98px) is this category "More" button, pale and hardcoded. Scoping this fix to the same media query so it only overrides the mobile category-rail instance, not the floating button. */ @media (max-width: 767.98px) { html body .rp-mobile-menu-trigger { background: color-mix(in srgb, var(--rp-primary) 6%, white) !important; border-color: color-mix(in srgb, var(--rp-primary) 14%, white) !important; } } /* 404 page helpful-links icon circles -- large (48px) so the light tint is clearly visible even though it's subtle enough to have fallen just under the automated pass's saturation threshold. */ html body .rp-404-shortcuts > a > i { background: color-mix(in srgb, var(--rp-primary) 12%, white); } /* * Merchant page hero darkening gradient -- CONFIRMED via actual rendered * DOM (not source CSS): this is set as an INLINE style attribute, built by * JavaScript at render time (reads the merchant's photo URL and combines * it with a hardcoded near-black-green gradient into one `background-image` * inline style on
). No CSS file targets * this at all -- .rp-merchant-hero's own background-COLOR was already * fixed (#13 above), but that's irrelevant here since the inline style's * background-IMAGE (gradient + photo, both layers) paints on top of it and * fully hides it. * * A plain CSS override can't selectively replace just the gradient layer * of an inline multi-layer background-image while keeping the *dynamic*, * per-merchant photo URL (that URL isn't knowable in a static stylesheet). * Instead: add a new ::before overlay layer, painted on top of the * existing (still-green) inline background, dark/opaque enough to * visually mask it -- same visual effect as recoloring it, without * needing to know or reproduce the photo URL. * * .rp-merchant-hero-inner (the actual text/logo content) has no explicit * position, so it paints at the default stacking level. A `position: * absolute` ::before with any z-index would otherwise paint above it and * cover the readable content -- so the content wrapper, the favorite * button, and the mobile "Delivery from $X" pill (already positioned, * but with z-index:auto) are all explicitly promoted above this overlay. */ html body .rp-merchant-hero { background-color: color-mix(in srgb, var(--rp-primary) 40%, black) !important; box-shadow: color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 15%, black) 11%, transparent) !important; position: relative; } html body .rp-merchant-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(90deg, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 93%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 80%, transparent) 38%, color-mix(in srgb, color-mix(in srgb, var(--rp-primary) 18%, black) 20%, transparent) 100% ); pointer-events: none; } html body .rp-merchant-hero-inner, html body .rp-merchant-hero .rp-merchant-actions, html body .rp-merchant-hero .rp-mobile-hero-offer { position: relative; z-index: 2; } /* * Restaurants/search results page (/restaurants) -- no left margin on * mobile for the "N stores near
" heading and the results grid. * * Root cause: restoprime-restaurant-detail.css's @media(max-width:991.98px) * block sets `.rp-results .column-2 { padding-left: 0; }` -- meant for when * the filters sidebar (.column-1) hides on mobile and .column-2 becomes * full width. But .column-2 lives inside a plain Bootstrap `.row` * (`.rp-results-layout`, feed.php), which carries the default BS4 * `margin-left: -15px`. A column's own 15px left padding is what normally * cancels that negative margin -- zero it out and nothing does, so content * shifts 15px left of where the outer `.container-fluid` padding (16px at * this breakpoint) puts it. Net ~1px, i.e. visually flush against the * screen edge. (The sections above it on the page -- hero, quick-info * tiles -- aren't inside this .row, so they're unaffected and look fine, * which is why only this one section reads as "no margin".) */ html body .rp-results .column-2 { padding-left: 15px; } /* * Signup thank-you page (/merchant/thankyou) -- redesigned to match the * rest of the .rp-flow-* signup flow (choose-plan, register-user) instead * of the vendor's generic stock receipt illustration + plain text link. * These three classes style the new kicker label, the intro paragraph, * and the "Log In to Merchant Portal" CTA added in thank-you.php. */ html body .rp-flow-success-kicker { color: var(--rp-primary); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; } html body .rp-flow-success-sub { color: var(--partner-muted, #66736d); max-width: 420px; margin: 0 auto 26px; line-height: 1.6; } html body .rp-flow-success-cta { display: inline-flex; align-items: center; justify-content: center; padding: 0 34px; } /* * Sitewide hover-color bug, found while investigating a reported issue on * /merchant/signup2's CTA button: `.rp-body a:hover { color: * var(--rp-primary); }` (this file, near the top) targets *any* hovered * , and its specificity -- one class + a bare element (0,2,1) -- beats * a single button class alone (0,1,0) and even that class with its own * :hover (0,2,0), since the bare `a` breaks the tie. Any colored- * background/white-text "button" without an explicit, sufficiently * specific :hover color rule of its own silently turns * brand-color-on-brand-color (invisible) the moment someone hovers it. * Audited the theme for other instances of this same pattern -- these * three are the confirmed/high-confidence ones found so far. */ html body .rp-menu-category-rail-link:hover { /* Restaurant menu page's category nav pills. Already had its own :hover rule (menu_categorytop.php's CSS) setting color:#fff, but at (0,2,0) specificity it still lost to .rp-body a:hover. Verified live before this fix: hovering the active pill made its label and count badge fully disappear. */ color: #fff !important; } html body .rp-track-finished a:hover { /* "Track your delivery / Order again" button after checkout (orders/order_place.php). A prior pass already fixed this element's background-color (see the .rp-track-finished rule elsewhere in this file) but missed the hover text color -- same bug, deterministic from CSS alone (not live-verified against a real order, but the cascade math is the same as the confirmed case above). */ color: #fff !important; } html body .rp-skip-link { /* Accessibility skip-link (layouts/main-layout.php). Different variant of the same root cause: loses even at rest, not just on hover -- `.rp-body a { color: inherit; }` (0,1,1) beats this link's own single-class color:#fff (0,1,0). Low practical exposure (only visible on keyboard focus, off-screen otherwise) but a genuine bug. */ color: #fff !important; } /* * Homepage "Free delivery" banner: the courier image * (restoprime-delivery-courier.webp) was a fixed 180px/115px width with * no height set, so it fell short of the banner's full height with a * gap on the right (`margin-right:25px` in the vendor's own custom.css). * Made it fill the banner's full height and sit flush against the right * edge instead -- the vendor rule already sets * `position:relative;overflow:hidden` on .rp-delivery-banner (carried * over from an earlier, otherwise-superseded definition of that same * selector), so this just opts the image into absolute positioning * against that existing container. */ html body .rp-delivery-courier { position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: none; margin: 0; object-fit: contain; object-position: right center; } /* Checkout: "Tip the courier" section -- made more compact, and the * custom-tip amount input + "Add tip" button were rewritten to be real * siblings of the tip-option