diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index f424f66..a8720fb 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -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; diff --git a/src/assets/js/priceChart.js b/src/assets/js/priceChart.js index 0f6d538..7f3ec31 100644 --- a/src/assets/js/priceChart.js +++ b/src/assets/js/priceChart.js @@ -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 }; diff --git a/src/components/BackToTop.astro b/src/components/BackToTop.astro index 934dfd2..76ed1ce 100644 --- a/src/components/BackToTop.astro +++ b/src/components/BackToTop.astro @@ -3,7 +3,7 @@ --- + \ No newline at end of file diff --git a/src/components/Search.astro b/src/components/Search.astro index 457e8dd..7619a05 100644 --- a/src/components/Search.astro +++ b/src/components/Search.astro @@ -8,7 +8,6 @@ import { Show } from '@clerk/astro/components' const val = Number(start.value) || 0; start.value = (val + 20).toString(); } - // delete the triggering element if (e && e.detail && e.detail.elt) { e.detail.elt.remove(); } @@ -26,21 +25,47 @@ import { Show } from '@clerk/astro/components' - \ No newline at end of file + + \ No newline at end of file diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro index 6e24c4f..04702fe 100644 --- a/src/layouts/Main.astro +++ b/src/layouts/Main.astro @@ -1,5 +1,8 @@ --- import '/src/assets/css/main.scss'; +import NavBar from '../components/NavBar.astro'; +import NavItems from '../components/NavItems.astro'; +import Search from '../components/Search.astro'; const { title } = Astro.props; --- @@ -25,18 +28,18 @@ const { title } = Astro.props; - + + + +
-
-
- diff --git a/src/pages/404.astro b/src/pages/404.astro index 0fefd4c..a059fcc 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -1,7 +1,7 @@ --- export const prerender = false; import Layout from '../layouts/Main.astro'; -import NavItems from '../components/NavItems.astro'; +import Search from '../components/Search.astro'; import NavBar from '../components/NavBar.astro'; import Footer from '../components/Footer.astro'; import pokedexList from '../data/pokedex.json'; @@ -19,12 +19,10 @@ const pokemon = pokedexList.find(p => p["#"] === randomNumber); const pokemonName = pokemon?.Name || "Unknown Pokémon"; --- - - - -
+
+
-

404
Page Not Found

+

404 - Page Not Found

Sorry, the page you are looking for does not exist.

Return to the home page or search for another Pokémon. @@ -67,7 +65,7 @@ const pokemonName = pokemon?.Name || "Unknown Pokémon"; >???

+