/* ============================================================ JEWEL — SITE-WIDE "WOW" DESIGN SYSTEM ------------------------------------------------------------ The same visual language as the approved homepage, mapped onto the block markup every CMS page already produces. Purely additive: content and DOM are untouched, so this can be turned off (?design=classic) and the exact replica returns. Everything is scoped under `body.wow` so it outranks the block stylesheets that get appended to at runtime. ============================================================ */ @font-face { font-family: Quicksand; font-weight: 700; src: url('/fonts/Quicksand-Bold.woff2') format('woff2'), url('/fonts/Quicksand-Bold.ttf') format('truetype'); font-display: swap; } @font-face { font-family: Roboto; font-weight: 400; src: url('/fonts/roboto-regular.woff2') format('woff2'); font-display: swap; } @font-face { font-family: Roboto; font-weight: 500; src: url('/fonts/roboto-medium.woff2') format('woff2'); font-display: swap; } body.wow { --pink: #C13556; --pink2: #E85D8A; --pink-deep: #8E1D3D; --pink-soft: #FBE7ED; --teal: #127A6C; --teal-deep: #0A4A41; --teal-soft: #E4F4EF; --mint: #F2FAF7; --sun: #F5A623; --sun-soft: #FEF3DF; --ink: #1D2433; --mut: #5D6573; --line: #F0E2DE; --cream: #FFF9F4; --sh: 0 24px 60px rgba(142,29,61,.12), 0 6px 16px rgba(29,36,51,.06); --sh2: 0 10px 26px rgba(29,36,51,.09); --ease: cubic-bezier(.22,1,.36,1); --spring: cubic-bezier(.34,1.56,.64,1); --wrap: 1280px; font: 400 16.5px/1.68 Roboto, system-ui, sans-serif; color: var(--ink); background: var(--cream); overflow-x: clip; } body.wow img { max-width: 100%; height: auto; display: block; } body.wow a { color: inherit; } body.wow ::selection { background: var(--pink-soft); } /* No blanket colour here: blocks that place headings over imagery (carousel, hero) set their own white, and a global `color` would override it. Ink is applied per-block below instead. */ body.wow h1, body.wow h2, body.wow h3, body.wow h4, body.wow h5 { font-family: Quicksand, sans-serif; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; } body.wow .wow-hide { display: none !important; } /* several blocks set `hyphens:auto` for justified copy; left-aligned text just ends up with broken words like "behav-ior" */ body.wow main p, body.wow main li, body.wow main td, body.wow main h1, body.wow main h2, body.wow main h3, body.wow main h4 { hyphens: manual; } /* justified copy at these measures opens rivers — read ragged-right instead */ body.wow main p, body.wow main li { text-align: left; } /* …with the deliberately-centred exceptions kept centred */ body.wow .columns.heading p, body.wow .columns.blog-heading p, body.wow .w-cta p, body.wow .columns.office-address p, body.wow .columns.c-logo p, body.wow .social-media p, body.wow .cards.jewel-specialities p { text-align: center; } /* ---------- reveal-on-scroll ---------- */ body.wow .rv { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease) var(--d,0ms), transform .9s var(--ease) var(--d,0ms); } body.wow .rv.in { opacity: 1; transform: none; } /* ------------------------------------------------------------ Legacy entrance animations. Most block stylesheets hide their content (opacity:0 + a slide transform) until their own JS adds a `.visible` / `.animate-in` class. The theme has ONE reveal system, so those are switched off here — otherwise elements double-animate, and any block whose observer never fires stays invisible forever. ------------------------------------------------------------ */ body.wow .columns.heading-animate, body.wow .columns .text-col, body.wow .columns .columns-img-col, body.wow .columns td, body.wow .columns th, body.wow .columns tr, body.wow .cards > ul > li, body.wow .cards > ul > li.slide-left, body.wow .cards > ul > li.slide-right, body.wow .blog .card, body.wow .full-blog .card, body.wow .jewel-blogs .card, body.wow .category-blog .card, body.wow .casestudies .card, body.wow .remaining-blog .card { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } /* …then re-arm the interaction motion the theme does want */ body.wow .cards > ul > li, body.wow .blog .card, body.wow .full-blog .card, body.wow .jewel-blogs .card, body.wow .category-blog .card, body.wow .casestudies .card, body.wow .remaining-blog .card { transition: transform .45s var(--ease), box-shadow .45s var(--ease) !important; } body.wow .cards > ul > li:hover, body.wow .blog .card:hover, body.wow .full-blog .card:hover, body.wow .jewel-blogs .card:hover, body.wow .category-blog .card:hover, body.wow .casestudies .card:hover, body.wow .remaining-blog .card:hover { transform: translateY(-8px) !important; } body.wow .columns .columns-img-col img { transition: transform .7s var(--ease) !important; } body.wow .columns .columns-img-col:hover img { transform: scale(1.02) !important; } @media (prefers-reduced-motion: reduce) { body.wow .rv { opacity: 1 !important; transform: none !important; transition: none !important; } body.wow * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ---------- chrome: progress + grain ---------- */ body.wow .w-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--sun), var(--pink), var(--teal)); z-index: 999; pointer-events: none; transition: width .1s linear; } body.wow .w-grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } body.wow .skip-w { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--pink); color: #fff; padding: 10px 18px; border-radius: 0 0 12px 12px; font: 500 .9rem Roboto; transition: top .2s; } body.wow .skip-w:focus { top: 0; } body.wow :focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 6px; } /* ============================================================ HEADER — matched to the approved homepage's `.hdr` so the two templates share one piece of chrome ============================================================ */ body.wow header { position: sticky; top: 0; z-index: 260; background: rgba(255,249,244,.9); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(240,226,222,.7); transition: transform .45s var(--ease), box-shadow .3s; } body.wow header.w-hide { transform: translateY(-110%); } body.wow header.w-scrolled { box-shadow: 0 12px 34px rgba(29,36,51,.08); } /* The pink contact strip is `position:fixed` and so reserves no space in flow; header.css compensates with a hardcoded `top:30px !important` (28px ≤1024px, less again ≤768px) that never matches the strip's real height (40px at desktop). Net effect: the whole page sat ~40px too high and the header's translucent bar covered the top 30px of every hero. The approved homepage keeps this strip in normal flow with the header sticking to top:0 — do the same here so the two templates behave identically at every breakpoint. */ body.wow .injected-top-header { position: static; } body.wow header.header-wrapper { top: 0 !important; } /* styles.css pins `header {height: var(--nav-height)}` and the block pins .nav-wrapper to 80px; the taller wow header spills out of both, so release them and let the nav size itself */ body.wow header { height: auto; min-height: 0; } /* header.css sizes the bar with `#nav {height:100%}` (an ID selector, so it outranks class rules) — drive the height from the wrapper instead */ body.wow header .nav-wrapper { height: 76px; } @media (max-width: 1180px) { body.wow header .nav-wrapper { height: auto; } } body.wow header .nav-wrapper::after { display: none; } body.wow header .header.block { background: transparent; box-shadow: none; } body.wow header nav { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px,4vw,44px); display: flex; align-items: center; gap: 24px; height: 76px; min-height: 76px; justify-content: flex-start; } /* the brand cell is an AEM `.section`, which carries its own vertical rhythm */ /* The logo sits inside `a > picture > img`. header.css leaves the anchor as a block with `font-size:1.5rem` (line-height 40px) and the inline with `padding-bottom:5px` — inline leading plus that padding grew the brand box to 90px inside a 76px header, so the logo spilled 7px past the header onto the hero on every CMS page. Flatten the whole chain to flex/block with no leading so the box is exactly the image height. */ body.wow header .nav-brand, body.wow header .nav-brand > div, body.wow header .nav-brand p, body.wow header .nav-brand a { padding: 0; margin: 0; display: flex; align-items: center; line-height: 0; } body.wow header .nav-brand picture { display: block; padding: 0; line-height: 0; } body.wow header .nav-brand img { display: block; height: 50px; max-height: 50px; width: auto; padding: 0; } body.wow header .nav-sections { margin-left: auto; padding: 0; gap: 10px; } body.wow header .nav-sections .default-content-wrapper { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; justify-content: flex-end; } body.wow header .nav-sections ul { list-style: none; display: flex; gap: 0; margin: 0; padding: 0; align-items: center; } body.wow header .nav-sections ul li { position: relative; margin: 0; padding: 0; display: flex; align-items: center; } body.wow header .nav-sections ul li > a, body.wow header .nav-sections ul li > p > a { display: flex; align-items: center; font: 500 .85rem Roboto; letter-spacing: .02em; padding: 10px 13px; min-height: 0; border-radius: 99px; text-decoration: none; color: var(--ink); position: relative; transition: color .25s; white-space: nowrap; /* the block CSS uppercases nav links; the approved design uses natural case */ text-transform: none; } body.wow header .nav-sections ul li > a::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } body.wow header .nav-sections ul li > a:hover, body.wow header .nav-sections ul li.nav-drop:hover > a { color: var(--pink); } body.wow header .nav-sections ul li > a:hover::before { transform: scaleX(1); } /* the legacy ▼ marker — replace with a crisp chevron */ body.wow header .nav-sections ul li.nav-drop > a::after { content: ""; width: 8px; height: 8px; margin-left: 6px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translateY(-2px); font-size: 0; transition: transform .3s var(--ease); } body.wow header .nav-sections ul li.nav-drop:hover > a::after { transform: rotate(225deg) translateY(-3px); } /* dropdowns — the block toggles these with display:none/flex on hover */ body.wow header .nav-sections ul li.nav-drop ul { position: absolute; top: 100%; left: 0; min-width: 262px; padding: 10px; margin-top: 0; background: #fff; border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh); z-index: 400; flex-direction: column; align-items: stretch; } body.wow header .nav-sections ul li.nav-drop:hover > ul { display: flex; animation: wdrop .28s var(--ease) both; } @keyframes wdrop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } body.wow header .nav-sections ul ul li { display: block; } body.wow header .nav-sections ul ul li > a { font-size: .82rem; padding: 9px 13px; border-radius: 11px; white-space: normal; text-transform: none; background: transparent; display: block; width: 100%; } body.wow header .nav-sections ul ul li > a::before, body.wow header .nav-sections ul ul li > a::after { display: none; } body.wow header .nav-sections ul ul li > a:hover { background: var(--teal-soft); color: var(--teal); translate: 3px 0; } /* the “BOOK NOW” button in nav */ body.wow header .nav-sections .button-container { margin: 0 0 0 6px; } body.wow header .button-container a, body.wow header a.button { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--pink), var(--pink-deep)); color: #fff; font: 500 .82rem Roboto; letter-spacing: .05em; padding: 12px 24px; border-radius: 99px; text-decoration: none; box-shadow: 0 10px 26px rgba(193,53,86,.35); transition: transform .3s var(--spring), box-shadow .3s; text-transform: none; } body.wow header .button-container a:hover, body.wow header a.button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 34px rgba(193,53,86,.38); } /* nav tools (address / floating contact strip inside the header) */ body.wow header .nav-tools { display: flex; align-items: center; gap: 14px; } body.wow header .nav-tools .columns.navaddress { font-size: .78rem; color: var(--mut); } body.wow header .nav-tools .columns.navaddress > div { display: flex; gap: 16px; align-items: center; } /* hamburger */ body.wow header .nav-hamburger { order: 3; margin-left: auto; display: none; } body.wow header .nav-hamburger button { width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; display: grid; place-items: center; } /* ---- mobile menu ---- The block owns this with `#nav[aria-expanded="true"] .nav-sections` (an ID selector, plus !important on display). Rather than fight it with a second drawer, the theme restyles the panel the block already opens. */ @media (max-width: 1180px) { body.wow header { backdrop-filter: none; background: var(--cream); } body.wow header .nav-hamburger { display: block; } body.wow header nav { position: relative; } /* the block pads .header 0 20px, which offsets the nav — the drawer must span the viewport, so drop the padding and let the nav own it */ body.wow header .header.block { padding-left: 0; padding-right: 0; } body.wow #nav[aria-expanded="true"] .nav-sections { /* a stray negative margin elsewhere pushes the panel off-canvas; let left/right alone size it */ top: 100%; left: 0; right: 0; width: auto !important; margin: 0 !important; background: #fff; border: 0; border-top: 1px solid var(--line); box-shadow: 0 26px 50px rgba(29,36,51,.18); padding: 14px clamp(14px,4vw,22px) 22px; max-height: calc(100vh - 150px); animation: wdrawer .3s var(--ease) both; } @keyframes wdrawer { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } } body.wow header .nav-sections .default-content-wrapper { display: block; } body.wow header .nav-sections ul { display: block; } body.wow header .nav-sections ul li { display: block; border-bottom: 1px solid var(--line); } body.wow header .nav-sections ul li > a { padding: 13px 6px; border-radius: 0; justify-content: space-between; white-space: normal; font-family: Quicksand, sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .04em; } body.wow header .nav-sections ul li > a::before { display: none; } body.wow header .nav-sections ul li.nav-drop ul { position: static; display: block; box-shadow: none; animation: none; border: 0; border-left: 2px solid var(--pink-soft); border-radius: 0; padding: 0 0 6px 12px; margin: 0 0 6px 8px; min-width: 0; } body.wow header .nav-sections ul li.nav-drop ul li { border-bottom: 0; } body.wow header .nav-sections .button-container { margin: 16px 0 0; } body.wow header .nav-sections .button-container a { width: 100%; justify-content: center; } body.wow header .nav-tools { display: none; } } @media (max-width: 640px) { body.wow header nav { min-height: 64px; gap: 10px; padding: 4px clamp(14px,4vw,20px); } body.wow header .nav-brand img { height: 42px; max-height: 42px; padding: 0; } body.wow header .nav-brand { padding: 0; } body.wow header .nav-hamburger button { width: 42px; height: 42px; border-radius: 12px; } } /* ============================================================ PAGE RHYTHM — chapters + wave dividers (built by wow-site.js) ============================================================ */ body.wow main { position: relative; z-index: 2; } body.wow main > .section { padding: 0; margin: 0; } /* `main > .section > div {max-width:1200px}` would inset the coloured bands — the chapter must bleed edge to edge and constrain its children instead */ body.wow main > .section > .w-chapter, body.wow main > .section > .w-wave { max-width: none; width: 100%; margin: 0; padding-left: 0; padding-right: 0; } body.wow .w-chapter { position: relative; padding: clamp(54px,7vw,104px) 0; } /* bands with no heading of their own (a lone icon strip, a stray image) get a tighter rhythm so the page never opens a dead zone */ body.wow .w-chapter.w-slim { padding: clamp(24px,3vw,44px) 0; } body.wow .w-chapter.w-flush { padding-top: 0; } /* a full-bleed carousel/hero band ignores the chapter's inner measure */ body.wow .w-chapter > .carousel-wrapper, body.wow .w-chapter > .hero-wrapper { max-width: none; padding-inline: 0; } body.wow .w-chapter.w-empty { display: none; } body.wow .w-chapter > * { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(18px,4vw,44px); box-sizing: border-box; } body.wow .w-chapter.tone-mint { background: var(--mint); } body.wow .w-chapter.tone-white { background: #fff; } body.wow .w-chapter.tone-cream { background: var(--cream); } body.wow .w-chapter.tone-dark { background: linear-gradient(160deg, var(--teal-deep), #06322C); color: #EAF6F2; } body.wow .w-chapter.tone-dark h2, body.wow .w-chapter.tone-dark h3, body.wow .w-chapter.tone-dark p { color: #EAF6F2; } body.wow .w-chapter.tone-dark .w-kicker { color: var(--sun); } body.wow .w-chapter.tone-dark .w-kicker::before { background: var(--sun); } /* wave divider */ body.wow .w-wave { display: block; width: 100%; height: clamp(38px,5vw,74px); margin: 0; padding: 0; max-width: none; } body.wow .w-wave svg { display: block; width: 100%; height: 100%; } body.wow .w-wave.flip svg { transform: scaleX(-1); } /* ============================================================ SECTION HEADINGS — .columns.heading ============================================================ */ body.wow .columns.heading { text-align: center; margin: 0 auto clamp(26px,3.4vw,48px); max-width: 900px; } body.wow .columns.heading > div { display: block; } body.wow .columns.heading .text-col { padding: 0; } body.wow .columns.heading h2 { font-size: clamp(1.75rem, 3.6vw, 2.9rem); max-width: 26ch; margin: 0 auto .6rem; text-wrap: balance; color: var(--ink); } body.wow .columns.heading h2 em, body.wow .columns.heading h2 strong { font-style: normal; color: var(--pink); } body.wow .columns.heading p { color: var(--mut); font-size: 1.03rem; max-width: 62ch; margin: 0 auto; } /* Numbered chapter kicker — the homepage's signature `01 ——` mark, so a department page reads as the same system. The numeral is decorative (it is the section's position), never invented copy. */ body.wow .w-kick { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto clamp(14px,1.8vw,22px); } body.wow .w-kn { font: 700 .8rem Quicksand, sans-serif; color: #fff; background: var(--ink); border-radius: 9px; padding: 5px 9px; letter-spacing: .06em; } body.wow .w-krule { flex: 0 1 90px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--sun), transparent); } body.wow .w-krule.left { background: linear-gradient(270deg, var(--sun), transparent); } body.wow .w-kicker { font: 700 .78rem Quicksand, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); } body.wow .w-chapter.tone-dark .w-kicker { color: var(--sun); } body.wow .w-chapter.tone-dark .w-kn { background: rgba(255,255,255,.14); } /* ============================================================ HERO ============================================================ */ /* The block already paints the image as an absolutely-positioned backdrop (.hero picture{position:absolute;inset:0;z-index:-1}) with the h1 in flow. Keep that model — only the wash, the type and the bottom edge change. */ body.wow .hero { position: relative; box-sizing: border-box; min-height: clamp(330px, 42vw, 540px); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding: clamp(90px,12vw,150px) clamp(20px,4vw,44px) clamp(46px,6vw,84px); } body.wow .hero::after { background: linear-gradient(180deg, rgba(10,74,65,.16) 0%, rgba(20,14,18,.3) 46%, rgba(142,29,61,.66) 100%); z-index: 0; } /* .hero > div must stay unpositioned: the block's backdrop is absolute+inset:0 and resolves against .hero itself. Positioning the wrapper would shrink the image to the size of the headline. */ body.wow .hero > div { width: 100%; } /* the global `img{height:auto}` would otherwise undo the full-bleed backdrop */ body.wow .hero picture { position: absolute; inset: 0; z-index: -1; } body.wow .hero picture img { width: 100%; height: 100%; object-fit: cover; } body.wow .hero h1 { position: relative; z-index: 1; padding-top: 0; margin: 0 auto; max-width: 18ch; text-align: center; color: #fff; font-size: clamp(2rem, 5vw, 3.9rem); line-height: 1.06; text-shadow: 0 10px 44px rgba(0,0,0,.5); text-wrap: balance; } body.wow .hero h1::after { content: ""; display: block; width: 74px; height: 4px; border-radius: 4px; margin: 22px auto 0; background: linear-gradient(90deg, var(--sun), var(--pink2)); } /* soft scalloped bottom edge, echoing the homepage */ body.wow .hero-container { position: relative; } body.wow .hero-container::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(26px,3.4vw,54px); z-index: 4; pointer-events: none; background: var(--cream); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V26c240 34 480 34 720 0s480-34 720 0v34z' fill='%23000'/%3E%3C/svg%3E") center/100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V26c240 34 480 34 720 0s480-34 720 0v34z' fill='%23000'/%3E%3C/svg%3E") center/100% 100% no-repeat; } @media (max-width: 768px) { body.wow .hero { min-height: 300px; padding-top: 80px; } body.wow .hero h1 { font-size: clamp(1.65rem, 7vw, 2.2rem); margin-top: 0; } } /* ============================================================ COLUMNS — text / image bands ============================================================ */ body.wow .columns:not(.heading):not(.footer):not(.footers):not(.navaddress) > div { display: grid; gap: clamp(26px, 4vw, 60px); align-items: center; } body.wow .columns.columns-2-cols > div { grid-template-columns: 1fr 1fr; } body.wow .columns.columns-3-cols > div { grid-template-columns: repeat(3, 1fr); } body.wow .columns.columns-4-cols > div { grid-template-columns: repeat(4, 1fr); } /* ------------------------------------------------------------ Body-copy columns. These MUST exclude the heading blocks. `.columns .text-col h2` and `.columns.heading h2` have identical specificity (0,3,2), so whichever came last won — which left every section heading pinned to the left of its own centred column. Excluding the heading variants here removes the tie instead of out-weighing it by a hair. ------------------------------------------------------------ */ body.wow .columns .text-col > *:first-child { margin-top: 0; } /* justified body copy opens rivers at these measures — read left-aligned */ body.wow .columns:not(.heading):not(.blog-heading) .text-col, body.wow .columns:not(.heading):not(.blog-heading) .text-col p, body.wow .detail-left p { text-align: left; } body.wow .columns:not(.heading):not(.blog-heading) .text-col p { color: var(--mut); font-size: 1.04rem; margin: 0 0 1.05em; } body.wow .columns:not(.heading):not(.blog-heading) .text-col p:last-child { margin-bottom: 0; } body.wow .columns:not(.heading):not(.blog-heading) .text-col h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 0 0 .6em; } body.wow .columns:not(.heading):not(.blog-heading) .text-col h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin: 1.4em 0 .5em; } /* `:not(.button)` keeps inline links from tying with the content-button rule below — same specificity trap as the headings */ body.wow .columns .text-col a:not(.button) { color: var(--pink); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(193,53,86,.32); transition: border-color .25s, color .25s; } body.wow .columns .text-col a:not(.button):hover { color: var(--pink-deep); border-bottom-color: var(--pink-deep); } /* ------------------------------------------------------------ Content buttons. aem.js `decorateButtons()` promotes any standalone link in page copy to `a.button`, and styles.css paints those with its default --link-color (#3b63fb). That blue was leaking into every content CTA and the 404 page's "Go to Home". ------------------------------------------------------------ */ body.wow main a.button:any-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0; border: 0; border-bottom: 0; border-radius: 99px; padding: 13px 30px; font: 500 .92rem Roboto, sans-serif; letter-spacing: .03em; text-decoration: none; background: linear-gradient(135deg, var(--pink), var(--pink-deep)); color: #fff; box-shadow: 0 12px 28px rgba(193,53,86,.3); transition: transform .3s var(--spring), box-shadow .3s; } body.wow main a.button:any-link:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 18px 36px rgba(193,53,86,.38); } body.wow main a.button.secondary:any-link { background: transparent; color: var(--pink); border: 1.5px solid var(--pink); box-shadow: none; } body.wow main a.button.secondary:any-link:hover { background: var(--pink-soft); color: var(--pink-deep); } body.wow main .button-container { margin: 6px 0; } /* the 404 sits on its own — centre its call to action */ body.wow main > div > .button-container { text-align: left; } /* image columns get the wow frame */ body.wow .columns .columns-img-col picture, body.wow .columns .columns-img-col img { width: 100%; border-radius: 26px; overflow: hidden; display: block; } body.wow .columns .columns-img-col img { box-shadow: var(--sh); transition: transform .7s var(--ease); object-fit: cover; } body.wow .columns .columns-img-col:hover img { transform: scale(1.02); } /* bullet lists → branded check list (main only; the footer has its own list style) */ body.wow main .columns .text-col ul, body.wow main .w-chapter .default-content-wrapper ul { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 10px; } body.wow main .columns .text-col ul li, body.wow main .w-chapter .default-content-wrapper ul li { position: relative; padding-left: 34px; color: var(--ink); font-size: 1rem; line-height: 1.6; } body.wow main .columns .text-col ul li::before, body.wow main .w-chapter .default-content-wrapper ul li::before { content: ""; position: absolute; left: 0; top: .16em; width: 21px; height: 21px; border-radius: 50%; background: var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7' fill='none' stroke='%23127A6C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; } /* single-column prose bands (autism-care and friends) read as centred articles */ body.wow .columns.columns-1-cols:not(.heading):not(.blog-heading) > div { grid-template-columns: 1fr; } body.wow .columns.autism-care .text-col, body.wow .columns.columns-1-cols:not(.heading):not(.blog-heading) .text-col { max-width: 78ch; margin-inline: auto; } body.wow .columns.autism-care .text-col ul { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 26px; } /* a lone full-width image column (e.g. therapist team photo) */ body.wow .columns.columns-1-cols .columns-img-col img { border-radius: 30px; box-shadow: var(--sh); } /* two-tone “who we are” style band */ body.wow .columns.who-we-are .columns-img-col img, body.wow .columns.new-intro .columns-img-col img { border-radius: 30px 30px 30px 90px; } body.wow .columns.new-intro .columns-img-col img { border-radius: 30px 30px 90px 30px; } /* stats band */ body.wow .columns.number > div { grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); text-align: center; gap: 26px; } body.wow .columns.number p { font-size: 1rem; color: var(--mut); } body.wow .w-stat-n { font-family: Quicksand, sans-serif; font-weight: 700; font-size: clamp(2.4rem,5vw,3.8rem); line-height: 1; background: linear-gradient(120deg, var(--pink), var(--sun)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================ CARDS ============================================================ */ body.wow .cards > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px,2.2vw,30px); grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); } body.wow .cards > ul > li { background: #fff; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: var(--sh2); display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s var(--ease); position: relative; } body.wow .cards > ul > li:hover { transform: translateY(-8px); box-shadow: var(--sh); } body.wow .cards .cards-card-image { margin: 0; } body.wow .cards .cards-card-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } body.wow .cards .cards-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; } body.wow .cards .cards-card-body p { margin: 0; color: var(--mut); font-size: .97rem; line-height: 1.65; text-align: left; } body.wow .cards .cards-card-body p:first-child { font-family: Quicksand, sans-serif; font-weight: 700; font-size: 1.16rem; color: var(--ink); line-height: 1.25; } body.wow .cards .cards-card-body a { color: var(--pink); font-weight: 500; text-decoration: none; } body.wow .cards .cards-card-body a:hover { text-decoration: underline; } /* press / media logo strip */ body.wow .cards.media > ul { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 16px; } body.wow .cards.media > ul > li { border-radius: 18px; padding: 18px; align-items: center; justify-content: center; background: #fff; } body.wow .cards.media .cards-card-image img { aspect-ratio: auto; height: 46px; width: auto; margin: 0 auto; object-fit: contain; filter: grayscale(1); opacity: .68; transition: filter .4s, opacity .4s; } body.wow .cards.media > ul > li:hover .cards-card-image img { filter: none; opacity: 1; } /* ============ testimonials — one card skin, two presentations ============ The card design is the approved homepage `.tst` look (white, radius 24, hairline border, soft shadow, Quicksand quote glyph, pink name). It is applied to BOTH testimonial variants so the site reads as one system: 1. `.cards.testimonials` — the auto-slider used on ~39 service pages. The block JS rotates cards every 3s; the track's align-items:stretch sized EVERY card to the tallest of all 14 quotes, so after quotes were un-clipped, short reviews floated in huge empty cards. Quotes are now visually clamped to 9 lines with an ellipsis — the full text stays in the HTML for crawlers, and the complete quotes live one click away on /testimonials (linked from the nav). 2. `.cards.testimonial-wall` — /testimonials itself: a static masonry wall (CSS columns) where every quote renders in full at its natural height, mirroring the homepage wall minus its marquee animation — a reading page should hold still. The variant name deliberately does not contain the token "testimonials", so cards.js's slider (classList.contains('testimonials')) never starts here. */ body.wow .cards.testimonials.block, body.wow .cards.testimonial-wall.block { padding: 0; } body.wow .cards.testimonials.block ul { gap: 26px; } body.wow .cards.testimonials.block ul li, body.wow .cards.testimonial-wall.block ul li { border-radius: 24px; border: 1px solid var(--line); background: #fff; box-shadow: var(--sh2); padding: 50px 26px 26px; text-align: left; overflow: visible; position: relative; } body.wow .cards.testimonials.block ul li.active { transform: scale(1.04); box-shadow: var(--sh); } /* homepage's quote glyph */ body.wow .cards.testimonials.block ul li::after, body.wow .cards.testimonial-wall.block ul li::after { content: "\201C"; position: absolute; top: 30px; right: 24px; font: 700 3.4rem/0.55 Quicksand, sans-serif; color: var(--pink2); opacity: .45; background: none; width: auto; height: auto; } body.wow .cards.testimonials.block .cards-card-image, body.wow .cards.testimonial-wall.block .cards-card-image { top: -34px; } body.wow .cards.testimonials.block .cards-card-image img, body.wow .cards.testimonial-wall.block .cards-card-image img { width: 68px; height: 68px; border: 4px solid #fff; box-shadow: 0 8px 22px rgba(29,36,51,.16); background: var(--mint); } body.wow .cards.testimonials.block .cards-card-body, body.wow .cards.testimonial-wall.block .cards-card-body { margin-top: 6px; padding-right: 0; max-height: none; min-height: 0; overflow-y: visible; overflow: visible; } body.wow .cards.testimonials.block .cards-card-body p, body.wow .cards.testimonial-wall.block .cards-card-body p { text-align: left; hyphens: manual; } body.wow .cards.testimonials.block .cards-card-body p:first-child, body.wow .cards.testimonial-wall.block .cards-card-body p:first-child { font-family: Quicksand, sans-serif; font-weight: 700; font-size: 1rem; color: var(--pink); text-align: left; margin: 0 0 8px; } body.wow .cards.testimonials.block .cards-card-body p + p, body.wow .cards.testimonial-wall.block .cards-card-body p + p { font-size: .9rem; color: #404A5A; line-height: 1.72; } /* slider only: bound the equal-height track to ~9 readable lines */ body.wow .cards.testimonials.block .cards-card-body p + p { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; } /* wall only: masonry columns; kill any slider leftovers defensively */ body.wow .cards.testimonial-wall.block { overflow: visible; } body.wow .cards.testimonial-wall.block ul { display: block; columns: 3; column-gap: 26px; padding: 44px 0 0; margin: 0; list-style: none; transform: none !important; transition: none !important; } body.wow .cards.testimonial-wall.block ul li { display: inline-block; width: 100%; break-inside: avoid; margin: 0 0 26px; } @media (max-width: 1024px) { body.wow .cards.testimonial-wall.block ul { columns: 2; } } @media (max-width: 640px) { body.wow .cards.testimonial-wall.block ul { columns: 1; } } /* photo-led cards (departments, locations, founders, programs) */ body.wow .cards.department .cards-card-image img, body.wow .cards.location .cards-card-image img, body.wow .cards.about-program .cards-card-image img { aspect-ratio: 3/2; object-fit: cover; width: 100%; height: auto; } body.wow .cards.department .cards-card-image p, body.wow .cards.department .cards-card-image a { margin: 0; display: block; } body.wow .cards.founder .cards-card-image img { aspect-ratio: 1; } body.wow .cards.founder > ul { grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); } body.wow .cards.jewel-specialities > ul > li { text-align: center; padding-top: 8px; } body.wow .cards.jewel-specialities .cards-card-image img { aspect-ratio: 1; object-fit: contain; padding: 22px; background: var(--mint); } /* AEM's cards.js adds slide-left/right — neutralise the old entrance so ours runs */ body.wow .cards > ul > li.slide-left, body.wow .cards > ul > li.slide-right { opacity: 1; transform: none; animation: none; } /* ============================================================ ACCORDION / FAQ ============================================================ */ body.wow .accordion { max-width: 920px; margin-inline: auto; display: grid; gap: 14px; } body.wow .accordion .accordion-item { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 4px 14px rgba(29,36,51,.05); transition: box-shadow .35s var(--ease), border-color .35s; } body.wow .accordion .accordion-item[open] { border-color: rgba(193,53,86,.4); box-shadow: var(--sh2); } body.wow .accordion .accordion-item-label { cursor: pointer; list-style: none; padding: 20px 60px 20px 26px; position: relative; font-family: Quicksand, sans-serif; font-weight: 700; font-size: 1.06rem; line-height: 1.4; color: var(--ink); } body.wow .accordion .accordion-item-label::-webkit-details-marker { display: none; } body.wow .accordion .accordion-item-label p { margin: 0; font: inherit; color: inherit; } /* the block draws a bare chevron via border + rotate on the same ::after — both must be cleared or they compose into a lopsided cross */ body.wow .accordion .accordion-item-label::after { content: ""; position: absolute; right: 20px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border: 0; transform: none; border-radius: 50%; background: var(--pink-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23C13556' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/15px no-repeat; transition: transform .35s var(--spring), background-color .3s; } body.wow .accordion .accordion-item[open] .accordion-item-label::after { transform: rotate(135deg); } body.wow .accordion .accordion-item-label:hover { color: var(--pink); } body.wow .accordion .accordion-item-body { padding: 0 26px 24px; color: var(--mut); font-size: 1rem; } body.wow .accordion .accordion-item-body, body.wow .accordion .accordion-item-body p, body.wow .accordion .accordion-item-body li { text-align: left; } body.wow .accordion .accordion-item-body > *:first-child { margin-top: 0; } body.wow .accordion .accordion-item-body p { margin: 0 0 1em; } body.wow .accordion .accordion-item-body ul { margin-bottom: .8em; } /* ============================================================ VIDEO ============================================================ */ body.wow .video .video-item, body.wow .video > div { border-radius: 26px; overflow: hidden; box-shadow: var(--sh); background: #000; } body.wow .video iframe, body.wow .video video { display: block; width: 100%; aspect-ratio: 16/9; border: 0; } body.wow .video picture img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } /* ============================================================ SOCIAL STRIP / ICONS ============================================================ */ body.wow .social-media table { margin-inline: auto; border-collapse: collapse; } body.wow .social-media td { padding: 6px; } body.wow .social-media a { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh2); transition: transform .3s var(--spring), background .3s; } body.wow .social-media a:hover { transform: translateY(-3px); background: var(--pink-soft); } body.wow .social-media img, body.wow .social-media .icon img { width: 22px; height: 22px; } /* ============================================================ FORMS ============================================================ */ body.wow form { max-width: 720px; margin-inline: auto; display: grid; gap: 16px; } body.wow .form form, body.wow .enquiryform form { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: clamp(24px,3.4vw,42px); box-shadow: var(--sh2); } body.wow form label { font: 500 .86rem Roboto; color: var(--ink); display: block; margin-bottom: 6px; } body.wow form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), body.wow form select, body.wow form textarea { width: 100%; font: 400 1rem Roboto; color: var(--ink); background: var(--cream); border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 16px; transition: border-color .25s, box-shadow .25s; } body.wow form input:focus, body.wow form select:focus, body.wow form textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 4px rgba(193,53,86,.12); } body.wow form textarea { min-height: 130px; resize: vertical; } body.wow form button, body.wow form input[type="submit"], body.wow form .submit-btn, body.wow form button[type="submit"] { justify-self: start; background: linear-gradient(135deg, var(--pink), var(--pink2)); color: #fff; border: 0; font: 500 .95rem Roboto; letter-spacing: .04em; padding: 14px 34px; border-radius: 99px; cursor: pointer; box-shadow: 0 12px 28px rgba(193,53,86,.3); transition: transform .3s var(--spring), box-shadow .3s; } body.wow form button:hover, body.wow form input[type="submit"]:hover, body.wow form .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(193,53,86,.38); } /* map */ body.wow .googlemap iframe, body.wow .columns.googlemap iframe { width: 100%; min-height: 380px; border: 0; border-radius: 26px; box-shadow: var(--sh2); display: block; } /* office address cards */ body.wow .columns.office-address > div { gap: 22px; } body.wow .columns.office-address > div > div { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 26px; box-shadow: var(--sh2); } /* ============================================================ BLOG — listings and cards ============================================================ */ /* Each listing block ships its own column layout (blog is 1fr 2fr 1fr, casestudies is a 4-up grid, …). Only the cards are restyled — imposing a grid on the container tears those layouts apart. `remaining-*` is the one listing with no stylesheet of its own, so it gets the grid. */ body.wow .remaining-blog, body.wow .remaining-casestudy { display: grid; gap: clamp(20px,2.4vw,32px); grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); } body.wow .blog .card, body.wow .full-blog .card, body.wow .jewel-blogs .card, body.wow .category-blog .card, body.wow .casestudies .card, body.wow .author-blog .card, body.wow .remaining-blog .card, body.wow .remaining-casestudy .card { background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--sh2); display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s var(--ease); } body.wow .card:hover { transform: translateY(-8px); box-shadow: var(--sh); } body.wow .card .thumb { display: block; overflow: hidden; } body.wow .card .thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .8s var(--ease); } body.wow .card:hover .thumb img { transform: scale(1.06); } body.wow .card .card-content { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; } body.wow .card .card-content h2, body.wow .card .card-content h3, body.wow .card .card-content h4, body.wow .card .card-content .post-title, body.wow .card .card-content .title { font-family: Quicksand, sans-serif; font-weight: 700; font-size: 1.06rem; line-height: 1.32; margin: 0; color: var(--ink); text-align: left; } body.wow .card .card-content a { text-decoration: none; color: inherit; } body.wow .card .card-content a:hover { color: var(--pink); } body.wow .card .card-content p { margin: 0; color: var(--mut); font-size: .94rem; line-height: 1.6; } body.wow .card .card-content .date, body.wow .card .card-content .author, body.wow .card .card-content small { font-size: .8rem; color: var(--pink); font-weight: 500; letter-spacing: .03em; } body.wow .remaining-blog-heading, body.wow .remaining-casestudy-heading { grid-column: 1 / -1; font-size: clamp(1.5rem,2.6vw,2.1rem); margin: 12px 0 4px; text-align: center; } body.wow .remaining-blog-heading::before, body.wow .remaining-casestudy-heading::before { content: ""; display: block; width: 54px; height: 4px; border-radius: 4px; margin: 0 auto 16px; background: linear-gradient(90deg, var(--sun), var(--pink), var(--teal)); } /* pagination / load-more buttons in listings */ body.wow .pagination, body.wow .load-more, body.wow .mybtn { grid-column: 1 / -1; display: flex; justify-content: center; gap: 10px; margin-top: 14px; } body.wow .pagination a, body.wow .pagination button, body.wow .load-more button, body.wow .mybtn a { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 10px 20px; font: 500 .9rem Roboto; color: var(--ink); text-decoration: none; cursor: pointer; transition: .25s; } body.wow .pagination a:hover, body.wow .pagination .active, body.wow .load-more button:hover, body.wow .mybtn a:hover { background: var(--pink); color: #fff; border-color: var(--pink); } /* ============================================================ BLOG — article detail ============================================================ */ body.wow .columns.blog-heading { max-width: 860px; margin: 0 auto clamp(20px,3vw,36px); text-align: center; } body.wow .columns.blog-heading > div { display: block; } body.wow .columns.blog-heading h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.12; margin: 0 0 14px; text-wrap: balance; color: var(--ink); } body.wow .columns.blog-heading::before { content: "ARTICLE"; display: inline-flex; align-items: center; gap: 8px; font: 500 .7rem Roboto; letter-spacing: .2em; color: var(--pink); background: var(--pink-soft); padding: 7px 16px; border-radius: 99px; margin-bottom: 18px; } body.wow .columns.blog-heading p { color: var(--mut); font-size: .93rem; margin: 0; } body.wow .columns.blog-heading p a { color: var(--pink); text-decoration: none; font-weight: 500; } body.wow .content.blog-content > div { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: clamp(28px,4vw,58px); align-items: start; } /* the block sizes these as 75%/25% of a flex row — inside a grid cell those percentages collapse the sidebar to a sliver */ body.wow .content.blog-content .detail-left, body.wow .content.blog-content .detail-right { max-width: none; width: auto; flex: initial; } body.wow .content.blog-content .detail-left { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: clamp(22px,3.4vw,52px); box-shadow: var(--sh2); font-size: 1.06rem; line-height: 1.8; color: #333B4D; min-width: 0; } body.wow .detail-left > *:first-child { margin-top: 0; } body.wow .detail-left p { margin: 0 0 1.25em; } body.wow .detail-left h2 { font-size: clamp(1.45rem,2.4vw,1.95rem); margin: 1.9em 0 .55em; } body.wow .detail-left h3 { font-size: clamp(1.2rem,1.9vw,1.45rem); margin: 1.6em 0 .5em; } body.wow .detail-left h2::after { content: ""; display: block; width: 46px; height: 3px; border-radius: 3px; margin-top: 12px; background: linear-gradient(90deg, var(--pink), var(--sun)); } body.wow .detail-left a { color: var(--pink); text-decoration: none; border-bottom: 1px solid rgba(193,53,86,.3); } body.wow .detail-left a:hover { color: var(--pink-deep); border-bottom-color: var(--pink-deep); } body.wow .detail-left img, body.wow .detail-left picture { border-radius: 20px; box-shadow: var(--sh2); margin: 1.4em 0; } body.wow .detail-left ul, body.wow .detail-left ol { margin: 0 0 1.35em; padding-left: 0; } body.wow .detail-left ul { list-style: none; display: grid; gap: 10px; } body.wow .detail-left ul li { position: relative; padding-left: 32px; } body.wow .detail-left ul li::before { content: ""; position: absolute; left: 0; top: .42em; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--sun)); } body.wow .detail-left ol { padding-left: 24px; } body.wow .detail-left ol li { margin-bottom: 10px; padding-left: 6px; } body.wow .detail-left ol li::marker { color: var(--pink); font-weight: 700; font-family: Quicksand, sans-serif; } body.wow .detail-left blockquote { margin: 1.6em 0; padding: 20px 26px; border-left: 4px solid var(--pink); background: var(--pink-soft); border-radius: 0 18px 18px 0; font-size: 1.1rem; color: var(--pink-deep); } body.wow .detail-left table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; } body.wow .detail-left th, body.wow .detail-left td { border: 1px solid var(--line); padding: 11px 14px; text-align: left; } body.wow .detail-left th { background: var(--mint); font-family: Quicksand, sans-serif; font-weight: 700; } body.wow .content.blog-content .detail-right { position: sticky; top: 100px; display: grid; gap: 16px; min-width: 0; align-content: start; } body.wow .detail-right > *:not(h1):not(h2):not(h3):not(h4) { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 0; box-shadow: var(--sh2); overflow: hidden; } body.wow .detail-right h1, body.wow .detail-right h2, body.wow .detail-right h3, body.wow .detail-right h4 { font-size: 1.15rem !important; color: var(--ink) !important; text-align: left !important; margin: 6px 0 2px; padding-bottom: 10px; position: relative; } body.wow .detail-right h2::after, body.wow .detail-right h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--sun), var(--pink)); } body.wow .detail-right .card { box-shadow: none; border: 0; } body.wow .detail-right .card .thumb img { aspect-ratio: 16/10; } body.wow .detail-right .card .card-content { padding: 14px 16px 18px; } body.wow .detail-right .card .card-content h2, body.wow .detail-right .card .card-content .post-title { font-size: .96rem !important; line-height: 1.35; padding-bottom: 0; } body.wow .detail-right .card .card-content h2::after { display: none; } body.wow .detail-right img { border-radius: 0; } body.wow .detail-right:empty { display: none; } body.wow .content.blog-content > div:has(.detail-right:empty) { grid-template-columns: minmax(0,1fr); } @media (max-width: 1000px) { body.wow .content.blog-content > div { grid-template-columns: minmax(0,1fr); } body.wow .content.blog-content .detail-right { position: static; } } /* ============================================================ FLOATING CONTACT — restyles the authored block (real tel:/wa/ mailto links come from the CMS, so nothing is duplicated here) ============================================================ */ body.wow .floating-contact { right: 18px; bottom: 18px; z-index: 250; } body.wow .floating-contact-toggle { width: 56px; height: 56px; background: linear-gradient(135deg, var(--pink), var(--pink2)) !important; box-shadow: 0 14px 32px rgba(193,53,86,.4) !important; transition: transform .4s var(--spring), box-shadow .3s; } body.wow .floating-contact-toggle:hover { transform: translateY(-3px) scale(1.05); } body.wow .floating-contact.active .floating-contact-toggle { transform: rotate(45deg); } body.wow .floating-contact-options { bottom: 72px; gap: 10px; } /* matched to the approved homepage `.fab`: white pill, tinted icon disc */ body.wow .fc-option { background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 8px; box-shadow: 0 12px 30px rgba(29,36,51,.18); gap: 10px; transition: transform .3s var(--spring), box-shadow .3s; } body.wow .fc-option:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(29,36,51,.24); } body.wow .fc-label { background: transparent; color: var(--ink); font: 700 .8rem Quicksand, sans-serif; letter-spacing: 0; padding: 0 0 0 8px; border-radius: 0; box-shadow: none; margin: 0; order: -1; } body.wow .fc-icon-circle { width: 44px; height: 44px; box-shadow: none; border-radius: 50%; transition: transform .3s var(--spring); } body.wow .fc-option:hover .fc-icon-circle { transform: scale(1.06); } body.wow .fc-whatsapp .fc-icon-circle { background: #E7F8EE; } body.wow .fc-call .fc-icon-circle { background: var(--teal-soft); } body.wow .fc-mail .fc-icon-circle { background: var(--pink-soft); } body.wow .fc-icon-circle img { width: 22px; height: 22px; filter: none; } /* back to top */ body.wow .w-top { position: fixed; right: 22px; bottom: 92px; z-index: 249; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: var(--sh2); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--spring); } body.wow .w-top.on { opacity: 1; pointer-events: auto; } body.wow .w-top:hover { transform: translateY(-3px); color: var(--pink); } body.wow .w-top svg { width: 20px; height: 20px; } @media (max-width: 768px) { body.wow .w-top { right: 17px; bottom: 78px; width: 40px; height: 40px; } } /* ============================================================ MID-PAGE BOOKING STRIP ============================================================ */ body.wow .w-cta { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(18px,4vw,44px); } body.wow .w-cta-in { background: linear-gradient(135deg, var(--pink-deep), var(--pink) 55%, var(--pink2)); border-radius: 30px; padding: clamp(26px,3.6vw,46px); color: #fff; text-align: center; box-shadow: 0 26px 60px rgba(142,29,61,.28); position: relative; overflow: hidden; } body.wow .w-cta-in::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.09); } body.wow .w-cta h2 { color: #fff; font-size: clamp(1.5rem,2.8vw,2.3rem); margin: 0 0 10px; position: relative; } body.wow .w-cta p { color: rgba(255,255,255,.9); margin: 0 0 22px; position: relative; } body.wow .w-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; } body.wow .w-cta-btns a { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 99px; font: 500 .95rem Roboto; text-decoration: none; transition: transform .3s var(--spring); } body.wow .w-cta-btns a:hover { transform: translateY(-2px); } body.wow .w-cta-btns .b1 { background: #fff; color: var(--pink-deep); } body.wow .w-cta-btns .b2 { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.5); } /* ============================================================ FOOTER ============================================================ */ body.wow footer { /* same plum as the approved homepage footer (.ft), not a teal variant */ background: #211921; color: #D8CED3; font-size: .9rem; margin-top: 0; position: relative; z-index: 2; } body.wow footer .footer.block > div { max-width: var(--wrap); margin-inline: auto; padding: clamp(40px,4.4vw,66px) clamp(18px,4vw,44px) 0; } body.wow footer .columns.footer { padding: 0; margin: 0; } body.wow footer .columns.footer > div { display: grid; grid-template-columns: 1.2fr .8fr 1.1fr .9fr; gap: 36px; align-items: start; } body.wow footer .columns.footer > div > div { padding: 0; } /* the block stylesheets colour these for a light background */ body.wow footer .columns.footer h2, body.wow footer .columns.footer h3, body.wow footer .columns.footer h4, body.wow footer .columns.footer h5, body.wow footer .columns.footer h6 { font-size: .95rem !important; line-height: 1.3; color: #fff !important; letter-spacing: .04em; margin: 0 0 14px; position: relative; padding-bottom: 12px; text-align: left; } body.wow footer .columns.footer p, body.wow footer .columns.footer li, body.wow footer .columns.footer a, body.wow footer .columns.footer span, body.wow footer .columns.footer div, body.wow footer .columns.footer td { color: #D8CED3 !important; text-align: left; } body.wow footer .columns.footer p, body.wow footer .columns.footer li { font-size: .86rem; } body.wow footer .columns.footer a:hover { color: var(--sun) !important; } body.wow footer .columns.footer li a { display: block; padding: 4px 0; transition: .25s; } body.wow footer .columns.footer li a:hover { translate: 4px 0; padding-left: 0; } body.wow footer .columns.footer ul li::before { display: none; } body.wow footer .columns.footer h5::after, body.wow footer .columns.footer h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--sun), transparent); display: block; } /* the block adds its own vertical rhythm on top of the section's */ body.wow footer .footer.block, body.wow footer .section, body.wow footer .columns-wrapper { padding-top: 0; margin-top: 0; } /* the contact-line glyphs are dark line art — flip them for the dark footer */ body.wow footer .columns.footer li .icon img { filter: brightness(0) invert(1); opacity: .9; } /* the social marks are full-colour brand logos — leave them as they are */ body.wow footer .columns.footer p a .icon img { filter: none; opacity: 1; width: 18px; height: 18px; } body.wow footer .columns.footer img[src*="logo" i], body.wow footer .columns.footer p > a > picture img, body.wow footer .columns.footer p > a > img { filter: none; background: #fff; border-radius: 12px; padding: 6px 10px; height: 56px; width: auto; max-width: 200px; } body.wow footer .columns.footer td img { filter: none; background: none; padding: 0; height: 44px; border-radius: 9px; } body.wow footer h5 { font-size: 1.08rem; color: #fff; margin: 0 0 16px; position: relative; padding-bottom: 12px; } body.wow footer h5::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--sun), var(--pink)); } body.wow footer p, body.wow footer li { color: #B6D5CD; font-size: .92rem; line-height: 1.7; } body.wow footer ul { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 7px; } body.wow footer a { color: #D6EAE4; text-decoration: none; transition: color .25s, padding-left .25s; } body.wow footer a:hover { color: var(--sun); } body.wow footer li a:hover { padding-left: 5px; } body.wow footer img { border-radius: 10px; } body.wow footer .columns.footer img[src*="logo" i] { background: #fff; padding: 10px 14px; border-radius: 14px; max-width: 190px; } body.wow footer table { border-collapse: collapse; } body.wow footer td { padding: 4px 0; } body.wow footer td img { max-height: 44px; width: auto; border-radius: 8px; } body.wow footer .icon img { width: 18px; height: 18px; filter: brightness(0) saturate(100%) invert(88%) sepia(9%) saturate(324%) hue-rotate(118deg) brightness(94%) contrast(88%); } body.wow footer li .icon { margin-right: 8px; vertical-align: -3px; } body.wow footer .columns.footer p:has(> a > .icon), body.wow footer .ft-social { display: flex; gap: 10px; } body.wow footer .columns.footer p .icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: rgba(255,255,255,.08); transition: background .3s, transform .3s var(--spring); } body.wow footer .columns.footer p a:hover .icon { background: var(--pink); transform: translateY(-3px); } body.wow footer .columns.footers { border-top: 1px solid rgba(255,255,255,.09); margin-top: clamp(26px,3.4vw,44px); } body.wow footer .columns.footers > div { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; align-items: center; padding: 18px 0; font-size: .8rem; color: #A2929A; } body.wow footer .columns.footers a { color: #A2929A; } body.wow footer .columns.footers a:hover { color: var(--sun); } body.wow footer .columns.footers > div > div { display: inline; } @media (max-width: 900px) { body.wow footer .columns.footer > div { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { body.wow footer .columns.footer > div { grid-template-columns: 1fr; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { body.wow .columns.columns-2-cols > div, body.wow .columns.columns-3-cols > div, body.wow .columns.columns-4-cols > div { grid-template-columns: 1fr; } /* keep image above text on stacked 2-col bands regardless of source order */ body.wow .columns.columns-2-cols .columns-img-col { order: -1; } body.wow .cards > ul { grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); } body.wow .w-fab { right: 12px; bottom: 12px; } body.wow .w-fab a { width: 48px; height: 48px; } } @media (max-width: 620px) { body.wow { font-size: 16px; } body.wow .cards > ul, body.wow .blog, body.wow .full-blog, body.wow .jewel-blogs, body.wow .category-blog, body.wow .casestudies, body.wow .remaining-blog { grid-template-columns: 1fr; } body.wow .cards.media > ul { grid-template-columns: repeat(2,1fr); } body.wow .columns.autism-care .text-col ul { grid-template-columns: 1fr; } } /* print */ @media print { body.wow .w-fab, body.wow .w-progress, body.wow .w-grain, body.wow .w-wave, body.wow header, body.wow footer { display: none !important; } body.wow .rv { opacity: 1 !important; transform: none !important; } }