Lead-in italic prose...
emoji icons unchanged.
============================================================ */
.adv-tip-mascot {
flex-shrink: 0;
width: 72px;
height: auto;
display: block;
align-self: center;
pointer-events: none;
user-select: none;
}
/* Center adv-tip callout flex children vertically so mascot lines up with text body */
.adv-callout.adv-tip {
align-items: center;
}
@media (max-width: 640px) {
.adv-tip-mascot {
width: 56px;
}
}
/* ============================================================
S. WORKSHEET SCENE SLOT — for Pattern A scenario prompts
.ws-scene wraps the prompt text and (optionally) an illustration.
Image source: 1600x1200 webp at /grammar-course/worksheet-images/m{NN}-scene.webp
When no image: just the prose prompt renders.
When image is added:
![]()
renders above prose at ~360px on screen, ~85mm on print.
============================================================ */
.ws-scene {
margin: 3mm 0;
text-align: center;
}
.ws-scene > p {
text-align: left;
}
.ws-scene-img {
display: block;
margin: 0 auto 3mm;
max-width: 360px;
width: 100%;
height: auto;
border-radius: 4px;
}
@media print {
.ws-scene-img {
max-width: 85mm;
page-break-inside: avoid;
}
}
/* ============================================================
T. MOD-INTRO with Crumbs
Opt-in flex layout — base .mod-intro is unchanged.
Use .mod-intro-with-crumbs when including a Crumbs image.
Crumbs sits left at 60px, prose flows on the right.
============================================================ */
.mod-intro-with-crumbs {
display: flex;
align-items: center;
gap: 22px;
}
.mod-intro-with-crumbs > img.crumbs {
flex-shrink: 0;
width: 92px;
height: auto;
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.10));
transition: transform 0.3s ease;
}
.mod-intro-with-crumbs:hover > img.crumbs {
transform: translateY(-2px) rotate(-2deg);
}
.mod-intro-with-crumbs > p {
flex: 1;
min-width: 0;
}
@media (max-width: 640px) {
.mod-intro-with-crumbs {
gap: 16px;
flex-direction: row;
}
.mod-intro-with-crumbs > img.crumbs {
width: 64px;
}
}
@media (max-width: 480px) {
.mod-intro-with-crumbs > img.crumbs {
width: 56px;
}
}
/* ============================================================
U. EXCEPTION CARD VISUAL HELPERS
Small utility classes that make exception cards more scannable
without turning them into walls of text. Two patterns:
- .adv-mini-table: 3-column reference table inside an exception
- .adv-pair-grid: side-by-side comparison (singular vs plural, etc.)
============================================================ */
.adv-mini-table {
width: 100%;
border-collapse: collapse;
font-family: var(--mono);
font-size: 0.86rem;
margin-top: 4px;
}
.adv-mini-table th {
text-align: left;
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.02em;
color: var(--text-light);
padding: 6px 10px 4px;
border-bottom: 1px solid var(--border);
}
.adv-mini-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--border);
color: var(--text-mid);
vertical-align: top;
}
.adv-mini-table tbody tr:last-child td {
border-bottom: none;
}
.adv-mini-table td:nth-child(2) {
white-space: nowrap;
}
.adv-pair-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 4px;
}
@media (max-width: 560px) {
.adv-pair-grid { grid-template-columns: 1fr; }
}
.adv-pair-item {
background: rgba(255, 255, 255, 0.6);
border-radius: 8px;
padding: 10px 12px;
}
.adv-pair-label {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 0.74rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--teal-dark);
margin-bottom: 4px;
}
.adv-pair-list {
font-family: var(--mono);
font-size: 0.84rem;
color: var(--text);
margin-bottom: 6px;
}
.adv-pair-example {
font-size: 0.82rem;
color: var(--text-mid);
line-height: 1.5;
font-style: italic;
}
/* ============================================================
V. ALIGNMENT OVERRIDES + RULE CARDS + CROSS-SELL
- Center-align Crumbs in summary band (Remember + linkage)
- .adv-rule-cards: side-by-side cards for binary rules (e.g. singular/plural)
- .adv-cross-sell: quiet typographic side-note for upsells/cross-links
============================================================ */
/* Center mascot vertically in Remember band */
.adv-summary .crumbs-row {
align-items: center;
}
/* RULE CARDS — two side-by-side cards for binary rules (singular vs plural,
countable vs uncountable, etc). Same pattern as spelling course's plural
rule cards. Each card is self-contained with: tag, trigger, result, examples.
An optional internal divider lets a single card carry a secondary case
(e.g. "do/does" inside the singular card). */
.adv-rule-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: 18px 0;
}
@media (max-width: 560px) {
.adv-rule-cards {
grid-template-columns: 1fr;
}
}
.adv-rule-card {
background: white;
border: 1px solid var(--border);
border-left: 3px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
/* Color variants — neutral names so cards can be reused for any binary rule.
M8 (singular/plural): singular = teal, plural = gold.
M10 (a/an / the): a/an = teal, the = gold.
Future modules can pick their own mapping. */
.adv-rule-card-teal {
border-left-color: var(--teal);
background: linear-gradient(180deg, var(--teal-pale) 0%, white 28%);
}
.adv-rule-card-gold {
border-left-color: var(--gold);
background: linear-gradient(180deg, #FFFBEB 0%, white 28%);
}
.adv-rule-card-coral {
border-left-color: var(--coral);
background: linear-gradient(180deg, #FFF5F1 0%, white 28%);
}
/* 3-column variant for modules with three parallel rule types
(e.g. in/on/at time prepositions). Stacks at <720px. */
.adv-rule-cards-3 {
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 720px) {
.adv-rule-cards-3 {
grid-template-columns: 1fr;
}
}
/* 4-card variant for modules with four parallel rule types
(e.g. comma's four jobs, four conditional forms). Renders as
2x2 on desktop, 2 columns on tablet, 1 column on phone. */
.adv-rule-cards-4 {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 560px) {
.adv-rule-cards-4 {
grid-template-columns: 1fr;
}
}
/* ════════════════════════════════════════════════════════════════
STACK variant — BAD → ↓ → GOOD contrast rule cards (mock-inspired).
Layout flows top→bottom inside each card:
[tag pill]
RULE TITLE (Fredoka, hero)
[BEFORE card — coral, monospace bad sentence]
↓ (divider repurposed as arrow)
[AFTER card — teal, monospace good sentence with bolded fixes]
CHIN: 💡 memory trick (italic Lora)
Uses :has()/:not(:has()) to discriminate the title result from the
trick result, since :first-of-type is element-based.
════════════════════════════════════════════════════════════════ */
.adv-rule-cards-stack {
grid-template-columns: 1fr;
gap: 28px;
}
.adv-rule-cards-stack .adv-rule-card {
display: block;
padding: 28px 28px 0;
border-radius: 22px;
border: 1px solid rgba(0,0,0,0.06);
border-left-width: 5px;
background: white;
box-shadow: 0 8px 28px rgba(0,0,0,0.04);
overflow: hidden;
}
/* Per-variant accents — used by the rule pill and chin */
.adv-rule-cards-stack .adv-rule-card-teal {
--card-accent: var(--teal);
--card-accent-dark: var(--teal-dark);
--card-soft: rgba(60,173,165,0.12);
--card-chin-bg: rgba(60,173,165,0.10);
}
.adv-rule-cards-stack .adv-rule-card-gold {
--card-accent: var(--gold);
--card-accent-dark: var(--gold-dark, #B8862B);
--card-soft: rgba(212,165,55,0.16);
--card-chin-bg: rgba(212,165,55,0.12);
}
.adv-rule-cards-stack .adv-rule-card-coral {
--card-accent: var(--coral);
--card-accent-dark: var(--coral-dark, #C25738);
--card-soft: rgba(232,128,107,0.14);
--card-chin-bg: rgba(232,128,107,0.10);
}
/* TAG — small inline pill (NOT a banner) */
.adv-rule-cards-stack .adv-rule-card-tag {
display: inline-flex;
align-items: center;
background: var(--card-soft);
color: var(--card-accent-dark);
padding: 7px 14px;
border-radius: 999px;
font-family: 'Fredoka', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 18px;
}
/* RULE TITLE — the hero. Fredoka, friendly and prominent. */
.adv-rule-cards-stack .adv-rule-card-result:not(:has(.adv-rule-card-pill)) {
font-family: 'Fredoka', sans-serif;
font-weight: 500;
font-size: 1.4rem;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--text);
margin: 0 0 22px;
padding: 0;
background: none;
}
/* BEFORE block — bad sentence in coral-soft, mono */
.adv-rule-cards-stack .adv-rule-card-trigger {
background: #FFF1ED;
border-radius: 14px;
padding: 16px 20px;
margin: 0;
font-family: 'JetBrains Mono', 'Menlo', monospace;
font-style: normal;
font-size: 0.95rem;
line-height: 1.7;
color: #A54232;
position: relative;
}
.adv-rule-cards-stack .adv-rule-card-trigger::before {
content: 'BEFORE';
display: block;
font-family: 'Fredoka', sans-serif;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.14em;
color: #A54232;
opacity: 0.65;
margin-bottom: 6px;
}
/* DIVIDER — repurposed as the BAD→GOOD arrow */
.adv-rule-cards-stack .adv-rule-card-divider {
display: block;
height: 36px;
background: none;
position: relative;
margin: 0;
}
.adv-rule-cards-stack .adv-rule-card-divider::before {
content: '↓';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: 'Fredoka', sans-serif;
font-size: 1.3rem;
font-weight: 500;
color: var(--text-mid);
background: white;
width: 32px;
height: 32px;
line-height: 30px;
text-align: center;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
/* AFTER block — good sentence in teal-soft, mono. Bolded fixes
highlight inserted commas. */
.adv-rule-cards-stack .adv-rule-card-examples {
background: #EAF8F6;
border-radius: 14px;
padding: 16px 20px;
margin: 0 0 24px;
font-family: 'JetBrains Mono', 'Menlo', monospace;
font-style: normal;
font-size: 0.95rem;
line-height: 1.7;
color: #156F69;
position: relative;
}
.adv-rule-cards-stack .adv-rule-card-examples::before {
content: 'AFTER';
display: block;
font-family: 'Fredoka', sans-serif;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.14em;
color: #156F69;
opacity: 0.65;
margin-bottom: 6px;
}
.adv-rule-cards-stack .adv-rule-card-examples strong {
background: rgba(60,173,165,0.22);
color: #0E5853;
font-weight: 700;
padding: 0 4px;
border-radius: 4px;
}
/* CHIN — full-bleed footer with the memory trick.
Negative margin breaks out of card's horizontal padding. */
.adv-rule-cards-stack .adv-rule-card-result:has(.adv-rule-card-pill) {
margin: 0 -28px;
padding: 14px 28px 14px 56px;
background: var(--card-chin-bg);
border-top: 1px solid var(--card-accent);
font-family: 'Lora', serif;
font-style: italic;
font-size: 0.95rem;
line-height: 1.5;
color: var(--text);
position: relative;
}
.adv-rule-cards-stack .adv-rule-card-result:has(.adv-rule-card-pill)::before {
content: '💡';
position: absolute;
left: 26px;
top: 14px;
font-style: normal;
font-size: 1.05rem;
line-height: 1.5;
}
/* Hide the inline "trick" pill — chin already labels itself */
.adv-rule-cards-stack .adv-rule-card-pill { display: none; }
/* Mobile fallback (<640px) */
@media (max-width: 640px) {
.adv-rule-cards-stack .adv-rule-card {
padding: 22px 20px 0;
border-radius: 18px;
}
.adv-rule-cards-stack .adv-rule-card-result:not(:has(.adv-rule-card-pill)) {
font-size: 1.2rem;
margin-bottom: 18px;
}
.adv-rule-cards-stack .adv-rule-card-trigger,
.adv-rule-cards-stack .adv-rule-card-examples {
padding: 14px 16px;
font-size: 0.9rem;
}
.adv-rule-cards-stack .adv-rule-card-result:has(.adv-rule-card-pill) {
margin: 0 -20px;
padding: 12px 20px 12px 46px;
}
.adv-rule-cards-stack .adv-rule-card-result:has(.adv-rule-card-pill)::before {
left: 18px;
}
}
.adv-rule-card-tag {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 2px;
}
.adv-rule-card-teal .adv-rule-card-tag { color: var(--teal-dark); }
.adv-rule-card-gold .adv-rule-card-tag { color: var(--gold-dark, #B8862B); }
.adv-rule-card-coral .adv-rule-card-tag { color: var(--coral-dark, #C25738); }
.adv-rule-card-trigger {
font-family: 'Lora', serif;
font-style: italic;
font-size: 0.86rem;
color: var(--text-mid);
margin-bottom: 6px;
line-height: 1.9;
}
.adv-rule-card-result {
font-family: 'Lora', serif;
font-size: 0.95rem;
line-height: 1.5;
color: var(--text);
}
.adv-rule-card-result strong {
font-weight: 700;
}
.adv-rule-card-examples {
font-family: var(--mono);
font-size: 0.84rem;
color: var(--text-mid);
line-height: 1.55;
margin-bottom: 4px;
}
.adv-rule-card-examples strong {
color: var(--text);
font-weight: 700;
}
.adv-rule-card-divider {
height: 1px;
background: var(--border);
margin: 8px 0 4px 0;
}
/* PILLS — for trigger words/articles inside rule cards.
Used to highlight the actual tokens a student should recognize as triggers
(he/she/it for M8, a/an/the for M10, etc.). Pills inherit color from the
parent card so they group visually with their case.
Mono font signals "this is a language token, not narrative text." */
.adv-rule-card-pill {
display: inline-block;
font-family: var(--mono);
font-size: 0.86rem;
font-weight: 700;
padding: 1px 9px;
border-radius: 12px;
margin: 0 2px;
vertical-align: baseline;
line-height: 1.5;
}
.adv-rule-card-teal .adv-rule-card-pill {
background: var(--teal-pale);
color: var(--teal-dark);
border: 1px solid rgba(60, 173, 165, 0.3);
}
.adv-rule-card-gold .adv-rule-card-pill {
background: #FFFBEB;
color: var(--gold-dark, #B8862B);
border: 1px solid rgba(212, 165, 55, 0.35);
}
.adv-rule-card-coral .adv-rule-card-pill {
background: #FFF5F1;
color: var(--coral-dark, #C25738);
border: 1px solid rgba(232, 128, 107, 0.35);
}
/* PILLS for trigger words inside rule cards.
Highlights the actual tokens a student should recognize as triggers
(he/she/it for singular, a/an/the for articles, etc).
Color-tied to the parent card's accent for visual grouping. */
.adv-rule-card-pill {
display: inline-block;
font-family: var(--mono);
font-size: 0.86rem;
font-weight: 700;
padding: 1px 9px;
border-radius: 12px;
margin: 0 1px;
vertical-align: baseline;
line-height: 1.5;
}
.adv-rule-card-teal .adv-rule-card-pill {
background: var(--teal-pale);
color: var(--teal-dark);
border: 1px solid rgba(60, 173, 165, 0.25);
}
.adv-rule-card-gold .adv-rule-card-pill {
background: #FFFBEB;
color: var(--gold-dark, #B8862B);
border: 1px solid rgba(212, 165, 55, 0.3);
}
/* CROSS-SELL — quiet typographic side-note */
.adv-cross-sell {
font-family: 'Lora', serif;
font-size: 0.88rem;
line-height: 1.6;
color: var(--text-mid);
font-style: italic;
margin: 18px 0 0 0;
padding: 0 0 0 14px;
border-left: 2px solid var(--border);
background: none;
border-radius: 0;
}
.adv-cross-sell strong {
color: var(--text);
font-weight: 600;
font-style: normal;
}
.adv-cross-sell em {
font-style: italic;
}
.adv-cross-sell-link {
color: var(--teal-dark);
text-decoration: underline;
text-decoration-color: rgba(60, 173, 165, 0.4);
text-underline-offset: 2px;
font-weight: 500;
font-style: normal;
transition: text-decoration-color 0.15s ease;
}
.adv-cross-sell-link:hover {
text-decoration-color: var(--teal-dark);
}
@media print {
.adv-cross-sell {
color: #555;
border-left-color: #ccc;
}
.adv-cross-sell-link {
color: #000;
}
}
/* ============================================================
W. WORKSHEET WATERMARK
Single large centered logo behind text on .ws-printable.ws-watermarked.
Only renders in print context (worksheets are hidden on screen by default).
The class is opt-in per worksheet — add ws-watermarked to enable.
Currently applied to M8 worksheets only.
============================================================ */
@media print {
.ws-printable.ws-watermarked.printing,
.ws-printable.ws-watermarked {
position: relative;
}
.ws-printable.ws-watermarked .ws-page {
position: relative;
z-index: 1;
}
.ws-printable.ws-watermarked .ws-page::before {
content: '';
position: fixed;
top: 50%;
left: 50%;
width: 140mm;
height: 140mm;
transform: translate(-50%, -50%) rotate(-22deg);
background-image: url('/grammar-course/images/rc-grammar-logo.webp');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.06;
pointer-events: none;
z-index: -1;
/* Ensure watermark prints in colour-adjusted browsers */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
/* ════════════════════════════════════════════════════════════════
UNIT COVER SCREENS — full-page intros between modules.
Each unit (e.g. "Tense & Time", "The Small Words") has a cover
screen reached from the sidebar (unit name click) or home cards.
Default hidden; goToUnit(slug) toggles .active.
════════════════════════════════════════════════════════════════ */
.unit-cover-screen {
display: none;
max-width: 880px;
margin: 0 auto;
padding: 24px 20px 80px;
}
.unit-cover-screen.active { display: block; }
.uc-hero {
display: flex;
align-items: center;
gap: 24px;
background: linear-gradient(135deg, #F0FAFA 0%, #FFF 100%);
border: 1px solid var(--border, #E4E8EC);
border-left: 5px solid var(--teal);
border-radius: 22px;
padding: 28px 32px;
margin-bottom: 28px;
box-shadow: 0 6px 24px rgba(0,0,0,0.04);
}
.uc-hero-mascot {
flex: 0 0 auto;
width: 96px;
height: 96px;
object-fit: contain;
}
.uc-hero-text { flex: 1; min-width: 0; }
.uc-hero-eyebrow {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal-dark);
margin-bottom: 6px;
}
.uc-hero-title {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: clamp(1.6rem, 3.4vw, 2.2rem);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--text);
margin: 0 0 8px;
}
.uc-hero-promise {
font-family: 'Lora', serif;
font-size: 1.02rem;
line-height: 1.5;
color: var(--text-mid);
margin: 0;
}
/* Section label inside unit covers */
.uc-section { margin-bottom: 28px; }
.uc-section-label {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-light);
margin-bottom: 10px;
}
.uc-section-title {
font-family: 'Fredoka', sans-serif;
font-weight: 600;
font-size: 1.35rem;
line-height: 1.25;
color: var(--text);
margin: 0 0 14px;
}
/* Unit cover module list — small strip of upcoming modules */
.uc-module-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
.uc-mod-card {
background: white;
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
text-align: left;
cursor: pointer;
transition: all 0.18s ease;
font-family: inherit;
}
.uc-mod-card:hover {
border-color: var(--teal);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.uc-mod-num {
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: 9px;
background: var(--teal-pale);
color: var(--teal-dark);
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 0.95rem;
display: flex;
align-items: center;
justify-content: center;
}
.uc-mod-text { flex: 1; min-width: 0; }
.uc-mod-title {
font-weight: 600;
font-size: 0.92rem;
color: var(--text);
margin-bottom: 2px;
line-height: 1.3;
}
.uc-mod-meta {
font-size: 0.78rem;
color: var(--text-light);
}
/* Begin-unit CTA button */
.uc-begin-row {
margin-top: 28px;
display: flex;
justify-content: center;
}
.uc-begin-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: var(--teal);
color: white;
border: none;
border-radius: 999px;
font-family: 'Fredoka', sans-serif;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.18s ease;
box-shadow: 0 6px 20px rgba(60,173,165,0.30);
}
.uc-begin-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(60,173,165,0.40);
background: var(--teal-dark);
}
@media (max-width: 640px) {
.unit-cover-screen { padding: 16px 14px 60px; }
.uc-hero { padding: 20px 18px; gap: 14px; flex-direction: column; align-items: flex-start; }
.uc-hero-mascot { width: 72px; height: 72px; }
.uc-mod-card { padding: 12px 14px; }
}
/* ════════════════════════════════════════════════════════════════
BEFORE-AFTER-SLIDER TOOL — sits inside unit covers as the hero.
Two layered panes (BEFORE coral, AFTER teal). A draggable seam
reveals AFTER from right→left as the child drags. Tap-to-reveal
button fades the seam open for touch users.
════════════════════════════════════════════════════════════════ */
.bas-wrap { font-family: 'Lora', Georgia, serif; }
.bas-stage {
position: relative;
display: grid;
grid-template-columns: 1fr; /* explicit single column so children stretch */
grid-template-rows: auto;
border-radius: 18px;
overflow: hidden;
background: white;
border: 1px solid var(--border);
box-shadow: 0 6px 24px rgba(0,0,0,0.05);
user-select: none;
min-height: 120px; /* fallback if both panes are tiny */
}
.bas-pane {
grid-column: 1 / 2; /* both panes occupy the same column */
grid-row: 1 / 2; /* and the same row → they overlap */
width: 100%;
padding: 28px 28px 28px 32px;
font-size: 1.05rem;
line-height: 1.7;
box-sizing: border-box;
}
.bas-pane-after {
background: linear-gradient(135deg, #EAF8F6 0%, #F8FFFE 100%);
color: #156F69;
clip-path: inset(0% 0% 0% 100%); /* hidden initially (right of seam at 100%) */
}
.bas-pane-before {
background: linear-gradient(135deg, #FFF1ED 0%, #FFFAF8 100%);
color: #A54232;
clip-path: inset(0% 0% 0% 0%); /* fully visible initially */
}
.bas-pane-label {
display: inline-block;
font-family: 'Fredoka', sans-serif;
font-weight: 800;
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 999px;
margin-bottom: 10px;
}
.bas-pane-before .bas-pane-label { background: rgba(232,128,107,0.22); color: #A54232; }
.bas-pane-after .bas-pane-label { background: rgba(60,173,165,0.20); color: #156F69; }
.bas-pane-text { font-style: italic; }
/* The draggable seam — vertical line + handle */
.bas-seam {
position: absolute;
top: 0; bottom: 0;
left: 100%;
width: 0;
pointer-events: none;
z-index: 5;
}
.bas-seam::before {
content: '';
position: absolute;
top: 0; bottom: 0;
left: -1px;
width: 2px;
background: linear-gradient(to bottom, var(--coral) 0%, var(--coral-dark, #C25738) 100%);
}
.bas-seam-handle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: white;
border: 2px solid var(--coral-dark, #C25738);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Fredoka', sans-serif;
font-weight: 700;
color: var(--coral-dark, #C25738);
font-size: 1.1rem;
cursor: ew-resize;
pointer-events: auto;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
touch-action: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bas-seam-handle:hover {
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 6px 18px rgba(0,0,0,0.16);
}
.bas-seam-handle:active {
transform: translate(-50%, -50%) scale(0.98);
}
.bas-controls {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 16px;
}
.bas-btn {
padding: 9px 18px;
border-radius: 999px;
border: 1.5px solid var(--teal);
background: white;
color: var(--teal-dark);
font-family: 'Fredoka', sans-serif;
font-weight: 600;
font-size: 0.88rem;
cursor: pointer;
transition: all 0.15s ease;
}
.bas-btn:hover { background: var(--teal-pale); }
.bas-btn-reveal {
background: var(--teal);
color: white;
border-color: var(--teal);
position: relative;
animation: bas-pulse 2.2s ease-in-out infinite;
box-shadow: 0 4px 14px rgba(60,173,165,0.35);
}
.bas-btn-reveal:hover {
background: var(--teal-dark);
border-color: var(--teal-dark);
transform: translateY(-1px);
}
/* Once the user has tapped (or dragged the seam past the threshold), stop the pulse */
.bas-btn-quiet { animation: none !important; }
@keyframes bas-pulse {
0%, 100% { box-shadow: 0 4px 14px rgba(60,173,165,0.35), 0 0 0 0 rgba(60,173,165,0.45); }
50% { box-shadow: 0 4px 14px rgba(60,173,165,0.35), 0 0 0 10px rgba(60,173,165,0); }
}
/* Error list — what changed. Hidden until the user has revealed the fix
(either by dragging the seam past 30% or by tapping "Reveal the fix"). */
.bas-errors {
margin-top: 22px;
padding: 18px 22px;
background: #FAFAFA;
border-radius: 14px;
border: 1px solid var(--border);
opacity: 0;
max-height: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
transition: opacity 0.5s ease, max-height 0.5s ease,
padding-top 0.5s ease, padding-bottom 0.5s ease,
margin-top 0.5s ease;
}
.bas-revealed .bas-errors {
opacity: 1;
max-height: 600px;
padding-top: 18px;
padding-bottom: 18px;
margin-top: 22px;
}
.bas-errors-label {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-light);
margin-bottom: 12px;
}
.bas-errors-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 9px;
}
.bas-errors-list li {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 0.94rem;
line-height: 1.5;
}
.bas-err-wrong {
font-family: 'JetBrains Mono', monospace;
background: #FFF1ED;
color: #A54232;
padding: 2px 7px;
border-radius: 5px;
font-weight: 600;
}
.bas-err-arrow { color: var(--text-light); }
.bas-err-right {
font-family: 'JetBrains Mono', monospace;
background: #EAF8F6;
color: #156F69;
padding: 2px 7px;
border-radius: 5px;
font-weight: 600;
}
.bas-err-why {
font-style: italic;
color: var(--text-mid);
font-size: 0.88rem;
}
@media (max-width: 640px) {
.bas-pane { padding: 22px 18px 22px 22px; font-size: 0.96rem; }
.bas-seam-handle { width: 38px; height: 38px; font-size: 1rem; }
.bas-errors { padding: 14px 16px; }
}
/* ════════════════════════════════════════════════════════════════
SIDEBAR — unit-btn split into clickable name + chevron toggle.
Existing .sidebar-unit-btn is the parent; we now wrap name and
chevron so each has its own click target. Implementation in core.js
renders these as +
.
════════════════════════════════════════════════════════════════ */
.sidebar-unit-name-btn {
flex: 1;
text-align: left;
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
color: inherit;
background: transparent;
border: none;
font-size: inherit;
font-weight: inherit;
transition: background 0.12s ease;
}
.sidebar-unit-name-btn:hover {
background: rgba(60,173,165,0.08);
}
.sidebar-unit-chevron-btn {
flex: 0 0 auto;
width: 24px;
height: 24px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: transparent;
border: none;
font-size: 0.85rem;
color: var(--text-light);
transition: background 0.12s ease, transform 0.18s ease;
}
.sidebar-unit-chevron-btn:hover {
background: rgba(0,0,0,0.05);
}
.sidebar-section.unit-open .sidebar-unit-chevron-btn { transform: rotate(0deg); }
.sidebar-section:not(.unit-open) .sidebar-unit-chevron-btn { transform: rotate(-90deg); }
/* ════════════════════════════════════════════════════════════════
M2 — 6 ERROR FAMILIES BAR CHART
Horizontal bars sorted by frequency. Replaces the previous 6-card
grid. Each row: letter chip + family name + bar fill + percentage.
Bars animate in from 0% on mount via the ef-bar-grow animation.
════════════════════════════════════════════════════════════════ */
.ef-chart {
display: flex;
flex-direction: column;
gap: 6px;
margin: 16px 0 6px;
padding: 22px 24px 20px;
background: linear-gradient(135deg, #FFFDF7 0%, #FFFFFF 100%);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}
.ef-chart-caption {
font-family: 'Fredoka', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-light);
margin-bottom: 8px;
font-weight: 700;
}
.ef-row {
display: grid;
grid-template-columns: 38px minmax(160px, 220px) 1fr 56px;
gap: 14px;
align-items: center;
padding: 12px 14px;
border-radius: 12px;
cursor: pointer;
text-align: left;
background: transparent;
border: none;
font-family: inherit;
width: 100%;
transition: background 0.18s ease, transform 0.18s ease;
}
.ef-row:hover {
background: rgba(0,0,0,0.025);
transform: translateX(2px);
}
.ef-row-letter {
width: 38px; height: 38px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 1.05rem;
color: white;
flex-shrink: 0;
}
.ef-row-teal .ef-row-letter { background: var(--teal); }
.ef-row-gold .ef-row-letter { background: var(--gold); }
.ef-row-coral .ef-row-letter { background: var(--coral); }
.ef-row-info { min-width: 0; }
.ef-row-name {
font-family: 'Lora', serif;
font-size: 1.02rem;
color: var(--text);
font-weight: 500;
line-height: 1.3;
}
.ef-row-meta {
font-size: 0.74rem;
color: var(--text-light);
font-family: 'Fredoka', sans-serif;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-top: 2px;
}
.ef-row-toptrap {
display: inline-block;
font-family: 'Fredoka', sans-serif;
font-size: 0.6rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 800;
color: var(--coral-dark, #C25738);
background: #FFF1ED;
padding: 2px 7px;
border-radius: 4px;
margin-left: 6px;
vertical-align: middle;
}
.ef-row-bar {
height: 14px;
background: rgba(0,0,0,0.05);
border-radius: 8px;
overflow: hidden;
}
.ef-row-fill {
height: 100%;
width: var(--w, 0%);
border-radius: 8px;
animation: ef-bar-grow 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: var(--d, 0s);
}
.ef-row-teal .ef-row-fill { background: linear-gradient(90deg, var(--teal) 0%, var(--teal-dark) 100%); }
.ef-row-gold .ef-row-fill { background: linear-gradient(90deg, var(--gold) 0%, #B8862B 100%); }
.ef-row-coral .ef-row-fill { background: linear-gradient(90deg, var(--coral) 0%, var(--coral-dark, #C25738) 100%); }
.ef-row-pct {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 1.05rem;
text-align: right;
color: var(--text);
}
@keyframes ef-bar-grow {
from { width: 0%; }
to { width: var(--w, 0%); }
}
@media (max-width: 720px) {
.ef-row {
grid-template-columns: 36px 1fr 50px;
grid-template-rows: auto auto;
grid-template-areas:
"letter info pct"
"bar bar bar";
gap: 8px 10px;
padding: 10px 12px;
}
.ef-row-letter { grid-area: letter; width: 36px; height: 36px; }
.ef-row-info { grid-area: info; }
.ef-row-pct { grid-area: pct; }
.ef-row-bar { grid-area: bar; }
.ef-row-meta { display: none; }
}
/* ════════════════════════════════════════════════════════════════
SENTENCE-SURGERY TOOL
The sentence is the interface. Tap-to-place-comma exercises that
teach by interaction. Wrong taps shake; correct taps insert a
comma, chunks animate apart, "why" feedback slides in.
════════════════════════════════════════════════════════════════ */
.ss-wrap {
padding: 28px 30px 24px;
background: linear-gradient(135deg, #FFFDF7 0%, #FFFFFF 60%, #F8FFFE 100%);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow: 0 8px 28px rgba(0,0,0,0.04);
font-family: 'Lora', serif;
}
.ss-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 18px;
gap: 16px;
flex-wrap: wrap;
}
.ss-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ss-level {
font-family: 'Fredoka', sans-serif;
font-size: 0.68rem; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--teal-dark);
background: var(--teal-pale);
padding: 4px 10px; border-radius: 999px;
font-weight: 800;
}
.ss-rule {
font-family: 'Fredoka', sans-serif;
font-size: 0.88rem;
color: var(--text);
font-weight: 600;
}
.ss-progress { display: flex; gap: 7px; }
.ss-dot {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(0,0,0,0.10);
transition: background 0.2s ease, transform 0.2s ease;
}
.ss-dot-active { background: var(--teal); transform: scale(1.15); }
.ss-dot-done { background: var(--teal-dark); }
.ss-instruction {
font-family: 'Fredoka', sans-serif;
font-size: 0.78rem; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--text-light);
margin-bottom: 14px;
}
/* The sentence — the actual interface */
.ss-sentence {
font-family: 'JetBrains Mono', 'Menlo', monospace;
font-size: 1.18rem;
line-height: 2;
color: var(--text);
padding: 18px 0 12px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0;
word-spacing: 1px;
}
@media (max-width: 640px) {
.ss-sentence { font-size: 1.02rem; line-height: 2.1; }
}
/* Chunks of the sentence — they receive tints on activation */
.ss-chunk {
position: relative;
padding: 6px 8px;
margin: 0;
border-radius: 6px;
transition: background 0.45s cubic-bezier(0.16, 1, 0.3, 1),
color 0.3s ease,
transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
color: var(--text-mid);
}
.ss-chunk.is-active {
color: var(--text);
}
.ss-chunk-teal.is-active { background: rgba(60,173,165,0.10); }
.ss-chunk-gold.is-active { background: rgba(212,165,55,0.12); }
.ss-chunk-coral.is-active { background: rgba(232,128,107,0.10); }
/* Slot — the tap target between chunks. A dashed circle with a "+",
becomes a comma on correct insertion. Generous mobile tap target. */
.ss-slot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin: 0 1px;
padding: 0;
border-radius: 50%;
background: transparent;
border: 1.5px dashed rgba(0,0,0,0.18);
color: var(--text-light);
cursor: pointer;
font-family: 'Fredoka', sans-serif;
font-size: 0.95rem;
vertical-align: middle;
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.ss-slot::before { content: '+'; font-weight: 700; }
.ss-slot:hover, .ss-slot:focus-visible {
border-color: var(--teal);
background: var(--teal-pale);
color: var(--teal-dark);
transform: scale(1.12);
outline: none;
}
.ss-slot:active { transform: scale(0.95); }
.ss-slot.is-correct {
width: auto; height: auto;
border-color: transparent;
background: transparent;
color: var(--coral-dark, #C25738);
font-family: 'JetBrains Mono', monospace;
font-size: 1.4rem;
font-weight: 700;
padding: 0 4px 0 0;
cursor: default;
animation: ss-pulse 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Mark character comes from a CSS variable set in JS — supports
commas, full stops, question marks, etc. */
.ss-slot.is-correct::before { content: var(--ss-mark, ','); }
/* Boundary marks (. ! ?) push the next chunk slightly further away so
the sentence break reads as more decisive than a list comma. */
.ss-slot.is-correct.is-boundary {
padding-right: 10px;
font-size: 1.55rem;
}
/* Intra-word marks (apostrophes) sit flush mid-word — kill chunk
padding around the slot so the apostrophe doesn't float in a gap. */
.ss-tight .ss-chunk { padding-left: 1px; padding-right: 1px; }
.ss-tight .ss-slot { margin: 0; }
.ss-tight .ss-slot.is-correct {
padding: 0;
font-size: 1.25rem;
margin: 0 -1px;
}
.ss-slot.is-correct::after {
content: '+';
position: absolute;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
color: var(--coral-dark, #C25738);
background: #FFF1ED;
padding: 1px 4px;
border-radius: 3px;
margin-left: 2px;
margin-top: -22px;
font-weight: 700;
letter-spacing: 0;
opacity: 0;
animation: ss-diff-fade 1.6s ease forwards;
animation-delay: 0.2s;
pointer-events: none;
}
.ss-slot.is-wrong {
border-color: var(--coral);
background: #FFF1ED;
color: var(--coral-dark, #C25738);
animation: ss-shake 0.55s ease;
}
/* ============================================================
HIDDEN-SLOT MODE — under .ss-hidden-slots the tap zones are
invisible by default. Every gap between words is a tap zone,
but only the right ones accept the mark. Pedagogy: the student
must find the comma position, not just confirm one we revealed.
============================================================ */
.ss-hidden-slots .ss-slot {
display: inline-block;
width: 14px;
height: 1.5em;
margin: 0;
padding: 0;
border: none;
background: transparent;
border-radius: 4px;
vertical-align: baseline;
transition: background 0.2s ease, transform 0.15s ease;
}
.ss-hidden-slots .ss-slot::before { content: ''; }
.ss-hidden-slots .ss-slot:hover:not(.is-correct):not(.is-wrong):not(.is-hint) {
background: rgba(0,0,0,0.05);
}
.ss-hidden-slots .ss-slot:active:not(.is-correct) {
transform: scale(0.96);
}
/* Correct: shows the mark using the existing ::before content, but no
pill-bubble background. Reuses the existing .ss-slot.is-correct rules. */
.ss-hidden-slots .ss-slot.is-correct {
width: auto;
height: auto;
background: transparent;
border: none;
padding: 0 4px 0 0;
font-family: 'JetBrains Mono', monospace;
font-size: 1.4rem;
font-weight: 700;
color: var(--coral-dark, #C25738);
vertical-align: baseline;
}
/* Wrong: brief coral flash that fades, no permanent state. */
.ss-hidden-slots .ss-slot.is-wrong {
background: var(--coral-pale);
animation: ss-wrong-flash 0.45s ease-out;
}
/* Hint: subtle teal pulse on a remaining correct slot after 3 wrong taps. */
.ss-hidden-slots .ss-slot.is-hint {
background: rgba(60,173,165,0.18);
animation: ss-hint-pulse 1.2s ease-in-out;
}
@keyframes ss-wrong-flash {
0% { background: var(--coral-pale); }
100% { background: transparent; }
}
@keyframes ss-hint-pulse {
0%, 100% { background: rgba(60,173,165,0.18); transform: scale(1); }
50% { background: rgba(60,173,165,0.42); transform: scale(1.15); }
}
/* Words: only tint AFTER the student finds the boundary (when .is-active
is added by the click handler). Otherwise plain prose. */
.ss-hidden-slots .ss-chunk {
padding: 2px 1px;
border-radius: 4px;
}
@keyframes ss-pulse {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.4); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes ss-shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-4px); }
40%, 80% { transform: translateX(4px); }
}
@keyframes ss-diff-fade {
0% { opacity: 0; transform: translateY(0); }
15% { opacity: 1; transform: translateY(-2px); }
70% { opacity: 1; transform: translateY(-2px); }
100% { opacity: 0; transform: translateY(-6px); }
}
/* Feedback panel — slides in only after success */
.ss-feedback {
margin-top: 18px;
padding: 14px 18px;
background: var(--teal-pale);
border-left: 3px solid var(--teal);
border-radius: 10px;
font-family: 'Lora', serif;
font-size: 0.98rem;
line-height: 1.55;
color: var(--text);
animation: ss-slide-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ss-feedback strong { color: var(--teal-dark); font-weight: 700; }
@keyframes ss-slide-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.ss-controls {
display: flex; justify-content: flex-end; gap: 10px;
margin-top: 16px;
flex-wrap: wrap;
}
.ss-btn {
padding: 10px 22px;
border-radius: 999px;
font-family: 'Fredoka', sans-serif;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
border: 1.5px solid;
transition: all 0.15s ease;
}
.ss-btn-primary {
background: var(--teal);
color: white;
border-color: var(--teal);
box-shadow: 0 4px 12px rgba(60,173,165,0.30);
}
.ss-btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); transform: translateY(-1px); }
.ss-btn-secondary {
background: white;
color: var(--teal-dark);
border-color: var(--teal);
}
.ss-btn-secondary:hover { background: var(--teal-pale); }
/* Completion screen */
.ss-complete {
text-align: center;
padding: 40px 32px;
}
.ss-complete-mascot {
width: 92px;
height: auto;
margin-bottom: 14px;
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.10));
}
.ss-complete-title {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 1.5rem;
color: var(--text);
margin-bottom: 8px;
}
.ss-complete-body {
font-family: 'Lora', serif;
font-size: 1rem;
color: var(--text-mid);
max-width: 50ch;
margin: 0 auto 22px;
line-height: 1.55;
}
@media (max-width: 640px) {
.ss-wrap { padding: 22px 18px 20px; border-radius: 16px; }
.ss-slot { width: 38px; height: 38px; } /* bigger thumb target on phones */
}
/* ════════════════════════════════════════════════════════════════
RULE-CARD SCROLL-TRIGGERED ANIMATION
When a .adv-rule-card in stack format enters the viewport, it
gets .is-animated (added by IntersectionObserver in core.js).
The AFTER block holds back briefly so the eye lands on BAD first,
then the corrected example fades in and the inserted marks pulse.
One-shot per page load. Respects prefers-reduced-motion.
════════════════════════════════════════════════════════════════ */
.adv-rule-cards-stack .adv-rule-card:not(.is-animated) .adv-rule-card-examples,
.adv-rule-cards-stack .adv-rule-card:not(.is-animated) .adv-rule-card-result:has(.adv-rule-card-pill) {
opacity: 0;
transform: translateY(8px);
}
.adv-rule-cards-stack .adv-rule-card.is-animated .adv-rule-card-examples {
animation: rc-after-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}
.adv-rule-cards-stack .adv-rule-card.is-animated .adv-rule-card-result:has(.adv-rule-card-pill) {
animation: rc-trick-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both;
}
.adv-rule-cards-stack .adv-rule-card.is-animated .adv-rule-card-examples strong {
animation: rc-mark-pulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both;
display: inline-block;
transform-origin: center;
}
@keyframes rc-after-in {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes rc-trick-in {
0% { opacity: 0; transform: translateY(6px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes rc-mark-pulse {
0% { transform: scale(0.85); }
60% { transform: scale(1.18); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.adv-rule-cards-stack .adv-rule-card:not(.is-animated) .adv-rule-card-examples,
.adv-rule-cards-stack .adv-rule-card:not(.is-animated) .adv-rule-card-result:has(.adv-rule-card-pill) {
opacity: 1;
transform: none;
}
.adv-rule-cards-stack .adv-rule-card.is-animated .adv-rule-card-examples,
.adv-rule-cards-stack .adv-rule-card.is-animated .adv-rule-card-result:has(.adv-rule-card-pill),
.adv-rule-cards-stack .adv-rule-card.is-animated .adv-rule-card-examples strong {
animation: none;
transform: none;
opacity: 1;
}
}
/* STRUCTURE-VISUALIZER (X-RAY) TOOL */
.sv-wrap { padding: 30px 32px 26px; background: linear-gradient(135deg, #FFFDF7 0%, #FFFFFF 60%, #F8FFFE 100%); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 8px 28px rgba(0,0,0,0.04); font-family: 'Lora', serif; }
.sv-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-light); margin-bottom: 18px; }
.sv-sentence { font-family: 'Lora', serif; font-size: 1.32rem; line-height: 2.1; color: var(--text); padding: 12px 0 18px; }
.sv-plain { color: var(--text-mid); white-space: pre-wrap; }
.sv-region { display: inline-block; background: transparent; border: 1.5px solid transparent; border-radius: 8px; padding: 4px 10px; margin: 0 1px; cursor: pointer; font-family: inherit; font-size: inherit; font-style: italic; color: var(--text); transition: all 0.18s ease; }
.sv-region:hover, .sv-region:focus-visible { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.08); outline: none; }
.sv-region-teal { background: rgba(60,173,165,0.10); border-color: rgba(60,173,165,0.20); color: var(--teal-dark); }
.sv-region-teal:hover { background: rgba(60,173,165,0.18); border-color: var(--teal); }
.sv-region-teal.is-active { background: rgba(60,173,165,0.22); border-color: var(--teal); box-shadow: 0 4px 14px rgba(60,173,165,0.30); }
.sv-region-gold { background: rgba(212,165,55,0.12); border-color: rgba(212,165,55,0.22); color: var(--gold-dark, #B8862B); }
.sv-region-gold:hover { background: rgba(212,165,55,0.22); border-color: var(--gold); }
.sv-region-gold.is-active { background: rgba(212,165,55,0.26); border-color: var(--gold); box-shadow: 0 4px 14px rgba(212,165,55,0.30); }
.sv-region-coral { background: rgba(232,128,107,0.10); border-color: rgba(232,128,107,0.20); color: var(--coral-dark, #C25738); }
.sv-region-coral:hover { background: rgba(232,128,107,0.18); border-color: var(--coral); }
.sv-region-coral.is-active { background: rgba(232,128,107,0.22); border-color: var(--coral); box-shadow: 0 4px 14px rgba(232,128,107,0.30); }
.sv-legend { font-family: 'Fredoka', sans-serif; font-size: 0.74rem; color: var(--text-light); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.sv-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: rgba(60,173,165,0.22); border: 1.5px solid var(--teal); }
.sv-panel { margin-top: 8px; padding: 16px 20px; background: white; border: 1px solid var(--border); border-left: 3px solid var(--teal); border-radius: 12px; animation: sv-panel-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.sv-panel[data-tint="gold"] { border-left-color: var(--gold); }
.sv-panel[data-tint="coral"] { border-left-color: var(--coral); }
.sv-panel-label { font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 6px; }
.sv-panel[data-tint="gold"] .sv-panel-label { color: var(--gold-dark, #B8862B); }
.sv-panel[data-tint="coral"] .sv-panel-label { color: var(--coral-dark, #C25738); }
.sv-panel-desc { font-family: 'Lora', serif; font-size: 1rem; line-height: 1.6; color: var(--text); }
@keyframes sv-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) { .sv-wrap { padding: 22px 18px 20px; border-radius: 16px; } .sv-sentence { font-size: 1.12rem; line-height: 2.2; } .sv-region { padding: 3px 8px; } }
/* ════════════════════════════════════════════════════════════════
TAP-TO-FIX TOOL
Student taps words/punctuation in a sentence to find errors.
Correct tap → strikethrough + correction floats above with ↓
Wrong tap → shake, life lost, thinking mascot.
3 lives. At 0 lives, untapped errors get a wavy underline.
Hint button unlocks after 30s.
════════════════════════════════════════════════════════════════ */
.ttf-wrap {
position: relative;
padding: 26px 28px 22px;
background: linear-gradient(135deg, #FFFDF7 0%, #FFFFFF 50%, #F0FAFA 100%);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow: 0 8px 28px rgba(0,0,0,0.04);
overflow: visible;
}
.ttf-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
gap: 18px;
min-height: 64px; /* reserves space for the mascot */
}
.ttf-header-text {
flex: 1 1 auto;
min-width: 0;
}
.ttf-title {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 1.05rem;
color: var(--text);
letter-spacing: -0.01em;
margin-bottom: 10px;
}
.ttf-mute {
font-size: 1.1rem;
background: transparent;
border: 1px solid var(--border);
border-radius: 999px;
width: 32px; height: 32px;
cursor: pointer;
padding: 0;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s ease;
flex-shrink: 0;
}
.ttf-mute:hover { background: rgba(0,0,0,0.04); }
.ttf-stats {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 14px;
background: rgba(0,0,0,0.025);
border-radius: 10px;
font-family: 'Fredoka', sans-serif;
gap: 14px;
}
.ttf-lives {
display: flex;
gap: 4px;
font-size: 1rem;
}
.ttf-life {
display: inline-block;
width: 1.2em; /* keeps slot in place after the heart disappears */
text-align: center;
transform-origin: center;
}
/* Heart evaporates upward when a life is lost — quick pop (the hit
moment), then floats up while fading, scaling, rotating, blurring. */
.ttf-life.is-lost {
animation: ttf-life-evaporate 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
pointer-events: none;
}
@keyframes ttf-life-evaporate {
0% {
opacity: 1;
transform: translateY(0) scale(1) rotate(0deg);
filter: none;
}
12% {
opacity: 1;
transform: translateY(-2px) scale(1.28) rotate(0deg);
filter: brightness(1.25) drop-shadow(0 0 6px rgba(232,128,107,0.45));
}
35% {
opacity: 0.85;
transform: translateY(-10px) scale(1.05) rotate(-4deg);
filter: brightness(1) blur(0.5px);
}
100% {
opacity: 0;
transform: translateY(-38px) scale(0.55) rotate(9deg);
filter: grayscale(1) blur(2.5px);
}
}
.ttf-progress {
font-size: 0.88rem;
color: var(--text-mid);
font-weight: 600;
}
.ttf-progress span:first-child {
color: var(--teal-dark);
font-weight: 800;
}
.ttf-prompt {
font-family: 'Lora', serif;
font-style: italic;
font-size: 0.95rem;
color: var(--text-mid);
margin-bottom: 14px;
padding: 0 4px;
}
.ttf-sentence {
font-family: 'Lora', serif;
font-size: 1.32rem;
line-height: 2.6;
color: var(--text);
padding: 16px 0;
word-spacing: 1px;
}
@media (max-width: 640px) {
.ttf-sentence { font-size: 1.12rem; line-height: 2.7; }
}
.ttf-sp { white-space: pre-wrap; }
/* Each tappable token */
.ttf-tok {
position: relative;
display: inline;
font-family: inherit;
font-size: inherit;
color: inherit;
background: transparent;
border: none;
padding: 2px 1px;
margin: 0;
cursor: pointer;
border-radius: 4px;
transition: background 0.15s ease, color 0.2s ease, text-decoration 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.ttf-tok:hover:not(:disabled), .ttf-tok:focus-visible:not(:disabled) {
background: rgba(60,173,165,0.10);
outline: none;
}
.ttf-tok:disabled { cursor: default; }
/* Wrong tap — soft shake + coral border flash */
.ttf-tok.is-wrong {
background: rgba(232,128,107,0.15);
color: var(--coral-dark, #C25738);
animation: ttf-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes ttf-shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-3px); }
40%, 80% { transform: translateX(3px); }
}
/* Correct tap — strikethrough + corrected text floats above */
.ttf-tok.is-found {
color: var(--coral-dark, #C25738);
text-decoration: line-through;
text-decoration-color: var(--coral);
text-decoration-thickness: 2px;
background: transparent;
}
.ttf-tok.is-found[data-correction]::before {
content: attr(data-correction);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
font-family: 'Lora', serif;
font-style: italic;
font-size: 0.78em;
color: var(--teal-dark);
background: rgba(60,173,165,0.12);
padding: 1px 8px;
border-radius: 6px;
white-space: nowrap;
margin-bottom: 4px;
animation: ttf-correct-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none;
pointer-events: none;
}
.ttf-tok.is-found[data-correction]::after {
content: '↓';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
font-size: 0.7em;
color: var(--teal);
margin-bottom: -2px;
pointer-events: none;
}
@keyframes ttf-correct-rise {
0% { opacity: 0; transform: translate(-50%, 6px); }
100% { opacity: 1; transform: translate(-50%, 0); }
}
/* Hint flash — pulse on one untapped error */
.ttf-tok.is-hint {
background: rgba(212,165,55,0.20);
animation: ttf-hint-pulse 1.4s ease-in-out;
}
@keyframes ttf-hint-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(212,165,55,0); }
50% { box-shadow: 0 0 0 6px rgba(212,165,55,0.30); }
}
/* Flagged (0 lives) — wavy coral underline like spell-check */
.ttf-tok.is-flagged {
text-decoration: underline wavy var(--coral);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
animation: ttf-flag-pulse 1.8s ease-in-out infinite;
}
@keyframes ttf-flag-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
/* Controls row */
.ttf-controls {
display: flex;
gap: 10px;
margin-top: 14px;
align-items: center;
flex-wrap: wrap;
}
.ttf-controls-after { justify-content: flex-end; margin-top: 18px; }
.ttf-hint {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
background: white;
border: 1.5px solid var(--border);
color: var(--text-mid);
font-family: 'Fredoka', sans-serif;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.ttf-hint:disabled {
color: var(--text-light);
cursor: not-allowed;
opacity: 0.7;
}
.ttf-hint:not(:disabled):hover {
background: #FFFBEB;
border-color: var(--gold);
color: var(--gold-dark, #B8862B);
}
.ttf-hint-icon { font-size: 0.95rem; }
.ttf-noerrors {
padding: 9px 18px;
border-radius: 999px;
background: var(--teal);
color: white;
border: none;
font-family: 'Fredoka', sans-serif;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.15s ease;
}
.ttf-noerrors:hover { background: var(--teal-dark); transform: translateY(-1px); }
.ttf-noerrors:disabled { opacity: 0.6; cursor: not-allowed; }
/* Feedback after success */
.ttf-feedback {
margin-top: 18px;
padding: 14px 18px;
background: var(--teal-pale);
border-left: 3px solid var(--teal);
border-radius: 10px;
font-family: 'Lora', serif;
font-size: 0.98rem;
line-height: 1.55;
color: var(--text);
animation: ttf-slide-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ttf-feedback strong { color: var(--teal-dark); font-weight: 700; }
@keyframes ttf-slide-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.ttf-next {
padding: 10px 22px;
border-radius: 999px;
background: var(--teal);
color: white;
border: 1.5px solid var(--teal);
font-family: 'Fredoka', sans-serif;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: 0 4px 12px rgba(60,173,165,0.30);
}
.ttf-next:hover { background: var(--teal-dark); transform: translateY(-1px); }
/* Mascot — lives in the header as a flex item (not absolute). Idle
safari sits there bobbing. On a tap, safari fades out and the
reaction (thumbs-up / thinking) pops in to fill the same slot.
After the reaction animation ends, safari fades back in. */
.ttf-mascot {
position: relative;
flex: 0 0 64px;
width: 64px;
height: 64px;
}
.ttf-mascot-idle,
.ttf-mascot-reaction {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.ttf-mascot-idle {
opacity: 1;
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.08));
animation: ttf-mascot-idle-bob 4s ease-in-out infinite;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.ttf-mascot.is-reacting .ttf-mascot-idle {
opacity: 0;
transform: scale(0.8);
animation-play-state: paused;
}
.ttf-mascot-reaction {
opacity: 0;
transform: translateY(-6px) scale(0.8);
}
.ttf-mascot-reaction.ttf-mascot-show {
animation: ttf-mascot-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ttf-mascot-pop {
0% { opacity: 0; transform: translateY(-6px) scale(0.8); }
20% { opacity: 1; transform: translateY(2px) scale(1.08); }
40% { transform: translateY(0) scale(1); }
85% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-4px) scale(0.9); }
}
/* Subtle idle bob — gives safari a little life when nothing is happening */
@keyframes ttf-mascot-idle-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
/* Completion screen */
.ttf-complete {
text-align: center;
padding: 40px 32px;
}
.ttf-complete-mascot {
width: 92px;
height: auto;
margin-bottom: 14px;
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.10));
}
.ttf-complete-title {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 1.4rem;
color: var(--text);
margin-bottom: 8px;
}
.ttf-complete-body {
font-family: 'Lora', serif;
font-size: 1rem;
color: var(--text-mid);
max-width: 48ch;
margin: 0 auto 22px;
line-height: 1.55;
}
.ttf-btn-secondary {
padding: 9px 18px;
border-radius: 999px;
background: white;
color: var(--teal-dark);
border: 1.5px solid var(--teal);
font-family: 'Fredoka', sans-serif;
font-weight: 600;
font-size: 0.88rem;
cursor: pointer;
transition: all 0.15s ease;
}
.ttf-btn-secondary:hover { background: var(--teal-pale); }
@media (max-width: 640px) {
.ttf-wrap { padding: 20px 18px 18px; border-radius: 16px; }
.ttf-mascot { width: 52px; height: 52px; flex-basis: 52px; }
.ttf-stats { padding: 6px 10px; }
}