diff --git a/data/themes/default/main.css b/data/themes/default/main.css new file mode 100644 index 0000000..338188b --- /dev/null +++ b/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%; + } +} \ No newline at end of file