/* ===================================================================== EDITORIAL GLASS — sitewide background + card finish (2026-07-13) Background image swapped to the light-orbit field (2026-07-15). Applies the approved light blue-and-white atmospheric background and the editorial-glass card finish to every NON-ROOT page. Appearance only: no layout, spacing, sizing, typography-metric, or interaction changes. See the instruction file in the project brief. SCOPE: every rule here lives under body.ps-editorial-surface. The protected cinematic homepage at "/" (and its comparison twin at /experience) never receives that class, so nothing in this file can leak onto it. Loads AFTER sky-glass.css so equal-specificity rules resolve in this file's favor. ===================================================================== */ /* --------------------------------------------------------------------- 0. Shared visual tokens (scoped) --------------------------------------------------------------------- */ body.ps-editorial-surface { --ps-card-surface-top: rgba(255, 255, 255, 0.95); --ps-card-surface-mid: rgba(248, 251, 255, 0.90); --ps-card-surface-bottom: rgba(235, 242, 255, 0.82); --ps-card-border: rgba(116, 150, 215, 0.22); --ps-card-border-highlight: rgba(255, 255, 255, 0.92); --ps-card-border-active: rgba(78, 163, 255, 0.42); --ps-card-title: #0a1b36; --ps-card-body: #42516a; --ps-card-muted: #6f7d94; --ps-shadow-quiet: 0 4px 12px rgba(34, 66, 120, 0.045), 0 14px 34px rgba(34, 66, 120, 0.075); --ps-shadow-standard: 0 5px 14px rgba(34, 66, 120, 0.055), 0 18px 44px rgba(34, 66, 120, 0.09); --ps-shadow-primary: 0 8px 20px rgba(34, 66, 120, 0.07), 0 24px 64px rgba(34, 66, 120, 0.13); --ps-shadow-hover: 0 7px 18px rgba(34, 66, 120, 0.065), 0 22px 56px rgba(34, 66, 120, 0.12); --ps-shadow-active: 0 0 0 1px rgba(78, 163, 255, 0.16), 0 16px 42px rgba(34, 66, 120, 0.13), 0 0 30px rgba(46, 200, 211, 0.10); /* Solid fallback so no page ever flashes dark while the image loads. */ background-color: #f6f8fc; } /* --------------------------------------------------------------------- 1. Approved background — reuse the site's existing fixed backdrop wrapper (.site-sky) instead of adding a redundant layer. Pages that hide .site-sky and paint their own sky are overridden individually below (résumé, my-story) so the whole site shares one field. --------------------------------------------------------------------- */ body.ps-editorial-surface .site-sky { background: linear-gradient(180deg, rgb(255 255 255 / 5%) 0%, rgb(246 248 252 / 2%) 100%), url("../images/background-templates/2509b8db-4281-468c-a2cf-dba20ac3268b.png") center / cover no-repeat, #f6f8fc; } /* Living Résumé (resume2) paints its own fixed sky in two files; repoint both at the shared editorial field. Specificity beats the originals. */ body.ps-editorial-surface .resume-v2::before { background: radial-gradient(circle at 18% 16%, rgb(255 255 255 / 28%), transparent 32%), linear-gradient(180deg, rgb(255 255 255 / 5%) 0%, rgb(246 248 252 / 2%) 55%, rgb(235 242 255 / 10%) 100%), url("../images/background-templates/2509b8db-4281-468c-a2cf-dba20ac3268b.png") center / cover no-repeat, #f6f8fc; } body.ps-editorial-surface .lr-page::before { background: linear-gradient(180deg, rgb(255 255 255 / 5%) 0%, rgb(246 248 252 / 2%) 40%, rgb(235 242 255 / 10%) 100%), url("../images/background-templates/2509b8db-4281-468c-a2cf-dba20ac3268b.png") center / cover no-repeat, #f6f8fc; } /* The skill-popover's decorative sky echo keeps echoing the page. */ body.ps-editorial-surface .r2-skillpop::after { background: url("../images/background-templates/2509b8db-4281-468c-a2cf-dba20ac3268b.png") right center / cover no-repeat; } /* My Story's daylight act atmosphere. */ body.ps-editorial-surface .story-act--day::before { background: linear-gradient(180deg, rgb(246 248 252 / 12%) 0%, rgb(246 248 252 / 4%) 45%, rgb(235 242 255 / 12%) 100%), url("../images/background-templates/2509b8db-4281-468c-a2cf-dba20ac3268b.png") center / cover no-repeat, #f6f8fc; } /* Preserve the full abstract frame on tall, narrow screens. */ @media (max-width: 48rem) { body.ps-editorial-surface .site-sky, body.ps-editorial-surface .lr-page::before, body.ps-editorial-surface .story-act--day::before { background-image: linear-gradient(180deg, rgb(255 255 255 / 4%) 0%, rgb(236 243 255 / 8%) 100%), url("../images/background-templates/2509b8db-4281-468c-a2cf-dba20ac3268b.png"); background-position: center; background-size: auto, 100% 100%; background-repeat: no-repeat; } body.ps-editorial-surface .resume-v2::before { background: linear-gradient(180deg, rgb(255 255 255 / 5%) 0%, rgb(240 246 255 / 10%) 75%, rgb(234 241 251 / 16%) 100%), url("../images/background-templates/2509b8db-4281-468c-a2cf-dba20ac3268b.png") center / 100% 100% no-repeat, #f6f8fc; } } /* --------------------------------------------------------------------- 2. Editorial-glass card finish — applied to the SAME shared card families sky-glass already frosts, so geometry, padding, radius, and layout are untouched. Background layers, border-color, shadow, blur, and text color only. All of these components already carry a 1px border from sky-glass, so recoloring it cannot change size. --------------------------------------------------------------------- */ body.ps-editorial-surface .ps-card, body.ps-editorial-surface .preview-card, body.ps-editorial-surface .preview-main, body.ps-editorial-surface .preview-ghost, body.ps-editorial-surface .ps-project, body.ps-editorial-surface .ps-ov-block, body.ps-editorial-surface .ps-feature, body.ps-editorial-surface .ps-metric, body.ps-editorial-surface .ps-step, body.ps-editorial-surface .ct-card, body.ps-editorial-surface .iv-card, body.ps-editorial-surface .iv-mode, body.ps-editorial-surface .platform-page__card, body.ps-editorial-surface .fun-fact-card, body.ps-editorial-surface .story-card, body.ps-editorial-surface .work-hero-panel, body.ps-editorial-surface .work-project-panel, body.ps-editorial-surface .bd-shield, body.ps-editorial-surface .ts-heat, body.ps-editorial-surface .ts-group, body.ps-editorial-surface .pf-topic, body.ps-editorial-surface .pf-side > *, body.ps-editorial-surface .projects-section, body.ps-editorial-surface .ps-glass-card { box-sizing: border-box; background: radial-gradient( circle at 18% 0%, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.24) 22%, transparent 44% ), radial-gradient( ellipse at 80% 110%, rgba(78, 163, 255, 0.10) 0%, rgba(46, 200, 211, 0.04) 38%, transparent 68% ), linear-gradient( 145deg, var(--ps-card-surface-top) 0%, var(--ps-card-surface-mid) 52%, var(--ps-card-surface-bottom) 100% ); border-color: var(--ps-card-border); box-shadow: var(--ps-shadow-standard), inset 0 1px 0 var(--ps-card-border-highlight), inset 0 -1px 0 rgba(91, 123, 183, 0.05); backdrop-filter: blur(16px) saturate(110%); -webkit-backdrop-filter: blur(16px) saturate(110%); transition: box-shadow 220ms ease, border-color 220ms ease, background 220ms ease; } /* --------------------------------------------------------------------- 3. Depth hierarchy — three restrained levels mapped onto existing component semantics. No geometry changes. --------------------------------------------------------------------- */ /* PRIMARY — major focal panels. */ body.ps-editorial-surface .work-hero-panel, body.ps-editorial-surface .preview-main, body.ps-editorial-surface .ps-glass-card--hero { box-shadow: var(--ps-shadow-primary), inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(91, 123, 183, 0.06); } /* QUIET — small stat/evidence/metadata cards stay calm. */ body.ps-editorial-surface .ps-metric, body.ps-editorial-surface .ts-heat, body.ps-editorial-surface .fun-fact-card, body.ps-editorial-surface .ps-glass-card--compact { background: radial-gradient( circle at 16% 0%, rgba(255, 255, 255, 0.62), transparent 42% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.92), rgba(241, 246, 255, 0.84) ); box-shadow: var(--ps-shadow-quiet), inset 0 1px 0 rgba(255, 255, 255, 0.90); } /* --------------------------------------------------------------------- 4. Interactive states — shadow/border/tone only; movement stays whatever each component already does (nothing new is added). --------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { body.ps-editorial-surface .ps-glass-card.is-interactive:hover, body.ps-editorial-surface a.ps-card:hover, body.ps-editorial-surface a.ct-card:hover, body.ps-editorial-surface a.pf-topic:hover { border-color: rgba(78, 163, 255, 0.32); box-shadow: var(--ps-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.98); } } body.ps-editorial-surface .ps-card--selected, body.ps-editorial-surface .ps-card[aria-selected="true"], body.ps-editorial-surface [aria-selected="true"].ct-card { border-color: var(--ps-card-border-active); background: radial-gradient( circle at 18% 0%, rgba(255, 255, 255, 0.78), transparent 44% ), radial-gradient( ellipse at 82% 112%, rgba(78, 163, 255, 0.13), rgba(46, 200, 211, 0.05) 42%, transparent 70% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.97) 0%, rgba(247, 251, 255, 0.93) 50%, rgba(233, 242, 255, 0.86) 100% ); box-shadow: var(--ps-shadow-active), inset 0 1px 0 rgba(255, 255, 255, 1); } /* Focus visibility on interactive cards. */ body.ps-editorial-surface .ps-glass-card.is-interactive:focus-visible, body.ps-editorial-surface a.ps-card:focus-visible, body.ps-editorial-surface a.ct-card:focus-visible { outline: 3px solid rgba(78, 163, 255, 0.34); outline-offset: 4px; } /* --------------------------------------------------------------------- 5. Accessibility & performance relief --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.ps-editorial-surface .ps-card, body.ps-editorial-surface .ps-glass-card { transition: none; } } /* Lower-power devices: ease the blur without touching layout. The cards are already near-opaque, so reduced blur is visually equivalent. */ @media (max-width: 48rem) { body.ps-editorial-surface .ps-card, body.ps-editorial-surface .preview-card, body.ps-editorial-surface .ps-project, body.ps-editorial-surface .story-card, body.ps-editorial-surface .work-project-panel, body.ps-editorial-surface .ts-group, body.ps-editorial-surface .ps-glass-card { backdrop-filter: blur(8px) saturate(108%); -webkit-backdrop-filter: blur(8px) saturate(108%); } } @media (forced-colors: active) { body.ps-editorial-surface .ps-card, body.ps-editorial-surface .ps-glass-card { background: Canvas; border-color: CanvasText; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } } /* --------------------------------------------------------------------- 6. Navy field readability (2026-07-14) Almost all content stays readable on the navy field: page heroes sit over the pale top of the image, and body content lives inside the near-opaque glass cards/panels above. The one place content sits directly on the darker lower half of the field is the Skills constellation — its orbs are translucent by design and its section labels were tuned for a light backdrop. Lift those to light tones so they read on navy. Colour only: no geometry, size, or layout changes (the orb ring uses inset box-shadow, not a border). Scoped to .ps-editorial-surface; the .skf-* classes only exist on the Skills page, so nothing else is touched. --------------------------------------------------------------------- */ body.ps-editorial-surface .skf-act__head { color: #aec6ea; } body.ps-editorial-surface .skf-orb__name { color: #eaf1ff; text-shadow: 0 1px 10px rgba(4, 12, 30, 0.5); } body.ps-editorial-surface .skf-orb__ball { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 4px 24px rgba(120, 160, 255, 0.28); background: radial-gradient( circle at 32% 28%, rgba(255, 255, 255, 0.28), rgba(150, 180, 255, 0.10) 60%, rgba(120, 150, 230, 0.06) ); } /* ===================================================================== LAYERED INK & SIGNAL GOLD overrides (PS-THEME-002, 2026-07-16) Dark theme (body[data-theme="dark"]): the editorial field becomes the near-black canvas and the glass finish becomes the planted dark card — solid graphite one layer above the canvas, hairline border, deep quiet shadow, no blur, no blue tint. The résumé keeps its paper-slab document (resume2.css), so its fixed backdrop is painted here as the same black stage. The light theme above is untouched. ===================================================================== */ body[data-theme="dark"].ps-editorial-surface { --ps-card-surface-top: #1a2c4f; --ps-card-surface-mid: #1a2c4f; --ps-card-surface-bottom: #1a2c4f; --ps-card-border: #2e4573; --ps-card-border-highlight: rgba(255, 255, 255, 0.08); --ps-card-border-active: #d8a928; --ps-card-title: #f2f4f8; --ps-card-body: #c4ccda; --ps-card-muted: #9aa5b8; --ps-shadow-quiet: 0 1px 2px rgba(0, 0, 0, 0.4); --ps-shadow-standard: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 34px rgba(0, 0, 0, 0.4); --ps-shadow-primary: 0 4px 12px rgba(0, 0, 0, 0.45), 0 28px 72px rgba(0, 0, 0, 0.55); --ps-shadow-hover: 0 3px 8px rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.5); --ps-shadow-active: 0 0 0 1px rgba(216, 169, 40, 0.55), 0 16px 42px rgba(0, 0, 0, 0.5); background-color: #0e1d3a; } body[data-theme="dark"].ps-editorial-surface .site-sky { background: radial-gradient(70rem 36rem at 80% -6rem, rgb(216 169 40 / 5%), transparent 60%), linear-gradient(180deg, #0a1730 0%, #0e1d3a 40%, #0e1d3a 100%); } body[data-theme="dark"].ps-editorial-surface .resume-v2::before, body[data-theme="dark"].ps-editorial-surface .lr-page::before, body[data-theme="dark"].ps-editorial-surface .story-act--day::before { background: radial-gradient(80rem 40rem at 82% -8rem, rgb(216 169 40 / 6%), transparent 60%), linear-gradient(180deg, #0a1730 0%, #0e1d3a 55%, #0a1730 100%); } body[data-theme="dark"].ps-editorial-surface .r2-skillpop::after { background: #f1efea; } @media (max-width: 48rem) { body[data-theme="dark"].ps-editorial-surface .site-sky, body[data-theme="dark"].ps-editorial-surface .lr-page::before, body[data-theme="dark"].ps-editorial-surface .story-act--day::before, body[data-theme="dark"].ps-editorial-surface .resume-v2::before { background: #0e1d3a; background-image: none; } } body[data-theme="dark"].ps-editorial-surface .ps-card, body[data-theme="dark"].ps-editorial-surface .preview-card, body[data-theme="dark"].ps-editorial-surface .preview-main, body[data-theme="dark"].ps-editorial-surface .preview-ghost, body[data-theme="dark"].ps-editorial-surface .ps-project, body[data-theme="dark"].ps-editorial-surface .ps-ov-block, body[data-theme="dark"].ps-editorial-surface .ps-feature, body[data-theme="dark"].ps-editorial-surface .ps-metric, body[data-theme="dark"].ps-editorial-surface .ps-step, body[data-theme="dark"].ps-editorial-surface .ct-card, body[data-theme="dark"].ps-editorial-surface .iv-card, body[data-theme="dark"].ps-editorial-surface .iv-mode, body[data-theme="dark"].ps-editorial-surface .platform-page__card, body[data-theme="dark"].ps-editorial-surface .fun-fact-card, body[data-theme="dark"].ps-editorial-surface .story-card, body[data-theme="dark"].ps-editorial-surface .work-hero-panel, body[data-theme="dark"].ps-editorial-surface .work-project-panel, body[data-theme="dark"].ps-editorial-surface .bd-shield, body[data-theme="dark"].ps-editorial-surface .ts-heat, body[data-theme="dark"].ps-editorial-surface .ts-group, body[data-theme="dark"].ps-editorial-surface .pf-topic, body[data-theme="dark"].ps-editorial-surface .pf-side > *, body[data-theme="dark"].ps-editorial-surface .projects-section, body[data-theme="dark"].ps-editorial-surface .ps-glass-card { background: #1a2c4f; border-color: var(--ps-card-border); box-shadow: var(--ps-shadow-standard); backdrop-filter: none; -webkit-backdrop-filter: none; } body[data-theme="dark"].ps-editorial-surface .work-hero-panel, body[data-theme="dark"].ps-editorial-surface .preview-main, body[data-theme="dark"].ps-editorial-surface .ps-glass-card--hero { box-shadow: var(--ps-shadow-primary); } body[data-theme="dark"].ps-editorial-surface .ps-metric, body[data-theme="dark"].ps-editorial-surface .ts-heat, body[data-theme="dark"].ps-editorial-surface .fun-fact-card, body[data-theme="dark"].ps-editorial-surface .ps-glass-card--compact { background: #1a2c4f; box-shadow: var(--ps-shadow-quiet); } @media (hover: hover) and (pointer: fine) { body[data-theme="dark"].ps-editorial-surface .ps-glass-card.is-interactive:hover, body[data-theme="dark"].ps-editorial-surface a.ps-card:hover, body[data-theme="dark"].ps-editorial-surface a.ct-card:hover, body[data-theme="dark"].ps-editorial-surface a.pf-topic:hover { border-color: #d8a928; box-shadow: var(--ps-shadow-hover); } } body[data-theme="dark"].ps-editorial-surface .ps-card--selected, body[data-theme="dark"].ps-editorial-surface .ps-card[aria-selected="true"], body[data-theme="dark"].ps-editorial-surface [aria-selected="true"].ct-card { border-color: var(--ps-card-border-active); background: #211e14; box-shadow: var(--ps-shadow-active); } body[data-theme="dark"].ps-editorial-surface .ps-glass-card.is-interactive:focus-visible, body[data-theme="dark"].ps-editorial-surface a.ps-card:focus-visible, body[data-theme="dark"].ps-editorial-surface a.ct-card:focus-visible { outline: 3px solid rgba(216, 169, 40, 0.65); outline-offset: 4px; } /* Skills constellation labels were lifted to light-blue for the navy field; on the black stage they become off-white with gold-lit orbs. */ body[data-theme="dark"].ps-editorial-surface .skf-act__head { color: #9aa5b8; } body[data-theme="dark"].ps-editorial-surface .skf-orb__name { color: #f2f4f8; text-shadow: none; } body[data-theme="dark"].ps-editorial-surface .skf-orb__ball { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 4px 24px rgba(216, 169, 40, 0.22); background: radial-gradient( circle at 32% 28%, rgba(255, 255, 255, 0.28), rgba(216, 169, 40, 0.14) 60%, rgba(0, 0, 0, 0.2) ); }