/* * Birthday Banner Studio — site design tokens + chrome + reused sf-* block reskin. * * Source of truth: design_handoff_banner_studio/README.md ("Design Tokens" + * "Shared components") and brand-rules.md. Do not invent new colors/radii/shadows — * everything here maps 1:1 to a token in that handoff. * * Loaded site-wide via the sf_site_enqueue_assets hook (functions.php), which is * the engine's documented, non-whitelisted extension point for site-owned CSS. */ /* ------------------------------------------------------------------ */ /* Design tokens */ /* ------------------------------------------------------------------ */ :root { /* Color */ --bb-blue: #4F82C3; /* Blauw Vertrouwen — primary */ --bb-coral: #F15A55; /* Energie Rood — secondary / conversion */ --bb-yellow: #FCB830; /* Confetti Geel — accent only, never a main CTA */ --bb-ink: #000000; --bb-body: #333333; --bb-muted: #666666; --bb-quiet: #5A5B62; --bb-white: #FFFFFF; --bb-border: #E5E5E5; --bb-surface: #F5F5F5; --bb-surface-blue: #F4F9FF; /* Signature gradient (Feestvibe Gradient) */ --bb-gradient: linear-gradient(90deg, #4F82C3, #F15A55, #FCB830); --bb-gradient-135: linear-gradient(135deg, #4F82C3, #F15A55, #FCB830); --bb-gradient-180: linear-gradient(180deg, #4F82C3, #F15A55, #FCB830); /* Tints (derived, per brand-rules) */ --bb-blue-15: #4F82C326; --bb-yellow-15: #FCB83026; --bb-blue-step-bg: #DCE6F3; --bb-blue-33: #4F82C333; --bb-step-icon-tile: #CED4E0; /* Type */ --bb-font-heading: 'Poppins', sans-serif; --bb-font-body: 'Nunito', sans-serif; /* Radii */ --bb-radius-pill: 999px; --bb-radius-card: 18px; --bb-radius-hero: 32px; --bb-radius-hero-mobile: 18px; --bb-radius-cta-panel: 36px; --bb-radius-inner: 12px; /* Shadows */ --sh-card: 0 18px 40px rgba(0, 0, 0, .08); --sh-card-hi: 0 20px 46px rgba(0, 0, 0, .16); --sh-cta: 0 14px 34px rgba(0, 0, 0, .22); --sh-float: 0 20px 44px rgba(0, 0, 0, .28); --sh-photo: 0 22px 54px rgba(0, 0, 0, .20); --sh-panel: 0 26px 70px rgba(0, 0, 0, .30); --sh-menu: 0 24px 60px rgba(0, 0, 0, .18); /* Motion */ --bb-ease: cubic-bezier(.22, 1, .36, 1); --bb-ease-bounce: cubic-bezier(.34, 1.56, .64, 1); } /* ------------------------------------------------------------------ */ /* Base */ /* ------------------------------------------------------------------ */ /* Site-wide box-sizing reset. .bb-scope sits on (see header.php), so this reaches virtually every element on every page. Without it, any rule that pairs `width: 100%`/`width: ` with padding (the mobile breakpoints below routinely do this, e.g. .bb-pricing-card at <=900px) renders wider than its container — the box model adds padding/border on top of the content width instead of inside it — and the element overflows the viewport at narrow widths even though nothing used a fixed px width. :where() keeps this at zero specificity so a component's own box-sizing (if any) still wins. */ :where(.bb-scope) *, :where(.bb-scope) *::before, :where(.bb-scope) *::after { box-sizing: border-box; } .bb-scope, .bb-nav, .bb-footer, [data-sf-block="sf-process-steps"], [data-sf-block="sf-faq"] { font-family: var(--bb-font-body); color: var(--bb-body); } .bb-scope h1, .bb-scope h2, .bb-scope h3, .bb-nav, .bb-footer, [data-sf-block="sf-process-steps"] h2, [data-sf-block="sf-process-steps"] h3, [data-sf-block="sf-faq"] h2 { font-family: var(--bb-font-heading); } :where(.bb-scope) h1, :where(.bb-scope) h2 { text-wrap: balance; letter-spacing: -.03em; font-weight: 800; color: var(--bb-ink); margin: 0; } .bb-scope p { text-wrap: pretty; } /* :where() zeroes the specificity .bb-scope would otherwise add, so this base link/heading reset always loses to a component's own class (e.g. .bb-btn-primary, .bb-hero-copy h1, .bb-coll-intro h2) instead of tying with it on specificity and winning on source order. Without :where(), every "" nested in a .bb-scope wrapper rendered with blue link-color text instead of its intended white/ink color, and every gradient-panel h1/h2 rendered ink-black instead of white — confirmed via getComputedStyle() on the live homepage hero CTA and H1 before this fix. */ :where(.bb-scope) a { color: var(--bb-blue); text-decoration: none; transition: color .18s var(--bb-ease); } :where(.bb-scope) a:hover { color: var(--bb-ink); text-decoration: underline; } .bb-scope :focus-visible { outline: 2px solid var(--bb-blue); outline-offset: 2px; border-radius: 6px; } .bb-eyebrow { margin: 0 0 10px; font-family: var(--bb-font-heading); font-size: 11px; font-weight: 600; color: var(--bb-blue); text-transform: uppercase; letter-spacing: .18em; } .section-pad { padding: 96px 64px; } @media (max-width: 1240px) { .section-pad { padding-left: 40px; padding-right: 40px; } } @media (max-width: 900px) { .section-pad { padding: 64px 28px; } } @media (max-width: 768px) { .section-pad { padding: 48px 24px; } } @media (max-width: 620px) { .section-pad { padding: 40px 18px; } } .bb-content-col { max-width: 1240px; margin-left: auto; margin-right: auto; } @media (prefers-reduced-motion: reduce) { .bb-scope *, .bb-scope *::before, .bb-scope *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ------------------------------------------------------------------ */ /* Buttons */ /* ------------------------------------------------------------------ */ .bb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: var(--bb-radius-pill); font-family: var(--bb-font-heading); font-weight: 700; font-size: 14.5px; white-space: nowrap; cursor: pointer; border: 1.5px solid transparent; transition: transform .18s var(--bb-ease), border-color .18s var(--bb-ease), background-color .18s var(--bb-ease), color .18s var(--bb-ease), box-shadow .18s var(--bb-ease); text-decoration: none !important; } .bb-btn-primary { background: var(--bb-coral); color: var(--bb-white); padding: 16px 30px; box-shadow: var(--sh-cta); } .bb-btn-primary:hover { border-color: var(--bb-white); color: var(--bb-white); } .bb-btn-primary:active { transform: scale(.98); } .bb-btn-secondary { background: var(--bb-white); color: var(--bb-ink); padding: 16px 30px; box-shadow: var(--sh-card); border-color: transparent; } .bb-btn-secondary:hover { border-color: var(--bb-blue); color: var(--bb-ink); } .bb-btn-on-gradient { background: var(--bb-white); color: #0B0B0E; padding: 17px 34px; font-size: 15px; font-weight: 800; box-shadow: var(--sh-cta); } .bb-btn-on-gradient:hover { transform: translateY(-2px); color: #0B0B0E; } .bb-btn-outline-gradient { border: 1.5px solid rgba(255, 255, 255, .45); color: var(--bb-white); padding: 17px 30px; font-size: 15px; background: transparent; } .bb-btn-outline-gradient:hover { background: rgba(255, 255, 255, .14); color: var(--bb-white); } .bb-btn-quiet { border: 1.5px solid #EEEEEE; color: var(--bb-body); padding: 13px; width: 100%; background: var(--bb-white); font-size: 14px; } .bb-btn-quiet:hover { color: var(--bb-ink); border-color: var(--bb-blue); } /* ------------------------------------------------------------------ */ /* Top navigation */ /* ------------------------------------------------------------------ */ .bb-nav-spacer { height: 68px; } .bb-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #FFFFFFE6; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--bb-border); min-height: 62px; padding: 0 40px; } .bb-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--bb-gradient-135); } .bb-nav-inner { max-width: 1240px; margin: 0 auto; min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .bb-nav-logo { display: flex; align-items: center; flex-shrink: 0; } .bb-nav-logo img { height: 44px; width: auto; display: block; } .bb-nav-links { display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; } .bb-nav-links a { font-family: var(--bb-font-body); font-size: 14.5px; font-weight: 600; color: var(--bb-ink); } .bb-nav-links a:hover { color: var(--bb-blue); text-decoration: none; } .bb-nav-links a.is-active { font-weight: 800; } .bb-nav-right { display: flex; align-items: center; gap: 18px; } .bb-nav-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--bb-ink); } .bb-nav-cart:hover { color: var(--bb-blue); } .bb-nav-cart-count { position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--bb-coral); color: var(--bb-white); font-family: var(--bb-font-heading); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .bb-nav-login { font-family: var(--bb-font-body); font-size: 14px; font-weight: 600; color: var(--bb-ink); } .bb-nav-login:hover { color: var(--bb-blue); } .bb-nav-burger { display: none; border: none; background: transparent; cursor: pointer; padding: 8px; color: var(--bb-ink); } .bb-nav-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 40px; width: 260px; background: var(--bb-white); border: 1.5px solid rgba(0, 0, 0, .14); border-radius: 18px; box-shadow: var(--sh-menu); padding: 10px; z-index: 110; } .bb-nav-dropdown.is-open { display: block; } .bb-nav-dropdown a { display: block; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--bb-ink); font-family: var(--bb-font-body); } .bb-nav-dropdown a:hover { background: rgba(0, 0, 0, .07); text-decoration: none; } @media (max-width: 1024px) { .bb-nav-links { display: none; } .bb-nav-burger { display: inline-flex; align-items: center; } } @media (max-width: 860px) { .bb-nav-links a { font-size: 13.5px; } } @media (max-width: 480px) { .bb-nav { padding: 0 18px; } .bb-nav-login { display: none; } } /* ------------------------------------------------------------------ */ /* Floating "Create Your Banner" pill */ /* ------------------------------------------------------------------ */ .bb-float-cta { position: fixed; right: 24px; bottom: 24px; z-index: 120; display: inline-flex; align-items: center; gap: 8px; background: var(--bb-white); border: 1.5px solid rgba(0, 0, 0, .22); border-radius: var(--bb-radius-pill); padding: 13px 22px; font-family: var(--bb-font-heading); font-size: 13.5px; font-weight: 700; color: var(--bb-ink); box-shadow: 0 14px 34px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .24s var(--bb-ease), transform .24s var(--bb-ease), background-color .18s var(--bb-ease), color .18s var(--bb-ease); } .bb-float-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .bb-float-cta:hover { transform: translateY(-3px); background: var(--bb-coral); color: var(--bb-white); box-shadow: var(--sh-float); text-decoration: none; } .bb-float-cta:hover svg { stroke: var(--bb-white); } .bb-float-cta:active { transform: translateY(-1px) scale(.98); } /* ------------------------------------------------------------------ */ /* Cards (shared primitive) */ /* ------------------------------------------------------------------ */ .bb-card { background: var(--bb-white); border: 1.5px solid rgba(0, 0, 0, .12); border-radius: var(--bb-radius-card); padding: 28px 32px; box-shadow: var(--sh-card); transition: transform .24s var(--bb-ease), box-shadow .24s var(--bb-ease); } .bb-card:hover { transform: translateY(-6px); box-shadow: var(--sh-card-hi); } .bb-card h3 { color: var(--bb-ink); font-size: 20px; font-weight: 700; margin: 0 0 10px; } .bb-card p { font-size: 14px; color: var(--bb-body); line-height: 1.6; margin: 0; } /* ------------------------------------------------------------------ */ /* Footer */ /* ------------------------------------------------------------------ */ .bb-footer { background: var(--bb-white); padding: 60px 64px 0; position: relative; overflow: hidden; } .bb-footer-wave { position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none; overflow: hidden; } .bb-footer-inner { max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; } .bb-footer-cols { display: flex; gap: 80px; margin-bottom: 48px; flex-wrap: wrap; padding-top: 40px; } .bb-footer-brand { flex: 2; min-width: 220px; } .bb-footer-brand img { height: 44px; width: auto; display: block; margin-bottom: 16px; } .bb-footer-tagline { margin: 0 0 20px; font-size: 13px; color: var(--bb-ink); line-height: 1.65; max-width: 280px; } .bb-footer-contact { display: flex; flex-direction: column; gap: 6px; margin: 0 0 20px; font-size: 13px; color: var(--bb-body); line-height: 1.6; } .bb-footer-contact a { color: var(--bb-blue); font-size: 13px; } .bb-footer-social { display: flex; gap: 10px; } .bb-footer-social a { width: 38px; height: 38px; border-radius: 12px; background: var(--bb-surface); border: 1px solid var(--bb-border); display: flex; align-items: center; justify-content: center; color: var(--bb-ink); } .bb-footer-social a:hover { background: var(--bb-blue-15); text-decoration: none; } .bb-footer-col { flex: 1; min-width: 130px; } .bb-footer-col-title { margin: 0 0 16px; font-size: 11px; font-weight: 700; color: var(--bb-ink); text-transform: uppercase; letter-spacing: .1em; } .bb-footer-col-links { display: flex; flex-direction: column; gap: 10px; } .bb-footer-col-links a { font-size: 13px; color: var(--bb-ink); } .bb-footer-bottom { border-top: 1px solid rgba(0, 0, 0, .22); padding: 24px 0 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--bb-ink); } .bb-footer-bottom-links { display: flex; gap: 20px; } .bb-footer-bottom-links a { font-size: 12px; color: var(--bb-ink); } @media (max-width: 620px) { .bb-footer { padding: 48px 24px 0; } .bb-footer-cols { gap: 40px; } } /* ------------------------------------------------------------------ */ /* Reused sf-process-steps reskin ("How It Works") */ /* ------------------------------------------------------------------ */ [data-sf-block="sf-process-steps"] .process-section { max-width: 1240px; margin: 40px auto; padding: 64px 64px 96px; background: linear-gradient(180deg, #FFF8EDCC, #FFF1DEB3); border: 1px solid #FCB8304D; border-radius: var(--bb-radius-hero); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--sh-card); } @media (max-width: 1240px) { [data-sf-block="sf-process-steps"] .process-section { padding: 48px 40px 64px; } } @media (max-width: 620px) { [data-sf-block="sf-process-steps"] .process-section { margin: 24px auto; padding: 32px 18px 40px; border-radius: var(--bb-radius-hero-mobile); } } [data-sf-block="sf-process-steps"] .process-title { text-align: center; margin-bottom: 56px; } [data-sf-block="sf-process-steps"] .section-badge { display: inline-block; font-family: var(--bb-font-heading); font-size: 11px; font-weight: 600; color: var(--bb-blue) !important; text-transform: uppercase; letter-spacing: .18em; background: none !important; margin-bottom: 10px; } /* sf-process-steps/style.css sets --sf-process-heading-color/--sf-process-step-* to a dark-shell white default and loads AFTER this stylesheet (block CSS is enqueued on wp_enqueue_scripts priority 20, this file on the default priority), so it wins custom-property ties. !important on the CONSUMING properties is the only reliable override, confirmed by rendering the homepage locally (headings/desc were invisible white-on-white without it). */ [data-sf-block="sf-process-steps"] .process-title h2 { font-size: clamp(30px, 3.5vw, 44px); color: var(--bb-ink) !important; } [data-sf-block="sf-process-steps"] .process-steps { display: flex; gap: 40px; align-items: stretch; counter-reset: bb-step; } [data-sf-block="sf-process-steps"] .process-step { flex: 1; position: relative; background: var(--bb-white); border: 1.5px solid rgba(0, 0, 0, .12); border-radius: var(--bb-radius-card); padding: 36px 32px; box-shadow: var(--sh-card); overflow: hidden; counter-increment: bb-step; /* sf-process-steps/style.css centers the column (text-align:center, and .step-num gets margin:0 auto), which left the icon tile (centered) and the icon glyph (absolutely positioned at the true left padding edge, below) misaligned — confirmed by rendering locally. This design is left-aligned. */ text-align: left !important; } [data-sf-block="sf-process-steps"] .process-step::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 5px; background: var(--bb-yellow); } [data-sf-block="sf-process-steps"] .process-step::before { content: counter(bb-step, decimal-leading-zero); position: absolute; top: 32px; right: 32px; font-family: var(--bb-font-heading); font-size: 48px; font-weight: 900; color: var(--bb-blue-33); line-height: 1; } /* The digit text stored in .step-num is hidden; the icon (, a sibling) is overlaid on the same 52x52 tile so the icon reads inside the tile. */ [data-sf-block="sf-process-steps"] .step-num { width: 52px; height: 52px; border-radius: 14px; background: var(--bb-step-icon-tile) !important; margin: 0 0 20px !important; position: relative; font-size: 0; color: transparent; } [data-sf-block="sf-process-steps"] .process-step > i.fas { position: absolute; top: 36px; left: 32px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--bb-ink); } [data-sf-block="sf-process-steps"] h3 { font-size: 20px; font-weight: 700; color: var(--bb-ink) !important; margin: 0 0 10px; } [data-sf-block="sf-process-steps"] .process-step p { font-size: 14px; color: var(--bb-body) !important; line-height: 1.6; margin: 0; } @media (max-width: 900px) { [data-sf-block="sf-process-steps"] .process-steps { flex-direction: column; } } /* ------------------------------------------------------------------ */ /* Reused sf-faq reskin ("Questions, Answered") */ /* ------------------------------------------------------------------ */ /* sf-faq/style.css's "details" layout is a DARK shell by default (--sf-faq-bg:#0d0d0d, white summary text, boxed translucent-white items) and loads AFTER this stylesheet (see sf-process-steps note above for why), so every conflicting property below needs !important — confirmed by rendering the homepage locally (FAQ rendered as a black panel without it). */ [data-sf-block="sf-faq"] .faq-section { max-width: 1240px; margin: 0 auto; padding: 0 64px 96px; background: var(--bb-white) !important; } @media (max-width: 1240px) { [data-sf-block="sf-faq"] .faq-section { padding: 0 40px 64px; } } @media (max-width: 620px) { [data-sf-block="sf-faq"] .faq-section { padding: 0 18px 40px; } } /* sf-faq/style.css's own .section-inner caps the readable column at 880px — that's the actual width bottleneck (tighter than .faq-section above), so it needs its own override here to let the section use the full 1240px frame. */ [data-sf-block="sf-faq"] .section-inner { max-width: 1040px; margin: 0 auto; padding: 100px 0 0; } @media (max-width: 768px) { [data-sf-block="sf-faq"] .section-inner { padding-top: 64px; } } [data-sf-block="sf-faq"] .section-title { text-align: center; margin-bottom: 44px; } [data-sf-block="sf-faq"] .section-badge { display: inline-block; font-family: var(--bb-font-heading); font-size: 11px; font-weight: 600; color: var(--bb-blue) !important; text-transform: uppercase; letter-spacing: .18em; margin-bottom: 10px; background: none !important; padding: 0 !important; border-radius: 0 !important; } [data-sf-block="sf-faq"] .section-title h2 { font-size: clamp(28px, 3vw, 42px); color: var(--bb-ink) !important; } [data-sf-block="sf-faq"] details.faq-item { background: none !important; border: none !important; border-radius: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, .12) !important; padding: 4px 0; } [data-sf-block="sf-faq"] details.faq-item[open] { background: none !important; } [data-sf-block="sf-faq"] details.faq-item summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-family: var(--bb-font-heading); font-size: 16px; font-weight: 700; color: var(--bb-ink) !important; } [data-sf-block="sf-faq"] details.faq-item summary::-webkit-details-marker { display: none; } [data-sf-block="sf-faq"] .faq-chev { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .07) !important; border: none !important; color: var(--bb-ink) !important; font-size: 0; /* hide the literal "+" text node — the icon is drawn by the bars below so it can morph into a dash on open, the conventional accordion pattern */ font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background-color .18s var(--bb-ease), color .18s var(--bb-ease); } [data-sf-block="sf-faq"] .faq-chev::before, [data-sf-block="sf-faq"] .faq-chev::after { content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; transition: transform .18s var(--bb-ease); } [data-sf-block="sf-faq"] .faq-chev::before { width: 10px; height: 2px; transform: translate(-50%, -50%); } [data-sf-block="sf-faq"] .faq-chev::after { width: 2px; height: 10px; transform: translate(-50%, -50%); } [data-sf-block="sf-faq"] details.faq-item[open] .faq-chev::after { transform: translate(-50%, -50%) scaleY(0); } [data-sf-block="sf-faq"] details.faq-item[open] .faq-chev { transform: translateY(-50%) !important; /* cancel sf-faq/style.css's rotate(45deg), which would turn our horizontal bar diagonal instead of leaving a flat dash */ background: var(--bb-coral) !important; border-color: var(--bb-coral) !important; color: var(--bb-white) !important; } [data-sf-block="sf-faq"] .faq-body { margin: 0 0 22px; padding: 0 40px 22px 0 !important; font-size: 14.5px; color: var(--bb-quiet) !important; line-height: 1.75; } /* ------------------------------------------------------------------ */ /* Reused sf-feature-grid reskin (cards layout, secondary pages) */ /* ------------------------------------------------------------------ */ /* sf-feature-grid/style.css's "cards" layout is a dark shell by default (#111 section, #161616 cards, white/#888 text) and loads AFTER this stylesheet (same enqueue-order note as sf-process-steps above), so every conflicting property needs !important. */ [data-sf-block="sf-feature-grid"] .features-section { background: var(--bb-white) !important; padding: 0 64px 96px !important; max-width: 1240px; margin: 0 auto; } @media (max-width: 1240px) { [data-sf-block="sf-feature-grid"] .features-section { padding: 0 40px 64px !important; } } @media (max-width: 620px) { [data-sf-block="sf-feature-grid"] .features-section { padding: 0 18px 40px !important; } } [data-sf-block="sf-feature-grid"] .features-inner { max-width: 1240px; margin: 0 auto; } [data-sf-block="sf-feature-grid"] .features-title { text-align: center; margin-bottom: 44px; } [data-sf-block="sf-feature-grid"] .section-badge { display: inline-block; background: none !important; font-family: var(--bb-font-heading); font-size: 11px; font-weight: 600; color: var(--bb-blue) !important; text-transform: uppercase; letter-spacing: .18em; margin-bottom: 10px; padding: 0 !important; } [data-sf-block="sf-feature-grid"] .features-title h2 { font-size: clamp(26px, 3vw, 38px); color: var(--bb-ink) !important; } [data-sf-block="sf-feature-grid"] .features-title p { margin: 0 auto; max-width: 660px; font-size: 15.5px; color: var(--bb-muted) !important; line-height: 1.75; } [data-sf-block="sf-feature-grid"] .feature-card { background: var(--bb-white) !important; border: 1.5px solid rgba(0, 0, 0, .12) !important; border-radius: var(--bb-radius-card); padding: 28px 26px; box-shadow: var(--sh-card); transition: transform .2s var(--bb-ease), box-shadow .2s var(--bb-ease); } [data-sf-block="sf-feature-grid"] .feature-card:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hi); border-color: rgba(0, 0, 0, .12) !important; } [data-sf-block="sf-feature-grid"] .feature-card .f-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--bb-blue-15); color: var(--bb-blue); font-size: 20px; margin-bottom: 18px; } [data-sf-block="sf-feature-grid"] .feature-card .f-icon:empty { display: none; margin-bottom: 0; } [data-sf-block="sf-feature-grid"] .feature-card h3 { font-size: 17px; font-weight: 800; color: var(--bb-ink) !important; margin: 0 0 8px; } [data-sf-block="sf-feature-grid"] .feature-card p { font-size: 13.5px; color: var(--bb-body) !important; line-height: 1.65; margin: 0; } [data-sf-block="sf-feature-grid"] .feature-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } [data-sf-block="sf-feature-grid"] .feature-list li { font-size: 13px; color: var(--bb-body) !important; font-family: var(--bb-font-body); line-height: 1.55; padding-left: 20px; position: relative; } [data-sf-block="sf-feature-grid"] .feature-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--bb-ink); font-weight: 800; } [data-sf-block="sf-feature-grid"] a.feature-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; } [data-sf-block="sf-feature-grid"] .feature-card__link { margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--bb-font-heading); font-size: 13.5px; font-weight: 800; color: var(--bb-white) !important; background: var(--bb-gradient-135); border-radius: 13px; padding: 14px; justify-content: center; } [data-sf-block="sf-feature-grid"] .features-grid { gap: 18px !important; } @media (max-width: 900px) { [data-sf-block="sf-feature-grid"] .features-grid { grid-template-columns: 1fr !important; } } /* ------------------------------------------------------------------ */ /* Reused sf-values reskin ("Three rules we never break") */ /* ------------------------------------------------------------------ */ /* sf-values/style.css is a dark shell by default (#111 section, #161616 cards) and loads after this stylesheet, so conflicts need !important. */ [data-sf-block="sf-values"] .values-section { background: var(--bb-white) !important; max-width: 1240px; margin: 0 auto; padding: 0 64px 96px; } @media (max-width: 1240px) { [data-sf-block="sf-values"] .values-section { padding: 0 40px 64px; } } @media (max-width: 620px) { [data-sf-block="sf-values"] .values-section { padding: 0 18px 40px; } } [data-sf-block="sf-values"] .section-title { margin-bottom: 32px; } [data-sf-block="sf-values"] .section-badge { display: inline-block; background: none !important; border: none !important; font-family: var(--bb-font-heading); font-size: 11px; font-weight: 600; color: var(--bb-blue) !important; text-transform: uppercase; letter-spacing: .18em; margin-bottom: 10px; padding: 0 !important; } [data-sf-block="sf-values"] .section-title h2 { font-size: 32px; color: var(--bb-ink) !important; max-width: 640px; } [data-sf-block="sf-values"] .section-title p { color: var(--bb-body) !important; } [data-sf-block="sf-values"] .values-grid { gap: 20px !important; } [data-sf-block="sf-values"] .value-card { background: var(--bb-white) !important; border: 1.5px solid rgba(0, 0, 0, .12) !important; border-radius: 20px; padding: 28px 26px !important; box-shadow: var(--sh-card); } [data-sf-block="sf-values"] .value-card:hover { border-color: rgba(0, 0, 0, .12) !important; transform: translateY(-6px); } [data-sf-block="sf-values"] .value-card .val-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--bb-gradient-135); color: var(--bb-white); font-size: 16px; font-weight: 800; margin-bottom: 16px; } [data-sf-block="sf-values"] .value-card h3 { color: var(--bb-ink) !important; font-size: 18px; } [data-sf-block="sf-values"] .value-card p { color: var(--bb-body) !important; font-size: 14.5px; line-height: 1.68; } /* ------------------------------------------------------------------ */ /* Reused sf-results-stats reskin (gradient stat panel, About page) */ /* ------------------------------------------------------------------ */ /* sf-results-stats/style.css is a dark bar by default (#111 bg) and loads after this stylesheet, so conflicts need !important. */ [data-sf-block="sf-results-stats"] .results-section { background: var(--bb-gradient-135) !important; max-width: 1240px; margin: 0 auto; border-radius: 28px; padding: 52px 48px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); } [data-sf-block="sf-results-stats"] .results-inner { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px !important; text-align: left !important; justify-content: initial !important; max-width: none; } [data-sf-block="sf-results-stats"] .result-stat h3 { font-size: 38px !important; margin-bottom: 6px; } [data-sf-block="sf-results-stats"] .result-stat p { font-size: 13.5px !important; color: rgba(255, 255, 255, .86) !important; line-height: 1.55; } /* ------------------------------------------------------------------ */ /* Reused sf-service-overview reskin (About page split sections) */ /* ------------------------------------------------------------------ */ /* sf-service-overview/style.css is a dark shell by default (white h2 on transparent, #161616 media panel) and loads after this stylesheet, so conflicts need !important. */ [data-sf-block="sf-service-overview"] .service-overview { max-width: 1240px; padding: 84px 64px 0 !important; } @media (max-width: 1240px) { [data-sf-block="sf-service-overview"] .service-overview { padding: 64px 40px 0 !important; } } @media (max-width: 620px) { [data-sf-block="sf-service-overview"] .service-overview { padding: 48px 18px 0 !important; } } [data-sf-block="sf-service-overview"] .overview-grid { gap: 56px !important; } [data-sf-block="sf-service-overview"] .section-badge { display: inline-block; background: none !important; font-family: var(--bb-font-heading); font-size: 11px; font-weight: 600; color: var(--bb-blue) !important; text-transform: uppercase; letter-spacing: .18em; margin-bottom: 12px; padding: 0 !important; } [data-sf-block="sf-service-overview"] .overview-text h2 { font-size: 32px !important; color: var(--bb-ink) !important; line-height: 1.14; } [data-sf-block="sf-service-overview"] .overview-text p { font-size: 15.5px !important; color: var(--bb-body) !important; line-height: 1.7 !important; } [data-sf-block="sf-service-overview"] .overview-tagline { color: var(--bb-blue) !important; } [data-sf-block="sf-service-overview"] .overview-media, [data-sf-block="sf-service-overview"] .overview-img { background: none !important; border: none !important; min-height: 0 !important; } [data-sf-block="sf-service-overview"] .overview-img img, [data-sf-block="sf-service-overview"] .overview-media img { border-radius: 20px; box-shadow: var(--sh-photo); } [data-sf-block="sf-service-overview"] .overview-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; } [data-sf-block="sf-service-overview"] .overview-buttons .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--bb-radius-pill); font-family: var(--bb-font-heading); font-size: 14px; font-weight: 700; padding: 14px 26px; text-decoration: none !important; } [data-sf-block="sf-service-overview"] .overview-buttons .btn-primary { background: var(--bb-coral) !important; color: var(--bb-white) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); } [data-sf-block="sf-service-overview"] .overview-buttons .btn-white, [data-sf-block="sf-service-overview"] .overview-buttons .btn-outline-white { background: var(--bb-white) !important; color: var(--bb-ink) !important; border: 1.5px solid rgba(0, 0, 0, .18) !important; } [data-sf-block="sf-service-overview"] .sf-link-arrow { color: var(--bb-blue) !important; font-weight: 700; }