/* * Styles for the standalone legal pages under /cntinue/ — the privacy policy * and the account-deletion page, in both languages. * * Those pages deliberately do NOT load the site's JavaScript bundle: the two * index pages are one fullPage.js document whose navigation is in-page * anchors, and initialising that machinery against a page with no `#fullpage` * element buys nothing and can only break. So they load `style.css` for the * shared identity — Montserrat, the black ground, the amber link hover — and * this file on top of it for everything a long document needs and a one-pager * never did. * * Every rule below is scoped under `.legal-page`, which lives on , so * this file can be linked anywhere without reaching the index pages' layout. * * Note `html { font-size: 62.5% }` in style.css: 1rem is 10px here. */ .legal-page { height: auto; min-height: 100%; background: #000000; color: #d8d8d8; font-size: 1.5rem; line-height: 1.75; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* * style.css sets `p { color: #000000 }` — black text, on a black page. That * rule beats anything inherited from , so every text element used here * has to be named explicitly rather than left to inherit. It also sets a fluid * `font-size: calc(...)` on p and `margin: 0`, both of which are re-stated for * the same reason. */ .legal-page p, .legal-page li, .legal-page dd, .legal-page td { color: #d8d8d8; font-size: 1.5rem; line-height: 1.75; } .legal-page a { color: #ffffff; border-bottom: 1px solid rgba(231, 172, 44, 0.5); } .legal-page code { color: #e7ac2c; font-size: 0.92em; word-break: break-all; } .legal-page a:hover { color: #e7ac2c; border-bottom-color: #e7ac2c; } /* --- Header ------------------------------------------------------------ */ .legal-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; padding: 2.5rem 3rem; border-bottom: 1px solid #1c1c1c; } .legal-header .legal-logo img { display: block; width: 180px; max-width: 50vw; height: auto; } .legal-header .legal-logo, .legal-header .legal-lang { border-bottom: 0; } .legal-header .legal-lang { font-size: 1.3rem; letter-spacing: 0.08em; text-transform: uppercase; } .legal-header .legal-lang img { width: 21px; vertical-align: text-bottom; margin-right: 0.6rem; } /* --- Document ---------------------------------------------------------- */ .legal-main { max-width: 82rem; margin: 0 auto; padding: 5rem 3rem 6rem; } .legal-page h1 { margin: 0 0 0.8rem; color: #ffffff; font-size: 3.4rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } .legal-page .legal-lead { margin: 0 0 1.2rem; color: #ffffff; font-size: 1.7rem; line-height: 1.6; } .legal-page .legal-dates { margin: 0 0 4rem; color: #8a8a8a; font-size: 1.3rem; letter-spacing: 0.04em; text-transform: uppercase; } .legal-page h2 { margin: 4.5rem 0 1.4rem; padding-top: 2.5rem; border-top: 1px solid #1c1c1c; color: #ffffff; font-size: 2.1rem; font-weight: 700; line-height: 1.35; } .legal-page h3 { margin: 2.8rem 0 0.8rem; color: #e7ac2c; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .legal-page p { margin: 0 0 1.6rem; } .legal-page ul { margin: 0 0 1.6rem; padding-left: 2.2rem; list-style: disc; } .legal-page li { margin-bottom: 0.8rem; } .legal-page strong { color: #ffffff; font-weight: 700; } /* A short definition-style block: what we hold, and why. */ .legal-page .legal-what { margin: 0 0 2.4rem; padding: 0; } .legal-page .legal-what dt { margin-top: 1.8rem; color: #ffffff; font-weight: 700; } .legal-page .legal-what dd { margin: 0.2rem 0 0; } /* The on-device callout — the one claim in this document worth pulling out of the flow, because it is the one people do not expect. */ .legal-page .legal-callout { margin: 0 0 2.4rem; padding: 2.2rem 2.6rem; border-left: 3px solid #e7ac2c; background: #0d0d0d; } .legal-page .legal-callout p:last-child, .legal-page .legal-callout ul:last-child { margin-bottom: 0; } /* --- Sub-processor table ----------------------------------------------- */ .legal-table-wrap { overflow-x: auto; margin: 0 0 2.4rem; } .legal-page table { width: 100%; border-collapse: collapse; font-size: 1.4rem; } .legal-page th, .legal-page td { padding: 1.1rem 1.4rem; border-bottom: 1px solid #1c1c1c; text-align: left; vertical-align: top; } .legal-page th { color: #ffffff; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } /* --- Ordered steps ----------------------------------------------------- */ /* style.css strips list-style from every ol/ul in its reset, and the deletion page's "do this, then this" only reads as steps if the numbers are there. */ .legal-page ol { margin: 0 0 1.6rem; padding-left: 2.2rem; list-style: decimal; } /* --- The deletion request form ----------------------------------------- */ /* * There is no server here — see js/deletion-request.js. The form composes a * mailto:, so it is styled as a block the reader fills in rather than as * something that submits to us. */ .legal-form { margin: 0 0 2.4rem; padding: 2.6rem 2.6rem 2.2rem; border: 1px solid #1c1c1c; background: #0d0d0d; } .legal-page .legal-form-intro { margin-bottom: 2.4rem; color: #8a8a8a; font-size: 1.35rem; } .legal-page .legal-form label { display: block; margin-bottom: 0.6rem; color: #ffffff; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.04em; } .legal-page .legal-form input[type='email'], .legal-page .legal-form textarea { display: block; width: 100%; margin-bottom: 2rem; padding: 1.1rem 1.3rem; border: 1px solid #2c2c2c; border-radius: 0; background: #000000; color: #ffffff; font-family: inherit; font-size: 1.5rem; line-height: 1.5; } .legal-page .legal-form textarea { resize: vertical; } .legal-page .legal-form input[type='email']:focus, .legal-page .legal-form textarea:focus { border-color: #e7ac2c; outline: none; } .legal-page .legal-form input::-webkit-input-placeholder { color: #5a5a5a; } .legal-page .legal-form input::placeholder { color: #5a5a5a; } .legal-page .legal-form fieldset { margin: 0 0 2rem; padding: 0; border: 0; } .legal-page .legal-form legend { margin-bottom: 1rem; padding: 0; color: #ffffff; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.04em; } /* Radios sit next to their text, so this one label is not a block. */ .legal-page .legal-form label.legal-choice { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.9rem; color: #d8d8d8; font-size: 1.5rem; font-weight: 400; letter-spacing: 0; cursor: pointer; } .legal-page .legal-form label.legal-choice input { margin-top: 0.5rem; accent-color: #e7ac2c; } .legal-page .legal-button { padding: 1.2rem 2.4rem; border: 1px solid #e7ac2c; background: transparent; color: #e7ac2c; font-family: inherit; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .legal-page .legal-button:hover, .legal-page .legal-button:focus { background: #e7ac2c; color: #000000 !important; } .legal-page .legal-form-note { margin: 1.6rem 0 0; color: #e7ac2c; font-size: 1.35rem; } /* --- Footer ------------------------------------------------------------ */ /* * style.css pins every