/* Bray New Student Application Form -- layout only. Field/input/label/ button styling shared with every other form page lives in css/forms.css (loaded before this file, NOT edited here). Header, footer, .page-wrap and the default header overlay live in site.css -- not repeated here. Header/hero relationship (reference/header-hero-relationship.json + checkpoint 04's README table): no media at y=0, no scrim -- standard cream-gap pattern (same as contact.css). Section padding-top equals the header's own height (82px phone / 80.6562px desktop), matching reference/bray-new-student-application-form/measurements.json section[0]. Content column width: measured 917.9375px, centred (x=261.03125 at 1440 -- (1440-917.9375)/2 = 261.03125, exact), narrower than the site's standard .page-wrap (1382.4px on desktop, used by contact's 2-col grid) -- this page is a single centred column, not a 2-column split. */ .appform-inner { max-width: 917.9375px; margin: 0 auto; padding: 0 22.5px; } @media (min-width: 768px) { /* Tablet fix (Phase 7 fix 2, 17.09.26; breakpoint corrected from 800px to 768px in Phase 8, defect 3, 18.09.26 -- live's fluid-engine grid breakpoint is 768px everywhere on this site, same as home.css and contact.css; 800px is only where the HEADER's own height formula happens to change, a separate, coincidental breakpoint -- see this file's own header-formula media queries below, which correctly stay at 800/875.98): a fixed 917.94px column (the 1440 value) ran edge to edge at 820-960px. Live's column is 16 cells of its 24-column fluid- engine grid (columns 5-20, centred): cell = min(site max-width cell, (viewport - 2 x (2vw - 11px) - 25 x 11px) / 24). = 917.94px at 1440, 521.2px at 820, 651.7px at 1024 (live). */ .appform-inner { padding: 0; max-width: calc(min((1400px - 253px) / 24, (100vw - 4vw + 22px - 275px) / 24) * 16 + 165px); } } .appform-hero { position: relative; overflow: visible; /* the rounded divider bleeds below this section's own box -- see below */ padding: calc(37px + 12vw) 0 76.1875px; /* live's fluid header-height formula, see site.css's header-formula comment */ text-align: center; } /* Desktop (>=800px): see "Desktop section model" below (was a fixed 208.915625px bottom padding, tuned at 1440). */ /* Padding-bottom (Phase 5 consolidation fix, 17.09.26): live's raw getComputedStyle padding-bottom for this section IS 22.5px/86.4px (reference/bray-new-student-application-form/measurements.json), and that number happens to equal this divider's own 6vw config height -- but a direct Playwright probe of the BUILT page (this same measurement technique as contact.css's own padding-bottom fix, same phase) shows this section's own MEASURED total height needs MORE than that literal value once the divider is a proper zero-added-height absolute overlay (rather than the earlier bespoke in-flow block that was quietly making up this exact shortfall) -- 53.6875px phone / 122.515625px desktop of extra padding-bottom, on top of the literal 22.5/86.4, closes it. Same "padding picked to match the section's own MEASURED total height, not the raw Squarespace box model" convention as bray-movement-school.css / contact.css. */ .appform-hero h3 { font-size: 27.6928px; line-height: 1.1425; /* 31.6363 / 27.6928 */ margin: 0; } @media (min-width: 800px) { .appform-hero h3 { line-height: 1.1421; } /* 41.3092 / 36.16 */ } /* Live has two accent classes (computed, 17.09.26): .sqsrte-text-color--accent = rgb(249,173,125); .sqsrte-text-color--darkAccent = rgb(236,108,28). */ .accent { color: #F9AD7D; } .accent-dark { color: var(--orange); } .appform-section { position: relative; overflow: visible; background: var(--hero-cream); /* Padding-top restored to the literal live-measured 0px (reference/ bray-new-student-application-form/measurements.json section[1].style paddingTop) -- the earlier `64px` top-padding hack here is removed entirely now that forms.css's own over-tall field spacing (the true cause) is fixed at the source. Padding-bottom: the literal live value is 22.5px/86.4px (same 6vw as this divider's own config height), but -- same finding as .appform-hero above and contact.css this same phase -- a direct Playwright probe of the BUILT page shows MORE than that literal value is needed to hit this section's own measured total height once the divider is a proper zero-added- height absolute overlay: +218.65625px phone / +349.28125px desktop on top of the literal 22.5/86.4. Picked to match the section's own MEASURED total height (same convention as bray-movement-school.css/ contact.css), not hand-derived from the raw Squarespace box model. */ padding: 0 0 241.15625px; } /* Desktop (>=800px): see "Desktop section model" below (was a fixed 435.68125px bottom padding, tuned at 1440). */ .appform-form { margin: 0; } /* Desktop section model (Phase 7 fix 2, 17.09.26) -- replaces the fixed 208.92px / 435.68px bottom paddings tuned at 1440, which ran 50-190px off at tablet widths. Live's own structure, measured with Playwright at 820x1180, 1024x768 and 1440x900: section: min-height 33vh, content centred; padding-top = header (hero only); content-wrapper padding 3.3vmax top and bottom; padding-bottom 6vw (the rounded divider's space); grid rows: container x 0.0215 each, 11px gaps (container = viewport - 4vw, max 1400px); hero heading block 5 rows; form block 33 rows, then 11px, then the reassurance heading block (2 rows, 12 cells wide) -- 35 rows in all. Rows only grow when content is taller. The build's form (shared forms.css) renders 120-275px shorter than live's form block, so the form section adds 142px under its content (min-height still wins at 1440, where live's rows are taller than its form). Totals at 1440x900 are unchanged (454.7 / 1595.6px); tablet widths now land within about 25px of live. Phone keeps its measured values above. */ @media (min-width: 768px) { /* Breakpoint corrected from 800px to 768px in Phase 8, defect 3, 18.09.26 -- same reasoning as the .appform-inner column fix above: live's fluid-engine breakpoint is 768px, not the header's own 800px. Below 800px the header hasn't switched formula yet (see the 800-875.98 override further down, unchanged, still header-only), so this block uses the MOBILE header top-formula (37+12vw) by default and the 800-875.98/876+ overrides still apply on top of it exactly as before -- min-height:33vh wins at every width in this section regardless (live's hero content is short enough that the 33vh floor always binds, 768px through 1440px alike, confirmed by direct Playwright measurement: live's hero is a flat 462px at every one of 768/780/799/800/820/900/1024/1200/1440 at test height 1400), so the exact padding-top split matters for where the heading sits inside the floor, not for the section's own total height. */ .appform-hero { min-height: 33vh; display: flex; flex-direction: column; justify-content: center; padding: calc(37px + 12vw + 3.3vmax) 0 calc(3.3vmax + 6vw); } .appform-hero .appform-inner { width: 100%; min-height: calc(min(1400px, 100vw - 4vw) * 0.0215 * 5 + 44px); } .appform-section { padding: 3.3vmax 0 calc(3.3vmax + 6vw); } .appform-section .appform-inner { padding-bottom: 254px; } .appform-presubmit { max-width: calc(min((1400px - 253px) / 24, (100vw - 4vw + 22px - 275px) / 24) * 12 + 121px); } } /* .appform-section .appform-inner's padding-bottom, banded not formula'd (Phase 8, defect 3, 18.09.26; replaces the earlier "container x 0.0215 x 35 rows" min-height formula and its flat 142px padding- bottom, both tuned only at 1440). That formula assumed live's own content grows smoothly with width, the same way home.css's grid rows do -- and assumed the min-height would always be what determines this box's height. A live Playwright sweep at height 1400 across every width in this phase's acceptance bar shows neither holds: live's own form column genuinely gets SHORTER from 768-820px to 1024-1200px, then taller again at 1440px, because live's own field text wraps differently at different column widths -- a real content effect, not a bug, but not one this build can reproduce field-by-field (forms.css is shared, locked infrastructure, and even if it weren't, live's own per-field line-break points aren't captured anywhere this build has access to). And this build's OWN form + reassurance-heading content (measured directly, Playwright) already varies non-monotonically for the same reason (its column width tracks the same formula), landing close enough to live's target at every required width that a min- height floor never actually binds once the true padding is set -- so this is genuinely a padding fix, not a hidden min-height dependency: each band's px value is live's own target height MINUS this build's own measured form+heading content at that width, i.e. the padding this page's own real content needs to land on live's number, not an arbitrary constant chosen to hit it by coincidence. */ @media (min-width: 768px) and (max-width: 819.98px) { .appform-section .appform-inner { padding-bottom: 154px; } } @media (min-width: 820px) and (max-width: 899.98px) { .appform-section .appform-inner { padding-bottom: 165px; } } @media (min-width: 900px) and (max-width: 1023.98px) { .appform-section .appform-inner { padding-bottom: 141px; } } @media (min-width: 1024px) and (max-width: 1199.98px) { .appform-section .appform-inner { padding-bottom: 119px; } } @media (min-width: 1200px) and (max-width: 1439.98px) { .appform-section .appform-inner { padding-bottom: 124px; } } @media (min-width: 800px) { .appform-hero { padding: calc(48.96875px + 2.20052vw + 3.3vmax) 0 calc(3.3vmax + 6vw); } } @media (min-width: 800px) and (max-width: 875.98px) { .appform-hero { padding-top: calc(54.34375px + 2.20052vw + 3.3vmax); } } /* Reassurance heading below the Submit button (own content block on live, not part of the
). Whole line is --orange; the "within the next 24 hours (weekdays)." span carries live's own underline (content.json: sqsrte-text-highlight). */ .appform-presubmit { margin: 40px 0 0; font-size: 21.8464px; line-height: 1.1712; /* 25.5865 / 21.8464 */ } /* Font sizes (Phase 7 fix 2, 17.09.26): live's Squarespace 7.1 formulas (see home.css's top comment) instead of the 375x812 / 1440x900 values they equal (h3 27.69/36.16px, h4 21.85/26.08px), so both headings scale at tablet widths as live does. */ .appform-hero h3 { font-size: calc(1.2 * 0.012 * min(100vh, 900px) + 1rem); } .appform-presubmit { font-size: calc(0.6 * 0.012 * min(100vh, 900px) + 1rem); } @media (min-width: 768px), (orientation: landscape) { .appform-hero h3 { font-size: min(calc(1.2 * 1.2vw + 1rem), max(calc(1.2 * 0.012 * 1400px + 1rem), 2.2rem)); } .appform-presubmit { font-size: min(calc(0.6 * 1.2vw + 1rem), max(calc(0.6 * 0.012 * 1400px + 1rem), 1.6rem)); } } .appform-presubmit-underline { text-decoration: underline; } /* This page's form section has a PEACH (--hero-cream) background, unlike every other form page on the site (contact's is plain cream) -- forms.css's shared .rl-input/.rl-select fill (rgba(252,238,220,0.8), i.e. --hero-cream at 80% opacity) composites to the SAME colour as this section's own background, so the fields would be visually invisible here (no fix to forms.css -- that file is locked shared infra; this is a page-local override only). Value matched to live's own rendered field fill, sampled off desktop-01.png (measured rgb(253,247,242), 17.09.26) -- a lighter, whiter cream that reads as a distinct field against the peach section. Repeated at :focus so the fill doesn't flicker between two near-identical creams; the focus affordance still comes through via forms.css's own border-color rule (unaffected by this override, only background-color is touched here). */ .appform-section .rl-input, .appform-section .rl-select, .appform-section .rl-input:focus, .appform-section .rl-select:focus { background-color: #FDF7F2; } /* Phone country-code dropdown (flag 4, review pass 18.09.26) -- see the HTML's own comment on this field for why the select's value is a dial code, not an ISO code. Laid out like .rl-name-row (forms.css): a fixed-width code select next to a flexible number input, same 10px gap. Fixed width (not flex-shrink-to-content) because the select's own text is a full country name + dial code (e.g. "United Arab Emirates (+971)") which would otherwise blow the row wide on its longest option; width is generous enough for this page's own longest likely pick (Ireland, the default) to read without clipping, with any longer selection scrolling inside the closed select via its native text-overflow, same as any other