/* ── Base ───────────────────────────────────────────────────── */ html { font-size: 14px; position: relative; min-height: 100%; } @media (min-width: 768px) { html { font-size: 16px; } } body { margin-bottom: 0; } /* ── Brand overrides on top of Cosmo ───────────────────────── */ :root { --fs-accent: #e07b1a; /* lure orange — used for sale prices, badges */ --fs-water: #2196a6; /* deep water teal — optional highlight */ /* Fisho brand palette — defined here so shared partials (e.g. _JoinPanels) can use var(--fisho-*) on any layout, not just _FishoLayout. */ --fisho-blue: #0a2540; --fisho-mid: #1a4a6e; --fisho-accent: #00b4d8; --fisho-light: #90e0ef; } /* Navbar: use Cosmo's dark so the brand reads clearly */ .navbar-brand i { color: var(--fs-accent); } /* Sale / accent colour */ .text-sale { color: var(--fs-accent) !important; } .bg-sale { background-color: var(--fs-accent) !important; } /* ── Product cards ──────────────────────────────────────────── */ .product-card { transition: box-shadow .15s ease, transform .15s ease; } .product-card:hover { box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12) !important; transform: translateY(-2px); } .product-card .card-img-top { object-fit: cover; height: 220px; } /* ── Second-hand badge ──────────────────────────────────────── */ .badge-secondhand { background-color: var(--fs-accent); color: #fff; font-size: .7rem; letter-spacing: .03em; } /* ── Hero section (home page) ───────────────────────────────── */ .hero { background: linear-gradient(135deg, rgba(12,47,58,0.82) 0%, rgba(26,82,118,0.72) 60%, rgba(33,150,166,0.65) 100%), url('/images/hero/sea-scape-01.jpg') center/cover no-repeat; color: #fff; padding: 5rem 0; } .hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; } .hero .lead { opacity: .85; } /* ── Platform feature strip ─────────────────────────────────── */ .platform-pill { border-radius: .5rem; transition: background .15s ease; } .platform-pill:hover { background: rgba(13,110,253,.06); } /* ── Club card ──────────────────────────────────────────────── */ .club-card { transition: box-shadow .15s ease, transform .15s ease; } .club-card:hover { box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12) !important; transform: translateY(-2px); } /* ── Footer ─────────────────────────────────────────────────── */ footer .text-muted, footer a.text-muted { color: rgba(255,255,255,0.72) !important; } footer a:hover { color: #fff !important; } /* ── Section cards (_JoinPanels and any other card grid) ────── */ /* Defined here (not in a partial