/** * VMT Journey Dashboard — Front-End Styles (v1.3 redesign) * * All rules scoped to `.vmt-journey-dashboard`. Fully Divi-defensive: * - box-sizing reset on descendants * - explicit margin/padding/font-size on headings, paragraphs, lists * - a:not(.vmt-btn) overrides Divi's link color * - .vmt-btn backgrounds/colors/borders use !important (Divi aggressively * styles `.et_pb_button`, `button`, and nested anchors) * * @package VMT_Core * @since 1.3.0 */ /* ────────────────────────────────────────────────────────────────────────── * Design tokens * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard { --vmt-teal: #008092; --vmt-teal-dark: #005A68; --vmt-teal-lt: #E6F2F4; --vmt-coral: #E75044; --vmt-coral-dark: #C63B2F; --vmt-amber: #CC8614; --vmt-amber-lt: #E0A448; --vmt-surface: #F5F4F1; --vmt-card-bg: #FFFFFF; --vmt-text: #1A1A1A; --vmt-text-muted: #666666; --vmt-border: #E5E4DE; --vmt-border-strong: #B3DCE0; --vmt-radius-btn: 6px; --vmt-radius-card: 8px; --vmt-radius-input: 6px; color: var(--vmt-text); background: transparent; } /* ────────────────────────────────────────────────────────────────────────── * Box-sizing reset — defensive against Divi * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard, .vmt-journey-dashboard *, .vmt-journey-dashboard *::before, .vmt-journey-dashboard *::after { box-sizing: border-box; } /* ────────────────────────────────────────────────────────────────────────── * Typography resets inside the dashboard (inherit site font; reset sizes/weights) * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard h1, .vmt-journey-dashboard h2, .vmt-journey-dashboard h3, .vmt-journey-dashboard h4, .vmt-journey-dashboard h5, .vmt-journey-dashboard h6 { margin: 0; padding: 0; line-height: 1.3; color: var(--vmt-text); font-weight: 500; font-family: inherit; } .vmt-journey-dashboard p { margin: 0; padding: 0; line-height: 1.55; font-family: inherit; } .vmt-journey-dashboard ul, .vmt-journey-dashboard ol { margin: 0; padding: 0; list-style: none; } /* Link reset (exclude .vmt-btn so the button color rules win) */ .vmt-journey-dashboard a:not(.vmt-btn) { color: var(--vmt-teal); text-decoration: none; } .vmt-journey-dashboard a:not(.vmt-btn):hover { color: var(--vmt-teal-dark); text-decoration: underline; } /* ────────────────────────────────────────────────────────────────────────── * Section title (uppercase eyebrow above card stacks and hours section) * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; color: var(--vmt-text-muted); margin: 18px 2px 10px; line-height: 1.3; } /* Section wrappers don't need their own box — they just group content */ .vmt-journey-dashboard .vmt-req-section, .vmt-journey-dashboard .vmt-hours-section { margin: 0; } /* ────────────────────────────────────────────────────────────────────────── * Hero * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-hero { /* `position: relative` establishes a containing block for the absolutely-positioned `.vmt-calendar-trigger` pill (injected by vmt-workshop-calendar.js into .vmt-hero__inner). Without this, the pill's `bottom`/`right` offsets resolve to whatever positioned ancestor exists higher up (likely via Divi's page wrapper), so changes to those offsets — like Stage 2.5 hotfix #3's bottom:16px → bottom:22px — produced no visible movement inside the hero. */ position: relative; background: var(--vmt-teal); color: #FFFFFF; border-radius: 10px; padding: 22px 26px; margin: 0 0 22px; } .vmt-journey-dashboard .vmt-hero__inner { display: block; } .vmt-journey-dashboard .vmt-hero__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #B3DCE0; margin: 0 0 6px; font-weight: 500; } .vmt-journey-dashboard .vmt-hero__title { font-size: 22px; font-weight: 500; line-height: 1.3; color: #FFFFFF; margin: 0 0 14px; } .vmt-journey-dashboard .vmt-hero__progress { margin: 0 0 14px; } .vmt-journey-dashboard .vmt-hero__progress-label { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; font-size: 13px; color: #B3DCE0; gap: 12px; } .vmt-journey-dashboard .vmt-hero__progress-pct { font-weight: 500; color: #FFFFFF; } /* Hero progress bar overrides the base bar — larger + near-white fill on the teal hero background. The previous --vmt-amber-lt fill (#E0A448) read as muddy against teal; near-white at 92% alpha is legible at a glance and reads as "progress light against dark" in the mockup. !important: the generic .vmt-progress-bar-fill rule (line ~420) sets background: var(--vmt-teal) at equal specificity (0,2,0) but appears later in this file, so it was clobbering this hero override in source order. Rather than reshuffle the file, tag this one override !important — matches the file's existing Divi-defensive pattern for button variants. */ .vmt-journey-dashboard .vmt-hero .vmt-progress-bar-bg { background: rgba(255, 255, 255, 0.2); height: 8px; border-radius: 4px; } .vmt-journey-dashboard .vmt-progress-bar-fill--hero { background: rgba(255, 255, 255, 0.92) !important; border-radius: 4px; } .vmt-journey-dashboard .vmt-hero__next { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.15); } .vmt-journey-dashboard .vmt-hero__next-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #B3DCE0; margin: 0 0 4px; font-weight: 500; } .vmt-journey-dashboard .vmt-hero__next-copy { font-size: 14px; color: #FFFFFF; margin: 0 0 12px; line-height: 1.5; } /* No trailing margin on the copy when there's no following CTA (awaiting state) */ .vmt-journey-dashboard .vmt-hero__next--awaiting .vmt-hero__next-copy { margin-bottom: 0; } .vmt-journey-dashboard .vmt-hero__cta { /* No positioning overrides — hero CTA picks up .vmt-btn--primary styling */ } /* ────────────────────────────────────────────────────────────────────────── * Card stack + base card * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-card-stack { display: block; } .vmt-journey-dashboard .vmt-card { background: var(--vmt-card-bg); border: 1px solid var(--vmt-border); border-radius: var(--vmt-radius-card); overflow: hidden; position: relative; margin-bottom: 14px; display: grid; grid-template-columns: 200px 1fr; min-height: 180px; } .vmt-journey-dashboard .vmt-card:last-child { margin-bottom: 0; } /* State modifiers */ .vmt-journey-dashboard .vmt-card--recommend { border: 2px solid var(--vmt-amber-lt); } .vmt-journey-dashboard .vmt-card--complete { border: 1px solid var(--vmt-border-strong); } /* workshop-awaiting and workshop-needed share the neutral base treatment; the pill + status line carry the state signal */ /* Card media area — 3:2 aspect keeps card heights uniform regardless of image shape. Portrait images (e.g., book-cover quiz art) letterbox via the image's own background below instead of stretching the card taller than its peers. */ .vmt-journey-dashboard .vmt-card__media { position: relative; overflow: hidden; background: var(--vmt-surface); aspect-ratio: 3 / 2; } .vmt-journey-dashboard .vmt-card__image { width: 100%; height: 100%; object-fit: contain; background: var(--vmt-surface); display: block; } .vmt-journey-dashboard .vmt-card__image-placeholder { width: 100%; height: 100%; min-height: 180px; background: var(--vmt-surface); display: flex; align-items: center; justify-content: center; padding: 12px; color: var(--vmt-text-muted); font-size: 11px; text-align: center; } /* Subtle teal wash on recommended cards' media (optional visual cue) */ .vmt-journey-dashboard .vmt-card--recommend .vmt-card__media::after { content: ''; position: absolute; inset: 0; background: rgba(230, 242, 244, 0.35); pointer-events: none; } /* Card body */ .vmt-journey-dashboard .vmt-card__body { padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .vmt-journey-dashboard .vmt-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--vmt-text-muted); } .vmt-journey-dashboard .vmt-card__meta-date { font-size: 12px; color: var(--vmt-text-muted); } .vmt-journey-dashboard .vmt-card__title { font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--vmt-text); margin: 0; } .vmt-journey-dashboard .vmt-card__excerpt { font-size: 13px; color: var(--vmt-text-muted); line-height: 1.55; margin: 0; } /* Status line (in-progress, workshop-needed, workshop-awaiting) */ .vmt-journey-dashboard .vmt-card__status { font-size: 12px; color: var(--vmt-text-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; } .vmt-journey-dashboard .vmt-card__status-item { display: inline-flex; align-items: center; gap: 4px; } .vmt-journey-dashboard .vmt-card__status-item--done { color: var(--vmt-teal); } .vmt-journey-dashboard .vmt-card__status-item--pending { color: var(--vmt-text-muted); } .vmt-journey-dashboard .vmt-status-scheduled { color: var(--vmt-teal-dark); } .vmt-journey-dashboard .vmt-card__status-sep { color: var(--vmt-border); } /* Per-card progress bar (in-progress state): thinner than hero bar */ .vmt-journey-dashboard .vmt-card__status .vmt-progress-bar-bg { height: 5px; background: var(--vmt-border); border-radius: 3px; width: 100%; flex: 1 1 100%; } .vmt-journey-dashboard .vmt-card__status .vmt-progress-bar-fill { background: var(--vmt-teal); border-radius: 3px; } /* Card action row (CTAs) */ .vmt-journey-dashboard .vmt-card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; align-items: center; } /* Completed-card badge overlay — anchored to the card article's top-right corner (Phase 7 hotfix 2). The overlay is rendered as a direct child of .vmt-card (not inside .vmt-card__media) so it positions against the full card wrapper, not the 240-px image column. .vmt-card has position:relative (line ~220 above) so this absolute positioning resolves to the card. Card's overflow:hidden keeps rounded corners clean; overlay at 12/12 px with max 64 x 64 stays well inside. */ .vmt-journey-dashboard .vmt-badge-overlay { position: absolute; top: 12px; right: 12px; width: 64px; height: 64px; pointer-events: none; z-index: 2; } .vmt-journey-dashboard .vmt-badge-overlay img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Reserve body padding on cards carrying the overlay so the title, excerpt, and status line don't slide under the badge. 84 = 64 badge + 12 right gap + 8 breathing room. Applied only via .vmt-card--has-badge (set by the renderer when a badge is actually emitted) so non-completed cards aren't penalized with extra right padding. */ .vmt-journey-dashboard .vmt-card--has-badge .vmt-card__body { padding-right: 84px; } /* Hours card variant uses .vmt-hours-card__header instead of .vmt-card__body; pad the header's right side so the big count doesn't slip under the badge. */ .vmt-journey-dashboard .vmt-card--has-badge.vmt-card--hours .vmt-hours-card__header { padding-right: 80px; } @media (max-width: 600px) { .vmt-journey-dashboard .vmt-badge-overlay { width: 48px; height: 48px; } .vmt-journey-dashboard .vmt-card--has-badge .vmt-card__body { padding-right: 68px; } .vmt-journey-dashboard .vmt-card--has-badge.vmt-card--hours .vmt-hours-card__header { padding-right: 64px; } } /* ────────────────────────────────────────────────────────────────────────── * Base progress bar (shared by hero, card status, and hours card). * Context-specific overrides (height / color / bg) live in those sections. * The width transition is preserved so vmt-journey.js animation works. * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-progress-bar-bg { background: var(--vmt-border); border-radius: 999px; height: 5px; overflow: hidden; width: 100%; } .vmt-journey-dashboard .vmt-progress-bar-fill { background: var(--vmt-teal); border-radius: inherit; height: 100%; width: 0; transition: width 0.6s ease; } .vmt-journey-dashboard .vmt-progress-bar-fill--complete { background: var(--vmt-teal); } /* ────────────────────────────────────────────────────────────────────────── * Pills * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 10px; border-radius: 999px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; white-space: nowrap; } .vmt-journey-dashboard .vmt-pill--start { background: var(--vmt-amber-lt); color: #5C3A05; } .vmt-journey-dashboard .vmt-pill--done { background: var(--vmt-teal-lt); color: var(--vmt-teal-dark); } .vmt-journey-dashboard .vmt-pill--awaiting { background: var(--vmt-surface); color: var(--vmt-text-muted); border: 1px solid var(--vmt-border); } .vmt-journey-dashboard .vmt-pill--info { background: var(--vmt-surface); color: var(--vmt-text-muted); } /* Outlined teal — informational, NOT a state pill. Renders alongside the state pill (Start here / Not started / In progress / Completed) on every card whose course has a workshop component, regardless of progress. The outline keeps it visually distinct from the filled state pills so it reads as "info about the course" rather than "you are at this stage." */ .vmt-journey-dashboard .vmt-pill--workshop { background: transparent; color: var(--vmt-teal-dark); border: 1px solid var(--vmt-teal); } /* ────────────────────────────────────────────────────────────────────────── * Buttons * * Divi forcibly styles buttons, anchors, and et_pb_button — `!important` * on background / color / border-color is the minimal defense. Scoped to * .vmt-journey-dashboard so it never leaks outside the dashboard. * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: var(--vmt-radius-btn); font-size: 13px; font-weight: 500; line-height: 1.2; border: 1px solid transparent; cursor: pointer; text-decoration: none; font-family: inherit; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; } .vmt-journey-dashboard .vmt-btn--primary { background: var(--vmt-coral) !important; color: #FFFFFF !important; border-color: var(--vmt-coral) !important; } .vmt-journey-dashboard .vmt-btn--primary:hover, .vmt-journey-dashboard .vmt-btn--primary:focus { background: var(--vmt-coral-dark) !important; color: #FFFFFF !important; border-color: var(--vmt-coral-dark) !important; } .vmt-journey-dashboard .vmt-btn--teal { background: var(--vmt-teal) !important; color: #FFFFFF !important; border-color: var(--vmt-teal) !important; } .vmt-journey-dashboard .vmt-btn--teal:hover, .vmt-journey-dashboard .vmt-btn--teal:focus { background: var(--vmt-teal-dark) !important; color: #FFFFFF !important; border-color: var(--vmt-teal-dark) !important; } .vmt-journey-dashboard .vmt-btn--outline { background: transparent !important; color: var(--vmt-teal) !important; border-color: var(--vmt-teal) !important; } .vmt-journey-dashboard .vmt-btn--outline:hover, .vmt-journey-dashboard .vmt-btn--outline:focus { background: var(--vmt-teal-lt) !important; color: var(--vmt-teal-dark) !important; border-color: var(--vmt-teal-dark) !important; } .vmt-journey-dashboard .vmt-btn--ghost { background: transparent !important; color: var(--vmt-text-muted) !important; border-color: var(--vmt-border) !important; } .vmt-journey-dashboard .vmt-btn--ghost:hover, .vmt-journey-dashboard .vmt-btn--ghost:focus { background: var(--vmt-surface) !important; color: var(--vmt-text) !important; border-color: var(--vmt-border-strong) !important; } .vmt-journey-dashboard .vmt-btn--small, .vmt-journey-dashboard .vmt-btn--sm { padding: 6px 12px; font-size: 12px; } .vmt-journey-dashboard .vmt-btn[aria-disabled="true"], .vmt-journey-dashboard .vmt-btn:disabled, .vmt-journey-dashboard .vmt-btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* Edit / delete links in the session-history table inherit button sizing from .vmt-btn--sm but override color (teal for edit, coral-dark for delete) per the brief. The !important overrides the ghost/outline fallback color. */ .vmt-journey-dashboard .vmt-jd-edit-entry, .vmt-journey-dashboard .vmt-jd-edit-entry:hover, .vmt-journey-dashboard .vmt-jd-edit-entry:focus { color: var(--vmt-teal) !important; border-color: var(--vmt-teal) !important; } .vmt-journey-dashboard .vmt-jd-delete-entry, .vmt-journey-dashboard .vmt-jd-delete-entry:hover, .vmt-journey-dashboard .vmt-jd-delete-entry:focus { color: var(--vmt-coral-dark) !important; border-color: var(--vmt-border) !important; } /* ────────────────────────────────────────────────────────────────────────── * Mentoring Hours card (.vmt-card--hours is a .vmt-card variant; override * the grid to single-column so content flows top-to-bottom) * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-card--hours { display: block; padding: 22px 24px; min-height: 0; margin-bottom: 12px; overflow: hidden; /* keeps the badge overlay clipped within rounded corners */ } .vmt-journey-dashboard .vmt-hours-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; flex-wrap: wrap; } .vmt-journey-dashboard .vmt-hours-card__heading { flex: 1 1 auto; min-width: 0; } .vmt-journey-dashboard .vmt-card--hours .vmt-card__title { font-size: 17px; font-weight: 500; margin: 0; } .vmt-journey-dashboard .vmt-hours-card__blurb { font-size: 12px; color: var(--vmt-text-muted); margin: 4px 0 0; line-height: 1.5; } .vmt-journey-dashboard .vmt-hours-card__count { white-space: nowrap; text-align: right; } .vmt-journey-dashboard .vmt-hours-card__count-num { font-size: 24px; font-weight: 500; color: var(--vmt-teal); display: inline-block; line-height: 1; } .vmt-journey-dashboard .vmt-hours-card__count-goal { font-size: 13px; color: var(--vmt-text-muted); font-weight: 400; margin-left: 4px; } /* Hours progress bar: taller than card-status bar */ .vmt-journey-dashboard .vmt-card--hours .vmt-progress-bar-bg { height: 8px; border-radius: 4px; margin: 16px 0 14px; } .vmt-journey-dashboard .vmt-card--hours .vmt-progress-bar-fill { border-radius: 4px; } .vmt-journey-dashboard .vmt-hours-card__status { font-size: 12px; color: var(--vmt-text-muted); margin: 0 0 14px; } .vmt-journey-dashboard .vmt-hours-widget__summary { display: inline; } .vmt-journey-dashboard .vmt-hours-widget__summary strong { font-weight: 500; color: var(--vmt-text); } .vmt-journey-dashboard .vmt-hours-widget__summary-goal { color: var(--vmt-teal); font-weight: 500; } /* v1.7.1 — "Pending VMT Approval" message state. Same visual * register as Goal reached (color-emphasized inline span inside the * summary line) but in an amber tone matching the staff card's * "pending" accent — so the mentor sees a visible state cue without * the false "you're done" implication of teal. */ .vmt-journey-dashboard .vmt-hours-widget__summary-pending { color: #b07d1a; font-weight: 500; } /* Action row inside hours card (same pattern as base card actions) */ .vmt-journey-dashboard .vmt-card--hours .vmt-card__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 0; margin-top: 0; } /* Hours-card badge overlay: same size/position as base, still bottom-right */ .vmt-journey-dashboard .vmt-badge-overlay--hours { /* uses base .vmt-badge-overlay positioning */ } /* ────────────────────────────────────────────────────────────────────────── * Hours widget — wrapper that scopes the JS-driven form + session history. * No visible box; just a layout parent for scroll-to / state targeting. * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-hours-widget { display: block; margin: 0 0 20px; } /* JS-toggled congrats banner (fires when the hours threshold trigger fires). Hidden by default — .vmt-jd-congrats--visible is added by vmt-journey.js. */ .vmt-journey-dashboard .vmt-jd-congrats { display: none; background: var(--vmt-teal-lt); border: 1px solid var(--vmt-border-strong); color: var(--vmt-teal-dark); border-radius: var(--vmt-radius-card); padding: 12px 16px; margin: 10px 0 0; font-size: 13px; font-weight: 500; } .vmt-journey-dashboard .vmt-jd-congrats--visible { display: block; } /* ────────────────────────────────────────────────────────────────────────── * Session history (collapsible
) * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-session-history { background: var(--vmt-surface); border: 1px solid var(--vmt-border); border-radius: var(--vmt-radius-card); padding: 14px 20px; margin: 0 0 20px; } .vmt-journey-dashboard .vmt-session-history__summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--vmt-text); display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; user-select: none; } .vmt-journey-dashboard .vmt-session-history__summary::-webkit-details-marker { display: none; } .vmt-journey-dashboard .vmt-session-history__summary::after { content: '▾'; font-size: 11px; color: var(--vmt-text-muted); transition: transform 0.15s; } .vmt-journey-dashboard .vmt-session-history[open] .vmt-session-history__summary::after { transform: rotate(180deg); } .vmt-journey-dashboard .vmt-session-history__body { margin-top: 14px; overflow-x: auto; } .vmt-journey-dashboard .vmt-session-history__footer { margin-top: 12px; display: flex; gap: 8px; align-items: center; } /* ────────────────────────────────────────────────────────────────────────── * Hours session table * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-hours-table { width: 100%; font-size: 13px; color: var(--vmt-text); border-collapse: collapse; } .vmt-journey-dashboard .vmt-hours-table th { color: var(--vmt-text-muted); font-weight: 500; text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--vmt-border); font-size: 12px; white-space: nowrap; } .vmt-journey-dashboard .vmt-hours-table td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--vmt-border); vertical-align: middle; } .vmt-journey-dashboard .vmt-hours-table tr:last-child td { border-bottom: none; } .vmt-journey-dashboard .vmt-hours-table .vmt-row--extra { display: none; } .vmt-journey-dashboard .vmt-hours-table .vmt-row--extra.vmt-row--visible { display: table-row; } .vmt-journey-dashboard .vmt-hours-table .vmt-no-rows td { color: var(--vmt-text-muted); font-style: italic; text-align: center; padding: 20px 10px; } /* ────────────────────────────────────────────────────────────────────────── * v1.7.0 — Hours approval status pills + rejection-reason row * * The mentor's hours-log table now shows a small status pill in the * date cell of each row (Pending / Approved / Rejected) and renders * an additional table row below any rejected entry with the staff's * rejection reason inline. Mentor edits a rejected entry → status * resets to pending server-side (see VMT_Mentoring_Hours::update_entry * 1.7.0 behavior); mentor deletes a rejected entry → row removed. * Both flows are existing UX paths, no new buttons needed here. * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-hours-status-pill { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 3px; margin-left: 8px; vertical-align: middle; line-height: 1.4; } .vmt-journey-dashboard .vmt-hours-status-pill--pending { background: #fff3d1; color: #b07d1a; } .vmt-journey-dashboard .vmt-hours-status-pill--approved { background: #d1f1d6; color: #1a6c33; } .vmt-journey-dashboard .vmt-hours-status-pill--rejected { background: #fad6d6; color: #b32d2e; } /* Rejection-reason row uses table-row layout so the message stays * directly under the rejected entry it explains. The row spans all * five columns and gets a muted red left border so it reads as * "staff feedback on the row above" rather than a new entry. */ .vmt-journey-dashboard .vmt-hours-rejection-row td { background: #fdf3f3; border-left: 3px solid var(--vmt-danger, #b32d2e); color: var(--vmt-text); padding: 8px 10px; font-size: 13px; line-height: 1.5; } .vmt-journey-dashboard .vmt-hours-rejection-row strong { color: var(--vmt-danger, #b32d2e); margin-right: 4px; } .vmt-journey-dashboard .vmt-hours-rejection-row em { margin-left: 6px; color: var(--vmt-text-muted); font-style: italic; } /* Rejected rows get a subtle accent so the eye knows where the * reason row belongs even at long scroll positions. */ .vmt-journey-dashboard .vmt-hours-row--rejected > td:first-child { border-left: 3px solid var(--vmt-danger, #b32d2e); padding-left: 7px; /* compensate for the border so text stays aligned */ } .vmt-journey-dashboard .vmt-hours-row--pending > td:first-child { border-left: 3px solid #d6c178; padding-left: 7px; } /* v1.7.2 — locked-approved indicator replaces the Edit + Delete * buttons on approved rows in the mentor's hours list. Native * `title` attribute powers the tooltip — same affordance pattern * the rest of vmt-core uses for hover-help strings, no JS layer * needed. The small lock glyph sits to the left of the label so * the row reads at a glance as "this entry is closed for edits." */ .vmt-journey-dashboard .vmt-hours-row__locked-indicator { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--vmt-text-muted); font-style: italic; cursor: help; /* Mirror the .vmt-btn--sm vertical rhythm so the row height * doesn't jump between approved vs pending/rejected rows. * Matches the .vmt-btn--outline/.vmt-btn--ghost line height * by padding the indicator to the same vertical box. */ padding: 4px 0; } .vmt-journey-dashboard .vmt-hours-row__locked-icon { font-size: 11px; line-height: 1; } /* ────────────────────────────────────────────────────────────────────────── * Hours log form (hidden until opened via JS) * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-hours-form { display: none; background: var(--vmt-card-bg); border: 1px solid var(--vmt-border); border-radius: var(--vmt-radius-card); padding: 18px 20px; margin: 14px 0 0; } .vmt-journey-dashboard .vmt-hours-form--visible { display: block; } .vmt-journey-dashboard .vmt-hours-form__title { font-size: 14px; font-weight: 500; color: var(--vmt-text); margin: 0 0 12px; } .vmt-journey-dashboard .vmt-hours-form__error { display: none; color: var(--vmt-coral-dark); font-size: 13px; margin: 0 0 10px; } .vmt-journey-dashboard .vmt-hours-form__error--visible { display: block; } .vmt-journey-dashboard .vmt-hours-form__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 14px; margin: 0 0 14px; } .vmt-journey-dashboard .vmt-form-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .vmt-journey-dashboard .vmt-form-field--wide { grid-column: 1 / -1; } .vmt-journey-dashboard .vmt-form-field label { font-size: 12px; font-weight: 500; color: var(--vmt-text-muted); } /* Form controls — Divi-defensive (explicit border, bg, radius; resets appearance) */ .vmt-journey-dashboard .vmt-form-field input, .vmt-journey-dashboard .vmt-form-field select, .vmt-journey-dashboard .vmt-form-field textarea { font-size: 14px; font-family: inherit; color: var(--vmt-text); background: var(--vmt-card-bg); border: 1px solid var(--vmt-border); border-radius: var(--vmt-radius-input); padding: 8px 10px; width: 100%; line-height: 1.4; margin: 0; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none; transition: border-color 0.15s, box-shadow 0.15s; } .vmt-journey-dashboard .vmt-form-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } .vmt-journey-dashboard .vmt-form-field input:focus, .vmt-journey-dashboard .vmt-form-field select:focus, .vmt-journey-dashboard .vmt-form-field textarea:focus { border-color: var(--vmt-teal); box-shadow: 0 0 0 2px rgba(0, 128, 146, 0.15); } .vmt-journey-dashboard .vmt-form-field textarea { resize: vertical; min-height: 80px; } .vmt-journey-dashboard .vmt-hours-form__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ────────────────────────────────────────────────────────────────────────── * Spinner (shown during AJAX save) * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-spinner { display: none; width: 16px; height: 16px; border: 2px solid var(--vmt-border); border-top-color: var(--vmt-teal); border-radius: 50%; animation: vmt-spin 0.6s linear infinite; flex-shrink: 0; } .vmt-journey-dashboard .vmt-spinner--visible { display: inline-block; } @keyframes vmt-spin { to { transform: rotate(360deg); } } /* ────────────────────────────────────────────────────────────────────────── * Pre-certification nudge (teal-tinted banner at the bottom when incomplete) * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-precert-nudge { background: var(--vmt-teal-lt); border: 1px solid var(--vmt-border-strong); border-radius: var(--vmt-radius-card); padding: 16px 20px; display: flex; align-items: center; gap: 16px; margin: 20px 0 0; } .vmt-journey-dashboard .vmt-precert-nudge__icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: var(--vmt-card-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 26px; line-height: 1; } .vmt-journey-dashboard .vmt-precert-nudge__icon img { width: 100%; height: 100%; object-fit: contain; display: block; } .vmt-journey-dashboard .vmt-precert-nudge__body { flex: 1; min-width: 0; } .vmt-journey-dashboard .vmt-precert-nudge__line1 { font-size: 14px; font-weight: 500; color: var(--vmt-teal-dark); margin: 0 0 2px; line-height: 1.4; } .vmt-journey-dashboard .vmt-precert-nudge__line2 { font-size: 12px; color: var(--vmt-teal); margin: 0; line-height: 1.5; } /* ────────────────────────────────────────────────────────────────────────── * Certification celebration (full-cert reveal) * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-celebration { background: #FFF5E5; border: 2px solid var(--vmt-amber-lt); border-radius: var(--vmt-radius-card); padding: 28px 32px; margin: 22px 0 0; display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; } .vmt-journey-dashboard .vmt-celebration__badge { width: 120px; height: 120px; flex-shrink: 0; } .vmt-journey-dashboard .vmt-celebration__badge img { width: 100%; height: 100%; object-fit: contain; display: block; } .vmt-journey-dashboard .vmt-celebration__heading { font-size: 24px; font-weight: 500; color: var(--vmt-text); margin: 0 0 6px; line-height: 1.3; } .vmt-journey-dashboard .vmt-celebration__subhead { font-size: 14px; color: var(--vmt-text-muted); margin: 0 0 16px; line-height: 1.5; } .vmt-journey-dashboard .vmt-celebration__sep { color: var(--vmt-border); } /* v1.9.0 Stage 6 — appended to the subhead when staff marks the * mentor as externally credentialed. Italic + muted so it reads * as an annotation, not a primary fact. */ .vmt-journey-dashboard .vmt-celebration__external-note { font-style: italic; color: var(--vmt-text-muted); } .vmt-journey-dashboard .vmt-celebration__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ────────────────────────────────────────────────────────────────────────── * Focus-visible (preserve browser defaults but make them teal-themed) * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-btn:focus-visible, .vmt-journey-dashboard .vmt-session-history__summary:focus-visible { outline: 2px solid var(--vmt-teal); outline-offset: 2px; } /* ────────────────────────────────────────────────────────────────────────── * Responsive — stack cards, widen media to full-width at narrow viewports * ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .vmt-journey-dashboard .vmt-hero { padding: 18px 20px; } .vmt-journey-dashboard .vmt-hero__title { font-size: 20px; } .vmt-journey-dashboard .vmt-hero__progress-label { flex-direction: column; align-items: flex-start; gap: 2px; } .vmt-journey-dashboard .vmt-card { grid-template-columns: 1fr; min-height: auto; } .vmt-journey-dashboard .vmt-card__media { aspect-ratio: 3 / 2; width: 100%; } .vmt-journey-dashboard .vmt-card__image-placeholder { min-height: auto; } .vmt-journey-dashboard .vmt-card__actions .vmt-btn { flex: 1 1 auto; justify-content: center; } .vmt-journey-dashboard .vmt-card--hours { padding: 18px 20px; } .vmt-journey-dashboard .vmt-hours-card__header { flex-direction: column; align-items: flex-start; gap: 4px; } .vmt-journey-dashboard .vmt-hours-card__count { text-align: left; } .vmt-journey-dashboard .vmt-hours-form__grid { grid-template-columns: 1fr; } .vmt-journey-dashboard .vmt-celebration { grid-template-columns: 1fr; text-align: center; padding: 24px 20px; } .vmt-journey-dashboard .vmt-celebration__badge { margin: 0 auto; } .vmt-journey-dashboard .vmt-celebration__actions { justify-content: center; } .vmt-journey-dashboard .vmt-precert-nudge { flex-direction: column; align-items: flex-start; } } /* ────────────────────────────────────────────────────────────────────────── * Workshop signup modal (Phase 6) * * Dialog shell is rendered once per dashboard via render_workshop_modal_shell(). * Body content is populated by vmt-journey.js after AJAX fetch. All selectors * scoped to .vmt-journey-dashboard — the modal lives inside the dashboard * wrapper, not at document root, so Divi's chrome stays unaffected. * ────────────────────────────────────────────────────────────────────────── */ /* Host page scroll lock while modal is open. Not scoped to .vmt-journey-dashboard — it's on . */ body.vmt-modal-open { overflow: hidden; } /* The [hidden] attribute is the visibility source of truth. When JS opens the modal it removes the attribute; when it closes, it re-adds. We do NOT toggle a class — keeps the accessibility story simple. */ .vmt-journey-dashboard .vmt-modal[hidden] { display: none; } .vmt-journey-dashboard .vmt-modal { position: fixed; inset: 0; /* 100000 keeps the confirm modal ABOVE the workshop calendar modal (z-index 99999 in vmt-workshop-calendar.css) — the calendar's confirm-and-switch dialog opens on top of an already-open calendar modal, so the confirm has to win the stacking contest or it renders behind the calendar and is invisible to the user (Bug F). The 9999 baseline was originally chosen to beat Divi's fixed header (~2000) and UM overlays — both satisfied at 100000 too. */ z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; } .vmt-journey-dashboard .vmt-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); cursor: pointer; } .vmt-journey-dashboard .vmt-modal__panel { position: relative; width: 100%; max-width: 600px; max-height: calc(100vh - 40px); background: var(--vmt-card-bg); border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; overflow: hidden; } .vmt-journey-dashboard .vmt-modal__close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; min-width: 32px; padding: 0; background: transparent; border: 0; border-radius: 6px; color: var(--vmt-text-muted); font-size: 24px; line-height: 1; cursor: pointer; z-index: 1; display: flex; align-items: center; justify-content: center; font-family: inherit; } .vmt-journey-dashboard .vmt-modal__close:hover, .vmt-journey-dashboard .vmt-modal__close:focus { background: var(--vmt-surface); color: var(--vmt-text); outline: 2px solid var(--vmt-teal); outline-offset: -2px; } .vmt-journey-dashboard .vmt-modal__body { padding: 28px 28px 24px; overflow-y: auto; flex: 1 1 auto; min-height: 0; } /* ── Modal body: states populated by JS templates ───────────────────────── */ .vmt-journey-dashboard .vmt-workshop-modal__loading { display: flex; align-items: center; justify-content: center; min-height: 180px; color: var(--vmt-text-muted); font-size: 14px; } .vmt-journey-dashboard .vmt-workshop-modal__error { padding: 32px 8px; text-align: center; color: var(--vmt-coral-dark); font-size: 14px; } .vmt-journey-dashboard .vmt-workshop-modal__header { margin-bottom: 20px; } .vmt-journey-dashboard .vmt-workshop-modal__title { margin: 0 32px 8px 0; /* right clearance for the close button */ font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--vmt-text); } .vmt-journey-dashboard .vmt-workshop-modal__description { color: var(--vmt-text-muted); font-size: 14px; line-height: 1.5; } .vmt-journey-dashboard .vmt-workshop-modal__description p { margin: 0 0 10px; } .vmt-journey-dashboard .vmt-workshop-modal__description :last-child { margin-bottom: 0; } .vmt-journey-dashboard .vmt-workshop-modal__enrolled-banner { background: var(--vmt-teal-lt); border: 1px solid var(--vmt-teal); border-radius: 6px; padding: 14px 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .vmt-journey-dashboard .vmt-workshop-modal__enrolled-info { flex: 1 1 auto; min-width: 0; } .vmt-journey-dashboard .vmt-workshop-modal__enrolled-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vmt-teal-dark); font-weight: 600; margin-bottom: 2px; } .vmt-journey-dashboard .vmt-workshop-modal__enrolled-date { font-size: 15px; font-weight: 600; color: var(--vmt-text); } .vmt-journey-dashboard .vmt-workshop-modal__sessions-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vmt-text-muted); font-weight: 600; margin: 0 0 8px; } .vmt-journey-dashboard .vmt-workshop-modal__sessions { border-top: 1px solid var(--vmt-border); } .vmt-journey-dashboard .vmt-workshop-modal__session { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--vmt-border); flex-wrap: wrap; } .vmt-journey-dashboard .vmt-workshop-modal__session-info { flex: 1 1 auto; min-width: 0; } .vmt-journey-dashboard .vmt-workshop-modal__session-date { font-size: 15px; font-weight: 600; color: var(--vmt-text); line-height: 1.3; } .vmt-journey-dashboard .vmt-workshop-modal__session-meta { font-size: 13px; color: var(--vmt-text-muted); margin-top: 2px; } .vmt-journey-dashboard .vmt-workshop-modal__session--full .vmt-workshop-modal__session-meta { color: var(--vmt-coral-dark); } .vmt-journey-dashboard .vmt-workshop-modal__session-action { flex: 0 0 auto; } .vmt-journey-dashboard .vmt-workshop-modal__session--disabled { opacity: 0.55; } .vmt-journey-dashboard .vmt-workshop-modal__session-enrolled-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--vmt-teal-lt); color: var(--vmt-teal-dark); font-size: 13px; font-weight: 600; border-radius: 999px; border: 1px solid var(--vmt-teal); } .vmt-journey-dashboard .vmt-workshop-modal__empty { padding: 32px 8px; text-align: center; } .vmt-journey-dashboard .vmt-workshop-modal__empty-title { font-size: 15px; font-weight: 600; color: var(--vmt-text); margin: 0 0 6px; } .vmt-journey-dashboard .vmt-workshop-modal__empty-help { font-size: 13px; color: var(--vmt-text-muted); margin: 0; } .vmt-journey-dashboard .vmt-workshop-modal__locked { padding: 32px 8px; text-align: center; } .vmt-journey-dashboard .vmt-workshop-modal__locked-icon { font-size: 32px; color: var(--vmt-text-muted); margin-bottom: 8px; } .vmt-journey-dashboard .vmt-workshop-modal__locked-text { font-size: 14px; color: var(--vmt-text-muted); line-height: 1.5; max-width: 360px; margin: 0 auto; } .vmt-journey-dashboard .vmt-workshop-modal__inline-error { display: block; color: var(--vmt-coral-dark); font-size: 13px; margin-top: 6px; } /* ── Mobile (matches existing 600px breakpoint) ─────────────────────────── */ @media (max-width: 600px) { .vmt-journey-dashboard .vmt-modal { padding: 0; } .vmt-journey-dashboard .vmt-modal__panel { max-width: 100%; max-height: 100vh; border-radius: 0; height: 100vh; } .vmt-journey-dashboard .vmt-modal__body { padding: 24px 20px 20px; } .vmt-journey-dashboard .vmt-workshop-modal__title { font-size: 19px; } .vmt-journey-dashboard .vmt-workshop-modal__session { align-items: flex-start; } .vmt-journey-dashboard .vmt-workshop-modal__session-action { width: 100%; margin-top: 8px; } .vmt-journey-dashboard .vmt-workshop-modal__session-action .vmt-btn { width: 100%; } .vmt-journey-dashboard .vmt-workshop-modal__enrolled-banner .vmt-btn { width: 100%; } } /* ────────────────────────────────────────────────────────────────────────── * Confirmation modal (Phase 7) * * Shares the generic .vmt-modal / .vmt-modal__panel / .vmt-modal__body * scaffolding from Phase 6 — only size + the confirm-specific body layout * are overridden here. Used by vmtConfirm() in vmt-journey.js; body is * populated at call time with { title, message, cancel btn, confirm btn }. * ────────────────────────────────────────────────────────────────────────── */ .vmt-journey-dashboard .vmt-modal--confirm .vmt-modal__panel { max-width: 420px; } .vmt-journey-dashboard .vmt-modal--confirm .vmt-modal__body { padding: 24px 24px 20px; } .vmt-journey-dashboard .vmt-confirm-modal__title { margin: 0 32px 10px 0; /* right clearance for the close button */ font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--vmt-text); } .vmt-journey-dashboard .vmt-confirm-modal__message { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--vmt-text-muted); } .vmt-journey-dashboard .vmt-confirm-modal__actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; } @media (max-width: 600px) { .vmt-journey-dashboard .vmt-modal--confirm .vmt-modal__panel { /* Don't go fullscreen like the workshop modal — confirm dialogs should stay compact and centered even on small screens. */ max-width: calc(100% - 32px); max-height: calc(100vh - 32px); height: auto; border-radius: 12px; margin: 16px; } .vmt-journey-dashboard .vmt-modal--confirm { padding: 16px; } .vmt-journey-dashboard .vmt-modal--confirm .vmt-modal__body { padding: 20px 20px 18px; } .vmt-journey-dashboard .vmt-confirm-modal__actions { justify-content: stretch; } .vmt-journey-dashboard .vmt-confirm-modal__actions .vmt-btn { flex: 1 1 auto; justify-content: center; } } /* ────────────────────────────────────────────────────────────────────────── * UM profile page — reduce whitespace above cover banner * * Scoped to `body.um-page-user` (added by UM's core shortcodes class) so * these only apply on the /user/{slug}/ profile page, not anywhere else * that this stylesheet is enqueued (e.g., a random page containing the * [vmt_certification_timeline] shortcode). * * These rules sit OUTSIDE the .vmt-journey-dashboard scope above — they * target UM's own wrapper and Divi's page-content containers, not the * dashboard's internals. * * Divi-defensive: Divi's default page template gives #main-content a large * top padding (58px+ at desktop). For UM profile pages we want the cover * photo to sit closer to the site header. !important here is the usual * Divi-coexistence pattern; Divi's selectors are aggressive. * * @since 1.4.0 * ────────────────────────────────────────────────────────────────────── */ body.um-page-user #main-content { padding-top: 0 !important; } body.um-page-user #main-content .container { padding-top: 16px !important; } body.um-page-user .um.um-profile { margin-top: 0 !important; } /* Some Divi page layouts wrap content in a post-title section; suppress the extra top padding it adds above the UM profile on those pages. */ body.um-page-user .et_post_meta_wrapper, body.um-page-user .et_pb_section:first-of-type { padding-top: 0 !important; } /* ────────────────────────────────────────────────────────────────────────── * UM Achievements tab — earned-badge grid * * Scoped to `.vmt-achievements` (the wrapper div emitted by * VMT_Achievements_Tab::render_achievements_html, used by the * [vmt_achievements] shortcode) AND further scoped to * `body.um-page-user` so these rules never leak to other pages even if * something else on the site happens to use `.vmt-achievements`. * * Visual language mirrors the Mentor Journey dashboard: warm surface * (--vmt-surface), white cards with subtle border, hover lift. * * Responsive breakpoints: * > 900px — 3 columns * 600-900 — 2 columns * < 600 — 1 column * * @since 1.4.0 * ────────────────────────────────────────────────────────────────────── */ body.um-page-user .vmt-achievements { --vmt-teal: #008092; --vmt-teal-dark: #005A68; --vmt-surface: #F5F4F1; --vmt-card-bg: #FFFFFF; --vmt-text: #1A1A1A; --vmt-text-muted: #666666; --vmt-border: #E5E4DE; background: var(--vmt-surface); padding: 20px; border-radius: 8px; color: var(--vmt-text); } body.um-page-user .vmt-achievements *, body.um-page-user .vmt-achievements *::before, body.um-page-user .vmt-achievements *::after { box-sizing: border-box; } body.um-page-user .vmt-achievements__empty { margin: 0; padding: 24px 16px; text-align: center; color: var(--vmt-text-muted); font-size: 15px; line-height: 1.5; } body.um-page-user .vmt-achievements__grid { list-style: none !important; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @media (max-width: 900px) { body.um-page-user .vmt-achievements__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { body.um-page-user .vmt-achievements__grid { grid-template-columns: 1fr; gap: 12px; } } body.um-page-user .vmt-achievement-tile { margin: 0; padding: 0; list-style: none !important; background: var(--vmt-card-bg); border: 1px solid var(--vmt-border); border-radius: 8px; overflow: hidden; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } body.um-page-user .vmt-achievement-tile::before { content: none !important; /* kill UM's default li bullets */ } body.um-page-user .vmt-achievement-tile:hover, body.um-page-user .vmt-achievement-tile:focus-within { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 128, 146, 0.12); border-color: var(--vmt-teal); } body.um-page-user .vmt-achievement-tile__link { display: flex; flex-direction: column; align-items: stretch; text-decoration: none !important; color: inherit !important; height: 100%; padding: 16px; gap: 12px; } body.um-page-user .vmt-achievement-tile__link:hover, body.um-page-user .vmt-achievement-tile__link:focus { text-decoration: none !important; color: inherit !important; } body.um-page-user .vmt-achievement-tile__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; max-width: 140px; margin: 0 auto; width: 100%; } body.um-page-user .vmt-achievement-tile__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } body.um-page-user .vmt-achievement-tile__placeholder { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; background: linear-gradient(135deg, #e6f2f4 0%, #f5f4f1 100%); border: 1px dashed var(--vmt-border); } body.um-page-user .vmt-achievement-tile__body { text-align: center; padding: 0 4px; } body.um-page-user .vmt-achievement-tile__title { margin: 0 0 4px !important; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--vmt-text); } /* Small type-of-achievement subtitle ("Badge", "Step", "Points Award", …) displayed in muted teal so it visually clusters with the title without competing with the earned-date line below. */ body.um-page-user .vmt-achievement-tile__type { margin: 0 0 4px !important; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vmt-teal); line-height: 1.4; } body.um-page-user .vmt-achievement-tile__date { margin: 0 !important; font-size: 12px; color: var(--vmt-text-muted); line-height: 1.4; }