/* ========================================================= Landing people-card frame One visual source for the public Hero, authenticated Home Hero, KinRoots, KinLine, KinSight, and KinJourney portraits. ========================================================= */ body.landing-page { --landing-person-frame-dark-start: #6f431e; --landing-person-frame-gold-start: #c18a42; --landing-person-frame-gold-mid: #f1d79a; --landing-person-frame-light: #fff0bd; --landing-person-frame-gold-end: #c28a42; --landing-person-frame-dark-end: #74451f; --landing-person-frame-grain: rgba(92, 51, 19, 0.14); --landing-person-frame-border-color: rgba(105, 63, 26, 0.8); --landing-person-frame-outline-color: rgba(255, 236, 184, 0.52); --landing-person-frame-inner-color: rgba(255, 245, 209, 0.46); /* Smooth metal replaces the former diagonal grain so unloaded portraits never expose striped placeholders in KinLine, KinSight, or KinJourney. */ --landing-person-frame-gradient: linear-gradient( 135deg, var(--landing-person-frame-dark-start) 0%, var(--landing-person-frame-gold-start) 18%, var(--landing-person-frame-gold-mid) 42%, var(--landing-person-frame-light) 52%, var(--landing-person-frame-gold-end) 72%, var(--landing-person-frame-dark-end) 100% ); /* Both Hero portrait sets use this same 20%-thinner frame construction. */ --landing-person-frame-hero-band: clamp(2.4px, 0.464vw, 4px); --landing-person-frame-hero-edge: 0.8px; --landing-person-frame-hero-outline: 0.8px; --landing-person-frame-hero-outline-offset: -1.6px; --landing-person-frame-hero-inner-line: 0.8px; --landing-person-frame-hero-shadow: 0 1rem 1.55rem rgba(69, 39, 15, 0.23), 0 0.3rem 0.48rem rgba(69, 39, 15, 0.22), 0 0 0 1px rgba(102, 60, 24, 0.2), inset 0 2px 1px rgba(255, 246, 211, 0.8), inset 0 -3px 4px rgba(69, 39, 15, 0.42); --landing-person-frame-hero-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(69, 39, 15, 0.24); /* Feature-section frame source of truth. */ --landing-person-frame-feature-band: clamp(1.8px, 0.348vw, 3px); --landing-person-frame-feature-inner-line: 0.69px; --landing-person-frame-kinsight-band: clamp(0.9px, 0.174vw, 1.5px); --landing-person-frame-kinsight-inner-line: 0.345px; --landing-person-frame-feature-shadow-near: rgba(69, 39, 15, 0.11); --landing-person-frame-feature-shadow-far: rgba(69, 39, 15, 0.08); } /* Shared positioning only. Visual ownership is split between Hero and features below. */ body.landing-page .landing-person-card-frame { position: relative; isolation: isolate; overflow: hidden; } body.landing-page .landing-person-card-frame::before, body.landing-page .landing-person-card-frame::after { content: ""; position: absolute; border-radius: inherit; pointer-events: none; } /* Public and authenticated Hero portraits consume the exact same frame source. */ body.landing-page .landing-person-card-frame--hero { padding: var(--landing-person-frame-hero-band); border: var(--landing-person-frame-hero-edge) solid var(--landing-person-frame-border-color); outline: var(--landing-person-frame-hero-outline) solid var(--landing-person-frame-outline-color); outline-offset: var(--landing-person-frame-hero-outline-offset); background: var(--landing-person-frame-gradient); background-size: 180% 180%; box-shadow: var(--landing-person-frame-hero-shadow); } body.landing-page .landing-person-card-frame--hero::before, body.landing-page .landing-person-card-frame--hero::after { inset: var(--landing-person-frame-hero-band); z-index: 2; } body.landing-page .landing-person-card-frame--hero::before { border: var(--landing-person-frame-hero-inner-line) solid var(--landing-person-frame-inner-color); box-shadow: var(--landing-person-frame-hero-inner-shadow); } body.landing-page .landing-person-card-frame--hero::after { background: radial-gradient(circle at 30% 18%, rgba(255, 247, 219, 0.13), transparent 42%); mix-blend-mode: soft-light; opacity: 0.72; } /* * Unified feature frame. KinJourney cards inherit --sequence-scale from their * animated wrapper; dividing by it prevents transforms from visually changing * border and shadow thickness. KinSight swaps only the centralized source * measurements below, keeping the same palette and construction at 50% width. */ body.landing-page .landing-person-card-frame:not(.landing-person-card-frame--hero) { --landing-person-frame-source-band: var(--landing-person-frame-feature-band); --landing-person-frame-source-inner-line: var(--landing-person-frame-feature-inner-line); --landing-person-frame-render-scale: 1; --landing-person-frame-render-band: var(--landing-person-frame-source-band); --landing-person-frame-render-inner-line: var(--landing-person-frame-source-inner-line); --landing-person-frame-render-shadow-near-y: 5px; --landing-person-frame-render-shadow-near-blur: 7px; --landing-person-frame-render-shadow-far-y: 10px; --landing-person-frame-render-shadow-far-blur: 16px; border: 0; outline: 0; box-shadow: 0 var(--landing-person-frame-render-shadow-near-y) var(--landing-person-frame-render-shadow-near-blur) var(--landing-person-frame-feature-shadow-near), 0 var(--landing-person-frame-render-shadow-far-y) var(--landing-person-frame-render-shadow-far-blur) var(--landing-person-frame-feature-shadow-far); } body.landing-page [data-ks-compare-lab] .ks-person-card__body.landing-person-card-frame { --landing-person-frame-source-band: var(--landing-person-frame-kinsight-band); --landing-person-frame-source-inner-line: var(--landing-person-frame-kinsight-inner-line); } /* Modern browsers counter-scale KinJourney's animated cards. The base values above remain a safe, fully styled fallback where typed division is absent. */ @supports (width: calc(1px / 1)) { body.landing-page .landing-person-card-frame:not(.landing-person-card-frame--hero) { --landing-person-frame-render-scale: var(--sequence-scale, 1); --landing-person-frame-render-band: calc(var(--landing-person-frame-source-band) / var(--landing-person-frame-render-scale)); --landing-person-frame-render-inner-line: calc(var(--landing-person-frame-source-inner-line) / var(--landing-person-frame-render-scale)); --landing-person-frame-render-shadow-near-y: calc(5px / var(--landing-person-frame-render-scale)); --landing-person-frame-render-shadow-near-blur: calc(7px / var(--landing-person-frame-render-scale)); --landing-person-frame-render-shadow-far-y: calc(10px / var(--landing-person-frame-render-scale)); --landing-person-frame-render-shadow-far-blur: calc(16px / var(--landing-person-frame-render-scale)); } } body.landing-page .landing-person-card-frame:not(.landing-person-card-frame--hero)::before { inset: 0; z-index: 4; padding: var(--landing-person-frame-render-band); background: var(--landing-person-frame-gradient); background-size: 180% 180%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } body.landing-page .landing-person-card-frame:not(.landing-person-card-frame--hero)::after { inset: var(--landing-person-frame-render-band); z-index: 4; padding: var(--landing-person-frame-render-inner-line); border: 0; background: var(--landing-person-frame-inner-color); box-shadow: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } body.landing-page [data-ks-compare-lab] .ks-person-card__body.landing-person-card-frame .ks-portrait-frame img { border: 0; } /* Stable, untextured surfaces remain visible while feature portraits decode. */ body.landing-page .timeline-preview-avatar-frame, body.landing-page .timeline-preview-horizontal__portrait, body.landing-page [data-ks-compare-lab] .ks-portrait-frame, body.landing-page .migration-map-experience .map-sequence-photo { background: linear-gradient(180deg, rgba(246, 232, 202, 0.98), rgba(231, 205, 157, 0.94)) !important; } body.landing-page.landing-portraits-managed [data-landing-portrait] { opacity: 0; transition: opacity 180ms ease; } body.landing-page.landing-portraits-managed [data-landing-portrait].is-portrait-ready { opacity: 1; } @media (prefers-reduced-motion: reduce) { body.landing-page.landing-portraits-managed [data-landing-portrait] { transition: none; } } /* KinRoots is SVG-based but consumes the same feature tokens and metal palette. */ body.landing-page:not(.tree-page) #treeSvg .landing-person-frame-svg-stop--dark-start { stop-color: var(--landing-person-frame-dark-start); } body.landing-page:not(.tree-page) #treeSvg .landing-person-frame-svg-stop--gold-start { stop-color: var(--landing-person-frame-gold-start); } body.landing-page:not(.tree-page) #treeSvg .landing-person-frame-svg-stop--gold-mid { stop-color: var(--landing-person-frame-gold-mid); } body.landing-page:not(.tree-page) #treeSvg .landing-person-frame-svg-stop--light { stop-color: var(--landing-person-frame-light); } body.landing-page:not(.tree-page) #treeSvg .landing-person-frame-svg-stop--gold-end { stop-color: var(--landing-person-frame-gold-end); } body.landing-page:not(.tree-page) #treeSvg .landing-person-frame-svg-stop--dark-end { stop-color: var(--landing-person-frame-dark-end); } body.landing-page:not(.tree-page) #treeSvg .tree-node-card.landing-person-card-frame--svg { stroke: url(#landingPersonCardBorderGradient); stroke-width: var(--landing-person-frame-feature-band); paint-order: stroke fill; filter: drop-shadow(0 5px 7px var(--landing-person-frame-feature-shadow-near)) drop-shadow(0 10px 16px var(--landing-person-frame-feature-shadow-far)); } body.landing-page:not(.tree-page) #treeSvg .landing-person-card-frame-svg-grain { fill: none; stroke: url(#landingPersonCardGrainPattern); stroke-width: var(--landing-person-frame-feature-band); pointer-events: none; } body.landing-page:not(.tree-page) #treeSvg .landing-person-card-frame-svg-inner { fill: none; stroke: var(--landing-person-frame-inner-color); stroke-width: var(--landing-person-frame-feature-inner-line); pointer-events: none; } body.landing-page:not(.tree-page) #treeSvg .landing-person-frame-svg-grain-line { stroke: var(--landing-person-frame-grain); stroke-width: 1px; }