tudor/school_compare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Condense spacing throughout the website for denser layout
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 34s
Details
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m11s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
Details

Browse Source 
Reduced padding, margins, and gaps across all components:
- Header: smaller logo, tighter navigation
- FilterBar: compact hero, smaller inputs and toggles
- SchoolCard: reduced padding, smaller fonts and metrics
- HomeView: tighter grid gaps, smaller section headers
- Map view: condensed compact list items

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-02-04 11:18:39 +00:00
parent 1b0d6edb98
commit 85709d99ca
4 changed files with 169 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
nextjs-app/app/globals.css
View File

@@ -92,7 +92,7 @@ body {
.header-content { .header-content {
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
padding: 1rem 2rem; padding: 0.625rem 1.5rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -101,14 +101,14 @@ body {
.logo { .logo {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.5rem;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
.logo-icon { .logo-icon {
width: 40px; width: 32px;
height: 40px; height: 32px;
color: var(--accent-coral); color: var(--accent-coral);
} }
@@ -119,14 +119,14 @@ body {
.logo-title { .logo-title {
font-family: var(--font-playfair), 'Playfair Display', Georgia, serif; font-family: var(--font-playfair), 'Playfair Display', Georgia, serif;
font-size: 1.25rem; font-size: 1.125rem;
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
line-height: 1.2; line-height: 1.2;
} }
.logo-subtitle { .logo-subtitle {
font-size: 0.7rem; font-size: 0.625rem;
color: var(--text-muted); color: var(--text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.1em;
@@ -134,15 +134,15 @@ body {
.nav { .nav {
display: flex; display: flex;
gap: 0.5rem; gap: 0.25rem;
} }
.nav-link { .nav-link {
padding: 0.6rem 1.2rem; padding: 0.4rem 0.875rem;
text-decoration: none; text-decoration: none;
color: var(--text-secondary); color: var(--text-secondary);
font-weight: 500; font-weight: 500;
font-size: 0.9rem; font-size: 0.8125rem;
border-radius: var(--radius-md); border-radius: var(--radius-md);
transition: var(--transition); transition: var(--transition);
} }
@@ -161,7 +161,7 @@ body {
.main { .main {
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 1.25rem 1.5rem;
} }
.view { .view {
@@ -181,7 +181,7 @@ body {
/* Hero Section */ /* Hero Section */
.hero { .hero {
text-align: center; text-align: center;
padding: 3rem 0 2rem; padding: 1.5rem 0 1rem;
} }
.hero-title { .hero-title {

94
nextjs-app/components/FilterBar.module.css
View File

@@ -1,36 +1,36 @@
.filterBar { .filterBar {
background: var(--bg-card, white); background: var(--bg-card, white);
border: 1px solid var(--border-color, #e5dfd5); border: 1px solid var(--border-color, #e5dfd5);
border-radius: 12px; border-radius: 10px;
padding: 1.5rem; padding: 1rem 1.25rem;
margin-bottom: 2rem; margin-bottom: 1.25rem;
box-shadow: var(--shadow-soft, 0 2px 8px rgba(26, 22, 18, 0.06)); box-shadow: var(--shadow-soft, 0 2px 8px rgba(26, 22, 18, 0.06));
} }
.filterBar.withHero { .filterBar.withHero {
background: linear-gradient(180deg, var(--bg-secondary, #f3ede4) 0%, var(--bg-card, white) 40%); background: linear-gradient(180deg, var(--bg-secondary, #f3ede4) 0%, var(--bg-card, white) 50%);
padding: 1.75rem 1.5rem 1.5rem; padding: 1.25rem 1.25rem 1rem;
} }
.heroSection { .heroSection {
text-align: center; text-align: center;
margin-bottom: 1.25rem; margin-bottom: 0.875rem;
padding-bottom: 1.25rem; padding-bottom: 0.875rem;
border-bottom: 1px solid var(--border-color, #e5dfd5); border-bottom: 1px solid var(--border-color, #e5dfd5);
} }
.heroTitle { .heroTitle {
font-size: 1.75rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
color: var(--text-primary, #1a1612); color: var(--text-primary, #1a1612);
margin: 0 0 0.375rem; margin: 0 0 0.25rem;
line-height: 1.2; line-height: 1.2;
letter-spacing: -0.02em; letter-spacing: -0.02em;
font-family: var(--font-playfair), 'Playfair Display', serif; font-family: var(--font-playfair), 'Playfair Display', serif;
} }
.heroDescription { .heroDescription {
font-size: 0.9375rem; font-size: 0.875rem;
color: var(--text-secondary, #5c564d); color: var(--text-secondary, #5c564d);
margin: 0; margin: 0;
line-height: 1.4; line-height: 1.4;
@@ -38,21 +38,21 @@
.searchModeToggle { .searchModeToggle {
display: flex; display: flex;
gap: 0.5rem; gap: 0.25rem;
margin-bottom: 1rem; margin-bottom: 0.75rem;
background: var(--bg-secondary, #f3ede4); background: var(--bg-secondary, #f3ede4);
padding: 0.25rem; padding: 0.2rem;
border-radius: 8px; border-radius: 6px;
} }
.searchModeToggle button { .searchModeToggle button {
flex: 1; flex: 1;
padding: 0.625rem 1rem; padding: 0.5rem 0.875rem;
font-size: 0.875rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
background: transparent; background: transparent;
border: none; border: none;
border-radius: 6px; border-radius: 5px;
cursor: pointer; cursor: pointer;
color: var(--text-secondary, #5c564d); color: var(--text-secondary, #5c564d);
transition: all 0.2s ease; transition: all 0.2s ease;
@@ -65,15 +65,15 @@
} }
.searchSection { .searchSection {
margin-bottom: 1rem; margin-bottom: 0.75rem;
} }
.searchInput { .searchInput {
width: 100%; width: 100%;
padding: 0.875rem 1rem; padding: 0.625rem 0.875rem;
font-size: 1rem; font-size: 0.9375rem;
border: 1px solid var(--border-color, #e5dfd5); border: 1px solid var(--border-color, #e5dfd5);
border-radius: 8px; border-radius: 6px;
outline: none; outline: none;
transition: all 0.2s ease; transition: all 0.2s ease;
background: var(--bg-card, white); background: var(--bg-card, white);
@@ -90,16 +90,16 @@
.locationForm { .locationForm {
display: flex; display: flex;
gap: 0.75rem; gap: 0.5rem;
margin-bottom: 1rem; margin-bottom: 0.75rem;
} }
.postcodeInput { .postcodeInput {
flex: 1; flex: 1;
padding: 0.875rem 1rem; padding: 0.625rem 0.875rem;
font-size: 1rem; font-size: 0.9375rem;
border: 1px solid var(--border-color, #e5dfd5); border: 1px solid var(--border-color, #e5dfd5);
border-radius: 8px; border-radius: 6px;
outline: none; outline: none;
transition: all 0.2s ease; transition: all 0.2s ease;
background: var(--bg-card, white); background: var(--bg-card, white);
@@ -107,7 +107,7 @@
.postcodeInput:focus { .postcodeInput:focus {
border-color: var(--accent-coral, #e07256); border-color: var(--accent-coral, #e07256);
box-shadow: 0 0 0 3px rgba(224, 114, 86, 0.15); box-shadow: 0 0 0 2px rgba(224, 114, 86, 0.15);
} }
.postcodeInput::placeholder { .postcodeInput::placeholder {
@@ -115,10 +115,10 @@
} }
.radiusSelect { .radiusSelect {
padding: 0.875rem 1rem; padding: 0.625rem 0.75rem;
font-size: 1rem; font-size: 0.9375rem;
border: 1px solid var(--border-color, #e5dfd5); border: 1px solid var(--border-color, #e5dfd5);
border-radius: 8px; border-radius: 6px;
background: var(--bg-card, white); background: var(--bg-card, white);
cursor: pointer; cursor: pointer;
outline: none; outline: none;
@@ -130,13 +130,13 @@
} }
.searchButton { .searchButton {
padding: 0.875rem 1.5rem; padding: 0.625rem 1.25rem;
font-size: 1rem; font-size: 0.9375rem;
font-weight: 600; font-weight: 600;
background: var(--accent-coral, #e07256); background: var(--accent-coral, #e07256);
color: white; color: white;
border: none; border: none;
border-radius: 8px; border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
@@ -153,17 +153,17 @@
.filters { .filters {
display: flex; display: flex;
gap: 0.75rem; gap: 0.5rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
.filterSelect { .filterSelect {
flex: 1; flex: 1;
min-width: 200px; min-width: 180px;
padding: 0.75rem 1rem; padding: 0.5rem 0.75rem;
font-size: 0.875rem; font-size: 0.8125rem;
border: 1px solid var(--border-color, #e5dfd5); border: 1px solid var(--border-color, #e5dfd5);
border-radius: 8px; border-radius: 6px;
background: var(--bg-card, white); background: var(--bg-card, white);
cursor: pointer; cursor: pointer;
outline: none; outline: none;
@@ -175,13 +175,13 @@
} }
.clearButton { .clearButton {
padding: 0.75rem 1rem; padding: 0.5rem 0.75rem;
font-size: 0.875rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
background: var(--bg-secondary, #f3ede4); background: var(--bg-secondary, #f3ede4);
color: var(--text-secondary, #5c564d); color: var(--text-secondary, #5c564d);
border: 1px solid var(--border-color, #e5dfd5); border: 1px solid var(--border-color, #e5dfd5);
border-radius: 8px; border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
@@ -193,25 +193,25 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.filterBar { .filterBar {
padding: 1rem; padding: 0.875rem;
border-radius: 8px; border-radius: 8px;
} }
.filterBar.withHero { .filterBar.withHero {
padding: 1.25rem 1rem 1rem; padding: 1rem 0.875rem 0.875rem;
} }
.heroSection { .heroSection {
margin-bottom: 1rem; margin-bottom: 0.75rem;
padding-bottom: 1rem; padding-bottom: 0.75rem;
} }
.heroTitle { .heroTitle {
font-size: 1.375rem; font-size: 1.25rem;
} }
.heroDescription { .heroDescription {
font-size: 0.875rem; font-size: 0.8125rem;
} }
.locationForm { .locationForm {

153
nextjs-app/components/HomeView.module.css
View File

@@ -6,20 +6,20 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: 0.75rem;
margin-bottom: 2rem; margin-bottom: 1rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
.locationBanner { .locationBanner {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.5rem;
padding: 0.75rem 1.25rem; padding: 0.5rem 1rem;
background: rgba(45, 125, 125, 0.1); background: rgba(45, 125, 125, 0.1);
border: 1px solid rgba(45, 125, 125, 0.3); border: 1px solid rgba(45, 125, 125, 0.3);
border-radius: 10px; border-radius: 8px;
font-size: 0.9375rem; font-size: 0.875rem;
color: var(--accent-teal, #2d7d7d); color: var(--accent-teal, #2d7d7d);
font-weight: 500; font-weight: 500;
} }
@@ -32,22 +32,22 @@
/* View Toggle */ /* View Toggle */
.viewToggle { .viewToggle {
display: flex; display: flex;
gap: 0.25rem; gap: 0.2rem;
background: var(--bg-secondary, #f3ede4); background: var(--bg-secondary, #f3ede4);
padding: 0.25rem; padding: 0.2rem;
border-radius: 8px; border-radius: 6px;
} }
.viewToggleBtn { .viewToggleBtn {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.375rem; gap: 0.25rem;
padding: 0.5rem 0.875rem; padding: 0.375rem 0.625rem;
font-size: 0.875rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
background: transparent; background: transparent;
border: none; border: none;
border-radius: 6px; border-radius: 5px;
cursor: pointer; cursor: pointer;
color: var(--text-secondary, #5c564d); color: var(--text-secondary, #5c564d);
transition: all 0.2s ease; transition: all 0.2s ease;
@@ -68,7 +68,7 @@
} }
.results { .results {
margin-top: 2rem; margin-top: 1rem;
} }
.mapViewResults { .mapViewResults {
@@ -78,13 +78,13 @@
/* Map View Layout */ /* Map View Layout */
.mapViewContainer { .mapViewContainer {
display: grid; display: grid;
grid-template-columns: 1fr 380px; grid-template-columns: 1fr 340px;
gap: 1.5rem; gap: 1rem;
height: 550px; height: 480px;
} }
.mapContainer { .mapContainer {
border-radius: 12px; border-radius: 10px;
overflow: hidden; overflow: hidden;
border: 1px solid var(--border-color, #e5dfd5); border: 1px solid var(--border-color, #e5dfd5);
height: 100%; height: 100%;
@@ -93,10 +93,10 @@
.compactList { .compactList {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.5rem;
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
padding-right: 0.5rem; padding-right: 0.375rem;
} }
.compactList::-webkit-scrollbar { .compactList::-webkit-scrollbar {
@@ -122,17 +122,17 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 1rem; gap: 0.75rem;
padding: 0.875rem 1rem; padding: 0.625rem 0.75rem;
background: var(--bg-card, white); background: var(--bg-card, white);
border: 1px solid var(--border-color, #e5dfd5); border: 1px solid var(--border-color, #e5dfd5);
border-radius: 10px; border-radius: 8px;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.compactItem:hover { .compactItem:hover {
border-color: var(--accent-coral, #e07256); border-color: var(--accent-coral, #e07256);
box-shadow: 0 2px 8px rgba(26, 22, 18, 0.06); box-shadow: 0 2px 6px rgba(26, 22, 18, 0.05);
} }
.compactItemContent { .compactItemContent {
@@ -143,13 +143,13 @@
.compactItemHeader { .compactItemHeader {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.375rem;
margin-bottom: 0.25rem; margin-bottom: 0.125rem;
} }
.compactItemName { .compactItemName {
font-weight: 600; font-weight: 600;
font-size: 0.9375rem; font-size: 0.8125rem;
color: var(--text-primary, #1a1612); color: var(--text-primary, #1a1612);
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
@@ -163,32 +163,32 @@
.distanceBadge { .distanceBadge {
flex-shrink: 0; flex-shrink: 0;
padding: 0.125rem 0.5rem; padding: 0.0625rem 0.375rem;
font-size: 0.75rem; font-size: 0.6875rem;
font-weight: 600; font-weight: 600;
background: var(--accent-teal, #2d7d7d); background: var(--accent-teal, #2d7d7d);
color: white; color: white;
border-radius: 4px; border-radius: 3px;
} }
.compactItemMeta { .compactItemMeta {
display: flex; display: flex;
gap: 0.5rem; gap: 0.375rem;
font-size: 0.8125rem; font-size: 0.6875rem;
color: var(--text-secondary, #5c564d); color: var(--text-secondary, #5c564d);
margin-bottom: 0.375rem; margin-bottom: 0.25rem;
} }
.compactItemMeta span:not(:last-child)::after { .compactItemMeta span:not(:last-child)::after {
content: '·'; content: '·';
margin-left: 0.5rem; margin-left: 0.375rem;
color: var(--text-muted, #8a847a); color: var(--text-muted, #8a847a);
} }
.compactItemStats { .compactItemStats {
display: flex; display: flex;
gap: 1rem; gap: 0.75rem;
font-size: 0.8125rem; font-size: 0.6875rem;
color: var(--text-secondary, #5c564d); color: var(--text-secondary, #5c564d);
} }
@@ -199,18 +199,18 @@
.compactItemActions { .compactItemActions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.375rem; gap: 0.25rem;
flex-shrink: 0; flex-shrink: 0;
} }
.compactBtn { .compactBtn {
padding: 0.375rem 0.75rem; padding: 0.25rem 0.5rem;
font-size: 0.75rem; font-size: 0.6875rem;
font-weight: 600; font-weight: 600;
background: var(--accent-coral, #e07256); background: var(--accent-coral, #e07256);
color: white; color: white;
border: none; border: none;
border-radius: 6px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
text-align: center; text-align: center;
@@ -232,13 +232,13 @@
} }
.compactBtnSecondary { .compactBtnSecondary {
padding: 0.375rem 0.75rem; padding: 0.25rem 0.5rem;
font-size: 0.75rem; font-size: 0.6875rem;
font-weight: 500; font-weight: 500;
background: transparent; background: transparent;
color: var(--text-secondary, #5c564d); color: var(--text-secondary, #5c564d);
border: 1px solid var(--border-color, #e5dfd5); border: 1px solid var(--border-color, #e5dfd5);
border-radius: 6px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
text-decoration: none; text-decoration: none;
@@ -251,13 +251,13 @@
} }
.sectionHeader { .sectionHeader {
margin-bottom: 2rem; margin-bottom: 1rem;
} }
.sectionHeader h2 { .sectionHeader h2 {
font-size: 1.875rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
margin-bottom: 0.75rem; margin-bottom: 0.5rem;
color: var(--text-primary, #1a1612); color: var(--text-primary, #1a1612);
font-family: var(--font-playfair), 'Playfair Display', serif; font-family: var(--font-playfair), 'Playfair Display', serif;
} }
@@ -266,50 +266,50 @@
.sectionHeader h2::after { .sectionHeader h2::after {
content: ''; content: '';
display: block; display: block;
width: 60px; width: 50px;
height: 3px; height: 2px;
background: var(--accent-coral, #e07256); background: var(--accent-coral, #e07256);
border-radius: 2px; border-radius: 1px;
margin-top: 0.75rem; margin-top: 0.5rem;
} }
.sectionDescription { .sectionDescription {
font-size: 1rem; font-size: 0.9375rem;
color: var(--text-secondary, #5c564d); color: var(--text-secondary, #5c564d);
margin: 0; margin: 0;
line-height: 1.6; line-height: 1.5;
} }
.resultsHeader { .resultsHeader {
margin-bottom: 2rem; margin-bottom: 1rem;
padding-bottom: 1rem; padding-bottom: 0.625rem;
border-bottom: 2px solid var(--border-color, #e5dfd5); border-bottom: 2px solid var(--border-color, #e5dfd5);
} }
.resultsHeader h2 { .resultsHeader h2 {
font-size: 1.5rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
color: var(--text-primary, #1a1612); color: var(--text-primary, #1a1612);
margin: 0; margin: 0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.375rem;
} }
.resultsHeader h2::before { .resultsHeader h2::before {
content: ''; content: '';
display: inline-block; display: inline-block;
width: 4px; width: 3px;
height: 1.25em; height: 1.125em;
background: var(--accent-coral, #e07256); background: var(--accent-coral, #e07256);
border-radius: 2px; border-radius: 2px;
} }
.grid { .grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem; gap: 1rem;
margin-bottom: 2rem; margin-bottom: 1.25rem;
} }
/* Staggered grid entry animation */ /* Staggered grid entry animation */
@@ -341,41 +341,43 @@
.emptyState { .emptyState {
text-align: center; text-align: center;
padding: 4rem 2rem; padding: 2.5rem 1.5rem;
background: var(--bg-card, white); background: var(--bg-card, white);
border: 1px solid var(--border-color, #e5dfd5); border: 1px solid var(--border-color, #e5dfd5);
border-radius: 12px; border-radius: 10px;
} }
.emptyStateTitle { .emptyStateTitle {
font-size: 1.5rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
color: var(--text-primary, #1a1612); color: var(--text-primary, #1a1612);
margin-bottom: 0.5rem; margin-bottom: 0.375rem;
font-family: var(--font-playfair), 'Playfair Display', serif; font-family: var(--font-playfair), 'Playfair Display', serif;
} }
.emptyStateDescription { .emptyStateDescription {
font-size: 1rem; font-size: 0.9375rem;
color: var(--text-secondary, #5c564d); color: var(--text-secondary, #5c564d);
max-width: 400px; max-width: 380px;
margin: 0 auto; margin: 0 auto;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.grid { .grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 0.75rem;
} }
.locationBannerWrapper { .locationBannerWrapper {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
margin-bottom: 0.75rem;
} }
.locationBanner { .locationBanner {
padding: 0.75rem 1rem; padding: 0.5rem 0.75rem;
font-size: 0.875rem; font-size: 0.8125rem;
border-radius: 8px; border-radius: 6px;
} }
.viewToggle { .viewToggle {
@@ -384,24 +386,25 @@
.mapViewContainer { .mapViewContainer {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 300px auto; grid-template-rows: 260px auto;
height: auto; height: auto;
gap: 0.75rem;
} }
.mapContainer { .mapContainer {
height: 300px; height: 260px;
} }
.compactList { .compactList {
height: auto; height: auto;
max-height: 400px; max-height: 350px;
padding-right: 0; padding-right: 0;
} }
.compactItem { .compactItem {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
gap: 0.75rem; gap: 0.5rem;
} }
.compactItemActions { .compactItemActions {
@@ -413,6 +416,6 @@
} }
.emptyState { .emptyState {
padding: 3rem 1.5rem; padding: 2rem 1.25rem;
} }
} }

66
nextjs-app/components/SchoolCard.module.css
View File

@@ -2,30 +2,30 @@
background: var(--bg-card, white); background: var(--bg-card, white);
border: 1px solid var(--border-color, #e5dfd5); border: 1px solid var(--border-color, #e5dfd5);
border-left: 3px solid transparent; border-left: 3px solid transparent;
border-radius: 12px; border-radius: 10px;
padding: 1.5rem; padding: 1rem 1.125rem;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.card:hover { .card:hover {
border-left-color: var(--accent-coral, #e07256); border-left-color: var(--accent-coral, #e07256);
box-shadow: var(--shadow-medium, 0 4px 20px rgba(26, 22, 18, 0.1)); box-shadow: var(--shadow-medium, 0 4px 20px rgba(26, 22, 18, 0.1));
transform: translateY(-2px); transform: translateY(-1px);
} }
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
gap: 1rem; gap: 0.75rem;
margin-bottom: 0.75rem; margin-bottom: 0.375rem;
} }
.title { .title {
margin: 0; margin: 0;
font-size: 1.125rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
line-height: 1.4; line-height: 1.35;
font-family: var(--font-playfair), 'Playfair Display', serif; font-family: var(--font-playfair), 'Playfair Display', serif;
} }
@@ -40,49 +40,49 @@
} }
.distance { .distance {
font-size: 0.875rem; font-size: 0.75rem;
color: var(--accent-teal, #2d7d7d); color: var(--accent-teal, #2d7d7d);
white-space: nowrap; white-space: nowrap;
background: rgba(45, 125, 125, 0.1); background: rgba(45, 125, 125, 0.1);
padding: 0.25rem 0.75rem; padding: 0.125rem 0.5rem;
border-radius: 20px; border-radius: 12px;
font-weight: 500; font-weight: 500;
} }
.meta { .meta {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.5rem; gap: 0.375rem;
margin-bottom: 1rem; margin-bottom: 0.625rem;
} }
.metaItem { .metaItem {
font-size: 0.875rem; font-size: 0.75rem;
color: var(--text-secondary, #5c564d); color: var(--text-secondary, #5c564d);
padding: 0.25rem 0.75rem; padding: 0.125rem 0.5rem;
background: var(--bg-secondary, #f3ede4); background: var(--bg-secondary, #f3ede4);
border-radius: 4px; border-radius: 3px;
} }
.metrics { .metrics {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem; gap: 0.625rem;
margin-bottom: 1.5rem; margin-bottom: 0.875rem;
padding: 1rem; padding: 0.625rem 0.75rem;
background: var(--bg-secondary, #f3ede4); background: var(--bg-secondary, #f3ede4);
border-radius: 8px; border-radius: 6px;
border: 1px solid var(--border-color, #e5dfd5); border: 1px solid var(--border-color, #e5dfd5);
} }
.metric { .metric {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.125rem;
} }
.metricLabel { .metricLabel {
font-size: 0.75rem; font-size: 0.6875rem;
color: var(--text-muted, #8a847a); color: var(--text-muted, #8a847a);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@@ -91,11 +91,11 @@
.metricValue { .metricValue {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.375rem;
} }
.metricValue strong { .metricValue strong {
font-size: 1.125rem; font-size: 1rem;
color: var(--text-primary, #1a1612); color: var(--text-primary, #1a1612);
font-weight: 700; font-weight: 700;
} }
@@ -137,16 +137,16 @@
.actions { .actions {
display: flex; display: flex;
gap: 0.75rem; gap: 0.5rem;
} }
.btnSecondary, .btnSecondary,
.btnPrimary { .btnPrimary {
flex: 1; flex: 1;
padding: 0.625rem 1rem; padding: 0.5rem 0.75rem;
font-size: 0.875rem; font-size: 0.8125rem;
font-weight: 600; font-weight: 600;
border-radius: 8px; border-radius: 6px;
border: none; border: none;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
@@ -157,14 +157,14 @@
.btnSecondary { .btnSecondary {
background: var(--bg-card, white); background: var(--bg-card, white);
color: var(--accent-teal, #2d7d7d); color: var(--accent-teal, #2d7d7d);
border: 2px solid var(--accent-teal, #2d7d7d); border: 1.5px solid var(--accent-teal, #2d7d7d);
} }
.btnSecondary:hover { .btnSecondary:hover {
background: var(--accent-teal, #2d7d7d); background: var(--accent-teal, #2d7d7d);
color: white; color: white;
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(45, 125, 125, 0.3); box-shadow: 0 3px 8px rgba(45, 125, 125, 0.25);
} }
.btnPrimary { .btnPrimary {
@@ -175,7 +175,7 @@
.btnPrimary:hover { .btnPrimary:hover {
background: var(--accent-coral-dark, #c45a3f); background: var(--accent-coral-dark, #c45a3f);
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(224, 114, 86, 0.3); box-shadow: 0 3px 8px rgba(224, 114, 86, 0.25);
} }
.btnPrimary:active { .btnPrimary:active {
@@ -184,13 +184,13 @@
@media (max-width: 640px) { @media (max-width: 640px) {
.card { .card {
padding: 1rem; padding: 0.875rem;
border-radius: 8px; border-radius: 8px;
} }
.metrics { .metrics {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 0.75rem; gap: 0.5rem;
} }
.actions { .actions {