/* ============================================================ Rousse Rivera — Semi-permanent makeup, Vancouver BC Light-forward editorial system. Radius 0, no shadows, angular. Palette locked to BRAND_KIT (03_PALETA). ============================================================ */ /* ---- Fonts ---- */ @font-face { font-family: 'RousseRivera-Display'; src: url('./fonts/RousseRivera-Display.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'RousseRivera-Text'; src: url('./fonts/RousseRivera-Text.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'RousseRivera-Italic'; src: url('./fonts/RousseRivera-Italic.ttf') format('truetype'); font-display: swap; } /* ---- Tokens ---- */ :root { --ink: #2D2A26; --oro: #C9B898; /* accent ONLY on ink */ --oro-deep: #846E45; /* accent on light */ --greige: #D3CBBC; --greige-60: #E3DDD2; --greige-30: #EEEAE3; --paper: #FAF8F4; --ink-70: #6A6864; --font-display: 'RousseRivera-Display', Georgia, 'Times New Roman', serif; --font-text: 'RousseRivera-Text', Georgia, 'Times New Roman', serif; --font-italic: 'RousseRivera-Italic', Georgia, serif; --header-h: 108px; /* expanded (top of page) */ --header-h-compact: 66px; /* after scroll */ --maxw: 1200px; --colw: 620px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-text); font-size: 17px; line-height: 1.65; letter-spacing: 0.01em; } img { max-width: 100%; display: block; } a { color: var(--oro-deep); text-decoration: none; } a:hover { color: var(--ink); } button { font-family: inherit; } h1, h2, h3, p { margin: 0; } /* ---- Accessibility ---- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--ink); color: var(--paper); padding: 12px 20px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; } .skip-link:focus { left: 0; color: var(--paper); } :focus-visible { outline: 2px solid var(--oro-deep); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---- Type helpers ---- */ .display { font-family: var(--font-display); font-weight: 400; } .italic { font-family: var(--font-italic); font-style: italic; } .eyebrow { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro-deep); } .eyebrow--oro { color: var(--oro); } .h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 5vw, 44px); letter-spacing: 0.12em; line-height: 1.15; } .h2--light { color: var(--paper); } /* ---- Layout ---- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: clamp(20px,4vw,32px); padding-right: clamp(20px,4vw,32px); } .section { padding-block: clamp(64px, 9vw, 112px); } .section--tight { padding-block: clamp(40px, 6vw, 64px); } .bg-soft { background: var(--greige-30); } .text-col { max-width: var(--colw); } /* ============================================================ Reveal animations (perceptible) ============================================================ */ /* Reveals only hide when JS is present (.js on ); without JS, content stays visible. */ .js .reveal { opacity: 0; transform: translateY(30px); } .js .reveal.in { opacity: 1; transform: none; transition: opacity 750ms var(--ease), transform 750ms var(--ease); transition-delay: var(--d, 0ms); } @keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } .hero-anim > * { opacity: 0; animation: riseIn 850ms var(--ease) forwards; } .hero-anim > *:nth-child(1) { animation-delay: 80ms; } .hero-anim > *:nth-child(2) { animation-delay: 200ms; } .hero-anim > *:nth-child(3) { animation-delay: 320ms; } .hero-anim > *:nth-child(4) { animation-delay: 440ms; } .hero-anim > *:nth-child(5) { animation-delay: 560ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } .hero-anim > * { opacity: 1 !important; animation: none !important; } } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 15px 30px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; border: none; cursor: pointer; border-radius: 0; transition: transform 220ms var(--ease), opacity 220ms var(--ease), background 220ms var(--ease), color 220ms var(--ease), box-shadow 220ms var(--ease); } .btn--primary { background: var(--ink); color: var(--paper); } .btn--primary:hover { color: var(--paper); transform: translateY(-4px) scale(1.02); box-shadow: 0 14px 30px -10px rgba(45,42,38,0.55); } .btn--oro { background: var(--oro); color: var(--ink); } .btn--oro:hover { color: var(--ink); transform: translateY(-4px) scale(1.02); box-shadow: 0 14px 30px -10px rgba(132,110,69,0.6); } .btn--secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .btn--secondary:hover { background: var(--ink); color: var(--paper); transform: translateY(-4px) scale(1.02); box-shadow: 0 14px 30px -10px rgba(45,42,38,0.45); } .btn--ghost { background: none; padding: 0 0 3px; min-height: 0; color: var(--oro-deep); position: relative; } .btn--ghost::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--oro-deep); transform: scaleX(1); transform-origin: right; transition: transform 320ms var(--ease); } .btn--ghost:hover { color: var(--ink); } .btn--ghost:hover::after { transform: scaleX(0); transform-origin: right; } .btn[disabled] { opacity: 0.35; cursor: not-allowed; transform: none; } .btn-sm { min-height: 42px; padding: 11px 18px; letter-spacing: 0.14em; } /* ============================================================ Header ============================================================ */ .header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); background: rgba(250,248,244,0.94); backdrop-filter: saturate(1.1) blur(6px); border-bottom: 1px solid transparent; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px,4vw,32px); transition: height 380ms var(--ease), border-color 380ms var(--ease); } .header.scrolled { height: var(--header-h-compact); border-bottom-color: var(--greige); } .header__brand { display: flex; align-items: center; background: none; border: none; cursor: pointer; padding: 0; } .wordmark { font-family: var(--font-display); font-weight: 400; line-height: 1; white-space: nowrap; color: var(--ink); } .header__brand .wordmark { font-size: 27px; letter-spacing: 0.2em; transition: font-size 380ms var(--ease), letter-spacing 380ms var(--ease); } .header.scrolled .header__brand .wordmark { font-size: 18px; letter-spacing: 0.16em; } @media (max-width: 560px) { :root { --header-h: 82px; --header-h-compact: 58px; } .header__brand .wordmark { font-size: 19px; letter-spacing: 0.14em; } .header.scrolled .header__brand .wordmark { font-size: 15px; } .header__actions .btn--primary { display: none; } } .nav-desktop { display: none; gap: 26px; align-items: center; } .nav-desktop a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); position: relative; padding-bottom: 4px; } .nav-desktop a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--oro-deep); transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--ease); } .nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--oro-deep); } .nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after { transform: scaleX(1); } .header__actions { display: flex; align-items: center; gap: 12px; } .lang-toggle { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; border: none; background: none; color: var(--ink-70); padding: 6px 4px; cursor: pointer; transition: color 200ms var(--ease); } .lang-toggle:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .menu-btn { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .menu-btn span { width: 22px; height: 2px; background: var(--ink); display: block; } .menu-btn span:last-child { width: 15px; } /* ---- Mobile menu ---- */ .mobile-menu { position: fixed; inset: 0; z-index: 100; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; padding: 28px 32px 40px; transform: translateY(-100%); visibility: hidden; transition: transform 380ms var(--ease), visibility 380ms; overflow-y: auto; } .mobile-menu.open { transform: translateY(0); visibility: visible; } .mobile-menu__top { position: relative; display: flex; justify-content: center; align-items: center; min-height: 44px; padding-bottom: 24px; margin-bottom: 20px; border-bottom: 1px solid rgba(201,184,152,0.22); } .mobile-menu__top .wordmark { font-size: 24px; color: var(--oro); letter-spacing: 0.18em; } .mobile-menu__close { position: absolute; top: -4px; right: -6px; background: none; border: none; color: var(--paper); font-size: 30px; line-height: 1; cursor: pointer; padding: 6px; } .mobile-menu nav { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; } .mobile-menu nav a, .mobile-menu nav span { font-family: var(--font-display); font-size: clamp(30px,7vw,42px); letter-spacing: 0.06em; color: var(--paper); text-align: left; } .mobile-menu nav a:hover { color: var(--oro); } .mobile-menu nav .is-soon { color: var(--ink-70); opacity: 0.55; } .mobile-menu nav .is-book { color: var(--oro); } .mobile-menu__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 28px; border-top: 1px solid rgba(201,184,152,0.25); } .mobile-menu__foot .lang-toggle { border-color: var(--oro); color: var(--oro); } .mobile-menu__foot .lang-toggle:hover { background: var(--oro); color: var(--ink); } main { padding-top: var(--header-h); } /* ============================================================ Social icons ============================================================ */ .social-row { display: flex; gap: 12px; align-items: center; } .social-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid currentColor; color: inherit; transition: all 220ms var(--ease); } .social-btn svg { width: 19px; height: 19px; } .social-btn:hover { transform: translateY(-3px); } .social-btn--light { color: var(--oro); } .social-btn--light:hover { background: var(--oro); color: var(--ink); } .social-btn--dark { color: var(--ink); } .social-btn--dark:hover { background: var(--ink); color: var(--paper); } /* ============================================================ Hero (light, editorial, split) ============================================================ */ .hero { border-bottom: 1px solid var(--greige); overflow: hidden; } .hero__inner { display: grid; grid-template-columns: 1fr; gap: clamp(32px,5vw,56px); align-items: center; padding-block: clamp(48px, 7vw, 88px); } .hero__copy { max-width: 640px; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; } .hero__eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--oro-deep); display: inline-block; } .hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 8vw, 76px); letter-spacing: 0.02em; line-height: 1.04; color: var(--ink); } .hero h1 em { font-family: var(--font-italic); font-style: italic; letter-spacing: 0.01em; } .hero__sub { margin-top: 22px; font-size: clamp(16px,1.6vw,18px); line-height: 1.6; color: var(--ink-70); max-width: 460px; } .hero__cta { margin-top: 32px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .hero__micro { margin-top: 14px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-70); } .hero__media { position: relative; } .hero__photo { aspect-ratio: 4/5; } .hero__badge { position: absolute; left: -14px; bottom: 24px; background: var(--ink); color: var(--oro); padding: 12px 18px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } @media (min-width: 900px) { .hero__inner { grid-template-columns: 1.05fr 0.95fr; } } /* photo placeholders */ .photo-ph { background: repeating-linear-gradient(135deg, var(--greige-60), var(--greige-60) 11px, var(--greige) 11px, var(--greige) 22px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; } .photo-ph span { font-family: 'Courier New', monospace; font-size: 11px; color: var(--ink-70); letter-spacing: 0.04em; } /* ============================================================ Brand statement band (replaces the AI-slop tag ribbon) ============================================================ */ .statement { background: var(--greige-30); border-block: 1px solid var(--greige); padding: clamp(40px,6vw,72px) clamp(20px,4vw,32px); text-align: center; } .statement .eyebrow { display: block; margin-bottom: 18px; } .statement__line { max-width: 860px; margin: 0 auto; font-family: var(--font-italic); font-style: italic; font-size: clamp(21px,3.2vw,32px); line-height: 1.38; color: var(--ink); letter-spacing: 0.01em; } .statement__line strong { font-family: var(--font-display); font-style: normal; font-weight: 400; } /* ============================================================ Section heading block ============================================================ */ .sec-head { max-width: 680px; margin-bottom: clamp(32px,5vw,52px); } .sec-head .eyebrow { display: block; margin-bottom: 16px; } .sec-head p { margin-top: 14px; color: var(--ink-70); font-size: 16px; } /* ---- Service cards ---- */ .grid-cards { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 640px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } } .card { border: 1px solid var(--greige); background: var(--paper); transition: transform 300ms var(--ease), border-color 300ms var(--ease); overflow: hidden; } .card:hover { transform: translateY(-6px); border-color: var(--ink); } .card__photo { aspect-ratio: 4/5; overflow: hidden; } .card__photo .photo-ph { width: 100%; height: 100%; transition: transform 500ms var(--ease); } .card:hover .card__photo .photo-ph { transform: scale(1.04); } .card__body { padding: 26px; } .card__body h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(21px,2vw,27px); letter-spacing: 0.05em; line-height: 1.25; margin-bottom: 10px; } .card__body p { font-size: 15px; line-height: 1.6; color: var(--ink-70); } .card__link { display: inline-block; margin-top: 16px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oro-deep); } .card:hover .card__link { color: var(--ink); } /* ============================================================ Consultation band (the single dark anchor) ============================================================ */ .consult-block { background: var(--ink); position: relative; } .consult-block .sec-head { margin-left: auto; margin-right: auto; text-align: center; } .consult-block h2 { color: var(--paper); } .consult-block .sec-head p { color: var(--greige); } .consult-steps { max-width: 940px; margin: clamp(32px,5vw,52px) auto 0; display: grid; grid-template-columns: 1fr; gap: 36px; } @media (min-width: 720px) { .consult-steps { grid-template-columns: repeat(3, 1fr); } } .step { text-align: center; } .step .n { font-family: var(--font-display); font-size: 34px; color: var(--oro); margin-bottom: 10px; } .step .t { font-family: var(--font-display); font-size: 19px; letter-spacing: 0.04em; color: var(--paper); margin-bottom: 8px; } .step .d { font-size: 14px; line-height: 1.6; color: var(--greige); } .consult-cta { text-align: center; margin-top: clamp(36px,5vw,48px); } .consult-cta .hero__micro { color: var(--greige); } /* ============================================================ Carousel (results / proof) ============================================================ */ .carousel { position: relative; overflow: hidden; } .carousel__track { display: flex; transition: transform 650ms var(--ease); } .carousel__slide { min-width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; align-items: center; } .carousel__slide .photo-ph { aspect-ratio: 4/5; border-radius: 2px; } .carousel__slide .tag { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro-deep); margin-bottom: 12px; } .carousel__slide .title { font-family: var(--font-display); font-size: clamp(26px,3vw,36px); letter-spacing: 0.04em; margin-bottom: 16px; } .carousel__slide .note { font-family: var(--font-italic); font-style: italic; font-size: clamp(18px,2vw,23px); line-height: 1.5; max-width: 440px; color: var(--ink); } .carousel__controls { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; } .carousel__dots { display: flex; gap: 8px; align-items: center; } .carousel__dots button { height: 8px; width: 8px; border: none; padding: 0; cursor: pointer; background: var(--greige); transition: all 320ms var(--ease); } .carousel__dots button[aria-current="true"] { width: 26px; background: var(--oro-deep); } .carousel__arrows { display: flex; gap: 8px; } .carousel__arrows button { width: 48px; height: 48px; border: 1px solid var(--ink); background: none; color: var(--ink); cursor: pointer; font-size: 18px; transition: all 220ms var(--ease); } .carousel__arrows button:hover { background: var(--ink); color: var(--paper); } /* ---- Instagram reels ---- */ .reels-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 560px) { .reels-grid { grid-template-columns: repeat(3, 1fr); } } .reel { position: relative; aspect-ratio: 9/16; overflow: hidden; background: var(--ink); border: 1px solid var(--ink); display: block; } .reel .reel-ph { position: absolute; inset: 0; opacity: 0.28; background: repeating-linear-gradient(135deg, #3a352f, #3a352f 11px, #2D2A26 11px, #2D2A26 22px); } .reel .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border: 1px solid var(--oro); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--oro); transition: transform 320ms var(--ease); } .reel:hover .play { transform: translate(-50%, -50%) scale(1.08); } .reel .lbl { position: absolute; left: 14px; right: 14px; bottom: 14px; color: var(--greige); font-family: 'Courier New', monospace; font-size: 11px; letter-spacing: 0.03em; } .reels-cta { margin-top: 28px; } /* ---- Results gallery ---- */ .gallery__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .gallery__filters button { border: 1px solid var(--greige); background: none; color: var(--ink-70); padding: 9px 18px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: all 180ms var(--ease); } .gallery__filters button:hover { border-color: var(--ink); color: var(--ink); } .gallery__filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } .gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 760px) { .gallery__grid { grid-template-columns: repeat(3, 1fr); } } .gallery__item { aspect-ratio: 4/5; border-radius: 2px; overflow: hidden; } .gallery__item .photo-ph { width: 100%; height: 100%; } /* ---- Quote ---- */ .quote-band { text-align: center; } .quote-band blockquote { font-family: var(--font-italic); font-style: italic; font-size: clamp(22px, 3vw, 30px); letter-spacing: 0.01em; line-height: 1.45; max-width: 720px; margin: 0 auto; color: var(--ink); } .quote-band cite { display: block; margin-top: 22px; font-family: var(--font-text); font-style: normal; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro-deep); } /* ============================================================ Consulta page ============================================================ */ .page-head { max-width: 720px; } .page-head h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(38px,7vw,68px); letter-spacing: 0.02em; line-height: 1.08; } .page-head .lead { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--ink-70); } .facts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } .facts span { border: 1px solid var(--greige); padding: 9px 16px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-70); } .ambiance { aspect-ratio: 16/9; margin-top: 40px; } .block-h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px,2vw,28px); letter-spacing: 0.06em; line-height: 1.25; margin-bottom: 14px; } .includes-list { margin-top: 18px; } .includes-list .row { display: flex; gap: 14px; font-size: 17px; line-height: 1.6; margin-bottom: 14px; max-width: 640px; } .includes-list .dot { width: 7px; height: 7px; background: var(--oro-deep); margin-top: 9px; flex-shrink: 0; } .panel-soft { background: var(--greige-30); padding: clamp(28px,4vw,40px); margin-top: 56px; } .panel-soft p { font-size: 16px; line-height: 1.65; color: var(--ink-70); max-width: 640px; } /* ---- Booking ---- */ .booking { margin-top: 72px; background: transparent; border: 0; padding: 0; } .booking h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px,4vw,34px); letter-spacing: 0.08em; margin: 12px 0 18px; } .service-tag { display: inline-block; background: var(--ink); color: var(--oro); padding: 8px 16px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 24px; } .calendar-card { background: var(--paper); border: 1px solid var(--greige); padding: clamp(20px,3vw,28px); } .cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .cal-head button { background: none; border: 1px solid var(--greige); cursor: pointer; color: var(--ink); font-size: 14px; width: 44px; height: 44px; transition: all 200ms var(--ease); } .cal-head button:hover:not([disabled]) { background: var(--ink); color: var(--paper); } .cal-head button[disabled] { opacity: 0.3; cursor: not-allowed; } .cal-head .month { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .cal-grid.weekdays { margin-bottom: 8px; } .cal-grid.weekdays div { text-align: center; font-size: 11px; color: var(--ink-70); letter-spacing: 0.05em; } .cal-grid.days button { aspect-ratio: 1; border: 1px solid var(--greige); background: var(--paper); color: var(--ink); font-size: 13px; cursor: pointer; transition: all 160ms var(--ease); } .cal-grid.days button:hover:not([disabled]) { border-color: var(--ink); } .cal-grid.days button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } .cal-grid.days button[disabled] { background: transparent; color: var(--greige); border-color: transparent; cursor: default; } .cal-grid.days button.empty { border: none; background: none; cursor: default; } .times { margin-top: 26px; } .times .label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-70); } .time-slots { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .time-slots button { border: 1px solid var(--greige); background: var(--paper); color: var(--ink); padding: 11px 20px; font-size: 13px; cursor: pointer; min-height: 44px; transition: all 160ms var(--ease); } .time-slots button:hover { border-color: var(--ink); } .time-slots button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } .confirm-btn { width: 100%; margin-top: 28px; } .confirm-msg { margin-top: 24px; padding: 20px; background: var(--ink); color: var(--paper); text-align: center; font-size: 15px; line-height: 1.5; } .confirm-msg .confirm-actions { margin-top: 16px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .booking-note { text-align: center; margin-top: 16px; font-size: 12px; color: var(--ink-70); } .booking-fallback { text-align: center; margin-top: 14px; font-size: 13px; color: var(--ink-70); } .booking-intro { font-size: 15px; line-height: 1.6; color: var(--ink-70); max-width: 560px; margin-bottom: 24px; } .square-widget { background: #fff; border: 1px solid var(--greige); margin-top: 10px; overflow: hidden; min-height: 760px; } .square-widget iframe { width: 100% !important; max-width: 100% !important; height: 1040px !important; border: 0; background: #fff; display: block; } @media (max-width: 560px) { .square-widget iframe { height: 900px !important; } } .booking-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } .booking-cta .btn { flex: 1; min-width: 220px; } /* ---- Featured service ---- */ .featured { background: var(--ink); padding: clamp(28px,4vw,44px); margin-top: 44px; display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between; } .featured .info { flex: 1; min-width: 240px; } .featured .name { font-family: var(--font-display); font-size: clamp(24px,4vw,34px); letter-spacing: 0.04em; color: var(--paper); margin: 12px 0 10px; } .featured p { font-size: 15px; line-height: 1.6; color: var(--greige); max-width: 520px; } .svc-cat { margin-top: 64px; } .svc-cat h2 { font-family: var(--font-italic); font-style: italic; font-weight: 400; font-size: clamp(30px,5vw,44px); margin-bottom: 26px; } .svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px 48px; } .svc-item { border-top: 1px solid var(--greige); padding-top: 18px; transition: border-color 240ms var(--ease); } .svc-item:hover { border-color: var(--ink); } .svc-item .top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .svc-item h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(19px,2vw,23px); letter-spacing: 0.04em; } .svc-item .price { font-family: var(--font-display); font-size: 21px; white-space: nowrap; } .svc-item p { font-size: 14px; line-height: 1.6; color: var(--ink-70); margin-top: 8px; } .disclaimer { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--greige); font-size: 13px; line-height: 1.6; color: var(--ink-70); } /* ---- Map ---- */ .map-band { margin-top: 56px; } .map-embed { border: 1px solid var(--greige); width: 100%; height: 400px; filter: grayscale(0.4) contrast(1.05); } .map-meta { margin-top: 18px; font-size: 14px; line-height: 1.7; color: var(--ink-70); } /* ============================================================ Footer (clean, main lockup, social) ============================================================ */ .footer { background: var(--ink); color: var(--paper); padding: clamp(56px,8vw,96px) 24px 28px; } .footer__brand { text-align: center; padding-bottom: clamp(40px,6vw,56px); border-bottom: 1px solid rgba(201,184,152,0.22); } .footer__brand .wordmark { display: inline-block; font-size: clamp(30px,6vw,46px); color: var(--paper); letter-spacing: 0.22em; } .footer__brand p { margin-top: 18px; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--oro); } .footer__grid { max-width: var(--maxw); margin: clamp(40px,6vw,56px) auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 40px; } .footer__col .cap { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro); margin-bottom: 16px; } .footer__links { display: flex; flex-direction: column; gap: 12px; } .footer__links a { font-size: 14px; color: var(--paper); } .footer__links a:hover { color: var(--oro); } .footer__links span { font-size: 14px; color: var(--greige); opacity: 0.55; } .footer__col address { font-style: normal; font-size: 14px; line-height: 1.8; color: var(--greige); white-space: pre-line; } .footer__col address a { color: var(--oro); } .footer__news label { font-size: 14px; color: var(--greige); display: block; margin-bottom: 12px; line-height: 1.5; } .footer__news .field { display: flex; gap: 8px; } .footer__news input { background: none; border: 1px solid var(--ink-70); color: var(--paper); padding: 11px 12px; font-size: 14px; flex: 1; min-width: 0; font-family: inherit; } .footer__news input::placeholder { color: var(--ink-70); } .footer__news input:focus { border-color: var(--oro); outline: none; } .footer__news button { background: var(--oro); color: var(--ink); border: none; padding: 11px 16px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: opacity 200ms; } .footer__news button:hover { opacity: 0.85; } .footer__consent { margin-top: 12px; display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--greige); line-height: 1.5; } .footer__consent input { margin-top: 3px; accent-color: var(--oro); } .footer__legal { max-width: var(--maxw); margin: clamp(40px,6vw,56px) auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(201,184,152,0.22); font-size: 12px; color: var(--ink-70); } .footer__legal a { color: var(--ink-70); } .footer__legal a:hover { color: var(--oro); } /* ---- Sticky CTA ---- */ .sticky-cta { position: fixed; inset: auto 0 0 0; z-index: 60; background: var(--ink); padding: 12px 20px; display: flex; justify-content: center; gap: 12px; transform: translateY(125%); opacity: 0; transition: transform 460ms var(--ease), opacity 300ms ease; will-change: transform; } .sticky-cta.show { transform: translateY(0); opacity: 1; } .sticky-cta .btn { flex: 1; max-width: 340px; } /* ============================================================ Newsletter popup ============================================================ */ .rr-popup { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 320ms var(--ease), visibility 320ms; } .rr-popup.open { opacity: 1; visibility: visible; } .rr-popup__overlay { position: absolute; inset: 0; background: rgba(45,42,38,0.6); } .rr-popup__card { position: relative; background: var(--paper); max-width: 440px; width: 100%; padding: clamp(32px,5vw,48px); border: 1px solid var(--greige); transform: translateY(16px) scale(0.98); transition: transform 380ms var(--ease); } .rr-popup.open .rr-popup__card { transform: none; } .rr-popup__close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 26px; line-height: 1; color: var(--ink-70); cursor: pointer; } .rr-popup__close:hover { color: var(--ink); } .rr-popup .eyebrow { display: block; margin-bottom: 14px; } .rr-popup h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px,4vw,32px); letter-spacing: 0.03em; line-height: 1.15; color: var(--ink); } .rr-popup p { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--ink-70); } .rr-popup form { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; } .rr-popup input { border: 1px solid var(--greige); background: var(--paper); color: var(--ink); padding: 13px 14px; font-size: 15px; font-family: inherit; } .rr-popup input:focus { border-color: var(--ink); outline: none; } .rr-popup__decline { background: none; border: none; margin-top: 14px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-70); cursor: pointer; } .rr-popup__decline:hover { color: var(--ink); } .rr-popup__thanks { display: none; } .rr-popup.done .rr-popup__body { display: none; } .rr-popup.done .rr-popup__thanks { display: block; } /* ============================================================ Responsive ============================================================ */ @media (min-width: 860px) { .nav-desktop { display: flex; } .menu-btn { display: none; } .sticky-cta { display: none; } }