@layer base {
html, body {
overflow-x: hidden;
}
::selection {
background-color: #2563eb;
color: #ffffff;
}
}
/* Featured Venuze case study */
.venueze-case-study {
background: linear-gradient(135deg, #14264A 0%, #101E3B 48%, #091329 100%);
}
.venueze-case-study__media {
min-height: 100%;
padding: 0 !important;
margin: 0 !important;
box-shadow: none;
z-index: 1;
}
.venueze-case-study__media::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 18%;
height: 100%;
pointer-events: none;
background: linear-gradient(90deg, rgba(9,19,41,0) 0%, rgba(9,19,41,.22) 55%, rgba(9,19,41,.72) 100%);
filter: blur(7px);
transform: translateX(10%);
z-index: 2;
}
.venueze-case-study__media img {
display: block;
width: 100% !important;
height: 100% !important;
min-width: 100%;
min-height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
filter: none;
border-radius: 0;
margin: 0 !important;
padding: 0 !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
transition: transform 0.5s ease, filter 0.5s ease;
}
.venueze-case-study__media:hover img {
transform: scale(1.02);
filter: none;
}
@media (min-width: 1024px) {
.venueze-case-study__media {
height: auto;
min-height: 100%;
width: 100%;
align-self: stretch;
}
}
/* =========================================================
MOBILE REFINEMENTS — SCOPING SECTION + TERMINAL SAFETY
========================================================= */
@media (max-width: 767px) {
body.page-template-page-mobile-app-development #quote-form {
padding-top: 2.5rem !important;
padding-bottom: 2.5rem !important;
}
body.page-template-page-mobile-app-development #quote-form > .max-w-7xl {
padding-left: 1.25rem !important;
padding-right: 1.25rem !important;
}
/* Remove the large desktop shell on phones so the form gets the full width. */
body.page-template-page-mobile-app-development #quote-form > .max-w-7xl > .rounded-3xl {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
body.page-template-page-mobile-app-development #quote-form .grid {
gap: 2rem !important;
}
/* The form terminal itself also sheds the extra desktop frame on mobile. */
body.page-template-page-mobile-app-development #quote-form .lg\:col-span-7.rounded-2xl {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
body.page-template-page-mobile-app-development #quote-form .lg\:col-span-7 > .flex.items-center.justify-between {
align-items: flex-start !important;
gap: .75rem !important;
flex-wrap: wrap !important;
}
body.page-template-page-mobile-app-development #quote-form h2 {
font-size: 28px !important;
line-height: 1.18 !important;
}
body.page-template-page-mobile-app-development #quote-form .rounded-2xl.bg-\[\#080c16\].border {
padding: 1rem !important;
}
/* Keep architecture panels and code blocks inside the viewport. */
body.page-template-page-mobile-app-development main .font-mono,
body.page-template-page-mobile-app-development main code,
body.page-template-page-mobile-app-development main pre {
max-width: 100% !important;
}
}
/* Additional phone-width repairs from live mobile QA. */
@media (max-width: 639px) {
body.page-template-page-mobile-app-development #desktop-stack-tabs {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
width: 100% !important;
gap: .35rem !important;
padding: .4rem !important;
}
body.page-template-page-mobile-app-development #desktop-stack-tabs .stack-tab {
width: 100% !important;
min-width: 0 !important;
padding: .6rem .55rem !important;
text-align: center !important;
white-space: normal !important;
line-height: 1.25 !important;
}
body.page-template-page-mobile-app-development #desktop-tech-grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: .75rem !important;
}
body.page-template-page-mobile-app-development #desktop-tech-grid .tech-item {
padding: 1rem !important;
gap: .85rem !important;
}
body.page-template-page-mobile-app-development #desktop-tech-grid .tech-item > div:last-child {
flex: 1 1 auto !important;
min-width: 0 !important;
}
body.page-template-page-mobile-app-development #desktop-tech-grid .tech-item span {
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* Direct Advisory Lines: keep names and phone numbers readable. */
body.page-template-page-mobile-app-development #quote-form .lg\:col-span-5 > .rounded-2xl {
padding: 1rem !important;
gap: .85rem !important;
}
body.page-template-page-mobile-app-development #quote-form .lg\:col-span-5 > .rounded-2xl a[href^="tel:"] {
padding: .8rem !important;
gap: .75rem !important;
}
body.page-template-page-mobile-app-development #quote-form a[href^="tel:"] > div {
min-width: 0 !important;
flex: 1 1 auto !important;
}
body.page-template-page-mobile-app-development #quote-form a[href^="tel:"] > div > div {
min-width: 0 !important;
}
body.page-template-page-mobile-app-development #quote-form a[href^="tel:"] .font-mono {
white-space: nowrap !important;
overflow-wrap: normal !important;
word-break: normal !important;
font-size: 11px !important;
}
body.page-template-page-mobile-app-development #quote-form a[href^="tel:"] .material-symbols-outlined {
flex: 0 0 20px !important;
}
body.page-template-page-mobile-app-development #quote-form .lg\:col-span-5 > .rounded-2xl > .flex.items-center.gap-2 {
align-items: flex-start !important;
}
/* Terminal heading wraps as two logical lines instead of colliding. */
body.page-template-page-mobile-app-development #quote-form .lg\:col-span-7 > .flex.items-center.justify-between {
flex-direction: column !important;
align-items: flex-start !important;
}
body.page-template-page-mobile-app-development #quote-form .lg\:col-span-7 > .flex.items-center.justify-between > span:last-child {
white-space: normal !important;
overflow-wrap: anywhere !important;
}
}