/* ============================================================ YouBIM Landing Module — Styles ------------------------------------------------------------ All selectors are scoped under .youbim-module to prevent collisions with the host HubSpot theme. Drop this in as a custom module's module.css. Typography per SMS 2025 Brand Guidelines: Avenir (Light / Regular / Bold). Mulish is loaded as the closest free web fallback for visitors without an Avenir license. For best performance, move the @import below into the page template's . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700;800&display=swap'); /* ===== Scope + Tokens ===== */ .youbim-module { /* SMS 2025 Brand Colors */ --ybm-blue: #002D74; /* Deep Blue / Signature */ --ybm-blue-deep: #061d4a; --ybm-blue-mid: #0B4E8D; --ybm-blue-50: #EEF3F8; /* Lite Blue tint */ --ybm-blue-100: #ADC6D8; /* Periwinkle / Lite Blue */ --ybm-blue-200: #769FB7; /* Ocean Blue */ --ybm-blue-300: #2B608A; --ybm-blue-500: #103356; --ybm-red: #E3363F; /* Signature Red */ --ybm-red-soft: #F59699; /* Pale Red */ --ybm-red-deep: #94232E; /* Dark Red */ --ybm-grey-900: #191C1B; --ybm-grey-700: #605E5F; /* Dark Grey */ --ybm-grey-300: #B7B2B2; --ybm-grey-100: #EDEBEB; --ybm-grey-50: #F7F6F4; --ybm-white: #FFFFFF; /* Typography stacks — Avenir per brand guide, Mulish fallback */ --ybm-font: 'Avenir Next', 'Avenir', 'Mulish', 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* Layout */ --ybm-container: 1240px; --ybm-radius-sm: 6px; --ybm-radius-md: 14px; --ybm-radius-lg: 22px; font-family: var(--ybm-font); color: var(--ybm-grey-900); background: var(--ybm-white); line-height: 1.55; -webkit-font-smoothing: antialiased; } .youbim-module *, .youbim-module *::before, .youbim-module *::after { box-sizing: border-box; } .youbim-module a { color: inherit; text-decoration: none; } .youbim-module img { max-width: 100%; display: block; } .youbim-module .ybm-container { max-width: var(--ybm-container); margin: 0 auto; padding: 0 28px; } /* ===== Typography (Avenir hierarchy: Light / Regular / Bold) ===== */ .youbim-module h1, .youbim-module h2, .youbim-module h3, .youbim-module h4 { font-family: var(--ybm-font); font-weight: 700; /* Avenir Bold for headers */ letter-spacing: -0.01em; line-height: 1.1; margin: 0; color: var(--ybm-blue); } .youbim-module h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1.05; } .youbim-module h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); } .youbim-module h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 700; } .youbim-module h4 { font-size: 1.05rem; font-weight: 700; } .youbim-module p { font-weight: 400; /* Avenir Regular for body */ margin: 0 0 1em; } .youbim-module .ybm-eyebrow { font-family: var(--ybm-font); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ybm-blue-300); display: inline-flex; align-items: center; gap: 10px; } .youbim-module .ybm-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--ybm-red); display: inline-block; } .youbim-module .ybm-eyebrow-light { color: var(--ybm-blue-100); } .youbim-module .ybm-lead { font-size: 1.125rem; font-weight: 400; color: var(--ybm-grey-700); max-width: 60ch; } /* ===== Buttons ===== */ .youbim-module .ybm-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ybm-font); font-weight: 700; /* Avenir Bold for CTAs */ font-size: 0.95rem; padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: all 0.25s ease; letter-spacing: 0.01em; line-height: 1; } .youbim-module .ybm-btn-primary { background: var(--ybm-red); color: var(--ybm-white); box-shadow: 0 6px 18px rgba(227,54,63,0.25); } .youbim-module .ybm-btn-primary:hover { background: var(--ybm-red-deep); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(227,54,63,0.32); } .youbim-module .ybm-btn-secondary { background: transparent; color: var(--ybm-blue); border-color: var(--ybm-blue); } .youbim-module .ybm-btn-secondary:hover { background: var(--ybm-blue); color: var(--ybm-white); } .youbim-module .ybm-btn-light { background: var(--ybm-white); color: var(--ybm-blue); } .youbim-module .ybm-btn-light:hover { background: var(--ybm-grey-100); } .youbim-module .ybm-btn-ghost { background: transparent; color: var(--ybm-white); border-color: rgba(255,255,255,0.5); } .youbim-module .ybm-btn-ghost:hover { background: var(--ybm-white); color: var(--ybm-blue); } .youbim-module .ybm-arrow { transition: transform 0.25s ease; } .youbim-module .ybm-btn:hover .ybm-arrow { transform: translateX(4px); } .youbim-module .ybm-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 38px; } .youbim-module .ybm-cta-row-center { justify-content: center; margin-bottom: 0; } /* ===== Hero ===== */ .youbim-module .ybm-hero { position: relative; padding: 90px 0 60px; overflow: hidden; background: radial-gradient(circle at 85% 20%, rgba(11,78,141,0.08), transparent 45%), linear-gradient(180deg, #fafbfc 0%, #ffffff 100%); } .youbim-module .ybm-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(11,78,141,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(11,78,141,0.06) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, black 30%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 40%, black 30%, transparent 75%); pointer-events: none; } .youbim-module .ybm-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; } .youbim-module .ybm-hero-content .ybm-eyebrow { margin-bottom: 22px; } .youbim-module .ybm-hero-content h1 { margin-bottom: 24px; } .youbim-module .ybm-hero-content h1 .ybm-accent { color: var(--ybm-red); font-style: italic; font-weight: 400; /* Avenir Regular italic per brand */ } .youbim-module .ybm-hero-content .ybm-lead { font-size: 1.18rem; margin-bottom: 36px; } .youbim-module .ybm-hero-meta { display: flex; gap: 28px; padding-top: 28px; border-top: 1px solid var(--ybm-grey-100); flex-wrap: wrap; } .youbim-module .ybm-hero-meta div { display: flex; flex-direction: column; } .youbim-module .ybm-num { font-family: var(--ybm-font); font-weight: 700; font-size: 2rem; color: var(--ybm-blue); line-height: 1; } .youbim-module .ybm-lbl { font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ybm-grey-700); margin-top: 6px; } /* ===== Image Placeholders ===== */ .youbim-module .ybm-hero-visual { position: relative; } .youbim-module .ybm-placeholder { background: linear-gradient(135deg, rgba(0,45,116,0.92), rgba(11,78,141,0.85)), repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,0.04) 14px 15px); border-radius: var(--ybm-radius-lg); color: var(--ybm-white); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; position: relative; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0,45,116,0.45), 0 10px 24px -8px rgba(0,45,116,0.3); } .youbim-module .ybm-placeholder-main { aspect-ratio: 4/3.1; } .youbim-module .ybm-hero-image { width: 100%; aspect-ratio: 4/3.1; object-fit: cover; border-radius: var(--ybm-radius-lg); box-shadow: 0 30px 70px -20px rgba(0,45,116,0.45), 0 10px 24px -8px rgba(0,45,116,0.3); display: block; } .youbim-module .ybm-features-image { width: 100%; aspect-ratio: 4/4.5; object-fit: cover; border-radius: var(--ybm-radius-lg); box-shadow: 0 30px 70px -20px rgba(0,45,116,0.35), 0 10px 24px -8px rgba(0,45,116,0.25); display: block; } .youbim-module .ybm-viewer-image { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--ybm-radius-lg); border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 24px 50px -16px rgba(0,0,0,0.45); display: block; } .youbim-module .ybm-placeholder-tall { aspect-ratio: 4/4.5; background: linear-gradient(180deg, rgba(11,51,86,0.95), rgba(11,78,141,0.88)), repeating-linear-gradient(0deg, transparent 0 30px, rgba(255,255,255,0.03) 30px 31px), repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,255,255,0.03) 30px 31px); } .youbim-module .ybm-placeholder-onblue { aspect-ratio: 4/3; background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.15); box-shadow: none; } .youbim-module .ybm-ph-label { font-weight: 700; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; margin-bottom: 16px; } .youbim-module .ybm-ph-title { font-weight: 700; font-size: 1.2rem; margin-bottom: 8px; } .youbim-module .ybm-ph-sub { font-size: 0.9rem; opacity: 0.65; max-width: 240px; } .youbim-module .ybm-ph-icon { width: 48px; height: 48px; border: 1.5px dashed rgba(255,255,255,0.4); border-radius: 8px; margin-bottom: 22px; display: flex; align-items: center; justify-content: center; } .youbim-module .ybm-ph-icon svg { width: 22px; height: 22px; opacity: 0.7; } .youbim-module .ybm-corner-tag { position: absolute; top: -14px; right: 20px; z-index: 2; background: var(--ybm-red); color: var(--ybm-white); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(227,54,63,0.35); } .youbim-module .ybm-float-card { position: absolute; bottom: -30px; left: -40px; background: var(--ybm-white); padding: 16px 20px; border-radius: var(--ybm-radius-md); box-shadow: 0 14px 38px -12px rgba(16,51,86,0.22); display: flex; align-items: center; gap: 14px; border: 1px solid var(--ybm-grey-100); } .youbim-module .ybm-dot { width: 10px; height: 10px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,0.18); flex-shrink: 0; } .youbim-module .ybm-fc-text { font-size: 0.82rem; color: var(--ybm-grey-900); font-weight: 700; } .youbim-module .ybm-fc-sub { font-weight: 700; font-size: 0.66rem; color: var(--ybm-grey-700); text-transform: uppercase; letter-spacing: 0.1em; } /* ===== Trust Strip ===== */ .youbim-module .ybm-trust { background: var(--ybm-blue); color: var(--ybm-white); padding: 28px 0; } .youbim-module .ybm-trust-inner { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; } .youbim-module .ybm-trust-label { font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.18em; opacity: 0.85; border-right: 1px solid rgba(255,255,255,0.2); padding-right: 36px; } .youbim-module .ybm-trust-list { display: flex; gap: 50px; flex-wrap: wrap; } .youbim-module .ybm-trust-list span { font-weight: 400; font-size: 1.1rem; opacity: 0.9; } /* ===== Section Base ===== */ .youbim-module .ybm-block { padding: 110px 0; position: relative; } .youbim-module .ybm-section-head { max-width: 760px; margin-bottom: 60px; } .youbim-module .ybm-section-head .ybm-eyebrow { margin-bottom: 20px; } .youbim-module .ybm-section-head h2 { margin-bottom: 18px; } .youbim-module .ybm-section-head p { color: var(--ybm-grey-700); font-size: 1.1rem; margin: 0; } /* ===== Problem / Solution ===== */ .youbim-module .ybm-problem { background: var(--ybm-grey-50); } .youbim-module .ybm-ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .youbim-module .ybm-ps-card { background: var(--ybm-white); border-radius: var(--ybm-radius-lg); padding: 44px; border: 1px solid var(--ybm-grey-100); position: relative; } .youbim-module .ybm-ps-bad { border-top: 4px solid var(--ybm-red); } .youbim-module .ybm-ps-good { border-top: 4px solid var(--ybm-blue); background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); } .youbim-module .ybm-ps-card h3 { margin-bottom: 24px; } .youbim-module .ybm-ps-bad h3 { color: var(--ybm-red-deep); } .youbim-module .ybm-ps-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .youbim-module .ybm-ps-list li { display: flex; align-items: flex-start; gap: 14px; color: var(--ybm-grey-700); font-size: 1rem; padding-bottom: 16px; border-bottom: 1px dashed var(--ybm-grey-100); } .youbim-module .ybm-ps-list li:last-child { border-bottom: none; padding-bottom: 0; } .youbim-module .ybm-mark { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; margin-top: 2px; } .youbim-module .ybm-mark-x { background: rgba(227,54,63,0.12); color: var(--ybm-red); } .youbim-module .ybm-mark-check { background: rgba(0,45,116,0.1); color: var(--ybm-blue); } /* ===== Products ===== */ .youbim-module .ybm-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .youbim-module .ybm-product-card { background: var(--ybm-white); border: 1px solid var(--ybm-grey-100); border-radius: var(--ybm-radius-lg); padding: 36px 32px; transition: all 0.3s ease; position: relative; overflow: hidden; } .youbim-module .ybm-product-card::after { content: ""; position: absolute; inset: 0; border-radius: var(--ybm-radius-lg); background: linear-gradient(180deg, transparent 60%, rgba(0,45,116,0.03)); pointer-events: none; } .youbim-module .ybm-product-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -16px rgba(16,51,86,0.18); border-color: var(--ybm-blue-100); } .youbim-module .ybm-pc-num { font-weight: 700; font-size: 0.72rem; color: var(--ybm-red); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; display: block; } .youbim-module .ybm-product-card h3 { margin-bottom: 14px; font-size: 1.4rem; } .youbim-module .ybm-product-card p { color: var(--ybm-grey-700); margin: 0; font-size: 0.96rem; } /* ===== Features ===== */ .youbim-module .ybm-features { background: linear-gradient(180deg, #fff 0%, var(--ybm-grey-50) 100%); } .youbim-module .ybm-features-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; } .youbim-module .ybm-features-list { display: grid; gap: 4px; } .youbim-module .ybm-feature-item { padding: 28px 0; border-top: 1px solid var(--ybm-grey-100); display: grid; grid-template-columns: 50px 1fr; gap: 20px; align-items: start; } .youbim-module .ybm-feature-item:last-child { border-bottom: 1px solid var(--ybm-grey-100); } .youbim-module .ybm-fi-num { font-weight: 700; color: var(--ybm-red); font-size: 0.85rem; letter-spacing: 0.08em; padding-top: 4px; } .youbim-module .ybm-feature-item h3 { margin-bottom: 8px; font-size: 1.25rem; } .youbim-module .ybm-feature-item p { color: var(--ybm-grey-700); margin: 0; font-size: 0.96rem; } /* ===== Industries ===== */ .youbim-module .ybm-industries-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .youbim-module .ybm-industry { background: var(--ybm-white); border: 1px solid var(--ybm-grey-100); border-radius: var(--ybm-radius-md); padding: 32px 24px; text-align: left; transition: all 0.25s ease; position: relative; overflow: hidden; } .youbim-module .ybm-industry::before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: var(--ybm-blue); transition: width 0.3s ease; } .youbim-module .ybm-industry:hover { border-color: var(--ybm-blue); transform: translateY(-3px); box-shadow: 0 16px 30px -10px rgba(16,51,86,0.15); } .youbim-module .ybm-industry:hover::before { width: 4px; } .youbim-module .ybm-ind-icon { width: 42px; height: 42px; background: var(--ybm-blue-50); color: var(--ybm-blue); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .youbim-module .ybm-ind-icon svg { width: 22px; height: 22px; } .youbim-module .ybm-industry h4 { font-size: 1.05rem; margin-bottom: 6px; } .youbim-module .ybm-industry p { font-size: 0.87rem; color: var(--ybm-grey-700); margin: 0; } /* ===== Viewer Callout ===== */ .youbim-module .ybm-viewer-callout { background: var(--ybm-blue); color: var(--ybm-white); position: relative; overflow: hidden; } .youbim-module .ybm-viewer-callout::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: radial-gradient(ellipse at 30% 50%, black, transparent 70%); mask-image: radial-gradient(ellipse at 30% 50%, black, transparent 70%); } .youbim-module .ybm-viewer-callout .ybm-container { position: relative; z-index: 1; } .youbim-module .ybm-viewer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .youbim-module .ybm-viewer-callout .ybm-eyebrow { color: var(--ybm-blue-100); } .youbim-module .ybm-viewer-callout .ybm-eyebrow::before { background: var(--ybm-red); } .youbim-module .ybm-viewer-callout h2 { color: var(--ybm-white); margin: 18px 0 22px; } .youbim-module .ybm-viewer-callout p { color: rgba(255,255,255,0.78); margin-bottom: 30px; font-size: 1.08rem; } .youbim-module .ybm-integrations-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; } .youbim-module .ybm-integrations-row span { font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; padding: 8px 14px; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; color: rgba(255,255,255,0.85); } /* ===== Testimonial ===== */ .youbim-module .ybm-testimonial { background: var(--ybm-grey-50); } .youbim-module .ybm-testimonial-card { max-width: 920px; margin: 0 auto; text-align: center; } .youbim-module .ybm-quote-mark { font-family: var(--ybm-font); font-size: 5rem; font-weight: 700; color: var(--ybm-red); line-height: 1; height: 50px; } .youbim-module .ybm-testimonial-card blockquote { font-family: var(--ybm-font); font-size: clamp(1.3rem, 2.4vw, 1.85rem); color: var(--ybm-blue); line-height: 1.35; margin: 24px 0 36px; font-weight: 400; /* Avenir Regular for the quote body */ letter-spacing: -0.01em; } .youbim-module .ybm-attribution { display: inline-flex; align-items: center; gap: 14px; } .youbim-module .ybm-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--ybm-blue-300), var(--ybm-blue)); color: var(--ybm-white); display: flex; align-items: center; justify-content: center; font-weight: 700; } .youbim-module .ybm-who { text-align: left; } .youbim-module .ybm-name { font-weight: 700; color: var(--ybm-grey-900); } .youbim-module .ybm-role { font-size: 0.85rem; color: var(--ybm-grey-700); } /* ===== Resources ===== */ .youbim-module .ybm-resources-block { background: var(--ybm-grey-50); } .youbim-module .ybm-resources-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .youbim-module .ybm-resource { background: var(--ybm-white); border: 1px solid var(--ybm-grey-100); border-radius: var(--ybm-radius-md); padding: 30px 26px; transition: all 0.25s ease; display: flex; flex-direction: column; height: 100%; } .youbim-module .ybm-resource:hover { border-color: var(--ybm-blue); transform: translateY(-4px); box-shadow: 0 16px 32px -10px rgba(16,51,86,0.18); } .youbim-module .ybm-res-type { font-weight: 700; font-size: 0.7rem; color: var(--ybm-red); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 14px; } .youbim-module .ybm-resource h4 { font-size: 1.08rem; margin: 0 0 12px; } .youbim-module .ybm-resource p { font-size: 0.9rem; color: var(--ybm-grey-700); margin: 0 0 22px; flex-grow: 1; } .youbim-module .ybm-res-link { font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ybm-blue); display: inline-flex; align-items: center; gap: 8px; transition: gap 0.2s ease, color 0.2s ease; } .youbim-module .ybm-resource:hover .ybm-res-link { gap: 14px; color: var(--ybm-red); } /* ===== Final CTA ===== */ .youbim-module .ybm-final-cta { background: linear-gradient(135deg, var(--ybm-blue-500) 0%, var(--ybm-blue) 50%, var(--ybm-blue-mid) 100%); color: var(--ybm-white); padding: 100px 0; text-align: center; position: relative; overflow: hidden; } .youbim-module .ybm-final-cta::before { content: ""; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(227,54,63,0.18), transparent 65%); top: -200px; right: -200px; } .youbim-module .ybm-final-cta::after { content: ""; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(118,159,183,0.18), transparent 65%); bottom: -200px; left: -150px; } .youbim-module .ybm-final-cta .ybm-container { position: relative; z-index: 1; } .youbim-module .ybm-final-cta h2 { color: var(--ybm-white); margin: 22px auto; max-width: 760px; } .youbim-module .ybm-final-cta p { color: rgba(255,255,255,0.82); font-size: 1.15rem; max-width: 560px; margin: 0 auto 38px; } /* ===== Reveal-on-scroll (paired with module.js) ===== */ .youbim-module [data-ybm-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .youbim-module [data-ybm-reveal].is-visible { opacity: 1; transform: translateY(0); } /* ===== Responsive ===== */ @media (max-width: 1000px) { .youbim-module .ybm-hero-grid, .youbim-module .ybm-features-layout, .youbim-module .ybm-viewer-grid,