headings that must look identical. */ body.home .kajo-home-hero .kajo-home-hero-heading { position: relative !important; max-width: 540px !important; margin: 0 !important; padding: 0 !important; color: rgba(255, 255, 255, .96) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(52px, 4.75vw, 86px) !important; font-weight: 500 !important; line-height: .96 !important; letter-spacing: 0 !important; overflow: visible !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .38) !important; } body.home .kajo-home-hero h1.kajo-blob-heading-ready { position: relative !important; } body.home .kajo-home-hero h1:not(.kajo-blob-heading-ready):after { content: "" !important; position: absolute !important; z-index: 4 !important; inset-block-start: .08em !important; inset-inline-start: -.16em !important; width: .22em !important; height: .22em !important; border-radius: 999px !important; background: linear-gradient(90deg, #f47d2d, #9ab389) !important; box-shadow: 0 0 24px rgba(244, 125, 45, .5), 0 0 42px rgba(154, 179, 137, .3) !important; opacity: 0 !important; pointer-events: none !important; animation: kajo-heading-blob-fallback 2.4s .35s cubic-bezier(.215, .61, .355, 1) both !important; } @keyframes kajo-heading-blob-fallback { 0% { opacity: 0; transform: translate3d(0, .62em, 0) scaleX(1); } 12% { opacity: 1; } 44% { transform: translate3d(2.7em, .62em, 0) scaleX(2.2); } 78% { opacity: 1; transform: translate3d(5.95em, 2.45em, 0) scaleX(1.65); } 100% { opacity: 0; transform: translate3d(6.3em, 2.45em, 0) scaleX(1); } } body.home .kajo-blob-heading-copy { position: relative !important; z-index: 2 !important; display: inline !important; } body.home .kajo-blob-heading-line { display: block !important; white-space: nowrap !important; } body.home .kajo-blob-heading-word { display: inline-block !important; white-space: nowrap !important; } body.home .kajo-blob-heading-char { display: inline-block !important; opacity: 0 !important; filter: blur(18px) !important; transform: translateY(.22em) !important; will-change: opacity, filter, transform !important; transition: opacity .52s cubic-bezier(.215, .61, .355, 1) var(--kajo-char-delay, 0ms), filter .52s cubic-bezier(.215, .61, .355, 1) var(--kajo-char-delay, 0ms), transform .52s cubic-bezier(.215, .61, .355, 1) var(--kajo-char-delay, 0ms) !important; } body.home .kajo-blob-heading-char.is-visible { opacity: 1 !important; filter: blur(0) !important; transform: translateY(0) !important; } /* Matched on .kajo-home-hero-heading, not h1, so the accent period applies to every slide. Only slide 1 is an
. */ body.home .kajo-home-hero .kajo-home-hero-heading .kajo-blob-heading-period, body.home .kajo-home-hero .kajo-home-hero-heading .kajo-blob-heading-period.is-visible { color: #f47d2d !important; text-shadow: 0 2px 18px rgba(244, 125, 45, .32) !important; } body.home .kajo-blob-heading-blob { position: absolute !important; inset-block-start: 0 !important; inset-inline-start: 0 !important; z-index: 3 !important; display: block !important; border-radius: 999px !important; background: linear-gradient(90deg, #f47d2d, #9ab389) !important; box-shadow: 0 0 22px rgba(244, 125, 45, .5), 0 0 38px rgba(154, 179, 137, .28) !important; opacity: 0 !important; pointer-events: none !important; transform-origin: center !important; will-change: transform, width, opacity !important; transition: opacity .32s ease !important; } body.home .kajo-blob-heading-blob.is-parked { background: #f47d2d !important; opacity: 0 !important; visibility: hidden !important; } body.home .kajo-home-hero-text { max-width: 500px !important; margin-top: 28px !important; } body.home .kajo-home-hero-actions { margin-top: 28px !important; } body.home .kajo-home-hero-button { position: relative !important; isolation: isolate !important; overflow: hidden !important; min-height: 58px !important; padding-inline: 30px 62px !important; border: 2px solid transparent !important; border-radius: 999px !important; background: linear-gradient(#f47d2d, #f47d2d) padding-box, linear-gradient(115deg, rgba(143, 167, 127, .82), rgba(255, 255, 255, .86), rgba(244, 125, 45, .98), rgba(143, 167, 127, .82)) border-box !important; background-size: 100% 100%, 260% 260% !important; color: #fff !important; box-shadow: 0 18px 38px rgba(244, 125, 45, .22), 0 0 0 0 rgba(255, 255, 255, 0) !important; backdrop-filter: blur(14px) saturate(145%) !important; -webkit-backdrop-filter: blur(14px) saturate(145%) !important; transition: color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease, background-position .65s ease !important; } body.home .kajo-home-hero-button:before { content: "" !important; position: absolute !important; z-index: -1 !important; inset-block: 50% auto !important; inset-inline-end: 18px !important; width: 34px !important; height: 34px !important; border-radius: 999px !important; background: #8fa77f !important; transform: translateY(-50%) scale(1) !important; transform-origin: center !important; transition: width .42s cubic-bezier(.22, 1, .36, 1), height .42s cubic-bezier(.22, 1, .36, 1), inset-inline-end .42s cubic-bezier(.22, 1, .36, 1), background .35s ease !important; } body.home .kajo-home-hero-button:after { content: "\2192" !important; position: absolute !important; inset-block-start: 50% !important; inset-inline-end: 28px !important; z-index: 1 !important; color: #fff !important; font-size: 17px !important; font-weight: 900 !important; line-height: 1 !important; transform: translate(0, -50%) !important; transition: transform .35s ease, color .35s ease !important; } body.home .kajo-home-hero-button.is-primary { background: linear-gradient(#f47d2d, #f47d2d) padding-box, linear-gradient(115deg, rgba(255, 255, 255, .86), rgba(143, 167, 127, .95), rgba(244, 125, 45, .98), rgba(255, 255, 255, .86)) border-box !important; background-size: 100% 100%, 260% 260% !important; color: #fff !important; } body.home .kajo-home-hero-button.is-primary:before { background: #8fa77f !important; } body.home .kajo-home-hero-button:not(.is-primary):before { background: #8fa77f !important; } body.home .kajo-home-hero-button:hover, body.home .kajo-home-hero-button:focus-visible, body.home .kajo-home-hero-button:active { border-color: transparent !important; background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .76)) padding-box, linear-gradient(115deg, #86a476 0%, #fff8ef 32%, #f47d2d 58%, #86a476 100%) border-box !important; color: #263921 !important; background-position: 0 0, 100% 50% !important; box-shadow: 0 18px 42px rgba(244, 125, 45, .2), 0 0 0 4px rgba(255, 255, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .75) !important; transform: translateY(-2px) !important; } body.home .kajo-home-hero-button:hover:before, body.home .kajo-home-hero-button:focus-visible:before, body.home .kajo-home-hero-button:active:before { inset-inline-end: 18px !important; width: 34px !important; height: 34px !important; background: #8fa77f !important; } body.home .kajo-home-hero-button:hover:after, body.home .kajo-home-hero-button:focus-visible:after, body.home .kajo-home-hero-button:active:after { transform: translate(4px, -50%) !important; } body.home .kajo-home-hero-button:focus-visible { outline: 3px solid rgba(255, 255, 255, .78) !important; outline-offset: 3px !important; } body.home .kajo-home-hero-controls { position: absolute !important; inset-inline-start: clamp(52px, 6vw, 116px) !important; inset-block-end: clamp(20px, 2.4vw, 44px) !important; z-index: 6 !important; display: flex !important; align-items: center !important; gap: 14px !important; margin: 0 !important; /* Absolutely positioned with only one inline offset set, this box is shrink-to-fit, and the width the browser arrived at came out 9px narrower under `direction: rtl` than under ltr with identical content. The dots below are flex items, so they - not the fixed-size arrow buttons - absorbed the whole difference and rendered at fractional widths: 6.41 and 18.19 against English's 8 and 24 at mobile, 4.91 and 10.69 against 10 and 26 at desktop. Sizing the box to its content removes the deficit at source instead of leaving the dots to pay for it. */ width: max-content !important; pointer-events: auto !important; } /* The arrows and dots are all explicitly sized, so none of them should ever be resolved by flex. Without this they keep `flex-shrink: 1` and quietly give up pixels whenever the row is measured a little short. */ body.home .kajo-home-hero-controls > button, body.home .kajo-home-hero-controls > span { flex: none !important; } body.home .kajo-home-hero-controls button, body.home .kajo-home-hero-controls span { backdrop-filter: blur(16px) saturate(145%) !important; -webkit-backdrop-filter: blur(16px) saturate(145%) !important; } body.home .kajo-home-hero-controls button { width: 46px !important; height: 46px !important; border: 1px solid rgba(255, 255, 255, .48) !important; background: rgba(255, 255, 255, .18) !important; color: #fff !important; box-shadow: 0 14px 32px rgba(0, 0, 0, .14) !important; cursor: pointer !important; transform: translateY(0) scale(1) !important; transition: background .24s ease, border-color .24s ease, color .24s ease, box-shadow .24s ease, transform .24s ease !important; } body.home .kajo-home-hero-controls button:hover, body.home .kajo-home-hero-controls button:focus-visible { border-color: rgba(244, 125, 45, .72) !important; background: rgba(244, 125, 45, .92) !important; color: #fff !important; box-shadow: 0 18px 38px rgba(244, 125, 45, .24), 0 0 0 4px rgba(255, 255, 255, .26) !important; transform: translateY(-2px) scale(1.04) !important; } body.home .kajo-home-hero-controls button:active { transform: translateY(0) scale(.97) !important; } body.home .kajo-home-hero-controls span { width: 10px !important; height: 10px !important; background: rgba(255, 255, 255, .32) !important; border: 1px solid transparent !important; cursor: pointer !important; transition: width .24s ease, background .24s ease, border-color .24s ease, transform .24s ease !important; } body.home .kajo-home-hero-controls span.is-active { width: 26px !important; border-color: rgba(255, 255, 255, .72) !important; background: #f47d2d !important; border-radius: 999px !important; } body.home .kajo-home-hero-controls span:not(.is-active):hover { background: rgba(244, 125, 45, .68) !important; transform: scale(1.1) !important; } body.home .kajo-home-hero-controls span.is-unused { display: none !important; } body.home .kajo-home-hero-proof, body.home .kajo-home-hero-badge, body.home .kajo-home-hero-product { display: grid !important; border: 1px solid rgba(255, 255, 255, .36) !important; background: rgba(255, 255, 255, .18) !important; color: #fff !important; box-shadow: 0 18px 42px rgba(0, 0, 0, .18) !important; backdrop-filter: blur(18px) saturate(150%) !important; -webkit-backdrop-filter: blur(18px) saturate(150%) !important; pointer-events: auto !important; } body.home .kajo-home-hero-proof { inset-block-start: clamp(112px, 9vw, 168px) !important; inset-inline-end: clamp(52px, 5vw, 96px) !important; z-index: 5 !important; width: 174px !important; max-width: 174px !important; padding: 14px !important; border-radius: 18px !important; gap: 9px !important; } body.home .kajo-home-hero-proof strong { color: #fff !important; font-size: 13px !important; line-height: 1.25 !important; text-shadow: 0 2px 14px rgba(0, 0, 0, .26) !important; } body.home .kajo-home-hero-avatars span { border-color: rgba(255, 255, 255, .58) !important; } body.home .kajo-home-hero-badge { display: none !important; } body.home .kajo-home-hero-badge span { display: grid !important; width: 28px !important; height: 28px !important; margin-bottom: 4px !important; border-radius: 50% !important; background: rgba(255, 255, 255, .24) !important; color: #fff !important; place-items: center !important; } body.home .kajo-home-hero-badge strong { color: #fff !important; font-size: 11px !important; line-height: 1.15 !important; } body.home .kajo-home-hero-product { z-index: 5 !important; width: 250px !important; min-width: 0 !important; padding: 12px !important; grid-template-columns: 56px minmax(0, 1fr) 32px !important; gap: 12px !important; border-radius: 18px !important; text-decoration: none !important; } body.home .kajo-home-hero-product.is-bottom { display: none !important; } body.home .kajo-home-hero-product.is-side { inset-inline-end: clamp(58px, 5vw, 92px) !important; inset-block-start: 43% !important; } body.home .kajo-home-hero-product img { width: 56px !important; height: 56px !important; border-radius: 12px !important; background: rgba(255, 255, 255, .72) !important; object-fit: contain !important; } body.home .kajo-home-hero-product strong, body.home .kajo-home-hero-product em { color: #fff !important; text-shadow: 0 2px 14px rgba(0, 0, 0, .24) !important; } body.home .kajo-home-hero-product strong { font-size: 12px !important; line-height: 1.2 !important; } body.home .kajo-home-hero-product em { font-size: 12px !important; } body.home .kajo-home-hero-product i { width: 32px !important; height: 32px !important; background: rgba(255, 255, 255, .88) !important; color: var(--kajo-sage-dark) !important; } @media (max-width: 1180px) { body.home .kajo-home-hero-panel { height: clamp(610px, 58.6vw, 960px) !important; min-height: 0 !important; background-image: none !important; background-position: center top !important; } body.home .kajo-home-hero-slide[data-slide="1"] { background-image: url("../images/home-banners/hero-watergel-en-tablet.webp") !important; } body.home .kajo-home-hero-slide[data-slide="2"] { background-image: url("../images/home-banners/hero-olaplex-en-tablet.webp") !important; } body.home .kajo-home-hero-slide[data-slide="3"] { background-image: url("../images/home-banners/hero-kids-en-tablet.webp") !important; } body.home.rtl .kajo-home-hero-panel, body.rtl.home .kajo-home-hero-panel { background-image: none !important; } body.home.rtl .kajo-home-hero-slide[data-slide="1"], [dir="rtl"] body.home .kajo-home-hero-slide[data-slide="1"] , body.kajo-rtl.home .kajo-home-hero-slide[data-slide="1"]{ background-image: url("../images/home-banners/hero-watergel-ar-tablet.webp") !important; } body.home.rtl .kajo-home-hero-slide[data-slide="2"], [dir="rtl"] body.home .kajo-home-hero-slide[data-slide="2"] , body.kajo-rtl.home .kajo-home-hero-slide[data-slide="2"]{ background-image: url("../images/home-banners/hero-olaplex-ar-tablet.webp") !important; } body.home.rtl .kajo-home-hero-slide[data-slide="3"], [dir="rtl"] body.home .kajo-home-hero-slide[data-slide="3"] , body.kajo-rtl.home .kajo-home-hero-slide[data-slide="3"]{ background-image: url("../images/home-banners/hero-kids-ar-tablet.webp") !important; } body.home .kajo-home-hero-copy { width: min(540px, 46vw) !important; margin-inline-start: clamp(30px, 5vw, 72px) !important; padding-block-start: clamp(86px, 9vw, 136px) !important; } body.home.rtl .kajo-home-hero-copy, body.rtl.home .kajo-home-hero-copy { margin-inline-start: clamp(30px, 5vw, 72px) !important; margin-inline-end: auto !important; } body.home .kajo-home-hero h1, body.home .kajo-home-hero .kajo-home-hero-heading { font-size: clamp(48px, 6.4vw, 78px) !important; } } @media (max-width: 767px) { body.home .kajo-home-hero-panel { height: clamp(430px, 112vw, 540px) !important; min-height: 0 !important; background-size: cover !important; background-image: none !important; } /* Not flush to the top. `cover` renders these 1122x1402 sources about 487px tall in a 437px box, so ~50px is cropped vertically whatever happens; spending 14px of it at the top drops each artwork's first annotation below the copy block instead of leaving it under the buttons, and costs only a little more of the pedestal at the bottom. Measured on the source files: the Arabic water gel slide's first label starts 330px in, which lands at 208px in the box when the image is flush to the top - against a copy block that ends at 220px. */ body.home .kajo-home-hero-slide { background-position: center 14px !important; } /* That nudge leaves 14px at the top showing the slide's own background colour instead of artwork. These are the sampled top-edge colours of each source file, so the sliver is indistinguishable from the image rather than the pale strip the shared `#eef3e8` would draw. The kids artwork is the one whose two language versions differ enough to be worth splitting. */ body.home .kajo-home-hero-slide[data-slide="1"] { background-color: #161c11 !important; } body.home .kajo-home-hero-slide[data-slide="2"] { background-color: #78a8d4 !important; } body.home .kajo-home-hero-slide[data-slide="3"] { background-color: #97a274 !important; } body.home.rtl .kajo-home-hero-slide[data-slide="3"], [dir="rtl"] body.home .kajo-home-hero-slide[data-slide="3"] , body.kajo-rtl.home .kajo-home-hero-slide[data-slide="3"]{ background-color: #86945e !important; } body.home .kajo-home-hero-slide[data-slide="1"] { background-image: url("../images/home-banners/hero-watergel-en-mobile.webp") !important; } body.home .kajo-home-hero-slide[data-slide="2"] { background-image: url("../images/home-banners/hero-olaplex-en-mobile.webp") !important; } body.home .kajo-home-hero-slide[data-slide="3"] { background-image: url("../images/home-banners/hero-kids-en-mobile.webp") !important; } body.home.rtl .kajo-home-hero-panel, body.rtl.home .kajo-home-hero-panel { background-image: none !important; } body.home.rtl .kajo-home-hero-slide[data-slide="1"], [dir="rtl"] body.home .kajo-home-hero-slide[data-slide="1"] , body.kajo-rtl.home .kajo-home-hero-slide[data-slide="1"]{ background-image: url("../images/home-banners/hero-watergel-ar-mobile.webp") !important; } body.home.rtl .kajo-home-hero-slide[data-slide="2"], [dir="rtl"] body.home .kajo-home-hero-slide[data-slide="2"] , body.kajo-rtl.home .kajo-home-hero-slide[data-slide="2"]{ background-image: url("../images/home-banners/hero-olaplex-ar-mobile.webp") !important; } body.home.rtl .kajo-home-hero-slide[data-slide="3"], [dir="rtl"] body.home .kajo-home-hero-slide[data-slide="3"] , body.kajo-rtl.home .kajo-home-hero-slide[data-slide="3"]{ background-image: url("../images/home-banners/hero-kids-ar-mobile.webp") !important; } /* How far the announcement bar has pushed the fixed header down: the bar's own height when one is published, nothing when it is switched off. The bar declares `--kajo-topbar-offset` on `:root` unconditionally, so the variable alone cannot answer "is there a bar?" - the body class can, and the bar is switchable from the dashboard, so this has to be asked rather than assumed. */ body.home { --kajo-hero-header-shift: 0px; } body.home.kajo-has-topbar { --kajo-hero-header-shift: var(--kajo-topbar-offset, 0px); } /* Start the hero BELOW the fixed header instead of underneath it. Each slide's artwork reserves a clear band across the top for the copy to sit in - measured on the source files, 330px of 1402 (23.5%) on the water gel slide, 354px (25.2%) on its English twin, 611px (43.6%) on kids. At 390px wide that band renders about 115px tall. Running the image under the header threw that away. The header ends at 94px, and with the image centre-cropped the band ended at 89.6px - every usable pixel of it sat behind the header, so the copy had nowhere to go but on top of the artwork's own annotation labels. Pushing the image down instead was tried and rejected: clearing the header that way crops ~420px off the bottom of the source and cuts the pedestal and the base of the bottle. Moving the hero down costs one thing, and it is worth naming: the header is frosted glass, rgba(251,247,239,.82) over blur(18px), so at scroll position zero it now blurs the page background rather than the top of the artwork. From the first scroll onwards the artwork is behind it again. */ body.home .kajo-home-hero-copy { width: min(70vw, 270px) !important; min-height: 100% !important; margin-inline-start: 20px !important; margin-inline-end: auto !important; /* The hero now starts below the header, so this is breathing room inside the artwork's clear band, not header clearance. Kept tight because the band is finite: on the water gel slide the Arabic artwork places its first annotation ~115px into the image, and the copy block has to finish above it. */ padding-block-start: 8px !important; padding-block-end: 30px !important; text-align: left !important; align-items: flex-start !important; justify-content: flex-start !important; } body.home.rtl .kajo-home-hero-copy, body.rtl.home .kajo-home-hero-copy { margin-inline-start: 24px !important; margin-inline-end: auto !important; text-align: right !important; align-items: flex-start !important; justify-content: flex-start !important; } body.home .kajo-home-hero-kicker { display: none !important; } body.home .kajo-home-hero h1, body.home .kajo-home-hero .kajo-home-hero-heading { max-width: 210px !important; font-size: clamp(21px, 5.9vw, 27px) !important; line-height: .98 !important; } body.home .kajo-home-hero-text { display: none !important; } /* 9px read as crowding; 18px was comfortable but, combined with a three-line heading, pushed the button row onto the artwork's first annotation on the water gel slide. 12px clears it and still reads as a deliberate gap rather than a collision. */ body.home .kajo-home-hero-actions { width: min(100%, 252px) !important; margin-top: 12px !important; gap: 8px !important; } /* The inline end reserved 42px for a 24px arrow, leaving roughly 52px for the label. English wrapped to two lines inside that; Arabic words are longer and wrapped to three, so the Arabic button pair stood half as tall again as the English one at the same breakpoint. The reserve is now the arrow's own footprint plus the 8px it is already inset by - the arrow itself does not move. */ body.home .kajo-home-hero-button { flex: 1 1 100px !important; min-height: 38px !important; padding-inline: 12px 38px !important; font-size: 10px !important; } body.home .kajo-home-hero-button:before { inset-inline-end: 8px !important; width: 24px !important; height: 24px !important; } body.home .kajo-home-hero-button:after { inset-inline-end: 15px !important; font-size: 13px !important; } body.home .kajo-home-hero-button:hover:before, body.home .kajo-home-hero-button:focus-visible:before, body.home .kajo-home-hero-button:active:before { inset-inline-end: 8px !important; width: 24px !important; height: 24px !important; background: #8fa77f !important; } body.home .kajo-home-hero-proof, body.home .kajo-home-hero-product, body.home .kajo-home-hero-badge { display: none !important; } body.home .kajo-home-hero-controls { inset-inline-start: 20px !important; inset-block-end: 22px !important; gap: 10px !important; } body.home .kajo-home-hero-controls button { width: 40px !important; height: 40px !important; } body.home .kajo-home-hero-controls span { width: 8px !important; height: 8px !important; } } /* Hero navigation dock The artwork already provides the visual composition and open copy space. Keep the controls independent from the copy column and give them a small white cut-out at the lower edge, so they remain readable on every slide. */ body.home .kajo-home-hero-panel { overflow: visible !important; } body.home .kajo-home-hero-panel:after { content: "" !important; position: absolute !important; display: block !important; z-index: 5 !important; inset-block-end: -1px !important; left: 50% !important; width: clamp(220px, 20vw, 320px) !important; height: clamp(62px, 6vw, 84px) !important; border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important; background: #fffdfa !important; box-shadow: 0 -10px 28px rgba(31, 47, 40, .08) !important; transform: translateX(-50%) !important; pointer-events: none !important; } body.home .kajo-home-hero-controls { left: 50% !important; inset-block-end: clamp(12px, 1.5vw, 20px) !important; z-index: 7 !important; gap: clamp(10px, 1.3vw, 18px) !important; transform: translateX(-50%) !important; } @media (max-width: 767px) { body.home .kajo-home-hero-panel:after { width: 224px !important; height: 64px !important; } body.home .kajo-home-hero-controls { left: 50% !important; inset-block-end: 12px !important; gap: 10px !important; transform: translateX(-50%) !important; } } /* Rounded hero card treatment. The banner artwork stays full-bleed inside the card, while the page keeps a quiet white margin around the composition. */ body.home .kajo-home-hero { width: min(1500px, calc(100vw - 64px)) !important; max-width: 1500px !important; margin-inline: auto !important; padding: 0 !important; background: #fffdfa !important; } body.home .kajo-home-hero-panel { width: 100% !important; max-width: none !important; border: 0 !important; border-radius: 34px !important; overflow: visible !important; box-shadow: 0 22px 54px rgba(31, 47, 40, .12) !important; } body.home .kajo-home-hero-slides, body.home .kajo-home-hero-slide { border-radius: 34px !important; overflow: hidden !important; } body.home .kajo-home-hero-panel:after { width: clamp(260px, 23vw, 360px) !important; height: clamp(72px, 7vw, 96px) !important; border-radius: 52% 52% 0 0 / 100% 100% 0 0 !important; background: #fffdfa !important; box-shadow: 0 -3px 18px rgba(31, 47, 40, .05) !important; } body.home .kajo-home-hero-controls { inset-block-end: clamp(14px, 1.8vw, 22px) !important; } body.home .kajo-home-hero-controls button { width: 52px !important; height: 52px !important; background: rgba(82, 105, 72, .92) !important; border-color: rgba(255, 255, 255, .72) !important; box-shadow: 0 10px 24px rgba(31, 47, 40, .18) !important; } body.home .kajo-home-hero-controls button:hover, body.home .kajo-home-hero-controls button:focus-visible { background: #f58634 !important; } @media (max-width: 767px) { body.home .kajo-home-hero { width: calc(100vw - 16px) !important; max-width: none !important; margin-inline: 8px !important; } body.home .kajo-home-hero-panel, body.home .kajo-home-hero-slides, body.home .kajo-home-hero-slide { border-radius: 26px !important; } body.home .kajo-home-hero-panel:after { width: 224px !important; height: 64px !important; } body.home .kajo-home-hero-controls button { width: 42px !important; height: 42px !important; } } /* Desktop remains the existing full-width hero. The rounded card and notch treatment above are intentionally mobile-only. */ @media (min-width: 768px) { body.home .kajo-home-hero { width: 100vw !important; max-width: 100vw !important; margin-inline: calc(50% - 50vw) !important; padding: 0 !important; } body.home .kajo-home-hero-panel, body.home .kajo-home-hero-slides, body.home .kajo-home-hero-slide { width: 100vw !important; max-width: 100vw !important; border-radius: 0 !important; box-shadow: none !important; } body.home .kajo-home-hero-panel:after { display: none !important; } body.home .kajo-home-hero-controls { inset-inline-start: clamp(52px, 6vw, 116px) !important; inset-block-end: clamp(20px, 2.4vw, 44px) !important; transform: none !important; } body.home .kajo-home-hero-controls button { width: 46px !important; height: 46px !important; background: rgba(255, 255, 255, .18) !important; border-color: rgba(255, 255, 255, .48) !important; box-shadow: 0 14px 32px rgba(0, 0, 0, .14) !important; } } /* Mobile-only full-width hero. The image itself is masked with a shallow bottom-center recess; no white overlay is placed over the artwork. */ @media (max-width: 767px) { body.home .kajo-home-hero { width: 100vw !important; max-width: 100vw !important; margin-inline: calc(50% - 50vw) !important; /* Woodmart gives every flow-layout child `margin-block: 0 var(--wd-block-spacing)`, 20px here. The hero does not need it: it already carries bottom padding for the overhanging controls, and the section below opens with 24px of its own `padding-block`. Measured, the three stacked to 58px between the card's bottom edge and the "Shop by Categories" heading, 44px of it empty. Dropping this leaves the section's own 24px to do the job. */ margin-block-end: 0 !important; /* Top value starts the hero BELOW the fixed header instead of under it, which is what frees the artwork's clear band for the copy - see the note on `.kajo-home-hero-copy` above. It is set here rather than in a rule of its own because this declaration is the one that wins: it is the last `padding` shorthand to match at this breakpoint, so a separate `padding-block-start` earlier in the file was simply overwritten by the `0` in this shorthand. Margin cannot be used for this: the parent theme forces `body.home .main-page-wrapper > :first-child { margin-top: 0 }` with `!important` below 480px, and the hero is that first child. */ /* No bottom padding. The 50px originally here was room for a control row that hung below the panel edge; the row has lived inside the platform since the notch was rebuilt, so every pixel of it was an empty white band. Measured: 6px below the controls inside the platform, then 16px of this padding, then 20px to the next section - 42px of white under a 42px control row. */ padding: calc(62px + var(--kajo-hero-header-shift, 0px)) 0 14px !important; background: #fff !important; overflow: visible !important; } body.home .kajo-home-hero-panel { width: 100vw !important; max-width: 100vw !important; margin: 0 !important; background: #fff !important; border-radius: 0 0 30px 30px !important; box-shadow: none !important; overflow: visible !important; } body.home .kajo-home-hero-copy { position: static !important; } body.home .kajo-home-hero-copy-slides { position: relative !important; z-index: 3 !important; } body.home .kajo-home-hero-slides, body.home .kajo-home-hero-slide { width: 100vw !important; max-width: 100vw !important; border-radius: 0 0 30px 30px !important; overflow: hidden !important; } /* ---- the bottom platform --------------------------------------------- Measured off the reference rather than derived: the white platform's right boundary leaves its top edge HORIZONTALLY, sweeps down and to the right, and meets the card's bottom edge PERPENDICULARLY. So the platform is wider at the bottom than at the top, and the junction with the bottom edge is a clean right angle. That is one quarter-circle, centred on the card's bottom edge at the end of the platform's top edge, with radius equal to the platform's height: centre (w, bottom) radius h arc (w, bottom - h) -> (w + h, bottom) Radius MUST equal the height. That is what puts the disc's topmost point exactly on the platform's top edge, so the arc leaves it tangentially and there is no crease. The previous attempt used two arcs - a rounded top corner plus a fillet at the base - which made the white NARROWER at the bottom. That is what drew the pointed tail: the white receded to a point as it approached the bottom edge. Satisfying `r + f == h` made that S smooth, but smooth was never the problem; the curve was running the wrong way. There is no second arc here and no fillet. Three mask layers, composited with the default `add`, each painting the artwork it owns: 1 everything above the platform 2 the full-depth band beyond the platform's widest point 3 the quarter-circle corner (artwork OUTSIDE the arc) Offsets are pure lengths from one edge - a percentage in `mask-position` resolves against (container - layer), not the container, which silently misplaces small boxes. */ body.home .kajo-home-hero-slides { /* The transition is an S, not an arc. It leaves the platform's top edge horizontally AND arrives at the card's bottom edge horizontally - two horizontal tangents, which no single arc can give: an arc starting horizontal must finish vertical, and that is what made the join read as sharp. A cubic Bezier with both control points on the midline is the standard ease-in-out S and does exactly this. It is carried by an inline SVG because a gradient cannot describe a Bezier. `preserveAspectRatio='none'` lets the 100x100 viewBox stretch to whatever `a` x `h` below are set to, so the shape stays editable from those two numbers. */ --kajo-notch-w: 160px; /* Depth of the dip, NOT the height of a box that has to contain the controls. The buttons straddle the card's bottom edge: their upper part sits in the dip, their lower part in the page white below the card. Both are the same white, so it reads as one platform, and the dip only has to clear the top of the buttons - 30px, not 52px. Trying to enclose the whole 42px row forced a 52px drop, which is what made the boundary fall too far. */ --kajo-notch-h: 30px; /* Horizontal run of the curve. A CIRCLE forces this to equal the height, which is why the scoop read as a broad diagonal: at 390px a 54px run is 13.8% of the card, against 6.6% in the reference. An ELLIPSE keeps both tangents - horizontal where it leaves the top edge, vertical where it meets the bottom - while letting the run be far shorter than the height. */ --kajo-notch-a: 40px; --kajo-notch-span: calc(var(--kajo-notch-w) + var(--kajo-notch-a)); --kajo-notch-mask: linear-gradient(#000, #000), linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C50 0 50 100 100 100 L100 0 Z' fill='black'/%3E%3C/svg%3E"); --kajo-notch-mask-size: 100% calc(100% - var(--kajo-notch-h)), calc(100% - var(--kajo-notch-span)) var(--kajo-notch-h), var(--kajo-notch-a) var(--kajo-notch-h); --kajo-notch-mask-position: left top, right bottom, left var(--kajo-notch-w) bottom 0; background: transparent !important; -webkit-mask-image: var(--kajo-notch-mask) !important; mask-image: var(--kajo-notch-mask) !important; -webkit-mask-size: var(--kajo-notch-mask-size) !important; mask-size: var(--kajo-notch-mask-size) !important; -webkit-mask-position: var(--kajo-notch-mask-position) !important; mask-position: var(--kajo-notch-mask-position) !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; } /* Arabic mirrors it: the platform moves to the right corner, so the band sits on the left and the arc's centre moves to the other side. */ body.home.rtl .kajo-home-hero-slides, [dir="rtl"] body.home .kajo-home-hero-slides , body.kajo-rtl.home .kajo-home-hero-slides{ --kajo-notch-mask: linear-gradient(#000, #000), linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0 C50 0 50 100 0 100 L0 0 Z' fill='black'/%3E%3C/svg%3E"); --kajo-notch-mask-position: left top, left bottom, right var(--kajo-notch-w) bottom 0; } body.home .kajo-home-hero-panel:after { content: none !important; display: none !important; } body.home .kajo-home-hero-controls { /* Seated in the corner opening: 18px in from the panel's inline-start edge, and a 42px row with 8px clear above and below in the 58px depth. It used to be centred and to hang 6px past the panel edge, which was half of why the buttons read as spilling out. */ inset-inline-start: 16px !important; /* Negative: the row hangs 20px below the card's bottom edge, so the boundary crosses the buttons rather than enclosing them. 8px of the dip is left clear above them. */ inset-block-end: -14px !important; z-index: 9 !important; display: flex !important; /* `auto` here is shrink-to-fit, which is what let RTL measure this row 9px short and squeeze the dots. Same reasoning as the base rule. */ width: max-content !important; min-height: 0 !important; align-items: center !important; justify-content: center !important; /* Row width drives the whole platform. Together with the smaller arrows and dots below this brings it to 130px, a third of a 390px card. */ gap: 7px !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; } /* Scaled down for mobile: 42px arrows made the row 156px, 40% of a 390px card, which is what kept the platform oversized. Same colours, same shapes, same behaviour - only the dimensions change. */ body.home .kajo-home-hero-controls button { width: 34px !important; height: 34px !important; /* `width`/`height` alone were not enough: an earlier rule sets `min-height: 42px` and `padding: 5px 20px`, and a min- always beats a plain height. That is why the row stayed 42px tall while the font size from this same rule did change. */ min-width: 34px !important; min-height: 34px !important; padding: 0 !important; background: #647d58 !important; border: 1px solid rgba(255, 255, 255, .86) !important; color: #fffdf8 !important; box-shadow: 0 10px 20px rgba(31, 47, 40, .18) !important; font-size: 15px !important; line-height: 1 !important; } body.home .kajo-home-hero-controls span { width: 7px !important; height: 7px !important; background: rgba(127, 151, 111, .45) !important; } body.home .kajo-home-hero-controls span.is-active { width: 20px !important; height: 7px !important; background: #f47d2d !important; } } /* =========================================================================== RTL: directional arrows --------------------------------------------------------------------------- Audited rather than assumed. On the Arabic homepage these rendered with the SAME transform as English, so every one of them pointed the wrong way: .kajo-home-hero-button:after glyph -> .kajo-home-picks-arrow.is-prev/next glyphs <- and -> .kajo-routine__flow-arrow .kajo-home-hero-controls button glyphs ‹ › DO NOT FLIP That last one is the exception: U+2039 and U+203A are Bidi_Mirrored in Unicode, so the browser mirrors them itself in an RTL context. U+2190 and U+2192 are not. Flipping the mirrored pair in CSS as well turned them back inwards - the inward-pointing carousel arrows seen on the Arabic homepage. Verified against unicodedata.mirrored(). An arrow is a direction, so unlike centring it genuinely has to flip. The shapes carrying these glyphs are symmetric - circles and uniform pills with no horizontal offset in their shadows - so mirroring the whole element is safe and avoids wrapping the glyph in extra markup. `scale` rather than `transform: scaleX(-1)`: `scale` is an independent property applied BEFORE `transform`, so it composes with the vertical centring translate each of these already carries instead of overwriting it. ======================================================================== */ /* The hero carousel buttons are deliberately NOT in this list. Their glyphs are U+2039 and U+203A, which Unicode marks Bidi_Mirrored. The browser already draws them mirrored inside an RTL context, so they come out pointing outwards on their own once the flex row reverses. Mirroring them again in CSS flipped them a second time and was what made both arrows point inwards on the Arabic homepage, on desktop and on mobile alike. The glyphs that DO need this rule are the ones Unicode does not mirror: U+2190 and U+2192, used by .kajo-home-picks-arrow and by the :after on .kajo-home-hero-button. Checked with unicodedata.mirrored(), not assumed. */ html[dir="rtl"] body.home .kajo-home-hero-button:after , body.kajo-rtl.home .kajo-home-hero-button:after{ scale: -1 1; }