/* ---------------------------------------------------------------------------
Marquee layout
---------------------------------------------------------------------------
A variant of the portal shell with:
- a tall header (room for a logo + brand text)
- a drawer sidebar that is hidden by default and slides in when toggled
- a content column centered horizontally with selectable max-width
Triggered by adding `layout-marquee` to . Rendered by
washcreek_page::start_marquee() / render_marquee_close().
--------------------------------------------------------------------------- */
body.layout-marquee {
margin: 0;
/* Width of the centered content column; mirrored to the header so the
brand can align with the content's left edge. Overridden per width
modifier below via :has() so changes stay in one place. */
--marquee-content-width: 720px;
/* Horizontal space the toggle occupies before the brand starts within
the header's flex content box. Tune if you change toggle size or gap. */
--marquee-brand-left-fixed: 46px;
}
body.layout-marquee:has(#portal-content.marquee-w-narrow) { --marquee-content-width: 480px; }
body.layout-marquee:has(#portal-content.marquee-w-default) { --marquee-content-width: 720px; }
body.layout-marquee:has(#portal-content.marquee-w-wide) { --marquee-content-width: 1080px; }
body.layout-marquee:has(#portal-content.marquee-w-full) { --marquee-content-width: 100%; }
/* Reset inherited rules from base.css that assume the classic layout:
- #portal-wrap is position:absolute, width:100% (base.css:819)
- #portal-side:after is a position:fixed 200px bar (base.css:1061)
Both leak horizontal width into the marquee layout. */
body.layout-marquee #portal-wrap {
display: block;
position: relative;
width: auto;
min-height: 100vh;
}
body.layout-marquee #portal-side::after {
display: none;
}
body.layout-marquee #portal-base div {
padding: 6px;
}
/* ---- Header ------------------------------------------------------------- */
body.layout-marquee #portal-header {
/* box-sizing: border-box is REQUIRED here. base.css:830 sets
#portal-header { width: 100% } and the stylesheets have no universal
border-box reset, so with content-box (the browser default) total
width = 100% + padding = horizontal overflow. Under position:fixed
(the classic layout) that overflow is silently clipped because fixed
elements don't extend the document; under our position:sticky it
lives in normal flow and triggers a horizontal scrollbar. */
box-sizing: border-box;
height: 96px;
display: flex;
align-items: center;
gap: 16px;
padding: 0 24px;
position: sticky;
top: 0;
z-index: 120;
/* background: #5a1818; */ /* fallback — portal color.css usually wins */
color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
body.layout-marquee #portal-header #sidebar-toggle {
font-size: 1.4em;
color: inherit;
text-decoration: none;
padding: 8px 4px;
}
body.layout-marquee #portal-header .brand {
display: flex;
align-items: center;
gap: 12px;
/* Push the brand right so its left edge aligns with the centered content
column. Uses 100% (the header's content box, scrollbar-aware) rather
than 100vw to avoid causing horizontal scroll when a vertical
scrollbar is present. On narrow viewports max(0px, ...) keeps the
brand snug to the toggle. */
margin-left: max(0px, calc((100% - var(--marquee-content-width)) / 2 - var(--marquee-brand-left-fixed)));
}
body.layout-marquee #portal-header .brand .brand-logo {
height: 64px;
width: auto;
}
/* black logo variant is only useful on light backgrounds */
body.layout-marquee #portal-header .brand .brand-logo.black { display: none; }
body.layout-marquee #portal-header .brand .brand-text {
font-size: 1.8em;
font-weight: 600;
line-height: 1.1;
}
body.layout-marquee #portal-header .brand .brand-text .main { display: block; font-weight: 200;}
body.layout-marquee #portal-header .brand .brand-text .name { display: block;}
body.layout-marquee #portal-header .brand .brand-text .sep { opacity: 0.6; }
body.layout-marquee #portal-header .brand .brand-text .charter { font-weight: 400; }
body.layout-marquee #portal-header .account_box {
margin-left: auto;
margin-top: 26px;
font-size: 14pt;
padding: 5px 8px;
margin-right: 10px;
}
body.layout-marquee #portal-header::after {
top: 96px;
}
body.layout-marquee #top_links {
top: -5px;
}
/* ---- Drawer sidebar ----------------------------------------------------- */
/* Hidden by default at every width. Toggled by #portal-wrap.marquee-open
(added by the layout-aware click handler in flock1210_page::stop()). */
body.layout-marquee #portal-side {
position: fixed;
top: 96px;
left: 0;
width: 280px;
height: calc(100vh - 96px);
transform: translateX(-100%);
transition: transform 0.2s ease;
overflow-y: auto;
z-index: 100;
background: #f7f5f3;
box-shadow: 2px 0 12px rgba(0,0,0,0.15);
padding: 16px 0;
}
body.layout-marquee #portal-wrap.marquee-open #portal-side {
transform: translateX(0);
}
body.layout-marquee #portal-side #top_links ul {
list-style: none;
margin: 0;
padding: 0;
}
body.layout-marquee #portal-side #top_links li {
border-bottom: 1px solid #e8e3dc;
position: relative; /* anchor for the absolute .expander_link */
}
body.layout-marquee #portal-side #top_links a {
display: block;
padding: 10px 20px;
color: #333;
text-decoration: none;
}
body.layout-marquee #portal-side #top_links a:hover {
background: #ede7df;
}
/* Expander toggle: small icon in the top-right of its parent , layered
over the .menu_link's full-width click area. Anchored to the top of the
(not center) so it stays in place when the submenu expands. */
body.layout-marquee #portal-side #top_links .expander_link {
position: absolute;
right: 4px;
top: 2px;
padding: 4px 10px;
color: #888;
z-index: 1;
}
body.layout-marquee #portal-side #top_links .expander_link:hover {
color: #333;
background: transparent; /* defeat the broader a:hover bg */
}
/* When an .expander_link is present, give the parent row's .menu_link enough
right-padding that its text doesn't run under the icon. */
body.layout-marquee #portal-side #top_links li:has(> .expander_link) > .menu_item .menu_link {
padding-right: 44px;
}
/* Submenu rows: indent, slightly smaller, lighter dividers. */
body.layout-marquee #portal-side #top_links li li .menu_link {
padding-left: 45px;
font-size: 0.95em;
}
body.layout-marquee #portal-side #top_links li li {
border-bottom-color: #f0ece6;
}
/* ---- Content column ----------------------------------------------------- */
body.layout-marquee #portal-content {
margin: 0;
padding: 32px 16px;
background: #fff;
}
body.layout-marquee #portal-content .marquee-inner {
margin: 0 auto;
/* Establish a query container so descendants (e.g. .inline-menu.base)
can collapse based on the centered column's width rather than the
viewport. This makes the grid respond correctly to the marquee
width modifier (narrow/default/wide/full). */
container-type: inline-size;
}
/* Width modifiers — applied to #portal-content via $opts['marquee_width']
or start_marquee($body_class, $width). Choose one based on the use case:
narrow — login, single form, "thank you" pages
default — landing pages, marketing-style intros
wide — data tables, calendar grids
full — full-bleed banner content (rare) */
body.layout-marquee #portal-content .marquee-inner { max-width: var(--marquee-content-width); }
body.layout-marquee #portal-content.marquee-w-full .marquee-inner { max-width: none; }
/* .inline-menu.base — two equally-spaced tiles filling the content column,
collapsing to one per row when the column is narrow. Defeats the
inherited base.css rules (1782–1845) that compute item widths from
100vw minus the classic 210px sidebar. */
body.layout-marquee .inline-menu.base {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 0; /* defeat base.css negative margins */
}
body.layout-marquee .inline-menu.base .menu_item {
width: auto; /* defeat inherited width: calc((100vw - 210px) / N ...) */
height: auto; /* let content drive height; tiles align via grid */
margin: 0; /* defeat inherited 5px side margins */
min-height: 125px; /* preserve the visual rhythm from base.css */
}
/* If an odd item lands alone on the last row, let it span both columns
rather than sitting half-width on the left. */
body.layout-marquee .inline-menu.base .menu_item:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
/* Collapse to a single column when the centered column itself is too
narrow for two tiles (~230px each after the gap). */
@container (max-width: 460px) {
body.layout-marquee .inline-menu.base {
grid-template-columns: 1fr;
}
}
body.layout-marquee .login_form {
border-right: 1px dotted red;
border-left: 1px dotted red;
border-radius: 5px;
}
/* ---- Footer ------------------------------------------------------------- */
body.layout-marquee #portal-base {
text-align: center;
padding: 16px;
font-size: 0.9em;
color: #666;
background: #f7f5f3;
border-top: 1px solid #e8e3dc;
}
body.layout-marquee #portal-base a {
color: #5a1818;
margin-left: 12px;
}
/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 600px) {
body.layout-marquee {
/* smaller toggle slot to match the tighter mobile gap */
--marquee-brand-left-fixed: 42px;
}
body.layout-marquee #portal-header {
height: 72px;
padding: 0 12px;
gap: 12px;
}
body.layout-marquee #portal-header .brand .brand-logo { height: 48px; }
body.layout-marquee #portal-header .brand .brand-text { font-size: 1.05em; }
body.layout-marquee #portal-header .account_box {
margin-top: 14px;
}
body.layout-marquee #portal-header::after {
top: 72px;
}
body.layout-marquee #portal-side {
top: 72px;
height: calc(100vh - 72px);
width: 85vw;
max-width: 320px;
}
body.layout-marquee #portal-content { padding: 20px 12px; }
/* Compact footer for mobile: smaller padding, smaller text, and the
help link drops to its own line so the ministry sentence doesn't
awkwardly wrap behind it. */
body.layout-marquee #portal-base {
padding: 8px;
font-size: 0.8em;
line-height: 1.3;
}
body.layout-marquee #portal-base div { padding: 2px; }
body.layout-marquee #portal-base a {
display: inline-block;
margin-left: 0;
margin-top: 4px;
}
body.layout-marquee .login_form {
border-right: 0px;
border-left: 0px;
border-radius: 0px;
margin: 0px -12px;
}
}
/* ---- Dark mode -----------------------------------------------------------
The existing portal stylesheets (base.css, color.css, troop.css) all set
their own dark mode rules. Because our marquee rules carry
`body.layout-marquee` specificity (0-1-1), they outrank the unprefixed
dark-mode rules — so we have to repeat the dark palette here for every
surface the marquee owns. Palette matches the rest of the codebase:
body bg #333, text #ddd (forced by base.css with !important)
drawer / footer #2a2a2a, divider #1a1a1a
secondary text #aaa
links #BEA7C6 / hover #AEC6A7 (per troop.css)
----------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
/* Drawer sidebar: dark surface with near-black dividers. */
body.layout-marquee #portal-side {
background: #2a2a2a;
box-shadow: 2px 0 12px rgba(0,0,0,0.5);
}
body.layout-marquee #portal-side #top_links li { border-bottom-color: #1a1a1a; }
body.layout-marquee #portal-side #top_links a { color: #ddd; }
body.layout-marquee #portal-side #top_links a:hover { background: #1a1a1a; }
body.layout-marquee #portal-side #top_links .expander_link { color: #aaa; }
body.layout-marquee #portal-side #top_links .expander_link:hover { color: #fff; background: transparent; }
body.layout-marquee #portal-side #top_links li li { border-bottom-color: #222; }
/* Content column: drop the white background so the body's dark color
(forced by base.css:3193) shows through. */
body.layout-marquee #portal-content {
background: transparent;
color: #ddd;
}
/* Inline-menu tiles: base.css gives them border #ddd which glows on
a dark background. Soften to a low-contrast border and dim hover bg. */
body.layout-marquee .inline-menu.base .menu_item {
border-color: #444;
background: #2a2a2a;
}
body.layout-marquee .inline-menu.base .menu_item a:hover {
background: #1a1a1a;
}
/* Footer: dark surface with light text, links in the SG dark palette. */
body.layout-marquee #portal-base {
background: #2a2a2a;
color: #aaa;
border-top-color: #1a1a1a;
}
body.layout-marquee #portal-base a { color: #BEA7C6; }
body.layout-marquee #portal-base a:hover { color: #AEC6A7; }
}
@media screen {
#troopname.printonly { display: none; }
}
/* ---- Print ---------------------------------------------------------------
The existing print-base.css / portal print stylesheet already hides
#top_links and .account_box (relied on by the classic layout). These
rules cover the marquee-specific structure: drawer container, sticky
dark header, centered content column, and the brand logo color swap.
----------------------------------------------------------------------- */
@media print {
/* Wrap behaves as a normal block on paper. */
body.layout-marquee #portal-wrap {
display: block;
position: static;
min-height: 0;
box-shadow: none;
}
/* Header: keep the brand visible but drop the dark background, sticky
positioning, shadow, and the interactive toggle. */
body.layout-marquee #portal-header {
display: block;
position: static;
background: transparent !important;
color: #000;
box-shadow: none;
height: auto;
padding: 0 0;
}
body.layout-marquee #portal-header #sidebar-toggle,
body.layout-marquee #portal-header .account_box { display: none; }
/* Brand: undo the centered-column alignment math (no centering on paper)
and swap the logo variant to the black-on-light version. */
body.layout-marquee #portal-header .brand {
margin-left: 0;
}
body.layout-marquee #portal-header .brand .brand-logo.white { display: none; }
body.layout-marquee #portal-header .brand .brand-logo.black { display: block; }
body.layout-marquee #portal-header .brand .brand-text { color: #000; }
/* Drawer is purely interactive — entirely hidden on paper. */
body.layout-marquee #portal-side { display: none; }
/* Content fills the page width; no max-width centering. */
body.layout-marquee #portal-content {
margin: 0;
padding: 0;
background: transparent;
}
body.layout-marquee #portal-content .marquee-inner {
max-width: none;
margin: 0;
}
body.layout-marquee .inline-menu.base { grid-template-columns: none; }
body.layout-marquee .inline-menu.base .menu_item {min-height: auto; }
body.layout-marquee .inline-menu.base .description {display: none; }
/* Footer becomes a small centered byline. */
body.layout-marquee #portal-base {
background: transparent;
border-top: 1px solid #ccc;
text-align: center;
padding: 6pt 0;
font-size: 9pt;
color: #333;
margin-top: 1em;
}
body.layout-marquee #portal-base div { padding: 0; }
body.layout-marquee #portal-base a { color: #000; }
}