/* ============================================================ Veracue — static-page components. The hand-written pages in public/ (knowledge/, guides/, how-it-works.html) set class="evrd" on and link veracue-tokens.css first, so the palette, nav, buttons, cards and footer all come from the app's own design system. This file adds only what those pages need and the app has no equivalent of: long-form article prose, callouts, the knowledge index cards, and the how-it-works step mockups. Everything here is written against the tokens — no literal palette values. If a colour needs to change, it changes in src/styles/redesign.css and both the app and these pages follow. The article prose deliberately mirrors PolicyDoc.js's rules, so a knowledge article and the privacy policy read as the same document type. Keep them in step. ============================================================ */ /* ---------- Page shell ---------- */ /* Matches .policy-doc: the app's long-form measure and its clearance under the floating nav. */ .evrd .static-page { max-width: 780px; margin: 0 auto; padding: 132px 28px 96px; } /* Index and how-it-works are layouts rather than documents, so they get a wider canvas. */ .evrd .static-page-wide { max-width: 1100px; } .evrd .static-head { text-align: center; margin-bottom: 40px; } .evrd .static-head .h-display { margin: 16px auto 0; max-width: 20ch; } .evrd .static-head .lede { margin: 18px auto 0; text-align: center; } .evrd .static-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-top: 20px; } /* ---------- Article prose ---------- */ .evrd .article h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; color: var(--text-strong); margin: 0 0 14px; padding-top: 26px; border-top: 1px solid var(--line); } .evrd .article > h2:first-child { padding-top: 0; border-top: 0; } .evrd .article h3 { font-size: 16.5px; font-weight: 600; color: var(--text-strong); margin: 26px 0 10px; } .evrd .article p, .evrd .article li { color: var(--text); font-size: 15px; line-height: 1.75; } .evrd .article p { margin: 0 0 14px; } .evrd .article ul, .evrd .article ol { margin: 0 0 16px; padding-left: 24px; } .evrd .article li { margin: 6px 0; } .evrd .article strong { color: var(--text-strong); } .evrd .article a { color: var(--gold); } .evrd .article a:hover { color: var(--gold-bright); } /* Real emphasis in prose stays italic and stays the surrounding colour — the gold accent is a heading device only. Same rule the app applies in FaqPage / PrivacyPolicyPage. */ .evrd .article p em { font-style: italic; color: inherit; } /* Section spacing: the hairline above each h2 does the dividing, so the margin only needs to open the gap. */ .evrd .article h2 + p { margin-top: 0; } /* ---------- Callout ---------- */ /* The gold-tinted aside. Same recipe as the app's research citations: a faint gold wash, a gold rule down the leading edge. */ .evrd .callout { background: var(--gold-soft-2); border: 1px solid var(--gold-line); border-left-width: 2px; border-radius: var(--r-md); padding: 18px 22px; margin: 0 0 18px; } .evrd .callout p:last-child { margin-bottom: 0; } /* ---------- Example blocks ---------- */ .evrd .example { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 22px; margin: 0 0 18px; } .evrd .example p:last-child { margin-bottom: 0; } .evrd .tag { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } /* The "here's the weak version" label. Coral is the app's own this-went-wrong colour (results scoring), so it carries over. */ .evrd .tag.weak { color: var(--coral); } /* ---------- Related links ---------- */ .evrd .related { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px; margin: 48px 0 0; } .evrd .related a { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.005em; line-height: 1.35; color: var(--text-strong); display: block; margin-top: 20px; transition: color 0.15s ease; } .evrd .related a:first-of-type { margin-top: 0; } .evrd .related a:hover { color: var(--gold-bright); } .evrd .related p { font-size: 14px; color: var(--text-dim); margin: 6px 0 0; line-height: 1.6; } /* ---------- Knowledge index ---------- */ .evrd .index-intro { max-width: 720px; margin: 0 auto 40px; } .evrd .index-intro h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; color: var(--text-strong); margin: 0 0 14px; } .evrd .index-intro p { color: var(--text); font-size: 15px; line-height: 1.75; margin: 0 0 14px; } .evrd .index-intro strong { color: var(--text-strong); } .evrd .index-intro a { color: var(--gold); } .evrd .index-intro a:hover { color: var(--gold-bright); } .evrd .k-list { display: grid; gap: 16px; } .evrd .k-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .evrd .k-card { display: block; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 28px; transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; } .evrd .k-card:hover { border-color: var(--gold-line); background: var(--bg-card-hover); transform: translateY(-2px); } .evrd .k-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.005em; line-height: 1.3; color: var(--text-strong); margin: 0 0 10px; transition: color 0.15s ease; } .evrd .k-card:hover h3 { color: var(--gold-bright); } .evrd .k-card p { font-size: 14px; color: var(--text-dim); line-height: 1.65; margin: 0; } /* ---------- Closing CTA ---------- */ /* Same construction as the app's .cta-band on /research. */ .evrd .static-cta { margin-top: 72px; text-align: center; padding: 56px 24px; border: 1px solid var(--gold-line); border-radius: var(--r-xl); background: radial-gradient(50% 100% at 50% 0%, rgba(var(--gold-rgb), 0.10), transparent 70%), var(--bg-card); } .evrd .static-cta h2 { font-family: var(--font-display); font-weight: 500; --host-size: clamp(28px, 3vw, 36px); font-size: var(--host-size); line-height: 1.1; letter-spacing: -0.015em; color: var(--text-strong); margin: 0 0 10px; } .evrd .static-cta p { color: var(--text-dim); margin: 0 auto 26px; max-width: 52ch; font-size: 15.5px; } .evrd .cta-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-top: 20px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .evrd .cta-note span { display: flex; align-items: center; gap: 6px; } .evrd .cta-note span::before { content: '✓'; color: var(--gold); } /* ============================================================ how-it-works.html only ============================================================ */ /* ---------- Step rows ---------- */ .evrd .steps { display: grid; gap: 96px; margin-top: 72px; } .evrd .step-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } /* Alternate which side the mockup sits on, so three stacked rows don't read as one long column. */ .evrd .step-row:nth-child(even) .step-content { order: 2; } .evrd .step-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; } .evrd .step-num::after { content: ''; flex: 1; height: 1px; background: var(--line); } .evrd .step-content h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.015em; color: var(--text-strong); margin: 0 0 14px; } .evrd .step-content > p { color: var(--text); font-size: 15px; line-height: 1.7; margin: 0 0 20px; } .evrd .step-detail { display: flex; flex-direction: column; gap: 12px; } .evrd .step-detail-item { display: flex; gap: 10px; align-items: start; font-size: 14px; color: var(--text-dim); line-height: 1.5; } .evrd .sdi-icon { width: 22px; height: 22px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; font-size: 11px; font-weight: 700; background: var(--gold-soft); color: var(--gold-bright); } .evrd .step-time-tag { display: inline-flex; margin-top: 18px; padding: 6px 14px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; background: var(--bg-elev); border: 1px solid var(--line); color: var(--text-faint); } /* ---------- Step mockups ---------- */ .evrd .step-visual { background: var(--bg-elev); border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-lift); } .evrd .sv-header { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; background: var(--bg); } /* Window-chrome dots. Deliberately not traffic lights — nothing else in the product uses red/amber/green, and three of them shouted louder than the mockup they frame. */ .evrd .sv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); } .evrd .sv-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); } .evrd .sv-body { padding: 24px; } .evrd .sv-body.is-flush { padding: 0; } .evrd .type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .evrd .type-card { padding: 16px; border-radius: var(--r-md); border: 1px solid var(--line); text-align: center; } .evrd .type-card.selected { border-color: var(--gold-line); background: var(--gold-soft-2); } .evrd .type-card .tc-icon { font-size: 22px; margin-bottom: 6px; } .evrd .type-card .tc-name { font-size: 13px; font-weight: 600; color: var(--text-strong); } .evrd .type-card .tc-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; } .evrd .paste-area { margin-top: 12px; padding: 14px; border-radius: var(--r-md); border: 1px dashed var(--line-strong); background: var(--bg); } .evrd .paste-area-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; } .evrd .paste-area-text { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; } .evrd .paste-area-text strong { color: var(--text-strong); } .evrd .live-preview { aspect-ratio: 16 / 9; background: var(--bg); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .evrd .live-preview::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(var(--gold-rgb), 0.14), transparent 60%); } /* The preview is genuinely hidden while recording — the mock says so rather than showing a face and a live score readout. */ .evrd .lp-hidden { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-faint); text-align: center; padding: 0 16px; } .evrd .lp-hidden .lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5; } .evrd .lp-badge { position: absolute; top: 12px; left: 12px; background: var(--gold); color: var(--bg); font-family: var(--font-mono); font-size: 10px; font-weight: 500; padding: 4px 10px; border-radius: var(--r-pill); letter-spacing: 0.12em; text-transform: uppercase; display: flex; align-items: center; gap: 5px; z-index: 1; } .evrd .lp-badge::before { content: ''; width: 4px; height: 4px; background: var(--bg); border-radius: 50%; animation: evStaticBlink 2s ease-in-out infinite; } @keyframes evStaticBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .evrd .lp-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; background: linear-gradient(to top, var(--bg), transparent); } .evrd .lp-metrics { display: flex; gap: 16px; flex-wrap: wrap; } .evrd .lp-metric-text { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); letter-spacing: 0.04em; } /* Results mockup — the shape of the real results page: one readiness score, the weighted tiers beneath it, then the first priority fix. It replaced a timestamped-timeline mock that illustrated a feature the product does not have; don't reintroduce per-moment flags here unless the results page grows them. */ .evrd .score-mock { display: flex; flex-direction: column; gap: 10px; } .evrd .score-mock-head { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); } .evrd .score-mock-num { font-family: var(--font-display); font-weight: 500; font-size: 46px; line-height: 1; letter-spacing: -0.03em; color: var(--gold-bright); } .evrd .score-mock-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); display: flex; flex-direction: column; gap: 4px; } .evrd .score-mock-label span { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text); } .evrd .sm-row { display: flex; align-items: center; gap: 10px; } .evrd .sm-name { flex: 0 0 108px; font-size: 12.5px; color: var(--text-dim); } .evrd .sm-bar { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--line); overflow: hidden; } .evrd .sm-bar > i { display: block; height: 100%; background: var(--gold); opacity: 0.75; } .evrd .sm-val { flex: 0 0 auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); } .evrd .tm-moment { display: flex; gap: 12px; align-items: start; margin-top: 6px; padding: 12px 14px; background: var(--bg); border-radius: var(--r-md); border: 1px solid var(--line); } .evrd .tm-moment-time { font-family: var(--font-mono); font-size: 11px; color: var(--gold); flex-shrink: 0; padding-top: 2px; } .evrd .tm-moment-text { font-size: 13px; color: var(--text-dim); line-height: 1.55; } .evrd .tm-moment-text strong { color: var(--text-strong); font-weight: 600; } /* ---------- Mismatch band ---------- */ .evrd .band { margin-top: 96px; padding: 56px 40px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg-elev); } .evrd .band-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .evrd .band h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; letter-spacing: -0.015em; color: var(--text-strong); margin: 0 0 16px; } .evrd .band p { color: var(--text); font-size: 15px; line-height: 1.7; margin: 0 0 12px; } .evrd .mm-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; } .evrd .mm-tag { padding: 5px 12px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; background: var(--gold-soft-2); color: var(--gold-bright); border: 1px solid var(--gold-line); } .evrd .mm-viz { display: flex; flex-direction: column; gap: 12px; } /* Two named reads, not two proportional bars. The bars carried invented percentages ("Engaged 82%") and a length that implied a measurement; the product reports these as impressions of how you come across, so the illustration says the same thing in words. */ .evrd .mm-read { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); } .evrd .mm-lbl { flex: 0 0 46px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); } .evrd .mm-read-val { font-family: var(--font-display); font-weight: 500; font-size: 20px; letter-spacing: -0.005em; color: var(--text-strong); } .evrd .mm-alert { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 12px 16px; border-radius: var(--r-md); /* was --warm-soft: an amber wash, and --warm is a dark-page score token that must never surface on a marketing page. The alert reads as an alert through its border and icon, both gold, on the same green ground as everything else here. */ background: var(--gold-soft); border: 1px solid var(--line); font-size: 13.5px; color: var(--text); line-height: 1.5; } .evrd .mm-alert svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--gold); } /* ---------- FAQ accordion ---------- */ /* Mirrors .faq-item on the app's /faq page: hairline rows, Fraunces question, native
so it works without script. */ .evrd .faq-block { margin-top: 96px; max-width: 720px; margin-left: auto; margin-right: auto; } .evrd .faq-block > h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -0.015em; color: var(--text-strong); text-align: center; margin: 0 0 32px; } .evrd .faq-item { border-bottom: 1px solid var(--line); padding: 6px 0; } .evrd .faq-item:first-of-type { border-top: 1px solid var(--line); } .evrd .faq-item summary { list-style: none; cursor: pointer; padding: 20px 8px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--text-strong); letter-spacing: -0.005em; line-height: 1.35; } .evrd .faq-item summary::-webkit-details-marker { display: none; } .evrd .faq-item summary::after { content: '+'; flex: 0 0 auto; font-family: var(--font-body); font-size: 20px; line-height: 1; color: var(--gold); transition: transform 0.25s ease; } .evrd .faq-item[open] summary::after { transform: rotate(45deg); } .evrd .faq-item .faq-a { padding: 0 8px 20px; color: var(--text); font-size: 15px; line-height: 1.7; } .evrd .faq-item .faq-a a { color: var(--gold); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 980px) { .evrd .step-row { grid-template-columns: 1fr; gap: 32px; } /* Once stacked, the copy always leads. */ .evrd .step-row:nth-child(even) .step-content { order: 0; } .evrd .band-inner { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 720px) { .evrd .static-page { padding: 96px 20px 64px; } .evrd .static-head { margin-bottom: 28px; } .evrd .static-head .h-display { max-width: none; } .evrd .steps { gap: 64px; margin-top: 48px; } .evrd .band { margin-top: 64px; padding: 36px 22px; border-radius: var(--r-lg); } .evrd .faq-block { margin-top: 64px; } .evrd .static-cta { padding: 40px 20px; border-radius: var(--r-lg); } .evrd .related { padding: 20px 22px; } .evrd .k-card { padding: 20px 22px; } .evrd .type-grid { grid-template-columns: 1fr; } } @media (max-width: 460px) { .evrd .static-page { padding: 88px 16px 56px; } .evrd .cta-note { gap: 10px; font-size: 10px; } .evrd .mm-read { gap: 10px; padding: 12px 14px; } .evrd .mm-lbl { flex-basis: 38px; } .evrd .mm-read-val { font-size: 17px; } .evrd .sm-name { flex-basis: 88px; font-size: 12px; } } /* The blinking recording dot is decoration, not information. */ @media (prefers-reduced-motion: reduce) { .evrd .lp-badge::before { animation: none; } .evrd .k-card:hover { transform: none; } }