/* ========================================================================= Blue Machines - Ghost Theme Full-dark navy glassmorphism with the signature teal-to-blue gradient. Typography: Outfit (self-hosted, matches bluemachines.ai) ========================================================================= */ /* ------------------------------------------------------------------------- 0. Outfit — same family + weights as the main website (200–700) ------------------------------------------------------------------------- */ @font-face { font-family: "Outfit"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("../fonts/outfit-latin.woff2") format("woff2"); } /* ------------------------------------------------------------------------- 1. Design tokens ------------------------------------------------------------------------- */ :root { /* Surfaces */ --bg: #071a2e; --bg-2: #0a1d34; --bg-3: #051526; --bg-footer: #061b2d; --surface: rgba(255, 255, 255, 0.03); --surface-2: rgba(255, 255, 255, 0.05); /* Brand */ --brand-teal: #00aa7b; --brand-blue: #0090fe; --brand-green: #42e874; --brand-lime: #dce842; --brand-cyan: #2dd4bf; --gradient: linear-gradient(135deg, #00aa7b 0%, #0090fe 100%); --gradient-soft: linear-gradient(135deg, rgba(0, 170, 123, 0.18) 0%, rgba(0, 144, 254, 0.18) 100%); /* Text */ --text: #ffffff; --text-muted: rgba(255, 255, 255, 0.7); --text-dim: rgba(255, 255, 255, 0.5); --text-faint: rgba(255, 255, 255, 0.38); /* Lines */ --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.18); /* Shape */ --radius-sm: 0.5rem; --radius: 0.875rem; --radius-lg: 1.5rem; --radius-pill: 9999px; /* Type — locked to Outfit (matches --font-outfit on bluemachines.ai) */ --font-outfit: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-sans: var(--font-outfit); --gh-font-body: var(--font-outfit); --gh-font-heading: var(--font-outfit); --bm-font-body: var(--font-outfit); --bm-font-heading: var(--font-outfit); /* Layout */ --page-width: 1200px; --content-width: 720px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --shadow-glow: 0 0 60px rgba(0, 144, 254, 0.18); --shadow-card: 0 20px 50px -20px rgba(0, 0, 0, 0.7); } /* ------------------------------------------------------------------------- 2. Reset / base ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 62.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; font-family: var(--font-outfit); background-color: var(--bg); } body { position: relative; margin: 0; min-height: 100vh; font-family: var(--font-outfit); font-size: 1.7rem; line-height: 1.7; color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* * Static glow layer. * NOTE: We intentionally avoid `background-attachment: fixed` on , * because it triggers a Chrome bug where a position:fixed element with * backdrop-filter (the header) samples a blank/light backdrop, leaving a * grey band behind the glass nav. A fixed pseudo-element gives the same * static-glow look without the bug. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--bg); background-image: radial-gradient(900px circle at 12% -5%, rgba(0, 170, 123, 0.14), transparent 45%), radial-gradient(1100px circle at 95% 8%, rgba(0, 144, 254, 0.16), transparent 45%), radial-gradient(900px circle at 50% 110%, rgba(45, 212, 191, 0.1), transparent 50%); } img, picture, video, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease), opacity 0.2s var(--ease); } a:hover { opacity: 0.85; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-family: var(--font-outfit); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: clamp(3.2rem, 5vw, 5.2rem); } h2 { font-size: clamp(2.6rem, 3.5vw, 3.6rem); } h3 { font-size: 2.4rem; } p { margin: 0 0 1.5em; } ::selection { background: rgba(0, 144, 254, 0.35); color: #fff; } :focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; border-radius: 4px; } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: rgba(133, 133, 133, 0.55) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: rgba(133, 133, 133, 0.55); border-radius: 4px; } /* ------------------------------------------------------------------------- 3. Layout helpers ------------------------------------------------------------------------- */ .bm-container { width: 100%; max-width: var(--page-width); margin: 0 auto; padding: 0 2.4rem; } .bm-site { display: flex; flex-direction: column; min-height: 100vh; font-family: var(--font-outfit); } /* Ensure Ghost-injected UI (portal, comments, search) inherits Outfit */ .bm-site button, .bm-site input, .bm-site textarea, .bm-site select, .bm-site .gh-content, .bm-site #ghost-portal-root, .bm-site .gh-post-upgrade-cta { font-family: var(--font-outfit); } .bm-main { flex: 1 0 auto; padding-top: 12rem; padding-bottom: 8rem; } .text-gradient { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .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; } .skip-to-content { position: absolute; top: -48px; left: 1.6rem; z-index: 200; padding: 0.8rem 1.6rem; background: var(--brand-blue); color: #fff; border-radius: var(--radius-sm); transition: top 0.2s var(--ease); } .skip-to-content:focus { top: 1.6rem; } /* ------------------------------------------------------------------------- 4. Glass primitives ------------------------------------------------------------------------- */ .liquid-glass { position: relative; background: rgba(255, 255, 255, 0.02); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--border); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37), inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 0 rgba(255, 255, 255, 0.08); overflow: hidden; } .liquid-glass::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 20%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.25) 80%, transparent 100%); opacity: 0.6; z-index: 1; } @supports (backdrop-filter: blur(1px)) { .liquid-glass { will-change: backdrop-filter; } } /* Dark glass variant — avoids washed-out white on dark pages */ .liquid-glass--dark { background: rgba(5, 21, 38, 0.82); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 0 rgba(255, 255, 255, 0.06); } /* Animated rotating gradient (used for hover borders / accents) */ @keyframes bm-gradient-rotate { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } @keyframes bm-gradient-rotate2 { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } @keyframes bm-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.25); } } @keyframes bm-fade-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* Reveal-on-scroll (driven by main.js) */ .bm-reveal { opacity: 0; transform: translateY(22px); } .bm-reveal.is-visible { animation: bm-fade-in 0.7s var(--ease) forwards; } @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; } .bm-reveal { opacity: 1; transform: none; } } /* ------------------------------------------------------------------------- 5. Buttons / pills ------------------------------------------------------------------------- */ .bm-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 1.1rem 2.2rem; font-family: var(--font-outfit); font-size: 1.5rem; font-weight: 600; line-height: 1; border: 0; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), opacity 0.2s var(--ease); } .bm-btn--primary { color: #04121f; background: var(--gradient); box-shadow: 0 8px 24px -8px rgba(0, 144, 254, 0.7); } .bm-btn--primary:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(0, 144, 254, 0.85); } .bm-btn--ghost { color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .bm-btn--ghost:hover { opacity: 1; border-color: rgba(45, 212, 191, 0.6); transform: translateY(-2px); } .bm-btn--sm { padding: 0.9rem 1.8rem; font-size: 1.4rem; } .bm-btn .bm-btn__arrow { transition: transform 0.2s var(--ease); } .bm-btn:hover .bm-btn__arrow { transform: translateX(3px); } .bm-pill { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.5rem 1.2rem; font-size: 1.3rem; font-weight: 500; color: var(--text-muted); background: rgba(10, 29, 52, 0.6); border: 1px solid rgba(45, 212, 191, 0.3); border-radius: var(--radius-pill); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .bm-pill__dot { position: relative; width: 0.9rem; height: 0.9rem; flex-shrink: 0; } .bm-pill__dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gradient-soft); animation: bm-pulse 2.4s var(--ease) infinite; } .bm-pill__dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.5rem; height: 0.5rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--gradient); } /* ------------------------------------------------------------------------- 6. Header / navigation — sticky bar (transparent over hero → solid on scroll) ------------------------------------------------------------------------- */ .bm-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background-color: transparent; transition: background-color 0.4s var(--ease); pointer-events: none; } .bm-header.is-pinned, body:not(.home-template) .bm-header { background-color: rgba(7, 26, 46, 0.96); } .bm-nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; width: 100%; max-width: 192rem; height: 6.4rem; margin: 0 auto; padding: 0 1.6rem; pointer-events: auto; } @media (min-width: 768px) { .bm-nav { height: 8rem; padding: 0 2.4rem; } } /* Block Ghost / browser from forcing a white nav bar */ .bm-site .bm-header .bm-nav, .bm-site .bm-header nav { color: #fff !important; } .bm-nav__brand { display: flex; align-items: center; flex-shrink: 0; margin-left: 1.6rem; z-index: 3; cursor: pointer; } .bm-nav__logo { height: clamp(1.2rem, 0.5rem + 1.5vw, 2.8rem); width: auto; transition: height 0.4s var(--ease); } .bm-nav__actions { display: flex; align-items: center; gap: 1.2rem; flex-shrink: 0; margin-right: 1.6rem; z-index: 3; } @media (min-width: 768px) { .bm-nav__brand { margin-left: 9.6rem; } .bm-nav__actions { margin-right: 9.6rem; } } @media (min-width: 1024px) { .bm-nav__brand { margin-left: 14.4rem; } .bm-nav__actions { margin-right: 14.4rem; } } /* * Header CTAs — gradient border wrapper + solid inner button. */ .bm-hcta { position: relative; display: inline-flex; padding: 2px; border-radius: var(--radius-pill); background-size: 300% 100%; transition: transform 0.2s var(--ease); } .bm-hcta--light { background-image: linear-gradient(90deg, #00aa7b 0%, #0090fe 25%, #00aa7b 50%, #0090fe 75%, #00aa7b 100%); animation: bm-gradient-rotate 8s linear infinite; } .bm-hcta--dark { background-image: linear-gradient(90deg, #42e874 0%, #0090fe 25%, #00aa7b 50%, #0090fe 75%, #dce842 100%); animation: bm-gradient-rotate2 10s linear infinite reverse; } .bm-hcta:hover { transform: scale(1.04); } .bm-hcta__inner { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; height: 3.6rem; padding: 0 1.6rem; border-radius: var(--radius-pill); font-size: 1.3rem; font-weight: 600; line-height: 1; white-space: nowrap; transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease); } .bm-hcta--light .bm-hcta__inner { background: #ffffff; } .bm-hcta--light .bm-hcta__inner, .bm-hcta--light .bm-hcta__text, .bm-hcta--light .bm-hcta__arrow { color: #111827 !important; } .bm-hcta--dark .bm-hcta__inner { background: #052d42; color: #ffffff; font-weight: 500; } .bm-hcta__inner:hover { opacity: 1; } .bm-hcta__arrow { font-size: 1.4rem; line-height: 1; } .bm-hcta__arrow--sm { display: none; } /* Voice AI — default header CTA on all breakpoints */ .bm-hcta--agent { display: inline-flex; } /* Home hero overlay — ghost outline Voice AI button */ body.home-template .bm-header:not(.is-pinned) .bm-hcta--dark { background-image: none; animation: none; padding: 0; } body.home-template .bm-header:not(.is-pinned) .bm-hcta--dark .bm-hcta__inner { background: transparent; border: 1px solid rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #ffffff !important; font-weight: 600; } body.home-template .bm-header:not(.is-pinned) .bm-hcta--dark .bm-hcta__text, body.home-template .bm-header:not(.is-pinned) .bm-hcta--dark .bm-hcta__arrow { color: #ffffff !important; } @media (min-width: 768px) { .bm-hcta__inner { height: 4.4rem; font-size: 1.5rem; gap: 0.8rem; padding: 0 2.4rem; } .bm-hcta__arrow { font-size: 1.6rem; } } /* Hide Talk to Sales in navbar */ .bm-header .bm-hcta--light { display: none !important; } /* ------------------------------------------------------------------------- 7. Hero (home / archives) ------------------------------------------------------------------------- */ .bm-hero { position: relative; text-align: center; padding: 10rem 0 5rem; } .bm-hero__title { margin: 1.6rem 0 1.2rem; font-size: clamp(3.6rem, 6vw, 6rem); font-weight: 600; } .bm-hero__desc { max-width: 60ch; margin: 0 auto; font-size: clamp(1.7rem, 2vw, 2.1rem); color: var(--text-muted); font-weight: 200; } .bm-hero__avatar { width: 9rem; height: 9rem; margin: 0 auto 1.6rem; border-radius: 50%; border: 2px solid var(--border-strong); object-fit: cover; } /* ------------------------------------------------------------------------- 8. Featured spotlight ------------------------------------------------------------------------- */ .bm-spotlight { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; margin-bottom: 5rem; border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } /* Animated gradient border on hover — same as .bm-card */ .bm-spotlight::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background-size: 300% 100%; background-image: linear-gradient(90deg, var(--brand-teal) 0%, var(--brand-blue) 25%, var(--brand-teal) 50%, var(--brand-blue) 75%, var(--brand-teal) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none; z-index: 3; } .bm-spotlight:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); } .bm-spotlight:hover::after { opacity: 1; animation: bm-gradient-rotate 6s linear infinite; } .bm-spotlight__media { position: relative; min-height: 36rem; overflow: hidden; border-radius: var(--radius-lg) 0 0 var(--radius-lg); } .bm-spotlight__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .bm-spotlight:hover .bm-spotlight__media img { transform: scale(1.04); } .bm-spotlight__media--empty { background: var(--gradient-soft); } .bm-spotlight__body { display: flex; flex-direction: column; justify-content: center; padding: 4rem; } .bm-spotlight__badge { align-self: flex-start; margin-bottom: 1.6rem; } .bm-spotlight__title { font-size: clamp(2.6rem, 3.2vw, 3.6rem); margin-bottom: 1.2rem; } .bm-spotlight__excerpt { color: var(--text-muted); margin-bottom: 2rem; } /* Make the whole featured card clickable via a stretched overlay link */ .bm-spotlight__title a { position: static; } .bm-spotlight__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-lg); } /* Keep the explicit CTA interactive above the overlay */ .bm-spotlight .bm-btn { position: relative; z-index: 2; } @media (max-width: 820px) { .bm-spotlight { grid-template-columns: 1fr; } .bm-spotlight__media { border-radius: var(--radius-lg) var(--radius-lg) 0 0; min-height: 24rem; } .bm-spotlight__body { padding: 2.8rem; } } /* ------------------------------------------------------------------------- 9. Post grid + cards ------------------------------------------------------------------------- */ .bm-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.8rem; } @media (max-width: 1000px) { .bm-feed { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .bm-feed { grid-template-columns: 1fr; } } .bm-card { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } /* Animated gradient border that appears on hover */ .bm-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background-size: 300% 100%; background-image: linear-gradient(90deg, var(--brand-teal) 0%, var(--brand-blue) 25%, var(--brand-teal) 50%, var(--brand-blue) 75%, var(--brand-teal) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none; z-index: 3; } .bm-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); } .bm-card:hover::after { opacity: 1; animation: bm-gradient-rotate 6s linear infinite; } .bm-card__link { display: flex; flex-direction: column; height: 100%; } .bm-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--gradient-soft); } .bm-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); } .bm-card:hover .bm-card__media img { transform: scale(1.05); } .bm-card__tag { position: absolute; top: 1.4rem; left: 1.4rem; z-index: 2; } .bm-card__body { display: flex; flex-direction: column; flex: 1; padding: 2.2rem; } .bm-card__title { font-size: 2rem; margin-bottom: 0.8rem; } .bm-card__excerpt { font-size: 1.5rem; color: var(--text-muted); margin-bottom: 1.6rem; flex: 1; } .bm-card__meta { display: flex; align-items: center; gap: 1rem; font-size: 1.3rem; color: var(--text-dim); } .bm-card__avatar { width: 2.8rem; height: 2.8rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); } .bm-card__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; } /* ------------------------------------------------------------------------- 10. Section headings ------------------------------------------------------------------------- */ .bm-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem; margin-bottom: 2.8rem; } .bm-section-head__title { font-size: 2.4rem; margin: 0; } .bm-section-head__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); } /* ------------------------------------------------------------------------- 11. Pagination ------------------------------------------------------------------------- */ .bm-pagination { display: flex; align-items: center; justify-content: center; gap: 1.6rem; margin-top: 5rem; } .bm-pagination__btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 2rem; font-size: 1.5rem; font-weight: 500; color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-2); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); } .bm-pagination__btn:hover { opacity: 1; border-color: rgba(45, 212, 191, 0.6); transform: translateY(-2px); } .bm-pagination__page { font-size: 1.4rem; color: var(--text-dim); } .bm-loadmore { display: flex; justify-content: center; margin-top: 5rem; } /* ------------------------------------------------------------------------- 12. Single post / page ------------------------------------------------------------------------- */ /* Post template: clear the fixed header bar */ body.home-template .bm-main { padding-top: 0; } body.post-template .bm-main, body.page-template .bm-main, body.tag-template .bm-main, body.author-template .bm-main { padding-top: 10rem; } @media (min-width: 768px) { body.post-template .bm-main, body.page-template .bm-main, body.tag-template .bm-main, body.author-template .bm-main { padding-top: 11rem; } } /* Post head — breadcrumb + left-aligned title */ .bm-post__head { padding-top: 1.6rem; padding-bottom: 0; } .bm-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2.4rem; font-size: 1.4rem; color: var(--text-dim); } .bm-breadcrumb__home { color: var(--text-muted); transition: color 0.2s var(--ease); } .bm-breadcrumb__home:hover { color: var(--brand-teal); opacity: 1; } .bm-breadcrumb__sep { color: var(--text-dim); opacity: 0.7; } .bm-breadcrumb__current { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; } .bm-post__title { margin: 0; font-size: clamp(3rem, 4.8vw, 4.8rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; color: #ffffff; } /* Two-column body */ .bm-post__layout { display: grid; grid-template-columns: 24rem minmax(0, 1fr); column-gap: 6.4rem; align-items: start; margin-top: 3.2rem; } .bm-post__aside { position: sticky; top: 10rem; align-self: start; display: flex; flex-direction: column; gap: 2rem; } @media (min-width: 768px) { .bm-post__aside { top: 11rem; } } /* Gradient divider — soft, fades at the ends */ .bm-divider { width: 100%; height: 1px; margin: 0; border: 0; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); } .bm-divider--head { margin: 3.2rem 0 0; } .bm-divider--sub { margin: 0.4rem 0 0; } .bm-divider--footer { margin: 0 0 4rem; } .bm-post__author { display: flex; align-items: center; gap: 1.2rem; } .bm-post__author-ring { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; padding: 2px; background: var(--gradient); flex-shrink: 0; } .bm-post__author-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .bm-post__author-placeholder { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--bg-3); color: var(--text-muted); } .bm-post__author-placeholder svg { width: 1.8rem; height: 1.8rem; } .bm-post__author-name { font-size: 1.6rem; font-weight: 500; color: var(--text); } /* Share */ .bm-share { display: flex; flex-direction: column; gap: 1.2rem; } .bm-share__label { font-size: 1.2rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .bm-share__links { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .bm-share__btn { display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; color: var(--text-muted); border: 1px solid var(--border); background: transparent; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease); } .bm-share__btn:hover { color: var(--text); border-color: rgba(45, 212, 191, 0.6); transform: translateY(-2px); opacity: 1; } .bm-share__icon--check { display: none; color: var(--brand-teal); } .bm-share__btn.is-copied .bm-share__icon--link { display: none; } .bm-share__btn.is-copied .bm-share__icon--check { display: inline; } .bm-share__btn.is-copied { color: var(--brand-teal); border-color: rgba(45, 212, 191, 0.6); } /* Date */ .bm-post__date { font-size: 1.4rem; color: var(--text-dim); } /* Subscribe box */ .bm-subscribe { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; border-radius: var(--radius-lg); background: rgba(5, 21, 38, 0.55); border: 1px solid var(--border); } .bm-subscribe__title { margin: 0; font-size: 1.6rem; font-weight: 600; color: var(--text); } .bm-subscribe__desc { margin: 0 0 0.4rem; font-size: 1.3rem; line-height: 1.5; color: var(--text-muted); } .bm-subscribe__input { width: 100%; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); color: var(--text); font-size: 1.4rem; font-family: var(--font-outfit); } .bm-subscribe__input::placeholder { color: var(--text-dim); } .bm-subscribe__input:focus { outline: none; border-color: rgba(45, 212, 191, 0.6); } .bm-subscribe__btn { width: 100%; padding: 1.1rem 1.6rem; border: 0; border-radius: var(--radius); background: var(--gradient); color: #051524; font-size: 1.4rem; font-weight: 600; font-family: var(--font-outfit); cursor: pointer; transition: transform 0.2s var(--ease), filter 0.2s var(--ease); } .bm-subscribe__btn:hover { transform: translateY(-1px); filter: brightness(1.05); } /* Loading / success / error feedback (Ghost Portal toggles these classes) */ .bm-subscribe.loading .bm-subscribe__btn { opacity: 0.7; pointer-events: none; } .bm-subscribe__msg { display: none; margin: 0.4rem 0 0; font-size: 1.3rem; line-height: 1.4; } .bm-subscribe__msg--success { color: var(--text); } .bm-subscribe__msg--error { color: #ff8a8a; } .bm-subscribe.success .bm-subscribe__msg--success { display: block; } .bm-subscribe.error .bm-subscribe__msg--error { display: block; } /* Hide the form fields once signup succeeds */ .bm-subscribe.success .bm-subscribe__input, .bm-subscribe.success .bm-subscribe__btn { display: none; } /* Post main column */ .bm-post__main .bm-content { max-width: var(--content-width); } .bm-post__footer { margin-top: 4rem; } .bm-post__main .bm-tagcloud { margin-top: 0; } .bm-post__main .bm-comments { margin-top: 4rem; } @media (max-width: 900px) { .bm-post__layout { grid-template-columns: 1fr; gap: 2.4rem; } /* Flatten the sidebar so its items reflow with the content as grid items, letting the single subscribe box move below the article. */ .bm-post__aside { display: contents; } .bm-post__main { order: 1; } .bm-divider--sub, .bm-subscribe { order: 2; } } /* Full-width post hero */ .bm-post-hero { position: relative; padding: 11rem 0 4.8rem; margin-bottom: 3.2rem; background: var(--bg-2); border-bottom: 1px solid var(--border); overflow: hidden; } .bm-post-hero__glow { position: absolute; inset: 0; background: radial-gradient(700px circle at 15% 0%, rgba(0, 170, 123, 0.16), transparent 55%), radial-gradient(800px circle at 90% 20%, rgba(0, 144, 254, 0.18), transparent 55%); pointer-events: none; } .bm-post-hero__inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; text-align: center; } .bm-post-hero__tag { margin-bottom: 2rem; } .bm-post-hero__title { margin: 0 0 1.6rem; font-size: clamp(3rem, 4.8vw, 4.8rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; color: #ffffff; } .bm-post-hero__excerpt { margin: 0 0 2.8rem; font-size: clamp(1.7rem, 2.2vw, 2rem); line-height: 1.6; color: var(--text-muted); font-weight: 200; } .bm-post-hero__meta { display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 1.4rem; color: var(--text-dim); } .bm-post-hero__sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; } /* Author card */ .bm-author-section { margin-bottom: 3.2rem; } .bm-author-section__label { margin: 0 0 1.2rem; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .bm-author-card { display: flex; align-items: center; gap: 1.6rem; padding: 2rem 2.4rem; border-radius: var(--radius-lg); background: rgba(5, 21, 38, 0.55); border: 1px solid var(--border); } .bm-author-card--inline { flex-direction: row; padding: 0; background: transparent; border: 0; gap: 1.2rem; } .bm-author-card--inline .bm-author-card__eyebrow, .bm-author-card--inline .bm-author-card__bio, .bm-author-card--inline .bm-author-card__link { display: none; } .bm-author-card--inline .bm-author-card__name { margin: 0; font-size: 1.6rem; } .bm-author-card--inline .bm-author-card__ring { width: 4.4rem; height: 4.4rem; } .bm-author-card--footer { position: relative; padding: 2.4rem; background: rgba(5, 21, 38, 0.65); border: 1px solid transparent; background-clip: padding-box; } .bm-author-card--footer::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(0, 170, 123, 0.55), rgba(0, 144, 254, 0.55)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .bm-author-card__avatar-link { flex-shrink: 0; line-height: 0; } .bm-author-card__ring { display: flex; align-items: center; justify-content: center; width: 6.4rem; height: 6.4rem; padding: 3px; border-radius: 50%; background: var(--gradient); box-shadow: 0 0 24px rgba(0, 144, 254, 0.35); } .bm-author-card--inline .bm-author-card__ring { box-shadow: 0 0 16px rgba(0, 144, 254, 0.25); } .bm-author-card__avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg-2); } .bm-author-card__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--bg-3); color: var(--brand-cyan); border: 2px solid var(--bg-2); } .bm-author-card__body { flex: 1; min-width: 0; } .bm-author-card__eyebrow { display: block; margin-bottom: 0.4rem; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-cyan); } .bm-author-card__name { margin: 0 0 0.6rem; font-size: 2rem; font-weight: 600; line-height: 1.2; } .bm-author-card__name a { color: var(--text); } .bm-author-card__name a:hover { opacity: 1; color: var(--brand-cyan); } .bm-author-card__bio { margin: 0 0 0.8rem; font-size: 1.5rem; line-height: 1.6; color: var(--text-muted); } .bm-author-card__link { display: inline-flex; font-size: 1.4rem; font-weight: 500; color: var(--brand-cyan); } .bm-author-card__link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; } .bm-article { max-width: var(--content-width); margin: 0 auto; } /* Ghost / card style resets — prevent white boxes on dark theme */ .bm-site article.post, .bm-site article.page, .bm-site article.post header, .bm-site article.page header { background: transparent !important; color: var(--text) !important; } .bm-article__feature { margin: 0 auto 4rem; max-width: var(--page-width); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); } .bm-article__feature img { width: 100%; } /* Content / prose */ .bm-content { font-size: 1.8rem; line-height: 1.8; color: rgba(255, 255, 255, 0.86); } .bm-content > * + * { margin-top: 1.6rem; } .bm-content h2, .bm-content h3, .bm-content h4 { margin-top: 2.4rem; color: var(--text); } .bm-content a { color: var(--brand-cyan); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(45, 212, 191, 0.4); } .bm-content a:hover { opacity: 1; text-decoration-color: var(--brand-cyan); } .bm-content strong { color: var(--text); } .bm-content img, .bm-content video { border-radius: var(--radius); } /* Post image zoom + lightbox */ .bm-img-zoom__trigger { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; text-align: left; } .bm-img-zoom__trigger:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 3px; } .bm-img-zoom__trigger img { display: block; width: 100%; transition: transform 0.35s var(--ease); } .bm-img-zoom__trigger video { display: block; width: 100%; border-radius: var(--radius); transition: transform 0.35s var(--ease); } .bm-img-zoom__trigger:hover img, .bm-img-zoom__trigger:focus-visible img, .bm-img-zoom__trigger:hover video, .bm-img-zoom__trigger:focus-visible video { transform: scale(1.03); } .bm-img-zoom__lens { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5, 21, 38, 0.42); opacity: 0; transition: opacity 0.25s var(--ease); pointer-events: none; } .bm-img-zoom__trigger:hover .bm-img-zoom__lens, .bm-img-zoom__trigger:focus-visible .bm-img-zoom__lens { opacity: 1; } .bm-img-zoom__lens svg { width: 4.8rem; height: 4.8rem; color: #ffffff; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45)); } .bm-site.bm-lightbox-open { overflow: hidden; } .bm-lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 2.4rem; } .bm-lightbox[hidden] { display: none; } .bm-lightbox__backdrop { position: absolute; inset: 0; background: rgba(4, 12, 24, 0.92); } .bm-lightbox__panel { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; max-width: min(94vw, 1280px); max-height: 92vh; } .bm-lightbox__img { display: block; max-width: 100%; max-height: calc(92vh - 6rem); border-radius: var(--radius-lg); object-fit: contain; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); } .bm-lightbox__video { display: block; max-width: 100%; max-height: calc(92vh - 6rem); border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); } .bm-lightbox__caption { margin: 0; max-width: 72rem; text-align: center; font-size: 1.4rem; line-height: 1.5; color: var(--text-muted); } .bm-lightbox__close { position: absolute; top: -4.4rem; right: 0; width: 4rem; height: 4rem; border: 1px solid var(--border-strong); border-radius: 50%; background: rgba(5, 21, 38, 0.85); color: var(--text); font-size: 2.4rem; line-height: 1; cursor: pointer; transition: background 0.2s var(--ease), transform 0.2s var(--ease); } .bm-lightbox__close:hover { background: rgba(5, 21, 38, 1); transform: scale(1.05); } @media (max-width: 640px) { .bm-lightbox { padding: 1.6rem; } .bm-lightbox__close { top: -3.6rem; width: 3.6rem; height: 3.6rem; font-size: 2rem; } .bm-img-zoom__lens svg { width: 4rem; height: 4rem; } } .bm-content figure { margin: 2.4rem 0; } .bm-content figcaption { margin-top: 0.8rem; text-align: center; font-size: 1.4rem; color: var(--text-dim); } /* Blockquotes — glass pull-quote styling */ .bm-content blockquote, .gh-content blockquote { position: relative; margin: 3.6rem 0; padding: 2.8rem 3.2rem 2.8rem 3.6rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(0, 170, 123, 0.08) 0%, rgba(0, 144, 254, 0.06) 100%), rgba(5, 21, 38, 0.72); box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.1); font-size: 2.2rem; font-style: italic; font-weight: 400; line-height: 1.65; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.94); overflow: hidden; } .bm-content blockquote::before, .gh-content blockquote::before { content: ""; position: absolute; left: 0; top: 1.6rem; bottom: 1.6rem; width: 4px; border-radius: 0 4px 4px 0; background: var(--gradient); box-shadow: 0 0 20px rgba(0, 144, 254, 0.35); } .bm-content blockquote::after, .gh-content blockquote::after { content: "\201C"; position: absolute; top: -0.6rem; right: 1.6rem; font-size: 8rem; line-height: 1; font-family: Georgia, "Times New Roman", serif; font-style: normal; font-weight: 700; background: linear-gradient(135deg, rgba(0, 170, 123, 0.35) 0%, rgba(0, 144, 254, 0.35) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; pointer-events: none; user-select: none; } .bm-content blockquote p, .gh-content blockquote p { position: relative; z-index: 1; margin: 0; } .bm-content blockquote p + p, .gh-content blockquote p + p { margin-top: 1.2rem; } .bm-content blockquote cite, .bm-content blockquote footer, .gh-content blockquote cite, .gh-content blockquote footer { position: relative; z-index: 1; display: block; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 1.4rem; font-style: normal; font-weight: 500; color: var(--brand-cyan); letter-spacing: 0.02em; } .bm-content blockquote cite::before, .bm-content blockquote footer::before, .gh-content blockquote cite::before, .gh-content blockquote footer::before { content: "— "; color: var(--text-dim); } /* Ghost alternate pull-quote style */ .bm-content blockquote.kg-blockquote-alt, .gh-content blockquote.kg-blockquote-alt { padding: 7.2rem 3.2rem 3.2rem; text-align: center; font-style: normal; font-size: clamp(2.2rem, 2.8vw, 2.8rem); font-weight: 500; line-height: 1.5; } .bm-content blockquote.kg-blockquote-alt::before, .gh-content blockquote.kg-blockquote-alt::before { left: 50%; top: 0; bottom: auto; width: 6.4rem; height: 3px; transform: translateX(-50%); border-radius: var(--radius-pill); } .bm-content blockquote.kg-blockquote-alt::after, .gh-content blockquote.kg-blockquote-alt::after { top: 2rem; left: 50%; right: auto; transform: translateX(-50%); font-size: 5.6rem; background: var(--gradient); -webkit-background-clip: text; background-clip: text; opacity: 0.85; } @media (max-width: 640px) { .bm-content blockquote, .gh-content blockquote { margin: 2.8rem 0; padding: 2.4rem 2rem 2.4rem 2.4rem; font-size: 1.9rem; } .bm-content blockquote::after, .gh-content blockquote::after { font-size: 6rem; right: 1rem; } .bm-content blockquote.kg-blockquote-alt, .gh-content blockquote.kg-blockquote-alt { padding: 6.4rem 2rem 2.4rem; } } .bm-content ul, .bm-content ol { padding-left: 2.4rem; } .bm-content li { margin-bottom: 0.6rem; } .bm-content li::marker { color: var(--brand-cyan); } .bm-content hr { margin: 3.2rem 0; border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); } .bm-content pre { margin: 2.4rem 0; padding: 2rem; overflow-x: auto; font-size: 1.5rem; background: #04101d; border: 1px solid var(--border); border-radius: var(--radius); } .bm-content code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.92em; } .bm-content :not(pre) > code { padding: 0.2em 0.45em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; color: var(--brand-cyan); } .bm-content table { width: 100%; margin: 2.4rem 0; border-collapse: collapse; font-size: 1.6rem; } .bm-content th, .bm-content td { padding: 1rem 1.4rem; border: 1px solid var(--border); text-align: left; } .bm-content th { background: var(--surface-2); } /* Koenig editor cards */ .kg-card { margin: 2.8rem 0; } /* Embeds — YouTube, Vimeo, etc. (full content width, 16:9) */ .bm-content .kg-embed-card, .gh-content .kg-embed-card { width: 100%; max-width: 100%; } .bm-content .kg-embed-card .kg-embed-container, .gh-content .kg-embed-card .kg-embed-container { position: relative; width: 100% !important; max-width: 100% !important; height: 0 !important; padding-bottom: 56.25%; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-3); box-shadow: var(--shadow-card); } .bm-content .kg-embed-card .kg-embed-container iframe, .gh-content .kg-embed-card .kg-embed-container iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0; border-radius: var(--radius-lg); } /* Uploaded video cards */ .bm-content .kg-video-card .kg-video-container, .gh-content .kg-video-card .kg-video-container { width: 100%; border-radius: var(--radius-lg); overflow: hidden; } .bm-content .kg-video-card video, .gh-content .kg-video-card video { width: 100%; height: auto; border-radius: var(--radius-lg); } /* Bare iframes in content (fallback) */ .bm-content iframe, .gh-content iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; min-height: 320px; border: 0; border-radius: var(--radius-lg); } .kg-width-wide { width: min(85vw, 1020px); margin-left: 50%; transform: translateX(-50%); } .kg-width-full { width: 96vw; margin-left: 50%; transform: translateX(-50%); } .kg-image, .kg-gallery-image img { border-radius: var(--radius); } .kg-gallery-container { display: flex; flex-direction: column; gap: 1rem; } .kg-gallery-row { display: flex; gap: 1rem; } .kg-bookmark-card a.kg-bookmark-container { display: flex; align-items: stretch; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .kg-bookmark-content { padding: 2rem; flex: 1; } .kg-bookmark-title { font-weight: 600; color: var(--text); } .kg-bookmark-description { color: var(--text-muted); font-size: 1.5rem; margin-top: 0.6rem; } .kg-bookmark-metadata { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.2rem; font-size: 1.4rem; color: var(--text-dim); } .kg-bookmark-thumbnail img { height: 100%; object-fit: cover; border-radius: 0; } .kg-callout-card { display: flex; gap: 1.2rem; padding: 1.6rem 2rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); } .kg-callout-emoji { font-size: 2rem; } .kg-toggle-card { padding: 1.6rem 2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .kg-header-card { padding: 6rem 2rem; border-radius: var(--radius-lg); background: var(--gradient-soft); text-align: center; } .kg-button-card a.kg-btn { display: inline-flex; padding: 1.1rem 2.4rem; border-radius: var(--radius-pill); background: var(--gradient); color: #04121f; font-weight: 600; text-decoration: none; } /* Article footer: tags, share, author */ .bm-article__footer { max-width: var(--content-width); margin: 4rem auto 0; } .bm-tagcloud { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 3.2rem; } .bm-tag { display: inline-flex; padding: 0.6rem 1.4rem; font-size: 1.4rem; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); transition: border-color 0.2s var(--ease), color 0.2s var(--ease); } .bm-tag:hover { opacity: 1; color: var(--text); border-color: rgba(45, 212, 191, 0.6); } /* Legacy author box removed — see .bm-author-card */ /* Subscribe / membership CTA */ .bm-cta { position: relative; max-width: var(--content-width); margin: 4rem auto 0; padding: 4rem; text-align: center; border-radius: var(--radius-lg); overflow: hidden; } .bm-cta__glow { position: absolute; inset: 0; background: radial-gradient(500px circle at 20% 0%, rgba(0, 170, 123, 0.22), transparent 55%), radial-gradient(500px circle at 90% 100%, rgba(0, 144, 254, 0.22), transparent 55%); z-index: 0; } .bm-cta > * { position: relative; z-index: 1; } .bm-cta__title { font-size: clamp(2.4rem, 3vw, 3.2rem); margin-bottom: 1rem; } .bm-cta__desc { color: var(--text-muted); max-width: 50ch; margin: 0 auto 2.4rem; } .bm-cta__form { display: flex; gap: 0.8rem; max-width: 44rem; margin: 0 auto; } .bm-cta__input { flex: 1; padding: 1.1rem 1.8rem; font-family: inherit; font-size: 1.5rem; color: var(--text); background: rgba(4, 16, 29, 0.7); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); } .bm-cta__input::placeholder { color: var(--text-faint); } .bm-cta__input:focus { outline: none; border-color: var(--brand-cyan); } @media (max-width: 540px) { .bm-cta__form { flex-direction: column; } .bm-cta { padding: 2.8rem 2rem; } } /* Read next */ .bm-readnext { margin-top: 6rem; } /* ------------------------------------------------------------------------- 13. Comments ------------------------------------------------------------------------- */ .bm-comments { max-width: var(--content-width); margin: 5rem auto 0; padding-top: 3rem; border-top: 1px solid var(--border); } /* ------------------------------------------------------------------------- 14. Footer — exact replica of bluemachines.ai ------------------------------------------------------------------------- */ .bm-footer { flex-shrink: 0; width: 100%; background-color: #061b2d; padding: 3.2rem 1.6rem 0; } @media (min-width: 640px) { .bm-footer { padding: 3.2rem 2.4rem 0; } } @media (min-width: 1024px) { .bm-footer { padding: 8rem 8rem 0; } } .bm-footer__inner { max-width: 1920px; margin: 0 auto; } .bm-footer__main { display: flex; flex-direction: column; gap: 4.8rem; margin-bottom: 4.8rem; } @media (min-width: 768px) { .bm-footer__main { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 6.4rem; } } /* Left column */ .bm-footer__left { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; } .bm-footer__badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } @media (min-width: 768px) { .bm-footer__badges { grid-template-columns: repeat(7, 1fr); } } .bm-footer__badge { width: 5.6rem; height: 5.6rem; border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } @media (min-width: 768px) { .bm-footer__badge { width: 6.4rem; height: 6.4rem; } } @media (min-width: 1024px) { .bm-footer__badge { width: 8rem; height: 8rem; } } .bm-footer__badge img { width: 100%; height: 100%; object-fit: contain; padding: 0.8rem; } .bm-footer__logo { margin-top: 0.8rem; } .bm-footer__logo img { height: 2.8rem; width: auto; } .bm-footer__tagline { margin: 0; color: #ffffff; font-size: 1.6rem; text-align: left; max-width: 28rem; } @media (min-width: 1024px) { .bm-footer__tagline { font-size: 1.8rem; } } .bm-footer__cta { margin-top: 0.4rem; } /* Temporarily hidden — "Talk to Sales" in footer only. Delete this block to re-enable. */ .bm-footer__cta { display: none !important; } /* Right column */ .bm-footer__right { display: flex; flex-direction: column; align-items: flex-start; gap: 3.2rem; } @media (min-width: 768px) { .bm-footer__right { align-items: flex-end; } } .bm-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; } @media (min-width: 768px) { .bm-footer__nav ul { align-items: flex-end; } } .bm-footer__nav a { color: #ffffff; font-size: 1.6rem; transition: opacity 0.2s var(--ease); } @media (min-width: 1024px) { .bm-footer__nav a { font-size: 1.8rem; } } .bm-footer__nav a:hover { opacity: 0.8; } .bm-footer__social { display: flex; align-items: center; gap: 1.6rem; } .bm-footer__social a { display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.2s var(--ease); } .bm-footer__social a:hover { opacity: 0.8; } .bm-footer__social img { width: 3.2rem; height: 3.2rem; object-fit: contain; } /* Bottom bar */ .bm-footer__bottom { display: flex; align-items: center; height: 5.2rem; margin: 0 -1.6rem; padding: 0 1.6rem; border-top: 1px solid rgba(255, 255, 255, 0.2); } @media (min-width: 640px) { .bm-footer__bottom { margin: 0 -2.4rem; padding: 0 2.4rem; } } @media (min-width: 1024px) { .bm-footer__bottom { height: 7rem; margin: 0 -8rem; padding: 0 8rem; } } .bm-footer__amulet { width: 2.8rem; height: auto; flex-shrink: 0; } .bm-footer__copyright { margin: 0 auto; text-align: center; color: #ffffff; font-size: 1.4rem; opacity: 0.8; } /* ------------------------------------------------------------------------- 15. Error page ------------------------------------------------------------------------- */ .bm-error { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .bm-error__code { font-size: clamp(8rem, 18vw, 16rem); font-weight: 700; line-height: 1; margin-bottom: 1rem; } .bm-error__msg { font-size: 2rem; color: var(--text-muted); margin-bottom: 2.4rem; } /* ------------------------------------------------------------------------- 16. Misc states ------------------------------------------------------------------------- */ .bm-empty { text-align: center; padding: 6rem 0; color: var(--text-muted); }