/* ============================================================ Public pet profile — the few rules the vendored draft cannot carry on its own. `public-profile.css` is the approved draft's stylesheet, copied byte for byte so it can be re-vendored whenever the draft moves. Everything that has to differ *because this page lives inside the site* belongs here instead, where it is short enough to audit. Load order: tokens → draft → this file. ============================================================ */ /* — The draft is a standalone document; here it renders inside the Bootstrap layout, which defines .card as a flex column. That turned every section into a flex container and distorted the cards. The draft's .card is a plain block, so restore it — scoped to this page so Bootstrap's own cards elsewhere are untouched. — */ body.public-page .card { display: block; position: static; /* Bootstrap also sets the radius, and its rule sits later in the cascade at equal weight — cards were rendering at 6px where the draft asks for 16. Every other rounded thing on the page is fine, because .card is the one class name Bootstrap shares with the draft. */ border-radius: var(--r-lg); flex-direction: initial; min-width: 0; word-wrap: normal; background-clip: border-box; } /* — The layout makes a flex column with height:100%. A flex item does not grow past its content by default, so .page-shell froze at its own min-height of 60vh: the content spilled out visually and the footer landed in the middle of the page. — */ body.public-page .page-shell { flex: 1 0 auto; /* And a definite cross size. The shell centres itself with `margin: 0 auto`, and an auto margin on the cross axis stops a flex item from stretching -- its width becomes fit-content instead. So the page was as wide as whatever it happened to contain, and hiding a block of fields (the Origin toggle on the edit form) visibly narrowed the whole page: measured 962px with the block, 732px without it. */ width: 100%; } /* — Bootstrap's .breadcrumb adds a grey pill background and padding that the draft's flat crumb does not want. — */ body.public-page .breadcrumb { padding: 0; background: none; border-radius: 0; list-style: none; } /* ── Blocks this page needs that the draft does not draw ───── Assembled from the draft's own card / details-grid pieces, so only the photo grid needs rules of its own. */ body.public-page .pp-gallery { display: grid; /* auto-fill, not fixed columns: three across on a phone, six on a laptop, without a breakpoint for each step between. */ grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; } body.public-page .pp-gallery__item { display: block; position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; background: var(--c-brand-dark-025); } body.public-page .pp-gallery__link { display: block; width: 100%; height: 100%; } /* The hero opens the same lightbox. It only wraps the picture -- the wanted stripe and the edit button stay outside it, so they still take their own clicks. */ body.public-page .hero__photo-link { display: block; width: 100%; height: 100%; } /* The owner's two actions ride in the corner of the tile they belong to, so there is nothing to hunt for and nothing to select first. */ body.public-page .pp-gallery__tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; } body.public-page .pp-gallery__tools form { margin: 0; } body.public-page .pp-gallery__tool { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--c-brand-dark-700, #33413A); cursor: pointer; } body.public-page .pp-gallery__tool svg { width: 16px; height: 16px; } body.public-page .pp-gallery__tool:hover { background: #fff; } body.public-page .pp-gallery__tool--danger:hover { color: var(--c-danger-600, #C4453C); } /* With a mouse the buttons stay out of the photo until it is under the cursor. A touch screen has no hover to reveal them with, so there they are simply there. */ @media (hover: hover) and (pointer: fine) { body.public-page .pp-gallery__tools { opacity: 0; transition: opacity 150ms var(--ease-standard); } body.public-page .pp-gallery__item:hover .pp-gallery__tools, body.public-page .pp-gallery__tools:focus-within { opacity: 1; } } body.public-page .pp-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 200ms var(--ease-standard); } body.public-page .pp-gallery__item:hover img { transform: scale(1.04); } body.public-page .card + .card, body.public-page .card + .acq, body.public-page .acq + .card { margin-top: 16px; } /* The lost-pet banner reuses the draft's .info-banner in a danger tone — this is the page's one genuinely urgent state. */ body.public-page .info-banner[role="status"] { border-color: var(--c-status-danger-500); background: var(--c-status-danger-100); color: #7f1d1d; } body.public-page .info-banner[role="status"] strong { display: block; } /* — Tag number beside the photo. The draft draws one pill, for the pet id; the QR tag is the number printed on the thing in the finder's hand, so it belongs in the same place and not in a section further down. Lighter than the pet id pill, which stays the primary one. — */ body.public-page .id-pill--tag { background: var(--c-white); border: 1px dashed var(--c-brand-dark-100); color: var(--c-brand-dark-700); } body.public-page .id-pill--tag .id-pill__label { color: var(--c-brand-dark-300); } body.public-page .id-pill--tag .id-pill__copy { background: var(--c-brand-dark-025); color: var(--c-brand-dark-500); } body.public-page .id-pill--tag .id-pill__copy:hover { background: var(--c-brand-dark-050); } body.public-page .id-pill--tag .id-pill__copy.is-copied { background: var(--c-brand-green-500); color: var(--c-white); } /* — The sheet and the footer are both near-white, so their seam disappears. The draft is a standalone page and never had a footer under it. — */ body.public-page footer.footer { border-top: 1px solid var(--c-brand-dark-050); } /* — The draft's token file resets links to no underline, but it is a plain `a` selector and the site's own theme underlines links from a rule that lands later in the cascade. Scoping to this page raises specificity above both without touching links anywhere else. — */ body.public-page a { text-decoration: none; } body.public-page .acq__learn:hover, body.public-page .breadcrumb a:hover { text-decoration: underline; } /* — Undoing Bootstrap's flex .card above also outranked the draft's own .pedigree-card, which needs to be a row: photo, then name and id, then the sex chip. Restore it at a specificity that beats the neutraliser. — */ body.public-page .card.pedigree-card { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } /* ── Wall ──────────────────────────────────────────────────────────── The approved design carries no wall, so these rules are built from the design system's own tokens rather than copied from the draft: same radii, same greys, same spacing rhythm as the section cards above them. Kept in this file, not in public-profile.css, because that file is a byte-for-byte copy of the draft and must stay one. ------------------------------------------------------------------- */ .pp-wall__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pp-wall__add { font-size: 13px; font-weight: 700; color: var(--c-brand-green-600, #4E9D57); white-space: nowrap; } .pp-wall__empty { margin: 0; color: var(--c-text-muted, #8A8A8A); font-size: 14px; } .pp-wall { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .pp-post { border: 1px solid var(--c-border, #E5E5E5); border-radius: var(--r-md, 12px); padding: 14px 16px; } .pp-post__head { display: flex; align-items: center; gap: 10px; } .pp-post__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .pp-post__avatar--blank { background: #F0F0F0; } .pp-post__meta { display: flex; flex-direction: column; min-width: 0; } .pp-post__author { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-post__date { font-size: 12px; color: var(--c-text-muted, #8A8A8A); } /* Pushed to the far end of the row; only ever rendered for the author's own private entries, as a reminder that a finder cannot read this one. */ .pp-post__lock { margin-left: auto; color: var(--c-text-muted, #8A8A8A); } .pp-post__lock svg { width: 16px; height: 16px; } .pp-post__text { margin: 10px 0 0; font-size: 14px; line-height: 1.5; /* Post bodies are user input and can carry unbroken strings. */ overflow-wrap: anywhere; } .pp-post__images { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .pp-post__images img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-sm, 8px); display: block; } .pp-post__foot { margin-top: 10px; display: flex; /* Without this the row stretches its items: the comment count sat at the top of its box while the like button, taller by its padding, centred its own text -- so the two read as different lines. */ align-items: center; gap: 16px; font-size: 12px; color: var(--c-text-muted, #8A8A8A); } .pp-wall__more { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--c-brand-green-600, #4E9D57); } /* ── Owner actions ─────────────────────────────────────────────────── Upload tile and the two ways to attach a tag. Neither exists in the draft; both borrow its card radii and green so they read as part of it. ------------------------------------------------------------------- */ /* Sits in the photo grid as one more tile, matching the thumbnails around it rather than floating above them as a toolbar. */ .pp-gallery__upload { margin: 0; } .pp-gallery__upload-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; min-height: 96px; border: 1.5px dashed var(--c-border, #E5E5E5); border-radius: var(--r-sm, 8px); color: var(--c-text-muted, #8A8A8A); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s; } .pp-gallery__upload-label:hover { border-color: var(--c-brand-green-600, #4E9D57); color: var(--c-brand-green-600, #4E9D57); } /* The real input stays in the DOM for the label to drive and for assistive tech to find -- display:none would take it out of the accessibility tree. */ .pp-gallery__upload-label input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .pp-gallery__upload-label svg { width: 20px; height: 20px; } .pp-tag-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .pp-tag-actions__btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border: 1px solid var(--c-brand-green-600, #4E9D57); border-radius: var(--r-pill, 999px); background: var(--c-brand-green-600, #4E9D57); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .pp-tag-actions__btn--ghost { background: transparent; color: var(--c-brand-green-600, #4E9D57); } /* The crown marks an item that needs a subscription; the page behind it does the explaining, exactly as on the classic panel. */ .side-nav__premium { width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; } /* The draft sticks .side-nav itself, which was right when the column held one block. With the owner menu below it there are two, both pinned to the same offset, so the second rides over the first as soon as the page scrolls. The column sticks as a unit instead, and scrolls internally if it ever grows taller than the viewport. */ .layout > aside { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; } .layout > aside .side-nav { position: static; top: auto; } @media (max-width: 900px) { /* The column is hidden on phones; make sure nothing here re-introduces it. */ .layout > aside { position: static; max-height: none; overflow: visible; } } /* An ancestry tree is as wide as the family is deep, so it scrolls inside its card instead of stretching the page. */ .pedigree-tree { overflow-x: auto; padding-bottom: 8px; } /* The tag buttons and the lost-pet button are separate rows in the hero; without this they sit flush against each other. */ .pp-tag-actions + .hero__actions, .pp-tag-actions + .pp-tag-actions { margin-top: 12px; } /* The premium banner ends in a call to action, so it has to read as a button rather than as one more sentence in the paragraph. */ .info-banner__link { flex-shrink: 0; margin-left: auto; padding: 8px 16px; border-radius: var(--r-pill, 999px); background: var(--c-brand-green-600, #4E9D57); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; } .info-banner__link:hover { color: #fff; opacity: .92; } /* ── Scan history ──────────────────────────────────────────────────── The rows keep the .blocks-list-item class because the map script adds .active to it on click; everything else here is new. ------------------------------------------------------------------- */ .geo-intro, .geo-note { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--c-text-muted, #5C5C5C); } .geo-map { width: 100%; height: 340px; margin-bottom: 16px; border-radius: var(--r-md, 12px); overflow: hidden; } .geo-empty { margin: 0; color: var(--c-text-muted, #8A8A8A); } .geo-list { list-style: none; margin: 16px 0 0; padding: 0; } .geo-list__item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--c-border, #E5E5E5); border-radius: var(--r-sm, 8px); margin-bottom: 8px; transition: background-color .12s, border-color .12s; } /* The class the map script toggles when a row is picked. */ .geo-list__item.active { background: #F5F9F5; border-color: var(--c-brand-green-600, #4E9D57); } .geo-list__pin img { width: 18px; height: 18px; display: block; } /* Coordinates are the click target that centres the map, so they read as one -- the old page said so only with an inline cursor style. */ .geo-list__coords { font-size: 13px; cursor: pointer; overflow-wrap: anywhere; } .geo-list__date { font-size: 12px; color: var(--c-text-muted, #8A8A8A); white-space: nowrap; } .geo-list__open img { width: 16px; height: 16px; display: block; opacity: .7; } .geo-list__open:hover img { opacity: 1; } @media (max-width: 560px) { /* Date drops under the coordinates rather than squeezing them. */ .geo-list__item { grid-template-columns: 24px minmax(0, 1fr) auto; } .geo-list__date { grid-column: 2 / 4; } } /* ── Adding a tag from stock ───────────────────────────────────────── A plus beside the tag number, and the dialog it opens. Vanilla, like the scan modal it sits next to: this page carries no Bootstrap modal plugin. ------------------------------------------------------------------- */ .id-add-btn { /* Its own line under the id pill rather than beside it: sitting flush against the copy button, it read as part of that control. */ display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 8px 14px; border: 1.5px solid var(--c-brand-green-600, #4E9D57); border-radius: var(--r-pill, 999px); background: transparent; color: var(--c-brand-green-600, #4E9D57); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .id-add-btn span[aria-hidden] { font-size: 16px; line-height: 1; } .id-add-btn:hover { background: #F5F9F5; } .stock-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; } .stock-modal[hidden] { display: none; } .stock-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); } .stock-modal__box { position: relative; width: 100%; max-width: 420px; padding: 20px; border-radius: var(--r-lg, 16px); background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .18); } .stock-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .stock-modal__head h3 { margin: 0; font-size: 16px; font-weight: 800; } .stock-modal__close { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--c-text-muted, #8A8A8A); cursor: pointer; } .stock-modal__search { width: 100%; padding: 11px 14px; border: 1.5px solid var(--c-border, #E5E5E5); border-radius: var(--r-sm, 8px); font: inherit; font-size: 14px; } .stock-modal__search:focus { outline: none; border-color: var(--c-brand-green-600, #4E9D57); box-shadow: 0 0 0 3px rgba(78, 157, 87, .12); } .stock-modal__table-wrap { max-height: 300px; overflow-y: auto; margin-top: 10px; border: 1px solid var(--c-border, #E5E5E5); border-radius: var(--r-sm, 8px); } .stock-table { width: 100%; border-collapse: collapse; font-size: 14px; } /* The header stays put while the list scrolls: with tags and chips mixed in one table, the type column is what tells them apart. */ .stock-table thead th { position: sticky; top: 0; z-index: 1; padding: 8px 12px; background: #F7F7F7; border-bottom: 1px solid var(--c-border, #E5E5E5); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--c-text-muted, #8A8A8A); text-align: left; } .stock-table__row td { padding: 9px 12px; border-bottom: 1px solid var(--c-border, #E5E5E5); cursor: pointer; overflow-wrap: anywhere; } .stock-table__row:last-child td { border-bottom: 0; } .stock-table__row:hover td { background: #F7F7F7; } .stock-table__row.is-picked td { background: #F5F9F5; font-weight: 700; } .stock-table__type { white-space: nowrap; color: var(--c-text-muted, #5C5C5C); font-weight: 400; } .stock-modal__empty { margin: 10px 0 0; min-height: 18px; font-size: 13px; color: var(--c-text-muted, #8A8A8A); } .stock-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; } /* The other way in: scanning the tag with a phone, for one not in stock. */ .stock-modal__foot .btn-primary:disabled { opacity: .5; cursor: default; } /* The row that holds it, so the button is not a flex item among the id pills and cannot be pulled into their line. */ .id-add-row { display: flex; margin: 14px 0 16px; } /* The hero photo fills a box whose height follows the column beside it, so adding a second tag made the box taller and `cover` re-cropped the picture -- the animal slid out of frame. Anchoring the crop above centre keeps the head in view as the box grows, which is where a pet photo puts it. */ .hero__photo img { object-position: center 30%; } /* The pill anchors the panel that drops out of it. */ .id-pill-wrap { position: relative; display: inline-block; max-width: 100%; } /* The count sits inside the pill, after the copy button: it belongs to this identifier, and standing outside it read as an unrelated control. */ .id-more { flex: 0 0 auto; margin-left: 2px; padding: 4px 8px; border: 0; border-radius: var(--r-pill, 999px); background: rgba(0, 0, 0, .06); color: var(--c-text-muted, #5C5C5C); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .id-more:hover { background: var(--c-brand-green-050, #EAF5EC); color: var(--c-brand-green-600, #4E9D57); } /* Hangs directly off the pill: any visible gap made it read as a separate block that happened to sit underneath. */ .tags-panel { position: absolute; top: calc(100% + 2px); left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 100%; width: max-content; max-width: 100%; padding: 0; border-radius: var(--r-md, 12px); background: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, .12); overflow: hidden; } .tags-panel[hidden] { display: none; } /* The pills inside lose their own outline -- stacked, each border met the next one and the list turned into a ladder of boxes. A single divider is left under a row only while another row follows it. */ /* Prefixed with body.public-page to outweigh the dashed outline the tag pill gets there -- that rule carries an element as well as two classes, so a plain .tags-panel .id-pill lost to it and the dashes stayed. */ body.public-page .tags-panel .id-pill--tag { width: 100%; max-width: none; border: 0; border-radius: 0; background: transparent; } body.public-page .tags-panel .id-pill--tag:not(:last-child) { border-bottom: 1px solid var(--c-brand-dark-100, #E5E5E5); } .tags-panel .id-pill:hover { background: #F7F7F7; } /* .id-pill carries an 18px bottom margin, which the wrapper inherited as height -- so the panel, anchored to the wrapper's bottom, opened that far below the pill however small its own offset was. The margin moves to the wrapper, where it still spaces the block from what follows. */ .id-pill-wrap { margin-bottom: 18px; } /* Both the pill itself and the rows inside the panel: the earlier rule only reached direct children of the wrapper, so every row in the panel kept its 18px and left that much empty space under the last one. */ .id-pill-wrap .id-pill { margin-bottom: 0; } /* ── Writing, liking and commenting ────────────────────────────────── The wall was read-only here while the classic page had all three. These are the controls for them; the endpoints behind are unchanged. ------------------------------------------------------------------- */ .pp-composer { margin: 12px 0 16px; padding: 12px; border: 1px solid var(--c-border, #E5E5E5); border-radius: var(--r-md, 12px); } .pp-composer__text { width: 100%; border: 0; resize: vertical; font: inherit; font-size: 14px; line-height: 1.5; } .pp-composer__text:focus { outline: none; } .pp-composer__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; } .pp-composer__privacy { padding: 7px 10px; border: 1px solid var(--c-border, #E5E5E5); border-radius: var(--r-sm, 8px); font: inherit; font-size: 13px; } .pp-composer__send { padding: 9px 18px; border: 0; border-radius: var(--r-md, 12px); background: var(--c-brand-green-600, #4E9D57); color: #fff; font: inherit; font-weight: 700; cursor: pointer; } /* The like is the one control here that changes something with a single click, so it is the only one that carries colour when it is on. */ .pp-post__like { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 0; border-radius: var(--r-pill, 999px); background: transparent; color: var(--c-text-muted, #8A8A8A); font: inherit; font-size: 12px; cursor: pointer; } .pp-post__like svg { width: 15px; height: 15px; } .pp-post__like:hover:not(:disabled) { background: #F7F7F7; } .pp-post__like:disabled { cursor: default; } .pp-post__like.is-on { color: #D93838; } .pp-post__like.is-on svg { fill: #D93838; stroke: #D93838; } .pp-post__count { font-size: 12px; color: var(--c-text-muted, #8A8A8A); } .pp-comments { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-border, #E5E5E5); } .pp-comment { margin-bottom: 8px; } .pp-comment__author { font-size: 13px; font-weight: 700; } .pp-comment__date { margin-left: 6px; font-size: 11px; color: var(--c-text-muted, #8A8A8A); } .pp-comment__text { margin: 2px 0 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; } .pp-comment-form { display: flex; gap: 8px; margin-top: 8px; } .pp-comment-form input { flex: 1 1 auto; min-width: 0; padding: 8px 12px; border: 1px solid var(--c-border, #E5E5E5); border-radius: var(--r-pill, 999px); font: inherit; font-size: 13px; } .pp-comment-form input:focus { outline: none; border-color: var(--c-brand-green-600, #4E9D57); } .pp-comment-form button { padding: 8px 14px; border: 0; border-radius: var(--r-pill, 999px); background: var(--c-brand-dark-050, #F0F0F0); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } /* ── Owner contacts dropdown ───────────────────────────────────────── The list inside comes from the classic partial, which was styled by the legacy stylesheet: on this shell its headings rendered at browser default and the rows had no shape at all. These rules dress that markup without touching it, since the same partial still serves the old page. ------------------------------------------------------------------- */ /* Each group -- phones, messengers -- and the address block below them. */ .contact-menu .main-button_call__item, .contact-menu .residence { padding: 8px 6px; } .contact-menu .main-button_call__item + .main-button_call__item, .contact-menu .residence { border-top: 1px solid var(--c-border, #E5E5E5); } /* The partial writes these as h4, which arrived at heading size and made a contact list look like a page of sections. */ .contact-menu h4 { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted, #8A8A8A); } .contact-menu a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-sm, 8px); color: var(--c-text, #1D1D1D); font-size: 14px; text-decoration: none; overflow-wrap: anywhere; } .contact-menu a:hover { background: #F5F9F5; } .contact-menu .main-button_call__item_icon { width: 20px; height: 20px; flex: 0 0 auto; object-fit: contain; } .contact-menu .main-button_call__item_number, .contact-menu .main-button_call__item_name { display: flex; align-items: center; gap: 10px; min-width: 0; } /* Address: label above value, like the details grid on the page itself. */ .contact-menu .residence-content { padding: 4px 8px; } .contact-menu .residence-title { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-muted, #8A8A8A); } .contact-menu .residence-value { font-size: 14px; overflow-wrap: anywhere; } /* ---- "Wanted" stripe across the foot of the hero picture --------------- The banner that says the animal is being looked for sits above the card, which a finder scrolling straight to the face can miss. The stripe rides the picture itself, so it travels with what they are actually looking at. */ .hero__wanted { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 9px 12px; background: var(--c-status-danger-500, #D93838); color: #fff; font: 800 12.5px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; text-align: center; } /* ---- Premium offer under the tag --------------------------------------- Reads as a line of copy with a crown, not as a control: nothing on the tag changes by clicking it, it opens the subscription page. */ .pp-tag-offer { display: flex; align-items: center; gap: 6px; margin-top: 10px; font: 600 12.5px/1.35 var(--font-sans); } .pp-tag-offer img { width: 14px; height: 14px; flex-shrink: 0; } .pp-tag-offer a { color: var(--c-brand-green-600, #4E9D57); text-decoration: underline; text-underline-offset: 2px; } /* ---- Typing a chip number in the stock dialog -------------------------- */ .stock-modal__manual { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; padding-top: 12px; border-top: 1px dashed var(--c-border, #E6E8EA); } .stock-modal__manual label { margin: 0; font: 700 11.5px/1.2 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--c-brand-dark-300, #7A8794); } .stock-modal__manual input { width: 100%; padding: 10px 12px; border: 1px solid var(--c-border, #E6E8EA); border-radius: var(--r-sm, 8px); font: inherit; font-size: 14px; } /* ---- The pet card is a link now --------------------------------------- It leads back to the animal, which is what the item under it used to do while calling itself "owner profile". */ a.side-nav__pet { text-decoration: none; color: inherit; border-radius: var(--r-sm, 8px); transition: background-color .12s; } a.side-nav__pet:hover { background: var(--c-brand-green-050, #F5F9F5); } a.side-nav__pet.is-active .side-nav__pet-name { color: var(--c-brand-green-600, #4E9D57); } /* ---- The column on a phone ------------------------------------------- Both navs turned into one horizontal scroller. That works for three section chips; it breaks for the management list, which carries group captions and labels as long as "Share with my organizations" -- those ran off the right edge with nothing to suggest they were there. The sections stay a strip, the management list becomes an ordinary list. */ @media (max-width: 767px) { /* Nothing of the pet card here: the name is the page heading and the breadcrumb already, and the avatar next to it is the photo you are looking at. The strip is the three sections, nothing else. */ a.side-nav__pet { display: none; } .side-nav__item { white-space: nowrap; } } /* ---- Owner actions, as rows in the card of what they act on ----------- From the approved draft (04-owner-view.html). They replace the menu that used to stand in the column beside the photo: on a phone that menu filled the first screen, so the animal itself began below the fold. */ /* Editing the animal is an action on the animal, so it sits in the hero. */ .ow-edit { display: inline-flex; align-items: center; gap: 6px; /* Right of the row, as in the draft: it is a quiet action on the animal, not something to run into before the animal's own facts. */ margin-left: auto; padding: 9px 14px; border: 1px solid var(--c-brand-dark-050, #E6E8EA); border-radius: var(--r-pill, 999px); background: var(--c-white, #fff); font: 700 12.5px/1 var(--font-sans); color: var(--c-brand-dark-700, #2C3A31); transition: background 120ms var(--ease-standard), border-color 120ms var(--ease-standard); } .ow-edit:hover { background: var(--c-brand-green-050, #F5F9F5); border-color: var(--c-brand-green-200, #BFDCC4); color: var(--c-brand-dark-700, #2C3A31); } .ow-edit svg { width: 13px; height: 13px; } .ow-card-cap { margin: 2px 0 4px; font: 500 12.5px/1.5 var(--font-sans); color: var(--c-brand-dark-500, #5C6B61); } .ow-rows { display: flex; flex-direction: column; } .ow-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; text-align: left; } .ow-row + .ow-row { border-top: 1px solid var(--c-brand-dark-025, #F0F2F0); } .ow-row__icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: var(--c-brand-green-050, #F5F9F5); color: var(--c-brand-green-600, #4E9D57); display: grid; place-items: center; } .ow-row__icon svg { width: 18px; height: 18px; } .ow-row__meta { flex: 1; min-width: 0; } .ow-row__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 14px/1.3 var(--font-sans); color: var(--c-brand-dark-700, #2C3A31); } .ow-row__hint { display: block; margin-top: 2px; font: 500 12px/1.45 var(--font-sans); color: var(--c-brand-dark-500, #5C6B61); } .ow-badge { flex-shrink: 0; padding: 3px 7px; border-radius: var(--r-pill, 999px); background: var(--c-brand-yellow-100, #FDF3D7); color: var(--c-brand-yellow-600, #9A7413); font: 800 9.5px/1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; } .ow-status { flex-shrink: 0; padding: 4px 9px; border-radius: var(--r-pill, 999px); font: 700 11px/1 var(--font-sans); /* A chip may carry the number itself, which is long and monospaced. */ overflow-wrap: anywhere; } .ow-status--off { background: var(--c-brand-dark-025, #F0F2F0); color: var(--c-brand-dark-500, #5C6B61); } .ow-status--on { background: var(--c-brand-green-100, #E3F1E5); color: var(--c-brand-green-600, #4E9D57); } /* The button on the right: a word for the card's main action, a plus for adding one more, a chevron for going somewhere. */ .ow-act { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer; font: 700 12.5px/1 var(--font-sans); transition: filter 120ms var(--ease-standard), background 120ms var(--ease-standard); } .ow-act--primary { min-height: 36px; padding: 0 16px; border-radius: var(--r-pill, 999px); background: var(--c-brand-green-500, #5AAE63); color: var(--c-white, #fff); } .ow-act--primary:hover { filter: brightness(1.05); color: var(--c-white, #fff); } .ow-act--plus { width: 36px; height: 36px; border-radius: 50%; background: var(--c-brand-green-050, #F5F9F5); color: var(--c-brand-green-600, #4E9D57); border: 1px solid var(--c-brand-green-200, #BFDCC4); } .ow-act--plus:hover { background: var(--c-brand-green-100, #E3F1E5); } .ow-act--plus svg { width: 15px; height: 15px; } .ow-act--chev { width: 36px; height: 36px; border-radius: 50%; background: transparent; color: var(--c-brand-dark-300, #8A968D); } .ow-act--chev:hover { background: var(--c-brand-dark-025, #F0F2F0); color: var(--c-brand-dark-700, #2C3A31); } .ow-act--chev svg { width: 16px; height: 16px; } @media (max-width: 767px) { .ow-row { gap: 12px; } .ow-row__icon { width: 34px; height: 34px; border-radius: 10px; } /* The hint is what makes a row understandable, so it keeps its width and the action drops under it rather than squeezing the text to a column. */ .ow-row__hint { font-size: 12px; } } /* ---- Calling the owner from the contact list -------------------------- The phone row is a tel: link, which on a phone dials. Nothing said so, so it read as one more line of text; this is the affordance. */ .contact-menu__row--phone { align-items: center; } .contact-menu__call { margin-left: auto; flex-shrink: 0; padding: 5px 12px; border-radius: var(--r-pill, 999px); background: var(--c-brand-green-500, #5AAE63); color: #fff; font: 800 11.5px/1 var(--font-sans); } .contact-menu a:hover .contact-menu__call { background: var(--c-brand-green-600, #4E9D57); } /* ---- What a finder is offered ---------------------------------------- The draft's row: two buttons side by side. Each carries the line that says who it reaches directly underneath -- gathered at the foot of the block, the two lines belonged to nothing in particular, and once the row wraps on a phone they ended up under the wrong button entirely. */ .hero__action { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 320px; } .hero__actions .hero__note { margin: 0; } /* The list is absolute, so it hangs off the nearest positioned ancestor. That used to be the whole actions block, which dropped it below the second button and its line; this anchors it to the button it belongs to. */ .hero__anchor { position: relative; display: inline-flex; } .hero__anchor .contact-menu { min-width: 260px; max-width: 320px; } @media (max-width: 575px) { /* Narrow screens: the list matches the button rather than running past the edge of the card. */ .hero__anchor, .hero__anchor .btn-primary { width: 100%; } .hero__anchor .contact-menu { min-width: 0; max-width: none; width: 100%; } } .contact-menu__row--phone { align-items: center; } .contact-menu__call { margin-left: auto; flex-shrink: 0; padding: 5px 12px; border-radius: var(--r-pill, 999px); background: var(--c-brand-green-500, #5AAE63); color: #fff; font: 800 11.5px/1 var(--font-sans); } .contact-menu a:hover .contact-menu__call { background: var(--c-brand-green-600, #4E9D57); } /* ---- What a finder is offered, in the order they should read it ------- Two buttons, stacked: the green one drops the owner's contacts out of itself, the red one opens support and says so underneath. */ .hero__actions--stack { display: flex; flex-direction: column; align-items: stretch; gap: 6px; } .hero__actions--stack .btn-primary { width: 100%; max-width: 420px; } .hero__actions--stack .hero__note { margin: 0 0 8px; max-width: 420px; } /* The list drops below both buttons rather than out of one button's edge: stacked, that edge is the middle of the block. */ .hero__actions--stack .contact-menu { top: 100%; width: 100%; max-width: 420px; min-width: 0; padding: 6px; } .contact-menu__row--phone { align-items: center; } .contact-menu__call { margin-left: auto; flex-shrink: 0; padding: 5px 12px; border-radius: var(--r-pill, 999px); background: var(--c-brand-green-500, #5AAE63); color: #fff; font: 800 11.5px/1 var(--font-sans); } .contact-menu a:hover .contact-menu__call { background: var(--c-brand-green-600, #4E9D57); } /* ---- What a finder is offered, in the order they should read it ------- The green action is first and is the only one that reaches the owner; the red one opens support and says so; the contacts sit below, visible rather than hidden behind a caret on a button. */ .hero__actions--stack { display: flex; flex-direction: column; align-items: stretch; gap: 6px; } .hero__actions--stack .btn-primary { width: 100%; max-width: 420px; } .hero__actions--stack .hero__note { margin: 0 0 8px; max-width: 420px; } /* ---- The scrollbar is not allowed to move the page --------------------- .page-shell is centred in the viewport, so the viewport getting 15px narrower or wider moves it by half of that. The edit form's Origin toggle hides a whole block of fields, which is enough to take the page from scrolling to not scrolling -- and the layout jumped sideways each time it was flipped. Reserving the gutter keeps the width constant whether the page scrolls or not. */ html:has(body.public-page) { scrollbar-gutter: stable; } /* The tag dialog's second route: the tag is in the viewer's hand, so it is read by scanning rather than picked off a shelf. */ .stock-modal__scan { width: 100%; padding: 10px 14px; border: 1.5px solid var(--c-brand-green-600, #4E9D57); border-radius: var(--r-pill, 999px); background: #fff; color: var(--c-brand-green-600, #4E9D57); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; } .stock-modal__scan:hover { background: var(--c-brand-green-050, #F5F9F5); } /* The dialog hides whichever block belongs to the other mode. */ .stock-modal__manual[hidden] { display: none; } /* ── Writing to the owner ────────────────────────────────────────────────── Its own block rather than a borrowed one: the edit form's styles are built around that form's two-column grid, and this is one column of three fields. Everything else on the page is the profile's own cards. */ body.public-page .contact-owner { max-width: 640px; margin: 0 auto; } body.public-page .contact-owner__pet { display: flex; align-items: center; gap: 14px; padding: 14px 0 18px; } body.public-page .contact-owner__photo { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; } body.public-page .contact-owner__pet p { margin: 4px 0 0; font-size: 14px; color: var(--c-brand-dark-400, #6B7A70); line-height: 1.5; } body.public-page .contact-owner__form .form-group { margin-bottom: 16px; } body.public-page .contact-owner__form label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--c-brand-dark-500, #4A574F); } body.public-page .contact-owner__form .form-control, body.public-page .contact-owner__form input[type="text"], body.public-page .contact-owner__form input[type="tel"], body.public-page .contact-owner__form input[type="email"], body.public-page .contact-owner__form textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--c-brand-dark-075, #E2E7E4); border-radius: var(--r-md, 12px); font: inherit; font-size: 15px; background: #fff; color: var(--c-brand-dark-700, #33413A); } body.public-page .contact-owner__form textarea { resize: vertical; min-height: 120px; } body.public-page .contact-owner__form .form-control:focus, body.public-page .contact-owner__form textarea:focus { outline: none; border-color: var(--c-brand-green-500, #5BAF66); } body.public-page .contact-owner__form .help-block { margin: 6px 0 0; font-size: 13px; color: var(--c-status-danger-600, #C4453C); } body.public-page .contact-owner__captcha { margin: 4px 0 18px; } body.public-page .contact-owner__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* The quiet half of the pair -- cancel should not compete with send. */ body.public-page .btn-ghost { display: inline-flex; align-items: center; padding: 12px 20px; border: 1.5px solid var(--c-brand-dark-075, #E2E7E4); border-radius: var(--r-pill, 999px); background: #fff; font-size: 14px; font-weight: 600; color: var(--c-brand-dark-500, #4A574F); text-decoration: none; } body.public-page .btn-ghost:hover { border-color: var(--c-brand-dark-100, #D3DAD6); color: var(--c-brand-dark-700, #33413A); text-decoration: none; } @media (max-width: 575px) { body.public-page .contact-owner__actions .btn-primary, body.public-page .contact-owner__actions .btn-ghost { width: 100%; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════ FINDER FLOW — lifted from the design draft 02_Products/_drafts/public-pet-profile/01-profile.html + styles.css (Vadim's revision after the 2026-08-27 review) The review's answer to "four competing calls to action" is not a smaller number of buttons on the page -- it is one action, "I found this pet", with everything else folded into it. Location became the first step of that action instead of a section on the page or a dialog in front of it; reaching the owner became the second. The sticky bar carries the same action rather than a competing wording, and the support bubble waits half a minute so it stops reading as "message the owner". Kept close to the draft so the two do not drift; what is dropped is only what the prototype needed of itself. ═══════════════════════════════════════════════════════════════ */ /* The sticky bar is back, carrying the hero's action rather than a second wording of its own. */ .m-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-top: 1px solid var(--c-brand-dark-050); } .m-cta .btn-primary { width: 100%; padding: 15px 20px; justify-content: center; } @media (max-width: 767px) { .m-cta { display: block; } .has-m-cta { padding-bottom: 96px; } } .fp-overlay { position: fixed; inset: 0; background: rgba(10, 38, 32, .55); display: none; align-items: flex-end; justify-content: center; /* Above the site's own chrome. The draft's 80 was written for a page with no header; here .utility-bar sits at 1001 and .main-navbar at 1000, and together they are 133px tall -- so on any window short enough to centre the sheet higher than that, the two of them were painted straight over its title and close button. Same value the photo editor already uses. */ z-index: 1200; padding: 0; } .fp-overlay.is-open { display: flex; } @media (min-width: 768px) { .fp-overlay { align-items: center; padding: 24px; } } .fp-sheet { background: var(--c-white); width: 100%; max-width: 440px; border-radius: 20px 20px 0 0; padding: 20px 20px calc(env(safe-area-inset-bottom) + 20px); max-height: 88dvh; overflow-y: auto; } @media (min-width: 768px) { .fp-sheet { border-radius: 20px; padding-bottom: 22px; } } .fp-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--c-brand-dark-050); margin: 0 auto 14px; } @media (min-width: 768px) { .fp-grab { display: none; } } .fp-head { display: flex; align-items: flex-start; gap: 12px; } .fp-head__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--c-brand-green-050); color: var(--c-brand-green-600); display: grid; place-items: center; } .fp-head__icon svg { width: 22px; height: 22px; } .fp-title { margin: 2px 0 2px; font: 800 19px/1.25 var(--font-sans); color: var(--c-brand-dark-800); } .fp-sub { margin: 0; font: 500 13px/1.5 var(--font-sans); color: var(--c-brand-dark-400); } .fp-close { margin-left: auto; flex-shrink: 0; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--c-brand-dark-015); color: var(--c-brand-dark-500); display: grid; place-items: center; cursor: pointer; } .fp-close svg { width: 14px; height: 14px; } .fp-field { margin-top: 16px; } .fp-label { display: block; font: 700 11px/1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--c-brand-dark-400); margin-bottom: 7px; } .fp-label small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--c-brand-dark-300); } .fp-textarea { width: 100%; min-height: 76px; resize: vertical; border: 1.5px solid var(--c-brand-dark-050); border-radius: var(--r-md); padding: 11px 12px; font: 500 14px/1.45 var(--font-sans); color: var(--c-brand-dark-800); background: var(--c-white); } .fp-textarea:focus { outline: none; border-color: var(--c-brand-green-500); box-shadow: 0 0 0 3px rgba(78,157,87,.15); } /* location attach */ /* owner contacts — PUBLIC state only (mirrors owner-side finder card) */ .fp-contacts { display: none; margin-top: 14px; flex-direction: column; gap: 8px; } .fp-overlay[data-contacts="public"] .fp-contacts { display: flex; } .fp-contacts__cap { font: 700 11px/1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--c-brand-dark-400); } .fp-crow { display: flex; align-items: center; gap: 10px; background: var(--c-brand-dark-015); border-radius: var(--r-md); padding: 10px 12px; } .fp-crow__icon { width: 32px; height: 32px; border-radius: 50%; background: var(--c-white); color: var(--c-brand-green-600); display: grid; place-items: center; flex-shrink: 0; } .fp-crow__icon svg { width: 15px; height: 15px; } .fp-crow__meta { min-width: 0; } .fp-crow__cap { font: 600 10px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--c-brand-dark-300); } .fp-crow__val { font: 700 13.5px/1.3 var(--font-sans); color: var(--c-brand-dark-800); overflow-wrap: anywhere; } .fp-crow__act { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; background: var(--c-brand-green-500); color: var(--c-white); border-radius: 999px; padding: 8px 14px; font: 700 12.5px/1 var(--font-sans); text-decoration: none; } .fp-crow__act svg { width: 13px; height: 13px; } .fp-send { margin-top: 16px; width: 100%; min-height: 52px; border: 0; border-radius: 999px; background: var(--c-brand-green-500); color: var(--c-white); font: 800 15px/1 var(--font-sans); cursor: pointer; box-shadow: 0 8px 20px rgba(78,157,87,.35); } .fp-send:active { transform: translateY(1px); } .fp-note { margin: 10px 0 0; text-align: center; font: 500 11.5px/1.4 var(--font-sans); color: var(--c-brand-dark-300); } /* success state */ .fp-success { display: none; text-align: center; padding: 8px 4px 4px; } .fp-overlay.is-sent .fp-form { display: none; } .fp-overlay.is-sent .fp-success { display: block; } .fp-success__icon { width: 56px; height: 56px; margin: 6px auto 12px; border-radius: 50%; background: var(--c-brand-green-500); color: #fff; display: grid; place-items: center; } .fp-success__icon svg { width: 26px; height: 26px; } .fp-success h3 { margin: 0 0 6px; font: 800 18px/1.3 var(--font-sans); color: var(--c-brand-dark-800); } .fp-success p { margin: 0; font: 500 13px/1.5 var(--font-sans); color: var(--c-brand-dark-400); } /* ═══════════════════════════════════════════════════════════════ FINDER-ФЛОУ · КРОКИ (правки за фідбеком 2026-08-27) Локація стала ПЕРШИМ кроком дії «I found this pet», а не секцією на сторінці й не блокуючим попапом до неї (п.2 фідбеку). Стилі старої опційної кнопки .fp-loc лишаються для сумісності, але в 01-profile більше не використовуються. ═══════════════════════════════════════════════════════════════ */ /* індикатор кроків */ .fp-steps { display: flex; gap: 6px; margin: 14px 0 4px; } .fp-steps i { height: 3px; flex: 1; border-radius: 999px; background: var(--c-brand-dark-050); transition: background 200ms var(--ease-standard); } .fp-steps i.is-on { background: var(--c-brand-green-500); } .fp-step[hidden] { display: none; } /* крок 1 — велика кнопка «поділитись локацією» */ .fp-locbig { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 18px; padding: 18px; border: 1.5px solid var(--c-brand-green-500); border-radius: 16px; background: var(--c-brand-green-050); text-align: left; cursor: pointer; transition: filter 120ms var(--ease-standard); } .fp-locbig:hover { filter: brightness(.98); } .fp-locbig[hidden] { display: none; } .fp-locbig__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--c-brand-green-500); color: #fff; display: grid; place-items: center; } .fp-locbig__icon svg { width: 21px; height: 21px; } .fp-locbig__t { display: block; font: 800 15px/1.25 var(--font-sans); color: var(--c-brand-dark-700); } .fp-locbig__m { display: block; margin-top: 3px; font: 500 12px/1.45 var(--font-sans); color: var(--c-brand-dark-500); } /* підтверджена локація */ .fp-locmap { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--c-brand-green-500); border-radius: 14px; background: var(--c-white); } .fp-locmap[hidden] { display: none; } .fp-locmap__pin { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--c-brand-green-050); color: var(--c-brand-green-600); display: grid; place-items: center; } .fp-locmap__pin svg { width: 17px; height: 17px; } .fp-locmap b { display: block; font: 700 13.5px/1.3 var(--font-sans); color: var(--c-brand-dark-700); } .fp-locmap small { display: block; margin-top: 2px; font: 500 11.5px/1.35 var(--font-sans); color: var(--c-brand-dark-400); } .fp-locmap__redo { margin-left: auto; flex-shrink: 0; background: none; border: 0; cursor: pointer; font: 700 12px/1 var(--font-sans); color: var(--c-brand-green-700); text-decoration: underline; } /* пропуск / перехід далі */ .fp-skip { display: block; width: 100%; margin-top: 14px; padding: 13px; background: none; border: 0; cursor: pointer; font: 600 13.5px/1.2 var(--font-sans); color: var(--c-brand-dark-400); } .fp-skip:hover { color: var(--c-brand-dark-700); } .fp-skip--go { border-radius: 999px; background: var(--c-brand-green-500); color: #fff; font-weight: 800; font-size: 15px; padding: 15px; box-shadow: 0 6px 16px rgba(78,157,87,.28); } .fp-skip--go:hover { color: #fff; filter: brightness(1.04); } /* відлуння локації на кроці 2 */ .fp-locecho { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 14px; border-radius: 999px; background: var(--c-brand-green-050); font: 700 12px/1.3 var(--font-sans); color: var(--c-brand-green-700); } .fp-locecho[hidden] { display: none; } .fp-locecho button { margin-left: auto; background: none; border: 0; cursor: pointer; font: 600 12px/1 var(--font-sans); color: var(--c-brand-green-700); text-decoration: underline; } /* ── ID-пілюля, перенесена в Animal details ─────────────────── */ .id-pill--inline { margin-top: 18px; } /* ── Чат-віджет підтримки: показ із затримкою ──────────────── Рішення Dima: віджет не з'являється одразу — він конкурував із головною дією й читався як «підтримка сервісу» замість зв'язку з власником. Тепер вмикається через 30 с і ховається, поки відкритий finder-флоу. */ .chat-fab { position: fixed; right: 18px; bottom: 84px; z-index: 60; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--c-brand-dark-700); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 24px rgba(0,0,0,.22); opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none; transition: opacity 260ms var(--ease-standard), transform 260ms var(--ease-standard); } .chat-fab svg { width: 22px; height: 22px; } .chat-fab.is-shown { opacity: 1; transform: none; pointer-events: auto; } .chat-fab.is-hidden { opacity: 0 !important; transform: translateY(10px) scale(.9) !important; pointer-events: none !important; } @media (min-width: 768px) { .chat-fab { bottom: 24px; } } /* The sheet answers in place now. It used to be a browser alert, which on a phone is a grey system box over a page the finder has not finished with. */ .fp-error { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #F3C2BE; border-radius: 12px; background: #FDF1F0; color: #A4322A; font: 500 13px/1.4 var(--font-sans); } /* Google's widget is 302px wide and the sheet can be narrower, so the row scrolls sideways on a small phone. `line-height: 0` is what keeps that from costing a second scrollbar: the widget is an inline iframe, so the line box under it added six pixels the container did not count, and naming overflow on one axis makes the other compute to `auto`. */ #fpCaptcha { margin-bottom: 12px; max-width: 100%; line-height: 0; overflow-x: auto; overflow-y: hidden; } /* — The sheet on a desktop window that is not tall — Below about 700px of viewport the content no longer fits, and the sheet scrolled as a single piece: the title and the close button left the screen and what stayed was a white slab with a system scrollbar down its side. The head now holds its place and only the body under it moves. */ @media (min-width: 768px) { /* The sheet's own top padding moves onto the head. A sticky offset is measured from the scrollport's padding edge, so with padding left on the sheet the head would come to rest 20px down and the text scrolling past would show in the gap above it. */ .fp-sheet { padding-top: 0; } .fp-head { position: sticky; top: 0; z-index: 2; margin: 0 -20px; padding: 20px 20px 12px; background: var(--c-white); border-radius: 20px 20px 0 0; /* Only once it is holding its place: at rest a line under the title is one border too many. */ box-shadow: 0 1px 0 var(--c-brand-dark-050); } .fp-sheet { scrollbar-width: thin; scrollbar-color: var(--c-brand-dark-050) transparent; } .fp-sheet::-webkit-scrollbar { width: 10px; } .fp-sheet::-webkit-scrollbar-track { background: transparent; } .fp-sheet::-webkit-scrollbar-thumb { background: var(--c-brand-dark-050); border: 3px solid var(--c-white); border-radius: 999px; } } /* The sheet follows the finger and springs back if the pull was not enough. */ .fp-sheet { transition: transform .18s ease-out; } @media (min-width: 768px) { .fp-sheet { transition: none; } } /* A handle people pull needs to look like one and take a thumb-sized hit. */ .fp-grab { height: 5px; width: 44px; background: var(--c-brand-dark-100, #C9D2CE); cursor: grab; }