; the heading kept its own
default margins inside it, stacking with the wrapper's to leave a gap between
a card's title and the copy underneath. */
.destination-wrapper .content .content__title > :first-child,
.content__title > h1, .content__title > h2,
.content__title > h3, .content__title > h4 {
margin: 0;
}
/* --- Story block -------------------------------------------------------------
/our-story/why-vibes/ — narrative rows that reuse the Text With Image layout.
`style` is `square` on one row and `landscape` on the rest; constrain the
image accordingly so a portrait-ish source does not tower over its copy. */
.vibemap-story-block__row--square .vibemap-text-with-image__image img {
aspect-ratio: 1 / 1;
object-fit: cover;
}
.vibemap-story-block__row--landscape .vibemap-text-with-image__image img {
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* The copy carries its own
; give it the same rhythm as other sections. */
.vibemap-story-block__row .vibemap-text-with-image__text > h2:first-child {
margin-top: 0;
}
/* --- Vibe sets --------------------------------------------------------------
/our-story/our-vibe-sets/. Three fixes over the ported Gatsby rules:
1. The intro paragraph sat in a `column is-4`, so a two-sentence lead-in
rendered as a ~350px ribbon under a full-width heading. It is now full
width, capped at a reading measure.
2. The type had no scale of its own — the vibeset name, its tagline and its
description all landed near body size, so nothing led the eye.
3. `.main-vibes` was #999 on white (2.8:1) and carried 40px of margin top and
bottom, which detached it from the entry it belongs to.
========================================================================== */
.vibemap-vibesets-block__intro {
max-width: 46rem;
margin: 0 0 var(--sp-large, 56px);
font-size: var(--fs-medium, 1rem);
line-height: 1.7;
}
.vibemap-vibesets-block__intro > p:last-child {
margin-bottom: 0;
}
.vibemap-vibesets-block .vibeset {
padding: var(--sp-base) 0;
}
.vibemap-vibesets-block .vibeset:first-of-type {
border-top: 0;
padding-top: 0;
}
/* Name — the entry point for each block. */
.vibemap-vibesets-block .vibeset .text-column h3 {
font-family: var(--family-serif);
font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
line-height: 1.2;
margin: 0 0 6px;
}
/* Tagline — one line, sits directly under the name. */
.vibemap-vibesets-block .vibeset .tag {
font-weight: 600;
font-size: 1rem;
line-height: 1.5;
margin: 0 0 var(--sp-text, 16px);
color: var(--color-black);
}
.vibemap-vibesets-block .vibeset .text-column .wysiwyg-content {
margin-bottom: 0;
line-height: 1.7;
}
.vibemap-vibesets-block .vibeset .text-column .wysiwyg-content > p:last-child {
margin-bottom: 0;
}
/* Main vibes — a caption for the entry above it, not a separate paragraph. */
.vibemap-vibesets-block .vibeset .main-vibes {
margin: var(--sp-text, 16px) 0 0;
font-size: 0.875rem;
line-height: 1.5;
color: var(--color-grey, #6f6f6f);
}
/* Line the copy up with the middle of the circle on wide screens. */
@media (min-width: 769px) {
.vibemap-vibesets-block .vibeset > .columns {
align-items: center;
}
.vibemap-vibesets-block .vibeset .text-column {
padding-left: var(--sp-item, 24px);
}
}
@media (max-width: 768px) {
.vibemap-vibesets-block .vibeset {
padding: var(--sp-item, 32px) 0;
text-align: center;
}
.vibemap-vibesets-block__intro {
margin-bottom: var(--sp-item, 32px);
}
}
/* ==========================================================================
Logo marquee
--------------------------------------------------------------------------
A self-scrolling strip of partner logos. Used by the partner Highlight
Block, the vibemap/logo-marquee block and the "Partner Logos" pattern.
The track holds the logo list twice and slides exactly -50%, which is one
full list, so the second copy sits where the first began and the loop is
seamless with no JavaScript. Each logo's box is sized in PHP for constant
optical area, and arrives as --vm-logo-w / --vm-logo-h.
========================================================================== */
.vm-logo-marquee {
--vm-marquee-duration: 60s;
--vm-logo-gap: 56px;
width: 100%;
}
.vm-logo-marquee__heading {
text-align: center;
margin: 0 0 var(--sp-item, 32px);
}
/* Clips the track and fades both ends so logos enter and leave rather than
being chopped off at a hard edge. */
.vm-logo-marquee__viewport {
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.vm-logo-marquee__track {
display: flex;
width: max-content;
animation: vm-logo-marquee-scroll var(--vm-marquee-duration) linear infinite;
}
.vm-logo-marquee__list {
display: flex;
align-items: center;
gap: var(--vm-logo-gap);
margin: 0;
padding: 0 calc(var(--vm-logo-gap) / 2);
list-style: none;
}
/* The item is a window onto the artwork, not a box the artwork is fitted into.
PHP sizes it to the mark and passes the scaled image size plus the offset
that brings the mark into view, so padding baked into a logo file is cropped
away instead of shrinking the mark. */
.vm-logo-marquee__item {
flex: 0 0 auto;
position: relative;
overflow: hidden;
width: var(--vm-logo-w, 112px);
height: var(--vm-logo-h, 112px);
margin: 0;
}
.vm-logo-marquee__item a {
position: absolute;
inset: 0;
display: block;
line-height: 0;
text-decoration: none;
}
.vm-logo-marquee__item img {
position: absolute;
left: var(--vm-img-x, 0);
top: var(--vm-img-y, 0);
width: var(--vm-img-w, 100%);
height: var(--vm-img-h, 100%);
max-width: none;
display: block;
}
@keyframes vm-logo-marquee-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* Let a reader stop the strip to look at, or click, a logo. */
.vm-logo-marquee__viewport:hover .vm-logo-marquee__track,
.vm-logo-marquee__viewport:focus-within .vm-logo-marquee__track {
animation-play-state: paused;
}
/* Too few logos to fill the row — centre them and leave them still. */
.vm-logo-marquee.is-static .vm-logo-marquee__track {
animation: none;
width: 100%;
justify-content: center;
}
.vm-logo-marquee.is-static .vm-logo-marquee__list[aria-hidden="true"] {
display: none;
}
.vm-logo-marquee.is-static .vm-logo-marquee__viewport {
-webkit-mask-image: none;
mask-image: none;
}
/* Reduced motion: no animation. The strip becomes an ordinary horizontal
scroller, still without a visible scrollbar. */
@media (prefers-reduced-motion: reduce) {
.vm-logo-marquee__track {
animation: none;
width: auto;
}
.vm-logo-marquee__list[aria-hidden="true"] {
display: none;
}
.vm-logo-marquee__viewport {
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
overscroll-behavior-x: contain;
}
.vm-logo-marquee__viewport::-webkit-scrollbar {
display: none;
}
}
@media (max-width: 768px) {
.vm-logo-marquee {
--vm-logo-gap: 36px;
}
}
/* The 302px circle was setting each row's height while the copy beside it ran
to about half that, so every row carried ~75px of dead space above and below
its own text. A smaller circle closes the gap without shrinking the type. */
@media (min-width: 1030px) {
.vibemap-vibesets-block .vibeset .video-container {
width: 220px;
height: 220px;
}
}
@media (min-width: 769px) and (max-width: 1029px) {
.vibemap-vibesets-block .vibeset .video-container {
width: 190px;
height: 190px;
}
}
/* --- Text beside a tall image ------------------------------------------------
The two columns were centred against each other. When the photo is far taller
than its copy — /terms/ pairs an 862px image with a 302px block, /download/ a
868px phone shot with four lines — the text floated in the middle of the row
with a few hundred pixels of nothing above it.
Top-aligning puts the copy level with the top of the image, which is how the
rest of the site's two-column rows read. */
.vibemap-text-with-image > .container > .columns {
align-items: flex-start;
}
.vibemap-text-with-image__content {
padding-top: 0;
}
/* Dropped straight into a page (rather than inside a partner section, which
brings its own padding) the marquee had nothing between it and the footer. */
.entry-content > .vm-logo-marquee,
.wp-block-post-content > .vm-logo-marquee {
margin-top: var(--sp-base);
margin-bottom: var(--sp-base);
}
/* --- Partner section: full bleed, everywhere ---------------------------------
Inside a legacy partner section the strip sat in a `.container` — max-width
1430px with 80px of side padding — so it ran 1270px wide inside a bordered,
rounded card, while the same strip dropped into a page ran edge to edge. Two
different-looking things from one component.
Clearing the container's own constraints is enough to reach full bleed: the
section it sits in is already the full width of the page. Doing it with
`100vw` would overshoot by the width of the scrollbar and add a horizontal
scroll. */
.vibemap-highlight-block--partner > .container {
max-width: none;
padding-left: 0;
padding-right: 0;
}
/* The strip is its own visual band; the card chrome around it read as a stray
box on the page. */
.vibemap-highlight-block--partner {
border: 0;
border-radius: 0;
padding-top: var(--sp-item);
padding-bottom: var(--sp-item);
}
.vibemap-highlight-block--partner .vibemap-highlight-block__heading {
margin-bottom: var(--sp-item);
}
/* The section's own heading and copy still need the page's side padding —
only the logo track goes edge to edge. */
.vibemap-highlight-block--partner .vibemap-highlight-block__heading,
.vibemap-highlight-block--partner .vibemap-highlight-block__text {
max-width: var(--width-wide);
margin-left: auto;
margin-right: auto;
padding-left: var(--sp-large);
padding-right: var(--sp-large);
}
/* The quotes slider carried 2rem of padding below its own prev/next buttons,
which already sit 1.5rem clear of the quote. Stacked with the section's
35px, that left ~100px of empty page between the last quote and whatever
follows it — most visibly above the partner strip on /our-partners/. */
.vibemap-quotes-block-section__slider {
padding-bottom: 0;
}
/* Following a section, the strip does not need a full 40px of its own on top —
the section above already ends with padding. */
.entry-content > .vm-logo-marquee:first-child,
.wp-block-post-content > .vm-logo-marquee:first-child {
margin-top: var(--sp-small);
}
/* An embed's intro line sits between its heading and the widget. */
.vibemap-embed__intro {
max-width: 46rem;
margin: calc(-1 * var(--sp-tiny)) 0 var(--sp-item);
line-height: 1.7;
}
.vibemap-embed__intro > p:last-child {
margin-bottom: 0;
}
/* --- Highlight cards: the "feature" variant ---------------------------------
The default highlight card caps its image at 180px, which suits a small icon
above a line of text. A card that leads with an illustration wants the image
to fill the card and sit flush against its top edge, with the copy below.
Only `default` and `partner` were in use, so this adds a third rather than
changing how existing cards look. */
.vibemap-highlight-block--feature .vibemap-highlight-block__card {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
border-radius: 14px;
text-decoration: none !important;
transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.22s ease;
}
.vibemap-highlight-block--feature .vibemap-highlight-block__card-image {
max-width: none;
width: 100%;
margin: 0;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--color-subtle-grey);
}
.vibemap-highlight-block--feature .vibemap-highlight-block__card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vibemap-highlight-block--feature .vibemap-highlight-block__card-body {
padding: var(--sp-item) var(--sp-item) var(--sp-base);
text-align: left;
flex: 1;
}
.vibemap-highlight-block--feature .vibemap-highlight-block__card-title {
margin: 0 0 var(--sp-text);
}
.vibemap-highlight-block--feature .vibemap-highlight-block__card-text {
color: var(--color-grey);
line-height: 1.6;
}
/* Only a card that links anywhere should respond to the pointer. */
a.vibemap-highlight-block__card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.35);
}
.vibemap-highlight-block--feature a.vibemap-highlight-block__card:hover
.vibemap-highlight-block__card-image img {
transform: scale(1.04);
}
/* A linked card ends with a cue that it goes somewhere. */
.vibemap-highlight-block--feature a.vibemap-highlight-block__card .vibemap-highlight-block__card-body::after {
content: 'Learn more →';
display: block;
margin-top: var(--sp-text);
font-size: 0.875rem;
font-weight: 700;
color: var(--color-black);
}
@media (prefers-reduced-motion: reduce) {
.vibemap-highlight-block--feature .vibemap-highlight-block__card,
.vibemap-highlight-block--feature .vibemap-highlight-block__card-image img {
transition: none;
}
a.vibemap-highlight-block__card:hover {
transform: none;
}
}