/* ========================================================================== lms-progress-irl.css — IE-PROGRESS-V1 (mysafety.courses) = the --lms-* token :root from lms-system.css (variables only, no layout) + lms-progress.css WITHOUT its two global chrome rules (.navbar-header display:none, .navbar-main position:absolute) — those belong to the UK header redesign, which is explicitly out of scope here. Loaded by Sys\Registry::step_check() on pages that render the rail. The original UK files stay byte-identical and unlinked. ========================================================================== */ :root{ /* ---- neutrals (cool/navy bias, deliberately not pure grey) ---- */ --lms-page:#F4F6FA; --lms-surface:#FFFFFF; --lms-surface-2:#FAFBFD; --lms-surface-sunk:#EDF1F6; --lms-border:#DCE3EC; --lms-border-strong:#C1CCDA; --lms-ink:#0C1B2A; --lms-ink-2:#3B4E63; /* darkened from #6A7C92 — measured 3.95:1 on the page ground and 4.28:1 on white, both under the 4.5:1 needed at these sizes. Same hue, no new colour introduced. Verified: every secondary-text class now clears 4.5:1 against the surface it actually sits on, including the 11.5px uppercase eyebrow on the page ground, which was the tightest case. */ --lms-ink-3:#5F7186; /* ---- brand: deep navy = primary UI + main CTA ---- */ --lms-brand:#123A5C; --lms-brand-hover:#0D2B45; --lms-brand-active:#0A2438; --lms-brand-tint:#E7EEF6; /* ---- accent: orange = brand accent + COMMERCE ONLY ---- */ --lms-accent:#D95F0E; --lms-accent-hover:#BC4F06; --lms-accent-active:#A34504; --lms-accent-tint:#FCEEE3; --lms-accent-border:#F2CDAF; /* ---- semantic ---- */ --lms-ok:#0E7A4A; --lms-ok-tint:#E4F4EC; --lms-ok-border:#B4DFC8; --lms-warn:#9A5B06; --lms-warn-tint:#FBF0DE; --lms-warn-border:#EBD3A6; --lms-danger:#B8321F; --lms-danger-tint:#FBEAE7; --lms-danger-border:#EFC2BA; --lms-info:#1B5B80; --lms-info-tint:#E6F0F6; --lms-info-border:#B9D4E5; --lms-focus:#2F86AD; --lms-focus-ring:rgba(47,134,173,.28); /* ---- radii ---- */ --lms-r-sm:6px; --lms-r-md:10px; --lms-r-lg:14px; --lms-r-xl:20px; --lms-r-pill:999px; /* ---- spacing scale (4px base) ---- */ --lms-s1:4px; --lms-s2:8px; --lms-s3:12px; --lms-s4:16px; --lms-s5:20px; --lms-s6:24px; --lms-s8:32px; --lms-s10:40px; --lms-s12:48px; --lms-s16:64px; /* ---- elevation ---- Three layers each: a hairline contact shadow, a short ambient, and a long soft one. The hairline is what stops a card reading as "flat rectangle on grey" without needing a heavier blur. Tinted navy, never neutral black. */ --lms-sh-1:0 0 0 .5px rgba(12,27,42,.04), 0 1px 1.5px rgba(12,27,42,.05), 0 2px 4px rgba(12,27,42,.03); --lms-sh-2:0 0 0 .5px rgba(12,27,42,.05), 0 2px 4px rgba(12,27,42,.05), 0 8px 20px rgba(12,27,42,.07); --lms-sh-3:0 0 0 .5px rgba(12,27,42,.06), 0 8px 16px rgba(12,27,42,.07), 0 28px 56px rgba(12,27,42,.13); /* ---- type ---- */ --lms-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --lms-font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; /* ---- motion ---- */ --lms-t-fast:120ms; --lms-t:160ms; --lms-ease:cubic-bezier(.4,0,.2,1); } /* ========================================================================== lms-progress.css - course progress component (PROGRESS-001) Requires lms-system.css (UI-001) for the --lms-* tokens. Markup is emitted by Sys\Registry::step_check(). PROGRESS-003 - palette brought onto the system. The component was built around two colours of its own: a #1565D8 blue for the current node and a #16A34A green for everything completed, neither of which appears anywhere else in the LMS. On a finished course that produced a panel that was green end to end and read as a different product. Navy now carries every structural state - completed nodes, the current node, the progress fill, the icon area and the button - and orange is reserved for emphasis only: completion ticks, the ring around the current node, the ring around a finished certificate, and the left accent on the summary card. Only colour, and the borders and rings that carry it, are touched here. Every geometry decision below is deliberate and left exactly as it was: nothing is rotated (a rotated milestone's bounding box used to push the last node out of the card), the final badge is tucked inward for the same reason, hit areas stay at 44px, and the mobile grid keeps the status glyph beside the heading. ========================================================================== */ .cp{position:relative;background:var(--lms-surface);border:1px solid var(--lms-border); border-radius:var(--lms-r-lg);box-shadow:var(--lms-sh-1);padding:16px 18px; display:flex;flex-direction:column;gap:13px;min-width:0;font-family:var(--lms-font)} .cp-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;min-width:0} .cp-where{font-size:14.5px;font-weight:620;color:var(--lms-ink);letter-spacing:-.008em} .cp-pct{font-size:12.5px;color:var(--lms-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap} .cp-pct b{font-weight:660;color:var(--lms-ink-2)} /* ---- stepper: implements the approved visual reference ------------------- Large outlined nodes with the identity inside, a full label beneath every one, and a connector that runs exactly through node centres. Nothing is rotated and every node is a fixed-width column, so the last node cannot leave the card. */ .cp-steps{--cp-navy:var(--lms-brand);--cp-accent:var(--lms-accent); --cp-line:var(--lms-border);--cp-num:var(--lms-ink-3); display:flex;align-items:flex-start;justify-content:center; padding:4px 8px 0;min-width:0;overflow-x:auto;scrollbar-width:none} .cp-steps::-webkit-scrollbar{display:none} /* padding-bottom reserves the label's lane. It is 28px rather than the original 20px because the current node now carries a 4.5px accent ring: at the old rhythm the ring sat about 3px from the label and read as a collision. */ .cp-step{flex:0 0 auto;width:74px;display:flex;flex-direction:column;align-items:center; text-decoration:none;position:relative;padding-bottom:28px} .cp-step__m{position:relative;width:40px;height:40px;border-radius:var(--lms-r-pill); display:flex;align-items:center;justify-content:center; font-size:17px;font-weight:700;font-style:normal;line-height:1; font-variant-numeric:tabular-nums; background:var(--lms-surface);border:2px solid var(--cp-line);color:var(--cp-num); transition:background-color var(--lms-t) var(--lms-ease), border-color var(--lms-t) var(--lms-ease), box-shadow var(--lms-t) var(--lms-ease)} .cp-step__m svg{width:20px;height:20px;display:block} /* the label hangs from the bottom of that lane; -14px against 28px of padding leaves a 14px gap under the node, and ~9.5px clear of the accent ring */ .cp-step__l{position:absolute;top:100%;left:50%;transform:translate(-50%,-14px); font-size:12px;font-weight:600;line-height:1;color:var(--lms-ink-3); white-space:nowrap;font-style:normal;pointer-events:none} .cp-l-short{display:none} /* completed: navy fill, identity kept, small orange check badge */ .cp-step.is-done .cp-step__m{background:var(--cp-navy);border-color:var(--cp-navy);color:#fff} .cp-step.is-done .cp-step__l{color:var(--lms-ink-2)} .cp-step.is-done .cp-step__m::after{content:"\2713";position:absolute;top:-3px;right:-3px; width:15px;height:15px;border-radius:var(--lms-r-pill);background:var(--cp-accent); color:#fff;font-size:9px;font-weight:800;line-height:15px;text-align:center; border:2px solid var(--lms-surface)} /* current: navy fill inside an orange ring - the one node the eye should find */ .cp-step.is-current .cp-step__m{background:var(--cp-navy);border-color:var(--cp-navy);color:#fff; box-shadow:0 0 0 3px var(--lms-accent-tint),0 0 0 4.5px var(--cp-accent)} .cp-step.is-current .cp-step__l{color:var(--lms-brand);font-weight:700} /* upcoming: white surface, quiet ring, muted identity */ .cp-step.is-locked .cp-step__m{background:var(--lms-surface);border-color:var(--cp-line); color:var(--cp-num)} .cp-step.is-locked .cp-step__l{color:var(--lms-ink-3)} a.cp-step:focus-visible{outline:2px solid var(--lms-focus);outline-offset:3px;border-radius:10px} a.cp-step:hover .cp-step__m{border-color:var(--cp-navy)} a.cp-step::after{content:"";position:absolute;left:50%;top:20px;width:48px;height:48px; transform:translate(-50%,-50%)} /* connector sits on the node centre line (40px node -> 19px) */ .cp-join{flex:1 1 auto;min-width:8px;max-width:52px;height:2px;margin-top:19px; background:var(--cp-line)} .cp-join.is-done{background:var(--lms-brand)} .cp-join.is-next{background:var(--lms-brand)} /* The final node's completion badge is the only thing that can reach past the last column. Tucking it inside guarantees the Cert node stays within the component at any width - no padding tuning required. */ .cp-step:last-child.is-done .cp-step__m::after{top:-1px;right:-1px} /* a finished certificate is the end of the journey and carries the accent */ .cp-step:last-child.is-done .cp-step__m{box-shadow:0 0 0 3px var(--lms-accent-tint), 0 0 0 4.5px var(--lms-accent)} /* Mobile keeps the same visual language at a tighter rhythm: short labels (Start / M1..Mn / Test / Cert) and narrower columns, so a full short course fits inside the card at 360px without the rail scrolling. */ @media (max-width:560px){ .cp-steps{padding:4px 8px 0} /* same reasoning as desktop at the tighter rhythm: 22px lane, label hung at -9px, so the 3px mobile ring still clears the label */ .cp-step{width:30px;padding-bottom:22px} .cp-step__m{width:24px;height:24px;font-size:11px;border-width:1.5px} .cp-step__m svg{width:13px;height:13px} .cp-step__l{font-size:9px;transform:translate(-50%,-9px)} .cp-l-full{display:none} .cp-l-short{display:inline} .cp-step.is-done .cp-step__m::after{width:11px;height:11px;line-height:11px;font-size:7px; border-width:1.5px;top:-2px;right:-2px} /* the rings are scaled with the node so they cannot collide at this rhythm */ .cp-step.is-current .cp-step__m{box-shadow:0 0 0 2px var(--lms-accent-tint), 0 0 0 3px var(--lms-accent)} .cp-step:last-child.is-done .cp-step__m{box-shadow:0 0 0 2px var(--lms-accent-tint), 0 0 0 3px var(--lms-accent)} .cp-join{margin-top:11px;min-width:3px;max-width:20px} a.cp-step::after{top:12px} } @media (max-width:380px){ .cp-steps{padding:4px 7px 0} .cp-step{width:27px} .cp-step__m{width:22px;height:22px;font-size:10.5px} .cp-step__l{font-size:8.5px} .cp-join{margin-top:10px;min-width:2px;max-width:14px} } @media (prefers-reduced-motion:reduce){.cp-step__m{transition:none}} .cp-mini{display:flex;align-items:center;gap:10px;min-width:0} .cp-mini__bar{flex:1 1 auto;height:6px;border-radius:var(--lms-r-pill); background:var(--lms-surface-sunk);overflow:hidden;min-width:0} .cp-mini__bar > i{display:block;height:100%;border-radius:var(--lms-r-pill);background:var(--lms-brand)} /* ---- summary card ------------------------------------------------------- One card for every state, per the reference: white surface, quiet border and shadow, a navy icon area on the left and an orange rule down the leading edge. The three tones no longer repaint the whole card - they change the accent and the glyph only, so Certified, In progress and Not started stay recognisably the same object. */ .cp-resume{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; min-width:0;padding:13px 14px 13px 16px;border-radius:var(--lms-r-md); background:var(--lms-surface);border:1px solid var(--lms-border); box-shadow:var(--lms-sh-1);border-left:3px solid var(--lms-accent)} .cp-resume--ok{background:var(--lms-surface);border-color:var(--lms-border); border-left-color:var(--lms-accent)} .cp-resume--action{background:var(--lms-accent-tint);border-color:var(--lms-accent-border); border-left-color:var(--lms-accent)} /* status glyph on the left of the panel, per the approved reference. Navy is the constant; the accent lives on the card edge and the ticks. */ .cp-resume__i{flex:0 0 auto;width:26px;height:26px;border-radius:var(--lms-r-pill); display:flex;align-items:center;justify-content:center; background:var(--lms-brand);color:#fff;font-style:normal} .cp-resume__i svg{width:15px;height:15px;display:block} .cp-resume--ok .cp-resume__i{background:var(--lms-brand); box-shadow:0 0 0 2px var(--lms-accent-tint),0 0 0 3px var(--lms-accent)} .cp-resume--action .cp-resume__i{background:var(--lms-accent)} .cp-resume__t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 220px} /* When .cp-resume becomes a column on narrow screens the main axis turns vertical, so the 220px flex-basis above was being applied as a HEIGHT and inflated the panel to ~304px. Basis is reset once the direction flips. */ @media (max-width:520px){ .cp-resume__t{flex:0 0 auto} /* keep the status glyph inline beside the heading, as in the reference, rather than letting the column direction stack it above the text */ .cp-resume{justify-content:flex-start;display:grid; grid-template-columns:auto 1fr;grid-template-areas:"i t" "b b"; align-items:start;row-gap:12px;column-gap:10px} .cp-resume__i{grid-area:i;margin-top:1px} .cp-resume__t{grid-area:t} .cp-resume .cp-btn{grid-area:b;width:100%} } .cp-resume__h{font-size:14.5px;font-weight:650;color:var(--lms-ink);letter-spacing:-.008em} .cp-resume__s{font-size:12.5px;color:var(--lms-ink-2)} .cp-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px; font-size:14.5px;font-weight:610;letter-spacing:-.005em;border-radius:var(--lms-r-md); background:var(--lms-brand);color:#fff;text-decoration:none;white-space:nowrap;flex:none; box-shadow:var(--lms-sh-1);transition:background-color var(--lms-t) var(--lms-ease)} .cp-btn:hover{background:var(--lms-brand-hover);color:#fff} .cp-btn:focus-visible{outline:2px solid var(--lms-focus);outline-offset:2px} .cp-exit{position:relative;align-self:flex-start;font-size:12.5px;font-weight:590; color:var(--lms-ink-3);text-decoration:none} /* the label is only 38x15; the hit area is expanded the same way as the dots so the control meets 44px without changing where the text sits */ .cp-exit::after{content:"";position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);min-width:44px;width:100%;height:44px} .cp-exit:focus-visible{outline:2px solid var(--lms-focus);outline-offset:3px;border-radius:4px} .cp-exit:hover{color:var(--lms-ink)} @media (max-width:430px){ .cp{padding:14px;gap:12px} .cp-resume{flex-direction:column;align-items:stretch;padding:12px} .cp-resume .cp-btn{width:100%} } @media (prefers-reduced-motion:reduce){.cp-dot{transition:none}} /* ========================================================================== 14 · COURSE HERO - REMOVE THE REPEATED MODULE ROW -------------------------------------------------------------------------- The hero block emits a 56px strip immediately above itself carrying a "Module N" chip and " - ". Every word of it is already on screen: the panel above states "Module 1 of 4", the hero states the module title, and the hero badge states " - Module 1 of 4". It was three lines of the same sentence and 56px of vertical space before the content. Hidden rather than deleted, deliberately. That markup is html_block content in the database, not a file, and DB content is out of scope here - so this removes the row from view without editing a record. It reverses by deleting these two lines. Courses whose hero does not emit the strip are unaffected: the selector simply matches nothing (verified - it is absent on haccp2). Two classes, not one. The hero ships its own style block INSIDE the body, which therefore comes after this stylesheet in document order and carries an equal one-class weight - a bare .fc-bar rule here loses that tie every time (measured: computed display stayed flex). Qualifying by the parent makes it two classes, which wins on specificity no matter where either block sits, and avoids a priority flag. ========================================================================== */ .fc .fc-bar{display:none} /* ========================================================================== 15 · LONG COURSES - DISCLOSURE RAIL (PROGRESS-006) -------------------------------------------------------------------------- A course past eight stages cannot show every node at once: 18 of them need ~1470px on desktop and ~590px on mobile. So the rail lives in a disclosure, and the collapsed head carries a three-node window - previous, current, next. The toggle is a checkbox with a label rather than
. The first build used
and leaned on CSS to reveal a CLOSED disclosure's content on desktop; that failed in the real page and a certified learner saw only a percentage bar. Sibling selectors off :checked behave the same everywhere, which is the whole reason for the swap. The rail scrolls inside its own container, so the document never widens. ========================================================================== */ .cp-long{ min-width:0; display:flex; flex-direction:column; gap:8px; } .cp-long__t{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; } .cp-long__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; } .cp-steps--win{ justify-content:flex-start; flex:1 1 auto; padding-bottom:0; } .cp-long__more{ flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; cursor:pointer; font-size:12.5px; font-weight:650; color:var(--lms-brand); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--lms-accent); white-space:nowrap; } .cp-long__more:hover{ color:var(--lms-brand-hover); } .cp-long__t:focus-visible + .cp-long__head .cp-long__more{ outline:2px solid var(--lms-focus); outline-offset:3px; border-radius:4px; } .cp-long__more-close{ display:none; } .cp-long__t:checked + .cp-long__head .cp-long__more-open{ display:none; } .cp-long__t:checked + .cp-long__head .cp-long__more-close{ display:inline; } /* the full rail: hidden until asked for, and always scrolls inside itself */ .cp-steps--rail{ display:none; justify-content:flex-start; overflow-x:auto; scrollbar-width:thin; padding-top:4px; } .cp-long__t:checked ~ .cp-steps--rail{ display:flex; } @media only screen and (min-width:651px){ /* desktop: the rail is the primary view; the window and toggle step aside */ .cp-long__head{ display:none; } .cp-long > .cp-steps--rail{ display:flex; padding-top:0; } } @media only screen and (max-width:650px){ /* once the full rail is open the three-node window would only repeat it */ .cp-long__t:checked + .cp-long__head .cp-steps--win{ display:none; } } /* ========================================================================== 16 · CERTIFIED / CERTIFICATE ACTION (CERT-UI-001) -------------------------------------------------------------------------- The certified panel does two different jobs depending on where it is shown, and the engine says which by adding --dl on the certificate page only: ordinary step page .cp-resume--ok navy "View certificate" -> /cert certificate page .cp-resume--dl orange "Download certificate" Only the second is the final action, so only the second is orange. This is the one place the accent is allowed to carry a primary control outside commerce: it IS the transaction the learner came for, and the reference requires it to be the loudest thing on the page. Everywhere else the panel keeps navy, so the orange never becomes ambient. The layout is the shared .cp-resume flex row - icon, text, action - scaled up rather than rebuilt, so the certificate panel is recognisably the same object as every other state and inherits the mobile grid below unchanged. Both states that stand on the cert page - certified and cert_ready - carry --dl, so the panel that issues a certificate for the first time and the panel that re-downloads one are the same object. cert_ready also carries --action, whose tint and orange glyph belong to a mid-course prompt; --dl is declared after it and takes the panel back to the reference's white surface and navy mark, so the accent is spent on the button alone. ========================================================================== */ /* The component sizes itself rather than trusting an ambient reset. .cp-btn carries 24px of horizontal padding and, under content-box, "width:100%" on the mobile grid resolved to the track width PLUS that padding - the button rendered 347px inside a 299px track and broke out of the panel. lms-system.css already declares box-sizing per component (.lms-btn, .lms-input, .lms-container) for the same reason; this brings .cp in line. Where a global border-box reset is already in force this changes nothing. */ .cp,.cp *{ box-sizing:border-box; } .cp-resume--dl{ gap:16px; padding:16px 16px 16px 18px; background:var(--lms-surface); border-color:var(--lms-border); border-left-width:4px; border-left-color:var(--lms-accent); } /* the award mark, sized as an achievement rather than a status tick */ .cp-resume--dl .cp-resume__i{ width:46px; height:46px; background:var(--lms-brand); box-shadow:0 0 0 3px var(--lms-accent-tint), 0 0 0 4.5px var(--lms-accent); } .cp-resume--dl .cp-resume__i svg{ width:25px; height:25px; } .cp-resume--dl .cp-resume__h{ font-size:19px; font-weight:680; letter-spacing:-.014em; } .cp-resume--dl .cp-resume__s{ font-size:13.5px; color:var(--lms-ink-2); } /* the primary certificate control */ .cp-btn--dl{ height:50px; padding:0 24px; font-size:15.5px; font-weight:660; background:var(--lms-accent); color:#fff; box-shadow:0 1px 2px rgba(12,27,42,.08), 0 6px 16px rgba(217,95,14,.24); } .cp-btn--dl:hover{ background:var(--lms-accent-hover); color:#fff; box-shadow:0 1px 2px rgba(12,27,42,.08), 0 8px 22px rgba(217,95,14,.3); } .cp-btn--dl:active{ background:var(--lms-accent-active); } .cp-btn__i{ width:19px; height:19px; flex:0 0 auto; display:block; margin-right:10px; } /* Desktop: the reference's balanced two-halves row, separated by a hairline. Below this width the row wraps and the rule would cut across the wrap, so it only exists where the two halves are genuinely side by side. */ @media only screen and (min-width:760px){ .cp-resume--dl{ gap:22px; padding:20px 20px 20px 22px; } .cp-resume--dl .cp-resume__t{ border-right:1px solid var(--lms-border); padding-right:22px; } .cp-resume--dl .cp-resume__i{ width:54px; height:54px; } .cp-resume--dl .cp-resume__i svg{ width:29px; height:29px; } .cp-resume--dl .cp-resume__h{ font-size:21px; } .cp-resume--dl .cp-resume__s{ font-size:14px; } } /* Mobile: inherits the grid from section 13 - icon and text on the first row, action full-width beneath - so nothing here needs to re-declare the layout. It only drops the desktop hairline and takes the type back down. */ @media only screen and (max-width:520px){ .cp-resume--dl{ padding:14px; gap:12px; } .cp-resume--dl .cp-resume__t{ border-right:0; padding-right:0; } .cp-resume--dl .cp-resume__h{ font-size:17px; } .cp-resume--dl .cp-resume__i{ width:38px; height:38px; } .cp-resume--dl .cp-resume__i svg{ width:21px; height:21px; } .cp-resume--dl .cp-btn--dl{ width:100%; height:48px; } } /* ========================================================================== UKUI-APPROVED · 2026-08-19 Implements the approved certificate direction. Additive only: every rule below either styles a class that did not exist before (.cp-wrap, .cp-exit--after, .cp-pct--issued, .cp-resume--issued) or refines one that already had a default. No token is redefined and no earlier rule is deleted, so removing this block restores the previous appearance exactly. ========================================================================== */ /* The panel and its one text link are now siblings inside a single root, so step_check() still returns one element to every consumer. */ .cp-wrap{display:block;min-width:0} /* The link left the card. Outside it there is no flex parent to align against and no card padding to sit in, so it states its own box. Slightly larger than the in-card version because it is now the only control below the card and had to survive without the card's edge to anchor it. */ .cp-exit--after{display:inline-flex;align-items:center;gap:9px;align-self:auto; margin:14px 0 0 4px;font-size:14px;font-weight:640;color:var(--lms-ink-2)} .cp-exit--after .cp-exit__i{width:17px;height:17px;display:block;flex:0 0 auto} .cp-exit--after:hover{color:var(--lms-ink)} /* "Certificate issued" reads as a state, not as a measurement, so it takes the brand colour rather than the muted numeric tone the percentage uses. The shield is decorative and carries the accent. */ .cp-pct--issued{display:inline-flex;align-items:center;gap:6px; color:var(--lms-brand);font-weight:620} .cp-pct--issued .cp-pct__i{width:16px;height:16px;display:block;flex:0 0 auto; color:var(--lms-accent)} /* Certified, seen from an ordinary module page. Same panel and same award mark as the certificate page; navy instead of orange because the terminal action is not on this page. Deliberately lighter than .cp-resume--dl. */ .cp-resume--issued{border-left-color:var(--lms-brand)} .cp-resume--issued .cp-resume__i{width:38px;height:38px;background:var(--lms-brand); box-shadow:0 0 0 3px #fff,0 0 0 5px var(--lms-brand-tint)} .cp-resume--issued .cp-resume__i svg{width:21px;height:21px} .cp-resume--issued .cp-resume__h{font-size:16px;font-weight:670;letter-spacing:-.01em} .cp-resume--issued .cp-resume__s{font-size:13px;color:var(--lms-ink-2)} @media (max-width:520px){ .cp-resume--issued .cp-resume__i{width:34px;height:34px} .cp-resume--issued .cp-resume__i svg{width:19px;height:19px} } /* ========================================================= COURSE-RAIL-FIX-002 Global course player UI rules ========================================================= */ /* * Active module has an outer orange ring. * Give every progress rail enough vertical room so that ring * is never clipped by the top edge / theory progress line. */ .cp-steps { padding-top: 12px !important; overflow: visible !important; } .cp-long, .cp-long__head, .cp-steps--rail, .cp-steps--win { overflow: visible !important; } /* * Keep the whole marker slightly below the percentage line. * Applies equally to Module 1, 2, 3... Test and Certificate. */ .cp-step, .cp-join { transform: translateY(4px); } /* Mobile needs slightly more room for the orange current ring. */ @media (max-width: 991px) { .cp-steps { padding-top: 16px !important; } .cp-step, .cp-join { transform: translateY(5px); } }