pokemon/src/assets/css/main.scss

@import "_bootstrap";

/* --------------------------------------------------
   Root Variables
-------------------------------------------------- */
:root {
  --total: 11;     /* Number of items in the energy wheel */
  --radius: 40px;  /* Circle radius */
}

html {
  scroll-behavior: smooth;
}

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  xxxl: 1920px
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
  xxxl: 1840px
) !default;

/* --------------------------------------------------
   Layout
-------------------------------------------------- */
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh !important;
}

.main {
  flex: 1;
}

.footer {
  margin-top: auto;
}

/* --------------------------------------------------
   Energy Wheel
-------------------------------------------------- */
.energy-wheel {
  position: relative;
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  margin: 5px 0 10px;
}

.energy-wheel-item {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 50%;
  left: 50%;
  --angle: calc(360deg / var(--total) * var(--i));

  transform:
    rotate(var(--angle))
    translateX(var(--radius))
    rotate(calc(-1 * var(--angle)));
}

.energy-wheel-item:first-of-type {
  z-index: 100;
}

/* --------------------------------------------------
   Navbar & Icons
-------------------------------------------------- */
.navbar {
  background-color: var(--bs-danger) !important;
}

.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-icon {
  width: 1.85rem;
  height: 1.85rem;

  > svg {
    fill: hsla(210, 11%, 15%, 0.5);
    stroke: hsla(210, 11%, 15%, 0.5);

    &:hover {
      fill: hsla(210, 11%, 15%, 1);
    }
  }
}

/* --------------------------------------------------
   Typography
-------------------------------------------------- */
.copy-small {
  font-size: 0.75rem;
  opacity: 0.87;

  @media (min-width: 768px) {
    font-size: 0.85rem;
  }
  @media (min-width: 1400px) {
    font-size: 1rem;
  }
}

/* --------------------------------------------------
   Modal & Cards
-------------------------------------------------- */
.modal-xl {
  @media (min-width: 768px) {
    max-width: 95vw;
  }
  @media (min-width: 1400px) {
    max-width: 85vw;
  }
  @media (min-width: 1921px) {
    max-width: 75vw;
  }
}

.image-grow {
  transition: box-shadow 350ms ease, transform 350ms ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);

  &:is(:hover, :focus) {
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-0.9rem) scale(1.02);
  }
}

.card-modal {
  background-color: rgba(1, 11, 18, 0.8);
  cursor: default;
}

.pokedex-page {
  position: relative;
  top: 50px;
  z-index: 99;

  @media (min-width: 768px) {
    top: 100px !important;
  }
}

/* --------------------------------------------------
   Navigation Tabs
-------------------------------------------------- */
.nav-link {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.67);
  transition:
    margin-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
    padding-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
    padding-bottom 0.2s cubic-bezier(0.5, 0, 0.3, 1);

  &:hover,
  &:focus {
    color: rgba(0, 0, 0, 0.87);
  }
}

.nav-tabs {
  .nav-link.active,
  .nav-item.show .nav-link {
    color: rgba(0, 0, 0, 0.94);
  }

  .nav-link:hover,
  .nav-link:focus {
    border-color: transparent;
  }
}

/* Tiered Colors */
$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%)
);

@each $name, $color in $tiers {
  .nav-link.#{$name} {
    border-bottom: 3px solid $color;

    &:hover,
    &:focus {
      background-color: rgba($color, 0.67);
    }

    &.active {
      background-color: $color;
      border-bottom-color: $color;

      @if $name == vendor {
        color: rgba(255, 255, 255, 0.87);
      }
    }
  }
}

/* --------------------------------------------------
   Misc UI Elements
-------------------------------------------------- */
.dark-callout {
  @media (min-width: 768px) {
    background-color: rgba(44, 48, 59, 1);
  }
}

.price-area {
  max-height: 75px;
}

.card-image {
  aspect-ratio: 23 / 32;
  object-fit: cover;
  z-index: 998;
  cursor: pointer;
}

/* Icon sizing */
.small-icon svg {
  width: 100%;
  max-height: 16px;
  margin-top: -0.25rem;
}

/* Black silhouette overlay */
.masked-image {
  z-index: 1000;
  opacity: 1;
  filter: brightness(0);
}

/* Decorative background elements */
.starburst,
.whos-that-pokemon {
  mix-blend-mode: lighten;
  opacity: 0.1;
  object-fit: cover;
}

.whos-that-pokemon {
  aspect-ratio: 1 / 1;
}

/* SVG sizes */
.energy-icon svg,
.rarity-icon-large svg,
.set-icon svg {
  width: 2.5rem;
  z-index: 999;
}

.rarity-icon-large svg,
.set-icon svg {
  margin-bottom: -0.25rem;
}

.filter-icon svg {
  width: 2rem;
  fill: rgba(255,255,255,0.87);
  stroke: rgba(255,255,255,0.87);
}

.form-check-input:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-success-border-subtle);
}

.form-check-input:focus {
  border-color: var(--bs-success);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}

