/* Brentwood Table Link — editable link table / course-link grid, migrated from * brentwood.ca. Self-contained. Colours come from --bw-tl-primary / * --bw-tl-border set on the wrapper; grid column count from --bw-tl-cols. */ .bw-tl, .bw-tl * { box-sizing: border-box; } .bw-tl__link { color: var(--bw-tl-primary, #cc0000); text-decoration: none; } /* ── table variant ─────────────────────────────────────────────────────────── */ .bw-tl__table { width: 100%; border-collapse: collapse; table-layout: fixed; } .bw-tl__table td { padding: .4rem .75rem; text-align: var(--bw-tl-align, center); vertical-align: middle; border-bottom: 1px solid var(--bw-tl-border, #d9d9d9); border-right: 1px solid var(--bw-tl-border, #d9d9d9); overflow-wrap: break-word; /* wrap long labels inside the cell, never overflow it */ } .bw-tl__table td:last-child { border-right: none; } /* Last row carries no bottom border (matches live). */ .bw-tl__table tr:last-child td { border-bottom: none; } /* ── grid variant ──────────────────────────────────────────────────────────── */ /* The grid responds to the WIDTH OF ITS CONTAINER, not the viewport, via a * container query (the wrapper is the query container). This keeps it readable * when the block sits in a narrow column — e.g. one of several sections in a * Kadence row: instead of squeezing N columns into a sliver and overlapping the * labels, it stacks into one column. The @supports block is a fallback to the * old viewport breakpoint for the rare browser without container-query support. */ .bw-tl { container-type: inline-size; } .bw-tl__grid { display: block; /* narrow container: stacked, full-width rows */ } .bw-tl__cell { min-width: 0; /* allow the cell to shrink so labels wrap, not overflow */ padding: .25rem 0; border-bottom: 1px solid var(--bw-tl-border, #d9d9d9); border-top-left-radius: .25rem; border-top-right-radius: .25rem; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; } /* Hover: border turns primary + a faint white fill and small shadow (live). */ .bw-tl__cell:hover { border-bottom-color: var(--bw-tl-primary, #cc0000); background-color: rgba(255, 255, 255, .5); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); } .bw-tl__cell--full { grid-column: 1 / -1; } /* Narrow container: left-aligned stacked block (like live's non-md state). */ .bw-tl__cell .bw-tl__link { display: block; width: 100%; height: 100%; padding: .25rem; text-align: var(--bw-tl-align, left); overflow-wrap: break-word; /* wrap long course names instead of overflowing */ } /* Wide enough container: real N-column grid, cells centred. minmax(0,1fr) lets * tracks shrink so labels wrap within their cell rather than spilling over. */ @container (min-width: 480px) { .bw-tl__grid { display: grid; grid-template-columns: repeat(var(--bw-tl-cols, 3), minmax(0, 1fr)); gap: 1rem; } .bw-tl__cell .bw-tl__link { display: flex; align-items: center; justify-content: center; text-align: center; } } /* Fallback for browsers without container queries: key off the viewport. */ @supports not (container-type: inline-size) { @media (min-width: 768px) { .bw-tl__grid { display: grid; grid-template-columns: repeat(var(--bw-tl-cols, 3), minmax(0, 1fr)); gap: 1rem; } .bw-tl__cell .bw-tl__link { display: flex; align-items: center; justify-content: var(--bw-tl-justify, center); text-align: var(--bw-tl-align, center); } } } /* ── courses "open in pop-up" mode ─────────────────────────────────────────── */ /* The trigger is a plain — identical to the other cells — * so its hover/focus is the same as theirs by construction. view.js intercepts * the click to open the modal; no trigger-specific styling needed. */ /* ── modal (shared singleton appended to by view.js) ────────────────── */ .bw-tl__modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; /* vertically centred in the viewport */ justify-content: center; font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .bw-tl__overlay { position: absolute; inset: 0; background: rgba(120, 120, 120, 0.55); opacity: 0; transition: opacity 0.25s ease; } .bw-tl__modal.is-open .bw-tl__overlay { opacity: 1; } /* Positioning context for the dialog + the floating × above its corner. */ .bw-tl__shell { position: relative; z-index: 1; width: 100%; max-width: 900px; /* matches the wide course modal on brentwood.ca */ margin: 1rem; } .bw-tl__dialog { max-height: 88vh; overflow: auto; background: rgb(243 244 246); border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(-12px); transition: transform 0.25s ease, opacity 0.25s ease; } .bw-tl__modal.is-open .bw-tl__dialog { opacity: 1; transform: none; } .bw-tl__dialog:focus { outline: none; } /* Round × button at the dialog's top-right corner, nudged half outside — matches * the live .modal-close-icon (2rem circle, #f3f4f6 bg, #374151 icon, shadow). */ .bw-tl__close { position: absolute; top: -0.5rem; right: -0.5rem; z-index: 2; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 9999px !important; background: #f3f4f6 !important; color: #374151; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px -1px rgba(0, 0, 0, 0.12); cursor: pointer; -webkit-appearance: none; appearance: none; } .bw-tl__close svg { display: block; width: 1.05rem; height: 1.05rem; fill: currentColor; } .bw-tl__close:hover, .bw-tl__close:focus { background: #e5e7eb !important; color: #1f2937; outline: none; } .bw-tl__modal-body { padding: 1.75rem; } html.bw-tl-modal-open { overflow: hidden; } /* ── course content inside the modal ───────────────────────────────────────── */ .bw-tl-modal__title { margin: 0 0 0.75rem; font-family: "Oswald", "Open Sans", sans-serif; font-size: 1.6rem; font-weight: 300; color: #1f2937; } .bw-tl-modal__body { font-size: 0.95rem; line-height: 1.55; color: #374151; } .bw-tl-modal__body p { margin: 0 0 1em; } .bw-tl-modal__body p:last-child { margin-bottom: 0; } .bw-tl-modal__meta { margin-top: 1rem; padding-top: 0.75rem; border-top: 2px solid #d1d5db; } .bw-tl-modal__meta-label { font-weight: 600; color: #1f2937; } .bw-tl-modal__meta-value { color: #374151; } @media (max-width: 480px) { .bw-tl__modal-body { padding: 1.5rem 1.25rem; } }