/* Namaste PanditJi — shared customer UI refinement layer */ :root { --np-content: 1240px; --np-reading: 720px; --np-card-radius: 18px; --np-control-height: 46px; --np-soft-shadow: 0 1px 2px rgba(28,20,13,.03), 0 10px 28px rgba(28,20,13,.07); } /* Horizontal-overflow containment lives on only. Putting overflow-x:hidden on the root turns it into a scroll container and is a common cause of "the page won't scroll". */ body { overflow-x: hidden; background: #fffcf8; } body, button, input, select, textarea { font-feature-settings: "kern" 1, "liga" 1; } img { max-width: 100%; } ::selection { background: rgba(232,101,10,.2); color: var(--crimson); } .np-page { background: linear-gradient(180deg, #fffcf8 0, #fff 46%, #fffcf8 100%); } .np-admin-surface .np-page, .np-pandit-surface .np-page { background: #f8f5f0; } /* Keyboard and connection affordances are intentionally global: every portal and checkout inherits them without each page having to reimplement accessibility infrastructure. */ .np-skip-link { position: fixed; z-index: 2000; top: 10px; left: 12px; padding: 10px 16px; border-radius: 10px; background: #fff; color: var(--crimson); font-weight: 700; text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-160%); transition: transform .18s ease; } .np-skip-link:focus { transform: translateY(0); } .np-network-status { position: sticky; top: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 16px; background: #2f251d; color: #fff; font-size: .78rem; text-align: center; } .np-network-status[hidden] { display: none !important; } /* Role-specific shells: the customer header is never reused for partner or admin routes. */ .np-role-header { position: sticky; top: 0; z-index: 1030; min-height: 68px; display: flex; align-items: center; border-bottom: 1px solid var(--border-light); background: rgba(255,255,255,.97); box-shadow: 0 2px 14px rgba(28,20,13,.06); backdrop-filter: blur(14px); } .np-role-brand { display:inline-flex;align-items:center;gap:11px;color:inherit;text-decoration:none; } .np-role-brand:hover { color:inherit; } .np-role-brand img { width:auto;height:42px;object-fit:contain; } .np-role-brand span { display:flex;flex-direction:column;line-height:1.2; } .np-role-brand strong { color:var(--crimson);font:700 1rem 'Cinzel',serif; } .np-role-brand small { margin-top:3px;color:var(--text-muted);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase; } .np-role-badge { display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--text-secondary);font-size:.7rem;font-weight:700; } .np-admin-header .np-role-brand strong { color:#37110e; } .container { max-width: var(--np-content); } .np-page { min-height: 62vh; overflow-x: clip; } /* clip horizontal only — never trap vertical scroll */ section, [id] { scroll-margin-top: 112px; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } .section-title { font-size: clamp(1.45rem, 2.5vw, 2rem); letter-spacing: -.025em; } .section-label { letter-spacing: .11em; } /* Reusable page primitives shared by all 77 Razor views. */ .np-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; } .np-page-heading-copy { min-width: 0; } .np-page-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px; color: var(--saffron-dark); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .np-page-title { margin: 0; color: var(--crimson); font: 700 clamp(1.45rem, 3vw, 2rem)/1.2 'Cinzel', serif; letter-spacing: -.025em; } .np-page-subtitle { max-width: 680px; margin: 8px 0 0; color: var(--text-muted); font-size: .88rem; } .np-page-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; } .np-state-card { width: min(100%, 680px); margin-inline: auto; padding: clamp(28px, 6vw, 52px); border: 1px solid var(--border-light); border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: var(--np-soft-shadow); text-align: center; } .np-state-icon { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; border-radius: 22px; background: linear-gradient(145deg, var(--saffron-soft), #fff6e8); color: var(--saffron-dark); font-size: 1.8rem; box-shadow: inset 0 0 0 1px rgba(232,101,10,.1); } .np-state-card h1, .np-state-card h2, .np-state-card h3 { color: var(--crimson); font-family: 'Cinzel',serif; } .np-state-card p { max-width: 520px; margin-inline: auto; } .np-empty-state { padding: 48px 24px; color: var(--text-muted); text-align: center; } .np-empty-state i { display: block; margin-bottom: 12px; color: #c8b8a7; font-size: 2.5rem; } .np-empty-state h2, .np-empty-state h3 { color: var(--text-primary); font-size: 1rem; } .np-data-card { overflow: hidden; border: 1px solid var(--border-light); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); } .np-data-list { display: grid; gap: 1px; overflow: hidden; border-radius: 14px; background: var(--border-light); } .np-data-row { display: grid; grid-template-columns: minmax(120px,.8fr) minmax(0,1.2fr); gap: 16px; padding: 13px 15px; background: #fff; } .np-data-label { color: var(--text-muted); font-size: .74rem; } .np-data-value { color: var(--text-primary); font-size: .84rem; font-weight: 600; text-align: right; overflow-wrap: anywhere; } .np-trust-note { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border: 1px solid #d7ecd9; border-radius: 13px; background: #f3fbf4; color: #23612d; font-size: .8rem; } .page-hero { padding: clamp(42px, 7vw, 74px) 0; } .page-hero h1, .pooja-hero h1, .consult-hero h1, .store-hero h1, .book-hero h1, .panch-hero h1, .wallet-hero h1, .profile-hero h1, .profile-hero h2 { color: #fff !important; text-shadow: 0 2px 18px rgba(0,0,0,.28); } .btn, button, .np-back-btn, .cat-pill, .type-tab, .store-cat-pill { min-height: 42px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .form-control, .form-select { min-height: var(--np-control-height); max-width: none; border-color: var(--border); border-radius: 11px; background-color: #fff; } .form-label { margin-bottom: 7px; color: var(--text-secondary); font-weight: 600; } .form-text, .form-control + small, .form-select + small { display: block; margin-top: 6px; line-height: 1.5; } .form-check-input { width: 1.12em; height: 1.12em; border-color: #c9b8a5; } .form-check-input:checked { border-color: var(--saffron); background-color: var(--saffron); } .input-group-text { border-color: var(--border); background: var(--surface-2); color: var(--text-muted); } input[type="file"].form-control { padding-top: 9px; } .form-control::placeholder { color: #a69584; opacity: 1; } .form-control:focus, .form-select:focus { border-color: var(--saffron); box-shadow: 0 0 0 3px rgba(232,101,10,.12); } textarea.form-control { min-height: 116px; } .card, .card-spiritual, .policy-card, .pj-card-list, .sm-pooja-card, .prod-card, .summary-card, .filter-card, .filter-sidebar, .store-filter { border-color: var(--border-light) !important; } .card-spiritual, .sm-pooja-card, .prod-card, .pj-card-list { box-shadow: var(--shadow-sm); } .card-spiritual:hover, .sm-pooja-card:hover, .prod-card:hover, .pj-card-list:hover { box-shadow: var(--np-soft-shadow); } /* Pooja discovery: the title belongs to the photograph, not below it. */ .sm-pooja-card { display: flex; flex-direction: column; } .sm-card-img { height: 220px; overflow: hidden; align-items: initial !important; } .sm-card-img::after { z-index: -1 !important; background: linear-gradient(to top, rgba(24,3,2,.94) 0%, rgba(24,3,2,.48) 36%, rgba(24,3,2,.05) 72%) !important; } .sm-card-image-title { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; color: #fff !important; font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(.98rem, 1.8vw, 1.16rem); line-height: 1.25; text-shadow: 0 2px 12px rgba(0,0,0,.75); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sm-card-body { display: flex; flex: 1; flex-direction: column; padding: 17px 18px 18px; } .sm-card-footer { margin-top: auto; } .online-tag, .trending-tag { z-index: 3; box-shadow: 0 4px 12px rgba(0,0,0,.18); } .featured-banner::after { background: linear-gradient(90deg, rgba(30,3,2,.92) 0%, rgba(30,3,2,.7) 44%, rgba(30,3,2,.05) 78%) !important; } .featured-banner .fb-content { max-width: 520px; } .featured-banner .fb-content h3 { color: #fff !important; text-shadow: 0 2px 12px rgba(0,0,0,.45); } /* Compact home pooja discovery cards: photography carries emotion, HTML carries meaning. */ .home-pooja-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--border-light); border-radius: var(--np-card-radius); box-shadow: var(--shadow-sm); transition: var(--transition); } .home-pooja-card:hover { color: inherit; transform: translateY(-5px); border-color: rgba(232,101,10,.4); box-shadow: var(--np-soft-shadow); } .home-pooja-image { position: relative; height: 210px; overflow: hidden; background: #3d0906; } .home-pooja-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top,rgba(24,3,2,.92),rgba(24,3,2,.08) 68%); } .home-pooja-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .home-pooja-card:hover img { transform: scale(1.045); } .home-pooja-title { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 15px; color: #fff; font: 700 1rem/1.3 'Cinzel',serif; text-shadow: 0 2px 12px rgba(0,0,0,.72); } .home-pooja-body { display: flex; flex: 1; flex-direction: column; gap: 13px; padding: 16px; } .home-pooja-body p { margin: 0; color: var(--text-muted); font-size: .82rem; line-height: 1.65; } .home-pooja-body span { margin-top: auto; color: var(--saffron); font-size: .78rem; font-weight: 700; } /* Pooja detail imagery keeps the service identity visible above the fold. */ .pooja-details-visual { position: relative; min-height: 300px; overflow: hidden; margin-bottom: 20px; border-radius: 20px; box-shadow: var(--shadow-lg); background: #3d0906; } .pooja-details-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top,rgba(24,3,2,.9),rgba(24,3,2,.04) 70%); } .pooja-details-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pooja-details-visual-copy { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; } .pooja-details-visual-copy span { display: block; margin-bottom: 7px; color: #ffd27a; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .pooja-details-visual-copy h1 { margin: 0; color: #fff !important; font: 700 clamp(1.3rem,3vw,2rem)/1.2 'Cinzel',serif; text-shadow: 0 2px 14px rgba(0,0,0,.72); } /* Consultation cards */ .pj-card-inner { min-height: 190px; } .pj-name { font-size: 1.02rem; } .pj-action-panel .btn-chat-lg, .pj-action-panel .btn-call-lg, .pj-action-panel .btn-notify { min-height: 42px; } /* Store cards */ .prod-card { display: flex; flex-direction: column; height: 100%; } .prod-body { display: flex; flex: 1; flex-direction: column; } .prod-body > .d-flex:last-child { margin-top: auto; } .prod-name { line-height: 1.35; } /* Forms, summaries and data */ .summary-card { box-shadow: var(--shadow-md); } .table { --bs-table-bg: transparent; } .table > :not(caption) > * > * { padding: 13px 14px; vertical-align: middle; } .table thead th { border-bottom-width: 1px; color: var(--text-secondary); font-size: .72rem; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; } .table tbody tr { transition: background-color .16s ease; } .table tbody tr:hover { --bs-table-accent-bg: #fff9f2; } .table-responsive { scrollbar-color: #d8c8b7 transparent; scrollbar-width: thin; } .badge { border-radius: 999px; font-weight: 600; letter-spacing: .01em; } .modal-content { border: 1px solid var(--border-light); box-shadow: 0 28px 70px rgba(28,20,13,.22); } .alert { border-radius: 12px; } /* Admin and Pandit portals inherit the same density, rhythm and touch targets. */ .admin-content, .pp-content { background: #faf7f2; } .admin-content > .container, .pp-content > .container { max-width: none; padding-inline: 0; } .admin-content .card, .pp-content .card, .admin-content .stat-card-admin, .pp-content .stat-card-pandit { border: 1px solid var(--border-light); border-radius: 16px; box-shadow: 0 2px 14px rgba(65,37,16,.055); } .admin-content .stat-card-admin, .pp-content .stat-card-pandit { height: 100%; } .admin-content .table-responsive, .pp-content .table-responsive { scrollbar-width: thin; } .admin-content .table thead th, .pp-content .table thead th { color: var(--text-secondary); font-size: .72rem; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; } .admin-content .nav-tabs, .pp-content .nav-tabs { gap: 4px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; } .admin-content .nav-tabs::-webkit-scrollbar, .pp-content .nav-tabs::-webkit-scrollbar { display: none; } .admin-content .nav-tabs .nav-link, .pp-content .nav-tabs .nav-link { white-space: nowrap; min-height: 42px; } .admin-content > .py-3, .admin-content > .container > .py-3 { overflow: hidden; margin-bottom: 20px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; box-shadow: 0 12px 28px rgba(50,13,7,.12); } .admin-sidebar, .pp-side { top: 68px !important; max-height: calc(100dvh - 68px) !important; } .admin-sidebar, .pp-side { scrollbar-color: rgba(232,101,10,.3) transparent; scrollbar-width: thin; } .admin-nav-link, .pp-nav a, .pp-nav button { min-height: 44px; } .admin-content h1, .pp-content h1 { font-family: 'Cinzel',serif; } .amt-chip { appearance: none; font: inherit; } /* Navigation refinement */ .navbar-main { backdrop-filter: saturate(150%) blur(14px); background: rgba(255,255,255,.96); } .nav-link-main { border-radius: 9px; } .nav-link-main:hover { background: var(--surface-2); } .np-search-trigger { display: inline-flex; width: 42px; height: 42px; min-height: 42px; flex: 0 0 42px; align-items: center; justify-content: center; border: 1px solid var(--border-light); border-radius: 50%; background: #fff; color: var(--crimson); transition: var(--transition); } .np-search-trigger:hover { border-color: var(--saffron); color: var(--saffron-dark); background: var(--surface-2); } .np-search-modal { overflow: hidden; border-radius: 22px; } .np-search-box { position: relative; } .np-search-box > i { position: absolute; z-index: 2; left: 16px; top: 50%; transform: translateY(-50%); color: var(--saffron); font-size: 1.05rem; } .np-search-box .form-control { min-height: 54px; padding-left: 46px; font-size: 1rem; } .np-quick-links { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; } .np-quick-links a { display: flex; min-width: 0; min-height: 82px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px 6px; border: 1px solid var(--border-light); border-radius: 13px; background: var(--surface-2); color: var(--text-secondary); font-size: .68rem; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; } .np-quick-links a i { color: var(--saffron); font-size: 1.2rem; } .np-quick-links a:hover { border-color: var(--saffron); color: var(--crimson); background: var(--saffron-soft); } .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom); } .mobile-bottom-nav .mbn-item { min-height: 58px; } @media (max-width: 991.98px) { .navbar-main .container { padding-top: 8px; padding-bottom: 8px; } .navbar-main .navbar-collapse { margin-top: 10px; padding: 10px; border: 1px solid var(--border-light); border-radius: 14px; background: #fff; box-shadow: var(--shadow-lg); } .navbar-main .navbar-nav { gap: 3px; } .nav-link-main { padding: 11px 12px !important; } .dropdown-menu { border-radius: 12px; box-shadow: var(--shadow-lg); } .summary-card { position: static !important; } } @media (max-width: 767.98px) { :root { --np-control-height: 48px; } .np-customer-surface { padding-bottom: calc(66px + env(safe-area-inset-bottom)); } .np-admin-surface, .np-pandit-surface { padding-bottom: 0; } .container { padding-left: 18px; padding-right: 18px; } .np-page { min-height: 56vh; } .page-hero { padding: 36px 0 52px; } .page-hero h1 { font-size: clamp(1.55rem, 7vw, 2.05rem); } .policy-card { padding: 24px 20px; margin-top: -26px; } .policy-card p, .policy-card li { font-size: .88rem; } .footer-main { margin-top: 32px !important; padding-top: 38px !important; } .footer-main .row { row-gap: 28px !important; } .footer-main h6 { margin-bottom: 10px; } .sm-card-img { height: 210px; } .sm-card-footer { align-items: flex-end; gap: 12px; } .sm-card-footer .d-flex { flex-wrap: wrap; justify-content: flex-end; } .featured-banner { height: 260px; padding: 20px; background-position: 62% center !important; } .featured-banner::after { background: linear-gradient(0deg,rgba(30,3,2,.96),rgba(30,3,2,.66) 55%,rgba(30,3,2,.08)) !important; } .datetime-grid { grid-template-columns: repeat(4, minmax(68px,1fr)) !important; overflow-x: auto; padding-bottom: 5px; } .date-slot { min-height: 70px; } .steps-bar { overflow-x: auto; padding-bottom: 8px; } .step-item { min-width: 82px; } .pj-card-inner { min-height: 0; padding: 18px 16px; } .pj-action-panel { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2,1fr); align-items: stretch; } .pj-rate, .pj-reviews-badge { grid-column: 1 / -1; text-align: left; justify-self: start; } .pj-action-panel .btn-profile-sm { grid-column: 1 / -1; } .store-hero .input-group, .pooja-hero .input-group { max-width: none !important; } .store-hero .input-group .form-select { flex: 1 1 100%; max-width: none !important; } .store-hero .input-group .btn { flex: 1 1 auto; } .table-responsive { border: 1px solid var(--border-light); border-radius: 14px; } .admin-content .table, .pp-content .table { min-width: 720px; } input, select, textarea { font-size: 16px !important; } .np-page-heading { align-items: stretch; flex-direction: column; gap: 14px; margin-bottom: 20px; } .np-page-heading-actions { justify-content: flex-start; } .np-page-heading-actions .btn { flex: 1 1 auto; } .np-data-row { grid-template-columns: 1fr; gap: 4px; } .np-data-value { text-align: left; } .np-state-card { border-radius: 20px; } .card-header.d-flex { align-items: flex-start !important; flex-direction: column; gap: 10px; } .modal-dialog { margin: 10px; } .modal-content { max-height: calc(100dvh - 20px); overflow-y: auto; border-radius: 18px; } #scrollTop { right: 14px; bottom: calc(74px + env(safe-area-inset-bottom)); width: 42px; height: 42px; } .admin-content h4, .pp-content h4 { font-size: 1.12rem; } .admin-content .card-body, .pp-content .card-body { padding: 16px; } .admin-content .stat-card-admin, .pp-content .stat-card-pandit { padding: 15px; } .admin-content .row.g-4, .pp-content .row.g-4 { --bs-gutter-y: 1rem; } .admin-content .modal-dialog, .pp-content .modal-dialog { margin: 10px; } .admin-content .modal-content, .pp-content .modal-content { max-height: calc(100dvh - 20px); overflow-y: auto; } #admAiBtn { bottom: calc(18px + env(safe-area-inset-bottom)) !important; right: 14px !important; } #admAiPanel { bottom: calc(82px + env(safe-area-inset-bottom)) !important; right: 10px !important; max-width: calc(100vw - 20px) !important; } #npChatBtn { bottom: calc(74px + env(safe-area-inset-bottom)) !important; right: 14px !important; } #npChatPanel { bottom: calc(140px + env(safe-area-inset-bottom)) !important; right: 10px !important; max-width: calc(100vw - 20px) !important; } .np-pandit-surface #ppOpsBtn { bottom: calc(18px + env(safe-area-inset-bottom)) !important; } .np-pandit-surface #ppOpsPanel { bottom: calc(82px + env(safe-area-inset-bottom)) !important; } .admin-sidebar, .pp-side { top: 0 !important; max-height: none !important; } } .np-live-notice { position: fixed; top: 88px; right: 20px; z-index: 2000; width: min(390px, calc(100vw - 32px)); display: none; align-items: flex-start; gap: 10px; padding: 13px 16px; border: 1px solid #fed7aa; border-left: 4px solid var(--saffron, #e8650a); border-radius: 14px; background: #fffaf5; color: #5c2c0c; box-shadow: 0 16px 42px rgba(70, 23, 4, .18); font-size: .88rem; line-height: 1.5; } .np-live-notice.show { display: flex; } .np-live-notice.success { border-color: #bbf7d0; border-left-color: #16a34a; background: #f0fdf4; color: #166534; } .np-live-notice.error { border-color: #fecaca; border-left-color: #dc2626; background: #fff1f2; color: #991b1b; } .np-live-notice button { margin-left: auto; flex: 0 0 auto; } @media (max-width: 575.98px) { .np-live-notice { top: 76px; right: 16px; } } @media (max-width: 420px) { .container { padding-left: 15px; padding-right: 15px; } .sm-card-img { height: 196px; } .sm-card-body { padding: 15px; } .sm-card-footer { flex-direction: column; align-items: stretch; } .sm-card-footer > div:first-child { display: flex; align-items: baseline; justify-content: space-between; } .sm-card-footer .d-flex { width: 100%; } .btn-sm-details, .btn-sm-book { flex: 1; justify-content: center; } .pandit-grid { grid-template-columns: 1fr !important; } .hero-cta-primary, .hero-cta-secondary { width: 100%; justify-content: center; } .np-quick-links { grid-template-columns: repeat(2,1fr); } .np-role-header { min-height:62px; } .np-role-brand img { height:36px; } .np-role-badge { padding:7px 9px;font-size:0; } .np-role-badge i { font-size:.9rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }