/* =========================================================
DESIGN TOKENS
========================================================= */
:root {
/* Color palette — warm off-white + deep navy accent */
--paper: #F7F5F0; /* warm off-white background */
--paper-edge: #EFEBE2; /* deeper edge for subtle separation */
--ink: #1A1A1A; /* near-black for body */
--ink-soft: #383836; /* softened ink — body paragraphs */
--ink-muted: #5A5A58; /* secondary text */
--ink-faint: #8E8B83; /* tertiary, captions */
--rule: #D9D4C7; /* hairline rules */
--accent: #1B2845; /* deep navy — used sparingly */
--accent-warm: #6B4423; /* warm rust for one rare moment */
/* Type */
--serif: 'Fraunces', 'Times New Roman', Georgia, serif;
--sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
--mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
/* Spacing scale (8pt base, modular) */
--s-1: 4px;
--s-2: 8px;
--s-3: 16px;
--s-4: 24px;
--s-5: 32px;
--s-6: 48px;
--s-7: 64px;
--s-8: 96px;
--s-9: 128px;
--s-10: 192px;
/* Layout */
--content-max: 1200px;
--column-max: 680px;
}
/* =========================================================
RESET & BASE
========================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
scrollbar-gutter: stable;
}
body {
font-family: var(--sans);
font-weight: 400;
font-size: 17px;
line-height: 1.6;
color: var(--ink);
background: var(--paper);
min-height: 100vh;
overflow-x: hidden;
/* Subtle paper texture via layered gradients */
background-image:
radial-gradient(ellipse at 20% 0%, rgba(27, 40, 69, 0.018) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(107, 68, 35, 0.012) 0%, transparent 50%);
}
/* Paper grain overlay — fixed so it doesn't scroll, ultra-subtle */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.4;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)'/%3E%3C/svg%3E");
z-index: 1;
}
/* All content sits above the texture */
.page {
position: relative;
z-index: 2;
}
/* =========================================================
TYPOGRAPHY
========================================================= */
h1, h2, h3, h4 {
font-family: var(--serif);
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ink);
}
h1 {
font-size: clamp(48px, 7vw, 96px);
line-height: 1.02;
font-weight: 400;
letter-spacing: -0.035em;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
h2 {
font-size: clamp(32px, 4vw, 52px);
line-height: 1.08;
font-weight: 400;
letter-spacing: -0.025em;
font-variation-settings: "opsz" 96, "SOFT" 30;
}
h3 {
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.2;
font-weight: 500;
letter-spacing: -0.015em;
font-variation-settings: "opsz" 36, "SOFT" 20;
}
p {
max-width: 60ch;
margin-bottom: var(--s-3);
}
p.lede {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(20px, 1.8vw, 24px);
line-height: 1.45;
letter-spacing: -0.01em;
color: var(--ink);
max-width: 36ch;
font-variation-settings: "opsz" 36;
}
/* Label style — small caps mono, used for section markers */
.label {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* Section number — display-style serif numeral */
.numeral {
font-family: var(--serif);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.05em;
color: var(--accent);
font-variation-settings: "opsz" 14;
font-feature-settings: "lnum" 1;
}
a {
color: inherit;
text-decoration: none;
transition: color 200ms ease, opacity 200ms ease;
}
/* =========================================================
LAYOUT
========================================================= */
.container {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--s-5);
}
@media (max-width: 720px) {
.container {
padding: 0 var(--s-4);
}
}
/* Hairline rule */
.rule {
height: 1px;
background: var(--rule);
margin: 0;
border: none;
}
/* Standard section block — generous vertical rhythm */
section {
padding: var(--s-9) 0;
}
@media (max-width: 720px) {
section {
padding: var(--s-8) 0;
}
}
/* =========================================================
HERO
========================================================= */
.hero {
padding: var(--s-9) 0 var(--s-10);
position: relative;
}
@media (max-width: 720px) {
.hero {
padding: var(--s-7) 0 var(--s-9);
}
}
.hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-7);
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--s-5);
}
@media (min-width: 900px) {
.hero-grid {
grid-template-columns: 1fr 280px;
gap: var(--s-8);
align-items: end;
}
}
@media (max-width: 720px) {
.hero-grid {
padding: 0 var(--s-4);
}
}
.hero-meta {
display: flex;
gap: var(--s-3);
align-items: baseline;
margin-bottom: var(--s-6);
animation: fadeUp 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: 100ms;
}
.hero-meta-divider {
width: 24px;
height: 1px;
background: var(--ink-faint);
align-self: center;
}
.hero-headline {
animation: fadeUp 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: 250ms;
}
/* Italic accent word inside the headline */
.hero-headline em {
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
color: var(--accent);
}
.hero-sub {
margin-top: var(--s-5);
max-width: 38ch;
animation: fadeUp 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: 450ms;
}
.hero-sub p {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(19px, 1.6vw, 22px);
line-height: 1.45;
letter-spacing: -0.005em;
color: var(--ink-muted);
font-variation-settings: "opsz" 24;
}
.hero-cta {
margin-top: var(--s-6);
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: var(--sans);
font-size: 15px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
padding-bottom: 4px;
border-bottom: 1px solid var(--ink);
transition: gap 300ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease;
animation: fadeUp 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: 600ms;
}
.hero-cta:hover {
gap: 14px;
color: var(--accent);
border-bottom-color: var(--accent);
}
.hero-cta-arrow {
display: inline-block;
transform: translateY(-1px);
}
/* Right-side aside: the "card" with the meta info — gives the hero asymmetry */
.hero-aside {
animation: fadeUp 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: 800ms;
padding-bottom: var(--s-2);
}
.hero-aside-block {
padding-top: var(--s-3);
border-top: 1px solid var(--rule);
}
.hero-aside-block + .hero-aside-block {
margin-top: var(--s-4);
}
.hero-aside-label {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: var(--s-2);
}
.hero-aside-value {
font-family: var(--serif);
font-size: 17px;
font-weight: 400;
color: var(--ink);
line-height: 1.4;
font-variation-settings: "opsz" 24;
}
/* Animation */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================================
SECTION FRAMEWORK
========================================================= */
.section-head {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--s-5);
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
align-items: baseline;
margin-bottom: var(--s-7);
}
@media (min-width: 900px) {
.section-head {
grid-template-columns: 220px 1fr;
gap: var(--s-7);
}
}
@media (max-width: 720px) {
.section-head {
padding: 0 var(--s-4);
}
}
.section-meta {
display: flex;
gap: var(--s-3);
align-items: baseline;
}
.section-meta-divider {
width: 24px;
height: 1px;
background: var(--ink-faint);
align-self: center;
}
.section-title {
font-family: var(--serif);
font-size: clamp(28px, 3.4vw, 42px);
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--ink);
max-width: 22ch;
font-variation-settings: "opsz" 96, "SOFT" 30;
}
.section-title em {
font-style: italic;
font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 1;
}
/* =========================================================
APPROACH SECTION
========================================================= */
.approach {
border-top: 1px solid var(--rule);
}
.approach-body {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--s-5);
display: grid;
grid-template-columns: 1fr;
gap: var(--s-7);
}
@media (min-width: 900px) {
.approach-body {
grid-template-columns: 220px 1fr;
gap: var(--s-7);
}
}
@media (max-width: 720px) {
.approach-body {
padding: 0 var(--s-4);
}
}
.approach-aside {
max-width: 220px;
}
.approach-aside p {
font-family: var(--mono);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.7;
color: var(--ink-muted);
}
.approach-prose {
max-width: var(--column-max);
}
.approach-prose p {
font-family: var(--serif);
font-size: clamp(19px, 1.5vw, 22px);
font-weight: 300;
line-height: 1.55;
letter-spacing: -0.005em;
color: var(--ink);
max-width: 60ch;
font-variation-settings: "opsz" 24;
}
.approach-prose p + p {
margin-top: var(--s-4);
}
.approach-prose strong {
font-weight: 500;
color: var(--ink);
}
/* Drop cap on first paragraph */
.approach-prose p:first-child::first-letter {
font-family: var(--serif);
font-size: 4em;
line-height: 0.85;
float: left;
margin: 0.05em 0.08em -0.05em 0;
font-weight: 400;
color: var(--accent);
font-variation-settings: "opsz" 144, "SOFT" 30;
}
/* =========================================================
CAPABILITIES
========================================================= */
.capabilities {
border-top: 1px solid var(--rule);
}
.capability-list {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--s-5);
}
@media (max-width: 720px) {
.capability-list {
padding: 0 var(--s-4);
}
}
.capability {
padding: var(--s-6) 0;
border-top: 1px solid var(--rule);
display: grid;
grid-template-columns: 1fr;
gap: var(--s-4);
}
@media (min-width: 900px) {
.capability {
grid-template-columns: 80px 1fr 2fr;
gap: var(--s-6);
align-items: baseline;
}
}
.capability:last-child {
border-bottom: 1px solid var(--rule);
}
.capability-num {
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--ink-faint);
padding-top: 6px;
}
.capability-title {
font-family: var(--serif);
font-size: clamp(22px, 2vw, 28px);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--ink);
max-width: 22ch;
font-variation-settings: "opsz" 36, "SOFT" 30;
}
.capability-desc {
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
letter-spacing: -0.005em;
color: var(--ink-muted);
max-width: 50ch;
}
.capability-desc strong {
color: var(--ink);
font-weight: 500;
}
/* =========================================================
ENGAGEMENT
========================================================= */
.engagement {
border-top: 1px solid var(--rule);
background: var(--paper-edge);
}
.engagement-body {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--s-5);
display: grid;
grid-template-columns: 1fr;
gap: var(--s-7);
}
@media (min-width: 900px) {
.engagement-body {
grid-template-columns: 1fr 1fr;
gap: var(--s-8);
}
}
@media (max-width: 720px) {
.engagement-body {
padding: 0 var(--s-4);
}
}
.engagement-prose p {
font-family: var(--serif);
font-size: clamp(19px, 1.5vw, 22px);
font-weight: 300;
line-height: 1.55;
letter-spacing: -0.005em;
color: var(--ink);
max-width: 36ch;
font-variation-settings: "opsz" 24;
}
.engagement-prose p + p {
margin-top: var(--s-4);
}
/* Pricing anchor — set apart with mono treatment and accent */
.engagement-prose .engagement-pricing {
font-family: var(--mono);
font-size: clamp(13px, 0.95vw, 14px);
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-soft);
max-width: none;
padding-bottom: var(--s-4);
margin-bottom: var(--s-4);
border-bottom: 1px solid var(--ink-faint);
}
.engagement-prose .engagement-pricing + p {
margin-top: 0;
}
/* Steps timeline on the right side */
.engagement-steps {
display: flex;
flex-direction: column;
gap: var(--s-5);
max-width: 420px;
}
.step {
display: grid;
grid-template-columns: 60px 1fr;
gap: var(--s-3);
align-items: baseline;
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--rule);
}
.step:last-child {
border-bottom: none;
}
.step-num {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.step-content {
max-width: 36ch;
}
.step-title {
font-family: var(--serif);
font-size: 18px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--ink);
margin-bottom: 6px;
font-variation-settings: "opsz" 24;
}
.step-desc {
font-family: var(--sans);
font-size: 14px;
line-height: 1.55;
color: var(--ink-muted);
}
.engagement-cta {
margin-top: var(--s-6);
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: var(--sans);
font-size: 15px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
padding-bottom: 4px;
border-bottom: 1px solid var(--ink);
transition: gap 300ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease;
}
.engagement-cta:hover {
gap: 14px;
color: var(--accent);
border-bottom-color: var(--accent);
}
/* =========================================================
PRINCIPAL
========================================================= */
.principal {
border-top: 1px solid var(--rule);
}
.principal-body {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--s-5);
display: grid;
grid-template-columns: 1fr;
gap: var(--s-6);
align-items: start;
}
@media (min-width: 900px) {
.principal-body {
grid-template-columns: 280px 1fr;
gap: var(--s-8);
}
}
@media (max-width: 720px) {
.principal-body {
padding: 0 var(--s-4);
}
}
.principal-name {
font-family: var(--serif);
font-size: clamp(28px, 3vw, 36px);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--ink);
margin-bottom: var(--s-2);
font-variation-settings: "opsz" 48, "SOFT" 30;
}
.principal-role {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: var(--s-5);
}
.principal-bio p {
font-family: var(--serif);
font-size: 18px;
font-weight: 300;
line-height: 1.55;
letter-spacing: -0.005em;
color: var(--ink);
max-width: 42ch;
font-variation-settings: "opsz" 24;
}
.principal-bio p + p {
margin-top: var(--s-3);
}
/* =========================================================
FOOTER / CONTACT
========================================================= */
.contact {
border-top: 1px solid var(--rule);
background: var(--ink);
color: var(--paper);
padding: var(--s-9) 0 var(--s-7);
position: relative;
}
@media (max-width: 720px) {
.contact {
padding: var(--s-8) 0 var(--s-6);
}
}
.contact-inner {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--s-5);
}
@media (max-width: 720px) {
.contact-inner {
padding: 0 var(--s-4);
}
}
.contact-mark {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(247, 245, 240, 0.5);
margin-bottom: var(--s-5);
}
.contact-headline {
font-family: var(--serif);
font-size: clamp(40px, 5.5vw, 76px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--paper);
max-width: 16ch;
margin-bottom: var(--s-7);
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.contact-headline em {
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
color: rgba(247, 245, 240, 0.8);
}
.contact-headline a {
color: var(--paper);
border-bottom: 2px solid rgba(247, 245, 240, 0.3);
transition: border-color 200ms ease;
}
.contact-headline a:hover {
border-bottom-color: var(--paper);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-5);
padding-top: var(--s-6);
border-top: 1px solid rgba(247, 245, 240, 0.15);
}
@media (min-width: 720px) {
.contact-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--s-5);
}
}
.contact-block {
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.contact-label {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(247, 245, 240, 0.45);
}
.contact-value {
font-family: var(--serif);
font-size: 17px;
font-weight: 400;
line-height: 1.4;
color: var(--paper);
font-variation-settings: "opsz" 24;
}
.contact-value a {
color: var(--paper);
transition: color 200ms ease;
}
.contact-value a:hover {
color: rgba(247, 245, 240, 0.7);
}
.contact-bottom {
margin-top: var(--s-7);
padding-top: var(--s-4);
border-top: 1px solid rgba(247, 245, 240, 0.15);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s-3);
flex-wrap: wrap;
}
.contact-copyright {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(247, 245, 240, 0.45);
}
.contact-mark-large {
display: flex;
flex-direction: column;
gap: 2px;
}
.contact-mark-name {
font-family: var(--serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--paper);
line-height: 1;
font-variation-settings: "opsz" 24, "SOFT" 30;
}
.contact-mark-tag {
font-family: var(--mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(247, 245, 240, 0.45);
line-height: 1;
}
/* =========================================================
NAV
========================================================= */
.nav {
padding: var(--s-4) 0;
position: sticky;
top: 0;
background: rgba(247, 245, 240, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 50;
border-bottom: 1px solid transparent;
transition: border-color 300ms ease;
}
.nav.scrolled {
border-bottom-color: var(--rule);
}
.nav-inner {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--s-5);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-mark {
display: flex;
flex-direction: column;
gap: 1px;
text-decoration: none;
}
.nav-mark-name {
font-family: var(--serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1;
font-variation-settings: "opsz" 24, "SOFT" 30;
}
.nav-mark-tag {
font-family: var(--mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-faint);
line-height: 1;
margin-top: 2px;
}
.nav-link {
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--ink-muted);
transition: color 200ms ease;
}
.nav-link:hover {
color: var(--ink);
}
/* Desktop nav links */
.nav-links {
display: flex;
align-items: center;
gap: var(--s-5);
}
/* Mobile toggle button — hidden on desktop */
.nav-toggle {
display: none;
width: 28px;
height: 28px;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
}
.nav-toggle-bar {
width: 20px;
height: 1px;
background: var(--ink);
transition: transform 250ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child {
transform: translateY(3px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child {
transform: translateY(-3px) rotate(-45deg);
}
@media (max-width: 880px) {
.nav-toggle {
display: flex;
}
.nav-links {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(247, 245, 240, 0.98);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--rule);
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: var(--s-4) var(--s-5);
max-height: 0;
overflow: hidden;
transition: max-height 300ms ease, padding 300ms ease;
pointer-events: none;
}
.nav-links.open {
max-height: 320px;
padding: var(--s-4) var(--s-5);
pointer-events: auto;
}
.nav-links.open .nav-link {
padding: var(--s-3) 0;
font-size: 15px;
width: 100%;
border-bottom: 1px solid var(--ink-faint);
}
.nav-links.open .nav-link:last-child {
border-bottom: none;
}
}
@media (max-width: 720px) {
.nav-inner {
padding: 0 var(--s-4);
}
.nav-mark-name {
font-size: 18px;
}
.nav-mark-tag {
font-size: 9px;
}
}
/* ====================================================
SAMPLE WORK SECTION
==================================================== */
.work {
padding: var(--s-7) 0 var(--s-6);
max-width: var(--content-max);
margin: 0 auto;
}
.work .section-head {
padding: 0 var(--s-5);
margin-bottom: var(--s-6);
}
.work-framing {
max-width: 56ch;
margin-top: var(--s-4);
padding: 0;
font-family: var(--serif);
font-size: clamp(16px, 1.15vw, 18px);
line-height: 1.6;
color: var(--ink-soft);
font-weight: 300;
font-variation-settings: "opsz" 24;
}
/* ----- DEMO BLOCK SHARED ----- */
.demo {
padding: var(--s-7) var(--s-5);
border-top: 1px solid var(--rule);
}
.demo-head {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--s-6);
margin-bottom: var(--s-6);
align-items: start;
}
@media (max-width: 880px) {
.demo-head {
grid-template-columns: 1fr;
gap: var(--s-5);
}
}
.demo-meta {
display: flex;
flex-direction: column;
gap: var(--s-4);
}
.demo-tag {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
display: flex;
align-items: center;
gap: var(--s-2);
}
.demo-tag-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.demo-title {
font-family: var(--serif);
font-size: clamp(28px, 2.4vw, 36px);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--ink);
font-variation-settings: "opsz" 36;
}
.demo-subtitle {
font-family: var(--serif);
font-size: clamp(15px, 1.05vw, 17px);
font-weight: 300;
font-style: italic;
line-height: 1.45;
color: var(--ink-soft);
max-width: 38ch;
font-variation-settings: "opsz" 18;
}
.demo-description {
font-family: var(--serif);
font-size: clamp(15px, 1.05vw, 17px);
font-weight: 300;
line-height: 1.65;
color: var(--ink);
max-width: 50ch;
font-variation-settings: "opsz" 18;
}
.demo-problems {
display: flex;
flex-direction: column;
gap: var(--s-3);
list-style: none;
padding: 0;
margin: 0;
}
.demo-problems li {
font-family: var(--sans);
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: var(--ink-soft);
padding-left: var(--s-4);
position: relative;
}
.demo-problems li::before {
content: "—";
font-family: var(--mono);
position: absolute;
left: 0;
color: var(--ink-faint);
}
/* ----- BROWSER FRAME (for desktop screenshots) ----- */
.browser-frame {
background: #FFFFFF;
border-radius: 8px;
overflow: hidden;
box-shadow:
0 1px 2px rgba(27, 40, 69, 0.04),
0 8px 24px rgba(27, 40, 69, 0.08),
0 24px 48px rgba(27, 40, 69, 0.06);
border: 1px solid rgba(27, 40, 69, 0.08);
}
.browser-frame-bar {
background: #F4F2ED;
border-bottom: 1px solid rgba(27, 40, 69, 0.06);
padding: 10px 14px;
display: flex;
align-items: center;
gap: 6px;
}
.browser-frame-dot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #D8D4CC;
}
.browser-frame-dot:nth-child(1) { background: #E8B7B0; }
.browser-frame-dot:nth-child(2) { background: #E8DBA8; }
.browser-frame-dot:nth-child(3) { background: #B8D5B8; }
.browser-frame img {
display: block;
width: 100%;
height: auto;
}
/* ----- PHONE FRAME (for mobile screenshots) ----- */
.phone-frame {
position: relative;
display: inline-block;
background: #1A1A1C;
border-radius: 38px;
padding: 10px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.2),
0 12px 32px rgba(0, 0, 0, 0.18),
0 32px 64px rgba(0, 0, 0, 0.12);
}
.phone-frame-screen {
position: relative;
border-radius: 28px;
overflow: hidden;
background: #0A0A0B;
}
.phone-frame img {
display: block;
width: 100%;
height: auto;
}
/* Make phone frame on dark backgrounds blend nicely */
.demo-dark .phone-frame {
background: #2A2A2F;
}
/* ----- DEMO HERO LAYOUT ----- */
.demo-hero {
margin-bottom: var(--s-6);
}
/* ----- SUPPORTING SCREENSHOTS GRID ----- */
.demo-supporting {
display: grid;
gap: var(--s-5);
}
.demo-supporting-row-3 {
grid-template-columns: repeat(3, 1fr);
}
.demo-supporting-row-2 {
grid-template-columns: repeat(2, 1fr);
}
.demo-supporting-grid-2x2 {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 880px) {
.demo-supporting-row-3,
.demo-supporting-row-2,
.demo-supporting-grid-2x2 {
grid-template-columns: 1fr;
}
}
.demo-figure {
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.demo-caption {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--ink-faint);
text-transform: uppercase;
padding-left: var(--s-2);
}
/* ----- WHITTAKER (light, blue accent) ----- */
.demo-whittaker {
--demo-accent: #1E40AF;
}
.demo-whittaker .demo-tag {
color: var(--demo-accent);
}
/* ----- CAPITOL RIDGE (light, emerald accent) ----- */
.demo-capitol {
--demo-accent: #059669;
}
.demo-capitol .demo-tag {
color: var(--demo-accent);
}
/* ----- LONE STAR (dark full-bleed, orange accent) ----- */
.demo-dark {
--demo-accent: #FF6B1A;
background: #0A0A0B;
color: #F5F5F7;
border-top: none;
position: relative;
/* Full-bleed: break out of parent container at all viewport sizes */
margin-left: calc(50% - 50vw + var(--scrollbar, 0px) / 2);
margin-right: calc(50% - 50vw + var(--scrollbar, 0px) / 2);
padding-left: var(--s-5);
padding-right: var(--s-5);
}
/* Inner content stays centered within content max-width on desktop */
@media (min-width: 1024px) {
.demo-dark {
padding-left: max(var(--s-5), calc(50vw - var(--content-max) / 2 + var(--s-5)));
padding-right: max(var(--s-5), calc(50vw - var(--content-max) / 2 + var(--s-5)));
}
}
@media (max-width: 720px) {
.demo-dark {
padding-left: var(--s-4);
padding-right: var(--s-4);
}
}
.demo-dark .demo-tag {
color: var(--demo-accent);
}
.demo-dark .demo-title {
color: #F5F5F7;
}
.demo-dark .demo-subtitle {
color: #A8A8AD;
}
.demo-dark .demo-description {
color: #D5D5DA;
}
.demo-dark .demo-problems li {
color: #B5B5BA;
}
.demo-dark .demo-problems li::before {
color: var(--demo-accent);
}
.demo-dark .demo-caption {
color: rgba(245, 245, 247, 0.4);
}
/* Phone hero needs to be sized appropriately on desktop */
.phone-hero-wrap {
display: flex;
justify-content: center;
align-items: flex-start;
}
.phone-hero-wrap .phone-frame {
max-width: 320px;
width: 100%;
}
/* Supporting phone row */
.phone-supporting {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4);
justify-items: center;
}
.phone-supporting .phone-frame {
max-width: 240px;
width: 100%;
}
/* On mobile, phones should NOT fill the viewport — keep them at ~70% so they read as "phone screenshots" */
@media (max-width: 880px) {
.phone-hero-wrap .phone-frame {
max-width: 280px;
}
.phone-supporting {
grid-template-columns: 1fr;
gap: var(--s-6);
}
.phone-supporting .phone-frame {
max-width: 240px;
}
}
/* On smallest phones, scale down slightly more for breathing room */
@media (max-width: 400px) {
.phone-hero-wrap .phone-frame {
max-width: 260px;
}
.phone-supporting .phone-frame {
max-width: 220px;
}
}
/* ====================================================
FAQ SECTION
==================================================== */
.faq {
padding: var(--s-7) 0 var(--s-7);
max-width: var(--content-max);
margin: 0 auto;
}
.faq .section-head {
margin-bottom: var(--s-6);
}
.faq-list {
max-width: 780px;
margin: 0 auto;
padding: 0 var(--s-5);
}
.faq-item {
border-top: 1px solid var(--rule);
/* Remove default details marker */
}
.faq-item:last-child {
border-bottom: 1px solid var(--rule);
}
.faq-item summary {
list-style: none;
cursor: pointer;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
padding: var(--s-5) 0;
font-family: var(--serif);
font-size: clamp(19px, 1.4vw, 22px);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.35;
color: var(--ink);
transition: color 200ms ease;
font-variation-settings: "opsz" 24;
}
.faq-item:hover .faq-question {
color: var(--ink-soft);
}
.faq-question-text {
flex: 1;
}
/* Plus/minus icon — pure CSS using two pseudo-elements */
.faq-icon {
position: relative;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.faq-icon::before,
.faq-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: var(--ink-soft);
transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Horizontal bar */
.faq-icon::before {
width: 14px;
height: 1px;
transform: translate(-50%, -50%);
}
/* Vertical bar — disappears when open */
.faq-icon::after {
width: 1px;
height: 14px;
transform: translate(-50%, -50%);
}
.faq-item[open] .faq-icon::after {
transform: translate(-50%, -50%) scaleY(0);
}
.faq-item[open] .faq-question {
color: var(--ink);
}
/* Answer */
.faq-answer {
padding: 0 0 var(--s-5);
max-width: 56ch;
}
.faq-answer p {
font-family: var(--serif);
font-size: clamp(16px, 1.1vw, 18px);
font-weight: 300;
line-height: 1.65;
color: var(--ink-soft);
letter-spacing: -0.005em;
font-variation-settings: "opsz" 18;
}
/* Smooth open/close animation using CSS Grid trick */
.faq-answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.faq-item[open] .faq-answer {
grid-template-rows: 1fr;
}
.faq-answer > p {
min-height: 0;
}
/* Mobile adjustments */
@media (max-width: 720px) {
.faq-list {
padding: 0 var(--s-4);
}
.faq-question {
padding: var(--s-4) 0;
font-size: 17px;
}
.faq-answer {
padding-bottom: var(--s-4);
}
.faq-answer p {
font-size: 15px;
}
}
/* =========================================================
NAVIGATION — added in refactor for multi-page site
========================================================= */
.site-nav {
position: sticky;
top: 0;
z-index: 100;
background: var(--paper);
border-bottom: 1px solid transparent;
transition: border-color 200ms ease;
}
.site-nav.is-scrolled {
border-bottom-color: var(--paper-edge);
}
.site-nav-inner {
max-width: 1200px;
margin: 0 auto;
padding: var(--s-3) var(--s-5);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-5);
}
.site-nav-wordmark {
display: inline-flex;
flex-direction: column;
gap: 1px;
line-height: 1;
color: var(--ink);
text-decoration: none;
white-space: nowrap;
transition: color 200ms ease;
}
.site-nav-wordmark-name {
font-family: var(--serif);
font-size: 22px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--ink);
transition: color 200ms ease;
}
.site-nav-wordmark-tag {
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
transition: color 200ms ease;
}
a.site-nav-wordmark:hover .site-nav-wordmark-name,
a.site-nav-wordmark:hover .site-nav-wordmark-tag {
color: var(--accent);
}
.site-nav-wordmark[aria-current="page"] {
pointer-events: none;
}
.site-nav-links {
display: flex;
align-items: center;
gap: var(--s-5);
list-style: none;
margin: 0;
padding: 0;
}
.site-nav-link {
font-family: var(--mono);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-muted);
text-decoration: none;
transition: color 200ms ease;
}
.site-nav-link:hover {
color: var(--ink);
}
.site-nav-link[aria-current="page"] {
color: var(--ink-faint);
pointer-events: none;
}
.site-nav-cta {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 10px 18px;
background: var(--accent);
color: var(--paper);
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
text-decoration: none;
border-radius: 4px;
transition: background 200ms ease, transform 200ms ease;
white-space: nowrap;
}
.site-nav-cta:hover {
background: #2A3A5C;
}
.site-nav-toggle {
display: none;
background: none;
border: none;
padding: 8px;
cursor: pointer;
color: var(--ink);
}
.site-nav-toggle-icon {
display: block;
width: 20px;
height: 2px;
background: currentColor;
position: relative;
}
.site-nav-toggle-icon::before,
.site-nav-toggle-icon::after {
content: '';
position: absolute;
left: 0;
width: 20px;
height: 2px;
background: currentColor;
}
.site-nav-toggle-icon::before { top: -6px; }
.site-nav-toggle-icon::after { top: 6px; }
@media (max-width: 760px) {
.site-nav-inner {
padding: var(--s-3) var(--s-4);
gap: var(--s-3);
}
.site-nav-links {
position: absolute;
top: 100%;
right: 0;
left: 0;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 0 var(--s-4);
background: var(--paper);
border-bottom: 1px solid transparent;
max-height: 0;
overflow: hidden;
transition: max-height 250ms ease, padding 250ms ease, border-color 250ms ease;
}
.site-nav.is-open .site-nav-links {
max-height: 240px;
padding: var(--s-3) var(--s-4) var(--s-4);
border-bottom-color: var(--paper-edge);
}
.site-nav-link {
padding: var(--s-3) 0;
font-size: 14px;
width: 100%;
}
.site-nav-toggle {
display: block;
order: 1;
}
.site-nav-wordmark {
order: 2;
}
.site-nav-cta {
order: 3;
padding: 8px 14px;
font-size: 12px;
}
}
/* =========================================================
FOOTER — added in refactor for multi-page site
========================================================= */
.site-footer {
border-top: 1px solid var(--paper-edge);
background: var(--ink);
padding: var(--s-6) var(--s-5);
margin-top: var(--s-9);
font-family: var(--sans);
font-size: 13px;
color: rgba(247, 245, 240, 0.7);
}
.site-footer-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
}
.site-footer-info {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3);
color: var(--paper);
}
.site-footer-info a {
color: var(--paper);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 200ms ease, color 200ms ease;
}
.site-footer-info a:hover {
border-bottom-color: rgba(247, 245, 240, 0.5);
color: rgba(247, 245, 240, 0.85);
}
.site-footer-divider {
color: rgba(247, 245, 240, 0.35);
}
.site-footer-links {
display: flex;
flex-wrap: wrap;
gap: var(--s-4);
}
.site-footer-link {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(247, 245, 240, 0.6);
text-decoration: none;
transition: color 200ms ease;
}
.site-footer-link:hover {
color: var(--paper);
}
.site-footer-copyright {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.04em;
color: rgba(247, 245, 240, 0.45);
text-transform: uppercase;
width: 100%;
text-align: center;
padding-top: var(--s-4);
border-top: 1px solid rgba(247, 245, 240, 0.15);
margin-top: var(--s-3);
}
@media (max-width: 600px) {
.site-footer-inner {
flex-direction: column;
align-items: flex-start;
}
}
/* =========================================================
PROOF — single-screenshot spotlight on the home page
========================================================= */
.proof {
border-top: 1px solid var(--rule);
padding: var(--s-7) 0 var(--s-7);
}
.proof-frame {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--s-5);
}
@media (max-width: 720px) {
.proof-frame {
padding: 0 var(--s-4);
}
}
.proof-caption {
max-width: 56ch;
margin: var(--s-5) auto 0;
padding: 0 var(--s-5);
font-family: var(--serif);
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
color: var(--ink-soft);
font-weight: 300;
font-variation-settings: "opsz" 24;
}
@media (max-width: 720px) {
.proof-caption {
padding: 0 var(--s-4);
}
}
.proof-link {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
text-decoration: none;
padding-bottom: 3px;
border-bottom: 1px solid var(--ink);
transition: gap 250ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease, border-color 200ms ease;
}
.proof-link:hover {
gap: 12px;
color: var(--accent);
border-bottom-color: var(--accent);
}
.proof-link-arrow {
font-family: var(--mono);
font-weight: 400;
}
.proof-link-wrap {
max-width: 56ch;
margin: var(--s-4) auto 0;
padding: 0 var(--s-5);
}
@media (max-width: 720px) {
.proof-link-wrap {
padding: 0 var(--s-4);
}
}
/* =========================================================
FILTER — "is this you" qualifying paragraph on the home
========================================================= */
.filter {
border-top: 1px solid var(--rule);
padding: var(--s-7) 0;
}
.filter-body {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--s-5);
}
@media (max-width: 720px) {
.filter-body {
padding: 0 var(--s-4);
}
}
.filter-prose {
max-width: 60ch;
margin: 0;
font-family: var(--serif);
font-size: clamp(18px, 1.4vw, 22px);
line-height: 1.55;
color: var(--ink-soft);
font-weight: 300;
font-variation-settings: "opsz" 32;
}
@media (min-width: 900px) {
.filter-prose {
margin-left: calc(220px + var(--s-7));
}
}
/* =========================================================
CLOSING CTA — repeat the booking call to action
Visually echoes the hero: two-column grid with credentials
in the right aside, mirroring section 01.
========================================================= */
.closing {
border-top: 1px solid var(--rule);
padding: var(--s-8) 0 var(--s-9);
}
.closing-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-7);
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--s-5);
}
@media (min-width: 900px) {
.closing-grid {
grid-template-columns: 1fr 280px;
gap: var(--s-8);
align-items: end;
}
}
@media (max-width: 720px) {
.closing-grid {
padding: 0 var(--s-4);
}
}
.closing-headline {
font-family: var(--serif);
font-size: clamp(28px, 3.4vw, 42px);
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--ink);
max-width: 22ch;
margin: var(--s-6) 0 var(--s-5);
font-weight: 400;
font-variation-settings: "opsz" 96, "SOFT" 30;
}
.closing-headline em {
font-style: italic;
font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 1;
}
.closing-prose {
max-width: 56ch;
margin: 0 0 var(--s-6);
font-family: var(--serif);
font-size: clamp(16px, 1.15vw, 18px);
line-height: 1.6;
color: var(--ink-soft);
font-weight: 300;
font-variation-settings: "opsz" 24;
}
.closing-cta {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: var(--sans);
font-size: 15px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
padding-bottom: 4px;
border-bottom: 1px solid var(--ink);
text-decoration: none;
transition: gap 300ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease, border-color 200ms ease;
}
.closing-cta:hover {
gap: 14px;
color: var(--accent);
border-bottom-color: var(--accent);
}
.closing-cta-arrow {
font-family: var(--mono);
font-weight: 400;
}
.closing-aside {
padding-bottom: var(--s-2);
}
.closing-aside-block {
padding-top: var(--s-3);
border-top: 1px solid var(--rule);
}
.closing-aside-block + .closing-aside-block {
margin-top: var(--s-4);
}
.closing-aside-label {
font-family: var(--mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: var(--s-2);
}
.closing-aside-value {
font-family: var(--serif);
font-size: 17px;
font-weight: 400;
color: var(--ink);
line-height: 1.4;
font-variation-settings: "opsz" 24;
}
/* Phone link in hero aside — subtle hover signal */
.hero-aside-value a {
color: inherit;
text-decoration: none;
transition: color 200ms ease;
}
.hero-aside-value a:hover {
color: var(--accent);
}
/* =========================================================
DEMOS PAGE CLOSING — single-column variant, used after the
three reference builds. Different mental state than the
home Closing, so deliberately tighter.
========================================================= */
.demos-closing {
border-top: 1px solid var(--rule);
padding: var(--s-8) var(--s-5) var(--s-9);
max-width: var(--content-max);
margin: 0 auto;
}
@media (max-width: 720px) {
.demos-closing {
padding: var(--s-7) var(--s-4) var(--s-8);
}
}
.demos-closing-inner {
max-width: 60ch;
}
@media (min-width: 900px) {
.demos-closing-inner {
margin-left: calc(220px + var(--s-7));
}
}
.demos-closing-headline {
font-family: var(--serif);
font-size: clamp(28px, 3.4vw, 42px);
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--ink);
max-width: 22ch;
margin: 0 0 var(--s-5);
font-weight: 400;
font-variation-settings: "opsz" 96, "SOFT" 30;
}
.demos-closing-headline em {
font-style: italic;
font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 1;
}
.demos-closing-prose {
max-width: 56ch;
margin: 0 0 var(--s-6);
font-family: var(--serif);
font-size: clamp(16px, 1.15vw, 18px);
line-height: 1.6;
color: var(--ink-soft);
font-weight: 300;
font-variation-settings: "opsz" 24;
}
/* =========================================================
DEMO WINDOW — Apple-style framing for the per-demo
interactive surface. Phases 2-4 will replace the inner
![]()
with a live demo. The window itself stays the same.
========================================================= */
/* =========================================================
DEMO WINDOW — Apple-style framing for the per-demo
interactive surface. Phases 2-4 will replace the inner
![]()
with a live demo. The window itself stays the same.
Two patterns:
- .demo-window-desktop: 16:10 window for desktop-product demos
(Whittaker, Capitol Ridge). Different image per breakpoint via
.
- Lone Star uses the existing .phone-frame class — same on
desktop and mobile because the product itself is mobile-first.
========================================================= */
.demo-window {
background: #FFFFFF;
border-radius: 12px;
overflow: hidden;
width: 100%;
max-width: 1100px;
margin: 0 auto;
aspect-ratio: 16 / 10;
max-height: min(80vh, 720px);
box-shadow:
0 1px 2px rgba(27, 40, 69, 0.04),
0 8px 24px rgba(27, 40, 69, 0.08),
0 24px 48px rgba(27, 40, 69, 0.06);
border: 1px solid rgba(27, 40, 69, 0.08);
}
.demo-window img,
.demo-window picture {
display: block;
width: 100%;
height: 100%;
}
.demo-window picture img {
object-fit: cover;
object-position: top center;
}
/* On mobile, mobile-version screenshots are typically already in
portrait aspect, so let them display fully without cover-cropping. */
@media (max-width: 760px) {
.demo-window {
aspect-ratio: auto;
max-height: none;
}
.demo-window picture img {
height: auto;
object-fit: unset;
}
}
/* Lone Star phone-frame wrapper — center the phone in the section.
The .phone-frame styling itself comes from the original site CSS.
Parent .demo article already pads horizontally. */
.demo-phone-wrap {
max-width: var(--content-max);
margin: 0 auto;
display: flex;
justify-content: center;
}
/* =========================================================
DEMO HOOK — the single short line that sits between
the title and the window. Replaces the old subtitle/
description/bullet list trio.
========================================================= */
.demo-hook {
font-family: var(--serif);
font-size: clamp(20px, 1.8vw, 26px);
line-height: 1.35;
color: var(--ink-soft);
font-weight: 300;
max-width: 38ch;
margin: var(--s-3) 0 var(--s-7);
font-variation-settings: "opsz" 32;
}
.demo-dark .demo-hook {
color: rgba(247, 245, 240, 0.78);
}
/* =========================================================
DEMO HEAD — simplified for the new architecture. Was a
2-column grid for tag+title vs description+bullets.
Now it's just tag + title + hook, all left-aligned.
Note: parent .demo article already provides horizontal padding
so these inner wrappers don't add their own.
========================================================= */
.demo-head-simple {
max-width: var(--content-max);
margin: 0 auto var(--s-6);
}
.demo-window-wrap {
max-width: var(--content-max);
margin: 0 auto;
}
/* =========================================================
WHITTAKER OPS — INTERACTIVE DEMO
Desktop renders .whk-demo-desktop; mobile (≤760px) renders
.whk-demo-mobile. Tokens are scoped to .whk-stage / .whk-stage-mobile
so the demo's design system doesn't leak into the rest of the page.
========================================================= */
.whk-demo-desktop {
/* Override the generic .demo-window paint: we want a true app
surface with a hairline border, no rounded screenshot feel. */
background: #ffffff;
aspect-ratio: 16 / 10;
max-height: min(80vh, 720px);
overflow: hidden;
border-radius: 12px;
border: 1px solid rgba(15, 23, 42, 0.10);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 8px 24px rgba(15, 23, 42, 0.08),
0 24px 48px rgba(15, 23, 42, 0.06);
}
/* Mobile demo wrapper: hidden on desktop, centered on mobile. */
.whk-demo-mobile {
display: none;
}
@media (max-width: 760px) {
.whk-demo-desktop {
display: none;
}
.whk-demo-mobile {
display: flex;
justify-content: center;
padding: 8px 0 16px;
}
}
/* ----- Stage layout: sidebar + main column ----- */
.whk-stage {
--whk-sidebar-w: 180px;
--whk-toolbar-h: 52px;
--whk-bg: #ffffff;
--whk-surface: #f8fafc;
--whk-border: #e5e7eb;
--whk-border-strong: #cbd5e1;
--whk-ink: #0f172a;
--whk-ink-soft: #334155;
--whk-ink-muted: #64748b;
--whk-ink-faint: #94a3b8;
--whk-blue: #3b82f6;
--whk-blue-deep: #1d4ed8;
--whk-blue-soft: #eff6ff;
--whk-amber-ink: #b45309;
--whk-amber-soft: #fef3c7;
--whk-red-soft: #fef2f2;
--whk-red-ink: #991b1b;
--whk-red-border: #fecaca;
--whk-red-bright: #dc2626;
display: grid;
grid-template-columns: var(--whk-sidebar-w) 1fr;
width: 100%;
height: 100%;
position: relative; /* containing block for overlays (cursor, dim, modal, tooltip) */
font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--whk-ink);
font-size: 14px;
line-height: 1.4;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
background: var(--whk-bg);
/* Demo isn't a real app — disable text selection to make taps feel like UI clicks, not document interaction. */
user-select: none;
-webkit-user-select: none;
}
/* =========================================================
MOBILE STAGE — vertical layout for the phone-frame demo.
Status bar (44px) + main content + bottom tab bar (60px).
Screen is 320×640 logical px (iPhone 14 Pro proportions).
========================================================= */
.whk-stage-mobile {
--whk-bg: #ffffff;
--whk-surface: #f8fafc;
--whk-border: #e5e7eb;
--whk-border-strong: #cbd5e1;
--whk-ink: #0f172a;
--whk-ink-soft: #334155;
--whk-ink-muted: #64748b;
--whk-ink-faint: #94a3b8;
--whk-blue: #3b82f6;
--whk-blue-deep: #1d4ed8;
--whk-blue-soft: #eff6ff;
--whk-amber-ink: #b45309;
--whk-amber-soft: #fef3c7;
--whk-amber-border: #fcd34d;
width: 320px;
height: 640px;
display: flex;
flex-direction: column;
background: var(--whk-bg);
font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--whk-ink);
font-size: 14px;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
user-select: none;
-webkit-user-select: none;
position: relative; /* containing block for future overlays (top banner tooltip etc) */
overflow: hidden;
}
/* ----- Status bar (iPhone-style: live time + Dynamic Island) ----- */
.whk-mobile-status {
flex-shrink: 0;
position: relative;
height: 44px;
padding: 0 22px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--whk-bg);
color: var(--whk-ink);
font-family: 'SF Pro Text', 'Inter Tight', -apple-system, sans-serif;
}
.whk-mobile-status-time {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.02em;
/* Sit on the left, but with enough room to clear the centered island */
position: relative;
z-index: 1;
}
.whk-mobile-status-icons {
display: flex;
align-items: center;
gap: 5px;
color: var(--whk-ink);
/* Lighter weight reads as system chrome rather than focal content */
opacity: 0.7;
position: relative;
z-index: 1;
}
.whk-mobile-status-icons svg {
display: block;
}
/* Dynamic Island — iPhone 14 Pro+ hardware element. A black pill at the
top center of the screen; the time and icons split around it naturally
since they sit at the extreme left/right of the status bar. */
.whk-mobile-island {
position: absolute;
top: 11px;
left: 50%;
transform: translateX(-50%);
width: 108px;
height: 30px;
background: #000;
border-radius: 16px;
pointer-events: none;
}
/* ----- Main content area ----- */
.whk-mobile-content {
flex: 1;
min-height: 0;
overflow: hidden;
background: var(--whk-surface);
position: relative;
}
/* ----- Bottom tab bar ----- */
.whk-mobile-tabs {
flex-shrink: 0;
height: 60px;
display: flex;
background: var(--whk-bg);
border-top: 1px solid var(--whk-border);
}
.whk-mobile-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 6px 0 8px;
background: transparent;
border: 0;
cursor: pointer;
color: var(--whk-ink-faint);
font: inherit;
transition: color 0.15s ease;
/* Prevent default mobile tap highlight */
-webkit-tap-highlight-color: transparent;
}
.whk-mobile-tab.is-active {
color: var(--whk-blue);
}
.whk-mobile-tab-icon {
flex-shrink: 0;
}
.whk-mobile-tab-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0;
}
/* =========================================================
MOBILE VIEW BASE — shared across Today / Schedule / Search /
Cert-mismatch. Each view stacks absolutely; only .is-active is
on screen. Slide transitions: current → left, new → from right.
========================================================= */
.whk-mobile-view {
/* Stacked absolute layers within the content area. Only .is-active is
on-screen at a given time. Slide horizontally between views per
spec 5.6 — current view slides out left, new view slides in from right. */
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
transform: translateX(100%); /* parked off-screen right by default */
visibility: hidden;
transition: transform 400ms ease-out, visibility 0s linear 400ms;
}
.whk-mobile-view.is-active {
transform: translateX(0);
visibility: visible;
transition: transform 400ms ease-out, visibility 0s linear 0s;
}
.whk-mobile-view.is-leaving {
/* The view that's transitioning out: slide left rather than back right,
so we get the "the screen swiped away" sensation. */
transform: translateX(-100%);
visibility: visible;
transition: transform 400ms ease-out, visibility 0s linear 400ms;
}
/* ----- Header (date eyebrow + title + subtitle + avatar) ----- */
.whk-mobile-header {
background: var(--whk-bg);
padding: 16px 20px 14px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--whk-border);
}
.whk-mobile-eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--whk-ink-muted);
margin-bottom: 4px;
}
.whk-mobile-title {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--whk-ink);
margin: 0;
line-height: 1;
}
.whk-mobile-subtitle {
font-size: 12px;
color: var(--whk-ink-muted);
margin-top: 6px;
}
.whk-mobile-avatar {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: #db2777; /* same hot pink as Roberto's desktop avatar */
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
}
/* Inline " · 1 job" meta beside the title. Smaller, muted, weight-normal. */
.whk-mobile-title-meta {
font-size: 18px;
font-weight: 500;
color: var(--whk-ink-muted);
letter-spacing: 0;
}
/* =========================================================
MOBILE TIMELINE — Today view's hour-rail layout
8 AM through 6 PM, 50px per hour. Hour labels sit in a
fixed-width column on the left; the rail is a vertical
line at ~52px from the left. Job cards and the NOW
indicator are absolute-positioned at their hour offsets.
========================================================= */
.whk-mobile-timeline {
position: relative;
flex: 1;
min-height: 0; /* allow flex shrinking */
overflow-y: auto;
padding: 16px 16px 24px 60px; /* left padding leaves room for hour labels + rail */
background: var(--whk-bg);
}
/* Inner wrapper with explicit height matches the rail content (540px = 11 hour
markers + 24px bottom). Without an inner wrapper, absolute children inside an
overflow:auto container don't expand the scrollable height — so the rail
needs an explicit min-height on the container's child or via padding. */
.whk-mobile-timeline::after {
content: '';
display: block;
height: 540px;
}
/* Vertical rail line — sits between the hour-label column and the cards */
.whk-mobile-timeline::before {
content: '';
position: absolute;
left: 52px;
top: 16px;
bottom: 24px;
width: 1px;
background: var(--whk-border);
}
.whk-mobile-hour {
position: absolute;
left: 0;
width: 48px;
padding-right: 6px;
text-align: right;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9px;
letter-spacing: 0.04em;
color: var(--whk-ink-faint);
transform: translateY(-50%); /* center the label on the hour line */
/* Apply the 16px container top-padding via a separate offset on each marker.
We bake it in by adding 16px to inline `top` values via a wrapper offset
— simpler: shift the entire marker down by 16px to align with rail top. */
margin-top: 16px;
}
/* Subtle horizontal tick on the rail at each hour */
.whk-mobile-hour::after {
content: '';
position: absolute;
left: 100%;
top: 50%;
width: 6px;
height: 1px;
background: var(--whk-border);
}
/* NOW indicator — colored dot + horizontal line + label */
.whk-mobile-now {
position: absolute;
left: 52px;
right: 16px;
margin-top: 16px;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 6px;
pointer-events: none;
z-index: 2;
}
.whk-mobile-now-dot {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
margin-left: -4px; /* centers the dot on the rail */
}
.whk-mobile-now-line {
flex: 1;
height: 1px;
background: linear-gradient(to right, rgba(59, 130, 246, 0.35), transparent);
}
.whk-mobile-now-label {
flex-shrink: 0;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.04em;
color: #3b82f6;
}
/* Timeline job card — absolute-positioned at its hour offset */
.whk-mobile-tjob {
position: absolute;
left: 64px; /* clears the rail (52px) + 12px breathing */
right: 16px;
margin-top: 16px; /* match container's top padding offset */
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
background: var(--whk-bg);
border: 1px solid var(--whk-border);
border-radius: 8px;
cursor: pointer;
z-index: 1;
}
.whk-mobile-tjob.is-flagged {
border-color: var(--whk-amber-border);
box-shadow: 0 0 0 1px var(--whk-amber-border),
0 1px 2px rgba(180, 83, 9, 0.05);
}
.whk-mobile-tjob-body {
min-width: 0;
}
.whk-mobile-tjob-name {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--whk-ink);
line-height: 1.2;
}
.whk-mobile-tjob-name span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.whk-mobile-tjob-alert {
flex-shrink: 0;
color: var(--whk-amber-ink);
}
.whk-mobile-tjob-addr {
font-size: 11px;
color: var(--whk-ink-soft);
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.whk-mobile-tjob-city {
font-size: 10px;
color: var(--whk-ink-muted);
margin-top: 1px;
}
.whk-mobile-tjob-pills {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
/* Card scale pulse when tapped (cert-mismatch animation) */
.whk-mobile-tjob.is-tapped {
animation: whk-mobile-tap-pulse 300ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
.whk-mobile-tjob.is-tapped { animation: none; }
}
/* Up-next footer — thin one-liner under the timeline */
.whk-mobile-upnext {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: var(--whk-surface);
border-top: 1px solid var(--whk-border);
font-size: 11px;
}
.whk-mobile-upnext-label {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--whk-ink-faint);
}
.whk-mobile-upnext-name {
font-weight: 600;
color: var(--whk-ink);
}
.whk-mobile-upnext-meta {
color: var(--whk-ink-muted);
margin-left: auto;
}
.whk-mobile-pill {
display: inline-block;
padding: 2px 7px;
border-radius: 4px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1.4;
white-space: nowrap;
}
.whk-mobile-pill-blue {
background: var(--whk-blue-soft);
color: var(--whk-blue-deep);
}
.whk-mobile-pill-amber {
background: var(--whk-amber-soft);
color: var(--whk-amber-ink);
}
.whk-mobile-pill-neutral {
background: var(--whk-surface);
color: var(--whk-ink-muted);
border: 1px solid var(--whk-border);
}
/* =========================================================
MOBILE CERT-MISMATCH SCREEN
Full-screen view that replaces the dispatch list when the
visitor taps a job. Slides in from right per spec 5.6.
========================================================= */
/* Header bar — amber-tinted, fixed at top */
.whk-mobile-cert-head {
flex-shrink: 0;
height: 56px;
padding: 0 12px 0 8px;
background: var(--whk-amber-soft);
border-bottom: 1px solid #fde68a;
display: flex;
align-items: center;
gap: 8px;
}
.whk-mobile-cert-back {
flex-shrink: 0;
width: 36px;
height: 36px;
border: 0;
background: transparent;
color: var(--whk-ink-soft);
cursor: pointer;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
.whk-mobile-cert-head-text {
flex: 1;
min-width: 0;
}
.whk-mobile-cert-head-name {
font-size: 14px;
font-weight: 600;
color: var(--whk-ink);
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.whk-mobile-cert-head-id {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
color: var(--whk-ink-muted);
margin-top: 1px;
}
.whk-mobile-cert-blocked {
flex-shrink: 0;
padding: 3px 8px;
background: #fef3c7;
border: 1px solid var(--whk-amber-border);
color: var(--whk-amber-ink);
border-radius: 4px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
}
/* Body — scrollable content area between header and footer */
.whk-mobile-cert-body {
flex: 1;
min-height: 0;
overflow-y: auto;
background: var(--whk-bg);
}
/* Warning hero (centered shield + title + subtitle) */
.whk-mobile-cert-warn {
padding: 14px 20px 12px;
text-align: center;
border-bottom: 1px solid var(--whk-border);
}
.whk-mobile-cert-shield {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--whk-amber-soft);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
}
.whk-mobile-cert-title {
font-size: 16px;
font-weight: 600;
color: var(--whk-ink);
margin: 0 0 6px;
line-height: 1.3;
}
.whk-mobile-cert-sub {
font-size: 12px;
color: var(--whk-ink-muted);
margin: 0;
line-height: 1.45;
}
/* Section: JOB / EQUIPMENT / ASSIGNED TECH / REQUIRED CERTIFICATIONS */
.whk-mobile-cert-section {
padding: 11px 20px;
border-bottom: 1px solid var(--whk-border);
}
.whk-mobile-cert-section:last-child {
border-bottom: 0;
}
.whk-mobile-cert-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--whk-ink-faint);
margin-bottom: 6px;
}
/* JOB section text */
.whk-mobile-cert-jobid {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 11px;
color: var(--whk-ink-muted);
margin-bottom: 2px;
}
.whk-mobile-cert-jobname {
font-size: 14px;
font-weight: 600;
color: var(--whk-ink);
margin-bottom: 6px;
}
.whk-mobile-cert-jobaddr {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--whk-ink-muted);
}
.whk-mobile-cert-jobaddr svg {
flex-shrink: 0;
color: var(--whk-ink-faint);
}
/* Equipment card (gray-bordered) */
.whk-mobile-cert-card {
border: 1px solid var(--whk-border);
border-radius: 8px;
padding: 10px 12px;
background: var(--whk-bg);
}
.whk-mobile-cert-card-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.whk-mobile-cert-card-name {
font-size: 13px;
font-weight: 600;
color: var(--whk-ink);
}
.whk-mobile-cert-card-detail {
font-size: 11px;
color: var(--whk-ink-muted);
}
/* Assigned tech (avatar + name + role) */
.whk-mobile-cert-tech {
display: flex;
align-items: center;
gap: 10px;
}
.whk-mobile-cert-tech-avatar {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: #fce7f3;
color: #be185d;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
}
.whk-mobile-cert-tech-name {
font-size: 13px;
font-weight: 600;
color: var(--whk-ink);
line-height: 1.2;
}
.whk-mobile-cert-tech-role {
font-size: 11px;
color: var(--whk-ink-muted);
margin-top: 1px;
}
/* Required certification rows (red fail / green pass) */
.whk-mobile-cert-req {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
margin-bottom: 8px;
}
.whk-mobile-cert-req:last-child {
margin-bottom: 0;
}
.whk-mobile-cert-req-fail {
background: #fef2f2;
border: 1px solid #fecaca;
}
.whk-mobile-cert-req-pass {
background: #f0fdf4;
border: 1px solid #bbf7d0;
}
.whk-mobile-cert-req-icon {
flex-shrink: 0;
margin-top: 1px;
}
.whk-mobile-cert-req-fail .whk-mobile-cert-req-icon {
color: #dc2626;
}
.whk-mobile-cert-req-pass .whk-mobile-cert-req-icon {
color: #047857;
}
.whk-mobile-cert-req-body {
flex: 1;
min-width: 0;
}
.whk-mobile-cert-req-title {
font-size: 13px;
font-weight: 600;
color: var(--whk-ink);
line-height: 1.25;
}
.whk-mobile-cert-req-sub {
font-size: 11px;
color: var(--whk-ink-muted);
margin-top: 2px;
}
.whk-mobile-cert-req-status {
flex-shrink: 0;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
color: #dc2626;
text-align: right;
padding-top: 1px;
}
.whk-mobile-cert-req-when {
font-size: 8px;
font-weight: 600;
color: var(--whk-ink-faint);
letter-spacing: 0.04em;
margin-top: 1px;
}
.whk-mobile-cert-req-active {
color: #047857;
}
/* Sticky footer with action buttons */
.whk-mobile-cert-footer {
flex-shrink: 0;
padding: 10px 20px 12px;
background: var(--whk-bg);
border-top: 1px solid var(--whk-border);
}
.whk-mobile-cert-btn-primary {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 38px;
border: 0;
border-radius: 8px;
background: var(--whk-ink);
color: #ffffff;
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.whk-mobile-cert-btn-link {
display: block;
width: 100%;
margin-top: 6px;
padding: 2px 0;
border: 0;
background: transparent;
color: var(--whk-ink-muted);
font: inherit;
font-size: 12px;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* =========================================================
SHARED PAGE CHROME — used by Schedule / Search views
Each tab view is wrapped in .whk-mobile-page-head + body.
========================================================= */
.whk-mobile-page-head {
flex-shrink: 0;
background: var(--whk-bg);
padding: 14px 20px 12px;
border-bottom: 1px solid var(--whk-border);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.whk-mobile-page-title {
font-size: 24px;
font-weight: 700;
color: var(--whk-ink);
letter-spacing: -0.02em;
margin: 0;
line-height: 1.1;
}
.whk-mobile-page-sub {
font-size: 11px;
color: var(--whk-ink-muted);
margin-top: 3px;
}
.whk-mobile-page-body {
padding: 8px 16px 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* =========================================================
MOBILE SCHEDULE — agenda grouped by day
========================================================= */
.whk-mobile-day {
display: flex;
flex-direction: column;
gap: 6px;
}
.whk-mobile-day-label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding: 0 2px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--whk-ink-muted);
}
.whk-mobile-day-date {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--whk-ink-faint);
}
.whk-mobile-agenda-row {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
background: var(--whk-bg);
border: 1px solid var(--whk-border);
border-radius: 8px;
}
/* Patricia's flagged card on Schedule — amber border to mirror Today */
.whk-mobile-agenda-row.is-flagged {
border-color: var(--whk-amber-border);
box-shadow: 0 0 0 1px var(--whk-amber-border);
}
.whk-mobile-agenda-time {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 13px;
font-weight: 500;
color: var(--whk-ink);
letter-spacing: -0.02em;
}
.whk-mobile-agenda-body {
min-width: 0;
}
.whk-mobile-agenda-name {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--whk-ink);
line-height: 1.2;
}
.whk-mobile-agenda-name span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.whk-mobile-agenda-alert {
flex-shrink: 0;
color: var(--whk-amber-ink);
}
.whk-mobile-agenda-addr {
font-size: 11px;
color: var(--whk-ink-soft);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.whk-mobile-agenda-city {
font-size: 10px;
color: var(--whk-ink-muted);
margin-top: 1px;
}
.whk-mobile-agenda-pills {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
/* =========================================================
MOBILE SEARCH — search bar + recent jobs list
========================================================= */
.whk-mobile-search-wrap {
position: relative;
flex-shrink: 0;
padding: 10px 16px;
background: var(--whk-bg);
border-bottom: 1px solid var(--whk-border);
}
.whk-mobile-search-icon {
position: absolute;
top: 50%;
left: 28px;
transform: translateY(-50%);
color: var(--whk-ink-faint);
pointer-events: none;
}
.whk-mobile-search {
width: 100%;
height: 32px;
padding: 0 12px 0 32px;
border: 1px solid var(--whk-border);
border-radius: 16px;
background: var(--whk-surface);
color: var(--whk-ink);
font: inherit;
font-size: 13px;
outline: none;
}
.whk-mobile-search::placeholder {
color: var(--whk-ink-faint);
}
.whk-mobile-recent {
padding: 12px 16px 16px;
}
.whk-mobile-recent-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--whk-ink-muted);
margin-bottom: 8px;
padding: 0 2px;
}
.whk-mobile-recent-row {
padding: 10px 12px;
background: var(--whk-bg);
border: 1px solid var(--whk-border);
border-radius: 8px;
margin-bottom: 6px;
}
.whk-mobile-recent-id {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
color: var(--whk-ink-muted);
margin-bottom: 2px;
}
.whk-mobile-recent-name {
font-size: 13px;
font-weight: 600;
color: var(--whk-ink);
margin-bottom: 4px;
}
.whk-mobile-recent-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.whk-mobile-recent-date {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
color: var(--whk-ink-faint);
}
/* =========================================================
MOBILE OVERLAYS — tap pulse + top banner tooltip
========================================================= */
/* Tap pulse: a small blue glow circle that flies from tap point to the
target card. Top-left origin, positioned via JS-set transform. */
.whk-mobile-pulse {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(59, 130, 246, 0.55);
box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.18),
0 0 16px 2px rgba(59, 130, 246, 0.4);
pointer-events: none;
opacity: 0;
z-index: 50;
transition: opacity 200ms ease-out;
will-change: transform, opacity;
}
.whk-mobile-pulse.is-visible { opacity: 1; }
.whk-mobile-pulse.is-moving {
transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 200ms ease-out;
}
/* Top banner tooltip — push-notification style, slides down below the notch */
.whk-mobile-tooltip {
position: absolute;
top: 52px; /* below 44px status bar + 8px margin */
left: 8px;
right: 8px;
z-index: 60;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #ffffff;
border-radius: 14px;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.06),
0 8px 24px rgba(15, 23, 42, 0.14);
transform: translateY(calc(-100% - 64px));
transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms ease-out;
opacity: 0;
cursor: pointer;
pointer-events: none; /* re-enabled when .is-visible */
}
.whk-mobile-tooltip.is-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.whk-mobile-tooltip-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 7px;
background: var(--whk-ink);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
}
.whk-mobile-tooltip-body {
flex: 1;
min-width: 0;
font-size: 12.5px;
line-height: 1.4;
color: var(--whk-ink);
}
/* ===== Sidebar ===== */
.whk-sidebar {
background: var(--whk-bg);
border-right: 1px solid var(--whk-border);
display: flex;
flex-direction: column;
min-width: 0;
}
.whk-sidebar-brand {
padding: 16px 16px 20px;
display: flex;
align-items: flex-start;
gap: 10px;
border-bottom: 1px solid var(--whk-border);
}
.whk-sidebar-logo {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--whk-blue-deep);
color: #ffffff;
font-weight: 700;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.whk-sidebar-brand-text {
min-width: 0;
padding-top: 1px;
}
.whk-sidebar-brand-name {
font-size: 14px;
font-weight: 600;
color: var(--whk-ink);
line-height: 1.2;
}
.whk-sidebar-brand-tag {
font-size: 11px;
color: var(--whk-ink-muted);
line-height: 1.35;
margin-top: 2px;
}
.whk-sidebar-nav {
padding: 8px 8px;
display: flex;
flex-direction: column;
gap: 1px;
}
.whk-nav-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 12px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--whk-ink-soft);
font: inherit;
font-size: 13px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease;
}
.whk-nav-item:hover:not(.is-active) {
background: var(--whk-surface);
color: var(--whk-ink);
}
.whk-nav-item.is-active {
background: var(--whk-blue);
color: #ffffff;
}
.whk-nav-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
}
/* ----- User identity block (pinned to sidebar bottom) ----- */
.whk-sidebar-user {
margin-top: auto;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-top: 1px solid var(--whk-border);
}
.whk-sidebar-user-avatar {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: #14b8a6; /* teal — distinct from the navy brand and tech avatars */
color: #ffffff;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.whk-sidebar-user-text {
min-width: 0;
line-height: 1.25;
}
.whk-sidebar-user-name {
font-size: 12px;
font-weight: 500;
color: var(--whk-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.whk-sidebar-user-role {
font-size: 11px;
color: var(--whk-ink-muted);
margin-top: 1px;
}
/* ===== Main column (toolbar + content) ===== */
.whk-main {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
}
/* ===== Toolbar ===== */
.whk-toolbar {
display: flex;
align-items: center;
gap: 8px;
height: var(--whk-toolbar-h);
padding: 0 16px;
background: var(--whk-bg);
border-bottom: 1px solid var(--whk-border);
flex-shrink: 0;
}
.whk-toolbar-date {
display: inline-flex;
align-items: center;
border: 1px solid var(--whk-border);
border-radius: 8px;
background: var(--whk-bg);
height: 32px;
padding: 0 2px;
flex-shrink: 0;
}
.whk-toolbar-iconbtn {
width: 24px;
height: 24px;
border: 0;
background: transparent;
color: var(--whk-ink-muted);
border-radius: 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 0.12s ease, color 0.12s ease;
}
.whk-toolbar-iconbtn:hover {
background: var(--whk-surface);
color: var(--whk-ink);
}
.whk-toolbar-iconbtn svg {
width: 14px;
height: 14px;
}
.whk-toolbar-date-text {
padding: 0 8px;
line-height: 1.1;
}
.whk-toolbar-date-label {
font-size: 12px;
font-weight: 500;
color: var(--whk-ink);
}
.whk-toolbar-date-value {
font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
font-size: 10px;
color: var(--whk-ink-muted);
font-variant-numeric: tabular-nums;
}
.whk-toolbar-toggle {
display: inline-flex;
align-items: center;
border: 1px solid var(--whk-border);
border-radius: 8px;
padding: 2px;
gap: 0;
height: 32px;
flex-shrink: 0;
}
.whk-toggle-btn {
border: 0;
background: transparent;
padding: 4px 12px;
font: inherit;
font-size: 12px;
font-weight: 500;
color: var(--whk-ink-muted);
border-radius: 6px;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.whk-toggle-btn:hover:not(.is-active) {
color: var(--whk-ink);
}
.whk-toggle-btn.is-active {
background: var(--whk-blue);
color: #ffffff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.whk-toolbar-pill-unscheduled {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 10px;
border: 1px solid var(--whk-red-border);
background: var(--whk-red-soft);
color: var(--whk-red-ink);
border-radius: 8px;
font: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 0.12s ease;
flex-shrink: 0;
}
.whk-toolbar-pill-unscheduled:hover {
background: #fde8e8;
}
.whk-toolbar-pill-unscheduled svg {
width: 14px;
height: 14px;
stroke: var(--whk-red-ink);
}
.whk-toolbar-badge {
background: var(--whk-red-bright);
color: #ffffff;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
line-height: 1;
padding: 2px 6px;
font-variant-numeric: tabular-nums;
}
.whk-toolbar-search {
position: relative;
width: 180px;
min-width: 120px;
height: 32px;
flex-shrink: 1;
}
.whk-search-icon {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
color: var(--whk-ink-faint);
pointer-events: none;
}
.whk-toolbar-search input {
width: 100%;
height: 100%;
border: 1px solid var(--whk-border);
background: var(--whk-bg);
border-radius: 8px;
padding: 0 10px 0 28px;
font: inherit;
font-size: 12px;
color: var(--whk-ink);
outline: none;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.whk-toolbar-search input::placeholder {
color: var(--whk-ink-faint);
}
.whk-toolbar-search input:focus {
border-color: var(--whk-blue);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
/* Push the Demo + Print button cluster to the right of the toolbar.
Only the Demo button (which renders first in the cluster) needs
the auto margin; Print sits naturally next to it. */
.whk-toolbar-btn-demo {
margin-left: auto;
}
.whk-toolbar-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 10px;
border: 1px solid var(--whk-border);
background: var(--whk-bg);
color: var(--whk-ink);
border-radius: 8px;
font: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: background 0.12s ease, border-color 0.12s ease;
flex-shrink: 0;
}
.whk-toolbar-btn:hover {
background: var(--whk-surface);
border-color: var(--whk-border-strong);
}
.whk-toolbar-btn svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* ===== Content area ===== */
.whk-content {
flex: 1;
min-height: 0;
overflow: hidden;
background: var(--whk-bg);
position: relative;
}
/* View containers — stacked absolute layers, only .is-active visible.
Cross-fade between them on view switch. */
.whk-view {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity 200ms ease-out, visibility 0s linear 200ms;
overflow: auto;
}
.whk-view.is-active {
opacity: 1;
pointer-events: auto;
visibility: visible;
transition: opacity 200ms ease-in 200ms, visibility 0s linear 0s;
}
/* Dispatch is special — its inner .whk-dispatch already manages height */
.whk-view-dispatch { overflow: hidden; }
/* Shared page wrapper for all sidebar views (Dashboard, Customers, etc.) */
.whk-page {
padding: 20px 24px 24px;
min-height: 100%;
box-sizing: border-box;
}
.whk-page-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--whk-border);
}
.whk-page-title {
font-size: 22px;
font-weight: 600;
color: var(--whk-ink);
margin: 0 0 2px 0;
line-height: 1.2;
}
.whk-page-sub {
font-size: 13px;
color: var(--whk-ink-muted);
margin: 0;
}
.whk-page-aside {
text-align: right;
flex-shrink: 0;
}
.whk-page-eyebrow {
font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
font-size: 10px;
letter-spacing: 0.06em;
color: var(--whk-ink-soft);
font-weight: 500;
}
.whk-page-aside-tiny {
font-size: 10px;
color: var(--whk-ink-faint);
margin-top: 2px;
}
/* ----- KPI cards ----- */
.whk-kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.whk-kpi {
background: var(--whk-bg);
border: 1px solid var(--whk-border);
border-radius: 8px;
padding: 14px 16px;
min-width: 0;
}
.whk-kpi-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--whk-ink-faint);
margin-bottom: 4px;
}
.whk-kpi-value {
font-size: 24px;
font-weight: 600;
color: var(--whk-ink);
line-height: 1.1;
margin-bottom: 6px;
font-variant-numeric: tabular-nums;
}
.whk-kpi-trend {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--whk-ink-muted);
margin-bottom: 4px;
}
.whk-kpi-trend-pos {
color: #047857;
}
.whk-kpi-context {
font-size: 11px;
color: var(--whk-ink-faint);
}
/* ----- Alert/leaderboard cards row ----- */
.whk-alerts-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.whk-alert-card {
background: var(--whk-bg);
border: 1px solid var(--whk-border);
border-radius: 8px;
padding: 14px 16px;
display: flex;
flex-direction: column;
min-width: 0;
}
.whk-alert-cert {
border-color: #fde68a;
background: #fffbeb;
}
.whk-alert-quotes {
border-color: #fde68a;
background: #fffbeb;
}
.whk-alert-head {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
}
.whk-alert-badge {
flex-shrink: 0;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 4px;
background: #f59e0b;
color: #ffffff;
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.whk-alert-card:not(.whk-alert-cert):not(.whk-alert-quotes) .whk-alert-badge {
background: var(--whk-ink-muted);
}
.whk-alert-title {
font-size: 13px;
font-weight: 600;
color: var(--whk-ink);
line-height: 1.3;
}
.whk-alert-sub {
font-size: 11px;
color: var(--whk-ink-muted);
margin-top: 1px;
}
.whk-alert-list {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.whk-alert-item {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 8px;
padding: 6px 0;
font-size: 11px;
border-top: 1px solid rgba(0,0,0,0.05);
}
.whk-alert-item:first-child { border-top: 0; }
.whk-alert-item-warn .whk-alert-item-name {
color: #b45309;
font-weight: 600;
}
.whk-alert-item-name {
font-size: 12px;
font-weight: 500;
color: var(--whk-ink);
grid-column: 1;
}
.whk-alert-item-detail {
grid-column: 1;
font-size: 11px;
color: var(--whk-ink-muted);
margin-top: 1px;
}
.whk-alert-item-tag {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
font-size: 10px;
color: var(--whk-ink-muted);
white-space: nowrap;
}
.whk-alert-action {
margin-top: 10px;
font-size: 11px;
color: #047857;
font-weight: 500;
}
/* Leaderboard */
.whk-leaderboard {
display: flex;
flex-direction: column;
}
.whk-leader-row {
display: grid;
grid-template-columns: 18px 1fr auto;
gap: 10px;
align-items: center;
padding: 5px 0;
font-size: 12px;
border-top: 1px solid rgba(0,0,0,0.05);
}
.whk-leader-row:first-child { border-top: 0; }
.whk-leader-rank {
font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
font-size: 10px;
color: var(--whk-ink-faint);
text-align: right;
}
.whk-leader-num {
font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
font-size: 11px;
color: var(--whk-ink);
font-weight: 500;
}
/* ----- Page header right-aside variant for views that have buttons */
.whk-page-aside-buttons {
display: flex;
gap: 8px;
}
/* Page-level search input (used in Customers header) */
.whk-page-search {
width: 240px;
flex-shrink: 0;
}
/* ----- Generic data table (Customers, Compliance refrigerant log, etc.) ----- */
.whk-table-wrap {
border: 1px solid var(--whk-border);
border-radius: 8px;
overflow: hidden;
background: var(--whk-bg);
}
.whk-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.whk-table thead th {
text-align: left;
padding: 10px 14px;
background: var(--whk-surface);
border-bottom: 1px solid var(--whk-border);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--whk-ink-faint);
text-transform: uppercase;
white-space: nowrap;
}
.whk-table tbody td {
padding: 10px 14px;
border-bottom: 1px solid rgba(0,0,0,0.04);
color: var(--whk-ink);
vertical-align: middle;
}
.whk-table tbody tr:last-child td {
border-bottom: 0;
}
.whk-tr {
transition: background 0.12s ease;
cursor: pointer;
}
.whk-tr:hover {
background: var(--whk-blue-soft);
}
.whk-tr:hover .whk-td-arrow {
transform: translateX(2px);
color: var(--whk-blue);
}
.whk-th-num, .whk-td-num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.whk-th-arrow, .whk-td-arrow {
width: 24px;
padding-right: 16px !important;
text-align: right;
color: var(--whk-ink-faint);
font-size: 16px;
transition: transform 0.12s ease, color 0.12s ease;
}
.whk-td-name {
min-width: 0;
}
.whk-customer-name {
font-weight: 500;
color: var(--whk-ink);
}
.whk-td-mono {
font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
font-size: 11px;
color: var(--whk-ink-soft);
}
/* Type pills */
.whk-type-pill {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 7px;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
border: 1px solid transparent;
}
.whk-type-res {
background: #f1f5f9;
color: #475569;
border-color: #e2e8f0;
}
.whk-type-com {
background: #eef2ff;
color: #4338ca;
border-color: #c7d2fe;
}
/* Tier pills */
.whk-tier-pill {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 7px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
border: 1px solid transparent;
}
.whk-tier-plus {
background: #ecfdf5;
color: #047857;
border-color: #a7f3d0;
}
.whk-tier-prem {
background: #fef3c7;
color: #92400e;
border-color: #fde68a;
}
.whk-tier-basic {
background: #f1f5f9;
color: #475569;
border-color: #e2e8f0;
}
.whk-tier-empty {
color: var(--whk-ink-faint);
font-size: 14px;
}
/* Table footer */
.whk-table-footer {
padding-top: 12px;
font-size: 11px;
color: var(--whk-ink-muted);
}
/* ----- Compliance view ----- */
.whk-page-title-row {
display: flex;
align-items: center;
gap: 10px;
}
.whk-epa-pill {
display: inline-flex;
align-items: center;
gap: 4px;
height: 22px;
padding: 0 8px;
border-radius: 4px;
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
}
.whk-btn-outline {
height: 30px;
padding: 0 12px;
background: var(--whk-bg);
border: 1px solid var(--whk-border);
border-radius: 6px;
font: inherit;
font-size: 12px;
color: var(--whk-ink);
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
}
.whk-btn-outline:hover {
background: var(--whk-surface);
border-color: var(--whk-border-strong);
}
/* Summary stat card (3 stats with vertical dividers) */
.whk-stat-card {
display: flex;
align-items: stretch;
background: var(--whk-bg);
border: 1px solid var(--whk-border);
border-radius: 8px;
padding: 16px 20px;
margin-bottom: 16px;
}
.whk-stat {
flex: 1;
min-width: 0;
padding: 0 20px;
}
.whk-stat:first-child { padding-left: 0; }
.whk-stat:last-child { padding-right: 0; }
.whk-stat-divider {
width: 1px;
background: var(--whk-border);
flex-shrink: 0;
}
.whk-stat-value {
font-size: 28px;
font-weight: 600;
line-height: 1.1;
font-variant-numeric: tabular-nums;
margin-bottom: 4px;
}
.whk-stat-value-blue { color: var(--whk-blue-deep); }
.whk-stat-value-green { color: #047857; }
.whk-stat-value-amber { color: #b45309; }
.whk-stat-label {
font-size: 12px;
font-weight: 500;
color: var(--whk-ink);
margin-bottom: 2px;
}
.whk-stat-sub {
font-size: 11px;
color: var(--whk-ink-muted);
}
/* Filter bar */
.whk-filter-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 10px 14px;
background: var(--whk-surface);
border: 1px solid var(--whk-border);
border-radius: 8px;
margin-bottom: 12px;
font-size: 11px;
}
.whk-filter-label {
color: var(--whk-ink-muted);
}
.whk-filter-date {
font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
color: var(--whk-ink);
}
.whk-filter-sep {
color: var(--whk-ink-faint);
margin: 0 2px;
}
.whk-filter-chips {
display: inline-flex;
gap: 4px;
}
.whk-chip {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
border: 1px solid;
}
.whk-chip-on {
background: var(--whk-blue-soft);
color: var(--whk-blue-deep);
border-color: #bfdbfe;
}
/* Flagged row tint in compliance log */
.whk-tr-flagged {
background: #fef2f2;
}
.whk-tr-flagged:hover {
background: #fee2e2;
}
/* Status pills for compliance table */
.whk-status-pill-tbl {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 7px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
border: 1px solid transparent;
}
.whk-status-ready {
background: #ecfdf5;
color: #047857;
border-color: #a7f3d0;
}
.whk-status-flagged {
background: #fee2e2;
color: #b91c1c;
border-color: #fecaca;
}
/* ----- Memberships tier breakdown ----- */
.whk-tier-card {
background: var(--whk-bg);
border: 1px solid var(--whk-border);
border-radius: 8px;
padding: 14px 16px;
}
.whk-tier-card-head {
margin-bottom: 12px;
}
.whk-tier-bar {
display: flex;
width: 100%;
height: 36px;
border-radius: 6px;
overflow: hidden;
margin-bottom: 10px;
}
.whk-tier-seg {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
font-size: 11px;
font-weight: 600;
color: #ffffff;
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
.whk-tier-seg-basic { background: #94a3b8; }
.whk-tier-seg-plus { background: #10b981; }
.whk-tier-seg-prem { background: #f59e0b; }
.whk-tier-seg-label {
letter-spacing: 0.04em;
}
.whk-tier-seg-num {
font-variant-numeric: tabular-nums;
}
.whk-tier-legend {
display: flex;
gap: 16px;
flex-wrap: wrap;
font-size: 11px;
color: var(--whk-ink-muted);
}
.whk-tier-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.whk-tier-dot {
width: 10px;
height: 10px;
border-radius: 2px;
}
.whk-tier-dot-basic { background: #94a3b8; }
.whk-tier-dot-plus { background: #10b981; }
.whk-tier-dot-prem { background: #f59e0b; }
/* ----- Customer detail panel (slides in from right) ----- */
.whk-detail-panel,
.whk-flag-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 440px;
max-width: 100%;
background: var(--whk-bg);
border-left: 1px solid var(--whk-border);
box-shadow: -16px 0 32px -12px rgba(15, 23, 42, 0.18);
transform: translateX(100%);
opacity: 0;
pointer-events: none;
z-index: 47;
display: flex;
flex-direction: column;
transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 200ms ease-out;
}
.whk-detail-panel.is-visible,
.whk-flag-panel.is-visible {
transform: translateX(0);
opacity: 1;
pointer-events: auto;
}
.whk-detail-header {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 18px 20px;
border-bottom: 1px solid var(--whk-border);
flex-shrink: 0;
}
.whk-detail-header-text {
flex: 1;
min-width: 0;
}
.whk-detail-eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--whk-ink-faint);
margin-bottom: 4px;
}
.whk-detail-title {
font-size: 18px;
font-weight: 600;
color: var(--whk-ink);
margin: 0 0 8px 0;
line-height: 1.2;
}
.whk-detail-sub {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.whk-detail-since {
font-size: 11px;
color: var(--whk-ink-muted);
}
.whk-detail-close,
.whk-flag-close {
flex-shrink: 0;
width: 28px;
height: 28px;
border: 0;
background: transparent;
color: var(--whk-ink-muted);
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 0.12s ease;
}
.whk-detail-close:hover,
.whk-flag-close:hover {
background: var(--whk-surface);
}
.whk-detail-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 0;
}
.whk-detail-section {
padding: 16px 20px;
border-bottom: 1px solid var(--whk-border);
}
.whk-detail-section:last-child {
border-bottom: 0;
}
.whk-detail-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--whk-ink-faint);
margin-bottom: 8px;
}
.whk-detail-line {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--whk-ink);
padding: 4px 0;
}
.whk-detail-line svg {
flex-shrink: 0;
color: var(--whk-ink-muted);
}
/* Equipment cards inside the detail panel */
.whk-detail-equip {
border: 1px solid var(--whk-border);
border-radius: 8px;
padding: 12px 14px;
background: var(--whk-surface);
margin-bottom: 8px;
}
.whk-detail-equip:last-child {
margin-bottom: 0;
}
.whk-detail-equip-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.whk-detail-equip-name {
font-size: 13px;
font-weight: 600;
color: var(--whk-ink);
}
.whk-detail-equip-detail {
font-size: 11px;
color: var(--whk-ink-muted);
}
/* Tech notes */
.whk-detail-note {
font-size: 12px;
color: var(--whk-ink-soft);
line-height: 1.5;
padding: 10px 12px;
background: var(--whk-surface);
border-radius: 6px;
border: 1px solid var(--whk-border);
}
/* Recent jobs list */
.whk-detail-jobs {
display: flex;
flex-direction: column;
gap: 8px;
}
.whk-detail-job {
padding: 8px 0;
border-top: 1px solid rgba(0,0,0,0.04);
}
.whk-detail-job:first-child {
padding-top: 0;
border-top: 0;
}
.whk-detail-job-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}
.whk-detail-job-date {
font-size: 11px;
color: var(--whk-ink-muted);
}
.whk-detail-job-detail {
font-size: 11px;
color: var(--whk-ink-muted);
}
/* Highlighted state on Patricia's row when the panel is opening */
.whk-tr.is-highlighted {
background: var(--whk-blue-soft);
}
/* Flagged-row highlight uses the same warmth as the row's red tint, but
deeper, so the visitor sees clearly which row was clicked. */
.whk-tr.whk-tr-flagged.is-highlighted {
background: #fee2e2;
}
/* Compliance flag panel — issue card */
.whk-flag-issue {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 14px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
}
.whk-flag-issue-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: #fee2e2;
color: #b91c1c;
display: flex;
align-items: center;
justify-content: center;
}
.whk-flag-issue-title {
font-size: 13px;
font-weight: 600;
color: #b91c1c;
margin-bottom: 2px;
line-height: 1.3;
}
.whk-flag-issue-detail {
font-size: 11px;
color: var(--whk-ink-soft);
line-height: 1.5;
}
/* Refrigerant details 2x2 grid */
.whk-flag-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
}
.whk-flag-grid-item {
min-width: 0;
}
.whk-flag-grid-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--whk-ink-faint);
text-transform: uppercase;
margin-bottom: 3px;
}
.whk-flag-grid-value {
font-size: 13px;
color: var(--whk-ink);
font-weight: 500;
}
/* Audit checklist */
.whk-audit-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.whk-audit-item {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
font-size: 12px;
}
.whk-audit-item svg {
flex-shrink: 0;
width: 18px;
height: 18px;
padding: 2px;
border-radius: 50%;
}
.whk-audit-pass {
color: var(--whk-ink);
}
.whk-audit-pass svg {
background: #dcfce7;
color: #047857;
}
.whk-audit-fail {
color: #b91c1c;
font-weight: 500;
}
.whk-audit-fail svg {
background: #fee2e2;
color: #b91c1c;
}
/* Suggested fix block */
.whk-flag-fix {
font-size: 12px;
color: var(--whk-ink-soft);
line-height: 1.5;
padding: 10px 12px;
background: var(--whk-surface);
border-radius: 6px;
border: 1px solid var(--whk-border);
}
/* ===== Dispatch view ===== */
.whk-dispatch {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
position: relative;
}
/* Status legend bar — sits above the grid */
.whk-legend {
display: flex;
align-items: center;
gap: 14px;
height: 32px;
padding: 0 16px;
border-bottom: 1px solid var(--whk-border);
background: var(--whk-bg);
font-size: 11px;
color: var(--whk-ink-muted);
flex-shrink: 0;
white-space: nowrap;
}
.whk-legend-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--whk-ink-faint);
}
.whk-legend-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.whk-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.whk-dot-scheduled { background: #3b82f6; }
.whk-dot-enroute { background: #f59e0b; }
.whk-dot-onsite { background: #10b981; }
.whk-dot-completed { background: #94a3b8; }
.whk-dot-unscheduled{ background: #ef4444; }
.whk-dot-mismatch { background: #f59e0b; outline: 1.5px solid #fbbf24; outline-offset: 1px; }
.whk-legend-divider {
width: 1px;
height: 14px;
background: var(--whk-border);
margin: 0 2px;
}
.whk-legend-meta {
margin-left: auto;
font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
font-size: 10px;
color: var(--whk-ink-faint);
font-variant-numeric: tabular-nums;
}
/* Grid wrapper handles horizontal scroll if grid overflows */
.whk-grid-wrap {
flex: 1;
min-height: 0;
overflow: auto;
background: var(--whk-bg);
position: relative;
}
/* The grid itself: leftmost 220px column for tech (wider than 180px spec to
fit names + A2L badge + status pill on one row at the demo's narrower width),
then 12 hour columns. */
.whk-grid {
--whk-tech-col-w: 230px;
--whk-hour-w: 100px;
--whk-row-h: 52px;
--whk-header-h: 28px;
display: grid;
grid-template-columns: var(--whk-tech-col-w) repeat(12, var(--whk-hour-w));
width: max-content;
min-width: 100%;
}
/* Header row cells */
.whk-grid-header {
height: var(--whk-header-h);
border-bottom: 1px solid var(--whk-border);
background: var(--whk-bg);
display: flex;
align-items: center;
font-size: 11px;
color: var(--whk-ink-muted);
position: sticky;
top: 0;
z-index: 2;
}
.whk-grid-techs-cell {
padding: 0 16px;
gap: 8px;
border-right: 1px solid var(--whk-border);
/* Sticky-left so the tech column stays visible during horizontal scroll */
position: sticky;
left: 0;
z-index: 3;
}
.whk-grid-techs-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--whk-ink-faint);
}
.whk-grid-techs-count {
font-size: 11px;
color: var(--whk-ink-muted);
font-variant-numeric: tabular-nums;
}
.whk-grid-hour {
padding: 0 8px;
font-size: 11px;
color: var(--whk-ink-muted);
font-variant-numeric: tabular-nums;
border-right: 1px solid var(--whk-border);
}
.whk-grid-hour:last-child {
border-right: 0;
}
/* ---- Tech rows ---- */
/* Tech-info cell: column 1, sticky left so it stays during horizontal scroll */
.whk-row-tech {
grid-column: 1;
display: flex;
align-items: center;
gap: 10px;
padding: 0 12px;
height: var(--whk-row-h);
border-bottom: 1px solid var(--whk-border);
border-right: 1px solid var(--whk-border);
background: var(--whk-bg);
position: sticky;
left: 0;
z-index: 1;
}
/* Schedule strip: spans columns 2 through end. Houses absolutely-positioned job cards. */
.whk-row-strip {
grid-column: 2 / -1;
height: var(--whk-row-h);
border-bottom: 1px solid var(--whk-border);
position: relative;
/* Hour gridlines drawn as a repeating linear-gradient — cheap and crisp */
background-image: linear-gradient(to right, var(--whk-border) 1px, transparent 1px);
background-size: var(--whk-hour-w) 100%;
background-position: 0 0;
}
/* Avatar circle — saturated solid bg + white text. Each tech's hue is set
via the modifier class below. Whittaker's desktop is a dispatcher's
scan grid, where saturated solids read clearest at 32px. Capitol Ridge
uses a softer pastel pattern (separate classes); the two products keep
their own design languages on purpose. */
.whk-avatar {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
color: #ffffff;
font-size: 11px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.02em;
line-height: 1;
}
.whk-avatar-pink { background: #db2777; }
.whk-avatar-cyan { background: #0891b2; }
.whk-avatar-slate { background: #475569; }
.whk-avatar-green { background: #16a34a; }
.whk-avatar-purple { background: #9333ea; }
.whk-avatar-orange { background: #ea580c; }
.whk-avatar-blue { background: #1d4ed8; }
.whk-avatar-teal { background: #14b8a6; }
.whk-avatar-red { background: #b91c1c; }
.whk-avatar-violet { background: #7c3aed; }
.whk-avatar-yellow { background: #a16207; }
.whk-avatar-emerald { background: #0d9488; }
.whk-tech-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.2;
}
.whk-tech-name-row {
display: flex;
align-items: center;
gap: 6px;
}
.whk-tech-name {
font-size: 13px;
font-weight: 500;
color: var(--whk-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* A2L badge on tech name row */
.whk-a2l-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
height: 16px;
padding: 0 5px;
border-radius: 4px;
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.04em;
}
.whk-a2l-badge::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #10b981;
margin-right: 3px;
}
.whk-tech-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
min-width: 0;
}
.whk-tech-role {
font-size: 11px;
color: var(--whk-ink-muted);
white-space: nowrap;
}
/* Status pills on tech meta line */
.whk-status-pill {
display: inline-flex;
align-items: center;
height: 16px;
padding: 0 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
border: 1px solid transparent;
white-space: nowrap;
flex-shrink: 0;
}
.whk-status-idle {
background: #f1f5f9;
color: #64748b;
border-color: #e2e8f0;
}
.whk-status-onsite {
background: #ecfdf5;
color: #047857;
border-color: #a7f3d0;
}
.whk-status-enroute {
background: #fef3c7;
color: #92400e;
border-color: #fde68a;
}
.whk-status-offduty {
background: #f8fafc;
color: #94a3b8;
border-color: #e2e8f0;
}
/* ---- Job cards ---- */
.whk-job {
position: absolute;
top: 3px;
bottom: 3px;
padding: 2px 7px;
border-radius: 4px;
border: 1px solid;
background: var(--whk-bg);
font-size: 11px;
line-height: 1.3;
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
cursor: pointer;
}
/* Status: scheduled — soft blue */
.whk-job-scheduled {
background: #eff6ff;
border-color: #93c5fd;
color: #1e3a8a;
}
/* Status: on site — soft green */
.whk-job-onsite {
background: #ecfdf5;
border-color: #6ee7b7;
color: #065f46;
}
/* Status: en route — soft amber */
.whk-job-enroute {
background: #fef3c7;
border-color: #fcd34d;
color: #92400e;
}
.whk-job-head {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
}
.whk-job-icon {
flex-shrink: 0;
width: 11px;
height: 11px;
opacity: 0.7;
}
.whk-job-customer {
font-weight: 600;
font-size: 11px;
color: var(--whk-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
min-width: 0;
}
/* Mismatch warning triangle on Henderson card */
.whk-job-flag {
flex-shrink: 0;
width: 12px;
height: 12px;
}
.whk-job-meta {
font-size: 10px;
line-height: 1.4; /* explicit so descenders (g, y, p) aren't clipped */
color: var(--whk-ink-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0; /* don't let flex squash this below its line-height */
}
.whk-job-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
margin-top: auto;
}
.whk-job-time {
font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
font-size: 9px;
color: var(--whk-ink-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Refrigerant pills */
.whk-job-refrigerant {
flex-shrink: 0;
display: inline-flex;
align-items: center;
height: 14px;
padding: 0 5px;
border-radius: 3px;
font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.02em;
}
.whk-ref-410a {
background: #f1f5f9;
color: #475569;
border: 1px solid #cbd5e1;
}
.whk-ref-454b {
background: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
}
/* =========================================================
OVERLAYS (cursor, dim, modal, tooltip) — hidden by default
========================================================= */
/* First-hover hint: shown once when pointer enters the demo, then never again.
Positioned absolutely top-center within the stage. */
.whk-hint {
position: absolute;
top: 16px;
left: 50%;
transform: translate(-50%, -8px);
z-index: 60; /* above cursor + modal so visitor sees it before clicking */
padding: 10px 16px;
background: #1f2937;
color: #ffffff;
font-size: 13px;
line-height: 1.3;
border-radius: 999px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 250ms ease-out, transform 250ms ease-out;
}
.whk-hint.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
.whk-hint.is-leaving {
/* Slower fade-out per spec — 400ms. translateY stays at 0 for a clean
opacity-only exit. */
opacity: 0;
transition: opacity 400ms ease-in;
}
/* Cursor: animated SVG that flies from click point to target.
Top-left origin; positioned via JS-set transform. */
.whk-cursor {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 22px;
pointer-events: none;
opacity: 0;
z-index: 50;
/* Filter gives the white outline some lift over busy backgrounds */
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
transition: opacity 100ms ease-out;
will-change: transform, opacity;
}
.whk-cursor.is-visible { opacity: 1; }
.whk-cursor.is-moving {
transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease-out;
}
/* Dim layer: darkens the dispatch board behind the modal. */
.whk-dim {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.45);
opacity: 0;
pointer-events: none;
z-index: 40;
transition: opacity 300ms ease-out;
}
.whk-dim.is-visible {
opacity: 1;
pointer-events: auto;
}
/* Henderson card pulse — toggled briefly on the targeted job card */
.whk-job-pulse {
animation: whk-pulse 200ms ease-out;
z-index: 41;
}
@keyframes whk-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.25); }
100% { transform: scale(1); }
}
/* ----- Modal ----- */
.whk-modal {
position: absolute;
/* Center within the content area below the toolbar.
Toolbar is 52px tall; the +26px push centers the modal in
the area between toolbar and stage bottom. */
top: calc(50% + 26px);
left: 50%;
width: 480px;
max-width: calc(100% - 32px);
transform: translate(-50%, calc(-50% + 8px));
background: #ffffff;
border: 2px solid #fcd34d;
border-radius: 12px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
opacity: 0;
pointer-events: none;
z-index: 45;
overflow: hidden;
transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.whk-modal.is-visible {
opacity: 1;
transform: translate(-50%, -50%);
pointer-events: auto;
}
/* Header band */
.whk-modal-header {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 20px;
background: #fef3c7;
border-bottom: 1px solid #fde68a;
}
.whk-modal-shield {
flex-shrink: 0;
width: 24px;
height: 24px;
margin-top: 1px;
}
.whk-modal-header-text {
flex: 1;
min-width: 0;
}
.whk-modal-title {
font-size: 16px;
font-weight: 600;
color: var(--whk-ink);
margin: 0 0 4px 0;
line-height: 1.3;
}
.whk-modal-subtitle {
font-size: 13px;
color: var(--whk-ink-muted);
margin: 0;
line-height: 1.45;
}
.whk-modal-close {
flex-shrink: 0;
width: 24px;
height: 24px;
border: 0;
background: transparent;
color: var(--whk-ink-muted);
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 0.12s ease;
}
.whk-modal-close:hover {
background: rgba(0,0,0,0.06);
}
/* Body sections */
.whk-modal-body {
padding: 0;
}
.whk-modal-section {
padding: 12px 20px;
border-bottom: 1px solid var(--whk-border);
}
.whk-modal-section:last-child {
border-bottom: 0;
}
.whk-modal-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--whk-ink-faint);
margin-bottom: 6px;
}
/* Job line */
.whk-modal-job-line {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 4px;
}
.whk-modal-jobnum {
font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
font-size: 11px;
color: var(--whk-ink-muted);
}
.whk-modal-jobname {
font-size: 14px;
font-weight: 600;
color: var(--whk-ink);
}
.whk-modal-address {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--whk-ink-muted);
}
.whk-modal-address svg {
flex-shrink: 0;
}
/* Equipment box */
.whk-modal-equipment {
border: 1px solid var(--whk-border);
border-radius: 8px;
padding: 12px 14px;
background: var(--whk-surface);
}
.whk-modal-equipment-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.whk-modal-equipment-name {
font-size: 14px;
font-weight: 600;
color: var(--whk-ink);
}
.whk-modal-equipment-detail {
font-size: 12px;
color: var(--whk-ink-muted);
}
/* Tech */
.whk-modal-tech {
display: flex;
align-items: center;
gap: 12px;
}
.whk-modal-tech-name {
font-size: 13px;
font-weight: 600;
color: var(--whk-ink);
line-height: 1.3;
}
.whk-modal-tech-role {
font-size: 12px;
color: var(--whk-ink-muted);
}
/* Cert rows */
.whk-modal-cert {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid;
margin-bottom: 6px;
}
.whk-modal-cert:last-child { margin-bottom: 0; }
.whk-modal-cert-fail {
background: #fef2f2;
border-color: #fecaca;
}
.whk-modal-cert-pass {
background: #ecfdf5;
border-color: #a7f3d0;
}
.whk-modal-cert-icon {
flex-shrink: 0;
width: 18px;
height: 18px;
}
.whk-modal-cert-info {
flex: 1;
min-width: 0;
}
.whk-modal-cert-name {
font-size: 13px;
font-weight: 600;
color: var(--whk-ink);
}
.whk-modal-cert-detail {
font-size: 11px;
color: var(--whk-ink-muted);
}
.whk-modal-cert-status {
flex-shrink: 0;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.04em;
max-width: 110px;
text-align: right;
line-height: 1.3;
}
.whk-modal-cert-status-fail {
color: #b91c1c;
}
.whk-modal-cert-status-pass {
color: #047857;
}
/* Footer */
.whk-modal-footer {
padding: 12px 20px;
border-top: 1px solid var(--whk-border);
background: #fafafa;
}
.whk-modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-bottom: 6px;
}
.whk-modal-btn {
height: 32px;
padding: 0 14px;
border-radius: 6px;
font: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
}
.whk-modal-btn-secondary {
background: var(--whk-bg);
border: 1px solid var(--whk-border);
color: var(--whk-ink);
}
.whk-modal-btn-secondary:hover {
background: var(--whk-surface);
border-color: var(--whk-border-strong);
}
.whk-modal-btn-primary {
background: #0f172a;
border: 1px solid #0f172a;
color: #ffffff;
}
.whk-modal-btn-primary:hover {
background: #1e293b;
border-color: #1e293b;
}
.whk-modal-override {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
font-size: 11px;
color: #b91c1c;
}
/* ----- Tooltip ----- */
.whk-tooltip {
position: absolute;
z-index: 46;
background: #1f2937;
color: #ffffff;
font-size: 13px;
line-height: 1.5;
padding: 12px 16px;
max-width: 280px;
border-radius: 8px;
box-shadow: 0 8px 16px rgba(0,0,0,0.18);
opacity: 0;
transform: translateY(6px);
pointer-events: none;
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.whk-tooltip.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Arrow: rendered via ::before, direction set by modifier class on tooltip */
.whk-tooltip::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
/* Arrow on the LEFT of the tooltip (tooltip sits to the RIGHT of anchor) */
.whk-tooltip-arrow-left::before {
top: calc(50% + var(--arrow-offset, 0px));
left: -6px;
transform: translateY(-50%);
border-width: 6px 6px 6px 0;
border-color: transparent #1f2937 transparent transparent;
}
/* Arrow on the RIGHT (tooltip sits to the LEFT of anchor) */
.whk-tooltip-arrow-right::before {
top: calc(50% + var(--arrow-offset, 0px));
right: -6px;
transform: translateY(-50%);
border-width: 6px 0 6px 6px;
border-color: transparent transparent transparent #1f2937;
}
/* Arrow on the TOP (tooltip sits BELOW anchor) */
.whk-tooltip-arrow-up::before {
top: -6px;
left: calc(50% + var(--arrow-offset, 0px));
transform: translateX(-50%);
border-width: 0 6px 6px 6px;
border-color: transparent transparent #1f2937 transparent;
}
/* Arrow on the BOTTOM (tooltip sits ABOVE anchor) */
.whk-tooltip-arrow-down::before {
bottom: -6px;
left: calc(50% + var(--arrow-offset, 0px));
transform: translateX(-50%);
border-width: 6px 6px 0 6px;
border-color: #1f2937 transparent transparent transparent;
}
.whk-tooltip-body {
/* Sits inside the dark box */
}
/* Position for cert-mismatch tooltip: right of modal, vertical center */
.whk-tooltip-cert {
/* Modal is centered at left:50% width:480px, so its right edge is at
(50% + 240px). We want tooltip to sit 16px past that, vertically
centered with the modal. Modal is ~~480px tall, top:120 → vert center
at ~360. */
top: 220px;
left: calc(50% + 240px + 16px);
}
/* prefers-reduced-motion: skip visual animations, but JS-driven timers
(auto-dismiss) still run so the demo is coherent. */
@media (prefers-reduced-motion: reduce) {
.whk-stage *,
.whk-stage *::before,
.whk-stage *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
/* Hide cursor entirely; dim/modal/tooltip just snap in/out. */
.whk-cursor { display: none !important; }
}
/* =========================================================
CAPITOL RIDGE OPS — INTERACTIVE DEMO
Desktop renders .crd-demo-desktop; mobile (≤760px) renders
.crd-demo-mobile (Session 7+). Tokens scoped to .crd-stage so
this demo's design system stays isolated from the rest of the
page and from Whittaker.
========================================================= */
.crd-demo-desktop {
/* Mirrors .whk-demo-desktop — true-app surface, hairline border,
layered shadow, 16:10 aspect for the in-page demo window. */
background: #ffffff;
aspect-ratio: 16 / 10;
max-height: min(80vh, 720px);
overflow: hidden;
border-radius: 12px;
border: 1px solid rgba(15, 23, 42, 0.10);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 8px 24px rgba(15, 23, 42, 0.08),
0 24px 48px rgba(15, 23, 42, 0.06);
}
/* Mobile demo wrapper — hidden on desktop, swapped in below 760px. */
.crd-demo-mobile {
display: none;
}
@media (max-width: 760px) {
.crd-demo-desktop {
display: none;
}
.crd-demo-mobile {
display: flex;
justify-content: center;
padding: 8px 0 16px;
}
}
/* =========================================================
CAPITOL RIDGE MOBILE — the .phone-frame holds .crd-stage-mobile.
Tokens re-scoped here so the existing CRD color rules work.
Same structural pattern as Whittaker mobile.
========================================================= */
.crd-stage-mobile {
--crd-bg: #ffffff;
--crd-surface: #f8fafc;
--crd-border: #e2e8f0;
--crd-border-soft: #f1f5f9;
--crd-ink: #0f172a;
--crd-ink-soft: #334155;
--crd-ink-muted: #64748b;
--crd-ink-faint: #94a3b8;
--crd-emerald: #10b981;
--crd-emerald-deep: #047857;
--crd-emerald-soft: #ecfdf5;
--crd-amber-ink: #b45309;
--crd-amber-soft: #fffbeb;
--crd-amber-border: #fde68a;
--crd-rose-ink: #be123c;
--crd-rose-soft: #fff1f2;
--crd-rose-border: #fecdd3;
width: 320px;
height: 640px;
display: flex;
flex-direction: column;
background: var(--crd-bg);
font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--crd-ink);
font-size: 14px;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
user-select: none;
-webkit-user-select: none;
position: relative;
overflow: hidden;
}
/* ----- Status bar (iPhone-style: time + icons + Dynamic Island) ----- */
.crd-mobile-status {
flex-shrink: 0;
position: relative;
height: 44px;
padding: 0 22px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--crd-bg);
color: var(--crd-ink);
font-family: 'SF Pro Text', 'Inter Tight', -apple-system, sans-serif;
}
.crd-mobile-status-time {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.02em;
position: relative;
z-index: 1;
}
.crd-mobile-status-icons {
display: flex;
align-items: center;
gap: 5px;
color: var(--crd-ink);
opacity: 0.7;
position: relative;
z-index: 1;
}
.crd-mobile-island {
position: absolute;
top: 9px;
left: 50%;
transform: translateX(-50%);
width: 96px;
height: 26px;
background: #000;
border-radius: 13px;
pointer-events: none;
}
/* ----- Content area: flex container, holds active view ----- */
.crd-mobile-content {
flex: 1;
min-height: 0;
position: relative;
overflow: hidden;
background: var(--crd-bg);
}
/* ----- Mobile views: slide horizontally between Home and detail ----- */
.crd-mobile-view {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
transform: translateX(100%);
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
background: var(--crd-bg);
will-change: transform;
}
.crd-mobile-view.is-active {
transform: translateX(0);
}
.crd-mobile-view.is-leaving {
transform: translateX(-100%);
}
/* Home view base */
.crd-mobile-view-home {
padding: 16px 16px 12px;
gap: 12px;
}
/* ----- Home header (eyebrow + Good morning + Sandra Chen + CR mark) ----- */
.crd-mobile-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-shrink: 0;
}
.crd-mobile-eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--crd-emerald-deep);
text-transform: uppercase;
}
.crd-mobile-title {
font-family: 'Fraunces', 'Inter Tight', serif;
font-size: 24px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--crd-ink);
margin: 2px 0 2px 0;
}
.crd-mobile-subtitle {
font-size: 12px;
color: var(--crd-ink-muted);
}
/* Green CR brand mark — mirrors desktop sidebar mark */
.crd-mobile-mark {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--crd-emerald-deep);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
}
/* ----- KPI mini-grid 2×2 ----- */
.crd-mobile-kpis {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
flex-shrink: 0;
}
.crd-mobile-kpi {
background: var(--crd-bg);
border: 1px solid var(--crd-border);
border-radius: 10px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 2px;
}
.crd-mobile-kpi-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--crd-ink-muted);
text-transform: uppercase;
}
.crd-mobile-kpi-value {
font-size: 20px;
font-weight: 700;
color: var(--crd-ink);
letter-spacing: -0.015em;
line-height: 1.1;
}
.crd-mobile-kpi-sub {
font-size: 10px;
color: var(--crd-ink-faint);
}
.crd-mobile-kpi-up {
color: var(--crd-emerald-deep);
}
/* ----- Alert cards (Home: 3 variants — attention / pending / urgent) ----- */
.crd-mobile-alert {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
background: var(--crd-bg);
border: 1px solid var(--crd-border);
border-radius: 10px;
padding: 12px 14px;
cursor: pointer;
transition: background 120ms ease;
}
.crd-mobile-alert:hover {
background: var(--crd-surface);
}
.crd-mobile-alert.is-tapped {
animation: crd-card-pulse 300ms ease-out;
}
@keyframes crd-card-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
.crd-mobile-alert-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--crd-surface);
color: var(--crd-ink-soft);
display: flex;
align-items: center;
justify-content: center;
}
.crd-mobile-alert-icon-amber {
background: var(--crd-amber-soft);
color: var(--crd-amber-ink);
}
.crd-mobile-alert-icon-rose {
background: var(--crd-rose-soft);
color: var(--crd-rose-ink);
}
.crd-mobile-alert-body {
min-width: 0;
flex: 1;
}
.crd-mobile-alert-title {
font-size: 13px;
font-weight: 600;
color: var(--crd-ink);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.crd-mobile-alert-days {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
font-weight: 500;
color: var(--crd-rose-ink);
}
.crd-mobile-alert-sub {
font-size: 11px;
color: var(--crd-ink-muted);
margin-top: 2px;
}
.crd-mobile-alert-chevron {
flex-shrink: 0;
color: var(--crd-ink-faint);
}
/* Card variants */
.crd-mobile-alert-pending {
background: var(--crd-amber-soft);
border-color: var(--crd-amber-border);
}
.crd-mobile-alert-urgent {
background: var(--crd-rose-soft);
border-color: var(--crd-rose-border);
}
/* ----- Detail head (back arrow + title + right pill) ----- */
.crd-mobile-detail-head {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px 10px 8px;
border-bottom: 1px solid var(--crd-border-soft);
}
.crd-mobile-back {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 8px;
background: transparent;
border: none;
color: var(--crd-ink-soft);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 120ms ease;
}
.crd-mobile-back:hover {
background: var(--crd-surface);
}
.crd-mobile-detail-head-text {
flex: 1;
min-width: 0;
}
.crd-mobile-detail-title {
font-size: 14px;
font-weight: 600;
color: var(--crd-ink);
}
.crd-mobile-detail-sub {
font-size: 11px;
color: var(--crd-ink-muted);
margin-top: 1px;
}
.crd-mobile-flagged-count {
flex-shrink: 0;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--crd-ink-soft);
background: var(--crd-surface);
padding: 4px 8px;
border-radius: 4px;
text-transform: uppercase;
}
/* ----- Owners-flagged list (5 owner rows) ----- */
.crd-mobile-flagged-list {
flex: 1;
min-height: 0;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.crd-mobile-orow {
background: var(--crd-bg);
border: 1px solid var(--crd-border);
border-radius: 10px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.crd-mobile-orow-high {
background: var(--crd-rose-soft);
border-color: var(--crd-rose-border);
}
/* yellow rows just use the default card chrome */
.crd-mobile-orow-head {
display: flex;
align-items: center;
gap: 10px;
}
.crd-mobile-orow-avatar {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: #e2e8f0;
color: #334155;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
}
.crd-mobile-orow-id {
flex: 1;
min-width: 0;
}
.crd-mobile-orow-name {
font-size: 13px;
font-weight: 600;
color: var(--crd-ink);
}
.crd-mobile-orow-meta {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9px;
color: var(--crd-ink-faint);
margin-top: 1px;
}
.crd-mobile-orow-bar {
display: flex;
align-items: center;
gap: 8px;
}
.crd-mobile-orow-bar-track {
flex: 1;
height: 4px;
background: #e2e8f0;
border-radius: 2px;
overflow: hidden;
}
.crd-mobile-orow-bar-fill {
height: 100%;
border-radius: 2px;
}
.crd-mobile-orow-bar-fill-high {
background: #f43f5e;
}
.crd-mobile-orow-bar-fill-yellow {
background: #f59e0b;
}
.crd-mobile-orow-score {
flex-shrink: 0;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 11px;
font-weight: 600;
color: var(--crd-ink-soft);
width: 22px;
text-align: right;
}
.crd-mobile-orow-reason {
font-size: 11px;
color: var(--crd-ink-soft);
margin: 0;
line-height: 1.4;
}
/* ----- Bottom tab bar ----- */
.crd-mobile-tabs {
flex-shrink: 0;
display: flex;
align-items: stretch;
height: 60px;
background: var(--crd-bg);
border-top: 1px solid var(--crd-border);
}
.crd-mobile-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
background: transparent;
border: none;
padding: 8px 4px;
color: var(--crd-ink-faint);
cursor: pointer;
transition: color 120ms ease;
font-family: inherit;
}
.crd-mobile-tab:hover {
color: var(--crd-ink-soft);
}
.crd-mobile-tab.is-active {
color: var(--crd-emerald-deep);
}
.crd-mobile-tab-icon {
flex-shrink: 0;
}
.crd-mobile-tab-label {
font-size: 10px;
font-weight: 500;
letter-spacing: -0.01em;
}
/* ----- Pulse: cursor flight target ----- */
.crd-mobile-pulse {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
margin-left: -12px;
margin-top: -12px;
border-radius: 50%;
background: rgba(16, 185, 129, 0.55);
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.18),
0 0 16px 2px rgba(16, 185, 129, 0.4);
pointer-events: none;
opacity: 0;
transform: translate(0, 0);
transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease-out;
z-index: 50;
will-change: transform, opacity;
}
.crd-mobile-pulse.is-visible {
opacity: 1;
}
.crd-mobile-pulse.is-flying {
transform: translate(var(--pulse-x), var(--pulse-y));
}
/* ----- Push-notification banner: slides down from above the notch ----- */
.crd-mobile-tooltip {
position: absolute;
top: 52px; /* below 44px status bar + 8px margin */
left: 8px;
right: 8px;
z-index: 60;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #ffffff;
border-radius: 14px;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.06),
0 8px 24px rgba(15, 23, 42, 0.14);
transform: translateY(calc(-100% - 64px));
transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms ease-out;
opacity: 0;
cursor: pointer;
pointer-events: none; /* re-enabled when .is-visible */
}
.crd-mobile-tooltip.is-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.crd-mobile-tooltip-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 7px;
background: var(--crd-emerald-deep);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
}
.crd-mobile-tooltip-body {
flex: 1;
min-width: 0;
font-size: 12.5px;
line-height: 1.4;
color: var(--crd-ink);
}
/* =========================================================
MAINTENANCE VIEW (mobile) — pipeline as vertical scroll
========================================================= */
.crd-mobile-view-maint {
padding: 16px 16px 12px;
gap: 12px;
}
/* Amount chip (right side of Maintenance header) */
.crd-mobile-amount-chip {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
background: var(--crd-amber-soft);
border: 1px solid var(--crd-amber-border);
border-radius: 8px;
padding: 6px 10px;
}
.crd-mobile-amount-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--crd-amber-ink);
text-transform: uppercase;
}
.crd-mobile-amount-value {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 13px;
font-weight: 700;
color: var(--crd-amber-ink);
letter-spacing: -0.01em;
}
/* Maintenance body wrapper */
.crd-mobile-maint-body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
/* Stalled banner — amber-tinted, full-width */
.crd-mobile-stalled {
flex-shrink: 0;
display: flex;
align-items: flex-start;
gap: 10px;
background: var(--crd-amber-soft);
border: 1px solid var(--crd-amber-border);
border-radius: 10px;
padding: 10px 12px;
}
.crd-mobile-stalled-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(180, 83, 9, 0.12);
color: var(--crd-amber-ink);
display: flex;
align-items: center;
justify-content: center;
}
.crd-mobile-stalled-body {
min-width: 0;
flex: 1;
}
.crd-mobile-stalled-title {
font-size: 13px;
font-weight: 600;
color: var(--crd-amber-ink);
}
.crd-mobile-stalled-sub {
font-size: 11px;
color: var(--crd-ink-muted);
margin-top: 2px;
}
/* Status section header */
.crd-mobile-tkt-section {
display: flex;
flex-direction: column;
gap: 6px;
}
.crd-mobile-tkt-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding: 0 2px;
}
.crd-mobile-tkt-section-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--crd-ink-muted);
text-transform: uppercase;
}
.crd-mobile-tkt-section-amber {
color: var(--crd-amber-ink);
}
.crd-mobile-tkt-section-count {
font-size: 10px;
color: var(--crd-ink-faint);
}
/* Ticket card */
.crd-mobile-tkt {
background: var(--crd-bg);
border: 1px solid var(--crd-border);
border-radius: 10px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 4px;
transition: background 120ms ease;
}
.crd-mobile-tkt:hover {
background: var(--crd-surface);
}
.crd-mobile-tkt-emergency {
border-color: var(--crd-rose-border);
background: var(--crd-rose-soft);
}
.crd-mobile-tkt.is-tapped {
animation: crd-card-pulse 300ms ease-out;
}
.crd-mobile-tkt-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.crd-mobile-tkt-name {
font-size: 13px;
font-weight: 600;
color: var(--crd-ink);
}
.crd-mobile-tkt-id {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
color: var(--crd-ink-faint);
}
.crd-mobile-tkt-addr {
font-size: 11px;
color: var(--crd-ink-muted);
}
.crd-mobile-tkt-issue {
font-size: 12px;
color: var(--crd-ink-soft);
line-height: 1.4;
}
.crd-mobile-tkt-foot {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
}
.crd-mobile-tkt-age {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 11px;
color: var(--crd-ink-soft);
}
.crd-mobile-tkt-cost {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 12px;
font-weight: 600;
color: var(--crd-ink);
margin-left: auto;
}
/* Approval-sent row at bottom of awaiting-approval cards */
.crd-mobile-tkt-approval {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
color: var(--crd-amber-ink);
margin-top: 2px;
}
.crd-mobile-tkt-approval-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #f59e0b;
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
animation: crd-mobile-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes crd-mobile-pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
/* Urgency pills (24H, 72H, EMERGENCY, SCHEDULED) */
.crd-pill-24h {
background: #fffbeb;
color: #b45309;
border-color: #fde68a;
}
.crd-pill-72h {
background: #f1f5f9;
color: #475569;
border-color: #e2e8f0;
}
.crd-pill-emergency {
background: #fff1f2;
color: #be123c;
border-color: #fecdd3;
}
.crd-pill-scheduled {
background: #f1f5f9;
color: #64748b;
border-color: #e2e8f0;
}
/* =========================================================
TKT-035 DETAIL VIEW (sub-screen of Maintenance)
========================================================= */
.crd-mobile-view-tkt035 {
gap: 0;
}
.crd-mobile-tkt-body {
flex: 1;
min-height: 0;
padding: 14px 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Hero row: avatar + name + address */
.crd-mobile-tkt-hero {
display: flex;
align-items: center;
gap: 12px;
padding: 4px 2px 6px;
}
.crd-mobile-tkt-hero-avatar {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
background: #e2e8f0;
color: #334155;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
}
.crd-mobile-tkt-hero-id {
min-width: 0;
flex: 1;
}
.crd-mobile-tkt-hero-name {
font-size: 16px;
font-weight: 700;
color: var(--crd-ink);
letter-spacing: -0.01em;
}
.crd-mobile-tkt-hero-addr {
font-size: 12px;
color: var(--crd-ink-soft);
margin-top: 2px;
}
.crd-mobile-tkt-hero-meta {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
color: var(--crd-ink-faint);
margin-top: 2px;
}
/* Status block — EMERGENCY pill row + age + cost + age progress bar */
.crd-mobile-tkt-status {
background: var(--crd-rose-soft);
border: 1px solid var(--crd-rose-border);
border-radius: 10px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.crd-mobile-tkt-status-row {
display: flex;
align-items: center;
gap: 8px;
}
.crd-mobile-tkt-status-age {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 11px;
color: var(--crd-rose-ink);
}
.crd-mobile-tkt-status-cost {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 13px;
font-weight: 700;
color: var(--crd-ink);
margin-left: auto;
}
.crd-mobile-tkt-status-bar {
display: flex;
align-items: center;
gap: 8px;
}
.crd-mobile-tkt-status-bar-track {
flex: 1;
height: 4px;
background: rgba(190, 18, 60, 0.15);
border-radius: 2px;
overflow: hidden;
}
.crd-mobile-tkt-status-bar-fill {
height: 100%;
background: #f43f5e;
border-radius: 2px;
}
.crd-mobile-tkt-status-bar-label {
flex-shrink: 0;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
color: var(--crd-rose-ink);
}
/* Generic info card with caps label + body */
.crd-mobile-tkt-card {
background: var(--crd-bg);
border: 1px solid var(--crd-border);
border-radius: 10px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.crd-mobile-tkt-card-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--crd-ink-muted);
text-transform: uppercase;
}
.crd-mobile-tkt-card-body {
font-size: 12px;
color: var(--crd-ink-soft);
line-height: 1.45;
margin: 0;
}
/* Vendor row inside the vendor card */
.crd-mobile-tkt-vendor {
display: flex;
align-items: center;
gap: 10px;
}
.crd-mobile-tkt-vendor-avatar {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--crd-emerald-soft);
color: var(--crd-emerald-deep);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
}
.crd-mobile-tkt-vendor-info {
flex: 1;
min-width: 0;
}
.crd-mobile-tkt-vendor-name {
font-size: 13px;
font-weight: 600;
color: var(--crd-ink);
}
.crd-mobile-tkt-vendor-eta {
font-size: 11px;
color: var(--crd-ink-muted);
margin-top: 1px;
}
/* Cost row */
.crd-mobile-tkt-cost-row {
display: flex;
align-items: baseline;
gap: 10px;
}
.crd-mobile-tkt-cost-amount {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 22px;
font-weight: 700;
color: var(--crd-ink);
letter-spacing: -0.015em;
}
.crd-mobile-tkt-cost-note {
font-size: 11px;
color: var(--crd-emerald-deep);
}
/* Photos placeholder grid */
.crd-mobile-tkt-photos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.crd-mobile-tkt-photo {
aspect-ratio: 1 / 1;
background: var(--crd-surface);
border: 1px solid var(--crd-border);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--crd-ink-faint);
}
/* Action buttons */
.crd-mobile-tkt-action-primary {
flex-shrink: 0;
width: 100%;
padding: 12px 14px;
background: #0f172a;
color: #ffffff;
border: none;
border-radius: 10px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 120ms ease;
margin-top: 4px;
}
.crd-mobile-tkt-action-primary:hover {
background: #1e293b;
}
.crd-mobile-tkt-action-link {
flex-shrink: 0;
width: 100%;
padding: 8px;
background: transparent;
color: var(--crd-emerald-deep);
border: none;
font-family: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
.crd-mobile-tkt-action-link:hover {
color: #065f46;
}
/* =========================================================
OWNERS VIEW (mobile) — flagged-at-top + healthy divider
========================================================= */
.crd-mobile-view-owners {
padding: 16px 16px 12px;
gap: 12px;
}
/* Search icon chip in header */
.crd-mobile-search-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--crd-surface);
color: var(--crd-ink-soft);
display: flex;
align-items: center;
justify-content: center;
}
/* Owners list wrapper */
.crd-mobile-owners-list {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Healthy divider — caps label with right-aligned count */
.crd-mobile-orow-divider {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 8px 2px 4px;
margin-top: 4px;
}
.crd-mobile-orow-divider-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--crd-emerald-deep);
text-transform: uppercase;
}
.crd-mobile-orow-divider-count {
font-size: 10px;
color: var(--crd-ink-faint);
}
/* Healthy row variant — compact, head-only */
.crd-mobile-orow-healthy {
padding: 10px 12px;
}
.crd-pill-healthy {
background: #ecfdf5;
color: #047857;
border-color: #a7f3d0;
}
/* =========================================================
JENNIFER WALSH DETAIL VIEW
========================================================= */
.crd-mobile-view-jennifer {
gap: 0;
}
.crd-mobile-jen-body {
flex: 1;
min-height: 0;
padding: 14px 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Hero row — 56px avatar + name + portfolio + meta */
.crd-mobile-jen-hero {
display: flex;
align-items: center;
gap: 14px;
padding: 4px 2px 6px;
}
.crd-mobile-jen-avatar {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 50%;
background: #e2e8f0;
color: #334155;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.02em;
}
.crd-mobile-jen-id {
min-width: 0;
flex: 1;
}
.crd-mobile-jen-name {
font-size: 18px;
font-weight: 700;
color: var(--crd-ink);
letter-spacing: -0.015em;
}
.crd-mobile-jen-portfolio {
font-size: 12px;
color: var(--crd-ink-soft);
margin-top: 2px;
}
.crd-mobile-jen-meta {
font-size: 11px;
color: var(--crd-ink-faint);
margin-top: 2px;
}
/* Risk score block (the canonical tooltip anchor) */
.crd-mobile-jen-score {
background: var(--crd-rose-soft);
border: 1px solid var(--crd-rose-border);
border-radius: 12px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.crd-mobile-jen-score-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.crd-mobile-jen-score-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--crd-rose-ink);
text-transform: uppercase;
}
.crd-mobile-jen-score-row {
display: flex;
align-items: baseline;
gap: 4px;
}
.crd-mobile-jen-score-num {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 36px;
font-weight: 700;
color: var(--crd-rose-ink);
letter-spacing: -0.02em;
line-height: 1;
}
.crd-mobile-jen-score-out {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 14px;
color: var(--crd-ink-faint);
}
.crd-mobile-jen-score-bar {
display: flex;
align-items: center;
}
.crd-mobile-jen-score-bar-track {
flex: 1;
height: 6px;
background: rgba(190, 18, 60, 0.15);
border-radius: 3px;
overflow: hidden;
}
.crd-mobile-jen-score-bar-fill {
height: 100%;
background: #f43f5e;
border-radius: 3px;
}
.crd-mobile-jen-score-foot {
font-size: 11px;
color: var(--crd-ink-muted);
}
/* Why-flagged reasons list (bullet markers) */
.crd-mobile-jen-reasons {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.crd-mobile-jen-reasons li {
position: relative;
padding-left: 14px;
font-size: 12px;
color: var(--crd-ink-soft);
line-height: 1.4;
}
.crd-mobile-jen-reasons li::before {
content: "";
position: absolute;
left: 2px;
top: 7px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--crd-rose-ink);
}
/* Activity timeline — caps date column + text column */
.crd-mobile-jen-activity {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.crd-mobile-jen-activity-item {
display: flex;
gap: 10px;
align-items: flex-start;
}
.crd-mobile-jen-activity-date {
flex-shrink: 0;
width: 50px;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--crd-ink-faint);
text-transform: uppercase;
padding-top: 1px;
}
.crd-mobile-jen-activity-text {
font-size: 12px;
color: var(--crd-ink-soft);
line-height: 1.4;
}
/* ----- Stage: design tokens + sidebar/main grid ----- */
.crd-stage {
--crd-sidebar-w: 200px;
--crd-bg: #ffffff;
--crd-surface: #f8fafc; /* slate-50 */
--crd-border: #e2e8f0; /* slate-200 */
--crd-border-soft: #f1f5f9; /* slate-100 */
--crd-ink: #0f172a; /* slate-900 */
--crd-ink-soft: #334155; /* slate-700 */
--crd-ink-muted: #64748b; /* slate-500 */
--crd-ink-faint: #94a3b8; /* slate-400 */
--crd-emerald: #10b981; /* emerald-500 */
--crd-emerald-deep: #047857; /* emerald-700 */
--crd-emerald-soft: #ecfdf5; /* emerald-50 */
--crd-emerald-icon: #059669; /* emerald-600 */
display: grid;
grid-template-columns: var(--crd-sidebar-w) 1fr;
width: 100%;
height: 100%;
position: relative;
font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--crd-ink);
font-size: 14px;
line-height: 1.4;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
background: var(--crd-bg);
user-select: none;
-webkit-user-select: none;
}
/* ----- Sidebar ----- */
.crd-sidebar {
display: flex;
flex-direction: column;
background: var(--crd-bg);
border-right: 1px solid var(--crd-border);
min-height: 0;
}
/* Brand block at top of sidebar */
.crd-brand {
padding: 22px 18px 18px;
border-bottom: 1px solid var(--crd-border);
display: flex;
align-items: flex-start;
gap: 10px;
}
.crd-brand-logo {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 6px;
background: var(--crd-emerald-icon);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
}
.crd-brand-text {
min-width: 0;
padding-top: 1px;
}
.crd-brand-name {
font-size: 14px;
font-weight: 600;
color: var(--crd-ink);
line-height: 1.2;
}
.crd-brand-sub {
font-size: 11px;
color: var(--crd-ink-muted);
line-height: 1.4;
margin-top: 4px;
}
/* Nav items */
.crd-sidebar-nav {
flex: 1;
padding: 12px 10px;
display: flex;
flex-direction: column;
gap: 2px;
min-height: 0;
}
.crd-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
background: transparent;
border: none;
color: var(--crd-ink-soft);
font-family: inherit;
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
cursor: pointer;
text-align: left;
transition: background 120ms ease, color 120ms ease;
}
.crd-nav-item:hover {
background: var(--crd-surface);
color: var(--crd-ink);
}
.crd-nav-item.is-active {
background: var(--crd-emerald-soft);
color: var(--crd-emerald-deep);
}
.crd-nav-item.is-active:hover {
/* No state change on hover when already active — feels stable */
background: var(--crd-emerald-soft);
color: var(--crd-emerald-deep);
}
.crd-nav-icon {
flex-shrink: 0;
color: var(--crd-ink-faint);
}
.crd-nav-item.is-active .crd-nav-icon {
color: var(--crd-emerald-icon);
}
.crd-nav-item:hover .crd-nav-icon {
color: var(--crd-ink-soft);
}
.crd-nav-item.is-active:hover .crd-nav-icon {
color: var(--crd-emerald-icon);
}
/* Sandra Chen footer — pinned to bottom of sidebar */
.crd-user {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-top: 1px solid var(--crd-border);
}
.crd-user-avatar {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background: #e2e8f0; /* slate-200 */
color: var(--crd-ink-soft);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
}
.crd-user-text {
min-width: 0;
}
.crd-user-name {
font-size: 12px;
font-weight: 500;
color: var(--crd-ink);
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crd-user-role {
font-size: 11px;
color: var(--crd-ink-muted);
line-height: 1.3;
margin-top: 1px;
}
/* ----- Main column ----- */
.crd-main {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
background: var(--crd-bg);
}
/* Page header band — sits above the content area on every view */
.crd-page-head {
flex-shrink: 0;
padding: 18px 28px 14px;
background: var(--crd-bg);
border-bottom: 1px solid var(--crd-border-soft);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.crd-page-head-left {
min-width: 0;
}
.crd-page-title {
font-size: 22px;
font-weight: 700;
color: var(--crd-ink);
letter-spacing: -0.02em;
margin: 0;
line-height: 1.1;
}
.crd-page-sub {
font-size: 12px;
color: var(--crd-ink-muted);
margin-top: 4px;
}
.crd-page-head-right {
text-align: right;
flex-shrink: 0;
}
.crd-page-date {
font-size: 12px;
color: var(--crd-ink-soft);
font-weight: 500;
}
.crd-page-greet {
font-size: 11px;
color: var(--crd-ink-muted);
margin-top: 2px;
}
/* Maintenance head — caps eyebrow + amber-700 dollar amount */
.crd-page-eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--crd-ink-muted);
text-transform: uppercase;
}
.crd-page-amount {
font-size: 18px;
font-weight: 700;
color: #b45309; /* amber-700 */
letter-spacing: -0.01em;
margin-top: 2px;
}
/* Multi-head visibility: hide all heads, show only the one matching the
stage's current data-view. Same pattern used for views below. */
.crd-page-head { display: none; }
.crd-stage[data-view="dashboard"] [data-head="dashboard"] { display: flex; }
.crd-stage[data-view="maintenance"] [data-head="maintenance"] { display: flex; }
.crd-stage[data-view="owners"] [data-head="owners"] { display: flex; }
.crd-stage[data-view="vendors"] [data-head="vendors"] { display: flex; }
.crd-stage[data-view="compliance"] [data-head="compliance"] { display: flex; }
/* Multi-view visibility + layout: hidden by default, is-active gets the
full flex column layout. JS toggles is-active during view transitions
(see §6.5 cross-fade). */
.crd-view {
display: none;
}
.crd-view.is-active {
display: flex;
padding: 16px 24px 20px;
flex-direction: column;
gap: 14px;
box-sizing: border-box;
position: relative; /* tooltips inside resolve to view-local coords */
min-height: 100%; /* fill scroll container so tooltips below short views land in real empty space, not get clamped over data */
}
/* Content area — Session 1 placeholder; Session 2 fills with views */
.crd-content {
flex: 1;
min-height: 0;
overflow-y: auto;
background: var(--crd-surface);
position: relative;
}
/* ----- KPI row (4 cards) ----- */
.crd-kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.crd-kpi {
background: var(--crd-bg);
border: 1px solid var(--crd-border);
border-radius: 10px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.crd-kpi-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.crd-kpi-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--crd-ink-muted);
line-height: 1.2;
}
.crd-kpi-icon {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 6px;
background: var(--crd-surface);
color: var(--crd-ink-soft);
display: flex;
align-items: center;
justify-content: center;
}
.crd-kpi-value {
font-size: 26px;
font-weight: 600;
color: var(--crd-ink);
letter-spacing: -0.02em;
line-height: 1.05;
}
.crd-kpi-value-suffix {
font-size: 14px;
font-weight: 500;
color: var(--crd-ink-muted);
letter-spacing: 0;
}
.crd-kpi-trend {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--crd-ink-muted);
flex-wrap: wrap;
}
.crd-trend-arrow {
flex-shrink: 0;
color: var(--crd-emerald-icon);
}
.crd-kpi-delta {
color: var(--crd-emerald-deep);
font-weight: 500;
}
.crd-kpi-sep {
color: var(--crd-ink-faint);
}
.crd-kpi-meta {
color: var(--crd-ink-muted);
}
/* ----- Middle row: heatmap (60%) + owners panel (40%) ----- */
.crd-mid-row {
display: grid;
grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
gap: 14px;
min-height: 0; /* allow children to shrink and scroll inside */
}
/* ----- Generic card primitive used by heatmap, owners panel, etc. ----- */
.crd-card {
background: var(--crd-bg);
border: 1px solid var(--crd-border);
border-radius: 10px;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
/* Mid-row cards size to about ~270px so all 11 neighborhoods + 4 owners are
comfortably visible without crowding the bottom row out of the viewport. */
.crd-mid-row .crd-card {
min-height: 260px;
max-height: 280px;
}
.crd-card-head {
flex-shrink: 0;
padding: 14px 16px 10px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.crd-card-title {
font-size: 14px;
font-weight: 600;
color: var(--crd-ink);
margin: 0;
line-height: 1.2;
}
.crd-card-sub {
font-size: 11px;
color: var(--crd-ink-muted);
margin: 3px 0 0;
}
.crd-card-meta {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
color: var(--crd-ink-muted);
flex-shrink: 0;
}
/* ----- Portfolio Heatmap ----- */
.crd-heatmap-rows {
flex: 1;
overflow-y: auto;
padding: 4px 16px 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.crd-hood {
display: grid;
grid-template-columns: 100px 1fr;
gap: 10px;
align-items: flex-start;
}
.crd-hood-name {
padding-top: 1px;
}
.crd-hood-label {
font-size: 11px;
font-weight: 500;
color: var(--crd-ink-soft);
line-height: 1.2;
}
.crd-hood-count {
font-size: 9px;
color: var(--crd-ink-faint);
margin-top: 1px;
}
.crd-hood-tiles {
display: flex;
flex-wrap: wrap;
gap: 3px;
}
/* Single tile — the 4-color legend lives in CSS variables */
.crd-tile {
display: inline-block;
width: 11px;
height: 11px;
border-radius: 2px;
flex-shrink: 0;
}
.crd-tile-e { background: var(--crd-emerald); }
.crd-tile-a { background: #f59e0b; } /* amber-500 */
.crd-tile-r { background: #f43f5e; } /* rose-500 */
.crd-tile-g { background: #cbd5e1; } /* slate-300 */
/* Heatmap legend: 4 swatches at the bottom, separated by hairline */
.crd-heatmap-legend {
flex-shrink: 0;
padding: 8px 16px 12px;
border-top: 1px solid var(--crd-border-soft);
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.crd-legend-item {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
color: var(--crd-ink-muted);
}
.crd-legend-item .crd-tile {
width: 9px;
height: 9px;
}
/* ----- Owners Need Attention panel ----- */
.crd-owners-head {
border-bottom: 1px solid var(--crd-border-soft);
}
.crd-owners-title {
display: flex;
align-items: center;
gap: 6px;
}
.crd-owners-alert {
flex-shrink: 0;
color: #f59e0b; /* amber-500 — alert triangle */
}
.crd-owners-list {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
overflow-y: auto;
}
.crd-owner {
padding: 10px 16px;
border-bottom: 1px solid var(--crd-border-soft);
}
.crd-owner:last-child {
border-bottom: none;
}
.crd-owner-row {
display: flex;
gap: 10px;
align-items: flex-start;
}
.crd-owner-avatar {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
}
.crd-avatar-rose {
background: #ffe4e6; /* rose-100 */
color: #be123c; /* rose-700 */
}
.crd-avatar-amber {
background: #fef3c7; /* amber-100 */
color: #b45309; /* amber-700 */
}
.crd-owner-body {
flex: 1;
min-width: 0;
}
.crd-owner-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.crd-owner-name {
font-size: 13px;
font-weight: 600;
color: var(--crd-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crd-owner-badge {
flex-shrink: 0;
padding: 2px 6px;
border-radius: 3px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.04em;
border: 1px solid transparent;
}
.crd-badge-high {
background: #fff1f2; /* rose-50 */
color: #be123c; /* rose-700 */
border-color: #fecdd3; /* rose-200 */
}
.crd-badge-yellow {
background: #fffbeb; /* amber-50 */
color: #b45309; /* amber-700 */
border-color: #fde68a; /* amber-200 */
}
.crd-owner-meta {
font-size: 11px;
color: var(--crd-ink-muted);
margin-top: 2px;
}
/* Risk score bar — track + colored fill + score number on the right */
.crd-owner-bar {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
}
.crd-bar-track {
flex: 1;
height: 3px;
background: var(--crd-border);
border-radius: 2px;
overflow: hidden;
}
.crd-bar-fill {
height: 100%;
border-radius: 2px;
}
.crd-bar-high {
background: #f43f5e; /* rose-500 */
}
.crd-bar-yellow {
background: #f59e0b; /* amber-500 */
}
.crd-bar-score {
flex-shrink: 0;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
font-weight: 600;
color: var(--crd-ink-soft);
width: 18px;
text-align: right;
}
.crd-owner-reason {
font-size: 11px;
color: var(--crd-ink-soft);
margin-top: 6px;
line-height: 1.4;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* ----- Bottom row: chart (50%) + activity feed (50%) ----- */
.crd-bot-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 14px;
flex-shrink: 0;
}
.crd-bot-row .crd-card {
min-height: 220px;
max-height: 260px;
}
/* Chart card — head with title + multi-color legend; body fills remainder with SVG */
.crd-chart-card .crd-card-head {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.crd-chart-legend {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
align-items: center;
}
.crd-chart-legend .crd-tile {
width: 8px;
height: 8px;
border-radius: 2px;
}
.crd-chart-body {
flex: 1;
min-height: 0;
padding: 0 14px 12px;
}
.crd-chart-svg {
width: 100%;
height: 100%;
max-height: 130px;
display: block;
}
/* ----- Activity feed ----- */
.crd-activity-head {
border-bottom: 1px solid var(--crd-border-soft);
}
.crd-activity-list {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
overflow-y: auto;
}
.crd-activity {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 14px;
border-bottom: 1px solid var(--crd-border-soft);
}
.crd-activity:last-child {
border-bottom: none;
}
.crd-activity-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* Kind-specific tones — match real ActivityFeed component */
.crd-activity-approval { background: var(--crd-emerald-soft); color: var(--crd-emerald-deep); }
.crd-activity-statement { background: var(--crd-surface); color: var(--crd-ink-muted); }
.crd-activity-flag { background: #fff1f2; color: #be123c; }
.crd-activity-lease { background: var(--crd-surface); color: var(--crd-ink-soft); }
.crd-activity-compliance { background: #fffbeb; color: #b45309; }
.crd-activity-rent { background: var(--crd-emerald-soft); color: var(--crd-emerald-deep); }
.crd-activity-body {
flex: 1;
min-width: 0;
}
.crd-activity-msg {
font-size: 12px;
color: var(--crd-ink-soft);
line-height: 1.35;
}
.crd-activity-time {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
color: var(--crd-ink-faint);
margin-top: 2px;
}
/* =========================================================
MAINTENANCE VIEW — stalled banner, filter row, 6-col kanban
with sample tickets per column. Awaiting Owner Approval gets
an amber emphasis ring; emergency tickets use rose pills.
========================================================= */
/* ----- Stalled banner ----- */
.crd-stalled-banner {
position: relative; /* for hotspot ① anchoring */
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: #fffbeb; /* amber-50 */
border: 1px solid #fde68a; /* amber-200 */
border-radius: 8px;
}
.crd-stalled-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fef3c7; /* amber-100 */
color: #b45309; /* amber-700 */
display: flex;
align-items: center;
justify-content: center;
}
.crd-stalled-text {
flex: 1;
font-size: 12px;
color: #78350f; /* amber-900 */
line-height: 1.4;
}
.crd-stalled-text strong {
font-weight: 600;
}
.crd-stalled-link {
flex-shrink: 0;
font-size: 12px;
font-weight: 500;
color: #b45309;
}
/* ----- Filter row ----- */
.crd-filter-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.crd-filter-group {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.crd-filter-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--crd-ink-muted);
text-transform: uppercase;
}
.crd-filter-segments {
display: inline-flex;
background: var(--crd-surface);
border: 1px solid var(--crd-border);
border-radius: 6px;
padding: 2px;
}
.crd-seg {
font-family: inherit;
font-size: 11px;
font-weight: 500;
color: var(--crd-ink-muted);
background: transparent;
border: none;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.crd-seg:hover {
color: var(--crd-ink);
}
.crd-seg.is-active {
background: var(--crd-bg);
color: var(--crd-ink);
box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
.crd-filter-actions {
display: flex;
align-items: center;
gap: 8px;
}
.crd-search {
position: relative;
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: var(--crd-bg);
border: 1px solid var(--crd-border);
border-radius: 6px;
width: 220px;
}
.crd-search svg {
flex-shrink: 0;
color: var(--crd-ink-faint);
}
.crd-search input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
font-family: inherit;
font-size: 11px;
color: var(--crd-ink);
outline: none;
padding: 0;
}
.crd-search input::placeholder {
color: var(--crd-ink-faint);
}
.crd-btn-primary {
font-family: inherit;
font-size: 11px;
font-weight: 600;
color: #ffffff;
background: var(--crd-emerald-icon);
border: none;
border-radius: 6px;
padding: 6px 12px;
cursor: pointer;
transition: background 120ms ease;
}
.crd-btn-primary:hover {
background: var(--crd-emerald-deep);
}
/* ----- Kanban: 6 columns, horizontal scroll if needed ----- */
.crd-kanban {
display: grid;
grid-template-columns: repeat(6, minmax(160px, 1fr));
gap: 10px;
overflow-x: auto;
overflow-y: visible;
flex: 1;
min-height: 0;
padding-bottom: 4px; /* room for column shadow at the bottom */
}
.crd-column {
display: flex;
flex-direction: column;
min-width: 160px;
background: var(--crd-surface);
border: 1px solid transparent;
border-radius: 8px;
}
.crd-column-emphasized {
position: relative; /* hotspot ② anchors here */
background: #fffbeb; /* amber-50 */
border-color: #fde68a; /* amber-200 */
}
.crd-column-head {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border-bottom: 1px solid var(--crd-border-soft);
}
.crd-column-emphasized .crd-column-head {
border-bottom-color: #fde68a;
}
.crd-column-icon {
flex-shrink: 0;
color: #b45309; /* amber-700 */
}
.crd-column-name {
flex: 1;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--crd-ink-muted);
text-transform: uppercase;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crd-column-emphasized .crd-column-name {
color: #b45309;
}
.crd-column-count {
flex-shrink: 0;
font-size: 10px;
font-weight: 600;
color: var(--crd-ink-soft);
background: var(--crd-bg);
border: 1px solid var(--crd-border);
border-radius: 999px;
padding: 1px 6px;
min-width: 20px;
text-align: center;
}
.crd-column-emphasized .crd-column-count {
color: #b45309;
background: #fef3c7;
border-color: #fde68a;
}
.crd-column-body {
flex: 1;
overflow-y: auto;
padding: 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
/* ----- Ticket card ----- */
.crd-tkt {
position: relative; /* hotspot ③ anchors here */
background: var(--crd-bg);
border: 1px solid var(--crd-border);
border-radius: 6px;
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 5px;
cursor: pointer;
transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.crd-tkt:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(15,23,42,0.06);
border-color: #cbd5e1; /* slate-300 */
}
.crd-tkt-approval {
border-color: #fde68a; /* amber-200 — emphasized inside emphasized column */
}
.crd-tkt-done {
opacity: 0.85;
}
.crd-tkt-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 6px;
}
.crd-tkt-name {
font-size: 12px;
font-weight: 600;
color: var(--crd-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.crd-tkt-id {
flex-shrink: 0;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9px;
color: var(--crd-ink-faint);
}
.crd-tkt-addr {
font-size: 10px;
color: var(--crd-ink-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crd-tkt-issue {
font-size: 11px;
color: var(--crd-ink-soft);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.crd-tkt-bot {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.crd-tkt-age {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
color: var(--crd-ink-muted);
}
.crd-tkt-cost {
margin-left: auto;
font-size: 11px;
font-weight: 600;
color: var(--crd-ink-soft);
}
/* Urgency pills */
.crd-pill {
display: inline-flex;
align-items: center;
padding: 1px 5px;
border-radius: 3px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.04em;
border: 1px solid transparent;
text-transform: uppercase;
}
.crd-pill-emergency {
background: #fff1f2; color: #be123c; border-color: #fecdd3;
}
.crd-pill-24h {
background: #fffbeb; color: #b45309; border-color: #fde68a;
}
.crd-pill-72h {
background: #f1f5f9; color: #334155; border-color: #cbd5e1;
}
.crd-pill-scheduled {
background: var(--crd-surface); color: var(--crd-ink-muted); border-color: var(--crd-border);
}
.crd-pill-done {
background: #ecfdf5; color: #047857; border-color: #a7f3d0;
}
/* Approval-sent row inside Awaiting Owner Approval cards */
.crd-tkt-approval-row {
display: flex;
align-items: center;
gap: 5px;
margin-top: 2px;
padding: 4px 6px;
background: #fffbeb;
border-radius: 4px;
font-size: 10px;
color: #b45309;
font-weight: 500;
}
.crd-approval-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #f59e0b; /* amber-500 */
flex-shrink: 0;
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}
/* =========================================================
OWNERS + VENDORS — shared table styles, risk badges,
vendor summary cards, vendor performer grid.
========================================================= */
/* Shared table container — used by both Owners and Vendors */
.crd-table-wrap {
background: var(--crd-bg);
border: 1px solid var(--crd-border);
border-radius: 8px;
overflow: hidden;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.crd-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.crd-table thead {
background: var(--crd-surface);
}
.crd-table thead th {
padding: 10px 12px;
border-bottom: 1px solid var(--crd-border-soft);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--crd-ink-muted);
text-transform: uppercase;
white-space: nowrap;
position: relative; /* for hotspots in headers */
}
.crd-table tbody td {
padding: 8px 12px;
border-bottom: 1px solid var(--crd-border-soft);
color: var(--crd-ink);
vertical-align: middle;
}
.crd-table tbody tr:last-child td {
border-bottom: 0;
}
.crd-th-left { text-align: left; }
.crd-th-num { text-align: right; }
.crd-th-label {
display: inline-block;
vertical-align: middle;
}
.crd-sort {
color: var(--crd-ink-faint);
margin-left: 4px;
vertical-align: middle;
}
.crd-sort-active {
color: var(--crd-ink);
}
.crd-tr {
transition: background 120ms ease;
cursor: pointer;
}
.crd-tr:hover {
background: var(--crd-surface);
}
.crd-tr-flagged {
position: relative; /* hotspot anchors here */
}
/* Owners-specific: avatar + name + ID column */
.crd-td-name {
position: relative;
min-width: 0;
}
.crd-owners-table .crd-td-name {
display: flex;
align-items: center;
gap: 8px;
}
.crd-row-avatar {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: #e2e8f0; /* slate-200 */
color: #334155; /* slate-700 */
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
}
.crd-row-id {
min-width: 0;
}
.crd-row-name {
font-size: 12px;
font-weight: 500;
color: var(--crd-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crd-row-mono {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9px;
color: var(--crd-ink-faint);
margin-top: 1px;
}
.crd-td-num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.crd-td-money {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 11px;
color: var(--crd-ink);
font-weight: 500;
}
.crd-td-warn {
color: #be123c; /* rose-700 — highlight bad callback rates */
font-weight: 600;
}
.crd-td-date {
font-size: 11px;
color: var(--crd-ink-soft);
}
.crd-td-trade {
font-size: 11px;
color: var(--crd-ink-soft);
}
.crd-row-vname {
font-size: 12px;
font-weight: 500;
color: var(--crd-ink);
}
/* Risk score cell: number + status badge */
.crd-risk {
display: flex;
align-items: center;
gap: 8px;
}
.crd-risk-num {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 11px;
color: var(--crd-ink-soft);
width: 18px;
text-align: right;
}
.crd-pill-healthy {
background: #ecfdf5;
color: #047857;
border-color: #a7f3d0;
}
.crd-pill-yellow {
background: #fffbeb;
color: #b45309;
border-color: #fde68a;
}
.crd-pill-high {
background: #fff1f2;
color: #be123c;
border-color: #fecdd3;
}
.crd-pill-trusted {
background: #ecfdf5;
color: #047857;
border-color: #a7f3d0;
}
.crd-pill-probation {
background: #fffbeb;
color: #b45309;
border-color: #fde68a;
}
/* ----- Vendors summary row (4 KPI cards) ----- */
.crd-vendor-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.crd-vsum {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 4px;
position: relative; /* for hotspot ① anchor */
overflow: visible;
}
.crd-vsum-flagged {
background: #fffbeb;
border-color: #fde68a;
}
.crd-vsum-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.crd-vsum-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--crd-ink-muted);
text-transform: uppercase;
}
.crd-vsum-icon {
width: 24px;
height: 24px;
border-radius: 6px;
background: var(--crd-surface);
color: var(--crd-ink-soft);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.crd-vsum-icon-amber {
background: #fef3c7;
color: #b45309;
}
.crd-vsum-num {
font-size: 22px;
font-weight: 700;
color: var(--crd-ink);
letter-spacing: -0.01em;
line-height: 1.1;
}
.crd-vsum-num-amber {
color: #b45309;
}
.crd-vsum-name {
font-size: 13px;
font-weight: 600;
color: var(--crd-ink);
letter-spacing: -0.01em;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crd-vsum-sub {
font-size: 10px;
color: var(--crd-ink-muted);
}
/* ----- Section header (Top 8 Performers) ----- */
.crd-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
position: relative; /* hotspot ② anchor */
}
.crd-section-title {
font-size: 14px;
font-weight: 700;
color: var(--crd-ink);
margin: 0;
letter-spacing: -0.01em;
}
.crd-section-sub {
font-size: 10px;
color: var(--crd-ink-muted);
}
/* ----- Top 8 Performers grid ----- */
.crd-vendor-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.crd-vcard {
background: var(--crd-bg);
border: 1px solid var(--crd-border);
border-radius: 8px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 5px;
}
.crd-vcard-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 6px;
}
.crd-vcard-name {
font-size: 12px;
font-weight: 600;
color: var(--crd-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.crd-vcard-trade {
font-size: 10px;
color: var(--crd-ink-muted);
}
.crd-vcard-stars {
display: flex;
align-items: center;
gap: 1px;
}
.crd-vcard-rating {
font-size: 11px;
font-weight: 600;
color: var(--crd-ink);
margin-left: 4px;
font-variant-numeric: tabular-nums;
}
.crd-vcard-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
margin-top: 2px;
padding-top: 6px;
border-top: 1px solid var(--crd-border-soft);
}
.crd-vcard-stats > div {
display: flex;
flex-direction: column;
gap: 1px;
}
.crd-stat-label {
font-size: 8px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--crd-ink-faint);
text-transform: uppercase;
}
.crd-stat-num {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 11px;
font-weight: 600;
color: var(--crd-ink);
}
/* Filter row count text on far right */
.crd-filter-count {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--crd-ink-muted);
text-transform: uppercase;
margin-left: auto;
}
/* =========================================================
COMPLIANCE — stats row, deadline list, law updates panel
========================================================= */
/* Page title row — title + ALL QUIET pill inline */
.crd-page-title-row {
display: flex;
align-items: center;
gap: 10px;
}
.crd-pill-quiet {
background: #ecfdf5;
color: #047857;
border-color: #a7f3d0;
}
/* Compliance view layout — inherits .crd-view .is-active sizing */
.crd-view-compliance {
overflow-y: auto;
min-height: 0;
}
.crd-comp-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
/* Emerald icon variant for stats cards (Overdue/Score) */
.crd-vsum-icon-emerald {
background: #ecfdf5;
color: #047857;
}
.crd-vsum-num-emerald {
color: #047857;
}
/* Compliance stat anchor card — host for hotspot ① */
.crd-comp-stat-anchor {
position: relative;
overflow: visible;
}
/* Two-column body: deadlines (60%) + law panel (40%) */
.crd-comp-body {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 16px;
flex: 1;
min-height: 0;
}
.crd-comp-deadlines {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Week section header */
.crd-week-head {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 4px 0;
}
.crd-week-head:not(:first-child) {
margin-top: 4px;
}
.crd-week-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--crd-ink-muted);
text-transform: uppercase;
}
.crd-week-count {
font-size: 10px;
color: var(--crd-ink-faint);
margin-left: auto;
}
.crd-pill-thisweek {
background: #ecfdf5;
color: #047857;
border-color: #a7f3d0;
}
/* Deadline card — base + urgency variants via left border */
.crd-deadline {
background: var(--crd-bg);
border: 1px solid var(--crd-border);
border-left: 3px solid #cbd5e1;
border-radius: 8px;
padding: 12px 14px;
display: flex;
gap: 10px;
align-items: flex-start;
}
.crd-deadline-urgent { border-left-color: #fb7185; } /* rose-400 */
.crd-deadline-upcoming { border-left-color: #fbbf24; } /* amber-400 */
.crd-deadline-anchor {
position: relative;
}
/* Deadline icon container (varies by type) */
.crd-deadline-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.crd-deadline-icon-rose { background: #fff1f2; color: #be123c; }
.crd-deadline-icon-violet { background: #f5f3ff; color: #6d28d9; }
.crd-deadline-icon-blue { background: #eff6ff; color: #1d4ed8; }
.crd-deadline-body {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.crd-deadline-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.crd-deadline-titles {
min-width: 0;
flex: 1;
}
.crd-deadline-title-line {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.crd-deadline-title {
font-size: 13px;
font-weight: 600;
color: var(--crd-ink);
}
.crd-reg-chip {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--crd-ink-soft);
background: var(--crd-surface);
padding: 1px 5px;
border-radius: 3px;
text-transform: uppercase;
}
.crd-deadline-subject {
font-size: 11px;
color: var(--crd-ink-muted);
margin-top: 2px;
}
.crd-deadline-when {
flex-shrink: 0;
text-align: right;
}
.crd-deadline-date {
font-size: 11px;
font-weight: 500;
color: var(--crd-ink);
}
.crd-deadline-days {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
margin-top: 1px;
}
.crd-deadline-days-urgent { color: #be123c; }
.crd-deadline-days-upcoming { color: #b45309; }
.crd-deadline-desc {
font-size: 11px;
color: var(--crd-ink-soft);
line-height: 1.4;
margin: 4px 0 0 0;
}
.crd-deadline-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 4px;
}
.crd-deadline-tags {
display: flex;
align-items: center;
gap: 8px;
}
.crd-deadline-type {
font-size: 10px;
color: var(--crd-ink-faint);
}
.crd-pill-urgent {
background: #fff1f2;
color: #be123c;
border-color: #fecdd3;
}
.crd-pill-upcoming {
background: #fffbeb;
color: #b45309;
border-color: #fde68a;
}
.crd-deadline-action {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 4px 8px;
background: #ecfdf5;
color: #047857;
border: none;
border-radius: 4px;
font: inherit;
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: background 120ms ease;
}
.crd-deadline-action:hover {
background: #d1fae5;
}
/* California Law Updates panel */
.crd-law-panel {
padding: 0;
position: relative; /* hotspot ③ anchor */
overflow: visible;
align-self: start;
}
.crd-law-head {
padding: 16px 18px 12px;
border-bottom: 1px solid var(--crd-border-soft);
}
.crd-law-title-row {
display: flex;
align-items: center;
gap: 6px;
}
.crd-law-title {
font-size: 13px;
font-weight: 700;
color: var(--crd-ink);
margin: 0;
}
.crd-law-sub {
font-size: 11px;
color: var(--crd-ink-muted);
margin: 4px 0 0 0;
}
.crd-law-list {
list-style: none;
margin: 0;
padding: 0;
}
.crd-law-item {
padding: 12px 18px;
border-bottom: 1px solid var(--crd-border-soft);
}
.crd-law-item:last-child {
border-bottom: 0;
}
.crd-law-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.crd-law-bill {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 11px;
font-weight: 600;
color: var(--crd-ink);
}
.crd-law-effective {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--crd-ink-faint);
text-transform: uppercase;
}
.crd-law-name {
font-size: 12px;
color: var(--crd-ink-soft);
margin-top: 4px;
line-height: 1.4;
}
.crd-law-status {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
color: #047857;
margin-top: 6px;
}
.crd-law-foot {
padding: 10px 18px;
border-top: 1px solid var(--crd-border-soft);
background: rgba(248, 250, 252, 0.6);
}
.crd-law-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: #047857;
text-decoration: none;
font-size: 11px;
font-weight: 500;
}
.crd-law-link:hover {
color: #065f46;
}
/* =========================================================
HOTSPOT SYSTEM — pulsing numbered indicators that anchor
to specific page elements. Tooltips live in a stage-level
overlay with explicit static positions per hotspot, so
they never get clipped by card overflow.
========================================================= */
/* Position parents — needed so absolutely-positioned hotspots anchor */
.crd-kpi-row,
.crd-mid-row .crd-card,
.crd-bot-row .crd-card,
.crd-owner {
position: relative;
}
/* Hotspot indicator: 28px emerald circle with white number */
.crd-hotspot {
position: absolute;
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
padding: 0;
background: var(--crd-emerald);
color: #ffffff;
font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1;
cursor: pointer;
/* Bubbles are invisible to the visitor but retain layout geometry —
JS uses getBoundingClientRect() on each hotspot to position its
paired tooltip. visibility:hidden keeps the box laid out (so the
rect is non-zero) without paint or interaction. */
visibility: hidden;
pointer-events: none;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
z-index: 10;
animation: crd-hotspot-pulse 2s ease-in-out infinite;
transition: background 200ms ease, box-shadow 200ms ease;
}
/* Stagger pulse so they don't all sync — 0s, 0.5s, 1s, 1.5s offsets */
.crd-hotspot[data-hotspot="kpis"] { animation-delay: 0s; }
.crd-hotspot[data-hotspot="heatmap"] { animation-delay: 0.5s; }
.crd-hotspot[data-hotspot="jennifer"]{ animation-delay: 1s; }
.crd-hotspot[data-hotspot="activity"]{ animation-delay: 1.5s; }
.crd-hotspot[data-hotspot="stalled"] { animation-delay: 0s; }
.crd-hotspot[data-hotspot="approvals"] { animation-delay: 0.5s; }
.crd-hotspot[data-hotspot="maya"] { animation-delay: 1s; }
.crd-hotspot[data-hotspot="risk-col"] { animation-delay: 0s; }
.crd-hotspot[data-hotspot="jennifer-row"] { animation-delay: 0.5s; }
.crd-hotspot[data-hotspot="fees-col"] { animation-delay: 1s; }
.crd-hotspot[data-hotspot="flagged"] { animation-delay: 0s; }
.crd-hotspot[data-hotspot="top8"] { animation-delay: 0.5s; }
.crd-hotspot[data-hotspot="callback-col"] { animation-delay: 1s; }
.crd-hotspot[data-hotspot="comp-score"] { animation-delay: 0s; }
.crd-hotspot[data-hotspot="ab414"] { animation-delay: 0.5s; }
.crd-hotspot[data-hotspot="law-updates"] { animation-delay: 1s; }
@keyframes crd-hotspot-pulse {
0%, 100% {
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4),
0 0 0 0 rgba(16, 185, 129, 0.4);
}
50% {
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4),
0 0 0 8px rgba(16, 185, 129, 0);
}
}
/* Active state — tooltip is showing, pulse off, deeper color, solid ring */
.crd-hotspot.is-active {
animation: none;
background: var(--crd-emerald-icon);
box-shadow: 0 0 0 2px var(--crd-emerald),
0 0 0 4px rgba(16, 185, 129, 0.25);
}
/* ----- Hotspot anchor positions ----- */
/* ① KPI row — bottom-right of row. Anchor at the bottom corner so a
data-side="bottom" tooltip drops into the gap between the KPI row
and the heatmap card below, not over the KPIs the tooltip describes. */
.crd-hotspot[data-hotspot="kpis"] {
bottom: -8px;
right: -8px;
}
/* ② Heatmap card — bottom-right of card-head, just above the heatmap rows */
.crd-hotspot[data-hotspot="heatmap"] {
top: 36px;
right: 8px;
}
/* ③ Jennifer Walsh row — top-right of her li, inset to clear card overflow */
.crd-hotspot[data-hotspot="jennifer"] {
top: 6px;
right: 6px;
}
/* ④ Activity card — top-right corner inside card padding */
.crd-hotspot[data-hotspot="activity"] {
top: 8px;
right: 8px;
}
/* Maintenance ① — stalled banner top-right (banner is overflow:visible) */
.crd-hotspot[data-hotspot="stalled"] {
top: -8px;
right: -8px;
}
/* Maintenance ② — awaiting-approval column header, inset to clear kanban overflow */
.crd-hotspot[data-hotspot="approvals"] {
top: 6px;
right: 6px;
}
/* Maintenance ③ — Maya Vargas card, inset to clear column-body overflow */
.crd-hotspot[data-hotspot="maya"] {
top: 6px;
right: 6px;
}
/* Owners ① — Risk score column header, top-right inset of TH */
.crd-hotspot[data-hotspot="risk-col"] {
top: 4px;
right: 4px;
}
/* Owners ② — under the "71" score in Jennifer's row. The hotspot lives
inside the risk-score TD (.crd-td-anchor → position: relative), at
the cell's bottom-left under the score number so the tooltip drops
below the row with arrow pointing up at the score. We keep
bottom: 0 (not -Npx) so the absolute box doesn't extend past the
row's natural footprint and visually expand the table. */
.crd-td-anchor {
position: relative;
}
.crd-hotspot[data-hotspot="jennifer-row"] {
bottom: 0;
left: 0;
}
/* Owners ③ — Mgmt fees YTD column header, top-right inset of TH */
.crd-hotspot[data-hotspot="fees-col"] {
top: 4px;
right: 4px;
}
/* Vendors ① — Flagged for Review KPI card, bottom-right outset.
Hotspot at the bottom corner so data-side="bottom" drops the tooltip
fully below the card (into the gap above Top 8 Performers), not
overlapping the card's own content. */
.crd-hotspot[data-hotspot="flagged"] {
bottom: -8px;
right: -8px;
}
/* Vendors ② — Top 8 Performers section header, top-right outset.
data-side="left" places the tooltip to the left of the anchor,
vertically centered. */
.crd-hotspot[data-hotspot="top8"] {
top: -6px;
right: -6px;
}
/* Vendors ③ — Callback % column header, top-right inset of TH */
.crd-hotspot[data-hotspot="callback-col"] {
top: 4px;
right: 4px;
}
/* Compliance ① — Compliance Score stat card, bottom-right outset.
Hotspot at the card's bottom so data-side="bottom" places the tooltip
cleanly below the card, not over its own content. */
.crd-hotspot[data-hotspot="comp-score"] {
bottom: -8px;
right: -8px;
}
/* Compliance ② — AB 414 urgent deadline card, inset top-right */
.crd-hotspot[data-hotspot="ab414"] {
top: 6px;
right: 6px;
}
/* Compliance ③ — California Law Updates panel, slight outset top-right */
.crd-hotspot[data-hotspot="law-updates"] {
top: -8px;
right: -8px;
}
/* ----- Tooltip system -----
Tooltips live inside their respective .crd-view, alongside the hotspot
they describe. They scroll with content because both share the same
scrolling container. JS sets inline top/left at show time using the
hotspot's position relative to the view. The data-side attribute
declares which side of the anchor the tooltip sits on; CSS handles
the arrow direction and entrance transform per side.
The .crd-tooltips wrapper from the previous design is gone; tooltips
are direct children of their view. ----- */
.crd-tooltip {
position: absolute;
background: #1e293b; /* slate-800 */
color: #ffffff;
font-size: 12px;
line-height: 1.5;
padding: 10px 14px;
max-width: 280px;
border-radius: 8px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18),
0 2px 4px rgba(0, 0, 0, 0.08);
opacity: 0;
pointer-events: none;
z-index: 50;
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
/* Entrance offset by side: tooltip nudges toward its anchor on show. */
.crd-tooltip[data-side="top"] { transform: translateY(6px); }
.crd-tooltip[data-side="bottom"] { transform: translateY(-6px); }
.crd-tooltip[data-side="left"] { transform: translateX(6px); }
.crd-tooltip[data-side="right"] { transform: translateX(-6px); }
.crd-tooltip.is-visible {
opacity: 1;
transform: translate(0, 0);
}
/* Arrow base: 6px transparent square; one border edge gets colored
per side to form the triangle. JS sets --arrow-pos so the arrow
aligns with the anchor's center even after edge clamping. */
.crd-tooltip::before {
content: "";
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
}
/* Tooltip above anchor → arrow on bottom edge, pointing down */
.crd-tooltip[data-side="top"]::before {
top: 100%;
left: var(--arrow-pos, 50%);
transform: translateX(-6px);
border-top-color: #1e293b;
border-bottom: none;
}
/* Tooltip below anchor → arrow on top edge, pointing up */
.crd-tooltip[data-side="bottom"]::before {
bottom: 100%;
left: var(--arrow-pos, 50%);
transform: translateX(-6px);
border-bottom-color: #1e293b;
border-top: none;
}
/* Tooltip left of anchor → arrow on right edge, pointing right */
.crd-tooltip[data-side="left"]::before {
left: 100%;
top: var(--arrow-pos, 50%);
transform: translateY(-6px);
border-left-color: #1e293b;
border-right: none;
}
/* Tooltip right of anchor → arrow on left edge, pointing left */
.crd-tooltip[data-side="right"]::before {
right: 100%;
top: var(--arrow-pos, 50%);
transform: translateY(-6px);
border-right-color: #1e293b;
border-left: none;
}
/* ----- First-hover hint: shown once when pointer enters the demo, then
never again. Same pattern as Whittaker, scoped to Capitol Ridge tokens.
Positioned absolutely top-center within the stage. ----- */
.crd-hint {
position: absolute;
top: 16px;
left: 50%;
transform: translate(-50%, -8px);
z-index: 60;
padding: 10px 16px;
background: var(--crd-ink); /* slate-900 */
color: #ffffff;
font-size: 13px;
line-height: 1.3;
border-radius: 999px;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 250ms ease-out, transform 250ms ease-out;
}
.crd-hint.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
.crd-hint.is-leaving {
opacity: 0;
transition: opacity 400ms ease-in;
}
/* ----- Cursor (desktop) — fades in at click position, glides to target ----- */
.crd-cursor {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 22px;
pointer-events: none;
opacity: 0;
transform: translate(0, 0);
transition: opacity 180ms ease-out;
z-index: 60;
filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.25));
}
.crd-cursor.is-visible {
opacity: 1;
}
.crd-cursor.is-flying {
transition:
opacity 180ms ease-out,
transform 600ms cubic-bezier(0.4, 0.1, 0.2, 1);
}
/* prefers-reduced-motion: skip the pulse + transition flourishes,
but the JS-driven cycle keeps running on its timer so accessibility
users still get to see every tooltip. */
@media (prefers-reduced-motion: reduce) {
.crd-hotspot,
.crd-tooltip,
.crd-cursor,
.crd-hint {
animation: none !important;
transition-duration: 0.01ms !important;
}
.crd-cursor { display: none !important; }
}
/* =========================================================
ABOUT PAGE — founder, accountability, office sections
Each section uses .section-head for the meta + title row,
then a body paragraph below. Body uses serif at editorial
size, indented to align with the section title at desktop.
========================================================= */
.about-section {
border-top: 1px solid var(--rule);
padding: var(--s-7) 0;
}
.about-body {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--s-5);
}
@media (max-width: 720px) {
.about-body {
padding: 0 var(--s-4);
}
}
.about-prose {
max-width: 60ch;
margin: 0;
font-family: var(--serif);
font-size: clamp(17px, 1.2vw, 19px);
line-height: 1.65;
color: var(--ink-soft);
font-weight: 300;
font-variation-settings: "opsz" 24;
}
.about-prose p + p {
margin-top: var(--s-4);
}
.about-prose strong {
font-weight: 500;
color: var(--ink);
}
@media (min-width: 900px) {
.about-prose {
margin-left: calc(220px + var(--s-7));
}
}
/* =========================================================
FAQ PAGE — Q&A list, all answers visible by default
(deliberately not collapsible — buyers shouldn't have to
click to find out if their fear has an answer).
========================================================= */
.faq-section {
border-top: 1px solid var(--rule);
padding: var(--s-7) 0;
}
.faq-list {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--s-5);
}
@media (max-width: 720px) {
.faq-list {
padding: 0 var(--s-4);
}
}
.faq-pair {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
padding: var(--s-6) 0;
border-bottom: 1px solid var(--rule);
}
.faq-pair:first-child {
padding-top: 0;
}
.faq-pair:last-child {
border-bottom: none;
padding-bottom: 0;
}
@media (min-width: 900px) {
.faq-pair {
grid-template-columns: 220px 1fr;
gap: var(--s-7);
align-items: start;
}
}
.faq-q {
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink);
line-height: 1.5;
margin: 0;
}
.faq-a {
font-family: var(--serif);
font-size: clamp(16px, 1.1vw, 18px);
line-height: 1.6;
color: var(--ink-soft);
font-weight: 300;
max-width: 60ch;
margin: 0;
font-variation-settings: "opsz" 24;
}
.faq-a + .faq-a {
margin-top: var(--s-3);
}
/* =========================================================
LONE STAR FIELD OPS — mobile-only on all viewports.
Dark theme: orange accents on near-black, mirrors the
iOS-chrome pattern of Whittaker/Capitol Ridge mobile.
========================================================= */
.ls-stage-mobile {
--ls-bg: #0a0a0b;
--ls-surface-2: #16161a;
--ls-surface-3: #1f1f24;
--ls-border: rgba(255, 255, 255, 0.06);
--ls-border-strong: rgba(255, 255, 255, 0.12);
--ls-ink: #f5f5f7;
--ls-ink-soft: #a1a1aa;
--ls-ink-faint: #71717a;
--ls-orange: #f97316;
--ls-orange-soft: #fb923c;
--ls-orange-tint: rgba(249, 115, 22, 0.10);
--ls-red: #ef4444;
--ls-amber: #f59e0b;
--ls-green: #22c55e;
width: 320px;
height: 640px;
display: flex;
flex-direction: column;
background: var(--ls-bg);
font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--ls-ink);
font-size: 14px;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
user-select: none;
-webkit-user-select: none;
position: relative;
overflow: hidden;
}
/* ----- Status bar (dark theme: white time + icons) ----- */
.ls-mobile-status {
flex-shrink: 0;
position: relative;
height: 44px;
padding: 0 22px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--ls-bg);
color: var(--ls-ink);
font-family: 'SF Pro Text', 'Inter Tight', -apple-system, sans-serif;
}
.ls-mobile-status-time {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.02em;
position: relative;
z-index: 1;
}
.ls-mobile-status-icons {
display: flex;
align-items: center;
gap: 5px;
color: var(--ls-ink);
opacity: 0.85;
position: relative;
z-index: 1;
}
.ls-mobile-island {
position: absolute;
top: 9px;
left: 50%;
transform: translateX(-50%);
width: 96px;
height: 26px;
background: #000;
border-radius: 13px;
pointer-events: none;
}
/* ----- Content area (holds active view) ----- */
.ls-mobile-content {
flex: 1;
min-height: 0;
position: relative;
overflow: hidden;
background: var(--ls-bg);
}
/* ----- Bottom tab bar (4 tabs, orange active) ----- */
.ls-mobile-tabs {
flex-shrink: 0;
display: flex;
align-items: stretch;
height: 60px;
background: rgba(22, 22, 26, 0.95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-top: 1px solid var(--ls-border);
}
.ls-mobile-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
background: transparent;
border: none;
padding: 8px 4px;
color: var(--ls-ink-faint);
cursor: pointer;
transition: color 120ms ease;
font-family: inherit;
}
.ls-mobile-tab:hover {
color: var(--ls-ink-soft);
}
.ls-mobile-tab.is-active {
color: var(--ls-orange);
}
.ls-mobile-tab.is-active .ls-mobile-tab-icon {
stroke-width: 2.25;
}
.ls-mobile-tab-icon {
flex-shrink: 0;
}
.ls-mobile-tab-label {
font-size: 10px;
font-weight: 500;
letter-spacing: -0.01em;
}
/* ----- Pulse: cursor flight target ----- */
.ls-mobile-pulse {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
margin-left: -12px;
margin-top: -12px;
border-radius: 50%;
background: rgba(249, 115, 22, 0.55);
box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.18),
0 0 16px 2px rgba(249, 115, 22, 0.4);
pointer-events: none;
opacity: 0;
transform: translate(0, 0);
transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease-out;
z-index: 50;
will-change: transform, opacity;
}
.ls-mobile-pulse.is-visible {
opacity: 1;
}
.ls-mobile-pulse.is-flying {
transform: translate(var(--pulse-x), var(--pulse-y));
}
/* ----- Push-notification banner: slides down from above the notch ----- */
.ls-mobile-tooltip {
position: absolute;
top: 52px;
left: 8px;
right: 8px;
z-index: 60;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(28, 28, 32, 0.92);
border: 1px solid var(--ls-border-strong);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 14px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.40),
0 8px 24px rgba(0, 0, 0, 0.55);
transform: translateY(calc(-100% - 64px));
transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms ease-out;
opacity: 0;
cursor: pointer;
pointer-events: none;
}
.ls-mobile-tooltip.is-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.ls-mobile-tooltip-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 7px;
background: var(--ls-orange);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
}
.ls-mobile-tooltip-body {
flex: 1;
min-width: 0;
font-size: 12.5px;
line-height: 1.4;
color: var(--ls-ink);
}
/* ----- View base layer (slide transitions) ----- */
.ls-mobile-view {
position: absolute;
inset: 0;
overflow-y: auto;
overflow-x: hidden;
background: var(--ls-bg);
transform: translateX(100%);
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--ls-orange) var(--ls-bg);
}
.ls-mobile-view::-webkit-scrollbar {
width: 6px;
}
.ls-mobile-view::-webkit-scrollbar-track {
background: var(--ls-bg);
}
.ls-mobile-view::-webkit-scrollbar-thumb {
background: var(--ls-orange);
border-radius: 3px;
}
.ls-mobile-view::-webkit-scrollbar-thumb:hover {
background: var(--ls-orange-soft);
}
.ls-mobile-view.is-active {
transform: translateX(0);
}
.ls-mobile-view.is-leaving {
transform: translateX(-100%);
}
/* ----- Pills (urgency / status / chip) ----- */
.ls-pill {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: 999px;
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid transparent;
white-space: nowrap;
}
.ls-pill-orange {
background: rgba(249, 115, 22, 0.15);
color: var(--ls-orange);
border-color: rgba(249, 115, 22, 0.30);
}
.ls-pill-orange-soft {
background: rgba(249, 115, 22, 0.08);
color: var(--ls-orange-soft);
border-color: rgba(249, 115, 22, 0.18);
}
.ls-pill-slate {
background: var(--ls-surface-3);
color: var(--ls-ink-soft);
border-color: var(--ls-border-strong);
}
/* =========================================================
TODAY VIEW
========================================================= */
.ls-mobile-view-today {
padding: 0 0 16px;
}
/* Header (date eyebrow + greeting + avatar) */
.ls-mobile-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 16px 16px 14px;
}
.ls-mobile-header-text {
min-width: 0;
flex: 1;
}
.ls-mobile-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--ls-orange);
text-transform: uppercase;
}
.ls-mobile-greeting {
margin: 4px 0 0;
font-family: 'Fraunces', Georgia, serif;
font-size: 24px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
}
.ls-mobile-greeting-soft {
color: var(--ls-ink-soft);
font-weight: 400;
}
.ls-mobile-greeting-name {
color: var(--ls-orange);
font-weight: 700;
margin-left: 4px;
}
.ls-mobile-avatar {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--ls-orange-tint);
color: var(--ls-orange);
border: 1px solid rgba(249, 115, 22, 0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
}
/* Stats row (3 cards horizontal) */
.ls-mobile-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 0 16px 12px;
}
.ls-mobile-stat {
background: var(--ls-surface-2);
border: 1px solid var(--ls-border);
border-radius: 10px;
padding: 10px 10px 11px;
display: flex;
flex-direction: column;
gap: 3px;
}
.ls-mobile-stat-orange {
background: var(--ls-orange-tint);
border-color: rgba(249, 115, 22, 0.25);
}
.ls-mobile-stat-label {
font-size: 8.5px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--ls-ink-faint);
text-transform: uppercase;
}
.ls-mobile-stat-orange .ls-mobile-stat-label {
color: var(--ls-orange);
}
.ls-mobile-stat-value {
font-family: 'Fraunces', Georgia, serif;
font-size: 22px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: var(--ls-ink);
}
.ls-mobile-stat-value-mono {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 16px;
letter-spacing: -0.01em;
}
.ls-mobile-stat-orange .ls-mobile-stat-value {
color: var(--ls-orange);
}
/* Section header */
.ls-mobile-section {
padding: 14px 16px 0;
}
.ls-mobile-section-head {
padding: 0 2px 8px;
}
.ls-mobile-section-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.10em;
color: var(--ls-ink-faint);
text-transform: uppercase;
}
/* Inspection card (Today section) */
.ls-mobile-insp {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--ls-surface-2);
border: 1px solid var(--ls-border);
border-radius: 12px;
margin-bottom: 8px;
transition: background 120ms ease, transform 220ms ease;
}
.ls-mobile-insp:last-child {
margin-bottom: 0;
}
.ls-mobile-insp:hover {
background: var(--ls-surface-3);
}
.ls-mobile-insp-active {
background: var(--ls-orange-tint);
border-color: rgba(249, 115, 22, 0.32);
border-left: 3px solid var(--ls-orange);
padding-left: 10px;
}
.ls-mobile-insp-active:hover {
background: rgba(249, 115, 22, 0.13);
}
.ls-mobile-insp.is-tapped {
animation: ls-card-pulse 300ms ease-out;
}
@keyframes ls-card-pulse {
0% { transform: scale(1); }
45% { transform: scale(0.98); }
100% { transform: scale(1); }
}
.ls-mobile-insp-time {
flex-shrink: 0;
width: 50px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
}
.ls-mobile-insp-time-num {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 16px;
font-weight: 700;
color: var(--ls-ink);
letter-spacing: -0.02em;
line-height: 1;
}
.ls-mobile-insp-time-ampm {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9px;
font-weight: 600;
color: var(--ls-ink-faint);
letter-spacing: 0.06em;
}
.ls-mobile-insp-active .ls-mobile-insp-time-num {
color: var(--ls-orange);
}
.ls-mobile-insp-active .ls-mobile-insp-time-ampm {
color: var(--ls-orange-soft);
}
.ls-mobile-insp-body {
flex: 1;
min-width: 0;
}
.ls-mobile-insp-name {
font-size: 13.5px;
font-weight: 600;
color: var(--ls-ink);
letter-spacing: -0.01em;
}
.ls-mobile-insp-scope {
font-size: 11px;
color: var(--ls-ink-soft);
margin-top: 2px;
}
.ls-mobile-insp-tail {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6px;
}
.ls-mobile-insp-chev {
color: var(--ls-ink-faint);
}
/* This-week mini row */
.ls-mobile-week {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px;
background: transparent;
border: 1px solid var(--ls-border);
border-radius: 10px;
margin-bottom: 6px;
}
.ls-mobile-week:last-of-type {
margin-bottom: 8px;
}
.ls-mobile-week-date {
flex-shrink: 0;
width: 38px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.ls-mobile-week-date-mo {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9px;
font-weight: 600;
color: var(--ls-ink-faint);
letter-spacing: 0.06em;
}
.ls-mobile-week-date-day {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 15px;
font-weight: 700;
color: var(--ls-ink);
letter-spacing: -0.02em;
line-height: 1;
}
.ls-mobile-week-body {
flex: 1;
min-width: 0;
}
.ls-mobile-week-name {
font-size: 12.5px;
font-weight: 500;
color: var(--ls-ink);
}
.ls-mobile-week-scope {
font-size: 10.5px;
color: var(--ls-ink-faint);
margin-top: 1px;
}
.ls-mobile-week-all {
width: 100%;
padding: 8px;
background: transparent;
color: var(--ls-orange);
border: none;
font-family: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
text-align: center;
}
.ls-mobile-week-all:hover {
color: var(--ls-orange-soft);
}
/* =========================================================
MAGNOLIA INSPECTION DETAIL (sub-screen of Today)
========================================================= */
/* Detail header (back arrow + title + chip) — shared across detail screens */
.ls-mobile-detail-head {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 12px 12px 6px;
border-bottom: 1px solid var(--ls-border);
background: var(--ls-bg);
}
.ls-mobile-back {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 8px;
background: transparent;
border: none;
color: var(--ls-ink-soft);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 120ms ease;
font-family: inherit;
}
.ls-mobile-back:hover {
background: var(--ls-surface-2);
}
.ls-mobile-detail-head-text {
flex: 1;
min-width: 0;
}
.ls-mobile-detail-title {
font-size: 15px;
font-weight: 600;
color: var(--ls-ink);
letter-spacing: -0.01em;
}
.ls-mobile-detail-sub {
font-size: 11px;
color: var(--ls-ink-faint);
margin-top: 1px;
}
/* Magnolia detail body */
.ls-mobile-mag-body {
padding: 14px 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Progress hero */
.ls-mobile-mag-progress {
background: var(--ls-orange-tint);
border: 1px solid rgba(249, 115, 22, 0.30);
border-radius: 14px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.ls-mobile-mag-progress-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.10em;
color: var(--ls-orange);
text-transform: uppercase;
}
.ls-mobile-mag-progress-title {
margin: 0;
font-family: 'Fraunces', Georgia, serif;
font-size: 22px;
font-weight: 700;
color: var(--ls-ink);
letter-spacing: -0.02em;
line-height: 1.1;
}
.ls-mobile-mag-progress-bar {
height: 5px;
background: rgba(249, 115, 22, 0.18);
border-radius: 3px;
overflow: hidden;
margin-top: 2px;
}
.ls-mobile-mag-progress-fill {
height: 100%;
background: var(--ls-orange);
border-radius: 3px;
}
.ls-mobile-mag-progress-meta {
font-size: 11px;
color: var(--ls-orange-soft);
}
/* Generic Magnolia info card */
.ls-mobile-mag-card {
background: var(--ls-surface-2);
border: 1px solid var(--ls-border);
border-radius: 12px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.ls-mobile-mag-card-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.10em;
color: var(--ls-ink-faint);
text-transform: uppercase;
}
/* Steps list (completed + remaining) */
.ls-mobile-mag-steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.ls-mobile-mag-step {
display: flex;
gap: 10px;
align-items: flex-start;
}
.ls-mobile-mag-step-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(34, 197, 94, 0.15);
color: var(--ls-green);
display: flex;
align-items: center;
justify-content: center;
}
.ls-mobile-mag-step-num {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--ls-surface-3);
color: var(--ls-ink-soft);
display: flex;
align-items: center;
justify-content: center;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
font-weight: 600;
}
.ls-mobile-mag-step-body {
flex: 1;
min-width: 0;
}
.ls-mobile-mag-step-name {
font-size: 12.5px;
font-weight: 500;
color: var(--ls-ink);
line-height: 1.35;
}
.ls-mobile-mag-step-meta {
font-size: 10.5px;
color: var(--ls-ink-faint);
margin-top: 2px;
}
/* Action buttons */
.ls-mobile-mag-action {
width: 100%;
padding: 12px 14px;
background: var(--ls-orange);
color: #ffffff;
border: none;
border-radius: 12px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 120ms ease;
margin-top: 4px;
}
.ls-mobile-mag-action:hover {
background: var(--ls-orange-soft);
}
.ls-mobile-mag-link {
width: 100%;
padding: 8px;
background: transparent;
color: var(--ls-orange);
border: none;
font-family: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
.ls-mobile-mag-link:hover {
color: var(--ls-orange-soft);
}
/* =========================================================
INSPECT VIEW — cinematic typing → deficiency modal
========================================================= */
.ls-mobile-view-inspect {
display: flex;
flex-direction: column;
}
/* Progress bar at top — animates 0% → 50% on cinematic start */
.ls-mobile-insp-progress {
flex-shrink: 0;
padding: 6px 14px 0;
}
.ls-mobile-insp-progress-track {
height: 4px;
background: var(--ls-surface-3);
border-radius: 2px;
overflow: hidden;
}
.ls-mobile-insp-progress-fill {
height: 100%;
width: 0;
background: var(--ls-orange);
border-radius: 2px;
transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ls-mobile-insp-body {
flex: 1;
min-height: 0;
padding: 16px 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Step header */
.ls-mobile-insp-step-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.10em;
color: var(--ls-orange);
text-transform: uppercase;
}
.ls-mobile-insp-step-title {
margin: 2px 0 0;
font-family: 'Fraunces', Georgia, serif;
font-size: 26px;
font-weight: 700;
color: var(--ls-ink);
letter-spacing: -0.02em;
line-height: 1.05;
}
.ls-mobile-insp-step-subhead {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.10em;
color: var(--ls-orange-soft);
text-transform: uppercase;
margin: 4px 0 6px;
}
/* Form fields */
.ls-mobile-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.ls-mobile-field-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--ls-ink-faint);
text-transform: uppercase;
}
.ls-mobile-field-input {
background: var(--ls-surface-2);
border: 1px solid var(--ls-border);
border-radius: 10px;
padding: 11px 12px;
font-size: 14px;
color: var(--ls-ink);
min-height: 22px;
display: flex;
align-items: center;
transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.ls-mobile-field-readonly {
color: var(--ls-ink-soft);
}
.ls-mobile-field-with-suffix {
justify-content: space-between;
}
.ls-mobile-field-suffix {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--ls-ink-faint);
}
.ls-mobile-field-editable {
cursor: text;
}
.ls-mobile-field-value {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 16px;
font-weight: 600;
color: var(--ls-ink);
letter-spacing: 0.02em;
}
.ls-mobile-field-caret {
width: 1.5px;
height: 16px;
background: var(--ls-orange);
margin-left: 1px;
opacity: 0;
flex-shrink: 0;
}
/* Editable field states (driven by JS adding classes) */
.ls-mobile-field[data-state="focused"] .ls-mobile-field-input,
.ls-mobile-field[data-state="typing"] .ls-mobile-field-input {
border-color: var(--ls-orange);
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
background: rgba(249, 115, 22, 0.04);
}
.ls-mobile-field[data-state="focused"] .ls-mobile-field-caret,
.ls-mobile-field[data-state="typing"] .ls-mobile-field-caret {
opacity: 1;
animation: ls-caret-blink 900ms steps(2) infinite;
}
@keyframes ls-caret-blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.ls-mobile-field[data-state="violation"] .ls-mobile-field-input {
border-color: var(--ls-red);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.20);
background: rgba(239, 68, 68, 0.06);
}
.ls-mobile-field[data-state="violation"] .ls-mobile-field-caret {
opacity: 0;
animation: none;
}
.ls-mobile-field[data-state="violation"] .ls-mobile-field-value {
color: var(--ls-red);
}
/* Brief glow on each digit appearance */
@keyframes ls-digit-glow {
0% { box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18); }
40% { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.32); }
100% { box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18); }
}
.ls-mobile-field[data-state="typing"].ls-pulse-digit .ls-mobile-field-input {
animation: ls-digit-glow 180ms ease-out;
}
/* Below-field tags (hidden by default) */
.ls-mobile-field-violation,
.ls-mobile-field-confirm {
display: none;
align-items: center;
gap: 6px;
font-size: 11px;
padding: 6px 10px;
border-radius: 8px;
margin-top: 2px;
}
.ls-mobile-field-violation {
background: rgba(239, 68, 68, 0.10);
color: var(--ls-red);
border: 1px solid rgba(239, 68, 68, 0.25);
}
.ls-mobile-field-violation strong {
font-weight: 700;
letter-spacing: 0.02em;
}
.ls-mobile-field-confirm {
background: rgba(34, 197, 94, 0.10);
color: var(--ls-green);
border: 1px solid rgba(34, 197, 94, 0.25);
}
.ls-mobile-field-violation.is-visible,
.ls-mobile-field-confirm.is-visible {
display: flex;
animation: ls-tag-fade-in 240ms ease-out;
}
@keyframes ls-tag-fade-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* =========================================================
DEFICIENCY MODAL — slides up from bottom of phone screen
========================================================= */
.ls-mobile-modal-dim {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0);
pointer-events: none;
transition: background 280ms ease-out;
z-index: 40;
}
.ls-mobile-modal-dim.is-visible {
background: rgba(0, 0, 0, 0.55);
pointer-events: auto;
}
.ls-mobile-modal {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: var(--ls-surface-2);
border-top: 2px solid var(--ls-red);
border-radius: 18px 18px 0 0;
box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
transform: translateY(100%);
transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
z-index: 41;
max-height: 70%;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--ls-orange) var(--ls-surface-2);
}
.ls-mobile-modal::-webkit-scrollbar { width: 6px; }
.ls-mobile-modal::-webkit-scrollbar-track { background: var(--ls-surface-2); }
.ls-mobile-modal::-webkit-scrollbar-thumb {
background: var(--ls-orange);
border-radius: 3px;
}
.ls-mobile-modal.is-visible {
transform: translateY(0);
}
.ls-mobile-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px 8px;
border-bottom: 1px solid var(--ls-border);
}
.ls-mobile-modal-cite {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--ls-red);
}
.ls-mobile-modal-close {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 6px;
background: transparent;
border: none;
color: var(--ls-ink-faint);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 120ms ease, color 120ms ease;
}
.ls-mobile-modal-close:hover {
background: var(--ls-surface-3);
color: var(--ls-ink);
}
.ls-mobile-modal-body {
padding: 12px 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.ls-mobile-modal-title {
margin: 0;
font-family: 'Fraunces', Georgia, serif;
font-size: 22px;
font-weight: 700;
color: var(--ls-ink);
letter-spacing: -0.02em;
line-height: 1.1;
}
.ls-pill-red {
background: rgba(239, 68, 68, 0.12);
color: var(--ls-red);
border-color: rgba(239, 68, 68, 0.30);
align-self: flex-start;
}
.ls-mobile-modal-text {
margin: 4px 0 4px;
font-size: 12.5px;
line-height: 1.5;
color: var(--ls-ink-soft);
}
.ls-mobile-modal-section-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.10em;
color: var(--ls-ink-faint);
text-transform: uppercase;
margin-top: 4px;
}
.ls-mobile-modal-code {
margin: 0;
padding: 10px 12px;
background: var(--ls-bg);
border: 1px solid var(--ls-border);
border-radius: 8px;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10.5px;
line-height: 1.55;
color: var(--ls-ink-soft);
white-space: pre-wrap;
word-break: break-word;
}
.ls-mobile-modal-cost {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 8px 0;
border-top: 1px solid var(--ls-border);
border-bottom: 1px solid var(--ls-border);
margin: 4px 0;
}
.ls-mobile-modal-cost-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.10em;
color: var(--ls-ink-faint);
text-transform: uppercase;
}
.ls-mobile-modal-cost-value {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 18px;
font-weight: 700;
color: var(--ls-ink);
letter-spacing: -0.01em;
}
.ls-mobile-modal-primary {
width: 100%;
padding: 12px 14px;
background: var(--ls-orange);
color: #ffffff;
border: none;
border-radius: 10px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 120ms ease;
margin-top: 4px;
}
.ls-mobile-modal-primary:hover {
background: var(--ls-orange-soft);
}
.ls-mobile-modal-secondary {
width: 100%;
padding: 10px 14px;
background: transparent;
color: var(--ls-ink-soft);
border: 1px solid var(--ls-border-strong);
border-radius: 10px;
font-family: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
.ls-mobile-modal-secondary:hover {
background: var(--ls-surface-3);
color: var(--ls-ink);
}
/* Modal contents cascade — children fade in staggered after modal opens */
.ls-mobile-modal .ls-mobile-modal-body > * {
opacity: 0;
transform: translateY(6px);
}
.ls-mobile-modal.is-cascade .ls-mobile-modal-body > * {
animation: ls-cascade-in 260ms ease-out forwards;
}
.ls-mobile-modal.is-cascade .ls-mobile-modal-body > *:nth-child(1) { animation-delay: 0ms; }
.ls-mobile-modal.is-cascade .ls-mobile-modal-body > *:nth-child(2) { animation-delay: 70ms; }
.ls-mobile-modal.is-cascade .ls-mobile-modal-body > *:nth-child(3) { animation-delay: 140ms; }
.ls-mobile-modal.is-cascade .ls-mobile-modal-body > *:nth-child(4) { animation-delay: 210ms; }
.ls-mobile-modal.is-cascade .ls-mobile-modal-body > *:nth-child(5) { animation-delay: 280ms; }
.ls-mobile-modal.is-cascade .ls-mobile-modal-body > *:nth-child(6) { animation-delay: 350ms; }
.ls-mobile-modal.is-cascade .ls-mobile-modal-body > *:nth-child(7) { animation-delay: 420ms; }
.ls-mobile-modal.is-cascade .ls-mobile-modal-body > *:nth-child(8) { animation-delay: 490ms; }
@keyframes ls-cascade-in {
to { opacity: 1; transform: translateY(0); }
}
/* =========================================================
BUILDINGS VIEW — list of 7 buildings, Magnolia ACTIVE first
========================================================= */
.ls-mobile-view-buildings {
padding: 0 0 16px;
}
.ls-mobile-bldg-head {
padding: 16px 16px 8px;
}
.ls-mobile-bldg-title {
margin: 0;
font-family: 'Fraunces', Georgia, serif;
font-size: 26px;
font-weight: 700;
color: var(--ls-ink);
letter-spacing: -0.02em;
line-height: 1.05;
}
.ls-mobile-bldg-sub {
margin-top: 3px;
font-size: 12px;
color: var(--ls-ink-soft);
}
/* Decorative search input (pill) */
.ls-mobile-search {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
margin: 0 16px 10px;
background: var(--ls-surface-2);
border: 1px solid var(--ls-border);
border-radius: 999px;
}
.ls-mobile-search-icon {
flex-shrink: 0;
color: var(--ls-ink-faint);
}
.ls-mobile-search-placeholder {
flex: 1;
font-size: 12.5px;
color: var(--ls-ink-faint);
}
/* Filter chip row (horizontal scroll) */
.ls-mobile-chips {
display: flex;
gap: 6px;
padding: 0 16px 12px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.ls-mobile-chips::-webkit-scrollbar { display: none; }
.ls-mobile-chip {
flex-shrink: 0;
background: var(--ls-surface-2);
border: 1px solid var(--ls-border);
border-radius: 999px;
padding: 6px 12px;
color: var(--ls-ink-soft);
font-family: inherit;
font-size: 11.5px;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
display: inline-flex;
align-items: center;
gap: 5px;
}
.ls-mobile-chip:hover {
background: var(--ls-surface-3);
color: var(--ls-ink);
}
.ls-mobile-chip.is-selected {
background: var(--ls-orange-tint);
border-color: rgba(249, 115, 22, 0.35);
color: var(--ls-orange);
}
.ls-mobile-chip-count {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10px;
font-weight: 600;
color: var(--ls-ink-faint);
letter-spacing: 0.02em;
}
.ls-mobile-chip.is-selected .ls-mobile-chip-count {
color: var(--ls-orange);
}
/* Building list cards */
.ls-mobile-bldg-list {
padding: 0 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.ls-mobile-bldg {
display: flex;
align-items: stretch;
gap: 10px;
padding: 12px;
background: var(--ls-surface-2);
border: 1px solid var(--ls-border);
border-radius: 12px;
transition: background 120ms ease, transform 220ms ease;
}
.ls-mobile-bldg:hover {
background: var(--ls-surface-3);
}
.ls-mobile-bldg-active {
background: var(--ls-orange-tint);
border-color: rgba(249, 115, 22, 0.32);
border-left: 3px solid var(--ls-orange);
padding-left: 10px;
}
.ls-mobile-bldg-active:hover {
background: rgba(249, 115, 22, 0.13);
}
.ls-mobile-bldg.is-tapped {
animation: ls-card-pulse 300ms ease-out;
}
.ls-mobile-bldg-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--ls-surface-3);
display: flex;
align-items: center;
justify-content: center;
color: var(--ls-ink-soft);
}
.ls-mobile-bldg-active .ls-mobile-bldg-icon {
background: rgba(249, 115, 22, 0.18);
color: var(--ls-orange);
}
.ls-mobile-bldg-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ls-mobile-bldg-name-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.ls-mobile-bldg-name {
font-size: 13px;
font-weight: 600;
color: var(--ls-ink);
letter-spacing: -0.01em;
}
.ls-mobile-bldg-meta {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9.5px;
color: var(--ls-ink-faint);
letter-spacing: 0.02em;
}
.ls-mobile-bldg-tags {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--ls-ink-soft);
text-transform: uppercase;
margin-top: 2px;
}
.ls-mobile-bldg-active .ls-mobile-bldg-tags {
color: var(--ls-orange-soft);
}
.ls-mobile-bldg-tail {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
gap: 6px;
}
.ls-mobile-bldg-yearly {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 11px;
font-weight: 700;
color: var(--ls-ink);
letter-spacing: -0.01em;
}
.ls-mobile-bldg-defs {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--ls-red);
display: inline-flex;
align-items: center;
gap: 4px;
}
.ls-mobile-bldg-defs-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ls-red);
}
.ls-mobile-bldg-defs-clean {
color: var(--ls-ink-faint);
letter-spacing: 0.06em;
}
/* =========================================================
MAGNOLIA BUILDING DETAIL (sub-screen of Buildings)
========================================================= */
.ls-mobile-bldg-detail-body {
padding: 14px 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Top info card */
.ls-mobile-bldg-info {
background: var(--ls-orange-tint);
border: 1px solid rgba(249, 115, 22, 0.30);
border-radius: 14px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.ls-mobile-bldg-info-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.ls-mobile-bldg-info-tag {
padding: 4px 9px;
border-radius: 6px;
background: rgba(249, 115, 22, 0.18);
color: var(--ls-orange);
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.06em;
}
.ls-mobile-bldg-info-value {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 12px;
font-weight: 600;
color: var(--ls-orange-soft);
letter-spacing: -0.01em;
}
/* Assets card */
.ls-mobile-bldg-assets-total {
font-family: 'Fraunces', Georgia, serif;
font-size: 26px;
font-weight: 700;
color: var(--ls-ink);
letter-spacing: -0.02em;
line-height: 1;
}
.ls-mobile-bldg-assets {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-direction: column;
}
.ls-mobile-bldg-asset {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 0;
border-top: 1px solid var(--ls-border);
}
.ls-mobile-bldg-asset:first-child {
border-top: none;
}
.ls-mobile-bldg-asset-name {
font-size: 12px;
color: var(--ls-ink-soft);
}
.ls-mobile-bldg-asset-count {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 13px;
font-weight: 600;
color: var(--ls-ink);
letter-spacing: -0.01em;
}
/* Inspection history */
.ls-mobile-bldg-history-stats {
display: flex;
flex-direction: column;
gap: 1px;
}
.ls-mobile-bldg-history-num {
font-family: 'Fraunces', Georgia, serif;
font-size: 18px;
font-weight: 700;
color: var(--ls-ink);
letter-spacing: -0.02em;
line-height: 1.1;
}
.ls-mobile-bldg-history-meta {
font-size: 11px;
color: var(--ls-ink-soft);
}
.ls-mobile-bldg-history-pills {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 6px;
}
.ls-mobile-bldg-history-pill {
padding: 3px 8px;
border-radius: 6px;
background: var(--ls-surface-3);
color: var(--ls-ink-soft);
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.02em;
}
/* Open deficiencies (red-tinted alarm card) */
.ls-mobile-bldg-defs-card {
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.25);
border-radius: 12px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.ls-mobile-bldg-defs-card-head {
display: flex;
align-items: center;
gap: 8px;
color: var(--ls-red);
}
.ls-mobile-bldg-defs-card-title {
font-family: 'Fraunces', Georgia, serif;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
}
.ls-mobile-bldg-defs-card-meta {
font-size: 11px;
color: var(--ls-ink-soft);
margin-left: 22px;
}
/* =========================================================
MORE VIEW — profile + stats + certifications + settings
========================================================= */
.ls-mobile-view-more {
padding: 0 0 16px;
}
/* Re-add green pill (used by ACTIVE certs + VERIFIED profile pill) */
.ls-pill-green {
background: rgba(34, 197, 94, 0.12);
color: var(--ls-green);
border-color: rgba(34, 197, 94, 0.30);
}
/* Profile card (orange-tinted hero with avatar + verified pill) */
.ls-mobile-profile {
display: flex;
align-items: center;
gap: 12px;
margin: 0 16px 12px;
padding: 14px;
background: var(--ls-orange-tint);
border: 1px solid rgba(249, 115, 22, 0.30);
border-radius: 14px;
}
.ls-mobile-profile-avatar {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(249, 115, 22, 0.22);
color: var(--ls-orange);
border: 1px solid rgba(249, 115, 22, 0.4);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 700;
letter-spacing: 0.02em;
}
.ls-mobile-profile-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ls-mobile-profile-name-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.ls-mobile-profile-name {
font-family: 'Fraunces', Georgia, serif;
font-size: 17px;
font-weight: 700;
color: var(--ls-ink);
letter-spacing: -0.02em;
}
.ls-mobile-profile-role {
font-size: 11.5px;
color: var(--ls-orange-soft);
}
.ls-mobile-profile-loc {
font-size: 10.5px;
color: var(--ls-ink-faint);
}
/* Certification card */
.ls-mobile-cert {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--ls-surface-2);
border: 1px solid var(--ls-border);
border-radius: 12px;
margin-bottom: 8px;
transition: background 120ms ease, transform 220ms ease;
}
.ls-mobile-cert:last-child {
margin-bottom: 0;
}
.ls-mobile-cert:hover {
background: var(--ls-surface-3);
}
.ls-mobile-cert-active {
background: var(--ls-orange-tint);
border-color: rgba(249, 115, 22, 0.32);
border-left: 3px solid var(--ls-orange);
padding-left: 10px;
}
.ls-mobile-cert-active:hover {
background: rgba(249, 115, 22, 0.13);
}
.ls-mobile-cert.is-tapped {
animation: ls-card-pulse 300ms ease-out;
}
.ls-mobile-cert-badge {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(249, 115, 22, 0.18);
color: var(--ls-orange);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Fraunces', Georgia, serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
}
.ls-mobile-cert-badge-slate {
background: var(--ls-surface-3);
color: var(--ls-ink-soft);
}
.ls-mobile-cert-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ls-mobile-cert-name {
font-size: 13px;
font-weight: 600;
color: var(--ls-ink);
letter-spacing: -0.01em;
}
.ls-mobile-cert-scope {
font-size: 11px;
color: var(--ls-ink-soft);
}
.ls-mobile-cert-active .ls-mobile-cert-scope {
color: var(--ls-orange-soft);
}
.ls-mobile-cert-meta {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9.5px;
color: var(--ls-ink-faint);
letter-spacing: 0.02em;
margin-top: 1px;
}
.ls-mobile-cert-tail {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6px;
}
/* Settings rows */
.ls-mobile-settings {
display: flex;
flex-direction: column;
gap: 4px;
}
.ls-mobile-setting {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px;
background: var(--ls-surface-2);
border: 1px solid var(--ls-border);
border-radius: 10px;
color: var(--ls-ink);
font-family: inherit;
font-size: 13px;
cursor: pointer;
text-align: left;
transition: background 120ms ease;
}
.ls-mobile-setting:hover {
background: var(--ls-surface-3);
}
.ls-mobile-setting-icon {
flex-shrink: 0;
color: var(--ls-ink-soft);
}
.ls-mobile-setting-name {
flex: 1;
font-weight: 500;
}
.ls-mobile-setting-meta {
font-size: 10.5px;
color: var(--ls-ink-faint);
}
/* =========================================================
NICET III DETAIL SCREEN
========================================================= */
.ls-mobile-nicet-body {
padding: 14px 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Badge hero (orange-tinted card with NICET seal) */
.ls-mobile-nicet-hero {
display: flex;
align-items: center;
gap: 14px;
padding: 14px;
background: var(--ls-orange-tint);
border: 1px solid rgba(249, 115, 22, 0.30);
border-radius: 14px;
}
.ls-mobile-nicet-badge {
flex-shrink: 0;
color: var(--ls-orange);
}
.ls-mobile-nicet-hero-body {
flex: 1;
min-width: 0;
}
.ls-mobile-nicet-hero-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.10em;
color: var(--ls-orange);
text-transform: uppercase;
}
.ls-mobile-nicet-hero-title {
margin-top: 2px;
font-family: 'Fraunces', Georgia, serif;
font-size: 18px;
font-weight: 700;
color: var(--ls-ink);
letter-spacing: -0.02em;
line-height: 1.15;
}
.ls-mobile-nicet-hero-issuer {
margin-top: 4px;
font-size: 10.5px;
color: var(--ls-orange-soft);
line-height: 1.3;
}
/* Dates row + progress */
.ls-mobile-nicet-dates {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.ls-mobile-nicet-date {
display: flex;
flex-direction: column;
gap: 2px;
}
.ls-mobile-nicet-date-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.10em;
color: var(--ls-ink-faint);
text-transform: uppercase;
}
.ls-mobile-nicet-date-value {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 13px;
font-weight: 600;
color: var(--ls-ink);
letter-spacing: -0.01em;
}
.ls-mobile-nicet-progress {
margin-top: 6px;
display: flex;
flex-direction: column;
gap: 4px;
}
.ls-mobile-nicet-progress-track {
height: 4px;
background: var(--ls-surface-3);
border-radius: 2px;
overflow: hidden;
}
.ls-mobile-nicet-progress-fill {
height: 100%;
background: var(--ls-green);
border-radius: 2px;
}
.ls-mobile-nicet-progress-meta {
font-size: 11px;
color: var(--ls-green);
font-weight: 500;
}
/* "What this allows" list */
.ls-mobile-nicet-allows {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px 12px;
}
.ls-mobile-nicet-allows li {
font-size: 11.5px;
color: var(--ls-ink-soft);
padding-left: 14px;
position: relative;
}
.ls-mobile-nicet-allows li::before {
content: '';
position: absolute;
left: 2px;
top: 6px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ls-orange);
}
/* Recent inspections */
.ls-mobile-nicet-recent {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.ls-mobile-nicet-recent-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-top: 1px solid var(--ls-border);
}
.ls-mobile-nicet-recent-row:first-child {
border-top: none;
padding-top: 4px;
}
.ls-mobile-nicet-recent-body {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.ls-mobile-nicet-recent-name {
font-size: 12.5px;
font-weight: 500;
color: var(--ls-ink);
}
.ls-mobile-nicet-recent-meta {
font-size: 10.5px;
color: var(--ls-ink-faint);
}
.ls-mobile-nicet-recent-date {
flex-shrink: 0;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 10.5px;
font-weight: 600;
color: var(--ls-orange-soft);
letter-spacing: 0.04em;
}