/* ================================================================ RESPONSIVE.CSS — SanatanSansaar Central Responsive System Load order: LAST stylesheet in (after all component CSS) Depends on: design-tokens.css (CSS custom properties) Breakpoints (standardised across all files): Tablet : max-width: 768px Mobile : max-width: 576px Narrow : max-width: 400px Rule: prefer !important only when overriding legacy inline styles or competing !important rules in component CSS. ================================================================ */ /* ================================================================ §1 GLOBAL — OVERFLOW PREVENTION Kills horizontal scroll caused by 100vw elements, uncontrolled flex/grid rows, or wide inline-styled containers. ================================================================ */ html { overflow-x: hidden; scroll-behavior: smooth; } body { overflow-x: hidden; /* Keep body width honest on every viewport */ max-width: 100vw; } /* Belt-and-suspenders: clip any direct child of body that overflows (avoids needing overflow-x on every section individually). .ss-hero is excluded because it uses absolute-positioned glow blobs that intentionally overflow — clipping them breaks the visual effect. */ @media (max-width: 768px) { body > *:not(#ss-progress):not(.modal):not(.modal-backdrop):not(.ss-hero) { max-width: 100vw; overflow-x: hidden; } } /* ── Catch any 100vw element (e.g. leftover in blade templates) ── */ [style*="width:100vw"], [style*="width: 100vw"] { width: 100% !important; } /* ── Images should never bust their container ── */ img { max-width: 100%; height: auto; } /* ================================================================ §2 TYPOGRAPHY — FLUID SCALING Hindi & Devanagari text needs ~1.25–1.3× line-height to show the shirorekha (top bar) without clipping. ================================================================ */ @media (max-width: 768px) { h1, .h1 { font-size: clamp(1.5rem, 5vw, 2.25rem) !important; line-height: 1.25 !important; } h2, .h2 { font-size: clamp(1.25rem, 4vw, 1.875rem) !important; line-height: 1.25 !important; } h3, .h3 { font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important; line-height: 1.3 !important; } .font-30 { font-size: 1.35rem !important; } .font-28 { font-size: 1.25rem !important; } .font-22 { font-size: 1.1rem !important; } .font-18 { font-size: 1rem !important; } } @media (max-width: 576px) { h1, .h1 { font-size: clamp(1.35rem, 6vw, 1.75rem) !important; } h2, .h2 { font-size: clamp(1.15rem, 5vw, 1.5rem) !important; } h3, .h3 { font-size: clamp(1rem, 4vw, 1.25rem) !important; } .font-30 { font-size: 1.15rem !important; } .font-28 { font-size: 1.1rem !important; } .font-22 { font-size: 1rem !important; } } /* ================================================================ §3 CONTAINERS & SPACING ================================================================ */ @media (max-width: 768px) { .container, .container-fluid, .container-xl, .container-lg { padding-left: 16px !important; padding-right: 16px !important; } } @media (max-width: 576px) { .container, .container-fluid, .container-xl, .container-lg { padding-left: 10px !important; padding-right: 10px !important; } .inpage { padding: 14px !important; margin: 8px 0 !important; } /* Section rhythm — tighten Bootstrap spacing utils on mobile */ .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .pt-5 { padding-top: 2rem !important; } .pb-5 { padding-bottom: 2rem !important; } .my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .mt-5 { margin-top: 2rem !important; } } /* ================================================================ §4 HERO SECTION (index.blade.php — .ss-hero) ================================================================ */ /* ── Tablet ── */ @media (max-width: 768px) { .ss-hero { padding: 110px 16px 48px !important; min-height: auto !important; } .ss-hero-logo-block img { height: 140px !important; } .ss-headline { font-size: clamp(1.75rem, 6vw, 3.2rem) !important; line-height: 1.25 !important; } .ss-subline { font-size: clamp(1rem, 3.5vw, 1.5rem) !important; } .ss-desc { font-size: 0.9rem !important; margin-bottom: 20px; } .ss-ctas { gap: 8px !important; } } /* ── Mobile ── */ @media (max-width: 576px) { .ss-hero { padding: 100px 12px 40px !important; } .ss-hero-logo-block img { height: 100px !important; } .ss-headline { font-size: clamp(1.45rem, 7vw, 2.5rem) !important; line-height: 1.3 !important; } .ss-subline { font-size: clamp(0.9rem, 4vw, 1.25rem) !important; } .ss-desc { font-size: 0.82rem !important; } /* CTAs — stack to full width on narrow screens */ .ss-ctas { flex-direction: column !important; align-items: stretch !important; } .ss-btn-p, .ss-btn-s { width: 100%; text-align: center; padding: 13px 20px !important; } /* Badges — wrap tightly */ .ss-badges { gap: 6px !important; } .ss-badge { font-size: 0.72rem !important; padding: 4px 8px !important; } } /* ── Narrow (≤ 400px) ── */ @media (max-width: 400px) { .ss-hero { padding: 90px 8px 32px !important; } .ss-hero-logo-block img { height: 80px !important; } .ss-headline { font-size: clamp(1.3rem, 8vw, 2rem) !important; } } /* ================================================================ §5 IMAGES — FIXED-HEIGHT OVERRIDES CSS !important beats inline style="height:..." per CSS spec. ================================================================ */ /* Video carousel thumbnails — index.blade.php has inline height:160px */ img.video-thumbnail { height: auto !important; max-height: 160px; width: 100%; object-fit: cover; display: block; } @media (max-width: 768px) { img.video-thumbnail { max-height: 130px; } } @media (max-width: 576px) { img.video-thumbnail { max-height: 110px; } } /* Video card — fluid width */ .video-card { flex: 0 0 auto; width: clamp(180px, 38vw, 260px); } @media (max-width: 576px) { .video-card { width: clamp(150px, 42vw, 200px); } } /* Video title — ellipsis after 2 lines, no fixed height */ .video-title { height: auto !important; max-height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.8rem; line-height: 1.4; padding: 0 2px; } /* General inline-height guards — catch remaining blade instances */ @media (max-width: 576px) { img[style*="height: 200px"], img[style*="height:200px"] { height: auto !important; max-height: 150px !important; object-fit: cover; } img[style*="height: 160px"], img[style*="height:160px"] { height: auto !important; max-height: 120px !important; object-fit: cover; } img[style*="height: 120px"], img[style*="height:120px"] { height: auto !important; max-height: 90px !important; object-fit: cover; } } /* Horoscope sign icons */ @media (max-width: 576px) { .daily_horoscope_box img { width: 56px !important; height: 56px !important; object-fit: contain; } } /* ================================================================ §6 TABLES — SCROLLABLE & READABLE ON MOBILE ================================================================ */ /* Wrapper scroll — apply wherever .table-responsive is missing */ .table-responsive, .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 576px) { /* Shrink font in all data tables */ .table { font-size: 0.78rem !important; } .table th, .table td { padding: 6px 5px !important; /* Override ss-astro-panel.css white-space: nowrap */ white-space: normal !important; } /* Allow header labels to break across lines */ .table thead th { word-break: break-word; hyphens: auto; } /* But keep numeric/date cells single-line */ .table td.text-nowrap, .table td[data-type="amount"], .table td[data-type="date"] { white-space: nowrap !important; } } /* ================================================================ §7 FORMS — PREVENT iOS AUTO-ZOOM iOS Safari zooms when font-size < 16px on focused inputs. ================================================================ */ @media (max-width: 576px) { input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], input[type="url"], select, textarea { font-size: 16px !important; } label { font-size: 0.85rem; } .form-text, .help-block { font-size: 0.75rem; } /* Select2 dropdowns */ .select2-selection, .select2-container .select2-selection--single { min-height: 44px !important; } } /* ================================================================ §8 MODALS ================================================================ */ @media (max-width: 576px) { /* Full-width with small margin */ .modal-dialog { margin: 8px auto; width: calc(100% - 16px); max-width: none !important; } .modal-dialog.modal-lg, .modal-dialog.modal-md { max-width: none !important; } .modal-header { padding: 10px 14px; } .modal-body { padding: 10px 14px; } .modal-footer { padding: 8px 14px; flex-wrap: wrap; gap: 8px; } .modal-footer .btn { flex: 1 1 auto; } .modal-title { font-size: 1rem; } /* Close button — larger tap target */ .modal-header .close { font-size: 24px !important; padding: 4px 8px !important; margin: -4px -8px -4px auto !important; } } /* ================================================================ §9 BUTTONS & TOUCH TARGETS Minimum 44×44 px per WCAG 2.5.5 / Apple HIG. ================================================================ */ @media (max-width: 768px) { /* Standard buttons — never shorter than 44px. display is intentionally NOT set here: .btn-block relies on display:block (set by Bootstrap) and inline-flex would break it. */ .btn:not(.btn-sm):not(.close):not(.btn-circle) { min-height: 44px; } } @media (max-width: 576px) { /* Blocked-astrologer page: override min-width: 130px */ .psychic-card .btn { min-width: 0 !important; width: 100% !important; } /* Collapse tight button groups to full-width stack */ .btn-group-flush > .btn { width: 100% !important; border-radius: var(--ss-radius, 8px) !important; } /* Horoscope / sign nav links */ .ss-sign-grid a, .ss-sign-menu a { min-height: 44px; min-width: 44px; } } /* ================================================================ §10 BROADCAST PAGE (broadcast.blade.php) Heights defined in inline