html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
#hero-video {
transform: translateZ(0);
backface-visibility: hidden;
}
.footer-circle-svg.boabo-anim-off,
.animate-marquee.boabo-anim-off {
animation-play-state: paused !important;
}
/* Hero: first screen fills the viewport. */
#home > section.min-h-screen {
min-height: 100vh;
min-height: 100dvh;
min-height: 100svh;
}
/* Testimonials ? Projektek alatti szekci? */
#testimonials-section {
overflow: hidden;
background: transparent;
}
#testimonials-section #testimonials-root {
position: relative;
width: 100%;
}
.testimonials-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.testimonials-headline {
margin: 0;
text-align: center;
}
.testimonials-header-rating {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin-top: 1.25rem;
}
@media (min-width: 640px) {
.testimonials-header-rating {
flex-direction: row;
gap: 0.6rem;
}
}
@media (min-width: 640px) {
.testimonials-header-rating {
margin-top: 2rem;
}
}
.testimonials-header-stars {
display: flex;
gap: 0.375rem;
}
.testimonials-header-rating-link {
color: #0a0a0a;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
text-decoration: underline;
text-underline-offset: 0.2em;
transition: color 0.2s ease;
}
.testimonials-header-rating-link:hover {
color: #374151;
}
@media (min-width: 640px) {
.testimonials-header-rating-link {
font-size: 15px;
}
}
.testimonials-carousel {
position: relative;
isolation: isolate;
--testimonials-card-h: auto;
}
.testimonials-card-measurer {
position: absolute;
visibility: hidden;
pointer-events: none;
left: 0;
top: 0;
z-index: -1;
overflow: visible;
}
.testimonials-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: none;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
border: 1px solid #d1d5db;
border-radius: 9999px;
background: #fff;
color: #0a0a0a;
cursor: pointer;
z-index: 20;
box-shadow: none;
transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.testimonials-nav-btn:hover {
background: #0a0a0a;
border-color: #0a0a0a;
color: #fff;
}
@media (min-width: 768px) {
.testimonials-nav-btn {
display: flex;
}
.testimonials-nav-btn--prev {
left: -1.25rem;
}
.testimonials-nav-btn--next {
right: -1.25rem;
}
}
@media (min-width: 1024px) {
.testimonials-nav-btn--prev {
left: -2rem;
}
.testimonials-nav-btn--next {
right: -2rem;
}
}
.testimonials-carousel-viewport {
overflow: hidden;
width: 100%;
min-height: var(--testimonials-card-h, 320px);
}
@media (max-width: 767px) {
.testimonials-carousel-viewport {
overflow-x: hidden;
overflow-y: visible;
}
.testimonials-card {
height: auto !important;
}
.testimonials-card-inner {
height: auto !important;
min-height: 0 !important;
}
}
.testimonials-cards-track {
display: flex;
align-items: stretch;
--testimonials-gap: 1.5rem;
gap: var(--testimonials-gap);
will-change: transform;
}
@media (min-width: 768px) {
.testimonials-cards-track {
--testimonials-gap: 1.625rem;
}
}
@media (min-width: 1024px) {
.testimonials-cards-track {
--testimonials-gap: 1.75rem;
}
}
.testimonials-card {
display: flex;
flex-direction: column;
flex: 0 0 100%;
min-width: 0;
height: var(--testimonials-card-h, auto);
}
@media (min-width: 768px) {
.testimonials-card {
flex-basis: calc((100% - var(--testimonials-gap)) / 2);
}
}
@media (min-width: 1024px) {
.testimonials-card {
flex-basis: calc((100% - (2 * var(--testimonials-gap))) / 3);
}
}
.testimonials-card-inner {
display: flex;
flex-direction: column;
flex: 1 1 auto;
height: 100%;
min-height: var(--testimonials-card-h, auto);
border: 1px solid #d1d5db;
border-radius: 24px;
padding: 2.25rem 2rem 2rem;
background: #fff;
box-shadow: none;
}
.testimonials-card-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.625rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid #f3f4f6;
}
.testimonials-stars {
display: flex;
gap: 0.375rem;
}
.testimonials-rating {
color: #111827;
font-size: 15px;
font-weight: 600;
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}
.testimonials-author-meta {
display: flex;
flex-direction: column;
justify-content: center;
}
.testimonials-quote {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
margin: 0 0 1.75rem;
font-size: 16px;
line-height: 1.7;
color: #1f2937;
}
.testimonials-quote-mark-open,
.testimonials-quote-body,
.testimonials-quote-ellipsis,
.testimonials-quote-mark-close {
display: inline;
}
@media (min-width: 640px) {
.testimonials-quote {
font-size: 17px;
}
}
@media (min-width: 1024px) {
.testimonials-quote {
font-size: 15px;
}
}
.testimonials-author {
display: flex;
align-items: center;
gap: 1.125rem;
margin-top: auto;
}
.testimonials-author-img {
width: 56px;
height: 56px;
border-radius: 9999px;
object-fit: cover;
flex-shrink: 0;
border: 2px solid #f3f4f6;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.testimonials-author-name {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.25;
color: #111827;
margin-bottom: 0.25rem;
}
.testimonials-author-role {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: 14px;
color: #6b7280;
}
@media (prefers-reduced-motion: reduce) {
.testimonials-cards-track {
transition: none !important;
}
}
@media (min-width: 1024px) {
#services-container {
box-sizing: border-box;
padding-inline: 10px;
}
#home .hero-mobile-fill {
justify-content: flex-end !important;
}
}
:root {
--text: #12161c;
--text_light: #6c737d;
--accent: #000000;
--border: #d5d9e0;
--background: #FFFFFF;
--background_light: #F5F5F5;
--font: "Inter", Arial, sans-serif;
--font-text: "Inter", Arial, sans-serif;
--font-accent: "Inter", Arial, sans-serif;
--font-body: "Inter", Arial, sans-serif;
--fs-hero: clamp(2.35rem, 6.2vw, 3.75rem);
--fs-h2: clamp(2rem, 3.5vw, 2.56rem);
--fs-h3: clamp(1.35rem, 2vw, 1.75rem);
--fs-body: 16px;
--fs-btn: 16px;
--fs-small: 14px;
--fs-label: 12px;
--lh-body: 1.5;
--ls-tight: -0.02em;
--ls-hero: -0.035em;
--radius-pill: 100px;
--ease: 0.2s ease;
--header-h: 84px;
--color-text-1: #12161c;
--color-text-2: #3a414c;
--color-black: #000000;
--color-white: #ffffff;
--service-detail-duration: 0.52s;
/* Nyit?s (csak ha a sz?lo .active): mobilon fel?l?rva; z?r?s mindig --service-detail-duration */
--service-detail-open-duration: 0.52s;
--service-detail-ease: cubic-bezier(0.22, 1, 0.36, 1);
--btn-font-size: 16px;
--btn-padding-y: 0.8rem;
--btn-padding-x: 1.3em;
--btn-min-width: 0;
--btn-min-height: 50px;
--btn-radius: 100px;
}
html {
font-family: "Inter", Arial, sans-serif;
}
body, button, input, textarea, select {
font-size: var(--fs-body);
line-height: var(--lh-body) !important;
letter-spacing: -0.36px;
color: var(--text);
font-family: var(--font-text);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--background);
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6,
.cranez-heading {
margin: 0 0 0.54em;
font-weight: 400;
color: var(--accent);
font-family: var(--font-accent);
font-style: normal;
letter-spacing: var(--ls-tight);
text-transform: none;
}
h1, .cranez-h1 { font-size: var(--fs-hero); line-height: 1.08; letter-spacing: var(--ls-hero); }
h2, .cranez-h2 { font-size: var(--fs-h2); line-height: 1.18; }
h3, .cranez-h3 { font-size: var(--fs-h3); line-height: 1.15; }
h4, .cranez-h4 { font-size: var(--fs-h3); line-height: 1.15; }
h5, .cranez-h5 { font-size: 1.125rem; line-height: 1.2; }
h6, .cranez-h6 { font-size: var(--fs-small); line-height: 1.4; }
.cranez-body { font-size: 18px; line-height: 1.55; font-family: var(--font-text); color: var(--color-text-2); }
.cranez-body-sm { font-size: 14px; line-height: 1.45; }
.cranez-label { font-size: 12px; font-weight: 500; letter-spacing: 0.32px; text-transform: uppercase; }
.cranez-nav { font-size: 16px; font-family: var(--font-accent); font-weight: 400; letter-spacing: -0.36px; text-transform: none; }
.cranez-btn { font-size: var(--btn-font-size); font-weight: 400; letter-spacing: -0.36px; text-transform: none; font-family: "Inter", Arial, sans-serif; padding: var(--btn-padding-y) var(--btn-padding-x); min-width: var(--btn-min-width); min-height: var(--btn-min-height); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--btn-radius); }
.text-outline-dark { -webkit-text-stroke: 1px #333; color: transparent; }
.text-gradient-accent { background: linear-gradient(135deg, #00D4FF 0%, #CC00FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }
.animate-marquee { animation: marquee 20s linear infinite; }
/* Mobile menu (HIGHBB): full-screen frosted panel slides in from the right */
body.mnav-open { overflow: hidden; }
.mobile-menu-root { z-index: 140 !important; }
.mobile-menu-panel {
--mnav-ease: cubic-bezier(0.76, 0, 0.24, 1);
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
color: #000;
transform: translateX(100%);
transition: transform 0.8s var(--mnav-ease);
will-change: transform;
padding-top: env(safe-area-inset-top, 0);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-menu-inner {
padding-left: max(1.5rem, env(safe-area-inset-left, 0));
padding-right: max(1.5rem, env(safe-area-inset-right, 0));
}
.mobile-menu-root.mobile-menu-open { pointer-events: auto; }
.mobile-menu-root.mobile-menu-open .mobile-menu-panel { transform: translateX(0); }
.mobile-menu-link-wrap { overflow: hidden; padding: 0.25rem 0; }
.mobile-menu-link {
display: inline-block;
font-family: "Inter", Arial, sans-serif;
font-size: calc(clamp(2.25rem, 10vw, 3rem) - 4px);
font-weight: 400;
letter-spacing: -0.025em;
line-height: 1.1;
color: #000 !important;
text-decoration: none;
transform: translateX(20%);
opacity: 0;
transition:
transform 0.8s cubic-bezier(0.76, 0, 0.24, 1),
opacity 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.mobile-menu-root.mobile-menu-open .mobile-menu-link {
transform: translateX(0);
opacity: 1;
}
.mobile-menu-root.mobile-menu-open .mobile-menu-link-wrap:nth-child(1) .mobile-menu-link { transition-delay: 0.2s; }
.mobile-menu-root.mobile-menu-open .mobile-menu-link-wrap:nth-child(2) .mobile-menu-link { transition-delay: 0.25s; }
.mobile-menu-root.mobile-menu-open .mobile-menu-link-wrap:nth-child(3) .mobile-menu-link { transition-delay: 0.3s; }
.mobile-menu-root.mobile-menu-open .mobile-menu-link-wrap:nth-child(4) .mobile-menu-link { transition-delay: 0.35s; }
@media (hover: hover) {
.mobile-menu-root.mobile-menu-open .mobile-menu-link:hover {
transform: translateX(0.75rem);
}
}
.mobile-menu-side {
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.76, 0, 0.24, 1);
transition-delay: 0s;
}
.mobile-menu-root.mobile-menu-open .mobile-menu-side {
opacity: 1;
transition-delay: 0.5s;
}
.mobile-menu-side-heading {
margin: 0 0 1rem;
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #888;
}
.mobile-menu-side-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.mobile-menu-side-link {
font-family: "Inter", Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #000;
text-decoration: none;
transition: opacity 0.2s ease;
}
.mobile-menu-side-link:hover { opacity: 0.7; }
.mobile-menu-side-address {
margin: 0;
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: 12px;
line-height: 1.5;
color: rgba(0, 0, 0, 0.7);
}
/* Hamburger: 2 lines ? X (HIGHBB motion) */
.hamburger-btn {
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
}
@media (max-width: 1023px) {
.hamburger-btn { display: inline-flex; }
}
.hamburger-icon-wrap { pointer-events: none; }
.hamburger-line {
position: absolute;
left: 50%;
top: 50%;
display: block;
width: 34px;
height: 1px;
margin-left: -17px;
border-radius: 1px;
background: currentColor;
transform-origin: center center;
transition:
transform 0.6s cubic-bezier(0.76, 0, 0.24, 1),
background-color 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.hamburger-line--top { transform: translateY(-4px) rotate(0deg); }
.hamburger-line--bot { transform: translateY(4px) rotate(0deg); }
.hamburger-btn.hamburger-btn--open .hamburger-line--top { transform: translateY(0) rotate(45deg); }
.hamburger-btn.hamburger-btn--open .hamburger-line--bot { transform: translateY(0) rotate(-45deg); }
@media (max-width: 1023px) {
body.mnav-open .hamburger-btn { color: #000; }
body.mnav-open .navbar-brand-logo { filter: brightness(0); }
body.mnav-open .hero-music-indicator-btn,
body.mnav-open .hero-nav-audio-lines-svg { color: #000; }
}
@media (prefers-reduced-motion: reduce) {
.mobile-menu-panel,
.mobile-menu-link,
.mobile-menu-side,
.hamburger-line {
transition-duration: 0.15s !important;
}
.mobile-menu-root.mobile-menu-open .mobile-menu-link-wrap .mobile-menu-link { transition-delay: 0s !important; }
}
/* ur-style footer container */
.container-custom {
width: 100%;
max-width: 80rem;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.container-custom { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
.container-custom { padding-left: 2rem; padding-right: 2rem; }
}
footer[role="contentinfo"] .icon-svg { display: block; }
/* HE/App.tsx Footer ? back-to-top visible (global rule hides .back-to-top-btn) */
footer#contact.site-footer-he .site-footer-he-backtop.back-to-top-btn {
display: flex !important;
}
/* Footer rotating circle button */
.footer-circle-svg {
animation: footer-circle-spin 10s linear infinite;
transform-origin: center;
}
.footer-circle-btn:hover .footer-circle-svg {
animation-duration: 5s;
}
@keyframes footer-circle-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Footer link hover underline ? same as portfolio card title */
.footer-hover-link {
position: relative;
display: inline-block;
padding-bottom: 3px;
}
.footer-hover-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background-color: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.28s ease-out;
pointer-events: none;
}
.footer-hover-link:hover::after {
transform: scaleX(1);
transform-origin: left center;
}
/* === Dripbo-style 3D flip links === */
.footer-dripbo-flip {
position: relative;
display: block;
width: max-content;
overflow: hidden;
text-decoration: none !important;
color: rgba(255,255,255,0.6);
transition: color 0.3s ease;
border: none;
background: transparent;
padding: 0;
text-align: left;
font-weight: 500;
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
cursor: pointer;
}
.footer-dripbo-flip:hover { color: rgba(255,255,255,1); }
.footer-dripbo-flip .fdfl-inner {
position: relative;
perspective: 1000px;
display: block;
padding: 2px 0;
}
.footer-dripbo-flip .fdfl-top {
display: block;
transform-origin: bottom center;
transform: translateY(0) rotateX(0deg);
opacity: 1;
transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.5s cubic-bezier(0.76, 0, 0.24, 1);
white-space: nowrap;
line-height: 1;
}
.footer-dripbo-flip:hover .fdfl-top {
transform: translateY(-100%) rotateX(90deg);
opacity: 0;
}
.footer-dripbo-flip .fdfl-bot {
position: absolute;
inset: 0;
display: flex;
align-items: center;
transform-origin: top center;
transform: translateY(100%) rotateX(-90deg);
opacity: 0;
transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.5s cubic-bezier(0.76, 0, 0.24, 1);
white-space: nowrap;
line-height: 1;
}
.footer-dripbo-flip:hover .fdfl-bot {
transform: translateY(0) rotateX(0deg);
opacity: 1;
}
/* Muted variant (bottom bar) */
.footer-dripbo-flip.fdfl-muted {
color: rgba(255,255,255,0.4);
font-weight: normal;
}
.footer-dripbo-flip.fdfl-muted:hover { color: rgba(255,255,255,1); }
/* Email link ? underline disappears on hover */
.footer-dripbo-email-underline {
display: block;
margin-top: 2px;
overflow: hidden;
}
.footer-dripbo-email-underline::after {
content: '';
display: block;
border-bottom: 1px solid rgba(255,255,255,0.6);
clip-path: inset(0 0 0 0);
transition: clip-path 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.footer-dripbo-flip:hover .footer-dripbo-email-underline::after {
clip-path: inset(0 100% 0 0);
}
/* CTA button: Globallers .btn on dark — white pill, scale 0.95, flip label */
.footer-dripbo-cta {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 100px;
border: 1.5px solid #fff;
background: #fff;
padding: 0.8rem 1.3em;
min-height: 50px;
font-size: 16px;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.36px;
color: #000;
cursor: pointer;
margin-top: 24px;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
font-family: "Inter", Arial, sans-serif;
}
.footer-dripbo-cta:hover {
background: transparent;
color: #fff;
border: 1.5px solid #fff;
transform: none;
}
@media (min-width: 768px) {
.footer-dripbo-cta { margin-top: 32px; }
}
.footer-dripbo-cta .fdfl-inner {
position: relative;
perspective: 1000px;
}
.footer-dripbo-cta .fdfl-top {
display: block;
transform-origin: bottom center;
transform: translateY(0) rotateX(0deg);
opacity: 1;
transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.5s cubic-bezier(0.76, 0, 0.24, 1);
white-space: nowrap;
}
.footer-dripbo-cta:hover .fdfl-top {
transform: translateY(-100%) rotateX(90deg);
opacity: 0;
}
.footer-dripbo-cta .fdfl-bot {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
transform-origin: top center;
transform: translateY(100%) rotateX(-90deg);
opacity: 0;
transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.5s cubic-bezier(0.76, 0, 0.24, 1);
white-space: nowrap;
}
.footer-dripbo-cta:hover .fdfl-bot {
transform: translateY(0) rotateX(0deg);
opacity: 1;
}
footer#contact.site-footer-he p {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}
/* Quote video: show full frame (no blend/crop) */
.quote-video-wrap { margin: 0; }
.quote-video-wrap .quote-side-video {
display: block;
width: 100%;
max-width: 100%;
height: auto;
vertical-align: top;
object-fit: contain;
object-position: center;
}
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
@keyframes spin_10s { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-\[spin_10s_linear_infinite\] { animation: spin_10s 10s linear infinite; }
::selection { background: linear-gradient(135deg, #00D4FF 0%, #CC00FF 100%); color: white; }
.btn-cta {
font-family: "Inter", Arial, sans-serif;
font-size: var(--btn-font-size);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.36px;
text-transform: none;
text-align: center;
padding: var(--btn-padding-y) var(--btn-padding-x);
min-width: 0;
min-height: var(--btn-min-height);
border-radius: var(--btn-radius);
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 0;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
}
.btn-cta:hover {
transform: none;
}
.btn-cta:not(#get-started-trigger):not(.get-in-touch-nav-btn),
.form-feedback-close-btn,
#get-started-panel .get-started-submit-request,
.service-our-services-bar .btn-faq,
.startup-plan-cta,
#pricing-plan-section .pricing-dripbo-btn,
.discover-more-btn,
.get-started-nav,
.footer-dripbo-cta {
line-height: 1.2 !important;
}
/* Same capsule as Globallers .btn, site-wide (navbar excluded below) */
#footer-get-started-trigger,
#faq .faq-pagination-btn,
.form-feedback-close-btn,
#get-started-panel .get-started-submit-request,
.service-our-services-bar .btn-faq {
font-family: "Inter", Arial, sans-serif;
font-size: var(--btn-font-size);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.36px;
text-transform: none;
padding: var(--btn-padding-y) var(--btn-padding-x);
min-width: 0;
min-height: var(--btn-min-height);
border-radius: var(--btn-radius);
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-gradient {
position: relative;
overflow: hidden;
background: #fff;
border: 1.5px solid #0a0a0a;
transition: background 0.35s ease, border-color 0.35s ease;
}
.btn-gradient::before {
content: '';
position: absolute;
inset: 0;
background: #0a0a0a;
z-index: 0;
clip-path: inset(0 0 0 0);
transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-gradient:hover {
background: #fff;
border-color: #0a0a0a;
}
.btn-gradient:hover::before {
clip-path: inset(0 0 0 100%);
}
.btn-gradient:hover .btn-cta-text { color: #0a0a0a !important; }
.btn-cta .btn-cta-text {
position: relative;
z-index: 1;
font-size: inherit;
font-weight: 400;
line-height: inherit;
letter-spacing: inherit;
text-transform: none;
transition: transform 0.35s ease, color 0.35s ease;
}
.btn-cta:hover .btn-cta-text {
transform: scale(0.96);
}
.btn-cta-stroke {
position: relative;
overflow: hidden;
background: transparent !important;
border: 0.5px solid currentColor;
color: inherit;
}
.btn-cta-stroke::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
background: #fff;
z-index: 0;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: inherit;
}
.btn-cta-stroke:hover {
filter: none;
border-color: transparent;
color: #0a0a0a;
}
.btn-cta-stroke:hover .btn-cta-text { color: #0a0a0a !important; }
.btn-cta-stroke:hover::before {
width: 100%;
}
.btn-cta-stroke .btn-cta-text,
.btn-cta-stroke > * {
position: relative;
z-index: 1;
}
.btn-cta-stroke:hover .btn-cta-text {
transform: scale(0.96);
}
.btn-cta-about.btn-gradient:hover { border-color: #0a0a0a; }
.btn-cta-about.btn-gradient:hover .btn-cta-text { color: #0a0a0a !important; }
.get-started-submit-btn:hover { border-color: #0a0a0a; }
.add-user-btn-plus { transition: transform 0.2s ease; color: #fff; }
.add-user-btn.btn-gradient::before { clip-path: inset(0 0 0 0); transition: background 0.35s ease; background: #0a0a0a; }
.add-user-btn.btn-gradient:hover::before { clip-path: inset(0 0 0 0); background: #fff; }
.add-user-btn.btn-gradient:hover { border-color: #0a0a0a; }
.add-user-btn.btn-gradient:hover .add-user-btn-plus { color: #0a0a0a !important; }
.add-user-btn.btn-gradient:hover .add-user-btn-plus [data-lucide] { color: #0a0a0a !important; stroke: #0a0a0a !important; }
/* White-on-dark CTA: Old Boabo invert (white fill → ghost + white text) */
.btn-cta-white-on-dark {
background: #fff !important;
border: 1.5px solid #fff;
box-shadow: none;
color: #0a0a0a !important;
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.btn-cta-white-on-dark .btn-cta-text { color: #0a0a0a !important; }
.btn-cta-white-on-dark:hover {
background: transparent !important;
border-color: #fff;
color: #fff !important;
}
.btn-cta-white-on-dark:hover .btn-cta-text { color: #fff !important; }
/* Hero CTA with arrow (Explore Works): arrow-right motion; JS --in / --out */
.hero-cta-arrow-link .hero-cta-arrow-icon {
position: relative;
z-index: 1;
transition: color 0.35s ease;
}
.hero-cta-arrow-link .hero-explore-arrow-svg .hero-explore-arrow-right-line {
transform-box: fill-box;
transform-origin: 0% 50%;
}
.hero-cta-arrow-link.hero-explore-arrow--in .hero-explore-arrow-right-line {
animation: hero-explore-arrow-line-pulse 0.35s ease forwards;
}
.hero-cta-arrow-link.hero-explore-arrow--in .hero-explore-arrow-right-head {
animation: hero-explore-arrow-head-pulse 0.35s ease forwards;
}
.hero-cta-arrow-link.hero-explore-arrow--out .hero-explore-arrow-right-line {
animation: hero-explore-arrow-line-pulse 0.35s ease reverse forwards;
}
.hero-cta-arrow-link.hero-explore-arrow--out .hero-explore-arrow-right-head {
animation: hero-explore-arrow-head-pulse 0.35s ease reverse forwards;
}
@keyframes hero-explore-arrow-line-pulse {
0% { transform: scaleX(1); }
50% { transform: scaleX(calc(9 / 14)); }
100% { transform: scaleX(1); }
}
@keyframes hero-explore-arrow-head-pulse {
0% { transform: translateX(0); }
50% { transform: translateX(-3px); }
100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-cta-arrow-link.hero-explore-arrow--in .hero-explore-arrow-right-line,
.hero-cta-arrow-link.hero-explore-arrow--in .hero-explore-arrow-right-head,
.hero-cta-arrow-link.hero-explore-arrow--out .hero-explore-arrow-right-line,
.hero-cta-arrow-link.hero-explore-arrow--out .hero-explore-arrow-right-head {
animation: none !important;
}
}
/* Ghost on dark: Old Boabo invert (outline → white fill + black text) */
.btn-cta-get-in-touch {
background: transparent !important;
border: 1.5px solid #fff;
box-shadow: none;
color: #fff !important;
transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.btn-cta-get-in-touch .btn-cta-text { color: #fff !important; }
.btn-cta-get-in-touch:hover {
background: #fff !important;
border-color: #fff;
color: #0a0a0a !important;
}
.btn-cta-get-in-touch:hover .btn-cta-text { color: #0a0a0a !important; }
.btn-cta-hero-discover {
background: #fff !important;
border: 1.5px solid #fff;
box-shadow: none;
color: #0a0a0a !important;
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.btn-cta-hero-discover .btn-cta-text { color: #0a0a0a !important; }
.btn-cta-hero-discover:hover {
background: transparent !important;
border-color: #fff;
color: #fff !important;
}
.btn-cta-hero-discover:hover .btn-cta-text { color: #fff !important; }
.btn-cta-mobile-discover {
background: #fff !important;
border: 1.5px solid #fff;
box-shadow: none;
color: #0a0a0a !important;
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.btn-cta-mobile-discover .btn-cta-text { color: #0a0a0a !important; }
.btn-cta-mobile-discover:hover {
background: transparent !important;
border-color: #fff;
color: #fff !important;
}
.btn-cta-mobile-discover:hover .btn-cta-text { color: #fff !important; }
/* Black pill: Old Boabo invert (black fill → white fill + black text) */
.btn-cta-learn-more {
background: #0a0a0a !important;
border: 1.5px solid #0a0a0a;
box-shadow: none;
color: #fff !important;
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.btn-cta-learn-more .btn-cta-text { color: #fff !important; }
.btn-cta-learn-more:hover {
background: #fff !important;
border-color: #0a0a0a;
color: #0a0a0a !important;
}
.btn-cta-learn-more:hover .btn-cta-text { color: #0a0a0a !important; }
.about-cta-find.btn-cta-learn-more {
position: relative;
overflow: hidden;
gap: 0;
padding-left: var(--btn-padding-x);
padding-right: var(--btn-padding-x);
transform: scaleX(1);
transform-origin: center center;
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, padding 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86), transform 0.3s;
}
.about-cta-find.btn-cta-learn-more:hover,
.about-cta-find.btn-cta-learn-more:focus-visible {
background: #0a0a0a !important;
border-color: #0a0a0a;
color: #fff !important;
}
@media (pointer: fine) {
.about-cta-find.btn-cta-learn-more:hover,
.about-cta-find.btn-cta-learn-more:focus-visible {
transform: scaleX(1.02);
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, padding 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86), transform 0.7s cubic-bezier(0.34, 3.56, 0.64, 1);
}
.about-cta-find:hover .about-cta-label > span,
.about-cta-find:focus-visible .about-cta-label > span {
transform: translateY(-105%);
}
}
.about-cta-find.is-cta-inview {
padding-right: 3.5rem;
}
.about-cta-find .btn-cta-text {
transform: translate3d(0, 0, 0);
overflow: hidden;
transition: transform 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86), color 0.35s ease;
}
.about-cta-find.is-cta-inview .btn-cta-text {
transform: translate3d(-8px, 0, 0);
color: #fff !important;
}
.about-cta-find:hover .btn-cta-text,
.about-cta-find:focus-visible .btn-cta-text {
color: #fff !important;
transform: translate3d(-8px, 0, 0);
}
.about-cta-find .about-cta-label > span {
position: relative;
display: block;
white-space: nowrap;
transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-cta-find .about-cta-label > span::after {
content: attr(data-text);
display: block;
position: absolute;
top: 105%;
left: 0;
right: 0;
}
.about-cta-find .about-cta-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
margin: 0;
border-radius: 50%;
background: #fff;
flex-shrink: 0;
position: absolute;
right: 1rem;
top: 50%;
z-index: 2;
overflow: hidden;
transform: translate3d(0, -50%, 0) scale(0);
transform-origin: center center;
transition: transform 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 0s;
pointer-events: none;
}
.about-cta-find.is-cta-inview .about-cta-icon {
transform: translate3d(0, -50%, 0) scale(1);
transition-delay: 0.18s;
}
.about-cta-find .about-cta-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
line-height: 0;
width: 16px;
height: 16px;
color: #0a0a0a;
overflow: hidden;
transform: translate3d(-2.3rem, 0, 0);
transition: transform 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 0s;
}
.about-cta-find.is-cta-inview .about-cta-arrow {
transform: translate3d(0, 0, 0);
transition-delay: 0.18s;
}
.about-cta-find .about-cta-arrow-svg,
.about-cta-find .about-cta-arrow-svg svg {
display: block;
width: 16px;
height: 16px;
color: #0a0a0a;
stroke: #0a0a0a;
fill: none;
flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
.about-cta-find.btn-cta-learn-more,
.about-cta-find .btn-cta-text,
.about-cta-find .about-cta-label > span,
.about-cta-find .about-cta-icon,
.about-cta-find .about-cta-arrow {
transition: none;
transition-delay: 0s;
animation: none;
transform: none;
}
}
/* Shop unlock stat tagline */
.shop-stat-tagline {
font-size: 15px;
}
@media (min-width: 1024px) {
.shop-stat-tagline {
font-size: 17px;
}
}
.add-user-btn.btn-cta-learn-more {
width: var(--btn-min-height) !important;
min-width: var(--btn-min-height) !important;
height: var(--btn-min-height) !important;
padding: 0 !important;
background: #0a0a0a !important;
border-width: 2px;
border-color: #fff;
transition: background 0.35s ease, border-color 0.35s ease;
}
.add-user-btn.btn-cta-learn-more:hover {
background: #171717 !important;
border-color: #fff;
transform: none;
}
.add-user-btn.btn-cta-learn-more:hover .btn-cta-text {
transform: none;
}
.add-user-btn.btn-cta-learn-more .add-user-btn-plus,
.add-user-btn.btn-cta-learn-more i {
color: #fff !important;
stroke: #fff !important;
transition: transform 0.25s ease, color 0.25s ease;
}
.add-user-btn.btn-cta-learn-more:hover .add-user-btn-plus,
.add-user-btn.btn-cta-learn-more:hover i {
color: #fff !important;
stroke: #fff !important;
transform: scale(1.15);
}
/* Visit our store: Old Boabo invert (outline → white fill) */
.btn-cta-visit-store {
position: relative;
overflow: hidden;
background: transparent !important;
border: 1.5px solid #fff;
box-shadow: none;
color: #fff !important;
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.btn-cta-visit-store::before { display: none; }
.btn-cta-visit-store .btn-cta-text,
.btn-cta-visit-store span { position: relative; z-index: 1; }
.btn-cta-visit-store:hover {
background: #fff !important;
border-color: #fff;
color: #0a0a0a !important;
}
.btn-cta-visit-store:hover .btn-cta-text { color: #0a0a0a !important; }
.btn-cta-send-message.btn-gradient {
background: #0a0a0a !important;
border: 1.5px solid #0a0a0a;
color: #fff;
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.btn-cta-send-message.btn-gradient::before { display: none; }
.btn-cta-send-message.btn-gradient .btn-cta-text { color: #fff !important; }
.btn-cta-send-message.btn-gradient:hover {
background: #fff !important;
border-color: #0a0a0a;
}
.btn-cta-send-message.btn-gradient:hover .btn-cta-text { color: #0a0a0a !important; }
/* Read details: arrow shifts on hover; text color unchanged */
.read-details-arrow-link {
color: #111827;
text-decoration: none;
}
.read-details-arrow-text {
display: inline-block;
}
.read-details-arrow-link svg {
color: #111827;
transition: transform 0.25s ease;
}
.read-details-arrow-link:hover svg {
color: #111827;
transform: translateX(4px);
}
.section-headline-72 { font-family: "Inter", Arial, sans-serif; font-weight: 400; font-size: var(--fs-h2); line-height: 1.18; letter-spacing: var(--ls-tight); }
.section-headline-shop { font-size: var(--fs-h2) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: var(--ls-tight) !important; }
.section-headline-aeonik { font-family: "Inter", Arial, sans-serif; font-weight: 400 !important; font-size: var(--fs-h2); line-height: 1.18; letter-spacing: var(--ls-tight); text-transform: none; }
.section-headline-aeonik-uppercase { font-family: "Inter", Arial, sans-serif; font-weight: 400 !important; font-size: var(--fs-h2); line-height: 1.18; letter-spacing: var(--ls-tight); text-transform: none; }
.services-scroll-scene {
position: relative;
}
#services-container { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 1024px) {
#services-container { flex-direction: row; gap: 0.5rem; }
#services-container .service-pane { flex: 1; transition: flex 0.5s ease; min-width: 0; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
#services-container .service-pane:hover, #services-container .service-pane.service-pane-open { flex: 2.125; }
#services-container .service-pane .service-pane-cta-wrap { font-size: 14.4px; font-weight: 500; line-height: 1; text-transform: none; letter-spacing: -0.3px; color: #fff; }
#services-container .service-pane .service-pane-price-label,
#services-container .service-pane .service-pane-price-value { display: none !important; }
#services-container .service-pane .service-pane-cta-wrap .service-pane-cta-arrow,
#services-container .service-pane .service-pane-cta-wrap .service-pane-cta-arrow svg {
width: 14.4px !important;
height: 14.4px !important;
}
#services-container .service-pane .service-pane-title {
font-family: "Inter", Arial, sans-serif !important;
font-size: 30px !important;
font-weight: 500 !important;
line-height: 1.25 !important;
letter-spacing: -0.02em !important;
text-transform: none !important;
transition: color 0.35s ease;
}
#services-container .service-pane .service-pane-desc {
font-size: 16px !important;
}
}
@media (max-width: 1023px) {
#services-container {
gap: 0.9rem;
align-items: stretch;
box-sizing: border-box;
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
}
#services-container .service-pane { border: 1px solid rgba(255,255,255,0.45); border-radius: 24px; overflow: hidden; min-height: 280px; width: 100%; max-width: 100%; }
#services-container .service-pane .service-pane-img { filter: none; opacity: 0.9; }
#services-container .service-pane:hover .service-pane-img,
#services-container .service-pane.service-pane-open .service-pane-img { filter: none; opacity: 1; }
#services-container .service-pane .service-pane-title-row { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; }
#services-container .service-pane .service-pane-title { color: #fff !important; font-size: 26px !important; font-weight: 500 !important; text-transform: none !important; }
#services-container .service-pane .service-pane-hover-copy { display: none !important; }
#services-container .service-pane:hover .service-pane-hover-copy,
#services-container .service-pane.service-pane-open .service-pane-hover-copy { display: grid !important; }
#services-container .service-pane .service-pane-label { opacity: 0 !important; visibility: hidden !important; }
#services-container .service-pane .service-pane-price-wrap,
#services-container .service-pane .service-pane-price-label,
#services-container .service-pane .service-pane-price-value { display: none !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
#services-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
#services-container { padding-left: 3rem; padding-right: 3rem; }
}
.service-pane .service-pane-img { opacity: 0.9; transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease; filter: none; }
@media (min-width: 1024px) {
.service-pane .service-pane-img { filter: none; }
.service-pane:hover .service-pane-img, .service-pane.service-pane-open .service-pane-img { filter: none; transform: scale(1.1); opacity: 1; }
}
@media (max-width: 1023px) {
.service-pane:hover .service-pane-img, .service-pane.service-pane-open .service-pane-img { opacity: 1; transform: scale(1.05); }
}
.services-scroll-scene #services-container {
--services-ease: cubic-bezier(0.16, 1, 0.3, 1);
--services-duration: 0.95s;
flex-direction: column;
gap: 2rem;
width: 100%;
height: auto !important;
min-height: 0 !important;
margin: 0 auto;
}
.services-scroll-scene #services-container .service-pane {
width: 100%;
flex: none;
min-height: clamp(220px, 42vh, 380px);
border-radius: 22px;
border: none;
transition: min-height var(--services-duration) var(--services-ease);
}
.services-scroll-scene #services-container .service-pane:hover,
.services-scroll-scene #services-container .service-pane.service-pane-open {
flex: none;
}
.services-scroll-scene #services-container .service-pane::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 4;
box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
}
.services-scroll-scene #services-container .service-pane.service-pane-open {
min-height: clamp(380px, 52vh, 560px);
}
@media (min-width: 768px) {
.services-scroll-scene #services-container .service-pane {
min-height: clamp(280px, 36vh, 380px);
}
.services-scroll-scene #services-container .service-pane.service-pane-open {
min-height: clamp(420px, 48vh, 560px);
}
.services-scroll-scene #services-container .service-pane::after {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
}
.service-pane-fill {
position: absolute;
inset: 0;
background: #141414;
border-radius: inherit;
}
.service-pane.service-pane-open .service-pane-fill {
background: #050505;
}
.service-pane-media {
position: absolute;
inset: 0;
opacity: 0.95;
pointer-events: none;
border-radius: inherit;
overflow: hidden;
}
.service-pane-shade {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(5, 5, 5, 0.18) 0%, rgba(5, 5, 5, 0.42) 55%, rgba(5, 5, 5, 0.58) 100%),
rgba(0, 0, 0, 0.12);
border-radius: inherit;
}
@media (min-width: 768px) {
.service-pane-shade {
background: linear-gradient(
to right,
rgba(5, 5, 5, 0.88) 0%,
rgba(5, 5, 5, 0.62) 42%,
transparent 100%
);
}
}
.services-scroll-scene .service-pane .service-pane-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
opacity: 0.52;
filter: brightness(1.15);
transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px) {
.services-scroll-scene .service-pane .service-pane-img { opacity: 0.82; }
}
@media (min-width: 1024px) {
.services-scroll-scene .service-pane.service-pane-open .service-pane-img { transform: scale(1.1); }
}
.service-pane .service-pane-icon-wrap { display: none !important; }
.service-pane .service-pane-title {
margin: 0;
color: #fff;
font-family: "Inter", Arial, sans-serif;
font-weight: 500;
text-transform: none;
letter-spacing: -0.02em;
transition: color 0.35s ease;
white-space: nowrap;
}
.service-pane.service-pane-open .service-pane-title { color: #fff; }
.service-pane .service-pane-price-wrap {
flex-shrink: 0;
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
pointer-events: auto;
}
.service-pane .service-pane-price-label {
display: none;
margin: 0 0 0.25rem;
}
.service-pane .service-pane-meta-row {
display: flex;
align-items: center;
width: 100%;
gap: 1rem;
}
.service-pane .service-pane-title-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.service-pane-hover-copy {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
grid-template-rows 0.95s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}
.service-pane-hover-copy-inner {
min-height: 0;
overflow: hidden;
}
.service-pane:hover .service-pane-hover-copy,
.service-pane.service-pane-open .service-pane-hover-copy {
grid-template-rows: 1fr;
opacity: 1;
}
.services-scroll-scene .service-pane:hover .service-pane-hover-copy {
grid-template-rows: 0fr;
opacity: 0;
}
.services-scroll-scene .service-pane.service-pane-open .service-pane-hover-copy {
grid-template-rows: 1fr;
opacity: 1;
}
.service-pane .service-pane-desc {
margin: 0.7rem 0 0;
color: #fff;
font-size: 16px;
font-family: "Inter", Arial, sans-serif;
font-weight: 400;
line-height: 1.5;
max-height: none;
overflow: hidden;
transform: translateY(22px);
transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-pane:hover .service-pane-desc,
.service-pane.service-pane-open .service-pane-desc {
transform: translateY(0);
}
.services-scroll-scene .service-pane:hover .service-pane-desc {
transform: translateY(22px);
}
.services-scroll-scene .service-pane.service-pane-open .service-pane-desc {
transform: translateY(0);
}
.service-pane .service-pane-line { display: none; }
.service-pane .service-pane-bottom-row {
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 2.5rem;
width: 100%;
}
.service-pane .service-pane-price-value,
.service-pane .service-pane-price-label,
.service-pane .service-pane-price-wrap {
display: none !important;
}
.service-pane.service-pane-open .service-pane-meta-row {
justify-content: space-between;
align-items: center;
}
.service-pane .service-pane-label { display: none; }
.service-pane .service-pane-cta-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
flex: 0 0 auto;
width: auto;
min-width: 0;
max-width: none;
height: auto;
min-height: 45px;
padding: 0.72rem 1.17em;
box-sizing: border-box;
overflow: hidden;
position: relative;
color: #fff;
font-size: 14.4px;
font-weight: 500;
line-height: 1;
text-transform: none;
letter-spacing: -0.36px;
white-space: nowrap;
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 100px;
cursor: pointer;
font-family: "Inter", Arial, sans-serif;
transform: none;
transition: padding 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@keyframes service-cta-wrap-in {
from { transform: translateY(8px); }
to { transform: translateY(0); }
}
@keyframes service-cta-label-in {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-2px, 0, 0); }
}
@keyframes service-cta-icon-in {
from { transform: translate3d(0, -50%, 0) scale(0); }
to { transform: translate3d(0, -50%, 0) scale(1); }
}
@keyframes service-cta-arrow-in {
from { transform: translate3d(-2.3rem, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
.service-pane:hover .service-pane-cta-wrap,
.service-pane.service-pane-open .service-pane-cta-wrap,
.service-pane:focus-visible .service-pane-cta-wrap {
animation: service-cta-wrap-in 0.28s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
padding-right: 2.88rem;
}
.services-scroll-scene .service-pane:hover .service-pane-cta-wrap {
animation: none;
transform: none;
padding-right: 2.88rem;
}
.services-scroll-scene .service-pane.service-pane-open .service-pane-cta-wrap,
.services-scroll-scene .service-pane:focus-visible .service-pane-cta-wrap {
animation: service-cta-wrap-in 0.28s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
}
.service-pane-cta-label {
display: inline-block;
flex-shrink: 0;
overflow: visible;
position: relative;
z-index: 1;
color: #fff;
text-transform: none;
font-weight: 400;
line-height: 1;
transform: translate3d(0, 0, 0);
transition: transform 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.service-pane:hover .service-pane-cta-label,
.service-pane.service-pane-open .service-pane-cta-label,
.service-pane:focus-visible .service-pane-cta-label {
animation: service-cta-label-in 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
}
.services-scroll-scene .service-pane:hover .service-pane-cta-label {
animation: none;
transform: translate3d(-2px, 0, 0);
}
.services-scroll-scene .service-pane.service-pane-open .service-pane-cta-label,
.services-scroll-scene .service-pane:focus-visible .service-pane-cta-label {
animation: service-cta-label-in 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
}
.service-pane-cta-icon {
display: flex;
align-items: center;
justify-content: center;
width: 1.8rem;
height: 1.8rem;
margin: 0;
border-radius: 50%;
background: #fff;
border: 1px solid #fff;
color: #0a0a0a;
-webkit-backdrop-filter: none;
backdrop-filter: none;
flex-shrink: 0;
position: absolute;
right: 0.85rem;
top: 50%;
z-index: 2;
overflow: hidden;
transform: translate3d(0, -50%, 0) scale(0);
transform-origin: center center;
transition: transform 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86);
pointer-events: none;
}
.service-pane:hover .service-pane-cta-icon,
.service-pane.service-pane-open .service-pane-cta-icon,
.service-pane:focus-visible .service-pane-cta-icon {
animation: service-cta-icon-in 0.28s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.04s both;
}
.services-scroll-scene .service-pane:hover .service-pane-cta-icon {
animation: none;
transform: translate3d(0, -50%, 0) scale(1);
}
.services-scroll-scene .service-pane.service-pane-open .service-pane-cta-icon,
.services-scroll-scene .service-pane:focus-visible .service-pane-cta-icon {
animation: service-cta-icon-in 0.28s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.04s both;
}
.service-pane .service-pane-cta-wrap .service-pane-cta-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
line-height: 0;
width: 14.4px;
height: 14.4px;
color: #0a0a0a;
overflow: hidden;
transform: translate3d(-2.3rem, 0, 0);
transition: transform 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.service-pane:hover .service-pane-cta-wrap .service-pane-cta-arrow,
.service-pane.service-pane-open .service-pane-cta-wrap .service-pane-cta-arrow,
.service-pane:focus-visible .service-pane-cta-wrap .service-pane-cta-arrow {
animation: service-cta-arrow-in 0.28s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.04s both;
}
.services-scroll-scene .service-pane:hover .service-pane-cta-wrap .service-pane-cta-arrow {
animation: none;
transform: translate3d(0, 0, 0);
}
.services-scroll-scene .service-pane.service-pane-open .service-pane-cta-wrap .service-pane-cta-arrow,
.services-scroll-scene .service-pane:focus-visible .service-pane-cta-wrap .service-pane-cta-arrow {
animation: service-cta-arrow-in 0.28s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.04s both;
}
.service-pane .service-pane-cta-wrap .service-pane-cta-arrow svg {
display: block;
width: 14.4px;
height: 14.4px;
color: #0a0a0a;
stroke: #0a0a0a;
fill: none;
flex-shrink: 0;
}
.service-pane .service-pane-price-label {
margin: 0;
flex-shrink: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.25;
letter-spacing: normal;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.service-pane-price-label {
font-size: 14px;
font-weight: 600;
letter-spacing: normal;
line-height: 1.25;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.service-pane:focus, .service-pane:focus-visible { outline: none; box-shadow: none; }
/* WORKS: k?z?pre z?rt k?toszlopos k?rtyas?v (box sz?less?g: max 1480px) */
#portfolio .portfolio-works-grid-shell,
#how-we-work-section .portfolio-works-grid-shell {
margin-left: auto;
margin-right: auto;
}
/* Portf?li? modal: fekete LIVE, 1px al?h?z?s; hover: vonal jobbr?l ?sszeh?z?dik (ugyanaz a 1px mint a szurokn?l) */
.portfolio-modal-live-und-link {
position: relative;
display: inline-block;
color: #0a0a0a !important;
padding-bottom: 2px;
text-decoration: none;
transition: color 0.2s ease, opacity 0.2s ease;
}
.portfolio-modal-live-und-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background-color: #0a0a0a;
transform: scaleX(1);
transform-origin: left center;
transition: transform 0.35s ease;
pointer-events: none;
}
.portfolio-modal-live-und-link:hover {
color: #0a0a0a !important;
opacity: 0.9;
}
/* Jobbr?l balra tunik: bal r?gz?tett, scaleX(0) a jobb sz?lt h?zza balra */
.portfolio-modal-live-und-link:hover::after {
transform: scaleX(0);
}
button.portfolio-modal-live-und-link {
-webkit-appearance: none;
appearance: none;
}
#service-detail-panel .portfolio-modal-hero-frame,
#service-detail-panel a.portfolio-modal-hero-link.portfolio-modal-hero-frame {
display: block;
width: 100%;
aspect-ratio: var(--boabo-key-visual-aspect-ratio, 21 / 14.3);
max-height: var(--boabo-key-visual-max-height, min(calc(420px * 1.43), calc(55vh * 1.43)));
overflow: hidden;
}
#service-detail-panel .portfolio-modal-hero-link {
display: block;
-webkit-tap-highlight-color: transparent;
}
#service-detail-panel .portfolio-modal-hero-frame .service-detail-panel-key-visual,
#service-detail-panel .portfolio-modal-hero-link img.service-detail-panel-key-visual {
display: block;
width: 100%;
height: 100%;
max-height: none !important;
aspect-ratio: unset;
object-fit: cover;
object-position: center;
transform-origin: center;
}
#service-detail-panel .portfolio-modal-hero-link img {
display: block;
width: 100%;
transform-origin: center;
}
@media (max-width: 1023px) {
.navbar-outer { border-bottom: none !important; }
}
body.get-started-panel-open #mobile-menu-btn {
z-index: 90 !important;
pointer-events: none !important;
}
@media (max-width: 1023px) {
body.get-started-panel-open #get-started-contact-modal {
z-index: 200 !important;
}
body.get-started-panel-open .nav-shell-hero-headline-width {
display: none !important;
}
}
.hero-headline-aeonik { font-family: "Inter", Arial, sans-serif; font-weight: 500 !important; text-transform: none; letter-spacing: -0.02em; }
.hero-headline-text { font-size: 50px; line-height: 1; letter-spacing: -0.02em; overflow: visible; margin-bottom: 0; }
@media (min-width: 768px) {
.hero-headline-text { font-size: 80px; line-height: 80px; letter-spacing: -1.43px; }
}
@media (min-width: 1024px) {
.hero-headline-text { font-size: 74px; line-height: 74px; }
}
@media (max-width: 767px) {
.hero-headline-line3 { white-space: nowrap; }
#hero-music-indicator { display: none !important; }
.hero-cta-buttons .hero-cta-services,
.hero-cta-buttons .hero-cta-discover { display: none !important; }
.hero-headline-col { padding-top: 2rem; }
#services-container .service-pane .service-pane-img { filter: none !important; }
.services-scroll-scene #services-container .service-pane .service-pane-img { filter: brightness(1.15) !important; }
#services-container .service-pane .service-pane-price-label { display: none !important; }
#hero-music-float .hero-music-float-audio-svg,
#hero-music-float .hero-nav-audio-lines-svg { width: 16px !important; height: 16px !important; }
}
@media (min-width: 1024px) {
#hero-music-float .hero-music-float-audio-svg,
#hero-music-float .hero-nav-audio-lines-svg { width: 18px !important; height: 18px !important; }
}
@media (min-width: 1024px) {
.hero-headline-text .hero-headline-line1,
.hero-headline-text .hero-headline-line2,
.hero-headline-text .hero-headline-line3,
.hero-headline-text .hero-headline-line2-wrap,
.hero-headline-text .hero-headline-into {
white-space: nowrap;
}
}
.hero-headline-line1,
.hero-headline-line2,
.hero-headline-line3,
.hero-headline-mobile-line1,
.hero-headline-mobile-line2 {
display: block;
overflow: hidden;
padding-bottom: 0.22em;
margin-bottom: -0.14em;
white-space: nowrap;
}
@media (max-width: 720px) {
.hero-headline-line1,
.hero-headline-line2,
.hero-headline-line3,
.hero-headline-mobile-line1,
.hero-headline-mobile-line2 {
padding-bottom: 0.2em;
margin-bottom: -0.1em;
}
}
@media (max-width: 767px) { .hero-intro-text { font-size: 20px !important; line-height: 1.2 !important; } }
.hero-intro-text {
font-family: "Inter", Arial, sans-serif;
font-size: 20px;
line-height: 1.2;
font-weight: 400 !important;
letter-spacing: normal;
}
@media (min-width: 768px) {
.hero-intro-text { font-size: 21.45px !important; line-height: 25.74px !important; }
}
@media (min-width: 1024px) {
.hero-intro-text { font-size: 17.45px !important; }
}
#home .hero-headline-col .hero-lower-block,
#home .hero-intro-phone-only {
margin-top: 0.15rem !important;
}
.hero-play-bg-img { display: block; pointer-events: none; }
.hero-play-btn { position: relative; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; }
.hero-play-btn .hero-play-icon-wrap,
.hero-play-btn .hero-play-label-wrap { isolation: isolate; position: absolute; inset: 0; z-index: 10; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; }
.hero-play-btn .hero-play-svg,
.hero-play-btn .hero-pause-svg { fill: #fff !important; stroke: #fff !important; color: #fff !important; }
.hero-play-btn .hero-play-label { color: #fff !important; }
.hero-play-btn .hero-play-icon { fill: #fff !important; stroke: #fff !important; color: #fff !important; }
.hero-play-svg,
.hero-pause-svg { fill: #fff !important; stroke: #fff !important; }
.hero-play-label { color: #fff !important; }
/* Play/Pause label: fit inside button, no overflow on any viewport */
.hero-play-label-wrap { overflow: hidden; }
.hero-play-label {
font-size: 8px !important;
line-height: 1 !important;
letter-spacing: 0.05em !important;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
}
@media (min-width: 640px) {
.hero-play-label { font-size: 9px !important; letter-spacing: 0.08em !important; }
}
@media (min-width: 1024px) {
.hero-play-label { font-size: 10px !important; letter-spacing: 0.1em !important; }
}
@media (max-width: 767px) {
.hero-play-btn { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; }
.hero-play-btn .hero-play-icon { width: 10px !important; height: 10px !important; }
}
@media (min-width: 640px) {
.hero-play-btn { width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; }
.hero-play-btn .hero-play-icon { width: 14px !important; height: 14px !important; }
}
.hero-headline-into { padding-left: 48px; }
@media (max-width: 767px) { .hero-headline-into { padding-left: 40px; } }
@media (min-width: 640px) { .hero-headline-into { padding-left: 68px; } }
@media (min-width: 1024px) { .hero-headline-into { padding-left: 0; } }
@media (max-width: 767px) {
.hero-play-btn:hover { transform: translateY(-50%) scale(1); }
.hero-play-btn .group-hover\:scale-110 { transform: none; }
.hero-play-icon-wrap { opacity: 1 !important; }
.hero-play-icon-wrap.group-hover\:opacity-0 { opacity: 1 !important; }
.hero-play-label-wrap { display: none !important; }
}
/* Mobile headline play: no hover effect ? static border, play/pause icons only */
@media (max-width: 1023px) {
#hero-play-btn-mobile:hover {
transform: translateY(-50%) scale(1) !important;
border-color: rgba(255, 255, 255, 0.4) !important;
}
}
/* Hero music: navbar + floating = same audio-lines SVG (SMIL + pauseAnimations); float uses accent blue */
.hero-music-indicator-btn {
position: relative;
-webkit-tap-highlight-color: transparent;
}
.hero-music-indicator .hero-nav-audio-lines-svg {
display: block;
color: #ffffff;
}
.hero-music-indicator .hero-nav-audio-lines-svg path {
stroke: currentColor !important;
color: #ffffff !important;
}
/* Floating control (md+): same waveform as navbar, brand accent blue */
.hero-music-float .hero-nav-audio-lines-svg,
.hero-music-float .hero-music-float-audio-svg {
display: block;
color: #ffffff;
}
.hero-music-float .hero-nav-audio-lines-svg path,
.hero-music-float .hero-music-float-audio-svg path {
stroke: currentColor !important;
color: #ffffff !important;
}
@media (max-width: 767px) {
.hero-music-indicator .hero-nav-audio-lines-svg {
width: 1.25rem !important;
height: 1.25rem !important;
}
}
@media (min-width: 1024px) {
.hero-music-indicator .hero-nav-audio-lines-svg,
.hero-music-float .hero-nav-audio-lines-svg {
width: 20px;
height: 20px;
}
}
#home .nav-home-actions #hero-music-indicator {
opacity: 1 !important;
pointer-events: auto !important;
}
/* Navbar zene gomb: a pulz?l? transform ne l?gjon ki (ne okozzon v?zszintes ?g?rgeto? / vizu?lis zajt) */
#home .nav-home-actions #hero-music-indicator .hero-music-indicator-btn {
overflow: hidden;
border-radius: 9999px;
width: 1.75rem;
height: 1.75rem;
flex-shrink: 0;
}
@media (min-width: 1024px) {
#home .nav-home-actions #hero-music-indicator .hero-music-indicator-btn {
width: 1.25rem;
height: 1.25rem;
}
}
/* Navbar + lebego zene gomb: hover feh?r ? sz?rke */
.hero-music-indicator-btn .hero-nav-audio-lines-svg {
transition: color 0.2s ease;
}
.hero-music-indicator .hero-music-indicator-btn:hover .hero-nav-audio-lines-svg,
.hero-music-indicator .hero-music-indicator-btn:focus-visible .hero-nav-audio-lines-svg,
.hero-music-float .hero-music-indicator-btn:hover .hero-nav-audio-lines-svg,
.hero-music-float .hero-music-indicator-btn:focus-visible .hero-nav-audio-lines-svg {
color: #cccccc !important;
}
.hero-music-indicator .hero-music-indicator-btn:hover .hero-nav-audio-lines-svg path,
.hero-music-indicator .hero-music-indicator-btn:focus-visible .hero-nav-audio-lines-svg path,
.hero-music-float .hero-music-indicator-btn:hover .hero-nav-audio-lines-svg path,
.hero-music-float .hero-music-indicator-btn:focus-visible .hero-nav-audio-lines-svg path {
stroke: currentColor !important;
color: #cccccc !important;
}
/* Mobile: keep music in the nav row, directly beside the hamburger (not fixed / overlapping) */
@media (max-width: 767px) {
#home .nav-home-actions #hero-music-indicator.hero-music-indicator {
position: static !important;
inset: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
z-index: auto !important;
margin: 0 !important;
}
#home .nav-home-actions {
gap: 0.5rem !important;
flex-wrap: nowrap;
}
#home .nav-home-actions > div.flex.shrink-0:first-of-type {
display: contents;
}
/* Mobil: ha a lebego zene gomb l?tszik (g?rget?s ut?n), ne duplik?ljuk a nav sorban */
#home .nav-home-actions #hero-music-indicator.hero-music-indicator--float-replaces-nav {
visibility: hidden !important;
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
pointer-events: none !important;
}
}
/* Lebego zene: lefel? g?rgetve a lap alj?ig l?tszik; felfel? a r?gi f?loldalas szab?ly (viewCenter < halfPage) */
.hero-music-float {
transition: opacity 0.35s ease;
mix-blend-mode: difference;
}
.hero-music-float.hero-music-float--visible {
opacity: 1 !important;
pointer-events: auto !important;
}
@media (max-width: 767px) {
.hero-play-label-wrap { display: none !important; }
}
/* Store: push bullet list slightly down toward "Join 50+..." */
.shop-managed-list {
margin-top: 1.25rem;
font-size: 14px;
}
@media (min-width: 640px) {
.shop-managed-list {
margin-top: 1.5rem;
font-size: 16px;
}
}
/* Store card description text 2px smaller */
.store-card-desc-sm { font-size: 16px !important; }
@media (min-width: 640px) { .store-card-desc-sm { font-size: 18px !important; } }
@media (min-width: 1024px) { .store-card-desc-sm { font-size: 18px !important; } }
/* .hero-lower-block: no global margin ? spacing from Tailwind mt-* on each block */
@media (max-width: 1023px) {
.hero-headline-aeonik, .hero-headline-text, .hero-headline-into, .hero-headline-aeonik .hero-headline-text span { color: #fff !important; }
}
@media (max-width: 1023px) {
.hero-award-logo { display: none !important; }
.hero-right-col { align-items: flex-start !important; text-align: left !important; }
.hero-projects-row { justify-content: flex-start !important; margin-top: 1.5rem !important; }
}
@media (max-width: 767px) {
#home .hero-mobile-fill {
display: flex;
flex-direction: column;
justify-content: flex-start !important;
flex: 1 1 auto;
min-height: 0;
padding-top: 1.25rem;
padding-bottom: 0;
}
#home .hero-mobile-fill .hero-mobile-inner {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
flex: 1 1 auto;
min-height: 0;
width: 100%;
}
#home .hero-mobile-inner .hero-trusted-mobile-slot {
display: none !important;
}
#home .hero-mobile-inner .hero-intro-phone-only {
display: block !important;
width: 100%;
max-width: 100%;
margin-top: 1.25rem !important;
text-align: left;
}
#home .hero-mobile-inner .hero-headline-col {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
flex: 1 1 auto;
min-height: 0;
width: 100%;
padding-top: 2.35rem;
padding-bottom: 0;
text-align: left;
}
#home .hero-mobile-inner .hero-headline-col .hero-headline-text {
align-items: flex-start;
text-align: left;
text-transform: none !important;
width: 100%;
}
#home .hero-mobile-inner .hero-headline-col .hero-headline-text .hero-headline-mobile-stack .hero-headline-mobile-line1,
#home .hero-mobile-inner .hero-headline-col .hero-headline-text .hero-headline-mobile-stack .hero-headline-mobile-line2 {
white-space: nowrap;
font-size: 50px !important;
line-height: 1;
}
#home .hero-mobile-inner .hero-headline-col .hero-lower-block {
margin-top: 0.35rem !important;
width: 100%;
max-width: 100%;
text-align: left;
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: stretch;
}
#home .hero-mobile-inner .hero-headline-col .hero-intro-text {
font-size: 20px !important;
line-height: 1.2 !important;
}
#home .hero-mobile-inner .hero-headline-col .hero-intro-phone-only {
margin-left: 0;
margin-right: 0;
}
#home .hero-mobile-inner .hero-headline-col .hero-cta-buttons {
margin-top: 0.625rem !important;
margin-bottom: 1.85rem;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
width: 100%;
max-width: 100%;
gap: 0.5rem;
flex: 0 0 auto;
}
#home .hero-mobile-inner .hero-headline-col .hero-cta-buttons .btn-cta {
flex: 0 0 auto;
min-width: 0;
width: auto;
max-width: none;
box-sizing: border-box;
}
#home .hero-mobile-inner .hero-headline-col .hero-cta-buttons .hero-cta-discover .hero-cta-arrow-icon {
display: none !important;
}
#home .hero-mobile-inner .hero-headline-col .hero-cta-buttons .hero-cta-discover {
gap: 0 !important;
}
#home .hero-mobile-inner .hero-trusted-mobile-slot .hero-right-col {
align-items: flex-start !important;
text-align: left !important;
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#home .hero-mobile-inner .hero-trusted-mobile-slot .hero-projects-row {
justify-content: flex-start !important;
align-self: flex-start;
width: 100%;
margin-top: 0 !important;
gap: 0.75rem;
}
#home .hero-mobile-inner .hero-trusted-mobile-slot .hero-projects-row > span.ml-4 {
margin-left: 0 !important;
}
.hero-right-col { align-items: flex-start !important; }
.hero-projects-row { margin-top: 0 !important; justify-content: flex-start !important; }
}
.hero-collab {
flex-direction: column;
align-items: flex-start;
width: max-content;
max-width: 100%;
text-align: left;
}
.hero-collab-label {
margin: 0 0 0.2em;
font-family: "Inter", Arial, sans-serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.2;
text-align: left;
text-transform: uppercase;
color: #8a8a8a;
}
.hero-collab-partners {
margin: 0;
font-family: "Inter", Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: normal;
line-height: 1.2;
color: #fff;
white-space: nowrap;
}
@media (min-width: 768px) {
.hero-collab-partners { font-size: 15.45px; line-height: 19.34px; }
.hero-collab-label { font-size: 11.45px; line-height: 15.74px; }
}
.hero-collab-partners {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
}
.hero-collab-link {
display: inline-block;
color: #fff;
text-decoration: none;
}
.hero-collab-link:focus-visible {
outline: none;
}
.site-link-line {
display: block;
margin-top: 0.125rem;
height: 1px;
width: 100%;
background: #fff;
pointer-events: none;
clip-path: inset(0 100% 0 0);
transform: none;
transition: clip-path 300ms ease-out;
}
.group:hover .site-link-line,
.group:focus-visible .site-link-line {
clip-path: inset(0 0 0 0);
}
.hero-collab-x {
display: inline;
flex-shrink: 0;
margin: 0 0.28em;
color: #fff;
}
@media (min-width: 768px) {
#home .hero-trusted-mobile-slot {
width: auto;
max-width: none;
align-items: flex-end;
flex: 0 0 auto;
}
#home .hero-trusted-mobile-slot .hero-collab,
#home .hero-right-col.hero-collab {
width: max-content;
max-width: 100%;
margin-left: 0;
align-items: flex-start;
}
}
.section-label { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-weight: 500; font-size: 14px; color: #00D4FF; text-transform: uppercase; }
#how-we-work-section .font-display { font-family: "Inter", Arial, sans-serif; font-weight: 400; }
#how-we-work-section .team-step-arrow {
background: rgba(0, 212, 255, 0.2);
border: 1px solid rgba(0, 212, 255, 0.4);
transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}
#how-we-work-section .team-step-arrow i,
#how-we-work-section .team-step-arrow [data-lucide] {
color: #00D4FF;
transition: color 0.35s ease;
}
#how-we-work-section .group:hover .team-step-arrow {
transform: translateY(-3px);
}
#how-we-work-section .about-team-circle {
width: 166px; height: 166px; border-radius: 50%;
background: rgba(0, 212, 255, 0.2);
padding: 4px; border: 2px solid rgba(0, 212, 255, 0.5);
transition: transform 0.3s ease, border-color 0.3s ease;
position: relative;
overflow: hidden;
}
#how-we-work-section .about-team-circle:hover {
transform: scale(1.05);
border-color: rgba(0, 212, 255, 0.9);
}
#how-we-work-section .about-team-circle img {
width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
transition: filter 0.35s ease;
}
#how-we-work-section .about-team-circle:hover img {
filter: brightness(0.45) blur(4px);
}
#how-we-work-section .about-team-circle .about-team-overlay {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, 0.35);
opacity: 0;
transition: opacity 0.35s ease;
border-radius: 50%;
}
#how-we-work-section .about-team-circle:hover .about-team-overlay {
opacity: 1;
}
#how-we-work-section .about-team-circle .about-team-overlay i {
color: #00D4FF;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
#how-we-work-section .about-process-card {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
transition: border-color 0.35s ease, transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
overflow: hidden;
}
#how-we-work-section .about-process-card:hover {
border-color: rgba(0, 212, 255, 0.4);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
transform: translateY(-6px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 212, 255, 0.15);
}
@media (max-width: 768px) {
#how-we-work-section .about-team-ul li { width: auto; min-width: 88px; max-width: 160px; }
#how-we-work-section .about-team-circle { width: 88px; height: 88px; padding: 3px; }
#how-we-work-section .about-team-circle .about-team-overlay .about-team-icon-wrap { width: 40px; height: 40px; }
#how-we-work-section .about-team-circle .about-team-overlay i { width: 1.25rem; height: 1.25rem; }
#how-we-work-section .about-team-circle + p { font-size: 12px; }
#how-we-work-section .about-team-circle + p + span + span { font-size: 12px; }
.about-team-role { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* About us: taller section + parallax (fixed bg on ::before; all viewports; reduced-motion: scroll). */
#how-we-work-section {
background-color: #ffffff;
color: #0a0a0a;
isolation: isolate;
min-height: 80vh;
min-height: 80dvh;
min-height: 80svh;
}
@media (min-width: 640px) {
#how-we-work-section {
min-height: 88vh;
min-height: 88dvh;
min-height: 88svh;
}
}
@media (min-width: 1024px) {
#how-we-work-section {
min-height: 92vh;
min-height: 92dvh;
min-height: 92svh;
}
}
#how-we-work-section {
background-color: #ffffff;
}
#how-we-work-section::before {
display: none;
}
#how-we-work-section .how-we-work-bg-overlay {
display: none;
}
/* Pricing plans: solid background (no video). */
#pricing-plan-section {
background-color: #000000;
isolation: isolate;
}
.cranez-label, .about-trust-line, .body-inter, .font-inter { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
.group:hover .group-hover\:btn-gradient { background: linear-gradient(135deg, #00D4FF 0%, #CC00FF 100%); border-color: #CC00FF; }
#portfolio-section-grid .portfolio-card-arrow {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
#portfolio-section-grid .portfolio-card-arrow i,
#portfolio-section-grid .portfolio-card-arrow [data-lucide] {
color: white;
transition: color 0.35s ease, transform 0.35s ease;
}
#portfolio-section-grid .group:hover .portfolio-card-arrow {
background: transparent;
border-color: rgba(255, 255, 255, 0.2);
transform: translate(6px, -6px);
}
#portfolio-section-grid .group:hover .portfolio-card-arrow i,
#portfolio-section-grid .group:hover .portfolio-card-arrow [data-lucide] {
color: #00D4FF;
transform: rotate(-45deg);
}
#portfolio-section-grid .portfolio-card-light .portfolio-card-arrow--light {
background: linear-gradient(135deg, #00D4FF 0%, #CC00FF 100%);
border: none;
box-shadow: 0 2px 8px rgba(0, 212, 255, 0.35);
}
#portfolio-section-grid .portfolio-card-light .portfolio-card-arrow--light i,
#portfolio-section-grid .portfolio-card-light .portfolio-card-arrow--light [data-lucide] {
color: #fff;
transition: color 0.35s ease, transform 0.35s ease;
}
#portfolio-section-grid .portfolio-card-light.group:hover .portfolio-card-arrow--light {
background: #00D4FF;
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.45);
transform: translate(6px, -6px);
}
#portfolio-section-grid .portfolio-card-light.group:hover .portfolio-card-arrow--light i,
#portfolio-section-grid .portfolio-card-light.group:hover .portfolio-card-arrow--light [data-lucide] {
transform: rotate(-45deg);
}
#portfolio-section-grid .portfolio-card-light .portfolio-card-arrow--light {
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
/* Kulcsvizu?l: Services panel + WORKS boxok ? egyezo ar?ny ?s max. magass?g */
:root {
--boabo-key-visual-aspect-ratio: 21 / 14.3;
--boabo-key-visual-max-height: min(calc(420px * 1.43), calc(55vh * 1.43));
}
#portfolio-section-grid .portfolio-card-tagline {
font-size: 11px;
line-height: 1.375;
margin-top: 0.25rem;
max-width: min(100%, 24rem);
color: rgba(255, 255, 255, 0.5) !important;
}
@media (min-width: 768px) {
#portfolio-section-grid .portfolio-card-tagline {
font-size: 13px;
}
}
#portfolio-section-grid .portfolio-card-title {
position: relative;
display: inline-block;
padding-bottom: 0;
font-size: 14px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.015em;
transition: opacity 2s cubic-bezier(0.16, 0.84, 0.44, 1);
}
@media (min-width: 768px) {
#portfolio-section-grid .portfolio-card-title {
font-size: 18px;
}
}
@media (min-width: 1024px) {
#portfolio-section-grid .portfolio-card-title {
font-size: 20px;
}
#portfolio-section-grid .portfolio-card-tagline {
font-size: 15px;
}
}
#portfolio-section-grid .group:hover .portfolio-card-title {
opacity: 0.86;
transition: opacity 1.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#portfolio-section-grid .portfolio-card-title::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1px;
background-color: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.55s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
#portfolio-section-grid .group:hover .portfolio-card-title::after {
transform: scaleX(1);
transform-origin: left center;
transition: transform 1.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#portfolio-section-grid .portfolio-card-media-wrap {
position: relative;
width: 100%;
height: 47.6vh;
max-height: none;
aspect-ratio: auto;
overflow: hidden;
flex-shrink: 0;
border-radius: 0.75rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
@media (min-width: 640px) {
#portfolio-section-grid .portfolio-card-media-wrap {
border-radius: 2rem;
}
}
@media (min-width: 768px) {
#portfolio-section-grid .portfolio-card-media-wrap {
height: 61.2vh;
}
}
#portfolio-section-grid .portfolio-card-media-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 2s cubic-bezier(0.16, 0.84, 0.44, 1);
transform: scale(1);
transform-origin: center center;
}
#portfolio-section-grid .group:hover .portfolio-card-media-img {
transform: scale(1.1);
transition: transform 1.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#portfolio-section-grid .portfolio-card-logo-media.portfolio-card-media-wrap .portfolio-card-media-img {
object-fit: contain;
}
#portfolio-section-grid .portfolio-card-logo-media {
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
#portfolio-section-grid .portfolio-card-logo-img {
transform: none;
}
#portfolio-section-grid .group:hover .portfolio-card-logo-img {
transform: none;
}
.hero-video-dark {
filter: brightness(0.72);
}
@media (max-width: 767px) {
#home > section:first-of-type {
min-height: 100vh;
min-height: 100dvh;
}
#hero-video {
object-fit: contain;
object-position: center;
}
}
/* About us: bwstd logo below team, white */
.about-bwstd-logo { filter: brightness(0) opacity(0.75); }
#how-we-work-section .about-team-ul {
justify-content: flex-start;
}
#how-we-work-section .about-team-cluster {
width: fit-content;
max-width: 100%;
}
#how-we-work-section .about-bwstd-logo-wrap {
width: 100%;
display: flex;
justify-content: center;
}
/* Rólunk – álló profilkép kártyák */
.about-profile-tag {
display: inline-flex;
align-items: center;
padding: 0.3rem 0.85rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #ffffff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
white-space: nowrap;
}
/* Startup – két pricing-stílusú kártya */
.startup-plans {
width: 100%;
}
.startup-plans-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem 1.25rem;
}
@media (min-width: 1024px) {
.startup-plans-grid {
grid-template-columns: 1fr 1fr;
gap: 2.5rem 1.5rem;
}
}
.startup-plans-col {
display: flex;
flex-direction: column;
gap: 1.25rem;
min-width: 0;
}
.startup-plan {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
text-align: left;
min-height: 20rem;
padding: 2rem 1.75rem 1.75rem;
border-radius: 2.5rem;
box-sizing: border-box;
}
@media (min-width: 640px) {
.startup-plan {
min-height: 22rem;
padding: 2.5rem 2.25rem 2rem;
border-radius: 3rem;
}
}
@media (min-width: 1024px) {
.startup-plan {
min-height: 24rem;
padding: 3rem 2.5rem 2.5rem;
}
}
.startup-plan--dark {
background: #111;
color: #fff;
}
.startup-plan--light {
background: #ebebeb;
color: #111;
}
.startup-plan-body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
width: 100%;
}
.startup-plan-label {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0 0 1.25rem;
}
.startup-plan--dark .startup-plan-label {
color: rgba(255, 255, 255, 0.45);
}
.startup-plan--light .startup-plan-label {
color: #666;
}
.startup-plan-heading {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: clamp(1.5rem, 3.2vw, 2.25rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0 0 1rem;
max-width: 16ch;
}
.startup-plan--light .startup-plan-heading {
max-width: 14ch;
}
.startup-plan-price {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: 1.125rem;
font-weight: 500;
line-height: 1.3;
margin: 0;
}
.startup-plan--dark .startup-plan-price {
color: #fff;
}
.startup-plan--light .startup-plan-price {
color: #666;
}
@media (min-width: 640px) {
.startup-plan-price {
font-size: 1.25rem;
}
}
.startup-plan-cta {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
padding: var(--btn-padding-y) var(--btn-padding-x);
min-height: var(--btn-min-height);
border: none;
border-radius: var(--btn-radius);
font-family: "Inter", Arial, sans-serif;
font-size: var(--btn-font-size);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.36px;
cursor: pointer;
transition: transform var(--ease), background-color var(--ease), color var(--ease);
}
.startup-plan-cta:hover {
transform: none;
}
.startup-plan-cta:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
.startup-plan-cta--on-dark {
background: #fff;
color: #0a0a0a;
border: 1.5px solid #fff;
}
.startup-plan-cta--on-dark:hover {
background: transparent;
color: #fff;
border-color: #fff;
}
.startup-plan-cta--on-light {
background: #0a0a0a;
color: #fff;
border: 1.5px solid #0a0a0a;
}
.startup-plan-cta--on-light:hover {
background: #fff;
color: #0a0a0a;
border-color: #0a0a0a;
}
.startup-plan-footnote {
font-size: 0.9375rem;
line-height: 1.65;
color: #666;
margin: 0;
max-width: 36rem;
}
@media (min-width: 640px) {
.startup-plan-footnote {
font-size: 1rem;
}
}
/* Rólunk – Planeta-stílusú service kártyák */
.about-service-card-frame {
background: #080808;
}
.about-service-card-frame::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 4;
box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
}
@media (min-width: 768px) {
.about-service-card-frame::after {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
}
.about-fan-card { transition: transform 0.25s ease; }
.about-card-shadow { box-shadow: 0 10px 24px -8px rgba(0,0,0,0.18); }
.about-card-front { box-shadow: 0 24px 48px -12px rgba(0,0,0,0.28), 0 12px 24px -8px rgba(0,0,0,0.2); }
#about-cursor-area { perspective: 1000px; }
#about-move-wrap {
transform-style: preserve-3d;
will-change: transform;
max-width: 27.2rem;
}
@media (min-width: 1024px) {
#about-move-wrap { max-width: calc(27.2rem * 0.85); }
}
.about-section-bg { position: relative; background: #ffffff; }
/* Radiating Hope homepage intro + story — https://www.radiatinghope.org/ */
.who-are {
background: #ffffff;
color: #000000;
overflow: visible;
padding: 0;
}
.rh-mission-story {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
padding: clamp(2.5rem, 1.407rem + 4.662vw, 8.75rem) 0;
}
@media (min-width: 768px) {
.rh-mission-story {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 20px;
row-gap: 0;
}
.rh-mission-story-label {
grid-column: 1 / span 5;
}
.rh-mission-story-copy {
grid-column: 7 / 13;
}
}
.rh-mission-story-label {
margin: 0;
justify-self: start;
align-self: start;
}
.rh-mission-story-logo {
display: block;
height: 3.25rem;
width: auto;
}
@media (min-width: 640px) {
.rh-mission-story-logo {
height: 4rem;
}
}
.rh-mission-story-copy p {
margin: 0;
font-family: var(--font-text), "Inter", Arial, sans-serif !important;
font-weight: 400;
font-size: calc(clamp(1.875rem, 0.398rem + 1.97vw, 3.5rem) - 4px);
line-height: max(30px, 125%);
letter-spacing: -0.025em;
color: #000000;
}
.rh-mission-story-copy p + p {
margin-top: 1.25em;
}
.rh-mission-story-cta {
display: inline-flex;
margin-top: 2rem;
}
@media (min-width: 640px) {
.rh-mission-story-cta {
margin-top: 2.5rem;
}
}
@media (min-width: 1024px) {
.rh-mission-story-copy p {
font-size: calc(clamp(1.875rem, 0.398rem + 1.97vw, 3.5rem) - 14px);
}
}
.who-are-partners {
background: #ffffff;
color: #111111;
overflow: hidden;
padding: 4rem 0 5rem;
}
@media (min-width: 640px) {
.who-are-partners {
padding: 5rem 0 7rem;
}
}
@media (min-width: 1024px) {
.who-are-partners {
padding: 5rem 0 9rem;
}
}
/* Same horizontal bounds as homepage navbar (.nav-shell-hero-headline-width) */
.who-are-container {
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 0 1rem;
overflow: visible;
}
@media (min-width: 640px) {
.who-are-container {
padding: 0 1.5rem;
}
}
@media (min-width: 768px) {
.who-are-container {
padding: 0 3rem;
}
}
.who-are-grid {
display: grid;
grid-template-columns: 1fr;
align-items: start;
gap: 2rem;
text-align: left;
overflow: visible;
}
@media (min-width: 768px) {
.who-are-grid {
gap: 2.5rem;
}
}
@media (min-width: 1024px) {
.who-are-grid {
grid-template-columns: 1fr 1fr;
column-gap: 2rem;
row-gap: 0;
}
}
.who-are-col {
min-width: 0;
}
.who-are-title {
margin: 0;
font-family: Inter, sans-serif;
font-weight: 500;
font-size: 40px;
line-height: 1.05;
letter-spacing: -0.02em;
color: #000000;
text-wrap: pretty;
overflow: visible;
}
@media (min-width: 768px) {
.who-are-title {
font-size: 58px;
}
}
@media (min-width: 1024px) {
.who-are-title {
position: sticky;
top: 7rem;
}
}
.who-are-text {
max-width: 100%;
font-family: Inter, sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0;
color: #000000;
}
@media (min-width: 768px) {
.who-are-text {
max-width: 42rem;
font-size: 16px;
line-height: 1.4;
}
}
.who-are-text p {
margin: 0 0 1em;
}
.who-are-text p:last-child {
margin-bottom: 0;
}
.who-are-cta {
margin-top: 2rem;
}
@media (min-width: 768px) {
.who-are-cta {
margin-top: 3rem;
}
}
/* Section badges ? capsule; gray text + subtle border */
.section-badge {
display: inline-block;
padding: 0.375rem 0.75rem;
border-radius: 9999px;
border: 1px solid var(--border);
font-family: var(--font-text);
font-size: 14px;
line-height: 1.5714285714;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
color: var(--text_light);
}
.section-badge--on-dark {
border-color: rgba(255, 255, 255, 0.22);
color: #a3a3a3;
}
/* Space between section title block (badge + headline) and content below */
.section-header-block,
.testimonials-header {
margin-bottom: 3.5rem;
}
@media (min-width: 640px) {
.section-header-block,
.testimonials-header {
margin-bottom: 5rem;
}
}
@media (min-width: 768px) {
.section-header-block,
.testimonials-header {
margin-bottom: 5.5rem;
}
}
@media (min-width: 1024px) {
.section-header-block,
.testimonials-header {
margin-bottom: 6.5rem;
}
}
/* About tagline: per-character gray → black (JS toggles .is-filled), scroll-driven t */
.about-tagline-reveal .about-tagline-reveal-chars {
display: block;
}
.about-reveal-line {
display: block;
white-space: nowrap;
}
@media (min-width: 1024px) {
#about .about-split {
align-items: center;
gap: 2.5rem;
}
#about #about-cursor-area {
width: auto;
flex: 1 1 0;
min-width: 0;
}
#about .about-copy-col {
width: auto;
flex: 0 0 auto;
max-width: none;
}
}
.about-tagline-reveal .about-reveal-char {
display: inline;
color: #a3a3a3;
}
.about-tagline-reveal .about-reveal-char.is-filled {
color: #0a0a0a;
}
.about-partners-label {
margin: 0 0 clamp(3.5rem, 7vw, 5.5rem);
font-family: "Inter", Arial, sans-serif;
font-size: 21px;
font-weight: 400;
letter-spacing: 0.025em;
line-height: 1.3;
text-align: center;
text-transform: none;
color: #0a0a0a;
}
@media (min-width: 640px) {
.about-partners-label { font-size: 22px; }
}
.about-partner-logos img { height: 24px; width: auto; filter: brightness(0) opacity(0.75); }
@media (min-width: 768px) {
.about-partner-logos img { height: 28px; }
}
.about-partner-logos img:hover { filter: brightness(0) opacity(1); }
.about-trust-line { font-size: 1.3em; line-height: 1.5; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
.about-tagline {
font-family: "Manrope", sans-serif !important;
font-size: clamp(36.8px, calc(4.95vmax - 16px), 54.4px) !important;
font-weight: 400 !important;
font-style: normal;
line-height: 1.1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.about-tagline-smaller {
font-family: "Inter", Arial, sans-serif !important;
font-size: clamp(36.8px, calc(4.95vmax - 16px), 54.4px) !important;
font-weight: 400 !important;
font-style: normal;
line-height: 1.08 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
#about-tagline-reveal,
#about-tagline-reveal .about-tagline-reveal-chars,
#about-tagline-reveal .about-reveal-char {
font-family: "Manrope", sans-serif !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
@media (max-width: 1023px) {
.about-tagline-mobile {
font-size: clamp(28px, calc(4.95vmax - 26px), 44px) !important;
}
}
.about-tagline-copy {
font-size: clamp(20.8px, calc(4.95vmax - 32px), 38.4px) !important;
}
.about-tagline-copy p {
margin: 0;
}
.about-tagline-copy p + p {
margin-top: 0.75em;
}
@media (max-width: 1023px) {
.about-tagline-copy.about-tagline-mobile { font-size: clamp(16px, calc(4.95vmax - 42px), 28px) !important; }
}
@media (min-width: 1024px) {
.about-tagline-copy {
font-size: 30px !important;
}
.about-tagline {
font-size: 40px !important;
}
}
@media (min-width: 1024px) {
#shop .shop-managed-card > div:first-child > h3.store-card-title,
#shop .shop-unlock-card h3.store-card-title,
#shop .store-card-title {
font-size: calc((2.875rem - 4px) * 0.78) !important;
line-height: 0.9 !important;
letter-spacing: -0.02em !important;
font-weight: 500 !important;
}
}
.cranez-btn { font-size: var(--btn-font-size); }
.nav-link-bar { font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; }
.nav-menu-link { font-weight: 500; font-size: 18px; font-family: "Inter", Arial, sans-serif; letter-spacing: -0.025em; line-height: 1.2; text-transform: none; position: relative; display: block; padding-bottom: 0; color: white !important; transition: color 0.45s ease; }
.nav-menu-link:hover { color: white !important; }
.nav-menu-link::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 0; height: 1px; background: currentColor; transform: translateX(-50%); transition: width 0.35s cubic-bezier(0.65, 0, 0.35, 1); pointer-events: none; }
.nav-menu-link:hover::after,
.nav-menu-link.text-primary::after { width: 100%; }
.nav-menu-link.text-primary { color: white !important; }
.get-in-touch-nav-btn.btn-cta,
#get-started-trigger.btn-cta {
min-height: 44px;
padding: 0.605rem 1.265em;
font-size: 17.6px;
font-weight: 400;
letter-spacing: -0.36px;
line-height: 1.35;
border: 0;
background: rgba(255, 255, 255, 0.12) !important;
color: #fff !important;
border-radius: 9999px;
box-shadow: none;
transition: background 0.35s ease, color 0.35s ease;
}
.get-in-touch-nav-btn.btn-cta .btn-cta-text,
#get-started-trigger.btn-cta .btn-cta-text {
color: #fff !important;
font-weight: 400;
}
.get-in-touch-nav-btn.btn-cta:hover,
#get-started-trigger.btn-cta:hover {
background: #fff !important;
color: #0a0a0a !important;
transform: none;
border: 0;
}
.get-in-touch-nav-btn.btn-cta:hover .btn-cta-text,
#get-started-trigger.btn-cta:hover .btn-cta-text {
color: #0a0a0a !important;
}
/* Brand wordmark link: no underline, no color/transition change on hover */
.navbar-outer .navbar-brand-link,
.navbar-outer .navbar-brand-link:hover,
.navbar-outer .navbar-brand-link:focus,
.navbar-outer .navbar-brand-link:focus-visible {
text-decoration: none !important;
color: #fff !important;
transition: none !important;
}
.navbar-outer .navbar-brand-link::after { display: none; content: none; }
.navbar-outer .navbar-brand-link .navbar-brand-wordmark {
color: inherit !important;
transition: none !important;
}
@media (max-width: 1023px) {
#mobile-menu .mobile-menu-nav a.text-primary { color: #000 !important; opacity: 0.55; }
}
@media (min-width: 1024px) {
.hero-cta-buttons .hero-cta-services { order: 2; }
.hero-cta-buttons .hero-cta-discover { order: 1; }
}
@media (max-width: 1023px) {
.hero-cta-buttons .hero-cta-services { order: 2; }
.hero-cta-buttons .hero-cta-discover { order: 1; }
}
.font-nav-brand { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 12px; }
@media (min-width: 1024px) { .font-nav-brand { font-size: 18px; } }
@media (max-width: 1023px) { .navbar-brand-text { font-size: 17px; text-transform: uppercase; } }
@media (max-width: 1023px) {
.navbar-outer {
margin: 0;
width: 100%;
max-width: 100%;
border-radius: 0;
border: none !important;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
overflow: visible;
}
.navbar-outer .logo-nav-size { height: calc(1.75rem * 1.21); }
.navbar-outer .navbar-brand-text { font-size: 15px; }
.nav-home-topnav { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (min-width: 1024px) {
.navbar-outer {
margin: 16px auto 0;
width: 100%;
max-width: 1320px;
border-radius: 0;
border: none;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
overflow: visible;
}
.navbar-outer nav {
max-width: 1320px;
padding-left: 0 !important;
padding-right: 0 !important;
}
.navbar-outer .navbar-brand-text { text-transform: uppercase; }
}
/* Homepage navbar: capsule width aligned to hero shell; lg: menu links centred in bar (1fr | auto | 1fr) */
@media (max-width: 1023px) {
#home .nav-shell-hero-headline-width .navbar-outer {
margin: 10px 0 0;
width: 100%;
max-width: none;
}
}
@media (min-width: 1024px) {
#home .nav-shell-hero-headline-width .navbar-outer {
margin: 16px 0 0;
width: 100%;
max-width: none;
}
#home .nav-shell-hero-headline-width .navbar-outer nav.nav-home-topnav {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
column-gap: clamp(0.75rem, 2vw, 1.75rem);
max-width: none;
}
#home .nav-shell-hero-headline-width .navbar-outer .nav-home-brand {
justify-self: start;
min-width: 0;
}
#home .nav-shell-hero-headline-width .navbar-outer .nav-home-links {
justify-self: center;
}
#home .nav-shell-hero-headline-width .navbar-outer .nav-home-actions {
justify-self: end;
}
}
.navbar-outer { position: relative; z-index: 50; }
.nav-home-topnav {
min-height: var(--header-h);
padding-top: 0;
padding-bottom: 0;
}
.nav-home-links {
gap: 28px !important;
}
.nav-home-actions {
gap: 14px !important;
}
/* Homepage nav: logo 10% larger than the previous 2.125rem - 2px height */
.navbar-outer .navbar-brand-logo.logo-nav-size {
height: calc((2.125rem - 2px) * 1.21);
}
@media (max-width: 1023px) {
.navbar-outer .navbar-brand-logo.logo-nav-size {
height: calc((2.125rem - 2px) * 1.21);
width: auto;
}
}
/* Homepage nav: wordmark typography */
.navbar-outer .navbar-brand-wordmark {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-weight: 700;
line-height: 1;
text-transform: none;
font-size: calc(2.125rem - 10px);
}
@media (max-width: 1023px) {
.navbar-outer .navbar-brand-wordmark {
font-size: calc(1.75rem - 10px);
}
}
.boabo-mega-trigger {
position: static;
display: inline-flex;
align-items: center;
height: 100%;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
margin-top: -1.25rem;
margin-bottom: -1.25rem;
}
.boabo-mega-icon-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.boabo-mega-chevron {
display: block;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.boabo-mega-trigger:hover .boabo-mega-chevron,
.boabo-mega-trigger.is-open .boabo-mega-chevron { transform: rotate(180deg); }
.boabo-mega-trigger:hover > a,
.boabo-mega-trigger.is-open > a { color: #00D4FF; }
.boabo-mega-panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 100%;
background: rgba(28, 28, 34, 0.97);
backdrop-filter: blur(24px);
border-top: 1px solid rgba(255,255,255,0.10);
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
border-radius: 24px;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
z-index: 999;
pointer-events: none;
}
.boabo-mega-panel::before {
content: '';
position: absolute;
top: -25px;
left: 0;
width: 100%;
height: 25px;
}
.boabo-mega-trigger:hover .boabo-mega-panel,
.boabo-mega-trigger.is-open .boabo-mega-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.boabo-mega-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: 20px;
overflow: hidden;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.10);
transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
text-decoration: none;
color: inherit;
}
.boabo-mega-card:hover {
border-color: rgba(0, 212, 255, 0.4);
background: rgba(255,255,255,0.13);
transform: translateY(-3px);
}
.boabo-mega-card-img {
aspect-ratio: 3 / 2;
overflow: hidden;
}
.boabo-mega-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) brightness(0.55);
transition: transform 0.5s ease, filter 0.5s ease;
}
.boabo-mega-card:hover .boabo-mega-card-img img {
transform: scale(1.06);
filter: grayscale(0) brightness(0.95);
}
.boabo-mega-card-body {
position: static;
padding: 12px 14px 16px;
display: flex;
align-items: center;
gap: 10px;
}
.boabo-mega-card-icon-wrap {
width: 2.4rem;
height: 2.4rem;
min-width: 2.4rem;
min-height: 2.4rem;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.1);
color: #00D4FF;
transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.boabo-mega-card-icon {
width: 16px;
height: 16px;
color: #00D4FF;
flex-shrink: 0;
}
.boabo-mega-card-label {
font-family: var(--font-text);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
}
.boabo-mega-card:hover .boabo-mega-card-icon-wrap {
background: #00D4FF;
color: #000;
transform: scale(1.05);
}
.boabo-mega-card:hover .boabo-mega-card-icon {
color: #000;
}
.boabo-mega-card:hover .boabo-mega-card-label {
color: #00D4FF;
}
.shop-stat-block {
margin-top: 0;
}
@media (min-width: 1024px) {
.shop-stat-block { margin-top: 0; }
.shop-stat-percent { font-size: calc(7rem - 6px) !important; }
}
.shop-trusted-avatar,
.shop-trusted-btn {
transition: transform 0.25s ease;
cursor: default;
}
@media (max-width: 1023px) {
.shop-trusted-avatar.shop-trusted-avatar-mobile { width: 54px !important; min-width: 54px; height: 54px !important; }
.shop-trusted-plus-mobile { width: 0.75rem !important; height: 0.75rem !important; }
}
@media (max-width: 767px) {
.shop-managed-card .shop-managed-curated-wrap { margin-top: 1.75rem; }
.shop-managed-card .shop-trusted-avatar.shop-trusted-avatar-mobile { width: 46px !important; min-width: 46px; height: 46px !important; }
.shop-managed-card .shop-trusted-plus-mobile { width: 0.65rem !important; height: 0.65rem !important; }
.shop-managed-card { min-height: 420px; padding-bottom: 1.75rem; }
}
@media (min-width: 1024px) {
.shop-managed-card .shop-trusted-avatar { width: 44.8px !important; min-width: 44.8px; height: 44.8px !important; }
.shop-managed-card .add-user-btn.shop-trusted-btn.btn-cta-learn-more {
width: 44.8px !important;
min-width: 44.8px !important;
height: 44.8px !important;
}
.shop-managed-card .add-user-btn-plus,
.shop-managed-card .shop-trusted-plus-mobile {
width: 0.84rem !important;
height: 0.84rem !important;
}
}
.shop-trusted-avatar:hover {
transform: none;
}
.shop-trusted-btn:hover {
transform: scale(1.08);
}
.shop-trusted-btn.btn-cta-learn-more:hover {
transform: none;
}
.shop-trusted-btn:hover .add-user-btn-plus {
transform: none;
}
.shop-trusted-btn.btn-cta-learn-more:hover .add-user-btn-plus {
transform: none;
}
/* Join 50+ plus: same circle size as trusted avatars */
.add-user-btn.shop-trusted-btn.btn-cta-learn-more {
width: 3.5rem !important;
min-width: 3.5rem !important;
height: 3.5rem !important;
padding: 0 !important;
transition:
transform 0.28s cubic-bezier(0.34, 1.02, 0.64, 1),
background 0.35s ease,
border-color 0.35s ease;
}
@media (max-width: 1023px) {
.add-user-btn.shop-trusted-btn.btn-cta-learn-more {
width: 54px !important;
min-width: 54px !important;
height: 54px !important;
}
}
@media (max-width: 767px) {
.shop-managed-card .add-user-btn.shop-trusted-btn.btn-cta-learn-more {
width: 46px !important;
min-width: 46px !important;
height: 46px !important;
}
}
.add-user-btn.shop-trusted-btn.btn-cta-learn-more:hover {
transform: scale(1.1);
}
.shop-trusted-row .shop-trusted-btn {
cursor: pointer;
}
.add-user-btn-plus {
transition: transform 0.2s ease;
}
@media (max-width: 1023.98px) {
.boabo-mega-panel { display: none !important; }
}
.nav-services-open .nav-dropdown-panel,
.nav-portfolio-open .nav-dropdown-panel {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.nav-services-open > a .nav-dropdown-arrow,
.nav-portfolio-open > a .nav-dropdown-arrow {
transform: rotate(180deg);
}
.nav-services-open > a,
.nav-portfolio-open > a {
color: #00D4FF;
}
.logo-nav-size { height: calc(2.125rem * 1.21); display: block; }
@media (min-width: 1024px) { .logo-nav-size { height: calc(2.125rem * 1.21); } }
.nav-brand-text { font-size: 1.224rem; font-weight: 500; }
.hero-headline-sm { font-weight: 500; font-size: 39px; line-height: 1.16; letter-spacing: -0.02em; }
@media (min-width: 640px) { .hero-headline-sm { font-size: 70px; line-height: 1.08; } }
@media (min-width: 1024px) { .hero-headline-sm { font-size: 84px; } }
.get-started-nav { background: #fff !important; color: #0a0a0a !important; border: 1.5px solid #fff; border-radius: var(--btn-radius); min-height: var(--btn-min-height); padding: var(--btn-padding-y) var(--btn-padding-x); font-size: var(--btn-font-size); font-weight: 400; letter-spacing: -0.36px; line-height: 1.2; }
.get-started-nav { position: relative; overflow: hidden; transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease; }
.get-started-nav::after { display: none; }
.bg-gradient-accent { background: linear-gradient(135deg, #00D4FF 0%, #CC00FF 100%); }
.get-started-nav:hover { background: transparent !important; color: #fff !important; filter: none; transform: none; border-color: #fff; }
.get-started-nav > * { position: relative; z-index: 1; }
.get-started-nav:hover .btn-arrow { color: #fff !important; }
.hero-avatar-sm { width: 2.5rem; height: 2.5rem; }
@media (min-width: 1024px) { .hero-avatar-sm { width: 2.75rem; height: 2.75rem; } }
.get-started-nav .btn-arrow { color: #1a1a1a; transition: color 0.2s; }
.cranez-btn [data-lucide="arrow-right"], [data-lucide="arrow-right"].btn-arrow { width: 0.85rem; height: 0.85rem; transition: transform 0.39s ease; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; }
.cranez-btn [data-lucide="arrow-right"] svg, [data-lucide="arrow-right"].btn-arrow svg { display: block; }
.cranez-btn:hover [data-lucide="arrow-right"], a:hover [data-lucide="arrow-right"].btn-arrow { transform: translateX(4px); }
.discover-more-btn { position: relative; overflow: hidden; background: #0a0a0a; border: 1.5px solid #0a0a0a; color: #fff; border-radius: var(--btn-radius); min-height: var(--btn-min-height); padding: var(--btn-padding-y) var(--btn-padding-x); font-size: var(--btn-font-size); font-weight: 400; letter-spacing: -0.36px; line-height: 1.2; transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease; }
.discover-more-btn::after { display: none; }
.discover-more-btn .discover-more-text,
.discover-more-btn .discover-more-arrow { position: relative; z-index: 1; transition: color 0.35s ease, transform 0.2s ease; }
.discover-more-btn:hover { background: #fff; color: #0a0a0a; transform: none; border-color: #0a0a0a; }
.discover-more-btn:hover [data-lucide="arrow-right"] { transform: translateX(4px); }
.discover-more-btn:hover .discover-more-text {
color: #0a0a0a;
background: none;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-text-fill-color: #0a0a0a;
}
.discover-more-btn:hover .discover-more-arrow { color: #0a0a0a; }
.carousel-padding { padding-left: 1rem; }
@media (min-width: 640px) { .carousel-padding { padding-left: 1.5rem; } }
@media (min-width: 1024px) { .carousel-padding { padding-left: 2rem; } }
@media (min-width: 1440px) { .carousel-padding { padding-left: calc((100vw - 1440px) / 2 + 2rem); } }
#modal-content { opacity: 0; transform: scale(0.8) translateY(40px); transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: 1.4s; }
#modal-content.active { opacity: 1; transform: scale(1) translateY(0); }
.modal-inner-transition { transition: opacity 0.2s ease, transform 0.2s ease; }
.modal-inner-transition.fade-out { opacity: 0; transform: translateY(-10px); }
.modal-inner-transition.fade-in { opacity: 0; transform: translateY(10px); }
.fade-in-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in-up.is-visible { opacity: 1; transform: translateY(0); }
#gallery-section .gallery-badge-logo { filter: none; }
@media (max-width: 767px) {
#gallery-section .gallery-badge-inner { transform: scale(0.8); transform-origin: center center; }
}
#gallery-section .gallery-card:hover .gallery-card-img { filter: blur(6px); }
#gallery-section .gallery-card:hover .gallery-card-overlay { opacity: 1; }
#gallery-section .gallery-card-overlay-icon { color: #fff; stroke: currentColor; transform: scale(0.7); }
@media (max-width: 767px) {
#gallery-section .gallery-card-overlay-icon { transform: scale(0.5); }
}
#showcase-marquee-section { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
#showcase-marquee-section #rb-carousel-track { overflow: hidden; padding-bottom: 1rem; cursor: grab; user-select: none; }
#showcase-marquee-section #rb-carousel-track.rb-active-drag { cursor: grabbing; }
#showcase-marquee-section #rb-inner-track { display: flex; white-space: nowrap; will-change: transform; }
#showcase-marquee-section .rb-blog-card { width: 75vw; min-width: 75vw; height: 340px; transition: transform .3s ease, box-shadow .3s ease; }
#showcase-marquee-section .rb-blog-card:not(:last-child) { margin-right: .5rem; }
@media (max-width: 767px) {
#showcase-marquee-section .rb-blog-card { width: 72vw; min-width: 72vw; height: 200px; min-height: 200px; }
#showcase-marquee-section #rb-wrapper { min-height: 22vh; }
#showcase-marquee-section #rb-wrapper > div { min-height: 22vh; padding-top: 0.5rem; padding-bottom: 0.5rem; }
#showcase-marquee-section #rb-carousel-track { padding-bottom: 0.5rem; }
#showcase-marquee-section { padding-top: 0.5rem; padding-bottom: 0.5rem; }
}
@media (min-width: 640px) {
#showcase-marquee-section .rb-blog-card { width: 45vw; min-width: 45vw; height: 400px; }
}
@media (min-width: 1024px) {
#showcase-marquee-section .rb-blog-card { width: 380px; min-width: 380px; height: 400px; }
}
#showcase-marquee-section .rb-card-image { filter: brightness(0.77); }
#showcase-marquee-section .group:hover .rb-card-image { filter: blur(6px) brightness(.7); transform: scale(1.05); }
#showcase-marquee-section .group:hover .rb-overlay-content { opacity: 1; transform: translateY(0); }
#showcase-marquee-section .rb-blog-hover-link [data-lucide] { color: #00D4FF; }
#showcase-marquee-section .rb-blog-hover-link:hover .rb-blog-icon-circle {
transform: scale(1.08);
animation: rb-icon-pulse 1.2s ease-in-out infinite;
}
@keyframes rb-icon-pulse {
0%, 100% { transform: scale(1.08); }
50% { transform: scale(1.14); }
}
#showcase-marquee-section .rb-gradient-button {
background: linear-gradient(135deg, #00D4FF 0%, #CC00FF 100%);
color: white !important;
box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);
transition: all .3s ease;
}
#showcase-marquee-section .rb-gradient-button:hover { box-shadow: none; transform: translateY(-2px); opacity: 1; }
#showcase-marquee-section .rb-gradient-tag {
background: linear-gradient(90deg, rgba(31,41,55,.8) 0%, rgba(55,65,81,.6) 100%);
color: #00D4FF;
border: 1px solid rgba(0, 212, 255, 0.2);
backdrop-filter: blur(4px);
}
#showcase-marquee-section .rb-gradient-ring {
padding: 1.5px;
border-radius: 50%;
background: linear-gradient(135deg, #00D4FF, #CC00FF);
box-shadow: 0 4px 10px rgba(0,0,0,.3);
cursor: pointer;
transition: transform 0.3s ease;
}
#showcase-marquee-section .rb-gradient-ring a {
background: rgb(10, 10, 10);
backdrop-filter: none;
transition: all .3s ease;
display: flex;
padding: 0.35rem;
border-radius: 9999px;
cursor: pointer;
}
#showcase-marquee-section .rb-gradient-ring a svg { width: 16px; height: 16px; }
#showcase-marquee-section .rb-caption-link { cursor: pointer; transition: transform 0.3s ease; }
#showcase-marquee-section .rb-blog-link-btn {
width: 2.4rem;
height: 2.4rem;
min-width: 2.4rem;
min-height: 2.4rem;
background: linear-gradient(transparent, transparent) padding-box, linear-gradient(135deg, #00D4FF 0%, #CC00FF 100%) border-box;
background-origin: padding-box, border-box;
background-clip: padding-box, border-box;
border: 1.5px solid transparent;
transition: transform 0.3s ease;
}
#showcase-marquee-section .rb-blog-link-btn:hover i,
#showcase-marquee-section .rb-blog-link-btn:hover [data-lucide] { animation: rb-icon-pulse 0.6s ease-in-out; }
@keyframes rb-icon-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
#showcase-marquee-section .rb-blog-link-btn,
#showcase-marquee-section .rb-blog-link-btn i,
#showcase-marquee-section .rb-blog-link-btn [data-lucide] { color: white; }
#showcase-marquee-section .rb-blog-card h3 { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
/* Pricing: outer section ? mobilra f?ggolegesen ne v?gjunk (banner + hossz? k?rtya); v?zszintesen igen */
.pricing-plan-section-root {
overflow-x: clip;
overflow-y: visible;
}
@media (min-width: 768px) {
.pricing-plan-section-root {
overflow: hidden;
}
}
.pricing-plan-inner {
overflow: visible;
}
.safe-area-pb {
padding-bottom: max(0.25rem, env(safe-area-inset-bottom, 0px));
}
/* Pricing: WEBSITES/DMS swap animation ? mobilon nem haszn?ljuk (kihagyva JS-ben); itt null?zzuk a marad?k oszt?lyokat */
#pricing-plan-anim {
transform: translateX(0);
opacity: 1;
filter: blur(0);
transition: none;
will-change: transform, opacity, filter;
}
@media (max-width: 767px) {
#pricing-plan-anim {
will-change: auto;
transform: none !important;
opacity: 1 !important;
filter: none !important;
transition: none !important;
}
}
#pricing-plan-anim.pricing-cards-exit {
transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease, filter 240ms ease;
}
#pricing-plan-anim[data-swap-dir="right"].pricing-cards-exit-active {
transform: translateX(-22px);
opacity: 0;
filter: blur(1.5px);
}
#pricing-plan-anim[data-swap-dir="left"].pricing-cards-exit-active {
transform: translateX(22px);
opacity: 0;
filter: blur(1.5px);
}
#pricing-plan-anim.pricing-cards-enter {
transition: none;
}
#pricing-plan-anim[data-swap-dir="right"].pricing-cards-enter {
transform: translateX(22px);
opacity: 0;
filter: blur(1.5px);
}
#pricing-plan-anim[data-swap-dir="left"].pricing-cards-enter {
transform: translateX(-22px);
opacity: 0;
filter: blur(1.5px);
}
#pricing-plan-anim.pricing-cards-enter-active {
transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 280ms ease, filter 280ms ease;
transform: translateX(0);
opacity: 1;
filter: blur(0);
}
/* === Dripbo-style glassmorphism pricing cards === */
#pricing-plan-section .pricing-dripbo-card {
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-radius: 2.2rem;
padding: 2rem 2.5rem 2.5rem;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.08);
box-sizing: border-box;
}
#pricing-plan-section .pricing-dripbo-card:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.2);
}
#pricing-plan-section .pricing-dripbo-card--highlighted {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.5);
z-index: 10;
box-shadow: 0 4px 50px rgba(255,255,255,0.1);
}
#pricing-plan-section .pricing-dripbo-card--highlighted:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.5);
box-shadow: 0 4px 50px rgba(255,255,255,0.1);
}
#pricing-plan-section .pricing-dripbo-glow-overlay {
position: absolute;
inset: 0;
border-radius: 2.2rem;
opacity: 1;
pointer-events: none;
background: linear-gradient(to bottom, rgba(255,255,255,0.15), transparent);
transition: opacity 0.5s ease;
}
#pricing-plan-section .group:hover .pricing-dripbo-glow-overlay {
opacity: 1;
}
/* Badge */
#pricing-plan-section .pricing-dripbo-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.8);
border-radius: 9999px;
padding: 0.2rem 0.6rem;
font-size: 10px;
font-weight: 700;
text-transform: uppercase !important;
letter-spacing: 0.18em;
white-space: nowrap;
flex-shrink: 0;
}
#pricing-plan-section .pricing-dripbo-badge--highlighted {
border-color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.1);
color: #fff;
}
#pricing-plan-section .pricing-dripbo-badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.9);
animation: pricing-badge-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
flex-shrink: 0;
}
@keyframes pricing-badge-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* Plan name */
#pricing-plan-section .pricing-dripbo-name {
font-size: 1.25rem;
font-weight: 500;
letter-spacing: -0.02em;
color: rgba(255,255,255,0.9);
margin: 0;
text-transform: none !important;
line-height: 1.2;
}
#pricing-plan-section .pricing-dripbo-card--highlighted .pricing-dripbo-name {
color: #fff;
}
/* Description */
#pricing-plan-section .pricing-dripbo-desc {
font-size: 13.5px;
line-height: 1.6;
margin-bottom: 1.5rem;
min-height: 40px;
color: rgba(255,255,255,0.6);
transition: color 0.3s;
margin-top: 0;
}
#pricing-plan-section .pricing-dripbo-card--highlighted .pricing-dripbo-desc {
color: #fff;
}
#pricing-plan-section .pricing-dripbo-card--highlighted:hover .pricing-dripbo-desc {
color: #fff;
}
/* Price */
#pricing-plan-section .pricing-dripbo-price {
font-size: clamp(34px, 5vw, 44px);
font-weight: 300;
line-height: 1;
letter-spacing: -0.05em;
color: #fff;
white-space: nowrap;
}
@media (min-width: 1024px) {
#pricing-plan-section .pricing-dripbo-price { font-size: 48px; }
}
#pricing-plan-section .pricing-dripbo-price-custom {
font-size: clamp(22px, 3.5vw, 30px);
font-weight: 300;
line-height: 1;
letter-spacing: -0.03em;
color: #fff;
}
#pricing-plan-section .pricing-dripbo-price-detail {
font-size: 14px;
font-weight: 500;
color: rgba(255,255,255,0.4);
margin-left: 4px;
white-space: nowrap;
}
/* Feature list */
#pricing-plan-section .pricing-dripbo-features-list {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 2.5rem;
flex-grow: 1;
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 2rem;
margin-top: auto;
list-style: none;
padding-left: 0;
}
/* Button */
#pricing-plan-section .pricing-dripbo-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: var(--btn-padding-y) var(--btn-padding-x);
min-height: var(--btn-min-height);
font-size: var(--btn-font-size);
font-weight: 400;
letter-spacing: -0.36px;
line-height: 1.2;
border-radius: var(--btn-radius);
border: 1.5px solid #fff;
background: #fff;
color: #0a0a0a;
cursor: pointer;
transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
font-family: "Inter", Arial, sans-serif;
text-align: center;
text-decoration: none !important;
box-sizing: border-box;
}
#pricing-plan-section .pricing-dripbo-btn:hover {
background: transparent;
color: #fff;
border-color: #fff;
transform: none;
}
#pricing-plan-section .pricing-dripbo-btn--highlighted {
background: #fff;
color: #0a0a0a;
border: 1.5px solid #fff;
box-shadow: none;
}
#pricing-plan-section .pricing-dripbo-btn--highlighted:hover {
background: transparent;
box-shadow: none;
color: #fff;
border-color: #fff;
}
/* Pricing: középre zárt fejléc (Rólunk mintájára) */
#pricing-plan-section .pricing-plan-header.section-header-block {
margin-bottom: 0;
}
#pricing-plan-section .pricing-plan-header-filter {
margin-top: 2.5rem;
margin-bottom: 3.5rem;
}
@media (min-width: 640px) {
#pricing-plan-section .pricing-plan-header-filter {
margin-top: 3.25rem;
margin-bottom: 5rem;
}
}
@media (min-width: 1024px) {
#pricing-plan-section .pricing-plan-header-filter {
margin-top: 4rem;
margin-bottom: 6.5rem;
}
}
#pricing-plan-section .pricing-plan-header-filter .pricing-type-dropdown {
margin-left: auto;
margin-right: auto;
}
/* Pricing: modern category dropdown (custom, single pill) */
#pricing-plan-section .pricing-type-dropdown {
width: auto;
min-width: 200px;
}
/* Pricing perks row under section title (icons + short text) */
#pricing-plan-section .pricing-perks-row {
margin-top: 0.25rem;
}
#pricing-plan-section .pricing-perk-item {
white-space: nowrap;
}
#pricing-plan-section .pricing-type-trigger {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1.5rem;
border-radius: 9999px;
color: #fff;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.16);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
transition: transform 0.2s ease, border-color 0.25s ease, background 0.25s ease;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#pricing-plan-section .pricing-type-trigger:hover {
border-color: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.08);
}
#pricing-plan-section .pricing-type-trigger.is-open {
border-color: rgba(255, 255, 255, 0.42);
border-width: 2px;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06), 0 16px 50px rgba(0, 0, 0, 0.35);
}
#pricing-plan-section .pricing-type-value {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.02em;
text-transform: none;
}
#pricing-plan-section .pricing-type-chevron {
transition: transform 0.2s ease;
}
#pricing-plan-section .pricing-type-trigger.is-open .pricing-type-chevron {
transform: rotate(180deg);
}
#pricing-plan-section .pricing-type-menu {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 10px);
padding: 0.5rem;
border-radius: 18px;
background: rgba(20, 20, 20, 0.92);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
transform-origin: top center;
transform: translateY(-6px) scale(0.98);
opacity: 0;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 10;
}
#pricing-plan-section .pricing-type-menu.is-open {
transform: translateY(0) scale(1);
opacity: 1;
}
#pricing-plan-section .pricing-type-option {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 0.85rem;
border-radius: 14px;
border: 1px solid transparent;
background: transparent;
color: rgba(255, 255, 255, 0.9);
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.02em;
text-transform: none;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
text-align: left;
}
#pricing-plan-section .pricing-type-option:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
}
#pricing-plan-section .pricing-type-option[aria-selected="true"] {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
color: #fff;
}
#pricing-plan-section .pricing-type-option-check {
opacity: 0;
transform: scale(0.9);
color: rgba(255, 255, 255, 0.75);
transition: opacity 0.2s ease, transform 0.2s ease;
flex-shrink: 0;
}
#pricing-plan-section .pricing-type-option[aria-selected="true"] .pricing-type-option-check {
opacity: 1;
transform: scale(1);
}
/* Pricing: card body / feature box ? desktop padding (mobil fel?l?r?s al?bb) */
#pricing-plan-section .pricing-card-inner {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
align-items: stretch;
padding: 2.5rem 2rem 2.5rem;
box-sizing: border-box;
}
#pricing-plan-section .pricing-card-features {
padding: 0;
box-sizing: border-box;
}
@media (min-width: 768px) {
#pricing-plan-section #pricing-plan-cards {
align-items: stretch;
}
}
/* Pricing: mobile ? one card, swipe + dots (transform on #pricing-plan-cards only) */
@media (max-width: 767px) {
.pricing-carousel-viewport {
overflow-x: clip;
overflow-y: visible;
max-width: 100%;
touch-action: pan-y pinch-zoom;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
#pricing-plan-cards {
display: flex !important;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: 0;
width: 100%;
max-width: none;
grid-template-columns: none !important;
padding-top: 0 !important;
padding-bottom: 1rem;
transition: transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1);
backface-visibility: hidden;
}
#pricing-plan-cards > * {
flex: 0 0 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
align-self: stretch;
height: auto;
}
/* ?L?legzet? a k?rtya ?s a k?psz?l k?z?tt + halv?ny m?lys?g; tartalom k?z?pen a dobozban */
#pricing-plan-section #pricing-plan-cards > .group {
padding: 3px;
text-align: center;
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
}
#pricing-plan-dots.pricing-plan-dots-row {
flex-shrink: 0;
width: 100%;
padding-left: 0.5rem;
padding-right: 0.5rem;
margin-top: 1.35rem;
}
#pricing-plan-section .pricing-type-menu {
max-height: min(58vh, 280px);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* K?rtya belseje: k?z?pre z?rt hierarchia + egy?rtelmu f?ggoleges ritmus */
#pricing-plan-section .pricing-plan-title-row {
justify-content: center;
text-align: center;
margin-bottom: 0.625rem;
}
#pricing-plan-section .pricing-plan-title-stack {
justify-content: center;
gap: 0.4rem;
}
#pricing-plan-section .pricing-plan-title-stack .pricing-card-title {
text-align: center;
text-wrap: balance;
}
#pricing-plan-section .pricing-card-desc {
text-align: center;
margin-bottom: 0.875rem !important;
padding-left: 0.125rem;
padding-right: 0.125rem;
}
#pricing-plan-section .pricing-card-price-row {
justify-content: center;
margin-bottom: 1.125rem !important;
gap: 0.125rem;
}
#pricing-plan-section .pricing-card-inner {
padding: 1.45rem 1.15rem 1.55rem;
}
#pricing-plan-section .pricing-card--premium .pricing-card-inner {
padding-top: 1.6rem;
}
#pricing-plan-section .pricing-card-features {
padding: 1rem 1rem;
margin-bottom: 1.125rem !important;
border-radius: 14px;
}
#pricing-plan-section .pricing-features-heading {
text-align: center;
margin-bottom: 0.75rem !important;
}
#pricing-plan-section .pricing-card-features ul {
text-align: left;
}
#pricing-plan-section .pricing-card-features li span {
text-align: left;
}
#pricing-plan-dots {
-webkit-tap-highlight-color: transparent;
}
.pricing-dot-btn {
width: 0.4rem;
height: 0.4rem;
border-radius: 9999px;
border: 0;
padding: 0;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
transition: width 0.3s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
cursor: pointer;
}
.pricing-dot-btn[aria-selected="true"] {
width: 1.35rem;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.pricing-dot-btn:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 3px;
}
}
/* Pricing plan info: same slide-over timing as Services (#service-detail-modal) */
#pricing-plan-info-modal.service-detail-slide-root {
pointer-events: none;
opacity: 1;
}
#pricing-plan-info-modal.service-detail-slide-root.active {
pointer-events: auto;
}
#pricing-plan-info-backdrop.service-detail-background-dim {
-webkit-tap-highlight-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: rgba(0, 0, 0, 0.52);
opacity: 0;
transition: opacity var(--service-detail-duration) var(--service-detail-ease);
}
#pricing-plan-info-modal.service-detail-slide-root.active #pricing-plan-info-backdrop.service-detail-background-dim {
opacity: 1;
transition: opacity var(--service-detail-open-duration) var(--service-detail-ease);
}
#pricing-plan-info-panel.service-detail-panel--motion {
top: 16px !important;
bottom: 16px !important;
right: 16px !important;
height: auto !important;
min-height: 0;
border-radius: 28px !important;
overflow: hidden;
transform: translate3d(calc(100% + 32px), 0, 0) !important;
transition: transform var(--service-detail-duration) var(--service-detail-ease);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
#pricing-plan-info-modal.service-detail-slide-root.active #pricing-plan-info-panel.service-detail-panel--motion {
transform: translate3d(0, 0, 0) !important;
transition: transform var(--service-detail-open-duration) var(--service-detail-ease);
}
#pricing-plan-info-body p {
margin: 0 0 1rem;
}
#pricing-plan-info-body p:last-child {
margin-bottom: 0;
}
/* Grid: mobilon k?z?p (fel?l?r?s a mobil blokkban); tablet+: balra igaz?tott k?rtya olvas?s */
@media (min-width: 768px) {
#pricing-plan-section #pricing-plan-cards > .group {
text-align: left;
}
#pricing-plan-section .pricing-plan-title-row {
justify-content: flex-start;
text-align: left;
}
#pricing-plan-section .pricing-plan-title-stack {
justify-content: flex-start;
}
#pricing-plan-section .pricing-plan-title-stack .pricing-card-title {
text-align: left;
text-wrap: unset;
}
}
#pricing-plan-section .pricing-plan-title-row {
width: 100%;
margin-bottom: 1.4rem;
display: flex;
align-items: center;
}
#pricing-plan-section .pricing-plan-title-stack {
display: inline-flex;
align-items: center;
gap: 0.35rem;
max-width: 100%;
}
#pricing-plan-section .pricing-plan-title-stack .pricing-card-title {
margin: 0;
min-width: 0;
}
#pricing-plan-section .pricing-plan-info-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin: 0;
padding: 0.125rem;
border: none;
border-radius: 2px;
cursor: pointer;
background: transparent;
box-shadow: none;
color: rgba(255, 255, 255, 0.55);
transition: color 0.2s ease;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
appearance: none;
}
#pricing-plan-section .pricing-plan-info-btn:hover {
color: #00d4ff;
background: transparent;
box-shadow: none;
}
#pricing-plan-section .pricing-plan-info-btn:focus-visible {
outline: 2px solid rgba(0, 212, 255, 0.6);
outline-offset: 2px;
}
.page-hero {
position: relative;
width: 100%;
min-height: 50vh;
overflow: hidden;
background-color: #0a0a0a;
}
.page-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
}
.page-hero-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
z-index: 1;
}
.page-hero-gradient {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 100%);
z-index: 2;
pointer-events: none;
}
.page-hero-content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 50vh;
padding: 6rem 1.5rem 4rem;
text-align: center;
color: white;
}
.page-hero-title {
font-family: var(--font-accent);
font-size: clamp(28px, 4vw, 52px);
font-weight: 700;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: -0.02em;
margin: 0 0 0.5rem;
}
.page-hero-subtitle {
font-family: var(--font-text);
font-size: clamp(14px, 1.8vw, 18px);
font-weight: 400;
opacity: 0.9;
margin: 0;
max-width: 560px;
}
#portfolio-detail-modal { opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
#portfolio-detail-modal.active { opacity: 1; pointer-events: auto; }
#portfolio-detail-panel { transform: scale(0.96) translateY(20px); transition: transform 0.35s ease; }
#portfolio-detail-modal.active #portfolio-detail-panel { transform: scale(1) translateY(0); }
.portfolio-detail-panel-scroll {
scrollbar-gutter: stable;
border-radius: 1rem;
}
.portfolio-detail-panel-scroll::-webkit-scrollbar { width: 10px; }
.portfolio-detail-panel-scroll::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 0 1rem 1rem 0; }
.portfolio-detail-panel-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #00D4FF 0%, #CC00FF 100%); border-radius: 10px; }
.portfolio-detail-panel-scroll::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #00b8e6 0%, #b300e6 100%); }
.portfolio-pill-1 { background: rgba(0, 212, 255, 0.35); color: #fff; }
.portfolio-pill-2 { background: rgba(204, 0, 255, 0.35); color: #fff; }
.portfolio-pill-3 { background: rgba(0, 180, 120, 0.5); color: #fff; }
@supports (scrollbar-color: #00D4FF #f1f1f1) {
.portfolio-detail-panel-scroll { scrollbar-color: #00D4FF #f1f1f1; scrollbar-width: thin; }
}
.portfolio-detail-gallery img { scroll-snap-align: start; min-width: 140px; width: 140px; }
@media (min-width: 640px) {
.portfolio-detail-gallery img { min-width: 180px; width: 180px; }
}
.portfolio-detail-gallery-auto {
width: 100%;
max-width: 596px;
overflow: hidden;
min-height: 8rem;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 640px) {
.portfolio-detail-gallery-auto { max-width: 756px; min-height: 10rem; }
}
.portfolio-detail-gallery-track {
display: flex;
gap: 0.75rem;
width: max-content;
animation: portfolio-gallery-scroll 28s linear infinite;
}
.portfolio-detail-gallery-slide {
width: 140px;
min-width: 140px;
height: 8rem;
object-fit: cover;
border-radius: 0.75rem;
flex-shrink: 0;
display: block;
}
@media (min-width: 640px) {
.portfolio-detail-gallery-slide { width: 180px; min-width: 180px; height: 10rem; }
}
@keyframes portfolio-gallery-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Service detail / Get in touch / pricing info: panel + erosebb h?tt?rs?t?t?t?s (blur n?lk?l) */
#service-detail-modal.service-detail-slide-root,
#get-started-contact-modal.service-detail-slide-root {
/* Root does not fade; backdrop + panel animate in parallel. */
pointer-events: none;
opacity: 1;
}
#service-detail-modal.service-detail-slide-root.active,
#get-started-contact-modal.service-detail-slide-root.active {
pointer-events: auto;
}
#service-detail-backdrop.service-detail-background-dim,
#get-started-backdrop.service-detail-background-dim {
-webkit-tap-highlight-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: rgba(0, 0, 0, 0.52);
opacity: 0;
transition: opacity var(--service-detail-duration) var(--service-detail-ease);
}
#service-detail-modal.service-detail-slide-root.active #service-detail-backdrop.service-detail-background-dim,
#get-started-contact-modal.service-detail-slide-root.active #get-started-backdrop.service-detail-background-dim {
opacity: 1;
transition: opacity var(--service-detail-open-duration) var(--service-detail-ease);
}
/* Teljes magass?g, jobb sz?l ? cs?sz?s teljesen a viewporton k?v?l */
#service-detail-panel.service-detail-panel--motion,
#get-started-panel.service-detail-panel--motion {
top: 16px !important;
bottom: 16px !important;
right: 16px !important;
height: auto !important;
min-height: 0;
border-radius: 28px !important;
overflow: hidden;
transform: translate3d(calc(100% + 32px), 0, 0) !important;
transition: transform var(--service-detail-duration) var(--service-detail-ease);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
#service-detail-modal.service-detail-slide-root.active #service-detail-panel.service-detail-panel--motion,
#get-started-contact-modal.service-detail-slide-root.active #get-started-panel.service-detail-panel--motion {
transform: translate3d(0, 0, 0) !important;
transition: transform var(--service-detail-open-duration) var(--service-detail-ease);
}
/* Services / Works panel: teljes magass?g, ?les sarkok */
#service-detail-panel.service-detail-panel--motion {
border-radius: 28px !important;
border: none !important;
border-left: 1px solid rgba(15, 23, 42, 0.08) !important;
box-shadow: -4px 0 32px rgba(15, 23, 42, 0.08) !important;
}
@media (prefers-reduced-motion: reduce) {
:root {
--service-detail-duration: 0s;
--service-detail-open-duration: 0s;
}
}
#service-detail-panel .service-modal-hero-wrap { border-radius: 0.75rem; overflow: hidden; }
#service-detail-panel .service-modal-hero-wd {
border-radius: 0.75rem;
overflow: hidden;
}
#service-detail-panel .portfolio-modal-hero-frame,
#service-detail-panel a.portfolio-modal-hero-link.portfolio-modal-hero-frame,
#service-detail-panel #service-overview-carousel,
#service-detail-panel .service-modal-auto-gallery {
border-radius: 0.75rem !important;
overflow: hidden;
}
/* WORKS slide-over: same width as SERVICES (#service-detail-panel default / Tailwind). */
#service-detail-panel.is-portfolio-panel-wide {
width: min(608px, 80vw) !important;
max-width: 608px !important;
}
#service-detail-panel.is-portfolio-panel-wide .service-modal-wd-gutter {
padding-left: 1.25rem;
padding-right: 1.25rem;
max-width: 100%;
}
@media (min-width: 640px) {
#service-detail-panel.is-portfolio-panel-wide .service-modal-wd-gutter {
padding-left: 1.75rem;
padding-right: 1.75rem;
}
}
/* Egys?ges szolg?ltat?s-mod?l: c?m a g?rgetett tartalomban; a fejl?csor csak a bez?r?, absolute */
#service-detail-panel.is-service-modal-unified .service-detail-header {
position: absolute;
z-index: 30;
top: 0;
left: 0;
right: 0;
min-height: 3.25rem;
height: 3.25rem;
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0.625rem 0.75rem 0.5rem 0;
pointer-events: none;
border-radius: 0;
box-shadow: none;
}
@media (min-width: 640px) {
#service-detail-panel.is-service-modal-unified .service-detail-header {
height: 3.75rem;
min-height: 3.75rem;
padding: 0.75rem 1rem 0.625rem 0;
}
}
#service-detail-panel.is-service-modal-unified .service-detail-header .service-detail-close-btn {
pointer-events: auto;
flex-shrink: 0;
background-color: #f3f4f6 !important;
}
#service-detail-panel.is-service-modal-unified .service-detail-header .service-detail-close-btn:hover {
background-color: #e5e7eb !important;
opacity: 1;
}
#service-detail-panel.is-service-modal-unified .service-detail-header h2,
#service-detail-panel.is-service-modal-unified .service-detail-header .service-detail-header-title {
display: none !important;
}
#service-detail-panel.is-service-modal-unified .service-modal-wd-top-title-row {
display: none;
}
#service-detail-panel .service-modal-wd-gutter.pt-5 {
padding-top: 40px !important;
}
/* Szolg?ltat?s-mod?l: szimmetrikus oldals? padding a panel sz?lein */
#service-detail-panel.is-service-modal-unified .service-modal-wd-gutter {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
@media (min-width: 640px) {
#service-detail-panel.is-service-modal-unified .service-modal-wd-gutter {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
/* Service modal: respect safe area; hero top radius matches panel (24px) */
@media (max-width: 1023.98px) {
.service-detail-modal-root {
min-height: 100dvh;
min-height: 100svh;
}
.service-detail-panel.service-detail-panel-scroll {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
}
#service-detail-panel .service-hero-subtitle-card-style {
font-family: var(--font-body);
font-size: 18px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: none;
color: rgba(255,255,255,0.95);
max-width: 32em;
margin-left: auto;
margin-right: auto;
line-height: 1.35;
text-align: center;
}
#service-detail-panel .boabo-page-hero-title--plain { font-size: clamp(30px, 5.5vw, 72px); }
.service-hero-meta-capsule {
display: inline-flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
gap: 0;
max-width: 100%;
padding: 1rem 1.5rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.service-hero-meta-capsule__col {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 1.25rem;
min-width: 0;
}
.service-hero-meta-capsule__label {
font-family: var(--font-body, "Inter", ui-sans-serif, system-ui, sans-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
margin-bottom: 0.35rem;
}
.service-hero-meta-capsule__value {
font-family: var(--font-body, "Inter", ui-sans-serif, system-ui, sans-serif);
font-size: clamp(1rem, 2.5vw, 1.25rem);
font-weight: 700;
color: #fff;
line-height: 1.2;
letter-spacing: -0.02em;
}
.service-hero-meta-capsule__divider {
width: 1px;
align-self: stretch;
min-height: 2.75rem;
background: rgba(255, 255, 255, 0.28);
margin: 0 0.25rem;
flex-shrink: 0;
}
@media (max-width: 639px) {
#service-detail-panel .boabo-page-hero-title--plain { font-size: clamp(20px, 5vw, 40px); }
.service-hero-meta-capsule {
flex-direction: column;
border-radius: 1.25rem;
padding: 1rem 1.25rem;
width: 100%;
max-width: 22rem;
}
.service-hero-meta-capsule__col { padding: 0.5rem 0.25rem; }
.service-hero-meta-capsule__divider {
width: 100%;
height: 1px;
min-height: 0;
margin: 0.25rem 0;
}
}
/* Mobile: main titles subtext 2px smaller */
@media (max-width: 1023px) {
#service-detail-panel .service-modal-body-p { font-size: 15px !important; }
}
/* Mod?l foc?m (pl. WEBSITE DEVELOPMENT / projekt neve): fel?l?rja a glob?lis h4 cranez m?retet */
#service-detail-panel .service-modal-wd-main-title {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
font-size: 24px !important;
font-weight: 700 !important;
font-style: normal !important;
line-height: 1.2 !important;
letter-spacing: 0.025em !important;
text-transform: none !important;
color: rgb(17 24 39) !important;
margin-top: 0 !important;
margin-bottom: 1.5rem !important;
}
/* Mod?l f?zisc?mek (Services / Works / Details / Results): fel?l?rja a glob?lis h2?h3 cranez m?retet */
#service-detail-panel .service-modal-wd-phase-heading {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
font-style: normal !important;
letter-spacing: -0.025em !important;
text-transform: none !important;
color: rgb(107 114 128) !important;
line-height: 1.625 !important;
}
@media (min-width: 640px) {
#service-detail-panel .service-modal-wd-phase-heading {
font-size: 15px !important;
}
}
/* WD mod?l: What we do? ? desktop +3px a 15px alaphoz */
@media (min-width: 1024px) {
#service-detail-panel .service-modal-wd-phase-heading {
font-size: 18px !important;
}
}
/* Service detail close: ugyanaz az X (SVG + vonalrajz), mint a Get in touch panel */
#service-detail-close-btn {
-webkit-tap-highlight-color: transparent;
outline: none;
-webkit-user-select: none;
user-select: none;
}
#service-detail-close-btn:focus,
#service-detail-close-btn:focus-visible,
#service-detail-close-btn:hover {
outline: none;
box-shadow: none;
}
#service-detail-close-btn:active {
transform: none;
box-shadow: none;
outline: none;
}
#service-detail-close-btn svg,
#service-detail-close-btn i,
#service-detail-close-btn [data-lucide] {
pointer-events: none;
outline: none;
}
.service-detail-header-title { word-wrap: break-word; overflow-wrap: break-word; }
@media (min-width: 480px) {
.service-detail-header-title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
}
#service-detail-panel .service-overview-carousel-slide { transition: opacity 0.4s ease; }
/* Lucide check / circle-check felsorol?sok: v?kony elv?laszt? sorok */
#service-detail-panel .service-modal-lucide-list > li {
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
#service-detail-panel .service-modal-wd-what-item {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
@media (min-width: 640px) {
#service-detail-panel .service-modal-wd-what-item {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
}
#service-detail-panel .service-modal-wd-what-item .service-modal-wd-what-icon {
align-self: flex-start;
color: #0a0a0a;
}
#service-detail-panel .service-modal-wd-what-item .service-modal-wd-what-icon svg {
stroke: #0a0a0a;
}
#service-detail-panel .service-modal-wd-what-item > span:last-child {
line-height: 1.8;
}
#service-detail-panel .service-modal-lucide-list > li:first-child {
padding-top: 0;
}
#service-detail-panel .service-modal-lucide-list > li:last-child {
border-bottom: none;
padding-bottom: 0;
}
/* Portfolio Details: ugyanaz a v?kony elv?laszt? + Manrope, mint a Results list?n?l */
#service-detail-panel .portfolio-detail-list {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}
#service-detail-panel .portfolio-detail-list > .portfolio-detail-line {
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
#service-detail-panel .portfolio-detail-list > .portfolio-detail-line:first-child {
padding-top: 0;
}
#service-detail-panel .portfolio-detail-list > .portfolio-detail-line:last-child {
border-bottom: none;
padding-bottom: 0;
}
/* Service modal WD template: auto gallery ? smooth dissolve over previous slide */
#service-detail-panel .service-modal-auto-gallery {
position: relative;
width: 100%;
max-height: var(--boabo-key-visual-max-height, min(calc(420px * 1.43), calc(55vh * 1.43)));
aspect-ratio: var(--boabo-key-visual-aspect-ratio, 21 / 14.3);
background: #f3f4f6;
user-select: none;
-webkit-user-select: none;
border-radius: 0.75rem;
overflow: hidden;
}
#service-detail-panel .service-modal-auto-gallery__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
z-index: 1;
pointer-events: none;
transition: none;
backface-visibility: hidden;
transform: translateZ(0);
will-change: opacity;
}
#service-detail-panel .service-modal-auto-gallery__img--visible {
opacity: 1;
z-index: 2;
}
#service-detail-panel .service-modal-auto-gallery video.service-modal-auto-gallery__img {
background: #f3f4f6;
}
@media (prefers-reduced-motion: reduce) {
#service-detail-panel .service-modal-auto-gallery__img {
transition: none !important;
}
}
/* Gal?ria-karusszel (szolg?ltat?s / Works panel): alap ar?ny; desktop ~+43% magasabb (1.3? majd +10%) */
#service-detail-panel #service-overview-carousel {
aspect-ratio: 21 / 9;
}
@media (min-width: 1024px) {
#service-detail-panel #service-overview-carousel {
aspect-ratio: 21 / 12.87;
}
#service-detail-panel img.service-detail-panel-key-visual {
max-height: var(--boabo-key-visual-max-height, min(calc(420px * 1.43), calc(55vh * 1.43))) !important;
aspect-ratio: var(--boabo-key-visual-aspect-ratio, 21 / 14.3);
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
}
/* Mobil / tablet: ugyanaz a magasabb gal?ria?kulcsvizu?l ar?ny mint desktopon (viewportra sk?l?zva) */
@media (max-width: 1023.98px) {
#service-detail-panel #service-overview-carousel {
aspect-ratio: 21 / 12.87;
}
#service-detail-panel img.service-detail-panel-key-visual {
max-height: var(--boabo-key-visual-max-height, min(calc(420px * 1.43), calc(55vh * 1.43))) !important;
aspect-ratio: var(--boabo-key-visual-aspect-ratio, 21 / 14.3);
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
}
/* Service detail panel: scrollbar; a lap k?lso sarka kerek (#service-detail-panel overflow) */
.service-detail-panel-scroll { scrollbar-gutter: stable; border-radius: 0; }
#service-detail-panel .service-detail-panel-scroll {
border-radius: 0 !important;
}
/* Get in touch: feh?r lap, teljes magass?g, ?les sarkok */
#get-started-panel.get-started-contact-sheet {
width: min(460px, calc(100vw - 32px)) !important;
max-width: none !important;
border-radius: 28px !important;
background: #ffffff;
border: none !important;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22) !important;
}
#get-started-panel .get-started-sheet-header {
position: relative;
background: #ffffff;
border-bottom: none;
border-radius: 28px 28px 0 0;
padding: 2.5rem 1rem 1rem 1.5rem !important;
min-height: 0 !important;
}
#get-started-panel .get-started-sheet-header .get-started-panel-headline {
align-self: flex-start;
font-size: clamp(23px, 3.8vw, 24px) !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
line-height: 1.25 !important;
color: #111827 !important;
}
#service-detail-panel:not(.is-service-modal-unified) > .service-detail-header {
position: relative;
}
#get-started-panel .get-started-sheet-header .get-started-panel-headline {
align-self: center;
}
/* Csak az X a panel jobb felso sark?ban; a c?m a fejl?c paddingj?vel marad lejjebb */
#get-started-panel .get-started-close-btn {
position: absolute;
top: 0.625rem;
right: 0.625rem;
z-index: 2;
background: transparent !important;
color: #0a0a0a !important;
border: none !important;
box-shadow: none !important;
transition: color 0.2s ease, opacity 0.2s ease;
}
#service-detail-panel:not(.is-service-modal-unified) #service-detail-close-btn.get-started-close-btn {
position: absolute;
top: 0.625rem;
right: 0.625rem;
z-index: 2;
background-color: #f3f4f6 !important;
color: #0a0a0a !important;
border: none !important;
box-shadow: none !important;
transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
@media (min-width: 640px) {
#get-started-panel .get-started-close-btn,
#service-detail-panel:not(.is-service-modal-unified) #service-detail-close-btn.get-started-close-btn {
top: 0.75rem;
right: 1rem;
}
}
#get-started-panel .get-started-close-btn:hover {
background: transparent !important;
color: #9ca3af !important;
opacity: 1;
border: none !important;
}
#service-detail-panel #service-detail-close-btn.get-started-close-btn:hover {
background-color: #e5e7eb !important;
color: #0a0a0a !important;
opacity: 1;
border: none !important;
}
#get-started-panel .get-started-close-svg,
#service-detail-panel #service-detail-close-btn .get-started-close-svg {
display: block;
}
#get-started-panel .get-started-close-path,
#service-detail-panel #service-detail-close-btn .get-started-close-path {
stroke-dasharray: 1;
stroke-dashoffset: 0;
}
#get-started-panel .get-started-close-btn:hover .get-started-close-path--1,
#service-detail-panel #service-detail-close-btn.get-started-close-btn:hover .get-started-close-path--1 {
animation: get-started-close-x-draw1 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#get-started-panel .get-started-close-btn:hover .get-started-close-path--2,
#service-detail-panel #service-detail-close-btn.get-started-close-btn:hover .get-started-close-path--2 {
animation: get-started-close-x-draw2 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.18s forwards;
}
@keyframes get-started-close-x-draw1 {
0% {
stroke-dashoffset: 1;
opacity: 0.2;
}
40% {
opacity: 1;
}
100% {
stroke-dashoffset: 0;
opacity: 1;
}
}
@keyframes get-started-close-x-draw2 {
0% {
stroke-dashoffset: 1;
opacity: 0.2;
}
40% {
opacity: 1;
}
100% {
stroke-dashoffset: 0;
opacity: 1;
}
}
#get-started-panel .get-started-panel-scroll,
#get-started-panel .get-started-form-scroll {
border-radius: 0 !important;
background: #ffffff;
}
#get-started-panel .get-started-form-footer {
border-radius: 0;
margin-top: auto;
padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
}
#get-started-panel .get-started-panel-scroll::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 10px;
margin: 10px 0;
}
#get-started-panel .get-started-panel-scroll::-webkit-scrollbar-thumb {
border: 2px solid #f1f5f9;
}
/* Get in touch: Pricing-szeru egyedi leg?rd?lo (vil?gos t?ma) */
#get-started-panel .gs-type-dropdown {
width: 100%;
max-width: min(100%, 400px);
}
#get-started-panel .gs-type-trigger {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.8rem 1rem 0.8rem 1.15rem;
border-radius: 18px;
color: #0f172a;
background: #f8fafc;
border: 1px solid rgba(15, 23, 42, 0.1);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#get-started-panel .gs-type-trigger:hover {
border-color: rgba(15, 23, 42, 0.16);
background: #ffffff;
}
#get-started-panel .gs-type-trigger.is-open {
border-color: rgba(0, 212, 255, 0.45);
border-width: 2px;
padding: calc(0.8rem - 1px) calc(1rem - 1px) calc(0.8rem - 1px) calc(1.15rem - 1px);
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12), 0 8px 28px rgba(15, 23, 42, 0.08);
background: #ffffff;
}
#get-started-panel .gs-type-value {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.02em;
text-align: left;
}
#get-started-panel .gs-type-chevron {
transition: transform 0.2s ease;
}
#get-started-panel .gs-type-trigger.is-open .gs-type-chevron {
transform: rotate(180deg);
}
#get-started-panel .gs-type-menu {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 10px);
padding: 0.45rem;
border-radius: 18px;
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(15, 23, 42, 0.1);
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transform-origin: top center;
transform: translateY(-6px) scale(0.98);
opacity: 0;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 20;
}
#get-started-panel .gs-type-menu.is-open {
transform: translateY(0) scale(1);
opacity: 1;
}
#get-started-panel .gs-type-option {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.72rem 0.85rem;
border-radius: 14px;
border: 1px solid transparent;
background: transparent;
color: #1e293b;
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
text-align: left;
}
#get-started-panel .gs-type-option:hover {
background: #f1f5f9;
border-color: rgba(15, 23, 42, 0.06);
}
#get-started-panel .gs-type-option[aria-selected="true"] {
background: rgba(0, 212, 255, 0.08);
border-color: rgba(0, 212, 255, 0.25);
color: #0f172a;
}
#get-started-panel .gs-type-option-check {
opacity: 0;
transform: scale(0.9);
color: #00b8e6;
transition: opacity 0.2s ease, transform 0.2s ease;
flex-shrink: 0;
}
#get-started-panel .gs-type-option[aria-selected="true"] .gs-type-option-check {
opacity: 1;
transform: scale(1);
}
/* Get in touch: al?h?z?sos mezok + pipa */
#get-started-panel .get-started-underline-stack {
position: relative;
width: 100%;
}
#get-started-panel .get-started-field-underline {
display: block;
width: 100%;
box-sizing: border-box;
margin: 0;
border: none;
border-radius: 0;
background: transparent;
padding: 0.55rem 2rem 0.5rem 0;
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: 15px;
line-height: 1.45;
color: #0a0a0a;
box-shadow: none;
transition: color 0.15s ease;
-webkit-appearance: none;
appearance: none;
}
#get-started-panel .get-started-field-underline:focus {
outline: none;
box-shadow: none;
}
#get-started-panel .get-started-field-underline--textarea {
min-height: 140px;
resize: none;
padding-top: 0.45rem;
padding-bottom: 0.65rem;
line-height: 1.5;
}
#get-started-panel .get-started-line-track {
position: relative;
height: 1px;
width: 100%;
background: rgba(15, 23, 42, 0.18);
margin-top: 1px;
overflow: visible;
}
#get-started-panel .get-started-line-fill {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #0a0a0a;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
#get-started-panel .get-started-underline-stack:focus-within .get-started-line-fill {
transform: scaleX(1);
}
#get-started-panel .get-started-field-check {
position: absolute;
top: 0.4rem;
right: 0;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: #22c55e;
opacity: 0;
transform: scale(0.82);
transition: opacity 0.22s ease, transform 0.22s ease;
pointer-events: none;
}
#get-started-panel .get-started-field-check svg {
stroke: currentColor;
}
#get-started-panel .get-started-underline-stack--textarea .get-started-field-check {
top: 0.5rem;
}
#get-started-panel .get-started-underline-stack:not(.get-started-email-stack):has(.get-started-field-underline:valid) .get-started-field-check {
opacity: 1;
transform: scale(1);
}
#get-started-panel .get-started-email-stack[data-show-email-check="true"] .get-started-field-check {
opacity: 1;
transform: scale(1);
}
/* K?lts?gvet?s / ?rdeklod?s kapszul?k */
#get-started-panel .get-started-budget-pill {
position: relative;
cursor: pointer;
margin: 0;
}
#get-started-panel .get-started-budget-pill-inner {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.65rem 1.1rem;
border-radius: 9999px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: #0a0a0a;
background: #ffffff;
border: 1.5px solid rgba(15, 23, 42, 0.22);
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
#get-started-panel .get-started-budget-pill:hover .get-started-budget-input:not(:checked) + .get-started-budget-pill-inner {
background: #0a0a0a;
border-color: #0a0a0a;
color: #ffffff;
}
#get-started-panel .get-started-budget-input:focus-visible + .get-started-budget-pill-inner {
outline: 2px solid #0f172a;
outline-offset: 2px;
}
#get-started-panel .get-started-budget-input:checked + .get-started-budget-pill-inner {
background: #000000;
border-color: #000000;
color: #ffffff;
box-shadow: none;
}
#get-started-panel .get-started-budget-pill:hover .get-started-budget-input:checked + .get-started-budget-pill-inner {
background: #171717;
border-color: #171717;
color: #ffffff;
}
#get-started-panel .get-started-form-modern .get-started-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #0a0a0a;
}
#get-started-panel .get-started-form-modern label.get-started-label {
display: block;
}
/* ?Interested in? / Pricing: m?sodlagos sz?rke (mint a service-modal c?m) */
#get-started-panel .get-started-interest-heading {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.625;
letter-spacing: -0.01em;
color: #6b7280;
text-transform: none;
}
@media (min-width: 640px) {
#get-started-panel .get-started-interest-heading {
font-size: 15px;
}
}
/* GDPR: lekerek?tett n?gyzet, pip?n?l fekete h?tt?r + feh?r pipa */
#get-started-panel .get-started-gdpr-control {
-webkit-appearance: none;
appearance: none;
width: 1.125rem;
height: 1.125rem;
margin-top: 0;
border-radius: 0.375rem;
border: 1.5px solid rgba(148, 163, 184, 0.85);
background-color: #ffffff;
cursor: pointer;
flex-shrink: 0;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#get-started-panel .get-started-gdpr-control:checked {
background-color: #0a0a0a;
border-color: #0a0a0a;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-size: 58%;
background-position: center;
background-repeat: no-repeat;
}
#get-started-panel .get-started-gdpr-control:focus-visible {
outline: 2px solid #0a0a0a;
outline-offset: 2px;
}
#get-started-panel .get-started-privacy-link {
font-weight: 600;
color: #0f172a;
text-decoration: none;
border-bottom: 1px solid rgba(15, 23, 42, 0.35);
transition: border-color 0.15s ease, color 0.15s ease;
}
#get-started-panel .get-started-privacy-link:hover {
color: #020617;
border-bottom-color: #0f172a;
}
#get-started-panel .get-started-privacy-link:focus-visible {
outline: 2px solid #0f172a;
outline-offset: 2px;
border-radius: 2px;
}
#get-started-panel .get-started-field-underline::placeholder {
color: #94a3b8;
}
/* Send request: Globallers .btn.btn--black */
#get-started-panel .get-started-submit-request {
position: relative;
min-width: 10rem;
padding: var(--btn-padding-y) var(--btn-padding-x);
font-size: var(--btn-font-size);
font-weight: 400;
letter-spacing: -0.36px;
line-height: 1.2;
border-radius: var(--btn-radius);
background: rgba(10, 10, 10, 0.06) !important;
border: 1px solid rgba(10, 10, 10, 0.18) !important;
color: #0a0a0a !important;
min-height: 50px;
padding: 0.8rem 1.3em;
font-size: 16px;
transition: padding 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
/* Send request label: same typography as Pricing card ?Get started? / GET STARTED */
#get-started-panel .get-started-submit-request .btn-cta-text {
color: #ffffff !important;
position: relative;
z-index: 1;
font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
text-transform: none !important;
}
#get-started-panel .get-started-submit-request:hover {
background: rgba(10, 10, 10, 0.06) !important;
border-color: rgba(10, 10, 10, 0.18) !important;
color: #0a0a0a !important;
transform: none;
}
#get-started-panel .get-started-submit-request:hover .btn-cta-text {
color: #0a0a0a !important;
}
#get-started-panel .get-started-gdpr-label {
white-space: normal;
}
#get-started-panel .get-started-validation-anchor {
display: block;
height: 0;
margin: 0;
padding: 0;
overflow: visible;
}
#get-started-panel #get-started-validation-park {
margin: 0;
padding: 0;
min-height: 0;
line-height: 0;
}
#get-started-panel .get-started-validation-tip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
width: max-content;
max-width: min(100%, calc(100vw - 4rem));
box-sizing: border-box;
padding: 0.5rem 0.75rem;
border-radius: 12px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 18px rgba(15, 23, 42, 0.05);
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: 13px;
line-height: 1.45;
font-weight: 500;
color: #0f172a;
}
#get-started-panel .get-started-validation-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #dc2626;
}
#get-started-panel .get-started-validation-icon svg {
display: block;
}
#get-started-panel .get-started-validation-message {
flex: 1;
min-width: 0;
}
#get-started-panel .get-started-validation-tip.hidden {
display: none !important;
}
.service-detail-panel-scroll::-webkit-scrollbar { width: 10px; }
.service-detail-panel-scroll::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; margin: 8px 0; }
.service-detail-panel-scroll::-webkit-scrollbar-thumb { background: #bdbdbd; border-radius: 10px; min-height: 40px; border: 2px solid #f1f1f1; box-sizing: border-box; }
.service-detail-panel-scroll::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
@supports (scrollbar-gutter: stable) {
.service-detail-panel-scroll { padding-right: 2px; }
}
#get-started-trigger {
-webkit-appearance: none;
appearance: none;
}
/* GDPR checkboxes: blue when checked (both get-started and quote form) */
#get-started-gdpr:checked,
#quote-gdpr:checked { accent-color: #00D4FF; }
@media (min-width: 640px) {
.join-growing-text { font-size: 16px; }
}
/* Quote section: jellyfish image, no black background */
.quote-jellyfish-wrap { background: transparent !important; }
.quote-jellyfish-wrap .quote-jellyfish-img { margin-top: 14%; mix-blend-mode: lighten; }
.nav-menu-link.text-primary { position: relative; }
.boabo-page-hero {
width: 100%;
min-height: 480px;
border-radius: 12px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.boabo-page-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 100%);
z-index: 1;
}
.boabo-page-hero-title {
position: relative;
z-index: 2;
font-family: var(--font-accent);
font-size: clamp(38px, 6vw, 80px);
font-weight: 700;
text-transform: uppercase;
line-height: 1;
letter-spacing: -0.5px;
color: #fff;
background-color: #00D4FF;
padding: 8px 28px;
margin: 0;
text-align: center;
}
.boabo-page-hero-title--plain {
background-color: transparent;
padding-left: 0;
padding-right: 0;
}
.boabo-page-breadcrumb {
position: relative;
z-index: 2;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(6px);
padding: 11px 28px;
border-radius: 50px;
margin-top: 28px;
display: inline-flex;
align-items: center;
gap: 11px;
font-family: var(--font-text);
font-size: 14px;
font-weight: 500;
}
.boabo-page-breadcrumb a {
color: #ccc;
text-decoration: none;
transition: color 0.3s ease;
}
.boabo-page-breadcrumb a:hover { color: #fff; }
.boabo-page-breadcrumb .current { color: #fff; font-weight: 600; }
.boabo-page-breadcrumb svg { width: 10px; height: 10px; }
@media (max-width: 639px) {
.boabo-page-hero { min-height: 280px; border-radius: 0; }
.boabo-page-hero-title { font-size: clamp(28px, 5vw, 48px); padding: 6px 20px; }
}
.boabo-page-hero--full-bleed {
border-radius: 0;
min-height: 60vh;
width: 100%;
margin: 0;
}
.boabo-page-hero--full-bleed::before {
background: rgba(0,0,0,0.55);
}
.boabo-page-hero-subtitle {
position: relative;
z-index: 2;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.9);
margin: 0.25rem 0 0;
}
.boabo-page-hero-env-label {
position: relative;
z-index: 2;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255,255,255,0.9);
margin: 1.5rem 0 0;
}
.boabo-page-hero-env-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1rem 1.5rem;
margin-top: 0.75rem;
position: relative;
z-index: 2;
}
.boabo-page-hero-env-logos a,
.boabo-page-hero-env-logos span {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: rgba(255,255,255,0.85);
text-decoration: none;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.boabo-page-hero-env-logos a:hover { color: #fff; }
.boabo-page-hero-env-logos img { width: 28px; height: 28px; opacity: 0.9; object-fit: contain; }
.service-our-services-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem 2rem;
max-width: 1300px;
margin: -4rem auto 0;
padding: 1.5rem 2rem;
position: relative;
z-index: 20;
background: #f5f5f5;
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}
.service-our-services-bar-wrap { padding: 0 1rem; max-width: 1320px; margin: 0 auto; }
@media (min-width: 1024px) {
.service-our-services-bar { flex-wrap: nowrap; padding: 1.5rem 2.5rem; }
}
.service-our-services-bar .bar-item { display: flex; flex-direction: column; gap: 0.25rem; }
.service-our-services-bar .bar-item label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #666; }
.service-our-services-bar .bar-item .bar-value { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 15px; font-weight: 600; color: #111; }
.service-our-services-bar select {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: 15px;
font-weight: 600;
color: #111;
background: #fff;
border: 1px solid #eaeaea;
border-radius: 12px;
padding: 0.5rem 2rem 0.5rem 1rem;
min-width: 200px;
cursor: pointer;
}
.service-our-services-bar .btn-faq {
font-family: "Inter", Arial, sans-serif;
font-weight: 400;
border: 1.5px solid #d5d9e0;
background: transparent;
color: #000;
box-shadow: none;
cursor: pointer;
transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.service-our-services-bar .btn-faq:hover {
transform: none;
background: #0a0a0a;
color: #fff;
border-color: #0a0a0a;
}
.service-project-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; max-width: 1300px; margin: 0 auto 4rem; padding: 0 20px; background: #fff; }
@media (max-width: 992px) { .service-project-overview { grid-template-columns: 1fr; } }
.service-project-overview .overview-image { border-radius: 12px; overflow: hidden; }
.service-project-overview .overview-image img { width: 100%; height: auto; display: block; }
.service-project-overview .overview-content { text-align: right; }
.service-project-overview .overview-content h2 { text-align: right; }
@media (max-width: 992px) { .service-project-overview .overview-content { text-align: left; } .service-project-overview .overview-content h2 { text-align: left; } }
.service-project-overview .overview-steps { margin-top: 1.5rem; text-align: right; }
@media (max-width: 992px) { .service-project-overview .overview-steps { text-align: left; } }
.service-overview-step { margin-bottom: 1.25rem; }
.service-overview-step .step-num { font-size: 13px; font-weight: 700; color: #CC00FF; letter-spacing: 0.05em; }
.service-overview-step .step-title { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 18px; font-weight: 700; color: #111; text-transform: uppercase; margin: 0.25rem 0; }
.service-overview-step .step-desc { font-size: 14px; color: #666; line-height: 1.5; margin: 0; }
.service-why-section { max-width: 1300px; margin: 0 auto 4rem; padding: 0 20px; background: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.service-why-section h2 { margin-top: 0; }
@media (max-width: 992px) { .service-why-section { grid-template-columns: 1fr; } }
.overview-steps-grid { grid-template-columns: 1fr; }
@media (min-width: 768px) { .overview-steps-grid { grid-template-columns: repeat(3, 1fr); } }
.service-faq-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.service-faq-modal.is-open { opacity: 1; visibility: visible; }
.service-faq-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.6);
cursor: pointer;
}
.service-faq-modal-panel {
position: relative;
z-index: 1;
background: #fff;
border-radius: 24px;
max-width: 560px;
width: 100%;
max-height: 85vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 24px 80px rgba(0,0,0,0.3);
}
.service-faq-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 1.5rem 0;
flex-shrink: 0;
}
.service-faq-modal-close {
width: 40px;
height: 40px;
border: none;
background: #f0f0f0;
border-radius: 50%;
font-size: 24px;
line-height: 1;
cursor: pointer;
color: #111;
transition: background 0.2s;
}
.service-faq-modal-close:hover { background: #e0e0e0; }
.service-faq-modal-body {
padding: 1rem 1.5rem 1.5rem;
overflow-y: auto;
}
.back-to-top-btn { display: none !important; }
.env-tech-icon { width: 28px; height: 28px; }
.env-tech-icon-white { filter: brightness(0) invert(1); }
@media (max-width: 767px) {
.env-tech-grid { grid-template-columns: repeat(6, 1fr); width: 100%; max-width: 280px; }
.env-tech-icon { width: 19px; height: 19px; }
}
.footer-social-icon { width: 16.8px; height: 16.8px; }
.footer-sign-logo { filter: brightness(0) invert(1); }
.quote-form-ur-input::placeholder { color: rgba(156, 163, 175, 0.9); }
/* FAQ accordion (index + faq page) */
.faq-accordion details {
border-bottom: 1px solid #e5e7eb;
}
.faq-accordion details:first-child {
border-top: 1px solid #e5e7eb;
}
.faq-accordion summary {
list-style: none;
cursor: pointer;
padding: 1.25rem 0;
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: #111;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.faq-accordion summary::-webkit-details-marker {
display: none;
}
.faq-accordion summary::after {
content: "";
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2300D4FF'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m19 9-7 7-7-7'/%3E%3C/svg%3E") no-repeat center;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.faq-accordion details[open] summary::after {
transform: rotate(180deg);
}
.faq-accordion details[open] summary {
color: #00d4ff;
}
.faq-accordion .faq-answer {
padding-bottom: 1.25rem;
font-size: 18px;
color: #555;
line-height: 1.5;
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}
/* FAQ section (index) */
#faq .faq-accordion {
width: 100%;
}
#faq .faq-accordion-item {
width: 100%;
}
#faq .faq-accordion-item.faq-page-hidden {
display: none;
}
#faq .faq-accordion-item.faq-page-visible-first {
border-top: 1px solid #e5e7eb;
}
#faq .faq-accordion-item {
border-bottom: 1px solid #e5e7eb;
}
#faq .faq-pagination-btn {
font-family: "Inter", Arial, sans-serif;
font-weight: 400;
text-transform: none;
letter-spacing: -0.36px;
border: 1.5px solid #0a0a0a;
background: #0a0a0a;
color: #fff;
cursor: pointer;
transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, opacity 0.35s ease;
}
#faq .faq-pagination-btn:hover:not(:disabled) {
background: #fff;
color: #0a0a0a;
transform: none;
}
#faq .faq-pagination-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
#faq .faq-accordion-trigger {
width: 100%;
padding: 1.125rem 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.25rem;
text-align: left;
border: none;
background: transparent;
cursor: pointer;
color: #111;
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 1.2;
letter-spacing: normal;
text-transform: none;
}
@media (min-width: 768px) {
#faq .faq-accordion-trigger {
padding: 1.25rem 0;
font-size: 21.45px;
line-height: 25.74px !important;
}
}
#faq .faq-accordion-trigger:focus {
outline: none;
}
#faq .faq-accordion-trigger:focus-visible {
box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.5);
border-radius: 4px;
}
#faq .faq-accordion-question {
flex: 1;
min-width: 0;
text-align: left;
padding-right: 1rem;
}
#faq .faq-accordion-icon {
flex-shrink: 0;
color: #111;
display: flex;
align-items: center;
justify-content: center;
}
#faq .faq-accordion-icon-minus {
display: none;
}
#faq .faq-accordion-icon-plus {
display: block;
}
#faq .faq-accordion-item.is-open .faq-accordion-icon-minus {
display: block;
}
#faq .faq-accordion-item.is-open .faq-accordion-icon-plus {
display: none;
}
#faq .faq-accordion-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease-in-out;
}
#faq .faq-accordion-item.is-open .faq-accordion-panel {
grid-template-rows: 1fr;
}
#faq .faq-accordion-answer {
overflow: hidden;
min-height: 0;
padding-bottom: 0;
color: #6b7280;
font-size: 0.9375rem;
line-height: 1.7;
letter-spacing: normal;
max-width: 65ch;
text-align: left;
transition: padding-bottom 0.3s ease-in-out;
}
#faq .faq-accordion-item.is-open .faq-accordion-answer {
padding-bottom: 1.25rem;
}
@media (min-width: 768px) {
#faq .faq-accordion-item.is-open .faq-accordion-answer {
padding-bottom: 1.375rem;
}
}
#faq .faq-accordion-answer a {
color: #00d4ff;
}
#faq .faq-accordion-answer a:hover {
text-decoration: underline;
}
/* Form submit feedback modal (ur reference) */
.form-feedback-modal {
position: fixed;
inset: 0;
z-index: 10050;
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
}
@media (min-width: 768px) {
.form-feedback-modal { padding: 2rem; }
}
.form-feedback-modal.is-open { display: flex; }
.form-feedback-backdrop {
position: absolute;
inset: 0;
background: rgba(5, 5, 5, 0.85);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.form-feedback-panel {
position: relative;
width: 100%;
max-width: 28rem;
overflow: hidden;
border-radius: 2rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: #0a0a0a;
padding: 1.5rem;
box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.065), 0 24px 60px rgba(0, 0, 0, 0.55);
}
@media (min-width: 640px) {
.form-feedback-panel { padding: 2.5rem; }
}
.form-feedback-inner { position: relative; text-align: center; }
.form-feedback-icon-wrap {
margin-left: auto;
margin-right: auto;
margin-bottom: 1.5rem;
display: flex;
height: 3.5rem;
width: 3.5rem;
align-items: center;
justify-content: center;
border-radius: 9999px;
border: 1px solid rgba(0, 212, 255, 0.45);
background: rgba(0, 212, 255, 0.12);
color: #00d4ff;
}
@media (min-width: 640px) {
.form-feedback-icon-wrap { margin-bottom: 1.75rem; height: 4rem; width: 4rem; }
}
.form-feedback-icon-wrap.is-error {
border-color: rgba(239, 68, 68, 0.35);
background: rgba(239, 68, 68, 0.1);
color: #e57373;
}
.form-feedback-icon-wrap svg { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
@media (min-width: 640px) {
.form-feedback-icon-wrap svg { width: 2rem; height: 2rem; }
}
.form-feedback-title {
margin: 0;
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: 1.25rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.03em;
color: #fff;
}
@media (min-width: 640px) {
.form-feedback-title { font-size: 1.5rem; }
}
.form-feedback-message {
margin-top: 1rem;
text-align: center;
font-size: 0.875rem;
font-weight: 300;
line-height: 1.625;
color: #9ca3af;
white-space: pre-wrap;
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}
@media (min-width: 640px) {
.form-feedback-message { font-size: 1rem; }
}
.form-feedback-close-btn {
margin-top: 2rem;
width: 100%;
background-color: #0a0a0a;
color: #fff;
font-weight: 400;
text-transform: none;
border: 1.5px solid #0a0a0a;
cursor: pointer;
transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
font-family: "Inter", Arial, sans-serif;
}
.form-feedback-close-btn:hover {
background-color: #fff;
color: #0a0a0a;
border-color: #0a0a0a;
transform: none;
}
/* Mobile / tablet: Services + Works mod?l + Get in touch ? teljes viewport, sarok n?lk?l */
@media (max-width: 1023.98px) {
#service-detail-panel.service-detail-panel--motion {
right: 0 !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 100dvh !important;
min-height: 100svh !important;
max-height: none !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
transform: translate3d(100%, 0, 0) !important;
}
#get-started-panel.service-detail-panel--motion.get-started-contact-sheet {
right: 0 !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 100dvh !important;
min-height: 100svh !important;
max-height: none !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
transform: translate3d(100%, 0, 0) !important;
}
#get-started-panel.get-started-contact-sheet {
border-radius: 0 !important;
}
#get-started-panel .get-started-sheet-header {
border-radius: 0 !important;
}
#service-detail-modal.service-detail-slide-root.active #service-detail-panel.service-detail-panel--motion,
#get-started-contact-modal.service-detail-slide-root.active #get-started-panel.service-detail-panel--motion {
transform: translate3d(0, 0, 0) !important;
}
#pricing-plan-info-panel.service-detail-panel--motion {
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-height: 100dvh !important;
min-height: 100svh !important;
height: 100% !important;
border-radius: 0 !important;
border: none !important;
transform: translate3d(100%, 0, 0) !important;
}
#pricing-plan-info-modal.service-detail-slide-root.active #pricing-plan-info-panel.service-detail-panel--motion {
transform: translate3d(0, 0, 0) !important;
}
#pricing-plan-info-panel .service-detail-panel-scroll { border-radius: 0 !important; }
#service-detail-panel .service-detail-panel-scroll { border-radius: 0 !important; }
#get-started-panel .get-started-panel-scroll.service-detail-panel-scroll,
#get-started-panel .get-started-form-scroll.service-detail-panel-scroll {
border-radius: 0 !important;
}
#portfolio-lightbox { padding: 0 !important; align-items: stretch !important; justify-content: flex-start !important; }
#portfolio-lightbox > .flex-1 { flex: 1 1 auto !important; min-height: 0 !important; max-width: 100% !important; width: 100% !important; }
#portfolio-lightbox .max-w-5xl { max-width: 100% !important; }
#portfolio-lightbox-img {
max-width: 100% !important;
max-height: min(85dvh, 100%) !important;
width: auto !important;
height: auto !important;
object-fit: contain;
border-radius: 0 !important;
}
#portfolio-lightbox-close { top: max(0.75rem, env(safe-area-inset-top, 0px)) !important; right: max(0.75rem, env(safe-area-inset-right, 0px)) !important; }
#portfolio-lightbox-prev { left: max(0.5rem, env(safe-area-inset-left, 0px)) !important; }
#portfolio-lightbox-next { right: max(0.5rem, env(safe-area-inset-right, 0px)) !important; }
/* Nyit?s: kicsit lassabb mint desktop; z?r?s tov?bbra is 0,52s (alap .service-detail-panel--motion) */
:root {
--service-detail-open-duration: 0.72s;
}
/* Services/Works egys?ges mod?l: szimmetrikus oldals? padding (safe area) */
#service-detail-panel.is-service-modal-unified .service-modal-wd-gutter {
padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
}
#boabo-profile-panel,
#boabo-team-panel {
width: 100vw !important;
max-width: none !important;
border-radius: 0 !important;
}
.panel-hero { height: min(42vh, 360px); }
}
.boabo-display-title {
font-family: "Inter", Arial, sans-serif !important;
font-weight: 500 !important;
font-size: 40px !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
text-transform: none !important;
}
@media (min-width: 768px) {
.boabo-display-title {
font-size: 71.5px !important;
line-height: 71.5px !important;
letter-spacing: -1.43px !important;
}
}
@media (min-width: 1024px) {
.boabo-display-title {
font-size: 67.5px !important;
line-height: 67.5px !important;
}
#shop .section-header-block {
width: 100%;
min-width: 0;
overflow: visible;
}
#shop .boabo-display-title {
font-size: 51.5px !important;
line-height: 1.08 !important;
flex-shrink: 0;
width: max-content;
max-width: none;
}
#shop .shop-title-line,
.boabo-who .shop-title-line {
display: block;
white-space: nowrap;
}
}
#shop.nav-shell-hero-headline-width {
width: 100%;
max-width: 1320px;
margin-left: auto;
margin-right: auto;
align-self: center;
box-sizing: border-box;
}
#shop h3.store-card-title {
font-family: "Inter", Arial, sans-serif !important;
font-weight: 500 !important;
}
.btn-cta,
.btn-cta .btn-cta-text,
.form-feedback-close-btn {
font-weight: 400 !important;
}
.l-lang-toggle {
font-family: "Inter", Arial, sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
line-height: 1.2 !important;
text-transform: uppercase;
color: #6c737d;
background: transparent;
border: 0;
padding: 4px 2px;
opacity: 1;
cursor: pointer;
transition: color 0.3s ease, opacity 0.3s ease;
}
.l-lang-toggle:hover { opacity: 1; }
.nav-lang {
display: none;
color: #fff;
}
@media (min-width: 1024px) {
.nav-lang { display: block; }
}
.nav-lang-track {
display: flex;
align-items: center;
height: 28.8px;
padding: 2.4px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 100px;
background: rgba(255, 255, 255, 0.16);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
overflow: hidden;
}
.nav-lang-option {
display: flex;
align-items: center;
gap: 0.28rem;
height: 24px;
margin: 0;
padding: 0 0.44rem 0 0.12rem;
border: 0;
border-radius: 100px;
background: transparent;
color: #fff;
font-family: "Inter", Arial, sans-serif;
font-size: 9.6px;
font-weight: 600;
letter-spacing: 0.06em;
line-height: 1;
cursor: pointer;
overflow: hidden;
max-width: 4.48rem;
transition: max-width 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86), padding 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86), background 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.nav-lang:not(.is-open) .nav-lang-option:not(.is-active) {
max-width: 0;
opacity: 0;
padding: 0;
pointer-events: none;
transition: max-width 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86), padding 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86), background 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.nav-lang.is-open .nav-lang-option.is-active {
background: rgba(255, 255, 255, 0.28);
}
.nav-lang-flag {
display: block;
width: 20.8px;
height: 20.8px;
border-radius: 50%;
overflow: hidden;
flex: 0 0 20.8px;
}
.nav-lang-flag img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.nav-lang-code {
display: block;
}
@media (max-width: 1023px) {
.l-lang-toggle { display: none; }
}
.c-mnav__lang {
margin: 0;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: 14px;
font-weight: 400;
letter-spacing: -0.01em;
color: #000;
text-align: right;
cursor: pointer;
transition: opacity 0.2s ease;
}
.c-mnav__lang:hover { opacity: 0.7; }
@media (min-width: 768px) {
#services.creative-solutions-v4,
#portfolio,
#how-we-work-section,
#pricing-plan-section {
border-radius: 3rem 3rem 0 0;
overflow: hidden;
}
}
#portfolio #portfolio-section-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.25rem;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) {
#portfolio #portfolio-section-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 3.15rem;
row-gap: 2.75rem;
align-items: start;
}
#portfolio-section-grid .portfolio-card-item:nth-child(odd) {
width: 90%;
justify-self: start;
}
#portfolio-section-grid .portfolio-card-item:nth-child(even) {
width: 90%;
justify-self: end;
margin-top: calc(74.8vh * 0.22);
}
}
#portfolio .nav-shell-hero-headline-width {
overflow-x: clip;
}
#portfolio-section-grid .portfolio-card-item {
gap: 0 !important;
opacity: 0;
transform: translate3d(0, 40px, 0);
transition:
opacity 1.7s cubic-bezier(0.4, 0.03, 0.2, 1),
transform 1.7s cubic-bezier(0.4, 0.03, 0.2, 1);
}
#portfolio-section-grid .portfolio-card-item.is-inview {
opacity: 1;
transform: translate3d(0, 0, 0);
}
#portfolio-section-grid .portfolio-card-media-wrap {
position: relative;
height: 52.36vh;
border-radius: 24px;
background: #111;
}
@media (min-width: 768px) {
#portfolio-section-grid .portfolio-card-media-wrap {
height: 74.8vh;
}
}
#portfolio-section-grid .portfolio-card-media-overlay {
position: absolute;
inset: 0;
z-index: 2;
background: #111;
pointer-events: none;
transform: translate3d(0, 0, 0);
}
#portfolio-section-grid .portfolio-card-item.is-inview .portfolio-card-media-overlay {
transform: translate3d(0, 100%, 0);
transition: transform 1.7s cubic-bezier(0.4, 0.03, 0.2, 1);
}
#portfolio-section-grid .portfolio-card-media-zoom {
position: absolute;
inset: 0;
transform: scale(1.2);
transform-origin: center;
}
#portfolio-section-grid .portfolio-card-item.is-inview .portfolio-card-media-zoom {
transform: scale(1);
transition: transform 1.7s cubic-bezier(0.4, 0.03, 0.2, 1);
}
#portfolio-section-grid .portfolio-card-media-img {
position: absolute;
left: 0;
top: -26%;
width: 100%;
height: 152%;
object-fit: cover;
transform: scale(1);
transition: transform 1.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#portfolio-section-grid .group:hover .portfolio-card-media-img {
transform: scale(1.1);
transition: transform 1.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#portfolio-section-grid .portfolio-card-item.is-load-batch {
overflow: hidden;
max-height: 0;
margin-top: 0 !important;
transition:
max-height 1.15s cubic-bezier(0.22, 1, 0.36, 1),
margin-top 1.15s cubic-bezier(0.22, 1, 0.36, 1),
opacity 1.7s cubic-bezier(0.4, 0.03, 0.2, 1),
transform 1.7s cubic-bezier(0.4, 0.03, 0.2, 1);
}
#portfolio-section-grid .portfolio-card-item.is-load-batch.is-load-open {
max-height: var(--load-max);
margin-top: var(--load-mt) !important;
}
#portfolio-section-grid .portfolio-card-logo-img {
object-fit: contain;
padding: 2.5rem;
box-sizing: border-box;
}
#portfolio-section-grid .portfolio-card-caption {
margin-top: 1rem;
}
#portfolio-section-grid .portfolio-card-tagline {
font-size: 11px;
line-height: 1.35;
}
@media (min-width: 768px) {
#portfolio-section-grid .portfolio-card-tagline {
font-size: 13px;
}
}
@media (min-width: 1024px) {
#portfolio-section-grid .portfolio-card-tagline {
font-size: 15px;
}
}
@media (prefers-reduced-motion: reduce) {
#portfolio-section-grid .portfolio-card-item,
#portfolio-section-grid .portfolio-card-media-zoom,
#portfolio-section-grid .portfolio-card-media-overlay {
opacity: 1;
transform: none;
transition: none;
}
}
.site-footer-he.l-footer {
background: #000;
color: #fff;
min-height: 0;
margin-top: 0;
padding: 0;
border-radius: 0;
}
.site-footer-he .l-footer__pad {
padding: clamp(3.25rem, 6vw, 5.25rem) 0 40px;
}
.site-footer-he .l-footer__container {
width: 100%;
max-width: 1320px;
margin-inline: auto;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.site-footer-he .l-footer__container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 768px) {
.site-footer-he .l-footer__container {
padding-left: 3rem;
padding-right: 3rem;
}
}
.site-footer-he .l-footer__grid {
display: grid;
grid-template-columns: minmax(0, 1.85fr) repeat(2, minmax(0, 0.85fr));
column-gap: 20px;
row-gap: 32px;
padding-top: 0;
border-top: 0;
}
.site-footer-he .l-footer__col {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.site-footer-he .l-footer__col--brand {
align-items: flex-start;
gap: 14px;
}
.site-footer-he .l-footer__brand {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 8px;
box-sizing: content-box;
color: #fff;
text-decoration: none;
max-width: 100%;
padding-bottom: 12px;
}
.site-footer-he .l-footer__brand-logo {
height: 40px;
width: auto;
display: block;
}
.site-footer-he .l-footer__tagline {
margin: 0;
max-width: none;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
letter-spacing: -0.01em;
color: rgba(255, 255, 255, 0.55);
}
.site-footer-he .l-footer__tagline-line {
display: block;
white-space: nowrap;
}
.site-footer-he .l-footer__socials {
display: flex;
align-items: center;
gap: 12px;
margin-top: 2px;
}
.site-footer-he .l-footer__social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #fff;
transition: transform 0.3s ease, background 0.2s ease;
}
.site-footer-he .l-footer__social:hover {
transform: scale(0.95);
background: rgba(255, 255, 255, 0.2);
}
.site-footer-he .l-footer__social svg {
width: 18px;
height: 18px;
display: block;
}
.site-footer-he .l-footer__heading {
font-size: 23px;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.4;
padding-bottom: 14px;
color: #fff;
}
@media (min-width: 901px) {
.site-footer-he .l-footer__heading,
.site-footer-he .l-footer__brand {
box-sizing: content-box;
min-height: calc((1.05rem + 4px) * 1.1);
padding-bottom: 12px;
}
.site-footer-he .l-footer__heading {
display: flex;
align-items: flex-end;
}
}
.site-footer-he .l-footer__link {
display: inline-flex;
flex-direction: column;
align-items: stretch;
width: max-content;
max-width: 100%;
color: #fff;
transition: opacity 0.2s ease;
background: none;
border: 0;
padding: 0;
text-align: left;
font: inherit;
font-size: 15px;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.6;
cursor: pointer;
text-decoration: none;
}
.site-footer-he .l-footer__link span {
font-size: 15px;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.6;
}
.site-footer-he .l-footer__link:hover { opacity: 0.6; }
.site-footer-he .l-footer__bar {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 16px;
margin-top: 76px;
padding: 28px 0 0;
border-top: 0;
}
.site-footer-he .l-footer__bar-start {
display: flex;
align-items: baseline;
gap: 0;
flex-wrap: wrap;
justify-self: start;
}
.site-footer-he .l-footer__sep {
color: #fff;
font-size: 15px;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.6;
margin: 0 0.28em;
user-select: none;
}
.site-footer-he .l-footer__bar-end {
justify-self: end;
text-align: right;
margin: 0;
white-space: nowrap;
}
.site-footer-he .l-footer__muted {
font-size: 15px;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.55;
color: rgba(255, 255, 255, 0.45);
max-width: 56ch;
}
@media (max-width: 900px) {
.site-footer-he .l-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 32px;
}
}
@media (max-width: 520px) {
.site-footer-he .l-footer__grid {
grid-template-columns: 1fr;
column-gap: 0;
row-gap: 24px;
}
.site-footer-he .l-footer__bar {
grid-template-columns: 1fr;
justify-items: stretch;
margin-top: 24px;
gap: 12px;
}
.site-footer-he .l-footer__bar-start {
justify-self: center;
justify-content: center;
}
.site-footer-he .l-footer__bar-end {
justify-self: center;
text-align: center;
white-space: normal;
}
.site-footer-he .l-footer__pad { padding: 24px 0; }
}
/* Navbar only: 3D label flip */
.btn-flip {
position: relative;
display: block;
overflow: hidden;
perspective: 1000px;
}
.btn-flip__top,
.btn-flip__bot {
display: block;
white-space: nowrap;
backface-visibility: hidden;
transition:
transform 0.5s cubic-bezier(0.76, 0, 0.24, 1),
opacity 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.btn-flip__top {
transform-origin: bottom center;
transform: translateY(0) rotateX(0);
opacity: 1;
}
.btn-flip__bot {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
transform-origin: top center;
transform: translateY(100%) rotateX(-90deg);
opacity: 0;
pointer-events: none;
}
.get-in-touch-nav-btn:hover .btn-flip__top,
#get-started-trigger:hover .btn-flip__top {
transform: translateY(-100%) rotateX(90deg);
opacity: 0;
}
.get-in-touch-nav-btn:hover .btn-flip__bot,
#get-started-trigger:hover .btn-flip__bot {
transform: translateY(0) rotateX(0deg);
opacity: 1;
}
.get-in-touch-nav-btn .btn-cta-text,
#get-started-trigger .btn-cta-text {
overflow: hidden;
}
/* Buttons match the Rólunk profile tags: glass, blur, color swap. Text case stays as written. */
.btn-cta,
#pricing-plan-section .pricing-dripbo-btn,
#pricing-plan-section .pricing-dripbo-btn--highlighted {
background: rgba(255, 255, 255, 0.15) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.25) !important;
color: #fff !important;
box-shadow: none !important;
border-radius: 9999px;
}
.btn-cta .btn-cta-text,
#pricing-plan-section .pricing-dripbo-btn {
color: #fff !important;
}
.btn-cta:hover,
.btn-cta:focus-visible,
#pricing-plan-section .pricing-dripbo-btn:hover,
#pricing-plan-section .pricing-dripbo-btn--highlighted:hover {
background: rgba(255, 255, 255, 0.92) !important;
border-color: rgba(255, 255, 255, 0.95) !important;
color: #0a0a0a !important;
}
.btn-cta:hover .btn-cta-text,
.btn-cta:focus-visible .btn-cta-text,
#pricing-plan-section .pricing-dripbo-btn:hover {
color: #0a0a0a !important;
transform: none;
}
.form-feedback-close-btn {
background: rgba(10, 10, 10, 0.06) !important;
border: 1px solid rgba(10, 10, 10, 0.18) !important;
color: #0a0a0a !important;
}
.form-feedback-close-btn:hover {
background: #0a0a0a !important;
border-color: #0a0a0a !important;
color: #fff !important;
}
.form-feedback-close-btn:hover {
color: #fff !important;
}
html.is-loader-lock,
html.is-loader-lock body {
overflow: hidden !important;
}
.site-loader {
--loader-logo-h: 4.75rem;
--loader-wipe-end: calc(50dvh - (var(--loader-logo-h) / 2) - 0.75rem);
position: fixed;
inset: 0;
z-index: 400;
width: 100%;
height: 100vh;
height: 100dvh;
overflow: hidden;
pointer-events: auto;
}
@media (min-width: 768px) {
.site-loader { --loader-logo-h: 6.5rem; }
}
.site-loader.is-out {
height: 0;
transition: height 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.site-loader-panel {
position: absolute;
inset: 0 auto auto 0;
z-index: 15;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
height: 100dvh;
overflow: hidden;
background: #000;
}
.site-loader-panel.is-front { z-index: 16; }
.site-loader.is-split .site-loader-panel.is-front,
.site-loader.is-hold .site-loader-panel.is-front,
.site-loader.is-leave .site-loader-panel.is-front,
.site-loader.is-out .site-loader-panel.is-front {
height: var(--loader-wipe-end);
transition: height 2.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.site-loader-logo-slot {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
height: 100dvh;
}
.site-loader-logo-clip { overflow: hidden; line-height: 1; }
.site-loader-logo {
display: block;
height: var(--loader-logo-h);
width: auto;
transform: translate3d(0, 150%, 0) skewY(5deg);
}
.site-loader-logo.is-dim { opacity: 0.2; }
.site-loader.is-in .site-loader-logo,
.site-loader.is-split .site-loader-logo,
.site-loader.is-hold .site-loader-logo {
transform: translate3d(0, 0, 0) skewY(0);
transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.site-loader.is-leave .site-loader-logo,
.site-loader.is-out .site-loader-logo {
opacity: 0;
transform: translate3d(0, 0, 0) skewY(0);
transition: opacity 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
.site-loader-pulse { animation: none; }
}
.boabo-why {
background: #fff;
color: #111;
padding: 1.25rem 0 6.5rem;
}
@media (min-width: 768px) {
.boabo-why { padding-bottom: 8.75rem; }
}
.boabo-why-container {
max-width: 1320px;
margin: 0 auto;
padding: 0 1rem;
width: 100%;
}
@media (min-width: 640px) {
.boabo-why-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
.boabo-why-container { padding-left: 3rem; padding-right: 3rem; }
}
.boabo-why-awards { margin: 0 0 3.25rem; }
.boabo-why-awards-rule {
display: none;
}
.boabo-why-awards-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-top: 2rem;
}
@media (min-width: 768px) {
.boabo-why-awards-grid { margin-top: 2.5rem; }
}
@media (min-width: 1024px) {
.boabo-why-awards-grid {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
.boabo-why-awards-kicker {
margin: 0;
font-family: "Inter", Arial, sans-serif;
font-weight: 500;
font-size: 1.75rem;
line-height: 0.9;
letter-spacing: -0.02em;
text-transform: none;
color: #000;
}
@media (min-width: 640px) {
.boabo-why-awards-kicker { font-size: 2.4rem; }
}
@media (min-width: 1024px) {
.boabo-why-awards-kicker {
font-size: calc((2.875rem - 4px) * 0.78);
line-height: 0.9;
}
}
.boabo-why-awards-body {
max-width: 42rem;
font-size: 20px;
line-height: 1.5;
color: #000;
}
@media (min-width: 768px) {
.boabo-why-awards-body { font-size: 16px; line-height: 1.4; }
}
.boabo-why-awards-body p { margin: 0; }
.boabo-why-awards-body a {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.15em;
}
.boabo-why-bento {
display: grid;
grid-template-columns: 1fr;
gap: 0.85rem;
}
@media (min-width: 1024px) {
.boabo-why-bento {
grid-template-columns: 1.15fr 1fr 0.95fr;
grid-template-rows: minmax(240px, auto) auto;
align-items: stretch;
}
.boabo-why-photo { grid-row: 1 / span 2; }
.boabo-why-copy { grid-column: 2; grid-row: 2; }
.boabo-why-card.is-accent { grid-column: 3; grid-row: 2; }
}
.boabo-why-photo,
.boabo-why-card,
.boabo-why-copy {
border-radius: 24px;
overflow: hidden;
}
.boabo-why-photo {
position: relative;
min-height: 340px;
height: 100%;
background: #111827;
}
.boabo-why-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.6;
transition: transform 700ms;
}
.boabo-why-photo:hover img { transform: scale(1.05); }
.boabo-why-photo-shade {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4) 55%, transparent);
}
.boabo-why-photo-copy {
position: absolute;
left: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.boabo-why-bento .boabo-why-photo-caption {
margin: 0 0 1.5rem;
font-family: "Inter", Arial, sans-serif;
font-size: 1.75rem;
font-weight: 500;
line-height: 0.9;
letter-spacing: -0.025em;
color: #fff;
opacity: 1;
}
@media (min-width: 640px) {
.boabo-why-photo-copy { left: 2.5rem; right: 2.5rem; bottom: 2.5rem; }
.boabo-why-bento .boabo-why-photo-caption { font-size: 2.4rem; margin-bottom: 2rem; }
}
@media (min-width: 1024px) {
.boabo-why-photo-copy { left: 1.5rem; right: 1.5rem; bottom: 1.65rem; }
.boabo-why-bento .boabo-why-photo-caption {
font-size: calc((2.875rem - 4px) * 0.78);
letter-spacing: -0.02em;
}
}
.boabo-why-card.is-media {
position: relative;
display: flex;
flex-direction: column;
min-height: 240px;
height: 100%;
color: #fff;
}
.boabo-why-card.is-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.boabo-why-media-copy {
position: relative;
z-index: 1;
display: flex;
flex: 1 1 auto;
height: auto;
min-height: 0;
flex-direction: column;
justify-content: flex-start;
padding: 1.75rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}
.boabo-why-card.is-dark {
background: #222;
color: #fff;
padding: 1.75rem;
display: flex;
flex-direction: column;
height: 100%;
}
.boabo-why-card.is-accent {
background: #222;
color: #fff;
padding: 1.75rem;
display: flex;
flex-direction: column;
height: 100%;
}
.boabo-why-copy {
position: relative;
display: flex;
flex-direction: column;
background: #f0f3fa;
color: #000;
padding: 1.75rem;
height: 100%;
}
.boabo-why-bento .boabo-why-copy h3 { color: #000; }
.boabo-why-bento .boabo-why-copy p { color: #6b7280; opacity: 1; }
.boabo-why-stat {
font-family: "Inter", Arial, sans-serif;
font-size: 1.75rem;
font-weight: 500;
letter-spacing: -0.025em;
line-height: 0.9;
}
@media (min-width: 640px) {
.boabo-why-stat { font-size: 2.4rem; }
}
@media (min-width: 1024px) {
.boabo-why-stat {
font-size: calc((2.875rem - 4px) * 0.78);
letter-spacing: -0.02em;
}
}
.boabo-why-bento h3 {
margin: 0.65rem 0 0.4rem;
font-size: 18px;
font-weight: 500;
color: #fff;
}
.boabo-why-bento p {
margin: 0;
font-size: 14px;
line-height: 1.45;
opacity: 0.78;
}
.boabo-why-detail {
align-self: flex-start;
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0;
border: 0;
background: none;
color: #fff;
font-family: "Inter", Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.boabo-why-detail svg { width: 1rem; height: 1rem; color: #fff; }
.boabo-why-detail:hover svg { color: #fff; transform: translateX(4px); }
.boabo-why-ico {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 1.15rem 0;
opacity: 1;
}
.boabo-why-ico img {
width: 4.5rem;
height: auto;
display: block;
}
.boabo-why-bento .boabo-why-ico { font-size: 16px; line-height: 1.3; opacity: 1; }
.boabo-why-icon {
display: block;
font-size: 42px;
line-height: 0.8;
opacity: 0.45;
margin-bottom: 0.4rem;
}
.boabo-flag {
position: relative;
background: #fff;
overflow: visible;
}
.boabo-flag-wrap {
position: relative;
height: 100vh;
min-height: 100svh;
background: #fff;
overflow: clip;
}
.boabo-flag-sticky {
position: relative;
height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.boabo-flag-media {
position: absolute;
left: 50%;
top: 44%;
width: min(65.2rem, calc((100% - 3rem) * 0.8));
height: 53.76vh;
transform: translate(-50%, -50%);
border-radius: 24px;
overflow: hidden;
background: #000;
transition: width 1.4s cubic-bezier(0.4, 0.03, 0.2, 1), height 1.4s cubic-bezier(0.4, 0.03, 0.2, 1), top 1.4s cubic-bezier(0.4, 0.03, 0.2, 1), border-radius 1.1s cubic-bezier(0.4, 0.03, 0.2, 1);
}
@media (min-width: 768px) {
.boabo-flag-media { width: min(65.2rem, calc((100% - 6rem) * 0.8)); }
}
.boabo-flag-media.is-full {
top: 50%;
width: 100%;
height: 100%;
border-radius: 0;
}
.boabo-flag-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.05);
}
.boabo-flag-media::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.52);
z-index: 1;
}
.boabo-flag-copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
color: #fff;
padding: 24px 1rem;
width: 100%;
max-width: 1320px;
box-sizing: border-box;
pointer-events: none;
}
@media (min-width: 640px) {
.boabo-flag-copy { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
.boabo-flag-copy { padding-left: 3rem; padding-right: 3rem; }
}
.boabo-flag-mark {
height: 2.5rem;
width: auto;
margin-bottom: 4px;
}
.boabo-flag-copy h2 {
margin: 0;
font-size: 40px;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1;
color: #fff;
}
@media (min-width: 768px) {
.boabo-flag-copy h2 {
font-size: 71.5px;
line-height: 71.5px;
letter-spacing: -1.43px;
}
}
.boabo-flag-copy p {
margin: 0;
max-width: 38ch;
font-size: clamp(1.125rem, 1.6vw, 1.35rem);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.4;
color: rgba(255, 255, 255, 0.92);
}
.boabo-flag-actions {
margin-top: 8px;
pointer-events: auto;
}
@media (max-width: 767px) {
.boabo-flag-copy h2 { font-size: 32px; line-height: 1; }
.boabo-flag-mark { height: 1.85rem; }
}
.get-in-touch-nav-btn.btn-cta,
#get-started-trigger.btn-cta,
a.btn-cta,
button.btn-cta,
#pricing-plan-section a.pricing-dripbo-btn,
#pricing-plan-section a.pricing-dripbo-btn.pricing-dripbo-btn--highlighted {
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #fff !important;
box-shadow: none !important;
}
a.btn-cta:hover,
button.btn-cta:hover,
#get-started-trigger.btn-cta:hover,
.get-in-touch-nav-btn.btn-cta:hover,
#pricing-plan-section a.pricing-dripbo-btn:hover {
background: rgba(255, 255, 255, 0.92) !important;
border-color: #fff !important;
color: #0a0a0a !important;
}
.boabo-hover-cta {
--studio-ease: cubic-bezier(0.785, 0.135, 0.15, 0.86);
position: relative;
align-items: center;
justify-content: center;
overflow: hidden;
box-sizing: border-box;
min-height: 50px;
padding: 0.8rem 1.3em;
border-radius: 100px;
border: 1px solid transparent;
font-family: "Inter", Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1 !important;
letter-spacing: -0.36px;
text-decoration: none;
text-transform: none;
white-space: nowrap;
cursor: pointer;
transition: padding 0.65s var(--studio-ease);
}
.boabo-hover-cta:not([class*="hidden"]) {
display: inline-flex;
}
#get-started-panel .get-started-submit-request.boabo-hover-cta {
line-height: 1 !important;
align-items: center;
justify-content: center;
min-height: 0;
padding: 0.875rem 2rem;
font-size: 18px;
font-weight: 500;
border-width: 0 !important;
box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.18);
}
#get-started-trigger.boabo-hover-cta {
min-height: 45px;
padding: 0.72rem 1.17em;
font-size: 14.4px;
}
#get-started-trigger.boabo-hover-cta .boabo-hover-cta-circle {
width: 1.8rem;
height: 1.8rem;
background: #fff;
border-color: #fff;
color: #0a0a0a;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
#get-started-trigger.boabo-hover-cta .boabo-hover-cta-icon {
width: 14.4px;
height: 14.4px;
}
.boabo-flag-actions .boabo-hover-cta {
min-height: 50px;
padding: 0.8rem 1.3em;
font-size: 18px;
font-weight: 500;
}
@media (max-width: 639px) {
a.boabo-hover-cta.sm\:hidden,
button.boabo-hover-cta.sm\:hidden {
display: inline-flex;
}
}
.boabo-hover-cta.is-glass {
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
.boabo-hover-cta.is-white {
background: #fff;
border-color: #fff;
color: #0a0a0a;
}
.boabo-hover-cta.is-black {
background: #0a0a0a;
border-color: #0a0a0a;
color: #fff;
}
.boabo-hover-cta.is-ink {
background: rgba(10, 10, 10, 0.06);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-color: rgba(10, 10, 10, 0.18);
color: #0a0a0a;
}
.boabo-hover-cta-label {
position: relative;
display: block;
color: inherit;
transform: translate3d(0, 0, 0);
transition: transform 0.65s var(--studio-ease);
}
.boabo-hover-cta-circle {
position: absolute;
top: 50%;
right: 0.85rem;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
overflow: hidden;
border-radius: 100px;
pointer-events: none;
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
transform: translate3d(0, -50%, 0) scale(0);
transform-origin: center;
transition: transform 0.65s var(--studio-ease);
}
.hero-cta-discover .boabo-hover-cta-circle,
.hero-cta-buttons > a.boabo-hover-cta.is-white.sm\:hidden .boabo-hover-cta-circle {
background: #0a0a0a;
border-color: #0a0a0a;
color: #fff;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.hero-cta-services .boabo-hover-cta-circle,
#about-get-started-trigger .boabo-hover-cta-circle,
.boabo-principles-link .boabo-hover-cta-circle {
background: #fff;
border-color: #fff;
color: #0a0a0a;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.boabo-hover-cta.is-white .boabo-hover-cta-circle,
.boabo-hover-cta.is-ink .boabo-hover-cta-circle {
background: rgba(10, 10, 10, 0.06);
border-color: rgba(10, 10, 10, 0.18);
color: #0a0a0a;
}
a.hero-cta-discover.boabo-hover-cta .boabo-hover-cta-circle,
.hero-cta-buttons > a.boabo-hover-cta.is-white.sm\:hidden .boabo-hover-cta-circle {
background: #0a0a0a !important;
border-color: #0a0a0a !important;
color: #fff !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
#portfolio-load-more-btn.boabo-hover-cta .boabo-hover-cta-circle {
background: #fff !important;
border-color: #fff !important;
color: #0a0a0a !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
a.hero-cta-services.boabo-hover-cta .boabo-hover-cta-circle,
#about-get-started-trigger.boabo-hover-cta .boabo-hover-cta-circle,
.boabo-principles-link.boabo-hover-cta .boabo-hover-cta-circle {
background: #fff !important;
border-color: #fff !important;
color: #0a0a0a !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.boabo-hover-cta-icon {
display: block;
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
transform: translate3d(-2.3rem, 0, 0);
transition: transform 0.65s var(--studio-ease);
}
.shop-packages-cta.boabo-hover-cta {
min-height: 45px;
padding: 0.72rem 1.17em;
font-size: 14.4px;
border-radius: 100px;
transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.shop-packages-cta .boabo-hover-cta-circle {
width: 1.8rem;
height: 1.8rem;
}
.shop-packages-cta .boabo-hover-cta-icon {
width: 14.4px;
height: 14.4px;
}
.shop-packages-cta.is-cta-inview {
padding-right: 2.88rem;
}
.shop-packages-cta.is-cta-inview .boabo-hover-cta-label {
transform: translate3d(-2px, 0, 0);
}
.shop-packages-cta.is-cta-inview .boabo-hover-cta-circle {
transform: translate3d(0, -50%, 0) scale(1);
}
.shop-packages-cta.is-cta-inview .boabo-hover-cta-icon {
transform: translate3d(0, 0, 0);
}
@media (pointer: fine) {
.shop-packages-cta.boabo-hover-cta:hover,
.shop-packages-cta.boabo-hover-cta:focus-visible {
padding-right: 1.17em;
}
.shop-packages-cta.boabo-hover-cta:hover .boabo-hover-cta-label,
.shop-packages-cta.boabo-hover-cta:focus-visible .boabo-hover-cta-label {
transform: none;
}
.shop-packages-cta.boabo-hover-cta:hover .boabo-hover-cta-circle,
.shop-packages-cta.boabo-hover-cta:focus-visible .boabo-hover-cta-circle {
transform: translate3d(0, -50%, 0) scale(0);
}
.shop-packages-cta.boabo-hover-cta:hover .boabo-hover-cta-icon,
.shop-packages-cta.boabo-hover-cta:focus-visible .boabo-hover-cta-icon {
transform: translate3d(-2.3rem, 0, 0);
}
.shop-packages-cta.boabo-hover-cta.is-cta-inview:hover,
.shop-packages-cta.boabo-hover-cta.is-cta-inview:focus-visible {
padding-right: 2.88rem;
}
.shop-packages-cta.boabo-hover-cta.is-cta-inview:hover .boabo-hover-cta-label,
.shop-packages-cta.boabo-hover-cta.is-cta-inview:focus-visible .boabo-hover-cta-label {
transform: translate3d(-2px, 0, 0);
}
.shop-packages-cta.boabo-hover-cta.is-cta-inview:hover .boabo-hover-cta-circle,
.shop-packages-cta.boabo-hover-cta.is-cta-inview:focus-visible .boabo-hover-cta-circle {
transform: translate3d(0, -50%, 0) scale(1);
}
.shop-packages-cta.boabo-hover-cta.is-cta-inview:hover .boabo-hover-cta-icon,
.shop-packages-cta.boabo-hover-cta.is-cta-inview:focus-visible .boabo-hover-cta-icon {
transform: translate3d(0, 0, 0);
}
}
#shop .shop-managed-card {
background: #f0f3fa;
}
#shop .shop-unlock-card,
#shop .shop-unlock-card:hover {
background: #222;
border-color: #222;
box-shadow: none;
}
#shop .shop-unlock-card .shop-stat-percent,
#shop .shop-unlock-card .shop-stat-tagline,
#shop .shop-unlock-card h3.store-card-title,
#shop .shop-unlock-card .read-details-arrow-link,
#shop .shop-unlock-card .read-details-arrow-text,
#shop .shop-unlock-card .read-details-arrow-link svg,
#shop .shop-unlock-card .read-details-arrow-link:hover svg {
color: #fff;
}
#shop .shop-unlock-card .store-card-desc-sm {
color: rgba(255, 255, 255, 0.78);
}
@media (pointer: fine) {
.boabo-hover-cta:hover,
.boabo-hover-cta:focus-visible {
padding-right: 3.2rem;
}
.boabo-hover-cta:hover .boabo-hover-cta-label,
.boabo-hover-cta:focus-visible .boabo-hover-cta-label {
transform: translate3d(-2px, 0, 0);
}
.boabo-hover-cta:hover .boabo-hover-cta-circle,
.boabo-hover-cta:focus-visible .boabo-hover-cta-circle {
transform: translate3d(0, -50%, 0) scale(1);
}
.boabo-hover-cta:hover .boabo-hover-cta-icon,
.boabo-hover-cta:focus-visible .boabo-hover-cta-icon {
transform: translate3d(0, 0, 0);
}
#get-started-trigger.boabo-hover-cta:hover,
#get-started-trigger.boabo-hover-cta:focus-visible,
#get-started-panel .get-started-submit-request.boabo-hover-cta:hover,
#get-started-panel .get-started-submit-request.boabo-hover-cta:focus-visible {
padding-right: 3.2rem;
}
}
@media (min-width: 1024px) {
#shop .shop-help-grid {
height: 468px;
}
#shop .shop-help-grid > div {
padding: 1.65rem 1.5rem !important;
}
#shop .shop-stat-percent {
font-size: 4.35rem !important;
}
#shop .store-card-desc-sm,
#shop .shop-managed-list,
#shop .shop-stat-tagline,
#shop .join-growing-text {
font-size: 14px !important;
}
}
.boabo-hover-cta:focus-visible {
outline: 2px solid rgba(0, 212, 255, 0.7);
outline-offset: 3px;
}
.boabo-hover-cta:disabled,
.boabo-hover-cta:disabled:hover {
opacity: 0.4;
cursor: not-allowed;
padding-right: 1.3em;
}
.boabo-hover-cta:disabled .boabo-hover-cta-label,
.boabo-hover-cta:disabled .boabo-hover-cta-circle,
.boabo-hover-cta:disabled .boabo-hover-cta-icon {
transform: none;
}
.boabo-hover-cta:disabled .boabo-hover-cta-circle {
transform: translate3d(0, -50%, 0) scale(0);
}
#faq .faq-pagination-btn.boabo-hover-cta {
background: rgba(10, 10, 10, 0.06) !important;
border: 1px solid rgba(10, 10, 10, 0.18) !important;
color: #0a0a0a !important;
min-height: 50px;
padding: 0.8rem 1.3em;
font-size: 16px;
font-weight: 400;
}
#faq .faq-pagination-btn.boabo-hover-cta:hover:not(:disabled),
#faq .faq-pagination-btn.boabo-hover-cta:focus-visible {
background: rgba(10, 10, 10, 0.06) !important;
border-color: rgba(10, 10, 10, 0.18) !important;
color: #0a0a0a !important;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.boabo-hover-cta,
.boabo-hover-cta-label,
.boabo-hover-cta-circle,
.boabo-hover-cta-icon {
transition: none;
}
}
.boabo-clients-why {
position: relative;
overflow: hidden;
background: #fff;
}
.boabo-clients-why > #testimonials-section { z-index: 2; }
.boabo-clients-why > #why-boabo { z-index: 1; }
.boabo-clients-why-bg {
display: none;
}
.boabo-clients-why-bg img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.boabo-clients-why-bg::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6rem;
height: 11rem;
background: linear-gradient(to bottom, rgba(238, 240, 242, 0) 0%, rgba(238, 240, 242, 0.22) 28%, rgba(238, 240, 242, 0.7) 62%, #eef0f2 100%);
}
.boabo-clients-why > section { position: relative; z-index: 1; }
.boabo-clients { background: transparent; padding: 4.5rem 0 7.5rem; }
.boabo-clients-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 3.25rem;
}
.boabo-clients-head .section-badge { margin-bottom: 1rem; }
.boabo-clients-title {
margin: 0;
font-family: "Inter", Arial, sans-serif;
font-weight: 500;
font-size: 40px;
line-height: 1;
letter-spacing: -0.02em;
text-align: center;
color: #111;
}
@media (min-width: 768px) {
.boabo-clients-head { margin-bottom: 5.25rem; }
.boabo-clients-title {
font-size: 71.5px;
line-height: 71.5px;
letter-spacing: -1.43px;
}
}
@media (min-width: 1024px) {
.boabo-clients-title {
font-size: 67.5px;
line-height: 67.5px;
}
}
.boabo-clients-row { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 1024px) {
.boabo-clients-row {
grid-template-columns: minmax(240px, 0.85fr) minmax(0, 2.15fr);
align-items: stretch;
}
}
.boabo-clients-viewport { display: grid; grid-template-columns: 1fr; gap: 20px; min-width: 0; }
@media (min-width: 1024px) {
.boabo-clients-viewport { grid-template-columns: 1fr 1fr; }
}
.boabo-clients-score,
.boabo-clients-card {
background: #fff;
color: #111;
border: 1px solid #d1d5db;
border-radius: 24px;
padding: 44px 40px;
}
.boabo-clients-score {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 420px;
background: #fff;
}
.boabo-clients-score-value {
font-family: "Inter", Arial, sans-serif;
font-size: 112px;
font-weight: 500;
line-height: 0.86;
letter-spacing: -0.05em;
}
.boabo-clients-stars { margin: 0.85rem 0 0.5rem; color: #e3b23c; letter-spacing: 0.16em; font-size: 18px; }
.boabo-clients-reviews-link {
display: inline-flex;
flex-direction: column;
align-items: center;
margin-top: 0.35rem;
color: inherit;
text-decoration: none;
}
.boabo-clients-score-label { margin: 0; font-size: 18px; }
.boabo-clients-reviews-link .site-link-line { background: #1a1a1a; }
.boabo-clients-google {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.15rem;
font-size: 32px;
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1;
color: #111;
}
.boabo-clients-card {
min-height: 420px;
display: flex;
flex-direction: column;
background: #fff;
animation: boabo-clients-in 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.boabo-clients-person { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.925rem; }
.boabo-clients-person img { width: 52px; height: 52px; border-radius: 999px; object-fit: cover; }
.boabo-clients-person strong { display: block; font-size: 18px; font-weight: 500; }
.boabo-clients-person span { display: block; font-size: 15px; color: rgba(17, 17, 17, 0.5); }
.boabo-clients-card p { margin: 0; font-size: 20px; line-height: 1.45; }
@media (min-width: 1024px) {
.boabo-clients-card p { font-size: 16px; }
}
@keyframes boabo-clients-in {
from { transform: translate3d(0, 14px, 0); opacity: 0; }
to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.boabo-clients-card { animation: none; }
}
.boabo-who {
background: #fff;
color: #000;
padding-top: 2.375rem;
padding-bottom: 2.5rem;
}
.boabo-who-container {
max-width: 87.5rem;
margin-left: auto;
margin-right: auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
width: 100%;
}
.boabo-who-pair {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem 2rem;
align-items: start;
margin-top: 3.25rem;
}
.boabo-who-center {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 3.25rem;
}
.boabo-who-hero-copy {
color: #0a0a0a !important;
text-align: center;
max-width: 18em;
margin-left: auto;
margin-right: auto;
}
.boabo-who-hero-copy + .boabo-who-hero-copy {
margin-top: 0.55em;
}
.boabo-who-mark.is-center {
margin-left: auto;
margin-right: auto;
object-position: center center;
margin-top: 2.75rem;
}
.boabo-who-kicker {
margin: 0;
font-family: "Inter", Arial, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.2;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #000;
}
.boabo-who-brief + .boabo-who-brief {
margin-top: 1.15em;
}
.boabo-who-brief {
margin: 0;
font-family: "Inter", Arial, sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.2;
letter-spacing: normal;
color: #000;
}
.boabo-lead-br { display: none; }
.boabo-who-team-lead {
margin: 1.15rem 0 0;
max-width: 28rem;
font-family: "Inter", Arial, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.45;
color: rgba(0, 0, 0, 0.72);
}
.boabo-who-mark {
display: block;
width: min(100%, 280px);
height: auto;
margin: 1.35rem 0 0;
object-fit: contain;
object-position: left center;
}
.boabo-who-faces {
display: flex;
align-items: center;
margin-top: 1.6rem;
padding: 0.85rem 0.5rem 0.4rem 0;
}
.boabo-who-face {
display: block;
width: 68px;
height: 84px;
margin-left: -16px;
padding: 0;
border: 3px solid #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
background: #e8e8e8;
cursor: pointer;
transform-origin: center center;
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 1024px) {
.boabo-who-face {
width: 81.6px;
height: 100.8px;
margin-left: -19.2px;
}
.boabo-who-face:first-child { margin-left: 0; }
}
.boabo-who-face:first-child { margin-left: 0; z-index: 1; transform: rotate(-8deg); }
.boabo-who-face:nth-child(2) { z-index: 2; transform: rotate(7deg); }
.boabo-who-face:nth-child(3) { z-index: 3; transform: rotate(-4deg); }
.boabo-who-face img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.boabo-who-face:first-child:hover { transform: rotate(-8deg) scale(1.4); z-index: 4; }
.boabo-who-face:nth-child(2):hover { transform: rotate(7deg) scale(1.4); z-index: 4; }
.boabo-who-face:nth-child(3):hover { transform: rotate(-4deg) scale(1.4); z-index: 4; }
.boabo-who-item { min-width: 0; }
.boabo-who-feature {
position: relative;
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
min-height: 3.35rem;
margin: 0;
padding: 0.85rem 0;
overflow: hidden;
border: 0;
background: none;
font-family: "Inter", Arial, sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.3;
color: #000;
text-align: left;
cursor: pointer;
}
.boabo-who-feature-arrow {
position: absolute;
left: 0;
top: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
opacity: 0;
color: #000;
pointer-events: none;
transform: translate3d(-6px, -50%, 0);
transform-origin: center center;
transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.boabo-who-feature-arrow svg {
display: block;
width: 0.95em;
height: 0.95em;
fill: none;
stroke: #000;
}
.boabo-who-feature-rule {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
overflow: hidden;
background: #d4d4d4;
pointer-events: none;
}
.boabo-who-feature-rule::after {
content: "";
position: absolute;
inset: 0;
background: #000;
clip-path: inset(0 100% 0 0);
transition: clip-path 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.boabo-who-feature-label {
display: block;
flex: 1 1 auto;
min-width: 0;
transform: translateX(0);
transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.boabo-who-feature-num {
flex: 0 0 auto;
margin-left: auto;
font-variant-numeric: tabular-nums;
font-size: 0.82em;
letter-spacing: 0.04em;
line-height: 1;
}
.boabo-who-feature-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.boabo-who-item.is-open .boabo-who-feature-panel { grid-template-rows: 1fr; }
.boabo-who-feature-panel-inner { overflow: hidden; }
.boabo-who-feature-copy + .boabo-who-feature-copy { margin-top: 0.75em; }
.boabo-who-feature-copy {
margin: 0;
padding: 0.85rem 0 1.15rem 1.65em;
font-family: "Inter", Arial, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
color: #222;
}
.boabo-who-feature:hover .boabo-who-feature-rule::after,
.boabo-who-feature:focus-visible .boabo-who-feature-rule::after,
.boabo-who-item.is-open .boabo-who-feature-rule::after {
clip-path: inset(0 0 0 0);
}
.boabo-who-feature:hover .boabo-who-feature-arrow,
.boabo-who-feature:focus-visible .boabo-who-feature-arrow,
.boabo-who-item.is-open .boabo-who-feature-arrow {
opacity: 1;
transform: translate3d(0, -50%, 0);
}
.boabo-who-item.is-open .boabo-who-feature-arrow {
transform: translate3d(0, -50%, 0) rotate(90deg);
}
.boabo-who-feature:hover .boabo-who-feature-label,
.boabo-who-feature:focus-visible .boabo-who-feature-label,
.boabo-who-item.is-open .boabo-who-feature-label {
transform: translateX(1.65em);
}
.boabo-who-cta { margin-top: 1.65rem; }
@media (min-width: 768px) {
.boabo-who { padding-top: 5.7rem; padding-bottom: 2rem; }
.boabo-who-container { padding-left: 3rem; padding-right: 3rem; }
.boabo-who-kicker { font-size: 15.45px; line-height: 15.74px; }
.boabo-who-brief { font-size: 21.45px; line-height: 25.74px; }
.boabo-who-feature { min-height: 3.55rem; padding: 0.95rem 0; font-size: 23px; }
}
#why-boabo .boabo-why-cta.boabo-hover-cta {
min-height: 45px;
padding: 0.72rem 1.17em;
font-size: 14.4px;
}
#why-boabo .boabo-why-cta .boabo-hover-cta-circle { width: 1.8rem; height: 1.8rem; }
#why-boabo .boabo-why-cta .boabo-hover-cta-icon { width: 14.4px; height: 14.4px; }
@media (pointer: fine) {
#why-boabo .boabo-why-cta.boabo-hover-cta:hover,
#why-boabo .boabo-why-cta.boabo-hover-cta:focus-visible { padding-right: 2.88rem; }
}
@media (min-width: 1024px) {
.boabo-lead-br { display: inline; }
.boabo-who-team-lead { max-width: 34rem; }
.boabo-who-brief { font-size: 17.45px; line-height: 25.74px; }
.boabo-who-feature { font-size: 17px; }
}
@media (min-width: 1024px) {
.boabo-who-pair {
grid-template-columns: 1fr 1fr;
column-gap: 2rem;
row-gap: 3.25rem;
}
}
#boabo-team-modal {
position: fixed;
inset: 0;
z-index: 80;
pointer-events: none;
}
#boabo-team-modal.is-open { pointer-events: auto; }
#boabo-team-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.52);
opacity: 0;
transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#boabo-team-modal.is-open #boabo-team-backdrop { opacity: 1; }
#boabo-team-panel {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: min(620px, 100vw);
display: flex;
flex-direction: column;
background: #fff;
color: #0a0a0a;
border-radius: 0;
overflow: hidden;
transform: translate3d(-100%, 0, 0);
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
#boabo-team-modal.is-open #boabo-team-panel { transform: translate3d(0, 0, 0); }
#boabo-team-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: #0a0a0a;
cursor: pointer;
}
#boabo-team-close svg { width: 22px; height: 22px; }
#boabo-team-close { color: #fff; }
#boabo-team-panel { background: #222; color: #fff; }
.boabo-principles-head {
flex: 0 0 auto;
padding: 4.5rem 1.75rem 1.5rem;
}
.boabo-principles-head h2 {
margin: 0;
font-family: "Inter", Arial, sans-serif;
font-size: 1.75rem;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 0.9;
color: #fff;
}
@media (min-width: 640px) {
.boabo-principles-head h2 { font-size: 2.4rem; }
}
@media (min-width: 1024px) {
.boabo-principles-head h2 { font-size: calc((2.875rem - 4px) * 0.78); }
}
#boabo-team-panel .boabo-who-list {
flex: 1 1 auto;
height: auto;
min-height: 0;
margin: 0;
padding: 0 1.75rem 2rem;
overflow: auto;
background: transparent;
border-radius: 0;
}
#boabo-team-panel .boabo-who-feature {
color: #fff;
font-size: 20px;
font-weight: 400;
line-height: 1.2;
letter-spacing: normal;
}
@media (min-width: 768px) {
#boabo-team-panel .boabo-who-feature { font-size: 21.45px; line-height: 25.74px; }
}
@media (min-width: 1024px) {
#boabo-team-panel .boabo-who-feature { font-size: 17.45px; line-height: 25.74px; }
}
#boabo-team-panel .boabo-who-feature-arrow { display: none; }
#boabo-team-panel .boabo-who-feature-label,
#boabo-team-panel .boabo-who-feature:hover .boabo-who-feature-label,
#boabo-team-panel .boabo-who-item.is-open .boabo-who-feature-label { transform: none; }
#boabo-team-panel .boabo-who-feature-num {
order: -1;
margin: 0;
color: #fff;
font-size: 1em;
font-weight: 400;
letter-spacing: normal;
}
#boabo-team-panel .boabo-who-feature {
min-height: 0;
padding: 0.42rem 0;
}
#boabo-team-panel .boabo-who-feature-rule::after { display: none; }
#boabo-team-panel .boabo-who-item.is-open .boabo-who-feature-rule { display: none; }
#boabo-team-panel .boabo-who-feature-copy { padding: 0.2rem 0 0.45rem; }
.boabo-principles-head { padding: 3.25rem 1.35rem 0.6rem; }
#boabo-team-panel .boabo-who-list { padding: 0 1.35rem 1rem; }
#boabo-team-panel .boabo-who-feature-arrow,
#boabo-team-panel .boabo-who-feature-arrow svg { color: #fff; stroke: #fff; }
#boabo-team-panel .boabo-who-feature-rule { background: rgba(255, 255, 255, 0.2); }
#boabo-team-panel .boabo-who-feature-rule::after { background: #fff; }
#boabo-team-panel .boabo-who-feature-copy {
color: rgba(255, 255, 255, 0.72);
font-size: 15px;
font-weight: 400;
line-height: 1.45;
}
#boabo-profile-modal {
position: fixed;
inset: 0;
z-index: 90;
pointer-events: none;
}
#boabo-profile-modal.is-open { pointer-events: auto; }
#boabo-profile-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.52);
opacity: 0;
transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#boabo-profile-modal.is-open #boabo-profile-backdrop { opacity: 1; }
#boabo-profile-panel {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: min(480px, 100vw);
background: #111318;
color: #fff;
border-radius: 0;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
transform: translate3d(-110%, 0, 0);
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
#boabo-profile-modal.is-open #boabo-profile-panel { transform: translate3d(0, 0, 0); }
#boabo-profile-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 0;
border-radius: 0;
background: transparent;
color: #fff;
cursor: pointer;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
#boabo-profile-close:hover { color: #9ca3af; }
#boabo-profile-close svg { width: 24px; height: 24px; display: block; }
.boabo-profile-photo {
position: absolute;
inset: 0;
background: #111 center top / cover no-repeat;
transform: scale(1.04);
transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}
#boabo-profile-modal.is-open .boabo-profile-photo { transform: scale(1); }
.boabo-profile-photo::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(20, 22, 28, 0.08) 18%, rgba(20, 22, 28, 0.72) 72%, rgba(20, 22, 28, 0.9) 100%),
rgba(139, 146, 156, 0.28);
}
.boabo-profile-copy {
position: absolute;
inset: auto 0 0 0;
z-index: 1;
display: flex;
flex-direction: column;
gap: 6px;
padding: 28px 24px 26px;
}
#boabo-profile-name {
margin: 0;
font-family: "Inter", Arial, sans-serif;
font-size: clamp(1.35rem, 2.2vw, 1.85rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
color: #fff;
}
#boabo-profile-org {
margin: 0;
font-family: "Inter", Arial, sans-serif;
font-size: 0.92rem;
font-weight: 700;
color: #fff;
}
@media (min-width: 1024px) {
#boabo-profile-org { font-size: calc(0.92rem + 2px); }
}
.boabo-profile-roles {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.boabo-profile-roles { gap: 7.2px; }
.boabo-profile-roles .about-profile-tag {
padding: 0.378rem 1.035rem;
font-size: 11.7px;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
#boabo-team-backdrop, #boabo-team-panel,
#boabo-profile-backdrop, #boabo-profile-panel { transition: none; }
}
#service-detail-panel.is-panel-hero .service-detail-close-btn {
color: #fff !important;
background: rgba(255, 255, 255, 0.15) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
#service-detail-panel.is-panel-hero .service-detail-header {
top: 28px;
right: 28px;
left: auto;
width: auto;
height: auto;
min-height: 0;
padding: 0;
}
.panel-hero-gutter { padding: 16px 16px 8px; }
.panel-hero {
position: relative;
border-radius: 24px;
overflow: hidden;
background: #111;
height: min(46vh, 420px);
}
.panel-hero-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 18%;
}
.panel-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
pointer-events: none;
}
.panel-hero-title,
.panel-hero-copyblock {
position: absolute;
left: 24px;
bottom: 24px;
z-index: 2;
margin: 0;
max-width: calc(100% - 48px);
}
.panel-hero-copyblock { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.panel-hero-title {
font-family: "Inter", Arial, sans-serif;
font-weight: 500;
font-size: 1.75rem;
line-height: 0.9;
letter-spacing: -0.02em;
color: #fff;
}
@media (min-width: 640px) {
.panel-hero-title { font-size: 2.4rem; }
}
@media (min-width: 1024px) {
.panel-hero-title { font-size: calc((2.875rem - 4px) * 0.78); }
}
.panel-hero-copy { margin-top: 1.25rem; }
.panel-hero-list,
#service-detail-panel.is-panel-hero .portfolio-detail-list { margin-top: 0.25rem; }
#service-detail-panel.is-panel-hero .service-modal-wd-what-icon,
#service-detail-panel.is-panel-hero .service-modal-wd-sublabel,
#service-detail-panel.is-panel-hero .service-modal-wd-phase-heading { display: none !important; }
.panel-hero-live.boabo-hover-cta {
position: relative;
z-index: 2;
pointer-events: auto;
}
.bpanel-dim {
position: fixed;
inset: 0;
z-index: 90;
background: rgba(0, 0, 0, 0.52);
opacity: 0;
pointer-events: none;
transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.bpanel-dim.is-open { opacity: 1; pointer-events: auto; }
.bpanel {
position: fixed;
left: 1.5rem;
bottom: 1.5rem;
z-index: 91;
width: 2.1rem;
height: 2.1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.bpanel.is-visible { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) {
.bpanel { width: 1.5rem; height: 1.5rem; }
}
.bpanel-window {
position: absolute;
left: 0;
bottom: 0;
width: 2.1rem;
height: 2.1rem;
border-radius: 999px;
overflow: hidden;
background: #000;
color: #fff;
transform-origin: left bottom;
transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1), height 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 1024px) {
.bpanel-window { width: 1.5rem; height: 1.5rem; }
}
.bpanel-window.is-open {
width: min(392px, calc(100vw - 3rem));
height: min(560px, calc(100vh - 3rem));
border-radius: 28px;
}
.bpanel-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 18%;
}
.bpanel-shade {
position: absolute;
inset: 0;
background: linear-gradient(to top, #000 0%, #000 18%, rgba(0, 0, 0, 0.35) 42%, rgba(0, 0, 0, 0) 68%);
pointer-events: none;
}
.bpanel-top, .bpanel-body, .bpanel-close {
position: relative;
z-index: 2;
opacity: 0;
transition: opacity 0.45s ease 0.15s;
}
.bpanel-window.is-open .bpanel-top,
.bpanel-window.is-open .bpanel-body { opacity: 1; }
.bpanel-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 18px 16px 0 18px;
}
.bpanel-tabs { display: flex; flex-wrap: wrap; gap: 14px; }
.bpanel-tab {
padding: 0 0 6px;
border: 0;
background: none;
color: rgba(255, 255, 255, 0.55);
font-family: "Inter", Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
border-bottom: 1.5px solid transparent;
}
.bpanel-tab.is-active { color: #fff; border-bottom-color: #fff; }
.bpanel-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin-top: -4px;
border: 0;
background: transparent;
color: #fff;
cursor: pointer;
}
.bpanel-body {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0 18px 4.4rem 18px;
}
.bpanel-launch {
transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1), bottom 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.bpanel-name {
margin: 0;
font-family: "Inter", Arial, sans-serif;
font-size: 28px;
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.05;
}
.bpanel-greet {
margin: 8px 0 0;
font-family: "Inter", Arial, sans-serif;
font-size: 15px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.82);
}
.bpanel-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bpanel-chip {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: #fff;
font-family: "Inter", Arial, sans-serif;
font-size: 13.5px;
font-weight: 500;
text-decoration: none;
}
.bpanel-launch {
position: absolute;
left: 0;
bottom: 0;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
width: 2.1rem;
height: 2.1rem;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 999px;
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: inset 0 0 0 100px rgba(10, 10, 10, 0.72);
cursor: pointer;
overflow: hidden;
}
@media (min-width: 1024px) {
.bpanel-launch { width: 1.5rem; height: 1.5rem; }
}
.bpanel-window.is-open .bpanel-launch {
left: 16px;
bottom: 16px;
}
.bpanel-launch-logo {
width: 62%;
height: 62%;
object-fit: contain;
object-position: center;
transform-origin: center center;
}
.bpanel-launch.is-opening .bpanel-launch-logo {
animation: bpanel-logo-open 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.bpanel-launch.is-closing .bpanel-launch-logo {
animation: bpanel-logo-close 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes bpanel-logo-open {
0% { transform: scale(1) rotate(0deg); }
45% { transform: scale(0.95) rotate(-45deg); }
100% { transform: scale(1) rotate(-45deg); }
}
@keyframes bpanel-logo-close {
0% { transform: scale(1) rotate(-45deg); }
45% { transform: scale(0.95) rotate(0deg); }
100% { transform: scale(1) rotate(0deg); }
}
.bpanel-view { display: none; }
.bpanel-view.is-active { display: block; }
.bpanel-window { scrollbar-width: none; }
.bpanel-window::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (prefers-reduced-motion: reduce) {
.bpanel-window, .bpanel-dim, .bpanel-top, .bpanel-body, .bpanel-launch-logo { transition: none; animation: none; }
}