/* ========================================================================= OZIREA Island — Shared site chrome (header + nav overlay + footer) Used by: index.php, dining.php, dining-detail.php, faq.php, events.php, contact.php, book.php, details.php Notes: - Pages that don't have a full-bleed hero should add class="subpage" to . That forces the dark header background from page load and keeps the full header visible (no scroll-collapse), and reserves top padding so content isn't hidden behind the fixed header. ========================================================================= */ :root{ --hdr-h: 86px; /* lower nav height */ --hdr-top-h: 40px; /* utility bar height */ } /* Sub-pages: reserve room for the fixed header */ body.subpage{ padding-top: calc(var(--hdr-h) + var(--hdr-top-h)); } /* ========================================================================= HEADER ========================================================================= */ .hdr{ position:fixed; inset:0 0 auto 0; z-index:50; /* Soft top-down scrim so white nav/icons stay legible over bright hero areas. Overridden by the solid background in .hdr.scrolled and body.subpage .hdr. */ background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.04) 62%, rgba(0,0,0,0) 100%); color:#ffffff; transition: background .3s ease, box-shadow .3s ease, transform .3s ease; } .hdr-top{ height:var(--hdr-top-h); background:transparent; color:#ffffff; border-bottom:0; /* Legibility scrim for the white text + icons over bright hero areas */ text-shadow:0 1px 3px rgba(0,0,0,.55); transition:background .3s ease, color .3s ease, border-color .3s ease; } .hdr-top-inner{ max-width:none; margin:0; width:100%; height:100%; padding:0 40px; display:flex; align-items:center; justify-content:space-between; font-size:12.5px; letter-spacing:.04em; } /* Left cluster: Home link + social icon row */ .hdr-top-info{ display:flex; align-items:center; gap:18px; margin-top:15px; list-style:none; padding:0; margin-left:0; margin-right:0; } /* Home link: text + small icon, copper underline on hover */ .hdr-top-info > li:first-child a{ border-radius:0; width:auto; height:auto; border:0; padding:6px 0; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; position:relative; background:transparent; } .hdr-top-info > li:first-child a i{ font-size:20px; color:#ffffff } .hdr-top-info > li:first-child a::after{ content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px; background:#ffffff; transition:right .3s ease; } .hdr-top-info > li:first-child a:hover::after{ right:0 } /* Vertical divider between Home and socials */ .hdr-top-info > li:first-child{ padding-right:18px; margin-right:2px; border-right:1px solid rgba(255,255,255,.22); } .hdr-top-info a{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease; } /* Social icons: borderless, larger glyphs */ .hdr-top-info > li:not(:first-child) a{ width:auto; height:auto; border:0; background:transparent; color:#ffffff; font-size:22px; padding:4px; } .hdr-top-info > li:not(:first-child) a:hover{ background:transparent; color:var(--accent-2); transform:translateY(-1px); } /* Right cluster: mail link */ .hdr-top-mail a{ color:#ffffff; display:inline-flex; align-items:center; gap:10px; font-size:15.5px; letter-spacing:.06em; padding:6px 0; margin-top:15px; position:relative; transition:transform .35s cubic-bezier(.22,1,.36,1), color .25s ease; transform-origin:center; } .hdr-top-mail a i{ width:auto; height:auto; border-radius:0; background:transparent; color:#ffffff; display:inline-flex; align-items:center; justify-content:center; font-size:22px; transition:color .25s ease; } .hdr-top-mail a::after{ content:""; position:absolute; left:36px; right:100%; bottom:2px; height:1px; background:#ffffff; transition:right .3s ease; } .hdr-top-mail a:hover, .hdr-top-mail a:focus{ transform:scale(.92); color:inherit } .hdr-top-mail a:hover::after, .hdr-top-mail a:focus::after{ right:auto; left:0; width:0 } .hdr-top-mail a:hover i, .hdr-top-mail a:focus i{ background:inherit; color:inherit } /* Scrolled-state — transparent top bar over brand-blue header, white text */ .hdr.scrolled .hdr-top-info > li:first-child{ border-right-color:rgba(255,255,255,.22) } .hdr.scrolled .hdr-top-info > li:not(:first-child) a{ color:#ffffff } .hdr.scrolled .hdr-top-info > li:not(:first-child) a:hover{ color:var(--accent-2) } .hdr.scrolled .hdr-top-mail a{ color:#ffffff } .hdr.scrolled .hdr-top-mail a i{ background:transparent; color:#ffffff } .hdr-inner{ height:var(--hdr-h); padding:0 40px; max-width:none; margin:0; width:100%; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:24px; color:#fff; transition:color .3s ease; } .hdr-left{ display:flex; align-items:center; gap:24px } .menu-btn{ background:transparent; border:none; color:inherit; padding:8px; border-radius:8px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; display:none; align-items:center; gap:10px; transition:background .2s, color .2s; cursor:pointer; font-family:inherit; } .menu-btn:hover{ background:rgba(255,255,255,.08); color:#fff; } .menu-lines{ display:inline-flex; flex-direction:column; gap:5px } .menu-lines span{ display:block; width:22px; height:2px; background:currentColor; } .hdr .brand{ display:inline-flex; align-items:center; line-height:1; color:inherit; text-decoration:none; } .brand-logo{ display:block; height:50px; width:auto; object-fit:contain; /* Keeps the gold wordmark legible over bright hero areas */ filter:drop-shadow(0 1px 4px rgba(0,0,0,.45)); } .brand-logo-mobile{ display:none; } .brand-text-mobile{ font-family:'Poppins', Georgia, serif; font-size:24px; letter-spacing:.42em; font-weight:500; color:#FF7A1A; text-transform:uppercase; } .hdr .brand-name{ font-family:'Poppins', Georgia, serif; font-size:26px; letter-spacing:.42em; font-weight:500; color:inherit; } .brand-sub{ font-family:'Poppins', system-ui, sans-serif; font-size:10px; letter-spacing:.5em; text-transform:uppercase; margin-top:6px; opacity:.75; } .hdr-nav{ justify-self:center; display:flex; gap:26px; font-size:16px; letter-spacing:.04em; } .hdr-nav a{ color:inherit; padding:6px 0; position:relative; transition:color .2s ease; text-decoration:none; } .hdr-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(255,255,255,.45); transition:background .25s ease, height .25s ease; } .hdr-nav a:hover{ color:var(--accent-2) } .hdr-nav a:hover::after{ background:var(--accent); height:2px } .hdr-cta{ justify-self:end } .btn-cta{ --btn-bg: var(--accent); --btn-hover: var(--ink); --btn-fg: #ffffff; position:relative; display:inline-block; min-width:148px; height:46px; padding:0 30px; line-height:46px; text-align:center; overflow:hidden; isolation:isolate; background:var(--btn-bg); color:var(--btn-fg); border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; text-decoration:none; transform-origin:center; box-shadow: 0 8px 22px rgba(192,133,80,.28), inset 0 0 0 1px rgba(255,255,255,.08); transition: background .45s cubic-bezier(.22,1,.36,1), color .35s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; } .btn-cta::before{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.22) 45%, rgba(255,255,255,.05) 60%, transparent 100%); transform:translateX(-110%); transition:transform .9s cubic-bezier(.22,1,.36,1); z-index:1; pointer-events:none; } .btn-cta:hover{ background:var(--btn-bg); color:var(--btn-fg); transform:scale(.94); box-shadow: 0 8px 22px rgba(192,133,80,.28), inset 0 0 0 1px rgba(255,255,255,.08); } .btn-cta:hover::before{ transform:translateX(-110%) } .btn-cta:active{ transform:translateY(0); transition-duration:.15s } .btn-cta:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; } /* Char-wave: per-letter staggered swap on hover */ .char-wave{ display:inline-flex; align-items:center; justify-content:center; height:100%; z-index:2; } .char-wave span{ display:inline-block; line-height:1; transform:translateY(0); transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .32s ease; transition-delay:calc(var(--i, 0) * 24ms); } .btn-cta .char-wave.orig{ position:relative } .btn-cta .char-wave.dup{ position:absolute; inset:0; pointer-events:none; } .btn-cta .char-wave.dup span{ transform:translateY(110%); opacity:0; } .btn-cta:hover .char-wave.orig span{ transform:translateY(0); opacity:1; } .btn-cta:hover .char-wave.dup span{ transform:translateY(110%); opacity:0; } /* Scrolled state (after hero) — turns blue */ .hdr.scrolled .btn-cta{ box-shadow: 0 6px 18px rgba(192,133,80,.22), inset 0 0 0 1px rgba(255,255,255,.1); } .hdr.scrolled{ background:#0B122C; box-shadow:0 8px 26px rgba(0, 0, 0, .45); --hdr-h: 72px; } .hdr.scrolled .hdr-top{ background:transparent; border-bottom:0; backdrop-filter:none; -webkit-backdrop-filter:none; } .hdr.scrolled .hdr-inner{ color:#ffffff; height:72px } .hdr.scrolled .menu-btn{ border-color:rgba(255,255,255,.4); color:#ffffff } .hdr.scrolled .menu-btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff } /* Scrolled state — collapse to a minimal bar: brand left + menu toggle right */ .hdr.scrolled .hdr-top{ display:none } .hdr.scrolled .hdr-nav{ display:none } .hdr.scrolled .hdr-cta{ display:none } .hdr.scrolled .hdr-inner{ grid-template-columns: 1fr; padding:0 32px; } .hdr.scrolled .hdr-left{ width:100%; flex-direction:row-reverse; justify-content:space-between; gap:0; } .hdr.scrolled .menu-btn{ display:inline-flex } .hdr.scrolled .brand-text-mobile{ display:inline-block; color:#FF7A1A; } /* ========================================================================= SUB-PAGE HEADER (no hero) — solid dark always, no scroll collapse ========================================================================= */ body.subpage .hdr{ background:#0B122C; box-shadow:0 8px 26px rgba(0, 0, 0, .45); } /* Cancel scroll-collapse so the full header stays visible on sub-pages */ body.subpage .hdr.scrolled{ --hdr-h: 86px; } body.subpage .hdr.scrolled .hdr-top{ display:block } body.subpage .hdr.scrolled .hdr-nav{ display:flex } body.subpage .hdr.scrolled .hdr-cta{ display:block } body.subpage .hdr.scrolled .hdr-inner{ grid-template-columns: 1fr auto 1fr; padding:0 40px; height:var(--hdr-h); } body.subpage .hdr.scrolled .hdr-left{ width:auto; flex-direction:row; justify-content:flex-start; gap:24px; } body.subpage .menu-btn{ display:none } body.subpage .hdr.scrolled .menu-btn{ display:none } body.subpage .brand-text-mobile{ display:inline-block; } /* ========================================================================= FULLSCREEN NAV OVERLAY ========================================================================= */ .nav-overlay{ position:fixed; inset:0; z-index:80; background:linear-gradient(rgba(8,15,13,.65),rgba(8,15,13,.78)), url('navbar-toggle-desktop.jpg') center/cover no-repeat; color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; visibility:hidden; opacity:0; transition:opacity .35s ease, visibility .35s ease; } /* On phones use the portrait shot so it fills the tall screen properly. */ @media (max-width:720px){ .nav-overlay{ background:linear-gradient(rgba(8,15,13,.65),rgba(8,15,13,.78)), url('navbar-toggle-mobile.jpg') center/cover no-repeat; } } .nav-overlay.open{ visibility:visible; opacity:1 } .overlay-top{ position:absolute; top:24px; left:32px; right:32px; display:flex; align-items:center; justify-content:space-between; } .overlay-close{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); padding:9px 18px; border-radius:999px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px; transition:background .2s, border-color .2s; cursor:pointer; font-family:inherit; } .overlay-close:hover{ background:var(--accent); border-color:var(--accent) } .overlay-nav ul, .nav-overlay .hdr-nav{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; justify-self:auto; list-style:none; margin:0; padding:0; } .overlay-nav a, .nav-overlay .hdr-nav a{ font-family:'Poppins', Georgia, serif; font-size:clamp(28px, 6vw, 56px); letter-spacing:.04em; font-weight:400; color:#fff; padding:6px 0; transition:color .25s ease, letter-spacing .25s ease; text-decoration:none; } .overlay-nav a:hover, .nav-overlay .hdr-nav a:hover{ color:var(--accent-2); letter-spacing:.08em } .nav-overlay .hdr-nav a::after{ display:none } .overlay-foot{ position:absolute; bottom:28px; left:32px; right:32px; display:flex; justify-content:space-between; font-size:13px; letter-spacing:.14em; text-transform:uppercase; opacity:.75; } .overlay-foot a{ color:inherit; text-decoration:none; } /* ========================================================================= FOOTER ========================================================================= */ .ftr-large{ background:#0B122C; color:rgba(255,255,255,.78); padding:90px 0 0; font-family:'Poppins', system-ui, sans-serif; } .ftr-large .wrap{ max-width:1240px; margin:0 auto; padding:0 32px; } .ftr-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap:56px; padding-bottom:56px; } .ftr-large h4{ font-family:'Poppins', system-ui, sans-serif; font-size:12px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:#fff; margin:0 0 22px; } .ftr-large p{ color:rgba(255,255,255,.62); font-size:14px; line-height:1.75; margin:0 } .ftr-large .ftr-brand .brand-name{ font-family:'Poppins', Georgia, serif; font-size:28px; letter-spacing:.5em; color:#fff; display:block; margin-bottom:18px; font-weight:500; } .ftr-large ul{ list-style:none; padding:0; margin:0; } .ftr-large ul li{ margin:8px 0 } .ftr-large ul.ftr-explore{ display:grid; grid-template-columns:1fr 1fr; gap:4px 24px; } .ftr-large ul.ftr-explore li{ margin:6px 0 } .ftr-large ul li a{ color:rgba(255,255,255,.7); font-size:14px; text-decoration:none; transition:color .2s ease, padding-left .2s ease; } .ftr-large ul li a:hover{ color:var(--accent-2); padding-left:6px } /* Explore column: animated underline on hover (no padding shift so the line stays put) */ .ftr-large ul.ftr-explore li a{ position:relative; display:inline-block; padding-bottom:2px; } .ftr-large ul.ftr-explore li a:hover{ padding-left:0 } .ftr-large ul.ftr-explore li a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent-2); transition:right .25s ease; } .ftr-large ul.ftr-explore li a:hover::after{ right:0 } .ftr-contact li{ display:flex; align-items:flex-start; gap:12px; color:rgba(255,255,255,.7); font-size:14px; } .ftr-contact li i{ color:var(--accent-2); margin-top:5px } .ftr-social{ display:flex; gap:10px; margin-top:18px } .ftr-social a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; transition:background .25s, transform .25s; } .ftr-social a:hover{ background:var(--accent); transform:translateY(-2px) } .ftr-form{ display:flex; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 6px 6px 18px; margin-top:14px; } .ftr-form input{ flex:1; background:transparent; border:0; outline:0; color:#fff; font-size:14px; font-family:inherit; } .ftr-form input::placeholder{ color:rgba(255,255,255,.5) } .ftr-form button{ border:0; width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; cursor:pointer; transition:background .25s ease, transform .25s ease; } .ftr-form button:hover{ background:#fff; color:var(--ink); transform:translateX(2px) } .ftr-form-stack{ flex-wrap:wrap; border-radius:14px; padding:8px; gap:6px; } .ftr-form-stack input{ flex:1 1 100%; padding:10px 12px; border-radius:8px; } .ftr-form-stack input + input{ border-top:1px solid rgba(255,255,255,.08); } .ftr-form-stack button{ flex:0 0 auto; margin-left:auto; } .ftr-form-msg{ margin-top:10px; font-size:13px; min-height:18px; color:rgba(255,255,255,.75); } .ftr-form-msg.is-success{ color:#9be8c2 } .ftr-form-msg.is-error { color:#ffb4a8 } .ftr-bottom{ border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding:24px max(32px, calc((100% - 1240px) / 2 + 32px)); } .ftr-bottom p{ margin:0; font-size:13px; color:rgba(255,255,255,.55) } .ftr-links{ display:flex; gap:24px } .ftr-links a{ font-size:13px; color:rgba(255,255,255,.6); transition:color .2s; text-decoration:none; } .ftr-links a:hover{ color:var(--accent-2) } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 1100px){ .hdr-nav{ gap:18px; font-size:12.5px } .ftr-grid{ grid-template-columns: 1fr 1fr; gap:48px } .ftr-brand{ grid-column: 1 / -1 } } @media (max-width: 880px){ :root{ --hdr-h: 64px; --hdr-top-h: 36px } .hdr-top{ height:var(--hdr-top-h); font-size:11px; } .hdr-top-inner{ padding:0 16px; font-size:11.5px } .hdr-top-info{ gap:10px } .hdr-top-info > li:first-child{ padding-right:12px; margin-right:0 } .hdr-top-info > li:first-child a{ font-size:11px; letter-spacing:.12em } .hdr-top-info > li:not(:first-child) a{ width:auto; height:auto; font-size:18px } .hdr-top-mail a{ font-size:0; gap:0 } .hdr-top-mail a i{ width:auto; height:auto; font-size:18px } .hdr-top-mail a::after{ display:none } .hdr-inner .hdr-nav{ display:none } .hdr-inner{ grid-template-columns: auto 1fr auto; height:var(--hdr-h); padding:0 16px; gap:12px; } .hdr.scrolled .hdr-inner{ height:60px } .menu-btn{ display:inline-flex; padding:8px 12px; font-size:11px; letter-spacing:.14em; gap:8px } .hdr .brand{ justify-self:center; align-items:center } .brand-logo{ height:44px; } .hdr .brand-name{ font-size:20px; letter-spacing:.32em } .brand-sub{ font-size:9px; letter-spacing:.4em; margin-top:4px } .btn-cta{ height:40px; line-height:40px; min-width:auto; padding:0 22px; font-size:11px; letter-spacing:.2em; } /* Sub-pages: keep nav hidden on mobile (overlay handles it) */ body.subpage .hdr.scrolled .hdr-nav{ display:none } body.subpage .hdr.scrolled .hdr-inner{ grid-template-columns: auto 1fr auto; padding:0 16px; } body.subpage .menu-btn{ display:inline-flex } .ftr-large{ padding-top:64px } .ftr-grid{ grid-template-columns:1fr 1fr; gap:36px 24px; padding-bottom:42px } .ftr-brand{ grid-column: 1 / -1 } .ftr-form{ max-width:340px } .ftr-bottom{ padding:20px 20px; flex-direction:column; gap:10px; text-align:center } .ftr-links{ gap:18px } .overlay-top{ left:20px; right:20px; top:18px } .overlay-foot{ left:20px; right:20px; bottom:22px; flex-direction:column; gap:8px; text-align:center } .overlay-nav ul{ gap:6px } .overlay-nav a{ font-size:34px } } @media (max-width: 540px){ .hdr-top{ font-size:10.5px } .hdr-top-inner{ padding:0 12px } .hdr-top-info{ gap:8px } .hdr-top-info > li:first-child{ padding-right:8px } .hdr-top-info > li:first-child a{ font-size:10px; letter-spacing:.1em } .hdr-top-info > li:not(:first-child) a{ width:auto; height:auto; font-size:16px } .hdr-top-mail a i{ width:auto; height:auto; font-size:16px } .hdr-inner{ padding:0 14px; gap:8px } .hdr .brand-name{ font-size:18px; letter-spacing:.28em } .brand-sub{ display:none } .btn-cta{ height:38px; line-height:38px; padding:0 18px; font-size:10.5px; letter-spacing:.18em; } .ftr-grid{ grid-template-columns:1fr; gap:32px; padding-bottom:36px } .ftr-large h4{ margin-bottom:14px } .ftr-form input{ font-size:13px } .overlay-nav a{ font-size:28px } .overlay-close{ padding:7px 14px; font-size:11px } } @media (max-width: 480px){ .ftr-large ul.ftr-explore{ grid-template-columns:1fr 1fr; gap:2px 14px } } @media (max-width: 380px){ .menu-btn{ padding:7px 10px } .btn-cta{ padding:0 14px; font-size:10px; letter-spacing:.14em } .hdr .brand-name{ font-size:16px; letter-spacing:.24em } } @media (prefers-reduced-motion: reduce){ .hdr, .hdr-top, .hdr-top-info a, .hdr-top-mail a, .hdr-top-mail a i, .menu-btn, .menu-lines span, .hdr-nav a, .btn-cta, .btn-cta::before, .char-wave span, .nav-overlay, .overlay-close, .overlay-nav a, .nav-overlay .hdr-nav a, .ftr-large ul li a, .ftr-social a, .ftr-form button, .ftr-links a{ transition-duration:.001s !important; } } /* ========================================================================= HERO SLIDER (used by every page that has a [data-carousel="hero"] block) ========================================================================= */ .hero{ position:relative; height:100vh; min-height:680px; overflow:hidden; color:#fff; } .hero-media{ position:absolute; inset:0; z-index:0 } .hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease; } .hero-slide.is-active{ opacity:1 } .hero-slide img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 8s ease; } .hero-slide.is-active img{ transform:scale(1) } .hero::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 32%, rgba(0,0,0,.55) 100%); pointer-events:none; } .hero-inner{ position:relative; z-index:2; height:100%; max-width:1240px; margin:0 auto; padding:0 32px; display:flex; flex-direction:column; justify-content:center; } .hero-eyebrow{ font-size:12px; letter-spacing:.4em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:20px; display:inline-flex; align-items:center; } .hero-eyebrow::before{ content:""; display:inline-block; width:42px; height:1px; background:var(--accent-2); margin-right:14px; } .hero h1{ color:#fff; font-family:'Poppins', Georgia, serif; font-weight:400; font-size:clamp(48px, 7vw, 96px); line-height:1.05; letter-spacing:.2px; max-width:14ch; margin:0 0 24px; text-shadow:0 4px 32px rgba(0,0,0,.25); } .hero h1 em{ font-style:italic; font-weight:300; color:var(--accent-2); display:block; } .hero-sub{ font-size:17px; max-width:560px; color:rgba(255,255,255,.92); margin:0 0 36px; line-height:1.6; } .hero-btn{ display:inline-block; align-self:flex-start; padding:18px 38px; background:var(--accent); color:#fff; border-radius:999px; font-size:12px; letter-spacing:.26em; font-weight:600; text-transform:uppercase; text-decoration:none; transition:background .3s, transform .3s, box-shadow .3s; box-shadow:0 18px 40px rgba(22,36,31,.12); } .hero-btn:hover{ background:#fff; color:var(--ink); transform:translateY(-2px) } .hero-dots{ position:absolute; z-index:3; left:50%; bottom:36px; transform:translateX(-50%); display:flex; gap:10px; } .hero-dots button{ width:30px; height:2px; background:rgba(255,255,255,.4); border:0; padding:0; cursor:pointer; transition:background .25s ease, width .25s ease; } .hero-dots button.is-active{ background:var(--accent-2); width:48px } .hero-arrows{ position:absolute; z-index:3; right:32px; bottom:30px; display:flex; gap:10px; } .hero-arrows button{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s, transform .2s; } .hero-arrows button:hover{ background:var(--accent); border-color:var(--accent) } .hero-scroll{ position:absolute; z-index:3; left:32px; bottom:34px; color:rgba(255,255,255,.85); font-size:11px; letter-spacing:.32em; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px; animation:scrollPulse 2.4s ease-in-out infinite; } @keyframes scrollPulse{ 0%,100%{ transform:translateY(0); opacity:.85 } 50% { transform:translateY(6px); opacity:1 } } @media (max-width: 880px){ .hero{ min-height:540px } .hero-inner{ padding:0 20px } .hero h1{ font-size:clamp(40px, 9vw, 60px); max-width:none } .hero-sub{ font-size:15px } .hero-btn{ padding:15px 30px; font-size:11px; letter-spacing:.22em } .hero-arrows{ right:16px; bottom:24px } .hero-arrows button{ width:40px; height:40px; font-size:13px } .hero-scroll{ left:20px; bottom:26px; font-size:10px; letter-spacing:.26em } .hero-dots{ bottom:28px } .hero-dots button{ width:24px } .hero-dots button.is-active{ width:38px } } @media (max-width: 540px){ .hero{ min-height:520px } .hero h1{ font-size:clamp(36px, 11vw, 52px) } .hero-sub{ font-size:14px; max-width:none } .hero-btn{ width:100%; text-align:center; padding:14px 24px } .hero-arrows{ display:none } .hero-scroll{ display:none } .hero-dots{ bottom:22px } } @media (max-width: 380px){ .hero h1{ font-size:34px } .hero-sub{ font-size:13px } } @media (prefers-reduced-motion: reduce){ .hero-slide, .hero-slide img{ transition-duration:.001s !important } .hero-slide img{ transform:none !important } .hero-scroll{ animation:none !important } }