/* ============================================================================ 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, not the dark-fill pulse-logo-horizontal.svg (that one is for light/white surfaces — see .auth-logo-chip below, which wraps the same white SVG in a dark chip for the same reason, on the opposite-coloured card). 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; } /* The new logo's wordmark is white (drawn to sit on the dark chrome above), so on the white .auth-card it needs a dark surface behind it — same --chrome-bg as the topnav/sidebar. Wraps the on Login.cshtml/Register.cshtml only; reskin 2026-09-14. */ .auth-logo-chip { display: inline-flex; padding: 10px 18px; border-radius: 10px; } .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: #fff; } .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. */ .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