/* Bubble marketing site — shared tokens + base. Mirrors lib/design/tokens/* so the website reads as one piece with the app. */ :root { /* Lilac brand scale (light). */ --lilac-50: #F6F1FA; --lilac-100: #EADCF2; --lilac-300: #CDB0E0; --lilac-500: #B388D6; --lilac-700: #7E5AA8; --lilac-900: #3F2F55; /* Semantic — light mode. */ --canvas: var(--lilac-50); --surface: #FDFAF5; /* warm off-white, polaroid feel */ --surface-alt: var(--lilac-100); --polaroid: #FFFEFA; --fg-default: var(--lilac-900); --fg-muted: #6B5D7A; --fg-inverse: #FFFFFF; --accent-primary: var(--lilac-500); --accent-strong: var(--lilac-700); --border-subtle: #EBE4F2; --border-strong: var(--lilac-300); --shadow-soft: 0 8px 24px rgba(63, 47, 85, 0.06); --shadow-lift: 0 18px 48px rgba(63, 47, 85, 0.12); /* Iridescent shimmer stops — matches BubbleShimmer.light. */ --sh-rose: #FBA8C2; --sh-lavender: #C9A8E8; --sh-periwinkle: #ADBAEE; --sh-sky: #A0DAE5; --sh-mint: #A6E0BD; /* Type scale. */ --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Spacing (4pt grid, matching design/tokens/spacing.dart). */ --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px; --s24: 24px; --s32: 32px; --s48: 48px; --s64: 64px; --s96: 96px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-xl: 40px; --max-content: 1080px; } /* Dark tokens — applied whenever has the `dark` class. The theme toggle script in each page sets this class based on (a) the user's stored preference in localStorage, falling back to (b) the system `prefers-color-scheme`. */ html.dark { --canvas: #1A1623; --surface: #251F32; --surface-alt: #2F2740; --polaroid: #332D46; --fg-default: #ECE4F2; --fg-muted: #998FAA; --fg-inverse: #1A1623; --accent-primary: var(--lilac-300); --accent-strong: #AB8FCC; --border-subtle: #322A42; --border-strong: #4A3E5E; --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.24); --shadow-lift: 0 18px 48px rgba(0, 0, 0, 0.4); --sh-rose: #B26680; --sh-lavender: #8266A8; --sh-periwinkle: #6677B0; --sh-sky: #5A8EA5; --sh-mint: #5C9D78; } /* Hint UA-rendered form controls / scrollbars about the active scheme. */ html { color-scheme: light; } html.dark { color-scheme: dark; } /* Reset-lite. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } html, body { background: var(--canvas); color: var(--fg-default); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } ::selection { background: var(--lilac-300); color: var(--lilac-900); } /* Typography helpers — match AppTypography. */ .display { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 6vw, 64px); line-height: 1.08; letter-spacing: -0.02em; } .heading-l { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3vw, 32px); line-height: 1.18; letter-spacing: -0.01em; } .heading-m { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.3; } .heading-s { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.3; } .body-l { font-size: 17px; line-height: 1.55; } .body-m { font-size: 14px; line-height: 1.45; } .caption { font-size: 12px; line-height: 1.35; font-weight: 500; color: var(--fg-muted); } .muted { color: var(--fg-muted); } /* Layout. */ .container { width: 100%; max-width: var(--max-content); margin-inline: auto; padding-inline: var(--s24); } @media (min-width: 720px) { .container { padding-inline: var(--s32); } } /* Buttons. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s8); padding: 14px 22px; border-radius: var(--radius-lg); font-weight: 700; font-size: 15px; letter-spacing: 0.01em; transition: transform 120ms ease, box-shadow 200ms ease, background 200ms ease; user-select: none; } .btn-primary { background: var(--accent-primary); color: var(--fg-inverse); box-shadow: var(--shadow-soft); } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: var(--surface); color: var(--fg-default); border: 1px solid var(--border-subtle); } .btn-ghost:hover { border-color: var(--border-strong); } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.7; cursor: not-allowed; pointer-events: none; } .btn .pill-soon { background: rgba(255, 255, 255, 0.18); font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .btn-ghost .pill-soon { background: var(--surface-alt); color: var(--fg-muted); } /* Header / footer. */ .site-header { position: sticky; top: 0; z-index: 10; backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); background: color-mix(in oklab, var(--canvas) 78%, transparent); border-bottom: 1px solid var(--border-subtle); } .site-header__row { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { display: inline-flex; align-items: center; gap: var(--s8); font-family: var(--font-display); font-weight: 700; font-size: 20px; } /* Brand mark — three overlapping outlined circles, mirroring the `Icons.bubble_chart_outlined` logo used in-app (see lib/design/components/ bubble_logo.dart). The SVG is the mask; the shimmer gradient is the fill. Animating `--shimmer-angle` via @property gives a smooth rotating cycle that matches BubbleShimmer in the app. */ @property --shimmer-angle { syntax: ''; initial-value: 0deg; inherits: false; } .brand__mark { --shimmer-angle: 0deg; width: 32px; height: 32px; background: conic-gradient( from var(--shimmer-angle), var(--sh-rose), var(--sh-lavender), var(--sh-periwinkle), var(--sh-sky), var(--sh-mint), var(--sh-rose) ); -webkit-mask: var(--logo-mask) center / contain no-repeat; mask: var(--logo-mask) center / contain no-repeat; animation: shimmer-rotate 12s linear infinite; flex-shrink: 0; } :root { /* Inline SVG mask for the brand mark — three outlined circles, arranged like Material's bubble_chart_outlined. Radii are tuned slightly small so there's a visible gap between adjacent rings (matches the in-app BubbleLogo, which renders the same Material icon at scale). */ --logo-mask: url('data:image/svg+xml;utf8,'); } @keyframes shimmer-rotate { to { --shimmer-angle: 360deg; } } /* Theme toggle button — sun / moon. */ .theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: transparent; color: var(--fg-muted); border: 1px solid var(--border-subtle); transition: color 120ms ease, background 200ms ease, border-color 200ms ease; } .theme-toggle:hover { color: var(--fg-default); background: var(--surface); border-color: var(--border-strong); } .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } html.dark .theme-toggle__sun { display: block; } html.dark .theme-toggle__moon { display: none; } .nav-links { display: flex; gap: var(--s24); align-items: center; } .nav-links a { font-size: 14px; color: var(--fg-muted); transition: color 120ms ease; } .nav-links a:hover { color: var(--fg-default); } .site-footer { margin-top: var(--s96); padding-block: var(--s48); border-top: 1px solid var(--border-subtle); color: var(--fg-muted); font-size: 14px; } .site-footer__row { display: flex; flex-wrap: wrap; gap: var(--s16) var(--s32); align-items: center; justify-content: space-between; } .site-footer__links { display: flex; gap: var(--s24); flex-wrap: wrap; } .site-footer a:hover { color: var(--fg-default); } /* Visually hidden. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Cross-document view transitions. Browsers that support this fade the old page into the new one instead of the blank-white flash you get on a normal hard navigation. The named transitions keep the header + brand mark in place so only the body content crossfades. */ @view-transition { navigation: auto; } .brand, .brand__mark { view-transition-name: brand-mark; } .site-header { view-transition-name: site-header; } @keyframes vt-fade-in { from { opacity: 0; } } @keyframes vt-fade-out { to { opacity: 0; } } ::view-transition-old(root) { animation: 280ms cubic-bezier(0.4, 0, 0.2, 1) both vt-fade-out; } ::view-transition-new(root) { animation: 380ms cubic-bezier(0.4, 0, 0.2, 1) both vt-fade-in; } /* Reduced motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }