/* ============================================================================
Design tokens — same flat palette used in the client wireframes, so the
real app matches what was already signed off.
============================================================================ */
:root {
--surface-0: #f5f5f0;
--surface-1: #efefea;
--surface-2: #ffffff;
--text-primary: #1a1a18;
--text-secondary: #5c5c58;
--text-muted: #9a9a94;
--border: rgba(0, 0, 0, 0.10);
--border-strong: rgba(0, 0, 0, 0.18);
--radius: 8px;
--accent: #1a56db;
--accent-bg: #e6f1fb;
--success: #3B6D11;
--success-bg: #eaf3de;
--danger: #A32D2D;
--danger-bg: #fcebeb;
--warning: #633806;
--warning-bg: #faeeda;
/* Dark chrome (topnav/sidebar/login page background) — reskin, 2026-09-14.
Deliberately separate from the --surface- and --text- tokens above:
those still drive card and page-content surfaces (dashboard cards,
the auth card) which stay light by design, so the reskin only ever
targets these new tokens. */
--chrome-bg: #081028;
--chrome-border: rgba(255, 255, 255, 0.08);
--chrome-text: #b7bad4;
--chrome-text-muted: #7f83a6;
--chrome-text-strong: #e7e8f2;
--chrome-active: #e0208f;
--page-bg-dark: #1E1E1E;
}
html, body {
height: 100%;
}
body {
background: var(--surface-0);
color: var(--text-primary);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
margin: 0;
}
/* Letterboxing behind the boxed/centered app shell (.app-topnav/.app-body
above) — scoped to this one class, added only to _Layout.cshtml's ,
so _LayoutAuth's and the Error page's own body backgrounds are untouched.
Deliberately a shade darker than --chrome-bg (#05070f vs #12162c) so the
centered box reads as a distinct object against the page rather than
blending into it. Reskin, 2026-09-14. */
body.app-shell-body {
background: var(--page-bg-dark);
}
a {
color: var(--accent);
}
/* ============================================================================
App shell — topnav + collapsible sidebar
Dark chrome + boxed/centered layout, reskin 2026-09-14 (Matt's Figma).
Deliberately scoped to .app-topnav/.app-sidebar only — .app-main and the
cards inside it keep the light --surface-* tokens untouched, per Matt's
"dashboard cards stay white" call. The mobile .offcanvas-body menu (see
_Layout.cshtml) is left on its original light styling below — it wasn't
part of what was previewed/approved, so it isn't changed here.
============================================================================ */
.app-topnav {
background: var(--chrome-bg);
border-bottom: 1px solid var(--chrome-border);
/* Taller bar per Matt's reference (2026-09-14): measured off the Figma
dev-mode screenshot at ~124px tall, achieved here via padding rather
than a fixed height so it still hugs the (now full-size) logo. */
padding: 2.25rem 1.5rem;
max-width: 1440px;
margin: 0 auto;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.app-topnav .text-secondary,
.app-topnav i {
color: var(--chrome-text-strong) !important;
}
.app-logo {
width: 30px;
height: 30px;
border-radius: 8px;
object-fit: cover;
display: inline-block;
vertical-align: middle;
}
/* The topnav's own logo — a wide icon+wordmark lockup, not the square icon
.app-logo above is sized for, so it gets its own id-scoped override rather
than changing .app-logo (which the small 36x36 icon on the secondary
Account pages below still relies on at its original size/shape). */
#navLogo {
width: auto;
/* Was pulse-lockup.png (247x51, PNG); swapped 2026-09-15 for
pulse-logo-horizontal-white.svg (Matt's "Pulse Logo - White Text -
Horizontal" file, renamed to this project's kebab-case convention).
The topnav is dark chrome, so this needs the white-fill variant — unlike
Login.cshtml/Register.cshtml's .auth-logo-chip, which sits on the plain
white .auth-card and uses the dark-fill pulse-logo-horizontal.svg
instead (no dark backing box there — see .auth-logo-chip's own comment).
Both variants share the same 3617.2x731.1 viewBox (~4.85:1), the same
aspect ratio as the old PNG, so this height still gives the same
on-screen size. Vector now, so it stays crisp at any pixel density
rather than being capped at the old PNG's native resolution. */
height: 51px;
border-radius: 0;
object-fit: contain;
}
/* Wide "loopaNZ" wordmark used on the auth (Login/Register) card header — deliberately
separate from .app-logo, which is sized/cropped (30x30, object-fit:cover) for the
small square dark nav icon used everywhere else and is the wrong shape for this
wide logo. */
.auth-logo {
display: block;
height: 60px;
width: auto;
max-width: 100%;
align-self: center; /* the header is a flex-column container (default
align-items:stretch), which would otherwise stretch this fixed-height image
across the full row width, squashing/distorting it */
margin: 0 auto;
}
/* Wraps the on Login.cshtml/Register.cshtml — no
background here, 2026-09-16: Matt wants the plain dark-fill logo
(pulse-logo-horizontal.svg) directly on the white .auth-card, not the
white-fill variant boxed in a dark chip (that was reskin 2026-09-14's
approach, and the dark box itself was the complaint — it obscured the
logo rather than showing it off). Kept as its own class rather than
dropped from the markup in case a future auth-page tweak needs to target
just this wrapper again. */
.auth-logo-chip {
display: inline-flex;
}
/* The logo on Login/Register/Forgot password links back to the public website ("/"). */
.auth-logo-link {
display: block;
}
.app-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--accent-bg);
color: var(--accent);
font-weight: 600;
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.app-body {
display: flex;
min-height: calc(100vh - 57px);
max-width: 1440px;
margin: 0 auto;
background: var(--surface-0);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.app-sidebar {
width: 220px;
flex-shrink: 0;
background: var(--chrome-bg);
border-right: 1px solid var(--chrome-border);
padding: 0.75rem 0;
}
/* Same _SidebarNav.cshtml partial renders in both the desktop .app-sidebar and
the mobile .offcanvas-body (see _Layout.cshtml) — these selectors have to
match both containers, or the mobile menu falls back to unstyled links. */
.app-sidebar .nav-section,
.offcanvas-body .nav-section {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: .06em;
padding: 0.75rem 1rem 0.25rem;
}
.app-sidebar .nav-link,
.offcanvas-body .nav-link {
color: var(--text-secondary);
padding: 0.5rem 1rem;
font-size: 14px;
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 0;
text-decoration: none;
}
.app-sidebar .nav-link i,
.offcanvas-body .nav-link i {
font-size: 17px;
}
.app-sidebar .nav-link.active,
.app-sidebar .nav-link:hover,
.offcanvas-body .nav-link.active,
.offcanvas-body .nav-link:hover {
background: var(--surface-1);
color: var(--text-primary);
}
/* Dark-sidebar colour overrides — .app-sidebar only, layered on top of the
shared rules above rather than replacing them, so .offcanvas-body (the
mobile menu) keeps its original light styling untouched. Reskin, 2026-09-14. */
.app-sidebar .nav-section {
color: var(--chrome-text-muted);
}
.app-sidebar .nav-link {
color: var(--chrome-text);
}
.app-sidebar .nav-link:hover {
background: rgba(255, 255, 255, 0.06);
color: #e01fb5;
}
.app-sidebar .nav-link.active {
background: transparent;
color: var(--chrome-active);
}
.app-main {
flex: 1;
padding: 1.25rem;
min-width: 0;
}
/* Collapse sidebar into an offcanvas below md */
@media (max-width: 767.98px) {
.app-sidebar {
display: none;
}
}
/* ============================================================================
Cards / metric stats
============================================================================ */
.stat-card {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.75rem 1rem;
}
.stat-val {
font-size: 1.4rem;
font-weight: 600;
}
.stat-label {
font-size: 0.8rem;
color: var(--text-secondary);
}
.stat-delta {
font-size: 0.8rem;
color: var(--success);
}
/* Edit-page hero preview band (Posts/Edit.cshtml, Admin/Content/Edit.cshtml, via
Shared/_MediaHeroPreview.cshtml) — same visual language as a Dashboard card's own
image band (.article-card .card-img below): full width, rounded top corners,
object-fit:cover. The negative margin exactly cancels .stat-card's own padding
(0.75rem 1rem, above) so this sits flush against the card's top/left/right edges
despite being a normal padded child of it — .stat-card itself is deliberately left
untouched rather than given its own overflow:hidden/zero padding, since plenty of
other .stat-card usages across the app (dashboard metric tiles, etc.) rely on that
padding applying uniformly on every side. Matt's own ask, 2026-08-13, after the
plain small img-thumbnail preview this replaced read as too small/easy to miss next
to a scraped listing's real photo. */
.media-hero-preview {
margin: -0.75rem -1rem 0.75rem -1rem;
border-radius: var(--radius) var(--radius) 0 0;
overflow: hidden;
background: var(--surface-1);
}
/* 2026-08-24 (Matt's own ask): this preview was fixed at 16:9 with object-fit:cover,
which crops anything that isn't already that shape — most visibly, a baked Social
Tile (Infrastructure/Content/ImageSharpSocialTileRenderer.cs), which renders at
whatever the Template's own background image's native aspect ratio is (often
square/portrait, not 16:9). object-fit:cover centers its crop, so the star row
drawn near the very top of the tile and the last line or two of the description
band at the very bottom were BOTH silently cut off — not a rendering bug, just
never visible in this preview. Switched to a Facebook/Instagram-style "show the
whole image, letterboxed" box instead: a fixed max-height so the card doesn't grow
unboundedly for a tall template, object-fit:contain so nothing is ever cropped, and
a dark letterbox background for the empty space either side of a non-matching
aspect ratio (same idea as how those platforms themselves preview an upload before
you post it). */
.media-hero-preview .js-media-hero-image-wrap,
.media-hero-preview .js-media-hero-video-wrap {
display: flex;
align-items: center;
justify-content: center;
background: #000;
position: relative; /* anchors Posts/Edit.cshtml's own live-preview loading spinner overlay */
}
.media-hero-preview img,
.media-hero-preview video {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 480px;
margin: 0 auto;
}
/* ============================================================================
Article grid (Instagram-style dashboard cards)
============================================================================ */
.article-card {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
height: 100%;
/* Bootstrap's row/col flexbox already stretches every card in the same visual
row to equal height — the actual bug was that the content below the image
(title/excerpt/optional Source line) is normal block flow, so a card with a
1-line excerpt and no Source left its Post/Edit/Thumbs-down row sitting higher
up than a card with a 2-line excerpt plus a Source line, with the leftover
equal-height space landing as invisible padding below the buttons instead.
Making this a flex column lets the action row opt into .mt-auto
(_DashboardCards.cshtml's .p-3 wrapper is flex-column too) to always sit flush
against the bottom of the card, regardless of how much sits above it. */
display: flex;
flex-direction: column;
}
.article-card .card-img {
height: 210px;
background: var(--surface-1);
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 24px;
}
/* Dashboard card grid: 2-up by default (col-sm-6), 3-up at lg and above
(col-lg-4, Bootstrap classes on .dashboard-card-col in _DashboardCards.cshtml).
Matt's call, 2026-09-14: capped at 3-up even on ultra-wide monitors — the old
4-up (col-xl-3) and 5-up (custom 1600px breakpoint) tiers read as too
squashed once the app shell was boxed to a 1440px centered column, so both
are removed here rather than re-tuned. */
/* Multi-photo post on a Dashboard card (added 2026-09-24): the post's photos in the same
210px image band, in the grid Facebook uses — 2 side by side; 3 one large left and two
stacked; 4 one large on top and three below; 5 two on top and three below, "+N" on the
last when there are more. */
.card-multi-grid {
position: absolute;
inset: 0;
display: grid;
gap: 2px;
}
.card-multi-grid-cell {
position: relative;
overflow: hidden;
min-height: 0;
}
.card-multi-grid-cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.card-multi-grid-2 { grid-template-columns: 1fr 1fr; }
.card-multi-grid-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.card-multi-grid-3 .card-multi-grid-cell:first-child { grid-row: span 2; }
.card-multi-grid-4 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 3fr 2fr; }
.card-multi-grid-4 .card-multi-grid-cell:first-child { grid-column: span 3; }
.card-multi-grid-5 { grid-template-columns: repeat(6, 1fr); grid-template-rows: 3fr 2fr; }
.card-multi-grid-5 .card-multi-grid-cell:nth-child(-n+2) { grid-column: span 3; }
.card-multi-grid-5 .card-multi-grid-cell:nth-child(n+3) { grid-column: span 2; }
.card-multi-grid-more {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.45);
color: #fff;
font-size: 1.25rem;
font-weight: 600;
}
.multi-photo-badge {
position: absolute;
left: 8px;
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: var(--radius);
background: rgba(0, 0, 0, 0.6);
color: #fff;
z-index: 1;
}
.src-badge {
position: absolute;
top: 8px;
left: 8px;
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: var(--radius);
text-transform: uppercase;
letter-spacing: .04em;
background: var(--warning-bg);
color: var(--warning);
}
.new-badge {
position: absolute;
top: 8px;
right: 8px;
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: var(--radius);
text-transform: uppercase;
letter-spacing: .04em;
background: var(--success-bg);
color: var(--success);
}
/* Trending/Hot badge — bottom-left of the card image, deliberately away from the
src-badge/new-badge/Headline pill cluster already occupying the top corners. */
.trending-badge {
position: absolute;
bottom: 8px;
left: 8px;
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: var(--radius);
text-transform: uppercase;
letter-spacing: .04em;
background: var(--danger-bg);
color: var(--danger);
display: inline-flex;
align-items: center;
gap: 3px;
}
/* Anonymized shared-impression count — bottom-right of the card image, next to an
eye icon, per Matt's spec ("down bottom right where the picture sits"). */
.impression-count {
position: absolute;
bottom: 8px;
right: 8px;
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: var(--radius);
background: rgba(0, 0, 0, 0.55);
color: #fff;
display: inline-flex;
align-items: center;
gap: 3px;
}
.plat-badge {
font-size: 10px;
padding: 2px 6px;
border-radius: var(--radius);
font-weight: 600;
}
.plat-fb { background: var(--accent-bg); color: #0C447C; }
.plat-ig { background: var(--danger-bg); color: #4b1528; }
.plat-li { background: var(--accent-bg); color: #042c53; }
.card-title-sm {
font-size: 13px;
font-weight: 600;
line-height: 1.4;
}
.card-excerpt {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.action-btn {
flex: 1;
font-size: 12px;
font-weight: 600;
border-radius: var(--radius);
border: 1px solid;
padding: 0.3rem 0;
/* Explicit rather than relying on browser/element defaults — a plain