/* ===================================================================== NIKE COUNTRY RETREAT · Shared Design System Dark & Opulent · Cormorant Garamond + Jost · Warm Gold ===================================================================== */ :root { --void: #07050a; --dark: #0f0d0b; --surface: #1b1712; --surface-lt: #252018; --gold: #c49238; --gold-lt: #d4a85a; --gold-dim: rgba(196,146,56,0.08); --cream: #ede5d4; --cream-70: rgba(237,229,212,0.7); --cream-40: rgba(237,229,212,0.4); --cream-15: rgba(237,229,212,0.15); --muted: #7a6040; --border: rgba(196,146,56,0.13); --nav-solid-bg: rgba(7,5,10,0.94); --fw-d: 'Cormorant Garamond', Georgia, serif; --fw-b: 'Jost', 'Helvetica Neue', sans-serif; --max-w: 1360px; } /* ── WARM / GIORNO THEME ── */ [data-theme="warm"] { --void: #f6f1e9; --dark: #ece4d3; --surface: #e2d8c5; --surface-lt: #d5c9b2; --gold: #9b6b3a; --gold-lt: #b5824e; --gold-dim: rgba(155,107,58,0.08); --cream: #261a0e; --cream-70: rgba(38,26,14,0.7); --cream-40: rgba(38,26,14,0.4); --cream-15: rgba(38,26,14,0.15); --muted: #8a7260; --border: rgba(38,26,14,0.1); --nav-solid-bg: rgba(246,241,233,0.97); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--void); color: var(--cream); font-family: var(--fw-b); font-weight: 300; line-height: 1.75; -webkit-font-smoothing: antialiased; /* `clip` (not `hidden`) so the does not become a scroll container — `overflow-x: hidden` would force overflow-y to `auto` and break the hero's `position: fixed` parallax background. */ overflow-x: clip; } /* ── LANGUAGE ── */ html[data-lang="en"] .it { display: none !important; } html[data-lang="it"] .en { display: none !important; } /* ── NAV ── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; padding: 2.2rem 4rem; transition: padding 0.45s ease, background 0.45s ease, border-color 0.45s ease; border-bottom: 1px solid transparent; } .nav.solid { background: var(--nav-solid-bg); padding: 1.1rem 4rem; border-bottom: 1px solid var(--border); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } .nav-logo { flex-shrink: 0; text-decoration: none; font-family: var(--fw-d); font-weight: 400; font-size: 0.9rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream); white-space: nowrap; } .nav-logo em { color: var(--gold); font-style: normal; } .nav-links { flex: 1; display: flex; align-items: center; justify-content: center; gap: 3rem; list-style: none; } .nav-links a { font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cream-40); text-decoration: none; font-weight: 400; position: relative; padding-bottom: 3px; transition: color 0.3s; } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--gold); transition: width 0.35s; } .nav-links a:hover, .nav-links a.active { color: var(--gold); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-right { flex-shrink: 0; display: flex; align-items: center; gap: 0.65rem; } .lang-btn { background: none; border: none; cursor: pointer; font-family: var(--fw-b); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-40); padding: 2px 0; transition: color 0.25s; } .lang-btn.active { color: var(--gold); } .lang-sep { color: var(--border); font-size: 0.6rem; user-select: none; } .btn-nav { display: inline-block; font-family: var(--fw-b); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream); text-decoration: none; border: 1px solid var(--border); padding: 0.5rem 1.4rem; transition: border-color 0.3s, color 0.3s; white-space: nowrap; margin-left: 1rem; } .btn-nav:hover { border-color: var(--gold); color: var(--gold); } /* ── HAMBURGER ── */ .nav-ham { display: none; background: none; border: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin-left: auto; width: 44px; height: 44px; margin-right: -10px; /* >=44px hit area, bars stay visually aligned */ } .nav-ham span { display: block; width: 24px; height: 1px; background: var(--cream); transition: all 0.3s; } .nav-ham.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-ham.open span:nth-child(2) { opacity: 0; } .nav-ham.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ── MOBILE MENU · right drawer ── #mobMenu is the full-screen backdrop; .mob-drawer is the panel that slides in from the right. Open/close = .open on #mobMenu. */ .mob-menu { position: fixed; inset: 0; z-index: 300; background: rgba(7, 5, 10, 0.6); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; } .mob-menu.open { opacity: 1; pointer-events: all; } .mob-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 85vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: -16px 0 48px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; justify-content: center; padding: 4.5rem 2.2rem 2.5rem; overflow-y: auto; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); } .mob-menu.open .mob-drawer { transform: translateX(0); } .mob-menu ul { list-style: none; } .mob-menu a { display: block; padding: 0.85rem 0; font-family: var(--fw-d); font-size: 1.8rem; font-weight: 400; color: var(--cream); text-decoration: none; transition: color 0.3s; } .mob-menu a:hover { color: var(--gold); } .mob-close { position: absolute; top: 0.8rem; right: 0.8rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--cream-40); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: color 0.3s; } .mob-close:hover { color: var(--gold); } .mob-lang { display: flex; gap: 0.6rem; margin-top: 2.5rem; } .mob-lang .lang-btn { font-size: 0.65rem; letter-spacing: 0.22em; color: var(--muted); min-width: 44px; min-height: 44px; /* tap target */ } .mob-lang .lang-btn.active { color: var(--gold); } @media (max-width: 900px) { .nav { padding: 1.2rem 1.5rem; } .nav.solid { padding: 0.9rem 1.5rem; } .nav-links, .btn-nav, .nav-right { display: none; } .nav-ham { display: flex; } } /* ── CONTAINER ── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 4rem; } @media (max-width: 900px) { .container { padding: 0 1.5rem; } } /* ── TYPOGRAPHY ── */ h1, h2, h3, h4 { font-family: var(--fw-d); font-weight: 400; line-height: 1.06; } h1 { font-size: clamp(3.5rem, 8vw, 8rem); letter-spacing: -0.01em; } h2 { font-size: clamp(2.5rem, 5vw, 5rem); } h3 { font-size: clamp(1.8rem, 2.8vw, 3rem); } h4 { font-size: clamp(1.3rem, 1.8vw, 2rem); } /* ── COMPONENTS ── */ .eyebrow { display: inline-flex; align-items: center; gap: 0.9rem; font-family: var(--fw-b); font-size: 0.56rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; } .eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); flex-shrink: 0; } .gold-rule { display: block; width: 48px; height: 1px; background: var(--gold); } .gold-rule.sm { width: 24px; } .gold-rule.center { margin: 0 auto; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--fw-b); font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: all 0.3s; font-weight: 400; background: none; border: none; } .btn-o { padding: 0.9rem 2.2rem; border: 1px solid var(--cream-40); color: var(--cream); } .btn-o:hover { border-color: var(--gold); color: var(--gold); } .btn-g { padding: 0.9rem 2.2rem; border: 1px solid var(--gold); background: var(--gold); color: var(--void); } .btn-g:hover { background: var(--gold-lt); border-color: var(--gold-lt); } /* ── REVEAL ── */ .rv { opacity: 0; transform: translateY(36px); transition: opacity 0.9s ease, transform 0.9s ease; } .rv.vis { opacity: 1; transform: none; } .rv.d1 { transition-delay: 0.1s; } .rv.d2 { transition-delay: 0.22s; } .rv.d3 { transition-delay: 0.36s; } .rv.d4 { transition-delay: 0.5s; } /* ── FOOTER ── */ .site-footer { background: var(--dark); border-top: 1px solid var(--border); } .footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 5rem 4rem 4rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem; border-bottom: 1px solid var(--border); } .footer-logo { display: block; text-decoration: none; font-family: var(--fw-d); font-size: 1.3rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); margin-bottom: 1.2rem; } .footer-logo em { color: var(--gold); font-style: normal; } .footer-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.9; max-width: 230px; } .footer-col h6 { font-family: var(--fw-b); font-size: 0.54rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 1.5rem; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 0.7rem; } .footer-col a { font-size: 0.78rem; color: var(--muted); text-decoration: none; transition: color 0.25s; } .footer-col a:hover { color: var(--cream); } .footer-col address { font-style: normal; font-size: 0.78rem; color: var(--muted); line-height: 2.1; } .footer-bottom { max-width: var(--max-w); margin: 0 auto; padding: 1.5rem 4rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.64rem; color: var(--muted); letter-spacing: 0.08em; } .footer-legal { display: flex; gap: 1.4rem; } .footer-legal a { color: var(--muted); text-decoration: none; transition: color 0.25s; } .footer-legal a:hover { color: var(--gold); } @media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; padding: 3rem 1.5rem 2.5rem; } .footer-bottom { padding: 1.2rem 1.5rem; flex-direction: column; gap: 0.4rem; text-align: center; } } /* ── PARALLAX (hero) ── */ .parallax { will-change: transform; transform: translate3d(0, 0, 0) scale(1.25); } @media (prefers-reduced-motion: reduce) { .parallax { transform: none !important; } } /* ===================================================================== CAROUSEL · reusable auto-sliding image component (see carousel.js) --------------------------------------------------------------------- Images only — no captions, dots, or arrows. Slides auto-advance and loop seamlessly. Give the .carousel a height: let it fill a sized parent (height:100%) or set an aspect-ratio on the .carousel element. ===================================================================== */ .carousel { position: relative; overflow: hidden; width: 100%; height: 100%; -webkit-tap-highlight-color: transparent; touch-action: pan-y; /* vertical scroll stays native; horizontal swipes reach our handler */ } .carousel-track { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; height: 100%; will-change: transform; } .carousel-track.animate { transition: transform 0.9s cubic-bezier(0.66, 0, 0.34, 1); } .carousel-slide { flex: 0 0 100%; min-width: 0; width: 100%; height: 100%; } .carousel-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Manual navigation — subtle chevrons (added by carousel.js when the .carousel element carries data-carousel-controls) */ .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; color: #ede5d4; opacity: .6; /* always light — sits on photos in any theme */ filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .65)); transition: opacity .3s, color .3s; } .carousel-nav:hover { opacity: 1; color: var(--gold-lt, var(--gold)); } .carousel-nav.prev { left: .4rem; } .carousel-nav.next { right: .4rem; } .carousel-nav svg { width: 22px; height: 22px; } /* Pause/play toggle for autoplay carousels — injected into the nav by carousel.js (WCAG 2.2.2 Pause, Stop, Hide) */ .motion-btn { flex-shrink: 0; width: 32px; height: 32px; margin-left: 0.9rem; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); cursor: pointer; padding: 0; transition: color .25s, border-color .25s; position: relative; } /* invisible hit-area expansion to ~44px (WCAG 2.5.8) */ .motion-btn::after { content: ''; position: absolute; inset: -7px; } .motion-btn:hover { color: var(--gold); border-color: var(--gold); } .motion-btn svg { width: 13px; height: 13px; } .motion-tip { position: fixed; z-index: 450; max-width: 290px; background: var(--surface-lt); border: 1px solid var(--gold); padding: 1rem 1.15rem; font-size: 0.78rem; line-height: 1.65; color: var(--cream-70); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .35s ease; } .motion-tip.vis { opacity: 1; transform: none; } .motion-tip .motion-tip-ok { display: block; margin-top: 0.8rem; background: none; border: 1px solid var(--gold); color: var(--gold); font-family: var(--fw-b); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.45rem 1.3rem; cursor: pointer; transition: background .25s, color .25s; } .motion-tip .motion-tip-ok:hover { background: var(--gold); color: #1a1206; } /* ── SHARED JS init ── */ /* ===================================================================== ACCESSIBILITY BASELINE ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* scroll-reveal content must never stay hidden */ .rv { opacity: 1 !important; transform: none !important; } }