/* ========================================================================== Preserving Srila Prabhupada's Legacy — Design System A devotional hub for original, pre-1978 editions. ========================================================================== */ /* -------------------------------------------------------------------------- 1. CSS CUSTOM PROPERTIES (Light Mode — Default) -------------------------------------------------------------------------- */ :root { /* Primary palette */ --color-saffron: #FF9933; --color-saffron-hover: #E6882E; --color-saffron-light: #FFF0E0; --color-gold: #DAA520; --color-gold-light: #F5E6B8; --color-burgundy: #800020; --color-burgundy-light: #A3264A; /* Backgrounds */ --color-bg: #FFF8F0; --color-bg-alt: #FFF0E0; --color-card-bg: #FFFFFF; --color-card-border: #E8DDD0; /* Text */ --color-text: #2C1810; --color-text-secondary: #5C4A3A; --color-text-muted: #8A7968; --color-text-on-dark: #FFF8F0; --color-text-on-saffron:#FFFFFF; /* Semantic */ --color-success: #2E7D32; --color-success-bg: #E8F5E9; --color-error: #C62828; --color-error-bg: #FFEBEE; /* Shadows */ --shadow-sm: 0 1px 3px rgba(44, 24, 16, 0.08); --shadow-md: 0 4px 12px rgba(44, 24, 16, 0.10); --shadow-lg: 0 8px 24px rgba(44, 24, 16, 0.12); --shadow-lift: 0 12px 32px rgba(44, 24, 16, 0.16); /* Typography */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 2rem; /* 32px */ --font-size-4xl: 2.5rem; /* 40px */ --line-height: 1.6; /* Spacing */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ /* Layout */ --container-max: 1200px; --container-pad: 1.5rem; --border-radius-sm: 6px; --border-radius-md: 12px; --border-radius-lg: 16px; --border-radius-pill: 9999px; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* Header height (for offset calculations) */ --header-height: 64px; } /* -------------------------------------------------------------------------- 2. DARK MODE — via class .dark-mode on -------------------------------------------------------------------------- */ .dark-mode { --color-bg: #1A1210; --color-bg-alt: #231A15; --color-card-bg: #2C1810; --color-card-border: #3D2A1E; --color-text: #E8DDD0; --color-text-secondary: #C4B5A5; --color-text-muted: #9A8B7B; --color-text-on-dark: #E8DDD0; --color-saffron: #FFB366; --color-saffron-hover: #FFA34D; --color-saffron-light: #3D2A1E; --color-gold: #F0C050; --color-gold-light: #3D3018; --color-burgundy: #CC4466; --color-burgundy-light: #993355; --color-success-bg: #1B3A1B; --color-error-bg: #3A1B1B; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.40); } /* System preference fallback (when no toggle class is set) */ @media (prefers-color-scheme: dark) { body:not(.light-mode) { --color-bg: #1A1210; --color-bg-alt: #231A15; --color-card-bg: #2C1810; --color-card-border: #3D2A1E; --color-text: #E8DDD0; --color-text-secondary: #C4B5A5; --color-text-muted: #9A8B7B; --color-text-on-dark: #E8DDD0; --color-saffron: #FFB366; --color-saffron-hover: #FFA34D; --color-saffron-light: #3D2A1E; --color-gold: #F0C050; --color-gold-light: #3D3018; --color-burgundy: #CC4466; --color-burgundy-light: #993355; --color-success-bg: #1B3A1B; --color-error-bg: #3A1B1B; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.40); } } /* -------------------------------------------------------------------------- 3. RESET & BASE STYLES -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; /* 16px */ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: var(--line-height); color: var(--color-text); background-color: var(--color-bg); transition: background-color var(--transition-slow), color var(--transition-slow); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-saffron); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-saffron-hover); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-saffron); outline-offset: 2px; } ul, ol { list-style: none; } button { cursor: pointer; font-family: inherit; font-size: inherit; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; font-size: inherit; } /* -------------------------------------------------------------------------- 4. TYPOGRAPHY -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.25; color: var(--color-text); } h1 { font-size: var(--font-size-4xl); margin-bottom: var(--space-lg); } h2 { font-size: var(--font-size-3xl); margin-bottom: var(--space-md); } h3 { font-size: var(--font-size-2xl); margin-bottom: var(--space-md); } h4 { font-size: var(--font-size-xl); margin-bottom: var(--space-sm); } p { margin-bottom: var(--space-md); } .text-sm { font-size: var(--font-size-sm); } .text-muted { color: var(--color-text-muted); } .text-center { text-align: center; } /* -------------------------------------------------------------------------- 5. LAYOUT UTILITIES -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-pad); padding-right: var(--container-pad); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } main { flex: 1; padding-top: var(--space-xl); padding-bottom: var(--space-3xl); } .section { padding: var(--space-2xl) 0; } .section-title { font-size: var(--font-size-3xl); text-align: center; margin-bottom: var(--space-sm); } .section-subtitle { font-size: var(--font-size-lg); color: var(--color-text-secondary); text-align: center; margin-bottom: var(--space-2xl); max-width: 640px; margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------- 6. HEADER & NAVIGATION -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--color-card-bg); border-bottom: 1px solid var(--color-card-border); box-shadow: var(--shadow-sm); transition: background-color var(--transition-slow), border-color var(--transition-slow); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); } .site-brand { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--color-text); font-weight: 700; font-size: var(--font-size-lg); white-space: nowrap; transition: color var(--transition-fast); } .site-brand:hover { color: var(--color-saffron); } .site-brand-icon { font-size: 1.5rem; } /* Desktop nav */ .nav-desktop { display: none; align-items: center; gap: var(--space-xs); } .nav-link { position: relative; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-secondary); text-decoration: none; border-radius: var(--border-radius-sm); transition: color var(--transition-fast), background-color var(--transition-fast); } .nav-link:hover { color: var(--color-saffron); background-color: var(--color-saffron-light); } .nav-link.active { color: var(--color-saffron); } .nav-link.active::after { content: ''; position: absolute; bottom: 0; left: var(--space-md); right: var(--space-md); height: 2px; background-color: var(--color-saffron); border-radius: 1px; } /* Header actions (search, theme toggle, hamburger) */ .header-actions { display: flex; align-items: center; gap: var(--space-xs); } .header-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--border-radius-sm); font-size: 1.25rem; color: var(--color-text-secondary); transition: color var(--transition-fast), background-color var(--transition-fast); } .header-btn:hover { color: var(--color-saffron); background-color: var(--color-saffron-light); } /* Hamburger — visible on mobile */ .hamburger { display: flex; } /* Search bar overlay */ .search-overlay { display: none; position: absolute; top: 100%; left: 0; right: 0; background-color: var(--color-card-bg); border-bottom: 1px solid var(--color-card-border); box-shadow: var(--shadow-md); padding: var(--space-md) 0; z-index: 99; } .search-overlay.is-open { display: block; } .search-bar { width: 100%; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-base); border: 2px solid var(--color-card-border); border-radius: var(--border-radius-pill); background-color: var(--color-bg); color: var(--color-text); transition: border-color var(--transition-fast), background-color var(--transition-slow); } .search-bar:focus { border-color: var(--color-saffron); outline: none; } .search-bar::placeholder { color: var(--color-text-muted); } /* Mobile nav drawer */ .nav-mobile { display: none; position: absolute; top: 100%; left: 0; right: 0; background-color: var(--color-card-bg); border-bottom: 1px solid var(--color-card-border); box-shadow: var(--shadow-lg); padding: var(--space-md) 0; z-index: 98; max-height: calc(100vh - var(--header-height)); overflow-y: auto; } .nav-mobile.is-open { display: block; animation: fadeSlideDown var(--transition-base) forwards; } .nav-mobile .nav-link { display: block; padding: var(--space-md) var(--container-pad); font-size: var(--font-size-base); border-radius: 0; } .nav-mobile .nav-link.active::after { left: 0; right: auto; width: 3px; height: 100%; top: 0; bottom: 0; } /* -------------------------------------------------------------------------- 7. FOOTER -------------------------------------------------------------------------- */ .site-footer { background-color: var(--color-card-bg); border-top: 1px solid var(--color-card-border); padding: var(--space-2xl) 0 var(--space-lg); margin-top: auto; transition: background-color var(--transition-slow), border-color var(--transition-slow); } .footer-tagline { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text); text-align: center; margin-bottom: var(--space-lg); } .footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); margin-bottom: var(--space-lg); } .footer-links a { font-size: var(--font-size-sm); color: var(--color-text-secondary); transition: color var(--transition-fast); } .footer-links a:hover { color: var(--color-saffron); } .footer-note { font-size: var(--font-size-sm); color: var(--color-text-muted); text-align: center; max-width: 600px; margin: 0 auto; line-height: 1.5; } /* -------------------------------------------------------------------------- 8. CARDS -------------------------------------------------------------------------- */ .card { background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--border-radius-md); box-shadow: var(--shadow-sm); padding: var(--space-lg); transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-slow), border-color var(--transition-slow); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .card-badge { display: inline-block; font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px var(--space-sm); border-radius: var(--border-radius-pill); background-color: var(--color-saffron-light); color: var(--color-saffron-hover); margin-bottom: var(--space-sm); } .card-badge--books { background-color: var(--color-saffron-light); color: #B36B1F; } .card-badge--audio { background-color: var(--color-gold-light); color: #8B6914; } .card-badge--documents { background-color: var(--color-success-bg); color: var(--color-success); } .card-badge--tools { background-color: #E3F2FD; color: #1565C0; } .dark-mode .card-badge--tools { background-color: #1A2A3A; color: #64B5F6; } .card-title { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--space-sm); } .card-title a { color: var(--color-text); text-decoration: none; transition: color var(--transition-fast); } .card-title a:hover { color: var(--color-saffron); } .card-description { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-md); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; } .card-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-md); } .card-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: auto; } /* -------------------------------------------------------------------------- 9. HERO CARD (Homepage entry-point cards) -------------------------------------------------------------------------- */ .hero-card { background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); padding: var(--space-2xl) var(--space-xl); text-align: center; transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-slow), border-color var(--transition-slow); } .hero-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .hero-card-icon { font-size: 3rem; margin-bottom: var(--space-md); display: block; } .hero-card-title { font-size: var(--font-size-2xl); font-weight: 700; margin-bottom: var(--space-sm); } .hero-card-title a { color: var(--color-text); text-decoration: none; } .hero-card-title a:hover { color: var(--color-saffron); } .hero-card-description { font-size: var(--font-size-base); color: var(--color-text-secondary); max-width: 320px; margin: 0 auto; line-height: 1.5; } /* -------------------------------------------------------------------------- 10. BUTTONS -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-sm); font-weight: 600; border-radius: var(--border-radius-sm); background-color: var(--color-saffron); color: var(--color-text-on-saffron); text-decoration: none; transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); white-space: nowrap; } .btn:hover { background-color: var(--color-saffron-hover); color: var(--color-text-on-saffron); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn:active { transform: translateY(0); } .btn-outline { background-color: transparent; color: var(--color-saffron); border: 2px solid var(--color-saffron); } .btn-outline:hover { background-color: var(--color-saffron); color: var(--color-text-on-saffron); } .btn-sm { padding: var(--space-xs) var(--space-md); font-size: var(--font-size-xs); } .btn-burgundy { background-color: var(--color-burgundy); } .btn-burgundy:hover { background-color: var(--color-burgundy-light); } .btn-success { background-color: var(--color-success); } .btn-success:hover { background-color: #256B27; } /* -------------------------------------------------------------------------- 11. FORMAT BADGES -------------------------------------------------------------------------- */ .format-badge { display: inline-flex; align-items: center; gap: 3px; font-size: var(--font-size-xs); font-weight: 600; padding: 2px var(--space-sm); border-radius: var(--border-radius-pill); background-color: var(--color-bg-alt); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; } .format-badge--pdf { background-color: #FFEBEE; color: #C62828; } .format-badge--kindle { background-color: #FFF3E0; color: #E65100; } .format-badge--paperback { background-color: #E8F5E9; color: #2E7D32; } .format-badge--online { background-color: #E3F2FD; color: #1565C0; } .format-badge--audio { background-color: #F3E5F5; color: #7B1FA2; } .dark-mode .format-badge--pdf { background-color: #3A1B1B; color: #EF9A9A; } .dark-mode .format-badge--kindle { background-color: #3A2A1B; color: #FFCC80; } .dark-mode .format-badge--paperback { background-color: #1B3A1B; color: #A5D6A7; } .dark-mode .format-badge--online { background-color: #1B2A3A; color: #90CAF9; } .dark-mode .format-badge--audio { background-color: #2A1B3A; color: #CE93D8; } /* -------------------------------------------------------------------------- 12. STAT NUMBER (Impact stats) -------------------------------------------------------------------------- */ .stat-number { font-size: var(--font-size-4xl); font-weight: 800; color: var(--color-saffron); line-height: 1.1; margin-bottom: var(--space-xs); } .stat-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: 500; } /* -------------------------------------------------------------------------- 13. MYTH-FACT CARD (Debunking page) -------------------------------------------------------------------------- */ .myth-fact-card { background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--border-radius-md); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow var(--transition-base), background-color var(--transition-slow), border-color var(--transition-slow); } .myth-fact-card:hover { box-shadow: var(--shadow-md); } .myth-header { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg); cursor: pointer; user-select: none; transition: background-color var(--transition-fast); } .myth-header:hover { background-color: var(--color-bg-alt); } .myth-icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--color-error-bg); color: var(--color-error); font-weight: 700; font-size: var(--font-size-sm); } .myth-label { font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-error); margin-bottom: var(--space-xs); } .myth-text { font-size: var(--font-size-base); font-weight: 600; color: var(--color-text); line-height: 1.4; } .myth-toggle { flex-shrink: 0; margin-left: auto; font-size: var(--font-size-lg); color: var(--color-text-muted); transition: transform var(--transition-base); } .myth-fact-card.is-open .myth-toggle { transform: rotate(180deg); } .fact-body { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); } .myth-fact-card.is-open .fact-body { max-height: 1000px; } .fact-inner { padding: 0 var(--space-lg) var(--space-lg); border-top: 1px solid var(--color-card-border); padding-top: var(--space-lg); } .fact-label { font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-success); margin-bottom: var(--space-xs); } .fact-text { font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: 1.6; } .fact-source { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-sm); font-style: italic; } /* -------------------------------------------------------------------------- 14. FAQ ITEM (Q&A page) -------------------------------------------------------------------------- */ .faq-item { background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--border-radius-md); overflow: hidden; transition: background-color var(--transition-slow), border-color var(--transition-slow); } .faq-item + .faq-item { margin-top: var(--space-md); } .faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg); cursor: pointer; user-select: none; font-size: var(--font-size-base); font-weight: 600; color: var(--color-text); transition: background-color var(--transition-fast); } .faq-question:hover { background-color: var(--color-bg-alt); } .faq-toggle { flex-shrink: 0; font-size: var(--font-size-lg); color: var(--color-text-muted); transition: transform var(--transition-base); } .faq-item.is-open .faq-toggle { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); } .faq-item.is-open .faq-answer { max-height: 2000px; } .faq-answer-inner { padding: 0 var(--space-lg) var(--space-lg); font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: 1.6; } /* -------------------------------------------------------------------------- 15. LANGUAGE TOGGLE -------------------------------------------------------------------------- */ .lang-toggle { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-secondary); border: 1px solid var(--color-card-border); border-radius: var(--border-radius-sm); transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast); } .lang-toggle:hover { color: var(--color-saffron); border-color: var(--color-saffron); background-color: var(--color-saffron-light); } /* -------------------------------------------------------------------------- 16. ANIMATIONS -------------------------------------------------------------------------- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn var(--transition-base) forwards; } .fade-slide-up { animation: fadeSlideUp var(--transition-slow) forwards; } /* Stagger children with animation delay */ .stagger-children > * { opacity: 0; animation: fadeSlideUp var(--transition-slow) forwards; } .stagger-children > *:nth-child(1) { animation-delay: 0ms; } .stagger-children > *:nth-child(2) { animation-delay: 60ms; } .stagger-children > *:nth-child(3) { animation-delay: 120ms; } .stagger-children > *:nth-child(4) { animation-delay: 180ms; } .stagger-children > *:nth-child(5) { animation-delay: 240ms; } .stagger-children > *:nth-child(6) { animation-delay: 300ms; } .stagger-children > *:nth-child(7) { animation-delay: 360ms; } .stagger-children > *:nth-child(8) { animation-delay: 420ms; } .stagger-children > *:nth-child(9) { animation-delay: 480ms; } .stagger-children > *:nth-child(10) { animation-delay: 540ms; } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* -------------------------------------------------------------------------- 17. RESPONSIVE BREAKPOINTS -------------------------------------------------------------------------- */ /* ---- Tablet: 768px+ ---- */ @media (min-width: 768px) { :root { --header-height: 72px; } h1 { font-size: var(--font-size-4xl); } h2 { font-size: var(--font-size-3xl); } .hamburger { display: none; } .nav-desktop { display: flex; } .grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } /* ---- Desktop: 1024px+ ---- */ @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } } /* ---- Mobile adjustments: < 768px ---- */ @media (max-width: 767px) { h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } .section-title { font-size: var(--font-size-2xl); } .grid { grid-template-columns: 1fr; } .hero-card { padding: var(--space-xl) var(--space-lg); } .stat-number { font-size: var(--font-size-3xl); } .site-brand-text { max-width: 200px; overflow: hidden; text-overflow: ellipsis; } } /* -------------------------------------------------------------------------- 18. SKIP LINK (Accessibility) -------------------------------------------------------------------------- */ .skip-link { position: absolute; top: -100%; left: var(--space-md); padding: var(--space-sm) var(--space-md); background-color: var(--color-saffron); color: var(--color-text-on-saffron); font-weight: 600; border-radius: var(--border-radius-sm); z-index: 200; transition: top var(--transition-fast); } .skip-link:focus { top: var(--space-md); } /* -------------------------------------------------------------------------- 19. UTILITY CLASSES -------------------------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mt-2xl { margin-top: var(--space-2xl); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } .mb-2xl { margin-bottom: var(--space-2xl); } /* -------------------------------------------------------------------------- 20. HERO SECTION (Homepage) -------------------------------------------------------------------------- */ .hero-section { text-align: center; padding: var(--space-3xl) 0 var(--space-xl); } .hero-section h1 { color: var(--color-text); max-width: 800px; margin: 0 auto var(--space-md); } .hero-section .subtitle { font-size: var(--font-size-lg); color: var(--color-text-secondary); max-width: 640px; margin: 0 auto var(--space-xl); line-height: 1.6; } /* -------------------------------------------------------------------------- 21. STATS GRID (Homepage impact stats) -------------------------------------------------------------------------- */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); text-align: center; padding: var(--space-xl) 0; } .stat-suffix { font-size: 0.6em; font-weight: 700; opacity: 0.8; } @media (max-width: 767px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } /* -------------------------------------------------------------------------- 22. SOLUTION BANNER (Homepage) -------------------------------------------------------------------------- */ .solution-banner { background: linear-gradient(135deg, var(--color-saffron), var(--color-gold)); color: #FFFFFF; padding: var(--space-3xl) 0; margin: var(--space-2xl) 0; } .solution-banner .container { max-width: 800px; } .solution-banner-title { font-size: var(--font-size-xl); text-align: center; margin-bottom: var(--space-xl); letter-spacing: 0.02em; color: #FFFFFF; } .solution-banner-points { list-style: none; counter-reset: solution; } .solution-banner-points li { counter-increment: solution; padding: var(--space-md) 0; font-size: var(--font-size-lg); line-height: 1.5; border-bottom: 1px solid rgba(255,255,255,0.2); } .solution-banner-points li::before { content: counter(solution) ". "; font-weight: 700; } .solution-banner-points li:last-child { border-bottom: none; } .solution-banner-conclusion { text-align: center; font-size: var(--font-size-2xl); font-weight: 700; font-style: italic; margin-top: var(--space-xl); color: #FFFFFF; } /* -------------------------------------------------------------------------- 23. HERO CARDS GRID (Homepage entry-point cards — clickable wrappers) -------------------------------------------------------------------------- */ a.hero-card { display: block; text-decoration: none; color: inherit; } a.hero-card:hover { color: inherit; } a.hero-card .hero-card-title { color: var(--color-text); transition: color var(--transition-fast); } a.hero-card:hover .hero-card-title { color: var(--color-saffron); } /* -------------------------------------------------------------------------- 24. FEATURED CARDS — flex column for consistent card-actions alignment -------------------------------------------------------------------------- */ #featured-grid .card { display: flex; flex-direction: column; } #featured-grid .card-actions { margin-top: auto; padding-top: var(--space-sm); } /* -------------------------------------------------------------------------- 25. CATEGORY PAGE CARDS — flex column for consistent layout -------------------------------------------------------------------------- */ #books-grid .card, #audio-grid .card, #docs-grid .card, #tools-grid .card, #community-grid .card { display: flex; flex-direction: column; } #books-grid .card-actions, #audio-grid .card-actions, #docs-grid .card-actions, #tools-grid .card-actions, #community-grid .card-actions { margin-top: auto; padding-top: var(--space-sm); } /* -------------------------------------------------------------------------- 26. CARD BADGE COLOR VARIANTS (mapped from data.js category colors) -------------------------------------------------------------------------- */ .card-badge--saffron { background-color: var(--color-saffron-light); color: var(--color-saffron-hover); } .card-badge--burgundy { background-color: #FFEBEE; color: var(--color-burgundy); } .card-badge--gold { background-color: var(--color-gold-light); color: #8B6914; } .card-badge--blue { background-color: #E3F2FD; color: #1565C0; } .card-badge--purple { background-color: #F3E5F5; color: #7B1FA2; } .card-badge--green { background-color: var(--color-success-bg); color: var(--color-success); } .card-badge--brown { background-color: #EFEBE9; color: #5D4037; } .dark-mode .card-badge--saffron { background-color: var(--color-saffron-light); color: var(--color-saffron); } .dark-mode .card-badge--burgundy { background-color: #3A1B1B; color: var(--color-burgundy); } .dark-mode .card-badge--gold { background-color: var(--color-gold-light); color: var(--color-gold); } .dark-mode .card-badge--blue { background-color: #1A2A3A; color: #64B5F6; } .dark-mode .card-badge--purple { background-color: #2A1B3A; color: #CE93D8; } .dark-mode .card-badge--green { background-color: var(--color-success-bg); color: #81C784; } .dark-mode .card-badge--brown { background-color: #2E1F16; color: #BCAAA4; } /* -------------------------------------------------------------------------- 27. CARD FORMATS (used on category pages) -------------------------------------------------------------------------- */ .card-formats { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); } /* -------------------------------------------------------------------------- 28. CARD "COMING SOON" NOTICE (for assets without URLs) -------------------------------------------------------------------------- */ .card-coming-soon { font-size: var(--font-size-sm); font-style: italic; color: var(--color-text-muted); padding: var(--space-xs) 0; } /* -------------------------------------------------------------------------- 29. FILTER TABS (Category page filtering) -------------------------------------------------------------------------- */ .filter-tabs { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); justify-content: center; } .filter-tab { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); font-weight: 500; border: 1px solid var(--color-card-border); border-radius: var(--border-radius-pill); background-color: var(--color-card-bg); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); } .filter-tab:hover { border-color: var(--color-saffron); color: var(--color-saffron); } .filter-tab.active { background-color: var(--color-saffron); color: white; border-color: var(--color-saffron); } /* -------------------------------------------------------------------------- 30. PAGE HEADER (Category pages) -------------------------------------------------------------------------- */ .page-header { text-align: center; padding: var(--space-2xl) 0 var(--space-xl); } .page-header h1 { margin-bottom: var(--space-sm); } .page-header p { font-size: var(--font-size-lg); color: var(--color-text-secondary); max-width: 640px; margin: 0 auto; } /* -------------------------------------------------------------------------- 31. HOW TO HELP SECTION (Community page) -------------------------------------------------------------------------- */ .help-section { background-color: var(--color-bg-alt); border-radius: var(--border-radius-md); padding: var(--space-xl); margin-top: var(--space-2xl); } .help-section h2 { margin-bottom: var(--space-md); } .help-section ul { list-style: disc; padding-left: var(--space-xl); } .help-section li { padding: var(--space-sm) 0; color: var(--color-text-secondary); } /* -------------------------------------------------------------------------- 32. DEBUNKING PAGE — Profile section -------------------------------------------------------------------------- */ .profile-intro { font-size: var(--font-size-lg); color: var(--color-text-secondary); line-height: 1.7; max-width: 800px; margin: 0 auto var(--space-xl); text-align: center; } .profile-image { display: block; max-width: 800px; width: 100%; margin: 0 auto var(--space-2xl); border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); } .profile-summary { background-color: var(--color-bg-alt); border-left: 4px solid var(--color-saffron); padding: var(--space-xl); border-radius: var(--border-radius-sm); margin-top: var(--space-xl); font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: 1.7; } /* -------------------------------------------------------------------------- 33. DEBUNKING PAGE — Video evidence cards -------------------------------------------------------------------------- */ .video-card { display: flex; flex-direction: column; } .video-quotes { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); margin-bottom: var(--space-md); } .video-quote-link { display: block; padding: var(--space-sm) var(--space-md); background-color: var(--color-bg-alt); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm); color: var(--color-text-secondary); transition: background-color var(--transition-fast), color var(--transition-fast); line-height: 1.4; } .video-quote-link:hover { background-color: var(--color-saffron-light); color: var(--color-saffron); } /* -------------------------------------------------------------------------- 34. DEBUNKING PAGE — Myths and Profile container spacing -------------------------------------------------------------------------- */ #myths-container .myth-fact-card + .myth-fact-card { margin-top: var(--space-md); } #profile-container .myth-fact-card + .myth-fact-card { margin-top: var(--space-md); } /* -------------------------------------------------------------------------- 35. CHATBOT (Q&A page) -------------------------------------------------------------------------- */ .chatbot-placeholder, .chatbot-live { max-width: 700px; margin: 0 auto; } .chatbot-window { background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--border-radius-md); overflow: hidden; box-shadow: var(--shadow-md); } .chatbot-header { background: linear-gradient(135deg, var(--color-saffron), var(--color-gold)); color: white; padding: var(--space-md) var(--space-lg); font-weight: 600; display: flex; align-items: center; gap: var(--space-sm); } .chatbot-icon { font-size: 1.25rem; } .chatbot-messages { padding: var(--space-lg); min-height: 120px; max-height: 500px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-md); } .chatbot-message { padding: var(--space-md); border-radius: var(--border-radius-sm); max-width: 85%; animation: chatFadeIn 0.3s ease; } @keyframes chatFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .chatbot-message.bot { background-color: var(--color-bg-alt); color: var(--color-text-secondary); align-self: flex-start; } .chatbot-message.user { background-color: var(--color-saffron); color: white; align-self: flex-end; border-bottom-right-radius: 4px; } .chatbot-message p { margin: 0; line-height: 1.6; } .chatbot-answer { line-height: 1.7; font-size: var(--font-size-sm); } .chatbot-answer a { color: var(--color-saffron); word-break: break-all; } .chatbot-answer code { background: var(--color-card-border); padding: 1px 4px; border-radius: 3px; font-size: 0.9em; } /* Sources */ .chatbot-sources { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-card-border); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); } .chatbot-sources-label { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 600; } .chatbot-source-tag { font-size: var(--font-size-xs); background: var(--color-card-border); color: var(--color-text-secondary); padding: 2px 8px; border-radius: var(--border-radius-pill); } /* Follow-up questions */ .chatbot-followups { margin-top: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); } .chatbot-followup-btn { background: none; border: 1px solid var(--color-saffron); color: var(--color-saffron); padding: var(--space-xs) var(--space-sm); border-radius: var(--border-radius-pill); font-size: var(--font-size-xs); cursor: pointer; text-align: left; transition: background-color var(--transition-fast), color var(--transition-fast); } .chatbot-followup-btn:hover { background-color: var(--color-saffron); color: white; } /* Typing indicator */ .chatbot-typing { display: flex; gap: 4px; padding: var(--space-xs) 0; } .chatbot-typing span { width: 8px; height: 8px; background: var(--color-text-muted); border-radius: 50%; animation: typingBounce 1.4s infinite ease-in-out; } .chatbot-typing span:nth-child(2) { animation-delay: 0.2s; } .chatbot-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes typingBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } /* Disclaimer */ .chatbot-disclaimer { text-align: center; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-md); } .chatbot-input-area { display: flex; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-card-border); } .chatbot-input { flex: 1; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-card-border); border-radius: var(--border-radius-pill); background-color: var(--color-bg); color: var(--color-text); font-size: var(--font-size-sm); } .chatbot-input:focus { outline: none; border-color: var(--color-saffron); box-shadow: 0 0 0 2px rgba(255, 153, 51, 0.2); } .chatbot-input:disabled, .chatbot-input-area .btn:disabled { opacity: 0.5; cursor: not-allowed; } .chatbot-send { white-space: nowrap; } /* Phase roadmap */ .chatbot-phases { margin-top: var(--space-xl); } .chatbot-phases h3 { text-align: center; margin-bottom: var(--space-lg); } .phase-list { display: flex; flex-direction: column; gap: var(--space-md); } .phase-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm) var(--space-md); padding: var(--space-md) var(--space-lg); background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--border-radius-sm); opacity: 0.6; } .phase-item.phase-current { opacity: 1; border-color: var(--color-saffron); border-left: 4px solid var(--color-saffron); } .phase-badge { font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; color: var(--color-saffron); white-space: nowrap; } .phase-label { font-weight: 600; color: var(--color-text); } .phase-desc { width: 100%; font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; } /* -------------------------------------------------------------------------- 36. BOOK REVIEWS (Books page) -------------------------------------------------------------------------- */ #reviews-container { display: flex; flex-direction: column; gap: var(--space-xl); } .book-review { background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--border-radius-md); box-shadow: var(--shadow-md); overflow: hidden; } .book-review-header { background: linear-gradient(135deg, var(--color-saffron-light), var(--color-gold-light)); padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--color-card-border); } .dark-mode .book-review-header { background: linear-gradient(135deg, rgba(255,153,51,0.15), rgba(218,165,32,0.15)); } .book-review-title { font-size: var(--font-size-xl); color: var(--color-burgundy); margin: 0 0 var(--space-xs); line-height: 1.3; } .dark-mode .book-review-title { color: var(--color-saffron); } .book-review-author { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-sm); font-style: italic; } .book-review-tagline { font-size: var(--font-size-base); color: var(--color-text); margin: 0 0 var(--space-sm); font-weight: 500; } .book-review-rating { display: flex; gap: 2px; } .book-review-rating .star { font-size: 1.25rem; color: var(--color-text-muted); } .book-review-rating .star.filled { color: var(--color-gold); } .book-review-body { padding: var(--space-lg) var(--space-xl); } .book-review-section { margin-bottom: var(--space-lg); } .book-review-section:last-child { margin-bottom: 0; } .book-review-section h4 { font-size: var(--font-size-base); color: var(--color-saffron); margin: 0 0 var(--space-xs); font-weight: 600; } .book-review-section p { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.7; margin: 0; } .book-review-actions { padding: var(--space-md) var(--space-xl) var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-sm); border-top: 1px solid var(--color-card-border); } /* -------------------------------------------------------------------------- SEARCH RESULTS DROPDOWN -------------------------------------------------------------------------- */ .search-overlay .container { position: relative; } .search-results { position: absolute; top: 100%; left: 0; right: 0; max-height: 400px; overflow-y: auto; background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); border-top: none; border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); box-shadow: var(--shadow-lg); z-index: 101; display: none; } .search-results.has-results { display: block; } .search-result-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); padding: var(--space-md) var(--space-lg); text-decoration: none; color: var(--color-text); border-bottom: 1px solid var(--color-card-border); transition: background-color var(--transition-fast); cursor: pointer; } .search-result-item:hover, .search-result-item.is-focused { background-color: var(--color-saffron-light); } .search-result-item:last-child { border-bottom: none; } .search-result-type { font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; color: var(--color-saffron); white-space: nowrap; } .search-result-title { font-weight: 600; color: var(--color-text); } .search-result-desc { width: 100%; font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-empty { padding: var(--space-lg); text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); } /* -------------------------------------------------------------------------- 36. SPANISH PAGE — Resource cards -------------------------------------------------------------------------- */ .es-resource-card { display: flex; flex-direction: column; } .es-resource-card .card-actions { margin-top: auto; padding-top: var(--space-sm); } .es-resource-icon { font-size: 2rem; margin-bottom: var(--space-sm); }