/* Want a downloaded display font instead of the system one? Uncomment the line below and add the family to the front of --font-display. @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap'); */ /* Dark & premium. Colors come from admin settings and are injected as CSS variables in the page , so changing the accent restyles everything. */ *, *::before, *::after { box-sizing: border-box; } :root { /* Modern grotesque stack. Windows gets Segoe UI Variable, Macs get SF Pro, and Inter is picked up automatically if it is installed or self-hosted. Nothing is downloaded, so the site still loads instantly. Want a distinctive display face? Uncomment the @import at the top of this file and add its name to the front of --font-display. */ --font-display: "Segoe UI Variable Display", "SF Pro Display", Inter, "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Segoe UI Variable Text", "SF Pro Text", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --max: 1140px; --radius: 14px; --radius-sm: 9px; --line: color-mix(in srgb, var(--text) 14%, transparent); --line-soft: color-mix(in srgb, var(--text) 8%, transparent); /* Secondary text sits over translucent glass, which lifts the background behind it and eats contrast. These are deliberately strong. */ --muted: color-mix(in srgb, var(--text) 82%, transparent); --muted-2: color-mix(in srgb, var(--text) 66%, transparent); --on-accent: #12100a; --ok: #4ade80; --warn: #fbbf24; --bad: #f87171; --shadow: 0 18px 50px rgba(0,0,0,.45); --ease: cubic-bezier(.2,.7,.3,1); } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, video { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 .45em; } h1 { font-size: clamp(2.7rem, 7vw, 4.8rem); } h2 { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -0.03em; } h3 { font-size: 1.28rem; font-weight: 700; letter-spacing: -0.02em; } h4 { font-weight: 700; letter-spacing: -0.015em; } p { margin: 0 0 1em; } .lede { font-size: 1.16rem; color: var(--muted); max-width: 60ch; font-weight: 460; } .muted { color: var(--muted); } .small { font-size: .89rem; } .tiny { font-size: .81rem; } .muted, .small.muted, .tiny.muted { font-weight: 450; } .center { text-align: center; } .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; } .section { padding: 84px 0; } .section-sm { padding: 48px 0; } .eyebrow { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 800; margin-bottom: 14px; } /* --- skip link + focus ------------------------------------------------ */ .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: var(--on-accent); padding: 12px 18px; border-radius: 0 0 8px 0; } .skip:focus { left: 0; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* --- header ----------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); } .nav { display: flex; align-items: center; gap: 10px; height: 72px; } .brand { font-family: var(--font-display); font-size: 1.18rem; font-weight: 800; letter-spacing: -0.03em; text-decoration: none; margin-right: auto; display: flex; align-items: center; gap: 10px; } .brand img { height: 34px; width: auto; } .nav-links { display: flex; gap: 4px; align-items: center; } .nav-links a { text-decoration: none; color: var(--muted); padding: 9px 13px; border-radius: 999px; font-size: .92rem; font-weight: 600; letter-spacing: -0.01em; transition: color .18s var(--ease), background .18s var(--ease); } .nav-links a:hover { color: var(--text); background: var(--line-soft); } .nav-links a[aria-current="page"] { color: var(--text); background: var(--line-soft); } .nav-toggle { display: none; } @media (max-width: 860px) { .nav { height: 64px; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 16px 18px; background: var(--bg); border-bottom: 1px solid var(--line); } .nav-links a { padding: 13px 14px; border-radius: var(--radius-sm); } .nav-open .nav-links { display: flex; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 1.1rem; cursor: pointer; } .nav .btn-accent { display: none; } } /* --- buttons ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 24px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); text-decoration: none; font-size: .93rem; font-weight: 700; letter-spacing: -0.012em; cursor: pointer; font-family: inherit; transition: transform .16s var(--ease), background .18s var(--ease), border-color .18s var(--ease), opacity .18s; } .btn:hover { background: var(--line-soft); transform: translateY(-1px); } .btn-accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 800; } .btn-accent:hover { background: color-mix(in srgb, var(--accent) 86%, white); } .btn-sm { padding: 8px 15px; font-size: .85rem; } .btn-block { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } .btn-danger { border-color: color-mix(in srgb, var(--bad) 55%, transparent); color: var(--bad); } .btn-danger:hover { background: color-mix(in srgb, var(--bad) 14%, transparent); } /* --- cards / surfaces ------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 26px; } .card-pad-sm { padding: 18px; } .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .split { display: grid; gap: 40px; grid-template-columns: 1.15fr .85fr; align-items: start; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } } .stack > * + * { margin-top: 14px; } .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .row-end { justify-content: flex-end; } .spacer { flex: 1; } /* --- hero ------------------------------------------------------------- */ .hero { padding: 96px 0 76px; position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; inset: -30% -10% auto auto; width: 780px; height: 780px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%); pointer-events: none; } .hero .wrap { position: relative; z-index: 1; } .hero h1 { max-width: 16ch; } .hero-cta { margin-top: 30px; } .hero-strip { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 46px; color: var(--muted-2); font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; } /* --- badges / pills --------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .02em; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; } .badge-accent { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .badge-ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); } .badge-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); } .badge-bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); } /* --- forms ------------------------------------------------------------ */ label { display: block; font-size: .84rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.005em; } .hint { font-size: .81rem; color: var(--muted-2); font-weight: 450; margin-top: 5px; } input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=url], select, textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: .95rem; color: var(--text); background: color-mix(in srgb, var(--bg) 55%, var(--surface)); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .16s var(--ease), box-shadow .16s var(--ease); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } textarea { min-height: 110px; resize: vertical; line-height: 1.55; } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 38px; } .field + .field { margin-top: 17px; } .field-row { display: grid; gap: 17px; grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .check { display: flex; gap: 11px; align-items: flex-start; font-weight: 400; font-size: .95rem; margin-bottom: 0; cursor: pointer; } .check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); flex: none; } /* --- notices ---------------------------------------------------------- */ .notice { padding: 14px 17px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); font-size: .92rem; } .notice-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); } .notice-bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 10%, transparent); } .notice-ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); } /* --- steps ------------------------------------------------------------ */ .steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 34px; flex-wrap: wrap; } .steps li { display: flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 600; color: var(--muted-2); } .steps li + li::before { content: ""; width: 22px; height: 1px; background: var(--line); } .steps .n { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--line); display: grid; place-items: center; font-size: .75rem; font-weight: 800; } .steps .on { color: var(--text); } .steps .on .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .steps .done .n { border-color: var(--accent); color: var(--accent); } /* --- calendar --------------------------------------------------------- */ .cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .cal-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; } .cal-nav { display: flex; gap: 8px; } .cal-nav a, .cal-nav span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--text); } .cal-nav span { opacity: .3; } .cal-nav a:hover { background: var(--line-soft); } table.cal { width: 100%; border-collapse: separate; border-spacing: 5px; table-layout: fixed; } table.cal th { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; padding-bottom: 4px; } table.cal td { padding: 0; } .day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 1 / .92; border-radius: 11px; border: 1px solid var(--line-soft); text-decoration: none; color: var(--text); font-size: .98rem; position: relative; transition: transform .14s var(--ease), border-color .16s var(--ease), background .16s var(--ease); } .day .dot { width: 5px; height: 5px; border-radius: 99px; background: currentColor; opacity: .9; } .day-open:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); transform: translateY(-2px); } .day-rush { border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); } .day-rush:hover { background: color-mix(in srgb, var(--warn) 14%, transparent); transform: translateY(-2px); } .day-off { color: var(--muted-2); opacity: .5; cursor: not-allowed; text-decoration: line-through; } .day-booked { color: var(--muted-2); opacity: .6; cursor: not-allowed; background: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--line-soft) 5px, var(--line-soft) 10px); } .day-sel { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 700; } .day-empty { border: none; } .legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; font-size: .8rem; color: var(--muted); } .legend i { width: 11px; height: 11px; border-radius: 4px; display: inline-block; margin-right: 7px; vertical-align: -1px; border: 1px solid var(--line); } .slots { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } /* --- summary rail ----------------------------------------------------- */ .summary { position: sticky; top: 92px; } .sum-line { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: .93rem; border-bottom: 1px dashed var(--line-soft); } .sum-line:last-of-type { border-bottom: none; } .sum-total { display: flex; justify-content: space-between; gap: 14px; padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } /* --- pricing ---------------------------------------------------------- */ .price { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .price small { font-size: .75rem; font-weight: 700; color: var(--muted-2); letter-spacing: .04em; } .includes { list-style: none; padding: 0; margin: 18px 0; } .includes li { padding-left: 25px; position: relative; margin-bottom: 9px; font-size: .93rem; color: var(--muted); } .includes li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } /* --- portfolio -------------------------------------------------------- */ .filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 26px; } .gallery { columns: 3 280px; column-gap: 18px; } .gallery figure { margin: 0 0 18px; break-inside: avoid; border-radius: var(--radius); overflow: hidden; position: relative; background: var(--surface); border: 1px solid var(--line-soft); cursor: zoom-in; display: block; width: 100%; padding: 0; text-align: left; color: inherit; font: inherit; } .gallery img { width: 100%; transition: transform .5s var(--ease), opacity .3s; } .gallery figure:hover img { transform: scale(1.045); } .gallery figcaption { padding: 14px 16px; } .gallery figcaption b { display: block; font-weight: 700; font-size: .95rem; letter-spacing: -0.015em; } .ph { aspect-ratio: 4/3; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface)); color: var(--muted-2); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; } dialog.lightbox { border: none; background: transparent; max-width: min(1000px, 94vw); padding: 0; color: var(--text); } dialog.lightbox::backdrop { background: rgba(0,0,0,.86); backdrop-filter: blur(3px); } dialog.lightbox .card { padding: 0; overflow: hidden; } dialog.lightbox .lb-body { padding: 18px 22px 22px; } dialog.lightbox .close { position: absolute; top: 10px; right: 12px; z-index: 2; } /* --- testimonials ----------------------------------------------------- */ .quote { font-size: 1.06rem; line-height: 1.55; font-weight: 500; letter-spacing: -0.012em; } .quote::before { content: "\201C"; color: var(--accent); font-size: 2.6rem; line-height: 0; vertical-align: -.35em; margin-right: 4px; } /* --- accordion -------------------------------------------------------- */ details.faq { border-bottom: 1px solid var(--line-soft); padding: 6px 0; } details.faq summary { cursor: pointer; padding: 16px 0; font-weight: 700; letter-spacing: -0.015em; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1; } details.faq[open] summary::after { content: "\2212"; } details.faq .a { color: var(--muted); padding-bottom: 16px; } /* --- tables ----------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius); } table.data { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; } table.data th { text-align: left; font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--muted-2); padding: 13px 15px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; } table.data td { padding: 13px 15px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } table.data tr:last-child td { border-bottom: none; } table.data tbody tr:hover { background: var(--line-soft); } table.data a { color: var(--accent); } .unread td:first-child { box-shadow: inset 3px 0 0 var(--accent); } /* --- floating ask button --------------------------------------------- */ .ask-fab { position: fixed; right: 20px; bottom: 20px; z-index: 70; box-shadow: var(--shadow); } dialog.modal { border: none; padding: 0; background: transparent; max-width: min(460px, 94vw); width: 100%; color: var(--text); } dialog.modal::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(3px); } /* --- footer ----------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line-soft); padding: 54px 0 34px; margin-top: 40px; color: var(--muted); font-size: .9rem; } .site-footer a { color: var(--muted); text-decoration: none; } .site-footer a:hover { color: var(--text); } .foot-grid { display: grid; gap: 30px; grid-template-columns: 1.5fr 1fr 1fr; } @media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } } .foot-grid h4 { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; } .foot-grid ul { list-style: none; padding: 0; margin: 0; } .foot-grid li { margin-bottom: 8px; } /* --- admin ------------------------------------------------------------ */ .admin-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; } .admin-side { border-right: 1px solid var(--line-soft); padding: 22px 16px; background: var(--surface); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .admin-side .brand { font-size: 1.05rem; margin-bottom: 22px; } .admin-side a.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 10px; text-decoration: none; color: var(--muted); font-size: .92rem; margin-bottom: 3px; } .admin-side a.nav-item:hover { background: var(--line-soft); color: var(--text); } .admin-side a.nav-item.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 600; } .admin-side .count { margin-left: auto; background: var(--accent); color: var(--on-accent); border-radius: 99px; font-size: .7rem; font-weight: 700; padding: 1px 7px; } .admin-main { padding: 30px 34px 70px; max-width: 1100px; } .admin-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; } .admin-h h1 { font-size: 1.95rem; margin: 0; letter-spacing: -0.035em; } .stat { padding: 20px; } .stat b { display: block; font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .stat span { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); } .admin-cal .day { aspect-ratio: 1/.8; font-size: .9rem; cursor: pointer; } .tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); margin-bottom: 22px; } .tabs a { padding: 10px 15px; text-decoration: none; color: var(--muted); font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs a.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; } @media (max-width: 860px) { .admin-shell { grid-template-columns: 1fr; } .admin-side { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--line-soft); } .admin-side nav { display: flex; flex-wrap: wrap; gap: 4px; } .admin-main { padding: 22px 18px 60px; } } @media print { .site-header, .site-footer, .ask-fab, .no-print { display: none !important; } body { background: #fff; color: #000; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* =================================================================== Images: hero background, page banners, service photos, media library =================================================================== */ /* Home page hero with a background photo behind it */ .hero-img { padding: 132px 0 108px; } .hero-img .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero-img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--bg) 2%, transparent 45%), rgba(0, 0, 0, var(--shade, .55)); } .hero-img::after { z-index: 1; } .hero-img .wrap { position: relative; z-index: 2; } .hero-img h1, .hero-img .lede { text-shadow: 0 2px 24px rgba(0,0,0,.5); } /* Banner across the top of an inner page */ .page-banner { position: relative; padding: 92px 0 64px; overflow: hidden; margin-bottom: 8px; } .page-banner .banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .page-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 2%, transparent 55%), rgba(0, 0, 0, var(--shade, .55)); } .page-banner .banner-inner { position: relative; } .page-banner h1, .page-banner .lede { text-shadow: 0 2px 24px rgba(0,0,0,.5); } /* Thin photo strip on the booking pages */ .book-banner { height: 190px; position: relative; overflow: hidden; } .book-banner img { width: 100%; height: 100%; object-fit: cover; } .book-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg), transparent 80%); } @media (max-width: 640px) { .book-banner { height: 120px; } } /* Photo on a pricing card */ .card.has-img { padding-top: 0; overflow: hidden; } .svc-img { width: calc(100% + 52px); margin: 0 -26px 4px; height: 178px; object-fit: cover; } .card-pad-sm .svc-img { width: calc(100% + 36px); margin: 0 -18px 4px; } /* Small photo when choosing a service in the booking flow */ .svc-thumb { width: 100%; max-width: 230px; height: 96px; object-fit: cover; border-radius: 9px; margin-bottom: 9px; } /* Photo beside the About text */ .about-img { width: 100%; border-radius: var(--radius); object-fit: cover; max-height: 340px; } /* --- admin: image picker --- */ .imgfield .imgpick { display: grid; grid-template-columns: 108px 1fr; gap: 14px; align-items: start; } .imgprev { width: 108px; height: 82px; border-radius: 9px; border: 1px dashed var(--line); display: grid; place-items: center; overflow: hidden; background: var(--bg); } .imgprev img { width: 100%; height: 100%; object-fit: cover; } .imgpick-controls { display: grid; gap: 8px; } .imgpick-controls input[type=file] { font-size: .78rem; } .imgpick-controls .check { font-size: .78rem; } @media (max-width: 520px) { .imgfield .imgpick { grid-template-columns: 1fr; } } /* --- admin: media library --- */ .media-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .media-thumb { aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: var(--bg); margin-bottom: 11px; } .media-thumb img { width: 100%; height: 100%; object-fit: cover; } .media-grid figcaption input[readonly] { cursor: pointer; padding: 7px 9px; font-size: .72rem; } /* =================================================================== Opening title sequence =================================================================== */ html.intro-on, html.intro-on body { overflow: hidden; } .intro { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(ellipse at center, var(--surface) 0%, var(--bg) 70%); opacity: 1; /* A long, soft dissolve. No zoom - the site is simply revealed underneath. */ transition: opacity 1.5s cubic-bezier(.33, 0, .2, 1), filter 1.5s cubic-bezier(.33, 0, .2, 1); } .intro-out { opacity: 0; filter: blur(6px); pointer-events: none; } /* The title drifts up a touch as it goes, so it feels like a lift-off rather than a light switch. */ .intro-out .intro-inner { transform: translateY(-14px); transition: transform 1.5s cubic-bezier(.33, 0, .2, 1); } .intro-out .intro-rule { opacity: 0; transition: opacity .7s ease; } .intro-out .intro-skip, .intro-out .intro-enter { opacity: 0; transition: opacity .4s ease; } .intro-inner { position: relative; text-align: center; padding: 0 24px; max-width: 100%; } .intro-title { font-family: var(--font-display); font-size: clamp(2rem, 8.5vw, 5.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; color: var(--text); white-space: nowrap; } .intro-ch { display: inline-block; opacity: 0; transform: translateY(.34em); filter: blur(9px); } .intro-sp { display: inline-block; width: .38em; } .intro-go .intro-ch { animation: intro-letter calc(.85s / var(--speed, 1)) cubic-bezier(.2, .8, .25, 1) forwards; animation-delay: calc(var(--i) * (.045s / var(--speed, 1)) + (.15s / var(--speed, 1))); } @keyframes intro-letter { to { opacity: 1; transform: translateY(0); filter: blur(0); } } .intro-tag { margin-top: 16px; font-size: clamp(.68rem, 2vw, .82rem); letter-spacing: .34em; text-transform: uppercase; color: var(--muted); opacity: 0; } .intro-go .intro-tag { animation: intro-fade calc(.9s / var(--speed, 1)) ease forwards; animation-delay: calc(.85s / var(--speed, 1)); } @keyframes intro-fade { to { opacity: 1; } } .intro-rule { height: 1px; width: 0; margin: 26px auto 0; background: linear-gradient(to right, transparent, var(--accent), transparent); } .intro-go .intro-rule { animation: intro-rule calc(1s / var(--speed, 1)) cubic-bezier(.2, .8, .25, 1) forwards; animation-delay: calc(.5s / var(--speed, 1)); } @keyframes intro-rule { to { width: min(420px, 74vw); } } /* the visual whoosh - a band of light crossing the title */ .intro-sweep { position: absolute; top: -30%; bottom: -30%; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--accent) 34%, transparent), transparent); filter: blur(26px); opacity: 0; pointer-events: none; } .intro-go .intro-sweep { animation: intro-sweep calc(1.25s / var(--speed, 1)) cubic-bezier(.35, 0, .2, 1) forwards; animation-delay: calc(.1s / var(--speed, 1)); } @keyframes intro-sweep { 0% { left: -60%; opacity: 0; } 25% { opacity: 1; } 100% { left: 115%; opacity: 0; } } .intro-skip, .intro-enter { position: absolute; font: inherit; cursor: pointer; border-radius: 999px; transition: background .2s, transform .2s, opacity .4s; } .intro-skip { bottom: 30px; right: 28px; padding: 8px 16px; font-size: .78rem; letter-spacing: .06em; background: transparent; border: 1px solid var(--line); color: var(--muted); opacity: 0; animation: intro-fade .5s ease forwards .7s; } .intro-skip:hover { background: var(--line-soft); color: var(--text); } .intro-enter { position: static; margin-top: 34px; padding: 14px 38px; font-size: .95rem; font-weight: 600; letter-spacing: .08em; background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); } .intro-enter:hover { transform: translateY(-2px); } .intro-wait .intro-inner { opacity: .55; } .intro-wait { grid-auto-flow: row; align-content: center; gap: 0; } @media (max-width: 560px) { .intro-title { white-space: normal; } .intro-skip { bottom: 20px; right: 18px; } } @media (prefers-reduced-motion: reduce) { .intro { display: none; } } /* Covers the page from the first moment, so the site never flashes into view before the intro does. Paired with a JS safety net that always removes it. */ html.intro-on::before { content: ""; position: fixed; inset: 0; z-index: 9998; background: radial-gradient(ellipse at center, var(--surface) 0%, var(--bg) 70%); } /* Hold the title a beat longer on screen before the dissolve begins. */ .intro-inner { transition: transform 1.5s cubic-bezier(.33, 0, .2, 1); } /* =================================================================== Motion Everything here is scoped to html.anim, which JavaScript adds only when animations are switched on AND the visitor has not asked for reduced motion. With JavaScript off, none of this applies and the site is simply static - content is never hidden behind a script. =================================================================== */ /* --- scroll reveal --- */ html.anim .rv { opacity: 0; transform: translateY(22px); transition: opacity .75s cubic-bezier(.22, .8, .3, 1) var(--d, 0ms), transform .75s cubic-bezier(.22, .8, .3, 1) var(--d, 0ms); will-change: opacity, transform; } html.anim .rv-in { opacity: 1; transform: none; will-change: auto; } /* --- header condenses on scroll --- */ .site-header { transition: height .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); } .site-header .nav { transition: height .3s var(--ease); } .site-header.scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(0,0,0,.8); } .site-header.scrolled .nav { height: 60px; } .site-header.scrolled .brand { font-size: 1.06rem; } .brand { transition: font-size .3s var(--ease); } /* --- nav underline --- */ .nav-links a { position: relative; } .nav-links a:not(.btn)::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 1.5px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav-links a:not(.btn):hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); } /* --- cards lift --- */ html.anim main .card:not(.summary):not(.notice) { transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); } html.anim main .card:not(.summary):not(.notice):hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 32%, transparent); box-shadow: 0 22px 44px -28px rgba(0,0,0,.85); } /* a card that is a clickable choice in the booking flow reacts a little more */ html.anim label.card:active { transform: translateY(-1px) scale(.995); } /* --- pricing photo zoom --- */ .svc-img { transition: transform .6s var(--ease); } html.anim .card.has-img { overflow: hidden; } html.anim .card.has-img:hover .svc-img { transform: scale(1.05); } /* --- buttons --- */ .btn:active { transform: translateY(0) scale(.97); } .btn-accent { position: relative; overflow: hidden; } html.anim .btn-accent::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-16deg); transition: left .55s var(--ease); } html.anim .btn-accent:hover::after { left: 130%; } /* --- calendar days --- */ .day { transition: transform .18s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); } html.anim .day-open:hover, html.anim .day-rush:hover { box-shadow: 0 10px 22px -14px rgba(0,0,0,.9); } html.anim .day-sel { animation: pop .3s var(--ease); } @keyframes pop { 0% { transform: scale(.86); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } } /* --- step indicator --- */ .steps .n { transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } html.anim .steps .on .n { animation: pop .35s var(--ease); } /* --- FAQ --- */ details.faq summary::after { transition: transform .25s var(--ease), color .2s var(--ease); } details.faq[open] summary::after { transform: rotate(180deg); } html.anim details.faq[open] .a { animation: faq-open .35s var(--ease); } @keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* --- gallery --- */ html.anim .gallery figure { transition: transform .35s var(--ease), box-shadow .35s var(--ease); } html.anim .gallery figure:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -30px rgba(0,0,0,.9); } /* --- notices arriving --- */ html.anim .notice-ok, html.anim .notice-bad { animation: slide-in .45s var(--ease); } @keyframes slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* --- admin table rows --- */ table.data tbody tr { transition: background .18s var(--ease); } /* Anyone who has asked for less motion gets none of it, belt and braces: the html.anim class is never added for them, and this backstop kills any animation that might slip through. */ @media (prefers-reduced-motion: reduce) { html.anim .rv { opacity: 1 !important; transform: none !important; } * { animation: none !important; } } /* =================================================================== Liquid glass Frosted, translucent surfaces in the iOS idiom: real backdrop blur, a bright rim along the top edge where light catches, soft depth beneath, and a specular sheen that follows the pointer. Glass only reads as glass if there is something behind it to refract, so the page gets an ambient light layer first. =================================================================== */ :root { --glass-blur: 22px; --glass-fill: color-mix(in srgb, var(--surface) 52%, transparent); --glass-fill-strong: color-mix(in srgb, var(--surface) 74%, transparent); --glass-rim: color-mix(in srgb, white 14%, transparent); --glass-rim-soft: color-mix(in srgb, white 7%, transparent); --glass-edge: color-mix(in srgb, white 9%, transparent); --glass-depth: 0 1px 0 0 var(--glass-rim) inset, 0 -1px 0 0 color-mix(in srgb, black 22%, transparent) inset, 0 18px 40px -24px rgba(0, 0, 0, .9); --ease-spring: cubic-bezier(.34, 1.56, .48, 1); --radius: 20px; --radius-sm: 14px; } /* --- ambient light behind everything --- */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(60vw 60vw at 12% -6%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 62%), radial-gradient(52vw 52vw at 92% 14%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), radial-gradient(70vw 55vw at 50% 108%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 62%); pointer-events: none; } /* a very faint grain stops the large gradients from banding */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --- the glass recipe --- */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .card, .site-header, dialog.modal .card, dialog.lightbox .card, .table-wrap, .admin-side { background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); backdrop-filter: blur(var(--glass-blur)) saturate(180%); border: 1px solid var(--glass-edge); box-shadow: var(--glass-depth); } .site-header { background: color-mix(in srgb, var(--bg) 62%, transparent); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); border: none; border-bottom: 1px solid var(--glass-edge); box-shadow: 0 1px 0 0 var(--glass-rim-soft) inset; } .site-header.scrolled { background: color-mix(in srgb, var(--bg) 80%, transparent); box-shadow: 0 1px 0 0 var(--glass-rim) inset, 0 14px 34px -26px rgba(0,0,0,.95); } .btn { background: color-mix(in srgb, var(--surface) 42%, transparent); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); border: 1px solid var(--glass-edge); box-shadow: 0 1px 0 0 var(--glass-rim) inset, 0 8px 18px -12px rgba(0,0,0,.8); } .btn:hover { background: color-mix(in srgb, var(--surface) 66%, transparent); } .btn-accent { background: color-mix(in srgb, var(--accent) 86%, transparent); border-color: color-mix(in srgb, white 26%, transparent); box-shadow: 0 1px 0 0 color-mix(in srgb, white 42%, transparent) inset, 0 10px 24px -12px color-mix(in srgb, var(--accent) 70%, transparent); } .btn-accent:hover { background: var(--accent); } .badge, .notice { -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); box-shadow: 0 1px 0 0 var(--glass-rim-soft) inset; } input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=url], select, textarea { background: color-mix(in srgb, var(--bg) 34%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 0 var(--glass-rim-soft) inset; } .day { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } dialog.modal::backdrop, dialog.lightbox::backdrop { -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); background: color-mix(in srgb, var(--bg) 58%, transparent); } } /* Blur on every row of a long table costs more than it gives. */ .table-wrap { background: var(--glass-fill-strong); } table.data th { background: color-mix(in srgb, var(--surface) 82%, transparent); } /* --- specular sheen that follows the pointer --- */ .card { position: relative; overflow: hidden; } .card > * { position: relative; z-index: 1; } html.anim .card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease); background: radial-gradient( 220px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, white 13%, transparent), transparent 62%); } html.anim .card:hover::before { opacity: 1; } /* the rim brightens on the side the pointer is on */ html.anim main .card:not(.summary):not(.notice):hover { border-color: color-mix(in srgb, white 20%, transparent); box-shadow: 0 1px 0 0 color-mix(in srgb, white 24%, transparent) inset, 0 -1px 0 0 color-mix(in srgb, black 22%, transparent) inset, 0 26px 52px -26px rgba(0,0,0,.95); } /* --- iOS press physics --- */ html.anim .btn { transition: transform .32s var(--ease-spring), background .25s var(--ease), box-shadow .25s var(--ease); } html.anim .btn:active { transform: scale(.955); transition-duration: .09s; } html.anim label.card { transition: transform .32s var(--ease-spring), border-color .3s var(--ease), box-shadow .3s var(--ease); } html.anim label.card:active { transform: scale(.985); transition-duration: .09s; } html.anim .day-open:active, html.anim .day-rush:active { transform: scale(.93); transition-duration: .09s; } html.anim .day-sel { animation: glass-pop .42s var(--ease-spring); } @keyframes glass-pop { 0% { transform: scale(.8); } 100% { transform: scale(1); } } /* --- the intro, as a pane of glass --- */ .intro-inner { position: relative; } @supports (backdrop-filter: blur(1px)) { .intro { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); } } /* --- where glass is not supported, fall back to solid --- */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .card, .table-wrap, .admin-side { background: var(--surface); } .site-header { background: var(--bg); } } /* Glass is a look, not motion - it stays for everyone. Only the moving parts go. */ @media (prefers-reduced-motion: reduce) { html.anim .card::before { display: none; } } /* =================================================================== Tabs Four different sets of tabs across the site, all given the same glass-and-spring treatment. =================================================================== */ /* --- 1. top menu --------------------------------------------------- */ .nav-links a:not(.btn) { transition: color .22s var(--ease), background .28s var(--ease), transform .32s var(--ease-spring); } html.anim .nav-links a:not(.btn):hover { transform: translateY(-1px); } .nav-links a:not(.btn)::after { left: 50%; right: 50%; bottom: 5px; transform: none; transition: left .34s var(--ease-spring), right .34s var(--ease-spring), opacity .2s var(--ease); opacity: 0; } .nav-links a:not(.btn):hover::after, .nav-links a:not(.btn)[aria-current="page"]::after { left: 13px; right: 13px; opacity: 1; } /* the current page keeps a soft glass pill behind it */ .nav-links a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 13%, transparent); box-shadow: 0 1px 0 0 var(--glass-rim-soft) inset; } /* --- 2. portfolio category filters --------------------------------- */ .filters .btn { transition: transform .34s var(--ease-spring), background .25s var(--ease), border-color .25s var(--ease), color .2s var(--ease); } html.anim .filters .btn:active { transform: scale(.94); transition-duration: .09s; } html.anim .filters .btn.btn-accent { animation: glass-pop .4s var(--ease-spring); } /* items leaving and entering the grid when a filter changes */ .gallery figure { transition: opacity .34s var(--ease), transform .34s var(--ease-spring), filter .34s var(--ease); } .gallery figure.filtering-out { opacity: 0; transform: scale(.93) translateY(6px); filter: blur(3px); } .gallery figure.filtering-in { animation: filter-in .42s var(--ease-spring) backwards; animation-delay: var(--fd, 0ms); } @keyframes filter-in { from { opacity: 0; transform: scale(.94) translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } /* --- 3. booking steps ---------------------------------------------- */ .steps li + li::before { position: relative; overflow: hidden; background: var(--line); } .steps li + li::after { content: none; } /* the connector fills in behind each completed step */ .steps li.done + li::before, .steps li.on + li::before, .steps li.done + li.done::before { background: linear-gradient(to right, var(--accent), var(--accent)); background-size: 100% 100%; } html.anim .steps li.done + li::before, html.anim .steps li.on + li::before { animation: step-fill .5s var(--ease) backwards; } @keyframes step-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .steps li + li::before { transform-origin: left; } .steps .done .n { background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: 0 1px 0 0 var(--glass-rim-soft) inset; } html.anim .steps .done .n { animation: glass-pop .4s var(--ease-spring); } .steps li { transition: color .3s var(--ease); } /* --- 4. admin filter tabs ------------------------------------------ */ .tabs a { position: relative; transition: color .22s var(--ease), background .25s var(--ease); border-radius: 10px 10px 0 0; } .tabs a:hover { background: var(--line-soft); } .tabs a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; opacity: 0; transition: left .32s var(--ease-spring), right .32s var(--ease-spring), opacity .2s var(--ease); } .tabs a:hover::after { left: 25%; right: 25%; opacity: .55; } .tabs a.on::after { left: 0; right: 0; opacity: 1; } .tabs a.on { border-bottom-color: transparent; } /* --- admin sidebar items get the same feel ------------------------- */ .admin-side a.nav-item { transition: background .22s var(--ease), color .22s var(--ease), transform .3s var(--ease-spring); } html.anim .admin-side a.nav-item:hover { transform: translateX(3px); } /* =================================================================== Phones and tablets The layout was responsive already; this is the pass that makes it feel built for a phone rather than merely fitting on one. Most bookings will happen on a phone, so the booking flow gets the most attention. =================================================================== */ /* Never let anything cause a sideways scroll. */ html, body { max-width: 100%; overflow-x: hidden; } /* Respect the notch and the home indicator on iPhones. */ .wrap { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); } .site-footer { padding-bottom: max(34px, env(safe-area-inset-bottom)); } @media (max-width: 900px) { /* Put the running total above the form, where it can be seen, and keep it in view as the page scrolls. */ .split { display: flex; flex-direction: column; } .summary { order: -1; position: sticky; top: 68px; z-index: 6; } .summary .sum-line { padding: 7px 0; } } @media (max-width: 860px) { /* The main call to action must survive into the mobile menu. */ .nav .btn-accent { display: inline-flex; margin: 8px 0 0; justify-content: center; } .nav-links { padding-bottom: max(18px, env(safe-area-inset-bottom)); } .nav-links a { min-height: 46px; display: flex; align-items: center; } .nav-links a:not(.btn)::after { display: none; } } @media (max-width: 720px) { body { font-size: 16.5px; } .section { padding: 58px 0; } .section-sm { padding: 34px 0; } .hero { padding: 62px 0 52px; } .hero-img { padding: 84px 0 70px; } h1 { font-size: clamp(2.1rem, 9vw, 3rem); } h2 { font-size: clamp(1.6rem, 6.5vw, 2.2rem); } .lede { font-size: 1.05rem; } .card { padding: 20px; } .grid { gap: 14px; } .split { gap: 26px; } .page-banner { padding: 62px 0 44px; } .hero-strip { gap: 14px; font-size: .74rem; } /* Calendar: every day must be a comfortable tap target. */ table.cal { border-spacing: 4px; } .day { aspect-ratio: 1 / 1; min-height: 44px; font-size: .95rem; border-radius: 12px; } .cal-nav a, .cal-nav span { width: 44px; height: 44px; } .legend { gap: 10px 16px; font-size: .76rem; } /* Full-width buttons read better than a row of small ones. */ .btn { padding: 14px 22px; min-height: 46px; } .row > .btn { flex: 1 1 auto; } .slots { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } /* Steps compress to dots plus the current label. */ .steps { gap: 6px; margin-bottom: 24px; } .steps li + li::before { width: 12px; } .steps li { font-size: 0; gap: 0; } .steps li.on { font-size: .82rem; gap: 8px; } .steps .n { font-size: .74rem; } /* Blur is expensive on phone GPUs - lighten it without losing the look. */ :root { --glass-blur: 14px; } .btn, .badge, .notice, .day, input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=url], select, textarea { -webkit-backdrop-filter: none; backdrop-filter: none; } .btn { background: color-mix(in srgb, var(--surface) 72%, transparent); } input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=url], select, textarea { background: color-mix(in srgb, var(--bg) 62%, var(--surface)); /* iPhones zoom the whole page in when a field's text is under 16px. Pinned here so tapping a field never yanks the layout about. */ font-size: 16px; padding: 13px 14px; } .ask-fab { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); padding: 12px 20px; } .site-footer { padding-top: 40px; } .foot-grid { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 460px) { .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } h1 { font-size: clamp(1.9rem, 9.5vw, 2.5rem); } .card { padding: 17px; border-radius: 16px; } .price { font-size: 2.1rem; } .field-row { grid-template-columns: 1fr; } table.cal th { font-size: .62rem; letter-spacing: .04em; } .day { min-height: 40px; font-size: .88rem; } .filters { gap: 7px; } .filters .btn { padding: 7px 13px; font-size: .8rem; } .intro-title { font-size: clamp(1.8rem, 11vw, 2.8rem); white-space: normal; } .book-banner { height: 100px; } } /* Touch devices: hover states never fire, and worse, they can stick after a tap. Swap them for press feedback. */ @media (hover: none) { html.anim main .card:not(.summary):not(.notice):hover { transform: none; box-shadow: var(--glass-depth); } html.anim .card::before { display: none; } html.anim .gallery figure:hover { transform: none; } html.anim .btn-accent::after { display: none; } .gallery figure:hover img { transform: none; } html.anim .card.has-img:hover .svc-img { transform: none; } html.anim main .card:not(.summary):active { transform: scale(.99); } .gallery figure:active { transform: scale(.985); } .nav-links a:not(.btn)::after { display: none; } } /* Admin on a phone. */ @media (max-width: 720px) { .admin-main { padding: 18px 15px 60px; } .admin-h h1 { font-size: 1.5rem; } .admin-side { padding: 14px 12px; } .admin-side nav { gap: 6px; } .admin-side a.nav-item { padding: 9px 12px; font-size: .86rem; min-height: 42px; } .admin-cal .day { min-height: 44px; } .media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .tabs a { white-space: nowrap; } .table-wrap { border-radius: 14px; } } /* Landscape phones: the intro should not fill a short screen with padding. */ @media (max-height: 480px) and (orientation: landscape) { .intro-title { font-size: clamp(1.6rem, 7vw, 2.6rem); } .intro-rule { margin-top: 14px; } .intro-tag { margin-top: 10px; } .hero { padding: 44px 0 36px; } } /* A button waiting on a choice: visibly quieter, but never unclickable — a dead button leaves people stuck with no explanation. Clicking it lets the browser say "please choose a service" instead. */ .btn-waiting { opacity: .6; }