Centers the loader's tagline under the logo, replaces the broken
info-glyph (a Unicode character missing from the Inter font, which
rendered as a tofu box) with a drawn circle-and-i badge, and swaps
the stat-card icons to match the mockup: book for Question Bank
Rating, bar chart for Exam Readiness, star for Average Score.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
font-display: swap paints with the fallback font stack first, then
swaps to Inter once the 876KB variable font finishes downloading.
.loader-wordmark was already width-fixed from an earlier centering
fix, but .loader-tagline, .loader-message, and .progress-percent had
no explicit width and (more importantly) used line-height: normal,
which is derived from each font's own metrics - Inter and the fallback
stack disagree by 3-4px per line. Those three deltas summed exactly to
the .loader column's total 10px height change, which is what visibly
shifted the whole centered loading screen once the swap happened.
Gave the width-dependent elements width: 100% (matching the wordmark)
and gave all three text elements an explicit unitless line-height
(computed from font-size, not font metrics) so their box size no
longer depends on which font is currently active.
Verified empirically: forced the fallback font stack on the live page
and diffed getBoundingClientRect() against Inter for every loader
element - all width/height deltas are 0 after the fix (previously up
to 17.5px width / 10px cascaded height).
.loader-wordmark had no explicit width or text-align, so as a flex
item (align-items: center) it shrink-wrapped to whatever width the
"RanaZe" inline spans needed. wordmark-trainer's display:block then
filled that same ambiguous width rather than the wordmark block's
true rendered box, leaving it off-center relative to "RanaZe" above
it. Giving .loader-wordmark an explicit width:100% and text-align:
center makes both lines center within the same known-width box.
Verified in a real browser: both elements now report identical
getBoundingClientRect() centers (x=960 in a 1920px viewport).
Replaces the OS/window icon with the new dark-background logo design,
and derives a transparent shield-mark cutout (via chroma-key against
the flat background) for the in-app login/sidebar mark and the web
loading-screen logo. Brand.ranaze_mark_texture() no longer needs the
AtlasTexture crop since the new source asset is already tightly
cropped to the mark.
hzandClaude Sonnet 5