/* * Astroway — Vibrant Theme Redesign * Inspired by AstroSage & AstroTalk * * Drop this file into: public/frontend/css/astroway-theme.css * Then add ONE line to resources/views/frontend/layout/master.blade.php * inside the , AFTER the existing CSS links: * * * * This file OVERRIDES the existing theme — no files need to be deleted. */ /* ─── DESIGN TOKENS ────────────────────────────────────────────────────────── */ :root { /* Brand palette — saffron, maroon, deep purple, gold */ --astro-saffron: #FF6B00; /* primary CTA / navbar */ --astro-saffron-dark: #E05A00; --astro-saffron-light: #FF8C2A; --astro-maroon: #B5002E; /* deep accent, badges */ --astro-maroon-light: #FF1F54; --astro-purple: #6A0DAD; /* horoscope / premium */ --astro-purple-light: #9B4DCA; --astro-gold: #FFB800; /* stars, ratings, highlights */ --astro-gold-light: #FFD54F; --astro-teal: #00897B; /* online indicator, success */ --astro-navy: #1A1A3E; /* footer, deep text */ /* Surface */ --astro-bg: #FFF8F2; /* warm off-white page bg */ --astro-surface: #FFFFFF; --astro-surface-warm: #FFF3E0; /* cards, sections */ --astro-border: #FFD8B2; --astro-divider: #FFE0B2; /* Text */ --astro-text-primary: #1A1A1A; --astro-text-secondary: #5C4033; --astro-text-muted: #9E7C6B; } /* ─── BASE ──────────────────────────────────────────────────────────────────── */ body { background-color: var(--astro-bg) !important; color: var(--astro-text-primary) !important; font-family: 'Gilroy', 'Inter', sans-serif !important; } /* ─── NAVBAR ────────────────────────────────────────────────────────────────── */ nav.navbar.navbar-expand-lg.navbar-light.top-navbar, .top-navbar, header .navbar { background: linear-gradient(135deg, var(--astro-saffron) 0%, var(--astro-maroon) 100%) !important; border-bottom: 3px solid var(--astro-gold) !important; box-shadow: 0 3px 16px rgba(181, 0, 46, 0.25) !important; } /* Nav links */ .top-navbar .navbar-nav .nav-link, .top-navbar .nav-link, header .navbar .nav-link { color: #FFFFFF !important; font-weight: 600 !important; letter-spacing: 0.02em; } .top-navbar .navbar-nav .nav-link:hover, header .navbar .nav-link:hover { color: var(--astro-gold-light) !important; } /* Navbar brand */ .navbar-brand, .astroway-logo-text { color: #FFFFFF !important; font-weight: 800 !important; } .navbar-brand span, .astroway-logo-subtext { color: var(--astro-gold-light) !important; } /* Toggler on mobile */ .navbar-toggler-icon { filter: invert(1) !important; } .navbar-toggler { border-color: rgba(255,255,255,0.4) !important; } /* Mobile dropdown */ @media (max-width: 991px) { .navbar-collapse { background: var(--astro-navy) !important; padding: 10px 15px; border-radius: 0 0 12px 12px; border-top: 2px solid var(--astro-gold); } .navbar-collapse .nav-link { border-bottom: 1px solid rgba(255,255,255,0.1) !important; padding: 10px 0 !important; } } /* Dropdown menus */ .navbar .dropdown-menu { background: var(--astro-navy) !important; border: 1px solid var(--astro-gold) !important; border-radius: 10px !important; } .navbar .dropdown-item { color: #fff !important; } .navbar .dropdown-item:hover { background: var(--astro-saffron) !important; color: #fff !important; } /* ─── TOP ANNOUNCEMENT BAR ──────────────────────────────────────────────────── */ .top-bar, .announcement-bar, .top-strip { background: var(--astro-maroon) !important; color: #fff !important; } /* ─── HERO / BANNER SECTION ─────────────────────────────────────────────────── */ .ds-head-body, .home-banner, .navratri-banner, .hero-section { background: linear-gradient(135deg, #FFF3E0 0%, #FCE4EC 50%, #EDE7F6 100%) !important; border-bottom: 3px solid var(--astro-divider); } /* ─── PRIMARY BUTTONS ────────────────────────────────────────────────────────── */ .btn-chat, .btn-call, .btn-primary, .btn-orange, .btn-chat-cta { background: linear-gradient(135deg, var(--astro-saffron) 0%, var(--astro-maroon-light) 100%) !important; color: #FFFFFF !important; border: none !important; border-radius: 25px !important; font-weight: 700 !important; letter-spacing: 0.03em; box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35) !important; transition: transform 0.15s ease, box-shadow 0.15s ease !important; } .btn-chat:hover, .btn-call:hover, .btn-primary:hover, .btn-chat-cta:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(255, 107, 0, 0.45) !important; color: #fff !important; } /* Free first call buttons */ .btn-chat-astro { background: #FFFFFF !important; color: var(--astro-saffron) !important; border: 2px solid var(--astro-saffron) !important; font-weight: 700 !important; border-radius: 20px !important; } .btn-chat-astro:hover { background: var(--astro-saffron) !important; color: #fff !important; border-color: var(--astro-saffron) !important; } /* Secondary / load-more */ .btn-load-more, .btn-secondary { background: var(--astro-navy) !important; color: #fff !important; border-radius: 25px !important; font-weight: 700 !important; } .btn-load-more:hover:not(:disabled) { background: var(--astro-purple) !important; } /* Yellow gold button variant */ .btn-yellow, .btn-warning { background: linear-gradient(135deg, var(--astro-gold) 0%, #FF8C00 100%) !important; color: var(--astro-navy) !important; border: none !important; font-weight: 700 !important; border-radius: 25px !important; } /* ─── ASTROLOGER CARDS ───────────────────────────────────────────────────────── */ .psychic-card, .astrologer-card, .astroway-astrologers .item { background: var(--astro-surface) !important; border: 1.5px solid var(--astro-border) !important; border-radius: 16px !important; box-shadow: 0 2px 12px rgba(255, 107, 0, 0.08) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .psychic-card:hover, .astrologer-card:hover, .astroway-astrologers .item:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 28px rgba(255, 107, 0, 0.18) !important; border-color: var(--astro-saffron) !important; } /* Online / busy badges */ .online-badge, .status-online, .badge-online { background: var(--astro-teal) !important; color: #fff !important; border-radius: 20px !important; } .busy-badge, .status-busy { background: var(--astro-maroon) !important; color: #fff !important; border-radius: 20px !important; } /* Must-try badge */ .psychic-card .must-try-badge { background: var(--astro-maroon-light) !important; } /* Price text */ .exprt-price, .astro-price { color: var(--astro-saffron) !important; font-weight: 700 !important; } /* ─── SECTION HEADINGS ───────────────────────────────────────────────────────── */ .section-title, .section-head h2, .ds-head-section h2, h2.title { color: var(--astro-maroon) !important; font-weight: 800 !important; position: relative; } .section-title::after, .section-head h2::after { content: ''; display: block; width: 60px; height: 4px; background: linear-gradient(90deg, var(--astro-saffron), var(--astro-gold)); border-radius: 2px; margin-top: 8px; } /* ─── SERVICE CATEGORY PILLS ─────────────────────────────────────────────────── */ .astrology-services, .astroway-menu, .service-tabs { background: var(--astro-surface-warm) !important; border-bottom: 2px solid var(--astro-divider) !important; } .astrology-services .service-item a, .astroway-menu a, .service-tab-link { color: var(--astro-text-secondary) !important; font-weight: 600; } .astrology-services .service-item.active a, .astrology-services .service-item a:hover, .service-tab-link.active, .service-tab-link:hover { color: var(--astro-saffron) !important; border-bottom: 3px solid var(--astro-saffron) !important; } /* ─── HOROSCOPE SIGNS ────────────────────────────────────────────────────────── */ #signSelectorContainer div:nth-child(1) .circle { border-color: #FF6B00 !important; } #signSelectorContainer div:nth-child(2) .circle { border-color: #8E24AA !important; } #signSelectorContainer div:nth-child(3) .circle { border-color: #00897B !important; } #signSelectorContainer div:nth-child(4) .circle { border-color: #E53935 !important; } #signSelectorContainer div:nth-child(5) .circle { border-color: #F4511E !important; } #signSelectorContainer div:nth-child(6) .circle { border-color: #1E88E5 !important; } #signSelectorContainer div:nth-child(7) .circle { border-color: #D81B60 !important; } #signSelectorContainer div:nth-child(8) .circle { border-color: #FFB300 !important; } #signSelectorContainer div:nth-child(9) .circle { border-color: #6D4C41 !important; } #signSelectorContainer div:nth-child(10) .circle { border-color: #039BE5 !important; } #signSelectorContainer div:nth-child(11) .circle { border-color: #43A047 !important; } #signSelectorContainer div:nth-child(12) .circle { border-color: #F06292 !important; } /* ─── PRODUCT / PUJA / ASTROMALL CARDS ───────────────────────────────────────── */ .vedic-card { background: linear-gradient(145deg, #FFF8E1, #FFF3E0) !important; border: 1.5px solid var(--astro-border) !important; border-radius: 14px !important; box-shadow: 0 2px 10px rgba(255, 107, 0, 0.08) !important; } .vedic-card:nth-child(3) { background: linear-gradient(145deg, #FCE4EC, #F8BBD0) !important; } .vedic-button { background: var(--astro-saffron) !important; color: #fff !important; border-radius: 20px !important; } .vedic-button:hover { background: var(--astro-saffron-dark) !important; } .product-card { border: 1.5px solid var(--astro-border) !important; border-radius: 16px !important; background: var(--astro-surface-warm) !important; } .btn-buy { background: linear-gradient(135deg, var(--astro-saffron), var(--astro-maroon)) !important; color: #fff !important; border-radius: 20px !important; font-weight: 700 !important; } /* ─── KUNDALI / PANCHANG CARDS ───────────────────────────────────────────────── */ .kundli-card { background: linear-gradient(145deg, #FFF8E1, #FFF3E0) !important; border: 1.5px solid var(--astro-divider) !important; border-radius: 16px !important; } .panchang-card { background: linear-gradient(135deg, var(--astro-purple) 0%, var(--astro-maroon) 100%) !important; border-radius: 16px !important; color: #fff !important; } .panchang-card .time-card { background: rgba(255,255,255,0.12) !important; color: #fff !important; border-radius: 10px !important; } .detailed-link { background: rgba(0,0,0,0.25) !important; color: var(--astro-gold-light) !important; border-radius: 10px !important; } /* ─── RATING STARS ───────────────────────────────────────────────────────────── */ [data-star]::after { color: var(--astro-gold) !important; } /* ─── FORMS & INPUTS ─────────────────────────────────────────────────────────── */ .form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--astro-saffron) !important; box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15) !important; outline: none !important; } /* ─── FOOTER ─────────────────────────────────────────────────────────────────── */ footer, .astroway-footer, .footer-main { background: var(--astro-navy) !important; color: #CFD8DC !important; border-top: 3px solid var(--astro-gold) !important; } footer a, .astroway-footer a { color: var(--astro-gold-light) !important; } footer a:hover, .astroway-footer a:hover { color: #FFFFFF !important; text-decoration: underline !important; } footer h5, footer h6, .astroway-footer h5, .astroway-footer h6 { color: var(--astro-gold) !important; font-weight: 700 !important; } /* ─── BREADCRUMBS ────────────────────────────────────────────────────────────── */ .astroway-breadcrumbs, .breadcrumb-wrapper, .breadcrumb { background: var(--astro-surface-warm) !important; border-bottom: 1px solid var(--astro-divider) !important; } .breadcrumb-item.active { color: var(--astro-saffron) !important; } .breadcrumb-item a { color: var(--astro-maroon) !important; } /* ─── MODALS ─────────────────────────────────────────────────────────────────── */ .modal-header { background: linear-gradient(135deg, var(--astro-saffron), var(--astro-maroon)) !important; color: #fff !important; border-bottom: none !important; border-radius: 12px 12px 0 0 !important; } .modal-header .modal-title, .modal-header .close { color: #fff !important; } .modal-content { border: 1.5px solid var(--astro-border) !important; border-radius: 14px !important; } .modal-footer { border-top: 1px solid var(--astro-divider) !important; background: var(--astro-surface-warm) !important; } /* ─── ALERTS & NOTIFICATIONS ─────────────────────────────────────────────────── */ .btn-chataccept { background: var(--astro-teal) !important; border-color: var(--astro-teal) !important; color: #fff !important; border-radius: 25px !important; } .btn-chatreject { border-color: var(--astro-maroon-light) !important; color: var(--astro-maroon-light) !important; border-radius: 25px !important; } .btn.clear-notification:hover, .btn.clear-notification:focus, .btn.clear-notification:active { background: var(--astro-maroon-light) !important; color: #fff !important; } /* ─── PAGE BACKGROUND SECTIONS ───────────────────────────────────────────────── */ .backimage { background: linear-gradient(171.5deg, #FFF3E0 50%, #FCE4EC 0) !important; } .bg-gray { background: #FFF8F2 !important; } .bg-astrologer-pink-light { background: linear-gradient(90deg, #FFF3E0 0%, #FCE4EC 100%) !important; } /* Blog button */ .button-blog { color: var(--astro-saffron) !important; border-color: var(--astro-saffron) !important; border-radius: 20px !important; } .button-blog:hover { background: var(--astro-saffron) !important; color: #fff !important; } /* ─── WALLET & RECHARGE SECTION ──────────────────────────────────────────────── */ .wallet-section, .recharge-card { background: linear-gradient(135deg, #FFF3E0, #FCE4EC) !important; border: 1.5px solid var(--astro-border) !important; border-radius: 16px !important; } /* ─── LIVE SECTION ───────────────────────────────────────────────────────────── */ .live-badge, .live-tag { background: var(--astro-maroon-light) !important; color: #fff !important; border-radius: 20px !important; font-weight: 700 !important; animation: pulse-live 1.5s infinite; } @keyframes pulse-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 31, 84, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(255, 31, 84, 0); } } /* ─── SCROLLBAR (Webkit) ─────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--astro-surface-warm); } ::-webkit-scrollbar-thumb { background: var(--astro-saffron); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--astro-maroon); } /* ─── AI ASTROLOGER BUTTON ───────────────────────────────────────────────────── */ .sf_chat_button1 button, .sf_chat_button button { background: linear-gradient(135deg, var(--astro-saffron), var(--astro-purple)) !important; border-radius: 50% !important; width: 58px !important; height: 58px !important; box-shadow: 0 4px 20px rgba(255, 107, 0, 0.4) !important; } /* ─── SELECT2 ────────────────────────────────────────────────────────────────── */ .select2-container--default .select2-selection--single { border-color: var(--astro-border) !important; border-radius: 8px !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--astro-saffron) !important; } /* ─── TOASTR OVERRIDES ───────────────────────────────────────────────────────── */ .toast-success { background-color: var(--astro-teal) !important; } .toast-error { background-color: var(--astro-maroon) !important; } .toast-warning { background-color: var(--astro-gold) !important; color: var(--astro-navy) !important; } /* ─── LINKS ──────────────────────────────────────────────────────────────────── */ a { color: var(--astro-saffron); } a:hover { color: var(--astro-maroon); } /* ─── MOBILE RESPONSIVE (≤ 767px) ────────────────────────────────────────────── */ @media (max-width: 767px) { /* Navbar — compact single row */ nav.navbar.navbar-expand-lg.navbar-light.top-navbar, .top-navbar, header .navbar { padding: 0 12px !important; height: 52px !important; } .navbar-brand, .astroway-logo-text { font-size: 17px !important; } /* Stack hero vertically */ .ds-head-body, .home-banner, .hero-section { padding: 18px 14px !important; flex-direction: column !important; text-align: center !important; } /* Section headings — smaller on mobile */ .section-title, .section-head h2, .ds-head-section h2, h2.title { font-size: 16px !important; } /* Astrologer cards — 2-column grid on mobile */ .astroway-astrologers .row, .psychic-cards-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .psychic-card, .astrologer-card, .astroway-astrologers .item { border-radius: 12px !important; padding: 10px !important; } /* Full-width CTA buttons */ .btn-chat, .btn-call, .btn-primary, .btn-primary-cta, .btn-chat-cta { width: 100% !important; text-align: center !important; padding: 11px 16px !important; font-size: 14px !important; } .btn-chat-astro { font-size: 12px !important; padding: 7px 12px !important; } /* Service bar — scrollable horizontal strip */ .astrology-services, .astroway-menu, .service-tabs { overflow-x: auto !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; padding: 0 10px !important; } .astrology-services::-webkit-scrollbar, .astroway-menu::-webkit-scrollbar { display: none !important; } /* Horoscope sign circles — smaller on mobile */ #signSelectorContainer { gap: 8px !important; justify-content: center !important; } #signSelectorContainer .circle { width: 64px !important; height: 64px !important; } /* Panchang card */ .panchang-card { padding: 14px !important; } .panchang-card h3 { font-size: 14px !important; } /* Product / Vedic grid — 2 columns */ .vedic-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .vedic-card { padding: 12px !important; } /* Footer — single column */ footer .row, .astroway-footer .row { flex-direction: column !important; } footer .col, footer [class*="col-"], .astroway-footer [class*="col-"] { width: 100% !important; margin-bottom: 16px !important; } /* Modal — full screen on mobile */ .modal-dialog { margin: 0 !important; max-width: 100% !important; height: 100% !important; } .modal-content { border-radius: 16px 16px 0 0 !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; } /* Section padding tighter */ section, .section, .container { padding-left: 12px !important; padding-right: 12px !important; } /* Kundali card image */ .kundli-card img { height: 280px !important; } /* Product details image */ .product-details-img { height: 240px !important; } /* Hero stat boxes — horizontal scroll */ .hero-stats-row { overflow-x: auto !important; display: flex !important; gap: 10px !important; padding-bottom: 4px !important; -webkit-overflow-scrolling: touch !important; } /* AI chat button — smaller on mobile */ .sf_chat_button1 button, .sf_chat_button button { width: 48px !important; height: 48px !important; } } /* ─── SMALL MOBILE (≤ 479px) ─────────────────────────────────────────────────── */ @media (max-width: 479px) { /* Astrologer cards — single column on very small screens */ .astroway-astrologers .row, .psychic-cards-row { grid-template-columns: 1fr !important; } /* Vedic grid — single column */ .vedic-grid { grid-template-columns: 1fr !important; } .navbar-brand, .astroway-logo-text { font-size: 15px !important; } /* Panchang time cards — wrap to 2 per row */ .panchang-card .time-card { flex: 1 1 calc(50% - 6px) !important; min-width: calc(50% - 6px) !important; } } /* ─── TABLET (768px – 1024px) ───────────────────────────────────────────────── */ @media (min-width: 768px) and (max-width: 1024px) { .astroway-astrologers .row, .psychic-cards-row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; } .vedic-grid { grid-template-columns: repeat(3, 1fr) !important; } nav.navbar.navbar-expand-lg.navbar-light.top-navbar, .top-navbar { padding: 0 16px !important; } } /* ─── BOTTOM MOBILE NAV BAR (mimics AstroTalk app feel) ─────────────────────── */ @media (max-width: 767px) { /* Give body breathing room if a fixed bottom bar exists */ body { padding-bottom: env(safe-area-inset-bottom, 0px) !important; } /* Sticky bottom CTA if present */ .inmobile-bottom, .mobile-sticky-bar { background: linear-gradient(135deg, var(--astro-saffron), var(--astro-maroon)) !important; border-top: 2px solid var(--astro-gold) !important; padding: 8px 16px !important; } .inmobile-bottom a, .mobile-sticky-bar a { color: #fff !important; } .inmobile-bottom .active, .mobile-sticky-bar .active { color: var(--astro-gold-light) !important; } }