/* service.css — the redesigned service landing pages (resources/views/pages/services/redesign.blade.php). Layered on home.css: same tokens (--hx-*), same type, same glass; scoped to .hx-main.hx-svc so it never touches site.css, the navbar, the footer, the other platform pages or the package pages. Rules: every selector starts with .hx-main (or the html.hx-noanim QA hook), every custom property is --hx-*, every keyframe is hx-svc-*. Breakpoints 1366 / 1024 / 820 / 640 / 480 / 360, no-motion block at the end. */ /* ============================================================ tokens ============================================================ */ .hx-main.hx-svc { --hx-svc-ink-soft: rgba(23, 18, 14, 0.62); --hx-svc-line: rgba(23, 18, 14, 0.08); --hx-svc-pkg-line: #e9e4e1; /* the same 8% ink hairline, pre-mixed on white so every package card matches */ --hx-svc-tint: color-mix(in srgb, var(--hx-g1) 8%, transparent); --hx-svc-tint-strong: color-mix(in srgb, var(--hx-g1) 16%, transparent); --hx-svc-accent-grad: linear-gradient(120deg, var(--hx-g1), var(--hx-g2)); --hx-svc-ease: cubic-bezier(0.25, 0.8, 0.25, 1); --hx-svc-radius-inner: 16px; } .hx-main.hx-svc .hx-fx { background: var(--hx-svc-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* the closing band is itself coral, so its accent word stays the pale cream home.css gives it, not the platform gradient */ .hx-main.hx-svc .hx-cta-band .hx-fx { background: none; -webkit-background-clip: initial; background-clip: initial; color: #ffe1d6; } /* ============================================================ hero — copy and order card left, the post deck right ============================================================ */ .hx-main.hx-svc .hx-svc-hero-inner { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); align-items: center; gap: clamp(28px, 4vw, 64px); padding-top: clamp(28px, 4vh, 52px); padding-bottom: clamp(28px, 4vh, 52px); min-height: min(calc(100svh - 118px), 780px); } .hx-main.hx-svc .hx-svc-hero-copy { gap: 18px; max-width: 600px; } .hx-main.hx-svc .hx-svc-hero h1, .hx-main.hx-svc .hx-svc-hero .hx-as-h1 { font-size: clamp(2.3rem, 4vw, 3.3rem); line-height: 1.04; } .hx-main.hx-svc .hx-svc-hero-sub { max-width: 48ch; font-size: 1.04rem; color: var(--hx-body); } .hx-main.hx-svc .hx-svc-hero-sub a { text-decoration: underline; } /* the three points as one quiet row */ .hx-main.hx-svc .hx-svc-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; } .hx-main.hx-svc .hx-svc-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 600; color: var(--hx-ink); } .hx-main.hx-svc .hx-svc-points .hx-tick { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(31, 171, 85, 0.14); color: var(--hx-green); font-size: 11px; font-weight: 800; font-style: normal; } /* the order card: the site's .svc-card node (its order-form contract lives in siteInteractions.js) restyled as a glass panel */ .hx-main.hx-svc .hx-svc-order { position: relative; isolation: isolate; width: 100%; max-width: 600px; max-height: none; overflow: visible; display: grid; gap: 16px; padding: clamp(18px, 2.2vw, 24px); border-radius: var(--hx-radius-card); background: var(--hx-glass-solid); border: 1px solid var(--hx-glass-line); box-shadow: var(--hx-glass-shadow), 0 24px 50px -30px var(--hx-g1); color: var(--hx-ink); scroll-margin-top: calc(var(--hx-top-offset, 75px) + 12px); } /* the order card: a ticket with an accent edge; quantity-only cards in full rows, the total centred beneath */ .hx-main.hx-svc .hx-svc-ticket { gap: 14px; overflow: hidden; } .hx-main.hx-svc .hx-svc-ticket::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--hx-svc-accent-grad); } .hx-main.hx-svc .hx-svc-ticket-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 2px; } .hx-main.hx-svc .hx-svc-ticket-title { font-family: var(--hx-font-display), sans-serif; font-weight: 800; font-size: 1.12rem; letter-spacing: -0.015em; } .hx-main.hx-svc .hx-svc-ticket-meta { font-family: var(--hx-font-mono), monospace; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hx-g1); text-decoration: none; } .hx-main.hx-svc a.hx-svc-ticket-meta:hover { text-decoration: underline; } .hx-main.hx-svc .hx-svc-pkg-check { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--hx-g1); opacity: 0; transform: scale(0.5); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.4); } .hx-main.hx-svc .hx-svc-pkg.is-selected .hx-svc-pkg-check { opacity: 1; transform: none; } .hx-main.hx-svc .hx-svc-pkgs { display: flex; flex-wrap: wrap; gap: 14px 10px; padding-top: 6px; } .hx-main.hx-svc .hx-svc-pkg { position: relative; overflow: visible; box-sizing: border-box; flex: 1 1 calc(25% - 10px); min-width: 108px; max-width: none; min-height: 0; height: auto; margin: 0; display: grid; justify-items: center; align-content: center; gap: 3px; text-align: center; padding: 12px 8px 11px; /* opaque card + solid hairline: a translucent border over the page gradient tinted each card a different colour (pink on the left, teal on the right of the TikTok ticket) */ border-radius: var(--hx-svc-radius-inner); border: 1.5px solid var(--hx-svc-pkg-line); background: #fff; background-clip: padding-box; color: var(--hx-ink); font: inherit; cursor: pointer; scroll-snap-align: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .hx-main.hx-svc .hx-svc-pkg:hover:not(.is-selected) { border-color: var(--hx-g1); background: #fff; box-shadow: 0 12px 26px -18px var(--hx-g1); transform: translateY(-1px); } .hx-main.hx-svc .hx-svc-pkg:active { transform: translateY(0) scale(0.98); } .hx-main.hx-svc .hx-svc-pkg.is-selected { background: var(--hx-svc-accent-grad); border-color: transparent; color: #fff; box-shadow: 0 16px 30px -14px var(--hx-g1); } .hx-main.hx-svc .hx-svc-pkg-qty { font-family: var(--hx-font-display), sans-serif; font-size: 1.32rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .hx-main.hx-svc .hx-svc-pkg { min-height: 62px; } .hx-main.hx-svc .hx-svc-pkg-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-family: var(--hx-font-mono), monospace; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--hx-ink); border-radius: 999px; padding: 3px 8px; white-space: nowrap; line-height: 1.2; } .hx-main.hx-svc .hx-svc-pkg.is-selected .hx-svc-pkg-tag { background: #fff; color: var(--hx-g1); } .hx-main.hx-svc .hx-svc-pkg:focus-visible { outline: 3px solid var(--hx-coral); outline-offset: 2px; } .hx-main.hx-svc .hx-svc-price-label { font-family: var(--hx-font-mono), monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hx-svc-ink-soft); } /* the total sits in the middle of the card: label, the price, the delivery under it (rules in the price block below) */ /* price line */ .hx-main.hx-svc .hx-svc-price { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 12px 16px 12px; border-radius: var(--hx-svc-radius-inner); background: linear-gradient(150deg, color-mix(in srgb, var(--hx-g1) 8%, transparent), color-mix(in srgb, var(--hx-g2) 12%, transparent)); } .hx-main.hx-svc .hx-svc-price-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding-top: 2px; } .hx-main.hx-svc .hx-svc-delivery[hidden] { display: none; } .hx-main.hx-svc .hx-svc-price-now { font-family: var(--hx-font-display), sans-serif; font-size: clamp(2.2rem, 3vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--hx-ink); font-variant-numeric: tabular-nums; } .hx-main.hx-svc .hx-svc-price-was { font-family: var(--hx-font-mono), monospace; font-size: 0.9rem; color: var(--hx-svc-ink-soft); text-decoration: line-through; } .hx-main.hx-svc .hx-svc-delivery { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--hx-svc-ink-soft); padding-bottom: 0; } .hx-main.hx-svc .hx-svc-delivery svg { color: var(--hx-g2); } .hx-main.hx-svc .hx-svc-delivery-val { font-weight: 700; color: var(--hx-ink); } /* error + go */ .hx-main.hx-svc .hx-svc-error { font-size: 0.88rem; font-weight: 600; color: #c0263a; background: #ffe6e9; border-radius: 12px; padding: 10px 14px; } .hx-main.hx-svc .hx-svc-order-go { display: grid; gap: 10px; justify-items: center; } .hx-main.hx-svc .hx-svc-next { width: 100%; padding: 1.02em 1.6em; font-size: 1.04rem; box-shadow: 0 18px 40px -16px var(--hx-g1), 0 2px 8px -2px rgba(23, 18, 14, 0.15); } .hx-main.hx-svc .hx-svc-order-note { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-order-note svg { color: var(--hx-green); } /* media column */ .hx-main.hx-svc .hx-svc-hero-media { position: relative; z-index: 1; min-width: 0; } /* ============================================================ the growth stage — a phone showing the page's creator inside Instagram; the number the page sells is live on screen ============================================================ */ .hx-main.hx-svc .hx-svc-stage-wrap { display: grid; gap: 14px; justify-items: center; width: min(460px, 100%); margin-inline: auto; opacity: 0; animation: hx-rise 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.3s forwards; } .hx-main.hx-svc .hx-svc-stage { position: relative; width: 100%; padding: 34px 40px 26px 20px; perspective: 1400px; } .hx-main.hx-svc .hx-svc-stage-glow { position: absolute; inset: 8% 4% 6% -2%; z-index: 0; border-radius: 45%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--hx-g1) 34%, transparent), color-mix(in srgb, var(--hx-g2) 14%, transparent) 55%, transparent 74%); filter: blur(28px); animation: hx-svc-glow 7s ease-in-out infinite alternate; } @keyframes hx-svc-glow { from { transform: translate(-3%, 2%) scale(1); } to { transform: translate(4%, -3%) scale(1.12); } } .hx-main.hx-svc .hx-svc-stage-orbit { position: absolute; inset: 2% -2% 4% -6%; z-index: 0; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--hx-g1) 28%, transparent); pointer-events: none; animation: hx-svc-spin 46s linear infinite; } .hx-main.hx-svc .hx-svc-stage-orbit--2 { inset: 14% 10% 16% 6%; border-style: dotted; border-color: color-mix(in srgb, var(--hx-g2) 35%, transparent); animation-duration: 30s; animation-direction: reverse; } @keyframes hx-svc-spin { to { transform: rotate(360deg); } } .hx-main.hx-svc .hx-svc-stage:not(.is-live) :is(.hx-svc-stage-orbit, .hx-svc-stage-glow) { animation-play-state: paused; } /* the phone: a dark body, a dynamic island, a glare across the glass */ .hx-main.hx-svc .hx-svc-phone { position: relative; z-index: 1; width: min(316px, 100%); margin-inline: auto; aspect-ratio: 316 / 650; padding: 11px; border-radius: 48px; background: linear-gradient(160deg, #2a2320, #14110f 40%, #1f1916); box-shadow: 0 60px 90px -44px rgba(23, 18, 14, 0.7), 0 0 0 1.5px rgba(255, 255, 255, 0.1), 0 34px 70px -40px var(--hx-g1), inset 0 0 0 1px rgba(255, 255, 255, 0.06); transform-style: preserve-3d; } .hx-main.hx-svc .hx-svc-phone::before { content: ""; position: absolute; top: 20px; left: 50%; width: 88px; height: 24px; margin-left: -44px; border-radius: 999px; background: #0d0b0a; z-index: 5; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .hx-main.hx-svc .hx-svc-phone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 6; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 22%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 0.08) 100%); } .hx-main.hx-svc .hx-svc-screen { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: #fff; color: #111; display: flex; flex-direction: column; font-family: var(--hx-font-body), system-ui, sans-serif; font-size: 0.76rem; line-height: 1.3; } /* status bar and glyphs drawn with borders (no icon library on the phone chrome) */ .hx-main.hx-svc .hx-svc-ig-status { display: flex; justify-content: space-between; align-items: center; padding: 15px 24px 0 26px; height: 40px; font-size: 0.74rem; font-weight: 700; letter-spacing: -0.01em; } .hx-main.hx-svc .hx-svc-ig-status-icons { display: inline-flex; align-items: center; gap: 5px; } .hx-main.hx-svc .hx-svc-ig-signal { width: 14px; height: 10px; background: linear-gradient(90deg, #111 0 2px, transparent 2px 3.5px, #111 3.5px 5.5px, transparent 5.5px 7px, #111 7px 9px, transparent 9px 10.5px, #111 10.5px 12.5px, transparent 12.5px); clip-path: polygon(0 60%, 25% 60%, 25% 40%, 50% 40%, 50% 20%, 75% 20%, 75% 0, 100% 0, 100% 100%, 0 100%); } .hx-main.hx-svc .hx-svc-ig-wifi { width: 13px; height: 10px; border: 2px solid #111; border-color: #111 transparent transparent transparent; border-radius: 50% 50% 0 0; } .hx-main.hx-svc .hx-svc-ig-battery { width: 22px; height: 10px; border: 1.5px solid rgba(17, 17, 17, 0.5); border-radius: 3px; position: relative; } .hx-main.hx-svc .hx-svc-ig-battery::after { content: ""; position: absolute; inset: 1.5px; right: 4px; background: #111; border-radius: 1.5px; } .hx-main.hx-svc .hx-svc-ig-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 6px; font-size: 0.92rem; } .hx-main.hx-svc .hx-svc-ig-top b { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; } .hx-main.hx-svc .hx-svc-ig-verified { color: #0095f6; flex: none; } .hx-main.hx-svc .hx-svc-ig-top-icons { display: inline-flex; gap: 14px; } .hx-main.hx-svc .hx-svc-ig-plus { width: 16px; height: 16px; border: 1.8px solid #111; border-radius: 5px; position: relative; } .hx-main.hx-svc .hx-svc-ig-plus::before, .hx-main.hx-svc .hx-svc-ig-plus::after { content: ""; position: absolute; background: #111; left: 50%; top: 50%; } .hx-main.hx-svc .hx-svc-ig-plus::before { width: 8px; height: 1.8px; margin: -0.9px 0 0 -4px; } .hx-main.hx-svc .hx-svc-ig-plus::after { width: 1.8px; height: 8px; margin: -4px 0 0 -0.9px; } .hx-main.hx-svc .hx-svc-ig-menu { width: 16px; height: 12px; border-top: 1.8px solid #111; border-bottom: 1.8px solid #111; position: relative; } .hx-main.hx-svc .hx-svc-ig-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.8px; margin-top: -0.9px; background: #111; } .hx-main.hx-svc .hx-svc-ig-more { width: 14px; height: 3px; background: radial-gradient(circle, #111 1.4px, transparent 1.6px) 0 0 / 5px 3px repeat-x; } .hx-main.hx-svc .hx-svc-ig-back { width: 10px; height: 10px; border-left: 2px solid #111; border-bottom: 2px solid #111; transform: rotate(45deg); margin-left: 4px; } .hx-main.hx-svc .hx-svc-ig-top--post { justify-content: space-between; font-size: 0.9rem; } /* profile screen */ .hx-main.hx-svc .hx-svc-ig-head { display: flex; align-items: center; gap: 16px; padding: 4px 16px 8px; } .hx-main.hx-svc .hx-svc-ig-ava { flex: none; width: 76px; height: 76px; border-radius: 50%; padding: 3px; background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); } .hx-main.hx-svc .hx-svc-ig-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2.5px solid #fff; } .hx-main.hx-svc .hx-svc-ig-ava--sm { width: 34px; height: 34px; padding: 2px; } .hx-main.hx-svc .hx-svc-ig-ava--sm img { border-width: 1.5px; } .hx-main.hx-svc .hx-svc-ig-stats { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; text-align: center; font-size: 0.64rem; color: #262626; } .hx-main.hx-svc .hx-svc-ig-stats span { display: grid; gap: 1px; min-width: 0; } .hx-main.hx-svc .hx-svc-ig-stats b { font-size: 0.94rem; font-weight: 800; color: #111; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.15; white-space: nowrap; } .hx-main.hx-svc .hx-svc-ig-stat--live { position: relative; } .hx-main.hx-svc .hx-svc-ig-live { position: relative; color: var(--hx-g1); } .hx-main.hx-svc .hx-svc-ig-stats .hx-svc-ig-live { font-size: 0.94rem; justify-self: center; } .hx-main.hx-svc .hx-svc-ig-live::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 999px; background: var(--hx-svc-accent-grad); opacity: 0.7; } .hx-main.hx-svc .hx-svc-ig-live.is-hit { animation: hx-svc-bump 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4); } @keyframes hx-svc-bump { 0% { transform: scale(0.96); } 50% { transform: scale(1.08); } 100% { transform: none; } } .hx-main.hx-svc .hx-svc-ig-bio { display: grid; gap: 1px; padding: 0 16px 10px; font-size: 0.74rem; color: #262626; } .hx-main.hx-svc .hx-svc-ig-bio b { color: #111; } .hx-main.hx-svc .hx-svc-ig-actions { display: flex; gap: 6px; padding: 0 16px 12px; } .hx-main.hx-svc .hx-svc-ig-btn { flex: 1; display: grid; place-items: center; height: 30px; border-radius: 8px; background: #efefef; color: #111; font-size: 0.74rem; font-weight: 700; } .hx-main.hx-svc .hx-svc-ig-btn--blue { background: #0095f6; color: #fff; } .hx-main.hx-svc .hx-svc-ig-btn--sq { flex: 0 0 34px; } .hx-main.hx-svc .hx-svc-ig-chev { width: 7px; height: 7px; border-right: 1.8px solid #111; border-bottom: 1.8px solid #111; transform: translateY(-2px) rotate(45deg); } .hx-main.hx-svc .hx-svc-ig-highlights { display: flex; gap: 12px; padding: 0 16px 10px; overflow: hidden; } .hx-main.hx-svc .hx-svc-ig-highlights span { display: grid; justify-items: center; gap: 4px; font-size: 0.6rem; color: #262626; } .hx-main.hx-svc .hx-svc-ig-highlights img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1.5px #dbdbdb; } .hx-main.hx-svc .hx-svc-ig-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #efefef; } .hx-main.hx-svc .hx-svc-ig-tab { height: 34px; position: relative; } .hx-main.hx-svc .hx-svc-ig-tab::before { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 1.6px solid #8e8e8e; border-radius: 3px; background: linear-gradient(#8e8e8e, #8e8e8e) 50% 0 / 1.6px 100% no-repeat, linear-gradient(#8e8e8e, #8e8e8e) 0 50% / 100% 1.6px no-repeat; } .hx-main.hx-svc .hx-svc-ig-tab.is-on::before { border-color: #111; background-image: linear-gradient(#111, #111), linear-gradient(#111, #111); } .hx-main.hx-svc .hx-svc-ig-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: #111; } .hx-main.hx-svc .hx-svc-ig-tab--reels::before { border-radius: 4px; background: none; } .hx-main.hx-svc .hx-svc-ig-tab--tag::before { border-radius: 50%; background: none; } .hx-main.hx-svc .hx-svc-ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; flex: 1; min-height: 0; overflow: hidden; background: #fff; } .hx-main.hx-svc .hx-svc-ig-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } /* post screen */ .hx-main.hx-svc .hx-svc-ig-posthead { display: flex; align-items: center; gap: 10px; padding: 6px 14px 8px; } .hx-main.hx-svc .hx-svc-ig-postuser { flex: 1; display: grid; line-height: 1.2; min-width: 0; } .hx-main.hx-svc .hx-svc-ig-postuser b { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 800; } .hx-main.hx-svc .hx-svc-ig-postuser small { font-size: 0.66rem; color: #737373; } .hx-main.hx-svc .hx-svc-ig-photo { aspect-ratio: 1; overflow: hidden; background: #f3ede9; } .hx-main.hx-svc .hx-svc-ig-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .hx-main.hx-svc .hx-svc-ig-postacts { display: flex; align-items: center; gap: 14px; padding: 10px 14px 4px; color: #262626; } .hx-main.hx-svc .hx-svc-ig-postacts span { display: inline-flex; } .hx-main.hx-svc .hx-svc-ig-postacts .is-red { color: #ff3040; } .hx-main.hx-svc .hx-svc-ig-postacts .is-accent { color: var(--hx-g1); } .hx-main.hx-svc .hx-svc-ig-postacts-save { margin-left: auto; } .hx-main.hx-svc .hx-svc-ig-postmeta { display: grid; gap: 3px; padding: 2px 14px 10px; font-size: 0.76rem; color: #262626; } .hx-main.hx-svc .hx-svc-ig-likes b { font-weight: 800; color: #111; } .hx-main.hx-svc .hx-svc-ig-likes .hx-svc-ig-live { font-size: 0.98rem; } .hx-main.hx-svc .hx-svc-ig-cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hx-main.hx-svc .hx-svc-ig-cap b { color: #111; margin-right: 4px; } .hx-main.hx-svc .hx-svc-ig-muted { color: #8e8e8e; font-size: 0.7rem; } .hx-main.hx-svc .hx-svc-ig-comment { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hx-main.hx-svc .hx-svc-ig-comment img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none; } .hx-main.hx-svc .hx-svc-ig-comment b { color: #111; } /* reel screen */ .hx-main.hx-svc .hx-svc-ig-reel { background: #000; color: #fff; } .hx-main.hx-svc .hx-svc-ig-reel .hx-svc-ig-status { color: #fff; position: absolute; left: 0; right: 0; top: 0; z-index: 2; } .hx-main.hx-svc .hx-svc-ig-reel .hx-svc-ig-signal, .hx-main.hx-svc .hx-svc-ig-reel .hx-svc-ig-battery::after { background-color: #fff; } .hx-main.hx-svc .hx-svc-ig-reel .hx-svc-ig-signal { background: linear-gradient(90deg, #fff 0 2px, transparent 2px 3.5px, #fff 3.5px 5.5px, transparent 5.5px 7px, #fff 7px 9px, transparent 9px 10.5px, #fff 10.5px 12.5px, transparent 12.5px); } .hx-main.hx-svc .hx-svc-ig-reel .hx-svc-ig-wifi { border-top-color: #fff; } .hx-main.hx-svc .hx-svc-ig-reel .hx-svc-ig-battery { border-color: rgba(255, 255, 255, 0.6); } .hx-main.hx-svc .hx-svc-ig-reelbox { position: relative; flex: 1; min-height: 0; } .hx-main.hx-svc .hx-svc-ig-reelbox > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hx-main.hx-svc .hx-svc-ig-reelbox::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 22%, transparent 55%, rgba(0, 0, 0, 0.75)); pointer-events: none; } .hx-main.hx-svc .hx-svc-ig-reel-top { position: absolute; z-index: 2; left: 16px; right: 16px; top: 48px; display: flex; justify-content: space-between; align-items: center; font-size: 1.05rem; font-weight: 800; } .hx-main.hx-svc .hx-svc-ig-cam { width: 20px; height: 15px; border: 2px solid #fff; border-radius: 4px; position: relative; } .hx-main.hx-svc .hx-svc-ig-cam::after { content: ""; position: absolute; right: -8px; top: 2px; width: 6px; height: 7px; border: 2px solid #fff; border-left: 0; border-radius: 0 3px 3px 0; } .hx-main.hx-svc .hx-svc-ig-reel-side { position: absolute; z-index: 2; right: 12px; bottom: 96px; display: grid; gap: 16px; justify-items: center; } .hx-main.hx-svc .hx-svc-ig-reel-side span { display: grid; justify-items: center; gap: 3px; font-size: 0.66rem; font-weight: 700; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); } .hx-main.hx-svc .hx-svc-ig-reel-ava img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; border: 1.5px solid #fff; } .hx-main.hx-svc .hx-svc-ig-reel-foot { position: absolute; z-index: 2; left: 14px; right: 64px; bottom: 22px; display: grid; gap: 7px; } .hx-main.hx-svc .hx-svc-ig-reel-views { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 6px 11px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); font-size: 0.74rem; font-weight: 700; backdrop-filter: none; } .hx-main.hx-svc .hx-svc-ig-reel-views .hx-svc-ig-live { color: #fff; font-size: 0.92rem; } .hx-main.hx-svc .hx-svc-ig-reel-views .hx-svc-ig-live::after { background: #fff; } .hx-main.hx-svc .hx-svc-ig-reel-user { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; } .hx-main.hx-svc .hx-svc-ig-reel-user img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff; } .hx-main.hx-svc .hx-svc-ig-follow-pill { font-style: normal; font-size: 0.66rem; font-weight: 700; border: 1.2px solid #fff; border-radius: 6px; padding: 3px 8px; } .hx-main.hx-svc .hx-svc-ig-reel-cap { font-size: 0.74rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hx-main.hx-svc .hx-svc-ig-reel-audio { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; opacity: 0.9; } .hx-main.hx-svc .hx-svc-ig-note { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; } /* when the visitor's own profile has taken over the screen, the creator's photos become neutral placeholders */ .hx-main.hx-svc .hx-svc-stage.is-mirrored .hx-svc-ig-highlights { display: none; } .hx-main.hx-svc .hx-svc-stage.is-mirrored .hx-svc-ig-grid img { filter: grayscale(1) blur(3px) brightness(1.15); opacity: 0.45; } .hx-main.hx-svc .hx-svc-stage.is-mirrored .hx-svc-ig-bio span:empty { display: none; } /* bottom tabs */ .hx-main.hx-svc .hx-svc-ig-nav { margin-top: auto; display: flex; justify-content: space-around; align-items: center; height: 52px; padding-bottom: 6px; border-top: 1px solid #efefef; background: #fff; } .hx-main.hx-svc .hx-svc-ig-nav img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px #111; } .hx-main.hx-svc .hx-svc-ig-nav i { width: 22px; height: 22px; border: 2px solid #111; } .hx-main.hx-svc .hx-svc-ig-nav-home { border-radius: 3px 3px 5px 5px; clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); background: #111; } .hx-main.hx-svc .hx-svc-ig-nav-search { border-radius: 50%; width: 19px; height: 19px; position: relative; } .hx-main.hx-svc .hx-svc-ig-nav-search::after { content: ""; position: absolute; right: -6px; bottom: -6px; width: 8px; height: 2px; background: #111; transform: rotate(45deg); } .hx-main.hx-svc .hx-svc-ig-nav-reels { border-radius: 5px; background: linear-gradient(#111, #111) 0 6px / 100% 2px no-repeat; } .hx-main.hx-svc .hx-svc-ig-nav-shop { border-radius: 3px 3px 6px 6px; border-top-width: 3px; } /* the delta chip: "+1,000 followers with this package" */ .hx-main.hx-svc .hx-svc-stage-delta { position: absolute; top: 8px; right: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; max-width: 86%; font-family: var(--hx-font-mono), monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; background: var(--hx-ink); border-radius: 999px; padding: 8px 12px; box-shadow: 0 14px 30px -14px rgba(23, 18, 14, 0.6); opacity: 0; transform: translateY(6px) translateZ(60px); transition: opacity 0.4s ease, transform 0.5s var(--hx-svc-ease); } .hx-main.hx-svc .hx-svc-stage-delta.is-on { opacity: 1; transform: translateY(0) translateZ(60px); } .hx-main.hx-svc .hx-svc-stage-delta.is-pop { animation: hx-svc-deltaPop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4); } @keyframes hx-svc-deltaPop { 0% { transform: translateY(0) translateZ(60px) scale(0.9); } 55% { transform: translateY(-3px) translateZ(60px) scale(1.06); } 100% { transform: translateY(0) translateZ(60px) scale(1); } } /* arrivals: they travel a curved lane into the number (offset-path), a straight line where that is unsupported */ .hx-main.hx-svc .hx-svc-flow { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; transform: translateZ(70px); } .hx-main.hx-svc .hx-svc-flow-item { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; offset-path: var(--hx-lane-path); offset-rotate: 0deg; offset-distance: 0%; animation: hx-svc-flow var(--hx-d, 1.3s) cubic-bezier(0.3, 0.2, 0.3, 1) forwards; will-change: offset-distance, transform, opacity; } @keyframes hx-svc-flow { 0% { offset-distance: 0%; opacity: 0; transform: scale(0.4); } 18% { opacity: 1; transform: scale(1); } 82% { opacity: 1; transform: scale(0.95); } 100% { offset-distance: 100%; opacity: 0; transform: scale(0.3); } } @supports not (offset-path: path("M0 0L1 1")) { .hx-main.hx-svc .hx-svc-flow-item { animation-name: hx-svc-flowLine; } } @keyframes hx-svc-flowLine { 0% { transform: translate(var(--hx-sx), var(--hx-sy)) scale(0.4); opacity: 0; } 18% { opacity: 1; transform: translate(var(--hx-sx), var(--hx-sy)) scale(1); } 100% { transform: translate(var(--hx-ex), var(--hx-ey)) scale(0.3); opacity: 0; } } .hx-main.hx-svc .hx-svc-flow-item--disc { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; padding: 2px; background: #fff; box-shadow: 0 10px 22px -10px rgba(23, 18, 14, 0.5); } .hx-main.hx-svc .hx-svc-flow-item--disc img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .hx-main.hx-svc .hx-svc-flow-item--heart { width: var(--hx-s, 20px); height: var(--hx-s, 20px); margin: calc(var(--hx-s, 20px) / -2) 0 0 calc(var(--hx-s, 20px) / -2); color: #ff3040; filter: drop-shadow(0 6px 12px rgba(255, 48, 64, 0.45)); } .hx-main.hx-svc .hx-svc-flow-item--play { width: calc(var(--hx-s, 18px) + 14px); height: calc(var(--hx-s, 18px) + 14px); margin: calc((var(--hx-s, 18px) + 14px) / -2) 0 0 calc((var(--hx-s, 18px) + 14px) / -2); border-radius: 50%; background: #fff; color: var(--hx-ink); padding-left: 2px; box-shadow: 0 10px 22px -10px rgba(23, 18, 14, 0.6); } .hx-main.hx-svc .hx-svc-flow-item--bubble { gap: 6px; margin: -14px 0 0 -40px; padding: 5px 10px 5px 5px; border-radius: 999px; background: #fff; color: #111; font-size: 0.7rem; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 22px -10px rgba(23, 18, 14, 0.5); } .hx-main.hx-svc .hx-svc-flow-item--bubble img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; } /* the caption row under the stage */ .hx-main.hx-svc .hx-svc-stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; width: 100%; max-width: 400px; } .hx-main.hx-svc .hx-svc-stage-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hx-font-mono), monospace; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-stage-live .hx-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hx-green); animation: hx-blink 1.6s ease-in-out infinite; } .hx-main.hx-svc .hx-svc-stage-hint { font-size: 0.78rem; color: var(--hx-svc-ink-soft); } /* ============================================================ press band — the admin's logos in one quiet marquee ============================================================ */ .hx-main.hx-svc .hx-svc-press { padding-block: 0 clamp(18px, 3vw, 34px); } .hx-main.hx-svc .hx-svc-press::before { display: none; } .hx-main.hx-svc .hx-svc-press-band { display: grid; gap: 12px; justify-items: center; padding: 16px clamp(16px, 3vw, 28px) 18px; border-radius: var(--hx-radius-card); background: var(--hx-glass); border: 1px solid var(--hx-glass-line); box-shadow: var(--hx-glass-shadow); } .hx-main.hx-svc .hx-svc-press-label { font-family: var(--hx-font-mono), monospace; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hx-svc-ink-soft); text-align: center; } .hx-main.hx-svc .hx-svc-press-viewport { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .hx-main.hx-svc .hx-svc-press-track { display: flex; align-items: center; width: max-content; animation: hx-svc-marquee 100s linear infinite; } .hx-main.hx-svc .hx-svc-press-group { display: flex; align-items: center; justify-content: space-around; flex: 0 0 auto; min-width: 100vw; box-sizing: border-box; } .hx-main.hx-svc .hx-svc-press-viewport:hover .hx-svc-press-track { animation-play-state: paused; } .hx-main.hx-svc .hx-svc-press-logo { height: 34px; width: auto; max-width: 210px; object-fit: contain; margin-inline: clamp(22px, 3vw, 42px); filter: grayscale(1); opacity: 0.62; transition: filter 0.3s ease, opacity 0.3s ease; } .hx-main.hx-svc .hx-svc-press-logo:hover { filter: none; opacity: 1; } @keyframes hx-svc-marquee { to { transform: translateX(-50%); } } /* ============================================================ split — the admin's copy beside a scene (visibility 1 with the Explore grid, visibility 2 with the loop) ============================================================ */ .hx-main.hx-svc .hx-svc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .hx-main.hx-svc .hx-svc-split--flip .hx-svc-split-media { order: -1; } .hx-main.hx-svc .hx-svc-split-copy { display: grid; gap: 18px; max-width: 560px; } .hx-main.hx-svc .hx-svc-vis-title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.08; text-wrap: balance; } .hx-main.hx-svc .hx-svc-split-text { display: grid; gap: 12px; color: var(--hx-body); font-size: 1rem; line-height: 1.7; } .hx-main.hx-svc .hx-svc-split-text p { margin: 0; } .hx-main.hx-svc .hx-svc-split-text a { text-decoration: underline; } /* the eyebrow sits tight above the heading */ .hx-main.hx-svc .hx-svc-split-copy > .hx-eyebrow { justify-self: start; margin-bottom: -4px; } /* the picture beside block 1: a tall post-shaped photo in the section's rounded style */ .hx-main.hx-svc .hx-svc-split-photo { width: min(440px, 100%); margin: 0; aspect-ratio: 4 / 5; border-radius: var(--hx-radius-card, 26px); overflow: hidden; box-shadow: var(--hx-glass-shadow), 0 30px 60px -36px var(--hx-g1); } .hx-main.hx-svc .hx-svc-split-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* a picture that stands free of a backdrop is shown whole, with a shadow that follows the artwork, not the box */ .hx-main.hx-svc .hx-svc-split-photo--nobg { aspect-ratio: auto; overflow: visible; border-radius: 0; box-shadow: none; background: transparent; } .hx-main.hx-svc .hx-svc-split-photo--nobg img { height: auto; max-height: 550px; object-fit: contain; filter: drop-shadow(0 22px 30px rgba(23, 18, 14, 0.18)); } .hx-main.hx-svc .hx-svc-split-media { min-width: 0; display: grid; justify-items: center; } /* ============================================================ the Explore grid — tiles shuffle, Noor's post grows into the featured tile ============================================================ */ .hx-main.hx-svc .hx-svc-explore { position: relative; width: min(420px, 100%); padding: 12px; border-radius: 26px; background: var(--hx-glass-solid); border: 1px solid var(--hx-glass-line); box-shadow: var(--hx-glass-shadow), 0 30px 60px -36px var(--hx-g1); } .hx-main.hx-svc .hx-svc-explore-bar { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; } .hx-main.hx-svc .hx-svc-explore-search { flex: 1; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(23, 18, 14, 0.06); color: var(--hx-svc-ink-soft); font-size: 0.8rem; } .hx-main.hx-svc .hx-svc-explore-tab { font-family: var(--hx-font-mono), monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hx-g1); } .hx-main.hx-svc .hx-svc-explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; grid-auto-flow: dense; gap: 3px; border-radius: 14px; overflow: hidden; } .hx-main.hx-svc .hx-svc-explore-tile { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; background: #f3ede9; transform-origin: 0 0; will-change: transform; border-radius: 6px; } .hx-main.hx-svc .hx-svc-explore-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .hx-main.hx-svc .hx-svc-explore-tile:hover img { transform: scale(1.06); } .hx-main.hx-svc .hx-svc-explore-tile--tall { grid-area: 1 / 3 / 3 / 4; aspect-ratio: auto; } .hx-main.hx-svc .hx-svc-explore-tile.is-moving { transition: transform 0.75s var(--hx-svc-ease); } .hx-main.hx-svc .hx-svc-explore-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--hx-g1); transition: box-shadow 0.5s ease 0.6s; pointer-events: none; } .hx-main.hx-svc .hx-svc-explore-tile.is-star.hx-svc-explore-tile--tall::after { box-shadow: inset 0 0 0 3px var(--hx-g1); } /* the tall tile is a reel: a small play mark rides its corner */ .hx-main.hx-svc .hx-svc-explore-reel { position: absolute; top: 6px; right: 6px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; padding-left: 1px; color: #fff; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.3s ease 0.5s; } .hx-main.hx-svc .hx-svc-explore-tile--tall .hx-svc-explore-reel { opacity: 1; } .hx-main.hx-svc .hx-svc-explore-chip { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; font-family: var(--hx-font-mono), monospace; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: #fff; background: var(--hx-svc-accent-grad); border-radius: 999px; padding: 6px 9px; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease 0.75s, transform 0.5s var(--hx-svc-ease) 0.75s; } .hx-main.hx-svc .hx-svc-explore-tile.is-star.hx-svc-explore-tile--tall .hx-svc-explore-chip { opacity: 1; transform: none; } /* ============================================================ the Signal Loop — a comet runs post > engagement > algorithm > Explore > followers ============================================================ */ .hx-main.hx-svc .hx-svc-loop { width: 100%; display: grid; justify-items: center; } .hx-main.hx-svc .hx-svc-loop-svg { width: 100%; height: auto; overflow: visible; font-family: var(--hx-font-body), system-ui, sans-serif; } .hx-main.hx-svc .hx-svc-loop-svg--wide { max-width: 900px; } .hx-main.hx-svc .hx-svc-loop-svg--tall { display: none; max-width: 320px; } .hx-main.hx-svc .hx-svc-loop-track { fill: none; stroke: rgba(23, 18, 14, 0.12); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; } .hx-main.hx-svc .hx-svc-loop-trail { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 130 870; stroke-dashoffset: 0; animation: hx-svc-trail 7s linear infinite; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hx-g2) 55%, transparent)); } @keyframes hx-svc-trail { to { stroke-dashoffset: -1000; } } .hx-main.hx-svc .hx-svc-loop-comet { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--hx-g2) 80%, transparent)); } .hx-main.hx-svc .hx-svc-loop-halo { fill: var(--hx-g1); opacity: 0; transform-origin: center; transform-box: fill-box; animation: hx-svc-halo 7s linear infinite; animation-delay: calc(var(--hx-t, 0) * -7s); } @keyframes hx-svc-halo { 0% { opacity: 0.22; transform: scale(0.7); } 10% { opacity: 0; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1.3); } } .hx-main.hx-svc .hx-svc-loop-dot { fill: #fff; stroke: rgba(23, 18, 14, 0.1); stroke-width: 1.5; transform-origin: center; transform-box: fill-box; animation: hx-svc-nodePulse 7s linear infinite; animation-delay: calc(var(--hx-t, 0) * -7s); filter: drop-shadow(0 8px 16px rgba(23, 18, 14, 0.14)); } @keyframes hx-svc-nodePulse { 0% { transform: scale(1.14); stroke: var(--hx-g1); } 9% { transform: scale(1); stroke: rgba(23, 18, 14, 0.1); } 100% { transform: scale(1); } } .hx-main.hx-svc .hx-svc-loop-ico { color: var(--hx-ink); } .hx-main.hx-svc .hx-svc-loop-node.is-active .hx-svc-loop-dot { fill: var(--hx-g1); stroke: var(--hx-g1); } .hx-main.hx-svc .hx-svc-loop-node.is-active .hx-svc-loop-ico { color: #fff; } .hx-main.hx-svc .hx-svc-loop-label { font-size: 15px; font-weight: 700; fill: var(--hx-ink); letter-spacing: -0.01em; } .hx-main.hx-svc .hx-svc-loop-node.is-active .hx-svc-loop-label { fill: var(--hx-g1); } .hx-main.hx-svc .hx-svc-loop-band .hx-svc-loop { padding-inline: clamp(0px, 2vw, 24px); } .hx-main.hx-svc .hx-svc-loop-caption { max-width: 60ch; margin: 18px auto 0; text-align: center; color: var(--hx-body); font-size: 1rem; text-wrap: pretty; } /* ============================================================ benefits bento — five cells, five small scenes (they start on .is-on, set when the cell scrolls into view) ============================================================ */ .hx-main.hx-svc .hx-svc-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } .hx-main.hx-svc .hx-svc-bento-cell { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 14px; /* the scene row is shared across the row of cards, so every icon and heading sits on the same line */ padding: 20px; border-radius: var(--hx-radius-card); background: var(--hx-glass); border: 1px solid var(--hx-glass-line); box-shadow: var(--hx-glass-shadow); transition: transform 0.35s ease, box-shadow 0.35s ease; } .hx-main.hx-svc .hx-svc-bento-cell:hover { transform: translateY(-3px); box-shadow: var(--hx-glass-shadow), 0 30px 50px -34px var(--hx-g1); } .hx-main.hx-svc .hx-svc-bento-cell--a, .hx-main.hx-svc .hx-svc-bento-cell--b { grid-column: span 3; } .hx-main.hx-svc .hx-svc-bento-cell--c, .hx-main.hx-svc .hx-svc-bento-cell--d, .hx-main.hx-svc .hx-svc-bento-cell--e { grid-column: span 2; } .hx-main.hx-svc .hx-svc-bento-cell--a { background: linear-gradient(150deg, rgba(255, 255, 255, 0.86) 45%, color-mix(in srgb, var(--hx-g1) 12%, transparent)); } .hx-main.hx-svc .hx-svc-bento-cell--c { background: linear-gradient(160deg, color-mix(in srgb, var(--hx-g1) 32%, #1a1216), color-mix(in srgb, var(--hx-g1) 62%, #1a1216) 70%, color-mix(in srgb, var(--hx-g2) 55%, #1a1216)); border-color: transparent; color: #fff; } /* deep accent: white text stays above AA */ .hx-main.hx-svc .hx-svc-bento-cell--c .hx-svc-bento-text h3, .hx-main.hx-svc .hx-svc-bento-cell--c .hx-svc-bento-text p, .hx-main.hx-svc .hx-svc-bento-cell--c .hx-svc-bento-text .hx-as-h3 { color: #fff; } .hx-main.hx-svc .hx-svc-bento-cell--c .hx-svc-bento-ico { background: rgba(255, 255, 255, 0.2); color: #fff; } .hx-main.hx-svc .hx-svc-bento-cell--d { color: #fff; } .hx-main.hx-svc .hx-svc-bento-cell--d .hx-svc-bento-text h3, .hx-main.hx-svc .hx-svc-bento-cell--d .hx-svc-bento-text p, .hx-main.hx-svc .hx-svc-bento-cell--d .hx-svc-bento-text .hx-as-h3 { color: #fff; } .hx-main.hx-svc .hx-svc-bento-cell--d .hx-svc-bento-ico { background: rgba(255, 255, 255, 0.18); color: #fff; } .hx-main.hx-svc .hx-svc-scene { position: relative; min-height: 132px; display: grid; align-content: center; } /* the grid fits the number of benefits: five is the bento (3+3 over 2+2+2); otherwise equal cells */ .hx-main.hx-svc .hx-svc-bento[data-count="1"] .hx-svc-bento-cell, .hx-main.hx-svc .hx-svc-bento[data-count="2"] .hx-svc-bento-cell { grid-column: span 3; } .hx-main.hx-svc .hx-svc-bento[data-count="1"] .hx-svc-bento-cell { grid-column: 2 / span 4; } .hx-main.hx-svc .hx-svc-bento[data-count="3"] .hx-svc-bento-cell, .hx-main.hx-svc .hx-svc-bento[data-count="6"] .hx-svc-bento-cell { grid-column: span 2; } .hx-main.hx-svc .hx-svc-bento[data-count="4"] .hx-svc-bento-cell { grid-column: span 3; } .hx-main.hx-svc .hx-svc-benefits-outro { margin: 28px auto 0; max-width: 62ch; text-align: center; } /* likes arriving on a post */ .hx-main.hx-svc .hx-svc-likes { position: relative; display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: center; min-height: 132px; } .hx-main.hx-svc .hx-svc-likes-photo { width: 128px; height: 160px; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 24px -14px rgba(23, 18, 14, 0.5); } .hx-main.hx-svc .hx-svc-likes-row { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--hx-ink); } .hx-main.hx-svc .hx-svc-likes-heart { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #e1306c; box-shadow: 0 6px 16px -8px rgba(23, 18, 14, 0.4); transform: scale(0.6); opacity: 0; } .hx-main.hx-svc .is-on .hx-svc-likes-heart { animation: hx-svc-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.3s forwards; } .hx-main.hx-svc .hx-svc-likes-text b[data-hx-live-n] { font-variant-numeric: tabular-nums; } .hx-main.hx-svc .hx-svc-likes-hearts { position: absolute; left: 88px; bottom: 38px; width: 40px; height: 90px; pointer-events: none; } .hx-main.hx-svc .hx-svc-likes-hearts i { position: absolute; left: calc(var(--hx-i) * 12px); bottom: 0; font-style: normal; font-size: 16px; color: #e1306c; opacity: 0; } .hx-main.hx-svc .is-on .hx-svc-likes-hearts i { animation: hx-svc-float 2.6s ease-out infinite; animation-delay: calc(0.5s + var(--hx-i) * 0.7s); } .hx-main.hx-svc .hx-svc-bento-cell:not(.is-live) .hx-svc-likes-hearts i { animation-play-state: paused; } @keyframes hx-svc-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes hx-svc-float { 0% { opacity: 0; transform: translateY(0) scale(0.7); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) scale(1.1); } } /* the profile at first glance */ .hx-main.hx-svc .hx-svc-profile { position: relative; overflow: hidden; display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid rgba(23, 18, 14, 0.08); box-shadow: 0 14px 30px -24px rgba(23, 18, 14, 0.5); } .hx-main.hx-svc .hx-svc-profile-head { display: flex; align-items: center; gap: 10px; } .hx-main.hx-svc .hx-svc-profile-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .hx-main.hx-svc .hx-svc-profile-name { display: grid; line-height: 1.2; } .hx-main.hx-svc .hx-svc-profile-name b { font-size: 0.86rem; color: var(--hx-ink); } .hx-main.hx-svc .hx-svc-profile-name small { font-size: 0.72rem; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-profile-stats { display: flex; gap: 14px; font-size: 0.7rem; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-profile-stats b { display: block; font-size: 0.9rem; color: var(--hx-ink); font-variant-numeric: tabular-nums; } .hx-main.hx-svc .hx-svc-profile-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .hx-main.hx-svc .hx-svc-profile-tiles img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 6px; opacity: 0; transform: translateY(6px); } .hx-main.hx-svc .is-on .hx-svc-profile-tiles img { animation: hx-svc-fadeUp 0.5s ease forwards; animation-delay: calc(0.2s + var(--hx-i) * 0.15s); } .hx-main.hx-svc .hx-svc-profile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; } .hx-main.hx-svc .is-on .hx-svc-profile::after { animation: hx-svc-sweep 1.4s ease 0.8s 1; } @keyframes hx-svc-sweep { to { transform: translateX(100%); } } /* a feed with one look */ .hx-main.hx-svc .hx-svc-brand { position: relative; display: grid; gap: 8px; } .hx-main.hx-svc .hx-svc-brand-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 240px; } .hx-main.hx-svc .hx-svc-brand-tiles span { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; opacity: 0; transform: scale(0.9); } .hx-main.hx-svc .hx-svc-brand-tiles span::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--hx-g1) 38%, transparent); mix-blend-mode: multiply; } .hx-main.hx-svc .hx-svc-brand-tiles img { width: 100%; height: 100%; object-fit: cover; display: block; } .hx-main.hx-svc .is-on .hx-svc-brand-tiles span { animation: hx-svc-settle 0.45s ease forwards; animation-delay: calc(var(--hx-i) * 0.12s); } @keyframes hx-svc-settle { to { opacity: 1; transform: scale(1); } } .hx-main.hx-svc .hx-svc-brand-chip { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--hx-ink); font-size: 0.74rem; font-weight: 700; opacity: 0; } .hx-main.hx-svc .is-on .hx-svc-brand-chip { animation: hx-svc-fadeUp 0.5s ease 1s forwards; } /* the admin's own picture */ .hx-main.hx-svc .hx-svc-picture img { width: 100%; max-height: 180px; object-fit: contain; border-radius: 12px; display: block; } .hx-main.hx-svc .hx-svc-picture--nobg img { border-radius: 0; filter: drop-shadow(0 14px 22px rgba(23, 18, 14, 0.18)); } @media (max-width: 760px) { .hx-main.hx-svc .hx-svc-bento[data-count] .hx-svc-bento-cell { grid-column: 1 / -1; } } .hx-main.hx-svc .hx-svc-bento-text { position: relative; z-index: 1; display: grid; gap: 6px; align-content: start; } .hx-main.hx-svc .hx-svc-bento-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--hx-svc-tint); color: var(--hx-g1); margin-bottom: 4px; } .hx-main.hx-svc .hx-svc-bento-ico img, .hx-main.hx-svc .hx-svc-bento-ico svg { width: 20px; height: 20px; } .hx-main.hx-svc .hx-svc-bento-text h3, .hx-main.hx-svc .hx-svc-bento-text .hx-as-h3 { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; } .hx-main.hx-svc .hx-svc-bento-text p { font-size: 0.92rem; line-height: 1.6; color: var(--hx-body); } /* credibility: the verified tick draws, then who follows */ .hx-main.hx-svc .hx-svc-cred { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 16px 30px -24px rgba(23, 18, 14, 0.4); } .hx-main.hx-svc .hx-svc-cred-ava { width: 44px; height: 44px; border-radius: 50%; padding: 2px; background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); grid-row: span 2; } .hx-main.hx-svc .hx-svc-cred-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; } .hx-main.hx-svc .hx-svc-cred-name { display: grid; line-height: 1.25; } .hx-main.hx-svc .hx-svc-cred-name b { display: inline-flex; align-items: center; gap: 5px; color: #111; font-size: 0.92rem; } .hx-main.hx-svc .hx-svc-cred-name small { font-size: 0.72rem; color: #737373; } .hx-main.hx-svc .hx-svc-cred-tick { opacity: 0; transform: scale(0.4); } .hx-main.hx-svc .is-on .hx-svc-cred-tick { animation: hx-svc-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4) 0.4s forwards; } .hx-main.hx-svc .hx-svc-cred-tick-path { stroke-dasharray: 1; stroke-dashoffset: 1; } .hx-main.hx-svc .is-on .hx-svc-cred-tick-path { animation: hx-svc-draw 0.5s ease 0.8s forwards; } .hx-main.hx-svc .hx-svc-cred-followed { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.74rem; color: #262626; opacity: 0; transform: translateY(6px); } .hx-main.hx-svc .hx-svc-cred-followed-text { flex: 1 1 140px; min-width: 0; } .hx-main.hx-svc .hx-svc-cred-followed b { color: #111; } .hx-main.hx-svc .is-on .hx-svc-cred-followed { animation: hx-svc-fadeUp 0.5s ease 1.2s forwards; } .hx-main.hx-svc .hx-svc-cred-discs { display: inline-flex; } .hx-main.hx-svc .hx-svc-cred-discs img { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; margin-left: -7px; opacity: 0; transform: scale(0.5); } .hx-main.hx-svc .hx-svc-cred-discs img:first-child { margin-left: 0; } .hx-main.hx-svc .is-on .hx-svc-cred-discs img { animation: hx-svc-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4) forwards; animation-delay: calc(1.4s + var(--hx-i) * 0.18s); } @keyframes hx-svc-pop { to { opacity: 1; transform: none; } } @keyframes hx-svc-draw { to { stroke-dashoffset: 0; } } @keyframes hx-svc-fadeUp { to { opacity: 1; transform: none; } } /* growth: a sparkline draws under a live count */ .hx-main.hx-svc .hx-svc-growth { display: grid; gap: 6px; } .hx-main.hx-svc .hx-svc-growth-n { position: relative; display: flex; align-items: baseline; gap: 8px; } .hx-main.hx-svc .hx-svc-growth-n b { font-family: var(--hx-font-display), sans-serif; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--hx-ink); font-variant-numeric: tabular-nums; } .hx-main.hx-svc .hx-svc-growth-n span { font-size: 0.8rem; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-growth-n .hx-count-tick { top: -12px; right: auto; left: 100%; margin-left: 6px; } .hx-main.hx-svc .hx-svc-spark { width: 100%; height: 84px; overflow: visible; } .hx-main.hx-svc .hx-svc-spark-area { fill: var(--hx-g1); opacity: 0; } .hx-main.hx-svc .is-on .hx-svc-spark-area { animation: hx-svc-sparkArea 1s ease 0.9s forwards; } @keyframes hx-svc-sparkArea { to { opacity: 0.12; } } .hx-main.hx-svc .hx-svc-spark-line { fill: none; stroke: var(--hx-g1); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .hx-main.hx-svc .is-on .hx-svc-spark-line { animation: hx-svc-draw 1.4s cubic-bezier(0.3, 0.7, 0.3, 1) 0.2s forwards; } .hx-main.hx-svc .hx-svc-spark-dot { fill: var(--hx-g2); opacity: 0; } .hx-main.hx-svc .is-on .hx-svc-spark-dot { animation: hx-svc-pop 0.3s ease 1.5s forwards; } /* visibility: rings of reach spread from the eye */ .hx-main.hx-svc .hx-svc-reach { position: relative; min-height: 132px; display: grid; place-items: center; } .hx-main.hx-svc .hx-svc-reach-eye { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--hx-g1); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.4); } .hx-main.hx-svc .hx-svc-reach-ring { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8); opacity: 0; } .hx-main.hx-svc .is-on .hx-svc-reach-ring { animation: hx-svc-ring 3s ease-out infinite; animation-delay: calc(var(--hx-i) * 1s); } .hx-main.hx-svc .hx-svc-bento-cell:not(.is-live) .hx-svc-reach-ring { animation-play-state: paused; } @keyframes hx-svc-ring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } } .hx-main.hx-svc .hx-svc-reach-chip { position: absolute; right: 0; top: 4px; font-family: var(--hx-font-mono), monospace; font-size: 0.62rem; font-weight: 700; color: var(--hx-g1); background: #fff; border-radius: 999px; padding: 6px 10px; opacity: 0; transform: translateY(6px); } .hx-main.hx-svc .is-on .hx-svc-reach-chip { animation: hx-svc-fadeUp 0.5s ease 0.8s forwards; } /* monetisation: a brand DM arrives over Noor's photo */ .hx-main.hx-svc .hx-svc-bento-cell--d { background: #2b1a1e; } .hx-main.hx-svc .hx-svc-money { position: static; min-height: 132px; display: grid; align-content: end; gap: 8px; } .hx-main.hx-svc .hx-svc-money-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: blur(6px) brightness(0.5) saturate(1.1); transform: scale(1.08); } .hx-main.hx-svc .hx-svc-bento-cell--d::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(23, 18, 14, 0.1), rgba(23, 18, 14, 0.78) 72%); } /* a scrim so the text reads over the photo */ .hx-main.hx-svc .hx-svc-bento-cell--d .hx-svc-scene { z-index: 1; } .hx-main.hx-svc .hx-svc-dm { display: flex; align-items: center; gap: 8px; max-width: 92%; padding: 8px 10px; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, 0.96); color: #111; font-size: 0.76rem; line-height: 1.35; box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(10px); } .hx-main.hx-svc .hx-svc-dm b { display: block; font-size: 0.7rem; color: var(--hx-g1); } .hx-main.hx-svc .hx-svc-dm-ava { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--hx-svc-accent-grad); color: #fff; font-weight: 800; font-size: 0.7rem; } .hx-main.hx-svc .hx-svc-dm--reply { align-self: end; border-radius: 14px 14px 4px 14px; background: var(--hx-svc-accent-grad); color: #fff; } .hx-main.hx-svc .hx-svc-dm--reply b { display: inline; color: #fff; font-size: 0.8rem; margin-left: 4px; } .hx-main.hx-svc .is-on .hx-svc-dm { animation: hx-svc-fadeUp 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.5s forwards; } .hx-main.hx-svc .is-on .hx-svc-dm--reply { animation-delay: 1.5s; } /* algorithm: Noor's post climbs to first */ .hx-main.hx-svc .hx-svc-rank { position: relative; height: 132px; } .hx-main.hx-svc .hx-svc-rank-row { position: absolute; left: 22px; right: 0; top: 0; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 12px; background: #fff; color: #262626; font-size: 0.78rem; font-weight: 600; box-shadow: 0 10px 22px -18px rgba(23, 18, 14, 0.5); transform: translateY(calc(var(--hx-from) * 46px)); } .hx-main.hx-svc .hx-svc-rank > .hx-svc-rank-n { position: absolute; left: 0; top: calc(var(--hx-r) * 46px); height: 38px; display: inline-flex; align-items: center; } .hx-main.hx-svc .is-on .hx-svc-rank-row { animation: hx-svc-rankMove 0.9s cubic-bezier(0.3, 0.8, 0.3, 1) 0.9s forwards; } @keyframes hx-svc-rankMove { to { transform: translateY(calc(var(--hx-to) * 46px)); } } .hx-main.hx-svc .hx-svc-rank-row img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; } .hx-main.hx-svc .hx-svc-rank-n { font-family: var(--hx-font-mono), monospace; font-size: 0.7rem; color: var(--hx-svc-ink-soft); width: 12px; } .hx-main.hx-svc .hx-svc-rank-row.is-star { color: #111; border: 1.5px solid transparent; } .hx-main.hx-svc .is-on .hx-svc-rank-row.is-star { animation: hx-svc-rankMove 0.9s cubic-bezier(0.3, 0.8, 0.3, 1) 0.9s forwards, hx-svc-rankStar 0.6s ease 1.7s forwards; } @keyframes hx-svc-rankStar { to { border-color: var(--hx-g1); box-shadow: 0 14px 28px -16px var(--hx-g1); } } .hx-main.hx-svc .hx-svc-rank-row.is-star svg { margin-left: auto; color: var(--hx-g2); } /* ============================================================ by the numbers — one line of counting stats ============================================================ */ .hx-main.hx-svc .hx-svc-kicker { font-family: var(--hx-font-mono), monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--hx-g1); } .hx-main.hx-svc .hx-svc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .hx-main.hx-svc .hx-svc-stat { display: grid; gap: 6px; justify-items: center; text-align: center; padding: clamp(18px, 2.4vw, 28px) 12px; border-radius: var(--hx-radius-card); background: var(--hx-glass); border: 1px solid var(--hx-glass-line); box-shadow: var(--hx-glass-shadow); } .hx-main.hx-svc .hx-svc-stat-v { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--hx-font-display), sans-serif; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--hx-ink); font-variant-numeric: tabular-nums; } .hx-main.hx-svc .hx-svc-stat-sfx { font-size: 0.6em; background: var(--hx-svc-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hx-main.hx-svc .hx-svc-stat-l { font-family: var(--hx-font-mono), monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hx-svc-ink-soft); text-wrap: balance; } /* ============================================================ order rail — three stops, a beam sweeps them on a 7.5 s loop and each small UI reacts as it passes ============================================================ */ .hx-main.hx-svc .hx-svc-rail { --hx-svc-rail-t: 7.5s; position: relative; } .hx-main.hx-svc .hx-svc-rail-track { position: absolute; z-index: 0; top: 30px; left: calc(100% / var(--hx-n, 3) / 2); right: calc(100% / var(--hx-n, 3) / 2); height: 4px; border-radius: 999px; background: rgba(23, 18, 14, 0.1); overflow: hidden; } .hx-main.hx-svc .hx-svc-rail-beam { position: absolute; top: 0; left: 0; height: 100%; width: 26%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--hx-g1) 55%, var(--hx-g2)); transform: translateX(-100%); animation: hx-svc-beam var(--hx-svc-rail-t) linear infinite; } @keyframes hx-svc-beam { to { transform: translateX(385%); } } .hx-main.hx-svc .hx-svc-rail:not(.is-live) .hx-svc-rail-beam, .hx-main.hx-svc .hx-svc-rail:not(.is-live) .hx-svc-stop-dot, .hx-main.hx-svc .hx-svc-rail:not(.is-live) .hx-svc-mini * { animation-play-state: paused; } .hx-main.hx-svc .hx-svc-stops { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--hx-n, 3), minmax(0, 1fr)); gap: 18px; counter-reset: none; } .hx-main.hx-svc .hx-svc-stop { display: grid; align-content: start; justify-items: center; text-align: center; gap: 12px; padding: 0 10px; } .hx-main.hx-svc .hx-svc-stop h3, .hx-main.hx-svc .hx-svc-stop .hx-as-h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; } .hx-main.hx-svc .hx-svc-stop p { font-size: 0.92rem; line-height: 1.6; color: var(--hx-body); max-width: 30ch; } .hx-main.hx-svc .hx-svc-stop-dot { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--hx-ink); border: 1px solid var(--hx-glass-line); box-shadow: 0 16px 30px -20px rgba(23, 18, 14, 0.5); animation: hx-svc-stopPulse var(--hx-svc-rail-t) ease infinite; animation-delay: calc(var(--hx-i) / max(1, var(--hx-n, 3) - 1) * var(--hx-svc-rail-t) * 0.8); } .hx-main.hx-svc .hx-svc-rail--one .hx-svc-rail-track { display: none; } .hx-main.hx-svc .hx-svc-stop-dot img, .hx-main.hx-svc .hx-svc-stop-dot svg { width: 22px; height: 22px; } @keyframes hx-svc-stopPulse { 0%, 3% { box-shadow: 0 16px 30px -20px rgba(23, 18, 14, 0.5), 0 0 0 0 rgba(211, 60, 105, 0); border-color: var(--hx-glass-line); } 6% { box-shadow: 0 16px 30px -20px rgba(23, 18, 14, 0.5), 0 0 0 10px color-mix(in srgb, var(--hx-g1) 18%, transparent); border-color: var(--hx-g1); } 16%, 100% { box-shadow: 0 16px 30px -20px rgba(23, 18, 14, 0.5), 0 0 0 0 rgba(211, 60, 105, 0); border-color: var(--hx-glass-line); } } .hx-main.hx-svc .hx-svc-stop-n { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--hx-svc-accent-grad); color: #fff; font-family: var(--hx-font-mono), monospace; font-size: 0.66rem; font-weight: 700; } .hx-main.hx-svc .hx-svc-mini { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; max-width: 300px; } .hx-main.hx-svc .hx-svc-mini-pill { flex: 1; padding: 9px 6px; border-radius: 12px; border: 1.5px solid var(--hx-svc-line); background: #fff; font-family: var(--hx-font-mono), monospace; font-size: 0.74rem; font-weight: 700; color: var(--hx-ink); } .hx-main.hx-svc .hx-svc-mini-pill--hot { animation: hx-svc-pillPick var(--hx-svc-rail-t) ease infinite; } @keyframes hx-svc-pillPick { 0%, 4% { background: #fff; color: var(--hx-ink); border-color: var(--hx-svc-line); transform: none; } 8% { transform: scale(1.06); } 10%, 94% { background: var(--hx-svc-accent-grad); color: #fff; border-color: transparent; transform: none; } 100% { background: #fff; color: var(--hx-ink); border-color: var(--hx-svc-line); } } /* the link stop: one box the height of its neighbours, three layers stacked like the pay button. On the 7.5 s loop the address types in (42-54%), a search runs with a spinner (56-70%, about a second), then the box turns green: profile found (72-96%). The three stops keep their boxes level, so the titles under them line up. */ .hx-main.hx-svc .hx-svc-mini--link { flex-direction: row; } .hx-main.hx-svc .hx-svc-mini-field { position: relative; display: grid; width: 100%; max-width: 300px; height: 44px; border-radius: 12px; overflow: hidden; background: #fff; border: 1.5px solid var(--hx-svc-line); color: var(--hx-g1); font-family: var(--hx-font-mono), monospace; font-size: 0.72rem; } .hx-main.hx-svc .hx-svc-mini-done { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; max-width: 300px; height: 44px; padding: 0 14px; border-radius: 12px; background: #fff; border: 1.5px solid var(--hx-svc-line); font-size: 0.78rem; font-weight: 700; color: var(--hx-ink); animation: hx-svc-donePulse var(--hx-svc-rail-t) ease infinite; animation-delay: calc(var(--hx-i) / max(1, var(--hx-n, 3) - 1) * var(--hx-svc-rail-t) * 0.8); } @keyframes hx-svc-donePulse { 0%, 3% { background: #fff; color: var(--hx-ink); border-color: var(--hx-svc-line); } 7%, 60% { background: var(--hx-green); color: #fff; border-color: transparent; } 70%, 100% { background: #fff; color: var(--hx-ink); border-color: var(--hx-svc-line); } } .hx-main.hx-svc .hx-svc-mini-field > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 0 12px; } .hx-main.hx-svc .hx-svc-mini-field-a { animation: hx-svc-fieldA var(--hx-svc-rail-t) ease infinite; } .hx-main.hx-svc .hx-svc-mini-field-b { justify-content: center; background: #fff; color: var(--hx-ink); font-family: var(--hx-font-display), sans-serif; font-size: 0.78rem; font-weight: 700; opacity: 0; animation: hx-svc-fieldB var(--hx-svc-rail-t) ease infinite; } .hx-main.hx-svc .hx-svc-mini-field-c { justify-content: center; background: var(--hx-green); color: #fff; font-family: var(--hx-font-display), sans-serif; font-size: 0.8rem; font-weight: 700; opacity: 0; animation: hx-svc-fieldC var(--hx-svc-rail-t) ease infinite; } .hx-main.hx-svc .hx-svc-mini-type { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--hx-ink); animation: hx-svc-typeIn var(--hx-svc-rail-t) steps(24, end) infinite; } @keyframes hx-svc-typeIn { 0%, 42% { max-width: 0; } 54%, 98% { max-width: 100%; } 100% { max-width: 0; } } .hx-main.hx-svc .hx-svc-mini-caret { width: 1.5px; height: 12px; background: var(--hx-ink); animation: hx-svc-caret 0.9s steps(1) infinite; } @keyframes hx-svc-caret { 50% { opacity: 0; } } .hx-main.hx-svc .hx-svc-mini-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--hx-g1) 22%, transparent); border-top-color: var(--hx-g1); animation: hx-svc-spin 0.8s linear infinite; } @keyframes hx-svc-spin { to { transform: rotate(360deg); } } @keyframes hx-svc-fieldA { 0%, 55% { opacity: 1; } 56.5%, 98% { opacity: 0; } 100% { opacity: 1; } } @keyframes hx-svc-fieldB { 0%, 56.5% { opacity: 0; } 58%, 69% { opacity: 1; } 72%, 100% { opacity: 0; } } @keyframes hx-svc-fieldC { 0%, 69% { opacity: 0; transform: translateY(8px); } 73%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } } .hx-main.hx-svc .hx-svc-mini-btn { position: relative; display: grid; width: 100%; max-width: 200px; border-radius: 999px; overflow: hidden; font-size: 0.8rem; font-weight: 700; } .hx-main.hx-svc .hx-svc-mini-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; } .hx-main.hx-svc .hx-svc-mini-btn-a { background: var(--hx-svc-accent-grad); color: #fff; animation: hx-svc-payA var(--hx-svc-rail-t) ease infinite; } .hx-main.hx-svc .hx-svc-mini-btn-b { background: var(--hx-green); color: #fff; opacity: 0; animation: hx-svc-payB var(--hx-svc-rail-t) ease infinite; } @keyframes hx-svc-payA { 0%, 82% { opacity: 1; } 86%, 96% { opacity: 0; } 100% { opacity: 1; } } @keyframes hx-svc-payB { 0%, 82% { opacity: 0; transform: translateY(6px); } 86%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } } /* ============================================================ sticky order pill (phones) — appears once the order card has scrolled away ============================================================ */ .hx-main.hx-svc .hx-svc-pill { position: fixed; z-index: 74; left: calc(14px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: none; align-items: center; gap: 10px; max-width: calc(100vw - 110px); padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--hx-ink); color: #fff; font-size: 0.82rem; font-weight: 700; box-shadow: 0 18px 40px -16px rgba(23, 18, 14, 0.6); transform: translateY(120%); opacity: 0; transition: transform 0.5s var(--hx-svc-ease), opacity 0.4s ease; } .hx-main.hx-svc .hx-svc-pill.is-on { transform: none; opacity: 1; } .hx-main.hx-svc .hx-svc-pill-price { padding: 7px 11px; border-radius: 999px; background: var(--hx-svc-accent-grad); font-family: var(--hx-font-mono), monospace; font-size: 0.74rem; white-space: nowrap; } .hx-main.hx-svc .hx-svc-pill-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ promise stack — the why-us cards pile up as you scroll, each with a live illustration ============================================================ */ .hx-main.hx-svc .hx-svc-stack { display: grid; gap: 18px; --hx-svc-stack-top: calc(var(--hx-top-offset, 75px) + 20px); } /* under the strip and the header, whatever their height */ .hx-main.hx-svc .hx-svc-promise { position: sticky; top: calc(var(--hx-svc-stack-top) + var(--hx-i, 0) * 16px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(20px, 3vw, 44px); align-items: center; min-height: 260px; padding: clamp(22px, 3vw, 36px); border-radius: var(--hx-radius-card); background: rgba(255, 255, 255, 0.92); border: 1px solid var(--hx-glass-line); box-shadow: 0 -14px 40px -30px rgba(23, 18, 14, 0.25), var(--hx-glass-shadow); } .hx-main.hx-svc .hx-svc-promise:nth-child(even) { background: linear-gradient(150deg, rgba(255, 255, 255, 0.94) 40%, rgba(255, 236, 228, 0.96)); } .hx-main.hx-svc .hx-svc-promise-copy { display: grid; gap: 10px; justify-items: start; } .hx-main.hx-svc .hx-svc-promise-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--hx-svc-tint); color: var(--hx-g1); margin-bottom: 4px; } .hx-main.hx-svc .hx-svc-promise-ico img, .hx-main.hx-svc .hx-svc-promise-ico svg { width: 22px; height: 22px; } .hx-main.hx-svc .hx-svc-promise-copy h3, .hx-main.hx-svc .hx-svc-promise-copy .hx-as-h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 800; letter-spacing: -0.015em; } .hx-main.hx-svc .hx-svc-promise-copy p { font-size: 0.98rem; line-height: 1.65; color: var(--hx-body); max-width: 48ch; } .hx-main.hx-svc .hx-svc-promise-art { display: grid; place-items: center; min-height: 200px; } /* support thread */ .hx-main.hx-svc .hx-svc-thread { width: min(320px, 100%); display: grid; gap: 8px; } .hx-main.hx-svc .hx-svc-msg { max-width: 86%; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: #fff; color: #262626; font-size: 0.84rem; line-height: 1.4; box-shadow: 0 12px 24px -18px rgba(23, 18, 14, 0.45); opacity: 0; transform: translateY(8px); } .hx-main.hx-svc .hx-svc-msg b { display: block; font-size: 0.68rem; color: var(--hx-g1); margin-bottom: 2px; } .hx-main.hx-svc .hx-svc-msg--me { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--hx-ink); color: #fff; } .hx-main.hx-svc .hx-svc-msg--typing { display: inline-flex; gap: 4px; padding: 12px 14px; } .hx-main.hx-svc .hx-svc-msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: #9a8a8a; animation: hx-svc-typing 1s ease-in-out infinite; } .hx-main.hx-svc .hx-svc-msg--typing i:nth-child(2) { animation-delay: 0.15s; } .hx-main.hx-svc .hx-svc-msg--typing i:nth-child(3) { animation-delay: 0.3s; } @keyframes hx-svc-typing { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-3px); opacity: 1; } } .hx-main.hx-svc .is-on .hx-svc-msg { animation: hx-svc-fadeUp 0.45s ease forwards; animation-delay: calc(0.3s + var(--hx-i) * 0.9s); } .hx-main.hx-svc .is-on .hx-svc-msg--typing { animation: hx-svc-typingBubble 1.9s ease 1.2s forwards; } @keyframes hx-svc-typingBubble { 0% { opacity: 0; transform: translateY(8px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); height: 0; padding: 0; margin: -8px 0 0; } } .hx-main.hx-svc .hx-svc-thread-time { display: inline-flex; align-items: center; gap: 6px; font-family: var(--hx-font-mono), monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hx-green); opacity: 0; } .hx-main.hx-svc .is-on .hx-svc-thread-time { animation: hx-svc-fadeUp 0.4s ease 3.4s forwards; } /* checkout card */ .hx-main.hx-svc .hx-svc-checkout { display: grid; gap: 14px; justify-items: center; width: min(300px, 100%); } .hx-main.hx-svc .hx-svc-checkout-card { width: 100%; aspect-ratio: 1.6; border-radius: 16px; padding: 18px; display: grid; align-content: space-between; background: linear-gradient(135deg, #2b1a1e, #4a2530 60%, var(--hx-g1)); color: #fff; box-shadow: 0 24px 40px -24px rgba(23, 18, 14, 0.6); transform: rotate(-3deg) translateY(10px); opacity: 0; } .hx-main.hx-svc .is-on .hx-svc-checkout-card { animation: hx-svc-cardIn 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) 0.2s forwards; } @keyframes hx-svc-cardIn { to { opacity: 1; transform: rotate(-3deg) translateY(0); } } .hx-main.hx-svc .hx-svc-checkout-chip { width: 34px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #f3d38a, #c9a24d); } .hx-main.hx-svc .hx-svc-checkout-num { font-family: var(--hx-font-mono), monospace; font-size: 0.95rem; letter-spacing: 0.08em; } .hx-main.hx-svc .hx-svc-checkout-row { display: flex; justify-content: space-between; gap: 10px; font-family: var(--hx-font-mono), monospace; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; } .hx-main.hx-svc .hx-svc-checkout-row span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* a long business-page name never widens the card */ .hx-main.hx-svc .hx-svc-checkout-line { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--hx-ink); font-size: 0.82rem; font-weight: 700; box-shadow: 0 12px 24px -18px rgba(23, 18, 14, 0.5); opacity: 0; } .hx-main.hx-svc .is-on .hx-svc-checkout-line { animation: hx-svc-fadeUp 0.5s ease 0.9s forwards; } .hx-main.hx-svc .hx-svc-checkout-line > svg:first-child { color: var(--hx-green); } .hx-main.hx-svc .hx-svc-checkout-tick { color: var(--hx-green); } .hx-main.hx-svc .hx-svc-checkout-tick circle, .hx-main.hx-svc .hx-svc-checkout-tick path { stroke-dasharray: 1; stroke-dashoffset: 1; } .hx-main.hx-svc .is-on .hx-svc-checkout-tick circle { animation: hx-svc-draw 0.6s ease 1.4s forwards; } .hx-main.hx-svc .is-on .hx-svc-checkout-tick path { animation: hx-svc-draw 0.4s ease 1.9s forwards; } /* shield and the 60-day ring */ .hx-main.hx-svc .hx-svc-shield { position: relative; display: grid; place-items: center; } .hx-main.hx-svc .hx-svc-shield-ring-bg { stroke: rgba(23, 18, 14, 0.08); } .hx-main.hx-svc .hx-svc-shield-ring { stroke: var(--hx-g1); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .hx-main.hx-svc .is-on .hx-svc-shield-ring { animation: hx-svc-draw 1.6s cubic-bezier(0.3, 0.7, 0.3, 1) 1s forwards; } .hx-main.hx-svc .hx-svc-shield-path { stroke: var(--hx-ink); stroke-dasharray: 1; stroke-dashoffset: 1; } .hx-main.hx-svc .is-on .hx-svc-shield-path { animation: hx-svc-draw 1s ease 0.2s forwards; } .hx-main.hx-svc .hx-svc-shield-tick { stroke: var(--hx-green); stroke-dasharray: 1; stroke-dashoffset: 1; } .hx-main.hx-svc .is-on .hx-svc-shield-tick { animation: hx-svc-draw 0.5s ease 1.2s forwards; } .hx-main.hx-svc .hx-svc-shield-label { position: absolute; bottom: -4px; font-family: var(--hx-font-mono), monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hx-g1); background: #fff; border-radius: 999px; padding: 6px 12px; box-shadow: 0 10px 22px -16px rgba(23, 18, 14, 0.5); opacity: 0; } .hx-main.hx-svc .hx-svc-shield-label b { font-size: 0.9rem; letter-spacing: 0; margin-right: 3px; } .hx-main.hx-svc .is-on .hx-svc-shield-label { animation: hx-svc-fadeUp 0.5s ease 2.4s forwards; } /* the reference cards (username only, packages, free trial, refill, pounds): one white card look */ .hx-main.hx-svc :is(.hx-svc-nopass, .hx-svc-pkrange, .hx-svc-trial, .hx-svc-refill, .hx-svc-gbp, .hx-svc-realp) { width: min(280px, 100%); display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: #fff; color: var(--hx-ink); font-size: 0.78rem; line-height: 1.4; box-shadow: 0 10px 30px color-mix(in srgb, var(--hx-g1) 12%, transparent), 0 1px 2px rgba(0, 0, 0, 0.04); text-align: left; } .hx-main.hx-svc :is(.hx-svc-nopass-label, .hx-svc-gbp-label) { font-family: var(--hx-font-mono), monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hx-svc-ink-soft); } /* username only */ .hx-main.hx-svc .hx-svc-nopass-field { position: relative; display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(23, 18, 14, 0.1); background: #fcfaf8; font-size: 0.82rem; } .hx-main.hx-svc .hx-svc-nopass-field i { font-style: normal; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-nopass-type { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 600; border-right: 2px solid var(--hx-g1); } .hx-main.hx-svc .is-on .hx-svc-nopass-type { animation: hx-svc-type 1.4s steps(14, end) 0.4s forwards; } @keyframes hx-svc-type { to { max-width: 100%; border-right-color: transparent; } } .hx-main.hx-svc .hx-svc-nopass-ok { margin-left: auto; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--hx-green); opacity: 0; transform: scale(0.6); } .hx-main.hx-svc .is-on .hx-svc-nopass-ok { animation: hx-svc-pop 0.4s ease 1.9s forwards; } .hx-main.hx-svc .hx-svc-nopass-pass b { color: var(--hx-svc-ink-soft); letter-spacing: 0.1em; } .hx-main.hx-svc .hx-svc-nopass-strike { position: absolute; left: 10px; top: 50%; height: 2px; width: 0; background: var(--hx-g1); border-radius: 2px; } .hx-main.hx-svc .is-on .hx-svc-nopass-strike { animation: hx-svc-strike 0.5s ease 2.2s forwards; } @keyframes hx-svc-strike { to { width: 78px; } } .hx-main.hx-svc .hx-svc-nopass-pass small { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--hx-g1) 12%, #fff); color: var(--hx-g1); font-size: 0.64rem; font-weight: 700; opacity: 0; } .hx-main.hx-svc .is-on .hx-svc-nopass-pass small { animation: hx-svc-fadeUp 0.4s ease 2.6s forwards; } .hx-main.hx-svc .hx-svc-nopass-btn { margin-top: 2px; display: grid; place-items: center; height: 36px; border-radius: 10px; background: var(--hx-svc-accent-grad, linear-gradient(135deg, var(--hx-g1), var(--hx-g2))); color: #fff; font-weight: 700; font-size: 0.8rem; } /* the card is a working search: a real input sits over the demo handle, the found profile and its buy button follow */ .hx-main.hx-svc .hx-svc-nopass { margin: 0; } .hx-main.hx-svc .hx-svc-nopass-btn { width: 100%; border: 0; cursor: pointer; font-family: inherit; transition: transform 0.2s ease, opacity 0.2s ease; } .hx-main.hx-svc .hx-svc-nopass-btn:hover { transform: translateY(-1px); } .hx-main.hx-svc .hx-svc-nopass-btn:disabled { opacity: 0.7; cursor: wait; transform: none; } .hx-main.hx-svc .hx-svc-nopass-btn:focus-visible { outline: 2px solid var(--hx-navy); outline-offset: 2px; } .hx-main.hx-svc .hx-svc-nopass-field { cursor: text; } .hx-main.hx-svc .hx-svc-nopass-field:focus-within { border-color: var(--hx-g1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hx-g1) 18%, transparent); } .hx-main.hx-svc .hx-svc-nopass-input { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); padding: 0 34px 0 24px; border: 0; border-radius: inherit; background: transparent; font: inherit; font-weight: 600; color: var(--hx-ink); outline: none; } .hx-main.hx-svc .hx-svc-nopass.is-live .hx-svc-nopass-type { display: none; } .hx-main.hx-svc .hx-svc-nopass.is-live .hx-svc-nopass-ok { animation: none; opacity: 0; } .hx-main.hx-svc .hx-svc-nopass.is-found .hx-svc-nopass-ok { opacity: 1; transform: none; } .hx-main.hx-svc .hx-svc-nopass-error { margin: 0; font-size: 0.74rem; font-weight: 600; line-height: 1.4; color: #b42318; } .hx-main.hx-svc .hx-svc-nopass-found { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 10px; align-items: center; margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(23, 18, 14, 0.08); } .hx-main.hx-svc .hx-svc-nopass-found .hx-svc-nopass-btn { grid-column: 1 / -1; } .hx-main.hx-svc .hx-svc-nopass-pic { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: color-mix(in srgb, var(--hx-g1) 12%, #fff); } .hx-main.hx-svc .hx-svc-nopass-who { display: grid; min-width: 0; line-height: 1.25; } .hx-main.hx-svc .hx-svc-nopass-who b { font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hx-main.hx-svc .hx-svc-nopass-who small { font-size: 0.7rem; color: var(--hx-svc-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Buy points the visitor at the order card: a ring that fades. An outline transition, never an animation: the card's entrance animation (opacity 0 until it rises) must stay in place or the card would vanish while the ring shows */ .hx-main.hx-svc .hx-svc-order { outline: 4px solid transparent; outline-offset: 5px; transition: outline-color 1.8s ease-out; } .hx-main.hx-svc .hx-svc-order.is-hinted { outline-color: color-mix(in srgb, var(--hx-g1) 70%, transparent); transition: none; } /* packages */ .hx-main.hx-svc .hx-svc-pkrange-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; } .hx-main.hx-svc .hx-svc-pkrange-top b { padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--hx-g1) 12%, #fff); color: var(--hx-g1); font-size: 0.68rem; } .hx-main.hx-svc .hx-svc-pkrange-count { display: flex; align-items: center; gap: 10px; } .hx-main.hx-svc .hx-svc-pkrange-heart { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--hx-svc-accent-grad, linear-gradient(135deg, var(--hx-g1), var(--hx-g2))); } .hx-main.hx-svc .hx-svc-pkrange-win { display: block; height: 34px; overflow: hidden; } .hx-main.hx-svc .hx-svc-pkrange-roll { display: grid; } .hx-main.hx-svc .hx-svc-pkrange-roll > span { display: flex; align-items: baseline; gap: 5px; height: 34px; font-family: var(--hx-font-display), sans-serif; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .hx-main.hx-svc .hx-svc-pkrange-roll small { font-size: 0.7rem; font-weight: 600; color: var(--hx-svc-ink-soft); letter-spacing: 0; } .hx-main.hx-svc .is-on .hx-svc-pkrange-roll { animation: hx-svc-roll 5s steps(5, end) 0.6s forwards; } @keyframes hx-svc-roll { to { transform: translateY(-170px); } } .hx-main.hx-svc .hx-svc-pkrange-track { position: relative; display: block; height: 6px; border-radius: 3px; background: rgba(23, 18, 14, 0.08); } .hx-main.hx-svc .hx-svc-pkrange-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 6%; border-radius: 3px; background: var(--hx-svc-accent-grad, linear-gradient(90deg, var(--hx-g1), var(--hx-g2))); } .hx-main.hx-svc .hx-svc-pkrange-thumb { position: absolute; top: 50%; left: 6%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 3px solid var(--hx-g1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .hx-main.hx-svc .is-on .hx-svc-pkrange-fill { animation: hx-svc-fill 5s steps(5, end) 0.6s forwards; } .hx-main.hx-svc .is-on .hx-svc-pkrange-thumb { animation: hx-svc-thumb 5s steps(5, end) 0.6s forwards; } @keyframes hx-svc-fill { to { width: 100%; } } @keyframes hx-svc-thumb { to { left: 100%; } } .hx-main.hx-svc .hx-svc-pkrange-scale { display: flex; justify-content: space-between; font-family: var(--hx-font-mono), monospace; font-size: 0.62rem; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-pkrange-chips { display: flex; flex-wrap: wrap; gap: 6px; } .hx-main.hx-svc .hx-svc-pkrange-chips span { padding: 4px 9px; border-radius: 999px; background: #fcfaf8; border: 1px solid rgba(23, 18, 14, 0.1); font-size: 0.68rem; font-weight: 600; opacity: 0; } .hx-main.hx-svc .is-on .hx-svc-pkrange-chips span { animation: hx-svc-fadeUp 0.4s ease forwards; animation-delay: calc(0.8s + var(--hx-i) * 0.25s); } /* free trial on WhatsApp */ .hx-main.hx-svc .hx-svc-trial-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(23, 18, 14, 0.08); } .hx-main.hx-svc .hx-svc-trial-wa { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #25d366; } .hx-main.hx-svc .hx-svc-trial-head b { font-size: 0.82rem; } .hx-main.hx-svc .hx-svc-trial-head small { margin-left: auto; font-size: 0.64rem; color: var(--hx-green); font-weight: 700; } .hx-main.hx-svc .hx-svc-trial-msg { display: grid; gap: 2px; max-width: 88%; padding: 8px 11px; border-radius: 12px 12px 12px 4px; background: #f1ece8; font-size: 0.78rem; opacity: 0; } .hx-main.hx-svc .hx-svc-trial-msg u { text-decoration: none; font-size: 0.68rem; color: var(--hx-g1); font-weight: 600; word-break: break-all; } .hx-main.hx-svc .hx-svc-trial-me { justify-self: end; border-radius: 12px 12px 4px 12px; background: #dcf8c6; } .hx-main.hx-svc .hx-svc-trial-typing { display: inline-flex; gap: 3px; padding: 9px 11px; border-radius: 12px; background: #f1ece8; width: max-content; opacity: 0; } .hx-main.hx-svc .hx-svc-trial-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--hx-svc-ink-soft); animation: hx-svc-typing 1s ease-in-out infinite; } .hx-main.hx-svc .hx-svc-trial-typing i:nth-child(2) { animation-delay: 0.15s; } .hx-main.hx-svc .hx-svc-trial-typing i:nth-child(3) { animation-delay: 0.3s; } .hx-main.hx-svc .is-on .hx-svc-trial-msg { animation: hx-svc-fadeUp 0.45s ease forwards; animation-delay: calc(0.3s + var(--hx-i) * 1s); } .hx-main.hx-svc .is-on .hx-svc-trial-typing { animation: hx-svc-typingBubble 1.6s ease 1s forwards; } .hx-main.hx-svc .hx-svc-trial-badge { justify-self: start; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--hx-g1) 12%, #fff); color: var(--hx-g1); font-size: 0.72rem; font-weight: 600; opacity: 0; } .hx-main.hx-svc .hx-svc-trial-badge b { font-weight: 800; } .hx-main.hx-svc .is-on .hx-svc-trial-badge { animation: hx-svc-fadeUp 0.4s ease 3s forwards; } /* refill after a drop */ .hx-main.hx-svc .hx-svc-refill-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--hx-font-mono), monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-refill-top b { padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--hx-g1) 12%, #fff); color: var(--hx-g1); letter-spacing: 0; text-transform: none; font-size: 0.66rem; } .hx-main.hx-svc .hx-svc-refill-chart { position: relative; display: block; } .hx-main.hx-svc .hx-svc-refill-area { fill: color-mix(in srgb, var(--hx-g1) 12%, transparent); opacity: 0; } .hx-main.hx-svc .is-on .hx-svc-refill-area { animation: hx-svc-fadeUp 0.6s ease 1.6s forwards; } .hx-main.hx-svc .hx-svc-refill-line { stroke: var(--hx-g1); stroke-dasharray: 1; stroke-dashoffset: 1; } .hx-main.hx-svc .is-on .hx-svc-refill-line { animation: hx-svc-draw 2s cubic-bezier(0.3, 0.7, 0.3, 1) 0.3s forwards; } .hx-main.hx-svc .hx-svc-refill-dot { fill: var(--hx-green); opacity: 0; } .hx-main.hx-svc .is-on .hx-svc-refill-dot { animation: hx-svc-pop 0.3s ease 2.3s forwards; } .hx-main.hx-svc .hx-svc-refill-tag { position: absolute; padding: 2px 7px; border-radius: 999px; font-size: 0.62rem; font-weight: 700; opacity: 0; } .hx-main.hx-svc .hx-svc-refill-tag--drop { left: 44%; top: 66%; background: #fde8e8; color: #c62828; } .hx-main.hx-svc .hx-svc-refill-tag--up { right: 0; top: 2px; background: #e3f6ea; color: var(--hx-green); } .hx-main.hx-svc .is-on .hx-svc-refill-tag--drop { animation: hx-svc-fadeUp 0.4s ease 1.2s forwards; } .hx-main.hx-svc .is-on .hx-svc-refill-tag--up { animation: hx-svc-fadeUp 0.4s ease 2.4s forwards; } .hx-main.hx-svc .hx-svc-refill-days { display: flex; justify-content: space-between; font-family: var(--hx-font-mono), monospace; font-size: 0.58rem; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-refill-foot { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; color: var(--hx-green); } /* checkout in pounds */ .hx-main.hx-svc .hx-svc-gbp-cur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .hx-main.hx-svc .hx-svc-gbp-cur > * { display: grid; place-items: center; height: 32px; border-radius: 9px; border: 1px solid rgba(23, 18, 14, 0.1); font-size: 0.74rem; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-gbp-cur b { color: #fff; border-color: transparent; background: var(--hx-svc-accent-grad, linear-gradient(135deg, var(--hx-g1), var(--hx-g2))); transform: scale(0.92); } .hx-main.hx-svc .is-on .hx-svc-gbp-cur b { animation: hx-svc-pop 0.4s ease 0.5s forwards; } .hx-main.hx-svc .hx-svc-gbp-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid rgba(23, 18, 14, 0.08); font-size: 0.76rem; color: var(--hx-svc-ink-soft); opacity: 0; } .hx-main.hx-svc .hx-svc-gbp-row b { color: var(--hx-ink); display: inline-flex; align-items: center; gap: 6px; } .hx-main.hx-svc .hx-svc-gbp-ok { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--hx-green); color: #fff; font-style: normal; font-size: 0.6rem; } .hx-main.hx-svc .is-on .hx-svc-gbp-row { animation: hx-svc-fadeUp 0.4s ease forwards; animation-delay: calc(0.9s + var(--hx-i) * 0.35s); } /* retention line */ .hx-main.hx-svc .hx-svc-retain { width: min(300px, 100%); display: grid; gap: 6px; justify-items: center; } .hx-main.hx-svc .hx-svc-retain svg { overflow: visible; } .hx-main.hx-svc .hx-svc-retain-m { font-family: var(--hx-font-mono), monospace; font-size: 11px; fill: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-retain-tick { stroke: rgba(23, 18, 14, 0.2); stroke-width: 2; } .hx-main.hx-svc .hx-svc-retain-line { stroke: var(--hx-g1); stroke-dasharray: 1; stroke-dashoffset: 1; } .hx-main.hx-svc .is-on .hx-svc-retain-line { animation: hx-svc-draw 1.8s cubic-bezier(0.3, 0.7, 0.3, 1) 0.3s forwards; } .hx-main.hx-svc .hx-svc-retain-dot { fill: var(--hx-g2); opacity: 0; } .hx-main.hx-svc .is-on .hx-svc-retain-dot { animation: hx-svc-pop 0.3s ease 2s forwards; } .hx-main.hx-svc .hx-svc-retain-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--hx-ink); opacity: 0; } .hx-main.hx-svc .is-on .hx-svc-retain-label { animation: hx-svc-fadeUp 0.4s ease 2.2s forwards; } .hx-main.hx-svc .hx-svc-retain-label svg { color: var(--hx-green); } .hx-main.hx-svc .is-on .hx-svc-retain-label svg { animation: hx-svc-spinOnce 0.8s ease 2.3s; } @keyframes hx-svc-spinOnce { to { transform: rotate(360deg); } } /* ============================================================ package page — the package, the visitor's username and their fetched profile, then the other packages ============================================================ */ .hx-main.hx-svc .hx-svc-buy { gap: 16px; } /* the receipt: what, the price, then the guarantees under a dashed rule */ .hx-main.hx-svc .hx-svc-receipt { display: grid; gap: 12px; padding: 16px; border-radius: var(--hx-svc-radius-inner); background: linear-gradient(150deg, color-mix(in srgb, var(--hx-g1) 9%, transparent), color-mix(in srgb, var(--hx-g2) 13%, transparent)); border: 1px solid color-mix(in srgb, var(--hx-g1) 14%, transparent); } .hx-main.hx-svc .hx-svc-receipt-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; } .hx-main.hx-svc .hx-svc-receipt-ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--hx-svc-accent-grad); color: #fff; box-shadow: 0 12px 24px -12px var(--hx-g1); } .hx-main.hx-svc .hx-svc-receipt-what { display: grid; line-height: 1.25; min-width: 0; } .hx-main.hx-svc .hx-svc-receipt-what b { font-family: var(--hx-font-display), sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--hx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hx-main.hx-svc .hx-svc-receipt-what small { font-size: 0.76rem; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-receipt-price { display: grid; justify-items: end; line-height: 1; } .hx-main.hx-svc .hx-svc-receipt-price b { font-family: var(--hx-font-display), sans-serif; font-size: clamp(1.7rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; color: var(--hx-ink); font-variant-numeric: tabular-nums; } .hx-main.hx-svc .hx-svc-receipt-price s { font-family: var(--hx-font-mono), monospace; font-size: 0.7rem; color: var(--hx-svc-ink-soft); margin-top: 3px; } .hx-main.hx-svc .hx-svc-receipt-list { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1.5px dashed color-mix(in srgb, var(--hx-g1) 28%, transparent); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; } .hx-main.hx-svc .hx-svc-receipt-list li { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 600; color: var(--hx-ink); } .hx-main.hx-svc .hx-svc-receipt-list .hx-tick { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(31, 171, 85, 0.14); color: var(--hx-green); font-size: 11px; font-weight: 800; font-style: normal; } /* the two-step flow */ .hx-main.hx-svc .hx-svc-buy-flow { display: grid; gap: 10px; } .hx-main.hx-svc .hx-svc-buy-steps { list-style: none; margin: 0 0 2px; padding: 0; display: flex; align-items: center; gap: 10px; font-family: var(--hx-font-mono), monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-buy-steps li { display: inline-flex; align-items: center; gap: 7px; } .hx-main.hx-svc .hx-svc-buy-steps li b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.64rem; background: rgba(23, 18, 14, 0.08); color: var(--hx-ink); letter-spacing: 0; } .hx-main.hx-svc .hx-svc-buy-steps li.is-on { color: var(--hx-g1); } .hx-main.hx-svc .hx-svc-buy-steps li.is-on b { background: var(--hx-svc-accent-grad); color: #fff; } .hx-main.hx-svc .hx-svc-buy-steps li + li::before { content: ""; width: 22px; height: 1.5px; background: rgba(23, 18, 14, 0.14); margin-right: 4px; } .hx-main.hx-svc .hx-svc-buy-found { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 5px; font-family: var(--hx-font-mono), monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hx-green); background: rgba(31, 171, 85, 0.12); border-radius: 999px; padding: 5px 9px; } .hx-main.hx-svc .hx-svc-buy-label { font-family: var(--hx-font-mono), monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-buy-box { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 999px; background: #fff; border: 1.5px solid var(--hx-svc-line); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .hx-main.hx-svc .hx-svc-buy-box:focus-within { border-color: var(--hx-g1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hx-g1) 14%, transparent); } .hx-main.hx-svc .hx-svc-buy-ic { display: inline-flex; color: var(--hx-g1); flex: none; } .hx-main.hx-svc .hx-svc-buy-input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1rem; color: var(--hx-ink); padding: 8px 0; outline: none; } .hx-main.hx-svc .hx-svc-buy-input::placeholder { color: rgba(23, 18, 14, 0.4); } .hx-main.hx-svc .hx-svc-buy-btn { flex: none; white-space: nowrap; } .hx-main.hx-svc .hx-svc-buy-btn:disabled { opacity: 0.7; cursor: wait; } .hx-main.hx-svc .hx-svc-buy-ui { display: grid; gap: 10px; } .hx-main.hx-svc .hx-svc-buy-loading { display: inline-flex; align-items: center; gap: 10px; font-size: 0.86rem; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-buy-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--hx-g1) 20%, transparent); border-top-color: var(--hx-g1); animation: hx-svc-spin 0.8s linear infinite; } .hx-main.hx-svc .hx-svc-buy-profile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 12px; border-radius: var(--hx-svc-radius-inner); background: #fff; border: 1px solid var(--hx-svc-line); box-shadow: 0 16px 30px -24px rgba(23, 18, 14, 0.4); animation: hx-svc-fadeUp 0.5s ease both; } .hx-main.hx-svc .hx-svc-buy-ava { width: 56px; height: 56px; border-radius: 50%; padding: 2.5px; background: var(--hx-svc-accent-grad); grid-row: span 2; } .hx-main.hx-svc .hx-svc-buy-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #f3ede9; } .hx-main.hx-svc .hx-svc-buy-who { display: grid; line-height: 1.25; min-width: 0; } .hx-main.hx-svc .hx-svc-buy-who b { display: inline-flex; align-items: center; gap: 5px; font-size: 0.96rem; font-weight: 800; color: var(--hx-ink); } .hx-main.hx-svc .hx-svc-buy-verified { color: #0095f6; display: inline-flex; } .hx-main.hx-svc .hx-svc-buy-who small { font-size: 0.76rem; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-buy-status:not(:empty)::before { content: "·"; margin: 0 5px; } .hx-main.hx-svc .hx-svc-buy-stats { display: flex; gap: 18px; font-size: 0.66rem; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-buy-stats span { display: grid; } .hx-main.hx-svc .hx-svc-buy-stats b { font-size: 0.96rem; font-weight: 800; color: var(--hx-ink); font-variant-numeric: tabular-nums; } .hx-main.hx-svc .hx-svc-buy-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .hx-main.hx-svc .hx-svc-buy-cart { padding: 0.95em 1em; border-radius: 999px; border: 1.5px solid var(--hx-svc-line); background: #fff; color: var(--hx-ink); font-family: var(--hx-font-display), sans-serif; font-weight: 700; font-size: 0.94rem; transition: border-color 0.2s ease, transform 0.2s ease; } .hx-main.hx-svc .hx-svc-buy-cart:hover:not(:disabled) { border-color: var(--hx-g1); transform: translateY(-1px); } .hx-main.hx-svc .hx-svc-buy-now { padding: 0.95em 1em; font-size: 0.94rem; } .hx-main.hx-svc .hx-svc-buy-cart:disabled, .hx-main.hx-svc .hx-svc-buy-now:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .hx-main.hx-svc .hx-svc-buy .hx-svc-order-note { justify-self: center; } /* the other packages: the site's 3D carousel in glass cards (it sets transform, opacity and z-index on each card) */ .hx-main.hx-svc .hx-svc-others-carousel { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; outline: none; } .hx-main.hx-svc .hx-svc-others-carousel:focus-visible { outline: 3px solid var(--hx-coral); outline-offset: 6px; border-radius: 20px; } .hx-main.hx-svc .hx-svc-others-nav { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--hx-glass-solid); border: 1px solid var(--hx-glass-line); color: var(--hx-ink); box-shadow: var(--hx-glass-shadow); transition: transform 0.2s ease, color 0.2s ease; } .hx-main.hx-svc .hx-svc-others-nav:hover { transform: translateY(-1px); color: var(--hx-g1); } .hx-main.hx-svc .hx-svc-others-track { position: relative; height: var(--svc-other-track-h, 300px); min-height: 260px; overflow: hidden; transition: height 0.4s ease; } .hx-main.hx-svc .hx-svc-others-cards { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1400px; } .hx-main.hx-svc .hx-svc-other { position: absolute; width: 230px; cursor: pointer; display: grid; justify-items: center; text-align: center; gap: 4px; padding: 20px 18px 18px; border-radius: 22px; background: var(--hx-glass-solid); border: 1px solid var(--hx-glass-line); box-shadow: var(--hx-glass-shadow); color: var(--hx-ink); transition: transform 0.6s var(--hx-svc-ease), opacity 0.4s ease, box-shadow 0.4s ease; } .hx-main.hx-svc .hx-svc-other.is-active { box-shadow: var(--hx-glass-shadow), 0 30px 60px -30px var(--hx-g1); border-color: color-mix(in srgb, var(--hx-g1) 35%, transparent); } .hx-main.hx-svc .hx-svc-other-kicker { font-family: var(--hx-font-mono), monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hx-g1); } .hx-main.hx-svc .hx-svc-other-qty { font-family: var(--hx-font-display), sans-serif; font-size: 2.2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } .hx-main.hx-svc .hx-svc-other-unit { font-size: 0.8rem; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-other-price { margin-top: 8px; font-family: var(--hx-font-display), sans-serif; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; background: var(--hx-svc-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; } .hx-main.hx-svc .hx-svc-other-delivery { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-other-delivery svg { color: var(--hx-g2); } .hx-main.hx-svc .hx-svc-other-cta { margin-top: 10px; width: 100%; padding: 0.85em 1em; border-radius: 999px; background: var(--hx-svc-accent-grad); color: #fff; font-family: var(--hx-font-display), sans-serif; font-weight: 700; font-size: 0.9rem; box-shadow: 0 14px 28px -14px var(--hx-g1); transition: transform 0.2s ease; } .hx-main.hx-svc .hx-svc-other-cta:hover { transform: translateY(-1px); } .hx-main.hx-svc .hx-svc-other-cta[hidden] { display: none; } /* ============================================================ TikTok screens on the phone — the profile (followers) and the For You feed (likes, comments, views) ============================================================ */ .hx-main.hx-svc .hx-svc-tt-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 4px; font-size: 0.9rem; } .hx-main.hx-svc .hx-svc-tt-top b { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; } .hx-main.hx-svc .hx-svc-tt-top .hx-svc-ig-chev { transform: translateY(-3px) rotate(45deg); width: 6px; height: 6px; } .hx-main.hx-svc .hx-svc-tt-adduser { width: 18px; height: 16px; border: 1.8px solid #111; border-radius: 50% 50% 4px 4px; position: relative; } .hx-main.hx-svc .hx-svc-tt-adduser::after { content: "+"; position: absolute; right: -8px; top: -9px; font-size: 12px; font-weight: 800; } .hx-main.hx-svc .hx-svc-tt-share { width: 16px; height: 14px; border: 1.8px solid #111; border-top: 0; border-radius: 0 0 4px 4px; position: relative; } .hx-main.hx-svc .hx-svc-tt-share::before { content: ""; position: absolute; left: 50%; top: -8px; width: 1.8px; height: 12px; margin-left: -0.9px; background: #111; } .hx-main.hx-svc .hx-svc-tt-head { display: grid; justify-items: center; gap: 8px; padding: 6px 16px 10px; text-align: center; } .hx-main.hx-svc .hx-svc-tt-ava { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: #f3ede9; } .hx-main.hx-svc .hx-svc-tt-ava img { width: 100%; height: 100%; object-fit: cover; } .hx-main.hx-svc .hx-svc-tt-handle { font-size: 0.9rem; font-weight: 800; color: #111; } .hx-main.hx-svc .hx-svc-tt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 250px; font-size: 0.64rem; color: #737373; } .hx-main.hx-svc .hx-svc-tt-stats span { display: grid; gap: 1px; min-width: 0; } .hx-main.hx-svc .hx-svc-tt-stats b { font-size: 0.98rem; font-weight: 800; color: #111; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; } .hx-main.hx-svc .hx-svc-tt-stats .hx-svc-ig-live { font-size: 0.98rem; justify-self: center; } .hx-main.hx-svc .hx-svc-tt-actions { display: flex; gap: 6px; width: 100%; max-width: 250px; } .hx-main.hx-svc .hx-svc-tt-btn { flex: 1; display: grid; place-items: center; height: 36px; border-radius: 4px; background: #f1f1f2; color: #111; font-size: 0.8rem; font-weight: 700; } .hx-main.hx-svc .hx-svc-tt-btn--red { flex: 2.4; background: #fe2c55; color: #fff; } .hx-main.hx-svc .hx-svc-tt-btn--sq { flex: 0 0 40px; } .hx-main.hx-svc .hx-svc-tt-msg { width: 16px; height: 12px; border: 1.8px solid #111; border-radius: 3px; position: relative; } .hx-main.hx-svc .hx-svc-tt-msg::after { content: ""; position: absolute; left: 3px; top: 2px; width: 6px; height: 4px; border: 1.8px solid #111; border-top: 0; border-left: 0; transform: rotate(45deg) scale(0.9); transform-origin: 30% 30%; } .hx-main.hx-svc .hx-svc-tt-bio { display: grid; gap: 1px; font-size: 0.74rem; color: #262626; } .hx-main.hx-svc .hx-svc-tt-bio b { color: #111; } .hx-main.hx-svc .hx-svc-tt-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #efefef; } .hx-main.hx-svc .hx-svc-tt-tabs i { height: 34px; position: relative; } .hx-main.hx-svc .hx-svc-tt-tabs i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 1.6px solid #8e8e8e; border-radius: 3px; background: linear-gradient(#8e8e8e, #8e8e8e) 50% 0 / 1.6px 100% no-repeat, linear-gradient(#8e8e8e, #8e8e8e) 0 50% / 100% 1.6px no-repeat; } .hx-main.hx-svc .hx-svc-tt-tabs i.is-on::before { border-color: #111; background-image: linear-gradient(#111, #111), linear-gradient(#111, #111); } .hx-main.hx-svc .hx-svc-tt-tabs i.is-on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; background: #111; } .hx-main.hx-svc .hx-svc-tt-tab--repost::before, .hx-main.hx-svc .hx-svc-tt-tab--liked::before, .hx-main.hx-svc .hx-svc-tt-tab--lock::before { background: none; } .hx-main.hx-svc .hx-svc-tt-tab--liked::before { border-radius: 50% 50% 0 0; } .hx-main.hx-svc .hx-svc-tt-tab--lock::before { border-radius: 4px; width: 12px; margin-left: -6px; } .hx-main.hx-svc .hx-svc-tt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; flex: 1; min-height: 0; overflow: hidden; background: #fff; } .hx-main.hx-svc .hx-svc-tt-grid span { position: relative; display: block; } .hx-main.hx-svc .hx-svc-tt-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; } .hx-main.hx-svc .hx-svc-tt-grid small { position: absolute; left: 5px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px; font-size: 0.6rem; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .hx-main.hx-svc .hx-svc-tt-nav { margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; height: 54px; padding: 0 6px 8px; border-top: 1px solid #efefef; background: #fff; color: #8e8e8e; font-size: 0.52rem; font-weight: 600; } .hx-main.hx-svc .hx-svc-tt-nav span { display: grid; justify-items: center; gap: 3px; } .hx-main.hx-svc .hx-svc-tt-nav span.is-on { color: #111; } .hx-main.hx-svc .hx-svc-tt-nav i { width: 20px; height: 20px; border: 2px solid currentColor; } .hx-main.hx-svc .hx-svc-tt-nav .hx-svc-ig-nav-home { border-radius: 3px 3px 5px 5px; clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); background: currentColor; } .hx-main.hx-svc .hx-svc-tt-nav-friends { border-radius: 50% 50% 4px 4px; } .hx-main.hx-svc .hx-svc-tt-nav-inbox { border-radius: 4px; background: linear-gradient(currentColor, currentColor) 50% 45% / 60% 2px no-repeat; } .hx-main.hx-svc .hx-svc-tt-nav-me { border-radius: 50%; } .hx-main.hx-svc .hx-svc-tt-plus { align-self: end; } .hx-main.hx-svc .hx-svc-tt-plus i { width: 38px; height: 26px; border: 0; border-radius: 8px; background: #111; box-shadow: -4px 0 0 #29ccd3, 4px 0 0 #fe2c55; position: relative; } .hx-main.hx-svc .hx-svc-tt-plus i::before, .hx-main.hx-svc .hx-svc-tt-plus i::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; } .hx-main.hx-svc .hx-svc-tt-plus i::before { width: 12px; height: 2px; margin: -1px 0 0 -6px; } .hx-main.hx-svc .hx-svc-tt-plus i::after { width: 2px; height: 12px; margin: -6px 0 0 -1px; } .hx-main.hx-svc .hx-svc-tt-nav--dark { background: #000; border-top-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.6); position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; } .hx-main.hx-svc .hx-svc-tt-nav--dark span.is-on { color: #fff; } .hx-main.hx-svc .hx-svc-tt-nav--dark .hx-svc-tt-plus i { background: #fff; } .hx-main.hx-svc .hx-svc-tt-nav--dark .hx-svc-tt-plus i::before, .hx-main.hx-svc .hx-svc-tt-nav--dark .hx-svc-tt-plus i::after { background: #000; } /* the For You feed */ .hx-main.hx-svc .hx-svc-tt-feed { position: absolute; inset: 0; background: #000; color: #fff; } .hx-main.hx-svc .hx-svc-tt-feed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hx-main.hx-svc .hx-svc-tt-feed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 22%, transparent 50%, rgba(0, 0, 0, 0.8)); pointer-events: none; } .hx-main.hx-svc .hx-svc-tt-feed .hx-svc-ig-status { position: absolute; left: 0; right: 0; top: 0; z-index: 2; color: #fff; } .hx-main.hx-svc .hx-svc-tt-feed .hx-svc-ig-signal { background: linear-gradient(90deg, #fff 0 2px, transparent 2px 3.5px, #fff 3.5px 5.5px, transparent 5.5px 7px, #fff 7px 9px, transparent 9px 10.5px, #fff 10.5px 12.5px, transparent 12.5px); } .hx-main.hx-svc .hx-svc-tt-feed .hx-svc-ig-wifi { border-top-color: #fff; } .hx-main.hx-svc .hx-svc-tt-feed .hx-svc-ig-battery { border-color: rgba(255, 255, 255, 0.6); } .hx-main.hx-svc .hx-svc-tt-feed .hx-svc-ig-battery::after { background: #fff; } .hx-main.hx-svc .hx-svc-tt-feedtop { position: absolute; z-index: 2; left: 0; right: 0; top: 48px; display: flex; justify-content: center; align-items: center; gap: 18px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.7); } .hx-main.hx-svc .hx-svc-tt-feedtop b { position: relative; color: #fff; font-weight: 800; } .hx-main.hx-svc .hx-svc-tt-feedtop b::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -5px; height: 2px; background: #fff; border-radius: 2px; } .hx-main.hx-svc .hx-svc-tt-feedtop .hx-svc-ig-nav-search { position: absolute; right: 16px; top: 0; border-color: #fff; } .hx-main.hx-svc .hx-svc-tt-feedtop .hx-svc-ig-nav-search::after { background: #fff; } .hx-main.hx-svc .hx-svc-tt-rail { position: absolute; z-index: 2; right: 10px; bottom: 120px; display: grid; gap: 14px; justify-items: center; } .hx-main.hx-svc .hx-svc-tt-rail-ava { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #fff; margin-bottom: 6px; } .hx-main.hx-svc .hx-svc-tt-rail-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .hx-main.hx-svc .hx-svc-tt-rail-ava i { position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fe2c55; color: #fff; font-style: normal; font-size: 12px; font-weight: 800; line-height: 16px; text-align: center; } .hx-main.hx-svc .hx-svc-tt-rail-item { display: grid; justify-items: center; gap: 2px; font-size: 0.64rem; font-weight: 700; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); } .hx-main.hx-svc .hx-svc-tt-rail-item.is-on svg { color: #fe2c55; } .hx-main.hx-svc .hx-svc-tt-rail-item.is-accent svg { color: var(--hx-g2); } .hx-main.hx-svc .hx-svc-tt-rail-item .hx-svc-ig-live { color: #fff; font-size: 0.8rem; } .hx-main.hx-svc .hx-svc-tt-rail-item .hx-svc-ig-live::after { background: #fff; } .hx-main.hx-svc .hx-svc-tt-disc { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, #222 0 34%, #000 36% 100%); display: grid; place-items: center; animation: hx-svc-spin 4s linear infinite; } .hx-main.hx-svc .hx-svc-tt-disc img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; } .hx-main.hx-svc .hx-svc-stage:not(.is-live) .hx-svc-tt-disc { animation-play-state: paused; } .hx-main.hx-svc .hx-svc-tt-caption { position: absolute; z-index: 2; left: 14px; right: 70px; bottom: 66px; display: grid; gap: 5px; font-size: 0.76rem; } .hx-main.hx-svc .hx-svc-tt-caption b { font-size: 0.86rem; font-weight: 800; } .hx-main.hx-svc .hx-svc-tt-sound { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; opacity: 0.9; } .hx-main.hx-svc .hx-svc-tt-views { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 6px 11px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); font-size: 0.74rem; font-weight: 700; } .hx-main.hx-svc .hx-svc-tt-views .hx-svc-ig-live { color: #fff; font-size: 0.92rem; } .hx-main.hx-svc .hx-svc-tt-views .hx-svc-ig-live::after { background: #fff; } /* the For You grid (TikTok's discovery): two columns of video tiles with play counts */ .hx-main.hx-svc .hx-svc-explore--tt .hx-svc-explore-grid { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; } /* three across keeps the card level with the copy beside it */ .hx-main.hx-svc .hx-svc-explore--tt .hx-svc-explore-tile { aspect-ratio: 3 / 4; } .hx-main.hx-svc .hx-svc-explore--tt .hx-svc-explore-tile--tall { grid-area: auto; } .hx-main.hx-svc .hx-svc-explore-plays { position: absolute; left: 7px; bottom: 7px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; font-size: 0.62rem; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } /* ============================================================ Facebook screens on the phone — the Page (followers, page likes), a post (post likes), a video (views) ============================================================ */ .hx-main.hx-svc .hx-svc-fb-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px 6px; font-size: 0.9rem; } .hx-main.hx-svc .hx-svc-fb-top b { flex: 1; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hx-main.hx-svc .hx-svc-fb-cover { height: 84px; overflow: hidden; } .hx-main.hx-svc .hx-svc-fb-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .hx-main.hx-svc .hx-svc-fb-head { display: grid; justify-items: center; gap: 4px; padding: 0 14px 10px; text-align: center; margin-top: -40px; } .hx-main.hx-svc .hx-svc-fb-ava { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; background: #f3ede9; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.4); } .hx-main.hx-svc .hx-svc-fb-ava img { width: 100%; height: 100%; object-fit: cover; } .hx-main.hx-svc .hx-svc-fb-name { display: inline-flex; align-items: center; gap: 5px; font-size: 1rem; font-weight: 800; color: #050505; } .hx-main.hx-svc .hx-svc-fb-verified { color: #1877f2; flex: none; } .hx-main.hx-svc .hx-svc-fb-counts { font-size: 0.72rem; color: #65676b; } .hx-main.hx-svc .hx-svc-fb-counts b { color: #050505; font-variant-numeric: tabular-nums; } .hx-main.hx-svc .hx-svc-fb-counts .hx-svc-ig-live { font-size: 0.86rem; } .hx-main.hx-svc .hx-svc-fb-cat { font-size: 0.7rem; color: #65676b; } .hx-main.hx-svc .hx-svc-fb-actions { display: flex; gap: 6px; width: 100%; margin-top: 6px; } .hx-main.hx-svc .hx-svc-fb-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; border-radius: 6px; background: #e4e6eb; color: #050505; font-size: 0.74rem; font-weight: 700; } .hx-main.hx-svc .hx-svc-fb-btn--blue { background: #1877f2; color: #fff; } .hx-main.hx-svc .hx-svc-fb-btn--sq { flex: 0 0 36px; letter-spacing: 1px; } .hx-main.hx-svc .hx-svc-fb-tabs { display: flex; gap: 14px; padding: 0 14px; border-bottom: 1px solid #e4e6eb; font-size: 0.72rem; font-weight: 700; color: #65676b; overflow: hidden; white-space: nowrap; } .hx-main.hx-svc .hx-svc-fb-tabs span { padding: 8px 0; } .hx-main.hx-svc .hx-svc-fb-tabs .is-on { color: #1877f2; box-shadow: inset 0 -2px 0 #1877f2; } .hx-main.hx-svc .hx-svc-fb-postcard { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px 12px; background: #fff; flex: 1; min-height: 0; overflow: hidden; } .hx-main.hx-svc .hx-svc-fb-postcard--single { padding-top: 6px; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto; } .hx-main.hx-svc .hx-svc-fb-posthead { display: flex; align-items: center; gap: 8px; } .hx-main.hx-svc .hx-svc-fb-posthead img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; } .hx-main.hx-svc .hx-svc-fb-posthead span { flex: 1; display: grid; line-height: 1.2; min-width: 0; } .hx-main.hx-svc .hx-svc-fb-posthead b { font-size: 0.78rem; font-weight: 700; color: #050505; display: inline-flex; align-items: center; gap: 4px; } .hx-main.hx-svc .hx-svc-fb-posthead small { font-size: 0.66rem; color: #65676b; display: inline-flex; align-items: center; gap: 4px; } .hx-main.hx-svc .hx-svc-fb-globe { width: 9px; height: 9px; border-radius: 50%; border: 1.2px solid #65676b; } .hx-main.hx-svc .hx-svc-fb-follow { font-style: normal; font-size: 0.7rem; font-weight: 700; color: #1877f2; } .hx-main.hx-svc .hx-svc-fb-posttext { font-size: 0.76rem; color: #050505; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hx-main.hx-svc .hx-svc-fb-postimg { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 10; min-height: 0; align-self: stretch; background: #f3ede9; } .hx-main.hx-svc .hx-svc-fb-postimg--tall { aspect-ratio: 1; } .hx-main.hx-svc .hx-svc-fb-postimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .hx-main.hx-svc .hx-svc-fb-reacts { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: #65676b; } .hx-main.hx-svc .hx-svc-fb-reacts > span:last-child { margin-left: auto; } .hx-main.hx-svc .hx-svc-fb-reacts b { color: #050505; font-variant-numeric: tabular-nums; } .hx-main.hx-svc .hx-svc-fb-reacts .hx-svc-ig-live { font-size: 0.86rem; } .hx-main.hx-svc .hx-svc-fb-reactpile { display: inline-flex; } .hx-main.hx-svc .hx-svc-fb-reactpile i { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 1.5px solid #fff; } .hx-main.hx-svc .hx-svc-fb-react--like { background: #1877f2; } .hx-main.hx-svc .hx-svc-fb-react--love { background: #f33e58; margin-left: -5px; } .hx-main.hx-svc .hx-svc-fb-actionsrow { display: flex; justify-content: space-around; padding: 6px 0 0; border-top: 1px solid #e4e6eb; color: #65676b; font-size: 0.72rem; font-weight: 700; } .hx-main.hx-svc .hx-svc-fb-actionsrow span { display: inline-flex; align-items: center; gap: 5px; } .hx-main.hx-svc .hx-svc-fb-actionsrow .is-on { color: #1877f2; } .hx-main.hx-svc .hx-svc-fb-actionsrow--card { border-bottom: 1px solid #e4e6eb; padding-bottom: 6px; } .hx-main.hx-svc .hx-svc-fb-comment { display: flex; align-items: flex-start; gap: 7px; font-size: 0.72rem; } .hx-main.hx-svc .hx-svc-fb-comment img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; } .hx-main.hx-svc .hx-svc-fb-comment span { display: grid; padding: 5px 10px; border-radius: 14px; background: #f0f2f5; color: #050505; line-height: 1.3; } .hx-main.hx-svc .hx-svc-fb-comment b { font-size: 0.7rem; } .hx-main.hx-svc .hx-svc-fb-vid { position: relative; aspect-ratio: 4 / 5; background: #000; overflow: hidden; } .hx-main.hx-svc .hx-svc-fb-vid img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.92; } .hx-main.hx-svc .hx-svc-fb-video-time { position: absolute; left: 10px; bottom: 10px; font-size: 0.62rem; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.55); border-radius: 4px; padding: 3px 6px; } .hx-main.hx-svc .hx-svc-fb-videometa { display: grid; gap: 8px; padding: 10px 12px; } .hx-main.hx-svc .hx-svc-fb-videotitle { font-size: 0.86rem; font-weight: 800; color: #050505; line-height: 1.3; } .hx-main.hx-svc .hx-svc-fb-videoviews { font-size: 0.72rem; color: #65676b; } .hx-main.hx-svc .hx-svc-fb-videoviews .hx-svc-ig-live { font-size: 0.9rem; color: var(--hx-g1); } .hx-main.hx-svc .hx-svc-fb-nav { margin-top: auto; display: flex; justify-content: space-around; align-items: center; height: 46px; border-top: 1px solid #e4e6eb; background: #fff; color: #65676b; } .hx-main.hx-svc .hx-svc-fb-nav i { width: 20px; height: 20px; border: 2px solid currentColor; } .hx-main.hx-svc .hx-svc-fb-nav .hx-svc-ig-nav-home { border-radius: 3px 3px 5px 5px; clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); background: currentColor; } .hx-main.hx-svc .hx-svc-fb-nav .is-on { color: #1877f2; } .hx-main.hx-svc .hx-svc-fb-nav-friends { border-radius: 50% 50% 4px 4px; } .hx-main.hx-svc .hx-svc-fb-nav-video { border-radius: 4px; } .hx-main.hx-svc .hx-svc-fb-nav-shop { border-radius: 3px 3px 6px 6px; border-top-width: 3px; } .hx-main.hx-svc .hx-svc-fb-nav-bell { border-radius: 10px 10px 3px 3px; } .hx-main.hx-svc .hx-svc-fb-nav .hx-svc-ig-menu { width: 18px; height: 12px; border-width: 1.8px 0; } .hx-main.hx-svc .hx-svc-fb-page .hx-svc-fb-postcard .hx-svc-fb-postimg { aspect-ratio: 16 / 9; } /* ============================================================ YouTube screens on the phone — the channel (subscribers), a video (views, likes), Studio analytics (watch time) ============================================================ */ .hx-main.hx-svc .hx-svc-yt-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 4px; } .hx-main.hx-svc .hx-svc-yt-top-icons { display: inline-flex; gap: 14px; align-items: center; } .hx-main.hx-svc .hx-svc-yt-top .hx-svc-fb-nav-bell { width: 16px; height: 16px; border: 1.8px solid #111; border-radius: 8px 8px 3px 3px; } .hx-main.hx-svc .hx-svc-yt-top .hx-svc-ig-nav-search { width: 16px; height: 16px; border: 1.8px solid #111; border-radius: 50%; position: relative; } .hx-main.hx-svc .hx-svc-yt-top .hx-svc-ig-nav-search::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 7px; height: 1.8px; background: #111; transform: rotate(45deg); } .hx-main.hx-svc .hx-svc-yt-banner { height: 62px; margin: 0 12px; border-radius: 10px; overflow: hidden; } .hx-main.hx-svc .hx-svc-yt-banner img { width: 100%; height: 100%; object-fit: cover; display: block; } .hx-main.hx-svc .hx-svc-yt-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px 6px; } .hx-main.hx-svc .hx-svc-yt-ava { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #f3ede9; } .hx-main.hx-svc .hx-svc-yt-ava img { width: 100%; height: 100%; object-fit: cover; } .hx-main.hx-svc .hx-svc-yt-who { display: grid; gap: 2px; min-width: 0; line-height: 1.25; } .hx-main.hx-svc .hx-svc-yt-who b { font-size: 1rem; font-weight: 800; color: #0f0f0f; } .hx-main.hx-svc .hx-svc-yt-who small { font-size: 0.68rem; color: #606060; } .hx-main.hx-svc .hx-svc-yt-who small .hx-svc-ig-live { font-size: 0.82rem; } .hx-main.hx-svc .hx-svc-yt-who em { font-style: normal; font-size: 0.68rem; color: #606060; } .hx-main.hx-svc .hx-svc-yt-actions { display: flex; gap: 8px; padding: 4px 14px 10px; } .hx-main.hx-svc .hx-svc-yt-sub { flex: 1; display: grid; place-items: center; height: 34px; border-radius: 999px; background: #0f0f0f; color: #fff; font-size: 0.78rem; font-weight: 700; font-style: normal; } .hx-main.hx-svc .hx-svc-yt-sub--sm { flex: none; height: 28px; padding: 0 12px; font-size: 0.7rem; margin-left: auto; } .hx-main.hx-svc .hx-svc-yt-btn { width: 40px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: #f2f2f2; color: #0f0f0f; } .hx-main.hx-svc .hx-svc-yt-tabs { display: flex; gap: 16px; padding: 0 14px; border-bottom: 1px solid #e5e5e5; font-size: 0.74rem; font-weight: 700; color: #606060; white-space: nowrap; overflow: hidden; } .hx-main.hx-svc .hx-svc-yt-tabs span { padding: 8px 0; } .hx-main.hx-svc .hx-svc-yt-tabs .is-on { color: #0f0f0f; box-shadow: inset 0 -2px 0 #0f0f0f; } .hx-main.hx-svc .hx-svc-yt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; padding: 10px 12px; flex: 1; min-height: 0; overflow: hidden; align-content: start; } .hx-main.hx-svc .hx-svc-yt-thumb { position: relative; display: grid; gap: 4px; font-size: 0.66rem; color: #606060; } .hx-main.hx-svc .hx-svc-yt-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; display: block; } .hx-main.hx-svc .hx-svc-yt-thumb i { position: absolute; right: 5px; top: calc(56.25% - 22px); font-style: normal; font-size: 0.58rem; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.75); border-radius: 3px; padding: 1px 4px; } .hx-main.hx-svc .hx-svc-yt-thumb b { font-size: 0.7rem; color: #0f0f0f; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hx-main.hx-svc .hx-svc-yt-nav { margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; height: 52px; padding: 0 4px 6px; border-top: 1px solid #e5e5e5; background: #fff; color: #0f0f0f; font-size: 0.5rem; } .hx-main.hx-svc .hx-svc-yt-nav span { display: grid; justify-items: center; gap: 3px; color: #606060; } .hx-main.hx-svc .hx-svc-yt-nav span.is-on { color: #0f0f0f; } .hx-main.hx-svc .hx-svc-yt-nav i { width: 20px; height: 20px; border: 2px solid currentColor; } .hx-main.hx-svc .hx-svc-yt-nav .hx-svc-ig-nav-home { border-radius: 3px 3px 5px 5px; clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); background: currentColor; } .hx-main.hx-svc .hx-svc-yt-nav-shorts { border-radius: 6px; transform: rotate(-14deg); } .hx-main.hx-svc .hx-svc-yt-nav-subs { border-radius: 4px; background: linear-gradient(currentColor, currentColor) 50% 4px / 70% 2px no-repeat; } .hx-main.hx-svc .hx-svc-yt-nav img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; } .hx-main.hx-svc .hx-svc-yt-plus i { width: 30px; height: 30px; border: 1.8px solid #0f0f0f; border-radius: 50%; position: relative; } .hx-main.hx-svc .hx-svc-yt-plus i::before, .hx-main.hx-svc .hx-svc-yt-plus i::after { content: ""; position: absolute; left: 50%; top: 50%; background: #0f0f0f; } .hx-main.hx-svc .hx-svc-yt-plus i::before { width: 12px; height: 1.8px; margin: -0.9px 0 0 -6px; } .hx-main.hx-svc .hx-svc-yt-plus i::after { width: 1.8px; height: 12px; margin: -6px 0 0 -0.9px; } .hx-main.hx-svc .hx-svc-yt-player { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; margin-top: 4px; } .hx-main.hx-svc .hx-svc-yt-player img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.92; } .hx-main.hx-svc .hx-svc-yt-player-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.35); } .hx-main.hx-svc .hx-svc-yt-player-bar i { display: block; width: 27%; height: 100%; background: #ff0000; } .hx-main.hx-svc .hx-svc-yt-player-time { position: absolute; left: 10px; bottom: 10px; font-size: 0.62rem; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); } .hx-main.hx-svc .hx-svc-yt-videometa { display: grid; gap: 8px; padding: 10px 12px; } .hx-main.hx-svc .hx-svc-yt-videotitle { font-size: 0.88rem; font-weight: 800; color: #0f0f0f; line-height: 1.3; } .hx-main.hx-svc .hx-svc-yt-videoviews { font-size: 0.7rem; color: #606060; } .hx-main.hx-svc .hx-svc-yt-videoviews .hx-svc-ig-live { font-size: 0.88rem; } .hx-main.hx-svc .hx-svc-yt-channelrow { display: flex; align-items: center; gap: 8px; } .hx-main.hx-svc .hx-svc-yt-channelrow img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .hx-main.hx-svc .hx-svc-yt-channelrow span { display: grid; line-height: 1.2; } .hx-main.hx-svc .hx-svc-yt-channelrow b { font-size: 0.76rem; font-weight: 800; color: #0f0f0f; } .hx-main.hx-svc .hx-svc-yt-channelrow small { font-size: 0.64rem; color: #606060; } .hx-main.hx-svc .hx-svc-yt-chips { display: flex; gap: 6px; overflow: hidden; } .hx-main.hx-svc .hx-svc-yt-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 999px; background: #f2f2f2; color: #0f0f0f; font-size: 0.7rem; font-weight: 700; white-space: nowrap; } .hx-main.hx-svc .hx-svc-yt-chip--like i { width: 1px; height: 16px; background: #d9d9d9; margin: 0 3px; } .hx-main.hx-svc .hx-svc-yt-chip--like.is-on > svg:first-child { color: var(--hx-g1); } .hx-main.hx-svc .hx-svc-yt-chip .hx-svc-ig-live { font-size: 0.8rem; } .hx-main.hx-svc .hx-svc-yt-down { transform: scaleY(-1); } .hx-main.hx-svc .hx-svc-yt-comments { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: #f2f2f2; font-size: 0.72rem; color: #0f0f0f; } .hx-main.hx-svc .hx-svc-yt-comments small { color: #606060; margin-left: 4px; } .hx-main.hx-svc .hx-svc-yt-comments .hx-svc-fb-comment span { background: none; padding: 0; } .hx-main.hx-svc .hx-svc-yt-analytics { flex: 1; min-height: 0; background: #f9f9f9; display: grid; gap: 8px; padding: 6px 12px 12px; align-content: start; } .hx-main.hx-svc .hx-svc-yt-studio-top { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 800; color: #0f0f0f; padding: 2px 0 4px; } .hx-main.hx-svc .hx-svc-yt-studio-top b { flex: 1; } .hx-main.hx-svc .hx-svc-yt-studio-top img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .hx-main.hx-svc .hx-svc-yt-studio-tabs { display: flex; gap: 14px; font-size: 0.7rem; font-weight: 700; color: #606060; border-bottom: 1px solid #e5e5e5; } .hx-main.hx-svc .hx-svc-yt-studio-tabs span { padding: 6px 0; } .hx-main.hx-svc .hx-svc-yt-studio-tabs .is-on { color: #0f0f0f; box-shadow: inset 0 -2px 0 #0f0f0f; } .hx-main.hx-svc .hx-svc-yt-studio-card { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid #e5e5e5; } .hx-main.hx-svc .hx-svc-yt-studio-label { font-size: 0.66rem; color: #606060; } .hx-main.hx-svc .hx-svc-yt-studio-n { font-family: var(--hx-font-display), sans-serif; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #0f0f0f; } .hx-main.hx-svc .hx-svc-yt-studio-n::after { display: none; } .hx-main.hx-svc .hx-svc-yt-studio-sub { display: inline-flex; align-items: center; gap: 5px; font-size: 0.66rem; color: #1a7f37; } .hx-main.hx-svc .hx-svc-yt-up { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid #1a7f37; } .hx-main.hx-svc .hx-svc-yt-studio-chart { width: 100%; height: 64px; } .hx-main.hx-svc .hx-svc-yt-studio-area { fill: var(--hx-g1); opacity: 0.12; } .hx-main.hx-svc .hx-svc-yt-studio-line { fill: none; stroke: var(--hx-g1); stroke-width: 2.5; stroke-linecap: round; } .hx-main.hx-svc .hx-svc-yt-studio-goal { display: flex; justify-content: space-between; font-size: 0.66rem; color: #606060; padding-top: 4px; } .hx-main.hx-svc .hx-svc-yt-studio-goal b { color: #0f0f0f; } .hx-main.hx-svc .hx-svc-yt-studio-bar { height: 6px; border-radius: 999px; background: #e5e5e5; overflow: hidden; } .hx-main.hx-svc .hx-svc-yt-studio-bar i { display: block; height: 100%; width: var(--hx-w, 50%); border-radius: 999px; background: var(--hx-svc-accent-grad); } .hx-main.hx-svc .hx-svc-yt-studio-row { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid #e5e5e5; font-size: 0.72rem; color: #606060; } .hx-main.hx-svc .hx-svc-yt-studio-row b { color: #0f0f0f; font-variant-numeric: tabular-nums; } .hx-main.hx-svc .hx-svc-yt-next { display: grid; gap: 8px; } .hx-main.hx-svc .hx-svc-yt-nextrow { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 8px; align-items: start; } .hx-main.hx-svc .hx-svc-yt-nextrow > img { width: 112px; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 6px; display: block; } .hx-main.hx-svc .hx-svc-yt-nextrow > i { position: absolute; left: 76px; top: 44px; font-style: normal; font-size: 0.56rem; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.75); border-radius: 3px; padding: 1px 4px; } .hx-main.hx-svc .hx-svc-yt-nextrow > span { display: grid; gap: 2px; line-height: 1.25; min-width: 0; text-align: left; align-content: start; } .hx-main.hx-svc .hx-svc-yt-nextrow b { font-size: 0.7rem; font-weight: 700; color: #0f0f0f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hx-main.hx-svc .hx-svc-yt-nextrow small { font-size: 0.62rem; color: #606060; } /* Facebook feed and YouTube recommendation grids */ .hx-main.hx-svc .hx-svc-explore--fb .hx-svc-explore-grid, .hx-main.hx-svc .hx-svc-explore--yt .hx-svc-explore-grid { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; } .hx-main.hx-svc .hx-svc-explore--fb .hx-svc-explore-tile--tall, .hx-main.hx-svc .hx-svc-explore--yt .hx-svc-explore-tile--tall { grid-area: auto; } .hx-main.hx-svc .hx-svc-explore--yt .hx-svc-explore-tile { aspect-ratio: 16 / 11; } .hx-main.hx-svc .hx-svc-explore-duration { position: absolute; right: 6px; top: 6px; z-index: 2; font-size: 0.58rem; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.75); border-radius: 3px; padding: 1px 5px; } /* arrivals for the thumb platforms */ .hx-main.hx-svc .hx-svc-flow-item--thumb { width: calc(var(--hx-s, 18px) + 14px); height: calc(var(--hx-s, 18px) + 14px); margin: calc((var(--hx-s, 18px) + 14px) / -2) 0 0 calc((var(--hx-s, 18px) + 14px) / -2); border-radius: 50%; background: var(--hx-g1); color: #fff; box-shadow: 0 10px 22px -10px var(--hx-g1); } .hx-main.hx-svc .hx-svc-flow-item--clock { background: var(--hx-g1); color: #fff; padding-left: 0; } /* ============================================================ responsive ============================================================ */ @media (max-height: 760px) and (min-width: 1025px) { .hx-main.hx-svc .hx-svc-hero-inner { min-height: 0; padding-top: 18px; padding-bottom: 22px; align-items: start; } /* the phone is taller than the card: keep Next above the fold */ .hx-main.hx-svc .hx-svc-phone { width: min(276px, 100%); } .hx-main.hx-svc .hx-svc-stage { padding-top: 24px; } .hx-main.hx-svc .hx-svc-hero-copy { gap: 12px; } .hx-main.hx-svc .hx-svc-hero h1, .hx-main.hx-svc .hx-svc-hero .hx-as-h1 { font-size: clamp(2rem, 3.2vw, 2.7rem); } .hx-main.hx-svc .hx-svc-hero-sub { font-size: 0.98rem; } .hx-main.hx-svc .hx-svc-order { gap: 12px; padding: 16px 18px; } .hx-main.hx-svc .hx-svc-pkg { padding: 9px 6px 8px; } .hx-main.hx-svc .hx-svc-next { padding: 0.9em 1.6em; } } @media (max-width: 820px) { /* the rail turns vertical: the beam runs down the left, the stops sit beside it */ .hx-main.hx-svc .hx-svc-rail-track { top: 32px; bottom: 32px; left: 30px; right: auto; width: 4px; height: auto; } .hx-main.hx-svc .hx-svc-rail--many .hx-svc-rail-track { display: block; } .hx-main.hx-svc .hx-svc-rail--many .hx-svc-stops { grid-template-columns: 1fr; } .hx-main.hx-svc .hx-svc-rail-beam { width: 100%; height: 26%; left: 0; top: 0; background: linear-gradient(180deg, transparent, var(--hx-g1) 55%, var(--hx-g2)); transform: translateY(-100%); animation-name: hx-svc-beamDown; } .hx-main.hx-svc .hx-svc-stops { grid-template-columns: 1fr; gap: 26px; } .hx-main.hx-svc .hx-svc-stop { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "dot title" "dot text" "dot mini"; justify-items: start; text-align: left; gap: 6px 16px; padding: 0; } .hx-main.hx-svc .hx-svc-stop-dot { grid-area: dot; } .hx-main.hx-svc .hx-svc-stop h3, .hx-main.hx-svc .hx-svc-stop .hx-as-h3 { grid-area: title; align-self: end; } .hx-main.hx-svc .hx-svc-stop p { grid-area: text; max-width: none; } .hx-main.hx-svc .hx-svc-mini { grid-area: mini; justify-content: flex-start; max-width: 300px; margin-top: 6px; } .hx-main.hx-svc .hx-svc-bento-cell--a, .hx-main.hx-svc .hx-svc-bento-cell--b, .hx-main.hx-svc .hx-svc-bento-cell--c, .hx-main.hx-svc .hx-svc-bento-cell--d, .hx-main.hx-svc .hx-svc-bento-cell--e { grid-column: 1 / -1; } .hx-main.hx-svc .hx-svc-promise { grid-template-columns: 1fr; min-height: 0; gap: 22px; top: calc(var(--hx-svc-stack-top) + var(--hx-i, 0) * 12px); } .hx-main.hx-svc .hx-svc-promise-art { min-height: 0; } .hx-main.hx-svc .hx-svc-stack { --hx-svc-stack-top: calc(var(--hx-top-offset, 75px) + 8px); } } @media (max-width: 1024px) { .hx-main.hx-svc .hx-svc-split { grid-template-columns: 1fr; gap: 30px; } .hx-main.hx-svc .hx-svc-split--flip .hx-svc-split-media { order: 0; } .hx-main.hx-svc .hx-svc-split-copy { max-width: 640px; } .hx-main.hx-svc .hx-svc-hero-inner { grid-template-columns: 1fr; min-height: 0; gap: 34px; } .hx-main.hx-svc .hx-svc-hero-copy { max-width: 640px; } .hx-main.hx-svc .hx-svc-order { max-width: 640px; } } @keyframes hx-svc-beamDown { to { transform: translateY(385%); } } @media (max-width: 640px) { .hx-main.hx-svc .hx-svc-pill { display: inline-flex; } .hx-main.hx-svc .hx-svc-scene, .hx-main.hx-svc .hx-svc-reach { min-height: 112px; } .hx-main.hx-svc .hx-svc-rank { height: 124px; } .hx-main.hx-svc .hx-svc-bento { gap: 12px; } .hx-main.hx-svc .hx-svc-bento-cell { padding: 16px; gap: 10px; } .hx-main.hx-svc .hx-svc-promise { padding: 20px 18px; gap: 16px; } .hx-main.hx-svc .hx-svc-promise-art { min-height: 0; } .hx-main.hx-svc .hx-svc-loop-band .hx-svc-loop { padding-inline: 0; } .hx-main.hx-svc .hx-svc-loop-caption { margin-top: 10px; font-size: 0.94rem; } .hx-main.hx-svc .hx-svc-stats { gap: 6px; } .hx-main.hx-svc .hx-svc-stat { padding: 12px 4px; border-radius: 16px; gap: 4px; } .hx-main.hx-svc .hx-svc-stat-v { font-size: 1.25rem; } .hx-main.hx-svc .hx-svc-stat-l { font-size: 0.5rem; letter-spacing: 0.08em; } .hx-main.hx-svc .hx-svc-loop-svg--wide { display: none; } .hx-main.hx-svc .hx-svc-loop-svg--tall { display: block; } .hx-main.hx-svc .hx-svc-loop-label { font-size: 14px; } .hx-main.hx-svc .hx-svc-explore { padding: 10px; border-radius: 20px; } .hx-main.hx-svc .hx-svc-stage-wrap { width: 100%; } .hx-main.hx-svc .hx-svc-pkgs { gap: 18px 8px; } /* room for a "Most picked" tag on a second-row card */ .hx-main.hx-svc .hx-svc-receipt-list { grid-template-columns: 1fr; } .hx-main.hx-svc .hx-svc-receipt-what b { font-size: 1.1rem; white-space: normal; } .hx-main.hx-svc .hx-svc-buy-box { flex-wrap: wrap; padding: 8px; border-radius: 20px; } .hx-main.hx-svc .hx-svc-buy-input { flex-basis: 100%; padding: 8px 6px; } .hx-main.hx-svc .hx-svc-buy-btn { flex: 1; } .hx-main.hx-svc .hx-svc-buy-stats { gap: 12px; } .hx-main.hx-svc .hx-svc-buy-actions { grid-template-columns: 1fr; } .hx-main.hx-svc .hx-svc-others-carousel { grid-template-columns: 1fr; } .hx-main.hx-svc .hx-svc-others-nav { display: none; } .hx-main.hx-svc .hx-svc-other { width: 200px; padding: 16px 14px 14px; } .hx-main.hx-svc .hx-svc-other:not(.is-active) { filter: blur(1.5px) saturate(0.7); } /* the fanned cards are cut by the phone's edges: soften them */ .hx-main.hx-svc .hx-svc-other-qty { font-size: 1.8rem; } .hx-main.hx-svc .hx-svc-stage-hint { display: none; } .hx-main.hx-svc .hx-svc-pkg { min-height: 56px; } .hx-main.hx-svc .hx-svc-pkg-qty { font-size: 1.15rem; } .hx-main.hx-svc .hx-svc-stage { padding: 22px 16px 22px 12px; } .hx-main.hx-svc .hx-svc-stage-delta { right: 0; top: 0; font-size: 0.58rem; } .hx-main.hx-svc .hx-svc-pkg { flex-basis: calc(33.333% - 10px); min-width: 92px; padding: 10px 6px 9px; } .hx-main.hx-svc .hx-svc-phone { width: min(290px, 100%); border-radius: 42px; padding: 9px; } .hx-main.hx-svc .hx-svc-screen { border-radius: 34px; } .hx-main.hx-svc .hx-svc-press-band { padding: 14px 12px 16px; } .hx-main.hx-svc .hx-svc-press-logo { height: 26px; max-width: 150px; } .hx-main.hx-svc .hx-svc-hero-inner { padding-top: 22px; gap: 26px; } .hx-main.hx-svc .hx-svc-hero-copy { gap: 14px; } .hx-main.hx-svc .hx-svc-hero h1, .hx-main.hx-svc .hx-svc-hero .hx-as-h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); } .hx-main.hx-svc .hx-svc-points { gap: 6px 14px; } .hx-main.hx-svc .hx-svc-points li { font-size: 0.86rem; } .hx-main.hx-svc .hx-svc-order { padding: 16px; gap: 14px; } .hx-main.hx-svc .hx-svc-price-now { font-size: 1.8rem; } } @media (max-width: 360px) { } /* ============================================================ no motion: ?noanim QA switch (home.css already stops every animation and transition under html.hx-noanim) and reduced-motion users get the final frame of every scene ============================================================ */ html.hx-noanim .hx-main.hx-svc .hx-svc-hero-copy > *, html.hx-noanim .hx-main.hx-svc .hx-svc-stage-wrap { opacity: 1; } html.hx-noanim .hx-main.hx-svc .hx-svc-stage-delta { opacity: 1; transform: none; } html.hx-noanim .hx-main.hx-svc .hx-svc-flow { display: none; } html.hx-noanim .hx-main.hx-svc .hx-svc-explore-chip { opacity: 1; transform: none; } html.hx-noanim .hx-main.hx-svc :is(.hx-svc-cred-tick, .hx-svc-cred-followed, .hx-svc-cred-discs img, .hx-svc-spark-dot, .hx-svc-reach-chip, .hx-svc-dm, .hx-svc-msg, .hx-svc-checkout-card, .hx-svc-checkout-line, .hx-svc-shield-label, .hx-svc-retain-dot, .hx-svc-retain-label, .hx-svc-thread-time) { opacity: 1; transform: none; } html.hx-noanim .hx-main.hx-svc .hx-svc-checkout-card { transform: rotate(-3deg); } html.hx-noanim .hx-main.hx-svc .hx-svc-msg--typing { display: none; } html.hx-noanim .hx-main.hx-svc .hx-svc-spark-area { opacity: 0.12; } html.hx-noanim .hx-main.hx-svc :is(.hx-svc-cred-tick-path, .hx-svc-spark-line, .hx-svc-checkout-tick circle, .hx-svc-checkout-tick path, .hx-svc-shield-ring, .hx-svc-shield-path, .hx-svc-shield-tick, .hx-svc-retain-line) { stroke-dashoffset: 0; } html.hx-noanim .hx-main.hx-svc .hx-svc-rank-row { transform: translateY(calc(var(--hx-to) * 46px)); } html.hx-noanim .hx-main.hx-svc .hx-svc-rank-row.is-star { border-color: var(--hx-g1); } html.hx-noanim .hx-main.hx-svc .hx-svc-reach-ring { opacity: 0.5; transform: scale(calc(1.4 + var(--hx-i) * 0.8)); } html.hx-noanim .hx-main.hx-svc :is(.hx-svc-likes-heart, .hx-svc-likes-hearts i, .hx-svc-profile-tiles img, .hx-svc-brand-tiles span, .hx-svc-brand-chip) { animation: none; opacity: 1; transform: none; } html.hx-noanim .hx-main.hx-svc :is(.hx-svc-nopass-type, .hx-svc-nopass-ok, .hx-svc-nopass-strike, .hx-svc-nopass-pass small, .hx-svc-pkrange-roll, .hx-svc-pkrange-fill, .hx-svc-pkrange-thumb, .hx-svc-pkrange-chips span, .hx-svc-trial-msg, .hx-svc-trial-typing, .hx-svc-trial-badge, .hx-svc-refill-area, .hx-svc-refill-line, .hx-svc-refill-dot, .hx-svc-refill-tag, .hx-svc-gbp-cur b, .hx-svc-gbp-row) { animation: none; opacity: 1; transform: none; } html.hx-noanim .hx-main.hx-svc .hx-svc-nopass-type { max-width: 100%; border-right-color: transparent; } html.hx-noanim .hx-main.hx-svc .hx-svc-nopass-strike { width: 78px; } html.hx-noanim .hx-main.hx-svc .hx-svc-pkrange-roll { transform: translateY(-170px); } html.hx-noanim .hx-main.hx-svc .hx-svc-pkrange-fill { width: 100%; } html.hx-noanim .hx-main.hx-svc .hx-svc-pkrange-thumb { left: 100%; } html.hx-noanim .hx-main.hx-svc .hx-svc-refill-line { stroke-dashoffset: 0; } html.hx-noanim .hx-main.hx-svc .hx-svc-trial-typing { opacity: 0; } html.hx-noanim .hx-main.hx-svc .hx-svc-profile::after { display: none; } html.hx-noanim .hx-main.hx-svc .hx-svc-rail-beam { transform: translateX(385%); } html.hx-noanim .hx-main.hx-svc .hx-svc-mini-done { background: var(--hx-green); color: #fff; border-color: transparent; } html.hx-noanim .hx-main.hx-svc .hx-svc-mini-pill--hot { background: var(--hx-svc-accent-grad); color: #fff; border-color: transparent; } html.hx-noanim .hx-main.hx-svc .hx-svc-mini-type { max-width: 100%; } html.hx-noanim .hx-main.hx-svc .hx-svc-mini-field-a, html.hx-noanim .hx-main.hx-svc .hx-svc-mini-field-b { opacity: 0; } html.hx-noanim .hx-main.hx-svc .hx-svc-mini-field-c { opacity: 1; transform: none; } html.hx-noanim .hx-main.hx-svc .hx-svc-mini-btn-a { opacity: 0; } html.hx-noanim .hx-main.hx-svc .hx-svc-mini-btn-b { opacity: 1; transform: none; } html.hx-noanim .hx-main.hx-svc .hx-svc-pill { transition: none; } html.hx-noanim .hx-main.hx-svc .hx-svc-loop-halo { opacity: 0; } html.hx-noanim .hx-main.hx-svc .hx-svc-loop-trail { stroke-dasharray: 260 740; stroke-dashoffset: -120; } /* ============================================================ related services — the platform's other services as cards (sections/service/hx-related.blade.php; words from Pages › service › Related services) ============================================================ */ .hx-main.hx-svc .hx-svc-related { background: linear-gradient(180deg, transparent, var(--hx-svc-tint) 60%, transparent); } .hx-main.hx-svc .hx-svc-rel-kicker { order: -1; display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; background: var(--hx-glass-solid); border: 1px solid var(--hx-glass-line); box-shadow: 0 8px 20px -16px rgba(23, 18, 14, 0.3); font-family: var(--hx-font-mono), monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hx-ink); } .hx-main.hx-svc .hx-svc-rel-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--hx-svc-accent-grad); } .hx-main.hx-svc .hx-svc-rel-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .hx-main.hx-svc .hx-svc-rel-grid[data-count="1"] { grid-template-columns: minmax(0, 420px); justify-content: center; } .hx-main.hx-svc .hx-svc-rel-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; } .hx-main.hx-svc .hx-svc-rel-grid[data-count="4"], .hx-main.hx-svc .hx-svc-rel-grid[data-count="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hx-main.hx-svc .hx-svc-rel-item { min-width: 0; } .hx-main.hx-svc .hx-svc-rel-card { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 18px; height: 100%; min-height: 100%; padding: 22px 22px 20px; border-radius: 22px; text-decoration: none; color: var(--hx-ink); background: var(--hx-glass-solid); border: 1px solid var(--hx-glass-line); box-shadow: var(--hx-glass-shadow); transition: transform 0.5s var(--hx-svc-ease), box-shadow 0.5s var(--hx-svc-ease), border-color 0.4s ease; } .hx-main.hx-svc .hx-svc-rel-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(160deg, var(--hx-svc-tint-strong), transparent 55%); transition: opacity 0.4s ease; } .hx-main.hx-svc .hx-svc-rel-card:hover, .hx-main.hx-svc .hx-svc-rel-card:focus-visible { transform: translateY(-4px); box-shadow: var(--hx-glass-shadow), 0 30px 60px -32px var(--hx-g1); border-color: color-mix(in srgb, var(--hx-g1) 35%, transparent); } .hx-main.hx-svc .hx-svc-rel-card:hover::before, .hx-main.hx-svc .hx-svc-rel-card:focus-visible::before { opacity: 1; } .hx-main.hx-svc .hx-svc-rel-card:focus-visible { outline: 3px solid var(--hx-g1); outline-offset: 3px; } .hx-main.hx-svc .hx-svc-rel-ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: var(--hx-svc-accent-grad); box-shadow: 0 14px 28px -14px var(--hx-g1); } .hx-main.hx-svc .hx-svc-rel-body { display: grid; gap: 8px; } .hx-main.hx-svc .hx-svc-rel-name { font-size: 1.22rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; } .hx-main.hx-svc .hx-svc-rel-name em { font-family: var(--hx-font-serif), serif; font-style: italic; font-weight: 400; font-size: 1.06em; background: var(--hx-svc-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hx-main.hx-svc .hx-svc-rel-text { font-size: 0.95rem; line-height: 1.55; color: var(--hx-svc-ink-soft); text-wrap: pretty; } .hx-main.hx-svc .hx-svc-rel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hx-svc-line); } .hx-main.hx-svc .hx-svc-rel-from { font-size: 0.82rem; color: var(--hx-svc-ink-soft); white-space: nowrap; } .hx-main.hx-svc .hx-svc-rel-from b { font-family: var(--hx-font-display), sans-serif; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; background: var(--hx-svc-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; } .hx-main.hx-svc .hx-svc-rel-cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--hx-font-display), sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--hx-ink); white-space: nowrap; } .hx-main.hx-svc .hx-svc-rel-cta .hx-arr { transition: transform 0.3s var(--hx-svc-ease); } .hx-main.hx-svc .hx-svc-rel-card:hover .hx-svc-rel-cta .hx-arr { transform: translateX(4px); } .hx-main.hx-svc .hx-svc-rel-mark { position: absolute; right: -36px; bottom: -40px; width: 150px; height: 150px; color: var(--hx-g1); opacity: 0.06; transform: rotate(-12deg); z-index: -1; pointer-events: none; transition: transform 0.6s var(--hx-svc-ease), opacity 0.4s ease; } .hx-main.hx-svc .hx-svc-rel-card:hover .hx-svc-rel-mark { transform: rotate(-4deg) scale(1.08); opacity: 0.1; } @media (max-width: 1024px) { .hx-main.hx-svc .hx-svc-rel-grid, .hx-main.hx-svc .hx-svc-rel-grid[data-count="4"], .hx-main.hx-svc .hx-svc-rel-grid[data-count="8"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .hx-main.hx-svc .hx-svc-rel-grid, .hx-main.hx-svc .hx-svc-rel-grid[data-count="2"], .hx-main.hx-svc .hx-svc-rel-grid[data-count="4"], .hx-main.hx-svc .hx-svc-rel-grid[data-count="8"] { grid-template-columns: minmax(0, 1fr); gap: 14px; } .hx-main.hx-svc .hx-svc-rel-card { padding: 18px 18px 16px; gap: 14px; } } @media (prefers-reduced-motion: reduce) { .hx-main.hx-svc .hx-svc-rel-card, .hx-main.hx-svc .hx-svc-rel-mark, .hx-main.hx-svc .hx-svc-rel-cta .hx-arr { transition: none; } .hx-main.hx-svc .hx-svc-explore-tile, .hx-main.hx-svc .hx-svc-explore-tile img, .hx-main.hx-svc .hx-svc-explore-chip, .hx-main.hx-svc .hx-svc-explore-tile::after { transition: none; } .hx-main.hx-svc .hx-svc-explore-chip { opacity: 1; transform: none; } .hx-main.hx-svc .hx-svc-loop-trail, .hx-main.hx-svc .hx-svc-loop-halo, .hx-main.hx-svc .hx-svc-loop-dot { animation: none; } .hx-main.hx-svc .hx-svc-loop-halo { opacity: 0; } .hx-main.hx-svc .hx-svc-loop-trail { stroke-dasharray: 260 740; stroke-dashoffset: -120; } .hx-main.hx-svc .hx-svc-loop-comet { display: none; } .hx-main.hx-svc .is-on :is(.hx-svc-cred-tick, .hx-svc-cred-tick-path, .hx-svc-cred-followed, .hx-svc-cred-discs img, .hx-svc-spark-area, .hx-svc-spark-line, .hx-svc-spark-dot, .hx-svc-reach-ring, .hx-svc-reach-chip, .hx-svc-dm, .hx-svc-rank-row, .hx-svc-msg, .hx-svc-msg--typing i, .hx-svc-thread-time, .hx-svc-checkout-card, .hx-svc-checkout-line, .hx-svc-checkout-tick circle, .hx-svc-checkout-tick path, .hx-svc-shield-ring, .hx-svc-shield-path, .hx-svc-shield-tick, .hx-svc-shield-label, .hx-svc-retain-line, .hx-svc-retain-dot, .hx-svc-retain-label, .hx-svc-retain-label svg, .hx-svc-likes-heart, .hx-svc-likes-hearts i, .hx-svc-profile-tiles img, .hx-svc-profile::after, .hx-svc-brand-tiles span, .hx-svc-brand-chip, .hx-svc-nopass-type, .hx-svc-nopass-ok, .hx-svc-nopass-strike, .hx-svc-nopass-pass small, .hx-svc-pkrange-roll, .hx-svc-pkrange-fill, .hx-svc-pkrange-thumb, .hx-svc-pkrange-chips span, .hx-svc-trial-msg, .hx-svc-trial-typing, .hx-svc-trial-typing i, .hx-svc-trial-badge, .hx-svc-refill-area, .hx-svc-refill-line, .hx-svc-refill-dot, .hx-svc-refill-tag, .hx-svc-gbp-cur b, .hx-svc-gbp-row) { animation: none; } .hx-main.hx-svc .is-on :is(.hx-svc-likes-heart, .hx-svc-profile-tiles img, .hx-svc-brand-tiles span, .hx-svc-brand-chip, .hx-svc-nopass-ok, .hx-svc-nopass-pass small, .hx-svc-pkrange-chips span, .hx-svc-trial-msg, .hx-svc-trial-badge, .hx-svc-refill-area, .hx-svc-refill-dot, .hx-svc-refill-tag, .hx-svc-gbp-cur b, .hx-svc-gbp-row) { opacity: 1; transform: none; } .hx-main.hx-svc .is-on .hx-svc-nopass-type { max-width: 100%; border-right-color: transparent; } .hx-main.hx-svc .is-on .hx-svc-nopass-strike { width: 78px; } .hx-main.hx-svc .is-on .hx-svc-pkrange-roll { transform: translateY(-170px); } .hx-main.hx-svc .is-on .hx-svc-pkrange-fill { width: 100%; } .hx-main.hx-svc .is-on .hx-svc-pkrange-thumb { left: 100%; } .hx-main.hx-svc .is-on .hx-svc-refill-line { stroke-dashoffset: 0; } .hx-main.hx-svc .is-on .hx-svc-trial-typing { opacity: 0; } .hx-main.hx-svc .hx-svc-realp *, .hx-main.hx-svc .hx-svc-realp-av { animation: none !important; } .hx-main.hx-svc .hx-svc-realp-av { background: var(--hx-svc-accent-grad, linear-gradient(135deg, var(--hx-g1), var(--hx-g2))); } .hx-main.hx-svc .hx-svc-realp-egg { opacity: 0; } .hx-main.hx-svc :is(.hx-svc-realp-face, .hx-svc-realp-name b, .hx-svc-realp-stats, .hx-svc-realp-tile img, .hx-svc-realp-dot svg, .hx-svc-realp-badge) { opacity: 1; transform: none; } .hx-main.hx-svc .hx-svc-realp-live { transform: none; } .hx-main.hx-svc .hx-svc-realp-bio i { background: color-mix(in srgb, var(--hx-g1) 28%, #fff); } .hx-main.hx-svc .hx-svc-realp-tile { border-color: transparent; } .hx-main.hx-svc .hx-svc-realp-dot { background: var(--hx-green); } .hx-main.hx-svc .hx-svc-realp-chk { color: var(--hx-ink); } .hx-main.hx-svc :is(.hx-svc-cred-tick, .hx-svc-cred-followed, .hx-svc-cred-discs img, .hx-svc-spark-dot, .hx-svc-reach-chip, .hx-svc-dm, .hx-svc-msg, .hx-svc-checkout-line, .hx-svc-shield-label, .hx-svc-retain-dot, .hx-svc-retain-label, .hx-svc-thread-time) { opacity: 1; transform: none; } .hx-main.hx-svc .hx-svc-checkout-card { opacity: 1; transform: rotate(-3deg); } .hx-main.hx-svc .hx-svc-msg--typing { display: none; } .hx-main.hx-svc .hx-svc-spark-area { opacity: 0.12; } .hx-main.hx-svc :is(.hx-svc-cred-tick-path, .hx-svc-spark-line, .hx-svc-checkout-tick circle, .hx-svc-checkout-tick path, .hx-svc-shield-ring, .hx-svc-shield-path, .hx-svc-shield-tick, .hx-svc-retain-line) { stroke-dashoffset: 0; } .hx-main.hx-svc .hx-svc-rank-row { transform: translateY(calc(var(--hx-to) * 46px)); } .hx-main.hx-svc .hx-svc-rank-row.is-star { border-color: var(--hx-g1); } .hx-main.hx-svc .hx-svc-reach-ring { opacity: 0.5; transform: scale(calc(1.4 + var(--hx-i) * 0.8)); } .hx-main.hx-svc .hx-svc-promise { position: relative; top: auto; } .hx-main.hx-svc .hx-svc-bento-cell { transition: none; } .hx-main.hx-svc :is(.hx-svc-rail-beam, .hx-svc-stop-dot, .hx-svc-mini-pill--hot, .hx-svc-mini-type, .hx-svc-mini-caret, .hx-svc-mini-field-a, .hx-svc-mini-field-b, .hx-svc-mini-field-c, .hx-svc-mini-spin, .hx-svc-mini-btn-a, .hx-svc-mini-btn-b) { animation: none; } .hx-main.hx-svc .hx-svc-rail-beam { transform: translateX(385%); } .hx-main.hx-svc .hx-svc-mini-done { animation: none; background: var(--hx-green); color: #fff; border-color: transparent; } .hx-main.hx-svc .hx-svc-mini-pill--hot { background: var(--hx-svc-accent-grad); color: #fff; border-color: transparent; } .hx-main.hx-svc .hx-svc-mini-type { max-width: 100%; } .hx-main.hx-svc .hx-svc-mini-field-a, .hx-main.hx-svc .hx-svc-mini-field-b { opacity: 0; } .hx-main.hx-svc .hx-svc-mini-field-c { opacity: 1; transform: none; } .hx-main.hx-svc .hx-svc-mini-btn-a { opacity: 0; } .hx-main.hx-svc .hx-svc-mini-btn-b { opacity: 1; transform: none; } .hx-main.hx-svc .hx-svc-pill { transition: none; } .hx-main.hx-svc .hx-svc-hero-copy > *, .hx-main.hx-svc .hx-svc-stage-wrap { opacity: 1; animation: none; } .hx-main.hx-svc .hx-svc-flow { display: none; } .hx-main.hx-svc .hx-svc-stage-delta { opacity: 1; transform: none; transition: none; } .hx-main.hx-svc .hx-svc-ig-live { animation: none; } .hx-main.hx-svc .hx-svc-pkg { transition: none; } .hx-main.hx-svc .hx-svc-stage-glow, .hx-main.hx-svc .hx-svc-stage-orbit, .hx-main.hx-svc .hx-svc-press-track, .hx-main.hx-svc .hx-svc-stage-live .hx-live-dot { animation: none; } } /* ── the searching state: under the search box while the account is looked up ───────────── A radar sweep around a breathing core (the platform's colours), an orbiting spark, the handle with a light passing through it, and a message that moves on as the wait grows (data-pkg-searching-phase 0→2 slows the sweep). Static under reduced motion. */ .hx-main.hx-svc .hx-svc-search { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--hx-svc-line); box-shadow: 0 18px 34px -26px rgba(23, 18, 14, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: hx-svc-fadeUp 0.4s ease both; } .hx-main.hx-svc .hx-svc-search[hidden] { display: none; } .hx-main.hx-svc .hx-svc-search-orbit { position: relative; width: 44px; height: 44px; } .hx-main.hx-svc .hx-svc-search-core { position: absolute; inset: 10px; border-radius: 50%; background: var(--hx-svc-accent-grad); opacity: 0.9; animation: hx-svc-search-breathe 1.8s ease-in-out infinite; } .hx-main.hx-svc .hx-svc-search-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 60%, color-mix(in srgb, var(--hx-g1) 50%, transparent) 86%, var(--hx-g1) 100%); -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%); animation: hx-svc-search-sweep 1.4s linear infinite; } .hx-main.hx-svc .hx-svc-search-dot { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--hx-g2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hx-g2) 22%, transparent); animation: hx-svc-search-orbit 1.4s linear infinite; } .hx-main.hx-svc .hx-svc-search-copy { display: grid; gap: 2px; min-width: 0; line-height: 1.25; } .hx-main.hx-svc .hx-svc-search-handle { font-size: 0.96rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--hx-ink); background: linear-gradient(90deg, var(--hx-ink) 0 40%, var(--hx-g1) 50%, var(--hx-ink) 60% 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: hx-svc-search-shimmer 2.2s ease-in-out infinite; } .hx-main.hx-svc .hx-svc-search-handle:empty { display: none; } .hx-main.hx-svc .hx-svc-search-text { font-size: 0.82rem; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-search-trail { display: inline-flex; gap: 5px; } .hx-main.hx-svc .hx-svc-search-trail i { width: 6px; height: 6px; border-radius: 50%; background: var(--hx-g1); opacity: 0.25; animation: hx-svc-search-trail 1.2s ease-in-out infinite; } .hx-main.hx-svc .hx-svc-search-trail i:nth-child(2) { animation-delay: 0.15s; } .hx-main.hx-svc .hx-svc-search-trail i:nth-child(3) { animation-delay: 0.3s; } .hx-main.hx-svc .hx-svc-search[data-pkg-searching-phase="1"] .hx-svc-search-sweep, .hx-main.hx-svc .hx-svc-search[data-pkg-searching-phase="1"] .hx-svc-search-dot { animation-duration: 2s; } .hx-main.hx-svc .hx-svc-search[data-pkg-searching-phase="2"] .hx-svc-search-sweep, .hx-main.hx-svc .hx-svc-search[data-pkg-searching-phase="2"] .hx-svc-search-dot { animation-duration: 2.8s; } .hx-main.hx-svc .hx-svc-search[data-pkg-searching-phase="2"] .hx-svc-search-core { opacity: 1; } @keyframes hx-svc-search-sweep { to { transform: rotate(360deg); } } @keyframes hx-svc-search-orbit { from { transform: rotate(0deg) translateX(19px) rotate(0deg); } to { transform: rotate(360deg) translateX(19px) rotate(-360deg); } } @keyframes hx-svc-search-breathe { 0%, 100% { transform: scale(0.9); } 50% { transform: scale(1); } } @keyframes hx-svc-search-shimmer { 0% { background-position: 110% 0; } 100% { background-position: -110% 0; } } @keyframes hx-svc-search-trail { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } /* four or more steps: two per row on mid widths, the horizontal track hidden (it would cross two rows) */ @media (min-width: 821px) and (max-width: 1200px) { .hx-main.hx-svc .hx-svc-rail--many .hx-svc-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; } .hx-main.hx-svc .hx-svc-rail--many .hx-svc-rail-track { display: none; } } @media (prefers-reduced-motion: reduce) { .hx-main.hx-svc .hx-svc-search, .hx-main.hx-svc .hx-svc-search-core, .hx-main.hx-svc .hx-svc-search-sweep, .hx-main.hx-svc .hx-svc-search-dot, .hx-main.hx-svc .hx-svc-search-handle, .hx-main.hx-svc .hx-svc-search-trail i { animation: none; } .hx-main.hx-svc .hx-svc-search-handle { background: none; -webkit-text-fill-color: var(--hx-ink); } } html.hx-noanim .hx-main.hx-svc .hx-svc-search, html.hx-noanim .hx-main.hx-svc .hx-svc-search * { animation: none !important; } /* the "Trusted & featured" band runs edge to edge like the home ticker: it breaks out of the wrap, loses its card corners, and keeps its label, glass fill and paused-on-hover drift */ .hx-main.hx-svc .hx-svc-press-band { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); border-radius: 0; border-inline: 0; box-shadow: none; padding-inline: 0; } .hx-main.hx-svc .hx-svc-press-viewport { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } /* the service sequence puts Reviews straight after How it works: when no admin section sits between them, Reviews drops its tint so the bands keep alternating instead of merging into one long tinted block */ .hx-main.hx-svc #how.hx-section--tint + .hx-cs-slot:empty + #reviews.hx-section--tint { background: none; border-block-color: transparent; } /* real, active profiles: an empty profile fills in (photo, name, bio, posts, the online dot), the four checks tick and the badge lands. One 8s loop: empty to 10%, photo 12%, bio 25%, posts 38%, active 50%, badge 60%, held to 92%, reset. It starts when the card scrolls into view and pauses while the card is off screen. */ .hx-main.hx-svc .hx-svc-realp { gap: 10px; } .hx-main.hx-svc .hx-svc-realp-top { display: flex; align-items: center; gap: 10px; } .hx-main.hx-svc .hx-svc-realp-av { position: relative; flex: none; display: block; width: 46px; height: 46px; border-radius: 50%; padding: 2px; background: rgba(23, 18, 14, 0.1); } .hx-main.hx-svc .hx-svc-realp-av-in { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; overflow: hidden; background: rgba(23, 18, 14, 0.08); } .hx-main.hx-svc .hx-svc-realp-egg { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(23, 18, 14, 0.28); } .hx-main.hx-svc .hx-svc-realp-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(0.6); } .hx-main.hx-svc .hx-svc-realp-live { position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--hx-green); border: 2px solid #fff; transform: scale(0); } .hx-main.hx-svc .hx-svc-realp-meta { flex: 1; min-width: 0; display: grid; gap: 6px; } .hx-main.hx-svc .hx-svc-realp-name { position: relative; display: block; height: 12px; width: 70%; border-radius: 4px; background: rgba(23, 18, 14, 0.1); overflow: hidden; } .hx-main.hx-svc .hx-svc-realp-name b { position: absolute; inset: 0; display: flex; align-items: center; font-size: 0.78rem; font-weight: 700; color: var(--hx-ink); background: #fff; white-space: nowrap; opacity: 0; } .hx-main.hx-svc .hx-svc-realp-stats { display: flex; gap: 10px; opacity: 0; } .hx-main.hx-svc .hx-svc-realp-stats span { font-size: 0.6rem; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-realp-stats i { display: block; font-style: normal; font-weight: 800; font-size: 0.7rem; color: var(--hx-ink); } .hx-main.hx-svc .hx-svc-realp-bio { display: grid; gap: 5px; } .hx-main.hx-svc .hx-svc-realp-bio i { display: block; height: 6px; border-radius: 3px; background: rgba(23, 18, 14, 0.1); transform-origin: left; } .hx-main.hx-svc .hx-svc-realp-bio i:nth-child(1) { width: 90%; } .hx-main.hx-svc .hx-svc-realp-bio i:nth-child(2) { width: 60%; } .hx-main.hx-svc .hx-svc-realp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .hx-main.hx-svc .hx-svc-realp-tile { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #fcfaf8; border: 1px dashed rgba(23, 18, 14, 0.14); } .hx-main.hx-svc .hx-svc-realp-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(0.8); } .hx-main.hx-svc .hx-svc-realp-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .hx-main.hx-svc .hx-svc-realp-chk { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 8px; background: #fcfaf8; border: 1px solid rgba(23, 18, 14, 0.08); font-size: 0.64rem; font-weight: 600; color: var(--hx-svc-ink-soft); } .hx-main.hx-svc .hx-svc-realp-dot { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: rgba(23, 18, 14, 0.1); } .hx-main.hx-svc .hx-svc-realp-dot svg { opacity: 0; } .hx-main.hx-svc .hx-svc-realp-badge { display: flex; align-items: center; justify-content: center; height: 32px; margin-top: 2px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--hx-svc-accent-grad, linear-gradient(90deg, var(--hx-g1), var(--hx-g2))); opacity: 0.2; transform: scale(0.97); } .hx-main.hx-svc .is-on .hx-svc-realp-av { animation: hx-svc-realpRing 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-egg { animation: hx-svc-realpOut 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-face { animation: hx-svc-realpPhoto 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-live { animation: hx-svc-realpLive 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-name b, .hx-main.hx-svc .is-on .hx-svc-realp-stats { animation: hx-svc-realpName 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-bio i:nth-child(1) { animation: hx-svc-realpBio1 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-bio i:nth-child(2) { animation: hx-svc-realpBio2 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-tile:nth-child(1) img { animation: hx-svc-realpTile 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-tile:nth-child(1) { animation: hx-svc-realpTileBox 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-tile:nth-child(2) { animation: hx-svc-realpTileBox 8s ease infinite 0.25s; } .hx-main.hx-svc .is-on .hx-svc-realp-tile:nth-child(3) { animation: hx-svc-realpTileBox 8s ease infinite 0.5s; } .hx-main.hx-svc .is-on .hx-svc-realp-tile:nth-child(2) img { animation: hx-svc-realpTile 8s ease infinite 0.25s; } .hx-main.hx-svc .is-on .hx-svc-realp-tile:nth-child(3) img { animation: hx-svc-realpTile 8s ease infinite 0.5s; } .hx-main.hx-svc .is-on .hx-svc-realp-chk--1 { animation: hx-svc-realpTxt1 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-chk--1 .hx-svc-realp-dot { animation: hx-svc-realpDot1 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-chk--1 .hx-svc-realp-dot svg { animation: hx-svc-realpTick1 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-chk--2 { animation: hx-svc-realpTxt2 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-chk--2 .hx-svc-realp-dot { animation: hx-svc-realpDot2 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-chk--2 .hx-svc-realp-dot svg { animation: hx-svc-realpTick2 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-chk--3 { animation: hx-svc-realpTxt3 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-chk--3 .hx-svc-realp-dot { animation: hx-svc-realpDot3 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-chk--3 .hx-svc-realp-dot svg { animation: hx-svc-realpTick3 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-chk--4 { animation: hx-svc-realpTxt4 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-chk--4 .hx-svc-realp-dot { animation: hx-svc-realpDot4 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-chk--4 .hx-svc-realp-dot svg { animation: hx-svc-realpTick4 8s ease infinite; } .hx-main.hx-svc .is-on .hx-svc-realp-badge { animation: hx-svc-realpBadge 8s ease infinite; } .hx-main.hx-svc .is-on:not(.is-live) .hx-svc-realp *, .hx-main.hx-svc .is-on:not(.is-live) .hx-svc-realp-av { animation-play-state: paused; } @keyframes hx-svc-realpOut { 0%, 10% { opacity: 1; } 14%, 94% { opacity: 0; } 100% { opacity: 1; } } @keyframes hx-svc-realpPhoto { 0%, 10% { opacity: 0; transform: scale(0.6); } 15%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } } @keyframes hx-svc-realpRing { 0%, 46% { background: rgba(23, 18, 14, 0.1); } 52%, 94% { background: var(--hx-svc-accent-grad, linear-gradient(135deg, var(--hx-g1), var(--hx-g2))); } 100% { background: rgba(23, 18, 14, 0.1); } } @keyframes hx-svc-realpName { 0%, 12% { opacity: 0; } 17%, 94% { opacity: 1; } 100% { opacity: 0; } } @keyframes hx-svc-realpBio1 { 0%, 22% { background: rgba(23, 18, 14, 0.1); transform: scaleX(1); } 23% { transform: scaleX(0); } 28%, 94% { background: color-mix(in srgb, var(--hx-g1) 28%, #fff); transform: scaleX(1); } 100% { background: rgba(23, 18, 14, 0.1); } } @keyframes hx-svc-realpBio2 { 0%, 24% { background: rgba(23, 18, 14, 0.1); transform: scaleX(1); } 25% { transform: scaleX(0); } 30%, 94% { background: color-mix(in srgb, var(--hx-g2) 30%, #fff); transform: scaleX(1); } 100% { background: rgba(23, 18, 14, 0.1); } } @keyframes hx-svc-realpTileBox { 0%, 34% { border-color: rgba(23, 18, 14, 0.14); } 40%, 94% { border-color: transparent; } 100% { border-color: rgba(23, 18, 14, 0.14); } } @keyframes hx-svc-realpTile { 0%, 34% { opacity: 0; transform: scale(0.8); } 40%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } } @keyframes hx-svc-realpLive { 0%, 48% { transform: scale(0); } 52% { transform: scale(1.3); } 55%, 94% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes hx-svc-realpDot1 { 0%, 14% { background: rgba(23, 18, 14, 0.1); } 17%, 94% { background: var(--hx-green); } 100% { background: rgba(23, 18, 14, 0.1); } } @keyframes hx-svc-realpTick1 { 0%, 14% { opacity: 0; } 17%, 94% { opacity: 1; } 100% { opacity: 0; } } @keyframes hx-svc-realpTxt1 { 0%, 14% { color: var(--hx-svc-ink-soft); } 17%, 94% { color: var(--hx-ink); } 100% { color: var(--hx-svc-ink-soft); } } @keyframes hx-svc-realpDot2 { 0%, 28% { background: rgba(23, 18, 14, 0.1); } 31%, 94% { background: var(--hx-green); } 100% { background: rgba(23, 18, 14, 0.1); } } @keyframes hx-svc-realpTick2 { 0%, 28% { opacity: 0; } 31%, 94% { opacity: 1; } 100% { opacity: 0; } } @keyframes hx-svc-realpTxt2 { 0%, 28% { color: var(--hx-svc-ink-soft); } 31%, 94% { color: var(--hx-ink); } 100% { color: var(--hx-svc-ink-soft); } } @keyframes hx-svc-realpDot3 { 0%, 44% { background: rgba(23, 18, 14, 0.1); } 47%, 94% { background: var(--hx-green); } 100% { background: rgba(23, 18, 14, 0.1); } } @keyframes hx-svc-realpTick3 { 0%, 44% { opacity: 0; } 47%, 94% { opacity: 1; } 100% { opacity: 0; } } @keyframes hx-svc-realpTxt3 { 0%, 44% { color: var(--hx-svc-ink-soft); } 47%, 94% { color: var(--hx-ink); } 100% { color: var(--hx-svc-ink-soft); } } @keyframes hx-svc-realpDot4 { 0%, 52% { background: rgba(23, 18, 14, 0.1); } 55%, 94% { background: var(--hx-green); } 100% { background: rgba(23, 18, 14, 0.1); } } @keyframes hx-svc-realpTick4 { 0%, 52% { opacity: 0; } 55%, 94% { opacity: 1; } 100% { opacity: 0; } } @keyframes hx-svc-realpTxt4 { 0%, 52% { color: var(--hx-svc-ink-soft); } 55%, 94% { color: var(--hx-ink); } 100% { color: var(--hx-svc-ink-soft); } } @keyframes hx-svc-realpBadge { 0%, 58% { opacity: 0.2; transform: scale(0.97); } 63% { opacity: 1; transform: scale(1.04); } 66%, 94% { opacity: 1; transform: none; } 100% { opacity: 0.2; transform: scale(0.97); } }