2026-04-19 15:01:52 -07:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
2026-04-19 16:51:38 -07:00
|
|
|
<meta name="theme-color" content="#05050a" />
|
2026-04-19 15:01:52 -07:00
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
2026-04-19 16:51:38 -07:00
|
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
2026-04-19 15:01:52 -07:00
|
|
|
<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" />
|
2026-04-24 20:04:58 -07:00
|
|
|
<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>
|
2026-04-19 15:01:52 -07:00
|
|
|
<title>Quinn</title>
|
2026-04-19 17:30:09 -07:00
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
|
2026-05-17 23:53:09 -07:00
|
|
|
<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" />
|
2026-04-19 16:51:38 -07:00
|
|
|
<style>
|
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
2026-04-19 22:47:53 -07:00
|
|
|
html, body { margin: 0; padding: 0; background: #0a0a0f; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
|
2026-05-17 22:40:10 -07:00
|
|
|
|
|
|
|
|
/* 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 */ }
|
|
|
|
|
|
2026-05-17 23:53:09 -07:00
|
|
|
/* vip-personal-note: pink, italic, intimate */
|
|
|
|
|
.vip-personal-note {
|
|
|
|
|
margin: 8px auto;
|
|
|
|
|
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: center;
|
|
|
|
|
}
|
|
|
|
|
.vip-doc-intro .vip-personal-note { margin: 0 auto 8px; }
|
|
|
|
|
@media (max-width: 720px) {
|
|
|
|
|
.vip-personal-note { font-size: 24px; max-width: 100%; }
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-18 00:27:14 -07:00
|
|
|
/* 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; }
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-17 23:46:19 -07:00
|
|
|
/* 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%;
|
2026-05-18 00:27:14 -07:00
|
|
|
max-width: 920px;
|
2026-05-17 23:46:19 -07:00
|
|
|
margin: 0 auto;
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
/* Hero */
|
|
|
|
|
.vip-section-hero {
|
|
|
|
|
padding-top: 72px;
|
|
|
|
|
padding-bottom: 120px;
|
|
|
|
|
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-doc-intro .vip-p { font-size: 16px; }
|
|
|
|
|
/* Alternating bands */
|
|
|
|
|
.vip-section-band { padding: 110px 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.045) 0%, transparent 60%),
|
|
|
|
|
#0d0d14;
|
|
|
|
|
}
|
|
|
|
|
/* Section head with ghost numeral */
|
|
|
|
|
.vip-section-head {
|
|
|
|
|
position: relative;
|
2026-05-17 23:53:09 -07:00
|
|
|
margin-bottom: 36px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 10px;
|
2026-05-17 23:46:19 -07:00
|
|
|
}
|
|
|
|
|
.vip-section-index {
|
2026-05-17 23:53:09 -07:00
|
|
|
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;
|
2026-05-17 23:46:19 -07:00
|
|
|
}
|
|
|
|
|
.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: 80px 24px 120px;
|
|
|
|
|
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: 56px 18px 80px; }
|
|
|
|
|
.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: 72px 18px; }
|
2026-05-17 23:53:09 -07:00
|
|
|
.vip-section-head { margin-bottom: 26px; }
|
2026-05-17 23:46:19 -07:00
|
|
|
.vip-section-heading { font-size: 26px; }
|
|
|
|
|
.vip-section-sign { padding: 56px 18px 80px; }
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-17 23:33:04 -07:00
|
|
|
/* 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 {
|
|
|
|
|
border-color: rgba(212,175,55,0.55);
|
|
|
|
|
background: linear-gradient(180deg, rgba(212,175,55,0.075), rgba(212,175,55,0.018));
|
|
|
|
|
padding: 22px 24px 20px;
|
|
|
|
|
}
|
|
|
|
|
.vip-option-head {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: baseline;
|
|
|
|
|
}
|
|
|
|
|
.vip-option-code {
|
|
|
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #D4AF37;
|
|
|
|
|
letter-spacing: 0.02em;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
.vip-pricing-feature .vip-option-code { font-size: 34px; }
|
|
|
|
|
.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: 24px;
|
|
|
|
|
color: #D4AF37;
|
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
.vip-pricing-feature .vip-option-allin-value { font-size: 28px; }
|
|
|
|
|
|
|
|
|
|
@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: 26px; }
|
|
|
|
|
.vip-pricing-feature .vip-option-code { font-size: 28px; }
|
|
|
|
|
.vip-option-allin-value { font-size: 22px; }
|
|
|
|
|
.vip-pricing-feature .vip-option-allin-value { font-size: 24px; }
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-17 23:19:35 -07:00
|
|
|
/* 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; }
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-17 22:47:02 -07:00
|
|
|
/* 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; }
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-17 22:40:10 -07:00
|
|
|
@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; }
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-19 17:30:09 -07:00
|
|
|
@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; }
|
2026-04-19 19:35:56 -07:00
|
|
|
@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; }
|
|
|
|
|
}
|
2026-04-19 20:01:47 -07:00
|
|
|
@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); }
|
|
|
|
|
}
|
2026-04-19 16:51:38 -07:00
|
|
|
</style>
|
2026-04-19 15:01:52 -07:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="root"></div>
|
|
|
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
