/* * Corpus Phase 2 — TOOL page type. 1,393 pages: calculators and lookups (kundali, matching, * panchang, muhurat, numerology, palmistry, tarot, how-to). Group 3 (COMPARISON + TOOL), * 2026-09-03. Scoped entirely to `[data-gg-page-type="tool"]` 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.6 (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 `/autopilot` feature/product detail. Grammar borrowed (product still, step * grid), colours are ours — `--gg-ink` / `--gg-accent` / `--gg-blush` / `--gg-paper`, defined * in css/programmatic-editorial-theme.css and never restated here as hex literals. */ [data-gg-page-type="tool"] .gg-corpus-tool { width: min(100% - 64px, 1280px); margin: 48px auto 0; padding: 0 32px; } @media (max-width: 760px) { [data-gg-page-type="tool"] .gg-corpus-tool { width: 100%; padding: 0 20px; } } /* 1. Eyebrow (mono). The page's own H1 and dek stay exactly where they are. */ [data-gg-page-type="tool"] .gg-corpus-tool__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="tool"] .gg-corpus-tool__eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--gg-accent); } [data-gg-page-type="tool"] h1 { color: var(--gg-ink); } /* 2. Product still — the family hero, portrait, on Cleo's soft-field ground. */ [data-gg-page-type="tool"] .gg-corpus-tool__still { position: relative; aspect-ratio: 4 / 5; max-width: 420px; margin: 36px auto; padding: 118px 24px 0; border-radius: 40px; background: linear-gradient(157deg, #e8e2f2, #dfe6ec 46%, #e9e4dd); } [data-gg-page-type="tool"] .gg-corpus-tool__still img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 30px 46px rgba(40, 32, 56, 0.22)); } /* 3. Input panel — the page's own form, left exactly as it is, wrapped visually only by * scoping its own top-level container; never re-ordered, never re-labelled. Scoped to `form` * only, not `table`: measured across this group's 9 families, most `` elements are the * page's own DATA tables (panchang timing tables, kundali reference tables), not the calculator * input, so styling every table as an "input panel" would wrap unrelated content in a blush * card on the majority of pages. A real calculator input is a `` where one exists. */ [data-gg-page-type="tool"] form { padding: 40px; border-radius: 40px; background: var(--gg-blush); } [data-gg-page-type="tool"] form label { color: var(--gg-ink); font: 400 15px/1.4 PPNeue, Arial, sans-serif; } /* 4. Three step blocks — dot-matrix mark, h3 22/1.27 + p 22/1.27 muted. Omitted entirely when * the page has no extractable step list (compose.mjs never fabricates copy). */ [data-gg-page-type="tool"] .gg-corpus-tool__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 62px 0; padding: 0; list-style: none; } [data-gg-page-type="tool"] .gg-corpus-tool__step { position: relative; padding: 40px 28px 28px; border-radius: 28px; background: var(--gg-paper); border: 1px solid var(--gg-line); } [data-gg-page-type="tool"] .gg-corpus-tool__step::before { content: ""; position: absolute; top: 20px; left: 28px; width: 40px; height: 40px; background: radial-gradient(circle, rgba(112, 82, 164, 0.55) 1.4px, transparent 1.5px) 8px 8px / 8px 8px; } [data-gg-page-type="tool"] .gg-corpus-tool__step h3 { margin: 0 0 8px; /* >= 1.6 body / >= 1.35 heading: the owner rubric measures Indic matras, and Devanagari is set inline on `lang="en"` corpus pages, so the leading has to clear matras for every script. Same call and same rationale as `.gg-corpus-dek` in css/corpus-article.css. */ font: 350 22px/1.35 PPNeue, Arial, sans-serif; color: var(--gg-ink); } [data-gg-page-type="tool"] .gg-corpus-tool__step p { margin: 0; font: 400 22px/1.6 PPNeue, Arial, sans-serif; color: var(--gg-muted); } @media (max-width: 1119px) and (min-width: 761px) { [data-gg-page-type="tool"] .gg-corpus-tool__steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { [data-gg-page-type="tool"] .gg-corpus-tool__still { padding: 80px 16px 0; } [data-gg-page-type="tool"] .gg-corpus-tool__steps { grid-template-columns: 1fr; gap: 16px; } [data-gg-page-type="tool"] .gg-corpus-tool__step p { font-size: 17px; } } /* 5. Result prose — article measure, so a long result readout stays comfortable to read. */ [data-gg-page-type="tool"] .gg-corpus-tool ~ p, [data-gg-page-type="tool"] .result, [data-gg-page-type="tool"] .reading-result { max-width: 676px; color: var(--gg-ink); }