@font-face { font-family: "CL Manrope"; src: url("../fonts/Manrope-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "CL Manrope"; src: url("../fonts/Manrope-SemiBold.woff2") format("woff2"); font-weight: 600 800; font-display: swap; } :root { --cl-ink: oklch(20% 0.07 270); --cl-ink-soft: oklch(39% 0.055 270); --cl-blue: oklch(85% 0.055 260); --cl-blue-deep: oklch(61% 0.14 266); --cl-lilac: oklch(89% 0.07 302); --cl-rose: oklch(82% 0.11 350); --cl-paper: oklch(98.5% 0.009 285); --cl-surface: oklch(96.5% 0.025 274); --cl-line: oklch(84% 0.03 276); --cl-success: oklch(53% 0.12 157); --cl-error: oklch(53% 0.18 25); --cl-ease: cubic-bezier(0.16, 1, 0.3, 1); --cl-shadow: 0 2rem 5rem oklch(28% 0.05 270 / 0.14); --cl-hero-sky: linear-gradient(90deg, oklch(91% 0.058 247) 0%, oklch(88% 0.066 266) 58%, oklch(92% 0.058 310) 100%); --cl-reading-size: clamp(1.125rem, calc(1.05rem + 0.3vw), 1.25rem); --cl-supporting-heading-size: clamp(1.55rem, calc(1.42rem + 0.5vw), 1.85rem); } /* Scoped to the finder template so this stylesheet can also be loaded on other pages (e.g. celebrity-crush-lookalike.php) purely for the .cl-crush reveal without repainting their . */ body[class*="page-template-page-celebrity-look-alike-finder"] { background: var(--cl-paper) !important; } /* Let the standard glass navigation float directly over the hero. */ body[class*="page-template-page-celebrity-look-alike-finder"] .wrapper { padding-top: 0; background: var(--cl-hero-sky); } body[class*="page-template-page-celebrity-look-alike-finder"] .header, body[class*="page-template-page-celebrity-look-alike-finder"] .header--fixed { position: fixed; top: 0; right: 0; left: 0; z-index: 100; background: transparent; } body[class*="page-template-page-celebrity-look-alike-finder"] .header__wrapper, body[class*="page-template-page-celebrity-look-alike-finder"] .header--fixed .header__wrapper { border-color: oklch(42% 0.06 270 / 0.2); background: oklch(98.5% 0.009 285 / 0.64); box-shadow: 0 1rem 3rem oklch(24% 0.06 270 / 0.1); -webkit-backdrop-filter: blur(1.55rem); backdrop-filter: blur(1.55rem); } .cl-page, .cl-page *, .cl-page *::before, .cl-page *::after { box-sizing: border-box; } .cl-page { background: var(--cl-paper); color: var(--cl-ink); font-family: "CL Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; font-kerning: normal; overflow: clip; } .cl-page [hidden] { display: none !important; } .cl-page img { display: block; max-width: 100%; } .cl-page button, .cl-page input { font: inherit; } .cl-page button, .cl-page a { -webkit-tap-highlight-color: transparent; } .cl-page a { color: inherit; } .cl-page h1, .cl-page h2, .cl-page h3, .cl-page p { margin: 0; } .cl-page h1, .cl-page h2, .cl-page h3 { letter-spacing: -0.045em; line-height: 0.98; text-wrap: balance; } .cl-page p { line-height: 1.65; text-wrap: pretty; } .cl-shell { width: min(100% - 2rem, 86rem); margin-inline: auto; } .cl-section { padding-block: clamp(5rem, 10vw, 9rem); } .cl-kicker, .cl-eyebrow, .cl-result__number { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; } .cl-kicker, .cl-eyebrow { color: oklch(43% 0.13 297); } .cl-poster .cl-kicker, .cl-compare .cl-kicker, .cl-how .cl-kicker, .cl-score-guide .cl-kicker, .cl-tips .cl-kicker, .cl-dating .cl-kicker, .cl-faq .cl-kicker { font-size: clamp(0.8125rem, calc(0.78rem + 0.12vw), 0.875rem); line-height: 1.5; } .cl-skip { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 600; transform: translateY(-150%); border-radius: 999px; background: var(--cl-ink); color: var(--cl-paper); font: 700 0.9rem/1 "CL Manrope", sans-serif; padding: 0.9rem 1.2rem; transition: transform 180ms var(--cl-ease); } .cl-skip:focus { transform: translateY(0); } .cl-button { display: inline-flex; min-height: 3.5rem; align-items: center; justify-content: center; gap: 0.75rem; border: 0; border-radius: 999px; cursor: pointer; font-weight: 800; line-height: 1.2; padding: 1rem 1.45rem; text-align: center; text-decoration: none; transition: transform 180ms var(--cl-ease), background 180ms var(--cl-ease), color 180ms var(--cl-ease), box-shadow 180ms var(--cl-ease), opacity 180ms var(--cl-ease); } .cl-button svg { width: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; } .cl-button:focus-visible, .cl-match:focus-visible, .cl-upload__tab:focus-visible, .cl-upload__drop:focus-visible, .cl-crush-reveal__close:focus-visible, .cl-auth button:focus-visible, .cl-faq summary:focus-visible, .cl-reel a:focus-visible, .cl-text-link:focus-visible { outline: 0.18rem solid oklch(62% 0.2 293); outline-offset: 0.25rem; } .cl-button:active { transform: translateY(0.08rem) scale(0.985); } .cl-button:disabled { cursor: not-allowed; opacity: 0.42; } .cl-button--primary { background: var(--cl-ink); box-shadow: 0 1.1rem 2.4rem oklch(22% 0.08 270 / 0.18); color: var(--cl-paper); } .cl-button--secondary { border: 0.08rem solid var(--cl-line); background: transparent; color: var(--cl-ink); } .cl-button--light { background: var(--cl-paper); color: var(--cl-ink); } .cl-button--wide { width: 100%; } .cl-button--large { min-height: 4.1rem; padding-inline: 2rem; } @media (hover: hover) { .cl-button:not(:disabled):hover { transform: translateY(-0.16rem); } .cl-button--primary:hover { background: oklch(28% 0.09 275); box-shadow: 0 1.4rem 3rem oklch(22% 0.08 270 / 0.22); } .cl-button--secondary:hover { border-color: var(--cl-ink); background: oklch(94% 0.025 285); } .cl-button--light:hover { background: oklch(94% 0.035 310); } } /* Hero */ .cl-hero { position: relative; isolation: isolate; min-height: calc(100svh - 5rem); background: var(--cl-hero-sky); overflow: hidden; padding-block: clamp(1.6rem, 3vw, 3rem) clamp(1.6rem, 2.4vw, 2.6rem); } .cl-hero::before { position: absolute; inset: 0; z-index: -2; background-image: url("../img/noise.png"); content: ""; mix-blend-mode: soft-light; opacity: 0.13; pointer-events: none; } .cl-hero__glow { position: absolute; z-index: -1; width: 24rem; aspect-ratio: 1; border-radius: 50%; filter: blur(5rem); opacity: 0.4; pointer-events: none; } .cl-hero__glow--one { top: 20%; right: -10rem; background: oklch(78% 0.12 260); } .cl-hero__glow--two { bottom: -12rem; left: 20%; background: oklch(83% 0.13 348); } .cl-hero__layout { display: grid; align-items: center; gap: 2rem; } .cl-hero__copy { position: relative; z-index: 20; max-width: 38rem; } .cl-eyebrow { margin-bottom: 1.25rem !important; font-size: 1.2rem; } .cl-hero h1 { max-width: 10ch; font-size: clamp(3rem, 13vw, 6.7rem); font-weight: 800; } .cl-hero__lead { max-width: 48rem; margin-top: 1.6rem !important; color: var(--cl-ink-soft); font-size: clamp(1.6rem, 1.25vw, 1.8rem); font-weight: 400; line-height: 1.5 !important; } .cl-hero__body { max-width: 42rem; margin-top: 0.6rem !important; color: var(--cl-ink-soft); font-size: clamp(1.8rem, 1.45vw, 2.2rem); line-height: 1.4 !important; } .cl-page .cl-button--upload { width: min(100%, 30rem); min-height: 5.2rem; margin-top: 2rem; font-size: 1.6rem; } .cl-hero__alert { width: min(100%, 30rem); margin-top: 1.2rem !important; display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); align-items: start; gap: 1.1rem; padding: 1.3rem 1.4rem; border: 1px solid oklch(72% 0.08 300 / 0.42); border-radius: 1.6rem; background: oklch(98% 0.018 295 / 0.82); box-shadow: 0 1.2rem 3rem oklch(38% 0.07 270 / 0.1); -webkit-backdrop-filter: blur(1.4rem); backdrop-filter: blur(1.4rem); } .cl-hero__alert.is-error { border: 1px solid oklch(72% 0.13 25 / 0.42); background: oklch(96% 0.035 25 / 0.84); } .cl-hero__alert-icon { display: grid; width: 3.6rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--cl-ink); color: var(--cl-lilac); } .cl-hero__alert.is-error .cl-hero__alert-icon { color: var(--cl-rose); } .cl-hero__alert.is-success .cl-hero__alert-icon { background: var(--cl-success); color: var(--cl-paper); } .cl-hero__alert-symbol { width: 2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .cl-hero__alert-symbol--success { display: none; } .cl-hero__alert.is-success .cl-hero__alert-symbol--attention { display: none; } .cl-hero__alert.is-success .cl-hero__alert-symbol--success { display: block; } .cl-hero__alert-copy { display: grid; gap: 0.25rem; min-width: 0; color: var(--cl-ink-soft); font-size: 1.4rem; line-height: 1.45; } .cl-hero__alert-copy strong { color: var(--cl-ink); font-size: 1.5rem; font-weight: 700; line-height: 1.3; } .cl-orbit { --cl-tilt-x: 0deg; --cl-tilt-y: 0deg; position: relative; min-height: 39rem; perspective: 75rem; isolation: isolate; } .cl-orbit__depth { position: absolute; inset: 0; transform: rotateX(var(--cl-tilt-x)) rotateY(var(--cl-tilt-y)); transform-style: preserve-3d; transition: transform 700ms var(--cl-ease); will-change: transform; } .cl-orbit__halo { position: absolute; z-index: 0; top: 47%; left: 52%; width: min(92%, 45rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, oklch(93% 0.14 344 / 0.88), oklch(88% 0.09 285 / 0.32) 42%, transparent 70%); filter: blur(1.7rem); transform: translate3d(-50%, -50%, -5rem) scaleY(0.76); pointer-events: none; } .cl-orbit__floor { position: absolute; z-index: 1; right: 5%; bottom: -4%; left: 13%; height: 7rem; border-radius: 50%; background: radial-gradient(ellipse, oklch(28% 0.08 274 / 0.26), transparent 68%); filter: blur(1.4rem); transform: translateZ(-2rem) rotateX(67deg); pointer-events: none; } .cl-orbit__person { position: absolute; z-index: 5; bottom: -5rem; left: 53%; width: auto; height: 44rem; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 2.8rem 2.7rem oklch(25% 0.07 274 / 0.28)) drop-shadow(1.4rem 0.8rem 1.2rem oklch(80% 0.12 336 / 0.24)); transform: translate3d(-50%, 0, 4.5rem); will-change: transform; } .cl-orbit__ring { position: absolute; top: 47%; left: 50%; width: 110%; height: 46%; border: 0.11rem solid oklch(98% 0.035 340 / 0.92); border-radius: 50%; box-shadow: 0 0 0.7rem oklch(98% 0.04 350 / 0.9), 0 0 1.7rem oklch(76% 0.18 350 / 0.66), inset 0 0 1rem oklch(88% 0.12 325 / 0.46); pointer-events: none; } .cl-orbit__ring--back { z-index: 2; transform: translate3d(-50%, -50%, -4rem) rotateZ(-11deg); opacity: 0.68; } .cl-orbit__ring--front { z-index: 8; clip-path: inset(51% -3rem -3rem -3rem); filter: drop-shadow(0 0 0.6rem oklch(85% 0.18 346 / 0.8)); transform: translate3d(-50%, -50%, 7.5rem) rotateZ(-11deg); } .cl-orbit__ring--front::after { position: absolute; top: 54%; left: 8%; width: 0.62rem; aspect-ratio: 1; border-radius: 50%; background: var(--cl-paper); box-shadow: 0 0 1.2rem 0.4rem var(--cl-rose); content: ""; } /* Backward-compatible rendering while a cached page still serves the previous hero markup. */ .cl-orbit > .cl-orbit__person { content: url("../img/celebrity-look-alike/demo-user-hero-v2.webp"); } .cl-orbit > .cl-orbit__ring { z-index: 4; transform: translate3d(-50%, -50%, 4rem) rotateZ(-11deg); } .cl-orbit > .cl-orbit__ring::after { position: absolute; top: 54%; left: 8%; width: 0.62rem; aspect-ratio: 1; border-radius: 50%; background: var(--cl-paper); box-shadow: 0 0 1.2rem 0.4rem var(--cl-rose); content: ""; } .cl-orbit__planet { position: absolute; z-index: 7; aspect-ratio: 1; border-radius: 50%; box-shadow: inset -0.4rem -0.55rem 0.85rem oklch(30% 0.1 275 / 0.36), 0 0.7rem 1.8rem oklch(35% 0.09 275 / 0.22); pointer-events: none; } .cl-orbit__planet--one { top: 23%; right: 2%; width: 2.6rem; background: radial-gradient(circle at 32% 28%, oklch(95% 0.08 35), oklch(72% 0.15 15) 55%, oklch(52% 0.13 285)); transform: translateZ(9rem); } .cl-orbit__planet--two { bottom: 20%; left: 1%; width: 1.25rem; background: radial-gradient(circle at 30% 25%, oklch(94% 0.05 260), oklch(55% 0.13 276) 58%, oklch(32% 0.1 282)); transform: translateZ(5rem); } .cl-orbit__spark { position: absolute; z-index: 5; width: 0.75rem; aspect-ratio: 1; border-radius: 50%; background: oklch(76% 0.14 310); box-shadow: 0 0 1.2rem 0.35rem oklch(83% 0.13 325); animation: cl-pulse 2.8s var(--cl-ease) infinite alternate; } .cl-orbit__spark--one { top: 17%; left: 26%; } .cl-orbit__spark--two { right: 8%; bottom: 20%; animation-delay: -1.2s; } .cl-match { position: absolute; z-index: 8; display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: 0.72rem; border: 0; background: transparent; color: var(--cl-ink); cursor: pointer; padding: 0; text-align: left; transform-style: preserve-3d; opacity: 1; transition: scale 280ms var(--cl-ease), filter 280ms var(--cl-ease); will-change: transform; } .cl-match__portrait { position: relative; display: block; width: 4.5rem; aspect-ratio: 1; overflow: hidden; border: 0.15rem solid oklch(98% 0.018 285); border-radius: 50%; background: oklch(89% 0.055 273); box-shadow: 0 0 0 0.08rem oklch(70% 0.08 275 / 0.56), 0 1.1rem 2.4rem oklch(26% 0.075 270 / 0.26), inset 0 0 1.2rem oklch(99% 0.01 280 / 0.58); } .cl-match__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; } .cl-match__meta { display: grid; justify-items: start; line-height: 1.1; } .cl-match__meta small { border-radius: 999px; background: var(--cl-ink); color: var(--cl-paper); font-size: 1rem; font-weight: 800; letter-spacing: 0.04em; padding: 0.45rem 0.7rem; text-transform: uppercase; } .cl-match__meta strong { margin-top: 0.45rem; font-size: 2.2rem; font-variant-numeric: tabular-nums; } .cl-match__meta > span { font-size: 1.05rem; font-weight: 700; } .cl-match--one { --cl-z: 8rem; top: 30%; right: 1rem; animation: cl-float 5.5s var(--cl-ease) infinite alternate; } .cl-match--two { --cl-z: 10rem; top: 2%; left: 48%; animation: cl-float 6.4s var(--cl-ease) -2.5s infinite alternate-reverse; } .cl-match--three { --cl-z: 9rem; bottom: 13%; left: 3%; animation: cl-float 5.8s var(--cl-ease) -1.1s infinite alternate; } .cl-match.is-active { filter: drop-shadow(0 0 1rem oklch(85% 0.16 340 / 0.62)); scale: 1.03; } @media (hover: hover) { .cl-match:hover { filter: drop-shadow(0 0 1.1rem oklch(85% 0.14 340 / 0.75)); opacity: 1; } } .cl-reel { position: relative; z-index: 30; display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 0.8rem; overflow: hidden; border: 0.08rem solid oklch(80% 0.04 278); border-radius: 1.2rem; background: oklch(24% 0.06 270); box-shadow: 0 -1rem 3rem oklch(32% 0.07 270 / 0.16), 0 1rem 2.5rem oklch(42% 0.07 280 / 0.12); } .cl-reel a { position: relative; isolation: isolate; display: flex; min-height: 6rem; align-items: center; gap: 0.65rem; border-right: 0.08rem solid oklch(80% 0.04 278); border-bottom: 0.08rem solid oklch(80% 0.04 278); overflow: hidden; color: oklch(98% 0.01 280); padding: 1rem 1.25rem; text-decoration: none; transition: background 180ms var(--cl-ease); } .cl-reel a::before { position: absolute; inset: -12%; z-index: -2; background-position: center 23%; background-size: cover; content: ""; filter: saturate(0.86); transform: scale(1.08) skewX(-5deg); transition: transform 500ms var(--cl-ease), filter 500ms var(--cl-ease); } .cl-reel a::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, oklch(20% 0.07 270 / 0.78), oklch(20% 0.07 270 / 0.32)); content: ""; } .cl-reel a:nth-child(1)::before { background-image: url("../img/celebrity-look-alike/zoe-kravitz.webp"); } .cl-reel a:nth-child(2)::before { background-image: url("../img/celebrity-look-alike/timothee-chalamet.webp"); } .cl-reel a:nth-child(3)::before { background-image: url("../img/celebrity-look-alike/ursula-corbero.webp"); } .cl-reel a:nth-child(4)::before { background-image: url("../img/celebrity-look-alike/pulp-fiction-poster.webp"); background-position: center 37%; } .cl-reel a:nth-child(2n) { border-right: 0; } .cl-reel a:nth-last-child(-n + 2) { border-bottom: 0; } .cl-reel span { color: oklch(88% 0.12 340); font-size: 1rem; font-weight: 800; } .cl-reel strong { font-size: 1.35rem; } @media (hover: hover) { .cl-reel a:hover::before { filter: saturate(1.08); transform: scale(1.15) skewX(-5deg); } } /* Upload tool */ .cl-tool { background: radial-gradient(circle at 88% 16%, oklch(91% 0.07 300 / 0.54), transparent 24rem), var(--cl-paper); padding-block: clamp(64px, 7vw, 96px); } .cl-tool__layout { display: grid; align-items: start; gap: 36px; } .cl-tool__copy h2, .cl-heading-row h2, .cl-compare h2, .cl-how h2, .cl-score-guide h2, .cl-dating h2, .cl-about h2, .cl-faq h2, .cl-poster h2 { margin-top: 1rem; font-size: clamp(2.25rem, 7.5vw, 5.2rem); font-weight: 800; } .cl-tool__copy h2 { font-size: clamp(40px, 4.2vw, 64px); } .cl-tool__copy > p:last-of-type { max-width: 47rem; margin-top: 20px; color: var(--cl-ink-soft); font-size: 18px; line-height: 1.6; } .cl-tool .cl-kicker { font-size: 12px; } .cl-checks { display: grid; gap: 0.8rem; margin: 1.75rem 0 0; padding: 0; list-style: none; } .cl-checks li { position: relative; padding-left: 1.7rem; font-size: 0.9rem; font-weight: 700; } .cl-checks li::before { position: absolute; top: 0.12rem; left: 0; display: grid; width: 1.1rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: oklch(88% 0.09 307); content: "✓"; font-size: 0.65rem; } .cl-upload { position: relative; isolation: isolate; overflow: visible; border: 1px solid oklch(78% 0.055 288 / 0.62); border-radius: 28px; -webkit-backdrop-filter: blur(24px) saturate(1.18); backdrop-filter: blur(24px) saturate(1.18); background: linear-gradient(135deg, oklch(99% 0.008 285 / 0.82), oklch(96% 0.024 294 / 0.62)), oklch(97% 0.018 290 / 0.68); box-shadow: inset 0 1px 0 oklch(99% 0.006 285 / 0.72), 0 1.4rem 4rem oklch(43% 0.1 286 / 0.14), 0 0 5rem oklch(76% 0.12 304 / 0.1); padding: 18px; } .cl-upload__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; border: 1px solid oklch(82% 0.055 292 / 0.55); border-radius: 18px; background: oklch(88% 0.065 292 / 0.58); box-shadow: inset 0 1px 0 oklch(98% 0.015 290 / 0.56); padding: 5px; } .cl-upload__tab { display: grid; min-height: 62px; place-items: center; border: 0; border-radius: 14px; background: transparent; color: oklch(35% 0.09 278); cursor: pointer; font: 700 15px/1.25 "CL Manrope", sans-serif; padding: 11px 14px; text-align: center; touch-action: manipulation; transition: background 220ms var(--cl-ease), color 220ms var(--cl-ease), box-shadow 220ms var(--cl-ease), transform 220ms var(--cl-ease); } .cl-upload__tab--popular { position: relative; overflow: visible; } .cl-upload__popular { position: absolute; z-index: 3; top: -11px; right: -4px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; transform: rotate(7deg); border-radius: 999px; border: 1px solid oklch(76% 0.1 303); background: var(--cl-paper); box-shadow: 0 5px 12px oklch(48% 0.15 303 / 0.18); color: oklch(45% 0.16 303); font-size: 11px; font-weight: 800; letter-spacing: 0.015em; line-height: 1; padding: 6px 9px; white-space: nowrap; } .cl-upload__tab.is-active { border: 1px solid oklch(85% 0.045 292 / 0.9); background: oklch(99% 0.008 285 / 0.9); box-shadow: inset 0 1px 0 oklch(99% 0.006 285 / 0.82), 0 8px 24px oklch(38% 0.08 278 / 0.13); color: var(--cl-ink); } .cl-upload__tab:focus-visible { outline: 2px solid oklch(62% 0.16 286); outline-offset: -3px; } .cl-upload__panel { padding-top: 24px; } .cl-upload__instruction { max-width: 58rem; color: var(--cl-ink); font-size: clamp(16px, calc(15px + 0.18vw), 18px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.45 !important; } .cl-upload input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .cl-upload__drop { position: relative; display: grid; min-height: 230px; place-items: center; overflow: hidden; margin-top: 18px; border: 1px solid oklch(70% 0.13 292 / 0.72); border-radius: 20px; background: radial-gradient(circle at 50% 44%, oklch(83% 0.13 294 / 0.34), transparent 27%), oklch(97% 0.026 294 / 0.52); box-shadow: inset 0 1px 0 oklch(99% 0.006 285 / 0.64), 0 1rem 2.7rem oklch(48% 0.1 290 / 0.08); cursor: pointer; padding: 22px; transition: transform 180ms var(--cl-ease), border-color 180ms var(--cl-ease), background 180ms var(--cl-ease), box-shadow 180ms var(--cl-ease); } .cl-upload__drop.is-dragging { transform: scale(0.992); border-color: oklch(55% 0.2 296); background: radial-gradient(circle at 50% 44%, oklch(76% 0.18 296 / 0.42), transparent 34%), oklch(94% 0.06 300 / 0.72); box-shadow: inset 0 1px 0 oklch(99% 0.006 285 / 0.72), 0 0 0 4px oklch(62% 0.18 296 / 0.12), 0 1.2rem 3rem oklch(48% 0.12 294 / 0.14); } .cl-upload__drop.is-validating { cursor: progress; } .cl-upload__drop.is-validating::before { position: absolute; z-index: 4; top: 18px; right: 20px; width: 18px; aspect-ratio: 1; border: 2px solid oklch(72% 0.08 294 / 0.45); border-top-color: oklch(54% 0.2 296); border-radius: 50%; animation: cl-spin 700ms linear infinite; content: ""; } .cl-upload__drop.is-validating::after { position: absolute; z-index: 3; top: 12px; right: 12px; border: 1px solid oklch(80% 0.06 294 / 0.72); border-radius: 999px; background: oklch(98% 0.015 292 / 0.9); box-shadow: 0 8px 22px oklch(42% 0.09 286 / 0.12); color: var(--cl-ink); content: "Checking face"; font-size: 12px; font-weight: 800; line-height: 1; padding: 9px 35px 9px 12px; } .cl-upload__drop.is-validating .cl-upload__preview { opacity: 0.62; } .cl-upload__empty { position: relative; z-index: 1; display: grid; justify-items: center; gap: 9px; text-align: center; } .cl-upload__empty strong { max-width: 36rem; font-size: clamp(18px, calc(17px + 0.2vw), 21px); letter-spacing: -0.025em; line-height: 1.35; } .cl-upload__empty > span:last-child, .cl-upload__preview span { color: var(--cl-ink-soft); font-size: 14px; } .cl-upload__empty > span:last-child::after { content: " · max 10 MB"; } .cl-upload__icon { display: grid; width: 52px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: oklch(63% 0.2 294); box-shadow: inset 0 1px 0 oklch(91% 0.08 294 / 0.66), 0 12px 28px oklch(54% 0.18 294 / 0.28); color: var(--cl-paper); transition: background 240ms var(--cl-ease), box-shadow 240ms var(--cl-ease); } /* Per-tab accent: switching to "Find my crush's lookalike" warms the whole drop zone to a rose "hot crush" tone so the mode change is felt at a glance. The default (twin) keeps the violet accent defined above. */ .cl-upload[data-cl-upload-mode="crush"] .cl-upload__drop { border-color: oklch(66% 0.19 8 / 0.72); background: radial-gradient(circle at 50% 44%, oklch(84% 0.15 8 / 0.4), transparent 27%), oklch(97% 0.035 8 / 0.55); } .cl-upload[data-cl-upload-mode="crush"] .cl-upload__drop.is-dragging { border-color: oklch(58% 0.23 8); background: radial-gradient(circle at 50% 44%, oklch(77% 0.21 8 / 0.46), transparent 34%), oklch(94% 0.09 8 / 0.72); box-shadow: inset 0 1px 0 oklch(99% 0.006 285 / 0.72), 0 0 0 4px oklch(64% 0.2 8 / 0.14), 0 1.2rem 3rem oklch(52% 0.16 8 / 0.16); } .cl-upload[data-cl-upload-mode="crush"] .cl-upload__icon { background: oklch(64% 0.22 8); box-shadow: inset 0 1px 0 oklch(92% 0.1 8 / 0.66), 0 12px 28px oklch(56% 0.2 8 / 0.32); } .cl-upload[data-cl-upload-mode="crush"] .cl-upload__tab.is-active { box-shadow: inset 0 1px 0 oklch(99% 0.006 285 / 0.82), 0 8px 24px oklch(52% 0.17 8 / 0.2); } .cl-upload__icon svg { width: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .cl-upload__preview { position: relative; z-index: 1; display: grid; width: 100%; grid-template-columns: 7.5rem 1fr; align-items: center; gap: 1.25rem; transition: opacity 180ms var(--cl-ease); } .cl-upload__preview img { width: 7.5rem; aspect-ratio: 4 / 5; border: 1px solid oklch(86% 0.045 292); border-radius: 1rem; box-shadow: 0 0.8rem 2rem oklch(42% 0.09 286 / 0.14); object-fit: cover; } .cl-upload__preview div { display: grid; gap: 0.45rem; } .cl-upload__preview strong { color: var(--cl-ink); font-size: 1rem; } .cl-upload__preview span { color: oklch(48% 0.16 298); font-weight: 750; } .cl-upload__tip { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 0 !important; color: oklch(36% 0.065 279); font-size: 14px; line-height: 1.45; text-align: left; } .cl-upload__tip strong { color: var(--cl-ink); font-weight: 800; } .cl-upload__privacy-icon { display: grid; flex: 0 0 28px; width: 28px; aspect-ratio: 1; place-items: center; color: oklch(58% 0.19 296); } .cl-upload__privacy-icon svg { width: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .cl-status { min-height: 0; margin: 0 !important; color: var(--cl-ink-soft); font-size: 13px; text-align: center; } .cl-status:not(:empty) { margin: 8px 0 !important; } .cl-status.is-error { color: var(--cl-error); font-weight: 700; } .cl-status.is-success { color: var(--cl-success); font-weight: 700; } .cl-upload .cl-button { min-height: 58px; margin-top: 16px; border-radius: 18px; font-size: 16px; } .cl-upload .cl-button:disabled { background: oklch(66% 0.025 278 / 0.72); box-shadow: inset 0 1px 0 oklch(94% 0.015 282 / 0.42); color: oklch(97% 0.008 285); cursor: not-allowed; opacity: 1; } @media (hover: hover) { .cl-upload__tab:not(.is-active):hover { background: oklch(94% 0.035 292 / 0.7); color: var(--cl-ink); } .cl-upload__drop:hover { transform: translateY(-2px); border-color: oklch(61% 0.17 295 / 0.84); box-shadow: inset 0 1px 0 oklch(99% 0.006 285 / 0.7), 0 1.35rem 3rem oklch(48% 0.12 294 / 0.13); } } /* Analysis */ .cl-analysis { position: relative; background: var(--cl-ink); color: var(--cl-paper); padding-block: clamp(5rem, 12vw, 9rem); } .cl-analysis__top { max-width: 48rem; } .cl-analysis__top .cl-kicker { color: oklch(81% 0.12 325); } .cl-analysis__top h2 { margin-top: 0.8rem; font-size: clamp(2.2rem, 7vw, 4.8rem); } .cl-analysis__top p:last-child { max-width: 38rem; margin-top: 1.25rem; color: oklch(82% 0.025 275); } .cl-analysis__visual { position: relative; display: grid; width: min(100%, 30rem); aspect-ratio: 1; place-items: center; margin: 3rem auto; } .cl-analysis__rings { position: absolute; inset: 0; animation: cl-spin 13s linear infinite; } .cl-analysis__rings i { position: absolute; inset: calc(var(--i, 0) * 10%); border: 0.08rem solid oklch(76% 0.12 308 / 0.35); border-radius: 50%; } .cl-analysis__rings i:nth-child(1) { --i: 0; border-style: dashed; } .cl-analysis__rings i:nth-child(2) { --i: 1; } .cl-analysis__rings i:nth-child(3) { --i: 2; border-style: dotted; } .cl-analysis__scan { width: 32%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, oklch(92% 0.12 338), oklch(68% 0.2 297) 48%, transparent 50%); filter: blur(0.15rem); animation: cl-pulse 1.8s var(--cl-ease) infinite alternate; } .cl-analysis__steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .cl-analysis__steps li { display: grid; grid-template-columns: 2.5rem 1fr; align-items: center; gap: 0.85rem; border-top: 0.08rem solid oklch(37% 0.05 275); color: oklch(62% 0.02 275); padding: 1rem 0; } .cl-analysis__steps span { display: grid; width: 2rem; aspect-ratio: 1; place-items: center; border: 0.08rem solid currentColor; border-radius: 50%; font-size: 0.7rem; } .cl-analysis__steps li.is-active { color: oklch(88% 0.12 328); } .cl-analysis__steps li.is-complete { color: oklch(79% 0.14 159); } /* Celebrity crush lookalike teaser */ body.cl-crush-active { overflow: hidden; overscroll-behavior: none; } .cl-crush-reveal { position: fixed; inset: 0; z-index: 100100; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(circle at 12% 8%, oklch(88% 0.09 313 / 0.7), transparent 30rem), radial-gradient(circle at 92% 88%, oklch(89% 0.075 249 / 0.72), transparent 34rem), var(--cl-paper); padding-block: clamp(5.5rem, 9vw, 8rem); } .cl-crush-reveal::before { position: absolute; inset: 0; pointer-events: none; background-image: url("../img/noise.png.webp"); content: ""; opacity: 0.025; } .cl-crush-reveal > .cl-shell { min-height: 100%; } .cl-crush-reveal__close { position: fixed; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); z-index: 4; display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: 0.45rem; border: 0.08rem solid oklch(74% 0.05 282 / 0.56); border-radius: 999px; background: oklch(98% 0.012 287 / 0.92); box-shadow: 0 0.8rem 2rem oklch(28% 0.07 275 / 0.16); color: var(--cl-ink); cursor: pointer; font-size: 0.78rem; font-weight: 800; padding: 0.7rem 1rem; transition: transform 180ms var(--cl-ease), background 180ms var(--cl-ease), box-shadow 180ms var(--cl-ease); } .cl-crush-reveal__close svg { width: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; } .cl-crush-reveal__close:active { transform: scale(0.97); } @media (hover: hover) { .cl-crush-reveal__close:hover { transform: translateY(-0.12rem); background: var(--cl-paper); box-shadow: 0 1rem 2.4rem oklch(28% 0.07 275 / 0.2); } } .cl-crush-loading, .cl-crush-result { position: relative; z-index: 1; width: min(100%, 70rem); margin-inline: auto; } .cl-crush-loading { display: grid; grid-template-columns: minmax(10rem, 19rem) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); min-height: 30rem; } .cl-crush-loading__portrait { position: relative; isolation: isolate; width: min(100%, 17rem); justify-self: end; aspect-ratio: 4 / 5; border-radius: 2rem; box-shadow: 0 2.2rem 5rem oklch(30% 0.08 280 / 0.2); overflow: hidden; transform: rotate(-3deg); } .cl-crush-loading__portrait img { width: 100%; height: 100%; object-fit: cover; } .cl-crush-loading__portrait::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 15%, oklch(60% 0.15 297 / 0.24) 50%, transparent 85%); content: ""; transform: translateY(-100%); animation: cl-crush-scan 1.15s var(--cl-ease) infinite; } .cl-crush-loading__portrait span { position: absolute; inset: 0; z-index: 2; border: 0.12rem solid oklch(98% 0.012 290 / 0.86); border-radius: inherit; } .cl-crush-loading__copy .cl-kicker, .cl-crush-result .cl-kicker { color: oklch(46% 0.16 302); } .cl-crush-loading__copy h2 { max-width: 12ch; margin-top: 0.8rem; font-size: clamp(2.7rem, 6vw, 5.5rem); } .cl-crush-loading__copy > p:last-of-type { margin-top: 1.25rem; color: var(--cl-ink-soft); font-size: 1.05rem; } .cl-crush-loading__track { height: 0.35rem; overflow: hidden; margin-top: 2rem; border-radius: 999px; background: oklch(87% 0.035 285); } .cl-crush-loading__track span { display: block; width: 42%; height: 100%; border-radius: inherit; background: oklch(59% 0.2 299); animation: cl-crush-progress 1.3s var(--cl-ease) infinite; } .cl-crush-loading ol { display: flex; flex-wrap: wrap; gap: 0.7rem 1.1rem; margin: 1.4rem 0 0; padding: 0; color: oklch(52% 0.04 278); font-size: 0.78rem; font-weight: 700; list-style: none; } .cl-crush-loading li { display: inline-flex; align-items: center; gap: 0.42rem; } .cl-crush-loading li span { display: grid; width: 1.5rem; aspect-ratio: 1; place-items: center; border: 0.08rem solid currentColor; border-radius: 50%; font-size: 0.65rem; } .cl-crush-loading li.is-active { color: oklch(45% 0.17 300); } .cl-crush-result { animation: cl-crush-rise 520ms var(--cl-ease) both; } .cl-crush-result__heading { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(17rem, 0.75fr); align-items: end; gap: clamp(2rem, 7vw, 6.5rem); } .cl-crush-result__heading h2 { max-width: 15ch; margin-top: 0.8rem; font-size: clamp(2.8rem, 6.2vw, 5.9rem); } .cl-crush-result__heading > p { max-width: 35rem; color: var(--cl-ink-soft); font-size: clamp(1rem, calc(0.95rem + 0.24vw), 1.2rem); } .cl-crush-result__layout { display: grid; grid-template-columns: minmax(18rem, 0.9fr) minmax(23rem, 1.1fr); align-items: center; gap: clamp(2.5rem, 7vw, 6.5rem); margin-top: clamp(3rem, 7vw, 5.5rem); } .cl-crush-result__preview { position: relative; display: flex; min-height: 25rem; align-items: center; justify-content: center; } .cl-crush-face { position: relative; width: min(55%, 15.5rem); aspect-ratio: 4 / 5; overflow: hidden; border: 0.3rem solid var(--cl-paper); border-radius: 1.5rem; box-shadow: 0 2rem 4rem oklch(26% 0.08 277 / 0.22); } .cl-crush-face img { width: 100%; height: 100%; object-fit: cover; } .cl-crush-face--source { z-index: 2; transform: translateX(0.85rem) rotate(-5deg); } .cl-crush-face--source > span { position: absolute; bottom: 0.7rem; left: 0.7rem; border-radius: 0.55rem; background: oklch(22% 0.07 273 / 0.82); color: var(--cl-paper); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; padding: 0.48rem 0.7rem; text-transform: uppercase; } .cl-crush-face--locked { display: grid; place-items: center; transform: translateX(-0.85rem) rotate(5deg); background: oklch(27% 0.075 275); } .cl-crush-face--locked::after { position: absolute; inset: 0; background: oklch(19% 0.07 274 / 0.4); content: ""; } .cl-crush-face--locked img { position: absolute; inset: -1.25rem; width: calc(100% + 2.5rem); height: calc(100% + 2.5rem); filter: blur(1.15rem) saturate(0.75); transform: scale(1.08); } .cl-crush-lock, .cl-crush-face--locked strong { position: relative; z-index: 2; } .cl-crush-lock { display: grid; width: 3rem; aspect-ratio: 1; place-items: center; border: 0.08rem solid oklch(91% 0.03 290 / 0.5); border-radius: 50%; background: oklch(20% 0.065 274 / 0.56); color: var(--cl-paper); } .cl-crush-lock svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .cl-crush-face--locked strong { position: absolute; right: 0; bottom: 1rem; left: 0; color: var(--cl-paper); font-size: 0.72rem; text-align: center; } .cl-crush-result__found { position: absolute; top: 50%; left: 50%; z-index: 4; transform: translate(-50%, -50%); border-radius: 999px; background: oklch(61% 0.19 22); box-shadow: 0 0.9rem 2rem oklch(50% 0.17 22 / 0.26); color: oklch(98% 0.012 15); font-size: 0.78rem; font-weight: 800; padding: 0.72rem 1rem; white-space: nowrap; } .cl-crush-result__matches > p { color: var(--cl-ink); font-size: 0.77rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .cl-crush-result__grid { display: grid; grid-template-columns: 1.16fr 0.92fr 0.92fr; gap: 0.75rem; margin-top: 1rem; } .cl-crush-result__grid article { position: relative; min-height: 15rem; overflow: hidden; border-radius: 1.15rem; background: oklch(26% 0.07 275); } .cl-crush-result__grid article:first-child { min-height: 18rem; transform: translateY(-0.65rem); } .cl-crush-result__grid article::after { position: absolute; inset: 0; background: linear-gradient(180deg, oklch(18% 0.07 275 / 0.08), oklch(18% 0.07 275 / 0.72)); content: ""; } .cl-crush-result__grid img { position: absolute; inset: -1.5rem; width: calc(100% + 3rem); height: calc(100% + 3rem); filter: blur(1.1rem) saturate(0.7); object-fit: cover; transform: scale(1.12); } .cl-crush-result__grid span, .cl-crush-result__grid strong { position: absolute; z-index: 2; color: var(--cl-paper); } .cl-crush-result__grid span { top: 0.8rem; left: 0.8rem; font-size: 0.7rem; font-weight: 800; } .cl-crush-result__grid strong { right: 0.8rem; bottom: 0.8rem; font-size: 0.7rem; } .cl-crush-result__signals { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0; padding: 0; list-style: none; } .cl-crush-result__signals li { display: inline-flex; align-items: center; gap: 0.4rem; border: 0.08rem solid var(--cl-line); border-radius: 0.75rem; background: oklch(98% 0.012 288 / 0.72); color: var(--cl-ink-soft); font-size: 0.76rem; font-weight: 700; padding: 0.65rem 0.78rem; } .cl-crush-result__signals span { color: oklch(49% 0.16 300); } .cl-crush-download { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2.5rem; margin-top: clamp(3rem, 7vw, 5.5rem); border-radius: 2rem; background: var(--cl-ink); box-shadow: 0 2rem 5rem oklch(28% 0.07 273 / 0.18); color: var(--cl-paper); padding: clamp(1.5rem, 4vw, 3rem); } .cl-crush-download .cl-kicker { color: oklch(83% 0.1 327); } .cl-crush-download h3 { max-width: 17ch; margin-top: 0.55rem; font-size: clamp(2rem, 4vw, 3.5rem); } .cl-crush-download__copy > p:last-of-type { max-width: 39rem; margin-top: 0.9rem; color: oklch(84% 0.025 280); } .cl-crush-download__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.2rem; margin-top: 1.5rem; } .cl-crush-download .cl-button--primary { background: oklch(65% 0.18 23); box-shadow: 0 1rem 2.3rem oklch(47% 0.17 21 / 0.34); color: oklch(98% 0.012 15); } .cl-crush-download .cl-button img { width: 1.25rem; height: 1.25rem; filter: brightness(0) invert(1); object-fit: contain; } .cl-crush-download .cl-text-link { color: oklch(86% 0.05 305); font-size: 0.82rem; font-weight: 800; text-underline-offset: 0.2rem; } .cl-crush-download__retry { margin-top: 1.15rem; border: 0; background: transparent; color: oklch(78% 0.035 282); cursor: pointer; font-size: 0.78rem; font-weight: 700; padding: 0.35rem 0; text-decoration: underline; text-underline-offset: 0.22rem; } .cl-crush-download__qr { display: grid; justify-items: center; gap: 0.7rem; color: oklch(87% 0.035 290); font-size: 0.72rem; font-weight: 800; text-decoration: none; } .cl-crush-download__qr img { width: 8.5rem; aspect-ratio: 1; border-radius: 0.9rem; background: var(--cl-paper); box-shadow: 0 1rem 2.5rem oklch(10% 0.04 274 / 0.28); padding: 0.55rem; } .cl-crush-result__privacy { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.2rem !important; color: var(--cl-ink-soft); font-size: 0.74rem; text-align: center; } .cl-crush-result__privacy span { display: grid; width: 1.25rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: oklch(88% 0.08 157); color: oklch(38% 0.11 157); font-size: 0.65rem; font-weight: 800; } @keyframes cl-crush-scan { to { transform: translateY(100%); } } @keyframes cl-crush-progress { from { transform: translateX(-115%); } to { transform: translateX(340%); } } @keyframes cl-crush-rise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 47.99rem) { .cl-crush-reveal { padding-top: max(5.25rem, calc(env(safe-area-inset-top) + 4.25rem)); } .cl-crush-reveal__close span { display: none; } .cl-crush-reveal__close { width: 3rem; padding: 0; } .cl-crush-loading { grid-template-columns: 1fr; gap: 2rem; min-height: 0; text-align: center; } .cl-crush-loading__portrait { width: 10rem; justify-self: center; } .cl-crush-loading__copy h2 { margin-inline: auto; } .cl-crush-loading ol { justify-content: center; } .cl-crush-result__heading, .cl-crush-result__layout, .cl-crush-download { grid-template-columns: 1fr; } .cl-crush-result__heading { align-items: start; gap: 1.25rem; } .cl-crush-result__preview { min-height: 22rem; } .cl-crush-result__grid { grid-template-columns: 1.15fr 0.85fr; } .cl-crush-result__grid article:last-child { display: none; } .cl-crush-download { border-radius: 1.5rem; } .cl-crush-download__qr { display: none; } } @media (max-width: 29.99rem) { .cl-crush-result__preview { min-height: 19rem; } .cl-crush-face { width: 58%; } .cl-crush-result__grid article, .cl-crush-result__grid article:first-child { min-height: 13.5rem; } .cl-crush-download__actions, .cl-crush-download .cl-button { width: 100%; } } /* Conversion-led crush reveal card */ .cl-crush-stage { width: min(100% - 2rem, 62rem); } .cl-crush-card { --cl-crush-card-bg: oklch(18.5% 0.055 275); position: relative; z-index: 1; width: min(100%, 58rem); margin-inline: auto; border: 0.08rem solid oklch(54% 0.095 292 / 0.24); border-radius: 2rem; background: radial-gradient(circle at 88% 3%, oklch(36% 0.11 300 / 0.25), transparent 22rem), var(--cl-crush-card-bg); box-shadow: 0 2.5rem 6rem oklch(28% 0.09 281 / 0.25); color: oklch(97% 0.012 290); padding: clamp(1.5rem, 4.5vw, 3.25rem); overflow: clip; } .cl-crush-card--loading { grid-template-columns: minmax(10rem, 17rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); min-height: min(38rem, calc(100vh - 10rem)); } .cl-crush-card--loading .cl-crush-loading__portrait { justify-self: center; border-radius: 1.5rem; box-shadow: 0 1.6rem 3.6rem oklch(7% 0.035 275 / 0.42); } .cl-crush-card--loading .cl-crush-loading__copy .cl-kicker, .cl-crush-card .cl-kicker { color: oklch(82% 0.12 326); } .cl-crush-card--loading .cl-crush-loading__copy h2 { font-size: clamp(2.35rem, 5vw, 4.5rem); line-height: 0.98; } .cl-crush-card--loading .cl-crush-loading__copy > p:last-of-type, .cl-crush-card--loading .cl-crush-loading li { color: oklch(78% 0.028 285); } .cl-crush-card--loading .cl-crush-loading li.is-active { color: oklch(88% 0.105 318); } .cl-crush-card--loading .cl-crush-loading__track { background: oklch(30% 0.055 281); } .cl-crush-card--loading .cl-crush-loading__track span { background: oklch(67% 0.2 299); } .cl-crush-card__header { text-align: center; } .cl-crush-card__header h2 { max-width: 16ch; margin: 0.65rem auto 0; color: oklch(98% 0.009 290); font-size: clamp(2.45rem, 6.4vw, 4.4rem); letter-spacing: -0.052em; line-height: 0.98; } .cl-crush-card__header h2[tabindex="-1"] { outline: none; } .cl-crush-card__header > p:last-child { max-width: 42rem; margin: 1rem auto 0; color: oklch(76% 0.032 285); font-size: clamp(0.94rem, calc(0.9rem + 0.2vw), 1.08rem); line-height: 1.6; } .cl-crush-hero { position: relative; display: flex; min-height: 25rem; align-items: center; justify-content: center; margin-top: clamp(2.1rem, 5vw, 3.5rem); } .cl-crush-card .cl-crush-face { width: min(35%, 15rem); border-color: oklch(97% 0.01 290); border-radius: 1.35rem; box-shadow: 0 1.4rem 3rem oklch(5% 0.025 275 / 0.48); } .cl-crush-card .cl-crush-face--source { transform: translateX(0.65rem) rotate(-4deg); } .cl-crush-card .cl-crush-face--locked { transform: translateX(-0.65rem) rotate(4deg); } .cl-crush-card .cl-crush-face--locked::after { background: oklch(15% 0.05 276 / 0.68); } .cl-crush-card .cl-crush-face--locked img { filter: blur(1.8rem) saturate(0.42) contrast(0.86); transform: scale(1.2); } .cl-crush-card .cl-crush-face--locked strong { font-size: 0.7rem; letter-spacing: 0.02em; } .cl-crush-hero__score { position: absolute; top: 50%; left: 50%; z-index: 5; transform: translate(-50%, -50%); border: 0.08rem solid oklch(92% 0.08 311 / 0.22); border-radius: 999px; background: oklch(61% 0.22 298); box-shadow: 0 0.9rem 2rem oklch(51% 0.22 298 / 0.35); color: white; font-size: clamp(0.78rem, calc(0.72rem + 0.25vw), 0.95rem); font-weight: 800; padding: 0.72rem 1rem; white-space: nowrap; } .cl-crush-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; } .cl-crush-facts > span { display: inline-flex; align-items: center; gap: 0.42rem; border: 0.08rem solid oklch(67% 0.06 291 / 0.26); border-radius: 999px; background: oklch(24% 0.052 278 / 0.82); color: oklch(87% 0.023 287); font-size: 0.78rem; font-weight: 700; padding: 0.68rem 0.9rem; } .cl-crush-facts b { color: oklch(77% 0.16 302); } /* Muted key label prefix on the personalised chips (My type / Drawn to / Attracted to). */ .cl-crush-facts__key { color: oklch(68% 0.03 285); font-weight: 700; } .cl-crush-card__free-note { margin-top: 1rem !important; color: oklch(67% 0.03 285); font-size: 0.75rem; text-align: center; } .cl-crush-match-set, .cl-crush-score-lock, .cl-crush-report { margin-top: clamp(2rem, 5vw, 3rem); border: 0.08rem solid oklch(63% 0.06 291 / 0.2); border-radius: 1.5rem; background: oklch(14.8% 0.034 275 / 0.82); padding: clamp(1rem, 3vw, 1.7rem); } .cl-crush-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .cl-crush-section-heading p, .cl-crush-score-lock > p, .cl-crush-report > div > p { color: oklch(75% 0.025 285); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .cl-crush-section-heading span { color: oklch(59% 0.028 283); font-size: 0.72rem; } .cl-crush-match-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .cl-crush-match-card { overflow: hidden; border: 0.08rem solid oklch(58% 0.055 287 / 0.22); border-radius: 1.25rem; background: oklch(21% 0.038 277); } .cl-crush-match-card--lead { border-color: oklch(62% 0.19 300 / 0.62); } .cl-crush-match-card__photo { position: relative; display: grid; min-height: 18rem; place-items: center; overflow: hidden; background: oklch(24% 0.05 277); contain: paint; } .cl-crush-match-card__photo::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, oklch(12% 0.03 275 / 0.22), oklch(12% 0.03 275 / 0.58)); content: ""; } .cl-crush-match-card__photo > img { position: absolute; inset: -1.25rem; width: calc(100% + 2.5rem); height: calc(100% + 2.5rem); filter: blur(2rem) saturate(0.38) contrast(0.84); object-fit: cover; transform: scale(1.2); } .cl-crush-match-card__distance { position: absolute; right: 1.2rem; bottom: 1.2rem; left: 1.2rem; z-index: 3; display: inline-flex; width: max-content; max-width: calc(100% - 2.4rem); align-items: center; border: 0.08rem solid oklch(94% 0.02 290 / 0.2); border-radius: 999px; background: oklch(18% 0.06 274 / 0.86); color: oklch(97% 0.012 290); font-size: 1.15rem; font-weight: 800; padding: 0.65rem 0.9rem; } .cl-crush-match-card__rank, .cl-crush-match-card__percent { position: absolute; top: 0.8rem; z-index: 3; border-radius: 999px; color: white; font-size: 0.72rem; font-weight: 800; padding: 0.5rem 0.66rem; } .cl-crush-match-card__rank { left: 0.8rem; background: oklch(16% 0.04 275 / 0.78); } .cl-crush-match-card__percent { right: 0.8rem; background: oklch(57% 0.22 299); box-shadow: 0 0.55rem 1.2rem oklch(49% 0.2 300 / 0.36); } .cl-crush-match-card__photo > .cl-crush-lock { position: absolute; top: 50%; left: 50%; z-index: 3; transform: translate(-50%, -50%); } .cl-crush-match-card__meta { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 1rem; } .cl-crush-match-card__meta strong { flex-basis: 100%; margin-bottom: 0.15rem; color: oklch(91% 0.02 288); font-size: 0.95rem; } .cl-crush-match-card__meta span { border-radius: 999px; background: oklch(31% 0.035 280); color: oklch(74% 0.025 284); font-size: 0.68rem; font-weight: 700; padding: 0.38rem 0.58rem; } .cl-crush-match-set__more { margin-top: 1rem !important; color: oklch(68% 0.03 285); font-size: 0.8rem; text-align: center; } .cl-crush-match-set__more strong { color: oklch(85% 0.11 318); } .cl-crush-score-lock { position: relative; overflow: hidden; } .cl-crush-score-lock__bars { display: grid; gap: 0.8rem; margin-top: 1.25rem; filter: blur(0.4rem); opacity: 0.62; } .cl-crush-score-lock__bars i { display: block; width: var(--bar-size, 78%); height: 0.62rem; border-radius: 999px; background: oklch(54% 0.2 298); } .cl-crush-score-lock__bars i:nth-child(2) { --bar-size: 66%; } .cl-crush-score-lock__bars i:nth-child(3) { --bar-size: 84%; } .cl-crush-score-lock__bars i:nth-child(4) { --bar-size: 58%; } .cl-crush-score-lock__bars i:nth-child(5) { --bar-size: 72%; } .cl-crush-score-lock__bars i:nth-child(6) { --bar-size: 90%; } .cl-crush-score-lock__label { position: absolute; inset: 3.2rem 0 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 0.55rem; background: radial-gradient(circle, oklch(15% 0.04 275 / 0.38), transparent 60%); color: oklch(92% 0.02 288); font-size: 0.88rem; } .cl-crush-score-lock__label .cl-crush-lock { width: 2.5rem; } .cl-crush-report { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; } .cl-crush-report ul { display: grid; gap: 0.8rem; margin: 1rem 0 0; padding: 0; color: oklch(84% 0.025 286); font-size: 0.9rem; list-style: none; } .cl-crush-report li { position: relative; padding-left: 1.6rem; } .cl-crush-report li::before { position: absolute; top: 0; left: 0; color: oklch(70% 0.2 299); content: "✓"; font-weight: 900; } .cl-crush-report__qr { display: grid; justify-items: center; gap: 0.55rem; color: oklch(74% 0.025 285); font-size: 0.65rem; font-weight: 800; text-decoration: none; } .cl-crush-report__qr img { width: 6.75rem; aspect-ratio: 1; border-radius: 0.75rem; background: white; padding: 0.4rem; } .cl-crush-sticky { position: sticky; bottom: calc(-1 * clamp(1.5rem, 4.5vw, 3.25rem)); z-index: 8; margin: 1.5rem calc(-1 * clamp(1.5rem, 4.5vw, 3.25rem)) 0; background: linear-gradient(180deg, transparent 0, var(--cl-crush-card-bg) 28%); padding: 2.2rem clamp(1.5rem, 4.5vw, 3.25rem) max(1rem, env(safe-area-inset-bottom)); } .cl-crush-sticky__button { display: flex; min-height: 4.25rem; align-items: center; justify-content: center; gap: 0.65rem; border: 0.08rem solid oklch(88% 0.1 312 / 0.3); border-radius: 1rem; background: oklch(59% 0.23 299); box-shadow: 0 1rem 2rem oklch(49% 0.22 300 / 0.34); color: white; font-size: clamp(0.98rem, calc(0.92rem + 0.28vw), 1.15rem); font-weight: 800; text-decoration: none; transition: transform 180ms var(--cl-ease), background 180ms var(--cl-ease), box-shadow 180ms var(--cl-ease); } .cl-crush-sticky__button img { width: 1.2rem; height: 1.2rem; filter: brightness(0) invert(1); object-fit: contain; } .cl-crush-sticky > p { margin-top: 0.65rem !important; color: oklch(61% 0.025 285); font-size: 0.68rem; font-weight: 700; text-align: center; } @media (hover: hover) { .cl-crush-sticky__button:hover { transform: translateY(-0.12rem); background: oklch(63% 0.23 299); box-shadow: 0 1.2rem 2.5rem oklch(49% 0.22 300 / 0.43); } } .cl-crush-card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8rem 1.2rem; margin-top: 1rem; color: oklch(59% 0.028 284); font-size: 0.7rem; } .cl-crush-card__footer p { display: inline-flex; align-items: center; gap: 0.35rem; } .cl-crush-card__footer p span { color: oklch(74% 0.12 157); } .cl-crush-card__footer button, .cl-crush-card__footer a { border: 0; background: transparent; color: oklch(74% 0.06 305); cursor: pointer; font: inherit; font-weight: 800; padding: 0; text-decoration: underline; text-underline-offset: 0.2rem; } @media (max-width: 47.99rem) { .cl-crush-stage { width: min(100% - 1rem, 62rem); } .cl-crush-card { border-radius: 1.4rem; padding: 1.2rem; } .cl-crush-card--loading { grid-template-columns: 1fr; gap: 2rem; min-height: calc(100svh - 7rem); text-align: center; } .cl-crush-card__header h2 { font-size: clamp(2.2rem, 11vw, 3.4rem); } .cl-crush-hero { min-height: 21rem; } .cl-crush-card .cl-crush-face { width: min(48%, 13rem); } .cl-crush-match-grid { grid-template-columns: 1fr; } .cl-crush-match-card__photo { min-height: min(21rem, 90vw); } .cl-crush-report { grid-template-columns: 1fr; } .cl-crush-report__qr { display: none; } .cl-crush-sticky { bottom: -1.2rem; margin-right: -1.2rem; margin-left: -1.2rem; padding-right: 1.2rem; padding-left: 1.2rem; } } @media (max-width: 29.99rem) { .cl-crush-hero { min-height: 18.5rem; } .cl-crush-hero__score { font-size: 0.7rem; padding: 0.62rem 0.75rem; } .cl-crush-facts > span { font-size: 0.7rem; padding: 0.58rem 0.72rem; } .cl-crush-section-heading { align-items: flex-start; flex-direction: column; gap: 0.3rem; } .cl-crush-card__footer { align-items: center; flex-direction: column; } } /* Conversion reveal v2: sized for the theme's 62.5% root font */ .cl-crush-reveal { padding-block: 7rem; } .cl-crush-reveal__close { min-width: 9.4rem; min-height: 4.4rem; font-size: 1.4rem; padding: 1rem 1.5rem; } .cl-crush-reveal__close svg { width: 1.6rem; } .cl-crush-stage { width: min(calc(100% - 3.2rem), 100rem); } .cl-crush-card { width: min(100%, 86rem); border-color: oklch(62% 0.055 288 / 0.3); border-radius: 3rem; background: var(--cl-paper); box-shadow: 0 3.2rem 8rem oklch(28% 0.08 278 / 0.2); color: var(--cl-ink); padding: 0; } .cl-crush-card--loading { --cl-crush-card-bg: oklch(20% 0.07 273); grid-template-columns: minmax(18rem, 28rem) minmax(0, 1fr); gap: clamp(3.2rem, 6vw, 6rem); min-height: min(58rem, calc(100vh - 14rem)); background: radial-gradient(circle at 90% 5%, oklch(43% 0.13 303 / 0.25), transparent 30rem), var(--cl-crush-card-bg); color: oklch(97% 0.012 290); padding: clamp(3.2rem, 6vw, 6rem); } .cl-crush-card--loading .cl-crush-loading__portrait { width: min(100%, 24rem); border-radius: 2rem; } .cl-crush-card--loading .cl-crush-loading__copy h2 { font-size: clamp(3.8rem, 5vw, 5.4rem); } .cl-crush-card--loading .cl-crush-loading__copy > p:last-of-type { font-size: 1.6rem; line-height: 1.55; } .cl-crush-card--loading .cl-crush-loading li { font-size: 1.3rem; } .cl-crush-card--loading .cl-crush-loading li span { width: 2.6rem; font-size: 1.1rem; } .cl-crush-result__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(32rem, 0.82fr); gap: 1.8rem clamp(3rem, 6vw, 6rem); background: radial-gradient(circle at 86% 12%, oklch(40% 0.12 302 / 0.28), transparent 32rem), oklch(20% 0.07 273); color: oklch(97% 0.012 290); padding: clamp(3.4rem, 5vw, 5.6rem); } .cl-crush-result__logo { grid-column: 1 / -1; width: 12.2rem; height: 5rem; filter: brightness(0) invert(1); object-fit: contain; object-position: left center; } .cl-crush-result__intro .cl-crush-card__header { grid-row: 2 / span 3; grid-column: 1; align-self: center; text-align: left; } .cl-crush-result__intro .cl-crush-card__header h2 { max-width: 13ch; margin: 1rem 0 0; font-size: clamp(4rem, 5.7vw, 5.8rem); letter-spacing: -0.05em; line-height: 0.98; } .cl-crush-result__intro .cl-crush-card__header > p:last-child { max-width: 42ch; margin: 1.6rem 0 0; color: oklch(82% 0.028 285); font-size: 1.6rem; line-height: 1.55; } .cl-crush-result__intro .cl-kicker { color: oklch(85% 0.12 326); font-size: 1.2rem; } .cl-crush-result__intro .cl-crush-hero { grid-row: 2; grid-column: 2; min-height: 31rem; margin-top: 0; } .cl-crush-result__intro .cl-crush-face { width: min(51%, 17rem); border-width: 0.35rem; border-radius: 1.8rem; } .cl-crush-result__intro .cl-crush-face--source > span, .cl-crush-result__intro .cl-crush-face--locked strong { font-size: 1.1rem; } .cl-crush-result__intro .cl-crush-lock { width: 4.4rem; } .cl-crush-result__intro .cl-crush-lock svg { width: 1.8rem; } .cl-crush-hero__score { font-size: 1.3rem; padding: 1rem 1.4rem; } .cl-crush-result__intro .cl-crush-facts { grid-row: 3; grid-column: 2; align-self: start; } .cl-crush-result__intro .cl-crush-facts > span { font-size: 1.2rem; padding: 0.8rem 1rem; } .cl-crush-result__intro .cl-crush-card__free-note { grid-row: 4; grid-column: 2; margin-top: 0.4rem !important; color: oklch(71% 0.03 285); font-size: 1.2rem; line-height: 1.5; text-align: center; } .cl-crush-primary-handoff { display: grid; grid-row: 5; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3rem; margin-top: 2.6rem; border-top: 0.1rem solid oklch(72% 0.06 296 / 0.3); padding-top: 3.6rem; } .cl-crush-primary-handoff__copy h3 { margin-top: 0.8rem; font-size: clamp(2.7rem, 3.4vw, 3.6rem); letter-spacing: -0.035em; line-height: 1.05; } .cl-crush-primary-handoff__copy > p:last-child { max-width: 52ch; margin-top: 1.1rem; color: oklch(80% 0.03 285); font-size: 1.4rem; line-height: 1.55; } .cl-crush-platform { display: none; color: inherit; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; } .cl-page:not([data-cl-platform]) .cl-crush-platform--desktop, .cl-page[data-cl-platform="desktop"] .cl-crush-platform--desktop { display: grid; } .cl-page[data-cl-platform="ios"] .cl-crush-platform--ios, .cl-page[data-cl-platform="android"] .cl-crush-platform--android { display: flex; } .cl-crush-platform--desktop { grid-template-columns: 14rem minmax(13rem, 1fr); align-items: center; gap: 1.5rem; } .cl-crush-platform--desktop > img { width: 14rem; aspect-ratio: 1; border-radius: 1.4rem; background: oklch(99% 0.006 288); padding: 0.7rem; } .cl-crush-platform span { display: grid; gap: 0.45rem; } .cl-crush-platform strong { font-size: 1.5rem; line-height: 1.3; } .cl-crush-platform small { color: oklch(76% 0.03 285); font-size: 1.2rem; } .cl-crush-platform--ios, .cl-crush-platform--android { min-width: 28rem; min-height: 5.6rem; align-items: center; justify-content: center; gap: 1rem; border-radius: 1.2rem; background: oklch(61% 0.22 299); box-shadow: 0 1.2rem 2.5rem oklch(48% 0.2 299 / 0.3); color: oklch(98% 0.008 290); padding: 1rem 1.8rem; text-align: left; } .cl-crush-platform--ios > img { width: 2.1rem; filter: brightness(0) invert(1); } .cl-crush-platform--ios small, .cl-crush-platform--android small { color: oklch(92% 0.025 290); } .cl-crush-match-set { margin-top: 0; border: 0; border-radius: 0; background: oklch(97.5% 0.018 291); padding: clamp(3.8rem, 5vw, 5.6rem); } .cl-crush-section-heading { align-items: end; margin-bottom: 2.4rem; } .cl-crush-section-heading .cl-kicker { color: oklch(48% 0.15 301); font-size: 1.2rem; } .cl-crush-section-heading h3, .cl-crush-report h3 { max-width: 19ch; margin-top: 0.8rem; font-size: clamp(2.8rem, 4vw, 4rem); letter-spacing: -0.04em; line-height: 1.04; } .cl-crush-section-heading > span { color: var(--cl-ink-soft); font-size: 1.3rem; } .cl-crush-match-grid { gap: 1.6rem; } .cl-crush-match-card { border-color: oklch(48% 0.08 285 / 0.3); border-radius: 1.8rem; background: oklch(20% 0.06 274); box-shadow: 0 1.4rem 3rem oklch(28% 0.07 280 / 0.12); } .cl-crush-match-card--lead { border-color: oklch(61% 0.18 300 / 0.65); } .cl-crush-match-card__photo { min-height: 27rem; } .cl-crush-match-card__photo > .cl-crush-lock { width: 4.4rem; } .cl-crush-match-card__photo > .cl-crush-lock svg { width: 1.8rem; } .cl-crush-match-card__label { position: absolute; top: 1.2rem; left: 1.2rem; z-index: 3; border-radius: 999px; background: oklch(17% 0.05 275 / 0.82); color: oklch(95% 0.012 290); font-size: 1.2rem; font-weight: 800; padding: 0.7rem 1rem; } .cl-crush-match-card__meta { gap: 0.7rem; padding: 1.6rem; } .cl-crush-match-card__meta strong { font-size: 1.5rem; } .cl-crush-match-card__meta span { font-size: 1.15rem; padding: 0.55rem 0.8rem; } .cl-crush-match-set__more { max-width: 62ch; margin: 1.8rem auto 0 !important; color: var(--cl-ink-soft); font-size: 1.25rem; line-height: 1.5; } .cl-crush-report { display: grid; grid-template-columns: minmax(22rem, 0.7fr) minmax(0, 1.3fr); align-items: start; gap: clamp(3rem, 6vw, 6rem); margin-top: 0; border: 0; border-radius: 0; background: linear-gradient(120deg, var(--cl-lilac), var(--cl-blue)); color: var(--cl-ink); padding: clamp(3.8rem, 5vw, 5.6rem); } .cl-crush-report .cl-kicker { color: oklch(45% 0.15 301); font-size: 1.2rem; } .cl-crush-report ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 0; color: var(--cl-ink); font-size: 1.4rem; } .cl-crush-report li { padding-top: 3rem; padding-left: 0; } .cl-crush-report li::before { top: 0; display: grid; width: 2.2rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: oklch(63% 0.2 299); color: oklch(98% 0.008 290); font-size: 1.2rem; } .cl-crush-report li strong, .cl-crush-report li span { display: block; } .cl-crush-report li strong { font-size: 1.5rem; } .cl-crush-report li span { margin-top: 0.6rem; color: var(--cl-ink-soft); font-size: 1.3rem; line-height: 1.5; } .cl-crush-sticky { position: static; margin: 0; background: var(--cl-paper); padding: 3.6rem clamp(3.8rem, 5vw, 5.6rem) 1.8rem; } .cl-crush-sticky__button { display: none; min-height: 5.8rem; border-radius: 1.2rem; font-size: 1.7rem; } .cl-page:not([data-cl-platform]) .cl-crush-sticky__button--desktop, .cl-page[data-cl-platform="desktop"] .cl-crush-sticky__button--desktop, .cl-page[data-cl-platform="ios"] .cl-crush-sticky__button--ios, .cl-page[data-cl-platform="android"] .cl-crush-sticky__button--android { display: flex; } .cl-crush-sticky > p { margin-top: 1rem !important; color: var(--cl-ink-soft); font-size: 1.25rem; } .cl-crush-card__footer { gap: 1rem 2rem; margin-top: 0; color: var(--cl-ink-soft); font-size: 1.25rem; padding: 0 clamp(3.8rem, 5vw, 5.6rem) 4rem; } .cl-crush-card__footer button, .cl-crush-card__footer a { display: inline-flex; min-height: 4.4rem; align-items: center; color: oklch(43% 0.14 301); font-size: 1.3rem; padding: 0.8rem 0.4rem; } @media (hover: hover) { .cl-crush-platform:hover { transform: translateY(-0.15rem); } } .cl-crush-platform:focus-visible, .cl-crush-sticky__button:focus-visible, .cl-crush-mobile-dock__button:focus-visible, .cl-crush-card__footer button:focus-visible, .cl-crush-card__footer a:focus-visible { outline: 0.3rem solid oklch(72% 0.18 300); outline-offset: 0.3rem; } .cl-crush-mobile-dock { display: none; } .cl-crush-mobile-dock__button { display: none; } @media (max-width: 47.99rem) { .cl-crush-reveal { padding: 6rem 0 10rem; } .cl-crush-reveal__close { width: 4.4rem; min-width: 4.4rem; } .cl-crush-stage { width: min(calc(100% - 2.4rem), 86rem); } .cl-crush-card { border-radius: 2rem; padding: 0; } .cl-crush-card--loading { grid-template-columns: 1fr; gap: 3rem; min-height: calc(100svh - 8rem); padding: 3rem 2rem; } .cl-crush-card--loading .cl-crush-loading__portrait { width: 18rem; } .cl-crush-card--loading .cl-crush-loading__copy h2 { font-size: clamp(3.5rem, 10vw, 4.8rem); } .cl-crush-result__intro { display: block; padding: 3rem 2rem; } .cl-crush-result__logo { width: 10rem; height: 4.2rem; margin-bottom: 2.4rem; } .cl-crush-result__intro .cl-crush-card__header { text-align: center; } .cl-crush-result__intro .cl-crush-card__header h2 { max-width: 14ch; margin-inline: auto; font-size: clamp(3.6rem, 11vw, 4.8rem); } .cl-crush-result__intro .cl-crush-card__header > p:last-child { margin-inline: auto; font-size: 1.5rem; } .cl-crush-result__intro .cl-crush-hero { min-height: 32rem; margin-top: 2.4rem; } .cl-crush-result__intro .cl-crush-face { width: min(48%, 16rem); } .cl-crush-result__intro .cl-crush-facts { margin-top: 0.8rem; } .cl-crush-result__intro .cl-crush-card__free-note { margin-top: 1.2rem !important; } .cl-crush-primary-handoff { grid-template-columns: 1fr; gap: 2.4rem; margin-top: 3rem; padding-top: 3rem; text-align: center; } .cl-crush-primary-handoff__copy > p:last-child { margin-inline: auto; } .cl-crush-platform--desktop { grid-template-columns: 11rem minmax(0, 1fr); justify-self: center; text-align: left; } .cl-crush-platform--desktop > img { width: 11rem; } .cl-crush-platform--ios, .cl-crush-platform--android { width: 100%; min-width: 0; } .cl-crush-match-set, .cl-crush-report { padding: 3.6rem 2rem; } .cl-crush-section-heading { align-items: flex-start; flex-direction: column; gap: 1rem; } .cl-crush-match-grid, .cl-crush-report, .cl-crush-report ul { grid-template-columns: 1fr; } .cl-crush-match-card__photo { min-height: min(28rem, 76vw); } .cl-crush-report { gap: 2.4rem; } .cl-crush-report ul { gap: 1.6rem; } .cl-crush-report li { min-height: 4.4rem; padding-top: 0; padding-left: 3.4rem; } .cl-crush-sticky { position: static; margin: 0; padding: 3rem 2rem 1.4rem; } .cl-crush-card__footer { align-items: center; flex-direction: column; gap: 0.4rem; padding: 0 2rem 3rem; text-align: center; } .cl-crush-mobile-dock:not([hidden]) { position: fixed; right: 0; bottom: 0; left: 0; z-index: 10; display: block; border-top: 0.1rem solid oklch(62% 0.07 289 / 0.25); background: oklch(99% 0.008 290 / 0.96); box-shadow: 0 -1.4rem 3.4rem oklch(24% 0.07 278 / 0.17); padding: 1.2rem max(1.2rem, env(safe-area-inset-right)) max(1.2rem, env(safe-area-inset-bottom)) max(1.2rem, env(safe-area-inset-left)); backdrop-filter: blur(1.6rem); } .cl-page:not([data-cl-platform]) .cl-crush-mobile-dock__button--desktop, .cl-page[data-cl-platform="desktop"] .cl-crush-mobile-dock__button--desktop, .cl-page[data-cl-platform="ios"] .cl-crush-mobile-dock__button--ios, .cl-page[data-cl-platform="android"] .cl-crush-mobile-dock__button--android { display: flex; } .cl-crush-mobile-dock__button { min-height: 5.6rem; align-items: center; justify-content: center; gap: 1rem; border-radius: 1.2rem; background: oklch(61% 0.22 299); box-shadow: 0 1rem 2.4rem oklch(48% 0.2 299 / 0.26); color: oklch(98% 0.008 290); font-size: 1.6rem; font-weight: 800; text-decoration: none; } .cl-crush-mobile-dock__button img { width: 2rem; filter: brightness(0) invert(1); } } /* Centered reveal composition: navy payoff, then branded light surfaces */ .cl-crush-stage { width: min(calc(100% - 3.2rem), 82rem); } .cl-crush-card { width: min(100%, 76rem); } .cl-crush-result__intro { display: block; background: radial-gradient(circle at 88% 8%, oklch(40% 0.12 302 / 0.28), transparent 30rem), oklch(20% 0.07 273); padding: clamp(4rem, 6vw, 5.6rem); text-align: center; } .cl-crush-result__logo { display: block; width: 11rem; height: 4.4rem; margin-inline: auto; object-position: center; } .cl-crush-result__intro .cl-crush-card__header { margin-top: 2rem; text-align: center; } .cl-crush-result__intro .cl-crush-card__header h2 { max-width: 15ch; margin: 1rem auto 0; font-size: clamp(4.2rem, 6vw, 5.4rem); line-height: 0.98; } .cl-crush-result__intro .cl-crush-card__header > p:last-child { max-width: 58ch; margin: 1.5rem auto 0; font-size: 1.55rem; line-height: 1.55; } .cl-crush-result__intro .cl-crush-hero { min-height: 29rem; margin-top: 2.8rem; } .cl-crush-result__intro .cl-crush-face { width: min(38%, 17rem); } .cl-crush-result__intro .cl-crush-facts { margin-top: 0.4rem; } .cl-crush-result__intro .cl-crush-card__free-note { max-width: 56ch; margin: 1.4rem auto 0 !important; font-size: 1.25rem; } .cl-crush-match-set { background: radial-gradient(circle at 95% 5%, oklch(90% 0.07 314 / 0.48), transparent 25rem), oklch(97% 0.025 295); padding: clamp(4rem, 6vw, 5.2rem); } .cl-crush-section-heading { margin-bottom: 2.6rem; } .cl-crush-section-heading h3, .cl-crush-report h3, .cl-crush-primary-handoff h3 { font-size: clamp(3rem, 4.8vw, 4.2rem); } .cl-crush-match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; } .cl-crush-match-card__photo { min-height: 20rem; } .cl-crush-match-card__meta { min-height: 10rem; align-content: start; padding: 1.5rem; } .cl-crush-match-card__meta strong { font-size: 1.45rem; line-height: 1.35; } .cl-crush-report { grid-template-columns: minmax(22rem, 0.8fr) minmax(0, 1.2fr); gap: 4rem; background: radial-gradient(circle at 8% 90%, oklch(91% 0.07 250 / 0.72), transparent 27rem), linear-gradient(135deg, oklch(96% 0.025 276), oklch(95% 0.035 311)); padding: clamp(4rem, 6vw, 5.2rem); } .cl-crush-report ul { display: grid; grid-template-columns: 1fr; gap: 0; } .cl-crush-report li { min-height: 7rem; border-bottom: 0.1rem solid oklch(59% 0.06 286 / 0.18); padding: 0.5rem 0 1.8rem 3.6rem; } .cl-crush-report li + li { padding-top: 1.8rem; } .cl-crush-report li:last-child { border-bottom: 0; padding-bottom: 0.5rem; } .cl-crush-report li::before { top: 0.5rem; } .cl-crush-report li + li::before { top: 1.8rem; } .cl-crush-primary-handoff { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3rem; margin: 0; border: 0; background: radial-gradient(circle at 94% 15%, oklch(91% 0.08 325 / 0.68), transparent 25rem), linear-gradient(125deg, oklch(97% 0.028 345), oklch(95% 0.035 304)); color: var(--cl-ink); padding: clamp(4rem, 6vw, 5.2rem); } .cl-crush-primary-handoff__copy .cl-kicker { color: oklch(47% 0.16 318); } .cl-crush-primary-handoff__copy h3 { margin-top: 0.8rem; letter-spacing: -0.04em; line-height: 1.04; } .cl-crush-primary-handoff__copy > p:last-child { color: var(--cl-ink-soft); font-size: 1.4rem; } .cl-crush-primary-handoff__copy > p:last-child strong { color: oklch(48% 0.17 318); font-weight: 850; } .cl-crush-primary-handoff .cl-crush-platform strong { color: var(--cl-ink); } .cl-crush-primary-handoff .cl-crush-platform small { color: var(--cl-ink-soft); } .cl-crush-primary-handoff .cl-crush-platform--desktop > img { box-shadow: 0 1.2rem 2.8rem oklch(43% 0.08 295 / 0.16); } .cl-crush-sticky { background: oklch(98% 0.016 315); padding-top: 3rem; } .cl-crush-card__footer { background: oklch(98% 0.016 315); } @media (max-width: 61.99rem) { .cl-crush-stage { width: min(calc(100% - 2.4rem), 76rem); } .cl-crush-report, .cl-crush-primary-handoff { grid-template-columns: 1fr; } .cl-crush-primary-handoff { text-align: center; } .cl-crush-primary-handoff__copy > p:last-child { margin-inline: auto; } .cl-crush-platform--desktop { justify-self: center; } } @media (max-width: 47.99rem) { .cl-crush-result__intro, .cl-crush-match-set, .cl-crush-report, .cl-crush-primary-handoff { padding: 3.2rem 2rem; } .cl-crush-result__logo { width: 9.6rem; height: 4rem; } .cl-crush-result__intro .cl-crush-card__header h2 { font-size: clamp(3.6rem, 10.5vw, 4.6rem); } .cl-crush-result__intro .cl-crush-hero { min-height: 27rem; } .cl-crush-match-grid { grid-template-columns: 1fr; } .cl-crush-match-card__photo { min-height: min(29rem, 78vw); } .cl-crush-report { gap: 2.8rem; } .cl-crush-report li { min-height: 6rem; } } /* Reference-copy refinement: compact first block and persistent conversion CTA */ .cl-crush-reveal { padding-bottom: 12rem; } .cl-crush-result { overflow: visible; animation: none; } .cl-crush-result__intro { border-radius: 3rem 3rem 0 0; padding-top: clamp(3.2rem, 5vw, 4.4rem); } .cl-crush-result__intro .cl-crush-card__header { margin-top: 0; } .cl-crush-result__intro .cl-crush-hero { min-height: 26rem; margin-top: 2.2rem; } .cl-crush-sticky { position: fixed; right: auto; bottom: 0; left: 50%; z-index: 100110; width: min(calc(100% - 4.8rem), 70rem); margin: 0; transform: translateX(-50%); border: 0.1rem solid oklch(71% 0.08 292 / 0.22); border-bottom: 0; border-radius: 1.8rem 1.8rem 0 0; background: oklch(18% 0.06 274 / 0.96); box-shadow: 0 -1.6rem 4rem oklch(8% 0.04 275 / 0.24); padding: 1.4rem 1.6rem max(1.2rem, env(safe-area-inset-bottom)); -webkit-backdrop-filter: blur(1.6rem); backdrop-filter: blur(1.6rem); } .cl-crush-sticky__button { min-height: 5.8rem; border-color: oklch(87% 0.08 24 / 0.32); background: oklch(63% 0.2 25); box-shadow: 0 1.2rem 2.8rem oklch(48% 0.18 25 / 0.32); font-size: 1.7rem; } .cl-crush-sticky > p { color: oklch(76% 0.025 287); font-size: 1.15rem; } .cl-crush-sticky > p strong { color: oklch(94% 0.09 326); font-weight: 850; } @media (hover: hover) { .cl-crush-sticky__button:hover { background: oklch(58% 0.2 25); box-shadow: 0 1.4rem 3rem oklch(45% 0.18 25 / 0.4); } } .cl-crush-mobile-dock { display: none !important; } .cl-crush-card__footer { border-radius: 0 0 3rem 3rem; padding-bottom: 11rem; } @media (max-width: 47.99rem) { .cl-crush-reveal { padding-bottom: 11rem; } .cl-crush-result__intro { border-radius: 2rem 2rem 0 0; padding-top: 2.8rem; } .cl-crush-result__intro .cl-crush-hero { min-height: 24rem; } .cl-crush-sticky { width: 100%; border-radius: 0; padding-inline: 1.2rem; } .cl-crush-sticky__button { min-height: 5.6rem; font-size: 1.55rem; } .cl-crush-card__footer { border-radius: 0 0 2rem 2rem; padding-bottom: 10rem; } } /* Popup chrome and continuous member-preview reveal */ .cl-crush-reveal { padding-top: 10rem; } .cl-crush-reveal__header { position: fixed; top: 0; right: 0; left: 0; z-index: 100120; display: grid; grid-template-columns: minmax(12rem, 1fr) auto minmax(12rem, 1fr); min-height: 6.8rem; align-items: center; gap: 2rem; border-bottom: 0.1rem solid oklch(66% 0.05 283 / 0.22); background: oklch(98.5% 0.009 285 / 0.94); box-shadow: 0 1rem 3rem oklch(25% 0.06 276 / 0.1); padding: max(0.8rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right)) 0.8rem max(2rem, env(safe-area-inset-left)); -webkit-backdrop-filter: blur(1.6rem); backdrop-filter: blur(1.6rem); } .cl-crush-reveal__brand { display: inline-flex; width: 11.5rem; min-height: 4.4rem; align-items: center; justify-self: start; } .cl-crush-reveal__brand img { display: block; width: 100%; height: 3.6rem; object-fit: contain; object-position: left center; } .cl-crush-reveal__header > p { color: var(--cl-ink); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.01em; text-align: center; } .cl-crush-reveal__header .cl-crush-reveal__close { position: static; top: auto; right: auto; justify-self: end; } .cl-crush-result__intro { overflow: visible; padding-bottom: clamp(11rem, 15vw, 14rem); } /* One continuous result grid: its card tops tease inside the navy hero, then the complete cards continue on the pale lavender surface below. */ .cl-crush-result > .cl-crush-match-set { position: relative; z-index: 1; margin-top: clamp(-11rem, -12vw, -9rem); background: linear-gradient( 180deg, transparent 0, transparent clamp(9rem, 11vw, 11rem), oklch(97% 0.025 295) clamp(9rem, 11vw, 11rem), oklch(97% 0.025 295) 100% ); padding-top: 0; } .cl-crush-result > .cl-crush-match-set .cl-crush-match-grid { position: relative; z-index: 2; } .cl-crush-result > .cl-crush-match-set .cl-crush-match-card__percent { top: 1.2rem; right: 1.2rem; font-size: 1.15rem; padding: 0.7rem 1rem; } .cl-crush-result > .cl-crush-match-set .cl-crush-match-card__meta { min-height: 7.2rem; align-content: center; } /* Keep the two hero cards crisp at their edges while confining the blurred lookalike image to the inside of its own frame. */ .cl-crush-result__intro .cl-crush-face { isolation: isolate; overflow: hidden; border: 0.3rem solid oklch(97% 0.01 290); box-shadow: 0 1.4rem 3rem oklch(8% 0.045 275 / 0.38); } .cl-crush-result__intro .cl-crush-face--source img { position: relative; inset: auto; filter: none; transform: none; } .cl-crush-result__intro .cl-crush-face--locked { background: oklch(24% 0.055 276); } .cl-crush-result__intro .cl-crush-face--locked img { inset: 0; width: 100%; height: 100%; filter: blur(1.55rem) saturate(0.4) contrast(0.86); object-fit: cover; transform: scale(1.16); } .cl-crush-result__intro .cl-crush-face--locked::after { z-index: 1; background: oklch(15% 0.05 276 / 0.64); } .cl-crush-result__intro .cl-crush-face--locked > .cl-crush-lock { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .cl-crush-reveal__brand:focus-visible { border-radius: 0.8rem; outline: 0.3rem solid oklch(67% 0.19 300); outline-offset: 0.3rem; } @media (max-width: 47.99rem) { .cl-crush-reveal { padding-top: 8.4rem; } .cl-crush-reveal__header { grid-template-columns: 9.6rem 1fr 4.4rem; min-height: 6.4rem; gap: 1rem; padding-inline: 1.2rem; } .cl-crush-reveal__brand { width: 9.6rem; } .cl-crush-reveal__header > p { font-size: 1.15rem; } .cl-crush-result__intro { padding: 2.6rem 1.6rem 10.5rem; } .cl-crush-result__intro .cl-crush-card__header h2 { max-width: 14ch; font-size: clamp(3rem, 10.5vw, 3.8rem); line-height: 1; } .cl-crush-result__intro .cl-crush-card__header > p:last-child { margin-top: 1.2rem; font-size: 1.35rem; line-height: 1.45; } .cl-crush-result__intro .cl-crush-hero { min-height: 20rem; gap: 1.1rem; margin-top: 1.8rem; } /* Use tall, phone-like cards throughout the mobile result experience. */ .cl-crush-result__intro .cl-crush-face { width: min(31%, 10.5rem); aspect-ratio: 9 / 16; } .cl-crush-card .cl-crush-face--source { transform: rotate(-3deg); } .cl-crush-card .cl-crush-face--locked { transform: rotate(3deg); } .cl-crush-hero__score { top: auto; bottom: 26%; transform: translateX(-50%); } .cl-crush-result__intro .cl-crush-facts { gap: 0.55rem; margin-top: 0.8rem; } .cl-crush-result__intro .cl-crush-facts > span { font-size: 1.05rem; padding: 0.65rem 0.75rem; } .cl-crush-result > .cl-crush-match-set { margin-top: -8.5rem; background: linear-gradient( 180deg, transparent 0, transparent 8.5rem, oklch(97% 0.025 295) 8.5rem, oklch(97% 0.025 295) 100% ); padding: 0 1.6rem 4rem; } .cl-crush-result > .cl-crush-match-set .cl-crush-match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .cl-crush-result > .cl-crush-match-set .cl-crush-match-card__photo { min-height: 0; aspect-ratio: 4 / 5; } .cl-crush-result > .cl-crush-match-set .cl-crush-match-card__meta { min-height: 6.8rem; gap: 0.5rem; padding: 1.2rem; } .cl-crush-result > .cl-crush-match-set .cl-crush-match-card__label, .cl-crush-result > .cl-crush-match-set .cl-crush-match-card__percent { top: 1rem; font-size: 1rem; padding: 0.6rem 0.75rem; } .cl-crush-result > .cl-crush-match-set .cl-crush-match-card__label { left: 1rem; } .cl-crush-result > .cl-crush-match-set .cl-crush-match-card__percent { right: 1rem; } .cl-crush-result > .cl-crush-match-set .cl-crush-match-card__meta strong { font-size: 1.25rem; } .cl-crush-result > .cl-crush-match-set .cl-crush-match-card__meta span { font-size: 0.95rem; padding: 0.45rem 0.6rem; } } /* Compact the crush first block on tablet/desktop so the lookalike cards tease above the fixed conversion bar without scrolling. */ @media (min-width: 48rem) { .cl-crush-result__intro { padding-top: clamp(2.4rem, 3.5vw, 3rem); padding-bottom: clamp(6.5rem, 8vw, 7.5rem); } .cl-crush-result__intro .cl-crush-card__header { margin-top: 0.6rem; } .cl-crush-result__intro .cl-crush-card__header h2 { font-size: clamp(3.2rem, 4.4vw, 4.2rem); } .cl-crush-result__intro .cl-crush-card__header > p:last-child { margin-top: 0.9rem; } .cl-crush-result__intro .cl-crush-hero { min-height: 22rem; margin-top: 1.8rem; gap: clamp(1.6rem, 2.6vw, 2.4rem); } /* Phone-proportioned cards for a modern look. */ .cl-crush-result__intro .cl-crush-face { width: min(29%, 12.2rem); aspect-ratio: 9 / 16; } /* Separate the two hero cards (no overlap) and keep only a gentle tilt so the labels and badge never collide. */ .cl-crush-card .cl-crush-face--source { transform: rotate(-3deg); } .cl-crush-card .cl-crush-face--locked { transform: rotate(3deg); } .cl-crush-result__intro .cl-crush-face--source > span, .cl-crush-result__intro .cl-crush-face--locked strong { font-size: 0.82rem; } /* Match-score badge sits low, bridging the seam, clear of the faces. */ .cl-crush-hero__score { top: auto; bottom: 24%; transform: translateX(-50%); font-size: 0.95rem; padding: 0.6rem 0.95rem; } .cl-crush-match-card__photo { min-height: 0; aspect-ratio: 4 / 5; } /* The first source portrait has a higher facial focal point than the other preview assets. Keep its blurred face centered inside the desktop card. */ .cl-crush-match-card--lead .cl-crush-match-card__photo > img { object-position: 50% 24%; } /* Breathing room between the hero, the feature chips and the preview cards. */ .cl-crush-result__intro .cl-crush-facts { margin-top: 1.5rem; } .cl-crush-result > .cl-crush-match-set { margin-top: clamp(-6.5rem, -7vw, -5.5rem); background: linear-gradient( 180deg, transparent 0, transparent clamp(4.5rem, 5.5vw, 5.5rem), oklch(97% 0.025 295) clamp(4.5rem, 5.5vw, 5.5rem), oklch(97% 0.025 295) 100% ); } } /* Privacy-safe lookalike previews. These are CSS shapes, not downloadable profile photos, so there is no hidden result image to recover in DevTools. */ .cl-crush-silhouette { --cl-silhouette-x: 50%; --cl-silhouette-skin: oklch(67% 0.07 38); --cl-silhouette-hair: oklch(24% 0.035 275); --cl-silhouette-shirt: oklch(31% 0.08 267); position: absolute; inset: 0; z-index: 0; display: block; background: radial-gradient(ellipse 25% 21% at var(--cl-silhouette-x) 27%, var(--cl-silhouette-hair) 0 68%, transparent 72%), radial-gradient(ellipse 20% 23% at var(--cl-silhouette-x) 36%, var(--cl-silhouette-skin) 0 74%, transparent 78%), radial-gradient(ellipse 42% 48% at var(--cl-silhouette-x) 84%, var(--cl-silhouette-shirt) 0 72%, transparent 76%), linear-gradient(145deg, oklch(29% 0.055 257), oklch(18% 0.045 292)); filter: blur(0.85rem) saturate(0.68); transform: scale(1.05); } .cl-crush-silhouette::after { position: absolute; inset: 0; background: oklch(14% 0.045 276 / 0.12); content: ""; } .cl-crush-silhouette--2 { --cl-silhouette-x: 55%; --cl-silhouette-skin: oklch(73% 0.055 53); --cl-silhouette-hair: oklch(31% 0.055 40); --cl-silhouette-shirt: oklch(30% 0.06 321); } .cl-crush-silhouette--3 { --cl-silhouette-x: 46%; --cl-silhouette-skin: oklch(61% 0.075 43); --cl-silhouette-hair: oklch(19% 0.028 276); --cl-silhouette-shirt: oklch(34% 0.075 190); } .cl-crush-silhouette--4 { --cl-silhouette-x: 53%; --cl-silhouette-skin: oklch(77% 0.05 62); --cl-silhouette-hair: oklch(39% 0.065 57); --cl-silhouette-shirt: oklch(31% 0.08 346); } .cl-crush-silhouette--hero { --cl-silhouette-x: 52%; inset: 0.3rem; border-radius: 1rem; clip-path: inset(0 round 1rem); filter: blur(0.65rem) saturate(0.66); transform: scale(1.03); } /* Use the card's real border as the single frame. The silhouette is clipped independently, avoiding Safari's doubled filtered-edge compositing. */ .cl-crush-result__intro .cl-crush-face--locked::before { content: none; } .cl-crush-result__intro .cl-crush-face--locked { border: 0.3rem solid oklch(97% 0.01 290); box-shadow: 0 1.2rem 2.6rem oklch(8% 0.045 275 / 0.3); } .cl-crush-platform[type="button"], .cl-crush-sticky__button[type="button"], .cl-crush-mobile-dock__button[type="button"] { border: 0; font: inherit; cursor: pointer; } .cl-crush-sticky__button { width: 100%; } .cl-crush-card__footer { min-height: 0; gap: 0.8rem 2.4rem; padding-bottom: 3.2rem; } .cl-crush-card__footer button, .cl-crush-card__footer a { min-height: 4.4rem; } .cl-crush-platform--desktop[type="button"] { background: transparent; color: inherit; padding: 0; text-align: left; } .cl-crush-qr-modal { position: fixed; inset: 0; z-index: 100160; display: grid; place-items: center; padding: 2rem; } .cl-crush-qr-modal[hidden] { display: none; } .cl-crush-qr-modal__backdrop { position: absolute; inset: 0; border: 0; background: oklch(9% 0.045 276 / 0.72); cursor: pointer; -webkit-backdrop-filter: blur(0.8rem); backdrop-filter: blur(0.8rem); } .cl-crush-qr-modal__panel { position: relative; z-index: 1; display: grid; width: min(100%, 46rem); justify-items: center; border: 0.1rem solid oklch(67% 0.075 290 / 0.25); border-radius: 2.4rem; background: oklch(98.5% 0.012 295); box-shadow: 0 3rem 8rem oklch(8% 0.04 276 / 0.38); color: var(--cl-ink); padding: 4rem 3.2rem 3.2rem; text-align: center; } .cl-crush-qr-modal__panel h2 { max-width: 13ch; margin-top: 0.8rem; font-size: clamp(3rem, 6vw, 4.2rem); letter-spacing: -0.045em; line-height: 1.02; } .cl-crush-qr-modal__panel > p:not(.cl-kicker) { max-width: 34ch; margin-top: 1.2rem; color: var(--cl-ink-soft); font-size: 1.5rem; line-height: 1.5; } .cl-crush-qr-modal__code { width: min(22rem, 60vw); aspect-ratio: 1; margin-top: 2.4rem; border: 0.1rem solid oklch(62% 0.06 286 / 0.22); border-radius: 1.6rem; background: white; padding: 0.9rem; } .cl-crush-qr-modal__store { display: inline-flex; min-height: 4.4rem; align-items: center; margin-top: 1.6rem; border-bottom: 0.1rem solid currentColor; color: oklch(43% 0.15 299); font-size: 1.4rem; font-weight: 800; text-decoration: none; } .cl-crush-qr-modal__close { position: absolute; top: 1.2rem; right: 1.2rem; display: grid; width: 4.4rem; aspect-ratio: 1; place-items: center; border: 0.1rem solid oklch(55% 0.05 285 / 0.24); border-radius: 50%; background: oklch(100% 0 0 / 0.72); color: var(--cl-ink); cursor: pointer; } .cl-crush-qr-modal__close svg { width: 2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; } .cl-crush-qr-modal__close:focus-visible, .cl-crush-qr-modal__store:focus-visible { outline: 0.3rem solid oklch(65% 0.18 300); outline-offset: 0.3rem; } @media (max-width: 47.99rem) { .cl-crush-card__footer { padding-bottom: 2.8rem; } .cl-crush-qr-modal__panel { border-radius: 2rem; padding: 3.6rem 2rem 2.6rem; } } /* Results */ .cl-results { background: var(--cl-paper); } .cl-results__header { padding-block: clamp(5rem, 10vw, 9rem); } .cl-results__header h2 { margin-top: 1rem; font-size: clamp(3rem, 10vw, 7.2rem); } .cl-results__header h2 span { display: block; color: oklch(54% 0.17 302); } /* Dedicated analysis/results view */ body.cl-results-active { overflow: hidden; overscroll-behavior: none; } .cl-result-experience { position: fixed; inset: 0; z-index: 9998; background: oklch(17% 0.075 274); isolation: isolate; } .cl-result-experience__frame { display: block; width: 100%; height: 100%; border: 0; background: oklch(17% 0.075 274); } .cl-result-experience__back { position: fixed; z-index: 10000; top: max(1rem, env(safe-area-inset-top)); left: max(1rem, env(safe-area-inset-left)); display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.85rem; padding: 0.7rem 1rem; border: 0.08rem solid oklch(100% 0 0 / 0.24); border-radius: 999px; color: white; background: oklch(22% 0.08 274 / 0.68); box-shadow: 0 0.9rem 2.5rem oklch(8% 0.05 275 / 0.3); -webkit-backdrop-filter: blur(1rem) saturate(1.2); backdrop-filter: blur(1rem) saturate(1.2); cursor: pointer; } .cl-result-experience__back:hover { background: oklch(27% 0.1 274 / 0.82); } .cl-result-experience__back:focus-visible { outline: 0.18rem solid oklch(84% 0.14 326); outline-offset: 0.2rem; } @media (max-width: 680px) { .cl-result-experience__back { top: max(0.7rem, env(safe-area-inset-top)); left: max(0.7rem, env(safe-area-inset-left)); min-height: 2.65rem; padding: 0.62rem 0.85rem; } } .cl-result { padding-block: clamp(5rem, 10vw, 9rem); } .cl-result__grid { display: grid; gap: 2.5rem; align-items: center; } .cl-result__portrait-wrap { position: relative; min-height: 27rem; overflow: hidden; border-radius: 1.5rem; background: oklch(24% 0.03 270); } .cl-result__portrait-wrap::after { position: absolute; inset: auto 1.25rem 1.25rem; height: 0.22rem; border-radius: 999px; background: linear-gradient(90deg, var(--cl-rose) 0 var(--score, 80%), oklch(70% 0.03 270) var(--score, 80%)); content: ""; } .cl-result__portrait-wrap img { width: 100%; height: 100%; min-height: 27rem; object-fit: cover; object-position: center 18%; } .cl-result__number { color: oklch(50% 0.13 300); } .cl-result__content h3, .cl-vibe__copy h3, .cl-movie__copy h3 { margin-top: 1rem; font-size: clamp(2.8rem, 9vw, 6.8rem); } .cl-result__content h3 span { display: block; color: oklch(52% 0.17 302); } .cl-result__overline { margin-top: 1rem !important; color: var(--cl-ink-soft); font-size: 1.15rem; font-weight: 800; } .cl-score { display: flex; align-items: flex-end; gap: 0.65rem; margin-top: 1.6rem; } .cl-score strong { font-size: clamp(2.4rem, 7vw, 4.5rem); font-variant-numeric: tabular-nums; letter-spacing: -0.06em; line-height: 0.9; } .cl-score span { color: var(--cl-ink-soft); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .cl-result__summary { max-width: 39rem; margin-top: 1.5rem !important; color: var(--cl-ink-soft); font-size: 1.05rem; } .cl-feature-list { display: grid; gap: 0; margin-block: 1.5rem; } .cl-feature { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem; border-top: 0.08rem solid var(--cl-line); padding: 1rem 0; } .cl-feature strong { font-size: 0.9rem; } .cl-feature > span { font-weight: 800; font-variant-numeric: tabular-nums; } .cl-feature p { grid-column: 1 / -1; color: var(--cl-ink-soft); font-size: 0.82rem; } .cl-result--face { background: oklch(95% 0.035 278); } .cl-result--opposite { background: oklch(97% 0.02 315); } .cl-result--vibe { background: var(--cl-ink); color: var(--cl-paper); } .cl-vibe { display: grid; gap: 2.5rem; align-items: center; } .cl-vibe__portrait { position: relative; min-height: 31rem; overflow: hidden; border-radius: 50% 50% 1.5rem 1.5rem; } .cl-vibe__portrait img { width: 100%; height: 100%; min-height: 31rem; object-fit: cover; } .cl-vibe__copy .cl-result__number { color: oklch(81% 0.13 331); } .cl-vibe__contrast { color: oklch(82% 0.025 275); font-size: 1.1rem; } .cl-vibe__copy h3 { color: oklch(90% 0.11 330); } .cl-vibe__copy .cl-score span, .cl-vibe__copy .cl-result__summary { color: oklch(79% 0.025 275); } .cl-vibe__type { margin-top: 1.25rem !important; } .cl-vibe__descriptors { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.25rem; } .cl-vibe__descriptors span { border: 0.08rem solid oklch(52% 0.05 275); border-radius: 999px; padding: 0.55rem 0.8rem; font-size: 0.76rem; font-weight: 700; } .cl-result--movie { background: oklch(91% 0.072 65); } .cl-movie { display: grid; gap: 2.5rem; align-items: center; } .cl-movie__poster { overflow: hidden; border-radius: 1.25rem; box-shadow: var(--cl-shadow); transform: rotate(-1.5deg); } .cl-movie__poster img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; } .cl-movie__title { margin-top: 0.5rem !important; font-size: 1.5rem; } .cl-movie__credit { margin-top: 1rem !important; color: var(--cl-ink-soft); font-size: 0.85rem; } .cl-movie__reasons { display: grid; gap: 0.75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; } .cl-movie__reasons li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; font-weight: 700; } .cl-movie__reasons li::before { position: absolute; left: 0; color: oklch(49% 0.16 25); content: "✦"; } /* Movie poster upsell */ .cl-poster { background: oklch(21% 0.07 269); color: var(--cl-paper); } .cl-poster__grid { display: grid; gap: 2.5rem; align-items: center; } .cl-poster .cl-kicker { color: oklch(83% 0.14 330); } .cl-poster__copy > p:last-of-type { max-width: 38rem; margin: 1.5rem 0 1.75rem; color: oklch(80% 0.025 275); font-size: var(--cl-reading-size); line-height: 1.7; } .cl-button--poster { background: oklch(83% 0.13 335); box-shadow: 0 1.1rem 2.6rem oklch(9% 0.04 270 / 0.32); /* Forced: the dark section sets a near-white color the button would otherwise inherit, dropping the label to ~1.9:1 on this pink. Same guard as .cl-dating. */ color: var(--cl-ink) !important; -webkit-text-fill-color: var(--cl-ink) !important; } .cl-button--poster span { transition: transform 180ms var(--cl-ease); } .cl-poster__image { position: relative; margin: 0; transform: rotate(1.2deg); } .cl-poster__image img { width: min(100%, 31rem); margin-inline: auto; border-radius: 1.2rem; box-shadow: 0 2rem 6rem oklch(8% 0.03 270 / 0.45); } .cl-poster__image figcaption { position: absolute; right: 1rem; bottom: 1rem; border-radius: 999px; background: var(--cl-paper); color: var(--cl-ink); font-size: 0.68rem; font-weight: 800; padding: 0.55rem 0.75rem; } @media (hover: hover) { .cl-button--poster:hover { background: oklch(78% 0.16 335); box-shadow: 0 1.4rem 3.2rem oklch(9% 0.04 270 / 0.38); } .cl-button--poster:hover span { transform: translateX(0.25rem); } } /* Explanatory content */ .cl-explain { background: linear-gradient(180deg, oklch(96% 0.025 286) 0, oklch(95% 0.028 257) 7rem); } .cl-heading-row { display: grid; gap: 1.5rem; align-items: end; } .cl-heading-row > p { max-width: 34rem; color: var(--cl-ink-soft); } .cl-explain__heading { display: grid; gap: 12px; } .cl-explain__heading > p:last-child { max-width: 780px; color: var(--cl-ink-soft); font-size: 17px; line-height: 1.65; } .cl-four { position: relative; isolation: isolate; display: grid; gap: 14px; min-height: 1460px; margin-top: 30px; overflow: hidden; border: 1px solid oklch(50% 0.09 277 / 0.55); border-radius: 32px; background: radial-gradient(circle at 50% 45%, oklch(55% 0.2 318 / 0.3), transparent 29%), radial-gradient(circle at 9% 61%, oklch(72% 0.2 142 / 0.18), transparent 25%), radial-gradient(circle at 91% 55%, oklch(62% 0.23 301 / 0.24), transparent 29%), oklch(16% 0.068 274); box-shadow: 0 32px 90px oklch(22% 0.08 275 / 0.32); padding: 490px 12px 14px; } .cl-four::before { position: absolute; z-index: 0; inset: 0; background-image: radial-gradient(circle, oklch(90% 0.08 298 / 0.14) 0 0.8px, transparent 1.2px); background-size: 28px 28px; mask-image: radial-gradient(ellipse at 50% 58%, black 8%, oklch(0% 0 0 / 0.72) 54%, transparent 92%); content: ""; } .cl-four::after { position: absolute; z-index: 1; inset: 9% 3%; pointer-events: none; background: radial-gradient(circle at 8% 55%, oklch(87% 0.23 142 / 0.85) 0 1.4px, transparent 2.4px), radial-gradient(circle at 18% 70%, oklch(80% 0.18 158 / 0.58) 0 1px, transparent 2px), radial-gradient(circle at 82% 28%, oklch(78% 0.2 314 / 0.66) 0 1.2px, transparent 2.2px), radial-gradient(circle at 94% 57%, oklch(78% 0.22 304 / 0.88) 0 1.5px, transparent 2.5px); background-size: 21px 25px, 29px 23px, 25px 29px, 19px 27px; content: ""; filter: drop-shadow(0 0 5px oklch(78% 0.2 302 / 0.55)); mask-image: radial-gradient(ellipse at center, transparent 0 30%, black 49%, transparent 82%); opacity: 0.24; } .cl-four__headline { position: absolute; z-index: 1; top: 26px; left: 50%; width: min(calc(100% - 36px), 12ch); margin: 0; transform: translateX(-50%); color: oklch(98% 0.01 285); font-size: clamp(38px, 10.5vw, 58px); letter-spacing: -0.065em; line-height: 0.94; text-align: center; text-wrap: balance; } .cl-four__headline span { display: block; } .cl-four__orbit { position: absolute; z-index: 2; top: 195px; left: 50%; width: 560px; height: 250px; transform: translateX(-50%); transform-style: preserve-3d; animation: cl-result-ring 5.5s alternate infinite var(--cl-ease); } .cl-four__orbit::before, .cl-four__orbit::after { position: absolute; top: 50%; width: 40px; aspect-ratio: 1; border-radius: 50%; content: ""; filter: blur(1px); transform: translateY(-50%); } .cl-four__orbit::before { left: -1%; background: radial-gradient(circle, #f4ffd7 0 7%, #a7ff4f 24%, oklch(79% 0.24 142 / 0.36) 48%, transparent 72%); box-shadow: 0 0 24px #9eff4f, 0 0 72px oklch(79% 0.24 142 / 0.68); } .cl-four__orbit::after { right: -1%; background: radial-gradient(circle, #fff1ff 0 7%, #c971ff 24%, oklch(69% 0.23 309 / 0.38) 48%, transparent 72%); box-shadow: 0 0 24px #b45cff, 0 0 72px oklch(67% 0.24 307 / 0.72); } .cl-four__orbit svg { display: block; width: 100%; height: 100%; overflow: visible; } .cl-four__orbit ellipse { fill: none; stroke: url("#cl-result-orbit-gradient"); } .cl-four__orbit-glow { opacity: 0.74; filter: url("#cl-result-orbit-glow"); stroke-width: 13; } .cl-four__orbit-line { stroke-width: 2.5; } .cl-four__orbit-line--secondary { opacity: 0.5; stroke-width: 1.2; transform: rotate(-2deg); transform-origin: center; } .cl-four__orbit--front { z-index: 5; pointer-events: none; } .cl-four__orbit--front::before, .cl-four__orbit--front::after { content: none; } .cl-four__orbit--front path { fill: none; stroke: url("#cl-result-orbit-front-gradient"); stroke-linecap: round; stroke-width: 4; filter: drop-shadow(0 0 7px oklch(83% 0.18 310 / 0.9)) drop-shadow(0 0 18px oklch(78% 0.2 150 / 0.38)); } .cl-four__person { position: absolute; z-index: 4; top: 132px; left: 51%; width: 230px; height: 370px; margin: 0; transform: translateX(-50%); filter: drop-shadow(0 26px 28px oklch(7% 0.05 274 / 0.58)); } .cl-four__person img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; animation: cl-result-person 7s alternate infinite var(--cl-ease); } .cl-four__card { --card-bg: oklch(89% 0.07 252); --card-tilt: -1deg; --float-x: 5px; --float-y: -7px; position: relative; z-index: 5; isolation: isolate; min-height: 240px; overflow: hidden; border: 1px solid oklch(91% 0.03 284 / 0.72); border-radius: 18px; background: var(--card-bg); box-shadow: 0 24px 48px oklch(6% 0.06 273 / 0.42); color: var(--cl-ink); transform-origin: center; animation: cl-result-float 6.4s alternate infinite var(--cl-ease); } .cl-four__card::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, var(--card-bg) 0%, var(--card-bg) 62%, transparent 92%); content: ""; } .cl-four__copy { position: relative; z-index: 2; display: grid; width: min(72%, 290px); min-height: 100%; align-content: start; gap: 7px; padding: 16px; } .cl-four__copy > span { color: oklch(39% 0.13 292); font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .cl-tip-grid article > span { color: oklch(53% 0.16 302); font-size: 0.73rem; font-weight: 800; } .cl-four h3 { max-width: 11ch; margin-top: 3px; font-size: clamp(24px, 2vw, 31px); line-height: 0.98; } .cl-four__subtitle { max-width: 230px; color: oklch(34% 0.055 270); font-size: 12px; font-weight: 700; line-height: 1.32 !important; } .cl-four__result { align-self: end; max-width: 240px; margin-top: 6px !important; border-radius: 9px; background: oklch(98% 0.01 285 / 0.94); box-shadow: 0 8px 20px oklch(27% 0.05 270 / 0.12); color: var(--cl-ink) !important; font-size: 12px !important; font-weight: 800; line-height: 1.34 !important; padding: 9px 10px; } .cl-four__result strong { font-weight: 800; } .cl-four__loading { display: inline-flex; align-items: center; gap: 7px; color: oklch(38% 0.08 292) !important; font-size: 12px !important; font-weight: 800; } .cl-four__loading i { width: 8px; aspect-ratio: 1; border-radius: 50%; background: oklch(61% 0.17 302); box-shadow: 0 0 0 4px oklch(61% 0.17 302 / 0.16); animation: cl-pulse 1.1s alternate infinite var(--cl-ease); } .cl-four__card > img { position: absolute; z-index: -2; top: 0; right: -4%; width: 46%; height: 100%; object-fit: cover; object-position: 50% 18%; } .cl-four__card--twin { --card-tilt: -1deg; order: 1; } .cl-four__card--soulmate { --card-bg: oklch(85% 0.09 329); --card-tilt: 1deg; --float-x: -6px; --float-y: 8px; order: 4; border-color: oklch(79% 0.1 328); animation-delay: -1.4s; } .cl-four__card--soulmate .cl-four__result { background: oklch(96% 0.035 335 / 0.94); } .cl-four__card--energy { --card-bg: oklch(87% 0.075 294); --card-tilt: -0.8deg; --float-x: 7px; --float-y: 5px; order: 3; animation-delay: -3.2s; } .cl-four__card--role { --card-bg: oklch(90% 0.075 68); --card-tilt: 1.2deg; --float-x: -5px; --float-y: -8px; order: 2; animation-delay: -4.6s; } .cl-four__card--role > img { width: 46%; object-position: center 19%; } @media (hover: hover) { .cl-four__card:hover { z-index: 7; animation-play-state: paused; box-shadow: 0 30px 62px oklch(7% 0.06 275 / 0.48); } } .cl-compare { background: oklch(94% 0.043 308); } .cl-compare__grid { display: grid; gap: 3rem; align-items: center; } .cl-compare__copy > p:not(.cl-kicker) { max-width: 43rem; margin-top: 1.2rem; color: var(--cl-ink-soft); font-size: var(--cl-reading-size); line-height: 1.68; } .cl-compare__copy > strong { display: block; max-width: 40rem; margin-top: 1.5rem; font-size: clamp(1.15rem, calc(1.08rem + 0.3vw), 1.3rem); line-height: 1.55; } .cl-compare__portraits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .cl-compare__portraits figure { position: relative; margin: 0; overflow: hidden; border-radius: 6rem 6rem 1rem 1rem; } .cl-compare__portraits img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .cl-compare__portraits figcaption { position: absolute; right: 0.6rem; bottom: 0.6rem; left: 0.6rem; display: grid; border-radius: 0.7rem; background: oklch(97% 0.02 290); padding: 0.6rem; font-size: 0.72rem; font-weight: 700; } .cl-compare__portraits figcaption span { color: oklch(52% 0.16 302); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; } /* Celebrity Soulmate feature */ .cl-soulmate-feature { position: relative; overflow: hidden; background: oklch(15% 0.075 275); color: var(--cl-paper); } .cl-soulmate-feature__media { position: relative; height: min(116vw, 34rem); overflow: hidden; } .cl-soulmate-feature__media::after { position: absolute; inset: 0; background: linear-gradient(180deg, oklch(15% 0.075 275 / 0.04) 40%, oklch(15% 0.075 275 / 0.96) 94%), linear-gradient(90deg, oklch(15% 0.075 275 / 0.45), transparent 45%, oklch(15% 0.075 275 / 0.12)); content: ""; } .cl-soulmate-feature__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 14%; } .cl-soulmate-feature__inner { position: relative; z-index: 2; margin-top: -4.5rem; padding-bottom: clamp(4.5rem, 12vw, 7rem); } .cl-soulmate-feature__copy { max-width: 39rem; } .cl-soulmate-feature__eyebrow { color: oklch(80% 0.17 85); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } .cl-soulmate-feature h2 { margin-top: 1rem; font-size: clamp(3.5rem, 15vw, 5.5rem); font-weight: 500; letter-spacing: -0.055em; line-height: 0.92; } .cl-soulmate-feature__score { position: absolute; z-index: 4; top: clamp(1rem, 3vw, 2.5rem); right: clamp(1rem, 3vw, 3rem); display: grid; min-width: 7.5rem; justify-items: end; gap: 0.35rem; margin: 0; border: 1px solid oklch(94% 0.025 285 / 0.3); border-radius: 1.5rem; -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25); background: oklch(94% 0.025 285 / 0.13); box-shadow: inset 0 1px 0 oklch(98% 0.01 285 / 0.3), 0 1rem 3rem oklch(7% 0.05 275 / 0.28); padding: 1rem 1.1rem; } .cl-soulmate-feature__score strong { color: var(--cl-paper); font-size: clamp(3.2rem, 6vw, 5.25rem); font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: -0.07em; line-height: 0.82; } .cl-soulmate-feature__score span { color: oklch(82% 0.17 85); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; } .cl-soulmate-feature__summary, .cl-soulmate-feature__body { max-width: 37rem; color: oklch(78% 0.025 284); font-size: clamp(1.0625rem, calc(1.02rem + 0.16vw), 1.2rem); line-height: 1.62; } .cl-soulmate-feature__summary { margin-top: 1.35rem; } .cl-soulmate-feature h3 { margin-top: 1.75rem; font-size: clamp(1.45rem, 5vw, 2rem); font-weight: 750; line-height: 1.2; } .cl-soulmate-feature__body { margin-top: 0.85rem; } .cl-button--soulmate { background: oklch(82% 0.17 85); box-shadow: 0 1rem 2.4rem oklch(65% 0.16 79 / 0.24); /* Forced: the dark section sets a near-white color the button would otherwise inherit, dropping the label to ~1.7:1 on this yellow. Same guard as .cl-dating. */ color: var(--cl-ink) !important; -webkit-text-fill-color: var(--cl-ink) !important; font-size: 1rem; } .cl-button--soulmate span { transition: transform 180ms var(--cl-ease); } .cl-soulmate-feature .cl-button--soulmate { margin-top: 1.6rem; } @media (hover: hover) { .cl-button--soulmate:hover { background: oklch(86% 0.18 87); box-shadow: 0 1.3rem 2.8rem oklch(65% 0.16 79 / 0.3); } .cl-button--soulmate:hover span { transform: translateX(0.25rem); } } .cl-how { background: var(--cl-paper); } .cl-how > .cl-shell > h2 { max-width: 13ch; margin-top: 1rem; } .cl-steps { display: grid; margin: 4rem 0 0; padding: 0; list-style: none; } .cl-steps li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; border-top: 0.08rem solid var(--cl-line); padding-block: 1.6rem; } .cl-steps > li > span { display: grid; width: 2.8rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: oklch(87% 0.09 306); font-weight: 800; } .cl-steps h3 { font-size: var(--cl-supporting-heading-size); } .cl-steps p { max-width: 42rem; margin-top: 0.6rem; color: var(--cl-ink-soft); font-size: var(--cl-reading-size); line-height: 1.68; } .cl-score-guide { background: oklch(90% 0.055 257); } .cl-score-guide__grid { display: grid; gap: 3rem; } .cl-score-guide__grid > div:first-child > p:last-child { max-width: 38rem; margin-top: 1.5rem; color: var(--cl-ink-soft); font-size: var(--cl-reading-size); line-height: 1.68; } .cl-score-bands { display: grid; } .cl-score-bands div { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: 1rem; border-top: 0.08rem solid oklch(72% 0.045 265); padding-block: 1rem; } .cl-score-bands strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; } .cl-score-bands span { color: var(--cl-ink-soft); font-size: clamp(1.0625rem, calc(1.02rem + 0.14vw), 1.15rem); line-height: 1.5; } .cl-tips { background: var(--cl-paper); } .cl-tips .cl-heading-row .cl-button { justify-self: start; } .cl-tip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-top: 3.5rem; border-top: 0.08rem solid var(--cl-line); } .cl-tip-grid article { min-height: 13rem; border-bottom: 0.08rem solid var(--cl-line); padding: 1.5rem 1rem 1.5rem 0; } .cl-tip-grid h3 { margin-top: 2.5rem; font-size: var(--cl-supporting-heading-size); } .cl-tip-grid p { margin-top: 0.65rem; color: var(--cl-ink-soft); font-size: var(--cl-reading-size); line-height: 1.68; } /* Dating + about */ .cl-dating { background: oklch(23% 0.08 273); color: var(--cl-paper); } .cl-dating__grid { display: grid; gap: 3rem; align-items: center; } .cl-dating__visual { position: relative; min-height: 28rem; } .cl-dating__visual img { position: absolute; bottom: 0; width: 58%; height: 82%; border-radius: 7rem 7rem 1.5rem 1.5rem; object-fit: cover; } .cl-dating__visual img:first-child { right: 0; } .cl-dating__visual img:nth-child(2) { left: 0; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 1.5rem 2rem oklch(8% 0.03 270 / 0.4)); } .cl-dating__visual span { position: absolute; z-index: 3; top: 46%; left: 50%; transform: translate(-50%, -50%) rotate(-7deg); border-radius: 999px; background: oklch(88% 0.13 336); color: var(--cl-ink); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; padding: 0.7rem 0.85rem; text-transform: uppercase; } .cl-dating .cl-kicker { color: oklch(84% 0.13 330); } .cl-dating .cl-button--light { color: var(--cl-ink) !important; -webkit-text-fill-color: var(--cl-ink) !important; } .cl-dating .cl-button--dating-pink { background: oklch(83% 0.13 335); box-shadow: 0 1rem 2.4rem oklch(9% 0.04 270 / 0.28); color: var(--cl-ink) !important; -webkit-text-fill-color: var(--cl-ink) !important; } .cl-dating__copy > p:not(.cl-kicker) { max-width: 43rem; margin-top: 1.4rem; color: oklch(82% 0.025 275); font-size: var(--cl-reading-size); line-height: 1.72; } .cl-dating__line strong { color: var(--cl-paper); } .cl-button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.8rem; } .cl-text-link { min-height: 2.75rem; display: inline-flex; align-items: center; font-size: 0.86rem; font-weight: 800; text-underline-offset: 0.25rem; } .cl-dating__copy > small { display: block; max-width: 38rem; margin-top: 1rem; color: oklch(68% 0.025 275); font-size: 0.9375rem; line-height: 1.6; } @media (hover: hover) { .cl-dating .cl-button--dating-pink:hover { background: oklch(78% 0.16 335); box-shadow: 0 1.3rem 2.8rem oklch(9% 0.04 270 / 0.34); } } .cl-about { background: oklch(89% 0.07 307); } .cl-about__grid { display: grid; gap: 2rem; } .cl-about__grid > div:last-child { max-width: 45rem; } .cl-about__grid > div:last-child p { font-size: clamp(1.2rem, 3vw, 1.6rem); } .cl-about__grid > div:last-child p + p { margin-top: 1rem; } /* FAQ */ .cl-faq { background: var(--cl-paper); } .cl-faq__grid { display: grid; gap: 3rem; } .cl-faq__intro { align-self: start; } .cl-faq__intro > p:last-child { margin-top: 1rem; color: var(--cl-ink-soft); font-size: var(--cl-reading-size); line-height: 1.65; } .cl-faq__list { border-top: 0.08rem solid var(--cl-line); } .cl-faq details { border-bottom: 0.08rem solid var(--cl-line); } .cl-faq summary { display: grid; min-height: 4.75rem; grid-template-columns: 1fr 2rem; align-items: center; gap: 1rem; cursor: pointer; font-size: clamp(1.125rem, calc(1.06rem + 0.22vw), 1.25rem); font-weight: 800; line-height: 1.4; list-style: none; padding-block: 1.1rem; } .cl-faq summary::-webkit-details-marker { display: none; } .cl-faq summary span { position: relative; display: block; width: 1.7rem; aspect-ratio: 1; border: 0.08rem solid var(--cl-blue-deep); border-radius: 50%; background: var(--cl-blue-deep); box-shadow: 0 0.45rem 1rem oklch(42% 0.13 266 / 0.2); transition: transform 180ms var(--cl-ease), background 180ms var(--cl-ease), border-color 180ms var(--cl-ease); } .cl-faq summary span::before, .cl-faq summary span::after { position: absolute; top: 50%; left: 50%; width: 0.65rem; height: 0.08rem; transform: translate(-50%, -50%); background: var(--cl-paper); content: ""; transition: transform 220ms var(--cl-ease); } .cl-faq summary span::after { transform: translate(-50%, -50%) rotate(90deg); } .cl-faq details[open] summary span::after { transform: translate(-50%, -50%) rotate(0); } .cl-faq details > div { display: grid; grid-template-rows: 1fr; } .cl-faq details p { max-width: 48rem; padding: 0 0 1.5rem; color: var(--cl-ink-soft); font-size: var(--cl-reading-size); line-height: 1.68; } @media (hover: hover) { .cl-faq summary:hover span { transform: scale(1.06); border-color: oklch(55% 0.16 266); background: oklch(55% 0.16 266); } } /* Final CTA */ .cl-final { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, oklch(63% 0.16 282), oklch(52% 0.16 306)); color: var(--cl-paper); padding-block: clamp(6rem, 12vw, 10rem); } .cl-final__orbit { position: absolute; z-index: -1; top: 50%; left: 50%; width: min(78rem, 140vw); aspect-ratio: 2.5 / 1; transform: translate(-50%, -50%) rotate(-7deg); border: 0.12rem solid oklch(94% 0.09 340 / 0.65); border-radius: 50%; box-shadow: 0 0 3rem oklch(83% 0.16 342 / 0.45); } .cl-final__content { display: grid; justify-items: center; text-align: center; } .cl-final .cl-kicker { color: oklch(93% 0.08 340); } .cl-final h2 { max-width: 12ch; margin-top: 1rem; font-size: clamp(3rem, 10vw, 7rem); } .cl-final p:not(.cl-kicker) { max-width: 40rem; margin-top: 1.3rem; color: oklch(91% 0.025 285); font-size: 1.05rem; } .cl-final .cl-button { margin-top: 1.8rem; } .cl-final small { margin-top: 0.8rem; color: oklch(88% 0.03 285); } /* Authentication dialog */ .cl-auth { position: fixed; top: 50%; right: auto; bottom: auto; left: 50%; width: min(100% - 2rem, 32rem); max-height: min(90svh, 44rem); margin: 0; border: 0.08rem solid oklch(75% 0.05 280); border-radius: 1.5rem; background: var(--cl-paper); box-shadow: 0 3rem 8rem oklch(15% 0.04 270 / 0.35); color: var(--cl-ink); font-family: "CL Manrope", sans-serif; overflow: auto; overscroll-behavior: contain; padding: clamp(1.5rem, 5vw, 2.5rem); text-align: center; transform: translate(-50%, -50%); } .cl-auth::backdrop { background: oklch(16% 0.05 270 / 0.68); backdrop-filter: blur(0.35rem); } .cl-auth .cl-kicker { padding-inline: 2.75rem; } .cl-auth h2 { max-width: 11ch; margin: 0.8rem auto 0; font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1; } .cl-auth > p:not(.cl-kicker, .cl-auth__error) { max-width: 34ch; margin: 1rem auto 0; color: var(--cl-ink-soft); } .cl-auth__close { position: absolute; top: 1rem; right: 1rem; display: grid; width: 2.75rem; aspect-ratio: 1; place-items: center; border: 0; border-radius: 50%; background: oklch(92% 0.025 280); color: var(--cl-ink); cursor: pointer; font-size: 1.5rem; } .cl-auth__actions { display: grid; width: 100%; gap: 0.75rem; margin-top: 1.5rem; } .cl-auth__actions button { display: flex; min-height: 3.5rem; align-items: center; justify-content: center; gap: 0.75rem; border: 0.08rem solid var(--cl-line); border-radius: 999px; background: oklch(97% 0.01 285); color: var(--cl-ink); cursor: pointer; font-weight: 800; transition: background 180ms var(--cl-ease), transform 180ms var(--cl-ease); } .cl-auth__actions img { width: 1.3rem; height: 1.3rem; object-fit: contain; } .cl-auth__error { min-height: 1.5rem; margin-top: 0.75rem !important; color: var(--cl-error); font-size: 0.8rem; font-weight: 700; } .cl-auth > small { display: block; max-width: 38ch; margin-inline: auto; color: var(--cl-ink-soft); font-size: 0.7rem; line-height: 1.5; } @media (max-width: 32.5rem) { .cl-auth { width: calc(100% - 1.25rem); padding: 1.5rem 1.1rem 1.25rem; border-radius: 1.25rem; } .cl-auth .cl-kicker { padding-inline: 2.25rem; } } @media (hover: hover) { .cl-auth__actions button:hover { transform: translateY(-0.1rem); background: oklch(93% 0.045 296); } } /* Motion */ @keyframes cl-spin { to { transform: rotate(1turn); } } @keyframes cl-pulse { from { transform: scale(0.82); opacity: 0.65; } to { transform: scale(1.12); opacity: 1; } } @keyframes cl-float { from { transform: translate3d(0, -0.35rem, var(--cl-z, 0)); } to { transform: translate3d(0.35rem, 0.55rem, var(--cl-z, 0)); } } @keyframes cl-result-ring { from { opacity: 0.82; } to { opacity: 1; } } @keyframes cl-result-person { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -8px, 0); } } @keyframes cl-result-float { from { transform: translate3d(0, 0, 0) rotate(var(--card-tilt)); } to { transform: translate3d(var(--float-x), var(--float-y), 0) rotate(calc(var(--card-tilt) + 0.7deg)); } } @keyframes cl-card-orbit { 0%, 100% { filter: blur(0.2px); opacity: 0.96; transform: translate(-50%, -50%) translate3d(var(--orbit-x), 0, 36px) scale(0.98) rotateY(-12deg) rotateZ(var(--card-tilt)); } 12.5% { filter: blur(0); opacity: 1; transform: translate(-50%, -50%) translate3d(var(--orbit-x-diagonal), var(--orbit-y-diagonal), 92px) scale(1.07) rotateY(-7deg) rotateZ(calc(var(--card-tilt) + 1deg)); } 25% { filter: blur(0); opacity: 1; transform: translate(-50%, -50%) translate3d(0, var(--orbit-y), 132px) scale(1.12) rotateY(0deg) rotateZ(var(--card-tilt)); } 37.5% { filter: blur(0); opacity: 1; transform: translate(-50%, -50%) translate3d(calc(0px - var(--orbit-x-diagonal)), var(--orbit-y-diagonal), 92px) scale(1.07) rotateY(7deg) rotateZ(calc(var(--card-tilt) - 1deg)); } 50% { filter: blur(0.35px); opacity: 0.93; transform: translate(-50%, -50%) translate3d(calc(0px - var(--orbit-x)), 0, 18px) scale(0.95) rotateY(13deg) rotateZ(var(--card-tilt)); } 62.5% { filter: blur(0.75px); opacity: 0.84; transform: translate(-50%, -50%) translate3d(calc(0px - var(--orbit-x-diagonal)), calc(0px - var(--orbit-y-diagonal)), -74px) scale(0.86) rotateY(9deg) rotateZ(calc(var(--card-tilt) + 0.6deg)); } 75% { filter: blur(1.05px); opacity: 0.76; transform: translate(-50%, -50%) translate3d(0, calc(0px - var(--orbit-y)), -128px) scale(0.8) rotateY(0deg) rotateZ(var(--card-tilt)); } 87.5% { filter: blur(0.75px); opacity: 0.84; transform: translate(-50%, -50%) translate3d(var(--orbit-x-diagonal), calc(0px - var(--orbit-y-diagonal)), -74px) scale(0.86) rotateY(-9deg) rotateZ(calc(var(--card-tilt) - 0.6deg)); } } @keyframes cl-card-depth { 0%, 49% { z-index: 6; } 50%, 99% { z-index: 3; } 100% { z-index: 6; } } @keyframes cl-card-drift { 0%, 100% { transform: translate(-50%, -50%) translate3d(var(--anchor-x), var(--anchor-y), var(--anchor-z)) scale(var(--card-scale)) rotateX(var(--card-pitch)) rotateY(var(--card-yaw)) rotateZ(var(--card-tilt)); } 50% { transform: translate(-50%, -50%) translate3d(calc(var(--anchor-x) + var(--drift-x)), calc(var(--anchor-y) + var(--drift-y)), calc(var(--anchor-z) + 14px)) scale(calc(var(--card-scale) + 0.018)) rotateX(calc(var(--card-pitch) * -0.6)) rotateY(calc(var(--card-yaw) * -0.65)) rotateZ(calc(var(--card-tilt) + 0.55deg)); } } /* Mobile hero: keep every portrait and label inside the visual stage. */ @media (max-width: 41.99rem) { .cl-hero { min-height: 0; padding: 98px 0 16px; } .cl-hero__layout { gap: 4px; } .cl-page .cl-button--upload { margin-top: 16px; } .cl-orbit { min-height: 430px; margin-top: 2px; } .cl-orbit__halo { top: 50%; left: 48%; width: min(96%, 360px); } .cl-orbit__floor { right: 4%; bottom: 0; left: 8%; } .cl-orbit__person { bottom: 0; left: 42%; height: 370px; } .cl-orbit__ring { top: 51%; left: 48%; width: 108%; height: 42%; } .cl-match { width: 216px; grid-template-columns: 44px minmax(0, 1fr); gap: 7px; } .cl-match__portrait { width: 44px; } .cl-match__meta { width: 100%; min-width: 0; } .cl-match__meta small { max-width: 100%; font-size: 10px; line-height: 1.1; padding: 6px 8px; white-space: normal; } .cl-match__meta strong { margin-top: 4px; font-size: 24px; } .cl-match__meta > span { font-size: 12px; } .cl-match--one { top: 46%; right: 12px; grid-template-columns: minmax(0, 1fr) 44px; } .cl-match--one .cl-match__portrait { grid-row: 1; grid-column: 2; } .cl-match--one .cl-match__meta { grid-row: 1; grid-column: 1; justify-items: end; text-align: right; } .cl-match--one .cl-match__meta small { text-align: right; } .cl-match--two { top: 7%; right: 0; left: auto; } .cl-match--three { top: 64%; bottom: auto; left: 8px; } .cl-match--three .cl-match__meta strong, .cl-match--three .cl-match__meta > span { color: var(--cl-paper); text-shadow: 0 1px 2px oklch(14% 0.06 270 / 0.9), 0 0 12px oklch(14% 0.06 270 / 0.7); } .cl-reel { margin-top: 0; } .cl-dating .cl-button-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; } .cl-dating .cl-button-row .cl-button { width: 100%; min-height: 56px; padding: 14px 20px; font-size: 16px; } .cl-upload { border-radius: 22px; padding: 12px; } .cl-upload__tabs { border-radius: 16px; padding: 4px; } .cl-upload__tab { min-height: 60px; border-radius: 12px; font-size: 13px; padding: 10px 8px; } .cl-upload__panel { padding-top: 18px; } .cl-upload__instruction { font-size: 16px; } .cl-upload__drop { min-height: 210px; margin-top: 14px; border-radius: 17px; padding: 16px; } .cl-upload__empty strong { font-size: 18px; } .cl-upload__empty > span:last-child, .cl-upload__preview span { font-size: 13px; } .cl-upload__tip { align-items: flex-start; justify-content: flex-start; font-size: 13px; } } /* Tablet */ @media (min-width: 42rem) { .cl-shell { width: min(100% - 3rem, 86rem); } .cl-hero__layout { grid-template-columns: minmax(19rem, 0.85fr) minmax(24rem, 1.15fr); } .cl-hero { padding-top: 9.5rem; } .cl-hero h1 { font-size: clamp(3.7rem, 6.2vw, 4.35rem); } .cl-hero__lead { margin-top: 1.4rem !important; font-size: 1.7rem; } .cl-button--upload { margin-top: 1.8rem; } .cl-orbit { min-height: 44rem; } .cl-orbit__person { bottom: -7rem; left: 53%; width: auto; height: 49rem; max-height: none; } .cl-match { grid-template-columns: 6.75rem 1fr; } .cl-match__portrait { width: 6.75rem; } .cl-match--one { top: 31%; right: 2.5rem; } .cl-match--two { top: 4%; left: 55%; } .cl-match--three { bottom: 18%; left: 3%; } .cl-reel { grid-template-columns: repeat(4, 1fr); margin-top: 0.5rem; border-radius: 1.2rem; } .cl-reel a { border-right: 0.08rem solid oklch(80% 0.04 278); border-bottom: 0; } .cl-reel a:nth-child(2n) { border-right: 0.08rem solid oklch(80% 0.04 278); } .cl-reel a:last-child { border-right: 0; } .cl-result__grid, .cl-vibe, .cl-movie, .cl-poster__grid, .cl-compare__grid, .cl-score-guide__grid, .cl-dating__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-result__grid--reverse .cl-result__portrait-wrap { grid-column: 2; } .cl-result__grid--reverse .cl-result__content { grid-row: 1; grid-column: 1; } .cl-result__portrait-wrap, .cl-result__portrait-wrap img { min-height: 41rem; } .cl-vibe__portrait, .cl-vibe__portrait img { min-height: 43rem; } .cl-movie__poster { max-width: 29rem; } .cl-heading-row { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr); } .cl-explain__heading { grid-template-columns: 13rem minmax(0, 1fr); align-items: start; gap: 2rem; } .cl-explain__heading > p:last-child { margin: 0; } .cl-four { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 1010px; padding: 480px 18px 18px; } .cl-four__headline { top: 30px; font-size: clamp(58px, 8vw, 76px); } .cl-four__person { top: 120px; width: 280px; height: 390px; } .cl-four__orbit { top: 205px; width: 790px; height: 300px; } .cl-four__card { min-height: 250px; } .cl-steps li { grid-template-columns: 4rem 1fr; padding-block: 2rem; } .cl-about__grid { grid-template-columns: 0.75fr 1.25fr; } .cl-faq__grid { grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.28fr); } .cl-faq__intro { position: sticky; top: 2rem; } } /* Desktop */ @media (min-width: 68rem) { body[class*="page-template-page-celebrity-look-alike-finder"] .header { padding-block: 0.8rem; } body[class*="page-template-page-celebrity-look-alike-finder"] .header__wrapper { padding-block: 0.75rem; } .cl-explain { scroll-margin-top: 8rem; } .cl-explain > .cl-shell { width: min(100% - 3rem, 118rem); } .cl-hero { min-height: 50rem; padding-top: 10rem; padding-bottom: 0; } .cl-hero__layout, .cl-hero > .cl-reel { width: min(100% - 3rem, 117rem); } .cl-hero__layout { min-height: 42.5rem; grid-template-columns: 42rem minmax(0, 1fr); } .cl-hero__copy { max-width: 40rem; } .cl-hero h1 { font-size: clamp(5.4rem, 4.1vw, 6.2rem); } .cl-hero__lead { margin-top: 1.8rem !important; font-size: 1.7rem; } .cl-button--upload { margin-top: 2rem; } .cl-hero__body { font-size: clamp(2rem, 1.45vw, 2.2rem); } .cl-orbit { min-height: 42.5rem; margin-left: -10rem; } .cl-orbit__person { bottom: -12.5rem; left: 49%; width: auto; height: 53rem; max-height: none; } .cl-orbit__ring { width: 110%; height: 46%; } .cl-match__portrait { width: 9.4rem; } .cl-match { grid-template-columns: 9.4rem 1fr; } .cl-match__meta strong { font-size: 2.8rem; } .cl-match__meta > span { font-size: 1.25rem; } .cl-match--one { top: 35%; right: 1%; } .cl-match--two { top: 8%; right: 13%; left: auto; } .cl-match--three { bottom: 15%; left: 13%; grid-template-columns: max-content 9.4rem; } .cl-match--three .cl-match__portrait { grid-row: 1; grid-column: 2; } .cl-match--three .cl-match__meta { grid-row: 1; grid-column: 1; justify-items: end; text-align: right; } .cl-reel { margin-top: 0.8rem; border-radius: 1.4rem 1.4rem 0 0; box-shadow: 0 -1.2rem 3rem oklch(32% 0.07 270 / 0.16); } .cl-reel a { min-height: 7.2rem; } .cl-tool > .cl-shell { width: min(calc(100% - 48px), 1180px); } .cl-tool__layout { grid-template-columns: minmax(360px, 430px) minmax(520px, 620px); justify-content: space-between; gap: 72px; } .cl-upload { width: 100%; max-width: 620px; justify-self: end; padding: 22px; } .cl-analysis > .cl-shell { display: grid; grid-template-columns: 1fr 0.8fr; grid-template-areas: "copy visual" "steps visual"; align-items: center; gap: 2rem 6rem; } .cl-analysis__top { grid-area: copy; } .cl-analysis__visual { grid-area: visual; width: 100%; } .cl-analysis__steps { grid-area: steps; } .cl-result__grid, .cl-vibe, .cl-movie, .cl-poster__grid, .cl-compare__grid, .cl-score-guide__grid, .cl-dating__grid { gap: 7rem; } .cl-soulmate-feature { min-height: clamp(42rem, 48vw, 54rem); } .cl-soulmate-feature__media { position: absolute; inset: 0 0 0 42%; height: auto; } .cl-soulmate-feature__media::after { background: linear-gradient(90deg, oklch(15% 0.075 275) 0%, oklch(15% 0.075 275 / 0.94) 16%, oklch(15% 0.075 275 / 0.48) 52%, oklch(15% 0.075 275 / 0.12) 100%); } .cl-soulmate-feature__media img { object-position: center 18%; } .cl-soulmate-feature__inner { display: flex; min-height: inherit; align-items: center; margin-top: 0; padding-block: 5.5rem; } .cl-soulmate-feature__copy { width: 46%; } .cl-soulmate-feature h2 { font-size: clamp(4.75rem, 5.5vw, 6.8rem); } .cl-result__portrait-wrap, .cl-result__portrait-wrap img { min-height: 48rem; } .cl-four { display: block; height: 680px; min-height: 0; margin-top: 40px; border-color: oklch(61% 0.09 282 / 0.46); box-shadow: 0 -18px 52px oklch(90% 0.05 292 / 0.3), 0 28px 78px oklch(22% 0.08 275 / 0.27); padding: 0; perspective: 1680px; perspective-origin: 50% 55%; } .cl-four__headline { top: 22px; width: calc(100% - 56px); max-width: 1020px; transform: translateX(-50%) scaleX(0.86); color: oklch(92% 0.025 292); font-family: "DIN Condensed", "Arial Narrow", Impact, "CL Manrope", sans-serif; font-size: clamp(70px, 6vw, 94px); font-stretch: condensed; font-weight: 800; letter-spacing: -0.035em; line-height: 0.84; text-shadow: 0 10px 32px oklch(8% 0.06 275 / 0.28); } .cl-four__orbit { top: 62%; width: 84%; height: 48%; transform: translate(-50%, -50%); } .cl-four__orbit:not(.cl-four__orbit--front) { opacity: 0.82; } .cl-four__orbit-glow { opacity: 0.58; stroke-width: 10; } .cl-four__orbit-line { stroke-width: 2; } .cl-four__orbit--front path { stroke-width: 3.2; filter: drop-shadow(0 0 6px oklch(83% 0.18 310 / 0.72)) drop-shadow(0 0 14px oklch(78% 0.2 150 / 0.28)); } .cl-four__person { top: auto; bottom: -155px; left: 50%; width: 334px; height: 700px; } .cl-four__card { --anchor-x: 0px; --anchor-y: 0px; --anchor-z: 0px; --card-scale: 1; --card-yaw: 0deg; --card-pitch: 0deg; --drift-x: 12px; --drift-y: -10px; position: absolute; top: 62%; left: 50%; width: 340px; min-height: 196px; backface-visibility: hidden; animation: cl-card-drift 9s var(--cl-ease) infinite; transform-style: preserve-3d; will-change: transform, filter, opacity; } .cl-four__card--twin { --anchor-x: -342px; --anchor-y: -112px; --anchor-z: -82px; --card-scale: 0.8; --card-yaw: 12deg; --card-pitch: -1.5deg; --drift-x: 10px; --drift-y: -6px; z-index: 3; border-color: oklch(82% 0.16 151 / 0.68); box-shadow: -16px 10px 42px oklch(75% 0.2 146 / 0.18), 0 22px 42px oklch(6% 0.06 273 / 0.34); filter: blur(0.35px) saturate(0.98); opacity: 0.93; } .cl-four__card--soulmate { --anchor-x: 345px; --anchor-y: 116px; --anchor-z: 104px; --card-scale: 1.05; --card-yaw: -11deg; --card-pitch: 1deg; --drift-x: 8px; --drift-y: -8px; z-index: 6; width: 340px; min-height: 200px; border-color: oklch(82% 0.14 326 / 0.88); box-shadow: 18px 14px 54px oklch(70% 0.22 310 / 0.25), 0 28px 52px oklch(6% 0.06 273 / 0.44); animation-delay: -6s; } .cl-four__card--energy { --anchor-x: -345px; --anchor-y: 116px; --anchor-z: 104px; --card-scale: 1.05; --card-yaw: 11deg; --card-pitch: 1deg; --drift-x: -8px; --drift-y: 8px; z-index: 6; width: 340px; min-height: 200px; border-color: oklch(84% 0.17 150 / 0.9); box-shadow: -18px 14px 52px oklch(76% 0.21 145 / 0.25), 0 28px 52px oklch(6% 0.06 273 / 0.44); animation-delay: -4s; } .cl-four__card--role { --anchor-x: 342px; --anchor-y: -112px; --anchor-z: -82px; --card-scale: 0.8; --card-yaw: -12deg; --card-pitch: -1.5deg; --drift-x: -10px; --drift-y: 6px; z-index: 3; width: 340px; min-height: 200px; border-color: oklch(79% 0.11 68 / 0.72); box-shadow: 16px 10px 44px oklch(72% 0.14 65 / 0.18), 0 22px 42px oklch(6% 0.06 273 / 0.34); filter: blur(0.35px) saturate(0.98); opacity: 0.93; animation-delay: -2s; } .cl-four__copy { width: 72%; min-height: 100%; gap: 5px; padding: 13px; } .cl-four__copy > span { font-size: 9px; } .cl-four h3 { font-size: 22px; } .cl-four__subtitle { display: block; max-width: 225px; font-size: 11px; line-height: 1.3 !important; } .cl-four__loading { display: none; } .cl-four__result { width: auto; max-width: 230px; margin-top: 5px !important; font-size: 11.5px !important; line-height: 1.35 !important; padding: 8px 9px; white-space: normal; } .cl-steps { grid-template-columns: repeat(3, 1fr); border-top: 0.08rem solid var(--cl-line); } .cl-steps li { grid-template-columns: 1fr; align-content: start; border-top: 0; border-right: 0.08rem solid var(--cl-line); padding: 2rem; } .cl-steps li:first-child { padding-left: 0; } .cl-steps li:last-child { border-right: 0; } .cl-tip-grid article { padding-right: 2rem; } .cl-faq__grid { gap: 8rem; } } @media (prefers-reduced-motion: reduce) { .cl-page *, .cl-page *::before, .cl-page *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (prefers-reduced-motion: reduce) and (min-width: 68rem) { .cl-four__orbit, .cl-four__person img, .cl-four__card { animation: none !important; } .cl-four__card { transform: translate(-50%, -50%) translate3d(var(--anchor-x), var(--anchor-y), var(--anchor-z)) scale(var(--card-scale)) rotateX(var(--card-pitch)) rotateY(var(--card-yaw)) rotateZ(var(--card-tilt)); } } /* Crush-result finish pass: portrait variety, clean hero framing, and CTA hierarchy. */ .cl-crush-silhouette { --cl-head-x: 45%; --cl-head-y: 36%; --cl-face-size: 18% 20%; --cl-hair-size: 25% 27%; --cl-body-x: 48%; --cl-body-y: 94%; --cl-body-size: 48% 53%; --cl-silhouette-skin: oklch(66% 0.065 38); --cl-silhouette-hair: oklch(22% 0.035 272); --cl-silhouette-shirt: oklch(32% 0.09 255); --cl-scene-a: oklch(38% 0.09 177); --cl-scene-b: oklch(20% 0.06 277); inset: -7%; background: radial-gradient(circle at 14% 20%, var(--cl-scene-a) 0 5%, transparent 24%), radial-gradient(circle at 86% 12%, oklch(75% 0.08 73 / 0.55) 0 3%, transparent 17%), linear-gradient(145deg, var(--cl-scene-a), var(--cl-scene-b) 62%); filter: blur(1.55rem) saturate(0.58) contrast(0.88); transform: scale(1.14); } .cl-crush-silhouette::before { position: absolute; inset: -4%; background: radial-gradient(ellipse var(--cl-hair-size) at var(--cl-head-x) calc(var(--cl-head-y) - 4%), var(--cl-silhouette-hair) 0 58%, transparent 75%), radial-gradient(ellipse var(--cl-face-size) at var(--cl-head-x) var(--cl-head-y), var(--cl-silhouette-skin) 0 56%, transparent 74%), radial-gradient(ellipse var(--cl-body-size) at var(--cl-body-x) var(--cl-body-y), var(--cl-silhouette-shirt) 0 58%, transparent 76%); content: ""; } .cl-crush-silhouette::after { position: absolute; inset: -4%; background: linear-gradient(110deg, oklch(91% 0.05 75 / 0.08), transparent 28% 72%, oklch(8% 0.035 275 / 0.28)), linear-gradient(180deg, transparent 42%, oklch(9% 0.035 275 / 0.22)); content: ""; } .cl-crush-silhouette--1 { --cl-head-x: 43%; --cl-head-y: 37%; --cl-face-size: 17% 21%; --cl-hair-size: 24% 30%; --cl-body-x: 47%; --cl-body-y: 96%; --cl-body-size: 47% 54%; } .cl-crush-silhouette--2 { --cl-head-x: 58%; --cl-head-y: 33%; --cl-face-size: 20% 19%; --cl-hair-size: 27% 20%; --cl-body-x: 54%; --cl-body-size: 54% 48%; --cl-silhouette-skin: oklch(73% 0.052 54); --cl-silhouette-hair: oklch(31% 0.055 38); --cl-silhouette-shirt: oklch(29% 0.07 325); --cl-scene-a: oklch(36% 0.075 24); --cl-scene-b: oklch(18% 0.05 314); } .cl-crush-silhouette--3 { --cl-head-x: 42%; --cl-head-y: 39%; --cl-face-size: 16% 23%; --cl-hair-size: 22% 31%; --cl-body-x: 43%; --cl-body-y: 98%; --cl-body-size: 43% 55%; --cl-silhouette-skin: oklch(59% 0.072 42); --cl-silhouette-hair: oklch(17% 0.025 272); --cl-silhouette-shirt: oklch(38% 0.08 188); --cl-scene-a: oklch(52% 0.09 82); --cl-scene-b: oklch(18% 0.055 239); } .cl-crush-silhouette--4 { --cl-head-x: 54%; --cl-head-y: 35%; --cl-face-size: 21% 20%; --cl-hair-size: 31% 25%; --cl-body-x: 57%; --cl-body-y: 92%; --cl-body-size: 57% 51%; --cl-silhouette-skin: oklch(77% 0.048 63); --cl-silhouette-hair: oklch(42% 0.066 58); --cl-silhouette-shirt: oklch(32% 0.09 346); --cl-scene-a: oklch(38% 0.09 314); --cl-scene-b: oklch(17% 0.05 30); } .cl-crush-silhouette--hero { --cl-head-x: 55%; --cl-head-y: 35%; --cl-face-size: 19% 21%; --cl-hair-size: 28% 28%; --cl-body-x: 52%; --cl-body-y: 95%; --cl-body-size: 51% 52%; inset: 0.35rem; z-index: 1; border-radius: calc(1.8rem - 0.35rem); clip-path: none; filter: blur(1.25rem) saturate(0.54) contrast(0.86); transform: scale(1.18); } /* The privacy blur is clipped inside the card; this frame is painted last. */ .cl-crush-result__intro .cl-crush-face--locked { isolation: isolate; overflow: hidden; border: 0.35rem solid transparent; background: oklch(21% 0.055 276); background-clip: padding-box; box-shadow: 0 1.4rem 3rem oklch(8% 0.045 275 / 0.38); } .cl-crush-result__intro .cl-crush-face--locked::before { position: absolute; inset: -0.02rem; z-index: 5; border: 0.35rem solid oklch(97% 0.01 290); border-radius: inherit; box-shadow: inset 0 0 0 0.08rem oklch(78% 0.035 287 / 0.36); content: ""; pointer-events: none; } .cl-crush-result__intro .cl-crush-face--locked::after { inset: 0.35rem; z-index: 2; border-radius: calc(1.8rem - 0.35rem); background: oklch(13% 0.045 276 / 0.42); pointer-events: none; } .cl-crush-result__intro .cl-crush-face--locked > .cl-crush-lock, .cl-crush-result__intro .cl-crush-face--locked > strong { z-index: 6; } .cl-crush-sticky__button { min-height: 4.6rem; border-color: oklch(67% 0.12 257 / 0.42); background: #8eb1f7; box-shadow: 0 1.2rem 2.8rem oklch(58% 0.14 257 / 0.3); color: oklch(22% 0.07 273); font-size: 1.6rem; font-weight: 850; line-height: 1.15; } /* The shared [type="button"] reset uses `font: inherit`, which would otherwise shrink the CTA label back to the base 1rem; restore a readable button font. */ .cl-crush-sticky__button[type="button"] { font-size: 1.6rem; font-weight: 850; line-height: 1.15; } .cl-crush-card__footer { min-height: 13rem; align-content: center; align-items: center; justify-content: center; margin-top: 0; padding: 3rem clamp(3.8rem, 5vw, 5.6rem); } .cl-crush-card__footer button { color: oklch(44% 0.11 297); } .cl-crush-card__footer a { border-radius: 999px; background: oklch(91% 0.105 21); color: oklch(29% 0.105 20); font-weight: 850; padding: 0.7rem 1.15rem; text-decoration: none; } @media (hover: hover) { .cl-crush-sticky__button:hover { background: #7ea3ef; box-shadow: 0 1.4rem 3rem oklch(54% 0.15 257 / 0.38); } .cl-crush-card__footer a:hover { background: oklch(86% 0.14 21); } } @media (max-width: 47.99rem) { .cl-crush-sticky__button { min-height: 4.2rem; font-size: 1.4rem; } .cl-crush-sticky__button[type="button"] { font-size: 1.4rem; } .cl-crush-card__footer { min-height: 13.5rem; flex-direction: column; gap: 0.8rem; padding: 2.4rem 1.6rem; } /* On phones show both app buttons together in the handoff (iPhone primary, Android secondary) and drop the QR card; the sticky blue CTA stays. */ .cl-crush-primary-handoff .cl-crush-platform--ios, .cl-crush-primary-handoff .cl-crush-platform--android { display: flex; min-height: 0; padding: 1.3rem 1.6rem; } .cl-page .cl-crush-primary-handoff .cl-crush-platform--desktop { display: none; } .cl-crush-primary-handoff .cl-crush-platform--ios { background: oklch(20% 0.06 274); box-shadow: 0 1rem 2.2rem oklch(15% 0.05 274 / 0.3); } .cl-crush-primary-handoff .cl-crush-platform--ios strong { color: #fff; } .cl-crush-primary-handoff .cl-crush-platform--ios small { color: oklch(85% 0.03 285); } .cl-crush-primary-handoff .cl-crush-platform--android { border: 0.15rem solid oklch(45% 0.06 274 / 0.45); background: transparent; box-shadow: none; } .cl-crush-primary-handoff .cl-crush-platform--android strong { color: oklch(26% 0.06 274); } .cl-crush-primary-handoff .cl-crush-platform--android small { color: oklch(45% 0.04 285); } /* Android now has its own button above; keep only the Return link here. */ .cl-crush-card__footer a { display: none; } } /* ========================================================================== Illustrative lookalike cards (dating-app profile style, blurred previews) Injected into .cl-crush-match-grid by js/celebrity-lookalike-cards.js ========================================================================== */ .cl-look-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid oklch(62% 0.05 255 / 0.35); border-radius: 1.6rem; background: linear-gradient(180deg, #163461 0%, #0e2545 100%); box-shadow: 0 1.6rem 3.4rem oklch(20% 0.06 265 / 0.28); color: #eef4fc; text-align: left; } .cl-look-card__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0c1f3b; } .cl-look-card__portrait { position: absolute; inset: -18px; background: radial-gradient(34% 26% at 50% 32%, hsl(var(--ll-hue, 210) 45% 80%) 0%, transparent 60%), radial-gradient(72% 62% at 50% 104%, hsl(var(--ll-hue, 210) 42% 46%) 0%, transparent 72%), linear-gradient(180deg, hsl(calc(var(--ll-hue, 210) + 18) 38% 34%), hsl(var(--ll-hue, 210) 32% 16%)); filter: blur(18px) saturate(1.08); transform: scale(1.06); } .cl-look-card__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, oklch(20% 0.05 265 / 0.05) 40%, oklch(14% 0.05 265 / 0.55)); } .cl-look-card__verified, .cl-look-card__lock { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 999px; font-size: 1.1rem; font-weight: 800; padding: 0.5rem 0.85rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .cl-look-card__verified { top: 1rem; left: 1rem; background: oklch(78% 0.14 178 / 0.92); color: #062a26; } .cl-look-card__lock { bottom: 2.8rem; left: 1rem; background: oklch(18% 0.04 265 / 0.62); color: #dbe6f6; font-weight: 700; } .cl-look-card__like { position: absolute; z-index: 2; top: 0.8rem; right: 0.8rem; display: grid; width: 3.4rem; height: 3.4rem; place-items: center; border: 0; border-radius: 50%; background: oklch(18% 0.04 265 / 0.55); color: #fff; cursor: pointer; font-size: 1.7rem; line-height: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 160ms var(--cl-ease), background 160ms var(--cl-ease); } .cl-look-card__dots { position: absolute; z-index: 2; bottom: 1.1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; } .cl-look-card__dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: oklch(100% 0 0 / 0.4); } .cl-look-card__dots i.is-on { background: #fff; } .cl-look-card__body { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.4rem 1.5rem 1.5rem; } .cl-look-card__name { margin: 0; font-size: 1.85rem; font-weight: 800; letter-spacing: -0.01em; } .cl-look-card__pronouns { margin-left: 0.5rem; color: #9db3d1; font-size: 1.1rem; font-weight: 600; } .cl-look-card__row { display: flex; align-items: center; gap: 0.7rem; margin: 0; color: #cdd9ec; font-size: 1.3rem; font-weight: 600; } .cl-look-card__ico { flex: 0 0 auto; opacity: 0.85; font-size: 1.15rem; } .cl-look-card__tags { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0.3rem 0 0; padding: 0; list-style: none; } .cl-look-card__tag { display: inline-flex; align-items: center; gap: 0.42rem; border: 1px solid oklch(100% 0 0 / 0.14); border-radius: 999px; background: oklch(100% 0 0 / 0.06); color: #e4edfa; font-size: 1.15rem; font-weight: 700; padding: 0.5rem 0.85rem; } .cl-look-card__foot { display: flex; align-items: center; gap: 1rem; margin-top: 0.6rem; padding-top: 1.1rem; border-top: 1px solid oklch(100% 0 0 / 0.1); } .cl-look-ring { flex: 0 0 auto; width: 4.6rem; height: 4.6rem; } .cl-look-ring__track { fill: none; stroke: oklch(100% 0 0 / 0.14); stroke-width: 4; } .cl-look-ring__value { fill: none; stroke: oklch(80% 0.14 178); stroke-width: 4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; } .cl-look-ring__text { fill: oklch(84% 0.13 178); font-size: 12px; font-weight: 800; text-anchor: middle; } .cl-look-card__cta { color: #b9c8e0; font-size: 1.2rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } @media (hover: hover) { .cl-look-card__like:hover { transform: scale(1.08); background: oklch(60% 0.2 12 / 0.85); } } @media (max-width: 34rem) { .cl-look-card__name { font-size: 1.65rem; } .cl-look-card__row { font-size: 1.2rem; } } /* ========================================================================== Mobile refinements for the twin "Meet my matches" reveal (personalised path only — the generic/landing view is left untouched). Scoped via the "Why they are your type" facts label and the injected .cl-look-card cards. ========================================================================== */ @media (max-width: 47.99rem) { /* Issue 1: the personalised "My type / Drawn to / Attracted to" chips were big rounded pills that ate the screen. Show them as a compact, left-aligned definition list instead. */ .cl-crush-result__intro .cl-crush-facts[aria-label="Why they are your type"] { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; max-width: 46rem; margin-inline: auto; } .cl-crush-result__intro .cl-crush-facts[aria-label="Why they are your type"] > span { display: block; line-height: 1.45; align-items: flex-start; justify-content: flex-start; gap: 0.6rem; border: 0; border-top: 0.08rem solid oklch(67% 0.06 291 / 0.2); border-radius: 0; background: transparent; padding: 0.55rem 0.2rem; font-size: 1.25rem; text-align: left; } .cl-crush-result__intro .cl-crush-facts[aria-label="Why they are your type"] > span:last-child { border-bottom: 0.08rem solid oklch(67% 0.06 291 / 0.2); } .cl-crush-result__intro .cl-crush-facts[aria-label="Why they are your type"] b { margin-right: 0.35rem; flex: 0 0 auto; line-height: 1.4; } .cl-crush-result__intro .cl-crush-facts[aria-label="Why they are your type"] .cl-crush-facts__key { flex: 0 0 auto; min-width: 0; white-space: nowrap; color: oklch(72% 0.03 285); } /* Issue 2: the personalised profile cards were smashed into a 2-column grid. Lay them out in a single swipeable row. */ .cl-crush-result > .cl-crush-match-set .cl-crush-match-grid:has(.cl-look-card) { display: flex; grid-template-columns: none; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-padding-inline: 1.6rem; padding-bottom: 1rem; margin-inline: -0.4rem; padding-inline: 0.4rem; } .cl-crush-result > .cl-crush-match-set .cl-crush-match-grid:has(.cl-look-card) > .cl-look-card { flex: 0 0 80%; max-width: 32rem; scroll-snap-align: center; } } /* Match the mobile App Store CTA on the result review page. */ .cl-mobile-signup { display: none; } @media (max-width: 680px) { .cl-page { padding-bottom: calc(112px + env(safe-area-inset-bottom)); } .cl-mobile-signup { position: fixed; z-index: 45; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border: 1px solid oklch(42% .1 269); border-radius: 20px; color: oklch(99.2% .007 300); background: oklch(29% .11 269); box-shadow: 0 18px 50px oklch(20% .08 276 / .4); } .cl-mobile-signup > span { min-width: 0; font-size: 13px; line-height: 1.2; font-weight: 700; } .cl-mobile-signup > a { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 44px; padding: 11px 15px; border-radius: 14px; color: oklch(29% .11 269); background: oklch(99.2% .007 300); font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none; } .cl-mobile-signup > a:focus-visible { outline: 3px solid oklch(84% .14 326); outline-offset: 3px; } body.cl-results-active .cl-mobile-signup, body.cl-crush-active .cl-mobile-signup { display: none; } } /* Dismissible landing invitation; hidden controls never receive focus. */ .cl-mobile-signup[hidden] { display: none; } @media (max-width: 680px) { .cl-mobile-signup { padding-right: 56px; gap: 10px; } .cl-mobile-signup > span, .cl-mobile-signup > a { text-transform: uppercase; letter-spacing: 0.025em; } .cl-page .cl-mobile-signup__close { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; font-size: 24px; cursor: pointer; background: oklch(99.2% .007 300 / .1); } .cl-page .cl-mobile-signup__close svg { display: block; width: 24px; height: 24px; flex: none; } .cl-mobile-signup__close:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; } }