/* ===================================================== File: /assets/css/theme.css Half Fast Racing - Concept 21 DARK theme Version: 1.9.5 Scope: HOMEPAGE ONLY for now. Loaded by /index.php. The rest of the site still loads /assets/css/style.css. Do not remove style.css - subpages depend on it. RESPONSIVE (v1.3.0): panes no longer stack at all - they scale down instead. See the SHRINK block at the end of this file. RESPONSIVE (v1.2.0): the hero used to stack at 1200px and the panels at 968px. Both now stack at a single 900px breakpoint, so laptop-sized windows keep the side-by-side layout and just scale. Fonts: Rubik (body) + Jura (display), loaded from Google Fonts in the of whichever page includes this file. ===================================================== */ @font-face { /* Digits only. Jura's stock zero has a dot through the middle; Google Fonts serves a subset that does not reliably carry the clean alternate, so the clean zero is baked in here as the DEFAULT glyph instead. No OpenType feature needed - it simply is the zero now. unicode-range limits this file to digits and number punctuation, so every letter still comes from Jura as normal. 3.4 KB, weights 300-700. */ font-family: 'JuraDigits'; src: url('/assets/fonts/jura-digits.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0030-0039, U+002C, U+002E, U+003A; } /* ---------- Design Tokens ---------- */ :root { --orange: #ff6600; --orange-hover: #ff8533; --orange-glow: rgba(255, 102, 0, 0.15); --orange-border: rgba(255, 102, 0, 0.3); --bg-deepest: #000; --bg-dark: #0f0f0f; --bg-card: #1a1a1a; --bg-card-hover: #222; --text-primary: #fff; --text-body: #e0e0e0; --text-muted: #b0b0b0; --text-dim: #808080; --border-subtle: rgba(255, 255, 255, 0.1); --border-card: rgba(255, 255, 255, 0.08); --discord: #5865F2; --twitch: #9146FF; --youtube: #FF0000; --cap: 1280px; --cap-narrow: 900px; --font-body: 'Rubik', sans-serif; --font-display: 'JuraDigits', 'Jura', sans-serif; } /* ---------- Reset & Base ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background: var(--bg-deepest); color: var(--text-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-primary); line-height: 1.2; } /* ---------- Utility ---------- */ .container { max-width: var(--cap); margin: 0 auto; padding: 0 2rem; } .container-narrow { max-width: var(--cap-narrow); margin: 0 auto; padding: 0 2rem; } /* ========================================================= HEADER ========================================================= */ .site-header { background: var(--bg-dark); border-bottom: 1px solid var(--border-subtle); padding: 1rem 2rem; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .header-wrap { max-width: var(--cap); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .brand-logo { display: flex; align-items: center; } /* Matches .brand img in style.css EXACTLY — same clamp, same values. It was a flat 66px here while subpages used clamp(34px, 4.8vw, 62px), so the homepage logo sat 4px taller than every other page and the difference showed the moment you clicked between them. Both files carried a comment claiming they already matched; they didn't. The clamp also stops a fixed height from overflowing a narrow phone header, which is why the subpage rule was written that way in the first place. */ .brand-logo img { height: clamp(34px, 4.8vw, 62px); width: auto; max-width: 100%; } /* Nav Links */ .header-menu { display: flex; gap: 2rem; align-items: center; } .header-menu a { color: var(--text-muted); font-weight: 500; font-size: 0.95rem; transition: color 0.3s; } .header-menu a:hover { color: var(--orange); } /* Dropdown */ .nav-dropdown { position: relative; } .nav-dropdown-toggle { cursor: pointer; color: var(--text-muted); font-weight: 500; font-size: 0.95rem; background: none; border: none; font-family: inherit; padding: 0.5rem 0; transition: color 0.3s; } .nav-dropdown-toggle:hover { color: var(--orange); } .dropdown-arrow { font-size: 0.6rem; margin-left: 0.25rem; display: inline-block; transition: transform 0.3s; } .nav-dropdown:hover .dropdown-arrow { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: 0.75rem; background: var(--bg-dark); border: 1px solid var(--orange-border); border-radius: 6px; min-width: 200px; padding: 0.5rem 0; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.25s ease; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); z-index: 1000; } .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown-menu a { display: block; padding: 0.6rem 1.25rem; color: var(--text-muted); font-size: 0.9rem; transition: all 0.2s; } .nav-dropdown-menu a:hover { background: var(--orange-glow); color: var(--orange); padding-left: 1.75rem; } /* Join / CTA Button in Nav */ .join-header-btn { padding: 0.6rem 1.5rem; background: transparent; color: var(--orange) !important; border: 2px solid var(--orange); border-radius: 6px; font-weight: 600; transition: all 0.3s; } .join-header-btn:hover { background: var(--orange); color: #000 !important; } /* Vote Link */ .vote-link { color: var(--orange) !important; font-weight: 700; } /* Hamburger */ .hamburger { display: none; flex-direction: column; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001; gap: 5px; } /* Close button – hidden on desktop, shown in mobile breakpoint */ .close-menu { display: none; } .hamburger span { width: 26px; height: 3px; background: var(--text-primary); border-radius: 2px; transition: all 0.3s; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } /* Menu Overlay */ .menu-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 998; } .menu-overlay.open { display: block; } /* ========================================================= HERO – Concept 21 Side-by-Side ========================================================= */ .hero-row { display: grid; grid-template-columns: 1fr 1fr; min-height: min(28.125vw, 360px); align-items: stretch; max-width: var(--cap); margin: 0 auto; } .hero-content { padding: 2rem 4rem; max-width: 650px; margin-left: auto; display: flex; flex-direction: column; justify-content: center; } .hero-label { color: var(--orange); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 1rem; display: block; font-family: var(--font-display); } /* --------------------------------------------------------------------- WIDE DISPLAY TYPE Jura has no width axis, so "wider letters" has to be a transform, not a font setting. The trick: a stretched block still WRAPS at its unstretched width and then overflows once scaled, so the box is narrowed by the same factor first and scaled back to full width. --stretch is the dial. 1.0 = normal. Higher = wider, squatter letters. Raising it means lowering font-size to match, or the text runs long. --------------------------------------------------------------------- */ /* Both display headings read from one value. They were 1.8rem and 2.2rem, and setting them separately is how they drifted in the first place. */ :root { --display-size: 1.8rem; } .hero-h1 { /* Michroma at a light 1.25x stretch. Michroma is DRAWN wide (letters are 1.42x as wide as they are tall, against Jura's 1.16), so a small stretch gets to a very wide look without the stroke distortion you get from pushing a normal face. Effective width ratio lands around 1.78. Michroma ships in ONE weight. Do not set font-weight:700 here - the browser would fake it and the letterforms would thicken unevenly. --stretch and font-size trade off: raising one means lowering the other, or the title runs past the column. */ --stretch: 1.25; font-family: 'Michroma', var(--font-display); font-size: var(--display-size); font-weight: 400; line-height: 1.15; margin-bottom: 1rem; color: var(--text-primary); width: calc(100% / var(--stretch)); transform: scaleX(var(--stretch)); transform-origin: left center; } .hero-h1 span { color: var(--orange); } .hero-p { font-size: 1.15rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 1.5rem; } .hero-actions { display: flex; gap: 1.25rem; flex-wrap: wrap; } /* Hero Inline Stats */ .hero-stats { display: flex; gap: 2rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); } .hero-stat { display: flex; flex-direction: column; } .hero-stat-value { font-family: var(--font-display); font-size: 1.0rem; font-weight: 700; color: var(--orange); line-height: 1; } .hero-stat-label { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.18em; margin-top: 0.3rem; font-family: var(--font-display); font-weight: 700; } /* Shared Buttons */ /* Outlined, matching the Join League button in the header and the join card. The site had three different solid-orange styles (.btn-solid, .join-cta, .btn.primary) alongside one outlined one, so the same action looked different depending which page you were on. All four are outlined now; they fill on hover so a press still registers as a press. */ .btn-solid { display: inline-block; padding: calc(1rem - 2px) calc(2.2rem - 2px); background: transparent; color: var(--orange); border: 2px solid var(--orange); font-weight: 600; border-radius: 8px; transition: all 0.3s; text-align: center; } .btn-solid:hover { background: var(--orange); color: #111; } .btn-outline-dark { display: inline-block; padding: 1rem 2.2rem; background: transparent; color: var(--text-primary); border: 2px solid var(--border-subtle); font-weight: 600; border-radius: 8px; transition: all 0.3s; text-align: center; } .btn-outline-dark:hover { border-color: var(--text-primary); } /* Hero Visual (right pane) */ /* Fills its grid cell, so this half of the hero reaches the corners like every other panel on the page. The photo is 16:9 and the cell is 640x360 at the content cap - also 16:9 - so nothing is cropped, provided the text column beside it fits inside 360px. The spacing in .hero-content, .hero-p and .hero-stats is trimmed to make it fit with the current copy (350px of 360). If the hero description is later edited to something much longer, the row grows and object-fit:cover starts shaving the sides of the photo. That degrades a few percent at a time rather than leaving a visible gap, which is why this is preferable to locking the aspect ratio and letting it float. */ /* THE FRAME. Fills its grid cell corner to corner, like the panels below it, and stacks two things: the picture at its natural 16:9, and a placard strip underneath carrying the tagline - the way a gallery label sits below the work. This is why the leftover space is no longer a problem. The row is as tall as the text column beside it; whatever height the picture does not use becomes the placard. Taller text simply means a roomier placard, not a cropped photo or a gap. */ .hero-visual { background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-dark) 100%); height: 100%; align-self: stretch; display: flex; flex-direction: column; overflow: hidden; position: relative; border: 3px solid rgba(255, 102, 0, 0.15); } .hero-slider { position: relative; width: 100%; aspect-ratio: 16 / 9; flex: 0 0 auto; /* never squashed to make room for the placard */ overflow: hidden; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease-in-out; } .hero-slide.active { opacity: 1; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; } /* THE PLACARD. Takes whatever height is left below the picture. Measured against every tagline in the database: at 1rem all 63 fit on a single line, and only at 1.15rem do the three longest wrap - so the size below has real headroom. line-clamp is the backstop if a much longer one is ever added. */ .hero-placard { flex: 1 1 auto; min-height: 3rem; position: relative; display: flex; align-items: center; padding: 0.65rem 1.15rem; background: rgba(0, 0, 0, 0.55); border-top: 1px solid rgba(255, 102, 0, 0.18); overflow: hidden; } .hero-tagline-overlay { position: absolute; inset: 0; display: flex; align-items: center; padding: 0.65rem 1.15rem; opacity: 0; transition: opacity 1.5s ease-in-out; pointer-events: none; } .hero-tagline-overlay.active { opacity: 1; } .hero-tagline-text { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: 1rem; line-height: 1.35; color: var(--orange); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================= FEATURE ROWS (Homepage alternating sections) ========================================================= */ .feature-row { display: grid; grid-template-columns: 1fr 1fr; min-height: min(28.125vw, 360px); align-items: stretch; padding: 0; margin: 0 auto; max-width: var(--cap); } /* Checkerboard: applied per-pane */ .pane-tinted { background: rgba(199, 199, 199, 0.12) !important; } .pane-dark { background: #000 !important; } .feature-content { padding: 4rem; display: flex; flex-direction: column; justify-content: center; } /* Content in LEFT cell: pad left to push text toward center */ .feature-content:first-child { padding-left: max(4rem, calc(100% - 520px)); } /* Content in RIGHT cell: pad right to push text toward center */ .feature-content:last-child { padding-right: max(4rem, calc(100% - 520px)); } .feature-tag { display: inline-block; align-self: flex-start; padding: 0.45rem 1rem; background: var(--orange-glow); color: var(--orange); font-size: 0.72rem; font-weight: 700; border-radius: 20px; margin-bottom: 1rem; border: 1px solid var(--orange-border); font-family: var(--font-display); letter-spacing: 0.15em; text-transform: uppercase; } .feature-h2 { --stretch: 1.25; font-family: 'Michroma', var(--font-display); /* Shared with .hero-h1. At 2.2rem this sat LARGER than the page's main heading — a secondary block shouting louder than the hero above it. */ font-size: var(--display-size); font-weight: 400; margin-bottom: 0.6rem; color: var(--text-primary); width: calc(100% / var(--stretch)); transform: scaleX(var(--stretch)); transform-origin: left center; text-transform: uppercase; } .feature-desc { font-size: 1.05rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 0.85rem; } .feature-list { list-style: none; margin-bottom: 1.25rem; } .feature-list li { padding: 0.4rem 0; padding-left: 1.75rem; position: relative; color: var(--text-muted); } .feature-list li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 700; } .feature-link { color: var(--orange); font-weight: 600; font-size: 1rem; transition: text-decoration 0.2s; } /* ===== Join / Contact bottom panel + smooth anchor scroll ===== */ html { scroll-behavior: smooth; } #join { scroll-margin-top: 100px; } .join-cta { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; background: transparent; color: var(--orange); border: 2px solid var(--orange); font-weight: 700; font-size: 1rem; /* Padding reduced by the border width so the button is the same overall size it was — otherwise every outlined button grows 4px and nudges its neighbors. */ padding: calc(0.85rem - 2px) calc(1.6rem - 2px); border-radius: 8px; transition: background 0.2s, color 0.2s; } .join-cta:hover { background: var(--orange); color: #111; } .contact-lbl { margin: 0 0 1.5rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-dim); font-family: var(--font-display); font-weight: 700; } .contact-links { display: flex; flex-direction: column; gap: 0.35rem; } .disc-card { display: flex; align-items: center; gap: 0.85rem; background: rgba(88, 101, 242, 0.09); border: 1px solid rgba(88, 101, 242, 0.32); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1.5rem; transition: background 0.2s, border-color 0.2s; } .disc-card:hover { background: rgba(88, 101, 242, 0.16); border-color: rgba(88, 101, 242, 0.55); } .disc-ic { width: 32px; height: 32px; flex-shrink: 0; fill: var(--discord); } .disc-t { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); } .disc-d { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.2rem; line-height: 1.4; } .disc-ar { margin-left: auto; color: var(--discord); font-size: 1.2rem; } .contact-also { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-dim); margin: 0 0 0.75rem; font-family: var(--font-display); font-weight: 700; } .contact-socrow { display: flex; gap: 1.5rem; margin-bottom: 1.75rem; } .contact-soc { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.95rem; transition: color 0.2s; } .contact-soc svg { width: 19px; height: 19px; } .contact-soc.youtube svg { fill: var(--youtube); } .contact-soc.twitch svg { fill: var(--twitch); } .contact-soc:hover { color: var(--text-primary); } .contact-btn { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; border: 1px solid rgba(255, 255, 255, 0.22); color: var(--text-primary); font-size: 0.95rem; font-weight: 600; border-radius: 8px; padding: 0.7rem 1.2rem; transition: border-color 0.2s, color 0.2s; } .contact-btn:hover { border-color: var(--orange); color: var(--orange); } .contact-ask { margin-top: 0.25rem; } .contact-ask-q { margin: 0 0 0.65rem; font-size: 0.95rem; color: var(--text-muted); } .feature-link:hover { text-decoration: underline; } .feature-visual { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-dim); overflow: hidden; } .feature-visual img { width: 100%; height: 100%; object-fit: cover; } /* Hero panes size to their content; the photo clips inside .hero-visual */ /* Smaller windows: stack the hero (photo on top, text below) so nothing is ever cut */ /* Single stacking breakpoint. Above 900px every two-column band stays side-by-side and simply scales down; below it, columns stack so the calendar grid and standings bars stay readable on phones. To stack earlier or later, change 900px here and nothing else. */ @media (max-width: 900px) { /* Columns deliberately NOT collapsed here - see the SHRINK block at the very end of this file. These rules only relax fixed heights so the panes can size to their content as they scale down. */ .hero-row { min-height: auto; aspect-ratio: auto; } .hero-content { max-width: 100%; margin: 0; } .hero-visual { height: auto; } .feature-row { min-height: auto; } } /* ========================================================= CALENDAR (Homepage schedule section) ========================================================= */ .cal-pane { padding: 2rem 2.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; } .cal-title { font-family: var(--font-display); font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 1.5rem; text-align: center; font-weight: 700; } .cal-header { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 480px; margin-bottom: 1rem; } .cal-month { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--text-primary); } .cal-nav { background: none; border: 1px solid rgba(255,255,255,0.12); color: var(--text-dim); width: 30px; height: 30px; border-radius: 4px; cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s; font-family: inherit; } .cal-nav:hover { border-color: var(--orange); color: var(--orange); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; width: 100%; max-width: 480px; } .cal-dow { text-align: center; font-size: 0.55rem; color: #666; text-transform: uppercase; letter-spacing: 1.5px; padding: 0 0 0.6rem; font-weight: 700; } .cal-day { text-align: center; padding: 0.3rem 0.15rem; font-size: 0.85rem; color: #444; position: relative; cursor: default; transition: background 0.15s; min-height: 52px; display: flex; align-items: center; justify-content: center; } .cal-day.in-month { color: #999; } .cal-day.today .day-num { color: var(--text-primary); font-weight: 700; } .cal-day.has-event { cursor: pointer; } .cal-day.has-event .day-num { color: var(--text-primary); } .cal-day.has-event:hover .day-ring-wrap { transform: scale(1.1); transition: transform 0.15s; } .cal-day.is-next .day-ring-wrap::after { content: ''; position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,102,0,0.25); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: pulse-ring 2s ease-out infinite; } @keyframes pulse-ring { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } .day-ring-wrap { position: relative; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; } .day-num { position: relative; z-index: 2; font-size: 0.8rem; line-height: 1; } .day-ring { position: absolute; border-radius: 50%; border-style: solid; top: 50%; left: 50%; transform: translate(-50%, -50%); } .day-ring.ring-0 { width: 34px; height: 34px; border-width: 2.5px; } .day-ring.ring-outer { width: 38px; height: 38px; border-width: 2px; } .day-ring.ring-inner { width: 28px; height: 28px; border-width: 2px; } .day-ring.ring-out3 { width: 38px; height: 38px; border-width: 2px; } .day-ring.ring-mid3 { width: 30px; height: 30px; border-width: 2px; } .day-ring.ring-in3 { width: 22px; height: 22px; border-width: 2px; } /* Calendar legend */ .cal-legend { display: flex; gap: 1.25rem; margin-top: 1.25rem; flex-wrap: wrap; justify-content: center; } .cal-legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.6rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; } .cal-legend-ring { width: 14px; height: 14px; border-radius: 50%; border-width: 2px; border-style: solid; flex-shrink: 0; } /* Calendar detail pane (right side) */ .cal-detail-pane { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; min-height: 440px; } .cal-detail-badge { display: inline-block; padding: 0.3rem 0.85rem; background: var(--orange-glow); color: var(--orange); font-size: 0.72rem; font-weight: 700; border-radius: 20px; border: 1px solid var(--orange-border); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 1.25rem; align-self: flex-start; font-family: var(--font-display); } .cal-detail-track { --stretch: 1.25; font-family: 'Michroma', var(--font-display); font-size: 1.6rem; font-weight: 400; color: var(--text-primary); margin-bottom: 0.5rem; line-height: 1.25; width: calc(100% / var(--stretch)); transform: scaleX(var(--stretch)); transform-origin: left center; } .cal-detail-info { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 0.15rem; } .cal-detail-divider { width: 60px; border-top: 1px solid var(--border-subtle); margin: 1.15rem 0; } .cal-detail-date { color: var(--orange); font-size: 1rem; font-weight: 600; margin-bottom: 0.2rem; } .cal-detail-time { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 1.25rem; } .cal-detail-link { margin-top: 1.25rem; color: var(--orange); font-weight: 600; font-size: 0.95rem; } /* Multi-event cards */ .cal-event-card { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 0.6rem; border-left: 3px solid; background: rgba(255,255,255,0.03); } .cal-event-card-name { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.15rem; } .cal-event-card-meta { font-size: 0.8rem; color: var(--text-muted); } /* ========================================================= RESULTS & STANDINGS (Homepage – Concept E) ========================================================= */ /* Shared */ .results-label { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.5rem; font-family: var(--font-display); font-weight: 700; } .results-link { margin-top: 1.75rem; color: var(--orange); font-weight: 600; font-size: 0.95rem; transition: text-decoration 0.2s; display: inline-block; } .results-link:hover { text-decoration: underline; } /* LEFT: Winner Spotlight */ .results-winner-pane { padding: 2.5rem 3rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden; } /* Trophy watermark — same treatment as the HFR mark on the Race Control sign-in page, and outlined for the same reason: a solid shape this size reads as a gray blob behind text, where an outline stays legible as a trophy and leaves the middle clear for the content sitting on top. Drawn as SVG rather than the Unicode trophy on purpose. The character renders as a full-color emoji in every modern browser, so as text it would be a small gold picture, not a silhouette. Only on the pane when it is showing a SEASON CHAMPION — see the .is-champion class, added in index.php. The pane spends most of the year as Last Race Winner, which has not won a trophy. THE DIAL: opacity below. .05 is a whisper, .12 is clearly a trophy. */ .results-winner-pane.is-champion::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 78%; height: 84%; background: url('/assets/images/trophy-watermark.svg') no-repeat center center; background-size: contain; opacity: .075; pointer-events: none; z-index: 0; } /* Content above the watermark, or the name and stats would be drawn under it. */ .results-winner-pane > * { position: relative; z-index: 1; } .results-winner-circle { width: 90px; height: 90px; flex-shrink: 0; border-radius: 50%; background: var(--orange-glow); border: 2.5px solid var(--orange-border); display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; } .results-winner-circle span { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--orange); } .results-winner-name { --stretch: 1.25; font-family: 'Michroma', var(--font-display); font-size: 1.8rem; font-weight: 400; color: var(--text-primary); margin-bottom: 0.35rem; line-height: 1.2; width: calc(100% / var(--stretch)); margin-left: auto; margin-right: auto; transform: scaleX(var(--stretch)); transform-origin: center; } .results-winner-track { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 0.2rem; font-style: italic; } .results-winner-meta { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 1.5rem; } .results-winner-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 1.5rem; } .results-badge { padding: 0.25rem 0.65rem; font-size: 0.6rem; font-weight: 700; border-radius: 12px; text-transform: uppercase; letter-spacing: 1px; border: 1px solid; } .results-winner-stats { display: flex; gap: 2rem; } .results-winner-stat { display: flex; flex-direction: column; align-items: center; } .results-stat-num { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--text-primary); line-height: 1; } .results-stat-label { font-size: 0.65rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-top: 0.2rem; } /* RIGHT: Standings Bars */ .results-standings-pane { padding: 2.5rem 3rem; display: flex; flex-direction: column; justify-content: center; } .results-standings-season { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; } .results-standings-meta { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.5rem; } .results-bars { display: flex; flex-direction: column; gap: 0.7rem; } .results-bar-row { display: flex; flex-direction: column; gap: 0.25rem; } .results-bar-header { display: flex; align-items: center; gap: 0.5rem; } .results-bar-pos { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; min-width: 1.1rem; color: var(--text-dim); } .results-bar-name { font-size: 0.8rem; font-weight: 500; color: var(--text-primary); flex: 1; } .results-bar-pts { font-size: 0.8rem; font-weight: 700; font-family: var(--font-display); } .results-bar-track { height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 3px; overflow: hidden; } .results-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; } /* ========================================================= WORLD MAP (Homepage track map section) ========================================================= */ .map-pane { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .map-label { font-size: 0.6rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1rem; } .map-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.25rem; } .map-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text-primary); } .map-zoom-out { font-size: 0.7rem; color: var(--orange); cursor: pointer; font-weight: 600; opacity: 0; transition: opacity 0.3s; pointer-events: none; background: none; border: 1px solid var(--orange-border); padding: 0.3rem 0.75rem; border-radius: 4px; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 1px; } .map-zoom-out.visible { opacity: 1; pointer-events: auto; } .map-zoom-out:hover { background: rgba(255, 102, 0, 0.1); } .map-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.25rem; } .map-container { position: relative; width: 100%; overflow: hidden; border-radius: 6px; } .map-container svg { width: 100%; height: auto; display: block; } .pin-label { font-family: var(--font-display); font-weight: 700; pointer-events: none; transition: opacity 0.3s; } .map-legend { display: flex; gap: 1.25rem; margin-top: 1rem; } .map-legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.65rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; } .legend-dot-done { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); } .legend-dot-upcoming { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255, 102, 0, 0.5); } .pin-tooltip { position: absolute; pointer-events: none; background: rgba(0, 0, 0, 0.92); border: 1px solid rgba(255, 102, 0, 0.35); border-radius: 6px; padding: 10px 14px; font-size: 0.75rem; color: #fff; white-space: nowrap; opacity: 0; transition: opacity 0.15s; z-index: 10; transform: translate(-50%, -120%); } .pin-tooltip.visible { opacity: 1; } .pin-tooltip-track { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; margin-bottom: 2px; } .pin-tooltip-meta { color: var(--text-muted); margin-bottom: 2px; } .pin-tooltip-winner { font-weight: 600; } /* Track list pane */ .tracks-pane { padding: 2.5rem 3rem; display: flex; flex-direction: column; justify-content: center; } .tracks-label { font-size: 0.6rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1rem; } .tracks-list { display: flex; flex-direction: column; max-height: 22vw; overflow-y: auto; } .track-row { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.75rem; border-radius: 4px; cursor: pointer; transition: background 0.15s; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .track-row:hover { background: rgba(255, 255, 255, 0.04); } .track-row.active { background: rgba(255, 102, 0, 0.08); } .track-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .track-dot.done { background: var(--orange); } .track-dot.upcoming { border: 1.5px solid rgba(255, 102, 0, 0.45); } .track-name { flex: 1; font-size: 0.85rem; font-weight: 500; color: var(--text-primary); } .track-country { font-size: 0.65rem; color: var(--text-dim); min-width: 30px; text-align: center; font-weight: 600; letter-spacing: 0.5px; } .track-winner { font-size: 0.7rem; color: var(--orange); font-weight: 600; min-width: 85px; text-align: right; } .track-date { font-size: 0.7rem; color: var(--text-dim); min-width: 85px; text-align: right; } .track-row.upcoming-row { opacity: 0.4; } .track-row.upcoming-row:hover, .track-row.upcoming-row.active { opacity: 0.75; } .race-pane { display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 0; margin: 0; background: transparent; height: auto; } .race-pane-link { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; color: inherit; width: 100%; height: 100%; padding: 3rem 2.5rem; background: inherit; transition: background 0.3s; } .race-pane-link:hover { background: rgba(255, 102, 0, 0.08); } .race-pane-today { background: rgba(255, 102, 0, 0.03); } .race-pane-season { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 1.75rem; } .race-pane-badge { display: inline-block; padding: 0.3rem 0.9rem; background: var(--orange-glow); color: var(--orange); font-size: 0.7rem; font-weight: 700; border-radius: 20px; border: 1px solid var(--orange-border); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1.25rem; } .race-pane-badge.today { background: linear-gradient(135deg, var(--orange) 0%, #FF4500 100%); color: #fff; border: none; } .race-pane-track { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; line-height: 1.2; } .race-pane-detail { font-size: 1rem; color: var(--text-muted); margin-bottom: 0.15rem; } .race-pane-divider { width: 60px; border-top: 1px solid var(--border-card); margin: 1.5rem auto; } .race-pane-today .race-pane-divider { border-color: var(--orange-border); } .race-pane-date { color: var(--orange); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.2rem; } .race-pane-time { color: var(--text-dim); font-size: 0.85rem; } /* Countdown Timer */ .race-countdown { display: flex; justify-content: center; align-items: center; gap: 0.6rem; margin-top: 1.4rem; padding-top: 1.15rem; border-top: 1px solid var(--border-card); width: 100%; max-width: 320px; } .countdown-unit { text-align: center; min-width: 40px; } .countdown-num { display: block; font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--orange); line-height: 1; } .countdown-label { font-size: 0.6rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-top: 0.2rem; } .countdown-sep { color: rgba(255, 255, 255, 0.12); font-size: 1.4rem; font-weight: 300; line-height: 1; margin-top: -0.6rem; } /* Up Next split layout: race info left, live countdown right. flex-wrap drops the clock below the info when the pane is too narrow. */ .updetail-split { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.5rem; width: 100%; } .updetail-main { flex: 1 1 260px; min-width: 0; } .updetail-clock { flex: 1 1 240px; min-width: 0; } .updetail-main .cal-detail-date { margin-top: 1.1rem; } .updetail-clock-label { font-size: 0.62rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0.7rem; } .updetail-clock .race-countdown { margin-top: 0; padding-top: 0; border-top: none; max-width: none; justify-content: flex-start; } .view-more { display: inline-block; margin-top: 1.5rem; color: var(--orange); font-weight: 600; transition: text-decoration 0.2s; } .view-more:hover { text-decoration: underline; } /* ========================================================= PAGE HERO (Inner pages – schedule, about, etc.) ========================================================= */ .page-hero { text-align: center; padding: 4rem 2rem 2.5rem; border-bottom: 1px solid var(--border-subtle); background: var(--bg-dark); } .page-hero h1 { font-family: var(--font-display); font-size: 2.5rem; margin: 0 0 0.5rem; } .page-hero p { color: var(--text-muted); font-size: 1.1rem; max-width: 600px; margin: 0 auto; } /* ========================================================= FOOTER ========================================================= */ .site-footer { background: var(--bg-dark); padding: 4rem 2rem 2rem; border-top: 1px solid var(--border-subtle); } .footer-grid { max-width: var(--cap); margin: 0 auto; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 3rem; margin-bottom: 3rem; } .footer-brand p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; margin-top: 1rem; } .footer-brand img { height: 40px; margin-bottom: 0.5rem; } .footer-social { display: flex; gap: 1rem; margin-top: 1.25rem; } .footer-social a { color: var(--text-dim); transition: color 0.3s; display: flex; align-items: center; } .footer-social a svg { width: 20px; height: 20px; fill: currentColor; } .footer-social a.discord:hover { color: var(--discord); } .footer-social a.twitch:hover { color: var(--twitch); } .footer-social a.youtube:hover { color: var(--youtube); } .footer-col h4 { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-primary); margin-bottom: 1rem; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 0.6rem; } .footer-col a { color: var(--text-muted); font-size: 0.9rem; transition: color 0.3s; } .footer-col a:hover { color: var(--orange); } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid var(--border-subtle); color: var(--text-dim); font-size: 0.85rem; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 968px) { .hamburger { display: flex; } .header-menu { position: fixed; top: 0; right: -100%; width: 300px; height: 100vh; background: var(--bg-dark); flex-direction: column; padding: 5rem 0 2rem; gap: 0; transition: right 0.3s ease; border-left: 1px solid var(--border-subtle); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5); overflow-y: auto; z-index: 999; } .header-menu.open { right: 0; } .close-menu { display: block; position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--text-primary); font-size: 2rem; cursor: pointer; line-height: 1; } .close-menu:hover { color: var(--orange); } .header-menu a { display: block; padding: 0.85rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 1.05rem; margin: 0; } /* Mobile Dropdown */ .nav-dropdown { display: flex; flex-direction: column; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .nav-dropdown-toggle { padding: 0.85rem 1.5rem; text-align: left; font-size: 1.05rem; } .dropdown-arrow { display: none; } .nav-dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; margin: 0; border: none; box-shadow: none; border-radius: 0; background: rgba(0, 0, 0, 0.3); display: none; padding: 0; } .nav-dropdown-menu.visible { display: block; } .nav-dropdown-menu a { padding: 0.6rem 1.5rem 0.6rem 2.5rem; font-size: 0.95rem; border-bottom: 1px solid rgba(255, 255, 255, 0.03); } .nav-dropdown-menu a:hover { padding-left: 2.5rem; } .join-header-btn { margin: 0.5rem 1.5rem; text-align: center; } /* Hero */ .hero-content { padding: 3rem 1.5rem; max-width: 100%; margin: 0; } .hero-h1 { font-size: 2.5rem; } .hero-visual { height: auto; } /* frame = picture + placard */ .hero-stats { gap: 1.5rem; flex-wrap: wrap; } /* Features */ .feature-content { padding: 2.5rem 1.5rem; margin: 0; } .feature-content:first-child, .feature-content:last-child { padding: 2.5rem 1.5rem; } .feature-visual { height: 280px; } .feature-h2 { font-size: 1.8rem; } /* Calendar */ .cal-pane { padding: 1.5rem; } .cal-detail-pane { padding: 2rem 1.5rem; } .cal-detail-track { font-size: 1.5rem; } /* Race pane */ .race-pane-link { padding: 2rem 1.5rem; } .race-pane-track { font-size: 1.5rem; } /* Results & Standings */ .results-winner-pane, .results-standings-pane { padding: 2rem 1.5rem; } .results-winner-name { font-size: 1.5rem; } .results-winner-circle { width: 80px; height: 80px; } .results-winner-circle span { font-size: 1.8rem; } .results-standings-season { font-size: 1.1rem; } /* World Map */ .map-pane { padding: 2rem 1.5rem; } .tracks-pane { padding: 2rem 1.5rem; } .tracks-list { max-height: none; overflow-y: visible; } .map-title { font-size: 1.1rem; } /* Footer */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 600px) { .hero-content { padding: 2rem 1.25rem; } .hero-h1 { font-size: 2rem; } .hero-p { font-size: 1rem; } .hero-visual { height: auto; } /* frame = picture + placard */ .hero-tagline-text { font-size: 0.9rem; } .feature-visual { height: 220px; } .feature-content { padding: 2rem 1.25rem; } .feature-content:first-child, .feature-content:last-child { padding: 2rem 1.25rem; } .hero-stats { gap: 1rem; } .hero-stat-value { font-size: 0.9rem; } .race-pane-link { padding: 1.5rem 1.25rem; } .race-pane-track { font-size: 1.3rem; } /* Results & Standings */ .results-winner-pane, .results-standings-pane { padding: 1.5rem 1.25rem; } .results-winner-circle { width: 64px; height: 64px; } .results-winner-circle span { font-size: 1.4rem; } .results-winner-name { font-size: 1.2rem; } .results-winner-stats { gap: 1.25rem; flex-wrap: wrap; justify-content: center; } .results-stat-num { font-size: 1rem; } .results-winner-track { font-size: 0.8rem; } .results-winner-meta { font-size: 0.75rem; } .results-winner-badges { gap: 0.35rem; } .results-badge { font-size: 0.55rem; padding: 0.2rem 0.5rem; } .results-bar-name { font-size: 0.75rem; } .results-bar-pts { font-size: 0.75rem; } .results-bar-pos { font-size: 0.8rem; } /* World Map */ .map-pane { padding: 1.5rem 1rem; } .tracks-pane { padding: 1.5rem 1rem; } .track-country { display: none; } .track-winner, .track-date { min-width: 70px; font-size: 0.65rem; } .footer-grid { grid-template-columns: 1fr; } .page-hero { padding: 3rem 1.25rem 2rem; } .page-hero h1 { font-size: 2rem; } } @media (max-width: 400px) { .results-winner-stats { gap: 0.75rem; } .results-stat-num { font-size: 0.9rem; } .results-stat-label { font-size: 0.55rem; } .results-winner-circle { width: 56px; height: 56px; } .results-winner-circle span { font-size: 1.2rem; } .results-winner-name { font-size: 1.1rem; } .cal-pane { padding: 1rem; } .cal-grid { max-width: 100%; } } /* ===================================================== BLOCK LABELS - one treatment ===================================================== The small labels above each block had drifted: six different sizes, four letter-spacings, two fonts, and "Run with us" was the only one not uppercased. They share one spec now - Jura, 700, uppercase, proportional letter-spacing - so UP NEXT, LAST RACE WINNER, RUN WITH US, RACE CALENDAR, SEASON STANDINGS and COME HANG OUT all read as the same kind of thing. Jura rather than Michroma deliberately: these render around 11px, where Michroma turns to mush. ===================================================== */ /* ===================================================== End of file: /assets/css/theme.css ===================================================== */ /* ========================================================================= SHRINK, DON'T STACK v1.3.0 ========================================================================= Below 900px the two-column bands stay two-column. Instead of stacking, the whole page scales down: reducing the root font size drives all 328 rem-based measurements in this file at once. This block sits at the END of the file on purpose. The 968px, 600px and 400px blocks above it also touch these elements, and in CSS the later rule wins. Moving this block earlier will silently break it. --------------------------------------------------------------------- THE DIAL: the 8px below is the smallest the base text will ever get. 8px ~50% scale at phone width - fits best, hardest to read 10px ~62% - a reasonable middle 12px ~75% - comfortable, but panes get cramped and may overflow Change 8px, save, and bump the ?v= number in index.php to see it. TO GO BACK TO STACKING: delete this whole block and add .hero-row, .feature-row { grid-template-columns: 1fr; } to the 900px block above. ---------------------------------------------------------------------- */ @media (max-width: 900px) { html { font-size: clamp(8px, 1.85vw, 16px); } /* Keep both bands side-by-side at every width. */ .hero-row { grid-template-columns: 1fr 1fr; } .feature-row { grid-template-columns: 1fr 1fr; } /* Long track and driver names have nowhere to wrap in a half-width pane, so allow breaking rather than letting them push the layout wider. */ .cal-detail-track, .results-winner-name, .results-bar-name, .results-standings-season { overflow-wrap: anywhere; } /* -------------------------------------------------------------------- The calendar decorations are sized in fixed pixels, so they would NOT shrink with the root font size and would burst out of the day cells. Restated here in rem (same visual size at full scale) so they track it. -------------------------------------------------------------------- */ .cal-day { min-height: 3.25rem; } .cal-nav { width: 1.875rem; height: 1.875rem; } .day-ring-wrap { width: 2.375rem; height: 2.375rem; } .day-ring.ring-0 { width: 2.125rem; height: 2.125rem; border-width: 0.156rem; } .day-ring.ring-outer { width: 2.375rem; height: 2.375rem; border-width: 0.125rem; } .day-ring.ring-inner { width: 1.75rem; height: 1.75rem; border-width: 0.125rem; } .day-ring.ring-out3 { width: 2.375rem; height: 2.375rem; border-width: 0.125rem; } .day-ring.ring-mid3 { width: 1.875rem; height: 1.875rem; border-width: 0.125rem; } .day-ring.ring-in3 { width: 1.375rem; height: 1.375rem; border-width: 0.125rem; } .cal-day.is-next .day-ring-wrap::after { width: 2.75rem; height: 2.75rem; } /* Winner avatar is also fixed-pixel in the 600/400 blocks above. */ .results-winner-circle { width: 5rem; height: 5rem; } .results-winner-circle span { font-size: 1.75rem; } /* -------------------------------------------------------------------- HERO PHOTO The grid stretches its items to the full row height by default, and a stretched item has a definite height, which makes the browser ignore aspect-ratio. At phone width the text column is taller than a 16:9 photo, so the box went nearly square and the image (object-fit: cover) cropped to a zoomed center slice instead of scaling down. align-self: center stops the stretch, which lets aspect-ratio set the height from the column width - so the photo now shrinks properly. 22 of the 26 hero images are exactly 16:9, so cropping is negligible. -------------------------------------------------------------------- */ .hero-visual { /* Stacked below 900px: the frame simply sizes to picture + placard, since there is no text column beside it competing for height. */ height: auto; align-self: stretch; border-width: 0.1875rem; } .hero-placard { min-height: 2.6rem; padding: 0.5rem 0.9rem; } .hero-row { min-height: 0; } }