enhance headers styles & update colors palette
This commit is contained in:
Mohammed Al-yaseen
@@ -5,37 +5,97 @@
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
|
||||
padding: 15px 0;
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(116, 0, 184, 0.1);
|
||||
padding: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.headerContainer {
|
||||
max-width: 1200px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
padding: 0 32px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
/* Logo Section */
|
||||
.logoSection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logoLink {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logoContainer {
|
||||
/* background: var(--primary) !important; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.logoIcon {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 8px;
|
||||
background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(116, 0, 184, 0.3);
|
||||
}
|
||||
|
||||
.logoDot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.logoDot:nth-child(2) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.logoDot:nth-child(3) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.logoText {
|
||||
color: #6e48aa !important;
|
||||
background: linear-gradient(135deg, #7400b8 0%, #5e60ce 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin: 0 !important;
|
||||
font-weight: 700 !important;
|
||||
font-size: 1.5rem !important;
|
||||
font-weight: 800 !important;
|
||||
font-size: 1.6rem !important;
|
||||
letter-spacing: -0.5px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.logoHighlight {
|
||||
margin-left: 8px;
|
||||
.logoText:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* Navigation Section */
|
||||
.navSection {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navContainer {
|
||||
@@ -46,31 +106,229 @@
|
||||
.menu {
|
||||
border-bottom: none !important;
|
||||
background: transparent !important;
|
||||
font-weight: 500;
|
||||
font-weight: 500 !important;
|
||||
font-size: 0.95rem !important;
|
||||
}
|
||||
|
||||
.menu li {
|
||||
padding: 0 15px !important;
|
||||
.menu :global(.ant-menu-item) {
|
||||
padding: 12px 20px !important;
|
||||
margin: 0 4px !important;
|
||||
border-radius: 12px !important;
|
||||
transition: all 0.3s ease !important;
|
||||
color: #666 !important;
|
||||
font-weight: 500 !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ctaContainer {
|
||||
margin-left: 30px;
|
||||
.menu :global(.ant-menu-item::before) {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* .menu :global(.ant-menu-item:hover) {
|
||||
color: #7400b8 !important;
|
||||
transform: translateY(-2px) !important;
|
||||
box-shadow: 0 8px 25px rgba(116, 0, 184, 0.15) !important;
|
||||
} */
|
||||
|
||||
.menu :global(.ant-menu-item:hover::before) {
|
||||
/* opacity: 0.1; */
|
||||
}
|
||||
|
||||
.menu :global(.ant-menu-item-selected) {
|
||||
color: #7400b8 !important;
|
||||
/* background: rgba(116, 0, 184, 0.1) !important; */
|
||||
font-weight: 600 !important;
|
||||
/* box-shadow: 0 4px 15px rgba(116, 0, 184, 0.2) !important; */
|
||||
}
|
||||
|
||||
.menu :global(.ant-menu-item::after) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Actions Section */
|
||||
.actionsSection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.actionButtons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.actionButton {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px !important;
|
||||
border: 1px solid rgba(116, 0, 184, 0.1) !important;
|
||||
background: rgba(255, 255, 255, 0.8) !important;
|
||||
color: #666 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.actionButton:hover {
|
||||
background: rgba(116, 0, 184, 0.1) !important;
|
||||
color: #7400b8 !important;
|
||||
transform: translateY(-2px) !important;
|
||||
box-shadow: 0 8px 20px rgba(116, 0, 184, 0.2) !important;
|
||||
border-color: rgba(116, 0, 184, 0.2) !important;
|
||||
}
|
||||
|
||||
.ctaButton {
|
||||
/* background: var(--primary) !important; */
|
||||
background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%) !important;
|
||||
border: none !important;
|
||||
font-weight: 500 !important;
|
||||
padding: 0 25px !important;
|
||||
font-weight: 600 !important;
|
||||
padding: 0 24px !important;
|
||||
height: 40px !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 4px 15px rgba(116, 0, 184, 0.3) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
font-size: 0.9rem !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.ctaButton:hover {
|
||||
transform: translateY(-2px) !important;
|
||||
box-shadow: 0 8px 25px rgba(116, 0, 184, 0.4) !important;
|
||||
/* background: linear-gradient(135deg, #6930c3 0%, #5e60ce 100%) !important; */
|
||||
}
|
||||
|
||||
.ctaButton:active {
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
|
||||
.userAvatar {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
border-radius: 12px !important;
|
||||
background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%) !important;
|
||||
border: 2px solid rgba(255, 255, 255, 0.8) !important;
|
||||
box-shadow: 0 4px 12px rgba(116, 0, 184, 0.3) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.userAvatar:hover {
|
||||
transform: scale(1.05) !important;
|
||||
box-shadow: 0 8px 20px rgba(116, 0, 184, 0.4) !important;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1200px) {
|
||||
.headerContainer {
|
||||
padding: 0 24px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.menu :global(.ant-menu-item) {
|
||||
padding: 10px 16px !important;
|
||||
}
|
||||
|
||||
.actionButtons {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.navContainer {
|
||||
.headerContainer {
|
||||
grid-template-columns: auto auto;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.navSection {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.headerContainer {
|
||||
justify-content: center;
|
||||
|
||||
.actionsSection {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.logoText {
|
||||
font-size: 1.4rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.headerContainer {
|
||||
padding: 0 16px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.logoText {
|
||||
font-size: 1.3rem !important;
|
||||
}
|
||||
|
||||
.actionButtons {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.actionButton {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.ctaButton {
|
||||
padding: 0 20px !important;
|
||||
height: 36px !important;
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
|
||||
.userAvatar {
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.headerContainer {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.logoText {
|
||||
font-size: 1.2rem !important;
|
||||
}
|
||||
|
||||
.logoIcon {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.logoDot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.actionButton {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.ctaButton {
|
||||
padding: 0 16px !important;
|
||||
height: 32px !important;
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
|
||||
.userAvatar {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { Menu, MenuProps, Typography } from "antd";
|
||||
import { BellOutlined, SearchOutlined, UserOutlined } from "@ant-design/icons";
|
||||
import { Avatar, Button, Menu, MenuProps, Typography } from "antd";
|
||||
import { motion } from "framer-motion";
|
||||
import Link from "next/link";
|
||||
import styles from "./Header.module.css";
|
||||
@@ -34,37 +35,74 @@ const Header = () => {
|
||||
return (
|
||||
<header className={styles.header}>
|
||||
<div className={styles.headerContainer}>
|
||||
{/* Logo Section */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className={styles.logoContainer}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className={styles.logoSection}
|
||||
>
|
||||
<Link href="/">
|
||||
<Title level={3} className={styles.logoText}>
|
||||
Tech Master
|
||||
</Title>
|
||||
<Link href="/" className={styles.logoLink}>
|
||||
<div className={styles.logoContainer}>
|
||||
<div className={styles.logoIcon}>
|
||||
<div className={styles.logoDot}></div>
|
||||
<div className={styles.logoDot}></div>
|
||||
<div className={styles.logoDot}></div>
|
||||
</div>
|
||||
<Title level={3} className={styles.logoText}>
|
||||
TechMaster
|
||||
</Title>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<nav className={styles.navContainer}>
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
items={items}
|
||||
className={styles.menu}
|
||||
/>
|
||||
|
||||
{/* <Space className={styles.ctaContainer}>
|
||||
{/* Navigation Section */}
|
||||
<nav className={styles.navSection}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className={styles.navContainer}
|
||||
>
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
items={items}
|
||||
className={styles.menu}
|
||||
selectedKeys={['home']}
|
||||
/>
|
||||
</motion.div>
|
||||
</nav>
|
||||
|
||||
{/* Actions Section */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className={styles.actionsSection}
|
||||
>
|
||||
<div className={styles.actionButtons}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<SearchOutlined />}
|
||||
className={styles.actionButton}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<BellOutlined />}
|
||||
className={styles.actionButton}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
shape="round"
|
||||
size="large"
|
||||
className={styles.ctaButton}
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
</Space> */}
|
||||
</nav>
|
||||
<Avatar
|
||||
icon={<UserOutlined />}
|
||||
className={styles.userAvatar}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
@@ -1,35 +1,21 @@
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--primary: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%);
|
||||
--secondary: linear-gradient(135deg, #00c1d4 0%, #ff5f6d 100%);
|
||||
--primary-glow: radial-gradient(
|
||||
circle,
|
||||
rgba(152, 71, 232, 0.2) 0%,
|
||||
rgba(71, 1, 90, 0.1) 50%,
|
||||
rgba(0, 0, 0, 0) 70%
|
||||
);
|
||||
}
|
||||
/* Color Palette */
|
||||
--french-violet: #7400b8;
|
||||
--grape: #6930c3;
|
||||
--slate-blue: #5e60ce;
|
||||
--sky-blue: #56cfe1;
|
||||
--aquamarine: #80ffdb;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
/* Gradients */
|
||||
--primary-gradient: linear-gradient(135deg, #7400b8 0%, #6930c3 100%);
|
||||
--secondary-gradient: linear-gradient(135deg, #6930c3 0%, #5e60ce 100%);
|
||||
--accent-gradient: linear-gradient(135deg, #56cfe1 0%, #80ffdb 100%);
|
||||
--text-gradient: linear-gradient(135deg, #7400b8 0%, #5e60ce 100%);
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* Shadows */
|
||||
--primary-shadow: 0 4px 12px rgba(116, 0, 184, 0.15);
|
||||
--primary-shadow-hover: 0 8px 25px rgba(116, 0, 184, 0.25);
|
||||
--secondary-shadow: 0 2px 8px rgba(94, 96, 206, 0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -38,56 +24,343 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-gradient);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--secondary-gradient);
|
||||
}
|
||||
|
||||
/* Selection styles */
|
||||
::selection {
|
||||
background: rgba(116, 0, 184, 0.2);
|
||||
color: #7400b8;
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
*:focus {
|
||||
outline: 2px solid #7400b8;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Button hover effects */
|
||||
.btn-primary {
|
||||
background: var(--primary-gradient);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: var(--primary-shadow);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--primary-shadow-hover);
|
||||
}
|
||||
|
||||
/* Text gradients */
|
||||
.text-gradient {
|
||||
background: var(--text-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Card styles */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(116, 0, 184, 0.1);
|
||||
}
|
||||
|
||||
/* Animation classes */
|
||||
.fade-in {
|
||||
animation: fadeIn 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
animation: slideUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
vertical-align: bottom;
|
||||
} /* ---- particles.js container ---- */
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
.gradient-bg {
|
||||
background: var(--primary-gradient);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: var(--text-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.shadow-primary {
|
||||
box-shadow: var(--primary-shadow);
|
||||
}
|
||||
|
||||
.shadow-primary-hover:hover {
|
||||
box-shadow: var(--primary-shadow-hover);
|
||||
}
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
/* Color Palette */
|
||||
--french-violet: #7400b8;
|
||||
--grape: #6930c3;
|
||||
--slate-blue: #5e60ce;
|
||||
--sky-blue: #56cfe1;
|
||||
--aquamarine: #80ffdb;
|
||||
|
||||
/* Gradients */
|
||||
--primary-gradient: linear-gradient(135deg, #7400b8 0%, #6930c3 100%);
|
||||
--secondary-gradient: linear-gradient(135deg, #6930c3 0%, #5e60ce 100%);
|
||||
--accent-gradient: linear-gradient(135deg, #56cfe1 0%, #80ffdb 100%);
|
||||
--text-gradient: linear-gradient(135deg, #7400b8 0%, #5e60ce 100%);
|
||||
|
||||
/* Shadows */
|
||||
--primary-shadow: 0 4px 12px rgba(116, 0, 184, 0.15);
|
||||
--primary-shadow-hover: 0 8px 25px rgba(116, 0, 184, 0.25);
|
||||
--secondary-shadow: 0 2px 8px rgba(94, 96, 206, 0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-gradient);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--secondary-gradient);
|
||||
}
|
||||
|
||||
/* Particles.js Styles */
|
||||
#particles-js {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%);
|
||||
z-index: 1;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.count-particles {
|
||||
background: #000022;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 80px;
|
||||
color: #13e8e9;
|
||||
font-size: 0.8em;
|
||||
text-align: left;
|
||||
text-indent: 4px;
|
||||
line-height: 14px;
|
||||
padding-bottom: 2px;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
.js-count-particles {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
#stats,
|
||||
.count-particles {
|
||||
-webkit-user-select: none;
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
#stats {
|
||||
border-radius: 3px 3px 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.count-particles {
|
||||
border-radius: 0 0 3px 3px;
|
||||
|
||||
/* Selection styles */
|
||||
::selection {
|
||||
background: rgba(116, 0, 184, 0.2);
|
||||
color: #7400b8;
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
*:focus {
|
||||
outline: 2px solid #7400b8;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Button hover effects */
|
||||
.btn-primary {
|
||||
background: var(--primary-gradient);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: var(--primary-shadow);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--primary-shadow-hover);
|
||||
}
|
||||
|
||||
/* Text gradients */
|
||||
.text-gradient {
|
||||
background: var(--text-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Card styles */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(116, 0, 184, 0.1);
|
||||
}
|
||||
|
||||
/* Animation classes */
|
||||
.fade-in {
|
||||
animation: fadeIn 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
animation: slideUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
.gradient-bg {
|
||||
background: var(--primary-gradient);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: var(--text-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.shadow-primary {
|
||||
box-shadow: var(--primary-shadow);
|
||||
}
|
||||
|
||||
.shadow-primary-hover:hover {
|
||||
box-shadow: var(--primary-shadow-hover);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user