body.appointment-nav-light{ background:#000; } body.appointment-nav-light .site-header{ --support-nav-text:#111827; } body.appointment-nav-light .site-header, body.appointment-nav-light .site-header.page-navbar-solid, body.appointment-nav-light .site-header.hero-theme-dark:not(.scrolled):not(.menu-open), body.appointment-nav-light .site-header .nav-inner-wrap, body.appointment-nav-light .site-header .nav-shell{ background:#ffffff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } body.appointment-nav-light .site-header .nav-link, body.appointment-nav-light .site-header .nav-link.dropdown-toggle, body.appointment-nav-light .site-header .navbar-nav .nav-link, body.appointment-nav-light .site-header .navbar-brand, body.appointment-nav-light .site-header .nav-glass-text, body.appointment-nav-light .site-header .nav-glass-icon, body.appointment-nav-light .site-header .navbar-toggler, body.appointment-nav-light .site-header .dropdown-toggle, body.appointment-nav-light .site-header .dropdown-item, body.appointment-nav-light .site-header .dropdown-menu .dropdown-item, body.appointment-nav-light .site-header a, body.appointment-nav-light .site-header button{ color:#111827 !important; } body.appointment-nav-light .site-header .nav-glass-btn{ background:#ffffff; color:#111827 !important; border:1px solid rgba(17,24,39,.08); box-shadow:0 10px 24px rgba(15,23,42,.05); } body.appointment-nav-light .site-header .nav-glass-btn:hover{ background:#f8fafc; border-color:rgba(17,24,39,.14); } body.appointment-nav-light .site-header .dropdown-menu{ background:rgba(255,255,255,.98); border:1px solid rgba(17,24,39,.06); box-shadow:0 18px 38px rgba(15,23,42,.12); } body.appointment-nav-light .site-header .dropdown-item:hover{ background:#f8fafc; } body.appointment-nav-light .site-header .navbar-toggler-icon, body.appointment-nav-light .site-header .navbar-toggler-icon::before, body.appointment-nav-light .site-header .navbar-toggler-icon::after{ color:#111827 !important; } .appointment-page{ background:#000; color:#fff; } .appointment-hero{ position:relative; min-height:100vh; background-color:#000; background-position:center bottom; background-repeat:no-repeat; background-size:cover; overflow:hidden; } .appointment-hero-media{ position:absolute; inset:0; z-index:0; } .appointment-hero-video{ width:100%; height:100%; object-fit:cover; display:block; } .appointment-hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 36%, rgba(0,0,0,.16) 66%, rgba(0,0,0,.18) 100%); } .appointment-hero-inner{ position:relative; z-index:2; display:flex; justify-content:center; align-items:flex-start; min-height:100vh; padding-top:156px; padding-bottom:64px; } .appointment-hero-copy{ width:100%; max-width:620px; text-align:center; } .appointment-hero-copy h1{ margin:0; font-size:clamp(28px, 3.8vw, 46px); line-height:1.1; font-weight:500; letter-spacing:-.03em; text-transform:uppercase; } .appointment-hero-subtitle{ margin-top:16px; font-size:clamp(15px, 1.35vw, 20px); line-height:1.45; font-weight:500; color:#ffffff; } .appointment-hero-status{ margin-top:16px; font-size:clamp(14px, 1vw, 16px); line-height:1.3; font-weight:500; } .appointment-form{ display:flex; align-items:stretch; justify-content:center; width:100%; max-width:408px; margin:30px auto 0; padding:4px; border:1px solid rgba(255,255,255,.14); border-radius:8px; background:rgba(255,255,255,.08); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 16px 32px rgba(0,0,0,.14); } .appointment-input{ flex:1 1 auto; min-width:0; height:48px; padding:0 16px; border:none; outline:none; border-radius:4px; background:transparent; color:#fff; font-size:15px; } .appointment-input::placeholder{ color:rgba(255,255,255,.5); } .appointment-submit{ flex:0 0 auto; min-width:108px; height:48px; padding:0 20px; border:none; border-radius:4px; background:#ffffff; color:#111827; font-size:15px; font-weight:600; box-shadow:0 8px 18px rgba(15,23,42,.12); } .appointment-meta{ display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-top:24px; } .appointment-meta-item{ display:flex; flex-direction:column; gap:6px; } .appointment-meta-item span{ font-size:12px; line-height:1.3; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.08em; } .appointment-meta-item strong{ font-size:15px; line-height:1.5; font-weight:600; } .appointment-intro-section{ padding:72px 0 24px; background:#000; } .appointment-intro{ max-width:920px; margin:0 auto; color:rgba(255,255,255,.78); font-size:17px; line-height:2; text-align:center; } .appointment-intro p:last-child{ margin-bottom:0; } .appointment-gallery-section{ padding:24px 0 80px; background:#000; } .appointment-gallery-swiper{ position:relative; overflow:hidden; padding-bottom:36px; } .appointment-gallery-slide{ display:flex; align-items:center; justify-content:center; aspect-ratio:16 / 9; background:#000; } .appointment-gallery-slide img{ display:block; width:auto; max-width:100%; height:100%; max-height:100%; margin:0 auto; object-fit:contain; } .appointment-gallery-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:none; border-radius:999px; background:rgba(255,255,255,.08); color:#fff; } .appointment-gallery-prev{ left:18px; } .appointment-gallery-next{ right:18px; } .appointment-gallery-pagination{ position:absolute !important; left:50% !important; bottom:0 !important; transform:translateX(-50%); width:auto !important; display:flex; gap:8px; } .appointment-gallery-pagination .swiper-pagination-bullet{ width:28px; height:3px; border-radius:999px; background:rgba(255,255,255,.24); opacity:1; } .appointment-gallery-pagination .swiper-pagination-bullet-active{ width:44px; background:#ffffff; } .appointment-notice-section{ padding:0 0 88px; background:#000; } .appointment-notice-box{ max-width:860px; margin:0 auto; padding:32px 30px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); } .appointment-notice-title{ margin-bottom:16px; font-size:20px; line-height:1.2; font-weight:700; } .appointment-notice-content{ color:rgba(255,255,255,.72); font-size:15px; line-height:1.9; } .appointment-notice-content p:last-child{ margin-bottom:0; } @media (max-width: 991.98px){ .appointment-hero-inner{ padding-top:136px; } .appointment-hero-copy h1{ font-size:36px; } .appointment-hero-subtitle{ font-size:18px; } .appointment-hero-status{ font-size:15px; } } @media (max-width: 767.98px){ .appointment-hero{ min-height:auto; background-position:center center; } .appointment-hero-video{ object-position:center center; } .appointment-hero-inner{ min-height:auto; padding-top:118px; padding-bottom:48px; } .appointment-hero-copy h1{ font-size:24px; line-height:1.12; } .appointment-hero-subtitle{ margin-top:14px; font-size:14px; line-height:1.45; } .appointment-hero-status{ margin-top:14px; font-size:13px; } .appointment-form{ max-width:100%; margin-top:22px; padding:4px; border-radius:8px; } .appointment-input, .appointment-submit{ height:44px; font-size:14px; } .appointment-input{ border-radius:4px; } .appointment-submit{ min-width:96px; padding:0 14px; border-radius:4px; } .appointment-meta{ gap:16px; margin-top:18px; } .appointment-meta-item strong{ font-size:13px; } .appointment-intro-section{ padding:48px 0 18px; } .appointment-intro{ font-size:14px; line-height:1.9; text-align:left; } .appointment-gallery-section{ padding:18px 0 56px; } .appointment-gallery-slide{ aspect-ratio:1 / 1; } .appointment-gallery-arrow{ width:34px; height:34px; } .appointment-gallery-prev{ left:10px; } .appointment-gallery-next{ right:10px; } .appointment-notice-section{ padding:0 0 56px; } .appointment-notice-box{ padding:22px 18px; } .appointment-notice-title{ margin-bottom:12px; font-size:17px; } .appointment-notice-content{ font-size:13px; line-height:1.8; } }