/* ============================================================================= student-portal — design system ----------------------------------------------------------------------------- Mobile-first. Single column by default; the 12-column bento grid switches on at 768px. Colours are the existing OxBridge blue (#7CABE6) and coral (#F26A64), deepened where they have to carry text at an accessible contrast. Everything here is namespaced under .sp- so it cannot collide with the Bootstrap 4 rules the rest of the portal still loads. ========================================================================== */ .sp-root { --sp-brand: #1E5F9E; /* deepened OxBridge blue - text, buttons, links */ --sp-brand-mid: #7CABE6; /* the existing brand blue - fills, accents */ --sp-brand-soft: #E4EFF9; --sp-coral: #C6483F; /* deepened coral - warnings that carry text */ --sp-coral-mid: #F26A64; /* the existing brand coral */ --sp-coral-soft: #FBE9E7; --sp-green: #12694A; --sp-green-soft: #E2F1EA; --sp-amber: #8A5A00; --sp-amber-soft: #FBF0DA; --sp-ink: #16232F; --sp-ink-soft: #40546A; --sp-muted: #6B7E93; --sp-line: #DCE6F0; --sp-line-strong: #C3D4E5; --sp-ground: #F4F8FC; --sp-surface: #FFFFFF; --sp-radius: 12px; --sp-radius-sm: 8px; --sp-shadow: 0 1px 2px rgba(20,45,75,.05), 0 6px 16px rgba(20,45,75,.05); --sp-gap: 14px; --sp-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--sp-ground); color: var(--sp-ink); font-family: var(--sp-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; } .sp-root *, .sp-root *::before, .sp-root *::after { box-sizing: border-box; } .sp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 14px 56px; } /* ---------- header ------------------------------------------------------- */ .sp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 16px; } /* Logo and contact details travel together on the left, so the header stays a two-part bar - identity here, destinations there - rather than becoming three things fighting over space-between. */ .sp-barleft { display: flex; align-items: center; gap: 20px; min-width: 0; } .sp-brandmark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .sp-brandmark img { width: 34px; height: auto; display: block; } .sp-brandmark b { font-size: 15px; font-weight: 700; line-height: 1.15; display: block; color: var(--sp-ink); } .sp-brandmark span { font-size: 11.5px; color: var(--sp-muted); display: block; } /* --- how to reach the centre -------------------------------------------- */ /* Muted, so it reads as a detail beside the logo and not as two more tabs. STACKED, NOT SIDE BY SIDE, and that is what makes both readable. Written out in a row they need about 300px and overflow the header even at the layout's own 1120px maximum, which is why the address was an unexplained icon at every width. In a column the block is only as wide as the LONGER of the two - about 155px, five more than the row of one number and one icon it replaces - and two lines tall, which is the height of the logo lockup beside it. So it costs nothing and says everything. THE WIDTHS ARE MEASURED, not guessed: 24 viewport widths against this stylesheet, comparing every line count with and without. See student_portal_contact_bar() for what shows where. */ .sp-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } .sp-contact a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--sp-muted); text-decoration: none; } .sp-contact a:hover, .sp-contact a:focus { color: var(--sp-brand); text-decoration: none; } .sp-contact svg { flex: none; } /* Below the layout's own maximum the words no longer fit, so both give way to their icons and the block goes back to a row. .sp-nav wraps rather than overflows, so keeping them would push the whole header onto a second line rather than merely making it tight. */ @media (max-width: 1119px) { .sp-contact { flex-direction: row; align-items: center; gap: 6px; } .sp-contact a span { display: none; } .sp-contact a { padding: 2px; } } .sp-nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .sp-nav a { font-size: 13.5px; font-weight: 600; color: var(--sp-ink-soft); text-decoration: none; padding: 7px 11px; border-radius: var(--sp-radius-sm); } .sp-nav a:hover, .sp-nav a:focus { background: var(--sp-brand-soft); color: var(--sp-brand); } .sp-nav a.sp-on { background: var(--sp-brand-soft); color: var(--sp-brand); } /* The Invoice dot. One class, two placements: inline after the label up here, pinned to the icon in the phone tabs below. Coral rather than the brand colour, because the brand colour is also what marks the ACTIVE tab -- a dot in it would read as "you are here" on every page except the one you are on. Never the only signal: the strip on the page says the same thing in words, and the link carries it in aria-label for anyone who cannot see the dot. */ .sp-nav a .sp-dot { display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--sp-coral); /* Nudged up to sit against the cap-height rather than the baseline. */ vertical-align: 2px; } /* Who is signed in. Muted and unpadded so it reads as a label rather than as a sixth tab someone might try to click. Trimmed rather than wrapped: a long name must not push Log out onto a second line. */ .sp-who { font-size: 12.5px; color: var(--sp-muted); font-weight: 600; /* 180px until the contact details arrived. The name is the one thing in this bar that already trims itself, so it is what pays for the two icons beside the logo; 110px still fits a first name and an initial. */ margin-left: 6px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- the phone tab bar -------------------------------------------- Hidden on a laptop, where the header nav is already right. Below 560px the header keeps only the logo and Log out, and the destinations move to a fixed bar in thumb reach. */ .sp-tabs { display: none; } @media (max-width: 560px) { .sp-nav a:not(.sp-nav-out) { display: none; } /* The header keeps logo, name and Log out. A phone has room for a first name and not much more, so the trim tightens rather than the name disappearing — seeing WHOSE portal this is matters most on the device it gets checked on. */ .sp-who { margin-left: 0; } /* A PHONE GETS ITS OWN ROW FOR THE CONTACT DETAILS, and that is what makes the wordmark, the number and the address all fit at once. Measured: on one row they need about 476px against the 362px a 390 wide screen actually has, so no amount of trimming was ever going to do it. Given a row to themselves they have the full width and need about 280px, which fits down to 320. display:contents on the wrapper is what allows it. .sp-contact is nested inside .sp-barleft, so it cannot be ordered against .sp-nav from there; dissolving the wrapper makes the brandmark and the contact block direct children of .sp-bar, and then order + a 100% basis drops the contact onto a second row while the brandmark and Log out keep the first. The wrapper is a plain div with no role of its own, so nothing is lost from the accessibility tree by dissolving it. The header is taller on a phone as a result. That is the trade: two rows that say who you are and how to reach us, against one row that said neither. */ .sp-barleft { display: contents; } .sp-bar { flex-wrap: wrap; row-gap: 6px; } .sp-brandmark { order: 1; } .sp-nav { order: 2; } .sp-contact { order: 3; flex: 0 0 100%; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 16px; padding-top: 2px; } /* Written out, not icons. Overrides the 1119px rule above, which this block follows in the file. */ .sp-contact a span { display: inline; } .sp-contact a { padding: 0; } .sp-who { max-width: 72px; } .sp-tabs { /* However many tabs student_portal_nav() defines, in one equal row. This was pinned to exactly five columns, so the sixth tab (Courses, added by special-course-bookings s24) wrapped onto a second row inside a bar that is fixed to the bottom of the screen. Counting in CSS is a trap the next tab would spring again. */ display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; background: var(--sp-surface); border-top: 1px solid var(--sp-line); /* Clear of the iPhone home indicator, and 0 on anything without one. */ padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 14px rgba(20, 45, 75, .06); } .sp-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px 2px 8px; text-decoration: none; color: var(--sp-muted); font-size: 10px; font-weight: 600; /* Apple and Google both ask for 44px of tappable height. */ min-height: 52px; } .sp-tab span { line-height: 1; } .sp-tab.sp-on { color: var(--sp-brand); } .sp-tab.sp-on svg { stroke-width: 2.1; } /* Positioned against the tab, NOT wrapped around the icon: the icon is drawn by student_portal_tab_icon() and wrapping it would mean every tab carrying an extra element for the sake of one. 50% is the tab's centre, so +7px puts the dot on the icon's top-right corner at any tab width. */ .sp-tab { position: relative; } .sp-tab .sp-dot { position: absolute; top: 5px; left: 50%; margin-left: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--sp-coral); /* Against the bar, so it stays legible where it overlaps the glyph. */ box-shadow: 0 0 0 2px var(--sp-surface); } /* Room to scroll past the bar, so it never sits on the last card. */ .sp-wrap { padding-bottom: 78px; } } /* The wordmark used to be hidden below 430px, because with the contact details sharing its row it was the one thing that would not give. They no longer share a row on a phone - see the .sp-barleft rule in the 560px block - so it is back at every width. */ .sp-hello { margin: 4px 0 18px; } .sp-hello h1 { font-size: 23px; line-height: 1.2; margin: 0; font-weight: 700; } .sp-hello p { margin: 4px 0 0; color: var(--sp-muted); font-size: 14px; } /* ---------- grid --------------------------------------------------------- */ .sp-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-gap); } .sp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (min-width: 768px) { .sp-wrap { padding: 0 22px 72px; } .sp-grid { grid-template-columns: repeat(12, 1fr); gap: 16px; } .sp-c4 { grid-column: span 4; } .sp-c5 { grid-column: span 5; } .sp-c6 { grid-column: span 6; } .sp-c7 { grid-column: span 7; } .sp-c8 { grid-column: span 8; } .sp-c12 { grid-column: span 12; } /* The calendar is wrapped in #sp-cal-region so a month change can swap its contents in one go. That wrapper is itself a child of .sp-grid, so without a span of its own it auto-placed into a SINGLE column and took the whole calendar down to a twelfth of the page. The card inside it is a .sp-c12, but that only spans the region, not the grid. */ .sp-cal-region { grid-column: span 12; } .sp-stats { display: contents; } /* stat tiles join the 12-col grid directly */ .sp-hello h1 { font-size: 27px; } } /* ---------- cards -------------------------------------------------------- */ .sp-card { background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); padding: 16px; display: flex; flex-direction: column; } .sp-card > h2 { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sp-muted); margin: 0 0 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .sp-card > h2 a { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--sp-brand); font-weight: 600; text-decoration: none; } .sp-card > h2 a:hover { text-decoration: underline; } /* hero ------------------------------------------------------------------- */ .sp-hero { border-color: var(--sp-brand-mid); background: linear-gradient(180deg, var(--sp-brand-soft) 0%, var(--sp-surface) 62%); } .sp-hero .sp-when { font-size: 12.5px; font-weight: 700; color: var(--sp-brand); text-transform: uppercase; letter-spacing: .06em; } .sp-hero .sp-what { font-size: 21px; font-weight: 700; margin: 5px 0 3px; line-height: 1.2; } .sp-hero .sp-where { font-size: 14px; color: var(--sp-ink-soft); margin: 0; } .sp-hero .sp-act { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; } /* stat tiles ------------------------------------------------------------- */ /* THE DASHBOARD STAT TILES, currently unused. The three that lived here -- attendance, homework submitted, latest score -- were removed on 2026-08-31 because none of them had data for a regular course, so all a family saw was a row of dashes. Kept whole, not deleted: they come back when Progress lands. See the note where they were, in dashboard.php. */ .sp-stat { text-align: left; } .sp-stat .sp-lab { font-size: 11.5px; color: var(--sp-muted); font-weight: 600; line-height: 1.25; } .sp-stat .sp-big { font-size: 27px; font-weight: 800; line-height: 1.05; margin-top: 5px; letter-spacing: -.02em; } .sp-stat .sp-sub { font-size: 11.5px; color: var(--sp-muted); margin-top: 3px; } .sp-stat.sp-empty .sp-big { font-size: 15px; font-weight: 600; color: var(--sp-muted); letter-spacing: 0; } /* ---------- alert strip -------------------------------------------------- */ .sp-alert { border-radius: var(--sp-radius); padding: 12px 14px; display: flex; gap: 11px; align-items: flex-start; font-size: 14px; border: 1px solid transparent; } .sp-alert b { display: block; font-size: 14.5px; margin-bottom: 1px; } .sp-alert p { margin: 0; } .sp-alert .sp-alert-act { margin-left: auto; flex: 0 0 auto; } .sp-alert-warn { background: var(--sp-coral-soft); border-color: var(--sp-coral-mid); color: var(--sp-coral); } .sp-alert-warn p { color: var(--sp-ink-soft); } .sp-alert-info { background: var(--sp-brand-soft); border-color: var(--sp-brand-mid); color: var(--sp-brand); } .sp-alert-info p { color: var(--sp-ink-soft); } @media (max-width: 560px) { .sp-alert { flex-direction: column; } .sp-alert .sp-alert-act { margin-left: 0; width: 100%; } .sp-alert .sp-alert-act .sp-btn { width: 100%; } } /* ---------- lesson rows -------------------------------------------------- */ .sp-lesson { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--sp-line); } .sp-lesson:last-child { border-bottom: 0; padding-bottom: 0; } .sp-lesson:first-of-type { padding-top: 0; } .sp-date { width: 48px; flex: 0 0 auto; text-align: center; border-radius: var(--sp-radius-sm); background: var(--sp-brand-soft); padding: 6px 0; } .sp-date .sp-d { font-size: 17px; font-weight: 800; color: var(--sp-brand); line-height: 1; } .sp-date .sp-m { font-size: 10px; font-weight: 700; color: var(--sp-brand); text-transform: uppercase; letter-spacing: .04em; } .sp-date.sp-today { background: var(--sp-brand); } .sp-date.sp-today .sp-d, .sp-date.sp-today .sp-m { color: #fff; } .sp-lesson .sp-info { flex: 1 1 auto; min-width: 0; } .sp-lesson .sp-info strong { font-size: 14.5px; font-weight: 600; display: block; } .sp-lesson .sp-info span { display: block; color: var(--sp-muted); font-size: 12.5px; margin-top: 1px; } /* ---------- class rows (full-width, one class per row) ------------------- */ .sp-classrow { display: grid; grid-template-columns: 1fr; gap: 14px; } .sp-cr-id .sp-cr-subject { font-size: 19px; font-weight: 700; line-height: 1.2; margin: 0 0 5px; } .sp-cr-meta { display: grid; gap: 4px 18px; font-size: 13.5px; } .sp-cr-meta div { display: flex; gap: 8px; } .sp-cr-meta dt { color: var(--sp-muted); margin: 0; min-width: 46px; } .sp-cr-meta dd { margin: 0; color: var(--sp-ink-soft); } .sp-cr-when { font-size: 16px; font-weight: 700; margin: 0 0 6px; } .sp-cr-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; } @media (min-width: 768px) { /* identity | details | actions */ .sp-classrow { grid-template-columns: minmax(190px, 1.1fr) minmax(220px, 1.3fr) auto; gap: 26px; align-items: start; } .sp-cr-act { justify-content: flex-end; } } @media (max-width: 767px) { .sp-cr-act .sp-btn { flex: 1 1 auto; } } /* ---------- buttons ------------------------------------------------------ */ .sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; background: var(--sp-brand); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; padding: 10px 16px; border-radius: var(--sp-radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap; } .sp-btn:hover, .sp-btn:focus { background: #17507F; color: #fff; text-decoration: none; } .sp-btn-ghost { background: var(--sp-surface); color: var(--sp-brand); border-color: var(--sp-line-strong); } .sp-btn-ghost:hover, .sp-btn-ghost:focus { background: var(--sp-brand-soft); color: var(--sp-brand); } .sp-btn-coral { background: var(--sp-coral); } .sp-btn-coral:hover, .sp-btn-coral:focus { background: #A93B33; } .sp-btn-sm { font-size: 13px; padding: 7px 12px; } .sp-btn[disabled], .sp-btn.sp-off { background: var(--sp-line); color: var(--sp-muted); cursor: not-allowed; border-color: var(--sp-line-strong); } .sp-root a:focus-visible, .sp-root button:focus-visible { outline: 2px solid var(--sp-brand); outline-offset: 2px; } .sp-why { font-size: 12.5px; color: var(--sp-coral); margin: 8px 0 0; } /* ---------- class switcher ----------------------------------------------- */ .sp-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; } .sp-switch a { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--sp-ink-soft); background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 20px; padding: 7px 15px; } .sp-switch a:hover, .sp-switch a:focus { border-color: var(--sp-brand-mid); color: var(--sp-brand); } .sp-switch a.sp-on { background: var(--sp-brand); border-color: var(--sp-brand); color: #fff; } /* ---------- week table --------------------------------------------------- */ .sp-tablewrap { overflow-x: auto; } .sp-table { border-collapse: collapse; width: 100%; font-size: 14px; } .sp-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sp-muted); padding: 9px 12px 9px 0; border-bottom: 1px solid var(--sp-line-strong); white-space: nowrap; } .sp-table td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--sp-line); vertical-align: middle; } .sp-table tr:last-child td { border-bottom: 0; } .sp-table td .sp-btn { margin: 2px 6px 2px 0; } .sp-sub2 { display: block; font-size: 11.5px; color: var(--sp-muted); margin-top: 2px; } /* Only for short, atomic sub-labels such as a week's date range - a range split across two lines ("30 Aug -" / "5 Sep") reads as broken. NOT on sp-sub2 itself: it also carries the homework status, which is a sentence and must be free to wrap. */ .sp-sub2.sp-nowrap { white-space: nowrap; } .sp-dash { color: var(--sp-muted); font-size: 13px; } /* On a phone the table becomes one block per week, each cell labelled. */ @media (max-width: 700px) { .sp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .sp-table, .sp-table tbody, .sp-table tr, .sp-table td { display: block; width: 100%; } .sp-table tr { border: 1px solid var(--sp-line); border-radius: var(--sp-radius-sm); padding: 10px 12px; margin-bottom: 10px; background: var(--sp-surface); } .sp-table tr:last-child { margin-bottom: 0; } .sp-table td { border-bottom: 0; padding: 5px 0; display: flex; align-items: baseline; gap: 12px; } .sp-table td::before { content: attr(data-label); flex: 0 0 96px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-muted); } .sp-table td:first-child::before { content: ""; flex: 0 0 0; } .sp-table td:first-child { display: block; padding-bottom: 8px; } .sp-sub2 { display: inline; margin-left: 8px; } } /* ---------- misc --------------------------------------------------------- */ /* s27e (philip 2026-09-11, option B): every pill carries a thin outline in its own text colour, so a pale pill keeps a crisp edge on any background -- notably a special course's strong band (FEB's yellow washed the pale fills out). Padding drops by the border's 1px so pills stay exactly the same size. */ .sp-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border: 1px solid currentColor; border-radius: 20px; white-space: nowrap; } .sp-pill-ok { background: var(--sp-green-soft); color: var(--sp-green); } .sp-pill-due { background: var(--sp-amber-soft); color: var(--sp-amber); } .sp-pill-late { background: var(--sp-coral-soft); color: var(--sp-coral); } .sp-pill-info { background: var(--sp-brand-soft); color: var(--sp-brand); } .sp-pill-off { background: var(--sp-line); color: var(--sp-muted); } /* A week can hold several worksheets. One is a button; several open in a dialogue. Not an inline disclosure: the table scrolls horizontally, so anything expanding in place either stretches the row or is clipped by the scroller. */ .sp-modal { /* Above the admin preview banner, which is drawn by newmalden/admin/student_portal_admin_view.php with an inline z-index:1050. That banner sits in normal flow, so on an ordinary page it pushes content down and covers nothing - but a dialogue is centred in the VIEWPORT, and at 900 its top slid underneath the banner and lost a line or two of whatever it was showing. Most visible on a phone, where the dialogue is tall enough to reach the top of the screen. A dialogue is the front-most thing on a page; this says so, and leaves room above 1050 rather than sitting one apart from it. */ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 18px; } .sp-modal[hidden] { display: none; } .sp-modal-back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(16,35,55,.45); } .sp-modal-box { position: relative; z-index: 1; background: var(--sp-surface); border-radius: var(--sp-radius); box-shadow: 0 12px 40px rgba(20,45,75,.28); width: 100%; max-width: 400px; max-height: 80vh; display: flex; flex-direction: column; } .sp-modal-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--sp-line); } .sp-modal-head h3 { margin: 0; flex: 1 1 auto; font-size: 14px; font-weight: 700; color: var(--sp-ink); } .sp-modal-x { flex: 0 0 auto; border: 0; background: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--sp-muted); padding: 0 2px; } .sp-modal-x:hover { color: var(--sp-ink); } .sp-modal-x { text-decoration: none; } .sp-modal-body { overflow-y: auto; padding: 6px 0; } /* The Schedule day dialogue. Same furniture, wider box and padded body: it holds a five-column table rather than a list of files. */ .sp-modal-wide .sp-modal-box { max-width: 640px; max-height: 86vh; } .sp-modal-wide .sp-modal-body { padding: 14px; } /* The academic week, under the date in the day dialogue's title. sp-sub2 gives it the size and the muted colour; the weight has to be taken back off it, because it is inside an h3 and would otherwise inherit bold and read as a second heading. It stays a block at every width - sp-sub2 turns inline below 700px for the week tables, where a label belongs beside its value, but here that would push a date and a week number onto one line on the narrowest screen and neither would be easy to pick out. */ .sp-modal-head h3 .sp-sub2 { font-weight: 500; } @media (max-width: 700px) { .sp-modal-head h3 .sp-sub2 { display: block; margin-left: 0; } } .sp-filelist { list-style: none; margin: 0; padding: 0; } .sp-filelist li + li { border-top: 1px solid var(--sp-line); } .sp-filelist li a { display: flex; align-items: center; gap: 9px; padding: 11px 14px; font-size: 13.5px; color: var(--sp-brand); text-decoration: none; } .sp-filelist li a:hover { background: var(--sp-brand-soft); } /* Document glyph, drawn in CSS so there is no image to go missing. */ .sp-filelist li a::before { content: ""; flex: 0 0 auto; width: 11px; height: 14px; border: 1.5px solid var(--sp-muted); border-radius: 2px; box-shadow: inset 0 -3.5px 0 -2.5px var(--sp-muted), inset 0 -7px 0 -6px var(--sp-muted); } .sp-filelist .sp-fname { flex: 1 1 auto; word-break: break-word; } .sp-filelist .sp-fext { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--sp-muted); background: var(--sp-ground); border-radius: 3px; padding: 2px 5px; } .sp-money { font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; } .sp-money-sub { font-size: 12.5px; color: var(--sp-muted); margin-top: 3px; } .sp-none { color: var(--sp-muted); font-size: 13.5px; margin: 0; } .sp-notice { font-size: 14px; color: var(--sp-ink-soft); } .sp-notice + .sp-notice { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sp-line); } .sp-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--sp-line); font-size: 12px; color: var(--sp-muted); text-align: center; } /* The changeover band. Was the amber dashed "preview" warning; now a quiet statement of which portal you are on with the way back to the other one. Deliberately NOT amber any more. Amber-and-dashed said "this is unfinished, do not rely on it", which was right while nothing linked here and is wrong the moment families are sent here on purpose. Brand-soft says "this is a notice", which is what it now is. Goes on 1 October 2026 with the function that draws it. */ /* THE CHANGEOVER BANNER, LOUDER (`philip`, 2026-08-31). It was a quiet tinted strip at 12.5px that read as a footnote, and families were missing both halves of what it says: that this is a new portal at all, and that the old one is still there. It now carries a solid brand-coloured "New" tag, says the thing in a sentence rather than a fragment, and offers the way back as a bordered control instead of an underlined word. STILL A BANNER, NOT AN ALERT. Brand blue rather than the warn or coral palette: nothing is wrong, and a family who meets a red bar on every page learns to stop reading banners. It is on every page for one month - see student_portal_switch_band() - so it has to be noticeable without being tiring. */ /* LOUDER FROM 1 SEPTEMBER 2026, and the weight went into the BAND, not the button. The two bands are doing opposite jobs: the one on the old portal is a promotion and wants people to move, this one is an escape hatch and only has to be findable by someone who wants it. Filling this button would make "Use the old portal" the most prominent control on the dashboard - outranking Join and Pay - and advertise the way out on every page for a month. So the fill deepens, the border goes to the full brand blue at 2px and the type goes up a point and a half; the button stays outlined. Deliberately NOT a literal in the token block: --sp-brand-soft is shared with .sp-nav and the hero, and deepening it there would tint half the portal. */ .sp-flag { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 14px; background: #D3E5F7; color: var(--sp-brand); border: 2px solid var(--sp-brand); border-radius: var(--sp-radius-sm); padding: 13px 15px; font-size: 15px; margin-bottom: 14px; } .sp-flag-tag { flex: 0 0 auto; background: var(--sp-brand); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 4px 9px; border-radius: 20px; } .sp-flag-say { flex: 1 1 240px; line-height: 1.45; min-width: 0; } .sp-flag-say b { color: var(--sp-ink); font-weight: 700; } /* The closing date. Upright, not italic - it is emphasis, not a title. */ .sp-flag-say em { font-style: normal; font-weight: 700; color: var(--sp-brand); } /* A control, not a word in a sentence: the way back has to be findable by someone scanning for it rather than reading. */ .sp-flag-back { flex: 0 0 auto; color: var(--sp-brand); font-weight: 700; text-decoration: none; border: 2px solid var(--sp-brand); border-radius: 22px; padding: 7px 14px; background: var(--sp-surface); white-space: nowrap; font-size: 13.5px; } .sp-flag-back:hover, .sp-flag-back:focus { background: var(--sp-brand); color: #fff; border-color: var(--sp-brand); } /* Pushed right where there is room, and full width beneath on a phone. */ @media (min-width: 560px) { .sp-flag-back { margin-left: auto; } } @media (max-width: 559px) { .sp-flag-back { flex: 1 1 100%; text-align: center; } } /* ---------- online-payment module compatibility --------------------------- The online-invoice-payment module owns the "Pay by bank" control and is the single source of truth for it, so this portal includes its partial rather than reimplementing payment logic. That partial emits Bootstrap markup, which this portal does not load. Rather than edit another module, these rules give its exact class names a look consistent with the rest of the portal. Everything is scoped under .sp-root so nothing leaks to pages that DO load Bootstrap. If the module changes its markup, only this block needs revisiting. ------------------------------------------------------------------------ */ .sp-root .row { display: block; } .sp-root .text-center{ text-align: left; } /* the portal is left-aligned */ .sp-root .col-md-8 { max-width: 100%; } .sp-root .mx-auto { margin-left: 0; margin-right: 0; } .sp-root .pb-4 { padding-bottom: 0; } .sp-root .mt-2 { margin-top: 8px; } .sp-root .mb-0 { margin-bottom: 0; } .sp-root .mb-1 { margin-bottom: 4px; } .sp-root .mb-2 { margin-bottom: 8px; } .sp-root .btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: var(--sp-brand); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; padding: 10px 16px; border-radius: var(--sp-radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap; } .sp-root .btn:hover, .sp-root .btn:focus { background: #17507F; color: #fff; } .sp-root .btn-lg { font-size: 15px; padding: 12px 20px; } .sp-root .btn[disabled] { background: var(--sp-line); color: var(--sp-muted); border-color: var(--sp-line-strong); cursor: not-allowed; } .sp-root .alert { border-radius: var(--sp-radius-sm); padding: 12px 14px; margin: 0 0 12px; border: 1px solid transparent; font-size: 14px; } .sp-root .alert-success { background: var(--sp-green-soft); border-color: var(--sp-green); color: var(--sp-green); } .sp-root .alert-info { background: var(--sp-brand-soft); border-color: var(--sp-brand-mid); color: var(--sp-brand); } .sp-root .alert-warning { background: var(--sp-amber-soft); border-color: var(--sp-amber); color: var(--sp-amber); } .sp-root .alert-danger { background: var(--sp-coral-soft); border-color: var(--sp-coral-mid); color: var(--sp-coral); } .sp-root .border { border: 1px solid var(--sp-line) !important; } .sp-root .rounded { border-radius: var(--sp-radius-sm); } .sp-root .p-3 { padding: 14px; } .sp-root .bg-light { background: var(--sp-ground); } .sp-root .lead { font-size: 15.5px; margin: 0 0 4px; } .sp-root small { font-size: 12.5px; color: var(--sp-muted); } /* ---------- upcoming sessions (dashboard) -------------------------------- */ .sp-session { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--sp-line); } .sp-session:last-child { border-bottom: 0; padding-bottom: 0; } .sp-session:first-child { padding-top: 0; } .sp-session-time { flex: 0 0 76px; font-weight: 700; font-size: 14px; color: var(--sp-brand); line-height: 1.2; } .sp-session-time span { display: block; font-weight: 500; font-size: 11.5px; color: var(--sp-muted); } .sp-session-info { flex: 1 1 auto; min-width: 0; } .sp-session-info strong { display: block; font-size: 14.5px; font-weight: 600; } .sp-session-info span { display: block; font-size: 12.5px; color: var(--sp-muted); margin-top: 1px; } /* A column, because an online row carries two controls now — the Join widget (or the pill that stands in for it) and the Resources link under it. */ .sp-session-act { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; } /* Today's lesson resource. A column so a week holding more than one worksheet stacks instead of widening the row. */ .sp-session-res { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } @media (max-width: 560px) { .sp-session-res { align-items: flex-start; } } @media (max-width: 560px) { .sp-session { flex-wrap: wrap; } .sp-session-act { flex-basis: 100%; margin-top: 6px; align-items: flex-start; } } /* ---------- previous classes accordion ----------------------------------- */ .sp-acc { border: 1px solid var(--sp-line); border-radius: var(--sp-radius-sm); margin-bottom: 8px; } .sp-acc:last-child { margin-bottom: 0; } .sp-acc > summary { cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: 14.5px; display: flex; justify-content: space-between; align-items: center; gap: 10px; list-style: none; } .sp-acc > summary::-webkit-details-marker { display: none; } .sp-acc > summary::after { content: "›"; transform: rotate(90deg); color: var(--sp-muted); font-size: 18px; line-height: 1; } .sp-acc[open] > summary::after { transform: rotate(-90deg); } .sp-acc > summary span { font-weight: 500; font-size: 12.5px; color: var(--sp-muted); margin-left: auto; margin-right: 4px; } .sp-acc > summary:hover { background: var(--sp-ground); } .sp-acc-body { padding: 0 14px 10px; } .sp-acc-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--sp-line); } .sp-acc-row > div { flex: 1 1 auto; min-width: 0; } .sp-acc-row strong { font-size: 14px; font-weight: 600; } /* ---------- materials filters -------------------------------------------- */ .sp-filters { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; } .sp-filters label { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sp-muted); } .sp-filters select { font-family: inherit; font-size: 14px; font-weight: 600; color: var(--sp-ink); background: var(--sp-surface); border: 1px solid var(--sp-line-strong); border-radius: var(--sp-radius-sm); padding: 8px 12px; cursor: pointer; } .sp-filters select:focus-visible { outline: 2px solid var(--sp-brand); outline-offset: 2px; } /* the mode label inside a subject pill */ .sp-switch a small { display: block; font-size: 10.5px; font-weight: 500; opacity: .75; margin-top: 1px; } /* --- Join button + its explanation ------------------------------------- */ /* The reason the button is off appears ON HOVER rather than being printed under every button all day. NOT the title attribute, which is what this was first built with. A native tooltip waits about a second before it appears, and a second is long enough that a parent has already moved the pointer away and concluded the button is simply dead. This is drawn by the page, so it appears on the first frame. .sp-joinnote below it is a different thing: the one note that has to be readable WITHOUT hovering, because a phone has no hover. Only a locked account uses it, and it is empty the rest of the time - hence :empty. */ .sp-join { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .sp-joinnote { font-size: 11px; color: var(--sp-muted); line-height: 1.3; text-align: right; max-width: 190px; } .sp-joinnote:empty { display: none; } /* The disabled Join button must not take the pointer. Two reasons, and both are the point of this block: a disabled button swallows hover, so the wrapper would never light the note; and it draws the "no entry" cursor, which tells a parent the thing is broken at the exact moment we are trying to tell them it is merely waiting. With pointer-events off, the wrapper answers for it. */ .sp-join .sp-btn[disabled], .sp-join .sp-btn.sp-off { pointer-events: none; } .sp-join, .sp-join form { cursor: default; } .sp-jointip { position: absolute; top: 100%; right: 0; margin-top: 6px; z-index: 30; background: var(--sp-ink); color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.35; padding: 6px 9px; border-radius: var(--sp-radius-sm); /* WIDTH IS max-content, and that is not decoration. An absolutely positioned box with right:0 gets its available width from its containing block, and the containing block here is .sp-join - which is only as wide as a Join button. Left to shrink-to-fit inside that, the note came out one word per line. max-content makes it as wide as its own text instead, and the max-width caps it so it wraps like a sentence rather than a ribbon. The second max-width keeps it on screen on a narrow phone; a browser too old for min() ignores the line and keeps the 210px above it. */ width: max-content; max-width: 210px; max-width: min(210px, calc(100vw - 32px)); text-align: left; /* opacity rather than display or visibility, so the text stays in the accessibility tree and a screen reader still reads the reason out - which is what the always-visible line used to do for it. */ /* No transition. The whole point of replacing the title attribute was that waiting to be told is what made the button read as broken, and a fade is just a shorter wait. */ opacity: 0; pointer-events: none; } .sp-jointip:empty { display: none; } /* Guarded on a real pointer. A tap on a touch screen leaves :hover stuck on the tapped element in several mobile browsers, which would pin the tip open over the row below it with no way to dismiss it - which is also why a tap opens it through a class instead, set and cleared by the poller. */ @media (hover: hover) { .sp-join:hover .sp-jointip { opacity: 1; } } .sp-join:focus-within .sp-jointip { opacity: 1; } /* Tapped open. A phone has no hover, so without this the reason the button is off is unreadable on the device most families use. */ .sp-join.sp-tip-on .sp-jointip { opacity: 1; } @media (max-width: 640px) { .sp-join { align-items: flex-start; } .sp-joinnote { text-align: left; max-width: none; } /* No hover on a touch screen, so the tip can never be summoned. Left in the markup for the accessibility tree, taken out of the layout. */ .sp-jointip { left: 0; right: auto; } } /* DEAD FOR NOW, KEPT ON PURPOSE. Schedule used to nest the same widget inside a class row's action column next to the My Work button, and on a narrow screen that sibling stretched to the full width so this one had to as well. The class list has left Schedule and nothing renders .sp-cr-act any more, but these three rules are the whole of what a class row needs from the Join widget - deleting them and rediscovering the sizing problem is the expensive half. Removable once it is settled that class cards are not coming back. (.sp-cr-meta is NOT dead: billing.php still uses it.) */ @media (max-width: 767px) { .sp-cr-act .sp-join { flex: 1 1 auto; align-items: stretch; } .sp-cr-act .sp-join .sp-btn { width: 100%; } .sp-cr-act .sp-joinnote { text-align: left; max-width: none; } } /* --- Homework that is open for submission ------------------------------- */ .sp-duelist { display: flex; flex-direction: column; } .sp-due { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--sp-line); } .sp-due:first-child { padding-top: 0; } .sp-due:last-child { border-bottom: 0; padding-bottom: 0; } .sp-due-what { flex: 1 1 auto; min-width: 0; } .sp-due-what strong { display: block; font-size: 14.5px; font-weight: 600; } .sp-due-what > span { display: block; font-size: 12.5px; color: var(--sp-muted); margin-top: 1px; } .sp-due-what .sp-pill { margin-top: 5px; } .sp-due-when { flex: 0 0 auto; text-align: right; } .sp-due-when strong { display: block; font-size: 13px; font-weight: 600; color: var(--sp-ink-soft); } .sp-due-when span { display: block; font-size: 11.5px; color: var(--sp-muted); } .sp-due-act { flex: 0 0 auto; } /* A RESUBMISSION IS NOT A REPLACE (luke, 2026-08-31). The row used to differ from an ordinary "you can replace it" only by a pill and a button label, so it read as an invitation rather than a request the pupil has to answer. It is now a plate of its own: coral edge, coral ground, the reason in words and a coral button. Coral is this portal's existing warning colour, so nothing new is introduced. */ .sp-due-resub { background: var(--sp-coral-soft); border-left: 4px solid var(--sp-coral); border-bottom-color: transparent; border-radius: var(--sp-radius-sm); padding: 12px 14px; margin: 6px 0; } .sp-due-resub + .sp-due { border-top: 1px solid var(--sp-line); } /* Beats .sp-due:first-child / :last-child, which strip the padding an ordinary row does not need and this one does. */ .sp-duelist .sp-due-resub:first-child { padding-top: 12px; } .sp-duelist .sp-due-resub:last-child { padding-bottom: 12px; } .sp-due-resub .sp-due-when strong { color: var(--sp-coral); } .sp-due-resub .sp-due-when span { color: var(--sp-coral); font-weight: 600; } /* The reason, in a sentence. Sits under the pill and above the fold of the row on a phone, because it is the part that tells the pupil what to do. */ .sp-due-why { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--sp-ink-soft); max-width: 56ch; } @media (max-width: 640px) { .sp-due { flex-wrap: wrap; } .sp-due-when { text-align: left; } .sp-due-act { flex-basis: 100%; } .sp-due-act .sp-btn { width: 100%; text-align: center; } } /* --- "coming soon" cards on the Progress page --------------------------- */ /* Visibly quieter than a live card, so the page reads as a promise rather than as four cards that failed to load. */ .sp-soon { background: var(--sp-ground); border-style: dashed; box-shadow: none; } /* No :has() — older iPad and Android browsers in this audience do not have it, so the card carries an explicit class instead. */ .sp-soon > h2, .sp-live > h2 { display: flex; align-items: center; gap: 8px; justify-content: flex-start; } .sp-soon > h2 .sp-pill, .sp-live > h2 .sp-pill { text-transform: none; letter-spacing: 0; } /* The "when" line under a coming-soon card. Small and quiet, but in the brand colour so it reads as a commitment rather than as more body copy. */ .sp-soon-when { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--sp-brand); } /* --- the embedded invoice ----------------------------------------------- */ /* The frame carries the real invoice's own Bootstrap, so it gets no styling here beyond filling the card and having no border of its own. Height is set by script; this is only the value before the first measurement lands. */ .sp-invoice-host { overflow: hidden; } .sp-invoice-frame { display: block; width: 100%; height: 620px; border: 0; } /* --- the Schedule calendar ----------------------------------------------- */ /* A month grid built from CSS grid rather than a table: every row is one Sunday-to-Saturday academic week, with the week number in a narrow gutter to the left. See schedule.php for why the week starts on Sunday. */ /* The month title is NOT a direct child of .sp-card, so `.sp-card > h2` never reached it and it fell back to the browser's default 24px bold. At that size "September 2026" plus the three buttons was wider than a handset, and flex-wrap put the buttons on a second row - but only for the long month names, so the header jumped for September, November and December and stayed put for the rest. Sized explicitly, and never allowed to wrap. */ .sp-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; } .sp-cal-title { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.2; white-space: nowrap; } .sp-cal-mshort { display: none; } .sp-cal-nav { flex: 0 0 auto; } .sp-cal-nav { display: flex; gap: 6px; } /* The grid can be wider than a phone. It scrolls inside its own box rather than making the whole page scroll sideways. */ .sp-caltable { overflow-x: auto; margin-top: 14px; -webkit-overflow-scrolling: touch; } .sp-cal { /* The week-number gutter, as a variable because the holiday bars are placed with calc() against it. Hard-coding 34px in both places meant narrowing the gutter for a phone silently slid every bar off its days. */ --sp-gut: 34px; min-width: 640px; border: 1px solid var(--sp-line); border-radius: 10px; overflow: hidden; } /* minmax(0, 1fr), NOT 1fr. Each row is its own grid, and a bare 1fr means minmax(auto, 1fr) - the auto floor is the column's min-content, which a nowrap chip inflates. One long subject name in one cell therefore widened that column and narrowed the other six IN THAT ROW ONLY, so the row stopped lining up with the rest of the month. Measured on live: six rows at 143.7px per column and the seventh at 132.1px with Saturday at 213.3px. A zero floor lets the chip ellipsis do its job instead. */ .sp-cal-row { display: grid; grid-template-columns: var(--sp-gut) repeat(7, minmax(0, 1fr)); position: relative; } .sp-cal-row + .sp-cal-row { border-top: 1px solid var(--sp-line); } .sp-cal-wk { display: flex; align-items: center; justify-content: center; background: var(--sp-ground); color: var(--sp-muted); font-size: 11.5px; font-weight: 700; border-right: 1px solid var(--sp-line); } .sp-cal-dow { background: var(--sp-ground); } .sp-cal-dow .sp-cal-cell { padding: 7px 6px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--sp-muted); text-transform: uppercase; letter-spacing: .05em; min-height: 0; } .sp-cal-dow abbr { text-decoration: none; border: 0; } .sp-cal-cell { min-height: 92px; border-left: 1px solid var(--sp-line); } .sp-cal-cell:first-child { border-left: 0; } /* The whole cell is the target, so a tap anywhere on the day opens it. */ .sp-cal-day { display: block; height: 100%; padding: 5px 5px 7px; text-decoration: none; color: inherit; } .sp-cal-day:hover { background: var(--sp-ground); } .sp-cal-num { display: block; font-size: 12.5px; font-weight: 700; color: var(--sp-ink-soft); margin-bottom: 3px; } /* Days from the neighbouring months stay visible - a week is easier to read whole - but recede so the month in view is obvious. */ .sp-cal-out { background: #FAFCFE; } .sp-cal-out .sp-cal-num { color: var(--sp-muted); font-weight: 400; } .sp-cal-closed { background: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(107,126,147,.07) 5px, rgba(107,126,147,.07) 10px); } /* A holiday course, drawn as a bar over the days it actually covers. Absolutely placed rather than given grid columns of its own: a grid item that claims columns pushes the day cells out of row 1, and the cells must keep their places. The gutter is a fixed 34px and the seven days share the rest, so left/width in calc() land exactly on the day boundaries at any width. pointer-events: none so the day underneath stays clickable. */ .sp-cal-hol { position: absolute; z-index: 3; pointer-events: none; padding: 2px 8px; border-radius: 999px; background: var(--sp-brand); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; top: calc(26px + var(--sp-bar-i, 0) * 21px); } /* Room for the bars between the date and the first lesson, in EVERY cell of the row - including the days the bar does not cover - so the lessons across a row stay on one line. --sp-bars is set on the row by the page. */ .sp-cal-row-hol .sp-cal-num { margin-bottom: calc(5px + var(--sp-bars, 1) * 21px); } .sp-cal-today .sp-cal-num { color: var(--sp-brand); } .sp-cal-today .sp-cal-num::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--sp-brand); margin-left: 4px; vertical-align: middle; } .sp-cal-sel { box-shadow: inset 0 0 0 2px var(--sp-brand); } .sp-cal-tag { display: block; font-size: 10.5px; color: var(--sp-muted); margin-bottom: 3px; } /* One chip per session. Kept to a single line so a busy day stays readable; the day panel below carries the full detail. */ .sp-chip { display: block; font-size: 11px; line-height: 1.35; padding: 2px 5px; margin-bottom: 3px; border-radius: 5px; background: rgba(43,90,160,.09); color: var(--sp-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-chip b { font-weight: 700; } .sp-chip-off { background: var(--sp-line); color: var(--sp-muted); text-decoration: line-through; } /* Moving month swaps this region's contents rather than reloading. The old month leaves towards the direction of travel and the new one arrives from the far side, which is what makes it read as movement rather than a flicker. */ .sp-cal-region { transition: opacity .13s ease, transform .13s ease; } .sp-cal-region.sp-cal-leaving { opacity: 0; transform: translateX(var(--sp-dir, 0px)); } .sp-cal-region.sp-cal-entering { opacity: 0; transform: translateX(calc(var(--sp-dir, 0px) * -1)); transition: none; } @media (prefers-reduced-motion: reduce) { .sp-cal-region, .sp-cal-region.sp-cal-leaving, .sp-cal-region.sp-cal-entering { transition: none; transform: none; } } .sp-sect { margin: 6px 0 -4px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sp-muted); } .sp-cal-key { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; } .sp-cal-key .sp-chip { display: inline-block; margin: 0; } /* ---------- the calendar on a phone -------------------------------------- A 640px grid inside a sideways scroller is not something anyone can read on a handset: two thirds of the month is off-screen and the lesson names are too narrow to finish a word. Below 560px it becomes what every phone calendar is - a compact month that fits the screen, one dot per lesson instead of its name, and the day itself opening for the detail. Nothing is lost by dropping to dots. The names were unreadable at this width anyway, and the day dialogue already lists every lesson in full with its time, room and tutor. */ @media (max-width: 560px) { .sp-cal-nav .sp-btn span { display: none; } /* arrows only on a phone */ /* "Sep 2026" rather than "September 2026". Even at 17px the long spelling plus the buttons overruns a 320px handset, and an abbreviated month is what every phone calendar shows anyway. */ .sp-cal-head { gap: 8px; } .sp-cal-title { font-size: 17px; } .sp-cal-mlong { display: none; } .sp-cal-mshort { display: inline; } .sp-caltable { overflow-x: visible; } .sp-cal { min-width: 0; --sp-gut: 19px; } .sp-cal-cell { min-height: 54px; } .sp-cal-day { padding: 4px 1px 5px; text-align: center; } /* A fixed height on EVERY number, not just today's, so the circle below can exist without pushing that one cell's lessons out of line with the row. */ .sp-cal-num { font-size: 12.5px; height: 22px; line-height: 22px; margin-bottom: 3px; } .sp-cal-wk { font-size: 9px; } /* Today is a filled circle round the date, the way every phone calendar marks it. The laptop's small dot beside the number is dropped here: next to the lesson dots it read as a fourth lesson. */ .sp-cal-today .sp-cal-num::after { display: none; } .sp-cal-today .sp-cal-num { width: 22px; border-radius: 50%; margin-left: auto; margin-right: auto; background: var(--sp-brand); color: #fff; } .sp-cal-dow .sp-cal-cell { padding: 6px 0; font-size: 9.5px; letter-spacing: .02em; } .sp-cal-tag { display: none; } /* the hatched background already says it */ /* One dot per lesson. font-size 0 collapses the time and subject inside the chip without hiding the element, so the dot keeps the chip's own colour and its title attribute still works on a long press. */ .sp-cal-day .sp-chip { display: inline-block; vertical-align: middle; width: 6px; height: 6px; min-width: 0; max-width: none; margin: 1px; padding: 0; border-radius: 50%; background: var(--sp-brand-mid); color: transparent; font-size: 0; line-height: 0; overflow: hidden; } .sp-cal-day .sp-chip-off { background: var(--sp-muted); } .sp-cal-hol { font-size: 9px; padding: 0 5px; line-height: 1.65; top: calc(28px + var(--sp-bar-i, 0) * 17px); } .sp-cal-row-hol .sp-cal-num { margin-bottom: calc(3px + var(--sp-bars, 1) * 19px); } /* The key has to speak the same language as the grid, so it shows the dots rather than the chips the grid no longer draws. */ .sp-cal-key { gap: 14px; } .sp-cal-key .sp-chip { background: none; padding: 0; font-size: 11px; color: var(--sp-ink-soft); text-decoration: none; } .sp-cal-key .sp-chip::before { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; background: var(--sp-brand-mid); } .sp-cal-key .sp-chip-off::before { background: var(--sp-muted); } } /* --- absence requests on the Schedule calendar ---------------------------- */ /* Requested but not yet confirmed by the office: deliberately NOT struck through. Only a logged absence gets that, because struck through reads as "settled" and a request is not settled until someone acts on it. */ /* A tickable lesson. The chip IS the label, so the whole thing is a target - a 11px checkbox on a phone is not. */ /* ---------- Special Courses ---------------------------------------------- The landing page at /students/special_courses.php and its confirmation view. Added by the special-course-bookings feature's sub-stage s24; see that page's own docblock for why it lives in this module rather than in that one. Only two components are new — a course card and a booking tile. Everything else on the page is this file's existing vocabulary (.sp-card, .sp-grid, .sp-pill, .sp-chip, .sp-btn, .sp-sect, .sp-alert, .sp-table), untouched. PER-COURSE COLOUR. Each card carries three custom properties set inline by the page: --c-strong, --c-soft and --c-ink. They come from special_course_bookings_email_palette(), the same lookup that paints the booking form and the confirmation email, so one course looks like itself across all three. NO HEX FROM THAT TABLE APPEARS IN THIS FILE, and none may be added: a new course colour is a one-line change in that one function. --c-ink is the text colour that palette specifies for its own strong colour, so the Book button is never given a white that the palette did not ask for. -------------------------------------------------------------------------- */ .sp-sc-course, .sp-sc-booked { padding: 0; /* the band is flush to the card edge */ overflow: hidden; /* so the band's corners follow the card's radius */ /* The grid stretches the WRAPPER, not the card inside it. Without this a course with one venue stops short of one with two, and their Book buttons land at different heights in the same row. */ height: 100%; } .sp-sc-booked { text-decoration: none; color: inherit; transition: box-shadow .13s ease, transform .13s ease; } .sp-sc-booked:hover { box-shadow: 0 2px 4px rgba(20,45,75,.07), 0 10px 24px rgba(20,45,75,.09); transform: translateY(-1px); } .sp-sc-booked:focus-visible { outline: 3px solid var(--c-strong); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .sp-sc-booked { transition: none; } .sp-sc-booked:hover { transform: none; } } /* the name band ----------------------------------------------------------- s27e (special-course-bookings decision 27, philip 2026-09-11): the band is the course's STRONG colour with the palette's own ink as text, the same pairing as the confirmation email's hero and label bars and the booking wizard's card heads. It used to be the pale soft colour, so one course looked like two different colours depending on where a parent saw it. The strong bottom rule is REMOVED rather than recoloured: it now matched the band itself, and the card's own --sp-line border already edges it. A status pill in the band keeps its own opaque pale background, so its text never depends on the course colour behind it. */ .sp-sc-band { background: var(--c-strong); padding: 12px 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .sp-sc-band-name { font-size: 15.5px; font-weight: 700; color: var(--c-ink); } /* Full ink, no opacity: fading it would push the dates on the lighter courses (OCT, EIC, SIC) even further below the ink-on-strong contrast luke accepted in s23 D3. Size and weight already make it the quieter line. */ .sp-sc-band-when { font-size: 12.5px; font-weight: 600; color: var(--c-ink); white-space: nowrap; } /* A status pill is a box, not a line of text, so it centres rather than sitting on the name's baseline. */ .sp-sc-band-tile { align-items: center; } /* course card ------------------------------------------------------------- */ .sp-sc-body { padding: 14px 16px 16px; } .sp-sc-blurb { margin: 14px 16px 0; font-size: 14px; color: var(--sp-ink-soft); line-height: 1.55; } .sp-sc-venues { margin: 12px 16px 0; display: flex; flex-direction: column; } .sp-sc-venue { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--sp-line); font-size: 13.5px; } .sp-sc-venue b { display: block; font-weight: 600; color: var(--sp-ink); } .sp-sc-venue span { font-size: 12.5px; color: var(--sp-muted); } .sp-sc-venue em { font-style: normal; font-weight: 700; color: var(--sp-ink); white-space: nowrap; font-variant-numeric: tabular-nums; } /* `margin-top: auto` is what pins the button to the foot of a stretched card, so two cards of different content depth still line their buttons up. */ .sp-sc-act { margin: auto 16px 0; padding: 14px 0 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .sp-sc-book { background: var(--c-strong); color: var(--c-ink); border-color: var(--c-strong); } /* A flat dark overlay darkens any accent without this file needing to know what colour it is; opacity would read as the button switching off on the lighter courses. */ .sp-sc-book:hover { background-image: linear-gradient(rgba(0,0,0,.13), rgba(0,0,0,.13)); } .sp-sc-dep { font-size: 12.5px; color: var(--sp-muted); } /* booking reference ------------------------------------------------------- */ .sp-sc-ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 700; color: var(--sp-ink); } .sp-sc-sect2 { margin-top: 24px; } /* A grid ITEM is not a grid, so two panels stacked inside one column sit flush against each other. This gives that column the same rhythm .sp-grid gives the page. */ .sp-sc-side { display: flex; flex-direction: column; gap: var(--sp-gap); } /* ---------- Enrolment booking ------------------------------------------- The class picker at /students/enrolment_booking.php. students/new_academic_year_booking_2026.php keeps booking_NAY.css and is untouched -- it stays live as the old portal's backstop through September. THIS IS A PORT, not a redesign. The layout, the two-step wizard, the collapsed cards, the date pills, the fixed bottom bar and the selection sheet are all the current picker's own reskin layer, brought across so the experience is preserved by construction rather than by re-derivation (`philip`, 2026-08-28: keep the experience the same). What changed in the crossing is the palette: its base variables are mapped onto this file's --sp-* tokens, so the picker wears the portal's blue inside the portal's header. THE TEN SUBJECT HUES ARE CARRIED OVER UNTOUCHED -- they are categorical, they are what a family reads the timetable by, and they are the same hues the current page uses. Class names are load-bearing here in a way they are not elsewhere in this file: .title, .span, .checkbox and the subject keys are what the page's script looks for. Renaming one breaks a behaviour, not a style. -------------------------------------------------------------------------- */ .sp-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .sp-root { /* Mapped from the current picker's own names, left in the comments so the two can be compared line for line. */ --n-surface: var(--sp-surface); /* --surface #ffffff */ --n-surface-2: var(--sp-ground); /* --surface-2 #f5f7fb */ --n-ink: var(--sp-ink); /* --ink #16202e */ --n-ink-2: var(--sp-ink-soft); /* --ink-2 #3d4a5c */ --n-muted: var(--sp-muted); /* --ink-muted #67758c */ --n-line: var(--sp-line); /* --line #dde3ec */ --n-line-2: var(--sp-line-strong); /* --line-strong #ccd5e1 */ --n-accent: var(--sp-brand); /* --accent #2f6bd4 -> portal blue */ --n-accent-2: #17507F; /* --accent-strong, the portal's own hover */ --n-accent-sf: var(--sp-brand-soft); /* --accent-soft */ --n-accent-ink:#FFFFFF; --n-good: #2c9c68; --n-good-sf: #e4f4ec; --n-warn: #c9861c; --n-warn-sf: #fbefd9; /* Categorical subject hues -- carried over exactly. */ --s-Maths:#e0348c; --s-English:#2563eb; --s-Science:#16a34a; --s-ProblemSolving:#f5811f; --s-Literacy:#8b3fc9; --s-VRandNVR:#0ea5c4; --s-CreativeandEssayWriting:#d62828; --s-ReadingComprehension:#c99700; --s-EssayWriting:#4338ca; --s-WritingSkillsandReadingComprehension:#0d8a6e; } /* Clear the fixed bar at every width. */ .sp-root { padding-bottom: 78px; } /* ---- step 1: centre and subjects ---------------------------------------- */ .nay26-h2 { margin-top: 22px; } .nay26-hint { margin: 6px 0 0; } .nay26-compare { margin: 12px 0 0; font-size: 13.5px; color: var(--n-ink-2); line-height: 1.6; } .nay26-centres { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .nay26-centre { font: inherit; text-align: left; cursor: pointer; padding: 12px 14px; min-height: 48px; border: 1.5px solid var(--n-line); border-radius: var(--sp-radius-sm); background: var(--n-surface); color: var(--n-ink); } .nay26-centre b { display: block; font-size: 14.5px; font-weight: 700; } .nay26-centre span { display: block; font-size: 12.5px; color: var(--n-muted); margin-top: 2px; } .nay26-centre:hover { border-color: var(--n-line-2); } .nay26-centre.is-active { border-color: var(--n-accent); background: var(--n-accent); } .nay26-centre.is-active b, .nay26-centre.is-active span { color: var(--n-accent-ink); } /* The tick the current page puts on the chosen centre. */ .nay26-centre.is-active b::before { content: "\2713\00a0\00a0"; font-weight: 800; } .nay26-centre:focus-visible { outline: 3px solid var(--n-accent); outline-offset: 2px; } /* A CENTRE WITH NOTHING FOR THIS PUPIL'S YEAR. Selected on [disabled] and not on a class, because paintCentre() rebuilds this button's className from scratch on every repaint and would wipe a class the first time anything was clicked. FADED, NOT HIDDEN. Removing the box would leave a family wondering whether we teach at Sutton at all; leaving it visible and plainly off answers "not for your year" instead. The hover lift is cancelled too - a box that lights up under the cursor and then refuses the click reads as a fault. The note keeps full contrast while the rest of the box drops to 55%: it is the one thing on a disabled box worth reading, and dimming the reason along with everything else is how you end up with an explanation nobody can see. */ .nay26-centre[disabled] { cursor: not-allowed; opacity: .55; background: var(--n-surface-2); border-style: dashed; } .nay26-centre[disabled]:hover { border-color: var(--n-line); } .nay26-centre[disabled] .nay26-centre-none { opacity: 1; font-weight: 600; color: var(--n-ink-2); } /* A subject pill, with its own colour as a dot -- the same colour its classes carry on the timetable, so the two are read as one system. */ .nay26-subjects { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; } .nay26-subj { display: inline-flex; align-items: center; cursor: pointer; padding: 10px 14px; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--n-line); background: var(--n-surface); font-size: 13.5px; font-weight: 600; color: var(--n-ink-2); } .nay26-subj input { position: absolute; opacity: 0; width: 1px; height: 1px; } .nay26-subj span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sc, var(--n-accent)); margin-right: 8px; vertical-align: middle; } .nay26-subj:hover { border-color: var(--n-line-2); } /* .is-on is set by the page's script; :has() is kept alongside it so the state is also correct for the instant before the script runs. */ .nay26-subj.is-on, .nay26-subj:has(input:checked) { border-color: var(--n-accent); background: var(--n-accent-sf); color: var(--n-accent); } .nay26-subj:focus-within { outline: 3px solid var(--n-accent); outline-offset: 2px; } .nay26-subj.Maths { --sc: var(--s-Maths); } .nay26-subj.English { --sc: var(--s-English); } .nay26-subj.Science { --sc: var(--s-Science); } .nay26-subj.ProblemSolving { --sc: var(--s-ProblemSolving); } .nay26-subj.Literacy { --sc: var(--s-Literacy); } .nay26-subj.VRandNVR { --sc: var(--s-VRandNVR); } .nay26-subj.CreativeandEssayWriting { --sc: var(--s-CreativeandEssayWriting); } .nay26-subj.ReadingComprehension { --sc: var(--s-ReadingComprehension); } .nay26-subj.EssayWriting { --sc: var(--s-EssayWriting); } .nay26-subj.WritingSkillsandReadingComprehension { --sc: var(--s-WritingSkillsandReadingComprehension); } /* ---- step 2: the timetable ---------------------------------------------- */ .nay26-daytabs { display: none; } .nay26-scrollhint { margin: 10px 0 0; } .nay26-gridwrap { margin-top: 10px; } /* table-layout:fixed is what guarantees the columns. Without it a browser sizes each one to its content, so a day with a long tutor name steals width from the rest and the whole grid shifts every time the filters change. With it, the time column is a fixed 68px and the six days split what is left -- equal, stable, and unable to overflow. */ .nay26-grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; } .nay26-grid th, .nay26-grid td { border-bottom: 1px solid var(--n-line); padding: 4px; vertical-align: top; text-align: left; } .nay26-corner { width: 68px; } .table-content { background: var(--n-surface-2); color: var(--n-ink-2); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; text-align: center; } .table-col-1 { width: 68px; background: var(--n-surface-2); color: var(--n-ink-2); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; border-right: 1px solid var(--n-line); font-size: .78rem; } /* ---- one class ---------------------------------------------------------- */ /* The 4px left edge IS the subject colour. It is the fastest thing to read on a dense grid and the only cue that survives at a glance. */ .title { color: var(--n-ink); background: var(--n-surface); text-align: center; border: 1.5px solid var(--n-line); border-left: 4px solid var(--sc, var(--n-accent)); border-radius: var(--sp-radius-sm); padding: 6px 8px; margin: 3px 0; box-shadow: var(--sp-shadow); transition: box-shadow .16s, border-color .16s; /* min-width is gone: inside a fixed-layout column it would be the one thing able to force the table wider than its container. */ overflow-wrap: anywhere; } .title:hover { box-shadow: 0 2px 4px rgba(20,45,75,.07), 0 10px 24px rgba(20,45,75,.09); } /* Title and subtitle, not two paragraphs. The tutor sits directly under the subject on its own line with a hair of separation. */ .title strong { display: block; color: var(--n-ink); font-weight: 700; font-size: .84rem; line-height: 1.2; } .title span.nay26-tutor { display: block; margin-top: 0; color: var(--n-ink-2); font-weight: 500; font-size: .72rem; line-height: 1.25; } .title.Maths, .title.Mathswaiting { --sc: var(--s-Maths); } .title.English, .title.Englishwaiting { --sc: var(--s-English); } .title.Science, .title.Sciencewaiting { --sc: var(--s-Science); } .title.ProblemSolving, .title.ProblemSolvingwaiting { --sc: var(--s-ProblemSolving); } .title.Literacy, .title.Literacywaiting { --sc: var(--s-Literacy); } .title.VRandNVR, .title.VRandNVRwaiting { --sc: var(--s-VRandNVR); } .title.CreativeandEssayWriting, .title.CreativeandEssayWritingwaiting { --sc: var(--s-CreativeandEssayWriting); } .title.ReadingComprehension, .title.ReadingComprehensionwaiting { --sc: var(--s-ReadingComprehension); } .title.EssayWriting, .title.EssayWritingwaiting { --sc: var(--s-EssayWriting); } .title.WritingSkillsandReadingComprehension, .title.WritingSkillsandReadingComprehensionwaiting { --sc: var(--s-WritingSkillsandReadingComprehension); } /* The native checkbox is hidden -- the date pills ARE the control. */ .title input.checkbox { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .title label { margin: 0; display: inline; } .title .span { display: inline-block; cursor: pointer; border: 1.5px solid var(--n-line); border-radius: 8px; padding: 6px 12px; margin: 4px 5px 0 0; font-size: .8rem; font-weight: 600; color: var(--n-ink-2); font-variant-numeric: tabular-nums; transition: border-color .14s, background .14s, color .14s; } .title .span:hover { border-color: var(--n-line-2); } .title .span.nay26-pill-on { border-color: var(--n-accent); background: var(--n-accent); color: var(--n-accent-ink); } /* NO "Available" BADGE (`philip`, 2026-08-28). It was drawn by CSS on every card that was not full, so it appeared on the large majority of them and distinguished nothing -- while costing 32px of height on each. Available is the default state and is now simply the absence of a badge. Only the exception is labelled. */ .fully_booked_classes span.nay26-fullwl { display: inline-block; color: #7a4d00; background: var(--n-warn-sf); font-weight: 650; font-size: .66rem; padding: 1px 6px; border-radius: 6px; margin-top: 2px; line-height: 1.4; } /* The tutor and the badge share a line. On its own row the badge repeated the same fault as the subject/tutor gap -- a third stacked line on the tallest cards in the grid, and rows are sized by their tallest card. */ .fully_booked_classes span.nay26-tutor { display: inline; } .fully_booked_classes span.nay26-tutor::after { content: " "; } .title.nay26-sel { border-color: var(--n-accent); box-shadow: 0 0 0 2px var(--n-accent), var(--sp-shadow); } /* Collapse and expand. An available card shows subject and tutor only; picking it reveals the start dates below, and because the group re-centres as they grow the name lifts -- which is the whole motion. */ .title:not(.fully_booked_classes) { display: flex; flex-direction: column; justify-content: center; min-height: 42px; } .title:not(.fully_booked_classes):not(.nay26-sel) { cursor: pointer; } .nay26-dates { overflow: hidden; max-height: 0; opacity: 0; padding: 0; text-align: center; transition: max-height .26s ease, opacity .18s ease, padding .26s ease; } .nay26-datetitle { font-size: .66rem; font-weight: 700; color: var(--n-ink-2); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; } .title.nay26-sel .nay26-dates { max-height: 320px; opacity: 1; padding: 6px 8px; margin-top: 5px; background: var(--n-surface-2); border: 1px solid var(--n-line); border-radius: var(--sp-radius-sm); } /* THE DATES SIT IN A ROW. Each start date is its own