/* Block: AI Demo — ported from datarails-ai-demo-page/index.html. Classes are aid-prefixed (theme has global .btn/.card/.wrap/.field/.progress). */ :where(.dr-ai-demo, .dr-ai-demo *, .dr-ai-demo *::before, .dr-ai-demo *::after) { box-sizing: border-box; } .dr-ai-demo [hidden] { display: none !important; } /* Page chrome only on the Blank — Blocks template. The cream sits on : a body background would paint over the z-index:-1 daylight layer. */ html:has(body.blank-blocks-page .dr-ai-demo) { background: #FFF9F1; } body.blank-blocks-page:has(.dr-ai-demo) { background: transparent; margin: 0; padding: 0; } .dr-ai-demo.is-preview { background: #FFF9F1; } /* Daylight background */ .dr-daylight { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #FFF9F1; } .dr-daylight__mesh { position: absolute; inset: -18%; opacity: 0.35; animation: dr-drift-b 46s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate; background-image: radial-gradient(44% 58% at 82% 26%, rgba(250,53,118,0.42), rgba(250,53,118,0) 70%), radial-gradient(40% 50% at 18% 18%, rgba(255,163,15,0.38), rgba(255,163,15,0) 68%), radial-gradient(52% 64% at 34% 94%, rgba(12,20,43,0.20), rgba(12,20,43,0) 72%), radial-gradient(30% 40% at 60% 58%, rgba(255,249,241,0.90), rgba(255,249,241,0) 70%); } .dr-daylight__sheen { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(255,249,241,0.55) 0%, rgba(255,249,241,0) 45%); } .dr-daylight__grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.22; mix-blend-mode: multiply; background-size: 220px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); } @keyframes dr-drift-b { from { transform: translate3d(2%, 1%, 0) scale(1.06) rotate(-1.5deg); } to { transform: translate3d(-2%, -2%, 0) scale(1.12) rotate(1.5deg); } } @media (prefers-reduced-motion: reduce) { .dr-daylight__mesh { animation: none; } } .dr-ai-demo { color: #0C142B; font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } /* :where() keeps link color at bare-`a` specificity so .aid-btn still wins, as in the source page. */ :where(.dr-ai-demo) a { color: #FA3576; text-decoration: none; } :where(.dr-ai-demo) a:hover { color: #E0296A; text-decoration: underline; } .dr-ai-demo a.aid-btn, .dr-ai-demo a.aid-btn:hover { color: #FFFFFF; text-decoration: none; } .dr-ai-demo a.aid-btn--ghost, .dr-ai-demo a.aid-btn--ghost:hover { color: #0C142B; } .aid-wrap { max-width: 1120px; margin: 0 auto; } /* Hero */ .aid-hero { padding: 96px 24px 200px; } .aid-hero__grid { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 64px; align-items: start; justify-content: space-between; } .aid-hero__copy { display: flex; flex-direction: column; align-items: flex-start; } .aid-eyebrow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #FA3576; margin-bottom: 16px; } .aid-hero h1 { margin: 0; font-size: clamp(32px, 4.5vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: #0C142B; text-wrap: pretty; } .aid-hero__lede { margin: 20px 0 0; font-size: 18px; line-height: 1.55; color: rgba(12,20,43,0.78); max-width: 520px; text-wrap: pretty; } .aid-hero__note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: rgba(12,20,43,0.60); } .aid-btn { appearance: none; border: 0; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 600; color: #FFFFFF; background: #FA3576; height: 56px; padding: 0 32px; border-radius: 999px; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; transition: background 150ms cubic-bezier(0.22,1,0.36,1), box-shadow 150ms cubic-bezier(0.22,1,0.36,1), transform 100ms cubic-bezier(0.22,1,0.36,1); outline-offset: 3px; } .aid-btn:hover { background: #E0296A; color: #FFFFFF; text-decoration: none; box-shadow: 0 6px 16px rgba(250,53,118,0.28); } .aid-btn:active { transform: scale(0.96); } .aid-btn:focus-visible { outline: 2px solid #FA3576; } .aid-hero .aid-btn { margin-top: 32px; } .aid-hero .aid-btn:focus-visible { outline-color: #0C142B; } .aid-btn--ghost { background: transparent; color: #0C142B; border: 1px solid rgba(12,20,43,0.20); } .aid-btn--ghost:hover { background: rgba(12,20,43,0.05); color: #0C142B; border-color: rgba(12,20,43,0.35); box-shadow: none; } .aid-btn--sm { height: 44px; padding: 0 20px; font-size: 14px; } .aid-showcase { padding: 0 24px; margin-top: -140px; position: relative; z-index: 1; } .aid-shot { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 2838 / 1307; box-shadow: 0 12px 32px rgba(12,20,43,0.10), 0 1px 3px rgba(12,20,43,0.05); border: 1px solid rgba(255,255,255,0.6); } .aid-shot img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; } .aid-shot__glass { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 45%, rgba(12,20,43,0.20) 100%); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); } .aid-shot__badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .aid-shot__badge button { pointer-events: auto; appearance: none; cursor: pointer; padding: 0; width: 80px; height: 80px; border-radius: 999px; background: rgba(12,20,43,0.38); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.45); box-shadow: 0 8px 24px rgba(0,0,0,0.25); color: #FFFFFF; font-size: 36px; display: flex; align-items: center; justify-content: center; transition: transform 150ms cubic-bezier(0.22,1,0.36,1), background 150ms; } .aid-shot__badge button:hover { transform: scale(1.08); background: rgba(12,20,43,0.55); } .aid-shot__badge button:focus-visible { outline: 2px solid #FA3576; outline-offset: 3px; } /* Qualification form */ .aid-qual { min-width: 0; margin-top: 36px; } /* eyebrow line (20px) + its 16px margin → card top meets the h1 top */ .aid-qual__card { background: #FFFFFF; border-radius: 16px; box-shadow: 0 8px 24px rgba(12,20,43,0.07), 0 1px 3px rgba(12,20,43,0.05); padding: 24px; } .aid-qual__heading { margin: 0 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; } .aid-qual__sub { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: rgba(12,20,43,0.70); } .aid-progress { list-style: none; margin: 0 0 20px; padding: 0; display: flex; align-items: center; gap: 0; } .aid-progress li { display: flex; align-items: center; font-size: 13px; font-weight: 600; color: rgba(12,20,43,0.45); } .aid-progress li + li { flex: 1; } .aid-progress li + li::before { content: ""; display: block; flex: 1; height: 2px; background: rgba(12,20,43,0.12); margin: 0 12px; } .aid-progress li span { width: 28px; height: 28px; flex: none; border-radius: 999px; border: 2px solid rgba(12,20,43,0.15); display: inline-flex; align-items: center; justify-content: center; } .aid-progress li.is-active { color: #0C142B; } .aid-progress li.is-active span { background: #FA3576; border-color: #FA3576; color: #FFFFFF; } .aid-progress li.is-done span { border-color: #FA3576; color: #FA3576; } .aid-progress li + li.is-done::before, .aid-progress li + li.is-active::before { background: #FA3576; } .aid-step { border: 0; padding: 0; margin: 0; min-width: 0; } .aid-step h3 { margin: 0 0 20px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .aid-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .aid-grid-2:has(> [hidden]) { grid-template-columns: 1fr; } /* shortening hid one of the pair */ .aid-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; } .aid-grid-2 .aid-field { margin-bottom: 0; } .aid-field label { font-size: 13px; font-weight: 600; } .aid-field input[type="email"], .aid-field input[type="text"], .aid-field input[type="tel"], .aid-field select { font: inherit; font-size: 14px; color: #0C142B; background: #FFFFFF; width: 100%; height: 40px; padding: 0 12px; border: 1px solid rgba(12,20,43,0.18); border-radius: 10px; outline: none; transition: border-color 150ms, box-shadow 150ms; } .aid-field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; } .aid-field input:focus, .aid-field select:focus { border-color: #FA3576; box-shadow: 0 0 0 3px rgba(250,53,118,0.18); } /* intl-tel-input: flag button sits inside the input's left padding */ .iti { width: 100%; } .iti__selected-country, .iti__selected-country-primary { background: #FFFFFF; border-radius: 10px 0 0 10px; } .iti .iti__selected-country { border: 0; font: inherit; color: inherit; } .iti .iti__country-container:hover .iti__selected-country-primary { background: rgba(12,20,43,0.05); } .iti__dropdown-content { font-family: inherit; font-size: 14px; border-radius: 10px; border-color: rgba(12,20,43,0.18); box-shadow: 0 12px 28px rgba(12,20,43,0.18); } .iti__search-input { font-family: inherit; font-size: 14px; border-radius: 10px 10px 0 0; } .aid-field .iti__search-input:focus { border-color: rgba(12,20,43,0.18); box-shadow: none; } .aid-field.is-invalid input:not(.iti__search-input), .aid-field.is-invalid select { border-color: #FA3576; } .aid-field .aid-error { display: none; font-size: 12px; color: #FA3576; } .aid-field.is-invalid .aid-error { display: block; } .aid-legal { margin: 0 0 16px; font-size: 11px; line-height: 1.5; color: rgba(12,20,43,0.60); } .aid-actions { display: flex; gap: 12px; margin-top: 4px; } .aid-actions .aid-btn { flex: 1; } .aid-result { background: #FFFFFF; border-radius: 16px; box-shadow: 0 8px 24px rgba(12,20,43,0.07), 0 1px 3px rgba(12,20,43,0.05); padding: 40px 32px; text-align: center; } .aid-result h3 { margin: 0 0 10px; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; } .aid-result p { margin: 0 0 24px; font-size: 16px; line-height: 1.55; color: rgba(12,20,43,0.70); } .aid-result iframe { width: 100%; height: 640px; border: 0; border-radius: 12px; } /* Booking modal */ .aid-modal { width: min(960px, calc(100vw - 32px)); height: min(720px, calc(100vh - 32px)); padding: 0; border: 0; border-radius: 16px; background: #FFFFFF; box-shadow: 0 24px 64px rgba(12,20,43,0.30); overflow: hidden; } .aid-modal::backdrop { background: rgba(12,20,43,0.55); backdrop-filter: blur(3px); } .aid-modal iframe { width: 100%; height: 100%; border: 0; display: block; } .aid-modal__close { position: absolute; top: 10px; right: 10px; z-index: 1; width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(12,20,43,0.15); background: #FFFFFF; color: #0C142B; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .aid-modal__close:hover { background: rgba(12,20,43,0.06); } .aid-modal__close:focus-visible { outline: 2px solid #FA3576; outline-offset: 2px; } /* How it works */ .aid-how { padding: 96px 24px; } .aid-how h2 { margin: 0 0 48px; text-align: center; font-size: clamp(32px, 3.2vw, 40px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; } .aid-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .aid-card { display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF; border-radius: 16px; box-shadow: 0 12px 28px rgba(12,20,43,0.08); padding: 32px; } .aid-card__icon { flex: none; color: #FA3576; font-size: 28px; line-height: 1; display: flex; align-items: center; margin-bottom: 20px; } .aid-card__title { font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; margin-bottom: 10px; max-width: 320px; text-wrap: pretty; } .aid-card p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(12,20,43,0.70); max-width: 320px; text-wrap: pretty; } /* Entrance motion */ @keyframes drFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes drGlow { 0% { box-shadow: 0 8px 24px rgba(12,20,43,0.07), 0 1px 3px rgba(12,20,43,0.05); } 35% { box-shadow: 0 0 0 5px rgba(250,53,118,0.30), 0 0 56px 14px rgba(250,53,118,0.28), 0 8px 24px rgba(12,20,43,0.07), 0 1px 3px rgba(12,20,43,0.05); } 100% { box-shadow: 0 8px 24px rgba(12,20,43,0.07), 0 1px 3px rgba(12,20,43,0.05); } } .aid-qual__card.is-glow { animation: drGlow 1500ms ease-out 1; } @media (prefers-reduced-motion: no-preference) { [data-fade] { animation: drFadeUp 450ms cubic-bezier(0.22,1,0.36,1) both; } [data-fade="2"] { animation-delay: 80ms; } [data-fade="3"] { animation-delay: 160ms; } } /* Responsive collapse */ @media (max-width: 1023px) { .aid-how { padding-bottom: 56px; } } @media (max-width: 900px) { .aid-hero { padding: 64px 24px 120px; } .aid-hero__grid { grid-template-columns: 1fr; gap: 40px; } .aid-qual { margin-top: 0; } .aid-steps { grid-template-columns: 1fr; } .aid-showcase { margin-top: -72px; } } @media (max-width: 640px) { .aid-hero .aid-btn { width: 100%; } .aid-qual__card, .aid-result { padding: 28px 20px; } .aid-grid-2 { grid-template-columns: 1fr; } .aid-actions { flex-direction: column-reverse; } .aid-actions .aid-btn { width: 100%; } .aid-result iframe { height: 560px; } }