/* ===================================================================== * THE OFF-MARKET PROPERTY CARD. * * Paired with inc/property_card_passport.php. Everything is namespaced * .hbpp- because this card renders in the same grid as the ordinary listing * card, whose own styles live inline in property.php and in three AJAX * re-painters — a bare .tile or .stat here would reach into all of them. * * The card is dark by design rather than by inheritance: it is painted on * pages with and without a dark shell, so every colour it depends on is * stated, not borrowed. * ===================================================================== */ /* BORDER-BOX, STATED RATHER THAN INHERITED. Most of the site sets this globally; this card also paints on pages that do not, and there a padded input or button is wider and taller than the box it was given -- the order sheet's email field overhung its own panel. */ .hbpp-card, .hbpp-card *, .hbppv, .hbppv *, .hbppo, .hbppo * { box-sizing: border-box; } .hbpp-card { --hbpp-ink: #061121; --hbpp-panel: #0C1B2E; --hbpp-raised: #12253C; --hbpp-line: rgba(148, 176, 209, .16); --hbpp-line-2: rgba(148, 176, 209, .28); --hbpp-text: #F3F7FB; --hbpp-muted: #94A9BF; --hbpp-gold: #EBD8B0; --hbpp-gold-line: rgba(235, 216, 176, .55); --hbpp-red: #E4322B; /* THE CARD SIZES ITS OWN CONTENTS. It is painted three-up, two-up and one-up by the same grid, so a card is anywhere from ~340px to ~520px wide. Fixed type held the design together at one of those widths and broke the four-across strips at the others -- captions ellipsized to "Property Ae...". Everything inside is therefore sized in cqw against this box, which keeps the design's proportions at every column count, with clamps so it never becomes unreadable. */ container-type: inline-size; position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; /* THE CARD HAS TO TERMINATE, NOT FADE OUT. * * This was a flat #061121 panel with a 1px line at 16% and a 46px black * blur. In a 3-up grid that reads as one continuous smear: the page behind * is nearly the same colour, so the edge was invisible, and a 46px blur is * wider than the 24px gutter, so each card's shadow washed straight over * its neighbour. Cards appeared to overlap when the geometry never did. * * Fixed the way the site's own .property-card2 already solves it — the * two are siblings in the same grid and share its construction. Light * comes from the top left: the top and left borders are bright gold, the * bottom and right nearly absent, so the panel looks lit rather than * outlined. The hard 3px/5px gold offset gives a crisp terminating edge no * blur can smudge, and the black blur is pulled in under the gutter width * so it darkens the ground beneath the card instead of the card beside it. * * THE FRAME IS BLUE, NOT GOLD. The lit-edge construction is still shared * with .property-card2, but the colour no longer is: gold is the Housbe * listing's frame, and an imported record wearing the same one is what * made the two kinds of card hard to tell apart in a mixed grid. The * origin band at the top of each card (hb_origin_band()) says it in words; * the frame says it at a glance. */ background: radial-gradient(ellipse at top left, rgba(127, 188, 255, .14) 0%, transparent 55%), radial-gradient(ellipse at bottom right, rgba(43, 93, 153, .14) 0%, transparent 55%), linear-gradient(160deg, #0E1E37 0%, var(--hbpp-ink) 100%); border-top: 1px solid rgba(127, 188, 255, .70); border-left: 1px solid rgba(127, 188, 255, .48); border-right: 1px solid rgba(127, 188, 255, .12); border-bottom: 1px solid rgba(127, 188, 255, .06); box-shadow: 3px 5px 0 rgba(52, 116, 190, .50), 4px 7px 8px rgba(0, 0, 0, .55), 0 10px 20px rgba(0, 0, 0, .40), 0 0 26px rgba(110, 170, 240, .26), inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease; color: var(--hbpp-text); font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; } /* Lifts toward the light rather than scaling: .property-card2 scales 1.02, which on a card carrying four map tiles resamples every one of them. */ .hbpp-card:hover { transform: translateY(-6px); box-shadow: 3px 5px 0 rgba(52, 116, 190, .60), 4px 7px 10px rgba(0, 0, 0, .58), 0 16px 28px rgba(0, 0, 0, .45), 0 0 38px rgba(110, 170, 240, .38), inset 0 1px 0 rgba(255, 255, 255, .22); } /* ---------------------------------------------------------------- hero */ .hbpp-hero { position: relative; aspect-ratio: 21 / 9; min-height: 150px; overflow: hidden; /* Matches the card's own radius less its border, so the image follows the gold edge into the corner instead of squaring it off. */ border-radius: 19px 19px 0 0; background: var(--hbpp-panel); } .hbpp-hero-img { width: 100%; height: 100%; object-fit: cover; /* Biased below centre: these are exterior shots where the building sits on the lower two thirds and the top third is sky. Centring cropped the roof and kept the sky. */ object-position: center 58%; display: block; } /* The gradient is what makes white text legible over an arbitrary photograph. Both ends are painted, because the badge sits over the top of the picture and the disclosure over the bottom of it. */ .hbpp-hero-fade { position: absolute; inset: 0; pointer-events: none; /* Deeper at both ends than it was: the disclosure now sits at the very top edge and the tagline at the very bottom, so each needs ground under it on an arbitrary photograph rather than on the one this was tuned against. */ background: linear-gradient(180deg, rgba(6, 17, 33, .86) 0%, rgba(6, 17, 33, .30) 22%, rgba(6, 17, 33, 0) 42%), linear-gradient(0deg, rgba(6, 17, 33, .92) 0%, rgba(6, 17, 33, .34) 20%, rgba(6, 17, 33, 0) 46%); } .hbpp-badge { position: absolute; /* Clears the disclosure line above it. That line starts at 5px and is at most 7px at 1.3 line-height, so it ends by ~14px; the badge starts below that rather than being nudged by eye. It came up with the note each time the note shrank — leaving it lower would open a gap the hero has nothing to put in. */ top: 18px; left: 0; /* Bounded so it can never slide under the action rail on a narrow card. */ max-width: calc(100% - 104px); display: flex; align-items: center; gap: 9px; padding: 8px 16px 8px 13px; border-radius: 0 24px 24px 0; background: linear-gradient(100deg, #8C1119 0%, #5B0D14 100%); border: 1px solid rgba(235, 216, 176, .30); border-left: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); } .hbpp-badge i { font-size: 15px; color: var(--hbpp-gold); flex: none; } .hbpp-badge span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .hbpp-badge b { font-size: clamp(9.5px, 2.3cqw, 12px); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hbpp-badge em { font-style: normal; font-size: clamp(8.5px, 2.05cqw, 11px); font-weight: 600; color: var(--hbpp-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The action rail. The buttons themselves are the caller's — property.php passes its favourite / quick-view / compare / add-to-chat anchors in — so this styles whatever arrives rather than a fixed set. */ .hbpp-acts { position: absolute; /* Centred against the badge beside it: the badge starts at 18px and stands about 42px tall, so its middle is ~39px; a 38px button centred on that starts at ~20px. */ top: 20px; right: 12px; display: flex; gap: 8px; z-index: 2; } .hbpp-acts .list-btn { display: flex; gap: 8px; margin: 0; padding: 0; } .hbpp-acts a, .hbpp-acts button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: rgba(6, 17, 33, .66); border: 1px solid rgba(235, 216, 176, .34); backdrop-filter: blur(6px); color: var(--hbpp-gold); cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease; } .hbpp-acts a:hover, .hbpp-acts button:hover { background: rgba(12, 27, 46, .92); border-color: var(--hbpp-gold-line); transform: translateY(-1px); } .hbpp-acts i { font-size: 14px; } /* The shared .tooltip spans would otherwise stretch the round buttons. */ .hbpp-acts .tooltip { position: absolute; } /* THE LEGAL LINE, AT THE VERY TOP AND DELIBERATELY QUIET. * * One line, above everything else on the picture. It was two stacked lines at * the bottom, where it competed with the property's own imagery for the eye; * a disclosure does not need to shout, it needs to be present, unmissable * when looked for, and never in the way. Small, single line, ellipsized * rather than wrapped, so it cannot grow into the badge below it on a narrow * card. The badge is positioned to clear it — see .hbpp-badge. */ .hbpp-illus-note { position: absolute; top: 5px; left: 14px; /* Full width. The action rail sits on the row below, so nothing has to be reserved for it — and a legal disclosure that ellipsizes to "Actual property image unav..." on a narrow card is not a disclosure. */ right: 14px; margin: 0; display: block; line-height: 1.3; /* SIZED TO BE READ, WITHOUT SHOUTING. It was 2.2cqw (~9.5px on a three-up card), set a shade under the badge's sub-label so the disclosure stayed legible without competing with it. At that size it still read as a second headline across the top of the hero, so it is pulled back to 1.8cqw — ~7.8px on a three-up card, ~9.5px on a wide one. That is small, deliberately: it is a caption on a picture, and the picture is not the point of the card either. The floor does the real work. It keeps its weight and its dark text-shadow, so it stays readable against any hero. The nowrap and ellipsis stay: it still has to be ONE line that never reaches the action rail. CUT AGAIN, TO 6-7px (2026-09-29). Once the origin band sat above the hero, this line read as a second header strip stacked under it, which is the one thing a caption must not look like. 6px is the floor: the text is still there for anyone who looks, and it no longer competes with the band or the badge. */ font-size: clamp(6px, 1.3cqw, 7px); color: rgba(255, 255, 255, .78); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0, 0, 0, .9); z-index: 3; } .hbpp-illus-note b { font-weight: 800; /* Tracking carries the emphasis the point size no longer can — but tighter than at the old size, because spacing that was right at 9.5px reads as gappy at 6-7px. */ letter-spacing: .06em; text-transform: uppercase; color: #fff; } /* THE PROPOSITION, ALONG THE BOTTOM OF THE PICTURE. * * Centred on one line, inside the image and inset on both sides so it cannot * touch either edge at any card width. It scales with the card like * everything else, and ellipsizes rather than wrapping — a two-line version * of this sentence would sit over the property and stop reading as a caption. */ .hbpp-tagline { position: absolute; left: 14px; right: 14px; bottom: 9px; margin: 0; text-align: center; font-size: clamp(10px, 2.7cqw, 14px); font-weight: 600; line-height: 1.25; color: #EEF4FA; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 5px rgba(0, 0, 0, .95), 0 0 16px rgba(0, 0, 0, .7); z-index: 3; } /* The half that carries the meaning. Red rather than gold: gold is this card's furniture colour and would read as another label. */ .hbpp-tagline b { font-weight: 800; color: #FF6B5A; } /* ---------------------------------------------------------------- body */ .hbpp-body { padding: 12px 14px 16px; display: flex; flex-direction: column; } /* ------------------------------------------------------- aerial strip */ /* THREE ACROSS, NOT FOUR. Six views at four-across left an orphan row of two; at three-across they are two clean rows, and every frame is a third of the card wide instead of a quarter — which is the difference between reading a city and squinting at one. The locked strip below uses the same three columns so the two blocks line up as one grid. */ .hbpp-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 7px; } .hbpp-tile { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 11px; background: var(--hbpp-panel); border: 1px solid var(--hbpp-line); cursor: pointer; text-align: left; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; } .hbpp-tile:hover { border-color: var(--hbpp-gold-line); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .42); } .hbpp-tile:focus-visible { outline: 2px solid var(--hbpp-gold); outline-offset: 2px; } /* The property's own frame leads the strip: it is the one aerial that is unambiguously of this parcel, so it carries the accent the other three pick up only on hover. */ .hbpp-tile:first-child { border-color: var(--hbpp-gold-line); } /* NAIP returns 900x560 for the close frame, 620x460 for the two wider ones and a square for the parcel frame. A 16:10 box is close to the widest of them, so the least is cropped -- and, crucially, it is WIDER than the square parcel source, which is what makes the lot outline below exact. */ .hbpp-tile-fr { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0A1524; } .hbpp-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* THE PROPERTY MARKER, DRAWN RATHER THAN BOUGHT INTO THE IMAGERY. pp_naip_bbox() builds every frame centred on the property's coordinate, so the centre of the picture IS the property. Drawing the pin here instead of asking the ImageServer for one keeps the cached JPEG a plain photograph -- reusable at any size, in the lightbox and in the PDF, and re-styleable without re-fetching a thing. */ .hbpp-pin { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--hbpp-red); border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(228, 50, 43, .30), 0 2px 7px rgba(0, 0, 0, .65); z-index: 2; } /* THE LOT OUTLINE. * * Height only -- the width follows from aspect-ratio:1, because the lot is * drawn as the square of equivalent area rather than a real boundary. PHP * sets the height percentage from pp_naip_parcel_frame()'s `fill`, and the * parcel image is SQUARE, so object-fit:cover scales it to fill this box's * height and crops the sides. A height percentage is therefore exact at every * tile size with no arithmetic in JavaScript -- which is the whole reason the * frame is square in the first place. * * Gold rather than red so it never reads as the marker, and semi-filled so it * is legible over both grass and roof. */ .hbpp-lot { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 2px solid rgba(235, 216, 176, .95); background: rgba(235, 216, 176, .16); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 0 10px rgba(0, 0, 0, .45); z-index: 1; } /* THE CAPTION WRAPS RATHER THAN TRUNCATES. * * A quarter of a 430px card leaves roughly 78px of text once the padding is * taken out. "Neighborhood" needs about 58px at a readable size and contains * no space, so with the icon in its own column (~14px) the only way it could * fit was to break mid-word into "Neighborho / od" -- which names nothing, on * the one strip whose whole job is to say what each view shows. * * So the icon is inline in the label instead, the label may take two lines, * and the sub-line takes two more. The grid stretches every tile to the * tallest caption, so a wrapped label lengthens all four together and the * strip stays square. On a wide card nothing wraps and the strip reads as one * line each, exactly as drawn. */ .hbpp-tile-cap { display: block; padding: clamp(5px, 1.5cqw, 8px) clamp(5px, 1.6cqw, 9px) clamp(6px, 1.7cqw, 9px); } .hbpp-tile-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; font-size: clamp(8.5px, 2.15cqw, 11.5px); font-weight: 700; color: var(--hbpp-text); line-height: 1.22; letter-spacing: -.01em; } .hbpp-tile-t i { margin-right: clamp(2px, .9cqw, 5px); font-size: clamp(9px, 2.3cqw, 12px); color: var(--hbpp-gold); } .hbpp-tile-s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; margin-top: 1px; font-size: clamp(7.5px, 1.8cqw, 10px); color: var(--hbpp-muted); line-height: 1.25; } /* ------------------------------------------------------- locked strip */ .hbpp-strip2 { margin-bottom: 10px; } .hbpp-lock { display: flex; flex-direction: column; justify-content: center; gap: clamp(5px, 1.6cqw, 8px); min-height: clamp(64px, 17cqw, 90px); padding: clamp(8px, 2.2cqw, 12px) clamp(6px, 1.8cqw, 9px); border-radius: 11px; background: var(--hbpp-panel); border: 1px solid var(--hbpp-line); color: var(--hbpp-text); cursor: pointer; text-align: left; transition: border-color .16s ease, background .16s ease, transform .16s ease; } .hbpp-lock:hover { border-color: var(--hbpp-gold-line); background: var(--hbpp-raised); transform: translateY(-2px); } .hbpp-lock:focus-visible { outline: 2px solid var(--hbpp-gold); outline-offset: 2px; } .hbpp-lock-ic { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .hbpp-lock-ic > i:first-child { font-size: clamp(12px, 3.1cqw, 17px); color: #B9CBDE; } .hbpp-lock-b { font-size: clamp(8.5px, 2.1cqw, 11px); color: var(--hbpp-muted); } .hbpp-lock-t { font-size: clamp(8px, 2.1cqw, 11.5px); font-weight: 700; line-height: 1.3; color: var(--hbpp-text); letter-spacing: -.005em; /* Wraps rather than ellipsizes -- a locked panel reading "Market Ana..." is not naming anything. Grid rows stretch to the tallest cell, so a three-line label lengthens all four together instead of spilling out. */ overflow-wrap: break-word; } /* THE WAY IN, AT THE SIZE OF THE THINGS BESIDE IT. It used to be a full-width band under the locked strip. That made the most valuable control on the card look like an advertisement and spent a whole row of height on one sentence, while the property's own name waited below it. It is now a panel on the same three-column grid the strips use: the LAST column, under Ownership & History, a locked panel's radius and very nearly its height, with the identity filling the two columns it no longer covers. The column comes from source order, not from grid-column — see hb_pp_card() — so the row reads the same to a keyboard and a screen reader as it does to an eye: the property first, then the way into it. What keeps it from reading as a fourth lock is not its size any more — it is the gold border, the gold type, and the blurred room behind it. */ .hbpp-meet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 13px; } /* The name and address, centred against the panel beside them rather than sitting on its top edge — two short lines against a 100px cell look dropped otherwise. They start hard against the card's left margin, in line with Property Aerial and Market Analysis above; the padding is on the RIGHT, to keep a long title off the panel's border. */ .hbpp-ident { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-right: clamp(2px, 1cqw, 6px); } .hbpp-ident .hbpp-title { margin-bottom: 5px; } .hbpp-ident .hbpp-addr { margin-bottom: 0; } /* Two lines of address are allowed here: the column is two thirds of the card rather than all of it, and "23500 San Luis Pass Rd, Unit 5" ellipsized on one line stops being an address. */ .hbpp-ident .hbpp-addr span { -webkit-line-clamp: 2; } .hbpp-deal { position: relative; overflow: hidden; /* The same column geometry as .hbpp-lock, stated rather than shared, because everything else about the two is deliberately different. */ display: flex; flex-direction: column; justify-content: center; gap: clamp(5px, 1.6cqw, 8px); /* A LITTLE TALLER THAN A LOCKED PANEL, ON PURPOSE. It carries a padlock and the same label size as they do, so it sits in their row rather than shouting over it — but it is the only panel there with a photograph behind it, and at a lock's exact height the room was a sliver above the type. The extra few pixels are for the picture. */ min-height: clamp(76px, 19.5cqw, 104px); padding: clamp(9px, 2.4cqw, 13px) clamp(6px, 1.8cqw, 9px); border-radius: 11px; /* The wash under the photograph, and the whole appearance if the photograph never arrives. The panel is legible either way. */ background: linear-gradient(160deg, rgba(42, 63, 94, .55) 0%, rgba(16, 28, 48, .75) 100%), rgba(235, 216, 176, .07); border: 1px solid var(--hbpp-gold-line); color: var(--hbpp-gold); cursor: pointer; text-align: left; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; } /* THE ROOM. A child span whose inline background-image is the pre-blurred interior — see the note in hb_pp_card() for why the URL is inline and why the blur is baked into the JPEG rather than applied here. */ .hbpp-deal > .hbpp-deal-bg { position: absolute; inset: 0; z-index: 0; background-position: center; background-size: cover; background-repeat: no-repeat; transition: transform .3s ease; } /* An even wash rather than the old left-to-right one: the label used to sit on the left of a wide button with clear space to its right, and now it covers the whole cell, so there is no side the photograph can own. Darkest at the bottom, where the two lines of type are. */ .hbpp-deal > .hbpp-deal-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 17, 33, .70) 0%, rgba(6, 17, 33, .84) 58%, rgba(6, 17, 33, .92) 100%); } .hbpp-deal > .hbpp-deal-ic, .hbpp-deal > .hbpp-deal-t { position: relative; z-index: 1; } /* The glyph and its padlock, laid out exactly as a locked panel's are, so the four cells scan as one row even though this one opens a different door. */ .hbpp-deal-ic { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .hbpp-deal-ic > i:first-child { font-size: clamp(12px, 3.1cqw, 17px); color: var(--hbpp-gold); text-shadow: 0 1px 3px rgba(0, 0, 0, .85); } .hbpp-deal-b { font-size: clamp(8.5px, 2.1cqw, 11px); color: rgba(235, 216, 176, .72); text-shadow: 0 1px 3px rgba(0, 0, 0, .85); } .hbpp-deal-t { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .hbpp-deal b { font-size: clamp(8px, 2.1cqw, 11.5px); font-weight: 700; letter-spacing: -.005em; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); /* Wraps rather than ellipsizes, for the same reason a locked panel's label does — and because the handler swaps this line for "Opening…". */ overflow-wrap: break-word; } .hbpp-deal em { font-style: normal; font-size: clamp(7.5px, 1.95cqw, 10.5px); font-weight: 600; /* Lifted off --hbpp-muted: that is tuned for a flat panel and goes muddy over a photograph, even a darkened one. */ color: #C3D2E1; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); overflow-wrap: break-word; } .hbpp-deal:hover { border-color: var(--hbpp-gold); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .5), 0 0 22px rgba(235, 216, 176, .35); } /* The room leans in. Scaling the photograph rather than the panel keeps the border and the text perfectly still. */ .hbpp-deal:hover > .hbpp-deal-bg, .hbpp-deal:focus-visible > .hbpp-deal-bg { transform: scale(1.06); } .hbpp-deal:focus-visible { outline: 2px solid var(--hbpp-gold); outline-offset: 2px; } /* ----------------------------------------------------------- identity */ .hbpp-title { margin: 0 0 6px; font-size: clamp(16px, 4.15cqw, 22px); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--hbpp-text); } .hbpp-addr { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 12px; font-size: clamp(10.5px, 2.45cqw, 13px); line-height: 1.45; color: #C3D2E1; } .hbpp-addr i { font-size: clamp(10px, 2.3cqw, 12.5px); color: var(--hbpp-gold); margin-top: 2px; flex: none; } .hbpp-addr span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .hbpp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-bottom: 13px; } .hbpp-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: clamp(7px, 2cqw, 11px) 4px clamp(6px, 1.8cqw, 10px); border-radius: 11px; background: var(--hbpp-panel); border: 1px solid var(--hbpp-line); } .hbpp-stat b { font-size: clamp(13px, 3.4cqw, 18px); font-weight: 800; line-height: 1; color: var(--hbpp-text); white-space: nowrap; } .hbpp-stat span { font-size: clamp(7px, 1.72cqw, 9px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hbpp-muted); white-space: nowrap; } /* --------------------------------------------------------------- CTAs */ .hbpp-ctas { display: flex; flex-direction: column; gap: 9px; } .hbpp-cta, .hbpp-cta2 { display: flex; align-items: center; gap: 11px; width: 100%; min-height: clamp(46px, 11cqw, 56px); padding: 11px clamp(11px, 3cqw, 16px); border-radius: 11px; cursor: pointer; text-align: left; transition: filter .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; } .hbpp-cta-go { margin-left: auto; flex: none; font-size: 13px; } .hbpp-cta { background: linear-gradient(100deg, #F0403A 0%, #C8102E 62%, #96091F 100%); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-size: clamp(12px, 3.02cqw, 15.5px); font-weight: 800; letter-spacing: .005em; box-shadow: 0 10px 26px rgba(200, 16, 46, .34); } .hbpp-cta > i:first-child { font-size: clamp(13px, 3.2cqw, 16px); flex: none; } .hbpp-cta span { flex: 1; min-width: 0; } .hbpp-cta:hover { filter: brightness(1.07); transform: translateY(-1px); } .hbpp-cta:active { transform: translateY(1px); } .hbpp-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .hbpp-cta2 { background: transparent; border: 1px solid var(--hbpp-gold-line); color: var(--hbpp-gold); /* It is an now, not a