/* Signed-in returning-homepage state. Reuses assets/content.css's design tokens (--surface-2, --border, --text-1/2, --accent, --space-*, --radius-*) rather than inventing new ones. Two states, toggled on by homepage-returning.js and (for the early guess) an inline script in index.html: .dc-maybe-returning -- localStorage heuristic says "probably signed in"; hold a skeleton instead of the marketing hero. .dc-returning-active -- confirmed signed in with at least one deck. Neither class present -- default -- renders the acquisition hero exactly as before, with zero extra cost. */ :root { /* Same cap .lp-pain-section uses, so the dashboard's card edges line up with the welcome banner above it and the benefit cards below it. */ --hrx-content-width: 1280px; } .dc-maybe-returning .release1-hero, .dc-returning-active .release1-hero { display: none; } .dc-maybe-returning .hrx-skeleton { display: block; } /* Reserve the welcome strip before the signed-in session resolves. Without this placeholder the banner is inserted above the skeleton after first paint, moving every visible dashboard element down. */ .dc-maybe-returning .home-welcome[hidden] { display: flex !important; visibility: hidden; min-height: 56px; } .dc-returning-active .hrx { display: block; } /* --- Skeleton (dimensions approximate the real continue card + side rail, per spec 27/28: reserve the space, don't let real content jump). -------- */ .hrx-skeleton { display: none; width: min(100%, var(--hrx-content-width)); margin: var(--space-6, 32px) auto var(--space-7, 48px); } .hrx-skeleton-eyebrow { width: 160px; height: 14px; margin-bottom: 16px; border-radius: 999px; } .hrx-skeleton-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr); gap: 20px; } .hrx-skeleton-continue { height: 176px; border-radius: var(--radius-lg, 20px); } .hrx-skeleton-side { height: 220px; border-radius: var(--radius-lg, 20px); } .hrx-skeleton-eyebrow, .hrx-skeleton-continue, .hrx-skeleton-side { background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.07) 37%, rgba(255,255,255,0.03) 63%); background-size: 400% 100%; animation: hrx-shine 1.4s ease infinite; } @keyframes hrx-shine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* --- Returning homepage root --------------------------------------------- */ /* Every other block on the homepage caps its own width and centres itself (.lp-pain-section uses min(100%, 1280px), .home-welcome and .lp-final-cta cap at 1232px). The dashboard only ever got the shared padding-inline, so it stretched to the full 1500px page shell and its cards hung ~110px past both edges of the welcome banner directly above it and the benefit cards below. Matching .lp-pain-section's cap puts every edge on the same vertical line. */ .hrx { display: none; width: min(100%, var(--hrx-content-width)); margin: var(--space-6, 32px) auto var(--space-7, 48px); } /* The audit and recommendation modules arrive after the saved-deck shell. Give the skeleton and confirmed state the same initial block size so those asynchronous modules fill reserved space instead of shifting later content. */ .dc-maybe-returning .hrx-skeleton, .dc-returning-active .hrx { min-block-size: 440px; } /* ...but release it the moment those modules have resolved. Keeping the reservation after that padded the dashboard out to 440px even when the real content was around 240px tall, so a signed-in homepage showed a block of dead space under the deck row that no other section had. Nothing can shift once the async modules are in, so the reservation has no job left to do. */ .dc-returning-active .hrx.is-settled { min-block-size: 0; } .hrx-eyebrow { margin: 0 0 var(--space-4, 16px); font-size: 14px; font-weight: 650; color: var(--text-2, #8a879e); } .hrx-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr); gap: 20px; align-items: start; } .hrx-primary { display: flex; flex-direction: column; gap: var(--space-5, 24px); min-width: 0; } .hrx-secondary { display: flex; flex-direction: column; gap: var(--space-5, 24px); min-width: 0; } /* --- Continue Last Deck: ~50% of visual emphasis. Ratio inside the card: art 20-25% / body 50-55% / actions 20-25%. --------------------------- */ .hrx-continue { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: var(--space-6, 24px); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: var(--radius-lg, 20px); background: var(--surface-2, #17171d); } .hrx-continue-art { width: 116px; height: 116px; flex: none; border-radius: var(--radius-md, 16px); background: var(--surface-3, #1d1d26) center/cover no-repeat; border: 1px solid var(--border, rgba(255,255,255,0.08)); } .hrx-continue-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .hrx-continue-eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent, #c9a84c); } .hrx-continue-title { margin: 0; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; font-weight: 700; color: var(--text-1, #f0eef8); overflow-wrap: anywhere; } .hrx-continue-meta { margin: 4px 0 0; font-size: 13.5px; color: var(--text-2, #8a879e); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .hrx-continue-status { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-1, #f0eef8); } .hrx-dot { color: var(--text-3, #56536a); } .hrx-pips { display: inline-flex; gap: 2px; margin: 0 2px; } .hrx-pip { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,0.25); } .hrx-pip-W { background: #f8f4e3; } .hrx-pip-U { background: #aad3f4; } .hrx-pip-B { background: #8f8a86; } .hrx-pip-R { background: #e79a7c; } .hrx-pip-G { background: #a8ce9e; } .hrx-continue-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; } .hrx-continue-secondary { display: flex; gap: 12px; } .hrx-secondary-link { border: none; background: none; padding: 0; color: var(--text-2, #8a879e); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .hrx-secondary-link:hover { color: var(--accent-soft, #efd58b); } .hrx-btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; height: 42px; padding: 0 20px; border-radius: var(--radius-pill, 999px); font-size: 14.5px; font-weight: 650; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease, opacity .15s ease; } .hrx-btn-primary { background: var(--accent, #c9a84c); border: 1px solid var(--accent, #c9a84c); color: #14140f; } .hrx-btn-primary:hover { background: var(--accent-soft, #efd58b); } .hrx-btn-secondary { background: none; border: 1px solid var(--border-strong, rgba(255,255,255,0.12)); color: var(--text-1, #f0eef8); align-self: flex-start; } .hrx-btn-secondary:hover { border-color: var(--accent, #c9a84c); } /* --- Generic secondary-module card shell (recommendation / audit) ------- */ .hrx-module { padding: 20px var(--space-6, 24px); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: var(--radius-lg, 20px); background: var(--surface-2, #17171d); } .hrx-module-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2, #8a879e); } .hrx-module-title { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.3; color: var(--text-1, #f0eef8); } .hrx-module-body { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-2, #8a879e); max-width: 62ch; } .hrx-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; color: var(--accent-soft, #efd58b); font-size: 13.5px; font-weight: 650; text-decoration: none; } .hrx-link:hover { color: var(--accent, #c9a84c); } .hrx-audit-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .hrx-audit-bracket { font-size: 20px; font-weight: 700; color: var(--accent-soft, #efd58b); } .hrx-audit-date { font-size: 12.5px; color: var(--text-3, #56536a); white-space: nowrap; } /* --- Saved decks (secondary column, ~25% emphasis). Row ratio: thumbnail 15-20% / identity 50-60% / status 20-30%. ------------------------------ */ .hrx-saved { padding: 20px; border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: var(--radius-lg, 20px); background: var(--surface-2, #17171d); } .hrx-saved-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .hrx-saved-head h3 { margin: 0; font-size: 15px; font-weight: 650; color: var(--text-1, #f0eef8); } .hrx-saved-head a { font-size: 12.5px; color: var(--accent-soft, #efd58b); text-decoration: none; font-weight: 600; } .hrx-saved-head a:hover { color: var(--accent, #c9a84c); } .hrx-saved-list { display: flex; flex-direction: column; gap: 4px; } .hrx-saved-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--radius-sm, 12px); text-decoration: none; color: inherit; transition: background .15s ease; } .hrx-saved-row:hover { background: rgba(255,255,255,0.03); } .hrx-saved-art { width: 40px; height: 40px; border-radius: 9px; background: var(--surface-3, #1d1d26) center/cover no-repeat; flex: none; } .hrx-saved-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .hrx-saved-title { font-size: 14px; font-weight: 620; color: var(--text-1, #f0eef8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hrx-saved-meta { font-size: 12px; color: var(--text-2, #8a879e); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hrx-saved-status { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; } .hrx-chip { font-size: 10.5px; font-weight: 700; color: var(--accent-soft, #efd58b); background: var(--accent-dim, rgba(201,168,76,0.12)); padding: 2px 7px; border-radius: 999px; } .hrx-saved-updated { font-size: 11px; color: var(--text-3, #56536a); white-space: nowrap; } /* --- Recently used tools (lowest emphasis, ~15% shared with recs) ------- */ .hrx-tools { padding: 20px; border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: var(--radius-lg, 20px); background: var(--surface-2, #17171d); } .hrx-tools h3 { margin: 0 0 12px; font-size: 15px; font-weight: 650; color: var(--text-1, #f0eef8); } .hrx-tool-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .hrx-tool-icon { flex: none; display: flex; color: var(--text-2, #8a879e); } .hrx-tool-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .hrx-tool-label { width: fit-content; font-size: 13.5px; font-weight: 600; color: var(--text-1, #f0eef8); text-decoration: none; } .hrx-tool-label:hover { color: var(--accent-soft, #efd58b); text-decoration: underline; text-underline-offset: 3px; } .hrx-tool-label:focus-visible { border-radius: 3px; outline: 2px solid var(--accent, #c9a84c); outline-offset: 3px; } .hrx-tool-context { font-size: 11.5px; color: var(--text-3, #56536a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Tablet: below 1024px, secondary column drops under primary --------- */ @media (max-width: 1024px) { .hrx-layout { grid-template-columns: 1fr; } .hrx-secondary { flex-direction: row; flex-wrap: wrap; } .hrx-saved, .hrx-tools { flex: 1 1 280px; min-width: 280px; } .hrx-btn-secondary { flex: 1 1 100%; } .hrx-skeleton-layout { grid-template-columns: 1fr; } .dc-maybe-returning .hrx-skeleton, .dc-returning-active .hrx { min-block-size: 520px; } .dc-returning-active .hrx.is-settled { min-block-size: 0; } } /* --- Mobile: below 768px, single column throughout ---------------------- */ @media (max-width: 768px) { .hrx { margin: 24px auto 32px; } .hrx-skeleton { margin: 24px auto 32px; } .hrx-continue { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "art body" "actions actions"; padding: 16px; } .hrx-continue-art { width: 72px; height: 72px; grid-area: art; } .hrx-continue-body { grid-area: body; } .hrx-continue-actions { grid-area: actions; align-items: stretch; margin-top: 14px; } .hrx-continue-secondary { justify-content: center; } .hrx-btn-primary { width: 100%; height: 44px; } .hrx-secondary { flex-direction: column; } .hrx-saved, .hrx-tools { min-width: 0; } .hrx-module, .hrx-saved, .hrx-tools { padding: 16px; } } @media (prefers-reduced-motion: reduce) { .hrx-skeleton-eyebrow, .hrx-skeleton-continue, .hrx-skeleton-side { animation: none; } }