/* * Saral Aastha — shared stylesheet * Extracted from: * jyotirlinga/kedarnath.html * stories/panchatantra/kauwa-ghada.html * * Mobile-first. Base body is 18px. Safe at 320px viewport width. * Fonts are loaded via in each page (see templates/*.tmpl). * * Page-type palettes are toggled by adding one of: * or */ :root { /* Saffron family */ --saffron: #C17A2F; --saffron-deep: #8B4513; --saffron-pale: #FDF6EC; /* brand cream */ --saffron-light: #FFF0D9; /* Earth family */ --earth: #7B4F2E; --earth-deep: #4A2D12; /* brand deep brown */ --earth-pale: #FDF8F2; --earth-light: #FFF3E6; /* Leaf */ --leaf: #4A7C59; --leaf-pale: #EDF5EF; --leaf-border: #A8D4B5; /* Himalaya */ --himalaya: #7B9BAF; --himalaya-pale: #E8F0F5; --himalaya-border:#BDD0DB; --himalaya-text: #4A6B7A; /* Neutrals */ --snow: #F7F3EE; --stone: #6B5744; --stone-alt: #8C7B6B; --stone-light: #D4B896; --stone-light-2: #D9C9B8; --divider: #E8D8C4; /* Ink */ --ink: #2C1A0E; --ink-soft: #5C3B1A; --ink-muted: #9B6E3E; --ink-muted-2: #9B7B5A; /* On-dark text */ --on-dark: #FDF6EC; --on-dark-soft: #F5DEB5; /* Per-page resolved tokens (defaults = jyotirlinga) */ --page-bg: var(--snow); --page-dark: var(--saffron-deep); --page-accent: var(--saffron); --page-body-size: 19px; --page-body-lh: 1.85; --page-h1-size: 34px; --page-muted: var(--ink-muted); --page-stone-light: var(--stone-light); --note-bg: var(--himalaya-pale); --note-border: var(--himalaya-border); --note-text: var(--himalaya-text); --tag-bg: var(--himalaya-pale); --tag-color: var(--himalaya); --tag-border: var(--himalaya-border); } body.page-story { --page-bg: var(--earth-pale); --page-dark: var(--earth-deep); --page-accent: var(--saffron); --page-body-size: 20px; --page-body-lh: 1.9; --page-h1-size: 32px; --page-muted: var(--ink-muted-2); --page-stone-light: var(--stone-light-2); --note-bg: var(--leaf-pale); --note-border: var(--leaf-border); --note-text: var(--leaf); --tag-bg: var(--leaf-pale); --tag-color: var(--leaf); --tag-border: var(--leaf-border); } /* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--page-bg); color: var(--ink); font-family: 'Noto Sans Devanagari', sans-serif; font-size: 18px; line-height: 1.8; -webkit-text-size-adjust: 100%; } a { color: inherit; } /* NAV */ nav { background: var(--page-dark); padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; } nav .brand { color: var(--on-dark); font-size: 18px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; margin-right: -4px; } nav .brand .nav-logo { height: 32px; width: auto; display: block; filter: brightness(0) invert(1); } body.page-home nav .brand .nav-logo { filter: none; } nav .back { color: var(--on-dark-soft); font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; margin: -10px -8px; } /* HERO (shared) */ .hero { background: var(--page-dark); padding: 40px 20px 32px; text-align: center; position: relative; overflow: hidden; } body.page-story .hero { padding: 36px 20px 28px; text-align: left; } .hero::before { content: 'ॐ'; position: absolute; top: -10px; right: 10px; font-size: 120px; color: rgba(255,255,255,0.06); font-family: 'Tiro Devanagari Hindi', serif; pointer-events: none; } body.page-story .hero::before { content: '📖'; top: 20px; right: 16px; font-size: 80px; color: initial; opacity: 0.12; font-family: inherit; } .hero h1 { font-family: 'Tiro Devanagari Hindi', serif; font-size: var(--page-h1-size); color: var(--on-dark); line-height: 1.3; margin-bottom: 6px; } body.page-story .hero h1 { margin-bottom: 8px; } .hero .number-badge, .hero .category-pill { display: inline-block; background: rgba(255,255,255,0.15); color: var(--on-dark-soft); font-size: 12px; padding: 4px 14px; border-radius: 99px; margin-bottom: 14px; letter-spacing: 0.05em; } .hero .category-pill { background: rgba(255,255,255,0.12); border: 0.5px solid rgba(255,255,255,0.2); display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0; } .hero .subtitle { color: var(--on-dark-soft); font-size: 15px; margin-bottom: 20px; } .hero .location-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.12); border: 0.5px solid rgba(255,255,255,0.25); color: var(--on-dark); font-size: 14px; padding: 10px 18px; border-radius: 99px; text-decoration: none; min-height: 44px; transition: background-color 0.15s ease; } a.hero .location-pill, a.location-pill { text-decoration: none; color: var(--on-dark); } a.location-pill:active { background-color: rgba(255,255,255,0.22); } .hero .meta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .hero .meta-pill { font-size: 12px; padding: 4px 12px; border-radius: 99px; border: 0.5px solid rgba(255,255,255,0.25); color: var(--on-dark-soft); } /* INFO STRIP (jyotirlinga) */ .info-strip { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--saffron); border-bottom: 2px solid var(--saffron-deep); } .info-item { padding: 12px 8px; text-align: center; border-right: 0.5px solid rgba(255,255,255,0.2); } .info-item:last-child { border-right: none; } .info-item .i-label { font-size: 10px; color: var(--on-dark-soft); margin-bottom: 3px; letter-spacing: 0.04em; } .info-item .i-val { font-size: 14px; color: var(--on-dark); font-weight: 500; } /* CONTENT */ .content { max-width: 640px; margin: 0 auto; padding: 0 20px 60px; } body.page-story .content { padding: 0 20px 80px; } /* SOURCE TAG */ .source-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--tag-bg); color: var(--tag-color); font-size: 12px; padding: 5px 14px; border-radius: 99px; margin: 24px 0 0; border: 0.5px solid var(--tag-border); } /* SECTION */ .section { margin-top: 28px; } .section-label { font-size: 11px; color: var(--saffron); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .section-label::after { content: ''; flex: 1; height: 0.5px; background: var(--page-stone-light); } .section p { font-family: 'Tiro Devanagari Hindi', serif; color: var(--ink); font-size: var(--page-body-size); line-height: var(--page-body-lh); margin-bottom: 14px; } /* HIGHLIGHT BLOCK */ .highlight { background: var(--saffron-light); border-left: 3px solid var(--saffron); border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 20px 0; } .highlight p { font-size: 17px; color: var(--ink-soft); font-style: italic; } /* FACT GRID */ .fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .fact-card { background: #fff; border: 0.5px solid var(--stone-light); border-radius: 10px; padding: 12px 14px; } .fact-card .fc-label { font-size: 11px; color: var(--ink-muted); margin-bottom: 4px; } .fact-card .fc-val { font-size: 15px; color: var(--ink); font-weight: 500; } /* DARSHAN LIST */ .darshan-list { list-style: none; margin-top: 10px; } .darshan-list li { padding: 10px 0; border-bottom: 0.5px solid var(--divider); font-size: 17px; color: var(--ink); display: flex; gap: 10px; align-items: flex-start; font-family: 'Tiro Devanagari Hindi', serif; } .darshan-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--saffron); margin-top: 8px; flex-shrink: 0; } .darshan-list li:last-child { border-bottom: none; } /* HOW TO REACH */ .reach-card { background: #fff; border: 0.5px solid var(--stone-light); border-radius: 12px; overflow: hidden; margin-top: 10px; } .reach-row { display: flex; gap: 14px; padding: 12px 16px; border-bottom: 0.5px solid var(--divider); align-items: flex-start; } .reach-row:last-child { border-bottom: none; } .reach-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--saffron-light); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .reach-info .r-label { font-size: 11px; color: var(--ink-muted); margin-bottom: 3px; } .reach-info .r-val { font-size: 15px; color: var(--ink); line-height: 1.5; } /* STORY BODY */ .story-body { margin-top: 28px; } .story-body p { font-family: 'Tiro Devanagari Hindi', serif; font-size: 20px; color: var(--ink); line-height: 1.9; margin-bottom: 20px; } /* SCENE BREAK */ .scene-break { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--stone-light-2); font-size: 18px; justify-content: center; } .scene-break::before, .scene-break::after { content: ''; flex: 1; height: 0.5px; background: var(--stone-light-2); } /* DIALOGUE */ .dialogue { background: var(--earth-light); border-left: 3px solid var(--saffron); border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 20px 0; } .dialogue p { font-size: 18px; color: var(--ink-soft); font-style: italic; margin-bottom: 0; } /* MORAL BOX */ .moral-section { margin-top: 36px; background: var(--leaf-pale); border: 1px solid var(--leaf-border); border-radius: 14px; overflow: hidden; } .moral-header { background: var(--leaf); padding: 12px 20px; display: flex; align-items: center; gap: 10px; } .moral-header .m-icon { font-size: 20px; } .moral-header .m-title { color: #fff; font-size: 15px; font-weight: 500; } .moral-body { padding: 18px 20px; } .moral-body .moral-hi { font-family: 'Tiro Devanagari Hindi', serif; font-size: 20px; color: var(--earth-deep); font-weight: 500; margin-bottom: 10px; line-height: 1.5; } .moral-body .moral-exp { font-size: 16px; color: var(--ink-soft); line-height: 1.7; } /* PROGRESS BAR */ .progress-bar { height: 3px; background: var(--stone-light-2); border-radius: 2px; margin-top: 28px; overflow: hidden; } .progress-fill { height: 100%; width: 0%; background: var(--saffron); border-radius: 2px; transition: width 120ms linear; } .progress-label { font-size: 12px; color: var(--ink-muted-2); margin-top: 6px; text-align: right; } /* RELATED */ .related { margin-top: 36px; } .related-title { font-size: 13px; font-weight: 600; color: var(--saffron); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .related-title::after { content: ''; flex: 1; height: 0.5px; background: var(--stone-light-2); } .related-grid { display: flex; flex-direction: column; gap: 8px; } .related-card { background: #fff; border: 0.5px solid var(--stone-light-2); border-radius: 10px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; text-decoration: none; } .related-card .rc-info .rc-name { font-size: 16px; color: var(--ink); font-weight: 500; } .related-card .rc-info .rc-sub { font-size: 13px; color: var(--ink-muted-2); margin-top: 2px; } .related-card .rc-arrow { color: var(--stone-light-2); font-size: 18px; } /* FOOTER NOTE */ .footer-note { margin-top: 40px; padding: 16px 18px; background: var(--note-bg); border-radius: 10px; border: 0.5px solid var(--note-border); font-size: 13px; color: var(--note-text); line-height: 1.6; text-align: center; } body.page-story .footer-note { margin-top: 36px; padding: 14px 18px; } /* SHLOKA PAGE */ .shloka-text { font-family: 'Tiro Devanagari Hindi', serif; font-size: 22px; line-height: 2; text-align: center; color: var(--ink); padding: 24px 20px; margin: 24px 0 28px; background: linear-gradient(135deg, #fdf6e3 0%, #fef9ee 100%); border-left: 4px solid var(--saffron, #c45a1a); border-radius: 0 12px 12px 0; } .shloka-line { margin: 4px 0; } @media (min-width: 480px) { .shloka-text { font-size: 24px; padding: 28px 32px; } } .padaarth-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; } .word-pair { background: #fff; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line, #d4c8a8); } .wp-word { font-family: 'Tiro Devanagari Hindi', serif; font-size: 18px; font-weight: 600; color: var(--saffron, #c45a1a); margin-bottom: 4px; } .wp-meaning { font-size: 14px; color: var(--ink-muted, #6b5e4b); line-height: 1.5; } /* VERSE BLOCKS (stotra chapter pages — multiple verses per page) */ .verse-block { margin-bottom: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--line, #d4c8a8); } .verse-block:last-child { border-bottom: none; } .verse-num { font-family: 'Noto Sans Devanagari', sans-serif; font-size: 13px; font-weight: 600; color: var(--saffron, #c45a1a); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; } .verse-vyakhya { font-family: 'Tiro Devanagari Hindi', serif; font-size: 16px; color: var(--ink-muted, #6b5e4b); line-height: 1.7; margin-top: 12px; padding: 12px 16px; background: var(--saffron-light, #fdf6ec); border-radius: 8px; } /* BOTTOM NAV */ .bottom-nav { position: sticky; bottom: 0; background: var(--page-dark); display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; } .bnav-btn { color: var(--on-dark-soft); font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: 'Noto Sans Devanagari', sans-serif; min-height: 44px; min-width: 44px; padding: 0 10px; transition: background-color 0.15s ease; } .bnav-btn:active { background-color: rgba(255,255,255,0.08); } .bnav-center { color: var(--on-dark); font-size: 13px; } /* Reduced motion: disable the only two motion-bearing rules */ @media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } .bnav-btn { transition: none; } .this-week .tw-row { transition: none; } .calendar-row.is-clickable { transition: none; } } /* THIS WEEK widget (home page, populated by main.js) */ .this-week { margin: 24px 0 8px; background: #fff; border: 0.5px solid var(--stone-light); border-radius: 12px; padding: 14px 16px; } .this-week:empty { display: none; } .this-week .tw-title { font-size: 11px; color: var(--saffron); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; } .this-week .tw-grid { display: flex; flex-direction: column; gap: 6px; } .this-week .tw-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 4px; text-decoration: none; color: var(--ink); border-radius: 8px; transition: background-color 0.15s ease; } .this-week .tw-row:active { background-color: var(--saffron-pale); } .this-week .tw-row-static { cursor: default; } .this-week .tw-date { font-size: 13px; color: var(--saffron); font-weight: 500; min-width: 88px; flex-shrink: 0; } .this-week .tw-name { font-family: 'Tiro Devanagari Hindi', serif; font-size: 17px; flex: 1; color: var(--ink); } .this-week .tw-arrow { color: var(--stone-light); font-size: 18px; } .this-week .tw-stale { font-size: 13px; color: var(--ink-muted); text-align: center; padding: 8px; } /* CALENDAR LISTING ROW (calendar/2026.html) */ .calendar-list { display: flex; flex-direction: column; gap: 0; margin-top: 8px; } .calendar-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 4px; border-bottom: 0.5px solid var(--stone-light); text-decoration: none; color: var(--ink); min-height: 44px; } .calendar-row:last-child { border-bottom: none; } .calendar-row.is-clickable { transition: background-color 0.15s ease; border-radius: 6px; margin: 0 -6px; padding: 12px 6px; } .calendar-row.is-clickable:active { background-color: var(--saffron-pale); } .calendar-row .cr-date { display: flex; flex-direction: column; gap: 2px; min-width: 88px; flex-shrink: 0; font-size: 13px; color: var(--saffron); font-weight: 500; } .calendar-row .cr-day { font-size: 11px; color: var(--ink-muted); font-weight: 400; } .calendar-row .cr-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .calendar-row .cr-name { font-family: 'Tiro Devanagari Hindi', serif; font-size: 17px; color: var(--ink); line-height: 1.4; } .calendar-row .cr-brief { font-size: 13px; color: var(--ink-muted); line-height: 1.5; } .calendar-row .cr-arrow { color: var(--stone-light); font-size: 18px; align-self: center; flex-shrink: 0; } /* LISTING (index of many pages) */ .listing-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px; } .listing-card { background: #fff; border: 0.5px solid var(--stone-light); border-radius: 10px; padding: 16px 18px; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 14px; min-height: 64px; transition: background-color 0.15s ease; } .listing-card:active { background-color: var(--saffron-pale); } .listing-card .lc-num { font-family: 'Tiro Devanagari Hindi', serif; font-size: 22px; color: var(--saffron); min-width: 32px; text-align: center; line-height: 1; } .listing-card .lc-main { flex: 1; } .listing-card .lc-title { font-family: 'Tiro Devanagari Hindi', serif; font-size: 19px; font-weight: 500; margin-bottom: 3px; color: var(--ink); } .listing-card .lc-sub { font-size: 13px; color: var(--ink-muted); } .listing-card .lc-arrow { color: var(--stone-light); font-size: 20px; } /* Placeholder state — entry exists in the list but detail page not yet written */ .listing-card.is-placeholder { background: transparent; border-style: dashed; color: var(--ink-muted); cursor: default; pointer-events: none; } .listing-card.is-placeholder .lc-title, .listing-card.is-placeholder .lc-num { color: var(--ink-muted); } .listing-card.is-placeholder .lc-arrow { display: none; } .listing-card.is-placeholder .lc-soon { font-size: 11px; background: var(--divider); color: var(--ink-muted); padding: 3px 10px; border-radius: 99px; letter-spacing: 0.04em; } /* ===== LANDING PAGE ===== */ body.page-home { --page-bg: var(--saffron-pale); --page-dark: var(--earth-deep); --page-accent: var(--saffron); --page-body-size: 18px; --page-body-lh: 1.8; --page-h1-size: 34px; --page-muted: var(--ink-muted); --page-stone-light: var(--stone-light); --note-bg: var(--saffron-light); --note-border: var(--stone-light); --note-text: var(--ink-soft); --tag-bg: var(--himalaya-pale); --tag-color: var(--himalaya); --tag-border: var(--himalaya-border); } body.page-home nav { background: #f5efe6; } body.page-home nav .brand { color: var(--earth-deep); } body.page-home nav .back { color: var(--ink-muted); } .home-hero { background: #f5efe6; padding: 32px 20px 36px; text-align: center; position: relative; overflow: hidden; } .home-hero .logo-img { display: block; margin: 0 auto 16px; width: min(280px, 70vw); height: auto; } .home-hero .welcome { font-size: 13px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; } .home-hero .tagline { font-family: 'Tiro Devanagari Hindi', serif; font-size: 17px; color: var(--earth-deep); line-height: 1.6; max-width: 32ch; margin: 0 auto; opacity: 0.85; } /* Daily shloka card */ .daily-shloka-card { display: block; text-decoration: none; background: linear-gradient(135deg, #4A2D12 0%, #6B3E1A 100%); border-radius: 16px; padding: 28px 24px; margin-bottom: 24px; text-align: center; transition: transform 0.12s ease; } .daily-shloka-card:active { transform: scale(0.985); } .ds-label { font-size: 12px; color: #F5DEB5; letter-spacing: 0.15em; margin-bottom: 14px; text-transform: uppercase; } .ds-text { font-family: 'Tiro Devanagari Hindi', serif; font-size: 21px; line-height: 1.7; color: #FDF6EC; margin-bottom: 14px; } .ds-ref { font-size: 14px; color: #F5DEB5; } /* Popular / direct-link cards */ .popular-section { margin: 28px 0 8px; } .popular-title { font-family: 'Tiro Devanagari Hindi', serif; font-size: 18px; color: var(--ink); margin-bottom: 12px; } .popular-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .popular-card { background: #fff; border: 0.5px solid var(--stone-light); border-radius: 12px; padding: 16px 14px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 6px; } .popular-card:active { background: var(--saffron-light); } .pc-icon { font-size: 20px; } .pc-title { font-family: 'Tiro Devanagari Hindi', serif; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); } .pc-sub { font-size: 12px; color: var(--ink-muted); } /* Secondary tiles (compact row) */ .secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; } .secondary-tile { background: #fff; border: 0.5px solid var(--stone-light); border-radius: 10px; padding: 14px 16px; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 10px; font-size: 15px; } .secondary-tile:active { background: var(--saffron-light); } .st-icon { font-size: 18px; flex-shrink: 0; } .st-label { font-family: 'Tiro Devanagari Hindi', serif; font-weight: 500; } /* Section divider label */ .section-divider { font-family: 'Tiro Devanagari Hindi', serif; font-size: 18px; color: var(--ink); margin: 32px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } /* Tile grid (4 main categories on home) */ .tile-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 28px; } .tile { background: #fff; border: 0.5px solid var(--stone-light); border-radius: 14px; padding: 20px 20px; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 16px; min-height: 96px; transition: background-color 0.15s ease; } .tile:active { background-color: var(--saffron-pale); } .tile .tile-icon { font-size: 36px; line-height: 1; min-width: 44px; text-align: center; flex-shrink: 0; } .tile .tile-main { flex: 1; min-width: 0; } .tile .tile-title { font-family: 'Tiro Devanagari Hindi', serif; font-size: 22px; font-weight: 500; color: var(--ink); margin-bottom: 4px; } .tile .tile-sub { font-size: 14px; color: var(--ink-muted); line-height: 1.5; margin-bottom: 6px; } .tile .tile-count { display: inline-block; font-size: 11px; background: var(--saffron-light); color: var(--saffron-deep); padding: 3px 10px; border-radius: 99px; letter-spacing: 0.04em; border: 0.5px solid var(--stone-light); } .tile .tile-arrow { font-size: 22px; color: var(--stone-light); flex-shrink: 0; } /* Recently added row — surfaces pages that actually exist */ .recent { margin-top: 36px; } .recent-title { font-size: 11px; color: var(--saffron); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .recent-title::after { content: ''; flex: 1; height: 0.5px; background: var(--stone-light); } .recent-grid { display: flex; flex-direction: column; gap: 8px; } .recent-card { background: #fff; border: 0.5px solid var(--stone-light); border-radius: 10px; padding: 12px 16px; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 12px; min-height: 56px; transition: background-color 0.15s ease; } .recent-card:active { background-color: var(--saffron-pale); } .recent-card .rec-tag { font-size: 10px; color: var(--saffron); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; margin-bottom: 3px; } .recent-card .rec-main { flex: 1; min-width: 0; } .recent-card .rec-title { font-family: 'Tiro Devanagari Hindi', serif; font-size: 17px; color: var(--ink); line-height: 1.35; } .recent-card .rec-arrow { color: var(--stone-light); font-size: 18px; } /* Small About link on home */ .home-about { margin-top: 40px; text-align: center; } .home-about a { font-size: 14px; color: var(--ink-muted); text-decoration: none; display: inline-block; padding: 12px 20px; min-height: 44px; } /* ===== ABOUT PAGE ===== */ .about-section { margin-top: 32px; } .about-section h2 { font-family: 'Tiro Devanagari Hindi', serif; font-size: 22px; color: var(--ink); margin-bottom: 10px; font-weight: 500; } .about-section p { font-family: 'Tiro Devanagari Hindi', serif; font-size: 18px; line-height: 1.8; color: var(--ink); margin-bottom: 12px; } /* ===== 404 PAGE ===== */ .notfound-hero { padding: 80px 20px 60px; text-align: center; background: var(--page-dark); color: var(--on-dark); position: relative; overflow: hidden; } .notfound-hero::before { content: '🙏'; position: absolute; top: 20px; right: 16px; font-size: 100px; opacity: 0.1; pointer-events: none; } .notfound-hero h1 { font-family: 'Tiro Devanagari Hindi', serif; font-size: 28px; line-height: 1.3; margin-bottom: 12px; color: var(--on-dark); } .notfound-hero p { font-size: 16px; color: var(--on-dark-soft); max-width: 22ch; margin: 0 auto; } .notfound-actions { padding: 32px 20px; display: flex; flex-direction: column; gap: 10px; max-width: 360px; margin: 0 auto; } .notfound-actions a { display: block; padding: 14px 18px; background: #fff; border: 0.5px solid var(--stone-light); border-radius: 10px; text-decoration: none; color: var(--ink); font-family: 'Tiro Devanagari Hindi', serif; font-size: 17px; text-align: center; min-height: 44px; transition: background-color 0.15s ease; } .notfound-actions a:active { background-color: var(--saffron-pale); } /* Mobile-first breakpoint — layouts fluid below 720, roomier above */ @media (min-width: 720px) { .hero { padding: 56px 24px 44px; } .hero h1 { font-size: 42px; } .content { padding: 0 24px 80px; } .listing-grid { grid-template-columns: 1fr 1fr; } .tile-grid { grid-template-columns: 1fr 1fr; } .home-hero .logo-img { width: min(360px, 50vw); } .home-hero .tagline { font-size: 18px; max-width: 40ch; } }