/**
* @file
* Everything the three "1000 Beginnings" data decks have in addition to the
* organisers' exports: the "Back to site" link, keyboard focus, and the rules
* that make a deck readable on a phone held upright. Loaded by
* sankalp-web-cure/prevention/management.html.twig, AFTER each deck's own
* stylesheet.
*
* The exports are three separate artifacts that happen to share one design
* system, so anything added to all three belongs here rather than copied into
* each — the "Back to site" link spent its first day styled in cure-deck.css
* only, which rendered it as a default blue underlined link on the other two.
*
* HAND-AUTHORED — there is no .scss source for this file. `gulp styles`
* compiles only scss/style.scss and Bootstrap, so nothing regenerates it, but
* it sits beside two generated files and the usual "never edit css/, edit
* scss/" reflex will send you hunting for a source that does not exist. Same
* arrangement as css/cure-deck.css.
*
* LOAD ORDER IS LOAD-BEARING. Almost every rule here overrides one in a deck's
* own stylesheet at equal specificity (.stage, .cast-frame, .player-bar), so
* it wins only by coming second. If a deck renders letterboxed on a phone,
* check the , so without this a keyboard user gets
whatever the UA draws over a translucent bar — usually nothing legible. */
.player-bar :focus-visible{ outline:2px solid #F0A24D; outline-offset:2px; }
/* Never fade the chrome away from a keyboard user mid-interaction. */
.player-bar:focus-within{ opacity:1; pointer-events:auto; }
/* ---------- Centre badge: a fixed square for a variable-length code ----------
Management deck only. The export sizes the badge `width:2.5em; height:2.5em`
in its own 1.05em type, which is 42px holding a 3-letter code comfortably —
and 45px of text for a 4-letter one. Two of the 27 centres have four
(STDC), and the overflow is white text on cream paper, so it does not read
as a clipped box: the code simply loses its outer strokes. Fixed at every
size, not just on a phone — the ratio is scale-invariant, so it clips just
the same on the projector the deck was built for. min-width keeps the 26
three-letter badges exactly the square they were designed as. */
.centre-badge{ width:auto; min-width:2.5em; padding:0 0.3em; }
/* ==========================================================================
Mobile portrait — the deck stops being a 16:9 frame and becomes a page.
========================================================================== */
@media (orientation: portrait) and (max-width: 900px) {
/* ---------- The deck stops owning the viewport ----------
The exports open with `html,body{height:100%; overflow:hidden}` so that
nothing can scroll past a fixed 16:9 frame. Here the page scrolls, which
is the whole mechanism: a stage is taller than the screen and you read
down it. The letterbox colour goes with it — with no bars left to fill,
it would only show as a flash of near-black behind the paper. */
html, body {
height: auto;
overflow: visible;
background: var(--paper);
}
.cast-wrap {
display: block;
width: 100%;
height: auto;
}
/* No 16:9, no max-width, no letterbox shadow — the frame is just the page.
The padding is the fix for the complaint that started this: .player-bar
is `position:fixed; bottom:0`, so without space reserved under the
content it sits on top of the last band of every stage. 7.5rem covers the
bar at its tallest, which is two rows — the controls wrap above the dots
row on a narrow screen (see .player-dots below). The safe-area inset is
for the iOS home indicator, which sits under the bar again. */
.cast-frame {
width: 100%;
height: auto;
max-width: none;
max-height: none;
padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px));
box-shadow: none;
}
/* ---------- One stage at a time, and it scrolls ----------
`display:none` on the inactive stages, not the export's
`visibility:hidden` + `opacity:0`: an absolutely-positioned transparent
stage still occupies no flow, so the page would have no height at all.
It also stops the browser fetching the background images of stages nobody
has opened — which is what keeps the management deck's 95 staff
photographs (2.9 MB) off a phone's connection until their centre is
reached. The cross-fade goes with it; a fade between two documents of
different heights only looks like a bug. */
.stage {
position: static;
height: auto;
min-height: 0;
overflow: visible;
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: none;
/* The exports size every child in `em` off this one declaration
(`clamp(12px, 1.35vw, 29px)`), which resolves to the 12px floor on a
phone — 6px for a 0.5em footnote. A flat 16px base restores the
proportions at a readable size now that width is no longer the
constraint. */
font-size: 16px;
padding: 1rem 1rem 0;
gap: 0.9rem;
}
.stage:not(.active) {
display: none;
}
/* ---------- Bands: every fixed height becomes content height ----------
In the 16:9 frame each band is given a fixed height or a flex ratio so
the stage always fills exactly one screen. Down here the stage is as tall
as its content, so those heights only truncate it. */
.band-header,
.band-stats,
.band-main,
.band-lower,
.band-footer,
.fund-main,
.motion-card,
.band-index,
.band-pictogram,
.band-vision-stats,
.vision-hero-card,
.vision-cta,
.donor-panel,
.bubble-stage-main {
height: auto;
min-height: 0;
flex: none;
}
/* ---------- Everything in one column ----------
Five stat tiles, a 2.3:1 chart split, a three-up clinical grid: all of it
is side-by-side because the frame is wide. It is not wide any more. */
.band-main,
.band-lower,
.fund-main,
.motion-numbers,
.band-pictogram,
.band-vision-stats,
.bubble-stage-main {
grid-template-columns: 1fr;
}
/* Two-up survives where the content is a single number and a short label —
stat tiles read better as a pair than as a stack ten items long.
The .cols-N variants are the cure deck's, and they have to be named here
because SPECIFICITY OUTRANKS ORDER. Everywhere else in this file loading
second is enough, because the exports never put two classes on the same
element; .band-stats.cols-5 is the exception at (0,2,0) against this
rule's (0,1,0). Left off the list it kept its five columns on a phone —
tiles 63px wide with the % clipped off "81.5%" and "84.9%" on both centre
stages, which is not a layout that looks broken so much as data that
looks wrong. */
.band-stats,
.band-stats.cols-5,
.band-stats.cols-6,
.clinical-grid {
grid-template-columns: 1fr 1fr;
}
/* Cure deck only: the donor wall is a 3-column newspaper flow clipped to
the frame's height. Both parts have to go — `overflow:hidden` on a column
box that no longer has a height silently drops the last two thirds of the
names. */
.donor-grid {
column-count: 1;
overflow: visible;
}
/* ---------- Charts need a height of their own ----------
Every chart wrapper is `flex:1` inside a band with a fixed height, so
with the heights gone they collapse to nothing. These are also the
elements both new decks measure with getBoundingClientRect() to compute
their SVG viewBox — see the "chart geometry" block in
js/prevention-deck.js and js/management-deck.js, which re-measures on
stage activation precisely because this file changes what a stage is. */
.growth-chart,
.motion-chart-wrap,
.bubble-svg-wrap {
/* An aspect ratio, NOT a fixed height, and a wide one. Both new decks size
their axis labels off the measured height — prevention uses
`max(13, H*0.115)`, management draws at a fixed 28 in a 1000-wide
viewBox — which silently assumes a chart much wider than it is tall. Give
one of them a 350x224 box and it renders six year labels at 26px inside a
350-unit viewBox, and they overlap into an unreadable smear. 16:7 keeps
the exports' own proportions, so their font maths keeps working. */
aspect-ratio: 16 / 7;
height: auto;
min-height: 0;
flex: none;
}
/* The donut is square and sized in em, so it only needs to stop sharing a
row with its legend. */
.fund-body,
.pictogram-body,
.index-card {
flex-direction: column;
align-items: stretch;
gap: 0.9rem;
}
/* The legend's left rule is a column separator; stacked, it reads as a
stray vertical line beside the text. */
.index-detail {
border-left: 0;
padding-left: 0;
}
/* Prevention deck only: the closing fine print is a data qualifier and a
credit sharing one `justify-content:space-between` row. At 390px the
qualifier gets squeezed into a ~60px column and sets one word per line. */
.band-note-row {
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
}
/* Stacking that row is only half of it: the credit inside it is
`white-space:nowrap`, which a column layout does nothing about. The line
is wider than the stage, so it ran off the right edge and stopped
mid-sentence ("… data via StopThal Navigator, current 2"). Nothing draws
a clip edge — the overflow simply is not painted — so it reads as a
truncated sentence rather than as a layout fault, and the attribution it
truncates is the part that has to be legible. */
.band-note .credit {
white-space: normal;
}
/* ---------- The stage heading wraps instead of overflowing ----------
Every stage opens with .band-header: the centre's name and strapline on
the left, the campaign logo plate (and on the management deck "Hosted by
Sankalp India Foundation") on the right, held apart by space-between. A
name like "Sankalp Thalassemia Day Care Center" cannot shrink below the
width of its longest word, so at 390px the two children add up to 425px
in a 358px stage and the whole plate sits outside it, unpainted. Every
one of the management deck's 27 centre stages was losing it.
Wrap rather than a column: where the two do fit — the shorter centre
names, and the cure deck's logo-only header — the export's designed
side-by-side arrangement is kept, and only the headers that cannot fit
drop the plate onto its own line. */
.band-header {
flex-wrap: wrap;
}
/* Prevention deck only, and the same failure one level down: .header-brand
puts the state name ("Maharashtra" at 2.2em) and the campaign kicker on
one line, and the pair is wider than the stage however .band-header above
wraps. The kicker is what falls off, mid-word. Wrapping drops it to its
own line, where the export's left margin — meant to separate it from the
name beside it — would indent it out of line with everything else. */
.header-brand {
flex-wrap: wrap;
}
.state-sub {
margin-left: 0;
}
/* Cure and management: a panel heading is a title and a caption sharing one
`justify-content:space-between` row. At 390px the title alone is wider
than the panel, so space-between has nothing to distribute and the
caption is pushed past the right edge — the management deck's
"cumulative, indexed…" note is cut mid-word. Same failure as
.band-note-row above, same fix. */
.growth-head {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
/* ---------- Player bar ----------
Kept `position:fixed` from the export — .cast-frame's padding-bottom is
what stops it covering content. Two changes: it may wrap onto a second
row, and it never fades out. */
.player-bar {
flex-wrap: wrap;
gap: 10px;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
}
/* The export fades the bar out after 4 seconds idle. That is right for a
laptop driving a projector; on a phone it is not, and not just because
this bar is the deck's only navigation (there is no app shell behind it).
`.idle` also sets `pointer-events:none`, so the first tap after the fade
does not press a button — it passes through to whatever is underneath and
merely brings the bar back. On a stage short enough to fit the screen
there is nothing to scroll either, so the controls read as simply gone.
Always-on instead. What stops it becoming the "black border overlaying
the slides" that this reflow was asked to remove is .cast-frame's
padding-bottom: every band can be scrolled clear of the bar, so nothing
is ever permanently underneath it — which is exactly what the old
letterbox layout could not offer, since the slide could not move. */
.player-bar.idle {
opacity: 1;
pointer-events: auto;
}
/* The management deck has 28 dots. They get their own scrollable row rather
than squeezing the buttons off the bar. */
.player-dots {
order: 10;
width: 100%;
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
scrollbar-width: none;
}
.player-dots::-webkit-scrollbar {
display: none;
}
.player-dots button {
flex: none;
}
/* min-width:15ch on a 390px screen pushes the theme button off the row. */
.player-label {
min-width: 0;
flex: 1;
}
}