/* ============================================================ Uniqcret — legal pages (Terms of Use · Privacy · Code of Conduct) Layered on top of main.css. Reuses every theme token, the nav, buttons and footer; adds the reading-column layout, the sticky 3-way page switcher, and the bilingual EN/TH block toggle. Language model: NO data-i18n here. Every translatable node is duplicated as two elements, data-l="en" / data-l="th"; the CSS below shows the one matching . The pre-paint script (shared with the home page) sets data-lang from localStorage, so the right language paints with no flash, and i18n.js wires the EN | ไทย buttons + persistence site-wide. ============================================================ */ /* ---------- Bilingual block toggle ---------- */ /* The ACTIVE language keeps its natural display (block / list-item / inline); only the inactive one is hidden, so layout never breaks. */ html[data-lang="th"] [data-l="en"] { display: none !important; } html[data-lang="en"] [data-l="th"], html:not([data-lang="th"]) [data-l="th"] { display: none !important; } /* ---------- Nav: always-solid on legal pages (no scroll engine) ---------- */ .nav--solid { background: rgba(10, 11, 18, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); } [data-theme="light"] .nav--solid { background: rgba(255, 255, 255, 0.86); } .nav-link-home { font-size: 0.92rem; color: var(--body-c); padding: 0.75rem 0.4rem; margin: -0.75rem 0.2rem; transition: color 0.25s ease; } .nav-link-home:hover { color: var(--accent); } /* ---------- Page wrapper ---------- */ .legal-main { padding-top: var(--nav-h); min-height: 100vh; } .legal-wrap { width: min(820px, 92vw); margin-inline: auto; } /* ---------- Hero ---------- */ .legal-hero { padding: clamp(2.6rem, 6vw, 4.2rem) 0 1.6rem; } .legal-eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; } .legal-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); } .legal-meta { margin-top: 0.9rem; font-size: 0.88rem; color: var(--muted); } .legal-intro { margin-top: 1.4rem; font-size: 1.06rem; color: var(--body-c); } /* ---------- Sticky 3-way page switcher ---------- */ .legal-tabs { position: sticky; top: var(--nav-h); z-index: 80; margin: 1.6rem 0 0; padding: 0.5rem 0; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .legal-tabs-inner { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.4rem; border: 1px solid var(--line); border-radius: 999px; background: var(--glass); } [data-theme="light"] .legal-tabs-inner { box-shadow: 0 1px 2px rgba(15, 16, 32, 0.05); } .legal-tab { flex: 1 1 auto; text-align: center; white-space: nowrap; padding: 0.6rem 1rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: var(--body-c); transition: color 0.2s ease, background-color 0.2s ease; } .legal-tab:hover { color: var(--accent); } .legal-tab[aria-current="page"] { background: var(--accent); color: var(--accent-deep); } .legal-tab[aria-current="page"]:hover { color: var(--accent-deep); } /* ---------- Table of contents ---------- */ .legal-toc { margin: 2rem 0 0; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--glass); } [data-theme="light"] .legal-toc { box-shadow: 0 1px 2px rgba(15, 16, 32, 0.05); } .legal-toc-title { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.8rem; } .legal-toc ol { counter-reset: toc; display: grid; gap: 0.45rem; } @media (min-width: 680px) { .legal-toc ol { grid-template-columns: 1fr 1fr; gap: 0.45rem 2rem; } } .legal-toc li { counter-increment: toc; } .legal-toc a { display: inline-block; font-size: 0.93rem; color: var(--body-c); transition: color 0.2s ease; } .legal-toc a::before { content: counter(toc) ". "; color: var(--accent); font-variant-numeric: tabular-nums; } .legal-toc a:hover { color: var(--accent); } /* ---------- Body / sections ---------- */ .legal-body { padding: 2.4rem 0 4rem; } .legal-section { padding: 1.8rem 0; border-top: 1px solid var(--line-soft); scroll-margin-top: calc(var(--nav-h) + 76px); /* clear nav + sticky tabs */ } .legal-section:first-child { border-top: 0; } .legal-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); scroll-margin-top: calc(var(--nav-h) + 76px); } .legal-h2 .legal-h2-num { color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 0.5rem; } .legal-h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); margin-top: 1.5rem; } .legal-p { margin-top: 1rem; color: var(--body-c); } .legal-p a, .legal-li a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .legal-ul { margin-top: 1rem; display: grid; gap: 0.6rem; } .legal-li { position: relative; padding-left: 1.4rem; color: var(--body-c); } .legal-li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 2px; background: var(--accent); border-radius: 2px; } /* Thai reads a touch larger / looser for legibility */ [lang="th"].legal-title { font-size: clamp(1.85rem, 4.6vw, 2.9rem); } [lang="th"] .legal-li, [lang="th"].legal-p, [lang="th"].legal-intro { line-height: 1.8; } /* ---------- Footer legal cross-links (shared with home) ---------- */ .footer-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; align-items: center; } .footer-legal a { font-size: 0.82rem; color: var(--muted); transition: color 0.2s ease; } .footer-legal a:hover { color: var(--accent); } .footer-legal a[aria-current="page"] { color: var(--accent); } .footer-legal .footer-legal-sep { color: var(--line); } /* ---------- Small screens ---------- */ @media (max-width: 560px) { .legal-tab { flex-basis: 100%; } .nav-link-home.nav-link-extern { display: none; } /* keep nav tidy on phones */ }