/* ═══════════════════════════════════════════════════════════════════════════ myCORE Portal Styles ═══════════════════════════════════════════════════════════════════════════ */ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700&family=DM+Serif+Display&display=swap"); /* PREP brand blue — used for CTAs that must not read as part of the survey flow. */ :root { --mc-bg: #1a1225; --mc-bg-mid: #221836; --mc-bg-card: #2a1f3d; --mc-bg-input: #352a4d; --mc-text: #f0ecf5; --mc-text-muted: #9b8fb5; --mc-accent: #f5a623; --mc-accent-hover:#ffc04d; --mc-green: #4ec96d; --mc-blue: #4da4f5; --mc-red: #f55a5a; --mc-orange: #f57c23; --mc-purple: #a36df5; --mc-prep-blue: #424399; --mc-prep-blue-hover:#4f51b5; --mc-border: rgba(255, 255, 255, 0.08); --mc-radius: 10px; --mc-radius-lg: 16px; --mc-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); --mc-font: 'DM Sans', sans-serif; --mc-font-display:'DM Serif Display', serif; --mc-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .mycore-portal-page .tg-container { width: 100%; padding: 0; } /* Sticky-header fix. The active child theme sets `#content.site-content { overflow: hidden }` and Flash sets `.site { overflow-x: auto }`. Either makes an ancestor a scroll container, which breaks `position: sticky` — the sticky rating headers anchor to that ancestor (which never scrolls) instead of the viewport, so they never stick. Forcing the whole overflow chain back to `visible` on the portal page removes those scroll containers so sticky works. !important + the id selectors beat the theme. The real ancestor chain on the portal page is: html > body > #page.site > #content.site-content > .tg-container > .mycore-portal-body > #mycore-portal-root `.tg-container` and `.mycore-portal-body` were missing from this list, so any overflow on them re-broke sticky no matter what the sticky element itself did. */ body.mycore-portal-page #page, body.mycore-portal-page .site, body.mycore-portal-page #content, body.mycore-portal-page #content.site-content, body.mycore-portal-page .site-content, body.mycore-portal-page #primary, body.mycore-portal-page #main, body.mycore-portal-page .content-area, body.mycore-portal-page .tg-container, body.mycore-portal-page .mycore-portal-body { overflow: visible !important; } /* Flash sets `html { overflow-y: scroll }`. That normally propagates to the viewport harmlessly, but paired with an overflow on it makes BODY the scroll container instead — and then every `position: sticky` inside anchors to a box that never scrolls. Pin both back to the viewport on the portal page. */ html:has(body.mycore-portal-page) { overflow-y: auto !important; } body.mycore-portal-page { overflow: visible !important; /* ...but NOT horizontally. Clearing the theme's overflow off the whole ancestor chain above is what makes `position: sticky` work — and it also removed the thing that was quietly containing horizontal overflow, so any element a few pixels wider than the viewport started scrolling the entire page sideways. `overflow-x: clip` is the one value that stops that WITHOUT creating a scroll container: `hidden` or `auto` here would re-break sticky, which is the exact bug the rules above exist to fix. `clip` pairs legally with `overflow-y: visible`. */ overflow-x: clip !important; } h1 { font-size: 50px; } p { font-size: 16px; } /* Reset for portal body */ body.mycore-portal-body { margin: 0; padding: 0; background: var(--mc-bg); font-family: var(--mc-font); color: var(--mc-text); min-height: 100vh; -webkit-font-smoothing: antialiased; } /* ─── Root container ─────────────────────────────────────────────────────── */ #mycore-portal-root { min-height: 100vh; display: flex; flex-direction: column; } /* ─── Landing page ───────────────────────────────────────────────────────── */ .mc-landing { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 40px 20px; text-align: center; background: radial-gradient(ellipse at 20% 50%, rgba(163, 109, 245, 0.12) 0%, transparent 60%), radial-gradient(ellipse at 80% 30%, rgba(78, 201, 109, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(245, 166, 35, 0.08) 0%, transparent 50%), var(--mc-bg); } .mc-landing h1 { font-family: var(--mc-font-display); color: white; font-weight: 400; margin: 0 0 20px; line-height: 1.2; } .mc-landing h1 span { background: linear-gradient(135deg, var(--mc-green), var(--mc-blue), var(--mc-orange), var(--mc-red)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mc-landing-subtitle { color: var(--mc-text-muted); max-width: 600px; margin: 0 auto 40px; line-height: 1.7; } .mc-stats { display: flex; gap: 48px; margin-bottom: 48px; flex-wrap: wrap; justify-content: center; } .mc-stat { text-align: center; } .mc-stat-number { font-family: var(--mc-font-display); font-weight: 400; } .mc-stat:nth-child(1) .mc-stat-number { color: var(--mc-green); } .mc-stat:nth-child(2) .mc-stat-number { color: var(--mc-blue); } .mc-stat:nth-child(3) .mc-stat-number { color: var(--mc-orange); } .mc-stat-label { letter-spacing: 0.15em; text-transform: uppercase; color: var(--mc-text-muted); margin-top: 4px; } /* Required-field footnote under the privacy note — deliberately smaller than the 16px body copy so it reads as fine print, not as another sentence. */ .mc-required-note { color: var(--mc-text-muted); font-size: 13px; margin: 0; } /* ─── Email input row ────────────────────────────────────────────────────── */ .mc-email-row { display: grid; gap: 12px; align-items: stretch; justify-content: center; grid-template-columns: 2fr 1fr; } .mc-email-row input[type=email], .mc-email-row input.mc-authcode-input { padding: 14px 20px; border-radius: 50px; border: 1px solid var(--mc-border); background: var(--mc-bg-input); color: var(--mc-text); font-family: var(--mc-font); height: 57px; font-size: 16px; min-width: 280px; outline: none; transition: border-color var(--mc-transition); } .mc-email-row input[type=email]:focus, .mc-email-row input.mc-authcode-input:focus { border-color: var(--mc-accent); } .mc-email-row input[type=email]::placeholder, .mc-email-row input.mc-authcode-input::placeholder { color: var(--mc-text-muted); } .mc-intro-row { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--mc-border); display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 440px; margin-left: auto; margin-right: auto; } .mc-intro-row::before { content: "Don't have an Auth Code?"; color: var(--mc-text-muted); font-size: 15px; } /* "Take me to my profile" on the AuthCode splash. Sits below the intro row, so it only needs to clear it — no divider, that belongs to the intro row's heading. */ .mc-profile-row { margin-top: 70px; display: flex; justify-content: center; } /* ─── Admin debug helper (auto-fill assessment) ──────────────────────────── */ .mc-debug-btn { position: fixed; bottom: 20px; right: 20px; z-index: 10000; padding: 10px 16px; border-radius: 50px; border: 1px dashed var(--mc-accent); background: var(--mc-bg-mid); color: var(--mc-accent); font-family: var(--mc-font); font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: var(--mc-shadow); opacity: 0.85; transition: opacity var(--mc-transition), transform var(--mc-transition); } .mc-debug-btn:hover { opacity: 1; transform: translateY(-1px); } .mc-privacy-note { color: var(--mc-text-muted); margin-top: 16px; /* The required-note sits directly under this line as one block — no gap. */ margin-bottom: 0; } /* ─── Buttons ────────────────────────────────────────────────────────────── */ /* Left as bare classes on purpose. Elementor's global kit ships `.elementor-kit-1288 button { background-color: var(--e-global-color-accent); border-radius: 8px; padding: 22px }` at specificity (0,1,1), so it wins the sizing/shape here — and that resolved look is the one we want. Don't add an id prefix to these; it takes the buttons back to the pill shape below. */ .mc-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; border-radius: 50px; border: none; font-family: var(--mc-font); font-weight: 600; cursor: pointer; transition: all var(--mc-transition); text-decoration: none; } .mc-btn-primary { background: var(--mc-accent); color: #1a1225; } .mc-btn-primary:hover { background: var(--mc-accent-hover); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(245, 166, 35, 0.3); } .mc-btn-primary:active { transform: translateY(0); } .mc-btn-secondary { background: transparent; color: var(--mc-text); border: 1px solid var(--mc-border); } .mc-btn-secondary:hover { border-color: var(--mc-text-muted); background: rgba(255, 255, 255, 0.04); } /* Solid PREP blue. Sits next to the outlined secondary buttons so it reads as a different kind of action rather than another step in the survey flow. Scoped to the portal root on purpose: Elementor's global kit ships `.elementor-kit-1288 button { background-color: var(--e-global-color-accent) }`, which at (0,1,1) outranks a bare `.mc-btn-prep` and repaints the button its yellow. The id selector puts us back on top. */ #mycore-portal-root .mc-btn-prep { background: var(--mc-prep-blue); color: #fff; } #mycore-portal-root .mc-btn-prep:hover { background: var(--mc-prep-blue-hover); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(66, 67, 153, 0.4); } #mycore-portal-root .mc-btn-prep:active { transform: translateY(0); } .mc-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; } /* ─── Modal / Popup overlay ──────────────────────────────────────────────── */ .mc-overlay { position: fixed; inset: 0; background: rgba(10, 6, 18, 0.85); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; animation: mcFadeIn 0.3s ease; } .mc-modal { background: var(--mc-bg-mid); border-radius: var(--mc-radius-lg); padding: 40px; max-width: 440px; width: 100%; box-shadow: var(--mc-shadow); animation: mcSlideUp 0.35s ease; } .mc-modal h2 { font-family: var(--mc-font-display); margin: 0 0 8px; color: white; text-align: center; } .mc-modal-subtitle { color: var(--mc-text-muted); text-align: center; margin-bottom: 28px; line-height: 1.5; } .mc-modal .mc-btn { width: 100%; margin-top: 8px; } /* "New here? Create account" / "Already have an account? Log in" under the submit button in the landing start popup. */ .mc-modal-switch { text-align: center; margin: 16px 0 0; font-size: 15px; color: var(--mc-text-muted); } .mc-modal-switch a { color: var(--mc-accent); text-decoration: underline; cursor: pointer; } .mc-modal-footer { text-align: center; margin-top: 20px; font-size: 16px; color: var(--mc-text-muted); } .mc-modal-footer a { color: var(--mc-red); text-decoration: none; font-weight: 600; } /* Already-taken popup: login/register mode toggle link */ .mc-al-toggle { text-align: center; margin: 14px 0 0; font-size: 14px; color: var(--mc-text-muted); } .mc-al-toggle a { color: var(--mc-accent); text-decoration: none; font-weight: 600; } /* Survey pointers popup body — admin WYSIWYG copy, so style the tags it emits. Left aligned inside the centred modal: it's a list of pointers, not a headline. */ .mc-note-body { text-align: left; color: var(--mc-text-muted); line-height: 1.6; margin-bottom: 20px; } .mc-note-body p { margin: 0 0 14px; } .mc-note-body p:last-child { margin-bottom: 0; } .mc-note-body strong { color: var(--mc-text); } /* ─── Form fields ────────────────────────────────────────────────────────── */ .mc-field-group { margin-bottom: 18px; } .mc-field-group label { display: block; font-weight: 600; letter-spacing: 0.06em; font-size: 14px; text-transform: uppercase; color: var(--mc-text-muted); margin-bottom: 6px; } /* Field layout grid: fields default to a full row; inline flex-basis (set per field by its width %) lets two or more sit side by side. */ .mc-fields-grid { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: flex-start; } .mc-fields-grid > .mc-field-group { flex: 0 0 100%; } .mc-fields-grid > .mc-form-section-title { flex: 0 0 100%; } /* Password input with a show/hide eye button pinned inside its right edge. Scoped to the root id so it outranks the text-input rule's !important padding in _wheel.scss and Elementor's global `button` styling. */ #mycore-portal-root .mc-pw-wrap { position: relative; } #mycore-portal-root .mc-pw-wrap input { display: block; padding-right: 48px !important; } #mycore-portal-root .mc-pw-toggle { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0 var(--mc-radius) var(--mc-radius) 0; background: transparent; color: var(--mc-text-muted); box-shadow: none; cursor: pointer; transition: color var(--mc-transition); } #mycore-portal-root .mc-pw-toggle:hover, #mycore-portal-root .mc-pw-toggle:focus-visible { color: var(--mc-text); background: transparent; } #mycore-portal-root .mc-pw-toggle:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: -2px; } #mycore-portal-root .mc-pw-toggle svg { display: block; } /* ─── Scroll wheel picker ─────────────────────────────────────────────────── */ .mc-wheel { display: flex; align-items: center; gap: 6px; background: var(--mc-bg-input); border: 1px solid var(--mc-border); border-radius: var(--mc-radius); padding: 4px 6px; outline: none; } .mc-wheel:focus-within, .mc-wheel:focus { border-color: var(--mc-accent); } /* Scoped to the portal root: these are