/* ============================================================================ * Brute Info — css/pages/profile.css * The learner profile. Composed entirely from the tokens in css/tokens.css and * the shared components in css/components.css; no shared class is restyled * from this file, and no colour is written that a token already names. * ========================================================================== */ /* -------------------------------------------------------------------------- Page-local palette Six cover / avatar gradients, each built from a raw ramp that exists in tokens.css. "accent" follows whichever accent palette the learner picked in settings, so the default cover always matches the rest of the product. -------------------------------------------------------------------------- */ [data-swatch="accent"] { --sw-1: var(--a-400); --sw-2: var(--a-700); } [data-swatch="violet"] { --sw-1: var(--violet-400); --sw-2: var(--violet-700); } [data-swatch="emerald"] { --sw-1: var(--green-400); --sw-2: var(--green-800); } [data-swatch="amber"] { --sw-1: var(--amber-300); --sw-2: var(--amber-700); } [data-swatch="rose"] { --sw-1: var(--red-400); --sw-2: var(--red-800); } [data-swatch="sky"] { --sw-1: var(--sky-400); --sw-2: var(--sky-800); } /* ========================================================================== 1 · PUBLIC-PREVIEW MODE A body class, not an attribute — the appearance attributes belong to settings.js and must never be keyed off from a page stylesheet. ========================================================================== */ .prof-preview-bar { position: sticky; top: var(--header-h); z-index: var(--z-sticky); padding-block: var(--space-3); background: var(--surface-overlay); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--border); } body.is-public-preview [data-edit-only], body.is-public-preview [data-private] { display: none !important; } /* ========================================================================== 2 · COVER BAND ========================================================================== */ .prof-cover { position: relative; isolation: isolate; border-bottom: 1px solid var(--border); background: var(--surface); } .prof-cover-art { position: relative; height: clamp(9rem, 5rem + 14vw, 15rem); background-image: radial-gradient(120% 140% at 8% 0%, color-mix(in srgb, var(--sw-1) 90%, transparent) 0%, transparent 62%), radial-gradient(110% 130% at 92% 10%, color-mix(in srgb, var(--sw-2) 92%, transparent) 0%, transparent 66%), linear-gradient(118deg, var(--sw-1) 0%, var(--sw-2) 100%); } .prof-cover-art::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.5; mix-blend-mode: overlay; } .prof-cover-inner { position: relative; } /* Gradient picker, floated on the cover itself */ .prof-cover-tools { position: absolute; right: var(--container-pad); bottom: calc(100% + var(--space-4)); display: flex; justify-content: flex-end; } .prof-cover-picker { display: flex; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-full); background: var(--surface-overlay); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-md); } .prof-swatch { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full); border: 2px solid transparent; padding: 0; cursor: pointer; background-image: linear-gradient(135deg, var(--sw-1) 0%, var(--sw-2) 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-on-brand) 35%, transparent); transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .prof-swatch:hover { transform: scale(1.08); } .prof-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); } /* Identity */ .prof-identity { display: flex; align-items: flex-end; gap: var(--space-6); padding-block: 0 var(--space-8); margin-top: calc(var(--space-12) * -1); } .prof-avatar-slot { position: relative; flex: 0 0 auto; } /* Every cover runs light (--sw-1 is a 300/400 shade) to dark (--sw-2 is a 700/800). Neither white nor --text-inverse survives that whole range: dark initials measured 2.3:1 over the dark end, white measures 2.8:1 over the light end. The same scrim the course artwork uses flattens the range so --text-on-brand clears AA on every one of the six covers, in both themes. */ .prof-avatar { --art-scrim: color-mix(in srgb, var(--slate-1000) 46%, transparent); width: clamp(6rem, 4.5rem + 5vw, 8.5rem); height: clamp(6rem, 4.5rem + 5vw, 8.5rem); border-radius: var(--radius-2xl); display: grid; place-items: center; overflow: hidden; background-image: linear-gradient(0deg, var(--art-scrim), var(--art-scrim)), linear-gradient(135deg, var(--sw-1) 0%, var(--sw-2) 100%); color: var(--text-on-brand); font-size: clamp(var(--fs-3xl), 1.4rem + 3.4vw, var(--fs-6xl)); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tight); text-transform: uppercase; user-select: none; box-shadow: 0 0 0 4px var(--surface), var(--shadow-lg); } .prof-avatar svg { width: 100%; height: 100%; display: block; } .prof-avatar-edit { position: absolute; right: calc(var(--space-2) * -1); bottom: calc(var(--space-2) * -1); width: 2.375rem; height: 2.375rem; display: grid; place-items: center; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--shadow-md); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .prof-avatar-edit svg { width: 1.125rem; height: 1.125rem; } .prof-avatar-edit:hover { background: var(--primary); color: var(--primary-contrast); border-color: transparent; } .prof-identity-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-1); } .prof-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); } .prof-name { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); overflow-wrap: anywhere; } .prof-name-btn { flex: 0 0 auto; } .prof-name-form { max-width: 26rem; display: flex; flex-direction: column; gap: var(--space-3); } .prof-headline { color: var(--text-muted); font-size: var(--fs-lg); max-width: 58ch; text-wrap: pretty; } .prof-headline.is-placeholder { color: var(--text-muted); font-style: italic; } .prof-facts { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; font-size: var(--fs-md); color: var(--text-muted); } .prof-facts li { display: inline-flex; align-items: center; gap: var(--space-2); } .prof-facts svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--text-subtle); } /* ========================================================================== 3 · STAT ROW ========================================================================== */ /* Every grid on this page uses minmax(min(Xrem, 100%), 1fr) rather than a bare minmax(Xrem, 1fr). A rem track keeps growing when the reader turns the text-size setting up to 1.2, and on a 360px screen it then outgrows its container — base.css clips horizontal overflow, so the tail of the card would simply disappear. min() lets the last remaining track fall back to the container width. */ .prof-stat-grid { display: grid; gap: var(--tile-gap); grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); } .prof-stat-note { font-size: var(--fs-xs); color: var(--text-muted); } /* ========================================================================== 4 · LAYOUT ========================================================================== */ .prof-layout { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } .prof-col-main, .prof-col-rail { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; } .prof-sub-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); } .prof-sub-hint { font-size: var(--fs-sm); color: var(--text-muted); } /* ========================================================================== 5 · LEARNING SNAPSHOT ========================================================================== */ .prof-rings { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); } .prof-ring-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--card-pad-tight); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-inset); } .prof-ring-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } .prof-ring-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prof-ring-meta { font-size: var(--fs-xs); color: var(--text-muted); } .prof-ring-link { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--primary); text-decoration: none; } .prof-ring-link:hover { text-decoration: underline; } /* Heatmap */ .prof-heat { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); } .prof-heat-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); } .prof-heat-legend { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-2xs); color: var(--text-muted); } .prof-heat-key { width: 0.75rem; height: 0.75rem; border-radius: var(--radius-xs); border: 1px solid var(--border-subtle); } .prof-heat-key[data-level="0"] { background: var(--surface-3); } .prof-heat-key[data-level="1"] { background: color-mix(in srgb, var(--primary) 28%, var(--surface-3)); } .prof-heat-key[data-level="2"] { background: color-mix(in srgb, var(--primary) 52%, var(--surface-3)); } .prof-heat-key[data-level="3"] { background: color-mix(in srgb, var(--primary) 76%, var(--surface-3)); } .prof-heat-key[data-level="4"] { background: var(--primary); } .prof-heat-scroll { overflow-x: auto; padding-bottom: var(--space-2); } .prof-heat-svg { display: block; } .prof-heat-cell { fill: var(--surface-3); stroke: var(--border-subtle); stroke-width: 0.6; transition: fill var(--dur-fast) var(--ease-standard); } .prof-heat-cell[data-level="1"] { fill: color-mix(in srgb, var(--primary) 28%, var(--surface-3)); } .prof-heat-cell[data-level="2"] { fill: color-mix(in srgb, var(--primary) 52%, var(--surface-3)); } .prof-heat-cell[data-level="3"] { fill: color-mix(in srgb, var(--primary) 76%, var(--surface-3)); } .prof-heat-cell[data-level="4"] { fill: var(--primary); } .prof-heat-cell.is-today { stroke: var(--text); stroke-width: 1.4; } .prof-heat-label { fill: var(--text-muted); font-size: 11px; font-weight: var(--fw-semibold); } /* ========================================================================== 6 · ACHIEVEMENTS ========================================================================== */ .prof-badge-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); } .prof-badge { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--card-pad-tight); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .prof-badge-art { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--radius-md); } .prof-badge-art svg { width: 1.5rem; height: 1.5rem; } .prof-badge.is-earned { border-color: var(--primary-border); background: var(--primary-soft); } .prof-badge.is-earned .prof-badge-art { background: var(--primary); color: var(--primary-contrast); box-shadow: var(--shadow-brand); } .prof-badge.is-earned .prof-badge-name { color: var(--primary-soft-text); } .prof-badge.is-locked { background: var(--surface-inset); } .prof-badge.is-locked .prof-badge-art { background: var(--surface-3); color: var(--text-subtle); } .prof-badge.is-locked .prof-badge-name, .prof-badge.is-locked .prof-badge-hint { color: var(--text-muted); } .prof-badge-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); } .prof-badge-state { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); } .prof-badge.is-earned .prof-badge-state { color: var(--success-soft-text); } .prof-badge-state svg { width: 0.875rem; height: 0.875rem; } .prof-badge-hint { font-size: var(--fs-xs); color: var(--text-muted); } /* ========================================================================== 7 · CERTIFICATES ========================================================================== */ .prof-cert-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); } .prof-cert { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; } .prof-cert.is-issued { border-color: var(--success-border); background: var(--success-soft); } .prof-cert.is-locked { background: var(--surface-inset); } .prof-cert-ribbon { position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: var(--grad-brand); } .prof-cert.is-issued .prof-cert-ribbon { background: var(--success); } .prof-cert-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); } .prof-cert-meta { font-size: var(--fs-xs); color: var(--text-muted); } .prof-cert-serial { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--success-soft-text); word-break: break-all; } .prof-cert-foot { margin-top: auto; } /* ========================================================================== 7b · EMPTY STATES INSIDE THE CARD GRIDS js/pages/profile.js drops its "No courses yet" / "No certificates yet" blocks straight into these auto-fill grids, where they were landing in a single 13rem/16rem column: a three-word-per-line paragraph with two thirds of the card left blank. An empty state is a statement about the whole section, so it spans every column. ========================================================================== */ .prof-rings > .empty-state, .prof-badge-grid > .empty-state, .prof-cert-grid > .empty-state { grid-column: 1 / -1; } /* The private-profile notice draws the same artwork treatment the learner surfaces use elsewhere — scaled to the block and in the brand colour — instead of the shared 5rem grey default, which rendered a 120x100 drawing as a faint hairline thumbnail. */ #prof-private-state .empty-state-art { color: var(--primary); } #prof-private-state .empty-state-art > svg { width: 100%; height: auto; max-width: 13rem; } /* ========================================================================== 8 · SOCIAL LINKS ========================================================================== */ .prof-social-view { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); } .prof-social-view:empty { display: none; } .prof-social-link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text); text-decoration: none; overflow-wrap: anywhere; } .prof-social-link svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; color: var(--text-subtle); } .prof-social-link:hover { color: var(--primary); } .prof-social-link:hover svg { color: var(--primary); } .prof-social-empty { font-size: var(--fs-sm); color: var(--text-muted); } /* ========================================================================== 9 · PRIVACY CARD ========================================================================== */ #prof-privacy .card-body { display: flex; flex-direction: column; gap: var(--space-5); } .prof-privacy-note { font-size: var(--fs-sm); color: var(--text-muted); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-inset); border: 1px solid var(--border-subtle); } .prof-privacy-foot { font-size: var(--fs-xs); color: var(--text-muted); } .prof-privacy-foot a { color: var(--primary); } .prof-email-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); } .prof-email { font-size: var(--fs-md); font-weight: var(--fw-medium); overflow-wrap: anywhere; } .prof-provider { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.2rem var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap; } .prof-provider svg { width: 0.9375rem; height: 0.9375rem; } .prof-counter.is-limit { color: var(--warn-soft-text); font-weight: var(--fw-semibold); } /* ========================================================================== 10 · AVATAR PICKER (inside the shared modal) ========================================================================== */ .prof-picker { display: flex; flex-direction: column; gap: var(--space-5); } .prof-picker-note { font-size: var(--fs-sm); color: var(--text-muted); } .prof-picker-label { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); } .prof-picker-group { display: flex; flex-direction: column; gap: var(--space-3); } .prof-picker-row { display: flex; flex-wrap: wrap; gap: var(--space-3); } .prof-picker-tile { width: 4rem; height: 4rem; padding: 0; overflow: hidden; border-radius: var(--radius-lg); border: 2px solid var(--border); background: var(--surface-2); color: var(--text-inverse); cursor: pointer; display: grid; place-items: center; font-size: var(--fs-lg); font-weight: var(--fw-extrabold); text-transform: uppercase; transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .prof-picker-tile svg { width: 100%; height: 100%; display: block; } .prof-picker-tile:hover { transform: translateY(-2px); } .prof-picker-tile[aria-checked="true"] { border-color: var(--primary); box-shadow: var(--ring); } .prof-picker-tile.is-gradient { background-image: linear-gradient(135deg, var(--sw-1) 0%, var(--sw-2) 100%); } .prof-picker-preview { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-inset); border: 1px solid var(--border); } .prof-picker-preview .prof-avatar { width: 4.5rem; height: 4.5rem; font-size: var(--fs-2xl); box-shadow: none; } .prof-picker-preview-copy { font-size: var(--fs-sm); color: var(--text-muted); } /* ========================================================================== 11 · RESPONSIVE ========================================================================== */ @media (max-width: 1080px) { .prof-layout { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .prof-identity { flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-top: calc(var(--space-10) * -1); } .prof-cover-tools { bottom: calc(100% + var(--space-3)); right: var(--container-pad); } .prof-name { font-size: var(--fs-3xl); } .prof-preview-bar { top: 0; } } @media (prefers-reduced-motion: reduce) { .prof-swatch, .prof-picker-tile, .prof-heat-cell { transition: none; } .prof-swatch:hover, .prof-picker-tile:hover { transform: none; } } /* ========================================================================== CONTRAST BRIDGE — shared components that still carry --text-subtle --text-subtle resolves to #7c8598 in the light theme: 3.71:1 on --surface and 3.27:1 on --surface-2, both under the 4.5:1 AA bar for body text (it also lands at 4.43:1 on --surface-2 in dark). Every rule THIS file owns already uses --text-muted; what remains are shared components from css/components.css, which this page may not edit. These overrides are scoped to #main so they can never reach the site header or footer that css/layout.css owns. Delete this block once --text-subtle is retuned to clear AA in css/tokens.css — nothing here changes the design intent, only the tier of grey that carries it. ========================================================================== */ #main .field-hint, #main .field-optional, #main .checkbox-hint, #main .radio-hint, #main .switch-hint, #main .stat-hint, #main .accordion-meta, #main .range-scale, #main .range-scale > * { color: var(--text-muted); } /* A placeholder still has to read as a prompt rather than a value: --text-muted sits well clear of --text, so the two never look alike. */ #main .input::placeholder, #main .textarea::placeholder, #main textarea::placeholder, #main input::placeholder { color: var(--text-muted); opacity: 1; } #main .setting-hint, #main .avatar-group-sub { color: var(--text-muted); } /* The "%" beside each progress ring is 11px --text-subtle, which measures 3.49:1 on the --surface-inset the ring cards sit on in the light theme. --text-muted keeps it visibly quieter than the figure it follows while clearing AA in both themes. */ #main .prof-ring-card .ring-text small { color: var(--text-muted); }