. .bp-sr-only: visually-hidden but read by screen readers. Use for labels / structural cues that don't need visual rendering. ======================================================================== */ .bp-skip-link { position: fixed; top: 0; left: 0; padding: 0.75rem 1rem; background: #6aa4ff; color: #0b0c12; font-weight: 700; text-decoration: none; border-radius: 0 0 0.5rem 0; transform: translateY(-150%); transition: transform 0.18s ease-out; z-index: 1000; } .bp-skip-link:focus-visible { transform: translateY(0); outline: 2px solid #b48cff; outline-offset: -2px; } .bp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ======================================================================== Reduced motion — pause every animation + transition when the user has asked for less motion (vestibular accessibility, battery concerns, focus preference). Standard fallback recipe; the marquee in particular runs an infinite translateX which is the worst offender for users with motion sensitivity. ======================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .bp-marquee-track { animation: none !important; } } /* ======================================================================== Reset ======================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bp-bg); color: var(--bp-text); font-family: var(--bp-font-sans); font-size: var(--bp-fs-md); line-height: var(--bp-lh-body); font-feature-settings: "kern", "liga", "calt", "ss01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: var(--bp-lh-tight); letter-spacing: -0.02em; } p { margin: 0; } img, svg { display: block; max-width: 100%; height: auto; } a { color: var(--bp-accent); text-decoration: none; transition: color 0.15s var(--bp-easing); } a:hover, a:focus-visible { color: var(--bp-accent-2); } :focus-visible { outline: 2px solid var(--bp-accent); outline-offset: 2px; border-radius: var(--bp-r-sm); } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--bp-accent); color: var(--bp-bg); } /* ======================================================================== Layout primitives ======================================================================== */ .bp-container { width: 100%; max-width: var(--bp-container); margin: 0 auto; padding-inline: var(--bp-s-6); } .bp-stack > * + * { margin-top: var(--bp-s-4); } .bp-stack-lg > * + * { margin-top: var(--bp-s-8); } .bp-stack-xl > * + * { margin-top: var(--bp-s-12); } .bp-cluster { display: flex; flex-wrap: wrap; gap: var(--bp-s-4); align-items: center; } .bp-cluster-lg { gap: var(--bp-s-8); } .bp-grid { display: grid; gap: var(--bp-s-6); } .bp-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); } .bp-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); } .bp-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); } /* 3-pane layout for the future webmail: sidebar | list | reading */ .bp-pane { display: grid; gap: var(--bp-s-2); grid-template-columns: minmax(13rem, 18rem) minmax(18rem, 28rem) 1fr; min-height: 100vh; } .bp-pane > .bp-pane-side { background: var(--bp-surface); border-right: 1px solid var(--bp-border); } .bp-pane > .bp-pane-list { background: var(--bp-bg); border-right: 1px solid var(--bp-border); } .bp-pane > .bp-pane-reading { background: var(--bp-bg); } @media (max-width: 60rem) { .bp-pane { grid-template-columns: 1fr; } .bp-pane > .bp-pane-side { display: none; } .bp-pane > .bp-pane-list { border-right: none; } } /* ======================================================================== Typography helpers ======================================================================== */ .bp-h1 { font-size: var(--bp-fs-4xl); line-height: var(--bp-lh-tight); } .bp-h2 { font-size: var(--bp-fs-3xl); line-height: var(--bp-lh-tight); } .bp-h3 { font-size: var(--bp-fs-2xl); line-height: var(--bp-lh-snug); } .bp-h4 { font-size: var(--bp-fs-xl); line-height: var(--bp-lh-snug); } .bp-eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: var(--bp-fs-xs); font-weight: 600; color: var(--bp-text-dim); } .bp-lead { font-size: var(--bp-fs-lg); color: var(--bp-text-dim); max-width: 36em; } .bp-mono { font-family: var(--bp-font-mono); font-size: 0.95em; } .bp-grad-text { background: var(--bp-grad-1); -webkit-background-clip: text; background-clip: text; color: transparent; } .bp-dim { color: var(--bp-text-dim); } .bp-mute { color: var(--bp-text-mute); } @media (max-width: 48rem) { .bp-h1 { font-size: var(--bp-fs-3xl); } .bp-h2 { font-size: var(--bp-fs-2xl); } } /* ======================================================================== Components ======================================================================== */ .bp-button { display: inline-flex; align-items: center; gap: var(--bp-s-2); padding: var(--bp-s-3) var(--bp-s-5); border-radius: var(--bp-r-md); border: 1px solid transparent; background: var(--bp-grad-1); color: var(--bp-bg); font-weight: 600; font-size: var(--bp-fs-sm); letter-spacing: 0.01em; cursor: pointer; transition: transform 0.15s var(--bp-easing), box-shadow 0.15s var(--bp-easing); text-decoration: none; } .bp-button:hover, .bp-button:focus-visible { transform: translateY(-1px); box-shadow: var(--bp-shadow-md); color: var(--bp-bg); } .bp-button-ghost { background: transparent; color: var(--bp-text); border-color: var(--bp-border); } .bp-button-ghost:hover, .bp-button-ghost:focus-visible { background: var(--bp-surface); color: var(--bp-text); border-color: var(--bp-accent); } .bp-card { background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: var(--bp-r-lg); padding: var(--bp-s-6); transition: border-color 0.2s var(--bp-easing), transform 0.2s var(--bp-easing); } .bp-card-feature:hover { border-color: var(--bp-accent); transform: translateY(-2px); } .bp-card h4 { margin-bottom: var(--bp-s-3); } .bp-badge { display: inline-flex; align-items: center; padding: var(--bp-s-1) var(--bp-s-3); border-radius: var(--bp-r-full); background: var(--bp-surface-2); color: var(--bp-text-dim); font-size: var(--bp-fs-xs); font-weight: 600; letter-spacing: 0.04em; } .bp-input { width: 100%; padding: var(--bp-s-3) var(--bp-s-4); background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: var(--bp-r-md); color: var(--bp-text); transition: border-color 0.15s var(--bp-easing); } .bp-input:focus { border-color: var(--bp-accent); outline: none; } .bp-input::placeholder { color: var(--bp-text-mute); } /* ======================================================================== Form blocks — auth forms (signup / signin / forgot / reset) ======================================================================== */ .bp-form-card { max-width: 28rem; margin: 0 auto; background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: var(--bp-r-lg); padding: var(--bp-s-8); display: flex; flex-direction: column; gap: var(--bp-s-5); } .bp-form-card h1 { font-size: var(--bp-fs-2xl); line-height: var(--bp-lh-snug); } .bp-form-card form { display: flex; flex-direction: column; gap: var(--bp-s-4); } .bp-field { display: flex; flex-direction: column; gap: var(--bp-s-2); } .bp-field label { font-size: var(--bp-fs-sm); color: var(--bp-text-dim); font-weight: 600; } .bp-field-help { font-size: var(--bp-fs-xs); color: var(--bp-text-mute); } .bp-form-error { padding: var(--bp-s-3) var(--bp-s-4); background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); border-radius: var(--bp-r-md); color: var(--bp-error); font-size: var(--bp-fs-sm); } .bp-form-success { padding: var(--bp-s-3) var(--bp-s-4); background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.3); border-radius: var(--bp-r-md); color: var(--bp-success); font-size: var(--bp-fs-sm); } /* ======================================================================== Header / nav ======================================================================== */ .bp-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 12, 18, 0.78); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--bp-border); } .bp-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--bp-s-6); padding-block: var(--bp-s-4); } .bp-logo { display: inline-flex; align-items: center; gap: var(--bp-s-3); font-weight: 700; letter-spacing: -0.02em; color: var(--bp-text); font-size: var(--bp-fs-lg); } .bp-logo svg { width: 1.75rem; height: 1.75rem; } .bp-nav-links { display: flex; gap: var(--bp-s-6); font-size: var(--bp-fs-sm); font-weight: 500; } .bp-nav-links a { color: var(--bp-text-dim); } .bp-nav-links a:hover, .bp-nav-links a:focus-visible { color: var(--bp-text); } @media (max-width: 48rem) { .bp-nav-links { display: none; } } /* ======================================================================== Hero ======================================================================== */ .bp-hero { padding-block: var(--bp-s-20) var(--bp-s-16); position: relative; overflow: hidden; } .bp-hero::before { content: ""; position: absolute; inset: -20% 30% auto auto; width: 60rem; height: 60rem; background: radial-gradient(circle at 30% 30%, rgba(106, 164, 255, 0.15), transparent 60%); pointer-events: none; filter: blur(4px); } .bp-hero-grid { display: grid; gap: var(--bp-s-12); grid-template-columns: 1fr; align-items: center; } @media (min-width: 64rem) { .bp-hero-grid { grid-template-columns: 1.1fr 0.9fr; } } .bp-hero h1 { font-size: clamp(2.25rem, 5vw, 4rem); } /* ======================================================================== Marquee (CSS-only, scrolls infinitely) Used on the homepage for the supported-standards strip; reusable in webmail for a status / latency ticker. ======================================================================== */ .bp-marquee { overflow: hidden; border-block: 1px solid var(--bp-border); background: var(--bp-surface); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } .bp-marquee-track { display: flex; gap: var(--bp-s-12); width: max-content; padding-block: var(--bp-s-5); animation: bp-marquee-scroll 40s linear infinite; } .bp-marquee-track:hover { animation-play-state: paused; } .bp-marquee-item { display: inline-flex; align-items: center; gap: var(--bp-s-2); font-family: var(--bp-font-mono); font-size: var(--bp-fs-sm); color: var(--bp-text-dim); white-space: nowrap; } .bp-marquee-item::after { content: ""; display: block; width: 6px; height: 6px; border-radius: var(--bp-r-full); background: var(--bp-accent); opacity: 0.45; margin-left: var(--bp-s-12); } @keyframes bp-marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .bp-marquee-track { animation: none; } } /* ======================================================================== Sections ======================================================================== */ .bp-section { padding-block: var(--bp-s-16); } .bp-section-tight { padding-block: var(--bp-s-10); } .bp-section-head { max-width: 42rem; margin-bottom: var(--bp-s-10); } /* ======================================================================== FAQ (pure CSS via

) ======================================================================== */ .bp-faq-item { border: 1px solid var(--bp-border); border-radius: var(--bp-r-md); background: var(--bp-surface); overflow: hidden; transition: border-color 0.15s var(--bp-easing); } .bp-faq-item[open] { border-color: var(--bp-accent); } .bp-faq-item summary { list-style: none; cursor: pointer; padding: var(--bp-s-5) var(--bp-s-6); display: flex; align-items: center; justify-content: space-between; gap: var(--bp-s-4); font-weight: 600; } .bp-faq-item summary::-webkit-details-marker { display: none; } .bp-faq-item summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--bp-text-dim); transition: transform 0.2s var(--bp-easing), color 0.2s var(--bp-easing); } .bp-faq-item[open] summary::after { transform: rotate(45deg); color: var(--bp-accent); } .bp-faq-body { padding: 0 var(--bp-s-6) var(--bp-s-6); color: var(--bp-text-dim); } /* ======================================================================== FAQ — two-column variant for higher-density listings ======================================================================== */ .bp-faq-2col { display: grid; gap: var(--bp-s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 48rem) { .bp-faq-2col { grid-template-columns: 1fr; } } /* ======================================================================== Hero price tag (split-layout hero with prominent monthly price) ======================================================================== */ .bp-hero-price { display: inline-flex; align-items: baseline; gap: var(--bp-s-2); font-size: var(--bp-fs-4xl); font-weight: 800; line-height: 1; background: var(--bp-grad-1); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.03em; } .bp-hero-price .bp-hero-price-period { font-size: var(--bp-fs-lg); font-weight: 600; color: var(--bp-text-dim); -webkit-text-fill-color: var(--bp-text-dim); background: none; } /* ======================================================================== Marquee — split-layout variant (left half scrolls, right half copy) ------------------------------------------------------------------------ The base .bp-marquee is full-width band; .bp-marquee-split is half-width inside a 2-col grid. Used for "regions worldwide" + headline layout. ======================================================================== */ .bp-marquee-split { position: relative; overflow: hidden; border-radius: var(--bp-r-lg); background: var(--bp-surface); border: 1px solid var(--bp-border); padding-block: var(--bp-s-12); mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); } /* ======================================================================== Pricing — 3-tier card grid with center "featured" highlight ======================================================================== */ .bp-pricing-grid { display: grid; gap: var(--bp-s-6); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } @media (max-width: 60rem) { .bp-pricing-grid { grid-template-columns: 1fr; } } .bp-pricing-card { display: flex; flex-direction: column; gap: var(--bp-s-5); padding: var(--bp-s-8); background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: var(--bp-r-lg); transition: border-color 0.15s var(--bp-easing), transform 0.15s var(--bp-easing); } .bp-pricing-card:hover { border-color: var(--bp-accent); transform: translateY(-2px); } .bp-pricing-card-featured { border-color: var(--bp-accent); background: linear-gradient(180deg, rgba(106, 164, 255, 0.06), var(--bp-surface) 30%); box-shadow: var(--bp-shadow-md); } .bp-pricing-card h3 { font-size: var(--bp-fs-xl); margin: 0; } .bp-pricing-card .bp-pricing-price { font-size: var(--bp-fs-3xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: var(--bp-s-2) 0; } .bp-pricing-card .bp-pricing-price small { font-size: var(--bp-fs-md); font-weight: 500; color: var(--bp-text-dim); margin-left: var(--bp-s-2); } .bp-pricing-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--bp-s-2); color: var(--bp-text-dim); font-size: var(--bp-fs-sm); flex: 1; } .bp-pricing-card li { padding-left: 1.25rem; position: relative; } .bp-pricing-card li::before { content: "✓"; position: absolute; left: 0; color: var(--bp-success); font-weight: 700; } .bp-pricing-card .bp-pricing-badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); padding: var(--bp-s-1) var(--bp-s-3); background: var(--bp-grad-1); color: var(--bp-bg); border-radius: var(--bp-r-full); font-size: var(--bp-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .bp-pricing-card-featured { position: relative; } /* ======================================================================== Stats / counters row ======================================================================== */ .bp-stat { text-align: center; padding: var(--bp-s-6) var(--bp-s-4); } .bp-stat-value { font-size: var(--bp-fs-4xl); font-weight: 800; line-height: 1; letter-spacing: -0.03em; background: var(--bp-grad-1); -webkit-background-clip: text; background-clip: text; color: transparent; } .bp-stat-label { margin-top: var(--bp-s-3); color: var(--bp-text-dim); font-size: var(--bp-fs-sm); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } /* ======================================================================== CTA banner — full-width call-out before the footer ======================================================================== */ .bp-cta-banner { position: relative; padding: var(--bp-s-16) var(--bp-s-8); border-radius: var(--bp-r-xl); background: var(--bp-surface); border: 1px solid var(--bp-border); overflow: hidden; } .bp-cta-banner::before { content: ""; position: absolute; inset: -50% -20% auto auto; width: 60%; height: 200%; background: radial-gradient(circle, rgba(180, 140, 255, 0.18), transparent 60%); pointer-events: none; } .bp-cta-banner-grid { position: relative; display: grid; gap: var(--bp-s-6); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; } @media (max-width: 48rem) { .bp-cta-banner-grid { grid-template-columns: 1fr; } } /* ======================================================================== Payment-method grid — small monochrome cells ======================================================================== */ .bp-payment-grid { display: grid; gap: var(--bp-s-3); grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 48rem) { .bp-payment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .bp-payment-cell { display: flex; align-items: center; justify-content: center; height: 3rem; padding: var(--bp-s-2); border: 1px solid var(--bp-border); border-radius: var(--bp-r-md); background: var(--bp-surface); color: var(--bp-text-dim); font-weight: 600; font-size: var(--bp-fs-sm); letter-spacing: 0.04em; transition: border-color 0.15s var(--bp-easing), color 0.15s var(--bp-easing); } .bp-payment-cell:hover { border-color: var(--bp-accent); color: var(--bp-text); } /* ======================================================================== Hero brand visual — full LOGO_SVG as a white-fill brand mark card ------------------------------------------------------------------------ The vendored LOGO_SVG fills its outer 1050x1050 rect white and the envelope-lock-wordmark are subtracted via fill-rule (the page bg shows through). On our dark page that renders as a white card with the brand cut out as a window — clean brand moment in the hero. ------------------------------------------------------------------------ */ .bp-hero-brand { display: flex; align-items: center; justify-content: center; padding: var(--bp-s-4); } .bp-hero-brand svg { width: 100%; max-width: 22rem; height: auto; display: block; border-radius: var(--bp-r-xl); box-shadow: var(--bp-shadow-lg); } /* ======================================================================== Step number — large numerals for the "how it works" 3-card flow ======================================================================== */ .bp-step-num { font-family: var(--bp-font-mono); font-size: var(--bp-fs-2xl); font-weight: 700; letter-spacing: -0.04em; background: var(--bp-grad-1); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: var(--bp-s-3); line-height: 1; } /* ======================================================================== Flow — left-to-right stepped diagram (HTML/CSS, not SVG, so it scales accessibly and collapses on narrow viewports without needing a separate mobile asset). ======================================================================== */ .bp-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: var(--bp-s-4); align-items: stretch; } .bp-flow-3 { grid-template-columns: 1fr auto 1fr auto 1fr; } @media (max-width: 60rem) { .bp-flow, .bp-flow-3 { grid-template-columns: 1fr; } .bp-flow-arrow { transform: rotate(90deg); justify-self: center; } } .bp-flow-step { display: flex; flex-direction: column; gap: var(--bp-s-2); padding: var(--bp-s-5); background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: var(--bp-r-lg); } .bp-flow-step strong { font-size: var(--bp-fs-md); color: var(--bp-text); } .bp-flow-step p { font-size: var(--bp-fs-sm); color: var(--bp-text-dim); line-height: var(--bp-lh-snug); margin: 0; } .bp-flow-step code { font-family: var(--bp-font-mono); font-size: 0.7rem; color: var(--bp-text-mute); background: var(--bp-bg); padding: 0.15rem 0.4rem; border-radius: var(--bp-r-sm); display: inline-block; margin-top: var(--bp-s-1); } .bp-flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--bp-text-mute); font-size: var(--bp-fs-2xl); line-height: 1; } /* ======================================================================== Feature matrix — comparison table across pricing tiers ======================================================================== */ .bp-matrix { width: 100%; border-collapse: collapse; font-size: var(--bp-fs-sm); } .bp-matrix thead th { font-weight: 600; text-align: center; padding: var(--bp-s-4) var(--bp-s-3); border-bottom: 1px solid var(--bp-border); color: var(--bp-text); } .bp-matrix thead th:first-child { text-align: left; color: var(--bp-text-dim); font-weight: 500; } .bp-matrix tbody th { text-align: left; font-weight: 500; padding: var(--bp-s-3); border-bottom: 1px solid var(--bp-border); color: var(--bp-text-dim); } .bp-matrix tbody td { text-align: center; padding: var(--bp-s-3); border-bottom: 1px solid var(--bp-border); color: var(--bp-text); } .bp-matrix .bp-matrix-yes { color: var(--bp-success); font-weight: 700; } .bp-matrix .bp-matrix-no { color: var(--bp-text-mute); } .bp-matrix-section-head th { background: var(--bp-surface); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--bp-fs-xs); color: var(--bp-text-mute); font-weight: 700; } /* ======================================================================== Region table — flag-less list of operator-pickable regions ======================================================================== */ .bp-region-grid { display: grid; gap: var(--bp-s-3); grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 48rem) { .bp-region-grid { grid-template-columns: 1fr; } } .bp-region-cell { padding: var(--bp-s-4); background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: var(--bp-r-md); } .bp-region-cell-code { font-family: var(--bp-font-mono); font-size: var(--bp-fs-xs); color: var(--bp-text-mute); text-transform: uppercase; letter-spacing: 0.08em; } .bp-region-cell-name { font-weight: 600; margin-top: var(--bp-s-1); } /* ======================================================================== Error / empty-state page — centered card on a wide section ======================================================================== */ .bp-error-page { min-height: calc(100vh - 16rem); display: flex; align-items: center; } .bp-error-card { max-width: 36rem; margin: 0 auto; text-align: center; padding: var(--bp-s-12) var(--bp-s-6); display: flex; flex-direction: column; gap: var(--bp-s-5); } .bp-error-code { font-size: var(--bp-fs-4xl); font-weight: 800; line-height: 1; letter-spacing: -0.04em; background: var(--bp-grad-1); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--bp-font-mono); } /* ======================================================================== Footer ======================================================================== */ .bp-footer { border-top: 1px solid var(--bp-border); padding-block: var(--bp-s-10); color: var(--bp-text-dim); font-size: var(--bp-fs-sm); } .bp-footer-grid { display: grid; gap: var(--bp-s-8); grid-template-columns: 1.5fr 1fr 1fr 1fr; } @media (max-width: 60rem) { .bp-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 36rem) { .bp-footer-grid { grid-template-columns: 1fr; } } .bp-footer h5 { color: var(--bp-text); font-size: var(--bp-fs-sm); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--bp-s-3); } .bp-footer ul { list-style: none; padding: 0; margin: 0; } .bp-footer li + li { margin-top: var(--bp-s-2); } .bp-footer a { color: var(--bp-text-dim); } .bp-footer a:hover, .bp-footer a:focus-visible { color: var(--bp-text); } .bp-footer-bottom { margin-top: var(--bp-s-10); padding-top: var(--bp-s-6); border-top: 1px solid var(--bp-border); display: flex; justify-content: space-between; align-items: center; gap: var(--bp-s-4); flex-wrap: wrap; } /* ======================================================================== Workspace — webmail's "Tweetdeck for email" layout ------------------------------------------------------------------------ N independent mail columns running in parallel. Each column is a self- contained mini-mailbox: its own filter, its own search, its own message list, its own reader/compose panel. Reading in column A doesn't block composing in column B; they run side-by-side, each with independent scroll + state. Column lifecycle (toggled by an operator-set data attribute): [data-mode="list"] (default) — only the message list is visible [data-mode="reading"] reader replaces the bottom 2/3 of the column [data-mode="composing"] compose form replaces the bottom 2/3 Per-column scroll is independent (each .bp-mailcol-list / -reader / -compose-form has its own overflow). Horizontal scroll-snap on the outer .bp-workspace-cols container makes the layout work on tablets. Mobile collapses to single-column with a column-switcher in the bar. ======================================================================== */ .bp-workspace { display: flex; flex-direction: column; min-height: 100vh; background: var(--bp-bg); } .bp-workspace-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--bp-s-4); padding: var(--bp-s-3) var(--bp-s-5); background: var(--bp-surface); border-bottom: 1px solid var(--bp-border); } .bp-workspace-spacer { flex: 1; } .bp-workspace-cols { display: flex; gap: var(--bp-s-3); padding: var(--bp-s-3); overflow-x: auto; flex: 1; scroll-snap-type: x mandatory; align-items: stretch; } .bp-mailcol { display: flex; flex-direction: column; min-width: 22rem; max-width: 36rem; flex: 1 1 26rem; height: calc(100vh - 4rem); background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: var(--bp-r-lg); overflow: hidden; scroll-snap-align: start; transition: border-color 0.15s var(--bp-easing); } .bp-mailcol:focus-within { border-color: var(--bp-accent); } .bp-mailcol[data-mode="composing"] { border-color: var(--bp-accent-2); } .bp-mailcol-head { display: flex; align-items: center; justify-content: space-between; gap: var(--bp-s-3); padding: var(--bp-s-4); border-bottom: 1px solid var(--bp-border); background: var(--bp-surface); } .bp-mailcol-title { display: flex; align-items: center; gap: var(--bp-s-2); font-weight: 600; font-size: var(--bp-fs-sm); letter-spacing: 0.01em; } .bp-mailcol-count { display: inline-flex; align-items: center; padding: 0 var(--bp-s-2); height: 1.25rem; border-radius: var(--bp-r-full); background: var(--bp-bg); color: var(--bp-text-dim); font-size: var(--bp-fs-xs); font-weight: 600; } .bp-mailcol-actions-top { display: flex; gap: var(--bp-s-1); align-items: center; color: var(--bp-text-dim); } .bp-mailcol-search { padding: var(--bp-s-3) var(--bp-s-4); border-bottom: 1px solid var(--bp-border); } .bp-mailcol-search .bp-input { background: var(--bp-bg); font-size: var(--bp-fs-sm); padding: var(--bp-s-2) var(--bp-s-3); } .bp-mailcol-list { flex: 1; overflow-y: auto; min-height: 0; } .bp-mailcol[data-mode="reading"] .bp-mailcol-list, .bp-mailcol[data-mode="composing"] .bp-mailcol-list { flex: none; max-height: 12rem; border-bottom: 2px solid var(--bp-border); } .bp-mailcol-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--bp-s-1) var(--bp-s-3); padding: var(--bp-s-3) var(--bp-s-4); border-bottom: 1px solid var(--bp-border); cursor: pointer; transition: background 0.1s var(--bp-easing); align-items: center; } .bp-mailcol-row:hover { background: var(--bp-surface-2); } .bp-mailcol-row.is-active { background: var(--bp-surface-2); box-shadow: inset 3px 0 0 var(--bp-accent); } .bp-mailcol-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bp-accent); flex-shrink: 0; } .bp-mailcol-row.is-read .bp-mailcol-unread-dot { background: transparent; } .bp-mailcol-from { font-weight: 600; font-size: var(--bp-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-mailcol-row.is-read .bp-mailcol-from { font-weight: 500; color: var(--bp-text-dim); } .bp-mailcol-time { color: var(--bp-text-mute); font-size: var(--bp-fs-xs); white-space: nowrap; } .bp-mailcol-subject { grid-column: 2 / 4; font-size: var(--bp-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-mailcol-snippet { grid-column: 2 / 4; color: var(--bp-text-dim); font-size: var(--bp-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-mailcol-tag { display: inline-flex; align-items: center; padding: 0 var(--bp-s-2); border-radius: var(--bp-r-sm); background: var(--bp-surface); color: var(--bp-text-dim); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } /* ------------------------------------------------------------------------ Labels — first-class user-applied tags on messages and columns. ------------------------------------------------------------------------ Per-label color via inline --bp-label-c custom property (JSON-driven from the column schema's labels[] map). Default falls back to the framework's text-dim. Used inside .bp-mailcol-row to mark labels on each message and in column headers to show the filter scope. ------------------------------------------------------------------------ */ .bp-label { --bp-label-c: var(--bp-text-dim); display: inline-flex; align-items: center; gap: var(--bp-s-1); padding: 0 var(--bp-s-2); height: 1.125rem; border-radius: var(--bp-r-sm); background: color-mix(in srgb, var(--bp-label-c) 12%, var(--bp-bg)); color: var(--bp-label-c); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; } .bp-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bp-label-c); flex-shrink: 0; } .bp-label-list { display: inline-flex; flex-wrap: wrap; gap: var(--bp-s-1); } .bp-mailcol-reader, .bp-mailcol-compose { flex: 1; display: none; flex-direction: column; min-height: 0; background: var(--bp-bg); } .bp-mailcol[data-mode="reading"] .bp-mailcol-reader, .bp-mailcol[data-mode="composing"] .bp-mailcol-compose { display: flex; } .bp-mailcol-reader-head { padding: var(--bp-s-4); border-bottom: 1px solid var(--bp-border); } .bp-mailcol-reader-head h3 { font-size: var(--bp-fs-md); margin-bottom: var(--bp-s-2); } .bp-mailcol-reader-meta { display: flex; flex-wrap: wrap; gap: var(--bp-s-3); font-size: var(--bp-fs-sm); color: var(--bp-text-dim); } .bp-mailcol-reader-body { flex: 1; padding: var(--bp-s-4); overflow-y: auto; line-height: var(--bp-lh-body); } .bp-mailcol-reader-body p + p { margin-top: var(--bp-s-3); } .bp-mailcol-compose form { display: grid; gap: var(--bp-s-2); padding: var(--bp-s-4); flex: 1; overflow-y: auto; min-height: 0; } .bp-mailcol-compose label { font-size: var(--bp-fs-xs); color: var(--bp-text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .bp-mailcol-compose textarea { min-height: 10rem; resize: vertical; font-family: var(--bp-font-sans); line-height: var(--bp-lh-body); padding: var(--bp-s-3) var(--bp-s-4); background: var(--bp-bg); border: 1px solid var(--bp-border); border-radius: var(--bp-r-md); color: var(--bp-text); } .bp-mailcol-compose textarea:focus { border-color: var(--bp-accent); outline: none; } .bp-mailcol-compose .bp-input { background: var(--bp-bg); } .bp-mailcol-toolbar { display: none; gap: var(--bp-s-2); padding: var(--bp-s-3) var(--bp-s-4); border-top: 1px solid var(--bp-border); background: var(--bp-surface); } .bp-mailcol[data-mode="reading"] .bp-mailcol-toolbar, .bp-mailcol[data-mode="composing"] .bp-mailcol-toolbar { display: flex; align-items: center; flex-wrap: wrap; } .bp-mailcol-toolbar .bp-spacer { flex: 1; } .bp-iconbutton { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border-radius: var(--bp-r-md); background: transparent; border: 1px solid transparent; color: var(--bp-text-dim); cursor: pointer; transition: background 0.1s var(--bp-easing), color 0.1s var(--bp-easing); } .bp-iconbutton:hover, .bp-iconbutton:focus-visible { background: var(--bp-surface-2); color: var(--bp-text); } .bp-iconbutton svg { width: 1rem; height: 1rem; } .bp-chip { display: inline-flex; align-items: center; gap: var(--bp-s-1); padding: var(--bp-s-1) var(--bp-s-2); border-radius: var(--bp-r-full); background: var(--bp-bg); border: 1px solid var(--bp-border); font-family: var(--bp-font-mono); font-size: var(--bp-fs-xs); color: var(--bp-text-dim); } .bp-chip-accent { color: var(--bp-accent); border-color: rgba(106, 164, 255, 0.4); background: rgba(106, 164, 255, 0.06); } .bp-mailcol-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--bp-s-3); min-width: 14rem; height: calc(100vh - 4rem); background: transparent; border: 2px dashed var(--bp-border); border-radius: var(--bp-r-lg); color: var(--bp-text-dim); cursor: pointer; font-size: var(--bp-fs-sm); transition: border-color 0.15s var(--bp-easing), color 0.15s var(--bp-easing); flex: 0 0 14rem; scroll-snap-align: start; } .bp-mailcol-add:hover, .bp-mailcol-add:focus-visible { border-color: var(--bp-accent); color: var(--bp-accent); } .bp-mailcol-add svg { width: 1.5rem; height: 1.5rem; } @media (max-width: 48rem) { .bp-workspace-cols { padding: var(--bp-s-2); gap: var(--bp-s-2); } .bp-mailcol { min-width: 88vw; max-width: 92vw; } .bp-mailcol-add { min-width: 88vw; flex-basis: 88vw; } } /* ======================================================================== /status page — banner, per-component table, severity + state badges ======================================================================== */ .bp-status-banner { display: inline-flex; align-items: center; gap: var(--bp-s-3); padding: var(--bp-s-4) var(--bp-s-5); border-radius: var(--bp-r-md); border: 1px solid var(--bp-border); background: var(--bp-surface); font-size: var(--bp-fs-md); } .bp-status-banner-operational { border-color: #1f6f3f; background: rgba(31, 111, 63, 0.18); color: #b6f0c4; } .bp-status-banner-degraded { border-color: #8a6500; background: rgba(138, 101, 0, 0.22); color: #f5d77a; } .bp-status-banner-outage { border-color: #8a1f1f; background: rgba(138, 31, 31, 0.22); color: #f7a3a3; } .bp-status-badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: var(--bp-fs-xs); font-weight: 600; border: 1px solid var(--bp-border); background: var(--bp-surface); letter-spacing: 0.02em; } .bp-status-badge-operational { border-color: #1f6f3f; background: rgba(31, 111, 63, 0.22); color: #b6f0c4; } .bp-status-badge-degraded { border-color: #8a6500; background: rgba(138, 101, 0, 0.22); color: #f5d77a; } .bp-status-badge-outage { border-color: #8a1f1f; background: rgba(138, 31, 31, 0.22); color: #f7a3a3; } .bp-status-badge-maintenance { border-color: #2d5a8a; background: rgba(45, 90, 138, 0.22); color: #aac8f0; } .bp-status-table { width: 100%; border-collapse: collapse; font-size: var(--bp-fs-md); } .bp-status-table th, .bp-status-table td { text-align: left; padding: var(--bp-s-3) var(--bp-s-4); border-bottom: 1px solid var(--bp-border); vertical-align: baseline; } .bp-status-table thead th { font-size: var(--bp-fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--bp-text-dim); border-bottom: 2px solid var(--bp-border); } .bp-status-table tbody tr:last-child th, .bp-status-table tbody tr:last-child td { border-bottom: none; } .bp-status-incident-body { margin-top: var(--bp-s-4); color: var(--bp-text-dim); } .bp-status-incident-body h4, .bp-status-incident-body h5, .bp-status-incident-body h6 { margin: var(--bp-s-4) 0 var(--bp-s-2); color: var(--bp-text); } .bp-status-incident-body p { margin: var(--bp-s-2) 0; } .bp-status-incident-body ul { margin: var(--bp-s-2) 0; padding-left: var(--bp-s-5); } .bp-status-incident-body code { background: var(--bp-surface-2); padding: 0.05rem 0.35rem; border-radius: 0.25rem; font-size: 0.92em; } /* ======================================================================== Utilities (used sparingly; prefer named components above) ======================================================================== */ .bp-center { text-align: center; } .bp-hide-sm { display: initial; } @media (max-width: 36rem) { .bp-hide-sm { display: none; } } .bp-only-sm { display: none; } @media (max-width: 36rem) { .bp-only-sm { display: initial; } }