` by wrapLessonSections(). When the audio system
advances to a section, `.section-active` is flipped on that wrapper —
concept callouts, paragraphs, lists, everything inside inherits the
highlight automatically. Subtle left border + light green wash, no
layout shift. */
.lesson-body .lesson-section {
padding: 2px 0;
border-left: 4px solid transparent;
padding-left: 14px;
margin-left: -18px;
border-radius: 2px;
transition: border-color .25s ease, background .25s ease;
}
.lesson-body .lesson-section.section-active {
border-left-color: #1D9E75;
background: #f0faf6;
}
.lesson-body .lesson-section--takeaway {
/* The takeaway card brings its own strong visual treatment; keep the
container padding minimal so the card's rounded corners stay clean. */
padding: 0;
padding-left: 14px;
margin-left: -18px;
border-left: 4px solid transparent;
}
.lesson-body .lesson-section--takeaway.section-active {
border-left-color: #1D9E75;
background: transparent;
}
.lesson-body h2.lesson-section-heading::before,
.lesson-body h3.lesson-section-heading::before {
content: attr(data-section-index);
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
border-radius: 50%;
background: #1D9E75;
color: #fff;
font-size: 1.2rem;
font-weight: 800;
line-height: 1;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(29,158,117,.35), 0 0 0 4px rgba(29,158,117,.12);
}
/* ---- Audio player (inline, scrolls with page on all viewports) ---- */
.lesson-wrapper {
padding-top: 0;
padding-bottom: 40px;
}
@media (max-width: 767px) {
/* ---- Compact audio player on mobile ---- */
.tts-bar {
margin: 8px 0 16px;
padding: 10px 14px;
box-shadow: 0 6px 18px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.1);
}
.tts-bar .tts-guide { display: none; }
.tts-bar .tts-hint-sub { display: none; }
.tts-bar .tts-prep-msg {
padding-bottom: 8px;
margin-bottom: 10px;
font-size: .78rem;
}
.tts-bar .tts-top-row { flex-wrap: nowrap; gap: 10px; }
.tts-bar .tts-text-col { flex: 1 1 auto; min-width: 0; flex-basis: auto; }
.tts-bar .tts-text-col .tts-hint {
text-align: left;
font-size: .85rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tts-bar .tts-controls {
flex: 0 0 auto;
flex-basis: auto;
flex-wrap: nowrap;
gap: 8px;
justify-content: flex-end;
}
.tts-bar .tts-play-btn {
padding: 10px 18px;
min-height: 48px;
min-width: 48px;
font-size: .88rem;
flex: 0 0 auto;
}
.tts-bar .tts-stop-btn {
padding: 8px 14px;
min-height: 44px;
min-width: 44px;
font-size: .78rem;
}
.tts-bar .tts-speed-cycle {
padding: 8px 12px;
min-height: 44px;
font-size: .72rem;
}
.tts-bar .tts-progress { margin-top: 8px; }
/* Mobile: bar is inline, so no extra top padding needed. Keep bottom
room for the global bottom nav (72px). */
body.signed-in .lesson-wrapper {
padding-top: 0;
padding-bottom: 96px;
}
.lesson-wrapper {
padding-top: 0;
}
.lesson-body h2.lesson-section-heading,
.lesson-body h3.lesson-section-heading {
font-size: 1.35rem;
gap: 12px;
}
.lesson-body h2.lesson-section-heading::before,
.lesson-body h3.lesson-section-heading::before {
width: 36px;
height: 36px;
min-width: 36px;
font-size: 1.05rem;
box-shadow: 0 2px 8px rgba(29,158,117,.28), 0 0 0 3px rgba(29,158,117,.12);
}
/* Mobile — tighter section wrapper indent so the green bar doesn't
bleed past the lesson body padding on narrow screens. */
.lesson-body .lesson-section {
padding-left: 10px;
margin-left: -14px;
border-left-width: 3px;
}
.lesson-body .lesson-section--takeaway {
padding-left: 10px;
margin-left: -14px;
}
}
/* ---- Persistent mini-player (appears on non-lesson pages when a lesson
is paused mid-playback). Lives outside #app so it survives every
re-render. Sits above the bottom nav on mobile, above the viewport
bottom on desktop. */
#mini-player-root {
position: fixed;
left: 50%;
transform: translateX(-50%) translateY(140%);
bottom: 20px;
width: calc(100% - 32px);
max-width: 680px;
z-index: 85;
pointer-events: none;
transition: transform .32s cubic-bezier(.2,.7,.25,1), opacity .28s ease;
opacity: 0;
}
#mini-player-root.mini-player-visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}
.mini-player {
display: flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
border-radius: 14px;
padding: 10px 14px;
box-shadow: 0 14px 36px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.2);
color: #fff;
}
.mini-player-icon {
font-size: 1.6rem;
line-height: 1;
flex-shrink: 0;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(255,255,255,.08);
}
.mini-player-text {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.mini-player-course {
font-size: .92rem;
font-weight: 800;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: .1px;
}
.mini-player-section {
font-size: .75rem;
font-weight: 600;
color: rgba(255,255,255,.6);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mini-player-playbtn {
flex-shrink: 0;
width: 44px;
height: 44px;
min-width: 44px;
border-radius: 50%;
border: none;
background: #1D9E75;
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(29,158,117,.45);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.mini-player-playbtn:hover {
background: #16A34A;
transform: scale(1.05);
}
.mini-player-playbtn:active { transform: scale(.96); }
.mini-player-playbtn svg {
width: 20px;
height: 20px;
fill: #fff;
}
.mini-player-resumebtn {
flex-shrink: 0;
border: 1.5px solid rgba(255,255,255,.25);
background: transparent;
color: #fff;
font-family: var(--font);
font-size: .82rem;
font-weight: 700;
padding: 10px 16px;
min-height: 44px;
border-radius: 100px;
cursor: pointer;
white-space: nowrap;
transition: background .15s ease, border-color .15s ease;
}
.mini-player-resumebtn:hover {
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.45);
}
.mini-player-dismiss {
flex-shrink: 0;
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.7);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s ease, color .15s ease;
}
.mini-player-dismiss:hover {
background: rgba(255,255,255,.14);
color: #fff;
}
.mini-player-dismiss svg {
width: 16px;
height: 16px;
fill: currentColor;
}
@media (max-width: 767px) {
#mini-player-root {
bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 8px);
width: calc(100% - 16px);
}
.mini-player {
padding: 8px 10px;
gap: 8px;
border-radius: 12px;
}
.mini-player-icon {
width: 36px;
height: 36px;
font-size: 1.35rem;
border-radius: 8px;
flex-shrink: 0;
}
.mini-player-text { min-width: 0; }
.mini-player-course {
font-size: .85rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mini-player-section {
font-size: .7rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* All three buttons now meet the 44px minimum touch target. */
.mini-player-playbtn {
width: 44px;
height: 44px;
min-width: 44px;
}
.mini-player-playbtn svg { width: 18px; height: 18px; }
.mini-player-resumebtn {
padding: 10px 12px;
font-size: .75rem;
min-height: 44px;
}
.mini-player-dismiss {
width: 44px;
height: 44px;
min-width: 44px;
}
}
@media (max-width: 480px) {
/* On very narrow screens trim the Resume label font but keep the 44px
touch target — users still have play/dismiss. */
.mini-player-resumebtn {
padding: 10px 10px;
font-size: .7rem;
min-height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
#mini-player-root { transition: none; }
}
/* ---- Auto-resume toast (shown briefly after a scenario answer unlocks
the next section and audio is about to pick back up). */
.audio-resume-toast {
position: fixed;
left: 50%;
bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 24px);
transform: translateX(-50%) translateY(20px);
background: linear-gradient(135deg, #1D9E75 0%, #16A34A 100%);
color: #fff;
font-weight: 700;
font-size: .88rem;
padding: 12px 18px;
border-radius: 100px;
box-shadow: 0 12px 30px rgba(29,158,117,.4), 0 2px 8px rgba(0,0,0,.18);
display: inline-flex;
align-items: center;
gap: 10px;
z-index: 90;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease, transform .25s cubic-bezier(.2,.7,.25,1);
}
.audio-resume-toast.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.audio-resume-toast svg {
width: 16px;
height: 16px;
fill: #fff;
}
@media (max-width: 767px) {
.audio-resume-toast {
bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 16px);
font-size: .82rem;
padding: 10px 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.audio-resume-toast { transition: opacity .2s ease; }
}
/* Very narrow phones — trim the progress-bar label down one more step so
"Section X of 8 · Long Title" doesn't ellipsis the title entirely, and
hide the "Listen to this lesson" hint text so the three control buttons
get all the available horizontal room. */
@media (max-width: 420px) {
.tts-bar .tts-text-col { display: none; }
.tts-bar .tts-controls { flex: 1 1 auto; justify-content: space-between; }
.tts-bar .tts-play-btn { padding: 10px 14px; font-size: .85rem; flex: 1 1 auto; justify-content: center; }
}
/* ========================================================================
Section gating + scenario question cards
======================================================================== */
/* Hidden-until-unlocked sections. display:none so they take no space and
aren't read by audio highlight logic until reveal. */
.lesson-section.section-locked {
display: none !important;
}
/* Reveal animation when a section just flipped to unlocked. */
@keyframes section-unlock-fade {
0% { opacity: 0; transform: translateY(14px); }
100% { opacity: 1; transform: translateY(0); }
}
.lesson-section.section-just-unlocked {
animation: section-unlock-fade .55s cubic-bezier(.2,.8,.2,1);
}
/* Scenario question card — lives inside its section at the bottom. */
.scenario-question {
margin: 28px 0 8px;
padding: 22px 24px 20px;
background: #ffffff;
border: 1px solid #E5E7EB;
border-left: 4px solid #10B981;
border-radius: 14px;
box-shadow: 0 6px 18px -12px rgba(16, 185, 129, .45), 0 2px 6px -2px rgba(17, 24, 39, .06);
animation: section-unlock-fade .45s cubic-bezier(.2,.8,.2,1);
}
.scenario-question-head {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.scenario-question-label {
font-size: .72rem;
font-weight: 800;
letter-spacing: .9px;
text-transform: uppercase;
color: #047857;
}
.scenario-question-text {
font-size: 1.02rem;
line-height: 1.55;
color: #111827;
font-weight: 500;
margin-bottom: 16px;
}
.scenario-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.scenario-option-btn {
display: block;
width: 100%;
min-height: 52px;
padding: 14px 16px;
border: 1.5px solid #E5E7EB;
border-radius: 12px;
background: #FAFAFA;
color: #1F2937;
font-size: .96rem;
font-family: inherit;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.scenario-option-btn:hover:not(:disabled) {
background: #F0FDF4;
border-color: #34D399;
transform: translateY(-1px);
box-shadow: 0 4px 10px -6px rgba(16, 185, 129, .35);
}
.scenario-option-btn:active:not(:disabled) {
transform: translateY(0);
}
.scenario-option-btn:disabled {
cursor: default;
opacity: .75;
}
.scenario-option-btn.scenario-option-selected-correct {
background: #D1FAE5;
border-color: #10B981;
color: #065F46;
font-weight: 700;
opacity: 1;
}
.scenario-option-btn.scenario-option-selected-wrong {
background: #FEF3C7;
border-color: #F59E0B;
color: #92400E;
}
.scenario-feedback { margin-top: 14px; }
.scenario-confirm,
.scenario-encourage {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 12px 14px;
border-radius: 10px;
font-size: .92rem;
line-height: 1.5;
animation: section-unlock-fade .35s cubic-bezier(.2,.8,.2,1);
}
.scenario-confirm {
background: #ECFDF5;
border: 1px solid #A7F3D0;
color: #065F46;
}
.scenario-confirm-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #10B981;
color: #fff;
font-weight: 800;
font-size: .8rem;
flex-shrink: 0;
}
.scenario-encourage {
background: #FFFBEB;
border: 1px solid #FDE68A;
color: #92400E;
}
.scenario-encourage-icon { font-size: 1.05rem; flex-shrink: 0; }
.scenario-transition {
margin-top: 10px;
padding: 10px 14px;
background: #F5F3FF;
border-left: 3px solid #7C3AED;
border-radius: 8px;
color: #5B21B6;
font-size: .9rem;
font-weight: 500;
line-height: 1.5;
animation: section-unlock-fade .45s cubic-bezier(.2,.8,.2,1);
}
.scenario-question--loading {
border-left-color: #D1D5DB;
}
.scenario-question-loading-row {
display: flex;
align-items: center;
gap: 10px;
color: #6B7280;
font-size: .9rem;
}
/* v1.11.1 — Subtle "Loading question…" placeholder shown while we wait
to see if the scenario card will mount. Replaced by the scenario card
on success, or by the manual Continue button on timeout. */
.scenario-pending-loader {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 24px 0 6px;
padding: 10px 14px;
color: #9CA3AF;
font-size: .88rem;
font-style: italic;
}
.scenario-pending-text {
letter-spacing: .01em;
}
.scenario-pending-continue {
display: flex;
justify-content: center;
margin: 24px 0 6px;
}
.scenario-spinner {
width: 16px;
height: 16px;
border: 2px solid #E5E7EB;
border-top-color: #10B981;
border-radius: 50%;
animation: spin 0.9s linear infinite;
display: inline-block;
}
@media (max-width: 600px) {
.scenario-question { padding: 18px 16px 16px; margin: 24px 0 6px; }
.scenario-question-text { font-size: .98rem; }
.scenario-option-btn { font-size: .92rem; min-height: 56px; padding: 14px; }
}
/* Small "answer the question above to continue" nudge shown at the bottom
of every scenario card until the user answers correctly. Styled in
Vivoso green with an upward arrow pointing at the options. */
.scenario-nudge {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 18px;
margin-bottom: 14px;
padding: 12px 16px;
color: #047857;
font-size: .98rem;
font-weight: 800;
text-align: center;
}
.scenario-nudge-arrow {
display: inline-block;
font-size: 1.25rem;
font-weight: 900;
line-height: 1;
animation: scenario-nudge-bounce 1.6s ease-in-out infinite;
}
.scenario-nudge-text { letter-spacing: .01em; }
@keyframes scenario-nudge-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
/* Once the user picks the right answer the nudge is no longer needed, but it
sits ABOVE the options (v1.39.50) rather than in the confirmation's slot, so
display:none would collapse its box and shift the whole option list upward at
the moment the user is looking at their selection. visibility:hidden keeps the
box and the layout still. */
.scenario-question.scenario-correct .scenario-nudge { visibility: hidden; }
/* Audio-ended nudge — shown at the top of the scenario card when audio
playback naturally reaches the end of the currently-unlocked content on
sections 1-4. Warm Vivoso green, NOT an error. Arrow points down at the
scenario question below. Auto-hidden when the section is answered
correctly (via the .scenario-correct parent selector). */
.audio-ended-nudge {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: -4px 0 14px 0;
padding: 12px 16px;
background: #ECFDF5;
border: 1.5px solid #A7F3D0;
border-radius: 12px;
color: #047857;
font-size: .95rem;
font-weight: 700;
text-align: center;
line-height: 1.4;
animation: audio-ended-nudge-fade .45s cubic-bezier(.2,.8,.2,1);
}
.audio-ended-nudge[hidden] { display: none; }
.audio-ended-nudge-arrow {
display: inline-block;
font-size: 1.2rem;
font-weight: 900;
line-height: 1;
color: #047857;
animation: audio-ended-nudge-bounce 1.6s ease-in-out infinite;
}
.audio-ended-nudge-text { letter-spacing: .01em; }
@keyframes audio-ended-nudge-fade {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes audio-ended-nudge-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
.audio-ended-nudge,
.audio-ended-nudge-arrow { animation: none; }
}
.scenario-question.scenario-correct .audio-ended-nudge { display: none; }
/* Placeholder shown when a section has been unlocked but its content is
still being fetched from the server. */
.lesson-section-loading {
margin: 32px 0 12px;
padding: 24px;
background: #FAFAFA;
border: 1px dashed #E5E7EB;
border-radius: 14px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
animation: section-unlock-fade .45s cubic-bezier(.2,.8,.2,1);
}
.lesson-section-loading-head {
display: flex;
align-items: center;
gap: 10px;
color: #6B7280;
font-size: .95rem;
}
/* ---- TTS Fallback Warning ---- */
.tts-fallback-warning {
position: fixed;
top: 72px;
left: 50%;
transform: translateX(-50%) translateY(-20px);
z-index: 9000;
background: #FEF3C7;
color: #92400E;
border: 1px solid #FCD34D;
border-radius: 10px;
padding: 10px 18px;
font-size: .85rem;
font-weight: 600;
box-shadow: 0 4px 14px rgba(0,0,0,.12);
opacity: 0;
transition: opacity .3s, transform .3s;
pointer-events: none;
white-space: nowrap;
max-width: 90vw;
text-align: center;
}
.tts-fallback-warning.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ---- Feedback Button & Modal ---- */
.feedback-fab,
button.feedback-fab {
position: fixed !important;
bottom: 20px !important;
right: 20px !important;
left: auto !important;
z-index: 9999 !important;
display: flex !important;
align-items: center;
gap: 5px;
background: var(--steel) !important;
color: #fff !important;
border: none !important;
border-radius: 9999px !important;
padding: 7px 13px !important;
font-size: .75rem;
font-weight: 600;
font-family: var(--font);
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,.14);
transition: transform .15s, box-shadow .15s;
}
.feedback-fab:hover,
button.feedback-fab:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,.25);
background: #3B4A66 !important;
}
.feedback-fab-icon {
font-size: .85rem;
line-height: 1;
}
@media (max-width: 767px) {
body.signed-in .feedback-fab,
body.signed-in button.feedback-fab { bottom: 80px !important; }
}
.feedback-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(0,0,0,.45);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
animation: feedback-fade-in .2s ease;
}
@keyframes feedback-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.feedback-modal {
background: #fff;
border-radius: 16px;
width: 100%;
max-width: 480px;
padding: 28px 24px 20px;
box-shadow: 0 20px 60px rgba(0,0,0,.25);
animation: feedback-slide-up .25s ease;
}
@keyframes feedback-slide-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.feedback-modal h2 {
margin: 0 0 4px;
font-size: 1.25rem;
color: #1a1a1a;
}
.feedback-modal .feedback-subtitle {
margin: 0 0 20px;
font-size: .9rem;
color: #6B7280;
}
.feedback-modal label {
display: block;
font-size: .85rem;
font-weight: 600;
color: #374151;
margin-bottom: 6px;
}
.feedback-modal select,
.feedback-modal textarea {
width: 100%;
border: 1px solid #D1D5DB;
border-radius: 10px;
padding: 10px 12px;
font-size: .95rem;
font-family: var(--font);
background: #FAFAFA;
color: #1a1a1a;
transition: border-color .15s;
box-sizing: border-box;
}
.feedback-modal select:focus,
.feedback-modal textarea:focus {
outline: none;
border-color: var(--amber);
}
.feedback-modal textarea {
resize: vertical;
min-height: 140px;
}
.feedback-field + .feedback-field {
margin-top: 16px;
}
.feedback-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
.feedback-btn-cancel {
padding: 10px 20px;
border: 1px solid #D1D5DB;
border-radius: 10px;
background: #fff;
color: #374151;
font-size: .9rem;
font-weight: 600;
font-family: var(--font);
cursor: pointer;
}
.feedback-btn-cancel:hover { background: #F3F4F6; }
.feedback-btn-submit {
padding: 10px 20px;
border: none;
border-radius: 10px;
background: var(--amber);
color: #fff;
font-size: .9rem;
font-weight: 600;
font-family: var(--font);
cursor: pointer;
transition: opacity .15s;
}
.feedback-btn-submit:disabled {
opacity: .45;
cursor: not-allowed;
}
.feedback-btn-submit:not(:disabled):hover {
background: #B8741F;
}
.feedback-confirmation {
text-align: center;
padding: 32px 16px;
font-size: 1.1rem;
color: var(--oxford);
font-weight: 600;
}
/* Phase 2.1 — Signup / email verification / auth-callback screens.
White card on the page background, brand-aligned. Reuses existing
.btn-primary and .btn-secondary; introduces .signup-* for the
form and copy. Sized for mobile-first; widens at 600px+. */
.signup-page {
min-height: 60vh;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 32px 16px 64px;
}
.signup-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px 24px;
width: 100%;
max-width: 440px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.signup-card--centered { text-align: center; }
.signup-brand {
text-align: center;
margin-bottom: 24px;
}
.signup-tagline {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: 14px;
color: #A07800;
margin: 6px 0 0;
}
.signup-headline {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 28px;
line-height: 1.2;
color: var(--vivoso-purple);
margin: 0 0 12px;
text-align: center;
}
.signup-intro {
font-family: var(--font);
font-size: 15px;
color: var(--text);
text-align: center;
margin: 0 0 24px;
line-height: 1.5;
}
.signup-subtext {
font-family: var(--font);
font-size: 13px;
color: var(--text-secondary);
text-align: center;
margin: 16px 0 0;
line-height: 1.5;
}
.signup-subtext a { color: var(--primary); text-decoration: underline; }
.signup-form {
display: flex;
flex-direction: column;
gap: 16px;
margin: 0 0 16px;
}
.signup-field {
display: flex;
flex-direction: column;
gap: 6px;
text-align: left;
}
.signup-field-label {
font-family: var(--font);
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.signup-field input {
font-family: var(--font);
font-size: 16px;
padding: 11px 14px;
border: 1.5px solid var(--border);
border-radius: 8px;
background: #fff;
color: var(--text);
width: 100%;
box-sizing: border-box;
transition: border-color .15s ease;
}
.signup-field input:focus {
outline: none;
border-color: var(--primary);
}
.signup-field-help {
font-family: var(--font);
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.4;
}
.signup-submit {
width: 100%;
margin-top: 4px;
}
.signup-submit:disabled {
opacity: 0.65;
cursor: not-allowed;
}
.signup-alert {
background: #FEE2E2;
border: 1px solid #F87171;
color: #991B1B;
border-radius: 8px;
padding: 10px 14px;
font-size: 14px;
line-height: 1.45;
margin: 0 0 16px;
}
.signup-alert:focus { outline: 2px solid #F87171; outline-offset: 2px; }
.signup-footer-line {
font-family: var(--font);
font-size: 14px;
color: var(--text-secondary);
text-align: center;
margin: 12px 0 0;
}
.signup-footer-line a { color: var(--primary); text-decoration: none; font-weight: 600; }
.signup-footer-line a:hover { text-decoration: underline; }
.signup-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px;
}
.signup-resend-status {
font-family: var(--font);
font-size: 13px;
color: var(--text-secondary);
text-align: center;
margin: 12px 0 0;
min-height: 1.2em;
}
@media (min-width: 600px) {
.signup-card { padding: 40px 36px; }
.signup-headline { font-size: 32px; }
}
/* Phase 2.1 Group B — /login screen */
.login-divider {
display: flex;
align-items: center;
text-align: center;
font-family: var(--font);
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-muted);
margin: 18px 0;
}
.login-divider::before,
.login-divider::after {
content: "";
flex: 1;
border-top: 1px solid var(--border);
}
.login-divider span { padding: 0 12px; }
.login-google-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 12px 16px;
background: #ffffff;
color: #202124;
border: 1px solid var(--border);
border-radius: 12px;
font-family: var(--font);
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.login-google-btn:hover { background: #F8FAFC; border-color: #94A3B8; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.login-google-btn:disabled { opacity: .55; cursor: not-allowed; }
.login-google-icon { display: inline-block; flex: 0 0 18px; }
.login-forgot-link {
display: block;
text-align: right;
margin-top: 6px;
font-family: var(--font);
font-size: 12px;
color: var(--primary);
text-decoration: none;
font-weight: 600;
}
.login-forgot-link:hover { text-decoration: underline; }
.nav-btn-signin { font-weight: 600; }
/* Phase 2.1 Group C — sign-out button on /profile */
.profile-signout-btn {
color: var(--danger);
border-color: var(--danger);
}
.profile-signout-btn:hover {
background: var(--danger);
color: #ffffff;
}
/* ===========================================================
v1.21.0 — Content transparency
=========================================================== */
/* Soft callout used on About + Landing — a quiet pointer to /our-approach.
3px Vivoso Purple left rail + rounded right side; surface bg. */
.soft-callout {
background: var(--surface);
border-left: 3px solid var(--vivoso-purple);
padding: 16px 20px;
margin: 32px 0;
border-radius: 0 8px 8px 0;
}
.soft-callout p {
font-family: var(--font);
font-size: 15px;
color: var(--text-primary);
margin: 0;
line-height: 1.55;
}
.soft-callout a {
color: var(--learning-teal);
text-decoration: underline;
font-weight: 500;
cursor: pointer;
}
.soft-callout a:hover { text-decoration: none; }
/* Landing-page wrapper around the callout — keeps the content centered
inside the lp-section grid (no card chrome, just spacing). */
.lp-soft-callout-section {
max-width: 720px;
margin: 0 auto;
padding: 0 20px;
}
/* v1.22.3 — Shared "Curious how our content is created?" section.
Lives on landing, /about, /parents, /schools, /organizations with
audience-specific subhead copy. Replaces the old .soft-callout on
landing and /about with a louder two-button credibility moment. */
.content-transparency-section {
padding: 56px 20px;
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.content-transparency-heading {
font-size: clamp(1.5rem, 3vw, 2rem);
margin: 0 0 12px;
}
.content-transparency-sub {
font-family: var(--font-body);
color: var(--text-secondary);
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
margin: 0 auto 24px;
max-width: 620px;
}
.content-transparency-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.btn-content-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--vivoso-purple);
border: 2px solid var(--vivoso-purple);
border-radius: var(--radius-sm);
font-family: var(--font);
font-weight: 700;
font-size: 0.95rem;
padding: 12px 28px;
cursor: pointer;
transition: background .15s, color .15s, transform .15s, box-shadow .15s;
text-decoration: none;
min-width: 180px;
}
.btn-content-ghost:hover {
background: var(--vivoso-purple);
color: #FFFFFF;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(107, 70, 160, 0.25);
}
@media (max-width: 600px) {
.content-transparency-section { padding: 40px 20px; }
.content-transparency-actions { flex-direction: column; align-items: stretch; }
.btn-content-ghost { width: 100%; min-width: 0; }
}
/* Shared shell for /our-approach and /editorial-principles. Reuses the
existing display class on the hero; everything else is local. */
.content-page {
max-width: 760px;
margin: 0 auto;
padding: 0 20px 56px;
}
.content-page-hero {
text-align: center;
margin: 32px 0 28px;
}
.content-page-title {
color: var(--vivoso-purple);
font-size: 2.2rem;
margin: 0 0 12px;
}
.content-page-subtitle {
font-family: var(--font);
font-size: 16px;
color: var(--text-secondary);
margin: 0;
}
.content-page-section { margin: 28px 0; }
.content-page-section h2 {
font-family: var(--font);
font-size: 1.25rem;
font-weight: 700;
color: var(--vivoso-purple);
margin: 0 0 12px;
}
.content-page-section p {
font-family: var(--font);
font-size: 16px;
line-height: 1.65;
color: var(--text-primary);
margin: 0 0 14px;
}
.content-page-lede { font-size: 17px; line-height: 1.6; }
.content-page-list {
list-style: disc;
margin: 8px 0 14px 22px;
padding: 0;
}
.content-page-list li {
font-family: var(--font);
font-size: 16px;
line-height: 1.65;
color: var(--text-primary);
margin-bottom: 10px;
}
.content-page-link {
color: var(--learning-teal);
text-decoration: underline;
font-weight: 500;
cursor: pointer;
}
.content-page-link:hover { text-decoration: none; }
.content-page-quote {
margin: 12px 0;
padding: 12px 16px;
border-left: 3px solid var(--border);
background: var(--surface);
font-style: italic;
color: var(--text-secondary);
border-radius: 0 6px 6px 0;
}
.content-page-cta {
text-align: center;
margin-top: 36px;
}
/* Lesson personalization label — visible at full opacity, fades to 30%
after 4s. prefers-reduced-motion users get the dimmed state from the
start with no transition. */
.lesson-personalization-label {
font-family: var(--font);
font-size: 13px;
color: #6B6878;
margin: 8px 0 24px;
opacity: 1;
transition: opacity 0.6s ease;
}
.lesson-personalization-label.dimmed { opacity: 0.3; }
@media (prefers-reduced-motion: reduce) {
.lesson-personalization-label {
opacity: 0.3;
transition: none;
}
}
/* Lesson footer note — sub-footer link to /our-approach, deliberately
easy to miss but available. */
.lesson-footer-note {
margin: 48px 0 24px;
text-align: center;
font-family: var(--font);
font-size: 12px;
color: #6B6878;
opacity: 0.7;
}
.lesson-footer-note p { margin: 0; line-height: 1.5; }
.lesson-footer-note a {
color: var(--learning-teal);
text-decoration: underline;
cursor: pointer;
}
.lesson-footer-note a:hover { text-decoration: none; }
/* ===========================================================
v1.21.4 — BETA indicators
=========================================================== */
/* BETA pill that sits to the right of the Vivoso wordmark in the top
nav and the landing hero. Default is the brightened-gold variant
used on Deep Purple surfaces (top nav, landing hero). The
--on-light modifier swaps in Mission Gold for use on light
surfaces (onboarding welcome screen). White text in both. */
.beta-pill {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
border-radius: 4px;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
background: #C9A23A;
color: #ffffff;
vertical-align: middle;
position: relative;
top: -2px;
line-height: 1.4;
}
.beta-pill--on-light {
background: var(--mission-gold, #A07800);
}
.beta-pill--xl {
/* Slight bump for the landing hero where the wordmark is xl. */
font-size: 11px;
padding: 3px 10px;
margin-left: 10px;
top: -8px;
}
/* v1.28.99 — /courses ribbon for free-tier signed-in users. Moonlight box
with 2px Amber border and an Amber CTA, rendered above the catalog grid.
Mirrors the same audience as the conversion strip (free + signed-in +
no gate bypass), conditional applied at the renderCourses call site. */
.courses-free-ribbon {
background: var(--moonlight);
border: 2px solid var(--amber);
border-radius: 8px;
padding: 16px 20px;
margin: 0 0 24px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 15px;
color: var(--steel);
flex-wrap: wrap;
}
.courses-free-ribbon span {
flex: 1;
min-width: 200px;
}
/* #17: .courses-free-ribbon .btn-primary color override removed — redundant
with the now-Amber base .btn-primary. Responsive width rule kept below. */
@media (max-width: 640px) {
.courses-free-ribbon {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.courses-free-ribbon .btn-primary {
width: 100%;
}
}
/* v1.28.99 — Free-tier conversion strip. Sticky Amber bar below the main
nav, populated by renderHeader() only for signed-in free-tier users
(annual/monthly/comp/admin/tester/signed-out see nothing). The :empty
rule hides the host div for everyone else without needing a separate
display toggle. */
#conversion-strip:empty {
display: none;
}
.conversion-strip {
width: 100%;
background: var(--amber);
color: #ffffff;
padding: 8px 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 14px;
font-weight: 500;
position: sticky;
top: 64px;
z-index: 99;
box-shadow: 0 2px 6px rgba(2, 18, 47, 0.12);
}
.conversion-strip-text {
color: #ffffff;
}
.conversion-strip-cta {
color: #ffffff;
text-decoration: underline;
cursor: pointer;
font-weight: 600;
white-space: nowrap;
}
.conversion-strip-cta:hover {
color: var(--moonlight);
}
@media (max-width: 640px) {
.conversion-strip {
font-size: 13px;
padding: 6px 12px;
gap: 8px;
}
}
/* Phase 2.3c.4 — ADMIN / TESTER indicator pill. Sits to the right of the
Vivoso wordmark (and the BETA pill, when present) when the user has
gate bypass. Steel #495B7D background per BIS v1.3 brand tokens, white
DM Sans 500 small caps. */
.role-pill {
display: inline-block;
margin-left: 8px;
padding: 4px 10px;
border-radius: 12px;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.6px;
text-transform: uppercase;
background: #495B7D;
color: #ffffff;
vertical-align: middle;
position: relative;
top: -2px;
line-height: 1.3;
}
/* Beta context paragraph on the onboarding welcome screen. Subtle
subtext color, centered, capped width so it doesn't span too wide. */
.ob-welcome-beta-note {
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 14px;
color: #6B6878;
margin: 16px auto 24px;
line-height: 1.5;
text-align: center;
max-width: 420px;
}
/* ---- Schools page (v1.22.0 — ported from public/schools.html on SPA conversion) ---- */
.schools-page { max-width: 1100px; margin: 0 auto; padding: 0 20px 80px; }
.schools-hero {
background: linear-gradient(135deg, #7C3AED 0%, #9F67FA 50%, #C084FC 100%);
border-radius: 24px;
padding: 64px 40px;
color: white;
margin: 32px 0 0;
position: relative;
overflow: hidden;
text-align: center;
}
.schools-hero::before {
content: '';
position: absolute;
top: -50px; right: -50px;
width: 300px; height: 300px;
background: rgba(255,255,255,.06);
border-radius: 50%;
}
.schools-hero::after {
content: '';
position: absolute;
bottom: -80px; left: -30px;
width: 200px; height: 200px;
background: rgba(255,255,255,.04);
border-radius: 50%;
}
.schools-hero-content { position: relative; z-index: 1; }
.schools-hero h1 {
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 900;
letter-spacing: -1px;
margin-bottom: 16px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.schools-hero p {
font-size: 1.1rem;
opacity: .9;
max-width: 600px;
margin: 0 auto 28px;
line-height: 1.6;
}
.schools-hero-cta {
display: inline-block;
background: white;
color: var(--primary);
font-size: 1.05rem;
font-weight: 800;
padding: 16px 36px;
border-radius: 12px;
border: none;
cursor: pointer;
font-family: var(--font);
transition: all .15s;
text-decoration: none;
}
.schools-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,.2); }
.schools-section { padding: 64px 0; }
.schools-section-alt {
background: var(--bg);
margin: 0 -20px;
padding: 64px 20px;
}
.schools-section-dark {
background: #0F172A;
margin: 0 -20px;
padding: 64px 20px;
color: white;
}
.schools-section-purple {
background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
margin: 0 -20px;
padding: 64px 20px;
color: white;
}
.schools-section h2,
.schools-section-alt h2,
.schools-section-dark h2,
.schools-section-purple h2 {
font-size: 1.8rem;
font-weight: 900;
text-align: center;
letter-spacing: -0.5px;
margin-bottom: 12px;
}
.schools-section-sub {
text-align: center;
color: var(--text-secondary);
font-size: 1rem;
margin-bottom: 40px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.schools-section-dark .schools-section-sub { color: rgba(255,255,255,.6); }
.schools-section-purple .schools-section-sub { color: rgba(255,255,255,.7); }
.schools-problem-body {
max-width: 680px;
margin: 0 auto;
font-size: 1.02rem;
line-height: 1.8;
color: var(--text-secondary);
text-align: center;
}
.schools-problem-body p { margin-bottom: 16px; }
.schools-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
max-width: 960px;
margin: 0 auto;
}
.schools-column {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 28px 24px;
text-align: center;
}
.schools-column-icon {
display: inline-block;
width: 28px;
height: 4px;
border-radius: 2px;
background: #F59E0B;
margin-bottom: 16px;
}
.schools-column h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 10px; }
.schools-column p { font-size: .88rem; color: var(--text-secondary); line-height: 1.6; }
.schools-section-dark .schools-column {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.1);
}
.schools-section-dark .schools-column h3 { color: white; }
.schools-section-dark .schools-column p { color: rgba(255,255,255,.6); }
.schools-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 20px;
max-width: 960px;
margin: 0 auto;
}
.schools-step {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 28px 24px;
text-align: center;
}
.schools-step-num {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--primary);
color: white;
font-size: 1.1rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.schools-step h3 { font-size: .95rem; font-weight: 800; margin-bottom: 8px; }
.schools-step p { font-size: .85rem; color: var(--text-secondary); line-height: 1.6; }
.schools-pricing-table {
max-width: 640px;
margin: 0 auto;
border-radius: var(--radius);
overflow: hidden;
border: 1.5px solid var(--border);
background: var(--surface);
}
.schools-pricing-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 28px;
border-bottom: 1px solid var(--border);
font-size: .95rem;
}
.schools-pricing-row:last-child { border-bottom: none; }
.schools-pricing-tier { font-weight: 700; color: var(--text); }
.schools-pricing-price { font-weight: 800; color: var(--primary); font-size: 1.05rem; }
.schools-pricing-row-highlight {
background: var(--primary-light);
border-bottom: none;
}
.schools-pricing-row-highlight .schools-pricing-tier {
color: var(--primary-dark);
font-weight: 800;
}
.schools-pricing-row-highlight .schools-pricing-price {
color: var(--primary-dark);
}
.schools-pricing-note {
text-align: center;
font-size: .88rem;
color: var(--text-muted);
margin-top: 20px;
}
.schools-pricing-note-wrap {
max-width: 680px;
margin: 0 auto;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 32px 28px;
text-align: center;
}
.schools-pricing-note-wrap p {
font-size: .98rem;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 0;
}
.schools-benefits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
max-width: 960px;
margin: 0 auto;
}
.schools-benefit {
background: rgba(255,255,255,.08);
border: 1.5px solid rgba(255,255,255,.12);
border-radius: var(--radius);
padding: 28px 24px;
}
.schools-benefit h3 {
font-size: .95rem;
font-weight: 800;
margin-bottom: 8px;
color: white;
}
.schools-benefit p {
font-size: .85rem;
color: rgba(255,255,255,.65);
line-height: 1.6;
}
.schools-form-wrap {
max-width: 600px;
margin: 0 auto;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 36px 32px;
}
.schools-form-row { margin-bottom: 18px; }
.schools-form-row label {
display: block;
font-size: .85rem;
font-weight: 700;
margin-bottom: 6px;
color: var(--text);
}
.schools-form-row input,
.schools-form-row select,
.schools-form-row textarea {
width: 100%;
padding: 12px 14px;
border: 2px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--font);
font-size: .92rem;
color: var(--text);
background: var(--surface);
transition: border-color .15s;
}
.schools-form-row input:focus,
.schools-form-row select:focus,
.schools-form-row textarea:focus {
outline: none;
border-color: var(--primary);
}
.schools-form-row textarea { resize: vertical; min-height: 80px; }
.schools-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.schools-form-submit {
width: 100%;
background: var(--primary);
color: white;
border: none;
padding: 16px;
border-radius: var(--radius-sm);
font-size: 1rem;
font-weight: 800;
font-family: var(--font);
cursor: pointer;
transition: all .15s;
margin-top: 8px;
}
.schools-form-submit:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(124,58,237,.4); }
.schools-form-success {
display: none;
text-align: center;
padding: 40px 20px;
}
.schools-form-success h3 {
font-size: 1.3rem;
font-weight: 900;
margin-bottom: 8px;
color: var(--success);
}
.schools-form-success p {
color: var(--text-secondary);
font-size: .95rem;
}
@media (max-width: 600px) {
.schools-hero { padding: 40px 24px; }
.schools-form-grid { grid-template-columns: 1fr; }
.schools-pricing-row { padding: 14px 18px; flex-wrap: wrap; gap: 4px; }
}
/* ---- Organizations page (v1.22.0 — ported from public/organizations.html) ---- */
.orgs-page { max-width: 1100px; margin: 0 auto; padding: 0 20px 80px; }
.orgs-hero {
background: linear-gradient(135deg, #7C3AED 0%, #9F67FA 50%, #C084FC 100%);
border-radius: 24px;
padding: 64px 40px;
color: white;
margin: 32px 0 0;
position: relative;
overflow: hidden;
text-align: center;
}
.orgs-hero::before {
content: '';
position: absolute;
top: -50px; right: -50px;
width: 300px; height: 300px;
background: rgba(255,255,255,.06);
border-radius: 50%;
}
.orgs-hero::after {
content: '';
position: absolute;
bottom: -80px; left: -30px;
width: 200px; height: 200px;
background: rgba(255,255,255,.04);
border-radius: 50%;
}
.orgs-hero-content { position: relative; z-index: 1; }
.orgs-hero h1 {
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 900;
letter-spacing: -1px;
margin-bottom: 16px;
max-width: 750px;
margin-left: auto;
margin-right: auto;
}
.orgs-hero p {
font-size: 1.1rem;
opacity: .9;
max-width: 640px;
margin: 0 auto 28px;
line-height: 1.6;
}
.orgs-hero-cta {
display: inline-block;
background: white;
color: var(--primary);
font-size: 1.05rem;
font-weight: 800;
padding: 16px 36px;
border-radius: 12px;
border: none;
cursor: pointer;
font-family: var(--font);
transition: all .15s;
text-decoration: none;
}
.orgs-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,.2); }
.orgs-section { padding: 64px 0; }
.orgs-section-alt {
background: var(--bg);
margin: 0 -20px;
padding: 64px 20px;
}
.orgs-section-dark {
background: #0F172A;
margin: 0 -20px;
padding: 64px 20px;
color: white;
}
.orgs-section-purple {
background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
margin: 0 -20px;
padding: 64px 20px;
color: white;
}
.orgs-section h2,
.orgs-section-alt h2,
.orgs-section-dark h2,
.orgs-section-purple h2 {
font-size: 1.8rem;
font-weight: 900;
text-align: center;
letter-spacing: -0.5px;
margin-bottom: 12px;
}
.orgs-section-sub {
text-align: center;
color: var(--text-secondary);
font-size: 1rem;
margin-bottom: 40px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.orgs-section-dark .orgs-section-sub { color: rgba(255,255,255,.6); }
.orgs-section-purple .orgs-section-sub { color: rgba(255,255,255,.7); }
.orgs-types-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
max-width: 960px;
margin: 0 auto;
}
.orgs-type-card {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 22px 20px;
text-align: center;
transition: all .15s;
}
.orgs-type-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.orgs-type-icon { display: none; }
.orgs-type-card h3 { font-size: .9rem; font-weight: 800; color: var(--text); }
.orgs-problem-body {
max-width: 680px;
margin: 0 auto;
font-size: 1.02rem;
line-height: 1.8;
color: var(--text-secondary);
text-align: center;
}
.orgs-problem-body p { margin-bottom: 16px; }
.orgs-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
max-width: 960px;
margin: 0 auto;
}
.orgs-column {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 28px 24px;
text-align: center;
}
.orgs-column-icon { display: inline-block; width: 28px; height: 4px; border-radius: 2px; background: #F59E0B; margin-bottom: 16px; }
.orgs-column h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 10px; }
.orgs-column p { font-size: .88rem; color: var(--text-secondary); line-height: 1.6; }
.orgs-section-dark .orgs-column {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.1);
}
.orgs-section-dark .orgs-column h3 { color: white; }
.orgs-section-dark .orgs-column p { color: rgba(255,255,255,.6); }
.orgs-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 20px;
max-width: 960px;
margin: 0 auto;
}
.orgs-step {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 28px 24px;
text-align: center;
}
.orgs-step-num {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--primary);
color: white;
font-size: 1.1rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.orgs-step h3 { font-size: .95rem; font-weight: 800; margin-bottom: 8px; }
.orgs-step p { font-size: .85rem; color: var(--text-secondary); line-height: 1.6; }
.orgs-pricing-note-wrap {
max-width: 680px;
margin: 0 auto;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 32px 28px;
text-align: center;
}
.orgs-pricing-note-wrap p {
font-size: .98rem;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 0;
}
.orgs-pricing-callout {
max-width: 680px;
margin: 20px auto 0;
background: var(--primary-light);
border: 2px solid var(--primary);
border-radius: var(--radius);
padding: 24px 28px;
text-align: center;
}
.orgs-pricing-callout p {
font-size: .95rem;
font-weight: 600;
color: var(--primary-dark);
line-height: 1.6;
margin: 0;
}
.orgs-benefits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
max-width: 960px;
margin: 0 auto;
}
.orgs-benefit {
background: rgba(255,255,255,.08);
border: 1.5px solid rgba(255,255,255,.12);
border-radius: var(--radius);
padding: 28px 24px;
}
.orgs-benefit h3 {
font-size: .95rem;
font-weight: 800;
margin-bottom: 8px;
color: white;
}
.orgs-benefit p {
font-size: .85rem;
color: rgba(255,255,255,.65);
line-height: 1.6;
}
.orgs-form-wrap {
max-width: 600px;
margin: 0 auto;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 36px 32px;
}
.orgs-form-row { margin-bottom: 18px; }
.orgs-form-row label {
display: block;
font-size: .85rem;
font-weight: 700;
margin-bottom: 6px;
color: var(--text);
}
.orgs-form-row input,
.orgs-form-row select,
.orgs-form-row textarea {
width: 100%;
padding: 12px 14px;
border: 2px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--font);
font-size: .92rem;
color: var(--text);
background: var(--surface);
transition: border-color .15s;
}
.orgs-form-row input:focus,
.orgs-form-row select:focus,
.orgs-form-row textarea:focus {
outline: none;
border-color: var(--primary);
}
.orgs-form-row textarea { resize: vertical; min-height: 80px; }
.orgs-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.orgs-form-toggle { display: flex; gap: 12px; }
.orgs-form-toggle label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .92rem;
font-weight: 600;
cursor: pointer;
padding: 10px 20px;
border: 2px solid var(--border);
border-radius: var(--radius-sm);
transition: all .15s;
}
.orgs-form-toggle input[type="radio"] { display: none; }
.orgs-form-toggle input[type="radio"]:checked + span { color: var(--primary); }
.orgs-form-toggle label:has(input:checked) {
border-color: var(--primary);
background: var(--primary-light);
}
.orgs-form-submit {
width: 100%;
background: var(--primary);
color: white;
border: none;
padding: 16px;
border-radius: var(--radius-sm);
font-size: 1rem;
font-weight: 800;
font-family: var(--font);
cursor: pointer;
transition: all .15s;
margin-top: 8px;
}
.orgs-form-submit:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(124,58,237,.4); }
.orgs-form-success {
display: none;
text-align: center;
padding: 40px 20px;
}
.orgs-form-success h3 {
font-size: 1.3rem;
font-weight: 900;
margin-bottom: 8px;
color: var(--success);
}
.orgs-form-success p {
color: var(--text-secondary);
font-size: .95rem;
line-height: 1.6;
}
.orgs-bottom-cta {
background: var(--primary-light);
margin: 0 -20px;
padding: 48px 20px;
text-align: center;
}
.orgs-bottom-cta p {
font-size: 1.1rem;
font-weight: 700;
color: var(--text);
max-width: 640px;
margin: 0 auto 24px;
line-height: 1.6;
}
.orgs-bottom-cta-btn {
display: inline-block;
background: var(--primary);
color: white;
font-size: 1.05rem;
font-weight: 800;
padding: 16px 36px;
border-radius: 12px;
border: none;
cursor: pointer;
font-family: var(--font);
transition: all .15s;
text-decoration: none;
}
.orgs-bottom-cta-btn:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(124,58,237,.3); }
@media (max-width: 600px) {
.orgs-hero { padding: 40px 24px; }
.orgs-form-grid { grid-template-columns: 1fr; }
.orgs-types-grid { grid-template-columns: 1fr 1fr; }
}
/* ============================================================================
v1.26.0 — MARKETING BRAND REFRESH (Oxford + Warm Amber + Frost Blue)
============================================================================
Scope:
- Global chrome (top nav, footer, BETA pill) — converts everywhere.
- Light-surface wordmark — converts everywhere it appears on white/light bg.
- Marketing-only surfaces: landing, about, parents, schools, organizations.
Out of scope (preserved on Vivoso Purple identity):
- /courses, /pathways, /pathways/*, /certificates, /profile,
all lesson views, takeaway/celebration content, onboarding flow body.
Cascade strategy: this block sits at the file end so its rules override
the per-surface declarations above without editing them in place. Any
future v1.26.0 follow-up can grep "v1.26.0" to locate the entire change.
============================================================================ */
/* === Tokens — already added at :root above (--oxford, --warm-amber, --frost-blue) === */
/* === GLOBAL CHROME — top nav (every page) === */
.app-header {
background: var(--oxford);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* #17: warm-amber .app-header .btn-primary override removed — the .app-header
pill rule above + base already give Amber; hover standardized to #B8741F. */
/* === GLOBAL CHROME — BETA pill (everywhere) === */
.beta-pill,
.beta-pill--on-light,
.beta-pill--xl {
background: var(--warm-amber);
color: #FFFFFF;
}
/* === GLOBAL CHROME — footer (signed-in minimal + signed-out full + landing) === */
.lp-footer {
background: var(--oxford);
}
.lp-footer-brand {
color: rgba(255, 255, 255, 0.7);
}
.lp-footer-link {
color: rgba(255, 255, 255, 0.85);
}
.lp-footer-link:hover {
color: #FFFFFF;
}
.lp-footer-copyright,
.lp-footer .footer-version {
color: rgba(255, 255, 255, 0.5);
}
.app-footer,
.app-footer-pre {
background: var(--oxford);
border-top: none;
color: rgba(255, 255, 255, 0.7);
}
.app-footer-brand,
.app-footer-copyright,
.app-footer .footer-version {
color: rgba(255, 255, 255, 0.5);
}
.app-footer-link {
color: rgba(255, 255, 255, 0.85);
}
.app-footer-link:hover {
color: #FFFFFF;
}
.app-footer-copyright {
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.app-footer-minimal {
background: var(--oxford);
border-top: none;
color: rgba(255, 255, 255, 0.7);
opacity: 1;
}
.app-footer-minimal .app-footer-minimal-copy,
.app-footer-minimal .app-footer-minimal-version {
color: rgba(255, 255, 255, 0.5);
}
.app-footer-minimal-link {
color: rgba(255, 255, 255, 0.85);
}
.app-footer-minimal-link:hover {
color: #FFFFFF;
}
.app-footer-minimal-sep {
color: rgba(255, 255, 255, 0.35);
}
/* === LIGHT-SURFACE WORDMARK — Oxford instead of Vivoso Purple === */
.wordmark--primary-light,
.wordmark--on-surface {
color: var(--oxford);
}
/* === LANDING HERO — Oxford solid + Warm Amber tagline + Frost Blue descriptor === */
.lp-hero {
background: var(--oxford);
}
/* Wordmark on hero — switch from light lavender to true white for editorial feel. */
.lp-hero-brand {
color: #FFFFFF;
}
/* Tagline "The life skills nobody taught you" — Warm Amber on Oxford. */
.lp-hero-h1.tagline.tagline--on-dark,
.lp-hero-h1 {
color: var(--warm-amber);
}
/* Descriptor — DM Sans, Frost Blue, not italic. */
.lp-hero-tagline {
color: var(--frost-blue);
font-family: var(--font-body);
font-style: normal;
opacity: 1;
}
/* Six secondary buttons — barely-visible white tint with Frost Blue text. */
.lp-hero .lp-btn-outline {
background: rgba(255, 255, 255, 0.05);
color: var(--frost-blue);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.lp-hero .lp-btn-outline:hover {
background: rgba(255, 255, 255, 0.10);
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.25);
}
/* === LANDING — "I never learned..." rotating section on Oxford === */
.lp-hero-taught-section {
background: var(--oxford);
color: #FFFFFF;
max-width: 100%;
padding: 64px 24px;
margin: 0;
}
.lp-hero-taught-section .lp-section-title,
.lp-hero-taught-section .lp-section-sub {
color: #FFFFFF;
}
.lp-hero-taught-section .lp-section-sub {
color: rgba(255, 255, 255, 0.7);
}
.lp-hero-taught-card {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.10);
box-shadow: none;
}
/* Statement text white; category color rendered separately on the dot. */
.lp-hero-taught-section .lp-hero-taught-item {
color: #FFFFFF;
}
.lp-hero-taught-section .lp-hero-taught-nav {
background: transparent;
border-color: rgba(255, 255, 255, 0.25);
color: var(--warm-amber);
}
.lp-hero-taught-section .lp-hero-taught-nav:hover {
color: #FFFFFF;
border-color: var(--warm-amber);
}
.lp-hero-taught-list-fallback li {
border-bottom-color: rgba(255, 255, 255, 0.10);
}
/* === LANDING — section headings + step accents on light surfaces === */
.landing .lp-section-title {
font-family: var(--font-display);
color: var(--oxford);
}
/* Don't override headings inside the dark rotating section. */
.landing .lp-hero-taught-section .lp-section-title {
color: #FFFFFF;
}
.landing .lp-step-num {
background: var(--warm-amber);
}
/* #17: warm-amber .lp-pricing-grid .btn-primary override removed — redundant with base Amber. */
.lp-price-features li::before {
color: var(--warm-amber);
}
.lp-price-card .lp-section-title,
.lp-price-card .lp-price-amount,
.lp-price-card .lp-price-badge {
color: var(--oxford);
}
/* === LANDING — final CTA section in Oxford === */
.lp-cta {
background: var(--oxford);
}
/* #17: warm-amber .lp-cta .btn-primary override removed — redundant with base Amber. */
/* === SOFT CALLOUTS + content-transparency on marketing pages === */
.soft-callout {
border-left-color: var(--oxford);
}
.soft-callout a {
color: var(--warm-amber);
}
.content-transparency-heading {
color: var(--oxford);
}
.btn-content-ghost {
color: var(--oxford);
border-color: var(--oxford);
}
.btn-content-ghost:hover {
background: var(--oxford);
color: #FFFFFF;
box-shadow: 0 4px 14px rgba(2, 18, 47, 0.25);
}
/* === ABOUT PAGE === */
.about-hero h1 {
color: var(--oxford);
}
.about-section h2 {
color: var(--oxford);
}
.about-feature h3 {
color: var(--oxford);
}
.about-contact-email {
color: var(--warm-amber);
}
.about-promise-check {
color: var(--warm-amber);
}
.about-compare-us {
background: linear-gradient(135deg, #F4F7FB, #E5ECF5);
border-color: var(--oxford);
}
.about-compare-us .about-compare-label,
.about-compare-us .about-compare-price {
color: var(--oxford);
}
/* === PARENTS PAGE === */
.parents-header h1 {
color: var(--oxford);
}
.parents-section h2 {
color: var(--oxford);
}
.parents-contact-info a {
color: var(--warm-amber);
}
/* #17: warm-amber .parents-page .btn-primary override removed — redundant with base Amber. */
/* === SCHOOLS PAGE — Oxford hero + Warm Amber CTAs === */
.schools-hero {
background: var(--oxford);
}
.schools-hero h1 {
color: #FFFFFF;
}
.schools-hero p {
color: var(--frost-blue);
opacity: 1;
}
.schools-hero-cta {
background: var(--warm-amber);
color: #FFFFFF;
}
.schools-hero-cta:hover {
background: #A6701A;
color: #FFFFFF;
}
.schools-section h2,
.schools-section-alt h2 {
color: var(--oxford);
}
.schools-section-dark {
background: var(--oxford);
}
/* Schools "Built for Schools" section — convert from purple gradient to Oxford. */
.schools-section-purple {
background: var(--oxford);
}
.schools-column-icon {
background: var(--warm-amber);
}
.schools-step-num {
background: var(--warm-amber);
}
.schools-pricing-note-wrap a {
color: var(--warm-amber);
}
.schools-form-submit {
background: var(--warm-amber);
}
.schools-form-submit:hover {
background: #A6701A;
box-shadow: 0 4px 16px rgba(200, 134, 30, 0.35);
}
.schools-form-row a {
color: var(--warm-amber);
}
/* === ORGANIZATIONS PAGE — Oxford hero + Warm Amber CTAs === */
.orgs-hero {
background: var(--oxford);
}
.orgs-hero h1 {
color: #FFFFFF;
}
.orgs-hero p {
color: var(--frost-blue);
opacity: 1;
}
.orgs-hero-cta {
background: var(--warm-amber);
color: #FFFFFF;
}
.orgs-hero-cta:hover {
background: #A6701A;
color: #FFFFFF;
}
.orgs-section h2,
.orgs-section-alt h2 {
color: var(--oxford);
}
.orgs-section-dark {
background: var(--oxford);
}
.orgs-section-purple {
background: var(--oxford);
}
.orgs-column-icon {
background: var(--warm-amber);
}
.orgs-step-num {
background: var(--warm-amber);
}
.orgs-bottom-cta-btn {
background: var(--warm-amber);
}
.orgs-bottom-cta-btn:hover {
background: #A6701A;
box-shadow: 0 4px 20px rgba(200, 134, 30, 0.30);
}
/* #17: warm-amber .orgs-page .btn-primary override removed — redundant with base Amber. */
/* === END v1.26.0 brand refresh ============================================ */
/* ============================================================================
v1.26.1 — BRAND REFRESH CLEANUP
============================================================================
Fixes to v1.26.0:
- Rotating "things nobody taught us" section moves Oxford → light surface
(overrides the v1.26.0 dark treatment above)
- Pricing tab toggle: active pill Teal → Warm Amber
- Pricing card "MOST POPULAR" badge + Annual featured border: Teal → Amber
- Pricing "Coming Soon" disabled buttons: clarified disabled visual state
- Footer proportions corrected for visual balance with top nav
- Bottom landing CTA gets breathing room before the footer
- Marketing-page link sweep: Learning Teal / Vivoso green → Warm Amber on
/our-approach, /editorial-principles, /faq
============================================================================ */
/* === Rotating "I never learned..." section back to LIGHT surface === */
.lp-hero-taught-section {
background: var(--surface);
color: var(--text);
}
.lp-hero-taught-section .lp-section-title {
color: var(--oxford);
}
.lp-hero-taught-section .lp-section-sub {
color: var(--text-secondary);
}
.lp-hero-taught-card {
background: var(--surface);
border: 1.5px solid var(--border);
box-shadow: var(--shadow-md);
}
.lp-hero-taught-section .lp-hero-taught-item {
color: var(--text);
}
.lp-hero-taught-section .lp-hero-taught-nav {
background: rgba(2, 18, 47, 0.06);
border-color: rgba(2, 18, 47, 0.18);
color: var(--oxford);
}
.lp-hero-taught-section .lp-hero-taught-nav:hover {
background: rgba(2, 18, 47, 0.12);
color: var(--oxford);
border-color: var(--oxford);
}
.lp-hero-taught-list-fallback li {
border-bottom-color: var(--border);
}
/* === Pricing tab toggle (How It Works / See What You'll Learn) === */
.pricing-tab.active {
background: var(--warm-amber);
border-color: var(--warm-amber);
color: #FFFFFF;
box-shadow: 0 4px 14px rgba(200, 134, 30, 0.20);
}
.pricing-tab {
color: var(--oxford);
border-color: rgba(2, 18, 47, 0.30);
}
.pricing-tab:hover:not(.active) {
background: rgba(2, 18, 47, 0.04);
border-color: var(--oxford);
color: var(--oxford);
}
/* === Pricing card MOST POPULAR badge + Annual featured border === */
.lp-price-popular {
background: var(--warm-amber);
color: #FFFFFF;
}
.lp-price-featured {
border-color: var(--warm-amber);
box-shadow: 0 0 0 2px var(--warm-amber), var(--shadow-lg);
}
/* === Footer proportions — make footer feel deliberate (~96-120px tall) === */
.lp-footer {
padding: 36px 24px 32px;
}
.lp-footer-inner {
gap: 16px 24px;
flex-wrap: wrap;
}
.lp-footer-copyright {
margin-top: 24px;
padding-top: 20px;
color: rgba(255, 255, 255, 0.60);
font-size: .8rem;
border-top-color: rgba(255, 255, 255, 0.10);
}
.lp-footer .footer-version {
color: rgba(255, 255, 255, 0.40);
font-size: .72rem;
margin-top: 8px;
opacity: 1;
}
.app-footer,
.app-footer-pre {
padding: 36px 20px 32px;
margin-top: 56px;
}
.app-footer-legal-row {
margin-top: 4px;
gap: 24px;
}
.app-footer-copyright {
margin-top: 24px;
padding-top: 20px;
font-size: .8rem;
color: rgba(255, 255, 255, 0.60);
border-top-color: rgba(255, 255, 255, 0.10);
}
.app-footer .footer-version {
color: rgba(255, 255, 255, 0.40);
font-size: .72rem;
margin-top: 8px;
opacity: 1;
}
.app-footer-minimal {
padding: 28px 20px;
margin-top: 56px;
font-size: .78rem;
gap: 10px;
}
.app-footer-minimal-version {
color: rgba(255, 255, 255, 0.40);
}
@media (max-width: 600px) {
.lp-footer {
padding: 28px 18px;
}
.lp-footer-inner {
flex-direction: column;
gap: 10px;
text-align: center;
}
.app-footer,
.app-footer-pre {
padding: 28px 18px;
}
.app-footer-inner {
flex-direction: column;
gap: 10px;
text-align: center;
}
}
/* === Bottom landing CTA — breathing room above the footer === */
.lp-cta {
margin-bottom: 32px;
}
/* === Content pages (/our-approach, /editorial-principles) — link sweep === */
.content-page-link {
color: var(--warm-amber);
}
/* === FAQ — green/teal accents → Warm Amber on a marketing page === */
.faq-section-title {
color: var(--warm-amber);
border-bottom-color: rgba(200, 134, 30, 0.25);
}
.faq-item.open {
border-color: var(--warm-amber);
box-shadow: 0 2px 10px rgba(200, 134, 30, 0.10);
}
.faq-question:focus-visible {
outline-color: var(--warm-amber);
}
.faq-chevron {
color: var(--warm-amber);
background: rgba(200, 134, 30, 0.10);
}
.faq-item.open .faq-chevron {
background: rgba(200, 134, 30, 0.20);
}
/* === END v1.26.1 cleanup ================================================== */
/* ============================================================================
v1.26.2 — Marketing certificate showcase + footer width
============================================================================
- Master Graduate cert (landing showcase only) banner Vivoso Purple → Oxford
- "Vivoso Master Graduate" subtitle below banner → Oxford
- Footer breaks out of the #app max-width container to span the full
viewport, matching the .app-header bar above it
In-app /certificates printable cert (printMasterCert) and the /pathways
pathway cert (printPathwayCert) build self-contained HTML in their own
windows — those keep Vivoso Purple per v1.26.0 scope.
============================================================================ */
/* v1.37.x — Master Graduate showcase band override removed: the v4 preview
redesign dropped the .lp-cert-doc-band element (now a neutral card + Amber
accent, set in the base .lp-cert-* block above). */
/* Footer width breakout — escape the #app { max-width: 1100px; padding: 32px 20px } box.
.app-header sits OUTSIDE #app and naturally fills the viewport; the footers
sit INSIDE #app so they inherited the 1100px constraint. The negative-margin
pattern below extends them to the viewport edges without changing layout flow.
.lp-footer-inner / .app-footer-inner already cap content at max-width 960px,
so the link row stays centered and only the Oxford background bleeds out. */
.lp-footer,
.app-footer,
.app-footer-pre,
.app-footer-minimal {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* === END v1.26.2 ========================================================== */
/* ============================================================================
v1.26.3 — Rotating statement card refinement
============================================================================
After v1.26.1 moved the section to a light surface, the card was carrying
forward sizing and chrome built for the dark variant. This block:
- Tightens the card scale (max 720px wide, 40px vertical / 48px horizontal)
- Reduces statement text from clamp(22.4px,3.2vw,35.2px) bold to
clamp(20px,2.4vw,26px) semibold for editorial weight
- Replaces the category-tinted background+border+shadow with a defined
white card: 1px Vivoso rule border + soft Oxford-tinted shadow
- Removes the orange category dot above each statement (cleaner read)
- Shrinks the navigation arrows to 44x44 and tightens the gap so they
visually anchor to the card with an Oxford outline + fill-on-hover
============================================================================ */
.lp-hero-taught-rotator {
gap: 8px;
max-width: 820px;
margin: 28px auto 0;
}
.lp-hero-taught-card {
flex: 1;
max-width: 720px;
padding: 40px 48px;
border-radius: 16px;
background: #FFFFFF;
border: 1px solid var(--border);
box-shadow: 0 4px 12px rgba(2, 18, 47, 0.06);
transition: none;
}
.lp-hero-taught-stage {
min-height: 140px;
}
.lp-hero-taught-section .lp-hero-taught-item {
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 600;
line-height: 1.45;
color: var(--text);
font-family: var(--font-body);
gap: 0;
padding: 0;
letter-spacing: -0.005em;
}
/* Drop the category dot — statement text alone reads more cleanly. */
.lp-hero-taught-dot {
display: none;
}
/* Nav arrows tighten to the card with an Oxford outline + fill-on-hover. */
.lp-hero-taught-section .lp-hero-taught-nav {
width: 44px;
height: 44px;
background: #FFFFFF;
border: 1px solid var(--oxford);
color: var(--oxford);
font-size: 22px;
font-weight: 700;
box-shadow: 0 2px 8px rgba(2, 18, 47, 0.08);
}
.lp-hero-taught-section .lp-hero-taught-nav:hover {
background: var(--oxford);
color: #FFFFFF;
border-color: var(--oxford);
}
@media (max-width: 600px) {
.lp-hero-taught-rotator { gap: 6px; }
.lp-hero-taught-card {
padding: 32px 32px;
max-width: none;
}
.lp-hero-taught-stage { min-height: 160px; }
.lp-hero-taught-section .lp-hero-taught-item { font-size: 18px; }
/* Re-assert the 44x44 tap target — the original 540px breakpoint above
shrinks .lp-hero-taught-nav to 40x40, which is below WCAG minimum. */
.lp-hero-taught-section .lp-hero-taught-nav {
width: 44px;
height: 44px;
font-size: 22px;
}
}
/* === END v1.26.3 ========================================================== */
/* ============================================================================
v1.27.0 — /courses page header
============================================================================
The signed-in catalog page. Header is title +
subtitle + a single horizontal toolbar row containing filter tabs (left)
and completion-stat navigation pills (right). Mobile stacks the two
groups vertically and lets each scroll horizontally if needed.
Filter behavior is CSS-driven via [data-filter] on the grid wrapper.
============================================================================ */
.courses-page-header {
margin: 0 0 28px;
}
.courses-page-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
color: var(--oxford);
letter-spacing: -0.5px;
line-height: 1.15;
margin: 0 0 8px;
}
.courses-page-sub {
font-family: var(--font-body);
font-size: .95rem;
color: var(--text-secondary);
margin: 0 0 20px;
line-height: 1.5;
}
.courses-page-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.courses-page-filters,
.courses-page-stats {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.courses-page-stats { justify-content: flex-end; }
/* Filter tabs — pill shape, Oxford text on white, active is filled Oxford. */
.courses-page-filter-tab {
background: #FFFFFF;
color: var(--oxford);
border: 1px solid rgba(2, 18, 47, 0.20);
border-radius: var(--radius-pill);
padding: 8px 16px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.courses-page-filter-tab:hover {
background: rgba(2, 18, 47, 0.04);
border-color: var(--oxford);
}
.courses-page-filter-tab.active {
background: var(--oxford);
color: #FFFFFF;
border-color: var(--oxford);
}
.courses-page-filter-tab:focus-visible {
outline: 2px solid var(--warm-amber);
outline-offset: 2px;
}
/* Completion stat pills — same pill shape, Frost Blue tint border so they
read as related but distinct from the filter tabs (and never appear
"active" — they're navigation shortcuts, not selectable states). */
.courses-stat-pill {
background: #FFFFFF;
color: var(--oxford);
border: 1px solid rgba(139, 163, 197, 0.30);
border-radius: var(--radius-pill);
padding: 8px 16px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.courses-stat-pill:hover {
background: rgba(139, 163, 197, 0.10);
border-color: rgba(139, 163, 197, 0.50);
}
.courses-stat-pill:focus-visible {
outline: 2px solid var(--warm-amber);
outline-offset: 2px;
}
/* Filter behavior: hide non-matching .courses-group children. */
#courses-page-grid[data-filter="foundation"] .courses-group:not([data-group="foundation"]) { display: none; }
#courses-page-grid[data-filter="elective"] .courses-group:not([data-group="elective"]) { display: none; }
#courses-page-grid[data-filter="limited-time"] .courses-group:not([data-group="limited-time"]) { display: none; }
/* Section headers inside .courses-group keep the existing .section-header
chrome — only the wrapping element is new. */
@media (max-width: 720px) {
.courses-page-toolbar {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
/* v1.29.1 — Wrap to a second row instead of horizontal-scrolling so the
last tab ("Limited Time") shows its full label at 320-430px viewports. */
.courses-page-filters,
.courses-page-stats {
flex-wrap: wrap;
justify-content: flex-start;
row-gap: 8px;
}
.courses-page-filter-tab,
.courses-stat-pill {
min-height: 44px;
padding: 10px 16px;
}
}
/* === END v1.27.0 ========================================================== */
/* ============================================================================
v1.27.1 — Sticky footer when content is shorter than the viewport
============================================================================
Make #app a flex column with min-height filling the area below the sticky
64px top nav. The footer gets margin-top: auto so it pushes to the
viewport bottom on short pages and sits naturally after content on long
pages. On mobile when the fixed bottom-nav is visible (signed-in),
subtract another 72px so the footer doesn't slide behind the nav.
Two footer-host arrangements exist:
- In-app screens via wrap(): footer is a direct child of #app.
- Landing:
wraps everything including .lp-footer,
so .landing also becomes a flex column to host the same pattern.
Layers cleanly on top of v1.26.2's footer full-bleed treatment — the
negative horizontal margin (calc(50% - 50vw)) is independent of flex
item sizing and continues to extend the footer to viewport edges.
============================================================================ */
#app {
display: flex;
flex-direction: column;
min-height: calc(100vh - 64px);
}
#app > .app-footer,
#app > .app-footer-pre,
#app > .app-footer-minimal {
margin-top: auto;
}
.landing {
display: flex;
flex-direction: column;
flex: 1 0 auto;
}
.landing > .lp-footer {
margin-top: auto;
}
@media (max-width: 767px) {
body.signed-in #app {
min-height: calc(100vh - 64px - 72px);
}
}
/* === END v1.27.1 ========================================================== */
/* ============================================================================
v1.27.3 — Compact horizontal "Your Progress" pill row
============================================================================
Replaces the v1.27.2 vertical stats board (which created dead space next
to the title block). Sits to the right of the filter tabs in the
/courses toolbar — same row, looks like a sibling of the tabs since
both share the pill shape. The Warm Amber border alone signals purpose
so no explicit "Your Progress" header label is needed.
/pathways and /certificates no longer carry a progress element; their
page headers simplify to a plain title + subtitle block (h1/p chrome
below). The .pathways-hero / .certs-hero dark gradient blocks introduced
pre-v1.27.2 are gone for good.
============================================================================ */
/* Simplified page headers for /pathways and /certificates (no right column). */
.pathways-page-header,
.certs-page-header {
margin-bottom: 28px;
}
.pathways-page-header > h1,
.certs-page-header > h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
color: var(--oxford);
letter-spacing: -0.5px;
line-height: 1.15;
margin: 0 0 8px;
}
.pathways-page-header > p,
.certs-page-header > p {
font-family: var(--font-body);
font-size: .95rem;
color: var(--text-secondary);
margin: 0;
line-height: 1.5;
max-width: 620px;
}
/* v1.28.7 — "How Certificates Work" plain-prose paragraph that replaced
the .certs-explainer Moonlight+Amber callout. Sits under the page sub. */
.certs-page-explainer {
font-family: var(--font-body);
font-size: .92rem;
color: var(--steel);
line-height: 1.55;
margin: 14px 0 0;
max-width: 720px;
}
/* Horizontal stats pill — sits in .courses-page-toolbar to the right of
the filter tabs. The .courses-page-toolbar inherited from v1.27.0
already uses justify-content: space-between with flex-wrap, so the pill
naturally lands at the right edge and wraps below the filters at narrow
widths. */
.progress-pill-row {
display: inline-flex;
align-items: center;
background: #FFFFFF;
border: 1px solid var(--warm-amber);
border-radius: var(--radius-pill);
padding: 8px 18px;
font-family: var(--font-body);
font-size: 13px;
line-height: 1;
flex-wrap: nowrap;
}
.progress-pill-row-stat {
display: inline-flex;
align-items: center;
gap: 4px;
background: transparent;
border: none;
padding: 0;
font-family: var(--font-body);
font-size: 13px;
cursor: pointer;
text-decoration: none;
color: var(--oxford);
white-space: nowrap;
}
.progress-pill-row-stat:focus-visible {
outline: 2px solid var(--warm-amber);
outline-offset: 4px;
border-radius: 4px;
}
.progress-pill-row-label {
font-weight: 500;
color: var(--oxford);
opacity: 0.75;
transition: color .15s ease, opacity .15s ease, text-decoration-color .15s ease;
}
.progress-pill-row-value {
font-weight: 600;
color: var(--oxford);
transition: color .15s ease;
}
.progress-pill-row-stat:hover .progress-pill-row-label,
.progress-pill-row-stat:hover .progress-pill-row-value {
color: var(--warm-amber);
opacity: 1;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.progress-pill-row-sep {
color: var(--warm-amber);
opacity: 0.50;
margin: 0 12px;
font-weight: 400;
user-select: none;
}
@media (max-width: 600px) {
.progress-pill-row {
padding: 8px 14px;
font-size: 12px;
}
.progress-pill-row-stat { font-size: 12px; }
.progress-pill-row-sep { margin: 0 8px; }
}
/* === END v1.27.3 ========================================================== */
/* ============================================================================
v1.27.4 — Stats box header, rotating card border, landing footer width
============================================================================
1) "Your Progress" label sits above the stats box. Toolbar uses
align-items: flex-end so the box bottom aligns with the filter tab
bottom; the label hangs above the filter tabs (toolbar height grows).
2) Landing rotating "things nobody taught us" card swaps its 1px
var(--border) for var(--warm-amber); nav arrows match.
3) Landing footer width — root cause was .landing { overflow-x: hidden }
clipping the negative-margin breakout. Fixed by moving