/* ════════════════════════════════════════════════════════════════════════ JomPlan Public Website Phase (2026-09-21) — shared styles for the new public-agent pages: the Agents directory (agents.html), the individual Agent page shell (agent/index.html), and the JomPlan-specific additions to the homepage (index.html). Deliberately a NEW, additive file, loaded ALONGSIDE the existing assets/css/design-system.css — every color, radius and shadow below is read from that file's own custom properties (--navy-*, --gold-*, --gray-*, --r-*, --sh-*), so this stays visually consistent with the rest of the site without editing (or risking) that shared stylesheet. Nothing in this file is referenced by any existing page. ════════════════════════════════════════════════════════════════════════ */ /* ── Agent card (used on the homepage's featured strip and the directory) ── */ .jp-agent-card { background: var(--white); border: 1.5px solid var(--gray-100); border-radius: var(--r-xl); padding: 28px; text-decoration: none; display: flex; flex-direction: column; gap: 16px; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .jp-agent-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--navy-200); } .jp-agent-card-top { display: flex; align-items: center; gap: 16px; } .jp-agent-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--navy-100); flex-shrink: 0; border: 2px solid var(--gray-100); } .jp-agent-initials { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-700), var(--navy-500)); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem; flex-shrink: 0; letter-spacing: -0.02em; } .jp-agent-name { font-size: 1.05rem; font-weight: 800; color: var(--navy-800); line-height: 1.3; } .jp-agent-role { font-size: 0.8rem; color: var(--gray-500); font-weight: 600; margin-top: 2px; } .jp-agent-location { font-size: 0.8rem; color: var(--navy-500); font-weight: 600; display: flex; align-items: center; gap: 6px; } .jp-agent-location svg { flex-shrink: 0; } .jp-agent-cta { margin-top: auto; font-size: 0.82rem; font-weight: 700; color: var(--navy-500); display: inline-flex; align-items: center; gap: 6px; } .jp-agent-card:hover .jp-agent-cta { color: var(--gold-500); } /* ── Directory page layout ── */ .jp-directory-hero { background: var(--navy-900); padding: clamp(56px, 8vw, 88px) 0 clamp(40px, 5vw, 56px); text-align: center; } .jp-directory-hero h1 { color: var(--white); font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 14px; } .jp-directory-hero p { color: rgba(255,255,255,0.6); font-size: 1rem; max-width: 560px; margin: 0 auto; line-height: 1.7; } .jp-directory-body { padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 96px); } .jp-directory-layout { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 960px) { .jp-directory-layout { grid-template-columns: 0.9fr 1.1fr; align-items: start; gap: 48px; } } .jp-map-panel { background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: var(--r-xl); padding: 20px; position: sticky; top: 24px; } .jp-map-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 14px; } .jp-map-svg-wrap { position: relative; width: 100%; } .jp-map-svg-wrap svg { width: 100%; height: auto; display: block; } /* JOMPLAN PREMIUM MAP — PHASE 2 (2026-09-22): premium coverage-map treatment for the Agent Directory map (/agents.html, /zh/agents.html). Replaces the old always-visible oversized state circles with: a data-driven subtle gold tint on the real state geometry (Phase 1's geography/boundary layers, still populated once and never replaced — only classList is toggled here), small refined advisor markers shown ONLY for states with a live agent, and elegant state labels. See jomplan-map-data.js and JOMPLAN_PREMIUM_MAP_PHASE1_REPORT.md for the underlying geometry source. */ .jp-map-geography path { fill: var(--gray-100); stroke: none; transition: fill 0.25s ease; } .jp-map-geography path.has-agents { fill: rgba(201,168,76,0.14); } .jp-map-geography path.has-agents:hover { fill: rgba(201,168,76,0.22); } .jp-map-geography path.active { fill: rgba(201,168,76,0.30); } .jp-map-boundaries path { fill: none; stroke: var(--gray-300); stroke-width: 1; transition: stroke 0.25s ease, stroke-width 0.25s ease; } .jp-map-boundaries path.has-agents { stroke: rgba(201,168,76,0.55); } .jp-map-boundaries path.active { stroke: var(--gold-500); stroke-width: 1.5; } /* State labels — small, muted, non-dominant. A handful of states in the crowded central cluster (Selangor/KL/Putrajaya) get a thin leader line from a hand-placed label position back to their real marker point, instead of stacking labels on top of each other. Text content always comes from JomPlanMapData (nameEn/nameZh) — this file only supplies the generic look. */ .jp-map-label { font-size: 7.5px; font-weight: 600; fill: var(--gray-500); text-anchor: middle; pointer-events: none; } .jp-map-label.has-agents { fill: var(--navy-700); font-weight: 700; } .jp-map-label.active { fill: var(--navy-900); } .jp-map-leader { stroke: var(--gray-300); stroke-width: 0.6; pointer-events: none; } .jp-map-leader.has-agents { stroke: rgba(201,168,76,0.55); } .jp-map-leader.active { stroke: var(--gold-500); } /* Advisor markers — shown only for states with a live agent; no dot at all for empty states, so the map never implies coverage that doesn't exist. A larger transparent hit-area keeps the click/tap target comfortable without the visible marker itself needing to be a giant bubble. */ .jp-map-marker { cursor: pointer; } .jp-map-marker-hit { fill: transparent; } .jp-map-marker-halo { fill: none; stroke: rgba(201,168,76,0.35); stroke-width: 1; transition: stroke 0.2s ease, stroke-width 0.2s ease; } .jp-map-marker-dot { fill: var(--gold-400); filter: drop-shadow(0 0 3px rgba(201,168,76,0.5)); transition: fill 0.2s ease; } .jp-map-marker-count { fill: var(--navy-900); font-size: 8.5px; font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; } .jp-map-marker:hover .jp-map-marker-dot, .jp-map-marker:focus-visible .jp-map-marker-dot { fill: var(--gold-300); } .jp-map-marker:hover .jp-map-marker-halo { stroke: var(--gold-500); stroke-width: 1.5; } .jp-map-marker.active .jp-map-marker-halo { stroke: var(--gold-600); stroke-width: 2; } .jp-map-marker:focus-visible { outline: none; } .jp-map-marker:focus-visible .jp-map-marker-halo { stroke: var(--navy-700); stroke-width: 2; } .jp-map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 0.72rem; color: var(--gray-500); margin-top: 14px; } .jp-map-legend-item { display: flex; align-items: center; gap: 6px; } .jp-map-legend-dot-gold { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-400); flex-shrink: 0; box-shadow: 0 0 0 1px rgba(201,168,76,0.3); } .jp-map-legend-dot-outline { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-100); border: 1px solid var(--gray-300); flex-shrink: 0; } .jp-map-empty { font-size: 0.82rem; color: var(--gray-400); text-align: center; padding: 32px 12px; } .jp-directory-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .jp-filter-chip { border: 1.5px solid var(--gray-200); background: var(--white); color: var(--gray-600); font-size: 0.78rem; font-weight: 600; padding: 7px 16px; border-radius: var(--r-full); cursor: pointer; transition: all 0.15s ease; } .jp-filter-chip:hover { border-color: var(--navy-300); } .jp-filter-chip.active { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); } .jp-agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .jp-directory-count { font-size: 0.85rem; color: var(--gray-500); margin-bottom: 16px; } .jp-directory-state { text-align: center; padding: 64px 16px; color: var(--gray-400); font-size: 0.9rem; } /* ── Individual agent page ── */ /* JOMPLAN AGENT PROFILE — PHASE 1 (2026-09-23): premium micro-site visual pass. Every selector below is scoped with the .jp-agent-page-* / .jp-agent- bio / .jp-agent-details* / .jp-agent-specialties* / .jp-agent-services / .jp-contact-* prefixes already used by the individual profile page only -- nothing under "Agent card" / "Directory page layout" / "Homepage" above is touched, so the Agents Directory, homepage featured strip and coverage section keep their exact current appearance. See JOMPLAN_AGENT_PROFILE_PHASE1_IMPLEMENTATION_REPORT.md for the full before/after summary. */ /* JOMPLAN AGENT PROFILE — PHASE 1B (2026-09-23), OPTION A — OVERLAPPING PORTRAIT. Replaces Phase 1's square/circular-feeling left-aligned photo with a rectangular/vertical portrait pinned to the right of the hero on tablet+ that physically overlaps the navy/white boundary. The overlap is pure CSS: the photo stays in normal grid flow (so it still determines the hero's height, per the brief's §9) and is then visually shifted down with `transform: translateY(...)`, which does not affect layout, so the hero's own box is unaffected and the shifted pixels simply paint over the top of the content section below. `.jp-agent-page-body`'s padding-top is increased by the same amount (+ a breathing gap) so Advisor Snapshot / the contact card never sit under the portrait -- see that rule further below. No absolute positioning or negative margins are used, which keeps this overlap safe from horizontal-overflow and clipping issues (the brief's §5/§11 requirements) by construction. */ .jp-agent-page-hero { background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%); padding: clamp(40px, 6vw, 56px) 0 28px; overflow: visible; } .jp-agent-page-inner { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; text-align: center; } @media (min-width: 760px) { .jp-agent-page-hero { padding-bottom: 0; } .jp-agent-page-inner { grid-template-columns: 1fr auto; gap: 40px; text-align: left; align-items: end; } } .jp-agent-page-heroinfo { display: flex; flex-direction: column; align-items: center; } @media (min-width: 760px) { .jp-agent-page-heroinfo { align-items: flex-start; padding-bottom: 8px; } } /* Portrait -- rectangular/vertical (NOT circular, per the brief's §6), with a restrained dark border, a thin gold accent ring and a soft shadow. Sized larger step by step (mobile → tablet → desktop) and shifted down with translateY only from the tablet breakpoint up, where it sits beside the text rather than below it -- see the comment above for why this creates the overlap without any layout-affecting positioning. */ .jp-agent-page-photo-wrap { display: inline-flex; margin: 0 auto; border-radius: 20px; border: 3px solid rgba(255,255,255,0.18); box-shadow: 0 0 0 1px rgba(201,168,76,0.35), var(--sh-2xl); } .jp-agent-page-photo { width: 220px; height: 280px; border-radius: 17px; object-fit: cover; object-position: top center; display: block; } .jp-agent-page-initials { width: 220px; height: 280px; border-radius: 17px; background: linear-gradient(135deg, var(--gold-400), var(--gold-300)); color: var(--navy-900); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 3.4rem; } /* Mobile keeps the photo below the text, in normal flow, with a small optional overlap into the content section (§13: "may still overlap slightly if it looks good, but it is NOT mandatory on mobile") -- kept modest specifically so it can never approach the fixed global nav. This base (mobile-first) rule MUST come before the ≥760px/≥1280px overrides below so the cascade's source-order tiebreak (equal selector specificity) resolves in their favor at wider widths, instead of this rule winning everywhere because it happened to be declared last. */ .jp-agent-page-hero .jp-agent-page-photo-wrap { transform: translateY(24px); } @media (min-width: 760px) { .jp-agent-page-hero .jp-agent-page-photo-wrap { transform: translateY(48px); margin: 0; } .jp-agent-page-photo, .jp-agent-page-initials { width: 250px; height: 320px; } } @media (min-width: 1280px) { .jp-agent-page-hero .jp-agent-page-photo-wrap { transform: translateY(72px); } .jp-agent-page-photo, .jp-agent-page-initials { width: 290px; height: 370px; } .jp-agent-page-initials { font-size: 4.4rem; } } .jp-agent-page-name { color: var(--white); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.9rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 8px; } .jp-agent-page-role { color: var(--gold-300); font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; } .jp-agent-page-location { color: rgba(255,255,255,0.6); font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 6px; justify-content: center; } @media (min-width: 760px) { .jp-agent-page-location { justify-content: flex-start; } } /* JOMPLAN AGENT PROFILE — PHASE 2 (2026-09-23). Professional Headline — deliberately understated (smaller, lighter weight, muted opacity) so it reads as supporting positioning text beneath the name/role, never competing with them for visual weight in an already-dense hero (per the architecture audit §19's own flagged risk). Centered on mobile to match every other hero line at that width; left-aligned with the rest of the text column from the tablet breakpoint up. */ .jp-agent-page-headline { color: rgba(255,255,255,0.72); font-size: 0.92rem; font-weight: 500; line-height: 1.6; margin: 0 0 6px; max-width: 46ch; } /* JOMPLAN AGENT PROFILE — PHASE 6D-2 (2026-09-24). The headline block can now hold two stacked lines (English then Chinese) instead of one plain string, per the bilingual profile brief's simplest worked example -- no extra labels, no visual distinction between the two lines beyond the language itself. p{margin:0} avoids the block growing taller than the original single-line version by more than the second line itself. */ .jp-agent-page-headline p { margin: 0; } .jp-agent-page-headline p + p { margin-top: 2px; } @media (min-width: 760px) { .jp-agent-page-headline { max-width: 40ch; } } .jp-agent-page-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.3); color: var(--gold-300); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--r-full); margin-bottom: 16px; } /* Hero primary CTA ("WhatsApp Me") -- shown only when the template emits it (agent.whatsappNumber present). Same WhatsApp green as the contact card's own WhatsApp button, for brand consistency, but a distinct class since it sits directly on the navy hero background rather than inside the white contact card. */ .jp-agent-page-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: #25D366; color: var(--white); font-size: 0.9rem; font-weight: 700; padding: 12px 24px; border-radius: var(--r-full); text-decoration: none; margin-top: 18px; box-shadow: 0 8px 20px rgba(37,211,102,0.35); transition: background 0.2s ease, transform 0.2s ease; } .jp-agent-page-cta:hover { background: #1EBE5A; transform: translateY(-1px); } .jp-agent-page-cta:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; } /* JOMPLAN AGENT PROFILE -- PHASE 4E (2026-09-24). "Hear My Introduction" -- compact voice-intro component in the hero identity column, between Location and the WhatsApp CTA (see agent-profile-template.js's render()). Reuses the exact gold-tinted-on-navy visual language already established by .jp-agent-page-badge above (rgba(201,168,76,...) tint + border, gold- 300 text) rather than inventing a new color pairing, so this reads as belonging to the same hero rather than as a bolted-on widget. Deliberately NOT the white/--gray-50 card treatment used by .jp-agent-details/ .jp-contact-card further down -- those belong to the white body section, this sits on the dark hero. Sized to stay compact/secondary next to the name and portrait: a small label, one line of muted supporting copy, and the browser's own native controls (no custom player chrome). Text-align is pinned to left explicitly because it sits inside .jp-agent-page-heroinfo, which centers its children on mobile and left-aligns them from 760px up (see that rule above) -- this component should never center its own internal label/sub/controls even while the surrounding column is itself centered on mobile. max-width keeps the native