/* ========================================================================== Derzai Match — marketing landing (derzai-match.ru) -------------------------------------------------------------------------- Hand-written CSS, no build step: nginx serves this file verbatim. The palette, radii and gradients are lifted from the Flutter app so the landing and the app look like one product. Keep them in sync with lib/theme.dart: AppColors.cyanPrimary #007A94 AppColors.pinkAccent #C73092 dark primary #00A5C4 dark secondary #E860B9 darkSurface #071114 darkCard #0F1E24 brandGradient(dark) #071114 -> #261020 waveColors / blobColors -> --wave-* / --blob-* below BrandMark gradient #9BE8F5 -> #F3B6E3 -> #B79EF5 Dark is the DEFAULT (:root) so a visitor with JS disabled still gets the brand look; app.js writes data-theme="light" on before first paint when the visitor prefers (or picked) light. ========================================================================== */ /* ---------------------------------------------------------------- tokens -- */ :root { /* Dark theme (default). */ --bg: #071114; --bg-2: #261020; --surface: #0f1e24; --surface-2: #132630; --fg: #eaf6f9; --fg-muted: #9db3bd; --fg-faint: #6f8894; --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.18); --primary: #00a5c4; --primary-soft: #6fdcf0; --secondary: #e860b9; --secondary-soft: #f6a7dc; --violet: #8b6be8; --on-primary: #00323d; --glass: rgba(15, 30, 36, 0.62); --glass-strong: rgba(15, 30, 36, 0.86); --blob-cyan: rgba(0, 165, 196, 0.16); --blob-pink: rgba(232, 96, 185, 0.14); --wave-1: rgba(139, 107, 232, 0.35); --wave-2: rgba(232, 96, 185, 0.30); --wave-3: rgba(0, 165, 196, 0.35); --wave-opacity: 0.5; --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.30); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.38); --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.48); --shadow-glow: 0 14px 40px rgba(0, 165, 196, 0.28); /* Shared, theme-independent. */ --brand-grad: linear-gradient(135deg, #9be8f5 0%, #f3b6e3 52%, #b79ef5 100%); --accent-grad: linear-gradient(120deg, var(--primary) 0%, var(--secondary) 62%, var(--violet) 100%); --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; --page: 1180px; --gutter: clamp(18px, 5vw, 40px); --section-y: clamp(64px, 9vw, 132px); --font: "Outfit", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); color-scheme: dark; } [data-theme="light"] { --bg: #f2fcff; --bg-2: #fbe6f4; --surface: #ffffff; --surface-2: #f4fbfe; --fg: #0d1f27; --fg-muted: #4d6472; --fg-faint: #7b909c; --line: rgba(0, 60, 75, 0.12); --line-strong: rgba(0, 60, 75, 0.22); --primary: #007a94; --primary-soft: #007a94; --secondary: #c73092; --secondary-soft: #c73092; --violet: #6f4fd8; --on-primary: #ffffff; --glass: rgba(255, 255, 255, 0.68); --glass-strong: rgba(255, 255, 255, 0.9); --blob-cyan: rgba(0, 122, 148, 0.14); --blob-pink: rgba(199, 48, 146, 0.12); --wave-1: rgba(139, 107, 232, 0.28); --wave-2: rgba(199, 48, 146, 0.22); --wave-3: rgba(0, 122, 148, 0.30); --wave-opacity: 0.6; --shadow-sm: 0 2px 10px rgba(0, 60, 75, 0.08); --shadow-md: 0 10px 30px rgba(0, 60, 75, 0.12); --shadow-lg: 0 28px 70px rgba(0, 60, 75, 0.16); --shadow-glow: 0 14px 40px rgba(0, 122, 148, 0.22); /* The pastel BrandMark gradient washes out on a white page — darken it a step so the glyph keeps its contrast in light mode. */ --brand-grad: linear-gradient(135deg, #1fb2cf 0%, #d968b4 52%, #8b6be8 100%); color-scheme: light; } /* ------------------------------------------------------------------ base -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Sticky header height + breathing room for in-page anchors. */ scroll-padding-top: 96px; } body { margin: 0; min-height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: clamp(16px, 0.4vw + 15px, 17px); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* The brand backdrop: apex gradient + two ambient corner blobs, exactly the AmbientBackground widget from the app. Fixed so it never scroll-janks. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(620px 520px at 8% -6%, var(--blob-cyan), transparent 70%), radial-gradient(680px 560px at 96% 6%, var(--blob-pink), transparent 70%), linear-gradient(150deg, var(--bg) 0%, var(--bg) 42%, var(--bg-2) 100%); } img, svg { max-width: 100%; } h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } /* `ol` is included deliberately: the "how it works" steps are an ordered list for semantics, but the number is drawn as the .step__num badge — leaving the marker on renders a stray "1." outside every card. */ ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } strong { font-weight: 600; color: var(--fg); } :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 18px; border-radius: var(--r-sm); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-md); transition: top 0.2s var(--ease); } .skip-link:focus-visible { top: 16px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --------------------------------------------------------------- layout --- */ .shell { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: var(--section-y); } .section__head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); } .section__head--center { margin-inline: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--glass); color: var(--fg-muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; backdrop-filter: blur(10px); } .eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-grad); box-shadow: 0 0 0 3px rgba(0, 165, 196, 0.16); } h2.section__title { font-size: clamp(1.85rem, 3.6vw, 2.9rem); } .section__lead { margin-top: 18px; color: var(--fg-muted); font-size: clamp(1rem, 1.4vw, 1.13rem); } .grad-text { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; /* Safari occasionally clips descenders on gradient text. */ padding-bottom: 0.06em; } /* --------------------------------------------------------------- buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border: 1px solid transparent; border-radius: var(--r-md); font: inherit; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease); } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { position: relative; overflow: hidden; background: var(--accent-grad); color: #fff; box-shadow: var(--shadow-glow); } /* A single light sweep across the primary CTA on hover. */ .btn--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.28) 50%, transparent 68%); transform: translateX(-130%); pointer-events: none; } .btn--primary:hover::after { transform: translateX(130%); transition: transform 0.6s var(--ease); } [data-theme="light"] .btn--primary { color: #fff; } .btn--primary:hover { box-shadow: 0 18px 46px rgba(0, 165, 196, 0.36); } .btn--ghost { background: var(--glass); border-color: var(--line-strong); color: var(--fg); backdrop-filter: blur(10px); } .btn--ghost:hover { border-color: var(--primary); } .btn--sm { padding: 10px 18px; font-size: 0.92rem; border-radius: var(--r-sm); } /* The header CTA is the longest label on the page in Russian ("Открыть приложение"); left to wrap it doubles the header height. */ .header__cta, .nav__cta { white-space: nowrap; } .btn--wide { padding-inline: 38px; font-size: 1.05rem; } .btn__arrow { transition: transform 0.18s var(--ease); } .btn:hover .btn__arrow { transform: translateX(3px); } /* -------------------------------------------------------------- progress -- */ /* Reading-progress hairline pinned above the sticky header. app.js drives the --scroll custom property from a passive scroll listener. */ .progress { position: fixed; inset: 0 0 auto; z-index: 60; height: 3px; pointer-events: none; } .progress i { display: block; height: 100%; background: var(--accent-grad); transform: scaleX(var(--scroll, 0)); transform-origin: 0 50%; } /* ---------------------------------------------------------------- header -- */ .header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), backdrop-filter 0.25s var(--ease); } .header.is-stuck { background: var(--glass-strong); border-bottom-color: var(--line); backdrop-filter: blur(18px) saturate(140%); } .header__inner { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); min-height: 74px; } .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--fg); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; white-space: nowrap; } .brand:hover { text-decoration: none; } .brand__mark { width: 34px; height: 32px; flex: none; } /* The glyph is filled with the app's BrandMark gradient. Set on the , NOT on a `path` descendant: the glyph is drawn with , which clones into a shadow tree that descendant selectors cannot reach. `fill` is an inherited SVG property, so setting it here does reach the clone — targeting `path` silently leaves the glyph solid black. Same for .wave--*. */ .brand__mark { fill: url(#brandGradient); } .nav { display: flex; align-items: center; gap: clamp(4px, 1.2vw, 18px); margin-inline: auto; } .nav__link { padding: 8px 10px; border-radius: var(--r-sm); color: var(--fg-muted); font-size: 0.95rem; font-weight: 500; white-space: nowrap; transition: color 0.16s var(--ease), background-color 0.16s var(--ease); } .nav__link:hover { color: var(--fg); background: var(--line); text-decoration: none; } /* Scroll-spy: app.js marks the link whose section is on screen. */ .nav__link.is-active { color: var(--fg); background: var(--line); } .header__tools { display: flex; align-items: center; gap: 8px; } .icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--glass); color: var(--fg-muted); cursor: pointer; transition: color 0.16s var(--ease), border-color 0.16s var(--ease); } .icon-btn:hover { color: var(--fg); border-color: var(--primary); } .icon-btn svg { width: 19px; height: 19px; } /* Sun/moon swap: only the glyph for the theme you'd switch TO is shown. */ [data-theme="dark"] .icon-btn__sun, :root:not([data-theme="light"]) .icon-btn__sun { display: block; } [data-theme="dark"] .icon-btn__moon, :root:not([data-theme="light"]) .icon-btn__moon { display: none; } [data-theme="light"] .icon-btn__sun { display: none; } [data-theme="light"] .icon-btn__moon { display: block; } .lang { display: flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--glass); } .lang__btn { padding: 5px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--fg-faint); font: inherit; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: color 0.16s var(--ease), background-color 0.16s var(--ease); } .lang__btn:hover { color: var(--fg); } .lang__btn[aria-pressed="true"] { background: var(--accent-grad); color: #fff; } .header__cta { display: none; } .burger { display: none; } @media (max-width: 1020px) { .nav { position: fixed; inset: 74px 0 auto; z-index: 49; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 14px var(--gutter) 26px; background: var(--glass-strong); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px) saturate(140%); box-shadow: var(--shadow-lg); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s; } .nav.is-open { transform: none; opacity: 1; visibility: visible; } .nav__link { padding: 13px 12px; font-size: 1.02rem; } .nav__cta { margin-top: 12px; } .header__tools { margin-left: auto; } .burger { display: inline-grid; } } @media (min-width: 1021px) { .header__cta { display: inline-flex; } .nav__cta { display: none; } } @media (max-width: 560px) { .brand span { display: none; } } /* ------------------------------------------------------------------ hero -- */ .hero { position: relative; padding-top: clamp(36px, 6vw, 76px); padding-bottom: clamp(120px, 15vw, 210px); overflow: hidden; } /* The three.js canvas sits between the page backdrop and the hero content; a mask fades the scene out before it can collide with the wave stack. */ .hero3d { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 74%, transparent 96%); mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 74%, transparent 96%); } .hero > .shell { position: relative; z-index: 2; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(32px, 5vw, 72px); } .hero__title { font-size: clamp(2.4rem, 6.2vw, 4.1rem); font-weight: 800; letter-spacing: -0.035em; } /* Slow shimmer across the gradient words — hero headline only. */ .hero__title .grad-text { background-size: 220% 100%; animation: shimmer 7s ease-in-out infinite; } .hero__lead { max-width: 33em; margin-top: 22px; color: var(--fg-muted); font-size: clamp(1.04rem, 1.6vw, 1.22rem); } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .hero__notes { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; color: var(--fg-faint); font-size: 0.9rem; } .hero__notes li { display: flex; align-items: center; gap: 8px; } .hero__notes svg { width: 15px; height: 15px; flex: none; color: var(--primary); } @media (max-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } /* Copy stays first: a 2:1 device mockup is tall enough that putting it above the headline pushes the pitch and the CTA off a phone's first screen. */ .hero__stage { justify-self: center; margin-top: clamp(28px, 6vw, 48px); } } /* -------------------------------------------------- hero phone + deck ----- */ /* The screen is laid out at a REAL device size (390x844 logical px) and scaled down as one unit, so every number below is the value the Flutter widget actually uses — no eyeballed "looks about right" equivalents. Cross-check against lib/screens/swipe_screen.dart and lib/screens/main_shell.dart. Colours are the dark ColorScheme the app builds from AppColors.cyanPrimary: surface #0f1e24 primary #00a5c4 onPrimary #00323d verified #22c55e action colours: amber / redAccent #ff5252 / super #2aa9f0 / green #4caf50 They are hard-coded rather than themed: the mocked phone shows the app's own dark theme regardless of which theme the landing itself is in. */ .hero__stage { position: relative; display: grid; place-items: center; isolation: isolate; /* Depth for the pointer-tracking tilt app.js applies to .phone. */ perspective: 1200px; } /* Soft glow behind the device so it lifts off the background. */ .hero__stage::before { content: ""; position: absolute; inset: 8% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--blob-pink), transparent 72%); filter: blur(6px); } .phone { /* Device pt -> CSS px. Everything inside .screen is authored in device pt. */ --w: 390; --h: 844; /* Sized so the WHOLE device — including the action pill and the bottom nav — fits above the fold on a laptop; a phone cropped at the knees reads as a mistake. 290px wide => ~0.74 scale => ~628px tall. */ --s: calc(min(290px, 72vw) / (var(--w) * 1px)); position: relative; padding: 12px; border: 1px solid var(--line-strong); border-radius: 46px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02)); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.18); /* app.js lerps these from the pointer position (desktop only). */ transform: rotateY(var(--tilt-y, 0deg)) rotateX(var(--tilt-x, 0deg)); will-change: transform; } /* Phones get a smaller mockup by scaling it, never by forcing `width`: the frame shrink-wraps the scaled screen, so the two cannot disagree. (An earlier `width:` override let the 390pt screen overflow the narrower frame.) This block must stay BELOW the base .phone rule — it overrides the --s declared there at equal specificity. */ @media (max-width: 900px) { .phone { --s: calc(min(286px, 66vw) / (var(--w) * 1px)); } } .phone__screen { position: relative; width: calc(var(--w) * 1px * var(--s)); height: calc(var(--h) * 1px * var(--s)); overflow: hidden; border-radius: 36px; /* brandGradient(Brightness.dark): darkSurface -> #261020. */ background: linear-gradient(160deg, #071114 0%, #10161f 46%, #261020 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .screen { position: absolute; top: 0; left: 0; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); transform: scale(var(--s)); transform-origin: 0 0; font-size: 16px; /* device-pt baseline, immune to the page's fluid sizing */ } .phone__notch { position: absolute; top: 12px; left: 50%; z-index: 8; width: 120px; height: 32px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.62); transform: translateX(-50%); } .phone__bar { position: absolute; bottom: 8px; left: 50%; z-index: 8; width: 134px; height: 5px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.34); transform: translateX(-50%); } /* AppBarTheme in lib/theme.dart: transparent, centred, primary, 22/w600/.5. */ .appbar { position: absolute; top: 54px; left: 0; right: 0; height: 56px; display: grid; place-items: center; color: #00a5c4; font-size: 22px; font-weight: 600; letter-spacing: 0.5px; } /* --- the swipe deck ------------------------------------------------------ */ .deck { position: absolute; inset: 118px 16px 84px; /* bottom clears the floating nav bar */ } /* _CandidateCard: Card(surface, radius 28, clipped) in the framed style. The deck is DRIVEN BY app.js: cards get .is-pos0/1/2 (front/middle/back), .is-dragging while the visitor holds one, .is-flying while one leaves, and .is-entering for the fade-in at the back. The :nth-child rules below are only the no-JS fallback so the stack still reads as a stack. */ .card { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8px 8px 84px; /* 84px reserved for the floating action pill */ overflow: hidden; border-radius: 28px; background: #0f1e24; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); will-change: transform, opacity; cursor: grab; touch-action: pan-y; /* horizontal drags are ours, page scroll stays */ user-select: none; -webkit-user-select: none; transition: transform 0.5s var(--ease), opacity 0.5s var(--ease); } .card:nth-child(1) { z-index: 3; } .card:nth-child(2) { z-index: 2; transform: translateY(18px) scale(0.95); } .card:nth-child(3) { z-index: 1; transform: translateY(36px) scale(0.9); } .card.is-pos0 { z-index: 3; transform: none; } .card.is-pos1 { z-index: 2; transform: translateY(18px) scale(0.95); } .card.is-pos2 { z-index: 1; transform: translateY(36px) scale(0.9); } .card.is-dragging { transition: none; cursor: grabbing; } .card.is-flying { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.45s var(--ease); opacity: 0; } .card.is-entering { opacity: 0; } .card.no-trans { transition: none !important; } .card img { pointer-events: none; } .card__photo { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 18px; background: #16323b; } .card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; /* keep faces off the top crop line */ display: block; } /* _SegmentIndicator: 3px bars, 2px gutters, white / white38. */ .card__segments { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; } .card__segments i { flex: 1; height: 3px; margin: 0 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.38); } .card__segments i.is-on { background: #fff; } /* LIKE / NOPE stamps over the photo; opacity follows the drag distance via the --stamp-like / --stamp-pass vars app.js writes while you pull a card. */ .card__stamp { position: absolute; top: 26px; z-index: 2; padding: 5px 14px; border: 3px solid; border-radius: 12px; font-size: 27px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(7, 17, 20, 0.35); } .card__stamp--like { left: 18px; color: #4caf50; border-color: #4caf50; transform: rotate(-13deg); opacity: var(--stamp-like, 0); } .card__stamp--pass { right: 18px; color: #ff5252; border-color: #ff5252; transform: rotate(13deg); opacity: var(--stamp-pass, 0); } .card:not(.is-dragging) .card__stamp { transition: opacity 0.25s var(--ease); } /* _infoBlock: 16px below the photo, 4px horizontal inset. */ .card__info { flex: none; padding: 16px 4px 0; } .card__name { display: flex; align-items: center; gap: 8px; color: #e6eef1; font-size: 24px; /* headlineSmall */ font-weight: 700; line-height: 1.2; white-space: nowrap; } .card__name > span { overflow: hidden; text-overflow: ellipsis; } .card__verified { flex: none; width: 24px; height: 24px; color: #22c55e; } /* _TagChip: radius 20, 10/6 padding, surfaceContainerHighest@.6 on outlineVariant@.4, a 14px primary icon and a 12px w600 label. */ .card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .card__chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 20px; background: rgba(255, 255, 255, 0.07); color: #e6eef1; font-size: 12px; font-weight: 600; line-height: 1.1; white-space: nowrap; } .card__chip svg { width: 14px; height: 14px; flex: none; fill: none; stroke: #00a5c4; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .card__bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; color: #a6bcc4; /* onSurfaceVariant */ font-size: 16px; /* bodyLarge */ line-height: 1.3; } /* "It's a match!" toast — app.js flashes it on likes via .is-shown. */ .match-toast { position: absolute; top: 150px; left: 50%; z-index: 7; display: flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: var(--r-pill); background: var(--accent-grad); color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; box-shadow: 0 14px 34px rgba(232, 96, 185, 0.42); opacity: 0; transform: translate(-50%, -6px) scale(0.9); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); pointer-events: none; } .match-toast.is-shown { opacity: 1; transform: translate(-50%, 0) scale(1); } .match-toast svg { width: 18px; height: 18px; } /* "Drag a card" invitation, pulsing gently until the first real swipe. */ .deck__hint { position: absolute; bottom: 356px; /* over the lower edge of the photo, clear of the chips */ left: 50%; z-index: 7; display: flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r-pill); background: rgba(15, 30, 36, 0.78); color: #e6eef1; font-size: 14px; font-weight: 600; white-space: nowrap; backdrop-filter: blur(12px); transform: translateX(-50%); transition: opacity 0.4s var(--ease); pointer-events: none; animation: hintNudge 2.6s ease-in-out infinite; } .deck__hint svg { width: 20px; height: 20px; color: #6fdcf0; } .deck__hint.is-hidden { opacity: 0; } /* --- floating action pill (swipe_screen.dart) ---------------------------- */ .pill { position: absolute; bottom: 96px; left: 50%; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 40px; background: rgba(15, 30, 36, 0.6); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); backdrop-filter: blur(16px); transform: translateX(-50%); } /* Real, clickable buttons — every one drives the demo deck (app.js). */ .pill__btn { display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #0f1e24; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); cursor: pointer; transition: transform 0.15s var(--ease), filter 0.15s var(--ease); } .pill__btn:hover { transform: translateY(-2px); filter: brightness(1.25); } .pill__btn:active { transform: scale(0.92); } .pill__btn svg { width: 50%; height: 50%; } /* _RoundButton sizes/colours, left to right. */ .pill__btn--undo { width: 46px; height: 46px; color: #ffc107; } .pill__btn--pass { width: 56px; height: 56px; color: #ff5252; } .pill__btn--super { width: 50px; height: 50px; color: #2aa9f0; } .pill__btn--like { width: 56px; height: 56px; color: #4caf50; } /* One-shot flash while "its" card flies (class added and removed by app.js). */ .pill__btn.is-fired { animation: btnFire 0.5s var(--ease); } /* --- floating bottom nav (_FloatingNavBar) ------------------------------- */ .navbar { position: absolute; bottom: 24px; left: 50%; z-index: 6; display: flex; align-items: center; gap: 4px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 32px; background: rgba(15, 30, 36, 0.75); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); backdrop-filter: blur(18px); transform: translateX(-50%); } .navbar__item { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 22px; color: #a6bcc4; /* onSurfaceVariant */ font-size: 14px; font-weight: 700; } /* The selected destination expands into a filled primary pill with its label. */ .navbar__item.is-on { padding-inline: 18px; background: #00a5c4; color: #00323d; /* onPrimary */ } .navbar__item svg { width: 24px; height: 24px; flex: none; } /* Floating "matching stays quiet" callout, tucked against the lower-right of the device — far enough down that it never sits over the card. */ .hero__callout { position: absolute; right: -9%; bottom: -13%; /* clears the phone's floating bottom nav */ z-index: 3; display: flex; align-items: center; gap: 11px; max-width: 230px; padding: 12px 15px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--glass-strong); box-shadow: var(--shadow-md); backdrop-filter: blur(14px); animation: float 6s ease-in-out infinite; } .hero__callout svg { width: 22px; height: 22px; flex: none; color: var(--primary); } .hero__callout p { font-size: 0.82rem; line-height: 1.4; color: var(--fg-muted); } .hero__callout b { display: block; color: var(--fg); font-size: 0.86rem; } @media (max-width: 1100px) { .hero__callout { right: -2%; bottom: -15%; } } @media (max-width: 620px) { .hero__callout { display: none; } } /* ----------------------------------------------------------------- waves -- */ .waves { position: absolute; inset: auto 0 0; z-index: 1; height: clamp(110px, 16vw, 190px); overflow: hidden; opacity: var(--wave-opacity); pointer-events: none; } .wave { position: absolute; bottom: 0; left: 0; width: 200%; animation: drift linear infinite; } .wave svg { display: block; width: 100%; height: 100%; } /* Back / mid / front, matching _WaveStack: heights 150/130/110 of 170. */ .wave--1 { height: 88%; animation-duration: 13s; animation-direction: reverse; } .wave--2 { height: 76%; animation-duration: 17s; } .wave--3 { height: 65%; animation-duration: 9s; } /* Inherited into the clones — see the .brand__mark note above. */ .wave--1 { fill: var(--wave-1); } .wave--2 { fill: var(--wave-2); } .wave--3 { fill: var(--wave-3); } /* --------------------------------------------------------------- metrics -- */ .metrics { position: relative; z-index: 2; margin-top: calc(var(--section-y) * -0.45); } .metrics__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--line); box-shadow: var(--shadow-md); } .metric { padding: 26px clamp(16px, 2vw, 28px); background: var(--glass-strong); backdrop-filter: blur(14px); } .metric__value { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .metric__label { margin-top: 9px; color: var(--fg-muted); font-size: 0.88rem; line-height: 1.45; } @media (max-width: 860px) { .metrics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ----------------------------------------------------------------- steps -- */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); counter-reset: step; } .step { position: relative; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--glass); backdrop-filter: blur(12px); transition: transform 0.25s var(--ease), border-color 0.25s var(--ease); } .step:hover { transform: translateY(-4px); border-color: var(--line-strong); } .step__num { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: var(--r-sm); background: var(--accent-grad); color: #fff; font-size: 1.15rem; font-weight: 800; } .step__title { font-size: 1.24rem; } .step__body { margin-top: 11px; color: var(--fg-muted); font-size: 0.97rem; } @media (max-width: 880px) { .steps { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------- features -- */ .features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); } .feature { position: relative; padding: clamp(24px, 2.6vw, 32px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--glass); backdrop-filter: blur(12px); /* --fx/--fy/--mx/--my come from app.js: a light 3D tilt toward the cursor plus a glare spot that follows it. All zero when the pointer is coarse. */ transform: perspective(900px) rotateX(var(--fx, 0deg)) rotateY(var(--fy, 0deg)); transition: transform 0.18s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .feature::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.09), transparent 55%); opacity: 0; transition: opacity 0.25s var(--ease); pointer-events: none; } .feature:hover::before { opacity: 1; } .feature::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--accent-grad); opacity: 0; transition: opacity 0.25s var(--ease); } .feature:hover { transform: perspective(900px) rotateX(var(--fx, 0deg)) rotateY(var(--fy, 0deg)) translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-md); } .feature:hover::after { opacity: 1; } .feature--wide { grid-column: span 2; } .feature__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 20px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: linear-gradient(150deg, rgba(0, 165, 196, 0.18), rgba(232, 96, 185, 0.14)); color: var(--primary-soft); } .feature__icon svg { width: 23px; height: 23px; } .feature__title { font-size: 1.16rem; } .feature__body { margin-top: 10px; color: var(--fg-muted); font-size: 0.96rem; } @media (max-width: 980px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 660px) { .features { grid-template-columns: minmax(0, 1fr); } .feature--wide { grid-column: span 1; } } /* --------------------------------------------------------------- privacy -- */ .privacy { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(900px 420px at 100% 0%, rgba(139, 107, 232, 0.16), transparent 68%), var(--glass-strong); box-shadow: var(--shadow-md); backdrop-filter: blur(16px); } .privacy__inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); padding: clamp(28px, 4.4vw, 60px); } .privacy__list { display: grid; gap: 4px; } .privacy__item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); } .privacy__item:first-child { border-top: 0; } .privacy__item svg { width: 22px; height: 22px; margin-top: 2px; color: var(--primary); } .privacy__item h3 { font-size: 1.02rem; font-weight: 600; } .privacy__item p { margin-top: 5px; color: var(--fg-muted); font-size: 0.93rem; } .privacy__footnote { margin-top: 24px; padding: 14px 18px; border-left: 3px solid var(--secondary); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--line); color: var(--fg-muted); font-size: 0.9rem; } @media (max-width: 900px) { .privacy__inner { grid-template-columns: minmax(0, 1fr); } } /* ---------------------------------------------------------------- plans --- */ .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); align-items: start; } .plan { position: relative; padding: clamp(26px, 3.2vw, 38px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--glass); backdrop-filter: blur(12px); } .plan--featured { border-color: transparent; background: linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box, var(--accent-grad) border-box; border: 1px solid transparent; box-shadow: var(--shadow-glow); } .plan__tag { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--line); color: var(--fg-muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .plan--featured .plan__tag { background: var(--accent-grad); color: #fff; } .plan__name { font-size: 1.45rem; } .plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; } .plan__amount { font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .plan__period { color: var(--fg-faint); font-size: 0.95rem; } .plan__note { margin-top: 12px; color: var(--fg-muted); font-size: 0.93rem; } .plan__list { display: grid; gap: 12px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); } .plan__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 0.97rem; } .plan__list svg { width: 18px; height: 18px; margin-top: 4px; color: var(--primary); } .plan--featured .plan__list svg { color: var(--secondary); } .plan__cta { width: 100%; margin-top: 28px; } @media (max-width: 760px) { .plans { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------------ faq --- */ .faq { display: grid; gap: 10px; max-width: 880px; margin-inline: auto; } .faq__item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--glass); backdrop-filter: blur(10px); transition: border-color 0.2s var(--ease); } .faq__item[open] { border-color: var(--line-strong); } .faq__q { display: flex; align-items: center; gap: 16px; padding: 18px 22px; color: var(--fg); font-size: 1.03rem; font-weight: 600; cursor: pointer; list-style: none; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: ""; flex: none; width: 11px; height: 11px; margin-left: auto; border-right: 2px solid var(--fg-faint); border-bottom: 2px solid var(--fg-faint); transform: rotate(45deg) translateY(-2px); transition: transform 0.22s var(--ease); } .faq__item[open] .faq__q::after { transform: rotate(225deg) translateY(-2px); } /* app.js animates .faq__body's height so answers slide open and closed; without JS the wrapper is inert and
behaves natively. */ .faq__body { overflow: hidden; transition: height 0.28s var(--ease); } .faq__a { padding: 0 22px 20px; color: var(--fg-muted); font-size: 0.97rem; } .faq__a a { color: var(--secondary); } /* ------------------------------------------------------------------ cta --- */ .cta { position: relative; overflow: hidden; padding: clamp(44px, 6vw, 84px) clamp(24px, 4vw, 64px) clamp(120px, 14vw, 170px); border-radius: var(--r-xl); background: radial-gradient(760px 380px at 12% 0%, rgba(0, 165, 196, 0.24), transparent 66%), radial-gradient(700px 420px at 92% 20%, rgba(232, 96, 185, 0.22), transparent 68%), var(--surface); border: 1px solid var(--line); text-align: center; } [data-theme="light"] .cta { background: radial-gradient(760px 380px at 12% 0%, rgba(0, 122, 148, 0.16), transparent 66%), radial-gradient(700px 420px at 92% 20%, rgba(199, 48, 146, 0.14), transparent 68%), var(--surface); } .cta__title { font-size: clamp(1.9rem, 4.4vw, 3.1rem); font-weight: 800; } .cta__lead { max-width: 44ch; margin: 18px auto 0; color: var(--fg-muted); font-size: clamp(1rem, 1.5vw, 1.15rem); } .cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; } .cta__fineprint { margin-top: 22px; color: var(--fg-faint); font-size: 0.86rem; } /* --------------------------------------------------------------- footer --- */ .footer { margin-top: var(--section-y); padding-block: clamp(40px, 5vw, 64px) 32px; border-top: 1px solid var(--line); } .footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); } .footer__about { max-width: 34ch; margin-top: 16px; color: var(--fg-muted); font-size: 0.92rem; } .footer__col h3 { margin-bottom: 14px; color: var(--fg-faint); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } .footer__col li + li { margin-top: 9px; } .footer__col a { color: var(--fg-muted); font-size: 0.93rem; } .footer__col a:hover { color: var(--fg); } .footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(32px, 4vw, 52px); padding-top: 24px; border-top: 1px solid var(--line); color: var(--fg-faint); font-size: 0.86rem; } .badge-18 { display: inline-grid; place-items: center; min-width: 42px; padding: 4px 9px; border: 1.5px solid var(--secondary); border-radius: var(--r-pill); color: var(--secondary); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.03em; } .footer__spacer { margin-left: auto; } @media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } .footer__spacer { margin-left: 0; } } /* ------------------------------------------------------------ animations -- */ @keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* The pill button that "sends" a card flashes once (class from app.js). */ @keyframes btnFire { 0% { transform: scale(1); filter: none; } 35% { transform: scale(1.2); filter: brightness(1.5); } 100% { transform: scale(1); filter: none; } } /* The drag hint breathes sideways to suggest the gesture. */ @keyframes hintNudge { 0%, 100% { transform: translateX(-50%); } 50% { transform: translateX(calc(-50% + 10px)); } } /* Gradient shimmer for the hero headline. */ @keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Metric tiles pop in one after another once the strip is revealed. */ @keyframes popIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } } /* Scroll reveal — the class is added by app.js via IntersectionObserver. */ .reveal { opacity: 0; transform: translateY(26px) scale(0.99); filter: blur(5px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease); } .reveal.is-in { opacity: 1; transform: none; filter: none; } .metrics__grid .metric { opacity: 0; } .metrics__grid.is-in .metric { animation: popIn 0.55s var(--ease) both; } .metrics__grid.is-in .metric:nth-child(2) { animation-delay: 0.09s; } .metrics__grid.is-in .metric:nth-child(3) { animation-delay: 0.18s; } .metrics__grid.is-in .metric:nth-child(4) { animation-delay: 0.27s; } .reveal--d1 { transition-delay: 0.07s; } .reveal--d2 { transition-delay: 0.14s; } .reveal--d3 { transition-delay: 0.21s; } /* Anyone who asked for less motion gets a essentially static page: no auto swipes (app.js checks the same media query), no waves drifting, no shimmer, no floating. Dragging the demo card still works — it is user-initiated. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; filter: none; } .metrics__grid .metric { opacity: 1; animation: none !important; } .deck__hint { animation: none; } .match-toast { display: none; } .hero3d { display: none; } } /* Printing a marketing page is rare, but a broken print view looks careless. */ @media print { body::before, .waves, .header, .hero__stage, .cta { display: none !important; } body { background: #fff; color: #000; } }