1191 lines
39 KiB
HTML
1191 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<meta name="theme-color" content="#05050a" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="apple-mobile-web-app-title" content="Quinn" />
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<link rel="icon" type="image/svg+xml" href="/icon-64.svg" />
|
|
<script>(function(){var IOS_SIZES={'7to12':[57,72,76,114,120,144,152],'13':[120,152,167,180],'14to15':[120,152,167,180],'16plus':[120,152,167,180]};function parseIosVersion(ua){var m=/OS (\d+)_/.exec(ua);return m?parseInt(m[1],10):null;}function mapIosBucket(v){if(v<=12)return'7to12';if(v===13)return'13';if(v<=15)return'14to15';return'16plus';}function detectIconBucket(ua){if(/iPhone|iPad|iPod/.test(ua)){var v=parseIosVersion(ua);return{platform:'ios',iosBucket:v!==null?mapIosBucket(v):'16plus'};}if(/Android/.test(ua))return{platform:'android'};return{platform:'other'};}function injectIconTags(doc){var ua=typeof navigator!=='undefined'?navigator.userAgent:'';var bucket=detectIconBucket(ua);var ml=doc.querySelector('link[rel="manifest"]');if(bucket.platform==='android'){if(ml)ml.href='/manifest-android.webmanifest';return;}if(bucket.platform==='ios'&&bucket.iosBucket){var b=bucket.iosBucket;if(ml)ml.href='/manifest-ios-'+b+'.webmanifest';var sizes=IOS_SIZES[b];for(var i=0;i<sizes.length;i++){var lnk=doc.createElement('link');lnk.rel='apple-touch-icon';lnk.setAttribute('sizes',sizes[i]+'x'+sizes[i]);lnk.href='/icons/ios/'+b+'/icon-'+sizes[i]+'.png';doc.head.appendChild(lnk);}return;}var lnk=doc.createElement('link');lnk.rel='apple-touch-icon';lnk.setAttribute('sizes','180x180');lnk.href='/icons/ios/16plus/icon-180.png';doc.head.appendChild(lnk);}injectIconTags(document);}());</script>
|
|
<title>Quinn</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@400;600&family=Parisienne&display=swap" rel="stylesheet" />
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
html, body { margin: 0; padding: 0; background: #0a0a0f; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
|
|
|
|
/* vip-mobile-rules */
|
|
.vip-root { /* base from inline; mobile overrides below */ }
|
|
.vip-content { /* base from inline */ }
|
|
.vip-article { /* base from inline */ }
|
|
.vip-password-form { /* base from inline */ }
|
|
.vip-quote-meta { /* base from inline */ }
|
|
.vip-h1 { /* base from inline */ }
|
|
.vip-h2 { /* base from inline */ }
|
|
.vip-h3 { /* base from inline */ }
|
|
.vip-p { /* base from inline */ }
|
|
.vip-li { /* base from inline */ }
|
|
.vip-table-wrap { /* base from inline */ }
|
|
.vip-table { /* base from inline */ }
|
|
.vip-th { /* base from inline */ }
|
|
.vip-td { /* base from inline */ }
|
|
|
|
/* vip-personal-note: pink, italic, intimate */
|
|
.vip-personal-note {
|
|
margin: 8px 0;
|
|
white-space: pre-line;
|
|
max-width: 560px;
|
|
font-family: 'Parisienne', 'Snell Roundhand', 'Apple Chancery', cursive;
|
|
font-size: 30px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 1.35;
|
|
color: #f4a5c0;
|
|
letter-spacing: 0.005em;
|
|
text-align: left;
|
|
}
|
|
.vip-doc-intro .vip-personal-note { margin: 0 0 8px; }
|
|
@media (max-width: 720px) {
|
|
.vip-personal-note { font-size: 24px; max-width: 100%; }
|
|
}
|
|
@media (max-width: 430px) {
|
|
.vip-personal-note { font-size: 20px; line-height: 1.4; }
|
|
}
|
|
|
|
/* vip-text-well: prose has tighter measure than the wide container */
|
|
.vip-section-body { max-width: 720px; margin: 0 auto; }
|
|
.vip-section-hero .vip-doc-intro { max-width: 640px; }
|
|
/* but the option-card grid and the table get the full container width */
|
|
.vip-section-body .vip-pricing,
|
|
.vip-section-body .vip-table-wrap { max-width: none; }
|
|
/* Salutation spacing */
|
|
.vip-doc-intro .vip-p:first-child { margin-bottom: 6px; }
|
|
|
|
/* vip-section-nav */
|
|
.vip-section-nav {
|
|
position: fixed;
|
|
top: 50%;
|
|
right: 28px;
|
|
transform: translateY(-50%);
|
|
z-index: 10;
|
|
padding: 14px 0;
|
|
pointer-events: auto;
|
|
}
|
|
.vip-section-nav-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
.vip-section-nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
text-decoration: none;
|
|
color: rgba(212,175,55,0.55);
|
|
font-family: 'Menlo', 'Monaco', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
transition: color 220ms ease, transform 220ms ease;
|
|
}
|
|
.vip-section-nav-link::before {
|
|
content: '';
|
|
display: block;
|
|
width: 18px;
|
|
height: 1px;
|
|
background: currentColor;
|
|
opacity: 0.6;
|
|
transition: width 280ms ease;
|
|
}
|
|
.vip-section-nav-item.is-active .vip-section-nav-link {
|
|
color: #D4AF37;
|
|
}
|
|
.vip-section-nav-item.is-active .vip-section-nav-link::before {
|
|
width: 40px;
|
|
opacity: 1;
|
|
}
|
|
.vip-section-nav-link:hover { color: #D4AF37; }
|
|
.vip-section-nav-index {
|
|
flex: 0 0 auto;
|
|
opacity: 0.7;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.vip-section-nav-label {
|
|
max-width: 140px;
|
|
opacity: 0;
|
|
transform: translateX(-4px);
|
|
transition: opacity 220ms ease, transform 220ms ease;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.vip-section-nav:hover .vip-section-nav-label,
|
|
.vip-section-nav-item.is-active .vip-section-nav-label {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
@media (max-width: 980px) {
|
|
.vip-section-nav { display: none; }
|
|
}
|
|
|
|
/* vip-selectable: option cards as buttons + selection state */
|
|
.vip-option-card {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.vip-option-card:focus-visible {
|
|
outline: 2px solid #D4AF37;
|
|
outline-offset: 4px;
|
|
}
|
|
.vip-option-card.is-selected {
|
|
border-color: #D4AF37 !important;
|
|
background: rgba(212,175,55,0.08) !important;
|
|
box-shadow: 0 0 0 1px rgba(212,175,55,0.45) inset, 0 8px 32px rgba(212,175,55,0.10);
|
|
}
|
|
.vip-pricing-feature .vip-option-card.is-selected {
|
|
background: linear-gradient(160deg, rgba(212,175,55,0.18) 0%, rgba(212,175,55,0.04) 100%) !important;
|
|
box-shadow:
|
|
inset 0 1px 0 0 #D4AF37,
|
|
0 0 0 1px rgba(212,175,55,0.55) inset,
|
|
0 8px 32px rgba(212,175,55,0.14);
|
|
}
|
|
|
|
/* vip-confirm-panel: appears in the last numbered section */
|
|
.vip-confirm-panel {
|
|
margin-top: 32px;
|
|
padding: 26px 28px;
|
|
border: 1px solid rgba(212,175,55,0.32);
|
|
border-radius: 12px;
|
|
background: rgba(212,175,55,0.05);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
align-items: flex-start;
|
|
}
|
|
.vip-confirm-summary {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
color: #d9cdb4;
|
|
}
|
|
.vip-confirm-code {
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-size: 22px;
|
|
color: #D4AF37;
|
|
margin: 0 4px;
|
|
}
|
|
.vip-confirm-button {
|
|
appearance: none;
|
|
border: none;
|
|
background: linear-gradient(180deg, #D4AF37, #b88f1f);
|
|
color: #0a0a0f;
|
|
padding: 12px 22px;
|
|
border-radius: 8px;
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: transform 180ms ease, box-shadow 180ms ease;
|
|
}
|
|
.vip-confirm-button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(212,175,55,0.25); }
|
|
.vip-confirm-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
|
|
.vip-confirm-hint {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: #a39079;
|
|
font-style: italic;
|
|
}
|
|
.vip-confirm-error {
|
|
margin: 0;
|
|
font-size: 12px;
|
|
color: #d47070;
|
|
}
|
|
|
|
/* vip-terms: restyle the <ul> inside a section body as numbered milestone tiles */
|
|
.vip-section-body > ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 8px 0 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 14px;
|
|
}
|
|
.vip-section-body > ul > li {
|
|
position: relative;
|
|
padding: 18px 18px 18px 56px;
|
|
border: 1px solid rgba(212,175,55,0.18);
|
|
border-radius: 12px;
|
|
background: rgba(212,175,55,0.025);
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
color: #c8b58a;
|
|
counter-increment: term-counter;
|
|
}
|
|
.vip-section-body > ul { counter-reset: term-counter; }
|
|
.vip-section-body > ul > li::before {
|
|
content: counter(term-counter, decimal-leading-zero);
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 18px;
|
|
font-family: 'Menlo', 'Monaco', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.18em;
|
|
color: rgba(212,175,55,0.62);
|
|
}
|
|
.vip-section-body > ul > li::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 22px;
|
|
left: 42px;
|
|
width: 1px;
|
|
height: 14px;
|
|
background: rgba(212,175,55,0.32);
|
|
}
|
|
|
|
/* vip-confirmed: dedicated confirmation page */
|
|
.vip-confirmed-hero {
|
|
text-align: center;
|
|
padding: 24px 0 40px;
|
|
border-bottom: 1px solid rgba(212,175,55,0.18);
|
|
margin-bottom: 56px;
|
|
}
|
|
.vip-confirmed-eyebrow {
|
|
margin: 0 0 16px;
|
|
font-family: 'Menlo', 'Monaco', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.24em;
|
|
text-transform: uppercase;
|
|
color: rgba(212,175,55,0.62);
|
|
}
|
|
.vip-confirmed-title {
|
|
margin: 0;
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-size: 42px;
|
|
font-weight: 400;
|
|
color: #f0e6d3;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.vip-confirmed-code { color: #D4AF37; }
|
|
.vip-confirmed-meta {
|
|
margin: 10px 0 0;
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-style: italic;
|
|
font-size: 18px;
|
|
color: #c8b58a;
|
|
}
|
|
.vip-confirmed-allin {
|
|
margin: 22px 0 0;
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 14px;
|
|
padding: 12px 22px;
|
|
border: 1px solid rgba(212,175,55,0.32);
|
|
border-radius: 999px;
|
|
background: rgba(212,175,55,0.05);
|
|
}
|
|
.vip-confirmed-allin-label {
|
|
font-family: 'Menlo', 'Monaco', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: #a39079;
|
|
}
|
|
.vip-confirmed-allin-value {
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-size: 22px;
|
|
color: #D4AF37;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.vip-confirmed-section { margin-bottom: 48px; }
|
|
.vip-confirmed-body {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
color: #d9cdb4;
|
|
max-width: 640px;
|
|
}
|
|
.vip-deposit-methods {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 14px;
|
|
margin-top: 12px;
|
|
}
|
|
.vip-deposit-card {
|
|
padding: 18px 20px;
|
|
border: 1px solid rgba(212,175,55,0.18);
|
|
border-radius: 12px;
|
|
background: rgba(212,175,55,0.025);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.vip-deposit-card-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
}
|
|
.vip-deposit-card-name {
|
|
/* vip-deposit-card-name-v2 */
|
|
margin: 0 0 4px;
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-weight: 400;
|
|
font-size: 22px;
|
|
color: #D4AF37;
|
|
letter-spacing: 0.005em;
|
|
line-height: 1.15;
|
|
}
|
|
.vip-deposit-card-tag {
|
|
font-family: 'Menlo', 'Monaco', monospace;
|
|
font-size: 9px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: rgba(212,175,55,0.55);
|
|
}
|
|
.vip-deposit-card-value {
|
|
margin: 8px 0 0;
|
|
padding-top: 8px;
|
|
border-top: 1px dashed rgba(212,175,55,0.16);
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-style: italic;
|
|
font-size: 13px;
|
|
color: rgba(212,175,55,0.78);
|
|
letter-spacing: 0.01em;
|
|
}
|
|
.vip-deposit-card-body {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
color: #c8b58a;
|
|
}
|
|
.vip-confirmed-footer {
|
|
margin-top: 48px;
|
|
padding-top: 28px;
|
|
border-top: 1px solid rgba(212,175,55,0.18);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.vip-confirmed-back {
|
|
font-family: 'Menlo', 'Monaco', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: rgba(212,175,55,0.62);
|
|
text-decoration: none;
|
|
}
|
|
.vip-confirmed-back:hover { color: #D4AF37; }
|
|
.vip-confirmed-signoff {
|
|
margin: 0;
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-style: italic;
|
|
font-size: 22px;
|
|
color: #D4AF37;
|
|
}
|
|
.vip-confirmed-error {
|
|
margin-top: 24px;
|
|
padding: 12px 18px;
|
|
border: 1px solid rgba(212,112,112,0.32);
|
|
border-radius: 8px;
|
|
color: #d47070;
|
|
font-size: 13px;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.vip-section-body > ul { grid-template-columns: 1fr; }
|
|
.vip-deposit-methods { grid-template-columns: 1fr; }
|
|
.vip-confirmed-title { font-size: 30px; }
|
|
.vip-confirmed-allin { padding: 10px 18px; }
|
|
.vip-confirmed-allin-value { font-size: 18px; }
|
|
}
|
|
|
|
/* vip-deposit-recipient: 'Received by Cocotte Maison' line above method cards */
|
|
.vip-deposit-recipient {
|
|
margin: -8px 0 18px;
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
padding: 8px 14px;
|
|
border: 1px solid rgba(212,175,55,0.22);
|
|
border-radius: 999px;
|
|
background: rgba(212,175,55,0.04);
|
|
}
|
|
.vip-deposit-recipient-label {
|
|
font-family: 'Menlo', 'Monaco', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: #a39079;
|
|
}
|
|
.vip-deposit-recipient-name {
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-size: 16px;
|
|
font-style: italic;
|
|
color: #D4AF37;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
/* vip-deposit-meta-row: recipient pill left, toggle pills right, same baseline */
|
|
.vip-deposit-meta-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin: -4px 0 18px;
|
|
}
|
|
.vip-deposit-meta-row .vip-deposit-recipient { margin: 0; }
|
|
.vip-deposit-meta-row .vip-deposit-toggle { margin: 0; }
|
|
|
|
/* vip-deposit-toggle: Euro common / All supported tab buttons */
|
|
.vip-deposit-toggle {
|
|
display: inline-flex;
|
|
gap: 2px;
|
|
padding: 3px;
|
|
margin: 0;
|
|
border: 1px solid rgba(212,175,55,0.22);
|
|
border-radius: 999px;
|
|
background: rgba(212,175,55,0.04);
|
|
}
|
|
.vip-deposit-toggle-btn {
|
|
appearance: none;
|
|
border: none;
|
|
background: transparent;
|
|
color: #a39079;
|
|
font-family: 'Menlo', 'Monaco', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
padding: 6px 14px;
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
transition: background 200ms ease, color 200ms ease;
|
|
}
|
|
.vip-deposit-toggle-btn:hover { color: #c8b58a; }
|
|
.vip-deposit-toggle-btn.is-active {
|
|
background: rgba(212,175,55,0.18);
|
|
color: #D4AF37;
|
|
}
|
|
/* vip-contact-form: appears after a method is selected */
|
|
.vip-contact-form { animation: vip-fade-in 0.3s ease both; }
|
|
.vip-contact-tabs {
|
|
display: inline-flex;
|
|
gap: 2px;
|
|
padding: 3px;
|
|
margin: 4px 0 12px;
|
|
border: 1px solid rgba(212,175,55,0.22);
|
|
border-radius: 999px;
|
|
background: rgba(212,175,55,0.04);
|
|
}
|
|
.vip-contact-tab {
|
|
appearance: none;
|
|
border: none;
|
|
background: transparent;
|
|
color: #a39079;
|
|
font-family: 'Menlo', 'Monaco', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
padding: 6px 14px;
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
}
|
|
.vip-contact-tab.is-active { background: rgba(212,175,55,0.18); color: #D4AF37; }
|
|
.vip-contact-input {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 420px;
|
|
padding: 12px 14px;
|
|
margin-top: 4px;
|
|
background: rgba(8, 4, 12, 0.55);
|
|
color: #f3e7c8;
|
|
border: 1px solid rgba(214, 175, 78, 0.35);
|
|
border-radius: 8px;
|
|
font-family: inherit;
|
|
font-size: 15px;
|
|
outline: none;
|
|
}
|
|
.vip-contact-input:focus { border-color: #D4AF37; }
|
|
.vip-contact-submit {
|
|
appearance: none;
|
|
border: none;
|
|
background: linear-gradient(180deg, #D4AF37, #b88f1f);
|
|
color: #0a0a0f;
|
|
padding: 12px 22px;
|
|
margin-top: 14px;
|
|
border-radius: 8px;
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: transform 180ms ease, box-shadow 180ms ease;
|
|
}
|
|
.vip-contact-submit:hover:not(:disabled) {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 8px 24px rgba(212,175,55,0.25);
|
|
}
|
|
.vip-contact-submit:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
.vip-contact-error {
|
|
margin-top: 10px;
|
|
color: #d47070;
|
|
font-size: 12px;
|
|
}
|
|
/* vip-confirmed-final: done-state replacement for sections 02/03 */
|
|
.vip-confirmed-final {
|
|
text-align: center;
|
|
padding: 32px 0;
|
|
}
|
|
.vip-confirmed-final-title {
|
|
margin: 0;
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-size: 38px;
|
|
font-weight: 400;
|
|
color: #D4AF37;
|
|
}
|
|
.vip-confirmed-final-body {
|
|
margin: 14px auto 0;
|
|
max-width: 520px;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
color: #d9cdb4;
|
|
}
|
|
|
|
/* vip-next-steps: numbered timeline */
|
|
.vip-next-steps {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
counter-reset: nxt;
|
|
}
|
|
.vip-next-steps > li {
|
|
position: relative;
|
|
padding: 14px 0 14px 56px;
|
|
border-top: 1px dashed rgba(212,175,55,0.18);
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
color: #c8b58a;
|
|
counter-increment: nxt;
|
|
}
|
|
.vip-next-steps > li:first-child { border-top: none; }
|
|
.vip-next-steps > li::before {
|
|
content: counter(nxt, decimal-leading-zero);
|
|
position: absolute;
|
|
top: 14px;
|
|
left: 0;
|
|
font-family: 'Menlo', 'Monaco', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.18em;
|
|
color: rgba(212,175,55,0.62);
|
|
}
|
|
.vip-next-step-label {
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-style: italic;
|
|
color: #D4AF37;
|
|
}
|
|
|
|
/* vip-deposit-section: groupings within deposit methods */
|
|
.vip-deposit-section {
|
|
grid-column: 1 / -1;
|
|
}
|
|
.vip-deposit-section-head {
|
|
margin: 24px 0 14px;
|
|
}
|
|
.vip-deposit-section-head:first-child { margin-top: 0; }
|
|
.vip-deposit-section-title {
|
|
margin: 0;
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
color: #D4AF37;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
.vip-deposit-section-subtitle {
|
|
margin: 6px 0 0;
|
|
font-size: 13px;
|
|
color: #c8b58a;
|
|
line-height: 1.5;
|
|
}
|
|
.vip-deposit-section-warning {
|
|
margin: 10px 0 0;
|
|
padding: 8px 12px;
|
|
font-size: 11px;
|
|
color: #e6c47a;
|
|
background: rgba(212,175,55,0.08);
|
|
border-left: 2px solid rgba(212,175,55,0.55);
|
|
border-radius: 4px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.vip-deposit-section-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 14px;
|
|
margin-top: 8px;
|
|
}
|
|
@media (max-width: 720px) {
|
|
.vip-deposit-section-cards { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* vip-skel: shimmering skeleton blocks */
|
|
@keyframes vip-shimmer {
|
|
0% { background-position: -480px 0; }
|
|
100% { background-position: 480px 0; }
|
|
}
|
|
.vip-skel {
|
|
display: inline-block;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(212,175,55,0.05) 0%,
|
|
rgba(212,175,55,0.18) 50%,
|
|
rgba(212,175,55,0.05) 100%
|
|
);
|
|
background-size: 480px 100%;
|
|
animation: vip-shimmer 1.4s infinite linear;
|
|
border-radius: 4px;
|
|
color: transparent !important;
|
|
}
|
|
.vip-skel-line {
|
|
display: block;
|
|
height: 12px;
|
|
margin: 6px 0;
|
|
}
|
|
.vip-skel-line.w-40 { width: 40%; }
|
|
.vip-skel-line.w-60 { width: 60%; }
|
|
.vip-skel-line.w-80 { width: 80%; }
|
|
.vip-skel-line.w-100 { width: 100%; }
|
|
.vip-skel-pill {
|
|
height: 18px;
|
|
width: 90px;
|
|
border-radius: 999px;
|
|
}
|
|
.vip-skel-title {
|
|
height: 22px;
|
|
width: 50%;
|
|
}
|
|
.vip-skel-code {
|
|
height: 28px;
|
|
width: 70%;
|
|
margin-top: 8px;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.vip-skel { animation: none; }
|
|
}
|
|
|
|
/* vip-parallax: section bands, ghost numerals, scroll reveal */
|
|
.vip-doc {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
width: 100%;
|
|
}
|
|
.vip-section {
|
|
position: relative;
|
|
width: 100vw;
|
|
margin-left: calc(-50vw + 50%);
|
|
padding: 96px 24px;
|
|
overflow: hidden;
|
|
}
|
|
.vip-section-inner {
|
|
width: 100%;
|
|
max-width: 920px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
/* Hero */
|
|
.vip-section-hero {
|
|
padding-top: 72px;
|
|
padding-bottom: 72px;
|
|
text-align: center;
|
|
background:
|
|
radial-gradient(ellipse 70% 55% at 50% 0%, rgba(212,175,55,0.10) 0%, transparent 65%),
|
|
#0a0a0f;
|
|
}
|
|
.vip-section-hero .vip-doc-title { font-size: 60px; line-height: 1.04; }
|
|
.vip-section-hero .vip-doc-subtitle { font-size: 24px; margin-top: 16px; }
|
|
.vip-stamp-hero {
|
|
flex-direction: row !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
gap: 10px !important;
|
|
padding-top: 0 !important;
|
|
margin-bottom: 28px;
|
|
}
|
|
.vip-stamp-hero > span + span::before {
|
|
content: '·';
|
|
margin-right: 10px;
|
|
opacity: 0.5;
|
|
}
|
|
.vip-doc-intro {
|
|
max-width: 580px;
|
|
margin: 56px auto 0;
|
|
text-align: left;
|
|
font-size: 16px;
|
|
line-height: 1.7;
|
|
color: #d9cdb4;
|
|
}
|
|
|
|
.vip-section-hero .vip-doc-intro { text-align: left; }
|
|
.vip-doc-intro .vip-p { font-size: 16px; }
|
|
/* Alternating bands */
|
|
.vip-section-band { padding: 80px 24px; }
|
|
.vip-section-a {
|
|
background: #0a0a0f;
|
|
border-top: 1px solid rgba(212,175,55,0.10);
|
|
border-bottom: 1px solid rgba(212,175,55,0.10);
|
|
}
|
|
.vip-section-b {
|
|
background:
|
|
radial-gradient(ellipse 80% 40% at 50% 0%, rgba(212,175,55,0.09) 0%, transparent 60%),
|
|
#121218;
|
|
}
|
|
/* Section head with ghost numeral */
|
|
.vip-section-head {
|
|
position: relative;
|
|
margin-bottom: 36px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.vip-section-index {
|
|
font-family: 'Menlo', 'Monaco', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: rgba(212,175,55,0.55);
|
|
}
|
|
.vip-section-index::before {
|
|
content: 'Section ';
|
|
opacity: 0.7;
|
|
}
|
|
.vip-section-heading {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 0;
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-size: 36px;
|
|
font-weight: 400;
|
|
color: #D4AF37;
|
|
letter-spacing: -0.008em;
|
|
line-height: 1.1;
|
|
}
|
|
.vip-section-heading::after {
|
|
content: '';
|
|
display: block;
|
|
margin-top: 14px;
|
|
width: 32px;
|
|
height: 1px;
|
|
background: rgba(212,175,55,0.5);
|
|
}
|
|
.vip-section-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
/* Sign-off / expires band */
|
|
.vip-section-sign {
|
|
padding: 64px 24px 80px;
|
|
background: #0a0a0f;
|
|
text-align: center;
|
|
border-top: 1px solid rgba(212,175,55,0.10);
|
|
}
|
|
.vip-section-sign .vip-signature {
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
.vip-expires {
|
|
margin: 22px 0 0;
|
|
font-family: 'Menlo', 'Monaco', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: rgba(212,175,55,0.55);
|
|
}
|
|
/* Scroll reveal */
|
|
.vip-section[data-revealable] {
|
|
opacity: 0;
|
|
transform: translateY(28px);
|
|
transition: opacity 750ms ease, transform 750ms ease;
|
|
}
|
|
.vip-section[data-revealable].is-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.vip-section-hero { opacity: 1 !important; transform: none !important; }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.vip-section[data-revealable] {
|
|
opacity: 1;
|
|
transform: none;
|
|
transition: none;
|
|
}
|
|
}
|
|
/* Within sections, h2 from the legacy renderer would re-introduce headings;
|
|
the section already supplies one, so suppress in-body h2s and the old
|
|
.vip-h2 styling within parallax sections. */
|
|
.vip-section-body .vip-h2 { display: none; }
|
|
|
|
@media (max-width: 720px) {
|
|
.vip-section { padding: 64px 18px; }
|
|
.vip-section-hero { padding: 48px 18px 60px; }
|
|
.vip-section-hero .vip-doc-title { font-size: 36px; }
|
|
.vip-section-hero .vip-doc-subtitle { font-size: 18px; }
|
|
.vip-doc-intro { margin-top: 36px; font-size: 15px; }
|
|
.vip-section-band { padding: 56px 18px; }
|
|
.vip-section-head { margin-bottom: 26px; }
|
|
.vip-section-heading { font-size: 26px; }
|
|
.vip-section-sign { padding: 48px 18px 60px; }
|
|
}
|
|
|
|
/* vip-pricing-grid: options as grouped cards */
|
|
.vip-pricing { display: flex; flex-direction: column; gap: 18px; margin: 6px 0 4px; }
|
|
.vip-pricing-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 12px;
|
|
}
|
|
.vip-pricing-feature .vip-pricing-row { grid-template-columns: 1fr; }
|
|
.vip-option-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 18px 18px 16px;
|
|
border: 1px solid rgba(212,175,55,0.22);
|
|
border-radius: 12px;
|
|
background: rgba(212,175,55,0.028);
|
|
transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
|
|
}
|
|
.vip-option-card:hover {
|
|
border-color: rgba(212,175,55,0.48);
|
|
background: rgba(212,175,55,0.055);
|
|
transform: translateY(-1px);
|
|
}
|
|
.vip-pricing-feature .vip-option-card {
|
|
position: relative;
|
|
border-color: rgba(212,175,55,0.55);
|
|
border-left: 3px solid #D4AF37;
|
|
background: linear-gradient(160deg, rgba(212,175,55,0.10) 0%, rgba(212,175,55,0.025) 100%);
|
|
box-shadow:
|
|
inset 0 1px 0 0 rgba(212,175,55,0.45),
|
|
0 4px 24px rgba(212,175,55,0.06);
|
|
padding: 24px 24px 22px;
|
|
}
|
|
.vip-pricing-feature .vip-option-card::before {
|
|
content: 'Week';
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 18px;
|
|
font-family: 'Menlo', 'Monaco', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: #D4AF37;
|
|
padding: 4px 8px;
|
|
border: 1px solid rgba(212,175,55,0.45);
|
|
border-radius: 4px;
|
|
background: rgba(10,10,15,0.5);
|
|
}
|
|
.vip-pricing-feature .vip-option-head .vip-option-duration { visibility: hidden; }
|
|
.vip-option-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
}
|
|
.vip-option-code {
|
|
font-family: 'Menlo', 'Monaco', monospace;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: rgba(212,175,55,0.62);
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
}
|
|
.vip-pricing-feature .vip-option-code { font-size: 13px; color: #D4AF37; }
|
|
.vip-option-duration {
|
|
font-size: 10px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: #a39079;
|
|
}
|
|
.vip-option-window {
|
|
margin: 0;
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-style: italic;
|
|
font-size: 16px;
|
|
color: #c8b58a;
|
|
line-height: 1.35;
|
|
}
|
|
.vip-option-fees {
|
|
margin: 0;
|
|
padding: 12px 0 0;
|
|
border-top: 1px dashed rgba(212,175,55,0.18);
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 4px 12px;
|
|
font-size: 13px;
|
|
}
|
|
.vip-option-fees dt { margin: 0; color: #a39079; }
|
|
.vip-option-fees dd {
|
|
margin: 0;
|
|
color: #c8b58a;
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.vip-option-allin {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
margin-top: 2px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid rgba(212,175,55,0.22);
|
|
}
|
|
.vip-option-allin-label {
|
|
font-size: 10px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: rgba(212,175,55,0.62);
|
|
}
|
|
.vip-option-allin-value {
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-size: 30px;
|
|
color: #D4AF37;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1;
|
|
}
|
|
.vip-pricing-feature .vip-option-allin-value { font-size: 34px; }
|
|
|
|
@media (max-width: 720px) {
|
|
.vip-pricing-row { grid-template-columns: 1fr; gap: 10px; }
|
|
.vip-option-card { padding: 16px; gap: 10px; }
|
|
.vip-pricing-feature .vip-option-card { padding: 18px; }
|
|
.vip-option-code { font-size: 12px; letter-spacing: 0.20em; }
|
|
.vip-pricing-feature .vip-option-code { font-size: 12px; letter-spacing: 0.20em; }
|
|
.vip-option-allin-value { font-size: 26px; }
|
|
.vip-pricing-feature .vip-option-allin-value { font-size: 30px; }
|
|
}
|
|
|
|
/* vip-presentational: document-style hero + signature + section anchors */
|
|
.vip-content > header { display: none; } /* drop outer eyebrow */
|
|
.vip-article { position: relative; overflow: hidden; }
|
|
.vip-article::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 22px;
|
|
top: 64px;
|
|
bottom: 64px;
|
|
width: 1px;
|
|
background: linear-gradient(to bottom,
|
|
transparent,
|
|
rgba(212,175,55,0.28) 18%,
|
|
rgba(212,175,55,0.28) 82%,
|
|
transparent);
|
|
}
|
|
.vip-hero {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 32px;
|
|
margin-bottom: 30px;
|
|
padding-bottom: 24px;
|
|
border-bottom: 1px solid rgba(212,175,55,0.18);
|
|
}
|
|
.vip-hero-title { flex: 1; min-width: 0; }
|
|
.vip-doc-title {
|
|
margin: 0;
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-weight: 400;
|
|
font-size: 44px;
|
|
line-height: 1.08;
|
|
color: #D4AF37;
|
|
letter-spacing: -0.012em;
|
|
}
|
|
.vip-doc-subtitle {
|
|
margin: 10px 0 0;
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-weight: 400;
|
|
font-size: 21px;
|
|
font-style: italic;
|
|
color: #c8b58a;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
.vip-stamp {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 6px;
|
|
font-family: 'Menlo', 'Monaco', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: rgba(212,175,55,0.62);
|
|
white-space: nowrap;
|
|
padding-top: 12px;
|
|
}
|
|
.vip-signature {
|
|
margin: 28px 0 0;
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
font-size: 24px;
|
|
font-style: italic;
|
|
color: #D4AF37;
|
|
text-align: right;
|
|
}
|
|
/* h2 as anchored section label (overrides inline h2Style at .vip-h2) */
|
|
.vip-h2 {
|
|
margin-top: 18px !important;
|
|
font-family: 'Playfair Display', Georgia, serif !important;
|
|
font-size: 13px !important;
|
|
font-weight: 500 !important;
|
|
letter-spacing: 0.22em !important;
|
|
text-transform: uppercase !important;
|
|
color: rgba(212,175,55,0.72) !important;
|
|
}
|
|
.vip-h2::after {
|
|
content: '';
|
|
display: block;
|
|
margin-top: 6px;
|
|
width: 24px;
|
|
height: 1px;
|
|
background: rgba(212,175,55,0.45);
|
|
}
|
|
/* h3 muted micro-label */
|
|
.vip-h3 {
|
|
margin-top: 10px !important;
|
|
font-size: 11px !important;
|
|
letter-spacing: 0.16em !important;
|
|
color: #a39079 !important;
|
|
}
|
|
@media (max-width: 720px) {
|
|
.vip-content > header { display: none; }
|
|
.vip-article::before { display: none; }
|
|
.vip-hero {
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
margin-bottom: 24px;
|
|
padding-bottom: 20px;
|
|
}
|
|
.vip-stamp {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding-top: 0;
|
|
font-size: 9px;
|
|
}
|
|
.vip-stamp > span + span::before {
|
|
content: '·';
|
|
margin-right: 10px;
|
|
opacity: 0.5;
|
|
}
|
|
.vip-doc-title { font-size: 30px; }
|
|
.vip-doc-subtitle { font-size: 17px; margin-top: 8px; }
|
|
.vip-signature { font-size: 19px; margin-top: 22px; }
|
|
}
|
|
|
|
/* vip-table-cards: at ≤720px collapse table to stacked label/value cards */
|
|
@media (max-width: 720px) {
|
|
.vip-table-wrap {
|
|
overflow: visible !important;
|
|
border: none !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
.vip-table { display: block !important; }
|
|
.vip-table thead { display: none !important; }
|
|
.vip-table tbody { display: block !important; }
|
|
.vip-table tr {
|
|
display: block !important;
|
|
border: 1px solid rgba(212,175,55,0.22) !important;
|
|
border-radius: 12px !important;
|
|
margin-bottom: 10px !important;
|
|
padding: 12px 14px !important;
|
|
background: rgba(212,175,55,0.035) !important;
|
|
}
|
|
.vip-table tr:last-child { margin-bottom: 0 !important; }
|
|
.vip-td {
|
|
display: flex !important;
|
|
justify-content: space-between !important;
|
|
align-items: baseline !important;
|
|
gap: 14px !important;
|
|
padding: 6px 0 !important;
|
|
border-bottom: 1px dashed rgba(212,175,55,0.10) !important;
|
|
font-size: 13px !important;
|
|
text-align: right !important;
|
|
}
|
|
.vip-table tr .vip-td:last-child { border-bottom: none !important; }
|
|
.vip-td::before {
|
|
content: attr(data-label);
|
|
color: #a39079;
|
|
font-size: 10px;
|
|
letter-spacing: 0.09em;
|
|
text-transform: uppercase;
|
|
flex: 0 0 auto;
|
|
text-align: left;
|
|
opacity: 0.9;
|
|
}
|
|
.vip-td[data-label=""]::before { content: none; }
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.vip-root { padding: 36px 14px 72px !important; }
|
|
.vip-content { gap: 24px !important; }
|
|
.vip-article { padding: 26px 20px !important; border-radius: 10px !important; }
|
|
.vip-h1 { font-size: 26px !important; line-height: 1.25 !important; }
|
|
.vip-h2 { font-size: 16px !important; margin-top: 16px !important; }
|
|
.vip-h3 { font-size: 12px !important; }
|
|
.vip-p, .vip-li { font-size: 14px !important; line-height: 1.6 !important; }
|
|
.vip-th { padding: 8px 10px !important; font-size: 10px !important; }
|
|
.vip-td { padding: 8px 10px !important; font-size: 12px !important; }
|
|
.vip-password-form { padding: 1.6rem 1.25rem !important; max-width: none !important; margin: 1.5rem 0 0 !important; }
|
|
.vip-quote-meta { flex-wrap: wrap !important; gap: 0.4rem !important; font-size: 0.72rem !important; }
|
|
}
|
|
@media (max-width: 380px) {
|
|
.vip-root { padding: 28px 10px 60px !important; }
|
|
.vip-article { padding: 22px 16px !important; }
|
|
.vip-h1 { font-size: 22px !important; }
|
|
.vip-th, .vip-td { padding: 6px 8px !important; }
|
|
}
|
|
|
|
@keyframes vip-fade-in {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.vip-entry { animation: vip-fade-in 0.6s ease both; }
|
|
@keyframes vip-rain {
|
|
from { transform: translateY(-100%); opacity: 0; }
|
|
20% { opacity: 1; }
|
|
80% { opacity: 1; }
|
|
to { transform: translateY(105vh); opacity: 0; }
|
|
}
|
|
@keyframes vip-decrypt-flash {
|
|
0% { opacity: 0; }
|
|
40% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
@keyframes vip-decrypt-fail {
|
|
0% { opacity: 0; }
|
|
20% { opacity: 0.9; }
|
|
50% { opacity: 0.6; }
|
|
70% { opacity: 0.9; }
|
|
100% { opacity: 0; }
|
|
}
|
|
@keyframes vip-glitch {
|
|
0% { transform: translateX(0); }
|
|
20% { transform: translateX(-3px); }
|
|
40% { transform: translateX(3px); }
|
|
60% { transform: translateX(-2px); }
|
|
80% { transform: translateX(2px); }
|
|
100% { transform: translateX(0); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|