/** * Member Path — member-facing styles. * * Every rule is prefixed with #scp-primary on purpose. The base public sheet * carries `#scp-primary :not(.scp-shortcode-elements *) { margin:0; padding:0 }` * at specificity (1,1,0), which outranks a plain `.scp-mp .x` rule (0,2,0) and * silently flattens the padding off every button and card. Keep the prefix on * any rule added here, and verify computed styles rather than trusting the file. * * Scoped under .scp-mp so nothing leaks into the other My Account tabs. Colours * follow the site's front-end palette rather than the mockup's pink/purple; * icons are SVG, never emoji. */ /* Every accent on this tab comes from the SCP Styles setting. No brand colour is typed into this file. Settings -> Styles -> "Primary Background" is stored as scp_primary_bg_color (default #00ccc8) and is already published to every front-end page as --scp-primary-bg-color on — see the style block in class-smart-creator-press-public.php. "Primary Text" rides along as --scp-primary-text-color, which is the colour the creator chose to sit ON that fill, so solid buttons take the pair rather than assuming white. The hex after each comma is a fallback for the case where that block never ran. Each one is either the setting's own default or an existing SCP token value (--teal-dark / --teal-soft / --teal-border from scp-general-v2.css), so a fallback can never introduce a colour the design system does not already have. Everything below the accent is DERIVED from it with color-mix rather than written down, so repainting the setting repaints the whole tab and no derived value can drift out of step with its source: --scp-mp-accent-dark the accent taken down, used both for text/icons on white and for hover fills. The default #00ccc8 sits at ~2:1 against white, which is unreadable at 11px, so this darkening is what makes an eyebrow or a link legible. Being a mix of the setting rather than a fixed hex, it still lands sensibly if a creator picks a completely different primary. --scp-mp-wash/tint/edge light weights for card fills and pill grounds. NOTE: this tab used to run on `var(--primary)`, which the public sheet hard-codes to #4f46e5 — that indigo is where the purple came from. It is a different variable from --scp-primary-bg-color and is NOT settings-driven, which is exactly why it is no longer used here. */ #scp-primary .scp-mp { --scp-mp-line: #e6e8ec; --scp-mp-muted: #6b7280; --scp-mp-soft: #f7f8fa; --scp-mp-accent: var(--scp-primary-bg-color, #00ccc8); --scp-mp-on-accent: var(--scp-primary-text-color, #fff); --scp-mp-accent-dark: #00b3af; --scp-mp-accent-dark: color-mix(in srgb, var(--scp-mp-accent) 62%, #000); --scp-mp-wash: #f2fdfd; --scp-mp-wash: color-mix(in srgb, var(--scp-mp-accent) 6%, #fff); --scp-mp-tint: #e6faf9; --scp-mp-tint: color-mix(in srgb, var(--scp-mp-accent) 11%, #fff); --scp-mp-edge: #99e6e4; --scp-mp-edge: color-mix(in srgb, var(--scp-mp-accent) 30%, #fff); /* The hover shadow. Derived too, so it tracks the setting instead of being a hard-coded rgba that would stay teal after the primary changed. */ --scp-mp-glow: rgba(0, 204, 200, .22); --scp-mp-glow: color-mix(in srgb, var(--scp-mp-accent) 22%, transparent); /* Neutral greys for the Continue card, which is deliberately NOT a tint of the accent. Kept as tokens rather than inline hexes so the card's ground, its border and its progress track stay in step with each other. */ --scp-mp-grey-a: #fafbfc; --scp-mp-grey-b: #eceef1; --scp-mp-grey-edge: #dee2e7; --scp-mp-grey-track: #d5dae0; } /* Creator-authored text can be a single unbroken 300-char "word" (a pasted URL, or a label typed without spaces). Without this the flex/grid children refuse to shrink and the whole page scrolls sideways. */ #scp-primary .scp-mp .scp-mp-step-label, #scp-primary .scp-mp .scp-mp-step-hint, #scp-primary .scp-mp .scp-mp-step-dest, #scp-primary .scp-mp .scp-mp-quiz-q, #scp-primary .scp-mp .scp-mp-choice, #scp-primary .scp-mp .scp-mp-pathchip, #scp-primary .scp-mp .scp-mp-cat-name, #scp-primary .scp-mp .scp-mp-new-title, #scp-primary .scp-mp .scp-mp-ql-label, #scp-primary .scp-mp-popup-item-main b { overflow-wrap: anywhere; word-break: break-word; min-width: 0; } /* ---------- two-column layout ---------- Wide reading column plus a narrow rail for the short at-a-glance cards. Which column a block lands in comes from SCP_Member_Path::block_types(), not from the creator — the rail is only wide enough for the small ones. When one column ends up empty the renderer emits `.is-single` instead of leaving an empty 360px track. */ #scp-primary .scp-mp .scp-mp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; } #scp-primary .scp-mp .scp-mp-layout.is-single { grid-template-columns: minmax(0, 1fr); } #scp-primary .scp-mp .scp-mp-col-main, #scp-primary .scp-mp .scp-mp-col-side { min-width: 0; } /* ---------- side-rail cards ---------- */ /* Square corners and a thick pale frame, set on the shared card so every rail block carries the same edge. Cards that used to tint their own border no longer do — one uniform frame is the point, and a per-card border-color would quietly opt that card out of it. Quick Links overrides the TOP edge only, and deliberately (see below). The 22px gap is up from the 16px the rail used to run at: at 3px the frames are heavy enough that 16px read as two cards touching. */ #scp-primary .scp-mp .scp-mp-railcard { background: #fff; border: 3px solid #f1f1f1; border-radius: 0; padding: 18px 20px; margin-bottom: 22px; } /* No trailing gap under the rail — 22px of it would show as the rail running past the bottom of the main column. Matches .scp-mp-block. */ #scp-primary .scp-mp .scp-mp-railcard:last-child { margin-bottom: 0; } /* Quick Links is the rail's shortcut card, and the primary top edge is what marks it as such at a glance. Only the colour is set: the 3px width comes from the shared frame above, so the card keeps the same geometry as its neighbours and nothing shifts. Driven by the Styles primary colour setting, like every other accent on the tab. */ #scp-primary .scp-mp .scp-mp-quicklinks { border-top-color: var(--scp-mp-accent); } #scp-primary .scp-mp .scp-mp-railcard-title { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0; padding: 0; overflow-wrap: anywhere; } #scp-primary .scp-mp .scp-mp-railcard-sub { font-size: 13px; line-height: 1.45; color: var(--scp-mp-muted); margin: 5px 0 0; padding: 0; } #scp-primary .scp-mp .scp-mp-railbtn { display: inline-block; margin-top: 14px; text-decoration: none; font-size: 13.5px; font-weight: 700; line-height: 1.2; padding: 10px 18px; border-radius: 8px; /* The settings pair: the creator's Primary Background carrying the Primary Text they chose to sit on it. Same shape as SCP's own .scp-rlm-primary, so a solid button here matches a solid button anywhere else in SCP — and repainting either setting repaints this. */ background: var(--scp-mp-accent); color: var(--scp-mp-on-accent); border: 1.5px solid var(--scp-mp-accent); } #scp-primary .scp-mp .scp-mp-railbtn:hover { background: var(--scp-mp-accent-dark); border-color: var(--scp-mp-accent-dark); color: var(--scp-mp-on-accent); } /* "Continue where you left off" is white like the rest of the rail. It used to carry a soft grey gradient to pull the eye, which the 3px frame now does for every card — a gradient behind that frame read as a second, competing edge. The teal it already carries on the eyebrow, the progress fill and the button is what marks it out; it does not need a ground as well. */ #scp-primary .scp-mp .scp-mp-continue { background: #fff; padding: 18px 20px 20px; } #scp-primary .scp-mp .scp-mp-continue .scp-mp-eyebrow { color: var(--scp-mp-accent-dark); margin-bottom: 10px; } /* Course names run long — clamp to two lines so one verbose title cannot turn the card into a paragraph. The full string stays on the title attribute. */ #scp-primary .scp-mp .scp-mp-continue-course { margin: 0; padding: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--text, #1f2937); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* The next lesson is the actual call to action, so it gets its own labelled line rather than reading as a subtitle of the course. One line only. */ #scp-primary .scp-mp .scp-mp-continue-lesson { margin: 10px 0 0; padding: 0; font-size: 13px; line-height: 1.4; color: #374151; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } #scp-primary .scp-mp .scp-mp-continue-next { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--scp-mp-muted); margin-bottom: 2px; } #scp-primary .scp-mp .scp-mp-continue-progress { margin: 14px 0 0; } /* Neutral track, not the teal edge it used to take: on a grey card a pale teal track sat almost on top of the teal fill and the bar stopped reading as a measure of anything. Grey behind, teal in front. */ #scp-primary .scp-mp .scp-mp-continue .scp-mp-progress-bar { background: var(--scp-mp-grey-track); height: 6px; } #scp-primary .scp-mp .scp-mp-continue .scp-mp-progress-bar i { background: var(--scp-mp-accent); } #scp-primary .scp-mp .scp-mp-continue .scp-mp-progress-text { color: var(--scp-mp-muted); font-size: 12px; margin-top: 7px; } /* Outlined, not filled: white ground, accent border, accent label. On a card that is already a tint of the accent, a solid button of the same hue was two teals stacked on each other and the button stopped separating from the card. Reversing it — white against the tint — gives the button its own ground back, and white is the one value nothing else in this card uses. Fills on hover, so the affordance still resolves to a solid press target. */ #scp-primary .scp-mp .scp-mp-continue .scp-mp-railbtn { margin-top: 16px; background: #fff; color: var(--scp-mp-accent-dark); border-color: var(--scp-mp-accent-dark); } #scp-primary .scp-mp .scp-mp-continue .scp-mp-railbtn:hover { background: var(--scp-mp-accent-dark); border-color: var(--scp-mp-accent-dark); color: var(--scp-mp-on-accent); } /* Full-width button: in a 360px rail a short "Resume" floating left looks like an afterthought next to a two-line title. */ #scp-primary .scp-mp .scp-mp-railbtn-block { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; } #scp-primary .scp-mp .scp-mp-railbtn-arrow { display: inline-flex; transition: transform .12s; } #scp-primary .scp-mp .scp-mp-railbtn-arrow svg { width: 15px; height: 15px; } #scp-primary .scp-mp .scp-mp-railbtn:hover .scp-mp-railbtn-arrow { transform: translateX(2px); } /* The event card keeps its faint accent wash — it is the one rail card carrying a date, and the tint is what stops it reading as another block of links. Its border-color override is gone: the rail's frame is uniform now, and a tinted edge here would break the one thing every card is meant to share. */ #scp-primary .scp-mp .scp-mp-event { background: var(--scp-mp-wash); } /* ---------- shared block chrome ---------- */ /* Every main-column block is a card, matching the side rail. The theme's `.scp-my-account-inner-section` only supplies a bottom margin, so without this the blocks sit as bare content on the page background while the rail beside them is carded. */ #scp-primary .scp-mp .scp-mp-block { background: #fff; border: 1px solid var(--scp-mp-line); border-radius: 12px; padding: 22px 24px; margin-bottom: 16px; } #scp-primary .scp-mp .scp-mp-block:last-child { margin-bottom: 0; } /* Start Here is the page's lead card and is sized as one: more room inside, and a softer edge than the blocks under it. */ #scp-primary .scp-mp .scp-mp-starthere { padding: 30px 32px 32px; border-radius: 16px; } /* The heading's own row. Anything passed as $head_aside sits at the far end of it, on the heading's baseline rather than stacked under it. Wraps on a narrow card so a long path name drops to its own line instead of squeezing the heading. */ #scp-primary .scp-mp .scp-mp-blockhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 20px; } #scp-primary .scp-mp .scp-mp-blockhead .scp-my-section-heading { margin: 0; } body #scp-primary .scp-mp .scp-mp-starthere .scp-mp-blockhead h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } /* The section heading, now that it sits inside the card. The theme dresses `.scp-my-section-heading` with a 2px grey bottom border AND a 150px grey bar via ::after. That reads as a divider across the top of a card, so both are dropped here — the card edge already does that job. */ /* 14px below, not 4: the grids that follow (categories, new content) carry no top margin of their own, so the heading sat almost on top of the first row. */ #scp-primary .scp-mp .scp-my-section-heading { margin: 0 0 14px; border-bottom: 0; padding: 0; } #scp-primary .scp-mp .scp-my-section-heading:after { display: none; } #scp-primary .scp-mp .scp-my-section-heading h3 { font-size: 18px; font-weight: 700; line-height: 1.25; margin: 0; padding: 0; color: inherit; } #scp-primary .scp-mp .scp-mp-eyebrow { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--scp-mp-accent-dark); margin-bottom: 8px; } #scp-primary .scp-mp .scp-mp-eyebrow svg { width: 15px; height: 15px; } /* ---------- quiz + path chooser ---------- Both render the same shape: an eyebrow, a question, and a grid of one-tap choices. The chooser adds a step count under each label. */ /* The card comes from `.scp-mp-block` around it — every main-column block is carded now, so giving the quiz one of its own would nest two. */ #scp-primary .scp-mp .scp-mp-quiz { margin: 0; } /* ---- the question header ---- The eyebrow / question / sub-line used to sit as three loose lines on plain white, which is what made this read as unstyled body copy rather than as the one thing on the page asking for an answer. They are grouped into a header band instead: a wash of the accent fading to white, bled out to the card's edges by the negative margins, and closed with a hairline. That gives the question a ground of its own and a clear edge where the answers begin. The -24px matches .scp-mp-block's horizontal padding exactly; if that padding ever changes, these have to change with it (and the 600px override below). */ #scp-primary .scp-mp .scp-mp-quiz-head { margin: 0 -24px 20px; padding: 0 24px 20px; background: linear-gradient(180deg, var(--scp-mp-wash), #fff); border-bottom: 1px solid var(--scp-mp-line); } /* Only bleed upward when the quiz IS the top of the card. In chooser mode the block renders a section heading above it, and pulling the band up by 22px there would slide it underneath that heading. */ #scp-primary .scp-mp .scp-mp-quiz:first-child .scp-mp-quiz-head { margin-top: -22px; padding-top: 22px; border-radius: 12px 12px 0 0; } /* Inside the band the eyebrow becomes a pill rather than bare uppercase text — on a tinted ground, loose small caps read as a stray label, whereas a bordered chip reads as deliberate chrome. Inline-flex so it hugs its own text instead of stretching the full width the way the flex .scp-mp-eyebrow default does. */ #scp-primary .scp-mp .scp-mp-quiz .scp-mp-eyebrow { display: inline-flex; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--scp-mp-edge); color: var(--scp-mp-accent-dark); margin-bottom: 12px; } #scp-primary .scp-mp .scp-mp-quiz .scp-mp-eyebrow svg { width: 13px; height: 13px; } /* The question no longer outsizes everything around it. It still leads its own band — the eyebrow above it and the choices below are both smaller and lighter — so it does not need the extra points to read as the thing being asked. */ #scp-primary .scp-mp .scp-mp-quiz-q { font-size: 17px; font-weight: 700; line-height: 1.22; margin: 0; padding: 0; letter-spacing: -.02em; color: #0a0a0a; } /* The 6px here used to read as ~11px: a 17px heading at line-height 1.22 carries ~2px of half-leading under the glyphs and the sub's 1.5 adds ~3px above its own. No bottom margin — the band's padding closes the header. */ #scp-primary .scp-mp .scp-mp-quiz-sub { font-size: 13.5px; color: var(--scp-mp-muted); margin: 6px 0 0; line-height: 1.45; max-width: 620px; } /* ---- the answers ---- */ #scp-primary .scp-mp .scp-mp-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* A row now, not a block: label on the left, a round arrow chip pinned right. Without the chip these were six grey rectangles of text with nothing marking them as pressable. The chip is always drawn rather than revealed on hover — a control that only looks like a control once you are already touching it does not help the person deciding where to aim. */ #scp-primary .scp-mp .scp-mp-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; padding: 15px 15px 15px 16px; border-radius: 10px; border: 1.5px solid var(--scp-mp-line); background: var(--scp-mp-soft); color: inherit; transition: border-color .12s, background .12s, transform .12s, box-shadow .12s; } #scp-primary .scp-mp .scp-mp-choice:hover { border-color: var(--scp-mp-accent); background: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px var(--scp-mp-glow); } /* Keyboard parity: the hover treatment is the only thing that says "this one", so a tab-through with no focus style left the choice invisible. */ #scp-primary .scp-mp .scp-mp-choice:focus-visible { outline: none; border-color: var(--scp-mp-accent-dark); background: #fff; box-shadow: 0 0 0 3px var(--scp-mp-glow); } #scp-primary .scp-mp .scp-mp-choice-text { min-width: 0; } #scp-primary .scp-mp .scp-mp-choice-label { display: block; } #scp-primary .scp-mp .scp-mp-choice-meta { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--scp-mp-muted); } #scp-primary .scp-mp .scp-mp-choice-go { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--scp-mp-line); color: var(--scp-mp-muted); transition: background .12s, border-color .12s, color .12s, transform .12s; } #scp-primary .scp-mp .scp-mp-choice-go svg { width: 13px; height: 13px; } #scp-primary .scp-mp .scp-mp-choice:hover .scp-mp-choice-go, #scp-primary .scp-mp .scp-mp-choice:focus-visible .scp-mp-choice-go { background: var(--scp-mp-accent-dark); border-color: var(--scp-mp-accent-dark); color: #fff; transform: translateX(2px); } /* ---------- path line ---------- */ /* No top margin: the heading above now supplies the gap, and Start Here would otherwise get 14 + 2 where every other block gets 14. */ /* The pill and its "change" share one ground rather than sitting as a tinted badge with a loose link after it — the two are one control, and splitting the grounds made "change" read as belonging to whatever came next. No bottom margin: it rides in the heading row now, which owns the spacing. */ /* The ground is DERIVED from the primary, not a fixed hex. --scp-mp-tint is color-mix(accent 11%, #fff), which lands on the same mint this was hard-coded to while the primary is #00ccc8 — and, unlike the hex, follows the Styles setting if the creator repaints it. A fixed tint would have stayed teal on a site that switched to, say, orange. */ #scp-primary .scp-mp .scp-mp-pathline { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 7px 13px; border-radius: 20px; background: var(--scp-mp-tint); font-size: 13.5px; font-weight: 700; color: #0f766e; } /* The chip is now just the text on the shared ground — it takes its size, weight and colour from the pill so the two halves cannot drift apart. */ #scp-primary .scp-mp .scp-mp-pathchip { display: inline-flex; align-items: center; gap: 7px; font-size: inherit; font-weight: inherit; color: inherit; padding: 0; border-radius: 0; background: none; } #scp-primary .scp-mp .scp-mp-pathchip svg { width: 15px; height: 15px; } /* No path matched: a neutral badge, not the accent one, because there is nothing to be pleased about yet — it is a state to resolve. */ #scp-primary .scp-mp .scp-mp-pathchip.is-none { background: var(--scp-mp-soft); color: var(--scp-mp-muted); } /* And a real button beside it. This used to be the bare underlined "change" link, which sat alone under the heading pointing at nothing. */ #scp-primary .scp-mp .scp-mp-pickbtn { border: 0; cursor: pointer; font: inherit; white-space: nowrap; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 20px; background: var(--scp-mp-accent); color: var(--scp-mp-on-accent); } #scp-primary .scp-mp .scp-mp-pickbtn:hover { background: var(--scp-mp-accent-dark); color: var(--scp-mp-on-accent); } /* Inside the pill it does not need an underline to read as a control — it is the only other thing on that ground, and the underline made a 14px pill look like a link with a badge stuck to it. */ /* Brighter than the label beside it — same size and weight, but it is the one thing on this ground you can act on, and at the same ink the pill read as one long label with a stray word on the end. */ #scp-primary .scp-mp .scp-mp-change { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--scp-mp-accent); text-decoration: none; } #scp-primary .scp-mp .scp-mp-change:hover { color: var(--scp-mp-accent-dark); text-decoration: underline; text-underline-offset: 2px; } /* ---------- progress ---------- */ /* ---- the creator's note above the steps ---- A recap panel, not loose body copy. As plain muted prose it read as fine print above the progress bar; it is the one personal thing on the page (it quotes the member's own answer back at them), so it gets a ground of its own: a wash of the accent, an accent rule down the left edge, and a speech icon. The two paragraphs are treated differently BECAUSE of the shape the builder writes by default: what the member was asked and said, then what follows from it. The recap is quieter and italic, the conclusion is the darker line the eye lands on. A single-paragraph note (a creator who wrote their own) gets the :last-child treatment, which is the readable one of the two. */ /* A neutral grey panel with one accent rule down the left edge. Grey, not a wash of the accent: the road below it is already accent-on-tint, and two tinted panels stacked read as one long band with a line through it. Bordered and rounded on all four corners. Without the hairline the panel had only its fill to separate it from the card, which at this tint is barely a step; and left square, the accent edge ran past the fill's own corners and read as a bar leaning against the panel rather than part of it. */ #scp-primary .scp-mp .scp-mp-pathintro { margin: 0 0 26px; padding: 20px 24px; background: var(--scp-mp-soft); border: 1px solid var(--scp-mp-line); border-left: 4px solid var(--scp-mp-accent-dark); border-radius: 10px; } #scp-primary .scp-mp .scp-mp-pathintro-body { min-width: 0; } /* Read as prose, not as fine print: this is the one personal thing on the page and it quotes the member's own words back. An explicit 400 because themes that set a 300 body weight rendered it thin enough to disappear. */ /* `body` on the front, which nothing else in this file needs. The base public sheet carries body #scp-primary p:not(.scp-description.scp-shortcode-elements *) { line-height: 1.3 } at (1,2,2) — the :not() argument is a two-class compound, so it counts — and that outranks this file's usual (1,2,0). Without the prefix the declared 1.6 was silently rendering at 1.3. Same reason the file header gives for keeping #scp-primary everywhere: verify computed styles here, do not trust the file. */ body #scp-primary .scp-mp .scp-mp-pathintro p { margin: 0 0 16px; font-size: 15px; font-weight: 400; line-height: 1.6; color: #2a373c; } #scp-primary .scp-mp .scp-mp-pathintro p:last-child { margin-bottom: 0; } /* The member's own answer, quoted back. The builder writes it in , and it is the one phrase in the panel that is theirs rather than the creator's. */ #scp-primary .scp-mp .scp-mp-pathintro b, #scp-primary .scp-mp .scp-mp-pathintro strong { font-weight: 700; color: var(--scp-mp-ink, #1f2937); } #scp-primary .scp-mp .scp-mp-progress { margin: 0 0 26px; } #scp-primary .scp-mp .scp-mp-progress-bar { height: 8px; border-radius: 999px; background: #e9edf0; overflow: hidden; } #scp-primary .scp-mp .scp-mp-progress-bar i { display: block; height: 100%; border-radius: 999px; background: var(--scp-mp-accent); transition: width .3s ease; } #scp-primary .scp-mp .scp-mp-progress-text { font-size: 14px; color: var(--scp-mp-muted); margin-top: 10px; } /* ---------- roadmap ---------- Start, one node per step, then Goal, strung along a dotted road. Positions come from JS, not from here: how many nodes fit on a line depends on the card's width at render time and on how many steps the member's path has. CSS only describes what a node LOOKS like; scp-member-path.js decides where it sits and how many rows the road needs. The road is always ONE row. When the journey needs more width than the card has, this element scrolls sideways rather than the road wrapping onto more rows — a single continuous line is easier to read as a journey, and it keeps the block a predictable height no matter how many steps a path has. Collapsed until laid out. Without this the nodes stack at 0,0 for a frame and the road visibly assembles itself on every render. */ #scp-primary .scp-mp .scp-mp-roadmap { position: relative; margin: 0; height: 0; overflow: hidden; visibility: hidden; /* A faint wash of the accent rather than neutral grey, and no border: the panel is the road's own ground, and an outline around it made a second box inside a card that already has one. */ background: var(--scp-mp-wash); border: 0; border-radius: 12px; } #scp-primary .scp-mp .scp-mp-roadmap.is-ready { height: auto; visibility: visible; /* auto, not scroll: no bar unless the road actually overflows. Height is left to the track so the scrollbar adds to it rather than eating into the road. overflow-y stays hidden — labels sit inside the track's own height, and `visible` on one axis would force the other to scroll. */ overflow-x: auto; overflow-y: hidden; } /* The road. JS sets both dimensions: the width is what overflows the window above, and the height is what gives that window its size. */ #scp-primary .scp-mp .scp-mp-rm-track { position: relative; } /* A quiet bar. The browser default is heavy enough to compete with the road sitting right above it. */ #scp-primary .scp-mp .scp-mp-roadmap::-webkit-scrollbar { height: 8px; } #scp-primary .scp-mp .scp-mp-roadmap::-webkit-scrollbar-track { background: transparent; } #scp-primary .scp-mp .scp-mp-roadmap::-webkit-scrollbar-thumb { background: var(--scp-mp-edge); border-radius: 4px; } #scp-primary .scp-mp .scp-mp-roadmap::-webkit-scrollbar-thumb:hover { background: var(--scp-mp-accent); } #scp-primary .scp-mp .scp-mp-roadmap { scrollbar-width: thin; scrollbar-color: var(--scp-mp-edge) transparent; } #scp-primary .scp-mp .scp-mp-rm-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } /* Round caps on a nearly-zero dash length is what turns a stroke into a row of dots. Butt caps here would draw dashes, which read as a border, not a road. */ /* Chunkier dots, further apart. At stroke-width 5 on a tinted panel the road read as a hairline dashed rule; the dots have to carry the "journey" idea on their own, so they are the one heavy mark in the block. */ #scp-primary .scp-mp .scp-mp-rm-seg { fill: none; stroke-width: 6.5; stroke-linecap: round; stroke-dasharray: 0.1 12; } #scp-primary .scp-mp .scp-mp-rm-seg.is-done { stroke: var(--scp-mp-accent-dark); } #scp-primary .scp-mp .scp-mp-rm-seg.is-todo { stroke: var(--scp-mp-edge); } #scp-primary .scp-mp .scp-mp-rm-nodes { position: relative; } /* left/top are the node's CENTRE — the translate is what makes the JS maths about centres rather than corners. */ #scp-primary .scp-mp .scp-mp-rm-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 0; /* the dot and label centre on the point */ } #scp-primary .scp-mp .scp-mp-rm-dot { position: relative; z-index: 1; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; line-height: 1; background: #fff; color: var(--scp-mp-muted); border: 2px solid var(--scp-mp-edge); box-sizing: border-box; } #scp-primary .scp-mp .scp-mp-rm-dot svg { width: 17px; height: 17px; } /* A node whose step carries a link. `color: inherit` because the theme's own anchor colour would otherwise repaint the label and undo the done/current states set below. The dot lifts on hover rather than growing — a size change would shift the road it sits on. */ #scp-primary .scp-mp a.scp-mp-rm-node { text-decoration: none; color: inherit; cursor: pointer; } #scp-primary .scp-mp .scp-mp-rm-node .scp-mp-rm-dot { transition: transform .12s, box-shadow .12s, background .12s, border-color .12s; } #scp-primary .scp-mp .scp-mp-rm-node.is-link:hover .scp-mp-rm-dot { transform: translateY(-2px); box-shadow: 0 5px 12px var(--scp-mp-glow); } /* The current node's ring is a box-shadow too, so the lift above would replace it and the node would lose its "you are here" marker exactly when you point at it. Both shadows, in that order. */ #scp-primary .scp-mp .scp-mp-rm-node.is-link.is-current:hover .scp-mp-rm-dot { box-shadow: 0 0 0 4px var(--scp-mp-glow), 0 5px 12px var(--scp-mp-glow); } #scp-primary .scp-mp .scp-mp-rm-node.is-link:hover .scp-mp-rm-label { text-decoration: underline; text-underline-offset: 2px; } #scp-primary .scp-mp .scp-mp-rm-node.is-done .scp-mp-rm-dot, #scp-primary .scp-mp .scp-mp-rm-node.is-start .scp-mp-rm-dot { background: var(--scp-mp-accent-dark); border-color: var(--scp-mp-accent-dark); color: var(--scp-mp-on-accent); } /* Start and Goal are milestones rather than work, so they read as outlines even when reached — the numbered nodes are what fill in. */ #scp-primary .scp-mp .scp-mp-rm-node.is-start .scp-mp-rm-dot, #scp-primary .scp-mp .scp-mp-rm-node.is-goal .scp-mp-rm-dot { background: #fff; color: var(--scp-mp-accent-dark); border-color: var(--scp-mp-accent-dark); } #scp-primary .scp-mp .scp-mp-rm-node.is-goal:not(.is-done) .scp-mp-rm-dot { color: var(--scp-mp-muted); border-color: var(--scp-mp-edge); } /* Where the member is now — the one node that should catch the eye, so it is the only solid-accent circle on an otherwise outlined road. The ring sits OUTSIDE the border rather than thickening it, so the node keeps its size and the road does not shift when progress moves. */ #scp-primary .scp-mp .scp-mp-rm-node.is-current .scp-mp-rm-dot { background: var(--scp-mp-accent); color: var(--scp-mp-on-accent); border-color: var(--scp-mp-accent); box-shadow: 0 0 0 4px var(--scp-mp-glow); } #scp-primary .scp-mp .scp-mp-rm-node.is-current .scp-mp-rm-label { color: var(--scp-mp-accent-dark); font-weight: 700; } /* The label. max-width is set per-node by JS as a custom property, because the room a label has is exactly the gap to its neighbour — a fixed width would either waste space on a short road or collide on a long one. TWO lines, not one. A one-line nowrap label had ~100px to work with, which is about twelve characters: every real step title was cut to a stub. Wrapping to two lines roughly doubles that for the same footprint, and the clamp puts the ellipsis at the end of the second line instead of the first. PHP already shortened the text to a headline (scp_mp_rm_short_label), so this clamp is the backstop for a title that is genuinely long, not the mechanism for fitting a paragraph — that battle is lost before it reaches CSS. */ #scp-primary .scp-mp .scp-mp-rm-label { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: var(--rm-label-max, 110px); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--scp-mp-ink, #1f2937); text-align: center; padding: 2px 4px; /* Long single words (a URL-ish title, a German compound) would otherwise push past max-width and collide with the neighbouring node. */ overflow-wrap: anywhere; } /* The offsets are the node's centre to the label's near edge. `bottom` for the nodes above the line so a second line grows UP away from the road, `top` for the ones below so it grows DOWN — either way the road stays clear. */ #scp-primary .scp-mp .scp-mp-rm-node.is-above .scp-mp-rm-label { bottom: calc(50% + 26px); } #scp-primary .scp-mp .scp-mp-rm-node:not(.is-above) .scp-mp-rm-label { top: calc(50% + 26px); } /* The end caps always label BELOW, whichever way the wave put them. Start and Goal are the road's ground markers, not steps, and reading them off the same line keeps the two ends of the journey speaking to each other — following the wave put Goal's label above the road and Start's below, so the two milestones that bracket the whole thing sat on different levels. */ #scp-primary .scp-mp .scp-mp-rm-node.is-start .scp-mp-rm-label, #scp-primary .scp-mp .scp-mp-rm-node.is-goal .scp-mp-rm-label { color: var(--scp-mp-accent-dark); font-weight: 700; top: calc(50% + 26px); bottom: auto; } #scp-primary .scp-mp .scp-mp-rm-node { z-index: 1; } #scp-primary .scp-mp .scp-mp-rm-node:hover { z-index: 6; } /* ---------- roadmap hover card ---------- The full step text, on hovering its node. This element does NOT live inside the roadmap. The road's window is `overflow: hidden` on both axes — it has to be, that is what makes a long journey scroll sideways instead of bursting the card — so a panel drawn inside it is clipped by the panel edge the moment it is taller or wider than the road's own strip. That is exactly what went wrong with the in-place hover pill: a three-sentence step opened a card that was cut off two lines in. So JS moves ONE of these to and places it with position: fixed. Fixed positioning is resolved against the viewport, not against any ancestor, which is what takes it out of the scroll window's reach. Not scoped under #scp-primary for the same reason — it is a sibling of the page, not a descendant of the card — so every value here is literal rather than one of the --scp-mp tokens, which are declared on .scp-mp and would not reach it. Ink-dark on purpose: it reads as a tooltip at a glance and does not compete with the teal road it is pointing at. */ .scp-mp-rm-tip { position: fixed; z-index: 100000; /* 320 on a desktop, the window less a margin on a phone — a fixed 320 left a 430px screen with 55px of room on either side of the card and no way to use it. */ max-width: min(320px, calc(100vw - 32px)); padding: 10px 13px; border-radius: 10px; background: #14181f; color: #f4f6f8; font-size: 12.5px; line-height: 1.5; font-weight: 500; text-align: left; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); pointer-events: none; /* never eats the hover that opened it */ opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s; } .scp-mp-rm-tip.is-open { opacity: 1; transform: translateY(0); } /* The pointer. A card floating 12px off a dot still has to say WHICH dot, and on a road where the nodes are ~110px apart the nearest one is not obvious — the arrow is what ties the text to the number it belongs to. Its x is set by JS rather than parked at 50%, because the card gets pulled back inside the window near the ends of the road: once the card has shifted, a centred arrow points at open space. --tip-arrow-x is the dot's centre measured from the card's own left edge, so the arrow tracks the node while the card stays on screen. Which edge it sits on follows where the card ended up, not where it was asked to go — the viewport clamp can move it after the fact. */ .scp-mp-rm-tip::after { content: ""; position: absolute; left: var(--tip-arrow-x, 50%); transform: translateX(-50%); /* A CSS triangle: a zero-size box with one coloured border edge. 7px puts its point just over half way across the 12px gap to the dot. */ border: 7px solid transparent; } /* Card below the dot, so the arrow is on the card's top edge pointing up. */ .scp-mp-rm-tip.is-arrow-up::after { bottom: 100%; border-bottom-color: #14181f; } /* Card above the dot: arrow under it, pointing down. */ .scp-mp-rm-tip.is-arrow-down::after { top: 100%; border-top-color: #14181f; } @media (prefers-reduced-motion: reduce) { .scp-mp-rm-tip { transition: none; transform: none; } } /* ---------- checklist heading ---------- Sits between the road and the list, so it carries the space that separates the two rather than either of them owning it. */ /* Tight. The title and its sub-line are one unit — a heading and the sentence that qualifies it — so they sit close enough to read as a pair, and the whole pair sits close enough to the list it introduces that it belongs to it rather than floating between the road and the steps. */ #scp-primary .scp-mp .scp-mp-stepshead { margin: 16px 0 12px; } /* !important on the colour only, and not for convenience. Smart Community Builder ships #scb-app :is(h1..h6):not([class*="hero"]):not([class*="banner"])... x8 which scores around (1,10,1) and beats anything reasonable this file can write — a heading here came out SCB's --scb-heading instead of the colour asked for. It hits headings only, which is why the step titles below (a and an ) take their colour without a fight. */ /* `body` AND the element name, for the same reason as the note's paragraphs: the base sheet's h1-h6/p line-height rule scores (1,2,2), so `body` alone only reaches (1,2,1) and these two kept rendering at 1.3. Naming the tag ties it at (1,2,2), and this sheet loads after the base one, so it wins. */ body #scp-primary .scp-mp h4.scp-mp-stepshead-title { font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; margin: 0; padding: 0; color: #1f2b30 !important; } body #scp-primary .scp-mp p.scp-mp-stepshead-sub { font-size: 14.5px; line-height: 1.5; color: #8a969c; margin: 3px 0 0; padding: 0; max-width: 720px; } /* A custom heading is whatever the creator wrote in the rich editor, so it arrives as anonymous blocks rather than as a title and a sub-line. The first line is the heading and everything under it is the line beneath, which is the shape the field asks for and the one the global version renders. Keyed off the container and `* ~ *` rather than :first-child, because a contenteditable leaves the very first line as a bare text node until Enter is pressed: a :first-child rule would miss it and the heading would come out at body size. Links, lists and the rest survive untouched. Only the SIZE is set here. Weight is left to the markup, which is seeded with the heading in : forcing 700 would mean a creator who un-bolds it in the editor sees no change on the page. */ #scp-primary .scp-mp .scp-mp-stepshead.is-custom, #scp-primary .scp-mp .scp-mp-stepshead.is-custom > * { font-size: 18px; font-weight: 400; line-height: 1.25; margin: 0; padding: 0; color: inherit; } #scp-primary .scp-mp .scp-mp-stepshead.is-custom b, #scp-primary .scp-mp .scp-mp-stepshead.is-custom strong { font-weight: 700; } #scp-primary .scp-mp .scp-mp-stepshead.is-custom > * ~ * { font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--scp-mp-muted); margin: 4px 0 0; max-width: 720px; } #scp-primary .scp-mp .scp-mp-stepshead.is-custom a { color: var(--scp-mp-accent-dark); } #scp-primary .scp-mp .scp-mp-stepshead.is-custom img { max-width: 100%; height: auto; } /* In the 360px rail the heading is competing with the block heading above it for a width that has room for neither at full size. */ #scp-primary .scp-mp .scp-mp-col-side .scp-mp-stepshead-title, #scp-primary .scp-mp .scp-mp-col-side .scp-mp-stepshead.is-custom, #scp-primary .scp-mp .scp-mp-col-side .scp-mp-stepshead.is-custom > * { font-size: 15px; } #scp-primary .scp-mp .scp-mp-col-side .scp-mp-stepshead-sub, #scp-primary .scp-mp .scp-mp-col-side .scp-mp-stepshead.is-custom > * ~ * { font-size: 12.5px; } /* ---------- steps ---------- */ /* Each step is its own panel now, not a row in a ruled list. A step carries a title AND a two-or-three-line explanation, and hairline-separated rows of that height read as one continuous wall of text — the eye cannot tell where one step stops. A ground and a gap do that without a rule. align-items:center rather than flex-start: the dot and the button both centre on the block of text, which is what keeps a one-line step and a four-line one looking like the same component. */ #scp-primary .scp-mp .scp-mp-steps { display: flex; flex-direction: column; gap: 16px; } #scp-primary .scp-mp .scp-mp-step { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-bottom: 0; border-radius: 12px; background: var(--scp-mp-soft); transition: background .12s; } #scp-primary .scp-mp .scp-mp-step:hover { background: #eef1f4; } /* The primary itself, not the darkened tone. --scp-mp-accent-dark exists for accent-coloured TEXT and icons on white, where the raw primary is too light to read; a 34px filled disc is a surface, not text, so it takes the brand colour straight and the number on it is the paired Primary Text setting. Same pair as .scp-mp-railbtn, which is the other filled thing on this tab. */ #scp-primary .scp-mp .scp-mp-step-dot { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; background: var(--scp-mp-accent); color: var(--scp-mp-on-accent); } #scp-primary .scp-mp .scp-mp-step-dot svg { width: 17px; height: 17px; } #scp-primary .scp-mp .scp-mp-step.is-done .scp-mp-step-dot { background: #137a45; color: #fff; } #scp-primary .scp-mp .scp-mp-step-body { flex: 1 1 auto; min-width: 0; } #scp-primary .scp-mp .scp-mp-step-label { display: block; font-size: 15.5px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: #1f2b30; } #scp-primary .scp-mp .scp-mp-step-hint, #scp-primary .scp-mp .scp-mp-step-dest { display: block; } #scp-primary .scp-mp .scp-mp-step-hint { font-size: 13.5px; line-height: 1.55; color: #6a767c; margin-top: 6px; } /* line-height is stated here now: it used to ride on the shared rule above, which the hint has taken over. */ #scp-primary .scp-mp .scp-mp-step-dest { font-size: 11.5px; line-height: 1.4; font-weight: 600; color: var(--scp-mp-accent-dark); margin-top: 2px; } /* A step the creator pointed at a URL: the label becomes the link. It keeps the plain label's size and weight, so a linked step and an ordinary one sit at the same visual level — the arrow is what says it goes somewhere. The colour is stated rather than left to `inherit`. Both classes land on the SAME element at the same specificity, so `inherit` here won on source order and quietly undid the label's own colour — a linked step came out the theme's body colour while an unlinked one took the intended ink. Stating it also still keeps the theme's anchor colour out, which is what `inherit` was for. */ #scp-primary .scp-mp .scp-mp-step-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #1f2b30; text-decoration: none; } #scp-primary .scp-mp .scp-mp-step-link:hover, #scp-primary .scp-mp .scp-mp-step-link:focus-visible { color: var(--scp-mp-accent); text-decoration: underline; } /* The primary, at full strength. Not the darkened tone — that is for accent text that has to hold its own as body copy; this is a mark next to a title the member is being told is a link, and it should be the brand colour. */ #scp-primary .scp-mp .scp-mp-step-link svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--scp-mp-accent); opacity: 1; } /* After .scp-mp-step-link so a done step still greys out — equal specificity otherwise and the link colour would win on source order. */ #scp-primary .scp-mp .scp-mp-step.is-done .scp-mp-step-label { color: var(--scp-mp-muted); } /* Solid, not the pale tint chip it was. The step sits on its own grey panel now, and a tint-on-grey button had almost no edge against it — the one thing in the row you are meant to click read as a label. */ /* Outlined: white ground, primary border, primary label. The 11px/20px padding is 13px/22px less the 2px border, so the button keeps the height it had when it was solid and the step panel does not change size with it. */ #scp-primary .scp-mp .scp-mp-step-action { flex: 0 0 auto; cursor: pointer; font: inherit; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.2; padding: 11px 20px; border-radius: 8px; background: #fff; border: 2px solid var(--scp-mp-accent); color: var(--scp-mp-accent); text-decoration: none; transition: background .12s, color .12s, border-color .12s; } /* Fills on hover — the outline's own colours swapped, so the button says the same thing in both states. */ #scp-primary .scp-mp .scp-mp-step-action:hover { background: var(--scp-mp-accent); border-color: var(--scp-mp-accent); color: var(--scp-mp-on-accent); } /* Done is a state, not an action, so it stops being a solid button. */ #scp-primary .scp-mp .scp-mp-step-action.is-done { background: #e7f7ee; color: #137a45; border-color: #e7f7ee; } /* A link or product step's control is an , not a