s
This commit is contained in:
root
461
app/globals.css
461
app/globals.css
@@ -852,3 +852,464 @@ html {
|
||||
background: #334155;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== Digital Visual Theme 2 ==================== */
|
||||
.digital-scope.digital-theme-theme2 {
|
||||
--background: var(--dn-bg);
|
||||
--foreground: var(--dn-text);
|
||||
--card: var(--dn-surface);
|
||||
--card-foreground: var(--dn-text);
|
||||
--muted: var(--dn-bg-soft);
|
||||
--muted-foreground: var(--dn-text-muted);
|
||||
--border: var(--dn-border);
|
||||
--accent: var(--dn-accent);
|
||||
--accent-foreground: #ffffff;
|
||||
--accent-muted: rgba(249, 115, 91, 0.14);
|
||||
--gradient-accent: rgba(15, 159, 122, 0.16);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(79, 70, 229, 0.035) 1px, transparent 1px),
|
||||
linear-gradient(0deg, rgba(15, 159, 122, 0.035) 1px, transparent 1px),
|
||||
linear-gradient(180deg, #fbfaf6 0%, var(--dn-bg) 34%, #eef7f3 100%);
|
||||
background-size: 44px 44px, 44px 44px, auto;
|
||||
color: var(--dn-text);
|
||||
font-family: var(--dn-font-body), system-ui, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
.dark .digital-scope.digital-theme-theme2 {
|
||||
--dn-bg: #0f1724 !important;
|
||||
--dn-bg-soft: #162235 !important;
|
||||
--dn-surface: #111c2c !important;
|
||||
--dn-surface-raised: #172235 !important;
|
||||
--dn-text: #f8fafc !important;
|
||||
--dn-text-muted: #a8b4c5 !important;
|
||||
--dn-border: rgba(226, 232, 240, 0.16) !important;
|
||||
--dn-primary: #8b93ff !important;
|
||||
--dn-primary-strong: #c4c9ff !important;
|
||||
--dn-accent: #ff967f !important;
|
||||
--dn-cta: #34d399 !important;
|
||||
--dn-cta-strong: #7ee7bf !important;
|
||||
--dn-shadow: 0 16px 42px rgba(0, 0, 0, 0.28) !important;
|
||||
--dn-shadow-hover: 0 22px 58px rgba(0, 0, 0, 0.34) !important;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(139, 147, 255, 0.055) 1px, transparent 1px),
|
||||
linear-gradient(0deg, rgba(52, 211, 153, 0.04) 1px, transparent 1px),
|
||||
linear-gradient(180deg, #0b1220 0%, #0f1724 48%, #122333 100%);
|
||||
background-size: 44px 44px, 44px 44px, auto;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-container {
|
||||
max-width: 1180px;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-header {
|
||||
top: 12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-header > .dn-container {
|
||||
height: 60px;
|
||||
border: 1px solid rgba(219, 228, 220, 0.86);
|
||||
border-radius: var(--dn-radius);
|
||||
background: rgba(255, 253, 248, 0.9);
|
||||
box-shadow: var(--dn-shadow);
|
||||
backdrop-filter: blur(18px);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.dark .digital-theme-theme2 .dn-header > .dn-container {
|
||||
border-color: var(--dn-border);
|
||||
background: rgba(17, 28, 44, 0.9);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-header-scrolled {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-brand {
|
||||
color: var(--dn-text);
|
||||
font-family: var(--dn-font-display), var(--dn-font-body), sans-serif;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-brand svg,
|
||||
.digital-theme-theme2 .dn-section-title svg,
|
||||
.digital-theme-theme2 .dn-subsection-title svg {
|
||||
color: var(--dn-primary);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-nav {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-nav-link,
|
||||
.digital-theme-theme2 .dn-header-control,
|
||||
.digital-theme-theme2 .dn-icon-button {
|
||||
border-radius: var(--dn-radius-sm);
|
||||
color: var(--dn-text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-nav-link:hover,
|
||||
.digital-theme-theme2 .dn-header-control:hover,
|
||||
.digital-theme-theme2 .dn-icon-button:hover {
|
||||
background: rgba(79, 70, 229, 0.08);
|
||||
color: var(--dn-primary-strong);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-mobile-menu {
|
||||
width: min(100% - 2rem, 1180px);
|
||||
margin: 0.5rem auto 0;
|
||||
border: 1px solid var(--dn-border);
|
||||
border-radius: var(--dn-radius);
|
||||
background: var(--dn-surface);
|
||||
box-shadow: var(--dn-shadow);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-hero {
|
||||
min-height: min(760px, 95vh);
|
||||
padding-top: 8.75rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-hero-bg {
|
||||
background:
|
||||
radial-gradient(circle at 50% 0%, rgba(15, 159, 122, 0.16), transparent 34%),
|
||||
linear-gradient(180deg, rgba(255, 253, 248, 0.72), rgba(247, 245, 239, 0.96));
|
||||
}
|
||||
|
||||
.dark .digital-theme-theme2 .dn-hero-bg {
|
||||
background:
|
||||
radial-gradient(circle at 50% 0%, rgba(52, 211, 153, 0.14), transparent 34%),
|
||||
linear-gradient(180deg, rgba(15, 23, 36, 0.82), rgba(15, 23, 36, 0.98));
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-hero-glow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-hero-title,
|
||||
.digital-theme-theme2 .dn-section-title {
|
||||
color: var(--dn-text);
|
||||
font-family: var(--dn-font-display), var(--dn-font-body), sans-serif;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-hero-title {
|
||||
max-width: 760px;
|
||||
line-height: 1.02;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-hero-copy,
|
||||
.digital-theme-theme2 .dn-section-copy,
|
||||
.digital-theme-theme2 .dn-card p,
|
||||
.digital-theme-theme2 footer p {
|
||||
color: var(--dn-text-muted);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .gradient-text {
|
||||
background: linear-gradient(120deg, var(--dn-primary), var(--dn-cta), var(--dn-accent));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-badge {
|
||||
border-color: rgba(79, 70, 229, 0.18);
|
||||
border-radius: var(--dn-radius);
|
||||
background: rgba(255, 255, 255, 0.74);
|
||||
color: var(--dn-primary-strong);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
|
||||
}
|
||||
|
||||
.dark .digital-theme-theme2 .dn-badge {
|
||||
border-color: rgba(139, 147, 255, 0.24);
|
||||
background: rgba(17, 28, 44, 0.76);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-button-primary {
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--dn-radius);
|
||||
background: var(--dn-cta);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 14px 30px rgba(15, 159, 122, 0.24);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-button-primary:hover {
|
||||
background: var(--dn-cta-strong);
|
||||
box-shadow: 0 16px 36px rgba(15, 159, 122, 0.3);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-button-secondary {
|
||||
border-color: var(--dn-border);
|
||||
border-radius: var(--dn-radius);
|
||||
background: var(--dn-surface);
|
||||
color: var(--dn-text);
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-button-secondary:hover {
|
||||
border-color: rgba(79, 70, 229, 0.28);
|
||||
background: rgba(79, 70, 229, 0.07);
|
||||
color: var(--dn-primary-strong);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-button-accent {
|
||||
border-radius: var(--dn-radius);
|
||||
background: var(--dn-accent);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-section {
|
||||
background: transparent;
|
||||
padding-top: 5.5rem;
|
||||
padding-bottom: 5.5rem;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-roadmap {
|
||||
background: linear-gradient(180deg, rgba(238, 247, 243, 0.72), rgba(247, 245, 239, 0.78));
|
||||
}
|
||||
|
||||
.dark .digital-theme-theme2 .dn-roadmap {
|
||||
background: linear-gradient(180deg, rgba(22, 34, 53, 0.72), rgba(15, 23, 36, 0.76));
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-card,
|
||||
.digital-theme-theme2 .community-card,
|
||||
.digital-theme-theme2 .resource-card {
|
||||
border-color: var(--dn-border);
|
||||
border-radius: var(--dn-radius);
|
||||
background: var(--dn-surface);
|
||||
box-shadow: var(--dn-shadow);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-account-hero,
|
||||
.digital-theme-theme2 .dn-account-panel,
|
||||
.digital-theme-theme2 .dn-action-card,
|
||||
.digital-theme-theme2 .dn-profile-menu {
|
||||
border-color: var(--dn-border);
|
||||
border-radius: var(--dn-radius);
|
||||
background: var(--dn-surface);
|
||||
box-shadow: var(--dn-shadow);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-card:hover,
|
||||
.digital-theme-theme2 .card-hover:hover,
|
||||
.digital-theme-theme2 .community-card:hover,
|
||||
.digital-theme-theme2 .resource-card:hover,
|
||||
.digital-theme-theme2 .dn-action-card:hover {
|
||||
border-color: rgba(79, 70, 229, 0.28);
|
||||
box-shadow: var(--dn-shadow-hover);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-profile-page {
|
||||
color: var(--dn-text);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-profile-menu {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-profile-menu-item {
|
||||
border-radius: var(--dn-radius-sm);
|
||||
color: var(--dn-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-profile-menu-item:hover {
|
||||
background: rgba(79, 70, 229, 0.08);
|
||||
color: var(--dn-primary-strong);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-avatar-button {
|
||||
background: var(--dn-primary);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-avatar-button:hover {
|
||||
background: var(--dn-primary-strong);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-status-pill {
|
||||
border: 1px solid rgba(79, 70, 229, 0.12);
|
||||
background: rgba(79, 70, 229, 0.08);
|
||||
color: var(--dn-primary-strong);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-muted-card {
|
||||
background: color-mix(in srgb, var(--dn-bg-soft) 84%, white);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dark .digital-theme-theme2 .dn-muted-card {
|
||||
background: color-mix(in srgb, var(--dn-bg-soft) 86%, black);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .rounded-2xl,
|
||||
.digital-theme-theme2 .rounded-xl {
|
||||
border-radius: var(--dn-radius);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-icon-box {
|
||||
border: 1px solid rgba(79, 70, 229, 0.12);
|
||||
border-radius: var(--dn-radius-sm);
|
||||
background: rgba(79, 70, 229, 0.08);
|
||||
color: var(--dn-primary);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-card-accent {
|
||||
background: linear-gradient(90deg, var(--dn-primary), var(--dn-cta), var(--dn-accent));
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-counter {
|
||||
border: 1px solid rgba(79, 70, 229, 0.12);
|
||||
border-radius: 999px;
|
||||
background: rgba(79, 70, 229, 0.08);
|
||||
color: var(--dn-primary-strong);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-text-link,
|
||||
.digital-theme-theme2 .text-sky-600,
|
||||
.digital-theme-theme2 .dark\:text-sky-400 {
|
||||
color: var(--dn-primary);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-tool-link,
|
||||
.digital-theme-theme2 .dn-resource-link {
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--dn-radius-sm);
|
||||
background: rgba(23, 32, 51, 0.035);
|
||||
color: var(--dn-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-tool-link:hover,
|
||||
.digital-theme-theme2 .dn-resource-link:hover {
|
||||
border-color: rgba(79, 70, 229, 0.22);
|
||||
background: rgba(79, 70, 229, 0.08);
|
||||
color: var(--dn-primary-strong);
|
||||
}
|
||||
|
||||
.dark .digital-theme-theme2 .dn-tool-link,
|
||||
.dark .digital-theme-theme2 .dn-resource-link {
|
||||
background: rgba(255, 255, 255, 0.045);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-subsection-title {
|
||||
color: var(--dn-text);
|
||||
font-family: var(--dn-font-display), var(--dn-font-body), sans-serif;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-resource-tile {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-resource-tile > div {
|
||||
border-color: var(--dn-border);
|
||||
border-radius: var(--dn-radius);
|
||||
background: var(--dn-surface);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-pagination {
|
||||
color: var(--dn-text-muted);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-icon-button {
|
||||
border-color: var(--dn-border);
|
||||
background: var(--dn-surface);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-pan {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-tabs {
|
||||
border-color: var(--dn-border);
|
||||
background: rgba(23, 32, 51, 0.025);
|
||||
}
|
||||
|
||||
.dark .digital-theme-theme2 .dn-tabs {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-tab {
|
||||
border-radius: var(--dn-radius-sm);
|
||||
color: var(--dn-text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-tab-active {
|
||||
background: rgba(79, 70, 229, 0.12);
|
||||
color: var(--dn-primary-strong);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .form-input,
|
||||
.digital-theme-theme2 input,
|
||||
.digital-theme-theme2 textarea,
|
||||
.digital-theme-theme2 select {
|
||||
border-color: var(--dn-border);
|
||||
border-radius: var(--dn-radius-sm);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.digital-theme-theme2 .form-input {
|
||||
border-color: var(--dn-border);
|
||||
background: var(--dn-surface);
|
||||
color: var(--dn-text);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .form-input:focus {
|
||||
border-color: var(--dn-primary);
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-footer {
|
||||
border-color: var(--dn-border);
|
||||
background: color-mix(in srgb, var(--dn-surface) 84%, transparent);
|
||||
}
|
||||
|
||||
.digital-theme-theme2 a:focus-visible,
|
||||
.digital-theme-theme2 button:focus-visible,
|
||||
.digital-theme-theme2 input:focus-visible,
|
||||
.digital-theme-theme2 textarea:focus-visible,
|
||||
.digital-theme-theme2 select:focus-visible {
|
||||
outline: 3px solid rgba(79, 70, 229, 0.28);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.digital-theme-theme2 .dn-header {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-header > .dn-container {
|
||||
width: calc(100% - 1rem);
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-hero {
|
||||
min-height: auto;
|
||||
padding-top: 7.5rem;
|
||||
}
|
||||
|
||||
.digital-theme-theme2 .dn-section {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.digital-theme-theme2 *,
|
||||
.digital-theme-theme2 *::before,
|
||||
.digital-theme-theme2 *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user