| |
| |
| |
| |
|
|
| |
| .pricing-hero { |
| text-align: center; |
| padding: clamp(7rem, 16vh, 10rem) 0 clamp(2.5rem, 6vh, 4rem); |
| } |
| .pricing-hero h1 { |
| font-family: var(--font-display); |
| font-size: clamp(2.5rem, 7vw, 4.5rem); |
| font-weight: 700; |
| color: var(--ink); |
| line-height: 1.05; |
| letter-spacing: -0.02em; |
| margin: 0 0 1.2rem; |
| } |
| .pricing-hero h1 .word { |
| display: inline-block; |
| opacity: 0; |
| transform: translateY(0.4em); |
| transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); |
| } |
| .pricing-hero h1 .word.is-in { opacity: 1; transform: none; } |
| .pricing-hero p { |
| font-size: clamp(1.05rem, 2.2vw, 1.3rem); |
| color: var(--ink); |
| max-width: 38rem; |
| margin: 0 auto; |
| line-height: 1.55; |
| opacity: 0.88; |
| } |
| .pricing-hero p strong { color: var(--rose); font-weight: 700; } |
|
|
| |
| .credits-explainer { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); |
| gap: 1rem; |
| margin: 2.5rem 0 3.5rem; |
| } |
| .credit-card { |
| background: var(--panel-bg); |
| backdrop-filter: blur(14px); |
| -webkit-backdrop-filter: blur(14px); |
| border: 1px solid var(--panel-border); |
| border-radius: 18px; |
| padding: 1.6rem 1.2rem; |
| text-align: center; |
| transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; |
| } |
| .credit-card:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 10px 30px rgba(157, 170, 242, 0.18); |
| } |
| .credit-card.highlight { |
| background: linear-gradient(135deg, rgba(255, 143, 171, 0.22), rgba(157, 170, 242, 0.22)); |
| border-color: rgba(255, 143, 171, 0.4); |
| } |
| .cc-big { |
| font-family: var(--font-mono); |
| font-size: clamp(1.6rem, 3.5vw, 2.2rem); |
| font-weight: 600; |
| color: var(--ink); |
| line-height: 1.1; |
| } |
| .cc-label { |
| font-size: .78rem; |
| text-transform: uppercase; |
| letter-spacing: .08em; |
| color: var(--ink-soft, #6b5b7a); |
| margin-top: .4rem; |
| font-weight: 600; |
| } |
|
|
| |
| .calc-wrap { |
| background: var(--panel-bg); |
| backdrop-filter: blur(14px); |
| -webkit-backdrop-filter: blur(14px); |
| border: 1px solid var(--panel-border); |
| border-radius: 24px; |
| padding: clamp(1.5rem, 4vw, 2.5rem); |
| margin-bottom: 3.5rem; |
| } |
| .calc-wrap h2, |
| .rates-wrap h2, |
| .deposit-flow h2 { |
| font-family: var(--font-display); |
| font-size: clamp(1.5rem, 3vw, 2rem); |
| font-weight: 700; |
| color: var(--ink); |
| margin: 0 0 .3rem; |
| } |
| .calc-blurb { |
| color: var(--ink-soft, #6b5b7a); |
| font-size: .95rem; |
| margin: 0 0 1.5rem; |
| } |
| .calc-grid { |
| display: grid; |
| grid-template-columns: 1.4fr 1fr 1fr; |
| gap: 1rem; |
| align-items: end; |
| } |
| .calc-field { display: flex; flex-direction: column; gap: .4rem; } |
| .calc-field label { |
| font-size: .72rem; |
| text-transform: uppercase; |
| letter-spacing: .08em; |
| font-weight: 700; |
| color: var(--ink-soft, #6b5b7a); |
| } |
| .calc-field select, |
| .calc-field input { |
| width: 100%; |
| padding: .7rem .8rem; |
| border-radius: 12px; |
| border: 1px solid var(--panel-border); |
| background: rgba(255, 255, 255, 0.6); |
| font-family: var(--font-mono); |
| font-size: .9rem; |
| color: var(--ink); |
| transition: border-color .2s ease, box-shadow .2s ease; |
| } |
| .calc-field select:focus, |
| .calc-field input:focus { |
| outline: none; |
| border-color: var(--rose); |
| box-shadow: 0 0 0 3px rgba(255, 143, 171, 0.18); |
| } |
| .calc-result { |
| margin-top: 1.5rem; |
| display: flex; |
| align-items: baseline; |
| gap: .6rem; |
| padding: 1.2rem 1.4rem; |
| background: linear-gradient(135deg, rgba(255, 143, 171, 0.12), rgba(157, 170, 242, 0.12)); |
| border-radius: 16px; |
| border: 1px solid rgba(255, 143, 171, 0.25); |
| } |
| .cr-credits { |
| font-family: var(--font-mono); |
| font-size: clamp(1.8rem, 4vw, 2.6rem); |
| font-weight: 700; |
| color: var(--ink); |
| line-height: 1; |
| } |
| .cr-label { |
| font-size: .8rem; |
| text-transform: uppercase; |
| letter-spacing: .1em; |
| font-weight: 700; |
| color: var(--ink-soft, #6b5b7a); |
| } |
| .cr-usd { |
| margin-left: auto; |
| font-family: var(--font-mono); |
| font-size: .95rem; |
| color: var(--ink-soft, #6b5b7a); |
| } |
|
|
| |
| .rates-wrap { margin-bottom: 3.5rem; } |
| .rates-head { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 1rem; |
| flex-wrap: wrap; |
| margin-bottom: 1rem; |
| } |
| .rates-search { |
| display: flex; |
| align-items: center; |
| gap: .5rem; |
| padding: .55rem .9rem; |
| background: var(--panel-bg); |
| border: 1px solid var(--panel-border); |
| border-radius: 999px; |
| color: var(--ink-soft, #6b5b7a); |
| min-width: 200px; |
| } |
| .rates-search svg { width: 16px; height: 16px; flex-shrink: 0; } |
| .rates-search input { |
| border: none; |
| background: transparent; |
| font-family: inherit; |
| font-size: .9rem; |
| color: var(--ink); |
| width: 100%; |
| } |
| .rates-search input:focus { outline: none; } |
| .rates-scroll { |
| overflow-x: auto; |
| border-radius: 18px; |
| background: var(--panel-bg); |
| backdrop-filter: blur(14px); |
| -webkit-backdrop-filter: blur(14px); |
| border: 1px solid var(--panel-border); |
| } |
| .rates-table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: .9rem; |
| min-width: 560px; |
| } |
| .rates-table thead th { |
| text-align: left; |
| font-weight: 700; |
| font-size: .72rem; |
| text-transform: uppercase; |
| letter-spacing: .08em; |
| color: var(--ink-soft, #6b5b7a); |
| padding: .9rem 1rem; |
| border-bottom: 1px solid var(--panel-border); |
| white-space: nowrap; |
| vertical-align: bottom; |
| } |
| .rates-table thead th small { font-weight: 500; opacity: .7; text-transform: none; letter-spacing: 0; } |
| .rates-table tbody td { |
| padding: .7rem 1rem; |
| border-bottom: 1px solid rgba(157, 170, 242, 0.1); |
| color: var(--ink); |
| vertical-align: middle; |
| } |
| .rates-table tbody tr:last-child td { border-bottom: none; } |
| .rates-table tbody tr:hover td { background: rgba(157, 170, 242, 0.06); } |
| .rates-table td.num, .rates-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } |
| .rates-table .model-name { font-family: var(--font-mono); font-size: .82rem; } |
| .rates-table .free-badge { |
| display: inline-block; |
| font-size: .62rem; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: .05em; |
| padding: .1rem .4rem; |
| border-radius: 6px; |
| background: rgba(76, 175, 80, 0.16); |
| color: #2e7d32; |
| margin-left: .4rem; |
| vertical-align: middle; |
| } |
| .rates-loading, .rates-empty { text-align: center; color: var(--ink-soft, #6b5b7a); padding: 2rem; } |
| .rates-note { |
| font-size: .8rem; |
| color: var(--ink-soft, #6b5b7a); |
| margin-top: .8rem; |
| line-height: 1.5; |
| } |
|
|
| |
| .deposit-flow { |
| background: var(--panel-bg); |
| backdrop-filter: blur(14px); |
| -webkit-backdrop-filter: blur(14px); |
| border: 1px solid var(--panel-border); |
| border-radius: 24px; |
| padding: clamp(1.5rem, 4vw, 2.5rem); |
| margin-bottom: 3rem; |
| } |
| .flow-steps { |
| list-style: none; |
| padding: 0; |
| margin: 1.5rem 0; |
| display: grid; |
| gap: 1rem; |
| } |
| .flow-steps li { |
| display: flex; |
| align-items: flex-start; |
| gap: 1rem; |
| } |
| .step-num { |
| flex-shrink: 0; |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, var(--rose), var(--whale)); |
| color: #fff; |
| font-family: var(--font-display); |
| font-weight: 700; |
| font-size: 1.1rem; |
| display: grid; |
| place-items: center; |
| } |
| .flow-steps strong { color: var(--ink); font-weight: 700; } |
| .flow-steps div { color: var(--ink); opacity: .85; line-height: 1.5; font-size: .95rem; } |
| .deposit-caveat { |
| font-size: .82rem; |
| color: var(--ink-soft, #6b5b7a); |
| padding: .8rem 1rem; |
| background: rgba(255, 143, 171, 0.08); |
| border-radius: 10px; |
| border-left: 3px solid var(--rose); |
| margin: 0 0 1.5rem; |
| } |
| .pricing-cta { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: .9rem 2rem; |
| border-radius: 999px; |
| background: linear-gradient(135deg, var(--rose), var(--whale)); |
| color: #fff; |
| font-family: var(--font-display); |
| font-weight: 700; |
| font-size: 1rem; |
| text-decoration: none; |
| transition: transform .2s ease, box-shadow .2s ease; |
| min-height: 48px; |
| } |
| .pricing-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255, 143, 171, 0.3); } |
| .pricing-cta:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; } |
|
|
| |
| @media (max-width: 720px) { |
| .calc-grid { grid-template-columns: 1fr; } |
| .calc-result { flex-wrap: wrap; } |
| .cr-usd { margin-left: 0; width: 100%; } |
| .rates-head { flex-direction: column; align-items: stretch; } |
| .rates-search { min-width: 0; } |
| } |
|
|
| |
| @media (prefers-reduced-motion: reduce) { |
| .pricing-hero h1 .word { transition: none; opacity: 1; transform: none; } |
| .pricing-hero h1 .word.is-in { opacity: 1; transform: none; } |
| .credit-card:hover, .pricing-cta:hover { transform: none; } |
| } |
|
|