.search-button {
  width: 2rem;
  fill: rgba(255,255,255,0.87);
  stroke: rgba(255,255,255,0.87);
}

#btn-back-to-top {
  position: fixed;
  bottom: 5vh;
  right: 5vw;
  display: none;
}

.top-icon svg {
  width: 2rem;
  height:2rem;
  fill: var(--bs-info-bg-subtle);
  stroke: var(--bs-info-bg-subtle);
}

#btn-back-to-top:hover .top-icon svg {
  fill: var(--bs-info-border-subtle);
  stroke: var(--bs-info-border-subtle);
}

.energy-icon svg {
  margin-top: -0.25rem;
  margin-right: -0.25rem;
}

.set-icon svg {
  margin-left: -0.25rem;
}

.shadow-filter {
  filter:
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

/* --------------------------------------------------
   Pricing
-------------------------------------------------- */
.price-row {
  position: relative;
  margin-top: -1.25rem;
  border-radius: 0.33rem;
  background: linear-gradient(
    90deg,
    rgba(156, 204, 102, 1) 21%,
    rgba(211, 225, 86, 1) 42%,
    rgba(255, 238, 87, 1) 63%,
    rgba(255, 201, 41, 1) 74%,
    rgba(255, 167, 36, 1) 85%
  );
}

.inventory-button {
  margin-bottom: -2rem;
  margin-right: -0.25rem;
  width: 40px;
  height: 40px;
  border-radius: 0.33rem;
  background-color: hsl(262, 47%, 55%);
  color: #fff;
}

.inventory-label {
  width: 100%;
  height: 100%;
  font-size: 1rem;
  font-weight: 700;
}

.fs-7 {
  font-size: 0.9rem !important;
}

.price-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
  background-color: hsl(88, 50%, 60%);
  border-radius: 0.33rem 0 0 0.33rem;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);

  @media (min-width: 768px) {
    font-size: 0.8rem;
  }
  @media (min-width: 996px) {
    font-size: 0.85rem;
  }
  @media (min-width: 1200px) {
    font-size: 0.9rem;
  }
  @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;
  }
}

/* --------------------------------------------------
   Search
-------------------------------------------------- */
@media (max-width: 768px) {
  .search-box,
  .search-button {
    min-height: 48px;
  }
}

::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
  opacity: 1 !important;
  font-size: 1rem;
  line-height: 2rem;
}

/* Sticky (mobile-bottom / desktop-top) search bar */
.search-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 48px;
  z-index: 1000;
  transform: rotate(180deg);

  @media (min-width: 768px) {
    position: sticky;
    top: 0;
    float: right;
    min-width: 45vw;
    max-width: 45vw;
    transform: rotate(0);
  }
}

.facet-list {
  max-height: 185px;
  overflow-y: auto;
}

/* --------------------------------------------------
   Circles (Header, Buttons, etc.)
-------------------------------------------------- */

/* Shared Circle Styles */
%circle-base {
  border-radius: 50%;
  position: absolute;
  margin: 0 auto;
  --a: 8deg;
  mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
  transition: 0.4s;
  transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
}

/* Red */
.redCircle {
  @extend %circle-base;
  width: 1rem;
  height: 1rem;
  border: 1px solid hsl(210, 11%, 15%);
  background: radial-gradient(circle at top left, hsl(0, 100%, 56%), hsl(0, 79%, 45%));
}

/* Yellow */
.yellowCircle {
  @extend %circle-base;
  width: 1rem;
  height: 1rem;
  border: 1px solid hsl(210, 11%, 15%);
  background: radial-gradient(circle at top left, hsl(61, 100%, 50%), hsl(61, 100%, 40%));
}

/* Green */
.greenCircle {
  @extend %circle-base;
  width: 1rem;
  height: 1rem;
  border: 1px solid hsl(210, 11%, 15%);
  background: radial-gradient(circle at top left, hsl(149, 100%, 40%), hsl(149, 100%, 30%));
}

/* Circle Hover Effect */
.yellowCircle:hover,
.redCircle:hover,
.greenCircle:hover,
.blueCircle:hover {
  --i: -1, 1;
  mask-position: 0 0;
}

.nav-icon {
  width: 1.85rem;
  height: 1.85rem;
}

.btn-warning>span, .btn-warning>svg.nav-icon {
  fill: var(--bs-warning-border-subtle);
  stroke: var(--bs-warning-border-subtle);
  color: var(--bs-warning-border-subtle);
}

.btn.btn-warning:hover>span, .btn.btn-warning:hover>svg.nav-icon {
  fill: var(--bs-warning-bg-subtle);
  stroke: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-border-subtle);  
}

.btn-outline-success svg.nav-icon {
  fill: var(--bs-success);
  stroke: var(--bs-success);
}

.btn.btn-outline-success:hover, .btn.btn-outline-success:hover>svg.nav-icon {
  fill: var(--bs-success-border-subtle);
  stroke: var(--bs-success-border-subtle);
  color: var(--bs-success-border-subtle);
}