.elementor-97 .elementor-element.elementor-element-1f5434d{--display:flex;--min-height:350px;--justify-content:center;--overlay-opacity:0.5;}.elementor-97 .elementor-element.elementor-element-1f5434d:not(.elementor-motion-effects-element-type-background), .elementor-97 .elementor-element.elementor-element-1f5434d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://zeisaspaseminyakbali.com/wp-content/uploads/2026/10/aesthatic-photo-300x169-1.jpg");background-position:center center;}.elementor-97 .elementor-element.elementor-element-1f5434d::before, .elementor-97 .elementor-element.elementor-element-1f5434d > .elementor-background-video-container::before, .elementor-97 .elementor-element.elementor-element-1f5434d > .e-con-inner > .elementor-background-video-container::before, .elementor-97 .elementor-element.elementor-element-1f5434d > .elementor-background-slideshow::before, .elementor-97 .elementor-element.elementor-element-1f5434d > .e-con-inner > .elementor-background-slideshow::before, .elementor-97 .elementor-element.elementor-element-1f5434d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:#000000;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-97 .elementor-element.elementor-element-3e3e879{text-align:start;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-97 .elementor-element.elementor-element-39ed3ea .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;}.elementor-97 .elementor-element.elementor-element-39ed3ea{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-97 .elementor-element.elementor-element-c481833{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;color:#FFFFFF;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-97 .elementor-element.elementor-element-bead175{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-97 .elementor-element.elementor-element-54a603a{--display:flex;}.elementor-97 .elementor-element.elementor-element-4197251{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-97 .elementor-element.elementor-element-975bf98{--display:flex;}.elementor-97 .elementor-element.elementor-element-bf0497b{--display:flex;}.elementor-97 .elementor-element.elementor-element-0c4d2b3{font-family:"DM Sans", Sans-serif;font-weight:400;}.elementor-97 .elementor-element.elementor-element-37a6ad9{--display:flex;}.elementor-widget-gallery .elementor-gallery-item__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-gallery .elementor-gallery-item__description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-gallery{--galleries-title-color-normal:var( --e-global-color-primary );--galleries-title-color-hover:var( --e-global-color-secondary );--galleries-pointer-bg-color-hover:var( --e-global-color-accent );--gallery-title-color-active:var( --e-global-color-secondary );--galleries-pointer-bg-color-active:var( --e-global-color-accent );}.elementor-widget-gallery .elementor-gallery-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-97 .elementor-element.elementor-element-09d1de0{--image-transition-duration:800ms;--overlay-transition-duration:800ms;--content-text-align:center;--content-padding:20px;--content-transition-duration:800ms;--content-transition-delay:800ms;}.elementor-97 .elementor-element.elementor-element-09d1de0 .e-gallery-item:hover .elementor-gallery-item__overlay, .elementor-97 .elementor-element.elementor-element-09d1de0 .e-gallery-item:focus .elementor-gallery-item__overlay{background-color:rgba(0,0,0,0.5);}.elementor-97 .elementor-element.elementor-element-ed505a2{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-97 .elementor-element.elementor-element-bfd5f5c{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-97 .elementor-element.elementor-element-1970f03{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-button .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );background-color:var( --e-global-color-accent );}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-1f5434d */@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=El+Messiri:wght@500;600;700&display=swap'); /* ========================================================= ZEISHA SPA SEMINYAK GALLERY HERO FULL CUSTOM CSS EYEBROW : DM Sans 24px MAIN TITLE : El Messiri 40px DESCRIPTION : DM Sans 16px WATERMARK : GALLERY ========================================================= */ /* ========================================================= 01. MAIN CONTAINER ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d{ /* COLOR PALETTE */ --zs-primary:#2F5142; --zs-dark:#1D3028; --zs-ivory:#F5F1E8; --zs-sage:#98A995; --zs-beige:#DDD3C3; --zs-gold:#B79B6C; --zs-text:#262A27; --zs-light:#FAF8F3; /* TYPOGRAPHY */ --zs-eyebrow-size:24px; --zs-title-size:40px; --zs-description-size:16px; /* HERO */ --zs-hero-height:350px; --zs-content-width:760px; --zs-padding-left: clamp(30px,5vw,64px); --zs-padding-right: clamp(30px,5vw,64px); position: relative !important; isolation: isolate !important; overflow: hidden !important; width: 100% !important; height: var(--zs-hero-height) !important; min-height: var(--zs-hero-height) !important; max-height: var(--zs-hero-height) !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 0 !important; padding: 34px var(--zs-padding-right) 34px var(--zs-padding-left) !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; background-color: var(--zs-dark) !important; } /* ========================================================= 02. DARK BACKGROUND OVERLAY ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d::before{ content:""; position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; background: linear-gradient( 90deg, rgba(20,33,27,.90) 0%, rgba(24,40,33,.84) 24%, rgba(28,47,38,.73) 43%, rgba(29,48,40,.54) 59%, rgba(22,36,30,.34) 76%, rgba(14,23,19,.43) 100% ); } /* ========================================================= 03. GOLD AMBIENT LIGHT ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d::after{ content:""; position:absolute; z-index:1; left:-180px; top:-220px; width:600px; height:600px; border-radius:50%; pointer-events:none; background: radial-gradient( circle, rgba(183,155,108,.14) 0%, rgba(183,155,108,.06) 38%, rgba(183,155,108,0) 70% ); animation: zsGalleryGlow 8s ease-in-out infinite; } /* ========================================================= 04. GOLD GLOW ANIMATION ========================================================= */ @keyframes zsGalleryGlow{ 0%, 100%{ transform: translate3d(0,0,0) scale(1); } 50%{ transform: translate3d(20px,12px,0) scale(1.05); } } /* ========================================================= 05. CONTENT ABOVE OVERLAY ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d > .elementor-element, .elementor-97 .elementor-element.elementor-element-1f5434d > .e-con-inner, .elementor-97 .elementor-element.elementor-element-1f5434d .e-con-inner > .elementor-element{ position: relative !important; z-index: 5 !important; } /* ========================================================= 06. CONTENT WIDTH ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-eyebrow, .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-title, .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-desc{ width: 100%; max-width: var(--zs-content-width); } /* ========================================================= 07. EYEBROW DM SANS — 24PX ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-eyebrow .elementor-heading-title{ display: flex; align-items: center; gap: 16px; font-family: "DM Sans", sans-serif !important; font-size: 24px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 2.8px !important; text-transform: uppercase !important; color: var(--zs-gold) !important; text-shadow: 0 4px 16px rgba(0,0,0,.14); } /* ========================================================= 08. GOLD LINE AFTER EYEBROW ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-eyebrow .elementor-heading-title::after{ content:""; display:block; flex: 0 0 auto; width: 56px; height: 1px; background: linear-gradient( 90deg, var(--zs-gold), rgba(183,155,108,.15) ); opacity: .95; transform-origin: left center; animation: zsGalleryEyebrowLine 1s cubic-bezier(.16,1,.3,1) both; } /* ========================================================= 09. EYEBROW LINE ENTRANCE ========================================================= */ @keyframes zsGalleryEyebrowLine{ 0%{ transform: scaleX(0); opacity: 0; } 100%{ transform: scaleX(1); opacity: .95; } } /* ========================================================= 10. MAIN TITLE CONTAINER ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-title{ position: relative !important; isolation: isolate; z-index: 5; } /* ========================================================= 11. MAIN HEADING EL MESSIRI — 40PX ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-title .elementor-heading-title{ position: relative; z-index: 2; max-width: 680px; font-family: "El Messiri", serif !important; font-size: 40px !important; font-weight: 600 !important; line-height: 1.08 !important; letter-spacing: -.3px !important; color: var(--zs-light) !important; text-shadow: 0 3px 18px rgba(0,0,0,.16); transition: transform .5s cubic-bezier(.16,1,.3,1), text-shadow .4s ease; } /* ========================================================= 12. WATERMARK — GALLERY ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-title::before{ content: "GALLERY"; position: absolute; z-index: 0; left: -16px; top: 48%; transform: translateY(-50%); pointer-events: none; user-select: none; white-space: nowrap; font-family: "El Messiri", serif; font-size: 112px; font-weight: 600; line-height: .8; letter-spacing: 4px; text-transform: uppercase; color: rgba(250,248,243,.032); -webkit-text-stroke: 1px rgba(250,248,243,.045); animation: zsGalleryWatermark 8s ease-in-out infinite; } /* ========================================================= 13. WATERMARK ANIMATION ========================================================= */ @keyframes zsGalleryWatermark{ 0%, 100%{ transform: translateY(-50%) translateX(0); } 50%{ transform: translateY(-50%) translateX(7px); } } /* ========================================================= 14. DESCRIPTION DM SANS — 16PX ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-desc, .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-desc p, .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-desc span{ max-width: 760px; font-family: "DM Sans", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.7 !important; color: rgba(250,248,243,.88) !important; } /* ========================================================= 15. REMOVE DEFAULT PARAGRAPH MARGINS ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-desc .elementor-widget-container > p:first-child{ margin-top: 0 !important; } .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-desc .elementor-widget-container > p:last-child{ margin-bottom: 0 !important; } /* ========================================================= 16. BUTTON WRAPPER ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-btn{ width: auto !important; max-width: none !important; position: relative; z-index: 6; } /* ========================================================= 17. BUTTON ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-btn .elementor-button{ position: relative; min-height: 48px !important; padding: 12px 26px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; overflow: hidden; isolation: isolate; border: 1px solid rgba(183,155,108,.75) !important; border-radius: 2px !important; background: var(--zs-primary) !important; color: #FFFFFF !important; font-family: "DM Sans", sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: .3px !important; box-shadow: 0 10px 25px rgba(0,0,0,.13) !important; transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .4s ease !important; } /* ========================================================= 18. BUTTON GOLD REVEAL ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-btn .elementor-button::before{ content:""; position:absolute; inset:0; background: var(--zs-gold); transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.16,1,.3,1); z-index: 0; } /* ========================================================= 19. BUTTON SHIMMER ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-btn .elementor-button::after{ content:""; position:absolute; top: -80%; left: -70px; width: 42px; height: 260%; transform: rotate(14deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0), transparent ); z-index: 1; transition: left .8s cubic-bezier(.16,1,.3,1); } /* ========================================================= 20. BUTTON CONTENT ABOVE EFFECT ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-btn .elementor-button-content-wrapper{ position: relative; z-index: 3; } /* ========================================================= 21. BUTTON TEXT ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-btn .elementor-button-text{ color: #FFFFFF !important; } /* ========================================================= 22. BUTTON ICON ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-btn .elementor-button-icon, .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-btn .elementor-button-icon i, .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-btn .elementor-button-icon svg{ color: #FFFFFF !important; fill: #FFFFFF !important; transition: transform .4s cubic-bezier(.16,1,.3,1); } /* ========================================================= 23. BUTTON HOVER ========================================================= */ @media(hover:hover) and (pointer:fine){ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-btn .elementor-button:hover{ transform: translateY(-2px); border-color: var(--zs-gold) !important; box-shadow: 0 14px 30px rgba(0,0,0,.18) !important; } .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-btn .elementor-button:hover::before{ transform: scaleX(1); } .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-btn .elementor-button:hover::after{ left: 125%; } .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-btn .elementor-button:hover .elementor-button-icon{ transform: translateX(3px); } } /* ========================================================= 24. MAIN TITLE HOVER ========================================================= */ @media(hover:hover) and (pointer:fine){ .elementor-97 .elementor-element.elementor-element-1f5434d:hover .zs-contact-title .elementor-heading-title{ transform: translateX(3px); text-shadow: 0 5px 22px rgba(0,0,0,.22); } } /* ========================================================= 25. CONTENT ENTRANCE ANIMATION ========================================================= */ @keyframes zsGalleryFadeUp{ 0%{ opacity: 0; transform: translateY(16px); filter: blur(3px); } 100%{ opacity: 1; transform: translateY(0); filter: blur(0); } } /* ========================================================= 26. STAGGERED ENTRANCE ========================================================= */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-eyebrow{ animation: zsGalleryFadeUp .65s .05s cubic-bezier(.16,1,.3,1) both; } .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-title{ animation: zsGalleryFadeUp .72s .12s cubic-bezier(.16,1,.3,1) both; } .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-desc{ animation: zsGalleryFadeUp .72s .20s cubic-bezier(.16,1,.3,1) both; } .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-btn{ animation: zsGalleryFadeUp .72s .28s cubic-bezier(.16,1,.3,1) both; } /* ========================================================= 27. TABLET ========================================================= */ @media(max-width:1024px){ .elementor-97 .elementor-element.elementor-element-1f5434d{ --zs-content-width: 620px; --zs-padding-left: 38px; --zs-padding-right: 32px; height: 350px !important; min-height: 350px !important; max-height: 350px !important; } /* KEEP TYPOGRAPHY */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-eyebrow .elementor-heading-title{ font-size: 24px !important; } .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-title .elementor-heading-title{ font-size: 40px !important; } .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-desc, .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-desc p, .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-desc span{ font-size: 16px !important; } /* GALLERY WATERMARK */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-title::before{ left: -10px; font-size: 88px; letter-spacing: 3px; } } /* ========================================================= 28. MOBILE ========================================================= */ @media(max-width:767px){ .elementor-97 .elementor-element.elementor-element-1f5434d{ --zs-content-width: 92%; --zs-padding-left: 20px; --zs-padding-right: 20px; height: 350px !important; min-height: 350px !important; max-height: 350px !important; padding: 24px var(--zs-padding-right) 24px var(--zs-padding-left) !important; background-position: 60% center !important; } .elementor-97 .elementor-element.elementor-element-1f5434d::before{ background: linear-gradient( 90deg, rgba(16,28,23,.92) 0%, rgba(20,35,29,.86) 38%, rgba(24,42,34,.71) 64%, rgba(18,30,25,.52) 82%, rgba(13,22,18,.48) 100% ); } /* KEEP DM SANS 24PX */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-eyebrow .elementor-heading-title{ font-family: "DM Sans", sans-serif !important; font-size: 24px !important; line-height: 1.2 !important; letter-spacing: 2px !important; } .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-eyebrow .elementor-heading-title::after{ width: 34px; } /* KEEP EL MESSIRI 40PX */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-title .elementor-heading-title{ font-family: "El Messiri", serif !important; font-size: 40px !important; line-height: 1.08 !important; } /* KEEP DM SANS 16PX */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-desc, .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-desc p, .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-desc span{ font-family: "DM Sans", sans-serif !important; font-size: 16px !important; line-height: 1.7 !important; } /* GALLERY WATERMARK */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-title::before{ left: -5px; top: 50%; font-size: 62px; letter-spacing: 2px; color: rgba(250,248,243,.03); } /* BUTTON */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-btn .elementor-button{ min-height: 43px !important; padding: 10px 20px !important; font-size: 13px !important; } } /* ========================================================= 29. SMALL MOBILE ========================================================= */ @media(max-width:420px){ .elementor-97 .elementor-element.elementor-element-1f5434d{ --zs-content-width: 96%; --zs-padding-left: 17px; --zs-padding-right: 17px; } /* KEEP TITLE 40PX */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-title .elementor-heading-title{ font-size: 40px !important; } /* GALLERY WATERMARK */ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-title::before{ left: -3px; font-size: 52px; letter-spacing: 1.5px; } } /* ========================================================= 30. EXTRA SMALL MOBILE ========================================================= */ @media(max-width:360px){ .elementor-97 .elementor-element.elementor-element-1f5434d .zs-contact-title::before{ left: -2px; font-size: 46px; letter-spacing: 1px; } } /* ========================================================= 31. REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .elementor-97 .elementor-element.elementor-element-1f5434d, .elementor-97 .elementor-element.elementor-element-1f5434d *, .elementor-97 .elementor-element.elementor-element-1f5434d::before, .elementor-97 .elementor-element.elementor-element-1f5434d::after, .elementor-97 .elementor-element.elementor-element-1f5434d *::before, .elementor-97 .elementor-element.elementor-element-1f5434d *::after{ animation: none !important; transition: none !important; transform: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bead175 *//* ========================================================= ZEISHA SPA EDITORIAL MOSAIC GALLERY WARM IVORY HEADING : EL MESSIRI BODY : DM SANS DESCRIPTION : 16PX ALL DEVICES ========================================================= */ /* ========================================================= GOOGLE FONTS ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=El+Messiri:wght@400;500;600&display=swap'); /* ========================================================= COLOR SYSTEM ========================================================= */ .zeisha-gallery{ --zg-deep:#1D3028; --zg-green:#2F5142; --zg-sage:#98A995; --zg-ivory:#F5F1E8; --zg-beige:#DDD3C3; --zg-gold:#B79B6C; --zg-text:#46504A; --zg-white:#FFFFFF; } /* ========================================================= MAIN SECTION ========================================================= */ .zeisha-gallery{ position:relative; width:100%; overflow:hidden; isolation:isolate; background: var(--zg-ivory) !important; color: var(--zg-text); font-family: "DM Sans", Arial, sans-serif !important; } /* ========================================================= BOX MODEL ========================================================= */ .zeisha-gallery *, .zeisha-gallery *::before, .zeisha-gallery *::after{ box-sizing:border-box; } /* ========================================================= VERY SUBTLE BACKGROUND WORD ========================================================= */ .zeisha-gallery::before{ content:"GALLERY"; position:absolute; z-index:0; top:-35px; right:-15px; font-family: "El Messiri", Georgia, serif; font-size: clamp(110px,13vw,220px); font-weight:400; line-height:1; letter-spacing:-.04em; white-space:nowrap; color: rgba(29,48,40,.025); pointer-events:none; } /* ========================================================= SMALL GOLD GUIDE ========================================================= */ .zeisha-gallery::after{ content:""; position:absolute; z-index:1; left: clamp(25px,5vw,82px); top:0; width:1px; height: clamp(48px,5vw,68px); background: linear-gradient( to bottom, rgba(183,155,108,.85), transparent ); pointer-events:none; } /* ========================================================= SHELL ========================================================= */ .zeisha-gallery__shell{ position:relative; z-index:2; width: min(100%,1540px); margin: 0 auto !important; padding: clamp(68px,6vw,95px) clamp(28px,5vw,76px) clamp(72px,6vw,100px) !important; } /* ========================================================= HEADER ========================================================= */ .zeisha-gallery__header{ display:grid !important; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); align-items:end; gap: clamp(40px,6vw,90px); margin: 0 0 clamp(38px,4vw,56px) 0 !important; } /* ========================================================= LEFT HEADING ========================================================= */ .zeisha-gallery__heading{ min-width:0; } /* ========================================================= EYEBROW ========================================================= */ .zeisha-gallery__eyebrow{ position:relative; margin: 0 0 16px 0 !important; padding-top:13px; } /* GOLD LINE */ .zeisha-gallery__eyebrow::before{ content:""; position:absolute; top:0; left:0; width:40px; height:1px; background: var(--zg-gold); transition: width .55s cubic-bezier(.19,1,.22,1); } .zeisha-gallery__header:hover .zeisha-gallery__eyebrow::before{ width:65px; } /* EYEBROW FONT */ .zeisha-gallery__eyebrow .elementor-heading-title{ margin:0 !important; padding:0 !important; font-family: "DM Sans", Arial, sans-serif !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: var(--zg-green) !important; } /* ========================================================= MAIN TITLE ========================================================= */ .zeisha-gallery__title{ width: min(100%,680px); margin: 0 !important; } .zeisha-gallery__title .elementor-heading-title{ margin:0 !important; padding:0 !important; font-family: "El Messiri", Georgia, serif !important; font-size: clamp(56px,5.6vw,84px) !important; font-weight: 400 !important; line-height: .94 !important; letter-spacing: -.04em !important; color: var(--zg-deep) !important; } /* ========================================================= DESCRIPTION ========================================================= */ .zeisha-gallery__copy{ position:relative; max-width:500px; padding-left: clamp(18px,2vw,27px); border-left: 1px solid rgba(47,81,66,.18); } /* ========================================================= DESCRIPTION DM SANS — ALWAYS 16PX ========================================================= */ .zeisha-gallery__description, .zeisha-gallery__description *, .zeisha-gallery__description .elementor-widget-container, .zeisha-gallery__description p, .zeisha-gallery__description span, .zeisha-gallery__description div, .zeisha-gallery__description strong, .zeisha-gallery__description em, .zeisha-gallery__description code{ font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.68 !important; letter-spacing: 0 !important; word-spacing: 0 !important; text-transform: none !important; color: var(--zg-text) !important; } .zeisha-gallery__description p{ margin:0 !important; padding:0 !important; } /* ========================================================= GALLERY MEDIA WRAPPER ========================================================= */ .zeisha-gallery__media{ position:relative; width:100%; min-width:0; } /* ========================================================= DECORATIVE TOP LINE ========================================================= */ .zeisha-gallery__media::before{ content:""; position:absolute; z-index:4; top:-18px; left:0; width:100%; height:1px; background: linear-gradient( to right, var(--zg-gold) 0 55px, rgba(29,48,40,.11) 55px 100% ); pointer-events:none; } /* ========================================================= GALLERY WIDGET ========================================================= */ .zeisha-gallery__widget{ position:relative; width:100%; } /* ========================================================= MOSAIC GRID SUPPORTS COMMON ELEMENTOR / GALLERY PLUGINS ========================================================= */ .zeisha-gallery__widget .e-gallery-container, .zeisha-gallery__widget .elementor-gallery, .zeisha-gallery__widget .gallery{ display:grid !important; grid-template-columns: repeat(12,minmax(0,1fr)) !important; grid-auto-rows: 72px !important; grid-auto-flow: dense !important; gap: clamp(8px,1vw,14px) !important; width: 100% !important; height: auto !important; position: relative !important; } /* ========================================================= RESET PLUGIN POSITIONING ========================================================= */ .zeisha-gallery__widget .e-gallery-item, .zeisha-gallery__widget .elementor-gallery-item, .zeisha-gallery__widget .gallery-item{ position:relative !important; inset:auto !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; width:100% !important; max-width:none !important; height:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border:0 !important; background: var(--zg-beige); border-radius: 0 !important; transform:none !important; transition: transform .65s cubic-bezier(.19,1,.22,1), box-shadow .5s ease; } /* ========================================================= MOSAIC POSITION — ITEM 01 LARGE FEATURE IMAGE ========================================================= */ .zeisha-gallery__widget .e-gallery-item:nth-child(1), .zeisha-gallery__widget .elementor-gallery-item:nth-child(1), .zeisha-gallery__widget .gallery-item:nth-child(1){ grid-column: 1 / span 5 !important; grid-row: 1 / span 6 !important; border-radius: 4px 105px 4px 4px !important; } /* ========================================================= ITEM 02 ========================================================= */ .zeisha-gallery__widget .e-gallery-item:nth-child(2), .zeisha-gallery__widget .elementor-gallery-item:nth-child(2), .zeisha-gallery__widget .gallery-item:nth-child(2){ grid-column: 6 / span 3 !important; grid-row: 1 / span 3 !important; } /* ========================================================= ITEM 03 ========================================================= */ .zeisha-gallery__widget .e-gallery-item:nth-child(3), .zeisha-gallery__widget .elementor-gallery-item:nth-child(3), .zeisha-gallery__widget .gallery-item:nth-child(3){ grid-column: 9 / span 4 !important; grid-row: 1 / span 3 !important; } /* ========================================================= ITEM 04 ========================================================= */ .zeisha-gallery__widget .e-gallery-item:nth-child(4), .zeisha-gallery__widget .elementor-gallery-item:nth-child(4), .zeisha-gallery__widget .gallery-item:nth-child(4){ grid-column: 6 / span 4 !important; grid-row: 4 / span 3 !important; } /* ========================================================= ITEM 05 ========================================================= */ .zeisha-gallery__widget .e-gallery-item:nth-child(5), .zeisha-gallery__widget .elementor-gallery-item:nth-child(5), .zeisha-gallery__widget .gallery-item:nth-child(5){ grid-column: 10 / span 3 !important; grid-row: 4 / span 3 !important; border-radius: 4px 4px 85px 4px !important; } /* ========================================================= ITEM 06 ========================================================= */ .zeisha-gallery__widget .e-gallery-item:nth-child(6), .zeisha-gallery__widget .elementor-gallery-item:nth-child(6), .zeisha-gallery__widget .gallery-item:nth-child(6){ grid-column: 1 / span 3 !important; grid-row: 7 / span 3 !important; } /* ========================================================= ITEM 07 ========================================================= */ .zeisha-gallery__widget .e-gallery-item:nth-child(7), .zeisha-gallery__widget .elementor-gallery-item:nth-child(7), .zeisha-gallery__widget .gallery-item:nth-child(7){ grid-column: 4 / span 5 !important; grid-row: 7 / span 3 !important; } /* ========================================================= ITEM 08 ========================================================= */ .zeisha-gallery__widget .e-gallery-item:nth-child(8), .zeisha-gallery__widget .elementor-gallery-item:nth-child(8), .zeisha-gallery__widget .gallery-item:nth-child(8){ grid-column: 9 / span 4 !important; grid-row: 7 / span 3 !important; } /* ========================================================= IMAGE / LINKS FILL ITEM ========================================================= */ .zeisha-gallery__widget .e-gallery-item > *, .zeisha-gallery__widget .elementor-gallery-item > *, .zeisha-gallery__widget .gallery-item > *{ width:100% !important; height:100% !important; } /* ========================================================= ACTUAL IMAGE ========================================================= */ .zeisha-gallery__widget img{ display:block !important; width:100% !important; height:100% !important; max-width:none !important; object-fit: cover !important; object-position: center center !important; filter: saturate(.88) contrast(1.02) brightness(.99); transform: scale(1.015); transition: transform 1.1s cubic-bezier(.19,1,.22,1), filter .65s ease; } /* ========================================================= ELEMENTOR PRO GALLERY BACKGROUND IMAGE ========================================================= */ .zeisha-gallery__widget .e-gallery-image{ width:100% !important; height:100% !important; background-size: cover !important; background-position: center !important; transition: transform 1.1s cubic-bezier(.19,1,.22,1), filter .65s ease; } /* ========================================================= DARK GREEN HOVER OVERLAY ========================================================= */ .zeisha-gallery__widget .e-gallery-item::before, .zeisha-gallery__widget .elementor-gallery-item::before, .zeisha-gallery__widget .gallery-item::before{ content:""; position:absolute; z-index:3; inset:0; background: rgba(29,48,40,.28); opacity:0; pointer-events:none; transition: opacity .5s ease; } /* ========================================================= VIEW IMAGE TEXT ========================================================= */ .zeisha-gallery__widget .e-gallery-item::after, .zeisha-gallery__widget .elementor-gallery-item::after, .zeisha-gallery__widget .gallery-item::after{ content:"VIEW IMAGE ↗"; position:absolute; z-index:4; left: 22px; bottom: 20px; font-family: "DM Sans", Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .18em; color: var(--zg-ivory); opacity:0; transform: translateY(10px); pointer-events:none; transition: opacity .45s ease, transform .55s cubic-bezier(.19,1,.22,1); } /* ========================================================= HOVER ========================================================= */ .zeisha-gallery__widget .e-gallery-item:hover::before, .zeisha-gallery__widget .elementor-gallery-item:hover::before, .zeisha-gallery__widget .gallery-item:hover::before{ opacity:1; } .zeisha-gallery__widget .e-gallery-item:hover::after, .zeisha-gallery__widget .elementor-gallery-item:hover::after, .zeisha-gallery__widget .gallery-item:hover::after{ opacity:1; transform: translateY(0); } /* IMAGE ZOOM */ .zeisha-gallery__widget .e-gallery-item:hover img, .zeisha-gallery__widget .elementor-gallery-item:hover img, .zeisha-gallery__widget .gallery-item:hover img{ transform: scale(1.065); filter: saturate(.94) contrast(1.025) brightness(.94); } .zeisha-gallery__widget .e-gallery-item:hover .e-gallery-image{ transform: scale(1.06); filter: brightness(.94); } /* ========================================================= SUBTLE FEATURE FRAME ========================================================= */ .zeisha-gallery__media::after{ content:""; position:absolute; z-index:-1; left:-10px; top:25px; width: min(34%,420px); height: min(57%,470px); border: 1px solid rgba(183,155,108,.40); pointer-events:none; } /* ========================================================= TABLET ========================================================= */ @media (min-width:768px) and (max-width:1024px){ .zeisha-gallery__shell{ padding: 58px 28px 70px !important; } .zeisha-gallery__header{ grid-template-columns: minmax(0,1.1fr) minmax(260px,.9fr); gap: 32px; margin-bottom: 38px !important; } .zeisha-gallery__title .elementor-heading-title{ font-size: clamp(46px,6vw,62px) !important; } /* DESCRIPTION REMAINS 16 */ .zeisha-gallery__description, .zeisha-gallery__description *{ font-size: 16px !important; line-height: 1.64 !important; } /* TABLET MOSAIC */ .zeisha-gallery__widget .e-gallery-container, .zeisha-gallery__widget .elementor-gallery, .zeisha-gallery__widget .gallery{ grid-template-columns: repeat(6,minmax(0,1fr)) !important; grid-auto-rows: 75px !important; gap: 10px !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(1), .zeisha-gallery__widget .elementor-gallery-item:nth-child(1), .zeisha-gallery__widget .gallery-item:nth-child(1){ grid-column: 1 / span 3 !important; grid-row: 1 / span 5 !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(2), .zeisha-gallery__widget .elementor-gallery-item:nth-child(2), .zeisha-gallery__widget .gallery-item:nth-child(2){ grid-column: 4 / span 3 !important; grid-row: 1 / span 3 !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(3), .zeisha-gallery__widget .elementor-gallery-item:nth-child(3), .zeisha-gallery__widget .gallery-item:nth-child(3){ grid-column: 4 / span 3 !important; grid-row: 4 / span 2 !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(4), .zeisha-gallery__widget .elementor-gallery-item:nth-child(4), .zeisha-gallery__widget .gallery-item:nth-child(4){ grid-column: 1 / span 2 !important; grid-row: 6 / span 3 !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(5), .zeisha-gallery__widget .elementor-gallery-item:nth-child(5), .zeisha-gallery__widget .gallery-item:nth-child(5){ grid-column: 3 / span 2 !important; grid-row: 6 / span 3 !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(6), .zeisha-gallery__widget .elementor-gallery-item:nth-child(6), .zeisha-gallery__widget .gallery-item:nth-child(6){ grid-column: 5 / span 2 !important; grid-row: 6 / span 3 !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(7), .zeisha-gallery__widget .elementor-gallery-item:nth-child(7), .zeisha-gallery__widget .gallery-item:nth-child(7){ grid-column: 1 / span 3 !important; grid-row: 9 / span 3 !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(8), .zeisha-gallery__widget .elementor-gallery-item:nth-child(8), .zeisha-gallery__widget .gallery-item:nth-child(8){ grid-column: 4 / span 3 !important; grid-row: 9 / span 3 !important; } } /* ========================================================= MOBILE IPHONE + ANDROID ========================================================= */ @media (max-width:767px){ .zeisha-gallery::before{ font-size: 95px; top: 0; right: -12px; } .zeisha-gallery__shell{ padding: 55px clamp(18px,5.5vw,26px) 62px !important; } /* HEADER STACKS */ .zeisha-gallery__header{ display:block !important; margin-bottom: 32px !important; } .zeisha-gallery__heading{ margin-bottom: 19px; } .zeisha-gallery__title .elementor-heading-title{ font-size: clamp(43px,12vw,56px) !important; line-height: .96 !important; } .zeisha-gallery__copy{ width: min(100%,430px); max-width:none; padding-left: 14px; } /* DESCRIPTION ALWAYS 16PX */ .zeisha-gallery__description, .zeisha-gallery__description *{ font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; line-height: 1.65 !important; } /* MOBILE MOSAIC */ .zeisha-gallery__widget .e-gallery-container, .zeisha-gallery__widget .elementor-gallery, .zeisha-gallery__widget .gallery{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-auto-rows: 130px !important; gap: 8px !important; } /* FEATURED FULL WIDTH */ .zeisha-gallery__widget .e-gallery-item:nth-child(1), .zeisha-gallery__widget .elementor-gallery-item:nth-child(1), .zeisha-gallery__widget .gallery-item:nth-child(1){ grid-column: 1 / -1 !important; grid-row: span 3 !important; border-radius: 3px 72px 3px 3px !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(2), .zeisha-gallery__widget .elementor-gallery-item:nth-child(2), .zeisha-gallery__widget .gallery-item:nth-child(2), .zeisha-gallery__widget .e-gallery-item:nth-child(3), .zeisha-gallery__widget .elementor-gallery-item:nth-child(3), .zeisha-gallery__widget .gallery-item:nth-child(3), .zeisha-gallery__widget .e-gallery-item:nth-child(4), .zeisha-gallery__widget .elementor-gallery-item:nth-child(4), .zeisha-gallery__widget .gallery-item:nth-child(4), .zeisha-gallery__widget .e-gallery-item:nth-child(5), .zeisha-gallery__widget .elementor-gallery-item:nth-child(5), .zeisha-gallery__widget .gallery-item:nth-child(5){ grid-column: auto !important; grid-row: span 2 !important; } /* WIDE ITEM */ .zeisha-gallery__widget .e-gallery-item:nth-child(6), .zeisha-gallery__widget .elementor-gallery-item:nth-child(6), .zeisha-gallery__widget .gallery-item:nth-child(6){ grid-column: 1 / -1 !important; grid-row: span 2 !important; } .zeisha-gallery__widget .e-gallery-item:nth-child(7), .zeisha-gallery__widget .elementor-gallery-item:nth-child(7), .zeisha-gallery__widget .gallery-item:nth-child(7), .zeisha-gallery__widget .e-gallery-item:nth-child(8), .zeisha-gallery__widget .elementor-gallery-item:nth-child(8), .zeisha-gallery__widget .gallery-item:nth-child(8){ grid-column: auto !important; grid-row: span 2 !important; } .zeisha-gallery__media::after{ display:none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:420px){ .zeisha-gallery__shell{ padding: 52px 16px 58px !important; } .zeisha-gallery__title .elementor-heading-title{ font-size: clamp(40px,12vw,50px) !important; } /* NEVER REDUCE DESCRIPTION */ .zeisha-gallery__description, .zeisha-gallery__description *{ font-size: 16px !important; } .zeisha-gallery__widget .e-gallery-container, .zeisha-gallery__widget .elementor-gallery, .zeisha-gallery__widget .gallery{ grid-auto-rows: 112px !important; gap: 7px !important; } .zeisha-gallery__widget .e-gallery-item::after, .zeisha-gallery__widget .elementor-gallery-item::after, .zeisha-gallery__widget .gallery-item::after{ left: 14px; bottom: 14px; font-size: 9px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce){ .zeisha-gallery *, .zeisha-gallery *::before, .zeisha-gallery *::after{ animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ed505a2 *//* ========================================================= ZEISHA SPA FINAL CTA — IMAGE BACKGROUND EDITORIAL / CINEMATIC / LUXURY HEADING : EL MESSIRI DESCRIPTION : DM SANS 16PX ========================================================= */ /* ========================================================= GOOGLE FONTS ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=El+Messiri:wght@400;500;600&display=swap'); /* ========================================================= COLOR + IMAGE SYSTEM ========================================================= */ .zeisha-cta { --zc-deep: #1D3028; --zc-green: #2F5142; --zc-sage: #98A995; --zc-ivory: #F5F1E8; --zc-beige: #DDD3C3; --zc-gold: #B79B6C; --zc-white: #FFFFFF; /* ========================================= GANTI URL FOTO DI BAWAH INI ========================================= */ --zc-bg-image: url("https://belajarenam.artsyanaid.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-28-2026-03_55_17-PM.png"); } /* ========================================================= MAIN CTA SECTION ========================================================= */ .zeisha-cta { position: relative; width: 100%; min-height: 620px; overflow: hidden; isolation: isolate; display: flex; align-items: center; background-image: var(--zc-bg-image) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-attachment: scroll !important; color: var(--zc-ivory); font-family: "DM Sans", Arial, sans-serif !important; } /* ========================================================= BOX MODEL ========================================================= */ .zeisha-cta *, .zeisha-cta *::before, .zeisha-cta *::after { box-sizing: border-box; } /* ========================================================= CINEMATIC DARK GREEN OVERLAY ========================================================= */ .zeisha-cta::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient( 90deg, rgba(18,34,28,.72) 0%, rgba(29,48,40,.60) 30%, rgba(29,48,40,.54) 50%, rgba(29,48,40,.60) 70%, rgba(18,34,28,.72) 100% ), linear-gradient( 180deg, rgba(13,27,22,.25) 0%, rgba(13,27,22,.08) 32%, rgba(13,27,22,.16) 68%, rgba(13,27,22,.46) 100% ); } /* ========================================================= TOP GOLD GUIDE ========================================================= */ .zeisha-cta::after { content: ""; position: absolute; z-index: 3; top: 0; left: 50%; width: 1px; height: clamp(52px,6vw,78px); transform: translateX(-50%); background: linear-gradient( to bottom, rgba(183,155,108,.98), rgba(183,155,108,0) ); pointer-events: none; } /* ========================================================= INNER SHELL ========================================================= */ .zeisha-cta__shell { position: relative; z-index: 2; width: min(100%,1150px); margin: 0 auto !important; padding: clamp(100px,9vw,145px) clamp(28px,5vw,70px) clamp(95px,8vw,135px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center; } /* ========================================================= VERY SUBTLE CONTENT VIGNETTE ========================================================= */ .zeisha-cta__shell::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(90vw,900px); height: min(70%,500px); transform: translate(-50%,-50%); background: radial-gradient( ellipse at center, rgba(12,25,20,.19) 0%, rgba(12,25,20,.10) 43%, transparent 72% ); pointer-events: none; } /* ========================================================= EYEBROW ========================================================= */ .zeisha-cta__eyebrow { position: relative; margin: 0 0 23px 0 !important; padding-top: 14px; } /* ========================================================= EYEBROW GOLD LINE ========================================================= */ .zeisha-cta__eyebrow::before { content: ""; position: absolute; left: 50%; top: 0; width: 40px; height: 1px; transform: translateX(-50%); background: var(--zc-gold); transition: width .6s cubic-bezier(.19,1,.22,1); } .zeisha-cta__shell:hover .zeisha-cta__eyebrow::before { width: 65px; } /* ========================================================= EYEBROW TEXT ========================================================= */ .zeisha-cta__eyebrow .elementor-heading-title { margin: 0 !important; padding: 0 !important; font-family: "DM Sans", Arial, sans-serif !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .24em !important; text-transform: uppercase !important; color: var(--zc-beige) !important; } /* ========================================================= MAIN TITLE ========================================================= */ .zeisha-cta__title { position: relative; width: min(100%,850px); margin: 0 0 21px 0 !important; } /* ========================================================= TITLE FONT EL MESSIRI ========================================================= */ .zeisha-cta__title .elementor-heading-title { margin: 0 !important; padding: 0 !important; font-family: "El Messiri", Georgia, serif !important; font-size: clamp(58px,6.2vw,92px) !important; font-weight: 400 !important; line-height: .95 !important; letter-spacing: -.04em !important; color: var(--zc-ivory) !important; text-shadow: 0 4px 30px rgba(0,0,0,.15); } /* ========================================================= DESCRIPTION WRAPPER ========================================================= */ .zeisha-cta__description { position: relative; width: min(100%,650px); margin: 0 auto 34px !important; } /* ========================================================= DESCRIPTION DM SANS — ALWAYS 16PX ========================================================= */ .zeisha-cta__description, .zeisha-cta__description *, .zeisha-cta__description .elementor-widget-container, .zeisha-cta__description p, .zeisha-cta__description span, .zeisha-cta__description div, .zeisha-cta__description strong, .zeisha-cta__description em, .zeisha-cta__description code { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.7 !important; letter-spacing: 0 !important; word-spacing: 0 !important; text-transform: none !important; color: rgba(245,241,232,.88) !important; } /* ========================================================= DESCRIPTION RESET ========================================================= */ .zeisha-cta__description p { margin: 0 !important; padding: 0 !important; } /* ========================================================= REMOVE PASTED TYPOGRAPHY ========================================================= */ .zeisha-cta__description code, .zeisha-cta__description pre { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.7 !important; white-space: normal !important; background: transparent !important; border: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= BUTTON CONTAINER ========================================================= */ .zeisha-cta__actions { position: relative; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 16px !important; margin: 0 !important; } /* ========================================================= BUTTON BASE ========================================================= */ .zeisha-cta__button { width: auto !important; margin: 0 !important; } .zeisha-cta__button .elementor-button { position: relative; min-width: 205px; min-height: 58px; display: inline-flex !important; align-items: center !important; justify-content: center !important; overflow: hidden; padding: 18px 29px !important; border-radius: 0 !important; box-shadow: none !important; font-family: "DM Sans", Arial, sans-serif !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: .17em !important; text-transform: uppercase !important; transition: color .4s ease, background-color .4s ease, border-color .4s ease, transform .55s cubic-bezier(.19,1,.22,1), box-shadow .45s ease; } /* ========================================================= BUTTON CONTENT ========================================================= */ .zeisha-cta__button .elementor-button-content-wrapper { position: relative; z-index: 3; } /* ========================================================= PRIMARY BUTTON ========================================================= */ .zeisha-cta__button--primary .elementor-button { border: 1px solid var(--zc-ivory) !important; background: var(--zc-ivory) !important; color: var(--zc-deep) !important; } /* ========================================================= PRIMARY HOVER GOLD FILL ========================================================= */ .zeisha-cta__button--primary .elementor-button::before { content: ""; position: absolute; z-index: 1; inset: 0; background: var(--zc-gold); transform: scaleX(0); transform-origin: right; transition: transform .65s cubic-bezier(.19,1,.22,1); } .zeisha-cta__button--primary .elementor-button:hover::before { transform: scaleX(1); transform-origin: left; } .zeisha-cta__button--primary .elementor-button:hover { color: var(--zc-deep) !important; border-color: var(--zc-gold) !important; transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.18) !important; } /* ========================================================= SECONDARY BUTTON ========================================================= */ .zeisha-cta__button--secondary .elementor-button { border: 1px solid rgba(245,241,232,.58) !important; background: rgba(245,241,232,.04) !important; color: var(--zc-ivory) !important; } /* ========================================================= SECONDARY BUTTON HOVER FILL ========================================================= */ .zeisha-cta__button--secondary .elementor-button::before { content: ""; position: absolute; z-index: 1; inset: 0; background: rgba(245,241,232,.10); transform: scaleY(0); transform-origin: bottom; transition: transform .6s cubic-bezier(.19,1,.22,1); } .zeisha-cta__button--secondary .elementor-button:hover::before { transform: scaleY(1); } .zeisha-cta__button--secondary .elementor-button:hover { border-color: var(--zc-ivory) !important; color: var(--zc-ivory) !important; transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.14) !important; } /* ========================================================= BUTTON ARROW ========================================================= */ .zeisha-cta__button .elementor-button-text::after { content: "→"; display: inline-block; margin-left: 13px; font-size: 15px; line-height: 1; transition: transform .45s cubic-bezier(.19,1,.22,1); } .zeisha-cta__button .elementor-button:hover .elementor-button-text::after { transform: translateX(6px); } /* ========================================================= BOTTOM GOLD DECORATION ========================================================= */ .zeisha-cta__actions::after { content: ""; position: absolute; left: 50%; bottom: -34px; width: 92px; height: 1px; transform: translateX(-50%); background: linear-gradient( to right, transparent, rgba(183,155,108,.90), transparent ); } /* ========================================================= TABLET ========================================================= */ @media (min-width:768px) and (max-width:1024px) { .zeisha-cta { min-height: 560px; background-position: center center !important; } .zeisha-cta__shell { padding: 88px 40px 90px !important; } .zeisha-cta__title .elementor-heading-title { font-size: clamp(50px,7vw,70px) !important; } /* DESCRIPTION ALWAYS 16PX */ .zeisha-cta__description, .zeisha-cta__description * { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; line-height: 1.65 !important; } } /* ========================================================= MOBILE IPHONE + ANDROID ========================================================= */ @media (max-width:767px) { .zeisha-cta { min-height: 610px; background-position: center center !important; } /* DARKER MOBILE OVERLAY FOR READABILITY */ .zeisha-cta::before { background: linear-gradient( 180deg, rgba(18,34,28,.64) 0%, rgba(18,34,28,.69) 45%, rgba(18,34,28,.78) 100% ); } .zeisha-cta__shell { min-height: 610px; padding: 74px clamp(20px,6vw,28px) 78px !important; } /* ===================================================== EYEBROW ===================================================== */ .zeisha-cta__eyebrow { margin-bottom: 20px !important; } /* ===================================================== TITLE ===================================================== */ .zeisha-cta__title { width: min(100%,520px); margin-bottom: 18px !important; } .zeisha-cta__title .elementor-heading-title { font-size: clamp(43px,12.5vw,57px) !important; line-height: .96 !important; } /* ===================================================== DESCRIPTION ===================================================== */ .zeisha-cta__description { width: min(100%,430px); margin-bottom: 29px !important; } .zeisha-cta__description, .zeisha-cta__description * { font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; line-height: 1.65 !important; } /* ===================================================== BUTTONS ===================================================== */ .zeisha-cta__actions { width: min(100%,360px); flex-direction: column !important; gap: 11px !important; } .zeisha-cta__button { width: 100% !important; } .zeisha-cta__button .elementor-button { width: 100% !important; min-width: 0 !important; min-height: 55px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:420px) { .zeisha-cta { min-height: 590px; } .zeisha-cta__shell { min-height: 590px; padding: 68px 18px 72px !important; } .zeisha-cta__title .elementor-heading-title { font-size: clamp(40px,12vw,50px) !important; } /* DESCRIPTION NEVER BELOW 16PX */ .zeisha-cta__description, .zeisha-cta__description * { font-size: 16px !important; } .zeisha-cta__button .elementor-button { min-height: 53px; padding: 16px 19px !important; font-size: 10px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .zeisha-cta *, .zeisha-cta *::before, .zeisha-cta *::after { animation: none !important; transition: none !important; } }/* End custom CSS */