Add marketing website for SatsPrice
Static, dark-themed landing page showcasing the app's capabilities with real screenshots for Android, iOS, iPad, and macOS, plus download links for all supported distribution channels. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AejmWBrdE3DbJWbXoaE3aX
This commit is contained in:
Claude Sonnet 5
@@ -0,0 +1,747 @@
|
||||
/* ============ Tokens ============ */
|
||||
:root {
|
||||
--bg: #0a0d16;
|
||||
--bg-soft: #0e1220;
|
||||
--surface: #141a2c;
|
||||
--surface-2: #1b2338;
|
||||
--border: #262f4a;
|
||||
--border-soft: #1e2740;
|
||||
--text: #f2f4fb;
|
||||
--text-dim: #a7afc9;
|
||||
--text-faint: #6d7593;
|
||||
--gold: #f7b955;
|
||||
--gold-soft: #ffd98e;
|
||||
--blue: #5ec8f2;
|
||||
--coral: #ff6b6b;
|
||||
--green: #4ade80;
|
||||
|
||||
--gradient-gold: linear-gradient(135deg, #ffd98e 0%, #f7b955 50%, #e8963f 100%);
|
||||
--shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
|
||||
--shadow-md: 0 16px 32px -12px rgba(0, 0, 0, 0.5);
|
||||
--shadow-glow: 0 0 0 1px rgba(247, 185, 85, 0.15), 0 20px 50px -15px rgba(247, 185, 85, 0.25);
|
||||
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 24px;
|
||||
--radius-xl: 32px;
|
||||
|
||||
--container: 1200px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
img { max-width: 100%; display: block; }
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: var(--container);
|
||||
margin: 0 auto;
|
||||
padding-inline: 24px;
|
||||
}
|
||||
|
||||
section { position: relative; }
|
||||
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold-soft);
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.eyebrow::before {
|
||||
content: "";
|
||||
width: 18px;
|
||||
height: 2px;
|
||||
background: var(--gradient-gold);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
max-width: 640px;
|
||||
margin: 0 auto 56px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-head h2 {
|
||||
font-size: clamp(28px, 4vw, 42px);
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.section-head p {
|
||||
margin-top: 14px;
|
||||
color: var(--text-dim);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
/* ============ Background texture ============ */
|
||||
.bg-glow {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background:
|
||||
radial-gradient(700px 500px at 12% -5%, rgba(247, 185, 85, 0.16), transparent 60%),
|
||||
radial-gradient(800px 600px at 100% 10%, rgba(94, 200, 242, 0.12), transparent 55%),
|
||||
radial-gradient(900px 700px at 50% 120%, rgba(247, 185, 85, 0.08), transparent 60%),
|
||||
var(--bg);
|
||||
}
|
||||
|
||||
/* ============ Buttons ============ */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 14px 24px;
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--gradient-gold);
|
||||
color: #1a1305;
|
||||
box-shadow: 0 12px 30px -10px rgba(247, 185, 85, 0.55);
|
||||
}
|
||||
|
||||
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(247, 185, 85, 0.65); }
|
||||
|
||||
.btn-ghost {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: var(--text);
|
||||
border-color: var(--border);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.btn-ghost:hover { border-color: rgba(247, 185, 85, 0.5); transform: translateY(-2px); }
|
||||
|
||||
.btn-sm { padding: 10px 18px; font-size: 13px; }
|
||||
|
||||
/* ============ Header ============ */
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(10, 13, 22, 0.72);
|
||||
backdrop-filter: blur(14px);
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
}
|
||||
|
||||
.site-header .container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.brand img {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.main-nav a {
|
||||
font-size: 14.5px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.main-nav a:hover { color: var(--text); }
|
||||
|
||||
.header-cta { display: flex; align-items: center; gap: 14px; }
|
||||
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 10px 24px 20px;
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
background: var(--bg-soft);
|
||||
}
|
||||
|
||||
.mobile-nav a {
|
||||
padding: 12px 4px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
}
|
||||
|
||||
.mobile-nav.open { display: flex; }
|
||||
|
||||
/* ============ Hero ============ */
|
||||
.hero {
|
||||
padding: 84px 0 60px;
|
||||
}
|
||||
|
||||
.hero .container {
|
||||
display: grid;
|
||||
grid-template-columns: 1.05fr 0.95fr;
|
||||
align-items: center;
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
.hero-copy h1 {
|
||||
font-size: clamp(36px, 5.2vw, 58px);
|
||||
font-weight: 800;
|
||||
line-height: 1.06;
|
||||
}
|
||||
|
||||
.hero-copy h1 .accent {
|
||||
background: var(--gradient-gold);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.hero-copy p.lead {
|
||||
margin: 22px 0 0;
|
||||
font-size: 18px;
|
||||
color: var(--text-dim);
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.platform-pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.pill svg { width: 15px; height: 15px; flex-shrink: 0; }
|
||||
|
||||
.trust-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 18px;
|
||||
margin-top: 26px;
|
||||
font-size: 13px;
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
.trust-row span { display: inline-flex; align-items: center; gap: 6px; }
|
||||
.trust-row span::before { content: "✓"; color: var(--green); font-weight: 700; }
|
||||
|
||||
/* Hero visual */
|
||||
.hero-visual {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.phone-frame {
|
||||
position: relative;
|
||||
width: min(300px, 78vw);
|
||||
border-radius: 46px;
|
||||
padding: 14px;
|
||||
background: linear-gradient(160deg, #232c46, #11162650);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.phone-frame::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90px;
|
||||
height: 22px;
|
||||
background: #05070c;
|
||||
border-radius: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.phone-frame img {
|
||||
border-radius: 32px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.float-card {
|
||||
position: absolute;
|
||||
background: rgba(20, 26, 44, 0.85);
|
||||
border: 1px solid var(--border);
|
||||
backdrop-filter: blur(16px);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
padding: 14px 16px;
|
||||
z-index: 4;
|
||||
animation: float 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.float-card.ticker {
|
||||
top: -6px;
|
||||
right: -18px;
|
||||
min-width: 190px;
|
||||
}
|
||||
|
||||
.float-card.sources {
|
||||
bottom: 60px;
|
||||
left: -34px;
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
|
||||
.ticker .tk-label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-faint);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.ticker .tk-label .dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
|
||||
animation: pulse 1.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.ticker .tk-value {
|
||||
font-size: 21px;
|
||||
font-weight: 700;
|
||||
margin-top: 4px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.ticker .tk-sub {
|
||||
font-size: 12px;
|
||||
color: var(--text-faint);
|
||||
margin-top: 3px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.float-card.sources { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
|
||||
.float-card.sources .ic {
|
||||
width: 34px; height: 34px; border-radius: 10px;
|
||||
background: var(--gradient-gold);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
.float-card.sources .tx { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.3; }
|
||||
.float-card.sources .tx small { display: block; font-weight: 400; color: var(--text-faint); }
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.35; }
|
||||
}
|
||||
|
||||
.hero-blob {
|
||||
position: absolute;
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(247, 185, 85, 0.22), transparent 70%);
|
||||
filter: blur(10px);
|
||||
top: -60px;
|
||||
right: -60px;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ============ Logo strip ============ */
|
||||
.logo-strip {
|
||||
padding: 30px 0 10px;
|
||||
border-top: 1px solid var(--border-soft);
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
}
|
||||
|
||||
.logo-strip .container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 14px 40px;
|
||||
}
|
||||
|
||||
.logo-strip .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--text-faint);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.logo-strip svg { width: 16px; height: 16px; }
|
||||
|
||||
/* ============ Features ============ */
|
||||
.features { padding: 110px 0; }
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 26px 24px;
|
||||
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(247, 185, 85, 0.35);
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
.feature-card .icon {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
background: linear-gradient(150deg, rgba(247, 185, 85, 0.18), rgba(94, 200, 242, 0.12));
|
||||
border: 1px solid var(--border);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 16.5px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 14.5px;
|
||||
color: var(--text-dim);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.feature-card.wide { grid-column: span 2; }
|
||||
|
||||
/* ============ Platform showcase ============ */
|
||||
.showcase { padding: 40px 0 110px; }
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 44px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 11px 20px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--text-dim);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
}
|
||||
|
||||
.tab-btn svg { width: 16px; height: 16px; }
|
||||
|
||||
.tab-btn.active {
|
||||
background: var(--gradient-gold);
|
||||
color: #1a1305;
|
||||
border-color: transparent;
|
||||
box-shadow: 0 10px 24px -10px rgba(247, 185, 85, 0.6);
|
||||
}
|
||||
|
||||
.tab-panel { display: none; }
|
||||
.tab-panel.active { display: block; animation: fadein 0.35s ease; }
|
||||
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.shot-scroll {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
overflow-x: auto;
|
||||
padding: 10px 4px 26px;
|
||||
scroll-snap-type: x proximity;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.shot-scroll::-webkit-scrollbar { height: 8px; }
|
||||
.shot-scroll::-webkit-scrollbar-track { background: transparent; }
|
||||
.shot-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
|
||||
|
||||
.shot-scroll .shot {
|
||||
flex: 0 0 auto;
|
||||
scroll-snap-align: start;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.shot-scroll.h-phone .shot { height: 480px; }
|
||||
.shot-scroll.h-phone .shot img { height: 100%; width: auto; }
|
||||
|
||||
.shot-scroll.h-tablet .shot { height: 340px; }
|
||||
.shot-scroll.h-tablet .shot img { height: 100%; width: auto; }
|
||||
|
||||
.shot-scroll.h-desktop .shot { height: 300px; }
|
||||
.shot-scroll.h-desktop .shot img { height: 100%; width: auto; }
|
||||
|
||||
.shot.framed-phone { border-radius: 30px; border: 6px solid #1c2340; }
|
||||
.shot.framed-tablet { border-radius: 18px; border: 6px solid #1c2340; }
|
||||
|
||||
.showcase-caption {
|
||||
text-align: center;
|
||||
color: var(--text-faint);
|
||||
font-size: 13.5px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
/* ============ Download ============ */
|
||||
.download {
|
||||
padding: 100px 0 110px;
|
||||
}
|
||||
|
||||
.download-card {
|
||||
background: linear-gradient(155deg, var(--surface) 0%, var(--surface-2) 100%);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 64px 48px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.download-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(500px 260px at 50% -10%, rgba(247, 185, 85, 0.18), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.download-card h2 {
|
||||
font-size: clamp(26px, 4vw, 38px);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.download-card > p {
|
||||
color: var(--text-dim);
|
||||
margin: 14px auto 0;
|
||||
max-width: 480px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.badge-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
margin-top: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.badge-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: transform 0.18s ease, filter 0.18s ease;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.badge-link:hover { transform: translateY(-3px); }
|
||||
|
||||
.badge-link img { height: 56px; width: auto; border-radius: 12px; }
|
||||
|
||||
.badge-link.obtainium img,
|
||||
.badge-link.github img { height: 56px; }
|
||||
|
||||
.version-row {
|
||||
margin-top: 38px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.version-row .pill { background: rgba(255, 255, 255, 0.03); }
|
||||
|
||||
.oss-note {
|
||||
margin-top: 26px;
|
||||
font-size: 13.5px;
|
||||
color: var(--text-faint);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.oss-note a { color: var(--gold-soft); font-weight: 600; }
|
||||
.oss-note a:hover { text-decoration: underline; }
|
||||
|
||||
/* ============ Footer ============ */
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--border-soft);
|
||||
padding: 48px 0 36px;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.footer-brand img { width: 26px; height: 26px; border-radius: 7px; }
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 26px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 14px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.footer-links a:hover { color: var(--text); }
|
||||
|
||||
.footer-meta {
|
||||
margin-top: 28px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--border-soft);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
font-size: 12.5px;
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
/* ============ Responsive ============ */
|
||||
@media (max-width: 980px) {
|
||||
.main-nav { display: none; }
|
||||
.nav-toggle { display: inline-flex; }
|
||||
.hero .container { grid-template-columns: 1fr; }
|
||||
.hero-visual { margin-top: 20px; }
|
||||
.feature-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.feature-card.wide { grid-column: span 2; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero { padding: 48px 0 40px; }
|
||||
.hero-copy p.lead { font-size: 16px; }
|
||||
.feature-grid { grid-template-columns: 1fr; }
|
||||
.feature-card.wide { grid-column: span 1; }
|
||||
.download-card { padding: 44px 22px; }
|
||||
.badge-link img { height: 48px; }
|
||||
.float-card.sources { left: -10px; }
|
||||
.float-card.ticker { right: -8px; }
|
||||
.footer-grid { flex-direction: column; align-items: flex-start; }
|
||||
.footer-meta { flex-direction: column; }
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.header-cta .btn { display: none; }
|
||||
}
|
||||
Reference in New Issue
Block a user