drops below the
icon. Restore the intended flex row with a higher-specificity selector, and
keep the label on one line (white-space: nowrap) so the list sizes its width
to the longest label instead of wrapping each label to two lines. */
.page-blocks-kit .dropdown-link-blocks-kit.w-inline-block,
.page-cms-comparison .dropdown-link-blocks-kit.w-inline-block {
display: flex;
flex-direction: row;
align-items: center;
white-space: nowrap;
}
/* The links are block-level flex items, so they stretch to the list width
(= the toggle width via min-width:100%) and the longest no-wrap label
("Preview on Webflow") overflows past the card's right padding, touching the
edge. Size the list to its content so the card hugs the longest label and the
24px right padding is preserved for every row. */
.page-blocks-kit .dropdown-blocks-kit-wrapper.w-dropdown-list,
.page-cms-comparison .dropdown-blocks-kit-wrapper.w-dropdown-list {
width: -moz-max-content;
width: max-content;
}
/* Hover turns the label blue instead of fading it out (keep the subtle slide). */
.page-blocks-kit .dropdown-link-blocks-kit.w-inline-block:hover,
.page-cms-comparison .dropdown-link-blocks-kit.w-inline-block:hover {
opacity: 1;
color: var(--secondary--blue-200);
}
/* (2) Every card in the "Preview" section (Take a look a the sections inside
Blocks Kit) — all 12, whether .hover-blocks-kit, .opacity-features, or plain —
carries a constant 3px gray border at rest and turns blue on hover. Keeping
the width fixed at 3px (instead of growing 1px -> 3px) means the hover only
swaps the color, so there is no jump. box-sizing is border-box globally, so
the thicker border eats into the card's padding without shifting layout. */
.page-blocks-kit #preview .card.features-grid-card {
border-width: 3px;
border-color: var(--neutral--300);
transition: border-color .3s;
}
.page-blocks-kit #preview .card.features-grid-card:hover {
border-color: var(--secondary--blue-200);
}
/* (3) The Default / Dark Mode / Minimal switcher — "Compact" text-tab style
(DOCS/.../ELEMENTS/TAB-TEXT-DESIGNOPTIONS.html, Option 06). Replaces the gray
container + gray inactive pills with a light tray that hugs its three pills;
the active pill = white button-grade surface (top-light gradient + hairline
border + inset highlight + soft shadow, matching the secondary button in
BUTTONS.html). Inactive pills scale down (.95) and fade. Text-only, 15px
label, tight padding so the switcher stays subordinate to the hero. The
higher-specificity `.page-blocks-kit` selector overrides the per-breakpoint
max-width/padding/color rules in brixagencydev.css. Webflow state contract is
unchanged: setupTabs() toggles `.w--current` on the active link. */
.page-blocks-kit .tabs-menu-blocks-kit {
max-width: 100%;
width: -moz-fit-content;
width: fit-content;
gap: 5px;
padding: 5px;
margin-left: auto;
margin-right: auto;
border: 1px solid #eef1f6;
border-radius: 999px;
background-color: #f6f8fb;
box-shadow: inset 0 1px 0 #fff;
}
/* Keep label centered in each pill (the `.w-inline-block` shim would otherwise
collapse the
to inline-block and drop its label div). */
.page-blocks-kit .tab-link-blocks-kit.w-inline-block {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Tabs: neutral scale-focus base. Overrides the exported gray pill. */
.page-blocks-kit .tab-link-blocks-kit {
min-height: 46px;
padding: 11px 16px;
border: 1px solid transparent;
border-radius: 999px;
background-color: transparent;
box-shadow: none;
color: var(--neutral--600);
font-size: 15px;
font-weight: 700;
line-height: 1.1;
opacity: 0.6;
transform: translate3d(0, 0, 0.001px) scale(0.95);
transition: color 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
background-color 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Inactive hover: wake up toward active. */
.page-blocks-kit .tab-link-blocks-kit:not(.w--current):hover {
background-color: transparent;
color: var(--neutral--800);
opacity: 0.92;
transform: translate3d(0, 0, 0.001px) scale(0.98);
}
/* Active: white button-grade surface, neutral color. */
.page-blocks-kit .tab-link-blocks-kit.w--current {
color: var(--neutral--800);
opacity: 1;
transform: translate3d(0, 0, 0.001px) scale(1.01);
background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
border-color: #eef1f6;
box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, 0.6),
0 6px 16px rgba(25, 33, 61, 0.08);
}
/* ==========================================================================
CMS comparison (/webflow-vs-framer-vs-wordpress-cms-comparison) page tweaks
--------------------------------------------------------------------------
Page-scoped support for the sticky Table-of-contents and anchor scrolling,
driven together with setupComparisonToc() in brix-native-runtime.js.
========================================================================== */
/* Anchor targets sit clear of the top when smooth-scrolled to (and clear of the
mobile sticky TOC header bar). The 7 comparison sections are direct children
of the article card. */
.page-cms-comparison .content-table-card > div[id] {
scroll-margin-top: 100px;
}
/* Table-of-contents links: .content-table-link declares display:flex in
brixagencydev.css so the icon sits inline with its label, but the global
`.w-inline-block { display:inline-block }` shim loads AFTER brixagencydev and
wins at equal specificity — collapsing each link to inline-block, which
stacked the label BELOW the icon (the broken sidebar). Restore the flex row
with a higher-specificity selector. Same fix pattern as the dropdown links. */
.page-cms-comparison .content-table-link.w-inline-block {
display: flex;
flex-direction: row;
align-items: center;
}
/* Mobile collapsible TOC: the header arrow flips when the list is open. The
list height itself is animated inline by setupComparisonToc(). */
@media screen and (max-width: 767px) {
.page-cms-comparison .content-table-sticky .dropdown-arrow.content-table {
transition: transform .3s ease;
}
.page-cms-comparison .content-table-sticky.is-toc-open .dropdown-arrow.content-table {
transform: rotate(180deg);
}
}
/* Article images: span the full rich-text column. components.css (not loaded
here) normally resets the figure margins; without it the figure keeps the
normalize `margin: 1em 40px` inset, so every image sat 40px in from the text
on both sides — the "images don't line up with the text" symptom. Reset the
inset, let the figure fill the column, and make the image a full-width block
so it aligns flush with the paragraphs above and below it. */
.page-cms-comparison .content-table-rich-text figure.w-richtext-align-fullwidth,
.page-cms-comparison .content-table-rich-text figure.w-richtext-figure-type-image {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.page-cms-comparison .content-table-rich-text figure.w-richtext-figure-type-image > div,
.page-cms-comparison .content-table-rich-text figure.w-richtext-figure-type-image img {
width: 100%;
}
.page-cms-comparison .content-table-rich-text figure.w-richtext-figure-type-image img {
height: auto;
display: block;
}
/* Rich-text links keep the brand blue and fade on hover instead of switching to
the default red, matching the blog/inspiration article treatment. */
.page-cms-comparison .content-table-rich-text a {
color: var(--secondary--blue-200);
text-decoration: none;
transition: opacity .3s, color .3s;
}
.page-cms-comparison .content-table-rich-text a:hover {
color: var(--secondary--blue-200);
opacity: 0.6;
}
/* Body copy alignment: `body` sets text-wrap:balance globally, which the other
article variants reset (.rich-text p, .blog-rich-text p), but
.content-table-rich-text never did — so every paragraph inherited the
balanced wrap, giving the ragged, "not aligned" line breaks. Reset the whole
rich-text block to the normal greedy wrap (text-wrap is inherited, so this
cascades to its paragraphs, list items and headings). */
.page-cms-comparison .content-table-rich-text {
text-wrap: auto;
}
/* Sub-section headings (bare / inside the rich text) inherit
margin-top:0 from the base heading rules, so they sat tight against the
preceding paragraph with no breathing room. Add a clear top gap so each
sub-section reads as a new block (the section titles already carry their
own top padding via .content-table-title). */
.page-cms-comparison .content-table-rich-text h3,
.page-cms-comparison .content-table-rich-text h4 {
margin-top: var(--sizes--s8);
}
/* "Preview website" toggle: the .dropdown-preview-website modifier forces
justify-content:space-between + a 40px column gap, which (since the dropdown
wrapper is shrink-to-fit inline-block) left a large empty band between the
label and the arrow — reading as far more padding on the right than the left.
Group the icon, label and arrow tightly and centre them so the 24px side
padding looks balanced, matching the Blocks Kit toggle. */
.page-cms-comparison .button-secondary.dropdown-preview-website {
justify-content: center;
grid-column-gap: 10px;
column-gap: 10px;
padding-left: var(--sizes--s6);
padding-right: var(--sizes--s6);
}