/* Health Job Scout redesign — Group A shared building blocks.
Self-contained: no Tailwind classes, works regardless of the precompiled styles.css.
Brand colour: navy #0f2942 (matches the live site), frosted glass surfaces. */
:root{
--hjs-navy: #0f2942;
--hjs-navy-rgb: 15,41,66;
--hjs-glass-bg: rgba(255,255,255,.55);
--hjs-glass-border: rgba(255,255,255,.6);
--hjs-glass-shadow: 0 8px 32px rgba(15,41,66,.12);
}
/* Phone browsers paint a dark translucent box over anything tappable while it is pressed.
Switched off site-wide; pressed feedback is our own (:active rules below and per page). */
*{-webkit-tap-highlight-color:transparent;}
@media (prefers-reduced-motion: reduce){
.hjs-glass-pill-nav, .hjs-glass-btn, .hjs-metal-btn, .hjs-wave-grid-bg canvas{
transition: none !important;
animation: none !important;
}
}
/* ---------- Glass pill nav ----------
Real "liquid glass" is two layers, not one blurred box: an outer metallic
rim (white → grey → white gradient, like light wrapping round a glass tube)
framing an inner translucent surface with an embossed top/bottom edge.
Structure: .hjs-glass-pill-nav (rim) > .hjs-glass-pill-nav-inner (surface, flex row). */
.hjs-glass-pill-nav{
max-width:72rem;margin:0 auto;padding:5px;border-radius:999px;
background:linear-gradient(180deg,
#fff 0%, rgba(210,219,231,.95) 10%, rgba(150,165,188,.55) 35%,
rgba(150,165,188,.4) 65%, rgba(210,219,231,.95) 90%, #fff 100%);
box-shadow:
0 1px 2px rgba(15,41,66,.04), 0 4px 10px rgba(15,41,66,.05),
0 12px 24px rgba(15,41,66,.07), 0 24px 48px rgba(15,41,66,.1);
}
.hjs-glass-pill-nav-inner{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:.55rem .55rem .55rem 1.05rem;border-radius:999px;
background:linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.32) 50%, rgba(255,255,255,.55) 100%);
backdrop-filter:blur(16px) saturate(180%) url(#hjs-glass-distortion);
-webkit-backdrop-filter:blur(16px) saturate(180%);
box-shadow:inset 0 1.5px 1px rgba(255,255,255,.95), inset 0 -1.5px 1px rgba(15,41,66,.12);
}
.hjs-glass-pill-nav .hjs-nav-brand{
display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;
color:var(--hjs-navy);text-decoration:none;white-space:nowrap;
}
.hjs-glass-pill-nav .hjs-nav-links{
display:flex;align-items:center;gap:1.75rem;list-style:none;margin:0;padding:0;
}
.hjs-glass-pill-nav .hjs-nav-links a{
color:rgba(var(--hjs-navy-rgb),.72);text-decoration:none;font-size:.9rem;font-weight:500;
transition:color .15s ease;
}
.hjs-glass-pill-nav .hjs-nav-links a:hover{color:var(--hjs-navy);}
.hjs-glass-pill-nav .hjs-nav-cta{
background:var(--hjs-navy);color:#fff;border:none;border-radius:999px;
padding:.55rem 1.2rem;font-size:.85rem;font-weight:600;cursor:pointer;
text-decoration:none;white-space:nowrap;transition:opacity .15s ease,transform .15s ease;
}
.hjs-glass-pill-nav .hjs-nav-cta:hover{opacity:.9;}
.hjs-glass-pill-nav .hjs-nav-cta:active{transform:scale(.97);}
/* Hamburger — shown under the breakpoint set by the page (collapses non-priority links) */
.hjs-nav-hamburger{
display:none;flex-direction:column;justify-content:center;gap:4px;
width:2.2rem;height:2.2rem;border:none;background:transparent;cursor:pointer;padding:0;
}
.hjs-nav-hamburger span{
display:block;height:2px;width:100%;background:var(--hjs-navy);border-radius:2px;
transition:transform .25s ease,opacity .2s ease;
}
.hjs-nav-hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hjs-nav-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hjs-nav-hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
@media (max-width: 640px){
.hjs-glass-pill-nav-inner .hjs-nav-links{display:none;}
.hjs-nav-hamburger{display:flex;}
}
/* ---------- Glass buttons (secondary / outline style) ----------
Same rim-plus-surface trick as the nav, done on a single element with a
::before rim (box-shadow alone reads as a plain translucent box, not glass). */
.hjs-glass-btn{
position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
padding:.8rem 1.6rem;border-radius:999px;font-weight:600;font-size:.95rem;
color:var(--hjs-navy);text-decoration:none;cursor:pointer;
background:linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.55) 100%);
backdrop-filter:blur(14px) saturate(180%) url(#hjs-glass-distortion);
-webkit-backdrop-filter:blur(14px) saturate(180%);
box-shadow:
inset 0 1.5px 1px rgba(255,255,255,.95), inset 0 -1.5px 1px rgba(15,41,66,.14),
0 8px 24px rgba(15,41,66,.1);
transition:transform .15s ease, box-shadow .15s ease;
}
.hjs-glass-btn::before{
content:"";position:absolute;inset:-1.5px;z-index:-1;border-radius:inherit;
background:linear-gradient(180deg,
#fff 0%, rgba(210,219,231,.95) 12%, rgba(140,155,180,.6) 45%,
rgba(140,155,180,.5) 55%, rgba(210,219,231,.95) 88%, #fff 100%);
}
.hjs-glass-btn:hover{
transform:translateY(-1px);
box-shadow:inset 0 1.5px 1px rgba(255,255,255,1), inset 0 -1.5px 1px rgba(15,41,66,.16), 0 12px 28px rgba(15,41,66,.16);
}
.hjs-glass-btn:active{transform:translateY(0) scale(.98);}
/* ---------- Metal CTA button ----------
ponytail: CSS-gradient sheen, not a WebGL shader. Upgrade to a real liquid-metal
WebGL pass (framer "LiquidMetalButton") only if the CSS version measurably
underwhelms on review — this gets 90% of the look for a few lines of CSS. */
.hjs-metal-btn{
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
padding:.95rem 2rem;border-radius:999px;font-weight:700;font-size:1rem;
color:#fff;text-decoration:none;cursor:pointer;border:none;overflow:hidden;
background:linear-gradient(135deg, #16314f 0%, var(--hjs-navy) 45%, #1d3e63 55%, var(--hjs-navy) 100%);
box-shadow:0 10px 30px rgba(15,41,66,.35);
transition:transform .15s ease, box-shadow .15s ease;
}
.hjs-metal-btn::before{
content:"";position:absolute;inset:0;
background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.55) 35%, transparent 50%);
transform:translateX(-120%);
animation:hjs-metal-sheen 3.2s ease-in-out infinite;
}
@keyframes hjs-metal-sheen{
0%,55%{transform:translateX(-120%);}
100%{transform:translateX(120%);}
}
.hjs-metal-btn:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(15,41,66,.45);}
.hjs-metal-btn:active{transform:translateY(0) scale(.98);}
.hjs-metal-btn .hjs-metal-subtext{
display:block;margin-top:.4rem;font-size:.75rem;font-weight:500;color:rgba(var(--hjs-navy-rgb),.65);
text-align:center;
}
/* ---------- Glass footer ---------- */
.hjs-glass-footer{
border-radius:28px 28px 0 0;margin:0 1rem;padding:5px;
background:linear-gradient(180deg,
#fff 0%, rgba(210,219,231,.95) 4%, rgba(150,165,188,.5) 30%,
rgba(150,165,188,.5) 70%, rgba(210,219,231,.95) 96%, #fff 100%);
box-shadow:0 -1px 2px rgba(15,41,66,.04), 0 -12px 32px rgba(15,41,66,.08);
}
.hjs-glass-footer-inner{
border-radius:24px 24px 0 0;padding:3rem 2.5rem 2rem;
background:linear-gradient(160deg, rgba(255,255,255,.68) 0%, rgba(255,255,255,.3) 55%, rgba(255,255,255,.5) 100%);
backdrop-filter:blur(16px) saturate(180%) url(#hjs-glass-distortion);
-webkit-backdrop-filter:blur(16px) saturate(180%);
box-shadow:inset 0 1.5px 1px rgba(255,255,255,.95);
}
.hjs-glass-footer .hjs-footer-grid{
display:grid;grid-template-columns:2fr repeat(3, 1fr);gap:2rem;max-width:72rem;margin:0 auto;
}
.hjs-glass-footer h4{
font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:rgba(var(--hjs-navy-rgb),.55);margin:0 0 .9rem;
}
.hjs-glass-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;}
.hjs-glass-footer a{color:rgba(var(--hjs-navy-rgb),.8);text-decoration:none;font-size:.9rem;}
.hjs-glass-footer a:hover{color:var(--hjs-navy);text-decoration:underline;}
.hjs-glass-footer .hjs-footer-bottom{
max-width:72rem;margin:2rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(var(--hjs-navy-rgb),.1);
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
font-size:.8rem;color:rgba(var(--hjs-navy-rgb),.6);
}
@media (max-width: 720px){
.hjs-glass-footer .hjs-footer-grid{grid-template-columns:1fr 1fr;}
}
/* ---------- Center the real Framer nav/footer at their native width ----------
These components position their INTERNAL children (link spacing, the CTA
button, footer columns) using JS-measured widths baked in at build time, not
CSS. Forcing the outer shell to a different width via CSS leaves children
positioned for the old size while overflow:hidden clips whatever no longer
fits — that's what caused the footer's Legal column and nav items to get
cut off. Fix: never resize these boxes, only center each at its own native
fixed width (nav: 780/740/350px, footer: 1140/740/350px) and switch which
*variant* is mounted at breakpoints that match those native sizes, so the
component is always rendered at the exact size it was designed for. */
.framer-UjXnB.framer-j65pq1,
.framer-EPnV5.framer-qhrze5{margin-left:auto;margin-right:auto;}
/* ---------- Responsive nav/footer variant switch ----------
Three tiers, matched to the components' own native widths so neither ever
has to squeeze: Desktop (nav 780px / footer 1140px) needs real room, Tablet
(both 740px — same size, conveniently) is the middle tier, Phone (both
350px) is the narrow tier. Mount all three per component, CSS shows one. */
/* The nav's closed "Phone" variant still renders its Links row (just absolutely
positioned off-screen for the "Phone Open" expanded state) — that row's own
natural width is wider than the closed pill's top row, so a sliver of it
peeks out underneath and makes the pill look uneven-width. Only the OPEN
variant (framer-v-frcwka) should ever show the links; hide them in closed
Phone (framer-v-1imvk04). */
.framer-UjXnB.framer-v-1imvk04 .framer-1y4p3qv,
.framer-UjXnB.framer-v-1imvk04 .framer-12z6-container{display:none !important;}
/* with the links row hidden above, its parent still reserves a fixed 58px
height meant to fit that now-hidden row, leaving dead space below the
logo/hamburger row — shrink it to fit just the visible top row. */
.framer-UjXnB.framer-v-1imvk04 .framer-nvjl2d{height:auto !important;padding-bottom:8px !important;}
/* Root cause (same pattern as the footer's .framer-gh3yrf bug below): both
the NavLink root (.framer-VRUFJ) and the Sign-in GlassCTA root (.framer-0pSDV)
compute width:350px as CONTENT width (content-box sizing) then add their own
30px/48px padding on top instead of including it, overflowing their 350px
parent by exactly that much. border-box makes the declared width include
padding, so the element actually fits the space its parent gave it. */
.framer-VRUFJ, .framer-0pSDV{box-sizing:border-box !important;}
/* keep the row-level clip too as a safety net, not the primary fix anymore */
.framer-UjXnB.framer-v-frcwka .framer-1y4p3qv{overflow:hidden;border-radius:inherit;}
/* Footer's email input + Contact us button sit side by side even in the Phone
footer variant, which is why they looked cramped/cut off on mobile — stack
them instead. */
.framer-EPnV5.framer-v-jipwvt .framer-56k769{flex-direction:column;align-items:stretch;}
/* the email field's "flex:1 0 0px;width:1px" sizing trick only works in a row
(flex-grow fills the row's horizontal space); stacked into a column it
collapses to a literal 1px-wide box instead, so force it full-width here. */
.framer-EPnV5.framer-v-jipwvt .framer-1yj516n{width:100% !important;flex:none !important;}
/* Phone footer's Explore/Account/Legal columns ship stacked full-width
(vendored default: .framer-azafnm flex-direction:column), making the
mobile footer very tall. Lay them out side by side instead, same flex:1
trick the Tablet variant already uses for its own link columns. Same
!important reason as the logo rule above: the vendored component injects
its own same-specificity CSS for these exact selectors at mount time,
after our stylesheet in the cascade, so a plain override loses to it. */
.framer-EPnV5.framer-v-jipwvt .framer-azafnm{flex-direction:row !important;gap:10px !important;}
.framer-EPnV5.framer-v-jipwvt .framer-1c582d9,
.framer-EPnV5.framer-v-jipwvt .framer-akrz71,
.framer-EPnV5.framer-v-jipwvt .framer-1jetxtr{flex:1 0 0px !important;width:1px !important;min-width:0 !important;}
/* Column titles and links each carry 12px horizontal padding (sized for a
roomy Desktop row), which eats most of a ~100px-wide phone column. Their
own containers and root elements also default to width:min-content, which
(combined with flex children's implicit min-width:auto) stops them from
ever shrinking to the narrow column width above - force them to actually
fill it so the label text below has something to wrap against. */
.framer-EPnV5.framer-v-jipwvt .framer-zs9r5e,
.framer-EPnV5.framer-v-jipwvt .framer-1nc874f,
.framer-EPnV5.framer-v-jipwvt .framer-1xz2aju,
.framer-EPnV5.framer-v-jipwvt .framer-3dX1v.framer-m022lg{padding-left:4px !important;padding-right:4px !important;width:100% !important;box-sizing:border-box !important;}
.framer-EPnV5.framer-v-jipwvt .framer-azafnm [class*="-container"]{width:100% !important;}
/* Column titles (Explore/Account/Legal) need the same centering as the links
below them - justify-content on the title row wrapper, text-align on the
actual
one level deeper (see pattern #16: the wrapper's text-align
alone never reaches it). */
.framer-EPnV5.framer-v-jipwvt .framer-zs9r5e,
.framer-EPnV5.framer-v-jipwvt .framer-1nc874f,
.framer-EPnV5.framer-v-jipwvt .framer-1xz2aju{justify-content:center !important;}
.framer-EPnV5.framer-v-jipwvt .framer-12h1ndi p,
.framer-EPnV5.framer-v-jipwvt .framer-mber6m p,
.framer-EPnV5.framer-v-jipwvt .framer-zldvot p{text-align:center !important;}
/* Links keep their full label (e.g. "Referral program") instead of being
shortened: white-space:pre is the vendored default (fine at Desktop width,
not at ~100px), letting it wrap onto a second line is what fits a long
label into a narrow phone column without cutting the text. */
.framer-EPnV5.framer-v-jipwvt .framer-3dX1v .framer-1s3nlru{white-space:normal !important;line-height:1.35 !important;width:100% !important;text-align:center !important;}
/* text-align:center on the wrapper div above does NOT reach the actual text:
the real label is a RichText-rendered
one level deeper, which ships
its own explicit text-align (start) and an inline font-size:14px straight
on the element - inline styles beat an inherited value and a plain class
rule, so both have to be overridden directly on the
, not just its
wrapper, same "line-height on the wrapper doesn't reach the inner
has its OWN explicit line-height (13px, from a separate Framer base rule reading
its --framer-line-height:1em inline var), which isn't inherited since it's set
directly — override the
itself, not just the div, to get real gap between
the two wrapped lines. */
.framer-EPnV5.framer-v-jipwvt .framer-1502rho p{line-height:1.8 !important;}
/* Logo mark (nav + footer): the vendored template's own placeholder here is a
generic rotated-square "Gem" (its own source literally names the layers "Gem"/
"Gem Body"/"Facet") — not the owner's actual logo. Re-skin it as the site's
real bell mark (same path geometry as deploy/favicon.svg), owner-picked style:
minimal line bell (no tile, no notification dot), with a gradient stroke +
drop-shadow + inner bevel highlight for real dimensionality rather than a flat
1px line (deploy/assets/bell-3d.svg). Un-rotate the "Gem Body" layer, swap its
gradient/shadow for the bell image, and hide the inner "Facet" layer since the
bell image is self-contained. !important needed throughout: the vendored
component injects its own CSS for these exact selectors at mount time (after
our stylesheet in the cascade), so a same-specificity rule without !important
loses to it. */
.framer-UjXnB .framer-1tc0o6h,
.framer-EPnV5 .framer-1wqh14y{
/* The CSS `rotate` property alone never worked: framer-motion applies this
element's 45deg spin via an inline `transform` on the DOM node directly
(confirmed via getComputedStyle — it still showed a 45deg rotation matrix
with only `rotate:0deg` set), which a standalone `rotate` override doesn't
touch. `transform:none` is what actually cancels it — an !important external
rule does beat a plain (non-!important) inline style. */
rotate:0deg !important;
transform:none !important;
background:url(../assets/bell-3d.svg?v=5) no-repeat center / contain !important;
box-shadow:none !important;
/* Vendor's own size is 19x19 inside a 30x30 centered "Gem" slot — bumped up
4px, still well within that slot so nothing overflows or shifts the logo
wordmark next to it. */
width:23px !important;
height:23px !important;
}
.framer-UjXnB .framer-1pwe2xp,
.framer-EPnV5 .framer-1du5d8x{display:none !important;}
/* Social buttons: the footer shows Instagram (nyzse6) and Facebook (jk4s26),
both linked to the real Health Job Scout pages (set in the vendored footer
source). They used to be hidden here while no accounts existed; X, LinkedIn
and GitHub were removed from the footer source, so nothing is hidden now. */
/* Closed-phone nav: logo has 14px left padding but the hamburger only had
12px right padding, and against a fully round pill edge that reads as
lopsided/cramped — even them out with a bit more room on both sides.
Same fix needed for the OPEN variant (v-frcwka) — it's a separate variant
class with its own padding, not automatically covered by the v-1imvk04 rule. */
.framer-UjXnB.framer-v-1imvk04 .framer-nvjl2d,
.framer-UjXnB.framer-v-frcwka .framer-nvjl2d{padding-left:16px !important;padding-right:16px !important;box-sizing:border-box !important;}
/* Without border-box above, .framer-nvjl2d stays content-box and the 16px
padding we just added gets tacked ON TOP of its existing width instead of
included — same overflow bug as .framer-q238x6/.framer-gh3yrf — pushing it
~13px past the pill's own edge on each side. The pill clips that overflow
(rounded corners), which eats most of the padding and left the Sign in
button looking flush against the glass edge with no visible gap. */
/* Hamburger/close circle (40x40 by default) felt oversized next to the
plain logo on the other side — scale it down a bit. transform:scale keeps
the icon bars/X proportionally centered without needing to recompute their
absolute-positioned offsets by hand. Only renders on Phone/Phone-Open. */
.framer-UjXnB .framer-1wmqfcy{transform:scale(0.82);}
/* Footer Phone variant: .framer-gh3yrf (brand column) computes width:100% as
CONTENT width (content-box sizing), then its own 12px left/right padding
adds on top instead of being included — pushing it 24px wider than its
parent allows. That's why the email input/button sit visibly off-center
with a bigger gap on one side. border-box makes the declared width include
padding, matching its parent's actual allocated space. */
.framer-EPnV5.framer-v-jipwvt .framer-gh3yrf{box-sizing:border-box !important;}
/* Same bug, Desktop footer variant: .framer-q238x6 is the wrapper holding the
brand column + Explore/Account/Legal columns. It computes width as CONTENT
width (content-box) then adds its own 40/44/30/44px padding on top instead
of including it, so it renders ~88px wider than the 1140px glass card and
the columns visually cross/touch the card's edge. border-box makes the
declared width include that padding so it actually fits inside the card. */
.framer-EPnV5 .framer-q238x6{box-sizing:border-box !important;}
/* flex+justify-content:center, not block+margin:auto: margin:auto collapses
to 0 and overflows one side when the fixed-width component is wider than
its container (phone tier 350px vs a narrow phone's padded content area) —
flex centering keeps it visually centered (overflowing evenly) instead. */
.hjs-tier-desktop, .hjs-tier-tablet, .hjs-tier-phone{display:none;}
@media (min-width: 1220px){.hjs-tier-desktop{display:flex;justify-content:center;}}
@media (min-width: 780px) and (max-width: 1219px){.hjs-tier-tablet{display:flex;justify-content:center;}}
@media (max-width: 779px){.hjs-tier-phone{display:flex;justify-content:center;}}
/* six nav links no longer fit the tablet pill below 900px, so the navbar alone uses its phone (menu) variant there */
@media (min-width: 780px) and (max-width: 899px){[data-hjs-component="nav"].hjs-tier-tablet{display:none;}[data-hjs-component="nav"].hjs-tier-phone{display:flex;justify-content:center;}}
/* Wrappers around the nav/footer tiers: give the fixed-width phone tier
(350px) more breathing room on narrow phones by shrinking the side
padding, instead of leaving a fixed 24px/16px that can push it past the
edge on smaller screens. */
.hjs-nav-wrap{max-width:72rem;margin:0 auto;padding:1rem 1.5rem 0;position:sticky;top:0;z-index:50;}
.hjs-footer-wrap{padding:0 1rem;}
@media (max-width: 420px){
.hjs-nav-wrap{padding:1rem 0.5rem 0;}
.hjs-footer-wrap{padding:0 0.5rem;}
}
/* ---------- Site background: grainy sky gradient (public pages only) ---------- */
/* Replaced the three.js wave grid on 2026-10-15 (owner picked option 8). The class name
is kept because layout-template.html and the page sources still use it. The film grain
sits on a fixed, pointer-events:none layer only, never on scrolling content, so it
costs no repaint while scrolling. Muted text colours elsewhere in this file and in
styles.css were re-tuned to keep at least 4.5:1 on the darkest part of this gradient
(grain included). */
.hjs-wave-grid-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
background:linear-gradient(160deg,#E4EFFC 0%,#B3D0F2 46%,#F7F9FC 100%);}
.hjs-wave-grid-bg::after{
content:"";position:absolute;inset:0;pointer-events:none;opacity:.17;
background-image:url("data:image/svg+xml;utf8,");
}
/* ---------- Reusable glass pop-up template ----------
Hand-rolled (no vendored equivalent exists for a form/modal anywhere in
this project). Generic .hjs-glass-modal* classes - reuse this whole block
for ANY future pop-up (not just contact), only the content inside
.hjs-glass-modal-panel-inner changes per use. The submit button reuses
.hjs-metal-btn as-is rather than new CSS.
Two-layer glass, measured directly off the real vendored footer's own
computed style (getComputedStyle on the live component) rather than
approximated by eye: an outer "rim" (soft layered shadow + faint grey
metallic gradient) framing an inner "surface" (the actual frosted glass,
with embossed inset top/bottom edge highlights) - same structure as
.hjs-glass-pill-nav already uses, just with the footer's own numbers. */
.hjs-glass-modal{
position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:1.5rem;
}
.hjs-glass-modal.open{display:flex;}
.hjs-glass-modal-backdrop{position:absolute;inset:0;background:rgba(15,41,66,.35);}
.hjs-glass-modal-panel{
position:relative;width:100%;max-width:26rem;max-height:calc(100vh - 3rem);
border-radius:32px;padding:6px;
background:linear-gradient(rgba(255,255,255,.55) 0%, rgba(201,201,201,.35) 9%, rgba(161,161,161,.25) 32%, rgba(117,117,117,.2) 73%, rgba(255,255,255,.55) 100%);
box-shadow:
0.29px 4.36px 2.18px rgba(0,0,0,.01), 0.48px 7.24px 3.63px rgba(0,0,0,.01),
0.78px 11.7px 5.86px rgba(0,0,0,.02), 1.28px 19.15px 9.6px rgba(0,0,0,.03),
2.2px 32.97px 16.52px rgba(0,0,0,.03), 4px 60px 30.07px rgba(0,0,0,.06);
}
.hjs-glass-modal-panel-inner{
position:relative;max-height:calc(100vh - 3rem - 12px);overflow-y:auto;border-radius:29px;padding:1.9rem;
background:linear-gradient(150deg, rgba(208,208,208,.22) 0%, rgba(232,232,232,.28) 50%, rgba(200,200,200,.22) 100%);
backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
box-shadow:inset 0 1px 1.5px rgba(0,0,0,.07), inset 0 -1px 1.5px rgba(0,0,0,.07);
}
.hjs-glass-modal-panel-inner h2{margin:0 0 .4rem;color:var(--hjs-navy);font-size:1.4rem;font-weight:700;}
.hjs-glass-modal-sub{margin:0 0 1.4rem;color:#2A3C52;font-size:.92rem;}
.hjs-glass-modal-close{
position:absolute;top:1rem;right:1rem;width:2rem;height:2rem;border-radius:999px;border:none;
background:rgba(15,41,66,.06);color:var(--hjs-navy);font-size:1.3rem;line-height:1;cursor:pointer;
}
.hjs-glass-modal-close:hover{background:rgba(15,41,66,.12);}
.hjs-glass-modal-panel-inner label{display:block;font-size:.85rem;font-weight:600;color:var(--hjs-navy);margin:.9rem 0 .35rem;}
.hjs-glass-modal-panel-inner label:first-of-type{margin-top:0;}
.hjs-glass-modal-panel-inner input,.hjs-glass-modal-panel-inner textarea{
width:100%;box-sizing:border-box;padding:.7rem .9rem;border-radius:10px;border:1px solid rgba(255,255,255,.5);
background:rgba(255,255,255,.16);backdrop-filter:blur(6px) saturate(140%);-webkit-backdrop-filter:blur(6px) saturate(140%);
box-shadow:inset 0 1px 1.5px rgba(255,255,255,.5), inset 0 -1px 1.5px rgba(15,41,66,.05);
font:inherit;color:#1c1917;resize:vertical;
}
.hjs-glass-modal-panel-inner input::placeholder,.hjs-glass-modal-panel-inner textarea::placeholder{color:#4F647D;}
.hjs-glass-modal-panel-inner input:focus,.hjs-glass-modal-panel-inner textarea:focus{outline:2px solid var(--hjs-navy);outline-offset:1px;}
.hjs-glass-modal-msg{min-height:0;margin:.9rem 0 0;font-size:.85rem;padding:0;border-radius:10px;opacity:0;transition:opacity .2s ease;}
.hjs-glass-modal-msg.show{opacity:1;padding:.6rem .8rem;}
.hjs-glass-modal-msg.error{background:rgba(185,28,28,.08);color:#b91c1c;}
.hjs-glass-modal-msg.success{background:rgba(21,128,61,.08);color:#15803d;}
.hjs-glass-modal-panel-inner .hjs-metal-btn{width:100%;margin-top:1.1rem;border:none;}
.hjs-glass-modal-panel-inner .hjs-metal-btn:disabled{opacity:.6;cursor:default;}
#hjsContactTurnstile{margin-top:1rem;}
.hjs-contact-whatsapp{text-align:center;margin:1rem 0 0;font-size:.85rem;color:#2A3C52;}
.hjs-contact-whatsapp a{color:var(--hjs-navy);font-weight:600;text-decoration:underline;}
/* ---------- Reusable glass form field (pill input / dropdown trigger) ----------
TEMPLATE: generic frosted pill for a search input or a dropdown's own trigger
button. Not page-specific — any future filter bar or form reuses this class
instead of rebuilding the look. First built for the Recent Jobs filters. */
.hjs-glass-field{
width:100%;box-sizing:border-box;font-family:inherit;font-size:.9rem;color:#1c1917;
border:1px solid rgba(255,255,255,.6);border-radius:9999px;padding:.75rem 1.1rem;
background:rgba(255,255,255,.35);
backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
box-shadow:inset 0 1.5px 1px rgba(255,255,255,.8), inset 0 -1.5px 1px rgba(15,41,66,.06), 0 1px 2px rgba(15,41,66,.04);
}
.hjs-glass-field::placeholder{color:#4F647D;}
.hjs-glass-field:focus{outline:none;box-shadow:inset 0 1.5px 1px rgba(255,255,255,.8), inset 0 -1.5px 1px rgba(15,41,66,.06), 0 0 0 2px rgba(15,41,66,.75);}
/* ---------- Reusable glass dropdown template ----------
TEMPLATE for any future custom