/
nested directly inside a link, see the PHP comment in update-home-pages.php); position: relative makes it the containing block for .pet-feature-link, an invisible link stretched over the whole card for the cards that are clickable. */ .pet-feature { border: 1px solid var(--pet-border); border-radius: 22px; padding: 1.7rem; position: relative; transition: border-color .2s, box-shadow .2s, transform .2s; } .pet-feature:has(.pet-feature-link:hover), .pet-feature:has(.pet-feature-link:focus-visible) { border-color: var(--pet-border-strong); box-shadow: 0 18px 38px color-mix(in srgb, var(--pet-shadow-color) 10%, transparent); transform: translateY(-3px); } .pet-feature-link { border-radius: inherit; inset: 0; position: absolute; } .pet-feature-icon { align-items: center; background: var(--pet-primary); border-radius: 50%; color: var(--pet-surface); display: inline-flex; font-size: 0; height: 38px; justify-content: center; width: 38px; } .pet-feature-icon::before { content: '\2726'; font-size: 1.1rem; } .pet-feature:nth-child(2) .pet-feature-icon::before { content: '\25C6'; } .pet-feature:nth-child(3) .pet-feature-icon::before { content: '\2697'; } .pet-feature h3 { font-size: 1.2rem; margin: .8rem 0 .4rem; } .pet-feature p { line-height: 1.55; margin: 0; } .pet-home-categories { align-items: start; display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: .56fr 1.44fr; padding: clamp(2.2rem, 4vw, 3.8rem) 0; } .pet-home-categories + .pet-home-categories { border-top: 1px solid var(--pet-border); padding-top: clamp(1.8rem, 3vw, 2.8rem); } .pet-home-categories h2 { font-size: clamp(1.8rem, 3.5vw, 3.4rem); letter-spacing: -.045em; line-height: 1; margin: 0 0 .9rem; } .pet-home-categories p:last-child { color: var(--pet-muted); line-height: 1.65; margin: 0; } .pet-category-grid { display: grid; gap: .8rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } .pet-category-tile { background: var(--pet-surface); border: 1px solid var(--pet-border); border-radius: 18px; color: var(--pet-text); display: grid; min-height: 160px; padding: 1rem; text-decoration: none; transition: background .2s, border-color .2s, transform .2s; } .pet-category-tile:hover { background: var(--pet-primary-soft); border-color: var(--pet-primary); transform: translateY(-3px); } .pet-category-tile span { color: var(--pet-accent-text); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; } .pet-category-tile strong { align-self: end; font-size: 1.08rem; line-height: 1.2; } /* --pet-text-secondary, not --pet-muted: the tile's hover ground is --pet-primary-soft, where --pet-muted measures 4.24 and misses the 4.5 this size owes. This tone measures 5.41 there and 6.28 on the resting white. */ .pet-category-tile small { color: var(--pet-text-secondary); font-size: .78rem; font-weight: 700; line-height: 1.45; margin-top: .45rem; } /* contain for the same reason as .pet-info-image below -- these tiles show the same whole-animal studio photos, and cover cropped part of the subject off no matter which edge it was anchored to. */ .pet-category-tile img { background: var(--pet-surface); border-radius: 14px; display: block; height: 120px; margin-bottom: .85rem; object-fit: contain; width: 100%; } .pet-category-tile:has(img) { align-content: start; min-height: 250px; } .pet-category-tile:has(img) strong { align-self: auto; margin-top: .25rem; } /* "What you will find at Pet Town" -- the home page's prose section between the category tiles and the reviews. Cards borrow .pet-feature's hairline look; two columns so five blocks read as a compact directory, and the last odd card spans the full row rather than sitting beside a gap. */ .pet-home-about { padding: clamp(2rem, 4vw, 3.5rem) 0 1rem; } .pet-home-about h2 { font-size: clamp(1.55rem, 2.8vw, 2.4rem); letter-spacing: -.04em; margin: 0 0 .6rem; } .pet-home-about-intro { color: var(--pet-muted); line-height: 1.65; margin: 0 0 1.5rem; max-width: 760px; } .pet-home-about-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); } .pet-home-about-grid article { border: 1px solid var(--pet-border); border-radius: 22px; padding: 1.7rem; } .pet-home-about-grid article:last-child:nth-child(odd) { grid-column: 1 / -1; } .pet-home-about-grid h3 { font-size: 1.2rem; margin: 0 0 .5rem; } .pet-home-about-grid p { line-height: 1.6; margin: 0; } .pet-home-about-grid article > a { color: var(--pet-primary); display: inline-flex; font-weight: 800; margin-top: 1rem; text-decoration-thickness: 1px; text-underline-offset: .2em; } .pet-photo-band { align-items: center; background: var(--pet-surface-muted); border-radius: var(--pet-radius-lg); display: grid; gap: clamp(1.5rem, 5vw, 5rem); grid-template-columns: 1.3fr .7fr; margin: 1rem 0; overflow: hidden; } .pet-photo-band picture { display: block; height: 300px; } .pet-photo-band img { display: block; height: 100%; object-fit: cover; width: 100%; } .pet-photo-band > div { padding: 2rem 2rem 2rem 0; } .pet-photo-band h2 { font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: -.04em; line-height: 1; margin: 0 0 .8rem; } .pet-photo-band > div > p:last-child { line-height: 1.6; margin: 0; } .pet-reviews { padding: clamp(3rem, 5vw, 5rem) 0; } .pet-review-heading h2 { font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.05em; margin: 0 0 1.5rem; } .pet-review-grid { display: grid; gap: 1rem; grid-auto-rows: 1fr; grid-template-columns: repeat(2, 1fr); } /* A white card with a hairline, not the solid yellow slab this used to be. The slab was the largest saturated block on the page, and it forced every piece of text inside it onto a ground of its own: the star row and the timestamp needed a brown tuned to yellow, while the same stars elsewhere on the page needed a second brown tuned to white. On a plain surface both rows read against the same ground as everything else, so one tone covers each job -- stars in --pet-accent-text, metadata in --pet-text-secondary. */ .pet-review { background: var(--pet-surface); border: 1px solid var(--pet-border); border-radius: 22px; color: var(--pet-text); display: flex; flex-direction: column; margin: 0; padding: 1.7rem; } /* Cards held back behind the "show more" button. The attribute alone would do it, but the grid sets display on its items, so say it here where that specificity is answered. */ .pet-review[hidden] { display: none; } .pet-review-more { display: flex; justify-content: center; margin-top: 1rem; } .pet-review-more-button { background: none; border: 2px solid var(--pet-primary); border-radius: 999px; color: var(--pet-primary); cursor: pointer; font: inherit; font-weight: 800; padding: .7rem 1.6rem; transition: background .2s, color .2s; } .pet-review-more-button:hover { background: var(--pet-primary); color: var(--pet-surface); } .pet-review-more-button:focus-visible { outline: 3px solid var(--pet-focus); outline-offset: 3px; } .pet-review blockquote { flex: 1 0 auto; font-size: 1.15rem; line-height: 1.5; margin: 0 0 1.3rem; } .pet-review figcaption { margin-top: auto; } .pet-review-top { align-items: baseline; display: flex; gap: .6rem; justify-content: space-between; } .pet-review-author { font-weight: 800; } .pet-review-stars { color: var(--pet-accent-text); font-size: .8rem; letter-spacing: .05em; white-space: nowrap; } .pet-review-time { color: var(--pet-text-secondary); display: block; font-size: .65rem; font-weight: 800; letter-spacing: .12em; margin-top: .4rem; text-transform: uppercase; } .pet-review-invite { align-items: center; background: linear-gradient(135deg, var(--pet-surface-muted) 0%, var(--pet-surface) 100%); border: 1px solid var(--pet-border); border-radius: var(--pet-radius-lg); box-shadow: 0 12px 28px color-mix(in srgb, var(--pet-shadow-color) 6%, transparent); display: grid; gap: 1.5rem; grid-template-columns: auto 1fr auto; overflow: hidden; padding: clamp(1.25rem, 3vw, 2.2rem); position: relative; } .pet-review-invite::before { color: color-mix(in srgb, var(--pet-primary) 18%, transparent); content: '\201C'; font-family: Georgia, serif; font-size: 9rem; line-height: .7; pointer-events: none; position: absolute; right: 2rem; top: 1.4rem; } .pet-review-invite h2 { font-size: clamp(1.8rem, 3.2vw, 3rem); letter-spacing: -.045em; line-height: 1.05; margin: 0 0 .7rem; position: relative; } .pet-review-invite p { margin: 0; max-width: 720px; position: relative; } .pet-review-invite .pet-eyebrow { margin-bottom: .7rem; } .pet-review-score { align-items: center; background: var(--pet-surface); border: 1px solid var(--pet-border); border-radius: 18px; display: grid; justify-items: center; min-width: 120px; padding: .85rem 1rem; position: relative; } .pet-review-score-value { align-items: baseline; display: flex; gap: .15rem; } .pet-review-score-value strong { font-size: 2.4rem; letter-spacing: -.04em; line-height: 1; } .pet-review-score-scale { color: var(--pet-muted); font-size: 1.05rem; font-weight: 700; } /* These stars are aria-hidden and the "4.4/5" above them says the same thing in text, so WCAG treats them as decoration and asks nothing of them. They still have to be visible to do their one job, and the warm fill tone of the brand measures 2.91 on this white ground -- a shape you have to look for. --pet-accent-text measures 5.99 here. It is now the same token as .pet-review-stars above, because those cards became white too, so the two star rows on this page finally read as one thing instead of two browns each tuned to a different ground. */ .pet-review-score-stars { color: var(--pet-accent-text); font-size: .85rem; letter-spacing: .08em; line-height: 1; margin-top: .35rem; } .pet-review-score small { color: var(--pet-muted); font-size: .68rem; font-weight: 900; letter-spacing: .12em; margin-top: .35rem; text-transform: uppercase; } .pet-review-button { align-items: center; background: var(--pet-primary); border: 2px solid var(--pet-primary); border-radius: 999px; color: var(--pet-surface); display: inline-flex; font-weight: 800; justify-content: center; min-height: 52px; padding: .7rem 1.25rem; position: relative; text-decoration: none; white-space: nowrap; } .pet-review-button:hover { background: var(--pet-primary-hover); border-color: var(--pet-primary-hover); color: var(--pet-surface); } .pet-section-image { border-radius: var(--pet-radius-lg); margin: 1rem 0; overflow: hidden; } .pet-section-image picture { display: block; } .pet-section-image img { display: block; height: clamp(240px, 34vw, 460px); object-fit: cover; width: 100%; } .pet-footer { background: var(--pet-primary); color: var(--pet-surface); margin-top: 1.5rem; padding: clamp(1.25rem, 2.5vw, 2rem) 24px max(2rem, calc(.75rem + env(safe-area-inset-bottom))); } .pet-contact-panel { display: grid; gap: clamp(1rem, 2.5vw, 2rem); grid-template-columns: 1.1fr .9fr; margin: 0 auto; max-width: 1280px; } /* Warm text on the dark green footer takes --pet-accent-soft and neither of the other two warm tones: --pet-accent measures 2.55 against this ground and --pet-accent-text 1.24, while this one measures 6.08. */ .pet-contact-panel .pet-eyebrow { color: var(--pet-accent-soft); } .pet-contact-panel h2 { color: var(--pet-surface); font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: -.05em; line-height: 1; margin: 0 0 .6rem; } .pet-contact-copy > p { color: var(--pet-primary-soft); font-size: 1.05rem; line-height: 1.6; max-width: none; white-space: nowrap; } .pet-contact-meta { border-left: 3px solid var(--pet-accent-soft); margin-top: 1.2rem; padding-left: 1rem; } /* Grid, not flex space-between: the icons should sit centered in the space between the hours text and the map (the next column over, outside this row entirely), not flush against this row's own right edge -- .pet-contact-meta takes only what it needs, .pet-contact-links centers itself within the rest, which runs right up to the map's grid column. */ .pet-contact-meta-row { align-items: center; display: grid; gap: 1.25rem; grid-template-columns: auto 1fr; } .pet-contact-meta p { color: var(--pet-surface); line-height: 1.7; margin: 0; } .pet-contact-meta span { color: var(--pet-primary-soft); font-size: .95rem; } .pet-contact-meta small { color: var(--pet-primary-soft); display: inline-block; font-size: .82rem; line-height: 1.5; margin-top: .5rem; } [dir="rtl"] .pet-contact-meta { border-left: 0; border-right: 3px solid var(--pet-accent-soft); padding-left: 0; padding-right: 1rem; } .pet-contact-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 0; width: auto; } .pet-contact-link { align-items: center; background: var(--pet-primary); border: 0; border-radius: 50%; color: var(--pet-surface); display: inline-flex; height: 44px; justify-content: center; padding: 0; position: relative; text-decoration: none; transition: background .2s, box-shadow .2s, transform .2s; width: 44px; } .pet-contact-link:hover, .pet-contact-link:focus-visible { background: var(--pet-primary-hover); box-shadow: 0 8px 20px color-mix(in srgb, var(--pet-shadow-color-on-dark) 24%, transparent); color: var(--pet-surface); transform: translateY(-3px); } /* Facebook and Instagram below keep their owners' real brand colours; these four never had one to keep. WhatsApp is the one that mattered: it was the brand #25d366 at rest and --pet-whatsapp on hover, so two colour systems met on a single control and the button changed identity when pointed at. */ .pet-contact-phone { background: var(--pet-primary-active); } .pet-contact-mail { background: var(--pet-text-secondary); } .pet-contact-whatsapp { background: var(--pet-whatsapp); } .pet-contact-waze { background: var(--pet-info); } .pet-contact-facebook { background: #1877f2; } .pet-contact-instagram { background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 52%, #fcb045 100%); } .pet-contact-link:focus-visible { outline: 3px solid var(--pet-focus); outline-offset: 3px; } .pet-contact-link::after { background: var(--pet-surface); border-radius: 8px; bottom: calc(100% + 9px); color: var(--pet-text); content: attr(data-label); font-size: .75rem; font-weight: 800; left: 50%; opacity: 0; padding: .4rem .6rem; pointer-events: none; position: absolute; transform: translate(-50%, 4px); transition: opacity .2s, transform .2s; white-space: nowrap; z-index: 2; } .pet-contact-link:hover::after, .pet-contact-link:focus-visible::after { opacity: 1; transform: translate(-50%, 0); } .pet-contact-link svg { fill: currentColor; height: 20px; width: 20px; } .pet-contact-visual { display: flex; flex-direction: column; min-height: 100%; } .pet-map { border-radius: 14px; flex: 1; margin-top: .5rem; min-height: 75px; overflow: hidden; } .pet-map iframe { border: 0; display: block; filter: saturate(.7) contrast(.95); height: 100%; min-height: 75px; width: 100%; } /* Placeholder occupying the same box as the iframe it is replaced with on click (see contact-map.js) -- keeps the panel from resizing when the map actually loads. */ /* Larger label, shorter collapsed box: before the map is loaded this is just a call to action, so it does not need to reserve the map's full height -- it only grows to that size once the iframe replaces it. */ /* border-box: without it the 1rem of side padding and the dashed border are added outside the 100%, and the button overhangs the map panel it fills. */ .pet-map-load { align-items: center; background: color-mix(in srgb, var(--pet-surface) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--pet-surface) 55%, transparent); box-sizing: border-box; border-radius: 14px; color: var(--pet-surface); cursor: pointer; display: flex; font-size: 1.05rem; font-weight: 800; justify-content: center; min-height: 64px; padding: .9rem 1rem; text-align: center; transition: background .2s, border-color .2s; width: 100%; } .pet-map-load:hover { background: color-mix(in srgb, var(--pet-surface) 16%, transparent); border-color: var(--pet-accent-soft); } .pet-contact-whatsapp:hover, .pet-contact-whatsapp:focus-visible { background: var(--pet-whatsapp-hover); } .pet-contact-facebook:hover, .pet-contact-facebook:focus-visible { background: #1877f2; } .pet-contact-instagram:hover, .pet-contact-instagram:focus-visible { background: #d62976; } .pet-contact-form { background: color-mix(in srgb, var(--pet-surface) 7%, transparent); border: 1px solid color-mix(in srgb, var(--pet-surface) 18%, transparent); border-radius: 18px; margin-top: .9rem; padding: .85rem 1rem; } .pet-contact-form-heading h3 { color: var(--pet-surface); font-size: 1.3rem; margin: 0 0 .2rem; } .pet-contact-form-heading p { color: var(--pet-primary-soft); font-size: .82rem; line-height: 1.4; margin: 0 0 .7rem; } .pet-contact-form form { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pet-contact-form .pet-form-row { display: contents; } .pet-contact-form .pet-form-notice { grid-column: 1 / -1; } .pet-contact-form form > p:empty { display: none; } .pet-form-message { min-width: 0; } /* align-content: start stops each label's inner rows from stretching to fill its grid cell: the e-mail label is taller than its row neighbours (it carries a .pet-form-hint underneath), and without this the shorter siblings stretched their input/select to match, so fields in the same visual row ended up different heights. */ .pet-contact-form label { align-content: start; color: var(--pet-surface); display: grid; font-size: .72rem; font-weight: 800; gap: .2rem; } .pet-form-row { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pet-contact-form input:not([type="checkbox"]), .pet-contact-form select, .pet-contact-form textarea { background: var(--pet-surface); border: 2px solid var(--pet-border-input); border-radius: 10px; box-sizing: border-box; color: var(--pet-text); font-size: .92rem; min-height: 42px; padding: .5rem .7rem; text-align: start; width: 100%; } .pet-contact-form textarea { min-height: 58px; resize: vertical; } .pet-contact-form input:focus, .pet-contact-form select:focus, .pet-contact-form textarea:focus { /* Two-toned on purpose. This field is a white box sitting on the dark green footer, so its focus indicator has two different neighbours and no single colour answers both: the border darkens against the field's own white interior (12.23), and the outline just outside it is white against the footer (7.42). What this replaces set outline: 0 and relied on a yellow border plus a .24-alpha glow, which left very little to see from either side. */ border-color: var(--pet-primary-active); outline: 3px solid var(--pet-surface); outline-offset: 1px; } .pet-form-hint { color: var(--pet-primary-soft); display: block; font-size: .64rem; font-weight: 600; line-height: 1.25; margin: 0; } .pet-form-privacy-note { color: var(--pet-primary-soft); font-size: .64rem; font-weight: 600; line-height: 1.35; margin: .35rem 0 0; } .pet-form-privacy-note a { color: var(--pet-accent-soft); } .pet-form-consent { align-items: start; display: flex !important; font-size: .72rem !important; font-weight: 600 !important; gap: .55rem !important; line-height: 1.45; } .pet-form-consent input { accent-color: var(--pet-primary-soft); flex: 0 0 auto; height: 18px; margin: .1rem 0 0; width: 18px; } .pet-form-actions { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: .45rem; justify-content: flex-end; } .pet-form-buttons { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem; } /* Outlined pill, deliberately quieter than the filled submit button: it is an alternative route for a minority of visitors, not a second call to action competing with sending the enquiry. */ .pet-form-cancel-link { border: 1px solid color-mix(in srgb, var(--pet-surface) 55%, transparent); border-radius: 999px; color: var(--pet-surface); font-size: .78rem; font-weight: 800; padding: .45rem .85rem; text-decoration: none; transition: border-color .2s, background .2s; white-space: nowrap; } .pet-form-cancel-link:hover { background: color-mix(in srgb, var(--pet-surface) 10%, transparent); border-color: var(--pet-surface); } .pet-form-actions .pet-form-consent { flex: 1; } /* Primary hero action: the shop. The other two stay as the translucent pills above, so the visitor can see at a glance which path the business leads with instead of weighing three identical options. */ .pet-quick-actions a.pet-quick-action-primary { background: var(--pet-primary); border-color: var(--pet-primary); color: var(--pet-surface); font-weight: 800; } .pet-quick-actions a.pet-quick-action-primary:hover { background: var(--pet-primary-hover); border-color: var(--pet-primary-hover); color: var(--pet-surface); } .pet-quick-actions a.pet-quick-action-secondary { background: var(--pet-surface); border-color: var(--pet-primary); color: var(--pet-primary); } .pet-quick-actions a.pet-quick-action-tertiary { background: transparent; border-color: transparent; border-radius: 0; color: var(--pet-primary); padding-inline: .35rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; } .pet-quick-actions a.pet-quick-action-tertiary:hover { background: transparent; border-color: transparent; color: var(--pet-primary-hover); } /* Matched to the submit button beside it down to the box metrics, so the two read as one pair. The submit has no border and this one does, so both are pinned to border-box and given the same 1px edge -- otherwise the outline adds two pixels and the pills sit at different heights. It stays visibly inert until the topic select says "cancel an order": offering a live link to a cancellation form to someone asking about food is noise. */ .pet-contact-form .pet-form-cancel-link { align-items: center; border-radius: 999px; box-sizing: border-box; display: inline-flex; font-size: .84rem; font-weight: 800; justify-content: center; line-height: 1.2; min-height: 42px; padding: .55rem 1rem; } .pet-contact-form .pet-form-cancel-link[aria-disabled="true"] { border-color: color-mix(in srgb, var(--pet-surface) 18%, transparent); color: color-mix(in srgb, var(--pet-surface) 45%, transparent); cursor: not-allowed; pointer-events: none; } /* The "either one is enough" note rides on the phone label's own line, so it reads as a rule for the pair rather than a footnote to one field. */ .pet-form-label-row { align-items: baseline; display: flex; flex-wrap: wrap; gap: .5rem; } .pet-form-label-row .pet-form-hint { font-weight: 400; } /* Under the message box, in the same column, where the visitor's eye already is once they finish writing. */ /* The buttons line up with the consent tick beside them rather than sinking to the bottom of their cell, so the last row of the form reads as one line. Slightly tighter than the fields above, since two controls side by side otherwise dominate the block they close. */ .pet-contact-form .pet-form-actions { align-self: start; gap: .55rem; justify-content: flex-start; } .pet-contact-form .pet-form-buttons button, .pet-contact-form .pet-form-buttons .pet-form-cancel-link { font-size: .8rem; min-height: 38px; padding: .45rem .9rem; } /* Equal halves rather than two widths set by their text lengths: the pair closes the form and reads better as one balanced row. flex-basis 0 makes them share the space evenly instead of proportionally to their labels. */ .pet-contact-form .pet-form-buttons { display: flex; width: 100%; } .pet-contact-form .pet-form-buttons button, .pet-contact-form .pet-form-buttons .pet-form-cancel-link { flex: 1 1 0; text-align: center; } /* The message box fills its row rather than sitting at a fixed three rows: its bottom then lines up with the note closing the block beside it, and the visitor gets more room to write on wider screens. */ .pet-contact-form .pet-form-message { align-self: stretch; } .pet-contact-form .pet-form-message label { display: flex; flex-direction: column; height: 100%; } .pet-contact-form .pet-form-message textarea { flex: 1 1 auto; } /* Until the map is asked for, this block holds nothing but the button, so it must not grow. flex:1 made it swallow whatever height was left in the column -- barely visible on a desktop panel, a screen-tall empty slab above the footer on a phone. The iframe brings its own height once loaded. */ .pet-map:not(:has(iframe)) { flex: 0 0 auto; min-height: 0; } /* The category tiles' stock photos sit on their own white; melt it into the tile like the product cards do (see 50-catalog.css). */ .pet-category-tile img { mix-blend-mode: multiply; }