/* Shared theme + layout for Pravesha pages. Palette mirrors rajualluri.net (Astra theme). Per-page layout is scoped via a body class: -> sb/pravesha/index.html -> sb/pravesha/vyavaharika.html */ :root { --font-body: "Noto Sans", system-ui, sans-serif; --color-text: #222; --color-muted: #888; --color-soft: #555; --color-error: #a12; --color-accent: #6b7280; --color-accent-hover: #4b5563; --color-on-accent: #ffffff; --color-surface: #f3f4f6; --color-surface-text: #334155; --banner-image: url("ws_srikrishna_01.webp"); --banner-height: 220px; } /* ---------- Base ---------- */ body { font-family: var(--font-body); color: var(--color-text); line-height: 1.6; } /* ---------- Page banner ---------- */ .banner { display: block; height: var(--banner-height); background: var(--banner-image) center center / contain no-repeat; margin-bottom: 1.5rem; } /* ---------- Per-page layout ---------- */ body.page-home { margin: 2rem auto; max-width: 720px; padding: 0 1rem; } body.page-quiz { margin: 2rem; max-width: 640px; } .page-home h1 { font-size: 1.8rem; margin-bottom: .25rem; } .page-home h1 .latin { font-weight: normal; color: var(--color-soft); } .page-home h2 { font-size: 1.25rem; margin-top: 2rem; } .page-quiz h1 { font-size: 1.5rem; } /* ---------- Accent borders ---------- */ h2 { border-bottom: 2px solid var(--color-accent); padding-bottom: .25rem; } footer { border-top: 1px solid var(--color-accent); } fieldset { border: 1px solid var(--color-accent); border-radius: 8px; padding: 1rem 1.25rem; margin: 1rem 0; } .cat-all { border-bottom: 1px solid var(--color-accent); padding-bottom: .5rem; margin-bottom: .25rem; width: 100%; } /* ---------- Muted text ---------- */ .subtitle, .meta, .gender, .prompt-label, .answer-label, blockquote cite, footer, .answer-row .lang { color: var(--color-muted); } .subtitle { font-size: 1rem; margin-top: 0; } .meta { font-size: .85rem; margin-top: .75rem; } .gender { font-style: italic; font-size: .65em; } footer { margin-top: 3rem; font-size: .85rem; padding-top: 1rem; } .error { color: var(--color-error); } /* ---------- Sanskrit / bilingual blocks ---------- */ .sa { font-size: 1.15rem; } .lead { font-size: 1.1rem; } ul.objectives { list-style: none; padding-left: 0; } ul.objectives li { margin: 1rem 0; padding: .75rem 1rem; } ul.objectives .sa, p.bilingual .sa { display: block; } ul.objectives .en, p.bilingual .en { display: block; font-size: .95rem; margin-top: .25rem; color: var(--color-soft); } blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; } blockquote .sa { display: block; margin-bottom: .35rem; } blockquote cite { font-style: normal; font-size: .85rem; } /* ---------- Surface (objectives, blockquote, card) ---------- */ ul.objectives li, blockquote, .card { background: var(--color-surface); color: var(--color-surface-text); border-left: 4px solid var(--color-accent); border-radius: 4px; } /* ---------- Buttons / nav links ---------- */ nav.links { margin: 2rem 0; } nav.links a, button { border: 1px solid var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); border-radius: 6px; text-decoration: none; cursor: pointer; font: inherit; } nav.links a { display: inline-block; margin: .25rem .75rem .25rem 0; padding: .55rem 1.2rem; } button { padding: .55rem 1.4rem; margin-right: .75rem; } nav.links a:hover, button:not(:disabled):hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); } button:disabled { opacity: .45; cursor: not-allowed; } /* ---------- Quiz card + prompt/answer ---------- */ .card { border: 1px solid var(--color-accent); border-left-width: 1px; border-radius: 8px; padding: 1.25rem 1.5rem; margin-top: 1.25rem; min-height: 2rem; } .prompt-label, .answer-label { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; } .prompt-word { font-size: 2rem; margin: .35rem 0 0; } .answers { margin-top: 1.25rem; } .answers.hidden { display: none; } .answer-row { font-size: 1.3rem; margin: .6rem 0; display: flex; align-items: baseline; } .answer-row .lang { font-size: .85rem; flex: 0 0 7rem; } .answer-row .answer-words .word { margin: .1rem 0; } /* ---------- Quiz form bits ---------- */ legend { font-weight: 600; padding: 0 .4rem; } .choice { display: block; margin: .5rem 0; cursor: pointer; } .choice input { margin-right: .5rem; } .actions { margin: 1.25rem 0; } .cat-list { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; } .cat-list .choice { margin: .35rem 0; white-space: nowrap; }