/* ================================================== PRODUCT SCHOLAR — HOME PAGE STYLES css/home.css Loaded only by index.html. Covers: full-viewport stage, primary circle base styles, child circle and label styles, always-visible parent labels (centered inside circles), and mobile fallback. All colors reference CSS custom properties defined in main.css. No hex values are hardcoded here. Exception: gradient stops (see section 3 note). TABLE OF CONTENTS ----------------- 1. Circles Stage (full-viewport container) 2. Primary Circles — Base Styles 3. Primary Circle — Color Variants & Drop Shadows 4. Primary Circle — Hover / Depressed State (scale only) 5. Parent Circle Labels (always visible, centered inside) 6. Child Circle Wrappers 7. Child Circle Dots 8. Child Circle Labels 9. Mobile Fallback ================================================== */ /* ================================================== 1. CIRCLES STAGE Full-viewport div that holds all circle elements. position: fixed so it covers the viewport at all times. overflow: hidden clips circles near the edges. ================================================== */ #circles-stage { position: fixed; /* Fills viewport regardless of scroll */ inset: 0; /* top:0 right:0 bottom:0 left:0 shorthand */ width: 100vw; height: 100vh; overflow: hidden; /* Clips any circles near edges */ /* STACKING FIX: The watermark (injected by home.js onto ) sits at z-index: 0. The stage must sit ABOVE it (z-index: 1) so circles paint on top of the watermark — otherwise the watermark overlays the circles. No background-color here: the stage must stay transparent so the watermark shows through in the gaps between circles. The page background is PSOffWhite via in main.css. */ z-index: 1; } /* ================================================== 2. PRIMARY CIRCLES — BASE STYLES .circle is the shared class for all four primary circles. Sizes and positions are set inline by home.js (so they can respond to viewport dimensions). Ergo-Tactile surface treatment: - Radial gradient: core color → darkened toward edge - Inset box-shadow: soft inner glow (lighter tint) - Drop shadow: 0px 12px 24px 0px rgba(52, 52, 52, 0.15) overflow: visible is required so that child circles, which are positioned outside the parent's bounding box, are not clipped. HOVER: Scale depression only. No brightness or color change. ================================================== */ .circle { position: absolute; border-radius: 50%; cursor: pointer; /* Centering: home.js sets top/left to the circle's center point. This transform shifts it back by half its own size so it renders centered on that point. */ transform: translate(-50%, -50%); /* Transition for scale depression only. filter removed — no brightness change on hover. */ transition: transform 120ms ease, box-shadow 120ms ease; /* Prevent text selection on rapid clicks */ user-select: none; /* Allow child circles and labels to render outside this box */ overflow: visible; } /* Hover: scale depression only — no color or brightness change */ .circle:hover { transform: translate(-50%, -50%) scale(0.97); } /* Active (mousedown) state: sink further */ .circle:active { transform: translate(-50%, -50%) scale(0.95); } /* ================================================== 3. PRIMARY CIRCLE — COLOR VARIANTS & DROP SHADOWS Each circle has a data-circle attribute set by home.js. Gradient formula per brand spec: 0% = core color brightened (soft highlight at center) 45% = core color — brand exact 100% = core color darkened by the specified amount Darkening targets: resources (PSRed): 18% darker at outer stop training (PSGreen): 12% darker at outer stop product-scholar (PSBlue): ~8% darker (unchanged from previous) engagements (PSOrange): 18% darker at outer stop Drop shadow added to all circles: 0px 12px 24px 0px rgba(52, 52, 52, 0.15) NOTE: Gradient stop values are literal hex because CSS custom properties cannot be lightened/darkened inside radial-gradient(). All stops are derived from brand palette values. Darkening math (multiply each RGB channel by factor): PSRed #993955 × 0.82 → #7D2F46 PSGreen #218380 × 0.88 → #1D7371 PSBlue #322cdd × 0.92 → #2923c4 (unchanged) PSOrange #de9151 × 0.82 → #B67742 ================================================== */ /* Resources — PSRed (#993955) — 18% darker outer stop */ .circle[data-circle="resources"] { background: radial-gradient( circle at 42% 40%, #b34567 0%, /* PSRed brightened ~8% at core */ #993955 45%, /* PSRed — brand exact */ #7D2F46 100% /* PSRed darkened 18% at outer edge */ ); box-shadow: inset 0 0 28px rgba(179, 69, 103, 0.35), /* Inner glow */ 0px 20px 40px 6px rgba(52, 52, 52, 0.40); /* Drop shadow */ } /* Training — PSGreen (#218380) — 12% darker outer stop */ .circle[data-circle="training"] { background: radial-gradient( circle at 42% 40%, #28a09c 0%, /* PSGreen brightened ~8% at core */ #218380 45%, /* PSGreen — brand exact */ #1D7371 100% /* PSGreen darkened 12% at outer edge */ ); box-shadow: inset 0 0 28px rgba(50, 170, 165, 0.35), 0px 20px 40px 6px rgba(52, 52, 52, 0.40); } /* Product Scholar™ — PSBlue (#322cdd) — ~8% darker outer stop (unchanged) */ .circle[data-circle="product-scholar"] { background: radial-gradient( circle at 42% 40%, #4a45e4 0%, /* PSBlue brightened ~8% at core */ #322cdd 45%, /* PSBlue — brand exact */ #2923c4 100% /* PSBlue darkened ~8% at outer edge */ ); box-shadow: inset 0 0 28px rgba(119, 115, 232, 0.35), 0px 20px 40px 6px rgba(52, 52, 52, 0.40); } /* Engagements — PSOrange (#de9151) — 18% darker outer stop */ .circle[data-circle="engagements"] { background: radial-gradient( circle at 42% 40%, #f0b878 0%, /* PSOrange brightened ~15% at core */ #de9151 45%, /* PSOrange — brand exact */ #B67742 100% /* PSOrange darkened 18% at outer edge */ ); box-shadow: inset 0 0 28px rgba(240, 184, 120, 0.40), 0px 20px 40px 6px rgba(52, 52, 52, 0.40); } /* ================================================== 4. PRIMARY CIRCLE — HOVER / DEPRESSED STATE Scale depression only — no shadow changes, no brightness or color shift on hover. The base .circle:hover rule (section 2) handles scale. No per-circle overrides needed. ================================================== */ /* No per-circle hover rules required. All circles share the same scale depress behavior from .circle:hover in section 2. */ /* ================================================== 5. PARENT CIRCLE LABELS (HOVER-TRIGGERED, INSIDE) A .parent-label span is added inside each primary circle by home.js. It is HIDDEN at rest and fades in on mouseover via the .circle:hover selector. Position: absolutely centered within the circle. Color: PSOffWhite (white text on colored circle). Font size: 12px for ALL parent circles, including Product Scholar™ (which may wrap to two lines — do not reduce font size to compensate). FADE: opacity 0 → 1 over 80ms on hover enter; opacity 1 → 0 over 80ms on hover leave (same duration both directions). pointer-events: none ensures clicks pass through the label to the circle div behind it. ================================================== */ .parent-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-primary); font-size: var(--text-xs); /* 12px — all circles including Product Scholar™ */ font-weight: 400; color: var(--ps-off-white); white-space: normal; /* Allow wrapping for longer labels */ max-width: 80%; /* Stay within circle bounds */ text-align: center; letter-spacing: 0.02em; line-height: 1.3; /* Never intercept clicks — pass through to the circle */ pointer-events: none; /* Hidden at rest */ opacity: 0; /* 80ms fade both directions */ transition: opacity 80ms ease; } /* Label fades in when parent circle is hovered */ .circle:hover .parent-label { opacity: 1; } /* No product-scholar font-size override — 12px applies to all circles */ /* ================================================== 6. CHILD CIRCLE WRAPPERS Each child is a .child-wrap div containing: - .child-dot — the visible circle - .child-label — the text below the circle .child-wrap is absolutely positioned by home.js at the child's center point. APPEARANCE (adding .child-active): CSS spring easing — cubic-bezier(0.34, 1.56, 0.64, 1), 280ms, staggered by data-child-index × 60ms. RETRACTION (removing .child-active): Handled entirely in home.js closeChildren() by setting inline transition styles before removing the class. Easing: cubic-bezier(0.36, 0, 0.66, -0.56), 180ms per child, reverse-order stagger at 40ms intervals. The inline styles override this CSS transition during retraction, then are cleared after completion so the next appearance uses CSS spring easing again. ================================================== */ .child-wrap { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; /* Space between dot bottom and label top */ /* Start state: collapsed and invisible */ opacity: 0; transform: translate(-50%, -50%) scale(0); /* Hide until JS adds .child-active */ pointer-events: none; /* Appearance spring easing — applied when .child-active is added. Retraction uses inline styles set by home.js instead. */ transition: opacity 280ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* Active state: fully visible, at final position */ .child-wrap.child-active { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: all; } /* Appearance stagger delays — applied only when .child-active is present. home.js sets data-child-index (0, 1, 2) on each .child-wrap. index 0 = first to appear (0ms), index 2 = last (120ms). */ .child-wrap.child-active[data-child-index="0"] { transition-delay: 0ms; } .child-wrap.child-active[data-child-index="1"] { transition-delay: 60ms; } .child-wrap.child-active[data-child-index="2"] { transition-delay: 120ms;} /* ================================================== 7. CHILD CIRCLE DOTS 56px diameter. Color tint matches the parent section. Gradient depth matches the corresponding parent circle. Darkening at outer stop — same targets as parents: resources: 18% darker → #7D2F46 training: 12% darker → #1D7371 product-scholar: ~8% darker → #2923c4 engagements: 18% darker → #B67742 No drop shadow on child circles (per spec). ================================================== */ .child-dot { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; cursor: pointer; transition: transform 150ms ease; } .child-dot:hover { transform: scale(1.06); } /* Resources child dots — PSRed tint → PSRed, 18% darker outer */ .child-wrap[data-section="resources"] .child-dot { background: radial-gradient(circle at 42% 40%, #b34567, #993955, #7D2F46); box-shadow: inset 0 0 10px rgba(179, 69, 103, 0.40), 0px 8px 16px 2px rgba(52, 52, 52, 0.25); } /* Training child dots — PSGreen tint → PSGreen, 12% darker outer */ .child-wrap[data-section="training"] .child-dot { background: radial-gradient(circle at 42% 40%, #28a09c, #218380, #1D7371); box-shadow: inset 0 0 10px rgba(50, 170, 165, 0.35), 0px 8px 16px 2px rgba(52, 52, 52, 0.25); } /* Product Scholar child dots — PSBlue tint → PSBlue, ~8% darker outer */ .child-wrap[data-section="product-scholar"] .child-dot { background: radial-gradient(circle at 42% 40%, #4a45e4, #322cdd, #2923c4); box-shadow: inset 0 0 10px rgba(119, 115, 232, 0.35), 0px 8px 16px 2px rgba(52, 52, 52, 0.25); } /* Engagements child dots — PSOrange tint → PSOrange, 18% darker outer */ .child-wrap[data-section="engagements"] .child-dot { background: radial-gradient(circle at 42% 40%, #f0b878, #de9151, #B67742); box-shadow: inset 0 0 10px rgba(240, 184, 120, 0.40), 0px 8px 16px 2px rgba(52, 52, 52, 0.25); } /* ================================================== 8. CHILD CIRCLE LABELS Text appears below the child dot, not inside it. Fades in 200ms after the child starts appearing (the last ~80ms of the 280ms emergence animation). ================================================== */ .child-label { font-family: var(--font-primary); font-size: var(--text-xs); /* 12px */ font-weight: 400; color: var(--ps-off-black); white-space: nowrap; text-align: center; letter-spacing: 0.01em; /* Label starts invisible */ opacity: 0; transition: opacity 80ms ease; /* Pointer events on the label also navigate */ cursor: pointer; } /* Label appears 200ms after wrapper starts animating — the last ~80ms of the 280ms emergence duration. */ .child-wrap.child-active .child-label { opacity: 1; transition-delay: 200ms; } /* Label hides immediately on retract (no delay) */ .child-wrap:not(.child-active) .child-label { transition-delay: 0ms; } /* External link label: append a small arrow indicator */ .child-label[data-external="true"]::after { content: ' ↗'; font-size: 0.8em; opacity: 0.6; } /* ================================================== 9. MOBILE FALLBACK Shown at viewports below 640px. Hides the circles stage entirely and shows a simple centered message with text links (the circle UI and the hidden pill nav are both unavailable on mobile). ================================================== */ /* Desktop: show stage, hide fallback */ @media (min-width: 640px) { #circles-stage { display: block; } #mobile-fallback { display: none; } } /* Mobile: hide stage, show fallback */ /* BREAKPOINT: 640px (was 768px) — matched to interior.css so the home page and interior pages switch to their fallbacks together. */ @media (max-width: 639px) { #circles-stage { display: none; } #mobile-fallback { display: flex; } } #mobile-fallback { position: fixed; inset: 0; align-items: center; justify-content: center; background-color: var(--ps-off-white); } .mobile-message { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-8); text-align: center; max-width: 280px; } .mobile-logo img { width: 52px; height: 52px; opacity: 0.7; } .mobile-heading { font-family: var(--font-primary); font-size: var(--text-lg); font-weight: 700; color: var(--ps-off-black); letter-spacing: 0.02em; } .mobile-body { font-family: var(--font-primary); font-size: var(--text-sm); font-weight: 400; color: var(--ps-blue-tint-3); line-height: 1.5; } /* Simple stacked links for mobile */ .mobile-nav { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-top: var(--space-2); } .mobile-nav a { font-family: var(--font-primary); font-size: var(--text-sm); font-weight: 600; color: var(--ps-blue); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); transition: color var(--transition-fast), background-color var(--transition-fast); } .mobile-nav a:hover { color: var(--ps-off-white); background-color: var(--ps-blue); } /* ================================================== 10. PILL NAV REMOVED FROM HOME PAGE The home page's only navigation is the circle UI. includes.js still injects the nav component (it is shared by every page), so it is hidden here instead of removed from the HTML. nav.js also skips its bottom-of-viewport reveal behavior on the home page — see the note in js/nav.js next to initHomePageReveal. ================================================== */ #ps-nav { display: none !important; }