html, body {
/* `max-width: 100vw` includes the scrollbar in its calculation on desktop
Safari/macOS, which can itself trigger a few px of unwanted horizontal
overflow. `100%` avoids that entirely. Safari also has a long-standing
WebKit quirk where `overflow-x: hidden` on does NOT reliably
clip descendant fixed-position elements the way Chrome/Firefox do —
`overflow-x: clip` (with `hidden` kept as the fallback for older
engines) closes that gap. `position: relative` gives Safari an explicit
containing block for that clip instead of leaving it implicit. */
overflow-x: hidden;
overflow-x: clip;
max-width: 100%;
position: relative;
}
/* Hard safety net: every media element self-constrains to the viewport no
matter what wrapper div is (or isn't) covering it. Some of our custom
case-study images carry large native HTML width/height attributes
(e.g. width="1700"); only the WRAPPER divs had max-width:100% before,
not the ![]()
itself, so a gap in wrapper coverage could let an image
render past its column and force the whole page to scroll sideways. */
img, svg, video, iframe, table, embed, object {
max-width: 100% !important;
box-sizing: border-box;
}
img {
height: auto;
}
/* ==========================================================================
Case-study description paragraphs previously collapsed to 3 lines behind a
"Read more" toggle on mobile. Removed per request: full text now always
shows on every viewport. The checkbox/label markup is still in the HTML
(harmless, unused) but stays hidden here on every breakpoint.
========================================================================== */
.x3-readmore-toggle {
/* be.css has `input[type="checkbox"]{display:inline}` at higher CSS
specificity than a bare class selector, so this needs !important to
actually hide the checkbox (otherwise it renders as a visible square). */
display: none !important;
}
.x3-readmore-label {
display: none !important;
}
/* ==========================================================================
mobile-fix.css — corrects mobile layout broken by editor-added inline styles.
The visual editor writes fixed inline widths onto tiles, e.g.
style="flex:0 0 50%;width:50%;max-width:50%"
An inline style beats the theme's responsive rule (`.column{width:100%}` has
no !important), so on phones the tiles stay side-by-side and look squashed /
stretched instead of stacking. Betheme already tags every column that should
go full-width on mobile with the class `.mobile-one`, so we re-assert exactly
that intent with !important — narrow enough that inline pill/tag rows (which
are NOT .mobile-one) keep wrapping normally.
========================================================================== */
@media only screen and (max-width: 767px) {
/* Stack normal columns full-width — but NOT inline pill/badge items
(.mfn-item-inline) or the header logo (.column_header_logo), which are
meant to hug their content, not stretch. The logo column especially:
be.css sets `.column_header_logo .logo-wrapper > *{width:100%}`, so
stretching the COLUMN to 100% here would blow the small logo image up
to fill the whole header bar. */
.mobile-one.mcb-column:not(.mfn-item-inline):not(.column_header_logo),
.mobile-one.column:not(.mfn-item-inline):not(.column_header_logo),
.mobile-one.mcb-wrap {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
flex-basis: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Keep the logo at its natural small size instead of stretching to fill
the header bar. */
.column_header_logo.mobile-one {
width: auto !important;
max-width: 180px !important;
flex: 0 0 auto !important;
}
.column_header_logo .logo-wrapper > * {
width: auto !important;
max-width: 140px !important;
height: auto !important;
}
/* Pill / badge items (e.g. the hero "PROFESSIONAL DISTRIBUTION" tags): on a
phone the forced full-width made them empty bars with text stuck left.
Let them shrink to their text and sit centered, with the label centered.
NOT the header hamburger icon though (excluded below) — that one must
stay pinned to the right edge of the header pill, not centered. */
.mfn-item-inline.mobile-one:not(.column_header_burger) {
width: auto !important;
max-width: 100% !important;
flex: 0 1 auto !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
/* Header hamburger: shrink to its icon size and hug the right edge. */
.column_header_burger.mobile-one {
width: auto !important;
max-width: 100% !important;
flex: 0 0 auto !important;
margin-left: auto !important;
margin-right: 0 !important;
float: none !important;
}
.mfn-item-inline .mfn-icon-box,
.mfn-item-inline .desc-wrapper {
text-align: center !important;
justify-content: center !important;
}
/* The wraps that hold the badges should center their (now auto-width) items. */
.mcb-wrap.mobile-one > .mcb-wrap-inner {
justify-content: center !important;
align-items: center !important;
}
/* Hero pills on phones: the desktop size (3.6vw) + the wide Unbounded font
makes the long "FOR BUSINESSES AND CREATORS" pill overflow the screen.
Cap the text to a size that fits one line on any phone, keep it centred,
and tighten the pill padding to match. (The label span carries both
`.title` and `.label`, so we target `.title.label` to win the cascade.) */
.mcb-item-98wwodpb .title.label,
.mcb-item-yp6jes2tw .title.label,
.mcb-item-47uasronu .title.label {
font-size: clamp(11px, 3.2vw, 15px) !important;
line-height: 1.2 !important;
letter-spacing: .02em;
white-space: nowrap;
}
.mcb-item-98wwodpb .mfn-icon-box,
.mcb-item-yp6jes2tw .mfn-icon-box,
.mcb-item-47uasronu .mfn-icon-box {
padding: 9px 18px !important;
}
/* The hero carries a huge desktop padding (≈340/250px) that leaves a big
empty void on phones — trim it so the section is compact. */
section.mcb-section-74krmk1m {
padding-top: 118px !important; /* clears the fixed header */
padding-bottom: 34px !important;
}
/* Editor-resized photo frames / images must never exceed the screen width. */
.image_frame,
.image_wrapper,
.column_image {
max-width: 100% !important;
}
.content_wrapper img {
max-width: 100% !important;
height: auto !important;
}
/* Guard against horizontal scroll from any full-bleed section trick. */
body { overflow-x: hidden; }
/* Header pill: the 40px side padding is sized for desktop and eats most of
a phone's width, making the bar look oversized next to the content below. */
.mcb-wrap-inner-f1idujwsg {
padding-left: 16px !important;
padding-right: 16px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
}
/* ==========================================================================
Task 1: Top heading/text row needs vertical centering — push text down
to align with heading baseline. Also add padding from screen edges (task 3).
========================================================================== */
/* Consistent padding from screen edges on ALL sections (task 3)
Betheme's be.css: .section.full-width > .section_wrapper sets
padding:0 and max-width:100% — we override with higher specificity. */
.section > .section_wrapper {
max-width: 1400px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 40px !important;
padding-right: 40px !important;
box-sizing: border-box !important;
}
@media (max-width: 767px) {
.section > .section_wrapper {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ==========================================================================
Header: always visible, pinned at top. The theme's JS hid it until scroll
via show-on-scroll — we removed the class, but also force visibility here.
========================================================================== */
#mfn-header-template {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 9999 !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
}
/* ==========================================================================
Disable sticky wraps: the theme's sticky-desktop made text blocks slide
down as the user scrolls. We removed the class from HTML, but also kill
the CSS behaviour for any leftover inline --sticky-offset-desktop.
========================================================================== */
.sticky-desktop {
position: static !important;
}
/* ==========================================================================
Inverted heading+text row below stat cards: text left, heading right.
========================================================================== */
.mcb-wrap-x3inv-text,
.mcb-wrap-x3inv-head {
margin-top: 40px;
}
.mcb-section-q6ca0eww > .section_wrapper {
padding-bottom: 0 !important;
}
.mcb-section-q6ca0eww {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Minimize gaps between WHO WE WORK WITH and WE WORK WITH LEADING sections */
.mcb-section-z58f1wdcv,
.mcb-section-aw79svct {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* "WE WORK WITH LEADING ADULT PLATFORMS" section paragraph */
.mcb-section-aw79svct .column_attr p {
color: #fff !important;
font-size: 20px !important;
line-height: 1.6 !important;
}
.mcb-wrap-x3inv-text .column_attr p {
color: #fff !important;
font-size: 20px !important;
line-height: 1.6 !important;
}
.mcb-wrap-x3inv-head .title {
font-family: 'Unbounded', sans-serif;
font-weight: 800;
text-transform: uppercase;
color: #fff;
}
/* ==========================================================================
WHO WE WORK WITH section: heading left, paragraph right (same layout as
the section above), cards in a 2×2 grid spanning full width.
========================================================================== */
@media (min-width: 768px) {
.mcb-section-z58f1wdcv > .section_wrapper {
display: flex !important;
flex-wrap: wrap !important;
}
/* Left wrap (heading + paragraph) → heading only, full-row first half */
.mcb-wrap-yyry14ynk {
width: 50% !important;
flex: 0 0 50% !important;
max-width: 50% !important;
order: 1 !important;
}
/* Hide paragraph from the left wrap — we'll show a duplicate on the right */
.mcb-wrap-yyry14ynk .mcb-item-5ni6n0re {
display: none !important;
}
/* Right wrap (cards) → full width, order 3 so it goes below heading row */
.mcb-wrap-hz6z95gq {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
order: 3 !important;
}
/* Cards in 2×2 grid */
.mcb-wrap-hz6z95gq > .mcb-wrap-inner {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 16px !important;
align-items: stretch !important;
}
/* Each card wrap must fill its grid cell height so row borders line up */
.mcb-wrap-hz6z95gq > .mcb-wrap-inner > .mcb-wrap {
height: 100% !important;
}
.mcb-wrap-hz6z95gq > .mcb-wrap-inner > .mcb-wrap > .mcb-wrap-inner {
height: 100% !important;
}
}
/* Duplicate paragraph on the right of heading */
@media (min-width: 768px) {
.mcb-wrap-x3wwpara {
width: 50% !important;
flex: 0 0 50% !important;
max-width: 50% !important;
order: 2 !important;
display: flex !important;
align-items: center !important;
}
}
.mcb-wrap-x3wwpara .column_attr p {
color: #fff !important;
font-size: 20px !important;
line-height: 1.6 !important;
}
@media (max-width: 767px) {
.mcb-wrap-x3wwpara { display: none !important; }
}
/* ==========================================================================
Case study titles: same style as main H2 headings (Unbounded, bold, uppercase)
========================================================================== */
.portfolio_group .entry-title a {
font-family: 'Unbounded', sans-serif !important;
font-weight: 800 !important;
text-transform: uppercase !important;
font-size: 32px !important;
letter-spacing: -1px !important;
color: #fff !important;
}
.portfolio_group .desc-wrapper p {
color: #fff !important;
font-size: 20px !important;
line-height: 1.6 !important;
font-family: 'Public Sans', sans-serif !important;
}
/* ==========================================================================
Force full case-study copy to show in the portfolio "grid" style, which
the theme hides description text for by default (see be.css:
.portfolio_group.grid .portfolio-item .desc .desc-wrapper{display:none}).
The saved page also freezes Isotope's JS-computed absolute positions
(position:absolute; top/left in px, plus a fixed wrapper height) from the
moment it was captured — before this longer copy existed. Unhiding the
paragraphs without touching that would make each tile overflow into the
next one. So we disable the absolute/JS layout entirely and lay the four
items out with a plain, self-sizing CSS grid instead.
========================================================================== */
.portfolio_group.grid.isotope {
height: auto !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
padding-left: 40px !important;
padding-right: 40px !important;
}
@media (max-width: 767px) {
.portfolio_group.grid.isotope {
grid-template-columns: 1fr;
/* Left flush with every other heading/paragraph on the page (e.g. the
"EXCLUSIVE ACCESS..." H2 right above this grid) instead of adding its
own inset that made card text start further right than the rest of
the page. Right side keeps a little breathing room. */
padding-left: 0 !important;
padding-right: 12px !important;
}
}
.portfolio_group.grid .portfolio-item {
position: static !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
left: auto !important;
top: auto !important;
/* Isotope.js is still loaded and keeps recalculating an absolute-grid
layout on scroll/resize-adjacent events, setting its own inline
top/left/transform + a CSS transition on them (the inline JS destroy
call in index.html handles the root cause; this is the CSS-side
safety net in case any recalculation slips through before that runs). */
transition: none !important;
transform: none !important;
}
.portfolio_group.grid .portfolio-item .desc .desc-wrapper {
display: block !important;
margin-right: 0 !important;
margin-top: 12px;
}
.portfolio_group.grid .portfolio-item .desc .desc-wrapper p {
color: #b9bcd6;
font-size: 14px;
line-height: 1.6;
margin-bottom: 10px;
}
.portfolio_group.grid .portfolio-item .desc {
position: relative;
padding-bottom: 20px;
}
@media (max-width: 767px) {
/* Theme default is `padding: 20px` (all sides, equal), which reads as a
centered/framed block next to the page's other headings (e.g. the
"EXCLUSIVE ACCESS..." H2 right above this grid), which sit flush at the
page's own left edge. Drop the left padding entirely so the card title
lines up exactly with that same left edge. */
.portfolio_group.grid .portfolio-item .desc {
padding-left: 0;
padding-right: 16px;
}
}
.portfolio_group.grid .portfolio-item .image_links,
.portfolio_group.grid .portfolio-item .mask {
display: none !important;
}
.portfolio_group.grid .portfolio-item .image_wrapper a {
pointer-events: none;
cursor: default;
}
/* ==========================================================================
Unify corner rounding across EVERY rounded block site-wide, including the
header nav pill, small pill badges/tags, buttons, and all card wraps
(whose per-instance 32px comes from individual `.mcb-wrap-inner-`
rules generated by the page builder — the wildcard attribute selector
catches all of them in one shot instead of listing every hash). Pure
circular icon avatars (.icon-wrapper: 50%) are left alone, since those
are round icon badges, not rectangular "blocks".
========================================================================== */
.mfn-icon-box,
.button,
.image_frame,
[class*="mcb-wrap-inner-"],
[class*="mcb-section-"] {
border-radius: 20px !important;
}
/* Stat cards (90% / 2K / 98% / 1MLN) span the FULL page width in one row.
The heading (left 50%, sticky) and intro paragraph (right 50%) keep their
original two-column layout. The 4 stat cards were moved in the HTML out of
the right-column wrap so they are now their own full-width row of section
siblings — laid out here at 25% each: one horizontal row from the left
edge to the right edge, at their original card size. */
/* Desktop: all 4 cards in a single row. */
@media (min-width: 1024px) {
.mcb-wrap-hmyvhlh,
.mcb-wrap-f7akypu1i,
.mcb-wrap-lfo6awm,
.mcb-wrap-sg2w79ygn {
width: 25% !important;
flex: 0 0 25% !important;
max-width: 25% !important;
clear: none !important;
}
/* First card starts a fresh full-width row below the heading/paragraph. */
.mcb-wrap-hmyvhlh {
clear: both !important;
}
}
/* Tablet: 2×2 grid — card art/numbers get cramped at 25% below desktop width. */
@media (min-width: 640px) and (max-width: 1023px) {
.mcb-wrap-hmyvhlh,
.mcb-wrap-f7akypu1i,
.mcb-wrap-lfo6awm,
.mcb-wrap-sg2w79ygn {
width: 50% !important;
flex: 0 0 50% !important;
max-width: 50% !important;
clear: none !important;
}
.mcb-wrap-hmyvhlh {
clear: both !important;
}
}
/* Phone: stack the 4 cards full-width. */
@media (max-width: 639px) {
.mcb-wrap-hmyvhlh,
.mcb-wrap-f7akypu1i,
.mcb-wrap-lfo6awm,
.mcb-wrap-sg2w79ygn {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
clear: both !important;
}
}
/* ==========================================================================
Heading word gaps + more generous spacing.
The display headings use the wide "Unbounded" face with a big NEGATIVE
letter-spacing (down to -5px), which also crushes the space between words
— so "PROFESSIONAL ADULT" reads as one word. A positive word-spacing (in
em, so it scales with any heading size) restores a clear gap between words
without loosening the letters themselves.
========================================================================== */
h1, h2, h3, h4,
.title, .column_heading .title {
word-spacing: 0.22em !important;
}
/* More breathing room overall: bigger vertical rhythm on sections, a larger
gap under headings, and extra space above the stat-card row. */
.section .section_wrapper {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.column_heading .title,
.mcb-item-2d1cw6h4g .title {
margin-bottom: 32px !important;
}
.mcb-wrap-hmyvhlh,
.mcb-wrap-f7akypu1i,
.mcb-wrap-lfo6awm,
.mcb-wrap-sg2w79ygn {
margin-top: 24px;
}
/* ==========================================================================
Stats section: drop the decorative beaded-ball background image
(x3-home-bg2.webp) but keep the section transparent so the page's
dark background still shows through.
========================================================================== */
.mcb-section-q6ca0eww {
background-image: none !important;
}
/* Put the (background-removed) globe INSIDE the "500M / views per month"
card, behind its text, while keeping the card's own dark colour (#25284C)
and border. A subtle card-tint gradient over the globe keeps the white
numbers readable. */
.mcb-wrap-inner-sg2w79ygn {
/* Ready-made globe card art: its frame border was cropped off and its
background recoloured to exactly #25284C, so it drops straight in as the
full card background. Sized by height and pulled left with a right-edge
gap so the globe starts around the middle of the "M" and doesn't touch
the right edge (the surrounding area is the same #25284C, so seamless). */
background-color: #25284C !important;
background-image: url(wp-content/uploads/custom/globe-card.png) !important;
background-repeat: no-repeat !important;
background-position: right 24px center !important;
background-size: auto 118% !important;
overflow: hidden;
}
/* Remove the little decorative dot in the top-right corner of EVERY stat card. */
.icon-dot {
display: none !important;
}
/* ==========================================================================
"200+ connected adult platforms" card (f7akypu1i): switch it from the
bright violet fill to the same dark #25284C as the other cards so the
dark platforms artwork (background removed to transparency) blends in
seamlessly, and drop the artwork in on the right like the globe card.
========================================================================== */
.mcb-wrap-inner-f7akypu1i {
background-color: #25284C !important;
background-image: url(wp-content/uploads/custom/platforms-card.png) !important;
background-repeat: no-repeat !important;
background-position: right 24px center !important; /* same as the globe card */
background-size: auto 118% !important; /* same as the globe card */
overflow: hidden;
}
/* ==========================================================================
"15+ years in the adult industry" card (hmyvhlh): drop in the transparent
HUD-ring artwork on the right, same size/position as the globe card.
========================================================================== */
.mcb-wrap-inner-hmyvhlh {
background-color: #25284C !important;
overflow: hidden;
position: relative;
}
.mcb-wrap-inner-hmyvhlh::after {
content: '';
position: absolute;
top: -9%;
right: -10px;
bottom: -9%;
width: 70%;
background: url(wp-content/uploads/custom/card-growth-chart.png) no-repeat center/contain;
mix-blend-mode: lighten;
pointer-events: none;
}
/* ==========================================================================
Remove the four "Learn More" buttons from the Brands / Studios / Creators /
Key Platforms cards. They are the only .column_button blocks on the page,
so hiding that column drops the button and its spacing cleanly.
========================================================================== */
.column_button {
display: none !important;
}
/* ==========================================================================
"40K+ new videos distributed daily" card (lfo6awm): dashboard artwork,
background recoloured to #25284C, same size/position as the other cards.
========================================================================== */
.mcb-wrap-inner-lfo6awm {
background-color: #25284C !important;
background-image: url(wp-content/uploads/custom/dashboard-card.png) !important;
background-repeat: no-repeat !important;
background-position: right center !important; /* no right gap, so the phone isn't clipped */
background-size: auto 118% !important;
overflow: hidden;
}
/* ==========================================================================
Case-study (portfolio) cards: kill the image zoom-in on hover. The body has
the theme's `if-zoom` class, so `.image_frame.hover img` scales to 1.1 on
hover — force it back to 1 for the portfolio thumbnails.
========================================================================== */
.portfolio-item .image_frame .image_wrapper img,
.if-zoom .portfolio-item .image_frame.hover .image_wrapper img {
transform: scale(1) !important;
}
/* Top nav: enlarge + bold link text to match site paragraph weight (desktop bar
only — the mobile sidebar menu keeps the theme's own larger 24px touch size,
so scope this to min-width:960px, the same breakpoint the theme's own
sidebar-menu font-size rule uses), and enable smooth scroll offset for
anchor links. */
@media (min-width: 960px) {
.mfn-header-menu, .mfn-header-menu .mfn-menu-link, .mfn-header-menu .menu-label { font-size: 16px !important; font-weight: 700 !important; }
}
.mfn-header-menu .mfn-menu-link, .mfn-header-menu .menu-label { font-weight: 700 !important; }
html { scroll-behavior: smooth; }
#case-studies-anchor, #solutions-anchor { scroll-margin-top: 120px; }
/* ==========================================================================
"WHO WE WORK WITH" card icons (the pie-chart/dashboard/etc SVG artwork):
these are 368×368px native images with no size constraint anywhere in the
theme, so on a wide desktop card they read fine but on a narrow phone card
they render at nearly full native size — blowing up out of proportion and
making their decorative accent marks (sparkles baked into the SVG) look
like stray oversized X shapes instead of small accents.
========================================================================== */
.mfn-icon-box .icon-wrapper img {
max-width: 100%;
height: auto;
}
/* Desktop/tablet: these are 368x368 native SVGs with no size limit from the
theme, so on our 2-column "WHO WE WORK WITH" layout (wider columns than
the original theme's demo, which used narrower multi-column cards) they
render ~150px — noticeably bigger than on the original theme. Cap them so
they read as accent icons, not oversized centerpieces. */
.column_icon_box_2 .icon-wrapper img {
max-width: 100px !important;
}
@media (max-width: 767px) {
.column_icon_box_2 .icon-wrapper img {
max-width: 96px !important;
}
}
/* The theme's base .mfn-icon-box rule (be.css) sets `overflow: hidden` and,
in its default row layout (icon beside text, active above the ~960px
tablet breakpoint), the box's height is pinned to whichever child is
tallest — usually the icon. Our card titles are longer than the theme's
demo content ("Brands & Companies", "Networks & Paid Sites"...), and on
some devices/fonts they wrap to more lines than fit inside that pinned
height, clipping the tail of the heading (seen on iPad: "BRANDS &
COMPANIES" rendered as "BRANDS COMPAN"). There's no reason to hard-clip
here, so drop the clip entirely for these cards. */
.column_icon_box_2 .mfn-icon-box {
overflow: visible !important;
height: auto !important;
}