/* ====== DESIGN TOKENS ====== */ :root { --navy: #0B1F3A; --navy-2: #0F2944; --royal: #1A3A5C; --blue: #2563EB; --blue-light: #3B82F6; --blue-50: #EFF6FF; --gold: #C9A961; --gold-light: #E0C88C; --gold-glow: rgba(201, 169, 97, 0.45); --white: #FAFBFC; --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-500: #64748B; --gray-600: #475569; --gray-700: #334155; --gray-800: #1E293B; --green: #16A34A; --green-light: #DCFCE7; --amber: #B45309; --amber-light: #FEF3C7; --red: #EF4444; --font-fa: 'Vazirmatn', sans-serif; /* Numbers use the same family as the text so Persian digits never switch font. */ --font-num: 'Vazirmatn', sans-serif; --r-card: 24px; --r-input: 12px; --r-btn: 12px; --r-pill: 9999px; --shadow-card: 0 24px 70px -20px rgba(11, 31, 58, 0.25); --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* A phone's rubber-band scroll exposes the canvas behind the page, and the canvas takes its colour from , not from body. Without this, pulling past either end of the page flashed white. */ html { background: var(--navy); overflow-x: hidden; /* Nothing here is meant to move sideways; only up and down. */ overscroll-behavior-x: none; } body { font-family: var(--font-fa); background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 50%, var(--navy) 100%); min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 16px; color: var(--gray-800); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(circle at 15% 15%, rgba(37, 99, 235, 0.07) 0%, transparent 45%), radial-gradient(circle at 85% 85%, rgba(201, 169, 97, 0.05) 0%, transparent 45%); pointer-events: none; z-index: 0; } /* ====== CARD ====== */ .card { position: relative; width: 100%; max-width: 460px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-card); /* Must stay visible so an open dropdown near the bottom is not clipped; the header rounds its own corners instead. */ overflow: visible; z-index: 1; animation: cardIn 0.6s var(--ease) both; } @keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ====== HEADER ====== */ .header { background: linear-gradient(135deg, var(--navy) 0%, var(--royal) 100%); padding: 30px 24px; text-align: center; position: relative; overflow: hidden; border-radius: var(--r-card) var(--r-card) 0 0; } .header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .header::after { content: ''; position: absolute; bottom: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(201, 169, 97, 0.08), transparent 70%); pointer-events: none; } .logo { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; } .logo-dot { width: 8px; height: 8px; background: var(--gold); border-radius: 1px; transform: rotate(45deg); box-shadow: 0 0 8px var(--gold-glow); } .logo-text { font-size: 1.4rem; font-weight: 800; color: var(--white); letter-spacing: -0.02em; } .header h1 { font-size: 1.15rem; font-weight: 600; color: var(--white); margin-bottom: 6px; } .header p { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); font-weight: 300; } /* ====== PROGRESS ====== */ .progress-wrap { height: 4px; background: var(--gray-100); width: 100%; } .progress-bar { height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-light)); transition: width 0.5s var(--ease); width: 14%; } /* ====== FORM BODY ====== */ .form-body { padding: 30px 24px; min-height: 380px; position: relative; } .step { display: none; } .step.active { display: block; animation: stepIn 0.4s var(--ease) both; } @keyframes stepIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } .step-title { font-size: 1.05rem; font-weight: 600; color: var(--gray-800); margin-bottom: 6px; } .step-hint { font-size: 0.78rem; color: var(--gray-400); margin-bottom: 20px; } /* ====== TYPE CARDS ====== */ .type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .type-card { position: relative; padding: 26px 10px; border: 2px solid var(--gray-200); border-radius: 18px; background: var(--white); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 12px; transition: all 0.3s var(--ease); font-family: var(--font-fa); -webkit-tap-highlight-color: transparent; } .type-card:hover:not(.disabled) { border-color: var(--blue-light); transform: translateY(-3px); } .type-card.selected { border-color: var(--blue); background: var(--blue-50); } .type-card svg { width: 40px; height: 40px; color: var(--blue); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .type-card span { font-size: 0.9rem; font-weight: 500; color: var(--gray-700); } .type-card.disabled { cursor: not-allowed; opacity: 0.6; background: var(--gray-50); } .type-card.disabled svg { color: var(--gray-400); } .soon-badge { position: absolute; top: 10px; left: 10px; background: var(--amber-light); color: var(--amber); font-size: 0.62rem; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); } /* ====== FIELDS ====== */ .field { margin-bottom: 16px; } .field label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--gray-600); margin-bottom: 7px; } .input, .select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--gray-200); border-radius: var(--r-input); font-family: var(--font-fa); font-size: 0.92rem; color: var(--gray-800); background: var(--white); transition: all 0.25s var(--ease); outline: none; -webkit-appearance: none; appearance: none; } .input::placeholder { color: var(--gray-400); font-weight: 300; } .input:focus, .select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .input.error, .combo-input.error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); } .field-error { font-size: 0.72rem; color: var(--red); margin-top: 6px; display: none; } .field-error.show { display: block; } /* ====== GROUPED NUMERIC ROWS ====== */ /* Numeric fields sit in one bordered block, one per line, so each label stays visually tied to its own stepper instead of forming a wall of controls. */ .field-group { border: 1.5px solid var(--gray-200); border-radius: 14px; background: var(--white); overflow: hidden; } .num-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; } .num-row + .num-row { border-top: 1px solid var(--gray-100); } .num-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .num-row label { display: block; margin: 0; font-size: 0.88rem; font-weight: 500; color: var(--gray-700); cursor: pointer; } .num-hint { font-size: 0.68rem; color: var(--gray-400); line-height: 1.5; } /* ====== NUMBER STEPPER ====== */ .stepper { display: inline-flex; align-items: stretch; flex-shrink: 0; border: 1.5px solid var(--gray-200); border-radius: var(--r-input); background: var(--white); overflow: hidden; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .stepper:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .stepper .input { width: 54px; min-width: 0; text-align: center; font-weight: 700; font-size: 0.98rem; padding: 9px 2px; background: transparent; border: none; border-inline-start: 1.5px solid var(--gray-200); border-inline-end: 1.5px solid var(--gray-200); border-radius: 0; } /* The pill as a whole shows focus, so the inner dividers must stay neutral. */ .stepper .input:focus { border-color: var(--gray-200); box-shadow: none; } /* The pill clips anything its children draw outside themselves, so the global focus ring survived only as a blue bar sitting on one of the dividers, which read as the pill coming apart. The ring goes round the pill instead. */ .stepper .input:focus-visible { outline: none; } /* The soft halo goes with it: a ring and a glow in the same place only make the one focus state look like two. */ .stepper:has(.input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; box-shadow: none; } .step-btn { width: 38px; flex-shrink: 0; border: none; border-radius: 0; background: var(--gray-50); color: var(--gray-500); font-family: var(--font-fa); font-size: 1.25rem; font-weight: 500; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s var(--ease); user-select: none; -webkit-tap-highlight-color: transparent; } .step-btn:hover { color: var(--blue); background: var(--blue-50); } .step-btn:active { color: var(--blue); background: #DBEAFE; } /* Same clipping problem as the input, and a button has an interior to use. */ .step-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue); color: var(--blue); background: var(--blue-50); } /* ====== DROPDOWN (searchable and plain) ====== */ .combo { position: relative; } .combo-input { width: 100%; padding: 12px 40px 12px 40px; border: 1.5px solid var(--gray-200); border-radius: var(--r-input); font-family: var(--font-fa); font-size: 0.92rem; color: var(--gray-800); background: var(--white); transition: all 0.25s var(--ease); outline: none; text-overflow: ellipsis; } .combo.plain .combo-input { padding-right: 14px; cursor: pointer; } .combo-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .combo-input::placeholder { color: var(--gray-400); font-weight: 300; } .combo-icon { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--gray-400); pointer-events: none; stroke-width: 2; fill: none; stroke: currentColor; } .combo.plain .combo-icon { display: none; } .combo-caret { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--gray-400); pointer-events: none; stroke-width: 2; fill: none; stroke: currentColor; transition: transform 0.2s var(--ease); } .combo.open .combo-caret { transform: translateY(-50%) rotate(180deg); } .combo-list { position: absolute; top: calc(100% + 6px); right: 0; left: 0; max-height: 240px; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--white); border: 1.5px solid var(--gray-200); border-radius: var(--r-input); box-shadow: 0 16px 40px -12px rgba(11, 31, 58, 0.28); z-index: 40; display: none; padding: 6px; } .combo.open .combo-list { display: block; } /* Applied by JS when there is more room above the field than below it. */ .combo.drop-up .combo-list { top: auto; bottom: calc(100% + 6px); } .combo-option { padding: 11px 12px; border-radius: 9px; font-size: 0.88rem; color: var(--gray-700); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; transition: background 0.15s var(--ease); line-height: 1.6; } .combo-option:hover, .combo-option.highlight { background: var(--blue-50); color: var(--blue); } .combo-option.selected { background: var(--blue-50); color: var(--blue); font-weight: 600; } .combo-empty { padding: 16px; text-align: center; font-size: 0.82rem; color: var(--gray-400); } /* ====== CHOICE BUTTONS ====== */ .choice-row { display: flex; gap: 7px; } .choice-btn { flex: 1; padding: 11px 0; border: 1.5px solid var(--gray-200); border-radius: var(--r-btn); background: var(--white); font-family: var(--font-fa); font-size: 0.93rem; font-weight: 500; color: var(--gray-600); cursor: pointer; transition: all 0.25s var(--ease); -webkit-tap-highlight-color: transparent; white-space: nowrap; } .choice-btn:hover { border-color: var(--blue-light); color: var(--blue); } .choice-btn.selected { border-color: var(--blue); background: var(--blue-50); color: var(--blue); } /* ====== CHECK OPTIONS ====== */ .check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .check-item { display: flex; align-items: center; gap: 9px; padding: 12px 12px; border: 1.5px solid var(--gray-200); border-radius: var(--r-btn); background: var(--white); cursor: pointer; font-size: 0.83rem; font-weight: 500; color: var(--gray-600); transition: all 0.22s var(--ease); -webkit-tap-highlight-color: transparent; text-align: right; font-family: var(--font-fa); } .check-item.full { grid-column: 1 / -1; } .check-item:hover { border-color: var(--blue-light); } .check-item.active { border-color: var(--blue); background: var(--blue-50); color: var(--blue); } .check-box { width: 19px; height: 19px; border: 1.5px solid var(--gray-300); border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.22s var(--ease); } .check-item.active .check-box { background: var(--blue); border-color: var(--blue); } .check-box svg { width: 12px; height: 12px; color: #fff; opacity: 0; stroke-width: 3.5; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } .check-item.active .check-box svg { opacity: 1; } /* ====== NAV ====== */ .nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 14px; } .btn-prev { padding: 10px 16px; background: transparent; border: none; color: var(--gray-400); font-family: var(--font-fa); font-size: 0.88rem; cursor: pointer; border-radius: var(--r-btn); transition: all 0.25s var(--ease); display: flex; align-items: center; gap: 6px; -webkit-tap-highlight-color: transparent; } .btn-prev:hover { color: var(--gray-600); background: var(--gray-50); } .btn-next { padding: 12px 26px; background: var(--navy); color: var(--white); border: none; border-radius: var(--r-btn); font-family: var(--font-fa); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.25s var(--ease); display: flex; align-items: center; gap: 6px; -webkit-tap-highlight-color: transparent; } .btn-next:hover { background: var(--royal); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11, 31, 58, 0.2); } .btn-next:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .btn-prev svg, .btn-next svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } /* ====== LEAD CAPTURE ====== */ .step-lead { text-align: center; } .check-icon-wrap { width: 62px; height: 62px; background: var(--green-light); border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; animation: popIn 0.5s var(--ease-spring) both; } .check-icon-wrap svg { width: 31px; height: 31px; color: var(--green); fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } @keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .step-lead h2 { font-size: 1.12rem; font-weight: 700; color: var(--gray-800); margin-bottom: 6px; } .step-lead .desc { font-size: 0.84rem; color: var(--gray-500); line-height: 1.7; margin-bottom: 18px; } .step-lead .field { text-align: right; } /* Blurred teaser */ .blur-preview { background: linear-gradient(135deg, var(--navy) 0%, var(--royal) 100%); border-radius: 18px; padding: 22px 18px; margin-bottom: 18px; position: relative; overflow: hidden; } .blur-preview::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .blur-preview .blur-label { font-size: 0.74rem; color: rgba(255, 255, 255, 0.5); margin-bottom: 10px; } .blur-row { display: flex; align-items: baseline; justify-content: center; gap: 7px; flex-wrap: nowrap; } .blur-value { font-family: var(--font-num); /* Showing the whole figure is the point — its length is what conveys the scale — so it is sized to stay on one line down to a 320px phone. */ font-size: clamp(1.45rem, 7.6vw, 2.1rem); font-weight: 800; color: var(--gold); white-space: nowrap; /* Enough to defeat reading the digits, light enough that they still look like digits and the number's length stays obvious. */ filter: blur(6.5px); user-select: none; letter-spacing: 0.02em; } .blur-unit { font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.82); white-space: nowrap; } .blur-lock { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.74rem; color: rgba(255, 255, 255, 0.62); } .blur-lock svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; } .phone-wrap { position: relative; } .phone-wrap svg { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--gray-400); fill: none; stroke: currentColor; stroke-width: 2; } .phone-wrap .input { padding-right: 40px; direction: ltr; text-align: right; letter-spacing: 0.06em; } .btn-submit { width: 100%; padding: 14px; background: var(--green); color: var(--white); border: none; border-radius: var(--r-btn); font-family: var(--font-fa); font-size: 0.98rem; font-weight: 700; cursor: pointer; transition: all 0.3s var(--ease); margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; -webkit-tap-highlight-color: transparent; } .btn-submit:hover:not(:disabled) { background: #15803d; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(22, 163, 74, 0.3); } .btn-submit:disabled { opacity: 0.72; cursor: not-allowed; transform: none; } .spinner { width: 19px; height: 19px; border: 2.5px solid rgba(255, 255, 255, 0.3); border-top-color: var(--white); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ====== OTP ====== */ .step-otp { text-align: center; } .otp-inputs { display: flex; gap: 9px; justify-content: center; direction: ltr; margin: 22px 0 6px; } .otp-box { width: 48px; height: 56px; border: 1.5px solid var(--gray-200); border-radius: var(--r-input); text-align: center; font-family: var(--font-num); font-size: 1.4rem; font-weight: 700; color: var(--gray-800); outline: none; transition: all 0.22s var(--ease); background: var(--white); } .otp-box:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .otp-box.filled { border-color: var(--blue); background: var(--blue-50); } .otp-boxes-error .otp-box { border-color: var(--red); } .otp-meta { font-size: 0.78rem; color: var(--gray-500); margin-top: 14px; } .otp-timer { font-family: var(--font-num); color: var(--gray-700); font-weight: 600; } .link-btn { background: none; border: none; color: var(--blue); font-family: var(--font-fa); font-size: 0.82rem; font-weight: 600; cursor: pointer; padding: 4px; } .link-btn:disabled { color: var(--gray-400); cursor: not-allowed; } .debug-code { margin-top: 12px; font-size: 0.8rem; background: var(--amber-light); color: var(--amber); padding: 9px; border-radius: 9px; font-family: var(--font-num); font-weight: 600; } /* ====== RESULT ====== */ .step-result { text-align: center; } .step-result h2 { font-size: 1.2rem; font-weight: 700; color: var(--gray-800); margin-bottom: 5px; } .step-result .subtitle { font-size: 0.78rem; color: var(--gray-500); margin-bottom: 20px; } /* One card, not two: the headline number, the range it sits in, and the per-meter figures read as a single object — the thing a customer screenshots. */ .price-card { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--navy) 0%, var(--royal) 100%); border-radius: 22px; padding: 17px 18px 15px; margin-bottom: 14px; } .price-card > * { position: relative; z-index: 1; } .price-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, var(--gold), transparent); } /* A soft halo behind the headline so the number feels lit rather than printed. */ .price-card::after { content: ''; position: absolute; top: -70px; left: 50%; width: 280px; height: 200px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(201, 169, 97, 0.17), transparent 70%); pointer-events: none; z-index: 0; } .price-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .price-label { font-size: 0.74rem; color: rgba(255, 255, 255, 0.55); } .price-chip { display: flex; align-items: center; gap: 6px; font-size: 0.66rem; color: var(--gold-light); background: rgba(201, 169, 97, 0.12); border: 1px solid rgba(201, 169, 97, 0.22); border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap; } .chip-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.45; flex: none; } .price-hero { display: flex; align-items: baseline; justify-content: center; gap: 7px; margin: 15px 0 3px; font-family: var(--font-num); } .price-hero-num { font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--gold); letter-spacing: -0.03em; text-shadow: 0 0 34px rgba(201, 169, 97, 0.35); } .price-hero-unit { font-family: var(--font-fa); font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.72); } .price-bar { margin-top: 17px; } .price-bar-ends { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; font-family: var(--font-num); font-size: 0.73rem; color: rgba(255, 255, 255, 0.62); } .price-bar-caption { font-family: var(--font-fa); font-size: 0.66rem; color: rgba(255, 255, 255, 0.34); } .price-meter { margin-top: 15px; padding-top: 13px; border-top: 1px dashed rgba(255, 255, 255, 0.13); } .price-meter-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .price-meter-row + .price-meter-row { margin-top: 5px; } .pm-key { font-size: 0.76rem; color: rgba(255, 255, 255, 0.6); } .pm-val { font-family: var(--font-num); font-size: 1.02rem; font-weight: 700; color: var(--gold-light); white-space: nowrap; } .pm-val .pm-unit { font-family: var(--font-fa); font-size: 0.72rem; font-weight: 500; color: rgba(255, 255, 255, 0.5); margin-right: 3px; } .price-meter-row.sub .pm-key { font-size: 0.68rem; color: rgba(255, 255, 255, 0.38); } .price-meter-row.sub .pm-val { font-size: 0.78rem; font-weight: 500; color: rgba(255, 255, 255, 0.56); } .price-meter-row.sub .pm-val .pm-unit { font-size: 0.68rem; color: rgba(255, 255, 255, 0.36); } /* Carries the brand when the card is screenshotted on its own. */ .price-brand { margin-top: 13px; text-align: center; font-size: 0.62rem; color: rgba(255, 255, 255, 0.28); } .price-bar-track { height: 5px; background: rgba(255, 255, 255, 0.08); border-radius: var(--r-pill); position: relative; } .price-bar-fill { position: absolute; top: 0; right: 0; height: 100%; background: linear-gradient(90deg, rgba(37, 99, 235, 0.5), var(--gold), rgba(37, 99, 235, 0.5)); border-radius: var(--r-pill); width: 0; transition: width 1.5s var(--ease) 0.2s; } .price-bar-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 15px; height: 15px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 0 5px rgba(201, 169, 97, 0.15), 0 0 24px var(--gold-glow); transition: transform 0.6s var(--ease-spring) 1s; z-index: 2; } .price-bar-dot::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background: var(--white); border-radius: 50%; } .price-bar-dot.show { transform: translate(-50%, -50%) scale(1); } /* ====== EQUIVALENTS ====== */ .equiv-block { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 18px; padding: 16px 14px; margin-bottom: 14px; } .equiv-title { font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 12px; } .equiv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .equiv-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; padding: 14px 8px; text-align: center; } .equiv-icon-wrap { width: 38px; height: 38px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; margin: 0 auto 9px; } .equiv-icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .equiv-card.gold .equiv-icon-wrap { background: rgba(201, 169, 97, 0.14); color: #A8863F; } .equiv-card.usd .equiv-icon-wrap { background: rgba(22, 163, 74, 0.11); color: var(--green); } .equiv-card .equiv-amount { display: flex; align-items: baseline; justify-content: center; gap: 4px; flex-wrap: wrap; } .equiv-card .equiv-value { font-family: var(--font-num); font-size: 1.25rem; font-weight: 800; color: var(--gray-800); letter-spacing: -0.02em; } .equiv-card .equiv-unit { font-size: 0.78rem; font-weight: 600; color: var(--gray-600); } .equiv-card .equiv-label { font-size: 0.7rem; color: var(--gray-500); margin-top: 4px; } .equiv-card .equiv-rate { font-size: 0.64rem; color: var(--gray-400); margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--gray-200); line-height: 1.6; } /* ====== COMPARABLE ADS ====== */ .comps-block { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 18px; padding: 16px 14px; margin-bottom: 14px; } .comps-title { font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 4px; } .comps-sub { font-size: 0.7rem; color: var(--gray-400); margin-bottom: 14px; line-height: 1.7; } .comp-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; padding: 12px 13px; text-align: right; } .comp-card + .comp-card { margin-top: 9px; } .comp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .comp-size { font-size: 0.82rem; font-weight: 700; color: var(--gray-800); } .comp-price { font-family: var(--font-num); font-size: 0.95rem; font-weight: 800; color: var(--blue); white-space: nowrap; } .comp-meta { display: flex; flex-wrap: wrap; font-size: 0.71rem; color: var(--gray-500); margin-top: 6px; line-height: 1.8; } .comp-meta span { unicode-bidi: isolate; white-space: nowrap; } .comp-meta span:not(:last-child)::after { content: '\00a0•\00a0'; color: var(--gray-300); } .comp-foot { font-size: 0.65rem; color: var(--gray-400); margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--gray-200); line-height: 1.7; } .warn-box { display: flex; gap: 9px; align-items: flex-start; background: var(--amber-light); color: var(--amber); border-radius: var(--r-input); padding: 12px 14px; font-size: 0.76rem; line-height: 1.7; text-align: right; margin-bottom: 14px; } .warn-box svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; } .warn-box strong { font-weight: 800; } /* The result screen runs taller than a phone and the expert-request button sits at its foot, so the arrow invites the scroll that reaches it. */ .scroll-cue { position: fixed; bottom: 16px; left: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--navy); z-index: 60; pointer-events: none; opacity: 0; visibility: hidden; transform: translateX(-50%); transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease); } /* A pool of light instead of a disc. The arrow spends most of the scroll over the white card, where a white glow is simply not there; it only becomes a halo where the arrow crosses the navy page, which is the one place a navy arrow would otherwise vanish. Nothing here has an edge to read as an object. */ .scroll-cue::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle at center, rgba(250, 251, 252, 0.88) 0%, rgba(250, 251, 252, 0.7) 38%, rgba(250, 251, 252, 0) 70%); } .scroll-cue.on { opacity: 1; visibility: visible; animation: cueBounce 1.6s var(--ease) infinite; } .scroll-cue svg { position: relative; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } @keyframes cueBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } } @media (prefers-reduced-motion: reduce) { .scroll-cue.on { animation: none; } } .btn-expert { width: 100%; padding: 15px; background: linear-gradient(135deg, var(--gold) 0%, #b8964f 100%); color: #1a1200; border: none; border-radius: var(--r-btn); font-family: var(--font-fa); font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: all 0.3s var(--ease); display: flex; align-items: center; justify-content: center; gap: 8px; -webkit-tap-highlight-color: transparent; } /* A heartbeat rather than a throb: most of the cycle is still, so the button catches the eye on a page the reader is already scanning without turning into something that has to be looked away from. */ @keyframes cta-beat { 0%, 70%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(201, 169, 97, 0.22); } 80% { transform: scale(1.03); box-shadow: 0 12px 30px rgba(201, 169, 97, 0.42); } 90% { transform: scale(0.995); } } .btn-expert { animation: cta-beat 3.2s var(--ease) infinite; } /* The hover and press states own the transform while the pointer is down, and a finished request should sit quietly. */ .btn-expert:hover, .btn-expert:active, .btn-expert:disabled { animation: none; } .btn-expert:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(201, 169, 97, 0.35); } .btn-expert:disabled { opacity: 0.75; cursor: default; transform: none; box-shadow: none; } .btn-expert svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; } .expert-cta { margin-bottom: 14px; } /* The last one closes the report; nothing follows it to space away from. */ .expert-cta:last-child { margin-bottom: 0; } .expert-done { background: var(--green-light); color: #14532d; border-radius: var(--r-input); padding: 14px; font-size: 0.83rem; font-weight: 600; display: none; } .expert-done.show { display: block; } /* ====== TOAST ====== */ .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(120%); background: var(--gray-800); color: #fff; padding: 13px 22px; border-radius: var(--r-pill); font-size: 0.84rem; z-index: 100; /* An idle toast holds no text but still stands 26px tall from its padding alone, and 120% of that does not clear the 22px it sits above the bottom edge: a dark sliver of it was parked under the scroll arrow at all times. */ visibility: hidden; transition: transform 0.35s var(--ease-spring), visibility 0.35s var(--ease); max-width: calc(100vw - 32px); text-align: center; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); } .toast.show { visibility: visible; transform: translateX(-50%) translateY(0); } .toast.error { background: var(--red); } .toast.success { background: var(--green); } /* ====== FOCUS ====== */ button:focus-visible, .input:focus-visible, .select:focus-visible, .combo-input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* ====== TOUCH ====== */ /* iOS Safari zooms the whole page in the moment a field smaller than 16px takes focus, and it never zooms back out on its own. Sizing every field at 16px is the only fix that survives; disabling zoom in the viewport tag does not, because the browser is free to ignore it. The OTP boxes are already larger. .stepper .input is named on its own because .input alone loses to it. */ @media (pointer: coarse), (max-width: 480px) { .input, .select, .combo-input, .stepper .input { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (max-width: 400px) { /* The token, not .card alone: the header draws its own top corners, and a card rounded tighter than the header leaves its white showing at the corners as two bright slivers. */ :root { --r-card: 20px; } .header { padding: 26px 18px; } .header h1 { font-size: 1.05rem; } .form-body { padding: 26px 18px; } .price-hero-num { font-size: 2.1rem; } .pm-val { font-size: 0.95rem; } .type-card { padding: 20px 6px; } .type-card svg { width: 34px; height: 34px; } /* Steppers need the full width to stay tappable. */ .num-row { padding: 10px 11px; } .num-row label { font-size: 0.84rem; } .stepper .input { width: 44px; } .step-btn { width: 34px; } .otp-box { width: 42px; height: 50px; font-size: 1.25rem; } .check-grid { grid-template-columns: 1fr; } }