/* =========================================================================
v2-trust-v20260508b.css
Impeccable layer for /honest/, /about/, /research/ — Deskrune trust spine.
---
Loaded AFTER style + theme + visual-pass + cinematic + blocks. Last in
cascade so anything here wins without breaking other surfaces.
Scoped to — applies ONLY to trust pages.
---
Principles (the /impeccable lens for trust pages):
1. Quiet manifesto, not marketing.
2. Article-grade type: 17–18px body, 1.7 line-height, ~640px column.
3. "What we don't do" is visually equal to "what we do" (no bold weight
tricks — same scale, same density).
4. WCAG 2.2 AA contrast on every text + link state in light AND dark mode.
5. prefers-reduced-motion: kill all entrance animation on text content.
6. Single accent: brand orange (already wired as --accent #E8735A).
========================================================================= */
/* -------------------------------------------------------------------------
01. Skip-to-content link — landmark accessibility (WCAG 2.4.1)
Visually hidden until focused. First focusable element on the page.
------------------------------------------------------------------------- */
.v2-trust-page .skip-to-content {
position: absolute;
left: -9999px;
top: -9999px;
z-index: 9999;
padding: 12px 18px;
background: var(--accent, #E8735A);
color: #fff;
text-decoration: none;
font-family: inherit;
font-weight: 600;
font-size: 0.95rem;
border-radius: 2px;
outline-offset: 3px;
}
.v2-trust-page .skip-to-content:focus,
.v2-trust-page .skip-to-content:focus-visible {
left: 12px;
top: 12px;
}
/* -------------------------------------------------------------------------
02. Reading column — article max-width ~640px for body prose.
Section containers stay wider for grid layouts; the .prose / generic
/
/ blocks tighten to a literate column. Trust pages are about
reading, not scanning.
------------------------------------------------------------------------- */
.v2-trust-page .section .container.narrow {
max-width: 720px; /* section frame; matches site rhythm */
}
.v2-trust-page .section .prose,
.v2-trust-page .section > .container.narrow > p,
.v2-trust-page .section > .container.narrow > ol,
.v2-trust-page .section > .container.narrow > ul {
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
/* -------------------------------------------------------------------------
03. Body type — 17–18px, line-height 1.7, generous paragraph spacing.
Existing site is ~16px / 1.6. We bump on trust pages because these
pages are read end-to-end.
------------------------------------------------------------------------- */
.v2-trust-page .section .prose p,
.v2-trust-page .section > .container.narrow > p {
font-size: 1.0625rem; /* 17px */
line-height: 1.7;
margin-bottom: 1.25em; /* generous paragraph gutter */
}
@media (min-width: 720px) {
.v2-trust-page .section .prose p,
.v2-trust-page .section > .container.narrow > p {
font-size: 1.125rem; /* 18px on tablet+ */
line-height: 1.72;
}
}
.v2-trust-page .section .prose ul,
.v2-trust-page .section .prose ol,
.v2-trust-page .section > .container.narrow > ul,
.v2-trust-page .section > .container.narrow > ol {
font-size: 1.0625rem;
line-height: 1.7;
}
.v2-trust-page .section .prose li {
margin-bottom: 0.55em;
}
/* -------------------------------------------------------------------------
04. Lede — slightly larger than body but still quiet (no hype scale).
------------------------------------------------------------------------- */
.v2-trust-page .section .lede {
font-size: 1.18rem;
line-height: 1.55;
font-weight: 400;
margin-bottom: 1.6em;
max-width: 640px;
}
/* -------------------------------------------------------------------------
05. Section heading rhythm — calm, not declamatory. Trust pages do not
shout the heading. Same tracking as body, slightly larger size.
------------------------------------------------------------------------- */
.v2-trust-page .section h2 {
font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.05rem);
line-height: 1.22;
letter-spacing: -0.005em;
margin-bottom: 0.7em;
}
/* -------------------------------------------------------------------------
06. "What we don't do" parity — make .not-list / .rejected-list /
.not-numbered-list visually equal in weight to the affirmative pillars.
Same type size as body, no bolded headers shouting, just a quiet hairline
between items. The typographic trick: refusal is as load-bearing as offer.
------------------------------------------------------------------------- */
.v2-trust-page .not-list,
.v2-trust-page .rejected-list,
.v2-trust-page .not-numbered-list {
max-width: 640px;
margin-left: auto;
margin-right: auto;
border-top: 0.5px solid var(--rule-gray, rgba(0,0,0,0.12));
}
.v2-trust-page .not-item,
.v2-trust-page .rejected-item,
.v2-trust-page .not-numbered-list > li {
padding: 22px 0;
border-bottom: 0.5px solid var(--rule-gray, rgba(0,0,0,0.12));
}
.v2-trust-page .not-item h4,
.v2-trust-page .rejected-item h4,
.v2-trust-page .not-numbered-list h3 {
font-size: 1.05rem;
font-weight: 600; /* same weight as a body strong, not display-bold */
line-height: 1.35;
margin: 0 0 6px 0;
letter-spacing: 0;
}
.v2-trust-page .not-item p,
.v2-trust-page .rejected-item p,
.v2-trust-page .not-numbered-list p {
font-size: 1.0625rem;
line-height: 1.65;
margin: 0;
}
/* -------------------------------------------------------------------------
07. Pull-quotes — italic Fraunces-style serif, hairline divider above.
Used on the closing-line in /honest/ and brand-pull strip.
Falls back gracefully if Fraunces isn't loaded.
------------------------------------------------------------------------- */
.v2-trust-page .closing-line,
.v2-trust-page .brand-pull {
font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 1.4rem;
line-height: 1.45;
letter-spacing: -0.01em;
text-align: center;
margin: 2.4em auto 0;
padding-top: 1.6em;
max-width: 560px;
border-top: 0.5px solid var(--rule-gray, rgba(0,0,0,0.18));
}
/* -------------------------------------------------------------------------
08. Citations + footnotes (research page) — numbered superscript references
and back-arrow returns. Smooth scroll respects reduced-motion.
------------------------------------------------------------------------- */
.v2-trust-page .footnote-ref {
vertical-align: super;
font-size: 0.72em;
text-decoration: none;
color: var(--accent-dark, #B0432A);
padding: 0 1px;
}
.v2-trust-page .footnote-ref:hover,
.v2-trust-page .footnote-ref:focus-visible {
text-decoration: underline;
}
.v2-trust-page .footnote-back {
font-size: 0.85rem;
text-decoration: none;
margin-left: 6px;
color: var(--accent-dark, #B0432A);
}
.v2-trust-page .footnote-back::before { content: "↩\fe0e"; margin-right: 2px; }
.v2-trust-page .footnote-back:hover,
.v2-trust-page .footnote-back:focus-visible {
text-decoration: underline;
}
/* Research-list refinement: tighter cite list, monospaced PMID, hairline rows */
.v2-trust-page .research-cites li {
padding: 10px 0;
border-bottom: 0.5px solid var(--rule-gray, rgba(0,0,0,0.10));
font-size: 0.99rem;
line-height: 1.55;
}
.v2-trust-page .research-cites li:last-child { border-bottom: 0; }
.v2-trust-page .rc-meta {
font-family: 'SF Mono', Menlo, Consolas, monospace;
font-size: 0.86em;
letter-spacing: 0.02em;
color: var(--ink-gray, #1F2937);
opacity: 0.78;
white-space: nowrap;
}
/* Smooth-scroll only when user hasn't asked for reduced motion */
@media (prefers-reduced-motion: no-preference) {
.v2-trust-page { scroll-behavior: smooth; }
}
/* -------------------------------------------------------------------------
09. Disclosure block — payment, refund, AI, affiliate.
Quiet, readable in both modes. Not a big rectangle — just a calm
bordered region with hairlines and a "Last updated" stamp.
Place via the .v2-disclosures wrapper below the main content of each page.
------------------------------------------------------------------------- */
.v2-trust-page .v2-disclosures {
max-width: 640px;
margin: 0 auto;
padding: 28px 0 8px;
border-top: 0.5px solid var(--rule-gray, rgba(0,0,0,0.18));
}
.v2-trust-page .v2-disclosures h2 {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-gray, #1F2937);
opacity: 0.7;
margin: 0 0 14px 0;
}
.v2-trust-page .v2-disclosures dl {
margin: 0;
display: grid;
grid-template-columns: 130px 1fr;
gap: 8px 18px;
}
.v2-trust-page .v2-disclosures dt {
font-size: 0.92rem;
font-weight: 600;
color: var(--ink-gray, #1F2937);
letter-spacing: 0.01em;
}
.v2-trust-page .v2-disclosures dd {
margin: 0;
font-size: 0.96rem;
line-height: 1.55;
color: var(--ink-gray, #1F2937);
}
.v2-trust-page .v2-disclosures dd a {
color: var(--accent-dark, #B0432A);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.v2-trust-page .v2-last-updated {
display: block;
margin-top: 18px;
font-size: 0.85rem;
color: var(--ink-gray, #1F2937);
opacity: 0.65;
letter-spacing: 0.02em;
}
@media (max-width: 600px) {
.v2-trust-page .v2-disclosures dl {
grid-template-columns: 1fr;
gap: 4px 0;
}
.v2-trust-page .v2-disclosures dt {
margin-top: 14px;
}
.v2-trust-page .v2-disclosures dt:first-child { margin-top: 0; }
}
/* -------------------------------------------------------------------------
10. Link states — WCAG 2.2 AA on default, hover, focus-visible.
Existing site uses underline + accent-dark; we tighten focus rings.
------------------------------------------------------------------------- */
.v2-trust-page a:focus-visible {
outline: 2px solid var(--accent, #E8735A);
outline-offset: 3px;
border-radius: 1px;
}
.v2-trust-page button:focus-visible {
outline: 2px solid var(--accent, #E8735A);
outline-offset: 2px;
}
/* Underline weight: keep 1px on hover for calmness */
.v2-trust-page .section a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.v2-trust-page .section a:hover {
text-decoration-thickness: 2px;
}
/* -------------------------------------------------------------------------
11. Dark mode — ink-on-cream → off-white-on-dark-paper.
Site already has a [data-theme="dark"] system. We harden contrast for
the prose-heavy trust surfaces. Orange (--accent) is unchanged.
------------------------------------------------------------------------- */
[data-theme="dark"] .v2-trust-page .section .prose p,
[data-theme="dark"] .v2-trust-page .section > .container.narrow > p,
[data-theme="dark"] .v2-trust-page .section > .container.narrow > ul,
[data-theme="dark"] .v2-trust-page .section > .container.narrow > ol {
color: #ECE7DD; /* off-cream on dark paper, ~13.6:1 on #18181a */
}
[data-theme="dark"] .v2-trust-page .section .lede {
color: #ECE7DD;
opacity: 0.92;
}
[data-theme="dark"] .v2-trust-page .not-list,
[data-theme="dark"] .v2-trust-page .rejected-list,
[data-theme="dark"] .v2-trust-page .not-numbered-list,
[data-theme="dark"] .v2-trust-page .v2-disclosures {
border-top-color: rgba(255,255,255,0.16);
}
[data-theme="dark"] .v2-trust-page .not-item,
[data-theme="dark"] .v2-trust-page .rejected-item,
[data-theme="dark"] .v2-trust-page .not-numbered-list > li,
[data-theme="dark"] .v2-trust-page .research-cites li {
border-bottom-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .v2-trust-page .closing-line,
[data-theme="dark"] .v2-trust-page .brand-pull {
border-top-color: rgba(255,255,255,0.18);
color: #ECE7DD;
}
[data-theme="dark"] .v2-trust-page .v2-disclosures dt,
[data-theme="dark"] .v2-trust-page .v2-disclosures dd {
color: #ECE7DD;
}
[data-theme="dark"] .v2-trust-page .v2-last-updated {
color: #ECE7DD;
opacity: 0.55;
}
[data-theme="dark"] .v2-trust-page .rc-meta {
color: #ECE7DD;
opacity: 0.7;
}
[data-theme="dark"] .v2-trust-page a:focus-visible,
[data-theme="dark"] .v2-trust-page button:focus-visible {
outline-color: var(--accent, #E8735A);
}
/* -------------------------------------------------------------------------
12. prefers-reduced-motion — kill entrance animations and parallax on
text content. Trust pages must never feel like marketing-page motion.
------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.v2-trust-page,
.v2-trust-page * {
animation-duration: 0.001ms !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.v2-trust-page .cycle-arrow,
.v2-trust-page .pillar,
.v2-trust-page .research-block,
.v2-trust-page .not-item,
.v2-trust-page .rejected-item {
transform: none !important;
opacity: 1 !important;
}
}
/* -------------------------------------------------------------------------
Mobile — keep type scale; never shrink body below 17px on phone.
Tightening container padding only.
------------------------------------------------------------------------- */
@media (max-width: 600px) {
.v2-trust-page .section .prose p,
.v2-trust-page .section > .container.narrow > p {
font-size: 1.0625rem; /* 17px held; do NOT shrink */
line-height: 1.7;
}
.v2-trust-page .section .lede {
font-size: 1.08rem;
}
.v2-trust-page .section h2 {
font-size: 1.5rem;
}
.v2-trust-page .closing-line,
.v2-trust-page .brand-pull {
font-size: 1.18rem;
}
}