/* V095 — the home page opens on a form instead of on questions. Measured at 1440x900 before this file: .hero 439px 49% of the viewport .heroProfile 375px 62% of the hero #home .quick y=841 below the fold the four metric cards below the fold Inside that 375px, measured row by row: Exam Readiness 17 "—" (nothing configured) 48 Target A* 17 11 module chips 57 hand-picked Confirm (disabled) 28 Exam series 17 the series select 48 76px wide, so the option text is clipped Weekly Goal 0/40 17 the goal track 8 --- 375 181 of those 375 pixels are the state of "you have not configured this yet", not content. A first-time visitor lands on a page of controls and a row of zeros, and the four things that ARE available - the metrics and the Quick Practice entries - are below the fold. The summary keeps all four settings visible as chips and keeps the form one tap away. Nothing is deleted: the original nodes stay in the DOM and are what the expanded state shows. */ /* `justify-content:center` is here for a measured reason, not a preference. .hero is a two-column grid and the left cell is taller than the summary: 113px of heading + 60px of paragraph + 35px of buttons, 235px in total. The grid therefore stretches this card to 235px whatever it contains, and with the summary at 87px and the form collapsed the remaining ~150px rendered as empty blue under the chips. The card was not too tall because of anything in it - it was matching its neighbour, and the extra space all fell below the content. Centring puts that space above and below evenly, so the card reads as a deliberate panel instead of a container that failed to fill. */ html.v095-ready .heroProfile { position: relative !important; padding: 13px 15px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 10px !important; } /* The summary needs a higher specificity than the rules it was measured against. Measured: html.v095-ready .v095Summary { display:block } lost, and the summary measured display:none with a 0x0 box - the panel collapsed to an empty rounded rectangle. v033 styles .heroProfile's own children, so the class has to out-specify a class on the child rather than sit beside it. */ html.v095-ready .heroProfile .v095Summary { display: block !important; } /* Collapsed: the form is collapsed as a box. The earlier version also wrote `.v095Form > * { display:none }`, which was both unnecessary and wrong: the original rows (.tiny, .big, .row ...) are the DIRECT children of .v095Form, so hiding them hid the expanded form too. Measured: with the panel open, the summary and the form were both display:none at 0x0 and the panel rendered as an empty rounded rectangle 493x235. Height zero on the wrapper is enough - the children keep their own display, their ids keep their values, and a form that can be laid out is a form whose values are still written back by updateExamCountdown and renderExamSeries. */ html.v095-ready .v095Form { display: block !important; height: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* Height zero on the wrapper is not enough on its own, and this was measured rather than reasoned: .heroProfile is `display:flex; flex-direction:column`, so .v095Form is a flex item, and a flex item's automatic minimum size keeps its content from collapsing. The original rows inside it measured 17px, 57px and more, so the panel measured 235px tall with an 87px summary and about 150px of empty blue underneath - the summary floating at the top of a card three times its own size. The empty stretch also showed a stray amber mark at the top right: the old readiness figure, still laid out with no height of its own to be seen in. `display:none` on the children in the COLLAPSED state only. The expanded state re-declares them below, and putting the rule here rather than as `.v095Form > * { display:none }` is what keeps it from reaching the open form - that broad selector was the earlier bug recorded above. */ html.v095-ready:not(.v095-open) .v095Form > * { display: none !important; } /* Expanded: the form is what the student came for. */ html.v095-ready.v095-open .v095Form { height: auto !important; overflow: visible !important; opacity: 1 !important; pointer-events: auto !important; margin-top: 4px !important; padding-top: 11px !important; border-top: 1px solid rgba(255, 255, 255, .16) !important; } html.v095-ready.v095-open .v095Summary { display: none !important; } /* Expanded, the form is the only child, so centring it would only matter if the grid still stretched the card - and it does, to the same 235px. The form is 312px, taller than the neighbour, so it defines the row instead. Pinned to the top anyway: if a shorter form ever appears against a taller left cell, the first control should be the one at eye level, not floating in the middle of the card. */ html.v095-ready.v095-open .heroProfile { justify-content: flex-start !important; } /* ---------------------------------------------------------- the summary row */ html.v095-ready .v095SummaryHead { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 10px !important; } html.v095-ready .v095SummaryHead .tiny { color: #c7d2fe !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } /* Measured: at 15px the "no data yet" em dash rendered as a 15x21 amber sliver in the corner and read as a stray mark rather than as a value. index.html writes "—" here until a question has been attempted - the same convention the Accuracy and Weak Topics cards use - so the state is correct and only the legibility was not. Bigger, and a muted tone rather than the amber that signals a real score, so an empty reading is not dressed up as a result. */ html.v095-ready .v095SummaryPct { color: #94a3c4 !important; font-size: 22px !important; font-weight: 900 !important; line-height: 1 !important; } /* A real percentage is a result, and it is the only state that gets the amber. The green is deliberately not a third branch: `is-ready` means "the exam series is set", which is a statement about the form, not about the score. Measured on the live site with it applied: a student who had set an exam series but answered nothing saw a GREEN em dash where the reading should have been the muted "no value" grey - the two states disagreed on the surface while both meaning "nothing to report". Ordering it after [data-empty] and re-restating the empty colour is what keeps the empty reading grey in every configuration. */ html.v095-ready .v095SummaryPct:not([data-empty="1"]) { color: #fbbf24 !important; } html.v095-ready .v095SummaryPct.is-ready:not([data-empty="1"]) { color: #6ee7b7 !important; } html.v095-ready .v095SummaryPct[data-empty="1"], html.v095-ready .v095SummaryPct.is-ready[data-empty="1"] { color: #94a3c4 !important; } html.v095-ready .v095SummaryRow { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 7px !important; } html.v095-ready .v095Chip { background: rgba(255, 255, 255, .12) !important; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 999px !important; padding: 5px 11px !important; font-size: 11.5px !important; color: #dbe6f7 !important; font-weight: 600 !important; white-space: nowrap !important; } html.v095-ready .v095Chip b { color: #fff !important; font-weight: 800 !important; margin-left: 3px !important; } html.v095-ready .v095Chip.is-empty b { color: #fcd34d !important; } html.v095-ready .v095EditBtn { margin-left: auto !important; background: #fff !important; color: #1e3a8a !important; border: 0 !important; border-radius: 9px !important; padding: 7px 15px !important; font-size: 12px !important; font-weight: 800 !important; cursor: pointer !important; white-space: nowrap !important; } html.v095-ready .v095EditBtn:hover { background: #eaf0ff !important; } /* The collapsed state has to survive the styles that put a form panel on a light ground, because the hero is dark in both themes. */ html.v095-ready .heroProfile .v095EditBtn:focus-visible { outline: 2px solid #fbbf24 !important; outline-offset: 2px !important; } /* ---------------------------------------------------------------- narrow */ @media (max-width: 1080px) { /* Below this the two hero columns stack (v033.css:273), so the profile is full width and the chips have room to wrap without reading as clutter. */ html.v095-ready .v095EditBtn { margin-left: 0 !important; } } /* On a phone the hero is the whole first screen. Measured at 390x844 with the summary collapsed: 500px, 59% of the viewport, and Quick Practice at y=1105 - off the screen. The heading alone takes four lines at the desktop size and the paragraph five, because the column is 350px wide either way. The wording stays. Only the type scale and the paragraph's width change: this is the same decision v033.css:273 already made for the hero's padding at this breakpoint, applied to the type inside it. */ @media (max-width: 720px) { /* The heading is an H2, not an H1 - measured. A selector for the wrong tag is a rule that never applies, which is what the first attempt wrote. */ body.ial-v030 .home-shell .hero h2 { font-size: 20px !important; line-height: 1.22 !important; letter-spacing: -.01em !important; } body.ial-v030 .home-shell .hero p { font-size: 12.5px !important; line-height: 1.5 !important; margin-bottom: 0 !important; } /* Two full-width buttons stacked read as a menu; side by side they read as the two ways in, which is what they are. */ body.ial-v030 .home-shell .hero .heroBtns { gap: 8px !important; } body.ial-v030 .home-shell .hero .heroBtns .btn { flex: 1 1 0 !important; min-width: 0 !important; padding: 9px 8px !important; font-size: 12px !important; } html.v095-ready .heroProfile { padding: 11px 12px !important; gap: 8px !important; } html.v095-ready .v095Chip { padding: 4px 9px !important; font-size: 11px !important; } html.v095-ready .v095EditBtn { padding: 6px 13px !important; font-size: 11.5px !important; } } /* ---------------------------------------------------------------- the nudge The banner said the same thing as the button next to it and sat above the fold: "Set your exam series so the countdown, weekly target and recommendations are yours. It takes ten seconds." plus a Set it up button that focused #examSeriesSelect - which is inside the panel it was telling the student to use. The panel's own Set up button is the one route now. The node and its id stay: index.html:2851 toggles .hidden on it. */ html.v095-ready .examSetupNudge { display: none !important; } /* ------------------------------------------------------------- open state Expanded, the original rows come back. They are styled here because the original rules were written for a panel that was the only thing in the column and had room to be tall. */ html.v095-ready.v095-open .heroProfile > .tiny { display: none !important; } html.v095-ready.v095-open .heroProfile .big { font-size: 30px !important; } html.v095-ready.v095-open .heroProfile .row { margin-top: 7px !important; } html.v095-ready.v095-open .heroProfile .examSeriesControl { margin: 6px 0 !important; } /* The series select measured 76px wide, which clips "Jun 2028" to "Jun 202". It has the full column to work with here and never did. */ html.v095-ready.v095-open .heroProfile #examSeriesSelect { width: 100% !important; max-width: 260px !important; }