/* ================================================================
fraction-add-sub.css
----------------------------------------------------------------
Styles for the "Adding & Subtracting Fractions" skill group on
the Class 3 Math page:
- A.1 Same-Denominator Add/Subtract (Visual) — "1/4 + 2/4 =
3/4." Two small bar cards (denominator shared) sit either
side of a +/- operator, followed by "=" and a dashed,
unshaded "result" card carrying a "?" — the child reads
the shaded parts being combined (addition: the second
bar's shade is layered on in a second color right after
the first bar's own shade) or taken away (subtraction:
the amount being removed is hatched out of the first
bar) and taps the matching fraction chip below. New
.fas-bar-* classes draw the two-tone segmented bar
directly (no dependency on any other file's shape
renderer, since this skill needs two colors + a hatch
state in one bar, which nothing else on the page draws).
- A.2 Same-Denominator Add/Subtract (Numeric) — the exact same
idea as A.1 with the picture dropped: a plain stacked
equation "a/d + b/d = ?" using the new .fas-frac / .fas-
eq-row classes below. Answer chips reuse the same
.frac-friendly-picker/.quiz-number-options/.quiz-
number-opt markup as every other picture-tap skill on
this page, just with a .fas-frac symbol inside each chip
instead of a fraction picture.
- A.3 Adding to Make a Whole — "1/4 + ? = 1." A small bar
shaded to the given fraction sits next to a fully-shaded
"whole" bar labeled 1 (new .fas-whole-target class), with
a dashed blank between them where the missing addend
goes — reusing the same .fas-bar-* bar as A.1 and the
same answer-chip markup as A.2.
- A.4 Unlike Denominators — Find Common Denominator First — a
two-step guided flow (new .fas-guide-* classes): Step 1
asks the child to pick the correct common denominator
from four pill options; once picked, the equation
re-draws with both fractions already converted onto that
common denominator, and Step 2 asks for the final sum or
difference. Both steps must be right for the question to
count as correct — the scaffolding is the point.
- A.5 Unlike Denominators — Straight to Answer — the same
"a/d1 ± b/d2 = ?" equation as A.4 with no scaffolding
step at all: the child works it out and taps the
answer, already simplified to lowest terms, directly
from four chips.
- A.6 Mixed Number Addition/Subtraction — "1 1/2 + 2 1/4," with
regrouping when the fraction parts overflow past one
whole (addition) or need borrowing (subtraction). New
.fas-mixed class stacks a whole-number digit beside a
.fas-frac symbol so a mixed number reads as one unit
inside the equation row.
Every skill here shares the same 5-question-per-slot / star-
reward / "practice more?" quiz shell as the rest of the page (via
the .bq- / .quiz- classes from quiz-popup-theme.css and quiz-
modal-responsive.css, loaded elsewhere) and the same green/red
grading vocabulary as fraction-compare.css. Load this file after
the shared quiz shell stylesheets, e.g.:
================================================================ */
/* ---------- shared: stacked fraction symbol (.fas-frac) ---------- */
/* Self-contained stacked numerator/line/denominator symbol used
everywhere in this file — inside equation rows, inside answer
chips, and underneath the visual bars. Deliberately not reusing
any other file's fraction-symbol markup so this file has no
hidden dependency on undocumented internals elsewhere. */
.fas-frac {
display: inline-flex;
flex-direction: column;
align-items: center;
line-height: 1.05;
font-weight: 800;
color: var(--secondary);
}
.fas-frac-num, .fas-frac-den {
font-size: 20px;
}
.fas-frac-line {
width: 100%;
height: 3px;
background: currentColor;
border-radius: 2px;
margin: 2px 0;
}
.fas-frac.fas-frac-lg .fas-frac-num,
.fas-frac.fas-frac-lg .fas-frac-den { font-size: 26px; }
/* Whole-number + fraction pairing for mixed numbers (A.6). "1 3/8"
needs to fit as an answer chip alongside 3 siblings on one line,
so the whole-number digit defaults to a modest size; only inside
the main equation row (.fas-eq-row) does it step up to match the
larger "lg" fraction symbols shown there. */
.fas-mixed {
display: inline-flex;
align-items: center;
gap: 4px;
}
.fas-mixed-whole {
font-weight: 800;
font-size: 20px;
color: var(--secondary);
}
.fas-eq-row .fas-mixed-whole { font-size: 26px; }
/* Dashed "unknown value" placeholder — the blank result slot in an
equation, or the missing addend in Make-a-Whole (A.3). */
.fas-blank {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
padding: 4px 10px;
border: 3px dashed var(--line);
border-radius: 12px;
font-weight: 800;
font-size: 22px;
color: var(--secondary);
opacity: 0.6;
}
/* ---------- shared: equation row (A.2, A.3, A.4, A.5, A.6) ---------- */
.fas-eq-row {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
margin: 18px auto 8px;
}
.fas-op {
flex: 0 0 auto;
font-weight: 800;
font-size: 24px;
color: var(--secondary);
opacity: 0.7;
}
.fas-eq-sign {
flex: 0 0 auto;
font-weight: 800;
font-size: 24px;
color: var(--secondary);
opacity: 0.7;
}
@media (max-width: 560px) {
.fas-eq-row { gap: 8px; margin: 12px auto 6px; }
.fas-op, .fas-eq-sign { font-size: 19px; }
.fas-frac-num, .fas-frac-den { font-size: 17px; }
.fas-frac.fas-frac-lg .fas-frac-num,
.fas-frac.fas-frac-lg .fas-frac-den { font-size: 21px; }
.fas-mixed-whole { font-size: 16px; }
.fas-eq-row .fas-mixed-whole { font-size: 21px; }
.fas-blank { min-width: 32px; min-height: 32px; font-size: 18px; padding: 2px 8px; }
}
@media (max-width: 380px) {
.fas-eq-row { gap: 6px; }
.fas-op, .fas-eq-sign { font-size: 16px; }
.fas-frac-num, .fas-frac-den { font-size: 15px; }
.fas-frac.fas-frac-lg .fas-frac-num,
.fas-frac.fas-frac-lg .fas-frac-den { font-size: 18px; }
.fas-mixed-whole { font-size: 14px; }
.fas-eq-row .fas-mixed-whole { font-size: 18px; }
.fas-blank { min-width: 28px; min-height: 28px; font-size: 15px; }
}
/* ---------- shared: two-tone segmented bar (.fas-bar) ---------- */
/* Draws a single horizontal bar of `denominator` equal segments.
Each segment carries a state class:
.is-a shaded, "first fraction" color
.is-b shaded, "second fraction / being added" color
.is-removed shaded-but-crossed-out, "being taken away" color
(no class) empty
so A.1's addition questions can show two colors filling in next
to each other, and its subtraction questions can show a hatched
overlay disappearing from an already-shaded bar. */
.fas-bar-card {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 168px;
}
.fas-bar {
display: flex;
width: 100%;
height: 56px;
border-radius: 12px;
overflow: hidden;
border: 3px solid var(--line);
background: #fff;
}
.fas-bar-seg {
flex: 1 1 0;
border-right: 2px solid var(--line);
background: transparent;
position: relative;
transition: background .2s ease, opacity .2s ease;
}
.fas-bar-seg:last-child { border-right: none; }
.fas-bar-seg.is-a { background: var(--sky); }
.fas-bar-seg.is-b { background: var(--sun); }
.fas-bar-seg.is-removed {
background: repeating-linear-gradient(
45deg,
rgba(239,68,68,0.55) 0 6px,
rgba(239,68,68,0.2) 6px 12px
);
}
.fas-bar-card.result .fas-bar { border-style: dashed; opacity: 0.85; }
/* ---------- A.1 Same-Denominator Add/Subtract (Visual) ---------- */
/* align-items: flex-start (not "center") is deliberate: the source-
fraction cards have a 2-line caption ("3/9") while the result
card's caption is just "?" (1 line), so centering the *cards*
would leave their captions vertically centered against each other
but shove the actual bars out of line by the caption height
difference. Top-aligning the row keeps every bar's top edge level
regardless of caption height; the operator/equals glyphs then get
their own fixed height (matching .fas-bar's height at each
breakpoint below) with internal flex-centering so they still read
as vertically centered against the bars, not against the row. */
.fas-vis-wrap {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 12px;
margin: 18px auto 6px;
flex-wrap: wrap;
}
.fas-vis-wrap .fas-op,
.fas-vis-wrap .fas-eq-sign {
height: 56px;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
/* ---------- A.3 Adding to Make a Whole ---------- */
.fas-whole-target .fas-bar-seg { background: var(--mint-bright, var(--sky)); }
.fas-whole-target .fas-bar { border-color: var(--mint-bright, var(--sky)); }
/* ---------- shared: answer chips (A.2, A.3, A.4, A.5, A.6) ---------- */
/* .quiz-number-opt itself is already styled by quiz-popup-theme.css
site-wide; .fas-opt only tunes the extra padding this file's
.fas-frac / .fas-mixed symbols need to sit comfortably inside it. */
.fas-opt {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 64px;
padding: 10px 14px;
}
/* A.6's chips carry a whole number *and* a fraction ("1 3/8"), so
they need less padding/min-width than the other skills' plain
fraction chips to still fit all 4 across on one line instead of
wrapping the 4th one to its own row. */
#fasMixedOptions.quiz-number-options { gap: 10px; }
#fasMixedOptions .fas-opt { min-width: 46px; padding: 8px 10px; }
/* ---------- A.4 Unlike Denominators — Guided ---------- */
.fas-guide-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 100%;
}
.fas-guide-phase-label {
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--secondary);
opacity: 0.6;
}
.fas-guide-denom-row {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin: 4px auto 4px;
}
.fas-guide-denom-opt {
flex: 0 0 auto;
min-width: 68px;
padding: 12px 14px;
border-radius: 14px;
border: 3px solid var(--line);
background: transparent;
cursor: pointer;
font: inherit;
font-weight: 800;
font-size: 20px;
color: var(--secondary);
-webkit-tap-highlight-color: transparent;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fas-guide-denom-opt:hover:not(:disabled) {
transform: translateY(-3px);
border-color: var(--sky);
box-shadow: 0 10px 20px -12px rgba(30,58,95,0.25);
}
.fas-guide-denom-opt:active:not(:disabled) { transform: translateY(-1px); }
.fas-guide-denom-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(46,155,245,0.35); }
.fas-guide-denom-opt:disabled { cursor: default; }
.fas-guide-denom-opt.is-correct {
border-color: #10b981;
background: rgba(16,185,129,0.08);
box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
.fas-guide-denom-opt.is-wrong {
border-color: #ef4444;
background: rgba(239,68,68,0.08);
box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
}
.fas-guide-step2 { display: none; }
.fas-guide-step2.is-active { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
/* Post-answer grading states shared by every plain answer-chip skill
in this file (A.2, A.3, A.4 step 2, A.5, A.6) — same green/red
vocabulary as everywhere else on the page. */
.quiz-number-opt.fas-opt.is-correct {
border-color: #10b981;
background: rgba(16,185,129,0.08);
box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
.quiz-number-opt.fas-opt.is-wrong {
border-color: #ef4444;
background: rgba(239,68,68,0.08);
box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
}
/* ---------- phone responsiveness ---------- */
@media (max-width: 560px) {
.fas-vis-wrap { gap: 8px; margin: 14px auto 4px; }
.fas-bar-card { width: 118px; gap: 6px; }
.fas-bar { height: 42px; border-radius: 10px; }
.fas-vis-wrap .fas-op, .fas-vis-wrap .fas-eq-sign { height: 42px; }
.fas-opt { min-width: 52px; padding: 8px 10px; }
.fas-guide-denom-row { gap: 8px; }
.fas-guide-denom-opt { min-width: 56px; padding: 10px 10px; font-size: 17px; border-radius: 12px; }
}
@media (max-width: 380px) {
.fas-bar-card { width: 96px; }
.fas-bar { height: 36px; }
.fas-vis-wrap .fas-op, .fas-vis-wrap .fas-eq-sign { height: 36px; }
.fas-guide-denom-opt { min-width: 48px; padding: 8px 8px; font-size: 15px; }
}
/* ---------- A.6 Mixed Number Addition/Subtraction ---------- */
.fas-mixed-eq-row { margin: 20px auto 10px; }