/* Pixel-faithful rebuild of the Playtoons concept PDF. Each .sec is a full-bleed artwork plate (text erased) with HTML text overlaid at the PDF's exact coordinates. Fonts: Baloo 2 + Patrick Hand. */ *{box-sizing:border-box} body{margin:0;background:#fff;font-family:"Baloo 2",system-ui,sans-serif;color:#33274a; -webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{text-decoration:none;color:inherit} /* Header — existing website menu, white background. Tall at the top of the page; once the user scrolls it compacts to the original slim bar (.site-header.scrolled, toggled by JS). */ .site-header{position:sticky;top:0;z-index:60;background:#fff;box-shadow:0 2px 14px rgba(85,60,120,.08); transition:box-shadow .25s ease} .site-header.scrolled{box-shadow:0 4px 18px rgba(85,60,120,.14)} .nav{width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between; gap:1rem;padding:.9rem clamp(1rem,3vw,2.5rem);transition:padding .3s cubic-bezier(.4,0,.2,1)} .brand-logo{height:104px;width:auto;transition:height .3s cubic-bezier(.4,0,.2,1)} .nav-links{display:flex;align-items:center;gap:clamp(1.2rem,2.8vw,3rem);list-style:none;margin:0;padding:0} .nav-links a{font-weight:600;font-size:1.35rem;color:#33274a;transition:font-size .3s cubic-bezier(.4,0,.2,1)} .nav-links a.active{color:#07914a;border-bottom:3px solid #07914a;padding-bottom:3px} .nav-links .pbtn--pinknav{padding:.8rem 1.7rem;font-size:1.2rem;transition:font-size .25s ease,padding .25s ease} .nav-toggle{display:none;background:none;border:none;font-size:1.9rem;cursor:pointer;color:#33274a} /* compact (scrolled) state = the previous header size */ .site-header.scrolled .nav{padding:.45rem clamp(1rem,3vw,2.5rem)} .site-header.scrolled .brand-logo{height:64px} .site-header.scrolled .nav-links a{font-size:1.05rem} .site-header.scrolled .nav-links .pbtn--pinknav{padding:.65rem 1.35rem;font-size:1rem} .site-header.scrolled .nav-links{gap:clamp(1rem,2.4vw,2.2rem)} @media(max-width:860px){ .brand-logo,.site-header.scrolled .brand-logo{height:60px} .nav,.site-header.scrolled .nav{padding:.5rem 1rem} .nav-toggle{display:block} .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff; flex-direction:column;padding:1rem;box-shadow:0 12px 24px rgba(85,60,120,.12)} .nav-links a,.site-header.scrolled .nav-links a{font-size:1.1rem} .nav-links.open{display:flex} } /* Plate sections */ main{width:100%;margin:0} /* breathing room so the footer wave rises into plain page background, not the last plate's content */ main::after{content:"";display:block;height:clamp(80px,9vw,150px);background:#fff} .sec{position:relative;width:100%;container-type:inline-size; background-size:100% 100%;background-repeat:no-repeat} .el{position:absolute;font-family:"Baloo 2",sans-serif} /* Buttons */ .pbtn{display:inline-flex;align-items:center;justify-content:center;gap:.3em; font-family:"Baloo 2",sans-serif;font-weight:700;border-radius:999px;cursor:pointer;white-space:nowrap; box-shadow:0 .4em 1em rgba(51,39,74,.22);transition:transform .15s,filter .15s} .pbtn:hover{transform:translateY(-2px);filter:brightness(1.07)} .pbtn img{height:68%;width:auto;border-radius:50%;margin-right:.15em} .pbtn--yellow{background:linear-gradient(180deg,#ffca4d,#f9a109);color:#4a3305} .pbtn--white{background:#fff;color:#33274a;box-shadow:0 .35em .9em rgba(85,60,120,.18)} .pbtn--pink{background:#ef2d78;color:#fff} .pbtn--blue{background:#2f9be3;color:#fff} .pbtn--pinknav{background:#ff2f7e;color:#fff !important;padding:.65rem 1.35rem;font-size:1rem} /* Tag pills */ .ptag{display:inline-flex;align-items:center;justify-content:center;gap:.4em;border-radius:999px; background:#fbdce9;color:#d6246b;font-weight:700} .ptag img{height:72%;width:auto;border-radius:50%} .ptag.lav{background:#efe7fb;color:#7f1cdf} .ptag.orange{background:#f5851f;color:#fff} .ptag.greenp{background:#57a546;color:#fff} .ybar{display:flex;align-items:center;justify-content:center;background:#fdedb5;color:#33274a; font-weight:700;border-radius:.5em} .mint{display:flex;align-items:center;justify-content:center;gap:.5em;background:#e3f6e6; border-radius:999px;font-weight:700} .mint img{height:55%;width:auto} /* Worlds mini chips */ .chipp{display:flex;align-items:center;gap:.55em;border-radius:1em;padding:0 .8em} .chipp img{height:62%;width:auto;border-radius:50%} .chipp b{display:block;font-size:1em;line-height:1.15} .chipp small{display:block;color:#4b4159;font-weight:500;font-size:.72em;line-height:1.15} /* Birthday white chips */ .wchip{display:flex;align-items:center;gap:.5em;background:#fff;border-radius:999px; box-shadow:0 .3em .8em rgba(85,60,120,.14);padding:0 .7em;font-weight:700;color:#33274a;line-height:1.05} .wchip img{height:60%;width:auto;border-radius:50%} /* Party enquiry form */ .pform{background:#fff;border-radius:1.6em;box-shadow:0 1em 2.4em rgba(85,60,120,.18); padding:1.1em 1.2em;display:flex;flex-direction:column} .pform h3{margin:.1em 0 .2em;text-align:center;color:#33274a;font-size:1.55em;font-weight:800} .pform p{margin:0 0 .8em;text-align:center;color:#7a7291;font-size:.82em;line-height:1.3;font-weight:500} .pfield{display:flex;align-items:center;gap:.5em;background:#f7f4fb;border:1px solid #eee3f2; border-radius:.7em;padding:.55em .7em;margin-bottom:.55em} .pfield input,.pfield select{border:none;background:none;outline:none;width:100%; font-family:"Baloo 2",sans-serif;font-size:.95em;color:#33274a} .pfbtn{margin-top:.3em;padding:.6em 0;font-size:1.05em} .pform .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:.2em .6em} .pform .fgrid.three{grid-template-columns:1fr 1fr 1fr} .pform .fgrid label{font-size:.82em;font-weight:600;color:#33274a;display:block} .pform .fgrid label em{color:#ef2d78;font-style:normal} .pform .fgrid .full{grid-column:1/-1} .pform .fgrid .pfield{margin:.2em 0 .45em} .pfield textarea{border:none;background:none;outline:none;width:100%;font-family:"Baloo 2",sans-serif;font-size:.95em;color:#33274a;resize:vertical} .pform .note{margin:.5em 0 0;font-size:.78em;color:#7a7291} .pform.left h3{font-size:1.5em} .faqrow{background:#fff;border:1px solid #efe6f3;border-radius:.6em;padding:.35em .8em;font-weight:600;color:#33274a;z-index:5} .faqrow summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center} .faqrow summary::after{content:"⌄";color:#7f1cdf;font-size:1.1em} .faqrow[open]{box-shadow:0 .6em 1.4em rgba(85,60,120,.18)} .faqrow p{margin:.4em 0 0;font-weight:400;color:#4b4159;font-size:.9em;line-height:1.3} .sqq{display:inline-block;width:.6em;height:.22em;border-radius:1em;transform:rotate(-20deg);vertical-align:middle} .sqq.y{background:#fca909}.sqq.p{background:#ef2d78} /* Food category pills */ .fpills{display:flex;gap:.45em} .fpill{flex:1;display:flex;align-items:center;gap:.4em;border-radius:999px;color:#fff; padding:.35em .5em;font-weight:700;line-height:1.05} .fpill img{height:2.4em;width:2.4em;border-radius:50%;flex:none} .fpill b{font-size:1em} /* Footer — dark navy, four-column (the earlier dark-mode footer) */ footer.site{background:#16205a;color:#c7cbe6;padding:3.4rem 0 1.6rem;margin-top:0;position:relative} /* curvy divider: the footer's navy rises into the section above as a wave (as in the earlier version) */ footer.site::before{content:"";position:absolute;left:0;right:0;top:1px;height:clamp(46px,6.5vw,118px); transform:translateY(-100%);background:#16205a;pointer-events:none;z-index:1; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,44 C110,-10 236,-6 356,34 C476,74 552,114 676,108 C800,102 876,24 1000,10 C1124,-4 1244,44 1344,72 C1392,85 1420,89 1440,84 L1440,120 Z' fill='%23000'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,44 C110,-10 236,-6 356,34 C476,74 552,114 676,108 C800,102 876,24 1000,10 C1124,-4 1244,44 1344,72 C1392,85 1420,89 1440,84 L1440,120 Z' fill='%23000'/%3E%3C/svg%3E"); -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:bottom center;mask-position:bottom center} footer.site>.fwrap{position:relative;z-index:2} .fwrap{width:100%;margin:0 auto;padding:0 clamp(1rem,3vw,2.5rem)} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:2.4rem} .foot-logo{height:120px;width:auto;background:#fff;border-radius:20px;padding:.6rem .9rem;margin-bottom:1rem} footer.site h4{color:#fff;margin:0 0 .9rem;font-size:1.15rem;font-weight:800} footer.site p{margin:0 0 1rem;color:#b9bee0;font-weight:500;font-size:1rem;line-height:1.6;max-width:34ch} footer.site a{color:#ffd36b;transition:color .18s} footer.site a:hover{color:#fff} .foot-links{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;font-weight:600} .foot-links li,.foot-links a{color:#c7cbe6} .foot-links a:hover{color:#fff} .foot-links .pbtn{margin-top:.5rem;padding:.6rem 1.3rem;font-size:1rem;background:linear-gradient(180deg,#ffca4d,#f9a109);color:#4a3305 !important} .social{display:flex;gap:.6rem;margin-top:1rem} .social a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.10);display:grid;place-items:center; transition:background .2s,transform .2s} .social a:hover{transform:translateY(-3px)} .social a svg{width:20px;height:20px;fill:#fff} .social a.wa:hover{background:#25d366}.social a.fb:hover{background:#1877f2} .social a.ig:hover{background:#e1306c}.social a.yt:hover{background:#ff0000} .foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:2.4rem;padding-top:1.2rem; display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.9rem;color:#9aa0c8} .foot-bottom .tag{font-family:"Patrick Hand",cursive;font-size:1.15rem;color:#c7cbe6} @media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.footer-grid{grid-template-columns:1fr}} /* ============================================================ MOBILE & TABLET (≤ 1024px): the pixel-placed plate overlays can't shrink to a phone, so every section swaps to a flowing layout (.m) built from real HTML text plus crops of the same artwork (assets/mobile/). Desktop/laptop keep the full-width plate layout above. ============================================================ */ .m{display:none} @media (max-width:1024px){ .sec{aspect-ratio:auto !important;background-image:none !important;container-type:normal;padding:2.2rem 1.1rem} .sec>.el{display:none !important} .sec>.m{display:block;max-width:680px;margin:0 auto} .sec.m-tint{background:#fff8fb} .sec.m-tint2{background:#f4fbf5} .sec.m-tint3{background:#fff9ec} .m-eyebrow{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:.9rem;color:#c2185b;background:#fbdce9; border-radius:999px;padding:.35em .9em;margin:0 0 .8rem} .m-eyebrow.lav{background:#efe7fb;color:#7f1cdf} .m-eyebrow.mint{background:#e3f6e6;color:#07914a} .m-h1{font-size:clamp(2.3rem,11vw,3.2rem);font-weight:800;line-height:1;margin:0 0 .6rem;letter-spacing:-.01em} .m-h2{font-size:clamp(1.8rem,8vw,2.4rem);font-weight:800;line-height:1.05;margin:0 0 .6rem} .m-h3{font-size:1.15rem;font-weight:800;margin:0 0 .25rem;color:#33274a} .g{color:#07914a}.y{color:#fca909}.p{color:#ef2d78}.b{color:#047ec9}.v{color:#7f1cdf}.o{color:#f08c1a} .m-p{font-size:1.05rem;line-height:1.5;color:#4b4159;margin:0 0 1rem;font-weight:500} .m-p.strong{font-weight:700;color:#33274a} .m-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin:.2rem 0 1.2rem} .m-btns .pbtn{padding:.8rem 1.3rem;font-size:1rem} .m-img{width:100%;height:auto;border-radius:22px;box-shadow:0 10px 26px rgba(85,60,120,.16);margin:0 0 1.2rem} .m-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:0 0 1rem} .m-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin:0 0 1rem} .m-feat{background:#fff;border-radius:16px;padding:.8rem .9rem;box-shadow:0 6px 18px rgba(85,60,120,.10)} .m-feat .ic{font-size:1.5rem;line-height:1;margin-bottom:.35rem;display:block} .m-feat b{display:block;color:#33274a;font-size:.98rem;line-height:1.2} .m-feat small{display:block;color:#4b4159;font-size:.82rem;line-height:1.3;margin-top:.15rem;font-weight:500} .m-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.1rem} .m-chips span{background:#fff;border-radius:999px;padding:.45em .9em;font-weight:700;font-size:.9rem;color:#33274a;box-shadow:0 4px 12px rgba(85,60,120,.12)} .m-card{position:relative;border-radius:22px;overflow:hidden;margin:0 0 .9rem;box-shadow:0 10px 26px rgba(85,60,120,.16)} .m-card img{width:100%;height:auto;display:block} .m-card .cap{position:absolute;left:7%;right:20%;bottom:8%;color:#fff} .m-card .cap b{display:block;font-size:1.6rem;line-height:1;font-weight:800;margin-bottom:.3rem} .m-card .cap small{display:block;font-size:.9rem;font-weight:500;line-height:1.3} .m-card .cap .pbtn{margin-top:.6rem;padding:.55rem 1rem;font-size:.9rem} .m-pc{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 8px 20px rgba(85,60,120,.12);text-align:center;padding-bottom:.7rem} .m-pc img{width:100%;height:auto;display:block;margin-bottom:.5rem} .m-pc b{display:block;font-size:1.15rem;font-weight:800} .m-pc small{display:block;color:#33274a;font-weight:700;font-size:.9rem} .m-thumb{text-align:center;font-size:.78rem;font-weight:700;color:#33274a;line-height:1.15} .m-thumb img{width:100%;height:auto;border-radius:12px;display:block;margin-bottom:.3rem} .m-world{border-radius:22px;padding:1rem;margin:0 0 1.1rem;display:grid;grid-template-columns:1fr 92px;gap:.6rem;align-items:start} .m-world img.mascot{width:92px;height:auto;border-radius:14px} .m-world .m-grid3{grid-column:1/-1;margin:0} .m-world .pbtn{grid-column:1/-1;justify-self:start;padding:.65rem 1.2rem;font-size:.95rem} .m-world.w1{background:#e3f6e6}.m-world.w2{background:#fbdce9}.m-world.w3{background:#e1f0fb} .m-info{background:#fff;border-radius:16px;padding:.9rem 1rem;box-shadow:0 6px 18px rgba(85,60,120,.10);margin:0 0 .7rem} .m-info b{display:block;color:#33274a;font-size:1rem}.m-info .big{display:block;font-weight:800;font-size:1.15rem;margin:.2rem 0} .m-info small{display:block;color:#4b4159;font-size:.85rem;line-height:1.35;font-weight:500} .m .pform{position:static;font-size:1rem;margin:0 0 1.2rem} .m .pform.left h3{text-align:left} .m .pform .fgrid.three{grid-template-columns:1fr 1fr} .m .faqrow{position:static;margin:0 0 .55rem;font-size:1rem;padding:.6rem .9rem} .m-tag{font-family:"Patrick Hand",cursive;font-size:1.25rem;color:#33274a;text-align:center;margin:.4rem 0 0} main::after{display:none} } @media (max-width:520px){ .m-grid2.tight{grid-template-columns:1fr 1fr} .m .pform .fgrid,.m .pform .fgrid.three{grid-template-columns:1fr} } /* ========================================================== Extra sections brought in from the earlier (darker) version Restyled to the PDF-faithful concept theme (Baloo 2, cream canvas, rainbow palette). Shows on all viewports. ========================================================== */ .xsec{position:relative;padding:clamp(2.4rem,5vw,4.2rem) clamp(1rem,4vw,3rem); container-type:normal;background:#fff} .xsec.tint-pink{background:#fff8fb} .xsec.tint-mint{background:#f4fbf5} .xsec.tint-lav {background:#f7f2fc} .xsec.tint-cream{background:#fff9ec} .xwrap{max-width:1180px;margin:0 auto} .xhead{text-align:center;margin:0 auto 1.8rem} .xhead .xeyebrow{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:.95rem; color:#c2185b;background:#fbdce9;border-radius:999px;padding:.35em 1em;margin:0 0 .8rem} .xhead .xeyebrow.lav{background:#efe7fb;color:#7f1cdf} .xhead .xeyebrow.mint{background:#e3f6e6;color:#07914a} .xhead .xeyebrow.gold{background:#fdedb5;color:#8a5a00} .xhead h2{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(1.9rem,4.2vw,2.8rem); line-height:1.05;margin:0 0 .5rem;color:#33274a} .xhead p.xlead{font-size:clamp(1rem,1.6vw,1.15rem);color:#4b4159;font-weight:500; max-width:640px;margin:.4rem auto 0;line-height:1.45} /* Party packages */ .pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.2rem} .pkg-card{position:relative;background:#fff;border-radius:22px;padding:1.6rem 1.4rem 1.4rem; box-shadow:0 12px 26px rgba(85,60,120,.12);border:2px solid #f0eaf5; display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s} .pkg-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(85,60,120,.18)} .pkg-card.popular{border-color:#ef2d78;box-shadow:0 16px 32px rgba(239,45,120,.18)} .pkg-card .pkg-ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%); background:#ef2d78;color:#fff;font-weight:800;font-size:.85rem;padding:.35em 1em; border-radius:999px;box-shadow:0 6px 14px rgba(239,45,120,.35);white-space:nowrap} .pkg-icon{font-size:2.6rem;line-height:1;text-align:center;margin-bottom:.4rem} .pkg-card h3{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.6rem; text-align:center;margin:0 0 .3rem;color:#33274a} .pkg-price{text-align:center;font-family:"Baloo 2",sans-serif;font-weight:800; color:#ef2d78;font-size:2.2rem;line-height:1;margin:.2rem 0 1rem} .pkg-price small{display:inline-block;font-size:.85rem;color:#7a7291;font-weight:600;margin-left:.15rem} .pkg-list{list-style:none;padding:0;margin:0 0 1.2rem;flex:1} .pkg-list li{display:flex;gap:.55em;align-items:flex-start;padding:.35em 0; color:#4b4159;font-weight:500;font-size:.98rem;line-height:1.35} .pkg-list li .tick{flex:0 0 22px;height:22px;border-radius:50%;background:#e3f6e6;color:#07914a; display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem} .pkg-card .pbtn{width:100%;padding:.75rem 1rem;font-size:1rem} .pkg-note{text-align:center;color:#7a7291;font-size:.88rem;font-weight:500;margin:1rem 0 0} /* Upcoming events list */ .ev-list{display:flex;flex-direction:column;gap:.9rem;max-width:820px;margin:1.2rem auto 0} .ev-row{display:grid;grid-template-columns:74px 1fr auto;gap:1rem;align-items:center; background:#fff;border-radius:18px;padding:.9rem 1.2rem;box-shadow:0 8px 20px rgba(85,60,120,.10)} .ev-date{background:linear-gradient(180deg,#ffe4ef,#fdd0e0);border-radius:14px; text-align:center;padding:.4rem 0;color:#c2185b} .ev-date .d{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.55rem;line-height:1} .ev-date .m{font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase} .ev-body h3{margin:0 0 .1rem;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.15rem;color:#33274a} .ev-body p{margin:0;color:#7a7291;font-weight:500;font-size:.92rem;line-height:1.35} .ev-row .pbtn{padding:.55rem 1.1rem;font-size:.92rem} /* CTA banner */ .cta-banner{background:linear-gradient(135deg,#fff0f7,#fff9ec);border-radius:26px;padding:2.2rem 1.6rem; text-align:center;box-shadow:0 14px 32px rgba(85,60,120,.14);border:2px solid #ffe0ef} .cta-banner .wobble{display:inline-block;font-size:2.6rem;line-height:1} .cta-banner h2{margin:.4rem 0 .5rem} .cta-banner .pbtn{margin-top:1rem;padding:.85rem 1.8rem;font-size:1.05rem} /* Worlds panels (Activities page) */ .worlds-wrap{display:flex;flex-direction:column;gap:1.6rem;margin-top:1rem} .wp{position:relative;border-radius:26px;padding:1.6rem 1.4rem 1.4rem; box-shadow:0 14px 34px rgba(85,60,120,.14);overflow:hidden} .wp.adv{background:linear-gradient(160deg,#e8f8ec,#d0f0d9);border:2px solid #b8e6c4} .wp.pre{background:linear-gradient(160deg,#fce8f0,#fbd6e4);border:2px solid #f5b8ce} .wp.vir{background:linear-gradient(160deg,#e2f1fb,#c9e6f7);border:2px solid #a8d1ea} .wp-head{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:center;margin-bottom:.6rem} .wp-ic{font-size:2.4rem;line-height:1;background:#fff;width:64px;height:64px;border-radius:16px; display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(85,60,120,.12)} .wp-title{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.7rem;line-height:1;margin:0;color:#33274a} .wp.adv .wp-title{color:#07914a}.wp.pre .wp-title{color:#ef2d78}.wp.vir .wp-title{color:#047ec9} .wp-tag{font-weight:700;font-size:.92rem;color:#4b4159} .wp-desc{margin:0 0 1.1rem;color:#4b4159;font-weight:500;font-size:.98rem;line-height:1.4;max-width:780px} .act-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem;margin-bottom:1.1rem} .act-tile{background:rgba(255,255,255,.85);border-radius:14px;overflow:hidden; box-shadow:0 6px 16px rgba(85,60,120,.10);text-align:center} .at-media{position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden; display:flex;align-items:center;justify-content:center} .at-media video{width:100%;height:100%;object-fit:cover;display:block} .at-emoji{font-size:2.6rem;line-height:1} .at-name{font-family:"Baloo 2",sans-serif;font-weight:700;font-size:.85rem;color:#33274a; padding:.45rem .4rem;line-height:1.15} .wp .pbtn{margin-top:.2rem;padding:.65rem 1.3rem;font-size:.95rem} /* Responsive collapse */ @media (max-width:900px){ .pkg-grid{grid-template-columns:1fr;gap:1rem;max-width:440px;margin:1.2rem auto 0} .act-grid{grid-template-columns:repeat(3,1fr)} .ev-row{grid-template-columns:64px 1fr;padding:.75rem .9rem} .ev-row .pbtn{grid-column:1/-1;justify-self:start;margin-top:.2rem} .wp-head{grid-template-columns:52px 1fr} .wp-ic{width:52px;height:52px;font-size:1.9rem} .wp-title{font-size:1.4rem} .cta-banner{padding:1.6rem 1rem} } @media (max-width:520px){ .act-grid{grid-template-columns:repeat(2,1fr)} } .at-media{background-size:cover;background-position:center} /* Show poster (background of .at-media) until video actually plays a frame */ .at-media video{opacity:0;transition:opacity .3s ease} .at-media video.playing{opacity:1} .wp-head .wp-lion{width:104px;height:104px;border-radius:50%;object-fit:contain;justify-self:end; filter:drop-shadow(0 6px 12px rgba(85,60,120,.22));transition:transform .2s ease} .wp:hover .wp-head .wp-lion{transform:scale(1.06) rotate(-3deg)} @media (max-width:900px){ .wp-head .wp-lion{width:76px;height:76px} } @media (max-width:420px){ .wp-head .wp-lion{width:64px;height:64px} } /* Overlay Google Maps iframe on top of the baked-in plate map so it shows the real address */ .ct-map-iframe{ position:absolute; left:47.15%; top:64.456%; width:23.273%; height:19.378%; border:0; border-radius:12px; background:#e9edf3; z-index:4; } @media (max-width:1024px){ .ct-map-iframe{display:none} } .m-map{width:100%;height:280px;border-radius:22px;overflow:hidden;box-shadow:0 10px 26px rgba(85,60,120,.16);margin:0 0 .8rem} .m-map iframe{width:100%;height:100%;border:0;display:block} /* WhatsApp — floating chat button (injected by js/whatsapp.js) + form validation */ .wa-fab{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:60; display:flex;align-items:center;gap:.5em;background:#25d366;color:#fff;border-radius:999px; padding:.7em 1.15em .7em .8em;font-family:"Baloo 2",sans-serif;font-weight:700;font-size:1.05rem; box-shadow:0 10px 26px rgba(20,120,60,.35);transition:transform .2s ease,box-shadow .2s ease} .wa-fab:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,120,60,.42)} .wa-fab svg{width:1.7em;height:1.7em;flex:none} @media (max-width:640px){.wa-fab{padding:.8em}.wa-fab span{display:none}} .pfield.invalid{border-color:#ef2d78;box-shadow:0 0 0 2px rgba(239,45,120,.18)} /* Contact page — lower row as real HTML (desktop). The plate above is cropped to the hero + info cards. */ .ct-lower{background:#fcfbf9;padding:.4rem 2.8% 1rem} .ct-row{display:grid;grid-template-columns:1.55fr 1fr;gap:1.6rem;align-items:stretch} .ct-card{background:#fff;border-radius:24px;box-shadow:0 12px 30px rgba(85,60,120,.13);padding:1.6rem 1.8rem} .ct-card h3{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.55rem;margin:0;line-height:1.1} .ct-card .ct-sub{margin:.15rem 0 1rem;color:#7a7291;font-weight:500} .ct-lower .pform{font-size:clamp(16px,1.2vw,19px);box-shadow:0 12px 30px rgba(85,60,120,.13);padding:1.5em 1.7em} .ct-lower .pform .fgrid{gap:.3em .9em} .ct-lower .pform .pfield{padding:.7em .85em} .ct-lower .pform .pfbtn{margin-top:.6em;padding:.85em 1em;font-size:1.05em} .ct-loc{display:flex;flex-direction:column} .ct-loc iframe{width:100%;flex:1;min-height:260px;border:0;border-radius:14px;background:#e9edf3} .ct-loc address{font-style:normal;margin:1rem 0 .4rem;color:#4b4159;font-weight:600;line-height:1.4} .ct-loc address b{display:block;color:#33274a;font-weight:800} .ct-loc .ct-dir{color:#047ec9;font-weight:700} .ct-faq{margin-top:1.6rem} .ct-faq .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.2rem;align-items:start} .ct-faq .faqrow{font-size:1.05rem;padding:.75rem 1rem} .ct-tagline{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.8rem;padding:0 1%} .ct-tagline b{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(1.6rem,2.2vw,2.2rem)} .ct-tagline p{margin:.1rem 0 0;color:#4b4159;font-weight:500} .ct-tagline .pill{background:#fde8f2;color:#33274a;border-radius:999px;padding:.7em 1.4em;font-weight:700} @media (max-width:1024px){.ct-lower{display:none}} /* Homepage video loops (assets/hv/, 2.5s, muted). Desktop: .pv overlays the plate's picture area at its % box; soft-edged ones use a mask so they melt into the plate. Mobile: