/* ============================================================ XC_Doc_v1.css — the document surface Views/Home/Faq.cshtml Views/Home/TermsAndConditions.cshtml Views/Home/PrivacyPolicy.cshtml Additive, in the manner of XC_Auth_v1.css and XC_Company_v1.css: it redefines no token and no .btn. It sits on top of XC_Home_v4.css tokens, .btn, .section, masthead, footer, .wrap and adds only what a long-form document needs. THESIS. These three pages are the only ones on the site whose whole job is to be READ — an eight-question FAQ, thirty-five numbered contract clauses, and a privacy policy with fourteen sections. All three legacy pages solved that with one 1240px column of justified text, no anchor, no way in, and no way to find clause 18 except to read clauses 1 to 17. Nothing about them was a design decision; they were a Word document pasted into a Bootstrap container. What replaces them is the plainest thing that actually serves a reader: one measured column on a white ground, a numbered margin where the clause number is information a reader quotes back to us, and a ruled contents rail that says where they are. The FAQ is the one of the three that is not read end to end, so it is the one of the three that discloses: eight native details rows, the first already open. COLOUR LOGIC. Blue is structure and it marks position — the rail's current section, the numeral of a clause. Amber is spent once per page, on the rule under the title, exactly as it is on Home/About. Navy does not appear: nothing on a policy page is a commitment being made, it is a commitment being recorded. MODE. Read, on all three. ============================================================ */ /* ============================================================ 0. JUSTIFICATION Every run of prose on this surface is justified, so both edges of the column are straight. It is set here, once, as a list of the blocks that hold prose -- never on a container, because justification inherits and would then reach the contents rail, the mono stamp and the currency columns, none of which are paragraphs. hyphens: auto is not optional with it. Justification works by opening the word spaces of a line until it reaches the measure; at 68 characters, with a legal vocabulary of twelve-letter words and no hyphenation, the spaces it has to open are wide enough to line up vertically down several lines and read as a river through the middle of the paragraph. Hyphenation gives the engine a second place to break, and the spacing stays even. It needs a language to hyphenate against, which the shell supplies: in _LayoutHome.cshtml. text-align-last is left by default under justify, so a final short line is never stretched across the measure. ============================================================ */ .doc-lede, .doc-p, .doc-clauses > li, .doc-bullets > li, .doc-sub > li { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } /* ============================================================ 1. THE DOCUMENT SHELL The document is on white and the site is on --ground, so the change of ground is the frame. Not a card: it is full-bleed to both edges of the viewport and separated by a hairline, the same move .ag-plate makes on the agent surface. ============================================================ */ .doc { background: var(--surface); border-bottom: 1px solid var(--line); padding-bottom: clamp(3.5rem, 6vw, 6rem); } /* Terms and Privacy run the full site grid: rail on the left, and the reading column takes every remaining pixel of it. That is a ~950px column, near 115 characters a line -- past the comfortable measure, so the line-height on this surface is opened up to 1.8 to keep a long line trackable, and every justified block is hyphenated so the extra width goes into words rather than into rivers. The class stays because the gap has to be constant here: the column is the sheet minus 232 minus the gap, and the head above it is the whole sheet, so all three have to agree for the title, the amber rule, the section hairlines and the clause separators to stop on one vertical. */ .doc-ruled .doc-grid { gap: clamp(1.75rem, 4vw, 3.5rem); } /* the opening paragraph runs the head, for the same reason: a 74ch lede under a full-width title is the hole again, moved. */ .doc-ruled .doc-lede { max-width: none; } .doc-head { padding: clamp(2.75rem, 5.5vw, 4.75rem) 0 clamp(1.75rem, 3vw, 2.5rem); } .doc-title { font-size: clamp(2.05rem, 5vw, 3.4rem); line-height: 1.04; letter-spacing: -.034em; max-width: 24ch; } /* the page's one authored moment, and it is the one Home/About already owns: the amber rule draws itself out from under the title. On load, not on scroll -- the title block is the first viewport, and gating it on a script is how a blocked script turns a page blank. */ .doc-rule { display: block; height: 3px; width: min(210px, 60%); margin-top: clamp(1.15rem, 2vw, 1.5rem); background: var(--accent-fill); transform-origin: left center; animation: docRule 1.05s cubic-bezier(.16, 1, .3, 1) .15s both; } @keyframes docRule { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* the opening paragraph of a policy, where there is one. Wider than the body measure and a size up, because it is the only paragraph on the page a reader is guaranteed to read. */ .doc-lede { margin-top: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 74ch; font-size: 17px; line-height: 1.75; color: var(--body); } /* ============================================================ 2. THE CONTENTS RAIL A ruled margin, not a sidebar card -- the account surface's reasoning, and its indicator: the current section is marked by a 2px brand rule in the rail's LEFT margin, where it sits against the word it belongs to rather than floating at the far edge of a 232px column. Without xc-doc_v1.js the rail is a plain list of in-page anchor links and every one of them works; the script only moves the mark as the reader scrolls. ============================================================ */ .doc-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; border-top: 1px solid var(--line); padding-top: clamp(1.75rem, 3vw, 2.75rem); } /* the rail is the stretched grid item; .doc-rail-in is what sticks. A grid item stretched to the row height has nothing to travel through. */ .doc-rail { position: relative; align-self: stretch; } .doc-rail-in { position: sticky; top: 96px; } .doc-rail-lab { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: .7rem; border-bottom: 1px solid var(--line); } .doc-toc { margin: 0; padding: 0; list-style: none; } .doc-toc a { position: relative; display: block; padding: .58rem 0 .58rem .85rem; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--body); text-decoration: none; transition: color .18s ease; } .doc-toc a::before { content: ""; position: absolute; left: 0; top: .55rem; bottom: .55rem; width: 2px; background: var(--brand); transform: scaleY(0); transform-origin: center top; transition: transform .24s cubic-bezier(.16, 1, .3, 1); } .doc-toc a:hover { color: var(--ink); } .doc-toc a:hover::before { transform: scaleY(1); background: var(--line-strong); } .doc-toc a[aria-current="true"] { color: var(--brand); font-weight: 600; } .doc-toc a[aria-current="true"]::before { transform: scaleY(1); background: var(--brand); } .doc-toc a:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 1px; } /* ============================================================ 3. THE BODY 68ch, 16px, left-aligned. The legacy pages set every paragraph to text-align: justify across the full 1240px: with no hyphenation dictionary in play that is what puts four-word rivers down the middle of a contract. ============================================================ */ /* The measure lives HERE, on the column, and not on each block inside it. Put it on the blocks and every hairline stops where its own longest line happens to stop: the clause separators end at 66ch, the section rules run the full 955px of the grid cell, and a contract reads as though two people ruled it. One measure on the column and every rule on the page ends on the same vertical -- 38rem is 68 characters at 16px once the numeral gutter is taken out of it. */ .doc-body { min-width: 0; } /* the ruled documents fill their column; the measure is the column, and the column is the sheet. */ .doc-ruled .doc-body { max-width: none; } .doc-sec + .doc-sec { margin-top: clamp(2.5rem, 4.5vw, 3.75rem); } /* the anchor a rail link lands on has to clear the sticky masthead, or the heading it named is the one thing hidden */ .doc-sec { scroll-margin-top: 92px; } /* more space above a heading than below it, everywhere */ .doc-sec > h2 { font-size: clamp(1.3rem, 2.1vw, 1.65rem); line-height: 1.2; letter-spacing: -.02em; padding-bottom: .85rem; border-bottom: 1px solid var(--line); } .doc-sec > h2 + * { margin-top: 1.35rem; } .doc-sec h3 { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.3; letter-spacing: -.014em; } /* the fourth level exists on the privacy policy and nowhere else -- one sub-heading, "Personal Information". It is set as a label rather than as a smaller heading: below h3 the only honest moves left are weight and tracking, and shrinking type twice more inside a reading column reads as an error. */ .doc-sec h4 { margin-top: 1.1rem; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .doc-sec h4 + * { margin-top: .55rem; } .doc-p { font-size: 16px; line-height: 1.7; color: var(--body); } /* 1.8 on the wide sheet: the leading has to grow with the measure or the eye loses the line it is returning to. */ .doc-ruled .doc-p, .doc-ruled .doc-clauses > li, .doc-ruled .doc-bullets > li, .doc-ruled .doc-sub > li { line-height: 1.8; } .doc-p + .doc-p { margin-top: 1rem; } .doc-p + .doc-clauses, .doc-p + .doc-bullets, .doc-p + .doc-ways, .doc-p + .doc-sub { margin-top: 1.15rem; } /* ============================================================ 4. THE NUMBERED MARGIN On the terms page the clause number is information: a customer quotes "clause 18" back to us, and the numbering runs unbroken from 1 to 35 across six headed blocks (which is why every list after the first carries a start attribute -- ::marker honours it, a CSS counter would not). So the numeral gets a real margin column of its own, mono and tabular, and the clause text starts on one measure regardless of whether the numeral is 9 or 35. ============================================================ */ .doc-clauses { margin: 0; padding-left: 3.1rem; list-style: decimal; } .doc-clauses > li { padding: .9rem 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.7; color: var(--body); } .doc-clauses > li:first-child { border-top: 0; } .doc-clauses > li::marker { font-family: var(--f-mono); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brand); } /* a nested list inside a clause: hollow markers, so the numbered clause stays the only thing in the margin with weight */ .doc-bullets { margin: .7rem 0 0; padding-left: 1.15rem; list-style: disc; } .doc-bullets > li { padding: .3rem 0; font-size: 15.5px; line-height: 1.65; color: var(--body); } .doc-bullets > li::marker { color: var(--line-strong); } .doc-bullets .doc-bullets { margin-top: .25rem; } /* a numbered list nested inside a section (privacy's two cookie types) reads as a sub-clause, not as a new contract */ .doc-sub { margin: .9rem 0 0; padding-left: 1.85rem; list-style: decimal; } .doc-sub > li { padding: .32rem 0; font-size: 15.5px; line-height: 1.65; color: var(--body); } .doc-sub > li::marker { font-family: var(--f-mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); } /* the three ways personal information is collected: each is a headed block, so the numeral sits in a margin beside its own heading rather than in front of it */ .doc-ways { counter-reset: doc-way; margin: 0; padding: 0; list-style: none; } .doc-ways > li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); padding: 1.4rem 0; border-top: 1px solid var(--line); } .doc-ways > li::before { content: counter(doc-way) "."; counter-increment: doc-way; font-family: var(--f-mono); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brand); line-height: 1.5; } .doc-ways > li > * { grid-column: 2; } .doc-ways > li > h3 + * { margin-top: .7rem; } /* the closing line of a policy — the date it was last revised */ .doc-stamp { margin-top: 1.15rem; padding-top: .9rem; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); } /* ============================================================ 5. THE FAQ DISCLOSURE Eight questions, and unlike a contract this page is scanned for one of them rather than read end to end -- so it is the one document of the three that folds. Native details: with every script on the page blocked each row still opens and closes, and the first arrives open so the page is never eight closed lines. ============================================================ */ .faq-list { border-top: 1px solid var(--line); margin-top: clamp(1.5rem, 3vw, 2.25rem); } .faq-item { border-bottom: 1px solid var(--line); scroll-margin-top: 92px; } .faq-q { display: flex; align-items: flex-start; gap: 1rem; padding: 1.15rem .25rem; cursor: pointer; list-style: none; color: var(--ink); font-family: var(--f-display); font-size: clamp(1rem, 1.7vw, 1.18rem); font-weight: 600; line-height: 1.4; letter-spacing: -.014em; transition: color .18s ease; } /* Safari draws its own disclosure triangle through the shadow DOM */ .faq-q::-webkit-details-marker { display: none; } .faq-q:hover { color: var(--brand); } /* THE MARK BEFORE THE QUESTION. One per question, and each is drawn for its own question -- a note for denominations, a range between two stops for the order limits, a card for the ID you present, a document with a tick for the IDs we accept, a checkpoint barrier for what a country lets in, a calendar with a clock for wanting it sooner, a struck tag for fees, and the exchange loop for how many currencies. Drawn inline in the house stroke at one weight, as DESIGN.md requires: no icon font is loaded on this shell and no glyph stands in for a mark. aria-hidden, every one of them. The question beside it is the label, and a screen reader that read both would hear the row twice. It fills solid amber on hover and stays filled while the answer is open -- the move .co-ch makes on Home/About and .promise makes on the home page, so a pointer is answered the same way everywhere. Which is why the disclosure mark opposite gives its amber up: two amber objects in one row is one too many, and the thing amber should be marking here is the question you are on. */ .faq-ic { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; margin-top: -.15rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--brand); transition: border-color .18s ease, background-color .18s ease, color .18s ease; } .faq-ic svg { display: block; width: 18px; height: 18px; } .faq-q:hover .faq-ic, .faq-q:focus-visible .faq-ic, .faq-item[open] .faq-ic { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--accent-ink); } .faq-q:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: -2px; border-radius: 2px; } /* the question itself, and not the two aria-hidden marks either side of it -- text-wrap: balance on a 34px box does nothing, but a rule that claims to describe the question should only reach it */ .faq-q > span:not([aria-hidden]) { min-width: 0; text-wrap: balance; } /* the mark is two 1px rules, and the vertical one turns a quarter circle away to leave the horizontal one. Drawn, not a glyph. */ .faq-mark { position: relative; flex: 0 0 auto; width: 26px; height: 26px; margin-left: auto; margin-top: .1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .18s ease, background-color .18s ease; } .faq-mark::before, .faq-mark::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--brand); border-radius: 1px; transition: transform .28s cubic-bezier(.16, 1, .3, 1); } .faq-mark::after { transform: rotate(90deg); } .faq-item[open] .faq-mark::after { transform: rotate(0deg); } .faq-q:hover .faq-mark { border-color: var(--line-strong); } .faq-item[open] .faq-mark { border-color: var(--line-strong); } /* the answer hangs under the question's text, not under its mark: 34px of mark plus the row's 1rem gap, so the first word of the answer sits on the same vertical as the first word of the question. Below 620px it gives the indent back -- the measure is worth more than the alignment on a 375px screen. */ .faq-a { padding: 0 .25rem 1.6rem calc(34px + 1rem + .25rem); } /* the answer runs the full section, the same width as the question above it and as the hairline under it. That is a ~1150px measure, so the leading opens to 1.8 for the reason the ruled documents do: at this width the return sweep is what fails first, not the line. */ .faq-a .doc-p, .faq-a .doc-bullets > li, .faq-a .doc-sub > li { line-height: 1.8; } .faq-a > *:first-child { margin-top: 0; } /* the answer arrives; it does not appear. transform and opacity only -- a height transition on a details body is a layout animation and this system does not run those. */ .faq-item[open] .faq-a { animation: faqOpen .34s cubic-bezier(.16, 1, .3, 1) both; } @keyframes faqOpen { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } /* ============================================================ 6. THE CURRENCY LIST Forty-six currencies inside one FAQ answer. Four ruled columns, because that is what forty-six of anything wants; the four groups are the four the page already had, in the order it had them, so nothing moved. ============================================================ */ .faq-ccy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.35rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; } .faq-ccy-col { margin: 0; padding: .9rem 1rem; list-style: none; border-left: 1px solid var(--line); } .faq-ccy-col:first-child { border-left: 0; } .faq-ccy-col > li { padding: .3rem 0; font-size: 13.5px; line-height: 1.45; color: var(--body); transition: color .16s ease; } .faq-ccy-col > li:hover { color: var(--ink); } /* ============================================================ 7. RESPONSIVE ============================================================ */ @media (max-width: 1080px) { .faq-ccy { grid-template-columns: repeat(2, minmax(0, 1fr)); } .faq-ccy-col:nth-child(odd) { border-left: 0; } .faq-ccy-col:nth-child(n + 3) { border-top: 1px solid var(--line); } } /* the rail turns into the document's head. It does NOT become a horizontal scroller: a contents list whose later entries are behind a gesture defeats the one thing a contents list is for. */ @media (max-width: 900px) { .doc-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .doc-rail-in { position: static; } .doc-toc { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1.25rem; } .doc-clauses { padding-left: 2.4rem; } } @media (max-width: 620px) { .faq-ccy { grid-template-columns: minmax(0, 1fr); } .faq-ccy-col { border-left: 0; } .faq-ccy-col + .faq-ccy-col { border-top: 1px solid var(--line); } .doc-clauses { padding-left: 1.9rem; } .doc-ways > li { grid-template-columns: 1.9rem minmax(0, 1fr); } .doc-toc { grid-template-columns: minmax(0, 1fr); } /* the question's mark comes down to 28px and the answer stops hanging under it: at 375px an extra 50px of indent costs the answer nine characters a line, and a justified nine-character loss is what turns even spacing back into rivers. */ .faq-q { gap: .7rem; } .faq-ic { width: 28px; height: 28px; } .faq-ic svg { width: 16px; height: 16px; } .faq-a { padding-left: .25rem; } } /* ============================================================ 8. REDUCED MOTION The global reduce block in XC_Home_v4.css cancels every animation and collapses every transition. Two states here start from a displaced or transparent default and would be stranded by that, so they are landed explicitly. ============================================================ */ @media (prefers-reduced-motion: reduce) { .doc-rule { transform: none; } .faq-item[open] .faq-a { opacity: 1; transform: none; } }