/** * 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 ---------- */ #scp-primary .scp-mp .scp-mp-railcard { background: #fff; border: 1px solid var(--scp-mp-line); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; } #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 the one card meant to pull the eye, so it gets a ground of its own rather than the plain white the other rail cards use. That ground is a soft grey gradient, NOT a tint of the accent: the rail already carries teal on the eyebrow, the progress fill and the button, and putting it behind those as well left the card reading as one flat wash of the same hue with no separation between the chrome and what it sits on. Grey steps back and lets the teal on top of it do the work. */ #scp-primary .scp-mp .scp-mp-continue { background: linear-gradient(180deg, var(--scp-mp-grey-a), var(--scp-mp-grey-b)); border-color: var(--scp-mp-grey-edge); 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 sits directly under Continue in the same rail, so it takes the same accent — two unrelated tints stacked read as two unrelated widgets. One weight weaker, so Continue still leads. */ #scp-primary .scp-mp .scp-mp-event { background: var(--scp-mp-wash); border-color: var(--scp-mp-edge); } /* ---------- 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; } /* 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; } /* Up from 20px, and tracked in slightly. The question is the largest thing in the main column now, which is the point — at 20px it tied with every section heading on the page and none of them are asking for an answer. */ #scp-primary .scp-mp .scp-mp-quiz-q { font-size: 21px; 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 21px heading at line-height 1.22 carries ~2.5px 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. */ #scp-primary .scp-mp .scp-mp-pathline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; } #scp-primary .scp-mp .scp-mp-pathchip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; padding: 7px 13px; border-radius: 20px; background: var(--scp-mp-tint); color: var(--scp-mp-accent-dark); } #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); } #scp-primary .scp-mp .scp-mp-change { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; 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. */ #scp-primary .scp-mp .scp-mp-pathintro { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 14px 16px; background: var(--scp-mp-wash); border: 1px solid var(--scp-mp-edge); border-left: 3px solid var(--scp-mp-accent); border-radius: 10px; } #scp-primary .scp-mp .scp-mp-pathintro-ico { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; margin-top: 1px; display: flex; align-items: center; justify-content: center; background: var(--scp-mp-tint); color: var(--scp-mp-accent); } #scp-primary .scp-mp .scp-mp-pathintro-ico svg { width: 15px; height: 15px; } #scp-primary .scp-mp .scp-mp-pathintro-body { flex: 1 1 auto; min-width: 0; } /* An explicit 400: themes that set a 300 body weight rendered the recap thin enough to disappear once it was also italic and muted. */ #scp-primary .scp-mp .scp-mp-pathintro p { margin: 0 0 7px; font-size: 13.5px; font-weight: 400; line-height: 1.55; color: var(--scp-mp-muted); } /* The recap of the exchange: quieter, and italic so the quoted words read as quoted without needing the marks to do all the work. */ #scp-primary .scp-mp .scp-mp-pathintro p:first-child { font-style: italic; } /* The conclusion. Darker and a touch heavier, because this is the line that says why the steps below are the ones they got. */ #scp-primary .scp-mp .scp-mp-pathintro p:last-child { margin-bottom: 0; font-weight: 600; color: var(--scp-mp-ink, #1f2937); font-style: normal; } #scp-primary .scp-mp .scp-mp-progress { margin: 0 0 16px; } #scp-primary .scp-mp .scp-mp-progress-bar { height: 9px; border-radius: 6px; background: #eceef1; overflow: hidden; } #scp-primary .scp-mp .scp-mp-progress-bar i { display: block; height: 100%; background: var(--scp-mp-accent); transition: width .3s ease; } #scp-primary .scp-mp .scp-mp-progress-text { font-size: 12.5px; color: var(--scp-mp-muted); margin-top: 6px; } /* ---------- 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 0 18px; height: 0; overflow: hidden; visibility: hidden; background: var(--scp-mp-soft); border: 1px solid var(--scp-mp-line); 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. */ #scp-primary .scp-mp .scp-mp-rm-seg { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0.1 9; } #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. */ #scp-primary .scp-mp .scp-mp-rm-label { position: absolute; left: 50%; transform: translateX(-50%); max-width: var(--rm-label-max, 110px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 650; line-height: 1.25; color: var(--text, #1f2937); text-align: center; padding: 2px 4px; border: 1px solid transparent; /* reserved so the hover pill adds no shift */ border-radius: 6px; } #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); } #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; } /* Hover reveals the full wording. The node is raised first so a long label sits over its neighbours instead of being clipped by them, and the pill gives it an opaque ground to be legible against. */ #scp-primary .scp-mp .scp-mp-rm-node { z-index: 1; } #scp-primary .scp-mp .scp-mp-rm-node:hover { z-index: 6; } /* width:max-content is load-bearing. The node that contains this label is 0px wide (it is a point on the road, not a box), so the moment white-space goes to normal the label shrink-to-fits against that zero width and collapses to its longest WORD — a 69px-wide, 171px-tall sliver of stacked words. Asking for max-content and letting max-width clamp it gives a normal pill. */ #scp-primary .scp-mp .scp-mp-rm-node:hover .scp-mp-rm-label { width: max-content; max-width: 210px; white-space: normal; overflow: visible; background: #fff; border-color: var(--scp-mp-edge); box-shadow: 0 4px 14px rgba(0, 0, 0, .1); } /* ---------- steps ---------- */ /* The horizontal padding is what stops the numbered dot and the mark-done button from sitting hard against the row's edges. The divider still runs the full width — insetting that as well would make the list look like it was drifting away from the heading above it. */ #scp-primary .scp-mp .scp-mp-step { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-bottom: 1px solid var(--scp-mp-line); border-radius: 8px; transition: background .12s; } /* A row is a target for the button inside it, so it gets a quiet hover ground rather than staying flat — with the content now inset there is room for one to read as a band instead of a full-bleed stripe. */ #scp-primary .scp-mp .scp-mp-step:hover { background: var(--scp-mp-soft); } #scp-primary .scp-mp .scp-mp-step:last-child { border-bottom: 0; } #scp-primary .scp-mp .scp-mp-step-dot { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: #eceef1; color: var(--scp-mp-muted); } #scp-primary .scp-mp .scp-mp-step-dot svg { width: 15px; height: 15px; } #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: 14.5px; line-height: 1.3; } #scp-primary .scp-mp .scp-mp-step-hint, #scp-primary .scp-mp .scp-mp-step-dest { display: block; font-size: 12.5px; line-height: 1.4; } #scp-primary .scp-mp .scp-mp-step-hint { color: var(--scp-mp-muted); } #scp-primary .scp-mp .scp-mp-step-dest { font-size: 11.5px; 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 the 's weight, so a linked step and an ordinary one sit at the same visual level — the arrow is what says it goes somewhere. `color: inherit` because the theme's own link colour would otherwise repaint half the checklist. */ #scp-primary .scp-mp .scp-mp-step-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: inherit; 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-dark); text-decoration: underline; } #scp-primary .scp-mp .scp-mp-step-link svg { flex: 0 0 13px; width: 13px; height: 13px; opacity: .6; } /* 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); } #scp-primary .scp-mp .scp-mp-step-action { flex: 0 0 auto; cursor: pointer; font: inherit; white-space: nowrap; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 8px; border: 0; background: var(--scp-mp-tint); color: var(--scp-mp-accent-dark); text-decoration: none; } #scp-primary .scp-mp .scp-mp-step-action:hover { background: var(--scp-mp-edge); } #scp-primary .scp-mp .scp-mp-step-action.is-done { background: #e7f7ee; color: #137a45; } /* Busy state: a mutation is in flight, so block a second click. */ #scp-primary .scp-mp .scp-mp-busy { opacity: .55; pointer-events: none; } /* ---------- browse by category ---------- */ #scp-primary .scp-mp .scp-mp-cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; } /* Category cards sit on a light wash of the accent rather than plain white, so a grid of them reads as one browsable set instead of a row of empty boxes. One weight lighter than the Continue card, which still has to lead. */ #scp-primary .scp-mp .scp-mp-cat { display: block; width: 100%; text-align: center; cursor: pointer; font: inherit; color: inherit; padding: 16px 12px; border-radius: 12px; border: 1.5px solid var(--scp-mp-edge); background: var(--scp-mp-wash); transition: border-color .12s, background .12s, transform .12s, box-shadow .12s; } #scp-primary .scp-mp .scp-mp-cat:hover { border-color: var(--scp-mp-accent); background: var(--scp-mp-tint); transform: translateY(-2px); box-shadow: 0 6px 16px var(--scp-mp-glow); } #scp-primary .scp-mp .scp-mp-cat-ico { display: block; color: var(--scp-mp-accent-dark); } #scp-primary .scp-mp .scp-mp-cat-ico svg { width: 22px; height: 22px; } #scp-primary .scp-mp .scp-mp-cat-name { display: block; font-size: 13.5px; margin-top: 6px; } #scp-primary .scp-mp .scp-mp-cat-count { display: block; font-size: 11.5px; color: var(--scp-mp-muted); margin-top: 2px; } /* ---------- new this month ---------- */ #scp-primary .scp-mp .scp-mp-new-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; } /* Soft gray fill so each item reads as a card against the white block behind it — an outline-only tile disappeared into the panel. The padding moved off the anchor and onto .scp-mp-new-body so the cover image can run edge to edge; `overflow:hidden` is what clips it back to the card's own radius. */ #scp-primary .scp-mp .scp-mp-new-item { display: block; text-decoration: none; color: inherit; padding: 0; border-radius: 11px; overflow: hidden; border: 1px solid var(--scp-mp-line); background: var(--scp-mp-soft); transition: border-color .12s, background .12s, box-shadow .12s; } #scp-primary .scp-mp .scp-mp-new-item:hover { border-color: var(--scp-mp-accent); box-shadow: 0 6px 16px var(--scp-mp-glow); } /* The cover. A fixed 16:9 box rather than the image's own ratio: these are a grid, and letting each card take its artwork's proportions staggered every title in the row onto a different baseline. object-fit crops to fill it. */ #scp-primary .scp-mp .scp-mp-new-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--scp-mp-tint); } #scp-primary .scp-mp .scp-mp-new-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; } #scp-primary .scp-mp .scp-mp-new-item:hover .scp-mp-new-media img { transform: scale(1.04); } /* No featured image set. A placeholder that says which KIND of thing this is beats a grey rectangle, and beats hiding the media box — a row where some cards have a cover and others start at the title looks broken rather than sparse. */ #scp-primary .scp-mp .scp-mp-new-media.is-empty { display: flex; align-items: center; justify-content: center; color: var(--scp-mp-accent-dark); background: linear-gradient(135deg, var(--scp-mp-tint), var(--scp-mp-wash)); } #scp-primary .scp-mp .scp-mp-new-media.is-empty svg { width: 26px; height: 26px; opacity: .8; } /* Over the artwork now, so it needs its own opaque chip rather than the flat tint it had when it sat on the card's grey. */ #scp-primary .scp-mp .scp-mp-new-badge { position: absolute; top: 8px; left: 8px; z-index: 1; display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 9px; background: #fff; color: #137a45; margin: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .16); } #scp-primary .scp-mp .scp-mp-new-body { display: block; padding: 12px 13px 14px; } #scp-primary .scp-mp .scp-mp-new-title { display: block; font-size: 13.5px; line-height: 1.3; } #scp-primary .scp-mp .scp-mp-new-meta { display: block; font-size: 11.5px; color: var(--scp-mp-muted); margin-top: 3px; } /* ---------- quick links ---------- */ /* Rows separated by a hairline, each led by the same round chip. Every row carries the same mark (there is no icon picker), so it has to be one that reads as "go here" rather than as a specific thing — an arrow. A solid triangle was tried and reads as a play button. */ #scp-primary .scp-mp .scp-mp-ql-list { display: flex; flex-direction: column; } #scp-primary .scp-mp .scp-mp-ql { display: flex; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--scp-mp-line); font-size: 14px; font-weight: 600; } #scp-primary .scp-mp .scp-mp-ql:last-child { border-bottom: 0; padding-bottom: 0; } #scp-primary .scp-mp .scp-mp-ql:first-of-type { padding-top: 4px; } #scp-primary .scp-mp .scp-mp-ql:hover .scp-mp-ql-label { color: var(--scp-mp-accent-dark); } #scp-primary .scp-mp .scp-mp-ql:hover .scp-mp-ql-ico { background: var(--scp-mp-accent-dark); border-color: var(--scp-mp-accent-dark); color: #fff; } /* A pale tint chip with a teal arrow, not the near-black disc this used to be. Three of those stacked in the rail read as heavy punctuation — the darkest thing on the whole tab, drawing more attention than the links they belong to. The chip still fills solid on hover, so the row keeps a clear active state. */ #scp-primary .scp-mp .scp-mp-ql-ico { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--scp-mp-tint); color: var(--scp-mp-accent-dark); border: 1px solid var(--scp-mp-edge); transition: background .12s, border-color .12s, color .12s; } /* The arrow is symmetrical, so no optical nudge — the triangle needed one. */ #scp-primary .scp-mp .scp-mp-ql-ico svg { width: 14px; height: 14px; } #scp-primary .scp-mp .scp-mp-ql-label { line-height: 1.3; } /* ---------- category side popup ---------- Reuses the shared .scp-listing-table-popup shell so the existing close handler keeps working, but overrides the centred-modal positioning into a right-hand drawer. Scoped hard to this one id so no other SCP modal moves. */ #scp-primary #scp-mp-category-popup.scp-listing-table-popup-overlay { padding: 0; justify-content: flex-end; align-items: stretch; } #scp-primary #scp-mp-category-popup .scp-listing-table-popup { width: 560px; max-width: 94vw; max-height: 100%; border-radius: 0; padding: 0; display: flex; flex-direction: column; animation: scp-mp-slide-in .22s ease-out; } #scp-primary #scp-mp-category-popup.scp-popup-active .scp-listing-table-popup { width: 560px; max-width: 94vw; } #scp-primary #scp-mp-category-popup .scp-listing-table-popup-header { margin: 0; padding: 18px 22px; flex: 0 0 auto; } #scp-primary #scp-mp-category-popup .scp-listing-table-popup-body { margin: 0; padding: 10px 22px 22px; flex: 1 1 auto; overflow-y: auto; } @keyframes scp-mp-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } #scp-primary .scp-mp-popup-list { display: flex; flex-direction: column; } /* Each item is a card on the soft gray rather than a row separated by a hair line. On a tall white panel one or two hairlines gave no sense of where an item started and stopped, and nothing to aim a click at. */ #scp-primary .scp-mp-popup-item { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 13px 15px; margin-bottom: 8px; border-radius: 10px; background: #f7f8fa; border: 1px solid #e6e8ec; text-decoration: none; color: inherit; transition: background .12s, border-color .12s; } #scp-primary .scp-mp-popup-item:last-child { margin-bottom: 0; } #scp-primary .scp-mp-popup-item:hover { background: #fff; border-color: var(--scp-mp-accent, #00ccc8); } #scp-primary .scp-mp-popup-item-main { min-width: 0; } #scp-primary .scp-mp-popup-item-main b { display: block; font-size: 13.5px; line-height: 1.35; } #scp-primary .scp-mp-popup-item-type { display: block; font-size: 11.5px; color: #6b7280; margin-top: 2px; } #scp-primary .scp-mp-popup-item-go { flex: 0 0 auto; color: var(--scp-mp-accent-dark, #00b3af); display: flex; } #scp-primary .scp-mp-popup-item-go svg { width: 16px; height: 16px; } #scp-primary .scp-mp-popup-empty { font-size: 13.5px; color: #6b7280; padding: 8px 0; } #scp-primary .scp-mp-popup-loading { width: 22px; height: 22px; margin: 24px auto; border: 3px solid rgba(0, 0, 0, .1); border-top-color: var(--scp-mp-accent, #00ccc8); border-radius: 50%; animation: scp-mp-spin .8s linear infinite; } @keyframes scp-mp-spin { to { transform: rotate(360deg); } } /* ---------- empty state ---------- */ #scp-primary .scp-mp .scp-mp-empty-text { font-size: 13.5px; line-height: 1.55; color: var(--scp-mp-muted); margin: 0; } /* ---------- responsive ---------- */ /* Below this the rail has nowhere to go, so it stacks under the main column rather than squeezing both. */ @media (max-width: 1024px) { #scp-primary .scp-mp .scp-mp-layout { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { #scp-primary .scp-mp .scp-mp-cat-grid, #scp-primary .scp-mp .scp-mp-new-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { /* The card is the block wrapper now, so tighten that rather than the quiz. */ #scp-primary .scp-mp .scp-mp-block { padding: 18px 16px; } /* The header band bleeds by the card's padding, so when that padding changes the bleed has to change with it or the band stops short of the edge on both sides. */ #scp-primary .scp-mp .scp-mp-quiz-head { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } #scp-primary .scp-mp .scp-mp-quiz:first-child .scp-mp-quiz-head { margin-top: -18px; padding-top: 18px; } /* Stepped down by the same 2px as the desktop size, so the phone heading stays proportionally smaller rather than converging on it. */ #scp-primary .scp-mp .scp-mp-quiz-q { font-size: 18px; } /* The road stays on phones now. It used to be hidden here because wrapping turned a long path into a ~1000px-tall graphic between the member and the checklist; scrolling one row sideways has no such problem, and a swipeable road is a perfectly good phone control. */ #scp-primary .scp-mp .scp-mp-choices { grid-template-columns: minmax(0, 1fr); } #scp-primary .scp-mp .scp-mp-cat-grid, #scp-primary .scp-mp .scp-mp-new-grid { grid-template-columns: minmax(0, 1fr); } #scp-primary .scp-mp .scp-mp-step { align-items: flex-start; flex-wrap: wrap; } #scp-primary .scp-mp .scp-mp-step-action { margin-left: 41px; } #scp-primary #scp-mp-category-popup .scp-listing-table-popup { width: 100%; max-width: 100%; } } /* ---------- creator's own content blocks ---------- The body is opted OUT of the base sheet's margin/padding reset via .scp-shortcode-elements (see scp_mp_render_custom_block), so whatever the creator wrote — and whatever a shortcode returned — keeps its own spacing. These rules only set the type scale around it. */ /* The line under a block heading. Every block that renders a heading can carry one now, so it is styled once rather than per block. The negative top margin pulls it up under the heading — that heading's own 14px bottom margin is for the content below, not for this. */ #scp-primary .scp-mp .scp-mp-section-sub { font-size: 13.5px; line-height: 1.5; color: var(--scp-mp-muted); margin: -10px 0 14px; padding: 0; max-width: 720px; } #scp-primary .scp-mp .scp-mp-col-side .scp-mp-section-sub { font-size: 12.5px; } #scp-primary .scp-mp .scp-mp-custom-body { font-size: 14.5px; line-height: 1.6; } #scp-primary .scp-mp .scp-mp-custom-body img { max-width: 100%; height: auto; } /* Wide things a shortcode returned (tables, embeds) scroll inside the card rather than pushing the whole dashboard sideways. */ #scp-primary .scp-mp .scp-mp-custom-body table { display: block; overflow-x: auto; max-width: 100%; } /* In the 360px rail there is no room for a reading measure. */ #scp-primary .scp-mp .scp-mp-col-side .scp-mp-custom-body { font-size: 13.5px; }