/* Brentwood Timetable — weekly grid + Academic Block Rotation (Phase 1, static). * Mirrors brentwood.ca/why-brentwood/unique-timetable: days are columns; blocks * stack on a shared time axis (height ∝ duration), vivid category colours, white * bold labels, a chevron affordance, and a grey track showing time gaps. Colours * come from inline styles set by render.php. Self-contained. */ /* Match the live site's typography exactly: headings in Oswald (light/300), * body + block labels in Open Sans. */ @import url( "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Oswald:wght@300;400&display=swap" ); .bw-tt, .bw-tt * { box-sizing: border-box; } /* Base font for the whole block — Open Sans, like the live . */ .bw-tt { font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, sans-serif; } /* Horizontal scroll on narrow screens keeps the grid aligned. */ .bw-tt { max-width: 100%; } .bw-tt__scroll { width: 100%; max-width: 100%; overflow-x: auto; /* Hover "moat". Blocks lift/slide on hover (translateX(4px) scale(1.01)) and * the track is overflow:visible so that lift can show. But overflow-x:auto * here forces overflow-y to compute to auto as well, so a card at the bottom * edge (scale grows it a few px down) spawned a phantom VERTICAL scrollbar, * and a card in the right-most column (translateX pushes it out) spawned an * extra HORIZONTAL one. This padding gives the transform room to expand into * WITHOUT crossing the scrollport's padding edge, so no scrollable overflow * is added. Bottom is roomier so the drop-shadow of the last row isn't clipped. */ padding: 8px 14px 24px; } .bw-tt__grid { display: flex; gap: 6px; min-width: 820px; /* below this, scroll horizontally */ align-items: stretch; } .bw-tt__day { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; } /* White header cell with a grey bottom border — matches the live * .timetable-day-name { bg-white border-gray-300 } + border-b-2. */ .bw-tt__day-name { text-align: center; font-weight: 600; font-size: 0.82rem; color: #374151; background: #fff; border-bottom: 2px solid #d1d5db; padding: 6px 8px; border-top-left-radius: 6px; border-top-right-radius: 6px; white-space: nowrap; } /* Grey track behind the blocks — time gaps and the empty tail show through it. * Blocks are absolutely positioned within it (by true time), so the track height * is set inline by render.php to the full time axis. */ .bw-tt__track { position: relative; background: #eceef0; border-radius: 6px; overflow: visible; /* blocks must be free to lift/slide on hover; each block clips its own bg photo */ } /* Each block: colour bar with centred white label + a chevron on the right. */ .bw-tt__block { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 16px; border-radius: 0; /* blocks are square on the live site */ overflow: hidden; text-align: center; line-height: 1.15; color: #fff; } .bw-tt__block-name { font-size: 0.82rem; font-weight: 600; /* live block labels are font-semibold */ } .bw-tt__block-time { font-size: 0.72rem; font-weight: 600; opacity: 0.9; white-space: nowrap; } .bw-tt__chev { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; fill: #fff; opacity: 0.9; } /* Thin blocks (Break, Advisor, Tutorial…): name + time on one line. */ .bw-tt__block--short { flex-direction: row; gap: 6px; padding-top: 2px; padding-bottom: 2px; } .bw-tt__block--short .bw-tt__block-name { font-size: 0.76rem; } .bw-tt__block--short .bw-tt__block-time { font-size: 0.7rem; font-weight: 500; } /* ── Academic Block Rotation ───────────────────────────────────────────────── * A leading label column + one per academic day. */ .bw-tt-rot { margin-top: 1.5rem; } .bw-tt-rot__title { margin: 0 0 0.5rem; font-family: "Oswald", "Open Sans", sans-serif; font-weight: 300; font-size: 1.25rem; color: #4b5563; text-align: center; } .bw-tt-rot__grid { display: grid; grid-template-columns: minmax(64px, 1fr) repeat(calc(var(--bw-tt-rot-cols, 7) - 1), 1fr); gap: 4px; } .bw-tt-rot__cell { display: flex; align-items: center; justify-content: center; padding: 6px 4px; font-size: 0.85rem; border-radius: 3px; text-align: center; } .bw-tt-rot__head { font-weight: 600; color: #374151; } .bw-tt-rot__rowhead { justify-content: flex-start; } .bw-tt-rot__corner { background: transparent; } .bw-tt-rot__block { font-weight: 700; color: #fff; } @media (max-width: 600px) { .bw-tt-rot__cell { font-size: 0.72rem; padding: 4px 2px; } } /* ── Click-to-filter + category content panels ─────────────────────────────── * Blocks whose category has a panel are clickable; the rest are inert. Clicking * filters the grid to that category (view.js hides the other blocks, collapses * empty day columns, repacks the rest to the top) and reveals the panel below. */ .bw-tt__block { transition: top 0.4s ease, height 0.4s ease, transform 0.25s ease, box-shadow 0.25s ease; } .bw-tt__block--clickable { cursor: pointer; } /* Hover — mirrors the live .timetable-block:hover: slide right, lift, scale up. */ .bw-tt__block--clickable:hover { transform: translateX( 4px ) scale( 1.01 ); box-shadow: 0 10px 15px -3px rgba( 0, 0, 0, 0.18 ), 0 4px 6px -4px rgba( 0, 0, 0, 0.18 ); z-index: 3; } /* When a category is open, hovering one of its (focused) blocks slides the * other way and scales down a touch — the live focused-hover behaviour. */ .bw-tt[data-open] .bw-tt__block.is-active:hover { transform: translateX( -4px ) scale( 0.99 ); } .bw-tt__chev { transition: transform 0.25s ease; z-index: 2; } /* Background photo behind a block, revealed faintly when its category is * filtered (like the live site). Label + time stay on top. */ .bw-tt__block-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.45s ease; pointer-events: none; z-index: 0; } .bw-tt[data-open] .bw-tt__block.is-active .bw-tt__block-bg { opacity: 0.25; /* live opacity-25: category colour stays dominant, white text readable */ } .bw-tt__block-name, .bw-tt__block-time { position: relative; z-index: 2; } /* Empty day columns collapse out of the grid while a category is filtered. */ .bw-tt__day--empty { display: none; } /* Active (selected-category) blocks: lift them and flip the chevron to a * "back" arrow on the left, like the live site. */ .bw-tt[data-open] .bw-tt__block.is-active { box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.28 ); z-index: 4; } .bw-tt[data-open] .bw-tt__block.is-active .bw-tt__chev { left: 6px; right: auto; transform: translateY( -50% ) rotate( 180deg ); } /* A short block that gets expanded while filtered (single-block categories like * Advisor/Tutorial/Assembly/Evening Activity) goes back to stacked name + time. */ .bw-tt[data-open] .bw-tt__block.is-active.bw-tt__block--short { flex-direction: column; gap: 1px; padding-top: 4px; padding-bottom: 4px; } /* While filtered, the remaining day columns flex to fill the available width * (live: min 115px, md max 572px) so the grid no longer stretches edge-to-edge. */ .bw-tt[data-open] .bw-tt__grid { min-width: 0; } .bw-tt[data-open] .bw-tt__day { flex: 1 1 0; min-width: 115px; max-width: 572px; } /* ── Inline categories: grid LEFT 50%, text card RIGHT 50% ─────────────────── * (Athletics, Arts, Advisor, Tutorial, Assembly, Sleep-In, Activities.) * The live site splits the row evenly: the days grid fills the left half (its * columns flex to fill) and the text card the right half. Confined to ≥782px — * on mobile the inline view stacks (grid above, text below) and the grid keeps * its normal px geometry so the blocks stay visible. */ @media ( min-width: 782px ) { .bw-tt[data-mode="inline"] { display: flex; flex-direction: row; align-items: stretch; gap: 1.5rem; } .bw-tt[data-mode="inline"] .bw-tt__scroll { order: 1; flex: 1 1 50%; min-width: 0; overflow: visible; display: flex; /* let the grid stretch to the row height */ } .bw-tt[data-mode="inline"] .bw-tt__grid { flex: 1 1 auto; } /* A day whose only visible block is the whole story (Athletics, Evening * Activity, Advisor…) lets that block grow to fill the column — so the grid * stands exactly as tall as the text card beside it (live flex-auto blocks). */ .bw-tt[data-mode="inline"] .bw-tt__day--single .bw-tt__track { flex: 1 1 auto; height: auto !important; } .bw-tt[data-mode="inline"] .bw-tt__day--single .bw-tt__block.is-active { top: 0 !important; height: 100% !important; } .bw-tt[data-mode="inline"] .bw-tt__panels { order: 2; flex: 1 1 50%; margin-top: 0; align-self: stretch; } .bw-tt[data-mode="inline"] .bw-tt__panel--inline { height: 100%; } } /* Inline panel is text-only; let the card fill the panel height. */ .bw-tt__panel--inline { display: flex; } .bw-tt__panel--inline .bw-tt__panel-text { flex: 1 1 auto; } /* ── Panels ───────────────────────────────────────────────────────────────── * Full panels: photo column beside a text card, links below (Academics also * gets the rotation table). Inline panels: text card only. * `--bw-tt-accent` is the category colour. */ .bw-tt__panels { margin-top: 1.5rem; } .bw-tt__panel { margin: 0; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.08 ); } .bw-tt__panel[hidden] { display: none; } .bw-tt__panel-row { display: flex; align-items: stretch; } /* Photo placeholder — swapped for a curated image later. */ .bw-tt__panel-media { flex: 1 1 38%; min-height: 300px; position: relative; overflow: hidden; background-color: #e5e7eb; background-image: linear-gradient( 135deg, rgba( 0, 0, 0, 0.04 ), rgba( 0, 0, 0, 0.12 ) ); } .bw-tt__panel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Text-card background tints — exact values from the live text-style-* classes. * An empty style means text-style-white (white) on the live site, so that's the * default here too. */ .bw-tt__panel-text { flex: 1 1 62%; display: flex; flex-direction: column; justify-content: center; padding: 2rem 2.25rem; background: #ffffff; } .bw-tt__panel--blue .bw-tt__panel-text { background: #e6f3fc; } .bw-tt__panel--white .bw-tt__panel-text { background: #ffffff; } .bw-tt__panel--gray .bw-tt__panel-text { background: #425566; color: #fff; } .bw-tt__panel--dark .bw-tt__panel-text { background: #1c1e1f; color: #fff; } .bw-tt__panel-title { margin: 0 0 0.85rem; font-family: "Oswald", "Open Sans", sans-serif; font-weight: 300; /* live headings are font-light */ font-style: normal; font-size: 1.5rem; /* text-2xl, like the live

/ line-height: 2rem; color: #4b5563; } .bw-ttpanel--dark .bw-ttpanel-title, .bw-ttpanel--gray .bw-ttpanel-title { color: #fff; } .bw-ttpanel-body { color: #374151; line-height: 1.65; } .bw-ttpanel--dark .bw-ttpanel-body, .bw-ttpanel--gray .bw-ttpanel-body { color: #e5e7eb; } .bw-ttpanel-body p { margin: 0 0 1rem; } .bw-ttpanel-body p:last-child { margin-bottom: 0; } .bw-ttpanel-links { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1.5rem; margin-top: 1.25rem; } / Links are always the brand red (live --primary: rgb(200,39,44)), NOT the * category colour, and have no hover change beyond the pointer cursor — exactly * like the live timetable links. / .bw-ttpanel-back { padding: 0; background: none; border: 0; cursor: pointer; font: inherit; color: rgb( 200, 39, 44 ); } .bw-ttpanel-cta { cursor: pointer; text-decoration: none; color: rgb( 200, 39, 44 ); background: transparent; box-shadow: none; } / No hover effect at all — neutralise any theme-level link hover (Kadence adds * a background colour on link hover, which we must explicitly clear). / .bw-ttpanel-back:hover, .bw-ttpanel-back:focus, .bw-ttpanel-back:active, .bw-ttpanel-cta:hover, .bw-ttpanel-cta:focus, .bw-ttpanel-cta:active { color: rgb( 200, 39, 44 ); text-decoration: none; background: transparent; box-shadow: none; } / Rotation table sits under the Academics panel. / .bw-ttpanel .bw-tt-rot { margin: 0; padding: 1.25rem 2.25rem 2rem; } / Stack the photo above the text on narrow screens (image on top). / @media (max-width: 781px) { .bw-ttpanel-row { flex-direction: column; } .bw-ttpanel-media { min-height: 200px; } / Inline categories stop sitting beside the grid — stack text below it. / .bw-tt[data-mode="inline"] { display: block; } .bw-tt[data-mode="inline"] .bw-ttpanels { margin-top: 1.5rem; } .bw-tt[data-mode="inline"] .bw-ttscroll { overflow-x: auto; } } / ── Mobile: the week grid scrolls horizontally; tighten blocks so labels read. * Narrow columns can't fit a thin block's name AND time on one line, so on the * short blocks (Break, Advisor, Tutorial, Assembly) we show the name only. / @media (max-width: 768px) { .bw-ttscroll { -webkit-overflow-scrolling: touch; } .bw-ttblock { padding: 3px 8px; } .bw-ttchev { right: 3px; width: 11px; height: 11px; } .bw-ttblock-name { font-size: 0.78rem; } .bw-ttblock--short { padding: 1px 5px; } .bw-ttblock--short .bw-ttblock-time { display: none; } .bw-ttblock--short .bw-ttblock-name { font-size: 0.74rem; line-height: 1.05; } / When a short block is expanded (filtered single view), bring its time back. */ .bw-tt[data-open] .bw-ttblock.is-active.bw-ttblock--short .bw-tt__block-time { display: block; } }