/* Generated by tool/build.mjs — edit assets/site.css and content/site.yml, not this. */ :root { --cream: #FFFDE9; --cream-deep: #F7EFD3; --sage: #E5EDE4; --green: #198236; --green-deep: #11632A; --coral: #F48987; --coral-text: #B0403E; --lavender: #EBE3FF; --lavender-text: #5B42A8; --mint: #97DBCC; --mint-text: #1F6E5E; --apricot: #FFE5C3; --ink: #3E2A28; --ink-soft: #6A534F; } /* The whole stylesheet for this site. * * The colour tokens are NOT written here: build.mjs prepends a :root{} block generated from * content/site.yml, where the palette is recorded with the poster each colour was sampled * from. This file only ever refers to them by name. * * Layout is RTL-first. `dir` flips on ; everything below uses logical properties * (inline-start/end, margin-inline, padding-block) so that direction, alignment and reading * order flip while paw prints, numerals and the phone number do not. */ /* ---------------------------------------------------------------- fonts */ @font-face { font-family: Rubik; src: url("fonts/rubik-hebrew.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } @font-face { font-family: Rubik; src: url("fonts/rubik-latin.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: Rubik; src: url("fonts/rubik-latin-ext.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: Assistant; src: url("fonts/assistant-hebrew.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } @font-face { font-family: Assistant; src: url("fonts/assistant-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: Assistant; src: url("fonts/assistant-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ---------------------------------------------------------------- base */ :root { --font-display: Rubik, "Segoe UI", system-ui, "Arial Hebrew", sans-serif; --font-text: Assistant, "Segoe UI", system-ui, "Arial Hebrew", sans-serif; --gutter: clamp(1rem, 4vw, 2.5rem); --measure: 66ch; --wrap: 1180px; --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-blob: 42% 58% 54% 46% / 48% 44% 56% 52%; --shadow-1: 0 1px 2px rgb(62 42 40 / .06), 0 4px 12px rgb(62 42 40 / .06); --shadow-2: 0 2px 4px rgb(62 42 40 / .07), 0 12px 30px rgb(62 42 40 / .10); --shadow-3: 0 6px 14px rgb(62 42 40 / .10), 0 24px 56px rgb(62 42 40 / .14); --ease: cubic-bezier(.22, .68, .36, 1); } *, *::before, *::after { box-sizing: border-box; } /* The `hidden` attribute is only `display: none` in the UA stylesheet, so ANY `display` in this file beats it. Several things here are hidden by script or by the middleware and are also flex or grid — the invitation, the pending badge, the notes — so this has to win. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-text); font-size: clamp(1.0625rem, .4vw + 1rem, 1.1875rem); line-height: 1.65; overflow-x: clip; /* The paw trail rides in this padding on wide screens. */ --trail: 0px; } h1, h2, h3, .display { font-family: var(--font-display); font-weight: 800; line-height: 1.08; letter-spacing: -.015em; margin: 0; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } /* The UA stylesheet gives
`margin: 1em 40px`, which silently took 80px off the width of every photograph on the page. */ figure, figcaption { margin: 0; } ul, ol { margin: 0; padding: 0; } a { color: var(--green-deep); } img { max-width: 100%; display: block; } /* is an inline box that shrink-wraps its , so `inline-size: 100%` on the image resolves against nothing and the photograph comes out arbitrarily small. Taking the picture out of the layout makes the a direct child of the figure it is supposed to fill. */ picture { display: contents; } :where(button, input, textarea, select) { font: inherit; color: inherit; } ::selection { background: var(--mint); color: var(--ink); } :focus-visible { outline: 3px solid var(--lavender-text); outline-offset: 3px; border-radius: 4px; } .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; } .narrow { width: min(100% - 2 * var(--gutter), 74ch); margin-inline: auto; } .skip { position: absolute; inset-inline-start: var(--gutter); inset-block-start: -100px; z-index: 100; background: var(--green-deep); color: #fff; padding: .7em 1.2em; border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 700; text-decoration: none; transition: inset-block-start .18s var(--ease); } .skip:focus { inset-block-start: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------- header */ .head { position: sticky; inset-block-start: 0; z-index: 40; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(10px); border-block-end: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); transition: box-shadow .25s var(--ease); } .head[data-stuck] { box-shadow: var(--shadow-1); } .head__in { display: flex; align-items: center; gap: 1rem; min-height: 60px; } .brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; margin-inline-end: auto; } .brand__mark { inline-size: 34px; block-size: 34px; flex: none; } .brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.05; letter-spacing: -.02em; } .brand__sub { display: block; font-family: var(--font-text); font-weight: 600; font-size: .68rem; color: var(--ink-soft); letter-spacing: 0; } .nav { display: none; gap: .2rem; } @media (min-width: 62rem) { .nav { display: flex; } } .nav a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: .94rem; padding: .45em .7em; border-radius: var(--r-sm); position: relative; transition: background-color .18s var(--ease), color .18s var(--ease); } .nav a:hover { background: var(--cream-deep); } .nav a[aria-current="true"] { color: var(--green-deep); background: color-mix(in srgb, var(--green) 10%, transparent); } .langs { display: flex; align-items: center; gap: .35rem; } .lang { text-decoration: none; font-weight: 700; font-size: .85rem; padding: .4em .75em; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent); color: var(--ink); transition: border-color .18s var(--ease), background-color .18s var(--ease); } .lang:hover { border-color: var(--green); background: color-mix(in srgb, var(--green) 8%, transparent); } .head .btn--wa { display: none; } @media (min-width: 48rem) { .head .btn--wa { display: inline-flex; padding: .5em 1em; font-size: .92rem; } } /* ---------------------------------------------------------------- buttons */ .btn { --btn-bg: var(--green); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .55em; background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; text-decoration: none; border: 0; cursor: pointer; padding: .8em 1.5em; border-radius: 999px; box-shadow: var(--shadow-1); transition: transform .18s var(--ease), box-shadow .22s var(--ease), background-color .18s var(--ease); } .btn:hover { background: var(--green-deep); box-shadow: var(--shadow-2); transform: translateY(-2px); } .btn:active { transform: translateY(0); box-shadow: var(--shadow-1); } .btn[disabled] { opacity: .55; cursor: progress; transform: none; } .btn__ic { inline-size: 1.15em; block-size: 1.15em; flex: none; } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent); box-shadow: none; } .btn--ghost:hover { background: var(--cream-deep); border-color: var(--ink-soft); box-shadow: none; } .btn--lg { font-size: 1.12rem; padding: .95em 1.9em; } @media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none; transition: background-color .18s linear; } } /* ---------------------------------------------------------------- hero */ .hero { position: relative; min-block-size: min(88svh, 760px); display: grid; align-items: end; overflow: clip; isolation: isolate; background: var(--ink); } @media (min-width: 48rem) { .hero { min-block-size: min(84svh, 820px); } .hero__img { object-position: var(--focus-wide, 50% 50%); } } .hero__media { position: absolute; inset: 0; z-index: -2; overflow: clip; } /* Parallax: the photograph is 12% taller than its box and slides through its OWN overflow. Because the travel is a fraction of the image, not a count of viewport pixels, it behaves identically at 375px and 1280px. */ .hero__img { inline-size: 100%; block-size: 112%; object-fit: cover; /* Two focal points, because the hero is two different photographs (see gallery.yml). */ object-position: var(--focus-narrow, 50% 45%); transform: translate3d(0, calc(var(--p, 0) * -10.7%), 0); will-change: transform; /* Both hero photographs are indoor and a little flat; this is a print-shop correction, not a filter effect. */ filter: saturate(1.14) contrast(1.04); } /* Warm, not grey: the shade is the ink brown from poster 2, so the photograph keeps its colour instead of going flat. Strong where the words sit, almost clear across the middle. */ .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(40 24 20 / .92) 0%, rgb(44 27 22 / .78) 22%, rgb(46 29 24 / .46) 44%, rgb(50 32 26 / .14) 68%, rgb(0 0 0 / 0) 82%), linear-gradient(to bottom, rgb(40 24 20 / .42) 0%, rgb(0 0 0 / 0) 22%); } /* On a phone the words sit lower and the dog's face is higher, so the shade is pulled down off the face rather than laid evenly over the picture. */ @media (max-width: 48rem) { .hero__scrim { background: linear-gradient(to top, rgb(40 24 20 / .94) 0%, rgb(44 27 22 / .80) 16%, rgb(46 29 24 / .32) 36%, rgb(0 0 0 / 0) 60%), linear-gradient(to bottom, rgb(40 24 20 / .36) 0%, rgb(0 0 0 / 0) 16%); } } .hero__in { padding-block: 5rem 3.2rem; position: relative; } .hero__eyebrow { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; font-weight: 700; font-size: .82rem; letter-spacing: .04em; color: var(--cream); background: color-mix(in srgb, var(--green) 82%, transparent); padding: .5em 1.1em; border-radius: 999px; margin-block-end: 1.1rem; box-shadow: var(--shadow-1); } .hero__eyebrow svg { inline-size: 17px; block-size: 17px; flex: none; } .hero h1 { color: #fff; font-size: clamp(2.6rem, 9vw, 5.4rem); text-wrap: balance; text-shadow: 0 2px 30px rgb(0 0 0 / .35); margin-block-end: .5rem; } .hero__brand { display: block; font-size: clamp(1rem, 2.4vw, 1.35rem); font-weight: 700; letter-spacing: .01em; color: var(--mint); margin-block-end: .6rem; } .hero__lead { color: color-mix(in srgb, #fff 92%, var(--apricot)); font-size: clamp(1.08rem, 1.9vw, 1.4rem); max-inline-size: 42ch; text-wrap: pretty; margin-block-end: 1.8rem; } .hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem; } .hero__cta-sub { color: color-mix(in srgb, #fff 90%, transparent); font-size: .92rem; font-weight: 600; } .hero__scroll { display: none; position: absolute; inset-block-end: 1.1rem; inset-inline-end: var(--gutter); color: color-mix(in srgb, #fff 70%, transparent); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; align-items: center; gap: .4rem; } @media (min-width: 48rem) and (min-height: 40rem) { .hero__scroll { display: flex; } } .hero__scroll svg { inline-size: 16px; block-size: 16px; animation: nudge 2.4s var(--ease) infinite; } @media (prefers-reduced-motion: reduce) { .hero__scroll svg { animation: none; } } @keyframes nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(5px); } } /* ---------------------------------------------------------------- sections */ .sec { padding-block: clamp(3.2rem, 7vw, 6rem); position: relative; } .sec--cream { background: var(--cream); } .sec--sage { background: var(--sage); } .sec--deep { background: var(--cream-deep); } .sec--lav { background: linear-gradient(170deg, var(--lavender) 0%, color-mix(in srgb, var(--lavender) 45%, var(--cream)) 100%); } .sec__head { max-inline-size: 58ch; margin-block-end: clamp(1.8rem, 4vw, 3rem); } .sec__head--center { margin-inline: auto; text-align: center; } .sec h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); text-wrap: balance; margin-block-end: .5rem; } .sec__lead { color: var(--ink-soft); font-size: clamp(1.02rem, 1.3vw, 1.18rem); text-wrap: pretty; } /* A drawn divider between bands — the poster's paw prints, walking. */ .pawrule { display: flex; justify-content: center; gap: 1.4rem; padding-block: .5rem 1.6rem; } .pawrule svg { inline-size: 22px; block-size: 22px; opacity: .3; } .pawrule svg:nth-child(2) { transform: translateY(7px) rotate(12deg); } .pawrule svg:nth-child(3) { transform: translateY(-3px) rotate(-8deg); } /* ---------------------------------------------------------------- promises */ .promises { display: grid; gap: clamp(1rem, 2vw, 1.6rem); grid-template-columns: 1fr; } @media (min-width: 52rem) { .promises { grid-template-columns: repeat(3, 1fr); } } .promise { background: var(--cream); border: 1.5px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: var(--r-lg); padding: clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: .7rem; box-shadow: var(--shadow-1); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .promise:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } @media (prefers-reduced-motion: reduce) { .promise:hover { transform: none; } } .promise__blob { inline-size: 74px; block-size: 74px; display: grid; place-items: center; border-radius: var(--r-blob); flex: none; animation: blob 14s ease-in-out infinite; } /* --blob-fg knocks a shape out of the glyph in the blob's own colour (the "1" on the tag). */ .promise:nth-child(1) .promise__blob { background: var(--mint); --blob-fg: var(--mint); } .promise:nth-child(2) .promise__blob { background: var(--apricot); --blob-fg: var(--apricot); animation-delay: -4s; } .promise:nth-child(3) .promise__blob { background: var(--lavender); --blob-fg: var(--lavender); animation-delay: -8s; } .promise__blob svg { inline-size: 38px; block-size: 38px; color: var(--ink); } /* Each card carries a whisper of its own blob colour, so the band has range rather than three identical boxes. */ .promise:nth-child(1) { background: color-mix(in srgb, var(--mint) 13%, var(--cream)); } .promise:nth-child(2) { background: color-mix(in srgb, var(--apricot) 26%, var(--cream)); } .promise:nth-child(3) { background: color-mix(in srgb, var(--lavender) 34%, var(--cream)); } @keyframes blob { 0%, 100% { border-radius: 42% 58% 54% 46% / 48% 44% 56% 52%; } 50% { border-radius: 56% 44% 42% 58% / 52% 58% 42% 48%; } } @media (prefers-reduced-motion: reduce) { .promise__blob { animation: none; } } /* An

: these three claims sit directly under the page title, with no section heading between, so h3 would skip a level for a screen reader. */ .promise h2 { font-size: 1.26rem; line-height: 1.2; } .promise p { color: var(--ink-soft); margin: 0; } /* ---------------------------------------------------------------- how it works */ .steps { display: grid; gap: clamp(1.6rem, 3vw, 2.2rem); position: relative; } @media (min-width: 56rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } } .step { position: relative; display: flex; flex-direction: column; gap: .7rem; } /* The signpost from the poster. It IS the heading — there is no second copy of the title underneath it. */ .step__sign { position: relative; inline-size: fit-content; margin: 0; display: flex; align-items: center; gap: .7rem; background: var(--mint); color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 1.14rem; line-height: 1.25; padding: .55em 1.5em .55em 1em; /* The signpost arrow from the poster. Points along the reading direction. */ clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); box-shadow: var(--shadow-1); } [dir="rtl"] .step__sign { clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); padding: .55em 1em .55em 1.5em; } .step:nth-child(2) .step__sign { background: var(--apricot); } .step:nth-child(3) .step__sign { background: var(--lavender); } .step__n { display: grid; place-items: center; inline-size: 1.7em; block-size: 1.7em; border-radius: 50%; background: color-mix(in srgb, var(--ink) 88%, transparent); color: var(--cream); font-size: .78em; line-height: 1; } .step p { color: var(--ink-soft); margin: 0; } .step__post { position: absolute; inset-block-start: 3rem; inset-inline-start: 1.1rem; inline-size: 3px; block-size: calc(100% - 1.6rem); background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ink) 22%, transparent) 0 7px, transparent 7px 15px); z-index: -1; } @media (min-width: 56rem) { .step__post { display: none; } } .step:last-child .step__post { display: none; } /* ---------------------------------------------------------------- gallery */ .gallery { display: grid; gap: clamp(.6rem, 1.4vw, 1rem); grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; } @media (min-width: 52rem) { .gallery { grid-template-columns: repeat(4, 1fr); } } .shot { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--tint, var(--cream-deep)); box-shadow: var(--shadow-1); aspect-ratio: 3 / 4; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .shot--wide { grid-column: span 2; aspect-ratio: 4 / 3; } @media (max-width: 52rem) { .shot--wide { aspect-ratio: 3 / 2; } } .shot img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform .5s var(--ease); } .shot:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); z-index: 2; } .shot:hover img { transform: scale(1.045); } @media (prefers-reduced-motion: reduce) { .shot:hover, .shot:hover img { transform: none; } } .shot__cap { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 2.6rem .9rem .8rem; background: linear-gradient(to top, rgb(30 20 18 / .86), rgb(30 20 18 / .55) 45%, transparent); color: #fff; font-size: .88rem; font-weight: 600; line-height: 1.4; text-wrap: pretty; } @media (max-width: 34rem) { .shot__cap { font-size: .8rem; padding: 2rem .7rem .65rem; } } .house__note { margin-block-start: clamp(1.4rem, 3vw, 2.2rem); display: flex; gap: .9rem; align-items: flex-start; background: var(--cream); border: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent); border-inline-start: 5px solid var(--coral); border-radius: var(--r-md); padding: 1.1rem 1.3rem; color: var(--ink-soft); max-inline-size: 72ch; } .house__note svg { inline-size: 22px; block-size: 22px; flex: none; color: var(--coral-text); margin-block-start: .15rem; } /* ---------------------------------------------------------------- checklist */ .packing { display: grid; gap: clamp(1.2rem, 3vw, 2rem); align-items: start; } @media (min-width: 58rem) { .packing { grid-template-columns: 1fr 20rem; } } .packlist { display: grid; gap: clamp(1rem, 2vw, 1.4rem); } @media (min-width: 40rem) { .packlist { grid-template-columns: repeat(2, 1fr); } } .packgroup { background: var(--cream); border-radius: var(--r-lg); border: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent); padding: clamp(1.1rem, 2vw, 1.5rem); box-shadow: var(--shadow-1); } .packgroup h3 { font-size: 1.1rem; margin-block-end: .8rem; display: flex; gap: .55rem; align-items: center; } .packgroup h3 svg { inline-size: 23px; block-size: 23px; flex: none; color: var(--green); } .packgroup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; } .tick { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; padding: .5rem .55rem; border-radius: var(--r-sm); margin-inline: -.55rem; transition: background-color .15s var(--ease); } .tick:hover { background: var(--cream-deep); } .tick input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; } .tick__box { inline-size: 24px; block-size: 24px; flex: none; margin-block-start: .1rem; border: 2.5px solid color-mix(in srgb, var(--ink) 32%, transparent); border-radius: 8px; display: grid; place-items: center; background: var(--cream); transition: background-color .18s var(--ease), border-color .18s var(--ease); } .tick__box svg { inline-size: 15px; block-size: 15px; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .18s var(--ease), transform .18s var(--ease); } .tick input:checked + .tick__box { background: var(--green); border-color: var(--green); } .tick input:checked + .tick__box svg { opacity: 1; transform: scale(1); } .tick input:focus-visible + .tick__box { outline: 3px solid var(--lavender-text); outline-offset: 2px; } .tick__label { text-wrap: pretty; transition: color .18s var(--ease); } .tick input:checked ~ .tick__label { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--green) 60%, transparent); text-decoration-thickness: 2px; } .packside { position: sticky; inset-block-start: 5rem; /* --green-deep, not --green: white text on --green measures 4.90:1 and its translucent variants fall below AA. On --green-deep white is 7.4:1 and there is room to breathe. */ background: var(--green-deep); color: #fff; border-radius: var(--r-lg); padding: clamp(1.2rem, 2vw, 1.6rem); box-shadow: var(--shadow-2); display: grid; gap: 1rem; justify-items: center; text-align: center; } .ring { inline-size: 116px; block-size: 116px; transform: rotate(-90deg); } .ring circle { fill: none; stroke-width: 10; stroke-linecap: round; } .ring__bg { stroke: color-mix(in srgb, #fff 25%, transparent); } .ring__fg { stroke: var(--mint); stroke-dasharray: var(--circ, 314); stroke-dashoffset: var(--off, 314); transition: stroke-dashoffset .5s var(--ease); } .ring__wrap { position: relative; display: grid; place-items: center; } .ring__num { position: absolute; font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; } .packside__txt { font-weight: 600; font-size: .98rem; text-wrap: balance; } .packside__note { font-size: .78rem; color: color-mix(in srgb, #fff 84%, transparent); } .packside__acts { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; } .packside .btn { --btn-bg: var(--cream); --btn-fg: var(--green-deep); font-size: .88rem; padding: .55em 1.1em; box-shadow: none; } .packside .btn:hover { --btn-bg: var(--mint); --btn-fg: var(--ink); box-shadow: none; } /* ---------------------------------------------------------------- us */ .us { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; } @media (min-width: 54rem) { .us { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } } .us__portraits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.6rem, 1.6vw, 1.1rem); } .portrait { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--tint, var(--cream-deep)); box-shadow: var(--shadow-2); aspect-ratio: 3 / 4; } .portrait:first-child { transform: rotate(-1.6deg); } .portrait:last-child { transform: rotate(1.6deg) translateY(1.2rem); } .portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--focus, 50% 40%); } .portrait__cap { position: absolute; inset-block-end: .6rem; inset-inline-start: .6rem; background: var(--cream); color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: .92rem; padding: .3em .85em; border-radius: 999px; box-shadow: var(--shadow-1); } @media (prefers-reduced-motion: reduce) { .portrait:first-child, .portrait:last-child { transform: none; } } .us__body { font-size: clamp(1.08rem, 1.5vw, 1.28rem); text-wrap: pretty; } .us__sig { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--green-deep); margin-block-start: 1rem; display: flex; align-items: center; gap: .6rem; } .us__sig svg { inline-size: 26px; block-size: 26px; } /* ---------------------------------------------------------------- faq */ .faq { display: grid; gap: .6rem; max-inline-size: 78ch; } .qa { background: var(--cream); border-radius: var(--r-md); border: 1.5px solid color-mix(in srgb, var(--ink) 11%, transparent); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .qa[open] { border-color: color-mix(in srgb, var(--green) 40%, transparent); box-shadow: var(--shadow-1); } .qa > summary { cursor: pointer; list-style: none; padding: 1.05rem 1.2rem; font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; display: flex; align-items: center; gap: .9rem; transition: background-color .18s var(--ease); } .qa > summary::-webkit-details-marker { display: none; } .qa > summary:hover { background: var(--cream-deep); } .qa__chev { inline-size: 20px; block-size: 20px; flex: none; margin-inline-start: auto; color: var(--green); transition: transform .25s var(--ease); } .qa[open] .qa__chev { transform: rotate(180deg); } .qa__a { padding: 0 1.2rem 1.15rem; color: var(--ink-soft); text-wrap: pretty; } .qa__a a { font-weight: 700; } @media (prefers-reduced-motion: reduce) { .qa__chev { transition: none; } } /* ---------------------------------------------------------------- recommendations */ /* Flex, not grid: with one recommendation it centres at a readable width instead of stretching to a metre-wide card or sitting alone in a three-column row. */ .recs { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: clamp(.8rem, 1.8vw, 1.2rem); } .recs > .rec { flex: 1 1 20rem; max-inline-size: 26rem; } .rec { background: var(--cream); border-radius: var(--r-lg); border: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent); padding: clamp(1.2rem, 2vw, 1.6rem); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: .8rem; position: relative; } .rec::before { content: "”"; font-family: var(--font-display); font-weight: 800; font-size: 3.2rem; line-height: .55; color: var(--coral); display: block; margin-block-end: -.15rem; } .rec__body { margin: 0; text-wrap: pretty; } .rec__body + .rec__body { margin-block-start: .6em; } .rec__who { display: flex; align-items: center; gap: .6rem; margin-block-start: auto; padding-block-start: .6rem; border-block-start: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); } .rec__name { font-family: var(--font-display); font-weight: 800; font-size: .98rem; } .rec__dog { font-size: .86rem; color: var(--ink-soft); } .rec__paw { inline-size: 20px; block-size: 20px; color: var(--mint-text); flex: none; } .rec--pending { border-style: dashed; border-color: var(--coral); background: color-mix(in srgb, var(--coral) 7%, var(--cream)); } .rec__tag { position: absolute; inset-block-start: -.7rem; inset-inline-end: 1rem; background: var(--coral-text); color: #fff; font-size: .72rem; font-weight: 700; padding: .25em .8em; border-radius: 999px; } .rec__acts { display: flex; gap: .5rem; flex-wrap: wrap; } .rec__acts .btn { font-size: .84rem; padding: .5em 1em; } .adminnote { display: flex; gap: .8rem; align-items: flex-start; background: color-mix(in srgb, var(--lavender) 60%, var(--cream)); border: 1.5px dashed var(--lavender-text); border-radius: var(--r-md); padding: 1rem 1.2rem; color: var(--ink); max-inline-size: 72ch; margin-block-end: 1.4rem; } .adminnote svg { inline-size: 20px; block-size: 20px; flex: none; color: var(--lavender-text); margin-block-start: .2rem; } /* the invitation — stays visible even when the wall is hidden */ .invite { display: grid; gap: .8rem; justify-items: center; text-align: center; background: var(--cream); border: 2px dashed color-mix(in srgb, var(--green) 40%, transparent); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.2rem); max-inline-size: 58ch; margin-inline: auto; } .invite h3 { font-size: 1.3rem; } .invite p { color: var(--ink-soft); margin: 0; } /* ---------------------------------------------------------------- forms */ .field { display: grid; gap: .35rem; margin-block-end: 1rem; } .field > label { font-weight: 700; font-size: .92rem; } .field input, .field textarea { inline-size: 100%; padding: .75em .9em; background: var(--cream); border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: var(--r-sm); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent); } .field textarea { min-block-size: 8rem; resize: vertical; line-height: 1.6; } .field__count { font-size: .78rem; color: var(--ink-soft); justify-self: end; } .field__err { color: var(--coral-text); font-size: .85rem; font-weight: 600; } /* honeypot — off-screen, never display:none (which some bots detect and skip) */ .hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; opacity: 0; } .formcard { background: var(--cream); border-radius: var(--r-lg); border: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent); padding: clamp(1.3rem, 3vw, 2rem); box-shadow: var(--shadow-2); max-inline-size: 42rem; margin-inline: auto; } .formcard h3 { font-size: 1.4rem; margin-block-end: 1rem; } .formcard__acts { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; } .note { border-radius: var(--r-md); padding: 1rem 1.2rem; font-weight: 600; display: flex; gap: .7rem; align-items: flex-start; } .note svg { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: .15rem; } .note--ok { background: color-mix(in srgb, var(--mint) 45%, var(--cream)); color: var(--mint-text); border: 1.5px solid var(--mint); } .note--bad { background: color-mix(in srgb, var(--coral) 20%, var(--cream)); color: var(--coral-text); border: 1.5px solid var(--coral); } /* ---------------------------------------------------------------- contact */ .contact { position: relative; overflow: clip; } .contact__grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; } @media (min-width: 54rem) { .contact__grid { grid-template-columns: 1.1fr .9fr; } } .contact__card { background: var(--green-deep); color: #fff; border-radius: var(--r-lg); padding: clamp(1.5rem, 3.5vw, 2.4rem); box-shadow: var(--shadow-3); display: grid; gap: 1rem; } .contact__card h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); } .contact__card .sec__lead { color: color-mix(in srgb, #fff 90%, transparent); } .contact__acts { display: flex; flex-wrap: wrap; gap: .8rem; margin-block-start: .4rem; } .contact__card .btn { --btn-bg: #fff; --btn-fg: var(--green-deep); } .contact__card .btn:hover { --btn-bg: var(--mint); --btn-fg: var(--ink); } .contact__card .btn--ghost { --btn-bg: transparent; --btn-fg: #fff; border-color: color-mix(in srgb, #fff 45%, transparent); } .contact__card .btn--ghost:hover { --btn-bg: color-mix(in srgb, #fff 14%, transparent); --btn-fg: #fff; } .facts { display: grid; gap: .9rem; } .fact { display: flex; align-items: center; gap: .85rem; } .fact svg { inline-size: 26px; block-size: 26px; flex: none; color: var(--green); } .fact__k { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; } .fact__v { font-size: .88rem; color: var(--ink-soft); } .fact a { color: inherit; text-decoration: none; } .fact a:hover { text-decoration: underline; } /* The phone number reads left-to-right in both languages. */ .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* ---------------------------------------------------------------- sticky phone bar */ .wabar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--cream) 94%, transparent); backdrop-filter: blur(12px); border-block-start: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); display: flex; gap: .6rem; transform: translateY(120%); transition: transform .3s var(--ease); } .wabar[data-on] { transform: translateY(0); } .wabar .btn { flex: 1; } .wabar .btn--ghost { flex: 0 0 auto; padding-inline: 1.1em; } @media (min-width: 48rem) { .wabar { display: none; } } @media (prefers-reduced-motion: reduce) { .wabar { transition: none; } } body:has(.wabar[data-on]) { padding-block-end: 4.5rem; } @media (min-width: 48rem) { body:has(.wabar[data-on]) { padding-block-end: 0; } } /* ---------------------------------------------------------------- footer */ .foot { background: var(--ink); color: color-mix(in srgb, var(--cream) 78%, transparent); padding-block: 2.4rem; font-size: .9rem; } .foot__in { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; } .foot a { color: color-mix(in srgb, var(--cream) 78%, transparent); text-decoration: none; } .foot a:hover { color: var(--mint); text-decoration: underline; } .foot__sp { margin-inline-start: auto; } .foot__paw { inline-size: 26px; block-size: 26px; opacity: .6; } /* ---------------------------------------------------------------- the paw trail (E7) */ /* A trail of paw prints down the page edge, filling as you scroll. It is a progress indicator: it tells you how much of the visit is left. Hidden where there is no room, and gone entirely under reduced motion. */ .trail { display: none; } /* Needs a real margin to live in: the wrap is 1180px, so the trail only appears once there are ~120px of clear page edge either side. Below that it would sit on top of the content. */ @media (min-width: 90rem) { .trail { display: block; position: fixed; z-index: 30; inset-block: 16vh 16vh; inset-inline-start: calc((100vw - var(--wrap)) / 2 - 62px); inline-size: 30px; pointer-events: none; } .trail svg { inline-size: 30px; block-size: 100%; } .trail__paw { color: var(--ink); opacity: .13; transition: opacity .35s var(--ease), transform .35s var(--ease); transform-box: fill-box; transform-origin: center; } .trail__paw[data-lit] { opacity: .9; color: var(--green); transform: scale(1.18); } } @media (prefers-reduced-motion: reduce) { .trail { display: none; } } /* ---------------------------------------------------------------- reveal (E7) */ /* Sections rise as they arrive. `no-js` never gets this, and neither does a reduced-motion reader — in both cases everything is simply visible. */ .js .reveal { opacity: 0; transform: translateY(22px); } .js .reveal[data-in] { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); } .js .reveal[data-in][data-d="1"] { transition-delay: .08s; } .js .reveal[data-in][data-d="2"] { transition-delay: .16s; } .js .reveal[data-in][data-d="3"] { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .js .reveal, .js .reveal[data-in] { opacity: 1; transform: none; transition: none; } } /* ---------------------------------------------------------------- admin page */ .admin { min-block-size: 100svh; display: grid; grid-template-rows: auto 1fr auto; } .admin__main { padding-block: clamp(2rem, 5vw, 3.5rem); } .admin__count { display: inline-flex; align-items: center; gap: .4rem; background: var(--coral-text); color: #fff; font-size: .8rem; font-weight: 700; padding: .2em .7em; border-radius: 999px; margin-inline-start: .6rem; vertical-align: middle; } /* A queue reads as a queue: cards start at the heading's edge rather than centring. */ .admin .recs { justify-content: flex-start; } .admin h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-block: 2rem 1rem; } .admin h2:first-of-type { margin-block-start: 0; } .login { max-inline-size: 24rem; margin-inline: auto; margin-block-start: 8vh; } /* ---------------------------------------------------------------- print */ @media print { .head, .wabar, .trail, .hero, .foot, .btn, .invite, .contact, .qa__chev { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; padding: 0; } .sec { padding-block: .6rem; background: #fff !important; page-break-inside: avoid; } .packgroup { border: 1pt solid #999; box-shadow: none; break-inside: avoid; } .packside { display: none; } .packlist { grid-template-columns: 1fr 1fr; } .tick__box { border-color: #000; } .js .reveal, .js .reveal[data-in] { opacity: 1 !important; transform: none !important; } .shot, .portrait { box-shadow: none; } a[href]::after { content: ""; } } /* When the packing list is sent to the printer from its own button, only it goes. */ body[data-print="pack"] > *:not(#pack) { display: none !important; } body[data-print="pack"] #pack { padding-block: 0; }