/* VitroVault Trust Centre — trust-page chrome (buyer-facing, supplier-branded). The third chrome (alongside marketing base.html and app base_app.html): minimal, self-contained, no site nav, no marketing. Requires tokens.css + body.surface-trust. Structural shell only (S0); the coverage/document/access COMPONENTS are S1. Matches the delivered W1 mock (Design brief and plan review.zip / draw-*.png). */ /* ---- Layout container ---- */ .tc-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; } .tc-page { min-height: 100vh; display: flex; flex-direction: column; } .tc-main { flex: 1 0 auto; } /* ---- Header: [logo] Name / TRUST CENTRE ............ [Request access] ---- */ .tc-header { border-bottom: 1px solid var(--line); background: var(--card); } .tc-header .tc-wrap { display: flex; align-items: center; gap: 16px; min-height: 72px; } .tc-brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .tc-logo { /* supplier logo tile; supplier accent ground */ width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--sa); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.1rem; flex: none; overflow: hidden; } .tc-logo img { width: 100%; height: 100%; object-fit: contain; } /* The brand text must be able to SHRINK, and `text-overflow: ellipsis` only works on a block. It was set on an inline , where it does nothing, so the name could not truncate and the uppercase, letter-spaced sub-line wrapped and ran straight through the language selector. Visible at 500px and worse in German and French, whose chrome strings are longer than "Trust Centre" (browser run 14, found by G on a phone). `min-width: 0` on the text column for the same reason a flex item with nowrap content refuses to shrink without it. */ .tc-brand > span { min-width: 0; } .tc-brand-name { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.15; color: var(--ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tc-brand-sub { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--label); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tc-header-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; } /* Who this browser is recognised as. Quiet by design — it is a statement of fact, not an action — but present, because the alternative is a page that behaves differently for you and never says why. Sits before the buttons so it reads as context for them. */ .tc-who { margin-left: auto; display: flex; align-items: baseline; gap: 8px; font-size: .82rem; color: var(--ink-2); } .tc-who + .tc-header-actions { margin-left: 14px; } .tc-who b { color: var(--ink); font-weight: 600; } .tc-who button { font: inherit; font-size: .8rem; background: none; border: 0; padding: 0; color: var(--ink-2); text-decoration: underline; cursor: pointer; } .tc-who button:hover { color: var(--ink); } @media (max-width: 720px) { .tc-who { display: none; } } /* ---- Buttons ---- */ .btn { font-family: var(--sans); font-weight: 600; font-size: .92rem; padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; line-height: 1; text-decoration: none; } .btn-accent { background: var(--sa); color: #fff; } /* supplier CTA */ .btn-accent:hover { filter: brightness(.94); text-decoration: none; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { background: var(--wash); text-decoration: none; } /* ---- Currency strip: [mark] Kept current by VITROVAULT · Last updated ---- Three states via a modifier on .tc-currency: (default / .is-current) Managed current — mark shown .is-plain Free/Plus, or Managed overdue = MARK WITHDRAWN — date only .is-overdue date only + older date (public shows NO "in progress" copy) */ .tc-currency { background: var(--wash); border-bottom: 1px solid var(--line); } .tc-currency .tc-wrap { display: flex; align-items: center; gap: 10px; min-height: 46px; font-size: .88rem; color: var(--ink-2); flex-wrap: wrap; } .tc-mark { /* C2 Kept-current mark: quiet, dark, NEVER seal-like */ width: 22px; height: 22px; border-radius: 7px; background: var(--ink); display: grid; place-items: center; flex: none; } .tc-mark svg { width: 12px; height: 12px; display: block; } .tc-currency b { color: var(--ink); font-weight: 600; } .tc-currency .kc-brand { font-family: var(--mono); letter-spacing: .04em; } /* Optically matched, not nominally. `time` is monospaced globally (tokens.css) because a date reads as data, and Spline Sans Mono has a much larger x-height than Albert Sans beside it -- so at the SAME 14.08px "29 Aug 2026" read as bigger than "Last updated" next to it, and sat a pixel high (G, browser run 15). Scaled to match what the eye compares, which is x-height, and nothing else on the row moves. */ .tc-currency time { color: var(--ink); font-size: .93em; } .tc-currency .sep { color: var(--ink-3); } .tc-currency.is-plain .tc-mark, .tc-currency.is-overdue .tc-mark, .tc-currency.is-plain .kc-label, .tc-currency.is-overdue .kc-label, .tc-currency.is-plain .sep, .tc-currency.is-overdue .sep { display: none; } /* ---- Section rhythm ---- */ .tc-section { padding-block: 54px; border-bottom: 1px solid var(--line); } .tc-section:last-of-type { border-bottom: 0; } .tc-section > .tc-wrap > .eyebrow { display: block; margin-bottom: 14px; } .tc-display { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.01em; max-width: 18ch; } /* The one block of running prose on the page, and the only place a buyer reads a paragraph rather than scans a row: comfortable measure, comfortable leading, and dark enough to read through rather than glance at. */ .tc-lede { font-size: 1.08rem; line-height: 1.7; color: var(--ink-body); max-width: 60ch; margin-top: 18px; } .tc-lede p { margin: 0 0 16px; } .tc-lede p:last-child { margin-bottom: 0; } /* Section header with a right-aligned count ("9 of 14 areas covered" — TEXT, never a bar) */ .tc-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .tc-count { font-family: var(--mono); font-size: .82rem; color: var(--ink-2); white-space: nowrap; } /* ---- Footer: Powered by VitroVault ............ Report a concern ---- */ .tc-footer { background: var(--card); border-top: 1px solid var(--line); padding-block: 22px; } .tc-footer .tc-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .84rem; color: var(--ink-2); } .tc-footer a { color: var(--ink-2); } .tc-foot-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } /* A footer control that is a button because it opens a ceremony, and looks like the link beside it because that is what it is to a reader. */ .tc-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-2); cursor: pointer; text-decoration: none; } .tc-linkbtn:hover { text-decoration: underline; color: var(--ink); } /* ---- Security overview: prose + Contact & residency panel (W1, DEV-HANDOVER §4) ---- */ .tc-overview { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; } .tc-side { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); padding: 20px; font-size: .88rem; } .tc-side h3 { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--label); font-weight: 600; margin-bottom: 14px; } .tc-side dl { display: grid; grid-template-columns: auto; gap: 14px; margin: 0; } .tc-side dt { color: var(--label); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; font-family: var(--mono); } .tc-side dd { margin: 2px 0 0; color: var(--ink); } .tc-side a { color: var(--sa-ink); } /* ---- Certifications (full-width grid) ---- */ .tc-certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .tc-cert { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); padding: 16px 18px; } .tc-cert-badge { width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--wash); border: 1px solid var(--line); display: grid; place-items: center; flex: none; font-family: var(--mono); font-size: .62rem; letter-spacing: .04em; color: var(--ink-2); } /* Certification LOGO (official provider mark, or a placeholder emblem in /static/certs). */ .tc-cert-logo { width: 46px; height: 46px; border-radius: var(--r-sm); flex: none; object-fit: contain; display: block; } .tc-cert-name { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--ink); } .tc-cert-valid { font-family: var(--mono); font-size: .8rem; color: var(--ink-2); margin-top: 3px; } /* A certificate that has run out. Stated, not hidden, and not an accusation: the supplier may be mid-renewal. Quiet rather than red — the fact does the work, and a buyer who needs the current one will ask for it. */ .tc-cert.is-expired { border-style: dashed; } .tc-cert.is-expired .tc-cert-name, .tc-cert.is-expired .tc-cert-badge { color: var(--ink-2); } .tc-cert.is-expired .tc-cert-logo { filter: grayscale(1); opacity: .6; } .tc-cert.is-expired .tc-cert-valid { color: var(--warn); } /* The certificate itself, on the card. Quiet: the mark is the headline and this is the way to the paper behind it. */ .tc-cert-body { flex: 1; min-width: 0; } .tc-cert-get { font-family: var(--sans); font-weight: 600; font-size: .78rem; white-space: nowrap; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--card); color: var(--sa-ink); cursor: pointer; } .tc-cert-get:hover { background: var(--wash); } .tc-marks-note { font-size: .82rem; color: var(--ink-2); margin: 18px 0 0; max-width: 66ch; line-height: 1.6; } /* ---- Trusted-by wordmark strip (optional showcase block) ---- */ .tc-logos { display: flex; flex-wrap: wrap; gap: 12px 14px; } .tc-wordmark { display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--ink-2); font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: .01em; } /* ---- Documents (grouped C4 rows in a card) ---- */ .tc-docs { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); overflow: hidden; } /* ---- Subprocessors (plain table + Get notified) ---- */ .tc-subs { width: 100%; border-collapse: collapse; font-size: .9rem; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--card); } .tc-subs th { text-align: left; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--label); font-weight: 500; padding: 13px 18px; background: var(--wash); border-bottom: 1px solid var(--line); } .tc-subs td { padding: 15px 18px; border-bottom: 1px solid var(--line); color: var(--ink); line-height: 1.5; } .tc-subs tr:last-child td { border-bottom: 0; } .tc-subs td a { color: var(--sa-ink); } .tc-subs-scroll { overflow-x: auto; } /* ---- Coverage block visibility: present only when the supplier published it ---- The block is a published, versioned Resource; absent by default (fails closed). */ .tc-coverage { display: none; } body.coverage-published .tc-coverage { display: block; } /* ---- NDA lock state: default locked; .nda-unlocked flips the action label ---- */ body.nda-unlocked .doc-row.is-nda .doc-action[data-locked] { display: none; } body:not(.nda-unlocked) .doc-row.is-nda .doc-action[data-unlocked] { display: none; } /* The coverage legend: small print a buyer must actually be able to read, so it takes the body colour and a measure rather than the tertiary grey small print used to hide in. */ /* TWO BLOCKS side by side (G, 2026-08-22), not one paragraph poured through two columns. CSS columns flow: you read to the foot of the left and continue at the head of the right, which is right for a newspaper and wrong for two short explanations that belong beside each other. A grid puts each idea at the top of its own column, complete, and each is readable on its own. */ .tc-cov-legend { font-size: .84rem; line-height: 1.6; color: var(--ink-body); margin: 16px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 44px; align-items: start; } /* Justified, with hyphenation. Justifying a 500px column at this size without it opens rivers of white space between words — the fix for a ragged right edge should not be a worse ragged middle. The page carries `lang="en-GB"`, which is what lets the browser hyphenate at all. */ .tc-cov-legend p { margin: 0; text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; } .tc-cov-legend b { color: var(--ink); } @media (max-width: 720px) { .tc-cov-legend { grid-template-columns: 1fr; gap: 12px; } } /* ---- FAQ: questions the supplier answered publicly ---- Answers are the longest prose on the page after the overview, so they get the same measure and leading rather than inheriting a default meant for rows. */ .tc-faq { border-bottom: 1px solid var(--line); } .tc-faq > summary { cursor: pointer; font-weight: 600; font-size: 1rem; color: var(--ink); padding: 16px 0; list-style: none; display: flex; align-items: baseline; gap: 10px; } .tc-faq > summary::-webkit-details-marker { display: none; } .tc-faq > summary::before { content: "+"; font-family: var(--mono); color: var(--label); font-weight: 400; flex: none; width: 1ch; } .tc-faq[open] > summary::before { content: "\2212"; } .tc-faq-a { color: var(--ink-body); line-height: 1.7; max-width: 68ch; margin: 0 0 18px calc(1ch + 10px); } /* ---- Responsive ---- */ @media (max-width: 760px) { .tc-overview { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 640px) { /* Three controls and a brand cannot share one row at phone width. They were not wrapping, so they overlapped the brand instead of moving. Give the actions their own row and let them spread across it, which also makes them a comfortable target (browser run 14). */ .tc-header .tc-wrap { min-height: 64px; flex-wrap: wrap; row-gap: 10px; padding-block: 10px; } .tc-brand { flex: 1 1 100%; } .tc-header-actions { margin-left: 0; width: 100%; } .tc-header-actions .btn { padding: 9px 14px; font-size: .86rem; flex: 1 1 auto; text-align: center; } .tc-section { padding-block: 36px; } .tc-display { font-size: clamp(1.7rem, 8vw, 2.2rem); } /* The document row's own responsive rules live in components.css, beside the base rules they override. They were here, and every one of them was DEAD: this file loads before components.css, which redefines .doc-row, .doc-text, .doc-row .chip and .doc-action at equal specificity and therefore wins. The stacking described below never happened, so the title was crushed to a 17px column and read one character per line (browser run 14, found by G). */ .tc-subs th, .tc-subs td { padding: 12px 14px; } } /* A page whose owner has not put anything on it yet. Neutral: the supplier has done nothing wrong, they have just not finished, and a buyer needs to know which of the two silences this is. */ .tc-setup { color: var(--ink-2); border-left: 3px solid var(--line-2); padding-left: 14px; } /* The supplier's own statement of currency. Quiet and factual: it is a date, not a badge, and a page without it is not making a worse claim -- it is making one fewer. */ .tc-confirmed { font-family: var(--mono); font-size: .78rem; color: var(--ink-2); margin: 0 0 10px; } /* The one statement on this page that is OURS. It sits in the supplier's sidebar, so it has to be readable as a different voice without shouting: quieter than their own claims, and never styled like a badge or a mark, which would make it look like something we had certified about them (021/054; G, 2026-08-25 -- as one block with their contact details it read as a fact about the company). */ .tc-hosting { font-size: .84rem; line-height: 1.55; color: var(--ink-2); margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); max-width: 78ch; } /* A subprocessor's name links to their own privacy page where the supplier gave us one. Underlined rather than coloured: this table is read by somebody checking a register, and an underline says "this goes somewhere" without turning the list into a wall of blue. */ .sub-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-2); } .sub-link:hover { text-decoration-color: currentColor; } .sub-ext { font-size: .8em; margin-left: 3px; color: var(--ink-2); } /* The language selector. It was an unstyled browser and keeps its native keyboard and mobile behaviour, which is better than anything a custom dropdown would give us. */ .tc-lang-select { appearance: none; -webkit-appearance: none; font-family: var(--sans); font-weight: 600; font-size: .92rem; line-height: 1; color: var(--ink); background-color: transparent; border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 10px 34px 10px 36px; cursor: pointer; background-repeat: no-repeat, no-repeat; background-position: left 12px center, right 13px center; background-size: 15px 15px, 9px 6px; background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); } .tc-lang-select:hover { background-color: var(--wash); } .tc-lang-select:focus-visible { outline: 2px solid var(--sa); outline-offset: 2px; } @media (max-width: 640px) { .tc-lang-select { padding-right: 30px; padding-left: 32px; } } /* Shown only to a reader whose interface is not the language the supplier wrote in. Quiet: it is a note about provenance, not a warning about the text. */ .tc-orig { font-size: .82rem; color: var(--ink-2); margin: 0 0 10px; } /* The supplier's one-line answer to "what is this?", under the document title. Quieter than the title, louder than the version line: it is the thing that saves a buyer opening the file. */ .doc-about { display: block; font-size: .87rem; line-height: 1.45; color: var(--ink-2); margin: 2px 0 0; max-width: 70ch; } /* The "opens elsewhere" arrow beside a subprocessor's privacy link. Sized to the text and given the muted colour, because it is a hint about the link and not part of its label. */ .sub-link-out { width: .8em; height: .8em; margin-left: 4px; vertical-align: -0.05em; color: var(--ink-2); flex: none; } /* --ink-2, not --ink-3. It is an icon rather than text, but WCAG 1.4.11 still asks 3:1 of non-text content that carries meaning, and --ink-3 is 2.75:1 on white. The readability guard caught it on the way in, which is the second time this week it has caught me. */