Initial commit: SiteLoft.nl website
Full-service digital agency website built with Astro 5, Tailwind CSS v4, and TypeScript. Includes 10 pages: homepage, diensten (development, hosting, growth), pakketten, over ons, blog met eerste GEO-artikel, en contact. Features: dark theme design system, glassmorphism UI, structured data/schema markup voor SEO en GEO, content collections voor blog, responsive design, sitemap generation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ubuntu
212
src/styles/global.css
Normal file
212
src/styles/global.css
Normal file
@@ -0,0 +1,212 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* ─── SiteLoft Design System ─── */
|
||||
|
||||
@theme {
|
||||
/* Brand Colors */
|
||||
--color-slate-950: #0a0e1a;
|
||||
--color-slate-900: #0f1629;
|
||||
--color-slate-800: #1a2340;
|
||||
--color-slate-700: #253052;
|
||||
--color-slate-600: #384466;
|
||||
--color-slate-500: #5a6a8a;
|
||||
--color-slate-400: #8694b2;
|
||||
--color-slate-300: #b0bdd6;
|
||||
--color-slate-200: #d4dce9;
|
||||
--color-slate-100: #edf1f7;
|
||||
--color-slate-50: #f7f9fc;
|
||||
|
||||
/* Accent: Electric Cyan */
|
||||
--color-accent-50: #ecfeff;
|
||||
--color-accent-100: #cffafe;
|
||||
--color-accent-200: #a5f3fc;
|
||||
--color-accent-300: #67e8f9;
|
||||
--color-accent-400: #22d3ee;
|
||||
--color-accent-500: #06b6d4;
|
||||
--color-accent-600: #0891b2;
|
||||
--color-accent-700: #0e7490;
|
||||
--color-accent-800: #155e75;
|
||||
--color-accent-900: #164e63;
|
||||
|
||||
/* Secondary: Warm Violet */
|
||||
--color-violet-400: #a78bfa;
|
||||
--color-violet-500: #8b5cf6;
|
||||
--color-violet-600: #7c3aed;
|
||||
|
||||
/* Success green */
|
||||
--color-emerald-400: #34d399;
|
||||
--color-emerald-500: #10b981;
|
||||
|
||||
/* Fonts */
|
||||
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
background-color: var(--color-slate-950);
|
||||
color: var(--color-slate-200);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
::selection {
|
||||
background-color: var(--color-accent-500);
|
||||
color: var(--color-slate-950);
|
||||
}
|
||||
|
||||
/* Custom utilities */
|
||||
@utility glass {
|
||||
background: rgba(15, 22, 41, 0.6);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(134, 148, 178, 0.1);
|
||||
}
|
||||
|
||||
@utility glass-light {
|
||||
background: rgba(26, 35, 64, 0.4);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(134, 148, 178, 0.08);
|
||||
}
|
||||
|
||||
@utility text-gradient {
|
||||
background: linear-gradient(135deg, var(--color-accent-400), var(--color-violet-400));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
@utility glow-accent {
|
||||
box-shadow: 0 0 40px rgba(6, 182, 212, 0.15), 0 0 80px rgba(6, 182, 212, 0.05);
|
||||
}
|
||||
|
||||
@utility glow-accent-strong {
|
||||
box-shadow: 0 0 30px rgba(6, 182, 212, 0.25), 0 0 60px rgba(6, 182, 212, 0.1);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% { opacity: 0.4; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
@utility animate-fade-in-up {
|
||||
animation: fade-in-up 0.7s ease-out both;
|
||||
}
|
||||
|
||||
@utility animate-fade-in {
|
||||
animation: fade-in 0.5s ease-out both;
|
||||
}
|
||||
|
||||
@utility animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@utility delay-100 {
|
||||
animation-delay: 100ms;
|
||||
}
|
||||
|
||||
@utility delay-200 {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
|
||||
@utility delay-300 {
|
||||
animation-delay: 300ms;
|
||||
}
|
||||
|
||||
@utility delay-400 {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
|
||||
@utility delay-500 {
|
||||
animation-delay: 500ms;
|
||||
}
|
||||
|
||||
/* Prose styles for blog */
|
||||
.prose {
|
||||
max-width: 72ch;
|
||||
}
|
||||
.prose h1, .prose h2, .prose h3 {
|
||||
color: var(--color-slate-50);
|
||||
font-weight: 700;
|
||||
}
|
||||
.prose h2 {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.prose h3 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.prose p {
|
||||
color: var(--color-slate-300);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.prose a {
|
||||
color: var(--color-accent-400);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
.prose a:hover {
|
||||
color: var(--color-accent-300);
|
||||
}
|
||||
.prose strong {
|
||||
color: var(--color-slate-100);
|
||||
}
|
||||
.prose ul, .prose ol {
|
||||
color: var(--color-slate-300);
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.prose li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.prose code {
|
||||
background: var(--color-slate-800);
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9em;
|
||||
color: var(--color-accent-300);
|
||||
}
|
||||
.prose pre {
|
||||
background: var(--color-slate-900) !important;
|
||||
border: 1px solid rgba(134, 148, 178, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.prose blockquote {
|
||||
border-left: 3px solid var(--color-accent-500);
|
||||
padding-left: 1rem;
|
||||
color: var(--color-slate-400);
|
||||
font-style: italic;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
Reference in New Issue
Block a user