/* ============================================================
VLR Fast 10's - Custom Hotlaps Stylesheet
HOW TO INSTALL IN JOOMLA:
Option A (easiest):
1. Go to Joomla Admin > Extensions > Templates > Templates
2. Click your active template name
3. Look for a file called "custom.css" or create one
4. Paste this entire file's contents in there
5. Save
Option B:
1. Upload this file to /templates/YOUR_TEMPLATE/css/vlr-hotlaps.css
2. Edit /templates/YOUR_TEMPLATE/index.php
3. Add this line in the section:
Option C (quick and dirty):
1. Go to Joomla Admin > Extensions > Templates > Templates
2. Click your active template
3. Edit index.php
4. Paste a block with this CSS in the
============================================================ */
/* ----------------------------------------
GOOGLE FONTS (optional but recommended)
Add this to your template if you want the nicer fonts:
---------------------------------------- */
/* ----------------------------------------
CSS VARIABLES
---------------------------------------- */
:root {
--vlr-primary: #8B2500; /* the existing brown/rust link color */
--vlr-primary-light: #B33A00;
--vlr-primary-dark: #5C1800;
--vlr-bg: #ffffff;
--vlr-bg-alt: #f8f6f4; /* warm off-white for zebra rows */
--vlr-bg-hover: #fdf0e8; /* warm hover */
--vlr-bg-highlight: #fff8e1; /* personal best highlight */
--vlr-border: #e0d6cf;
--vlr-text: #2c2420;
--vlr-text-light: #7a6e66;
--vlr-text-header: #1a1210;
--vlr-gold: #d4a017;
--vlr-silver: #8a8a8a;
--vlr-bronze: #a0622e;
--vlr-shadow: 0 1px 3px rgba(0,0,0,0.08);
--vlr-shadow-hover: 0 4px 12px rgba(0,0,0,0.12);
--vlr-radius: 6px;
--vlr-font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--vlr-font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
--vlr-transition: 0.15s ease;
}
/* ----------------------------------------
PAGE TITLE (VLR Fast 10's)
---------------------------------------- */
h1, h2.vlr-title {
font-family: var(--vlr-font-heading);
color: var(--vlr-text-header);
letter-spacing: -0.02em;
}
/* ----------------------------------------
TRACK NAME HEADERS
---------------------------------------- */
h2, h3 {
font-family: var(--vlr-font-heading);
color: var(--vlr-text-header);
font-weight: 700;
margin-top: 2em;
margin-bottom: 0.3em;
padding-bottom: 0.3em;
border-bottom: 3px solid var(--vlr-primary);
display: inline-block;
}
/* ----------------------------------------
SECTION LABELS (Fast Lap / Total Race Time)
---------------------------------------- */
h3, h4 {
font-family: var(--vlr-font-heading);
font-weight: 500;
color: var(--vlr-text-light);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.95em;
margin-bottom: 0.5em;
}
/* ----------------------------------------
TABLE BASE STYLES
---------------------------------------- */
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-bottom: 2em;
font-family: var(--vlr-font-body);
font-size: 0.92em;
box-shadow: var(--vlr-shadow);
border-radius: var(--vlr-radius);
overflow: hidden;
}
/* ----------------------------------------
TABLE HEADER
---------------------------------------- */
table thead th,
table tr:first-child th,
background: var(--vlr-primary-dark);
color: #ffffff;
font-family: var(--vlr-font-heading);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.85em;
padding: 10px 14px;
text-align: left;
border: none;
position: sticky;
top: 0;
z-index: 1;
}
/* Header row - if using th elements */
th {
background: var(--vlr-primary-dark);
color: #ffffff;
font-family: var(--vlr-font-heading);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.85em;
padding: 10px 14px;
text-align: left;
border: none;
}
table tr th {
background: #5C1800 !important;
color: #ffffff !important;
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.85em;
padding: 10px 14px;
text-align: left;
border: none;
}
/* ----------------------------------------
TABLE ROWS & CELLS
---------------------------------------- */
td {
padding: 9px 14px;
border-bottom: 1px solid var(--vlr-border);
color: var(--vlr-text);
transition: background var(--vlr-transition), transform var(--vlr-transition);
font-variant-numeric: tabular-nums; /* keeps numbers aligned */
}
/* ----------------------------------------
ZEBRA STRIPING
---------------------------------------- */
/* Using nth-child for alternating rows */
tbody tr:nth-child(even),
table tr:nth-child(even) {
background-color: var(--vlr-bg-alt);
}
tbody tr:nth-child(odd),
table tr:nth-child(odd) {
background-color: var(--vlr-bg);
}
/* ----------------------------------------
ROW HOVER EFFECTS
---------------------------------------- */
tbody tr:hover,
table tr:hover {
background-color: var(--vlr-bg-hover) !important;
cursor: pointer;
}
/* Subtle left-border accent on hover */
tbody tr:hover td:first-child,
table tr:hover td:first-child {
box-shadow: inset 3px 0 0 var(--vlr-primary);
}
/* ----------------------------------------
POSITION COLUMN - MEDALS
---------------------------------------- */
/* Position numbers */
td:first-child {
font-weight: 600;
text-align: center;
min-width: 40px;
font-family: var(--vlr-font-heading);
font-size: 1em;
}
/* ----------------------------------------
DRIVER NAME LINKS
---------------------------------------- */
td a,
table a {
color: var(--vlr-primary);
text-decoration: none;
font-weight: 600;
transition: color var(--vlr-transition);
position: relative;
}
td a:hover,
table a:hover {
color: var(--vlr-primary-light);
}
/* Underline animation on hover */
td a::after,
table a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--vlr-primary-light);
transition: width 0.2s ease;
}
td a:hover::after,
table a:hover::after {
width: 100%;
}
/* ----------------------------------------
TIME / SPEED COLUMNS
---------------------------------------- */
/* Make numeric columns use monospace-ish alignment */
td:nth-child(n+3) {
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
/* ----------------------------------------
PLAYER PROFILE PAGE (All Results)
---------------------------------------- */
/* Profile header */
h1 {
font-family: var(--vlr-font-heading);
font-size: 2.2em;
font-weight: 700;
color: var(--vlr-text-header);
margin-bottom: 0.1em;
}
h1 + h2,
h1 + p {
color: var(--vlr-text-light);
font-family: var(--vlr-font-heading);
font-weight: 400;
margin-top: 0;
font-size: 1.2em;
}
/* Average finish stat */
p strong, b {
font-family: var(--vlr-font-heading);
}
/* ----------------------------------------
RESPONSIVE - MOBILE TABLES
---------------------------------------- */
@media screen and (max-width: 768px) {
table {
font-size: 0.82em;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
td, th {
padding: 7px 10px;
white-space: nowrap;
}
h2, h3 {
font-size: 1.3em;
}
/* Make the page not overflow */
body {
overflow-x: hidden;
}
/* Side-scroll hint shadow */
table {
background:
linear-gradient(to right, white 30%, rgba(255,255,255,0)),
linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.1), rgba(0,0,0,0)),
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.1), rgba(0,0,0,0)) 0 100%;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-position: 0 0, 100%, 0 0, 100%;
background-attachment: local, local, scroll, scroll;
}
}
@media screen and (max-width: 480px) {
table {
font-size: 0.78em;
}
td, th {
padding: 6px 8px;
}
}
/* ----------------------------------------
PRINT STYLES
---------------------------------------- */
@media print {
table {
box-shadow: none;
page-break-inside: avoid;
}
th {
background: #333 !important;
color: #fff !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
tbody tr:nth-child(even) {
background: #f0f0f0 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
td a {
color: #000;
text-decoration: underline;
}
}
/* ----------------------------------------
NICE EXTRAS
---------------------------------------- */
/* Smooth scroll for anchor links */
html {
scroll-behavior: smooth;
}
/* "Back to standings" link styling */
a[href*="standings"] {
display: inline-block;
margin-top: 1em;
padding: 8px 20px;
background: var(--vlr-primary);
color: #fff !important;
border-radius: var(--vlr-radius);
text-decoration: none;
font-family: var(--vlr-font-heading);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.9em;
transition: background var(--vlr-transition), box-shadow var(--vlr-transition);
}
a[href*="standings"]:hover {
background: var(--vlr-primary-light);
box-shadow: var(--vlr-shadow-hover);
}