/* ===================================================================== Tima's Sky Spa — Frontend CLEAN layer (ADDITIVE, loaded LAST) Goal: simple, tidy, readable, SEO-friendly, mobile-first. - Kills horizontal overflow ("tràn viền") at the root cause. - Unifies container width, spacing, radius, shadows. - Tones down gradients/shadows for a calmer, premium look. Overrides earlier sheets with controlled, minimal rules only. ===================================================================== */ /* ---- Design tokens (calmer than the app layer) ---- */ :root{ --c-max: 1120px; /* main container width on desktop */ --c-pad: 16px; /* horizontal gutter */ --r: 16px; /* unified card radius */ --gap: 14px; /* unified grid gap */ --shadow-1: 0 2px 10px rgba(120,100,70,.07); --shadow-2: 0 6px 20px rgba(120,100,70,.10); } /* ===================================================================== 1. GLOBAL ANTI-OVERFLOW (fix root cause, then guard the wrapper) ===================================================================== */ *,*::before,*::after{box-sizing:border-box} /* overflow-x:hidden on is safe for the sticky header (html is the viewport). Prefer `clip` where supported — it stops horizontal overflow WITHOUT turning into a scroll container, so position:sticky keeps working. */ html{overflow-x:hidden} body{max-width:100%} @supports (overflow:clip){ html{overflow-x:clip} body{overflow-x:clip} } /* media never pushes layout out */ img,svg,video,picture,iframe,canvas{max-width:100%;height:auto} /* flex/grid children must be allowed to shrink so text wraps instead of forcing the row wider than the screen */ .grid > *, .card-grid > *, .footer-grid > *, .app-pkg-grid > *, .app-grid > *, .app-pick-grid > *, .app-quick > *, .header-inner > *, .app-member-stats > *, .app-step-nav > *, .app-pkg-actions > *, .foot > *, .app-sec-head > *{ min-width:0; } /* long unbreakable strings (codes, URLs, emails) must wrap */ p, a, span, h1, h2, h3, h4, td, li, blockquote, .app-promo-code, .lc-sub{ overflow-wrap:anywhere; } /* tables scroll inside their own box, never the page */ .table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ===================================================================== 2. CONTAINER + SPACING — one consistent rhythm ===================================================================== */ .container{width:100%;max-width:var(--c-max);margin-inline:auto;padding-inline:var(--c-pad)} .section{padding:44px 0} .app-section{padding:30px 0} .app-section .container{padding-inline:var(--c-pad)} .section-head{margin-bottom:26px} .app-sec-head{margin-bottom:14px} /* horizontal scroll rows: align bleed exactly to the gutter so they never exceed the viewport */ .app-hscroll{margin-inline:calc(-1 * var(--c-pad));padding-inline:var(--c-pad);gap:12px} /* ===================================================================== 3. CALMER SURFACES — fewer gradients, lighter shadows, unified radius ===================================================================== */ .card,.app-service-card,.app-pkg-card,.app-quick-item,.app-staff-card, .app-list-card,.app-success-card,.booking-form,.app-booking{ border-radius:var(--r); box-shadow:var(--shadow-1); } .app-service-card:hover,.app-quick-item:hover{box-shadow:var(--shadow-2)} /* Hero: solid premium tone instead of a busy gradient + glow */ .app-hero{padding:18px var(--c-pad) 4px} .app-hero-card{ background:var(--primary); box-shadow:var(--shadow-2); border-radius:20px; padding:24px 20px 26px; } .app-hero-card::after{display:none} /* Member card: solid, restrained */ .app-member-card{background:var(--primary);box-shadow:var(--shadow-2);border-radius:20px} .app-member-card::after{display:none} /* Promo cards: flat coupon, single accent — no gradient noise */ .app-promo-card{ background:var(--bg-alt); color:var(--text); box-shadow:var(--shadow-1); border:1px solid var(--border); } .app-promo-card.alt{background:var(--bg-alt)} .app-promo-card::before,.app-promo-card::after{background:var(--bg)} .app-promo-card .promo-tag{color:var(--primary-dark);opacity:1} .app-promo-card h3{color:var(--primary-dark)} .app-promo-card .promo-sub,.app-promo-card .promo-exp{color:var(--muted)} .app-promo-code{background:#fff;color:var(--primary-dark);border:1px dashed var(--primary)} .app-promo-card .promo-cta{background:var(--primary);color:#fff} /* tame the legacy combo/quick shadows too */ .app-pkg-card{box-shadow:var(--shadow-1)} .app-pkg-card.is-featured{box-shadow:0 0 0 1px var(--app-ring),var(--shadow-2)} /* ===================================================================== 4. TYPOGRAPHY — clear hierarchy, comfortable reading ===================================================================== */ body{font-size:16px;line-height:1.6} h1{font-size:clamp(1.6rem,5vw,2.3rem);line-height:1.2} h2{font-size:clamp(1.3rem,4vw,1.8rem)} h3{font-size:1.05rem} .section-head p,.app-sec-sub{font-size:.92rem} /* ===================================================================== 5. GRIDS — never too many columns on small screens ===================================================================== */ .grid{gap:var(--gap)} .app-grid{grid-template-columns:repeat(2,1fr);gap:var(--gap)} .grid-services,.grid-3,.grid-combos{grid-template-columns:1fr;gap:var(--gap)} .app-pkg-grid{grid-template-columns:1fr;gap:var(--gap)} .app-quick{gap:9px} @media (min-width:560px){ .grid-services,.grid-3,.grid-combos{grid-template-columns:repeat(2,1fr)} .app-pkg-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:861px){ .app-grid{grid-template-columns:repeat(3,1fr)} .grid-services,.grid-3,.grid-combos{grid-template-columns:repeat(3,1fr)} .app-pkg-grid{grid-template-columns:repeat(3,1fr)} .app-quick{grid-template-columns:repeat(8,1fr)} } @media (min-width:1100px){ .app-grid{grid-template-columns:repeat(4,1fr)} } /* equal-height cards in a row */ .app-grid .app-service-card,.app-pkg-grid .app-pkg-card{height:100%} /* ===================================================================== 6. BUTTONS / CTA — one clear primary, fewer competing styles ===================================================================== */ .btn{max-width:100%} .app-step-nav,.app-pkg-actions,.app-hero-actions{flex-wrap:wrap} .app-hero-actions .btn{flex:1 1 auto} /* ===================================================================== 7. FOOTER — keep it compact and aligned ===================================================================== */ .site-footer{margin-top:8px} .footer-grid{gap:24px} .footer-grid a{overflow-wrap:anywhere} /* ===================================================================== 8. MAIN wrapper (added in Controller::view) — semantic + safe ===================================================================== */ .site-main{display:block;width:100%;overflow-x:clip} /* ===================================================================== 9. MOBILE polish ===================================================================== */ @media (max-width:860px){ .section{padding:32px 0} .app-section{padding:24px 0} /* keep room for bottom nav + sticky CTA without creating scroll */ body{padding-bottom:128px} /* single-column, comfortable forms */ .form-row{grid-template-columns:1fr !important} /* avoid oversized hero text overflow */ .app-hero-card h1{font-size:clamp(1.5rem,7vw,2rem)} } /* ===================================================================== 10. RICH CONTENT (WYSIWYG blog/service bodies) — keep editor output inside its box so long code/tables/media stay READABLE and never get clipped by the page-level overflow guard. ===================================================================== */ /* Wide tables scroll inside their own box (never the page). */ .rich table{ display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse; } .rich td,.rich th{overflow-wrap:anywhere} /* Code / preformatted blocks: wrap long unbreakable strings, scroll if needed. */ .rich pre{ max-width:100%; overflow-x:auto; white-space:pre-wrap; word-break:break-word; } .rich code{overflow-wrap:anywhere} /* Editor media must never push the layout out. */ .rich img,.rich video,.rich iframe{max-width:100%;height:auto} .rich iframe{width:100%} /* Long links pasted into article bodies wrap instead of overflowing. */ .rich a{overflow-wrap:anywhere} /* ===================================================================== 11. EXTRA min-width:0 GUARDS — let every remaining flex child shrink so text wraps instead of forcing a row wider than the screen. ===================================================================== */ .app-steps-bar > *, .contact-grid > *, .detail-grid > *, .testimonial-track > *, .app-success-card .row > *, .social > *{ min-width:0; } /* The step bar itself must stay within the card on very small screens. */ .app-steps-bar{max-width:100%;overflow:hidden} .app-step-dot .lbl{overflow-wrap:anywhere} /* ===================================================================== 12. SITE-WIDE SAFE GLOBALS (explicit baseline requested) — applies to EVERY frontend page/layout, additive and non-destructive. ===================================================================== */ *,*::before,*::after{box-sizing:border-box} html,body{max-width:100%} /* media never exceeds its container */ img,picture,video,canvas,svg,iframe{max-width:100%;height:auto} /* form controls must never push the layout wider than the screen */ input,select,textarea,button{max-width:100%} /* long words / URLs / codes wrap instead of overflowing */ h1,h2,h3,h4,h5,h6,p,li,a,span{overflow-wrap:break-word;word-wrap:break-word} /* generic flex/grid children can shrink so rows never force a wider page */ .flex>*,.grid>*{min-width:0} /* account list rows + status chips stay inside the card on small screens */ .app-list-card{flex-wrap:wrap} .app-list-card .lc-main{min-width:0} .app-status{overflow-wrap:anywhere} /* ===================================================================== 13. REMOVE FLOATING ACTION ELEMENTS (Explicit requested overhaul) - Hides all cluttering/overlapping floating buttons, shortcuts, hotlines, account shortcut bubbles and sticky CTA strips. - Keeps the page flat, neat and readable. ===================================================================== */ .float-call, .app-sticky-cta, .header-icon-actions, .header-icon-btn, .floating-booking-bar, .floating-booking-cta, .floating-call-button, .floating-user-button, .floating-action-group, .mobile-sticky-booking, .quick-floating-icons { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Adjust mobile body padding because we no longer have a double-stacked bottom (the sticky button is gone, only the sleek navigation remains) */ @media (max-width: 860px) { body { padding-bottom: 74px !important; /* Perfect fit for the bottom nav */ } .float-call { display: none !important; } } /* ===================================================================== 14. COMPACT CARD & CTA SIZES FOR MOBILE (No vertical bloating) - Snugger padding and gaps inside the package and membership cards. - Tighter heading sizes and snug margins. - Dramatically scales down the CTA banner (cta-band) height/padding. - Maximizes content density on small viewports. ===================================================================== */ /* Snugger, more compact package & membership cards on all viewports */ .app-pkg-card { padding: 14px 14px 16px !important; gap: 6px !important; border-radius: 16px !important; } .app-pkg-card h3 { font-size: 1.05rem !important; line-height: 1.2 !important; margin-bottom: 2px !important; } .app-pkg-card .pkg-desc { font-size: 0.8rem !important; margin-bottom: 2px !important; line-height: 1.35 !important; } .app-pkg-price { gap: 6px !important; margin-top: 0 !important; } .app-pkg-price .now { font-size: 1.25rem !important; } .app-pkg-price .was { font-size: 0.8rem !important; } .app-pkg-meta { font-size: 0.74rem !important; gap: 8px !important; } .app-pkg-actions { margin-top: 4px !important; gap: 6px !important; } .app-pkg-actions .btn { padding: 9px 10px !important; font-size: 0.82rem !important; min-height: 38px !important; border-radius: 999px !important; } /* Tame the massive CTA Band/Banner */ .cta-band { padding: 36px 16px !important; border-radius: 16px !important; margin-inline: 16px !important; } .cta-band h2 { font-size: 1.5rem !important; margin-bottom: 6px !important; } .cta-band p { font-size: 0.88rem !important; margin-bottom: 16px !important; } .cta-band .btn { padding: 10px 24px !important; font-size: 0.9rem !important; } /* Mobile-specific maximum density */ @media (max-width: 860px) { .app-pkg-card { padding: 12px 12px 14px !important; gap: 4px !important; } .app-pkg-card h3 { font-size: 0.98rem !important; } .app-pkg-card .pkg-desc { font-size: 0.76rem !important; } .app-pkg-price .now { font-size: 1.15rem !important; } .app-pkg-meta { font-size: 0.7rem !important; } .app-pkg-actions .btn { padding: 8px 10px !important; font-size: 0.78rem !important; min-height: 36px !important; } .cta-band { padding: 24px 12px !important; margin-inline: 12px !important; } .cta-band h2 { font-size: 1.35rem !important; line-height: 1.25 !important; } .cta-band p { font-size: 0.82rem !important; margin-bottom: 12px !important; } .cta-band .btn { padding: 8px 20px !important; font-size: 0.85rem !important; } }