/* Styles that only apply to index.html */
.video-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
pointer-events: none;
}
#footer,
#footer p,
#footer a,
#footer i {
color: #c0b7b0 !important;
}
#footer .social a i {
color: #c0b7b0 !important;
}
#footer {
border-top: 1px solid #c0b7b0 !important;
}
.back-to-top::after { display: none !important; }
#footer img {
filter: brightness(0) saturate(100%) invert(78%) sepia(9%) saturate(210%) hue-rotate(353deg) brightness(95%) contrast(86%);
}
#block-2 h3 {
font-family: "Noto Serif TC", "Playfair Display", serif !important;
font-weight: 600 !important;
font-size: 24px !important;
letter-spacing: 0.05em !important;
}
#block-2 .content,
#block-2 .content p,
#block-2 .content div {
font-family: "Noto Serif TC", "Playfair Display", serif !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.15em !important;
line-height: 1.8 !important;
}
#block-2 h3.sig-serif,
#block-5 .content h3 {
font-family: "Noto Serif TC", "Playfair Display", serif;
}
#block-5 .content h3 {
margin-bottom: 0.5rem;
}
#block-2 h3.sig-serif{
text-align: center;
}
#block-2 .inner {
text-align: left;
}
#block-2 .content {
max-width: 560px;
margin: 0 auto;
text-align: left;
}
#block-2 .buttons .button{
font-size:11px !important;
font-weight:600 !important;
letter-spacing:0.15em;
font-family:"Noto Serif TC","Playfair Display",serif;
}
/* =============================================
GIF LOADER
White bg so the GIF blends in (no visible box)
============================================= */
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
opacity: 1;
transition: opacity 0.6s ease;
}
#loader-wrapper.hidden {
opacity: 0;
pointer-events: none;
}
#loader-gif {
width: 180px;
height: auto;
clip-path: inset(0 0 3% 0);
filter: brightness(0) invert(1) sepia(3%) saturate(300%) hue-rotate(340deg) brightness(0.995);
}
/* While GIF is playing, hide the header S logo
so there aren't two S logos on screen */
.gif-loading .header-logo img {
opacity: 0 !important;
visibility: hidden !important;
}
/* Desktop only: Island inner padding */
@media (min-width: 992px) {
#island-inner {
padding-left: 130px;
}
}
/* ── MOBILE: banner video fills entire screen ── */
@media (max-width: 767px) {
#block-0,
#block-0 .swiper-container,
#block-0 .swiper-container-inner,
#block-0 .swiper,
#block-0 .swiper-wrapper,
#block-0 .swiper-slide,
#block-0 .swiper-slide .video {
height: 100vh !important;
height: 100dvh !important;
min-height: 100vh !important;
min-height: 100dvh !important;
}
}
/* ── MOBILE RESPONSIVE ── */
@media (max-width: 767px) {
#block-0 .title h3 {
letter-spacing: 8px !important;
font-size: 14px !important;
}
#block-0 .title h5 {
font-size: 13px !important;
padding: 0 10px;
}
#block-1 .title h2 {
letter-spacing: 2px !important;
font-size: 18px !important;
}
#block-2 h3 {
font-size: 18px !important;
}
#block-2 h3.sig-serif {
white-space: normal !important;
font-size: 18px !important;
margin-bottom: 40px !important;
}
#block-2 .content {
max-width: 100%;
}
#island-inner {
text-align: center !important;
}
#block-5 .inner h3.sig-serif {
font-size: 16px !important;
}
#block-5 .inner h3.sig-serif span {
font-size: 1.5em !important;
}
#block-6 iframe {
height: 400px !important;
}
#block-4 .inner p {
font-size: 36px !important;
line-height: 1.2 !important;
}
#block-4 .swiper-container {
height: 110px !important;
}
#block-4 .swiper-slide {
height: 110px !important;
}
#block-4 .swiper-slide .h1 {
font-size: 56px !important;
}
}
/* Tablet: reduce gap between photo and text in block-2 */
@media (min-width: 992px) and (max-width: 1199px) {
#block-2 .split-row {
--bs-gutter-x: 20px !important;
}
#block-2 .split-row > .order-1 {
margin-left: 4% !important;
}
#block-2 .split-row > .order-2 {
margin-left: 3% !important;
}
#block-2 h3.sig-serif {
white-space: normal !important;
font-size: 20px !important;
text-align: center !important;
}
}
/* Tablet: move text closer to image, title rightward */
@media (min-width: 768px) and (max-width: 1199px) {
#block-2 h3.sig-serif {
padding-left: 60px !important;
white-space: nowrap !important;
}
}
/* Even spacing between About / We Are / Island on mobile */
@media (max-width: 991px) {
#block-2.section {
padding-bottom: 120px !important;
}
#block-4.section {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#block-4 .scrolling-title-block-container {
padding-top: 0 !important;
padding-bottom: 40px !important;
}
#block-5.section {
padding-top: 0 !important;
}
/* "We are" text comes before the image on mobile, image smaller */
#block-4 .row.align-items-center {
display: flex !important;
flex-direction: column !important;
}
#block-4 .row .order-1 {
order: 2 !important;
}
#block-4 .row .order-2 {
order: 1 !important;
}
#block-4 .video.image {
height: 120px !important;
margin-bottom: 0 !important;
}
#block-4 .scrolling_title_block .swiper-container {
margin-bottom: 20px !important;
}
}
/* Footer 3-column layout overrides */
#footer .social { justify-content: flex-end !important; }
#footer .footer-icon { display: flex; justify-content: center; }
@media (max-width: 767px) {
#footer .social { justify-content: center !important; margin-top: 15px !important; }
#footer .text-end { text-align: center !important; }
#footer .footer-content-outer { justify-content: center; }
}