/* Responsive fixes layered ON TOP of the extracted artifact.css.
Kept in a separate file so re-running the extraction never clobbers them.
Loaded via a AFTER artifact.css in the root layouts. */
/* --- Certification / partner grid logos ---------------------------------
The logo is sized for wide desktop cards; on narrow screens the grid
cards shrink below the image width and the (overflow:hidden) card clipped
the logo (criteo / Clutch / DesignRush / SalesManago were cut off).
Constrain the image to its card while preserving aspect ratio. */
@media (max-width: 768px) {
.certimg {
display: flex;
align-items: center;
justify-content: center;
}
.certimg img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
}
/* --- Footer Criteo badge ------------------------------------------------
The Criteo logo uses dark lettering meant for light backgrounds; on the
dark footer it was illegible (its intended white box was being overridden
in the footer context). Restore the white box so it reads clearly and
matches the Google Partner badge. */
/* --- About page (/rolunk) stats band ------------------------------------
The four stats sat on the full-width grid, so the numbers read too far
apart. Tighten the band (About page only; the shared home band is left
untouched). Easy to tune via the max-width. */
.pg-rolunk .hm-statsband .container {
max-width: 900px;
}
/* --- Self-audit result radar -------------------------------------------
Give the radar more room so the numbers + area names read clearly and the
card wastes less empty space (client feedback). */
.oa-radarcard svg {
max-width: 340px;
}
/* --- Platforms grid: droplet ("Kreatív gyártás") card icon hover ----------
The 5 social-logo cards animate their .platmark on hover; the 6th card uses
an .icowrap (droplet icon). Match the same tilt so the row is consistent
(client feedback round 2). Scoped to the tagged platforms grid. */
.platgrid .card:hover .icowrap {
transform: rotate(-5deg);
border-color: var(--green-d);
}
/* --- Media wall (/referenciak): press appearances as logos in white pills ---
so colored/dark brand logos read on the dark section (client feedback r2). */
.medlogo.l-img {
background: #fff;
border-color: rgba(255, 255, 255, .9);
padding: 12px 18px;
gap: 0;
}
.medlogo.l-img img {
height: 30px;
width: auto;
display: block;
}
/* --- Stat cards: small accent icon above the number (client feedback) --------
Green accent on light sections, yellow on dark — mirrors the .stat .v color. */
.stat-ic {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
margin: 0 auto 14px;
border-radius: 12px;
background: rgba(128, 195, 66, .12);
border: 1px solid rgba(128, 195, 66, .30);
}
.stat-ic .ico {
width: 22px;
height: 22px;
color: var(--green-d);
}
.section.dark .stat-ic {
background: rgba(252, 210, 29, .13);
border-color: rgba(252, 210, 29, .32);
}
.section.dark .stat-ic .ico {
color: var(--yellow);
}
/* --- Scroll reveal, hardened against intermittent blank pages ----------------
Root cause of "the page sometimes doesn't load": the artifact starts every
.reveal element at opacity:0 and the JS (an IntersectionObserver inside a React
effect) adds .in to fade them in. That runs only AFTER hydration, so on a slow
device, a hydration hiccup, or a JS error the content stayed invisible and the
page looked blank. Three layers now guarantee content is shown:
(1) Progressive enhancement — content is VISIBLE by default; it is only hidden
(to animate in) once JS confirms it runs by adding html.js-reveal via a
synchronous inline script (see the layouts). With no or broken JS,
nothing is ever hidden, so the page can never be blank.
(2) Failsafe — that same head script starts a 1.2s timer that is INDEPENDENT of
React hydration. The reveal effect adds html.reveal-armed when it runs; if
that hasn't happened within 1.2s (hydration stalled/failed), the timer adds
html.reveal-failsafe, which force-shows everything. Healthy loads arm well
within 1.2s, so the normal on-scroll reveal is preserved.
(3) Pure-CSS backstop — even if the timer never fires, a CSS animation reveals
anything still hidden under js-reveal a little later, with zero JS. */
.reveal, .reveal-stagger > * { opacity: 1; transform: none; }
html.js-reveal .reveal:not(.in) {
opacity: 0; transform: translateY(20px);
animation: mkRevealBackstop .5s ease 2s both;
}
html.js-reveal .reveal-stagger:not(.in) > * {
opacity: 0; transform: translateY(18px);
animation: mkRevealBackstop .5s ease 2s both;
}
@keyframes mkRevealBackstop { to { opacity: 1; transform: none; } }
html.reveal-failsafe .reveal:not(.in),
html.reveal-failsafe .reveal-stagger:not(.in) > * {
opacity: 1 !important; transform: none !important; animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-stagger > *,
html.js-reveal .reveal:not(.in), html.js-reveal .reveal-stagger:not(.in) > * {
animation: none !important; opacity: 1 !important; transform: none !important;
}
}
/* Entry-products pricing grid (4 tiers, team decision 2026-09-19): keep the
original 1-column mobile behaviour that .grid-4 loses, step up to 2, then 4
on desktop. Scoped to #belepoCards so other .grid-4 grids are untouched. */
#belepoCards { grid-template-columns: 1fr; }
@media (min-width: 560px) { #belepoCards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { #belepoCards { grid-template-columns: repeat(4, 1fr); } }
/* Footer bottom row: vertically center the copyright with the legal links so
they sit on one line (the artifact's .btm had no align-items, so the plain
copyright span and the flex links span were misaligned). */
.btm { align-items: center; }
/* Footer Clutch badge is now a link (to the Clutch profile, new tab) — keep it
looking like the other image badges (no underline), with a pointer cursor. */
a.foot-badge { text-decoration: none; cursor: pointer; }
/* Tudástár e-book box: a 2-wide card with a direct e-mail field (submits as
newsletter). Left-aligned, form full width. */
.ebook-box { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.ebook-box .js-newsletter-form { width: 100%; }
/* A11y contrast (audit P10): the light-background eyebrow used var(--green-d)
(#387f2e), which fell just under 4.5:1 on the pale-green sections. Darken it
to #2f6e27 (>= 4.5:1). The on-dark eyebrow (yellow) has higher specificity,
so it is untouched. */
.eyebrow { color: #2f6e27; }
/* Audit "A kimenet" (review 2026-09-24): stack the copy ABOVE a full-width,
larger audit gallery (was a cramped 2-column slider). Keeps .crv-gallery so
the slider JS still runs. */
.crv.crv-stacked { grid-template-columns: 1fr; }
.crv.crv-stacked .crv-txt { order: 1; max-width: 760px; }
.crv.crv-stacked .crv-stage { order: 2; width: 100%; max-width: 860px; margin: 6px auto 0; }
.crv.crv-stacked .crv-illustr { order: 3; margin: 10px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
/* Consent readability (review 2026-09-24): the contact/order/career forms are
WHITE cards inside a .dark section, but the .dark rule painted the consent
text light grey (var(--on-dark-muted)) → unreadable on white. On the white
.mform card use the dark muted ink + green link. (E-book boxes are
.js-newsletter-form, not .mform, so they keep their already-correct colours.) */
.mform .mform-consent, .dark .mform .mform-consent { color: var(--muted); }
.mform .mform-consent a, .dark .mform .mform-consent a { color: var(--green-d); }
/* Mobile fixes verified at 375px (review 2026-09-24). These only manifest on the
mobile menu / narrow layout, which is why a desktop check misses them. */
/* #1 The service-group titles ("Fizetett hirdetés", "Content, SEO…", "Mérés…")
are white-50% for the DARK desktop mega-menu, but the MOBILE menu panel is
white → they were invisible. Give them a dark, readable colour on mobile. */
.mobile-menu .mega-col-title { color: #46514a !important; }
/* #3 The e-book consent checkbox inherited min-width:220px from the form's input
sizing, so it stretched to 220px on mobile. Pin it to a real checkbox size. */
.mform-consent input[type="checkbox"],
.mform-consent .mform-consent-cb { width: 16px; min-width: 16px; flex: 0 0 16px; }
/* #2 The "Markestic vs. typical agency" comparison grid was 349px wide inside a
325px container (overflow-x:hidden) → the Markestic column clipped. On narrow
screens let the three columns share the width (wrap instead of clip). */
@media (max-width: 430px) {
.hm-cmp { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr) minmax(0, 1.18fr) !important; }
.hm-cmp > * { padding-left: 6px !important; padding-right: 6px !important; }
}