/* ============================================================ Oraoki Marketing — landing page styles Scope: templates/marketing/landing.html only. All colours are design tokens — no hex literals. Visibility principle: - Content is VISIBLE by default. - Only opts into hidden state when . - This guarantees that if JS or Motion fails, every section still renders. Motion is for delight, never for visibility. ============================================================ */ /* Marketing sections held back until product-ready */ .mkt-feature-section--hidden { display: none !important; } @font-face { font-family: 'Bodoni FLF'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../fonts/koto/BodoniFLF-Roman.woff2') format('woff2'); } /* ── Reset / base ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* Instant scroll: smooth scrolling made hash jumps sweep past sections and fired many scroll-reveals in one motion; readers also lose place on long landings. */ html { scroll-behavior: auto; } body.marketing-page { background: var(--neutral-50); color: var(--fg1); font-family: var(--font-sans); margin: 0; /* Token used by JS to drive smooth section-bg colour shifts */ --page-bg: var(--neutral-50); background: var(--page-bg); transition: background 800ms var(--ease-in-out); overflow-x: hidden; } /* ── Top scroll-progress bar ──────────────────────────────── */ .mkt-progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--coral-500); transform: scaleX(0); transform-origin: left center; z-index: 200; pointer-events: none; will-change: transform; } /* ── Typography utilities ─────────────────────────────────── */ .mkt-display { font-family: var(--font-display); font-size: clamp(64px, 9vw, 124px); line-height: 1.0; font-weight: 800; letter-spacing: -0.035em; color: var(--neutral-900); margin: 0; } .mkt-display em { font-style: italic; font-weight: 300; font-variation-settings: 'opsz' 144; /* Continuous gradient shimmer on display italic words */ background-image: linear-gradient( 90deg, var(--coral-500) 0%, var(--sky-700) 35%, var(--coral-500) 70%, var(--sky-700) 100% ); background-size: 200% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: mkt-shimmer 7s ease-in-out infinite; } @keyframes mkt-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .mkt-display strong { font-weight: 900; } .mkt-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky-600); } .mkt-subhead { font-size: clamp(17px, 2.2vw, 22px); line-height: 1.55; color: var(--fg2); max-width: 50ch; margin: 0; } .mkt-pull-quote { font-family: var(--font-display); font-size: clamp(36px, 5vw, 72px); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; color: var(--neutral-900); font-style: italic; margin: 0; } .mkt-pull-quote span { color: var(--coral-500); font-style: normal; } /* ── Line-mask: edition reveal primitive ──────────────────── */ .line-mask { display: block; overflow: hidden; /* Slight bottom padding so descenders aren't clipped */ padding-bottom: 0.08em; } .line-mask .line-inner { display: inline-block; transform: translateY(0); will-change: transform; } /* JS-on initial state (hidden) */ .js-on .line-mask .line-inner { transform: translateY(110%); } .js-on .line-mask.in .line-inner { transform: translateY(0); transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1); } /* Stagger lines via custom property --i (set inline) */ .js-on .line-mask.in .line-inner { transition-delay: calc(var(--i, 0) * 0.09s); } /* ── Layout helpers ───────────────────────────────────────── */ .mkt-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); } @media (max-width: 680px) { .mkt-wrap { padding: 0 var(--space-4); } } /* ── Sticky nav ───────────────────────────────────────────── */ .mkt-nav { position: sticky; top: 0; z-index: 100; background: rgba(252, 251, 249, 0.86); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border); } .mkt-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); height: 64px; display: flex; align-items: center; gap: var(--space-6); } .mkt-nav-logo { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--fg1); flex-shrink: 0; } .mkt-nav-logo img { height: 28px; width: auto; display: block; } .mkt-nav-links { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; flex: 1; justify-content: center; } .mkt-nav-links a { font-size: 14px; font-weight: 500; color: var(--fg2); text-decoration: none; position: relative; transition: color var(--dur-fast) var(--ease-out); } .mkt-nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: var(--coral-500); transform: scaleX(0); transform-origin: left center; transition: transform 220ms var(--ease-out); } .mkt-nav-links a:hover { color: var(--fg1); } .mkt-nav-links a:hover::after { transform: scaleX(1); } .mkt-nav-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } @media (max-width: 700px) { .mkt-nav-links { display: none; } .mkt-nav-inner { padding: 0 var(--space-4); } } /* ── Buttons ──────────────────────────────────────────────── */ .btn-mkt-ghost { display: inline-flex; align-items: center; gap: var(--space-2); padding: 9px 18px; font-size: 14px; font-weight: 500; color: var(--fg2); background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); text-decoration: none; cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .btn-mkt-ghost:hover { color: var(--fg1); border-color: var(--neutral-400); background: var(--hover-bg); } /* Primary coral CTA */ .btn-mkt-cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: 11px 24px; font-size: 15px; font-weight: 600; color: var(--coral-900); background: var(--coral-300); border: none; border-radius: var(--radius-pill); text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: var(--shadow-sm); will-change: transform; } /* Left-to-right fill on hover */ .btn-mkt-cta::before { content: ''; position: absolute; inset: 0; background: var(--coral-500); transform: scaleX(0); transform-origin: left center; transition: transform 320ms var(--ease-out); border-radius: inherit; } .btn-mkt-cta:hover::before { transform: scaleX(1); } .btn-mkt-cta:hover { color: var(--neutral-0); box-shadow: var(--shadow-md); } .btn-mkt-cta:active { transform: scale(0.97); } .btn-mkt-cta .mkt-arrow { display: inline-block; position: relative; z-index: 1; transition: transform 240ms var(--ease-out); } .btn-mkt-cta:hover .mkt-arrow { transform: translateX(4px); } .btn-mkt-cta span:not(.mkt-arrow) { position: relative; z-index: 1; } /* Large variant */ .btn-mkt-cta-lg { padding: 16px 40px; font-size: 18px; } /* Premium gradient glow on the final CTA's primary button */ .btn-mkt-cta.has-halo { color: var(--neutral-0); background: linear-gradient( 110deg, var(--coral-500), var(--coral-300), var(--coral-700), var(--coral-500) ); background-size: 220% 220%; text-shadow: 0 1px 2px rgba(110, 46, 31, 0.25); box-shadow: 0 10px 28px rgba(224, 122, 95, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.25); animation: mkt-cta-flow 8s ease-in-out infinite, mkt-cta-glow 3s ease-in-out infinite; } .btn-mkt-cta.has-halo::before { display: none; } .btn-mkt-cta.has-halo:hover { color: var(--neutral-0); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(224, 122, 95, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.30); } @keyframes mkt-cta-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes mkt-cta-glow { 0%, 100% { box-shadow: 0 10px 28px rgba(224, 122, 95, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25); } 50% { box-shadow: 0 12px 34px rgba(224, 122, 95, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.25); } } /* ── Hero section ─────────────────────────────────────────── */ .mkt-hero { padding: clamp(60px, 10vh, 120px) 0 clamp(40px, 7vh, 80px); overflow: hidden; } .mkt-hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-8); align-items: center; } @media (max-width: 860px) { .mkt-hero-inner { grid-template-columns: 1fr; gap: var(--space-7); padding: 0 var(--space-4); } } .mkt-hero-copy { display: flex; flex-direction: column; gap: var(--space-5); } .mkt-hero .mkt-display .line-inner { white-space: nowrap; } .mkt-hero .mkt-display { font-family: 'Bodoni FLF', 'Bodoni Moda', Georgia, serif; font-size: clamp(48px, 7vw, 96px); font-weight: 400; letter-spacing: 0.04em; line-height: 0.9; } .mkt-hero .mkt-display .line-mask { padding-bottom: 0; } .mkt-hero .mkt-display .line-mask + .line-mask { margin-top: -0.18em; } .mkt-hero .mkt-display em { font-family: 'Fraunces', Georgia, serif; font-size: 0.72em; font-style: italic; font-weight: 300; font-variation-settings: 'opsz' 144; } .mkt-hero .mkt-subhead { max-width: none; font-size: clamp(16px, 1.85vw, 20px); } .mkt-hero .mkt-subhead-line { display: block; } @media (min-width: 720px) { .mkt-hero .mkt-subhead-line:first-child { white-space: nowrap; } } .mkt-hero-overline { display: inline-flex; align-items: center; gap: var(--space-2); padding: 5px 14px; background: var(--sky-100); color: var(--sky-800); border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; width: fit-content; } .mkt-hero-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .mkt-hero-trust { font-size: 13px; color: var(--fg3); display: flex; align-items: center; gap: var(--space-2); } .mkt-hero-trust::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--mint-500); border-radius: 50%; box-shadow: 0 0 0 0 rgba(94, 187, 133, 0.6); animation: mkt-dot-pulse 2.4s ease-out infinite; } @keyframes mkt-dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(94, 187, 133, 0.55); } 60% { box-shadow: 0 0 0 10px rgba(94, 187, 133, 0.0); } } /* ── Hero product mockup ──────────────────────────────────── */ .mkt-hero-mockup { position: relative; /* Continuous floating bob — JS-independent */ animation: mkt-float 7s ease-in-out infinite; will-change: transform; } @keyframes mkt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* JS-on entrance state — opts in to hide+rotate, then settles */ .js-on .mkt-hero-mockup { opacity: 0; animation: none; transform: translateY(36px) rotate(-2deg); } .js-on .mkt-hero-mockup.revealed { opacity: 1; transform: translateY(0) rotate(0deg); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); /* Re-enable float once entrance settles */ animation: mkt-float 7s ease-in-out infinite 1.1s; } .mkt-mockup-card { background: var(--neutral-0); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-5); border: 1px solid var(--border); } .mkt-mockup-topbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); margin-bottom: var(--space-4); } .mkt-mockup-topbar-title { font-size: 13px; font-weight: 600; color: var(--fg1); } .mkt-mockup-topbar-badge { background: var(--sky-100); color: var(--sky-800); padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; } .mkt-room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .mkt-room { background: var(--neutral-50); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); font-size: 12px; transition: background 320ms var(--ease-in-out), border-color 320ms var(--ease-in-out); } .mkt-room-number { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--fg1); margin-bottom: var(--space-1); } .mkt-room-status { display: inline-block; border-radius: var(--radius-pill); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; padding: 2px 8px; transition: background 320ms var(--ease-in-out), color 320ms var(--ease-in-out); } .mkt-status-dirty { background: var(--neutral-200); color: var(--neutral-700); } .mkt-status-progress { background: var(--coral-100); color: var(--coral-700); } .mkt-status-clean { background: var(--mint-100); color: var(--mint-700); } .mkt-status-ready { background: var(--sky-100); color: var(--sky-800); } .mkt-status-progress { animation: mkt-pulse 2s ease-in-out infinite; } @keyframes mkt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* Floating accent badge on mockup */ .mkt-mockup-badge { position: absolute; bottom: -18px; right: -18px; background: var(--coral-300); color: var(--coral-900); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-md); white-space: nowrap; /* Subtle counter-float so it drifts opposite to the card */ animation: mkt-float-reverse 7s ease-in-out infinite; } @keyframes mkt-float-reverse { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(6px) rotate(1deg); } } .mkt-mockup-badge-value { font-family: var(--font-mono); font-size: 26px; font-weight: 700; display: block; font-variant-numeric: tabular-nums; } /* ── Logo marquee (dual row) ──────────────────────────────── */ .mkt-logos { padding: var(--space-6) 0 var(--space-7); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; /* Edge fade mask */ mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); } .mkt-logos-label { text-align: center; font-size: 12px; font-weight: 500; color: var(--fg3); margin-bottom: var(--space-5); letter-spacing: 0.04em; } .mkt-marquee { display: flex; flex-direction: column; gap: var(--space-4); } .mkt-marquee-track { display: flex; gap: var(--space-7); white-space: nowrap; animation: mkt-marquee-left 38s linear infinite; width: max-content; } .mkt-marquee-track--reverse { animation: mkt-marquee-right 32s linear infinite; } .mkt-logos:hover .mkt-marquee-track { animation-play-state: paused; } @keyframes mkt-marquee-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes mkt-marquee-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } .mkt-logo-item { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--fg2); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; flex-shrink: 0; opacity: 0.7; transition: opacity var(--dur-base) var(--ease-out); } .mkt-logo-item:hover { opacity: 1; } .mkt-logo-dot { width: 28px; height: 28px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; } /* ── Section base ─────────────────────────────────────────── */ .mkt-section { padding: clamp(64px, 10vw, 120px) 0; } /* ── Pull quote / problem section ─────────────────────────── */ .mkt-problem { background: var(--sky-50); } .mkt-problem-inner { max-width: 900px; margin: 0 auto; padding: 0 var(--space-6); text-align: center; } @media (max-width: 680px) { .mkt-problem-inner { padding: 0 var(--space-4); } } .mkt-problem-sub { margin-top: var(--space-5); font-size: 18px; line-height: 1.6; color: var(--fg2); max-width: 60ch; margin-left: auto; margin-right: auto; } /* ── Feature rows ─────────────────────────────────────────── */ .mkt-features { background: var(--neutral-50); } .mkt-feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; padding: clamp(48px, 7vw, 96px) var(--space-6); max-width: 1200px; margin: 0 auto; border-bottom: 1px solid var(--border); } .mkt-feature-row:last-child { border-bottom: none; } /* Reversed rows: top-align both columns so the shorter card doesn't float low when the text block is taller than the visual. */ .mkt-feature-row.reverse { align-items: start; } .mkt-feature-row.reverse > .mkt-feature-copy { order: 2; padding-inline-start: var(--space-7); } .mkt-feature-row.reverse > .mkt-feature-visual { order: 1; } @media (max-width: 860px) { .mkt-feature-row { grid-template-columns: 1fr; padding: var(--space-7) var(--space-4); } .mkt-feature-row.reverse > .mkt-feature-copy { order: 0; padding-inline-start: 0; } .mkt-feature-row.reverse > .mkt-feature-visual { order: 0; } } .mkt-feature-copy { display: flex; flex-direction: column; gap: var(--space-4); } .mkt-feature-number { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--fg3); letter-spacing: 0.08em; } .mkt-feature-title { font-family: var(--font-display); font-size: clamp(30px, 4vw, 52px); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; color: var(--neutral-900); margin: 0; } .mkt-feature-title em { font-style: italic; font-weight: 300; color: var(--sky-700); font-variation-settings: 'opsz' 144; } .mkt-feature-body { font-size: 16px; line-height: 1.65; color: var(--fg2); max-width: 44ch; margin: 0; } /* Feature UI mockup container — tilt host */ .mkt-feature-visual { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--neutral-0); border: 1px solid var(--border); will-change: transform; transform-style: preserve-3d; perspective: 1200px; transition: transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 480ms var(--ease-out); } .mkt-feature-visual:hover { box-shadow: 0 24px 48px rgba(42, 70, 86, 0.18); } /* Inner depth wrapper used by JS for tilt */ .mkt-feature-visual .mkt-feature-visual-inner { display: block; transform: translateZ(0); } /* ── Condensed room board demo (Feature 01) ──────────────── */ .mkt-board-demo { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .mkt-board-tabs { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .mkt-board-tabs::-webkit-scrollbar { display: none; } .mkt-board-tab { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); background: var(--neutral-100); box-shadow: var(--shadow-sm); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .mkt-board-tab.is-active { background: var(--bg-elevated); border-color: var(--sky-300); } .mkt-board-tab-head { display: flex; align-items: center; gap: var(--space-1); } .mkt-board-tab-title { font-size: 11px; font-weight: 600; color: var(--fg1); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mkt-board-tab-stats { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 9px; font-weight: 500; line-height: 1; } .mkt-board-tab-stat-total { color: var(--fg3); } .mkt-board-tab-stat-clean { color: var(--mint-700); } .mkt-board-tab-stat-dirty { color: var(--danger); } .mkt-board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); } @media (max-width: 480px) { .mkt-board-grid { grid-template-columns: repeat(2, 1fr); } } /* Tiles — scoped production room-border pattern */ .mkt-board-demo .mkt-board-tile { position: relative; border: 0; border-left: 4px solid var(--amber-300); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; background: color-mix(in srgb, var(--amber-300) 10%, var(--bg-elevated)); transition: background var(--dur-base) var(--ease-out), border-left-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .mkt-board-demo .mkt-board-tile.border-success { border-left-color: var(--mint-300); background: color-mix(in srgb, var(--mint-300) 10%, var(--bg-elevated)); } .mkt-board-demo .mkt-board-tile.border-danger { border-left-color: var(--coral-300); background: color-mix(in srgb, var(--coral-300) 10%, var(--bg-elevated)); } .mkt-board-demo .mkt-board-tile.border-info { border-left-color: var(--sky-400); background: color-mix(in srgb, var(--sky-200) 14%, var(--bg-elevated)); } .mkt-board-demo .mkt-board-tile-body { padding: var(--space-2) var(--space-2) var(--space-2) var(--space-1); display: flex; flex-direction: column; gap: var(--space-1); } .mkt-board-demo .room-tile-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-1); } .mkt-board-demo .room-tile-header-left { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .mkt-board-demo .room-number { font-size: 16px; font-weight: 600; line-height: 1; color: var(--sky-800); font-variant-numeric: tabular-nums; } .mkt-board-demo .room-tag.room-type { font-family: var(--font-mono); font-size: 8px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg3); } .mkt-board-demo .room-card-head-right { flex-shrink: 0; } .mkt-board-demo .room-status-badge { display: none; font-size: 8px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 5px; border-radius: var(--radius-md); line-height: 1.4; white-space: nowrap; } .mkt-board-demo .border-success .badge-clean { display: inline-block; background: var(--mint-300); color: var(--mint-900); } .mkt-board-demo .border-danger .badge-checkout { display: inline-block; background: var(--coral-300); color: var(--coral-900); } .mkt-board-demo .border-warning .badge-dirty { display: inline-block; background: var(--amber-300); color: var(--amber-700); } .mkt-board-demo .border-primary .badge-inspected { display: inline-block; background: var(--sky-300); color: var(--sky-900); } .mkt-board-demo .border-info .badge-in-progress { display: inline-block; background: var(--sky-200); color: var(--sky-900); } .mkt-board-demo .border-paused .badge-paused { display: inline-block; background: var(--amber-300); color: var(--amber-700); } .mkt-board-demo .room-info { display: flex; flex-direction: column; gap: 1px; } .mkt-board-demo .tile-info-row { display: flex; justify-content: space-between; align-items: center; font-size: 9px; line-height: 1.3; } .mkt-board-demo .tile-info-row--occupancy { margin-top: var(--space-1); } .mkt-board-demo .tile-info-label { color: var(--fg3); font-weight: 400; } .mkt-board-demo .tile-info-value { font-weight: 500; color: var(--fg1); } .mkt-board-demo .tile-info-value--alert { color: var(--danger-strong); font-weight: 700; } .mkt-board-demo .tile-occ-pct { font-weight: 700; color: var(--sky-800); } .mkt-board-demo .tile-progress { height: 4px; border-radius: var(--radius-pill); background: var(--neutral-100); overflow: hidden; } .mkt-board-demo .tile-progress-fill { height: 100%; border-radius: var(--radius-pill); background: var(--mint-700); transition: width var(--dur-base) var(--ease-out); } /* Live pulse on status change */ .mkt-board-demo .mkt-board-tile.is-pulsing { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pulse-color, var(--mint-500)) 35%, transparent), 0 10px 24px -8px color-mix(in srgb, var(--pulse-color, var(--mint-500)) 50%, transparent); border-left-color: var(--pulse-color, var(--mint-500)); } .mkt-board-demo .mkt-board-tile.is-pulsing::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--pulse-color, var(--mint-500)); pointer-events: none; animation: mktBoardPulseRing 900ms var(--ease-out) forwards; } @keyframes mktBoardPulseRing { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.06); opacity: 0; } } /* ── Today-view schedule mockup (Feature 02) ─────────────── */ .mkt-today-mockup { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); position: relative; overflow: hidden; } /* Each area is a horizontal row: left mint panel + right scrolling tiles */ .mkt-today-area { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: row; min-height: 100px; } /* Left mint panel */ .mkt-today-area-hd { width: 110px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-3); background: var(--mint-50); gap: var(--space-2); } .mkt-today-area-hd-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-1); } .mkt-today-area-name { font-weight: 800; font-size: 13px; line-height: 1.2; color: var(--fg1); } /* Time as a mint pill at the bottom of the left panel */ .mkt-today-area-time { display: inline-flex; align-items: center; padding: 2px 7px; background: var(--mint-100); color: var(--mint-800); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 9px; font-weight: 600; align-self: flex-start; } .mkt-today-live-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px; background: var(--mint-200); color: var(--mint-800); border-radius: var(--radius-pill); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0; } /* Non-live area header — neutral grey */ .mkt-today-area-hd--grey { background: var(--neutral-50); } @keyframes mkt-live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } } .mkt-today-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mint-600); animation: mkt-live-pulse 1.4s ease-in-out infinite; } /* Right tiles panel — horizontal row of staff cards */ .mkt-today-tiles { flex: 1; display: flex; flex-direction: row; overflow-x: auto; scrollbar-width: none; } .mkt-today-tiles::-webkit-scrollbar { display: none; } /* Individual staff card */ .mkt-today-tile { min-width: 170px; min-height: 80px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-3) var(--space-4); gap: var(--space-2); border-right: 1px solid var(--border); border-left: 3px solid var(--sky-200); background: var(--neutral-0); } .mkt-today-tile:last-child { border-right: none; } .mkt-today-tile-name { font-size: 12px; font-weight: 600; color: var(--fg1); } .mkt-today-tile-info { display: flex; flex-direction: column; gap: 2px; } .mkt-today-tile-sub { font-size: 10px; color: var(--fg3); font-family: var(--font-mono); } .mkt-today-signin-btn { display: inline-flex; align-items: center; padding: 4px 12px; background: var(--mint-500); color: var(--neutral-0); border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; align-self: flex-start; } .mkt-today-signout-btn { display: inline-flex; align-items: center; padding: 4px 12px; background: var(--coral-500); color: var(--neutral-0); border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; align-self: flex-start; } .mkt-today-done-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--mint-100); color: var(--mint-800); border-radius: var(--radius-pill); font-size: 10px; font-weight: 600; align-self: flex-start; } /* ── Demo popup (sign-in / sign-out modal simulation) ─────── */ .mkt-demo-popup { position: absolute; bottom: 0; left: 0; right: 0; background: var(--neutral-0); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); } .mkt-demo-popup--visible { transform: translateY(0); } .mkt-demo-popup-hd { font-size: 12px; font-weight: 700; color: var(--fg1); } .mkt-demo-popup-body { display: flex; align-items: center; gap: var(--space-2); font-size: 11px; color: var(--fg3); } .mkt-demo-popup-chip { font-family: var(--font-mono); font-size: 11px; font-weight: 600; background: var(--neutral-100); color: var(--fg2); padding: 2px 8px; border-radius: var(--radius-pill); } .mkt-demo-popup-confirm { align-self: flex-end; padding: 5px 14px; background: var(--sky-600); color: var(--neutral-0); border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; border: none; cursor: default; } /* ── Demo cursor ──────────────────────────────────────────── */ .mkt-demo-cursor { position: absolute; pointer-events: none; opacity: 0; transform: translate(20px, 20px); transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; z-index: 10; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); } .mkt-demo-cursor--visible { opacity: 1; } @keyframes mkt-cursor-click { 0% { transform: scale(1); } 40% { transform: scale(0.75); } 100% { transform: scale(1); } } .mkt-demo-cursor--clicking svg { animation: mkt-cursor-click 0.22s ease-out; } /* Tile state transitions */ @keyframes mkt-tile-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .mkt-today-tile-state { animation: mkt-tile-fade-in 0.3s ease-out; } @keyframes mkt-tile-flash-signin { 0%, 100% { border-left-color: var(--sky-200); } 50% { border-left-color: var(--sky-500); } } @keyframes mkt-tile-flash-done { 0%, 100% { border-left-color: var(--sky-200); } 50% { border-left-color: var(--mint-400); } } .mkt-today-tile--flash-signin { animation: mkt-tile-flash-signin 0.6s ease; } .mkt-today-tile--flash-done { animation: mkt-tile-flash-done 0.6s ease; } /* ── Notification mockup ──────────────────────────────────── */ .mkt-notif-mockup { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-height: 280px; } .mkt-notif-item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); background: var(--neutral-50); border-radius: var(--radius-md); border: 1px solid var(--border); opacity: 0; transform: translateX(20px); transition: opacity 480ms var(--ease-out), transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1); } .mkt-notif-item.in { opacity: 1; transform: translateX(0); } .mkt-notif-item.out { opacity: 0; transform: translateX(-20px); } .mkt-notif-icon { width: 32px; height: 32px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mkt-notif-icon-clean { background: var(--mint-100); color: var(--mint-700); } .mkt-notif-icon-rush { background: var(--coral-100); color: var(--coral-700); } .mkt-notif-icon-report { background: var(--sky-100); color: var(--sky-800); } .mkt-notif-icon-maint { background: var(--amber-100); color: var(--amber-700); } .mkt-notif-text { flex: 1; min-width: 0; } .mkt-notif-title { font-size: 12px; font-weight: 600; color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mkt-notif-body { font-size: 11px; color: var(--fg2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mkt-notif-time { font-size: 10px; color: var(--fg3); font-family: var(--font-mono); flex-shrink: 0; } /* ── Report picker mockup (Feature 03) ───────────────────── */ .mkt-report-picker { background: var(--neutral-0); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .mkt-report-picker-header { display: flex; align-items: baseline; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); } .mkt-report-picker-room { font-size: 13px; font-weight: 700; color: var(--fg1); } .mkt-report-picker-sub { font-size: 11px; color: var(--fg3); } .mkt-report-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); } .mkt-report-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: var(--space-2) var(--space-1); border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--neutral-0); cursor: default; transition: background 200ms, border-color 200ms, color 200ms, transform 200ms; text-align: center; } .mkt-report-btn i { width: 20px; height: 20px; color: var(--sky-600); flex-shrink: 0; transition: color 200ms; } .mkt-report-btn span { font-size: 10px; line-height: 1.25; color: var(--fg2); transition: color 200ms; } @keyframes mktTap { 0% { transform: scale(1); } 35% { transform: scale(0.92); } 70% { transform: scale(1.02); } 100% { transform: scale(1); } } .mkt-report-btn.is-tapped { background: var(--sky-50); border-color: var(--sky-300); animation: mktTap 350ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } .mkt-report-btn.is-tapped i { color: var(--sky-700); } .mkt-report-btn.is-tapped span { color: var(--sky-800); font-weight: 600; } .mkt-report-toast { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--mint-600); color: var(--neutral-0); border-radius: var(--radius-md); font-size: 12px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity 250ms, transform 250ms; pointer-events: none; } .mkt-report-toast.is-visible { opacity: 1; transform: translateY(0); } .mkt-report-toast i { width: 14px; height: 14px; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .mkt-report-btn { transition: background 0ms, border-color 0ms; } .mkt-report-btn.is-tapped { animation: none; } .mkt-report-toast { transition: none; } } /* ── Roles split (triggers + fixed stage) ─────────────────── */ .mkt-roles { background: var(--sky-50); } .mkt-roles-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-8); } .mkt-roles-hint { margin: var(--space-4) 0 0; font-size: 14px; color: var(--fg3); } .mkt-roles-split { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: var(--space-5); align-items: stretch; max-width: 1040px; margin: 0 auto; } /* Left: trigger list — tiles grow equally to fill the full panel height */ .mkt-roles-triggers { display: flex; flex-direction: column; justify-content: stretch; gap: 0; min-height: clamp(360px, 42vw, 420px); } /* Per-role accent wiring */ .mkt-role-trigger[data-accent="mint"], .mkt-role-panel[data-accent="mint"], .mkt-roles-split[data-accent="mint"] { --role-tint: var(--mint-50); --role-soft: var(--mint-100); --role-ink: var(--mint-700); --role-edge: var(--mint-300); } .mkt-role-trigger[data-accent="sky"], .mkt-role-panel[data-accent="sky"], .mkt-roles-split[data-accent="sky"] { --role-tint: var(--sky-50); --role-soft: var(--sky-100); --role-ink: var(--sky-700); --role-edge: var(--sky-300); } .mkt-role-trigger[data-accent="butter"], .mkt-role-panel[data-accent="butter"], .mkt-roles-split[data-accent="butter"] { --role-tint: var(--butter-50); --role-soft: var(--butter-200); --role-ink: var(--butter-700); --role-edge: var(--butter-300); } .mkt-role-trigger[data-accent="lilac"], .mkt-role-panel[data-accent="lilac"], .mkt-roles-split[data-accent="lilac"] { --role-tint: var(--lilac-50); --role-soft: var(--lilac-100); --role-ink: var(--lilac-700); --role-edge: var(--lilac-300); } .mkt-role-trigger { position: relative; flex: 1; width: 100%; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--neutral-0); border: 1px solid var(--border); border-left: 5px solid transparent; border-radius: 0; margin-top: -1px; text-align: left; cursor: pointer; font: inherit; color: var(--fg1); transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); } .mkt-role-trigger:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: 0; } .mkt-role-trigger:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .mkt-role-trigger.is-active { z-index: 2; background: var(--role-tint); border-color: var(--role-edge); border-left-color: var(--role-ink); border-right-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 4px 16px color-mix(in srgb, var(--role-edge) 18%, transparent); } /* Connector bridge: fills the column gap into the inflating panel */ .mkt-role-bridge { position: absolute; top: -1px; bottom: -1px; left: 100%; width: calc(var(--space-5) + 4px); background: var(--role-tint); border-top: 1px solid var(--role-edge); border-bottom: 1px solid var(--role-edge); transform: scaleX(0); transform-origin: left center; pointer-events: none; z-index: 3; transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); } .mkt-role-trigger.is-active .mkt-role-bridge { transform: scaleX(1); } @media (hover: hover) and (pointer: fine) { .mkt-role-trigger:not(.is-active):hover { background: var(--role-tint); filter: brightness(1.02); } } .mkt-role-trigger:focus-visible { outline: 2px solid var(--role-ink); outline-offset: 2px; } .mkt-role-index { font-family: var(--font-display); font-size: clamp(18px, 2.5vw, 28px); font-weight: 700; line-height: 1; color: var(--role-ink); opacity: 0.4; font-variant-numeric: tabular-nums; transition: opacity 200ms var(--ease-out); } .mkt-role-trigger.is-active .mkt-role-index { opacity: 1; } .mkt-role-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--role-soft); color: var(--role-ink); } .mkt-role-icon svg { width: 20px; height: 20px; } .mkt-role-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mkt-role-name { font-size: clamp(16px, 1.8vw, 20px); font-weight: 700; letter-spacing: -0.01em; color: var(--fg1); } .mkt-role-teaser { font-size: 12px; color: var(--fg3); } /* Right: transparent, space-reserving stage. Empty until a tile inflates. */ .mkt-roles-stage { position: relative; z-index: 0; min-height: clamp(360px, 42vw, 420px); } /* Each panel is the balloon that inflates from the hovered tile. */ .mkt-role-panel { position: absolute; inset: 0; background: var(--role-tint); border: 1px solid var(--role-edge); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 18px 48px color-mix(in srgb, var(--role-edge) 22%, transparent); opacity: 0; transform: scale(0.6); transform-origin: left center; /* JS overrides the Y per hovered tile */ transition: opacity 420ms var(--ease-out), transform 700ms cubic-bezier(0.25, 0.8, 0.25, 1); pointer-events: none; will-change: transform, opacity; } .mkt-role-panel.is-active { opacity: 1; transform: scale(1); pointer-events: auto; } /* Square the corner that lines up with the first/last tile edge */ .mkt-roles-split:has(.mkt-role-trigger:first-child.is-active) .mkt-role-panel.is-active { border-top-left-radius: 0; } .mkt-roles-split:has(.mkt-role-trigger:last-child.is-active) .mkt-role-panel.is-active { border-bottom-left-radius: 0; } .mkt-role-panel-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr); height: 100%; } .mkt-role-photo { order: 2; margin: 0; position: relative; overflow: hidden; background: var(--role-soft); } .mkt-role-photo img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; opacity: 0; transform: translateX(-20px) scale(1.06); transition: opacity 700ms var(--ease-out) 280ms, transform 850ms cubic-bezier(0.22, 1, 0.36, 1) 220ms; } .mkt-role-panel.is-active .mkt-role-photo img { opacity: 1; transform: none; } .mkt-role-detail { order: 1; height: 100%; padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; min-width: 0; } .mkt-role-detail-well { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); padding: 0; background: transparent; min-height: 0; } .mkt-role-headline { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--fg1); margin: 0; text-wrap: balance; } .mkt-role-list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; } .mkt-role-feat { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--neutral-0); border: 1px solid var(--role-edge); border-radius: var(--radius-md); min-height: 0; } .mkt-role-feat-title { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--fg1); } .mkt-role-feat-desc { font-size: 13px; line-height: 1.4; color: var(--fg3); } @media (max-width: 768px) { .mkt-roles-split { grid-template-columns: 1fr; } .mkt-roles-triggers { min-height: 0; justify-content: flex-start; padding: 0; gap: var(--space-3); } .mkt-roles-stage { min-height: clamp(320px, 70vw, 400px); } .mkt-role-panel-inner { grid-template-columns: 1fr; } /* Keep the image on top when stacked */ .mkt-role-photo { order: 0; } .mkt-role-detail { order: 0; height: auto; padding: var(--space-4); } .mkt-role-detail-well { flex: none; padding: 0; gap: var(--space-4); } .mkt-role-list { flex: none; gap: var(--space-3); } .mkt-role-feat { flex: none; padding: var(--space-3) var(--space-4); } .mkt-role-feat-title { font-size: 14px; } .mkt-role-feat-desc { font-size: 13px; } .mkt-role-photo img { min-height: 200px; max-height: 240px; } .mkt-role-trigger { padding: var(--space-4); gap: var(--space-3); } .mkt-role-bridge { display: none; } .mkt-role-trigger.is-active { border-right-color: var(--role-edge); border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); } .mkt-role-panel.is-active { border-top-left-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); } } @media (max-width: 480px) { .mkt-role-teaser { display: none; } } @media (prefers-reduced-motion: reduce) { .mkt-role-trigger, .mkt-role-bridge { transition: none; } .mkt-role-panel { transition: opacity 140ms linear; transform: none; } .mkt-role-panel.is-active { transform: none; } .mkt-role-photo img { transition: none; transform: none; opacity: 1; } } /* ── Testimonial ──────────────────────────────────────────── */ .mkt-testimonial { background: var(--neutral-50); } .mkt-testimonial-inner { max-width: 820px; margin: 0 auto; padding: 0 var(--space-6); } .mkt-testimonial-mark { position: absolute; font-family: var(--font-display); font-size: clamp(72px, 12vw, 120px); line-height: 1; color: var(--coral-300); user-select: none; pointer-events: none; } .mkt-testimonial-mark--open { top: 0; left: 0; transform-origin: bottom left; } .mkt-testimonial-mark--close { bottom: 0; right: 0; transform-origin: top right; } .js-on .mkt-testimonial-mark { opacity: 0; } .js-on .mkt-testimonial-mark--open { transform: scale(0.4) rotate(-12deg); } .js-on .mkt-testimonial-mark--close { transform: scale(0.4) rotate(12deg); } .js-on .mkt-testimonial-mark.in { opacity: 1; transform: scale(1) rotate(0deg); transition: opacity 0.7s var(--ease-out), transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); } .mkt-testimonial-quote-wrap { position: relative; padding: clamp(48px, 8vw, 72px) clamp(32px, 6vw, 56px) clamp(40px, 7vw, 64px) clamp(32px, 6vw, 56px); } .mkt-testimonial-quote { font-family: var(--font-display); font-size: clamp(22px, 3.5vw, 38px); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--fg1); margin: 0; padding: 0; position: relative; z-index: 1; font-style: italic; } .mkt-testimonial-quote-wrap + .mkt-testimonial-author { margin-top: var(--space-6); } .mkt-testimonial-author { display: flex; align-items: center; gap: var(--space-4); } .mkt-testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--sky-300), var(--coral-300)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--neutral-0); flex-shrink: 0; } .mkt-testimonial-name { font-weight: 600; font-size: 15px; color: var(--fg1); } .mkt-testimonial-bio { font-size: 13px; color: var(--fg3); margin: 0; } /* ── Final CTA block ──────────────────────────────────────── */ .mkt-final-cta { background: var(--sky-50); text-align: center; padding: clamp(80px, 14vw, 160px) var(--space-6); } .mkt-final-cta-heading { font-family: var(--font-display); font-size: clamp(60px, 9vw, 132px); font-weight: 900; line-height: 0.98; letter-spacing: -0.04em; color: var(--neutral-900); margin: 0 0 var(--space-5); } .mkt-final-cta-heading em { font-style: italic; font-weight: 300; color: var(--sky-700); font-variation-settings: 'opsz' 144; } .mkt-final-cta-sub { font-size: 18px; color: var(--fg2); margin: 0 0 var(--space-7); } .mkt-final-cta-actions { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; } /* ── Footer ───────────────────────────────────────────────── */ .mkt-footer { background: var(--neutral-100); border-top: 1px solid var(--border); padding: var(--space-7) 0; } .mkt-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; } .mkt-footer-brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--fg1); } .mkt-footer-brand img { height: 22px; width: auto; display: block; } .mkt-footer-tagline { font-size: 13px; color: var(--fg3); margin: 0; } .mkt-footer-links { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; } .mkt-footer-links a { font-size: 13px; color: var(--fg3); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } .mkt-footer-links a:hover { color: var(--fg1); } .mkt-footer-legal { font-size: 12px; color: var(--fg3); } @media (max-width: 680px) { .mkt-footer-inner { flex-direction: column; align-items: flex-start; padding: 0 var(--space-4); } } /* ── Feature band (dark full-width — Feature 04) ────────────── */ .mkt-feature-band { background: linear-gradient(160deg, var(--sky-900) 0%, var(--sky-800) 100%); padding: clamp(64px, 10vw, 120px) 0; } .mkt-feature-band-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; } @media (max-width: 860px) { .mkt-feature-band-inner { grid-template-columns: 1fr; gap: var(--space-7); } .mkt-feature-band-card { height: 380px; } } .mkt-feature-band-number { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--sky-300); } .mkt-feature-band-copy { display: flex; flex-direction: column; gap: var(--space-4); } .mkt-feature-band-title { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 56px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--neutral-0); margin: 0; } .mkt-feature-band-title em { color: var(--coral-300); font-style: italic; font-weight: 400; } .mkt-feature-band-sub { font-size: 16px; line-height: 1.65; color: var(--sky-200); max-width: 44ch; margin: 0; } .mkt-feature-band-visual { display: flex; flex-direction: column; } .mkt-feature-band-card { width: 100%; height: 460px; background: var(--neutral-0); border-radius: var(--radius-xl); box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06); overflow: hidden; display: flex; flex-direction: column; } /* ── Feature wide (asymmetric 60/40 — Feature 05) ───────────── */ .mkt-feature-wide { background: var(--sky-50); padding: clamp(64px, 10vw, 120px) 0; } .mkt-feature-wide-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-10); align-items: center; } @media (max-width: 860px) { .mkt-feature-wide-inner { grid-template-columns: 1fr; gap: var(--space-7); } } .mkt-feature-wide-copy { display: flex; flex-direction: column; gap: var(--space-4); } .mkt-wide-kicker { font-size: 16px; line-height: 1.65; color: var(--fg2); max-width: 44ch; margin: 0; } .mkt-wide-stats { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--border); } .mkt-wide-stat { display: flex; align-items: baseline; gap: var(--space-3); } .mkt-wide-stat-value { font-family: var(--font-mono); font-size: clamp(36px, 4.5vw, 52px); font-weight: 700; color: var(--sky-800); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; flex-shrink: 0; } .mkt-wide-stat-label { font-size: 13px; color: var(--fg2); font-weight: 500; } .mkt-wide-points { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--border); max-width: 420px; } .mkt-wide-point { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--neutral-0); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .mkt-wide-point-kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--sky-800); letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; } .mkt-wide-point-label { font-size: 13px; font-weight: 600; color: var(--fg2); text-align: right; } .mkt-feature-wide-visual { border-radius: var(--radius-xl); overflow: hidden; background: var(--neutral-0); border: 1px solid var(--border); box-shadow: var(--shadow-lg); will-change: transform; } /* ── Feature centered (phone centerstage — Feature 06) ──────── */ .mkt-feature-centered { background: var(--neutral-50); padding: clamp(64px, 10vw, 120px) 0; } .mkt-feature-centered-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-8); align-items: center; } @media (max-width: 1000px) { .mkt-feature-centered-inner { grid-template-columns: 1fr; gap: var(--space-6); } .mkt-feature-centered-phone { justify-self: center; } } .mkt-feature-centered-copy { display: flex; flex-direction: column; gap: var(--space-4); } .mkt-feature-centered-phone { position: relative; display: flex; align-items: center; justify-content: center; perspective: 1400px; perspective-origin: 50% 42%; transform-style: preserve-3d; isolation: isolate; min-height: 580px; } .mkt-centered-pills { display: flex; flex-direction: column; gap: var(--space-3); } .mkt-centered-pill { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--neutral-0); border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 13px; font-weight: 500; color: var(--fg1); } .mkt-centered-pill svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--sky-600); } /* ── "And there's more" feature breadth grid ─────────────────── */ .mkt-more-section { background: var(--neutral-50); padding: clamp(48px, 7vw, 80px) 0; border-top: 1px solid var(--border); } .mkt-more-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); } .mkt-more-header { text-align: center; margin-bottom: var(--space-8); } .mkt-more-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky-600); display: block; } .mkt-more-title { font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; color: var(--neutral-900); margin: var(--space-2) 0 0; } .mkt-more-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-5); } .mkt-more-card { grid-column: span 2; } /* 5 cards: 3 on row 1, 2 centered on row 2 */ .mkt-more-card:nth-child(4) { grid-column: 2 / span 2; } .mkt-more-card:nth-child(5) { grid-column: 4 / span 2; } @media (max-width: 960px) { .mkt-more-grid { grid-template-columns: repeat(2, 1fr); } .mkt-more-card, .mkt-more-card:nth-child(4), .mkt-more-card:nth-child(5) { grid-column: auto; } } @media (max-width: 480px) { .mkt-more-grid { grid-template-columns: 1fr; } } /* Icon chips — accent fills (referenced from HTML) */ .mkt-bento-icon-sky { background: var(--sky-100); color: var(--sky-700); } .mkt-bento-icon-coral { background: var(--coral-100); color: var(--coral-700); } .mkt-bento-icon-mint { background: var(--mint-100); color: var(--mint-700); } .mkt-bento-icon-butter { background: var(--butter-200); color: var(--butter-700); } .mkt-bento-icon-peri { background: var(--peri-100); color: var(--peri-700); } .mkt-bento-icon-lilac { background: var(--lilac-100); color: var(--lilac-700); } .mkt-more-card { --card-tint: var(--neutral-50); --card-shadow: var(--sky-300); background: color-mix(in srgb, var(--card-tint) 55%, var(--neutral-0)); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-5); display: grid; grid-template-columns: 48px 1fr; column-gap: var(--space-4); row-gap: var(--space-3); align-items: start; transition: box-shadow 280ms var(--ease-out), transform 280ms var(--ease-out), border-color 280ms var(--ease-out); cursor: default; will-change: transform; } .mkt-more-card[data-accent="butter"] { --card-tint: var(--butter-50); --card-shadow: var(--butter-300); } .mkt-more-card[data-accent="sky"] { --card-tint: var(--sky-50); --card-shadow: var(--sky-300); } .mkt-more-card[data-accent="mint"] { --card-tint: var(--mint-50); --card-shadow: var(--mint-300); } .mkt-more-card[data-accent="peri"] { --card-tint: var(--peri-50); --card-shadow: var(--peri-300); } .mkt-more-card[data-accent="coral"] { --card-tint: var(--coral-50); --card-shadow: var(--coral-300); } .mkt-more-card[data-accent="lilac"] { --card-tint: var(--lilac-50); --card-shadow: var(--lilac-300); } .mkt-more-card:hover { box-shadow: 0 14px 32px color-mix(in srgb, var(--card-shadow) 28%, transparent); transform: translateY(-3px); border-color: color-mix(in srgb, var(--card-shadow) 35%, var(--border)); } .mkt-more-card-icon { grid-column: 1; grid-row: 1; width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 280ms var(--ease-out); } .mkt-more-card:hover .mkt-more-card-icon { transform: rotate(-5deg) scale(1.05); } .mkt-more-card-icon svg { width: 22px; height: 22px; } .mkt-more-card-title { grid-column: 2; grid-row: 1; align-self: center; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg1); margin: 0; line-height: 1.3; } .mkt-more-card-body { grid-column: 1 / -1; grid-row: 2; font-size: 14px; line-height: 1.6; color: var(--fg2); margin: 0; } @media (prefers-reduced-motion: reduce) { .mkt-more-card { transition: box-shadow 280ms var(--ease-out), border-color 280ms var(--ease-out); } .mkt-more-card:hover { transform: none; } .mkt-more-card-icon { transition: none; } .mkt-more-card:hover .mkt-more-card-icon { transform: none; } } /* ── Hero feature ticker ─────────────────────────────────────── */ .mkt-hero-ticker { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); } .mkt-ticker-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--fg3); white-space: nowrap; } .mkt-ticker-item svg { flex-shrink: 0; } .mkt-ticker-sep { font-size: 12px; color: var(--border-strong); user-select: none; } /* ── Showcase — scroll-pinned feature reveal ─────────────── */ .mkt-bento { background: var(--neutral-50); } .mkt-bento-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-8); } .mkt-bento-title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--neutral-900); margin: var(--space-3) 0 0; } .mkt-bento-title-line { display: inline-block; white-space: nowrap; } /* ═══════════════════════════════════════════════════════════ STAGE — Curved-card scroll showcase (full-bleed) Punchy curved card on the left (one-sided right curve), white detail panel on the right, big 3D hero PNG bridges the seam. Card breathes continuously (mktBlobFloat) and does a dramatic morph + spin when crossing into the next feature (mktBlobMorphPulse, triggered by .is-morphing). ═══════════════════════════════════════════════════════════ */ .mkt-stage-section { padding-bottom: var(--space-12); } .mkt-stage-header-wrap { padding-bottom: var(--space-6); } /* Scroll wrapper: 6 features × 120vh of scroll time. Long enough that a fast wheel flick can't blast past a whole feature, and gives the hero arc-in / rest / drift-out scrub room to breathe. */ .mkt-stage-scroller { position: relative; height: 720vh; } /* Per-feature accent + blob shape. Driven by data-feature on .mkt-stage so a single attribute swap morphs the whole stage. Shapes tuned for the elongated off-screen-left card aspect. */ .mkt-stage[data-feature="0"] { --stage-bg: var(--sky-300); --stage-bg-soft: var(--sky-100); --stage-text: var(--sky-900); --stage-ink: var(--sky-700); --blob-shape: 50% 50% 60% 40% / 50% 60% 40% 50%; } .mkt-stage[data-feature="1"] { --stage-bg: var(--coral-300); --stage-bg-soft: var(--coral-100); --stage-text: var(--coral-900); --stage-ink: var(--coral-700); --blob-shape: 50% 50% 45% 55% / 60% 50% 50% 40%; } .mkt-stage[data-feature="2"] { --stage-bg: var(--mint-300); --stage-bg-soft: var(--mint-100); --stage-text: var(--mint-900); --stage-ink: var(--mint-700); --blob-shape: 50% 50% 55% 45% / 45% 55% 45% 55%; } .mkt-stage[data-feature="3"] { --stage-bg: var(--butter-300); --stage-bg-soft: var(--butter-100); --stage-text: var(--butter-900); --stage-ink: var(--butter-700); --blob-shape: 50% 50% 50% 50% / 55% 45% 55% 45%; } .mkt-stage[data-feature="4"] { --stage-bg: var(--peri-300); --stage-bg-soft: var(--peri-100); --stage-text: var(--peri-900); --stage-ink: var(--peri-700); --blob-shape: 50% 50% 60% 40% / 40% 50% 50% 60%; } .mkt-stage[data-feature="5"] { --stage-bg: var(--lilac-300); --stage-bg-soft: var(--lilac-100); --stage-text: var(--lilac-900); --stage-ink: var(--lilac-700); --blob-shape: 50% 50% 45% 55% / 55% 50% 50% 45%; } .mkt-stage { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; align-items: center; max-width: 1600px; margin: 0 auto; /* No left padding so the blob can hug the viewport edge */ padding: var(--space-8) clamp(20px, 5vw, 64px) var(--space-10) 0; /* CRITICAL: must be visible so the blob can extend past the stage box, and so the hero can drop in/out beyond the bounds. */ overflow: visible; } /* ── LEFT: giant blob anchored off-screen left ──────────── */ .mkt-stage-card { position: relative; height: clamp(480px, 78vh, 680px); /* Extends ~22vw past the viewport's left edge — the user only sees the right half of the blob, like a giant ball peeking in. */ margin-left: -22vw; background: var(--stage-bg); border-radius: var(--blob-shape); box-shadow: 0 40px 80px -24px color-mix(in srgb, var(--stage-bg) 55%, transparent), 0 18px 36px -16px rgba(42, 70, 86, 0.15); /* Transform composed from JS-set vars (driven continuously by scroll position) plus the per-feature morph pulse class. */ transform: rotate(var(--blob-rotate, 0deg)) scale(var(--blob-scale, 1)); transform-origin: 70% 50%; /* Slow + smooth transitions so colour and shape changes feel like the blob is "settling" into the new feature rather than snapping. */ transition: background-color 1100ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 1400ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 1100ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, background-color, border-radius; isolation: isolate; } .mkt-stage-card-inner { position: absolute; top: 0; bottom: 0; right: 0; /* Push content past the off-screen portion so it sits in the visible half of the blob. */ left: 22vw; padding: clamp(36px, 4vw, 64px) clamp(36px, 4vw, 64px) clamp(36px, 4vw, 64px) clamp(8px, 2vw, 24px); display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); z-index: 2; } /* Title + body share a single wrapper so JS animates them as one block on feature change (no per-element stagger that reads as stutter). */ .mkt-stage-text { display: flex; flex-direction: column; gap: var(--space-4); will-change: transform, opacity; } .mkt-stage-title { font-family: var(--font-display); font-size: clamp(44px, 5.4vw, 76px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--stage-text); margin: 0; white-space: pre-line; transition: color 600ms var(--ease-out); } .mkt-stage-body { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.5; color: var(--stage-text); opacity: 0.86; margin: 0; max-width: 520px; transition: color 600ms var(--ease-out); } /* ── 3D hero object — sits in top-right of the blob ────── Lives inside .mkt-stage-card so its position tracks the blob. Slight bleed past the right edge gives the "popping out of the blob" effect; JS handles the drop-in/exit-out animation between features. The base rotate(-6deg) gives it a baked-in 3D tilt. */ .mkt-stage-hero { position: absolute; top: 5%; right: -2%; width: clamp(195px, 22.5vw, 330px); min-height: clamp(165px, 21vw, 285px); z-index: 5; pointer-events: none; filter: drop-shadow(0 30px 42px rgba(42, 70, 86, 0.28)); transform: translateY(0) rotate(-6deg); transform-origin: top right; will-change: transform, opacity; /* No transition here — JS animates via Motion for full control of the drop-in / exit-out timing. */ } .mkt-stage-hero-glb, .mkt-stage-hero-img { display: block; width: 100%; height: clamp(165px, 21vw, 285px); } .mkt-stage-hero-glb { --poster-color: transparent; background: transparent; overflow: hidden; } /* Hide model-viewer’s built-in loading bar (thin gray line during GLB load). */ .mkt-stage-hero-glb::part(default-progress-bar), .mkt-stage-hero-glb::part(default-progress-mask) { display: none; } .mkt-stage-hero-glb:not(.is-model-ready) { visibility: hidden; } .mkt-stage-hero-img { object-fit: contain; } .mkt-stage-hero-glb[hidden], .mkt-stage-hero-img[hidden] { display: none; } /* ── RIGHT: white detail panel ──────────────────────────── */ .mkt-stage-detail { position: relative; height: clamp(420px, 70vh, 620px); display: flex; align-items: center; justify-content: center; overflow: visible; } .mkt-detail-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px) scale(0.985); pointer-events: none; transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out); will-change: opacity, transform; } .mkt-detail-panel.is-active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .mkt-detail-panel[data-detail="1"] { overflow: visible; } .mkt-detail-placeholder { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8); border-radius: var(--radius-2xl); background: var(--neutral-0); border: 1px dashed var(--border); color: var(--fg3); text-align: center; min-width: 320px; } .mkt-placeholder-icon { width: 36px; height: 36px; color: var(--neutral-400); } .mkt-detail-mobile-hero { display: flex; align-items: center; justify-content: center; width: 100%; padding: var(--space-6); } .mkt-detail-hero-glb { display: block; width: clamp(220px, 32vw, 320px); height: clamp(220px, 32vw, 320px); --poster-color: transparent; background: transparent; overflow: hidden; } .mkt-detail-hero-glb::part(default-progress-bar), .mkt-detail-hero-glb::part(default-progress-mask) { display: none; } /* ── Team Messaging mockup (Feature 2) ─────────────────── "Connected team across the hostel": three cut-out staff photos anchored at different points in the right panel, linked by thin SVG lines that draw themselves in, with a mint pulse-dot traveling along each line every few seconds. Visually says "messages flying between coordinated team members," not "we have a chat box." Graceful degradation: each has an onerror that removes its parent .mkt-team-node from the DOM if the file isn't there yet. The :has() rules below hide any SVG line whose endpoint node was removed, so the composition stays clean while photos are still being added one at a time. All animations are gated to .mkt-detail-panel[data-detail="2"].is-active so nothing burns CPU on hidden panels (mirrors the Feature 1 pattern at ~line 2660). */ .mkt-team-net { position: relative; width: 100%; height: 100%; min-height: 380px; } /* SVG layer sits behind the photos and fills the container so the 0..100 viewBox coordinates map straight onto the node positions. */ .mkt-team-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; } .mkt-team-line { fill: none; stroke: var(--mint-500); stroke-width: 0.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0.55; vector-effect: non-scaling-stroke; } .mkt-team-pulse { fill: var(--mint-500); opacity: 0; filter: drop-shadow(0 0 4px var(--mint-500)); } /* Each pulse follows the same curve as its visible line. Coordinates MUST match the in landing.html (Feature 2 block) so the dot traces the visible curve exactly. If you change a path, update both places. */ .mkt-team-pulse--a { offset-path: path("M17,78 Q45,28 81,18"); } .mkt-team-pulse--b { offset-path: path("M81,18 Q78,54 64,86"); } .mkt-team-pulse--c { offset-path: path("M64,86 Q38,83 17,78"); } /* ── Person nodes ────────────────────────────────────── */ .mkt-team-node { position: absolute; z-index: 2; margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); opacity: 0; transform: translateY(12px) scale(0.96); will-change: opacity, transform; } /* Scalene triangle: HK (lower-left), FD (upper-right), OF (lower-center gap). Widths intentionally NOT equal (26 / 28 / 22) so the composition reads as a real arrangement, not a wireframe with three identical discs. FD is largest as the primary focal point, OF smallest. */ .mkt-team-node--hk { left: 4%; bottom: 10%; width: 26%; } .mkt-team-node--fd { right: 5%; top: 4%; width: 28%; } .mkt-team-node--of { left: 58%; bottom: 2%; width: 22%; } /* Circular framed portrait. The photo files are already square-cropped around the face at asset-prep time (see scripts in DEPLOY_TO_AWS or docs/) so we just enforce a 1:1 aspect-ratio here and the face lands centered. Ring is built with stacked box-shadows (which follow border-radius), not `filter: drop-shadow` (which would render the shadow on the rectangular pixel boundary, not the circle). */ .mkt-team-photo { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; object-position: center top; border-radius: 50%; background: var(--neutral-0); box-shadow: 0 0 0 3px var(--neutral-0), 0 0 0 5px var(--mint-500), 0 14px 24px rgba(42, 70, 86, 0.20), 0 4px 6px rgba(42, 70, 86, 0.08); pointer-events: none; user-select: none; } .mkt-team-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--mint-100); color: var(--mint-500); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } /* ── Graceful degradation when nodes are missing ────── If the onerror removed a node from the DOM, hide any SVG line + pulse whose endpoint depends on that node. As the team adds more cut-out PNGs, more lines and pulses light up automatically — no code change required. */ .mkt-team-net:not(:has(.mkt-team-node--hk)) .mkt-team-line--a, .mkt-team-net:not(:has(.mkt-team-node--fd)) .mkt-team-line--a, .mkt-team-net:not(:has(.mkt-team-node--hk)) .mkt-team-pulse--a, .mkt-team-net:not(:has(.mkt-team-node--fd)) .mkt-team-pulse--a { display: none; } .mkt-team-net:not(:has(.mkt-team-node--fd)) .mkt-team-line--b, .mkt-team-net:not(:has(.mkt-team-node--of)) .mkt-team-line--b, .mkt-team-net:not(:has(.mkt-team-node--fd)) .mkt-team-pulse--b, .mkt-team-net:not(:has(.mkt-team-node--of)) .mkt-team-pulse--b { display: none; } .mkt-team-net:not(:has(.mkt-team-node--of)) .mkt-team-line--c, .mkt-team-net:not(:has(.mkt-team-node--hk)) .mkt-team-line--c, .mkt-team-net:not(:has(.mkt-team-node--of)) .mkt-team-pulse--c, .mkt-team-net:not(:has(.mkt-team-node--hk)) .mkt-team-pulse--c { display: none; } /* While only one node is present, switch the container to flex so the single figure centers cleanly without fighting the entrance keyframe's `transform` (which would override any translate-based centering). Once a second node ships, this rule no longer matches and the absolute-positioned anchors above take over again. */ .mkt-team-net:not(:has(.mkt-team-node--hk)):not(:has(.mkt-team-node--of)), .mkt-team-net:not(:has(.mkt-team-node--fd)):not(:has(.mkt-team-node--of)), .mkt-team-net:not(:has(.mkt-team-node--hk)):not(:has(.mkt-team-node--fd)) { display: flex; align-items: center; justify-content: center; } .mkt-team-net:not(:has(.mkt-team-node--hk)):not(:has(.mkt-team-node--of)) .mkt-team-node, .mkt-team-net:not(:has(.mkt-team-node--fd)):not(:has(.mkt-team-node--of)) .mkt-team-node, .mkt-team-net:not(:has(.mkt-team-node--hk)):not(:has(.mkt-team-node--fd)) .mkt-team-node { position: relative; inset: auto; top: auto; right: auto; bottom: auto; left: auto; width: min(60%, 320px); } /* ── Entrance animations (panel.is-active only) ───────── */ @keyframes mkt-team-node-in { 0% { opacity: 0; transform: translateY(14px) scale(0.94); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes mkt-team-line-draw { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } } @keyframes mkt-team-pulse-run { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } .mkt-detail-panel[data-detail="2"].is-active .mkt-team-node { animation: mkt-team-node-in 520ms var(--ease-out) both; } .mkt-detail-panel[data-detail="2"].is-active .mkt-team-node--hk { animation-delay: 120ms; } .mkt-detail-panel[data-detail="2"].is-active .mkt-team-node--fd { animation-delay: 280ms; } .mkt-detail-panel[data-detail="2"].is-active .mkt-team-node--of { animation-delay: 440ms; } .mkt-detail-panel[data-detail="2"].is-active .mkt-team-line { animation: mkt-team-line-draw 700ms var(--ease-out) both; } .mkt-detail-panel[data-detail="2"].is-active .mkt-team-line--a { animation-delay: 260ms; } .mkt-detail-panel[data-detail="2"].is-active .mkt-team-line--b { animation-delay: 420ms; } .mkt-detail-panel[data-detail="2"].is-active .mkt-team-line--c { animation-delay: 580ms; } .mkt-detail-panel[data-detail="2"].is-active .mkt-team-pulse { animation: mkt-team-pulse-run 3200ms linear infinite; } .mkt-detail-panel[data-detail="2"].is-active .mkt-team-pulse--a { animation-delay: 1100ms; } .mkt-detail-panel[data-detail="2"].is-active .mkt-team-pulse--b { animation-delay: 2166ms; } .mkt-detail-panel[data-detail="2"].is-active .mkt-team-pulse--c { animation-delay: 3233ms; } /* ── Cross-device family mockup (Feature 5) ─────────────── "Same app, every device": back-layered desktop monitor, mid-layer tablet, front-layer phone — all sharing one lilac highlight that anchors "Room 312" across the three surfaces, plus a single lilac sync pulse riding a curve from phone → tablet → monitor on a slow loop. The cross-device story is unique to this slide; every other detail panel renders a single surface. Each device sets its own --tilt custom property so a single `mkt-dv-rise` keyframe can animate all three to their final rotated resting state without three separate keyframes (the variable is resolved per-element at animation time, so each device interpolates to its own tilt). Path coordinates in the .mkt-dv-sync-pulse offset-path MUST match the in landing.html so the dot traces the visible curve exactly. If you change a path, update both places. All animations are gated to .mkt-detail-panel[data-detail="5"].is-active so hidden panels don't burn CPU (mirrors the Feature 2 pattern at ~line 2281). */ .mkt-dv-frame { position: relative; width: 100%; height: 100%; min-height: 380px; /* isolate so the halo's filter:blur can't leak onto sibling slides */ isolation: isolate; } /* Soft lilac radial wash that sits behind the cluster and gives the composition the "light source" glassmorphism needs. Pure static gradient — no animation, so no reduced-motion override required. z-index: 0 keeps it below the devices (z 1-4) and the sync layer (z 2). Containment: positive inset shrinks the bloom box so it can never paint outside the cluster area, and the gradient fades to transparent inside the halo's own bounds (transparent 48%). The previous negative inset + wide 62% falloff bled lilac across the whole slide and past the frame edge. */ .mkt-dv-halo { position: absolute; inset: 12% 10%; z-index: 0; pointer-events: none; background: radial-gradient( ellipse at 40% 60%, var(--lilac-100) 0%, var(--lilac-50) 24%, transparent 48% ); /* Lower opacity so the halo reads as a backdrop cue rather than a dominant lilac wash competing with the devices. */ opacity: 0.55; filter: blur(2px); } /* SVG sync layer sits between the back devices and the foreground phone so the trail visually weaves through the cluster. */ .mkt-dv-sync { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; pointer-events: none; } /* Visible trail thread — was a hairline, now a glowing dashed line so the connection between the devices reads intentionally. The drop-shadow filter lifts it off the white background. */ .mkt-dv-sync-line { fill: none; stroke: var(--lilac-500); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 4 6; stroke-dashoffset: 100; opacity: 0.55; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px var(--lilac-500)); } /* Comet base — all three circles ride the same offset-path. Each modifier sets its own --peak-opacity, which the @keyframes reads via var() at the element level, so the lead is full-bright and the trail dots fade behind it. This is ONE animation conceptually (single keyframe definition); we just have three SVG elements riding it with staggered delays to draw a comet shape. */ .mkt-dv-sync-pulse { fill: var(--lilac-500); opacity: 0; filter: drop-shadow(0 0 4px var(--lilac-500)); offset-path: path("M22,78 Q42,72 62,46 T50,14"); } .mkt-dv-sync-pulse--lead { --peak-opacity: 1; } .mkt-dv-sync-pulse--mid { --peak-opacity: 0.6; } .mkt-dv-sync-pulse--tail { --peak-opacity: 0.35; } /* ── Back layer: desktop monitor ─────────────────────── */ .mkt-dv-monitor { --tilt: -3deg; position: absolute; top: 4%; left: 18%; width: 64%; z-index: 1; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(14px) rotate(var(--tilt)) scale(0.96); will-change: opacity, transform; } .mkt-dv-monitor-screen { width: 100%; aspect-ratio: 16 / 10; background: var(--neutral-0); /* Real monitor bezel: 5px on three sides, fatter 10px chin at the bottom for the iMac-style logo strip. Replaces the previous 1px hairline border + 2px outer halo, which read as "white card with a faint outline" rather than as a screen housing. */ border: 5px solid var(--neutral-300); border-bottom-width: 10px; border-radius: 10px; padding: 5% 6% 6%; display: flex; flex-direction: column; gap: 4%; box-shadow: var(--shadow-md); /* Glass cues: backdrop-filter so the halo wash visibly diffuses through the bezel; position+isolation hosts the ::before light reflection without leaking. */ position: relative; isolation: isolate; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .mkt-dv-monitor-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 32% ); border-radius: inherit; z-index: 1; } /* Tiny webcam lens centered on the top bezel — the device identity cue that says "monitor", not just "rounded white rectangle". */ .mkt-dv-monitor-screen::after { content: ""; position: absolute; top: -3.5px; left: 50%; width: 2px; height: 2px; background: var(--neutral-600); border-radius: 50%; transform: translateX(-50%); z-index: 2; } /* Top chrome — 3 traffic-light dots + clock readout. Sits inline above the board so the screen reads as a real desktop window. */ .mkt-dv-monitor-chrome { display: flex; align-items: center; gap: 4px; padding-bottom: 4%; border-bottom: 1px solid var(--neutral-100); position: relative; z-index: 2; } .mkt-dv-traffic { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .mkt-dv-traffic--r { background: var(--coral-300); } .mkt-dv-traffic--y { background: var(--butter-300, var(--butter-100)); } .mkt-dv-traffic--g { background: var(--mint-300); } .mkt-dv-monitor-clock { margin-left: auto; font-size: 8px; font-weight: 600; color: var(--fg3); letter-spacing: 0.04em; font-feature-settings: "tnum"; } /* Neck — trapezoid wider at the base, narrower at the top, so it reads as a monitor stand profile. Uses --neutral-400 (one shade darker than the bezel) for visible contrast against both the bezel above it and the slide background. */ .mkt-dv-monitor-stand { width: 22%; height: 7%; background: var(--neutral-400); margin-top: 1%; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0% 100%); } /* Base — wider and slightly raised off the slide so the monitor reads as standing on a desk rather than floating. The asymmetric radius (pill on top, gentle curve on bottom) is the silhouette real desktop stands give. */ .mkt-dv-monitor-base { width: 42%; height: 4%; background: var(--neutral-400); border-radius: 999px 999px 4px 4px; margin-top: 0; /* Matches the neutral rgba pattern used elsewhere in this file (see rgba(42, 70, 86, X) shadows). */ box-shadow: 0 2px 4px rgba(42, 70, 86, 0.06); } .mkt-dv-board { width: 100%; flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6%; position: relative; z-index: 2; } .mkt-dv-tile { background: var(--neutral-100); border-radius: var(--radius-sm); position: relative; display: flex; align-items: flex-start; justify-content: space-between; padding: 6%; } .mkt-dv-tile--clean { background: var(--mint-100); } .mkt-dv-tile--checkout { background: var(--coral-100); } .mkt-dv-tile--active { background: var(--lilac-200); /* Concentric ring: a tight inset stroke on the active fill plus a soft outer halo. Reads as "this tile is the one to look at" with no extra animation. */ box-shadow: inset 0 0 0 1.5px var(--lilac-500), 0 0 0 2px var(--lilac-200); } /* Tiny tile content — small enough that it reads as "room metadata" without competing with the active-tile glow. */ .mkt-dv-tile-num { font-size: 7px; font-weight: 700; color: var(--fg3); letter-spacing: 0.04em; font-feature-settings: "tnum"; line-height: 1; } .mkt-dv-tile--active .mkt-dv-tile-num { color: var(--lilac-700); } .mkt-dv-tile-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--neutral-300); flex-shrink: 0; } .mkt-dv-tile--clean .mkt-dv-tile-dot { background: var(--mint-500); } .mkt-dv-tile--checkout .mkt-dv-tile-dot { background: var(--coral-500); } .mkt-dv-tile--active .mkt-dv-tile-dot { background: var(--lilac-700); } /* ── Mid layer: tablet ──────────────────────────────── */ .mkt-dv-tablet { --tilt: 2deg; position: absolute; top: 36%; right: 4%; width: 38%; z-index: 3; opacity: 0; transform: translateY(14px) rotate(var(--tilt)) scale(0.96); will-change: opacity, transform; } .mkt-dv-tablet-screen { width: 100%; aspect-ratio: 4 / 3; background: var(--neutral-0); /* Real iPad-class bezel: 6px chunky warm-grey body wrapping the screen on all sides. Previous 2px hairline read as a thin card outline; this thickness + --neutral-400 reads as the tablet itself. */ border: 6px solid var(--neutral-400); border-radius: 16px; padding: 7% 7%; display: flex; flex-direction: column; gap: 6%; box-shadow: var(--shadow-lg); /* Glass cues — see .mkt-dv-monitor-screen for rationale. */ position: relative; isolation: isolate; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .mkt-dv-tablet-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 32% ); border-radius: inherit; z-index: 1; } /* Tiny front-facing camera centered on the top bezel — the same identity cue used on the monitor, scaled down for the tablet bezel. Darker than the bezel itself so it reads as a lens. */ .mkt-dv-tablet-screen::after { content: ""; position: absolute; top: -4px; left: 50%; width: 2px; height: 2px; background: var(--neutral-700); border-radius: 50%; transform: translateX(-50%); z-index: 2; } /* Header strip — date kicker on the left, three staff avatars on the right. Reads as "today's roster" rather than a generic schedule. The flex layout puts the avatar stack against the right edge so the eye finds it without competing with the day strip. */ .mkt-dv-tablet-header { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; } .mkt-dv-tablet-kicker { font-size: 8px; font-weight: 600; color: var(--fg3); letter-spacing: 0.04em; text-transform: uppercase; } .mkt-dv-avatar-stack { display: flex; align-items: center; } .mkt-dv-avatar-stack > * + * { /* Overlap with a 1px white ring so the stack reads as a chip pile. */ margin-left: -3px; } .mkt-dv-avatar { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--neutral-0); flex-shrink: 0; } .mkt-dv-avatar--a { background: var(--lilac-500); } .mkt-dv-avatar--b { background: var(--mint-500); } .mkt-dv-avatar--c { background: var(--coral-500); } .mkt-dv-day-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4%; position: relative; z-index: 2; } .mkt-dv-day { height: 8px; background: var(--neutral-100); border-radius: var(--radius-sm); } .mkt-dv-day.is-today { background: var(--lilac-200); box-shadow: inset 0 0 0 1px var(--lilac-500); } .mkt-dv-shift-row { display: flex; align-items: center; height: 14px; background: var(--neutral-100); border-radius: var(--radius-sm); overflow: hidden; position: relative; z-index: 2; } /* Small avatar dot at the start of each row — owner of that shift. Sits inline (not absolute) so the block automatically reflows to start after it. */ .mkt-dv-shift-avatar { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-left: 3px; margin-right: 4px; } .mkt-dv-shift-avatar--a { background: var(--lilac-500); } .mkt-dv-shift-avatar--b { background: var(--mint-500); } .mkt-dv-shift-avatar--c { background: var(--coral-500); } .mkt-dv-shift-block { height: 100%; width: 60%; background: var(--neutral-200); border-left: 2px solid var(--neutral-400); } .mkt-dv-shift-block--lilac { background: var(--lilac-300); border-left-color: var(--lilac-500); width: 68%; } .mkt-dv-shift-block--neutral { width: 46%; } .mkt-dv-shift-block--neutral-wide { width: 74%; } /* ── Front layer: phone (hero) ──────────────────────── */ .mkt-dv-phone { --tilt: -8deg; position: absolute; bottom: 4%; left: 6%; width: 24%; z-index: 4; display: flex; flex-direction: column; background: var(--neutral-900); border-radius: 18px; padding: 6px; opacity: 0; transform: translateY(14px) rotate(var(--tilt)) scale(0.96); will-change: opacity, transform; /* Composite shadow: a neutral lift (var(--shadow-lg)) plus two lilac-tinted layers picking up the slide's accent. Lilac-700 RGB(127,87,112) matches the project's existing rgba shadow pattern (see rgba(42,70,86,X) elsewhere in this file). */ box-shadow: var(--shadow-lg), 0 18px 28px rgba(127, 87, 112, 0.16), 0 4px 8px rgba(127, 87, 112, 0.10); } /* Side power button — small dark strip on the right edge, sized to match real phone hardware proportions. Adds the last bit of device identity now that the tablet bezel is also dark. */ .mkt-dv-phone::after { content: ""; position: absolute; right: -1.5px; top: 28%; width: 1.5px; height: 12%; background: var(--neutral-700); border-radius: 0 1px 1px 0; pointer-events: none; } .mkt-dv-phone-notch { width: 28%; height: 4px; background: var(--neutral-700); border-radius: 999px; align-self: center; margin: 4px 0; } .mkt-dv-phone-screen { flex: 1; background: var(--neutral-0); border-radius: 12px; padding: 8px 8px 6px; display: flex; flex-direction: column; gap: 6px; min-height: 200px; /* Glass cues — see .mkt-dv-monitor-screen for rationale. The phone keeps its solid dark bezel so it stays the visual anchor; only the screen surface picks up the reflection cue. */ position: relative; isolation: isolate; } .mkt-dv-phone-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 32% ); border-radius: inherit; z-index: 1; } /* All inline content inside the screen sits above the reflection */ .mkt-dv-phone-statusbar, .mkt-dv-phone-header, .mkt-dv-phone-card, .mkt-dv-phone-tabbar { position: relative; z-index: 2; } /* Status bar — clock left, signal/wifi/battery right. Sized deliberately tiny so it reads as iOS chrome rather than UI copy. */ .mkt-dv-phone-statusbar { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; } .mkt-dv-phone-clock { font-size: 8px; font-weight: 700; color: var(--fg1); font-feature-settings: "tnum"; } .mkt-dv-phone-statusicons { display: flex; align-items: center; gap: 3px; color: var(--fg2); } .mkt-dv-icon-signal { fill: currentColor; } .mkt-dv-icon-wifi { color: currentColor; stroke: currentColor; } .mkt-dv-battery { position: relative; width: 14px; height: 7px; border: 1px solid var(--fg2); border-radius: 2px; padding: 1px; display: flex; align-items: center; } .mkt-dv-battery::after { /* Battery cap */ content: ""; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); width: 1px; height: 3px; background: var(--fg2); border-radius: 0 1px 1px 0; } .mkt-dv-battery-fill { display: block; width: 65%; height: 100%; background: var(--mint-500); border-radius: 1px; } .mkt-dv-phone-header { display: flex; flex-direction: column; gap: 2px; } .mkt-dv-phone-title { font-size: 11px; font-weight: 700; color: var(--fg1); letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 4px; } .mkt-dv-phone-sub { font-size: 9px; color: var(--fg3); } /* Static lilac live-dot beside the title — no animation. The active card's pulse remains the one looping cue on the phone. */ .mkt-dv-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lilac-500); box-shadow: 0 0 0 2px var(--lilac-100); flex-shrink: 0; } .mkt-dv-phone-card { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: var(--radius-md); background: var(--neutral-100); border: 1px solid var(--border); } .mkt-dv-phone-card--active { background: var(--lilac-50); border-color: var(--lilac-300); box-shadow: 0 0 0 1px var(--lilac-300); } .mkt-dv-pill { display: inline-flex; align-items: center; align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--lilac-200); color: var(--lilac-700); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .mkt-dv-pill--ghost { background: var(--neutral-100); color: var(--fg3); } .mkt-dv-timer { font-size: 12px; font-weight: 700; color: var(--lilac-700); font-feature-settings: "tnum"; } .mkt-dv-card-label { font-size: 10px; font-weight: 600; color: var(--fg2); } .mkt-dv-phone-home { width: 40%; height: 3px; background: var(--neutral-400); border-radius: 999px; align-self: center; margin-top: 4px; margin-bottom: 2px; } /* Bottom tab bar — 3 icons evenly spaced, top-edge separator. The `margin-top: auto` pins it to the bottom of the flex screen so the cards float at the top regardless of content height. */ .mkt-dv-phone-tabbar { display: flex; align-items: center; justify-content: space-around; padding: 5px 4px 2px; margin-top: auto; border-top: 1px solid var(--neutral-100); } .mkt-dv-tab-icon { color: var(--neutral-400); display: inline-flex; } .mkt-dv-tab-icon.is-active { color: var(--lilac-500); } /* ── Entrance + loop animations (panel.is-active only) ─ */ @keyframes mkt-dv-rise { 0% { opacity: 0; transform: translateY(14px) rotate(var(--tilt)) scale(0.96); } 100% { opacity: 1; transform: translateY(0) rotate(var(--tilt)) scale(1); } } @keyframes mkt-dv-card-pulse { 0%, 100% { box-shadow: 0 0 0 1px var(--lilac-300); } 50% { box-shadow: 0 0 0 3px var(--lilac-300), 0 0 14px var(--lilac-200); } } @keyframes mkt-dv-line-draw { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } } @keyframes mkt-dv-pulse-travel { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: var(--peak-opacity, 1); } 90% { opacity: var(--peak-opacity, 1); } 100% { offset-distance: 100%; opacity: 0; } } .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-monitor, .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-tablet, .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-phone { animation: mkt-dv-rise 520ms var(--ease-out) both; } .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-monitor { animation-delay: 80ms; } .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-tablet { animation-delay: 220ms; } .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-phone { animation-delay: 360ms; } .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-phone-card--active { animation: mkt-dv-card-pulse 2.4s ease-in-out 800ms infinite; } .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-sync-line { animation: mkt-dv-line-draw 900ms var(--ease-out) 600ms both; } .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-sync-pulse { animation: mkt-dv-pulse-travel 4.8s ease-in-out 1500ms infinite; } /* Stagger the comet's trailing dots BEHIND the lead. A later start means the trailing circle is at an earlier offset-distance at the same wall-clock time, so it visually sits behind on the path. */ .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-sync-pulse--lead { animation-delay: 1500ms; } .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-sync-pulse--mid { animation-delay: 1620ms; } .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-sync-pulse--tail { animation-delay: 1740ms; } /* ── Analytics dashboard mockup (Feature 4) ──────────────── Built around primitives that are deliberately distinct from Features 1, 2, and 3 (which all moved an element along a path). Here the animation reads as "data resolving into shape": • a radial gauge arc fills clockwise via stroke-dashoffset • integer KPIs tick up via @property --n + counter() (no JS) • bars/tiles wipe up vertically with a stagger • a sparkline draws itself, dot pops in • the +18% delta chip rises with a 3-dot sparkle burst Loop period is 5400ms to match Features 1 & 3 so the showcase stays rhythmically aligned. */ /* @property is required for the count-up trick: an animated custom property of integer type, fed into counter() so the rendered number ticks smoothly with no JS. Browsers without support fall back to the static 0 visible in markup, which our reduced-motion block also forces. */ @property --n { syntax: ''; inherits: false; initial-value: 0; } .mkt-an-frame { width: min(100%, 460px); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-xl); background: var(--neutral-0); border: 1px solid var(--border); box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--peri-500) 22%, transparent), var(--shadow-sm); } .mkt-an-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .mkt-an-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); } .mkt-an-delta { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--peri-100) 70%, transparent); color: var(--peri-700); font-size: 11px; font-weight: 600; opacity: 0; transform: translateY(6px); } .mkt-an-delta-icon { width: 12px; height: 12px; flex-shrink: 0; } .mkt-an-delta-text { line-height: 1; } .mkt-an-sparkle { position: absolute; inset: 0; pointer-events: none; } .mkt-an-sparkle-dot { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; margin-top: -2px; margin-left: -2px; border-radius: var(--radius-pill); background: var(--peri-500); opacity: 0; transform: translate(0px, 0px) scale(0); --burst-x: 0px; --burst-y: 0px; } /* Hero radial gauge. `pathLength="100"` on the arc normalises stroke math: dasharray=100 means one dash spans the full circle, so dashoffset=100 hides it and dashoffset=8 shows 92% (the "On-time turnover" target). The SVG is rotated -90deg so the arc starts at 12 o'clock; the centre text sits in a sibling div so it stays upright. */ .mkt-an-gauge { position: relative; width: 180px; height: 180px; margin: var(--space-2) auto 0; } .mkt-an-gauge-svg { width: 100%; height: 100%; transform: rotate(-90deg); } .mkt-an-gauge-track { fill: none; stroke: var(--neutral-200); stroke-width: 8; } .mkt-an-gauge-arc { fill: none; stroke: var(--peri-500); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; } .mkt-an-gauge-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; } .mkt-an-gauge-value { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--font-sans); font-size: 36px; font-weight: 700; color: var(--fg1); line-height: 1; font-variant-numeric: tabular-nums; } .mkt-an-gauge-unit { font-size: 18px; font-weight: 600; color: var(--peri-700); } .mkt-an-gauge-label { font-size: 11px; font-weight: 500; color: var(--fg3); letter-spacing: 0.02em; margin-top: 2px; } .mkt-an-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); } .mkt-an-tile { padding: var(--space-3); border-radius: var(--radius-md); background: var(--neutral-50); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; opacity: 0; transform: translateY(8px); } .mkt-an-tile-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg3); } .mkt-an-tile-value { display: inline-flex; align-items: baseline; gap: 0; font-size: 22px; font-weight: 700; color: var(--fg1); line-height: 1; font-variant-numeric: tabular-nums; } .mkt-an-tile-value small { font-size: 12px; font-weight: 600; color: var(--fg3); margin-left: 2px; } .mkt-an-tile-sep { font-weight: 700; } /* Empty span whose ::after renders the live integer via counter(). Animating @property --n updates the counter on every paint, which is what gives the smooth tick-up. */ .mkt-an-num { --n: 0; counter-reset: an-num var(--n); opacity: 0; } .mkt-an-num::after { content: counter(an-num); } .mkt-an-spark { width: 100%; height: 36px; display: block; margin-top: calc(-1 * var(--space-2)); } .mkt-an-spark-line { fill: none; stroke: var(--peri-500); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; } .mkt-an-spark-dot { fill: var(--peri-500); opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; } /* Active-panel hooks. Each piece has its own animation but they share the 5400ms period; staggered start times come from `animation-delay`, not from changing the cycle length. The custom-property selectors `[style*="--tile-i: 0"]` etc. read the inline marker on each tile to drive the stagger. */ .mkt-detail-panel[data-detail="4"].is-active .mkt-an-gauge-arc { animation: mkt-an-arc-fill 5400ms var(--ease-out) infinite; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-gauge-centre .mkt-an-num { animation: mkt-an-num-tick-hero 5400ms var(--ease-out) infinite; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-tile { animation: mkt-an-tile-rise 5400ms var(--ease-out) infinite; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-tile[style*="--tile-i: 0"] { animation-delay: 0ms; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-tile[style*="--tile-i: 1"] { animation-delay: 120ms; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-tile[style*="--tile-i: 2"] { animation-delay: 240ms; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-tile .mkt-an-num { animation: mkt-an-num-tick 5400ms var(--ease-out) infinite; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-tile[style*="--tile-i: 0"] .mkt-an-num { animation-delay: 0ms; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-tile[style*="--tile-i: 1"] .mkt-an-num { animation-delay: 120ms; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-tile[style*="--tile-i: 2"] .mkt-an-num { animation-delay: 240ms; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-spark-line { animation: mkt-an-spark-draw 5400ms var(--ease-out) infinite; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-spark-dot { animation: mkt-an-spark-dot-pop 5400ms cubic-bezier(0.34, 1.56, 0.64, 1) infinite; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-delta { animation: mkt-an-delta-rise 5400ms var(--ease-out) infinite; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-sparkle-dot { animation: mkt-an-sparkle-burst 5400ms var(--ease-out) infinite; } /* Three dots burst out at slightly different angles so it reads as sparkle rather than a directional arrow. */ .mkt-detail-panel[data-detail="4"].is-active .mkt-an-sparkle-dot--1 { --burst-x: 14px; --burst-y: -8px; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-sparkle-dot--2 { --burst-x: -10px; --burst-y: -12px; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-sparkle-dot--3 { --burst-x: 2px; --burst-y: 14px; } @keyframes mkt-an-arc-fill { 0% { stroke-dashoffset: 100; } 10% { stroke-dashoffset: 100; } 22% { stroke-dashoffset: 8; } 99.9% { stroke-dashoffset: 8; } 100% { stroke-dashoffset: 100; } } @keyframes mkt-an-num-tick-hero { /* Hero counter. The 0 → 10% hold pins --n at 0 while opacity is 0, so when the number flips to opaque at 10% it actually starts from "0", not from a partially-interpolated value. The 98% → 98.01% jump snaps --n back to 0 inside the invisible window so the next loop starts clean. Sync'd with mkt-an-arc-fill above. */ 0% { --n: 0; opacity: 0; } 10% { --n: 0; opacity: 1; } 22% { --n: var(--n-target); opacity: 1; } 92% { --n: var(--n-target); opacity: 1; } 98% { --n: var(--n-target); opacity: 0; } 98.01% { --n: 0; opacity: 0; } 100% { --n: 0; opacity: 0; } } @keyframes mkt-an-num-tick { /* Tile counter — same shape as hero but offset by ~6% so the gauge takes the visual lead. */ 0% { --n: 0; opacity: 0; } 16% { --n: 0; opacity: 1; } 28% { --n: var(--n-target); opacity: 1; } 92% { --n: var(--n-target); opacity: 1; } 98% { --n: var(--n-target); opacity: 0; } 98.01% { --n: 0; opacity: 0; } 100% { --n: 0; opacity: 0; } } @keyframes mkt-an-tile-rise { 0% { opacity: 0; transform: translateY(8px); } 14% { opacity: 0; transform: translateY(8px); } 24% { opacity: 1; transform: translateY(0); } 92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(8px); } } @keyframes mkt-an-spark-draw { 0% { stroke-dashoffset: 100; opacity: 0; } 28% { stroke-dashoffset: 100; opacity: 0.55; } 40% { stroke-dashoffset: 0; opacity: 0.55; } 92% { stroke-dashoffset: 0; opacity: 0.55; } 100% { stroke-dashoffset: 100; opacity: 0; } } @keyframes mkt-an-spark-dot-pop { 0%, 38% { opacity: 0; transform: scale(0); } 44% { opacity: 1; transform: scale(1.3); } 48% { opacity: 1; transform: scale(1); } 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } } @keyframes mkt-an-delta-rise { 0%, 32% { opacity: 0; transform: translateY(6px); } 42% { opacity: 1; transform: translateY(0); } 92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2px); } } @keyframes mkt-an-sparkle-burst { 0%, 40% { opacity: 0; transform: translate(0px, 0px) scale(0); } 46% { opacity: 1; transform: translate(var(--burst-x), var(--burst-y)) scale(1); } 56% { opacity: 0; transform: translate(calc(var(--burst-x) * 1.6), calc(var(--burst-y) * 1.6)) scale(0.4); } 100% { opacity: 0; transform: translate(0px, 0px) scale(0); } } @media (prefers-reduced-motion: reduce) { .mkt-detail-panel[data-detail="4"].is-active .mkt-an-gauge-arc, .mkt-detail-panel[data-detail="4"].is-active .mkt-an-num, .mkt-detail-panel[data-detail="4"].is-active .mkt-an-tile, .mkt-detail-panel[data-detail="4"].is-active .mkt-an-spark-line, .mkt-detail-panel[data-detail="4"].is-active .mkt-an-spark-dot, .mkt-detail-panel[data-detail="4"].is-active .mkt-an-delta, .mkt-detail-panel[data-detail="4"].is-active .mkt-an-sparkle-dot { animation: none !important; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-gauge-arc { stroke-dashoffset: 8; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-num { --n: var(--n-target); opacity: 1; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-tile { opacity: 1; transform: none; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-spark-line { stroke-dashoffset: 0; opacity: 0.55; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-spark-dot { opacity: 1; transform: scale(1); } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-delta { opacity: 1; transform: none; } .mkt-detail-panel[data-detail="4"].is-active .mkt-an-sparkle-dot { opacity: 0; } } /* ── Mobile housekeeper-view mockup (Feature 0) ─────────── */ /* Layout-only container — the inner tiles (stats header, tabs row, room cards) each carry their own background/border so the outer frame is intentionally absent. Reads as a real product UI rather than a framed phone screenshot. */ .mkt-mobile-frame { width: min(100%, 460px); display: flex; flex-direction: column; gap: var(--space-3); } /* StatsHeader — id row + two stat cards */ .mkt-mh-header { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--neutral-50); } .mkt-mh-id { display: flex; align-items: center; gap: var(--space-3); } .mkt-mh-avatar { width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--sky-100); color: var(--sky-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mkt-mh-avatar-icon { width: 18px; height: 18px; } .mkt-mh-id-text { display: flex; flex-direction: column; } .mkt-mh-name { font-weight: 600; font-size: 14px; color: var(--fg1); line-height: 1.2; } .mkt-mh-time { font-size: 11px; color: var(--fg3); margin-top: 2px; } .mkt-mh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .mkt-mh-stat { position: relative; background: var(--neutral-0); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3) var(--space-3) calc(var(--space-3) + 4px); } .mkt-mh-stat-rail { position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: var(--radius-pill); background: var(--mint-500); } .mkt-mh-rail-coral { background: var(--coral-500); } .mkt-mh-stat-label { font-size: 10px; color: var(--fg3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .mkt-mh-stat-value { font-size: 20px; font-weight: 700; color: var(--fg1); line-height: 1.1; margin-top: 2px; } .mkt-mh-stat-total { font-size: 12px; color: var(--fg3); font-weight: 500; margin-left: 2px; } .mkt-mh-stat-bar { height: 4px; background: var(--neutral-100); border-radius: var(--radius-pill); margin-top: var(--space-2); overflow: hidden; } .mkt-mh-stat-fill { height: 100%; border-radius: var(--radius-pill); transition: width 600ms var(--ease-out); } .mkt-mh-fill-mint { background: var(--mint-500); } .mkt-mh-fill-amber { background: var(--coral-500); } /* Level tabs */ .mkt-mh-tabs { display: flex; gap: var(--space-2); } .mkt-mh-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px var(--space-2); font-size: 11px; font-weight: 600; color: var(--fg3); background: var(--neutral-50); border: 1px solid var(--border); border-radius: var(--radius-md); } .mkt-mh-tab.is-active { background: var(--neutral-900); color: var(--neutral-0); border-color: var(--neutral-900); } .mkt-mh-tab-dots { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; opacity: 0.85; } .mkt-mh-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); display: inline-block; } .mkt-mh-dot-mint { background: var(--mint-500); } .mkt-mh-dot-coral { background: var(--coral-500); } /* Room cards */ .mkt-mh-rooms { display: flex; flex-direction: column; gap: var(--space-2); } .mkt-room-card { position: relative; background: var(--neutral-0); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 6px); display: flex; flex-direction: column; gap: var(--space-2); overflow: hidden; transition: box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out); } /* Per-status accent rail (left edge) */ .mkt-room-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--neutral-300); transition: background-color 380ms var(--ease-out); } .mkt-room-card[data-status="clean"] .mkt-room-rail { background: var(--mint-500); } .mkt-room-card[data-status="checkout"] .mkt-room-rail { background: var(--coral-500); } .mkt-room-card[data-status="active"] .mkt-room-rail { background: var(--sky-500); } .mkt-room-card[data-status="inprogress"] .mkt-room-rail { background: var(--amber-300); } .mkt-room-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .mkt-room-number { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--fg1); line-height: 1.1; } .mkt-room-type { font-size: 11px; color: var(--fg3); margin-top: 2px; } .mkt-room-pill { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.04em; transition: background-color 380ms var(--ease-out), color 380ms var(--ease-out); } .mkt-room-pill[data-pill-status="clean"] { background: var(--mint-100); color: var(--mint-700); } .mkt-room-pill[data-pill-status="checkout"] { background: var(--coral-100); color: var(--coral-700); } .mkt-room-pill[data-pill-status="active"] { background: var(--sky-100); color: var(--sky-700); } .mkt-room-pill[data-pill-status="inprogress"] { background: var(--amber-100); color: var(--amber-700); } .mkt-room-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); } .mkt-room-stat { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: 6px 8px; background: var(--neutral-50); border-radius: var(--radius-sm); } .mkt-room-stat.is-success { background: color-mix(in srgb, var(--mint-100) 70%, transparent); } .mkt-room-stat.is-warning { background: color-mix(in srgb, var(--coral-100) 70%, transparent); } .mkt-room-stat small { font-size: 9px; color: var(--fg3); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; } .mkt-room-stat-value { display: flex; align-items: center; gap: 4px; } .mkt-room-stat-icon { width: 12px; height: 12px; color: var(--fg3); flex-shrink: 0; } .mkt-room-stat span { font-weight: 700; font-size: 14px; color: var(--fg1); line-height: 1; } /* Dramatic live update pulse — triggered by JS via .is-pulsing. A ring scales out from the card while the card glows and lifts. */ .mkt-room-card.is-pulsing { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pulse-color, var(--mint-500)) 35%, transparent), 0 14px 32px -10px color-mix(in srgb, var(--pulse-color, var(--mint-500)) 60%, transparent); border-color: color-mix(in srgb, var(--pulse-color, var(--mint-500)) 55%, var(--border)); } .mkt-room-card.is-pulsing::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--pulse-color, var(--mint-500)); pointer-events: none; animation: mktRoomPulseRing 900ms var(--ease-out) forwards; } @keyframes mktRoomPulseRing { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.06); opacity: 0; } } /* ── Mini weekly schedule mock (Feature 1) ────────────────── Mirrors templates/schedule.html week view in miniature. All sub-elements use design tokens only. The looping demo animation sits at the bottom of this block (.mkt-ws-day-col--demo children + @keyframes mkt-ws-*). */ .mkt-ws-frame { position: relative; /* Fill the right detail slot so the 7-column grid has room to breathe. Slot is up to ~744px wide (`.mkt-stage` is 1.15fr | 1fr in a 1600px stage), so 720px keeps a small breathing margin without shrinking. */ width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: var(--space-3); /* Allow the floating drop chip to escape area boundaries during the demo animation. */ overflow: visible; } /* Week strip — Mon..Sun row, one cell highlighted as Today */ .mkt-ws-week-strip { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 6px; background: var(--neutral-50); border-radius: var(--radius-md); } .mkt-ws-week-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 4px; border-radius: var(--radius-sm); background: transparent; color: var(--fg3); text-align: center; line-height: 1.1; } .mkt-ws-week-dow { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; } .mkt-ws-week-num { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--fg1); } .mkt-ws-week-day.is-today { background: var(--coral-100); color: var(--coral-700); } .mkt-ws-week-day.is-today .mkt-ws-week-num { color: var(--coral-900); } .mkt-ws-today-pill { margin-top: 2px; font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: var(--radius-pill); background: var(--coral-500); color: var(--neutral-0); text-transform: uppercase; letter-spacing: 0.05em; } /* Area card — echoes .area-section.week-area-card */ .mkt-ws-area { position: relative; background: var(--neutral-0); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); /* Critical: the demo cell's drop chip animates out beyond its own bounds, so the parent grid + area must not clip. */ overflow: visible; } .mkt-ws-area-head { display: flex; flex-direction: column; gap: 6px; } .mkt-ws-area-title-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .mkt-ws-area-title { font-weight: 700; font-size: 13px; color: var(--fg1); line-height: 1.1; } .mkt-ws-area-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-pill); letter-spacing: 0.02em; } .mkt-ws-area-pill i { width: 10px; height: 10px; } .mkt-ws-pill-sky { background: var(--sky-100); color: var(--sky-700); } .mkt-ws-pill-peri { background: var(--peri-100); color: var(--peri-700); } /* Summary chips — echo .week-summary-chip variants */ .mkt-ws-summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .mkt-ws-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--neutral-50); color: var(--fg3); border: 1px solid var(--border); } .mkt-ws-chip-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--neutral-400); display: inline-block; } .mkt-ws-chip-live { background: color-mix(in srgb, var(--mint-100) 70%, var(--neutral-0)); color: var(--mint-700); border-color: color-mix(in srgb, var(--mint-300) 50%, var(--border)); } .mkt-ws-chip-live .mkt-ws-chip-dot { background: var(--mint-500); animation: mkt-ws-dot-pulse 1.6s ease-in-out infinite; } .mkt-ws-chip-scheduled { background: var(--sky-50); color: var(--sky-700); border-color: color-mix(in srgb, var(--sky-100) 70%, var(--border)); } .mkt-ws-chip-scheduled .mkt-ws-chip-dot { background: var(--sky-500); } .mkt-ws-chip-done { background: var(--neutral-100); color: var(--fg3); } .mkt-ws-chip-done .mkt-ws-chip-dot { background: var(--neutral-400); } .mkt-ws-chip-open { background: color-mix(in srgb, var(--coral-100) 60%, var(--neutral-0)); color: var(--coral-700); border-color: color-mix(in srgb, var(--coral-300) 40%, var(--border)); } .mkt-ws-chip-open .mkt-ws-chip-dot { background: var(--coral-500); } @keyframes mkt-ws-dot-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.6; } } /* 7-column day grid — echoes .schedule-shifts-container */ .mkt-ws-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; /* Subtle column divider on top of grid */ padding-top: 4px; border-top: 1px dashed var(--border); overflow: visible; } .mkt-ws-day-col { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 4px; } /* 2px coral top rail on today's column — echoes .schedule-day-column.is-today */ .mkt-ws-day-col.is-today::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--coral-500); border-radius: var(--radius-pill); } /* Slim shift card — echoes .shift-block.week-shift-card. Purely visual; auto-demo (landing.js) drives the popover. */ .mkt-ws-shift { position: relative; background: var(--neutral-0); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 8px 7px 11px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; min-width: 0; width: 100%; transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out); } /* Auto-demo "tap" pulse on the live card just before the popover opens. Mimics a click highlight to telegraph what's about to happen. */ .mkt-ws-shift--auto-pulse { animation: mkt-ws-shift-tap 700ms var(--ease-out); } @keyframes mkt-ws-shift-tap { 0% { transform: scale(1); box-shadow: none; } 35% { transform: scale(0.97); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral-300) 55%, transparent); } 65% { transform: scale(1.025); box-shadow: 0 0 0 5px color-mix(in srgb, var(--coral-300) 35%, transparent); } 100% { transform: scale(1); box-shadow: none; } } /* Per-status left rail */ .mkt-ws-shift::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: var(--radius-pill); background: var(--neutral-300); } .mkt-ws-shift-name { font-size: 12px; font-weight: 700; color: var(--fg1); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .mkt-ws-shift-time { font-size: 10px; font-weight: 600; color: var(--fg3); letter-spacing: 0.02em; } /* Status variants */ .mkt-ws-shift.is-scheduled::before { background: var(--sky-500); } .mkt-ws-shift.is-completed { opacity: 0.78; } .mkt-ws-shift.is-completed::before { background: var(--neutral-400); } .mkt-ws-shift.is-completed .mkt-ws-shift-name { color: var(--fg3); } .mkt-ws-shift.is-live { border-color: color-mix(in srgb, var(--mint-300) 60%, var(--border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mint-100) 60%, transparent); } .mkt-ws-shift.is-live::before { background: var(--mint-500); animation: mkt-ws-rail-pulse 1.8s ease-in-out infinite; } .mkt-ws-shift.is-live .mkt-ws-shift-time { display: inline-flex; align-items: center; gap: 3px; color: var(--mint-700); font-weight: 700; text-transform: uppercase; } .mkt-ws-shift.is-live .mkt-ws-shift-time::before { content: ""; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--mint-500); animation: mkt-ws-dot-pulse 1.4s ease-in-out infinite; } @keyframes mkt-ws-rail-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* Day-off filler — echoes .day-off-filler */ .mkt-ws-day-off { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; background: color-mix(in srgb, var(--coral-100) 45%, var(--neutral-0)); border: 1px dashed color-mix(in srgb, var(--coral-300) 60%, var(--border)); border-radius: var(--radius-sm); color: var(--coral-700); font-size: 10px; font-weight: 600; text-align: center; } .mkt-ws-day-off i { width: 12px; height: 12px; color: var(--coral-500); } /* ── Demo animation: drag-and-drop a new shift ────────────── Three stacked elements inside .mkt-ws-day-col--demo: 1. .mkt-ws-empty-slot — visible at rest, fades during drop 2. .mkt-ws-drop-chip — flies in from above-right, lands on slot 3. .mkt-ws-shift--demo — appears once chip lands, fades back at end The whole loop only runs while the parent panel is .is-active and pauses cleanly otherwise (CSS animation-play-state). */ .mkt-ws-day-col--demo { /* Children stack here; cell still flows in the grid */ position: relative; overflow: visible; } .mkt-ws-empty-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; background: var(--neutral-0); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--fg3); font-size: 10px; font-weight: 600; text-align: center; transition: border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out); } .mkt-ws-empty-slot i { width: 12px; height: 12px; color: var(--neutral-400); } /* Sibling layers stacked on top of the empty slot. Initial state: hidden. Animation reveals them at the right moments. */ .mkt-ws-drop-chip, .mkt-ws-shift--demo { position: absolute; inset: 0; opacity: 0; pointer-events: none; /* Animation paused by default — only runs while panel is active. */ animation-play-state: paused; } .mkt-ws-drop-chip { display: flex; align-items: center; gap: 4px; padding: 5px 7px; background: var(--neutral-0); border: 1px solid var(--peri-300); border-radius: var(--radius-pill); box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--peri-500) 35%, transparent), 0 2px 4px -1px rgba(0, 0, 0, 0.08); transform: translate(60px, -60px) rotate(-8deg) scale(0.96); /* Anchor scale/rotate from chip center so settling reads naturally */ transform-origin: 50% 50%; } .mkt-ws-drop-chip-avatar { width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--peri-100); color: var(--peri-700); font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .mkt-ws-drop-chip-name { font-size: 10px; font-weight: 600; color: var(--fg1); line-height: 1; } /* The shift card that appears once the chip "lands" */ .mkt-ws-shift--demo { /* Reuses .mkt-ws-shift styling from above; just hidden by default */ transform: scale(0.96); } /* While the panel is active, kick off the loop. The cursor cue on the empty slot also runs to draw attention before the chip flies in. */ .mkt-detail-panel[data-detail="1"].is-active .mkt-ws-empty-slot { animation: mkt-ws-slot-breathe 5400ms var(--ease-out) infinite; } .mkt-detail-panel[data-detail="1"].is-active .mkt-ws-drop-chip { animation: mkt-ws-chip-drop 5400ms cubic-bezier(0.34, 1.56, 0.64, 1) infinite; animation-play-state: running; } .mkt-detail-panel[data-detail="1"].is-active .mkt-ws-shift--demo { animation: mkt-ws-card-settle 5400ms var(--ease-out) infinite; animation-play-state: running; } @keyframes mkt-ws-slot-breathe { /* Idle for a beat, attract attention, fade out as chip lands, hold while filled card is shown, then fade back in at the end. */ 0%, 10% { border-color: var(--border-strong); box-shadow: none; opacity: 1; } 18% { border-color: var(--coral-300); box-shadow: 0 0 0 2px color-mix(in srgb, var(--coral-100) 60%, transparent); opacity: 1; } 28%, 32% { border-color: var(--coral-300); box-shadow: 0 0 0 2px color-mix(in srgb, var(--coral-100) 70%, transparent); opacity: 0.85; } 40% { opacity: 0; } 85% { opacity: 0; } 100% { border-color: var(--border-strong); box-shadow: none; opacity: 1; } } @keyframes mkt-ws-chip-drop { /* Hidden until the slot has had its breathing beat. */ 0%, 14% { opacity: 0; transform: translate(60px, -60px) rotate(-8deg) scale(0.96); } 18% { opacity: 1; transform: translate(60px, -60px) rotate(-8deg) scale(0.96); } /* Travel down-and-left toward the slot */ 34% { opacity: 1; transform: translate(8px, -10px) rotate(-3deg) scale(1.02); } /* Land with a tiny overshoot (the cubic-bezier handles the bounce) */ 40% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1.04); } 44% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } /* Hold briefly, then dissolve as the card takes over */ 48% { opacity: 0.6; transform: translate(0, 0) rotate(0) scale(1); } 52%, 100% { opacity: 0; transform: translate(0, 0) rotate(0) scale(1); } } @keyframes mkt-ws-card-settle { /* Stay hidden through chip flight, reveal as chip dissolves, hold in rest state, then fade back to empty before loop restart. */ 0%, 46% { opacity: 0; transform: scale(0.96); } 52% { opacity: 1; transform: scale(1); } 82% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(0.98); } } /* Honor reduced-motion: pin the demo to its "after" state, kill all loops. Users still see what the feature does, just without motion. */ @media (prefers-reduced-motion: reduce) { .mkt-detail-panel[data-detail="1"].is-active .mkt-ws-empty-slot, .mkt-detail-panel[data-detail="1"].is-active .mkt-ws-drop-chip, .mkt-detail-panel[data-detail="1"].is-active .mkt-ws-shift--demo, .mkt-ws-shift.is-live::before, .mkt-ws-shift.is-live .mkt-ws-shift-time::before, .mkt-ws-chip-live .mkt-ws-chip-dot { animation: none !important; } .mkt-detail-panel[data-detail="1"].is-active .mkt-ws-empty-slot { opacity: 0; } .mkt-detail-panel[data-detail="1"].is-active .mkt-ws-drop-chip { opacity: 0; } .mkt-detail-panel[data-detail="1"].is-active .mkt-ws-shift--demo { opacity: 1; transform: scale(1); } .mkt-ws-detail-scrim { background: transparent; } } /* While the detail popover is open we pause the drag-drop demo loop so the popover takes full focus. The class is toggled on .mkt-ws-frame by landing.js (see ws-open-detail / ws-close-detail handlers). Specificity matched against the active-panel selectors above. */ .mkt-detail-panel[data-detail="1"].is-active .mkt-ws-frame.is-popover-open .mkt-ws-empty-slot, .mkt-detail-panel[data-detail="1"].is-active .mkt-ws-frame.is-popover-open .mkt-ws-drop-chip, .mkt-detail-panel[data-detail="1"].is-active .mkt-ws-frame.is-popover-open .mkt-ws-shift--demo { animation-play-state: paused; } /* ── Maintenance jobs mock (Feature 3) ──────────────────────── Echoes templates/maintenanceman/dashboard.html: counters strip on top, priority-coded job cards below. The middle card (.mkt-mt-card--demo) runs a 5400ms loop that mirrors the Feature 1 drag-drop demo at line ~2879: a Liam chip flies in from upper-right, lands in the Unassigned slot, the New status pill cross-fades to In Progress, the rail flashes, and the New / In Progress counter numbers tick across. Loop only runs while the panel is .is-active. */ .mkt-mt-frame { width: min(100%, 480px); display: flex; flex-direction: column; gap: var(--space-3); } .mkt-mt-counters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); } .mkt-mt-counter { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--neutral-0); } .mkt-mt-counter--new { background: color-mix(in srgb, var(--coral-100) 55%, var(--neutral-0)); border-color: color-mix(in srgb, var(--coral-300) 50%, var(--border)); } .mkt-mt-counter--progress { background: color-mix(in srgb, var(--peri-100) 55%, var(--neutral-0)); border-color: color-mix(in srgb, var(--peri-300) 50%, var(--border)); } .mkt-mt-counter--resolved { background: color-mix(in srgb, var(--mint-100) 55%, var(--neutral-0)); border-color: color-mix(in srgb, var(--mint-300) 50%, var(--border)); } .mkt-mt-counter-label { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg3); } .mkt-mt-counter-value { position: relative; display: inline-flex; align-items: center; min-height: 22px; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg1); line-height: 1; } .mkt-mt-counter--new .mkt-mt-counter-value { color: var(--coral-700); } .mkt-mt-counter--progress .mkt-mt-counter-value { color: var(--peri-700); } .mkt-mt-counter--resolved .mkt-mt-counter-value { color: var(--mint-700); } /* Two-value swap: the .is-before/.is-after siblings stack at the same position so the cross-fade doesn't shift layout. */ .mkt-mt-num { display: inline-block; } .mkt-mt-counter-value:has(.mkt-mt-num.is-before) .mkt-mt-num { position: absolute; inset: 0; display: inline-flex; align-items: center; } .mkt-mt-num.is-before { opacity: 1; } .mkt-mt-num.is-after { opacity: 0; } .mkt-mt-list { display: flex; flex-direction: column; gap: var(--space-2); } .mkt-mt-card { position: relative; padding: 10px 12px 10px 18px; background: var(--neutral-0); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); display: flex; flex-direction: column; gap: 4px; } .mkt-mt-rail { position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: var(--radius-pill); background: var(--neutral-300); transition: background 320ms var(--ease-out); } .mkt-mt-priority-urgent .mkt-mt-rail { background: var(--coral-500); } .mkt-mt-priority-high .mkt-mt-rail { background: var(--butter-500); } .mkt-mt-priority-medium .mkt-mt-rail { background: var(--peri-500); } .mkt-mt-priority-low .mkt-mt-rail { background: var(--mint-500); } .mkt-mt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .mkt-mt-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--radius-pill); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .mkt-mt-badge-urgent { background: color-mix(in srgb, var(--coral-100) 80%, var(--neutral-0)); color: var(--coral-700); } .mkt-mt-badge-high { background: color-mix(in srgb, var(--butter-100) 85%, var(--neutral-0)); color: var(--butter-700); } .mkt-mt-badge-medium { background: color-mix(in srgb, var(--peri-100) 80%, var(--neutral-0)); color: var(--peri-700); } .mkt-mt-badge-low { background: color-mix(in srgb, var(--mint-100) 80%, var(--neutral-0)); color: var(--mint-700); } .mkt-mt-status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid var(--border); background: var(--neutral-0); color: var(--fg2); white-space: nowrap; } .mkt-mt-status-new { background: color-mix(in srgb, var(--coral-100) 70%, var(--neutral-0)); border-color: color-mix(in srgb, var(--coral-300) 55%, var(--border)); color: var(--coral-700); } .mkt-mt-status-progress { background: color-mix(in srgb, var(--peri-100) 70%, var(--neutral-0)); border-color: color-mix(in srgb, var(--peri-300) 55%, var(--border)); color: var(--peri-700); } /* Wrapper that lets two status pills occupy the same slot for the swap. */ .mkt-mt-status-swap { position: relative; display: inline-flex; align-items: center; min-height: 18px; min-width: 76px; justify-content: flex-end; } .mkt-mt-status-swap .mkt-mt-status { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .mkt-mt-status-swap .is-before { opacity: 1; } .mkt-mt-status-swap .is-after { opacity: 0; } .mkt-mt-title { font-size: 13px; font-weight: 700; color: var(--fg1); margin: 0; line-height: 1.25; } .mkt-mt-loc { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--fg3); } .mkt-mt-loc i { width: 11px; height: 11px; color: var(--fg3); } .mkt-mt-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 10px; color: var(--fg3); font-weight: 500; } .mkt-mt-meta-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .mkt-mt-assignee { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--fg2); white-space: nowrap; } .mkt-mt-assignee-empty { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--fg3); padding: 2px 6px; border-radius: var(--radius-pill); border: 1px dashed var(--border-strong); background: var(--neutral-0); white-space: nowrap; } .mkt-mt-assignee-empty i { width: 10px; height: 10px; color: var(--neutral-400); } .mkt-mt-avatar { width: 16px; height: 16px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex-shrink: 0; } .mkt-mt-avatar-butter { background: var(--butter-100); color: var(--butter-700); } .mkt-mt-avatar-peri { background: var(--peri-100); color: var(--peri-700); } .mkt-mt-avatar-mint { background: var(--mint-100); color: var(--mint-700); } /* Demo card: the assignee slot stacks empty/assigned/drop-chip in the same position so the swap is visually clean. */ .mkt-mt-card--demo .mkt-mt-assignee-slot { position: relative; display: inline-flex; align-items: center; min-width: 132px; min-height: 20px; justify-content: flex-end; } .mkt-mt-card--demo .mkt-mt-assignee-empty, .mkt-mt-card--demo .mkt-mt-assignee { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .mkt-mt-card--demo .mkt-mt-assignee.is-after { opacity: 0; } .mkt-mt-drop-chip { position: absolute; right: 0; top: 50%; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: var(--radius-pill); background: var(--neutral-0); border: 1px solid var(--peri-300); color: var(--fg1); font-size: 10px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(60px, calc(-50% - 40px)) rotate(-8deg) scale(0.96); transform-origin: 50% 50%; box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--peri-500) 35%, transparent), 0 2px 4px -1px rgba(0, 0, 0, 0.08); /* Paused by default — only the active panel runs the loop. */ animation-play-state: paused; } /* While Feature 3 panel is active, run the loop. */ .mkt-detail-panel[data-detail="3"].is-active .mkt-mt-drop-chip { animation: mkt-mt-chip-fly 5400ms cubic-bezier(0.34, 1.56, 0.64, 1) infinite; animation-play-state: running; } .mkt-detail-panel[data-detail="3"].is-active .mkt-mt-num.is-before, .mkt-detail-panel[data-detail="3"].is-active .mkt-mt-status-swap .is-before, .mkt-detail-panel[data-detail="3"].is-active .mkt-mt-card--demo .mkt-mt-assignee-empty.is-before { animation: mkt-mt-swap-out 5400ms ease-in-out infinite; } .mkt-detail-panel[data-detail="3"].is-active .mkt-mt-num.is-after, .mkt-detail-panel[data-detail="3"].is-active .mkt-mt-status-swap .is-after, .mkt-detail-panel[data-detail="3"].is-active .mkt-mt-card--demo .mkt-mt-assignee.is-after { animation: mkt-mt-swap-in 5400ms ease-in-out infinite; } .mkt-detail-panel[data-detail="3"].is-active .mkt-mt-card--demo .mkt-mt-rail { animation: mkt-mt-rail-flash 5400ms ease-out infinite; } @keyframes mkt-mt-chip-fly { /* Hidden, then enter, travel left/down, land on slot, dissolve. */ 0%, 14% { opacity: 0; transform: translate(60px, calc(-50% - 40px)) rotate(-8deg) scale(0.96); } 18% { opacity: 1; transform: translate(60px, calc(-50% - 40px)) rotate(-8deg) scale(0.96); } 34% { opacity: 1; transform: translate(12px, calc(-50% - 6px)) rotate(-3deg) scale(1.02); } 42% { opacity: 1; transform: translate(0, -50%) rotate(0) scale(1.04); } 46% { opacity: 1; transform: translate(0, -50%) rotate(0) scale(1); } 52% { opacity: 0.4; transform: translate(0, -50%) rotate(0) scale(1); } 58%, 100% { opacity: 0; transform: translate(0, -50%) rotate(0) scale(1); } } @keyframes mkt-mt-swap-out { /* "Before" state visible up to the landing point, then fades out. */ 0%, 44% { opacity: 1; } 52%, 86% { opacity: 0; } 94%, 100% { opacity: 1; } } @keyframes mkt-mt-swap-in { /* Mirror of swap-out — appears as the chip dissolves and holds. */ 0%, 44% { opacity: 0; } 52%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } } @keyframes mkt-mt-rail-flash { /* Rail pulses briefly when status flips. */ 0%, 44% { background: var(--butter-500); } 48% { background: var(--peri-500); box-shadow: 0 0 0 2px color-mix(in srgb, var(--peri-100) 70%, transparent); } 60%, 86% { background: var(--peri-500); box-shadow: none; } 94%, 100% { background: var(--butter-500); box-shadow: none; } } /* ── Detail popover (shift click) ──────────────────────────── Mirrors templates/schedule.html staffInfoModal at marketing scale. Sits on the detail panel (sibling of .mkt-ws-frame): transparent scrim for dismiss + centered card. Schedule dims via .mkt-ws-frame.is-popover-open (per-box 20% tint on week strip + area cards). landing.js toggles .is-open and fills data-bind targets. */ .mkt-ws-detail-popover { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 220ms var(--ease-out); backdrop-filter: none; -webkit-backdrop-filter: none; } .mkt-ws-detail-popover.is-open { opacity: 1; pointer-events: auto; } .mkt-ws-detail-scrim { position: absolute; inset: 0; background: transparent; cursor: pointer; backdrop-filter: none; -webkit-backdrop-filter: none; } /* 20% dim inside each schedule box when popover is open (follows border-radius). */ .mkt-ws-frame.is-popover-open .mkt-ws-week-strip::after, .mkt-ws-frame.is-popover-open .mkt-ws-area::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: color-mix(in srgb, var(--neutral-900) 20%, transparent); transition: opacity 220ms var(--ease-out); z-index: 2; } .mkt-ws-detail-card { position: relative; width: min(100%, 420px); background: var(--neutral-0); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.25), 0 6px 16px -8px rgba(0, 0, 0, 0.12); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); transform: translateY(8px) scale(0.98); transition: transform 240ms var(--ease-out); } .mkt-ws-detail-popover.is-open .mkt-ws-detail-card { transform: translateY(0) scale(1); } .mkt-ws-detail-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill); color: var(--fg3); cursor: pointer; transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out); } .mkt-ws-detail-close:hover { background: var(--neutral-100); color: var(--fg1); } .mkt-ws-detail-close i { width: 14px; height: 14px; } .mkt-ws-detail-head { display: flex; align-items: center; gap: var(--space-3); padding-right: 28px; } .mkt-ws-detail-avatar { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--sky-100); color: var(--sky-700); font-weight: 700; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .mkt-ws-detail-popover[data-status="live"] .mkt-ws-detail-avatar { background: var(--mint-100); color: var(--mint-700); } .mkt-ws-detail-popover[data-status="completed"] .mkt-ws-detail-avatar { background: var(--neutral-100); color: var(--fg3); } .mkt-ws-detail-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mkt-ws-detail-kicker { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg3); } .mkt-ws-detail-title-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .mkt-ws-detail-name { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--fg1); line-height: 1.15; } .mkt-ws-detail-status { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--sky-100); color: var(--sky-700); display: inline-flex; align-items: center; gap: 4px; } .mkt-ws-detail-popover[data-status="live"] .mkt-ws-detail-status { background: var(--mint-100); color: var(--mint-700); } .mkt-ws-detail-popover[data-status="live"] .mkt-ws-detail-status::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--mint-500); animation: mkt-ws-dot-pulse 1.4s ease-in-out infinite; } .mkt-ws-detail-popover[data-status="completed"] .mkt-ws-detail-status { background: var(--neutral-100); color: var(--fg3); } .mkt-ws-detail-popover[data-status="scheduled"] .mkt-ws-detail-status { background: var(--sky-100); color: var(--sky-700); } .mkt-ws-detail-day { font-size: 11px; color: var(--fg3); font-weight: 500; } .mkt-ws-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .mkt-ws-detail-tile { background: var(--neutral-50); border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; } .mkt-ws-detail-tile-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg3); } .mkt-ws-detail-tile-value { font-size: 13px; font-weight: 600; color: var(--fg1); line-height: 1.2; } .mkt-ws-detail-meta { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-2); border-top: 1px dashed var(--border); } .mkt-ws-detail-meta-item { display: flex; flex-direction: column; gap: 2px; } .mkt-ws-detail-meta-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg3); } .mkt-ws-detail-meta-value { font-size: 12px; font-weight: 600; color: var(--fg1); } /* Hide rows that the JS marks as missing data (no started/duration). */ .mkt-ws-detail-popover [data-bind-row].is-hidden { display: none; } /* ── Responsive: mobile fallback (no sticky) ────────────── */ @media (max-width: 768px) { .mkt-stage-section { padding-bottom: var(--space-8); } .mkt-stage-scroller { height: auto; } .mkt-stage { position: relative; height: auto; grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5) var(--space-4) var(--space-6); overflow: visible; } .mkt-stage-card { height: auto; min-height: 280px; padding-bottom: var(--space-6); /* On mobile the blob is inset normally — no off-screen trick */ margin-left: 0; transform: none; animation: none; } .mkt-stage-card-inner { position: relative; inset: auto; padding: var(--space-5); left: auto; right: auto; top: auto; bottom: auto; max-width: 100%; } .mkt-stage-detail { height: auto; min-height: 360px; } .mkt-detail-panel { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; } .mkt-detail-panel:not(.is-active) { display: none; } /* Team Messaging mock — at narrow widths the SVG curves between three corners look messy, so we collapse the nodes into a horizontal flex row and drop the lines + pulse entirely. The :has() position overrides above no longer apply since we set `position: relative` here. */ .mkt-team-net { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: var(--space-4); min-height: 0; padding: var(--space-4) 0; } .mkt-team-svg { display: none; } .mkt-team-node, .mkt-team-node--hk, .mkt-team-node--fd, .mkt-team-node--of { position: relative; inset: auto; top: auto; right: auto; bottom: auto; left: auto; width: clamp(110px, 26vw, 160px); transform: none; } /* Cross-device family mock — tighten offsets so the cluster reads on phone-width. Devices stay absolutely positioned within the frame; we just nudge the % anchors so they don't overlap badly on narrow widths. Also shrink the frame's min-height a touch so it doesn't dominate the page on mobile, and hide the small metadata bits (clock, avatar stack, tile numbers) that get unreadable below ~480px. */ .mkt-dv-frame { min-height: 340px; } .mkt-dv-monitor { left: 16%; width: 68%; } .mkt-dv-tablet { right: 2%; width: 40%; top: 38%; } .mkt-dv-phone { left: 4%; width: 28%; } .mkt-dv-phone-screen { min-height: 168px; } .mkt-dv-tab-icon { width: 9px; height: 9px; } /* Hero shrinks and tucks into the card top-right; no float */ .mkt-stage-hero { position: absolute; top: -8px; right: -4px; width: clamp(90px, 22.5vw, 135px); transform: rotate(-6deg); transform-origin: top right; filter: drop-shadow(0 12px 18px rgba(42, 70, 86, 0.18)); } .mkt-stage-hero-glb, .mkt-stage-hero-img { height: clamp(75px, 18vw, 120px); } } /* ── Slide 5 (Mobile App) — sub-480 cleanup ─────────────────── At very narrow widths the small metadata bits inside each device become unreadable. Hide them rather than shrink further — the composition still reads as three devices with one lilac highlight. */ @media (max-width: 480px) { .mkt-dv-monitor-clock { display: none; } .mkt-dv-avatar-stack { display: none; } .mkt-dv-tile-num { display: none; } } /* ── Chat mockup ─────────────────────────────────────────────── */ .mkt-chat-mockup { padding: var(--space-4); display: flex; flex-direction: column; flex: 1; min-height: 0; } .mkt-chat-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-3); } .mkt-chat-title { font-size: 13px; font-weight: 600; color: var(--fg1); } .mkt-chat-online { display: flex; align-items: center; gap: var(--space-1); font-size: 11px; color: var(--mint-700); font-weight: 500; } .mkt-chat-online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint-500); animation: mkt-dot-pulse 2.4s ease-out infinite; } .mkt-chat-messages { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); overflow-y: scroll; overflow-x: hidden; scrollbar-width: none; margin-bottom: var(--space-3); } .mkt-chat-messages::-webkit-scrollbar { display: none; } /* ── Live chat animation ─────────────────────────────────── */ @keyframes mktMsgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .mkt-chat-msg-enter { animation: mktMsgIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes mktTypingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } } .mkt-typing-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--neutral-400); animation: mktTypingBounce 1.1s infinite ease-in-out; } .mkt-typing-dot:nth-child(2) { animation-delay: 0.18s; } .mkt-typing-dot:nth-child(3) { animation-delay: 0.36s; } .mkt-typing-bubbles { display: flex; align-items: center; gap: 4px; padding: var(--space-2) var(--space-3); } .mkt-chat-msg { display: flex; align-items: flex-end; gap: var(--space-2); } .mkt-chat-msg-left { flex-direction: row; } .mkt-chat-msg-right { flex-direction: row-reverse; } .mkt-chat-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--neutral-0); flex-shrink: 0; } .mkt-chat-avatar-sky { background: linear-gradient(135deg, var(--sky-400), var(--sky-600)); } .mkt-chat-avatar-coral { background: linear-gradient(135deg, var(--coral-300), var(--coral-500)); } .mkt-chat-avatar-peri { background: linear-gradient(135deg, var(--peri-300), var(--peri-700)); } .mkt-chat-bubble-has-photo { padding-top: var(--space-2); } .mkt-chat-photo { display: block; width: 100%; max-width: 168px; border-radius: var(--radius-sm); margin-bottom: var(--space-2); object-fit: cover; aspect-ratio: 4 / 3; } .mkt-chat-bubble-right .mkt-chat-photo { border: 1px solid rgba(255, 255, 255, 0.15); } .mkt-chat-bubble-left .mkt-chat-photo { border: 1px solid var(--border); } .mkt-chat-bubble { max-width: 75%; padding: var(--space-2) var(--space-3); border-radius: 14px; font-size: 12px; } .mkt-chat-bubble-left { background: var(--neutral-100); border-bottom-left-radius: 4px; } .mkt-chat-bubble-right { background: var(--sky-700); border-bottom-right-radius: 4px; } .mkt-chat-sender { font-size: 10px; font-weight: 700; color: var(--sky-700); margin-bottom: 2px; } .mkt-chat-text { color: var(--fg1); line-height: 1.4; } .mkt-chat-bubble-right .mkt-chat-text { color: var(--neutral-0); } .mkt-chat-time { font-size: 10px; color: var(--fg3); margin-top: 2px; text-align: right; } .mkt-chat-bubble-right .mkt-chat-time { color: rgba(255, 255, 255, 0.55); } .mkt-chat-incoming { opacity: 1; transform: translateY(0); transition: opacity 420ms var(--ease-out), transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1); } .mkt-chat-incoming.mkt-chat-out { opacity: 0; transform: translateY(10px); } .mkt-chat-compose { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); } .mkt-chat-input { flex: 1; padding: var(--space-2) var(--space-3); background: var(--neutral-100); border-radius: var(--radius-pill); font-size: 12px; color: var(--fg3); cursor: default; } .mkt-chat-send { width: 30px; height: 30px; border-radius: 50%; background: var(--sky-700); color: var(--neutral-0); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ── Analytics / reports mockup ──────────────────────────────── */ .mkt-analytics-mockup { padding: var(--space-5); } .mkt-analytics-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .mkt-analytics-title { font-size: 13px; font-weight: 600; color: var(--fg1); } .mkt-analytics-period { font-size: 11px; color: var(--fg3); font-family: var(--font-mono); } .mkt-analytics-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); } .mkt-analytics-stat { display: flex; flex-direction: column; gap: 2px; } .mkt-analytics-stat-value { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--sky-800); font-variant-numeric: tabular-nums; line-height: 1; } .mkt-analytics-stat-label { font-size: 10px; color: var(--fg3); font-weight: 500; } .mkt-analytics-rows { display: flex; flex-direction: column; gap: var(--space-2); } .mkt-analytics-row { display: grid; grid-template-columns: 28px 1fr 36px; gap: var(--space-2); align-items: center; font-size: 11px; } .mkt-analytics-day { font-family: var(--font-mono); font-size: 10px; color: var(--fg3); font-weight: 500; } .mkt-analytics-row-peak .mkt-analytics-day { color: var(--coral-700); font-weight: 700; } .mkt-analytics-track { height: 8px; background: var(--sky-100); border-radius: var(--radius-pill); overflow: hidden; } .mkt-analytics-fill { height: 100%; background: linear-gradient(90deg, var(--sky-400), var(--sky-600)); border-radius: var(--radius-pill); width: 10%; transition: width 1.4s cubic-bezier(0.2, 0.8, 0.2, 1); position: relative; overflow: hidden; } .mkt-analytics-fill.mkt-fill-accent { background: linear-gradient(90deg, var(--coral-300), var(--coral-500)); } @keyframes mkt-bar-shine { 0% { transform: translateX(-100%); } 60% { transform: translateX(120%); } 100% { transform: translateX(120%); } } .mkt-analytics-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%); transform: translateX(-100%); animation: mkt-bar-shine 3.2s ease-in-out infinite; } .mkt-analytics-pct { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-align: right; color: var(--neutral-600); font-variant-numeric: tabular-nums; } /* ── Level forecast mockup ─────────────────────────────────── */ .mkt-forecast-mockup { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-height: 300px; background: radial-gradient(circle at 14% 12%, var(--sky-100) 0, transparent 34%), radial-gradient(circle at 88% 88%, var(--mint-100) 0, transparent 30%), var(--neutral-0); } .mkt-forecast-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease-out), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .mkt-forecast-mockup.is-revealed .mkt-forecast-header { opacity: 1; transform: translateY(0); } .mkt-forecast-title { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 700; color: var(--fg1); } .mkt-forecast-title svg { width: 15px; height: 15px; color: var(--sky-700); flex-shrink: 0; } .mkt-forecast-header-tags { display: inline-flex; align-items: center; gap: var(--space-3); } .mkt-forecast-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: var(--mint-700); letter-spacing: 0.03em; } .mkt-forecast-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint-600); animation: mkt-live-pulse 1.4s ease-in-out infinite; } .mkt-forecast-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--fg3); letter-spacing: 0.04em; } .mkt-forecast-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--neutral-0); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-out) 0.08s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s; } .mkt-forecast-mockup.is-revealed .mkt-forecast-stats { opacity: 1; transform: translateY(0); } .mkt-forecast-stat { display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; } .mkt-forecast-stat:not(:last-child) { border-right: 1px solid var(--border); } .mkt-forecast-stat-value { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--sky-800); font-variant-numeric: tabular-nums; line-height: 1; } .mkt-forecast-stat--risk .mkt-forecast-stat-value { color: var(--coral-700); } .mkt-forecast-stat-label { font-size: 9px; font-weight: 600; color: var(--fg3); line-height: 1.2; } .mkt-forecast-rows { display: flex; flex-direction: column; gap: var(--space-3); } .mkt-forecast-row { display: grid; grid-template-columns: 56px 1fr 30px auto; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); background: var(--neutral-0); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(12px); transition: opacity 0.55s var(--ease-out), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s var(--ease-out); } .mkt-forecast-row.is-visible { opacity: 1; transform: translateY(0); box-shadow: var(--shadow-md); } .mkt-forecast-row--risk { background: color-mix(in srgb, var(--coral-50) 55%, var(--neutral-0)); border-color: color-mix(in srgb, var(--coral-300) 45%, var(--border)); } .mkt-forecast-level-meta { display: flex; flex-direction: column; gap: 2px; } .mkt-forecast-level { font-size: 10px; font-weight: 700; color: var(--fg2); white-space: nowrap; } .mkt-forecast-rooms { font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: var(--fg3); font-variant-numeric: tabular-nums; } .mkt-forecast-row--risk .mkt-forecast-level { color: var(--coral-700); } .mkt-forecast-track { height: 10px; background: repeating-linear-gradient( 90deg, var(--sky-100) 0, var(--sky-100) calc(25% - 1px), var(--sky-200) calc(25% - 1px), var(--sky-200) 25% ); border-radius: var(--radius-pill); overflow: hidden; } .mkt-forecast-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--sky-400), var(--sky-600)); border-radius: var(--radius-pill); transition: width 1.4s cubic-bezier(0.2, 0.8, 0.2, 1); position: relative; overflow: hidden; } .mkt-forecast-fill.is-filled::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%); transform: translateX(-100%); animation: mkt-bar-shine 3.2s ease-in-out infinite; } .mkt-forecast-fill--risk { background: linear-gradient(90deg, var(--coral-300), var(--coral-500)); } .mkt-forecast-pct { font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--neutral-600); font-variant-numeric: tabular-nums; text-align: right; } .mkt-forecast-row--risk .mkt-forecast-pct { color: var(--coral-700); } .mkt-forecast-eta { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--sky-800); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transform: translateX(8px); transition: opacity 0.5s var(--ease-out), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .mkt-forecast-eta.is-visible { opacity: 1; transform: translateX(0); } .mkt-forecast-eta--risk { color: var(--coral-700); background: var(--coral-100); padding: 3px 8px; border-radius: var(--radius-pill); } .mkt-forecast-eta--risk.is-visible { animation: mkt-forecast-risk-pulse 2.4s ease-in-out infinite; } @keyframes mkt-forecast-risk-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--coral-400) 0%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral-400) 28%, transparent); } } .mkt-forecast-foot { margin: 0; font-size: 10px; font-weight: 600; color: var(--fg3); opacity: 0; transition: opacity 0.5s var(--ease-out) 0.5s; } .mkt-forecast-mockup.is-revealed .mkt-forecast-foot { opacity: 1; } /* ── Team performance spreadsheet mockup ───────────────────── */ .mkt-team-sheet-mockup { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-height: 320px; } .mkt-team-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .mkt-team-sheet-title { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 700; color: var(--fg1); } .mkt-team-sheet-title svg { width: 15px; height: 15px; color: var(--sky-700); flex-shrink: 0; } .mkt-team-sheet-period { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--fg3); letter-spacing: 0.04em; } .mkt-team-sheet-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--neutral-0); } .mkt-team-sheet-table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 11px; } .mkt-team-sheet-th { padding: var(--space-2) var(--space-3); text-align: left; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); background: var(--neutral-100); border-bottom: 1px solid var(--border); white-space: nowrap; } .mkt-team-sheet-td { padding: var(--space-2) var(--space-3); color: var(--fg2); border-bottom: 1px solid var(--border-subtle, var(--border)); white-space: nowrap; } .mkt-team-sheet-table tbody tr:last-child .mkt-team-sheet-td { border-bottom: none; } .mkt-team-sheet-row--highlight .mkt-team-sheet-td { background: var(--sky-50); } .mkt-team-sheet-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--sky-800); } .mkt-team-sheet-muted { color: var(--fg3); } .mkt-team-sheet-warn { color: var(--coral-700); } .mkt-team-sheet-foot { margin: 0; font-size: 10px; font-weight: 600; color: var(--fg3); } /* ── Mobile teams tab mockup ───────────────────────────────── */ .mkt-mobile-tab-mockup { min-height: 340px; padding: var(--space-6); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 18% 16%, var(--sky-100) 0, transparent 32%), radial-gradient(circle at 82% 84%, var(--mint-100) 0, transparent 30%), var(--neutral-0); } .mkt-mobile-tab-phone { width: min(100%, 286px); min-height: 330px; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--neutral-0); border: 1px solid var(--border); border-radius: 30px; box-shadow: var(--shadow-lg); } .mkt-mobile-tab-topbar { display: flex; align-items: center; justify-content: space-between; } .mkt-mobile-tab-title { font-size: 14px; font-weight: 800; color: var(--fg1); letter-spacing: -0.02em; } .mkt-mobile-tab-pill { padding: 4px var(--space-2); border-radius: var(--radius-pill); background: var(--sky-50); color: var(--sky-800); font-size: 10px; font-weight: 700; } .mkt-team-summary-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--sky-50); border: 1px solid var(--sky-200); border-radius: var(--radius-lg); } .mkt-team-summary-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--neutral-0); color: var(--sky-700); flex-shrink: 0; } .mkt-team-summary-icon svg, .mkt-mobile-tabbar svg, .mkt-team-note-card svg { width: 14px; height: 14px; } .mkt-team-summary-title, .mkt-team-summary-meta { display: block; } .mkt-team-summary-title { font-size: 12px; font-weight: 800; color: var(--fg1); } .mkt-team-summary-meta { margin-top: 2px; font-size: 10px; font-weight: 600; color: var(--fg3); } .mkt-team-list { display: flex; flex-direction: column; gap: var(--space-2); } .mkt-team-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--neutral-0); } .mkt-team-avatar { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--sky-100); color: var(--sky-800); font-family: var(--font-mono); font-size: 11px; font-weight: 800; } .mkt-team-avatar--mint { background: var(--mint-100); color: var(--mint-700); } .mkt-team-avatar--coral { background: var(--coral-100); color: var(--coral-700); } .mkt-team-person { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .mkt-team-person strong { font-size: 11px; font-weight: 800; color: var(--fg1); } .mkt-team-person small { font-size: 10px; font-weight: 600; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mkt-team-status { padding: 4px 7px; border-radius: var(--radius-pill); background: var(--sky-50); color: var(--sky-800); font-size: 9px; font-weight: 800; white-space: nowrap; } .mkt-team-status--mint { background: var(--mint-100); color: var(--mint-700); } .mkt-team-status--coral { background: var(--coral-100); color: var(--coral-700); } .mkt-team-note-card { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); margin-top: auto; border-radius: var(--radius-lg); background: var(--neutral-100); color: var(--fg2); font-size: 10px; font-weight: 700; } .mkt-team-note-card svg { color: var(--sky-700); flex-shrink: 0; } .mkt-mobile-tabbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); } .mkt-mobile-tabbar span { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; border-radius: var(--radius-pill); color: var(--fg3); } .mkt-mobile-tabbar span.is-active { background: var(--sky-100); color: var(--sky-800); } /* ── Phone device frame + Inspect room sketch (Feature 05) ─── */ .mkt-phone-ambient { position: absolute; width: 78%; height: 70%; left: 50%; top: 46%; transform: translate(-50%, -50%); background: radial-gradient(60% 55% at 50% 45%, var(--sky-100), transparent 70%), radial-gradient(45% 45% at 70% 65%, var(--lilac-100), transparent 72%); filter: blur(14px); opacity: 0.9; z-index: 0; pointer-events: none; } .mkt-phone-contact-shadow { position: absolute; width: calc(var(--mkt-ph-w, 268px) * 0.82); height: 22px; left: 50%; bottom: clamp(18px, 6%, 46px); transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 50%, rgba(42, 70, 86, 0.30), transparent 72%); filter: blur(7px); z-index: 1; pointer-events: none; } .mkt-phone-device { --mkt-ph-w: 268px; --mkt-ph-h: 540px; --mkt-ph-d: 16px; --mkt-ph-radius: 44px; position: relative; width: var(--mkt-ph-w); height: var(--mkt-ph-h); flex-shrink: 0; transform-style: preserve-3d; z-index: 2; animation: mkt-phone-float 7s ease-in-out infinite; } .mkt-phone-device-shell { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-7deg) rotateX(1.5deg); transition: transform 0.45s var(--ease-out); } .mkt-phone-device-face { position: absolute; border-radius: var(--mkt-ph-radius); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .mkt-phone-device-face--back { width: var(--mkt-ph-w); height: var(--mkt-ph-h); top: 0; left: 0; transform: translateZ(calc(var(--mkt-ph-d) / -2)) rotateY(180deg); background: linear-gradient(150deg, var(--neutral-700), var(--neutral-900) 60%, var(--neutral-800)); } .mkt-phone-device-face--left, .mkt-phone-device-face--right { width: var(--mkt-ph-d); height: calc(var(--mkt-ph-h) - 2 * var(--mkt-ph-radius)); top: var(--mkt-ph-radius); left: calc(50% - var(--mkt-ph-d) / 2); border-radius: 3px; background: linear-gradient(90deg, var(--neutral-900), var(--neutral-600), var(--neutral-900)); } .mkt-phone-device-face--right { transform: rotateY(90deg) translateZ(calc(var(--mkt-ph-w) / 2)); } .mkt-phone-device-face--left { transform: rotateY(-90deg) translateZ(calc(var(--mkt-ph-w) / 2)); } .mkt-phone-device-face--top, .mkt-phone-device-face--bottom { width: calc(var(--mkt-ph-w) - 2 * var(--mkt-ph-radius)); height: var(--mkt-ph-d); left: var(--mkt-ph-radius); top: calc(50% - var(--mkt-ph-d) / 2); border-radius: 3px; background: linear-gradient(0deg, var(--neutral-900), var(--neutral-600), var(--neutral-900)); } .mkt-phone-device-face--top { transform: rotateX(90deg) translateZ(calc(var(--mkt-ph-h) / 2)); } .mkt-phone-device-face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--mkt-ph-h) / 2)); } .mkt-phone-device-front { position: absolute; width: var(--mkt-ph-w); height: var(--mkt-ph-h); top: 0; left: 0; transform: translateZ(calc(var(--mkt-ph-d) / 2)); border-radius: var(--mkt-ph-radius); padding: 10px; background: linear-gradient(145deg, var(--neutral-800) 0%, var(--neutral-900) 55%, var(--neutral-900) 100%); box-shadow: 0 0 0 1px var(--neutral-700), 0 24px 48px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; } .mkt-phone-device-front::before, .mkt-phone-device-front::after { content: ''; position: absolute; border-radius: 2px; background: var(--neutral-700); z-index: 2; } .mkt-phone-device-front::before { left: -2px; top: 108px; width: 3px; height: 28px; } .mkt-phone-device-front::after { right: -2px; top: 132px; width: 3px; height: 44px; } .mkt-phone-device-island { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 72px; height: 22px; border-radius: var(--radius-pill); background: var(--neutral-900); z-index: 4; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .mkt-phone-device-screen { position: relative; height: calc(100% - 18px); margin-top: 4px; border-radius: 34px; background: var(--neutral-50); overflow: hidden; display: flex; flex-direction: column; } .mkt-phone-device-home { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); width: 96px; height: 4px; border-radius: var(--radius-pill); background: var(--neutral-600); z-index: 4; opacity: 0.85; } /* Inspect room detail sketch */ .mkt-inspect-sketch { font-size: 10px; line-height: 1.35; color: var(--fg2); } .mkt-inspect-sketch-header { display: flex; align-items: flex-start; gap: 8px; padding: 28px 10px 8px; background: var(--neutral-0); border-bottom: 1px solid var(--border); flex-shrink: 0; } .mkt-inspect-sketch-back { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--neutral-50); border: 1px solid var(--border); color: var(--fg1); flex-shrink: 0; } .mkt-inspect-sketch-back svg { width: 14px; height: 14px; } .mkt-inspect-sketch-title-block { flex: 1; min-width: 0; position: relative; padding-right: 88px; } .mkt-inspect-sketch-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; } .mkt-inspect-sketch-room { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--fg1); line-height: 1.1; } .mkt-inspect-sketch-type { padding: 3px 7px; border-radius: var(--radius-pill); background: var(--neutral-100); font-size: 7px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mkt-inspect-sketch-clean { position: absolute; top: 0; right: 0; width: 84px; padding: 6px 7px; border-radius: var(--radius-md); background: var(--mint-100); border: 1px solid var(--mint-300); } .mkt-inspect-sketch-clean-label { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint-700); } .mkt-inspect-sketch-clean-meta { display: block; margin-top: 2px; font-size: 7px; font-weight: 600; color: var(--fg3); line-height: 1.25; } .mkt-inspect-sketch-metrics { display: flex; align-items: stretch; gap: 0; padding: 8px 10px 10px; background: var(--neutral-0); border-bottom: 1px solid var(--border); flex-shrink: 0; } .mkt-inspect-sketch-metric { flex: 1; display: flex; flex-direction: column; gap: 4px; } .mkt-inspect-sketch-metric-divider { width: 1px; align-self: stretch; background: var(--border); margin: 0 6px; } .mkt-inspect-sketch-metric-label { font-size: 7px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); } .mkt-inspect-sketch-metric-value { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 800; color: var(--sky-700); line-height: 1; } .mkt-inspect-sketch-metric-value svg { width: 12px; height: 12px; padding: 2px; border-radius: var(--radius-pill); background: var(--sky-100); } .mkt-inspect-sketch-metric-value--coral { color: var(--coral-700); } .mkt-inspect-sketch-metric-value--coral svg { background: var(--coral-100); } .mkt-inspect-sketch-metric-value--mint { color: var(--mint-700); } .mkt-inspect-sketch-metric-value--mint svg { background: var(--mint-100); } .mkt-inspect-sketch-scroll { flex: 1; min-height: 0; overflow: hidden; padding: 8px; display: flex; flex-direction: column; gap: 6px; position: relative; background: var(--neutral-50); } .mkt-inspect-sketch-scroll::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(to bottom, transparent, var(--neutral-50)); pointer-events: none; } .mkt-inspect-sketch-card { border-radius: var(--radius-md); background: var(--neutral-0); border: 1px solid var(--border); overflow: hidden; flex-shrink: 0; } .mkt-inspect-sketch-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; background: var(--neutral-50); border-bottom: 1px solid var(--border); } .mkt-inspect-sketch-card-title { display: inline-flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg1); } .mkt-inspect-sketch-card-title svg { width: 11px; height: 11px; color: var(--sky-600); } .mkt-inspect-sketch-badge { min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; } .mkt-inspect-sketch-badge--sky { background: var(--sky-100); color: var(--sky-800); } .mkt-inspect-sketch-badge--coral { background: var(--coral-100); color: var(--coral-700); } .mkt-inspect-sketch-card-action { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border-radius: var(--radius-pill); border: 1px solid var(--sky-300); background: var(--neutral-0); font-size: 7px; font-weight: 700; color: var(--sky-700); } .mkt-inspect-sketch-card-action svg { width: 9px; height: 9px; } .mkt-inspect-sketch-card-body { padding: 6px 8px 7px; } .mkt-inspect-sketch-note { margin: 0; font-size: 9px; font-weight: 500; color: var(--fg2); line-height: 1.35; } .mkt-inspect-sketch-note-time { display: block; margin-top: 3px; font-size: 7px; color: var(--fg3); } .mkt-inspect-sketch-muted { margin: 0; font-size: 8px; color: var(--fg3); line-height: 1.35; } .mkt-inspect-sketch-report { display: flex; flex-direction: column; gap: 4px; } .mkt-inspect-sketch-report-title { font-size: 9px; font-weight: 700; color: var(--fg1); } .mkt-inspect-sketch-report-badge { align-self: flex-start; padding: 2px 6px; border-radius: var(--radius-pill); background: var(--butter-100); border: 1px solid var(--butter-300); font-size: 7px; font-weight: 700; color: var(--butter-900); } .mkt-inspect-sketch-actions { display: flex; gap: 6px; padding: 8px 10px 22px; background: var(--neutral-0); border-top: 1px solid var(--border); flex-shrink: 0; } .mkt-inspect-sketch-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 28px; padding: 0 6px; border-radius: var(--radius-pill); font-size: 8px; font-weight: 800; white-space: nowrap; } .mkt-inspect-sketch-btn svg { width: 11px; height: 11px; flex-shrink: 0; } .mkt-inspect-sketch-btn--danger { background: var(--coral-100); border: 1px solid var(--coral-500); color: var(--coral-700); } .mkt-inspect-sketch-btn--primary { background: var(--sky-500); border: 1px solid var(--sky-500); color: var(--neutral-0); } @media (max-width: 1000px) { .mkt-phone-device { --mkt-ph-w: min(268px, 72vw); --mkt-ph-h: min(540px, 118vw); } } @keyframes mkt-phone-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @media (prefers-reduced-motion: reduce) { .mkt-phone-device { animation: none !important; } .mkt-phone-device-shell { transform: rotateY(-7deg) rotateX(1.5deg) !important; } .mkt-inspect-sketch-scroll::after { background: none; } } /* ============================================================ Reveal system — JS-gated visibility Default: visible. Only hides when body.js-on is set. ============================================================ */ .mkt-reveal { opacity: 1; transform: none; } .js-on .mkt-reveal { opacity: 0; transform: translateY(28px); } .js-on .mkt-reveal.mkt-visible { opacity: 1; transform: translateY(0); transition: opacity 0.75s var(--ease-out), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 0.07s); } /* ============================================================ Reduced motion overrides Disable all loops, magnetism, tilt, shimmer, counters. Reveals collapse to immediate-visible. ============================================================ */ @media (prefers-reduced-motion: reduce) { body.marketing-page { transition: none; } .mkt-marquee-track, .mkt-marquee-track--reverse { animation: none; } .mkt-display em { animation: none; background: none; -webkit-text-fill-color: var(--coral-500); color: var(--coral-500); } .mkt-hero-mockup, .js-on .mkt-hero-mockup, .js-on .mkt-hero-mockup.revealed { animation: none; opacity: 1; transform: none; transition: none; } .mkt-mockup-badge { animation: none; } .js-on .line-mask .line-inner { transform: none; transition: none; } .js-on .line-mask.in .line-inner { transition: none; } .js-on .mkt-reveal { opacity: 1; transform: none; } .js-on .mkt-reveal.mkt-visible { transition: none; } .mkt-today-live-dot { animation: none; } .mkt-demo-cursor { display: none; } .mkt-today-tile-state { animation: none; } .mkt-demo-popup { transition: none; } .mkt-notif-item { opacity: 1; transform: none; transition: none; } .mkt-status-progress { animation: none; } .mkt-hero-trust::before { animation: none; } .btn-mkt-cta::before, .btn-mkt-cta .mkt-arrow { transition: none; } .btn-mkt-cta.has-halo { animation: none; } .btn-mkt-cta.has-halo:hover { transform: none; } .js-on .mkt-testimonial-mark { opacity: 1; transform: none; transition: none; } .mkt-progress-bar { display: none; } /* Showcase */ .mkt-stage-card { transition: background-color 200ms linear; animation: none !important; /* JS no longer writes these; pin to identity for safety */ --blob-rotate: 0deg !important; --blob-scale: 1 !important; } .mkt-stage-text { transform: none !important; } .mkt-stage-hero { transform: rotate(-6deg) !important; } .mkt-detail-panel { transition: opacity 200ms linear; transform: none; } .mkt-detail-panel.is-active { transform: none; } .mkt-room-card.is-pulsing::after { animation: none; opacity: 0; } .mkt-room-card.is-pulsing { box-shadow: 0 0 0 2px var(--pulse-color, var(--mint-500)); } .mkt-board-demo .mkt-board-tile.is-pulsing::after { animation: none; opacity: 0; } .mkt-board-demo .mkt-board-tile.is-pulsing { box-shadow: 0 0 0 2px var(--pulse-color, var(--mint-500)); } .mkt-chat-online-dot { animation: none; } .mkt-chat-incoming, .mkt-chat-incoming.mkt-chat-out { opacity: 1; transform: none; transition: none; } .mkt-chat-msg-enter { animation: none; } /* Team Messaging mock — pin everything to its final visual state. */ .mkt-detail-panel[data-detail="2"].is-active .mkt-team-node, .mkt-detail-panel[data-detail="2"].is-active .mkt-team-line, .mkt-detail-panel[data-detail="2"].is-active .mkt-team-pulse { animation: none; } .mkt-detail-panel[data-detail="2"].is-active .mkt-team-node { opacity: 1; transform: translateY(0) scale(1); } .mkt-detail-panel[data-detail="2"].is-active .mkt-team-line { stroke-dashoffset: 0; } .mkt-detail-panel[data-detail="2"].is-active .mkt-team-pulse { opacity: 0; } /* Cross-device family mock — pin devices to their final tilted resting state, draw the sync line, hide the moving pulse. Each device's --tilt is set on its own base rule (see mkt-dv-monitor etc. above), so a single transform here resolves correctly per-element without three separate selectors. */ .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-monitor, .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-tablet, .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-phone, .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-phone-card--active, .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-sync-line, .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-sync-pulse { animation: none; } .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-monitor, .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-tablet, .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-phone { opacity: 1; transform: rotate(var(--tilt)) scale(1); } .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-sync-line { stroke-dashoffset: 0; } .mkt-detail-panel[data-detail="5"].is-active .mkt-dv-sync-pulse { opacity: 0; } .mkt-typing-dot { animation: none; opacity: 0.6; } .mkt-analytics-fill { transition: none; } .mkt-analytics-fill::after { animation: none; } [data-level-forecast] .mkt-forecast-fill[data-fill-to="78"] { width: 78%; } [data-level-forecast] .mkt-forecast-fill[data-fill-to="42"] { width: 42%; } [data-level-forecast] .mkt-forecast-fill[data-fill-to="65"] { width: 65%; } .mkt-forecast-fill { transition: none; } .mkt-forecast-fill::after { animation: none; } .mkt-forecast-header, .mkt-forecast-stats, .mkt-forecast-foot { opacity: 1; transform: none; transition: none; } .mkt-forecast-row { opacity: 1; transform: none; transition: none; box-shadow: var(--shadow-sm); } .mkt-forecast-live-dot { animation: none; } .mkt-forecast-eta { opacity: 1; transform: none; transition: none; animation: none; } } /* ── Book a demo lead form ─────────────────────────────────── */ .mkt-nav--book-demo .mkt-nav-inner { justify-content: space-between; } .mkt-nav--book-demo .mkt-nav-actions { margin-left: auto; } .mkt-book-demo { padding: var(--space-8) 0 var(--space-10); min-height: calc(100vh - 4rem); background: var(--neutral-50); } .mkt-book-demo-shell { width: 100%; } .mkt-book-demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(var(--space-6), 5vw, var(--space-10)); align-items: start; } .mkt-book-demo-intro { padding-top: var(--space-2); max-width: 28rem; } .mkt-book-demo-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--t-label-size); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral-700); margin-bottom: var(--space-3); } .mkt-book-demo-intro h1 { font-family: var(--font-display); font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 700; color: var(--fg1); margin-bottom: var(--space-4); letter-spacing: -0.03em; line-height: 1.1; } .mkt-book-demo-lede { font-size: var(--t-body-size); line-height: 1.65; color: var(--fg2); margin-bottom: var(--space-6); } .mkt-book-demo-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); } .mkt-book-demo-points li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--t-body-size); line-height: 1.5; color: var(--fg2); } .mkt-book-demo-points i, .mkt-book-demo-points svg { flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; color: var(--coral-500); } .mkt-book-demo-panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(var(--space-5), 3vw, var(--space-7)); box-shadow: var(--shadow-sm); } .mkt-form-optional { font-weight: 400; color: var(--fg3); } @media (max-width: 900px) { .mkt-book-demo-grid { grid-template-columns: 1fr; gap: var(--space-6); } .mkt-book-demo-intro { max-width: none; } } .mkt-form { display: flex; flex-direction: column; gap: var(--space-4); } .mkt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (max-width: 540px) { .mkt-form-row { grid-template-columns: 1fr; } } .mkt-form-field label { display: block; font-size: var(--t-label-size); font-weight: 600; color: var(--fg1); margin-bottom: var(--space-2); } .mkt-form-field input, .mkt-form-field textarea { width: 100%; font-family: var(--font-sans); font-size: var(--t-body-size); color: var(--fg1); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .mkt-form-field input:focus, .mkt-form-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-subtle); } .mkt-form-field textarea { min-height: 6rem; resize: vertical; } .mkt-form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .mkt-form-note { font-size: var(--t-caption-size); color: var(--fg3); line-height: 1.5; } .mkt-form-note a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .mkt-book-demo-thanks, .mkt-book-demo-error { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-elevated); } .mkt-book-demo-thanks { border-color: var(--mint-200); background: var(--mint-50); } .mkt-book-demo-error { border-color: var(--coral-200); background: var(--coral-50); } .mkt-book-demo-thanks h2, .mkt-book-demo-error h2 { font-size: var(--t-h3-size); font-weight: 700; margin-bottom: var(--space-2); } .mkt-book-demo-thanks p, .mkt-book-demo-error p { font-size: var(--t-body-size); color: var(--fg2); line-height: 1.6; margin-bottom: var(--space-4); } .mkt-book-demo-thanks p:last-child, .mkt-book-demo-error p:last-child { margin-bottom: 0; }