/* ===================================================================== responsive.css - Device-tier responsive tuning via runtime hooks on - Hooks: rs-phone / rs-tablet / rs-desktop (width-only) ====================================================================== */ /* ------------------------------------------------------------------ PHONE ------------------------------------------------------------------- */ html.rs-phone { font-size: clamp(13px, 3.3vw, 15px); --phone-content-inset: 8px; } html.rs-phone .content-wrap { padding: 0rem; } html.rs-phone .site-banner { height: clamp(72px, 12vw, 92px); } /* Keep edge fade but preserve logo visibility at tiny widths. */ html.rs-phone .site-banner::before { mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%); } html.rs-phone .site-banner__inner { position: relative; --banner-logo-slot: clamp(60px, 9.4vw, 72px); padding-left: clamp(6px, 1vw, 8px); padding-right: clamp(6px, 1vw, 8px); } html.rs-phone .brand--district-logo, html.rs-phone .brand--site-logo { align-items: center; } html.rs-phone .brand--district-logo .brand__logo, html.rs-phone .brand--site-logo .brand__logo { height: clamp(52px, 8.4vw, 64px); max-width: clamp(52px, 8.4vw, 64px); } html.rs-phone .brand--banner-title .brand__text { font-size: clamp(1.2rem, 5.2vw, 1.95rem); line-height: 1; text-align: center; -webkit-text-stroke: clamp(0.35px, 0.08vw, 0.55px) var(--title-outline, #0b2239); text-shadow: 0 1px 0 color-mix(in srgb, var(--title-outline, #0b2239) 58%, transparent 42%); } html.rs-phone .auth-links { position: absolute; right: 6px; top: 3px; bottom: auto; margin-left: 0 !important; z-index: 3; } html.rs-phone .auth-links .auth-email, html.rs-phone .auth-links .auth-login, html.rs-phone .auth-links .auth-logout { font-size: clamp(0.72rem, 2.3vw, 0.84rem); line-height: 1; } /* Fix mobile nav layout so toggle does not sit beside open menu. */ html.rs-phone .primary-nav { display: block; margin-top: 6px; text-align: center; } html.rs-phone .primary-nav .nav-toggle { display: inline-flex; margin: 6px auto 0; padding: clamp(0.38rem, 1.35vw, 0.5rem) clamp(0.66rem, 2.2vw, 0.8rem); border-radius: 12px; font-size: clamp(0.94rem, 2.9vw, 1.04rem); line-height: 1; } html.rs-phone .primary-nav .nav-toggle .nav-toggle__icon { font-size: clamp(0.94rem, 2.9vw, 1.04rem); } html.rs-phone .primary-nav .nav-menu { width: 100%; margin-top: 0.5rem; border-radius: 12px; } html.rs-phone .primary-nav .nav-level-1 { padding: 0.28rem; gap: 0.28rem; text-align: left; } html.rs-phone .primary-nav .nav-level-1 > .nav-item { margin-bottom: 0.22rem; } html.rs-phone .primary-nav .nav-level-1 > .nav-item:last-child { margin-bottom: 0; } html.rs-phone .primary-nav .nav-level-1 > .nav-item > .nav-link, html.rs-phone .primary-nav .nav-level-1 > .nav-item > .nav-label, html.rs-phone .primary-nav .nav-level-1 > .nav-item > .nav-link.is-parent { display: inline-block; width: auto; max-width: 100%; } html.rs-phone .primary-nav .nav-link, html.rs-phone .primary-nav .nav-label, html.rs-phone .primary-nav .nav-link.is-parent, html.rs-phone .primary-nav .nav-directory-parent, html.rs-phone .primary-nav .nav-level-2 .nav-sublink, html.rs-phone .primary-nav .nav-level-3 .nav-sublink { display: block; text-decoration: none; color: var(--nav-text, #ffffff); font-size: clamp(0.92rem, 2.6vw, 1rem); line-height: 1.16; border-radius: 10px; } html.rs-phone .primary-nav .nav-link, html.rs-phone .primary-nav .nav-label, html.rs-phone .primary-nav .nav-link.is-parent, html.rs-phone .primary-nav .nav-directory-parent { padding: 0.54rem 0.64rem; } html.rs-phone .primary-nav .nav-level-2 { padding: 0.4rem; } html.rs-phone .primary-nav .nav-level-2 .nav-sublink, html.rs-phone .primary-nav .nav-level-3 .nav-sublink { padding: 0.58rem 0.72rem; background: color-mix(in srgb, var(--nav-submenu-bg, var(--nav-bg, #0b2239)) 84%, black 16%); margin-bottom: 0.28rem; } html.rs-phone .primary-nav .nav-level-2 > .nav-subitem, html.rs-phone .primary-nav .nav-level-3 > .nav-subitem { margin-bottom: 0.22rem; } html.rs-phone .primary-nav .nav-level-2 > .nav-subitem:last-child, html.rs-phone .primary-nav .nav-level-3 > .nav-subitem:last-child { margin-bottom: 0; } html.rs-phone .primary-nav .nav-level-2 > .nav-subitem > .nav-sublink, html.rs-phone .primary-nav .nav-level-2 > .nav-subitem > .nav-directory-parent { display: inline-block; width: auto; max-width: 100%; } html.rs-phone .primary-nav .nav-level-3 > .nav-subitem > .nav-sublink { display: inline-block; width: auto; max-width: 100%; } html.rs-phone .primary-nav .nav-level-3 { padding: 0.35rem 0.1rem 0.1rem 0.85rem; } html.rs-phone .primary-nav .submenu-toggle { margin-left: 0.3rem; padding: 0.2rem 0.42rem; min-width: 34px; min-height: 34px; } /* Composition/page blocks: tighter headers and less wasted space. */ html.rs-phone .page-content .layout-node-split[data-direction="vertical"] > .layout-split-shell { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; } html.rs-phone .page-content .layout-node-split[data-direction="horizontal"] > .layout-split-shell { gap: 8px !important; } html.rs-phone .page-content .layout-block-surface { border-radius: 0 !important; } html.rs-phone .page-content .layout-block-header { padding: 8px 10px !important; border-radius: 0 !important; font-size: 0.95rem; } html.rs-phone .page-content .layout-block-content { padding: 8px 10px !important; font-size: 0.9rem; line-height: 1.36; } html.rs-phone .page-content .layout-block-content p, html.rs-phone .page-content .layout-block-content li { font-size: 1em; line-height: 1.36; } html.rs-phone .page-content .layout-block-content h1 { font-size: 1.28rem; line-height: 1.18; } html.rs-phone .page-content .layout-block-content h2 { font-size: 1.18rem; line-height: 1.2; } html.rs-phone .page-content .layout-block-content h3 { font-size: 1.08rem; line-height: 1.22; } html.rs-phone .page-content .layout-empty-placeholder { min-height: 92px; padding: 8px 10px !important; border-radius: 0 !important; } html.rs-phone .page-content .layout-block-surface-news > .layout-block-content { padding: 4px 0 var(--phone-content-inset, 10px) !important; } html.rs-phone main.content-page > article.page-body > footer.page-footer { padding: 8px var(--phone-content-inset, 10px) 10px !important; } html.rs-phone main.content-page > article.page-body > footer.page-footer .small.dim { margin: 0; } /* News: banner rows instead of pills on phone. */ html.rs-phone .page-content .news-feed-list { padding-left: var(--phone-content-inset, 10px); padding-right: var(--phone-content-inset, 10px); gap: var(--phone-content-inset, 10px); } html.rs-phone .page-content .news-feed-card { padding: 0; } html.rs-phone .news-feed-post-shell { display: grid; grid-template-columns: minmax(0, 32%) minmax(0, 68%); grid-template-rows: auto min-content auto; grid-template-areas: "title title" "author image" "summary summary"; border-radius: 10px; margin: 0; overflow: hidden; align-items: start; column-gap: 4px; } html.rs-phone .news-feed-title-bar { grid-area: title; display: block; padding: 8px 10px; background: var(--news-source-news-header, var(--news-header, var(--news-source-nav-current, var(--nav-current, var(--site-accent, var(--site-primary)))))); color: var(--news-source-news-header-text, var(--news-header-text, var(--site-text, #1b2d41))); border-bottom: 1px solid color-mix(in srgb, var(--news-source-news-header, var(--news-header, var(--news-source-nav-current, var(--nav-current, var(--site-accent, var(--site-primary)))))) 74%, white 26%); font-size: 1.04rem; line-height: 1.2; font-weight: 700; } html.rs-phone .news-feed-title-bar a { color: inherit; text-decoration: none; } html.rs-phone .news-feed-title-bar .news-feed-title-main { font-size: 1em; font-weight: 700; } html.rs-phone .news-feed-title-bar .news-feed-title-note { font-size: 0.72em; font-weight: 600; opacity: 0.95; } html.rs-phone .news-feed-post-header { display: none; } html.rs-phone .news-feed-meta-bubble { display: grid; justify-items: center; align-content: start; gap: 2px; margin: 4px 0 4px; padding: 4px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--site-text) 18%, white 82%); background: color-mix(in srgb, var(--site-bg) 84%, white 16%); width: max-content; max-width: 100%; justify-self: center; } html.rs-phone .news-feed-meta-site, html.rs-phone .news-feed-meta-date { display: block; margin: 0; font-size: 0.82rem; line-height: 1.1; font-weight: 700; color: color-mix(in srgb, var(--site-text) 78%, black 22%); text-decoration: none; } html.rs-phone .news-feed-post-body { display: contents; } html.rs-phone .news-feed-date, html.rs-phone .news-feed-context-line, html.rs-phone .news-feed-owner-status, html.rs-phone .news-feed-author-name, html.rs-phone .news-feed-author-mail { padding: 6px 8px; font-size: 0.8rem; } html.rs-phone .news-feed-date-cell { display: none; } html.rs-phone .news-feed-headline-cell { display: none; } html.rs-phone .news-feed-date, html.rs-phone .news-feed-context-line { display: none; } html.rs-phone .news-feed-image { border-radius: 8px; width: 100%; height: 100%; object-fit: cover; } html.rs-phone .news-feed-author-cell { grid-area: author; display: grid; grid-template-rows: auto auto auto; justify-items: center; align-items: start; text-align: center; row-gap: 2px; margin: 0; } html.rs-phone .news-feed-author-identity { width: auto; margin: 0; } html.rs-phone .news-feed-author-name, html.rs-phone .news-feed-author-mail { display: inline-block; width: auto; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--site-text) 12%, white 88%); background: color-mix(in srgb, var(--site-bg) 74%, white 26%); text-align: center; margin: 0; padding: 4px 8px; font-size: 0.84rem; line-height: 1.25; font-weight: 700; } html.rs-phone .news-feed-author-image-wrap { justify-self: center; } html.rs-phone .news-feed-title { font-size: 1rem; line-height: 1.24; margin-bottom: 4px; padding-bottom: 4px; } html.rs-phone .news-feed-summary-cell { grid-area: summary; margin: 6px 10px 10px; display: flex; flex-direction: column; } html.rs-phone .news-feed-summary { margin: 0 0 2px; } html.rs-phone .news-feed-summary-cell > .news-feed-title { display: none; } html.rs-phone .news-feed-summary-cell > .news-feed-links { display: none; } html.rs-phone .news-feed-summary-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 0; } html.rs-phone .news-feed-summary-footer-link .news-feed-link-full { font-size: 0.9rem; font-weight: 700; } html.rs-phone .news-feed-date-corner { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--site-text) 18%, white 82%); background: color-mix(in srgb, var(--site-bg) 84%, white 16%); font-size: 0.8rem; line-height: 1.1; font-weight: 700; color: color-mix(in srgb, var(--site-text) 78%, black 22%); white-space: nowrap; } html.rs-phone .news-feed-title-note { font-size: 0.58em; } html.rs-phone .news-feed-author-avatar { width: 72px; height: 72px; margin-top: 0; } html.rs-phone .news-feed-image-cell { grid-area: image; aspect-ratio: 16 / 9; align-self: start; margin: 6px 6px 0 0; } html.rs-phone .news-feed-owner-actions { top: 6px; right: 6px; gap: 4px; } html.rs-phone .news-feed-owner-status { display: none; } html.rs-phone .news-feed-owner-actions > .news-feed-owner-btn { width: 26px; height: 26px; } /* ------------------------------------------------------------------ TABLET ------------------------------------------------------------------- */ html.rs-tablet { font-size: clamp(15px, 1.7vw, 16px); } html.rs-tablet .content-wrap { padding: 1rem; } html.rs-tablet .site-banner { height: clamp(96px, 16vw, 148px); } html.rs-tablet .site-banner__inner { --banner-logo-slot: clamp(76px, 14vw, 130px); padding-left: clamp(8px, 1.3vw, 12px); padding-right: clamp(8px, 1.3vw, 12px); } html.rs-tablet .brand--district-logo .brand__logo, html.rs-tablet .brand--site-logo .brand__logo { height: clamp(68px, 14.7vw, 132px); max-width: clamp(68px, 14.7vw, 132px); } html.rs-tablet .brand--banner-title .brand__text { font-size: clamp(1.95rem, 5.5vw, 3.1rem); } html.rs-tablet .auth-links .auth-email, html.rs-tablet .auth-links .auth-login, html.rs-tablet .auth-links .auth-logout { font-size: clamp(0.84rem, 1.6vw, 0.9rem); } html.rs-tablet .primary-nav .nav-level-2 .nav-sublink, html.rs-tablet .primary-nav .nav-level-3 .nav-sublink { font-size: 0.98rem; line-height: 1.24; } html.rs-tablet .page-content .layout-node-split[data-direction="vertical"] > .layout-split-shell { gap: 16px; } html.rs-tablet .page-content .layout-block-header { padding: 9px 12px; font-size: 0.98rem; } html.rs-tablet .page-content .layout-block-content { padding: 9px 12px; } html.rs-tablet .news-feed-post-header { padding: 8px 9px; } html.rs-tablet .news-feed-post-body { padding: 10px 9px; } html.rs-tablet .news-feed-title { font-size: 1.04rem; } /* Tablet narrow width */ html.rs-tablet .page-content .layout-node-split[data-direction="vertical"] > .layout-split-shell { grid-template-columns: minmax(0, 1fr); } /* ------------------------------------------------------------------ MOBILE SAFETY NET (media-query fallback) Keeps layout responsive even if runtime rs-* hook classes are stale/missing. ------------------------------------------------------------------- */ @media (max-width: 767px) { .page-wrapper, .site-main, main.content-page, article.page-body, .page-content, #page-body { max-width: 100%; min-width: 0; } /* Stack composition splits on narrow screens regardless of direction metadata. */ .page-content .layout-node-split > .layout-split-shell { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto !important; gap: 8px !important; } .page-content .layout-slot, .page-content .layout-node, .page-content .layout-node-block, .page-content .layout-block-content { min-width: 0; } .page-content .layout-block-content { overflow-wrap: anywhere; word-break: normal; } .page-content .layout-block-content p, .page-content .layout-block-content span, .page-content .layout-block-content a, .page-content .layout-block-content li { overflow-wrap: anywhere; } /* Quick-links can create overflow with long labels on narrow phones. */ .layout-block-surface-quick-links .layout-quick-links-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 8px; } .layout-block-surface-quick-links .layout-quick-links-button { width: auto !important; min-width: 0 !important; max-width: min(100%, 26ch) !important; white-space: normal; justify-content: center; text-align: center; padding: 6px 8px; } .layout-block-surface-quick-links .layout-quick-links-label { white-space: normal; line-height: 1.2; overflow-wrap: anywhere; } } @media (max-width: 420px) { html.rs-phone .auth-links .auth-email { display: none; } }