Removed vulnerabilities
This commit is contained in:
@@ -1,225 +1,199 @@
|
||||
.sticky-top {
|
||||
position: -webkit-sticky !important;
|
||||
position: sticky !important;
|
||||
top: 0 !important;
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
/* MainLayout.razor.css */
|
||||
|
||||
.cart-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.water-background {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
z-index: 1040;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.cart-overlay.is-visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.cart-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -420px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
height: 100vh;
|
||||
z-index: 1050;
|
||||
pointer-events: none;
|
||||
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.cart-drawer.is-open {
|
||||
transform: translateX(-420px);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.cart-badge {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
background-color: #1A1A1A;
|
||||
color: #FFF;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 700;
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.xx-small {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.border-bottom-dashed {
|
||||
border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.quantity-picker {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.quantity-picker button {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.quantity-picker button:hover {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.custom-site-footer {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background-color: #1A1A1A !important;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||
padding: 3rem 0 2rem 0;
|
||||
background-color: #1e2d4a; /* Base slate */
|
||||
}
|
||||
|
||||
.footer-content-section {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.footer-brand-title {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.footer-desc {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.6;
|
||||
max-width: 360px;
|
||||
color: #A0AEC0 !important;
|
||||
}
|
||||
|
||||
.footer-contact-link {
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
color: #A0AEC0 !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-contact-link:hover {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.footer-section-heading {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.2px;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.footer-nav-link {
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
color: #A0AEC0 !important;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-nav-link:hover {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.footer-meta-item {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.footer-copyright-section {
|
||||
color: #718096 !important;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.btn-back-to-top {
|
||||
/* Base class for all floating organic shapes */
|
||||
.blotch {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
width: 42px !important;
|
||||
min-width: 42px !important;
|
||||
max-width: 42px !important;
|
||||
height: 42px !important;
|
||||
border-radius: 50% !important;
|
||||
background-color: #1A1A1A;
|
||||
color: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* 1. Main Light Blotch - Now anchored Top-Left */
|
||||
.blotch-light-main {
|
||||
width: 60vw;
|
||||
height: 60vh;
|
||||
background: #8892b0;
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
/* Sped up by ~0.9% from 25s to 24.7s */
|
||||
animation: driftLight 24.7s infinite ease-in-out alternate;
|
||||
}
|
||||
|
||||
/* 2. Main Dark Blotch - Now anchored Bottom-Right */
|
||||
.blotch-dark-main {
|
||||
width: 70vw;
|
||||
height: 70vh;
|
||||
background: #0a192f;
|
||||
bottom: -10%;
|
||||
right: -10%;
|
||||
/* Sped up by ~0.9% from 20s to 19.8s */
|
||||
animation: driftDark 19.8s infinite ease-in-out alternate;
|
||||
}
|
||||
|
||||
/* 3. New Accent Blotch - Mid-size, mid-navy */
|
||||
.blotch-accent-1 {
|
||||
width: 40vw;
|
||||
height: 40vh;
|
||||
background: #172a45;
|
||||
top: 30%;
|
||||
right: 20%;
|
||||
animation: driftAccentOne 22s infinite ease-in-out alternate;
|
||||
}
|
||||
|
||||
/* 4. New Accent Blotch - Smaller, lighter shade for depth */
|
||||
.blotch-accent-2 {
|
||||
width: 30vw;
|
||||
height: 35vh;
|
||||
background: #2c3e50;
|
||||
bottom: 20%;
|
||||
left: 20%;
|
||||
animation: driftAccentTwo 28s infinite ease-in-out alternate;
|
||||
}
|
||||
|
||||
/* Denser Pixel Packing (SVG Noise) */
|
||||
.noise-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1; /* Sits above the blotches, below the glass */
|
||||
opacity: 0.06; /* Keep this low; just enough to texture the gradient */
|
||||
/* An inline SVG generating fractal noise */
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||||
pointer-events: none; /* Ensures clicks pass through to the UI */
|
||||
}
|
||||
|
||||
/* The Glass Layer */
|
||||
.glass-panel {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
box-shadow: inset 0 0 80px rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
z-index: 3;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* --- Animations --- */
|
||||
@keyframes driftLight {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(10%, 15%) scale(1.15);
|
||||
}
|
||||
/* Pushes down and right */
|
||||
}
|
||||
|
||||
@keyframes driftDark {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-15%, -10%) scale(1.1);
|
||||
}
|
||||
/* Pushes up and left */
|
||||
}
|
||||
|
||||
@keyframes driftAccentOne {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(0.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-20%, 20%) scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes driftAccentTwo {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(25%, -15%) scale(0.85);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Floating Top Bar --- */
|
||||
.top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
padding: 0 2rem;
|
||||
/* The Floating Magic */
|
||||
margin: 1rem 1rem 0 1rem; /* 1.5rem top gap, 2rem left/right gap, 0 bottom gap */
|
||||
border-radius: 10px; /* Smooth, rounded corners for the island effect */
|
||||
/* The Glass Effect */
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
|
||||
/* A subtle frosted edge all the way around to define the shape */
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
color: #f8f9fa;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* --- Top Navigation Icons --- */
|
||||
.top-nav-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem; /* Even spacing between icons */
|
||||
margin-left: auto; /* Pushes the nav block to the right */
|
||||
}
|
||||
|
||||
/* The transparent button wrappers */
|
||||
.icon-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
/* Set the icon color to a slightly muted off-white */
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1010;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, background-color 0.2s ease;
|
||||
border-radius: 8px; /* For a subtle hover background if needed later */
|
||||
/* Smooth out the hover animations */
|
||||
transition: color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-back-to-top:hover {
|
||||
background-color: #333333;
|
||||
/* Hover interactions */
|
||||
.icon-btn:hover {
|
||||
/* Brightens to pure white and floats up slightly when moused over */
|
||||
color: #ffffff;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-back-to-top:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.no-caret::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.brand-dropdown-pane {
|
||||
border-radius: 0px !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15) !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
|
||||
min-width: 190px;
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
.brand-dropdown-pane .dropdown-item {
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.02em;
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.brand-dropdown-pane .dropdown-item:hover {
|
||||
background-color: #1A1A1A !important;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.brand-dropdown-pane .dropdown-item.text-danger:hover {
|
||||
background-color: #DC3545 !important;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.dropdown-header-identity {
|
||||
user-select: none;
|
||||
}
|
||||
/* Ensure the SVG scales neatly */
|
||||
.icon-btn svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
/* This ensures the stroke/fill matches the .icon-btn color */
|
||||
stroke: currentColor;
|
||||
}
|
||||
Reference in New Issue
Block a user