/** * Subscribe — editorial register (Wave 5A) * / epic-mox7htc0-toy13 * * Loaded ONLY on the /subscribe page after subscribe.css. Overrides catalog * defaults to bring the page into the editorial register: typographic hero, * hairline tier cards, gold editorial-mark on the recommended tier, mono * numbered prefixes, pull-quote testimonial above the final CTA. * * Discipline: zero hex / px / rgba literals — all surfaces, type and rhythm * via Wave 0 design-system tokens (FINAL-DS §F.13). * * Author: implementer * Date: 2026-05-08 */ /* =========================================================== * Page surface — editorial background activates only when * data-page-context="editorial" is set on . * =========================================================== */ body[data-page-context="editorial"].subscribe-page { background: var(--color-bg-editorial); } body[data-page-context="editorial"] .subscribe-page__main { background: var(--color-bg-editorial); } /* =========================================================== * §1 Hero — typographic, no portrait, display-serif with * vertical spine via .col-ruled (). * =========================================================== */ body[data-page-context="editorial"] .sub-hero { padding-top: calc(var(--header-h) + var(--space-16)); padding-bottom: var(--space-16); text-align: left; background: var(--color-bg-editorial); } @media (min-width: 768px) { body[data-page-context="editorial"] .sub-hero { padding-top: calc(var(--header-h) + var(--space-20)); padding-bottom: var(--space-20); } } body[data-page-context="editorial"] .sub-hero__title { font-family: var(--font-display); font-size: var(--text-6xl); font-weight: var(--font-weight-normal); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-tight); color: var(--color-text); text-wrap: balance; margin: 0 0 var(--space-6); } @media (min-width: 1024px) { body[data-page-context="editorial"] .sub-hero__title { font-size: var(--text-7xl); } } body[data-page-context="editorial"] .sub-hero__title em { font-style: italic; color: var(--color-editorial-mark); } body[data-page-context="editorial"] .sub-hero__subtitle { font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--line-height-prose); color: var(--color-text-secondary); max-width: 66ch; margin: 0; } /* =========================================================== * §2 Tier cards — hairline editorial columns, no shadow, * gold editorial-mark + rotated EDITOR'S CHOICE label on * recommended (Founder decision: BOTH ornaments). * =========================================================== */ body[data-page-context="editorial"] .sub-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; row-gap: var(--space-8); } @media (min-width: 768px) { body[data-page-context="editorial"] .sub-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: 0; } } body[data-page-context="editorial"] .sub-card { position: relative; padding: var(--space-8) var(--space-6); background: transparent; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; box-shadow: none; transition: border-color var(--duration-entry) var(--ease-standard); } body[data-page-context="editorial"] .sub-card:hover, body[data-page-context="editorial"] .sub-card:focus-within { border-top-color: var(--color-text); box-shadow: none; } body[data-page-context="editorial"] .sub-card--recommended { /* gold editorial-mark left border decision 2026-05-08 */ border-left: 4px solid var(--color-editorial-mark); padding-left: var(--space-8); } body[data-page-context="editorial"] .sub-card--selected, body[data-page-context="editorial"] .sub-card--current { /* selection / current state via gold border-top — no glow */ border-top-color: var(--color-editorial-mark); box-shadow: none; } /* Numbered mono prefix — sits above tier name */ body[data-page-context="editorial"] .sub-card__num { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3); } /* Tier name — display serif (matches section-mast register) */ body[data-page-context="editorial"] .sub-card__name { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--font-weight-normal); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-tight); color: var(--color-text); margin: 0 0 var(--space-2); } /* Price — display serif numerals with mono period suffix */ body[data-page-context="editorial"] .sub-card__price { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--font-weight-normal); line-height: 1; color: var(--color-text); margin: 0 0 var(--space-6); } body[data-page-context="editorial"] .sub-card__price-currency { font-size: var(--text-2xl); color: var(--color-text-secondary); vertical-align: top; margin-right: var(--space-1); } body[data-page-context="editorial"] .sub-card__price-amount { font-family: var(--font-display); } body[data-page-context="editorial"] .sub-card__price-period { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-weight-normal); color: var(--color-text-secondary); text-transform: lowercase; letter-spacing: var(--letter-spacing-caps); margin-left: var(--space-1); } /* Vertical-label "EDITOR'S CHOICE" — rotated mono caps. Anchored to the top-right of the card and uses gold accent variant. */ body[data-page-context="editorial"] .sub-card__choice { position: absolute; top: var(--space-4); right: var(--space-3); background: var(--color-bg-editorial); } /* Features list — prose register with hairline check icon */ body[data-page-context="editorial"] .sub-card__features { list-style: none; padding: 0; margin: 0 0 var(--space-6); font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--line-height-prose); color: var(--color-text); } body[data-page-context="editorial"] .sub-card__feature { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); } body[data-page-context="editorial"] .sub-card__feature:last-child { border-bottom: 0; } body[data-page-context="editorial"] .sub-card__check { flex-shrink: 0; color: var(--color-editorial-mark); margin-top: var(--space-1); } /* CTA button — hairline outline, fills with gold on hover */ body[data-page-context="editorial"] .sub-card__btn { display: inline-block; width: 100%; padding: var(--space-3) var(--space-6); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: var(--color-text); background: transparent; border: 1px solid var(--color-border); border-radius: 0; cursor: pointer; transition: background var(--duration-entry) var(--ease-standard), color var(--duration-entry) var(--ease-standard), border-color var(--duration-entry) var(--ease-standard); } body[data-page-context="editorial"] .sub-card__btn:hover, body[data-page-context="editorial"] .sub-card__btn:focus-visible { background: var(--color-editorial-mark); border-color: var(--color-editorial-mark); color: var(--color-bg); } body[data-page-context="editorial"] .sub-card__btn--primary { background: var(--color-editorial-mark); border-color: var(--color-editorial-mark); color: var(--color-bg); } body[data-page-context="editorial"] .sub-card__btn--primary:hover, body[data-page-context="editorial"] .sub-card__btn--primary:focus-visible { background: var(--color-brand-accent-hover); border-color: var(--color-brand-accent-hover); } body[data-page-context="editorial"] .sub-card__btn--current, body[data-page-context="editorial"] .sub-card__btn--free, body[data-page-context="editorial"] .sub-card__btn--disabled { background: transparent; color: var(--color-text-muted); border-color: var(--color-border); cursor: not-allowed; } /* =========================================================== * §3 Compare table — strip shadows, keep editorial highlight * via gold left border on the recommended column. * =========================================================== */ body[data-page-context="editorial"] .sub-compare__th--highlight, body[data-page-context="editorial"] .sub-compare__td--highlight { background: transparent; box-shadow: none; border-left: 4px solid var(--color-editorial-mark); } body[data-page-context="editorial"] .sub-compare__plan-badge { display: inline-block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: var(--color-editorial-mark); background: transparent; border: 0; padding: 0; } /* =========================================================== * §4 FAQ — hairline only, no radius, no card chrome. * =========================================================== */ body[data-page-context="editorial"] .sub-faq__item { border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; margin: 0; padding: var(--space-4) 0; } body[data-page-context="editorial"] .sub-faq__question { font-family: var(--font-ui); font-weight: var(--font-weight-medium); color: var(--color-text); background: transparent; border-radius: 0; } body[data-page-context="editorial"] .sub-faq__answer { font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--line-height-prose); color: var(--color-text-secondary); max-width: 66ch; } /* =========================================================== * §5 Final CTA — pull-quote anchored, single decision moment. * =========================================================== */ body[data-page-context="editorial"] .sub-final-cta__inner { max-width: 66ch; margin: 0 auto; text-align: left; } body[data-page-context="editorial"] .sub-final-cta__quote { margin: 0 0 var(--space-12); } body[data-page-context="editorial"] .sub-final-cta__title { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--font-weight-normal); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-tight); color: var(--color-text); margin: 0 0 var(--space-3); } body[data-page-context="editorial"] .sub-final-cta__subtitle { font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--line-height-prose); color: var(--color-text-secondary); margin: 0 0 var(--space-8); } body[data-page-context="editorial"] .sub-final-cta__btn { display: inline-block; padding: var(--space-3) var(--space-8); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; color: var(--color-bg); background: var(--color-editorial-mark); border: 1px solid var(--color-editorial-mark); border-radius: 0; text-decoration: none; transition: background var(--duration-entry) var(--ease-standard); } body[data-page-context="editorial"] .sub-final-cta__btn:hover, body[data-page-context="editorial"] .sub-final-cta__btn:focus-visible { background: var(--color-brand-accent-hover); border-color: var(--color-brand-accent-hover); }