.elementor-5701 .elementor-element.elementor-element-8c30a50{--display:flex;--min-height:450px;--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;--overlay-opacity:0.5;--border-radius:-5px -5px -5px -5px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:41px;--padding-left:56px;--padding-right:56px;}.elementor-5701 .elementor-element.elementor-element-8c30a50:not(.elementor-motion-effects-element-type-background), .elementor-5701 .elementor-element.elementor-element-8c30a50 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;background-image:url("https://belajar-wordpress.artsyanaid.com/wp-content/uploads/2026/09/lempuyang-1.png");background-position:center center;background-size:cover;}.elementor-5701 .elementor-element.elementor-element-8c30a50::before, .elementor-5701 .elementor-element.elementor-element-8c30a50 > .elementor-background-video-container::before, .elementor-5701 .elementor-element.elementor-element-8c30a50 > .e-con-inner > .elementor-background-video-container::before, .elementor-5701 .elementor-element.elementor-element-8c30a50 > .elementor-background-slideshow::before, .elementor-5701 .elementor-element.elementor-element-8c30a50 > .e-con-inner > .elementor-background-slideshow::before, .elementor-5701 .elementor-element.elementor-element-8c30a50 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-5701 .elementor-element.elementor-element-f927e5c{--display:flex;--min-height:0px;--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;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5701 .elementor-element.elementor-element-ec045f8{--display:flex;--min-height:0px;--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;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:2px;--padding-left:25px;--padding-right:0px;}.elementor-5701 .elementor-element.elementor-element-d780217{--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;--justify-content:center;--gap:14px 14px;--row-gap:14px;--column-gap:14px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-5701 .elementor-element.elementor-element-d780217.e-con{--flex-grow:0;--flex-shrink:0;}.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-5701 .elementor-element.elementor-element-2b1d2d6 .elementor-heading-title{font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:500;line-height:1.08em;}.elementor-5701 .elementor-element.elementor-element-105196c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;}.elementor-5701 .elementor-element.elementor-element-105196c .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:55px;font-weight:500;line-height:1.08em;color:#FFFFFF;}.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-5701 .elementor-element.elementor-element-139035f{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:500;line-height:1.65em;color:#F7F1E7;}.elementor-5701 .elementor-element.elementor-element-56014ae{--display:flex;}.elementor-5701 .elementor-element.elementor-element-cb32758{--display:flex;}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5701 .elementor-element.elementor-element-d106ac1{--display:flex;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-5701 .elementor-element.elementor-element-4c23c86{--grid-columns:3;}.elementor-5701 .elementor-element.elementor-element-4c23c86 .elementor-loop-container{grid-auto-rows:1fr;}.elementor-5701 .elementor-element.elementor-element-4c23c86 .e-loop-item > .elementor-section, .elementor-5701 .elementor-element.elementor-element-4c23c86 .e-loop-item > .elementor-section > .elementor-container, .elementor-5701 .elementor-element.elementor-element-4c23c86 .e-loop-item > .e-con, .elementor-5701 .elementor-element.elementor-element-4c23c86 .e-loop-item .elementor-section-wrap > .e-con{height:100%;}.elementor-5701 .elementor-element.elementor-element-95b961a{--display:flex;}.elementor-5701 .elementor-element.elementor-element-3858d68{--grid-columns:3;}.elementor-5701 .elementor-element.elementor-element-ec02415{--display:flex;}.elementor-5701 .elementor-element.elementor-element-f5d027f{--grid-columns:3;}.elementor-5701 .elementor-element.elementor-element-db59a48{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;--n-tabs-title-font-size:16px;}.elementor-5701 .elementor-element.elementor-element-db59a48.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:#61CE7000;}.elementor-5701 .elementor-element.elementor-element-db59a48.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-5701 .elementor-element.elementor-element-db59a48.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:#61CE7000;}.elementor-5701 .elementor-element.elementor-element-db59a48.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:"DM Sans", Sans-serif;font-weight:500;}.elementor-5701 .elementor-element.elementor-element-7bc0cb3{--display:flex;}.elementor-5701 .elementor-element.elementor-element-54545bb{--display:flex;--min-height:350px;--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:50px 50px 50px 50px;box-shadow:0px 2px 5px 0px rgba(178, 34.00000000000002, 34.00000000000002, 0.34);--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5701 .elementor-element.elementor-element-390419c{--display:flex;--border-radius:0px 0px 0px 0px;}.elementor-5701 .elementor-element.elementor-element-390419c:not(.elementor-motion-effects-element-type-background), .elementor-5701 .elementor-element.elementor-element-390419c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://belajar-wordpress.artsyanaid.com/wp-content/uploads/2026/10/Desa-Pinggan-Kintamani_mikevisua-e1741676347109.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-5701 .elementor-element.elementor-element-9c7529d{--display:flex;--justify-content:center;--border-radius:0px 0px 0px 0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-5701 .elementor-element.elementor-element-9c7529d:not(.elementor-motion-effects-element-type-background), .elementor-5701 .elementor-element.elementor-element-9c7529d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-7eee4be );}.elementor-5701 .elementor-element.elementor-element-45184d4.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-5701 .elementor-element.elementor-element-45184d4 .elementor-heading-title{font-family:"El Messiri", Sans-serif;font-size:45px;font-weight:500;color:#FFFFFF;}.elementor-5701 .elementor-element.elementor-element-340fdc5{margin:-5px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-5701 .elementor-element.elementor-element-57ee8b8 .elementor-icon-list-icon i{color:#FFFFFF;transition:color 0.3s;}.elementor-5701 .elementor-element.elementor-element-57ee8b8 .elementor-icon-list-icon svg{fill:#FFFFFF;transition:fill 0.3s;}.elementor-5701 .elementor-element.elementor-element-57ee8b8{--e-icon-list-icon-size:19px;--icon-vertical-offset:0px;}.elementor-5701 .elementor-element.elementor-element-57ee8b8 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-5701 .elementor-element.elementor-element-57ee8b8 .elementor-icon-list-item > a{font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:400;}.elementor-5701 .elementor-element.elementor-element-57ee8b8 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5701 .elementor-element.elementor-element-d689283 .elementor-button{background-color:#009CE70A;font-family:"DM Sans", Sans-serif;font-size:15px;font-weight:500;border-style:solid;border-width:1px 1px 1px 1px;border-radius:10px 10px 10px 10px;padding:15px 15px 15px 15px;}.elementor-5701 .elementor-element.elementor-element-d689283 .elementor-button-content-wrapper{flex-direction:row-reverse;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-5701 .elementor-element.elementor-element-8c30a50{--width:100%;}.elementor-5701 .elementor-element.elementor-element-ec045f8{--content-width:100%;}.elementor-5701 .elementor-element.elementor-element-d780217{--width:87.366%;}.elementor-5701 .elementor-element.elementor-element-390419c{--width:40%;}.elementor-5701 .elementor-element.elementor-element-9c7529d{--width:60%;}}@media(max-width:1024px) and (min-width:768px){.elementor-5701 .elementor-element.elementor-element-d780217{--width:72%;}}@media(min-width:1025px){.elementor-5701 .elementor-element.elementor-element-8c30a50:not(.elementor-motion-effects-element-type-background), .elementor-5701 .elementor-element.elementor-element-8c30a50 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}@media(max-width:1024px){.elementor-5701 .elementor-element.elementor-element-8c30a50{--min-height:349px;--padding-top:82px;--padding-bottom:68px;--padding-left:30px;--padding-right:30px;}.elementor-5701 .elementor-element.elementor-element-ec045f8{--padding-top:0px;--padding-bottom:0px;--padding-left:22px;--padding-right:22px;}.elementor-5701 .elementor-element.elementor-element-2b1d2d6 .elementor-heading-title{font-size:18px;}.elementor-5701 .elementor-element.elementor-element-105196c .elementor-heading-title{font-size:50px;}.elementor-5701 .elementor-element.elementor-element-139035f{font-size:14px;}.elementor-5701 .elementor-element.elementor-element-4c23c86{--grid-columns:2;}.elementor-5701 .elementor-element.elementor-element-3858d68{--grid-columns:2;}.elementor-5701 .elementor-element.elementor-element-f5d027f{--grid-columns:2;}}@media(max-width:767px){.elementor-5701 .elementor-element.elementor-element-8c30a50{--padding-top:62px;--padding-bottom:58px;--padding-left:18px;--padding-right:18px;}.elementor-5701 .elementor-element.elementor-element-f927e5c{--padding-top:70px;--padding-bottom:36px;--padding-left:0px;--padding-right:0px;}.elementor-5701 .elementor-element.elementor-element-ec045f8{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:16px;--padding-right:16px;}.elementor-5701 .elementor-element.elementor-element-d780217{--width:100%;}.elementor-5701 .elementor-element.elementor-element-2b1d2d6 .elementor-heading-title{font-size:14px;}.elementor-5701 .elementor-element.elementor-element-105196c .elementor-heading-title{font-size:45px;}.elementor-5701 .elementor-element.elementor-element-139035f{font-size:14px;}.elementor-5701 .elementor-element.elementor-element-4c23c86{--grid-columns:1;}.elementor-5701 .elementor-element.elementor-element-3858d68{--grid-columns:1;}.elementor-5701 .elementor-element.elementor-element-f5d027f{--grid-columns:1;}.elementor-5701 .elementor-element.elementor-element-390419c{--min-height:170px;--border-radius:20px 20px 0px 0px;}.elementor-5701 .elementor-element.elementor-element-9c7529d{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:0px 00px 20px 20px;}.elementor-5701 .elementor-element.elementor-element-45184d4{width:var( --container-widget-width, 275.5px );max-width:275.5px;--container-widget-width:275.5px;--container-widget-flex-grow:0;}.elementor-5701 .elementor-element.elementor-element-45184d4 .elementor-heading-title{font-size:40px;}.elementor-5701 .elementor-element.elementor-element-340fdc5{font-size:14px;}.elementor-5701 .elementor-element.elementor-element-57ee8b8 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-5701 .elementor-element.elementor-element-57ee8b8 .elementor-icon-list-item > a{font-size:14px;}.elementor-5701 .elementor-element.elementor-element-d689283 .elementor-button{font-size:14px;}}/* Start custom CSS for container, class: .elementor-element-f927e5c *//* ============================================================
PUTU BALI TOUR — RIGHT VISUAL / PHOTO COLLAGE ONLY
Extracted from the Heritage Luxury collage design
CLASSES
.coastal-hero-collage__right
.coastal-hero-collage__photo-main
.coastal-hero-collage__photo-top
.coastal-hero-collage__photo-bottom
.coastal-hero-collage__glass
.coastal-hero-collage__glass-text
============================================================ */
.elementor-5701 .elementor-element.elementor-element-f927e5c{
--hero-maroon:#6D1F24;
--hero-maroon-dark:#57181D;
--hero-red:#A83832;
--hero-red-dark:#8E2B2C;
--hero-brick:#C85B4A;
--hero-gold:#D7A44A;
--hero-ivory:#F7F1E7;
--hero-blush:#EAD8D2;
--hero-charcoal:#2B2523;
--hero-white:#FFFFFF;
--hero-photo-frame:#F7F1E7;
--hero-shadow-main:
0 30px 68px rgba(65,27,27,.30);
--hero-shadow-float:
0 17px 36px rgba(65,27,27,.22);
--hero-tr:
.56s cubic-bezier(.2,.72,.2,1);
}
/* ============================================================
01. RIGHT VISUAL WRAPPER
============================================================ */
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__right{
position:relative;
z-index:3!important;
min-width:0;
max-width:100%;
box-sizing:border-box;
overflow:visible!important;
}
/* soft abstract capsule behind photos */
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__right::before{
content:"";
position:absolute;
top:2%;
left:14%;
width:70%;
height:96%;
z-index:0;
border-radius:
48% 48% 44% 44% / 18% 18% 38% 38%;
background:
linear-gradient(
145deg,
rgba(234,216,210,.11),
rgba(255,255,255,.025)
);
border:
1px solid rgba(215,164,74,.17);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.07),
0 18px 48px rgba(65,27,27,.035);
pointer-events:none;
}
/* luxury L frame */
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__right::after{
content:"";
position:absolute;
top:13%;
left:28%;
width:48%;
height:72%;
z-index:1;
border-right:
2px solid rgba(215,164,74,.76);
border-bottom:
2px solid rgba(200,91,74,.58);
border-radius:
0 0 38px 0;
pointer-events:none;
}
/* ============================================================
02. ALL PHOTO CONTAINERS
============================================================ */
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__photo-main,
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__photo-top,
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__photo-bottom{
position:absolute;
max-width:100%;
box-sizing:border-box;
overflow:hidden!important;
background-size:cover!important;
background-position:center!important;
background-repeat:no-repeat!important;
transition:
transform var(--hero-tr),
box-shadow var(--hero-tr);
}
/* ============================================================
03. MAIN PHOTO
============================================================ */
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__photo-main{
top:8%;
left:27%;
width:50%;
height:74%;
right:auto;
bottom:auto;
z-index:2!important;
border:
7px solid var(--hero-photo-frame)!important;
border-radius:
36px 36px 116px 36px!important;
box-shadow:
0 30px 68px rgba(65,27,27,.30),
0 0 0 1px rgba(215,164,74,.09)!important;
}
/* inner frame */
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__photo-main::before{
content:"";
position:absolute;
inset:10px;
pointer-events:none;
border:
1px solid rgba(247,241,231,.52);
border-radius:
27px 27px 104px 27px;
}
/* top accent */
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__photo-main::after{
content:"";
position:absolute;
top:0;
left:22px;
width:54px;
height:3px;
border-radius:
0 0 999px 999px;
background:
linear-gradient(
90deg,
#D7A44A 0%,
#D7A44A 42%,
#C85B4A 78%,
rgba(200,91,74,.14) 100%
);
}
/* ============================================================
04. BOTTOM OVERLAP PHOTO
============================================================ */
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__photo-bottom{
left:8%;
bottom:5%;
width:41%;
height:33%;
top:auto;
right:auto;
z-index:7!important;
border:
9px solid var(--hero-photo-frame)!important;
border-radius:
25px 25px 44px 25px!important;
box-shadow:
0 17px 36px rgba(65,27,27,.22),
0 0 0 5px rgba(215,164,74,.025)!important;
outline:
1px solid rgba(168,56,50,.20)!important;
outline-offset:
7px;
transform:
rotate(-.30deg);
}
/* bottom inner frame */
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__photo-bottom::before{
content:"";
position:absolute;
inset:7px;
pointer-events:none;
border:
1px solid rgba(247,241,231,.50);
border-radius:
18px 18px 35px 18px;
}
/* ============================================================
05. TOP PHOTO
============================================================ */
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__photo-top{
top:1%;
right:7%;
width:30%;
height:19%;
left:auto;
bottom:auto;
z-index:8!important;
border:
6px solid var(--hero-photo-frame)!important;
border-radius:
21px 21px 37px 21px!important;
outline:
1px solid rgba(215,164,74,.14);
outline-offset:
4px;
box-shadow:
0 17px 36px rgba(65,27,27,.21)!important;
transform:
rotate(.6deg);
}
/* ============================================================
06. FLOATING LABEL
============================================================ */
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__glass{
position:absolute;
top:auto;
left:auto;
right:3%;
bottom:14%;
z-index:10!important;
width:22%;
max-width:175px;
min-width:145px;
display:block!important;
padding:
10px 12px;
border:
1px solid rgba(215,164,74,.21)!important;
border-radius:
14px 14px 22px 14px!important;
background:
linear-gradient(
145deg,
rgba(109,31,36,.84),
rgba(87,24,29,.70)
)!important;
box-shadow:
0 16px 34px rgba(65,27,27,.24),
inset 0 1px 0 rgba(255,255,255,.055)!important;
-webkit-backdrop-filter:blur(13px);
backdrop-filter:blur(13px);
transition:
transform var(--hero-tr),
box-shadow var(--hero-tr),
border-color var(--hero-tr);
}
/* top accent */
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__glass::before{
content:"";
position:absolute;
top:0;
left:12px;
width:32px;
height:2px;
border-radius:
0 0 999px 999px;
background:
linear-gradient(
90deg,
#D7A44A,
#C85B4A
);
transition:
width .42s ease;
}
/* connector line */
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__glass::after{
content:"";
position:absolute;
top:50%;
left:-22px;
width:22px;
height:1px;
transform:
translateY(-50%);
background:
linear-gradient(
90deg,
transparent,
rgba(215,164,74,.68)
);
opacity:.55;
}
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__glass .elementor-heading-title{
color:#FFFFFF!important;
font-size:
clamp(15px,1.05vw,18px)!important;
line-height:
1.14!important;
margin:0;
}
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__glass-text{
width:100%;
margin-top:5px;
}
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__glass-text,
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__glass-text p{
color:
rgba(247,241,231,.72)!important;
font-size:
9.5px!important;
line-height:
1.42!important;
margin:0;
}
/* max 2 lines */
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__glass-text .elementor-widget-container,
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__glass-text p{
display:
-webkit-box!important;
-webkit-box-orient:
vertical!important;
-webkit-line-clamp:
2!important;
overflow:
hidden!important;
}
/* ============================================================
07. PHOTO HOVER
============================================================ */
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__right:hover
.coastal-hero-collage__photo-main{
transform:
translateY(-3px);
box-shadow:
0 35px 76px rgba(65,27,27,.34),
0 0 0 1px rgba(215,164,74,.14)!important;
}
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__right:hover
.coastal-hero-collage__photo-bottom{
transform:
rotate(0deg)
translateY(3px);
box-shadow:
0 22px 42px rgba(65,27,27,.26),
0 0 0 5px rgba(168,56,50,.025)!important;
}
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__right:hover
.coastal-hero-collage__photo-top{
transform:
rotate(.15deg)
translateY(-4px);
box-shadow:
0 22px 42px rgba(65,27,27,.25)!important;
}
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__glass:hover{
transform:
translateY(-4px);
border-color:
rgba(215,164,74,.30)!important;
box-shadow:
0 20px 40px rgba(65,27,27,.30),
inset 0 1px 0 rgba(255,255,255,.065)!important;
}
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__glass:hover::before{
width:58px;
}
/* ============================================================
08. TABLET
============================================================ */
@media(max-width:1024px){
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__right{
min-height:
640px!important;
}
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__glass{
right:3%;
bottom:12%;
width:21%;
max-width:165px;
min-width:140px;
padding:
9px 11px;
}
}
/* ============================================================
09. MOBILE
============================================================ */
@media(max-width:767px){
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__right{
min-height:
510px!important;
}
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__right::before{
top:4%;
left:8%;
width:78%;
height:92%;
}
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__right::after{
top:16%;
left:22%;
width:57%;
height:64%;
}
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__photo-main{
top:10%!important;
left:23%!important;
width:59%!important;
height:67%!important;
border-width:
5px!important;
border-radius:
27px 27px 74px 27px!important;
}
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__photo-bottom{
left:3%!important;
bottom:5%!important;
width:46%!important;
height:29%!important;
border-width:
6px!important;
outline-offset:
4px;
}
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__photo-top{
top:2%!important;
right:3%!important;
width:32%!important;
height:17%!important;
border-width:
4px!important;
outline-offset:
2px;
}
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__glass{
right:3%;
bottom:8%;
width:34%;
max-width:132px;
min-width:0;
padding:
8px 9px;
border-radius:
12px 12px 18px 12px!important;
background:
linear-gradient(
145deg,
rgba(109,31,36,.89),
rgba(87,24,29,.78)
)!important;
}
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__glass .elementor-heading-title{
font-size:
14px!important;
line-height:
1.12!important;
}
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__glass-text,
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__glass-text p{
font-size:
8.8px!important;
line-height:
1.38!important;
}
}
/* ============================================================
10. REDUCED MOTION
============================================================ */
@media(prefers-reduced-motion:reduce){
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__right *,
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__right *::before,
.elementor-5701 .elementor-element.elementor-element-f927e5c .coastal-hero-collage__right *::after{
animation:none!important;
transition:none!important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8c30a50 *//* =====================================================================
HERO HALAMAN (CONTACT US dan page lain) – MAROON & PUTIH (v1.0)
Serasi dengan semua section lain. Satu CSS yang sama dipakai di
SEMUA page (Contact, About, Tour, dst.) — tinggal ganti gambar,
eyebrow, judul, dan teks di Elementor.
Tampilan: foto latar (dari panel) + gradasi maroon gelap dari kiri,
garis maroon di tepi bawah, judul El Messiri putih dengan garis
vertikal & eyebrow berhias, titik hiasan, muncul bertahap saat dibuka.
Tempel di: Container PALING LUAR (root) > Advanced > Custom CSS
(disarankan Content Width = Full Width)
PENTING: gambar latar (Background > Image) dipasang di container
root ini, bukan di container dalam, supaya gradasi maroon ada di atasnya.
Class yang dipasang (Advanced > CSS Classes), sesuai struktur Anda:
Container (root, ada gambar latar) ...... ars-hr
└─ Container (level 2) .................. ars-hr__wrap
└─ Container (level 3) .............. ars-hr__inner
└─ Container (isi, level 4) ..... ars-hr__content
├─ Heading (kecil) .......... ars-hr__eyebrow
├─ Heading (besar) .......... ars-hr__title
└─ Text Editor .............. ars-hr__text
UKURAN TEKS: Judul desktop 70 · tablet 58 · mobile 44
Deskripsi desktop 17 · mobile 15
Ubah di bagian 1 (--hr-title-size / --hr-text-size) bila perlu.
Tinggi hero: --hr-min-h (panel Min Height tetap menang).
PANEL ELEMENTOR TETAP MENANG: font, ukuran, warna, padding, tinggi,
gambar latar yang diatur dari panel menimpa CSS ini.
(Lihat bagian 8 untuk warna bawaan template yang berwarna biru.)
RINGAN : tanpa blur / filter / blend-mode. Animasi hanya
transform/translate/opacity, sekali saat halaman dibuka.
TIPS : di Heading besar, bungkus kata dengan … agar
berwarna blush, contoh: Contact Us
===================================================================== */
/* ---------------------------------------------------------------------
1. PENGATURAN – ubah nilai di sini
--------------------------------------------------------------------- */
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50).e-con {
/* Warna */
--hr-maroon: #74142A;
--hr-maroon-dark: #4A0C1B;
--hr-maroon-light: #A32244;
--hr-maroon-rgb: 116, 20, 42;
--hr-dark-rgb: 74, 12, 27;
--hr-blush: #F4D3DB;
--hr-white: #ffffff;
/* Font */
--hr-font-display: "El Messiri", Georgia, serif;
--hr-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
/* Ukuran & jarak */
--hr-max: 1240px;
--hr-pad-x: 48px;
--hr-min-h: 460px; /* tinggi hero (panel Min Height menang) */
--hr-pad-top: 130px; /* ruang untuk header di atas hero */
--hr-pad-bottom: 80px;
--hr-content-max: 720px; /* lebar maksimal blok teks */
/* Teks */
--hr-title-size: 70px; /* judul desktop */
--hr-text-size: 17px; /* deskripsi desktop */
/* Overlay maroon di atas foto */
--hr-overlay: .8; /* kekuatan di kiri (0 – 1) */
--hr-overlay-end: .15; /* kekuatan di kanan (0 – 1) */
--hr-edge: 1; /* garis maroon di tepi bawah: 1 / 0 */
--hr-dots: 1; /* titik hiasan kanan bawah: 1 / 0 */
--hr-bar: 1; /* garis vertikal di kiri judul: 1 / 0 */
/* Watermark ("" = hilang). Contoh: "Contact" */
--hr-watermark: "";
--hr-watermark-size: clamp(90px, 16vw, 250px);
--hr-wm-stroke: rgba(255, 255, 255, .22);
/* Animasi saat halaman dibuka */
--hr-reveal: 1; /* 0 = tanpa animasi */
--hr-ease: cubic-bezier(.22, .8, .25, 1);
/* ---- Variabel bawaan Elementor (panel container tetap menang) ---- */
--flex-direction: column;
--align-items: stretch;
--justify-content: center;
--gap: 0px;
--row-gap: 0px;
--column-gap: 0px;
--min-height: var(--hr-min-h);
--padding-top: var(--hr-pad-top);
--padding-bottom: var(--hr-pad-bottom);
--padding-left: max(var(--hr-pad-x), calc((100% - var(--hr-max)) / 2));
--padding-right: max(var(--hr-pad-x), calc((100% - var(--hr-max)) / 2));
--content-width: min(100%, var(--hr-max));
position: relative;
overflow: hidden;
isolation: isolate;
font-family: var(--hr-font);
background-color: var(--hr-maroon-dark);
background-size: cover;
background-position: center;
}
/* OVERLAY: gradasi maroon gelap dari kiri + garis maroon di tepi bawah */
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50).e-con::after {
content: var(--hr-watermark);
position: absolute;
inset: 0;
z-index: 0;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 0 .04em 0 0;
overflow: hidden;
font-family: var(--hr-font-display);
font-size: var(--hr-watermark-size);
line-height: .8;
letter-spacing: -.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--hr-wm-stroke);
background:
linear-gradient(90deg, var(--hr-maroon), var(--hr-maroon-light) 38%, rgba(var(--hr-maroon-rgb), 0)) left bottom / 100% 4px no-repeat,
linear-gradient(100deg, rgba(var(--hr-dark-rgb), var(--hr-overlay)) 0%, rgba(var(--hr-dark-rgb), calc(var(--hr-overlay) * .6)) 45%, rgba(var(--hr-dark-rgb), var(--hr-overlay-end)) 100%);
pointer-events: none;
user-select: none;
}
/* ---------------------------------------------------------------------
2. CONTAINER (tumpukan wrap > inner > content)
--------------------------------------------------------------------- */
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50) .ars-hr__wrap.e-con,
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50) .ars-hr__inner.e-con,
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50) .ars-hr__content.e-con {
--width: 100%;
--padding-top: 0px;
--padding-right: 0px;
--padding-bottom: 0px;
--padding-left: 0px;
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
position: relative;
z-index: 2;
width: 100%;
min-width: 0;
}
/* titik hiasan kanan bawah (di container level 2) */
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50) .ars-hr__wrap.e-con::before {
content: "";
position: absolute;
inset: auto 0 -30px auto;
z-index: 0;
width: 110px;
height: 110px;
opacity: calc(var(--hr-dots) * .55);
background-image: radial-gradient(rgba(255, 255, 255, .8) 1.6px, transparent 1.9px);
background-size: 14px 14px;
pointer-events: none;
}
/* blok teks: garis vertikal di kiri */
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50) .ars-hr__content.e-con {
--gap: 16px;
--row-gap: 16px;
--padding-left: 32px;
max-width: var(--hr-content-max);
}
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50) .ars-hr__content.e-con::after {
content: "";
position: absolute;
inset: 6px auto 6px 0;
z-index: 0;
width: 5px;
border-radius: 999px;
background: linear-gradient(180deg, var(--hr-blush), var(--hr-maroon-light) 60%, rgba(var(--hr-maroon-rgb), 0));
opacity: var(--hr-bar);
pointer-events: none;
}
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50) .ars-hr__content .elementor-widget { margin-block-end: 0; }
/* ---------------------------------------------------------------------
3. EYEBROW, JUDUL, TEKS
Specificity (0,3,0): mengalahkan bawaan Elementor, kalah dari panel.
--------------------------------------------------------------------- */
.ars-hr .ars-hr__eyebrow .elementor-heading-title {
display: inline-flex;
align-items: center;
gap: 14px;
margin: 0;
font-family: var(--hr-font);
font-size: 13.5px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--hr-blush);
}
/* garis + berlian kecil sebelum eyebrow */
.ars-hr .ars-hr__eyebrow .elementor-heading-title::before {
content: "";
flex: none;
width: 38px;
height: 2px;
background: var(--hr-blush);
}
.ars-hr .ars-hr__eyebrow .elementor-heading-title::after {
content: "";
flex: none;
order: -1;
display: none;
}
.ars-hr .ars-hr__title .elementor-heading-title {
margin: 0;
font-family: var(--hr-font-display);
font-size: var(--hr-title-size);
font-weight: 600;
line-height: 1.04;
letter-spacing: .01em;
color: var(--hr-white);
text-wrap: balance;
}
.ars-hr .ars-hr__title .elementor-heading-title :is(span, em, b, strong) {
font-family: inherit;
font-style: normal;
font-weight: inherit;
color: var(--hr-blush);
}
.ars-hr .ars-hr__text {
max-width: 580px;
font-family: var(--hr-font);
font-size: var(--hr-text-size);
line-height: 1.8;
color: rgba(255, 255, 255, .9);
}
.ars-hr .ars-hr__text p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
.ars-hr .ars-hr__text p:last-child { margin-bottom: 0; }
/* ---------------------------------------------------------------------
4. ANIMASI SAAT HALAMAN DIBUKA (translate + opacity, sekali jalan)
--------------------------------------------------------------------- */
@keyframes arsHrIn {
from { opacity: calc(1 - var(--hr-reveal)); translate: 0 calc(26px * var(--hr-reveal)); }
to { opacity: 1; translate: 0 0; }
}
@keyframes arsHrBar {
from { transform: scaleY(calc(1 - var(--hr-reveal))); }
to { transform: scaleY(1); }
}
@media (prefers-reduced-motion: no-preference) {
.ars-hr .ars-hr__eyebrow,
.ars-hr .ars-hr__title,
.ars-hr .ars-hr__text {
animation: arsHrIn .9s var(--hr-ease) both;
}
.ars-hr .ars-hr__eyebrow { animation-delay: .05s; }
.ars-hr .ars-hr__title { animation-delay: .18s; }
.ars-hr .ars-hr__text { animation-delay: .32s; }
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50) .ars-hr__content.e-con::after {
transform-origin: top center;
animation: arsHrBar 1s var(--hr-ease) .1s both;
}
}
/* ---------------------------------------------------------------------
5. TABLET (≤ 1024px)
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50).e-con {
--hr-pad-x: 32px;
--hr-min-h: 400px;
--hr-pad-top: 110px;
--hr-pad-bottom: 64px;
--hr-title-size: 58px;
--hr-watermark-size: clamp(90px, 20vw, 190px);
--hr-overlay-end: .35; /* lebih gelap agar teks terbaca */
}
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50) .ars-hr__wrap.e-con::before { opacity: calc(var(--hr-dots) * .4); }
}
/* ---------------------------------------------------------------------
6. MOBILE (≤ 767px)
Judul 44px, deskripsi 15px, overlay lebih pekat agar teks jelas
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50).e-con {
--hr-pad-x: 20px;
--hr-min-h: 360px;
--hr-pad-top: 96px;
--hr-pad-bottom: 56px;
--hr-title-size: 44px;
--hr-text-size: 15px;
--hr-overlay: .85;
--hr-overlay-end: .55;
--hr-watermark-size: 26vw;
}
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50) .ars-hr__content.e-con {
--padding-left: 22px;
--gap: 14px;
--row-gap: 14px;
}
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50) .ars-hr__content.e-con::after { width: 4px; }
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50) .ars-hr__wrap.e-con::before { display: none; }
.ars-hr .ars-hr__eyebrow .elementor-heading-title {
gap: 10px;
font-size: 12px;
letter-spacing: .18em;
}
.ars-hr .ars-hr__eyebrow .elementor-heading-title::before { width: 26px; }
.ars-hr .ars-hr__title .elementor-heading-title { line-height: 1.08; }
}
/* ---------------------------------------------------------------------
7. KURANGI ANIMASI
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50).e-con *,
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50).e-con *::before,
:where(.elementor-5701 .elementor-element.elementor-element-8c30a50).e-con *::after {
animation: none !important;
transition: none !important;
}
}
/* ---------------------------------------------------------------------
8. PEMAKSA WARNA (HAPUS BAGIAN INI jika ingin warna diatur penuh dari panel)
Elemen mentah dari template Elementor membawa warna bawaan (eyebrow
biru #6EC1E4) yang tersimpan di panel dan menimpa CSS di atas. Bagian ini
memaksa warna blush/putih. Setelah warna bawaan itu Anda kosongkan di
panel (Style > Text Color), bagian 8 boleh dihapus.
Font, ukuran, spasi tetap bisa diatur dari panel.
--------------------------------------------------------------------- */
.ars-hr.ars-hr.ars-hr .ars-hr__eyebrow .elementor-heading-title { color: var(--hr-blush); }
.ars-hr.ars-hr.ars-hr .ars-hr__title .elementor-heading-title { color: var(--hr-white); }
.ars-hr.ars-hr.ars-hr .ars-hr__text { color: rgba(255, 255, 255, .9); }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56014ae *//* =====================================================================
TOUR PACKAGE (TABS) – MAROON & PUTIH (v1.0)
Serasi dengan Hero, About Us, Why Choose Us, Signature Tour, Loop Card.
Latar putih + cahaya maroon tipis, watermark bergaris tipis kiri bawah.
Layout desktop:
[ Judul (kiri) | Teks (kanan) ]
[ TAB BERBENTUK KOTAK (border maroon) ]
[ Loop Grid (isi tab aktif) ]
Tempel di: Container PALING LUAR (root) > Advanced > Custom CSS
(disarankan Content Width = Full Width)
Class yang harus dipasang (Advanced > CSS Classes):
Container (root) ........................ ars-tp
├─ Container (header) ................... ars-tp__head
│ ├─ Container (kiri) ................. ars-tp__intro
│ │ └─ Heading ...................... ars-tp__title
│ └─ Container (kanan) ................ ars-tp__side
│ └─ Text Editor .................. ars-tp__text
└─ Tabs (widget) ........................ ars-tp__tabs
├─ Tab #1 (container isi) ........... (class opsional: ars-tp__panel)
│ └─ Loop Grid
├─ Tab #2 ... Loop Grid
└─ Tab #3 ... Loop Grid
PENTING DI PANEL ELEMENTOR (widget Tabs):
- Content > Tabs > "Breakpoint" = None / Tidak ada
(supaya di mobile tetap jadi tab horizontal yang bisa digeser,
bukan berubah menjadi accordion)
- Kosongkan warna / border / background tab di panel Style agar
tampilan dari CSS ini yang terlihat. Nilai dari panel tetap menang
bila diisi (tidak ada !important di style tab).
PANEL ELEMENTOR TETAP MENANG: font, ukuran, warna, padding, gap,
border, radius yang diatur dari panel menimpa CSS ini.
RINGAN : tanpa blur / filter / blend-mode. Animasi hanya
transform/translate/opacity, hover hanya di perangkat mouse.
TIPS : di Heading, bungkus kata dengan … agar
berwarna maroon, contoh: Tour Package
===================================================================== */
/* ---------------------------------------------------------------------
1. PENGATURAN – ubah nilai di sini
--------------------------------------------------------------------- */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae).e-con {
/* Warna */
--tp-maroon: #74142A;
--tp-maroon-dark: #4A0C1B;
--tp-maroon-light: #A32244;
--tp-maroon-rgb: 116, 20, 42;
--tp-white: #ffffff;
--tp-tint: #FBF3F5;
--tp-ink: #2B1519;
--tp-muted: rgba(43, 21, 25, .74);
--tp-line: rgba(var(--tp-maroon-rgb), .16);
/* Font */
--tp-font-display: "El Messiri", Georgia, serif;
--tp-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
/* Ukuran & jarak */
--tp-max: 1240px;
--tp-pad-x: 48px;
--tp-pad-top: clamp(64px, 7vw, 108px);
--tp-pad-bottom: clamp(88px, 11vw, 170px); /* ruang untuk watermark */
--tp-row-gap: clamp(40px, 5vw, 72px);
--tp-col-gap: clamp(32px, 5vw, 84px);
/* Teks */
--tp-title-size: clamp(34px, 4.2vw, 58px);
--tp-text-size: 16px;
/* Tab */
--tp-tab-radius: 0px; /* 0 = kotak tegas, 6px = sedikit membulat */
--tp-tab-border: 1.5px;
--tp-tab-pad-y: 16px;
--tp-tab-pad-x: 30px;
--tp-tab-gap: 14px;
--tp-tab-numbers: 1; /* 1 = tampilkan 01/02/03, 0 = sembunyi */
--tp-swipe-text: "Geser untuk lihat paket lainnya"; /* "" = hilangkan teks petunjuk (mobile) */
/* Watermark ("" = hilang) */
--tp-watermark: "Tour Package";
--tp-watermark-size: clamp(72px, 13vw, 210px);
--tp-wm-stroke: rgba(var(--tp-maroon-rgb), .13);
/* Animasi masuk (desktop saja) */
--tp-reveal: 1; /* 0 = tanpa animasi */
--tp-ease: cubic-bezier(.22, .8, .25, 1);
/* ---- Variabel bawaan Elementor (panel container tetap menang) ---- */
--flex-direction: column;
--align-items: stretch;
--justify-content: flex-start;
--gap: var(--tp-row-gap);
--row-gap: var(--tp-row-gap);
--column-gap: var(--tp-row-gap);
--padding-top: var(--tp-pad-top);
--padding-bottom: var(--tp-pad-bottom);
--padding-left: max(var(--tp-pad-x), calc((100% - var(--tp-max)) / 2));
--padding-right: max(var(--tp-pad-x), calc((100% - var(--tp-max)) / 2));
--content-width: min(100%, var(--tp-max));
position: relative;
overflow: hidden;
isolation: isolate;
font-family: var(--tp-font);
background-color: var(--tp-white);
background-image:
radial-gradient(ellipse 50% 40% at 100% 0%, rgba(var(--tp-maroon-rgb), .07), transparent 70%),
radial-gradient(ellipse 55% 45% at 0% 100%, rgba(var(--tp-maroon-rgb), .08), transparent 70%);
}
/* WATERMARK besar bergaris tipis, kiri bawah */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae).e-con::after {
content: var(--tp-watermark);
position: absolute;
inset: auto auto -.2em -.02em;
z-index: 0;
width: auto;
height: auto;
font-family: var(--tp-font-display);
font-size: var(--tp-watermark-size);
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--tp-wm-stroke);
pointer-events: none;
user-select: none;
}
/* ---------------------------------------------------------------------
2. CONTAINER (dasar)
--------------------------------------------------------------------- */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__head.e-con,
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__intro.e-con,
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__side.e-con {
--width: 100%;
--padding-top: 0px;
--padding-right: 0px;
--padding-bottom: 0px;
--padding-left: 0px;
position: relative;
z-index: 1;
width: 100%;
min-width: 0;
}
/* HEADER: judul kiri | teks kanan */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__head.e-con {
--gap: var(--tp-col-gap);
--row-gap: 24px;
--column-gap: var(--tp-col-gap);
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__head.e-con-full,
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__head.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: end;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__intro.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
--padding-left: 30px;
}
/* garis maroon vertikal di kiri judul */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__intro.e-con::after {
content: "";
position: absolute;
inset: 6px auto 6px 0;
z-index: 0;
width: 5px;
border-radius: 999px;
background: linear-gradient(180deg, var(--tp-maroon), rgba(var(--tp-maroon-rgb), 0));
pointer-events: none;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__side.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: flex-end;
--padding-left: 26px;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__side.e-con::before {
content: "";
position: absolute;
inset: 4px auto 4px 0;
width: 1.5px;
background: linear-gradient(180deg, rgba(var(--tp-maroon-rgb), .4), rgba(var(--tp-maroon-rgb), .05));
pointer-events: none;
}
/* ---------------------------------------------------------------------
3. JUDUL & TEKS
Semua pakai :where() => pengaturan panel Elementor tetap menang.
--------------------------------------------------------------------- */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__title.elementor-widget,
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__text.elementor-widget {
width: 100%;
margin-block-end: 0;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__title.elementor-widget .elementor-heading-title {
margin: 0;
font-family: var(--tp-font-display);
font-size: var(--tp-title-size);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.01em;
color: var(--tp-ink);
text-wrap: balance;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__title.elementor-widget .elementor-heading-title :is(span, em, b, strong) {
font-family: inherit;
font-style: normal;
font-weight: inherit;
color: var(--tp-maroon);
background: linear-gradient(transparent 64%, rgba(var(--tp-maroon-rgb), .14) 64%);
padding-inline: .06em;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__text.elementor-widget {
max-width: 560px;
font-family: var(--tp-font);
font-size: var(--tp-text-size);
line-height: 1.85;
color: var(--tp-muted);
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__text.elementor-widget p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__text.elementor-widget p:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------
4. TABS – wadah
--------------------------------------------------------------------- */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget {
position: relative;
z-index: 1;
width: 100%;
margin: 0;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs .e-n-tabs {
width: 100%;
gap: 0;
/* scope untuk indikator geser (mobile) */
timeline-scope: --tpScroll;
}
/* baris tab */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs .e-n-tabs-heading {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
gap: var(--tp-tab-gap);
order: 1;
width: 100%;
padding: 8px 8px 18px; /* ruang untuk bayangan & penanda */
counter-reset: tptab;
scroll-timeline: --tpScroll inline;
}
/* judul tab versi accordion (di dalam isi) tidak dipakai */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs .e-n-tabs-content > .e-n-tab-title {
display: none;
}
/* isi tab */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs .e-n-tabs-content {
order: 3;
width: 100%;
overflow: visible;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs .e-n-tabs-content > .e-con {
--padding-top: 28px;
--padding-right: 0px;
--padding-bottom: 8px;
--padding-left: 0px;
width: 100%;
min-width: 0;
overflow: visible;
}
/* indikator & petunjuk geser: hanya muncul di mobile (bagian 9) */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs .e-n-tabs::before,
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs .e-n-tabs::after {
display: none;
}
/* ---------------------------------------------------------------------
5. TABS – tombol tab (kotak, hanya border maroon)
Normal : putih, border maroon tipis, nomor kecil di depan teks
Hover : isi maroon menyapu dari kiri, tombol naik + bayangan keras
Aktif : isi maroon penuh, bayangan keras, penanda berlian di bawah
--------------------------------------------------------------------- */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
flex: 0 1 auto;
min-width: 0;
margin: 0;
padding: var(--tp-tab-pad-y) var(--tp-tab-pad-x);
counter-increment: tptab;
font-family: var(--tp-font);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .16em;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
color: var(--tp-maroon);
background-color: var(--tp-white);
background-image: none;
border: var(--tp-tab-border) solid rgba(var(--tp-maroon-rgb), .5);
border-radius: var(--tp-tab-radius);
box-shadow: 0 0 0 0 rgba(var(--tp-maroon-rgb), 0);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
transform .4s var(--tp-ease),
box-shadow .4s var(--tp-ease),
color .3s ease,
border-color .3s ease;
}
/* isi maroon yang menyapu (transform saja) */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(135deg, var(--tp-maroon-light), var(--tp-maroon-dark));
transform: scaleX(0);
transform-origin: left center;
transition: transform .5s var(--tp-ease);
pointer-events: none;
}
/* penanda berlian di bawah tab aktif */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title::after {
content: "";
position: absolute;
left: 50%;
bottom: -7px;
z-index: 2;
width: 11px;
height: 11px;
background: var(--tp-maroon);
transform: translateX(-50%) rotate(45deg) scale(0);
transition: transform .4s var(--tp-ease);
pointer-events: none;
}
/* isi tab di atas lapisan sapuan */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title > * {
position: relative;
z-index: 1;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title-text {
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
/* nomor 01 / 02 / 03 (ubah --tp-tab-numbers jadi 0 untuk sembunyi) */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title-text::before {
content: counter(tptab, decimal-leading-zero);
display: inline-block;
margin-right: 12px;
padding-right: 12px;
font-family: var(--tp-font-display);
font-size: 15px;
font-weight: 600;
letter-spacing: 0;
line-height: 1;
border-right: 1px solid currentColor;
opacity: calc(.6 * var(--tp-tab-numbers));
/* sembunyi total bila 0 */
width: calc(var(--tp-tab-numbers) * 1.4em);
padding-right: calc(var(--tp-tab-numbers) * 12px);
margin-right: calc(var(--tp-tab-numbers) * 12px);
overflow: hidden;
vertical-align: baseline;
border-right-width: calc(var(--tp-tab-numbers) * 1px);
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-icon,
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-icon i,
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-icon svg {
color: inherit;
fill: currentColor;
}
/* AKTIF */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title[aria-selected="true"],
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title.e-active {
color: var(--tp-white);
background-color: var(--tp-maroon);
border-color: var(--tp-maroon);
box-shadow: 6px 6px 0 0 rgba(var(--tp-maroon-rgb), .22);
transform: translate(-2px, -2px);
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title[aria-selected="true"]::before,
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title.e-active::before {
transform: scaleX(1);
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title[aria-selected="true"]::after,
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title.e-active::after {
transform: translateX(-50%) rotate(45deg) scale(1);
}
/* fokus keyboard */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title:focus-visible {
outline: 2px solid var(--tp-maroon-light);
outline-offset: 4px;
}
/* tekan (sentuh / klik) */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title:active {
transform: translate(0, 0);
box-shadow: 0 0 0 0 rgba(var(--tp-maroon-rgb), 0);
}
/* ---------------------------------------------------------------------
6. HOVER – hanya perangkat dengan mouse
--------------------------------------------------------------------- */
@media (hover: hover) {
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title:hover {
color: var(--tp-white);
border-color: var(--tp-maroon);
box-shadow: 5px 5px 0 0 rgba(var(--tp-maroon-rgb), .85);
transform: translate(-3px, -3px);
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title:hover::before {
transform: scaleX(1);
}
/* tab aktif yang di-hover: bayangan lebih tegas */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title[aria-selected="true"]:hover,
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title.e-active:hover {
box-shadow: 7px 7px 0 0 rgba(var(--tp-maroon-rgb), .32);
transform: translate(-3px, -3px);
}
}
/* ---------------------------------------------------------------------
7. ANIMASI
a) Isi tab muncul halus setiap kali tab diganti
b) Masuk saat scroll – DESKTOP saja
--------------------------------------------------------------------- */
@keyframes arsTpPanel {
from { opacity: 0; translate: 0 18px; }
to { opacity: 1; translate: 0 0; }
}
@keyframes arsTpUp {
from { opacity: calc(1 - var(--tp-reveal)); translate: 0 calc(34px * var(--tp-reveal)); }
to { opacity: 1; translate: 0 0; }
}
@keyframes arsTpThumb {
from { background-position: 0% 0; }
to { background-position: 100% 0; }
}
@media (prefers-reduced-motion: no-preference) {
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs .e-n-tabs-content > .e-con {
animation: arsTpPanel .55s var(--tp-ease) both;
}
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__intro.e-con,
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__side.e-con,
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget {
animation: arsTpUp linear both;
animation-timeline: view();
animation-range: entry 0% cover 24%;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__side.e-con { animation-range: entry 6% cover 28%; }
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget { animation-range: entry 4% cover 30%; }
}
}
/* ---------------------------------------------------------------------
8. TABLET (≤ 1024px)
Judul → teks, tab rata tengah boleh turun baris
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5701 .elementor-element.elementor-element-56014ae).e-con {
--tp-pad-x: 32px;
--tp-col-gap: 24px;
--tp-row-gap: 44px;
--tp-watermark-size: clamp(72px, 16vw, 150px);
--tp-tab-pad-y: 14px;
--tp-tab-pad-x: 24px;
--tp-tab-gap: 12px;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__head.e-con-full,
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__head.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__side.e-con {
--padding-left: 30px;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__side.e-con::before {
display: none;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__text.elementor-widget {
max-width: none;
}
}
/* ---------------------------------------------------------------------
9. MOBILE (≤ 767px)
Tab 1 baris, bisa digeser ke samping sampai tepi layar, snap per tab,
indikator geser di bawahnya (mengikuti posisi scroll bila didukung
browser, bila tidak akan bergerak pelan sebagai petunjuk).
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5701 .elementor-element.elementor-element-56014ae).e-con {
--tp-pad-x: 20px;
--tp-pad-top: 56px;
--tp-pad-bottom: 84px;
--tp-row-gap: 32px;
--tp-col-gap: 16px;
--tp-title-size: clamp(30px, 8.6vw, 40px);
--tp-text-size: 15px;
--tp-watermark-size: 22vw;
--tp-tab-pad-y: 15px;
--tp-tab-pad-x: 22px;
--tp-tab-gap: 12px;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__intro.e-con,
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__side.e-con {
--padding-left: 22px;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__intro.e-con::after {
width: 4px;
}
/* baris tab: 1 baris, geser samping, sampai tepi layar */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs .e-n-tabs-heading {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
margin-inline: calc(var(--tp-pad-x) * -1);
width: calc(100% + var(--tp-pad-x) * 2);
padding: 8px var(--tp-pad-x) 18px;
scroll-snap-type: x proximity;
scroll-padding-inline: var(--tp-pad-x);
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs .e-n-tabs-heading::-webkit-scrollbar {
display: none;
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title {
flex: 0 0 auto;
min-width: max(46vw, 190px);
scroll-snap-align: start;
font-size: 12.5px;
letter-spacing: .14em;
}
/* tidak ada efek hover-naik di sentuh; aktif cukup bayangan kecil */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title[aria-selected="true"],
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs.elementor-widget .e-n-tab-title.e-active {
box-shadow: 5px 5px 0 0 rgba(var(--tp-maroon-rgb), .22);
transform: translate(-2px, -2px);
}
/* INDIKATOR GESER: garis + thumb maroon */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs .e-n-tabs::before {
content: "";
display: block;
order: 2;
height: 4px;
margin: 6px 2px 0;
border-radius: 999px;
background-color: rgba(var(--tp-maroon-rgb), .14);
background-image: linear-gradient(90deg, var(--tp-maroon-light), var(--tp-maroon));
background-repeat: no-repeat;
background-size: 34% 100%;
background-position: 0% 0;
/* cadangan: thumb bergerak pelan bolak-balik */
animation: arsTpThumb 2.6s ease-in-out infinite alternate;
}
/* teks petunjuk kecil di bawah indikator */
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs .e-n-tabs::after {
content: var(--tp-swipe-text);
display: block;
order: 2;
margin-top: 10px;
font-family: var(--tp-font);
font-size: 10.5px;
font-weight: 600;
line-height: 1;
letter-spacing: .18em;
text-align: center;
text-transform: uppercase;
color: rgba(var(--tp-maroon-rgb), .6);
}
/* browser yang mendukung scroll-timeline: thumb mengikuti geseran */
@supports (animation-timeline: scroll()) {
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs .e-n-tabs::before {
animation: arsTpThumb linear both;
animation-timeline: --tpScroll;
}
}
:where(.elementor-5701 .elementor-element.elementor-element-56014ae) .ars-tp__tabs .e-n-tabs-content > .e-con {
--padding-top: 22px;
}
}
/* ---------------------------------------------------------------------
10. KURANGI ANIMASI
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5701 .elementor-element.elementor-element-56014ae).e-con *,
:where(.elementor-5701 .elementor-element.elementor-element-56014ae).e-con *::before,
:where(.elementor-5701 .elementor-element.elementor-element-56014ae).e-con *::after {
animation: none !important;
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bc0cb3 *//* =====================================================================
CUSTOM TOUR – MAROON & PUTIH (v1.1)
Class TIDAK diubah dari v1.0.
Tempel di: Container PALING LUAR (root) > Advanced > Custom CSS
(GANTI seluruh CSS v1.0)
YANG BERUBAH di v1.1
- SEMUA warna emas/oranye dihapus. Hanya maroon, putih, dan blush
(merah muda lembut) sebagai aksen.
- Foto diberi lapisan maroon tipis agar nada warnanya menyatu
(atur kekuatannya di --ct-photo-tint).
- ICON LIST baru: tiap baris berupa panel transparan putih tipis
dengan garis putih di kiri yang memanjang saat hover, ikon putih,
jarak rapi.
Class (Advanced > CSS Classes):
Container (root) ........................ ars-ct
└─ Container (kartu) .................... ars-ct__card
├─ Container (kiri, "Empty" + foto) . ars-ct__media
└─ Container (kanan, konten) ........ ars-ct__content
├─ Heading ...................... ars-ct__title
├─ Text Editor .................. ars-ct__text
├─ Icon List .................... ars-ct__list
└─ Button ....................... ars-ct__btn
FOTO: pasang dari panel container kiri > Style > Background > Image.
PANEL ELEMENTOR TETAP MENANG: font, ukuran, warna, padding, gap,
border, radius, tinggi, background, warna/ukuran ikon & teks daftar
yang diatur dari panel menimpa CSS ini.
RINGAN : tanpa blur / filter / blend-mode. Animasi hanya
transform/translate/scale/opacity; hover hanya di mouse.
TIPS : di Heading, bungkus kata dengan … agar
berwarna blush, contoh: Custom & Flexible Bali Tours
===================================================================== */
/* ---------------------------------------------------------------------
1. PENGATURAN – ubah nilai di sini
--------------------------------------------------------------------- */
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3).e-con {
/* Warna (hanya maroon, putih, blush) */
--ct-maroon: #74142A;
--ct-maroon-dark: #4A0C1B;
--ct-maroon-light: #A32244;
--ct-maroon-rgb: 116, 20, 42;
--ct-white: #ffffff;
--ct-tint: #FBF3F5;
--ct-blush: #F4D3DB;
--ct-ink: #2B1519;
/* Font */
--ct-font-display: "El Messiri", Georgia, serif;
--ct-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
/* Ukuran & jarak */
--ct-max: 1240px;
--ct-pad-x: 48px;
--ct-pad-top: clamp(64px, 7vw, 108px);
--ct-pad-bottom: clamp(88px, 11vw, 170px); /* ruang untuk watermark */
--ct-media-h: clamp(300px, 36vw, 460px); /* tinggi minimum foto (desktop) */
/* Bentuk kartu (atas-kiri atas-kanan bawah-kanan bawah-kiri) */
--ct-shape: 84px 14px 84px 14px; /* 14px = kotak membulat biasa */
/* Foto: lapisan maroon tipis (0 = tanpa, .3 = lebih maroon) */
--ct-photo-tint: .2;
/* Chip kecil di foto */
--ct-tag: "Tailor-Made";
--ct-tag-on: 1; /* 0 = sembunyikan chip */
/* Teks */
--ct-title-size: clamp(28px, 3.3vw, 46px);
--ct-text-size: 16px;
/* Watermark ("" = hilang) */
--ct-watermark: "Custom Tour";
--ct-watermark-size: clamp(80px, 15vw, 240px);
--ct-wm-stroke: rgba(var(--ct-maroon-rgb), .13);
/* Animasi */
--ct-reveal: 1; /* 0 = tanpa animasi masuk */
--ct-ease: cubic-bezier(.22, .8, .25, 1);
/* ---- Variabel bawaan Elementor (panel container tetap menang) ---- */
--flex-direction: column;
--align-items: stretch;
--justify-content: flex-start;
--gap: 32px;
--row-gap: 32px;
--column-gap: 32px;
--padding-top: var(--ct-pad-top);
--padding-bottom: var(--ct-pad-bottom);
--padding-left: max(var(--ct-pad-x), calc((100% - var(--ct-max)) / 2));
--padding-right: max(var(--ct-pad-x), calc((100% - var(--ct-max)) / 2));
--content-width: min(100%, var(--ct-max));
position: relative;
overflow: hidden;
isolation: isolate;
font-family: var(--ct-font);
background-color: var(--ct-white);
background-image:
radial-gradient(ellipse 50% 40% at 100% 0%, rgba(var(--ct-maroon-rgb), .07), transparent 70%),
radial-gradient(ellipse 55% 45% at 0% 100%, rgba(var(--ct-maroon-rgb), .08), transparent 70%);
}
/* WATERMARK besar bergaris tipis, kiri bawah */
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3).e-con::after {
content: var(--ct-watermark);
position: absolute;
inset: auto auto -.2em -.02em;
z-index: 0;
width: auto;
height: auto;
font-family: var(--ct-font-display);
font-size: var(--ct-watermark-size);
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--ct-wm-stroke);
pointer-events: none;
user-select: none;
}
/* ---------------------------------------------------------------------
2. KARTU – ars-ct__card
--------------------------------------------------------------------- */
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__card.e-con,
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__media.e-con,
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__content.e-con {
--width: 100%;
--padding-top: 0px;
--padding-right: 0px;
--padding-bottom: 0px;
--padding-left: 0px;
position: relative;
z-index: 1;
width: 100%;
min-width: 0;
}
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__card.e-con {
--gap: 0px;
--row-gap: 0px;
--column-gap: 0px;
overflow: hidden;
border-radius: var(--ct-shape);
background-color: var(--ct-maroon);
box-shadow: 0 44px 64px -36px rgba(var(--ct-maroon-rgb), .65), 0 0 0 1px rgba(var(--ct-maroon-rgb), .12);
}
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__card.e-con-full,
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__card.e-con-boxed > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
align-items: stretch;
}
/* kilau diagonal menyapu seluruh kartu (aktif saat hover, lihat bagian 6) */
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__card.e-con::after {
content: "";
position: absolute;
inset: 0;
z-index: 5;
background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%);
transform: translateX(-130%);
pointer-events: none;
}
/* ---------------------------------------------------------------------
3. FOTO (kiri) – ars-ct__media
--------------------------------------------------------------------- */
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__media.e-con {
min-height: var(--min-height, var(--ct-media-h));
background-color: var(--ct-blush);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* lapisan maroon tipis + gradasi maroon di tepi (menyatu dengan konten) */
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__media.e-con::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg, rgba(74, 12, 27, 0) 58%, rgba(74, 12, 27, .55) 100%),
linear-gradient(180deg, rgba(74, 12, 27, 0) 55%, rgba(74, 12, 27, .4) 100%),
linear-gradient(rgba(var(--ct-maroon-rgb), var(--ct-photo-tint)), rgba(var(--ct-maroon-rgb), var(--ct-photo-tint)));
pointer-events: none;
}
/* chip kecil di pojok kiri bawah foto */
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__media.e-con::before {
content: var(--ct-tag);
position: absolute;
inset: auto auto 22px 22px;
z-index: 2;
width: auto;
height: auto;
padding: 8px 16px;
font-family: var(--ct-font);
font-size: 10.5px;
font-weight: 600;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
white-space: nowrap;
color: var(--ct-white);
background: var(--ct-maroon);
border: 1px solid rgba(255, 255, 255, .7);
border-radius: 0;
mix-blend-mode: normal;
transition: none;
opacity: var(--ct-tag-on);
pointer-events: none;
}
/* ---------------------------------------------------------------------
4. KONTEN (kanan) – ars-ct__content
--------------------------------------------------------------------- */
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__content.e-con {
--flex-direction: column;
--align-items: flex-start;
--justify-content: center;
--gap: 18px;
--row-gap: 18px;
--padding-top: clamp(32px, 4.4vw, 60px);
--padding-right: clamp(26px, 4vw, 56px);
--padding-bottom: clamp(32px, 4.4vw, 60px);
--padding-left: clamp(26px, 4vw, 56px);
overflow: hidden;
background-color: var(--ct-maroon-dark);
background-image:
radial-gradient(circle at 12% 96%, rgba(163, 34, 68, .55), transparent 46%),
radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .09), transparent 38%),
linear-gradient(160deg, var(--ct-maroon) 0%, var(--ct-maroon-dark) 100%);
}
/* cincin besar samar di pojok kanan atas */
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__content.e-con::before {
content: "";
position: absolute;
inset: -90px -90px auto auto;
z-index: 0;
width: 250px;
height: 250px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 50%;
mix-blend-mode: normal;
transition: none;
background: none;
opacity: 1;
box-shadow: 0 0 0 34px rgba(255, 255, 255, .04);
pointer-events: none;
}
/* titik-titik di pojok kanan bawah */
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__content.e-con::after {
content: "";
position: absolute;
inset: auto 24px 24px auto;
z-index: 0;
width: 84px;
height: 56px;
background-image: radial-gradient(rgba(255, 255, 255, .28) 1.4px, transparent 1.7px);
background-size: 14px 14px;
pointer-events: none;
}
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__content .elementor-widget {
position: relative;
z-index: 1;
width: 100%;
margin: 0;
}
/* ---- judul ---- */
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__title.elementor-widget::before {
content: "";
display: block;
width: 52px;
height: 2px;
margin-bottom: 16px;
background: linear-gradient(90deg, var(--ct-white), transparent);
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__title .elementor-heading-title {
margin: 0;
font-family: var(--ct-font-display);
font-size: var(--ct-title-size);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.01em;
color: var(--ct-white);
text-wrap: balance;
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__title .elementor-heading-title :is(span, em, b, strong) {
font-style: normal;
font-weight: inherit;
color: var(--ct-blush);
}
/* ---- teks ---- */
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__text {
max-width: 560px;
font-family: var(--ct-font);
font-size: var(--ct-text-size);
line-height: 1.8;
color: rgba(255, 255, 255, .86);
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__text p {
margin: 0 0 1em;
color: inherit;
font: inherit;
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__text p:last-child {
margin-bottom: 0;
}
/* ---- ICON LIST: baris panel transparan + garis putih di kiri ---- */
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__list .elementor-icon-list-items {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__list .elementor-icon-list-item {
position: relative;
display: flex;
align-items: center;
gap: 14px;
overflow: hidden;
margin: 0;
padding: 12px 16px 12px 20px;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 0;
transition: transform .35s var(--ct-ease), background-color .35s ease, border-color .35s ease;
}
/* tautan di dalam baris ikut rapi */
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__list .elementor-icon-list-item > a {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
color: inherit;
}
/* garis putih di kiri (memanjang saat hover) */
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__list .elementor-icon-list-item::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 5px;
background: linear-gradient(180deg, var(--ct-white), rgba(255, 255, 255, .45));
transform: scaleX(.6);
transform-origin: left center;
transition: transform .35s var(--ct-ease);
pointer-events: none;
}
/* ikon putih (warna dari panel tetap menang) */
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__list .elementor-icon-list-icon {
flex: none;
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__list .elementor-icon-list-icon i {
color: var(--e-icon-list-icon-color, var(--ct-white));
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__list .elementor-icon-list-icon svg {
fill: var(--e-icon-list-icon-color, var(--ct-white));
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__list .elementor-icon-list-text {
padding: 0;
font-family: var(--ct-font);
font-size: 15px;
line-height: 1.5;
color: rgba(255, 255, 255, .94);
}
/* ---- tombol: kotak outline putih ---- */
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__btn.elementor-widget {
margin-top: 6px;
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__btn .elementor-button {
position: relative;
overflow: hidden;
isolation: isolate;
box-sizing: border-box;
min-height: 48px;
padding: 15px 28px;
font-family: var(--ct-font);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
color: var(--ct-white);
background: transparent;
border: 1.5px solid rgba(255, 255, 255, .85);
border-radius: 0;
box-shadow: none;
transition: color .35s ease, border-color .35s ease, transform .35s var(--ct-ease), box-shadow .35s var(--ct-ease);
}
/* isian putih meluncur dari kiri */
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__btn .elementor-button::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--ct-white);
transform: scaleX(0);
transform-origin: left center;
transition: transform .45s var(--ct-ease);
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__btn .elementor-button-content-wrapper {
justify-content: center;
gap: 10px;
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__btn .elementor-button-text {
color: inherit;
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__btn .elementor-button-icon {
color: inherit;
transition: transform .35s var(--ct-ease);
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__btn .elementor-button-icon svg {
fill: currentColor;
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__btn .elementor-button:active {
transform: translate(0, 0);
box-shadow: none;
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__btn .elementor-button:focus-visible {
outline: 2px solid var(--ct-white);
outline-offset: 3px;
}
/* ---------------------------------------------------------------------
5. ANIMASI
a) Chip di foto melayang pelan (translate, murah)
b) Kartu masuk saat scroll – DESKTOP saja
--------------------------------------------------------------------- */
@keyframes arsCtBob {
from { translate: 0 0; }
to { translate: 0 -6px; }
}
@keyframes arsCtZoom {
from { opacity: calc(1 - var(--ct-reveal)); translate: 0 calc(40px * var(--ct-reveal)); scale: calc(1 - .04 * var(--ct-reveal)); }
to { opacity: 1; translate: 0 0; scale: 1; }
}
@media (prefers-reduced-motion: no-preference) {
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__media.e-con::before {
animation: arsCtBob 3.6s ease-in-out infinite alternate;
}
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__card.e-con {
animation: arsCtZoom linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
}
}
/* ---------------------------------------------------------------------
6. HOVER – hanya perangkat dengan mouse
--------------------------------------------------------------------- */
@media (hover: hover) {
/* kilau menyapu kartu */
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__card.e-con:hover::after {
transform: translateX(130%);
transition: transform 1.1s var(--ct-ease);
}
/* baris icon list */
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__list .elementor-icon-list-item:hover {
transform: translateX(5px);
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .34);
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__list .elementor-icon-list-item:hover::before {
transform: scaleX(1);
}
/* tombol */
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__btn .elementor-button:hover,
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__btn .elementor-button:focus-visible {
color: var(--ct-maroon);
border-color: var(--ct-white);
transform: translate(-3px, -3px);
box-shadow: 5px 5px 0 var(--ct-blush);
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__btn .elementor-button:hover::before,
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__btn .elementor-button:focus-visible::before {
transform: scaleX(1);
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__btn .elementor-button:hover .elementor-button-icon {
transform: translateX(4px);
}
}
/* ---------------------------------------------------------------------
7. TABLET (≤ 1024px)
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3).e-con {
--ct-pad-x: 32px;
--ct-media-h: clamp(300px, 44vw, 400px);
--ct-shape: 64px 14px 64px 14px;
--ct-watermark-size: clamp(80px, 18vw, 170px);
}
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__card.e-con-full,
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__card.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__text {
max-width: none;
}
}
/* ---------------------------------------------------------------------
8. MOBILE (≤ 767px)
Foto di atas, konten di bawah, tombol selebar penuh
--------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3).e-con {
--ct-pad-x: 20px;
--ct-pad-top: 56px;
--ct-pad-bottom: 84px;
--ct-media-h: clamp(220px, 62vw, 300px);
--ct-shape: 48px 12px 48px 12px;
--ct-title-size: clamp(26px, 7.4vw, 34px);
--ct-text-size: 15px;
--ct-watermark-size: 24vw;
}
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__card.e-con-full,
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__card.e-con-boxed > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
}
/* gradasi foto berpindah ke bagian bawah (menyatu dengan konten) */
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__media.e-con::after {
background:
linear-gradient(180deg, rgba(74, 12, 27, 0) 50%, rgba(74, 12, 27, .6) 100%),
linear-gradient(rgba(var(--ct-maroon-rgb), var(--ct-photo-tint)), rgba(var(--ct-maroon-rgb), var(--ct-photo-tint)));
}
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__media.e-con::before {
inset: auto auto 18px 18px;
padding: 7px 13px;
font-size: 9.5px;
}
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__content.e-con {
--padding-top: 30px;
--padding-right: 22px;
--padding-bottom: 32px;
--padding-left: 22px;
--gap: 16px;
--row-gap: 16px;
}
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__content.e-con::before {
inset: -70px -70px auto auto;
width: 190px;
height: 190px;
}
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3) .ars-ct__content.e-con::after {
display: none;
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__list .elementor-icon-list-item {
padding: 11px 14px 11px 18px;
gap: 12px;
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__list .elementor-icon-list-text {
font-size: 14.5px;
}
.elementor-5701 .elementor-element.elementor-element-7bc0cb3 .ars-ct__btn .elementor-button {
width: 100%;
min-height: 48px;
padding: 14px 22px;
font-size: 12px;
letter-spacing: .12em;
}
}
/* ---------------------------------------------------------------------
9. KURANGI ANIMASI
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3).e-con *,
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3).e-con *::before,
:where(.elementor-5701 .elementor-element.elementor-element-7bc0cb3).e-con *::after {
animation: none !important;
transition: none !important;
}
}/* End custom CSS */