/** * Sanatan Samruddhi — Design System (v1.0.8.11) * Coexists with existing CSS. Tailwind utilities load separately (preflight off). * Dark mode: tokens + .dark selectors prepared; DO NOT add class="dark" to yet. */ :root { /* Brand tokens (UI_THEME_GUIDE + live maroon/saffron) */ --ss-saffron: #c26100; --ss-saffron-glow: #f59e0b; --ss-gold: #d4af37; --ss-maroon: #6b1c1c; --ss-maroon-deep: #681515; --ss-maroon-bright: #7a1313; --ss-ink: #2b1a12; --ss-ink-soft: #5f4a32; --ss-ink-muted: #8b6b4d; --ss-cream: #fff8ee; --ss-paper: #fffdf8; --ss-bg: #fff4dd; --ss-bg-soft: #f7efe3; --ss-surface: #ffffff; --ss-border: #dfc5a5; --ss-border-soft: rgba(107, 28, 28, 0.14); --ss-shadow: rgba(28, 16, 10, 0.14); --ss-success: #10b981; --ss-warning: #eab308; --ss-error: #ef4444; --ss-info: #3b82f6; --ss-focus: #f59e0b; --ss-radius: 12px; --ss-radius-lg: 16px; --ss-radius-pill: 999px; --ss-header-h: 64px; --ss-font-body: "Noto Sans Telugu", "Noto Sans Devanagari", system-ui, sans-serif; --ss-font-heading: "Noto Serif Telugu", "Ramabhadra", Georgia, serif; --ss-font-sanskrit: "Tiro Devanagari Sanskrit", "Noto Sans Devanagari", serif; --ss-space-1: 0.25rem; --ss-space-2: 0.5rem; --ss-space-3: 0.75rem; --ss-space-4: 1rem; --ss-space-6: 1.5rem; --ss-space-8: 2rem; --ss-transition: 180ms ease; } /* Dark mode prep — unused until class="dark" is enabled on */ .dark { --ss-ink: #f5ebe0; --ss-ink-soft: #d4c4b0; --ss-ink-muted: #a89078; --ss-cream: #1a1410; --ss-paper: #221c17; --ss-bg: #14100c; --ss-bg-soft: #1a1410; --ss-surface: #2a221c; --ss-border: #4a3a2a; --ss-border-soft: rgba(247, 165, 49, 0.2); --ss-shadow: rgba(0, 0, 0, 0.45); --ss-maroon: #e8a090; --ss-maroon-deep: #c45c4a; } /* -------------------------------------------------------------------------- */ /* A11y helpers */ /* -------------------------------------------------------------------------- */ .ss-sr-only, .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } :focus-visible { outline: 3px solid var(--ss-focus); outline-offset: 2px; } .ss-skip-link { position: absolute; left: 1rem; top: -100px; z-index: 10000; padding: 0.6rem 1rem; background: var(--ss-maroon-deep); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; } .ss-skip-link:focus { top: 0.75rem; } /* -------------------------------------------------------------------------- */ /* Buttons */ /* -------------------------------------------------------------------------- */ .ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; padding: 0.55rem 1.25rem; border-radius: 10px; border: 1px solid transparent; font-family: var(--ss-font-body); font-size: 0.95rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background var(--ss-transition), color var(--ss-transition), border-color var(--ss-transition), box-shadow var(--ss-transition), transform var(--ss-transition); } .ss-btn:active { transform: translateY(1px); } .ss-btn--primary { background: linear-gradient(135deg, var(--ss-maroon-bright), var(--ss-saffron)); color: #fff; box-shadow: 0 4px 14px rgba(122, 19, 19, 0.25); } .ss-btn--primary:hover { filter: brightness(1.05); color: #fff; } .ss-btn--secondary { background: #ffd36a; color: #651515; border-color: #f0c04a; } .ss-btn--secondary:hover { background: #fff0bd; } .ss-btn--ghost { background: transparent; color: var(--ss-maroon); border-color: var(--ss-border-soft); } .ss-btn--ghost:hover { background: rgba(107, 28, 28, 0.06); } .ss-btn--sm { min-height: 36px; padding: 0.35rem 0.85rem; font-size: 0.85rem; } .ss-btn--icon { width: 44px; height: 44px; padding: 0; border-radius: 10px; } /* -------------------------------------------------------------------------- */ /* Cards / surfaces */ /* -------------------------------------------------------------------------- */ .ss-card { background: var(--ss-paper); border: 1px solid var(--ss-border-soft); border-radius: var(--ss-radius-lg); box-shadow: 0 8px 22px var(--ss-shadow); overflow: hidden; transition: transform var(--ss-transition), box-shadow var(--ss-transition); display: block; text-decoration: none; color: inherit; } .ss-card--featured { border-color: rgba(245, 158, 11, 0.55); box-shadow: 0 8px 22px var(--ss-shadow), 0 0 0 1px rgba(245, 158, 11, 0.25); } .ss-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px var(--ss-shadow); } .ss-card__body { padding: 0.85rem 1rem 1rem; } .ss-card__title { margin: 0 0 0.35rem; font-family: var(--ss-font-heading); font-size: 1rem; font-weight: 700; color: var(--ss-ink); text-align: left; line-height: 1.35; } .ss-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; font-size: 0.75rem; color: var(--ss-ink-soft); } /* -------------------------------------------------------------------------- */ /* Forms */ /* -------------------------------------------------------------------------- */ .ss-input, .ss-select, .ss-textarea { width: 100%; min-height: 44px; padding: 0.65rem 0.9rem; border: 1px solid var(--ss-border-soft); border-radius: 10px; background: var(--ss-cream); color: var(--ss-ink); font: inherit; transition: border-color var(--ss-transition), box-shadow var(--ss-transition); } .ss-input:focus, .ss-select:focus, .ss-textarea:focus { border-color: var(--ss-saffron-glow); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); outline: none; } .ss-search-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; width: 100%; max-width: 36rem; } .ss-search-bar--center { margin-left: auto; margin-right: auto; margin-bottom: 1.25rem; justify-content: center; } .ss-search-bar .ss-input { flex: 1 1 12rem; min-width: 0; } /* Page shells */ .ss-page { max-width: 1100px; margin: 0 auto; padding: 1.75rem 1rem 4rem; } @media (min-width: 1536px) { .ss-page--videos { max-width: 1280px; } } .ss-page-header { text-align: center; margin-bottom: 1.5rem; } .ss-page-header h1 { font-family: var(--ss-font-heading); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ss-maroon); margin: 0; } .ss-page-header p { color: var(--ss-ink-soft); margin: 0.5rem 0 0; font-size: 0.95rem; } .ss-section-title { font-family: var(--ss-font-heading); font-size: 1.15rem; color: var(--ss-maroon); margin: 0.5rem 0 0.85rem; text-align: left; } .ss-video-grid--spaced { margin-bottom: 1.75rem; } .ss-pager__current { color: var(--ss-ink-soft); } .ss-empty .ss-btn { margin-top: 0.75rem; } .ss-home-muted { text-align: center; color: var(--ss-ink-muted); font-size: 0.875rem; margin: 0 0 1rem; } .ss-home-cta { text-align: center; margin-top: 1rem; } .ss-home-subhead { font-size: 1.1rem; margin: 1rem 0 0.75rem; color: var(--ss-maroon); text-align: left; } .ss-home-subhead--center { text-align: center; } .ss-home-hero-video { max-width: 720px; margin: 0 auto 1.5rem; } .ss-home-hero-video .ss-card__title { text-align: center; } /* -------------------------------------------------------------------------- */ /* Chips / badges / alerts */ /* -------------------------------------------------------------------------- */ .ss-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0.9rem; border-radius: var(--ss-radius-pill); border: 1px solid var(--ss-border-soft); background: rgba(180, 90, 9, 0.08); color: var(--ss-ink); font-size: 0.8125rem; font-weight: 600; text-decoration: none; min-height: 36px; transition: background var(--ss-transition), border-color var(--ss-transition); } .ss-chip:hover { background: rgba(180, 90, 9, 0.16); } .ss-chip.is-active, .ss-chip--active { background: #ff9d2f; border-color: #ff9d2f; color: #111; } .ss-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; background: rgba(255, 140, 0, 0.14); color: #b66a12; border: 1px solid rgba(140, 31, 0, 0.18); } .ss-alert { padding: 0.85rem 1rem; border-radius: 10px; border: 1px solid var(--ss-border-soft); background: rgba(255, 140, 0, 0.08); color: var(--ss-ink-soft); } .ss-alert--error { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.25); color: #9b1c1c; } .ss-alert--success { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.25); color: #065f46; } /* -------------------------------------------------------------------------- */ /* Tables / pagination / empty / skeleton */ /* -------------------------------------------------------------------------- */ .ss-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--ss-radius); border: 1px solid var(--ss-border-soft); } .ss-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .ss-table th, .ss-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--ss-border-soft); } .ss-table th { background: rgba(107, 28, 28, 0.06); color: var(--ss-maroon); font-weight: 700; } .ss-pager { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: center; margin-top: 1.75rem; font-size: 0.875rem; } .ss-pager a { text-decoration: none; padding: 0.5rem 0.9rem; min-height: 40px; display: inline-flex; align-items: center; border-radius: 8px; background: rgba(180, 90, 9, 0.1); color: var(--ss-maroon); font-weight: 600; } .ss-pager a:hover { background: rgba(180, 90, 9, 0.18); } .ss-empty { text-align: center; padding: 2.25rem 1rem; color: var(--ss-ink-soft); border: 1px dashed rgba(140, 31, 0, 0.28); border-radius: 12px; background: rgba(255, 140, 0, 0.05); } .ss-skeleton { background: linear-gradient( 90deg, rgba(107, 28, 28, 0.06) 25%, rgba(107, 28, 28, 0.12) 50%, rgba(107, 28, 28, 0.06) 75% ); background-size: 200% 100%; animation: ss-shimmer 1.2s ease-in-out infinite; border-radius: 8px; } @keyframes ss-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* -------------------------------------------------------------------------- */ /* Video media */ /* -------------------------------------------------------------------------- */ .ss-video-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.125rem; } @media (min-width: 640px) { .ss-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .ss-video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1536px) { .ss-video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ss-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #2f1800; overflow: hidden; } .ss-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ss-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.28); color: #ff9d2f; font-size: 1.6rem; transition: background var(--ss-transition); pointer-events: none; } .ss-card:hover .ss-play, a:hover .ss-play { background: rgba(0, 0, 0, 0.4); } .ss-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1.25rem; } /* -------------------------------------------------------------------------- */ /* Site header / mobile drawer */ /* -------------------------------------------------------------------------- */ .ss-header { position: sticky; top: 0; z-index: 50; background: linear-gradient(90deg, #7a1313, #b83c1e, #f7a531); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } .ss-header__bar { display: flex; align-items: center; gap: 0.75rem; min-height: var(--ss-header-h); padding: 0.5rem 1rem; max-width: 1440px; margin: 0 auto; } .ss-brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: #fff; min-width: 0; flex-shrink: 1; } .ss-brand__logo { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; border-radius: 10px; background: radial-gradient(circle at 30% 30%, #fff6e2, #f1d4a4); padding: 4px; } .ss-brand__text { display: flex; flex-direction: column; min-width: 0; } .ss-brand__name { font-family: var(--ss-font-heading); font-weight: 700; font-size: clamp(0.85rem, 2.5vw, 1.05rem); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-brand__tag { font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff3d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-header__actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; flex-shrink: 0; } /* Pinned auth CTAs — outside .ss-nav-desktop overflow so Login/Registration stay visible */ .ss-header__auth { display: none; align-items: center; gap: 0.35rem; flex-shrink: 0; } @media (min-width: 1024px) { .ss-header__auth { display: flex; } } .ss-header__auth a { color: #fff; text-decoration: none; white-space: nowrap; padding: 0.4rem 0.7rem; border-radius: var(--ss-radius-pill); border: 1px solid rgba(255, 255, 255, 0.45); font-size: 0.75rem; font-weight: 600; transition: background var(--ss-transition); min-height: 36px; display: inline-flex; align-items: center; } .ss-header__auth a:hover, .ss-header__auth a:focus-visible { background: rgba(255, 255, 255, 0.2); } .ss-header__auth a.ss-nav-cta { background: #ffd36a; border-color: #ffd36a; color: #651515; } .ss-header__search { display: none; align-items: center; gap: 0.35rem; flex: 1 1 auto; max-width: 220px; margin-left: 0.5rem; } @media (min-width: 768px) { .ss-header__search { display: flex; } } .ss-header__search input { flex: 1; min-width: 0; min-height: 36px; padding: 0.35rem 0.75rem; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 0.875rem; } .ss-header__search input::placeholder { color: rgba(255, 255, 255, 0.7); } .ss-header__search button { min-height: 36px; padding: 0.35rem 0.75rem; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.22); color: #fff; cursor: pointer; font-weight: 600; font-size: 0.8rem; } .ss-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; flex-shrink: 0; } @media (min-width: 1024px) { .ss-nav-toggle { display: none; } } .ss-nav-desktop { display: none; align-items: center; gap: 0.35rem; flex-wrap: nowrap; overflow-x: auto; /* Content links only — auth CTAs live in .ss-header__auth (never clipped here) */ max-width: min(48vw, 640px); scrollbar-width: none; -ms-overflow-style: none; flex: 1 1 auto; min-width: 0; } .ss-nav-desktop::-webkit-scrollbar { display: none; } @media (min-width: 1024px) { .ss-nav-desktop { display: flex; } } @media (min-width: 1280px) { .ss-nav-desktop { max-width: min(52vw, 720px); } } .ss-nav-desktop a { color: #fff; text-decoration: none; white-space: nowrap; padding: 0.4rem 0.7rem; border-radius: var(--ss-radius-pill); border: 1px solid rgba(255, 255, 255, 0.45); font-size: 0.75rem; font-weight: 600; transition: background var(--ss-transition); } .ss-nav-desktop a:hover, .ss-nav-desktop a[aria-current="page"] { background: rgba(255, 255, 255, 0.2); } .ss-nav-desktop a.ss-nav-cta { background: #ffd36a; border-color: #ffd36a; color: #651515; } /* Drawer */ .ss-drawer-backdrop { position: fixed; inset: 0; background: rgba(20, 8, 4, 0.45); opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 200ms ease; z-index: 60; } .ss-drawer-backdrop.is-open { opacity: 1; visibility: visible; } .ss-drawer { position: fixed; top: 0; right: 0; width: min(88vw, 320px); height: 100%; background: linear-gradient(180deg, #7a1313, #5a1010 40%, #3d0c0c); color: #fff; z-index: 70; transform: translateX(100%); transition: transform 220ms ease; display: flex; flex-direction: column; padding: 1rem; box-shadow: -8px 0 28px rgba(0, 0, 0, 0.35); } .ss-drawer.is-open { transform: translateX(0); } .ss-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .ss-drawer__close { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; font-size: 1.25rem; } .ss-drawer__nav { display: flex; flex-direction: column; gap: 0.35rem; overflow-y: auto; flex: 1; padding-bottom: 2rem; } .ss-drawer__nav a { color: #fff; text-decoration: none; padding: 0.75rem 0.9rem; border-radius: 10px; min-height: 44px; display: flex; align-items: center; font-weight: 600; font-size: 0.95rem; } .ss-drawer__nav a:hover, .ss-drawer__nav a:focus-visible { background: rgba(255, 255, 255, 0.12); } .ss-drawer__nav a.ss-nav-cta { background: #ffd36a; color: #651515; margin-top: 0.5rem; } .ss-drawer__search { display: flex; gap: 0.4rem; margin-bottom: 1rem; } .ss-drawer__search input { flex: 1; min-height: 44px; border: 0; border-radius: 10px; padding: 0.5rem 0.75rem; background: rgba(255, 255, 255, 0.14); color: #fff; } .ss-drawer__search button { min-height: 44px; padding: 0 0.9rem; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.22); color: #fff; font-weight: 700; cursor: pointer; } body.ss-nav-open { overflow: hidden; } /* Home page: override wrap-prone old nav when ss-home-header is used */ .ss-home-header .nav--legacy { display: none; } @media (min-width: 1024px) { .ss-home-header .nav--legacy { display: none; } } /* Marquee under header */ .ss-slokas { width: 100%; overflow: clip; border-top: 1px solid rgba(255, 255, 255, 0.35); padding: 0.35rem 0; } .ss-slokas__track { display: inline-block; white-space: nowrap; padding-left: 100%; animation: ss-slokas-scroll 130s linear infinite; font-size: 0.75rem; color: #fff5da; } .ss-slokas__track span { padding-right: 1.5rem; } @keyframes ss-slokas-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .ss-slokas__track { animation: none; padding-left: 1rem; white-space: normal; } .ss-skeleton { animation: none; } .ss-card:hover { transform: none; } } /* Footer */ .ss-footer { margin-top: 2rem; padding: 1.5rem 1rem 2rem; background: linear-gradient(180deg, transparent, rgba(107, 28, 28, 0.06)); text-align: center; color: var(--ss-ink-soft); font-size: 0.875rem; } .ss-footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 0.85rem; justify-content: center; margin-bottom: 0.75rem; } .ss-footer__links a { color: var(--ss-maroon); text-decoration: none; font-weight: 600; } .ss-footer__links a:hover { text-decoration: underline; } /* Container / layout helpers */ .ss-container { width: 100%; max-width: 1160px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 1536px) { .ss-container { max-width: 1400px; } } /* Reduce CLS for lazy media */ img[loading="lazy"] { content-visibility: auto; }