mirror of
https://github.com/sean2077/obsidian-dynamic-theme-background.git
synced 2026-07-22 06:44:57 +00:00
docs: update hero section with new descriptions and styles
This commit is contained in:
sean2077
parent
fb1a6f27fd
commit
a525e87ce5
4 changed files with 235 additions and 281 deletions
|
|
@ -28,7 +28,9 @@
|
|||
},
|
||||
"hero": {
|
||||
"badge": "Obsidian Plugin",
|
||||
"tagline": "Multi-source dynamic wallpapers for",
|
||||
"desc": "Multi-source Dynamic Wallpaper",
|
||||
"slogan": "Build Your Own Wallpaper Library in Obsidian!",
|
||||
"tagline": "Make every note-taking experience visually inspiring~",
|
||||
"statSources": "Wallpaper Sources",
|
||||
"statImages": "HD Wallpapers",
|
||||
"statFree": "Free & Open Source",
|
||||
|
|
|
|||
|
|
@ -28,7 +28,9 @@
|
|||
},
|
||||
"hero": {
|
||||
"badge": "Obsidian 插件",
|
||||
"tagline": "多源动态壁纸插件 ·",
|
||||
"desc": "多源动态壁纸",
|
||||
"slogan": "在 Obsidian 中打造你的专属壁纸库！",
|
||||
"tagline": "让每一次笔记体验都充满视觉灵感~",
|
||||
"statSources": "壁纸图源",
|
||||
"statImages": "高清壁纸",
|
||||
"statFree": "免费开源",
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
"offers": {"@type": "Offer", "price": "0", "priceCurrency": "USD"}
|
||||
}</script>
|
||||
<!-- External CSS -->
|
||||
<link rel="stylesheet" href="landing.css">
|
||||
<link rel="stylesheet" href="landing.css?v=1733500901">
|
||||
<!-- Early performance & iOS detection (must be inline for immediate execution) -->
|
||||
<script>
|
||||
(function () {
|
||||
|
|
@ -128,14 +128,18 @@
|
|||
<section class="hero" id="top">
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="container hero-container">
|
||||
<div class="hero-badge" data-i18n="hero.badge">Obsidian Plugin</div>
|
||||
<div class="hero-badges">
|
||||
<a href="https://obsidian.md" target="_blank" rel="noopener noreferrer" class="hero-badge"
|
||||
data-i18n="hero.badge">Obsidian Plugin</a>
|
||||
<span class="hero-badge hero-badge-alt" data-i18n="hero.desc">Multi-source Dynamic Wallpaper</span>
|
||||
</div>
|
||||
<h1 class="hero-title">
|
||||
<span class="hero-title-text">Dynamic Theme</span>
|
||||
<span class="hero-title-text hero-title-animated">Background</span>
|
||||
</h1>
|
||||
<p class="hero-tagline"><span data-i18n="hero.tagline">Multi-source dynamic wallpapers for</span> <a
|
||||
href="https://obsidian.md" target="_blank" rel="noopener noreferrer"
|
||||
class="obsidian-link">Obsidian</a></p>
|
||||
<p class="hero-slogan" data-i18n="hero.slogan">Build Your Own Wallpaper Library in Obsidian!</p>
|
||||
<p class="hero-tagline" data-i18n="hero.tagline">Make every note-taking experience visually inspiring
|
||||
</p>
|
||||
|
||||
<div class="hero-stats">
|
||||
<div class="hero-stat">
|
||||
|
|
|
|||
494
docs/landing.css
494
docs/landing.css
|
|
@ -8,8 +8,37 @@
|
|||
============================================ */
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
|
||||
/* Colors */
|
||||
--dtb-gradient: linear-gradient(135deg, #667eea, #764ba2);
|
||||
--dtb-bg-dark: #0a0a0a;
|
||||
--dtb-accent: #667eea;
|
||||
--dtb-accent-light: #889dff;
|
||||
--dtb-purple: #764ba2;
|
||||
--dtb-purple-light: #a78bfa;
|
||||
--dtb-purple-lighter: #c4b5fd;
|
||||
|
||||
/* Common values */
|
||||
--dtb-header-height: 3.75rem;
|
||||
--dtb-radius-sm: 0.5rem;
|
||||
--dtb-radius-md: 0.75rem;
|
||||
--dtb-radius-lg: 1rem;
|
||||
--dtb-radius-full: 3.125rem;
|
||||
|
||||
/* Glass effect */
|
||||
--dtb-glass-bg: rgba(255, 255, 255, 0.08);
|
||||
--dtb-glass-bg-hover: rgba(255, 255, 255, 0.12);
|
||||
--dtb-glass-border: rgba(255, 255, 255, 0.1);
|
||||
--dtb-glass-border-hover: rgba(255, 255, 255, 0.2);
|
||||
|
||||
/* Text opacity */
|
||||
--dtb-text-primary: rgba(255, 255, 255, 0.9);
|
||||
--dtb-text-secondary: rgba(255, 255, 255, 0.7);
|
||||
--dtb-text-muted: rgba(255, 255, 255, 0.5);
|
||||
|
||||
/* Transitions */
|
||||
--dtb-transition: 0.3s ease;
|
||||
--dtb-transition-fast: 0.2s ease;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -57,12 +86,19 @@ body {
|
|||
/* ============================================
|
||||
Dynamic Time-based Background
|
||||
============================================ */
|
||||
.dynamic-bg {
|
||||
|
||||
/* Common fixed layer styles */
|
||||
.dynamic-bg,
|
||||
.wallpaper-overlay,
|
||||
.floating-particles {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dynamic-bg {
|
||||
z-index: -2;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
|
@ -92,11 +128,6 @@ body {
|
|||
}
|
||||
|
||||
.wallpaper-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 100%);
|
||||
pointer-events: none;
|
||||
|
|
@ -115,22 +146,19 @@ body {
|
|||
}
|
||||
|
||||
.floating-particles {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--dtb-glass-bg);
|
||||
border-radius: 50%;
|
||||
animation: float 30s infinite linear;
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translate3d(0, 100vh, 0);
|
||||
|
|
@ -176,18 +204,20 @@ body {
|
|||
============================================ */
|
||||
.header {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(1.25rem);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid var(--dtb-glass-border);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
|
|
@ -198,11 +228,13 @@ body {
|
|||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.logo:focus-visible {
|
||||
outline: 2px solid #667eea;
|
||||
outline: 2px solid var(--dtb-accent);
|
||||
outline-offset: 4px;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dtb-radius-sm);
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
|
@ -211,13 +243,15 @@ body {
|
|||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.3s;
|
||||
transition: opacity var(--dtb-transition);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
|
|
@ -232,19 +266,21 @@ body {
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: var(--dtb-radius-md);
|
||||
background: var(--dtb-glass-bg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
opacity: 0.85;
|
||||
font-size: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-links a.icon-btn span.ico,
|
||||
.nav-links button.icon-btn span.ico {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1;
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
|
||||
}
|
||||
|
||||
.nav-links a.icon-btn svg,
|
||||
.nav-links button.icon-btn svg {
|
||||
width: 1.1rem;
|
||||
|
|
@ -252,17 +288,19 @@ body {
|
|||
display: block;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.nav-links a.icon-btn:hover,
|
||||
.nav-links button.icon-btn:hover {
|
||||
opacity: 1;
|
||||
background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
|
||||
box-shadow:
|
||||
0 4px 14px -6px rgba(0, 0, 0, 0.55),
|
||||
0 0.25rem 0.875rem -0.375rem rgba(0, 0, 0, 0.55),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.25) inset;
|
||||
}
|
||||
|
||||
.nav-links a.icon-btn:focus-visible,
|
||||
.nav-links button.icon-btn:focus-visible {
|
||||
outline: 2px solid #667eea;
|
||||
outline: 2px solid var(--dtb-accent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -270,16 +308,17 @@ body {
|
|||
.lang-toggle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lang-toggle .lang-text {
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
right: -4px;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
bottom: -0.25rem;
|
||||
right: -0.25rem;
|
||||
background: var(--dtb-gradient);
|
||||
color: #fff;
|
||||
font-size: 0.55rem;
|
||||
line-height: 1;
|
||||
padding: 0.2rem 0.35rem 0.28rem;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dtb-radius-sm);
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.5);
|
||||
|
|
@ -290,19 +329,21 @@ body {
|
|||
}
|
||||
|
||||
/* Global links */
|
||||
a:not(.btn):not(.icon-btn):not(.nav-links a):not(.logo) {
|
||||
a:not(.btn):not(.icon-btn):not(.nav-links a):not(.logo):not(.hero-badge) {
|
||||
color: rgb(230 235 255 / 86%);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(255, 255, 255, 0.25);
|
||||
text-underline-offset: 3px;
|
||||
transition:
|
||||
color 0.3s,
|
||||
text-decoration-color 0.35s;
|
||||
color var(--dtb-transition),
|
||||
text-decoration-color var(--dtb-transition);
|
||||
}
|
||||
a:not(.btn):not(.icon-btn):not(.nav-links a):not(.logo):hover {
|
||||
|
||||
a:not(.btn):not(.icon-btn):not(.nav-links a):not(.logo):not(.hero-badge):hover {
|
||||
color: #ffffff;
|
||||
text-decoration-color: #889dff;
|
||||
text-decoration-color: var(--dtb-accent-light);
|
||||
}
|
||||
|
||||
a code {
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -311,12 +352,12 @@ a code {
|
|||
Hero Section
|
||||
============================================ */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
min-height: calc(100vh - var(--dtb-header-height));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 0 80px;
|
||||
padding: 2rem 0 5rem;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -332,8 +373,24 @@ a code {
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
max-width: 900px;
|
||||
max-width: 56.25rem;
|
||||
padding: 0 2rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding-top: 2vh;
|
||||
}
|
||||
|
||||
/* 顶部标签组 */
|
||||
.hero-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.6s 0.1s forwards;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
|
|
@ -341,24 +398,46 @@ a code {
|
|||
padding: 0.4rem 1rem;
|
||||
background: rgba(139, 92, 246, 0.3);
|
||||
border: 1px solid rgba(139, 92, 246, 0.5);
|
||||
border-radius: 50px;
|
||||
border-radius: var(--dtb-radius-full);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #c4b5fd;
|
||||
color: var(--dtb-purple-lighter);
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.6s 0.1s forwards;
|
||||
text-decoration: none !important;
|
||||
transition:
|
||||
background var(--dtb-transition-fast),
|
||||
border-color var(--dtb-transition-fast),
|
||||
transform var(--dtb-transition-fast);
|
||||
}
|
||||
|
||||
.hero-badge:hover {
|
||||
background: rgba(139, 92, 246, 0.5);
|
||||
border-color: rgba(139, 92, 246, 0.7);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.hero-badge-alt {
|
||||
background: var(--dtb-glass-bg);
|
||||
border-color: var(--dtb-glass-border-hover);
|
||||
color: var(--dtb-text-primary);
|
||||
font-weight: 500;
|
||||
text-transform: none;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.hero-badge-alt:hover {
|
||||
background: var(--dtb-glass-bg-hover);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.5rem, 8vw, 4.5rem);
|
||||
margin-bottom: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 800;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.6s 0.2s forwards;
|
||||
line-height: 1.3;
|
||||
line-height: 1.1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -367,7 +446,7 @@ a code {
|
|||
|
||||
.hero-title-text {
|
||||
display: block;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 50%, #c4b5fd 100%);
|
||||
background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 50%, var(--dtb-purple-lighter) 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
|
@ -376,7 +455,14 @@ a code {
|
|||
}
|
||||
|
||||
.hero-title-animated {
|
||||
background: linear-gradient(90deg, #ffffff 0%, #c4b5fd 25%, #a78bfa 50%, #c4b5fd 75%, #ffffff 100%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#ffffff 0%,
|
||||
var(--dtb-purple-lighter) 25%,
|
||||
var(--dtb-purple-light) 50%,
|
||||
var(--dtb-purple-lighter) 75%,
|
||||
#ffffff 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
|
|
@ -398,36 +484,37 @@ a code {
|
|||
}
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
font-size: 1.25rem;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin-bottom: 2.5rem;
|
||||
.hero-slogan {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-bottom: 0.2rem;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.6s 0.3s forwards;
|
||||
animation: fadeInUp 0.6s 0.25s forwards;
|
||||
letter-spacing: 0.03em;
|
||||
text-align: center;
|
||||
text-shadow: 0 0.125rem 1.25rem rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
font-size: 0.95rem;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: var(--dtb-text-secondary);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.95rem;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.6s 0.35s forwards;
|
||||
letter-spacing: 0.02em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-tagline .obsidian-link {
|
||||
color: #a88beb;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition:
|
||||
color 0.2s,
|
||||
text-shadow 0.2s;
|
||||
}
|
||||
|
||||
.hero-tagline .obsidian-link:hover {
|
||||
color: #c4b5fd;
|
||||
text-shadow: 0 0 20px rgba(168, 139, 235, 0.6);
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.6s 0.4s forwards;
|
||||
}
|
||||
|
|
@ -447,15 +534,15 @@ a code {
|
|||
.hero-stat-label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: var(--dtb-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.hero-stat-divider {
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
height: 2.5rem;
|
||||
background: var(--dtb-glass-border-hover);
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
|
|
@ -464,6 +551,7 @@ a code {
|
|||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.6s 0.5s forwards;
|
||||
}
|
||||
|
|
@ -475,18 +563,18 @@ a code {
|
|||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--dtb-glass-bg);
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.hero-scroll-hint {
|
||||
position: relative;
|
||||
margin-top: 2.5rem;
|
||||
margin-top: auto;
|
||||
padding-top: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: var(--dtb-text-muted);
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
|
|
@ -495,10 +583,10 @@ a code {
|
|||
}
|
||||
|
||||
.hero-scroll-arrow {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-right: 2px solid rgba(255, 255, 255, 0.5);
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.5);
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-right: 2px solid var(--dtb-text-muted);
|
||||
border-bottom: 2px solid var(--dtb-text-muted);
|
||||
transform: rotate(45deg);
|
||||
animation: scrollBounce 2s ease-in-out infinite;
|
||||
}
|
||||
|
|
@ -509,10 +597,9 @@ a code {
|
|||
transform: rotate(45deg) translate(0, 0);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(45deg) translate(3px, 3px);
|
||||
transform: rotate(45deg) translate(0.1875rem, 0.1875rem);
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-isolate {
|
||||
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
|
||||
line-height: 1;
|
||||
|
|
@ -529,127 +616,6 @@ a code {
|
|||
}
|
||||
}
|
||||
|
||||
/* Hero Showcase: Image + Actions (kept for potential future use) */
|
||||
.hero-showcase {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.8s 0.3s forwards;
|
||||
}
|
||||
.hero-img-wrap {
|
||||
flex: 1;
|
||||
max-width: 720px;
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 25px 80px rgba(0, 0, 0, 0.5),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.12),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.hero-img-wrap img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
justify-content: center;
|
||||
}
|
||||
.hero-action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(12px);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 10px;
|
||||
font-size: 0.82rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-align: left;
|
||||
}
|
||||
.hero-action-item .action-ico {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.hero-action-item strong {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero .subtitle {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 1s 0.6s forwards;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.hero p {
|
||||
font-size: 1.05rem;
|
||||
margin-bottom: 2rem;
|
||||
max-width: 560px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 1s 0.8s forwards;
|
||||
line-height: 1.7;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Hero Visual */
|
||||
.hero-visual {
|
||||
opacity: 0;
|
||||
animation: fadeInUp 1s 0.6s forwards;
|
||||
}
|
||||
.hero-img-wrap {
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0, 0, 0, 0.4),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.hero-img-wrap img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.hero-img-glow {
|
||||
position: absolute;
|
||||
inset: -30%;
|
||||
background: radial-gradient(ellipse at center, rgba(102, 126, 234, 0.2) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
margin-top: 1rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.hero-action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
padding: 0.45rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.72rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.hero-action-item .action-ico {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Buttons
|
||||
============================================ */
|
||||
|
|
@ -678,18 +644,18 @@ a code {
|
|||
box-shadow: 0 25px 50px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
.btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--dtb-glass-border);
|
||||
color: white;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(var(--dtb-blur));
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 15px 30px rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 15px 30px var(--dtb-glass-border);
|
||||
}
|
||||
.btn-tertiary {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--dtb-glass-hover);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -726,7 +692,7 @@ a code {
|
|||
}
|
||||
.section-subtitle {
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: var(--dtb-text-secondary);
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
|
@ -742,8 +708,8 @@ a code {
|
|||
}
|
||||
.quickstart-step {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--dtb-glass-border);
|
||||
border-radius: var(--dtb-radius-lg);
|
||||
padding: 1.75rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -751,7 +717,7 @@ a code {
|
|||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
color: var(--dtb-accent);
|
||||
background: rgba(102, 126, 234, 0.15);
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: 20px;
|
||||
|
|
@ -764,7 +730,7 @@ a code {
|
|||
margin-bottom: 0.6rem;
|
||||
}
|
||||
.quickstart-step p {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: var(--dtb-text-secondary);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
|
@ -781,7 +747,7 @@ a code {
|
|||
gap: 2rem;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid var(--dtb-glass-bg);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
|
@ -829,7 +795,7 @@ a code {
|
|||
margin-top: 1rem;
|
||||
}
|
||||
.statusbar-tip {
|
||||
color: #667eea;
|
||||
color: var(--dtb-accent);
|
||||
font-size: 0.8rem;
|
||||
margin-top: 0.5rem;
|
||||
font-style: italic;
|
||||
|
|
@ -1048,7 +1014,7 @@ a code {
|
|||
.demo-item h3 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.3rem;
|
||||
color: #667eea;
|
||||
color: var(--dtb-accent);
|
||||
}
|
||||
|
||||
.demo-img-wrap {
|
||||
|
|
@ -1100,13 +1066,13 @@ a code {
|
|||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.4rem 0.9rem 0.42rem;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--dtb-glass-bg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 40px;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.4px;
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(6px);
|
||||
backdrop-filter: blur(var(--dtb-blur));
|
||||
}
|
||||
.summary-pill .ico {
|
||||
font-size: 0.95rem;
|
||||
|
|
@ -1135,19 +1101,16 @@ a code {
|
|||
}
|
||||
|
||||
.qs-step {
|
||||
background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
|
||||
background: linear-gradient(145deg, var(--dtb-glass-bg), rgba(255, 255, 255, 0.04));
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: 20px;
|
||||
border-radius: var(--dtb-radius-lg);
|
||||
padding: 1.55rem 1.35rem 1.3rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 150px;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
background 0.35s,
|
||||
transform 0.4s,
|
||||
box-shadow 0.4s;
|
||||
transition: var(--dtb-transition-all);
|
||||
}
|
||||
.qs-step:before {
|
||||
content: "";
|
||||
|
|
@ -1199,7 +1162,7 @@ a code {
|
|||
right: 0.7rem;
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.5px;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
background: var(--dtb-gradient);
|
||||
color: #fff;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
|
|
@ -1262,8 +1225,8 @@ a code {
|
|||
.statusbar-actions li {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
padding: 0.55rem 0.75rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--dtb-radius);
|
||||
border: 1px solid var(--dtb-glass-border);
|
||||
font-size: 0.78rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -1331,12 +1294,12 @@ a code {
|
|||
}
|
||||
.install-tabs .tab-btn[aria-selected="true"],
|
||||
.install-tabs .tab-btn.is-active {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
border-color: #889dff;
|
||||
background: var(--dtb-gradient);
|
||||
border-color: var(--dtb-accent-light);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35);
|
||||
}
|
||||
.install-tabs .tab-btn:focus-visible {
|
||||
outline: 2px solid #889dff;
|
||||
outline: 2px solid var(--dtb-accent-light);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.install-tabs .tab-panels {
|
||||
|
|
@ -1357,9 +1320,9 @@ a code {
|
|||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 3rem;
|
||||
border-radius: 25px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: transform 0.3s;
|
||||
backdrop-filter: blur(var(--dtb-blur));
|
||||
border: 1px solid var(--dtb-glass-border);
|
||||
transition: var(--dtb-transition);
|
||||
}
|
||||
.install-method:hover {
|
||||
transform: translateY(-5px);
|
||||
|
|
@ -1367,7 +1330,7 @@ a code {
|
|||
.install-method h3 {
|
||||
font-size: 1.8rem;
|
||||
margin: 0 0 2rem;
|
||||
color: #667eea;
|
||||
color: var(--dtb-accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
|
@ -1392,7 +1355,7 @@ a code {
|
|||
}
|
||||
.status-beta {
|
||||
background: rgba(102, 126, 234, 0.18);
|
||||
color: #889dff;
|
||||
color: var(--dtb-accent-light);
|
||||
border: 1px solid rgba(102, 126, 234, 0.35);
|
||||
}
|
||||
|
||||
|
|
@ -1401,7 +1364,7 @@ a code {
|
|||
}
|
||||
.install-steps li {
|
||||
padding: 0.9rem 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-bottom: 1px solid var(--dtb-glass-bg);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.85rem;
|
||||
|
|
@ -1413,7 +1376,7 @@ a code {
|
|||
.install-step-number {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
background: var(--dtb-gradient);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
|
|
@ -1584,8 +1547,8 @@ a code {
|
|||
.roadmap-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: var(--dtb-radius-lg);
|
||||
border: 1px solid var(--dtb-glass-bg);
|
||||
display: flex;
|
||||
gap: 0.65rem;
|
||||
align-items: flex-start;
|
||||
|
|
@ -1625,15 +1588,15 @@ a code {
|
|||
.faq-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--dtb-radius-lg);
|
||||
backdrop-filter: blur(var(--dtb-blur));
|
||||
border: 1px solid var(--dtb-glass-border);
|
||||
}
|
||||
.faq-question {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: #667eea;
|
||||
color: var(--dtb-accent);
|
||||
}
|
||||
.faq-answer {
|
||||
opacity: 0.9;
|
||||
|
|
@ -1653,7 +1616,7 @@ a code {
|
|||
color: white;
|
||||
text-align: center;
|
||||
padding: 3.2rem 0 2.2rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-top: 1px solid var(--dtb-glass-border);
|
||||
}
|
||||
.footer-content {
|
||||
display: grid;
|
||||
|
|
@ -1758,7 +1721,7 @@ a code {
|
|||
width: 3.25rem;
|
||||
height: 3.25rem;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: var(--dtb-gradient);
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
|
@ -1772,7 +1735,7 @@ a code {
|
|||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
opacity: 0;
|
||||
transform: translateY(0.5rem);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: var(--dtb-transition-all);
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -1845,7 +1808,7 @@ a code {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: var(--dtb-gradient);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
|
|
@ -1855,7 +1818,7 @@ a code {
|
|||
0 4px 15px rgba(102, 126, 234, 0.4),
|
||||
0 8px 30px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: var(--dtb-transition-all);
|
||||
z-index: 300;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -2158,7 +2121,16 @@ html.dtb-perf-low .api-logo:hover {
|
|||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero {
|
||||
padding: 2rem 0;
|
||||
padding: 2rem 0 4rem;
|
||||
}
|
||||
.hero-badges {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.hero-badge {
|
||||
width: auto;
|
||||
max-width: fit-content;
|
||||
}
|
||||
.hero-stats {
|
||||
flex-direction: column;
|
||||
|
|
@ -2171,31 +2143,15 @@ html.dtb-perf-low .api-logo:hover {
|
|||
.hero-title {
|
||||
font-size: clamp(2rem, 10vw, 3rem);
|
||||
}
|
||||
.hero-slogan {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.hero-tagline {
|
||||
font-size: 1rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.hero-scroll-hint {
|
||||
display: none;
|
||||
}
|
||||
.hero-showcase {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
.hero-img-wrap {
|
||||
max-width: 100%;
|
||||
}
|
||||
.hero-actions {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.hero-grid {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.hero-action-item {
|
||||
font-size: 0.68rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
.cta-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -2253,14 +2209,10 @@ html.dtb-perf-low .api-logo:hover {
|
|||
font-size: clamp(2.2rem, 8vw, 3.2rem);
|
||||
line-height: 1.1;
|
||||
}
|
||||
.hero p {
|
||||
font-size: clamp(1rem, 3.5vw, 1.2rem);
|
||||
padding: 0 10px;
|
||||
}
|
||||
.btn {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
padding: 1rem 1.5rem;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.feature-card {
|
||||
|
|
@ -2364,12 +2316,6 @@ html.dtb-perf-low .api-logo:hover {
|
|||
.hero-title {
|
||||
font-size: clamp(2.2rem, 6.5vw, 3.2rem);
|
||||
}
|
||||
.hero .subtitle {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.hero p {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1100px) and (max-height: 900px) {
|
||||
.features-grid {
|
||||
|
|
|
|||
Loading…
Reference in a new issue