/* ============================================================ SharedTasks Marketing — Direction A "Quiet Confidence" White canvas, ink type, light-grey cards, dark footer band, single blue accent. Cal Sans display + Inter body. ============================================================ */ :root { /* Theme — light/dark via `light-dark()`. Default follows the OS via `color-scheme: light dark`; `[data-theme="light|dark"]` (set on ) overrides by switching the resolved color-scheme. Dark values mirror the Direction A design bundle's A_TOK_DARK. */ color-scheme: light dark; /* Palette */ --canvas: light-dark(#ffffff, #131316); --surface-soft: light-dark(#f8f8f9, #1a1a1e); --surface-card: light-dark(#f4f4f5, #1f1f24); --surface-dark: light-dark(#0e0e10, #0a0a0c); --surface-dark-elev: light-dark(#1a1a1e, #1f1f24); --on-dark: #ffffff; --on-dark-soft: #a8a8b0; --hairline: light-dark(#e8e8ea, #2a2a30); --hairline-soft: light-dark(#f1f1f3, #23232a); --ink: light-dark(#0e0e10, #f4f4f6); --body: light-dark(#3a3a42, #c8c8d0); --muted: light-dark(#75757f, #8a8a93); --accent: light-dark(#2f6df4, #5b8cff); --accent-soft: light-dark(#e9f0fe, #1e2a4a); /* Hover/focus shades for ink and accent buttons — picked to match the theme's contrast direction (in dark, the primary CTA is a light pill with dark text, so its "hover" lightens further). */ --ink-hover: light-dark(#1c1c20, #e2e3e7); --accent-hover: light-dark(#2960dc, #7ba3ff); --accent-focus-ring: light-dark(rgba(47, 109, 244, 0.14), rgba(91, 140, 255, 0.22)); /* Persona accent palette — used by drawn mocks for member avatars. Slightly lifted in dark so they read against dark surfaces. */ --warm: light-dark(#f4ad55, #f6b86a); --pink: light-dark(#ec80a8, #f297bb); --emerald: light-dark(#3fae84, #5cc098); --violet: light-dark(#8b6dd9, #a489e8); /* Status — used by form validation messages, error cards, and Blazor's fallback error boundary. Theme-aware so dark mode reads as muted-red text on a deep-red tinted card instead of bright crimson on white. */ --danger: light-dark(#b91c1c, #f87171); --danger-soft: light-dark(#fef2f2, rgba(225, 29, 72, 0.16)); --danger-border: light-dark(#fecaca, rgba(225, 29, 72, 0.30)); --danger-strong: light-dark(#991b1b, #fca5a5); /* Typography */ --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-display: "Cal Sans", "Inter", sans-serif; /* Spacing scale */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 5.5rem; --sp-8: 8rem; --content-max: 1180px; --section-pad: 6rem; } /* Manual override — `[data-theme]` on wins over the OS preference by pinning the resolved color-scheme, which is what `light-dark()` keys off. */ [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } @media (max-width: 720px) { :root { --section-pad: 3.5rem; } } /* ============== Reset / Base ============== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--canvas); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* ============== Typography ============== */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.06; letter-spacing: -0.025em; margin: 0; font-weight: 500; } h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing: -0.035em; line-height: 1.02; } h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); } h3 { font-size: 1.15rem; letter-spacing: -0.012em; } /* FocusOnNavigate sets tabindex=-1 + .focus() on h1 after every route change so screen readers announce the new page. The default focus ring is visual noise here. */ h1:focus { outline: none; } p { margin: 0 0 var(--sp-3); } em { font-style: italic; font-family: var(--font-display); font-weight: 400; color: var(--accent); } ::selection { background: var(--ink); color: var(--canvas); } /* Visually hidden — accessible alt text without taking layout space */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============== Word rotator (preserves existing JS classes) ============== */ .rotator { line-height: 1.02; position: relative; display: inline-block; vertical-align: baseline; /* clip-path instead of overflow:hidden — overflow:hidden on an inline-block shifts the baseline to the bottom margin edge, making rotated words ride high above the surrounding text. clip-path clips without that side effect. Negative right inset gives italic glyphs room for ink that extends past their advance width (italic correction); without it the trailing letter clips. */ clip-path: inset(0 -0.12em 0 0); color: inherit; } .rotator__sizer { visibility: hidden; display: inline-grid; } .rotator__sizer > span { grid-area: 1 / 1; white-space: pre; } .rotator__word { position: absolute; left: 0; top: 0; white-space: pre; opacity: 0; transform: translateY(100%); transition: transform 520ms cubic-bezier(.2,.8,.2,1), opacity 360ms ease; } .rotator__word--active { opacity: 1; transform: translateY(0); } .rotator__word--prev { opacity: 0; transform: translateY(-100%); } /* Wrap the rotator in this span to apply the brand accent treatment — italic Cal Sans in solid accent. The rotator words inherit color/font/style. */ .rot-accent { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--accent); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; } html { scroll-behavior: auto; } } /* ============== Common bits ============== */ .wide { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--sp-4); } .eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; background: var(--accent-soft); padding: 0.4rem 0.75rem; border-radius: 999px; } .section-eyebrow { font-size: 0.78rem; font-weight: 600; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.85rem; display: block; } /* ============== CTAs ============== */ .cta-primary, .cta-secondary, .cta-accent { display: inline-flex; align-items: center; gap: 0.4rem; height: 2.5rem; padding: 0 1.1rem; border-radius: 9px; font-size: 0.875rem; font-weight: 600; cursor: pointer; letter-spacing: -0.01em; transition: transform 180ms cubic-bezier(.2,.7,.2,1.4), background 160ms ease, box-shadow 200ms ease, border-color 160ms ease; text-decoration: none; white-space: nowrap; } .cta-primary { background: var(--ink); color: var(--canvas); border: 1px solid var(--ink); } .cta-primary:hover { transform: translateY(-1px); background: var(--ink-hover); box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.25); } .cta-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .cta-secondary { background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline); } .cta-secondary:hover { border-color: var(--ink); background: var(--surface-soft); } .cta-secondary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .cta-accent { background: var(--accent); color: #fff; border: 1px solid var(--accent); } .cta-accent:hover { transform: translateY(-1px); background: var(--accent-hover); } .cta-fineprint { font-size: 0.78rem; color: var(--muted); margin-left: 0.4rem; } /* ============== Hero (Home) ============== */ .hero { padding: var(--section-pad) 0 calc(var(--section-pad) - 1rem); } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; } .hero-content h1 { margin: 1rem 0 1.4rem; font-weight: 500; } .hero-content .lede { font-size: clamp(1.05rem, 1.45vw, 1.1rem); line-height: 1.55; color: var(--body); max-width: 28rem; margin: 0 0 1.75rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; } /* Below this width the mock crowds the headline; hide it and let the copy breathe. */ @media (max-width: 1080px) { .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } .hero-content h1 { max-width: 16ch; } .hero-mock { display: none; } } /* ============== Trust strip ============== */ .trust-strip { border-top: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); background: var(--surface-soft); padding: 1.25rem 0; } .trust-strip .wide { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.78rem; color: var(--muted); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; } /* ============== Section base ============== */ .section { padding: var(--section-pad) 0; } .section--tight { padding: 0 0 var(--section-pad); } /* Section header with title + side blurb */ .section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.25rem; gap: 2.5rem; flex-wrap: wrap; } .section-head h2 { font-weight: 500; } .section-head__blurb { font-size: 1rem; color: var(--body); max-width: 20rem; margin: 0; line-height: 1.55; } /* ============== Highlights — 3-up with mocks ============== */ .highlights { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 1rem; } .highlight-card { background: var(--surface-card); border-radius: 14px; padding: 1.625rem; display: flex; flex-direction: column; gap: 1.125rem; } .highlight-card__icon { width: 30px; height: 30px; border-radius: 8px; background: var(--canvas); border: 1px solid var(--hairline); display: grid; place-items: center; color: var(--ink); } .highlight-card h3 { font-family: var(--font-body); font-size: 1.1875rem; font-weight: 600; margin: 0 0 0.4rem; letter-spacing: -0.01em; } .highlight-card p { font-size: 0.875rem; color: var(--body); line-height: 1.5; margin: 0; } .highlight-card__mock { margin-top: auto; } @media (max-width: 980px) { .highlights { grid-template-columns: 1fr; } } /* ============== Dark band (open task pool) ============== */ .dark-band { background: var(--surface-dark); color: var(--on-dark); padding: var(--section-pad) 0; } .dark-band__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; } .dark-band h2 { font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 500; margin: 0 0 1.125rem; color: var(--on-dark); } .dark-band p { font-size: 1rem; color: var(--on-dark-soft); line-height: 1.55; max-width: 30rem; margin: 0 0 1.4rem; } .dark-band ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.625rem; } .dark-band li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: var(--on-dark-soft); } .dark-band li .check { width: 18px; height: 18px; border-radius: 5px; background: var(--accent); color: #fff; display: grid; place-items: center; flex-shrink: 0; } @media (max-width: 880px) { .dark-band__inner { grid-template-columns: 1fr; gap: 2.5rem; } } /* ============== Audience grid (4-up) ============== */ .audiences { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .audience-card { border-radius: 14px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; min-height: 12rem; background: var(--canvas); border: 1px solid var(--hairline); } .audience-card--primary { background: var(--ink); color: var(--canvas); border-color: var(--ink); } .audience-card__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-card); color: var(--ink); display: grid; place-items: center; } .audience-card--primary .audience-card__icon { background: var(--accent); color: #fff; } .audience-card__body { margin-top: auto; } .audience-card h3 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.25rem; letter-spacing: -0.005em; } .audience-card p { font-size: 0.85rem; color: var(--body); line-height: 1.5; margin: 0; } .audience-card--primary p { color: var(--on-dark-soft); } @media (max-width: 980px) { .audiences { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .audiences { grid-template-columns: 1fr; } } /* ============== Testimonial trio ============== */ .testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .testimonial { background: var(--canvas); border: 1px solid var(--hairline); border-radius: 14px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.125rem; } .testimonial__stars { display: flex; gap: 2px; color: var(--warm); } .testimonial__quote { font-size: 0.97rem; color: var(--ink); line-height: 1.5; margin: 0; } .testimonial__attr { display: flex; align-items: center; gap: 0.625rem; margin-top: auto; } .testimonial__attr-name { font-size: 0.8125rem; font-weight: 600; } .testimonial__attr-role { font-size: 0.75rem; color: var(--muted); } @media (max-width: 880px) { .testimonials { grid-template-columns: 1fr; } } /* ============== Closing CTA card ============== */ .closing-cta { background: var(--surface-card); border-radius: 18px; padding: 3.5rem 3.5rem; text-align: center; } .closing-cta h2 { font-weight: 500; margin: 0 0 0.85rem; } .closing-cta p { font-size: 1rem; color: var(--body); margin: 0 0 1.6rem; } .closing-cta__actions { display: inline-flex; gap: 0.625rem; } @media (max-width: 720px) { .closing-cta { padding: 2.5rem 1.5rem; } } /* ============== Page header (Features, About, Contact) ============== */ .page-header { padding: calc(var(--section-pad) - 0.5rem) 0 calc(var(--section-pad) / 2); } .page-header__inner { max-width: 55rem; margin: 0 auto; padding: 0 var(--sp-4); } .page-header h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); margin: 1.125rem 0 1rem; max-width: 18ch; font-weight: 500; } .page-header .lede { font-size: clamp(1.05rem, 1.6vw, 1.15rem); color: var(--body); max-width: 40rem; margin: 0 0 1.75rem; line-height: 1.5; } .page-header__actions { display: inline-flex; gap: 0.625rem; flex-wrap: wrap; } /* ============== Features — grouped sections ============== */ .feature-group { padding-bottom: 3.5rem; } .feature-group:last-of-type { padding-bottom: 0; } .feature-group__head { display: grid; grid-template-columns: 15rem 1fr; gap: 2rem; padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--hairline-soft); } .feature-group__kicker { font-size: 0.78rem; font-weight: 600; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0.4rem; } .feature-group__title { font-family: var(--font-body); font-size: 1.375rem; font-weight: 600; color: var(--ink); letter-spacing: -0.018em; } .feature-group__items { display: grid; gap: 1rem; } .feature-group__items[data-cols="3"] { grid-template-columns: repeat(3, 1fr); } .feature-group__items[data-cols="2"] { grid-template-columns: repeat(2, 1fr); } .feature-group__items[data-cols="4"] { grid-template-columns: repeat(4, 1fr); } .feature-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: 14px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; } .feature-card__icon { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; } .feature-card h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .feature-card p { font-size: 0.85rem; color: var(--body); line-height: 1.55; margin: 0; } @media (max-width: 980px) { .feature-group__head { grid-template-columns: 1fr; gap: 0.75rem; } .feature-group__items[data-cols] { grid-template-columns: 1fr; } } /* "What we don't ship" anti-list dark card */ .anti-list-card { background: var(--surface-dark); color: var(--on-dark); border-radius: 18px; padding: 3.5rem 3rem; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: center; } .anti-list-card h2 { font-size: clamp(1.75rem, 3vw, 2.375rem); font-weight: 500; line-height: 1.1; margin: 0 0 1.125rem; color: var(--on-dark); } .anti-list-card p { font-size: 0.97rem; color: var(--on-dark-soft); line-height: 1.55; margin: 0; } .anti-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; } .anti-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--surface-dark-elev); border-radius: 10px; font-size: 0.9rem; color: var(--on-dark-soft); } .anti-list__x { width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: var(--on-dark-soft); display: grid; place-items: center; flex-shrink: 0; } .anti-list__strike { text-decoration: line-through; } @media (max-width: 880px) { .anti-list-card { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.75rem; } } /* ============== About — timeline + principles + team ============== */ .timeline { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 4rem; } .timeline__card { background: var(--surface-card); border-radius: 14px; padding: 1.5rem; } .timeline__year { font-size: 0.78rem; font-weight: 600; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; } .timeline__title { font-family: var(--font-body); font-size: 1.1875rem; font-weight: 600; margin: 0 0 0.5rem; letter-spacing: -0.018em; } .timeline__copy { font-size: 0.875rem; color: var(--body); line-height: 1.55; margin: 0; } @media (max-width: 880px) { .timeline { grid-template-columns: 1fr; } } .principles { display: grid; grid-template-columns: 16rem 1fr; gap: 3.5rem; } .principles__kicker { font-size: 0.78rem; font-weight: 600; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0.25rem; } .principles__list { display: grid; gap: 1.75rem; } .principle h3 { font-family: var(--font-body); font-size: 1.375rem; font-weight: 600; margin: 0 0 0.5rem; letter-spacing: -0.018em; color: var(--ink); } .principle p { font-size: 0.97rem; color: var(--body); line-height: 1.55; margin: 0; max-width: 40rem; } @media (max-width: 880px) { .principles { grid-template-columns: 1fr; gap: 1rem; } } .team-card { background: var(--surface-card); border-radius: 18px; padding: 2.75rem 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; } .team-card h2 { font-weight: 500; margin: 0 0 0.75rem; font-size: clamp(1.5rem, 2.6vw, 2rem); } .team-card p { font-size: 0.95rem; color: var(--body); line-height: 1.55; margin: 0; } .team-avatars { display: flex; gap: 1rem; justify-content: flex-end; flex-wrap: wrap; } .team-avatar { text-align: center; } .team-avatar__circle { width: 80px; height: 80px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 1.625rem; font-weight: 500; font-family: var(--font-display); margin: 0 auto 0.5rem; } .team-avatar__name { font-size: 0.8125rem; font-weight: 600; } @media (max-width: 720px) { .team-card { grid-template-columns: 1fr; padding: 2rem 1.5rem; } .team-avatars { justify-content: center; } } /* ============== Contact — 2-col layout ============== */ .contact-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; } .contact-methods { display: grid; gap: 0.875rem; align-content: start; } .contact-method { background: var(--surface-card); border-radius: 12px; padding: 1.125rem; display: flex; gap: 0.875rem; align-items: flex-start; } .contact-method__icon { width: 34px; height: 34px; border-radius: 9px; background: var(--canvas); border: 1px solid var(--hairline); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; } .contact-method__title { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.2rem; } .contact-method__copy { font-size: 0.82rem; color: var(--body); margin: 0; } .contact-legal { margin-top: 1rem; font-size: 0.78rem; color: var(--muted); line-height: 1.55; } .contact-form { background: var(--canvas); border: 1px solid var(--hairline); border-radius: 14px; padding: 1.75rem; display: grid; gap: 0.875rem; } .contact-form__row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .contact-form .field { display: grid; gap: 0.375rem; } .contact-form .field label { font-size: 0.78rem; font-weight: 600; color: var(--ink); } .contact-form .field input, .contact-form .field textarea { font-family: var(--font-body); font-size: 0.875rem; color: var(--ink); background: var(--canvas); border: 1px solid var(--hairline); border-radius: 9px; padding: 0.625rem 0.75rem; line-height: 1.5; transition: border-color 160ms ease, box-shadow 160ms ease; } .contact-form .field textarea { resize: vertical; min-height: 7rem; } .contact-form .field input:focus, .contact-form .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-focus-ring); } .contact-form .field input:disabled, .contact-form .field textarea:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.7; } .contact-form__submit-row { display: flex; align-items: center; justify-content: space-between; margin-top: 0.4rem; gap: 0.75rem; flex-wrap: wrap; } .contact-form__fineprint { font-size: 0.78rem; color: var(--muted); } .contact-form .validation-message { font-size: 0.78rem; color: var(--danger); } .contact-form .field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-form__error { background: var(--danger-soft); border: 1px solid var(--danger-border); color: var(--danger-strong); padding: 0.65rem 0.85rem; border-radius: 8px; font-size: 0.875rem; } .contact-success { text-align: center; padding: 1.75rem 0; } .contact-success h2 { font-size: 1.4rem; color: var(--accent); font-weight: 500; margin: 0 0 0.5rem; } .contact-success p { color: var(--body); margin: 0; } @media (max-width: 880px) { .contact-layout { grid-template-columns: 1fr; gap: 2rem; } } /* ============== Page-load motion ============== */ @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .animate-rise > * { animation: rise 600ms cubic-bezier(.2,.7,.2,1) both; } .animate-rise > *:nth-child(1) { animation-delay: 40ms; } .animate-rise > *:nth-child(2) { animation-delay: 120ms; } .animate-rise > *:nth-child(3) { animation-delay: 200ms; } .animate-rise > *:nth-child(4) { animation-delay: 280ms; } /* page-anim.js suppresses the rise animation on subsequent home renders by writing inline `animation: none` onto the children as Blazor inserts the wrapper — Blazor reconciles / classes against the server response on every nav and strips anything it didn't send, so the marker has to live on the children themselves (which Blazor doesn't reconcile after they're inserted). Refreshing the tab clears the in-memory flag. */ /* ============== Validation / error ============== */ .validation-message { color: var(--danger); font-size: 0.85rem; } .blazor-error-boundary { background: var(--danger); color: var(--canvas); padding: 1rem 1.25rem; font-family: var(--font-body); } .blazor-error-boundary::after { content: "An error has occurred." } /* ============================================================ Drawn product mocks — used inline across the marketing pages. Pure visual fakes, no real data. Hand-tuned to match Direction A. ============================================================ */ .mock-card { background: var(--canvas); border-radius: 14px; border: 1px solid var(--hairline); overflow: hidden; width: 100%; } .mock-card--shadow { box-shadow: 0 22px 48px -28px rgba(14, 14, 16, 0.18), 0 4px 14px -8px rgba(14, 14, 16, 0.06); } .mock-card--soft { background: var(--surface-soft); } .mock-card__head { padding: 0.875rem 1.125rem; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; } .mock-card__head-title { display: flex; align-items: center; gap: 0.625rem; } .mock-card__title { font-size: 0.85rem; font-weight: 600; color: var(--ink); line-height: 1.2; } .mock-card__subtitle { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; } .mock-card__chip-icon { width: 22px; height: 22px; border-radius: 6px; background: var(--surface-card); color: var(--ink); display: grid; place-items: center; flex-shrink: 0; } .mock-card__pills { display: flex; gap: 0.375rem; } .mock-pill { padding: 0.25rem 0.625rem; border-radius: 999px; background: transparent; color: var(--muted); font-size: 0.72rem; font-weight: 600; } .mock-pill--active { background: var(--ink); color: var(--canvas); } /* Avatar — used for member chips. Color comes via inline style. */ .mock-avatar { border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 600; flex-shrink: 0; } .mock-avatar--sm { width: 22px; height: 22px; font-size: 0.66rem; } .mock-avatar--md { width: 26px; height: 26px; font-size: 0.72rem; } .mock-avatar--lg { width: 36px; height: 36px; font-size: 0.78rem; } .mock-avatar--unassigned { background: var(--surface-card); color: var(--muted); border: 1px dashed var(--hairline); } /* ----- Task list ----- */ .mock-tasklist__items { list-style: none; padding: 0; margin: 0; } .mock-tasklist__row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.875rem; padding: 0.8125rem 1.125rem; border-top: 1px solid var(--hairline-soft); } .mock-tasklist__row:first-child { border-top: none; } .mock-tasklist__check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--hairline); background: transparent; display: grid; place-items: center; color: #fff; flex-shrink: 0; } .mock-tasklist__check--done { border-color: var(--accent); background: var(--accent); } .mock-tasklist__title { font-size: 0.875rem; font-weight: 500; color: var(--ink); } .mock-tasklist__title--done { color: var(--muted); text-decoration: line-through; } .mock-tasklist__meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.2rem; font-size: 0.75rem; color: var(--muted); } .mock-tasklist__claim { background: var(--accent-soft); color: var(--accent); padding: 0.05rem 0.45rem; border-radius: 4px; font-weight: 600; font-size: 0.685rem; } .mock-tasklist__arrow { color: var(--muted); display: flex; align-items: center; } .mock-tasklist__foot { padding: 0.625rem 1.125rem; border-top: 1px solid var(--hairline-soft); background: var(--surface-soft); display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--muted); } .mock-tasklist__foot-add { display: flex; align-items: center; gap: 0.5rem; } /* ----- Open tasks (dark band variant flips its own colors) ----- */ .mock-opentasks__items { list-style: none; padding: 0; margin: 0; } .mock-opentasks__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem; padding: 0.875rem 1.125rem; border-top: 1px solid var(--hairline); } .mock-opentasks__row:first-child { border-top: none; } .mock-opentasks--dark { background: var(--surface-dark-elev); border-color: rgba(255, 255, 255, 0.08); } .mock-opentasks--dark .mock-card__head { border-bottom-color: rgba(255, 255, 255, 0.08); } .mock-opentasks--dark .mock-card__title { color: var(--on-dark); } .mock-opentasks--dark .mock-card__subtitle { color: var(--on-dark-soft); } .mock-opentasks--dark .mock-opentasks__row { border-top-color: rgba(255, 255, 255, 0.08); } .mock-opentasks--dark .mock-opentasks__title { color: var(--on-dark); } .mock-opentasks--dark .mock-opentasks__sub { color: var(--on-dark-soft); } .mock-opentasks__title { font-size: 0.875rem; font-weight: 500; color: var(--ink); } .mock-opentasks__sub { font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; } .mock-opentasks__claim { background: var(--accent); color: #fff; border: none; padding: 0.4rem 0.875rem; border-radius: 7px; font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: inherit; } .mock-opentasks__claimed { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--muted); } .mock-opentasks--dark .mock-opentasks__claimed { color: var(--on-dark-soft); } /* ----- Chat (full) ----- */ .mock-chat__head { padding: 0.75rem 1rem; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: 0.625rem; color: var(--muted); } .mock-chat__head-title { font-size: 0.81rem; font-weight: 600; color: var(--ink); } .mock-chat__head-meta { font-size: 0.72rem; color: var(--muted); } .mock-chat__messages { padding: 0.875rem; display: grid; gap: 0.625rem; } .mock-chat__msg { display: flex; gap: 0.625rem; align-items: flex-start; } .mock-chat__msg-body { display: grid; gap: 0.125rem; } .mock-chat__msg-meta { display: flex; align-items: baseline; gap: 0.4rem; } .mock-chat__who { font-size: 0.78rem; font-weight: 600; color: var(--ink); } .mock-chat__time { font-size: 0.69rem; color: var(--muted); } .mock-chat__bubble { margin-top: 0.125rem; font-size: 0.84rem; color: var(--body); line-height: 1.45; background: var(--surface-card); padding: 0.45rem 0.7rem; border-radius: 9px; display: inline-block; max-width: 16.25rem; } .mock-chat__bubble--me { background: var(--accent-soft); } .mock-chat__composer { margin: 0 0.875rem 0.875rem; padding: 0.6rem 0.75rem; border: 1px solid var(--hairline); border-radius: 9px; display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; color: var(--muted); } .mock-chat__composer-send { margin-left: auto; color: var(--accent); display: flex; } /* ----- Chat preview (compact, used in highlight card) ----- */ .mock-chatpreview { background: var(--canvas); border: 1px solid var(--hairline); border-radius: 10px; padding: 0.75rem; display: grid; gap: 0.5rem; } .mock-chatpreview__row { display: flex; gap: 0.5rem; align-items: center; } .mock-chatpreview__bubble { font-size: 0.8125rem; color: var(--body); background: var(--surface-card); padding: 0.3rem 0.625rem; border-radius: 7px; } /* ----- Checklist ----- */ .mock-checklist__head { padding: 0.8125rem 1rem; border-bottom: 1px solid var(--hairline); } .mock-checklist__title { font-size: 0.81rem; font-weight: 600; color: var(--ink); } .mock-checklist__sub { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; } .mock-checklist__items { list-style: none; padding: 0.5rem 0; margin: 0; } .mock-checklist__row { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 0.625rem; padding: 0.5rem 1rem; } .mock-checklist__drag { color: var(--hairline); display: flex; } .mock-checklist__check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--hairline); background: transparent; display: grid; place-items: center; color: #fff; flex-shrink: 0; } .mock-checklist__check--done { border-color: var(--accent); background: var(--accent); } .mock-checklist__name { font-size: 0.84rem; color: var(--ink); } .mock-checklist__name--done { color: var(--muted); text-decoration: line-through; } .mock-checklist__qty { color: var(--muted); font-weight: 400; } .mock-checklist__like { display: flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; color: var(--muted); }