/* ================================================== PRODUCT SCHOLAR — INTERIOR PAGE STYLESHEET css/interior.css Loaded by every interior page (not the home page). Works alongside main.css, which provides brand tokens, reset, nav, and logo styles. TABLE OF CONTENTS ----------------- 1. Hide Pill Nav & Logo Mark 2. Watermark Offsets (per section) 3. Content Area 4. Section-Specific h1 Colors 5. Circle Containers — Parent Circles 6. Circle Labels (Parent) 7. Child Circle Wrappers & Dots 8. Child Labels (Inside Child Circles) 9. Entrance Animation 10. Mobile Fallback ================================================== */ /* ================================================== 1. HIDE PILL NAV & LOGO MARK Interior pages use corner circles for navigation. The bottom pill nav and PS mark are hidden. ================================================== */ #ps-nav, #ps-logo { display: none !important; } /* ================================================== 2. WATERMARK OFFSETS (PER SECTION) --wm-x / --wm-y are applied by circles.js as a CSS transform on the watermark element: transform: translate(calc(-50% + var(--wm-x)), calc(-50% + var(--wm-y))) Positive x = right, positive y = down. Each section shifts the watermark away from its active (large) corner so it doesn't clash. ================================================== */ body[data-section="training"] { --wm-x: 30%; --wm-y: 30%; } /* Active top-left → shift down-right */ body[data-section="resources"] { --wm-x: -30%; --wm-y: 30%; } /* Active top-right → shift down-left */ body[data-section="about"] { --wm-x: 30%; --wm-y: -30%; } /* Active bottom-left → shift up-right */ body[data-section="engagements"] { --wm-x: -30%; --wm-y: -30%; } /* Active bottom-right → shift up-left */ /* ================================================== 3. CONTENT AREA #content-area is the main text region. z-index: 1 sits above the watermark (z-index: 0) and below circles (z-index: 10+). PADDING STRATEGY (per-section): Only the ACTIVE corner has children fanned out, and they reach at most ~160px along both axes at the corner diagonal. So the content area needs DEEP padding (175px) only on the active corner's two sides, and modest padding (110px) everywhere else — the inactive circles at rest show only ~60px per axis. Which two sides are deep depends on the active section's corner, hence the four body[data-section] overrides below. Padding shorthand order: top / right / bottom / left. If circles overlap content after tuning circle sizes in circles.js, raise 175px; if the page feels empty, lower 110px. ================================================== */ #content-area { position: relative; z-index: 1; padding: 110px; /* Fallback if data-section is missing */ min-height: 100vh; /* Background: PSOffWhite — inherits from body in main.css */ /* CONTENT FADE: Content is only visible when no circle transition is running. circles.js adds 'ic-content-hidden' to immediately on load and when a transition starts; it removes the class once the circles have settled, fading the content in. 200ms must match CONTENT_FADE_MS in circles.js. */ transition: opacity 200ms ease; } /* Deep padding on the active corner's two sides only */ body[data-section="training"] #content-area { padding: 175px 110px 110px 175px; } /* Active top-left */ body[data-section="resources"] #content-area { padding: 175px 175px 110px 110px; } /* Active top-right */ body[data-section="about"] #content-area { padding: 110px 110px 175px 175px; } /* Active bottom-left */ body[data-section="engagements"] #content-area { padding: 110px 175px 175px 110px; } /* Active bottom-right */ /* Hidden state — applied/removed by circles.js. If circles.js fails to run (e.g. unknown data-section), the class is never added and content stays visible — a safe fallback. */ body.ic-content-hidden #content-area { opacity: 0; } /* ================================================== 4. SECTION-SPECIFIC H1 COLORS The page h1 uses the active section's color, connecting the text visually to the corner circle. ================================================== */ body[data-section="training"] #content-area h1 { color: var(--ps-green); } body[data-section="resources"] #content-area h1 { color: var(--ps-red); } body[data-section="about"] #content-area h1 { color: var(--ps-blue); } body[data-section="engagements"] #content-area h1 { color: var(--ps-orange); } #content-area h1 { font-family: var(--font-primary); font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--space-4); } #content-area p { /* 15px (was 16px --text-base) — slightly smaller per design review, paired with the reduced navigation footprint. */ font-size: 0.9375rem; line-height: 1.7; max-width: 60ch; margin-bottom: var(--space-4); color: var(--ps-off-black); } /* ================================================== 5. CIRCLE CONTAINERS — PARENT CIRCLES .ic-parent is position:fixed, centered on its corner. One quarter is visible; three quarters bleed off-screen. Width/height and top/right/bottom/left are set inline by circles.js. CSS transitions here animate size and position changes smoothly. ================================================== */ .ic-parent { position: fixed; z-index: 10; border-radius: 50%; cursor: pointer; /* No shadow, no gradient — flat/2D per Ergo-Tactile spec */ /* This CSS transition governs the inactive-parent HOVER grow/shrink. (390ms = 30% slower than the original 300ms, per design review.) The entrance and exit zooms do NOT use this — circles.js sets inline transitions for those with TRANSITION_ENTER_MS / TRANSITION_EXIT_MS, then clears them so hover uses this rule. */ transition: width 390ms cubic-bezier(0.34, 1.56, 0.64, 1), height 390ms cubic-bezier(0.34, 1.56, 0.64, 1), top 390ms cubic-bezier(0.34, 1.56, 0.64, 1), left 390ms cubic-bezier(0.34, 1.56, 0.64, 1), right 390ms cubic-bezier(0.34, 1.56, 0.64, 1), bottom 390ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* Subtle brightness lift on hover — active parent */ .ic-parent.ic-active:hover { filter: brightness(1.05); } /* ================================================== 6. CIRCLE LABELS (PARENT) .ic-label is a flex column container; each line of the label is an .ic-label-line child span. This allows multi-line labels (e.g. "Product / Scholar™") to stack naturally without wrapping mid-word. ACTIVE PARENT: always visible. INACTIVE PARENT: hidden at rest, visible on hover. PLACEMENT: positioned inside the visible quarter of the circle (the inner arc), near the vertical edge of the circle with breathing room from the curved outer edge. Each corner's visible quarter is a different inner quadrant: top-left → inner quadrant = bottom-right of circle top-right → inner quadrant = bottom-left of circle bottom-left → inner quadrant = top-right of circle bottom-right → inner quadrant = top-left of circle We position the label toward the inner vertical edge (the edge closest to the center of the viewport) with right/left set near that edge, and anchor vertically within the visible arc. pointer-events: none so clicks pass through to the circle. ================================================== */ .ic-label { /* FIXED POSITIONING (important): Labels are position:fixed — anchored to the VIEWPORT corner, not to the circle div. The circle grows, shrinks, and flies during hover and transitions; the label never moves with it. It only FADES in and out, always at the same spot: LABEL_EDGE_PAD (10px) inside the two screen edges of its corner (see placement below). This also makes label placement immune to resize and to any animation timing — a class of bugs the old in-circle anchoring had. */ position: fixed; pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; /* left-align lines relative to each other */ font-family: var(--font-primary); /* 9px / 0.06em (was 10px / 0.08em): the inset geometry shows a flatter cap with less room, and the longest label ("ENGAGEMENTS") must fit inside it. If labels look cramped, grow the parent diameter/inset pair in circles.js rather than this font size. */ font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; line-height: 1.3; text-align: left; /* Labels ONLY fade — position never animates */ transition: opacity var(--transition-base); } /* Individual line within the label */ .ic-label-line { display: block; white-space: nowrap; } /* --- Label visibility --- ALL label visibility is gated on body.ic-nav-settled, which circles.js adds once the circles have finished arriving (after the entrance zoom, or immediately on a sibling arrival). Without the gate, a viewport-fixed label would sit at its corner while the circle is still flying in. Labels fade out during exits via inline styles set by runSectionTransition(). */ /* Active parent label: visible once nav has settled */ body.ic-nav-settled .ic-parent.ic-active .ic-label { opacity: 1; } /* Inactive parent label: hidden at rest, shown on hover */ .ic-parent.ic-inactive .ic-label { opacity: 0; } body.ic-nav-settled .ic-parent.ic-inactive:hover .ic-label, body.ic-nav-settled .ic-parent.ic-inactive.ic-hover-open .ic-label { opacity: 1; } /* --- Label placement by corner --- Static viewport coordinates: LABEL_EDGE_PAD-equivalent (10px) inside both screen edges of the label's corner — the flattest, roomiest part of the circle's visible cap at every size the circle takes (rest / hover / active). Because labels are position:fixed, these values are independent of circle geometry; if you enlarge the 10px offsets, re-check that labels still sit inside the SMALLEST circle state they're visible in (hover size, set in circles.js). Right-side corners right-align so multi-line labels hug the edge. */ .ic-parent[data-corner="top-left"] .ic-label { top: 10px; left: 10px; } .ic-parent[data-corner="top-right"] .ic-label { top: 10px; right: 10px; } .ic-parent[data-corner="bottom-left"] .ic-label { bottom: 10px; left: 10px; } .ic-parent[data-corner="bottom-right"] .ic-label { bottom: 10px; right: 10px; } .ic-parent[data-corner="top-right"] .ic-label, .ic-parent[data-corner="bottom-right"] .ic-label { align-items: flex-end; /* Right-align lines toward the screen edge */ text-align: right; } /* ================================================== 7. CHILD CIRCLE WRAPPERS & DOTS .ic-child-wrap is position:fixed, centered on its target point via transform: translate(-50%, -50%). Hidden state: opacity 0, scaled down. Visible state (.ic-child-active): opacity 1, scale 1. Appearance: spring easing (bouncy) — matches home.js. Retraction: cubic-bezier undershoot — set inline by JS. ================================================== */ .ic-child-wrap { position: fixed; z-index: 12; transform: translate(-50%, -50%) scale(0.4); opacity: 0; pointer-events: none; transition: opacity 220ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); } .ic-child-wrap.ic-child-active { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: all; } /* Child dot — colored circle */ .ic-child-dot { border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; /* No shadow, no gradient — flat/2D */ transition: transform var(--transition-fast), filter var(--transition-fast); } .ic-child-dot:hover { transform: scale(1.1); filter: brightness(1.15); } /* Current page child: subtle inner glow as the "active" indicator */ .ic-child-wrap.ic-child-current .ic-child-dot { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); } /* ================================================== 8. CHILD LABELS (INSIDE CHILD CIRCLES) White text absolutely centered inside the dot. pointer-events: none so clicks register on the dot. ================================================== */ .ic-child-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; font-family: var(--font-primary); font-size: 9px; font-weight: 600; letter-spacing: 0.04em; color: #fff; text-align: center; line-height: 1.25; /* Allow wrapping across two lines for longer labels */ width: 88%; white-space: normal; overflow-wrap: break-word; } /* ================================================== 9. ENTRANCE / SETTLE CLASSES circles.js adds these to : .ic-entrance-done — after the entrance styles are applied (first rAF double-tick). Hook for future overrides. .ic-nav-settled — once circles have finished arriving (entrance zoom complete, or immediately on a sibling arrival). Gates all parent-label visibility above. .ic-no-fade — on SIBLING arrivals only. Cancels the page-load fade-in (pageFadeIn in main.css) so the page appears instantly, visually continuous with the page just left — the circles don't blink. ================================================== */ body.ic-entrance-done .ic-parent { /* transitions already set on .ic-parent */ } body.ic-no-fade { animation: none; opacity: 1; } /* ================================================== 10. MOBILE FALLBACK Circle UI is desktop-only (requires mouse + viewport space for large circles). On narrow viewports, hide circles and show a simple text nav instead. ================================================== */ #ic-mobile-fallback { display: none; } /* BREAKPOINT: 640px (was 768px). The inset circle geometry takes up much less horizontal space, so non-maximized laptop windows no longer need the fallback. Raise this back toward 768px if circles feel cramped on narrow windows after visual review. */ @media (max-width: 639px) { /* Hide all circle elements */ .ic-parent, .ic-child-wrap { display: none !important; } /* Hide main content (replaced by fallback) */ #content-area { display: none; } /* Show mobile fallback */ #ic-mobile-fallback { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-8); } .ic-mobile-message { text-align: center; max-width: 320px; } .ic-mobile-logo { margin: 0 auto var(--space-6); } .ic-mobile-logo img { width: 48px; height: 48px; opacity: 0.6; margin: 0 auto; } .ic-mobile-heading { font-size: var(--text-xl); font-weight: 700; color: var(--ps-off-black); margin-bottom: var(--space-2); } .ic-mobile-section { font-size: var(--text-sm); color: var(--ps-blue-tint-4); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: var(--space-6); } .ic-mobile-nav { display: flex; flex-direction: column; gap: var(--space-3); } .ic-mobile-nav a { display: block; padding: var(--space-3) var(--space-6); border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: 600; color: #fff; background-color: var(--ps-blue); text-decoration: none; transition: filter var(--transition-fast); } .ic-mobile-nav a:hover { filter: brightness(1.12); } }