data/themes/default/main.css hinzugefügt

data/themes/default/main.css

@@ -0,0 +1,596 @@
+/* ==========================================================
+   MODERN CYBERPUNK / GLASS STYLE
+   Inspired by modern tech websites
+   ========================================================== */
+
+:root{
+
+    --bg:#050608;
+    --bg2:#0d1018;
+    --surface:rgba(255,255,255,.04);
+
+    --primary:#7C4DFF;
+    --secondary:#00D5FF;
+    --accent:#A855F7;
+
+    --text:#ffffff;
+    --text-light:#b8bcc9;
+
+    --border:rgba(255,255,255,.08);
+
+    --radius:18px;
+
+    --shadow:
+        0 10px 40px rgba(0,0,0,.35);
+
+    --glow:
+        0 0 20px rgba(124,77,255,.35),
+        0 0 60px rgba(0,213,255,.15);
+
+    --transition:.35s ease;
+}
+
+/* ==========================================================
+   RESET
+   ========================================================== */
+
+*{
+    margin:0;
+    padding:0;
+    box-sizing:border-box;
+}
+
+html{
+    scroll-behavior:smooth;
+}
+
+body{
+
+    font-family:
+    Inter,
+    Segoe UI,
+    sans-serif;
+
+    color:var(--text);
+
+    background:
+    radial-gradient(circle at top right,#1f1245 0%,transparent 35%),
+    radial-gradient(circle at bottom left,#003f56 0%,transparent 30%),
+    linear-gradient(180deg,#050608,#090b12,#050608);
+
+    min-height:100vh;
+
+    overflow-x:hidden;
+}
+
+/* ==========================================================
+   BACKGROUND EFFECT
+   ========================================================== */
+
+body::before{
+
+    content:"";
+
+    position:fixed;
+
+    inset:0;
+
+    background-image:
+
+    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
+    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
+
+    background-size:60px 60px;
+
+    opacity:.15;
+
+    pointer-events:none;
+}
+
+/* ==========================================================
+   TYPOGRAPHY
+   ========================================================== */
+
+h1,h2,h3{
+
+    font-weight:800;
+
+    letter-spacing:-1px;
+}
+
+h1{
+
+    font-size:clamp(3rem,8vw,6rem);
+
+    line-height:1;
+
+    margin-bottom:25px;
+}
+
+h2{
+
+    font-size:clamp(2rem,5vw,3rem);
+
+    margin-bottom:25px;
+}
+
+h3{
+
+    font-size:1.4rem;
+
+    margin-bottom:15px;
+}
+
+p{
+
+    color:var(--text-light);
+
+    line-height:1.8;
+}
+
+/* ==========================================================
+   LAYOUT
+   ========================================================== */
+
+.container{
+
+    width:min(1300px,92%);
+
+    margin:auto;
+}
+
+section{
+
+    padding:120px 0;
+}
+
+/* ==========================================================
+   NAVBAR
+   ========================================================== */
+
+nav{
+
+    position:fixed;
+
+    top:0;
+
+    width:100%;
+
+    z-index:999;
+
+    backdrop-filter:blur(20px);
+
+    background:rgba(5,6,8,.65);
+
+    border-bottom:1px solid var(--border);
+}
+
+nav .container{
+
+    height:80px;
+
+    display:flex;
+
+    justify-content:space-between;
+
+    align-items:center;
+}
+
+nav ul{
+
+    display:flex;
+
+    gap:35px;
+
+    list-style:none;
+}
+
+nav a{
+
+    color:white;
+
+    text-decoration:none;
+
+    transition:var(--transition);
+
+    font-weight:500;
+}
+
+nav a:hover{
+
+    color:var(--secondary);
+}
+
+/* ==========================================================
+   HERO
+   ========================================================== */
+
+.hero{
+
+    min-height:100vh;
+
+    display:flex;
+
+    align-items:center;
+
+    position:relative;
+
+    overflow:hidden;
+}
+
+.hero::before{
+
+    content:"";
+
+    position:absolute;
+
+    width:700px;
+
+    height:700px;
+
+    border-radius:50%;
+
+    background:var(--primary);
+
+    filter:blur(180px);
+
+    opacity:.18;
+
+    right:-250px;
+
+    top:-250px;
+}
+
+.hero::after{
+
+    content:"";
+
+    position:absolute;
+
+    width:450px;
+
+    height:450px;
+
+    background:var(--secondary);
+
+    border-radius:50%;
+
+    filter:blur(170px);
+
+    left:-150px;
+
+    bottom:-150px;
+
+    opacity:.12;
+}
+
+.hero-content{
+
+    position:relative;
+
+    z-index:2;
+
+    max-width:720px;
+}
+
+/* ==========================================================
+   BUTTONS
+   ========================================================== */
+
+.btn{
+
+    display:inline-flex;
+
+    align-items:center;
+
+    justify-content:center;
+
+    padding:16px 34px;
+
+    border-radius:999px;
+
+    text-decoration:none;
+
+    color:white;
+
+    font-weight:600;
+
+    background:
+    linear-gradient(
+    90deg,
+    var(--primary),
+    var(--secondary));
+
+    box-shadow:var(--shadow);
+
+    transition:var(--transition);
+}
+
+.btn:hover{
+
+    transform:translateY(-4px);
+
+    box-shadow:var(--glow);
+}
+
+.btn-outline{
+
+    background:transparent;
+
+    border:1px solid var(--border);
+}
+
+.btn-outline:hover{
+
+    border-color:var(--secondary);
+}
+
+/* ==========================================================
+   GRID
+   ========================================================== */
+
+.grid{
+
+    display:grid;
+
+    gap:35px;
+
+    grid-template-columns:
+    repeat(auto-fit,minmax(320px,1fr));
+}
+
+/* ==========================================================
+   CARDS
+   ========================================================== */
+
+.card{
+
+    background:var(--surface);
+
+    backdrop-filter:blur(18px);
+
+    border:1px solid var(--border);
+
+    border-radius:var(--radius);
+
+    padding:35px;
+
+    transition:var(--transition);
+
+    position:relative;
+
+    overflow:hidden;
+}
+
+.card::before{
+
+    content:"";
+
+    position:absolute;
+
+    inset:-2px;
+
+    background:
+    linear-gradient(135deg,
+    transparent,
+    rgba(255,255,255,.05),
+    transparent);
+
+    opacity:0;
+
+    transition:.5s;
+}
+
+.card:hover{
+
+    transform:translateY(-8px);
+
+    box-shadow:var(--glow);
+}
+
+.card:hover::before{
+
+    opacity:1;
+}
+
+/* ==========================================================
+   IMAGES
+   ========================================================== */
+
+img{
+
+    max-width:100%;
+
+    border-radius:16px;
+}
+
+/* ==========================================================
+   INPUTS
+   ========================================================== */
+
+input,
+textarea{
+
+    width:100%;
+
+    padding:16px;
+
+    border-radius:14px;
+
+    border:1px solid var(--border);
+
+    background:rgba(255,255,255,.03);
+
+    color:white;
+
+    outline:none;
+
+    transition:.3s;
+}
+
+input:focus,
+textarea:focus{
+
+    border-color:var(--secondary);
+
+    box-shadow:0 0 15px rgba(0,213,255,.3);
+}
+
+/* ==========================================================
+   TABLES
+   ========================================================== */
+
+table{
+
+    width:100%;
+
+    border-collapse:collapse;
+}
+
+th,
+td{
+
+    padding:16px;
+
+    border-bottom:1px solid var(--border);
+}
+
+/* ==========================================================
+   FOOTER
+   ========================================================== */
+
+footer{
+
+    border-top:1px solid var(--border);
+
+    padding:70px 0;
+
+    text-align:center;
+
+    color:#9da2b4;
+}
+
+/* ==========================================================
+   SCROLLBAR
+   ========================================================== */
+
+::-webkit-scrollbar{
+
+    width:10px;
+}
+
+::-webkit-scrollbar-thumb{
+
+    background:linear-gradient(
+    var(--primary),
+    var(--secondary));
+
+    border-radius:20px;
+}
+
+::-webkit-scrollbar-track{
+
+    background:#050608;
+}
+
+/* ==========================================================
+   ANIMATIONS
+   ========================================================== */
+
+@keyframes float{
+
+    0%{
+
+        transform:translateY(0px);
+    }
+
+    50%{
+
+        transform:translateY(-12px);
+    }
+
+    100%{
+
+        transform:translateY(0px);
+    }
+}
+
+@keyframes fadeIn{
+
+    from{
+
+        opacity:0;
+
+        transform:translateY(30px);
+    }
+
+    to{
+
+        opacity:1;
+
+        transform:translateY(0);
+    }
+}
+
+.float{
+
+    animation:float 6s ease-in-out infinite;
+}
+
+.fade{
+
+    animation:fadeIn .8s ease both;
+}
+
+/* ==========================================================
+   RESPONSIVE
+   ========================================================== */
+
+@media (max-width:992px){
+
+    section{
+
+        padding:90px 0;
+    }
+
+    nav ul{
+
+        gap:20px;
+    }
+}
+
+@media (max-width:768px){
+
+    nav .container{
+
+        height:70px;
+    }
+
+    h1{
+
+        font-size:3rem;
+    }
+
+    .grid{
+
+        grid-template-columns:1fr;
+    }
+
+    .hero{
+
+        text-align:center;
+    }
+}
+
+@media (max-width:480px){
+
+    h1{
+
+        font-size:2.4rem;
+    }
+
+    .btn{
+
+        width:100%;
+    }
+}