/* =========================================================================== * PROFILE EXPERIENCE 4.0 — design system Phase 1, v3.34.0 * --------------------------------------------------------------------------- * Tokens, type, motion and the component library. Nothing here is applied to * the profile yet: Phase 1 builds the system, Phase 2 consumes it. Adding this * sheet therefore changes no pixel until a section opts in by using a class. * * WHY A NEW TOKEN FAMILY RATHER THAN ALIASING --prof-*. * The blueprint says alias existing tokens where an equivalent exists. It does * not, here: --prof-primary is declared with SIX different values across the * codebase (#F2F2EF, #b07d12, #fb7185, #e11d48, #818cf8) and --prof-border-light * with five. Aliasing a token whose value depends on which sheet won would * inherit the very inconsistency this upgrade exists to remove. The --prof-* * family is left untouched and retired section by section in Phase 2. * * TWO RULES THIS FILE KEEPS ABSOLUTELY. * 1. Custom properties are CASE SENSITIVE. Everything here is * lowercase-with-hyphens. A mismatched reference drops the whole * declaration silently. * 2. No custom property is ever marked !important. A token flagged that way * wins inside every consumer that reads it, including ones it was never * meant to reach. * ========================================================================= */ :root { --eahp-pg: #FFFFFF; --eahp-card: #FFFFFF; --eahp-stage: #FAF8F4; --eahp-soft: #F7F1E4; --eahp-sand: #FDF8EC; --eahp-ink: #23201B; --eahp-body: #4E4840; --eahp-muted: #726A60; /* 4.46 on the stage surface was under the floor */ --eahp-faint: #A9A196; --eahp-line: #E6E0D6; --eahp-line2: #F0EBE2; /* MEASURED, not chosen by eye. White on #B07D12 is 3.63:1 and fails the 4.5:1 floor for a 13.5px button label; #8F6400 is 5.26:1 and passes as a fill AND as text on white, on the soft tint and on the stage surface. #B07D12 survives as --eahp-acc-lift for decoration only. */ --eahp-acc: #8F6400; --eahp-acc-hover: #74510A; --eahp-acc-lift: #B07D12; --eahp-onacc: #FFFFFF; --eahp-acc-soft: #F7F1E4; --eahp-acc-line: #E4D5AE; --eahp-ok: #2D7456; /* on its own 12% tint: 4.42 -> 4.78 */ --eahp-warn: #965C08; /* #A8690B was 4.48 on white; this clears 4.5 on the tint too */ --eahp-dang: #B3261E; --eahp-info: #1F5A7A; --eahp-live: #C62828; --eahp-sc: 0 1px 2px rgba(60,45,20,.06), 0 1px 3px rgba(60,45,20,.08); --eahp-sh: 0 10px 24px -12px rgba(60,45,20,.34), 0 2px 6px rgba(60,45,20,.08); --eahp-r-nav: 8px; --eahp-r-ctl: 10px; --eahp-r-card: 14px; --eahp-r-dialog: 20px; --eahp-r-pill: 999px; --eahp-s1: 4px; --eahp-s2: 8px; --eahp-s3: 16px; --eahp-s4: 24px; --eahp-s5: 32px; --eahp-s6: 48px; --eahp-spring: cubic-bezier(.34, 1.56, .64, 1); --eahp-ease: cubic-bezier(.16, .84, .44, 1); --eahp-d-hover: 180ms; --eahp-d-toggle: 220ms; --eahp-d-dialog: 280ms; --eahp-d-fill: 560ms; --eahp-d-count: 700ms; --eahp-max: 1600px; --eahp-rail: 280px; } /* Dark — warm charcoal, never blue-black. */ html[data-theme="dark"] { --eahp-pg: #17160F; --eahp-card: #201E18; --eahp-stage: #1B1A14; --eahp-soft: #2A2620; --eahp-sand: #2A2520; --eahp-ink: #F6F3ED; --eahp-body: #D5CFC4; --eahp-muted: #9A9287; --eahp-faint: #6E675E; --eahp-line: #332F28; --eahp-line2: #26231E; --eahp-acc: #D4AF37; --eahp-acc-hover: #E2C25C; --eahp-acc-lift: #E9D27E; /* White on a lifted gold is about 2:1 and fails. A filled accent control takes DARK ink in dark mode — a contrast requirement, not a taste. */ --eahp-onacc: #1A1509; --eahp-acc-soft: rgba(212,175,55,.13); --eahp-acc-line: #4A3F1E; --eahp-ok: #6FBF92; --eahp-warn: #D9A038; --eahp-dang: #E8796F; --eahp-info: #6FB2D2; --eahp-live: #FF6B60; --eahp-sc: 0 1px 2px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.28); --eahp-sh: 0 10px 24px -12px rgba(0,0,0,.66), 0 2px 6px rgba(0,0,0,.4); color-scheme: dark; } /* ------------------------------------------------------------------ base -- */ .eahp { font-family: Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--eahp-body); background: var(--eahp-pg); } .eahp *, .eahp *::before, .eahp *::after { box-sizing: border-box; } /* Nothing in this layer may widen the document. A single wide child (a table, a long token, a heatmap) is the usual cause of sideways scroll on a phone. */ .eahp { overflow-x: clip; } .eahp img, .eahp svg, .eahp table { max-width: 100%; } .eahp pre, .eahp code { overflow-wrap: anywhere; } .eahp h1, .eahp h2, .eahp h3, .eahp h4 { color: var(--eahp-ink); margin: 0; font-weight: 600; } .eahp h1 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.03em; line-height: 1.08; } .eahp h2 { font-size: clamp(20px, 2.2vw, 24px); letter-spacing: -.02em; } .eahp h3 { font-size: 17px; letter-spacing: -.01em; } .eahp p { margin: 0; font-size: 15px; line-height: 1.6; } .eahp-label { font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--eahp-muted); } .eahp-eyebrow { font-size: 9px; font-weight: 600; letter-spacing: .21em; text-transform: uppercase; color: var(--eahp-muted); } .eahp-meta { font-size: 12.5px; color: var(--eahp-muted); } .eahp-num { font-variant-numeric: tabular-nums; } .eahp :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--eahp-acc); outline-offset: 2px; border-radius: 3px; } .eahp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------- button -- * Eight states: rest, hover, focus-visible, active, disabled, loading, * success, danger. Loading locks the label width so the row cannot reflow * mid-request. * ------------------------------------------------------------------------ */ .eahp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--eahp-s1); position: relative; min-height: 44px; padding: 10px 16px; font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; color: var(--eahp-ink); background: var(--eahp-card); border: 1px solid var(--eahp-line); border-radius: var(--eahp-r-ctl); cursor: pointer; text-decoration: none; transition: background var(--eahp-d-hover) var(--eahp-ease), border-color var(--eahp-d-hover) var(--eahp-ease), transform 120ms var(--eahp-spring); } .eahp-btn:hover { background: var(--eahp-stage); border-color: var(--eahp-acc-line); } .eahp-btn:active { transform: translateY(1px); } .eahp-btn--primary { background: var(--eahp-acc); border-color: var(--eahp-acc); color: var(--eahp-onacc); } .eahp-btn--primary:hover { background: var(--eahp-acc-hover); border-color: var(--eahp-acc-hover); } .eahp-btn--ghost { background: transparent; border-color: transparent; } .eahp-btn--ghost:hover { background: var(--eahp-soft); border-color: transparent; } .eahp-btn--danger { background: var(--eahp-dang); border-color: var(--eahp-dang); color: #FFFFFF; } .eahp-btn[disabled], .eahp-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; } /* Small variant. Dense where there is a mouse, but NEVER below the touch target on a finger: the hero inlined min-height:32px/36px, which beats the 44px floor on the base class because an inline style outranks a stylesheet. Measured at 375px: six controls between 32px and 36px. */ .eahp-btn--sm { min-height: 36px; padding: 8px 12px; font-size: 12.5px; } .eahp-btn--xs { min-height: 32px; padding: 6px 10px; font-size: 12px; } /* Up to 1024px covers the whole tablet band. Keying on (pointer: coarse) ALONE is fragile - a tablet in desktop mode can report a fine pointer, and emulators do not simulate touch at tablet sizes, so the rule cannot even be verified. The width test is the one that can be measured. */ @media (pointer: coarse), (max-width: 1024px) { .eahp-btn--sm, .eahp-btn--xs { min-height: 44px; padding-top: 11px; padding-bottom: 11px; } } .eahp-btn[data-state="loading"] { color: transparent; pointer-events: none; } .eahp-btn[data-state="loading"]::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; color: var(--eahp-ink); animation: eahp-spin .7s linear infinite; } .eahp-btn--primary[data-state="loading"]::after { color: var(--eahp-onacc); } .eahp-btn[data-state="success"] { color: transparent; } .eahp-btn[data-state="success"]::after { content: "\2713"; position: absolute; font-size: 16px; color: var(--eahp-ok); animation: eahp-pop .22s var(--eahp-spring); } .eahp-btn--primary[data-state="success"]::after { color: var(--eahp-onacc); } @keyframes eahp-spin { to { transform: rotate(360deg); } } @keyframes eahp-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ------------------------------------------------------------------ card -- */ .eahp-card { background: var(--eahp-card); border: 1px solid var(--eahp-line); border-radius: var(--eahp-r-card); box-shadow: var(--eahp-sc); padding: var(--eahp-s3); transition: transform var(--eahp-d-hover) var(--eahp-spring), box-shadow var(--eahp-d-hover) var(--eahp-ease), border-color var(--eahp-d-hover) var(--eahp-ease); } .eahp-card--interactive:hover { transform: translateY(-6px) scale(1.015); box-shadow: var(--eahp-sh); border-color: var(--eahp-acc-line); } .eahp-card--flat { box-shadow: none; } .eahp-card--recessed { background: var(--eahp-stage); box-shadow: none; } /* ------------------------------------------------------------- stat tile -- */ .eahp-stat { background: var(--eahp-stage); border-radius: var(--eahp-r-ctl); padding: var(--eahp-s3); } .eahp-stat__v { display: block; font-size: 24px; font-weight: 600; color: var(--eahp-ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .eahp-stat__l { display: block; margin-top: var(--eahp-s1); font-size: 12.5px; color: var(--eahp-muted); } /* ---------------------------------------------------------------- avatar -- * Rings differ in WIDTH as well as colour, so they stay distinguishable * without colour vision. * ------------------------------------------------------------------------ */ .eahp-avatar { position: relative; display: inline-grid; place-items: center; flex: none; width: 96px; height: 96px; border-radius: 50%; background: var(--eahp-acc); color: var(--eahp-onacc); font-size: 30px; font-weight: 600; overflow: hidden; transition: transform var(--eahp-d-hover) var(--eahp-spring); } .eahp-avatar img { width: 100%; height: 100%; object-fit: cover; } .eahp-avatar--lg { width: 128px; height: 128px; font-size: 40px; } .eahp-avatar:hover { transform: translateY(-4px); } /* The photo handler REPLACES the button's innerHTML with an plus a .prof-avatar-upload-overlay. The only rule that ever revealed that overlay keyed off .prof-avatar:hover, a class this hero no longer uses - so the injected "Change" affordance was permanently invisible after the first upload. Reveal it here, on the class the hero actually carries. */ .eahp-avatar .prof-avatar-upload-overlay { opacity: 0; transition: opacity var(--eahp-d-hover) var(--eahp-ease); } .eahp-avatar:hover .prof-avatar-upload-overlay, .eahp-avatar:focus-visible .prof-avatar-upload-overlay { opacity: 1; } @media (prefers-reduced-motion: reduce) { .eahp-avatar .prof-avatar-upload-overlay { transition: none; } } .eahp-ring { position: relative; display: inline-block; border-radius: 50%; } .eahp-ring--verified { box-shadow: 0 0 0 3px var(--eahp-card), 0 0 0 6px var(--eahp-acc); } .eahp-ring--tier { box-shadow: 0 0 0 3px var(--eahp-card), 0 0 0 8px var(--eahp-acc-lift); } .eahp-ring--live { box-shadow: 0 0 0 3px var(--eahp-card), 0 0 0 5px var(--eahp-live); } /* ---------------------------------------------------------- badge · pill -- */ .eahp-badge { display: inline-flex; align-items: center; gap: var(--eahp-s1); padding: 3px 9px; border-radius: var(--eahp-r-pill); font-size: 11.5px; font-weight: 600; background: var(--eahp-soft); color: var(--eahp-acc); border: 1px solid var(--eahp-acc-line); } .eahp-badge--ok { background: color-mix(in srgb, var(--eahp-ok) 12%, transparent); color: var(--eahp-ok); border-color: currentColor; } .eahp-badge--warn { background: color-mix(in srgb, var(--eahp-warn) 12%, transparent); color: var(--eahp-warn); border-color: currentColor; } .eahp-badge--dang { background: color-mix(in srgb, var(--eahp-dang) 12%, transparent); color: var(--eahp-dang); border-color: currentColor; } @supports not (background: color-mix(in srgb, red 50%, transparent)) { .eahp-badge--ok, .eahp-badge--warn, .eahp-badge--dang { background: var(--eahp-stage); } } .eahp-pill { display: inline-block; padding: 4px 11px; border-radius: var(--eahp-r-pill); font-size: 10.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; background: var(--eahp-soft); color: var(--eahp-acc); border: 1px solid var(--eahp-acc-line); } /* -------------------------------------------------------------- progress -- */ .eahp-bar { height: 7px; border-radius: var(--eahp-r-pill); background: var(--eahp-stage); overflow: hidden; } .eahp-bar__fill { height: 100%; width: 0; background: var(--eahp-acc); transition: width var(--eahp-d-fill) var(--eahp-ease); } .eahp-ringchart { transform: rotate(-90deg); } .eahp-ringchart circle { fill: none; stroke-width: 8; stroke-linecap: round; } .eahp-ringchart .track { stroke: var(--eahp-stage); } .eahp-ringchart .value { stroke: var(--eahp-acc); transition: stroke-dashoffset var(--eahp-d-fill) var(--eahp-ease); } /* ----------------------------------------------------------------- field -- */ .eahp-field { display: block; } .eahp-field__l { display: block; margin-bottom: var(--eahp-s1); font-size: 12.5px; font-weight: 600; color: var(--eahp-body); } .eahp-input, .eahp-field select, .eahp-field textarea { width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--eahp-ink); background: var(--eahp-card); border: 1px solid var(--eahp-line); border-radius: var(--eahp-r-ctl); transition: border-color var(--eahp-d-hover) var(--eahp-ease), box-shadow var(--eahp-d-hover) var(--eahp-ease); } .eahp-input::placeholder { color: var(--eahp-faint); } .eahp-input:hover { border-color: var(--eahp-acc-line); } .eahp-input:focus { outline: none; border-color: var(--eahp-acc); box-shadow: 0 0 0 3px var(--eahp-acc-soft); } .eahp-input[disabled] { background: var(--eahp-stage); color: var(--eahp-faint); cursor: not-allowed; } .eahp-input[aria-invalid="true"] { border-color: var(--eahp-dang); } .eahp-field__err { display: block; margin-top: var(--eahp-s1); font-size: 12.5px; color: var(--eahp-dang); } .eahp-field__hint { display: block; margin-top: var(--eahp-s1); font-size: 12.5px; color: var(--eahp-muted); } /* ------------------------------------------------------------------ tabs -- * The glide sits at z-index 2 so a hovered tab's background tint cannot cover * it — a bug already shipped once on the Bible site. Verify with * elementFromPoint, not by eye. * ------------------------------------------------------------------------ */ .eahp-tabs { position: relative; display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--eahp-line); } .eahp-tab { /* 44px floor: measured at 40px, which is under the touch target. */ position: relative; min-height: 44px; padding: 13px 14px; border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--eahp-muted); cursor: pointer; transition: color var(--eahp-d-hover) var(--eahp-ease); } .eahp-tab:hover { color: var(--eahp-ink); } .eahp-tab[aria-selected="true"] { color: var(--eahp-ink); } .eahp-tabs__glide { position: absolute; bottom: -1px; height: 2px; z-index: 2; background: var(--eahp-acc); border-radius: 2px; transition: transform var(--eahp-d-toggle) var(--eahp-ease), width var(--eahp-d-toggle) var(--eahp-ease); } /* ------------------------------------------------- dialog · sheet · toast -- * OPAQUE. Always. A see-through dialog over dense profile data is unreadable, * and this is a fixed project rule rather than a preference. * ------------------------------------------------------------------------ */ .eahp-dialog { background: var(--eahp-card); color: var(--eahp-body); border: 1px solid var(--eahp-line); border-radius: var(--eahp-r-dialog); box-shadow: var(--eahp-sh); padding: var(--eahp-s4); max-width: 560px; width: 100%; } .eahp-dialog[open] { animation: eahp-dialog-in var(--eahp-d-dialog) var(--eahp-spring); } .eahp-dialog::backdrop { background: rgba(24,20,12,.52); } @keyframes eahp-dialog-in { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } .eahp-sheet { background: var(--eahp-card); border-radius: var(--eahp-r-dialog) var(--eahp-r-dialog) 0 0; box-shadow: var(--eahp-sh); padding: var(--eahp-s4); } .eahp-sheet__grab { width: 36px; height: 4px; border-radius: 99px; background: var(--eahp-line); margin: 0 auto var(--eahp-s3); } .eahp-toast { background: var(--eahp-card); color: var(--eahp-ink); border: 1px solid var(--eahp-line); border-radius: var(--eahp-r-ctl); box-shadow: var(--eahp-sh); padding: 12px 14px; font-size: 13.5px; } /* ------------------------------------------------------ empty · skeleton -- */ .eahp-empty { text-align: center; padding: var(--eahp-s6) var(--eahp-s3); background: var(--eahp-stage); border: 1px solid var(--eahp-line2); border-radius: var(--eahp-r-card); } .eahp-empty h3 { margin-bottom: var(--eahp-s1); } .eahp-empty p { color: var(--eahp-muted); font-size: 14px; margin-bottom: var(--eahp-s3); } .eahp-skel { background: var(--eahp-stage); border-radius: var(--eahp-r-ctl); position: relative; overflow: hidden; } .eahp-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--eahp-soft), transparent); transform: translateX(-100%); animation: eahp-shimmer 1.3s infinite; } @keyframes eahp-shimmer { to { transform: translateX(100%); } } /* -------------------------------------------------------------- timeline -- */ .eahp-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--eahp-s4); position: relative; } .eahp-timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--eahp-line); } .eahp-timeline > li { position: relative; padding-bottom: var(--eahp-s3); } .eahp-timeline > li::before { content: ""; position: absolute; left: -21px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--eahp-card); border: 2px solid var(--eahp-acc); } /* --------------------------------------------------------------- heatmap -- * Five DISCRETE steps so a cell can be matched to the legend. A continuous * gradient is unreadable at this size. * ------------------------------------------------------------------------ */ /* A 53-week heatmap is ~740px wide and pushed the whole DOCUMENT sideways by 421px at 375px - measured. It scrolls WITHIN itself instead; a year of weeks cannot be made narrow, but it must never drag the page with it. */ .eahp-heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); gap: 3px; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; } .eahp-heat i { display: block; width: 11px; height: 11px; border-radius: 2px; background: var(--eahp-stage); } .eahp-heat i[data-l="1"] { background: color-mix(in srgb, var(--eahp-acc) 18%, var(--eahp-card)); } .eahp-heat i[data-l="2"] { background: color-mix(in srgb, var(--eahp-acc) 36%, var(--eahp-card)); } .eahp-heat i[data-l="3"] { background: color-mix(in srgb, var(--eahp-acc) 58%, var(--eahp-card)); } .eahp-heat i[data-l="4"] { background: color-mix(in srgb, var(--eahp-acc) 82%, var(--eahp-card)); } @supports not (background: color-mix(in srgb, red 50%, transparent)) { .eahp-heat i[data-l="1"] { background: #EFE3C9; } .eahp-heat i[data-l="2"] { background: #E0CB92; } .eahp-heat i[data-l="3"] { background: #CDAE5C; } .eahp-heat i[data-l="4"] { background: var(--eahp-acc); } } /* ------------------------------------------------------------ responsive -- */ @media (max-width: 640px) { .eahp-avatar { width: 72px; height: 72px; font-size: 24px; } .eahp-avatar--lg { width: 96px; height: 96px; font-size: 30px; } .eahp-dialog { border-radius: var(--eahp-r-dialog) var(--eahp-r-dialog) 0 0; } } /* =========================================================================== * Reduced motion. A global block that clears animation-duration and * transition-duration does NOT clear transform, opacity, animation-name or * animation-delay — so a hover lift and a looping shimmer both survive it. * Cleared explicitly here. * ========================================================================= */ @media (prefers-reduced-motion: reduce) { .eahp-card--interactive:hover, .eahp-avatar:hover { transform: none; } .eahp-btn:active { transform: none; } .eahp-skel::after { animation: none; display: none; } .eahp-btn[data-state="loading"]::after { animation: none; } .eahp-dialog[open] { animation: none; } .eahp-bar__fill, .eahp-ringchart .value, .eahp-tabs__glide { transition: none; } } /* =========================================================================== * v3.39.0 — DENSITY, THE MISSING COVER, AND SCOPING THE HERO * --------------------------------------------------------------------------- * Appended rather than edited in place: this sheet is grouped by component and * the changes below cut across several of those groups. Loading last settles * the cascade without disturbing the component blocks above. No !important on * a custom property — that would win in every consumer, everywhere. * ========================================================================= */ /* 1. MEASURE. 1600px let the hero stretch to 1100px on a 1707px viewport, which is most of why every tile and heading read as oversized. */ .eahp { --eahp-max: 1240px; } /* 2. DENSITY. */ .eahp h2 { font-size: clamp(16.5px, 1.4vw, 19px); } .eahp h3 { font-size: clamp(15px, 1.2vw, 16.5px); } .eahp-stat { padding: var(--eahp-s2) var(--eahp-s3); } .eahp-stat__v { font-size: 20px; } .eahp-stat__l { font-size: 12px; } .eahp-avatar--lg { width: 104px; height: 104px; font-size: 32px; } /* This block loads last, so it out-ranks the responsive step further up the sheet (equal specificity, later source order). Restate it here or the avatar stays 104px on a phone. */ @media (max-width: 720px) { .eahp-avatar--lg { width: 88px; height: 88px; font-size: 28px; } } /* 3. THE STAT STRIP MUST NOT DEPEND ON TILE COUNT. It was repeat(auto-fit, minmax(min(100%,160px), 1fr)). Four tiles gave 249px each; when the two duplicated tiles were removed the survivors stretched to 505px, because 1fr divides the leftover space between however few tiles remain. Capping the track decouples the two. */ .eahp-statstrip { display: grid; gap: var(--eahp-s2); grid-template-columns: repeat(auto-fit, minmax(150px, 210px)); justify-content: start; padding: 0 var(--eahp-s4) var(--eahp-s4); } @media (max-width: 720px) { .eahp-statstrip { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding: 0 var(--eahp-s3) var(--eahp-s3); } } /* 4. THE COVER NEVER HAD A RULE. .eahp-hero-cover was written in Phase 2 and never styled anywhere in the theme, so the element has been 0px tall since it shipped: the banner never rendered and the "Change cover" button floated over nothing. */ .eahp-hero-cover { position: relative; display: grid; place-items: center; min-height: 132px; background: var(--eahp-stage); border-bottom: 1px solid var(--eahp-line2); } .eahp-hero-cover.has-cover { background-image: var(--eahp-cover); background-size: cover; background-position: center; border-bottom-color: transparent; } @media (max-width: 720px) { .eahp-hero-cover { min-height: 96px; } } /* 5. SCOPE THE PAGE-LEVEL CHROME TO THE DASHBOARD SECTIONS. hero.php is composed above the section switcher, so the identity card, the completion centre and the trust card repeated above every one of the 51 panels. They belong with Home and Overview. FAIL-OPEN BY DESIGN: the rule only bites once the switcher has stamped data-eahp-sec. If that script never runs the attribute is absent, the selector does not match, and the hero stays visible exactly as before — a missing script must never blank the page. */ /* The section-scoping rule that lived here is gone: the identity card is now INSIDE the My profile panel, so the switcher hiding that panel hides the card with it. data-eahp-sec is still stamped on .prof-container and stays available for scoping other page-level chrome. */ /* =========================================================================== * v3.40.0 — "YOUR STANDING", the designated home for completion + trust * --------------------------------------------------------------------------- * Scoped to the Dashboard panel so it cannot leak into other sections. * ========================================================================= */ .prof-content-section .eahov-stand { border: 1px solid var(--eahp-line, #E6E0D6); border-radius: var(--eahp-r-card, 14px); background: var(--eahp-card, #fff); margin: 0 0 16px; overflow: hidden; } .prof-content-section .eahov-stand__bar { display: flex; align-items: center; gap: 11px; padding: 12px 14px; cursor: pointer; min-height: 56px; list-style: none; } /* the default marker would sit before our own chevron */ .prof-content-section .eahov-stand__bar::-webkit-details-marker { display: none; } .prof-content-section .eahov-stand__bar::marker { content: ''; } .prof-content-section .eahov-stand__bar:hover { background: var(--eahp-stage, #FAF8F4); } .prof-content-section .eahov-stand__bar:focus-visible { outline: 2px solid var(--eahp-acc, #8F6400); outline-offset: -2px; } .prof-content-section .eahov-stand__ring { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--eahp-acc, #8F6400) 0 var(--eahov-p, 0%), var(--eahp-line, #E6E0D6) var(--eahov-p, 0%) 100%); } .prof-content-section .eahov-stand__ring i { width: 29px; height: 29px; border-radius: 50%; background: var(--eahp-card, #fff); display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--eahp-acc, #8F6400); font-variant-numeric: tabular-nums; } .prof-content-section .eahov-stand__t { flex: 1; min-width: 0; } .prof-content-section .eahov-stand__t b { display: block; font-size: 13.5px; font-weight: 700; color: var(--eahp-ink, #23201B); } .prof-content-section .eahov-stand__t span { display: block; font-size: 12px; color: var(--eahp-muted, #726A60); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prof-content-section .eahov-stand__pill { /* colour comes from .eahp-badge--ok / --warn / --dang, so the closed bar always agrees with the trust card inside it. Layout only here. */ flex: none; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .prof-content-section .eahov-stand__chev { flex: none; color: var(--eahp-muted, #726A60); transition: transform .25s ease; } .prof-content-section .eahov-stand[open] .eahov-stand__chev { transform: rotate(90deg); } .prof-content-section .eahov-stand__body { border-top: 1px solid var(--eahp-line, #E6E0D6); padding: 14px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } /* the two cards already carry their own border inside the panel */ .prof-content-section .eahov-stand__body > .eahp-card { margin: 0; } @media (max-width: 720px) { .prof-content-section .eahov-stand__bar { flex-wrap: wrap; padding: 11px 12px; } .prof-content-section .eahov-stand__t { flex: 1 1 100%; order: 3; } .prof-content-section .eahov-stand__body { padding: 12px; } } @media (prefers-reduced-motion: reduce) { .prof-content-section .eahov-stand__chev { transition: none; } } /* My profile's own buttons ("Edit profile", "Directory") sit at 37px, under the 44px touch floor. They belong to the older eahh- layer; raise them on touch without disturbing the desktop rhythm. */ @media (pointer: coarse), (max-width: 720px) { .prof-content-section[data-section="home"] .eahh-btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } } /* The eyebrow shipped at 9px. It is uppercase and letter-spaced, which costs more legibility than a lowercase label at the same size, and it appears on every eahp surface. 10.5px keeps the proportion and clears the floor. */ .eahp-eyebrow { font-size: 10.5px; letter-spacing: .16em; } /* =========================================================================== * v3.43.0 — My profile header: resize and reposition * --------------------------------------------------------------------------- * The header was competing with the page rather than introducing it. Measured * at 1312px viewport: h1 40px, cover 132px, avatar 104px. * ========================================================================= */ .eahp h1 { font-size: clamp(24px, 2.4vw, 30px); } .eahp-hero-cover { min-height: 112px; } .eahp-avatar--lg { width: 88px; height: 88px; font-size: 28px; } @media (max-width: 720px) { .eahp-hero-cover { min-height: 88px; } .eahp-avatar--lg { width: 76px; height: 76px; font-size: 24px; } } /* The identity card no longer imposes its own measure, so it needs the section's own gutter rather than a nested one. */ .prof-content-section .eahp > .eahp-card { margin-left: 0; margin-right: 0; } /* =========================================================================== * v3.43.0 — ONE VERTICAL RHYTHM on My profile * --------------------------------------------------------------------------- * The rules live in section-home.php's own