@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');
/* ===== Gala Graphics home embed (scoped to .ggx) ===== */
.ggx{
--navy:#1A1A1A;
--ink:#1A1A1A;
--pink:#E10198;
--pink-2:#c4007f;
--grey:#55575B;
--lgrey:#A7A9A9;
--paper:#FAF9F6;
--muted:#55575B;
--ease:cubic-bezier(.2,.9,.2,1);
font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
color:var(--ink);
background:var(--paper);
overflow:hidden;
line-height:1.6;
}
.ggx *,.ggx *::before,.ggx *::after{box-sizing:border-box}
.ggx img{max-width:100%;display:block}
.ggx a{color:inherit}
.ggx .wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.ggx .display{font-family:"Poppins","Open Sans",sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.08}
/* ---------- HERO ---------- */
.ggx .hero{background:#fff;color:var(--navy);padding:72px 0 88px;position:relative;overflow:hidden}
.ggx .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--pink)}
.ggx .hero::before{
content:"";position:absolute;right:-12%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(closest-side,rgba(225,1,152,.12),transparent 70%);pointer-events:none;
}
.ggx .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative}
.ggx .hero h1{font-size:clamp(36px,4.6vw,60px);margin:0 0 20px}
.ggx .hero h1 .hl{color:var(--pink)}
.ggx .hero-lead{font-size:18px;color:var(--muted);max-width:46ch;margin:0 0 30px}
.ggx .hero-ctas{display:flex;flex-wrap:wrap;gap:14px}
.ggx .btn{
display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;font-size:17px;
padding:14px 24px;border-radius:999px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s;
}
.ggx .btn svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.ggx .btn-pink{background:var(--pink);color:#fff}
.ggx .btn-pink:hover{transform:translateY(-3px);background:var(--pink-2);box-shadow:0 14px 30px rgba(225,1,152,.4)}
.ggx .btn-ghost{border:2px solid var(--navy);color:var(--navy)}
.ggx .btn-ghost:hover{background:var(--navy);color:#fff;transform:translateY(-3px)}
.ggx .btn-ghost:hover svg{transform:translateX(4px)}
/* image fan */
.ggx .fan{position:relative;height:440px}
.ggx .fan-card{
position:absolute;border-radius:20px;overflow:hidden;background:#fff;
box-shadow:0 20px 44px rgba(26,26,26,.22);border:6px solid #fff;
transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.ggx .fan-card img{width:100%;height:100%;object-fit:cover}
.ggx .fan-card.c1{width:62%;height:78%;left:4%;top:10%;transform:rotate(-6deg);z-index:1}
.ggx .fan-card.c2{width:54%;height:62%;right:0;top:0;transform:rotate(5deg);z-index:2}
.ggx .fan-card.c3{width:46%;height:46%;right:10%;bottom:0;transform:rotate(-2deg);z-index:3}
.ggx .fan-card.c3 img{object-fit:contain;padding:10px}
.ggx .fan:hover .fan-card.c1{transform:rotate(-9deg) translate(-18px,6px)}
.ggx .fan:hover .fan-card.c2{transform:rotate(8deg) translate(16px,-10px)}
.ggx .fan:hover .fan-card.c3{transform:rotate(0deg) translateY(10px)}
.ggx .fan-card:hover{z-index:4;box-shadow:0 30px 60px rgba(225,1,152,.35)}
.ggx .fan-tag{
position:absolute;left:0;bottom:28px;z-index:5;background:var(--pink);color:#fff;
font-weight:800;font-size:14px;padding:10px 16px;border-radius:12px;box-shadow:0 10px 20px rgba(26,26,26,.18);
transform:rotate(-3deg);
}
@keyframes ggx-marquee{to{transform:translateX(-50%)}}
/* ---------- LOGO STRIP ---------- */
.ggx .logos{background:#fff;padding:34px 0;position:relative}
.ggx .logos::before,.ggx .logos::after{
content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.ggx .logos::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
.ggx .logos::after{right:0;background:linear-gradient(-90deg,#fff,transparent)}
.ggx .logo-track{display:flex;width:max-content;align-items:center;gap:64px;animation:ggx-marquee 36s linear infinite;padding-left:64px}
.ggx .logos:hover .logo-track{animation-play-state:paused}
.ggx .logo-track img{
width:84px;height:84px;object-fit:contain;filter:grayscale(1) contrast(.9);opacity:.6;
transition:filter .4s,opacity .4s,transform .4s var(--ease);
}
.ggx .logo-track img:hover{filter:none;opacity:1;transform:scale(1.15) rotate(-3deg)}
/* ---------- SHELTER TILES ---------- */
.ggx .shelters{padding:72px 0 24px}
.ggx .tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ggx .tile{
position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/11;background:var(--navy);
display:block;text-decoration:none;color:#fff;isolation:isolate;
box-shadow:0 18px 40px rgba(26,26,26,.18);
transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.ggx .tile:nth-child(odd){transform:translateY(0)}
.ggx .tile:nth-child(2),.ggx .tile:nth-child(4){margin-top:48px;margin-bottom:-48px}
.ggx .tile img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
transition:transform .9s var(--ease),filter .6s;
}
.ggx .tile::before{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,transparent 35%,rgba(85,87,91,.92) 100%);
transition:opacity .5s;
}
.ggx .tile::after{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(135deg,rgba(225,1,152,.9),rgba(85,87,91,.9));
clip-path:circle(0% at 100% 100%);
transition:clip-path .7s var(--ease);
}
.ggx .tile:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:0 30px 60px rgba(225,1,152,.28)}
.ggx .tile:hover img{transform:scale(1.08);filter:saturate(1.2)}
.ggx .tile:hover::after{clip-path:circle(150% at 100% 100%)}
.ggx .tile-label{
position:absolute;left:22px;right:22px;bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;
font-family:"Poppins",sans-serif;font-weight:600;font-size:clamp(20px,2.4vw,28px);line-height:1.15;
}
.ggx .arrow{
flex:none;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--pink);
display:grid;place-items:center;transition:transform .5s var(--ease),background .3s,color .3s;
}
.ggx .arrow svg{width:22px;height:22px}
.ggx .tile:hover .arrow{transform:rotate(-45deg) scale(1.08);background:var(--pink);color:#fff}
/* ---------- INTRO HEADINGS ---------- */
.ggx .intro{padding:120px 0 40px;text-align:center}
.ggx .intro h2{font-size:clamp(32px,4.6vw,60px);margin:0;color:var(--navy)}
.ggx .intro h2 span{
background:linear-gradient(90deg,var(--pink),var(--grey),var(--pink));background-size:200% 100%;
-webkit-background-clip:text;background-clip:text;color:transparent;animation:ggx-sheen 6s linear infinite;
}
@keyframes ggx-sheen{to{background-position:200% 0}}
.ggx .rule{display:flex;justify-content:center;gap:6px;margin-top:22px}
.ggx .rule i{height:6px;width:46px;border-radius:6px;display:block}
.ggx .rule i:nth-child(1){background:var(--grey)}
.ggx .rule i:nth-child(2){background:var(--pink)}
.ggx .rule i:nth-child(3){background:var(--lgrey)}
.ggx .rule i:nth-child(4){background:var(--navy)}
/* ---------- PRODUCT CARDS ---------- */
.ggx .products{padding:0 0 96px}
.ggx .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ggx .card{
--c:var(--pink);
position:relative;background:#fff;border-radius:22px;padding:14px 14px 22px;display:flex;flex-direction:column;
box-shadow:0 10px 30px rgba(26,26,26,.08);
transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.ggx .card:nth-child(3n+2){--c:var(--grey)}
.ggx .card:nth-child(3n+3){--c:var(--lgrey)}
/* animated gradient border */
.ggx .card::before{
content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;
background:conic-gradient(from var(--ang,0deg),var(--pink),#FF5000,#9BE000,#9400E0,var(--pink));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
opacity:0;transition:opacity .4s;
}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.ggx .card:hover::before{opacity:1;animation:ggx-spin 3s linear infinite}
@keyframes ggx-spin{to{--ang:360deg}}
.ggx .card:hover{transform:translateY(-10px);box-shadow:0 26px 50px rgba(26,26,26,.16)}
.ggx .card-media{
display:block;border-radius:14px;overflow:hidden;position:relative;aspect-ratio:334/205;background:var(--paper);
}
.ggx .card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ggx .card-media::after{
content:"";position:absolute;inset:0;mix-blend-mode:multiply;background:var(--c);opacity:0;transition:opacity .4s;
}
.ggx .card:hover .card-media img{transform:scale(1.08)}
.ggx .card:hover .card-media::after{opacity:.18}
.ggx .card h3{font-family:"Poppins",sans-serif;font-weight:600;font-size:22px;line-height:1.2;margin:18px 8px 8px;color:var(--navy)}
.ggx .card p{margin:0 8px 18px;color:var(--muted);font-size:15px;flex:1}
.ggx .shop{
margin:0 8px;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;text-decoration:none;
font-weight:800;font-size:15px;color:var(--pink);padding:12px 20px;border-radius:999px;
border:2px solid var(--pink);position:relative;overflow:hidden;isolation:isolate;
transition:color .35s,border-color .35s;
}
.ggx .shop::before{
content:"";position:absolute;inset:0;background:var(--pink);z-index:-1;transform:translateX(-101%);
transition:transform .45s var(--ease);
}
.ggx .shop svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.ggx .shop:hover,.ggx .card:hover .shop{color:#fff}
.ggx .shop:hover::before,.ggx .card:hover .shop::before{transform:translateX(0)}
.ggx .card:hover .shop svg{transform:translateX(4px)}
/* ---------- responsive ---------- */
@media (max-width:960px){
.ggx .hero-grid{grid-template-columns:1fr;gap:40px}
.ggx .fan{height:360px;max-width:520px}
.ggx .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
.ggx .hero{padding-top:56px}
.ggx .fan{height:280px}
.ggx .tiles{grid-template-columns:1fr}
.ggx .tile:nth-child(2),.ggx .tile:nth-child(4){margin:0}
.ggx .intro{padding-top:64px}
.ggx .cards{grid-template-columns:1fr}
.ggx .logos::before,.ggx .logos::after{width:48px}
}
@media (prefers-reduced-motion:reduce){
.ggx *,.ggx *::before,.ggx *::after{animation:none!important;transition:none!important}
}