/* Alex Smyrk Course — front-end. Premium, editorial, calm. Brand direction: Atkinson Hyperlegible, green accent, generous spacing. Colours are the agreed starting palette (placeholders, easy to retune). */ /* Palette lives on :root so the whole page (incl. , which sits OUTSIDE the .asc-fe wrapper) can read the warm-paper background token. */ :root { /* "Never Too Small" look: white ground, near-black ink, neutral greys. Monochrome & editorial — colour comes from the video stills, not the UI. (--asc-green var name kept for compatibility; it is the single ink accent.) */ --asc-green: #3C4F62; /* Alex's accent — soft slate blue (marks, rules, current) */ --asc-green-soft: #EAEEF2; /* light tint of the accent — selected states / soft fills */ --asc-success: #2FA36B; /* progress green */ --asc-btn-bg: #EFEFEC; /* button rest — the muted "Back to…" pill look */ --asc-btn-bg-hover: #DEDED9; /* button hover — medium grey */ --asc-btn-text: #3A3A38; /* button label — dark grey, not near-black */ --asc-ink: #1A1A1A; /* headings (kept dark for legibility) */ --asc-body: #2E2E2C; --asc-muted: #8C8C88; --asc-line: #E7E6E1; } .asc-fe { font-family: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--asc-body); } /* Course & lesson pages: clean white ground (editorial, gallery-like). */ body.asc-fe-page, body.asc-fe-page #content, body.asc-fe-page .site-content, body.asc-fe-page .ast-container { background-color: #fff !important; } /* ---------- Course curriculum ---------- */ .asc-curriculum { max-width: 760px; margin: 3rem auto 0; } .asc-curriculum-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 700; color: var(--asc-muted); margin: 0 0 1.5rem; } .asc-c-section { margin: 0 0 2.25rem; } .asc-c-section-title { font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: var(--asc-ink); margin: 0 0 1rem; padding: 0 0 0.5rem; border-bottom: 2px solid var(--asc-green); } .asc-c-lessons { list-style: none; margin: 0; padding: 0; } .asc-c-lesson { margin: 0 0 0.6rem; } .asc-c-lesson a { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; border: 1px solid var(--asc-line); border-radius: 12px; background: #fff; text-decoration: none; color: var(--asc-body); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .asc-c-lesson a:hover { border-color: var(--asc-green); box-shadow: 0 6px 20px rgba(20, 20, 20, 0.08); transform: translateY(-1px); } .asc-c-lesson.is-empty { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; border: 1px dashed #e0ddd4; border-radius: 12px; color: var(--asc-muted); } .asc-c-num { flex: 0 0 2rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--asc-green-soft); color: var(--asc-green); font-weight: 700; font-size: 0.9rem; } .asc-c-lesson.is-empty .asc-c-num { background: #f3f2ec; color: #b7b5ac; } .asc-c-title { flex: 1 1 auto; font-size: 1.08rem; } .asc-c-chev { color: var(--asc-green); font-size: 1.5rem; line-height: 1; } /* ---------- Lesson page ---------- */ .asc-lesson-top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.75rem; } .asc-back-pill { display: inline-flex; align-items: center; padding: 0.28rem 0.63rem; border-radius: 999px; background: var(--asc-green-soft); color: var(--asc-green); text-decoration: none; font-size: 0.63rem; font-weight: 700; transition: background 0.15s ease, color 0.15s ease; } .asc-back-pill:hover { background: var(--asc-green); color: #fff; } .asc-context { color: var(--asc-muted); font-size: 0.92rem; } /* Roomy, dyslexia-friendly reading for lesson content */ .asc-lesson-body { font-size: 1.12rem; line-height: 1.85; letter-spacing: 0.01em; } .asc-lesson-nav { display: flex; justify-content: space-between; gap: 1rem; margin: 2.75rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--asc-line); } .asc-nav-btn { flex: 1 1 0; max-width: 48%; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.85rem 1.1rem; border: 1px solid var(--asc-line); border-radius: 12px; text-decoration: none; color: var(--asc-body); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .asc-nav-btn:hover { border-color: var(--asc-green); box-shadow: 0 6px 20px rgba(20, 20, 20, 0.08); } .asc-next { text-align: right; align-items: flex-end; } .asc-nav-dir { color: var(--asc-green); font-weight: 700; font-size: 0.85rem; } .asc-nav-title { font-size: 1.02rem; } .asc-nav-btn.asc-disabled { border: none; box-shadow: none; pointer-events: none; } @media (max-width: 600px) { .asc-nav-btn { max-width: 50%; } } /* ---------- Lesson player (curriculum sidebar + main body) ---------- */ .asc-player { display: grid; grid-template-columns: minmax(270px, 324px) 1fr; gap: 2.5rem; align-items: start; max-width: 1080px; margin: 1.5rem auto 0; } /* Sidebar is pinned and scrolls on its own when the curriculum is long, so a long course list never pushes the page down — the main content scrolls past a stationary sidebar (matches the alexi.cz LifterLMS courses). */ .asc-player-side { align-self: start; position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--asc-line); } .asc-side-inner { border: 0; border-radius: 0; /* Generous bottom space so the last sections can scroll up near the top and their lessons stay fully visible / clickable, never jammed against the sticky sidebar's bottom edge. (Reset on mobile, below.) */ padding: 1.25rem 1.5rem 22vh 0; background: transparent; max-height: none; overflow: visible; } .asc-side-course { display: block; font-weight: 400; font-size: 1.9rem; line-height: 1.15; color: var(--asc-ink); text-decoration: none; margin: 0 0 1.25rem; padding-left: 0.85rem; border-left: 6px solid var(--asc-ink); } .asc-side-course:hover { color: var(--asc-green); } .asc-progress { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; } .asc-progress-track { flex: 1 1 auto; height: 8px; background: #eceae2; border-radius: 999px; overflow: hidden; } .asc-progress-fill { display: block; height: 100%; background: var(--asc-success); border-radius: 999px; transition: width 0.35s ease; } .asc-progress-pct { flex: 0 0 auto; font-size: 0.8rem; font-weight: 700; color: var(--asc-success); } .asc-side-section { margin: 0; border-bottom: 1px solid var(--asc-line); } .asc-side-section > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; font-weight: 700; color: var(--asc-ink); padding: 0.7rem 0.25rem 0.7rem 0.85rem; border-left: 3px solid var(--asc-line); } .asc-side-section[open] > summary { border-left-color: var(--asc-green); } .asc-side-section > summary::-webkit-details-marker { display: none; } .asc-side-section > summary::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var(--asc-green); flex: 0 0 auto; transition: transform 0.15s ease; } .asc-side-section[open] > summary::before { transform: rotate(90deg); } .asc-side-section[open] .asc-side-lessons { padding-bottom: 0.5rem; } .asc-side-lessons { list-style: none; margin: 0; padding: 0; } .asc-side-lesson a, .asc-side-lesson .asc-side-locked { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.55rem; border-radius: 8px; font-size: 0.95rem; text-decoration: none; color: var(--asc-body); } .asc-side-lesson a:hover { background: var(--asc-green-soft); } .asc-side-lesson.is-current a { background: var(--asc-green-soft); color: var(--asc-ink); font-weight: 700; } .asc-side-lesson.is-empty span { color: #b7b5ac; } .asc-side-num { flex: 0 0 auto; min-width: 1.3rem; font-size: 0.82rem; font-weight: 700; opacity: 0.8; } .asc-side-ltitle { flex: 1 1 auto; } .asc-player-main { min-width: 0; } @media (max-width: 880px) { .asc-player { grid-template-columns: 1fr; gap: 0; } .asc-player-main { order: 1; } .asc-player-side { order: 2; align-self: auto; position: static; max-height: none; overflow: visible; border-right: 0; border-top: 1px solid var(--asc-line); } .asc-side-inner { padding: 1.25rem 1.5rem; } .asc-course-title { display: block; } } /* Curriculum rendered inside the theme's (Astra) real sidebar column */ .asc-astra-side { position: sticky; top: 2rem; display: block; } @media (max-width: 921px) { .asc-astra-side { position: static; } .asc-astra-side .asc-side-inner { max-height: none; } } /* ---------- Plugin template (course/lesson) two-column player ---------- */ .asc-tpl-wrap { width: 100%; } .asc-player.asc-tpl { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0; gap: 0; box-sizing: border-box; } .asc-tpl .asc-player-main { background: transparent; border-radius: 0; padding: 0 0 2rem; } /* Text blocks carry the side padding; the featured image stays full-bleed. */ .asc-course-title, .asc-course-overview, .asc-start, .asc-lesson-top, .asc-lesson-title, .asc-lesson-body, .asc-complete-wrap, .asc-lesson-nav, .asc-locked-notice { padding-left: 1.5rem; padding-right: 1.5rem; } .asc-lesson-title, .asc-course-title { font-size: 2rem; line-height: 1.2; font-weight: 700; color: var(--asc-ink); margin: 0 0 1.25rem; } /* Course title lives in the sidebar on desktop; only shown in the main column on mobile. */ .asc-course-title { display: none; } .asc-tpl .asc-lesson-top { margin-top: 0; } .asc-course-hero { margin: 0 0 1.5rem; } .asc-course-hero img { display: block; width: 100%; height: auto; border-radius: 0; } .asc-course-overview { font-size: 1.08rem; line-height: 1.8; } .asc-start { margin: 1.75rem 0 0; } .asc-start-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--asc-green); color: #fff; text-decoration: none; font-weight: 700; padding: 0.75rem 1.5rem; border-radius: 999px; transition: opacity 0.15s ease; } .asc-start-btn:hover { opacity: 0.9; color: #fff; } @media (max-width: 880px) { .asc-tpl .asc-player-main { padding: 0 0 2rem; } } /* ---------- Progress: completion marks, locking, mark-complete ---------- */ .asc-side-mark { flex: 0 0 1.1rem; width: 1.1rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; line-height: 1; } .asc-side-mark.is-done { color: var(--asc-green); font-weight: 700; } .asc-side-mark.is-lock { color: #c3c1b8; } .asc-side-lesson.is-locked .asc-side-locked { color: #b7b5ac; cursor: default; } .asc-complete-wrap { margin: 1.75rem 0 0; } .asc-complete-btn { background: var(--asc-green); color: #fff; border: 0; font-family: inherit; font-size: 1rem; font-weight: 700; padding: 0.75rem 1.5rem; border-radius: 999px; cursor: pointer; transition: opacity 0.15s ease; } .asc-complete-btn:hover { opacity: 0.9; } .asc-complete-btn:disabled { opacity: 0.6; cursor: default; } .asc-complete-done { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--asc-green); font-weight: 700; } .asc-nav-btn.asc-disabled-next { opacity: 0.55; pointer-events: none; } .asc-nav-hint { display: block; margin-top: 0.2rem; font-size: 0.78rem; font-weight: 400; color: var(--asc-muted); } .asc-locked-notice { background: #f6f5ef; border: 1px solid var(--asc-line); border-radius: 12px; padding: 1.5rem; color: var(--asc-muted); font-size: 1.05rem; } /* ---------- Replay clip ---------- */ /* Sits directly under the video (lesson.js moves it there), so it inherits the lesson body's side padding. */ .asc-replay-wrap { margin: 1rem 0 0.5rem; } .asc-replay-btn { display: inline-flex; align-items: center; gap: 0.45rem; background: #fff; color: var(--asc-green); border: 2px solid var(--asc-green); font-family: inherit; font-size: 0.95rem; font-weight: 700; padding: 0.5rem 1.15rem; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .asc-replay-btn:hover { background: var(--asc-green); color: #fff; } .asc-replay-ic { flex: 0 0 auto; } /* ---------- H5P-gated mark complete ---------- */ /* With an exercise present, the button is hidden until lesson.js confirms the learner finished it correctly and adds .is-unlocked. */ .asc-complete-wrap[data-asc-h5p-gated="1"] .asc-complete-btn { display: none; } .asc-complete-wrap[data-asc-h5p-gated="1"].is-unlocked .asc-complete-btn { display: inline-block; } .asc-gate-hint { margin: 0; color: var(--asc-muted); font-size: 0.95rem; font-style: italic; } /* ---------- Restart course (learner, shown at 100%) ---------- */ .asc-reset { margin: 1.75rem 1.5rem 0; padding: 1.5rem; border: 1px solid var(--asc-line); border-radius: 12px; background: #f9f8f4; } .asc-reset-btn { background: #fff; color: var(--asc-green); border: 2px solid var(--asc-green); font-family: inherit; font-size: 1rem; font-weight: 700; padding: 0.65rem 1.4rem; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .asc-reset-btn:hover { background: var(--asc-green); color: #fff; } /* Armed (awaiting the confirming second click) — warn with a warmer tone. */ .asc-reset-btn.is-armed, .asc-admin-btn.is-armed { background: #a6462f; border-color: #a6462f; color: #fff; } .asc-reset-btn:disabled, .asc-admin-btn:disabled { opacity: 0.6; cursor: default; } .asc-reset-note { margin: 0.85rem 0 0; color: var(--asc-muted); font-size: 0.92rem; line-height: 1.6; } /* ---------- Admin tools (lesson page, admins only) ---------- */ .asc-admin-tools { margin: 2rem 1.5rem 0; padding: 1rem 1.25rem; border: 1px dashed #d6d3c8; border-radius: 12px; background: #fbfaf6; } .asc-admin-tools-label { display: block; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; font-weight: 700; color: var(--asc-muted); margin: 0 0 0.75rem; } .asc-admin-tools-row { display: flex; flex-wrap: wrap; gap: 0.6rem; } .asc-admin-btn { background: #fff; color: var(--asc-ink); border: 1px solid var(--asc-line); font-family: inherit; font-size: 0.88rem; font-weight: 700; padding: 0.45rem 1rem; border-radius: 999px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .asc-admin-btn:hover { border-color: var(--asc-green); background: var(--asc-green-soft); } /* Preview-mode toggle: link styled as a pill; green fill when active. */ a.asc-preview-toggle { display: inline-flex; align-items: center; text-decoration: none; } a.asc-preview-toggle.is-on { background: var(--asc-green); border-color: var(--asc-green); color: #fff; } a.asc-preview-toggle.is-on:hover { background: var(--asc-green); color: #fff; } /* ---------- One muted button look, everywhere ---------- All course buttons share the soft "Back to…" pill: light grey at rest, medium grey on hover, dark-grey label — no fills, no strong ink. Forced (!important) so the theme's default (blue) button colours can't bleed in, including on hover. The site-wide theme colour (Read More, links) is set separately in Astra Customizer → Global → Colors. */ .asc-start-btn, .asc-complete-btn, .asc-replay-btn, .asc-reset-btn { -webkit-tap-highlight-color: transparent; background: var(--asc-btn-bg) !important; color: var(--asc-btn-text) !important; border: 0 !important; box-shadow: none !important; } .asc-start-btn:hover, .asc-start-btn:focus, .asc-start-btn:active, .asc-complete-btn:hover, .asc-complete-btn:focus, .asc-complete-btn:active, .asc-replay-btn:hover, .asc-replay-btn:focus, .asc-replay-btn:active, .asc-reset-btn:hover, .asc-reset-btn:focus, .asc-reset-btn:active { background: var(--asc-btn-bg-hover) !important; color: var(--asc-btn-text) !important; } .asc-complete-btn:disabled { background: var(--asc-btn-bg) !important; opacity: 0.5; } /* Preserve the two-click "armed" reset warning (red) over the rules above. */ .asc-reset-btn.is-armed, .asc-admin-btn.is-armed { background: #a6462f !important; border-color: #a6462f !important; color: #fff !important; } .asc-start-btn:focus-visible, .asc-complete-btn:focus-visible, .asc-replay-btn:focus-visible, .asc-reset-btn:focus-visible { outline: 2px solid var(--asc-muted); outline-offset: 2px; } /* ---------- H5P action buttons → same muted pill (H5P defaults to blue) ---------- Works when the exercise renders inline in the page (the usual case). If an exercise is embedded in an