/* ═══════════════════════════════════════════════════════════════
STLFinder — "Orbital Dark" v3.0 — PREMIUM ELITE
Cinematic UI/UX — Awwwards-Level Design System
═══════════════════════════════════════════════════════════════ */
/* Google Fonts: loaded via in HTML for non-render-blocking performance */
/* ── 1. Design Tokens ─────────────────────────────────────────── */
:root {
/* Backgrounds */
--bg-void: #030712;
--bg-base: #070b15;
--bg-surface: #0c1120;
--bg-card: rgba(12, 17, 32, 0.7);
--bg-glass: rgba(255, 255, 255, 0.02);
--bg-glass-hover: rgba(255, 255, 255, 0.05);
/* Borders */
--border-dim: rgba(255, 255, 255, 0.03);
--border-subtle: rgba(255, 255, 255, 0.06);
--border-default: rgba(255, 255, 255, 0.08);
--border-hover: rgba(99, 102, 241, 0.35);
--border-active: rgba(0, 240, 255, 0.5);
/* Text */
--text-bright: #f8fafc;
--text-primary: #e2e8f0;
--text-secondary:#94a3b8;
--text-tertiary: #64748b;
--text-muted: #475569;
--text-dim: #334155;
/* Accents */
--cyan: #06d6e0;
--indigo: #818cf8;
--violet: #a78bfa;
--blue: #60a5fa;
--emerald: #34d399;
--amber: #fbbf24;
--rose: #fb7185;
/* Gradients */
--grad-brand: linear-gradient(135deg, #06d6e0, #818cf8, #a78bfa);
--grad-cold: linear-gradient(135deg, #06d6e0, #818cf8);
--grad-warm: linear-gradient(135deg, #fbbf24, #fb7185);
--grad-surface: linear-gradient(180deg, rgba(12,17,32,0) 0%, var(--bg-void) 100%);
--grad-card: linear-gradient(135deg, rgba(99,102,241,0.04), rgba(6,214,224,0.02));
/* Shadows */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
--shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
--shadow-md: 0 8px 32px rgba(0,0,0,0.35);
--shadow-lg: 0 16px 48px rgba(0,0,0,0.4);
--shadow-xl: 0 24px 64px rgba(0,0,0,0.5);
--glow-brand: 0 0 30px rgba(6,214,224,0.12), 0 0 60px rgba(99,102,241,0.06);
/* Typography */
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing */
--max-w-page: 1320px;
--max-w-nav: 1400px;
/* Motion */
--ease: cubic-bezier(0.25, 0.8, 0.25, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 150ms;
--dur-base: 300ms;
--dur-slow: 600ms;
/* Radii */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 18px;
--r-2xl: 22px;
--r-full: 9999px;
}
/* ── 2. Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background: var(--bg-void);
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
::selection { background: rgba(129, 140, 248, 0.25); color: var(--text-bright); }
/* ── 3. Ambient Backgrounds ───────────────────────────────────── */
#particle-canvas {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.5;
}
.ambient-mesh {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 900px 600px at 15% 30%, rgba(6,214,224,0.04), transparent),
radial-gradient(ellipse 800px 500px at 85% 15%, rgba(129,140,248,0.05), transparent),
radial-gradient(ellipse 600px 400px at 50% 90%, rgba(167,139,250,0.03), transparent);
}
.noise-overlay {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.02;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ── 4. Keyframe Animations ───────────────────────────────────── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideLeft {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes pulseOrb {
0%, 100% { opacity: 0.3; transform: translate(-50%,-50%) scale(1); }
50% { opacity: 0.6; transform: translate(-50%,-50%) scale(1.1); }
}
@keyframes gradFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes borderSpin {
0% { --angle: 0deg; }
100% { --angle: 360deg; }
}
@property --angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
@keyframes neonPulse {
0%, 100% { box-shadow: 0 0 20px rgba(6,214,224,0.15), 0 0 50px rgba(129,140,248,0.08); }
50% { box-shadow: 0 0 35px rgba(6,214,224,0.25), 0 0 70px rgba(129,140,248,0.12); }
}
@keyframes cardReveal {
from { opacity: 0; transform: translateY(32px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes typewriterBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Reveal utility */
.reveal { opacity: 0; transform: translateY(32px); transition: all 0.7s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* ── 5. NAVBAR ────────────────────────────────────────────────── */
.navbar {
position: fixed;
top: 0; left: 0; right: 0;
height: 64px;
z-index: 100;
background: rgba(3, 7, 18, 0.6);
border-bottom: 1px solid var(--border-dim);
backdrop-filter: blur(24px) saturate(1.8);
-webkit-backdrop-filter: blur(24px) saturate(1.8);
transition: all var(--dur-base) ease;
}
.navbar.scrolled {
background: rgba(3, 7, 18, 0.92);
border-color: var(--border-subtle);
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.nav-inner {
max-width: var(--max-w-nav);
margin: 0 auto;
height: 100%;
display: flex;
align-items: center;
padding: 0 24px;
gap: 24px;
}
.nav-logo {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
flex-shrink: 0;
text-decoration: none;
}
.nav-brand-icon {
height: 30px;
width: auto;
object-fit: contain;
transition: transform var(--dur-base) var(--ease);
}
.nav-logo:hover .nav-brand-icon {
transform: rotate(15deg) scale(1.05);
}
.nav-logo-text {
font-size: 21px;
font-weight: 800;
letter-spacing: -0.03em;
display: inline-flex;
align-items: center;
line-height: 1;
user-select: none;
}
.logo-stl {
background: linear-gradient(135deg, var(--cyan), var(--indigo));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
}
.logo-finder {
color: var(--text-bright);
font-weight: 500;
margin-left: 1px;
transition: color var(--dur-fast) var(--ease);
}
.nav-logo:hover .logo-finder {
color: var(--cyan);
}
.nav-search-form {
flex: 1;
max-width: 480px;
position: relative;
}
.nav-search-wrap {
display: flex;
align-items: center;
background: rgba(255,255,255,0.03);
border: 1px solid var(--border-subtle);
border-radius: var(--r-full);
padding: 4px 6px 4px 16px;
transition: all var(--dur-base) var(--ease);
}
.nav-search-wrap:focus-within {
border-color: var(--border-hover);
background: rgba(255,255,255,0.05);
box-shadow: 0 0 0 3px rgba(129,140,248,0.08);
}
.nav-search-wrap input {
flex: 1;
background: none;
border: none;
outline: none;
color: var(--text-bright);
font-family: var(--font-sans);
font-size: 14px;
min-width: 0;
}
.nav-search-wrap input::placeholder { color: var(--text-muted); }
.nav-search-btn {
width: 32px; height: 32px;
border-radius: 50%;
border: none;
background: none;
color: var(--text-tertiary);
font-size: 13px;
display: grid;
place-items: center;
transition: all var(--dur-fast) ease;
}
.nav-search-btn:hover { color: var(--cyan); }
.nav-right {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
flex-shrink: 0;
}
.nav-stat {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-muted);
padding: 5px 12px;
border: 1px solid var(--border-dim);
border-radius: var(--r-full);
white-space: nowrap;
}
.nav-stat .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--emerald);
box-shadow: 0 0 6px rgba(52,211,153,0.5);
}
/* ── 6. Autocomplete ──────────────────────────────────────────── */
.autocomplete-wrapper {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
background: #080d1a;
border: 1px solid var(--border-default);
border-radius: var(--r-lg);
box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0,0,0,0.5);
z-index: 200;
overflow: hidden;
display: none;
animation: fadeUp 0.15s var(--ease-out);
}
.autocomplete-item {
padding: 12px 20px;
color: var(--text-secondary);
font-size: 14px;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: all var(--dur-fast) ease;
border-bottom: 1px solid var(--border-dim);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.focused {
background: rgba(129,140,248,0.06);
color: var(--text-primary);
padding-left: 24px;
}
.autocomplete-item i { color: var(--text-dim); font-size: 11px; flex-shrink: 0; }
.autocomplete-item:hover i { color: var(--cyan); }
.autocomplete-item strong { color: var(--cyan); font-weight: 600; }
/* ═══════════════════════════════════════════════════════════════
HOME PAGE
═══════════════════════════════════════════════════════════════ */
.home-page {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 40px 24px;
}
.home-container {
width: 100%;
max-width: 780px;
text-align: center;
z-index: 10;
position: relative;
}
/* Logo */
.home-logo-wrap {
margin-bottom: 48px;
position: relative;
animation: fadeUp 0.8s var(--ease-out);
}
.logo-glow-orb {
position: absolute;
width: 260px; height: 260px;
top: 50%; left: 50%;
background: radial-gradient(circle, rgba(129,140,248,0.15), rgba(6,214,224,0.05) 50%, transparent 70%);
filter: blur(50px);
pointer-events: none;
animation: pulseOrb 5s ease-in-out infinite;
}
.brand-logo-container {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 8px;
animation: fadeUp 0.8s var(--ease-out) both;
}
/* Updated Home Page logo */
.brand-icon-img {
height: clamp(60px, 9vw, 85px);
width: auto;
object-fit: contain;
transition: transform var(--dur-slow) var(--ease-spring);
}
.brand-logo-container:hover .brand-icon-img {
transform: rotate(15deg) scale(1.05);
}
.brand-logo-text {
font-size: clamp(38px, 6vw, 56px);
font-weight: 800;
letter-spacing: -0.04em;
display: inline-flex;
align-items: center;
line-height: 1;
user-select: none;
}
.hero-tagline {
font-size: clamp(15px, 2.5vw, 18px);
font-weight: 400;
color: var(--text-tertiary);
margin-top: 12px;
letter-spacing: 0.2px;
animation: fadeUp 0.8s 0.15s var(--ease-out) both;
}
.hero-description {
font-size: clamp(13px, 2vw, 14px);
font-weight: 400;
color: var(--text-dim);
margin-top: 14px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
animation: fadeUp 0.8s 0.2s var(--ease-out) both;
}
.hero-description b, .hero-description strong {
color: var(--text-secondary);
font-weight: 600;
}
/* ── Epic Search Bar ──────────────────────────────────────────── */
.hero-search-section {
animation: fadeUp 0.8s 0.3s var(--ease-out) both;
}
.hero-search-form {
position: relative;
max-width: 640px;
margin: 0 auto;
z-index: 100;
}
.search-bar-epic {
position: relative;
display: flex;
align-items: center;
background: var(--bg-card);
border: 1.5px solid var(--border-default);
border-radius: var(--r-full);
padding: 7px 8px 7px 24px;
backdrop-filter: blur(20px);
transition: all var(--dur-base) var(--ease);
}
/* Animated border glow on focus */
.search-bar-epic::before {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
background: conic-gradient(from var(--angle, 0deg), transparent, var(--cyan), var(--indigo), var(--violet), transparent);
z-index: -1;
opacity: 0;
transition: opacity var(--dur-slow) ease;
animation: borderSpin 4s linear infinite;
}
.search-bar-epic:focus-within::before { opacity: 0.7; }
.search-bar-epic:focus-within {
background: rgba(12,17,32,0.9);
border-color: transparent;
}
.search-icon-epic {
font-size: 17px;
color: var(--text-muted);
margin-right: 14px;
transition: all var(--dur-base) ease;
flex-shrink: 0;
}
.search-bar-epic:focus-within .search-icon-epic {
color: var(--cyan);
filter: drop-shadow(0 0 4px var(--cyan));
}
.search-bar-epic input {
flex: 1;
background: none;
border: none;
outline: none;
color: var(--text-bright);
font-family: var(--font-sans);
font-size: 16px;
font-weight: 400;
min-width: 0;
}
.search-bar-epic input::placeholder { color: var(--text-muted); }
.search-btn-epic {
background: var(--grad-brand);
background-size: 200% 200%;
animation: gradFlow 4s ease infinite;
border: none;
color: #030712;
font-weight: 700;
font-size: 14px;
padding: 12px 28px;
border-radius: var(--r-full);
display: flex;
align-items: center;
gap: 8px;
transition: all var(--dur-base) var(--ease);
white-space: nowrap;
flex-shrink: 0;
}
.search-btn-epic:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(129,140,248,0.35);
}
/* Stats Counter */
.hero-stats {
margin-top: 28px;
animation: fadeUp 0.8s 0.45s var(--ease-out) both;
}
.stats-line {
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
letter-spacing: 0.5px;
}
.stats-line .stat-number {
color: var(--text-primary);
font-weight: 800;
font-size: 17px;
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
}
.stats-line .stat-highlight {
color: var(--indigo);
font-weight: 700;
}
/* ── Trending Section ─────────────────────────────────────────── */
.popular-section {
margin-top: 56px;
animation: fadeUp 0.8s 0.6s var(--ease-out) both;
}
.section-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--text-dim);
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 700;
}
.section-label i { color: var(--amber); filter: drop-shadow(0 0 4px rgba(251,191,36,0.4)); }
.tags-flow {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
max-width: 650px;
margin: 0 auto;
}
.tag-chip {
background: var(--bg-glass);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
padding: 7px 16px;
border-radius: var(--r-full);
font-size: 13px;
font-weight: 500;
transition: all var(--dur-base) var(--ease);
position: relative;
overflow: hidden;
}
.tag-chip::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
transition: left 0.4s ease;
}
.tag-chip:hover::before { left: 100%; }
.tag-chip:hover {
border-color: var(--indigo);
color: var(--text-primary);
background: rgba(129,140,248,0.06);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(129,140,248,0.1);
}
/* Platforms Strip */
.platforms-strip {
margin-top: 48px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
max-width: 820px;
margin-left: auto;
margin-right: auto;
animation: fadeUp 0.8s 0.75s var(--ease-out) both;
}
.platform-icon-wrap {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--text-secondary);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
padding: 6px 14px;
border-radius: var(--r-full);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
transition: all var(--dur-base) ease;
}
.platform-icon-wrap:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.12);
color: var(--text-bright);
}
.platform-icon-wrap i {
font-size: 8px;
color: var(--indigo);
}
/* ═══════════════════════════════════════════════════════════════
SEARCH RESULTS PAGE
═══════════════════════════════════════════════════════════════ */
.search-page {
padding-top: 80px;
min-height: 100vh;
}
.search-layout {
display: flex;
gap: 28px;
max-width: var(--max-w-page);
width: 100%;
margin: 0 auto;
padding: 28px 24px;
position: relative;
z-index: 10;
}
/* ── Sidebar ──────────────────────────────────────────────────── */
.sidebar {
width: 240px;
flex-shrink: 0;
position: sticky;
top: 80px;
height: fit-content;
display: flex;
flex-direction: column;
gap: 16px;
animation: slideLeft 0.5s var(--ease-out);
}
.sidebar-panel {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--r-xl);
padding: 20px;
backdrop-filter: blur(12px);
}
.sidebar-title {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--text-dim);
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 6px;
font-weight: 700;
}
.sidebar-title i { color: var(--indigo); font-size: 12px; }
.stat-big {
font-size: 32px;
font-weight: 900;
color: var(--text-bright);
line-height: 1;
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
margin-bottom: 2px;
}
.stat-label { font-size: 13px; color: var(--text-muted); }
/* Filters */
.filter-group { display: flex; flex-direction: column; gap: 6px; }
.filter-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: transparent;
border: 1px solid var(--border-dim);
border-radius: var(--r-md);
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
transition: all var(--dur-base) var(--ease);
}
.filter-btn:hover {
background: var(--bg-glass-hover);
border-color: var(--border-default);
color: var(--text-primary);
}
.filter-btn.active {
background: rgba(129,140,248,0.08);
border-color: rgba(129,140,248,0.3);
color: var(--text-primary);
font-weight: 600;
}
.filter-btn i { width: 14px; text-align: center; font-size: 12px; }
.filter-btn.active i { color: var(--indigo); }
/* ── Results Area ─────────────────────────────────────────────── */
/* Full-width results layout (no sidebar) */
.results-wrap {
max-width: var(--max-w-page);
margin: 0 auto;
padding: 28px 24px;
position: relative;
z-index: 10;
}
.results-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 24px;
animation: fadeIn 0.4s var(--ease-out);
flex-wrap: wrap;
gap: 8px;
}
.results-header-left {
display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
}
.results-query {
font-size: 24px;
font-weight: 800;
color: var(--text-bright);
}
.results-query em {
font-style: normal;
background: var(--grad-brand);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.results-count {
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
font-family: var(--font-mono);
}
.results-meta {
font-size: 12px;
color: var(--text-dim);
font-weight: 500;
}
/* Grid Layout (consistent row heights) */
.masonry-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
}
/* ── Model Card ───────────────────────────────────────────────── */
.card {
background: #1e293b;
border: 1px solid #334155;
border-radius: var(--r-xl);
overflow: hidden;
transition: all var(--dur-base) var(--ease);
position: relative;
opacity: 0;
transform: translateY(32px);
animation: cardReveal 0.6s var(--ease-out) forwards;
display: flex;
flex-direction: column;
}
.card:hover {
border-color: var(--border-hover);
box-shadow: var(--shadow-md), 0 0 20px rgba(129,140,248,0.06);
transform: translateY(-3px);
}
/* Tilt light */
.card .tilt-light {
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity var(--dur-fast) ease;
background: radial-gradient(circle 200px at var(--mx, 50%) var(--my, 50%),
rgba(255,255,255,0.05), transparent);
}
.card:hover .tilt-light { opacity: 1; }
/* Card Image */
.card-img-wrap {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
background: #0a0f1c;
overflow: hidden;
display: block;
flex-shrink: 0;
}
.card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s var(--ease-out);
}
.card:hover .card-img-wrap img { transform: scale(1.05); }
/* Skeleton */
.card-img-wrap.loading::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, #0a0f1c 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.02) 60%, #0a0f1c 100%);
background-size: 200% 100%;
animation: shimmer 1.5s ease infinite;
z-index: 1;
}
/* Badge */
.badge {
position: absolute;
top: 10px;
left: 10px;
padding: 3px 10px;
border-radius: var(--r-full);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.1);
z-index: 3;
}
.badge-thingiverse { background: rgba(36,142,222,0.82); color: #fff; }
.badge-grabcad { background: rgba(220,50,47,0.82); color: #fff; }
.badge-cults3d { background: rgba(142,45,226,0.82); color: #fff; }
.badge-cgtrader { background: rgba(16,185,129,0.82); color: #fff; }
.badge-printables { background: rgba(245,158,11,0.82); color: #fff; }
.badge-sketchfab { background: rgba(0,152,237,0.82); color: #fff; }
.badge-prusaprinters { background: rgba(245,124,0,0.82); color: #fff; }
.badge-myminifactory { background: rgba(244,63,94,0.82); color: #fff; }
.badge-3docean { background: rgba(82,183,136,0.82); color: #fff; }
.badge-pinshape { background: rgba(233,75,53,0.82); color: #fff; }
.badge-cgstudio { background: rgba(100,116,139,0.82); color: #fff; }
.badge-youmagine { background: rgba(55,150,131,0.82); color: #fff; }
.badge-gambody { background: rgba(255,171,0,0.82); color: #fff; }
.badge-vizpark { background: rgba(79,70,229,0.82); color: #fff; }
.badge-digiprops { background: rgba(168,85,247,0.82); color: #fff; }
/* Card Body */
.card-body {
padding: 14px 16px 16px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.card-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color var(--dur-fast) ease;
}
.card:hover .card-title { color: var(--cyan); }
.card-desc {
font-size: 12px;
color: #94a3b8;
line-height: 1.5;
min-height: 36px; /* reserve space for 2 lines */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.04);
margin-top: auto;
}
.card-platform {
font-size: 10px;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.card-action {
color: var(--text-muted);
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
transition: all var(--dur-base) ease;
}
.card-action:hover { color: var(--cyan); gap: 6px; }
/* ── Empty State ──────────────────────────────────────────────── */
.empty-state {
text-align: center;
padding: 80px 32px;
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--r-2xl);
backdrop-filter: blur(12px);
}
.empty-state i { font-size: 48px; color: var(--text-dim); margin-bottom: 16px; }
.empty-state h2 { color: var(--text-bright); font-weight: 700; margin-bottom: 8px; }
.empty-state p { color: var(--text-tertiary); }
.empty-state em { color: var(--cyan); font-style: normal; }
/* ── Related Searches Section ─────────────────────────────────── */
.related-section {
margin-top: 32px;
padding: 24px;
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--r-xl);
backdrop-filter: blur(12px);
animation: fadeUp 0.5s 0.4s var(--ease-out) both;
}
.related-section .section-label {
justify-content: flex-start;
margin-bottom: 14px;
}
.related-section .section-label i { color: var(--indigo); filter: none; }
.related-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.related-tags .tag-chip {
font-size: 12px;
padding: 6px 14px;
}
/* ── Pagination ───────────────────────────────────────────────── */
.pagination-wrap {
display: flex;
justify-content: center;
margin-top: 32px;
animation: fadeIn 0.4s 0.3s var(--ease-out) both;
}
.pagination {
display: flex;
gap: 4px;
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--r-full);
padding: 4px;
backdrop-filter: blur(12px);
}
.pag-btn {
width: 38px; height: 38px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--text-secondary);
font-size: 13px;
font-weight: 600;
transition: all var(--dur-fast) ease;
}
.pag-btn:hover { background: var(--bg-glass-hover); color: var(--text-primary); }
.pag-btn.active {
background: var(--grad-cold);
color: #030712;
box-shadow: 0 3px 12px rgba(129,140,248,0.3);
}
/* ═══════════════════════════════════════════════════════════════
MODEL DETAIL PAGE
═══════════════════════════════════════════════════════════════ */
.detail-page { padding-top: 80px; }
/* Content */
.detail-content {
max-width: var(--max-w-page);
margin: 0 auto;
padding: 28px 24px;
position: relative;
z-index: 10;
}
/* Two-column product layout */
.detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: start;
}
/* Image */
.detail-image-wrap {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
background: #0a0f1c;
animation: fadeUp 0.5s var(--ease-out) both;
}
.detail-main-img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
.detail-image-wrap .detail-chip {
position: absolute;
top: 14px;
left: 14px;
}
.detail-chip {
padding: 5px 14px;
border-radius: var(--r-full);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-flex;
align-items: center;
gap: 6px;
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.1);
}
/* Info column */
.detail-info {
display: flex;
flex-direction: column;
gap: 20px;
animation: fadeUp 0.5s 0.15s var(--ease-out) both;
}
.detail-title {
font-size: clamp(24px, 4vw, 34px);
font-weight: 800;
color: var(--text-bright);
line-height: 1.2;
}
.detail-meta-bar {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.detail-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-tertiary);
padding: 6px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--border-subtle);
border-radius: var(--r-full);
}
.detail-meta-item i { color: var(--indigo); font-size: 11px; }
.detail-desc-block {
padding: 20px 10px 20px 0;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
max-height: 200px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border-subtle) transparent;
}
.detail-desc-block::-webkit-scrollbar {
width: 6px;
}
.detail-desc-block::-webkit-scrollbar-track {
background: transparent;
}
.detail-desc-block::-webkit-scrollbar-thumb {
background-color: var(--border-subtle);
border-radius: var(--r-full);
}
.detail-desc-block p {
font-size: 14px;
color: #94a3b8;
line-height: 1.8;
}
/* CTA */
.cta-download {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 32px;
border-radius: var(--r-full);
background: var(--grad-brand);
background-size: 200% 200%;
animation: gradFlow 4s ease infinite;
color: #030712;
font-size: 15px;
font-weight: 800;
border: none;
transition: all var(--dur-base) var(--ease);
}
.cta-download:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(129,140,248,0.3);
}
.cta-safety {
font-size: 11px;
color: var(--text-dim);
display: flex;
align-items: center;
gap: 6px;
}
.cta-safety i { color: var(--emerald); }
/* ── Price Badges ── */
.price-badge.price-free {
background: rgba(16,185,129,0.1);
border-color: rgba(16,185,129,0.25);
color: var(--emerald);
}
.price-badge.price-free i { color: var(--emerald); }
.price-badge.price-paid {
background: rgba(251,191,36,0.1);
border-color: rgba(251,191,36,0.25);
color: #fbbf24;
}
.price-badge.price-paid i { color: #fbbf24; }
/* ── Cross-Platform Block ── */
.cross-platform-block {
margin-top: 8px;
padding-top: 20px;
border-top: 1px solid var(--border-subtle);
}
.cross-platform-block .section-label {
margin-bottom: 12px;
}
.cross-platform-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.cross-platform-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
transition: all var(--dur-base) var(--ease);
color: var(--text-secondary);
font-size: 13px;
}
.cross-platform-item:hover {
background: rgba(129,140,248,0.06);
border-color: rgba(129,140,248,0.2);
transform: translateX(4px);
}
.cross-platform-item .badge {
position: static;
font-size: 10px;
min-width: 100px;
text-align: center;
flex-shrink: 0;
}
.cross-platform-item .cross-price {
font-size: 12px;
font-weight: 600;
flex: 1;
}
.cross-platform-item .cross-price.price-free { color: var(--emerald); }
.cross-platform-item .cross-price.price-paid { color: #fbbf24; }
.cross-platform-item i:last-child {
color: var(--text-dim);
font-size: 11px;
transition: transform var(--dur-fast) ease;
}
.cross-platform-item:hover i:last-child {
transform: translateX(3px);
color: var(--indigo);
}
/* ── Model Sections (Author / Similar) ── */
.model-section {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--border-subtle);
animation: fadeUp 0.5s 0.2s var(--ease-out) both;
}
.model-section .section-label {
margin-bottom: 20px;
}
.model-row-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
/* ── Mini Cards ── */
.mini-card {
display: flex;
flex-direction: column;
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--r-xl);
overflow: hidden;
transition: all var(--dur-base) var(--ease);
color: var(--text-secondary);
}
.mini-card:hover {
border-color: rgba(129,140,248,0.25);
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.mini-card-img-wrap {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: rgba(0,0,0,0.3);
}
.mini-card-img-wrap .card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-base) var(--ease);
}
.mini-card:hover .card-img {
transform: scale(1.05);
}
.mini-card-img-wrap .badge {
position: absolute;
top: 8px;
left: 8px;
font-size: 9px;
padding: 3px 8px;
}
.mini-card-title {
padding: 10px 12px;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Breadcrumb */
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-dim);
margin-bottom: 24px;
animation: fadeIn 0.3s var(--ease-out);
}
.breadcrumb a { color: var(--text-muted); transition: color var(--dur-fast) ease; }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb .sep { font-size: 9px; opacity: 0.4; }
.breadcrumb .current { color: var(--text-secondary); font-weight: 600; }
/* ═══════════════════════════════════════════════════════════════
ERROR PAGE
═══════════════════════════════════════════════════════════════ */
.error-page {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 32px;
}
.error-card {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--r-2xl);
padding: 64px 40px;
text-align: center;
backdrop-filter: blur(12px);
max-width: 460px;
width: 100%;
z-index: 10;
animation: fadeUp 0.5s var(--ease-out);
}
.error-card .error-code {
font-size: 72px;
font-weight: 900;
background: var(--grad-brand);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 12px;
}
.error-card h2 { color: var(--text-bright); font-weight: 700; margin-bottom: 8px; }
.error-card p { color: var(--text-tertiary); margin-bottom: 24px; }
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 24px;
border: 1px solid rgba(129,140,248,0.3);
border-radius: var(--r-full);
color: var(--indigo);
font-weight: 600;
font-size: 13px;
transition: all var(--dur-base) var(--ease);
}
.btn-ghost:hover {
background: rgba(129,140,248,0.06);
box-shadow: 0 0 16px rgba(129,140,248,0.1);
transform: translateY(-1px);
}
/* ═══════════════════════════════════════════════════════════════
MODEL ENRICHED CONTENT (Specs + FAQ)
═══════════════════════════════════════════════════════════════ */
.model-enriched { margin-top: 24px; }
.specs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.spec-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
background: var(--bg-card);
border: 1px solid var(--border-dim);
border-radius: var(--radius-md);
}
.spec-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--text-dim);
font-weight: 700;
}
.spec-value {
font-size: 14px;
color: var(--text-primary);
font-weight: 600;
}
.model-faq { margin-top: 24px; }
.faq-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.faq-item {
background: var(--bg-card);
border: 1px solid var(--border-dim);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color var(--dur-fast) ease;
}
.faq-item[open] {
border-color: var(--indigo);
}
.faq-item summary {
padding: 16px 20px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
color: var(--text-primary);
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
transition: background var(--dur-fast) ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
font-size: 18px;
color: var(--text-dim);
font-weight: 300;
transition: transform var(--dur-fast) ease;
}
.faq-item[open] summary::after {
content: '−';
color: var(--cyan);
}
.faq-item summary:hover {
background: rgba(129,140,248,0.04);
}
.faq-item p {
padding: 0 20px 16px;
font-size: 13px;
line-height: 1.7;
color: var(--text-secondary);
margin: 0;
}
/* ═══════════════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════════════ */
.site-footer {
width: 100%;
padding: 48px 24px 32px;
margin-top: auto;
border-top: 1px solid var(--border-dim);
background: rgba(3,7,18,0.6);
backdrop-filter: blur(12px);
z-index: 10;
position: relative;
}
.footer-inner {
max-width: var(--max-w-page);
margin: 0 auto;
}
.footer-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-bottom: 32px;
}
.footer-col {
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-heading {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2.5px;
color: var(--text-dim);
font-weight: 700;
margin-bottom: 6px;
}
.footer-col a {
color: var(--text-secondary);
font-size: 13px;
text-decoration: none;
transition: color var(--dur-fast) ease, padding-left var(--dur-fast) ease;
}
.footer-col a:hover {
color: var(--cyan);
padding-left: 4px;
}
.footer-about-text {
font-size: 12px;
color: var(--text-muted);
line-height: 1.6;
margin-top: 4px;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
border-top: 1px solid var(--border-dim);
}
.footer-socials {
display: flex;
align-items: center;
gap: 16px;
}
.footer-socials a {
color: var(--text-secondary);
font-size: 16px;
transition: color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.footer-socials a:hover {
color: var(--cyan);
transform: translateY(-2px);
}
.footer-credits {
font-size: 12px;
color: var(--text-dim);
}
.footer-credits a {
color: var(--text-secondary);
font-weight: 600;
text-decoration: none;
transition: color var(--dur-fast) ease;
}
.footer-credits a:hover {
color: var(--cyan);
}
/* ═══════════════════════════════════════════════════════════════
404 ERROR PAGE
═══════════════════════════════════════════════════════════════ */
.error-page {
max-width: var(--max-w-page);
margin: 0 auto;
padding: 120px 24px 80px;
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
}
.error-container {
text-align: center;
max-width: 520px;
animation: fadeUp 0.5s var(--ease-out) both;
}
.error-visual {
position: relative;
display: inline-block;
margin-bottom: 32px;
}
.error-code {
font-size: clamp(100px, 20vw, 180px);
font-weight: 900;
background: var(--grad-brand);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
opacity: 0.15;
}
.error-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
color: var(--indigo);
animation: float 3s ease-in-out infinite;
}
.error-title {
font-size: 28px;
font-weight: 800;
color: var(--text-bright);
margin-bottom: 12px;
}
.error-text {
font-size: 15px;
color: #94a3b8;
line-height: 1.6;
margin-bottom: 32px;
}
.error-actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.cta-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
border-radius: var(--r-full);
background: var(--grad-brand);
color: #030712;
font-size: 14px;
font-weight: 700;
transition: all var(--dur-base) ease;
}
.cta-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(129,140,248,0.3);
}
.cta-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
border-radius: var(--r-full);
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-default);
color: var(--text-secondary);
font-size: 14px;
font-weight: 600;
transition: all var(--dur-base) ease;
}
.cta-secondary:hover {
border-color: var(--indigo);
color: var(--text-bright);
}
/* ═══════════════════════════════════════════════════════════════
LEGAL / PRIVACY PAGE
═══════════════════════════════════════════════════════════════ */
.legal-content {
max-width: 800px;
margin: 0 auto;
padding: 100px 24px 60px;
position: relative;
z-index: 10;
animation: fadeUp 0.4s var(--ease-out) both;
}
.legal-title {
font-size: 32px;
font-weight: 800;
color: var(--text-bright);
margin-bottom: 6px;
}
.legal-updated {
font-size: 13px;
color: var(--text-dim);
margin-bottom: 40px;
}
.legal-section {
margin-bottom: 36px;
}
.legal-section h2 {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-subtle);
}
.legal-section h3 {
font-size: 15px;
font-weight: 600;
color: var(--text-secondary);
margin: 16px 0 8px;
}
.legal-section p {
font-size: 14px;
color: #94a3b8;
line-height: 1.8;
margin-bottom: 10px;
}
.legal-section ul {
list-style: none;
padding: 0;
margin: 8px 0 16px;
}
.legal-section ul li {
font-size: 14px;
color: #94a3b8;
line-height: 1.8;
padding-left: 20px;
position: relative;
}
.legal-section ul li::before {
content: '›';
position: absolute;
left: 4px;
color: var(--indigo);
font-weight: 700;
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
.masonry-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
.masonry-grid { grid-template-columns: repeat(3, 1fr); }
.detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.navbar { height: auto; }
.nav-inner {
flex-wrap: wrap;
padding: 12px 16px;
gap: 10px;
}
.nav-search-form { order: 3; flex-basis: 100%; max-width: 100%; }
.nav-right { display: none; }
.search-page, .detail-page { padding-top: 110px; }
.masonry-grid { grid-template-columns: repeat(2, 1fr); }
.model-row-grid { grid-template-columns: repeat(2, 1fr); }
.related-tags { gap: 6px; }
.error-page { padding: 80px 24px 60px; }
.legal-content { padding-top: 80px; }
.footer-links { grid-template-columns: 1fr; gap: 24px; }
.footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}
@media (max-width: 480px) {
.masonry-grid { grid-template-columns: 1fr; }
.search-bar-epic { padding: 5px 6px 5px 16px; }
.search-btn-epic { padding: 10px 20px; font-size: 13px; }
.results-header { flex-direction: column; gap: 6px; }
}