/*! Massage Recruit — WordPress-ready static export * One stylesheet, no preprocessor. Values derive from the prototype's theme tokens. * Order: tokens · layout · components · home · listings/detail · events+CE * · form pages · marketing · booking · licensure · reviews · account * · utilities · responsive */ /* ========================================================================== Massage Recruit — Tokens, reset, base typography Values lifted verbatim from the prototype theme system (THEMES.navy). ========================================================================== */ :root { /* Surfaces */ --mr-bg: oklch(0.12 0.018 250); --mr-hero-top: oklch(0.16 0.025 255); --mr-surface: oklch(0.17 0.018 250); --mr-surface-raised: oklch(0.21 0.018 250); --mr-nav-bg: oklch(0.13 0.018 250 / 0.92); --mr-border: oklch(0.28 0.015 250); /* Text */ --mr-text-primary: oklch(0.95 0.008 250); --mr-text-secondary: oklch(0.70 0.010 250); --mr-text-muted: oklch(0.50 0.010 250); /* Brand */ --mr-green: #7DC243; --mr-green-subtle: rgba(125, 194, 67, 0.10); --mr-green-border: rgba(125, 194, 67, 0.28); /* Accents used by badges / job types */ --mr-blue: #63B3ED; --mr-blue-subtle: rgba(99, 179, 237, 0.12); --mr-blue-border: rgba(99, 179, 237, 0.25); --mr-orange: #F6AD55; --mr-orange-subtle: rgba(246, 173, 85, 0.12); --mr-purple: #C680E3; --mr-purple-subtle: rgba(198, 128, 227, 0.12); --mr-red: #f87171; /* Type */ --mr-font-display: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mr-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; /* Metrics */ --mr-nav-h: 68px; --mr-container: 1280px; --mr-radius-card: 14px; --mr-radius-btn: 10px; --mr-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.2); --mr-shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.4); --mr-shadow-search: 0 20px 60px rgba(0, 0, 0, 0.3); } /* Alternate palettes from the prototype's theme switcher. Apply to or : data-theme="charcoal" | data-theme="forest" */ [data-theme="charcoal"] { --mr-bg: oklch(0.13 0.006 60); --mr-hero-top: oklch(0.17 0.010 60); --mr-surface: oklch(0.18 0.006 60); --mr-surface-raised: oklch(0.22 0.006 60); --mr-nav-bg: oklch(0.14 0.006 60 / 0.92); --mr-border: oklch(0.30 0.006 60); --mr-text-primary: oklch(0.95 0.006 60); --mr-text-secondary: oklch(0.70 0.008 60); --mr-text-muted: oklch(0.50 0.006 60); } [data-theme="forest"] { --mr-bg: oklch(0.12 0.022 150); --mr-hero-top: oklch(0.16 0.030 145); --mr-surface: oklch(0.17 0.020 148); --mr-surface-raised: oklch(0.21 0.020 148); --mr-nav-bg: oklch(0.13 0.022 150 / 0.92); --mr-border: oklch(0.28 0.020 148); --mr-text-primary: oklch(0.95 0.010 150); --mr-text-secondary: oklch(0.70 0.012 148); --mr-text-muted: oklch(0.50 0.010 148); --mr-green: #90D455; --mr-green-subtle: rgba(144, 212, 85, 0.10); --mr-green-border: rgba(144, 212, 85, 0.28); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { scrollbar-width: thin; scrollbar-color: oklch(0.30 0.015 250) transparent; background: var(--mr-bg); font-family: var(--mr-font-body); color: var(--mr-text-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } button { font-family: inherit; } table { border-collapse: collapse; } /* ---------- Links ---------- */ a { color: var(--mr-green); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--mr-text-primary); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--mr-green); outline-offset: 2px; } /* ---------- Scrollbar ---------- */ /* width applies to vertical bars, height to horizontal ones — set both, or horizontal rails fall back to the light 16px platform default. */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: oklch(0.30 0.015 250); border-radius: 100px; } /* ---------- Form defaults ---------- */ input::placeholder, textarea::placeholder { color: oklch(0.45 0.010 250); } select option { background: var(--mr-surface); color: var(--mr-text-primary); } /* ---------- Typography scale ---------- */ .mr-h1 { font-family: var(--mr-font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 800; color: var(--mr-text-primary); line-height: 1.1; margin-bottom: 16px; text-wrap: balance; } .mr-h2 { font-family: var(--mr-font-display); font-size: 36px; font-weight: 800; color: var(--mr-text-primary); margin-bottom: 16px; text-wrap: balance; } .mr-page-title { font-family: var(--mr-font-display); font-size: 32px; font-weight: 800; color: var(--mr-text-primary); margin-bottom: 8px; } .mr-section-title { font-family: var(--mr-font-display); font-size: 24px; font-weight: 700; color: var(--mr-text-primary); } .mr-lede { font-family: var(--mr-font-body); font-size: 18px; color: var(--mr-text-secondary); max-width: 560px; margin: 0 auto 40px; text-wrap: pretty; } .mr-sub { font-family: var(--mr-font-body); font-size: 16px; color: var(--mr-text-secondary); text-wrap: pretty; } .mr-green { color: var(--mr-green); } .mr-center { text-align: center; } /* Accessibility helper */ .mr-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== Layout: header / nav / main / footer shells ========================================================================== */ .mr-page { min-height: 100vh; background: var(--mr-bg); padding-top: var(--mr-nav-h); } .mr-container { max-width: var(--mr-container); margin: 0 auto; padding: 0 24px; } .mr-section { max-width: var(--mr-container); margin: 0 auto; padding: 60px 24px; } .mr-section-narrow { max-width: 1200px; margin: 0 auto; padding: 40px 24px 80px; } .mr-section-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; } /* Utility: keep [hidden] authoritative over flex/grid display rules */ [hidden] { display: none !important; } /* ---------- Header / nav ---------- */ .mr-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--mr-nav-bg); border-bottom: 1px solid var(--mr-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .mr-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; height: var(--mr-nav-h); gap: 32px; } .mr-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; flex-shrink: 0; } .mr-logo:hover { color: inherit; } .mr-logo-mark { flex-shrink: 0; } .mr-logo-text { display: flex; flex-direction: column; line-height: 1; } .mr-logo-main { font-family: var(--mr-font-display); font-weight: 700; font-size: 16px; color: var(--mr-text-primary); letter-spacing: 2px; } .mr-logo-sub { font-family: var(--mr-font-display); font-weight: 400; font-size: 9px; color: var(--mr-green); letter-spacing: 3px; text-transform: uppercase; } .mr-nav-links { display: flex; align-items: center; gap: 4px; flex: 1; } .mr-nav-link { padding: 6px 14px; border-radius: 8px; font-family: var(--mr-font-body); font-size: 14px; font-weight: 500; color: var(--mr-text-secondary); cursor: pointer; border: none; background: none; transition: all 0.15s; text-decoration: none; white-space: nowrap; } .mr-nav-link:hover { color: var(--mr-text-primary); } .mr-nav-link[aria-current="page"], .mr-nav-link.is-active { color: var(--mr-green); background: var(--mr-green-subtle); } .mr-nav-actions { display: flex; align-items: center; gap: 10px; } .mr-auth-group { display: flex; align-items: center; gap: 10px; } /* Scroll reveal */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; } [data-reveal].is-revealed { opacity: 1; transform: none; } /* Mobile menu toggle — hidden on desktop */ .mr-nav-toggle { display: none; width: 40px; height: 40px; flex-shrink: 0; border-radius: 9px; border: 1px solid var(--mr-border); background: var(--mr-surface); cursor: pointer; padding: 0; place-items: center; } .mr-nav-toggle-bars { display: block; width: 18px; height: 2px; background: var(--mr-text-primary); position: relative; transition: background 0.15s; } .mr-nav-toggle-bars::before, .mr-nav-toggle-bars::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--mr-text-primary); transition: transform 0.2s; } .mr-nav-toggle-bars::before { top: -6px; } .mr-nav-toggle-bars::after { top: 6px; } .mr-nav-toggle[aria-expanded="true"] .mr-nav-toggle-bars { background: transparent; } .mr-nav-toggle[aria-expanded="true"] .mr-nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); } .mr-nav-toggle[aria-expanded="true"] .mr-nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); } /* ---------- Account menu ---------- */ .mr-user-wrap { position: relative; } .mr-user-btn { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; background: var(--mr-surface); border: 1px solid var(--mr-border); cursor: pointer; } .mr-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--mr-green); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; } .mr-user-name { font-size: 13px; font-weight: 500; color: var(--mr-text-primary); font-family: var(--mr-font-body); } .mr-caret { color: var(--mr-text-secondary); font-size: 10px; } .mr-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 200px; background: var(--mr-surface-raised); border: 1px solid var(--mr-border); border-radius: 12px; padding: 6px; box-shadow: var(--mr-shadow-pop); z-index: 120; } .mr-dropdown[hidden] { display: none; } .mr-drop-item { display: block; width: 100%; text-align: left; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: var(--mr-text-secondary); cursor: pointer; font-family: var(--mr-font-body); transition: all 0.12s; background: none; border: none; } .mr-drop-item:hover { background: var(--mr-surface); color: var(--mr-text-secondary); } .mr-drop-item.is-danger { color: var(--mr-red); } .mr-drop-sep { height: 1px; background: var(--mr-border); margin: 4px 0; } /* ---------- Footer ---------- */ .mr-footer { background: var(--mr-surface); border-top: 1px solid var(--mr-border); padding: 48px 24px 32px; } .mr-footer-inner { max-width: var(--mr-container); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } .mr-footer-col-title { font-family: var(--mr-font-display); font-size: 13px; font-weight: 700; color: var(--mr-text-primary); letter-spacing: 0.5px; margin-bottom: 14px; } .mr-footer-links { display: flex; flex-direction: column; gap: 9px; list-style: none; } .mr-footer-links a { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); transition: color 0.15s; } .mr-footer-links a:hover { color: var(--mr-green); } .mr-footer-blurb { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); margin-top: 14px; max-width: 280px; text-wrap: pretty; } .mr-footer-bottom { max-width: var(--mr-container); margin: 32px auto 0; padding-top: 20px; border-top: 1px solid var(--mr-border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); } .mr-footer-bottom a { color: var(--mr-text-muted); } .mr-footer-bottom a:hover { color: var(--mr-green); } /* ========================================================================== Reusable components: buttons, fields, cards, badges, chips, tabs, modal ========================================================================== */ /* ---------- Buttons ---------- */ .mr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--mr-font-body); font-size: 14px; font-weight: 500; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: all 0.15s; border: none; text-decoration: none; } .mr-btn-primary { padding: 8px 18px; background: var(--mr-green); color: #fff; font-weight: 600; border: none; } .mr-btn-primary:hover { opacity: 0.88; color: #fff; } .mr-btn-outline { padding: 8px 18px; border: 1.5px solid var(--mr-border); background: none; color: var(--mr-text-secondary); } .mr-btn-outline:hover { border-color: var(--mr-green); color: var(--mr-text-primary); } .mr-btn-ghost { padding: 8px 16px; background: var(--mr-surface-raised); border: 1px solid var(--mr-border); color: var(--mr-text-secondary); border-radius: 9px; font-weight: 600; } .mr-btn-ghost:hover { border-color: var(--mr-green); color: var(--mr-text-primary); } /* Large CTA buttons */ .mr-btn-lg { padding: 14px 32px; border-radius: 10px; font-family: var(--mr-font-display); font-size: 15px; font-weight: 700; } .mr-btn-lg.mr-btn-primary { background: var(--mr-green); color: #fff; } .mr-btn-lg.mr-btn-outline { border: 1.5px solid var(--mr-border); background: none; color: var(--mr-text-primary); } .mr-btn-search { padding: 12px 28px; border-radius: 10px; background: var(--mr-green); border: none; color: #fff; font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; } .mr-btn-search:hover { opacity: 0.88; } .mr-btn-wide { padding: 12px 32px; } .mr-btn-block { width: 100%; } .mr-btn-link { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-green); cursor: pointer; background: none; border: none; padding: 0; } .mr-btn-link:hover { text-decoration: underline; } /* ---------- Form fields ---------- */ .mr-field-group { margin-bottom: 16px; } .mr-label { display: block; font-family: var(--mr-font-body); font-size: 12.5px; font-weight: 700; color: var(--mr-text-secondary); margin-bottom: 7px; letter-spacing: 0.2px; } .mr-required { color: var(--mr-green); margin-left: 3px; } .mr-input, .mr-select, .mr-textarea { width: 100%; background: var(--mr-bg); border: 1px solid var(--mr-border); border-radius: 10px; padding: 11px 13px; color: var(--mr-text-primary); font-family: var(--mr-font-body); font-size: 14px; outline: none; transition: border-color 0.15s; } .mr-input:focus, .mr-select:focus, .mr-textarea:focus { border-color: var(--mr-green); } .mr-textarea { min-height: 74px; resize: vertical; line-height: 1.5; } .mr-field-row { display: flex; gap: 12px; flex-wrap: wrap; } .mr-field-half { flex: 1; min-width: 150px; } .mr-hint { font-family: var(--mr-font-body); font-size: 11.5px; color: var(--mr-text-muted); margin-top: 6px; text-wrap: pretty; } .mr-error { font-family: var(--mr-font-body); font-size: 12.5px; color: #ff7a6b; margin-top: 4px; } .mr-error[hidden] { display: none; } .mr-form-actions { display: flex; gap: 10px; margin-top: 22px; align-items: center; } /* ---------- Cards ---------- */ .mr-card { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: var(--mr-radius-card); padding: 20px; transition: all 0.2s; position: relative; } .mr-card-interactive { cursor: pointer; } .mr-card-interactive:hover { border-color: var(--mr-green-border); transform: translateY(-2px); box-shadow: var(--mr-shadow-card); } /* ---------- Job card ---------- */ .mr-job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; } .mr-job-grid.is-list { grid-template-columns: 1fr; } .mr-job-card { overflow: hidden; } .mr-job-featured { position: absolute; top: 12px; right: 12px; background: var(--mr-green-subtle); border: 1px solid var(--mr-green-border); border-radius: 100px; padding: 2px 10px; font-size: 10px; font-weight: 700; color: var(--mr-green); font-family: var(--mr-font-body); letter-spacing: 0.5px; } .mr-job-top { display: flex; gap: 14px; margin-bottom: 14px; align-items: flex-start; } .mr-job-logo { width: 44px; height: 44px; border-radius: 10px; background: var(--mr-surface-raised); border: 1px solid var(--mr-border); display: flex; align-items: center; justify-content: center; font-family: var(--mr-font-display); font-size: 12px; font-weight: 700; color: var(--mr-green); flex-shrink: 0; } .mr-job-title { font-family: var(--mr-font-display); font-size: 15px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 2px; } /* Card titles are links, but must not take the global green anchor colour — the prototype renders them in textPrimary and greens them on hover only. */ .mr-job-link { color: inherit; text-decoration: none; } .mr-job-link:hover { color: var(--mr-green); } .mr-job-company { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); } .mr-job-meta { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; } .mr-meta-item { display: flex; align-items: center; gap: 5px; font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); } .mr-job-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mr-border); } .mr-salary { font-family: var(--mr-font-display); font-size: 13px; font-weight: 700; color: var(--mr-text-primary); } .mr-posted { font-family: var(--mr-font-body); font-size: 11px; color: var(--mr-text-muted); } /* ---------- Tags & badges ---------- */ .mr-tags { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; } .mr-tag { padding: 3px 10px; border-radius: 100px; background: var(--mr-surface-raised); border: 1px solid var(--mr-border); font-family: var(--mr-font-body); font-size: 11px; color: var(--mr-text-secondary); } .mr-type-badge { padding: 3px 10px; border-radius: 100px; font-size: 11px; font-family: var(--mr-font-body); font-weight: 600; background: rgba(255, 255, 255, 0.06); color: #aaa; } .mr-type-badge[data-type="Full Time"] { background: rgba(125, 194, 67, 0.12); color: var(--mr-green); } .mr-type-badge[data-type="Part Time"] { background: var(--mr-blue-subtle); color: var(--mr-blue); } .mr-type-badge[data-type="Room Rental"] { background: var(--mr-orange-subtle); color: var(--mr-orange); } .mr-type-badge[data-type="Contract"] { background: var(--mr-purple-subtle); color: var(--mr-purple); } .mr-type-badge[data-type="Freelance"] { background: var(--mr-orange-subtle); color: var(--mr-orange); } .mr-type-badge[data-type="Per Diem"] { background: var(--mr-purple-subtle); color: var(--mr-purple); } .mr-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 100px; background: var(--mr-green-subtle); border: 1px solid var(--mr-green-border); font-family: var(--mr-font-body); font-size: 12px; font-weight: 600; color: var(--mr-green); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 24px; } .mr-community-badge { padding: 3px 11px; border-radius: 100px; background: var(--mr-green-subtle); border: 1px solid var(--mr-green-border); color: var(--mr-green); font-family: var(--mr-font-body); font-size: 11px; font-weight: 700; white-space: nowrap; } .mr-format-badge { display: inline-block; padding: 3px 10px; border-radius: 100px; background: var(--mr-blue-subtle); border: 1px solid var(--mr-blue-border); color: var(--mr-blue); font-size: 11px; font-weight: 600; font-family: var(--mr-font-body); margin-bottom: 12px; } /* ---------- Chips (filters) ---------- */ .mr-chips { display: flex; gap: 8px; flex-wrap: wrap; } .mr-chip { padding: 7px 13px; border-radius: 100px; background: var(--mr-bg); border: 1px solid var(--mr-border); color: var(--mr-text-secondary); font-family: var(--mr-font-body); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all 0.14s; } .mr-chip:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-chip[aria-pressed="true"], .mr-chip.is-active { background: var(--mr-green-subtle); border-color: var(--mr-green); color: var(--mr-green); font-weight: 700; } /* ---------- Tabs ---------- */ .mr-tab-row { display: flex; gap: 4px; background: var(--mr-surface); border-radius: 10px; padding: 4px; border: 1px solid var(--mr-border); width: fit-content; } .mr-tab { padding: 8px 20px; border-radius: 8px; font-family: var(--mr-font-body); font-size: 13px; font-weight: 500; cursor: pointer; border: none; background: none; color: var(--mr-text-secondary); transition: all 0.15s; } .mr-tab:hover { color: var(--mr-text-primary); } .mr-tab[aria-selected="true"] { background: var(--mr-green); color: #fff; } .mr-tab-panel[hidden] { display: none; } /* ---------- Modal ---------- */ .mr-modal { position: fixed; inset: 0; z-index: 4000; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 48px 20px; } .mr-modal[hidden] { display: none; } .mr-modal-dialog { width: 100%; max-width: 560px; background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); overflow: hidden; } .mr-modal-head { padding: 22px 26px; border-bottom: 1px solid var(--mr-border); display: flex; align-items: flex-start; gap: 14px; } .mr-modal-title { font-family: var(--mr-font-display); font-size: 19px; font-weight: 800; color: var(--mr-text-primary); } .mr-modal-sub { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); margin-top: 3px; text-wrap: pretty; } .mr-modal-close { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: var(--mr-surface-raised); border: 1px solid var(--mr-border); color: var(--mr-text-secondary); font-size: 16px; cursor: pointer; line-height: 1; } .mr-modal-close:hover { color: var(--mr-text-primary); border-color: var(--mr-green-border); } .mr-modal-body { padding: 22px 26px 26px; } /* ---------- Empty state ---------- */ .mr-empty { text-align: center; padding: 40px 0; color: var(--mr-text-muted); font-family: var(--mr-font-body); font-size: 14px; } .mr-empty-icon { display: block; font-size: 40px; margin-bottom: 12px; } /* ---------- Toast ---------- */ .mr-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); background: var(--mr-surface-raised); border: 1px solid var(--mr-green-border); color: var(--mr-text-primary); font-family: var(--mr-font-body); font-size: 13.5px; padding: 12px 20px; border-radius: 100px; box-shadow: var(--mr-shadow-pop); opacity: 0; pointer-events: none; transition: opacity 0.22s, transform 0.22s; z-index: 5000; } .mr-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ========================================================================== Home page sections: hero, search, stats, featured, steps, CE, CTA ========================================================================== */ .mr-hero { padding: 80px 24px 60px; background: linear-gradient(160deg, var(--mr-hero-top) 0%, var(--mr-bg) 100%); text-align: center; } .mr-hero-compact { padding: 56px 24px 36px; text-align: center; } .mr-search-box { max-width: 780px; margin: 0 auto 40px; background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 16px; padding: 12px; display: flex; gap: 8px; flex-wrap: wrap; box-shadow: var(--mr-shadow-search); } .mr-search-field { flex: 1; min-width: 140px; display: flex; align-items: center; gap: 10px; background: var(--mr-surface-raised); border-radius: 10px; padding: 10px 14px; border: 1px solid var(--mr-border); transition: border-color 0.15s; } .mr-search-field:focus-within { border-color: var(--mr-green-border); } .mr-search-field-fixed { flex: 0 0 auto; } .mr-search-icon { color: var(--mr-text-muted); font-size: 16px; flex-shrink: 0; } .mr-search-input { background: none; border: none; outline: none; width: 100%; font-family: var(--mr-font-body); font-size: 14px; color: var(--mr-text-primary); } .mr-radius-select { background: none; border: none; outline: none; font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); cursor: pointer; } .mr-stats { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; } .mr-stat { text-align: center; } .mr-stat-num { font-family: var(--mr-font-display); font-size: 28px; font-weight: 800; color: var(--mr-green); display: block; } .mr-stat-label { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); } /* ---------- How it works ---------- */ .mr-how { background: var(--mr-surface); border-top: 1px solid var(--mr-border); border-bottom: 1px solid var(--mr-border); padding: 60px 24px; } .mr-how-inner { max-width: var(--mr-container); margin: 0 auto; } .mr-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; margin-top: 40px; } .mr-step { text-align: center; } .mr-step-num { width: 48px; height: 48px; border-radius: 50%; background: var(--mr-green-subtle); border: 2px solid var(--mr-green-border); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-family: var(--mr-font-display); font-size: 18px; font-weight: 800; color: var(--mr-green); } .mr-step-title { font-family: var(--mr-font-display); font-size: 16px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 8px; } .mr-step-desc { font-family: var(--mr-font-body); font-size: 14px; color: var(--mr-text-secondary); text-wrap: pretty; } /* ---------- CE teaser cards ---------- */ .mr-ce-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .mr-ce-card { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: var(--mr-radius-card); padding: 20px; cursor: pointer; transition: all 0.2s; } .mr-ce-card:hover { border-color: var(--mr-green-border); transform: translateY(-2px); } .mr-ce-title { font-family: var(--mr-font-display); font-size: 15px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 6px; } .mr-ce-provider { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); margin-bottom: 14px; } .mr-ce-foot { display: flex; justify-content: space-between; align-items: center; } .mr-ce-date { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); } .mr-ce-price { font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; color: var(--mr-green); } /* ---------- Closing CTA ---------- */ .mr-cta { background: linear-gradient(135deg, var(--mr-hero-top), var(--mr-bg)); border-top: 1px solid var(--mr-border); padding: 80px 24px; text-align: center; } .mr-cta-inner { max-width: 640px; margin: 0 auto; } .mr-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; } /* ========================================================================== Job listings index + single job detail ========================================================================== */ /* ---------- Listings top bar ---------- */ .mr-listing-page { display: flex; flex-direction: column; } .mr-topbar { background: var(--mr-surface); border-bottom: 1px solid var(--mr-border); padding: 16px 24px; } .mr-topbar-inner { max-width: 1280px; margin: 0 auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .mr-topbar-field { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px; background: var(--mr-bg); border-radius: 10px; padding: 10px 14px; border: 1px solid var(--mr-border); transition: border-color 0.15s; } .mr-topbar-field:focus-within { border-color: var(--mr-green-border); } .mr-select-sm { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 8px; padding: 6px 10px; color: var(--mr-text-primary); font-family: var(--mr-font-body); font-size: 13px; outline: none; cursor: pointer; } .mr-select-radius { min-width: 80px; } .mr-btn-search-sm { padding: 10px 24px; border-radius: 10px; background: var(--mr-green); border: none; color: #fff; font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity 0.15s; } .mr-btn-search-sm:hover { opacity: 0.88; } .mr-btn-filters { padding: 10px 24px; border-radius: 10px; background: var(--mr-surface); border: 1px solid var(--mr-border); color: var(--mr-text-secondary); font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; cursor: pointer; } .mr-btn-filters:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-agg-banner { max-width: 1280px; margin: 12px auto 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); } .mr-agg-live { display: inline-flex; align-items: center; gap: 6px; color: var(--mr-green); font-weight: 700; } .mr-agg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mr-green); display: inline-block; animation: mr-pulse 2s ease-in-out infinite; } @keyframes mr-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } } /* ---------- Listings body ---------- */ .mr-listing-body { display: flex; flex: 1; max-width: 1280px; margin: 0 auto; width: 100%; padding: 24px; gap: 24px; } .mr-filter-sidebar { width: 260px; flex-shrink: 0; overflow: hidden; transition: width 0.25s; } .mr-filter-sidebar[data-open="false"] { width: 0; } .mr-filter-sidebar-inner { width: 260px; } .mr-filter-section { margin-bottom: 24px; } .mr-filter-title { font-family: var(--mr-font-display); font-size: 12px; font-weight: 700; color: var(--mr-text-muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; } .mr-check-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; background: none; border: none; width: 100%; text-align: left; } .mr-check-box { width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--mr-border); background: none; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: transparent; font-size: 10px; font-weight: 900; transition: all 0.14s; } .mr-check-row input { position: absolute; opacity: 0; pointer-events: none; } .mr-check-row input:checked + .mr-check-box { border-color: var(--mr-green); background: var(--mr-green); color: #fff; } .mr-check-row input:focus-visible + .mr-check-box { outline: 2px solid var(--mr-green); outline-offset: 2px; } .mr-check-label { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); } .mr-check-row:hover .mr-check-label { color: var(--mr-text-primary); } .mr-clear-filters { width: 100%; padding: 9px; border-radius: 10px; background: none; border: 1px solid var(--mr-border); color: var(--mr-text-secondary); font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; cursor: pointer; } .mr-clear-filters:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-clear-filters[hidden] { display: none; } .mr-results { flex: 1; min-width: 0; } .mr-results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; } .mr-results-count { font-family: var(--mr-font-display); font-size: 15px; font-weight: 700; color: var(--mr-text-primary); } .mr-sort-row { display: flex; align-items: center; gap: 8px; } .mr-sort-label { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); } .mr-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .mr-results-grid.is-list { grid-template-columns: 1fr; } .mr-result-card { padding: 18px; } .mr-result-head { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-start; } .mr-result-head-text { flex: 1; min-width: 0; } .mr-result-card.is-featured .mr-result-head-text { padding-right: 70px; } .mr-source-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .mr-source-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 100px; font-family: var(--mr-font-body); font-size: 10px; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--pill) 9%, transparent); border: 1px solid color-mix(in srgb, var(--pill) 27%, transparent); color: var(--pill); --pill: var(--mr-text-muted); } .mr-source-pill .mr-via { font-size: 9px; opacity: 0.85; } .mr-card-actions { display: flex; gap: 8px; align-items: center; } .mr-save-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--mr-border); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--mr-text-muted); transition: all 0.15s; } .mr-save-btn:hover { border-color: var(--mr-green-border); color: var(--mr-green); } .mr-save-btn[aria-pressed="true"] { border-color: var(--mr-green); color: var(--mr-green); } .mr-apply-btn { padding: 6px 16px; border-radius: 8px; background: var(--mr-green); border: none; color: #fff; font-family: var(--mr-font-display); font-size: 12px; font-weight: 700; cursor: pointer; transition: opacity 0.15s; } .mr-apply-btn:hover { opacity: 0.88; } .mr-no-results { padding: 64px 24px; text-align: center; color: var(--mr-text-muted); font-family: var(--mr-font-body); } .mr-no-results-title { font-family: var(--mr-font-display); font-size: 16px; font-weight: 700; color: var(--mr-text-secondary); margin-bottom: 6px; } /* ---------- Pagination ---------- */ .mr-pagination { display: flex; gap: 6px; margin-top: 32px; justify-content: center; flex-wrap: wrap; } .mr-pagination[hidden] { display: none; } .mr-page-btn { min-width: 36px; height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--mr-border); background: none; color: var(--mr-text-secondary); font-family: var(--mr-font-body); font-size: 13px; cursor: pointer; transition: all 0.15s; } .mr-page-btn:hover:not(:disabled) { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-page-btn:disabled { opacity: 0.5; cursor: default; color: var(--mr-text-muted); } .mr-page-btn[aria-current="page"] { background: var(--mr-green); border-color: var(--mr-green); color: #fff; } .mr-page-ellipsis { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--mr-text-muted); font-family: var(--mr-font-body); } /* ========================================================================== Single job detail ========================================================================== */ .mr-breadcrumb { max-width: 1100px; margin: 0 auto; padding: 16px 24px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .mr-breadcrumb a, .mr-breadcrumb span { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-muted); } .mr-breadcrumb a:hover { color: var(--mr-green); } .mr-breadcrumb [aria-current="page"] { color: var(--mr-text-secondary); } .mr-detail-body { max-width: 1100px; margin: 0 auto; padding: 0 24px 60px; display: grid; grid-template-columns: 1fr 340px; gap: 28px; } .mr-detail-header { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 16px; padding: 28px; margin-bottom: 20px; } .mr-logo-lg { width: 64px; height: 64px; border-radius: 14px; background: var(--mr-surface-raised); border: 1px solid var(--mr-border); display: flex; align-items: center; justify-content: center; font-family: var(--mr-font-display); font-size: 20px; font-weight: 800; color: var(--mr-green); margin-bottom: 16px; } .mr-detail-title { font-family: var(--mr-font-display); font-size: 26px; font-weight: 800; color: var(--mr-text-primary); margin-bottom: 4px; } .mr-detail-company { font-family: var(--mr-font-body); font-size: 16px; color: var(--mr-text-secondary); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mr-rating-badge { background: rgba(125, 194, 67, 0.12); border: 1px solid rgba(125, 194, 67, 0.25); border-radius: 100px; padding: 2px 10px; font-size: 12px; color: var(--mr-green); font-family: var(--mr-font-body); } .mr-detail-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; } .mr-detail-meta-item { display: flex; align-items: center; gap: 6px; font-family: var(--mr-font-body); font-size: 14px; color: var(--mr-text-secondary); } .mr-detail-cta { display: flex; gap: 10px; flex-wrap: wrap; } .mr-btn-apply-lg { flex: 1; min-width: 180px; padding: 13px 0; border-radius: 10px; background: var(--mr-green); border: none; color: #fff; font-family: var(--mr-font-display); font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.2s; } .mr-btn-apply-lg:hover { opacity: 0.9; } .mr-btn-apply-lg.is-applied { background: var(--mr-surface-raised); border: 1px solid var(--mr-border); color: var(--mr-text-secondary); cursor: default; } .mr-btn-apply-lg.is-applied:hover { opacity: 1; } .mr-btn-save-lg, .mr-btn-share-lg { padding: 13px 20px; border-radius: 10px; border: 1.5px solid var(--mr-border); background: none; color: var(--mr-text-secondary); font-family: var(--mr-font-body); font-size: 14px; cursor: pointer; transition: all 0.2s; } .mr-btn-save-lg:hover, .mr-btn-share-lg:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-btn-save-lg[aria-pressed="true"] { border-color: var(--mr-green); color: var(--mr-green); } .mr-detail-tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid var(--mr-border); /* overflow-y must be explicit: with only overflow-x set it computes to auto, and the -1px tab offset then triggers a 1px vertical scrollbar stub. */ overflow-x: auto; overflow-y: hidden; } .mr-detail-tab { padding: 10px 20px; font-family: var(--mr-font-body); font-size: 14px; font-weight: 400; color: var(--mr-text-secondary); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.15s; margin-bottom: -1px; white-space: nowrap; } .mr-detail-tab:hover { color: var(--mr-text-primary); } .mr-detail-tab[aria-selected="true"] { font-weight: 600; color: var(--mr-green); border-bottom-color: var(--mr-green); } .mr-detail-content { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 16px; padding: 24px; } .mr-detail-content p { font-family: var(--mr-font-body); font-size: 15px; color: var(--mr-text-secondary); line-height: 1.7; margin-bottom: 16px; } .mr-detail-content h3 { font-family: var(--mr-font-display); font-size: 16px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 12px; margin-top: 24px; } .mr-detail-content h3:first-child { margin-top: 0; } .mr-bullet-list { padding-left: 0; list-style: none; margin: 0; } .mr-bullet-list li { font-family: var(--mr-font-body); font-size: 14px; color: var(--mr-text-secondary); margin-bottom: 8px; padding-left: 20px; position: relative; } .mr-bullet-list li::before { content: '•'; position: absolute; left: 0; color: var(--mr-green); } .mr-fact-row { display: flex; gap: 20px; flex-wrap: wrap; } .mr-fact { background: var(--mr-surface-raised); border: 1px solid var(--mr-border); border-radius: 10px; padding: 12px 16px; } .mr-fact-key { font-family: var(--mr-font-body); font-size: 11px; color: var(--mr-text-muted); margin-bottom: 4px; } .mr-fact-val { font-family: var(--mr-font-display); font-size: 15px; font-weight: 700; color: var(--mr-text-primary); } .mr-review-item { padding: 16px 0; border-bottom: 1px solid var(--mr-border); } .mr-review-item:last-child { border-bottom: none; } .mr-review-head { display: flex; justify-content: space-between; margin-bottom: 6px; gap: 12px; } .mr-review-name { font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; color: var(--mr-text-primary); } .mr-review-stars { color: var(--mr-green); font-size: 14px; } /* ---------- Detail sidebar ---------- */ .mr-side-card { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 16px; padding: 20px; margin-bottom: 16px; } .mr-side-title { font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 14px; } .mr-benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; list-style: none; } .mr-benefit { background: var(--mr-surface-raised); border: 1px solid var(--mr-border); border-radius: 8px; padding: 8px 10px; font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-secondary); } .mr-company-row { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } .mr-company-logo { width: 48px; height: 48px; border-radius: 10px; background: var(--mr-surface-raised); border: 1px solid var(--mr-border); display: flex; align-items: center; justify-content: center; font-family: var(--mr-font-display); font-size: 14px; font-weight: 800; color: var(--mr-green); } .mr-company-name { font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; color: var(--mr-text-primary); } .mr-company-meta { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-secondary); } .mr-view-company { width: 100%; padding: 10px; border-radius: 10px; border: 1.5px solid var(--mr-border); background: none; color: var(--mr-text-secondary); font-family: var(--mr-font-body); font-size: 13px; cursor: pointer; margin-top: 12px; transition: all 0.15s; } .mr-view-company:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-similar-job { display: block; padding: 12px 0; border-bottom: 1px solid var(--mr-border); cursor: pointer; text-decoration: none; } .mr-similar-job:last-child { border-bottom: none; } .mr-similar-title { font-family: var(--mr-font-display); font-size: 13px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 2px; } .mr-similar-job:hover .mr-similar-title { color: var(--mr-green); } .mr-similar-company { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-secondary); margin-bottom: 4px; } .mr-similar-meta { font-family: var(--mr-font-body); font-size: 11px; color: var(--mr-text-muted); } /* ---------- Apply modal (centered variant) ---------- */ .mr-modal-center { align-items: center; padding: 24px; } .mr-modal-center .mr-modal-dialog { background: var(--mr-surface-raised); border-radius: 20px; padding: 32px; max-width: 500px; width: 90%; } .mr-dropzone { border: 2px dashed var(--mr-border); border-radius: 10px; padding: 20px; text-align: center; color: var(--mr-text-muted); font-family: var(--mr-font-body); font-size: 13px; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .mr-dropzone:hover, .mr-dropzone.is-dragover { border-color: var(--mr-green); color: var(--mr-green); } /* ========================================================================== Events calendar + CE class schedule ========================================================================== */ /* ---------- Events ---------- */ .mr-events-hero { background: linear-gradient(160deg, var(--mr-hero-top), var(--mr-bg)); border-bottom: 1px solid var(--mr-border); padding: 56px 24px 36px; text-align: center; } .mr-eyebrow-sm { display: inline-block; padding: 4px 14px; border-radius: 100px; background: var(--mr-green-subtle); border: 1px solid var(--mr-green-border); font-family: var(--mr-font-body); font-size: 12px; font-weight: 700; color: var(--mr-green); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px; } .mr-hero-title { font-family: var(--mr-font-display); font-size: clamp(30px, 5vw, 44px); font-weight: 800; color: var(--mr-text-primary); margin-bottom: 12px; letter-spacing: -0.5px; text-wrap: balance; } .mr-hero-sub { font-family: var(--mr-font-body); font-size: 16px; color: var(--mr-text-secondary); max-width: 620px; margin: 0 auto; text-wrap: pretty; } .mr-add-btn { margin-top: 22px; padding: 11px 22px; border-radius: 100px; background: var(--mr-green); border: none; color: #fff; font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity 0.15s; } .mr-add-btn:hover { opacity: 0.88; } .mr-events-body { max-width: 980px; margin: 0 auto; padding: 32px 24px 80px; } .mr-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; justify-content: center; } .mr-filter-btn { padding: 7px 16px; border-radius: 100px; background: var(--mr-surface); border: 1px solid var(--mr-border); color: var(--mr-text-secondary); font-family: var(--mr-font-body); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; } .mr-filter-btn:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-filter-btn[aria-pressed="true"] { background: var(--mr-green-subtle); border-color: var(--mr-green-border); color: var(--mr-green); font-weight: 700; } .mr-event-list { display: flex; flex-direction: column; gap: 14px; } .mr-event-card { --evt: var(--mr-green); background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 16px; padding: 20px 24px; display: flex; gap: 22px; align-items: flex-start; transition: all 0.18s; } .mr-event-card:hover { border-color: color-mix(in srgb, var(--evt) 53%, transparent); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25); } .mr-date-box { width: 76px; flex-shrink: 0; text-align: center; background: var(--mr-surface-raised); border: 1px solid var(--mr-border); border-radius: 12px; padding: 12px 6px; border-top: 3px solid var(--evt, var(--mr-green)); } .mr-date-mon { display: block; font-family: var(--mr-font-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--mr-text-muted); } .mr-date-day { display: block; font-family: var(--mr-font-display); font-size: 26px; font-weight: 800; color: var(--mr-text-primary); line-height: 1.1; } .mr-date-yr { display: block; font-family: var(--mr-font-body); font-size: 11px; color: var(--mr-text-muted); } .mr-event-content { flex: 1; min-width: 0; } .mr-event-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .mr-event-title { font-family: var(--mr-font-display); font-size: 18px; font-weight: 800; color: var(--mr-text-primary); } .mr-event-type { padding: 3px 11px; border-radius: 100px; background: color-mix(in srgb, var(--evt) 12%, transparent); border: 1px solid color-mix(in srgb, var(--evt) 33%, transparent); color: var(--evt); font-family: var(--mr-font-body); font-size: 11px; font-weight: 700; white-space: nowrap; } .mr-event-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; } .mr-event-meta-item { display: flex; align-items: center; gap: 6px; font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); } .mr-event-notes { font-family: var(--mr-font-body); font-size: 13.5px; color: var(--mr-text-muted); line-height: 1.55; margin-bottom: 14px; text-wrap: pretty; } .mr-event-reg { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 9px; background: var(--mr-green); border: none; color: #fff; font-family: var(--mr-font-display); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; transition: opacity 0.15s; } .mr-event-reg:hover { opacity: 0.88; color: #fff; } .mr-event-reg.is-tba { background: var(--mr-border); cursor: default; } .mr-event-reg.is-tba:hover { opacity: 1; } /* ---------- CE schedule module ---------- */ .mr-ce-wrap { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 16px; overflow: hidden; margin-bottom: 32px; } .mr-ce-header { padding: 20px 24px; border-bottom: 1px solid var(--mr-border); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .mr-ce-header-title { font-family: var(--mr-font-display); font-size: 16px; font-weight: 800; color: var(--mr-text-primary); flex: 1; } .mr-verified-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 100px; background: var(--mr-green-subtle); border: 1px solid var(--mr-green-border); font-family: var(--mr-font-body); font-size: 11px; font-weight: 700; color: var(--mr-green); } .mr-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mr-green); display: inline-block; } .mr-ce-count { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); } .mr-ce-add { padding: 8px 16px; border-radius: 9px; background: var(--mr-green); border: none; color: #fff; font-family: var(--mr-font-display); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; } .mr-ce-add:hover { opacity: 0.88; } .mr-ce-controls { padding: 16px 24px; background: var(--mr-surface-raised); border-bottom: 1px solid var(--mr-border); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .mr-ce-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; background: var(--mr-bg); border: 1px solid var(--mr-border); border-radius: 10px; padding: 9px 14px; transition: border-color 0.15s; } .mr-ce-search:focus-within { border-color: var(--mr-green-border); } .mr-ce-select { background: var(--mr-bg); border: 1px solid var(--mr-border); border-radius: 10px; padding: 9px 12px; color: var(--mr-text-primary); font-family: var(--mr-font-body); font-size: 13px; outline: none; cursor: pointer; } /* Provider is a 36-option single-select. As chips it wrapped to 12 rows (448px) — any height cap clipped chips mid-glyph and spawned a scrollbar. A select matches the month filter beside it and costs one row of height. */ .mr-ce-select-provider { min-width: 220px; max-width: 100%; } .mr-ce-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 0; } .mr-ce-item { padding: 18px 24px; border-bottom: 1px solid var(--mr-border); border-right: 1px solid var(--mr-border); display: flex; gap: 16px; transition: background 0.15s; } .mr-ce-item:hover { background: var(--mr-surface-raised); } .mr-ce-date { width: 58px; flex-shrink: 0; text-align: center; background: var(--mr-surface-raised); border: 1px solid var(--mr-border); border-radius: 10px; padding: 8px 4px; align-self: flex-start; } .mr-ce-date.is-online { background: var(--mr-green-subtle); border-color: var(--mr-green-border); } .mr-ce-date-globe { display: block; font-size: 18px; line-height: 1.2; } .mr-ce-date-mon { display: block; font-family: var(--mr-font-body); font-size: 10px; font-weight: 700; color: var(--mr-green); text-transform: uppercase; letter-spacing: 1px; } .mr-ce-date.is-online .mr-ce-date-mon { margin-top: 2px; } .mr-ce-date-day { display: block; font-family: var(--mr-font-display); font-size: 20px; font-weight: 800; color: var(--mr-text-primary); line-height: 1.1; } .mr-ce-body { flex: 1; min-width: 0; } .mr-ce-item-title { font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 4px; } .mr-provider-pill { --pv: var(--mr-green); display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 100px; background: color-mix(in srgb, var(--pv) 9%, transparent); border: 1px solid color-mix(in srgb, var(--pv) 27%, transparent); font-family: var(--mr-font-body); font-size: 11px; font-weight: 700; color: var(--pv, var(--mr-green)); } .mr-ce-meta { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); display: flex; align-items: center; gap: 5px; margin-top: 6px; } .mr-ce-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; list-style: none; } .mr-ce-tag { padding: 2px 8px; border-radius: 100px; background: var(--mr-surface-raised); border: 1px solid var(--mr-border); font-family: var(--mr-font-body); font-size: 10px; color: var(--mr-text-secondary); } .mr-ce-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; flex-wrap: wrap; } .mr-ce-hours { font-family: var(--mr-font-display); font-size: 12px; font-weight: 700; color: var(--mr-green); } .mr-ce-reg { padding: 6px 14px; border-radius: 8px; background: var(--mr-green); border: none; color: #fff; font-family: var(--mr-font-display); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; transition: opacity 0.15s; } .mr-ce-reg:hover { opacity: 0.88; color: #fff; } .mr-ce-reg.is-contact { background: var(--mr-border); cursor: default; } .mr-ce-reg.is-contact:hover { opacity: 1; } .mr-ce-contact { font-family: var(--mr-font-body); font-size: 11px; color: var(--mr-text-muted); margin-top: 8px; } .mr-ce-empty { padding: 48px 24px; text-align: center; color: var(--mr-text-muted); font-family: var(--mr-font-body); } .mr-ce-empty-icon { display: block; font-size: 32px; margin-bottom: 10px; } /* ========================================================================== Form-led pages: auth, post a job, job alerts ========================================================================== */ /* ---------- Auth ---------- */ .mr-auth-page { display: flex; align-items: center; justify-content: center; padding: 80px 24px; min-height: 100vh; } .mr-auth-card { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 20px; padding: 40px; width: 100%; max-width: 460px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); } .mr-auth-logo { text-align: center; margin-bottom: 28px; } .mr-auth-logo-inner { display: inline-flex; align-items: center; gap: 10px; } .mr-auth-wordmark { font-family: var(--mr-font-display); font-size: 18px; font-weight: 800; color: var(--mr-text-primary); letter-spacing: 2px; } .mr-auth-title { font-family: var(--mr-font-display); font-size: 24px; font-weight: 800; color: var(--mr-text-primary); text-align: center; margin-bottom: 6px; } .mr-auth-sub { font-family: var(--mr-font-body); font-size: 14px; color: var(--mr-text-secondary); text-align: center; margin-bottom: 28px; } .mr-segmented { display: flex; gap: 0; margin-bottom: 24px; background: var(--mr-bg); border-radius: 10px; padding: 4px; border: 1px solid var(--mr-border); } .mr-segmented-btn { flex: 1; padding: 10px; border-radius: 8px; font-family: var(--mr-font-display); font-size: 13px; font-weight: 400; color: var(--mr-text-secondary); background: none; border: none; cursor: pointer; transition: all 0.15s; } .mr-segmented-btn:hover { color: var(--mr-text-primary); } .mr-segmented-btn[aria-pressed="true"], .mr-segmented-btn[aria-selected="true"] { background: var(--mr-green); color: #fff; font-weight: 700; } .mr-auth-forgot { text-align: right; margin-bottom: 4px; } .mr-link-green { color: var(--mr-green); cursor: pointer; font-weight: 600; font-family: var(--mr-font-body); font-size: 13px; } .mr-btn-full { width: 100%; padding: 13px; border-radius: 10px; background: var(--mr-green); border: none; color: #fff; font-family: var(--mr-font-display); font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 8px; transition: opacity 0.15s; } .mr-btn-full:hover { opacity: 0.9; } .mr-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; } .mr-divider::before, .mr-divider::after { content: ''; flex: 1; height: 1px; background: var(--mr-border); } .mr-divider span { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); } .mr-social-btn { width: 100%; padding: 12px; border-radius: 10px; border: 1.5px solid var(--mr-border); background: none; color: var(--mr-text-secondary); font-family: var(--mr-font-body); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; transition: all 0.15s; } .mr-social-btn:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-auth-switch { text-align: center; margin-top: 20px; font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-muted); } .mr-notice { background: var(--mr-green-subtle); border: 1px solid var(--mr-green-border); border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-green); } /* ---------- Narrow form page shell ---------- */ .mr-form-page { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; } .mr-form-page-wide { max-width: 860px; } .mr-page-heading { font-family: var(--mr-font-display); font-size: 28px; font-weight: 800; color: var(--mr-text-primary); margin-bottom: 4px; } .mr-page-sub { font-family: var(--mr-font-body); font-size: 15px; color: var(--mr-text-secondary); margin-bottom: 36px; } .mr-form-card { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 16px; padding: 28px; margin-bottom: 20px; } .mr-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ---------- Stepper ---------- */ .mr-stepper { display: flex; gap: 0; margin-bottom: 40px; list-style: none; } .mr-step-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; } .mr-step-item:not(:last-child)::after { content: ''; position: absolute; top: 18px; left: 50%; width: 100%; height: 2px; background: var(--mr-border); z-index: 0; } .mr-step-item.is-active:not(:last-child)::after { background: var(--mr-green); } .mr-step-dot { width: 36px; height: 36px; border-radius: 50%; background: var(--mr-surface); border: 2px solid var(--mr-border); display: flex; align-items: center; justify-content: center; font-family: var(--mr-font-display); font-size: 13px; font-weight: 700; color: var(--mr-text-muted); z-index: 1; transition: all 0.2s; } .mr-step-item.is-active .mr-step-dot { background: var(--mr-green); border-color: var(--mr-green); color: #fff; } .mr-step-label { font-family: var(--mr-font-body); font-size: 11px; font-weight: 400; color: var(--mr-text-muted); text-align: center; } .mr-step-item.is-active .mr-step-label { font-weight: 600; color: var(--mr-text-primary); } .mr-wizard-footer { display: flex; gap: 12px; justify-content: space-between; } .mr-btn-back { padding: 12px 28px; border-radius: 10px; border: 1.5px solid var(--mr-border); background: none; color: var(--mr-text-secondary); font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; cursor: pointer; } .mr-btn-back:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-btn-next { padding: 12px 32px; border-radius: 10px; background: var(--mr-green); border: none; color: #fff; font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity 0.15s; } .mr-btn-next:hover { opacity: 0.9; } /* ---------- Switch toggle ---------- */ .mr-switch-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .mr-switch { width: 44px; height: 24px; border-radius: 100px; background: var(--mr-border); position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; border: none; padding: 0; } .mr-switch::after { content: ''; width: 18px; height: 18px; border-radius: 50%; background: #fff; position: absolute; top: 3px; left: 3px; transition: left 0.2s; } .mr-switch[aria-checked="true"] { background: var(--mr-green); } .mr-switch[aria-checked="true"]::after { left: 23px; } .mr-switch-label { font-family: var(--mr-font-body); font-size: 14px; color: var(--mr-text-secondary); } /* Chips on a raised surface (post-job / alerts) */ .mr-chip-raised { background: var(--mr-surface-raised); } /* ---------- Job alerts ---------- */ .mr-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 32px; } .mr-stat-box { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 12px; padding: 16px; text-align: center; } .mr-stat-val { font-family: var(--mr-font-display); font-size: 24px; font-weight: 800; color: var(--mr-green); display: block; } .mr-stat-lab { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-secondary); } .mr-alerts-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .mr-alerts-head-title { font-family: var(--mr-font-display); font-size: 16px; font-weight: 700; color: var(--mr-text-primary); } .mr-alert-card { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 14px; padding: 20px 24px; margin-bottom: 12px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; transition: border-color 0.2s; } .mr-alert-card:hover { border-color: var(--mr-green-border); } .mr-alert-card.is-off { opacity: 0.55; } .mr-alert-main { flex: 1; min-width: 200px; } .mr-alert-title { font-family: var(--mr-font-display); font-size: 15px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 3px; } .mr-alert-meta { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); margin-bottom: 8px; } .mr-count-badge { padding: 4px 12px; border-radius: 100px; background: var(--mr-green-subtle); border: 1px solid var(--mr-green-border); font-family: var(--mr-font-display); font-size: 13px; font-weight: 700; color: var(--mr-green); flex-shrink: 0; } .mr-alert-actions { display: flex; gap: 8px; align-items: center; } .mr-btn-xs { padding: 5px 14px; border-radius: 8px; border: 1px solid var(--mr-border); background: none; color: var(--mr-text-secondary); font-size: 12px; font-family: var(--mr-font-body); cursor: pointer; transition: all 0.15s; } .mr-btn-xs:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-btn-xs-danger { border-color: rgba(248, 113, 113, 0.3); color: var(--mr-red); } .mr-btn-xs-danger:hover { border-color: var(--mr-red); color: var(--mr-red); } .mr-freq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .mr-freq-card { padding: 12px; border-radius: 10px; border: 1.5px solid var(--mr-border); background: none; text-align: center; cursor: pointer; transition: all 0.15s; } .mr-freq-card:hover { border-color: var(--mr-green-border); } .mr-freq-card[aria-pressed="true"] { border-color: var(--mr-green); background: var(--mr-green-subtle); } .mr-freq-icon { font-size: 22px; margin-bottom: 4px; display: block; } .mr-freq-label { font-family: var(--mr-font-display); font-size: 12px; font-weight: 700; color: var(--mr-text-secondary); display: block; } .mr-freq-card[aria-pressed="true"] .mr-freq-label { color: var(--mr-green); } .mr-freq-desc { font-family: var(--mr-font-body); font-size: 10px; color: var(--mr-text-muted); margin-top: 2px; display: block; } .mr-prefs { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 14px; padding: 20px 24px; margin-top: 32px; } .mr-prefs-title { font-family: var(--mr-font-display); font-size: 15px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 16px; } .mr-pref-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--mr-border); } .mr-pref-row:last-child { border-bottom: none; } .mr-pref-text { flex: 1; } .mr-pref-label { font-family: var(--mr-font-body); font-size: 14px; color: var(--mr-text-primary); margin-bottom: 2px; } .mr-pref-desc { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); } /* ---------- Post-job preview ---------- */ .mr-preview-title { font-family: var(--mr-font-display); font-size: 22px; font-weight: 800; color: var(--mr-text-primary); margin-bottom: 4px; } .mr-preview-sub { font-family: var(--mr-font-body); font-size: 15px; color: var(--mr-text-secondary); margin-bottom: 12px; } .mr-preview-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .mr-preview-badge { padding: 4px 12px; border-radius: 100px; background: rgba(125, 194, 67, 0.12); color: var(--mr-green); font-size: 12px; font-family: var(--mr-font-body); font-weight: 600; } .mr-preview-badge.is-remote { background: var(--mr-blue-subtle); color: var(--mr-blue); } .mr-preview-body { font-family: var(--mr-font-body); font-size: 14px; color: var(--mr-text-secondary); line-height: 1.7; margin-bottom: 16px; } .mr-success-card { text-align: center; padding: 48px 24px; } .mr-success-icon { font-size: 44px; margin-bottom: 14px; } @media (max-width: 768px) { .mr-row-2, .mr-stats-row, .mr-freq-grid { grid-template-columns: 1fr; } .mr-auth-page { padding: 40px 16px; } .mr-auth-card { padding: 28px 20px; } .mr-form-page { padding: 24px 16px 60px; } .mr-form-card { padding: 20px; } .mr-step-label { font-size: 9px; } .mr-alert-card { padding: 16px; } .mr-wizard-footer { flex-direction: column-reverse; } .mr-btn-back, .mr-btn-next { width: 100%; } } /* ========================================================================== Marketing / plans page ========================================================================== */ .mr-mk-hero { background: linear-gradient(160deg, var(--mr-hero-top), var(--mr-bg)); border-bottom: 1px solid var(--mr-border); padding: 60px 24px 40px; text-align: center; } .mr-mk-title { font-family: var(--mr-font-display); font-size: clamp(32px, 5vw, 48px); font-weight: 800; color: var(--mr-text-primary); margin-bottom: 12px; letter-spacing: -0.5px; text-wrap: balance; } .mr-mk-sub { font-family: var(--mr-font-body); font-size: 17px; color: var(--mr-text-secondary); max-width: 640px; margin: 0 auto; text-wrap: pretty; } .mr-mk-body { max-width: 1200px; margin: 0 auto; padding: 48px 24px 80px; } .mr-mk-section-title { font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; color: var(--mr-text-muted); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; text-align: center; } /* ---------- Free plan ---------- */ .mr-free-card { background: var(--mr-surface); border: 2px solid var(--mr-green-border); border-radius: 24px; padding: 40px; max-width: 760px; margin: 0 auto 64px; position: relative; } .mr-ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--mr-green); color: #fff; padding: 4px 16px; border-radius: 100px; font-family: var(--mr-font-display); font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; } .mr-plan-name { font-family: var(--mr-font-display); font-size: 28px; font-weight: 800; color: var(--mr-text-primary); margin-bottom: 4px; text-align: center; } .mr-plan-desc { font-family: var(--mr-font-body); font-size: 15px; color: var(--mr-text-secondary); margin-bottom: 20px; text-align: center; } .mr-price-row { text-align: center; margin-bottom: 24px; } .mr-price-main { display: block; font-family: var(--mr-font-display); font-size: 56px; font-weight: 800; color: var(--mr-green); line-height: 1; } .mr-price-sub { display: block; font-family: var(--mr-font-body); font-size: 14px; color: var(--mr-text-muted); margin-top: 4px; } .mr-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; margin-bottom: 28px; list-style: none; } .mr-feature { display: flex; align-items: flex-start; gap: 10px; font-family: var(--mr-font-body); font-size: 14px; color: var(--mr-text-secondary); } .mr-check { color: var(--mr-green); font-weight: 700; flex-shrink: 0; } .mr-primary-btn { display: block; width: 100%; padding: 14px; border-radius: 12px; background: var(--mr-green); border: none; color: #fff; text-align: center; font-family: var(--mr-font-display); font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity 0.15s; } .mr-primary-btn:hover { opacity: 0.9; color: #fff; } /* ---------- Add-ons ---------- */ .mr-addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 48px; } .mr-addon-card { background: var(--mr-surface); border: 1.5px solid var(--mr-border); border-radius: 20px; padding: 28px; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; } .mr-addon-card:hover { border-color: var(--mr-green-border); transform: translateY(-2px); } .mr-addon-card.is-selected { border-color: var(--mr-green); background: linear-gradient(160deg, var(--mr-green-subtle), var(--mr-surface)); } .mr-addon-icon { font-size: 30px; margin-bottom: 12px; } .mr-addon-title { font-family: var(--mr-font-display); font-size: 19px; font-weight: 800; color: var(--mr-text-primary); margin-bottom: 8px; } .mr-addon-desc { font-family: var(--mr-font-body); font-size: 13.5px; color: var(--mr-text-secondary); line-height: 1.55; margin-bottom: 18px; text-wrap: pretty; } .mr-addon-price { font-family: var(--mr-font-display); font-size: 30px; font-weight: 800; color: var(--mr-text-primary); } .mr-addon-price small { font-size: 14px; color: var(--mr-text-muted); font-weight: 400; } .mr-addon-price-sub { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); margin-bottom: 18px; } .mr-addon-features { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; flex: 1; } .mr-addon-feature { display: flex; align-items: flex-start; gap: 9px; font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); } .mr-addon-check { color: var(--mr-green); flex-shrink: 0; } .mr-addon-btn { width: 100%; padding: 12px; border-radius: 10px; border: 1.5px solid var(--mr-border); background: none; color: var(--mr-text-primary); font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.15s; } .mr-addon-btn:hover { border-color: var(--mr-green); } .mr-addon-card.is-selected .mr-addon-btn { background: var(--mr-green); border-color: var(--mr-green); color: #fff; } .mr-tier-row { display: flex; gap: 6px; margin-bottom: 14px; } .mr-tier-btn { flex: 1; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--mr-border); background: none; color: var(--mr-text-secondary); font-family: var(--mr-font-body); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .mr-tier-btn:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-tier-btn[aria-pressed="true"] { background: var(--mr-green-subtle); border-color: var(--mr-green); color: var(--mr-green); } /* ---------- Full marketing stack ---------- */ .mr-stack { position: relative; background: linear-gradient(150deg, var(--mr-surface-raised), var(--mr-surface)); border: 2px solid var(--mr-green-border); border-radius: 24px; padding: 42px 36px 36px; margin-bottom: 48px; } .mr-stack-ribbon { position: absolute; top: -12px; left: 36px; background: var(--mr-green); color: #fff; padding: 4px 16px; border-radius: 100px; font-family: var(--mr-font-display); font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; } .mr-stack-grid { display: grid; grid-template-columns: 1fr 300px; gap: 32px; } .mr-stack-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .mr-stack-title { font-family: var(--mr-font-display); font-size: 25px; font-weight: 800; color: var(--mr-text-primary); } .mr-stack-desc { font-family: var(--mr-font-body); font-size: 14.5px; color: var(--mr-text-secondary); line-height: 1.6; margin-bottom: 22px; max-width: 580px; text-wrap: pretty; } .mr-stack-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 22px; list-style: none; } .mr-stack-cta { background: var(--mr-bg); border: 1px solid var(--mr-border); border-radius: 16px; padding: 26px 24px; text-align: center; align-self: start; } .mr-stack-kicker { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } .mr-stack-price { font-family: var(--mr-font-display); font-size: 34px; font-weight: 800; color: var(--mr-green); line-height: 1; } .mr-stack-note { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); margin: 12px 0 20px; line-height: 1.5; } .mr-stack-fine { font-family: var(--mr-font-body); font-size: 11px; color: var(--mr-text-muted); margin-top: 10px; } /* ---------- Bundle note + FAQ ---------- */ .mr-bundle { background: var(--mr-green-subtle); border: 1px solid var(--mr-green-border); border-radius: 16px; padding: 20px 28px; text-align: center; margin: 16px 0 64px; } .mr-bundle-title { font-family: var(--mr-font-display); font-size: 15px; font-weight: 700; color: var(--mr-green); margin-bottom: 4px; } .mr-bundle-text { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); } .mr-faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; } .mr-faq-card { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 14px; padding: 20px 22px; } .mr-faq-q { font-family: var(--mr-font-display); font-size: 14.5px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 8px; } .mr-faq-a { font-family: var(--mr-font-body); font-size: 13.5px; color: var(--mr-text-secondary); line-height: 1.6; text-wrap: pretty; } /* ---------- Sticky cart bar ---------- */ .mr-cart-bar { position: sticky; bottom: 0; z-index: 90; background: var(--mr-surface-raised); border-top: 1px solid var(--mr-green-border); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3); } .mr-cart-label { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-secondary); } .mr-cart-total { font-family: var(--mr-font-display); font-size: 20px; font-weight: 800; color: var(--mr-green); } .mr-cart-btn { padding: 12px 26px; border-radius: 10px; background: var(--mr-green); border: none; color: #fff; font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity 0.15s; } .mr-cart-btn:hover { opacity: 0.9; } .mr-cart-line { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--mr-border); } .mr-cart-line:last-of-type { border-bottom: none; } .mr-cart-name { font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; color: var(--mr-text-primary); } .mr-cart-note { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); } .mr-cart-price { font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; color: var(--mr-text-primary); white-space: nowrap; } .mr-cart-sum { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mr-border); } .mr-cart-sum-label { font-family: var(--mr-font-display); font-size: 15px; font-weight: 700; color: var(--mr-text-primary); } .mr-cart-sum-value { font-family: var(--mr-font-display); font-size: 22px; font-weight: 800; color: var(--mr-green); } @media (max-width: 900px) { .mr-stack-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .mr-mk-body { padding: 32px 16px 60px; } .mr-free-card { padding: 28px 20px; border-radius: 18px; } .mr-price-main { font-size: 44px; } .mr-addon-grid { grid-template-columns: 1fr; } .mr-addon-card { padding: 22px; } .mr-stack { padding: 36px 20px 24px; } .mr-stack-ribbon { left: 20px; font-size: 10px; } .mr-faq-grid { grid-template-columns: 1fr; } .mr-cart-bar { padding: 12px 16px; } .mr-cart-btn { flex: 1; } } /* ========================================================================== Book a therapist: directory, calendar, slot picker, summary ========================================================================== */ .mr-booking-inner { max-width: 1100px; margin: 0 auto; padding: 40px 24px 80px; } .mr-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; align-items: center; } .mr-chip-row-label { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-muted); } .mr-chip-lg { padding: 6px 16px; border-radius: 100px; background: var(--mr-surface); border: 1px solid var(--mr-border); color: var(--mr-text-secondary); font-family: var(--mr-font-body); font-size: 13px; cursor: pointer; transition: all 0.15s; } .mr-chip-lg:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-chip-lg[aria-pressed="true"] { background: var(--mr-green-subtle); border-color: var(--mr-green-border); color: var(--mr-green); } .mr-therapist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .mr-therapist-card { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 16px; padding: 20px; transition: all 0.2s; } .mr-therapist-card:hover { border-color: var(--mr-green-border); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .mr-th-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; } .mr-th-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--mr-green), #5aab1e); display: flex; align-items: center; justify-content: center; font-family: var(--mr-font-display); font-size: 16px; font-weight: 800; color: #fff; flex-shrink: 0; } .mr-th-avatar-sm { width: 44px; height: 44px; font-size: 13px; } .mr-th-name { font-family: var(--mr-font-display); font-size: 15px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 2px; } .mr-th-meta { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-secondary); margin-bottom: 8px; } .mr-th-bio { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); } .mr-th-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mr-border); gap: 12px; } .mr-th-rate { font-family: var(--mr-font-display); font-size: 16px; font-weight: 800; color: var(--mr-text-primary); } .mr-avail-chip { display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 100px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--mr-border); font-size: 11px; font-weight: 700; color: var(--mr-text-muted); font-family: var(--mr-font-body); } .mr-avail-chip.is-available { background: var(--mr-green-subtle); border-color: var(--mr-green-border); color: var(--mr-green); } .mr-book-btn { padding: 8px 20px; border-radius: 8px; background: var(--mr-green); border: none; color: #fff; font-family: var(--mr-font-display); font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity 0.15s; white-space: nowrap; } .mr-book-btn:hover { opacity: 0.9; } /* ---------- Booking step ---------- */ .mr-booking-head { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; } .mr-btn-inline-back { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--mr-border); background: none; color: var(--mr-text-secondary); font-family: var(--mr-font-body); font-size: 13px; cursor: pointer; } .mr-btn-inline-back:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-booking-grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; } .mr-cal-card { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 16px; padding: 24px; } .mr-cal-title { font-family: var(--mr-font-display); font-size: 16px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 16px; } .mr-duration-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .mr-dur-btn { flex: 1; min-width: 72px; padding: 8px; border-radius: 8px; border: 1.5px solid var(--mr-border); background: none; color: var(--mr-text-secondary); font-family: var(--mr-font-display); font-size: 12px; font-weight: 700; cursor: pointer; text-align: center; transition: all 0.15s; } .mr-dur-btn:hover { border-color: var(--mr-green-border); } .mr-dur-btn[aria-pressed="true"] { border-color: var(--mr-green); background: var(--mr-green-subtle); color: var(--mr-green); } .mr-dur-price { font-family: var(--mr-font-body); font-size: 10px; color: var(--mr-text-muted); margin-top: 2px; display: block; } .mr-dur-btn[aria-pressed="true"] .mr-dur-price { color: var(--mr-green); } .mr-days-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 20px; } .mr-day-btn { min-width: 52px; padding: 10px 8px; border-radius: 10px; border: 1.5px solid var(--mr-border); background: none; cursor: pointer; text-align: center; transition: all 0.15s; flex-shrink: 0; } .mr-day-btn:hover:not(:disabled) { border-color: var(--mr-green-border); } .mr-day-btn:disabled { background: var(--mr-surface-raised); opacity: 0.4; cursor: default; } .mr-day-btn[aria-pressed="true"] { border-color: var(--mr-green); background: var(--mr-green); } .mr-day-name { font-family: var(--mr-font-body); font-size: 10px; font-weight: 600; color: var(--mr-text-muted); text-transform: uppercase; margin-bottom: 4px; display: block; } .mr-day-num { font-family: var(--mr-font-display); font-size: 16px; font-weight: 800; color: var(--mr-text-primary); display: block; } .mr-day-mon { font-family: var(--mr-font-body); font-size: 9px; color: var(--mr-text-muted); margin-top: 2px; display: block; } .mr-day-btn[aria-pressed="true"] .mr-day-name, .mr-day-btn[aria-pressed="true"] .mr-day-num { color: #fff; } .mr-day-btn[aria-pressed="true"] .mr-day-mon { color: rgba(255, 255, 255, 0.7); } .mr-slots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .mr-slot-btn { padding: 8px; border-radius: 8px; border: 1px solid var(--mr-border); background: none; color: var(--mr-text-secondary); font-family: var(--mr-font-body); font-size: 12px; font-weight: 400; cursor: pointer; text-align: center; transition: all 0.15s; } .mr-slot-btn:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-slot-btn[aria-pressed="true"] { border-color: var(--mr-green); background: var(--mr-green-subtle); color: var(--mr-green); font-weight: 700; } .mr-summary-card { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 16px; padding: 24px; position: sticky; top: 88px; } .mr-summary-head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--mr-border); } .mr-summary-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--mr-border); gap: 12px; } .mr-summary-key { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-muted); } .mr-summary-val { font-family: var(--mr-font-display); font-size: 13px; font-weight: 700; color: var(--mr-text-primary); text-align: right; } .mr-summary-val.is-total { color: var(--mr-green); } .mr-confirm-btn { width: 100%; padding: 13px; border-radius: 10px; background: var(--mr-green); border: none; color: #fff; font-family: var(--mr-font-display); font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 8px; transition: opacity 0.15s; } .mr-confirm-btn:hover:not(:disabled) { opacity: 0.9; } .mr-confirm-btn:disabled { background: var(--mr-border); cursor: default; } .mr-booking-success { background: var(--mr-surface); border: 1px solid var(--mr-green-border); border-radius: 20px; padding: 48px 32px; text-align: center; max-width: 480px; margin: 40px auto; } .mr-success-emoji { font-size: 64px; margin-bottom: 16px; } .mr-success-title { font-family: var(--mr-font-display); font-size: 26px; font-weight: 800; color: var(--mr-text-primary); margin-bottom: 8px; } .mr-success-text { font-family: var(--mr-font-body); font-size: 15px; color: var(--mr-text-secondary); margin-bottom: 24px; } .mr-receipt { background: var(--mr-surface-raised); border: 1px solid var(--mr-border); border-radius: 12px; padding: 16px; margin-bottom: 24px; text-align: left; } .mr-receipt-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--mr-border); gap: 12px; } .mr-receipt-row:last-child { border-bottom: none; } @media (max-width: 900px) { .mr-booking-grid { grid-template-columns: 1fr; } .mr-summary-card { position: static; } } @media (max-width: 768px) { .mr-booking-inner { padding: 24px 16px 60px; } .mr-therapist-grid { grid-template-columns: 1fr; } .mr-cal-card { padding: 18px; } .mr-duration-row { flex-wrap: wrap; } } @media (max-width: 480px) { .mr-slots-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== Licensure by state ========================================================================== */ .mr-lic-hero { background: linear-gradient(160deg, var(--mr-hero-top), var(--mr-bg)); border-bottom: 1px solid var(--mr-border); padding: 40px 24px 32px; } .mr-lic-hero-inner { max-width: 1100px; margin: 0 auto; } .mr-lic-stats { display: flex; gap: 24px; flex-wrap: wrap; } .mr-lic-stat { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 12px; padding: 14px 20px; display: flex; align-items: center; gap: 12px; } .mr-lic-stat-val { font-family: var(--mr-font-display); font-size: 24px; font-weight: 800; color: var(--mr-green); } .mr-lic-stat-lab { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); } .mr-lic-body { max-width: 1100px; margin: 0 auto; padding: 28px 24px 80px; display: grid; grid-template-columns: 340px 1fr; gap: 24px; } .mr-lic-search { display: flex; align-items: center; gap: 8px; background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 10px; padding: 9px 14px; margin-bottom: 10px; } .mr-lic-search:focus-within { border-color: var(--mr-green-border); } .mr-lic-filters { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; } .mr-lic-filter { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--mr-border); background: none; color: var(--mr-text-secondary); font-family: var(--mr-font-body); font-size: 12px; font-weight: 400; cursor: pointer; transition: all 0.15s; } .mr-lic-filter:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-lic-filter[aria-pressed="true"] { border-color: var(--mr-green-border); background: var(--mr-green-subtle); color: var(--mr-green); font-weight: 700; } .mr-state-list { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 14px; overflow: hidden; max-height: 560px; overflow-y: auto; list-style: none; } .mr-state-item { width: 100%; text-align: left; padding: 12px 16px; cursor: pointer; display: flex; align-items: center; gap: 10px; border: none; border-bottom: 1px solid var(--mr-border); border-left: 3px solid transparent; background: none; transition: all 0.12s; } .mr-state-list li:last-child .mr-state-item { border-bottom: none; } .mr-state-item:hover { background: var(--mr-surface-raised); } .mr-state-item[aria-current="true"] { background: var(--mr-green-subtle); border-left-color: var(--mr-green); } .mr-state-code { font-family: var(--mr-font-display); font-size: 14px; font-weight: 800; color: var(--mr-text-primary); width: 28px; } .mr-state-item[aria-current="true"] .mr-state-code { color: var(--mr-green); } .mr-state-name { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); flex: 1; } .mr-state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mr-green); flex-shrink: 0; } .mr-state-dot.is-unregulated { background: var(--mr-red); } .mr-lic-card { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 16px; padding: 28px; margin-bottom: 16px; } .mr-lic-state-name { font-family: var(--mr-font-display); font-size: 26px; font-weight: 800; color: var(--mr-text-primary); margin-bottom: 4px; } .mr-lic-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 100px; background: var(--mr-green-subtle); border: 1px solid var(--mr-green-border); font-family: var(--mr-font-body); font-size: 12px; font-weight: 700; color: var(--mr-green); } .mr-lic-badge.is-unregulated { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.3); color: var(--mr-red); } .mr-lic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; } .mr-info-box { background: var(--mr-surface-raised); border: 1px solid var(--mr-border); border-radius: 12px; padding: 14px 16px; } .mr-info-label { font-family: var(--mr-font-body); font-size: 11px; font-weight: 700; color: var(--mr-text-muted); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 4px; } .mr-info-val { font-family: var(--mr-font-display); font-size: 18px; font-weight: 800; color: var(--mr-green); } .mr-info-sub { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-secondary); margin-top: 2px; } .mr-note-box { background: rgba(246, 173, 85, 0.08); border: 1px solid rgba(246, 173, 85, 0.25); border-radius: 10px; padding: 12px 16px; font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-orange); margin-bottom: 16px; text-wrap: pretty; } .mr-note-box.is-warning { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.2); color: var(--mr-red); } .mr-board-card { background: var(--mr-surface-raised); border: 1px solid var(--mr-border); border-radius: 12px; padding: 16px; } .mr-board-title { font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 10px; } .mr-board-row { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; } .mr-board-label { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); width: 60px; flex-shrink: 0; } .mr-board-val { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-secondary); } .mr-board-link { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-green); } .mr-lic-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .mr-lic-step { background: var(--mr-surface-raised); border: 1px solid var(--mr-border); border-radius: 12px; padding: 14px; text-align: center; } .mr-lic-step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--mr-green-subtle); border: 1px solid var(--mr-green-border); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-family: var(--mr-font-display); font-size: 13px; font-weight: 800; color: var(--mr-green); } .mr-lic-step-title { font-family: var(--mr-font-display); font-size: 12px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 4px; } .mr-lic-step-desc { font-family: var(--mr-font-body); font-size: 11px; color: var(--mr-text-secondary); } @media (max-width: 900px) { .mr-lic-body { grid-template-columns: 1fr; } } @media (max-width: 768px) { .mr-lic-hero { padding: 28px 16px 24px; } .mr-lic-body { padding: 20px 16px 60px; } .mr-lic-grid { grid-template-columns: 1fr; } .mr-lic-card { padding: 20px; } .mr-lic-stats { gap: 12px; } .mr-lic-stat { padding: 12px 16px; } } /* ========================================================================== Employer reviews ========================================================================== */ .mr-rev-inner { max-width: 1200px; margin: 0 auto; padding: 40px 24px 80px; display: grid; grid-template-columns: 300px 1fr; gap: 24px; } .mr-emp-card { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 12px; padding: 14px 16px; cursor: pointer; display: flex; gap: 12px; align-items: center; margin-bottom: 10px; width: 100%; text-align: left; transition: all 0.15s; } .mr-emp-card:hover { border-color: var(--mr-green-border); } .mr-emp-card[aria-current="true"] { background: var(--mr-green-subtle); border-color: var(--mr-green-border); } .mr-emp-logo { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, var(--mr-green), #5aab1e); display: flex; align-items: center; justify-content: center; font-family: var(--mr-font-display); font-size: 12px; font-weight: 800; color: #fff; flex-shrink: 0; } .mr-emp-name { font-family: var(--mr-font-display); font-size: 13px; font-weight: 700; color: var(--mr-text-primary); } .mr-emp-meta { font-family: var(--mr-font-body); font-size: 11px; color: var(--mr-text-secondary); } .mr-stars { display: inline-flex; gap: 2px; line-height: 1; } .mr-star { color: #333; } .mr-star.is-on { color: var(--mr-orange); } .mr-stars-lg .mr-star { font-size: 20px; } .mr-stars-interactive .mr-star { cursor: pointer; font-size: 24px; transition: color 0.1s; } .mr-rev-header { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 16px; padding: 28px; margin-bottom: 16px; } .mr-rev-emp-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; } .mr-emp-logo-lg { width: 60px; height: 60px; border-radius: 14px; font-size: 18px; } .mr-rev-emp-name { font-family: var(--mr-font-display); font-size: 24px; font-weight: 800; color: var(--mr-text-primary); margin-bottom: 4px; } .mr-score-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .mr-score { font-family: var(--mr-font-display); font-size: 30px; font-weight: 800; color: var(--mr-text-primary); line-height: 1; } .mr-score-meta { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); } .mr-rev-cols { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; } .mr-dist { flex: 1; min-width: 180px; } .mr-dist-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } .mr-dist-num { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-secondary); width: 12px; } .mr-bar { flex: 1; height: 6px; background: var(--mr-surface-raised); border-radius: 100px; overflow: hidden; } .mr-bar-fill { display: block; height: 100%; background: var(--mr-orange); border-radius: 100px; } .mr-dist-count { font-family: var(--mr-font-body); font-size: 11px; color: var(--mr-text-muted); width: 20px; text-align: right; } .mr-breakdown { flex: 1; min-width: 240px; } .mr-break-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .mr-break-label { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-secondary); width: 120px; flex-shrink: 0; } .mr-break-bar { flex: 1; height: 6px; background: var(--mr-surface-raised); border-radius: 100px; overflow: hidden; } .mr-break-fill { display: block; height: 100%; background: var(--mr-green); border-radius: 100px; } .mr-break-val { font-family: var(--mr-font-display); font-size: 12px; font-weight: 700; color: var(--mr-text-primary); width: 28px; text-align: right; } .mr-recommend { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; background: var(--mr-green-subtle); border: 1px solid var(--mr-green-border); font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-green); font-weight: 600; } .mr-reviews-panel { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 16px; overflow: hidden; } .mr-reviews-head { padding: 16px 24px; border-bottom: 1px solid var(--mr-border); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .mr-rev-filters { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; } .mr-rev-filter { padding: 5px 14px; border-radius: 100px; background: none; border: 1px solid var(--mr-border); color: var(--mr-text-secondary); font-family: var(--mr-font-body); font-size: 12px; cursor: pointer; transition: all 0.15s; } .mr-rev-filter:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-rev-filter[aria-pressed="true"] { background: var(--mr-green-subtle); border-color: var(--mr-green-border); color: var(--mr-green); font-weight: 700; } .mr-review-card { padding: 20px 24px; border-bottom: 1px solid var(--mr-border); } .mr-review-card:last-child { border-bottom: none; } .mr-review-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .mr-review-title { font-family: var(--mr-font-display); font-size: 15px; font-weight: 700; color: var(--mr-text-primary); margin: 6px 0; } .mr-review-body { font-family: var(--mr-font-body); font-size: 14px; color: var(--mr-text-secondary); line-height: 1.65; margin-bottom: 12px; text-wrap: pretty; } .mr-review-author { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); } .mr-verified { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 100px; background: var(--mr-green-subtle); border: 1px solid var(--mr-green-border); font-family: var(--mr-font-body); font-size: 10px; font-weight: 700; color: var(--mr-green); } .mr-review-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mr-helpful-btn { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--mr-border); background: none; color: var(--mr-text-secondary); font-family: var(--mr-font-body); font-size: 12px; cursor: pointer; transition: all 0.15s; } .mr-helpful-btn:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-helpful-btn[aria-pressed="true"] { border-color: var(--mr-green-border); background: var(--mr-green-subtle); color: var(--mr-green); } .mr-gate { padding: 28px 24px; text-align: center; background: linear-gradient(to bottom, transparent, var(--mr-surface-raised)); border-top: 1px solid var(--mr-border); } .mr-gate-title { font-family: var(--mr-font-display); font-size: 16px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 6px; } .mr-gate-text { font-family: var(--mr-font-body); font-size: 13.5px; color: var(--mr-text-secondary); margin-bottom: 16px; } .mr-breakdown-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .mr-breakdown-label { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); width: 140px; flex-shrink: 0; } .mr-rec-btns { display: flex; gap: 10px; } .mr-rec-btn { flex: 1; padding: 10px; border-radius: 10px; border: 1.5px solid var(--mr-border); background: none; color: var(--mr-text-secondary); font-family: var(--mr-font-display); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s; } .mr-rec-btn:hover { border-color: var(--mr-green-border); } .mr-rec-btn[aria-pressed="true"] { border-color: var(--mr-green); background: var(--mr-green-subtle); color: var(--mr-green); } @media (max-width: 900px) { .mr-rev-inner { grid-template-columns: 1fr; } } @media (max-width: 768px) { .mr-rev-inner { padding: 24px 16px 60px; } .mr-rev-header, .mr-review-card, .mr-reviews-head { padding-left: 18px; padding-right: 18px; } .mr-rev-header { padding-top: 20px; padding-bottom: 20px; } .mr-break-label { width: 100px; } .mr-breakdown-label { width: 100%; } } /* ========================================================================== Account screens: therapist profile · employer dashboard · resume builder These map to JetEngine listings/forms in WordPress — see README §12. ========================================================================== */ /* ---------- Shared tab strip (profile + dashboard) ---------- */ .mr-app-tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 1px solid var(--mr-border); overflow-x: auto; overflow-y: hidden; } .mr-app-tab { padding: 10px 18px; font-family: var(--mr-font-body); font-size: 14px; font-weight: 400; color: var(--mr-text-secondary); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; white-space: nowrap; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; } .mr-app-tab:hover { color: var(--mr-text-primary); } .mr-app-tab[aria-selected="true"] { font-weight: 600; color: var(--mr-green); border-bottom-color: var(--mr-green); } .mr-tab-count { background: var(--mr-green); color: #fff; border-radius: 100px; padding: 1px 6px; font-size: 10px; font-weight: 700; } .mr-app-card { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 14px; padding: 20px; margin-bottom: 16px; } .mr-app-card-title { font-family: var(--mr-font-display); font-size: 15px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 14px; } .mr-app-card p { font-family: var(--mr-font-body); font-size: 14px; color: var(--mr-text-secondary); line-height: 1.7; margin-bottom: 12px; } /* Unstyled list. NB: .mr-bullet-list draws its bullet with ::before, so it can never be reused here — list-style:none would not remove the marker. */ .mr-plain-list { list-style: none; margin: 0; padding: 0; } /* ========================================================================== Therapist profile ========================================================================== */ .mr-profile-hero { background: linear-gradient(160deg, var(--mr-hero-top) 0%, var(--mr-bg) 100%); border-bottom: 1px solid var(--mr-border); padding: 40px 24px; } .mr-profile-hero-inner { max-width: 1000px; margin: 0 auto; display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; } .mr-profile-avatar { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, var(--mr-green), #5aab1e); display: flex; align-items: center; justify-content: center; font-family: var(--mr-font-display); font-size: 40px; font-weight: 800; color: #fff; flex-shrink: 0; border: 3px solid var(--mr-green-border); } .mr-profile-info { flex: 1; min-width: 240px; } .mr-profile-name { font-family: var(--mr-font-display); font-size: 26px; font-weight: 800; color: var(--mr-text-primary); margin-bottom: 4px; } .mr-profile-title { font-family: var(--mr-font-body); font-size: 16px; color: var(--mr-text-secondary); margin-bottom: 12px; } .mr-profile-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .mr-profile-meta-item { display: flex; align-items: center; gap: 6px; font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); } .mr-spec-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; list-style: none; } .mr-spec-tag { padding: 4px 12px; border-radius: 100px; background: var(--mr-surface-raised); border: 1px solid var(--mr-border); font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-secondary); } .mr-otw-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .mr-otw-label { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-muted); } .mr-otw-row .mr-switch[aria-checked="true"] ~ .mr-otw-label { color: var(--mr-green); font-weight: 700; } .mr-profile-actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; } .mr-btn-profile { padding: 12px 24px; border-radius: 10px; background: var(--mr-green); border: none; color: #fff; font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity 0.15s; } .mr-btn-profile:hover { opacity: 0.9; color: #fff; } .mr-btn-profile-outline { padding: 12px 20px; border-radius: 10px; border: 1.5px solid var(--mr-border); background: none; color: var(--mr-text-secondary); font-family: var(--mr-font-display); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; } .mr-btn-profile-outline:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-profile-body { max-width: 1000px; margin: 0 auto; padding: 32px 24px 60px; display: grid; grid-template-columns: 1fr 300px; gap: 28px; } .mr-exp-item { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--mr-border); } .mr-exp-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .mr-exp-role { font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 2px; } .mr-exp-co { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-green); margin-bottom: 2px; } .mr-exp-period { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); margin-bottom: 6px; } .mr-exp-desc { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); } .mr-cert-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--mr-border); } .mr-cert-row:last-child { border-bottom: none; } .mr-cert-badge { width: 32px; height: 32px; border-radius: 8px; background: var(--mr-green-subtle); border: 1px solid var(--mr-green-border); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .mr-cert-text { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); } .mr-meta-kicker { font-family: var(--mr-font-body); font-size: 11px; color: var(--mr-text-muted); margin-bottom: 4px; } .mr-about-cols { display: flex; gap: 24px; margin-top: 16px; flex-wrap: wrap; } .mr-profile-side-card { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 14px; padding: 18px; margin-bottom: 14px; } .mr-profile-side-title { font-family: var(--mr-font-display); font-size: 13px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 12px; } .mr-glance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mr-glance-box { background: var(--mr-surface-raised); border-radius: 10px; padding: 12px; text-align: center; } .mr-glance-val { font-family: var(--mr-font-display); font-size: 18px; font-weight: 800; color: var(--mr-green); display: block; } .mr-glance-lab { font-family: var(--mr-font-body); font-size: 11px; color: var(--mr-text-muted); } .mr-side-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .mr-btn-edit { padding: 4px 10px; border-radius: 7px; border: 1px solid var(--mr-border); background: none; color: var(--mr-text-secondary); font-family: var(--mr-font-body); font-size: 11px; cursor: pointer; transition: all 0.15s; } .mr-btn-edit:hover { border-color: var(--mr-green-border); color: var(--mr-text-primary); } .mr-social-list { display: flex; flex-direction: column; gap: 8px; } .mr-social-link { --sc: var(--mr-green); display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--mr-surface-raised); border: 1px solid var(--mr-border); text-decoration: none; transition: all 0.15s; } .mr-social-link:hover { border-color: color-mix(in srgb, var(--sc) 40%, transparent); background: color-mix(in srgb, var(--sc) 6%, var(--mr-surface-raised)); } .mr-social-icon { font-size: 16px; width: 22px; text-align: center; } .mr-social-body { flex: 1; min-width: 0; } .mr-social-label { font-family: var(--mr-font-body); font-size: 12px; font-weight: 600; color: var(--sc, var(--mr-green)); } .mr-social-handle { font-family: var(--mr-font-body); font-size: 11px; color: var(--mr-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mr-social-chip { --sc: var(--mr-green); display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 100px; background: color-mix(in srgb, var(--sc) 9%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 20%, transparent); font-family: var(--mr-font-body); font-size: 12px; font-weight: 600; color: var(--sc, var(--mr-green)); text-decoration: none; transition: opacity 0.15s; } .mr-social-chip:hover { opacity: 0.75; color: var(--sc); } .mr-social-empty { text-align: center; padding: 16px 0; color: var(--mr-text-muted); font-family: var(--mr-font-body); font-size: 13px; } .mr-prefix-field { display: flex; align-items: center; background: var(--mr-bg); border: 1px solid var(--mr-border); border-radius: 10px; overflow: hidden; } .mr-prefix-field:focus-within { border-color: var(--mr-green); } .mr-prefix { padding: 10px 12px; font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-muted); background: var(--mr-surface-raised); border-right: 1px solid var(--mr-border); white-space: nowrap; } .mr-prefix-input { flex: 1; min-width: 0; background: none; border: none; outline: none; padding: 10px 14px; font-family: var(--mr-font-body); font-size: 14px; color: var(--mr-text-primary); } .mr-social-field-label { font-family: var(--mr-font-body); font-size: 13px; font-weight: 600; color: var(--mr-text-secondary); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .mr-avail-row, .mr-pref-item { padding: 6px 0; } .mr-avail-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--mr-border); } .mr-avail-row:last-child { border-bottom: none; } .mr-avail-day { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); } .mr-avail-time { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-green); font-weight: 600; } .mr-avail-time.is-off { color: var(--mr-text-muted); font-weight: 400; } .mr-pref-item { margin-bottom: 10px; } .mr-pref-key { font-family: var(--mr-font-body); font-size: 11px; color: var(--mr-text-muted); margin-bottom: 2px; } .mr-pref-val { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); } /* Booking modal bits reused from booking.css, plus day rail */ .mr-day-rail { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; margin-bottom: 20px; } .mr-day-pill { min-width: 64px; padding: 10px 6px; border-radius: 10px; border: 1.5px solid var(--mr-border); background: none; cursor: pointer; text-align: center; flex-shrink: 0; transition: all 0.15s; } .mr-day-pill:hover:not(:disabled) { border-color: var(--mr-green-border); } .mr-day-pill:disabled { background: var(--mr-surface-raised); opacity: 0.4; cursor: not-allowed; } .mr-day-pill[aria-pressed="true"] { border-color: var(--mr-green); background: var(--mr-green); } .mr-day-pill-dow { display: block; font-family: var(--mr-font-body); font-size: 10px; font-weight: 600; color: var(--mr-text-muted); text-transform: uppercase; margin-bottom: 4px; } .mr-day-pill-date { display: block; font-family: var(--mr-font-display); font-size: 14px; font-weight: 800; color: var(--mr-text-primary); } .mr-day-pill[aria-pressed="true"] .mr-day-pill-dow, .mr-day-pill[aria-pressed="true"] .mr-day-pill-date { color: #fff; } .mr-field-kicker { font-family: var(--mr-font-body); font-size: 13px; font-weight: 600; color: var(--mr-text-secondary); margin-bottom: 8px; } /* ========================================================================== Employer dashboard ========================================================================== */ .mr-dash-header { background: var(--mr-surface); border-bottom: 1px solid var(--mr-border); padding: 24px; } .mr-dash-header-inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .mr-dash-title { font-family: var(--mr-font-display); font-size: 22px; font-weight: 800; color: var(--mr-text-primary); margin-bottom: 2px; } .mr-dash-sub { font-family: var(--mr-font-body); font-size: 14px; color: var(--mr-text-secondary); } .mr-dash-body { max-width: 1280px; margin: 0 auto; padding: 28px 24px 60px; } .mr-dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; } .mr-dash-stat { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 14px; padding: 20px; } .mr-dash-stat-icon { font-size: 24px; margin-bottom: 10px; display: block; } .mr-dash-stat-val { font-family: var(--mr-font-display); font-size: 28px; font-weight: 800; color: var(--mr-text-primary); display: block; } .mr-dash-stat-label { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); margin-bottom: 6px; } .mr-dash-stat-delta { font-family: var(--mr-font-body); font-size: 11px; color: var(--mr-green); } .mr-table-wrap { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 14px; overflow: hidden; } .mr-table { width: 100%; border-collapse: collapse; } .mr-table th { padding: 12px 16px; font-family: var(--mr-font-body); font-size: 11px; font-weight: 700; color: var(--mr-text-muted); text-align: left; border-bottom: 1px solid var(--mr-border); text-transform: uppercase; letter-spacing: 0.5px; } .mr-table td { padding: 14px 16px; font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); border-bottom: 1px solid var(--mr-border); } .mr-table tbody tr:nth-child(even) { background: var(--mr-surface-raised); } .mr-table tbody tr:last-child td { border-bottom: none; } .mr-td-bold { font-family: var(--mr-font-display); font-weight: 700; color: var(--mr-text-primary); } .mr-status { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; font-family: var(--mr-font-body); background: rgba(255, 255, 255, 0.06); color: #888; } .mr-status[data-status="active"], .mr-status[data-status="shortlisted"] { background: rgba(125, 194, 67, 0.12); color: var(--mr-green); } .mr-status[data-status="new"] { background: var(--mr-blue-subtle); color: var(--mr-blue); } .mr-status[data-status="reviewed"] { background: var(--mr-orange-subtle); color: var(--mr-orange); } .mr-row-actions { display: flex; gap: 6px; flex-wrap: wrap; } .mr-applicant-cell { display: flex; align-items: center; gap: 10px; } .mr-mini-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--mr-green), #5aab1e); display: flex; align-items: center; justify-content: center; font-family: var(--mr-font-display); font-size: 12px; font-weight: 800; color: #fff; flex-shrink: 0; } .mr-msg-panel { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 14px; overflow: hidden; } .mr-msg-row { display: flex; gap: 14px; padding: 16px; border-bottom: 1px solid var(--mr-border); cursor: pointer; align-items: center; transition: background 0.15s; width: 100%; text-align: left; background: none; border-left: none; border-right: none; border-top: none; } .mr-msg-row:last-child { border-bottom: none; } .mr-msg-row.is-unread { background: var(--mr-green-subtle); } .mr-msg-row:hover { background: var(--mr-surface-raised); } .mr-msg-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--mr-green), #5aab1e); display: flex; align-items: center; justify-content: center; font-family: var(--mr-font-display); font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0; } .mr-msg-body { flex: 1; min-width: 0; } .mr-msg-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 3px; } .mr-msg-from { font-family: var(--mr-font-display); font-size: 13px; font-weight: 700; color: var(--mr-text-primary); } .mr-msg-time { font-family: var(--mr-font-body); font-size: 11px; color: var(--mr-text-muted); } .mr-msg-preview { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); } .mr-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mr-green); flex-shrink: 0; } .mr-settings-input { max-width: 440px; } /* ========================================================================== Resume builder ========================================================================== */ .mr-resume-inner { max-width: 800px; margin: 0 auto; padding: 40px 24px 80px; } .mr-resume-stepper { margin-bottom: 36px; } .mr-resume-labels { display: flex; justify-content: space-between; margin-bottom: 8px; gap: 8px; } .mr-resume-label { font-family: var(--mr-font-body); font-size: 11px; font-weight: 400; color: var(--mr-text-muted); transition: color 0.2s; } .mr-resume-label.is-done { font-weight: 700; color: var(--mr-green); } .mr-progress-bar { height: 4px; background: var(--mr-surface); border-radius: 100px; overflow: hidden; } .mr-progress-fill { display: block; height: 100%; background: var(--mr-green); border-radius: 100px; width: 0; transition: width 0.4s ease; } .mr-step-count { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); margin-top: 6px; } .mr-resume-card { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 16px; padding: 28px; margin-bottom: 16px; } .mr-resume-card-title { font-family: var(--mr-font-display); font-size: 16px; font-weight: 700; color: var(--mr-text-primary); margin-bottom: 20px; } .mr-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .mr-span-2 { grid-column: span 2; } .mr-exp-block { background: var(--mr-bg); border: 1px solid var(--mr-border); border-radius: 12px; padding: 16px; margin-bottom: 12px; } .mr-exp-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .mr-exp-block-label { font-family: var(--mr-font-display); font-size: 13px; font-weight: 700; color: var(--mr-text-secondary); } .mr-btn-add { padding: 8px 18px; border-radius: 10px; border: 1.5px dashed var(--mr-border); background: none; color: var(--mr-text-secondary); font-family: var(--mr-font-body); font-size: 13px; cursor: pointer; width: 100%; transition: all 0.15s; } .mr-btn-add:hover { border-color: var(--mr-green-border); color: var(--mr-green); } .mr-btn-remove { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(248, 113, 113, 0.3); background: none; color: var(--mr-red); font-size: 11px; font-family: var(--mr-font-body); cursor: pointer; } .mr-btn-remove:hover { border-color: var(--mr-red); } .mr-preview-card { background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 16px; overflow: hidden; } .mr-preview-header { background: linear-gradient(135deg, var(--mr-hero-top), var(--mr-bg)); padding: 32px; border-bottom: 1px solid var(--mr-border); } .mr-preview-id { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .mr-preview-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--mr-green), #5aab1e); display: flex; align-items: center; justify-content: center; font-family: var(--mr-font-display); font-size: 24px; font-weight: 800; color: #fff; flex-shrink: 0; } .mr-preview-name { font-family: var(--mr-font-display); font-size: 24px; font-weight: 800; color: var(--mr-text-primary); margin-bottom: 4px; } .mr-preview-role { font-family: var(--mr-font-body); font-size: 15px; color: var(--mr-green); margin-bottom: 12px; } .mr-preview-contact { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-text-secondary); } .mr-preview-body-pad { padding: 24px 32px; } .mr-preview-section { margin-bottom: 24px; } .mr-preview-section:last-child { margin-bottom: 0; } .mr-preview-section-title { font-family: var(--mr-font-display); font-size: 13px; font-weight: 700; color: var(--mr-text-muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--mr-border); } .mr-preview-text { font-family: var(--mr-font-body); font-size: 14px; color: var(--mr-text-secondary); line-height: 1.7; } .mr-preview-exp { margin-bottom: 14px; } .mr-preview-exp-title { font-family: var(--mr-font-display); font-size: 14px; font-weight: 700; color: var(--mr-text-primary); } .mr-preview-exp-sub { font-family: var(--mr-font-body); font-size: 13px; color: var(--mr-green); } .mr-preview-exp-period { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); margin-bottom: 4px; } .mr-preview-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; } .mr-preview-chip { padding: 4px 12px; border-radius: 100px; background: var(--mr-green-subtle); border: 1px solid var(--mr-green-border); font-size: 12px; color: var(--mr-green); font-family: var(--mr-font-body); } .mr-download-row { display: flex; gap: 10px; padding: 16px 32px; flex-wrap: wrap; border-top: 1px solid var(--mr-border); background: var(--mr-surface-raised); } .mr-saved-note { font-family: var(--mr-font-body); font-size: 12px; color: var(--mr-text-muted); margin-top: 10px; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .mr-profile-body { grid-template-columns: 1fr; } } @media (max-width: 768px) { .mr-profile-hero { padding: 28px 16px; } .mr-profile-hero-inner { gap: 20px; } .mr-profile-avatar { width: 88px; height: 88px; font-size: 30px; } .mr-profile-name { font-size: 22px; } .mr-profile-body { padding: 24px 16px 48px; } .mr-profile-actions { width: 100%; } .mr-profile-actions > * { flex: 1; justify-content: center; } .mr-dash-header, .mr-dash-body { padding-left: 16px; padding-right: 16px; } .mr-dash-stats { grid-template-columns: 1fr 1fr; } .mr-resume-inner { padding: 24px 16px 60px; } .mr-resume-card { padding: 20px; } .mr-row-3, .mr-row-2 { grid-template-columns: 1fr; } .mr-span-2 { grid-column: auto; } .mr-resume-labels { display: none; } .mr-preview-header, .mr-preview-body-pad, .mr-download-row { padding-left: 20px; padding-right: 20px; } .mr-glance-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .mr-dash-stats { grid-template-columns: 1fr; } .mr-download-row > * { width: 100%; } } /* ---------- Print: resume preview only ---------- */ @media print { .mr-resume-stepper, .mr-download-row, .mr-wizard-footer, .mr-resume-card, .mr-page-heading, .mr-page-sub { display: none !important; } .mr-preview-card { border: none; } .mr-preview-header { background: none !important; border-bottom: 1px solid #ddd; } } /* ========================================================================== Utilities — small one-off adjustments, kept here so markup stays style-free ========================================================================== */ .mr-mt-0 { margin-top: 0; } .mr-mt-8 { margin-top: 8px; } .mr-mt-16 { margin-top: 16px; } .mr-mt-18 { margin-top: 18px; } .mr-mt-20 { margin-top: 20px; } .mr-mt-32 { margin-top: 32px; } .mr-mb-0 { margin-bottom: 0; } .mr-mb-8 { margin-bottom: 8px; } .mr-mb-14 { margin-bottom: 14px; } .mr-mb-24 { margin-bottom: 24px; } .mr-mb-32 { margin-bottom: 32px; } .mr-mb-36 { margin-bottom: 36px; } .mr-mx-auto { margin-left: auto; margin-right: auto; } .mr-py-24 { padding: 24px 0; } .mr-minh-80 { min-height: 80px; } .mr-minh-110 { min-height: 110px; } .mr-minh-120 { min-height: 120px; } .mr-block-mt-8 { width: 100%; margin-top: 8px; } .mr-title-22 { margin-bottom: 0; font-size: 22px; } .mr-icon-24 { margin-bottom: 0; font-size: 24px; } .mr-emoji-lg { font-size: 56px; margin-bottom: 16px; } .mr-lede-tight { margin: 12px auto 0; max-width: 480px; } .mr-sub-hero { margin-bottom: 24px; max-width: 600px; } .mr-lead-success-text { max-width: 380px; margin: 0 auto 24px; line-height: 1.55; } .mr-book-btn-lg { padding: 12px 32px; border-radius: 10px; font-size: 14px; } /* ========================================================================== Responsive NOTE: the prototype's media queries targeted React-style property names in attribute selectors (e.g. div[style*="gridTemplateColumns: '1fr 340px'"]), which never match real serialized DOM style text — so they were inert. These rules re-implement the intended behaviour against real class names. ========================================================================== */ /* ---------- Tablet / small desktop ---------- */ @media (max-width: 1024px) { .mr-detail-body { grid-template-columns: 1fr 300px; gap: 20px; } .mr-footer-inner { grid-template-columns: 1fr 1fr 1fr; } .mr-footer-brand { grid-column: 1 / -1; } } /* ---------- Mobile nav + stacking ---------- */ @media (max-width: 900px) { .mr-nav-inner { padding: 0 16px; gap: 12px; } .mr-nav-toggle { display: grid; } .mr-nav-links { position: fixed; top: var(--mr-nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--mr-surface); border-bottom: 1px solid var(--mr-border); padding: 12px 16px 18px; max-height: calc(100vh - var(--mr-nav-h)); overflow-y: auto; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; flex: none; } .mr-nav-links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .mr-nav-link { padding: 12px 14px; font-size: 15px; text-align: left; } .mr-nav-actions { margin-left: auto; } .mr-nav-actions .mr-btn-outline { display: none; } .mr-listing-body { flex-direction: column; padding: 16px; gap: 16px; } .mr-filter-sidebar { width: 100%; } .mr-filter-sidebar[data-open="false"] { width: 100%; height: 0; } .mr-filter-sidebar-inner { width: 100%; } .mr-detail-body { grid-template-columns: 1fr; } } /* ---------- Phones ---------- */ @media (max-width: 768px) { .mr-hero { padding: 48px 16px 40px; } .mr-hero-compact, .mr-events-hero { padding: 40px 16px 28px; } .mr-section { padding: 40px 16px; } .mr-section-narrow { padding: 20px 16px 60px; } .mr-how { padding: 40px 16px; } .mr-cta { padding: 56px 16px; } .mr-events-body { padding: 24px 16px 60px; } .mr-h1 { font-size: clamp(28px, 7vw, 48px); } .mr-h2 { font-size: 28px; } .mr-page-title { font-size: 26px; } .mr-lede { font-size: 16px; } /* Search box stacks */ .mr-search-box { flex-direction: column; } .mr-search-field-fixed { width: 100%; } /* Stats wrap tighter */ .mr-stats { gap: 24px; } .mr-stat-num { font-size: 24px; } /* Single-column grids */ .mr-job-grid, .mr-results-grid, .mr-ce-grid, .mr-ce-list { grid-template-columns: 1fr; } .mr-ce-item { border-right: none; } .mr-steps { grid-template-columns: 1fr 1fr; gap: 24px; } /* Listings toolbar */ .mr-topbar { padding: 12px 16px; } .mr-topbar-field { min-width: 100%; } .mr-btn-search-sm, .mr-btn-filters { flex: 1; } /* Job detail */ .mr-detail-header { padding: 20px; } .mr-detail-title { font-size: 22px; } .mr-detail-meta { gap: 12px; } .mr-detail-cta { flex-direction: column; } .mr-btn-apply-lg { min-width: 0; width: 100%; } .mr-btn-save-lg, .mr-btn-share-lg { width: 100%; } .mr-benefit-grid { grid-template-columns: 1fr 1fr; } /* Events */ .mr-event-card { flex-direction: row; gap: 14px; padding: 16px; } .mr-date-box { width: 62px; padding: 10px 4px; } .mr-date-day { font-size: 22px; } .mr-event-title { font-size: 16px; } /* CE module */ .mr-ce-header, .mr-ce-controls { padding-left: 16px; padding-right: 16px; } .mr-ce-select-provider { min-width: 100%; } .mr-ce-item { padding: 16px; } .mr-ce-header-title { flex: 1 1 100%; } /* Modal fills more of the screen */ .mr-modal { padding: 24px 12px; } .mr-modal-center .mr-modal-dialog { width: 100%; padding: 24px 20px; } .mr-modal-head, .mr-modal-body { padding-left: 18px; padding-right: 18px; } /* Tables scroll rather than overflow */ table { display: block; overflow-x: auto; white-space: nowrap; } /* Footer stacks */ .mr-footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; } .mr-footer { padding: 36px 16px 24px; } } /* ---------- Small phones ---------- */ @media (max-width: 480px) { .mr-logo-sub { display: none; } .mr-steps { grid-template-columns: 1fr; } .mr-stats { gap: 16px 28px; } .mr-benefit-grid { grid-template-columns: 1fr; } .mr-event-card { flex-direction: column; } .mr-date-box { width: 100%; display: flex; align-items: baseline; justify-content: center; gap: 8px; } .mr-date-day { font-size: 20px; } .mr-footer-inner { grid-template-columns: 1fr; } .mr-detail-tabs { gap: 0; } .mr-detail-tab { padding: 10px 14px; font-size: 13px; } .mr-cta-btns { flex-direction: column; } .mr-cta-btns .mr-btn-lg { width: 100%; } } /* ---------- Print ---------- */ @media print { .mr-header, .mr-footer, .mr-nav-toggle, .mr-cta, .mr-filter-sidebar, .mr-pagination, .mr-toast { display: none !important; } body { background: #fff; color: #111; } .mr-page { padding-top: 0; } .mr-card, .mr-side-card, .mr-detail-content, .mr-detail-header { border-color: #ddd; background: #fff; box-shadow: none; } }