/* ManageBloc public marketing site — standard CSS, no framework. */ :root { --mb-bg: #ffffff; --mb-bg-soft: #fbfcfd; --mb-text: #101a24; --mb-muted: #5c6b7a; --mb-border: #e6eaee; /* Brand teal, kept identical to the app: src/index.css --primary is `174 73% 40%`. Declared in hsl() so there is no hex rounding drift. KNOWN (not fixed on purpose): white text on this solid fill is ~2.7:1, below WCAG AA 4.5:1. This matches how the app uses the colour today; a future accessibility pass may darken the marketing CTA specifically. */ --mb-accent: hsl(174 73% 40%); --mb-accent-hover: hsl(174 73% 32%); --mb-focus: hsl(174 73% 40%); /* = app --ring */ --mb-container: 1200px; --mb-header-h: 64px; --mb-radius: 10px; } /* Global/element rules are scoped to non-platform surfaces. The shared deployment loads this sheet from on every URL so the marketing page never paints unstyled, and the surface gate sets html[data-surface="app"] before first paint, so nothing below can reach the platform UI. */ html:not([data-surface="app"]) *, html:not([data-surface="app"]) *::before, html:not([data-surface="app"]) *::after { box-sizing: border-box; } html:not([data-surface="app"]) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html:not([data-surface="app"]) body { margin: 0; background: var(--mb-bg); color: var(--mb-text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; } html:not([data-surface="app"]) img { max-width: 100%; height: auto; } html:not([data-surface="app"]) a { color: inherit; text-decoration: none; } html:not([data-surface="app"]) svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } html:not([data-surface="app"]) :focus-visible { outline: 2px solid var(--mb-focus); outline-offset: 2px; border-radius: 6px; } html:not([data-surface="app"]) .container { width: 100%; max-width: var(--mb-container); margin: 0 auto; padding: 0 20px; } .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--mb-bg); border: 1px solid var(--mb-border); padding: 8px 12px; border-radius: 8px; font-size: 14px; } .skip-link:focus { left: 16px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--mb-border); } .site-header__inner { display: flex; align-items: center; gap: 28px; height: var(--mb-header-h); } .brand { display: inline-flex; align-items: center; gap: 10px; flex: none; } .brand__mark { width: 32px; height: 32px; object-fit: contain; } .brand__text { display: flex; flex-direction: column; line-height: 1.15; } /* Wordmark artwork (832x75, aspect ~11.09:1). Custom lettering, not a typeface — width-constrained so it can never overflow the brand row. */ .brand__name { display: block; width: 142px; max-width: 100%; height: auto; } /* Sized so the tagline spans roughly the 142px wordmark width above it. */ .brand__tag { font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; color: var(--mb-muted); } /* Desktop nav (shown from 1024px up) */ .nav { display: none; flex: 1 1 auto; } .nav__list { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; } .nav__item { position: relative; } .nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--mb-text); background: none; border: 0; font-family: inherit; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .nav__link:hover { background: var(--mb-bg-soft); color: var(--mb-accent); } .nav__chevron { width: 14px; height: 14px; transition: transform 0.15s ease; } .nav__trigger[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); } /* Product dropdown */ .menu { position: absolute; top: calc(100% + 10px); left: 0; width: min(640px, calc(100vw - 40px)); background: var(--mb-bg); border: 1px solid var(--mb-border); border-radius: 14px; box-shadow: 0 12px 32px -12px rgba(16, 26, 36, 0.18); padding: 10px; animation: mb-menu-in 0.12s ease-out; } .menu[hidden] { display: none; } @keyframes mb-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .menu { animation: none; } html:not([data-surface="app"]) { scroll-behavior: auto; } } .menu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0; padding: 0; list-style: none; } .menu__item { display: block; padding: 10px 12px; border-radius: 10px; transition: background-color 0.15s ease; } .menu__item:hover { background: var(--mb-bg-soft); } .menu__title { display: block; font-size: 14px; font-weight: 600; } .menu__desc { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mb-muted); } /* Actions */ .actions { display: none; align-items: center; gap: 10px; margin-left: auto; flex: none; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: var(--mb-radius); font-size: 14px; font-weight: 600; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn--ghost { color: var(--mb-text); } .btn--ghost:hover { background: var(--mb-bg-soft); color: var(--mb-accent); } .btn--primary { background: var(--mb-accent); color: #ffffff; } .btn--primary:hover { background: var(--mb-accent-hover); } .btn--block { width: 100%; } /* Mobile toggle */ .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--mb-border); border-radius: 10px; background: var(--mb-bg); color: var(--mb-text); cursor: pointer; } .menu-toggle svg { width: 20px; height: 20px; } /* Mobile panel */ .mobile-nav { border-top: 1px solid var(--mb-border); background: var(--mb-bg); max-height: calc(100dvh - var(--mb-header-h)); overflow-y: auto; } .mobile-nav[hidden] { display: none; } .mobile-nav__inner { padding-top: 10px; padding-bottom: 20px; } .mobile-nav__section, .mobile-nav__link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 4px; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--mb-text); background: none; border: 0; border-bottom: 1px solid var(--mb-border); cursor: pointer; text-align: left; } .mobile-nav__section[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); } .mobile-nav__sublist { margin: 0; padding: 6px 0 10px; list-style: none; } .mobile-nav__sublist[hidden] { display: none; } .mobile-nav__sublist a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: 14.5px; color: var(--mb-muted); } .mobile-nav__sublist a:hover { background: var(--mb-bg-soft); color: var(--mb-text); } .mobile-nav__actions { display: grid; gap: 10px; margin-top: 18px; } @media (min-width: 1024px) { :root { --mb-header-h: 72px; } .nav, .actions { display: flex; } .menu-toggle, .mobile-nav { display: none; } .brand__mark { width: 36px; height: 36px; } } /* Public 404 (framework-free) */ .site-404 { padding: 96px 24px 120px; text-align: center; } .site-404 h1 { margin: 0 0 12px; font-size: 32px; letter-spacing: -0.01em; } .site-404 p { margin: 0 0 20px; color: var(--mb-muted); } /* ---------- Hero ---------- */ .hero { padding: 56px 0 64px; overflow: hidden; } .hero__inner { text-align: center; } .hero__title { margin: 0 auto; max-width: 20ch; font-size: clamp(32px, 6.2vw, 40px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; } .hero__sub { margin: 18px auto 0; max-width: 40ch; font-size: 16px; color: var(--mb-muted); } .hero__actions { margin-top: 26px; display: grid; } .hero__cta { min-height: 48px; padding: 0 22px; font-size: 15px; } /* Product visual */ .hero__shot { margin: 40px auto 0; } /* Same pending pattern as the spotlight sections: keep the layout box, hide only the visual, so loading behaviour is consistent page-wide. */ .hero__shot[data-shot="pending"] .hero__frame { border-color: transparent; background: transparent; box-shadow: none; } .hero__shot[data-shot="pending"] .hero__img { opacity: 0; } .hero__frame { border: 1px solid var(--mb-border); border-radius: 12px; background: var(--mb-bg-soft); overflow: hidden; box-shadow: 0 18px 40px -24px rgba(16, 26, 36, 0.28); } .hero__img { display: block; width: 100%; height: auto; } @media (min-width: 640px) { .hero { padding: 64px 0 80px; } .hero__title { font-size: clamp(40px, 5.4vw, 52px); } .hero__sub { margin-top: 20px; max-width: 52ch; font-size: 17.5px; } .hero__actions { display: flex; justify-content: center; gap: 12px; margin-top: 30px; } .hero__shot { margin-top: 52px; } .hero__frame { border-radius: 14px; box-shadow: 0 28px 60px -32px rgba(16, 26, 36, 0.3); } } @media (min-width: 1024px) { .hero { padding: 84px 0 96px; } .hero__title { max-width: 24ch; font-size: clamp(52px, 4.6vw, 62px); } .hero__sub { max-width: 58ch; font-size: 19px; } .hero__shot { max-width: 1120px; margin-top: 56px; } /* Subtle teal lift behind the product frame, and a bottom bleed so the screen reads as a continuing product surface. */ .hero__shot { position: relative; } .hero__shot::before { content: ""; position: absolute; inset: 8% 6% -4%; background: radial-gradient(60% 60% at 50% 40%, hsl(174 73% 40% / 0.14), transparent 70%); filter: blur(28px); z-index: -1; } .hero__frame { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .hero__img { margin-bottom: -3%; } } /* ---------- Connected workflow (1C) ---------- */ .flow { padding: 56px 0 64px; background: var(--mb-bg-soft); border-top: 1px solid var(--mb-border); } .flow__eyebrow { margin: 0; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mb-muted); } .flow__title { margin: 10px 0 0; text-align: center; font-size: clamp(24px, 5.4vw, 30px); line-height: 1.15; letter-spacing: -0.018em; font-weight: 700; } .flow__sub { margin: 12px auto 0; max-width: 58ch; text-align: center; font-size: 15.5px; color: var(--mb-muted); } /* Rail: mobile = vertical connected sequence */ .flow__rail { margin: 32px auto 0; padding: 0; list-style: none; display: grid; gap: 22px; max-width: 420px; } .flow__step { position: relative; } .flow__node { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--mb-border); border-radius: 999px; background: var(--mb-bg); color: var(--mb-text); } .flow__glyph { width: 16px; height: 16px; flex: none; color: var(--mb-muted); } .flow__label { font-size: 14px; font-weight: 600; } .flow__meta { display: none; } /* Hairline + chevron connector between steps */ .flow__conn { position: absolute; left: 50%; bottom: 100%; height: 22px; display: flex; align-items: center; justify-content: center; transform: translateX(-50%); color: var(--mb-border); } .flow__conn::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--mb-border); } .flow__conn svg { position: relative; width: 14px; height: 14px; background: var(--mb-bg-soft); transform: rotate(90deg); color: #aab4bf; } /* Teal emphasis marks the start and the end of the sequence */ .flow__step--start .flow__node, .flow__step--end .flow__node { border-color: hsl(174 73% 40% / 0.34); } .flow__step--start .flow__glyph, .flow__step--end .flow__glyph { color: var(--mb-accent); } /* Tablet: two rows of three */ @media (min-width: 640px) { .flow { padding: 72px 0 80px; } .flow__title { font-size: clamp(28px, 3.6vw, 34px); } .flow__rail { max-width: 620px; grid-template-columns: repeat(3, 1fr); column-gap: 46px; row-gap: 40px; margin-top: 40px; } .flow__node { justify-content: center; border-radius: var(--mb-radius); padding: 0 12px; } /* Horizontal connectors within a row */ .flow__conn { left: auto; right: 100%; bottom: auto; top: 50%; height: auto; width: 46px; transform: translateY(-50%); } .flow__conn::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; } .flow__conn svg { transform: none; background: var(--mb-bg-soft); } /* Snake order so the sequence never jumps across the rail: row 1 runs left-to-right, drops straight down under Task, then row 2 runs right-to-left with its chevrons pointing that way. */ .flow__step:nth-child(1) { grid-area: 1 / 1; } .flow__step:nth-child(2) { grid-area: 1 / 2; } .flow__step:nth-child(3) { grid-area: 1 / 3; } .flow__step:nth-child(4) { grid-area: 2 / 3; } .flow__step:nth-child(5) { grid-area: 2 / 2; } .flow__step:nth-child(6) { grid-area: 2 / 1; } .flow__step:nth-child(4) .flow__conn { left: 50%; right: auto; top: auto; bottom: 100%; width: auto; height: 40px; transform: translateX(-50%); } .flow__step:nth-child(4) .flow__conn::before { top: 0; bottom: 0; left: 50%; right: auto; width: 1px; height: auto; } .flow__step:nth-child(4) .flow__conn svg { transform: rotate(90deg); } /* Row 2 connectors sit on the right of their node and point left. */ .flow__step:nth-child(5) .flow__conn, .flow__step:nth-child(6) .flow__conn { right: auto; left: 100%; } .flow__step:nth-child(5) .flow__conn svg, .flow__step:nth-child(6) .flow__conn svg { transform: scaleX(-1); } } /* Desktop: one row of six, with example micro-content */ @media (min-width: 1024px) { .flow { padding: 96px 0 104px; } .flow__title { font-size: clamp(32px, 2.9vw, 38px); } .flow__sub { font-size: 17px; } .flow__rail { max-width: 1120px; grid-template-columns: repeat(6, 1fr); column-gap: 40px; row-gap: 0; margin-top: 52px; align-items: start; } .flow__node { min-height: 42px; } .flow__meta { display: block; margin-top: 8px; padding: 0 4px; text-align: center; font-size: 12.5px; color: var(--mb-muted); } /* All six steps back on one row, all five connectors horizontal. */ .flow__step:nth-child(1), .flow__step:nth-child(2), .flow__step:nth-child(3), .flow__step:nth-child(4), .flow__step:nth-child(5), .flow__step:nth-child(6) { grid-area: auto; } .flow__step:nth-child(5) .flow__conn, .flow__step:nth-child(6) .flow__conn, .flow__step:nth-child(4) .flow__conn, .flow__conn { left: auto; right: 100%; top: 21px; bottom: auto; width: 40px; height: auto; transform: none; } .flow__step:nth-child(4) .flow__conn::before, .flow__step:nth-child(5) .flow__conn::before, .flow__step:nth-child(6) .flow__conn::before, .flow__conn::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; } .flow__step:nth-child(4) .flow__conn svg, .flow__step:nth-child(5) .flow__conn svg, .flow__step:nth-child(6) .flow__conn svg, .flow__conn svg { transform: none; } } /* ---------- Calendar spotlight (1D) ---------- */ .spot { padding: 56px 0 64px; background: var(--mb-bg); } .spot__inner { display: grid; gap: 32px; } .spot__eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mb-accent); } .spot__title { margin: 10px 0 0; font-size: clamp(24px, 5.4vw, 30px); line-height: 1.15; letter-spacing: -0.018em; font-weight: 700; } .spot__body { margin: 14px 0 0; max-width: 56ch; font-size: 16px; color: var(--mb-muted); } .spot__list { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .spot__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--mb-text); } .spot__check { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--mb-accent); stroke-width: 2.4; } .spot__shot { margin: 0; } /* Pending state keeps the layout box (so the lazy image is still fetched and no shift occurs) but shows no frame, border or partial image. */ .spot__shot[data-shot="pending"] .spot__frame { border-color: transparent; background: transparent; box-shadow: none; } .spot__shot[data-shot="pending"] .spot__img { opacity: 0; } .spot__frame { border: 1px solid var(--mb-border); border-radius: 12px; background: var(--mb-bg-soft); overflow: hidden; box-shadow: 0 18px 40px -24px rgba(16, 26, 36, 0.28); } .spot__img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1008; } /* Mobile: intentional crop of the left of the week so the hour gutter, day columns and blocks stay readable instead of shrinking to nothing. */ @media (max-width: 639px) { .spot__frame { aspect-ratio: 4 / 3; } .spot__shot .spot__img { width: 200%; max-width: none; height: auto; aspect-ratio: 1600 / 1008; } } @media (min-width: 640px) { .spot { padding: 72px 0 80px; } .spot__inner { gap: 40px; } .spot__body { font-size: 17px; } .spot__shot { max-width: 720px; width: 100%; margin-inline: auto; } .spot__frame { border-radius: 14px; } } @media (min-width: 1024px) { .spot { padding: 96px 0 104px; } .spot__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: 56px; } .spot__title { font-size: clamp(32px, 2.9vw, 38px); } .spot__body { font-size: 17px; } .spot__shot { max-width: none; } /* Reserved for the next spotlight section, which alternates sides. */ .spot--reverse .spot__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .spot--reverse .spot__text { order: 2; } .spot--reverse .spot__shot { order: 1; } } /* ---------- Projects + Tasks spotlight (1E) ---------- */ /* Alternates the band tint so 1D (white) and 1E read as separate steps. */ .spot--soft { background: var(--mb-bg-soft); } /* The frame sits on the tinted band, so keep its inner fill white like the real product surface instead of blending into the section. */ .spot--soft .spot__frame { background: var(--mb-bg); } /* Mobile: crop to the top-left of the list (section names + task titles) rather than shrinking the full table until the rows are unreadable. */ @media (max-width: 639px) { .spot--tasks .spot__frame { aspect-ratio: 4 / 3; } .spot--tasks .spot__img { width: 185%; max-width: none; } } /* ---------- Closing CTA band ---------- */ .cta { padding: 56px 0 64px; background: var(--mb-bg); border-top: 1px solid var(--mb-border); } .cta__inner { text-align: center; } .cta__title { margin: 0; font-size: clamp(26px, 5.4vw, 32px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; } .cta__sub { margin: 14px auto 0; max-width: 52ch; font-size: 16px; color: var(--mb-muted); } .cta__btn { margin-top: 26px; min-height: 48px; padding: 0 22px; font-size: 15px; } @media (min-width: 640px) { .cta { padding: 72px 0 80px; } .cta__sub { font-size: 17px; } } @media (min-width: 1024px) { .cta { padding: 96px 0 104px; } .cta__title { font-size: clamp(32px, 2.9vw, 38px); } } /* ---------- Footer ---------- */ /* Vertical spacing lives on the