/* AnaKay Pro LMS — matches the site's own black/gold palette and CTA style. */ .akl-btn { display: inline-block; padding: 0.9em 2em; border: 1px solid #c9a96e; background: #c9a96e; color: #0c0b07; font-family: var(--font-body, 'Neue Machina', sans-serif); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } .akl-btn:hover { background: transparent; color: #c9a96e; } .akl-btn:disabled { opacity: 0.6; cursor: default; } .akl-btn-owned, .akl-mark-complete { background: transparent; color: #c9a96e; border: 1px solid rgba(201, 169, 110, 0.5); } .akl-btn-owned:hover, .akl-mark-complete:hover:not(:disabled) { background: rgba(201, 169, 110, 0.1); border-color: #c9a96e; } .akl-lesson-list { list-style: none; margin: 0; padding: 0; } .akl-lesson-list li { padding: 0.7em 0; border-bottom: 1px solid rgba(184, 173, 152, 0.25); color: #f0ebe0; } .akl-lesson-list a { text-decoration: none; color: inherit; } .akl-lesson-list a:hover .akl-lesson-num { color: #c9a96e; } .akl-lesson-locked { color: #b8ad98; } .akl-lesson-num { display: inline-block; width: 1.8em; font-variant-numeric: tabular-nums; color: #8a6030; } .akl-check { color: #c9a96e; } .akl-lock { opacity: 0.6; font-size: 0.85em; } .akl-progress { position: relative; height: 1.7em; background: rgba(184, 173, 152, 0.18); border-radius: 999px; overflow: hidden; margin: 1.2em 0; } .akl-progress-bar { height: 100%; background: #c9a96e; } .akl-progress-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8em; letter-spacing: 0.5px; color: #f0ebe0; text-shadow: 0 1px 2px rgba(12, 11, 7, 0.7); } /* ═══ AUTH / ACCOUNT ═══════════════════════════════════════ Self-contained dark card — deliberately does not rely on the surrounding theme's page template being dark. A plain WP Page is usually white, and this block's own text/border colors are only readable against black, so the card supplies its own background rather than assuming one. Every rule below is anchored to #akl-account (an ID, specificity 0-1-0-0) rather than a bare class. Page-builder themes routinely ship two- and three-class combinators for their own buttons/links (specificity 0-2-0-0 or higher) that load *after* this stylesheet in — on a tied specificity, whichever rule is later in the source wins regardless of !important on both sides, and the theme is later. Anchoring to an ID sidesteps that fight entirely: no realistic theme selector targets this exact ID, so ours simply outranks theirs instead of racing them. */ #akl-account-page { display: flex; align-items: center; justify-content: center; min-height: 70vh; width: 100%; padding: 2em 1em; box-sizing: border-box; } #akl-account { background: #0c0b07; color: #f0ebe0; padding: 2.5em 2em; max-width: 460px; width: 100%; margin: 0; border: 1px solid rgba(201, 169, 110, 0.18); box-sizing: border-box; font-family: var(--font-body, "Neue Machina", sans-serif); } #akl-account * { box-sizing: border-box; } #akl-account .akl-notice { background: rgba(201, 169, 110, 0.1) !important; border: 1px solid rgba(201, 169, 110, 0.4) !important; color: #f0ebe0 !important; padding: 0.9em 1.2em; margin-bottom: 1.5em; font-size: 13px; } /* ═══ COURSE INTRO (shown when arriving via ?enroll=) ════════ Mobile-first: image stacked above text on small screens, side by side once there's room. The account card itself widens (see .akl-account-wrap-has-course below) so this has space to breathe instead of squeezing into the plain 460px auth card. */ #akl-account .akl-course-intro { display: flex; flex-direction: column; gap: 1em; margin-bottom: 1.8em; padding-bottom: 1.8em; border-bottom: 1px solid rgba(201, 169, 110, 0.18); } #akl-account .akl-course-intro-media { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #000; } #akl-account .akl-course-intro-media img { display: block; width: 100%; height: 100%; object-fit: cover; } #akl-account .akl-course-intro-eyebrow { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #8a6030 !important; margin: 0 0 0.4em; } #akl-account .akl-course-intro-title { font-family: var(--font, Georgia, serif); font-size: 20px; line-height: 1.3; color: #f0ebe0 !important; margin: 0 0 0.5em; } #akl-account .akl-course-intro-desc { font-size: 13px; line-height: 1.6; color: #b8ad98 !important; margin: 0 0 0.7em; } #akl-account .akl-course-intro-price { display: inline-block; font-size: 16px; font-weight: 700; letter-spacing: 1px; color: #c9a96e !important; margin: 0; } @media (min-width: 560px) { #akl-account.akl-account-wrap-has-course { max-width: 640px; } #akl-account .akl-course-intro { flex-direction: row; align-items: center; } #akl-account .akl-course-intro-media { width: 42%; flex-shrink: 0; aspect-ratio: 4 / 3; } } #akl-account .akl-auth { width: 100%; } #akl-account .akl-auth-tabs { position: relative; } #akl-account .akl-auth-tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } #akl-account .akl-auth-tab-labels { display: flex; border-bottom: 1px solid rgba(184, 173, 152, 0.25); margin-bottom: 1.5em; } #akl-account .akl-auth-tab-labels label { flex: 1; text-align: center; padding: 0.8em 0; cursor: pointer; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #b8ad98 !important; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } #akl-account .akl-auth-panel { display: none; } #akl-account #akl-tab-signup:checked ~ .akl-auth-tab-labels label[for="akl-tab-signup"], #akl-account #akl-tab-login:checked ~ .akl-auth-tab-labels label[for="akl-tab-login"] { color: #c9a96e !important; border-color: #c9a96e; } #akl-account #akl-tab-signup:checked ~ .akl-auth-panel-signup, #akl-account #akl-tab-login:checked ~ .akl-auth-panel-login, #akl-account #akl-tab-forgot:checked ~ .akl-auth-panel-forgot { display: block; } #akl-account #akl-tab-forgot:checked ~ .akl-auth-tab-labels { display: none; } #akl-account .akl-auth-form p { margin: 0 0 0.9em; } #akl-account .akl-auth-form input[type="text"], #akl-account .akl-auth-form input[type="email"], #akl-account .akl-auth-form input[type="password"] { display: block !important; width: 100% !important; padding: 0.85em 1em !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(201, 169, 110, 0.3) !important; color: #f0ebe0 !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.4 !important; border-radius: 0 !important; -webkit-appearance: none; appearance: none; } #akl-account .akl-auth-form input::placeholder { color: rgba(240, 235, 224, 0.4); } #akl-account .akl-auth-form input:focus { outline: none; border-color: #c9a96e !important; } /* Buttons in this card must never depend on :hover to be legible. */ #akl-account .akl-btn { display: block !important; width: 100% !important; box-sizing: border-box !important; text-align: center !important; padding: 0.9em 1.5em !important; background: #c9a96e !important; color: #0c0b07 !important; border: 1px solid #c9a96e !important; border-radius: 0 !important; font-family: inherit !important; font-size: 13px !important; letter-spacing: 2px !important; text-transform: uppercase !important; line-height: 1.4 !important; cursor: pointer; text-decoration: none !important; box-shadow: none !important; transition: background 0.2s ease, color 0.2s ease; } #akl-account .akl-btn:hover { background: transparent !important; color: #c9a96e !important; } #akl-account .akl-btn-owned { background: transparent !important; color: #c9a96e !important; border: 1px solid rgba(201, 169, 110, 0.5) !important; } #akl-account .akl-btn-owned:hover { background: rgba(201, 169, 110, 0.1) !important; } #akl-account .akl-auth-forgot { font-size: 11px; color: #b8ad98 !important; display: inline-block; margin-top: 0.6em; cursor: pointer; } #akl-account .akl-auth-forgot:hover { color: #c9a96e !important; } #akl-account .akl-auth-divider { text-align: center; font-size: 11px; color: #b8ad98 !important; margin: 1em 0; text-transform: uppercase; letter-spacing: 1px; } /* Google's own brand button spec: white pill, grey border, the real four-colour "G" mark, dark grey text — not the site's gold CTA style, since Google requires its button to stay visually distinct from a site's own branding. */ #akl-account .akl-btn-google { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid #dadce0 !important; border-radius: 0 !important; color: #3c4043 !important; font-family: Roboto, Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.15px !important; text-transform: none !important; padding: 0.7em 1.2em !important; line-height: 1.4 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important; } #akl-account .akl-btn-google:hover { background: #f8f9fa !important; color: #3c4043 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important; } #akl-account .akl-btn-google svg { width: 18px !important; height: 18px !important; flex-shrink: 0; display: block; } #akl-account .akl-btn-google span { display: inline-block; line-height: 18px; } #akl-account .akl-profile-hd { text-align: center; margin-bottom: 2em; } #akl-account .akl-profile-name { font-size: 18px; color: #f0ebe0 !important; margin-bottom: 0.2em; } #akl-account .akl-profile-email { font-size: 12px; color: #b8ad98 !important; margin-bottom: 0.8em; } #akl-account .akl-profile-logout { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #8a6030 !important; } #akl-account .akl-profile-logout:hover { color: #c9a96e !important; } #akl-account .akl-profile-courses { display: grid; gap: 1em; } #akl-account .akl-profile-course { border: 1px solid rgba(201, 169, 110, 0.18); padding: 1.3em 1.5em; display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; } #akl-account .akl-profile-course-media { width: 56px; height: 56px; flex-shrink: 0; overflow: hidden; background: #000; } #akl-account .akl-profile-course-media img { display: block; width: 100%; height: 100%; object-fit: cover; } #akl-account .akl-profile-course h3 { font-size: 14px; color: #f0ebe0 !important; margin: 0; flex: 1 1 auto; min-width: 140px; } #akl-account .akl-profile-course .akl-btn { width: auto !important; flex-shrink: 0; } #akl-account .akl-profile-course-focus { border-color: #c9a96e; background: rgba(201, 169, 110, 0.06); } /* ═══ RESPONSIVE ═══════════════════════════════════════════ */ @media (max-width: 560px) { #akl-account-page { min-height: 60vh; padding: 1em 0.5em; } #akl-account { padding: 1.8em 1.3em; margin: 0; max-width: 100%; border-left: none; border-right: none; } #akl-account .akl-auth-tab-labels label { font-size: 10.5px; letter-spacing: 1px; padding: 0.7em 0; } #akl-account .akl-profile-course { flex-direction: column; align-items: stretch; text-align: center; } #akl-account .akl-profile-course-media { width: 100%; height: auto; aspect-ratio: 16 / 9; } #akl-account .akl-profile-course .akl-btn { width: 100% !important; } #akl-account .akl-course-intro-title { font-size: 17px; } } /* ═══ TOP BAR (course/lesson pages while logged in) ═════════ */ #akl-topbar { position: fixed !important; bottom: 16px !important; right: 16px !important; top: auto !important; left: auto !important; z-index: 99999 !important; display: flex !important; align-items: center !important; gap: 8px !important; background: #0c0b07 !important; border: 1px solid rgba(201, 169, 110, 0.3) !important; padding: 9px 16px !important; font-family: var(--font-body, "Neue Machina", sans-serif) !important; font-size: 11px !important; letter-spacing: 0.5px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important; } #akl-topbar a { color: #b8ad98 !important; text-decoration: none !important; } #akl-topbar a:hover { color: #c9a96e !important; } #akl-topbar span { color: rgba(184, 173, 152, 0.4) !important; } @media (max-width: 560px) { #akl-topbar { font-size: 10px !important; padding: 6px 10px !important; } } /* ═══ LESSON PAGE — full width, no theme sidebar ═════════════ WordPress adds "single-akl_lesson" to automatically for every akl_lesson page, regardless of theme — that's the hook, not any theme-specific class, so this survives a theme change. .post-sidebar is this theme's actual widget-area class on the single-post template (different from the plain-Page template's #sidebar/.sidebar seen on /my-account/) — both are covered. */ body.single-akl_lesson #sidebar, body.single-akl_lesson .sidebar, body.single-akl_lesson .post-sidebar, body.single-akl_lesson aside[class*="sidebar"] { display: none !important; } body.single-akl_lesson #main-content, body.single-akl_lesson .main, body.single-akl_lesson .content-area, body.single-akl_lesson #primary, body.single-akl_lesson .site-main { width: 100% !important; max-width: 100% !important; float: none !important; } /* ═══ LESSON PAGE — branding ══════════════════════════════════ The theme's default single-post template renders a plain title on a plain (often white) background — this repaints the whole page in the site's own black/gold palette so a lesson feels like part of the course platform, not a generic blog post. */ body.single-akl_lesson, body.single-akl_lesson #main-content, body.single-akl_lesson .main, body.single-akl_lesson .content-area, body.single-akl_lesson article { background: #0c0b07 !important; color: #f0ebe0 !important; } body.single-akl_lesson .page-title, body.single-akl_lesson .entry-title, body.single-akl_lesson h1.entry-title { color: #f0ebe0 !important; font-family: var(--font, Georgia, serif) !important; } body.single-akl_lesson .page-header { background: transparent !important; border-color: rgba(201, 169, 110, 0.15) !important; } body.single-akl_lesson .entry-content, body.single-akl_lesson .entry-content p { color: #d8d2c4 !important; } /* Title + byline/date row ("by Ana Kay Team | Thu, 10 Sep 2026") — this theme's own classes, confirmed from the live markup. Kept alongside the generic entry-meta/posted-on/byline guesses below in case a different template is in play elsewhere. */ body.single-akl_lesson .custom-post-title { color: #f0ebe0 !important; font-family: var(--font, Georgia, serif) !important; } body.single-akl_lesson .custom-post-author-date, body.single-akl_lesson .custom-post-author-date a, body.single-akl_lesson .entry-meta, body.single-akl_lesson .entry-meta a, body.single-akl_lesson .posted-on, body.single-akl_lesson .posted-on a, body.single-akl_lesson .byline, body.single-akl_lesson .byline a, body.single-akl_lesson .post-meta, body.single-akl_lesson .post-meta a, body.single-akl_lesson [class*="entry-meta"], body.single-akl_lesson [class*="post-meta"] { color: #c9a96e !important; } body.single-akl_lesson .custom-post-author-date a:hover, body.single-akl_lesson .entry-meta a:hover, body.single-akl_lesson .posted-on a:hover, body.single-akl_lesson .byline a:hover, body.single-akl_lesson .post-meta a:hover { color: #dfc48a !important; } /* ═══ COURSE PAGE — full width, no theme sidebar, branding ════ Same treatment as the lesson page above, applied to the course sales page itself ("single-akl_course" — added to by WordPress for every akl_course page, any theme). */ body.single-akl_course #sidebar, body.single-akl_course .sidebar, body.single-akl_course .post-sidebar, body.single-akl_course aside[class*="sidebar"] { display: none !important; } body.single-akl_course #main-content, body.single-akl_course .main, body.single-akl_course .content-area, body.single-akl_course #primary, body.single-akl_course .site-main { width: 100% !important; max-width: 100% !important; float: none !important; } body.single-akl_course, body.single-akl_course #main-content, body.single-akl_course .main, body.single-akl_course .content-area, body.single-akl_course article { background: #0c0b07 !important; color: #f0ebe0 !important; } body.single-akl_course .page-title, body.single-akl_course .entry-title, body.single-akl_course h1.entry-title { color: #f0ebe0 !important; font-family: var(--font, Georgia, serif) !important; } body.single-akl_course .page-header { background: transparent !important; border-color: rgba(201, 169, 110, 0.15) !important; } body.single-akl_course .entry-content, body.single-akl_course .entry-content p { color: #d8d2c4 !important; } /* ═══ COURSE PAGE — auto-appended lesson roadmap ═════════════ Appended to the course's own written content via the_content (see AKL_Shortcodes::append_course_content) — the client only ever writes the sales copy in the post editor, nothing to remember to paste per course. */ .akl-course-page { margin-top: 2.5em; padding-top: 2em; border-top: 1px solid rgba(201, 169, 110, 0.15); } .akl-course-page-hd { font-family: var(--font, Georgia, serif); font-size: 22px; color: #f0ebe0 !important; margin: 0 0 1em; } .akl-course-page .akl-progress { margin-bottom: 1.5em; } .akl-course-page .akl-buy-form { margin-top: 1.8em; max-width: 320px; } @media (max-width: 560px) { .akl-course-page .akl-buy-form { max-width: 100%; } } .akl-lesson-viewer { margin-bottom: 1.8em; } .akl-lesson-crumb { margin: 0 0 1.2em !important; } .akl-lesson-crumb a { font-size: 11px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: #8a6030 !important; text-decoration: none !important; } .akl-lesson-crumb a:hover { color: #c9a96e !important; } .akl-lesson-video-frame { border: 1px solid rgba(201, 169, 110, 0.2); background: #000; padding: 6px; margin-bottom: 1.2em; } .akl-lesson-video { display: block; width: 100% !important; max-width: 100% !important; background: #000; } .akl-lesson-tools { display: flex; align-items: center; gap: 1.5em; flex-wrap: wrap; margin-bottom: 1.5em; } .akl-lesson-tools .akl-progress { flex: 1 1 220px; margin: 0 !important; } .akl-lesson-tools .akl-btn, .akl-lesson-tools .akl-mark-complete { flex-shrink: 0; width: auto !important; display: inline-block !important; padding: 0.7em 1.4em !important; background: transparent !important; color: #c9a96e !important; border: 1px solid rgba(201, 169, 110, 0.5) !important; font-size: 11px !important; letter-spacing: 1.5px !important; } .akl-lesson-tools .akl-btn:hover, .akl-lesson-tools .akl-mark-complete:hover:not(:disabled) { background: rgba(201, 169, 110, 0.1) !important; } .akl-lesson-nav { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-top: 2.5em; padding-top: 1.5em; border-top: 1px solid rgba(201, 169, 110, 0.15); } .akl-lesson-nav a { font-size: 12px !important; letter-spacing: 1px !important; color: #c9a96e !important; text-decoration: none !important; max-width: 45%; } .akl-lesson-nav a:hover { color: #dfc48a !important; } .akl-lesson-nav-next { text-align: right; margin-left: auto; } @media (max-width: 560px) { .akl-lesson-tools { flex-direction: column; align-items: stretch; } .akl-lesson-tools .akl-btn, .akl-lesson-tools .akl-mark-complete { width: 100% !important; text-align: center; } .akl-lesson-nav a { font-size: 11px !important; max-width: 48%; } }