/* Start custom CSS for html, class: .elementor-element-818d050 *//* =========================================================================
HUTT INDOOR SPORTS PARTY PAGE - VARIABLE-FREE, BULLETPROOF VERSION
Paste into: Appearance > Customise > Additional CSS
No CSS variables. No image URLs in CSS. A single broken URL in the
HTML can no longer collapse the whole design.
========================================================================= */
#his-party-page{
max-width:1180px;
margin:0 auto;
padding:16px 18px 30px;
font-family:'Poppins','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
color:#2a0d47;
line-height:1.5;
-webkit-font-smoothing:antialiased;
}
#his-party-page *,
#his-party-page *::before,
#his-party-page *::after{box-sizing:border-box;}
/* ---------- BUTTONS ---------- */
#his-party-page .his-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
border:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:1.02rem;
color:#fff;background:#ec0e8a;padding:15px 30px;border-radius:999px;
box-shadow:0 12px 26px rgba(236,14,138,.42);
transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
text-decoration:none;letter-spacing:.2px;
}
#his-party-page .his-btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 16px 32px rgba(236,14,138,.5);}
#his-party-page .his-btn--ghost{background:#7cb342;box-shadow:0 12px 26px rgba(124,179,66,.4);}
#his-party-page .his-btn--ghost:hover{box-shadow:0 16px 32px rgba(124,179,66,.5);}
#his-party-page .his-btn__arrow::after{content:"\2192";font-weight:900;}
/* ---------- HERO ---------- */
#his-party-page .his-hero{
display:grid;grid-template-columns:1.05fr .95fr;gap:22px;
background:
radial-gradient(120% 130% at 0% 0%,rgba(124,179,66,.35),transparent 60%),
linear-gradient(135deg,#3d1466 0%,#5b2a86 55%,#2a0d47 100%);
border-radius:26px;padding:30px;box-shadow:0 18px 46px rgba(42,13,71,.28);
overflow:hidden;align-items:stretch;
}
/* logo sits in its own portrait column so the tall HIS logo has room */
#his-party-page .his-hero__text{
display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;
color:#fff;padding:4px 2px;
}
#his-party-page .his-hero__copy{display:flex;flex-direction:column;justify-content:center;}
#his-party-page .his-logo-tile{
width:170px;aspect-ratio:3/4;align-self:center;
background-color:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.2);border-radius:22px;
background-repeat:no-repeat;background-position:center;background-size:contain;
padding:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 12px 30px rgba(20,6,36,.32);
}
#his-party-page .his-eyebrow{
display:inline-block;width:max-content;font-weight:800;letter-spacing:1.4px;
text-transform:uppercase;font-size:.72rem;color:#fff;background:rgba(148,85,209,.9);
padding:6px 14px;border-radius:999px;margin-bottom:12px;
}
#his-party-page .his-hero h1{font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.08;margin:0 0 10px;font-weight:800;color:#fff;}
#his-party-page .his-hero h1 span{color:#8dd13a;}
#his-party-page .his-hero p.lead{font-size:1.02rem;color:rgba(255,255,255,.9);margin:0 0 16px;max-width:46ch;}
#his-party-page .his-pill{
display:inline-flex;flex-direction:column;gap:2px;
background:rgba(91,42,134,.42);border:1px solid rgba(255,255,255,.28);
padding:12px 20px;border-radius:18px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px rgba(20,6,36,.35);
margin-bottom:18px;color:#fff;width:max-content;max-width:100%;
}
#his-party-page .his-pill b{font-size:1.28rem;color:#8dd13a;letter-spacing:.3px;}
#his-party-page .his-pill small{font-size:.82rem;color:rgba(255,255,255,.85);}
#his-party-page .his-hero__cta{display:flex;gap:10px;flex-wrap:wrap;}
#his-party-page .his-hero__media{
position:relative;border-radius:18px;overflow:hidden;min-height:390px;
background-size:cover;background-position:center;
border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
#his-party-page .his-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(42,13,71,.35));}
/* ---------- SECTION TEXT ---------- */
#his-party-page .his-band,
#his-party-page .his-food,
#his-party-page .his-addons,
#his-party-page .his-info,
#his-party-page .his-cta{margin-top:24px;}
#his-party-page .his-h2{font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:800;margin:0 0 4px;color:#3d1466;}
#his-party-page .his-sub{color:#6a5a80;margin:0 0 14px;font-size:.98rem;}
/* ---------- INCLUDED ---------- */
#his-party-page .his-included__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:stretch;}
#his-party-page .his-card{background:#fff;border-radius:26px;border:1px solid #efe7f7;box-shadow:0 18px 46px rgba(42,13,71,.28);padding:24px 26px;}
#his-party-page .his-plan{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
#his-party-page .his-plan li{position:relative;list-style:none;padding-left:34px;font-size:1rem;color:#4a3b5e;}
#his-party-page .his-plan li::before{
content:"\2713";position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:50%;
background:linear-gradient(135deg,#7cb342,#8dd13a);color:#fff;font-weight:900;font-size:.82rem;
display:flex;align-items:center;justify-content:center;
}
#his-party-page .his-plan li b{color:#5b2a86;}
#his-party-page .his-highlight-tile{
background:linear-gradient(150deg,#5b2a86,#2a0d47);color:#fff;border-radius:26px;padding:26px;
display:flex;flex-direction:column;justify-content:center;gap:14px;box-shadow:0 18px 46px rgba(42,13,71,.28);
}
#his-party-page .his-stat{display:flex;align-items:center;gap:12px;}
#his-party-page .his-stat b{font-size:1.9rem;color:#8dd13a;line-height:1;min-width:78px;}
#his-party-page .his-stat span{font-size:.95rem;color:rgba(255,255,255,.9);}
#his-party-page .his-hr{height:1px;background:rgba(255,255,255,.16);border:none;margin:2px 0;}
/* ---------- GALLERY ---------- */
#his-party-page .his-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:24px;}
#his-party-page .his-shot{
position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;
background-size:cover;background-position:center;border:3px solid #fff;box-shadow:0 18px 46px rgba(42,13,71,.28);
}
#his-party-page .his-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(61,20,102,.4));}
/* ---------- FOOD ---------- */
#his-party-page .his-food{
position:relative;
background:radial-gradient(120% 120% at 100% 0%,rgba(124,179,66,.16),transparent 55%),#fff;
border:1px solid #efe7f7;border-radius:26px;box-shadow:0 18px 46px rgba(42,13,71,.28);padding:26px;
}
#his-party-page .his-badge--cta{position:absolute;top:20px;right:22px;background:none;border:none;box-shadow:none;padding:0;max-width:none;}
#his-party-page .his-food__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;}
#his-party-page .his-menu{background:#faf7fe;border:1px solid #efe7f7;border-radius:18px;padding:16px 18px;}
#his-party-page .his-menu h3{margin:0 0 8px;color:#5b2a86;font-size:1.05rem;}
#his-party-page .his-menu ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;}
#his-party-page .his-menu li{position:relative;padding-left:22px;font-size:.94rem;color:#4a3b5e;list-style:none;}
#his-party-page .his-menu li::before{content:"\2022";position:absolute;left:6px;top:-2px;color:#7cb342;font-size:1.2rem;}
#his-party-page .his-menu li b{color:#3d1466;}
/* ---------- ADD-ONS ---------- */
#his-party-page .his-arcade{
position:relative;overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center;
background:linear-gradient(120deg,#3d1466 0%,#5b2a86 48%,#7cb342 118%);
border-radius:26px;padding:28px 30px;color:#fff;box-shadow:0 18px 46px rgba(42,13,71,.28);
}
#his-party-page .his-arcade__info{padding-top:34px;}
#his-party-page .his-ribbon{
position:absolute;top:0;left:0;z-index:2;background:#ec0e8a;color:#fff;font-weight:800;font-size:.74rem;
letter-spacing:.6px;padding:8px 20px;border-radius:0 0 16px 0;box-shadow:0 6px 14px rgba(0,0,0,.28);
text-transform:uppercase;white-space:nowrap;
}
#his-party-page .his-arcade__badge{
display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:7px 16px;font-weight:800;margin-bottom:10px;
}
#his-party-page .his-arcade__badge b{color:#8dd13a;font-size:1.05rem;}
#his-party-page .his-arcade h3{margin:0 0 6px;font-size:clamp(1.3rem,2.4vw,1.8rem);color:#fff;}
#his-party-page .his-arcade p{margin:0 0 12px;color:rgba(255,255,255,.9);max-width:48ch;}
#his-party-page .his-ticks{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;}
#his-party-page .his-ticks li{position:relative;padding-left:24px;font-size:.92rem;list-style:none;}
#his-party-page .his-ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:#8dd13a;font-weight:900;}
#his-party-page .his-arcade__buy{text-align:center;}
#his-party-page .his-arcade__price{background:rgba(20,6,36,.28);border:1px solid rgba(255,255,255,.28);border-radius:18px;padding:16px;margin-bottom:12px;}
#his-party-page .his-arcade__price .num{font-size:1.9rem;font-weight:800;color:#8dd13a;line-height:1;}
#his-party-page .his-arcade__price small{display:block;font-size:.8rem;color:rgba(255,255,255,.8);margin-top:4px;}
#his-party-page .his-addon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
#his-party-page .his-addon{background:#fff;border:1px solid #efe7f7;border-radius:26px;overflow:hidden;box-shadow:0 18px 46px rgba(42,13,71,.28);display:flex;flex-direction:column;}
#his-party-page .his-addon__logo{
height:104px;background-color:#3d1466;background-repeat:no-repeat,no-repeat;
background-position:center,center;background-size:64%,cover;
}
/* smaller Clip 'n Climb logo only */
#his-party-page .his-addon__logo--cnc{background-size:36% auto,cover;}
#his-party-page .his-addon__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1;}
#his-party-page .his-addon__pill{
align-self:flex-start;background:rgba(124,179,66,.14);color:#5b2a86;border:1px solid rgba(124,179,66,.4);
border-radius:999px;padding:4px 12px;font-weight:800;font-size:.74rem;letter-spacing:.4px;text-transform:uppercase;
}
#his-party-page .his-addon__body p{margin:0;font-size:.93rem;color:#4a3b5e;}
#his-party-page .his-tags{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0;}
#his-party-page .his-tags span{background:#f3edfb;color:#5b2a86;border-radius:8px;padding:3px 9px;font-size:.74rem;font-weight:700;}
#his-party-page .his-addon__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:6px;}
#his-party-page .his-addon__price{font-weight:800;color:#3d1466;font-size:1.02rem;}
#his-party-page .his-addon__price small{display:block;font-weight:600;color:#8a7aa0;font-size:.72rem;}
#his-party-page .his-addon .his-btn{padding:11px 18px;font-size:.9rem;}
/* ---------- GOOD TO KNOW ---------- */
#his-party-page .his-info{background:linear-gradient(150deg,#faf7fe,#fff);border:1px solid #efe7f7;border-radius:26px;box-shadow:0 18px 46px rgba(42,13,71,.28);padding:26px;}
#his-party-page .his-info__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px 26px;margin:8px 0 0;padding:0;}
#his-party-page .his-info__grid li{position:relative;list-style:none;padding-left:26px;font-size:.94rem;color:#4a3b5e;}
#his-party-page .his-info__grid li::before{content:"\2713";position:absolute;left:0;top:0;color:#7cb342;font-weight:900;}
/* ---------- BOTTOM CTA ---------- */
#his-party-page .his-cta{
text-align:center;color:#fff;border-radius:26px;padding:36px 26px;box-shadow:0 18px 46px rgba(42,13,71,.28);
background:radial-gradient(120% 140% at 100% 0%,rgba(124,179,66,.4),transparent 55%),linear-gradient(130deg,#3d1466,#2a0d47);
}
#his-party-page .his-cta h2{font-size:clamp(1.4rem,2.6vw,2rem);margin:0 0 8px;color:#fff;}
#his-party-page .his-cta p{margin:0 0 16px;color:rgba(255,255,255,.9);}
#his-party-page .his-cta a.his-link{color:#8dd13a;font-weight:700;text-decoration:underline;}
#his-party-page .his-fineprint{margin-top:12px;font-size:.82rem;color:rgba(255,255,255,.72);}
/* =========================================================================
RESPONSIVE
========================================================================= */
@media(max-width:860px){
#his-party-page{padding:14px;}
#his-party-page .his-hero{grid-template-columns:1fr;padding:18px;}
#his-party-page .his-hero__media{min-height:300px;order:-1;}
#his-party-page .his-logo-tile{width:180px;max-width:100%;}
#his-party-page .his-included__grid,
#his-party-page .his-food__grid,
#his-party-page .his-arcade,
#his-party-page .his-addon-grid,
#his-party-page .his-info__grid{grid-template-columns:1fr;}
#his-party-page .his-badge--cta{position:static;max-width:none;margin-bottom:16px;text-align:left;}
}
@media(max-width:600px){
#his-party-page{padding:10px;}
#his-party-page .his-hero{padding:14px;gap:14px;border-radius:18px;}
#his-party-page .his-hero__text{grid-template-columns:1fr;gap:14px;justify-items:center;text-align:center;}
#his-party-page .his-hero__copy{align-items:center;}
#his-party-page .his-hero h1{font-size:1.9rem;line-height:1.1;}
#his-party-page .his-eyebrow{margin-inline:auto;}
#his-party-page .his-pill{margin-inline:auto;}
#his-party-page .his-hero__cta{justify-content:center;width:100%;}
#his-party-page .his-logo-tile{width:150px;margin-bottom:2px;}
#his-party-page .his-pill,
#his-party-page .his-btn{width:100%;text-align:center;}
#his-party-page .his-gallery{grid-template-columns:1fr;gap:12px;}
#his-party-page .his-shot{aspect-ratio:4/3;}
#his-party-page .his-card,
#his-party-page .his-food,
#his-party-page .his-info,
#his-party-page .his-highlight-tile{padding:18px;}
#his-party-page .his-stat{flex-direction:column;align-items:flex-start;gap:6px;}
#his-party-page .his-stat b{min-width:auto;}
#his-party-page .his-addon__foot{flex-direction:column;align-items:flex-start;}
#his-party-page .his-addon__foot .his-btn{width:100%;}
#his-party-page .his-arcade{padding:20px;}
#his-party-page .his-arcade__info{padding-top:30px;}
#his-party-page .his-arcade__buy{text-align:left;}
#his-party-page .his-cta{padding:26px 18px;}
}
@media(max-width:400px){
#his-party-page .his-hero h1{font-size:1.65rem;}
#his-party-page .his-h2{font-size:1.45rem;}
#his-party-page .his-logo-tile{width:130px;}
#his-party-page .his-ribbon{font-size:.68rem;padding:7px 14px;}
}/* End custom CSS */