/* * Corpus Phase 2 — COMPARISON page type. 8,571 pages: pairwise nakshatra/rashi/gemstone * matching tables, including nakshatra-compatibility (757 pages, 84,520 clicks/yr — the * highest-value surface on the estate). Group 3 (COMPARISON + TOOL), 2026-09-03. Scoped * entirely to `[data-gg-page-type="comparison"]` on , so it can never fight the other * five page-type stylesheets or the base `.gg-programmatic-page` theme. * * Contract: docs/handoff/CORPUS-PHASE2-DESIGN-20260903.md §4.7 (composition) and §4.1 * (shared geometry tokens, restated here as literals per that section's own instruction — * Cleo has no linear type scale, so these are not derived from a clamp). * * Reference: Cleo `/pricing` plan table. Grammar borrowed (pair cards, score capsule, row * rules), colours are ours — `--gg-ink` / `--gg-accent` / `--gg-blush` / `--gg-paper` / * `--gg-line`, defined in css/programmatic-editorial-theme.css and never restated here as hex * literals. */ [data-gg-page-type="comparison"] .gg-corpus-comparison { width: min(100% - 64px, 1280px); margin: 48px auto 0; padding: 0 32px; } @media (max-width: 760px) { [data-gg-page-type="comparison"] .gg-corpus-comparison { width: 100%; padding: 0 20px; } } /* 1. Eyebrow (mono), family name. The page's own H1 stays exactly where it is. */ [data-gg-page-type="comparison"] .gg-corpus-comparison__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; font: 400 11.9px/1.2 Simplon, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gg-muted); } [data-gg-page-type="comparison"] .gg-corpus-comparison__eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--gg-accent); } /* 2. Pair header — two subject cards either side of a centred score capsule. */ [data-gg-page-type="comparison"] .gg-corpus-comparison__pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin: 36px 0; } [data-gg-page-type="comparison"] .gg-corpus-comparison__pair-card { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 40px; margin: 0; background: var(--gg-blush); } [data-gg-page-type="comparison"] .gg-corpus-comparison__pair-card img { width: 100%; height: 100%; object-fit: cover; } [data-gg-page-type="comparison"] .gg-corpus-comparison__pair-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 18px; color: #fff; font: 400 16px/1.2 PPNeue, Arial, sans-serif; text-shadow: 0 1px 6px rgba(45, 23, 76, 0.55); /* The caption is white, and a text-shadow alone is not a ground: when the card image is light, or has not painted yet, the white sits on `--gg-blush` at 1.21:1 and the subject name is invisible. The scrim is the same one the hub lead card already uses, so the caption carries its own contrast whatever the image behind it turns out to be. */ background: linear-gradient(transparent, rgba(45, 23, 76, 0.55)); border-radius: 0 0 var(--cleo-radius, 40px) var(--cleo-radius, 40px); } [data-gg-page-type="comparison"] .gg-corpus-comparison__score-capsule { display: inline-flex; min-height: 60px; align-items: center; justify-content: center; padding: 0 26px; border-radius: 30px; background: var(--gg-blush); color: var(--gg-ink); font: 400 20px/1 Simplon, monospace; white-space: nowrap; } [data-gg-page-type="comparison"] .gg-corpus-comparison__score-capsule:empty { display: none; } @media (max-width: 760px) { [data-gg-page-type="comparison"] .gg-corpus-comparison__pair { grid-template-columns: 1fr; justify-items: center; gap: 16px; } [data-gg-page-type="comparison"] .gg-corpus-comparison__pair-card { width: 100%; max-width: 280px; } } /* 3. Score table restyle — the page's own table (or its `.scores-grid` card-div convention), * never re-structured, only restyled: no borders, a hairline row rule, mono numerals. */ [data-gg-page-type="comparison"] table { width: 100%; border-collapse: collapse; margin: 40px 0; font: 400 15px/1.4 PPNeue, Arial, sans-serif; } [data-gg-page-type="comparison"] table th, [data-gg-page-type="comparison"] table td { padding: 0 12px; height: 64px; border: none; border-bottom: 1px solid var(--gg-line); text-align: left; } [data-gg-page-type="comparison"] table td:last-child, [data-gg-page-type="comparison"] table th:last-child { font-family: Simplon, monospace; font-variant-numeric: tabular-nums; text-align: right; } [data-gg-page-type="comparison"] .scores-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--gg-line); border-radius: 28px; overflow: hidden; margin: 40px 0; } [data-gg-page-type="comparison"] .score-card { background: var(--gg-paper); box-shadow: none; border-radius: 0; padding: 24px 20px; } [data-gg-page-type="comparison"] .score-card .value { font-family: Simplon, monospace; font-variant-numeric: tabular-nums; } /* 4. Verdict block — the page's own summary paragraph, at the article measure, in a card. */ [data-gg-page-type="comparison"] .conclusion, [data-gg-page-type="comparison"] .verdict, [data-gg-page-type="comparison"] .summary { max-width: 676px; padding: 32px 40px; border-radius: 28px; background: var(--gg-blush); color: var(--gg-ink); } /* 5. Cross-links rail — "other pairings", the page's own link list re-laid. */ [data-gg-page-type="comparison"] .gg-corpus-comparison__cross-links { margin: 62px 0 20px; } [data-gg-page-type="comparison"] .gg-corpus-comparison__cross-links-kicker { margin: 0 0 12px; font: 400 11.9px/1.2 Simplon, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gg-muted); } [data-gg-page-type="comparison"] .gg-corpus-comparison__cross-links-list { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; list-style: none; } @media (max-width: 760px) { [data-gg-page-type="comparison"] .gg-corpus-comparison__cross-links-list { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; } } [data-gg-page-type="comparison"] .gg-corpus-comparison__cross-link { min-width: calc((100% - 36px) / 4); scroll-snap-align: start; } @media (max-width: 1119px) and (min-width: 761px) { [data-gg-page-type="comparison"] .gg-corpus-comparison__cross-link { min-width: calc((100% - 24px) / 3); } } @media (max-width: 760px) { [data-gg-page-type="comparison"] .gg-corpus-comparison__cross-link { min-width: 78vw; } } [data-gg-page-type="comparison"] .gg-corpus-comparison__cross-link a { display: block; min-height: 96px; padding: 20px 22px; border: 1px solid var(--gg-line); border-radius: 28px; color: var(--gg-ink); background: #fff; font: 400 15px/1.35 PPNeue, Arial, sans-serif; transition: transform 0.22s var(--gg-ease), border-color 0.22s var(--gg-ease); } [data-gg-page-type="comparison"] .gg-corpus-comparison__cross-link a:hover { transform: translateY(-3px); border-color: var(--gg-accent); } @media (prefers-reduced-motion: reduce) { [data-gg-page-type="comparison"] .gg-corpus-comparison__cross-link a { transition: none; } [data-gg-page-type="comparison"] .gg-corpus-comparison__cross-link a:hover { transform: none; } }