/* ===========================
CapScript Web — Premium Light Theme
Editorial × Luxury Tech aesthetic
Fraunces display + Outfit body
=========================== */
/* ===========================
Design Tokens
=========================== */
/* ══════════════════════════════════════════════════════════════
FONT IMPORTS
Add these at the very top of your CSS file (or in )
══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Outfit:wght@400;600;700;900&family=Fraunces:ital,opsz,wght@0,9..144,900;1,9..144,900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@1,900&display=swap");
:root {
--bg: #FAFAF8;
--bg-card: #FFFFFF;
--bg-raised: #F4F3F0;
--bg-muted: #EEECEA;
--ink-1: #0D0D0D;
--ink-2: #4A4745;
--ink-3: #8C8885;
--red: #E50914;
--red-dark: #B8070F;
--red-soft: rgba(229, 9, 20, 0.08);
--red-glow: rgba(229, 9, 20, 0.18);
--border: #E3E1DC;
--border-dark: #CCCAC5;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
--shadow-lg: 0 16px 48px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06);
--shadow-xl: 0 32px 80px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.07);
--font-body: 'Outfit', system-ui, sans-serif;
--font-brand: 'Akrobat Black', system-ui, sans-serif;
--font-display: 'Gilroy ExtraBold', system-ui, sans-serif;
--s1: 0.5rem;
--s2: 1rem;
--s3: 1.5rem;
--s4: 2rem;
--s5: 3rem;
--s6: 4rem;
--s7: 6rem;
--r-sm: 6px;
--r-md: 12px;
--r-lg: 20px;
--r-xl: 28px;
--r-pill: 999px;
--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@font-face {
font-family: 'Akrobat Black';
src: url('assets/fonts/Akrobat-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gilroy ExtraBold';
src: url('assets/fontsGilroy-ExtraBold.otf') format('opentype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
/* ===========================
Reset & Base
=========================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--ink-1);
line-height: 1.65;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
p { color: var(--ink-2); }
h1, h2, h3 {
font-family: var(--font-display);
color: var(--ink-1);
line-height: 1.1;
font-weight: 900;
letter-spacing: -0.02em;
}
em {
font-style: italic;
color: var(--red);
font-family: var(--font-display);
}
/* ===========================
Utility — Animate In
=========================== */
.feature-row,
.perk-card,
.download-card,
.stat {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.animate-in {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* ===========================
Navigation
=========================== */
.navbar {
position: sticky;
top: 0;
z-index: 100;
background: rgba(250, 250, 248, 0.88);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid transparent;
transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.navbar.scrolled {
border-bottom-color: var(--border);
box-shadow: var(--shadow-sm);
}
.navbar.cspro-dark {
background: rgba(12, 12, 12, 0.9);
border-bottom-color: rgba(255, 255, 255, 0.08);
}
.navbar.cspro-dark .logo-text {
color: #f5f2ed;
}
.navbar.cspro-dark .nav-links a {
color: rgba(240, 237, 232, 0.72);
}
.navbar.cspro-dark .nav-links a:hover {
color: #fff;
}
.navbar.cspro-dark .nav-links a::after {
background: #fff;
}
.navbar.cspro-dark .nav-cta {
background: #fff;
color: #111;
}
.navbar.cspro-dark .nav-cta:hover {
background: #f2eee7;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
}
.navbar-inner {
max-width: 1240px;
margin: 0 auto;
padding: 0 var(--s4);
height: 68px;
display: flex;
align-items: center;
gap: var(--s4);
}
.logo {
display: flex;
align-items: center;
gap: var(--s2);
flex-shrink: 0;
transition: opacity 0.2s;
}
.logo:hover { opacity: 0.75; }
.logo-img {
width: 36px;
height: 36px;
border-radius: 8px;
object-fit: cover;
}
.logo-text {
font-family: var(--font-brand);
font-weight: 700;
font-size: 1.15rem;
color: var(--ink-1);
display: flex;
align-items: center;
gap: var(--s1);
}
.badge-web {
font-family: var(--font-body);
background: var(--red);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: var(--r-pill);
line-height: 1.5;
}
.nav-links {
display: flex;
gap: var(--s4);
margin-left: auto;
}
.nav-links a {
font-size: 0.9rem;
font-weight: 500;
color: var(--ink-2);
letter-spacing: 0.01em;
position: relative;
transition: color 0.2s;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 1.5px;
background: var(--red);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s var(--ease);
}
.nav-links a:hover { color: var(--red); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta {
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
background: var(--red);
color: #fff;
padding: 0.55rem 1.2rem;
border-radius: var(--r-pill);
transition: background 0.2s, transform 0.2s var(--spring), box-shadow 0.2s;
}
.nav-cta:hover {
background: var(--red-dark);
transform: translateY(-1px);
box-shadow: 0 4px 14px var(--red-glow);
}
/* ===========================
Buttons
=========================== */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-body);
font-weight: 600;
font-size: 1rem;
padding: 0.875rem 1.75rem;
border-radius: var(--r-pill);
cursor: pointer;
transition: all 0.25s var(--ease);
white-space: nowrap;
}
.btn-primary {
background: var(--red);
color: #fff;
box-shadow: 0 2px 12px var(--red-glow);
}
.btn-primary:hover {
background: var(--red-dark);
transform: translateY(-2px);
box-shadow: 0 8px 24px var(--red-glow);
}
.btn-primary svg {
transition: transform 0.2s var(--spring);
}
.btn-primary:hover svg {
transform: translateX(3px);
}
.btn-ghost {
background: transparent;
color: var(--ink-2);
border: 1.5px solid var(--border-dark);
}
.btn-ghost:hover {
color: var(--red);
border-color: var(--red);
background: var(--red-soft);
}
/* ===========================
Hero
=========================== */
.hero {
max-width: 1240px;
margin: 0 auto;
padding: var(--s7) var(--s4) var(--s6);
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: var(--s5) var(--s6);
align-items: center;
position: relative;
}
.hero-eyebrow {
grid-column: 1;
display: flex;
align-items: center;
gap: var(--s1);
font-size: 0.8rem;
font-weight: 600;
color: var(--red);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--red);
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { box-shadow: 0 0 0 0 var(--red-glow); }
50% { box-shadow: 0 0 0 6px rgba(229,9,20,0); }
}
.hero-content {
grid-column: 1;
grid-row: 2;
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(3rem, 6vw, 4.75rem);
margin-bottom: var(--s3);
letter-spacing: -0.03em;
line-height: 1.05;
}
.hero-subtitle {
font-size: 1.15rem;
line-height: 1.75;
color: var(--ink-2);
max-width: 440px;
margin-bottom: var(--s4);
}
.hero-cta {
display: flex;
gap: var(--s2);
flex-wrap: wrap;
margin-bottom: var(--s5);
}
.hero-stats {
display: flex;
align-items: center;
gap: var(--s3);
}
.stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.stat-num {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 700;
color: var(--ink-1);
line-height: 1;
}
.stat-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.stat-divider {
width: 1px;
height: 40px;
background: var(--border);
}
.hero-visual {
grid-column: 2;
grid-row: 1 / 3;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.hero-glow {
position: absolute;
inset: -10%;
background: radial-gradient(ellipse at center, var(--red-glow) 0%, transparent 65%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.hero-screenshot {
position: relative;
z-index: 1;
width: 100%;
max-width: 600px;
animation: float 5s ease-in-out infinite;
}
.hero-screenshot .screenshot-body,
.hero-screenshot .screenshot-body img {
height: 100%;
}
.hero-screenshot .screenshot-body img {
width: 100%;
object-fit: cover;
object-position: center;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.result-chip {
position: absolute;
background: var(--bg-card);
border: 1.5px solid var(--border);
border-radius: var(--r-pill);
padding: 0.4rem 0.9rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
font-weight: 500;
box-shadow: var(--shadow-md);
z-index: 2;
animation: chip-float 4s ease-in-out infinite;
}
.chip-time {
background: var(--red);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
padding: 1px 6px;
border-radius: var(--r-pill);
font-family: var(--font-body);
}
.chip-text { color: var(--ink-2); }
.chip-1 { top: 12%; left: -8%; animation-delay: 0s; }
.chip-2 { top: 48%; right: -12%; animation-delay: 1.2s; }
.chip-3 { bottom: 14%; left: -5%; animation-delay: 0.6s; }
@keyframes chip-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* ===========================
Screenshot Frame Component
=========================== */
.screenshot-frame {
background: var(--bg-card);
border: 1.5px solid var(--border);
border-radius: 8px;
overflow: hidden;
box-shadow: var(--shadow-xl);
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.screenshot-frame:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.features .screenshot-frame {
border-color: var(--border-dark);
}
.screenshot-chrome {
display: flex;
align-items: center;
gap: var(--s2);
padding: 0.65rem 1rem;
background: var(--bg-raised);
border-bottom: 1px solid var(--border);
}
.chrome-dots {
display: flex;
gap: 5px;
flex-shrink: 0;
}
.chrome-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--border-dark);
}
.chrome-dots span:nth-child(1) { background: #FF5F57; }
.chrome-dots span:nth-child(2) { background: #FEBC2E; }
.chrome-dots span:nth-child(3) { background: #28C840; }
.chrome-url {
flex: 1;
font-size: 0.75rem;
font-weight: 400;
color: var(--ink-3);
font-family: var(--font-body);
background: var(--border);
border-radius: var(--r-sm);
padding: 3px 10px;
text-align: center;
}
.screenshot-body {
overflow: hidden;
background: var(--bg-muted);
line-height: 0;
}
.screenshot-body img {
width: 100%;
height: auto;
display: block;
}
.screenshot-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s2);
padding: var(--s5) var(--s4);
text-align: center;
}
.screenshot-placeholder.small {
padding: var(--s4) var(--s3);
}
.placeholder-icon {
font-size: 2.5rem;
opacity: 0.4;
}
.screenshot-placeholder p {
font-size: 0.85rem;
color: var(--ink-3);
line-height: 1.5;
}
.screenshot-placeholder code {
font-size: 0.7rem;
background: var(--bg-muted);
color: var(--red);
padding: 3px 8px;
border-radius: var(--r-sm);
font-family: 'Courier New', monospace;
}
/* ===========================
Marquee Band (adapted from example)
=========================== */
.marquee-band {
overflow: hidden;
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #000;
height: 40px;
width: 100%;
max-width: 100%;
border-radius: 0px;
box-shadow: 4px 4px 0 #000;
background: var(--red);
color: #fff;
white-space: nowrap;
padding: 0.25rem 1rem;
font-family: 'Nunito', var(--font-body);
font-weight: 900;
font-style: italic;
}
.marquee-track {
display: flex;
align-items: center;
gap: 1.5rem;
width: 200%;
will-change: transform;
animation: marquee 12s linear infinite;
height: 100%;
line-height: 40px;
position: relative;
}
.marquee-track:hover {
animation-play-state: paused;
color: #000;
}
.marquee-track > * {
flex: 0 0 auto;
padding-right: 1rem;
}
.mx {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.1em;
font-size: 0;
line-height: 1;
font-style: normal;
}
.mx::before {
content: '▶';
font-size: 0.95rem;
font-weight: 900;
}
.marquee-band:hover .mx::before {
content: '❚❚';
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ===========================
Section Shared
=========================== */
.features,
.technology,
.download {
padding: var(--s7) var(--s4);
max-width: 1240px;
margin: 0 auto;
}
.section-label {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--red);
margin-bottom: var(--s2);
}
.section-header {
max-width: 650px;
margin-bottom: var(--s6);
}
.features .section-header {
margin-right: auto;
margin-left: 0;
text-align: left;
}
.section-header h2 {
font-family: var(--font-display);
font-size: clamp(2.2rem, 4vw, 3.5rem);
margin-bottom: var(--s2);
}
.section-header p {
font-size: 1.1rem;
color: var(--ink-2);
}
/* ===========================
Features — Alternating Rows
=========================== */
.features {
border-top: 1px solid var(--border);
}
.feature-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s6);
align-items: center;
padding: var(--s6) 0;
border-bottom: 1px solid var(--border);
}
.feature-row:last-child { border-bottom: none; }
.feature-row.reverse .feature-text { order: 2; }
.feature-row.reverse .feature-visual { order: 1; }
.feature-num {
display: none;
}
.feature-text h3 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3vw, 2.4rem);
margin-bottom: var(--s2);
}
.feature-text p {
font-size: 1.05rem;
color: var(--ink-2);
line-height: 1.75;
margin-bottom: var(--s3);
}
.feature-bullets {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--s1);
}
.feature-bullets li {
font-size: 0.9rem;
font-weight: 500;
color: var(--ink-2);
padding-left: 1.25rem;
position: relative;
}
.feature-bullets li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--red);
}
.feature-row.centered {
grid-template-columns: 1fr;
text-align: center;
}
.feature-row.centered .feature-text {
max-width: 1200px;
margin: 0 auto;
}
.feature-row.centered .feature-visual {
justify-self: center;
margin-top: var(--s3);
}
.feature-row.centered .screenshot-frame {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.feature-row.centered .screenshot-body img {
width: 100%;
height: auto;
display: block;
}
.feature-row.centered .feature-bullets {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s1);
padding-left: 0;
margin: 0.5rem auto 0;
}
.feature-row.centered .feature-bullets li {
padding-left: 0;
position: relative;
}
.feature-row.centered .feature-bullets li::before {
position: relative;
display: inline-block;
left: auto;
top: auto;
width: 8px;
height: 8px;
margin-right: 10px;
transform: none;
}
.ticks-features {
margin-top: 12px;
text-align: center;
font-family: var(--font-body);
}
.ticks-row {
display: flex;
justify-content: center;
gap: 2.4rem;
align-items: center;
}
.ticks-row.single { margin-top: 0.6rem; }
.tick-item {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--ink-2);
}
.tick-num {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--red);
color: #fff;
font-weight: 700;
font-size: 0.8rem;
}
@media (max-width: 720px) {
.ticks-row { flex-direction: column; gap: 0.45rem; }
.ticks-row.single { margin-top: 0.25rem; }
.tick-item { font-size: 0.95rem; }
}
/* ===========================
Technology — Perks Grid
=========================== */
.technology {
background: #fff;
max-width: 100%;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
isolation: isolate;
}
/* ===========================
Technology — Multilingual Knot Background
=========================== */
/* ===========================
Technology — Multilingual Knot Background
=========================== */
.tech-knot {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
user-select: none;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.tech-knot-svg {
position: absolute;
top: 58%;
left: 50%;
width: 250vw;
height: auto;
transform: translate(-50%, -50%) rotate(-1deg);
overflow: visible;
}
.tech-knot-text {
fill: var(--red);
fill-opacity: 1;
opacity: 1;
font-family: var(--font-display), var(--font-body), system-ui, sans-serif;
font-size: 110px;
font-weight: 900;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.tech-header,
.perks-grid {
position: relative;
z-index: 2;
}
@media (max-width: 1024px) {
.tech-knot-svg {
width: 300vw;
top: 57%;
}
.tech-knot-text {
font-size: 90px;
}
}
@media (max-width: 768px) {
.tech-knot-svg {
width: 350vw;
top: 54%;
}
.tech-knot-text {
font-size: 70px;
}
}
.tech-bg {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
z-index: 0;
pointer-events: none;
user-select: none;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: var(--s4);
overflow: hidden;
}
.tech-bg-row {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 1.2rem;
padding: 0;
margin-bottom: -0.6rem;
white-space: nowrap;
flex-shrink: 0;
overflow: visible;
}
.tech-bg-item {
font-family: var(--font-display);
font-weight: 900;
color: var(--red);
opacity: 1;
letter-spacing: -0.02em;
line-height: 1.05;
flex-shrink: 0;
display: inline-block;
transform-origin: center bottom;
}
.tech-bg-item.xl { font-size: 6rem; }
.tech-bg-item.lg { font-size: 4.5rem; }
.tech-bg-item.md { font-size: 3rem; }
.tech-header { position: relative; z-index: 1; }
.perks-grid { position: relative; z-index: 1; }
.tech-header {
max-width: 1380px;
margin: 0 auto var(--s6);
padding: 0 var(--s4);
text-align: right;
}
.tech-header h2 {
font-family: var(--font-display);
font-size: clamp(2.2rem, 4vw, 3.5rem);
margin-bottom: var(--s2);
}
.perks-grid {
max-width: 1380px;
margin: 0 auto;
padding: 0 var(--s4);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s3);
}
.perks-grid {
max-width: 1380px;
margin: 0 auto;
padding: 0 var(--s4);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s3);
position: relative;
z-index: 1;
}
.perk-card {
position: relative;
overflow: hidden;
border-radius: 20px;
padding: 2rem 1.75rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0;
min-height: 220px;
background: rgba(255, 255, 255, 0.86);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.07);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.perk-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13);
}
.perk-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
}
.perk-ghost-num {
position: absolute;
top: -0.2rem;
right: 1rem;
font-family: var(--font-display);
font-size: 7rem;
font-weight: 900;
color: var(--red);
opacity: 0.07;
line-height: 1;
letter-spacing: -0.04em;
pointer-events: none;
user-select: none;
}
.perk-icon {
width: 2.5rem;
height: 2.5rem;
color: var(--red);
margin-bottom: 1rem;
flex-shrink: 0;
}
.perk-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 0.75rem;
}
.perk-title {
font-family: var(--font-display);
font-size: 1.55rem;
font-weight: 900;
color: var(--ink-1);
line-height: 1.1;
letter-spacing: -0.025em;
margin-bottom: 0.6rem;
}
.perk-desc {
font-size: 0.875rem;
color: var(--ink-2);
line-height: 1.65;
flex: 1;
}
.perk-pill {
display: inline-flex;
align-self: flex-start;
margin-top: 1.25rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.3rem 0.75rem;
border-radius: 999px;
border: 1.5px solid var(--border-dark);
color: var(--ink-2);
font-family: var(--font-body);
}
.perk-card.dark {
background: rgba(10, 10, 10, 0.78);
border-color: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.perk-card.dark .perk-title { color: #fff; }
.perk-card.dark .perk-desc { color: rgba(255,255,255,0.55); }
.perk-card.dark .perk-label { color: #fff; }
.perk-card.dark .perk-icon { color: #fff; }
.perk-card.dark .perk-pill { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.55); }
.perk-card.dark .perk-ghost-num { color: #fff; opacity: 0.05; }
@media (max-width: 1024px) {
.perks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.perks-grid { grid-template-columns: 1fr; padding: 0 var(--s3); }
}
/* ===========================
Download Section
=========================== */
.download-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s7);
align-items: start;
}
.download-text .section-label { margin-bottom: var(--s2); }
.download-text h2 {
font-family: var(--font-display);
font-size: clamp(2.2rem, 4vw, 3.5rem);
margin-bottom: var(--s2);
}
.download-text > p {
font-size: 1.05rem;
color: var(--ink-2);
margin-bottom: var(--s4);
line-height: 1.75;
}
.download-points {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s2);
margin-bottom: var(--s4);
}
.download-point {
padding: var(--s3);
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--bg-card);
box-shadow: var(--shadow-sm);
}
.download-point-label {
display: block;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 0.45rem;
}
.download-point-text {
display: block;
font-size: 0.92rem;
line-height: 1.6;
color: var(--ink-2);
}
.browser-support p {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: var(--s2);
}
.browser-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s2);
}
.browser-tile {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 0.8rem;
min-height: 72px;
padding: 0.95rem 1rem;
border: 1.5px solid var(--border);
border-radius: var(--r-lg);
background: var(--bg-card);
box-shadow: var(--shadow-sm);
}
.browser-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
}
.browser-icon svg {
width: 100%;
height: 100%;
display: block;
}
.browser-icon img {
width: 100%;
height: 100%;
display: block;
}
.browser-name {
font-size: 0.84rem;
font-weight: 700;
color: var(--ink-1);
}
.download-cards {
display: flex;
flex-direction: column;
gap: var(--s2);
}
.download-card {
display: flex;
align-items: center;
gap: var(--s3);
background: var(--bg-card);
border: 1.5px solid var(--border);
border-radius: var(--r-lg);
padding: var(--s3) var(--s4);
transition: all 0.25s var(--ease);
color: var(--ink-1);
}
.download-card:hover {
border-color: var(--red);
background: var(--red-soft);
transform: translateX(4px);
box-shadow: var(--shadow-md);
}
.primary-card {
background: var(--ink-1);
border-color: var(--ink-1);
color: #fff;
}
.primary-card:hover {
background: var(--red);
border-color: var(--red);
}
.card-icon {
font-size: 1.6rem;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--red);
}
.primary-card .card-icon { color: #fff; }
.download-card h3 {
font-size: 0.84rem;
font-weight: 700;
}
.download-card p {
font-size: 0.82rem;
color: var(--ink-3);
}
.primary-card p { color: rgba(255,255,255,0.55); }
.card-arrow {
margin-left: auto;
font-size: 1.2rem;
opacity: 0.4;
transition: opacity 0.2s, transform 0.2s;
}
.download-card:hover .card-arrow {
opacity: 1;
transform: translateX(2px);
}
/* ===========================
Footer
=========================== */
.footer {
background: var(--red);
border-top: 1px solid var(--red-dark);
padding: var(--s5) var(--s4);
}
.footer-inner {
max-width: 1240px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s2);
text-align: center;
}
.footer-logo {
display: flex;
align-items: center;
gap: var(--s2);
font-family: var(--font-brand);
font-weight: 700;
font-size: 1.1rem;
color: #fff;
margin-bottom: var(--s1);
}
.footer-logo .logo-img {
width: 32px;
height: 32px;
border-radius: 7px;
}
.footer-inner > p {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.78);
}
.footer-links {
display: flex;
align-items: center;
gap: var(--s2);
font-size: 0.85rem;
}
.footer-links a {
color: #fff;
font-weight: 500;
transition: opacity 0.2s;
}
.footer-links a:hover { opacity: 0.75; }
.footer-sep { color: rgba(255, 255, 255, 0.5); }
/* ===========================
Responsive
=========================== */
@media (max-width: 1024px) {
.hero {
grid-template-columns: 1fr;
padding-top: var(--s6);
}
.hero-eyebrow { grid-column: 1; }
.hero-content { grid-column: 1; grid-row: 2; }
.hero-visual { grid-column: 1; grid-row: 3; margin-top: var(--s4); }
.hero-subtitle { max-width: none; }
.hero-screenshot { max-width: 760px; min-height: clamp(240px, 42vw, 420px); }
.chip-1 { left: 0; }
.chip-2 { right: 0; }
.chip-3 { left: 5%; }
.perks-grid { grid-template-columns: repeat(2, 1fr); }
.download-points { grid-template-columns: 1fr; }
.browser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.download-card { padding: var(--s3); }
.download-inner { grid-template-columns: 1fr; gap: var(--s5); }
}
@media (max-width: 768px) {
:root {
--s5: 2.5rem;
--s6: 3rem;
--s7: 4rem;
}
.navbar-inner { padding: 0 var(--s3); gap: var(--s2); }
.nav-links { display: none; }
.nav-cta { margin-left: auto; }
.hero { padding: var(--s5) var(--s3); }
.hero-title { font-size: clamp(2.2rem, 7vw, 3.5rem); }
.hero-screenshot { max-width: 100%; min-height: clamp(180px, 56vw, 320px); }
.hero-cta { flex-direction: column; align-items: flex-start; }
.feature-row {
grid-template-columns: 1fr;
gap: var(--s4);
}
.feature-row.reverse .feature-text { order: 0; }
.feature-row.reverse .feature-visual { order: 1; }
.perks-grid { grid-template-columns: 1fr; }
.browser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.features, .technology, .download, .demo { padding: var(--s5) var(--s3); }
.tech-header { padding: 0 var(--s3); }
.perks-grid { padding: 0 var(--s3); }
}
@media (max-width: 480px) {
:root {
--s6: 2.5rem;
--s7: 3rem;
}
.hero-stats { gap: var(--s2); }
.stat-num { font-size: 1.3rem; }
.chip-2, .chip-3 { display: none; }
.logo-text { font-size: 1rem; }
.browser-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
.demo-info {
grid-template-columns: repeat(2, 1fr);
gap: var(--s3);
}
}
@media (max-width: 768px) {
.demo-header {
margin-bottom: var(--s5);
}
.demo-header h2 {
font-size: clamp(1.8rem, 5vw, 2.8rem);
}
.demo-info {
grid-template-columns: 1fr;
gap: var(--s3);
}
}
/* ===========================
Demo Section � Interactive Ticks
=========================== */
.demo-tick {
position: absolute;
bottom: -8px;
width: 12px;
height: 12px;
background: var(--red);
border: 2px solid #fff;
border-radius: 50%;
cursor: pointer;
transform: translateX(-50%);
transition: all 0.3s ease;
z-index: 10;
}
.demo-tick:hover,
.demo-tick.active {
width: 16px;
height: 16px;
bottom: -10px;
background: var(--red);
filter: drop-shadow(0 0 6px rgba(229, 9, 20, 0.5));
}
.demo-tick-tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-12px);
background: rgba(10, 10, 10, 0.95);
color: #fff;
padding: 0.5rem 0.75rem;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
font-size: 0.75rem;
z-index: 20;
backdrop-filter: blur(4px);
}
.demo-tick:hover .demo-tick-tooltip,
.demo-tick.active .demo-tick-tooltip {
opacity: 1;
}
.tooltip-label {
font-weight: 600;
margin-bottom: 0.2rem;
color: var(--red);
}
.tooltip-time {
font-size: 0.65rem;
opacity: 0.8;
}
@media (max-width: 768px) {
.demo-tick {
width: 10px;
height: 10px;
bottom: -6px;
}
.demo-tick:hover,
.demo-tick.active {
width: 14px;
height: 14px;
bottom: -8px;
}
.demo-tick-tooltip {
font-size: 0.7rem;
padding: 0.4rem 0.6rem;
}
.tooltip-time {
font-size: 0.6rem;
}
}
/* ===========================
Demo Player Simulation
=========================== */
.demo-player-sim {
position: relative;
width: 100%;
max-width: 900px;
aspect-ratio: 16 / 9;
border: 1.5px solid var(--border);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-xl);
background: #111;
}
.demo-player-sim::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%),
url('https://i.ytimg.com/vi/M7lc1UVf-VE/maxresdefault.jpg') center / cover no-repeat;
}
.demo-youtube-chrome {
position: absolute;
top: 12px;
left: 12px;
right: 12px;
z-index: 3;
display: flex;
align-items: center;
gap: 0.55rem;
}
.demo-youtube-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--red);
}
.demo-youtube-label {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
}
.demo-youtube-badge {
margin-left: auto;
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
background: rgba(0, 0, 0, 0.45);
border: 1px solid rgba(255, 255, 255, 0.24);
padding: 0.3rem 0.55rem;
border-radius: 999px;
}
.demo-video-hitarea {
position: absolute;
inset: 0;
z-index: 2;
border: 0;
background: transparent;
cursor: pointer;
}
.demo-play-pill {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
background: rgba(0, 0, 0, 0.68);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 999px;
padding: 0.7rem 1rem;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.demo-controls {
position: absolute;
left: 14px;
right: 14px;
bottom: 12px;
z-index: 4;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 45%);
padding-top: 2rem;
}
.demo-time-row {
display: flex;
justify-content: space-between;
margin-bottom: 0.45rem;
color: #fff;
font-size: 0.72rem;
letter-spacing: 0.08em;
}
.demo-progress-track {
position: relative;
height: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.22);
overflow: visible;
}
.demo-progress-fill {
height: 100%;
width: 0%;
border-radius: 999px;
background: linear-gradient(90deg, #ff3b30, #c90f19);
transition: width 220ms linear;
}
.demo-progress-track .demo-ticks-overlay {
position: absolute;
inset: 0;
pointer-events: auto;
background: transparent;
opacity: 1;
}
.demo-tick {
position: absolute;
top: 50%;
bottom: auto;
width: 12px;
height: 12px;
border: 2px solid #fff;
border-radius: 50%;
background: var(--red);
transform: translate(-50%, -50%);
transition: width 0.2s ease, height 0.2s ease, filter 0.2s ease;
z-index: 10;
}
.demo-tick:hover,
.demo-tick.active {
width: 16px;
height: 16px;
filter: drop-shadow(0 0 7px rgba(229, 9, 20, 0.52));
}
@media (max-width: 768px) {
.demo-youtube-badge {
display: none;
}
.demo-time-row {
font-size: 0.66rem;
}
.demo-progress-track {
height: 7px;
}
}
/* ===========================
Download — Overhaul
=========================== */
.download {
padding: var(--s7) var(--s4);
max-width: 1240px;
margin: 0 auto;
border-top: 1px solid var(--border);
}
.dl-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.dl-left { position: sticky; top: calc(68px + var(--s4)); }
.dl-headline {
font-family: var(--font-display);
font-size: clamp(4.5rem, 8vw, 7.5rem);
font-weight: 900;
line-height: 0.88;
letter-spacing: -0.045em;
margin: var(--s2) 0 var(--s3);
}
.dl-headline em { color: var(--red); }
.dl-sub {
font-size: 1rem;
color: var(--ink-2);
line-height: 1.7;
margin-bottom: var(--s4);
max-width: 380px;
}
.dl-steps { list-style: none; padding: 0; margin-bottom: var(--s4); }
.dl-step {
display: flex;
gap: var(--s3);
padding: 1.1rem 0;
border-bottom: 1px solid var(--border);
align-items: flex-start;
}
.dl-step:first-child { border-top: 1px solid var(--border); }
.dl-step-num {
font-family: var(--font-display);
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.1em;
color: var(--red);
flex-shrink: 0;
margin-top: 3px;
}
.dl-step-content strong {
display: block;
font-size: 0.9rem;
font-weight: 700;
color: var(--ink-1);
margin-bottom: 3px;
font-family: var(--font-body);
}
.dl-step-content p {
font-size: 0.8rem;
color: var(--ink-3);
margin: 0;
}
.dl-step-content code {
font-family: 'Courier New', monospace;
font-size: 0.75rem;
background: var(--bg-muted);
color: var(--red);
padding: 1px 6px;
border-radius: var(--r-sm);
}
.dl-compat { margin-top: var(--s4); }
.dl-compat > p {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: var(--s2);
}
.dl-browser-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-browser-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 12px 5px 7px;
border: 1.5px solid var(--border);
border-radius: var(--r-pill);
background: var(--bg-card);
font-size: 0.78rem;
font-weight: 600;
color: var(--ink-2);
transition: border-color 0.2s, color 0.2s, background 0.2s;
cursor: default;
}
.dl-browser-pill img {
width: 17px;
height: 17px;
flex-shrink: 0;
}
.dl-right {
display: flex;
flex-direction: column;
gap: var(--s2);
opacity: 0;
transform: translateY(24px);
transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.dl-right.animate-in { opacity: 1; transform: translateY(0); }
.dl-ticket {
display: block;
background: var(--bg-card);
border: 1.5px solid var(--border);
border-radius: var(--r-xl);
overflow: hidden;
text-decoration: none;
color: var(--ink-1);
position: relative;
transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.dl-ticket::before {
content: none;
}
.dl-ticket:hover {
transform: translateY(-3px);
border-color: var(--border-dark);
box-shadow: var(--shadow-lg);
}
.dl-ticket > * { position: relative; z-index: 1; }
.dl-ticket-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.6rem 1.75rem 0;
}
.dl-ticket-brand { display: flex; align-items: center; gap: 10px; }
.dl-ticket-brand img {
width: 30px;
height: 30px;
border-radius: 7px;
flex-shrink: 0;
}
.dl-ticket-brand-name {
font-family: var(--font-brand);
font-size: 0.88rem;
font-weight: 700;
color: var(--ink-1);
display: block;
line-height: 1.2;
}
.dl-ticket-brand-type {
font-size: 0.6rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
display: block;
}
.dl-ticket-platform-badge {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
border: 1px solid var(--border);
background: var(--bg-raised);
padding: 3px 9px;
border-radius: var(--r-pill);
}
.dl-ticket-body { padding: 1.6rem 1.75rem 1.4rem; }
.dl-ticket-license-label {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-3);
display: block;
margin-bottom: 0.35rem;
}
.dl-ticket-price {
font-family: var(--font-body);
font-size: 1.15rem;
font-weight: 700;
color: var(--ink-1);
line-height: 1.2;
letter-spacing: 0;
margin-bottom: 0.35rem;
}
.dl-ticket-always {
font-size: 0.82rem;
color: var(--ink-2);
font-family: var(--font-body);
margin: 0;
}
.dl-ticket-perf {
margin: 0 1.75rem;
height: 1px;
background: var(--border);
}
.dl-ticket-footer {
padding: 1.3rem 1.75rem 1.6rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
flex-wrap: wrap;
}
.dl-ticket-meta {
display: flex;
flex-direction: column;
gap: 5px;
}
.dl-ticket-release {
font-size: 0.7rem;
color: var(--ink-3);
font-family: var(--font-body);
}
.dl-ticket-sha {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.62rem;
color: var(--ink-3);
}
.dl-ticket-sha code {
font-family: 'Courier New', monospace;
background: var(--bg-muted);
color: var(--ink-2);
padding: 1px 6px;
border-radius: 3px;
}
.dl-ticket-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--red);
color: #fff;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 700;
padding: 0.72rem 1.4rem;
border-radius: var(--r-pill);
white-space: nowrap;
transition: background 0.2s, transform 0.2s var(--spring), box-shadow 0.2s;
}
.dl-ticket:hover .dl-ticket-cta {
background: var(--red-dark);
transform: translateY(-1px);
box-shadow: 0 6px 18px var(--red-glow);
}
.dl-ticket-cta svg { transition: transform 0.2s var(--spring); }
.dl-ticket:hover .dl-ticket-cta svg { transform: translateY(2px); }
.dl-secondary {
display: flex;
align-items: center;
gap: var(--s3);
padding: 1.1rem 1.4rem;
border: 1.5px solid var(--border);
border-radius: var(--r-lg);
background: var(--bg-card);
text-decoration: none;
color: var(--ink-1);
transition: border-color 0.22s var(--ease), background 0.22s, transform 0.22s var(--ease);
}
.dl-secondary:hover {
border-color: var(--border-dark);
background: var(--bg-raised);
transform: translateX(5px);
}
.dl-secondary-icon {
width: 40px;
height: 40px;
border-radius: var(--r-md);
background: var(--bg-raised);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--ink-2);
transition: background 0.2s;
}
.dl-secondary:hover .dl-secondary-icon { background: var(--bg-muted); }
.dl-secondary-body { flex: 1; }
.dl-secondary-body h3 {
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 700;
color: var(--ink-1);
margin-bottom: 2px;
}
.dl-secondary-body p { font-size: 0.77rem; color: var(--ink-3); }
.dl-secondary-arr {
color: var(--ink-3);
opacity: 0.4;
font-size: 1rem;
transition: opacity 0.2s, transform 0.2s;
}
.dl-secondary:hover .dl-secondary-arr { opacity: 1; transform: translateX(3px); }
@media (max-width: 1024px) {
.dl-wrap { grid-template-columns: 1fr; gap: var(--s5); }
.dl-left { position: static; }
.dl-sub { max-width: none; }
}
@media (max-width: 768px) {
.dl-headline { font-size: clamp(3.5rem, 13vw, 5.5rem); }
}
/* ===========================
Footer — Overhaul
=========================== */
.footer {
background: #e8261c;
position: relative;
overflow: hidden;
padding: 0;
border-top: none;
}
.footer-wordmark-row {
padding: var(--s5) var(--s4) 0;
}
.footer-wordmark {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(5rem, 17vw, 13rem);
line-height: 0.82;
letter-spacing: -0.02em;
color: rgba(255, 255, 255, 0.11);
white-space: nowrap;
user-select: none;
}
.footer-rule {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.18);
margin: var(--s3) var(--s4) 0;
}
.footer-inner {
max-width: 1240px;
margin: 0 auto;
padding: var(--s3) var(--s4) var(--s5);
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
gap: var(--s4);
}
.footer-left {
display: flex;
flex-direction: column;
gap: var(--s2);
}
.footer-logo-row {
display: flex;
align-items: center;
gap: 10px;
}
.footer-logo-row img {
width: 30px;
height: 30px;
border-radius: 7px;
}
.footer-logo-name {
font-family: var(--font-brand);
font-size: 1rem;
font-weight: 700;
color: #fff;
}
.footer-tagline {
font-size: 0.88rem;
color: rgba(255, 255, 255, 0.6);
line-height: 1.65;
}
.footer-copy {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.28);
letter-spacing: 0.04em;
}
.footer-right {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
gap: var(--s3);
}
.serptail-floating {
position: absolute;
left: 24px;
bottom: 24px;
z-index: 40;
}
@media (min-width: 1024px) {
.serptail-floating { left: 32px; bottom: 32px; }
}
.serptail-floating .button {
cursor: pointer;
border: none;
background: #fff;
color: #000;
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
position: relative;
display: grid;
place-content: center;
transition: background 300ms, transform 200ms, color 200ms;
font-weight: 600;
}
.serptail-floating .button--sm { width: 72px; height: 72px; font-size: 0.62rem; }
.serptail-floating .button__text { --chars: 24; position: absolute; inset: 0; animation: text-rotation 8s linear infinite; color: transparent; }
.serptail-floating .button__text > span { position: absolute; transform: rotate(calc(360deg / var(--chars) * var(--index))); inset: 1px; color: #000; }
.serptail-floating .button__circle { position: relative; width: 28px; height: 28px; overflow: hidden; background: #000; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.serptail-floating .button__icon { color: inherit; }
.serptail-floating .button__icon--copy { position: absolute; transform: translate(-150%, 150%); }
.serptail-floating .button:hover { background: #000; color: #fff; transform: scale(1.05); }
.serptail-floating .button:hover .button__icon { color: inherit; }
.serptail-floating .button:hover .button__icon:first-child { transition: transform 0.3s ease-in-out; transform: translate(150%, -150%); }
.serptail-floating .button:hover .button__icon--copy { transition: transform 0.3s ease-in-out 0.1s; transform: translate(0); }
@keyframes text-rotation { to { rotate: 360deg; } }
.serptail-floating .button:hover .button__text > span { color: #fff !important; }
.footer-nav {
display: flex;
gap: var(--s3);
}
.footer-nav a {
font-size: 0.875rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.65);
position: relative;
transition: color 0.2s;
}
.footer-nav a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 1px;
background: rgba(255, 255, 255, 0.55);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s var(--ease);
}
.footer-nav a:hover { color: #fff; }
.footer-nav a:hover::after { transform: scaleX(1); }
.footer-github-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0.58rem 1.15rem;
border: 1.5px solid rgba(255, 255, 255, 0.22);
border-radius: var(--r-pill);
font-size: 0.8rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.footer-github-btn:hover {
border-color: rgba(255, 255, 255, 0.45);
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 768px) {
.footer-wordmark { font-size: clamp(3.8rem, 20vw, 7rem); }
.footer-inner { grid-template-columns: 1fr; gap: var(--s3); }
.footer-right { align-items: flex-start; }
.footer-nav { flex-wrap: wrap; }
}
/* ══════════════════════════════════════════════
PAYPAL TEST SECTION
══════════════════════════════════════════════ */
.paytest {
padding: 120px 0 100px;
background: #0a0a0a;
position: relative;
overflow: hidden;
}
.paytest::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
background-size: 180px;
opacity: 0.35;
pointer-events: none;
}
.paytest::after {
content: '';
position: absolute;
top: -120px;
right: -80px;
width: 480px;
height: 480px;
background: radial-gradient(circle, rgba(232, 38, 28, 0.09) 0%, transparent 70%);
pointer-events: none;
}
.paytest-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 1;
}
.paytest-left {
display: flex;
flex-direction: column;
gap: 0;
}
.paytest-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Outfit', sans-serif;
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #666;
margin-bottom: 20px;
}
.paytest-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #e8261c;
flex-shrink: 0;
}
.paytest-headline {
font-family: 'Fraunces', Georgia, serif;
font-size: clamp(3.2rem, 5vw, 5.5rem);
font-weight: 900;
line-height: 0.95;
letter-spacing: -0.03em;
color: #f0ede8;
margin: 0 0 28px;
}
.paytest-headline em {
font-style: italic;
color: #e8261c;
}
.paytest-sub {
font-family: 'Outfit', sans-serif;
font-size: 0.92rem;
line-height: 1.7;
color: #888;
max-width: 360px;
margin-bottom: 40px;
}
.paytest-meta {
display: flex;
flex-direction: column;
gap: 12px;
border-left: 1px solid rgba(255,255,255,0.07);
padding-left: 20px;
}
.paytest-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 260px;
}
.paytest-meta-label {
font-family: 'Outfit', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #555;
}
.paytest-meta-val {
font-family: 'Outfit', sans-serif;
font-size: 0.8rem;
font-weight: 600;
color: #c8c5bf;
}
.paytest-live-badge {
display: inline-flex;
align-items: center;
gap: 6px;
color: #5dde7a !important;
}
.paytest-pulse {
width: 7px;
height: 7px;
border-radius: 50%;
background: #5dde7a;
flex-shrink: 0;
animation: paytest-pulse-anim 2s ease-in-out infinite;
}
@keyframes paytest-pulse-anim {
0%, 100% { box-shadow: 0 0 0 0 rgba(93, 222, 122, 0.4); }
50% { box-shadow: 0 0 0 6px rgba(93, 222, 122, 0); }
}
.paytest-right {
display: flex;
justify-content: center;
}
.paytest-card {
width: 100%;
max-width: 420px;
background: #141414;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
padding: 32px;
box-shadow:
0 0 0 1px rgba(0,0,0,0.5),
0 32px 64px rgba(0,0,0,0.5),
inset 0 1px 0 rgba(255,255,255,0.06);
position: relative;
overflow: hidden;
}
.paytest-card::before {
content: '';
position: absolute;
top: -60px;
left: -60px;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(232, 38, 28, 0.07) 0%, transparent 65%);
pointer-events: none;
}
.paytest-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 28px;
}
.paytest-card-brand {
display: flex;
align-items: center;
gap: 12px;
}
.paytest-card-logo {
width: 36px;
height: 36px;
border-radius: 8px;
flex-shrink: 0;
}
.paytest-card-name {
display: block;
font-family: 'Outfit', sans-serif;
font-size: 0.88rem;
font-weight: 600;
color: #e8e5df;
line-height: 1.2;
}
.paytest-card-tier {
display: block;
font-family: 'Outfit', sans-serif;
font-size: 0.68rem;
letter-spacing: 0.08em;
color: #555;
text-transform: uppercase;
margin-top: 3px;
}
.paytest-card-price {
text-align: right;
}
.paytest-card-amount {
font-family: 'Fraunces', Georgia, serif;
font-size: 2rem;
font-weight: 900;
color: #f0ede8;
line-height: 1;
}
.paytest-card-amount sup {
font-size: 0.9rem;
font-weight: 700;
vertical-align: top;
margin-top: 4px;
display: inline-block;
}
.paytest-card-period {
display: block;
font-family: 'Outfit', sans-serif;
font-size: 0.68rem;
color: #555;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 4px;
}
.paytest-card-divider {
display: flex;
align-items: center;
margin: 0 -32px 28px;
position: relative;
}
.paytest-notch {
width: 20px;
height: 20px;
background: #0a0a0a;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.06);
}
.paytest-notch-l { border-left: none; margin-left: -10px; }
.paytest-notch-r { border-right: none; margin-right: -10px; }
.paytest-dashes {
flex: 1;
height: 1px;
background-image: repeating-linear-gradient(
to right,
rgba(255,255,255,0.1) 0,
rgba(255,255,255,0.1) 6px,
transparent 6px,
transparent 14px
);
}
.paytest-btn-wrap {
margin-bottom: 20px;
}
.paytest-btn-wrap iframe,
.paytest-btn-wrap > div {
border-radius: 10px !important;
overflow: hidden;
}
.paytest-card-note {
display: flex;
align-items: center;
gap: 7px;
font-family: 'Outfit', sans-serif;
font-size: 0.72rem;
color: #444;
margin: 0;
padding-top: 4px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.paytest-card-note svg {
color: #555;
flex-shrink: 0;
opacity: 0.7;
}
@media (max-width: 820px) {
.paytest-inner {
grid-template-columns: 1fr;
gap: 48px;
padding: 0 24px;
}
.paytest {
padding: 80px 0 72px;
}
.paytest-sub {
max-width: 100%;
}
.paytest-card {
max-width: 100%;
}
}
.dl-ticket-price {
font-family: 'Fraunces', Georgia, serif;
font-size: 2.8rem;
font-weight: 900;
color: #1a1a1a;
line-height: 1;
margin: 8px 0 6px;
}
.dl-ticket-cents {
font-size: 1.4rem;
vertical-align: super;
font-weight: 700;
}
.dl-payment-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin: 16px 0 0;
}
.dl-pay-icon {
width: 38px;
height: 24px;
border-radius: 4px;
flex-shrink: 0;
}
.dl-ticket-sha--copy {
cursor: pointer;
user-select: none;
transition: color 0.2s ease;
display: inline-flex;
align-items: center;
gap: 4px;
}
.dl-ticket-sha--copy:hover {
color: #e8261c;
}
.dl-sha-copy-icon {
opacity: 0.4;
transition: opacity 0.2s ease;
}
.dl-ticket-sha--copy:hover .dl-sha-copy-icon {
opacity: 1;
}
.dl-ticket-sha--copy.copied code::after {
content: ' ✓';
color: #22c55e;
}
.dl-payhip-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid rgba(0,0,0,0.07);
font-family: 'Outfit', sans-serif;
font-size: 0.7rem;
color: #aaa;
letter-spacing: 0.05em;
}
.dl-payhip-logo {
width: 48px;
height: 14px;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════
CAPSCRIPT PRO SECTION — CENTERED REDESIGN
══════════════════════════════════════════════ */
.cspro {
padding: 130px 0 120px;
background: #0a0a0a;
position: relative;
overflow: hidden;
text-align: center;
}
.cspro::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
background-size: 180px;
opacity: 0.35;
pointer-events: none;
}
.cspro::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 700px;
height: 500px;
background: radial-gradient(ellipse, rgba(232, 38, 28, 0.06) 0%, transparent 65%);
pointer-events: none;
}
.cspro-inner {
max-width: 680px;
margin: 0 auto;
padding: 0 32px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
}
.cspro-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Outfit', sans-serif;
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #555;
margin-bottom: 24px;
}
.cspro-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #e8261c;
flex-shrink: 0;
}
.cspro-headline {
font-family: 'Gilroy ExtraBold', system-ui, sans-serif;
font-size: clamp(2.8rem, 6vw, 5rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
color: #f0ede8;
margin: 0 0 28px;
}
.cspro-headline em {
font-style: italic;
color: #e8261c;
}
.cspro-sub {
font-family: 'Outfit', sans-serif;
font-size: 0.95rem;
line-height: 1.75;
color: #666;
max-width: 560px;
margin: 0 auto 30px;
}
.cspro-actions {
display: flex;
align-items: stretch;
justify-content: center;
gap: 16px;
margin: 10px 0 18px;
width: 100%;
}
.cspro-card-link {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 22px 24px;
border-radius: 18px;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.03);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.cspro-card-link:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 24px 52px rgba(0, 0, 0, 0.26);
}
.cspro-card-link--primary {
background: #e8261c;
border-color: rgba(232, 38, 28, 0.28);
}
.cspro-card-link--primary:hover {
background: #cf2017;
border-color: rgba(207, 32, 23, 0.42);
}
.cspro-card-link-kicker {
font-family: 'Outfit', sans-serif;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.774);
}
.cspro-card-link-title {
font-family: 'Outfit', sans-serif;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.02em;
color: #f0ede8;
}
.cspro-card-link-copy {
font-family: 'Outfit', sans-serif;
font-size: 0.86rem;
line-height: 1.5;
color: #f8ede3;
max-width: 28ch;
}
.cspro-card-link-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Outfit', sans-serif;
font-size: 0.9rem;
font-weight: 700;
color: #fff;
margin-top: auto;
}
.cspro-card-link--ghost {
background: rgba(255, 255, 255, 0.02);
}
.cspro-card-link--ghost .cspro-card-link-title {
color: #f7f4ef;
}
.cspro-card-link--ghost .cspro-card-link-copy {
color: #8f8a83;
}
.cspro-card-link--ghost .cspro-card-link-cta {
color: #f0ede8;
}
.cspro-release-note {
font-family: 'Outfit', sans-serif;
font-size: 0.7rem;
color: #3a3a3a;
letter-spacing: 0.04em;
margin: 0;
}
@media (max-width: 600px) {
.cspro {
padding: 90px 0 80px;
}
.cspro-actions {
flex-direction: column;
width: 100%;
}
.cspro-card-link {
width: 100%;
align-items: flex-start;
}
}
/* ══════════════════════════════════════════════════════════════
FONT IMPORTS
Add these at the very top of your CSS file (or in )
══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Outfit:wght@400;600;700;900&family=Fraunces:ital,opsz,wght@0,9..144,900;1,9..144,900&display=swap');
/*
Or paste this in your instead of the @import:
*/
/* ══════════════════════════════════════════════════════════════
CHECKOUT CARD
══════════════════════════════════════════════════════════════ */
.cs-container {
width: 400px;
zoom: 1.25;
max-width: 100%;
margin: 84px 0 0 auto;
font-family: 'Outfit', system-ui, sans-serif;
}
.cs-card {
background: #141414;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.28),
0 20px 40px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.cs-card--top {
border-radius: 16px 16px 0 0;
min-height: 500px;
}
.cs-title {
height: 100px;
display: flex;
align-items: center;
padding: 0 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
color: #f0ede8;
}
.cs-steps {
padding: 24px 22px;
display: flex;
flex-direction: column;
gap: 18px;
}
.cs-section-label {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #e8261c;
margin-bottom: 8px;
}
.cs-p {
font-size: 24px;
font-weight: 600;
color: #888;
margin: 3px 0 0;
}
.cs-p--bright {
color: #c8c5bf;
}
.cs-hr {
border: none;
height: 1px;
background: rgba(255, 255, 255, 0.07);
margin: 0;
}
.cs-icons-row {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
padding: 4px 0;
}
.cs-sha-block {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 7px;
padding: 9px 12px;
cursor: pointer;
transition: border-color 0.2s ease;
}
.cs-sha-block:hover {
border-color: rgba(232, 38, 28, 0.3);
}
.cs-sha-inner {
display: flex;
align-items: flex-start;
gap: 8px;
}
.cs-sha-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #555;
white-space: nowrap;
margin-top: 2px;
flex-shrink: 0;
}
.cs-sha-hash {
font-family: 'Courier New', Courier, monospace;
font-size: 11px;
color: #555;
word-break: break-all;
line-height: 1.5;
transition: color 0.2s ease;
}
.cs-sha-block:hover .cs-sha-hash {
color: #c8c5bf;
}
.cs-sha-hash.copied {
color: #e8261c;
}
.cs-promo-form {
display: grid;
grid-template-columns: 1fr 72px;
gap: 10px;
}
.cs-promo-input {
height: 34px;
padding: 0 10px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
color: #c8c5bf;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 11px;
outline: none;
transition: border-color 0.2s ease, background 0.2s ease;
}
.cs-promo-input::placeholder {
color: #444;
}
.cs-promo-input:focus {
border-color: rgba(232, 38, 28, 0.5);
background: rgba(232, 38, 28, 0.04);
}
.cs-promo-apply {
height: 34px;
background: rgba(232, 38, 28, 0.12);
border: 1px solid rgba(232, 38, 28, 0.25);
border-radius: 6px;
color: #e8261c;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.cs-promo-apply:hover {
background: rgba(232, 38, 28, 0.22);
border-color: rgba(232, 38, 28, 0.45);
}
.cs-pay-details {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 20px;
}
.cs-pay-label {
font-size: 12px;
font-weight: 600;
color: #888;
}
.cs-pay-val {
font-size: 12px;
font-weight: 700;
color: #c8c5bf;
text-align: right;
}
.cs-pay-val--price {
font-family: 'Anton', 'Outfit', sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0.03em;
line-height: 1;
}
.cs-pay-val--free {
color: #5dde7a;
}
.cs-pkg-row {
display: flex;
align-items: center;
gap: 12px;
}
.cs-pkg-info {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
min-width: 0;
}
.cs-pkg-name-row {
display: flex;
align-items: center;
gap: 6px;
}
.cs-pkg-name {
font-size: 11px;
font-weight: 700;
color: #1a1a1a;
white-space: nowrap;
flex-shrink: 0;
}
.cs-pkg-dots {
flex: 1;
border-bottom: 1.5px dotted rgba(16, 10, 5, 0.18);
margin-bottom: 1px;
min-width: 8px;
}
.cs-pkg-qty {
font-family: 'Anton', 'Outfit', sans-serif;
font-size: 18px;
font-weight: 400;
color: #e8261c;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.cs-pkg-sub {
font-size: 10px;
font-weight: 600;
color: #aaa;
letter-spacing: 0.04em;
}
.cs-card--footer {
border-top: 1px solid rgba(232, 38, 28, 0.2);
border-radius: 0 0 16px 16px;
background: #0f0e0e;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.28),
0 16px 28px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(232, 38, 28, 0.06);
}
.cs-footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 12px 14px 16px;
gap: 8px;
}
.cs-price {
font-family: 'Anton', 'Outfit', sans-serif;
font-size: 30px;
font-weight: 400;
color: #f0ede8;
letter-spacing: 0.01em;
line-height: 1;
}
.cs-price sup {
font-size: 11px;
font-weight: 900;
vertical-align: super;
}
.cs-price-cents {
font-size: 13px;
font-weight: 900;
}
.cs-price-note {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #555;
margin-top: 3px;
}
.cs-pay-link {
text-decoration: none;
}
/* ══════════════════════════════════════════════════════════════
PAY BUTTON
══════════════════════════════════════════════════════════════ */
.pay-btn {
position: relative;
padding: 8px 14px;
font-size: 12px;
background: #1a1a1a;
color: white;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 7px;
transition: all 0.3s ease;
font-family: 'Outfit', system-ui, sans-serif;
}
.pay-btn:hover {
transform: translateY(-2px);
box-shadow:
0 5px 15px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(232, 38, 28, 0.3);
border-color: rgba(232, 38, 28, 0.35);
}
.btn-text {
font-weight: 700;
font-size: 13px;
letter-spacing: 0.03em;
}
.icon-container {
position: relative;
width: 22px;
height: 22px;
}
.icon {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 22px;
color: #e8261c;
opacity: 0;
visibility: hidden;
}
.default-icon {
opacity: 1;
visibility: visible;
}
.pay-btn:hover .icon {
animation: none;
}
.pay-btn:hover .wallet-icon {
opacity: 0;
visibility: hidden;
}
.pay-btn:hover .card-icon {
animation: iconRotate 2.5s infinite;
animation-delay: 0s;
}
.pay-btn:hover .payment-icon {
animation: iconRotate 2.5s infinite;
animation-delay: 0.5s;
}
.pay-btn:hover .dollar-icon {
animation: iconRotate 2.5s infinite;
animation-delay: 1s;
}
.pay-btn:hover .check-icon {
animation: iconRotate 2.5s infinite;
animation-delay: 1.5s;
}
.pay-btn:active .icon {
animation: none !important;
opacity: 0 !important;
visibility: hidden !important;
transition: all 0.3s ease;
}
.pay-btn:active .check-icon {
animation: checkmarkAppear 0.6s ease forwards !important;
visibility: visible !important;
}
@keyframes iconRotate {
0% {
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.5);
}
5% {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
15% {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
20% {
opacity: 0;
visibility: hidden;
transform: translateY(-10px) scale(0.5);
}
100% {
opacity: 0;
visibility: hidden;
transform: translateY(-10px) scale(0.5);
}
}
@keyframes checkmarkAppear {
0% {
opacity: 0;
transform: scale(0.5) rotate(-45deg);
}
50% {
opacity: 0.5;
transform: scale(1.2) rotate(0deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
/* ══════════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
.cs-container {
width: 100%;
margin: 0;
}
.cs-card--top {
min-height: auto;
}
}
.cs-container {
width: 400px;
max-width: 100%;
display: grid;
gap: 0;
}
.cs-card {
background: rgb(255, 255, 255);
border: 1px solid rgba(255, 255, 255, 0.14);
}
.cs-card--top { border-radius: 16px 16px 0 0; }
.cs-title {
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
border-bottom: 1px solid rgba(232, 38, 28, 0.18);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
color: #1a1a1a;
}
.cs-title-icons {
display: flex;
align-items: center;
gap: 0;
flex-shrink: 0;
}
.cs-title-icons svg {
border-radius: 3px;
height: 21px;
width: auto;
}
.cs-title-icons svg + svg {
margin-left: -8px;
}
.cs-steps {
padding: 24px 22px;
display: flex;
flex-direction: column;
gap: 18px;
}
.cs-section-label {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #e8261c;
margin-bottom: 8px;
}
.cs-p {
font-size: 11px;
font-weight: 600;
color: #888;
margin: 3px 0 0;
}
.cs-p--bright { color: #1a1a1a; }
.cs-hr {
border: none;
height: 1px;
background: rgba(16, 10, 5, 0.08);
margin: 0;
}
.cs-sha-strip {
display: flex;
align-items: center;
gap: 8px;
background: rgba(232, 38, 28, 0.04);
border: 1px solid rgba(232, 38, 28, 0.12);
border-radius: 7px;
padding: 7px 10px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
user-select: none;
}
.cs-sha-strip:hover {
border-color: rgba(232, 38, 28, 0.3);
background: rgba(232, 38, 28, 0.07);
}
.cs-sha-icon {
flex-shrink: 0;
color: #e8261c;
opacity: 0.7;
width: 13px;
height: 13px;
}
.cs-sha-pill {
flex-shrink: 0;
background: rgba(232, 38, 28, 0.10);
border-radius: 4px;
padding: 2px 6px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
color: #e8261c;
}
.cs-sha-hash-short {
font-family: 'Courier New', monospace;
font-size: 10.5px;
color: #888;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s;
}
.cs-sha-strip:hover .cs-sha-hash-short { color: #1a1a1a; }
.cs-sha-hash-short.copied { color: #e8261c; font-weight: 700; }
.cs-sha-copy {
flex-shrink: 0;
color: #bbb;
width: 12px;
height: 12px;
transition: color 0.2s;
}
.cs-sha-strip:hover .cs-sha-copy { color: #e8261c; }
.cs-promo-form {
display: grid;
grid-template-columns: 1fr 72px;
gap: 10px;
}
.cs-promo-input {
height: 34px;
padding: 0 10px;
border-radius: 6px;
border: 1px solid rgba(16, 10, 5, 0.16);
background: rgb(255, 255, 255);
color: #1a1a1a;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 11px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.cs-promo-input::placeholder { color: #aaa; }
.cs-promo-input:focus {
border-color: rgba(232, 38, 28, 0.4);
box-shadow: 0 0 0 3px rgba(232, 38, 28, 0.08);
}
.cs-promo-apply {
height: 34px;
background: rgba(232, 38, 28, 0.10);
border: 1px solid rgba(232, 38, 28, 0.25);
border-radius: 6px;
color: #e8261c;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.cs-promo-apply:hover {
background: rgba(232, 38, 28, 0.18);
border-color: rgba(232, 38, 28, 0.4);
}
.cs-pay-details {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 20px;
}
.cs-pay-label { font-size: 12px; font-weight: 600; color: #777; }
.cs-pay-val { font-size: 12px; font-weight: 700; color: #1a1a1a; text-align: right; }
.cs-pay-val--price {
font-family: 'Anton', 'Outfit', sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0.03em;
line-height: 1;
}
.cs-pay-val--free { color: #1e9e45; }
.cs-card--footer {
border-top: 1px solid rgba(232, 38, 28, 0.18);
border-radius: 0 0 16px 16px;
background: rgb(229, 9, 20);
}
.cs-footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 8px 12px 14px;
gap: 8px;
}
.cs-price {
font-family: 'Anton', 'Outfit', sans-serif;
font-size: 30px;
font-weight: 400;
color: #ffffff;
letter-spacing: 0.01em;
line-height: 1;
}
.cs-price sup { font-size: 11px; font-weight: 900; vertical-align: super; }
.cs-price-cents { font-size: 13px; font-weight: 900; }
.cs-price-note {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #e9e8e8;
margin-top: 3px;
}
.cs-footer-right {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-left: auto;
gap: 6px;
}
.cs-pay-link { text-decoration: none; }
.pay-btn {
position: relative;
padding: 8px 14px;
font-size: 12px;
background: #ffffff;
color: #1a1a1a;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 7px;
transition: all 0.3s ease;
font-family: 'Outfit', system-ui, sans-serif;
white-space: nowrap;
}
.pay-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.18), 0 0 0 1px rgba(232, 38, 28, 0.3);
border-color: rgba(232, 38, 28, 0.35);
background: #ffffff;
}
.btn-text { font-weight: 700; font-size: 12px; letter-spacing: 0.03em; }
.icon-container { position: relative; width: 18px; height: 18px; }
.icon {
position: absolute; top: 0; left: 0;
width: 18px; height: 18px;
color: #e8261c;
opacity: 0; visibility: hidden;
}
.default-icon { opacity: 1; visibility: visible; }
.pay-btn:hover .icon { animation: none; }
.pay-btn:hover .wallet-icon { opacity: 0; visibility: hidden; }
.pay-btn:hover .card-icon { animation: iconRotate 2.5s infinite; animation-delay: 0s; }
.pay-btn:hover .payment-icon { animation: iconRotate 2.5s infinite; animation-delay: 0.5s; }
.pay-btn:hover .dollar-icon { animation: iconRotate 2.5s infinite; animation-delay: 1s; }
.pay-btn:hover .check-icon { animation: iconRotate 2.5s infinite; animation-delay: 1.5s; }
.pay-btn:active .icon { animation: none !important; opacity: 0 !important; visibility: hidden !important; }
.pay-btn:active .check-icon { animation: checkmarkAppear 0.6s ease forwards !important; visibility: visible !important; }
@keyframes iconRotate {
0% { opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.5); }
5% { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
15% { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
20% { opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.5); }
100% { opacity: 0; visibility: hidden; }
}
@keyframes checkmarkAppear {
0% { opacity: 0; transform: scale(0.5) rotate(-45deg); }
50% { opacity: 0.5; transform: scale(1.2) rotate(0deg); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.cs-powered {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 0 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cs-powered-text {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgb(98, 98, 98);
}
.cs-powered img {
height: 15px;
width: auto;
opacity: 0.7;
filter: grayscale(1);
transition: opacity 0.2s;
}
.cs-powered:hover img { opacity: 0.65; }
@media (max-width: 480px) {
.cs-container {
width: 100%;
margin: 0;
}
}
.dl-chromestore-wrap {
text-align: center;
}
.dl-chromestore-btn {
display: inline-block;
margin-top: 10px;
}
.dl-chromestore-img {
height: 48px;
width: auto;
display: block;
transition: opacity 0.2s ease;
}
.dl-chromestore-btn:hover .dl-chromestore-img {
opacity: 0.85;
}