/* ============================================================================ MYTHICA SKIN — "glass, not gray." The site's starfield is the living FIELD; BuddyBoss's opaque panels become translucent GLASS so the field breathes through (that light emphasises the content). Gold ornament, Cormorant serif voice, the Akashi Guide orb. Everything is scoped under `body.mythica-skin-on` and touches only colour, background, translucency, blur, radius and type — never layout/position — so toggling the class is a clean A/B and nothing can crush the theme. Selectors target BuddyBoss Platform + the BuddyBoss theme; they're broad and best-effort — live-tune per the running theme via the admin-bar toggle. ========================================================================== */ body.mythica-skin-on { --mysk-gold: #e8c47a; --mysk-gold2: #f2d79a; --mysk-fg: #eef2ff; --mysk-dim: #b9c6ee; /* GLASS IS COMPOSED, NOT CHOSEN. The two axes used to fight: an ELEMENT declared a finished `--mysk-glass` colour, and then a GLASS LEVEL declared a different finished colour that overwrote it — so at Clear a Water member got Ether-blue panes and the element they picked was simply thrown away. So the pane is now assembled from three separable parts: --mysk-tint the element's colour, as raw channels (element sets) --mysk-a how much of it sits between you and the field (glass sets) --mysk-blur how frosted the pane is (glass sets) Neither axis has to know the other exists, and every combination of the two is a real, distinct surface instead of one clobbering the other. */ --mysk-tint: 12,15,34; --mysk-a: .52; --mysk-a2: .66; --mysk-blur: 12px; --mysk-sat: 1.12; /* the specular: how much a pane reads as a lit EDGE rather than a fill. It has to rise as the fill falls, or clear glass reads as no glass. */ --mysk-sheen: .07; --mysk-cast: .38; /* ⚠ These are declared here for DOCUMENTATION and for anything reading `--mysk-glass` directly, but the panes below must NOT use them — a var() written inside a custom property is substituted at the element where that property is DECLARED, not where it is used. Declared once here on `body`, `--mysk-glass` freezes whatever `--mysk-a` happens to be at this point in the cascade and inherits down already-resolved, so a later `.mythica-glass-clear` block changing `--mysk-a` cannot reach it. Measured: all three levels computed to rgba(...,0.52). It only works today because every one of these classes lands on , so the freeze happens to catch the right value. That is a coincidence, not a design, and it dies the moment a flavour is scoped to a subtree. The panes compose the colour AT THE PANE instead. */ --mysk-glass: rgba(var(--mysk-tint), var(--mysk-a)); --mysk-glass2: rgba(var(--mysk-tint), var(--mysk-a2)); --mysk-edge: rgba(232,196,122,.28); --mysk-net: rgba(140,170,235,.14); /* ============================================================================ THE TOKEN LAYER — the highest-leverage part of this whole file. The BuddyBoss theme is entirely CSS-variable driven (57+ `--bb-*` tokens covering every button, link, label, input, radius and colour). So instead of chasing individual components with selectors forever, we REMAP THE THEME'S OWN VARIABLES to the Mythica palette. One block, and the whole environment falls into line at once — course badges, filter dropdowns, the Backdrop button, Add Photos, active-tab underlines, form focus rings, tooltips, everything. These are declared on `body.mythica-skin-on`, so they cascade into every theme rule beneath it — and vanish the instant the skin is toggled off. ⚠ BuddyBoss uses BOTH hex and `-rgb` triplet forms (e.g. `rgba(var(--bb-primary-color-rgb), .1)`), so every colour needs both or the translucent variants silently fall back to the theme's original. ========================================================================== */ /* --- the accent. This is the single most important line in the file: it's what makes links, active tabs and primary actions gold instead of the theme's green/blue. --- */ --bb-primary-color: #e8c47a; --bb-primary-color-rgb: 232,196,122; /* --- typography colours --- */ --bb-headings-color: #e8c47a; --bb-headings-color-rgb: 232,196,122; --bb-body-text-color: #eef2ff; --bb-body-text-color-rgb: 238,242,255; --bb-alternate-text-color: #b9c6ee; --bb-alternate-text-color-rgb: 185,198,238; /* --- surfaces: glass over the field, gold hairlines --- */ --bb-content-background-color: var(--mysk-glass); --bb-content-alternate-background-color: var(--mysk-glass2); --bb-content-border-color: rgba(232,196,122,.28); --bb-body-background-color: rgba(8,9,26,.30); --bb-body-background-color-rgb: 8,9,26; --bb-cover-image-background-color: rgba(12,15,34,.5); /* --- primary buttons: gold, dark text (Backdrop, Add Photos, Start Course) --- */ --bb-primary-button-background-regular: #e8c47a; --bb-primary-button-text-regular: #0e0b16; --bb-primary-button-text-regular-rgb: 14,11,22; --bb-primary-button-border-regular: #e8c47a; --bb-primary-button-background-hover: #f2d79a; --bb-primary-button-text-hover: #0e0b16; --bb-primary-button-border-hover: #f2d79a; --bb-primary-button-focus-shadow: 0 0 0 3px rgba(232,196,122,.28); /* --- secondary buttons: outlined gold on glass --- */ --bb-secondary-button-background-regular: rgba(20,26,54,.6); --bb-secondary-button-text-regular: #e8c47a; --bb-secondary-button-border-regular: rgba(232,196,122,.45); --bb-secondary-button-background-hover: rgba(232,196,122,.12); --bb-secondary-button-text-hover: #f2d79a; --bb-secondary-button-border-hover: #e8c47a; --bb-secondary-button-focus-shadow: 0 0 0 3px rgba(232,196,122,.22); --bb-outline-button-focus-shadow: 0 0 0 3px rgba(232,196,122,.22); /* --- labels / status pills (IN PROGRESS, START COURSE, Private, Organizer) --- */ --bb-label-background-color: rgba(232,196,122,.16); --bb-label-text-color: #f2d79a; /* --- inputs --- */ --bb-input-focus-border-color: rgba(232,196,122,.6); --bb-input-focus-shadow: 0 0 0 3px rgba(232,196,122,.18); /* --- header + auth links --- */ --bb-header-links: #eef2ff; --bb-header-links-hover: #e8c47a; --bb-login-register-link-color-regular: #e8c47a; --bb-login-register-link-color-hover: #f2d79a; --bb-login-custom-heading-color: #e8c47a; /* --- tooltips --- */ --bb-tooltip-background: rgba(10,13,30,.94); --bb-tooltip-color: #eef2ff; /* --- geometry: softer, more ornamental corners throughout --- */ --bb-block-radius: 16px; --bb-block-radius-inner: 12px; --bb-button-radius: 999px; --bb-input-radius: 10px; --bb-option-radius: 10px; --bb-label-type-radius: 999px; /* --- semantic colours stay semantic, just tuned to sit in the palette. (Success/danger/warning must keep MEANING — we only desaturate them so they don't shout against the gold.) --- */ --bb-success-color: #6fbf9a; --bb-success-color-rgb: 111,191,154; --bb-danger-color: #d97a7a; --bb-danger-color-rgb: 217,122,122; --bb-warning-color: #e0b46a; --bb-warning-color-rgb: 224,180,106; --bb-default-notice-color: #8fa6dd; --bb-default-notice-color-rgb: 143,166,221; --bb-activity-topic: rgba(232,196,122,.16); } /* --- let the FIELD breathe: strip opaque backgrounds off the big wrappers so the site's starfield shows behind the glass cards --- */ body.mythica-skin-on #content, body.mythica-skin-on .site-content, body.mythica-skin-on .site-content-contain, body.mythica-skin-on #primary, body.mythica-skin-on #secondary, body.mythica-skin-on .bb-grid, body.mythica-skin-on .buddypress-wrap, body.mythica-skin-on .bs-sidebars, body.mythica-skin-on .bb-single-primary, body.mythica-skin-on .bb-single-secondary { background: transparent !important; background-color: transparent !important; } /* --- THE GLASS: every card / widget / panel / feed item --- */ body.mythica-skin-on .bb-card, body.mythica-skin-on .widget, body.mythica-skin-on .bs-widget, body.mythica-skin-on .bs-sidebars .widget, body.mythica-skin-on #secondary .widget, body.mythica-skin-on .sidebar .widget, body.mythica-skin-on .widget-area .widget, body.mythica-skin-on .bb-activity-post-form-wrapper, body.mythica-skin-on #whats-new-form, body.mythica-skin-on .activity-update-form, body.mythica-skin-on .buddypress-wrap .activity-list > li.activity-item, body.mythica-skin-on .bb-activity-list > li.activity-item, body.mythica-skin-on .bb-profile-header, body.mythica-skin-on .single-headers, body.mythica-skin-on .bb-cover-list-item, body.mythica-skin-on .bp-widget-block, body.mythica-skin-on .bb-quick-access, body.mythica-skin-on .notification-dropdown, body.mythica-skin-on .bb-onscreen-notification, body.mythica-skin-on .bp-messages-content, body.mythica-skin-on .dashboard-card { background: rgba(var(--mysk-tint), var(--mysk-a)) !important; -webkit-backdrop-filter: blur(var(--mysk-blur)) saturate(var(--mysk-sat)); backdrop-filter: blur(var(--mysk-blur)) saturate(var(--mysk-sat)); border: 1px solid var(--mysk-edge) !important; border-radius: 16px !important; /* The top inset line is the pane's lit edge — the single cue that says "there is a sheet of something here" once the fill gets thin. */ box-shadow: 0 18px 50px rgba(0,0,0,var(--mysk-cast)), inset 0 1px 0 rgba(255,255,255,var(--mysk-sheen)) !important; color: var(--mysk-fg); } /* --- THE BUDDYPANEL — BuddyBoss's own side navigation, skinned rather than replaced. It's already wired into their nav and state handling, so we only dress it: glass over the field, gold icons/labels, gold active state. --- */ body.mythica-skin-on .buddypanel, body.mythica-skin-on #buddypanel, body.mythica-skin-on .side-panel, body.mythica-skin-on [class*="buddypanel"] { background: rgba(10,13,30,.72) !important; -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); border-right: 1px solid var(--mysk-edge) !important; } body.mythica-skin-on .buddypanel .side-panel-inner, body.mythica-skin-on .buddypanel .buddypanel-menu, body.mythica-skin-on [class*="buddypanel"] ul { background: transparent !important; } /* items + icons */ body.mythica-skin-on .buddypanel a, body.mythica-skin-on [class*="buddypanel"] a { color: var(--mysk-fg) !important; } body.mythica-skin-on .buddypanel a i, body.mythica-skin-on .buddypanel a .bb-icon, body.mythica-skin-on [class*="buddypanel"] .bb-icon { color: var(--mysk-gold) !important; } body.mythica-skin-on .buddypanel li:hover > a, body.mythica-skin-on [class*="buddypanel"] li:hover > a { background: rgba(140,170,235,.1) !important; color: var(--mysk-gold) !important; } /* the active item wears the gold */ body.mythica-skin-on .buddypanel li.current-menu-item > a, body.mythica-skin-on .buddypanel li.current_page_item > a, body.mythica-skin-on [class*="buddypanel"] li.current-menu-item > a { color: var(--mysk-gold) !important; box-shadow: inset 3px 0 0 var(--mysk-gold); background: rgba(232,196,122,.08) !important; } /* section labels in the Cormorant voice */ body.mythica-skin-on .buddypanel .buddypanel-title, body.mythica-skin-on [class*="buddypanel"] .menu-title { font-family: "Cormorant Garamond", Georgia, serif !important; color: var(--mysk-gold) !important; } /* --- DIRECTORY / GRID components (Members · Groups · Courses · Photos). These use a different DOM schema from posts+widgets, so they need their own selectors — without them the directories stayed flat grey while everything else went glass. Same treatment, so the whole environment reads as one. --- */ body.mythica-skin-on .bb-cover-list-item, body.mythica-skin-on .members-list > li, body.mythica-skin-on .groups-list > li, body.mythica-skin-on .bp-list > li, body.mythica-skin-on .item-list > li, body.mythica-skin-on .bb-grid-item, body.mythica-skin-on .ld-course-list-items .ld_course_grid .thumbnail.course, body.mythica-skin-on .learndash-course-grid .ld_course_grid_price, body.mythica-skin-on .bs-item-wrap, body.mythica-skin-on .bb-card-course, body.mythica-skin-on .bb-cover-wrap { background: rgba(var(--mysk-tint), var(--mysk-a)) !important; -webkit-backdrop-filter: blur(var(--mysk-blur)) saturate(var(--mysk-sat)); backdrop-filter: blur(var(--mysk-blur)) saturate(var(--mysk-sat)); border: 1px solid var(--mysk-edge) !important; border-radius: 16px !important; box-shadow: 0 14px 40px rgba(0,0,0,var(--mysk-cast)), inset 0 1px 0 rgba(255,255,255,var(--mysk-sheen)) !important; color: var(--mysk-fg); } /* directory filter bars / tab strips ride the field too */ body.mythica-skin-on .bp-navs.dir-navs, body.mythica-skin-on .bb-subnav-filters, body.mythica-skin-on .subnav-filters, body.mythica-skin-on .dir-search, body.mythica-skin-on .bb-directory-filters { background: rgba(12,15,34,.4) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--mysk-net) !important; border-radius: 14px !important; } /* card titles pick up the voice, wherever they are */ body.mythica-skin-on .bs-item-title, body.mythica-skin-on .bb-cover-list-item .bs-item-title a, body.mythica-skin-on .ld_course_grid .entry-title, body.mythica-skin-on .bb-card-course .bb-course-title { font-family: "Cormorant Garamond", Georgia, serif !important; color: var(--mysk-gold) !important; } /* nested sub-panels inside a glass card shouldn't double-frost — keep them light */ body.mythica-skin-on .bb-card .bb-card, body.mythica-skin-on .activity-item .activity-content .activity-inner { background: transparent !important; box-shadow: none !important; border: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; } /* --- VOICE: serif + gold on titles --- */ body.mythica-skin-on .widget-title, body.mythica-skin-on .bb-title, body.mythica-skin-on .bs-widget-title, body.mythica-skin-on .bb-section-title, body.mythica-skin-on .bb-profile-name, body.mythica-skin-on #item-header-content .user-nicename, body.mythica-skin-on .bb-cover-list-item .bs-item-title { font-family: "Cormorant Garamond", Georgia, serif !important; color: var(--mysk-gold) !important; letter-spacing: .01em; } /* body text on glass stays bright */ body.mythica-skin-on .activity-item .activity-content, body.mythica-skin-on .bb-card, body.mythica-skin-on .widget { color: var(--mysk-fg); } body.mythica-skin-on .activity-header a.bp-primary-action, body.mythica-skin-on .activity-list .activity-header strong a { color: var(--mysk-fg); } body.mythica-skin-on time, body.mythica-skin-on .activity-header .time-since, body.mythica-skin-on .item-meta { color: var(--mysk-dim) !important; } /* --- GOLD accents: active nav, primary actions, ornamental rules --- */ body.mythica-skin-on #item-nav .item-list-tabs li.current a, body.mythica-skin-on .bb-nav .current a, body.mythica-skin-on div.item-list-tabs ul li.selected a, body.mythica-skin-on .bp-navs a.current { color: var(--mysk-gold) !important; box-shadow: inset 0 -2px 0 var(--mysk-gold); } body.mythica-skin-on .activity-list a.button.item-button, body.mythica-skin-on .bb-title a { color: var(--mysk-gold); } /* media inside a post: wear a thin gold frame + glow (a compositor slot's home) */ body.mythica-skin-on .activity-list .activity-inner .bb-activity-media-wrap img, body.mythica-skin-on .activity-list .activity-inner .bb-activity-media-elem, body.mythica-skin-on .bb-activity-media-wrap { border-radius: 14px !important; border: 1px solid rgba(232,196,122,.4) !important; box-shadow: 0 0 30px rgba(232,196,122,.12); overflow: hidden; } /* gold-tinted thin scrollbars, to match */ body.mythica-skin-on * { scrollbar-color: rgba(232,196,122,.35) transparent; } /* ============================================================================ THE HEADER IS CHROME, NOT CONTENT — so nothing in it wears a pane. A visible tile appeared behind the brand glyph, but ONLY when logged in. The logo was innocent: all four logo files in the library measure genuinely transparent (corner alpha 0, 2–10% of pixels opaque), and logged out the header renders clean with every ancestor at rgba(0,0,0,0). Logged in, BuddyBoss serves a different header — and the glass selectors below are deliberately broad (`.widget`, `.bp-widget-block`, `.bb-card`), so a wrapper in THAT markup carrying one of those class names gets a dark translucent rounded pane. Which is exactly what the tile looks like. So this is not a lost alpha. It is an alpha we ADDED, to something that should never have been treated as a panel. The exclusion is right regardless of whether that diagnosis is exact: glass is a treatment for CONTENT sitting over the field. The masthead is the frame around the field, and framing the frame is how you get a box around a logo. ========================================================================== */ body.mythica-skin-on .site-header .widget, body.mythica-skin-on .site-header .bs-widget, body.mythica-skin-on .site-header .bb-card, body.mythica-skin-on .site-header .bp-widget-block, body.mythica-skin-on .site-header .bs-item-wrap, body.mythica-skin-on .site-header .site-branding, body.mythica-skin-on .site-header .site-title, body.mythica-skin-on #masthead .widget, body.mythica-skin-on #masthead .bs-widget, body.mythica-skin-on #masthead .bb-card, body.mythica-skin-on #masthead .bp-widget-block, body.mythica-skin-on #masthead .bs-item-wrap, body.mythica-skin-on #masthead .site-branding, body.mythica-skin-on #masthead .site-title { background: none !important; background-color: transparent !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* the mark itself never gets a plate, wherever the theme decides to put it */ body.mythica-skin-on .bb-logo, body.mythica-skin-on .site-title > a, body.mythica-skin-on .site-branding img { background: none !important; box-shadow: none !important; border-radius: 0 !important; } /* ============================================================================ THE AKASHI GUIDE ORB — reskin the AI Engine (Meow Apps) chat launcher. The floating chat button becomes a glowing gold orb marked with the ❖. AI Engine markup varies by version — these selectors cover the common launcher; tune if the orb doesn't take. ========================================================================== */ Robust approach: rather than restyle AI Engine's own button (its markup + inline styles vary by version and fought us into a stretched ellipse), we HIDE the native launcher and inject OUR OWN orb (skin.js) that simply .click()s the native one to open the chat. Full control of the visual, zero coupling. */ /* `.mwai-trigger` is AI Engine's real launcher (confirmed via their docs); the others are older/variant names kept as belt-and-suspenders. We open the chat via the MwaiAPI, so the native button can be fully hidden. */ body.mythica-skin-on .mwai-trigger, body.mythica-skin-on .mwai-open-button, body.mythica-skin-on .mwai-launcher, body.mythica-skin-on .mwai-window-trigger { display: none !important; } /* our own orb — a small star in a deep cosmic well, ringed in subtle gold */ .mythica-akashi-orb { position: fixed; right: 22px; bottom: 22px; z-index: 99999; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; padding: 0; display: grid; place-items: center; background: radial-gradient(1px 1px at 32% 34%, #ffffff, transparent), radial-gradient(1px 1px at 66% 30%, #cfe0ff, transparent), radial-gradient(1.2px 1.2px at 58% 64%, #ffffff, transparent), radial-gradient(1px 1px at 38% 70%, #dbe6ff, transparent), radial-gradient(1px 1px at 74% 58%, #ffffff, transparent), radial-gradient(circle at 50% 46%, #1b2350 0%, #0a0c1e 72%); border: 1px solid rgba(232,196,122,.5); box-shadow: 0 0 0 4px rgba(232,196,122,.1), 0 0 14px rgba(232,196,122,.22), 0 6px 16px rgba(0,0,0,.45); } .mythica-akashi-orb span { color: #f6e3b0; font-size: 17px; line-height: 1; text-shadow: 0 0 7px rgba(246,227,176,.9), 0 0 2px #ffffff; } .mythica-akashi-orb:hover { box-shadow: 0 0 0 4px rgba(232,196,122,.16), 0 0 20px rgba(232,196,122,.35), 0 6px 16px rgba(0,0,0,.45); } /* only visible when the skin is on */ body:not(.mythica-skin-on) .mythica-akashi-orb { display: none; } /* ============================================================================ FLAVOURS — the ground a member stands on. A flavour re-points the SAME variables; nothing else changes. The invariant: the field is still the ground in every one. They retint the glass and the ornament; they never make a surface opaque. `--mysk-field` is the ground itself — a generated cosmos by default, and overridable with real artwork via the `mythica_skin_field_image` filter. ========================================================================== */ body.mythica-skin-on { --mysk-field: radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent), radial-gradient(1.2px 1.2px at 34% 68%, #cfe0ff, transparent), radial-gradient(1.6px 1.6px at 72% 32%, #fff, transparent), radial-gradient(1.2px 1.2px at 86% 74%, #fff, transparent), radial-gradient(60% 50% at 20% 30%, rgba(90,70,180,.45), rgba(90,70,180,0) 60%), radial-gradient(55% 45% at 82% 68%, rgba(60,150,150,.34), rgba(60,150,150,0) 60%), linear-gradient(160deg, #0a0c1e 0%, #0b0a1c 52%, #08070f 100%); } /* the ground, painted behind everything and held still while content scrolls */ body.mythica-skin-on::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--mysk-field); background-size: cover; background-position: center; } /* ---- EARTH — root, stone and moss. The forest floor: dense, low, held. ---- */ body.mythica-flavor-earth { --mysk-gold: #c8a961; --mysk-gold2: #e2c886; --mysk-fg: #eef3e6; --mysk-dim: #a9bb98; --mysk-tint: 12,24,14; --mysk-edge: rgba(200,169,97,.28); --mysk-net: rgba(150,190,140,.14); --bb-primary-color: #c8a961; --bb-primary-color-rgb: 200,169,97; --bb-headings-color: #c8a961; --bb-headings-color-rgb: 200,169,97; --bb-body-text-color: #eef3e6; --bb-body-text-color-rgb: 238,243,230; --bb-alternate-text-color: #a9bb98; --bb-alternate-text-color-rgb: 169,187,152; --bb-content-background-color: var(--mysk-glass); --bb-content-alternate-background-color: var(--mysk-glass2); --bb-content-border-color: rgba(200,169,97,.28); --bb-primary-button-background-regular: #c8a961; --bb-primary-button-border-regular: #c8a961; --bb-primary-button-background-hover: #e2c886; --bb-primary-button-border-hover: #e2c886; --bb-secondary-button-text-regular: #c8a961; --bb-secondary-button-border-regular: rgba(200,169,97,.45); --mysk-field: radial-gradient(70% 50% at 24% 16%, rgba(96,140,74,.26), rgba(96,140,74,0) 62%), radial-gradient(55% 42% at 78% 40%, rgba(168,140,72,.18), rgba(168,140,72,0) 60%), radial-gradient(120% 80% at 50% 108%, rgba(28,62,32,.68), rgba(28,62,32,0) 70%), linear-gradient(168deg, #10230f 0%, #0a1709 56%, #050b05 100%); } /* ---- WATER — river and depth. Moonlight moving on a dark surface. ---- */ body.mythica-flavor-water { --mysk-gold: #a8d6d0; --mysk-gold2: #d2ece8; --mysk-fg: #eaf4f8; --mysk-dim: #94b6c2; --mysk-tint: 7,24,30; --mysk-edge: rgba(168,214,208,.26); --mysk-net: rgba(130,190,210,.14); --bb-primary-color: #a8d6d0; --bb-primary-color-rgb: 168,214,208; --bb-headings-color: #a8d6d0; --bb-headings-color-rgb: 168,214,208; --bb-body-text-color: #eaf4f8; --bb-body-text-color-rgb: 234,244,248; --bb-alternate-text-color: #94b6c2; --bb-alternate-text-color-rgb: 148,182,194; --bb-content-background-color: var(--mysk-glass); --bb-content-alternate-background-color: var(--mysk-glass2); --bb-content-border-color: rgba(168,214,208,.26); --bb-primary-button-background-regular: #a8d6d0; --bb-primary-button-border-regular: #a8d6d0; --bb-primary-button-background-hover: #d2ece8; --bb-primary-button-border-hover: #d2ece8; --bb-primary-button-text-regular: #04191d; --bb-secondary-button-text-regular: #a8d6d0; --bb-secondary-button-border-regular: rgba(168,214,208,.42); --mysk-field: radial-gradient(60% 34% at 66% 12%, rgba(214,236,240,.20), rgba(214,236,240,0) 60%), radial-gradient(80% 55% at 20% 30%, rgba(48,132,158,.30), rgba(48,132,158,0) 62%), radial-gradient(130% 70% at 50% 108%, rgba(9,52,66,.66), rgba(9,52,66,0) 72%), linear-gradient(172deg, #0a2831 0%, #06181f 58%, #030b0f 100%); } /* ---- FIRE — the hearth. Ember, coal, the glow that moves. ---- */ body.mythica-flavor-fire { --mysk-gold: #e8a26a; --mysk-gold2: #f6c496; --mysk-fg: #f9ece2; --mysk-dim: #c9a08a; --mysk-tint: 26,12,8; --mysk-edge: rgba(232,162,106,.28); --mysk-net: rgba(210,140,100,.14); --bb-primary-color: #e8a26a; --bb-primary-color-rgb: 232,162,106; --bb-headings-color: #e8a26a; --bb-headings-color-rgb: 232,162,106; --bb-body-text-color: #f9ece2; --bb-body-text-color-rgb: 249,236,226; --bb-alternate-text-color: #c9a08a; --bb-alternate-text-color-rgb: 201,160,138; --bb-content-background-color: var(--mysk-glass); --bb-content-alternate-background-color: var(--mysk-glass2); --bb-content-border-color: rgba(232,162,106,.28); --bb-primary-button-background-regular: #e8a26a; --bb-primary-button-border-regular: #e8a26a; --bb-primary-button-background-hover: #f6c496; --bb-primary-button-border-hover: #f6c496; --bb-secondary-button-text-regular: #e8a26a; --bb-secondary-button-border-regular: rgba(232,162,106,.45); --mysk-field: radial-gradient(70% 48% at 28% 24%, rgba(196,84,36,.30), rgba(196,84,36,0) 62%), radial-gradient(52% 38% at 74% 58%, rgba(232,140,60,.20), rgba(232,140,60,0) 60%), radial-gradient(130% 70% at 50% 110%, rgba(120,38,16,.60), rgba(120,38,16,0) 70%), linear-gradient(166deg, #1c0d07 0%, #130805 56%, #080302 100%); } /* ---- AIR — high places. Mist and dawn: still night, but thinner and paler. ---- */ body.mythica-flavor-air { --mysk-gold: #cfdcf0; --mysk-gold2: #eaf1fb; --mysk-fg: #f2f6fd; --mysk-dim: #a4b4cd; --mysk-tint: 14,20,34; --mysk-edge: rgba(207,220,240,.26); --mysk-net: rgba(170,195,235,.16); --bb-primary-color: #b9cdea; --bb-primary-color-rgb: 185,205,234; --bb-headings-color: #cfdcf0; --bb-headings-color-rgb: 207,220,240; --bb-body-text-color: #f2f6fd; --bb-body-text-color-rgb: 242,246,253; --bb-alternate-text-color: #a4b4cd; --bb-alternate-text-color-rgb: 164,180,205; --bb-content-background-color: var(--mysk-glass); --bb-content-alternate-background-color: var(--mysk-glass2); --bb-content-border-color: rgba(207,220,240,.26); --bb-primary-button-background-regular: #b9cdea; --bb-primary-button-border-regular: #b9cdea; --bb-primary-button-background-hover: #dbe6f7; --bb-primary-button-border-hover: #dbe6f7; --bb-primary-button-text-regular: #10192b; --bb-secondary-button-text-regular: #cfdcf0; --bb-secondary-button-border-regular: rgba(207,220,240,.4); --mysk-field: radial-gradient(90% 42% at 50% -4%, rgba(214,228,248,.26), rgba(214,228,248,0) 62%), radial-gradient(70% 40% at 22% 34%, rgba(120,160,215,.20), rgba(120,160,215,0) 60%), radial-gradient(120% 60% at 70% 96%, rgba(40,60,96,.50), rgba(40,60,96,0) 72%), linear-gradient(172deg, #14203a 0%, #0d1526 58%, #070b14 100%); } /* ---- ETHER — the between. Starfield and the deep. (the default) ---- */ body.mythica-flavor-ether { --mysk-gold: #e8c47a; --mysk-gold2: #f2d79a; --mysk-fg: #eef2ff; --mysk-dim: #b9c6ee; --mysk-tint: 12,15,34; --mysk-edge: rgba(232,196,122,.28); --mysk-net: rgba(140,170,235,.14); --mysk-field: radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent), radial-gradient(1.2px 1.2px at 34% 68%, #cfe0ff, transparent), radial-gradient(1.6px 1.6px at 72% 32%, #fff, transparent), radial-gradient(1.2px 1.2px at 86% 74%, #fff, transparent), radial-gradient(1.3px 1.3px at 48% 88%, #fff, transparent), radial-gradient(60% 50% at 20% 30%, rgba(90,70,180,.45), rgba(90,70,180,0) 60%), radial-gradient(55% 45% at 82% 68%, rgba(60,150,150,.34), rgba(60,150,150,0) 60%), linear-gradient(160deg, #0a0c1e 0%, #0b0a1c 52%, #08070f 100%); } /* ============================================================================ GLASS — how far the field breathes through the frames. THE BLUR USED TO RUN BACKWARDS, and that single inversion is why this axis appeared to do nothing. Clear was given `blur(20px)` while the default was `blur(14px)` — so asking for a clearer pane frosted the field HARDER. And because the field is built from 600px-wide radial gradients, blurring it further doesn't reveal anything; it flattens it into an even wash. Thinning the fill over an even wash is invisible. Three settings, one appearance. Frosted glass blurs. Clear glass does not. So the blur now FALLS as the pane clears, which is the only arrangement where the three settings are three different materials: VEILED a fill you read on, field present only as a mood BALANCED a pane — field legible as shape and colour CLEAR a sheet of glass — stars come through, and the pane is now mostly its lit EDGE rather than its fill As the fill thins the sheen has to rise, or Clear stops reading as glass and starts reading as a missing panel. ========================================================================== */ body.mythica-glass-veiled { --mysk-a: .80; --mysk-a2: .90; --mysk-blur: 26px; --mysk-sat: 1.05; --mysk-sheen: .04; --mysk-cast: .46; } body.mythica-glass-balanced { --mysk-a: .52; --mysk-a2: .66; --mysk-blur: 12px; --mysk-sat: 1.12; --mysk-sheen: .07; --mysk-cast: .38; } body.mythica-glass-clear { --mysk-a: .20; --mysk-a2: .32; --mysk-blur: 3px; --mysk-sat: 1.28; --mysk-sheen: .16; --mysk-cast: .30; --mysk-edge: rgba(232,196,122,.42); } /* At Clear the pane needs to be a THING, not an absence. A pane of glass is legible by three cues and none of them is its fill: the light that grazes its top edge, the way it lifts what's behind it, and the soft shadow it casts. Give it those and thin glass looks deliberate. */ body.mythica-glass-clear .bb-card, body.mythica-glass-clear .widget, body.mythica-glass-clear .bs-item-wrap, body.mythica-glass-clear .bb-cover-list-item, body.mythica-glass-clear .activity-list > li.activity-item { background-image: linear-gradient( 180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.025) 22%, rgba(255,255,255,0) 60% ) !important; -webkit-backdrop-filter: blur(var(--mysk-blur)) saturate(var(--mysk-sat)) brightness(1.08); backdrop-filter: blur(var(--mysk-blur)) saturate(var(--mysk-sat)) brightness(1.08); } /* ---- LEGIBILITY — its own axis, not an element. It is declared LAST on purpose. It used to sit above the glass block, which meant choosing Clear silently overrode high contrast — an accessibility need losing to a decorative one. Reading always wins. ---- */ body.mythica-contrast-high { --mysk-tint: 5,8,16; --mysk-a: .92; --mysk-a2: .97; --mysk-blur: 0px; --mysk-sheen: 0; --mysk-cast: .5; --mysk-fg: #ffffff; --mysk-dim: #d3dbec; --bb-body-text-color: #ffffff; --bb-body-text-color-rgb: 255,255,255; --bb-alternate-text-color: #d3dbec; --bb-alternate-text-color-rgb: 211,219,236; } body.mythica-contrast-high * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.mythica-contrast-high .bb-card, body.mythica-contrast-high .widget, body.mythica-contrast-high .bs-item-wrap, body.mythica-contrast-high .bb-cover-list-item, body.mythica-contrast-high .activity-list > li.activity-item { background-image: none !important; } /* ============================================================================ THE ATTUNE CONTROL ========================================================================== */ .mythica-attune { position: relative; display: inline-block; margin: 8px 0 2px; } .mythica-attune__toggle { background: rgba(10,14,32,.55) !important; color: var(--mysk-gold) !important; border: 1px solid var(--mysk-edge) !important; border-radius: 999px !important; padding: 5px 14px !important; font-size: 12px; cursor: pointer; letter-spacing: .1em; text-transform: uppercase; } .mythica-attune__toggle:hover { border-color: var(--mysk-gold) !important; } .mythica-attune__panel { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: 320px; max-width: 86vw; padding: 16px; border-radius: 16px; background: rgba(10,13,30,.96); border: 1px solid var(--mysk-edge); box-shadow: 0 24px 60px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .mythica-attune__panel[hidden] { display: none; } .mythica-attune__lead { font-size: 12.5px; line-height: 1.6; color: var(--mysk-dim); margin-bottom: 14px; } .mythica-attune__flavors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .mythica-attune__flavor { background: none !important; border: 0 !important; padding: 0 !important; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; } .mythica-attune__swatch { width: 100%; aspect-ratio: 1; min-height: 40px; border-radius: 10px; display: block; border: 2px solid transparent; box-shadow: 0 3px 10px rgba(0,0,0,.4); } .mythica-attune__flavor.is-on .mythica-attune__swatch { border-color: var(--mysk-gold); } .mythica-attune__name { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mysk-dim); } .mythica-attune__flavor.is-on .mythica-attune__name { color: var(--mysk-gold); } .mythica-attune__sub { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mysk-dim); margin: 18px 0 8px; } .mythica-attune__glasses { display: flex; gap: 6px; } .mythica-attune__glass { flex: 1; cursor: pointer; font-size: 11px; padding: 7px 4px; border-radius: 999px; background: rgba(140,170,235,.08) !important; color: var(--mysk-dim) !important; border: 1px solid rgba(140,170,235,.2) !important; } .mythica-attune__glass.is-on { background: var(--mysk-gold) !important; color: #0e0b16 !important; border-color: var(--mysk-gold) !important; font-weight: 600; } /* A CONTROL MUST NOT LIE ABOUT BEING OVERRULED. High contrast pins every pane opaque and drops the blur to zero — deliberately, because reading beats decoration. But that left these three buttons looking live and selectable while they changed nothing at all, which is precisely the silently-off failure this suite keeps tripping over. If a setting is being held by another setting, it has to SAY SO, in the place you're looking. */ body.mythica-contrast-high .mythica-attune__glasses { opacity: .38; pointer-events: none; filter: saturate(.3); } .mythica-attune__held { display: none; margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: var(--mysk-dim); opacity: .85; } body.mythica-contrast-high .mythica-attune__held { display: block; } .mythica-attune__contrast { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 12px; color: var(--mysk-dim); cursor: pointer; } .mythica-attune__contrast input { accent-color: var(--mysk-gold); }