/* ============================================================ Base360 — design language Read off the LIVE :root of https://b2c.base360.ai on 2026-09-04. b2c is the shipped brand and the only source. The older base360.ai (WordPress/uicore) values are NOT this system. Typography updated from the supplied reference on 2026-09-09. Single source of truth: add values here first, never inline. ============================================================ */ :root { color-scheme: light; /* ---------- Tier 1 · literal, as shipped ---------- */ --ink: #0E1526; /* headings, body-strong */ --slate: #4B5568; /* secondary copy */ --mute: #616B7E; /* muted copy */ --faint: #6A7383; /* labels, captions */ --paper: #F8FAFD; /* page field */ --card: #FFFFFF; /* card / surface fill */ --surf: #F7F9FC; /* sunken surface */ --sky: #E7ECF6; /* tinted wash band */ --line: rgba(14, 21, 38, .10); --line-soft: rgba(14, 21, 38, .06); --blue: #1E6BE8; /* link / data blue */ --blue-deep: #0E4CB8; --blue-wash: rgba(30, 107, 232, .08); /* The CTA fill is its own value on b2c — indigo, not --blue. */ --cta: #5070FE; --cta-deep: #3B4FE0; --cta-ink: #FAFAFA; /* The far end of the same ramp. b2c uses it as the last stop of the closing card's gradient; nothing else on the page needs it. */ --cta-abyss: #202BA0; /* Type and lines drawn ON indigo. Solved against --cta-deep, the lightest stop the closing card actually reaches: --on-cta #fff 6.21 AA + AAA --on-cta-2 white 90% 5.36 AA at any size --on-cta-3 white 84% 4.89 AA at any size b2c's own card starts its gradient at #4F6FFF, where even pure white body copy measures 4.16 — under AA. See sections.css. */ --on-cta: #FFFFFF; --on-cta-2: rgba(255, 255, 255, .90); --on-cta-3: rgba(255, 255, 255, .84); --on-cta-line: rgba(255, 255, 255, .40); --on-cta-fill: rgba(255, 255, 255, .12); /* Used exactly once on b2c, as a micro-badge. Ration it. */ --coral: #D6296B; /* ---------- Tier 2 · semantic ---------- */ --text: var(--ink); --text-2: var(--slate); --text-muted: var(--mute); --text-faint: var(--faint); --page-bg: var(--paper); --surface: var(--card); --surface-sunken: var(--surf); --hairline: var(--line); --accent: var(--cta); /* ---------- Tier 3 · UI ---------- */ --r-chip: 10px; --r-field: 12px; --r-card: 14px; --r-win: 16px; --r-pill: 50px; --rail: 52px; /* Soft, blurred, downward. Never a hard offset. */ --sh-card: 0 8px 20px -8px rgba(14, 21, 38, .10), 0 2px 6px rgba(14, 21, 38, .05); --sh-float: 0 18px 40px -16px rgba(14, 21, 38, .16), 0 4px 12px rgba(14, 21, 38, .06); --sh-lift: 0 0 0 1px rgba(14, 21, 38, .05), 0 8px 22px rgba(14, 21, 38, .07), 0 40px 80px rgba(14, 21, 38, .16); --glass: rgba(255, 255, 255, .74); --glass-blur: blur(20px) saturate(1.7); /* The sticky header's own height. It is read in three places — nav.css sets the bar to it, base.css clears it on anchor jumps, and hero.css subtracts it to make the hero exactly one viewport — so it is a token rather than the same literal three times. */ --header-h: 64px; --shell: 1240px; --gap: 18px; --band: 132px; /* vertical rhythm between sections */ /* ---------- Typography ---------- */ /* Typography reference: system headings, Roboto copy, Inter mock UI. */ --system-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; --sans: var(--system-sans); --head: var(--system-sans); --body-font: "Roboto", var(--system-sans); --mock-font: "Inter", var(--system-sans); --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace; --h-weight: 600; --d1-size: clamp(38px, 4.4vw + 10px, 57px); --d1-lh: 1.12; --d1-track: -.25px; --h2-size: clamp(30.4px, 2.9vw + 10px, 44px); --h2-lh: 1.10; --h2-track: -.03em; --h3-size: 24px; --h3-lh: 1.25; --h3-track: -.48px; --h4-size: 17px; --h4-lh: 1.35; --h4-track: -.2px; --lead-size: 17px; --lead-lh: 1.5; --body-size: 17px; --body-lh: 1.5; --kicker-size: 14px; --kicker-lh: 13.82px; --kicker-track: .058px; --kicker-color: #6B7EC8; --violet: #7B4FD8; /* the far end of the heading gradient and the about line */ --heading-gradient: linear-gradient(90deg, var(--blue-deep) 15%, var(--violet) 75%); /* The quieter second line of a two-tone heading ("We built it / because we needed it"). 5.3:1 on the story panel. */ --heading-soft: #4F68AE; --mock-title-size: 14px; --mock-channel-size: 12px; --mock-button-size: 9.63px; --mock-button-lh: 13.75px; --mock-search-size: 9.5px; --mock-status-size: 8.25px; --mock-sidebar-size: 8px; --mock-sidebar-lh: 20px; --small-size: 14.5px; --small-lh: 1.5; --label-size: 10px; --label-lh: 1.6; --label-track: .09em; /* ---------- Motion ---------- */ --spring: cubic-bezier(.22, 1, .36, 1); --over: cubic-bezier(.34, 1.45, .5, 1); --ease: cubic-bezier(.2, .9, .3, 1); --dur-fast: .25s; --dur: .42s; --dur-slow: .8s; } /* ============================================================ STR landing — additions on top of the b2c extraction. Above is b2c with the supplied typography; everything below is this page's own vocabulary, built only from values above. ============================================================ */ :root { /* ---------- Breakpoints ---------- Three, named, and the only ones on this page. narrow <= 600px mid 601 - 1023px wide >= 1024px Media queries cannot read custom properties, so these live as literals in the CSS — but nowhere else, and only these. */ /* ---------- Chapter identity (D1 · option B) ---------- Four hues, one per chapter of the loop. Solved rather than picked: every one lands at 4.84-4.87 contrast on white, the same weight as --blue, so no chapter reads as more important than another. Hues sit clear of --cta indigo (232), --st-ok green (155) and --coral (338). Colour is never the only signal — the chapter name and the number range always carry the same information as text. Consumed through --ch, which loop.css sets once per chapter; nothing should reference --ch-1..4 directly. */ --ch-1: var(--blue); /* 217 · Connect & set up #1E6BE8 */ --ch-2: #0E7D8E; /* 188 · Win demand */ --ch-3: #8459CF; /* 262 · Deliver the stay */ --ch-4: #BA4881; /* 330 · Run the company */ --ch: var(--blue); /* default, for anything outside a chapter */ /* The ink a SELECTED step label is written in. Chapter 1 has a deeper cousin of its hue already (--blue-deep, 7.65:1) and uses it; 2, 3 and 4 were solved to 4.84-4.87 on white and are legible at body size as they stand, so they are their own deep. One token either way, set once per chapter in loop.css. */ --ch-deep: var(--blue-deep); /* ---------- Scene kit ---------- The schematic UI primitives are drawn, not screenshotted. They get their own muted palette so a scene never competes with real page copy. */ --scene-bg: var(--card); --scene-chrome: #EEF2F9; --scene-line: rgba(14, 21, 38, .09); --scene-fill: #F2F5FA; --scene-ink: var(--slate); /* Scene status. Semantic, and separate from --accent. */ --st-ok: #1F9D6B; --st-ok-bg: rgba(31, 157, 107, .10); --st-wait: #B7791F; --st-wait-bg: rgba(183, 121, 31, .10); --st-off: var(--faint); --st-off-bg: rgba(14, 21, 38, .05); /* A fourth state the kit never needed: an import row that came back rejected. It reuses --coral rather than adding a red, because the page already rations that one hue for exactly this kind of once-per-page signal. */ --st-fail: var(--coral); --st-fail-bg: color-mix(in oklab, var(--coral) 12%, transparent); /* ---------- Claude ---------- Claude's own light theme, for the scenes that draw Claude itself: the Claude MCP step (the Pricing step's Claude window still carries the same values as literals). Claude's colours, not ours; they are here so Claude looks like Claude. */ --claude-paper: #FAF9F5; --claude-fill: #EFEDE4; --claude-line: #E5E3DA; --claude-ink: #141413; --claude-ink-2: #6B6A63; --claude-accent: #D97757; --claude-ghost: color-mix(in srgb, var(--claude-ink-2) 24%, transparent); /* ---------- Product chrome ---------- Read off the BASE360 app itself, not off b2c: the marketing site and the product do not share a navigation colour, and the one scene on this page that draws the real app has to be the real app. Used only by scene-channels.css. --nav-on the active sidebar item's fill --blk-bar a calendar block (maintenance / cleaning) --blk-* the two block types' avatar tones */ --nav-on: #14493A; --blk-bar: #E5392C; --blk-maint: #EE8B2E; --blk-clean: #16BBD2; /* Legible variants of the scene palette for small labels and filled UI. Resolve these here so scene-local aliases can inherit the derived values. */ --scene-ok: color-mix(in srgb, var(--st-ok) 72%, var(--ink)); --scene-wait: color-mix(in srgb, var(--st-wait) 70%, var(--ink)); --scene-fail: color-mix(in srgb, var(--st-fail) 85%, var(--ink)); --scene-block: color-mix(in srgb, var(--blk-bar) 88%, var(--ink)); /* The product's own active-nav green, read off the dashboard screenshots rather than derived from this scale — an app mock is a portrait of BASE360, so its chrome follows BASE360. Same value as the channel-management branch: one product, one green. Correct it here and every use follows. */ --nav-on: #14493A; /* ---------- Hero crop figure ---------- Seven crops of the product drifting around the hero copy. --ring-cycle one full pass; a crop reaches the front every seventh of it --ring-rx/ry the ellipse. Viewport-relative on purpose: a fixed-pixel ellipse is balanced at one hero height and adrift at every other one. The clamps are what keep the top pair clear of the lede and the front crop clear of the strip. --crop-w the crop itself, fixed — a crop that rescales with the viewport stops being readable The one knob worth turning is --ring-cycle. Station spacing is arithmetic, not taste; see the pair check in hero-ring.css before touching rx, ry or the width. */ --ring-cycle: 42s; --ring-rx: clamp(430px, 33vw, 505px); /* Derived, not picked: 40% of the band left between the header and the channel strip — the same band .hero-ring spans. This is what keeps the front crop off the strip and the top pair off the buttons at every hero height instead of only at the one it was eyeballed in. */ --ring-ry: min(calc((100svh - var(--header-h) - 100px) * .30), 320px); --crop-w: 244px; /* How far the hero copy rides above the band's centre. Negative is up. It buys clearance under the buttons for the front crop to grow into without moving the ring, and it changes nothing below the hero — see the note in hero-ring.css. */ --hero-copy-lift: -68px; /* ---------- Loop geometry ---------- Every chapter is a frame that holds the screen for the length of its steps: frame + (steps x travel) = its scroll height. --stage-h is also read by loop.css as the timeline inset, so it has to stay under the viewport height it is measured in — the 760px height guard on the pinned mode is what keeps it there. */ --stage-h: clamp(560px, calc(100vh - 150px), 780px); --travel: 44vh; /* scroll spent per step inside a frame */ /* ---------- Spacing scale ---------- One scale. No off-scale values anywhere on the page. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; }