/* ================================================================================================
* BASELINE — KMA CSS MODULE 06 — NOTICES / ROAD PROJECT UPDATES UI
* ================================================================================================
*
* FILE: 06-notices.css
* VERSION: 1.0
* Last Updated: 2026-03-21
*
* OWNS (LIST PAGE)
* ----------------
* - .road-updates
* - .road-post
* - .km-road-title
* - .km-post-badge, .km-post-badge__label, .km-post-badge__date
* - .km-badge--resident / .km-badge--committee (badge variants in list context)
*
* OWNS (SINGLE POST PAGE)
* -----------------------
* - body.single-post h1.entry-title badge group styling
* - .km-post-label (resident-label / committee-label)
* - .post-date badge merge styling
* - Backlink block:
* .km-backlink-wrap, .km-backlink
*
* OWNS (NOTICES PAGE HEADER + ACTIONS)
* ------------------------------------
* - .km-posts-header
* - .km-posts-actions
* - Any notices-specific button helpers (if still used):
* .km-btn--question, .km-btn--notice
*
* OWNS (SUBMIT FORMS FOR NOTICES)
* -------------------------------
* - .km-post-submit
* - .km-post-submit .km-field / .km-actions spacing rules
*
* PURPOSE
* -------
* - Keep the Notices listing and single post pages visually consistent.
* - Provide structured, scoped styling hooks for the Notices feature set.
*
* NOTES
* -----
* - Avoid styling generic .elementor-button here unless scoped to your wrappers.
* - Keep all “Notices system” selectors in this file so it’s easy to reason about.
*
* GOAL
* ----
* - Give the Road Project list page and single post page the same “Option 2” badge look:
* - squared corners (not pill)
* - label + date grouped together visually as one badge
* - Different styling per category:
* - Committee Notice
* - Resident Question
*
* ASSUMPTIONS
* -----------
* - List page markup (recommended):
*
* Title
*
* ...
* ...
*
*
*
* - Single page markup (Option B you chose; label then date):
*
* Title
* (...)
* mm/dd/yyyy
*
*
* IMPORTANT
* ---------
* - NO LOGIC OR STRUCTURAL CHANGES HAVE BEEN MADE.
* - Duplicate declarations remain intentionally preserved as part of baseline.
* - This snapshot reflects the working production version.
*
* ================================================================================================ */
/* =============================================================================
* MODULE 06A — LIST PAGE LAYOUT (ROAD PROJECT UPDATES LISTING)
* -----------------------------------------------------------------------------------------------
* - Controls spacing and alignment for the title + badge row.
* ============================================================================= */
.road-updates .road-post h3.km-road-title{
/**** Use flex so title and badge align on one row when space allows. ****/
display: flex;
/**** Allow badge to wrap cleanly beneath long titles on smaller screens. ****/
flex-wrap: wrap;
/**** Align badge baseline with title text. ****/
align-items: baseline;
/**** Row-gap / column-gap between title and badge pieces. ****/
gap: .35em .6em;
/**** Tighten default heading spacing. ****/
margin: 0 0 .35em 0;
/**** Stable readable line height for wrapped titles. ****/
line-height: 1.35;
}
.road-updates .road-post h3.km-road-title a{
/**** Slightly emphasize the notice title link. ****/
font-weight: 600;
/**** Remove default underline in resting state. ****/
text-decoration: none;
}
.road-updates .road-post h3.km-road-title a:hover{
/**** Restore underline on hover for discoverability. ****/
text-decoration: underline;
}
/* Keep badge from shrinking/compressing when titles are long */
.road-updates .road-post h3.km-road-title .km-post-badge{
/**** Prevent flexbox from squeezing the badge too tightly. ****/
flex-shrink: 0;
}
/* =============================================================================
* MODULE 06B — LIST PAGE BADGE (OPTION 2 — SQUARED)
* -----------------------------------------------------------------------------------------------
* - One combined badge with label + date inside.
* ============================================================================= */
.road-updates .km-post-badge{
/**** Keep label + date aligned inline within one visual badge. ****/
display: inline-flex;
align-items: center;
gap: .5em;
/**** Small offset from title text. ****/
margin-left: .35em;
/* padding: .25em .6em;
font-size: .82em; */
line-height: 1.2;
/**** Squared/soft-corner badge treatment. ****/
border-radius: 8px;
border: 1px solid rgba(0,0,0,.14);
background: rgba(0,0,0,.04);
/**** Keep label/date together on one line. ****/
white-space: nowrap;
vertical-align: baseline;
}
.road-updates .km-post-badge__label{
/**** Emphasize label portion of badge. ****/
font-weight: 600;
}
.road-updates .km-post-badge__date{
/**** Slightly soften the date portion. ****/
opacity: .85;
}
/* Category variants — LIST PAGE (matches actual DOM) */
.road-updates .km-badge--resident{
/**** Resident Question list badge colors. ****/
background: rgba(0,90,200,.08);
border-color: rgba(0,90,200,.25);
color: #1f4fa3;
}
.road-updates .km-badge--committee{
/**** Committee Notice list badge colors. ****/
background: rgba(0,128,0,.08);
border-color: rgba(0,128,0,.25);
color: #2f6b2f;
}
/* =============================================================================
* MODULE 06B1 — LIST PAGE: SMALLER BADGE (LABEL + DATE)
* -----------------------------------------------------------------------------------------------
* - Does NOT affect single post page.
* ============================================================================= */
.road-updates .km-post-badge{
/**** Smaller overall badge scale for list context. ****/
font-size: 0.6em;
padding: .18em .5em;
}
.road-updates .km-post-badge__label{
/**** Preserve label readability at reduced badge size. ****/
font-weight: 600;
}
.road-updates .km-post-badge__date{
/**** Slightly soften date in reduced-size list badges. ****/
opacity: 0.75;
}
/* =============================================================================
* MODULE 06C — SINGLE POST TITLE BADGE (OPTION 2 — GROUPED “TWO-PIECE” BADGE)
* -----------------------------------------------------------------------------------------------
* - Uses your existing spans:
* (...)
* mm/dd/yyyy
* - Styles them to look like one combined badge:
* [ Label | Date ]
* ============================================================================= */
/* Base look for both parts */
body h1.entry-title .km-post-label,
body h1.entry-title .post-date{
/**** Keep label/date inline and vertically centered. ****/
display: inline-flex;
align-items: center;
/**** Shared badge sizing for single-post title metadata. ****/
padding: .25em .6em;
font-size: .82em;
line-height: 1.2;
/**** Shared badge box styling. ****/
border: 1px solid rgba(0,0,0,.14);
background: rgba(0,0,0,.04);
border-radius: 8px;
/**** Keep each segment intact on one line. ****/
white-space: nowrap;
vertical-align: baseline;
}
/* Spacing away from the main title text */
body h1.entry-title .km-post-label{
/**** Create separation from main title text. ****/
margin-left: .6em;
font-weight: 600;
}
body h1.entry-title .post-date{
/**** Remove gap so date visually merges to the label segment. ****/
margin-left: 0;
opacity: .85;
}
/* Visually merge the two spans into one badge */
body h1.entry-title .km-post-label{
/**** Remove right-side rounding so label merges into date segment. ****/
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
body h1.entry-title .post-date{
/**** Remove left-side rounding and double border so segments merge cleanly. ****/
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0;
}
/* Category variants — SINGLE PAGE (label controls the color) */
body h1.entry-title .km-post-label.resident-label{
/**** Resident Question single-post label colors. ****/
background: rgba(0,90,200,.08);
border-color: rgba(0,90,200,.25);
color: #1f4fa3;
}
body h1.entry-title .km-post-label.resident-label + .post-date{
/**** Match date color to preceding resident label. ****/
color: #1f4fa3;
}
body h1.entry-title .km-post-label.committee-label{
/**** Committee Notice single-post label colors. ****/
background: rgba(0,128,0,.08);
border-color: rgba(0,128,0,.25);
color: #2f6b2f;
}
body h1.entry-title .km-post-label.committee-label + .post-date{
/**** Match date color to preceding committee label. ****/
color: #2f6b2f;
}
/* =============================================================================
* MODULE 06D — MOBILE TWEAKS
* -----------------------------------------------------------------------------------------------
* - Let the badge(s) drop nicely on narrow screens.
* ============================================================================= */
@media (max-width: 480px){
/* List page: keep readable */
.road-updates .road-post h3.km-road-title{
/**** Tighten gaps slightly on very small screens. ****/
gap: .35em .5em;
}
/* Single page: allow badge to wrap to next line cleanly */
body h1.entry-title .km-post-label,
body h1.entry-title .post-date{
/**** Add top margin when title metadata wraps beneath heading text. ****/
margin-top: .35em;
}
}
/* =============================================================================
* MODULE 06E — SINGLE POST: SMALLER TITLE + BADGE GROUP ON ONE SECOND LINE
* -----------------------------------------------------------------------------------------------
* - Keeps title readable while reducing badge scale in single-post context.
* ============================================================================= */
/* Title size (not tiny) */
body.single-post h1.entry-title{
/**** Moderate single-post title size. ****/
font-size: 2rem;
line-height: 1.2;
margin-bottom: .25em;
}
/* Make sure these stay INLINE (so backgrounds don’t stretch full width) */
body.single-post h1.entry-title .km-post-label,
body.single-post h1.entry-title .post-date,
body.single-post h1.entry-title .km-post-badge.km-badge--resident,
body.single-post h1.entry-title .km-post-badge.km-badge--committee{
/**** Force inline metadata segments / badges in the title area. ****/
display: inline-flex !important;
width: auto !important;
max-width: none !important;
white-space: nowrap;
}
/* Shrink badge group on single post */
body.single-post h1.entry-title .km-post-label,
body.single-post h1.entry-title .post-date{
/**** Reduce badge size for single-post title context. ****/
font-size: .50em;
padding: .18em .5em;
}
/* Keep label + date as one “merged badge” */
body.single-post h1.entry-title .km-post-label{
/**** Preserve merged-left segment behavior with no extra margins. ****/
margin-left: 0 !important;
margin-right: 0 !important;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
body.single-post h1.entry-title .post-date{
/**** Preserve merged-right segment behavior with no inner border gap. ****/
margin-left: 0 !important;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0;
}
.single-post .km-post-badge.km-badge--committee,
.single-post .km-post-badge.km-badge--resident{
/**** Hide list-style combined badges on single-post view. ****/
display: none !important;
}
/* =============================================================================
* MODULE 06F — SINGLE POST BACKLINK
* ============================================================================= */
.km-backlink-wrap {
/**** Space backlink block below/above adjacent content. ****/
margin: 0 0 12px 0;
}
.km-backlink {
/**** Backlink default appearance. ****/
text-decoration: none;
font-weight: 600;
}
.km-backlink:hover {
/**** Restore underline on hover for clarity. ****/
text-decoration: underline;
}
/* =============================================================================
* MODULE 06G — NOTICES PAGE HEADER + ACTIONS
* ============================================================================= */
.km-posts-header {
/**** Layout title and action buttons on one flexible row. ****/
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
}
.km-posts-actions {
/**** Keep notices action buttons grouped and aligned. ****/
display: flex;
gap: 0.75rem;
align-items: center;
}
.km-btn {
/**** Generic notices button sizing and typography. ****/
padding: 0.5rem 0.9rem;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.km-btn--question {
/**** Ask Question button colors. ****/
background: #f0f4ff;
color: #1e3a8a;
}
.km-btn--notice {
/**** Post Notice button colors. ****/
background: #0f766e;
color: #ffffff;
}
/* =============================================================================
* MODULE 06H — NOTICES SUBMIT FORM SPACING
* ============================================================================= */
/* Add breathing room above the photo upload field */
.km-post-submit .km-field input[type="file"] {
/**** Add top spacing above upload control. ****/
margin-top: 0.75rem;
}
/* Add space before the Photo field block itself */
.km-post-submit .km-field:has(input[type="file"]) {
/**** Add extra space before the upload field container. ****/
margin-top: 1.5rem;
}
.km-post-submit .km-actions{
/**** Align submit form action controls in a row. ****/
display:flex;
gap: 12px;
align-items:center;
margin-top: 2rem;
}
.km-post-submit .km-actions .km-btn--secondary{
/**** Remove underline from secondary action link/button styling. ****/
text-decoration:none;
}
/* ================================================================================================
* END OF MODULE 06
* ================================================================================================ */