/* ========================================================= Nina's Tailoring — Shawnigan Lake, BC Design system + site styles --------------------------------------------------------- Google Fonts is loaded via tags in each page's (not @import here) — @import blocks the browser from discovering the font request until after it has downloaded and parsed this whole file, costing an extra round trip. ========================================================= */ /* =========== VACATION CLOSURE GATE =========== */ /* Which of these two shows is decided by the inline script in — see index.html and js/closure.js. Nothing under #site-content is removed while closed, only hidden. */ html.is-open #closure-page { display: none; } html.is-closed #site-content { display: none; } #closure-page { display: none; } /* avoids showing both at once if JS is slow to run */ html.is-closed #closure-page { display: flex; } :root{ /* palette */ --cream: #faf6f0; --cream-deep: #f1e8dc; --paper: #fffdfa; --ink: #2b2420; --ink-soft: #5a5049; --rose: #b96a5c; --rose-deep: #9c4f43; --teal: #3f6e64; --teal-deep: #2c4f48; --gold: #c9a15a; --line: rgba(43,36,32,.12); --serif: 'Playfair Display', Georgia, serif; --sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --container: 1180px; --radius: 18px; --radius-sm: 10px; --shadow-soft: 0 10px 40px -12px rgba(43,36,32,.18); --shadow-lift: 0 24px 60px -20px rgba(43,36,32,.35); --ease: cubic-bezier(.22,1,.36,1); } *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; font-family: var(--sans); color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } h1,h2,h3,h4{ font-family: var(--serif); font-weight:600; margin:0; line-height:1.12; } p{ margin:0; } button{ font-family: inherit; cursor:pointer; } input,select,textarea{ font-family: inherit; } .container{ max-width: var(--container); margin:0 auto; padding:0 28px; } .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color: var(--rose-deep); font-weight:600; margin-bottom:14px; } .eyebrow::before{ content:''; width:26px; height:1px; background: var(--rose-deep); display:inline-block; } .section-head{ max-width: 640px; margin-bottom: 48px; } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .section-head h2{ font-size: clamp(2rem, 3.4vw, 2.9rem); } .section-head p{ margin-top:14px; color: var(--ink-soft); font-size:1.05rem; line-height:1.65; } section{ position:relative; padding: 110px 0; } .bg-cream-deep{ background: var(--cream-deep); } .bg-ink{ background: var(--ink); color: #f3ece3; } .bg-ink .section-head p{ color: rgba(243,236,227,.72); } /* reveal-on-scroll */ .reveal{ opacity:0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.in{ opacity:1; transform: translateY(0); } .reveal-scale{ opacity:0; transform: scale(.92); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal-scale.in{ opacity:1; transform: scale(1); } .stagger > *{ transition-delay: calc(var(--i,0) * 90ms); } /* buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 15px 30px; border-radius: 999px; font-size:.92rem; font-weight:600; letter-spacing:.03em; border:1px solid transparent; transition: all .35s var(--ease); white-space:nowrap; } .btn-primary{ background: var(--rose); color:#fff; box-shadow: 0 10px 26px -8px rgba(185,106,92,.6); } .btn-primary:hover{ background: var(--rose-deep); transform: translateY(-3px); box-shadow: 0 16px 34px -10px rgba(185,106,92,.7); } .btn-ghost{ background: rgba(255,255,255,.08); color:#fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(6px); } .btn-ghost:hover{ background: rgba(255,255,255,.2); transform: translateY(-3px); } .btn-outline{ background:transparent; color: var(--ink); border-color: var(--ink); } .btn-outline:hover{ background: var(--ink); color:#fff; transform: translateY(-3px); } .btn-block{ width:100%; } .btn:disabled{ opacity:.45; cursor:not-allowed; transform:none !important; } /* =========== NAV =========== */ .nav{ position: fixed; top:0; left:0; right:0; z-index:200; padding: 26px 0; transition: all .45s var(--ease); } .nav .container{ display:flex; align-items:center; justify-content:space-between; } .nav-inner-bg{ position:absolute; inset:0; background: rgba(250,246,240,0); backdrop-filter: blur(0px); transition: all .45s var(--ease); border-bottom: 1px solid transparent; } .nav.scrolled{ padding: 14px 0; } .nav.scrolled .nav-inner-bg{ background: rgba(250,246,240,.86); backdrop-filter: blur(14px); border-color: var(--line); } .nav.scrolled{ box-shadow: 0 6px 24px -12px rgba(0,0,0,.12); } .brand{ position:relative; display:flex; align-items:center; gap:12px; font-family: var(--serif); font-size:1.32rem; font-weight:700; color: var(--ink); z-index:2; } .nav:not(.scrolled) .brand{ color:#fff; } .brand-mark{ width:38px; height:38px; border-radius:50%; border:1px solid currentColor; flex:none; display:flex; align-items:center; justify-content:center; font-family: var(--serif); font-style:italic; font-size:1rem; font-weight:600; } .nav-links{ position:relative; display:flex; align-items:center; gap:34px; z-index:2; } .nav-links a{ font-size:.86rem; letter-spacing:.03em; font-weight:500; color: var(--ink); opacity:.85; position:relative; padding:4px 0; } .nav:not(.scrolled) .nav-links a:not(.btn){ color:#fff; } .nav-links a:not(.btn)::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:currentColor; transition: width .3s var(--ease); } .nav-links a:not(.btn):hover::after{ width:100%; } .nav-links .btn{ padding: 11px 22px; } .nav:not(.scrolled) .nav-links .btn-outline{ color:#fff; border-color:#fff; } .nav:not(.scrolled) .nav-links .btn-outline:hover{ background:#fff; color: var(--ink); } .nav-toggle{ display:none; z-index:2; } .nav-links a.current{ color: var(--rose) !important; } .nav-links a.current::after{ width:100% !important; background: var(--rose) !important; } /* =========== SECONDARY PAGE INTRO =========== */ .page-intro{ padding: 190px 0 90px; background: var(--ink); color:#fff; position:relative; overflow:hidden; } .page-intro::before{ content:''; position:absolute; inset:0; background-image: radial-gradient(circle at 15% 20%, rgba(185,106,92,.28), transparent 45%), radial-gradient(circle at 85% 80%, rgba(63,110,100,.32), transparent 50%); } .page-intro .container{ position:relative; } .page-intro .eyebrow{ color:#f0d9c9; } .page-intro .eyebrow::before{ background:#f0d9c9; } .page-intro h1{ font-size: clamp(2.2rem, 4.2vw, 3.4rem); color:#fff; max-width:640px; } .page-intro p{ margin-top:18px; font-size:1.08rem; max-width:520px; color: rgba(255,255,255,.78); line-height:1.65; } /* =========== HERO =========== */ .hero{ position:relative; height:100vh; min-height:640px; display:flex; align-items:center; overflow:hidden; color:#fff; } .hero-slides{ position:absolute; inset:0; } .hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform: scale(1.08); transition: opacity 1.8s ease, transform 8s linear; } .hero-slide.active{ opacity:1; transform: scale(1); } .hero::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(30,24,20,.55) 0%, rgba(30,24,20,.38) 40%, rgba(30,24,20,.72) 100%); z-index:1; } .hero-content{ position:relative; z-index:2; max-width:760px; } .hero-content .eyebrow{ color:#f0d9c9; } .hero-content .eyebrow::before{ background:#f0d9c9; } .hero h1{ font-size: clamp(2.6rem, 6vw, 4.6rem); color:#fff; letter-spacing:-.01em; } .hero h1 em{ font-style: italic; color: #f2c9b3; } .hero p{ margin-top:22px; font-size:1.18rem; max-width:540px; color: rgba(255,255,255,.88); line-height:1.6; } .hero-actions{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; } .hero-dots{ position:absolute; z-index:2; bottom:118px; left:50%; transform:translateX(-50%); display:flex; gap:9px; } .hero-dots button{ width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.4); border:none; transition: all .3s; padding:0; } .hero-dots button.active{ background:#fff; width:26px; border-radius:5px; } .scroll-cue{ position:absolute; bottom:38px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:#fff; opacity:.85; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; } .scroll-cue .line{ width:1px; height:38px; background: linear-gradient(#fff, transparent); position:relative; overflow:hidden;} .scroll-cue .line::after{ content:''; position:absolute; top:-40%; left:0; width:100%; height:40%; background:#fff; animation: cue 1.8s infinite ease-in-out; } @keyframes cue{ 0%{ top:-40%;} 100%{ top:100%;} } /* =========== STATS =========== */ .stats{ padding: 0; margin-top:-72px; position:relative; z-index:10; } .stats-card{ background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-lift); display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); overflow:hidden; } .stat{ padding: 40px 24px; text-align:center; border-right:1px solid var(--line); min-width:0; } .stat:last-child{ border-right:none; } .stat .num{ font-family: var(--serif); font-size: clamp(1.9rem,3vw,2.6rem); color: var(--rose-deep); font-weight:700; display:flex; justify-content:center; align-items:baseline; gap:2px;} .stat .label{ margin-top:8px; font-size:.82rem; color: var(--ink-soft); letter-spacing:.02em; } /* =========== ABOUT =========== */ .about-grid{ display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap:72px; align-items:center; } .about-media{ position:relative; min-width:0; } .about-media .frame{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-soft); } .about-media .frame img{ aspect-ratio: 4/5; object-fit:cover; transition: transform 1.2s var(--ease); } .about-media:hover .frame img{ transform: scale(1.05); } .about-media .tag-badge{ position:absolute; bottom:-26px; right:-26px; background: var(--teal); color:#fff; border-radius:50%; width:150px; height:150px; display:flex; align-items:center; justify-content:center; text-align:center; font-family: var(--serif); font-size:.92rem; line-height:1.3; box-shadow: var(--shadow-lift); animation: spin-slow 22s linear infinite; } .about-media .tag-badge span{ animation: spin-slow-rev 22s linear infinite; display:block; } @keyframes spin-slow{ to{ transform: rotate(360deg); } } @keyframes spin-slow-rev{ to{ transform: rotate(-360deg); } } .about-copy p{ color: var(--ink-soft); font-size:1.06rem; line-height:1.75; margin-bottom:18px; } .about-list{ margin-top:28px; display:grid; gap:16px; } .about-list li{ position:relative; padding-left:30px; font-size:.98rem; color: var(--ink); line-height:1.5; } .about-list li::before{ content:''; position:absolute; left:0; top:.55em; width:16px; height:1px; background: var(--rose); } /* =========== SERVICES =========== */ .services-list{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap:64px; border-top:1px solid var(--line); } .service-row{ display:grid; grid-template-columns: 60px minmax(0,1fr); gap:22px; align-items:baseline; padding: 30px 0; border-bottom:1px solid var(--line); transition: padding-left .4s var(--ease); min-width:0; } .service-row .num{ font-family: var(--serif); font-style:italic; font-size:1.7rem; color: rgba(185,106,92,.4); transition: color .4s var(--ease); } .service-row h3{ font-size:1.2rem; margin-bottom:8px; transition: color .3s var(--ease); } .service-row p{ color: var(--ink-soft); font-size:.92rem; line-height:1.6; } .service-row:hover{ padding-left:10px; } .service-row:hover .num{ color: var(--rose); } .service-row:hover h3{ color: var(--rose-deep); } /* =========== GALLERY (even, uniform grid) =========== */ .gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; } .gallery-item{ border-radius: var(--radius-sm); overflow:hidden; aspect-ratio: 4 / 5; position:relative; cursor:pointer; box-shadow: var(--shadow-soft); } .gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .7s var(--ease); } .gallery-item:hover img{ transform: scale(1.06); } .gallery-item .cap{ position:absolute; inset:auto 0 0 0; padding:20px 16px 14px; color:#fff; background: linear-gradient(0deg, rgba(20,16,14,.85), transparent); font-size:.86rem; font-weight:500; letter-spacing:.01em; opacity:0; transform: translateY(10px); transition: all .4s var(--ease); } .gallery-item:hover .cap{ opacity:1; transform: translateY(0); } .gallery-item::after{ content:''; position:absolute; inset:0; border:1px solid rgba(255,255,255,0); transition: border-color .4s var(--ease); pointer-events:none; } .gallery-item:hover::after{ border-color: rgba(255,255,255,.5); } /* =========== TRANSFORMATIONS =========== */ .tf-track-wrap{ overflow:hidden; margin: 0 -28px; padding: 0 28px; } .tf-track{ display:flex; gap:22px; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom:14px; scrollbar-width:none; } .tf-track::-webkit-scrollbar{ display:none; } .tf-card{ flex:none; width: 300px; scroll-snap-align:start; border-radius: var(--radius); overflow:hidden; background: var(--paper); box-shadow: var(--shadow-soft); cursor:pointer; transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .tf-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lift); } .tf-card .ph{ aspect-ratio: 3/4; overflow:hidden; } .tf-card .ph img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); } .tf-card:hover .ph img{ transform: scale(1.06); } .tf-card .meta{ padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .tf-card .meta strong{ font-family: var(--serif); font-size:1rem; } .tf-card .meta span{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--rose-deep); background: var(--cream-deep); padding:5px 10px; border-radius:999px; } .tf-nav{ display:flex; justify-content:flex-end; gap:10px; margin-top:22px; } .tf-nav button{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background: var(--paper); display:flex; align-items:center; justify-content:center; transition: all .3s var(--ease); } .tf-nav button:hover{ background: var(--ink); border-color:var(--ink); color:#fff; } .tf-nav button{ font-family: var(--serif); font-size:1.3rem; line-height:1; color: var(--ink); } /* =========== TESTIMONIALS (marquee) =========== */ .testimonials{ overflow:hidden; } .marquee-row{ display:flex; gap:22px; width:max-content; } .marquee-row.r1{ animation: marquee 62s linear infinite; margin-bottom:22px; } .marquee-row.r2{ animation: marquee-rev 68s linear infinite; } /* intentionally no hover/pause behaviour — the wall keeps moving no matter what */ .t-card{ transition: transform .3s var(--ease); } .t-card:hover{ transform: translateY(-4px); } @keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} } @keyframes marquee-rev{ from{ transform: translateX(-50%);} to{ transform: translateX(0);} } .t-card{ flex:none; width: 340px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding:26px 24px; backdrop-filter: blur(6px); } .t-card .stars{ color: var(--gold); margin-bottom:14px; font-size:.8rem; letter-spacing:3px; } .t-card p{ font-size:.96rem; line-height:1.65; color: rgba(243,236,227,.92); min-height: 96px; } .t-card .who{ margin-top:18px; display:flex; align-items:center; gap:12px; } .t-card .avatar{ width:38px; height:38px; border-radius:50%; background: linear-gradient(135deg, var(--rose), var(--gold)); display:flex; align-items:center; justify-content:center; font-family: var(--serif); font-weight:700; color:#fff; font-size:.9rem; } .t-card .who strong{ display:block; font-size:.88rem; } .t-card .who span{ font-size:.74rem; color: rgba(243,236,227,.55); } /* =========== BOOKING =========== */ .booking-wrap{ display:grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap:0; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-lift); overflow:hidden; position:relative; border-top:3px solid var(--gold); } .booking-left, .booking-right{ min-width:0; } .booking-left{ padding: 56px 52px; border-right:1px solid var(--line); } .booking-right{ padding: 56px 52px; background: var(--ink); color:#f3ece3; position:relative; overflow:hidden; background-image: radial-gradient(circle at 15% 12%, rgba(201,161,90,.16), transparent 45%), radial-gradient(circle at 90% 90%, rgba(63,110,100,.35), transparent 55%), radial-gradient(circle at 85% 15%, rgba(185,106,92,.2), transparent 40%); } .booking-right::before{ content:''; position:absolute; inset:0; opacity:.05; pointer-events:none; background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 16px 16px; } .booking-right > *{ position:relative; } .step-label{ display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color: var(--ink-soft); font-weight:600; } .step-num{ font-family: var(--serif); font-style:italic; font-weight:600; font-size:1.15rem; color: var(--rose); letter-spacing:0; text-transform:none; } .booking-right h3{ color:#fff; font-size:1.5rem; margin-bottom:18px; } .booking-right .bk-row{ padding:18px 0; border-top:1px solid rgba(255,255,255,.12); } .booking-right .bk-row:first-of-type{ border-top:none; } .booking-right .bk-row strong{ display:block; font-size:.95rem; margin-bottom:4px; color: var(--gold); font-family: var(--serif); font-style:italic; font-weight:500; } .booking-right .bk-row span{ font-size:.84rem; color: rgba(243,236,227,.62); } .field-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color: var(--ink-soft); font-weight:600; margin-bottom:12px; display:block; } .date-scroller{ display:flex; gap:10px; overflow-x:auto; padding:2px 2px 12px; margin-bottom:34px; scrollbar-width:thin; } .date-chip{ flex:none; width:68px; padding:13px 4px; border-radius:14px; border:1px solid var(--line); background: var(--cream); text-align:center; transition: all .3s var(--ease); cursor:pointer; } .date-chip .d{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); } .date-chip .n{ font-family: var(--serif); font-size:1.35rem; font-weight:700; margin:5px 0 2px; } .date-chip .m{ font-size:.66rem; color: var(--ink-soft); } .date-chip:hover{ border-color: var(--rose); transform: translateY(-3px); box-shadow: 0 8px 18px -8px rgba(185,106,92,.35); } .date-chip.active{ background: var(--rose); border-color: var(--rose); transform: translateY(-3px); box-shadow: 0 10px 22px -8px rgba(185,106,92,.55); } .date-chip.active *{ color:#fff !important; } .date-chip.disabled{ opacity:.35; pointer-events:none; } .slot-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; margin-bottom:36px; min-height: 96px;} .slot{ padding:13px 6px; text-align:center; border-radius:10px; border:1px solid var(--line); background: var(--cream); font-size:.86rem; font-weight:500; transition: all .22s var(--ease); cursor:pointer; } .slot:hover{ border-color: var(--teal); color: var(--teal-deep); transform: translateY(-2px); } .slot.active{ background: var(--teal); border-color: var(--teal); color:#fff; transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(63,110,100,.5); } .slot.booked, .slot:disabled{ background: transparent; border-style: dashed; color: rgba(90,80,73,.4); text-decoration: line-through; cursor: not-allowed; transform:none !important; box-shadow:none !important; } .slot.booked:hover, .slot:disabled:hover{ border-color: var(--line); color: rgba(90,80,73,.4); } .slot-empty{ grid-column: 1 / -1; text-align:center; color: var(--ink-soft); font-size:.9rem; padding: 22px 0; } .form-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:16px; } .form-grid .full{ grid-column: 1 / -1; } .input, .select, .textarea{ width:100%; min-width:0; max-width:100%; padding:13px 16px; border-radius:10px; border:1px solid var(--line); background: var(--cream); font-size:.94rem; transition: border-color .3s, box-shadow .3s; color: var(--ink); } .input:focus, .select:focus, .textarea:focus{ outline:none; border-color: var(--rose); box-shadow: 0 0 0 4px rgba(185,106,92,.12); } .textarea{ resize:vertical; min-height:88px; } .selection-summary{ margin-top:22px; padding:16px 20px; border-radius:0 12px 12px 0; background: var(--cream-deep); border-left:3px solid var(--rose); font-size:.88rem; color: var(--ink-soft); } .selection-summary strong{ color: var(--ink); } .book-submit{ margin-top:22px; } .success-box{ display:none; text-align:center; padding: 40px 10px; } .success-box.show{ display:block; } .success-box .tick{ width:56px; height:56px; border:1px solid var(--teal); border-radius:50%; margin:0 auto 22px; display:flex; align-items:center; justify-content:center; position:relative; } .success-box .tick::before{ content:''; width:10px; height:18px; border-right:2px solid var(--teal); border-bottom:2px solid var(--teal); transform: translateY(-2px) rotate(45deg); } .success-box h4{ font-family: var(--serif); font-style:italic; font-size:1.4rem; margin-bottom:10px; } .success-box p{ color: var(--ink-soft); font-size:.92rem; line-height:1.6; max-width:380px; margin:0 auto; } .success-address{ margin: 26px auto 0; max-width:300px; padding:22px 24px; border-radius:14px; background: var(--cream-deep); border:1px solid var(--line); text-align:left; } .success-address .addr-label{ display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color: var(--teal-deep); font-weight:600; margin-bottom:8px; } .success-address strong{ display:block; font-family: var(--serif); font-size:1.15rem; } .success-address .addr-sub{ display:block; font-size:.86rem; color: var(--ink-soft); margin-top:2px; } .success-address .btn{ margin-top:16px; padding:11px 20px; font-size:.84rem; } /* =========== LOCATION =========== */ .loc-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:stretch; } .loc-map{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-soft); min-height:380px; border:1px solid var(--line); min-width:0; } .loc-map iframe{ width:100%; height:100%; min-height:380px; border:0; filter: saturate(.85); } .hours-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding:36px; box-shadow: var(--shadow-soft); } .hours-row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px dashed var(--line); font-size:.94rem; } .hours-row:last-of-type{ border-bottom:none; } .hours-row.today{ font-weight:700; color: var(--rose-deep); } .contact-line{ display:flex; align-items:baseline; gap:14px; margin-top:18px; font-size:.98rem; } .contact-line .cl-label{ flex:none; width:64px; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color: var(--teal-deep); font-weight:600; } .open-pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background: rgba(63,110,100,.12); color: var(--teal-deep); font-size:.8rem; font-weight:600; margin-bottom:22px; } .open-pill .dot{ width:8px; height:8px; border-radius:50%; background: var(--teal); animation: pulse 1.8s infinite; } @keyframes pulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(63,110,100,.5);} 70%{ box-shadow: 0 0 0 8px rgba(63,110,100,0);} } /* =========== FOOTER =========== */ footer{ background: var(--ink); color: rgba(243,236,227,.8); padding: 70px 0 30px; } .footer-grid{ display:grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:50px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); } .footer-brand{ font-family: var(--serif); font-size:1.4rem; color:#fff; margin-bottom:14px; } .footer-grid p{ font-size:.9rem; line-height:1.7; color: rgba(243,236,227,.6); } .footer-col h4{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px; } .footer-col li{ margin-bottom:10px; font-size:.9rem; } .footer-col a:hover{ color: var(--gold); } .footer-bottom{ display:flex; justify-content:space-between; padding-top:26px; font-size:.8rem; color: rgba(243,236,227,.45); flex-wrap:wrap; gap:10px;} .made-by{ text-align:center; margin-top:20px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); } .made-by a{ display:inline-flex; align-items:center; gap:8px; font-size:.76rem; letter-spacing:.03em; color: rgba(243,236,227,.42); transition: color .3s var(--ease); } .made-by a:hover{ color: var(--gold); } .made-by .dot{ width:5px; height:5px; border-radius:50%; background: currentColor; flex:none; } /* =========== LIGHTBOX =========== */ .lightbox{ position:fixed; inset:0; background: rgba(20,16,14,.94); z-index:1000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition: opacity .4s var(--ease); } .lightbox.open{ opacity:1; pointer-events:all; } .lightbox img{ max-width:88vw; max-height:82vh; border-radius:10px; box-shadow: 0 30px 80px rgba(0,0,0,.5); transform: scale(.94); transition: transform .4s var(--ease); } .lightbox.open img{ transform: scale(1); } .lightbox .lb-close, .lightbox .lb-nav{ position:absolute; width:48px; height:48px; border-radius:50%; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff; display:flex; align-items:center; justify-content:center; transition: background .3s; } .lightbox .lb-close:hover, .lightbox .lb-nav:hover{ background: rgba(255,255,255,.25); } .lightbox .lb-close{ top:26px; right:26px; font-size:1.4rem; font-weight:300; } .lightbox .lb-prev{ left:26px; top:50%; transform:translateY(-50%); } .lightbox .lb-next{ right:26px; top:50%; transform:translateY(-50%); } .lightbox .lb-nav{ font-family: var(--serif); font-size:1.6rem; } .lightbox .lb-cap{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); color:#fff; font-size:.9rem; opacity:.8; } /* =========== CLOSURE PAGE =========== */ #closure-page{ min-height:100vh; width:100%; align-items:center; justify-content:center; padding:32px; position:relative; } .closure-bg{ position:absolute; inset:0; background-size:cover; background-position:center 25%; } .closure-bg::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(30,24,20,.55), rgba(30,24,20,.72)); } .closure-card{ position:relative; z-index:1; max-width:480px; width:100%; margin:0 auto; background: rgba(255,253,250,.96); backdrop-filter: blur(10px); border-radius: var(--radius); box-shadow: var(--shadow-lift); padding:52px 40px; text-align:center; animation: closure-in 1s var(--ease) both; } @keyframes closure-in{ from{ opacity:0; transform: translateY(18px);} to{ opacity:1; transform:none; } } .closure-mark{ width:56px; height:56px; margin:0 auto 20px; border-radius:50%; border:1px solid var(--rose); display:flex; align-items:center; justify-content:center; font-family: var(--serif); font-style:italic; font-size:1.4rem; color: var(--rose-deep); } .closure-card .eyebrow{ justify-content:center; } .closure-card h1{ font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom:18px; } .closure-range{ font-size:1rem; color: var(--ink-soft); line-height:1.6; margin-bottom:28px; } .closure-range strong{ color: var(--ink); font-family: var(--serif); } .closure-countdown{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:28px; } .closure-countdown .unit{ min-width:72px; padding:14px 10px; border-radius:14px; background: var(--cream); border:1px solid var(--line); } .closure-countdown .unit .n{ font-family: var(--serif); font-size:1.8rem; font-weight:700; color: var(--rose-deep); line-height:1; } .closure-countdown .unit .l{ margin-top:6px; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-soft); } .closure-sub{ font-size:.92rem; color: var(--ink-soft); line-height:1.6; } .closure-sub strong{ color: var(--ink); } /* =========== RESPONSIVE =========== */ @media (max-width: 980px){ .about-grid, .loc-grid, .booking-wrap{ grid-template-columns: minmax(0,1fr); } .booking-left{ border-right:none; border-bottom:1px solid var(--line); } .stats-card{ grid-template-columns: repeat(2, minmax(0,1fr)); } .stat:nth-child(2){ border-right:none; } .footer-grid{ grid-template-columns: minmax(0,1fr); gap:30px; } .gallery-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; } } @media (max-width: 720px){ .nav-links{ position:fixed; inset:0 0 0 auto; width:78%; max-width:320px; background: var(--paper); flex-direction:column; align-items:flex-start; padding: 100px 30px 30px; box-shadow: -20px 0 60px rgba(0,0,0,.2); transform: translateX(100%); transition: transform .45s var(--ease); gap:26px; } .nav-links.open{ transform: translateX(0); } .nav-links a:not(.btn){ color: var(--ink) !important; font-size:1.05rem; } .nav-toggle{ display:flex; position:relative; z-index:2; width:26px; height:20px; flex-direction:column; justify-content:space-between; background:none; border:none; } .nav-toggle span{ display:block; height:2px; background:#fff; border-radius:2px; transition: all .35s; } .nav.scrolled .nav-toggle span{ background: var(--ink); } .nav-toggle.open span{ background: var(--ink); } .nav-toggle.open span:nth-child(1){ transform: translateY(9px) rotate(45deg); } .nav-toggle.open span:nth-child(2){ opacity:0; } .nav-toggle.open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); } .services-list{ grid-template-columns: minmax(0,1fr); } .service-row{ grid-template-columns: 40px minmax(0,1fr); } .gallery-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; } .form-grid{ grid-template-columns: minmax(0,1fr); } .slot-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } .stats-card{ grid-template-columns: repeat(2, minmax(0,1fr)); } section{ padding: 76px 0; } .booking-left, .booking-right{ padding: 32px 24px; } }