/** * Edge Member Platform — public stylesheet * * Does not redefine theme colors/fonts/buttons/spacing — maps them to * --edge-* custom properties and reuses the theme's own class names * (.cbtn.cbnt1, .form-grid, .cards-container/.card). Loaded only on pages * with an edge_* shortcode (see Edge_Public::enqueue_assets). */ .edge-wrap { /* Tokens pulled from the theme audit — don't invent new values here. */ --edge-primary: #00ade7; /* theme's dominant brand blue */ --edge-secondary: #056cd3; /* theme's CTA/pricing-button blue */ --edge-accent-green: #08d665; /* inner-page accent, used sparingly */ --edge-text-dark: #000000; --edge-text-muted: #666666; --edge-tint-bg: #00ade717; /* theme's recurring ~9% tinted section bg */ --edge-white: #ffffff; --edge-radius: 20px; /* matches the theme's actual .card { border-radius: 20px; } — corrected 2026, was stale at 10px */ } /* Rubik everywhere inside our own markup — the theme already sets this on , but form controls (button/input/select/textarea) never inherit font-family by default, so without this they'd silently fall back to the browser's UI font. Same wildcard pattern already proven in edge-checkout.css. */ .edge-wrap, .edge-wrap * { font-family: 'Rubik', sans-serif; } /* side padding for full-width pages, covers all listing shortcodes */ .edge-wrap.edge-listing { padding-left: 60px; padding-right: 60px; } @media (max-width: 900px) { .edge-wrap.edge-listing { padding-left: 40px; padding-right: 40px; } } @media (max-width: 600px) { .edge-wrap.edge-listing { padding-left: 20px; padding-right: 20px; } } /* --------------------------------------------------------------- Series / Video grid — built on the theme's .cards-container pattern. Adds Edge-specific affordances (status badges, CTA placement) on top. ------------------------------------------------------------------ */ .edge-card-status { display: inline-block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; } .edge-card-status.not-started { background: #f2f2f2; color: var(--edge-text-muted); } .edge-card-status.in-progress { background: var(--edge-tint-bg); color: var(--edge-primary); } .edge-card-status.completed { background: #e6fff2; color: var(--edge-accent-green); } .edge-card-status.coming-soon { background: #f5f5f5; color: var(--edge-text-muted); } .edge-card-price { font-family: 'Rubik', sans-serif; font-weight: 600; color: var(--edge-secondary); font-size: 20px; margin: 10px 0; } /* --------------------------------------------------------------- Dashboard layout — no direct theme equivalent; relies on the theme's own spacing utility classes rather than redefining spacing here. ------------------------------------------------------------------ */ .edge-member-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #f7f9fb; border: 1px solid #e7ebf0; border-radius: 14px; padding: 14px 18px; margin-bottom: 22px; } .edge-member-header-who { display: flex; align-items: center; gap: 12px; } .edge-member-avatar { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(120deg, var(--edge-secondary), #0490e0); color: #fff; font-size: 16px; font-weight: 800; font-family: 'Rubik', sans-serif; } .edge-member-header-who div { display: flex; flex-direction: column; gap: 2px; } .edge-member-header-who strong { font-size: 14px; font-weight: 700; color: var(--edge-text-dark); } .edge-member-header-who span { font-size: 12px; color: var(--edge-text-muted); } .edge-member-logout { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--edge-secondary); color: var(--edge-secondary); background: #fff; border-radius: 20px; padding: 9px 18px; font-size: 12.5px; font-weight: 700; text-decoration: none; transition: all 0.15s; flex-shrink: 0; } .edge-member-logout .edge-icon { width: 14px; height: 14px; } .edge-member-logout:hover { background: var(--edge-secondary); color: #fff; } @media (max-width: 480px) { .edge-member-header { flex-direction: column; align-items: stretch; } .edge-member-logout { justify-content: center; } } .edge-dashboard-tabs { display: flex; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid #f0f0f0; margin-bottom: 30px; } .edge-dashboard-tab { padding: 12px 20px; cursor: pointer; font-family: 'Rubik', sans-serif; text-transform: uppercase; font-size: 14px; letter-spacing: 0.5px; color: var(--edge-text-muted); border-bottom: 3px solid transparent; transition: all 0.3s; } .edge-dashboard-tab.active, .edge-dashboard-tab:hover { color: var(--edge-primary); border-bottom-color: var(--edge-primary); } .edge-continue-watching-row { display: flex; align-items: center; gap: 20px; padding: 15px 0; border-bottom: 1px solid #f5f5f5; } .edge-progress-bar { height: 4px; width: 100%; background: #eee; border-radius: 4px; overflow: hidden; margin-top: 8px; } .edge-progress-bar-fill { height: 100%; background: var(--edge-primary); } .edge-progress-bar-label { display: block; font-size: 12px; color: var(--edge-text-muted); margin-top: 6px; } /* "My Professional Series" card — progress bar needs its own side padding since .edge-progress-bar's width:100% runs edge-to-edge in this zero-padding card. */ .edge-content-card .edge-progress-bar, .edge-content-card .edge-progress-bar-label { margin-left: 20px; margin-right: 20px; width: auto; } .edge-content-card .edge-progress-bar { margin-top: 14px; } /* Caps card width instead of the theme's 1fr max, so a lone card doesn't stretch to fill the row. */ .cards-container.edge-my-content-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 300px)); } /* "Continue where you left off" — shown above the My Bundles grid when a Bundle is in progress. */ .edge-resume-strip { display: flex; align-items: center; gap: 18px; background: linear-gradient(120deg, var(--edge-secondary), #0490e0); border-radius: var(--edge-radius, 20px); padding: 18px 22px; color: #fff; text-decoration: none; margin-bottom: 24px; transition: filter 0.15s; } .edge-resume-strip:hover { filter: brightness(1.05); } .edge-resume-strip-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .edge-resume-strip-icon .edge-icon { width: 18px; height: 18px; } .edge-resume-strip-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .edge-resume-strip-eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; margin-bottom: 2px; } .edge-resume-strip-title { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .edge-resume-strip-meta { font-size: 12px; opacity: 0.85; } .edge-resume-strip-cta { flex-shrink: 0; display: flex; align-items: center; gap: 4px; background: #fff; color: var(--edge-secondary); font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: 30px; white-space: nowrap; } .edge-resume-strip-cta .edge-icon { width: 13px; height: 13px; } @media (max-width: 560px) { .edge-resume-strip { flex-wrap: wrap; } .edge-resume-strip-cta { width: 100%; justify-content: center; } } /* --------------------------------------------------------------- Account notices (email verification banner, etc.) ------------------------------------------------------------------ */ .edge-notice { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 16px 20px; border-radius: 10px; margin-bottom: 25px; font-size: 14px; line-height: 1.6; } .edge-notice-icon { flex-shrink: 0; display: flex; margin-top: 2px; } .edge-notice-icon .edge-icon { width: 20px; height: 20px; } .edge-notice.warning { background: #fff8e6; border: 1px solid #ffe4a3; color: #7a5b00; } .edge-notice.warning .edge-notice-icon { color: #d97706; } .edge-notice.danger { background: #fdeaea; border: 1px solid #f5b5b5; color: #8a1f1f; } .edge-notice.danger .edge-notice-icon { color: #d63638; } .edge-notice.success { background: #e6fff2; border: 1px solid #b3f2d1; color: #0a6b3f; } .edge-notice.success .edge-notice-icon { color: #08d665; } /* Top-of-dashboard verification banner — text + Resend button stack on their own line so the button never fights the message for space. */ .edge-verification-notice-body { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; flex: 1; } .edge-verification-notice-text { flex: 1; min-width: 240px; } .edge-resend-form { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; } .edge-resend-form .edge-resend-btn { font-size: 13px; padding: 10px 22px; width: auto; min-width: 200px; } .edge-resend-form--inline { margin-top: 14px; } /* Only the copy inside Profile Update's redesigned Basic Info panel — the dashboard-wide verification banner (render_verification_notice()) keeps the theme's plain .submit-btn look. */ .edge-resend-form--inline .edge-resend-btn { background: linear-gradient(120deg, var(--edge-secondary), #0490e0); border: none; border-radius: 10px; color: #fff; font-weight: 700; } .edge-resend-form--inline .edge-resend-btn:hover { box-shadow: 0 8px 22px rgba(5, 108, 211, 0.32); } @media (max-width: 767px) { .edge-dashboard-tabs { gap: 4px; } .edge-dashboard-tab { padding: 10px 14px; font-size: 12px; } } /* --------------------------------------------------------------- Auth + Account forms — [edge_auth], [edge_reset_password], and the Dashboard's Profile Update sub-tabs all share this system. Deliberately NOT the theme's .form-container/.form-grid/.submit-btn (unlike the rest of this file) — approved as a distinct, more editorial treatment via a design-review artifact. Confirmed via grep that nothing else in the plugin uses those theme classes, so dropping them here is fully scoped. ------------------------------------------------------------------ */ .edge-wrap input:focus, .edge-wrap select:focus, .edge-wrap textarea:focus { border-color: var(--edge-primary); } /* --- Split-panel shell (Login/Signup/Forgot/Reset) --- */ .edge-auth-shell { max-width: 940px; margin: 40px auto; border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: 1fr 1.15fr; min-height: 560px; box-shadow: 0 24px 60px rgba(10, 20, 30, 0.14); border: 1px solid #e7e9ee; } .edge-auth-rail { position: relative; padding: 44px 38px; color: #eaf3fb; background: radial-gradient(circle at 85% 12%, rgba(0, 173, 231, 0.25), transparent 45%), repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 46px), linear-gradient(155deg, #0a1420 0%, #0e2338 55%, #082b3d 100%); display: flex; flex-direction: column; justify-content: flex-start; } .edge-auth-rail-copy { max-width: 280px; } .edge-auth-rail-copy .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #7fd4f2; margin: 0 0 12px; } .edge-auth-rail-copy h3 { font-size: 25px; font-weight: 800; margin: 0 0 12px; line-height: 1.25; letter-spacing: -0.01em; color: #fff; } .edge-auth-rail-copy p { font-size: 13.5px; color: #a9c3d6; line-height: 1.6; margin: 0; } /* Reuses edge/benefits-row's markup/class names, but that block's own stylesheet isn't loaded on this page — styled here instead, and forced to a single column since the rail (~300px usable width) is too narrow for the block's normal multi-column grid at any viewport size. */ .edge-auth-rail-benefits { margin-top: 30px; } .edge-auth-rail-benefits .edge-benefits-row-inner { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 18px; display: grid; grid-template-columns: 1fr; gap: 16px; } .edge-auth-rail-benefits .edge-benefits-row-item { display: flex; align-items: flex-start; gap: 11px; } .edge-auth-rail-benefits .edge-benefits-row-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; } .edge-auth-rail-benefits .edge-benefits-row-icon .edge-icon { width: 16px; height: 16px; } .edge-auth-rail-benefits .edge-benefits-row-icon--blue { background: rgba(0, 173, 231, 0.18); color: #7fd4f2; } .edge-auth-rail-benefits .edge-benefits-row-icon--green { background: rgba(8, 214, 101, 0.18); color: #6fe6a5; } .edge-auth-rail-benefits .edge-benefits-row-text strong { display: block; font-size: 12.5px; font-weight: 700; color: #fff; margin-bottom: 2px; } .edge-auth-rail-benefits .edge-benefits-row-text p { margin: 0; font-size: 11.5px; line-height: 1.5; color: #a9c3d6; } .edge-auth-form-side { background: #fff; padding: 44px 46px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } @media (max-width: 820px) { .edge-auth-shell { grid-template-columns: 1fr; min-height: 0; margin: 20px auto; } .edge-auth-rail { padding: 26px 28px; } .edge-auth-rail-benefits { display: none; } .edge-auth-form-side { padding: 30px 26px 36px; } } /* --- Pill tab switcher (top of the form side) --- */ .edge-auth-tabswitch { position: relative; display: flex; gap: 6px; margin-bottom: 30px; background: #f7f9fb; border: 1px solid #dde3ea; border-radius: 10px; padding: 4px; } .edge-auth-tabswitch button { position: relative; z-index: 1; flex: 1; border: none; background: none; padding: 9px 0; font-size: 12.5px; font-weight: 700; color: var(--edge-text-muted); border-radius: 7px; cursor: pointer; font-family: inherit; transition: color 0.2s; } .edge-auth-tabswitch button.is-active { color: #fff; } .edge-auth-tabswitch-indicator { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(33.333% - 4px); background: linear-gradient(120deg, var(--edge-secondary), #0490e0); border-radius: 7px; transition: transform 0.32s cubic-bezier(0.65, 0, 0.35, 1); z-index: 0; } /* --- Section transitions (directional slide, see edge-auth-widget.js) --- */ .edge-auth-section.is-active { animation: edgeAuthSlideIn 0.38s cubic-bezier(0.2, 0.7, 0.3, 1); } .edge-auth-section.is-active.is-back { animation-name: edgeAuthSlideInBack; } @keyframes edgeAuthSlideIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } } @keyframes edgeAuthSlideInBack { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } } .edge-auth-title { font-size: 19px; font-weight: 700; margin: 0 0 6px; letter-spacing: normal; color: var(--edge-text-dark); } .edge-auth-desc { font-size: 12.5px; color: #4c6b85; margin: 0 0 24px; } /* Sign Up section only — the Know More link sits between this and the form, so it needs a tighter gap. */ [data-edge-section="signup"] .edge-auth-desc { margin-bottom: 12px; } .edge-auth-know-more { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--edge-secondary); text-decoration: none; margin: 0 0 22px; } .edge-auth-know-more:hover { text-decoration: underline; } /* --- Floating-label fields (shared by auth widget + Profile Update) --- */ .edge-field { position: relative; margin-bottom: 18px; } .edge-field input, .edge-field select { width: 100%; padding: 18px 14px 8px; border: 1.5px solid #dde3ea; border-radius: 10px; font-size: 14.5px; background: #f7f9fb; color: var(--edge-text-dark); font-family: inherit; transition: border-color 0.18s, box-shadow 0.18s; } .edge-field input:focus, .edge-field select:focus { outline: none; border-color: var(--edge-secondary); box-shadow: 0 0 0 3px rgba(5, 108, 211, 0.12); } .edge-field label { position: absolute; left: 14px; top: 17px; font-size: 14px; color: var(--edge-text-muted); pointer-events: none; transition: transform 0.16s ease, font-size 0.16s ease, color 0.16s ease, top 0.16s ease; } .edge-field-optional { font-weight: 400; opacity: 0.7; } .edge-field input:focus + label, .edge-field input.has-value + label, .edge-field select + label { top: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--edge-secondary); } .edge-field-row { display: flex; gap: 12px; } .edge-field-row .edge-field { flex: 1; } .edge-field-eye { position: absolute; right: 12px; top: 14px; background: none; border: none; cursor: pointer; color: var(--edge-text-muted); padding: 4px; display: flex; } .edge-field-eye:hover { color: var(--edge-secondary); } .edge-field-eye .edge-icon { width: 17px; height: 17px; } .edge-field.is-shake { animation: edgeFieldShake 0.38s; } @keyframes edgeFieldShake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } .edge-field input.edge-input-invalid, .edge-field select.edge-input-invalid { border-color: #d63638 !important; background: #fff8f8; } .edge-field-error { display: block; min-height: 15px; color: #d63638; font-size: 11.5px; margin-top: 5px; line-height: 1.4; } /* --- Password strength meter + match check --- */ .edge-field-strength { margin: -6px 0 18px; } .edge-field-strength-bar { height: 5px; border-radius: 3px; background: #dde3ea; overflow: hidden; } .edge-field-strength-fill { height: 100%; width: 0%; border-radius: 3px; transition: width 0.25s ease, background 0.25s ease; } .edge-field-strength-label { font-size: 11px; margin-top: 5px; color: var(--edge-text-muted); display: flex; justify-content: space-between; } .edge-field-match { font-size: 11.5px; margin-top: -12px; margin-bottom: 18px; display: flex; align-items: center; gap: 5px; height: 15px; opacity: 0; transition: opacity 0.2s; color: #0d9488; } .edge-field-match.is-visible { opacity: 1; } .edge-field-match .edge-icon { width: 13px; height: 13px; } /* --- Postcode live-check (Profile → Billing) --- */ .edge-field-postcheck { display: block; min-height: 15px; font-size: 11.5px; margin-top: 5px; transition: color 0.15s; } .edge-field-postcheck.is-valid { color: #0d9488; } .edge-field-postcheck.is-invalid { color: #d63638; } /* --- Disclaimer + Terms of Access (Sign Up) — same copy/treatment as the Checkout page --- */ .edge-auth-disclaimer { background: #f7f9fb; border: 1px solid #e3e8ee; border-radius: 10px; padding: 13px 15px; margin: 4px 0 14px; } .edge-auth-disclaimer-tag { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #4c6b85; margin-bottom: 6px; } .edge-auth-disclaimer p { font-size: 11.5px; line-height: 1.6; color: #4c6b85; margin: 0; } .edge-auth-terms-panel { background: #fbf7f0; border: 1px solid #ecdfc8; border-radius: 12px; padding: 15px 16px; margin: 0 0 14px; } .edge-auth-terms-panel h4 { font-size: 13px; font-weight: 800; color: var(--edge-text-dark); margin: 0 0 4px; } .edge-auth-terms-sub { font-size: 11px; color: #4c6b85; margin: 0 0 10px; } .edge-auth-terms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 160px; overflow-y: auto; } .edge-auth-terms-list li { font-size: 11px; line-height: 1.55; color: #2b2b2b; padding-left: 18px; position: relative; } /* Plain bullet dot, not the "\2610" checkbox glyph — that read as a clickable checkbox and confused members into tapping it, when the real (required) agreement checkbox lives below this list. */ .edge-auth-terms-list li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: #4c6b85; } /* --- Checkbox rows (Terms of Access agreement) --- */ .edge-checkbox-label { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--edge-text-muted); cursor: pointer; margin-bottom: 12px; } .edge-checkbox-label input[type="checkbox"] { width: auto; margin-top: 2px; flex-shrink: 0; } .edge-checkbox-label a { color: var(--edge-secondary); } /* --- Buttons (gradient, spinner → checkmark morph) --- */ .edge-auth-btn { width: 100%; position: relative; padding: 15px; border: none; border-radius: 10px; font-size: 14.5px; font-weight: 700; color: #fff; background: linear-gradient(120deg, var(--edge-secondary), #0490e0); cursor: pointer; font-family: inherit; transition: transform 0.12s, box-shadow 0.2s; margin-top: 4px; overflow: hidden; } .edge-auth-btn:hover { box-shadow: 0 8px 22px rgba(5, 108, 211, 0.32); } .edge-auth-btn:active { transform: scale(0.985); } .edge-auth-btn:disabled { cursor: default; } .edge-auth-btn .edge-btn-label { display: inline-flex; align-items: center; gap: 8px; transition: opacity 0.15s; } .edge-auth-btn.is-loading .edge-btn-label { opacity: 0; } .edge-auth-btn .edge-btn-spin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; opacity: 0; } .edge-auth-btn.is-loading .edge-btn-spin { opacity: 1; animation: edgeSpin 0.6s linear infinite; } @keyframes edgeSpin { to { transform: rotate(360deg); } } .edge-auth-btn .edge-btn-check { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; opacity: 0; } .edge-auth-btn.is-success .edge-btn-check { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s; } .edge-auth-btn.is-success .edge-btn-label, .edge-auth-btn.is-success .edge-btn-spin { opacity: 0; } /* Secondary (small, inline) variant — Profile Update's Save buttons don't need full-width. */ .edge-auth-btn.edge-auth-btn--inline { width: auto; min-width: 180px; padding: 13px 26px; } .edge-auth-submit-note { margin: 14px 0 0; font-size: 12px; color: #7b8794; text-align: center; } /* --- Bottom text links + message banner --- */ .edge-auth-switch { text-align: center; font-size: 12.5px; color: #4c6b85; margin-top: 20px; } .edge-auth-link { background: none; border: none; padding: 0; color: var(--edge-secondary); font-size: inherit; font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit; } .edge-auth-link:hover { text-decoration: underline; } .edge-auth-sep { color: #c7d0d8; margin: 0 8px; } .edge-auth-back { color: var(--edge-text-muted); font-weight: 600; } .edge-auth-message, .edge-form-message { margin-bottom: 18px; } .edge-auth-message:empty, .edge-form-message:empty { display: none; margin: 0; } /* --- Reset-password success state (no AJAX on that page — plain markup swap) --- */ .edge-auth-reset-success { text-align: center; padding: 20px 0; } .edge-auth-reset-success .edge-auth-reset-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(13, 148, 136, 0.12); color: #0d9488; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .edge-auth-reset-icon .edge-icon { width: 26px; height: 26px; } /* --------------------------------------------------------------- Profile Update (Dashboard) — same field/button system as above, plus a pill sub-tab bar with a sliding indicator. ------------------------------------------------------------------ */ .edge-profile-card { border: 1px solid #e7e9ee; border-radius: 18px; background: #fff; padding: 8px; max-width: 640px; box-shadow: 0 14px 34px rgba(10, 20, 30, 0.08); } .edge-profile-subtabs { position: relative; display: flex; gap: 4px; background: #f7f9fb; border: 1px solid #dde3ea; border-radius: 12px; padding: 4px; margin-bottom: 22px; } .edge-profile-subtab { position: relative; z-index: 1; flex: 1; text-align: center; padding: 10px 0; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--edge-text-muted); border-radius: 8px; transition: color 0.2s; } .edge-profile-subtab.active { color: #fff; } .edge-profile-subtab-indicator { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(33.333% - 4px); background: linear-gradient(120deg, #0d9488, #14b8a6); border-radius: 8px; transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1); } .edge-profile-body { padding: 8px 22px 22px; } .edge-profile-label-row { display: flex; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--edge-text-muted); margin: 0 0 6px; } .edge-verified-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 8px; border-radius: 20px; margin-left: 8px; vertical-align: middle; } .edge-verified-badge .edge-icon { width: 11px; height: 11px; } .edge-verified-badge.is-verified { background: #e6fff2; color: #0a6b3f; } .edge-verified-badge.is-unverified { background: #fff8e6; color: #7a5b00; } @media (max-width: 767px) { .edge-profile-body { padding: 8px 4px 16px; } .edge-field-row { flex-direction: column; gap: 0; } } /* --------------------------------------------------------------- Contact Support tab — Forminator form 446. Retargets Forminator's own class names (forminator-field/-input/-button/etc, confirmed against library/fields/text.php and front-render.php) rather than adopting the .edge-field system, since Forminator renders/validates this form itself — only the visual skin changes here, structure stays Forminator's. ------------------------------------------------------------------ */ .edge-support-form, .edge-support-form * { font-family: 'Rubik', sans-serif; } /* Constrained to a real form width instead of stretching across the whole dashboard panel, and given its own card so it doesn't read as loose fields floating in the wide panel. */ .edge-support-form { max-width: 560px; border: 1px solid #e7e9ee; border-radius: 16px; padding: 26px 28px; box-shadow: 0 10px 28px rgba(10, 20, 30, 0.06); } .edge-support-form .forminator-field { margin-bottom: 18px; } .edge-support-form .forminator-label { display: block; font-size: 13px; font-weight: 600; color: var(--edge-text-dark); margin-bottom: 6px; } .edge-support-form .forminator-required { color: #d63638; margin-left: 2px; } .edge-support-form .forminator-input, .edge-support-form .forminator-textarea, .edge-support-form select { width: 100%; padding: 12px 14px; border: 1.5px solid #dde3ea; border-radius: 10px; background: #f7f9fb; font-size: 14.5px; font-family: inherit; color: var(--edge-text-dark); transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; } .edge-support-form .forminator-input:focus, .edge-support-form .forminator-textarea:focus, .edge-support-form select:focus { outline: none; border-color: var(--edge-secondary); box-shadow: 0 0 0 3px rgba(5, 108, 211, 0.12); background: #fff; } .edge-support-form .forminator-textarea { min-height: 130px; resize: vertical; } .edge-support-form .forminator-description { font-size: 11.5px; color: #4c6b85; margin-top: 4px; } .edge-support-form .forminator-button.forminator-button-submit { background: linear-gradient(120deg, var(--edge-secondary), #0490e0); border: none; border-radius: 10px; color: #fff; font-weight: 700; font-size: 14.5px; padding: 14px 20px; cursor: pointer; transition: box-shadow 0.2s, transform 0.12s; } .edge-support-form .forminator-button.forminator-button-submit:hover { box-shadow: 0 8px 22px rgba(5, 108, 211, 0.32); } .edge-support-form .forminator-button.forminator-button-submit:active { transform: scale(0.985); } .edge-support-form .forminator-response-message { border-radius: 10px; padding: 12px 16px; font-size: 13px; margin-bottom: 16px; } .edge-support-form .forminator-response-message.forminator-success { background: #e6fff2; color: #0a6b3f; } .edge-support-form .forminator-response-message.forminator-error[aria-hidden="false"] { background: #fff0f0; color: #b42318; } /* --------------------------------------------------------------- Purchase History tab — filter bar, table (stacked-card below 767px via data-label), pagination, order-detail slide-over. Only layout here; input/select styling comes from the theme's global rule. ------------------------------------------------------------------ */ .edge-ph-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .edge-ph-filter-wrap { position: relative; } .edge-ph-filter-wrap::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--edge-text-muted); border-bottom: 1.5px solid var(--edge-text-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .edge-ph-filter { appearance: none; -webkit-appearance: none; min-width: 150px; padding: 10px 34px 10px 14px; border: 1.5px solid #dde3ea; border-radius: 10px; background: #f7f9fb; font-size: 12.5px; font-weight: 600; font-family: 'Rubik', sans-serif; color: var(--edge-text-dark); cursor: pointer; transition: border-color 0.18s, box-shadow 0.18s; } .edge-ph-filter:focus { outline: none; border-color: var(--edge-secondary); box-shadow: 0 0 0 3px rgba(5, 108, 211, 0.12); } .edge-purchase-history-results { transition: opacity 0.15s; } .edge-purchase-history-results.is-loading { opacity: 0.5; pointer-events: none; } .edge-ph-empty { color: var(--edge-text-muted); } .edge-ph-list { display: flex; flex-direction: column; gap: 10px; } .edge-ph-card { display: grid; grid-template-columns: 120px 1fr 100px 130px 90px; align-items: center; gap: 16px; border: 1px solid #e7e9ee; border-radius: 12px; padding: 14px 18px; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; } .edge-ph-card:hover { border-color: var(--edge-secondary); box-shadow: 0 4px 14px rgba(5, 108, 211, 0.08); } .edge-ph-order-num { font-size: 13px; font-weight: 800; color: var(--edge-text-dark); } .edge-ph-order-date { display: block; font-size: 10.5px; font-weight: 500; color: var(--edge-text-muted); margin-top: 2px; } .edge-ph-items { font-size: 12.5px; font-weight: 600; color: var(--edge-text-dark); } .edge-ph-amount { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--edge-text-dark); } .edge-ph-view-btn { justify-self: end; background: none; border: 1.5px solid var(--edge-secondary); color: var(--edge-secondary); border-radius: 20px; padding: 7px 16px; font-size: 11.5px; font-weight: 700; font-family: 'Rubik', sans-serif; cursor: pointer; transition: all 0.15s; } .edge-ph-view-btn:hover { background: var(--edge-secondary); color: #fff; } /* Order status badge — separate class from the progress badge (.edge-card-status.completed); "Completed" means different things for each. */ .edge-order-status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; padding: 5px 11px; border-radius: 20px; width: fit-content; } .edge-order-status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .edge-order-status-badge.status-completed { background: rgba(13, 148, 136, 0.12); color: #0d9488; } .edge-order-status-badge.status-processing { background: rgba(5, 108, 211, 0.12); color: var(--edge-secondary); } .edge-order-status-badge.status-on-hold, .edge-order-status-badge.status-pending { background: rgba(181, 86, 12, 0.1); color: #b5560c; } .edge-order-status-badge.status-cancelled, .edge-order-status-badge.status-refunded, .edge-order-status-badge.status-failed { background: #fdeaea; color: #8a1f1f; } .edge-ph-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 22px; } .edge-ph-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1.5px solid #dde3ea; background: #f7f9fb; color: var(--edge-text-muted); font-size: 12.5px; font-weight: 700; font-family: 'Rubik', sans-serif; cursor: pointer; transition: all 0.15s; } .edge-ph-page-btn:hover:not(:disabled) { border-color: var(--edge-secondary); color: var(--edge-secondary); } .edge-ph-page-btn.active { background: linear-gradient(120deg, var(--edge-secondary), #0490e0); border-color: transparent; color: #fff; } .edge-ph-page-btn:disabled { opacity: 0.35; cursor: default; } .edge-ph-page-btn.prev .edge-icon { width: 13px; height: 13px; transform: rotate(180deg); } .edge-ph-page-btn.next .edge-icon { width: 13px; height: 13px; } @media (max-width: 820px) { .edge-ph-card { grid-template-columns: 1fr; gap: 6px; } .edge-ph-view-btn { justify-self: start; margin-top: 6px; } } /* --- Order detail slide-over panel --- */ .edge-order-panel-backdrop { position: fixed; inset: 0; background: rgba(20, 20, 30, 0.45); z-index: 99000; opacity: 0; visibility: hidden; transition: opacity 0.25s ease; } .edge-order-panel-backdrop.is-open { opacity: 1; visibility: visible; } .edge-order-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 92vw); background: #fff; z-index: 99001; display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18); transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .edge-order-panel.is-open { transform: translateX(0); } .edge-order-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 26px; border-bottom: 1px solid #e2e4e7; flex-shrink: 0; } .edge-order-panel-header h2 { margin: 0; font-size: 18px; } .edge-order-panel-close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: none; background: #f0f0f1; color: var(--edge-text-muted); cursor: pointer; flex-shrink: 0; transition: all 0.15s; } .edge-order-panel-close:hover { background: #fdeaea; color: #8a1f1f; } .edge-order-panel-close .edge-icon { width: 16px; height: 16px; } .edge-order-panel-body { flex: 1; overflow-y: auto; padding: 26px; } .edge-order-panel-loading { color: var(--edge-text-muted); } .edge-order-detail-summary { display: flex; align-items: center; justify-content: space-between; background: #f7f9fb; border: 1px solid #dde3ea; border-radius: 12px; padding: 14px 16px; margin-bottom: 22px; } .edge-order-detail-total { font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; color: var(--edge-text-dark); } .edge-order-detail-eyebrow { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--edge-secondary); margin: 22px 0 10px; } .edge-order-detail-eyebrow:first-of-type { margin-top: 0; } .edge-order-detail-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #eff1f4; font-size: 12.5px; } .edge-order-detail-item:last-child { border-bottom: none; } .edge-order-detail-item-name { display: block; font-weight: 600; color: var(--edge-text-dark); } .edge-order-detail-item-meta { display: block; font-size: 11px; color: var(--edge-text-muted); margin-top: 1px; } .edge-order-detail-item-price { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--edge-text-dark); flex-shrink: 0; } /* Connected timeline — a vertical rule behind each dot, matching the timeline in the Enroll page's "What You Get" list conceptually but built fresh here for this context. */ .edge-order-detail-timeline { position: relative; padding-left: 20px; } .edge-order-detail-timeline::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 1.5px; background: #dde3ea; } .edge-order-detail-tl-item { position: relative; padding-bottom: 16px; } .edge-order-detail-tl-item:last-child { padding-bottom: 0; } .edge-order-detail-tl-item::before { content: ""; position: absolute; left: -20px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: #0d9488; border: 2px solid #fff; box-shadow: 0 0 0 1.5px #0d9488; } .edge-order-detail-tl-label { font-size: 12.5px; font-weight: 700; color: var(--edge-text-dark); } .edge-order-detail-tl-date { font-size: 11px; color: var(--edge-text-muted); margin-top: 1px; } .edge-order-detail-payment-method { font-size: 11.5px; color: var(--edge-text-muted); margin: 10px 0 0; } .edge-order-detail-billing { background: #f7f9fb; border: 1px solid #dde3ea; border-radius: 12px; padding: 14px 16px; } .edge-order-detail-billing p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.7; color: var(--edge-text-dark); } .edge-order-detail-billing p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------- Plugin page templates — content wrapper + sidebar widget styling. Minimal: the theme's own container/row/col-lg-* grid does most of the work. ------------------------------------------------------------------ */ .edge-page-content { color: #000; font-size: 16px; line-height: 1.7; } .edge-page-content > *:first-child { margin-top: 0; } /* Replaces .subpage-banner's hero with just enough top clearance for the theme's overlaid .header-area; values copied from .subpage-banner's own padding. */ .edge-page-top-spacer { height: 200px; } @media (max-width: 991px) { .edge-page-top-spacer { height: 100px; } } /* --compact: edge-template-detail.php only. Just clears the theme's real header content (not the photo-hero room .subpage-banner reserved), since render_compact_header() after it is a short gradient bar, not a tall image. */ .edge-page-top-spacer--compact { height: 150px; } @media (max-width: 991px) { .edge-page-top-spacer--compact { height: 85px; } } /* header gets +20px padding below 767px (responsive.css), spacer needs to match */ @media (max-width: 767px) { .edge-page-top-spacer--compact { height: 105px; } } .edge-page-content h1, .edge-page-content h2, .edge-page-content h3, .edge-page-content h4 { color: #00ade7; margin-top: 1.6em; margin-bottom: 0.6em; } .edge-page-content img { border-radius: 8px; height: auto; max-width: 100%; } .edge-page-content ul, .edge-page-content ol { padding-left: 22px; margin-bottom: 20px; } .edge-page-sidebar { padding-left: 10px; } .edge-widget { background: #fff; border: 1px solid #f0f0f0; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); padding: 24px; margin-bottom: 24px; } .edge-widget-title { font-family: 'Rubik', sans-serif; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; color: #00ade7; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid #00ade717; } .edge-widget:last-child { margin-bottom: 0; } @media (max-width: 991px) { .edge-page-sidebar { padding-left: 0; margin-top: 30px; } } /* --------------------------------------------------------------- [edge_series_listing] / [edge_detail] — cards reuse the theme's real .cards-container/.card; the Series "showcase" hero is purpose-built using the theme's dark-section tokens. ------------------------------------------------------------------ */ /* Matches the theme's own section heading (.heading h2 in theme.css), copied directly instead of requiring the theme's .heading wrapper div. */ .edge-listing-section-title { font-size: 35px; line-height: 46px; text-transform: uppercase; color: #00ade7; font-weight: 500; letter-spacing: 0.1px; margin: 50px 0 0; } .edge-listing-section-title:first-child { margin-top: 0; } /* --- Standalone Video card (grid) --- */ /* Compound selector so this zero-padding override reliably beats the theme's .card { padding: 42px 25px; } on specificity, not load order. */ .card.edge-content-card { padding: 0; text-align: left; display: flex; flex-direction: column; } .edge-card-thumb-link { display: block; text-decoration: none; } .edge-card-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #dbeafe, #e0f2fe); } .edge-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .card:hover .edge-card-thumb img { transform: scale(1.06); } .edge-card-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--edge-primary); } .edge-card-thumb-placeholder .edge-icon { width: 36px; height: 36px; } .edge-content-card > .edge-card-status { position: absolute; top: 12px; left: 12px; z-index: 2; } .edge-card-preview-btn { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; background: rgba(0, 0, 0, 0.55); color: #fff; border: none; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.2s; } .edge-card-preview-btn:hover { background: var(--edge-primary); } .edge-card-preview-btn .edge-icon { width: 13px; height: 13px; } .edge-card-title-link { display: block; text-decoration: none; padding: 16px 20px 0; } /* Matches the theme's own blog card title (.blog-description a) for consistency; .edge-highlight-card tiles intentionally stay smaller. */ .edge-content-card .card-title { font-size: 20px; font-family: 'Rubik', sans-serif; font-weight: 500; text-transform: uppercase; line-height: 1.3; margin: 0; } .edge-highlight-card .card-title { font-size: 1.05rem; margin: 0; } .edge-content-card .edge-card-price { padding: 6px 20px 0; font-size: 18px; margin: 0; } .edge-card-cta { padding: 14px 20px 20px; margin-top: auto; } .edge-card-cta-btn { display: inline-flex; width: 100%; justify-content: center; } /* .cbtn.cbnt1 reserves right-side padding for an arrow icon these CTAs don't have; override keeps the label centered. */ .edge-card-cta-btn.cbtn.cbnt1 { padding: 11px 20px; font-size: 14px; } /* Series watch page's "Continue Studying" — same .cbnt1 arrow-padding issue, made it look oversized/lopsided. */ #edge-continue-btn.cbtn.cbnt1 { padding: 11px 22px; font-size: 13.5px; } .edge-card-cta-disabled { display: block; text-align: center; padding: 11px 20px; border-radius: 6px; background: #f0f0f1; color: var(--edge-text-muted); font-size: 13px; font-weight: 600; } /* --- Series showcase block --- */ .edge-series-showcase { margin-bottom: 60px; } .edge-series-hero { display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(135deg, #0b0d0e, #131617); border-radius: 20px; overflow: hidden; color: #fff; margin-bottom: 24px; } .edge-series-hero-media { position: relative; display: block; overflow: hidden; } .edge-series-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .edge-series-hero-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); color: var(--edge-primary); } .edge-series-hero-stats { position: absolute; bottom: 14px; left: 14px; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; } .edge-series-hero-body { padding: 36px; display: flex; flex-direction: column; justify-content: center; } .edge-series-hero-body .edge-card-status { align-self: flex-start; background: rgba(0, 173, 231, 0.18); color: #6fd3f5; margin-bottom: 14px; } .edge-series-hero-body h2 { margin: 0 0 12px; color: #fff; } .edge-series-hero-body h2 a { color: #fff; text-decoration: none; } .edge-series-hero-body h2 a:hover { color: var(--edge-primary); } .edge-series-hero-body p, .edge-series-hero-description { color: rgba(255, 255, 255, 0.75); line-height: 1.7; } .edge-series-hero-body .edge-card-preview-btn { position: static; margin-top: 18px; align-self: flex-start; background: var(--edge-primary); } .edge-series-hero-body .edge-card-preview-btn:hover { background: var(--edge-secondary); } /* Price + Buy Now merged into the dark hero panel next to Preview, replacing the old separate white price card. */ .edge-series-hero-purchase { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .edge-series-hero-price { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 26px; color: #fff; flex-shrink: 0; } .edge-series-hero-purchase .edge-card-cta-btn.cbtn.cbnt1 { padding: 13px 30px; font-size: 15px; } .edge-series-hero-purchase .edge-card-cta-disabled { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7); } .edge-series-highlights-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--edge-text-muted); margin: 0 0 14px; } /* Hand-rolled carousel — native scroll + scroll-snap does the paging, no JS library. Nav arrows hide via .is-scrollable when nothing to scroll. */ .edge-series-highlights-wrap { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 24px; } .edge-series-highlights { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-bottom: 0; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* old Edge/IE */ } .edge-series-highlights::-webkit-scrollbar { display: none; /* Chrome/Safari — nav arrows + drag/touch remain the scroll affordance */ } .edge-series-highlights .card { flex: 0 0 230px; scroll-snap-align: start; /* The theme's own .card rule sets height:100% for its native CSS-grid usage — inside this flex row that resolves against an indefinite container height and stops flexbox's own stretch from equalizing card heights, which is why a longer title made its card taller than its siblings instead of the whole row matching it. height:auto + align-self:stretch is the correct override for a flex context. */ height: auto; align-self: stretch; } .edge-series-highlights-nav { flex-shrink: 0; display: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e2e4e7; background: #fff; color: var(--edge-text-dark); cursor: pointer; transition: all 0.15s; } .edge-series-highlights-wrap.is-scrollable .edge-series-highlights-nav { display: flex; } .edge-series-highlights-nav:hover { background: var(--edge-primary); border-color: var(--edge-primary); color: #fff; } .edge-series-highlights-nav .edge-icon { width: 15px; height: 15px; } .edge-series-highlights-nav.prev .edge-icon { transform: rotate(180deg); } .edge-highlight-card { cursor: default; padding: 16px; text-align: left; } .edge-highlight-card .edge-card-thumb { border-radius: 10px; margin-bottom: 12px; } .edge-highlight-card-desc { font-size: 13px; color: var(--edge-text-muted); margin: 6px 0 0; line-height: 1.5; } .edge-view-all-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; gap: 10px; background: var(--edge-tint-bg); } .edge-view-all-count { font-family: 'Rubik', sans-serif; font-size: 22px; font-weight: 700; color: var(--edge-primary); } .edge-view-all-label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--edge-secondary); } .edge-view-all-label .edge-icon { width: 13px; height: 13px; } /* --- Series grid card ([edge_series_listing style="cards"]) --- */ /* Reuses .edge-content-card/.edge-card-thumb/etc. from the standalone-Video card; only card width differs, via .edge-series-grid. */ /* Numbered ribbon + floating category badge + diagonal "Upcoming" flag — replaces the plain .edge-card-status pill for this card only. */ .edge-grid-card-ribbon { position: absolute; top: 14px; left: 0; background: var(--edge-primary); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; padding: 5px 14px 5px 12px; border-radius: 0 20px 20px 0; z-index: 2; } .edge-grid-card-soon-ribbon { position: absolute; top: 16px; right: -32px; background: #14b8a6; color: #f0f8f7; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px; padding: 5px 38px; transform: rotate(40deg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); z-index: 2; } .edge-grid-card-icon-badge { position: absolute; left: 50%; transform: translateX(-50%); bottom: -22px; width: 46px; height: 46px; border-radius: 12px; background: #0b3f56; color: #6fd3f5; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0, 20, 35, 0.28); border: 3px solid #fff; z-index: 2; } .edge-grid-card-icon-badge .edge-icon { width: 20px; height: 20px; } .edge-series-grid-card .edge-card-thumb-link { position: relative; } .edge-series-grid-card .card-title { margin-top: 14px; } /* --- Section head ([edge_series_listing]/[edge_series_previews] heading + subheading attributes) --- */ .edge-section-head { text-align: center; max-width: 640px; margin: 50px auto 34px; } .edge-listing-section-title:first-child + .edge-section-head, .edge-section-head:first-child { margin-top: 0; } .edge-section-head-eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--edge-secondary); margin: 0 0 10px; } .edge-section-head h2 { font-size: 30px; line-height: 1.25; color: var(--edge-text-dark); font-weight: 600; margin: 0 0 10px; text-wrap: balance; } .edge-section-rule { display: block; width: 46px; height: 3px; background: var(--edge-primary); margin: 0 auto 14px; border-radius: 2px; } .edge-section-sub { font-size: 14px; color: var(--edge-text-muted); line-height: 1.6; margin: 0; } /* Fixed track count (repeat(5, 1fr)), not auto-fit — auto-fit would stretch 1-2 cards to fill the row instead of leaving it empty. */ .edge-series-grid-static { display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; gap: 20px; margin-bottom: 60px; } /* Shared CTA below a bundle-scoped [edge_series_listing] cards grid — replaces N identical per-card buttons (every card already points at the same Bundle page in that context) with one. */ .edge-series-listing-cta { text-align: center; margin-top: 8px; margin-bottom: 40px; } /* .cbtn.cbnt1 reserves right-side padding for an arrow icon this CTA doesn't have; override keeps the label centered. */ .edge-series-listing-cta .cbtn.cbnt1 { padding: 13px 26px; font-size: 14px; } /* Tablet: same fixed-track-count reasoning, fewer columns — 3 reads better than squeezing 4-5 into a tablet-width row. */ @media (max-width: 991px) { .edge-series-grid-static { grid-template-columns: repeat(3, 1fr); } } /* align-items: stretch is flex's own default; stated explicitly so equal card heights don't depend on that surviving future edits. */ .edge-series-highlights.edge-series-grid { align-items: stretch; } .edge-series-highlights.edge-series-grid .card { flex: 0 0 280px; } .edge-card-desc { padding: 8px 8px 0; margin: 0; font-size: 11px; color: var(--edge-text-muted); line-height: 1.6; } .edge-card-meta { display: flex; align-items: center; gap: 6px; padding: 10px 20px 0; font-size: 13px; color: var(--edge-text-muted); } .edge-card-meta .edge-icon { width: 14px; height: 14px; color: var(--edge-primary); flex-shrink: 0; } /* Matches the theme's own blog "read more" link (a.readmore-btn: 12px, uppercase) — same reasoning as the card-title match above. */ .edge-card-view-details-link { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 20px 18px; font-family: 'Rubik', sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--edge-primary); text-decoration: none; } .edge-card-view-details-link:hover { color: var(--edge-secondary); } .edge-card-view-details-link .edge-icon { width: 12px; height: 12px; } /* --- Single-Bundle page ([edge_bundle_listing bundle="..."]) --- */ .edge-bundle-page-head { text-align: center; } .edge-bundle-page-eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--edge-primary); margin: 0 0 10px; } .edge-view-series-btn { display: block; text-align: center; padding: 11px 20px; border-radius: 6px; background: var(--edge-secondary); color: #fff; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; transition: background 0.15s ease; } .edge-view-series-btn:hover { background: #000; color: #fff; } /* --- Series preview grid ([edge_series_previews style="grid"]) — wraps to as many rows as needed instead of scrolling sideways, for a dedicated "all previews" page that keeps working as more Series are added. Plain .cards-container grid (the theme's own class), so it inherits the theme's native equal-height .card behavior directly with no extra override needed. --- */ .edge-series-previews-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* --- Series preview strip ([edge_series_previews]) --- */ .edge-series-highlights.edge-series-previews .card { flex: 0 0 220px; } .card.edge-preview-card { padding: 0; text-align: left; cursor: default; box-shadow: 0 1px 3px rgba(11, 13, 14, 0.06); transition: transform 0.18s, box-shadow 0.18s; } .card.edge-preview-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(11, 13, 14, 0.12); } .edge-preview-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: none; padding: 0; margin: 0; cursor: pointer; background: linear-gradient(135deg, #dbeafe, #e0f2fe); border-radius: 20px 20px 0 0; } .edge-preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* "Allow Preview" on but no Vimeo ID/file set yet — card still shows, but nothing to click. */ .edge-preview-thumb--static { cursor: default; } .edge-preview-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; } .edge-preview-thumb:hover .edge-preview-play-icon { background: var(--edge-primary); transform: translate(-50%, -50%) scale(1.08); } .edge-preview-play-icon .edge-icon { width: 17px; height: 17px; } .edge-preview-index { margin: 14px 20px 0; font-size: 14px; color: var(--edge-text-dark); } .edge-preview-title { margin: 4px 20px 16px; font-size: 13px; color: var(--edge-text-muted); } .edge-series-previews-cta { text-align: center; margin-top: 20px; } /* .cbtn.cbnt1 reserves right-side padding for an arrow icon this CTA doesn't have; override keeps the label centered. */ .edge-series-previews-cta .cbtn.cbnt1 { padding: 13px 26px; font-size: 14px; } /* Small screens: both layouts collapse to one card per row; nav arrows hidden outright since there's nothing to scroll. */ @media (max-width: 767px) { .edge-series-grid-static { grid-template-columns: 1fr; } .edge-series-highlights.edge-series-grid { flex-direction: column; overflow-x: visible; } .edge-series-highlights.edge-series-grid .card { flex: 1 1 auto; width: 100%; } .edge-series-grid-wrap .edge-series-highlights-nav { display: none; } } /* Still used by the standalone-Video Detail page's price/CTA block. */ .edge-price-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; background: #fff; border: 1px solid #e2e4e7; border-radius: 16px; padding: 24px 28px; } .edge-price-card .edge-card-price { font-size: 28px; margin: 0; } .edge-price-card .edge-card-cta-btn.cbtn.cbnt1 { padding: 13px 28px; font-size: 15px; } /* --- Coming Soon (Series + Videos share .edge-card-status.coming-soon already) --- */ .edge-coming-soon-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 300px)); align-items: stretch; gap: 20px; margin-bottom: 60px; } /* Caps card width instead of the theme's 1fr max so 1-2 Videos don't stretch to fill the row; scoped via extra class, shared rule untouched. */ .cards-container.edge-video-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 300px)); align-items: stretch; } .edge-coming-soon-card { border: 1px dashed #d0d5dd; border-radius: 16px; padding: 24px; background: #fafbff; } .edge-coming-soon-card h3 { margin: 10px 0 8px; font-size: 1.1rem; } .edge-coming-soon-card p { color: var(--edge-text-muted); font-size: 14px; margin: 0 0 14px; } .edge-coming-soon-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid #eee; } .edge-coming-soon-count { font-size: 12px; color: var(--edge-text-muted); } /* --- Detail page --- */ .edge-detail { padding: 40px 0 60px; } /* Bundle + Series study pages: flat neutral gray across the FULL viewport width, not just the centered .container column inside it — .container has its own side gutters at wide viewports, so the background has to sit on this outer wrapper (see wrap_in_container()) to actually reach edge to edge instead of leaving white margins on wide screens. Matches the neutral section gray already used elsewhere in this theme (#f1f1f1–#f5f5f5), deepened slightly so it reads as an intentional canvas against the white cards rather than "did the CSS even load". */ .edge-detail-canvas { background: #ececea; } /* Study view supplies its own breadcrumb+title right at the top (no compact header above it here) — the default 40px top padding was tuned for pages that start with a big hero, and left a dead gap. */ .edge-series-watch-page { padding-top: 14px; } /* Bare

otherwise falls through to the theme's global hero style (50px, white) — invisible on this page's white background, which is what actually looked like "empty space" above About This Series. Scoped to .edge-detail-canvas (the full-bleed wrapper from wrap_in_container(), see class-edge-detail- shortcode.php) rather than a specific inner view's class — that wrapper surrounds every variant of the Bundle/Series detail page (study, marketing, enroll), so this can't miss one the way an inner-class selector did (edge-series-watch-page never actually wraps render_bundle_study_view()'s own

). / .edge-detail-canvas h1 { font-size: 30px; line-height: 1.25; font-weight: 700; color: var(--edge-text-dark); margin: 10px 0 20px; } @media (max-width: 767px) { .edge-detail-canvas h1 { font-size: 22px; margin: 8px 0 16px; } } .edge-video-detail { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; } .edge-detail-media { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #dbeafe, #e0f2fe); } .edge-detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .edge-detail-media-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--edge-primary); } .edge-detail-media > .edge-card-status.coming-soon { position: absolute; top: 16px; left: 16px; } .edge-detail-media .edge-card-preview-btn { top: 16px; right: 16px; } .edge-detail-description { color: #333; line-height: 1.8; margin-bottom: 24px; } .edge-detail-description p:first-child { margin-top: 0; } .edge-detail-not-found { text-align: center; padding: 80px 20px; } .edge-detail-not-found-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; } / --- Compact detail-page header (Edge_Page_Templates::render_compact_header()) --- Replaces the theme's .subpage-banner photo hero on [edge_detail] with a short full-width gradient (~90px vs ~350px). / .edge-compact-header { background: linear-gradient(115deg, #0b0d0e 0%, #0e2a35 46%, #0b3f56 78%, #075274 100%); position: relative; overflow: hidden; } .edge-compact-header::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 140px at 85% -20%, rgba(0, 173, 231, 0.35), transparent 70%); pointer-events: none; } .edge-compact-header .container { position: relative; padding-top: 22px; padding-bottom: 24px; } .edge-compact-header-crumb { margin: 0 0 6px; font-size: 12px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.2px; } .edge-compact-header-crumb a { color: rgba(255, 255, 255, 0.75); text-decoration: none; } .edge-compact-header-crumb a:hover { color: var(--edge-primary); } .edge-compact-header-sep { margin: 0 7px; opacity: 0.5; } .edge-compact-header h1 { margin: 0; font-size: 26px; color: #fff; } @media (max-width: 767px) { .edge-compact-header h1 { font-size: 21px; } } / --- Shared section label — .edge-curriculum-heading also targeted directly by the owner "study" view below. --- / .edge-section-label { display: flex; align-items: center; gap: 10px; margin: 40px 0 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--edge-secondary); } .edge-section-label::after { content: ""; flex: 1; height: 1px; background: #e2e4e7; } .edge-curriculum-heading { margin: 40px 0 16px; font-size: 13px; } / --- "About This Series" / "About This Master Series" reading sections --- / / Native
/
— zero JS dependency, so it can never silently fail to expand. / .edge-about-section, .edge-ms-about { margin-bottom: 8px; } .edge-ms-about { margin-top: 4px; } .edge-ms-about-short { font-size: 15.5px; line-height: 1.7; color: var(--edge-text-dark); margin: 0 0 10px; } .edge-about-details summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--edge-secondary); font-weight: 700; font-size: 13.5px; } .edge-about-details summary::-webkit-details-marker { display: none; } .edge-about-details summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform 0.2s ease; } .edge-about-details[open] summary::after { transform: rotate(-135deg); margin-top: 3px; } .edge-about-prose { font-size: 15.5px; line-height: 1.85; color: var(--edge-text-dark); margin-top: 12px; } .edge-about-prose p { margin: 0 0 16px; } .edge-about-prose p:last-child { margin-bottom: 0; } / --- Bundle marketing view (engagement-first, no price) --- / .edge-bundle-hero { display: grid; / grid-template-columns: 3.05fr 0.95fr; / gap: 48px; align-items: center; margin: 30px 0 50px; } .edge-bundle-hero h1 { font-size: 36px; line-height: 1.15; font-weight: 700; color: var(--edge-text-dark); margin: 0 0 16px; } .edge-bundle-hero-sub { font-size: 15.5px; line-height: 1.65; color: var(--edge-text-muted); margin: 0 0 24px; / max-width: 46ch; / } .edge-bundle-stat-row { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 26px; } .edge-bundle-stat-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--edge-text-dark); } .edge-bundle-stat-item .edge-icon { width: 16px; height: 16px; color: var(--edge-secondary); } .edge-bundle-hero-cta, / .cbtn.cbnt1 reserves right-side padding for an arrow icon this CTA doesn't have; override keeps the label centered. / .edge-bundle-final-cta-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; font-size: 14px; } .edge-bundle-hero-cta .edge-icon, .edge-bundle-final-cta-btn .edge-icon { width: 16px; height: 16px; flex-shrink: 0; } .edge-bundle-hero-media { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #0c1830, #142642); box-shadow: 0 20px 50px rgba(10, 20, 40, 0.18); } .edge-bundle-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .edge-bundle-hero-play { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; border: none; background: transparent; padding: 0; cursor: pointer; } .edge-bundle-hero-play img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; } .edge-bundle-hero-play-circle { grid-area: 1 / 1; justify-self: center; align-self: center; width: 68px; height: 68px; border-radius: 50%; background: rgba(255, 255, 255, 0.96); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease; } .edge-bundle-hero-play:hover .edge-bundle-hero-play-circle { transform: scale(1.07); } .edge-bundle-hero-play-circle .edge-icon { width: 22px; height: 22px; fill: var(--edge-secondary); margin-left: 3px; } .edge-bundle-hero-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.3); } .edge-bundle-hero-placeholder .edge-icon { width: 44px; height: 44px; } .edge-bundle-included-section { margin: 50px 0; } .edge-bundle-series-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .edge-bundle-series-card { background: #fff; border: 1px solid #e2e4e7; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.18s ease, box-shadow 0.18s ease; } .edge-bundle-series-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(11, 13, 14, 0.12); } .edge-bundle-series-card-media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #0c1830, #142642); } .edge-bundle-series-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .edge-bundle-series-card-badge { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, 0.94); color: var(--edge-text-dark); font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 20px; } .edge-bundle-series-card-soon-badge { position: absolute; top: 12px; right: -30px; background: #14b8a6; color: #f0f8f7; font-size: 10px; font-weight: 700; padding: 4px 36px; transform: rotate(38deg); } .edge-bundle-series-card-preview-chip { position: absolute; bottom: 10px; right: 10px; display: flex; align-items: center; gap: 5px; background: rgba(10, 14, 22, 0.65); color: #fff; font-size: 10.5px; font-weight: 700; padding: 5px 9px 5px 7px; border: none; border-radius: 20px; cursor: pointer; } .edge-bundle-series-card-preview-chip .edge-icon { width: 10px; height: 10px; } .edge-bundle-series-card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; } .edge-bundle-series-card-body h3 { font-size: 14.5px; font-weight: 700; margin: 0 0 6px; color: var(--edge-text-dark); } .edge-bundle-series-card-body p { font-size: 12px; line-height: 1.55; color: var(--edge-text-muted); margin: 0 0 12px; flex: 1; } .edge-bundle-series-card-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--edge-text-muted); } .edge-bundle-series-card-meta .edge-icon { width: 13px; height: 13px; color: var(--edge-secondary); } / --- Full Curriculum section — separate from the "What's Included" photo grid above it, which stays unchanged. Same spacious card-row treatment already approved for the purchaser Study page (.edge-study-list/.edge-study-row), reused here as its own class family since this context has no progress/completion state and no play-click behavior. --- / .edge-curriculum-section { margin: 50px 0 60px; } .edge-curriculum-subhead { margin-top: 6px; font-size: 13.5px; color: var(--edge-text-muted); } .edge-curriculum-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .edge-curriculum-row { border: 1px solid #e7e9ee; border-radius: 14px; padding: 16px 20px; background: #fff; } .edge-curriculum-row.is-coming-soon { background: #fafbfc; } .edge-curriculum-row-top { display: flex; align-items: flex-start; gap: 16px; } .edge-curriculum-row-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--edge-tint-bg); color: var(--edge-secondary); font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; } .edge-curriculum-row.is-coming-soon .edge-curriculum-row-num { background: #f0f1f3; color: var(--edge-text-muted); } .edge-curriculum-row-title-wrap { flex: 1; min-width: 0; } .edge-curriculum-row-title { display: block; font-size: 16px; font-weight: 600; color: var(--edge-text-dark); } .edge-curriculum-row-desc { display: block; margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--edge-text-muted); } .edge-curriculum-row-meta { flex-shrink: 0; } .edge-curriculum-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 99px; background: var(--edge-tint-bg); color: var(--edge-secondary); white-space: nowrap; } .edge-curriculum-badge .edge-icon { width: 12px; height: 12px; } .edge-curriculum-badge.is-soon { background: #f0f1f3; color: var(--edge-text-muted); } .edge-curriculum-videos { margin: 14px 0 0 46px; padding-top: 12px; border-top: 1px dashed #e2e4e7; } .edge-curriculum-videos summary { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--edge-secondary); cursor: pointer; list-style: none; } .edge-curriculum-videos summary::-webkit-details-marker { display: none; } .edge-curriculum-videos summary .edge-icon { width: 12px; height: 12px; transition: transform .15s; } .edge-curriculum-videos[open] summary .edge-icon { transform: rotate(90deg); } .edge-curriculum-video-list { list-style: none; margin: 12px 0 0; padding: 0; } .edge-curriculum-video-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px dashed #eef0f2; } .edge-curriculum-video-row:first-child { border-top: none; padding-top: 0; } .edge-curriculum-video-num { width: 18px; flex-shrink: 0; font-size: 12px; color: #aab4bd; padding-top: 2px; } .edge-curriculum-video-body { flex: 1; min-width: 0; } .edge-curriculum-video-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .edge-curriculum-video-title { font-size: 13.5px; font-weight: 600; color: var(--edge-text-dark); } / Groups duration + the optional Preview button so justify-content: space-between above always puts the title on the left and this on the right, regardless of whether the button is present. / .edge-curriculum-video-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .edge-curriculum-video-dur { font-size: 11.5px; color: var(--edge-text-muted); } .edge-curriculum-video-row.is-coming-soon .edge-curriculum-video-title { color: var(--edge-text-muted); } .edge-curriculum-video-soon { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--edge-text-muted); } .edge-curriculum-video-soon .edge-icon { width: 11px; height: 11px; } .edge-curriculum-video-preview { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; background: none; border: 1px solid #d7e3f4; border-radius: 99px; padding: 3px 10px; font-size: 10.5px; font-weight: 700; color: var(--edge-secondary); cursor: pointer; } .edge-curriculum-video-preview:hover { background: var(--edge-tint-bg); } .edge-curriculum-video-preview .edge-icon { width: 9px; height: 9px; } @media (max-width: 600px) { .edge-curriculum-row-top { flex-wrap: wrap; } / flex-basis:100% (not just relying on flex-grow) guarantees the badge always drops to its own full-width row below title+description, regardless of how short the title/description text is. / .edge-curriculum-row-meta { flex-basis: 100%; margin-left: 46px; margin-top: 6px; } .edge-curriculum-videos { margin-left: 0; } .edge-curriculum-video-preview { margin-left: 0; } } .edge-bundle-final-cta { background: linear-gradient(135deg, #0c1120, #161d33); color: #fff; border-radius: 20px; padding: 54px 40px; text-align: center; margin: 56px 0 30px; } .edge-bundle-final-cta h2 { font-size: 24px; font-weight: 700; margin: 0 0 8px; color: #fff; letter-spacing: 1px; } .edge-bundle-final-cta p { font-size: 14px; color: rgba(255, 255, 255, 0.7); margin: 0 0 26px; } @media (max-width: 900px) { .edge-bundle-hero { grid-template-columns: 1fr; } .edge-bundle-series-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .edge-bundle-hero h1 { font-size: 28px; } .edge-bundle-stat-row { gap: 14px; } .edge-bundle-series-grid { grid-template-columns: 1fr; } .edge-bundle-final-cta { padding: 40px 24px; } } / --- Bundle Enroll view (?purchase=1 — price lives only here) --- / / Warm off-white instead of the page's white, and a steel-blue stand-in for --edge-text-muted so captions read as brand color, not grey. Scoped to this view only — the shared --edge-text-muted token is untouched. The tint has to reach the full browser width, but this div lives inside the theme's centered Bootstrap .container — a breakout pseudo-element (classic "full-bleed inside a fixed-width container" trick) paints edge-to-edge behind the content instead of just filling this div's own narrow column. / .edge-bundle-enroll-page { --er-muted: #4c6b85; position: relative; z-index: 0; } .edge-bundle-enroll-page::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: #fbf7f0; z-index: -1; } .edge-bundle-enroll-page.edge-detail { padding: 26px 0 42px; } .edge-bundle-enroll-back { display: inline-flex; align-items: center; gap: 6px; color: var(--er-muted, var(--edge-text-muted)); font-size: 13.5px; font-weight: 600; text-decoration: none; margin: 24px 0 20px; } .edge-bundle-enroll-back:hover { color: var(--edge-text-dark); } .edge-bundle-enroll-back .edge-icon { width: 13px; height: 13px; transform: rotate(180deg); } .edge-bundle-enroll-order-bar { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(6px); border: 1px solid #e2e4e7; border-radius: 14px; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; } .edge-bundle-enroll-order-left { display: flex; align-items: center; gap: 12px; min-width: 0; / flex children default to min-width:auto, which blocks shrinking below the title's natural width — without this a long bundle title pushes the price off the sticky bar on narrow screens instead of truncating. / } .edge-bundle-enroll-order-thumb { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex-shrink: 0; display: block; } .edge-bundle-enroll-order-thumb img { width: 100%; height: 100%; object-fit: contain; background: linear-gradient(135deg, #0c1830, #142642); display: block; } .edge-bundle-enroll-order-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--edge-text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .edge-bundle-enroll-order-title small { display: block; font-size: 11.5px; font-weight: 600; color: var(--er-muted, var(--edge-text-muted)); white-space: normal; / the title above truncates with an ellipsis; this subtitle line shouldn't inherit that / } .edge-bundle-enroll-order-price { flex-shrink: 0; font-size: 19px; font-weight: 700; color: var(--edge-text-dark); } .edge-bundle-enroll-hero { text-align: center; max-width: 620px; margin: 0 auto 20px; } .edge-bundle-enroll-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--edge-secondary); margin: 0 0 14px; } .edge-bundle-enroll-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--edge-secondary); } .edge-bundle-enroll-hero h1 { font-size: 30px; font-weight: 700; margin: 0 0 10px; color: var(--edge-text-dark); } .edge-bundle-enroll-sub { font-size: 14.5px; color: var(--er-muted, var(--edge-text-muted)); line-height: 1.6; margin: 0 0 16px; } .edge-bundle-enroll-price-block { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 14px; } .edge-bundle-enroll-amount { font-size: 46px; font-weight: 700; line-height: 1; color: var(--edge-text-dark); } .edge-bundle-enroll-note { font-size: 12.5px; color: var(--er-muted, var(--edge-text-muted)); font-weight: 600; } .edge-bundle-enroll-cta-wrap { max-width: 320px; margin: 0 auto; } .edge-bundle-enroll-cta-wrap .cbtn.cbnt1 { display: flex; justify-content: center; width: 100%; } .edge-bundle-enroll-trust { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--er-muted, var(--edge-text-muted)); } .edge-bundle-enroll-trust .edge-icon { width: 12px; height: 12px; } .edge-bundle-enroll-section { max-width: 780px; margin: 32px auto; } .edge-bundle-enroll-section--wide { max-width: 1080px; } .edge-bundle-enroll-wyg { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .edge-bundle-enroll-wyg-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e2e4e7; border-radius: 12px; padding: 14px 16px; } .edge-bundle-enroll-wyg-item.is-soon { background: #fafafa; border-style: dashed; } .edge-bundle-enroll-wyg-item.is-soon .edge-bundle-enroll-wyg-num { background: #eef0f2; color: #8a97a3; } .edge-bundle-enroll-wyg-num { width: 28px; height: 28px; border-radius: 50%; background: rgba(5, 108, 211, 0.1); color: var(--edge-secondary); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; flex-shrink: 0; } .edge-bundle-enroll-wyg-label { font-size: 13.5px; font-weight: 700; color: var(--edge-text-dark); } .edge-bundle-enroll-wyg-desc { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--er-muted, var(--edge-text-muted)); margin-top: 1px; } .edge-bundle-enroll-wyg-desc .edge-icon { width: 12px; height: 12px; flex-shrink: 0; } .edge-bundle-enroll-benefits { background: #f7f9fb; border: 1px solid #e7ebf0; border-radius: 16px; padding: 20px 22px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .edge-bundle-enroll-benefit { display: flex; align-items: flex-start; gap: 11px; } .edge-bundle-enroll-benefit-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; } .edge-bundle-enroll-benefit-icon .edge-icon { width: 18px; height: 18px; } .edge-bundle-enroll-benefit-icon--blue { background: rgba(5, 108, 211, 0.12); color: var(--edge-secondary); } .edge-bundle-enroll-benefit-icon--green { background: rgba(8, 214, 101, 0.14); color: var(--edge-accent-green, #08d665); } .edge-bundle-enroll-benefit strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--edge-text-dark); margin-bottom: 2px; } .edge-bundle-enroll-benefit p { margin: 0; font-size: 11px; line-height: 1.4; color: var(--er-muted, var(--edge-text-muted)); } .edge-bundle-enroll-final-cta { text-align: center; padding: 24px 0 12px; } / .edge-card-cta-btn (on the markup too) sets width:100%, which stretches this into a full-width bar since — unlike the hero CTA — there's no max-width wrapper around it here. Reset to a compact pill instead. / .edge-bundle-enroll-final-cta .cbtn.cbnt1 { display: inline-flex; width: auto; padding: 12px 34px; } .edge-bundle-enroll-final-cta p { font-size: 13px; color: var(--er-muted, var(--edge-text-muted)); margin: 14px 0 0; } @media (max-width: 900px) { .edge-bundle-enroll-wyg { grid-template-columns: 1fr; } .edge-bundle-enroll-benefits { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .edge-bundle-enroll-amount { font-size: 36px; } .edge-bundle-enroll-benefits { grid-template-columns: 1fr 1fr; } } / --- Full curriculum list (Series detail page) --- / .edge-public-curriculum-list { list-style: none; margin: 0; padding: 0; border: 1px solid #e2e4e7; border-radius: 14px; overflow: hidden; background: #fff; } .edge-public-curriculum-row { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-bottom: 1px solid #f0f0f1; } .edge-public-curriculum-row:last-child { border-bottom: none; } .edge-public-curriculum-row.is-coming-soon { opacity: 0.6; } .edge-public-curriculum-number { width: 28px; height: 28px; border-radius: 50%; background: var(--edge-tint-bg); color: var(--edge-primary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 2px; } .edge-public-curriculum-body { flex: 1; min-width: 0; } .edge-public-curriculum-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .edge-public-curriculum-icon { color: var(--edge-text-muted); display: flex; flex-shrink: 0; } .edge-public-curriculum-icon .edge-icon { width: 14px; height: 14px; } .edge-public-curriculum-title { font-weight: 600; } .edge-public-curriculum-desc { margin: 0; font-size: 13.5px; color: var(--edge-text-muted); line-height: 1.6; max-width: 62ch; } .edge-public-curriculum-duration { flex-shrink: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--edge-text-muted); background: #f4f6f8; padding: 5px 12px; border-radius: 20px; white-space: nowrap; margin-top: 2px; } .edge-public-curriculum-duration .edge-icon { width: 12px; height: 12px; } @media (max-width: 560px) { .edge-public-curriculum-row { flex-wrap: wrap; } .edge-public-curriculum-duration { margin-left: 44px; } } / --- Bottom repeat purchase CTA — second Buy Now after the curriculum list; gradient mirrors .edge-compact-header. --- / .edge-bottom-cta { margin: 52px 0 60px; border-radius: 18px; overflow: hidden; position: relative; background: linear-gradient(115deg, #075274 0%, #0b3f56 30%, #0e2a35 62%, #0b0d0e 100%); } .edge-bottom-cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 160px at 15% 120%, rgba(0, 173, 231, 0.3), transparent 70%); pointer-events: none; } .edge-bottom-cta-inner { position: relative; padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; } .edge-bottom-cta-copy h3 { margin: 0 0 6px; color: #fff; font-size: 20px; } .edge-bottom-cta-copy p { margin: 0; color: rgba(255, 255, 255, 0.68); font-size: 13.5px; max-width: 50ch; } .edge-bottom-cta-action { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .edge-bottom-cta-price { text-align: right; } .edge-bottom-cta-price-label { display: block; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 3px; } .edge-bottom-cta-price-amount { font-weight: 700; font-size: 24px; color: #fff; } .edge-bottom-cta-action .edge-card-cta-btn.cbtn.cbnt1 { padding: 13px 28px; font-size: 14.5px; } .edge-bottom-cta-action .edge-card-cta-disabled { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7); padding: 13px 28px; border-radius: 30px; display: inline-block; font-size: 14px; } @media (max-width: 767px) { .edge-bottom-cta-inner { flex-direction: column; align-items: flex-start; } .edge-bottom-cta-action { width: 100%; justify-content: space-between; } } / --------------------------------------------------------------- Owner "study" view — Vimeo player, progress summary, clickable curriculum list. edge-player.js mounts the player; this is visual only. ------------------------------------------------------------------ / .edge-progress-summary { display: flex; align-items: center; gap: 20px; background: #fff; border: 1px solid #d8d5cc; border-radius: 14px; box-shadow: 0 2px 10px rgba(20, 24, 31, 0.07); padding: 16px 20px; margin-bottom: 28px; } .edge-video-study-view .edge-progress-summary { margin-top: 4px; } .edge-progress-ring { --edge-progress-percent: 0; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: conic-gradient(var(--edge-secondary) calc(var(--edge-progress-percent) 1%), #dde3ea 0); display: flex; align-items: center; justify-content: center; position: relative; } .edge-progress-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; } .edge-progress-ring span { position: relative; z-index: 1; font-size: 11px; font-weight: 800; color: var(--edge-secondary); } .edge-progress-summary-text { flex: 1; } .edge-progress-summary-text strong { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 3px; color: var(--edge-text-dark); } .edge-progress-summary-text span { font-size: 11.5px; color: var(--edge-text-muted); } .edge-player-shell { margin-bottom: 30px; border-radius: var(--edge-radius, 20px); overflow: hidden; background: #000; box-shadow: 0 0 0 0 rgba(0, 173, 231, 0); transition: box-shadow 0.3s ease; } /* Brief highlight after a Play/Replay click scrolls this into view — confirms where playback just changed. / .edge-player-shell.is-focused { box-shadow: 0 0 0 4px rgba(0, 173, 231, 0.35); } .edge-player-mount { aspect-ratio: 16 / 9; } .edge-player-mount iframe { width: 100%; height: 100%; display: block; border: none; } .edge-player-mount-empty { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.6); font-size: 14px; padding: 40px; text-align: center; } / Full-width 16:9 is right on a narrow phone screen, but on a wide .container (720-1140px) it grows tall enough to push the video list far down the page — capped and centered on tablet/ desktop only, mobile stays untouched. / @media (min-width: 768px) and (max-width: 1199px) { .edge-player-shell { max-width: 620px; margin-left: auto; margin-right: auto; } } @media (min-width: 1200px) { .edge-player-shell { max-width: 760px; margin-left: auto; margin-right: auto; } } / --- Series-inside video curriculum: individual cards, one shared player above. Same visual language as .edge-study-row (Bundle Study page) — kept as separate classes since edge-player.js selects on them directly and this page's rows carry play-click behavior the Bundle page's don't. --- / .edge-video-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .edge-video-row { background: #fff; border: 1px solid #d8d5cc; border-radius: 14px; box-shadow: 0 2px 10px rgba(20, 24, 31, 0.07); padding: 14px 18px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .edge-video-row:hover { border-color: var(--edge-secondary); } .edge-video-row:focus-visible { outline: 2px solid var(--edge-secondary); outline-offset: -2px; } .edge-video-row.is-active { border-color: var(--edge-secondary); background: #f5faff; box-shadow: 0 4px 16px rgba(5, 108, 211, 0.08); } .edge-video-row.status-locked { cursor: default; opacity: 0.75; background: #f7f9fb; } .edge-video-row-top { display: flex; align-items: center; gap: 14px; } .edge-video-row-ring { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; font-weight: 700; background: #f0f1f3; color: var(--edge-text-muted); } .edge-video-row-ring .edge-icon { width: 14px; height: 14px; } .edge-video-row.status-completed .edge-video-row-ring { background: var(--edge-accent-green); color: var(--edge-white); } .edge-video-row.is-active .edge-video-row-ring { background: var(--edge-primary); color: var(--edge-white); } .edge-video-row.status-locked .edge-video-row-ring { color: #c2c4c9; } .edge-video-row-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .edge-video-row-title { font-weight: 600; font-size: 14px; color: var(--edge-text-dark); } .edge-video-row.status-locked .edge-video-row-title { color: var(--edge-text-muted); } .edge-video-row-sub { font-size: 11.5px; color: var(--edge-text-muted); } .edge-video-row-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; flex-shrink: 0; white-space: nowrap; background: #f0f1f3; color: var(--edge-text-muted); } .edge-video-row-badge .edge-icon { width: 11px; height: 11px; } / Explicit "Replay" affordance beside a completed video's badge — the whole row is clickable either way, but a plain "Completed" label alone reads as a status, not an invitation to click it again. / .edge-video-row-replay { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 999px; flex-shrink: 0; white-space: nowrap; color: var(--edge-secondary); background: var(--edge-white); border: 1px solid #d7e3f4; transition: border-color 0.15s ease, background 0.15s ease; } .edge-video-row-replay .edge-icon { width: 10px; height: 10px; } .edge-video-row:hover .edge-video-row-replay { border-color: var(--edge-secondary); background: var(--edge-tint-bg); } .edge-video-row-badge.playing { background: var(--edge-primary); color: var(--edge-white); } .edge-video-row-badge.done { background: rgba(8, 214, 101, 0.14); color: #08a34f; } .edge-video-row-badge.locked { color: #c2c4c9; } / --- Per-video description: toggled open, independent of the row's own play-on-click --- / .edge-video-row-short-desc { margin: 8px 0 0 46px; font-size: 12.5px; line-height: 1.6; color: var(--edge-text-muted); white-space: pre-line; } .edge-video-row-desc-toggle { display: inline-block; margin: 8px 0 0 46px; padding: 0; background: none; border: none; font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--edge-secondary); cursor: pointer; } .edge-video-row-desc { display: none; margin: 8px 0 0 46px; font-size: 12.5px; line-height: 1.7; color: var(--edge-text-muted); } .edge-video-row-desc.is-open, .edge-video-row-desc--open { display: block; } .edge-video-row-desc p { margin: 0 0 8px; } .edge-video-row-desc p:last-child { margin-bottom: 0; } / --- "Now Playing" panel: the active video's own title + description, swapped by edge-player.js whenever a different row is clicked, without a page reload. --- / .edge-now-playing-panel { background: #fff; border: 1px solid #d8d5cc; border-radius: 14px; box-shadow: 0 2px 10px rgba(20, 24, 31, 0.07); padding: 16px 20px; margin-bottom: 28px; transition: opacity 0.15s ease; } .edge-now-playing-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--edge-secondary); margin-bottom: 6px; } .edge-now-playing-eyebrow .edge-icon { width: 12px; height: 12px; } .edge-now-playing-title { font-size: 16px; margin: 0 0 3px; color: var(--edge-text-dark); } .edge-now-playing-meta { font-size: 11.5px; color: var(--edge-text-muted); margin-bottom: 8px; } .edge-now-playing-desc { font-size: 13px; line-height: 1.7; color: var(--edge-text-muted); } .edge-now-playing-desc[hidden] { display: none; } .edge-now-playing-desc p { margin: 0 0 8px; } .edge-now-playing-desc p:last-child { margin-bottom: 0; } / --- Study page two-column layout: player left (~70%), progress + Now Playing right (~30%) on desktop; single column, player first, on narrower screens. --- / #edge-series-watch-area.edge-study-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 30px; } @media (min-width: 992px) { #edge-series-watch-area.edge-study-grid { grid-template-columns: 70% 30%; align-items: start; } } .edge-study-player-col { min-width: 0; } .edge-study-player-col .edge-player-shell { margin-bottom: 0; } .edge-study-side-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .edge-study-side-col .edge-progress-summary, .edge-study-side-col .edge-now-playing-panel { margin-bottom: 0; } / The completion banner is prepended as a direct sibling of the two columns (edge-player.js) — span both. / #edge-series-watch-area.edge-study-grid > .edge-series-complete-panel { grid-column: 1 / -1; } .edge-study-side-col .edge-progress-summary { flex-direction: column; align-items: center; text-align: center; gap: 10px; } .edge-study-side-col .edge-progress-ring { width: 88px; height: 88px; } .edge-study-side-col .edge-progress-ring span { font-size: 16px; } .edge-study-side-col .edge-progress-summary-text { flex: none; } .edge-study-side-col #edge-continue-btn.cbtn.cbnt1 { display: block; width: 100%; text-align: center; } .edge-now-playing-remaining { margin-top: 10px; display: flex; flex-direction: column; } .edge-now-playing-remaining-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--edge-text-muted); padding: 7px 0; border-top: 1px solid #e7ebf0; } .edge-now-playing-remaining-item:first-child { border-top: none; } .edge-now-playing-remaining-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #c9c5ba; flex-shrink: 0; } .edge-now-playing-remaining-dur { margin-left: auto; flex-shrink: 0; } / --- Live-update flash: brief pulse on the progress card's own text/ring when a report just landed --- / .is-flashing { animation: edge-progress-flash 0.9s ease; } @keyframes edge-progress-flash { 0% { opacity: 1; } 30% { opacity: 0.25; } 100% { opacity: 1; } } .edge-study-list { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .edge-study-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #fff; border: 1px solid #d8d5cc; border-radius: 14px; box-shadow: 0 2px 10px rgba(20, 24, 31, 0.07); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .edge-study-row:hover { border-color: var(--edge-secondary); } .edge-study-row.status-locked, .edge-study-row.status-coming-soon { / No blanket opacity fade — it was fading the body text along with everything else, and against the canvas background that pushed already-muted text below readable contrast. Background tint + the muted status badge/icon below are enough to signal "less prominent" on their own. / cursor: default; background: #f7f9fb; } .edge-study-row.is-active { border-color: var(--edge-secondary); background: #f5faff; box-shadow: 0 4px 16px rgba(5, 108, 211, 0.08); } .edge-study-row-num { width: 20px; flex-shrink: 0; font-size: 13px; color: var(--edge-text-muted); } .edge-study-row-status { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: #e8f2fc; color: var(--edge-secondary); } .edge-study-row.status-completed .edge-study-row-status { background: #e6fff2; color: var(--edge-accent-green); } .edge-study-row.status-locked .edge-study-row-status, .edge-study-row.status-coming-soon .edge-study-row-status { background: #f0f0f1; color: var(--edge-text-muted); } .edge-study-row-status .edge-icon { width: 14px; height: 14px; } .edge-study-row-title { flex: 1; font-size: 14px; } .edge-study-row-title small { display: block; font-weight: 400; font-size: 11.5px; color: var(--edge-text-muted); margin-top: 2px; } .edge-study-row-meta { font-size: 12px; color: var(--edge-text-muted); flex-shrink: 0; display: flex; align-items: center; gap: 8px; } .edge-study-row-next-badge { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; background: var(--edge-secondary); border: 1px solid var(--edge-secondary); padding: 3px 9px; border-radius: 10px; white-space: nowrap; } / --------------------------------------------------------------- Rich study rows — Master Series page: duration/watched meta line, per-row progress bar, short + expandable-long Series description. ------------------------------------------------------------------ / .edge-progress-summary-extra { font-size: 11px; font-weight: 700; color: var(--edge-text-muted); background: #fff; border: 1px solid #e7ebf0; border-radius: 20px; padding: 6px 14px; flex-shrink: 0; } .edge-study-list--rich .edge-study-row { display: block; cursor: default; } .edge-study-list--rich .edge-study-row-top { display: flex; align-items: center; gap: 14px; } .edge-study-row-title-wrap { flex: 1; min-width: 0; } .edge-study-list--rich .edge-study-row-title { display: inline-block; font-weight: 600; text-decoration: none; color: var(--edge-text-dark); } .edge-study-list--rich .edge-study-row-title:hover { color: var(--edge-secondary); } .edge-study-row-title--static, .edge-study-row-title--static:hover { color: var(--edge-text-muted); cursor: default; } .edge-study-row-meta-line { font-size: 11.5px; color: var(--edge-text-muted); margin-top: 2px; } .edge-study-row-meta-line .dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; margin: 0 6px; vertical-align: middle; } .edge-study-row-inprogress { color: var(--edge-primary); font-weight: 600; } .edge-progress-track-sm { height: 4px; border-radius: 3px; background: #eee; overflow: hidden; margin: 10px 0 0 62px; max-width: 240px; } .edge-progress-fill-sm { height: 100%; border-radius: 3px; background: var(--edge-primary); } .edge-study-row-desc { font-size: 12.5px; color: var(--edge-text-muted); margin: 10px 0 0 62px; } .edge-study-row-details { margin: 6px 0 0 62px; } .edge-study-row-details summary { font-size: 11.5px; } .edge-study-row-details .edge-about-prose { font-size: 12.5px; line-height: 1.7; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2e4e7; } .edge-study-video-details { margin: 6px 0 0 62px; } .edge-study-video-details summary { font-size: 11.5px; } .edge-study-video-locked-note { margin: 6px 0 0 62px; font-size: 11.5px; color: var(--edge-text-muted); font-style: italic; } .edge-study-video-list { margin-top: 8px; padding-top: 4px; border-top: 1px dashed #e2e4e7; } .edge-study-video-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed #e2e4e7; font-size: 12.5px; } .edge-study-video-row:first-child { border-top: none; } .edge-study-video-num { width: 16px; font-size: 11px; color: #aab4bd; flex-shrink: 0; } .edge-study-video-icon { display: flex; color: var(--edge-secondary); flex-shrink: 0; } .edge-study-video-row.is-coming-soon .edge-study-video-icon { color: var(--edge-text-muted); } .edge-study-video-icon .edge-icon { width: 13px; height: 13px; } .edge-study-video-title { flex: 1; color: var(--edge-text-dark); font-weight: 500; } .edge-study-video-row.is-coming-soon .edge-study-video-title { color: var(--edge-text-muted); } .edge-study-video-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--edge-text-muted); background: #f0f0f1; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; } .edge-study-video-dur { font-size: 11px; color: var(--edge-text-muted); flex-shrink: 0; } .edge-study-row-duration { font-size: 11.5px; color: var(--edge-text-muted); flex-shrink: 0; margin-right: 4px; } / --- Sleek per-row CTAs: one bold primary per page, quiet everywhere else --- / .edge-study-row-actions { margin: 14px 0 0 62px; } .edge-row-cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; font-size: 13px; font-weight: 600; text-decoration: none; border-radius: 999px; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .edge-row-cta .edge-icon { width: 13px; height: 13px; } .edge-row-cta--primary { color: var(--edge-white); background: linear-gradient(135deg, var(--edge-primary), var(--edge-secondary)); box-shadow: 0 6px 16px rgba(5, 108, 211, 0.28); border: 1px solid transparent; } .edge-row-cta--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(5, 108, 211, 0.36); } .edge-row-cta--secondary { color: var(--edge-secondary); background: var(--edge-white); border: 1px solid #d7e3f4; } .edge-row-cta--secondary:hover { border-color: var(--edge-secondary); background: var(--edge-tint-bg); } .edge-row-cta--ghost { color: var(--edge-text-muted); background: none; border: 1px solid transparent; padding-left: 4px; padding-right: 4px; } .edge-row-cta--ghost:hover { color: var(--edge-secondary); } / --- Study page (progress summary + series rows) never had a mobile pass — the number/icon/title/meta header row has no wrap, and every description/video-list/ actions block underneath is indented a flat 62px to line up with the title text, which eats a big share of a narrow screen and looks disconnected once the header above it wraps. --- / @media (max-width: 600px) { .edge-progress-summary { flex-wrap: wrap; row-gap: 10px; } / min-width:0 here let the "0 of 8 videos completed" text get squeezed to near-zero by the ring + .edge-progress-summary-extra pill (both flex-shrink:0), wrapping every single word onto its own line. A real min-width keeps it readable; the pill gets forced to its own full-width row below instead. / .edge-progress-summary-text { min-width: 160px; flex: 1 1 160px; } .edge-progress-summary-extra { flex-basis: 100%; margin-left: 0; } .edge-study-list--rich .edge-study-row-top { flex-wrap: wrap; row-gap: 8px; } .edge-study-row-title-wrap { min-width: 0; flex-basis: 100%; / title+meta take their own line; num/icon stay on the first line, percent/badge on the last / order: 3; } .edge-study-row-meta { margin-left: auto; } .edge-progress-track-sm, .edge-study-row-desc, .edge-study-row-details, .edge-study-video-details, .edge-study-video-locked-note, .edge-study-row-actions { margin-left: 0; } / Series watch page: most members land here on a phone, so the CTA gets a full-width thumb-reachable tap target instead of squeezing into the same row as the ring/text. / .edge-progress-summary #edge-continue-btn, .edge-progress-summary .cbtn { width: 100%; justify-content: center; } .edge-now-playing-panel { padding: 14px 16px; } .edge-video-row { padding: 12px 14px; } .edge-video-row-desc-toggle, .edge-video-row-desc { margin-left: 0; } .edge-series-complete-panel { padding: 14px 16px; } .edge-series-complete-actions { width: 100%; } .edge-series-complete-actions .cbtn { width: 100%; justify-content: center; } } / --------------------------------------------------------------- Completion — Master Series (full hero) and Series (in-place panel, replaces the player once the last video is watched). ------------------------------------------------------------------ / .edge-completion-hero { text-align: center; padding: 34px 24px; border-radius: var(--edge-radius, 20px); background: linear-gradient(160deg, #eafcf3, #f4fbff); border: 1px solid #d7f5e6; margin-bottom: 26px; } .edge-completion-hero-badge { width: 56px; height: 56px; border-radius: 50%; background: var(--edge-accent-green); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: 0 10px 24px -8px rgba(8, 214, 101, 0.5); flex-shrink: 0; } .edge-completion-hero-badge .edge-icon { width: 24px; height: 24px; } / --- "New content since you were last here" — additive banner, distinct purple from the green completion hero above so the two states never get visually confused. --- / .edge-new-content-banner { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--edge-radius, 20px); background: linear-gradient(160deg, #f3ecff, #eef6ff); border: 1px solid #ddd0f9; margin-bottom: 20px; flex-wrap: wrap; } .edge-new-content-icon { width: 40px; height: 40px; border-radius: 50%; background: #7c3aed; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .edge-new-content-copy { flex: 1; min-width: 200px; } .edge-new-content-copy strong { display: block; font-size: 14.5px; color: var(--edge-text-dark); margin-bottom: 2px; } .edge-new-content-copy span { font-size: 12.5px; color: var(--edge-text-muted); } / "New" pill — reused on the Bundle Study page's series rows and on individual video rows, and on the Dashboard card's status badge (.edge-card-status.new-content below). / .edge-new-badge { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; background: #7c3aed; color: #fff; } .edge-new-badge--sm { margin-left: 8px; font-size: 9px; padding: 2px 7px; } .edge-card-status.new-content { background: #f3ecff; color: #7c3aed; } @media (max-width: 600px) { .edge-new-content-banner { padding: 14px 16px; } } .edge-completion-hero h3 { font-size: 19px; margin: 0 0 8px; } .edge-completion-hero p { font-size: 13.5px; color: var(--edge-text-muted); max-width: 46ch; margin: 0 auto 20px; } .edge-completion-hero-stats { display: flex; justify-content: center; gap: 28px; margin-bottom: 22px; flex-wrap: wrap; } .edge-completion-hero-stat .n { font-size: 21px; font-weight: 700; color: var(--edge-text-dark); } .edge-completion-hero-stat .l { font-size: 11px; color: var(--edge-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; } / Series watch page — a compact acknowledgment banner ABOVE the still-fully-playable player/video list, never a replacement (lifetime access means "completed" never means "no longer watchable"). / .edge-series-complete-panel { display: flex; align-items: center; gap: 16px; text-align: left; padding: 16px 20px; border-radius: var(--edge-radius, 20px); background: linear-gradient(160deg, #eafcf3, #f4fbff); border: 1px solid #d7f5e6; margin-bottom: 20px; flex-wrap: wrap; } .edge-series-complete-panel .edge-completion-hero-badge { width: 40px; height: 40px; margin: 0; } .edge-series-complete-panel .edge-completion-hero-badge .edge-icon { width: 18px; height: 18px; } .edge-series-complete-copy { flex: 1; min-width: 200px; } .edge-series-complete-copy strong { display: block; font-size: 14.5px; color: var(--edge-text-dark); margin-bottom: 2px; } .edge-series-complete-copy span { font-size: 12.5px; color: var(--edge-text-muted); } .edge-series-complete-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex-shrink: 0; } .edge-series-complete-stay { background: none; border: none; font-size: 12.5px; font-weight: 600; color: var(--edge-text-muted); text-decoration: underline; cursor: pointer; padding: 0; } .edge-series-complete-countdown { margin: 4px 0 0 !important; font-size: 11.5px !important; color: var(--edge-text-muted); } / Name + My Account/Logout bar above a Series' own study view. / .edge-greeting-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--edge-white); border: 1px solid #e5e2da; border-radius: 14px; padding: 12px 18px; margin-bottom: 16px; } .edge-greeting-left { display: flex; align-items: center; gap: 10px; } .edge-greeting-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--edge-primary), var(--edge-secondary)); color: var(--edge-white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } .edge-greeting-text { font-size: 14px; color: var(--edge-text-dark); } .edge-greeting-actions { display: flex; align-items: center; gap: 8px; } .edge-greeting-actions a { font-size: 12.5px; font-weight: 600; text-decoration: none; padding: 8px 14px; border-radius: 8px; } .edge-greeting-account { color: var(--edge-secondary); background: rgba(5, 108, 211, 0.08); } .edge-greeting-account:hover { background: rgba(5, 108, 211, 0.14); } .edge-greeting-logout { color: var(--edge-text-muted); background: transparent; border: 1px solid #e5e2da; } .edge-greeting-logout:hover { background: #f7f9fb; } @media (max-width: 480px) { .edge-greeting-bar { flex-direction: column; align-items: stretch; } .edge-greeting-actions { justify-content: stretch; } .edge-greeting-actions a { flex: 1; text-align: center; } } / "← Bundle Title" link back up from a Series' own study view. / .edge-study-breadcrumb { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--edge-secondary); text-decoration: none; margin-bottom: 10px; } .edge-study-breadcrumb:hover { text-decoration: underline; } / --- Preview modal: media panel + content panel, stacked under 760px, side by side above --- / .edge-preview-modal-overlay { / modal is a sibling of .edge-wrap, not a descendant — redeclare tokens, they don't inherit / --edge-secondary: #056cd3; --edge-text-dark: #000000; --edge-text-muted: #666666; display: none; position: fixed; inset: 0; background: rgba(10, 14, 22, 0.68); z-index: 100000; align-items: center; justify-content: center; padding: 20px; } .edge-preview-modal-overlay.is-open { display: flex; } .edge-preview-modal { background: #fff; border-radius: 18px; max-width: 580px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 70px rgba(10, 20, 35, 0.32); } .edge-preview-modal-body { display: block; } @media (min-width: 760px) { .edge-preview-modal { max-width: 940px; max-height: 78vh; overflow: hidden; / height:100% on the grid body below never resolved to a real pixel value against this box's max-height (percentage heights need a definite parent height, which max-height alone doesn't give) — so the row just grew past 78vh and got clipped, CTA included. Flexbox's sizing algorithm does respect max-height directly, so the grid body can be constrained (and its own inner column can then actually scroll) by making this a flex column instead. / display: flex; flex-direction: column; } .edge-preview-modal-body { display: grid; grid-template-columns: 1.1fr 1fr; flex: 1 1 auto; min-height: 0; } } .edge-preview-modal-media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #0c1830, #142642); overflow: hidden; border-radius: 18px 18px 0 0; display: grid; / stack poster + play button in the same cell instead of position:absolute / } @media (min-width: 760px) { .edge-preview-modal-media { aspect-ratio: auto; height: 100%; border-radius: 18px 0 0 18px; } } .edge-preview-modal-media > img, .edge-preview-modal-media > .edge-preview-modal-play { grid-area: 1 / 1; } .edge-preview-modal-media img { width: 100%; height: 100%; object-fit: contain; display: block; } .edge-preview-modal-play { width: 100%; height: 100%; display: grid; cursor: pointer; border: none; background: transparent; padding: 0; } .edge-preview-modal-play img { grid-area: 1 / 1; opacity: 0.55; } .edge-preview-modal-play-circle { grid-area: 1 / 1; justify-self: center; align-self: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease; } .edge-preview-modal-play:hover .edge-preview-modal-play-circle { transform: scale(1.06); } .edge-preview-modal-play-circle svg { fill: var(--edge-secondary); margin-left: 3px; } .edge-preview-modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(10, 14, 22, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease; } .edge-preview-modal-close:hover { background: rgba(10, 14, 22, 0.8); } .edge-preview-modal-close .edge-icon { width: 16px; height: 16px; } .edge-preview-modal-content { padding: 24px 26px 26px; } @media (min-width: 760px) { .edge-preview-modal-content { padding: 36px 38px; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; / A grid item's default min-height is auto, which lets it grow past its row instead of honoring overflow-y: auto above — with a long title/description that pushed the CTA button below the modal's clipped bounds entirely. This makes the column scroll internally instead. */ min-height: 0; } } .edge-preview-modal-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--edge-secondary); margin: 0 0 10px; } .edge-preview-modal-eyebrow-sep, .edge-preview-modal-eyebrow-bundle { color: var(--edge-text-muted); font-weight: 400; } .edge-preview-modal-item-title { margin: 0 0 12px; font-size: 22px; font-weight: 700; color: var(--edge-text-dark); } .edge-preview-modal-description { color: var(--edge-text-muted); font-size: 14.5px; line-height: 1.65; margin: 0 0 18px; } .edge-preview-modal-meta { display: flex; gap: 18px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid #f0f0f1; border-bottom: 1px solid #f0f0f1; margin-bottom: 20px; } .edge-preview-modal-meta-item { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--edge-text-dark); } .edge-preview-modal-meta-item .edge-icon { width: 16px; height: 16px; color: var(--edge-secondary); flex-shrink: 0; } .edge-preview-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .edge-preview-modal-footer-info { font-size: 12.5px; color: var(--edge-text-muted); line-height: 1.5; margin: 0; } .edge-preview-modal-footer-info b { color: var(--edge-text-dark); font-weight: 600; } .edge-preview-modal-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--edge-secondary); color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; padding: 12px 22px; border-radius: 8px; white-space: nowrap; transition: background 0.15s ease; flex-shrink: 0; } .edge-preview-modal-cta:hover { background: #000; color: #fff; } .edge-preview-modal-cta .edge-icon { width: 14px; height: 14px; } .edge-preview-modal-embed { position: relative; width: 100%; height: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; } @media (min-width: 760px) { .edge-preview-modal-embed { aspect-ratio: auto; } } .edge-preview-modal-embed iframe, .edge-preview-modal-embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .edge-preview-modal-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font-size: 13px; color: #c3cbdb; } @media (max-width: 991px) { .edge-series-hero { grid-template-columns: 1fr; } .edge-series-hero-media { aspect-ratio: 16 / 9; } .edge-video-detail { grid-template-columns: 1fr; } } @media (max-width: 600px) { .edge-series-hero-body { padding: 24px; } .edge-price-card { flex-direction: column; align-items: stretch; text-align: center; } .edge-price-card .edge-card-cta-btn.cbtn.cbnt1 { width: 100%; text-align: center; } }