/* ==========================================================================
GEMINI ASSOCIATES — MOBILE POLISH
--------------------------------------------------------------------------
Loaded last. Fixes issues found by auditing 12 pages at 390x844:
index.php TINY_TEXT:22 SMALL_TAP:14 WIDE_EL:7
contact-dedicated.php OVERFLOW:19px
green-bio-chemistry.php TINY_TEXT:6 WIDE_EL:10
product_details.php SMALL_TAP:30
semiconductor-cdmo.php WIDE_EL:1
Root causes:
1. Eyebrow/badge text rendered at 10.4px — below the 12px legibility floor
2. Card links and pill links 18-39px tall — under the 44px tap minimum
3. Decorative hero orbs/meshes (423-537px) spilling past a 379px viewport
4. A 860px data table forcing page-level horizontal scroll
5. An unwrapped link overflowing contact-dedicated by 19px
========================================================================== */
@media (max-width: 767.98px) {
/* ==========================================================================
01. LEGIBILITY — nothing below 12px
--------------------------------------------------------------------------
Uppercase + wide letter-spacing at 10.4px is very hard to read on a phone.
Sizes are raised and tracking reduced so the text still fits.
========================================================================== */
/* 0.78rem = 12.5px at the default 16px root — clears the 12px floor with
headroom. Tracking is cut so the longer badge strings still fit. */
.gemini-section-badge,
.pillars-badge,
.hero-eyebrow-badge,
.gemini-section-badge span,
.pillars-badge span,
.hero-eyebrow-badge span {
font-size: 0.78rem !important;
letter-spacing: 0.02em !important;
line-height: 1.45 !important;
}
/* Spec chips on capability cards */
.ptag,
.pillar-spec-chip,
.spec-chip,
.tech-tag {
font-size: 0.78rem !important;
letter-spacing: 0 !important;
}
.kpi-sub {
font-size: 0.75rem !important; /* was 11.2px */
}
.hero-scroll-cue-text {
font-size: 0.78rem !important;
letter-spacing: 0.04em !important;
}
/* "NEW" is a 3-letter decorative pill, not reading matter, but 12px is
still the comfortable floor. */
.whats-next-badge,
.new-tag {
font-size: 0.75rem !important;
padding: 3px 9px !important;
}
/* Generic small-print classes used across detail pages */
.badge,
.cert-status,
.pillar-tag,
.innovation-tag,
.product-spec-tag,
.service-card-tag,
small,
.small {
font-size: 0.75rem !important;
}
/* ==========================================================================
02. TAP TARGETS — 44px minimum (WCAG 2.5.8 / Apple HIG)
--------------------------------------------------------------------------
Measured: service-card-link 37px, project-link-btn 39px,
dept-pill-link 30px, alphabet-btn 36px, breadcrumb links 18px.
========================================================================== */
.service-card-link,
.project-link-btn,
.innovation-link,
.product-link,
.pillar-action,
.about-secondary-link,
.values-explore-btn,
.cert-link {
min-height: 44px !important;
display: inline-flex !important;
align-items: center;
}
/* Contact pills: phone / email links */
.dept-pill-link,
.contact-pill-link {
min-height: 44px !important;
display: flex !important;
align-items: center;
padding: 10px 14px !important;
}
/* A-Z product filter: becomes a comfortable swipe rail */
.alphabet-btn {
min-width: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.alphabet-filter,
.alphabet-nav,
.products-alphabet {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.alphabet-filter::-webkit-scrollbar,
.alphabet-nav::-webkit-scrollbar,
.products-alphabet::-webkit-scrollbar { display: none; }
/* Breadcrumbs */
.breadcrumb a,
.breadcrumb-item a,
nav[aria-label="breadcrumb"] a {
display: inline-flex;
align-items: center;
padding: 2px 0;
}
/* Footer links */
.footer .btn.btn-link {
min-height: 42px !important;
display: flex !important;
align-items: center;
}
/* Safety net: standalone call-to-action links written with Bootstrap utility
classes (e.g. Enquire…) rather than a
component class. Padding is used instead of min-height so links that sit
INSIDE a sentence are not turned into blocks. */
a.fw-bold,
a.small,
a[class*="text-info"],
a[class*="text-primary"],
a[class*="text-success"],
a[class*="text-warning"],
a[class*="text-secondary"],
a[href^="tel:"],
a[href^="mailto:"] {
padding-block: 11px;
display: inline-block;
}
/* …but never inflate links inside running prose or tight UI rows */
p a,
li a,
td a,
.navbar-nav a,
.breadcrumb a,
.hero-capability-chips a {
padding-block: 0;
display: inline;
}
} /* end max-width 767.98px */
/* ==========================================================================
03. OVERFLOW CONTAINMENT
--------------------------------------------------------------------------
These run at all widths so tablets benefit too.
========================================================================== */
/* 3a. Decorative hero layers.
Measured spilling past a 379px viewport:
hero-plasma-1 537px (L=-110 R=427)
hero-fluid-gradient-mesh 451px (L=-36 R=415)
bio-hero-glow-1 520px (L=-185 R=335)
They are purely visual, so the section clips them rather than resizing. */
.gemini-hero-container,
.bio-hero,
.semi-hero,
.lab-hero,
.water-hero,
.fragrance-hero,
.mfg-hero,
[class$="-hero"],
[class*="-hero-section"] {
overflow-x: clip;
}
@media (max-width: 767.98px) {
.hero-plasma-orb,
.hero-fluid-gradient-mesh,
.hero-moving-gradient-backdrop,
.bio-hero-glow,
.hero-glow,
[class*="-glow"],
[class*="-orb"] {
max-width: 100vw;
pointer-events: none;
}
}
/* 3b. Wide data tables.
green-bio-chemistry ships an 860px .matrix-table inside .matrix-wrapper.
The wrapper scrolls locally instead of dragging the whole page sideways. */
.matrix-wrapper,
.products-table-container,
.catalogue-table-card,
.table-responsive {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 991.98px) {
.matrix-wrapper::after,
.products-table-container::after {
content: 'Swipe to see more →';
display: block;
position: sticky;
left: 0;
padding: 6px 2px 0;
font-size: 0.72rem;
font-weight: 600;
color: var(--ga-ink-400, #94a3b8);
text-align: right;
}
}
/* ==========================================================================
06. MOBILE COMPOSITION PASS
--------------------------------------------------------------------------
The mobile audit showed the content itself was stacking correctly, but the
shared chrome still behaved like a desktop layout: the expanded menu pushed
the page down, dedicated-page heroes used too much vertical space, and the
contact cards lost width to nested Bootstrap gutters. These rules are kept
here, last in the cascade, so all page templates receive the same treatment.
========================================================================== */
@media (max-width: 767.98px) {
:root {
scroll-padding-top: 72px;
}
body {
background: #f8fafc;
}
/* Compact, always-visible mobile header */
.gemini-header-wrapper {
min-height: 64px;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 6px 20px rgba(12, 30, 56, 0.08);
}
.gemini-header-wrapper > .container-fluid {
padding-inline: 0.75rem !important;
}
.gemini-header-wrapper .navbar {
min-height: 64px;
position: relative;
}
.gemini-logo {
height: 38px !important;
max-width: 180px;
}
.gemini-header-wrapper .navbar-toggler {
width: 44px;
height: 44px;
border: 1px solid #dbe5ee !important;
border-radius: 12px;
background: #ffffff;
}
/* Turn the Bootstrap collapse into a contained menu panel. This keeps the
hero position stable and gives the menu its own scroll area on small
devices with short browser chrome. */
.gemini-header-wrapper .navbar-collapse {
position: absolute;
top: calc(100% + 8px);
left: 0.25rem;
right: 0.25rem;
z-index: 20;
max-height: calc(100vh - 84px);
overflow-y: auto;
margin-top: 0 !important;
padding: 0.75rem !important;
border: 1px solid #dbe5ee;
border-radius: 18px;
background: rgba(255, 255, 255, 0.99);
box-shadow: 0 18px 42px rgba(12, 30, 56, 0.16);
}
.gemini-header-wrapper .navbar-nav {
width: 100%;
padding: 0 !important;
margin: 0 !important;
}
.gemini-header-wrapper .navbar-nav .nav-item + .nav-item {
border-top: 1px solid #eef2f6;
}
.gemini-header-wrapper .navbar-nav .nav-link {
min-height: 44px;
padding: 0.72rem 0.5rem !important;
font-size: 0.95rem;
}
.gemini-header-wrapper .navbar-nav .nav-link.active {
padding-left: 0.75rem !important;
border-left: 3px solid #01a2d3;
border-radius: 0 8px 8px 0;
background: #effaff;
}
.gemini-header-wrapper .gemini-nav-cta {
min-height: 48px;
margin-top: 0.75rem;
justify-content: center;
}
.gemini-header-wrapper .d-lg-none {
min-height: 44px;
flex-wrap: wrap;
gap: 0.35rem 0.7rem !important;
font-size: 0.78rem;
}
/* Dedicated page heroes: preserve the strong dark panel while reducing
the amount of empty vertical space before the first useful content. */
.hero-section {
min-height: auto !important;
padding: 3.25rem 1rem 3.5rem !important;
}
.hero-section .container {
width: 100%;
max-width: 34rem;
}
.hero-section h1 {
max-width: 22ch;
margin-inline: auto;
font-size: clamp(2rem, 8.4vw, 2.55rem) !important;
line-height: 1.13 !important;
letter-spacing: -0.025em;
}
.hero-section p {
max-width: 34ch;
margin-inline: auto;
font-size: 0.98rem !important;
line-height: 1.65 !important;
}
.services-hero-badge,
.products-hero-badge,
.contact-hero-badge,
.about-hero-badge {
max-width: 100%;
margin-inline: auto;
line-height: 1.4;
}
/* Give card grids a clear rhythm and prevent the old desktop shadows from
visually merging when cards are stacked one after another. */
.service-card,
.product-card,
.contact-info-card,
.contact-form-card {
border-radius: 18px !important;
box-shadow: 0 10px 24px rgba(12, 30, 56, 0.08) !important;
}
.service-card,
.product-card {
min-height: 0 !important;
padding: 1.35rem !important;
}
.service-card h3 {
font-size: 1.18rem !important;
line-height: 1.3 !important;
}
.product-card h2 {
font-size: 1.04rem !important;
line-height: 1.45 !important;
}
/* Reclaim the width lost to nested row/column gutters on contact pages. */
.contact-section .row,
.gemini-contact-section .row {
--bs-gutter-x: 0;
row-gap: 1rem !important;
}
.contact-info-card,
.contact-form-card {
width: 100% !important;
padding: 1.25rem !important;
}
.contact-info-item a {
overflow-wrap: anywhere;
word-break: break-word;
}
.contact-form-card .form-control,
.contact-form-card textarea {
width: 100% !important;
min-height: 52px;
}
.contact-form-card textarea {
min-height: 150px;
}
.contact-cta-btn,
.cta-btn {
width: 100% !important;
min-height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.map-section {
padding-block: 3rem !important;
}
.map-container iframe {
min-height: 280px;
height: 280px !important;
border-radius: 16px;
}
/* Footer: keep the brand block visually distinct and reduce dead space
between the two link groups without shrinking the tap targets. */
.footer .container.py-5 {
padding-top: 3rem !important;
padding-bottom: 2rem !important;
}
.footer .container.py-5 > .row {
row-gap: 1.75rem !important;
}
.footer .container.py-5 > .row > div:first-child {
padding-block: 0.5rem !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer .container.py-5 > .row > div:first-child img {
width: 13rem !important;
}
}
@media (max-width: 400px) {
.gemini-logo {
height: 35px !important;
max-width: 160px;
}
.gemini-header-wrapper .navbar-collapse {
left: 0;
right: 0;
}
.hero-section {
padding-inline: 0.75rem !important;
}
.hero-section h1 {
font-size: clamp(1.9rem, 8.2vw, 2.25rem) !important;
}
}
/* ==========================================================================
09. COMPACT DESKTOP NAVIGATION (992px–1199px)
--------------------------------------------------------------------------
Nine desktop links plus a quote button cannot fit comfortably at these
widths. The navbar now switches to a compact, overlay menu before the
links start wrapping or turning the CTA into a vertical pill.
========================================================================== */
@media (min-width: 768px) and (max-width: 1199.98px) {
.gemini-header-wrapper {
min-height: 72px;
}
.gemini-header-wrapper .navbar {
min-height: 72px;
position: relative;
}
.gemini-logo {
height: 42px !important;
max-width: 190px;
}
.gemini-header-wrapper .navbar-toggler {
width: 46px;
height: 46px;
border: 1px solid #dbe5ee !important;
border-radius: 12px;
background: #ffffff;
}
.gemini-header-wrapper .navbar-collapse {
position: absolute;
top: calc(100% + 10px);
left: 0;
right: 0;
z-index: 20;
max-height: calc(100vh - 96px);
overflow-y: auto;
margin-top: 0 !important;
padding: 1rem 1.15rem !important;
border: 1px solid #dbe5ee;
border-radius: 18px;
background: rgba(255, 255, 255, 0.99);
box-shadow: 0 18px 42px rgba(12, 30, 56, 0.16);
}
.gemini-header-wrapper .navbar-nav {
width: 100%;
margin: 0 !important;
padding: 0 !important;
align-items: stretch !important;
}
.gemini-header-wrapper .navbar-nav .nav-item + .nav-item {
border-top: 1px solid #eef2f6;
}
.gemini-header-wrapper .navbar-nav .nav-link {
min-height: 44px;
display: flex;
align-items: center;
padding: 0.65rem 0.5rem !important;
font-size: 0.95rem;
}
.gemini-header-wrapper .navbar-nav .nav-link::after {
display: none;
}
.gemini-header-wrapper .gemini-nav-cta {
width: 100%;
min-height: 48px;
justify-content: center;
margin-top: 1rem;
}
.gemini-header-wrapper .d-lg-none {
display: flex !important;
min-height: 44px;
align-items: center;
justify-content: center;
gap: 1rem !important;
border-top: 1px solid #eef2f6;
margin-top: 0.75rem;
padding-top: 0.65rem;
}
}
/* ==========================================================================
07. FULL-BLEED MOBILE CANVAS
--------------------------------------------------------------------------
The outer .container-fluid wrapper is intentionally full width. The
existing small-screen gutter rule was also applying to that wrapper, which
inset the entire site by 12px and made every page look like a loading card.
Keep gutters on the content containers only; let page-level color surfaces
run edge to edge.
========================================================================== */
@media (max-width: 767.98px) {
body > .container-fluid.bg-white.p-0,
#main-content {
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.gemini-hero-container,
.gemini-pillars-section,
.gemini-about-section,
.gemini-innovation-section,
.gemini-services-section,
.gemini-products-section,
.gemini-projects-section,
.gemini-values-section,
.gemini-certifications-section,
.gemini-contact-section,
.hero-section,
.about-hero,
.services-hero,
.products-hero,
.values-hero,
.contact-hero {
width: 100% !important;
max-width: none !important;
border-radius: 0 !important;
}
/* The content still breathes inside the edge-to-edge surfaces. */
.gemini-hero-content,
.gemini-pillars-section > .container,
.gemini-about-section > .container,
.gemini-innovation-section > .container,
.gemini-services-section > .container,
.gemini-products-section > .container,
.gemini-projects-section > .container,
.gemini-values-section > .container,
.gemini-certifications-section > .container,
.gemini-contact-section > .container {
padding-inline: 1rem !important;
}
nav[aria-label="breadcrumb"] {
width: 100%;
padding-inline: 0 !important;
}
nav[aria-label="breadcrumb"] .container {
padding-inline: 1rem !important;
}
}
/* ==========================================================================
08. MOBILE HERO REDESIGN
--------------------------------------------------------------------------
On a phone the hero should read in a clear order: promise, proof, action.
The previous single-column KPI strip made the opening feel long and dense,
while the chip rail ended abruptly at the viewport edge. This keeps the
cinematic background but gives the content a more deliberate landing.
========================================================================== */
@media (max-width: 767.98px) {
.gemini-hero-container {
min-height: auto !important;
padding: 3.5rem 1rem 2.5rem !important;
isolation: isolate;
}
.gemini-hero-container::after {
content: '';
position: absolute;
inset: auto 0 0;
height: 7rem;
z-index: 2;
pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(3, 14, 29, 0.55));
}
.gemini-hero-content {
z-index: 3 !important;
padding-inline: 0 !important;
}
/* Bootstrap's nested row/column gutters were leaving the hero content
12px narrower on the right than the section itself. Keep the section's
intentional 16px breathing room, but remove this second gutter. */
.gemini-hero-content > .row {
width: 100% !important;
margin-inline: 0 !important;
}
.gemini-hero-content > .row > [class*="col-"] {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
padding-inline: 0 !important;
}
.hero-eyebrow-badge {
margin-bottom: 1.1rem !important;
padding: 0.55rem 0.9rem !important;
font-size: 0.7rem !important;
letter-spacing: 0.035em !important;
background: rgba(17, 54, 83, 0.7) !important;
border: 1px solid rgba(125, 211, 252, 0.35) !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}
/* Override the generous desktop rhythm carried by the Bootstrap utility
classes on the hero children. */
.gemini-hero-content .hero-eyebrow-badge {
margin-bottom: 0.9rem !important;
}
.gemini-hero-title {
max-width: 22rem;
margin-inline: auto;
margin-bottom: 1rem !important;
font-size: clamp(2.05rem, 9.2vw, 2.55rem) !important;
line-height: 1.08 !important;
letter-spacing: -0.035em !important;
}
.gemini-hero-content .gemini-hero-title {
margin-bottom: 0.9rem !important;
}
.gemini-hero-lead {
max-width: 22rem !important;
margin-bottom: 1.35rem !important;
font-size: 0.96rem !important;
line-height: 1.58 !important;
color: #d5e2ee !important;
}
.gemini-hero-content .gemini-hero-lead {
margin-bottom: 1.1rem !important;
}
/* Infinite smooth slow auto-scrolling marquee on mobile */
.hero-capability-chips-wrapper {
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
overflow: hidden !important;
padding: 0.35rem 0 !important;
margin-bottom: 1.35rem !important;
mask-image: linear-gradient(to right, transparent 0%, black 1.5rem, black calc(100% - 1.5rem), transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 1.5rem, black calc(100% - 1.5rem), transparent 100%);
}
.hero-capability-chips {
display: flex !important;
flex-wrap: nowrap !important;
width: max-content !important;
gap: 0.65rem !important;
animation: heroMarqueeScroll 26s linear infinite !important;
will-change: transform;
margin: 0 !important;
padding: 0 0.5rem !important;
overflow: visible !important;
mask-image: none !important;
-webkit-mask-image: none !important;
}
.hero-capability-chips:hover,
.hero-capability-chips:active {
animation-play-state: paused !important;
}
.hero-capability-chips::-webkit-scrollbar {
display: none;
}
.hero-capability-chips li {
flex: 0 0 auto !important;
min-width: 0;
min-height: unset !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 14px !important;
font-size: 0.76rem !important;
font-weight: 500 !important;
letter-spacing: 0.01em;
line-height: 1.3;
white-space: nowrap !important;
background: rgba(14, 42, 70, 0.65) !important;
border: 1px solid rgba(125, 211, 252, 0.28) !important;
border-radius: 999px !important;
color: #e0f2fe !important;
}
.hero-capability-chips li.marquee-clone {
display: inline-flex !important;
}
.hero-capability-chips li:last-child {
grid-column: auto !important;
width: auto !important;
justify-self: auto !important;
margin-right: 0 !important;
}
@keyframes heroMarqueeScroll {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(calc(-50% - 0.325rem), 0, 0);
}
}
.hero-capability-chips i {
font-size: 0.82rem !important;
color: #38bdf8 !important;
}
.hero-cta-row {
max-width: 20rem !important;
width: 100% !important;
margin: 0 auto 1.6rem !important;
gap: 0.55rem !important;
display: flex !important;
flex-direction: column !important;
}
.hero-btn-primary {
width: 100% !important;
justify-content: center !important;
padding: 12px 22px !important;
font-size: 0.96rem !important;
}
.hero-btn-secondary {
width: 100% !important;
justify-content: center !important;
padding: 10px 20px !important;
font-size: 0.90rem !important;
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
color: #cbd5e1 !important;
}
.gemini-hero-content .hero-cta-row {
margin-bottom: 1.2rem !important;
}
html .hero-btn-primary,
.hero-btn-secondary {
min-height: 50px;
padding: 0.75rem 1rem !important;
font-size: 0.92rem !important;
letter-spacing: 0.005em;
}
/* Compact 2x2 proof grid: less scrolling, stronger visual rhythm. */
.hero-kpi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
width: 100% !important;
max-width: 22rem !important;
padding: 0.45rem !important;
gap: 0 !important;
border-radius: 18px !important;
background: rgba(5, 22, 42, 0.72) !important;
border: 1px solid rgba(125, 211, 252, 0.25) !important;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25) !important;
}
.hero-kpi-card,
.hero-kpi-card:last-child {
display: flex !important;
min-height: 5.25rem;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
gap: 0.18rem !important;
padding: 0.7rem 0.65rem !important;
border: 0 !important;
border-radius: 12px;
text-align: left !important;
}
.hero-kpi-card:nth-child(odd) {
border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.hero-kpi-card:nth-child(-n+2) {
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.hero-kpi-card:nth-child(2),
.hero-kpi-card:nth-child(4) {
border-right: 0 !important;
}
.kpi-value {
font-size: 1.08rem !important;
line-height: 1.05 !important;
white-space: normal;
}
.kpi-label {
font-size: 0.72rem !important;
line-height: 1.25 !important;
}
.kpi-sub {
font-size: 0.64rem !important;
line-height: 1.25 !important;
}
.hero-scroll-cue {
display: none !important;
}
}
@media (max-width: 400px) {
.gemini-hero-container {
padding-top: 3.1rem !important;
}
.gemini-hero-title {
font-size: clamp(1.95rem, 9vw, 2.3rem) !important;
}
.hero-kpi-card {
min-height: 4.4rem;
padding-inline: 0.55rem !important;
}
}
/* 3c. Unwrapped inline content.
contact-dedicated overflowed 19px from a single (long email address).
Anchors are not covered by the generic prose wrap rule, so they are
handled explicitly here. */
a,
.dept-pill-link,
.contact-pill-link,
.footer a,
td, th {
overflow-wrap: anywhere;
word-break: break-word;
}
/* Keep nav and buttons on one line — wrapping those looks broken */
.navbar-nav a,
.btn,
.custom-button,
.hero-btn-primary,
.hero-btn-secondary,
.alphabet-btn {
overflow-wrap: normal;
word-break: normal;
}
/* ==========================================================================
04. NARROW-VIEWPORT GUARD (<=575px)
--------------------------------------------------------------------------
At 360px three pages still scrolled:
product_list.php 28px
product_details.php 16px ( elements, R=365 vs 349)
advanced_materials.php 3px (.focus-card, R=352 vs 349)
None had an element that was itself too wide — they were pushed past the
edge by container padding plus fixed card widths. Capping the box model
on small screens resolves all three without touching the markup.
========================================================================== */
@media (max-width: 575.98px) {
/* Nothing may exceed the viewport */
.container,
.container-fluid,
[class*="col-"],
.card,
.focus-card,
.product-card,
.material-card,
section,
article {
max-width: 100% !important;
}
/* Rows must be allowed to absorb gutters symmetrically */
.row {
max-width: none !important;
}
/* Cards declared with fixed or min widths become fluid */
.focus-card,
.product-card,
.material-card,
.spec-card,
.info-card {
width: auto !important;
min-width: 0 !important;
}
/* Flex and grid children must be allowed to shrink below content size —
min-width:auto is the usual cause of stubborn overflow. */
.row > *,
.d-flex > *,
[class*="grid"] > * {
min-width: 0;
}
/* Trim container gutters at the narrowest sizes */
.container,
.container-fluid {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
/* Long product names in / must wrap */
b, strong {
overflow-wrap: anywhere;
word-break: break-word;
}
}
/* ==========================================================================
05. COMPREHENSIVE SITE-WIDE MOBILE POLISH (PHONES & TABLETS <= 991px)
========================================================================== */
@media (max-width: 991.98px) {
/* 5a. Global Hero Banners across all dedicated & pillar pages */
.about-hero,
.services-hero,
.products-hero,
.values-hero,
.whats-next-hero,
.cert-hero,
.contact-hero,
.semi-hero,
.bio-hero,
.water-hero,
.lab-hero,
.mfg-hero,
.fragrance-hero,
.product-hero,
.project-hero,
[class$="-hero"],
[class*="-hero-section"] {
padding: clamp(2.5rem, 6vh, 3.5rem) 1rem clamp(2.2rem, 5vh, 3rem) !important;
min-height: auto !important;
}
.about-hero h1,
.services-hero h1,
.products-hero h1,
.values-hero h1,
.whats-next-hero h1,
.cert-hero h1,
.contact-hero h1,
.semi-hero-title,
.bio-hero-title,
.water-hero-title,
.lab-hero-title,
.mfg-hero-title,
.fragrance-hero-title,
.product-hero h1,
.project-hero h1 {
font-size: clamp(1.8rem, 7.2vw, 2.35rem) !important;
line-height: 1.18 !important;
letter-spacing: -0.025em !important;
margin-bottom: 0.85rem !important;
}
.about-hero p,
.services-hero p,
.products-hero p,
.values-hero p,
.whats-next-hero p,
.cert-hero p,
.contact-hero p,
.semi-hero-lead,
.bio-hero-lead,
.water-hero-lead,
.lab-hero-lead,
.mfg-hero-lead,
.fragrance-hero-lead,
.product-hero p {
font-size: 0.95rem !important;
line-height: 1.6 !important;
max-width: 100% !important;
margin-bottom: 1.5rem !important;
}
/* 5b. Section Vertical Spacing */
.section-py,
.py-5,
section.py-5,
.gemini-pillars-section,
.gemini-about-section,
.gemini-innovation-section,
.gemini-services-section,
.gemini-products-section,
.gemini-projects-section,
.gemini-values-section,
.gemini-certifications-section,
.gemini-contact-section {
padding-top: clamp(2.25rem, 5vh, 3rem) !important;
padding-bottom: clamp(2.25rem, 5vh, 3rem) !important;
}
.section-header-wrap,
.section-header,
.text-center.mb-5 {
margin-bottom: 1.75rem !important;
}
/* 5c. Section Typography */
.pillars-title,
.about-title,
.innovation-title,
.services-main-title,
.products-main-title,
.projects-main-title,
.values-main-title,
.cert-main-title,
.contact-main-title,
.section-main-heading,
.section-title {
font-size: clamp(1.65rem, 6.4vw, 2.15rem) !important;
line-height: 1.22 !important;
letter-spacing: -0.02em !important;
margin-bottom: 0.65rem !important;
}
.pillars-subtitle,
.about-lead,
.innovation-lead,
.services-main-subtitle,
.products-main-subtitle,
.projects-main-subtitle,
.values-main-subtitle,
.cert-main-subtitle,
.contact-main-subtitle,
.section-lead-text,
.section-subtitle {
font-size: 0.94rem !important;
line-height: 1.6 !important;
max-width: 100% !important;
}
/* 5d. Bento Pillar Cards: Image on Top, Content Below */
.pillar-card {
min-height: auto !important;
display: flex !important;
flex-direction: column !important;
border-radius: 20px !important;
}
.pillar-media-window {
position: relative !important;
width: 100% !important;
height: 185px !important;
clip-path: none !important;
order: -1 !important;
border-radius: 20px 20px 0 0 !important;
}
.pillar-body {
max-width: 100% !important;
padding: 1.35rem 1.25rem 1.25rem 1.25rem !important;
}
.pillar-tech-tag {
top: 12px !important;
right: 14px !important;
z-index: 5 !important;
}
/* 5e. Industrial & Horizon Cards */
.service-industrial-card,
.service-card-wide,
.project-horizon-card {
min-height: 320px !important;
height: auto !important;
border-radius: 18px !important;
}
.service-card-content,
.project-card-content {
padding: 2.25rem 1.25rem 1.35rem !important;
}
/* 5f. Product & Values Cards */
.gemini-product-card,
.gemini-value-card,
.about-bento-card,
.innovation-card,
.contact-dept-card {
padding: 1.35rem 1.25rem !important;
border-radius: 18px !important;
}
/* 5g. Contact Department Links */
.contact-dept-card {
flex-direction: column !important;
gap: 0.75rem !important;
}
.dept-links {
flex-direction: column !important;
gap: 6px !important;
width: 100% !important;
}
.dept-pill-link {
display: flex !important;
align-items: center !important;
width: 100% !important;
padding: 9px 12px !important;
font-size: 0.82rem !important;
}
/* 5h. Map Card */
.map-card-wrapper iframe {
height: 270px !important;
}
/* 5i. Global Mobile CTAs */
.about-cta-btn,
.services-explore-btn,
.products-explore-btn,
.projects-explore-btn,
.values-explore-btn,
.cert-explore-btn,
.contact-cta-btn {
box-sizing: border-box !important;
width: 100% !important;
max-width: 380px;
margin-inline: auto !important;
justify-content: center !important;
padding: 12px 24px !important;
font-size: 0.96rem !important;
}
/* 5j. Footer refinement on mobile */
.footer {
padding-top: 2.5rem !important;
}
.footer h4 {
font-size: 1.15rem !important;
margin-bottom: 0.85rem !important;
}
.footer .btn.btn-link {
padding: 5px 0 !important;
min-height: 36px !important;
font-size: 0.88rem !important;
}
}
/* Final hero gutter correction. This intentionally comes after the shared
mobile section rules above, which otherwise re-add 1rem padding to the
hero's inner Bootstrap container. */
@media (max-width: 767.98px) {
.gemini-hero-content {
padding-left: 0 !important;
padding-right: 0 !important;
}
.gemini-hero-content > .row {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.gemini-hero-content > .row > [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* ==========================================================================
10. KPI PROOF PANEL
--------------------------------------------------------------------------
Separate each mobile metric into a quiet glass tile so the strip reads as
one intentional proof panel instead of a set of crossed divider lines.
========================================================================== */
.hero-kpi-grid {
position: relative;
}
.hero-kpi-grid::before {
content: 'OPERATING PROOF';
position: absolute;
top: -0.62rem;
left: 1rem;
padding: 0 0.55rem;
background: #071526;
color: #7dd3fc;
font-family: 'Jost', sans-serif;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1.2;
}
@media (min-width: 768px) {
.hero-kpi-grid {
gap: 0.35rem !important;
padding: 1.15rem 1rem !important;
}
.hero-kpi-grid::before {
display: none;
}
.hero-kpi-card {
position: relative;
min-height: 5.4rem;
padding: 0 0.75rem !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.hero-kpi-card::before {
content: '';
position: absolute;
top: 0.2rem;
left: 50%;
width: 0.35rem;
height: 0.35rem;
border-radius: 50%;
background: #38bdf8;
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1);
transform: translateX(-50%);
}
.hero-kpi-card .kpi-value {
margin-top: 0.6rem;
}
}
@media (max-width: 767.98px) {
.hero-kpi-grid {
gap: 0.4rem !important;
padding: 0.55rem !important;
border: 1px solid rgba(125, 211, 252, 0.3) !important;
background: rgba(3, 16, 32, 0.78) !important;
}
.hero-kpi-grid::before {
left: 0.8rem;
font-size: 0.58rem;
}
.hero-kpi-card,
.hero-kpi-card:last-child,
.hero-kpi-card:nth-child(odd),
.hero-kpi-card:nth-child(-n+2),
.hero-kpi-card:nth-child(2),
.hero-kpi-card:nth-child(3),
.hero-kpi-card:nth-child(4) {
min-height: 4.8rem;
padding: 0.65rem 0.6rem !important;
border: 1px solid rgba(125, 211, 252, 0.14) !important;
border-radius: 13px;
background: rgba(255, 255, 255, 0.045);
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 0.16rem !important;
grid-template-columns: none !important;
}
.hero-kpi-card:nth-child(3):last-child {
grid-column: 1 / -1 !important;
}
.hero-kpi-card::before {
content: '';
width: 0.3rem;
height: 0.3rem;
margin-bottom: 0.15rem;
border-radius: 50%;
background: #38bdf8;
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
}
.hero-kpi-card .kpi-value {
margin-top: 0.05rem;
font-size: 1.05rem !important;
}
.hero-kpi-card .kpi-label {
font-size: 0.71rem !important;
}
.hero-kpi-card .kpi-sub {
font-size: 0.62rem !important;
}
}
/* ==========================================================================
11. MOBILE CONTENT SLIDERS
--------------------------------------------------------------------------
Repeated card groups become native-feeling, touch-scrollable rails on
phones. Cards remain fully readable, one card is shown with a deliberate
next-card preview, and desktop grid behavior is unchanged.
========================================================================== */
@media (max-width: 767.98px) {
.mobile-swipe-rail {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
align-items: stretch;
gap: 0.75rem !important;
width: 100% !important;
margin: 0 !important;
padding: 0.5rem 1rem 1.75rem 1rem !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory;
scroll-padding-left: 1rem !important;
scroll-behavior: smooth;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.mobile-swipe-rail::-webkit-scrollbar {
display: none !important;
}
.mobile-swipe-rail > [class*="col-"] {
flex: 0 0 calc(100vw - 72px) !important;
width: calc(100vw - 72px) !important;
max-width: 315px !important;
min-width: 250px !important;
padding: 0 !important;
scroll-snap-align: start;
display: flex;
}
.mobile-swipe-rail > [class*="col-"] > * {
width: 100%;
max-width: 100%;
}
.mobile-swipe-rail > [class*="col-"]:last-child {
margin-right: 1rem !important;
}
/* The tall pillar cards need a stable height while swiping so the rail
does not jump as different images and descriptions come into view. */
.mobile-swipe-rail .pillar-card {
height: 100% !important;
min-height: 0 !important;
}
.mobile-swipe-rail .innovation-card,
.mobile-swipe-rail .service-industrial-card,
.mobile-swipe-rail .gemini-product-card,
.mobile-swipe-rail .project-horizon-card,
.mobile-swipe-rail .gemini-value-card {
height: 100% !important;
}
}
@media (max-width: 360px) {
.mobile-swipe-rail > [class*="col-"] {
flex: 0 0 calc(100vw - 60px) !important;
width: calc(100vw - 60px) !important;
max-width: 290px !important;
}
}
/* ==========================================================================
BREADCRUMBS MOBILE ALIGNMENT REFINEMENT
========================================================================== */
nav[aria-label="breadcrumb"] {
background: #ffffff;
border-bottom: 1px solid #e2e8f0;
padding: 0.65rem 0 !important;
}
nav[aria-label="breadcrumb"] .container {
padding-inline: 1rem !important;
}
.breadcrumb {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0.82rem !important;
line-height: 1.5 !important;
row-gap: 0.25rem;
}
@media (max-width: 767.98px) {
.breadcrumb {
flex-wrap: nowrap !important;
overflow-x: auto !important;
white-space: nowrap !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px !important;
}
.breadcrumb::-webkit-scrollbar {
display: none !important;
}
.breadcrumb-item {
flex-shrink: 0 !important;
}
}
.breadcrumb-item {
display: inline-flex !important;
align-items: center !important;
color: #64748b !important;
font-weight: 500;
}
.breadcrumb-item a {
color: #0284c7 !important;
font-weight: 600;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
padding: 0 1px;
}
.breadcrumb-item a:hover {
color: #0369a1 !important;
text-decoration: underline !important;
}
.breadcrumb-item.active {
color: #0c1e38 !important;
font-weight: 600;
}
.breadcrumb-item + .breadcrumb-item::before {
padding-right: 0.45rem !important;
padding-left: 0.45rem !important;
color: #94a3b8 !important;
content: "/" !important;
}
/* Dark hero breadcrumbs (used in pillar page hero headers) */
.pillar-page :is(.semi-hero, .bio-hero, .water-hero, .lab-hero, .mfg-hero, .aroma-hero) nav[aria-label="breadcrumb"] {
background: transparent !important;
border-bottom: 0 !important;
padding: 0 !important;
margin-bottom: 1.15rem !important;
}
.pillar-page :is(.semi-hero, .bio-hero, .water-hero, .lab-hero, .mfg-hero, .aroma-hero) .breadcrumb-item {
color: rgba(255, 255, 255, 0.7) !important;
}
.pillar-page :is(.semi-hero, .bio-hero, .water-hero, .lab-hero, .mfg-hero, .aroma-hero) .breadcrumb-item a {
color: rgba(255, 255, 255, 0.88) !important;
}
.pillar-page :is(.semi-hero, .bio-hero, .water-hero, .lab-hero, .mfg-hero, .aroma-hero) .breadcrumb-item.active {
color: #ffffff !important;
font-weight: 600 !important;
}
.pillar-page :is(.semi-hero, .bio-hero, .water-hero, .lab-hero, .mfg-hero, .aroma-hero) .breadcrumb-item + .breadcrumb-item::before {
color: rgba(255, 255, 255, 0.4) !important;
}
/* ==========================================================================
FOOTER COPYRIGHT POLISH (MOBILE + DESKTOP)
========================================================================== */
.footer .copyright {
padding: 22px 0 28px !important;
border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
font-size: 0.85rem !important;
color: #94a3b8 !important;
}
.text-footer-copy {
font-size: 0.85rem !important;
color: #94a3b8 !important;
line-height: 1.6;
margin-bottom: 0;
}
.text-footer-copy strong {
color: #ffffff !important;
font-weight: 600;
}
.footer-legal-links {
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.25rem;
}
.footer-legal-links a {
color: #cbd5e1 !important;
text-decoration: none !important;
font-size: 0.85rem !important;
padding: 4px 6px;
transition: color 0.2s ease;
}
.footer-legal-links a:hover {
color: #38bdf8 !important;
text-decoration: underline !important;
}
.text-footer-divider {
color: rgba(255, 255, 255, 0.25) !important;
}
@media (max-width: 767.98px) {
.footer .copyright {
padding: 20px 0 38px !important;
text-align: center !important;
}
.footer .copyright .col-md-7,
.footer .copyright .col-md-5 {
text-align: center !important;
}
}