/* Baytong website — shared styles. Kept deliberately simple/static so pages are easy to hand-edit. */ :root { color-scheme: light dark; --maxw: 820px; --green: #1B5E20; --green-light: #2E7D32; --ink: #1a1a1a; --muted: #6b7280; --bg: #ffffff; --line: #8884; --accent: #f0b900; --danger: #c62828; } @media (prefers-color-scheme: dark) { :root { --ink: #e6e6e6; --bg: #111315; --muted: #9aa1a9; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Sticky footer: the page is a column at least as tall as the viewport, and main absorbs the slack — so the footer sits on the bottom edge when content is short, and is pushed below the fold normally when it is long. dvh follows mobile browser chrome as it hides; vh is the fallback. */ body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; color: var(--ink); background: var(--bg); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } main { flex: 1 0 auto; } a { color: var(--green-light); } /* Header / nav */ .site-header { border-bottom: 1px solid var(--line); position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(8px); } .site-header .wrap { max-width: var(--maxw); margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { font-weight: 800; letter-spacing: 0.2px; color: var(--green); text-decoration: none; font-size: 1.15rem; } @media (prefers-color-scheme: dark) { .brand { color: var(--green-light); } } .nav a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.95rem; margin-left: 18px; } .nav a:hover { color: var(--ink); } /* Content */ main { max-width: var(--maxw); margin: 0 auto; padding: 40px 20px 88px; } h1 { font-size: 2rem; margin: 0 0 6px; } h2 { font-size: 1.25rem; margin-top: 2rem; border-bottom: 1px solid var(--line); padding-bottom: 4px; } .muted { color: var(--muted); font-size: 0.9rem; } .lead { font-size: 1.1rem; color: var(--muted); max-width: 60ch; } table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 0.95rem; } th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; } .note { background: color-mix(in srgb, var(--accent) 14%, transparent); border-left: 4px solid var(--accent); padding: 10px 14px; border-radius: 4px; } .note-danger { background: color-mix(in srgb, var(--danger) 12%, transparent); border-left-color: var(--danger); } /* Numbered instructions (e.g. the in-app deletion steps) */ .steps { padding-left: 1.3em; margin: 12px 0; } .steps li { margin-bottom: 8px; } /* Language switch — used on pages that carry both EN and Khmer copy. Both panes live in the DOM; `data-lang` on picks the visible one, so the page still shows English text with JavaScript disabled. */ .lang-switch { display: flex; gap: 8px; margin-bottom: 28px; } .lang-switch button { font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; cursor: pointer; } /* The Khmer pill carries `.km` for its font, but not that rule's wide leading — it is a one-line control, not body copy. */ .lang-switch button.km { line-height: 1.5; padding: 8px 16px; } .lang-switch button:hover { color: var(--ink); border-color: var(--green-light); } .lang-switch button[aria-pressed="true"] { color: #fff; background: var(--green); border-color: var(--green); } @media (prefers-color-scheme: dark) { .lang-switch button[aria-pressed="true"] { background: var(--green-light); border-color: var(--green-light); } } html[data-lang="km"] .pane-en, html[data-lang="en"] .pane-km { display: none; } /* Khmer script needs a dedicated face and more leading than Latin. */ .km { font-family: "Noto Sans Khmer", "Khmer OS Battambang", "Khmer Sangam MN", sans-serif; line-height: 2; } .km h1 { line-height: 1.5; } .km h2 { line-height: 1.6; } /* Home — the logo is the only content, centred in the space between the header and the footer. min-height keeps it optically centred on tall viewports without pushing the footer off a short one. */ main.home { display: grid; place-items: center; padding: 56px 20px; } .home-logo { display: block; width: min(280px, 62vw); height: auto; } /* Legacy hero + cards (kept for any page that still uses them) */ .hero { padding: 48px 0 8px; } .cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 28px; } .card { border: 1px solid var(--line); border-radius: 14px; padding: 20px; text-decoration: none; color: inherit; display: block; transition: border-color 0.15s ease; } .card:hover { border-color: var(--green-light); } .card h3 { margin: 0 0 6px; } .card p { margin: 0; color: var(--muted); font-size: 0.95rem; } /* Footer */ .site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; } .site-footer .wrap { max-width: var(--maxw); margin: 0 auto; padding: 24px 20px; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; } .site-footer a { color: var(--muted); text-decoration: none; } .site-footer a:hover { color: var(--ink); }