/* ========================================================================== Kairos House Media - design system Theming: dark is the default/canonical look. Light is an opt-in variant toggled via [data-theme="light"] on (see js/main.js). The hero, inner-page banners and the lightbox are intentionally theme-invariant (always a dark scrim over a photo) since they exist for image legibility, not chrome - only the "brand-*" constants feed those. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap'); :root{ /* brand constants - fixed regardless of theme */ --brand-ink:#121110; --brand-paper:#f6f1e7; --brand-muted:#b6ac9c; --accent:#d9813f; --accent-deep:#b5522c; --gold:#e3b23c; --on-accent:#121110; --font-display:'Fraunces', Georgia, 'Times New Roman', serif; --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --container: 1220px; --ease: cubic-bezier(.22,.61,.36,1); /* theme-reactive tokens - dark (default) */ --bg:#121110; --bg-soft:#1b1917; --bg-elev:#242220; --surface:#f6f1e7; --text:#f6f1e7; --text-on-surface:#121110; --muted:#b6ac9c; --muted-on-surface:#6b5f4f; --accent-on-surface:#b5522c; --line: rgba(246,241,231,0.14); --line-on-surface: rgba(18,17,16,0.12); --header-solid-bg: rgba(18,17,16,.86); --hover-tint: rgba(246,241,231,.08); --hover-tint-strong: rgba(246,241,231,.1); --hover-border: rgba(246,241,231,.35); --map-filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9); } :root[data-theme="light"]{ --bg:#faf7f1; --bg-soft:#f1ebde; --bg-elev:#ece3d2; --surface:#171512; --text:#211d18; --text-on-surface:#f6f1e7; --muted:#6f6255; --muted-on-surface:#b6ac9c; --accent-on-surface:#e3b23c; --line: rgba(30,25,20,0.12); --line-on-surface: rgba(246,241,231,0.14); --header-solid-bg: rgba(250,247,241,.86); --hover-tint: rgba(20,16,12,.05); --hover-tint-strong: rgba(20,16,12,.07); --hover-border: rgba(20,16,12,.28); --map-filter: none; } *, *::before, *::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background-color .4s ease, color .4s ease; } 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(--font-display); font-weight:600; line-height:1.08; margin:0; } p{ margin:0; } button{ font-family:inherit; cursor:pointer; } .container{ max-width:var(--container); margin:0 auto; padding:0 32px; } .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:18px; } .eyebrow::before{ content:""; width:28px; height:1px; background:var(--accent); } .section{ padding:120px 0; transition:background-color .4s ease, color .4s ease; } .section-tight{ padding:80px 0; transition:background-color .4s ease, color .4s ease; } .on-paper{ background:var(--surface); color:var(--text-on-surface); } .on-paper .eyebrow{ color:var(--accent-on-surface); } .on-paper .eyebrow::before{ background:var(--accent-on-surface); } .on-elev{ background:var(--bg-soft); } .section-head{ max-width:640px; margin-bottom:64px; } .section-head h2{ font-size:clamp(2rem,4vw,2.9rem); } .section-head .lede{ margin-top:18px; color:var(--muted); font-size:1.08rem; max-width:56ch; } .on-paper .section-head .lede{ color:var(--muted-on-surface); } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } /* ---- buttons ---- */ .btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:2px; font-weight:600; font-size:.92rem; border:1px solid transparent; transition:all .3s var(--ease); white-space:nowrap; } .btn-primary{ background:var(--accent); color:var(--on-accent); } .btn-primary:hover{ background:var(--gold); transform:translateY(-2px); } .btn-ghost{ border-color:var(--line); color:var(--text); } .btn-ghost:hover{ background:var(--hover-tint); border-color:var(--hover-border); } .on-paper .btn-ghost{ border-color:var(--line-on-surface); color:var(--text-on-surface); } .on-paper .btn-ghost:hover{ background:var(--hover-tint-strong); } .btn-arrow{ transition:transform .3s var(--ease); } .btn:hover .btn-arrow{ transform:translateX(4px); } /* ========================================================================== Header / nav ========================================================================== */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:1000; padding:22px 0; transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease); } .site-header.solid, .site-header.scrolled{ background:var(--header-solid-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding:16px 0; box-shadow:0 1px 0 var(--line); } .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; } .header-actions{ display:flex; align-items:center; gap:8px; } .brand{ display:flex; align-items:center; gap:12px; } .brand-mark{ display:grid; grid-template-columns:repeat(3,6px); grid-template-rows:repeat(2,6px); gap:3px; flex:none; } .brand-mark span{ background:var(--text); transition:background-color .3s ease; } .brand-mark span:nth-child(2){ background:var(--accent); } .brand-text{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:.01em; color:var(--text); transition:color .3s ease; } .brand-text b{ color:var(--accent); font-weight:600; } .main-nav{ display:flex; align-items:center; gap:8px; } .nav-link{ padding:10px 16px; font-size:.92rem; font-weight:500; color:var(--muted); border-radius:2px; transition:color .25s, background .25s; } .nav-link:hover{ color:var(--text); background:var(--hover-tint); } .nav-link.active{ color:var(--text); } .nav-cta{ margin-left:8px; padding:10px 20px; background:var(--accent); color:var(--on-accent) !important; border-radius:2px; font-weight:600; } .nav-cta:hover{ background:var(--gold); } .nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; } .nav-toggle span{ width:22px; height:2px; background:var(--text); transition:transform .3s, opacity .3s, background-color .3s; } /* ---- theme toggle ---- */ .theme-toggle{ display:flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--text); transition:background .25s, border-color .25s, color .25s, transform .25s; } .theme-toggle:hover{ background:var(--hover-tint); transform:translateY(-1px); } .theme-toggle svg{ display:block; } .theme-toggle .icon-moon{ display:none; } [data-theme="light"] .theme-toggle .icon-sun{ display:none; } [data-theme="light"] .theme-toggle .icon-moon{ display:block; } /* on the homepage, before scroll, the header floats transparent over the hero photo - brand/nav/toggle need to stay light regardless of theme */ body.is-home .site-header:not(.scrolled) .brand-text, body.is-home .site-header:not(.scrolled) .nav-link, body.is-home .site-header:not(.scrolled) .theme-toggle{ color:var(--brand-paper); } body.is-home .site-header:not(.scrolled) .brand-mark span{ background:var(--brand-paper); } body.is-home .site-header:not(.scrolled) .brand-mark span:nth-child(2){ background:var(--accent); } body.is-home .site-header:not(.scrolled) .nav-toggle span{ background:var(--brand-paper); } body.is-home .site-header:not(.scrolled) .theme-toggle{ border-color:rgba(246,241,231,.35); } body.is-home .site-header:not(.scrolled) .nav-link:hover{ background:rgba(246,241,231,.1); } body.is-home .site-header:not(.scrolled) .theme-toggle:hover{ background:rgba(246,241,231,.12); } /* ========================================================================== Hero (fullscreen) - always dark-on-photo, independent of site theme ========================================================================== */ .hero{ position:relative; height:100vh; min-height:560px; overflow:hidden; display:flex; align-items:flex-end; } .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.6s ease; } .hero-slide.active{ opacity:1; animation:kenburns 9s ease forwards; } @keyframes kenburns{ from{ transform:scale(1.08);} to{ transform:scale(1);} } .hero::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(12,11,10,.55) 0%, rgba(12,11,10,.35) 32%, rgba(12,11,10,.85) 100%); } .hero-content{ position:relative; z-index:2; width:100%; padding:0 32px 96px; max-width:var(--container); margin:0 auto; } .hero-content .eyebrow{ color:var(--gold); } .hero-content .eyebrow::before{ background:var(--gold); } .hero h1{ font-size:clamp(2.6rem,6.4vw,5.2rem); max-width:16ch; color:var(--brand-paper); letter-spacing:-.01em; } .hero-sub{ margin-top:22px; max-width:52ch; font-size:1.15rem; color:var(--brand-paper); opacity:.86; } .hero-actions{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; } .hero-actions .btn-ghost{ color:var(--brand-paper); border-color:rgba(246,241,231,.4); } .hero-actions .btn-ghost:hover{ background:rgba(246,241,231,.1); border-color:rgba(246,241,231,.55); } .hero-meta{ position:absolute; z-index:2; left:0; right:0; bottom:28px; display:flex; justify-content:space-between; align-items:center; padding:0 32px; max-width:var(--container); margin:0 auto; width:100%; } .hero-caption{ font-size:.82rem; color:var(--brand-paper); opacity:.75; } .hero-dots{ display:flex; gap:10px; } .hero-dot{ width:26px; height:3px; background:rgba(246,241,231,.35); border:0; padding:0; transition:background .3s; } .hero-dot.active{ background:var(--gold); } .scroll-cue{ position:absolute; z-index:2; right:32px; bottom:110px; writing-mode:vertical-rl; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brand-paper); opacity:.6; display:flex; align-items:center; gap:10px; } .scroll-cue::after{ content:""; width:1px; height:46px; background:var(--brand-paper); opacity:.5; } /* ---- inner page header (non-home) ---- Fixed height so every inner page banner matches; always a dark scrim over a photo (theme-invariant, same reasoning as the hero). Background position is biased toward the upper portion of the frame by default so faces in people-photos aren't cropped by the shorter, wider banner box; individual pages can override via an inline background-position where a specific photo needs it (see about/services/portfolio/contact .page-header .bg). */ .page-header{ position:relative; overflow:hidden; background:var(--brand-ink); height:52vh; min-height:420px; max-height:520px; display:flex; align-items:flex-end; padding-bottom:72px; } .page-header .bg{ position:absolute; inset:0; background-size:cover; background-position:center 28%; opacity:.34; } .page-header::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,17,16,.4), var(--brand-ink) 92%); } .page-header .container{ position:relative; z-index:1; } .page-header h1{ font-size:clamp(2.4rem,5vw,3.6rem); max-width:18ch; color:var(--brand-paper); } .page-header .lede{ margin-top:18px; max-width:60ch; color:var(--brand-muted); font-size:1.08rem; } /* ========================================================================== Statement / pull-quote ========================================================================== */ .statement{ text-align:center; } .statement p{ font-family:var(--font-display); font-weight:500; font-style:italic; font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1.4; max-width:22ch; margin:0 auto; } .statement cite{ display:block; margin-top:28px; font-family:var(--font-body); font-style:normal; font-size:.9rem; color:var(--muted); } .on-paper .statement cite{ color:var(--muted-on-surface); } /* ========================================================================== Cards / grids ========================================================================== */ .grid{ display:grid; gap:28px; } .grid-4{ grid-template-columns:repeat(4,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-2{ grid-template-columns:repeat(2,1fr); } .service-card{ padding:36px 30px; border:1px solid var(--line); border-radius:2px; transition:border-color .3s, transform .3s var(--ease), background .3s; background:var(--bg-soft); } .service-card:hover{ border-color:var(--accent); transform:translateY(-6px); } .service-card .num{ font-family:var(--font-display); color:var(--accent); font-size:.95rem; } .service-card h3{ font-size:1.32rem; margin-top:22px; } .service-card p{ margin-top:14px; color:var(--muted); font-size:.96rem; } .service-card .tags{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px; } .service-card .tags span{ font-size:.74rem; padding:5px 10px; border:1px solid var(--line); color:var(--muted); border-radius:20px; } /* featured work bento */ .bento{ display:grid; gap:20px; grid-template-columns:repeat(6,1fr); grid-auto-rows:190px; } .bento a{ position:relative; overflow:hidden; border-radius:2px; grid-column:span 3; } .bento a.tall{ grid-row:span 2; } .bento a.wide{ grid-column:span 4; } .bento a.narrow{ grid-column:span 2; } .bento img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } .bento a:hover img{ transform:scale(1.07); } .bento .cap{ position:absolute; left:0; right:0; bottom:0; padding:20px; color:var(--brand-paper); background:linear-gradient(0deg, rgba(12,11,10,.88), transparent 70%); opacity:0; transform:translateY(8px); transition:all .35s var(--ease); } .bento a:hover .cap{ opacity:1; transform:translateY(0); } .bento .cap .tag{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); } .bento .cap .t{ font-family:var(--font-display); font-size:1.05rem; margin-top:4px; } /* ========================================================================== Client marquee ========================================================================== */ .marquee{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee-track{ display:flex; gap:20px; width:max-content; animation:scroll 32s linear infinite; } .marquee:hover .marquee-track{ animation-play-state:paused; } @keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} } .logo-card{ width:190px; height:110px; flex:none; background:var(--brand-paper); border-radius:2px; display:flex; align-items:center; justify-content:center; padding:22px; } .logo-card img{ width:100%; height:100%; object-fit:contain; filter:grayscale(1) contrast(1.05); opacity:.82; transition:opacity .3s, filter .3s; } .logo-card:hover img{ filter:none; opacity:1; } /* ========================================================================== CTA banner ========================================================================== */ .cta-banner{ position:relative; padding:110px 0; text-align:center; overflow:hidden; background:var(--bg-soft); transition:background-color .4s ease; } .cta-banner h2{ font-size:clamp(2rem,4.6vw,3.4rem); max-width:16ch; margin:0 auto; } .cta-banner .lede{ margin:20px auto 0; max-width:52ch; color:var(--muted); } .cta-banner .actions{ display:flex; justify-content:center; gap:16px; margin-top:38px; flex-wrap:wrap; } /* ========================================================================== Values / process ========================================================================== */ .value-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .value-item{ background:var(--bg); color:var(--text); padding:34px; transition:background-color .4s ease, color .4s ease; } .value-item h3{ font-size:1.15rem; display:flex; align-items:baseline; gap:12px; } .value-item h3 .idx{ font-family:var(--font-display); color:var(--accent); font-size:1rem; } .value-item p{ margin-top:12px; color:var(--muted); font-size:.95rem; } .process{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line-on-surface); } .process-step{ padding:30px 26px 0; border-right:1px solid var(--line-on-surface); } .process-step:last-child{ border-right:0; } .process-step .idx{ font-family:var(--font-display); font-size:1.6rem; color:var(--accent-on-surface); } .process-step h4{ margin-top:14px; font-size:1.05rem; } .process-step p{ margin-top:10px; font-size:.92rem; color:var(--muted-on-surface); } /* ========================================================================== About page specifics ========================================================================== */ .split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:72px; align-items:center; } .split img{ border-radius:2px; } .split .kicker-quote{ font-family:var(--font-display); font-style:italic; font-size:1.3rem; margin:26px 0; color:var(--text); } .on-paper .split .kicker-quote{ color:var(--text-on-surface); } .split p + p{ margin-top:18px; } .split .lede-body{ color:var(--muted); } .on-paper .split .lede-body{ color:var(--muted-on-surface); } /* ========================================================================== Services page detail rows ========================================================================== */ .service-row{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; padding:90px 0; border-bottom:1px solid var(--line); } .service-row:last-child{ border-bottom:0; } .service-row.reverse .media{ order:2; } .service-row .media{ position:relative; border-radius:2px; overflow:hidden; } .service-row .media img{ width:100%; height:420px; object-fit:cover; } .service-row .media.contain{ background:var(--bg-elev); display:flex; align-items:center; justify-content:center; } .service-row .media.contain img{ width:100%; height:420px; object-fit:contain; } .service-row .index{ font-family:var(--font-display); color:var(--accent); font-size:1rem; margin-bottom:16px; display:block; } .service-row h3{ font-size:2rem; } .service-row .lede{ margin-top:16px; color:var(--muted); font-size:1.05rem; } .service-row .list{ margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; } .service-row .list li{ font-size:.94rem; padding-left:18px; position:relative; color:var(--text); } .service-row .list li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:1px; background:var(--accent); } /* ========================================================================== Portfolio / gallery ========================================================================== */ .filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:56px; } .filter-btn{ padding:10px 20px; border:1px solid var(--line); border-radius:20px; font-size:.86rem; color:var(--muted); background:transparent; transition:all .25s; } .filter-btn:hover{ color:var(--text); border-color:var(--text); } .filter-btn.active{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; } .gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .gallery-item{ position:relative; overflow:hidden; border-radius:2px; cursor:pointer; } .gallery-item .ph{ aspect-ratio:5/4; overflow:hidden; } .gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .gallery-item:hover img{ transform:scale(1.08); } .gallery-item .info{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; color:var(--brand-paper); background:linear-gradient(0deg, rgba(12,11,10,.9), transparent 65%); opacity:0; transition:opacity .3s; } .gallery-item:hover .info{ opacity:1; } .gallery-item .info .tag{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); } .gallery-item .info .t{ font-family:var(--font-display); font-size:1.1rem; margin-top:4px; } .gallery-item.hide{ display:none; } /* lightbox is a "cinema mode" overlay - always dark, independent of theme */ .lightbox{ position:fixed; inset:0; background:rgba(10,9,8,.94); z-index:2000; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .3s var(--ease); } .lightbox.open{ opacity:1; visibility:visible; } .lightbox figure{ max-width:min(1100px,92vw); max-height:86vh; margin:0; text-align:center; } .lightbox img{ max-width:100%; max-height:78vh; object-fit:contain; margin:0 auto; } .lightbox figcaption{ margin-top:16px; color:var(--brand-muted); font-size:.92rem; } .lightbox .lb-close, .lightbox .lb-nav{ position:absolute; background:none; border:1px solid rgba(246,241,231,.14); color:var(--brand-paper); width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; transition:background .25s; } .lightbox .lb-close:hover, .lightbox .lb-nav:hover{ background:rgba(246,241,231,.1); } .lightbox .lb-close{ top:24px; right:24px; } .lightbox .lb-prev{ left:24px; top:50%; transform:translateY(-50%); } .lightbox .lb-next{ right:24px; top:50%; transform:translateY(-50%); } /* ========================================================================== Contact page ========================================================================== */ .contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; } .form-field{ margin-bottom:22px; } .form-field label{ display:block; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; } .form-field input, .form-field textarea{ width:100%; background:transparent; border:0; border-bottom:1px solid var(--line); padding:12px 2px; color:var(--text); font-family:inherit; font-size:1rem; transition:border-color .25s; } .form-field input:focus, .form-field textarea:focus{ outline:0; border-color:var(--accent); } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } .form-note{ margin-top:16px; font-size:.85rem; color:var(--muted); display:none; } .form-note.show{ display:block; } .info-card{ border:1px solid var(--line); padding:34px; border-radius:2px; } .info-card h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:10px; } .info-card .val{ font-size:1.15rem; margin-bottom:26px; } .info-card .val:last-child{ margin-bottom:0; } .social-row{ display:flex; gap:12px; margin-top:26px; } .social-row a{ width:42px; height:42px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .25s; } .social-row a:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); } .map-wrap{ margin-top:24px; border-radius:2px; overflow:hidden; filter:var(--map-filter); height:260px; } .map-wrap iframe{ width:100%; height:100%; border:0; } /* ========================================================================== Booking flow ========================================================================== */ .booking-steps{ display:flex; gap:10px; margin-bottom:48px; flex-wrap:wrap; } .booking-steps span{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:8px 16px; border:1px solid var(--line); border-radius:20px; } .booking-steps span.done{ color:var(--on-accent); background:var(--accent); border-color:var(--accent); } .booking-steps span.current{ color:var(--text); border-color:var(--text); font-weight:600; } .package-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:40px; } .package-card{ display:block; border:1px solid var(--line); border-radius:2px; padding:26px; cursor:pointer; transition:border-color .25s, background .25s; } .package-card:hover{ border-color:var(--accent); } .package-card input{ position:absolute; opacity:0; pointer-events:none; } .package-card input:checked + .package-body{ } .package-card:has(input:checked){ border-color:var(--accent); background:var(--hover-tint); } .package-card .service-name{ font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin-bottom:8px; } .package-card h3{ font-size:1.2rem; } .package-card p{ color:var(--muted); font-size:.92rem; margin-top:10px; } .package-card .meta{ display:flex; justify-content:space-between; margin-top:18px; font-size:.9rem; font-weight:600; } .booking-summary{ display:flex; flex-wrap:wrap; gap:10px 28px; padding:20px 26px; border:1px solid var(--line); border-radius:2px; margin-bottom:40px; background:var(--bg-soft); } .booking-summary div span{ display:block; } .booking-summary .k{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); } .booking-summary .v{ font-family:var(--font-display); font-size:1.05rem; margin-top:2px; } .slot-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin-bottom:40px; } .slot-btn{ padding:13px 10px; text-align:center; border:1px solid var(--line); border-radius:2px; font-size:.92rem; font-weight:600; background:transparent; color:var(--text); cursor:pointer; transition:all .2s; } .slot-btn:hover{ border-color:var(--accent); } .slot-empty{ color:var(--muted); padding:20px 0; } .booking-result{ text-align:center; padding:40px 0; } .booking-result .icon{ font-size:2.6rem; margin-bottom:14px; } .booking-result h2{ font-size:clamp(1.8rem,4vw,2.6rem); } .booking-result p{ color:var(--muted); margin-top:14px; max-width:52ch; margin-left:auto; margin-right:auto; } .booking-result .booking-summary{ margin:32px auto 0; max-width:560px; justify-content:center; text-align:left; } .honeypot-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* ========================================================================== Footer ========================================================================== */ .site-footer{ background:var(--bg-soft); padding:90px 0 0; border-top:1px solid var(--line); transition:background-color .4s ease, border-color .4s ease; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:48px; padding-bottom:70px; } .footer-brand .brand{ margin-bottom:18px; } .footer-brand p{ color:var(--muted); max-width:32ch; font-size:.94rem; } .footer-col h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:20px; font-family:var(--font-body); font-weight:600; } .footer-col ul li{ margin-bottom:12px; } .footer-col a{ color:var(--text); opacity:.86; font-size:.94rem; transition:opacity .2s, color .3s; } .footer-col a:hover{ opacity:1; color:var(--accent); } .footer-bottom{ border-top:1px solid var(--line); padding:26px 0; display:flex; justify-content:space-between; color:var(--muted); font-size:.82rem; flex-wrap:wrap; gap:10px; } /* ========================================================================== Scroll reveal + misc ========================================================================== */ /* Hidden pre-state only applies once JS confirms it can reveal them again (via IntersectionObserver) - without JS, .reveal content stays visible. */ .js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in-view{ opacity:1; transform:none; } .reveal-stagger.in-view > *{ transition-delay:calc(var(--i, 0) * 90ms); } ::selection{ background:var(--accent); color:var(--on-accent); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 980px){ .split, .service-row, .contact-grid{ grid-template-columns:1fr; gap:36px; } .service-row .media img{ height:300px; } .service-row.reverse .media{ order:0; } .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } .footer-grid{ grid-template-columns:1fr 1fr; } .bento{ grid-template-columns:repeat(2,1fr); } .bento a, .bento a.wide, .bento a.narrow{ grid-column:span 1; } .value-list{ grid-template-columns:1fr; } .process{ grid-template-columns:1fr 1fr; } .process-step{ border-right:0; border-bottom:1px solid var(--line-on-surface); padding-bottom:26px; } .gallery-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 760px){ .container{ padding:0 22px; } .main-nav{ position:fixed; inset:0 0 0 auto; width:min(320px,84vw); height:100vh; background:var(--bg-elev); flex-direction:column; align-items:flex-start; padding:100px 30px 30px; gap:4px; transform:translateX(100%); transition:transform .4s var(--ease), background-color .4s ease; box-shadow:-20px 0 40px rgba(0,0,0,.3); } .main-nav.open{ transform:translateX(0); } .nav-link{ width:100%; padding:14px 4px; border-bottom:1px solid var(--line); } .nav-cta{ margin-left:0; margin-top:14px; text-align:center; width:100%; justify-content:center; } .nav-toggle{ display:flex; } .section{ padding:80px 0; } .footer-grid{ grid-template-columns:1fr; padding-bottom:40px; } .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; } .gallery-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } .hero h1{ max-width:none; } .scroll-cue{ display:none; } .process{ grid-template-columns:1fr; } .page-header{ height:auto; min-height:360px; padding-bottom:48px; } }