/* =========================================================================
Hasura home-page redesign — scoped styles (.hmg-home / .hmg-footer)
Fonts loaded via in app.blade.php :
Barlow 500;600;700;800 + Open Sans 400;500;600;700
Breakpoint: 860px (desktop = base; mobile in @media max-width:860px)
========================================================================= */
/* ---- brand fonts (Hasura) — single-weight faces, always used at font-weight:normal
to avoid faux-bold synthesis. Headers = Semibold, sub-headers = Sub, Bold reserved. ---- */
@font-face { font-family:'Hasura Semibold'; src:url('/fonts/Hasura-Semibold.ttf') format('truetype'); font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:'Hasura Bold'; src:url('/fonts/Hasura-Bold.ttf') format('truetype'); font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:'Hasura Sub'; src:url('/fonts/Hasura-Sub.ttf') format('truetype'); font-weight:normal; font-style:normal; font-display:swap; }
/* ---- scoped base ---- */
.hmg-home,
.hmg-footer { font-family:'Open Sans',sans-serif; color:#1A1D2E; -webkit-font-smoothing:antialiased; }
.hmg-home *, .hmg-footer * { box-sizing:border-box; }
.hmg-home img, .hmg-footer img { margin:0; }
.hmg-home a, .hmg-footer a { text-decoration:none; }
.hmg-home { width:100%; overflow-x:hidden; }
/* ---- keyframes ---- */
@keyframes hmgUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes hmgMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes hmgPan { from { object-position:42% center; } to { object-position:58% center; } }
@keyframes hmgPulse { 0% { transform:scale(1); opacity:.7; } 100% { transform:scale(1.35); opacity:0; } }
/* =========================================================
SECTION 1 — HERO
========================================================= */
.hmg-hero { position:relative; background:#0E1533; overflow:hidden; min-height:660px; padding:0; }
.hmg-hero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; animation:hmgPan 8s ease-in-out infinite alternate; will-change:object-position; }
.hmg-hero__scrim { position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,13,38,.95) 0%,rgba(9,13,38,.9) 26%,rgba(9,13,38,.6) 48%,rgba(9,13,38,.18) 70%,rgba(9,13,38,0) 100%); }
.hmg-hero__inner { position:relative; max-width:1240px; margin:0 auto; padding:0 32px; min-height:660px; display:flex; flex-direction:column; justify-content:center; }
.hmg-hero__content { max-width:660px; animation:hmgUp .6s both; }
.hmg-hero__eyebrow { display:inline-flex; align-items:center; gap:10px; font-family:'Barlow',sans-serif; font-weight:600; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:#F5A24B; margin-bottom:24px; }
.hmg-hero__eyebrow span { width:26px; height:2px; background:#EE7C1B; display:inline-block; }
.hmg-hero__title { font-family:'Hasura Semibold','Barlow',sans-serif; font-weight:normal; font-size:58px; line-height:1.08; color:#fff; margin:0 0 30px; letter-spacing:-.01em; text-transform:none; }
.hmg-hero__lead { font-family:'Hasura Sub','Open Sans',sans-serif; font-size:18px; line-height:1.55; color:#C9CEE4; margin:0 0 38px; max-width:520px; }
.hmg-hero__actions { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
/* buttons */
.hmg-btn { display:inline-flex; align-items:center; gap:11px; font-family:'Barlow',sans-serif; font-weight:700; font-size:15px; letter-spacing:.03em; padding:16px 30px; border-radius:40px; cursor:pointer; border:none; }
.hmg-btn--chat { background:#fff; color:#10163A; box-shadow:0 8px 22px rgba(0,0,0,.18); transition:transform .15s, box-shadow .15s; }
.hmg-btn--chat:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.28); }
/* "Our Machines" secondary button — frosted glass, fills brand-orange on hover.
(padding compensates the 1.5px border so it matches the Chat pill height) */
.hmg-btn--ghost { background:rgba(255,255,255,.14); color:#fff; font-weight:600; gap:10px; padding:14.5px 30px; border:1.5px solid rgba(255,255,255,.5); transition:background .18s, border-color .18s, color .18s; }
.hmg-btn--ghost:hover { background:#EE7C1B; border-color:#EE7C1B; color:#fff; }
.hmg-hero__btn--profile { display:none; } /* mobile-only; shown in the media query */
/* =========================================================
SECTION 2 — WHY CHOOSE / THREE STRENGTHS
========================================================= */
.hmg-strengths { background:#F4F5F8; padding:0; }
.hmg-strengths__band { background:#10163A; padding:64px 32px 118px; text-align:center; }
.hmg-strengths__eyebrow { font-family:'Barlow',sans-serif; font-weight:600; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:#F5A24B; margin-bottom:14px; }
.hmg-strengths__title { font-family:'Hasura Semibold','Barlow',sans-serif; font-weight:normal; font-size:40px; line-height:1.12; color:#fff; margin:0 auto; max-width:760px; letter-spacing:-.01em; text-transform:none; }
.hmg-strengths__inner { max-width:1180px; margin:-72px auto 0; padding:0 32px 48px; }
.hmg-strengths__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.hmg-card { background:#fff; border-radius:12px; padding:40px 34px; box-shadow:0 20px 44px rgba(16,22,51,.10); border:1px solid #ECEEF3; transition:transform .18s, box-shadow .18s; }
.hmg-card:hover { transform:translateY(-6px); box-shadow:0 28px 56px rgba(16,22,51,.16); }
.hmg-card__icon { margin-bottom:22px; line-height:0; }
.hmg-card__title { font-family:'Hasura Semibold','Barlow',sans-serif; font-weight:normal; font-size:22px; color:#10163A; margin:0 0 12px; text-transform:none; }
.hmg-card__body { font-size:15.5px; line-height:1.6; color:#5B6070; margin:0; }
/* partner marquee */
.hmg-marquee-wrap { margin-top:20px; text-align:center; }
.hmg-marquee-label { font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#8A90A6; font-weight:600; margin:0 0 30px; }
.hmg-marquee { position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent); }
.hmg-track { display:flex; align-items:center; gap:72px; width:max-content; animation:hmgMarquee 17s linear infinite; padding:6px 36px; }
.hmg-track img { height:34px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.6; }
.hmg-track img.hmg-track__tall { height:38px; }
/* =========================================================
SECTION 3 — MANUFACTURING FOR CUSTOM PARTS
========================================================= */
.hmg-products { background:#fff; padding:88px 32px 100px; }
.hmg-products__inner { max-width:1180px; margin:0 auto; }
.hmg-products__head { text-align:center; max-width:720px; margin:0 auto 54px; }
.hmg-products__eyebrow { font-family:'Barlow',sans-serif; font-weight:600; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:#EE7C1B; margin-bottom:14px; }
.hmg-products__title { font-family:'Hasura Semibold','Barlow',sans-serif; font-weight:normal; font-size:40px; line-height:1.12; color:#10163A; margin:0 0 18px; letter-spacing:-.01em; text-transform:none; }
.hmg-products__intro { font-family:'Hasura Sub','Open Sans',sans-serif; font-size:17px; line-height:1.6; color:#5B6070; margin:0; }
.hmg-products__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.hmg-prod { position:relative; border-radius:12px; overflow:hidden; display:block; aspect-ratio:3/4; box-shadow:0 14px 32px rgba(16,22,51,.10); transition:transform .2s, box-shadow .2s; }
.hmg-prod:hover { transform:translateY(-6px); box-shadow:0 24px 48px rgba(16,22,51,.18); }
.hmg-prod__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.hmg-prod:hover .hmg-prod__img { transform:scale(1.06); }
.hmg-prod__scrim { position:absolute; inset:0; background:linear-gradient(to top,rgba(10,14,38,.9) 8%,rgba(10,14,38,.25) 50%,rgba(10,14,38,0) 78%); }
.hmg-prod__cap { position:absolute; left:0; right:0; bottom:0; padding:24px 22px; }
.hmg-prod__title { font-family:'Hasura Semibold','Barlow',sans-serif; font-weight:normal; font-size:20px; color:#fff; margin:0; text-transform:none; }
.hmg-prod__link { display:flex; align-items:center; gap:7px; margin-top:8px; color:#F5A24B; font-size:13px; font-weight:600; letter-spacing:.04em; }
/* =========================================================
FOOTER (site-wide)
========================================================= */
.hmg-footer { background:#0B1030; color:#C7CCE0; padding:0; }
.hmg-footer__bar { height:4px; background:linear-gradient(90deg,#EE7C1B 0%,#F5A24B 60%,#17237A 100%); }
.hmg-footer__inner { max-width:1240px; margin:0 auto; padding:64px 32px 40px; display:grid; grid-template-columns:1.5fr 1fr 1.3fr; gap:56px; }
.hmg-footer__logo { display:inline-flex; background:#fff; border-radius:9px; padding:12px 16px; margin-bottom:22px; }
.hmg-footer__logo img { height:30px; width:auto; display:block; }
.hmg-footer__desc { font-size:15px; line-height:1.65; color:#9AA0C4; margin:0 0 24px; max-width:360px; }
.hmg-footer__wa { display:inline-flex; align-items:center; gap:10px; background:#25D366; color:#0B1030; font-family:'Barlow',sans-serif; font-weight:700; font-size:14px; letter-spacing:.04em; padding:12px 22px; border-radius:6px; }
.hmg-footer__heading { font-family:'Barlow',sans-serif; font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#F5A24B; margin:0 0 20px; }
.hmg-footer__links { display:flex; flex-direction:column; gap:10px; }
.hmg-footer__links a { font-size:15px; line-height:1.3; color:#C7CCE0; transition:color .15s; }
.hmg-footer__links a:hover { color:#fff; }
.hmg-footer__contact { font-size:14.5px; line-height:1.65; color:#9AA0C4; margin:0 0 16px; }
.hmg-footer__contact strong { display:block; color:#E4E7F4; font-weight:600; margin-bottom:4px; }
.hmg-footer__phone { font-size:14.5px; line-height:1.7; color:#9AA0C4; margin:0; }
.hmg-footer__bottom { border-top:1px solid rgba(255,255,255,.09); }
.hmg-footer__bottom-inner { max-width:1240px; margin:0 auto; padding:22px 32px; display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between; }
.hmg-footer__copy { font-size:13px; color:#7A80A2; }
/* =========================================================
COMPANY PROFILE band (home-only, above the footer) — cinematic full-bleed
========================================================= */
.hmg-profile { position:relative; overflow:hidden; padding:160px 32px; text-align:center; background:#0E1533; }
.hmg-profile__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hmg-profile__ov { position:absolute; inset:0; background:radial-gradient(120% 140% at 50% 40%,rgba(11,16,48,.72),rgba(11,16,48,.93)); }
.hmg-profile__inner { position:relative; max-width:680px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.hmg-profile__eyebrow { font-family:'Barlow',sans-serif; font-weight:600; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:#F5A24B; margin-bottom:22px; }
.hmg-profile__play { position:relative; width:84px; height:84px; border-radius:50%; background:#EE7C1B; display:flex; align-items:center; justify-content:center; margin-bottom:26px; box-shadow:0 16px 40px rgba(238,124,27,.5); transition:transform .18s, box-shadow .18s; }
.hmg-profile__play::before { content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(245,162,75,.5); animation:hmgPulse 2.2s ease-out infinite; }
.hmg-profile__play:hover { transform:scale(1.06); box-shadow:0 20px 48px rgba(238,124,27,.62); }
.hmg-profile__title { font-family:'Hasura Semibold','Barlow',sans-serif; font-weight:normal; font-size:38px; line-height:1.12; color:#fff; margin:0 0 14px; letter-spacing:-.01em; text-transform:none; }
.hmg-profile__text { font-family:'Hasura Sub','Open Sans',sans-serif; font-size:16px; line-height:1.6; color:#C9CEE4; margin:0; max-width:520px; }
/* =========================================================
SITE CHROME — legacy navbar tweak (global; not .hmg-scoped by design)
========================================================= */
.nav-container .bar.bar--sm { padding-top:22px; padding-bottom:22px; }
/* The legacy Stack theme (theme.css ~L3983) zeroes padding-top on any
that follows another , via an ultra-high-specificity :not() chain we
cannot out-specify. Re-assert the intended top padding on our stacked sections. */
.hmg-products { padding-top:88px !important; }
.hmg-profile { padding-top:160px !important; }
/* =========================================================
TYPOGRAPHIC BRIDGE — brand headings on legacy pages
Gives bare heading tags/classes the new Barlow + bold + navy look sitewide,
while keeping each legacy page's existing SIZES/layout (low reflow risk).
Notes on cascade:
- .hmg-* home headings set their own styles at higher specificity → unaffected.
- Higher-specificity theme rules (e.g. .imagebg headings = white on dark banners)
still win for COLOR, so white-on-dark titles stay white — they just gain Barlow.
========================================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Hasura Semibold', 'Barlow', 'Open Sans', 'Helvetica', sans-serif;
font-weight: normal;
color: #10163A;
letter-spacing: -0.005em;
}
/* =========================================================
MOBILE (<= 860px)
========================================================= */
@media (max-width:860px){
/* ---- hero -> bottom stack ---- */
.hmg-hero { min-height:680px; }
.hmg-hero__bg { object-position:center 42%; animation:none; } /* calm/static on mobile */
.hmg-hero__scrim { background:linear-gradient(180deg,rgba(9,13,38,.55) 0%,rgba(9,13,38,.12) 26%,rgba(9,13,38,.12) 46%,rgba(9,13,38,.72) 74%,rgba(9,13,38,.95) 100%); }
.hmg-hero__inner { position:absolute; left:0; right:0; bottom:0; top:auto; min-height:0; padding:0 22px 34px; display:block; }
.hmg-hero__content { max-width:none; }
.hmg-hero__eyebrow { font-size:11px; letter-spacing:.16em; gap:8px; margin-bottom:14px; }
.hmg-hero__eyebrow span { width:20px; }
.hmg-hero__title { font-size:34px; line-height:1.1; margin:0 0 16px; text-shadow:0 2px 16px rgba(0,0,0,.4); }
.hmg-hero__lead { font-size:15px; line-height:1.5; margin:0 0 24px; max-width:none; text-shadow:0 2px 14px rgba(0,0,0,.4); }
.hmg-hero__actions { display:grid; gap:10px; }
.hmg-btn { justify-content:center; font-size:14px; padding:15px; width:100%; }
.hmg-hero__btn--machines { display:none; }
.hmg-hero__btn--profile { display:flex; background:rgba(255,255,255,.12); color:#fff; font-weight:600; border:1.5px solid rgba(255,255,255,.42); padding:14px; box-shadow:none; }
/* ---- strengths ---- */
.hmg-strengths__band { padding:38px 22px 74px; }
.hmg-strengths__eyebrow { font-size:11px; letter-spacing:.18em; margin-bottom:10px; }
.hmg-strengths__title { font-size:26px; line-height:1.15; }
.hmg-strengths__inner { max-width:none; margin:-52px auto 0; padding:0 22px 40px; }
.hmg-strengths__grid { grid-template-columns:minmax(0,1fr); gap:16px; }
.hmg-card { padding:26px 24px; box-shadow:0 14px 32px rgba(16,22,51,.10); }
.hmg-card:hover { transform:none; box-shadow:0 14px 32px rgba(16,22,51,.10); }
.hmg-card__icon { margin-bottom:16px; }
.hmg-card__title { font-size:19px; margin:0 0 9px; }
.hmg-card__body { font-size:14px; line-height:1.55; }
.hmg-marquee-label { font-size:11px; letter-spacing:.12em; margin:0 0 18px; }
.hmg-marquee { -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent); }
.hmg-track { gap:40px; animation-duration:12s; padding:4px 20px; }
.hmg-track img { height:26px; }
.hmg-track img.hmg-track__tall { height:30px; }
/* ---- products ---- */
.hmg-products { padding:44px 22px 52px; }
.hmg-products { padding-top:44px !important; } /* beat legacy adjacent-section rule + desktop !important */
.hmg-products__head { margin:0 auto 28px; }
.hmg-products__eyebrow { font-size:11px; letter-spacing:.18em; margin-bottom:10px; }
.hmg-products__title { font-size:26px; line-height:1.15; margin:0 0 12px; }
.hmg-products__intro { font-size:14.5px; line-height:1.55; }
.hmg-products__grid { grid-template-columns:1fr 1fr; gap:14px; }
.hmg-prod { border-radius:11px; box-shadow:0 10px 24px rgba(16,22,51,.12); }
.hmg-prod:hover { transform:none; box-shadow:0 10px 24px rgba(16,22,51,.12); }
.hmg-prod:hover .hmg-prod__img { transform:none; }
.hmg-prod__scrim { background:linear-gradient(to top,rgba(10,14,38,.9) 10%,rgba(10,14,38,.15) 60%,rgba(10,14,38,0) 82%); }
.hmg-prod__cap { padding:16px 15px; }
.hmg-prod__title { font-size:16px; }
.hmg-prod__link { gap:5px; margin-top:5px; font-size:11px; letter-spacing:0; }
/* ---- company profile ---- */
.hmg-profile { padding:104px 22px; }
.hmg-profile { padding-top:104px !important; } /* beat legacy adjacent-section rule + desktop !important */
.hmg-profile__eyebrow { font-size:11px; letter-spacing:.18em; margin-bottom:16px; }
.hmg-profile__play { width:64px; height:64px; margin-bottom:20px; }
.hmg-profile__title { font-size:24px; }
.hmg-profile__text { font-size:14.5px; line-height:1.55; }
/* ---- footer -> stacked ---- */
.hmg-footer__bar { height:3px; }
.hmg-footer__inner { display:block; padding:34px 22px 26px; }
.hmg-footer__logo { border-radius:8px; padding:10px 14px; margin-bottom:16px; }
.hmg-footer__logo img { height:24px; }
.hmg-footer__desc { font-size:13.5px; line-height:1.6; margin:0 0 20px; max-width:none; }
.hmg-footer__wa { display:flex; justify-content:center; gap:9px; font-size:13.5px; padding:12px 18px; border-radius:7px; margin-bottom:26px; }
.hmg-footer__col--explore { margin-bottom:26px; }
.hmg-footer__heading { font-size:12px; margin:0 0 14px; }
.hmg-footer__links { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.hmg-footer__links a { font-size:14px; }
.hmg-footer__contact { font-size:13.5px; line-height:1.6; margin:0 0 12px; }
.hmg-footer__phone { font-size:13.5px; }
.hmg-footer__bottom-inner { display:block; padding:16px 22px 22px; }
.hmg-footer__copy { display:block; font-size:12px; }
}
/* =========================================================
Respect users who prefer reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce){
.hmg-hero__bg { animation:none; }
.hmg-track { animation:none; }
.hmg-profile__play::before { animation:none; }
}