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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user