/* * Buy Demo Tracks: component styles. Mobile-first. Tokens come from theme.json. * * Brand (from the live buydemotracks.com): navy #273441, orange #FF8351, Poppins. * The design rests on two brand devices: * 1. The logo's weight contrast (light text with one bold phrase) in big headings. * 2. The record "b" mark: concentric rings with an orange center dot (.bdt-rings). * Orange is used as a fill (buttons, dots) or as text on navy only. On light * backgrounds orange text uses --bdt-rust for contrast. */ :root { --bdt-navy: var(--wp--preset--color--navy); --bdt-navy-deep: var(--wp--preset--color--navy-deep); --bdt-navy-soft: var(--wp--preset--color--navy-soft); --bdt-orange: var(--wp--preset--color--orange); --bdt-orange-hover: var(--wp--preset--color--orange-hover); --bdt-rust: var(--wp--preset--color--rust); --bdt-paper: var(--wp--preset--color--paper); --bdt-white: var(--wp--preset--color--white); --bdt-slate: var(--wp--preset--color--slate); --bdt-mist: var(--wp--preset--color--mist); --bdt-line: var(--wp--preset--color--line); --bdt-sand: var(--wp--preset--color--sand); --bdt-sand-deep: var(--wp--preset--color--sand-deep); --bdt-heading: var(--wp--preset--font-family--heading); --bdt-shadow: var(--wp--preset--shadow--card); --bdt-ease: cubic-bezier(.2, .7, .2, 1); } html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } ::selection { background: var(--bdt-orange); color: var(--bdt-navy-deep); } :where(a, button, input, select, textarea, summary):focus:not(:focus-visible) { outline: none; } :where(a, button, summary):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; } :where(input, select, textarea):focus-visible { outline: 2px solid var(--bdt-navy); outline-offset: 2px; } a, button, summary, label { -webkit-tap-highlight-color: transparent; } .wp-site-blocks > * + * { margin-block-start: 0; } .bdt-main--landing > .wp-block-post-content > * { margin-block: 0; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } strong { font-weight: 700; } /* Review marker for things Steve needs to answer. Remove before launch. */ .bdt-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .bdt-fine { font-size: 1rem; color: var(--bdt-slate); } /* ---------- Buttons ---------- */ .wp-element-button, .wp-block-button__link { transition: background-color .15s, color .15s, transform .15s var(--bdt-ease), box-shadow .15s; } .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(255, 131, 81, .7); } .bdt-btn-lg .wp-block-button__link { padding: 1.05rem 1.9rem; font-size: 1.0625rem; } .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--bdt-navy); border: 2px solid currentColor; } /* ---------- Waveform mark: small music detail for the post CTA and quotes only ---------- */ :root { --bdt-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 18'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='7' width='2.6' height='4' rx='1.3'/%3E%3Crect x='5' y='5' width='2.6' height='8' rx='1.3'/%3E%3Crect x='10' y='2' width='2.6' height='14' rx='1.3'/%3E%3Crect x='15' y='6' width='2.6' height='6' rx='1.3'/%3E%3Crect x='20' y='0' width='2.6' height='18' rx='1.3'/%3E%3Crect x='25' y='4' width='2.6' height='10' rx='1.3'/%3E%3Crect x='30' y='7' width='2.6' height='4' rx='1.3'/%3E%3Crect x='35' y='3' width='2.6' height='12' rx='1.3'/%3E%3Crect x='40' y='5' width='2.6' height='8' rx='1.3'/%3E%3Crect x='45' y='1' width='2.6' height='16' rx='1.3'/%3E%3Crect x='50' y='6' width='2.6' height='6' rx='1.3'/%3E%3Crect x='55' y='4' width='2.6' height='10' rx='1.3'/%3E%3Crect x='60' y='7' width='2.6' height='4' rx='1.3'/%3E%3C/g%3E%3C/svg%3E"); } .bdt-wave { display: block; width: 64px; height: 18px; background: var(--bdt-orange); -webkit-mask: var(--bdt-wave-mask) left center / contain no-repeat; mask: var(--bdt-wave-mask) left center / contain no-repeat; } /* ---------- Record rings (brand mark) ---------- */ .bdt-rings { position: absolute; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, var(--bdt-orange) 0 2.6%, transparent 2.8%), radial-gradient(circle, transparent 0 9%, rgba(174, 184, 193, .16) 9.2% 9.8%, transparent 10%), repeating-radial-gradient(circle, transparent 0 14px, rgba(174, 184, 193, .09) 14px 16px); max-width: none !important; margin: 0 !important; -webkit-mask: radial-gradient(circle, #000 60%, transparent 71%); mask: radial-gradient(circle, #000 60%, transparent 71%); animation: bdt-spin 90s linear infinite; } @keyframes bdt-spin { to { transform: rotate(360deg); } } /* ---------- Header ---------- */ .bdt-header { position: sticky; top: 0; z-index: 50; background: var(--bdt-navy); color: var(--bdt-white); border-bottom: 1px solid rgba(255, 255, 255, .08); } .bdt-header__inner { padding-block: .85rem; gap: 1rem; } .bdt-header__nav { gap: 1.25rem; } .bdt-logo { display: block; line-height: 0; } .bdt-logo img { height: 26px; width: auto; } .bdt-header .wp-block-navigation { font-size: 1rem; font-weight: 600; gap: 1.4rem; } .bdt-header .wp-block-navigation .wp-block-navigation-item__content { color: var(--bdt-white); text-decoration: none; padding-block: .3rem; background: linear-gradient(var(--bdt-orange), var(--bdt-orange)) 0 100% / 0 2px no-repeat; transition: background-size .2s var(--bdt-ease); } .bdt-header .wp-block-navigation .wp-block-navigation-item__content:hover { background-size: 100% 2px; } .bdt-header .wp-block-navigation__responsive-container-open, .bdt-header .wp-block-navigation__responsive-container-close { color: var(--bdt-white); } .bdt-header .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; } .bdt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font: 600 1.6rem/1.3 var(--bdt-heading); } .bdt-header__cta .wp-block-button__link { padding: .6rem 1.1rem; font-size: 1rem; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; } .bdt-header .wp-block-woocommerce-customer-account, .bdt-header .wc-block-mini-cart { display: none; } /* * One header breakpoint at 1024px (WordPress's own nav switches at 600px, which is too * early for six links plus the button). * Below 1024: logo, hamburger and button on one row. Under 370px the button says "Order". * 1024 and up: logo, inline nav and button on one row, never wrapping. */ .bdt-header__inner, .bdt-header__nav { align-items: center; flex-wrap: nowrap; } .bdt-header__nav > * { flex: none; } .bdt-header__cta { margin: 0; } .bdt-cta-short { display: none; } @media (max-width: 1023px) { .bdt-header .wp-block-navigation__responsive-container-open { display: inline-flex !important; } .bdt-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; } } @media (min-width: 1024px) { .bdt-header .wp-block-navigation__responsive-container-open { display: none !important; } .bdt-header .wp-block-navigation__container { flex-wrap: nowrap; gap: 1.1rem; } .bdt-header .wp-block-navigation-item__content { white-space: nowrap; } } @media (max-width: 369px) { .bdt-cta-long { display: none; } .bdt-cta-short { display: inline; } } /* Open menu (below 1024): full-screen navy panel, big links, close button top right. */ .bdt-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--bdt-navy) !important; color: var(--bdt-white); } .bdt-header .wp-block-navigation__responsive-container.is-menu-open { padding: 1rem var(--wp--style--root--padding-left, 1.125rem) 2rem !important; } .bdt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.75rem; align-items: stretch !important; } .bdt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; align-items: stretch !important; justify-content: flex-start !important; width: 100%; } .bdt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; justify-content: flex-start !important; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .1); } .bdt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: flex; align-items: center; width: 100%; min-height: 56px; padding: 0 !important; font: 600 1.375rem/1.2 var(--bdt-heading); background: none; } .bdt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--bdt-orange); } .bdt-header .wp-block-navigation__responsive-container-close { top: 1rem !important; right: var(--wp--style--root--padding-left, 1.125rem) !important; } .bdt-header .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } .bdt-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none !important; } .bdt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: inline-flex !important; } /* ---------- Big headings: the logo's light/bold contrast ---------- */ .bdt-hero__title, .bdt-page-head h1, .bdt-optin-hero h1, .bdt-cta-band h2 { font-weight: 300; letter-spacing: -.035em; line-height: 1.06; } .bdt-hero__title strong, .bdt-page-head h1 strong, .bdt-cta-band h2 strong { font-weight: 700; color: var(--bdt-orange); } .bdt-optin-hero h1 strong { font-weight: 700; } /* ---------- Hero ---------- */ .bdt-hero { position: relative; overflow: hidden; background: var(--bdt-navy); color: var(--bdt-white); padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3.5rem, 9vw, 7rem); } .bdt-hero__rings { width: min(820px, 120vw); right: -18%; top: 50%; translate: 0 -50%; } .bdt-hero__cols { position: relative; gap: clamp(2.5rem, 6vw, 5rem) !important; } .bdt-hero__title { color: var(--bdt-white); font-size: var(--wp--preset--font-size--huge); margin: 0 0 1.5rem; max-width: 15ch; } .bdt-hero__lede { font-size: var(--wp--preset--font-size--lg); color: rgba(255, 255, 255, .84); max-width: 34rem; margin: 0; } .bdt-hero__actions { gap: 1rem 1.75rem; margin-top: 2rem; } .bdt-hero__actions .wp-block-buttons { margin: 0; } .bdt-hero__link { margin: 0; font-weight: 600; } .bdt-hero__link a { color: var(--bdt-white); text-decoration-color: var(--bdt-orange); text-underline-offset: .3em; text-decoration-thickness: 2px; } .bdt-hero__note { margin: 1.1rem 0 0; color: var(--bdt-mist); font-size: 1rem; } @media (max-width: 781px) { .bdt-hero__rings { width: 520px; right: -300px; top: auto; bottom: -180px; translate: none; } } /* Page-load reveal */ @media (prefers-reduced-motion: no-preference) { .bdt-hero__copy > *, .bdt-session { animation: bdt-rise .8s var(--bdt-ease) both; } .bdt-hero__copy > :nth-child(2) { animation-delay: .08s; } .bdt-hero__copy > :nth-child(3) { animation-delay: .16s; } .bdt-hero__copy > :nth-child(4) { animation-delay: .22s; } .bdt-session { animation-delay: .25s; animation-duration: 1s; } } @keyframes bdt-rise { from { opacity: 0; transform: translateY(14px); } } /* Session graphic */ .bdt-session { position: relative; background: var(--bdt-navy-deep); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; padding: 1rem 1rem 1.1rem; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); font-size: .8125rem; overflow: hidden; } .bdt-session__bar { display: flex; align-items: center; gap: .6rem; padding: .2rem .2rem .9rem; color: var(--bdt-mist); font-weight: 600; } .bdt-session__rec { width: .65rem; height: .65rem; border-radius: 50%; background: var(--bdt-orange); box-shadow: 0 0 0 4px rgba(255, 131, 81, .18); animation: bdt-blink 1.4s steps(2, start) infinite; } .bdt-session__time { margin-left: auto; color: var(--bdt-orange); font-variant-numeric: tabular-nums; } .bdt-lane { display: grid; grid-template-columns: 5.4rem 1fr auto; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 8px; background: rgba(255, 255, 255, .035); margin-top: .4rem; } .bdt-lane__name { color: var(--bdt-white); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bdt-lane__tag { font-size: .6875rem; font-weight: 700; letter-spacing: .02em; padding: .2rem .5rem; border-radius: 99px; background: rgba(255, 131, 81, .16); color: var(--bdt-orange); } .bdt-lane__wave { height: 1.6rem; background: repeating-linear-gradient(90deg, var(--w, #E9EEF2) 0 2px, transparent 2px 4px); -webkit-mask: var(--m) 0 50% / var(--ms, 220px) 100% repeat-x; mask: var(--m) 0 50% / var(--ms, 220px) 100% repeat-x; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 L0 14 C8 4 14 6 20 12 S34 2 42 10 56 18 64 8 78 2 90 14 106 6 114 10 128 0 140 12 156 18 166 6 182 4 192 14 206 8 220 14 L220 26 C206 32 192 26 182 36 166 34 156 22 140 28 128 40 114 30 106 34 90 26 78 38 64 32 56 22 42 30 34 38 20 28 8 36 0 26Z'/%3E%3C/svg%3E"); } .bdt-lane--ai { background: transparent; border: 1px dashed rgba(174, 184, 193, .35); } .bdt-lane--ai .bdt-lane__name { color: var(--bdt-mist); font-weight: 400; } .bdt-lane--ai .bdt-lane__wave { --w: #5C6B79; --ms: 90px; } .bdt-lane--ai .bdt-lane__tag { background: rgba(174, 184, 193, .12); color: var(--bdt-mist); } .bdt-lane--v .bdt-lane__wave { --w: #FFFFFF; --ms: 260px; } .bdt-lane--g .bdt-lane__wave { --w: #D9E1E7; --ms: 140px; } .bdt-lane--b .bdt-lane__wave { --w: #FFB495; --ms: 320px; } .bdt-lane--d .bdt-lane__wave { --w: #FF8351; --ms: 60px; } .bdt-session__playhead { position: absolute; top: 2.9rem; bottom: .9rem; left: 45%; width: 2px; background: var(--bdt-orange); box-shadow: 0 0 14px var(--bdt-orange); animation: bdt-play 10s linear infinite; } @keyframes bdt-blink { to { opacity: .2; } } @keyframes bdt-play { from { left: 7rem; } to { left: calc(100% - 5.5rem); } } /* ---------- Sections ---------- */ .bdt-section { padding-block: clamp(3.5rem, 8vw, 6rem); } .bdt-section--tight { padding-block: clamp(2rem, 5vw, 3rem) clamp(3.5rem, 8vw, 6rem); } /* Order page: the form starts close under the page head. */ .bdt-section.bdt-order-section { padding-top: clamp(1.75rem, 4vw, 2.5rem); } .bdt-section__title { font-size: var(--wp--preset--font-size--xxl); margin-block: 0 1rem !important; } .bdt-section__lede { color: var(--bdt-slate); font-size: var(--wp--preset--font-size--lg); margin-block: 0 2.5rem !important; } /* Why */ .bdt-why__cols { gap: clamp(1.5rem, 5vw, 5rem) !important; border-top: 1px solid var(--bdt-line); padding-top: clamp(2rem, 5vw, 3rem); } .bdt-why h2 { font-size: var(--wp--preset--font-size--xxl); margin: 0; max-width: 11ch; } .bdt-why__body p { margin: 0 0 1.1rem; max-width: 38rem; } .bdt-why__body p:first-child { color: var(--bdt-navy); font-family: var(--bdt-heading); font-weight: 300; line-height: 1.4; } /* Steps: numbered circles (same as the order form's step numbers) joined by a light track line. The heading gets room above the track; the line runs between circles, not under the heading. */ .bdt-steps-section .bdt-section__title { margin-bottom: clamp(1.75rem, 4vw, 2.75rem) !important; } .bdt-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 1.75rem; counter-reset: step; } .bdt-step { counter-increment: step; position: relative; padding-left: 3.5rem; } .bdt-step::before { content: counter(step); position: absolute; left: 0; top: -.15rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--bdt-orange); color: var(--bdt-navy-deep); display: grid; place-items: center; font: 600 1.05rem/1 var(--bdt-heading); } .bdt-step h3 { font-size: var(--wp--preset--font-size--lg); margin: 0 0 .45rem; } .bdt-step p { margin: 0; color: var(--bdt-slate); } @media (min-width: 900px) { .bdt-steps { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } .bdt-step { padding-left: 0; padding-top: 3.6rem; } .bdt-step::before { top: 0; } /* Track: from just right of this circle to just left of the next one. */ .bdt-step:not(:last-child)::after { content: ""; position: absolute; top: 1.2rem; left: 3.2rem; right: calc(-2.5rem + .8rem); height: 2px; margin-top: -1px; border-radius: 2px; background: var(--bdt-line); } } /* Pricing */ .bdt-tiers { display: grid; gap: 1.25rem; } @media (min-width: 820px) { .bdt-tiers { grid-template-columns: 1fr 1fr; gap: 1.5rem; } } .bdt-tier { position: relative; display: flex; flex-direction: column; background: var(--bdt-sand); border-radius: 16px; padding: clamp(1.75rem, 4vw, 2.5rem); } .bdt-tier__name { font-size: var(--wp--preset--font-size--xl); margin: 0; } .bdt-tier__price { font: 300 clamp(3.25rem, 7vw, 4.25rem)/1 var(--bdt-heading); letter-spacing: -.04em; margin: .9rem 0 1rem; } .bdt-tier__fit { color: var(--bdt-slate); margin: 0 0 1.25rem; } .bdt-tier__list { list-style: none; margin: 0 0 1.75rem; padding: 1.25rem 0 0; border-top: 1px solid rgba(39, 52, 65, .12); display: grid; gap: .55rem; flex: 1; } .bdt-tier__list li { padding-left: 1.4rem; position: relative; } .bdt-tier__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--bdt-orange); } .bdt-tier__cta { display: block; text-align: center; text-decoration: none; background: var(--bdt-navy); color: var(--bdt-white); border-radius: 6px; padding: 1rem; font: 600 1rem/1.2 var(--bdt-heading); transition: background-color .15s, color .15s; } .bdt-tier__cta:hover { background: var(--bdt-navy-deep); color: var(--bdt-white); } .bdt-tier--band { background: var(--bdt-navy); border-color: var(--bdt-navy); color: var(--bdt-white); overflow: hidden; } .bdt-tier--band::after { content: ""; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 12px, rgba(174, 184, 193, .1) 12px 14px); pointer-events: none; } .bdt-tier--band > * { position: relative; z-index: 1; } .bdt-tier--band .bdt-tier__name { color: var(--bdt-white); } .bdt-tier--band .bdt-tier__price { color: var(--bdt-orange); } .bdt-tier--band .bdt-tier__fit { color: var(--bdt-mist); } .bdt-tier--band .bdt-tier__list { border-color: rgba(255, 255, 255, .12); } .bdt-tier--band .bdt-tier__cta { background: var(--bdt-orange); color: var(--bdt-navy-deep); } .bdt-tier--band .bdt-tier__cta:hover { background: var(--bdt-orange-hover); color: var(--bdt-navy-deep); } .bdt-pricing__more { margin-top: 1.75rem; display: grid; gap: .75rem; } @media (min-width: 820px) { .bdt-pricing__more { grid-template-columns: 1fr 1fr; gap: 1.5rem; } } .bdt-pricing__more p { margin: 0; padding: 1.25rem 1.5rem; background: var(--bdt-sand); border-radius: 14px; color: var(--bdt-ink, var(--bdt-navy)); } .bdt-pricing__more strong { color: var(--bdt-navy); } /* For songwriters, by songwriters */ .bdt-story__cols { gap: clamp(1.75rem, 5vw, 4.5rem) !important; } .bdt-story h2 { font-size: var(--wp--preset--font-size--xxl); font-weight: 300; letter-spacing: -.03em; margin: 0 0 1.25rem; } .bdt-story h2 strong { font-weight: 700; } .bdt-story__body p { margin: 0 0 1rem; max-width: 38rem; } .bdt-story__body p:first-of-type { font-size: var(--wp--preset--font-size--lg); font-family: var(--bdt-heading); font-weight: 300; line-height: 1.45; } .bdt-story__link { margin-top: 1.25rem !important; font-weight: 700; } .bdt-story__link a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-right: 1.6em; text-decoration-color: var(--bdt-orange); text-underline-offset: .3em; text-decoration-thickness: 2px; } /* The arrow sits outside the text flow so the underline stops at the words. */ .bdt-story__link a::after { content: "\2192"; position: absolute; right: 0; inset-block: 0; display: flex; align-items: center; color: var(--bdt-rust); transition: transform .2s var(--bdt-ease); } .bdt-story__link a:hover::after { transform: translateX(3px); } /* Visual slot: a record in brand colors. Replace with a photo of Jared and Steve when there is one. */ .bdt-story__visual { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; transform: rotate(-8deg); background: radial-gradient(circle, var(--bdt-orange) 0 5%, var(--bdt-navy-deep) 5.3% 6.6%, var(--bdt-navy-soft) 6.9% 19%, transparent 19.3%), radial-gradient(circle, transparent 0 22%, rgba(255, 131, 81, .55) 22.4% 23.2%, transparent 23.6%), repeating-radial-gradient(circle, rgba(255, 255, 255, .06) 0 1px, transparent 1px 6px), radial-gradient(circle, var(--bdt-navy) 0 69%, transparent 69.5%); box-shadow: 0 30px 60px -30px rgba(27, 37, 48, .55); } .bdt-story__visual::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 300deg, transparent 0 40deg, rgba(255, 255, 255, .1) 55deg, transparent 75deg); -webkit-mask: radial-gradient(circle, #000 69%, transparent 69.5%); mask: radial-gradient(circle, #000 69%, transparent 69.5%); } @media (max-width: 781px) { .bdt-story__media { order: -1; } .bdt-story__visual { width: 120px; margin-inline: 0; } .bdt-story h2 { font-size: clamp(1.875rem, 8.6vw, 2.25rem); } } /* FAQ */ .bdt-faq .bdt-section__title { margin-bottom: 1.5rem !important; } .bdt-faq__item { border-bottom: 1px solid var(--bdt-line); margin-block: 0 !important; } .bdt-faq__item:first-of-type { border-top: 1px solid var(--bdt-line); } .bdt-faq__item summary { cursor: pointer; list-style: none; position: relative; padding: 1.15rem 2.75rem 1.15rem 0; font: 600 1.125rem/1.35 var(--bdt-heading); color: var(--bdt-navy); } .bdt-faq__item summary::-webkit-details-marker { display: none; } .bdt-faq__item summary::after { content: ""; position: absolute; right: .25rem; top: 50%; width: 1.5rem; height: 1.5rem; margin-top: -.75rem; border-radius: 50%; background: linear-gradient(var(--bdt-navy-deep), var(--bdt-navy-deep)) center / 10px 2px no-repeat, linear-gradient(var(--bdt-navy-deep), var(--bdt-navy-deep)) center / 2px 10px no-repeat, var(--bdt-orange); transition: transform .2s var(--bdt-ease); } .bdt-faq__item[open] summary::after { transform: rotate(45deg); } .bdt-faq__item p { margin: 0 0 1.25rem; color: var(--bdt-slate); max-width: 62ch; } .bdt-faq__more { margin-top: 1.5rem !important; color: var(--bdt-slate); } .bdt-faq--full h2, .bdt-faq--full h2.has-lg-font-size, .bdt-faq--full .wp-block-heading.has-lg-font-size { font-size: var(--wp--preset--font-size--xl) !important; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--bdt-navy); margin-top: 3.5rem; margin-bottom: 1.35rem; } .bdt-faq--full h2:first-child, .bdt-faq--full h2.has-lg-font-size:first-child { margin-top: 0; } /* Closing call to action */ .bdt-cta-band { position: relative; overflow: hidden; } .bdt-cta-band__rings { width: 640px; left: -260px; top: 50%; translate: 0 -50%; } .bdt-cta-band > :not(.bdt-rings) { position: relative; z-index: 1; } .bdt-cta-band h2 { color: var(--bdt-white); font-size: var(--wp--preset--font-size--xxl); margin-bottom: 1rem; } .bdt-cta-band p { color: rgba(255, 255, 255, .84); font-size: var(--wp--preset--font-size--lg); } .bdt-cta-band .wp-block-buttons { margin-block: 1.75rem; } .bdt-cta-band__aside { font-size: 1rem !important; color: var(--bdt-mist) !important; } .bdt-cta-band a:not(.wp-block-button__link) { color: var(--bdt-white); text-decoration-color: var(--bdt-orange); } /* ---------- Inner page head (navy, continues the header) ---------- */ .bdt-page-head { background: var(--bdt-navy); color: var(--bdt-white); padding-block: clamp(2.5rem, 6vw, 4.5rem); position: relative; overflow: hidden; } .bdt-page-head::after { content: ""; position: absolute; right: -120px; bottom: -220px; width: 460px; height: 460px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, var(--bdt-orange) 0 2.6%, transparent 2.8%), repeating-radial-gradient(circle, transparent 0 14px, rgba(174, 184, 193, .09) 14px 16px); -webkit-mask: radial-gradient(circle, #000 60%, transparent 71%); mask: radial-gradient(circle, #000 60%, transparent 71%); } .bdt-page-head > * { position: relative; z-index: 1; } @media (max-width: 600px) { .bdt-page-head::after { display: none; } } .bdt-page-head h1 { color: var(--bdt-white); font-size: var(--wp--preset--font-size--huge); margin: 0 0 1rem; } .bdt-page-head__lede { color: rgba(255, 255, 255, .84); font-size: var(--wp--preset--font-size--lg); max-width: 40rem; margin: 0; } .bdt-page-head a { color: var(--bdt-white); text-decoration-color: var(--bdt-orange); } /* Timeline (How it works) */ .bdt-timeline { margin: 0; } .bdt-timeline > div { display: grid; gap: .3rem 2rem; padding: 1.25rem 0; border-top: 1px solid var(--bdt-line); } @media (min-width: 760px) { .bdt-timeline > div { grid-template-columns: 15rem 1fr; } } .bdt-timeline dt { font: 600 1rem/1.4 var(--bdt-heading); color: var(--bdt-rust); } .bdt-timeline dd { margin: 0; max-width: 40rem; } /* How it works: the details heading and timeline sit as one centered block, as wide as label + text (no empty band on the right). */ .bdt-section:has(> .bdt-timeline) > :is(.bdt-section__title, .bdt-timeline) { max-width: 57rem !important; margin-inline: auto !important; } /* ---------- Checklist opt-in ---------- */ .bdt-optin-hero { padding-block: clamp(2.5rem, 7vw, 5.5rem); } .bdt-optin-hero .wp-block-columns { gap: clamp(2rem, 6vw, 5rem) !important; } .bdt-optin-hero h1 { font-size: var(--wp--preset--font-size--huge); margin: 0 0 1.25rem; } .bdt-optin-hero__lede { font-size: var(--wp--preset--font-size--lg); } .bdt-optin { display: grid; gap: .75rem; margin-block: 1.75rem .5rem; } .bdt-optin__fields { display: grid; gap: .75rem; } @media (min-width: 560px) { .bdt-optin__fields { grid-template-columns: 1fr 1.4fr; } } .bdt-optin__field { display: grid; gap: .35rem; font-weight: 600; font-size: 1rem; } .bdt-optin__btn { width: 100%; border: 0; cursor: pointer; font-size: 1.0625rem; padding-block: 1rem; } /* Lead-magnet cover: a paperback guide, built in CSS (no image). */ .bdt-cover-stage { perspective: 1400px; padding: 1rem 1.5rem 2.5rem; } .bdt-cover { --spine: 18px; container-type: inline-size; position: relative; box-sizing: border-box; width: min(100%, 370px); aspect-ratio: 3 / 4; margin-inline: auto; display: flex; flex-direction: column; padding: 1.75rem 1.75rem 1.6rem calc(1.75rem + var(--spine)); color: var(--bdt-white); overflow: hidden; border-radius: 3px 10px 10px 3px; background: radial-gradient(120% 80% at 85% 0%, rgba(255, 255, 255, .07), transparent 60%), linear-gradient(160deg, #2E3D4C 0%, var(--bdt-navy) 45%, var(--bdt-navy-deep) 100%); transform: rotateY(-16deg) rotateX(2deg); transform-origin: left center; box-shadow: 6px 0 0 -1px #EDE8DF, 10px 1px 0 -2px #DCD5C8, 14px 2px 0 -3px #EDE8DF, 40px 50px 60px -30px rgba(27, 37, 48, .6), 12px 18px 30px -12px rgba(27, 37, 48, .35); transition: transform .6s var(--bdt-ease); } .bdt-cover:hover { transform: rotateY(-6deg) rotateX(1deg); } /* Spine: darker band with a crease highlight. */ .bdt-cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--spine); z-index: 2; background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .12) 55%, rgba(255, 255, 255, .14) 62%, rgba(0, 0, 0, .08) 75%, transparent); } /* Fine grain so the navy doesn't look flat. */ .bdt-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .18; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .bdt-cover > * { position: relative; z-index: 3; } /* The record, half off the cover, with the orange center from the brand icon. */ .bdt-cover__record { position: absolute !important; z-index: 0 !important; width: 118%; aspect-ratio: 1; right: -48%; bottom: -34%; border-radius: 50%; background: radial-gradient(circle, var(--bdt-orange) 0 3.4%, var(--bdt-navy-deep) 3.6% 4.6%, transparent 4.8%), radial-gradient(circle, transparent 0 15%, rgba(174, 184, 193, .22) 15.3% 16%, transparent 16.3%), repeating-radial-gradient(circle, rgba(255, 255, 255, .055) 0 1px, transparent 1px 7px), radial-gradient(circle, #1F2B37 0 69%, transparent 69.5%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset; } .bdt-cover__label { position: absolute; inset: 35%; border-radius: 50%; border: 1px solid rgba(255, 131, 81, .45); } .bdt-cover__logo { width: 62%; height: auto; opacity: .95; } .bdt-cover__title { margin: auto 0 0; padding-top: 1.5rem; font: 300 11.6cqi/1.04 var(--bdt-heading); letter-spacing: -.035em; } .bdt-cover__title span { display: block; } .bdt-cover__title strong { display: block; font-weight: 700; color: var(--bdt-orange); white-space: nowrap; } .bdt-cover__sub { margin: 1rem 0 0; font-size: 5.6cqi; color: rgba(255, 255, 255, .85); max-width: 80%; line-height: 1.35; } .bdt-cover__meta { margin: auto 0 0; padding-top: 1rem; display: flex; align-items: baseline; gap: .6rem; font: 600 4.3cqi/1.2 var(--bdt-heading); color: var(--bdt-mist); text-shadow: 0 1px 6px var(--bdt-navy-deep); max-width: 76%; flex-wrap: wrap; } .bdt-cover__meta span:first-child { color: var(--bdt-navy-deep); background: var(--bdt-orange); padding: .3rem .55rem; border-radius: 4px; white-space: nowrap; } @media (max-width: 781px) { .bdt-cover { transform: rotateY(-10deg); } .bdt-cover-stage { padding-bottom: 1rem; } } @media (prefers-reduced-motion: reduce) { .bdt-cover { transition: none; } } .bdt-checklist { list-style: none; padding: 0; display: grid; gap: .9rem; } .bdt-checklist li { position: relative; padding-left: 1.6rem; } .bdt-checklist li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--bdt-orange); } /* Inline opt-in box (blog): navy panel */ .bdt-optin-box { position: relative; overflow: hidden; background: var(--bdt-navy); color: var(--bdt-white); border-radius: 16px; padding: clamp(1.5rem, 4vw, 2.75rem); margin-block: clamp(2.5rem, 6vw, 4rem) 0 !important; } .bdt-optin-box::after { content: ""; position: absolute; left: -140px; bottom: -200px; width: 380px; height: 380px; border-radius: 50%; pointer-events: none; background: repeating-radial-gradient(circle, transparent 0 12px, rgba(174, 184, 193, .1) 12px 14px); } .bdt-optin-box > * { position: relative; z-index: 1; } .bdt-optin-box h2 { color: var(--bdt-white); font-size: var(--wp--preset--font-size--xl); margin: 0 0 .6rem; } .bdt-optin-box p { margin: 0; color: rgba(255, 255, 255, .84); } .bdt-optin-box .bdt-optin__field { color: var(--bdt-white); } .bdt-optin--compact { margin: 0; } .bdt-optin--compact .bdt-optin__fields { grid-template-columns: 1fr; } /* ---------- Support ---------- */ .bdt-support-cards { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 6vw, 3.5rem); } @media (min-width: 820px) { .bdt-support-cards { grid-template-columns: repeat(3, 1fr); } } /* Support: the three cards are equal. Email us looks like the others (sand, navy text; the address in rust, which reads on sand). Also covers pages still built with the old --primary class. */ .bdt-support-cards .bdt-support-card--primary { background: var(--bdt-sand); color: var(--bdt-navy); } .bdt-support-cards .bdt-support-card--primary:hover { background: var(--bdt-sand-deep); color: var(--bdt-navy); } .bdt-support-cards .bdt-support-card--primary .bdt-support-card__note { color: var(--bdt-slate); } .bdt-support-cards .bdt-support-card__value { color: var(--bdt-rust); } @media (min-width: 820px) { .bdt-support-cards .bdt-support-card__value { font-size: clamp(.95rem, 1.55vw, 1.3rem); } } .bdt-support-card { display: grid; gap: .45rem; align-content: start; padding: clamp(1.5rem, 3vw, 2rem); border-radius: 16px; background: var(--bdt-sand); color: var(--bdt-navy); text-decoration: none; transition: background-color .2s var(--bdt-ease); } .bdt-support-card:hover { background: var(--bdt-sand-deep); color: var(--bdt-navy); } .bdt-support-card:hover .bdt-support-card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; } .bdt-support-card__title { font: 600 1.2rem/1.2 var(--bdt-heading); } .bdt-support-card__value { font: 300 min(1.3rem, 4.6vw)/1.2 var(--bdt-heading); color: var(--bdt-orange); white-space: nowrap; } .bdt-support-card__note { color: var(--bdt-slate); font-size: 1rem; } .bdt-support-card--primary { background: var(--bdt-navy); border-color: var(--bdt-navy); color: var(--bdt-white); } .bdt-support-card--primary:hover { color: var(--bdt-white); } .bdt-support-card--primary .bdt-support-card__note { color: var(--bdt-mist); } /* ---------- Fluent Support portal on /support/ ---------- * bdt-core wraps [fluent_support_portal] in .bdt-support-portal (includes/support-portal.php). * Studio paper: each screen is one sand card (16px radius, no borders), white inputs and * message cards inside, orange primary buttons with navy text, sand-deep secondary buttons. * Fluent's own CSS and Element Plus are overridden here, scoped to .bdt-support-portal. * Hooks: #fluent_support_client_app > .fs_client_portal, .fs_customer_portal_mobile, .fst_tickets, * .fs_ticket_wrapper, .fs_tickets_container, .fs_tickets_header, .fs_create_ticket_btn, * .fs_ticket_reply_text, .fs_reply_btn, .fst_login_form_auth_wrapper, #fst_login_form, #loginform, * .fst_registration_wrapper, #fstRegistrationForm. */ .bdt-support-main { --wp--style--global--content-size: 820px; } .bdt-support-main > p:empty, .bdt-support-portal p:empty { display: none !important; } /* Pages built by hand may put the shortcode inside their own .bdt-support-portal group (and a

): only the inner wrapper styles. */ .bdt-support-portal:has(.bdt-support-portal) { max-width: none !important; margin: 0 !important; } .bdt-support-portal:has(.bdt-support-portal) > p:has(> .bdt-support-portal) { margin: 0 !important; max-width: none !important; } .bdt-support-portal .bdt-support-portal { margin-inline: auto !important; } .bdt-support-portal { --el-color-primary: var(--bdt-navy); --el-color-primary-light-3: #5C6B79; --el-color-primary-light-5: #8A949D; --el-color-primary-light-7: #C4CAD0; --el-color-primary-light-8: #D8DCE0; --el-color-primary-light-9: #EEF0F2; --el-color-primary-dark-2: var(--bdt-navy-deep); --el-border-radius-base: 8px; --el-border-radius-small: 6px; --el-border-color: #CFD6DC; --el-border-color-light: rgba(39, 52, 65, .1); --el-border-color-lighter: rgba(39, 52, 65, .08); --el-text-color-primary: var(--bdt-navy); --el-text-color-regular: var(--bdt-navy); --el-text-color-secondary: var(--bdt-slate); --el-text-color-placeholder: #8A949D; --el-font-size-base: 16px; --el-font-size-small: 15px; --el-font-family: var(--wp--preset--font-family--body); --el-fill-color-blank: #fff; --el-fill-color-light: var(--bdt-sand); --el-bg-color: #fff; --el-bg-color-overlay: #fff; --bdt-p-pad: clamp(1.125rem, 3.5vw, 2rem); --bdt-p-line: rgba(39, 52, 65, .1); max-width: var(--wp--style--global--content-size, 820px); margin: 0 auto clamp(3rem, 7vw, 4.5rem) !important; color: var(--bdt-navy); font-family: var(--wp--preset--font-family--body); font-size: 1rem; line-height: 1.55; text-align: left; } .bdt-support-portal *, .bdt-support-portal *::before, .bdt-support-portal *::after { box-sizing: border-box; } .bdt-support-portal :is(p, span, a, li, label, div, button, input, textarea, strong, h1, h2, h3, h4) { font-family: inherit; letter-spacing: normal; } .bdt-support-portal :is(.fs_client_portal, .fs_customer_portal_mobile, .fst_tickets, .fs_ticket_wrapper, .fs_create_ticket_container, .fs_ticket_body, .fs_ticket_threads_container, .fs_ticket_response, .fs_ticket_list_wrap) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; max-width: none !important; width: auto !important; font-size: 1rem; } .bdt-support-portal :is(h2, h3, .fs_tickets_heading, .fs_ticket_subject, .fs_ticket_header > label, .bdt-portal-auth__title) { font-family: var(--bdt-heading) !important; color: var(--bdt-navy) !important; font-weight: 600 !important; letter-spacing: -.015em !important; line-height: 1.2 !important; } .bdt-support-portal a:not(.fs_ticket_link) { color: var(--bdt-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .bdt-support-portal a:not(.fs_ticket_link):hover { color: var(--bdt-rust); } .bdt-support-portal :is(a, button, input, textarea, [tabindex]):focus { outline: none; } /* Keyboard ring for links and buttons. Form fields are excluded: their focus is the orange ring on the field box * (Element Plus puts tabindex="0" on its inner , which drew a second, square outline inside it). */ .bdt-support-portal :is(a, button, [tabindex="0"]:not(input, textarea, select)):focus-visible { outline: 2px solid currentColor !important; outline-offset: 3px; } .bdt-support-portal :is(.el-input__inner, .el-select__input):focus-visible { outline: none !important; } /* The one card per screen. */ .bdt-support-portal :is(.fst_login_form_auth_wrapper, .fs_tickets_container, .fs_ticket_form_container) { background: var(--bdt-sand) !important; border: 0 !important; border-radius: 16px !important; box-shadow: none !important; overflow: visible !important; height: auto !important; max-height: none !important; margin: 0 !important; max-width: none !important; width: auto !important; } /* ----- Buttons ----- */ .bdt-support-portal :is(.fs_create_ticket_btn, .fs_create_ticket_button, .fs_reply_btn, #loginform #wp-submit, #fst_submit, #fst_reset_pass) { display: inline-flex !important; align-items: center; justify-content: center; gap: .5rem; min-height: 48px !important; height: auto !important; padding: .75rem 1.4rem !important; background: var(--bdt-orange) !important; color: var(--bdt-navy-deep) !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; font: 600 1rem/1.2 var(--bdt-heading) !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; transition: background-color .15s; } .bdt-support-portal :is(.fs_create_ticket_btn, .fs_create_ticket_button, .fs_reply_btn, #loginform #wp-submit, #fst_submit, #fst_reset_pass):hover { background: var(--bdt-orange-hover) !important; color: var(--bdt-navy-deep) !important; } .bdt-support-portal :is(.fs_create_ticket_btn, .fs_create_ticket_button, .fs_reply_btn) span { font: inherit !important; color: inherit !important; } .bdt-support-portal .fs_reply_btn svg, .bdt-support-portal .fs_reply_btn i { display: none !important; } /* Secondary: sand-deep, navy text. */ .bdt-support-portal :is(.fs_upload_button, .fs_ticket_refresh_btn, .fs_close_ticket, .fs_sorting .el-button) { display: inline-flex !important; align-items: center; justify-content: center; gap: .45rem; min-height: 44px !important; height: auto !important; padding: .6rem 1rem !important; background: var(--bdt-sand-deep) !important; color: var(--bdt-navy) !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; font: 600 1rem/1.2 var(--wp--preset--font-family--body) !important; cursor: pointer; transition: background-color .15s; } .bdt-support-portal :is(.fs_upload_button, .fs_ticket_refresh_btn, .fs_close_ticket, .fs_sorting .el-button):hover { background: #E4D7C3 !important; } .bdt-support-portal :is(.fs_ticket_refresh_btn, .fs_close_ticket) :is(span, svg, i) { color: inherit !important; font: inherit !important; } .bdt-support-portal .fs_ticket_refresh_btn svg { width: 1em; height: 1em; } /* Back link: plain text with a chevron. */ .bdt-support-portal .fs_back_nav { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 .75rem !important; box-shadow: none !important; } .bdt-support-portal .fs_back_button { background: none !important; border: 0 !important; padding: 0 !important; min-height: 44px !important; height: auto !important; color: var(--bdt-navy) !important; box-shadow: none !important; } .bdt-support-portal .fs_back_btn { font: 600 1rem/1.2 var(--wp--preset--font-family--body) !important; color: var(--bdt-navy) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .bdt-support-portal .fs_back_button:hover .fs_back_btn { color: var(--bdt-rust) !important; } /* ----- Inputs (match the order form) ----- */ .bdt-support-portal :is(#loginform, #fstRegistrationForm, #fstResetPasswordForm) :is(input[type=text], input[type=email], input[type=password]), .bdt-support-portal :is(.el-input__wrapper, .el-select__wrapper, .el-textarea__inner, textarea.fs_ticket_reply_text) { width: 100% !important; min-height: 48px; background: #fff !important; border: 1.5px solid #CFD6DC !important; border-radius: 8px !important; box-shadow: none !important; color: var(--bdt-navy) !important; font: 400 1.0625rem/1.4 var(--wp--preset--font-family--body) !important; transition: border-color .15s, box-shadow .15s; } .bdt-support-portal :is(#loginform, #fstRegistrationForm, #fstResetPasswordForm) :is(input[type=text], input[type=email], input[type=password]) { padding: .8rem .95rem !important; margin: 0 !important; height: auto !important; } .bdt-support-portal :is(.el-input__wrapper, .el-select__wrapper) { padding: 0 .95rem !important; } .bdt-support-portal .el-input__inner, .bdt-support-portal .el-select__input { border: 0 !important; box-shadow: none !important; background: transparent !important; min-height: 0 !important; height: 45px !important; padding: 0 !important; font: inherit !important; color: var(--bdt-navy) !important; } .bdt-support-portal .el-select__placeholder { color: var(--bdt-navy) !important; font-size: 1.0625rem; } .bdt-support-portal :is(.el-input__wrapper.is-focus, .el-select__wrapper.is-focused, .el-textarea__inner:focus, textarea:focus, #loginform input:focus, #fstRegistrationForm input:focus, #fstResetPasswordForm input:focus) { border-color: var(--bdt-navy) !important; box-shadow: 0 0 0 3px rgba(255, 131, 81, .45) !important; outline: none !important; } .bdt-support-portal ::placeholder { color: #8A949D !important; opacity: 1; } .bdt-support-portal :is(label, .fst_field_label label, .el-form-item__label, .fs_ticket_details_label, .fs_upload_instruction) { display: block; color: var(--bdt-navy) !important; font: 700 1rem/1.3 var(--wp--preset--font-family--body) !important; text-transform: none !important; margin: 0 0 .45rem !important; padding: 0 !important; height: auto !important; } .bdt-support-portal :is(label, .el-form-item__label, .fs_ticket_details_label)::first-letter { text-transform: uppercase; } .bdt-support-portal .el-form-item__label { justify-content: flex-start !important; } .bdt-support-portal .fst_field_label.is-required label::after, .bdt-support-portal .el-form-item.is-required .el-form-item__label::after { content: none !important; } .bdt-support-portal .fst_field_label.is-required::after, .bdt-support-portal .fst_field_label::before, .bdt-support-portal .el-form-item__label::before { content: none !important; display: none !important; } .bdt-support-portal :is(.fs_tk_help, .fs_upload_info) { color: var(--bdt-slate) !important; font-size: .9375rem !important; line-height: 1.45 !important; margin: .45rem 0 0 !important; } .bdt-support-portal .el-form-item { margin: 0 0 1.35rem !important; display: block !important; } .bdt-support-portal .el-form-item__content { display: block !important; line-height: 1.4 !important; font-size: 1rem !important; } /* WordPress editor (new ticket and reply): one rounded white box, no Visual/Code tabs. */ .bdt-support-portal .wp-editor-tabs { display: none !important; } .bdt-support-portal .wp-editor-tools { padding: 0 !important; background: none !important; border: 0 !important; min-height: 0 !important; } .bdt-support-portal .wp-editor-container { border: 1.5px solid #CFD6DC !important; border-radius: 8px !important; overflow: hidden; background: #fff !important; box-shadow: none !important; } .bdt-support-portal .wp-editor-container:is(:focus-within, .bdt-has-focus) { border-color: var(--bdt-navy) !important; box-shadow: 0 0 0 3px rgba(255, 131, 81, .45) !important; } .bdt-support-portal :is(.mce-tinymce, .mce-panel, .mce-container, .mce-stack-layout, .quicktags-toolbar) { border: 0 !important; box-shadow: none !important; } .bdt-support-portal :is(.mce-top-part, .mce-toolbar-grp, .quicktags-toolbar) { background: var(--bdt-paper) !important; border-bottom: 1px solid var(--bdt-p-line) !important; } .bdt-support-portal .mce-top-part::before { box-shadow: none !important; } .bdt-support-portal .mce-btn { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } .bdt-support-portal .mce-btn:hover, .bdt-support-portal .mce-btn.mce-active { background: var(--bdt-sand) !important; } .bdt-support-portal .mce-statusbar { display: none !important; } .bdt-support-portal :is(.mce-panel, .mce-toolbar, .mce-btn-group, .mce-flow-layout) { background: var(--bdt-paper) !important; } .bdt-support-portal .mce-edit-area { background: #fff !important; } .bdt-support-portal .mce-edit-area iframe { min-height: 160px; } .bdt-portal-fallback { background: var(--bdt-sand); border-radius: 16px; padding: var(--bdt-p-pad); } /* ----- Log in / sign up / reset ----- */ .bdt-support-portal .fst_login_form_auth_wrapper { display: grid !important; gap: 1.5rem 3rem; padding: var(--bdt-p-pad) !important; } @media (min-width: 760px) { .bdt-support-portal .fst_login_form_auth_wrapper { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } .bdt-support-portal .fst_login_form_auth_wrapper > :not(.bdt-portal-auth__head) { grid-column: 2; grid-row: 1; } .bdt-support-portal .bdt-portal-auth__head { grid-column: 1; grid-row: 1; } } .bdt-support-portal :is(#fst_login_form, .fst_registration_wrapper, .fst_reset_pass_wrapper) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; max-width: none !important; width: auto !important; } .bdt-support-portal :is(#fst_login_form, .fst_registration_wrapper, .fst_reset_pass_wrapper).hide { display: none !important; } .bdt-portal-auth__title { font-size: var(--wp--preset--font-size--xl) !important; margin: 0 0 .6rem !important; } .bdt-portal-auth__note { margin: 0 !important; color: var(--bdt-slate); font-size: 1.0625rem; } .bdt-portal-auth__note a { white-space: nowrap; } .bdt-portal-auth__title--signup, .bdt-portal-auth__title--reset, .bdt-portal-auth__note--signup, .bdt-portal-auth__note--reset { display: none; } .fst_login_form_auth_wrapper:has(.fst_registration_wrapper:not(.hide)) :is(.bdt-portal-auth__title--login, .bdt-portal-auth__note--login), .fst_login_form_auth_wrapper:has(.fst_reset_pass_wrapper:not(.hide)) :is(.bdt-portal-auth__title--login, .bdt-portal-auth__note--login) { display: none; } .fst_login_form_auth_wrapper:has(.fst_registration_wrapper:not(.hide)) :is(.bdt-portal-auth__title--signup, .bdt-portal-auth__note--signup), .fst_login_form_auth_wrapper:has(.fst_reset_pass_wrapper:not(.hide)) :is(.bdt-portal-auth__title--reset, .bdt-portal-auth__note--reset) { display: block; } .bdt-support-portal :is(#loginform, #fstRegistrationForm, #fstResetPasswordForm) { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } /* Fluent sets `.fst_login_wrapper form#loginform { overflow: hidden }`, which cut the 3px focus ring off the * left and right of the login fields. Nothing around a portal field may clip its ring. */ .bdt-support-portal :is(.fst_login_wrapper form#loginform, #fstRegistrationForm, #fstResetPasswordForm, #fst_login_form, .fst_registration_wrapper, .fst_reset_pass_wrapper, .fst_registration_fields, .fst_field_group, .fs_input_wrap) { overflow: visible !important; } .bdt-support-portal #loginform > p, .bdt-support-portal .fst_registration_fields { margin: 0 0 1.1rem !important; padding: 0 !important; } .bdt-support-portal .fst_field_group, .bdt-support-portal .fs_input_wrap { margin: 0 !important; padding: 0 !important; } .bdt-support-portal #loginform .login-remember label { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; margin: 0 !important; font-weight: 400 !important; cursor: pointer; } .bdt-support-portal #loginform .login-remember label::first-letter { text-transform: none; } .bdt-support-portal #loginform .login-remember input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--bdt-navy); } .bdt-support-portal #loginform .login-submit { margin: .25rem 0 1rem !important; } .bdt-support-portal :is(#loginform #wp-submit, #fst_submit, #fst_reset_pass) { width: 100% !important; } /* Keyboard focus on the login / signup / reset buttons: the same orange ring as the fields (the button rule * above sets box-shadow: none !important, and #wp-submit is an , which the link/button outline skips). * A 2px gap in the card colour keeps an orange ring visible against an orange button. Mouse clicks show nothing. */ .bdt-support-portal :is(#loginform #wp-submit, #fst_submit, #fst_reset_pass):focus-visible { outline: none !important; box-shadow: 0 0 0 2px var(--bdt-sand), 0 0 0 5px rgba(255, 131, 81, .45) !important; } .bdt-support-portal :is(#fst_login_form, .fst_registration_wrapper, .fst_reset_pass_wrapper) > p { margin: .35rem 0 0 !important; color: var(--bdt-slate); font-size: 1rem; text-align: left !important; } .bdt-support-portal :is(#fs_show_signup, #fs_show_login, #fs_show_reset_password) { font-weight: 600; display: inline-block; padding-block: .6rem; } /* ----- Ticket list ----- */ .bdt-support-portal .fs_tickets_header { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: var(--bdt-p-pad) var(--bdt-p-pad) 1.1rem !important; margin: 0 !important; background: transparent !important; border: 0 !important; } .bdt-support-portal .fs_tickets_heading { font-size: var(--wp--preset--font-size--xl) !important; margin: 0 !important; } .bdt-support-portal .fs_filters_section { padding: 0 var(--bdt-p-pad) 1.25rem !important; margin: 0 !important; background: transparent !important; border: 0 !important; } .bdt-support-portal .fs_filter_container { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; } .bdt-support-portal :is(.fs_filter_left, .fs_product_filter_head, .fs_filter_right, .fs_status_filter) { display: flex !important; align-items: center; gap: .6rem; margin: 0 !important; padding: 0 !important; } .bdt-support-portal .fs_button_groups { display: inline-flex !important; gap: 2px; padding: 3px !important; background: var(--bdt-sand-deep) !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; } .bdt-support-portal .status-btn { min-height: 40px !important; padding: .4rem 1rem !important; background: transparent !important; color: var(--bdt-navy) !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; font: 600 1rem/1.2 var(--wp--preset--font-family--body) !important; cursor: pointer; } .bdt-support-portal .status-btn.active { background: var(--bdt-navy) !important; color: #fff !important; } .bdt-support-portal .fs_sorting .el-button { width: 44px; padding: 0 !important; } .bdt-support-portal .fs_search_filter .el-input__wrapper { min-height: 44px; } .bdt-support-portal .fs_search_filter .el-input__inner { height: 41px !important; } .bdt-support-portal .fs_ticket_list { list-style: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } .bdt-support-portal .fs_ticket_item { margin: 0 !important; padding: 0 !important; border: 0 !important; border-top: 1px solid var(--bdt-p-line) !important; background: transparent !important; } .bdt-support-portal .fs_ticket_link { display: flex !important; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.1rem var(--bdt-p-pad) !important; color: var(--bdt-navy) !important; text-decoration: none !important; background: transparent !important; transition: background-color .15s; } .bdt-support-portal .fs_ticket_link:hover { background: var(--bdt-sand-deep) !important; } .bdt-support-portal .fs_ticket_link:hover .fs_ticket_title strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .bdt-support-portal .fs_ticket_main { min-width: 0; flex: 1; } .bdt-support-portal .fs_ticket_title, .bdt-support-portal .fs_ticket_title strong { font: 600 1.0625rem/1.3 var(--bdt-heading) !important; color: var(--bdt-navy) !important; margin: 0 !important; } .bdt-support-portal .fs_ticket_preview { margin: .25rem 0 0 !important; color: var(--bdt-slate) !important; font-size: 1rem !important; line-height: 1.45 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bdt-support-portal .fs_ticket_link .fs_ticket_meta { display: flex !important; flex-direction: column; align-items: flex-end; gap: .2rem; flex-shrink: 0; margin: 0 !important; } .bdt-support-portal .fs_ticket_date { color: var(--bdt-slate) !important; font-size: .9375rem !important; white-space: nowrap; } .bdt-support-portal .fs_ticket_list_empty { padding: 2.5rem var(--bdt-p-pad) 3rem !important; text-align: center; border-top: 1px solid var(--bdt-p-line); background: none !important; } .bdt-support-portal .fs_ticket_list_empty :is(h3, h4, .fs_ticket_list_empty_title) { font: 600 1.25rem/1.3 var(--bdt-heading) !important; color: var(--bdt-navy) !important; margin: 0 0 .4rem !important; } .bdt-support-portal .fs_ticket_list_empty p { color: var(--bdt-slate) !important; font-size: 1rem !important; max-width: 26rem; margin: 0 auto 1.25rem !important; } /* Pagination: hidden when everything fits on one page. */ .bdt-support-portal .fs_pagination_section { padding: 1rem var(--bdt-p-pad) !important; margin: 0 !important; border: 0 !important; border-top: 1px solid var(--bdt-p-line) !important; background: none !important; } .bdt-support-portal .fs_pagination_section:not(:has(.el-pager li + li)) { display: none !important; } .bdt-support-portal .fs_pagination_container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; } .bdt-support-portal .fs_page_text { color: var(--bdt-slate); font-size: 1rem; } .bdt-support-portal .el-pagination :is(button, .el-pager li) { min-width: 40px; height: 40px; background: transparent !important; color: var(--bdt-navy) !important; font: 600 1rem/40px var(--wp--preset--font-family--body) !important; border-radius: 6px; } .bdt-support-portal .el-pagination .el-pager li.is-active { background: var(--bdt-navy) !important; color: #fff !important; } /* Status: a dot and a word, no pill. */ .bdt-support-portal .fs_status_badge { display: inline-flex !important; align-items: center; gap: .45rem; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; color: var(--bdt-navy) !important; font: 600 .9375rem/1.3 var(--wp--preset--font-family--body) !important; text-transform: capitalize; white-space: nowrap; } .bdt-support-portal .fs_status_dot { width: 9px !important; height: 9px !important; border-radius: 50%; background: var(--bdt-orange) !important; margin: 0 !important; flex-shrink: 0; } .bdt-support-portal .fs_status_badge:is(.closed, .resolved) { color: var(--bdt-slate) !important; } .bdt-support-portal .fs_status_badge:is(.closed, .resolved) .fs_status_dot { background: var(--bdt-mist) !important; } .bdt-support-portal .fs_status_badge:is(.active, .waiting, .open) .fs_status_dot { background: var(--bdt-navy) !important; } /* ----- One ticket ----- */ .bdt-support-portal .fs_ticket_heroarea { padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; } .bdt-support-portal .fs_tk_subject { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: var(--bdt-p-pad) var(--bdt-p-pad) .5rem !important; margin: 0 !important; border: 0 !important; background: none !important; } .bdt-support-portal .fs_ticket_subject { font-size: var(--wp--preset--font-size--xl) !important; margin: 0 !important; overflow-wrap: anywhere; } .bdt-support-portal .fs_ticket_heading .fs_ticket_meta { margin: .3rem 0 0 !important; color: var(--bdt-slate) !important; font-size: 1rem !important; } .bdt-support-portal .fs_ticket_heading .fs_ticket_meta strong { font-weight: 400; } .bdt-support-portal .fs_tk_subject .fs_status_badge { margin-top: .5rem !important; } .bdt-support-portal .fs_ticket_actions { display: flex !important; align-items: center; justify-content: flex-start; gap: .75rem; padding: .5rem var(--bdt-p-pad) 1.25rem !important; margin: 0 !important; border: 0 !important; background: none !important; } .bdt-support-portal .fs_product_name:empty, .bdt-support-portal .fs_product_name:not(:has(*)) { display: none; } .bdt-support-portal .fs_ticket_actions_btn { display: flex !important; flex-wrap: wrap; gap: .6rem; margin: 0 !important; } .bdt-support-portal .fs_ticket_response { padding: 1.5rem var(--bdt-p-pad) !important; border-top: 1px solid var(--bdt-p-line) !important; } .bdt-support-portal .fs_ticket_alert { margin: 0 0 1.25rem !important; padding: 0 !important; } .bdt-support-portal .el-alert { margin: 0 !important; width: 100% !important; } .bdt-support-portal .el-alert { background: var(--bdt-paper) !important; color: var(--bdt-navy) !important; border: 0 !important; border-radius: 8px !important; padding: .8rem 1rem !important; gap: .6rem; align-items: flex-start; } .bdt-support-portal .el-alert__icon { color: var(--bdt-slate) !important; font-size: 1.1rem !important; width: 1.1rem; margin-top: .15rem; } .bdt-support-portal .el-alert__title { color: var(--bdt-navy) !important; font-size: 1rem !important; line-height: 1.45 !important; } .bdt-support-portal .el-alert__content { padding: 0 !important; } .bdt-support-portal .el-alert__close-btn { display: none !important; } .bdt-support-portal .fs_ticket_reply_box { padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; } .bdt-support-portal .fs_ticket_reply_box h3 { font-size: 1.125rem !important; margin: 0 0 .6rem !important; } .bdt-support-portal textarea.fs_ticket_reply_text { display: block; min-height: 7.5rem !important; padding: .85rem .95rem !important; resize: vertical; cursor: text; } .bdt-support-portal .fs_reply_wrap { margin: 0 !important; } .bdt-support-portal .fs_row { display: block !important; margin: 0 !important; } .bdt-support-portal .fs_customer_response_actions { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem 1.25rem; margin: 1.25rem 0 0 !important; padding: 0 !important; } .bdt-support-portal .fs_customer_response_actions > p { margin: 0 !important; color: var(--bdt-navy) !important; font: 600 1rem/1.2 var(--wp--preset--font-family--body) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; padding: .7rem 0; } .bdt-support-portal .fs_customer_response_actions > p:hover { color: var(--bdt-rust) !important; } /* Uploader */ .bdt-support-portal :is(.upload-container, .fs-file-uploader, .upload-area, .fs-upload-content, .fc-upload-text) { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; text-align: left !important; box-shadow: none !important; } .bdt-support-portal .upload-container { margin-top: 1.25rem !important; } .bdt-support-portal .fs_upload_instruction { margin: 0 0 .5rem !important; } /* Messages: white cards on the sand. */ .bdt-support-portal .fs_ticket_body { padding: 0 var(--bdt-p-pad) var(--bdt-p-pad) !important; } .bdt-support-portal .fs_ticket_thread { margin: 0 0 .75rem !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } .bdt-support-portal .fs_ticket_thread:last-child { margin-bottom: 0 !important; } .bdt-support-portal :is(.fs_conversion_starter_section, .fs_join_thread_custom_field) { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } .bdt-support-portal .fs_ticket_thread_content { display: flex !important; gap: .9rem; padding: 1.1rem 1.25rem !important; margin: 0 !important; background: #fff !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; } /* Avatars are Gravatar placeholders for most customers; the name line says who wrote it. */ .bdt-support-portal .fs_ticket_avatar { display: none !important; } .bdt-support-portal .fs_ticket_avatar img { width: 40px !important; height: 40px !important; border-radius: 50% !important; display: block; border: 0 !important; } .bdt-support-portal :is(.fs_ticket_thread_wrap, .fs_thread_message) { flex: 1; min-width: 0; background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } .bdt-support-portal .fs_thread_head { margin: 0 0 .3rem !important; padding: 0 !important; border: 0 !important; background: none !important; } .bdt-support-portal .fs_thread_name { color: var(--bdt-slate) !important; font-size: 1rem !important; line-height: 1.35 !important; } .bdt-support-portal .fs_thread_name strong { color: var(--bdt-navy); font-weight: 700; } .bdt-support-portal .fs_thread_body { color: var(--bdt-navy) !important; font-size: 1.0625rem !important; line-height: 1.6 !important; overflow-wrap: anywhere; } .bdt-support-portal .fs_thread_body > :first-child { margin-top: 0 !important; } .bdt-support-portal .fs_thread_body > :last-child { margin-bottom: 0 !important; } .bdt-support-portal .fs_thread_body p { margin: 0 0 .75em !important; font-size: inherit !important; } .bdt-support-portal :is(.fs_actions_head, .fs_thread_actions) { color: var(--bdt-slate) !important; font-size: .9375rem !important; margin: .5rem 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } /* Role ribbons + “waiting on you”: quiet text, not Fluent/Element pills. */ .bdt-support-portal .fs_thread_ribbon { display: inline !important; margin-left: .45rem !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--bdt-slate) !important; font: 600 .875rem/1.3 var(--wp--preset--font-family--body) !important; letter-spacing: 0 !important; text-transform: none !important; vertical-align: baseline; } .bdt-support-portal .fs_thread_ribbon_agent { color: var(--bdt-slate) !important; } .bdt-support-portal .fs_thread_ribbon_customer { color: var(--bdt-rust) !important; } .bdt-support-portal .fs_waiting_on_you { display: inline-block !important; margin: .15rem 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--bdt-rust) !important; font: 600 .875rem/1.3 var(--wp--preset--font-family--body) !important; } /* Secondary controls share the same orange focus ring as the primary buttons. */ .bdt-support-portal :is(.fs_upload_button, .fs_ticket_refresh_btn, .fs_close_ticket, .fs_sorting .el-button, .fs_create_ticket_btn, .fs_create_ticket_button, .fs_reply_btn):focus-visible { outline: none !important; box-shadow: 0 0 0 2px var(--bdt-sand), 0 0 0 5px rgba(255, 131, 81, .45) !important; } /* Quiet the TinyMCE chrome so the message, not the toolbar, leads. */ .bdt-support-portal :is(.mce-btn button, .mce-ico) { color: var(--bdt-slate) !important; } .bdt-support-portal .mce-btn.mce-active, .bdt-support-portal .mce-btn:hover { background: var(--bdt-sand-deep) !important; } /* ----- New ticket ----- */ .bdt-support-portal .fs_ticket_form_container { padding: var(--bdt-p-pad) !important; } .bdt-support-portal .fs_ticket_header { display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; } .bdt-support-portal .fs_ticket_form_container .fs_ticket_header > label { display: block; font: 600 var(--wp--preset--font-size--xl)/1.2 var(--bdt-heading) !important; letter-spacing: -.015em !important; margin: 0 0 1.5rem !important; padding: 0 !important; } .bdt-support-portal .fs_ticket_form { margin: 0 !important; padding: 0 !important; } .bdt-support-portal #fluent_support_client_app { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; max-width: none !important; } .bdt-support-portal :is(.fs_tk_row, .fs_custom_fields_wrap) { display: flow-root !important; margin: 1.35rem 0 0 !important; max-width: 20rem; } .bdt-support-portal :is(.fs_tk_row, .fs_custom_fields_wrap) > * { float: none !important; width: auto !important; max-width: none !important; } .bdt-support-portal .fs_custom_fields_wrap:not(:has(*)) { display: none !important; } .bdt-support-portal .fs_tk_suggestions .fs_ticket_details_label { position: static !important; } .bdt-support-portal .wp_vue_editor_wrapper { position: relative; } .bdt-support-portal .fs_submit_button_container { margin: .5rem 0 0 !important; } .bdt-support-portal .fs_submit_button_container .el-form-item__content { display: flex !important; justify-content: flex-start; } /* Element dropdowns render outside the portal; keep them on brand too. */ .el-select-dropdown__item { font-family: var(--wp--preset--font-family--body); font-size: 1rem; color: var(--bdt-navy); min-height: 40px; display: flex; align-items: center; } .el-select-dropdown__item.is-selected { color: var(--bdt-navy); font-weight: 700; } /* ----- Phones ----- */ @media (max-width: 600px) { .bdt-support-portal { --bdt-p-pad: 1.125rem; } .bdt-support-portal :is(.fst_login_form_auth_wrapper, .fs_tickets_container, .fs_ticket_form_container) { border-radius: 14px !important; } .bdt-support-portal .fs_tickets_header { align-items: center; } .bdt-support-portal .fs_filter_container { width: 100%; flex-direction: column !important; align-items: stretch !important; } .bdt-support-portal .fs_filter_left { width: 100%; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; } .bdt-support-portal .fs_filter_left .fs_status_filter { flex: 1 1 auto !important; width: auto !important; } .bdt-support-portal .fs_product_filter_head, .bdt-support-portal .fs_sorting { width: auto !important; margin: 0 !important; } .bdt-support-portal .fs_product_filter_head { flex: 0 0 auto; } .bdt-support-portal .fs_filter_right, .bdt-support-portal .fs_search_filter { width: 100%; flex: 1 1 100%; } .bdt-support-portal .fs_status_filter { flex: 1; } .bdt-support-portal .fs_button_groups { width: 100%; } .bdt-support-portal .status-btn { flex: 1; } .bdt-support-portal .fs_ticket_link { flex-direction: column; align-items: stretch; gap: .6rem; } .bdt-support-portal .fs_ticket_preview { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .bdt-support-portal .fs_ticket_link .fs_ticket_meta { flex-direction: row; align-items: center; justify-content: space-between; } .bdt-support-portal .fs_tk_subject { flex-direction: column; align-items: flex-start !important; gap: .25rem; } .bdt-support-portal :is(.fs_tk_subject, .fs_ticket_heading, .fs_ticket_actions, .fs_tickets_header) { text-align: left !important; } .bdt-support-portal .fs_ticket_actions { justify-content: stretch !important; } .bdt-support-portal .fs_ticket_actions_btn { width: 100%; } .bdt-support-portal .fs_ticket_actions_btn > * { flex: 1; } .bdt-support-portal .fs_customer_response_actions { flex-direction: column-reverse; align-items: stretch; text-align: center; } .bdt-support-portal :is(.fs_reply_btn, .fs_create_ticket_button) { width: 100% !important; } .bdt-support-portal .fs_submit_button_container .el-form-item__content { display: block !important; } .bdt-support-portal .fs_tk_row { max-width: none; } /* Formatting toolbar off on phones: its buttons are 32px and nobody needs headings in a support reply. */ .bdt-support-portal .mce-top-part { display: none !important; } .bdt-support-portal .fs_ticket_thread_content { padding: 1rem !important; gap: .75rem; } .bdt-support-portal .fs_ticket_avatar img { width: 34px !important; height: 34px !important; } } /* The portal sits at the bottom of /support/ (#portal); keep it clear of the sticky header when the card jumps to it. */ #portal { scroll-margin-top: 6rem; padding-top: 0 !important; } /* ---------- Legal ---------- */ .bdt-legal h2 { font-size: var(--wp--preset--font-size--lg); margin-top: 2.5rem; } .bdt-legal li + li { margin-top: .4rem; } .bdt-legal__date { color: var(--bdt-slate); font-size: 1rem; } /* ---------- Free resources (/resources/) ---------- */ .bdt-resource { background: var(--bdt-white); border-radius: 16px; padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: 0 1px 0 var(--bdt-line); margin-block: 0 clamp(1.25rem, 3vw, 2rem) !important; } .bdt-resource--primary { background: var(--bdt-navy); color: var(--bdt-white); } .bdt-resource--primary h2 { color: var(--bdt-white); } .bdt-resource__kicker { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bdt-rust); margin: 0 0 .5rem; } .bdt-resource--primary .bdt-resource__kicker { color: var(--bdt-orange); } .bdt-resource h2 { margin-top: 0; } .bdt-resource .bdt-optin { max-width: 40rem; } .bdt-resource-links { display: grid; gap: .5rem; padding-left: 1.1rem; } .bdt-resource-links a { font-weight: 600; } /* ---------- Song marketplace interest form (/song-marketplace/) ---------- */ .bdt-mi { display: grid; gap: 1.1rem; margin-top: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--bdt-white); border-radius: 14px; box-shadow: 0 1px 0 var(--bdt-line); } .bdt-mi__choices { border: 0; margin: 0; padding: 0; display: grid; gap: .55rem; } .bdt-mi__choices legend { font-weight: 700; color: var(--bdt-navy); margin-bottom: .6rem; padding: 0; } .bdt-mi__choice { display: flex; align-items: flex-start; gap: .65rem; padding: .75rem .9rem; border: 1.5px solid #CFD6DC; border-radius: 10px; cursor: pointer; transition: border-color .12s, background-color .12s; } .bdt-mi__choice:hover { border-color: var(--bdt-navy); } .bdt-mi__choice:has(input:checked) { border-color: var(--bdt-navy); background: var(--bdt-sand, #F7F2EA); } .bdt-mi__choice input { margin-top: .25rem; accent-color: var(--bdt-navy); } .bdt-mi__row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .bdt-mi__field { display: grid; gap: .4rem; font-weight: 600; color: var(--bdt-navy); } .bdt-mi input[type=text], .bdt-mi input[type=email], .bdt-mi textarea { width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; font-size: 1.0625rem; color: var(--bdt-navy); background: var(--bdt-white); border: 1.5px solid #CFD6DC; border-radius: 8px; padding: .8rem .95rem; } .bdt-mi input:focus, .bdt-mi textarea:focus { outline: none; border-color: var(--bdt-navy); box-shadow: 0 0 0 3px rgba(255, 131, 81, .45); } .bdt-mi .wp-element-button { justify-self: start; } .bdt-mi--thanks { gap: .25rem; } .bdt-mi__title { font-weight: 700; font-size: 1.25rem; color: var(--bdt-navy); margin: 0; } /* ---------- Forms (order, revision, opt-in) ---------- */ .bdt-order input[type=text], .bdt-order input[type=url], .bdt-order input[type=email], .bdt-order textarea, .bdt-order select, .bdt-revform input[type=text], .bdt-revform input[type=email], .bdt-revform textarea, .bdt-revform select, .bdt-optin input[type=text], .bdt-optin input[type=email] { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.0625rem; color: var(--bdt-navy); background: var(--bdt-white); border: 1.5px solid #CFD6DC; border-radius: 8px; padding: .8rem .95rem; transition: border-color .15s, box-shadow .15s; } /* Selects: our own chevron, inset from the edge like the text (the native arrow hugs the border). */ .bdt-order select, .bdt-revform select { -webkit-appearance: none; appearance: none; padding-right: 2.75rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%23273441' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 14px 9px; } .bdt-order input:focus, .bdt-order textarea:focus, .bdt-order select:focus, .bdt-revform input:focus, .bdt-revform textarea:focus, .bdt-revform select:focus, .bdt-optin input:focus { outline: none; border-color: var(--bdt-navy); box-shadow: 0 0 0 3px rgba(255, 131, 81, .45); } ::placeholder { color: #8A949D; } .bdt-order [aria-invalid=true] { border-color: var(--bdt-rust) !important; } .bdt-field__error { color: var(--bdt-rust); font-weight: 600; font-size: .9375rem; margin: .4rem 0 0; } .bdt-order { display: grid; gap: 1.5rem; align-items: start; } @media (min-width: 980px) { .bdt-order { grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; } .bdt-order__alert { grid-column: 1 / -1; } } .bdt-order__alert { background: #FDECE5; border: 1px solid #F3B9A2; border-radius: 10px; padding: 1rem 1.2rem; } .bdt-order__alert--closed { background: #FFF4D6; border-color: #F0CF7A; } .bdt-order__alert ul { margin: .5rem 0 0; padding-left: 1.2rem; } .bdt-order__main { display: grid; gap: 1.25rem; min-width: 0; } .bdt-step-card { background: var(--bdt-white); border: 1px solid var(--bdt-line); border-radius: 14px; padding: 1.35rem 1.15rem 1.5rem; margin: 0; min-width: 0; } @media (min-width: 600px) { .bdt-step-card { padding: 1.75rem 2rem 2rem; } } .bdt-step-card legend { float: left; width: 100%; padding: 0; margin-bottom: 1.2rem; display: flex; align-items: center; gap: .75rem; font: 600 var(--wp--preset--font-size--xl)/1.2 var(--bdt-heading); letter-spacing: -.02em; } .bdt-step-card legend + * { clear: both; } .bdt-step-card__n { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--bdt-orange); color: var(--bdt-navy-deep); display: grid; place-items: center; font: 600 1rem/1 var(--bdt-heading); } .bdt-pkgs { display: grid; gap: .75rem; } @media (min-width: 600px) { .bdt-pkgs { grid-template-columns: 1fr 1fr; } } .bdt-pkg { position: relative; cursor: pointer; } .bdt-pkg input { position: absolute; inset: 0; opacity: 0; } .bdt-pkg__body { position: relative; display: grid; gap: .3rem; height: 100%; box-sizing: border-box; padding: 1.15rem 1.15rem 1.15rem 3.1rem; border: 2px solid var(--bdt-line); border-radius: 12px; background: var(--bdt-paper); transition: border-color .15s, background-color .15s; } .bdt-pkg__body::before { content: ""; position: absolute; left: 1.05rem; top: 1.3rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid #9AA5AF; background: var(--bdt-white); } .bdt-pkg input:checked + .bdt-pkg__body { border-color: var(--bdt-navy); background: var(--bdt-white); } .bdt-pkg input:checked + .bdt-pkg__body::before { border-color: var(--bdt-navy); background: radial-gradient(circle, var(--bdt-orange) 0 42%, var(--bdt-white) 46%); } .bdt-pkg input:focus-visible + .bdt-pkg__body { outline: 2px solid var(--bdt-navy); outline-offset: 2px; } .bdt-pkg__name { font: 600 1.0625rem/1.3 var(--bdt-heading); } .bdt-pkg__price { font: 300 2rem/1 var(--bdt-heading); letter-spacing: -.03em; } .bdt-pkg__blurb { color: var(--bdt-slate); font-size: 1rem; } .bdt-hint { color: var(--bdt-slate); font-size: 1rem; margin: .4rem 0 0; } .bdt-order.is-enhanced [data-bdt-instr-hint] span { display: none; } .bdt-order.is-enhanced[data-package=one] [data-bdt-instr-hint] [data-for=one], .bdt-order.is-enhanced[data-package=band] [data-bdt-instr-hint] [data-for=band] { display: inline; } .bdt-order:not(.is-enhanced) [data-bdt-instr-hint] span { display: block; } .bdt-instr { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .bdt-chip { position: relative; cursor: pointer; } .bdt-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .bdt-chip span { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border-radius: 99px; border: 1.5px solid #CFD6DC; background: var(--bdt-white); font-weight: 600; font-size: 1rem; user-select: none; transition: background-color .12s, border-color .12s, color .12s; } .bdt-chip span::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; border: 1.5px solid #9AA5AF; } .bdt-chip:hover span { border-color: var(--bdt-navy); } .bdt-chip input:checked + span { background: var(--bdt-navy); border-color: var(--bdt-navy); color: var(--bdt-white); } .bdt-chip input:checked + span::before { background: var(--bdt-orange); border-color: var(--bdt-orange); } .bdt-chip input:focus-visible + span { outline: 2px solid var(--bdt-navy); outline-offset: 2px; } .bdt-chip small { font-size: .75rem; font-weight: 600; color: var(--bdt-slate); } .bdt-chip input:checked + span small { color: var(--bdt-mist); } .bdt-order.is-enhanced[data-package=band] .bdt-chip small { display: none; } .bdt-chip.is-off { cursor: not-allowed; } .bdt-chip.is-off span { opacity: .45; border-style: dashed; } .bdt-chip.is-off input { cursor: not-allowed; } .bdt-field { display: grid; gap: .4rem; margin-top: 1.2rem; min-width: 0; } .bdt-step-card > .bdt-field:first-of-type { margin-top: 0; } .bdt-field-row > .bdt-field { margin-top: 1.2rem; align-content: start; } .bdt-field label, .bdt-label { font-weight: 700; font-size: 1rem; } .bdt-opt { font-weight: 400; color: var(--bdt-slate); font-size: 1rem; margin-left: .3rem; } .bdt-field-row { display: grid; gap: 0 1rem; } @media (min-width: 640px) { .bdt-field-row { grid-template-columns: 1fr 1fr; } } .bdt-toggle { box-sizing: border-box; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem; padding: .25rem; width: fit-content; max-width: 100%; background: var(--bdt-paper); border: 1px solid var(--bdt-line); border-radius: 10px; } .bdt-toggle label { position: relative; cursor: pointer; font-weight: 600; } .bdt-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; } .bdt-toggle span { display: block; text-align: center; padding: .55rem 1rem; border-radius: 7px; font-size: .9375rem; white-space: nowrap; } .bdt-toggle input:checked + span { background: var(--bdt-navy); color: var(--bdt-white); } .bdt-toggle input:focus-visible + span { outline: 2px solid var(--bdt-navy); outline-offset: 2px; } @media (max-width: 420px) { .bdt-toggle--3 { grid-auto-flow: row; width: 100%; } } .bdt-source { margin-top: .6rem; } .bdt-order.is-enhanced[data-source=file] .bdt-source--link, .bdt-order.is-enhanced[data-source=link] .bdt-source--file { display: none; } .bdt-drop { position: relative; display: grid; gap: .3rem; justify-items: center; text-align: center; padding: 1.6rem 1rem; border: 2px dashed #B9C2CA; border-radius: 12px; background: var(--bdt-paper); cursor: pointer; font-weight: 400 !important; transition: border-color .15s; } .bdt-drop:hover { border-color: var(--bdt-navy); } .bdt-drop::before { content: ""; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--bdt-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2530' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 16V5M7 10l5-5 5 5M5 19h14'/%3E%3C/svg%3E") center / 55% no-repeat; } .bdt-drop input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; } .bdt-drop__text { color: var(--bdt-slate); font-size: 1rem; } .bdt-drop__text strong { display: block; color: var(--bdt-navy); font-size: 1.0625rem; margin-bottom: .15rem; } .bdt-drop__name { font-weight: 700; color: var(--bdt-rust); font-size: 1rem; } .bdt-order:not(.is-enhanced) .bdt-drop input { position: static; opacity: 1; } .bdt-check-row { display: flex; gap: .75rem; align-items: flex-start; margin-top: .9rem; padding: .95rem 1rem; border: 1.5px solid var(--bdt-line); border-radius: 10px; background: var(--bdt-paper); cursor: pointer; } .bdt-check-row:first-of-type { margin-top: 0; } .bdt-check-row input { flex: none; width: 1.2rem; height: 1.2rem; margin: .15rem 0 0; accent-color: var(--bdt-navy); } .bdt-check-row:has(input:checked) { border-color: var(--bdt-navy); background: var(--bdt-white); } .bdt-check-row__text { display: grid; gap: .15rem; } .bdt-check-row__title { font-weight: 700; } .bdt-check-row__price { color: var(--bdt-rust); margin-left: .25rem; } .bdt-check-row__sub { color: var(--bdt-slate); } .bdt-field--select select { width: 100%; max-width: 16rem; min-height: 48px; } .bdt-field--select .bdt-hint { margin: 0 0 .25rem; } /* "No AI demo? ... What are you sending? [AI demo]" under the upload: quiet, one line on desktop. */ .bdt-order .bdt-start { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .85rem; } .bdt-order .bdt-start label { flex: 1 1 16rem; font-weight: 400; color: var(--bdt-slate); font-size: 1rem; } .bdt-order .bdt-start select { flex: 0 0 auto; width: auto; min-width: 11.5rem; padding: .55rem 2.75rem .55rem .8rem; font-size: 1rem; } /* Order summary */ .bdt-order__summary { position: sticky; top: 6rem; } .bdt-summary { position: relative; overflow: hidden; background: var(--bdt-navy); color: var(--bdt-white); border-radius: 14px; padding: 1.6rem; box-shadow: 0 30px 60px -35px rgba(27, 37, 48, .8); } .bdt-summary__title { font: 600 1.15rem/1.2 var(--bdt-heading); margin: 0 0 1rem; } .bdt-summary dl { margin: 0; display: grid; gap: .55rem; } .bdt-summary dl > div { display: flex; justify-content: space-between; gap: 1rem; } .bdt-summary dl > div[hidden] { display: none; } .bdt-summary dt { color: var(--bdt-mist); } .bdt-summary dd { margin: 0; font-weight: 700; } .bdt-summary__total { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 .3rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .14); } .bdt-summary__total strong { font: 300 2.5rem/1 var(--bdt-heading); letter-spacing: -.03em; color: var(--bdt-orange); } .bdt-summary__eta { margin: 0 0 1.2rem; color: var(--bdt-mist); font-size: .9375rem; } .bdt-summary__btn { width: 100%; border: 0; cursor: pointer; padding: 1rem; font-size: 1.0625rem; } .bdt-summary__fine { margin: 1rem 0 0; font-size: 1rem; color: var(--bdt-mist); } .bdt-summary__btn-short { display: none; } /* 'One revision round is included' line on the order form */ .bdt-included { margin: 1rem 0; color: var(--bdt-slate); } /* Extra revision form (/extra-revision/) */ .bdt-revform { margin-top: 1rem; } .bdt-revform__price { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--bdt-line); } .bdt-revform__price strong { font: 600 1.1rem/1.2 var(--bdt-heading); } .bdt-revform__price span { font: 300 1.6rem/1 var(--bdt-heading); } .bdt-revform__btn { margin-top: 1.4rem; border: 0; cursor: pointer; width: 100%; } @media (min-width: 600px) { .bdt-revform__btn { width: auto; } } /* ---------- Blog ---------- */ /* Tables scroll sideways on phones instead of squashing (blog posts have comparison tables). */ .wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} @media (max-width:600px){.wp-block-table table{min-width:560px}} .bdt-listing-head { margin-bottom: clamp(2rem, 5vw, 3rem); } .bdt-listing-head h1 { font-weight: 300; font-size: var(--wp--preset--font-size--huge); letter-spacing: -.035em; margin: 0 0 .75rem; } .bdt-listing-head__lede { color: var(--bdt-slate); font-size: var(--wp--preset--font-size--lg); margin: 0; } .bdt-post-grid { gap: 1.25rem !important; } .bdt-post-card { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: .85rem; padding: clamp(1.5rem, 3vw, 2rem); background: var(--bdt-sand); border-radius: 16px; transition: background-color .2s var(--bdt-ease); } .bdt-post-card:hover { background: var(--bdt-sand-deep); } .bdt-post-card:hover .wp-block-post-title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; } .bdt-post-card > * { margin: 0 !important; } .bdt-post-card .wp-block-post-title { line-height: 1.22; font-size: var(--wp--preset--font-size--lg) !important; letter-spacing: -.015em; } .bdt-post-card { position: relative; } .bdt-post-card .wp-block-post-title a { text-decoration: none; } /* The whole card is the tap target for the post. Category links stay clickable above it. */ .bdt-post-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .bdt-post-card .wp-block-post-title a:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; } .bdt-post-card .bdt-meta a { position: relative; z-index: 1; } .bdt-post-card .wp-block-post-excerpt { flex: 1; color: var(--bdt-slate); font-size: 1rem; } .bdt-post-card .wp-block-post-excerpt__more-text { display: none; } .bdt-meta { gap: 0 1rem !important; color: var(--bdt-slate); font-size: 1rem; } .bdt-meta a { color: var(--bdt-slate); } .bdt-pagination { margin-top: clamp(2rem, 5vw, 3rem); } .bdt-article h1 { font-size: var(--wp--preset--font-size--xxl); margin-block: 0 1rem; } .bdt-article__image { margin-block: 1.5rem 2rem; } .bdt-article__image img { display: block; width: 100%; height: auto; } /* Audio examples in posts (native player; bdt-core swaps in for the old Presto players). */ .bdt-audio { margin: .25rem 0 1.75rem; } .bdt-audio audio { display: block; width: 100%; height: 48px; border-radius: 12px; accent-color: var(--bdt-orange); } /* Featured image on post cards (blog index, archives, search): 1200x630, inset in the sand card. */ .bdt-post-card__image { margin: 0 0 .25rem !important; } .bdt-post-card__image img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 10px; } .bdt-prose { font-size: 1.1875rem; line-height: 1.7; } .bdt-prose h2 { margin-top: 2.5rem; font-size: var(--wp--preset--font-size--xl); } .bdt-prose a { text-decoration-color: var(--bdt-orange); text-underline-offset: .2em; } .bdt-order-cta { margin-top: clamp(2.5rem, 6vw, 3.5rem) !important; padding: clamp(1.75rem, 4vw, 2.5rem); background: var(--bdt-sand); border-radius: 16px; display: grid; gap: 1.25rem 2rem; align-items: end; } @media (min-width: 700px) { .bdt-order-cta { grid-template-columns: 1fr auto; } } .bdt-order-cta__text > * { margin-block: 0; } .bdt-order-cta__title { font-size: var(--wp--preset--font-size--xl); margin: .75rem 0 .5rem !important; } .bdt-order-cta__action { margin: 0 !important; } .bdt-order-cta p { margin: 0; font-size: 1.125rem; color: var(--bdt-slate); max-width: 34rem; } .bdt-post-nav { margin-top: clamp(2.5rem, 6vw, 3.5rem) !important; padding-top: 1.5rem; border-top: 1px solid var(--bdt-line); gap: 1rem; font-size: 1rem; } /* ---------- Footer ---------- */ .bdt-footer { padding-block: clamp(3rem, 7vw, 4.5rem) 2rem; } .bdt-footer a { color: var(--bdt-white); text-decoration: none; } .bdt-footer a:hover { color: var(--bdt-orange); } .bdt-footer__cols { gap: 2rem !important; } .bdt-footer .bdt-logo img { height: 24px; } .bdt-footer__about { margin-top: 1.1rem; max-width: 22rem; font-size: 1rem; } .bdt-footer__h { font: 600 1rem/1.2 var(--bdt-heading) !important; letter-spacing: 0; color: var(--bdt-white); margin: 0 0 .9rem; } .bdt-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: 1rem; } .bdt-footer__list a[href^=mailto] { white-space: nowrap; } /* Tablet widths: the about column takes its own row so the link columns (and the email) fit. */ @media (min-width: 782px) and (max-width: 1099px) { .bdt-footer__cols { flex-wrap: wrap !important; } .bdt-footer__cols > .wp-block-column:first-child { flex-basis: 100% !important; } .bdt-footer__cols > .wp-block-column:not(:first-child) { flex-basis: 0 !important; flex-grow: 1; } } .bdt-footer__legal { margin-top: clamp(2rem, 5vw, 3rem) !important; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 1rem; } .bdt-footer__legal p { margin: 0; } .bdt-footer__legal a { color: var(--bdt-mist); } /* ---------- Callouts: plain cards, no side or top accent stripes ---------- */ .wp-block-quote, .wp-block-quote.is-style-large, .wp-block-quote.is-large { border: 0 !important; border-radius: 16px; background: var(--bdt-sand); padding: clamp(1.5rem, 4vw, 2.25rem) !important; margin-inline: 0; } .wp-block-quote::before { content: ""; display: block; width: 64px; height: 18px; margin-bottom: 1rem; background: var(--bdt-orange); -webkit-mask: var(--bdt-wave-mask) left center / contain no-repeat; mask: var(--bdt-wave-mask) left center / contain no-repeat; } .wp-block-quote p { font: 300 clamp(1.25rem, 2.6vw, 1.5rem)/1.45 var(--bdt-heading); letter-spacing: -.01em; color: var(--bdt-navy); } .wp-block-quote p:last-child { margin-bottom: 0; } .wp-block-quote cite { display: block; margin-top: .75rem; color: var(--bdt-slate); font-style: normal; font-size: 1rem; } .wp-block-pullquote { border: 0 !important; border-radius: 16px; background: var(--bdt-sand); padding: clamp(1.75rem, 4vw, 2.5rem) !important; } /* ---------- WooCommerce notices ---------- * Block notice banners (.wc-block-components-notice-banner: is-error, is-success, is-info, * is-warning) and the classic notices: one clean white card, no border, no tint, no stripe. * The only colour is the small outline icon: rust for errors, muted green for success, warm * amber for warnings, navy for info. WooCommerce focuses a new notice from code (tabindex -1), * so no focus ring is drawn on the card itself. */ body .wc-block-components-notice-banner, .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice { --bdt-notice-icon: var(--bdt-navy); display: flex !important; align-items: flex-start; gap: .75rem; margin: 0 0 1.25rem !important; padding: 1rem 1.15rem !important; background: var(--bdt-white) !important; border: 0 !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(27, 37, 48, .06), 0 8px 24px -14px rgba(27, 37, 48, .28) !important; color: var(--bdt-navy) !important; font-size: 1rem !important; line-height: 1.5 !important; list-style: none; } body .wc-block-components-notice-banner.is-error, .woocommerce-error { --bdt-notice-icon: var(--bdt-rust); } body .wc-block-components-notice-banner.is-success, .woocommerce-message { --bdt-notice-icon: #3E7A5C; } body .wc-block-components-notice-banner.is-warning { --bdt-notice-icon: #9A6A12; } body .wc-block-components-notice-banner:focus, body .wc-block-components-notice-banner:focus-visible { outline: none !important; } body .wc-block-components-notice-banner > svg { flex: none; width: 1.35rem !important; height: 1.35rem !important; margin: .1rem 0 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; fill: var(--bdt-notice-icon) !important; color: var(--bdt-notice-icon); } body .wc-block-components-notice-banner__content { flex: 1; min-width: 0; align-self: center; color: var(--bdt-navy) !important; font-size: 1rem !important; } body .wc-block-components-notice-banner__content :is(p, ul) { margin: 0 !important; } body .wc-block-components-notice-banner__content ul { padding-left: 1.1rem; } body .wc-block-components-notice-banner__content .wc-block-components-notice-banner__summary { font-weight: 700; margin: 0 0 .3rem !important; } body .wc-block-components-notice-banner a:not(.button), .woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a:not(.button) { color: var(--bdt-navy) !important; font-weight: 600; text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: .2em; } body .wc-block-components-notice-banner a:not(.button):hover { color: var(--bdt-rust) !important; } /* "View cart" style buttons inside a notice: a quiet text link, not a second button. */ body .wc-block-components-notice-banner .button, .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { float: none !important; order: 2; background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 0 .75rem !important; min-height: 0 !important; color: var(--bdt-navy) !important; font: 700 1rem/1.5 var(--wp--preset--font-family--body) !important; text-decoration: underline !important; text-underline-offset: .2em; box-shadow: none !important; } body .wc-block-components-notice-banner__dismiss { flex: none; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -.65rem -.65rem -.65rem 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 8px; box-shadow: none !important; color: var(--bdt-slate) !important; opacity: 1 !important; cursor: pointer; } body .wc-block-components-notice-banner__dismiss svg { width: 1.1rem; height: 1.1rem; fill: currentColor !important; background: none !important; } body .wc-block-components-notice-banner__dismiss:hover { color: var(--bdt-navy) !important; background: var(--bdt-sand) !important; } body .wc-block-components-notice-banner__dismiss:focus-visible { outline: 2px solid currentColor !important; outline-offset: 2px; } /* Classic notices draw their icon with ::before; keep it, in the icon colour, inline. */ .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { position: static !important; color: var(--bdt-notice-icon) !important; margin: 0 !important; } .woocommerce-error li, .woocommerce-message li, .woocommerce-info li { margin: 0; } /* Store notices at the top of cart/checkout/account pages: breathing room under the header. */ .wc-block-store-notices:has(.wc-block-components-notice-banner) { padding-top: clamp(1rem, 3vw, 1.75rem); } /* ---------- WooCommerce touches ---------- */ .bdt-thanks { background: var(--bdt-sand); border-radius: 16px; padding: clamp(1.5rem, 4vw, 2.25rem); margin: 1.5rem 0; } .bdt-thanks h2 { margin-top: 0; font-size: var(--wp--preset--font-size--lg); } .wc-block-components-button:not(.is-link) { border-radius: 6px !important; } .wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button { background: var(--bdt-orange) !important; color: var(--bdt-navy-deep) !important; font-family: var(--bdt-heading); font-weight: 600; } .wc-block-components-product-details { font-size: .875rem; color: var(--bdt-slate); line-height: 1.45; } /* ---------- Cart + checkout (Woo Blocks) ---------- * Scope to body.woocommerce-cart / .woocommerce-checkout so the rest of the site is untouched. * Match order-form inputs: 8px radius, #CFD6DC border, navy+orange focus. Sand sidebar card. * No new copy, no decorative borders/stripes/eyebrows. Stripe Elements stay in their iframe — * we style the surrounding payment panel and clear appearance transients on deploy. */ body.woocommerce-cart, body.woocommerce-checkout { background: var(--bdt-paper); color: var(--bdt-navy); } body.woocommerce-cart .wc-block-cart-link, body.woocommerce-checkout .wc-block-cart-link { color: var(--bdt-navy); } body.woocommerce-cart .wc-block-cart-link:focus-visible, body.woocommerce-checkout .wc-block-cart-link:focus-visible { outline: 2px solid var(--bdt-navy); outline-offset: 3px; border-radius: 2px; } body.woocommerce-checkout .wp-block-woocommerce-checkout, body.woocommerce-cart .wp-block-woocommerce-cart { margin-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 7vw, 4.5rem); } body.woocommerce-checkout .wc-block-components-sidebar-layout, body.woocommerce-cart .wc-block-components-sidebar-layout { gap: clamp(1.5rem, 4vw, 2.5rem); } /* Step titles */ body.woocommerce-checkout .wc-block-components-checkout-step__title, body.woocommerce-cart .wc-block-cart__totals-title { font-family: var(--bdt-heading) !important; font-weight: 600 !important; letter-spacing: -.015em; color: var(--bdt-navy) !important; } body.woocommerce-checkout .wc-block-components-checkout-step__description { color: var(--bdt-slate); font-size: 1rem; } /* Inputs: match .bdt-order fields */ body.woocommerce-checkout .wc-block-components-text-input input, body.woocommerce-checkout .wc-block-components-textarea textarea, body.woocommerce-checkout .wc-block-components-combobox input.wc-block-components-combobox-control__input, body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select, body.woocommerce-cart .wc-block-components-text-input input { min-height: 48px !important; background: #fff !important; border: 1.5px solid #CFD6DC !important; border-radius: 8px !important; box-shadow: none !important; color: var(--bdt-navy) !important; font: 400 1rem/1.4 var(--wp--preset--font-family--body) !important; } body.woocommerce-checkout .wc-block-components-text-input label, body.woocommerce-checkout .wc-block-components-combobox label, body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__label { color: var(--bdt-slate) !important; font-weight: 600 !important; } body.woocommerce-checkout .wc-block-components-text-input.is-active input, body.woocommerce-checkout .wc-block-components-text-input input:focus, body.woocommerce-checkout .wc-block-components-textarea textarea:focus, body.woocommerce-checkout .wc-block-components-combobox input:focus, body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus { border-color: var(--bdt-navy) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(255, 131, 81, .45) !important; } body.woocommerce-checkout .wc-block-components-checkbox label, body.woocommerce-cart .wc-block-components-checkbox label { color: var(--bdt-navy); font-size: 1rem; } body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input, body.woocommerce-cart .wc-block-components-checkbox .wc-block-components-checkbox__input { border-radius: 4px; border-color: #CFD6DC; accent-color: var(--bdt-navy); } body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input:focus-visible { outline: 2px solid var(--bdt-navy); outline-offset: 2px; } /* Express payment + payment method panel */ body.woocommerce-checkout .wc-block-components-express-payment { background: var(--bdt-sand); border: 0 !important; border-radius: 14px; padding: 1.25rem 1.35rem; margin-bottom: 1.5rem; } body.woocommerce-checkout .wc-block-components-express-payment__title, body.woocommerce-checkout .wc-block-components-express-payment-continue-rule { color: var(--bdt-slate) !important; font-size: .9375rem !important; font-weight: 600; } body.woocommerce-checkout .wc-block-components-express-payment-continue-rule::before, body.woocommerce-checkout .wc-block-components-express-payment-continue-rule::after { border-color: var(--bdt-line) !important; background: var(--bdt-line) !important; } body.woocommerce-checkout .wc-block-components-radio-control-accordion-option { /* overflow must stay visible: overflow:hidden here clipped Stripe Payment Element iframes. */ box-sizing: border-box; background: var(--bdt-sand) !important; border: 0 !important; border-radius: 14px !important; margin: 0 0 .75rem !important; overflow: visible; } /* Woo positions the radio absolutely at left:16px. Equal padding covered "Credit"; keep room on the left. */ body.woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; padding: 1rem 1.15rem 1rem 2.75rem !important; } body.woocommerce-checkout .wc-block-components-radio-control__option-layout, body.woocommerce-checkout .wc-block-components-radio-control__label-group, body.woocommerce-checkout .wc-block-components-radio-control__label { box-sizing: border-box; max-width: 100%; } body.woocommerce-checkout .wc-block-components-radio-control__label { font-weight: 600; color: var(--bdt-navy); } body.woocommerce-checkout .wc-block-components-radio-control-accordion-content { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; padding: 0 1.15rem 1.15rem !important; background: transparent !important; border: 0 !important; overflow: visible; } body.woocommerce-checkout .wc-stripe-copy-test-number, body.woocommerce-checkout .wc-block-components-radio-control-accordion-content .content { color: var(--bdt-slate); font-size: .9375rem; } /* Stripe Payment Element: white inset inside the sand panel. border-box so padding stays inside 100% width. * Never force iframe widths. */ body.woocommerce-checkout .wcstripe-payment-element { display: block; box-sizing: border-box; width: 100%; max-width: 100%; margin-top: .75rem; padding: 0; background: transparent; overflow: visible; } body.woocommerce-checkout .wcstripe-payment-element .StripeElement, body.woocommerce-checkout .wcstripe-payment-element .__PrivateStripeElement { box-sizing: border-box; width: 100%; max-width: 100%; overflow: visible !important; } /* Order summary sidebar */ body.woocommerce-checkout .wc-block-components-sidebar, body.woocommerce-cart .wc-block-components-sidebar { background: var(--bdt-sand); border-radius: 16px; padding: clamp(1.25rem, 3vw, 1.75rem); } body.woocommerce-checkout .wc-block-components-order-summary, body.woocommerce-cart .wc-block-cart-items { margin: 0; } body.woocommerce-checkout .wc-block-components-order-summary-item, body.woocommerce-cart .wc-block-cart-items__row { padding-block: .85rem !important; gap: .85rem !important; align-items: flex-start; } body.woocommerce-checkout .wc-block-components-totals-item, body.woocommerce-cart .wc-block-components-totals-item { color: var(--bdt-navy); } body.woocommerce-checkout .wc-block-components-totals-wrapper, body.woocommerce-cart .wc-block-components-totals-wrapper { margin-top: .5rem; } body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value, body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--bdt-heading); font-weight: 300; font-size: 1.75rem; letter-spacing: -.03em; color: var(--bdt-navy); } body.woocommerce-checkout .wc-block-components-product-name, body.woocommerce-cart .wc-block-components-product-name { color: var(--bdt-navy); font-weight: 600; } body.woocommerce-checkout .wc-block-components-order-summary-item__quantity { background: var(--bdt-navy) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; } /* Order details as labelled rows instead of one run-on line joined by slashes. */ body.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices { display: none; } body.woocommerce-checkout .wc-block-components-product-metadata { font-size: .9375rem; line-height: 1.45; color: var(--bdt-navy); } body.woocommerce-checkout .wc-block-components-product-metadata__description p { margin: .35rem 0 0; color: var(--bdt-slate); } body.woocommerce-checkout .wc-block-components-product-details { display: grid; gap: .4rem; margin: .85rem 0 0; padding-top: .85rem; border-top: 1px solid var(--bdt-line); } body.woocommerce-checkout .wc-block-components-product-details > span { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); column-gap: .75rem; align-items: baseline; } body.woocommerce-checkout .wc-block-components-product-details > span > span[aria-hidden="true"] { display: none; } body.woocommerce-checkout .wc-block-components-product-details__name { color: var(--bdt-slate); font-weight: 400; } body.woocommerce-checkout .wc-block-components-product-details__value { color: var(--bdt-navy); font-weight: 600; overflow-wrap: anywhere; } /* Hide Woo placeholder thumbs when the product has no real image. */ body.woocommerce-checkout .wc-block-components-order-summary-item img[src*="woocommerce-placeholder"], body.woocommerce-cart .wc-block-cart-item__image img[src*="woocommerce-placeholder"], body.woocommerce-cart .wc-block-components-product-image img[src*="woocommerce-placeholder"] { display: none !important; } body.woocommerce-checkout .wc-block-components-order-summary-item__image:has(img[src*="woocommerce-placeholder"]), body.woocommerce-cart .wc-block-cart-item__image:has(img[src*="woocommerce-placeholder"]), body.woocommerce-cart .wc-block-components-product-image:has(img[src*="woocommerce-placeholder"]) { display: none !important; } /* Primary actions */ body.woocommerce-checkout .wc-block-components-checkout-place-order-button, body.woocommerce-cart .wc-block-cart__submit-button { min-height: 52px !important; padding: .95rem 1.4rem !important; border: 0 !important; border-radius: 6px !important; background: var(--bdt-orange) !important; color: var(--bdt-navy-deep) !important; font: 600 1.0625rem/1.2 var(--bdt-heading) !important; box-shadow: none !important; } body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover, body.woocommerce-cart .wc-block-cart__submit-button:hover { background: var(--bdt-orange-hover) !important; color: var(--bdt-navy-deep) !important; } body.woocommerce-checkout .wc-block-components-checkout-place-order-button:focus-visible, body.woocommerce-cart .wc-block-cart__submit-button:focus-visible { outline: none !important; box-shadow: 0 0 0 2px var(--bdt-sand), 0 0 0 5px rgba(255, 131, 81, .45) !important; } body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button, body.woocommerce-cart a.wc-block-components-button:not(.wc-block-cart__submit-button) { color: var(--bdt-navy) !important; font-weight: 600; } body.woocommerce-checkout .wc-block-components-panel__button { color: var(--bdt-navy); font-weight: 600; } @media (max-width: 781px) { body.woocommerce-checkout .wc-block-components-sidebar, body.woocommerce-cart .wc-block-components-sidebar { padding: 1.25rem 1.125rem; border-radius: 14px; } body.woocommerce-checkout .wc-block-components-express-payment { padding: 1.1rem 1.125rem; } } /* ===================================================================== Mobile pass (375 to 390px and up to tablets). 16px minimum text, 44px tap targets, 18px side gutters (root padding), less padding inside nested cards, slim checkout bar. ===================================================================== */ /* Tap targets that apply at every width. */ .bdt-logo { display: inline-flex; align-items: center; min-height: 44px; } .bdt-post-nav a { display: inline-flex; align-items: center; min-height: 44px; } .bdt-toggle span { font-size: 1rem; } .bdt-why__body p:first-child { line-height: 1.45 !important; } .bdt-hero__link a { display: inline-flex; align-items: center; min-height: 44px; } .bdt-footer__list { gap: 0; } .bdt-footer__list a { display: inline-flex; align-items: center; min-height: 44px; } .bdt-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; } .bdt-meta a { display: inline-flex; align-items: center; min-height: 44px; } .bdt-toggle span { padding-block: .75rem; } .bdt-header .wp-block-navigation__responsive-container-open { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } /* Tables in posts: brand styling, scroll sideways on phones (rule above). */ .wp-block-table table { border-collapse: collapse; width: 100%; font-size: 1rem; line-height: 1.45; } .wp-block-table th, .wp-block-table td { border: 1px solid var(--bdt-line); padding: .65rem .8rem; text-align: left; vertical-align: top; } .wp-block-table thead th { background: var(--bdt-navy); color: var(--bdt-white); border-color: var(--bdt-navy); font-family: var(--bdt-heading); font-weight: 600; } .wp-block-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .6); } .wp-block-table { margin-block: 1.75rem; border-radius: 8px; } .wp-block-table thead, .wp-block-table tfoot { border: 0; } /* WordPress default adds 3px header/footer bars */ @media (max-width: 781px) { /* Headings that don't wrap into towers. */ .bdt-article h1 { font-size: clamp(1.75rem, 7.6vw, 2.25rem); } .bdt-prose { font-size: 1.125rem; } .bdt-prose h2 { font-size: 1.5rem; } .bdt-section__title, .bdt-why h2, .bdt-cta-band h2 { font-size: clamp(1.875rem, 8.6vw, 2.25rem); } .bdt-page-head h1, .bdt-optin-hero h1, .bdt-listing-head h1 { font-size: clamp(2.25rem, 10.4vw, 2.75rem); } .bdt-hero__title { font-size: clamp(2.375rem, 10.6vw, 2.875rem); } /* Less padding inside nested cards, so content uses the width. */ .bdt-tier, .bdt-post-card, .bdt-support-card, .bdt-optin-box, .bdt-order-cta { padding: 1.5rem 1.25rem; } .bdt-tier__price { margin: .6rem 0 .75rem; } .bdt-section { padding-block: 3rem; } .bdt-section--tight { padding-block: 1.75rem 3rem; } /* Header fits at 375px: logo, menu and button, all 44px tall. */ .bdt-header__inner { padding-block: .25rem; gap: .5rem; } .bdt-header__nav { gap: .25rem; } .bdt-logo img { height: 18px; } .bdt-header__cta .wp-block-button__link { padding: .55rem .85rem; } } @media (max-width: 400px) { .bdt-logo img { height: 16px; } .bdt-header__cta .wp-block-button__link { padding-inline: .7rem; } } @media (max-width: 979px) { /* Order form: step cards with less inner padding, inner cards trimmed. */ .bdt-step-card { padding: 1.125rem 1rem 1.25rem; border-radius: 12px; } .bdt-step-card legend { font-size: 1.3125rem; gap: .6rem; margin-bottom: 1rem; } .bdt-step-card__n { width: 2rem; height: 2rem; font-size: 1rem; } .bdt-pkg__body { padding: .95rem .9rem .95rem 2.6rem; } .bdt-pkg__body::before { left: .8rem; top: 1.05rem; } .bdt-check-row { padding: .85rem .9rem; } .bdt-drop { padding: 1.25rem .9rem; } .bdt-field--select select { max-width: none; } .bdt-instr { gap: .45rem; } .bdt-chip span { padding: .7rem .95rem; min-height: 44px; box-sizing: border-box; } .bdt-toggle { width: 100%; } .bdt-toggle--3 { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .bdt-toggle--3 label:last-child { grid-column: 1 / -1; } /* Slim checkout bar: delivery on the left, one-line "Checkout · $799" button. */ html:has(.bdt-order) { scroll-padding-bottom: calc(var(--bdt-bar-h, 64px) + 12px); } .bdt-order-section { padding-bottom: 0; } .bdt-order-section + .bdt-faq { padding-top: 2.25rem; } .bdt-order__summary { position: sticky; bottom: 0; top: auto; z-index: 20; margin-inline: calc(50% - 50vw); } /* full-bleed: exactly the screen width */ .bdt-summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-radius: 14px 14px 0 0; padding: .5rem var(--wp--style--root--padding-left, 1.125rem) calc(.5rem + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px -12px rgba(27, 37, 48, .45); } .bdt-summary__title, .bdt-summary dl, .bdt-summary__fine, .bdt-summary__total, .bdt-summary__eta-long, .bdt-summary__btn-long { display: none; } .bdt-summary__btn-short { display: inline; } .bdt-summary__eta { margin: 0; font-size: 1rem; color: var(--bdt-mist); white-space: nowrap; } .bdt-summary__btn { width: auto; flex: none; min-height: 48px; padding: .7rem 1.15rem; font-size: 1rem; white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bdt-rings, .bdt-session__rec, .bdt-session__playhead { animation: none; } .wp-block-button__link:hover, .bdt-post-card:hover, .bdt-support-card:hover { transform: none; } }