/* =========================================================================== MetaTech — legal document pages (privacy.html, terms.html) Loaded AFTER styles/main.css, which already owns the palette, the navbar and the footer. This file adds only what a long-form document needs: a measure that is comfortable to read, sectioned headings, and prose styles for the copy the i18n dictionaries inject. These pages carry no scroll animation on purpose. The home page is the showpiece; a privacy policy should load instantly and be readable the moment it arrives, so nothing here is hidden pending a timeline. =========================================================================== */ /* The navbar is fixed, so anchor jumps from the contents list would otherwise land with the heading tucked underneath it. Keyed off a class on that the legal pages set, rather than :has(), so it resolves during the first style pass with no dependency on selector support. */ html.legal-doc { scroll-padding-top: calc(var(--nav-h) + 1.5rem); } .legal-page { /* Clears the fixed navbar. */ padding-top: calc(var(--nav-h) + clamp(2.5rem, 7vh, 5rem)); padding-bottom: clamp(3rem, 9vh, 6rem); } /* A single measure shared by the header, the contents list and the prose, so every left edge on the page lines up. ~68ch is about 12 words a line at this size — long enough not to feel cramped, short enough to track by eye. */ .legal-wrap { width: 100%; max-width: 68ch; margin-inline: auto; padding-inline: 1.5rem; } @media (min-width: 1024px) { .legal-wrap { padding-inline: 2.5rem; } } /* --- document header ----------------------------------------------------- */ .legal-eyebrow { color: var(--accent-2); margin-bottom: 1.1rem; } .legal-title { font-size: clamp(2rem, 5.5vw, 3.25rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 1.25rem; } .legal-updated { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); margin-bottom: 2rem; } .legal-lede { font-size: clamp(1.02rem, 2.1vw, 1.2rem); line-height: 1.72; color: rgba(240, 244, 252, 0.86); padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); } /* --- contents ------------------------------------------------------------ */ .legal-toc { margin: 2.5rem 0 1rem; } .legal-toc-title { color: var(--muted); margin-bottom: 1rem; } /* Two columns where there is room: these lists run to 19 items, and a single column pushes the first section most of a screen down the page. */ .legal-toc ol { list-style: none; counter-reset: toc; display: grid; gap: 0.5rem 2rem; } @media (min-width: 640px) { .legal-toc ol { grid-template-columns: 1fr 1fr; } } .legal-toc li { counter-increment: toc; display: flex; gap: 0.6rem; font-size: 0.95rem; line-height: 1.5; } .legal-toc li::before { content: counter(toc, decimal-leading-zero); flex: 0 0 auto; font-family: "JetBrains Mono", "Noto Sans Thai", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.08em; color: rgba(127, 169, 222, 0.75); /* Optical alignment with the cap-height of the link beside it. */ padding-top: 0.22em; } .legal-toc a { color: var(--muted); text-decoration: none; transition: color 0.25s ease; } .legal-toc a:hover { color: var(--ink); } /* --- sections ------------------------------------------------------------ */ .legal-body { counter-reset: section; margin-top: 3.5rem; } .legal-section { counter-increment: section; padding-top: 2.75rem; } .legal-section + .legal-section { border-top: 1px solid rgba(255, 255, 255, 0.07); } .legal-section h2 { display: flex; gap: 0.85rem; font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 1.1rem; } .legal-section h2::before { content: counter(section, decimal-leading-zero); flex: 0 0 auto; font-family: "JetBrains Mono", "Noto Sans Thai", ui-monospace, monospace; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; color: var(--accent-2); padding-top: 0.42em; } /* --- prose --------------------------------------------------------------- * Scoped to .legal-prose because this is the only place on the site with flowing multi-paragraph copy, and the content is injected as HTML from the dictionaries — so the elements cannot carry utility classes of their own. */ .legal-prose { font-size: 1rem; line-height: 1.78; color: var(--muted); } .legal-prose > * + * { margin-top: 1.1rem; } .legal-prose strong { color: var(--ink); font-weight: 600; } .legal-prose em { font-style: italic; color: rgba(240, 244, 252, 0.86); } .legal-prose ul { list-style: none; display: grid; gap: 0.7rem; /* Aligns the bullet column with the paragraph text above it. */ padding-left: 0.15rem; } .legal-prose li { position: relative; padding-left: 1.35rem; } .legal-prose li::before { content: ""; position: absolute; left: 0; /* Sits on the first line's centre regardless of how many lines follow. */ top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: rgba(127, 169, 222, 0.65); } .legal-prose code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.86em; padding: 0.12em 0.4em; border-radius: 4px; background: rgba(127, 169, 222, 0.12); border: 1px solid rgba(127, 169, 222, 0.18); color: rgba(226, 233, 245, 0.92); /* Long hostnames must not push the measure sideways on a phone. */ overflow-wrap: anywhere; } .legal-link { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(127, 169, 222, 0.5); text-underline-offset: 0.22em; transition: text-decoration-color 0.25s ease; overflow-wrap: anywhere; } .legal-link:hover { text-decoration-color: var(--accent-2); } /* Unfilled facts — a registration number, a registered address. Deliberately loud: this is the one thing on the page that must not survive to production unnoticed, and amber-on-navy is impossible to skim past. */ .legal-todo { background: rgba(255, 196, 87, 0.16); border-bottom: 1px dashed rgba(255, 196, 87, 0.75); color: #ffd28a; padding: 0.08em 0.3em; border-radius: 3px; font-style: normal; } /* --- footer of the document --------------------------------------------- */ .legal-foot { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; } .legal-foot-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); transition: color 0.25s ease; } .legal-foot-link:hover { color: var(--ink); } .legal-foot-link svg { flex: 0 0 auto; } /* --- Thai --------------------------------------------------------------- * Thai stacks vowels and tone marks above and below the baseline, so latin leading crushes them. main.css already does this for the display headings; the document prose needs the same treatment. */ html[data-lang="th"] .legal-title, html[data-lang="th"] .legal-section h2 { letter-spacing: 0; line-height: 1.4; } html[data-lang="th"] .legal-prose, html[data-lang="th"] .legal-lede { line-height: 1.95; } html[data-lang="th"] .legal-toc li { line-height: 1.7; } /* --- print -------------------------------------------------------------- * Legal documents get printed and filed. Drop the furniture, invert to ink on paper, and let the anchors keep their meaning. */ @media print { .nav, .mobile-menu, .site-footer, .legal-toc, .skip-link, .legal-foot { display: none !important; } html, body { background: #fff !important; color: #000 !important; } .legal-page { padding-top: 0; } .legal-wrap { max-width: none; padding-inline: 0; } .legal-title, .legal-section h2, .legal-prose strong { color: #000 !important; } .legal-prose, .legal-lede, .legal-updated { color: #1a1a1a !important; } .legal-section { /* Never orphan a heading at the foot of a page. */ break-inside: avoid; page-break-inside: avoid; } .legal-link { color: #000 !important; } .legal-link::after { content: " (" attr(href) ")"; font-size: 0.85em; } .legal-todo { background: none; color: #000 !important; border-bottom: 1px dashed #000; } }