/* ========================================================================= HUB PAGE ------------------------------------------------------------------------- The browse component every hub renders: the two-tree family accordions and the content wrappers around them. Used by the Resume Templates, Resume Skills, Resume Guides, Cover Letters and Resume Metrics hubs. It used to exist four times over, once per series, under four prefixes (rgh-, rmh-, clh-, rt-), which is why the cover-letters hub was loading the guides stylesheet to get it. The rules are collected here so hub pages load one file and no hub reaches into another series. rmh- is NOT here. Resume Metrics renders its tree on all 98 pages, not just the hub, so those rules stay in resume-metrics/resume-metrics-hub.css which every metrics page loads. Moving them here broke 97 of them. Before moving a component into this file, check it is really hub-only: grep -rl "-fams" public/html// | wc -l The prefixes are kept as they are: the four copies had drifted (24 to 28 of 29 declarations matched), so folding them into a single prefix would move some hubs visually. That merge is a follow-up, not part of this move. rt-fam* stays in seo-chrome.css: it is the bottom-of-page tree on every SEO page, not a hub component. ========================================================================= */ /* ---- rgh: resume-guides-hub.css ---- */ /* ---------- Content section wrapping the family tree ---------- */ .rgh-content { max-width: 1100px; margin: 0 auto; padding: 64px 24px; } /* ---------- Family tree (.rgh-fams) ---------- */ .rgh-fams { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; margin-top: 16px; } .rgh-fam { display: flex; flex-direction: column; border: 0; background: transparent; padding: 0; } .rgh-fam[data-color="blue"] { --rf: #2563EB; --rf-card: rgba(37,99,235,0.05); --rf-link: rgba(37,99,235,0.10); --rf-link-hover: rgba(37,99,235,0.18); } .rgh-fam[data-color="green"] { --rf: #16A34A; --rf-card: rgba(22,163,74,0.05); --rf-link: rgba(22,163,74,0.10); --rf-link-hover: rgba(22,163,74,0.18); } .rgh-fam[data-color="yellow"] { --rf: #CA8A04; --rf-card: rgba(202,138,4,0.05); --rf-link: rgba(202,138,4,0.10); --rf-link-hover: rgba(202,138,4,0.18); } .rgh-fam[data-color="purple"] { --rf: #8B5CF6; --rf-card: rgba(139,92,246,0.05); --rf-link: rgba(139,92,246,0.10); --rf-link-hover: rgba(139,92,246,0.18); } .rgh-fam[data-color="orange"] { --rf: #EA580C; --rf-card: rgba(234,88,12,0.05); --rf-link: rgba(234,88,12,0.10); --rf-link-hover: rgba(234,88,12,0.18); } .rgh-fam[data-color="red"] { --rf: #DC2626; --rf-card: rgba(220,38,38,0.05); --rf-link: rgba(220,38,38,0.10); --rf-link-hover: rgba(220,38,38,0.18); } .rgh-fam[data-color="teal"] { --rf: #0D9488; --rf-card: rgba(13,148,136,0.05); --rf-link: rgba(13,148,136,0.10); --rf-link-hover: rgba(13,148,136,0.18); } .rgh-fam[data-color="slate"] { --rf: #475569; --rf-card: rgba(71,85,105,0.05); --rf-link: rgba(71,85,105,0.10); --rf-link-hover: rgba(71,85,105,0.18); } .rgh-fam[data-color="stone"] { --rf: #78716C; --rf-card: rgba(120,113,108,0.05);--rf-link: rgba(120,113,108,0.10);--rf-link-hover: rgba(120,113,108,0.18); } .rgh-fam[data-color="emerald"] { --rf: #059669; --rf-card: rgba(5,150,105,0.05); --rf-link: rgba(5,150,105,0.10); --rf-link-hover: rgba(5,150,105,0.18); } .rgh-fam[data-color="indigo"] { --rf: #4F46E5; --rf-card: rgba(79,70,229,0.05); --rf-link: rgba(79,70,229,0.10); --rf-link-hover: rgba(79,70,229,0.18); } .rgh-fam[data-color="amber"] { --rf: #D97706; --rf-card: rgba(217,119,6,0.05); --rf-link: rgba(217,119,6,0.10); --rf-link-hover: rgba(217,119,6,0.18); } .rgh-fam[data-color="rose"] { --rf: #E11D48; --rf-card: rgba(225,29,72,0.05); --rf-link: rgba(225,29,72,0.10); --rf-link-hover: rgba(225,29,72,0.18); } .rgh-fam[data-color="pink"] { --rf: #DB2777; --rf-card: rgba(219,39,119,0.05); --rf-link: rgba(219,39,119,0.10); --rf-link-hover: rgba(219,39,119,0.18); } .rgh-fam[open] .rgh-fam__chev { transform: rotate(180deg); } .rgh-fam-card { display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: var(--rf-link, rgba(37,99,235,0.10)); color: #1c2330; font-size: 12.5px; font-weight: 500; text-decoration: none; border-radius: 6px; transition: background 0.15s ease, box-shadow 0.15s ease; min-width: 0; } .rgh-fam-card:hover { background: var(--rf-link-hover, rgba(37,99,235,0.18)); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); } .rgh-fam-card__icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--rf, #1a73e8); display: inline-flex; align-items: center; justify-content: center; } .rgh-fam-card__icon svg { width: 15px; height: 15px; } .rgh-fam-card__title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Coming-soon: lighter tint, muted text, italic "Soon" badge on the right */ .rgh-fam-card.is-soon { background: var(--rf-card, rgba(37,99,235,0.05)); color: #6b7280; pointer-events: none; } .rgh-fam-card.is-soon .rgh-fam-card__icon { color: var(--rf, #9ca3af); opacity: 0.55; } .rgh-fam-card.is-soon::after { content: 'Soon'; font-size: 10px; font-weight: 500; font-style: italic; color: #9ca3af; margin-left: auto; padding-left: 6px; letter-spacing: 0.02em; } /* Current-page (full-tone, used on individual guide pages, not this hub) */ .rgh-fam-card.is-current { background: var(--rf, #1a73e8); color: #fff; cursor: default; pointer-events: none; } .rgh-fam-card.is-current .rgh-fam-card__icon { color: #fff; } .rgh-fam-card.is-current::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-left: auto; flex-shrink: 0; } /* ---- clh: cover-letters-hub.css ---- */ /* ---------- Family tree (.clh-fams) ---------- */ /* Grid, not centered flex-wrap (changed 2026-07-30). The old rule used flex-wrap + justify-content:center so an incomplete last row would centre; in practice that left row 2 indented against row 1 and the tree read as misaligned. Every other series uses a plain 5-column grid, so this matches them: a ragged right edge on the last row is the intended look. minmax(0, 1fr) keeps all five columns exactly equal (a bare 1fr lets a long role name grow its column and squeeze the rest), and width:100% survives main.css's bare `section { display:flex; align-items:center }`, which would otherwise shrink-wrap the grid to its own content. See Cover Letter Page.md §3 and SEO Pages.md §7.7. */ .clh-fams { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin-top: 16px; width: 100%; } .clh-fam { display: flex; flex-direction: column; min-width: 0; border: 0; background: transparent; padding: 0; } /* Data-color palette. Every color used across both trees is mapped here. blue/green/yellow/purple/orange/red/teal/stone/emerald/indigo/amber/rose/pink are carried over from the resume-guides + resume-metrics hub CSS. The cyan/sky/lime hexes are pulled from resume-template.css so each color used in Tree 1 (cyan, sky) and Tree 2 (cyan, indigo, sky, rose, purple, lime, amber) resolves. */ .clh-fam[data-color="blue"] { --rf: #2563EB; --rf-card: rgba(37,99,235,0.05); --rf-link: rgba(37,99,235,0.10); --rf-link-hover: rgba(37,99,235,0.18); } .clh-fam[data-color="green"] { --rf: #16A34A; --rf-card: rgba(22,163,74,0.05); --rf-link: rgba(22,163,74,0.10); --rf-link-hover: rgba(22,163,74,0.18); } .clh-fam[data-color="yellow"] { --rf: #CA8A04; --rf-card: rgba(202,138,4,0.05); --rf-link: rgba(202,138,4,0.10); --rf-link-hover: rgba(202,138,4,0.18); } .clh-fam[data-color="purple"] { --rf: #8B5CF6; --rf-card: rgba(139,92,246,0.05); --rf-link: rgba(139,92,246,0.10); --rf-link-hover: rgba(139,92,246,0.18); } .clh-fam[data-color="orange"] { --rf: #EA580C; --rf-card: rgba(234,88,12,0.05); --rf-link: rgba(234,88,12,0.10); --rf-link-hover: rgba(234,88,12,0.18); } .clh-fam[data-color="red"] { --rf: #DC2626; --rf-card: rgba(220,38,38,0.05); --rf-link: rgba(220,38,38,0.10); --rf-link-hover: rgba(220,38,38,0.18); } .clh-fam[data-color="teal"] { --rf: #0D9488; --rf-card: rgba(13,148,136,0.05); --rf-link: rgba(13,148,136,0.10); --rf-link-hover: rgba(13,148,136,0.18); } .clh-fam[data-color="slate"] { --rf: #475569; --rf-card: rgba(71,85,105,0.05); --rf-link: rgba(71,85,105,0.10); --rf-link-hover: rgba(71,85,105,0.18); } .clh-fam[data-color="stone"] { --rf: #78716C; --rf-card: rgba(120,113,108,0.05);--rf-link: rgba(120,113,108,0.10);--rf-link-hover: rgba(120,113,108,0.18); } .clh-fam[data-color="emerald"] { --rf: #059669; --rf-card: rgba(5,150,105,0.05); --rf-link: rgba(5,150,105,0.10); --rf-link-hover: rgba(5,150,105,0.18); } .clh-fam[data-color="indigo"] { --rf: #4F46E5; --rf-card: rgba(79,70,229,0.05); --rf-link: rgba(79,70,229,0.10); --rf-link-hover: rgba(79,70,229,0.18); } .clh-fam[data-color="amber"] { --rf: #D97706; --rf-card: rgba(217,119,6,0.05); --rf-link: rgba(217,119,6,0.10); --rf-link-hover: rgba(217,119,6,0.18); } .clh-fam[data-color="rose"] { --rf: #E11D48; --rf-card: rgba(225,29,72,0.05); --rf-link: rgba(225,29,72,0.10); --rf-link-hover: rgba(225,29,72,0.18); } .clh-fam[data-color="pink"] { --rf: #DB2777; --rf-card: rgba(219,39,119,0.05); --rf-link: rgba(219,39,119,0.10); --rf-link-hover: rgba(219,39,119,0.18); } .clh-fam[data-color="cyan"] { --rf: #0891B2; --rf-card: rgba(8,145,178,0.05); --rf-link: rgba(8,145,178,0.10); --rf-link-hover: rgba(8,145,178,0.18); } .clh-fam[data-color="sky"] { --rf: #0284C7; --rf-card: rgba(2,132,199,0.05); --rf-link: rgba(2,132,199,0.10); --rf-link-hover: rgba(2,132,199,0.18); } .clh-fam[data-color="lime"] { --rf: #65A30D; --rf-card: rgba(101,163,13,0.05);--rf-link: rgba(101,163,13,0.10);--rf-link-hover: rgba(101,163,13,0.18); } .clh-fam[open] .clh-fam__chev { transform: rotate(180deg); } .clh-fam-card { display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: var(--rf-link, rgba(37,99,235,0.10)); color: #1c2330; font-size: 12.5px; font-weight: 500; text-decoration: none; border-radius: 6px; transition: background 0.15s ease, box-shadow 0.15s ease; min-width: 0; } .clh-fam-card:hover { background: var(--rf-link-hover, rgba(37,99,235,0.18)); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); } .clh-fam-card__icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--rf, #1a73e8); display: inline-flex; align-items: center; justify-content: center; } .clh-fam-card__icon svg { width: 15px; height: 15px; } .clh-fam-card__title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Coming-soon: lighter tint, muted text, faded icon, italic "Soon" badge. */ .clh-fam-card.is-soon { background: var(--rf-card, rgba(37,99,235,0.05)); color: #6b7280; cursor: default; pointer-events: none; } .clh-fam-card.is-soon .clh-fam-card__icon { color: var(--rf, #9ca3af); opacity: 0.55; } /* The "Soon" badge sits inline, so on a placeholder card it eats ~34px of the title box and long role names ellipsize while the same label fits fine on a normal card. Tighten the padding and hide the decorative icon on .is-soon only, which buys back enough room for the longest label. */ .clh-fam-card.is-soon { padding-left: 9px; padding-right: 6px; column-gap: 4px; } .clh-fam-card.is-soon .clh-fam-card__icon { display: none; } .clh-fam-card__soon { margin-left: auto; padding-left: 3px; font-size: 9px; font-weight: 500; font-style: italic; color: #9ca3af; letter-spacing: 0.02em; flex-shrink: 0; } /* Current-page (full-tone, reserved for individual cover-letter pages). */ .clh-fam-card.is-current { background: var(--rf, #1a73e8); color: #fff; cursor: default; pointer-events: none; } .clh-fam-card.is-current .clh-fam-card__icon { color: #fff; } .clh-fam-card.is-current::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-left: auto; flex-shrink: 0; }