`. */
.site-bold { font-weight: var(--pui-font-weight-700); }
.site-medium { font-weight: var(--pui-font-weight-500); }
.site-tight { letter-spacing: var(--pui-font-letter-spacing-tight); } /* the blog feature's title, as it was */
/* PREVIEW CARD (blocks/preview-card-2026 — the kit's Card as a link: blog post, case study, team member). The site's two insets and
the title clamp stand here ONCE, on the block's own classes beside the kit's, until the kit owns the link card (request 41):
the default inset space/20 with space/12 under (the case and team cards), --compact space/12 all round (the blog's). */
.preview-card { padding: var(--pui-space-20) var(--pui-space-20) var(--pui-space-12); }
.preview-card--compact { padding: var(--pui-space-12); }
.preview-card__title.site-bold { font-weight: var(--pui-font-weight-700); } /* a person's name on a link card: the kit sets the link card's title Regular at (0,2,0) — the site's Bold meets it at the same weight of selector, on the block's own class */
.preview-card--clamp .preview-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; } /* two lines of the title's 1.4 */
@media (max-width: 1023px) { .preview-card { padding: var(--pui-space-12); } } /* below the desktop width every preview card is compact (the hubs' and the team's tablet rule) */
/* ===========================================================
FOOTER (2026 design)
=========================================================== */
/* Match prototype's `html, body { overflow-x: clip }` + desktop min-width
1320 so:
- 1296-wide content (footer card) fits inside the 1320 page width
- The blob anchor reaches past the card's right edge, like in the proto
- Narrow viewports clip cleanly (no horizontal scrollbar)
Min-width only applies at desktop (≥1024); below that the responsive
tablet/mobile rules take over and need body = viewport width. */
html, body { overflow-x: clip; }
@media (min-width: 1024px) {
body { min-width: 1320px; }
}
/* .footer-2026 spans the full body width so the blob anchor inside it
reaches the viewport's right edge — matching the prototype where the
anchor was a body-width sibling of the centered footer card. */
/* THE FOOTER'S PLACE — the same on every page (Fedor, 2026-09-28: "the footer must be 100 % the same on each page"): space/128 above the card
(the primitive at every width — not the section step, which would lift the footer on a tablet and a phone), space/24 below. A page never sets the space around the footer; a page whose footer sits at the
bottom of a short window does it with `margin-top: auto` on the band and nothing else. */
.footer-2026 {
width: 100%;
margin: 0 0 var(--pui-space-24);
padding-top: var(--pui-space-128);
position: relative;
display: block;
}
:has(+ .footer-2026) { margin-bottom: 0 !important; } /* what stands before the footer ends where its box ends — the 128 is the footer's */
.footer-2026 .footer-blob-anchor {
position: relative;
height: 0;
overflow: visible;
}
.footer-2026 .footer-blob {
position: absolute;
right: 0;
bottom: -30px; /* extends 30px below the dark footer card (matches prototype's .page-contact .footer-wrap { margin-bottom: 30px }) */
width: 1000px;
height: 511px;
pointer-events: none;
z-index: 0;
max-width: none;
}
/* THE CARD IS THE KIT'S — .pui-footer (footer.css, Fedor's footer): the paint, padding 64, the columns and their 4 gap, the
headings, the links, the field's 303 and the 8 above it. The site's classes beside the kit's: .footer-2026__card (the card's
place in the band — 1296, centred, over the blob), .footer-2026__stack (the Terms + Subscription column's tablet width),
.footer-2026__awards (the third column fills the rest and centres the marks — the site's awards at their own sizes),
.footer-2026__field (the field on a phone). The two smaller widths are the site's form of the footer until the kit draws
them (request 49). */
.footer-2026 .footer-2026__card { width: 1296px; margin: 0 auto; position: relative; z-index: 1; }
.footer-2026 .footer-2026__awards { flex: 1 0 0; align-self: stretch; align-items: center; justify-content: center; }
.footer-2026 .footer__badges {
display: flex;
flex-wrap: wrap;
align-items: center;
row-gap: var(--pui-space-24);
column-gap: var(--pui-space-40); /* D — space/24 and space/40 by name; the marks' boxes (67 × 114, 48 × 82, 44 × 75) are the award images' own — stated; the marks themselves belong with the brand package, request 6 */
}
.footer-2026 .footer__badges-gptw {
display: flex;
align-items: center;
gap: var(--pui-space-12); /* D — by name */
}
.footer-2026 .footer__badge { width: 67px; height: 114px; }
.footer-2026 .footer__mga { width: 89px; height: 86px; }
.footer-2026 .footer__iab { width: 109px; height: 89px; }
.footer-2026 .footer__reddit { width: 122px; height: 118px; }
/* Badge display order. Desktop: GPTW group → MGA → IAB → Reddit (last).
Tablet/mobile flip Reddit to the front via the `order` override below. */
.footer-2026 .footer__badges-gptw { order: 1; }
.footer-2026 .footer__mga { order: 2; }
.footer-2026 .footer__iab { order: 3; }
.footer-2026 .footer__reddit { order: 4; }
/* =========================================================================
RESPONSIVE — tablet + mobile (covers nav + footer)
========================================================================= */
@media (max-width: 1023px) {
.nav-bar-wrap { top: 20px; padding: 0 var(--pui-space-32); }
.main-nav { width: 100%; max-width: 770px; }
/* Tablet — below ~849px the .main-nav drops under its 770px cap and the full
horizontal link row stops fitting, so the Contact-us CTA used to overflow /
clip past the right edge near the bottom of the tablet range. Tighten ONLY
the link spacing across the whole tablet range — inter-link gap 8→4px and
per-item horizontal padding 8→4px — so the row always fits (no overflow, no
wrapping) while justify-content:space-between still keeps a ≥16px gap between
the logo and the links (≈22px at 768px, the tightest point). Logo untouched. */
.main-nav__links { gap: var(--pui-space-4); }
/* The tightening sits on the site's classes beside the kit's (the kit has no tablet form of the bar — request 48). */
.main-nav__link { padding-left: var(--pui-space-4); padding-right: var(--pui-space-4); }
.main-nav__products { padding-right: 0; }
.main-nav__cta { margin-left: var(--pui-space-4); margin-right: var(--pui-space-4); padding-left: 6px; padding-right: 6px; }
/* Keep .footer-2026 body-width with NO side padding so the blob anchor
reaches the body's right edge (matches prototype). The 32px breathing
room moves onto the inner .footer card as side margins. */
.footer-2026 {
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
.footer-2026 .footer-2026__card { width: auto; margin: 0 var(--pui-space-32); padding: var(--pui-space-40); } /* the tablet card — the site's form: padding space/40 (request 49) */
.footer-2026 .footer-2026__stack { max-width: 320px; }
.footer-2026 .footer-2026__awards { flex: 1 1 auto; }
.footer-2026 .footer__badges {
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
row-gap: 28px;
column-gap: 28px; /* D — the tablet cluster's 28 is its own (between space/24 and space/32) — stated */
max-width: 200px;
}
.footer-2026 .footer__badges-gptw { gap: var(--pui-space-8); } /* D — by name */
.footer-2026 .footer__badge { width: 48px; height: 82px; }
.footer-2026 .footer__mga { width: 58px; height: 56px; }
.footer-2026 .footer__iab { width: 73px; height: 60px; }
/* Reddit badge — 75×73 on tablet AND mobile (this block matches both).
order:0 floats it to the top of the badge stack; desktop keeps it last. */
.footer-2026 .footer__reddit { width: 75px; height: 73px; order: 0; }
.footer-2026 .footer-blob { width: 700px; height: 358px; }
}
@media (max-width: 767px) {
.nav-bar-wrap { top: 12px; padding: 0 var(--pui-space-16); }
.main-nav { width: 100%; max-width: 100%; } /* the kit's padding (space/8 all round) stands — the site's 12 at the left went with the copied rule (2026-10-05) */
.main-nav__logo { width: 100px; height: auto; }
.main-nav__links { display: none; }
.main-nav__burger { display: flex; }
/* See tablet rule: .footer-2026 stays body-width so the blob anchor
reaches body's right edge; spacing lives on the inner .footer card. */
.footer-2026 {
padding-left: 0;
padding-right: 0;
}
.footer-2026 .footer-2026__card { margin: 0 var(--pui-space-16); flex-direction: column; padding: var(--pui-space-24); align-items: stretch; } /* the phone card — the site's form: one column, padding space/24 (request 49) */
.footer-2026 .footer-2026__card > * { flex: 1 1 100%; width: 100%; }
.footer-2026 .footer-2026__stack { max-width: none; }
.footer-2026 .footer-2026__awards { align-items: stretch; justify-content: flex-start; }
.footer-2026 .footer-2026__field { width: 100%; }
/* Mobile badges — left-aligned with a fixed 24px gap so wrapped rows pack
to the left (space-between left an oversized gap on sparse rows). */
.footer-2026 .footer__badges {
width: 100%;
max-width: 100%;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
row-gap: var(--pui-space-24);
column-gap: var(--pui-space-24); /* D — by name */
}
.footer-2026 .footer__badges-gptw { gap: var(--pui-space-8); } /* D — by name */
.footer-2026 .footer__badge { width: 44px; height: 75px; }
.footer-2026 .footer__mga { width: 58px; height: 56px; }
.footer-2026 .footer__iab { width: 71px; height: 58px; }
.footer-2026 .footer-blob {
width: 460px;
height: 235px;
}
}
/* =========================================================================
FORM CARD TITLE — site-wide STANDARD heading INSIDE a form card ("Get in
touch with us to know more"). ONE class for every 2026 form so the heading
reads the same everywhere; pages used to fork it per page
(.irtb-contact__form-title / .mafo-contact__form-title / `.form-card h3`),
which drifted apart (22px on MAFO+iRTB, 20px on Echo AI).
Usage: first child inside the
========================================================================= */
.form-success-msg {
display: none; /* hidden by default — the site's behaviour; R — request 7 shipped: the block's paint (column, gap, head, icon, title, slot, text, the on-white / on-dark / compact variants) is .pui-form-result */
}
form.is-success > :not(.form-success-msg) {
pointer-events: none;
animation: form-fields-out var(--pui-motion-menu) var(--pui-motion-easing) forwards;
}
@keyframes form-fields-out {
to { opacity: 0; display: none; }
}
form.is-success .form-success-msg,
.form-success-msg.visible {
display: flex;
animation: form-success-in 0.3s ease 0.18s both;
}
@keyframes form-success-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
form.is-success > :not(.form-success-msg) { animation: none; display: none; }
form.is-success .form-success-msg,
.form-success-msg.visible { animation: none; }
}
/* Dark-section variant — white text for a subscribe form on the DARK footer.
The green check icon is reused as-is (it reads fine on dark). */
/* Compact size — for the small inline subscribe pills (footer + blog share bar),
where the full 22/18 sizing would overpower the tight column. */
/* 18 */
/* 16 */
/* =========================================================================
VIDEO SOUND TOGGLE — site-wide STANDARD sound button for the muted autoplay
hero videos (home, MAFO, MobuppsX, i/RTB). Browsers only autoplay MUTED
video, so the voice-over is off until the visitor clicks the pill.
Muted → dark pill: speaker-off icon + "Turn on sound" (compact 32px on
videos ≤480px wide).
Sound → the kit's --icon-only (set by global-2026.js): icon-only round button, the glyph volume-2.
Hidden until wanted (YouTube-style), fading in smoothly: on mouse hover over
the video, on keyboard focus, or — touch screens have no hover — for 3s
after a tap on the video (`.is-controls-visible`, set by global-2026.js).
While hidden it ignores clicks, so a tap can't toggle sound unseen.
Selectors are scoped under `.video-sound-host` so they outrank each page's
`.page- button { background: transparent; padding: 0 }` reset.
Markup (Blade partial blocks/video-sound-2026.blade.php):
← wraps ONLY the video box
@include('blocks.video-sound-2026')
========================================================================= */
/* Compact size is keyed to the VIDEO's width, not the viewport: the product
hero video is only ~308px wide on tablet, where the full pill would cover
half of it, while the home video there is 704px and keeps the full pill. */
/* R — request 22 shipped: the host is .pui-media-host, the pill .pui-media-control — the kit paints the pill (glass-dark over blur/control, the 40 and 32 sizes, the label, the hidden-until-wanted fade, the hover step, the on-media ring); the glyph's sprite name follows the state in global-2026.js — one slot, no hidden twin */
/* C — the ink of every glyph the kit does not paint itself, bound by name (the file's colour → its token; 2026-09-25). Glyphs inside a
kit slot (.pui-card__icon, .pui-badge, .pui-icon-button, .pui-input-group__icon, .pui-select__chevron, .pui-nav-link__caret, .pui-form-result__icon) take the kit's ink. */
/* 2026-10-05 — the carets take the kit's ink (currentColor, the link's text/default); the site's text/subtle on them went with the rule on the kit's class */
/* STEP 12 · TOKENS — the site's alias names became the design system's; a typed value that equals a token is the token */