/*
Theme Name: Americon Bid
Theme URI: https://www.americonconstructionco.com
Author: Americon Construction
Version: 2.0
Description: Professional Americon bid calendar theme.
*/
/* =============================================================================
AMERICON DESIGN SYSTEM
=============================================================================
ORGANISATION
------------
1. Tokens – brand constants + semantic tokens that flip for dark mode
2. Base – element defaults, typography, focus
3. Layout – page shells, headers, the classes templates actually use
4. Components – nav, cards, lists, filters, badges, dropzone, footer
5. Bootstrap map – hand Bootstrap our palette through its own CSS variables
WHY THERE IS NO @layer HERE
---------------------------
Bootstrap arrives as its own and is therefore *unlayered*. In the CSS
cascade, unlayered rules beat layered ones, so wrapping this file in @layer
would make every rule below lose to Bootstrap. Instead this sheet is enqueued
with Bootstrap as a dependency, so it simply loads later and wins on source
order at equal specificity. That is also why the `!important` pile that used
to live in this file is gone: it was never needed.
DARK MODE
---------
Follows the OS setting only (no manual toggle). Semantic tokens use
light-dark(), which is driven by the `color-scheme` declared on :root.
Bootstrap's own components need its `data-bs-theme` attribute instead; a
small inline script in header.php sets that from the same media query
before first paint.
========================================================================== */
/* =============================================================================
1. TOKENS
========================================================================== */
:root {
color-scheme: light dark;
/* --- Brand constants (identical in both themes) --- */
--am-red: #ED1C24;
--am-red-dark: #C0101D;
--am-red-bright: #FF3A42;
/* The brand red as a fill with WHITE TEXT ON IT.
#ED1C24 carries white at 4.38:1 -- under AA, and button labels are 16px
semibold, which is not large text by any reading. This is the smallest
step down that clears 4.5 (it measures 4.68), so a primary button is a
shade deeper than the topbar beside it and no one will pick the two apart.
--am-red itself is untouched: it edges the topbar and the page rules,
where nothing sits on top of it and the brand value is the right one. */
--am-red-cta: #E51820;
--am-blue: #272E7E;
--am-blue-bright: #5964D3;
--am-amber: #F59E0B;
/* Private-project identity, on the calendar markers and the private tile.
Private used to be red, which stopped working once red was reserved for
"closing today": the same hue meant a category in one place and an urgency
in another, a few hundred pixels apart.
Teal rather than the obvious violet because the choice was measured, not
picked. Violet #9085E9 sits ΔE 12.3 from the dark-mode brand blue -- under
the 15 floor, i.e. hard to separate even with full colour vision, and the
two would have been adjacent markers in the same cell. Magenta #D55181
cleared the blue but landed ΔE 10.7 from the urgent red, rebuilding the
collision this token exists to remove. Teal clears everything in the set:
worst pair ΔE 8.1 protan / 25.7 normal in light, 10.1 / 20.0 in dark.
(Values from scripts/validate_palette.js in the dataviz skill, run against
this theme's own surfaces -- #FFFFFF and #1E232B -- not against defaults.) */
--am-teal: #0F7A57;
--am-teal: light-dark(#0F7A57, #199E70);
/* --- Semantic surfaces ---
Each token is declared twice on purpose: the plain light value first, then
the light-dark() version. A browser without light-dark() support drops the
second declaration and keeps the first, so the site degrades to a correct
light theme instead of losing the colour entirely.
The dark values used to bottom out at #0E1116 canvas / #171B22 surface --
near-black, with #E6E9EF text over it. That is a fine contrast ratio and a
tiring screen: this is a page a coordinator leaves open all day, and
maximum contrast on a large dark field is what causes the glow around
white text that makes long sessions uncomfortable. The whole dark ramp is
lifted one step and the text pulled slightly off white. Text on surface
still measures ~12:1, well past AA, so nothing is traded but the glare. */
--am-canvas: #F4F5F7;
--am-canvas: light-dark(#F4F5F7, #161A21);
--am-surface: #FFFFFF;
--am-surface: light-dark(#FFFFFF, #1E232B);
--am-surface-sunk: #F7F8FA;
--am-surface-sunk: light-dark(#F7F8FA, #1A1F26);
--am-header-bg: #FFFFFF;
--am-header-bg: light-dark(#FFFFFF, #1A1F26);
/* --- Semantic text --- */
--am-text: #1F2530;
--am-text: light-dark(#1F2530, #DDE2EA);
--am-text-muted: #5E6673;
--am-text-muted: light-dark(#5E6673, #9BA4B3);
/* Was #818A98, itself lifted from #757F8F to fix the DARK value. The lift
was measured against the dark surface and never against the light one,
where it left small uppercase labels at 3.2-3.5:1 -- under AA on all four
surfaces at once. #646D79 measures 5.2:1 on a card and 4.8:1 on the page.
The dark half was already fine and is untouched.
tests/test-contrast.php measures both halves now, which is the actual fix. */
--am-text-subtle: #646D79;
--am-text-subtle: light-dark(#646D79, #8A93A2);
/* --- Lines & accents ---
Borders move up with the surfaces they sit on; a #2A313C hairline is
invisible against a #1E232B card. */
--am-border: #E2E5EA;
--am-border: light-dark(#E2E5EA, #313945);
/* The heavier of the two decorative boundaries: stat tiles, the dashed empty
state, the dropzone, hover states, . None of these is the only thing
identifying a control -- each sits on a component that also has a fill, a
label or a heading -- so they are not bound by 1.4.11 and are free to stay
light. Deliberately NOT used on form controls; see --am-field-border. */
--am-border-strong: #C9CED7;
--am-border-strong: light-dark(#C9CED7, #454E5C);
/* Form controls only, and load-bearing.
A text input here is a white box on a white card: no fill difference, no
underline, nothing but this border saying a field exists. WCAG 1.4.11 asks
3:1 of exactly that, and the decorative border above delivers 1.6:1 light
and 1.9:1 dark -- so the reliable way to find a field was to click and
watch for a cursor.
Its own token rather than a heavier --am-border-strong: that token backs
about twenty decorative boundaries, and darkening it to input weight would
have put a hard edge on every stat tile and empty state on the site to fix
a problem none of them had. Clears 3:1 on both the card and the page in
both schemes. */
--am-field-border: #7F8792;
--am-field-border: light-dark(#7F8792, #6B7686);
--am-accent: var(--am-blue);
--am-accent: light-dark(var(--am-blue), var(--am-blue-bright));
--am-danger: var(--am-red);
--am-danger: light-dark(var(--am-red), var(--am-red-bright));
/* --- The same two hues, as INK ---
--am-accent and --am-danger are FILLS. Their dark values are chosen to
hold up as a block of colour, and they do: --am-accent is 3.15:1 against a
card, which clears the 3:1 floor for a graphic.
Text is a different problem with a different number, and reusing the fill
for it put every link, every active filter, every card title and both
callout labels at roughly 3:1 in dark mode. Nobody noticed for the same
reason nobody notices any of this: in light mode the identical CSS
measures 10:1.
So the fill keeps its name and these carry the reading. They differ from
the fills only in dark mode, and every value is measured by
tests/test-contrast.php against all four surfaces plus the tinted
component backgrounds each one actually lands on. */
--am-accent-ink: var(--am-blue);
--am-accent-ink: light-dark(var(--am-blue), #99A2F0);
--am-danger-ink: var(--am-red-dark);
--am-danger-ink: light-dark(var(--am-red-dark), #FF7A80);
/* --- Status: done, and needs attention ---
Green and amber, for "this section is complete" against "this one still
needs something". Neither is a brand colour and neither should become one:
they say what state a thing is in, which is why they live beside
--am-danger rather than beside --am-red.
They existed before these tokens did, as eight raw hex values inside
americon-project-editor.css, and being raw is what let one of them be
wrong. The ready badge measured #15803D on its own 8% green tint at
4.15:1 -- under AA -- and had done since it was written, because the
contrast checker measures tokens and there was no token here to measure.
--am-success-ink is the smallest step down from that green which clears
4.5 on every surface including its own tint (it measures 4.74).
--am-success is one value in both schemes, unusually: it is only ever a
fill or a border, it needs 3:1 rather than 4.5:1, and #159B46 clears that
on the light surfaces (3.31) and the dark ones (4.37) alike. A second
value would have been two numbers to keep true instead of one. */
--am-success: #159B46;
--am-success-ink: #14762F;
--am-success-ink: light-dark(#14762F, #4ADE80);
/* --am-amber is the fill; this is the reading. Same fill/ink split as
--am-accent, and for the same reason: amber is legible as a block of
colour long before it is legible as words on a page. */
--am-warn-ink: #92400E;
--am-warn-ink: light-dark(#92400E, #FCD34D);
/* --- The footer band ---
One value each, no light-dark(): this band is dark in both schemes by
design, the way the brand's own printed material is. It is not a surface
that follows the page.
Tokens rather than the literals that used to be down in section 4.12 for
one reason only -- tests/test-contrast.php measures tokens, so as literals
these four inks were the last text on the site nobody was checking. They
pass comfortably (5.8:1 at the tightest, on the small print). The point is
that the next person to adjust them will find out if they stop. */
--am-footer-bg: #141A21;
--am-footer-ink: #C5CCD6;
--am-footer-brand-ink: #EEF1F5;
--am-footer-link: #FBBF24;
--am-footer-link-hover: #FCD34D;
--am-footer-meta-ink: #8B95A3;
/* The single structural red: the topbar and the rule under a page title.
One token so the two cannot drift, and so the brand accent has a name
separate from --am-danger, which means "something is wrong". In dark mode
it steps back from full #ED1C24, which buzzes against a dark field. */
--am-rule: var(--am-red);
--am-rule: light-dark(var(--am-red), #D93A40);
/* --- Elevation ---
Dark-mode alphas come down with the surfaces: a .45 black drop under a
card that is itself nearly black reads as a hole in the page rather than a
lift, and it is half of what made the dark theme feel heavy. */
--am-shadow-sm: 0 1px 2px rgb(16 24 40 / .06);
--am-shadow-sm: 0 1px 2px light-dark(rgb(16 24 40 / .06), rgb(0 0 0 / .3));
--am-shadow: 0 1px 3px rgb(16 24 40 / .08), 0 8px 24px rgb(16 24 40 / .06);
--am-shadow: 0 1px 3px light-dark(rgb(16 24 40 / .08), rgb(0 0 0 / .34)),
0 8px 24px light-dark(rgb(16 24 40 / .06), rgb(0 0 0 / .26));
--am-shadow-lg: 0 12px 40px rgb(16 24 40 / .12);
--am-shadow-lg: 0 12px 40px light-dark(rgb(16 24 40 / .12), rgb(0 0 0 / .42));
/* --- Geometry --- */
--am-radius-sm: .375rem;
--am-radius: .625rem;
--am-radius-lg: 1rem;
--am-radius-pill: 999px;
/* --- Fluid type scale (min at 360px, max at 1280px) --- */
--am-text-xs: clamp(.6875rem, .66rem + .12vw, .75rem);
--am-text-sm: clamp(.8125rem, .79rem + .11vw, .875rem);
--am-text-md: clamp(.9375rem, .91rem + .12vw, 1rem);
--am-text-lg: clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem);
--am-text-xl: clamp(1.25rem, 1.16rem + .4vw, 1.5rem);
--am-text-2xl: clamp(1.5rem, 1.3rem + .9vw, 2.125rem);
/* --- Spacing rhythm --- */
--am-gap-xs: .375rem;
--am-gap-sm: .625rem;
--am-gap: 1rem;
--am-gap-lg: 1.5rem;
--am-gap-xl: 2.5rem;
/* --- Shell ---
Three widths, and only one of them is a number anybody should type twice.
--am-shell-max the reading column: forms, lists, prose.
--am-shell-wide what a template asks for when its content is genuinely
wider than a reading column -- today only the month grid.
--am-shell-chrome the header and footer bands.
Chrome is the widest of the two rather than the reading column, because a
nav band narrower than the content beneath it has no edge to sit on: the
logo lands mid-air, inboard of the page's own left edge, while the header
background runs full-bleed behind it. Wider is the ordinary relationship
-- chrome frames the column -- and `max()` guarantees the bands can never
come out narrower than they were before this rule existed.
These are derived, not repeated. Change --am-shell-wide and the header,
the footer and the calendar all move together; that is the point.
WHY --am-shell-wide HAS NO PIXEL CEILING
It used to be min(96vw, 1680px). The 1680 was there to stop day columns
growing without limit, and it did -- but a cap in px is a cap on ONE
monitor size: below about 1750px of window it never applied at all, and
above it the month sat in the middle of the screen with a hand's width of
empty page down each side, on exactly the displays that had room to show
more of it.
Wide is now a proportion of the window, which is the thing that actually
varies between the people using this. The 4% it holds back is margin, not
a limit -- the card needs to stop short of the bezel to read as a card.
What the cap was really protecting is the SHAPE of a day cell, and that is
answered where the shape is decided: cal.js sizes the cell ceiling from
the measured column width, so cells stay wider than they are tall on any
screen instead of on one. Prose is unaffected either way -- forms, lists
and text keep --am-shell-max, because a reading column has an ideal width
and a month grid does not. */
--am-shell-max: 1180px;
--am-shell-wide: 96vw;
--am-shell-chrome: max(var(--am-shell-max), var(--am-shell-wide));
--am-shell-pad: clamp(1rem, .5rem + 2vw, 2rem);
/* --- How tall the page may be ---
100dvh is the viewport; this is the part of it a page may actually use.
They differ for administrators. The admin bar is position:fixed, so it
contributes nothing to flow -- but WordPress pairs it with a rule on the
html element, margin-top: 32px !important, and that margin IS in flow. A
body of a full 100dvh therefore starts 32px down and ends 32px past the
bottom of the window, so every page on the site scrolls by exactly the
height of the admin bar no matter how little is on it.
That is ugly on an ordinary page and actively wrong on the calendar
dashboard, which sizes its day cells by asking "does the document
overflow?" (cal.js, fitRows). It reads the admin bar's 32px as the grid
being too tall, shrinks the rows -- and, because that first correction
locks the direction it may correct in, never grows them back. The month
ends up squeezed into the top two-thirds of the window with the leftover
sitting empty underneath. Only administrators see it, because
americon-core.php hides the bar from everybody else, which is why the
screen looks right to the people it was built for and wrong to whoever
built it.
Subtracting the bar here rather than in cal.js fixes the phantom scroll on
every page, and leaves the calendar's overflow question honest.
The html rule above is quoted without braces on purpose. This comment is
inside the :root block, and tools/lib/css-tokens.php reads that block by
cutting at its first closing brace -- so a braced example here ends the
palette early and every token below it silently vanishes from the contrast
tests. tests/test-login-screen.php catches it, which is how this note came
to be written. */
--am-viewport: 100dvh;
/* --- Focus ring --- */
--am-ring: 0 0 0 2px var(--am-surface), 0 0 0 4px var(--am-accent);
/* --- Motion --- */
--am-ease: cubic-bezier(.2, .6, .3, 1);
--am-speed: 160ms;
}
@media (prefers-reduced-motion: reduce) {
:root { --am-speed: 0ms; }
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* =============================================================================
2. BASE
========================================================================== */
html {
scroll-behavior: smooth;
}
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
font-size: var(--am-text-md);
line-height: 1.55;
background-color: var(--am-canvas);
color: var(--am-text);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* Sticky footer: header + main + footer fill at least the viewport. */
min-height: var(--am-viewport);
display: flex;
flex-direction: column;
}
/* The admin bar's own height, taken off the page's. WordPress puts .admin-bar
on alongside the `html { margin-top }` this is compensating for, and
switches that margin to 46px at its own 782px breakpoint -- so this follows
it at the same width rather than at one of ours. */
body.admin-bar {
--am-viewport: calc(100dvh - 32px);
}
@media screen and (max-width: 782px) {
body.admin-bar {
--am-viewport: calc(100dvh - 46px);
}
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
letter-spacing: -.011em;
text-wrap: balance;
color: var(--am-text);
}
p, li {
text-wrap: pretty;
}
a {
color: var(--am-accent-ink);
text-decoration-thickness: 1px;
text-underline-offset: .15em;
transition: color var(--am-speed) var(--am-ease);
}
a:hover {
color: var(--am-danger-ink);
}
img,
svg {
max-width: 100%;
height: auto;
}
hr {
border: 0;
border-top: 1px solid var(--am-border);
opacity: 1;
margin-block: var(--am-gap-lg);
}
/* --- Focus -----------------------------------------------------------------
The previous stylesheet removed every focus ring site-wide with
`outline: none !important`, which left keyboard users with no visible
position. :focus-visible gives the same clean look for mouse clicks while
keeping keyboard focus obvious. Never delete this without a replacement. */
:focus-visible {
outline: 2px solid var(--am-accent);
outline-offset: 2px;
border-radius: var(--am-radius-sm);
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
outline: none;
box-shadow: var(--am-ring);
}
/* Skip link – first tab stop on every page. */
.am-skip-link {
position: absolute;
left: var(--am-gap);
top: var(--am-gap);
z-index: 1080;
padding: .6rem 1rem;
border-radius: var(--am-radius-sm);
background: var(--am-red);
color: #fff;
font-weight: 600;
box-shadow: var(--am-shadow);
transform: translateY(calc(-100% - var(--am-gap) * 2));
transition: transform var(--am-speed) var(--am-ease);
}
.am-skip-link:focus-visible {
transform: translateY(0);
color: #fff;
outline-color: #fff;
}
/* =============================================================================
3. LAYOUT
=============================================================================
Every class in this section is referenced by a template. Before this rewrite
.americon-page-container, .americon-page-header, .americon-calendar-card,
.site-main and .americon-login-page appeared in markup with zero rules
behind them, so the "calendar card" was a bare div and the dashboard was the
only unpadded page on the site.
========================================================================== */
/* A flat 3px rule, not the three-stop red-to-blue gradient it was. A gradient
across the full width of the window is the most decorative element a page
can open with -- it reads as a banner, and it put a second accent colour on
screen before the first piece of content. One solid brand line does the same
job of claiming the page and then stops asking for attention. */
.americon-topbar {
height: 3px;
background: var(--am-rule);
}
.site-main {
flex: 1 0 auto; /* pushes the footer to the bottom on short pages */
display: block;
}
/* The one page shell. Templates pair it with nothing else. */
.americon-page-container {
width: 100%;
max-width: var(--am-shell-max);
margin-inline: auto;
padding-inline: var(--am-shell-pad);
padding-block: clamp(1.25rem, .8rem + 1.8vw, 2.5rem);
}
.americon-page-container.is-wide {
max-width: 1400px;
}
/* A shell inside a shell is one shell.
-----------------------------------
The templates open the container, and several shortcodes open one of their
own as well -- [project_edit] does, because it is also placed by hand on
pages that have no template around it. Where both happen the page pays for
the padding twice: up to 5rem of nothing between the site header and the
project title, and a reading measure inset by two gutters on each side.
That is what put the empty band under the navbar on /project-details. It is
fixed here, once, rather than by teaching each shortcode whether it has been
wrapped -- a shortcode cannot know, and the two that guessed would disagree.
The outer shell keeps its padding and its measure; the inner one becomes a
plain block. Nothing needs to change in any template or any shortcode, and a
shortcode dropped on a bare page still gets its shell, because then it is the
outer one. */
.americon-page-container .americon-page-container {
max-width: none;
padding-inline: 0;
padding-block: 0;
}
.americon-page-header {
margin-bottom: var(--am-gap-lg);
text-align: center;
}
.americon-page-header .entry-title,
.americon-page-title {
font-size: var(--am-text-2xl);
font-weight: 800;
letter-spacing: -.02em;
margin: 0;
color: var(--am-text);
}
/* The red rule under page titles replaces the old all-red heading, which was
heavy at large sizes and failed contrast against the light canvas.
It was a 3.5rem x 3px pill, and a rounded lozenge floating under a heading
is an ornament -- the pill radius in particular reads as a shape someone
placed rather than a rule that belongs to the type. Now 2.25rem x 2px with
effectively square ends: narrower than the shortest title it can sit under,
so it stays a tick mark against the heading instead of a swash, and the same
weight as a hairline rule elsewhere on the page. */
.americon-page-header .entry-title::after,
.americon-page-title::after {
content: "";
display: block;
width: 2.25rem;
height: 2px;
margin: .6rem auto 0;
border-radius: 1px;
background: var(--am-rule);
}
/* A dek, not a paragraph: it should sit on one line on a desktop and only
wrap when the viewport genuinely cannot hold it. 62ch was a prose measure
and broke an 82-character sentence across two lines on a 1600px screen.
text-wrap: balance splits it evenly rather than orphaning a word when it
does wrap on a phone. */
.americon-page-subtitle,
.americon-page-header + .lead {
margin: .75rem auto 0;
max-width: min(100%, 92ch);
color: var(--am-text-muted);
font-size: var(--am-text-md);
text-wrap: balance;
}
/* =============================================================================
4. COMPONENTS
========================================================================== */
/* --- 4.1 Header & navigation --------------------------------------------- */
.site-header {
background-color: var(--am-header-bg);
border-bottom: 1px solid var(--am-border);
position: sticky;
top: 0;
z-index: 1030;
-webkit-backdrop-filter: saturate(1.4) blur(8px);
backdrop-filter: saturate(1.4) blur(8px);
}
.site-header .navbar {
padding-block: .5rem;
background: transparent;
}
/* The nav band rides the chrome shell, not the reading column. The markup
reuses .americon-page-container for its padding and centring, and that
class caps at the reading column -- which put the logo 250px inboard of
the calendar dashboard's own left edge, floating in the middle of a
full-bleed bar. Overriding the cap here keeps the padding and drops the
part that does not apply to chrome. */
.site-header .navbar > .americon-page-container {
max-width: var(--am-shell-chrome);
}
.americon-navbar-logo {
height: clamp(38px, 3.2vw, 52px);
width: auto;
}
/* The logo art is white-on-transparent, so it needs a dark plate in light mode
and none in dark mode. */
@media (prefers-color-scheme: light) {
.navbar-brand {
background: var(--am-blue);
padding: .3rem .7rem;
border-radius: var(--am-radius);
}
}
.navbar-brand:focus-visible {
outline-offset: 3px;
}
/* Role-aware action nav on the right of the header. */
.am-nav-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--am-gap-xs);
list-style: none;
margin: 0;
padding: 0;
}
.am-nav-link {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .4rem .75rem;
border-radius: var(--am-radius-sm);
border: 1px solid transparent;
font-size: var(--am-text-sm);
font-weight: 500;
color: var(--am-text);
/* These are buttons in every other respect -- padded, bordered on hover,
one of them filled red -- and nothing here ever turned off the browser's
default underline, so the whole header nav, "Sign in" included, rendered
underlined. The hover plate is what carries affordance here. */
text-decoration: none;
white-space: nowrap;
transition: background-color var(--am-speed) var(--am-ease),
border-color var(--am-speed) var(--am-ease),
color var(--am-speed) var(--am-ease);
}
.am-nav-link:hover {
background: var(--am-surface-sunk);
border-color: var(--am-border);
color: var(--am-text);
}
/* Marks the page you are on. Paired with aria-current="page" in header.php so
it is announced, not just coloured. */
.am-nav-link[aria-current="page"] {
background: color-mix(in oklab, var(--am-accent) 12%, transparent);
border-color: color-mix(in oklab, var(--am-accent) 35%, transparent);
color: var(--am-accent-ink);
font-weight: 600;
}
.am-nav-link--primary {
background: var(--am-red);
border-color: var(--am-red);
color: #fff;
font-weight: 600;
}
.am-nav-link--primary:hover {
background: var(--am-red-dark);
border-color: var(--am-red-dark);
color: #fff;
}
.am-nav-link--danger {
color: var(--am-danger-ink);
border-color: color-mix(in oklab, var(--am-danger) 35%, transparent);
}
.am-nav-link--danger:hover {
background: color-mix(in oklab, var(--am-danger) 10%, transparent);
border-color: var(--am-danger);
color: var(--am-danger-ink);
}
.am-nav-link--quiet {
color: var(--am-text-muted);
}
/* Who is signed in. A span, not a link -- see the note in header.php.
Baseline alignment rather than centre, so the name and the smaller role
sit on one reading line instead of floating at different heights. */
.am-nav-identity {
display: inline-flex;
align-items: baseline;
gap: .4rem;
padding: .4rem .25rem;
font-size: var(--am-text-sm);
white-space: nowrap;
}
.am-nav-identity-name {
font-weight: 600;
color: var(--am-text);
}
/* --am-text-muted, the same ink Sign out carries. Already measured against
every surface by tests/test-contrast.php, so this adds no new token to the
palette and nothing to the coverage gate. */
.am-nav-identity-role {
font-size: var(--am-text-xs);
color: var(--am-text-muted);
}
/* Between the point the nav stops collapsing and roughly 1200px an
administrator carries eight items plus a name, and .am-nav-list wraps to a
second row. The role is the least load-bearing thing there -- the name
still answers "whose session is this?" -- so it is what gives way.
Below 992px the whole nav is a stacked menu with room for both. */
@media (min-width: 992px) and (max-width: 1199.98px) {
.am-nav-identity-role { display: none; }
}
/* Divider before the sign-out control. */
.am-nav-sep {
width: 1px;
align-self: stretch;
margin-inline: .35rem;
background: var(--am-border);
}
@media (max-width: 991.98px) {
.site-header { position: static; }
.am-nav-sep { display: none; }
/* The opened menu needs a row of its own.
Bootstrap gives .navbar-collapse `flex-basis: 100%` exactly so it wraps
under the brand and the toggler, and its own .container carries
`flex-wrap: inherit` to let that happen. This header uses
.americon-page-container instead, which is a plain block made into a flex
row by .d-flex -- and flex-wrap then defaults to nowrap. So the panel had
nowhere to go: opening it put a full-width item onto a single unwrappable
row and crushed the logo and the toggler sharing it.
Gated below the expand breakpoint. Above it the three items belong on one
line, which is what nowrap is already doing correctly. */
.site-header .navbar > .americon-page-container {
flex-wrap: wrap;
}
/* Stacked, not a wrapping row of pills.
.am-nav-list is a horizontal action bar at desktop widths and was
inheriting that here, which is what made an opened menu read as a ragged
block of buttons rather than as a menu -- .am-nav-link is
`white-space: nowrap`, so the items could not even break evenly. */
.am-nav-list {
flex-direction: column;
align-items: stretch;
padding-block: var(--am-gap-sm);
}
/* Full-width rows. `display: flex` rather than the inline-flex above is what
lets a link fill the row it now owns; the block padding is what takes it
from roughly 32px to the 44px a thumb needs. */
.am-nav-link {
display: flex;
justify-content: flex-start;
padding-block: .7rem;
white-space: normal;
}
}
/* --- 4.2 Surfaces & cards ------------------------------------------------- */
.am-surface {
background: var(--am-surface);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-lg);
box-shadow: var(--am-shadow);
}
.americon-calendar-section {
display: block;
}
/* A layout wrapper only. The card chrome belongs to the calendar component
itself (dashboard_plugin/assets/cal.css) so the shortcode renders finished
wherever it is used -- putting it here would leave a bare calendar on any
page that is not the dashboard template. Content that is *not* the calendar
(a page body typed into the dashboard page) still gets a surface. */
.americon-calendar-card {
display: block;
}
.americon-calendar-card > :not(.am-bid-calendar):only-child {
display: block;
padding: clamp(1rem, .7rem + 1.4vw, 1.75rem);
background: var(--am-surface);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-lg);
box-shadow: var(--am-shadow);
}
/* --- 4.2c Calendar dashboard: the whole month on one screen ----------------
A month grid is a scanning tool. Having to scroll to see the second half of
the month defeats the point -- you cannot compare the 8th with the 24th if
only one of them is on screen at a time.
Nothing here constrains a height. An earlier version made this page a
viewport-tall flex column and let the calendar take the leftover, which
backfired: handed a fixed height it could not honour, FullCalendar clipped
the month and put a scrollbar inside the grid. The height now comes out of
the row height instead, which cal.js measures and adjusts -- see the "Fit
mode" note in dashboard_plugin/assets/cal.css.
What is left here is the other half of the job: reclaiming the vertical
space between the title and the grid, which is spacing rather than content
and is worth more as calendar rows. Every one of these rules removes
padding; none removes anything from the page.
Keyed off the template's own body class, not off :has(.am-bid-calendar
.is-fit) as it was.
Hanging the page chrome off the calendar's `fit` attribute made the whole
layout depend on how one shortcode happened to be called, and it failed
exactly that way in production: this page's BODY had a bare [bid_calendar]
typed into it, so page-calendar-dashboard.php took its "the content already
places a calendar" branch, the body's copy rendered with no attributes, and
every rule below stopped matching at once. The result was a page that looked
like its stylesheet had not loaded, with nothing to point at.
The dependency was also backwards. These rules style the page's own
furniture -- its title block, its tiles, its footer -- none of which the
calendar owns or should get a vote on. WordPress puts
page-template-page-calendar-dashboard on for this template on every
render, whatever the body content says, so that is the honest switch. It
drops the :has() requirement as a side benefit.
`fit` still exists and still matters: it is what cal.css tightens the card's
own padding on, and what cal.js reads to decide whether to shrink day cells
to fit the window. It just governs the calendar now instead of the page. */
/* The page's own spacing, ungated.
These three sat inside the width query with everything else and so went
missing on exactly the windows that needed them most. They take height out
of margins, never out of content, and a narrow screen is not harmed by a
tighter gap above the title -- so there is nothing here worth gating.
The top pad is deliberately smaller than the bottom: the site header above
it already ends in a rule, so the title does not need a further half-inch of
air to read as separate from it, and every pixel spent there is one the
month grid does not get. */
.page-template-page-calendar-dashboard .site-main > .americon-page-container {
padding-top: var(--am-gap-sm);
padding-bottom: var(--am-gap);
}
/* Every gap in the stack above the grid is now the small step rather than the
full one. Individually these are 6px each; together with the tighter top pad
they come to most of a calendar row, and a row of month is worth more than
the air between a heading and the figures it introduces. */
.page-template-page-calendar-dashboard .site-main .americon-page-header,
.page-template-page-calendar-dashboard .site-main .am-stats {
margin-bottom: var(--am-gap-sm);
}
.page-template-page-calendar-dashboard .site-main .americon-page-header .entry-title {
font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
}
/* Wider than the standard shell. A month grid is seven columns of names, and
it is the only content on the page -- the 1400px cap that suits a form or a
list of projects just leaves gutters here. Capped rather than fluid so the
day cells stop growing on a very wide monitor, where a 300px-wide Tuesday
helps nobody. */
.page-template-page-calendar-dashboard .americon-page-container.is-wide {
max-width: var(--am-shell-wide);
}
/* Gated on width only. It used to carry `and (min-height: 44rem)` as well,
which had the logic backwards: a window shorter than 704px was handed the
ROOMY layout -- the full-height title block, the three-line tiles, the
stacked footer -- and so was the one window guaranteed to scroll. The
compaction is worth most exactly where there is least height to spend, and
cal.js is already measuring the real overflow underneath it either way.
Width is still a real gate -- below this the tiles wrap anyway, the view
switch has no margin to sit in beside the title, and a phone scrolls
comfortably -- but it was set at 62rem (992px), which is higher than the
layout actually needs and high enough to be missed by an ordinary desktop.
A 1465px window at 150% browser zoom is 977 CSS px: under the old gate by
fifteen pixels, so the page rendered with its colours (ungated) and none of
its compaction (gated), which looks like a half-loaded stylesheet rather
than a breakpoint.
56rem (896px) is what the contents want. Three tiles at their 13rem minimum
plus gaps come to ~656px, and the centred title clears the absolutely
positioned switch with room to spare, so nothing here collides before the
tiles wrap of their own accord.
THIS COMMENT USED TO SIT ABOVE `.site-main > .americon-page-container`, and
it sat there UNOPENED -- the `/*` had been lost in an edit, so twenty lines
of prose were live CSS tokens. A stylesheet cannot report that: the parser
simply keeps collecting the garbage as a selector prelude until it meets the
next `{`, swallows the rule that brace belonged to, and carries on. What was
swallowed was the page container's own padding, which is why this page had
40px of dead air above its title and below its subscribe band while every
rule around it applied normally. */
@media (min-width: 56rem) {
/* Footer: one line instead of three.
At rest it is the single tallest block on this page after the calendar --
167px of logo, brand, links and copyright, on a dashboard someone keeps
open all day. Everything in it stays; it just stops being stacked, and the
logo mark goes since the brand is spelled out in words beside it and again
in the header above.
The screens that share this are exactly the ones that ask to fit the
window: the month grid, and both project editors (4.2d). A second copy of
these four rules per page was the alternative -- 120px of footer is 120px
whichever page it is under, and one of the copies would have drifted.
They are keyed differently, and the difference matters. The dashboard has
its page-template body class; the editors are found by the marker their
own shortcodes print, because the equivalent body class is not reliably
there. See 4.2d.
Keyed on .am-editor and not on .is-enhanced, unlike 4.2d: a shorter footer
is right on this screen whether or not the script ran, and it costs
nothing if the page below it scrolls. */
.page-template-page-calendar-dashboard .americon-footer,
body:has(.am-editor) .americon-footer {
margin-top: var(--am-gap);
padding-block: .55rem;
}
.page-template-page-calendar-dashboard .americon-footer .americon-footer-inner,
body:has(.am-editor) .americon-footer .americon-footer-inner {
grid-template-columns: auto 1fr auto;
gap: 0 var(--am-gap-lg);
}
.page-template-page-calendar-dashboard .americon-footer .americon-footer-logo-link,
body:has(.am-editor) .americon-footer .americon-footer-logo-link {
display: none;
}
/* The copyright spans every column by default, which puts it on a second row
under its own divider -- 52px for one line of small grey text. In the
third column it rides along on the row that already exists. */
.page-template-page-calendar-dashboard .americon-footer .americon-footer-meta,
body:has(.am-editor) .americon-footer .americon-footer-meta {
grid-column: auto;
padding-top: 0;
border-top: 0;
text-align: right;
font-size: var(--am-text-xs);
white-space: nowrap;
}
/* Links move off the right edge now that the copyright is sitting there. */
.page-template-page-calendar-dashboard .americon-footer .americon-footer-links,
body:has(.am-editor) .americon-footer .americon-footer-links {
justify-content: center;
}
}
/* --- 4.2d The project editors: the form on one screen ----------------------
Both of them: the create form and the edit screen. They are the same
component -- one