muted nm-dmg tier colors, updated navbar/search/menu to follow new "brand", modified auth for features, new homepage
This commit is contained in:
Zach Harding
@@ -32,6 +32,14 @@ $container-max-widths: (
|
||||
:root {
|
||||
--total: 11;
|
||||
--radius: 40px;
|
||||
--purple: hsl(262, 47%, 63%);
|
||||
--purple-dark: hsl(262, 47%, 45%);
|
||||
--purple-light: hsl(262, 80%, 82%);
|
||||
--hero-bg: hsl(258, 30%, 10%);
|
||||
--aqua: hsl(173, 55%, 74%);
|
||||
--honeydew: hsl(149, 64%, 92%);
|
||||
--sand: hsl(45, 41%, 84%);
|
||||
--pink: hsl(354, 65%, 59%);
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -66,10 +74,13 @@ html {
|
||||
/* --------------------------------------------------
|
||||
Layout
|
||||
-------------------------------------------------- */
|
||||
body {
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100dvh !important;
|
||||
}
|
||||
|
||||
.main {
|
||||
@@ -108,13 +119,15 @@ html {
|
||||
Navbar & Icons
|
||||
-------------------------------------------------- */
|
||||
.navbar {
|
||||
background-color: var(--bs-danger) !important;
|
||||
background-color: rgb(126, 87, 194) !important;
|
||||
border-bottom: #1d1f21 solid 1px;
|
||||
z-index: 1030;
|
||||
}
|
||||
|
||||
.sticky-top {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
z-index: 1030;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
@@ -161,6 +174,10 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.cl-modalBackdrop {
|
||||
background-color: rgba(1, 11, 18, 0.8);
|
||||
}
|
||||
|
||||
.image-grow {
|
||||
transition: box-shadow 350ms ease, transform 350ms ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
|
||||
@@ -255,12 +272,12 @@ html {
|
||||
}
|
||||
|
||||
$tiers: (
|
||||
nm: rgba(156, 204, 102, 1),
|
||||
lp: rgba(211, 225, 86, 1),
|
||||
mp: rgba(255, 238, 87, 1),
|
||||
hp: rgba(255, 201, 41, 1),
|
||||
dmg: rgba(255, 167, 36, 1),
|
||||
vendor: hsl(262, 47%, 55%)
|
||||
nm: hsla(88, 50%, 67%, 1),
|
||||
lp: hsla(66, 70%, 68%, 1),
|
||||
mp: hsla(54, 100%, 73%, 1),
|
||||
hp: hsla(46, 100%, 65%, 1),
|
||||
dmg: hsla(36, 100%, 65%, 1),
|
||||
vendor: hsla(262, 47%, 63%, 1)
|
||||
);
|
||||
|
||||
@each $name, $color in $tiers {
|
||||
@@ -275,10 +292,6 @@ $tiers: (
|
||||
&.active {
|
||||
background-color: $color;
|
||||
border-bottom-color: $color;
|
||||
|
||||
@if $name == vendor {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -292,11 +305,11 @@ $tiers: (
|
||||
// Reuses $tiers map so colors stay in sync with nav tabs and price-row
|
||||
|
||||
$cond-text: (
|
||||
nm: rgba(156, 204, 102, 1),
|
||||
lp: rgba(211, 225, 86, 1),
|
||||
mp: rgba(255, 238, 87, 1),
|
||||
hp: rgba(255, 201, 41, 1),
|
||||
dmg: rgba(255, 167, 36, 1),
|
||||
nm: hsla(88, 50%, 67%, 1),
|
||||
lp: hsla(66, 70%, 68%, 1),
|
||||
mp: hsla(54, 100%, 73%, 1),
|
||||
hp: hsla(46, 100%, 65%, 1),
|
||||
dmg: hsla(36, 100%, 65%, 1),
|
||||
);
|
||||
|
||||
@each $name, $color in $tiers {
|
||||
@@ -349,7 +362,7 @@ $cond-text: (
|
||||
|
||||
/* Masked Image */
|
||||
.masked-image {
|
||||
z-index: 1000;
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
filter: brightness(0);
|
||||
}
|
||||
@@ -378,6 +391,28 @@ $cond-text: (
|
||||
}
|
||||
}
|
||||
|
||||
.logo-svg > svg {
|
||||
width: 10rem;
|
||||
transition: width 0.3s ease;
|
||||
animation: logo-shrink linear both;
|
||||
animation-timeline: scroll();
|
||||
animation-range: 0px 100px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 20vw;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-shrink {
|
||||
to {
|
||||
width: 5rem;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 10vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rarity-icon-large svg,
|
||||
.set-icon svg {
|
||||
margin-bottom: -0.25rem;
|
||||
@@ -385,7 +420,7 @@ $cond-text: (
|
||||
|
||||
.filter-icon svg,
|
||||
.search-button {
|
||||
width: 2rem;
|
||||
width: 1.5rem;
|
||||
fill: rgba(255,255,255,0.87);
|
||||
stroke: rgba(255,255,255,0.87);
|
||||
}
|
||||
@@ -413,13 +448,13 @@ $cond-text: (
|
||||
.top-icon svg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
fill: var(--bs-info-bg-subtle);
|
||||
stroke: var(--bs-info-bg-subtle);
|
||||
fill: var(--bs-light-bg-subtle);
|
||||
stroke: var(--bs-light-bg-subtle);
|
||||
}
|
||||
|
||||
#btn-back-to-top:hover .top-icon svg {
|
||||
fill: var(--bs-info-border-subtle);
|
||||
stroke: var(--bs-info-border-subtle);
|
||||
fill: var(--bs-light-border-subtle);
|
||||
stroke: var(--bs-light-border-subtle);
|
||||
}
|
||||
|
||||
.delete-svg {
|
||||
@@ -486,7 +521,7 @@ $cond-text: (
|
||||
}
|
||||
|
||||
.inventory-button, .btn-vendor {
|
||||
background-color: hsl(262, 47%, 55%);
|
||||
background-color: hsl(262, 47%, 63%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -497,7 +532,7 @@ $cond-text: (
|
||||
}
|
||||
|
||||
.inventory-button:hover, .btn-vendor:hover {
|
||||
background-color: hsl(262, 39%, 40%);
|
||||
background-color: hsl(262, 47%, 55%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -510,7 +545,7 @@ $cond-text: (
|
||||
font-size: 0.69rem;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
background-color: hsl(88, 50%, 60%);
|
||||
background-color: hsl(88, 50%, 67%);
|
||||
border-radius: 0.33rem 0 0 0.33rem;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);
|
||||
|
||||
@@ -519,10 +554,10 @@ $cond-text: (
|
||||
@media (min-width: 1200px) { font-size: 0.8rem; }
|
||||
@media (min-width: 1600px) { font-size: 1rem; }
|
||||
|
||||
&:nth-of-type(2) { background-color: hsl(66, 70%, 61%); }
|
||||
&:nth-of-type(3) { background-color: hsl(54, 100%, 67%); }
|
||||
&:nth-of-type(4) { background-color: hsl(45, 100%, 58%); }
|
||||
&:last-of-type { background-color: hsl(36, 100%, 57%); border-radius: 0.33rem; }
|
||||
&:nth-of-type(2) { background-color: hsl(66, 70%, 68%); }
|
||||
&:nth-of-type(3) { background-color: hsl(54, 100%, 73%); }
|
||||
&:nth-of-type(4) { background-color: hsl(46, 100%, 65%); }
|
||||
&:last-of-type { background-color: hsl(36, 100%, 65%); border-radius: 0.33rem; }
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
@@ -532,7 +567,13 @@ $cond-text: (
|
||||
@media (max-width: 768px) {
|
||||
.search-box,
|
||||
.search-button {
|
||||
min-height: 48px;
|
||||
min-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-container {
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -543,13 +584,24 @@ $cond-text: (
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
color: rgba(255,255,255,.94);
|
||||
border: 1px solid rgba(94, 53, 177, 1);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: rgb(179, 157, 219);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.15rem rgb(179, 157, 219, .67);
|
||||
}
|
||||
|
||||
/* Sticky Search Bar */
|
||||
.search-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
z-index: 1000;
|
||||
z-index: 1030;
|
||||
transform: rotate(180deg);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -566,6 +618,50 @@ $cond-text: (
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 0.25rem;
|
||||
width: 100%;
|
||||
animation: search-inline-mobile linear both;
|
||||
animation-timeline: scroll();
|
||||
animation-range: 0px 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes search-inline-mobile {
|
||||
from {
|
||||
width: 100%;
|
||||
}
|
||||
to {
|
||||
margin-top: 0 !important;
|
||||
width: auto;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar .container {
|
||||
@media (max-width: 768px) {
|
||||
animation: navbar-nowrap linear both;
|
||||
animation-timeline: scroll();
|
||||
animation-range: 0px 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-user-btn {
|
||||
animation: hide-user-btn linear both;
|
||||
animation-timeline: scroll();
|
||||
animation-range: 0px 100px;
|
||||
}
|
||||
|
||||
@keyframes hide-user-btn {
|
||||
to {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
Circles
|
||||
-------------------------------------------------- */
|
||||
@@ -725,8 +821,167 @@ $cond-text: (
|
||||
to { opacity: 1; filter: brightness(1) saturate(1); transform: scale(1); }
|
||||
}
|
||||
|
||||
/* ── Utilities ── */
|
||||
$colors: purple-light, "aqua", "honeydew", "cyan", "pink", "sand";
|
||||
|
||||
@each $c in $colors {
|
||||
.text-#{$c} {
|
||||
color: var(--#{$c});
|
||||
}
|
||||
}
|
||||
|
||||
.btn-purple {
|
||||
background-color: var(--purple);
|
||||
border-color: var(--purple-dark);
|
||||
color: #fff;
|
||||
&:hover { background-color: var(--purple-dark); border-color: var(--purple-dark); color: #fff; }
|
||||
}
|
||||
|
||||
.btn-purple-secondary {
|
||||
background-color: transparent;
|
||||
border-color: var(--purple);
|
||||
color: var(--purple-light);
|
||||
&:hover {
|
||||
background-color: hsla(262, 47%, 63%, 0.15);
|
||||
border-color: var(--purple-light);
|
||||
color: var(--purple-light);
|
||||
}
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--purple-light),
|
||||
var(--aqua),
|
||||
var(--honeydew),
|
||||
var(--purple),
|
||||
var(--pink),
|
||||
);
|
||||
background-size: 300% 300%;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
animation: gradientShift 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.py-6 { padding-top: 5rem; padding-bottom: 5rem; }
|
||||
.hover-white:hover { color: #fff !important; }
|
||||
|
||||
/* ── Hero ── */
|
||||
.hero {
|
||||
background-color: var(--hero-bg);
|
||||
}
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 60% 50% at 80% 50%, hsla(262, 70%, 40%, 0.25) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 40% 60% at 20% 80%, hsla(190, 70%, 30%, 0.15) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ── Hero card mockup ── */
|
||||
.hero-cards-mockup {
|
||||
position: relative;
|
||||
height: 340px;
|
||||
}
|
||||
.mockup-card {
|
||||
position: absolute;
|
||||
width: 225px;
|
||||
aspect-ratio: 23 / 32;
|
||||
overflow: hidden; /* clips the img to the card shape */
|
||||
border: 1px solid hsla(262, 50%, 50%, 0.3);
|
||||
}
|
||||
.mockup-card--1 { left: 20%; top: 2.5%; transform: rotate(-8deg); }
|
||||
.mockup-card--2 { left: 40%; top: 7%; transform: rotate(2deg); z-index: 1; }
|
||||
.mockup-card--3 { left: 60%; top: 0; transform: rotate(10deg); }
|
||||
.price-chip {
|
||||
position: absolute;
|
||||
bottom: 2.5%;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.8rem;
|
||||
z-index: 2;
|
||||
}
|
||||
.price-chip--nm { left: 30%; background: hsl(88, 50%, 67%); color: rgba(0,0,0,.87); }
|
||||
.price-chip--lp { left: 64%; background: hsl(66, 70%, 68%); color: rgba(0,0,0,.87); }
|
||||
|
||||
/* ── Stats bar ── */
|
||||
.stats-bar { background-color: hsla(262, 20%, 12%, 0.6); }
|
||||
|
||||
/* ── Feature cards ── */
|
||||
.feature-card {
|
||||
background-color: hsla(262, 20%, 12%, 0.6);
|
||||
border: 1px solid hsla(262, 30%, 40%, 0.2);
|
||||
transition: border-color 0.2s, transform 0.2s;
|
||||
&:hover { border-color: hsla(262, 50%, 60%, 0.5); transform: translateY(-2px); }
|
||||
}
|
||||
.feature-icon {
|
||||
color: var(--purple-light);
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ── Premium section ── */
|
||||
.premium-section {
|
||||
background-color: hsla(258, 30%, 8%, 0.8);
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
.premium-item {
|
||||
background-color: hsla(262, 20%, 14%, 0.8);
|
||||
border: 1px solid hsla(262, 30%, 35%, 0.2);
|
||||
transition: border-color 0.2s;
|
||||
&:hover { border-color: hsla(262, 50%, 60%, 0.4); }
|
||||
}
|
||||
|
||||
.badge-coming {
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
background: hsla(262, 60%, 60%, 0.2);
|
||||
color: var(--purple-light);
|
||||
border: 1px solid hsla(262, 50%, 60%, 0.3);
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
/* ── Compare ── */
|
||||
.compare-icon { font-size: 2.5rem; line-height: 1; }
|
||||
|
||||
/* ── CTA ── */
|
||||
.cta-section {
|
||||
background: linear-gradient(180deg, transparent, hsla(262, 30%, 10%, 0.8));
|
||||
}
|
||||
|
||||
/* ── Logo size override for footer ── */
|
||||
footer .logo-svg > svg { width: var(--logo-width, 8rem); }
|
||||
|
||||
.hero-wrapper {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
Input Fix (Safari)
|
||||
Input Fix (Safari)
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
|
||||
@@ -3,11 +3,11 @@ import Chart from 'chart.js/auto';
|
||||
const CONDITIONS = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
|
||||
|
||||
const CONDITION_COLORS = {
|
||||
"Near Mint": { active: 'rgba(156, 204, 102, 1)', muted: 'rgba(156, 204, 102, 0.67)' },
|
||||
"Lightly Played": { active: 'rgba(211, 225, 86, 1)', muted: 'rgba(211, 225, 86, 0.67)' },
|
||||
"Moderately Played": { active: 'rgba(255, 238, 87, 1)', muted: 'rgba(255, 238, 87, 0.67)' },
|
||||
"Heavily Played": { active: 'rgba(255, 201, 41, 1)', muted: 'rgba(255, 201, 41, 0.67)' },
|
||||
"Damaged": { active: 'rgba(255, 167, 36, 1)', muted: 'rgba(255, 167, 36, 0.67)' },
|
||||
"Near Mint": { active: 'hsla(88, 50%, 67%, 1)', muted: 'hsla(88, 50%, 67%, 0.67)' },
|
||||
"Lightly Played": { active: 'hsla(66, 70%, 68%, 1)', muted: 'hsla(66, 70%, 68%, 0.67)' },
|
||||
"Moderately Played": { active: 'hsla(54, 100%, 73%, 1)', muted: 'hsla(54, 100%, 73%, 0.67)' },
|
||||
"Heavily Played": { active: 'hsla(46, 100%, 65%, 1)', muted: 'hsla(46, 100%, 65%, 0.67)' },
|
||||
"Damaged": { active: 'hsla(36, 100%, 65%, 1)', muted: 'hsla(36, 100%, 65%, 0.67)' },
|
||||
};
|
||||
|
||||
const RANGE_DAYS = { '1m': 30, '3m': 90, '6m': 180, '1y': 365, 'all': Infinity };
|
||||
|
||||
Reference in New Issue
Block a user