/* ═══════════════════════════════════════════════════════════════════════════ M2-MEMBERSHIP — MESSAGES, LAGOON GRADE ═══════════════════════════════════════════════════════════════════════════ Additive colour layer over sfb-redesign.css / audio-player-v2.css / audio-recorder.css. Loads ONLY when SFB's General Settings → "Lagoon" = Yes (option sf_lagoon, read fail-closed in SfbIntegration::enqueue_audio_assets). The enqueue IS the switch: with the option off, not one byte of this file is requested and messages renders exactly as it did before it existed. ── WHY THIS FILE LIVES HERE AND NOT IN SFB ────────────────────────────── smart-forum-lagoon.css says of the messages shell: "the messages-shell rgba(139,92,246,*) / rgba(196,187,255,*) washes ... must match the me-bubble gradient in m2-membership's sfb-redesign.css, which neither dark.css nor this file can reach". That was the correct call at the time and it is the reason messages stayed violet with the toggle on — the whole surface is painted from this plugin, and most of it is painted with !important at 0,2,0/0,3,0 (§37 explicitly relies on "sits at the END of the file, so equal-specificity + !important beats the earlier rules it retunes"). An override reaching in from SFB would have to win an !important-vs-!important tie, which is decided by PRINT ORDER, and SFB's lagoon enqueue and this plugin's are on different hooks. That is a coin flip, not a cascade. Grading it from inside m2-membership makes the order a fact instead of a hope: this file declares a dependency on m2-sfb-redesign, so wp_enqueue guarantees it prints last and every tie resolves here. It also unblocks the SFB carve-out above — the me-bubble gradient it had to match now moves WITH its washes, so the two can finally be graded together. ── THE RAMP (SFB's, unchanged — do not invent rungs) ──────────────────── #0A5CA3 deep — deepest accent ink, gradient tail #0A6FC2 accent — fills under white text, accent ink (5.17:1 on white) #2485D6 sky — gradient head plus the rgba(10,111,194,*) triplet for every wash, ring and glow. ── THE LAW ────────────────────────────────────────────────────────────── Only the ACCENT family changes hue. The NEUTRALS stay exactly where §37 put them, and here that means something counter-intuitive: this surface's ink ladder is deliberately VIOLET-TINTED (#1B1531 / #201A38 / #151024 / #6E6685 / #A29AB5 / rgba(27,21,49,*)), because §37's language is "porcelain & violet" and the tint in the near-blacks is what keeps the porcelain from reading as grey card stock. Those are ABSENT from this file, deliberately. It is the same call smart-forum-lagoon-dark.css makes about §65's violet-tinted dark ladder — "the violet TINT in that chrome is the point ... Do not cool the ladder." If a future edit adds #1B1531 or #6E6685 below, it is the bug. Also ABSENT, and also deliberately: • the gold rgba(245,195,106,*) washes (banner aurora, empty-state disc, canvas corner) — identity, the same carve-out SFB gives the star gold; • the presence greens #10B981 / #34C77B / rgba(61,220,132,*) — semantic; • the recorder's #e11d48 is-recording red and #EF4444 — semantic; • sfb-pill.css in its entirety. Every violet in that file is the tier chip, the tier popover or the audio quota meter, and SFB's lagoon file already names "the tier chips" as a self-branded set-piece carve-out. ── NO TEAL HERE ───────────────────────────────────────────────────────── SFB's lagoon spends #30DBE6 on JEWELS — small bright decorative moments — and blue on fills and on coloured drop shadows. Messages has no jewels: its accent moments are all large fills (bubble, send pill, unread pill) and coloured shadows under them. smart-forum-lagoon.css already graded the one piece of this surface it COULD reach — ".sfb-message.sfb-sent .sfb-chat-video-link { box-shadow: ... rgba(10, 111, 194, .25) }", a drop shadow inside the sent bubble — to blue, not teal. Every glow below follows that precedent so the video card and the bubble it sits in cast the same colour. A teal glow under a blue bubble would read green at these alphas. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══ TOKENS ═══════════════════════════════════════════════════════════════ sfb-redesign.css declares this family TWICE on the same selector — once at the top of the file and once in the §37 re-pin block (line ~1447) — so only the SECOND declaration ships. The values below are the EFFECTIVE ones, i.e. what a computed-style read returns today; where the two declarations differ (accent-ring: 0.28 → 0.16) this takes the §37 value. !important on custom properties is not decoration here. This file prints after sfb-redesign.css via its enqueue dependency, so plain declarations would already win — but the ONE failure mode of an additive layer is somebody re-ordering an enqueue two years from now and getting a silently half-graded surface rather than an error. Importance makes the win order-independent. Safe to do because nothing in this plugin re-scopes --m2-msg-* below :root; the me-bubble's local override (§37, line ~1682) re-scopes --m2-audio-*, a different family, and still works. ═══ */ :root, #sf-primary #sf-live-chat { /* The single accent. Solid fill under white text on the send button and the sending state, so it takes the ink rung and not a decorative one: #0A6FC2 is 5.17:1 white-on, up from #8b5cf6's 4.23:1. This is also SFB's own --sfp-accent under lagoon, so the composer's send button now matches every other primary button on the site — it did not before, because #8b5cf6 was never the #645BF3 SFB was grading. */ --m2-msg-accent: #0A6FC2 !important; --m2-msg-accent-tint: rgba(10, 111, 194, 0.10) !important; --m2-msg-accent-soft: rgba(10, 111, 194, 0.18) !important; /* §37's calmer ring (0.16), not the original 0.28. */ --m2-msg-accent-ring: rgba(10, 111, 194, 0.16) !important; /* The "me" bubble gradient — the single loudest violet on the surface, and the one the SFB carve-out was pinned to. Head→tail becomes sky→deep, which is a genuine CONTRAST FIX as well as a hue rotation: the gradient carries white text (--m2-msg-bubble-me-fg) and #9D6BFF is 3.51:1, i.e. the light corner of every sent bubble has been below AA since §37 shipped. #2485D6 is 3.89:1 and #0A5CA3 is 6.83:1, against #9D6BFF/#7443F9's 3.51/5.37 — both ends improve, neither regresses. (Still not 4.5:1 at the head. Fixing that properly means moving the whole gradient down a rung and darkening the bubble, which is a design change, not a colour grade — flagging it rather than smuggling it in.) */ --m2-msg-me-a: #2485D6 !important; --m2-msg-me-b: #0A5CA3 !important; } /* ═══ sfb-redesign.css — the literals that don't flow through the tokens ═══ Everything below is a hardcoded rgba/hex in the source. Selectors are copied verbatim from their source rule so specificity matches exactly and the !importants resolve on print order (ours), not on a specificity accident. Source line numbers are as of 2026-08-10. ═══ */ /* Page banner "aurora" (:1478). Desktop-facing — the app shell hides it ≤768. The gold and green stops beside it are untouched; only the violet lobe moves, and it moves to the SKY rung rather than the accent because it is a 720x300 wash on near-black ink, where #0A6FC2 would read as a dark smudge rather than as light. */ #sf-primary .sf-notice-bar::before { background: radial-gradient(720px 300px at 80% -80px, rgba(36, 133, 214, 0.55), transparent 70%), radial-gradient(520px 240px at 8% 130%, rgba(245, 195, 106, 0.22), transparent 70%), radial-gradient(340px 180px at 45% -80px, rgba(61, 220, 132, 0.12), transparent 70%) !important; } /* Text selection inside the chat (:1522) */ #sf-primary #sf-live-chat ::selection { background: rgba(10, 111, 194, 0.22); } /* Sidebar search focus border (:1545) */ #sf-primary #sf-live-chat .sfb-search-input:focus { border-color: rgba(10, 111, 194, 0.55) !important; } /* Active thread row: wash + name (:1555, :1558). The row's .sfb-chat-time reads var(--m2-msg-accent) and is already graded by the token block. */ #sf-primary #sf-live-chat .sfb-chat-item.sfb-active { background: linear-gradient(90deg, rgba(10, 111, 194, 0.11), rgba(10, 111, 194, 0.04)) !important; } #sf-primary #sf-live-chat .sfb-chat-item.sfb-active .sfb-chat-name { color: #0A5CA3; } /* Unread pill glow (:1573). Its gradient is token-driven and already moved. */ #sf-primary #sf-live-chat .sfb-chat-item .sfb-unread-count { box-shadow: 0 2px 6px -1px rgba(10, 111, 194, 0.45); } /* Conversation canvas wash (:1598) */ #sf-primary #sf-live-chat .sfb-messages-area { background: radial-gradient(900px 320px at 85% -60px, rgba(10, 111, 194, 0.05), transparent 70%), radial-gradient(700px 280px at -10% 110%, rgba(245, 195, 106, 0.05), transparent 70%), var(--m2-msg-canvas) !important; } /* Sent bubble's cast shadow (:1634). The bubble FILL is token-driven; this is the rgba(124,77,255,*) glow underneath it, which the token flip cannot reach. Matches the rgba(10,111,194,.25) that smart-forum-lagoon.css already puts on the video card inside this same bubble. */ #sf-primary #sf-live-chat .sfb-message.sfb-sent .sfb-person-message-content { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 10px -2px rgba(10, 111, 194, 0.35); } /* Composer field focus border (:1721) — three selectors in the source rule, all reproduced so the specificity tie is exact. */ #sf-primary #sf-live-chat .sfb-input-container:focus-within, #sf-live-chat #sf-c-c-main-inline:focus-within, #sf-primary #sf-live-chat #sf-c-c-main-inline:focus-within { border-color: rgba(10, 111, 194, 0.55) !important; } /* Toolbar icon hover (:1730). Note this is the composer's own toolbar, NOT SFB's .sfb-action-btn:hover, which smart-forum-lagoon.css already grades to #0A6FC2 — the two now agree instead of one being violet. */ #sf-primary #sf-live-chat .sfb-action-btn:not(.sfb-send-btn):hover { background: rgba(10, 111, 194, 0.10) !important; color: #0A6FC2 !important; } /* Send pill glow, rest + hover (:1812, :1816). Gradient is token-driven. */ #sf-primary #sf-live-chat .sfb-send-btn { box-shadow: 0 2px 10px -2px rgba(10, 111, 194, 0.50); } #sf-primary #sf-live-chat .sfb-send-btn:hover { box-shadow: 0 4px 14px -2px rgba(10, 111, 194, 0.55); } /* Disabled send — "clearly present, clearly inactive" (:1823). Kept as a tinted disc + muted glyph; only the hue moves. */ #sf-primary #sf-live-chat .sfb-send-btn.sf-chat-disable, #sf-primary #sf-live-chat .sfb-send-btn[disabled] { background: rgba(10, 111, 194, 0.14) !important; color: rgba(10, 92, 163, 0.55) !important; } /* Empty-state disc (:1850) — violet→gold sweep becomes lagoon→gold */ #sf-primary #sf-live-chat .sfb-empty-msg-icon { background: linear-gradient(140deg, rgba(10, 111, 194, 0.14), rgba(245, 195, 106, 0.12)); } /* Focus rings (:1901) */ #sf-primary #sf-live-chat .sfb-header-btn:focus-visible, #sf-primary #sf-live-chat .sfb-action-btn:focus-visible, #sf-primary #sf-live-chat .sfb-chat-item:focus-visible { outline: 2px solid rgba(10, 111, 194, 0.55); } /* ═══ §62 — NEW-MESSAGE (create room) SCREEN ═══════════════════════════════ Same grade, but note the scoping: two of these rules key off body.m2-msg-page rather than #sf-primary, because select2's dropdown mounts on , outside the forum wrapper. Reproduced exactly. ═══ */ /* Recipient chips (:1987) */ #sf-primary .sfb-main-header-create-box li.select2-selection__choice { background: linear-gradient(90deg, rgba(10, 111, 194, 0.14), rgba(10, 111, 194, 0.07)) !important; color: #0A5CA3 !important; } #sf-primary .sfb-main-header-create-box .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #0A6FC2 !important; } #sf-primary .sfb-main-header-create-box .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #0A5CA3 !important; } /* Header pencil, active (:2031) */ #sf-primary #sf-live-chat.sfb-create-room-show .sfb-header-btn.sf-create-chat-room { color: #0A6FC2 !important; } /* Create-mode canvas (:2043) — same wash as the conversation canvas, but on .sfb-main-chat and WITHOUT !important in the source. */ #sf-primary #sf-live-chat.sfb-create-room-show .sfb-main-chat { background: radial-gradient(900px 320px at 85% -60px, rgba(10, 111, 194, 0.05), transparent 70%), radial-gradient(700px 280px at -10% 110%, rgba(245, 195, 106, 0.05), transparent 70%), var(--m2-msg-canvas); } /* Highlighted user-search result (:2100) */ body.m2-msg-page .select2-container--default .select2-results__option--highlighted[aria-selected] { background: linear-gradient(90deg, rgba(10, 111, 194, 0.12), rgba(10, 111, 194, 0.05)) !important; color: #0A5CA3 !important; } /* ═══ audio-player-v2.css — voice notes ════════════════════════════════════ The player is theme-able through --m2-audio-* hooks, so the fallbacks are what actually paint outside the sent bubble (inside it, §37 already forces the whole player to white-on-gradient and nothing here applies). It also renders on forum posts for LOGGED-OUT viewers, which is why the enqueue covers that case too — otherwise a logged-out reader would see a violet player sitting inside a lagoon-graded post. ═══ */ .m2ap { --m2ap-accent: var(--m2-audio-accent, #0A6FC2); --m2ap-accent-dim:var(--m2-audio-accent-dim, rgba(10, 111, 194, 0.18)); --m2ap-played: var(--m2-audio-played, #0A6FC2); /* Hover LIGHTENS, same direction as the #c4b5fd it replaces — but that value was 1.85:1 on white, effectively invisible on a them-bubble. #2F9AF5 is 2.97:1: still a lighten, no longer a disappearance. */ --m2ap-hover: var(--m2-audio-hover, #2F9AF5); } /* Hardcoded, outside the hooks (:56, :118) */ .m2ap-play { box-shadow: 0 2px 6px rgba(10, 111, 194, 0.28); } .m2ap-speed:hover { background: rgba(10, 111, 194, 0.28); } /* ═══ audio-recorder.css — composer mic ════════════════════════════════════ Every violet in that file is one role (the accent fill) plus its washes and glows, so this is a flat swap. The is-recording #e11d48 rose is untouched: that one IS semantic — it is the "you are live" signal and must not read as chrome. ═══ */ .m2rec-trigger.is-preparing { color: #0A6FC2 !important; background: rgba(10, 111, 194, 0.15) !important; } .m2rec-btn--primary { background: #0A6FC2 !important; box-shadow: 0 2px 8px rgba(10, 111, 194, 0.32); } .m2rec-lock-btn { background: rgba(10, 111, 194, 0.12); color: #0A6FC2; } .m2rec-lock-btn.is-imminent { background: #0A6FC2; box-shadow: 0 0 0 4px rgba(10, 111, 194, 0.18); } .m2rec-stop { background: #0A6FC2; box-shadow: 0 2px 8px rgba(10, 111, 194, 0.32); } .m2rec-preview-bar-fill { background: #0A6FC2; } .m2rec-send { background: #0A6FC2; box-shadow: 0 2px 8px rgba(10, 111, 194, 0.32); } .m2rec-spinner { border: 2px solid rgba(10, 111, 194, 0.18); border-top-color: #0A6FC2; } .m2rec-up-bar-fill { background: #0A6FC2; } /* A @keyframes cannot be "overridden" by specificity — a later rule with the SAME NAME replaces the earlier one wholesale, whatever the selector. This file prints after audio-recorder.css, so redeclaring the name is the only way to reach the pulse, and it has to restate the transforms too or the scale animation is lost with the colour. */ @keyframes m2rec-prepare-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(10, 111, 194, 0.0); } 50% { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(10, 111, 194, 0.18); } }