/** * Muse Club — dark page styles. * * Used by: page-landing.php, page-login.php, page-join.php * * Covers: * • Base dark reset (mc-dark-page body) * • Landing page layout and typography * • Shared dark shell (login + join pages) * • PMP [pmpro_levels] overrides — 3-column tier cards * • PMP [pmpro_login] overrides — dark form * * All PMP overrides are scoped to .mc-pmp-wrap so they never * affect PMP output on other pages (account, checkout, etc.). * * @package MuseClubChild */ /* ================================================================ Tokens ================================================================ */ :root { /* Entrance palette → active skin tokens (emitted in by mc_skin). Background-relative: cards/forms are elevated versions of --mc-bg and all text is the on-background ink family, so the whole entrance follows the skin's background, on-background text, accent and fonts as one coherent context. Fallbacks preserve the original dark doorway if the skin override is ever absent (e.g. plugin inactive). */ --mc-dark-bg: var(--mc-bg, #0c0a09); --mc-dark-surface: color-mix(in srgb, var(--mc-bg, #0c0a09), var(--mc-ink-on-bg, #f0ebe1) 7%); --mc-dark-surface-2: color-mix(in srgb, var(--mc-bg, #0c0a09), var(--mc-ink-on-bg, #f0ebe1) 12%); --mc-dark-border: color-mix(in srgb, transparent, var(--mc-ink-on-bg, #f0ebe1) 10%); --mc-dark-border-md: color-mix(in srgb, transparent, var(--mc-ink-on-bg, #f0ebe1) 18%); --mc-dark-text: var(--mc-ink-on-bg, #f0ebe1); --mc-dark-text-muted: color-mix(in srgb, transparent, var(--mc-ink-on-bg, #f0ebe1) 48%); --mc-dark-text-sub: color-mix(in srgb, transparent, var(--mc-ink-on-bg, #f0ebe1) 68%); --mc-accent: #5e2129; --mc-accent-hover: color-mix(in srgb, var(--mc-accent), #fff 16%); --mc-accent-soft: color-mix(in srgb, var(--mc-accent), transparent 85%); --mc-radius: 8px; --mc-radius-lg: 12px; --mc-font-display: 'Cormorant Garamond', Georgia, serif; --mc-font-ui: var(--mc-font-body, 'DM Sans', system-ui, sans-serif); } /* ================================================================ Dark page base reset ================================================================ */ .mc-dark-page, .mc-dark-page body { margin: 0; padding: 0; background: var(--mc-dark-bg); color: var(--mc-dark-text); font-family: var(--mc-font-ui); -webkit-font-smoothing: antialiased; min-height: 100vh; } /* Kill any Blocksy chrome that bleeds through */ .mc-dark-page .ct-header, .mc-dark-page .ct-footer, .mc-dark-page #wpadminbar + div > header, .mc-dark-page .site-header, .mc-dark-page .site-footer { display: none !important; } *, *::before, *::after { box-sizing: border-box; } a { color: inherit; text-decoration: none; } /* ================================================================ LANDING PAGE ================================================================ */ .mc-landing { display: flex; flex-direction: column; min-height: 100vh; align-items: center; justify-content: center; padding: 40px 24px; position: relative; } /* Subtle radial glow from center — atmosphere, not content */ .mc-landing::before { content: ''; position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient( ellipse at center, color-mix(in srgb, var(--mc-accent), transparent 88%) 0%, transparent 70% ); pointer-events: none; z-index: 0; } .mc-landing__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; max-width: 440px; width: 100%; } /* Logo */ .mc-landing__brand { margin-bottom: 28px; } .mc-landing__logo { max-width: 220px; max-height: 220px; width: auto; height: auto; object-fit: contain; filter: drop-shadow( 0 0 24px color-mix(in srgb, var(--mc-accent), transparent 70%) ); } .mc-landing__wordmark-fallback { font-family: var(--mc-font-display); font-size: 28px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mc-dark-text); opacity: 0.85; } /* Platform name */ .mc-landing__name { font-family: var(--mc-font-display); font-size: clamp(36px, 8vw, 52px); font-weight: 600; letter-spacing: 0.04em; color: var(--mc-dark-text); margin: 0 0 12px; line-height: 1.1; } /* Tagline — from WP page content */ .mc-landing__tagline { font-family: var(--mc-font-ui); font-size: 14px; font-weight: 400; color: var(--mc-dark-text-muted); line-height: 1.6; margin-bottom: 40px; letter-spacing: 0.01em; } .mc-landing__tagline p { margin: 0; } /* CTA buttons */ .mc-landing__actions { display: flex; gap: 14px; align-items: center; } .mc-landing__btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; min-width: 120px; padding: 0 28px; border-radius: var(--mc-radius); font-family: var(--mc-font-ui); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; text-decoration: none; } /* Ghost / outlined — Login */ .mc-landing__btn--ghost { background: transparent; border: 1px solid var(--mc-dark-border-md); color: var(--mc-dark-text-sub); } .mc-landing__btn--ghost:hover { border-color: color-mix(in srgb, transparent, var(--mc-dark-text) 35%); color: var(--mc-dark-text); background: color-mix(in srgb, transparent, var(--mc-dark-text) 4%); } /* Filled — Join */ .mc-landing__btn--filled { background: var(--mc-accent); border: 1px solid var(--mc-accent); color: #fff; box-shadow: 0 2px 12px color-mix(in srgb, var(--mc-accent), transparent 60%); } .mc-landing__btn--filled:hover { background: var(--mc-accent-hover); border-color: var(--mc-accent-hover); box-shadow: 0 4px 20px color-mix(in srgb, var(--mc-accent), transparent 50%); } /* Footer */ .mc-landing__footer { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 400; color: var(--mc-dark-text-muted); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } /* ================================================================ DARK SHELL — shared wrapper for login + join pages ================================================================ */ .mc-dark-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 60px 24px 40px; } .mc-dark-shell--narrow { justify-content: center; } .mc-dark-shell__header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 48px; } .mc-dark-shell__logo-link { display: block; margin-bottom: 32px; opacity: 0.9; transition: opacity 0.15s; } .mc-dark-shell__logo-link:hover { opacity: 1; } .mc-dark-shell__logo { max-width: 160px; max-height: 160px; object-fit: contain; filter: drop-shadow( 0 0 16px color-mix(in srgb, var(--mc-accent), transparent 75%) ); } .mc-dark-shell__logo--sm { max-width: 130px; max-height: 130px; } .mc-dark-shell__wordmark { font-family: var(--mc-font-display); font-size: 22px; font-weight: 600; letter-spacing: 0.08em; color: var(--mc-dark-text); } .mc-dark-shell__title { font-family: var(--mc-font-display); font-size: clamp(28px, 5vw, 40px); font-weight: 600; color: var(--mc-dark-text); margin: 0 0 10px; line-height: 1.1; letter-spacing: 0.01em; } .mc-dark-shell__sub { font-size: 14px; color: var(--mc-dark-text-muted); margin: 0; line-height: 1.5; } .mc-dark-shell__back, .mc-dark-shell__footer-links { margin-top: 40px; font-size: 13px; color: var(--mc-dark-text-muted); display: flex; gap: 10px; align-items: center; } .mc-dark-shell__back a, .mc-dark-shell__footer-links a { color: var(--mc-dark-text-sub); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, transparent, var(--mc-dark-text) 25%); transition: color 0.15s; } .mc-dark-shell__back a:hover, .mc-dark-shell__footer-links a:hover { color: var(--mc-dark-text); } /* ================================================================ PMP WRAPPER — base ================================================================ */ .mc-pmp-wrap { width: 100%; } /* Kill PMP's default white backgrounds and blue links */ .mc-pmp-wrap, .mc-pmp-wrap * { color: inherit; } .mc-pmp-wrap a { color: var(--mc-dark-text-sub); } .mc-pmp-wrap a:hover { color: var(--mc-dark-text); } /* ================================================================ LEVELS GRID — our own markup, no PMP table to fight ================================================================ */ .mc-levels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; max-width: 960px; margin: 0 auto; } .mc-tier-card { display: flex; flex-direction: column; background: var(--mc-dark-surface); border: 1px solid var(--mc-dark-border); border-radius: var(--mc-radius-lg); padding: 32px 28px; transition: border-color 0.2s, box-shadow 0.2s; } .mc-tier-card:hover { border-color: var(--mc-dark-border-md); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); } /* Gallery (middle tier) highlighted */ .mc-tier-card--highlight { border-color: var(--mc-accent); box-shadow: 0 0 0 1px var(--mc-accent), 0 4px 32px color-mix(in srgb, var(--mc-accent), transparent 80%); } .mc-tier-card__name { font-family: var(--mc-font-display); font-size: 26px; font-weight: 600; color: var(--mc-dark-text); letter-spacing: 0.01em; margin-bottom: 10px; line-height: 1.2; } .mc-tier-card__desc { font-size: 13px; color: var(--mc-dark-text-muted); line-height: 1.65; margin-bottom: 24px; flex-grow: 1; } .mc-tier-card__desc p { margin: 0; } .mc-tier-card__price-wrap { display: flex; align-items: baseline; gap: 6px; margin-bottom: 24px; } .mc-tier-card__price { font-family: var(--mc-font-display); font-size: 32px; font-weight: 600; color: var(--mc-dark-text); line-height: 1; } .mc-tier-card__period { font-size: 13px; color: var(--mc-dark-text-muted); font-family: var(--mc-font-ui); } /* CTA button — always at the bottom of the card */ .mc-tier-card__btn { display: block; width: 100%; text-align: center; padding: 13px 20px; border-radius: var(--mc-radius); font-family: var(--mc-font-ui); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; background: var(--mc-accent); color: #fff; border: 1px solid var(--mc-accent); text-decoration: none; transition: background 0.15s, box-shadow 0.15s; box-shadow: 0 2px 8px color-mix(in srgb, var(--mc-accent), transparent 70%); cursor: pointer; margin-top: auto; } .mc-tier-card__btn:hover { background: var(--mc-accent-hover); box-shadow: 0 4px 16px color-mix(in srgb, var(--mc-accent), transparent 55%); color: #fff; } .mc-tier-card__btn--current { background: transparent; border-color: var(--mc-dark-border-md); color: var(--mc-dark-text-muted); box-shadow: none; cursor: default; } .mc-levels-empty { color: var(--mc-dark-text-muted); text-align: center; font-size: 14px; } /* ================================================================ PMP LOGIN FORM PMP's [pmpro_login] uses wp_login_form() which renders id="loginform" not id="pmpro_login_form". Both selectors needed. ================================================================ */ .mc-pmp-login-wrap { width: 100%; max-width: 420px; } /* ── Nuclear background reset ──────────────────────────────────── PMP wraps the login form in one or more divs with white/light backgrounds. We don't know which class PMP uses (it varies by version), so we kill ALL background-colors on structural elements inside the login wrapper, then restore only what we own. ──────────────────────────────────────────────────────────────── */ .mc-pmp-login-wrap div, .mc-pmp-login-wrap section, .mc-pmp-login-wrap article { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } /* Restore the form card — the one element we DO want styled */ .mc-pmp-login-wrap form, .mc-pmp-login-wrap #loginform, .mc-pmp-login-wrap #pmpro_login_form { background: var(--mc-dark-surface) !important; background-color: var(--mc-dark-surface) !important; border: 1px solid var(--mc-dark-border) !important; border-radius: var(--mc-radius-lg) !important; } /* Form card — broad selector catches both PMP and WP form IDs */ .mc-pmp-wrap form, .mc-pmp-wrap #loginform, .mc-pmp-wrap #pmpro_login_form, .mc-pmp-wrap form[name="loginform"] { background: var(--mc-dark-surface) !important; border: 1px solid var(--mc-dark-border) !important; border-radius: var(--mc-radius-lg) !important; padding: 32px !important; display: flex !important; flex-direction: column !important; gap: 16px !important; } /* Labels */ .mc-pmp-wrap label, .mc-pmp-wrap .pmpro_form_fields label { display: block !important; font-size: 11px !important; font-weight: 600 !important; color: var(--mc-dark-text-muted) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin-bottom: 6px !important; } /* WP wraps password field in .user-pass-wrap — stack it vertically */ .mc-pmp-wrap .user-pass-wrap { display: flex !important; flex-direction: column !important; gap: 0 !important; margin: 0 !important; } .mc-pmp-wrap .user-pass-wrap label { margin-bottom: 6px !important; } /* .wp-pwd is the wrapper around password input + show-pw button */ .mc-pmp-wrap .wp-pwd { position: relative !important; display: block !important; width: 100% !important; } /* Text inputs */ .mc-pmp-wrap input[type="text"], .mc-pmp-wrap input[type="email"], .mc-pmp-wrap input[type="password"] { width: 100% !important; height: 44px !important; background: var(--mc-dark-bg) !important; border: 1px solid var(--mc-dark-border-md) !important; border-radius: var(--mc-radius) !important; color: var(--mc-dark-text) !important; font-family: var(--mc-font-ui) !important; font-size: 14px !important; padding: 0 44px 0 14px !important; /* right padding makes room for show-pw icon */ transition: border-color 0.15s !important; outline: none !important; -webkit-appearance: none !important; box-sizing: border-box !important; } .mc-pmp-wrap input[type="text"] { padding-right: 14px !important; /* no icon on text fields */ } .mc-pmp-wrap input[type="text"]:focus, .mc-pmp-wrap input[type="email"]:focus, .mc-pmp-wrap input[type="password"]:focus { border-color: var(--mc-accent) !important; box-shadow: 0 0 0 2px var(--mc-accent-soft) !important; } /* Autofill override */ .mc-pmp-wrap input:-webkit-autofill, .mc-pmp-wrap input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--mc-dark-bg) inset !important; -webkit-text-fill-color: var(--mc-dark-text) !important; caret-color: var(--mc-dark-text) !important; } /* Show password button — styled as a minimal icon inside the input */ .mc-pmp-wrap button.wp-hide-pw { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; background: transparent !important; border: none !important; padding: 4px !important; margin: 0 !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 0 !important; color: var(--mc-dark-text-muted) !important; transition: color 0.15s !important; box-shadow: none !important; height: auto !important; width: auto !important; min-width: 0 !important; } .mc-pmp-wrap button.wp-hide-pw:hover { color: var(--mc-dark-text) !important; background: transparent !important; box-shadow: none !important; } /* Eye icon — override WP's default blue dashicon */ .mc-pmp-wrap button.wp-hide-pw .dashicons, .mc-pmp-wrap button.wp-hide-pw .dashicons-visibility, .mc-pmp-wrap button.wp-hide-pw .dashicons-hidden { color: inherit !important; font-size: 18px !important; width: 18px !important; height: 18px !important; line-height: 1 !important; } /* Hide the "Show Password" text label — icon only */ .mc-pmp-wrap button.wp-hide-pw .screen-reader-text { position: absolute !important; clip: rect(0, 0, 0, 0) !important; overflow: hidden !important; width: 1px !important; height: 1px !important; } /* Submit button */ .mc-pmp-wrap input[type="submit"], .mc-pmp-wrap #wp-submit, .mc-pmp-wrap button[type="submit"] { width: 100% !important; height: 48px !important; background: var(--mc-accent) !important; border: 1px solid var(--mc-accent) !important; border-radius: var(--mc-radius) !important; color: #fff !important; font-family: var(--mc-font-ui) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; cursor: pointer !important; transition: background 0.15s, box-shadow 0.15s !important; box-shadow: 0 2px 12px color-mix(in srgb, var(--mc-accent), transparent 65%) !important; -webkit-appearance: none !important; padding: 0 !important; margin-top: 4px !important; } .mc-pmp-wrap input[type="submit"]:hover, .mc-pmp-wrap button[type="submit"]:hover { background: var(--mc-accent-hover) !important; box-shadow: 0 4px 20px color-mix(in srgb, var(--mc-accent), transparent 50%) !important; } /* Remember me row */ .mc-pmp-wrap .forgetmenot, .mc-pmp-wrap p.forgetmenot { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; } .mc-pmp-wrap .forgetmenot input[type="checkbox"] { width: auto !important; height: auto !important; padding: 0 !important; accent-color: var(--mc-accent) !important; } .mc-pmp-wrap .forgetmenot label { font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--mc-dark-text-muted) !important; margin: 0 !important; } /* WP wraps submit in a p.submit — remove extra spacing */ .mc-pmp-wrap p.submit, .mc-pmp-wrap .submit { margin: 0 !important; padding: 0 !important; } /* Lost password link */ .mc-pmp-wrap .pmpro_lostpassword, .mc-pmp-wrap #nav, .mc-pmp-wrap p#nav { text-align: center !important; margin-top: 4px !important; padding-top: 16px !important; border-top: 1px solid var(--mc-dark-border) !important; } .mc-pmp-wrap .pmpro_lostpassword a, .mc-pmp-wrap #nav a { font-size: 13px !important; color: var(--mc-dark-text-muted) !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-color: color-mix(in srgb, transparent, var(--mc-dark-text) 20%) !important; } .mc-pmp-wrap .pmpro_lostpassword a:hover, .mc-pmp-wrap #nav a:hover { color: var(--mc-dark-text-sub) !important; } /* Error messages */ .mc-pmp-wrap .pmpro_message, .mc-pmp-wrap #login_error, .mc-pmp-wrap .login-error { background: rgba(180, 30, 30, 0.1) !important; border: 1px solid rgba(180, 30, 30, 0.3) !important; border-radius: var(--mc-radius) !important; color: #e57373 !important; padding: 12px 14px !important; font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 0 !important; } /* ================================================================ Responsive ================================================================ */ @media (max-width: 720px) { /* Tier cards stack on mobile */ .mc-levels-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } .mc-landing__actions { flex-direction: column; width: 100%; max-width: 280px; } .mc-landing__btn { width: 100%; } .mc-dark-shell { padding: 40px 20px 32px; } .mc-pmp-wrap #pmpro_login_form, .mc-pmp-wrap form[name="loginform"] { padding: 24px !important; } } @media (max-width: 480px) { .mc-landing__name { font-size: 36px; } }