/* ============================================================================ SWORT legal + trust document styling Shared by /privacy, /terms, /security, /cookies, /accessibility. Deliberately conservative: no WebGL, no 3D, no autoplay, no scroll effects. ========================================================================= */ :root { --black: #050505; --carbon: #0c0c0d; --graphite: #191b1d; --paper: #f2f2f2; --paper-ink: #181818; --paper-muted: #55595f; --paper-rule: #d8d8d8; --white-text: #f5f5f2; --focus: #111214; --measure: 800px; /* reading width, within the 760-840px target */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scrollbar-color: #333 #000; scrollbar-width: thin; } body { background: var(--paper); color: var(--paper-ink); font-family: 'DM Mono', ui-monospace, monospace; font-size: 16px; line-height: 1.75; -webkit-text-size-adjust: 100%; } /* Skip link: visible only when focused */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--white-text); color: var(--black); padding: 12px 20px; font-size: 13px; letter-spacing: 0.08em; } .skip-link:focus { left: 8px; top: 8px; } a { color: inherit; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .l-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* ── Global black navigation (matches the rest of the site) ─────────────── */ .l-nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 40px; background: rgba(5,5,5,0.94); border-bottom: 1px solid #1c1c1c; backdrop-filter: blur(8px); } .l-nav a { text-decoration: none; } .l-nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.08em; color: var(--white-text); } .l-nav-links { display: flex; gap: 26px; list-style: none; } .l-nav-links a { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a8a; } .l-nav-links a:hover, .l-nav-links a[aria-current="page"] { color: var(--white-text); } .l-nav-cta { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 18px; border: 1px solid var(--white-text); color: var(--white-text); } .l-nav-cta:hover { background: var(--white-text); color: var(--black); } @media (max-width: 820px) { .l-nav-links { display: none; } } /* ── Compact black title header ─────────────────────────────────────────── */ .l-head { background: var(--black); color: var(--white-text); padding: 52px 0 40px; } .l-head .l-container { max-width: var(--measure); } .l-eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 14px; } .l-title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(38px, 6vw, 60px); line-height: 1.02; letter-spacing: 0.02em; } .l-dates { margin-top: 18px; font-size: 13px; color: #a8a8a8; display: flex; flex-wrap: wrap; gap: 8px 26px; } .l-dates b { color: var(--white-text); font-weight: 400; } /* ── Document body on warm white ────────────────────────────────────────── */ .l-doc { padding: 44px 0 88px; } .l-doc .l-container { max-width: var(--measure); } .l-lede { font-size: 17px; line-height: 1.8; color: var(--paper-ink); padding-bottom: 26px; border-bottom: 1px solid var(--paper-rule); margin-bottom: 8px; } /* ── Table of contents ──────────────────────────────────────────────────── Rebuilt. The old version used CSS `columns` with the index rendered as a ::before on a flowing inline, and it did not survive real content: measured on Terms at 1440px, ELEVEN of twenty-two entries wrapped to a second line, with the wrapped line running back under its own number. A contents list that is harder to scan than the document defeats its purpose. Two changes fix it. Grid instead of `columns`, because column flow cannot align anything across columns and gives no control over where an item breaks. And each entry is its own two-track grid, so the number sits in a fixed gutter and a wrapped title indents under the title, never under the numeral. Column count is auto-fit against a real minimum, so long titles get one column instead of being crushed into two. */ .l-toc { /* Breaks out of the reading measure, symmetrically. The contents list was inheriting the 65ch prose column, which left it 615px wide for twenty-two long statutory headings. Even at two columns that meant 19 of 22 entries wrapped and the list stood 1454px tall, taller than the viewport it exists to help you skip. A table of contents is navigation, not prose: it has no reason to respect a reading measure. 100% here is the measure column, so when --toc-w exceeds it both margins go negative by the same amount and the box expands about its own centre. The min() keeps it inside the viewport on small screens, where it simply stays at 100% and stacks. */ --toc-w: min(1120px, calc(100vw - 80px)); width: var(--toc-w); margin-left: calc((100% - var(--toc-w)) / 2); margin-right: calc((100% - var(--toc-w)) / 2); border: 1px solid var(--paper-rule); background: var(--paper-inset, #f6f6f4); padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px); margin-top: 32px; margin-bottom: 48px; } .l-toc h2 { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--paper-muted); margin: 0 0 16px; padding: 0; border: 0; } /* Prefixed with .l-doc deliberately. The generic list rules below are written as `.l-doc ol > li::before` (specificity 0,1,3) and the TOC sits inside .l-doc, so an unprefixed `.l-toc li::before` (0,1,2) LOST to them. The generic rule sets position:absolute, which pulled the counter out of the grid entirely, leaving the link as the only in-flow item and placing it in the 2.2em numeral track: measured 29px wide inside a 329px cell, which is why every title wrapped one character at a time. */ .l-doc .l-toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; display: grid; /* Sized against the real container, not by eye. The measured inner width is 615px, so a 290px minimum plus a 44px gap came to 623px and auto-fit silently collapsed to ONE column. 260 + 32 fits two with room to spare. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); column-gap: 32px; row-gap: 2px; } .l-doc .l-toc li { counter-increment: toc; position: static; display: grid; grid-template-columns: 2.2em 1fr; align-items: baseline; margin: 0; padding: 0; font-size: 13px; line-height: 1.5; } .l-doc .l-toc ol > li::before { content: counter(toc, decimal-leading-zero); position: static; left: auto; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--paper-muted); font-variant-numeric: tabular-nums; } .l-doc .l-toc a { display: block; padding: 7px 0; min-width: 0; /* comfortable target, not a hairline */ color: var(--paper-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: color 140ms linear, border-color 140ms linear; } .l-doc .l-toc a:hover { color: #000; border-bottom-color: var(--paper-ink); } .l-doc .l-toc a:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 2px; } /* ── Section headings ───────────────────────────────────────────────────── 23 sections at 19px/500 carried no more weight than a sub-head, so a long statutory document read as one undifferentiated column. Scaled up and given the display face, with the hairline rule kept as the section separator. NO CSS COUNTER. An earlier version added one and it was wrong twice over: the headings are ALREADY numbered in the source ("1. Acceptance of these Terms"), so every section would have shown "01" above "1."; and because the contents box lives inside .l-doc, its own "On this page" heading incremented the counter, pushing every real section one out of step with the list that points at it. The markup owns the numbering. */ .l-doc h2 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(21px, 2.2vw, 27px); line-height: 1.2; letter-spacing: 0.03em; text-transform: uppercase; color: var(--swort-black, #050505); margin: 52px 0 14px; padding-top: 28px; border-top: 1px solid var(--paper-rule); scroll-margin-top: 96px; } .l-doc h2:first-of-type { border-top: none; padding-top: 0; margin-top: 30px; } /* The contents box carries its own label styling and must not inherit the section treatment: it is a panel heading, not a section of the document. */ .l-doc .l-toc h2 { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--paper-muted); margin: 0 0 16px; padding: 0; border: 0; line-height: 1.4; } .l-doc h3 { font-family: 'DM Mono', monospace; font-weight: 500; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-ink); margin: 30px 0 10px; scroll-margin-top: 96px; } .l-doc p { margin-bottom: 16px; color: var(--paper-ink); } .l-doc ul, .l-doc ol { margin: 0 0 18px 0; padding-left: 0; list-style: none; } .l-doc li { position: relative; padding-left: 22px; margin-bottom: 9px; } .l-doc ul > li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 6px; height: 1px; background: var(--paper-muted); } .l-doc ol { counter-reset: li; } .l-doc ol > li { counter-increment: li; } .l-doc ol > li::before { content: counter(li) "."; position: absolute; left: 0; color: var(--paper-muted); } .l-doc a { color: #1a1c1f; text-decoration: underline; text-underline-offset: 3px; } .l-doc a:hover { color: #050505; } .l-doc strong { font-weight: 500; } /* Emphasis callout for important, non-legalese statements */ .l-callout { border-left: 3px solid var(--paper-ink); background: #ebebeb; padding: 18px 22px; margin: 22px 0; font-size: 15px; } .l-callout p:last-child { margin-bottom: 0; } /* Data tables (cookies, data flows) */ .l-table-wrap { overflow-x: auto; margin: 18px 0 24px; } .l-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; } .l-table th, .l-table td { text-align: left; vertical-align: top; padding: 10px 12px; border: 1px solid var(--paper-rule); } .l-table th { background: #ebebeb; font-weight: 500; } .l-back { display: inline-block; margin-top: 40px; font-size: 13px; color: var(--paper-ink); text-decoration: underline; text-underline-offset: 3px; } /* ── Black footer ───────────────────────────────────────────────────────── */ .l-foot { background: var(--black); color: var(--white-text); padding: 44px 0 34px; } .l-foot a { text-decoration: none; } .l-foot-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid #1a1a1a; } .l-foot-logo { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.1em; } .l-foot-col h3 { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: #7a7a7a; margin-bottom: 12px; } .l-foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; } .l-foot-col a, .l-foot-col button { font-family: 'DM Mono', monospace; font-size: 12px; color: #b8b8b8; background: none; border: none; padding: 0; cursor: pointer; text-align: left; } .l-foot-col a:hover, .l-foot-col button:hover { color: var(--white-text); } .l-foot-bottom { margin-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 11px; color: #8e8e8e; } /* ── Print ──────────────────────────────────────────────────────────────── */ @media print { .l-nav, .l-toc, .l-foot, .skip-link, #swort-consent, #swort-consent-panel { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; line-height: 1.5; } .l-head { background: #fff; color: #000; padding: 0 0 12pt; } .l-head .l-title { font-size: 22pt; } .l-dates, .l-eyebrow { color: #333; } .l-doc { padding: 0; } .l-container { max-width: none; padding: 0; } .l-doc h2 { page-break-after: avoid; } .l-doc a { color: #000; text-decoration: underline; } .l-doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } @media (max-width: 640px) { .l-container { padding: 0 20px; } .l-nav { padding: 14px 20px; } body { font-size: 15px; } } /* ── Consent controls rendered as text ──────────────────────────────────── These are