/* ========================================================================= BROADSIDE — Ringneck Marketing Website Design System css/broadside.css · v1.0.0 ------------------------------------------------------------------------- The working component library. Real CSS, no build step, no dependencies. Requires tokens/broadside-tokens.css to be loaded first. Every declaration below references a SEMANTIC token. There are no raw hex values, no magic pixel numbers, and no primitive references in this file. That is the contract. If you need a value that isn't here, add a token — don't type the number. Prefix: .rn- Contents A. Reset and base B. Layout — wrap, section, band C. Type primitives D. Buttons and links E. Labels — eyebrow, chip, tag, stamp F. Cards and panels G. Data display — stat, outcome, numbered, authority H. Lists I. Quote and callout J. Sources and legal K. FAQ L. Forms M. Chrome — announcement, header, footer, progress, sticky CTA N. Dialog O. Media — photo frames P. Motion utilities Q. Utilities R. Responsive ========================================================================= */ /* ========================================================================= A. RESET AND BASE ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--surface-canvas); scroll-behavior: smooth; } body { margin: 0; color: var(--text-primary); background: var(--surface-canvas); font-family: var(--font-body); font-size: var(--root-size); line-height: var(--leading-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; /* clip, not hidden: hidden makes a scroll container, which breaks position: sticky and the scrollY read on iOS. hidden stays as fallback. */ overflow-x: hidden; overflow-x: clip; } body.rn-dialog-open { overflow: hidden; } img { display: block; max-width: 100%; } picture { display: contents; } a { color: inherit; } button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } h1, h2, h3, h4, p { margin-top: 0; } h1, h2, h3, h4 { text-wrap: balance; } [hidden] { display: none !important; } ::selection { color: var(--text-on-accent); background: var(--accent-system); } /* Focus is a DUAL ring: a gold outline with a navy halo inside it. No single color clears 3:1 against navy AND paper AND the teal band — gold is 10.6:1 on navy but 1.6:1 on paper, so gold alone is invisible on half the site. The navy halo covers the light grounds; the gold covers the dark one. Never collapse this to a single outline. */ :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 3px var(--focus-halo); } .rn-skip-link { position: fixed; z-index: var(--z-skip); top: var(--space-3); left: var(--space-3); padding: var(--space-3) var(--space-4); color: var(--text-on-accent); background: var(--accent-system); font-weight: var(--weight-bold); text-decoration: none; transform: translateY(-180%); transition: transform var(--duration-fast) ease; } .rn-skip-link:focus { transform: none; } /* ========================================================================= B. LAYOUT The page is a stack of full-bleed BANDS. Each band picks a ground (navy or paper), and content inside it is constrained by .rn-wrap. Never nest a band inside a band. ========================================================================= */ .rn-wrap { width: var(--wrap); margin-inline: auto; } .rn-tight { width: var(--wrap-tight); margin-inline: auto; } .rn-section { position: relative; padding: var(--space-section) 0; } .rn-section--tight { padding: var(--space-section-tight) 0; } .rn-section--flush { padding: 0; } /* --- Grounds. Exactly one per band. --------------------------------- */ .rn-band--navy { color: var(--text-primary); background: var(--surface-canvas); } .rn-band--deep { color: var(--text-primary); background: var(--surface-deep); } .rn-band--raised { color: var(--text-primary); background: var(--surface-raised); } .rn-band--hero { color: var(--text-primary); background: var(--surface-hero); } /* The "discover" ground: gradient + diagonal hatch + a teal dot field */ .rn-band--textured { color: var(--text-primary); background: var(--surface-band-deep); overflow: hidden; } .rn-band--textured::before { position: absolute; inset: 0; opacity: var(--texture-opacity); background-image: var(--texture-dots-teal); background-size: var(--texture-size-lg); content: ""; } /* The closing/deadline ground */ .rn-band--close { color: var(--text-primary); background: var(--surface-band-close); } /* The final CTA ground: a teal halo behind the headline */ .rn-band--halo { color: var(--text-primary); background: var(--surface-band-halo); overflow: hidden; } .rn-band--halo::before { position: absolute; inset: 0; opacity: .09; background-image: var(--texture-dots-teal); background-size: var(--texture-size-lg); content: ""; } /* Paper grounds — the light half of the site */ .rn-band--paper { color: var(--text-ink); background: var(--surface-paper-dotted); background-size: var(--texture-size); } .rn-band--paper-flat { color: var(--text-ink); background: var(--surface-paper); } .rn-band--paper-wash { color: var(--text-ink); background: var(--surface-paper-wash); } .rn-band--white { color: var(--text-ink); background: var(--surface-card); } /* The teal band. High-impact, once per page, always adjacent to a dark band so the jump lands. */ .rn-band--accent { position: relative; color: var(--text-on-accent); background: var(--surface-accent); overflow: hidden; } .rn-band--accent::before { position: absolute; inset: 0; opacity: .11; background-image: var(--texture-dots-navy); background-size: 19px 19px; content: ""; } /* Content inside a textured band needs to sit above the ::before layer */ .rn-band--textured > *, .rn-band--halo > *, .rn-band--accent > * { position: relative; z-index: var(--z-base); } /* ========================================================================= C. TYPE PRIMITIVES Headlines are condensed, all-caps, and set tight. Body copy is Inter at the one true line-height. There is no third option. ========================================================================= */ .rn-display-1, .rn-display-2, .rn-display-3 { margin: 0; color: var(--text-heading); font-family: var(--font-display); font-weight: var(--weight-black); letter-spacing: var(--tracking-tight); text-transform: uppercase; } .rn-display-1 { font-size: var(--text-display-1); line-height: var(--leading-tight); } .rn-display-2 { font-size: var(--text-display-2); line-height: .94; } .rn-display-3 { font-size: var(--text-display-3); line-height: .95; } /* On a paper ground the headline flips to ink. Put this on the element. */ .rn-display-1.rn-on-paper, .rn-display-2.rn-on-paper, .rn-display-3.rn-on-paper { color: var(--text-ink); } /* The second line of a headline, colored. On dark → teal, on paper → orange. One per headline. */ .rn-display-1 em, .rn-display-2 em, .rn-display-3 em { display: block; color: var(--accent-system); font-style: normal; } .rn-display-1 span, .rn-display-2 span, .rn-display-3 span { color: var(--accent-system); } .rn-on-paper em, .rn-on-paper span { color: var(--accent-action); } .rn-h3 { margin: 0; color: var(--text-heading); font-family: var(--font-heading); font-size: var(--text-h3); line-height: var(--leading-snug); } .rn-h4 { margin: 0; color: var(--text-heading); font-family: var(--font-heading); font-size: var(--text-h4); line-height: var(--leading-snug); } .rn-h3.rn-on-paper, .rn-h4.rn-on-paper { color: var(--text-ink); } /* The lead paragraph under a hero headline. Heavier than body, in the heading face. Gold is allowed here on one figure — see .rn-figure. */ .rn-lead { max-width: var(--prose-wide); margin: var(--space-6) 0 0; color: var(--text-secondary); font-family: var(--font-heading); font-size: var(--text-lead); font-weight: var(--weight-medium); letter-spacing: var(--tracking-snug); line-height: var(--leading-normal); } .rn-lead.rn-on-paper { color: var(--text-ink-soft); } /* The single highlighted number inside a lead. One per screen. */ .rn-figure { color: var(--accent-highlight); font-size: 1.15em; } /* A closing statement that carries weight without being a headline. */ .rn-punch { max-width: var(--prose-wide); margin: var(--space-8) auto 0; color: var(--text-heading); font-family: var(--font-heading); font-size: var(--text-punch); font-weight: var(--weight-semi); line-height: var(--leading-normal); } .rn-punch.rn-on-paper { color: var(--text-ink); } .rn-punch strong { color: var(--accent-action); } .rn-punch.rn-on-paper strong { color: var(--accent-action-ink); } .rn-sub { max-width: var(--prose-max); margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); } .rn-sub.rn-on-paper { color: var(--text-ink-soft); } /* Section head — eyebrow + headline + optional deck, centered. */ .rn-section-head { position: relative; z-index: var(--z-base); max-width: var(--prose-wide); margin-inline: auto; text-align: center; } .rn-section-head .rn-eyebrow { margin-bottom: var(--space-4); justify-content: center; } .rn-section-head > p:not(.rn-eyebrow) { max-width: var(--prose-max); margin: var(--space-5) auto 0; color: var(--text-muted); } .rn-section-head.rn-on-paper > p:not(.rn-eyebrow) { color: var(--text-ink-soft); } /* A rule-flanked word. Print device — one per page, maximum. */ .rn-rule-row { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin: var(--space-7) auto 0; color: var(--text-ink); font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 3.4rem); font-weight: var(--weight-black); text-transform: uppercase; } .rn-rule-row::before, .rn-rule-row::after { width: min(230px, 24vw); height: 3px; background: currentColor; content: ""; } /* ========================================================================= D. BUTTONS AND LINKS There is ONE button in this system and it is orange. A second button style would dilute the only signal the page has for "do this now". Secondary actions are text links, not buttons. ========================================================================= */ .rn-btn { min-height: 62px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5) var(--space-7); border: 0; border-radius: var(--radius-button); color: var(--text-on-action); /* Gradient runs action → press, NOT hi → action. The lighter #ff704e top put the label at 2.7:1, below even the large-text floor. This ordering keeps the dimensional look and clears 3:1 across the whole face. */ background: linear-gradient(180deg, var(--accent-action), var(--accent-action-press)); box-shadow: var(--shadow-button); font-family: var(--font-heading); /* 19px is not arbitrary — it is the WCAG large-text threshold, and it is what makes white-on-brand-orange legal. Do not reduce it. */ font-size: var(--text-button); font-weight: var(--weight-black); letter-spacing: .045em; line-height: 1; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) ease, filter var(--duration-fast) ease; } /* The arrow is part of the button, not the label. Don't type "→" in copy. */ .rn-btn::after { font-size: 1.15rem; content: "→"; } .rn-btn:hover { filter: brightness(1.05); transform: translateY(var(--lift-hover)); box-shadow: var(--shadow-button-hover); } .rn-btn:active { transform: translateY(var(--lift-press)); box-shadow: var(--shadow-button-press); } .rn-btn:disabled, .rn-btn[aria-disabled="true"] { cursor: wait; opacity: .7; } .rn-btn--wide { width: min(520px, 100%); } .rn-btn--full { width: 100%; } .rn-btn--bare::after { content: none; } /* A quiet action. Text, not a box. Use for "read the transcript" style secondary paths so the orange button stays the only button. */ .rn-link { color: var(--accent-system); font-family: var(--font-heading); font-weight: var(--weight-semi); text-decoration-thickness: 1px; text-underline-offset: 3px; } .rn-link:hover { color: var(--text-heading); } .rn-link.rn-on-paper { color: var(--accent-system-ink); } .rn-link.rn-on-paper:hover { color: var(--text-ink); } .rn-action-block { margin-top: var(--space-7); } .rn-action-block .rn-btn { width: min(520px, 100%); } .rn-center-action { margin-top: var(--space-7); text-align: center; } /* The reassurance line under a button. Always mono, always small, always removes an objection ("First name and email. That's the whole form."). */ .rn-micro { margin: var(--space-3) 0 0; color: var(--text-faint); font-family: var(--font-mono); font-size: var(--text-legal); letter-spacing: .03em; } /* Phone number as a display element */ .rn-phone { display: inline-block; margin-top: var(--space-7); color: var(--text-on-accent); font-family: var(--font-display); font-size: clamp(3rem, 6.8vw, 6.5rem); font-weight: var(--weight-black); letter-spacing: var(--tracking-slam); line-height: 1; text-decoration: none; } .rn-phone:hover { color: var(--accent-system-deep); } /* ========================================================================= E. LABELS — eyebrow, chip, tag, stamp, outlined title These carry the "field research / broadsheet" character of the brand. All of them are mono or condensed, all-caps, and tightly tracked. ========================================================================= */ /* Eyebrow: a mono kicker with a glowing dot. Announces who a section is for. One per section, directly above the headline. */ .rn-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: var(--accent-system); font-family: var(--font-mono); font-size: var(--text-3xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-widest); line-height: 1.4; text-transform: uppercase; } .rn-eyebrow::before { width: 7px; height: 7px; border-radius: var(--radius-dot); background: currentColor; box-shadow: 0 0 13px currentColor; content: ""; } .rn-eyebrow.rn-on-paper { color: var(--accent-system-ink); } .rn-eyebrow.rn-on-accent { color: var(--text-on-accent-eyebrow); } .rn-eyebrow.rn-on-accent::before { box-shadow: none; } /* Outlined, tilted event title. The "poster" device. Use for a campaign or offer name — never for a section label. */ .rn-event-title { display: inline-block; margin: 0 0 var(--space-5); padding: 7px 14px 6px; border: var(--border-width-thick) solid var(--accent-system); color: var(--accent-system); font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.8rem); font-weight: var(--weight-black); letter-spacing: .1em; line-height: 1; text-transform: uppercase; transform: var(--tilt-slight); } /* Live/status chip — pill, teal, tilted. Reserved for genuine state ("On demand", "Live Thursday"). Never decorative. */ .rn-chip { display: inline-block; padding: 9px 13px; border-radius: var(--radius-pill); color: var(--text-on-accent); background: var(--accent-system); box-shadow: var(--glow-teal-soft); font-family: var(--font-mono); font-size: var(--text-4xs); font-weight: var(--weight-heavy); letter-spacing: .1em; text-transform: uppercase; } .rn-chip--tilted { transform: var(--tilt-left-lg); } /* Format tags — the "30 minutes / Free / One live demo" row. Sets expectations before the click. */ .rn-tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); } .rn-tag { padding: 7px 10px; border: var(--border-width-hair) solid var(--border-on-dark-strong); border-radius: var(--radius-chip); color: var(--text-secondary); background: var(--fill-on-dark-subtle); font-family: var(--font-mono); font-size: var(--text-5xs); letter-spacing: .045em; text-transform: uppercase; } /* Rubber stamp — rotated, outlined, orange. Credibility mark on a photo. */ .rn-stamp { display: inline-block; padding: 13px 16px; border: 3px solid var(--accent-action); color: var(--accent-action); background: var(--surface-card); font-family: var(--font-display); font-size: 1rem; font-weight: var(--weight-black); letter-spacing: .08em; text-transform: uppercase; transform: var(--tilt-right); } /* Status dot link — the "talk to our AI agent" header treatment */ .rn-status-link { display: inline-flex; align-items: center; gap: 10px; color: var(--text-secondary); font-family: var(--font-mono); font-size: .65rem; font-weight: var(--weight-semi); letter-spacing: .07em; text-decoration: none; text-transform: uppercase; white-space: nowrap; } .rn-status-link::before { width: 8px; height: 8px; border-radius: var(--radius-dot); background: var(--accent-system); box-shadow: var(--glow-teal); content: ""; } .rn-status-link strong { color: var(--accent-system); } .rn-status-link:hover, .rn-status-link:hover strong { color: var(--text-heading); } /* ========================================================================= F. CARDS AND PANELS Cards are SQUARE. No radius. They earn separation from shadow and rule, not from rounding. A rounded card is off-brand. ========================================================================= */ .rn-card { padding: var(--space-card); border: var(--border-width-hair) solid var(--border-on-paper); color: var(--text-ink); background: var(--surface-card); box-shadow: var(--shadow-card); } .rn-card--sm { padding: var(--space-card-sm); } .rn-card--center { text-align: center; } /* The inverted panel — used as the "who this isn't for" counterweight beside a white card. */ .rn-card--navy { color: var(--text-primary); background: var(--surface-raised); border-color: var(--border-on-dark-strong); } .rn-card--navy .rn-h3, .rn-card--navy .rn-h4 { color: var(--text-heading); } /* Two-panel comparison: the affirmative card is wider than the negative. That ratio is intentional — you are not giving equal weight to "no". */ .rn-split { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr); gap: var(--gap-panel); margin-top: var(--space-block); } .rn-split--even { grid-template-columns: 1fr 1fr; } /* Media + copy layouts */ .rn-duo { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); align-items: center; gap: var(--space-gutter); } .rn-duo--copy-first { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } .rn-duo--wide-copy { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); } .rn-duo--poster { grid-template-columns: minmax(225px, .55fr) minmax(0, 1.45fr); } /* A closing line inside a dark panel, separated by a rule. */ .rn-panel-close { margin: var(--space-6) 0 0; padding-top: var(--space-6); border-top: var(--border-width-hair) solid var(--border-on-dark-strong); color: var(--text-heading); font-family: var(--font-heading); font-weight: var(--weight-book); } /* ========================================================================= G. DATA DISPLAY Numbers are the argument on this site. They get the condensed face, the biggest size on the card, and a color from the role map: orange when the number is the problem, teal when the number is the proof. ========================================================================= */ .rn-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-card); margin-top: var(--space-block); } .rn-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-tight); margin-top: var(--space-7); } .rn-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-card); margin-top: var(--space-block); } /* Stat card — a big figure, a colored cap, one sentence of context. Alternate orange/teal down the row using --alt on every second card. */ .rn-stat { padding: var(--space-6) var(--space-5); border-top: var(--border-width-cap) solid var(--accent-action); color: var(--text-ink); background: var(--surface-card); box-shadow: var(--shadow-stat); text-align: left; } .rn-stat strong { display: block; color: var(--accent-action-display); font-family: var(--font-display); font-size: var(--text-stat); font-weight: var(--weight-black); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); } .rn-stat p { margin: var(--space-4) 0 0; color: var(--text-ink-soft); font-size: var(--text-xs); line-height: 1.5; } .rn-stat p b { color: var(--text-ink); } /* Teal variant — the number that is PROOF rather than problem. There is deliberately NO automatic alternation here. Color follows the role map, and the role map follows meaning: whether a figure is orange or teal depends on what it says, not on where it sits in the row. Alternating by position produces rows where the good number is the alarm color. */ .rn-stat--alt { border-top-color: var(--accent-system-ink); } .rn-stat--alt strong { color: var(--accent-system-display); } /* Outcome card — what they'll get. Teal-capped by default; the alternating orange keeps a four-across row from reading as a wall. */ .rn-outcome { padding: var(--space-6) var(--space-5); border: var(--border-width-hair) solid var(--border-on-paper); border-top: var(--border-width-cap) solid var(--accent-system-ink); background: var(--surface-paper); text-align: left; } .rn-outcome b { display: block; color: var(--accent-system-ink); font-family: var(--font-display); font-size: 1.8rem; font-weight: var(--weight-black); line-height: 1; } .rn-outcome h3 { margin: var(--space-3) 0 0; color: var(--text-ink); font-family: var(--font-heading); font-size: var(--text-h6); line-height: 1.2; } .rn-outcome p { margin: 9px 0 0; color: var(--text-ink-soft); font-size: .77rem; line-height: 1.5; } /* Orange variant. Outcome cards are all promises, so alternation here IS purely rhythmic — apply it by hand to every second card to keep a four-across row from reading as a wall. */ .rn-outcome--alt { border-top-color: var(--accent-action); } .rn-outcome--alt b { color: var(--accent-action-display); } /* Numbered card — the "here's what you'll learn" stack. The number badge overlaps the top edge and must sit on a band, not on another card. */ .rn-numbered-stack { position: relative; z-index: var(--z-base); display: grid; gap: var(--gap-stack); width: min(900px, 100%); margin: clamp(48px, 6vw, 76px) auto 0; } .rn-numbered { position: relative; padding: var(--space-9) var(--space-9) var(--space-8); border-bottom: var(--border-width-accent) solid var(--accent-action); color: var(--text-ink); background: var(--surface-card); box-shadow: var(--shadow-float); text-align: center; } .rn-numbered__badge { position: absolute; top: -26px; left: 50%; width: 58px; height: 58px; display: grid; place-items: center; border: var(--border-width-cap) solid var(--surface-raised); border-radius: var(--radius-dot); color: var(--text-on-action); background: var(--accent-action); font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--weight-black); transform: translateX(-50%); } .rn-numbered__label { margin: var(--space-1) 0 0; color: var(--accent-system-ink); font-family: var(--font-mono); font-size: var(--text-4xs); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .rn-numbered h3 { margin: var(--space-2) 0 0; color: var(--text-ink); font-family: var(--font-heading); font-size: var(--text-h4); line-height: var(--leading-snug); } .rn-numbered p { max-width: 760px; margin: var(--space-4) auto 0; color: var(--text-ink-soft); } .rn-numbered strong { color: var(--text-ink); } .rn-numbered em { color: var(--accent-action-ink); font-style: italic; } /* Tilted numeral block — a single dramatic figure with a mono caption. */ .rn-numeral-block { padding: var(--space-6) var(--space-6); border: var(--border-width-thick) solid var(--text-ink); color: var(--text-ink); text-align: center; transform: var(--tilt-left); } .rn-numeral-block strong { display: block; font-family: var(--font-display); font-size: var(--text-numeral); font-weight: var(--weight-black); letter-spacing: -.05em; line-height: var(--leading-slam); } .rn-numeral-block span { display: block; margin-top: var(--space-2); color: var(--accent-action-ink); font-family: var(--font-mono); font-size: var(--text-4xs); font-weight: var(--weight-bold); letter-spacing: .15em; text-transform: uppercase; } /* Date poster — the deadline device, on dark ground. */ .rn-poster { padding: var(--space-7) var(--space-6); border: var(--border-width-poster) solid var(--accent-action); background: var(--fill-on-dark-subtle); text-align: center; transform: var(--tilt-left); } .rn-poster small { display: block; color: var(--text-on-action-soft); font-family: var(--font-mono); font-size: var(--text-5xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .rn-poster strong { display: block; margin-top: var(--space-3); color: var(--text-heading); font-family: var(--font-display); font-size: var(--text-numeral); font-weight: var(--weight-black); letter-spacing: var(--tracking-slam); line-height: var(--leading-slam); text-transform: uppercase; } .rn-poster span { display: block; margin-top: var(--space-3); color: var(--accent-highlight); font-family: var(--font-mono); font-size: .67rem; font-weight: var(--weight-bold); letter-spacing: .1em; text-transform: uppercase; } /* Small outcome tiles — three-across micro results */ .rn-tile { padding: var(--space-3) 13px; border: var(--border-width-hair) solid var(--border-on-paper); background: var(--surface-paper-alt); text-align: center; } .rn-tile b { display: block; color: var(--accent-action-ink); font-family: var(--font-display); font-size: 1.45rem; } .rn-tile span { color: var(--text-ink-soft); font-size: .75rem; } .rn-tile--win { border-color: rgba(10, 156, 144, .45); background: var(--status-positive-bg); } .rn-tile--win b { color: var(--status-positive); } /* Credential row — three capped tiles under a bio */ .rn-credential { padding: 13px 11px; border-top: var(--border-width-accent) solid var(--accent-system-ink); color: var(--text-ink); background: var(--surface-paper-alt); text-align: center; } .rn-credential b { display: block; font-family: var(--font-display); font-size: 1.3rem; } .rn-credential span { display: block; margin-top: 3px; color: var(--text-ink-soft); font-size: var(--text-4xs); line-height: 1.3; } /* Research bar — the "as featured in" strip. Names only, no logos. */ .rn-research-bar { padding: var(--space-6) 0; color: var(--text-faint); background: var(--surface-deep); } .rn-research-bar__inner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-7); } .rn-research-bar__label { font-family: var(--font-mono); font-size: var(--text-5xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap; } .rn-research-bar__names { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); } .rn-research-bar__names span { color: var(--text-primary); font-family: var(--font-heading); font-size: clamp(.78rem, 1.3vw, 1rem); font-weight: var(--weight-semi); white-space: nowrap; } /* ========================================================================= H. LISTS Two list types, and they are a pair: the check list says who this is for, the cross list says who it isn't. Never use the cross list alone. ========================================================================= */ .rn-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; } .rn-list li { position: relative; padding-left: var(--space-8); color: var(--text-ink-soft); } .rn-list li::before { position: absolute; top: 1px; left: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--radius-dot); color: var(--text-on-action); background: var(--accent-system-ink); font-size: var(--text-2xs); font-weight: var(--weight-black); content: "✓"; } .rn-list li strong { color: var(--text-ink); } .rn-list--cross li::before { color: var(--text-on-action-soft); background: var(--accent-action-press); content: "×"; } /* On a dark panel */ .rn-card--navy .rn-list li { color: var(--text-secondary); } .rn-card--navy .rn-list li strong { color: var(--text-heading); } /* Rule-led list — the "what the funding covers" treatment */ .rn-rule-list { display: grid; gap: 9px; margin: var(--space-6) 0 0; padding: 0; list-style: none; } .rn-rule-list li { padding: 13px var(--space-4); border-left: var(--border-width-accent) solid var(--accent-action); color: var(--text-secondary); background: var(--fill-on-dark); } .rn-rule-list strong { color: var(--text-heading); } /* ========================================================================= I. QUOTE AND CALLOUT ========================================================================= */ .rn-quote-band { padding: var(--space-section-tight) 0; color: var(--text-heading); background: var(--surface-raised); text-align: center; } .rn-quote-band blockquote { max-width: 980px; margin: 0 auto; font-family: var(--font-heading); font-size: var(--text-h2-alt); font-weight: var(--weight-semi); letter-spacing: -.02em; line-height: var(--leading-normal); } .rn-quote-band blockquote strong { color: var(--accent-system); } .rn-quote-band cite { display: block; margin-top: var(--space-6); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-4xs); font-style: normal; letter-spacing: .1em; text-transform: uppercase; } /* A caption clipped to the edge of a photo */ .rn-caption { padding: 13px 17px; border-left: var(--border-width-accent) solid var(--accent-system); color: var(--text-primary); background: rgba(2, 19, 26, .95); box-shadow: var(--shadow-tag); font-size: var(--text-2xs); line-height: var(--leading-normal); } .rn-caption strong { display: block; color: var(--text-heading); font-family: var(--font-heading); font-size: 1rem; letter-spacing: .02em; } /* ========================================================================= J. SOURCES AND LEGAL This brand argues with numbers, so it shows its work. Every statistic on the page has a source note within one section of it. Non-negotiable — see docs/04-content-and-accessibility.md. ========================================================================= */ .rn-source-note { max-width: var(--prose-wide); margin: var(--space-6) auto 0; color: var(--text-faint); font-family: var(--font-mono); font-size: var(--text-legal); line-height: 1.55; } .rn-source-note.rn-on-paper { color: var(--text-ink-faint); } .rn-source-sheet { padding: var(--space-7); border: var(--border-width-hair) solid var(--border-on-paper); border-top: var(--border-width-frame) solid var(--accent-system-ink); background: var(--surface-paper); box-shadow: var(--shadow-card); } .rn-source-sheet__head { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--border-width-hair) solid var(--border-on-paper); color: var(--text-ink-soft); font-family: var(--font-mono); font-size: var(--text-5xs); letter-spacing: .12em; text-transform: uppercase; } .rn-source-sheet__head strong { color: var(--accent-system-ink); } .rn-source-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: 13px 0; border-bottom: var(--border-width-hair) solid var(--border-on-paper); color: var(--text-ink); font-family: var(--font-heading); font-weight: var(--weight-semi); } .rn-source-row span { color: var(--text-ink-soft); font-family: var(--font-mono); font-size: var(--text-5xs); font-weight: var(--weight-regular); text-align: right; } /* ========================================================================= K. FAQ Native

. No JavaScript, works without it, keyboard-accessible for free. Do not replace with a custom accordion. ========================================================================= */ .rn-faq { margin-top: var(--space-9); border-top: var(--border-width-hair) solid var(--border-on-paper); } .rn-faq details { border-bottom: var(--border-width-hair) solid var(--border-on-paper); } .rn-faq summary { position: relative; padding: var(--space-6) var(--space-10) var(--space-6) 0; color: var(--text-ink); font-family: var(--font-heading); font-size: var(--text-h5); font-weight: var(--weight-semi); list-style: none; cursor: pointer; } .rn-faq summary::-webkit-details-marker { display: none; } .rn-faq summary::after { position: absolute; top: 18px; right: 2px; width: 34px; height: 34px; display: grid; place-items: center; border: var(--border-width-thick) solid var(--text-ink); border-radius: var(--radius-dot); color: var(--text-ink); font-family: var(--font-mono); content: "+"; transition: transform var(--duration-fast) ease, background var(--duration-fast) ease; } .rn-faq details[open] summary::after { color: var(--text-on-action); background: var(--accent-action); border-color: var(--accent-action); transform: rotate(45deg); } .rn-faq__answer { max-width: 780px; padding: 0 54px var(--space-6) 0; color: var(--text-ink-soft); } .rn-faq__answer p { margin: 0; } /* ========================================================================= L. FORMS Short forms only. The system's promise is "first name and email, that's the whole form" — a third field needs a reason. ========================================================================= */ .rn-form { width: min(650px, 100%); margin: var(--space-8) auto 0; padding: var(--space-6); border: var(--border-width-hair) solid var(--border-teal); border-top: var(--border-width-cap) solid var(--accent-system); background: var(--surface-form); box-shadow: var(--shadow-form); text-align: left; } .rn-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-card); } .rn-field { display: grid; gap: 7px; } .rn-field label { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-5xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; } .rn-field input, .rn-field select, .rn-field textarea { width: 100%; min-height: 54px; padding: 13px var(--space-3); border: var(--border-width-hair) solid var(--border-on-dark-input); border-radius: var(--radius-input); color: var(--text-heading); background: var(--surface-sunken); } .rn-field input::placeholder { color: var(--text-faint); } .rn-field input:focus, .rn-field select:focus, .rn-field textarea:focus { outline: 0; border-color: var(--accent-system); box-shadow: var(--ring-focus); } .rn-form .rn-btn { width: 100%; margin-top: var(--space-3); } .rn-form[aria-busy="true"] .rn-btn { cursor: wait; opacity: .72; } .rn-form__note { margin: var(--space-3) 0 0; color: var(--text-faint); font-family: var(--font-mono); font-size: var(--text-legal); text-align: center; } .rn-form__error { margin: var(--space-3) 0 0; padding: 11px 13px; border: var(--border-width-hair) solid var(--status-negative-line); color: var(--status-negative-text); background: var(--status-negative-bg); font-size: var(--text-xs); text-align: center; } .rn-form__error a, .rn-form__result a { color: var(--accent-system); } .rn-form__result { padding: var(--space-6) var(--space-3); text-align: center; } .rn-form__result strong { display: block; color: var(--accent-system); font-family: var(--font-heading); font-size: 1.4rem; } .rn-form__result p { margin: 9px 0 0; color: var(--text-muted); font-size: var(--text-ms); } /* Postscripts — the P.S. block under a final CTA. Direct-response device; two maximum, each one a distinct objection. */ .rn-postscripts { max-width: 780px; margin: var(--space-8) auto 0; padding-top: var(--space-6); border-top: var(--border-width-hair) solid var(--border-on-dark); text-align: left; } .rn-postscripts p { margin: 0; color: var(--text-muted); } .rn-postscripts p + p { margin-top: var(--space-3); } .rn-postscripts strong { color: var(--text-heading); } /* ========================================================================= M. CHROME ========================================================================= */ .rn-announcement { padding: var(--space-2) var(--space-4); color: var(--text-on-action); background: var(--accent-action); font-family: var(--font-heading); font-size: var(--text-2xs); font-weight: var(--weight-heavy); letter-spacing: .08em; text-align: center; text-transform: uppercase; } .rn-announcement span { color: var(--text-on-action-soft); font-weight: var(--weight-book); } .rn-header { position: relative; z-index: var(--z-header); border-bottom: var(--border-width-hair) solid var(--border-on-dark); background: rgba(4, 24, 32, .96); } .rn-nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); } .rn-brand { display: inline-flex; align-items: center; } .rn-brand img { width: auto; height: 40px; } .rn-footer { padding: var(--space-7) 0; border-top: var(--border-width-hair) solid var(--border-on-dark); color: var(--text-micro); background: var(--surface-footer); font-size: var(--text-legal); } .rn-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); } .rn-footer__inner p { margin: 0; } .rn-footer__contact { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2) 17px; } .rn-footer__contact a { color: var(--text-secondary); text-decoration: none; } .rn-footer__contact a:hover { color: var(--accent-system); } /* Scroll progress — the only place all three accents appear together. */ .rn-progress { position: fixed; z-index: var(--z-progress); top: 0; left: 0; width: 100%; height: 3px; pointer-events: none; } .rn-progress span { display: block; width: 100%; height: 100%; background: var(--spark-progress); transform: scaleX(0); transform-origin: left; } /* Sticky mobile CTA — appears below 760px once the hero button scrolls off */ .rn-sticky-cta { position: fixed; z-index: var(--z-sticky-cta); right: var(--space-3); bottom: var(--space-3); left: var(--space-3); display: none; min-height: 52px; align-items: center; justify-content: center; border-radius: var(--radius-cta); color: var(--text-on-action); background: var(--accent-action); box-shadow: var(--shadow-sticky); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-black); letter-spacing: .05em; text-decoration: none; text-transform: uppercase; transform: translateY(130%); transition: transform var(--duration-mid) var(--ease); } .rn-sticky-cta.rn-visible { transform: none; } /* ========================================================================= N. DIALOG Native