body { background: #FBFFE8; --sep-cream: #fbffe7; --sep-cream-hero: #fbffe8; --sep-ink: #423018; --sep-body: #71512b; --sep-line: #71512b; --sep-line-w: 3px; --sep-radius: 20px; --sep-max: 1620px; --sep-pad-m: 16px; --sep-pad-t: 24px; --sep-pad-d: 80px; --sep-font-title: Inter, "Noto Sans Thai", sans-serif; --sep-font-desc: "Noto Sans Thai", Inter, sans-serif; --sep-ease: cubic-bezier(0.22, 1, 0.36, 1); --sep-accent: #c3ce8c; --sep-press: #5b4224; --sep-text: 20px; --sep-lh: 150%; --sep-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2225%22%20height%3D%2224%22%20viewBox%3D%220%200%2025%2024%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url%28%23c%29%22%3E%3Cpath%20d%3D%22M14.2936%200.00260202C14.9147%20-0.0517317%2015.7148%200.455383%2016.0254%200.993546C16.2517%201.37388%2016.1675%201.72835%2016.4623%202.03365C16.636%202.22252%2016.7544%202.46832%2016.9228%202.66754C17.1229%202.90558%2017.3966%203.0841%2017.6255%203.29109C17.9993%203.64038%2018.2651%204.09833%2018.6414%204.43986C19.031%204.83831%2019.4731%205.25745%2019.8784%205.65331C20.1626%205.98708%2020.3706%206.31826%2020.6732%206.62356C21.1654%207.13585%2021.5444%207.74904%2021.7549%208.4321C21.9234%208.89264%2022.1971%209.3299%2022.4866%209.72058C22.7708%2010.0932%2022.9182%2010.4942%2023.2472%2010.8461C23.6183%2011.2445%2023.9315%2011.6766%2024.2262%2012.1578C24.5552%2012.6598%2024.9974%2013.1902%2024.9974%2013.7853C24.9684%2014.4968%2024.1078%2014.7348%2023.8499%2015.3635C23.6788%2015.6714%2023.4077%2015.9198%2023.1972%2016.1992C22.984%2016.4864%2022.7866%2016.8694%2022.476%2017.0841C22.0918%2017.3092%2021.8865%2017.6016%2021.7339%2018.0026C21.697%2018.0776%2021.6654%2018.1139%2021.6181%2018.1785C21.3996%2018.4787%2020.9654%2018.5744%2020.7101%2018.8331C20.5101%2019.0142%2020.4021%2019.2575%2020.1916%2019.4386C19.3889%2019.9767%2018.5967%2020.5692%2017.7756%2021.0815C17.4755%2021.317%2017.2887%2021.6352%2016.9623%2021.85C16.4359%2022.1889%2015.978%2022.5071%2015.4095%2022.815C14.9279%2023.1436%2014.4805%2023.7206%2013.9383%2023.9483C13.383%2024.207%2012.5118%2023.348%2012.5303%2022.8202C12.5434%2022.6003%2012.6197%2022.3804%2012.7198%2022.1811C13.283%2021.3247%2014.291%2020.9263%2015.1305%2020.3804C15.649%2020.0621%2016.0964%2019.6249%2016.6439%2019.3584C16.9886%2019.1954%2017.2281%2018.9082%2017.515%2018.6831C18.1914%2018.3467%2018.6072%2017.6766%2019.1441%2017.1772C19.2941%2017.0479%2019.4099%2016.8926%2019.5389%2016.7452C19.7916%2016.4838%2020.0416%2016.3519%2020.26%2016.0802C20.4785%2015.6973%2020.8338%2015.423%2021.0996%2015.0841C21.2443%2014.9185%2021.3128%2014.6494%2021.5181%2014.5641C21.6575%2014.4838%2021.7839%2014.37%2021.8813%2014.2432C21.9628%2014.1423%2022.0786%2013.8215%2021.876%2013.8215C21.6496%2013.8577%2021.4654%2014.0518%2021.2286%2014.0932C20.939%2014.1941%2020.6601%2014.0388%2020.3785%2014.0233C20.1863%2014.0233%2019.9942%2014.1242%2019.8021%2014.1604C19.4152%2014.2225%2018.9678%2014.2018%2018.5862%2014.2251C18.4493%2014.2225%2018.323%2014.2199%2018.1914%2014.1837C18.0624%2014.1449%2017.9387%2014.0802%2017.8019%2014.0569C17.2308%2013.9379%2016.5807%2014.1346%2016.0096%2014.1061C15.5727%2014.0776%2015.1674%2014.0311%2014.7463%2014.1009C14.4357%2014.088%2014.1646%2014.0311%2013.8725%2014.2044C13.3435%2014.5201%2012.7566%2014.2044%2012.2065%2014.2044C11.9539%2014.2044%2011.7302%2014.3286%2011.4959%2014.3933C11.0406%2014.5692%2010.6353%2014.2794%2010.2695%2014.119C10.0958%2014.1087%209.95631%2014.2199%209.7984%2014.2639C9.60891%2014.3157%209.48258%2014.5227%209.27729%2014.4838C9.15096%2014.4502%209.0299%2014.3933%208.90094%2014.3648C8.45089%2014.2406%207.98242%2014.3286%207.52448%2014.3364C7.16128%2014.3648%206.75598%2014.2122%206.38225%2014.1992C6.02169%2014.1915%205.69007%2014.2717%205.3374%2014.2717C4.69786%2014.2743%204.07938%2014.075%203.4451%2014.0026C3.0898%2013.912%202.75292%2013.9948%202.41605%2013.9431C1.70018%2013.7956%200.847458%2013.6947%200.342142%2013.1048C-0.113169%2012.5589%20-0.226339%2011.436%200.729025%2011.3972C1.20539%2011.4256%201.67123%2011.511%202.14759%2011.511C2.39762%2011.4774%202.68713%2011.5498%202.90031%2011.6507C2.97926%2011.6766%203.04769%2011.6844%203.12665%2011.6714C3.32404%2011.6404%203.55301%2011.6145%203.76092%2011.5964C4.25045%2011.555%204.73471%2011.6016%205.21371%2011.5628C5.76113%2011.5498%206.30593%2011.5964%206.85336%2011.586C7.06653%2011.5472%207.07443%2011.7051%207.26656%2011.6663C7.5429%2011.6119%207.76661%2011.6637%208.05611%2011.6611C8.38773%2011.63%208.79566%2011.4877%209.11938%2011.5628C9.36414%2011.643%209.55627%2011.5498%209.78261%2011.5731C10.0405%2011.6016%2010.3037%2011.718%2010.5748%2011.6921C10.9064%2011.6611%2011.1933%2011.5964%2011.5144%2011.5653C11.717%2011.555%2011.8565%2011.6352%2012.0434%2011.6792C12.5513%2011.6792%2013.0172%2011.5886%2013.5304%2011.5369C13.8225%2011.5343%2014.1041%2011.5835%2014.391%2011.6249C14.6094%2011.6326%2014.8226%2011.5938%2015.0332%2011.586C15.2806%2011.5731%2015.5174%2011.6507%2015.7622%2011.599C15.9306%2011.586%2016.0806%2011.4722%2016.2333%2011.4412C16.4912%2011.4023%2016.6649%2011.5938%2016.9281%2011.4826C17.1281%2011.4463%2017.3466%2011.4308%2017.5492%2011.4619C17.7098%2011.4929%2017.8361%2011.586%2017.9993%2011.599C18.2756%2011.6559%2018.5362%2011.4929%2018.8151%2011.4644C19.1941%2011.3894%2019.5863%2011.4515%2019.96%2011.48C20.1679%2011.4619%2020.9101%2011.7723%2020.6759%2011.3428C20.5837%2011.1824%2020.3732%2011.0763%2020.2232%2010.9599C20.11%2010.8616%2020.0258%2010.7503%2019.9521%2010.6236C19.8152%2010.3778%2019.81%2010.044%2019.6652%209.79044C19.5099%209.43339%2019.181%209.22123%2018.9678%208.89005C18.7388%208.57958%2018.5388%208.2484%2018.2756%207.96638C17.9493%207.64038%2017.8361%207.16172%2017.4834%206.85901C16.407%206.0647%2015.9754%204.76328%2015.0174%203.88617C14.8279%203.72058%2014.6647%203.53947%2014.5542%203.3299C14.4094%203.07117%2014.312%202.7788%2014.1436%202.54077C13.9673%202.32084%2013.7383%202.17595%2013.5883%201.91205C13.4593%201.63262%2013.3777%201.32214%2013.404%201.01425C13.4856%200.608035%2013.8672%200.103508%2014.2778%200.00260202H14.2883H14.2936ZM20.9364%2013.7697C20.8917%2013.7775%2020.5311%2013.793%2020.7338%2013.8551C20.7627%2013.8681%2020.7706%2013.8862%2020.7969%2013.8732C20.8259%2013.8551%2020.9075%2013.7956%2020.9364%2013.7723V13.7697Z%22%20fill%3D%22black%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22c%22%3E%3Crect%20width%3D%2225%22%20height%3D%2224%22%20fill%3D%22white%22%20transform%3D%22matrix%28-1%200%200%201%2025%200%29%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); } :is(.home-hero-banner, .home-rooted-in-patong, .home-rooted-in-patong-slide, .home-stay-for-a-while, .home-different-rhythm, .home-join-the-waitlist, .home-map, .space-hero-section, .space-map-point, .page-the-spaces-section, .space-bringing-to-the-village-section, .space-full-screen-video) { box-sizing: border-box; } :is(.home-hero-banner, .home-rooted-in-patong, .home-rooted-in-patong-slide, .home-stay-for-a-while, .home-different-rhythm, .home-join-the-waitlist, .home-map, .space-hero-section, .space-map-point, .page-the-spaces-section, .space-bringing-to-the-village-section, .space-full-screen-video) * { box-sizing: border-box; } :is(.home-hero-banner, .home-rooted-in-patong, .home-rooted-in-patong-slide, .home-stay-for-a-while, .home-different-rhythm, .home-join-the-waitlist, .home-map, .space-hero-section, .space-map-point, .page-the-spaces-section, .space-bringing-to-the-village-section, .space-full-screen-video) :is(h1, h2, h3, h4, p) { margin: 0; } :is(.home-hero-banner, .home-rooted-in-patong, .home-rooted-in-patong-slide, .home-stay-for-a-while, .home-different-rhythm, .home-join-the-waitlist, .home-map, .space-hero-section, .space-map-point, .page-the-spaces-section, .space-bringing-to-the-village-section, .space-full-screen-video) p:empty { display: none; } :is(.home-rooted-in-patong-inner, .home-rooted-in-patong-slide-inner, .home-stay-for-a-while-inner, .home-join-the-waitlist-inner, .space-hero-section-inner, .page-the-spaces-section-inner, .space-bringing-to-the-village-section-inner) { width: 100%; max-width: 100%; margin-inline: auto; padding-inline: var(--sep-pad-m); } :is(.home-rooted-in-patong-frame, .home-rooted-in-patong-slide-frame, .home-stay-for-a-while-frame, .space-hero-section-frame, .page-the-spaces-section-frame, .space-bringing-to-the-village-section-frame) { border-inline: var(--sep-line-w) solid var(--sep-line); } @media (min-width: 768px) { :is(.home-rooted-in-patong-inner, .home-rooted-in-patong-slide-inner, .home-stay-for-a-while-inner, .home-join-the-waitlist-inner, .space-hero-section-inner, .page-the-spaces-section-inner, .space-bringing-to-the-village-section-inner) { padding-inline: var(--sep-pad-t); } } @media (min-width: 1200px) { :is(.home-rooted-in-patong-inner, .home-rooted-in-patong-slide-inner, .home-stay-for-a-while-inner, .home-join-the-waitlist-inner, .space-hero-section-inner, .page-the-spaces-section-inner, .space-bringing-to-the-village-section-inner) { padding-inline: var(--sep-pad-d); } } @media (min-width: 1620px) { .home-hero-banner-overlay, :is(.home-rooted-in-patong-inner, .home-rooted-in-patong-slide-inner, .home-stay-for-a-while-inner, .home-join-the-waitlist-inner, .space-hero-section-inner, .page-the-spaces-section-inner, .space-bringing-to-the-village-section-inner) { max-width: var(--sep-max); padding-inline: 0; } } :is(.home-rooted-in-patong, .home-rooted-in-patong-slide, .home-stay-for-a-while, .home-join-the-waitlist, .space-hero-section, .space-map-point, .page-the-spaces-section, .space-bringing-to-the-village-section) { width: 100%; background: var(--sep-cream); } :is(.home-rooted-in-patong-title, .home-stay-for-a-while-title, .page-the-spaces-section-title) { color: var(--sep-ink); font-family: var(--sep-font-title); font-weight: 700; line-height: 100%; } :is(.home-rooted-in-patong-desc, .home-stay-for-a-while-desc, .space-hero-section-desc, .page-the-spaces-section-desc, .space-bringing-to-the-village-section-desc, .home-join-the-waitlist-desc, .home-rooted-in-patong-slide-eyebrow, .home-rooted-in-patong-slide-desc) { color: var(--sep-body); font-family: var(--sep-font-desc); font-size: var(--sep-text); font-weight: 400; line-height: var(--sep-lh); } .home-rooted-in-patong-cell:not(:last-child)::after, .home-rooted-in-patong-cell-village-title::after, .home-rooted-in-patong-cell-days::after, .home-rooted-in-patong-cell-flower::after, .home-stay-for-a-while-cell-intro::after, .home-stay-for-a-while-cell-cafe::after, .home-stay-for-a-while-cell-find::after, .space-hero-section-col-title::after { content: ""; position: absolute; top: 0; right: 0; width: var(--sep-line-w); height: 100%; background: var(--sep-line); pointer-events: none; z-index: 1; } .home-stay-for-a-while-play, .space-full-screen-video-play { position: absolute; inset: 0; z-index: 2; cursor: pointer; background: transparent; border: 0; } .home-stay-for-a-while-play::before, .home-stay-for-a-while-play::after, .space-full-screen-video-play::before, .space-full-screen-video-play::after { content: ""; position: absolute; left: 50%; top: 50%; pointer-events: none; } .home-stay-for-a-while-play::before, .space-full-screen-video-play::before { width: var(--sep-play); height: var(--sep-play); transform: translate(-50%, -50%); border: 2px solid var(--sep-play-ring, #fff); border-radius: 50%; } .home-stay-for-a-while-play::after, .space-full-screen-video-play::after { transform: translate(var(--sep-play-tx, -30%), -50%); border-style: solid; border-width: var(--sep-play-tri); border-color: transparent transparent transparent #fff; } .home-stay-for-a-while-media.is-playing .home-stay-for-a-while-play, .space-full-screen-video-media.is-playing .space-full-screen-video-play { opacity: 0; pointer-events: none; } @keyframes sep-fade-in { from { opacity: 0; transform: var(--sep-from, translateY(28px)); } to { opacity: 1; transform: none; } } .home-hero-banner { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; } .home-hero-banner-slides, .home-hero-banner-video { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .home-hero-banner-slide { position: absolute; inset: 0; opacity: 0; z-index: 0; pointer-events: none; transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1); } .home-hero-banner-slide.is-active { opacity: 1; z-index: 1; } .home-hero-banner-slide-img, .home-hero-banner-video-el { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .home-hero-banner-slide-img-mobile { display: none; } .home-hero-banner-video { overflow: hidden; } .home-hero-banner-video-el { position: absolute; inset: 0; min-width: 100%; min-height: 100%; } .home-hero-banner-overlay { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; display: flex; width: 100%; max-width: var(--sep-max); margin-inline: auto; padding: 40px var(--sep-pad-d); flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; pointer-events: none; } .home-hero-banner-title, .home-hero-banner-desc { overflow: hidden; color: var(--sep-cream-hero); text-align: left; } .home-hero-banner-title { font-family: var(--sep-font-title); font-size: 120px; font-weight: 700; line-height: 90%; letter-spacing: -3.6px; text-transform: uppercase; padding-bottom: 0.08em; } .home-hero-banner-title-line, .home-hero-banner-desc-line { display: block; } .home-hero-banner-title-line span { display: inline-block; } .home-hero-banner-desc { font-family: var(--sep-font-desc); font-size: var(--sep-text); font-weight: 400; line-height: var(--sep-lh); } @media (max-width: 1199px) { .home-hero-banner-overlay { padding: 20px var(--sep-pad-t); justify-content: flex-start; } } @media (max-width: 1200px) { .home-hero-banner-title { font-size: 60px; line-height: 130%; letter-spacing: normal; } } @media (max-width: 767px) { .home-hero-banner-slide-img-desktop { display: none; } .home-hero-banner-slide-img-mobile { display: block; } .home-hero-banner-overlay { padding: 20px var(--sep-pad-m); } } .home-rooted-in-patong { --hrip-lead-w: 689px; --hrip-lead-pad-x: 60px; --hrip-lead-cell: calc(var(--hrip-lead-w) + (var(--hrip-lead-pad-x) * 2)); --hrip-anim: 3.2s var(--sep-ease); --hrip-anim-row: 2.9s var(--sep-ease); padding-top: var(--sep-pad-d); } .home-rooted-in-patong-headline { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; width: 100%; padding: 40px 20px; overflow: hidden; color: var(--sep-ink); text-align: center; font-family: var(--sep-font-title); font-size: 120px; font-weight: 700; line-height: 90%; letter-spacing: -3.6px; text-transform: uppercase; } .home-rooted-in-patong-headline-line { display: block; } .home-rooted-in-patong-headline-break { display: none; } .home-rooted-in-patong.hrip-anim .home-rooted-in-patong-headline-line { opacity: 0; transform: translateY(0.45em); transition: opacity var(--hrip-anim), transform var(--hrip-anim); transition-delay: 0.45s; } .home-rooted-in-patong.hrip-anim .home-rooted-in-patong-headline-line:nth-child(2) { transition-delay: 1.15s; } .home-rooted-in-patong.hrip-anim .home-rooted-in-patong-headline.is-inview .home-rooted-in-patong-headline-line { opacity: 1; transform: translateY(0); } .home-rooted-in-patong.hrip-anim .home-rooted-in-patong-row .home-rooted-in-patong-cell { opacity: 0; transform: translateY(28px); transition: opacity var(--hrip-anim-row), transform var(--hrip-anim-row); } .home-rooted-in-patong.hrip-anim .home-rooted-in-patong-row.is-inview .home-rooted-in-patong-cell:nth-child(1) { transition-delay: 0s; } .home-rooted-in-patong.hrip-anim .home-rooted-in-patong-row.is-inview .home-rooted-in-patong-cell:nth-child(2) { transition-delay: 0.4s; } .home-rooted-in-patong.hrip-anim .home-rooted-in-patong-row.is-inview .home-rooted-in-patong-cell:nth-child(3) { transition-delay: 0.8s; } .home-rooted-in-patong.hrip-anim .home-rooted-in-patong-row.is-inview .home-rooted-in-patong-cell { opacity: 1; transform: none; } .home-rooted-in-patong-grid { display: flex; flex-direction: column; } .home-rooted-in-patong-row { display: grid; align-items: stretch; min-width: 0; } .home-rooted-in-patong-row-village { grid-template-columns: var(--hrip-lead-cell) minmax(0, 1fr) minmax(0, 1fr); } .home-rooted-in-patong-row-hat { grid-template-columns: minmax(0, 1fr) var(--hrip-lead-cell) minmax(0, 1fr); } .home-rooted-in-patong-row-hands { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--hrip-lead-cell); } .home-rooted-in-patong-cell { position: relative; display: flex; flex-direction: column; min-width: 0; align-self: stretch; } .home-rooted-in-patong-cell-lead { width: 100%; max-width: none; } .home-rooted-in-patong-cell-image { padding: 40px 60px; justify-content: center; align-items: center; gap: 10px; } .home-rooted-in-patong-cell-image.home-rooted-in-patong-cell-lead { padding-inline: var(--hrip-lead-pad-x); } .home-rooted-in-patong-cell-text, .home-rooted-in-patong-cell-mixed { width: 100%; padding: 40px; align-items: center; gap: 10px; } .home-rooted-in-patong-cell-text { justify-content: flex-start; } .home-rooted-in-patong-cell-mixed { justify-content: space-between; } .home-rooted-in-patong-cell-text .home-rooted-in-patong-title, .home-rooted-in-patong-cell-text .home-rooted-in-patong-desc, .home-rooted-in-patong-cell-mixed .home-rooted-in-patong-title { max-width: 404px; } .home-rooted-in-patong-title { width: 100%; font-size: 48px; } .home-rooted-in-patong-desc { width: 100%; } .home-rooted-in-patong-photo { display: block; object-fit: cover; object-position: center; border-radius: var(--sep-radius); } .home-rooted-in-patong-photo-village, .home-rooted-in-patong-photo-hat, .home-rooted-in-patong-photo-hands { width: var(--hrip-lead-w); height: auto; flex-shrink: 0; } .home-rooted-in-patong-photo-village { aspect-ratio: 363 / 191; } .home-rooted-in-patong-photo-hat { aspect-ratio: 689 / 416; } .home-rooted-in-patong-photo-hands { aspect-ratio: 689 / 386; } .home-rooted-in-patong-photo-baskets { width: 100%; height: auto; } .home-rooted-in-patong-illustration { display: block; width: 100%; height: auto; object-fit: contain; border-radius: var(--sep-radius); } .home-rooted-in-patong-illustration-palms, .home-rooted-in-patong-illustration-flower { max-width: 100%; } @media (min-width: 1201px) and (max-width: 1619px) { .home-rooted-in-patong { --hrip-lead-w: min(689px, 42vw); --hrip-lead-pad-x: 40px; padding-top: 40px; } .home-rooted-in-patong-headline { font-size: clamp(64px, 7.4vw, 120px); letter-spacing: -0.03em; } .home-rooted-in-patong-title { font-size: clamp(32px, 2.8vw, 48px); } } @media (min-width: 768px) and (max-width: 1200px) { .home-rooted-in-patong { --hrip-lead-w: 100%; --hrip-lead-pad-x: 40px; padding-top: 40px; } .home-rooted-in-patong-headline { padding: 48px var(--sep-pad-t); font-size: clamp(48px, 6.4vw, 64px); letter-spacing: -1.8px; } .home-rooted-in-patong-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .home-rooted-in-patong-cell-lead { grid-column: 1 / -1; grid-row: 1; width: 100%; } .home-rooted-in-patong-row > .home-rooted-in-patong-cell:not(.home-rooted-in-patong-cell-lead) { grid-row: 2; } .home-rooted-in-patong-cell:not(:last-child)::after { content: none; } .home-rooted-in-patong-cell-village-title::after, .home-rooted-in-patong-cell-days::after, .home-rooted-in-patong-cell-flower::after { content: ""; } .home-rooted-in-patong-cell-image, .home-rooted-in-patong-cell-text, .home-rooted-in-patong-cell-mixed { padding: 32px 28px; } .home-rooted-in-patong-cell-image.home-rooted-in-patong-cell-lead { padding: 32px 40px; } .home-rooted-in-patong-photo-village, .home-rooted-in-patong-photo-hat, .home-rooted-in-patong-photo-hands, .home-rooted-in-patong-photo-baskets { width: 100%; height: auto; max-height: 440px; } .home-rooted-in-patong-cell-text .home-rooted-in-patong-title, .home-rooted-in-patong-cell-text .home-rooted-in-patong-desc, .home-rooted-in-patong-cell-mixed .home-rooted-in-patong-title { max-width: none; } .home-rooted-in-patong-title { font-size: 32px; } .home-rooted-in-patong-illustration-palms, .home-rooted-in-patong-illustration-flower { max-width: 250px; } } @media (max-width: 767px) { .home-rooted-in-patong { --hrip-lead-w: 100%; --hrip-lead-pad-x: var(--sep-pad-m); padding-top: 40px; } .home-rooted-in-patong-headline { padding: 40px var(--sep-pad-m); font-size: 40px; letter-spacing: -1.2px; } .home-rooted-in-patong-headline-break { display: block; } .home-rooted-in-patong-row { display: contents; } .home-rooted-in-patong-cell:not(:last-child)::after { content: none; } .home-rooted-in-patong-cell-village { order: 1; } .home-rooted-in-patong-cell-village-title { order: 2; } .home-rooted-in-patong-cell-intro { order: 3; } .home-rooted-in-patong-cell-days { order: 4; } .home-rooted-in-patong-cell-hat { order: 5; } .home-rooted-in-patong-cell-baskets { order: 6; } .home-rooted-in-patong-cell-flower { order: 7; } .home-rooted-in-patong-cell-handmade { order: 8; } .home-rooted-in-patong-cell-hands { order: 9; } .home-rooted-in-patong-cell-image, .home-rooted-in-patong-cell-text, .home-rooted-in-patong-cell-mixed { width: 100%; padding: 24px var(--sep-pad-m); } .home-rooted-in-patong-photo-village, .home-rooted-in-patong-photo-hat, .home-rooted-in-patong-photo-hands, .home-rooted-in-patong-photo-baskets { width: 100%; height: auto; } .home-rooted-in-patong-cell-text .home-rooted-in-patong-title, .home-rooted-in-patong-cell-text .home-rooted-in-patong-desc, .home-rooted-in-patong-cell-mixed .home-rooted-in-patong-title { max-width: none; } .home-rooted-in-patong-title { font-size: 32px; } } .home-rooted-in-patong-slide { --hrips-fade: 0.85s var(--sep-ease); --hrips-pad-x: 60px; padding-bottom: var(--sep-pad-d); } .home-rooted-in-patong-slide-frame { position: relative; } .home-rooted-in-patong-slide-viewport { display: grid; } .home-rooted-in-patong-slide-item { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--hrips-fade), visibility var(--hrips-fade); } .home-rooted-in-patong-slide-item.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; } .home-rooted-in-patong-slide-media { padding: 40px var(--hrips-pad-x); } .home-rooted-in-patong-slide-media picture, .home-rooted-in-patong-slide-media img { display: block; width: 100%; } .home-rooted-in-patong-slide-media img { height: auto; aspect-ratio: 1376 / 620; max-height: 500px; object-fit: cover; object-position: center; border-radius: var(--sep-radius); } .home-rooted-in-patong-slide-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: 280px; } .home-rooted-in-patong-slide-col-left, .home-rooted-in-patong-slide-col-right { display: flex; flex-direction: column; justify-content: flex-start; padding: 40px var(--hrips-pad-x) 88px; gap: 12px; } .home-rooted-in-patong-slide-col-right { position: relative; border-left: var(--sep-line-w) solid var(--sep-line); } .home-rooted-in-patong-slide-eyebrow { font-weight: 500; } .home-rooted-in-patong-slide-desc { font-weight: 400; max-width: 560px; } .home-rooted-in-patong-slide-title { color: var(--sep-ink); font-family: var(--sep-font-title); font-size: 48px; font-weight: 700; line-height: 100%; text-transform: uppercase; } .home-rooted-in-patong-slide-nav { position: relative; z-index: 20; display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding: 0 var(--hrips-pad-x) 40px; margin-top: -72px; } @media (min-width: 768px) and (max-width: 1199px) { .home-rooted-in-patong-slide { --hrips-pad-x: 32px; } .home-rooted-in-patong-slide-media { padding: 24px var(--hrips-pad-x); } .home-rooted-in-patong-slide-col-left, .home-rooted-in-patong-slide-col-right { padding: 28px var(--hrips-pad-x) 72px; } .home-rooted-in-patong-slide-nav { padding: 0 var(--hrips-pad-x) 28px; margin-top: -56px; } .home-rooted-in-patong-slide-body { min-height: 220px; } } @media (max-width: 767px) { .home-rooted-in-patong-slide { padding-bottom: 40px; } .home-rooted-in-patong-slide-media, .home-rooted-in-patong-slide-col-left, .home-rooted-in-patong-slide-col-right { padding: 24px var(--sep-pad-m) 0; } .home-rooted-in-patong-slide-media img { aspect-ratio: 3 / 4; } .home-rooted-in-patong-slide-body { display: flex; flex-direction: column; min-height: 0; } .home-rooted-in-patong-slide-col-right { border-left: 0; padding-bottom: 24px; } .home-rooted-in-patong-slide-title { font-size: 32px; } .home-rooted-in-patong-slide-desc { max-width: none; } .home-rooted-in-patong-slide-nav { justify-content: space-between; width: 100%; margin-top: 0; padding: 8px var(--sep-pad-m) 32px; gap: 0; } } .home-stay-for-a-while { --hsfw-video-w: 1093px; --sep-play: 88px; --sep-play-ring: rgba(255, 255, 255, 0.92); --sep-play-tx: -30%; --sep-play-tri: 11px 0 11px 18px; padding-block: 80px; } .home-stay-for-a-while-row-top, .home-stay-for-a-while-row-bottom, .home-stay-for-a-while-bottom-right { display: grid; align-items: stretch; min-width: 0; } .home-stay-for-a-while-row-top { grid-template-columns: minmax(0, 1fr) minmax(0, var(--hsfw-video-w)); } .home-stay-for-a-while-row-bottom, .home-stay-for-a-while-bottom-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .home-stay-for-a-while-cell { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 40px; } .home-stay-for-a-while.hsfw-wait .home-stay-for-a-while-cell { opacity: 0; transform: translateY(28px); } .home-stay-for-a-while.hsfw-wait .home-stay-for-a-while-cell.is-inview, .home-stay-for-a-while.hsfw-wait .home-stay-for-a-while-inner.is-inview .home-stay-for-a-while-cell { animation: hsfw-row-rise 2.9s var(--sep-ease) both; } .home-stay-for-a-while.hsfw-wait .home-stay-for-a-while-cell-video.is-inview, .home-stay-for-a-while.hsfw-wait .home-stay-for-a-while-inner.is-inview .home-stay-for-a-while-cell-video { animation-delay: 0.4s; } .home-stay-for-a-while.hsfw-wait .home-stay-for-a-while-cell-cafe.is-inview, .home-stay-for-a-while.hsfw-wait .home-stay-for-a-while-inner.is-inview .home-stay-for-a-while-cell-cafe { animation-delay: 0.4s; } .home-stay-for-a-while.hsfw-wait .home-stay-for-a-while-cell-find.is-inview, .home-stay-for-a-while.hsfw-wait .home-stay-for-a-while-inner.is-inview .home-stay-for-a-while-cell-find { animation-delay: 0.7s; } .home-stay-for-a-while.hsfw-wait .home-stay-for-a-while-cell-discover.is-inview, .home-stay-for-a-while.hsfw-wait .home-stay-for-a-while-inner.is-inview .home-stay-for-a-while-cell-discover { animation-delay: 1s; } @keyframes hsfw-row-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } .home-stay-for-a-while-cell-video, .home-stay-for-a-while-cell-cafe { padding: 40px 60px; justify-content: center; } .home-stay-for-a-while-cell-intro { justify-content: flex-start; gap: 20px; } .home-stay-for-a-while-cell-find { justify-content: flex-start; gap: 24px; } .home-stay-for-a-while-cell-discover { justify-content: flex-start; } .home-stay-for-a-while-title { font-size: 48px; text-transform: uppercase; } .home-stay-for-a-while-media { position: relative; width: 100%; overflow: hidden; border-radius: var(--sep-radius); } .home-stay-for-a-while-video, .home-stay-for-a-while-media-embed iframe { display: block; width: 100%; height: auto; aspect-ratio: 169 / 95; object-fit: cover; object-position: center; border: 0; border-radius: var(--sep-radius); background: #000; } .home-stay-for-a-while-media-embed { aspect-ratio: 169 / 95; } .home-stay-for-a-while-media-embed iframe { height: 100%; aspect-ratio: auto; } .home-stay-for-a-while-photo { display: block; width: 100%; object-fit: cover; object-position: center; border-radius: var(--sep-radius); } .home-stay-for-a-while-photo-video { aspect-ratio: 169 / 95; height: auto; } .home-stay-for-a-while-photo-cafe { height: 100%; min-height: 420px; flex: 1; } .home-stay-for-a-while-illustration { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; border-radius: var(--sep-radius); } @media (min-width: 1200px) and (max-width: 1619px) { .home-stay-for-a-while { --hsfw-video-w: 62%; } .home-stay-for-a-while-title { font-size: clamp(32px, 2.8vw, 48px); } .home-stay-for-a-while-photo-cafe { min-height: 320px; } } @media (min-width: 768px) and (max-width: 1199px) { .home-stay-for-a-while { padding-block: 40px; } .home-stay-for-a-while-row-top { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); } .home-stay-for-a-while-bottom-right { grid-template-columns: 1fr; grid-template-rows: auto auto; } .home-stay-for-a-while-cell-find::after { content: none; } .home-stay-for-a-while-title { font-size: 32px; } .home-stay-for-a-while-photo-cafe { min-height: 100%; } .home-stay-for-a-while-illustration { max-width: 100%; } .home-stay-for-a-while { --sep-play: 64px; --sep-play-tri: 8px 0 8px 14px; } } @media (max-width: 767px) { .home-stay-for-a-while { padding-block: 40px; } .home-stay-for-a-while-cell, .home-stay-for-a-while-cell-video, .home-stay-for-a-while-cell-cafe { padding: 40px 20px; } .home-stay-for-a-while-row-top, .home-stay-for-a-while-row-bottom, .home-stay-for-a-while-bottom-right { display: contents; } .home-stay-for-a-while-frame { display: flex; flex-direction: column; } .home-stay-for-a-while-cell-intro { order: 1; } .home-stay-for-a-while-cell-video { order: 2; } .home-stay-for-a-while-cell-cafe { order: 3; } .home-stay-for-a-while-cell-find { order: 4; } .home-stay-for-a-while-cell-discover { order: 5; } .home-stay-for-a-while-cell-intro::after, .home-stay-for-a-while-cell-cafe::after, .home-stay-for-a-while-cell-find::after { content: none; } .home-stay-for-a-while-title { font-size: 32px; } .home-stay-for-a-while-photo-cafe { height: auto; min-height: 0; aspect-ratio: 4 / 3; flex: none; } .home-stay-for-a-while-illustration { max-width: 100%; } .home-stay-for-a-while { --sep-play: 56px; --sep-play-tri: 7px 0 7px 12px; } } .home-different-rhythm { --hdr-text: #fcfdf6; --hdr-hover: var(--sep-accent); --hdr-press: #b9c28f; --hdr-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); position: relative; width: 100%; height: 100vh; height: 100dvh; max-height: 800px; overflow: hidden; color: var(--hdr-text); } .home-different-rhythm-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .home-different-rhythm-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .home-different-rhythm-overlay { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; min-height: 100%; width: 100%; padding: 80px var(--sep-pad-d) 64px; } .home-different-rhythm-title, .home-different-rhythm-subtitle, .home-different-rhythm-desc { color: var(--hdr-text); text-align: center; text-shadow: var(--hdr-shadow); } .home-different-rhythm-title { display: flex; flex-direction: column; align-items: center; font-family: var(--sep-font-title); font-size: 80px; font-weight: 700; line-height: 90%; letter-spacing: -2.4px; text-transform: uppercase; } .home-different-rhythm-title-row { display: flex; justify-content: center; column-gap: 0.28em; } .home-different-rhythm-title-line { display: block; overflow: hidden; } .home-different-rhythm-title-line span { display: inline-block; } .home-different-rhythm-bottom { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 720px; } .home-different-rhythm-subtitle { font-family: var(--sep-font-title); font-size: 48px; font-weight: 700; line-height: 100%; text-transform: uppercase; } .home-different-rhythm-desc { margin-top: 12px; font-family: var(--sep-font-desc); font-size: 18px; font-weight: 200; line-height: 150%; } .home-different-rhythm a.home-different-rhythm-cta:is(:link, :visited) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; color: var(--hdr-text); font-family: var(--sep-font-desc); font-size: 18px; font-weight: 500; line-height: 150%; text-align: center; text-decoration: none; text-shadow: none; text-transform: uppercase; transition: color 0.15s ease; } .home-different-rhythm-cta-label { border-bottom: 1px solid transparent; padding-bottom: 1px; text-decoration: none; } .home-different-rhythm-cta-icon { display: block; width: 18px; height: 18px; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--sep-arrow) center / contain no-repeat; mask: var(--sep-arrow) center / contain no-repeat; } .home-different-rhythm a.home-different-rhythm-cta:is(:hover, :focus-visible) { color: var(--hdr-hover); text-decoration: none; } .home-different-rhythm a.home-different-rhythm-cta:is(:hover, :focus-visible) .home-different-rhythm-cta-label { border-bottom-color: currentColor; } .home-different-rhythm a.home-different-rhythm-cta:active { color: var(--hdr-press); text-decoration: none; } .home-different-rhythm a.home-different-rhythm-cta:active .home-different-rhythm-cta-label { border-bottom-color: currentColor; } .home-different-rhythm-break-m { display: none; } .home-different-rhythm.hdr-on .home-different-rhythm-bottom { opacity: 0; transform: translateY(40px); transition: opacity 2s var(--sep-ease) 0.28s, transform 2s var(--sep-ease) 0.28s; } .home-different-rhythm.hdr-on .home-different-rhythm-bottom.is-inview { opacity: 1; transform: none; } @media (max-width: 1200px) { .home-different-rhythm-overlay { padding: 40px 20px 40px; } .home-different-rhythm-title { font-size: 40px; letter-spacing: -1.2px; } .home-different-rhythm-title-row { flex-direction: column; align-items: center; column-gap: 0; } .home-different-rhythm-subtitle { font-size: 32px; } .home-different-rhythm-break-m { display: block; } .home-different-rhythm-bg img { object-position: center center; } } .home-join-the-waitlist { --hjtw-btn-hover: var(--sep-body); --hjtw-btn-press: var(--sep-press); overflow: hidden; } .home-join-the-waitlist-marquee { width: 100%; overflow: hidden; } .home-join-the-waitlist-marquee-top { padding-bottom: 18px; padding-top: 20px; } .home-join-the-waitlist-marquee-bottom { padding-top: 18px; padding-bottom: 20px; } .home-join-the-waitlist-marquee-track { display: flex; width: max-content; animation: hjtw-marquee 50s linear infinite; } .home-join-the-waitlist-marquee-bottom .home-join-the-waitlist-marquee-track { animation-direction: reverse; } .home-join-the-waitlist-marquee-copy { flex-shrink: 0; white-space: nowrap; color: var(--sep-body); font-family: var(--sep-font-title); font-size: 40px; font-weight: 700; line-height: 90%; letter-spacing: -1.2px; text-transform: uppercase; } .home-join-the-waitlist-inner { padding-block: 0; } .home-join-the-waitlist-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; height: 460px; border-radius: 28px; box-shadow: 0 8px 28px rgba(66, 48, 24, 0.12); } .home-join-the-waitlist-card-bg { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } .home-join-the-waitlist-card-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; max-width: 980px; padding: 64px 40px; text-align: center; } .home-join-the-waitlist-title { color: var(--sep-ink); text-align: center; font-family: var(--sep-font-title); font-size: 80px; font-weight: 700; line-height: 90%; letter-spacing: -2.4px; } .home-join-the-waitlist-desc { text-align: center; } .home-join-the-waitlist a.home-join-the-waitlist-btn:is(:link, :visited) { display: flex; align-items: flex-start; justify-content: center; padding: 16px 32px; border: 1px solid var(--sep-ink); border-radius: 100px; background: transparent; color: var(--sep-ink); font-family: var(--sep-font-desc); font-size: 16px; font-weight: 500; line-height: 150%; text-decoration: none; text-shadow: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .home-join-the-waitlist a.home-join-the-waitlist-btn:is(:hover, :focus-visible) { background: var(--hjtw-btn-hover); border-color: var(--hjtw-btn-hover); color: #fff; text-decoration: none; } .home-join-the-waitlist a.home-join-the-waitlist-btn:active { background: var(--hjtw-btn-press); border-color: var(--hjtw-btn-press); color: #fff; text-decoration: none; } @keyframes hjtw-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 1200px) { .home-join-the-waitlist-marquee-copy { font-size: 20px; letter-spacing: -0.6px; } .home-join-the-waitlist-card { border-radius: 20px; } .home-join-the-waitlist-card-body { padding: 48px 24px; } .home-join-the-waitlist-title { font-size: 40px; letter-spacing: -1.2px; } } .home-map { width: 100%; height: 400px; overflow: hidden; } .home-map-frame { display: block; width: 100%; height: 400px; border: 0; } .space-hero-section-row { display: flex; align-items: stretch; min-width: 0; } .space-hero-section-col { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 40px; gap: 10px; align-self: stretch; } .space-hero-section-col-title { flex: 1 0 0; justify-content: flex-start; align-items: flex-start; } .space-hero-section-col-desc { width: 404px; flex-shrink: 0; align-items: flex-start; } .space-hero-section-title { overflow: hidden; color: var(--sep-ink); font-family: var(--sep-font-title); font-size: 120px; font-weight: 700; line-height: 90%; letter-spacing: -3.6px; padding-bottom: 0.08em; } .space-hero-section-title-line { display: block; } .space-hero-section-title-line span { display: inline-block; } .space-hero-section.shs-wait .space-hero-section-title-line span { transform: translateY(115%); } .space-hero-section.shs-wait .space-hero-section-col-desc { --sep-from: translateY(28px); opacity: 0; transform: var(--sep-from); } .space-hero-section.shs-wait .space-hero-section-row.is-inview .space-hero-section-col-desc { animation: sep-fade-in 1.2s var(--sep-ease) 0.12s both; } .space-hero-section-break-m { display: none; } .space-hero-section-desc { width: 100%; } @media (max-width: 1200px) { .space-hero-section-row { flex-direction: column; } .space-hero-section-col { width: 100%; padding: 20px; } .space-hero-section-col-title { flex: none; justify-content: flex-start; align-items: flex-start; } .space-hero-section-col-title::after { content: none; } .space-hero-section-col-desc { width: 100%; align-items: flex-start; } .space-hero-section-title { font-size: 40px; letter-spacing: -1.2px; } .space-hero-section-break-m { display: block; } } .space-map-point { } .space-map-point-inner { width: 100%; max-width: var(--sep-max); margin-inline: auto; padding: 40px 80px; } .space-map-point-frame { padding: 0; } .space-map-point-scroller { display: flex; width: 100%; } .space-map-point-photo { display: block; flex: 1 0 0; width: 100%; object-fit: cover; object-position: center; border-radius: var(--sep-radius); box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1); } @media (min-width: 1620px) { .space-map-point-inner { padding: 40px 0; } } @media (max-width: 1200px) { .space-map-point-scroller { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; padding-left: var(--sep-pad-t); } .space-map-point-inner { padding: 40px 0px; } .space-map-point-scroller::-webkit-scrollbar { display: none; width: 0; height: 0; } .space-map-point-photo { flex: 0 0 auto; width: auto; height: 927px; max-width: none; margin-right: var(--sep-pad-t); } } @media (max-width: 768px) { .space-map-point-scroller { padding-left: var(--sep-pad-m); } .space-map-point-photo { flex: 0 0 auto; width: auto; height: 927px; max-width: none; margin-right: var(--sep-pad-m); } } .page-the-spaces-section { --pts-glow: var(--sep-accent); --pts-anim: 2.6s var(--sep-ease); } .page-the-spaces-section-inner { padding-block: 40px; } .page-the-spaces-section-frame { position: relative; } .page-the-spaces-section-head { display: flex; align-items: stretch; overflow: hidden; } .page-the-spaces-section .page-the-spaces-section-title, .page-the-spaces-section .page-the-spaces-section-desc { --sep-from: translateY(32px); opacity: 0; transform: var(--sep-from); } .page-the-spaces-section-head.is-inview .page-the-spaces-section-title, .page-the-spaces-section-head.is-inview .page-the-spaces-section-desc { animation: sep-fade-in var(--pts-anim) both; } .page-the-spaces-section-head.is-inview .page-the-spaces-section-title { animation-delay: 0.2s; } .page-the-spaces-section-head.is-inview .page-the-spaces-section-desc { animation-delay: 0.55s; } .page-the-spaces-section-title { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 10px; align-self: stretch; padding: 40px; font-size: 60px; } .page-the-spaces-section-desc { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; flex: 1 0 0; align-self: stretch; padding: 40px; } .page-the-spaces-section-body { position: relative; } .page-the-spaces-section-body::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: linear-gradient(var(--sep-line), var(--sep-line)), linear-gradient(var(--sep-line), var(--sep-line)), linear-gradient(var(--sep-line), var(--sep-line)); background-repeat: no-repeat; background-size: var(--sep-line-w) 100%; background-position: 25% 0, 50% 0, 75% 0; } .page-the-spaces-section-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; overflow: hidden; } .page-the-spaces-section a.page-the-spaces-section-item:is(:link, :visited, :hover, :focus-visible, :active) { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 40px; color: var(--sep-ink); text-decoration: none; border-bottom: 0; isolation: isolate; -webkit-transition: none; transition: none; } .page-the-spaces-section-item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--pts-glow) 0%, rgba(195, 206, 140, 0) 100%); opacity: 0; transition: opacity 0.35s var(--sep-ease); pointer-events: none; } .page-the-spaces-section a.page-the-spaces-section-item:is(:hover, :focus-visible)::before { opacity: 1; } .page-the-spaces-section a.page-the-spaces-section-item :is(.page-the-spaces-section-num, .page-the-spaces-section-name), .page-the-spaces-section a.page-the-spaces-section-item > :first-child { display: block; font-family: var(--sep-font-title); font-size: 40px; font-weight: 700; line-height: 90%; letter-spacing: -1.2px; transition: color 0.15s ease; } .page-the-spaces-section a.page-the-spaces-section-item .page-the-spaces-section-num, .page-the-spaces-section a.page-the-spaces-section-item > :first-child { color: var(--sep-accent); } .page-the-spaces-section a.page-the-spaces-section-item .page-the-spaces-section-name { color: var(--sep-ink); } .page-the-spaces-section-tags { color: var(--sep-ink); font-family: var(--sep-font-desc); font-size: 16px; font-weight: 200; line-height: 150%; text-transform: uppercase; } .page-the-spaces-section a.page-the-spaces-section-item:is(:hover, :focus-visible) :is(.page-the-spaces-section-num, .page-the-spaces-section-name), .page-the-spaces-section a.page-the-spaces-section-item:is(:hover, :focus-visible) > :first-child { color: var(--sep-body); } .page-the-spaces-section a.page-the-spaces-section-item:active :is(.page-the-spaces-section-num, .page-the-spaces-section-name), .page-the-spaces-section a.page-the-spaces-section-item:active > :first-child { color: var(--sep-press); } .page-the-spaces-section a.page-the-spaces-section-item.is-active::before { opacity: 1; } .page-the-spaces-section a.page-the-spaces-section-item.is-active :is(.page-the-spaces-section-num, .page-the-spaces-section-name), .page-the-spaces-section a.page-the-spaces-section-item.is-active > :first-child { color: var(--sep-body); } .page-the-spaces-section-more { display: none; } .page-the-spaces-section .page-the-spaces-section-list a.page-the-spaces-section-item { --sep-from: translateY(18px); opacity: 0; transform: var(--sep-from); } .page-the-spaces-section .page-the-spaces-section-list.is-inview a.page-the-spaces-section-item { animation: sep-fade-in 1.2s var(--sep-ease) both; } @media (max-width: 1200px) { .page-the-spaces-section-head { flex-direction: column; } .page-the-spaces-section-title { flex: none; width: 100%; padding: 20px; font-size: 48px; justify-content: flex-start; text-align: left; align-items: flex-start; } .page-the-spaces-section-desc { flex: none; width: 100%; padding: 20px; justify-content: flex-end; } .page-the-spaces-section-body::after { content: none; } .page-the-spaces-section-list { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-the-spaces-section-list::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: linear-gradient(var(--sep-line), var(--sep-line)); background-repeat: no-repeat; background-size: var(--sep-line-w) 100%; background-position: 50% 0; } .page-the-spaces-section a.page-the-spaces-section-item { padding: 32px 20px; } .page-the-spaces-section a.page-the-spaces-section-item:nth-child(n + 3) { display: none; } .page-the-spaces-section.is-open a.page-the-spaces-section-item:nth-child(n + 3) { display: flex; } .page-the-spaces-section-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding: 16px 20px 32px; color: var(--sep-ink); font-family: "Noto Sans Thai", sans-serif; font-size: 18px; font-weight: 500; line-height: 150%; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease; } .page-the-spaces-section-more:active { color: var(--sep-accent); } .page-the-spaces-section-more-icon { display: block; width: 24px; height: 25px; border: 0; background-color: currentColor; -webkit-mask: var(--sep-arrow) center / contain no-repeat; mask: var(--sep-arrow) center / contain no-repeat; transform: rotate(90deg); transition: transform 0.25s var(--sep-ease), background-color 0.15s ease; } .page-the-spaces-section.is-open .page-the-spaces-section-more-icon { transform: rotate(270deg); } } @media (max-width: 767px) { .page-the-spaces-section-body { position: relative; display: block; background: none; min-height: 0; } .page-the-spaces-section-body::after { content: none; } .page-the-spaces-section-list { grid-template-columns: 1fr; } .page-the-spaces-section-list::after { content: none; } .page-the-spaces-section a.page-the-spaces-section-item { padding: 40px 20px; } .page-the-spaces-section:not(.is-open) a.page-the-spaces-section-item:first-of-type { padding: 40px 20px 102px; } .page-the-spaces-section a.page-the-spaces-section-item:nth-child(n + 2) { display: none; } .page-the-spaces-section.is-open a.page-the-spaces-section-item:nth-child(n + 2) { display: flex; } .page-the-spaces-section-more { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; margin-top: 0; padding: 20px 20px 24px; background: none; } .page-the-spaces-section.is-open .page-the-spaces-section-more { position: relative; left: auto; right: auto; bottom: auto; padding: 16px 20px 40px; } } .page-the-spaces-section-details { width: 100%; background: linear-gradient(111deg, rgba(66, 48, 24, 0.30) -0.01%, rgba(168, 122, 61, 0.30) 99.99%); box-shadow: 0 -10px 20px 0 rgba(0, 0, 0, 0.10) inset, 0 10px 20px 0 rgba(0, 0, 0, 0.10) inset; scroll-margin-top: 100px; } .page-the-spaces-section-details-inner { width: 100%; max-width: var(--sep-max); margin-inline: auto; padding: 40px 16px; } .page-the-spaces-section-detail { display: none; } .page-the-spaces-section-detail.is-active { display: block; } .page-the-spaces-section-detail-photo { display: block; width: 100%; height: 518px; object-fit: cover; object-position: center; border-radius: var(--sep-radius); } .page-the-spaces-section-detail-photo-mobile { display: none; } .page-the-spaces-section-detail-info { display: flex; align-items: stretch; margin-top: 24px; border-inline: 2px solid #fff; } .page-the-spaces-section-detail-lead { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; flex: 1 1 50%; width: 50%; min-width: 0; align-self: stretch; padding: 40px; border-right: 2px solid #fff; text-align: left; } .page-the-spaces-section-detail-copy { display: flex; flex-direction: column; align-items: center; gap: 40px; flex: 1 1 50%; width: 50%; min-width: 0; align-self: stretch; padding: 40px 60px; } .page-the-spaces-section-detail-copy > * { width: 100%; align-self: stretch; } .page-the-spaces-section-detail-num { color: var(--sep-cream-hero); font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 120px; font-weight: 700; line-height: 130%; } .page-the-spaces-section-detail-name { color: var(--sep-ink); font-family: var(--sep-font-title); font-size: 60px; font-weight: 700; line-height: 90%; letter-spacing: -1.8px; } .page-the-spaces-section-detail-tagline { color: rgba(113, 81, 43, 0.5); font-family: var(--sep-font-desc); font-size: 18px; font-weight: 200; line-height: 150%; } .page-the-spaces-section-detail-text { color: var(--sep-body); font-family: var(--sep-font-desc); font-size: 18px; font-weight: 200; line-height: 150%; } .page-the-spaces-section-detail-suitable { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .page-the-spaces-section-detail-label { color: var(--sep-cream-hero); font-family: var(--sep-font-desc); font-size: 16px; font-weight: 500; line-height: 150%; text-transform: uppercase; } .page-the-spaces-section-detail-value { color: var(--sep-ink); font-family: var(--sep-font-desc); font-size: 20px; font-weight: 400; line-height: 150%; } .page-the-spaces-section-hours-arrow { display: inline-block; width: 18px; height: 17px; margin: 0 6px; vertical-align: -2px; background-color: currentColor; -webkit-mask: var(--sep-arrow) center / contain no-repeat; mask: var(--sep-arrow) center / contain no-repeat; } .page-the-spaces-section-detail-value-strong { color: var(--sep-ink); font-family: var(--sep-font-title); font-size: 24px; font-weight: 700; line-height: 150%; } .page-the-spaces-section-detail-meta { display: flex; flex-wrap: wrap; align-items: flex-start; align-self: stretch; gap: 0 24px; margin-top: -16px; } .page-the-spaces-section-detail-field { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; box-sizing: border-box; width: 247.333px; flex: 1 1 calc((100% - 48px) / 3); max-width: calc((100% - 48px) / 3); padding: 10px 0; border-top: 0.5px solid #bfb792; } @media (min-width: 768px) { .page-the-spaces-section-details-inner { padding-inline: 24px; } } @media (min-width: 1200px) { .page-the-spaces-section-details-inner { padding: 60px 80px; } } @media (min-width: 1620px) { .page-the-spaces-section-details-inner { padding: 60px 0; } } @media (max-width: 1200px) { .page-the-spaces-section-detail-info { display: flex; flex-direction: column; grid-template-columns: 1fr; border-inline: 2px solid #fff; } .page-the-spaces-section-detail-lead { width: 100%; flex: none; border-right: 0; padding: 32px 20px 16px; gap: 12px; } .page-the-spaces-section-detail-copy { width: 100%; flex: none; padding: 16px 20px 32px; gap: 20px; } .page-the-spaces-section-detail-copy > * { width: 100%; } .page-the-spaces-section-detail-num { font-size: 64px; line-height: 130%; } .page-the-spaces-section-detail-name { font-size: 40px; letter-spacing: -1.2px; } .page-the-spaces-section-detail-meta { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; margin-top: 0; } .page-the-spaces-section-detail-field { width: 100%; max-width: none; flex: none; height: auto; padding: 16px 0; border-top: 0.5px solid #bfb792; } .page-the-spaces-section-detail-suitable { padding-bottom: 8px; } } @media (max-width: 767px) { .page-the-spaces-section-detail-photo-desktop { display: none; } .page-the-spaces-section-detail-photo-mobile { display: block; } } .space-bringing-to-the-village-section-inner { padding-block: 40px; } .space-bringing-to-the-village-section-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); align-items: stretch; } .space-bringing-to-the-village-section-intro, .space-bringing-to-the-village-section-cats, .space-bringing-to-the-village-section-results { min-width: 0; padding: 0 40px; } .space-bringing-to-the-village-section-intro, .space-bringing-to-the-village-section-cats { border-right: var(--sep-line-w) solid var(--sep-line); } .space-bringing-to-the-village-section-intro { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 20px; overflow: hidden; } .space-bringing-to-the-village-section .space-bringing-to-the-village-section-title, .space-bringing-to-the-village-section .space-bringing-to-the-village-section-desc { --sep-from: translateY(32px); opacity: 0; transform: var(--sep-from); } .space-bringing-to-the-village-section-intro.is-inview .space-bringing-to-the-village-section-title, .space-bringing-to-the-village-section-intro.is-inview .space-bringing-to-the-village-section-desc { animation: sep-fade-in 2.8s var(--sep-ease) both; } .space-bringing-to-the-village-section-intro.is-inview .space-bringing-to-the-village-section-title { animation-delay: 0.25s; } .space-bringing-to-the-village-section-intro.is-inview .space-bringing-to-the-village-section-desc { animation-delay: 0.75s; } .space-bringing-to-the-village-section-title { color: var(--sep-ink); font-family: var(--sep-font-title); font-size: 48px; font-weight: 700; line-height: 100%; } .space-bringing-to-the-village-section-cats { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; overflow: hidden; } .space-bringing-to-the-village-section .space-bringing-to-the-village-section-cats a.space-bringing-to-the-village-section-cat { --sep-from: translateX(-28px); opacity: 0; transform: var(--sep-from); } .space-bringing-to-the-village-section .space-bringing-to-the-village-section-cats.is-inview a.space-bringing-to-the-village-section-cat { animation: sep-fade-in 2.2s var(--sep-ease) both; } .space-bringing-to-the-village-section a.space-bringing-to-the-village-section-cat:is(:link, :visited, :hover, :focus-visible, :active) { display: flex; align-items: flex-start; gap: 16px; color: var(--sep-ink); font-family: var(--sep-font-title); font-size: 32px; font-weight: 700; line-height: 100%; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease; } .space-bringing-to-the-village-section a.space-bringing-to-the-village-section-cat:is(:hover, :focus-visible) { color: var(--sep-accent); text-decoration: none; } .space-bringing-to-the-village-section a.space-bringing-to-the-village-section-cat.is-active:is(:hover, :focus-visible, :active), .space-bringing-to-the-village-section a.space-bringing-to-the-village-section-cat.is-active { color: var(--sep-body); text-decoration: none; align-items: center; } .space-bringing-to-the-village-section-cat-mark { display: none; flex: 0 0 25px; width: 25px; height: 24px; margin-top: 4px; background-color: currentColor; -webkit-mask: var(--sep-arrow) center / contain no-repeat; mask: var(--sep-arrow) center / contain no-repeat; } .space-bringing-to-the-village-section a.space-bringing-to-the-village-section-cat.is-active .space-bringing-to-the-village-section-cat-mark { display: block; } .space-bringing-to-the-village-section-cat-label { padding: 20px 0; } .space-bringing-to-the-village-section-results { display: flex; flex-direction: column; align-items: stretch; gap: 20px; } .space-bringing-to-the-village-section-results-title { color: var(--sep-ink); font-family: var(--sep-font-title); font-size: 28px; font-weight: 700; line-height: 100%; } .space-bringing-to-the-village-section-slider { overflow: hidden; width: 100%; } .space-bringing-to-the-village-section-panel { display: none; } .space-bringing-to-the-village-section-panel.is-active { display: block; } .space-bringing-to-the-village-section-track { display: flex; width: 100%; gap: 16px; transition: transform 0.45s var(--sep-ease); } .space-bringing-to-the-village-section a.space-bringing-to-the-village-section-card:is(:link, :visited, :hover, :focus-visible, :active) { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; flex: 0 0 calc((100% - 16px) / 2); color: var(--sep-ink); text-decoration: none; -webkit-transition: none; transition: none; } .space-bringing-to-the-village-section-card-media { width: 100%; overflow: hidden; border-radius: var(--sep-radius); } .space-bringing-to-the-village-section-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; align-self: stretch; } .space-bringing-to-the-village-section-card-photo { display: block; width: 100%; height: 400px; align-self: stretch; object-fit: cover; object-position: center; border-radius: var(--sep-radius); } .space-bringing-to-the-village-section-card-num { color: var(--sep-accent); font-family: var(--sep-font-desc); font-size: 20px; font-weight: 700; line-height: 150%; } .space-bringing-to-the-village-section-card-name { color: var(--sep-ink); font-family: var(--sep-font-desc); font-size: 20px; font-weight: 700; line-height: 150%; } .space-bringing-to-the-village-section-card-tags { color: var(--sep-body); font-family: var(--sep-font-desc); font-size: 16px; font-weight: 200; line-height: 150%; text-transform: uppercase; } .space-bringing-to-the-village-section a.space-bringing-to-the-village-section-card:is(:hover, :focus-visible) .space-bringing-to-the-village-section-card-name { color: var(--sep-body); } .space-bringing-to-the-village-section a.space-bringing-to-the-village-section-card:active .space-bringing-to-the-village-section-card-name { color: var(--sep-press); } .space-bringing-to-the-village-section-nav { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; } .home-rooted-in-patong-slide-btn, .space-bringing-to-the-village-section-arrow { display: block; flex: 0 0 25px; width: 25px; height: 24px; padding: 0; border: 0; color: var(--sep-ink); background-color: currentColor; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease, opacity 0.15s ease; } .home-rooted-in-patong-slide-prev, .space-bringing-to-the-village-section-arrow-prev { -webkit-mask: var(--sep-arrow) center / contain no-repeat; mask: var(--sep-arrow) center / contain no-repeat; transform: scaleX(-1); } .home-rooted-in-patong-slide-next, .space-bringing-to-the-village-section-arrow-next { -webkit-mask: var(--sep-arrow) center / contain no-repeat; mask: var(--sep-arrow) center / contain no-repeat; } .home-rooted-in-patong-slide-btn:hover, .home-rooted-in-patong-slide-btn:focus-visible, .home-rooted-in-patong-slide-btn:active, .space-bringing-to-the-village-section-arrow:hover, .space-bringing-to-the-village-section-arrow:active { color: var(--sep-accent); } .space-bringing-to-the-village-section-arrow.is-disabled { opacity: 0.28; pointer-events: none; cursor: default; } @media (max-width: 1200px) { .space-bringing-to-the-village-section-grid { display: flex; flex-direction: column; } .space-bringing-to-the-village-section-intro, .space-bringing-to-the-village-section-cats, .space-bringing-to-the-village-section-results { width: 100%; padding: 20px; border-right: 0; } .space-bringing-to-the-village-section-title { font-size: 32px; } .space-bringing-to-the-village-section-cats { align-items: stretch; } .space-bringing-to-the-village-section a.space-bringing-to-the-village-section-cat:is(:link, :visited, :hover, :focus-visible, :active) { display: flex; padding: 20px 0; align-items: flex-start; align-self: stretch; font-size: 28px; } .space-bringing-to-the-village-section-cat-label { padding: 0; } } @media (max-width: 767px) { .space-bringing-to-the-village-section-desc { font-size: 18px; } .space-bringing-to-the-village-section-results-title { font-size: 20px; } .space-bringing-to-the-village-section a.space-bringing-to-the-village-section-card:is(:link, :visited, :hover, :focus-visible, :active) { flex: 0 0 100%; width: 100%; max-width: 100%; } } .space-full-screen-video { --sep-play: 96px; --sep-play-tx: -32%; --sep-play-tri: 14px 0 14px 24px; width: 100%; margin: 0; padding: 0; } .space-full-screen-video-media { position: relative; width: 100%; height: auto; max-height: 1000px; aspect-ratio: 16 / 9; overflow: hidden; } .space-full-screen-video-el, .space-full-screen-video-media-embed iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border: 0; } @media (max-width: 1200px) { .space-full-screen-video { --sep-play: 72px; --sep-play-tri: 11px 0 11px 18px; } } @media (max-width: 767px) { .space-full-screen-video { --sep-play: 44px; --sep-play-tri: 7px 0 7px 12px; } } @media (prefers-reduced-motion: reduce) { .home-stay-for-a-while.hsfw-wait .home-stay-for-a-while-cell, .space-hero-section.shs-wait .space-hero-section-title-line span, .space-hero-section.shs-wait .space-hero-section-col-desc, .page-the-spaces-section .page-the-spaces-section-title, .page-the-spaces-section .page-the-spaces-section-desc, .page-the-spaces-section .page-the-spaces-section-list a.page-the-spaces-section-item, .space-bringing-to-the-village-section .space-bringing-to-the-village-section-title, .space-bringing-to-the-village-section .space-bringing-to-the-village-section-desc, .space-bringing-to-the-village-section .space-bringing-to-the-village-section-cats a.space-bringing-to-the-village-section-cat { opacity: 1; transform: none; animation: none; } }