Average Population Cards
Cards with PSA populations between 5,000 and 20,000 will appear here.
<
/* Global styling for body, header, and navigation */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333333;
padding: 20px;
color: white;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
text-align: center;
}
nav ul li {
display: inline;
margin-right: 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
/* Population sections with flexbox to fit multiple cards */
#low-pop, #average-pop, #high-pop {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0;
}
/* Card styling for compact layout */
.card {
width: 22%; /* Adjusted for 4-5 cards per row */
background-color: #fff;
padding: 10px;
margin: 10px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Table styling */
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
font-size: 0.85rem; /* Smaller font size for compact layout */
}
th, td {
padding: 6px 8px; /* Reduced padding for a smaller table */
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #333;
color: white;
}
tr:hover {
background-color: #f5f5f5;
}
/* Image styling for compact layout */
img {
width: 100px; /* Smaller size to fit more cards per row */
height: auto;
display: block;
margin: 10px auto;
border-radius: 8px;
}
/* Basic body styling */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
text-align: center;
}
header {
background-color: #333;
color: white;
padding: 20px;
}
header h1 {
margin: 0;
font-size: 2.5rem;
}
header p {
margin: 10px 0;
font-size: 1.2rem;
}
/* Button styling */
.btn {
display: inline-block;
padding: 15px 30px;
margin: 20px;
background-color: #ff6347;
color: white;
text-decoration: none;
font-size: 1.2rem;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #ff4500;
}
/* Footer styling */
footer {
margin-top: 50px;
padding: 20px;
background-color: #333;
color: white;
text-align: center;
}
body {
font-family: Arial, sans-serif;
}
header {
text-align: center;
padding: 20px;
}
.category-section {
margin: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
.button-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.card-button {
text-align: center;
margin: 10px;
max-width: 150px;
}
.card-image {
width: 150px;
height: auto;
border-radius: 8px;
margin-bottom: 10px;
}
.btn {
display: block;
padding: 10px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
}
.btn:hover {
background-color: #0056b3;
}
.featured-cards {
margin: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9; /* Light background to highlight this section */
}
.featured-cards h3 {
text-align: center;
}
.button-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 15px; /* Adds space between cards */
}
.card-button {
text-align: center;
max-width: 150px;
margin-bottom: 20px;
}
.card-image {
width: 150px;
height: auto;
border-radius: 8px;
margin-bottom: 10px;
}
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: flex-start; /* Distributes the cards from the start of the row */
}
.card {
width: 22%; /* Adjust to fit 4 cards per row */
background-color: #fff;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.card {
width: calc(25% - 20px);
background-color: #fff;
padding: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Adds a smooth transition effect */
}
.card:hover {
transform: scale(1.05); /* Scales the card up slightly */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Makes the shadow stronger */
}
header {
background: linear-gradient(45deg, #3db2f1, #1405e6); /* Blue to orange gradient */
}
.card {
opacity: 0;
transition: opacity 0.5s ease-in;
}
.card-grid .card {
opacity: 1; /* Cards fade in smoothly */
}
/* Enhanced Button Styling */
.btn {
display: inline-block;
padding: 12px 24px;
margin: 20px;
background: linear-gradient(135deg, #0056b3, #002f6c);
color: white;
text-decoration: none;
font-weight: bold;
border-radius: 10px;
transition: all 0.3s ease-in-out;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
/* Increase hobby-score badge globally by ~40% to make the circle and logo more prominent.
Uses !important to override page-level badge sizing when necessary. Adjust offsets
(top/right) slightly so the larger badge sits nicely next to cards. */
.hobby-score-badge {
width: 105px !important; /* increased ~25% from 84px */
height: 105px !important;
padding: 14px !important;
font-size: 1.2em !important;
border-radius: 50% !important;
box-shadow: 0 0 18px rgba(0,0,0,0.45) !important;
border: 3px solid #FFD700 !important;
right: -45px !important; /* nudged outward for bigger circle */
top: 95px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
/* Typography: make the label bold/yellow and the numeric score white and prominent */
.hobby-score-badge span:first-child {
display: block !important;
font-size: 0.85em !important; /* larger label to pop */
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 0.03em !important;
margin-bottom: 2px !important;
color: #FFD700 !important; /* yellow label */
text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}
.hobby-score-badge span:last-child {
display: block !important;
font-size: 1.8em !important; /* bigger number */
font-weight: 900 !important; /* make it pop */
line-height: 1 !important;
color: #ffffff !important; /* white number */
/* add a thin black outline and a subtle gold glow for a prestigious look */
-webkit-text-stroke: 1.5px #000000 !important;
color: #FFD700 !important; /* match label color */
text-shadow: 0 2px 4px rgba(0,0,0,0.6), 0 0 8px rgba(255,215,0,0.32), 0 0 14px rgba(255,215,0,0.12) !important;
}
@media (max-width: 768px) {
.hobby-score-badge {
width: 86px !important; /* scaled down for mobile while keeping +25% feel */
height: 86px !important;
right: 10px !important;
top: 78px !important;
font-size: 1.05em !important;
}
.hobby-score-badge span:first-child {
font-size: 0.7em !important;
}
.hobby-score-badge span:last-child {
font-size: 1.35em !important;
}
}
.btn:hover {
background: linear-gradient(135deg, #007bff, #0056b3);
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.3);
transform: translateY(-3px);
}
.btn:active {
transform: translateY(1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Styling for table to enhance appearance */
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
border: 2px solid #000080; /* Darker blue border for more emphasis */
}
th, td {
padding: 12px;
text-align: center;
border-bottom: 2px solid #ccc; /* Thicker border for more distinction */
}
th {
background-color: #1a1a2e; /* Dark blue */
color: #f1f1f1; /* Off-white text */
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f9f9f9; /* Light background for alternating rows */
}
tr:hover {
background-color: #0bf1e2; /* Light blue hover effect to make rows interactive */
}
td {
font-size: 1.1em;
color: #333;
}
/* Sticky Navbar Styles */
.sticky-nav {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 0;
background-color: #0909f5; /* Dark background color for contrast */
padding: 10px 0;
z-index: 100; /* Ensures it stays above content */
text-align: center;
}
.sticky-nav a {
display: inline-block;
margin: 0 15px;
padding: 10px 20px;
text-decoration: none;
font-size: 1.2rem;
color: white;
background-color: #8b0321; /* Button color */
border-radius: 5px;
transition: background-color 0.3s ease;
}
.sticky-nav a:hover {
background-color: #f10434; /* Darker color on hover */
}
.card-button p {
text-align: center;
font-size: 1.1rem;
color: #333;
margin-top: 5px;
}
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
header nav a {
color: #fff;
margin: 0 10px;
text-decoration: none;
}
.card-info {
display: flex;
align-items: center;
justify-content: space-around;
margin: 20px;
}
.card-image {
width: 200px;
border-radius: 8px;
}
.card-details {
text-align: left;
}
.recent-sales, .current-listings {
padding: 20px;
}
h3 {
color: #444;
margin-top: 20px;
}
.card-image {
position: relative;
}
.card-image::after {
content: "Hobby Score\A" attr(data-score); /* "Hobby Score" on top, score on new line */
white-space: pre-line; /* Allows line break inside the bubble */
position: absolute;
top: 5px;
right: -80px; /* Adjusts the position slightly */
background-color: #8B0000;
color: rgb(236, 244, 10);
padding: 8px; /* Reduces padding for less blank space */
font-size: 0.9em;
font-family: 'Arial Black', sans-serif;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,0.4);
text-align: center;
border: 2px solid #FFD700;
width: 75px; /* Slightly smaller width */
height: 75px; /* Slightly smaller height */
display: flex;
align-items: center;
justify-content: center;
line-height: 1.2;
flex-direction: column;
}
.card-info {
width: 40%; /* Slightly reduced width */
display: flex;
flex-direction: column;
}
.ratings-bar {
width: 55%; /* Slightly larger width */
margin-left: 15px; /* Shift slightly to the right */
}
.top-row {
display: flex;
gap: 20px;
width: 100%;
align-items: flex-start;
overflow: visible; /* Ensures no cropping of content */
}
.card-image img {
width: 100%;
max-width: 200px;
border-radius: 8px;
}
.quick-stats {
display: flex;
gap: 10px;
justify-content: space-around;
margin-top: 10px;
}
/* Specific styling adjustments for Kobe Bryant Topps RC page */
.top-row {
display: flex;
gap: 30px; /* Increased gap for clearer separation */
align-items: flex-start;
}
.card-info {
width: 35%; /* Reduced width to create more space for the graph */
}
.ratings-bar {
width: 60%; /* Expanded width for the graph */
margin-left: 20px; /* Slightly shifted for balance */
}
.quick-stats {
display: flex;
gap: 15px;
justify-content: space-between;
}
@media (max-width: 768px) {
html, body {
overflow-x: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 20px 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
position: relative;
}
header img[alt="Hobby Scores Banner"] {
width: 100%;
max-width: 600px;
height: auto;
object-fit: contain;
display: block;
margin: 0 auto;
z-index: 1;
}
nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px;
padding: 6px 0;
width: 100%;
max-width: 600px;
margin: 0 auto;
box-sizing: border-box;
}
nav a {
font-size: 0.7em;
padding: 6px 10px;
flex: 1 1 30%;
text-align: center;
background-color: #004080;
color: white;
border: 1px solid white;
border-radius: 6px;
text-decoration: none;
box-sizing: border-box;
}
/* Hide side cards for all orientations on small screens */
header img[alt="Left Card"],
header img[alt="Right Card"] {
display: none !important;
}
.button-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2px;
padding: 0 4px;
background-color: #ffffff;
border-radius: 10px;
box-sizing: border-box;
margin: 0 auto;
max-width: 100%;
}
.card-button {
flex: 0 0 30%;
max-width: 30%;
box-sizing: border-box;
padding: 4px;
text-align: center;
}
.card-button img {
width: 100%;
height: auto;
border-radius: 5px;
}
.card-button p {
font-size: 0.65em;
margin-top: 4px;
}
h3 {
font-size: 1em;
text-align: center;
}
}