/* gallery.html ONLY — affidavit body sections (from career-page-body-sections.css)
Glass → gallery-page-body-glass.css + gallery-page-stats-glass.css
Photo grid / pagination / lightbox → gallery.css + gallery.js (DO NOT TOUCH) */
/* ── Section backgrounds (affidavit alternating bands) ── */
/* Banner-to-body spacing lock: gallery.html real DOM is banner section then main */
html[data-gallery-page] .banner__section + main#gallery-page-body {
margin-top: 0 !important;
padding-top: 0 !important;
}
html[data-gallery-page] .banner__section + main#gallery-page-body .gallery-stats-band.section {
padding-top: 0 !important;
}
html[data-gallery-page] .gallery-stats-band {
background: #ffffff !important;
}
html[data-gallery-page] main#gallery-page-body .gallery-open-work,
html[data-gallery-page] main#gallery-page-body #gallery-section.gallery-open-work {
background-color: #f5f0ea !important;
}
html[data-gallery-page] main#gallery-page-body section.gallery-narrative-split {
background: #ffffff !important;
}
/* ── Stats band height lock (glass → gallery-page-stats-glass.css) ── */
html[data-gallery-page] .gallery-stats-band.section {
padding-top: clamp(12px, 2vw, 22px) !important;
padding-bottom: clamp(16px, 2.6vw, 28px) !important;
}
/* ── Gallery work section (mirrors affidavit §8.3 + career-open-roles) ── */
html[data-gallery-page] main#gallery-page-body .gallery-open-work.section,
html[data-gallery-page] main#gallery-page-body #gallery-section.gallery-open-work {
padding-top: clamp(13px, 1.8vw, 22px) !important;
padding-bottom: clamp(56px, 7vw, 90px) !important;
min-height: auto !important;
}
/* Archived gallery heading lock: GALLERY above image grid */
html[data-gallery-page] main#gallery-page-body #gallery-section .gallery__title-container {
position: relative !important;
isolation: isolate !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: min(100%, 520px) !important;
margin: 0 auto 32px !important;
padding: clamp(12px, 2vw, 18px) !important;
text-align: center !important;
overflow: hidden !important;
border: 1px solid rgba(255, 255, 255, 0.62) !important;
border-radius: 28px !important;
background:
radial-gradient(circle at top right, rgba(72, 27, 130, 0.1), transparent 36%),
linear-gradient(165deg, rgba(255, 255, 255, 0.82), rgba(250, 248, 255, 0.68) 52%, rgba(245, 240, 252, 0.58)),
rgba(255, 255, 255, 0.36) !important;
box-shadow:
0 28px 58px rgba(72, 27, 130, 0.14),
0 10px 22px rgba(72, 27, 130, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.92),
inset 0 -2px 0 rgba(72, 27, 130, 0.08) !important;
backdrop-filter: blur(24px) saturate(152%) !important;
-webkit-backdrop-filter: blur(24px) saturate(152%) !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section .gallery__title-container::before {
content: "" !important;
position: absolute !important;
inset: 1px !important;
z-index: 0 !important;
border-radius: inherit !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0.14)) !important;
pointer-events: none !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section .gallery__title {
position: relative !important;
z-index: 1 !important;
display: inline-block !important;
overflow: hidden !important;
margin: 0 !important;
padding: 18px 42px 24px !important;
color: #2e0c5e !important;
-webkit-text-fill-color: #2e0c5e !important;
font-family: "Poppins", "Archivo", sans-serif !important;
font-size: clamp(2rem, 3.25vw, 3rem) !important;
font-weight: 800 !important;
line-height: 1.02 !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
border: 1px solid rgba(255, 255, 255, 0.64) !important;
border-radius: 20px !important;
background: linear-gradient(165deg, rgba(255, 255, 255, 0.88) 0%, rgba(250, 248, 255, 0.8) 52%, rgba(245, 240, 252, 0.74) 100%) !important;
box-shadow:
0 24px 48px rgba(72, 27, 130, 0.16),
0 12px 24px rgba(72, 27, 130, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.86),
inset 0 -1px 0 rgba(72, 27, 130, 0.08) !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76) !important;
backdrop-filter: blur(22px) saturate(145%) !important;
-webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section .gallery__title::before {
content: "" !important;
position: absolute !important;
inset: 1px !important;
border-radius: inherit !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0.16)) !important;
pointer-events: none !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section .gallery__title::after {
content: "" !important;
position: absolute !important;
bottom: 12px !important;
left: 50% !important;
width: 118px !important;
height: 4px !important;
border-radius: 999px !important;
background: linear-gradient(90deg, #2e0c5e 0%, #facc15 100%) !important;
box-shadow: 0 8px 16px rgba(46, 12, 94, 0.18) !important;
transform: translateX(-50%) !important;
}
@media (max-width: 767px) {
html[data-gallery-page] main#gallery-page-body #gallery-section .gallery__title-container {
width: min(100%, 360px) !important;
margin-bottom: 28px !important;
padding: 10px !important;
border-radius: 22px !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section .gallery__title {
width: 100% !important;
padding: 16px 24px 22px !important;
font-size: clamp(1.8rem, 8vw, 2.2rem) !important;
letter-spacing: 0 !important;
border-radius: 18px !important;
}
}
/* ── Grid island: photo grid owned by gallery.css + gallery.js ── */
html[data-gallery-page] main#gallery-page-body #gallery-pages-container {
display: grid !important;
grid-template-columns: 1fr;
position: relative;
width: 100%;
}
html[data-gallery-page] main#gallery-page-body #gallery-pages-container .gallery-page.row {
grid-area: 1 / 1;
display: none !important;
flex-wrap: wrap !important;
margin-right: calc(-0.5 * var(--bs-gutter-x, 1.5rem)) !important;
margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem)) !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-pages-container .gallery-page.row.active,
html[data-gallery-page] main#gallery-page-body #gallery-pages-container .gallery-page.row.gallery-page--exit,
html[data-gallery-page] main#gallery-page-body #gallery-pages-container .gallery-page.row.gallery-page--enter {
display: flex !important;
}
/* ── Stats grid layout only ── */
html[data-gallery-page] main#gallery-page-body .gallery-stats-band .grid {
display: grid !important;
gap: 22px;
width: 100%;
align-items: stretch;
}
html[data-gallery-page] main#gallery-page-body .gallery-stats-band .grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
html[data-gallery-page] main#gallery-page-body .gallery-stat-card {
height: 100%;
}
/* ── Section 2 split narrative (affidavit 1104–1142) ── */
html[data-gallery-page] main#gallery-page-body section.gallery-narrative-split {
padding-top: clamp(64px, 8vw, 100px) !important;
padding-bottom: clamp(56px, 7vw, 90px) !important;
}
html[data-gallery-page] main#gallery-page-body .gallery-narrative-split__grid {
align-items: stretch;
}
html[data-gallery-page] main#gallery-page-body .gallery-narrative__actions {
margin-top: 4px !important;
}
@media (max-width: 1080px) {
html[data-gallery-page] main#gallery-page-body .gallery-stats-band .grid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
html[data-gallery-page] main#gallery-page-body .gallery-narrative__actions a {
font-size: 0.68rem !important;
padding: 9px 6px !important;
}
}
@media (max-width: 860px) {
html[data-gallery-page] main#gallery-page-body .gallery-stats-band .grid--4 {
grid-template-columns: 1fr;
}
}
/* --- Gallery image cards: Discount affidavit block-layer build, gallery page only --- */
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .gallery-page > [class*="col-"] {
display: flex !important;
align-items: stretch !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .service__items.gallery-image-card {
--gallery-card-purple: #481b82;
--gallery-card-deep: #2e0c5e;
--gallery-card-gold: #facc15;
position: relative !important;
isolation: isolate !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .gallery-image-card__tray {
position: relative !important;
z-index: 1 !important;
display: grid !important;
grid-template-rows: auto 1fr !important;
gap: 13px !important;
width: 100% !important;
height: 100% !important;
padding: clamp(14px, 1.7vw, 18px) !important;
overflow: hidden !important;
isolation: isolate !important;
border: 1px solid rgba(255, 255, 255, 0.62) !important;
border-radius: 26px !important;
background:
radial-gradient(circle at top right, rgba(72, 27, 130, 0.14), transparent 34%),
linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(250, 248, 255, 0.72) 52%, rgba(245, 240, 252, 0.62)),
rgba(255, 255, 255, 0.44) !important;
box-shadow:
0 34px 70px rgba(46, 12, 94, 0.18),
0 14px 30px rgba(46, 12, 94, 0.09),
inset 0 1px 0 rgba(255, 255, 255, 0.96),
inset 0 -2px 0 rgba(72, 27, 130, 0.10) !important;
backdrop-filter: blur(24px) saturate(150%) !important;
-webkit-backdrop-filter: blur(24px) saturate(150%) !important;
transform: translateY(0) !important;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease, filter 0.28s ease !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .gallery-image-card__tray::before,
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .gallery-image-card__media-slab::before,
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .gallery-image-card__copy-slab::before {
content: "" !important;
position: absolute !important;
inset: 1px !important;
z-index: 1 !important;
border-radius: inherit !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0.16)) !important;
pointer-events: none !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .gallery-image-card__tray > *,
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .gallery-image-card__media-slab > *,
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .gallery-image-card__copy-slab > * {
position: relative !important;
z-index: 2 !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .gallery-image-card:hover .gallery-image-card__tray {
transform: translateY(-8px) !important;
border-color: rgba(255, 255, 255, 0.76) !important;
box-shadow:
0 44px 86px rgba(46, 12, 94, 0.22),
0 18px 34px rgba(46, 12, 94, 0.11),
inset 0 1px 0 rgba(255, 255, 255, 0.98),
inset 0 -2px 0 rgba(72, 27, 130, 0.12) !important;
filter: brightness(1.02) !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .gallery-image-card__media-slab,
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .gallery-image-card__copy-slab {
position: relative !important;
overflow: hidden !important;
isolation: isolate !important;
display: flex !important;
width: 100% !important;
padding: clamp(10px, 1.25vw, 14px) !important;
border-radius: 20px !important;
border: 1px solid rgba(255, 255, 255, 0.58) !important;
background:
linear-gradient(165deg, rgba(255, 255, 255, 0.88), rgba(250, 248, 255, 0.78) 52%, rgba(245, 240, 252, 0.72)),
rgba(255, 255, 255, 0.58) !important;
box-shadow:
0 22px 42px rgba(46, 12, 94, 0.12),
0 10px 20px rgba(46, 12, 94, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.86),
inset 0 -1px 0 rgba(72, 27, 130, 0.08) !important;
backdrop-filter: blur(18px) saturate(142%) !important;
-webkit-backdrop-filter: blur(18px) saturate(142%) !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .gallery-image-card__copy-slab {
flex: 1 1 auto !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .service__thumb {
position: relative !important;
z-index: 2 !important;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 16 / 10 !important;
overflow: hidden !important;
cursor: pointer !important;
border-radius: 16px !important;
border: 1px solid rgba(255, 255, 255, 0.72) !important;
background: #ffffff !important;
box-shadow:
0 18px 34px rgba(46, 12, 94, 0.13),
inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .service__thumb img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
transform: scale(1) !important;
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.32s ease !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .gallery-image-card:hover .service__thumb img {
transform: scale(1.035) !important;
filter: saturate(1.05) contrast(1.03) !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .service__content {
display: grid !important;
align-content: start !important;
gap: 10px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .service__content h4,
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .service__content p {
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
border: 1px solid rgba(255, 255, 255, 0.54) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(250, 248, 255, 0.48)),
rgba(255, 255, 255, 0.40) !important;
box-shadow:
0 16px 30px rgba(46, 12, 94, 0.10),
0 7px 15px rgba(46, 12, 94, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.86),
inset 0 -1px 0 rgba(72, 27, 130, 0.08) !important;
backdrop-filter: blur(16px) saturate(138%) !important;
-webkit-backdrop-filter: blur(16px) saturate(138%) !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .service__content h4::before,
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .service__content p::before {
content: "" !important;
position: absolute !important;
inset: 1px 1px auto !important;
height: 54% !important;
border-radius: inherit !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0)) !important;
pointer-events: none !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .service__content h4 {
width: fit-content !important;
max-width: 100% !important;
padding: 11px 14px !important;
border-radius: 22px !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .service__content h4 a {
position: relative !important;
z-index: 1 !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
color: var(--gallery-card-deep) !important;
-webkit-text-fill-color: var(--gallery-card-deep) !important;
font-family: "DM Sans", sans-serif !important;
font-size: clamp(0.98rem, 1.25vw, 1.12rem) !important;
font-weight: 900 !important;
line-height: 1.15 !important;
letter-spacing: 0 !important;
text-decoration: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .service__content p {
padding: 13px 15px !important;
border-radius: 18px !important;
color: #252525 !important;
-webkit-text-fill-color: #252525 !important;
font-family: "DM Sans", sans-serif !important;
font-size: 0.88rem !important;
font-weight: 650 !important;
line-height: 1.5 !important;
}
@media (max-width: 767px) {
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .gallery-image-card__tray {
padding: 14px !important;
gap: 12px !important;
border-radius: 22px !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .gallery-image-card__media-slab,
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .gallery-image-card__copy-slab {
padding: 10px !important;
border-radius: 18px !important;
}
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .service__content h4,
html[data-gallery-page] main#gallery-page-body #gallery-section #gallery-pages-container .service__content p {
width: 100% !important;
}
}