/* ===================================================== Starter — the parametric flagship theme ----------------------------------------------------- NO colors or fonts live in this file. Every value comes from the CSS custom properties that layouts/layout.twig renders out of config.yml > tokens/fonts. Change config, the whole site re-dresses itself — this file never needs an edit for a restyle. ===================================================== */ :root { /* Derived tones — computed from the injected tokens so a palette swap keeps every tint in step automatically. */ --primary-soft: color-mix(in srgb, var(--primary) 10%, var(--bg)); --tint: color-mix(in srgb, var(--primary) 5%, var(--bg)); --body-text: color-mix(in srgb, var(--ink) 80%, var(--bg)); --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--bg)); --danger: #b3423f; --danger-soft: #f7e8e7; --container: 1140px; } * { box-sizing: border-box; } /* Type scale the multiplier belongs on the ROOT, not on body. Headings and most text are sized in rem — and rem resolves against — so a body-level scale moved almost nothing (found live: "Text size" looked broken). 16px is the browser default this theme was drawn against. */ html { scroll-behavior: smooth; font-size: calc(16px * var(--font-scale, 1)); } body { margin: 0; background: var(--bg); color: var(--body-text); font-family: var(--font-body); font-size: 1.03rem; /* 16.5px at scale 1 — now inherits the root scale */ line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--ink); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; } h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); } h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); } h3 { font-size: 1.35rem; } p { margin: 0 0 1em; } a { color: inherit; text-decoration: none; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .container--narrow { max-width: 860px; } .lead { font-size: 1.16rem; color: var(--body-text); max-width: 620px; } .kicker, .eyebrow { display: block; text-transform: uppercase; letter-spacing: .22em; font-size: .76rem; font-weight: 600; color: var(--primary); margin-bottom: 1rem; } /* ---------- Buttons & links ---------- */ .btn { display: inline-block; padding: .95rem 2.1rem; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-weight: 600; font-size: .95rem; border: 1.5px solid var(--primary); cursor: pointer; font-family: var(--font-body); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px var(--primary); } .btn-ghost { background: transparent; color: var(--primary); } .btn-ghost:hover { background: var(--primary-soft); box-shadow: none; } .btn-light, .btn-inverse { background: var(--bg); border-color: var(--bg); color: var(--ink); } .btn-small { padding: .55rem 1.3rem; font-size: .85rem; } .link-arrow { font-weight: 600; color: var(--primary); white-space: nowrap; } .link-arrow::after { content: ' →'; transition: margin .2s ease; } .link-arrow:hover::after { margin-left: 4px; } .link-back { display: inline-block; color: var(--muted); font-size: .9rem; margin-bottom: 2rem; } .link-back:hover { color: var(--primary); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 78px; gap: 1.5rem; } .logo { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; } .logo-dot { width: .62em; height: .62em; border-radius: 50%; background: var(--primary); display: inline-block; } .logo-mark { display: inline-flex; color: var(--ink); } .logo-mark svg { width: 34px; height: 34px; display: block; } .site-nav { display: flex; align-items: center; gap: 1.8rem; } .nav-link { font-size: .93rem; font-weight: 500; color: var(--body-text); padding: .3rem 0; border-bottom: 2px solid transparent; transition: color .2s ease; } .nav-link:hover { color: var(--primary); } .nav-link.is-active { color: var(--primary); border-bottom-color: var(--primary); } .lang-switch { display: flex; gap: .6rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em; } .lang-switch a { color: var(--muted); } .lang-switch a.is-active, .lang-switch a:hover { color: var(--primary); } .nav-checkbox { display: none; } .nav-toggle { display: none; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(4rem, 9vw, 7rem); border-bottom: 1px solid var(--line); } .hero--split .hero-inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; } .hero--centered .hero-inner { text-align: center; } .hero--centered .hero-title, .hero--centered .lead { margin-left: auto; margin-right: auto; } .hero--centered .hero-actions { justify-content: center; } .hero--centered .hero-stats { justify-content: center; } .hero-visual { color: var(--primary); pointer-events: none; } .hero-visual svg { width: 100%; max-width: 460px; height: auto; margin-left: auto; } .hero-title { max-width: 780px; margin-bottom: 1.2rem; } .hero .lead { margin-bottom: 2.4rem; } .hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; } .hero-stats { display: flex; gap: 2.6rem; margin: 2.6rem 0 0; padding-top: 1.8rem; border-top: 1px solid var(--line); } .hero-stats > div { display: flex; flex-direction: column; } .hero-stats dd { margin: 0; font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--ink); } .hero-stats dt { font-size: .82rem; color: var(--muted); } /* ---------- Sections ---------- */ .section { padding: clamp(3.8rem, 8vw, 6.5rem) 0; } .section--alt, .section-tinted { background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.6rem; } .section-head h2 { margin-bottom: 0; } .page-head { padding: clamp(3.6rem, 7vw, 5.5rem) 0 0; } .page-head h1 { max-width: 720px; } .page-head .lead { margin-bottom: 0; } /* ---------- Feature cards (sections/features) ---------- */ .features-grid { display: grid; gap: 1.4rem; } .features-grid--2 { grid-template-columns: repeat(2, 1fr); } .features-grid--3 { grid-template-columns: repeat(3, 1fr); } .features-grid--4 { grid-template-columns: repeat(4, 1fr); } .feature-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; } .feature-index { font-family: var(--font-display); font-size: 1rem; color: var(--accent); display: block; margin-bottom: 1rem; } .feature-card h3 { font-size: 1.15rem; margin-bottom: .4rem; } .feature-card p { font-size: .95rem; margin: 0; } /* ---------- Service cards ---------- */ .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 18px 34px -24px color-mix(in srgb, var(--ink) 35%, transparent); } .card-index { font-family: var(--font-display); font-size: 1rem; color: var(--muted); margin-bottom: 1.1rem; } .card h3 { margin-bottom: .5rem; } .card p { font-size: .95rem; flex: 1; } .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; } .price-chip { background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 75%, var(--ink)); font-weight: 600; font-size: .85rem; padding: .3rem .8rem; border-radius: 999px; white-space: nowrap; } /* Duration sits next to the price and reads as secondary to it — a booking detail, not the offer. */ .meta-chip { color: var(--muted); font-size: .85rem; white-space: nowrap; } .card-media { display: none; } .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- Pricing list (sections/pricing) ---------- */ .rate-list { list-style: none; margin: 0; padding: 0; } .rate-row { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding: 1.3rem 0; border-bottom: 1px dashed var(--line); } .rate-row:last-child { border-bottom: none; } .rate-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); } .rate-name:hover { color: var(--primary); } .rate-desc { font-size: .9rem; color: var(--muted); margin: .2rem 0 0; max-width: 46ch; } .rate-price { font-weight: 600; color: var(--ink); white-space: nowrap; } /* ---------- About strip / values / steps ---------- */ .about-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; } .about-strip h2 { margin-bottom: 0; } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } .value-num { font-family: var(--font-display); font-size: 2.6rem; color: var(--primary); display: block; margin-bottom: .6rem; } .steps { margin: 0; padding: 0 0 0 1.2rem; display: grid; gap: .9rem; } .steps li::marker { color: var(--primary); font-weight: 700; } /* ---------- Posts ---------- */ .posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .post-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .post-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 18px 34px -24px color-mix(in srgb, var(--ink) 35%, transparent); } .post-card img, .post-ph { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .post-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-soft), var(--tint)); color: var(--primary); font-family: var(--font-display); font-size: 3.4rem; font-weight: 600; } .post-body { padding: 1.3rem 1.5rem 1.6rem; display: block; } .post-date { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: .5rem; } .post-body h3 { font-size: 1.15rem; margin-bottom: .4rem; } .post-body p { font-size: .92rem; margin: 0; color: var(--body-text); } /* ---------- Category chips ---------- */ .chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; } .chip { padding: .4rem 1rem; border-radius: 999px; border: 1px solid var(--line); font-size: .85rem; font-weight: 500; color: var(--body-text); transition: all .2s ease; } .chip:hover { border-color: var(--primary); color: var(--primary); } .chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); } /* ---------- Article ---------- */ .article { padding: clamp(3rem, 6vw, 5rem) 0; } .article-narrow { max-width: 760px; } .article-photo { border-radius: var(--radius); margin: 2rem 0; } .prose { color: var(--body-text); } .prose h2 { font-size: 1.6rem; margin-top: 2.2rem; } .prose h3 { margin-top: 1.8rem; } .prose ul, .prose ol { padding-left: 1.3rem; } .prose li { margin-bottom: .4rem; } .prose li::marker { color: var(--primary); } .prose img { border-radius: var(--radius); margin: 1.5rem 0; } .prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .prose blockquote { margin: 1.8rem 0; padding: .3rem 0 .3rem 1.4rem; border-left: 3px solid var(--primary); font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); } /* ---------- Buy box ---------- */ .buy-box { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.5rem; padding: 1.6rem 1.8rem; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); } .buy-label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); } .buy-price { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: var(--ink); } .buy-form { display: flex; align-items: center; gap: .8rem; } .buy-qty { width: 74px; height: 48px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius-small); font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--ink); background: var(--surface); } .buy-qty:focus { outline: none; border-color: var(--primary); } .cta-inline { margin-top: 2.5rem; padding: 1.6rem 1.8rem; background: var(--primary-soft); border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.2rem; } .cta-inline p { margin: 0; color: var(--ink); font-weight: 500; } /* ---------- Booking box (pages/service) ---------- */ .book-box { margin-top: 2.5rem; padding: 1.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .book-box h2 { font-size: 1.5rem; } .book-hint { font-size: .92rem; color: var(--muted); } .book-date-form { margin: 1.2rem 0; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; } .book-label { font-size: .85rem; font-weight: 600; color: var(--ink); } .book-date-form input[type='date'] { padding: .7rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: .95rem; } .book-date-form input[type='date']:focus { outline: none; border-color: var(--primary); } .slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: .55rem; margin-bottom: 1.4rem; } .slot input { position: absolute; opacity: 0; pointer-events: none; } .slot span { display: block; text-align: center; padding: .6rem 0; border: 1.5px solid var(--line); border-radius: var(--radius-small); font-size: .92rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: all .15s ease; } .slot:hover span { border-color: var(--primary); } .slot input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); } .slot input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; } .book-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem; margin-bottom: .9rem; } .book-fields input, .book-notes { width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: .95rem; } .book-fields input:focus, .book-notes:focus { outline: none; border-color: var(--primary); } .book-notes { display: block; margin-bottom: 1.2rem; resize: vertical; } .book-empty { padding: 1.2rem; background: var(--tint); border-radius: var(--radius-small); color: var(--muted); text-align: center; } /* ---------- Testimonials (sections/testimonials) ---------- */ .quotes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } .quote-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; } .quote-card blockquote { margin: 0 0 1.2rem; font-family: var(--font-display); font-size: 1.12rem; color: var(--ink); line-height: 1.5; } .quote-card blockquote::before { content: '\201C'; color: var(--accent); margin-right: .15em; } .quote-card figcaption { display: flex; align-items: center; gap: .7rem; font-size: .9rem; font-weight: 600; color: var(--muted); } .quote-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; } /* ---------- FAQ (sections/faq) ---------- */ .faq-list { display: grid; gap: .6rem; } .faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-small); padding: 0 1.3rem; } .faq-item summary { cursor: pointer; list-style: none; padding: 1.05rem 0; font-weight: 600; color: var(--ink); position: relative; padding-right: 2rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 1.3rem; color: var(--primary); transition: transform .2s ease; } .faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq-item p { margin: 0; padding: 0 0 1.2rem; color: var(--body-text); font-size: .96rem; } /* ---------- Team (sections/team) ---------- */ .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; } .team-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem 1.5rem; text-align: center; } .team-avatar { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 1rem; background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft)); color: var(--primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; } .team-card h3 { font-size: 1.08rem; margin-bottom: .2rem; } .team-card p { margin: 0; font-size: .88rem; color: var(--muted); } /* ---------- Gallery (sections/gallery) ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; } .gallery-item { margin: 0; border-radius: var(--radius-small); overflow: hidden; aspect-ratio: 1; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .gallery-item:hover img { transform: scale(1.04); } /* ---------- CTA section (sections/cta) ---------- */ .cta--band { background: var(--primary); color: var(--primary-ink); padding: clamp(3.5rem, 7vw, 5.5rem) 0; } .cta--band .cta-inner h2 { color: var(--primary-ink); } .cta--band .cta-inner p { color: color-mix(in srgb, var(--primary-ink) 82%, transparent); margin-bottom: 2rem; } .cta--plain { padding: clamp(3rem, 6vw, 5rem) 0; } .cta--plain .cta-inner p { color: var(--body-text); margin-bottom: 2rem; } .cta-inner { text-align: center; max-width: 640px; margin: 0 auto; } /* legacy alias (about page band) */ .cta-band { background: var(--primary); color: var(--primary-ink); padding: clamp(3.5rem, 7vw, 5.5rem) 0; } .cta-band .cta-inner h2 { color: var(--primary-ink); } .cta-band .cta-inner p { color: color-mix(in srgb, var(--primary-ink) 82%, transparent); margin-bottom: 2rem; } /* ---------- Contact cards (sections/contacts) ---------- */ .contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.8rem; display: flex; flex-direction: column; gap: .3rem; } .contact-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); } .contact-value { font-weight: 600; color: var(--ink); } a.contact-value:hover { color: var(--primary); } /* ---------- Contact page ---------- */ .contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3.5rem; align-items: start; } .info-item { padding: 1.1rem 0; border-bottom: 1px solid var(--line); } .info-item a:hover { color: var(--primary); } .info-label { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: .25rem; } .contact-form-wrap label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; } .contact-form-wrap input, .contact-form-wrap textarea { width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: .97rem; margin-bottom: .35rem; } .contact-form-wrap input:focus, .contact-form-wrap textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .contact-form-wrap textarea { resize: vertical; min-height: 130px; } .contact-form-wrap .btn { margin-top: .8rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .field-error { min-height: 1.1rem; font-size: .82rem; color: var(--danger); margin-bottom: .6rem; } .form-success, .form-error { padding: 1rem 1.2rem; border-radius: var(--radius-small); font-weight: 500; margin-bottom: 1.4rem; } .form-success { background: var(--primary-soft); color: var(--primary); } .form-error { background: var(--danger-soft); color: var(--danger); } /* ---------- Auth pages (account/login, account/register) ---------- */ .auth-inner { max-width: 460px; margin: 0 auto; } .auth-form label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; } .auth-form input[type='email'], .auth-form input[type='password'], .auth-form input[type='text'] { width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: .97rem; margin-bottom: .35rem; } .auth-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .auth-remember { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin: .6rem 0 1.2rem; cursor: pointer; } .auth-remember input { accent-color: var(--primary); } .auth-form .btn { width: 100%; } .auth-switch { margin-top: 1.6rem; text-align: center; font-size: .92rem; color: var(--muted); } .auth-switch a { color: var(--primary); font-weight: 600; } /* ---------- Account page ---------- */ .account-grid { display: grid; gap: 2.2rem; max-width: 760px; } .account-block h2 { font-size: 1.4rem; margin-bottom: 1rem; } .account-list { list-style: none; margin: 0; padding: 0; } .account-row { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); margin-bottom: .6rem; } .account-row-title { display: block; font-weight: 600; color: var(--ink); } .account-row-sub { display: block; font-size: .85rem; color: var(--muted); } .account-row-side { display: flex; align-items: center; gap: .9rem; flex-shrink: 0; } .account-row-price { font-weight: 600; color: var(--ink); } .account-cancel { font-size: .85rem; color: var(--danger); } .account-cancel:hover { text-decoration: underline; } .status { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: .3rem .7rem; border-radius: 999px; background: var(--tint); color: var(--muted); } .status--confirmed, .status--paid { background: var(--primary-soft); color: var(--primary); } .status--new { background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 75%, var(--ink)); } .status--cancelled { background: var(--danger-soft); color: var(--danger); } .account-actions { padding-top: .5rem; } /* ---------- Thanks ---------- */ .thanks-inner { text-align: center; max-width: 560px; padding-top: 2rem; margin: 0 auto; } .thanks-mark { width: 64px; height: 64px; margin: 0 auto 1.6rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; } .thanks-mark svg { width: 30px; height: 30px; } .thanks-inner .lead { margin: 0 auto 2.2rem; } /* ---------- Empty state ---------- */ .empty-state { text-align: center; padding: 3.5rem 1.5rem; border: 1.5px dashed var(--line); border-radius: var(--radius); color: var(--muted); } /* ---------- Pagination (partials/pagination.twig) ---------- */ .pagination { display: flex; justify-content: center; align-items: center; gap: .45rem; margin-top: 3.2rem; } .page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .7rem; border-radius: var(--radius-small); border: 1.5px solid var(--line); background: var(--surface); font-size: .92rem; font-weight: 600; color: var(--body-text); transition: all .2s ease; } a.page-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); box-shadow: 0 8px 18px -12px var(--primary); } .page-btn.is-current { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); } .page-btn.is-gap { border-color: transparent; color: var(--muted); } .page-arrow { font-size: 1.05rem; } .page-arrow.is-disabled { opacity: .35; } /* ---------- Footer ---------- */ .site-footer { background: var(--tint); border-top: 1px solid var(--line); padding: 3.5rem 0 0; margin-top: 0; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; } .footer-about { font-size: .92rem; color: var(--muted); margin-top: 1rem; max-width: 320px; } .footer-title { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: 1rem; } .footer-nav, .footer-contacts { display: flex; flex-direction: column; gap: .55rem; font-size: .95rem; } .footer-nav a:hover, .footer-contacts a:hover { color: var(--primary); } .footer-bottom { border-top: 1px solid var(--line); padding-top: 1.4rem; padding-bottom: 1.6rem; font-size: .85rem; color: var(--muted); } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .cards-grid, .posts-grid, .values-grid, .contact-cards, .team-grid, .gallery-grid, .features-grid--3, .features-grid--4 { grid-template-columns: repeat(2, 1fr); } .quotes-grid { grid-template-columns: 1fr; } .about-strip, .contact-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-grid { grid-template-columns: 1fr 1fr; } .hero--split .hero-inner { grid-template-columns: 1fr; } .hero-visual { display: none; } .book-fields { grid-template-columns: 1fr; } } @media (max-width: 640px) { .cards-grid, .posts-grid, .values-grid, .contact-cards, .form-row, .footer-grid, .team-grid, .features-grid--2, .features-grid--3, .features-grid--4 { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .section-head { flex-direction: column; align-items: start; gap: .8rem; } .hero-stats { flex-wrap: wrap; gap: 1.4rem 2.2rem; } .account-row { flex-direction: column; align-items: flex-start; gap: .6rem; } .account-row-side { width: 100%; justify-content: space-between; } .rate-row { flex-direction: column; gap: .3rem; } /* Mobile nav: checkbox-driven, no JS */ .nav-toggle { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px 2px; } .nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; } .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 1.1rem; background: var(--bg); border-bottom: 1px solid var(--line); padding: 1.4rem 24px 1.8rem; } .nav-checkbox:checked ~ .site-nav { display: flex; } .nav-checkbox:checked ~ .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-checkbox:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; } .nav-checkbox:checked ~ .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ---------- Layout knobs ---------- Body classes rendered from config.yml `layout:` — see layouts/layout.twig. Every rule keys on tokens, so palettes keep working under any frame. */ /* width: wide — the container token cascades from body */ body.width-wide { --container: 1320px; } /* header: solid — opaque, in-flow (no sticky, no blur) */ body.header-solid .site-header { position: static; background: var(--bg); backdrop-filter: none; } /* header: transparent — floats over the hero, no ground of its own */ body.header-transparent .site-header { position: absolute; left: 0; right: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; } body.header-transparent main { padding-top: 0; } /* footer: minimal — just the legal line, no link grid */ body.footer-minimal .footer-grid { display: none; } body.footer-minimal .site-footer { padding-top: 0; } /* nav: left — desktop sidebar; below 960px the burger takes over as usual */ @media (min-width: 960px) { body.nav-left { display: grid; grid-template-columns: 264px minmax(0, 1fr); } body.nav-left .site-header { grid-row: 1 / span 2; position: sticky; top: 0; height: 100vh; border-bottom: 0; border-right: 1px solid var(--line); background: var(--bg); backdrop-filter: none; } body.nav-left .header-inner { flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 0; height: 100%; padding-top: 30px; padding-bottom: 30px; gap: 2.2rem; } body.nav-left .site-nav { flex-direction: column; align-items: flex-start; gap: .4rem; width: 100%; } body.nav-left .site-nav .btn.btn-small { margin-top: .6rem; } body.nav-left .lang-switch { margin-top: auto; } body.nav-left main, body.nav-left .site-footer { grid-column: 2; min-width: 0; } } /* ---------- Section variants ---------- Deliberately near the END of the file, right before their media queries. Variant classes carry the same specificity as the base `.cards-grid` / `.quotes-grid` they override, so at equal weight the later rule wins — defined up beside the base grids, the spotlight column count silently lost and rendered two columns instead of three. Keep the whole variant layer down here. */ /* ---------- Services variants ---------- One markup shape, three layouts. Everything below re-arranges the SAME elements the cards variant uses — no variant owns markup or copy of its own, which is what keeps the translation-key scan whole. */ /* list — one row per service, price and link pushed to the right edge. Reads as a price list, which is what a salon or a workshop actually wants. */ .cards-grid--list { grid-template-columns: 1fr; gap: 0; } .cards-grid--list .card { flex-direction: row; align-items: center; gap: 1.5rem; border-radius: 0; border-width: 0 0 1px; padding: 1.4rem .4rem; } .cards-grid--list .card:first-child { border-top: 1px solid var(--line); } .cards-grid--list .card:hover { transform: none; border-color: var(--line); box-shadow: none; background: var(--surface); } .cards-grid--list .card-body { flex: 1; min-width: 0; } .cards-grid--list .card-index { margin-bottom: 0; margin-right: .2rem; display: inline-block; } .cards-grid--list .card h3 { display: inline; margin: 0; } .cards-grid--list .card p { margin: .35rem 0 0; color: var(--muted); font-size: .9rem; } .cards-grid--list .card-foot { margin-top: 0; flex: 0 0 auto; } /* alternating — image beside text, sides swapping row to row. Grid, not flex-direction: row-reverse. Reversing the row flips ALL three children, so on even rows the price and the "Details" link detached from their own text and floated to the far left of the card — the layout read as two unrelated columns. Explicit placement moves only the image, which is the one thing that is supposed to alternate. */ .cards-grid--alternating { grid-template-columns: 1fr; gap: 1.2rem; } .cards-grid--alternating .card { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: .5rem 2rem; padding: 1.4rem; } .cards-grid--alternating .card-media { display: block; grid-row: 1 / 3; grid-column: 1; aspect-ratio: 3 / 2; max-height: 14rem; border-radius: var(--radius); overflow: hidden; } .cards-grid--alternating .card-body { grid-row: 1; grid-column: 2; align-self: end; min-width: 0; } .cards-grid--alternating .card-body p { margin-bottom: 0; } .cards-grid--alternating .card-foot { grid-row: 2; grid-column: 2; align-self: start; justify-content: flex-start; margin-top: .4rem; } /* Swap the TRACKS as well as the placement: moving the image to column 2 without this leaves it floating in the wide text track with dead space beside it, and squeezes the copy into the narrow one. */ .cards-grid--alternating .card:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 34%); } .cards-grid--alternating .card:nth-child(even) .card-media { grid-column: 2; } .cards-grid--alternating .card:nth-child(even) .card-body, .cards-grid--alternating .card:nth-child(even) .card-foot { grid-column: 1; } /* A record without a photo gets the full width instead of an empty column — a half-illustrated area is the normal state, not an edge case. */ .cards-grid--alternating .card:not(:has(.card-media)) { grid-template-columns: minmax(0, 1fr); } .cards-grid--alternating .card:not(:has(.card-media)) .card-body, .cards-grid--alternating .card:not(:has(.card-media)) .card-foot { grid-column: 1; } /* ---------- Testimonials variants ---------- */ /* spotlight — the first quote carries the section, the rest support it. */ .quotes-grid--spotlight { grid-template-columns: repeat(3, 1fr); } .quotes-grid--spotlight .quote-card:first-child { grid-column: 1 / -1; padding: 2.4rem; text-align: center; } .quotes-grid--spotlight .quote-card:first-child blockquote { font-size: 1.6rem; line-height: 1.4; max-width: 46ch; margin-inline: auto; } .quotes-grid--spotlight .quote-card:first-child figcaption { justify-content: center; } /* strip — one horizontal row, scroll-snapped. Deliberately NOT an auto-playing marquee: text that slides away mid-sentence is unreadable, and an animation nobody can pause is an accessibility problem. */ .quotes-grid--strip { display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; scrollbar-width: thin; } .quotes-grid--strip .quote-card { flex: 0 0 min(23rem, 78vw); scroll-snap-align: start; } /* ---------- Features variants ---------- */ /* numbered — the figure carries the eye, the card chrome gets out of the way. */ .features-grid--numbered .feature-card { background: none; border: 0; padding: 0 1.4rem 0 0; } .features-grid--numbered .feature-index { font-size: 2.4rem; line-height: 1; color: color-mix(in srgb, var(--primary) 35%, var(--bg)); margin-bottom: .6rem; } /* checkerboard — alternating tint instead of borders; reads denser and less "three boxes in a row". */ .features-grid--checkerboard { gap: 0; } .features-grid--checkerboard .feature-card { border: 0; border-radius: 0; background: var(--bg); padding: 1.9rem; } .features-grid--checkerboard .feature-card:nth-child(odd) { background: var(--tint); } /* ---------- Team variants ---------- */ /* list — avatar left, name and role beside it. Suits a long roster where the grid of faces turns into wallpaper. */ .team-grid--list { grid-template-columns: 1fr; gap: 0; } .team-grid--list .team-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: .1rem 1.2rem; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 1.1rem .2rem; } .team-grid--list .team-avatar { grid-row: 1 / 3; margin: 0; width: 56px; height: 56px; } .team-grid--list .team-card h3 { grid-column: 2; margin: 0; } .team-grid--list .team-card p { grid-column: 2; margin: 0; color: var(--muted); font-size: .92rem; } /* strip — one scrolling row of faces; scroll-snap, no autoplay. */ .team-grid--strip { display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; } .team-grid--strip .team-card { flex: 0 0 min(15rem, 60vw); scroll-snap-align: start; } /* ---------- FAQ variants ---------- */ /* columns — everything expanded in two columns. The template also renders the `open` attribute for this variant: a closed
cannot be forced open from CSS, and faking it with height tricks breaks the built-in semantics screen readers rely on. */ .faq-list--columns { columns: 2; column-gap: 2.4rem; } .faq-list--columns .faq-item { break-inside: avoid; border-bottom: 0; margin-bottom: 1.4rem; } .faq-list--columns .faq-item summary { cursor: default; list-style: none; pointer-events: none; } .faq-list--columns .faq-item summary::-webkit-details-marker { display: none; } .faq-list--columns .faq-item summary::after { content: none; } /* ---------- Gallery variants ---------- */ /* masonry — natural heights instead of a uniform crop; portrait shots stop losing their tops and bottoms. */ .gallery-grid--masonry { display: block; columns: 4; column-gap: 1rem; } .gallery-grid--masonry .gallery-item { break-inside: avoid; margin: 0 0 1rem; } .gallery-grid--masonry .gallery-item img { height: auto; aspect-ratio: auto; } /* strip — one scrolling row. */ .gallery-grid--strip { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; } .gallery-grid--strip .gallery-item { flex: 0 0 min(20rem, 70vw); scroll-snap-align: start; } /* ---------- Pricing variants ---------- */ /* cards — a tile per rate, for short menus where rows look thin. */ .rate-list--cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } .rate-list--cards .rate-row { flex-direction: column; align-items: flex-start; gap: .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; } .rate-list--cards .rate-price { font-size: 1.5rem; color: var(--primary); } /* ---------- Hero: minimal ---------- Typography only. No visual, no stats row — for a business whose first screen should say one thing. */ .hero--minimal { padding: clamp(3.5rem, 7vw, 5.5rem) 0; } .hero--minimal .hero-inner { text-align: center; } .hero--minimal .hero-visual { display: none; } .hero--minimal .hero-stats { display: none; } .hero--minimal .hero-title, .hero--minimal .lead { margin-left: auto; margin-right: auto; } .hero--minimal .hero-actions { justify-content: center; } .hero--minimal .eyebrow { letter-spacing: .3em; } /* ---------- Density ---------- A body-level knob, like the other layout knobs. Section rhythm and card padding change together — the same blocks in a tighter or airier grid read as a different site, which is the cheapest variety there is. */ body.density-compact .section { padding: clamp(2.4rem, 5vw, 4rem) 0; } body.density-compact .section-head { margin-bottom: 1.7rem; } body.density-compact .card, body.density-compact .feature-card, body.density-compact .quote-card, body.density-compact .team-card { padding: 1.2rem; } body.density-compact .cards-grid, body.density-compact .features-grid, body.density-compact .quotes-grid, body.density-compact .team-grid { gap: .9rem; } body.density-airy .section { padding: clamp(5rem, 11vw, 9rem) 0; } body.density-airy .section-head { margin-bottom: 3.6rem; } body.density-airy .card, body.density-airy .feature-card, body.density-airy .quote-card, body.density-airy .team-card { padding: 2.4rem; } body.density-airy .cards-grid, body.density-airy .features-grid, body.density-airy .quotes-grid, body.density-airy .team-grid { gap: 2rem; } /* ---------- Section-variant responsiveness ---------- Deliberately LAST in the file. The shared breakpoints above reset `.cards-grid` / `.quotes-grid` to 2 and 1 columns, and they carry the same specificity as the variant classes — so at equal weight the later rule wins, and anything placed next to the variant definitions further up would quietly lose on tablet. Keep these here. */ @media (max-width: 960px) { /* Both variants are single-column by design; the shared reset would put them back into a two-column grid. */ .cards-grid--list, .cards-grid--alternating { grid-template-columns: 1fr; } .quotes-grid--spotlight { grid-template-columns: repeat(2, 1fr); } .gallery-grid--masonry { columns: 3; } .quotes-grid--strip { display: flex; } } @media (max-width: 640px) { .cards-grid--list, .cards-grid--alternating { grid-template-columns: 1fr; } /* Image over text: side-by-side at phone width leaves neither enough room, and the alternating rhythm is invisible in one column anyway. */ .cards-grid--alternating .card, .cards-grid--alternating .card:not(:has(.card-media)) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; gap: .9rem; } .cards-grid--alternating .card-media, .cards-grid--alternating .card:nth-child(even) .card-media { grid-row: 1; grid-column: 1; max-height: 11rem; } .cards-grid--alternating .card-body, .cards-grid--alternating .card:nth-child(even) .card-body { grid-row: 2; grid-column: 1; } .cards-grid--alternating .card-foot, .cards-grid--alternating .card:nth-child(even) .card-foot { grid-row: 3; grid-column: 1; } /* The list row keeps its shape but lets the price wrap under the title rather than squeezing the name into two characters. */ .cards-grid--list .card { flex-wrap: wrap; gap: .8rem; } .cards-grid--list .card-foot { width: 100%; justify-content: flex-start; } .quotes-grid--spotlight { grid-template-columns: 1fr; } /* The multi-column variants collapse to one column on a phone; `columns` and CSS `columns:` both need saying, they are different properties. */ .faq-list--columns { columns: 1; } .gallery-grid--masonry { columns: 2; } .rate-list--cards { grid-template-columns: 1fr; } .features-grid--numbered .feature-card { padding-right: 0; } .quotes-grid--spotlight .quote-card:first-child { padding: 1.6rem; } .quotes-grid--spotlight .quote-card:first-child blockquote { font-size: 1.25rem; } }