/* /Components/App.razor.rz.scp.css */ /* Blazor's default reconnect UI is a full-page overlay; this replaces it with a small status popup pinned to the bottom-right corner, matching the site's card styling. blazor.web.js toggles the components-reconnect-* classes below (on this element and/or , depending on script version — both are covered defensively). */ #components-reconnect-modal[b-0yg517x3cp] { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; display: none; pointer-events: none; } #components-reconnect-modal.components-reconnect-show[b-0yg517x3cp], #components-reconnect-modal.components-reconnect-failed[b-0yg517x3cp], #components-reconnect-modal.components-reconnect-rejected[b-0yg517x3cp], body.components-reconnect-show #components-reconnect-modal[b-0yg517x3cp], body.components-reconnect-failed #components-reconnect-modal[b-0yg517x3cp], body.components-reconnect-rejected #components-reconnect-modal[b-0yg517x3cp] { display: block; pointer-events: auto; } .reconnect-popup[b-0yg517x3cp] { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 1rem; background-color: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 0.65rem; box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.35); font-family: Michroma, sans-serif; font-size: 0.8rem; color: var(--text-secondary); animation: reconnect-in-b-0yg517x3cp 0.25s ease; } @keyframes reconnect-in-b-0yg517x3cp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .reconnect-icon[b-0yg517x3cp] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .reconnect-icon-spin[b-0yg517x3cp], .reconnect-icon-warn[b-0yg517x3cp] { display: none !important; } #components-reconnect-modal.components-reconnect-show .reconnect-icon-spin[b-0yg517x3cp] { display: inline-flex !important; font-size: 1rem !important; width: 1rem !important; height: 1rem !important; color: var(--color-accent-A) !important; animation: reconnect-spin-b-0yg517x3cp 1s linear infinite; } #components-reconnect-modal.components-reconnect-failed .reconnect-icon-warn[b-0yg517x3cp], #components-reconnect-modal.components-reconnect-rejected .reconnect-icon-warn[b-0yg517x3cp] { display: inline-flex !important; font-size: 1rem !important; width: 1rem !important; height: 1rem !important; color: var(--color-warning) !important; } @keyframes reconnect-spin-b-0yg517x3cp { to { transform: rotate(360deg); } } .reconnect-message-show[b-0yg517x3cp], .reconnect-message-failed[b-0yg517x3cp], .reconnect-message-rejected[b-0yg517x3cp] { display: none; } #components-reconnect-modal.components-reconnect-show .reconnect-message-show[b-0yg517x3cp], #components-reconnect-modal.components-reconnect-failed .reconnect-message-failed[b-0yg517x3cp], #components-reconnect-modal.components-reconnect-rejected .reconnect-message-rejected[b-0yg517x3cp] { display: inline; } .reconnect-action[b-0yg517x3cp] { background: none; border: none; padding: 0; margin-left: 0.15rem; font-family: inherit; font-size: inherit; color: var(--color-accent-A); text-decoration: underline; cursor: pointer; } /* /Components/Feed/FeedArticleView.razor.rz.scp.css */ .article[b-94e49q3p8t] { max-width: 760px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } .article-back-link[b-94e49q3p8t] { display: inline-block; color: var(--text-muted); text-decoration: none; font-size: 0.85rem; margin-bottom: 1.5rem; transition: color 0.2s ease; } .article-back-link:hover[b-94e49q3p8t] { color: var(--color-accent-A); } .article-hero[b-94e49q3p8t] { border-radius: 14px; overflow: hidden; margin-bottom: 1.5rem; background: var(--bg-subtle); } .article-hero img[b-94e49q3p8t] { width: 100%; max-height: 420px; object-fit: cover; display: block; } .article-meta[b-94e49q3p8t] { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .article-type-badge[b-94e49q3p8t] { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.55rem; border-radius: 4px; font-family: Michroma; } .article-type-news[b-94e49q3p8t] { background: color-mix(in srgb, var(--color-info) 20%, transparent); color: var(--color-info); } .article-type-event[b-94e49q3p8t] { background: color-mix(in srgb, var(--color-accent-A) 22%, transparent); color: var(--text-highlight); } .article-date[b-94e49q3p8t] { color: var(--text-muted); font-size: 0.82rem; } .article-upcoming-badge[b-94e49q3p8t] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: 4px; background: color-mix(in srgb, var(--color-warning) 22%, transparent); color: var(--color-warning); } .article-title[b-94e49q3p8t] { font-family: Ethnocentric; font-size: 1.9rem; line-height: 1.2; margin: 0 0 0.75rem; color: var(--text-primary); } .article-summary[b-94e49q3p8t] { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.6; margin: 0 0 2rem; } /* Rendered markdown body. ::deep reaches the HTML that Markdig produced, since it isn't part of this component's own compiled markup and so wouldn't otherwise match scoped selectors. */ .article-body[b-94e49q3p8t] { color: var(--text-primary); line-height: 1.7; } .article-body[b-94e49q3p8t] h1, .article-body[b-94e49q3p8t] h2, .article-body[b-94e49q3p8t] h3 { font-family: Michroma; margin-top: 2rem; color: var(--text-primary); } .article-body[b-94e49q3p8t] a { color: var(--color-accent-A); } .article-body[b-94e49q3p8t] img { max-width: 100%; border-radius: 8px; } .article-body[b-94e49q3p8t] pre { background: var(--bg-subtle); padding: 1rem; border-radius: 8px; overflow-x: auto; } .article-body[b-94e49q3p8t] code { font-family: monospace; background: var(--bg-subtle); padding: 0.1rem 0.35rem; border-radius: 4px; } .article-body[b-94e49q3p8t] pre code { padding: 0; background: none; } .article-body[b-94e49q3p8t] blockquote { border-left: 3px solid var(--color-accent-A); margin: 1rem 0; padding: 0.25rem 0 0.25rem 1rem; color: var(--text-secondary); } .article-body[b-94e49q3p8t] table { border-collapse: collapse; width: 100%; margin: 1rem 0; } .article-body[b-94e49q3p8t] th, .article-body[b-94e49q3p8t] td { border: 1px solid var(--border-subtle); padding: 0.5rem 0.75rem; text-align: left; } /* /Components/Layout/Footer.razor.rz.scp.css */ .site-footer[b-qtwjlas1dt] { background-color: var(--bg-surface); border-top: 1px solid var(--border-subtle); padding: 2rem 1.5rem; margin-top: auto; flex-shrink: 0; z-index: 2; } .footer-inner[b-qtwjlas1dt] { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .footer-socials[b-qtwjlas1dt] { display: flex; gap: 1rem; } .footer-social[b-qtwjlas1dt] { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--text-primary); text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease; } .footer-social:hover[b-qtwjlas1dt] { background-color: var(--bg-subtle); transform: translateY(-2px); } /* ::deep reaches the SVG that the Iconify script swaps in for the placeholder span. */ .footer-social:hover[b-qtwjlas1dt] svg { color: var(--color-accent-A) !important; } .footer-copy[b-qtwjlas1dt] { color: var(--text-muted); font-size: 0.85rem; font-family: Michroma; } /* Build version — informational only, so kept small and dim; sits just under the copyright line. */ .footer-version[b-qtwjlas1dt] { margin-top: -0.5rem; color: var(--text-muted); font-size: 0.68rem; font-family: Michroma; letter-spacing: 0.03em; opacity: 0.6; } /* Deliberately subtle — an admin entry point, not a feature to advertise on the public site. Findable, not hidden: still keyboard-reachable, it just doesn't visually compete with the rest of the footer. */ .footer-admin-link[b-qtwjlas1dt] { margin-top: -0.5rem; color: var(--text-muted); font-size: 0.7rem; opacity: 0.25; text-decoration: none; transition: opacity 0.2s ease; } .footer-admin-link:hover[b-qtwjlas1dt], .footer-admin-link:focus-visible[b-qtwjlas1dt] { opacity: 0.8; } .footer-admin-link:focus-visible[b-qtwjlas1dt] { outline: 2px solid var(--text-highlight); outline-offset: 2px; } /* /Components/Layout/NavBar.razor.rz.scp.css */ /* ========================================== 1. Base Navbar Layout ========================================== */ .navbar[b-jej2jor710] { display: flex; align-items: center; justify-content: center; background-color: color-mix(in srgb, var(--bg-surface) 92%, transparent); backdrop-filter: blur(10px); color: var(--text-primary); padding: 0.75rem 1.5rem; position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 20px -8px rgb(0 0 0 / 0.25); transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease; } /* Racing-stripe accent line along the bottom edge of the navbar. */ .navbar[b-jej2jor710]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--color-accent-A), var(--color-accent-B), transparent); opacity: 0.55; } .navbar.scrolled[b-jej2jor710] { padding: 0.35rem 1.5rem; background-color: color-mix(in srgb, var(--bg-surface) 88%, transparent); backdrop-filter: blur(14px); box-shadow: 0 8px 20px -6px rgb(0 0 0 / 0.35); } .nav-container[b-jej2jor710] { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; } /* ========================================== 2. Brand Section ========================================== */ .nav-brand[b-jej2jor710] { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; text-decoration: none; color: inherit; } .nav-logo[b-jej2jor710] { height: 4em; width: 4em; background-size: contain; background-repeat: no-repeat; transition: height 0.3s ease, width 0.3s ease, filter 0.25s ease, transform 0.25s ease; } .nav-brand:hover .nav-logo[b-jej2jor710] { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color-accent-A) 70%, transparent)); transform: scale(1.05); } .navbar.scrolled .nav-logo[b-jej2jor710] { height: 2.5em; width: 2.5em; } .navbar.scrolled .nav-brand-textblock span:nth-of-type(1)[b-jej2jor710] { font-size: 1.05em; } .navbar.scrolled .nav-brand-textblock span:nth-of-type(2)[b-jej2jor710] { font-size: 0.75em; } [data-theme="light"] .nav-logo[b-jej2jor710] { background-image: url(/icons/web_dark.png); } [data-theme="dark"] .nav-logo[b-jej2jor710] { background-image: url(/icons/web_light.png); } .nav-brand-textblock[b-jej2jor710] { display:flex; align-items: center; flex-direction: column; } .nav-brand-textblock span:nth-of-type(1)[b-jej2jor710] { color: var(--text-primary); font-family: Ethnocentric; font-size: 1.2em; transition: font-size 0.3s ease; } .nav-brand-textblock span:nth-of-type(2)[b-jej2jor710] { color: var(--color-accent-A); font-family: Michroma; font-size: 0.9em; transition: font-size 0.3s ease; } /* ========================================== 3. Menu & Links (Desktop) - Bulletproofed ========================================== */ .navbar .nav-menu[b-jej2jor710] { display: flex; align-items: center; margin-left: auto; } .navbar .nav-links[b-jej2jor710] { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem; } /* Need deep here because its a Navlink component that has its own capsulated style */ [b-jej2jor710] a.nav-item { display: inline-flex; align-items: center; color: var(--text-primary); text-decoration: none; padding: 0.5rem 1.1rem; border-radius: 999px; font-family: Michroma; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } [b-jej2jor710] a.nav-item:visited { color: var(--text-primary); } [b-jej2jor710] a.nav-item:hover { color: var(--text-highlight); text-decoration: none; background-color: color-mix(in srgb, var(--color-accent-A) 16%, transparent); transform: translateY(-1px); } [b-jej2jor710] a.nav-item:active { transform: translateY(0); } /* Current-page highlight — a solid accent pill instead of a border/outline. */ [b-jej2jor710] a.nav-item.active { background-color: var(--color-accent-A); color: #04140d; font-weight: 700; box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--color-accent-A) 70%, transparent); } [b-jej2jor710] a.nav-item.active:hover { background-color: var(--color-accent-A); color: #04140d; transform: translateY(-1px); } /* Only show a focus ring for keyboard navigation — not after a plain mouse click, which is what previously looked like a leftover rectangular border on the current page. */ [b-jej2jor710] a.nav-item:focus-visible { outline: 2px solid var(--text-highlight); outline-offset: 2px; } /* ========================================== 4. Hamburger Toggle Button ========================================== */ .nav-toggle[b-jej2jor710] { display: none; margin-left: auto; flex-direction: column; justify-content: space-around; width: 2rem; height: 1.5rem; background: transparent; cursor: pointer; border: none; padding: 0; z-index: 10; } .hamburger-bar[b-jej2jor710] { width: 2rem; height: 0.25rem; background: var(--text-primary); border-radius: 10px; transition: all 0.3s linear; position: relative; transform-origin: 1px; } /* Hamburger animations mapped to your C# 'isMobileMenuOpen' state */ .hamburger-bar.open:first-child[b-jej2jor710] { transform: rotate(45deg); } .hamburger-bar.open:nth-child(2)[b-jej2jor710] { opacity: 0; } .hamburger-bar.open:last-child[b-jej2jor710] { transform: rotate(-45deg); } /* ========================================== 5. Responsive Breakpoints (Mobile layout) ========================================== */ @media (max-width: 768px) { .nav-toggle[b-jej2jor710] { display: flex; } .nav-menu[b-jej2jor710] { flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background-color: color-mix(in srgb, var(--bg-surface) 96%, transparent); backdrop-filter: blur(14px); padding: 1rem; border-bottom: 1px solid var(--border-subtle); margin-left: 0; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3); } .nav-menu.hidden[b-jej2jor710] { display: none !important; } .nav-menu.show[b-jej2jor710] { display: flex !important; } .nav-links[b-jej2jor710] { flex-direction: column; align-items: stretch; width: 100%; gap: 0.35rem; background-color: transparent; padding: 0; border-radius: 0; } [b-jej2jor710] a.nav-item { width: 100%; justify-content: center; padding: 0.75rem 0; border-radius: 0.5rem; } } /* /Components/Layout/NotFoundPage.razor.rz.scp.css */ .not-found-container[b-gw3o8q5jrz] { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 0 auto; text-align: center; gap: 0.5rem; padding: 3rem 1.5rem 5rem; } .not-found-flag[b-gw3o8q5jrz] { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: 0.75rem; background-color: var(--bg-subtle); border: none; border-radius: 50%; cursor: pointer; transition: transform 0.15s ease, background-color 0.2s ease; } .not-found-flag .iconify[b-gw3o8q5jrz] { font-size: 1.6rem !important; width: 1.6rem !important; height: 1.6rem !important; color: var(--text-secondary) !important; } .not-found-flag:hover[b-gw3o8q5jrz] { background-color: color-mix(in srgb, var(--color-accent-A) 20%, transparent); } .not-found-flag:active[b-gw3o8q5jrz] { transform: scale(0.9) rotate(-8deg); } .not-found-flag:focus-visible[b-gw3o8q5jrz] { outline: 2px solid var(--text-highlight); outline-offset: 2px; } .not-found-code[b-gw3o8q5jrz] { margin: 0; font-size: 5rem; line-height: 1; color: var(--color-accent-A); } .not-found-heading[b-gw3o8q5jrz] { margin: 0; color: var(--text-primary); } .not-found-message[b-gw3o8q5jrz] { max-width: 32rem; color: var(--text-secondary); } .not-found-cta[b-gw3o8q5jrz] { display: inline-flex; align-items: center; margin-top: 1.5rem; padding: 0.65rem 1.5rem; background-color: var(--color-accent-A); color: #04140d; font-family: Michroma; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; border-radius: 999px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .not-found-cta:hover[b-gw3o8q5jrz] { transform: translateY(-2px); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--color-accent-A) 70%, transparent); } .not-found-easter-egg[b-gw3o8q5jrz] { margin-top: 1.5rem; color: var(--text-muted); font-size: 0.8rem; animation: not-found-egg-in-b-gw3o8q5jrz 0.4s ease; } @keyframes not-found-egg-in-b-gw3o8q5jrz { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* /Components/Layout/SponsorsCarousel.razor.rz.scp.css */ .sponsors-carousel[b-cxxqa8sebz] { width: 100%; max-width: 1200px; overflow: hidden; padding: 1rem 1.5rem; border-radius: 12px; /* Fixed, theme-independent dark background (not a --bg-* token) — sponsor logos are supplied as white/light artwork, so they need a consistently dark backdrop to stay legible regardless of the light/dark toggle. */ background: #202226; -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } .sponsors-track[b-cxxqa8sebz] { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 3rem; width: max-content; animation: sponsors-scroll-b-cxxqa8sebz 40s linear infinite; } .sponsors-track:hover[b-cxxqa8sebz] { animation-play-state: paused; } .sponsors-item[b-cxxqa8sebz] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; height: 4rem; } .sponsors-item img[b-cxxqa8sebz] { display: block; height: 4rem; max-height: 4rem; width: auto; max-width: 180px; object-fit: contain; filter: grayscale(1) opacity(0.65); transition: filter 0.2s ease; } .sponsors-item:hover img[b-cxxqa8sebz], .sponsors-item:focus-visible img[b-cxxqa8sebz] { filter: grayscale(0) opacity(1); } .sponsors-item:focus-visible[b-cxxqa8sebz] { outline: 2px solid var(--text-highlight); outline-offset: 2px; border-radius: 4px; } @keyframes sponsors-scroll-b-cxxqa8sebz { from { transform: translateX(0); } to { /* Exactly half, since .sponsors-track renders the sponsor list twice back-to-back — at -50% the second copy sits exactly where the first started, so the loop snaps back with no visible seam. */ transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .sponsors-track[b-cxxqa8sebz] { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; } /* Only the animation loops the duplicate set into view — with it disabled, show just the real copy. */ .sponsors-item-clone[b-cxxqa8sebz] { display: none; } } /* /Components/Preferences/LanguageToggleComponent.razor.rz.scp.css */ .language-toggle[b-hykez9zwxb] { display: inline-flex; align-items: center; justify-content: center; width: 2.5em; height: 2.5em; background-color: var(--bg-subtle); border-radius: 50%; border: none; cursor: pointer; font-family: Michroma; font-size: 0.75em; font-weight: bold; letter-spacing: 0.03em; color: var(--text-primary); margin-left: 0.5rem; transition: background-color 0.2s ease, transform 0.2s ease; } .language-toggle:hover[b-hykez9zwxb] { background-color: color-mix(in srgb, var(--color-accent-A) 20%, transparent); transform: scale(1.08); } .language-toggle:focus-visible[b-hykez9zwxb] { outline: 2px solid var(--text-highlight); outline-offset: 2px; } /* /Components/Preferences/ThemeToggleComponent.razor.rz.scp.css */ .theme-toggle[b-oegbd8eao8] { display: inline-flex; align-items: center; justify-content: center; width: 2.5em; height: 2.5em; background-color: var(--bg-subtle); border-radius: 50%; border: none; cursor: pointer; font-size: 1.3em; margin-left: 1rem; transition: background-color 0.2s ease, transform 0.2s ease; } .theme-toggle:hover[b-oegbd8eao8] { background-color: color-mix(in srgb, var(--color-accent-A) 20%, transparent); transform: rotate(-12deg) scale(1.08); } .theme-toggle:focus-visible[b-oegbd8eao8] { outline: 2px solid var(--text-highlight); outline-offset: 2px; } /* /Components/Team/RatingBadgeList.razor.rz.scp.css */ .rating-badge-list[b-0wxnrf3xvo] { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; } .rating-badge-list-compact[b-0wxnrf3xvo] { gap: 0.4rem; } .rating-badge-compact[b-0wxnrf3xvo] { display: inline-flex; align-items: center; padding: 0.15rem 0.45rem; background-color: var(--bg-subtle); border: 1px solid transparent; border-radius: 0.35rem; font-size: 0.7rem; font-weight: bold; white-space: nowrap; cursor: default; } .rating-badge[b-0wxnrf3xvo] { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; background-color: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 0.5rem; text-align: left; } .rating-badge-license[b-0wxnrf3xvo] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.5rem; border-radius: 0.35rem; border: 1px solid transparent; font-size: 0.7rem; font-weight: bold; white-space: nowrap; } .rating-badge-license .iconify[b-0wxnrf3xvo] { font-size: 0.9rem !important; width: 0.9rem !important; height: 0.9rem !important; } .rating-badge-info[b-0wxnrf3xvo] { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.75rem; } .rating-badge-category[b-0wxnrf3xvo] { color: var(--text-primary); white-space: nowrap; } .rating-badge-sr strong[b-0wxnrf3xvo] { color: var(--color-success); } .rating-badge-ir[b-0wxnrf3xvo] { color: var(--text-secondary); } /* iRacing-style license colors */ .rating-badge-r .rating-badge-license[b-0wxnrf3xvo] { background-color: rgb(222 43 48 / 15%); border-color: rgb(222 43 48 / 40%); } .rating-badge-r .rating-badge-license[b-0wxnrf3xvo], .rating-badge-r .rating-badge-license .iconify[b-0wxnrf3xvo] { color: #de2b30 !important; } .rating-badge-d .rating-badge-license[b-0wxnrf3xvo] { background-color: rgb(252 128 20 / 15%); border-color: rgb(252 128 20 / 40%); } .rating-badge-d .rating-badge-license[b-0wxnrf3xvo], .rating-badge-d .rating-badge-license .iconify[b-0wxnrf3xvo] { color: #fc8014 !important; } .rating-badge-c .rating-badge-license[b-0wxnrf3xvo] { background-color: rgb(255 204 0 / 15%); border-color: rgb(255 204 0 / 40%); } .rating-badge-c .rating-badge-license[b-0wxnrf3xvo], .rating-badge-c .rating-badge-license .iconify[b-0wxnrf3xvo] { color: #ccaa00 !important; } .rating-badge-b .rating-badge-license[b-0wxnrf3xvo] { background-color: rgb(0 172 70 / 15%); border-color: rgb(0 172 70 / 40%); } .rating-badge-b .rating-badge-license[b-0wxnrf3xvo], .rating-badge-b .rating-badge-license .iconify[b-0wxnrf3xvo] { color: #00ac46 !important; } .rating-badge-a .rating-badge-license[b-0wxnrf3xvo] { background-color: rgb(1 83 219 / 15%); border-color: rgb(1 83 219 / 40%); } .rating-badge-a .rating-badge-license[b-0wxnrf3xvo], .rating-badge-a .rating-badge-license .iconify[b-0wxnrf3xvo] { color: #0153db !important; } .rating-badge-p .rating-badge-license[b-0wxnrf3xvo] { background-color: rgb(0 0 0 / 15%); border-color: var(--border-strong); } .rating-badge-p .rating-badge-license[b-0wxnrf3xvo], .rating-badge-p .rating-badge-license .iconify[b-0wxnrf3xvo] { color: var(--text-primary) !important; } /* Same license colors, applied directly to the compact tag itself */ .rating-badge-compact.rating-badge-r[b-0wxnrf3xvo] { background-color: rgb(222 43 48 / 15%); border-color: rgb(222 43 48 / 40%); color: #de2b30; } .rating-badge-compact.rating-badge-d[b-0wxnrf3xvo] { background-color: rgb(252 128 20 / 15%); border-color: rgb(252 128 20 / 40%); color: #fc8014; } .rating-badge-compact.rating-badge-c[b-0wxnrf3xvo] { background-color: rgb(255 204 0 / 15%); border-color: rgb(255 204 0 / 40%); color: #ccaa00; } .rating-badge-compact.rating-badge-b[b-0wxnrf3xvo] { background-color: rgb(0 172 70 / 15%); border-color: rgb(0 172 70 / 40%); color: #00ac46; } .rating-badge-compact.rating-badge-a[b-0wxnrf3xvo] { background-color: rgb(1 83 219 / 15%); border-color: rgb(1 83 219 / 40%); color: #0153db; } .rating-badge-compact.rating-badge-p[b-0wxnrf3xvo] { background-color: rgb(0 0 0 / 15%); border-color: var(--border-strong); color: var(--text-primary); } /* /Pages/Admin/Admin.razor.rz.scp.css */ .admin-container[b-b078wfdqy8] { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 0 auto; text-align: center; gap: 1rem; padding: 3rem 1.5rem 5rem; } .admin-container h1[b-b078wfdqy8] { margin: 0; color: var(--color-accent-A); } .admin-placeholder[b-b078wfdqy8] { color: var(--text-secondary); } .admin-cards[b-b078wfdqy8] { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1rem; } .admin-card[b-b078wfdqy8] { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 240px; padding: 1.75rem 1.25rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; text-decoration: none; color: inherit; transition: transform 0.2s ease, border-color 0.2s ease; } .admin-card:hover[b-b078wfdqy8] { transform: translateY(-2px); border-color: var(--color-accent-A); } .admin-card .iconify[b-b078wfdqy8] { font-size: 2rem !important; width: 2rem !important; height: 2rem !important; color: var(--color-accent-A) !important; } .admin-card-title[b-b078wfdqy8] { font-family: Michroma; font-size: 0.95rem; color: var(--text-primary); } .admin-card-desc[b-b078wfdqy8] { font-size: 0.8rem; color: var(--text-muted); } .admin-logout-form[b-b078wfdqy8] { margin-top: 1rem; } .admin-logout-button[b-b078wfdqy8] { padding: 0.6rem 1.5rem; background-color: var(--bg-subtle); border: 1px solid var(--border-subtle); color: var(--text-primary); font-family: Michroma; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .admin-logout-button:hover[b-b078wfdqy8] { border-color: var(--color-accent-A); color: var(--color-accent-A); } /* /Pages/Admin/AdminFeed.razor.rz.scp.css */ .admin-feed-container[b-95fvwn46jc] { max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } .admin-feed-header[b-95fvwn46jc] { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; } .admin-feed-back[b-95fvwn46jc] { display: inline-block; color: var(--text-muted); text-decoration: none; font-size: 0.82rem; margin-bottom: 0.5rem; transition: color 0.2s ease; } .admin-feed-back:hover[b-95fvwn46jc] { color: var(--color-accent-A); } .admin-feed-header h1[b-95fvwn46jc] { margin: 0; color: var(--text-primary); font-size: 1.5rem; } .admin-feed-actions[b-95fvwn46jc] { display: flex; gap: 0.6rem; flex-wrap: wrap; } .admin-feed-new[b-95fvwn46jc] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 1rem; border-radius: 999px; background: var(--color-accent-A); color: #06231a; text-decoration: none; font-family: Michroma; font-size: 0.78rem; transition: filter 0.2s ease; } .admin-feed-new:hover[b-95fvwn46jc] { filter: brightness(1.08); } .admin-feed-new .iconify[b-95fvwn46jc] { color: #06231a !important; } /* Dev-only affordance (see AdminFeed.razor's Env.IsDevelopment() check) — styled distinct from the "New" actions so it doesn't read as a normal content action. */ .admin-feed-seed[b-95fvwn46jc] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 1rem; border-radius: 999px; background: none; border: 1px dashed var(--border-subtle); color: var(--text-muted); font-family: Michroma; font-size: 0.78rem; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .admin-feed-seed:hover:not(:disabled)[b-95fvwn46jc] { color: var(--text-secondary); border-color: var(--text-muted); } .admin-feed-seed:disabled[b-95fvwn46jc] { opacity: 0.6; cursor: default; } .admin-feed-table[b-95fvwn46jc] { width: 100%; border-collapse: collapse; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; } .admin-feed-table th[b-95fvwn46jc], .admin-feed-table td[b-95fvwn46jc] { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-subtle); font-size: 0.85rem; } .admin-feed-table th[b-95fvwn46jc] { font-family: Michroma; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .admin-feed-table tr:last-child td[b-95fvwn46jc] { border-bottom: none; } .admin-feed-title-cell[b-95fvwn46jc] { font-weight: 600; color: var(--text-primary); } .admin-feed-col-actions[b-95fvwn46jc] { text-align: right; white-space: nowrap; } .admin-feed-status[b-95fvwn46jc] { font-size: 0.72rem; padding: 0.15rem 0.55rem; border-radius: 4px; } .admin-feed-status.published[b-95fvwn46jc] { background: color-mix(in srgb, var(--color-success) 20%, transparent); color: var(--color-success); } .admin-feed-status.draft[b-95fvwn46jc] { background: var(--bg-subtle); color: var(--text-muted); } .admin-feed-link[b-95fvwn46jc] { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 0.25rem; transition: color 0.2s ease; } .admin-feed-link:hover[b-95fvwn46jc] { color: var(--color-accent-A); } .admin-feed-delete:hover[b-95fvwn46jc] { color: var(--color-danger); } .admin-feed-confirm-delete[b-95fvwn46jc] { background: var(--color-danger); color: #fff; border: none; border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.72rem; cursor: pointer; } .admin-feed-cancel-delete[b-95fvwn46jc] { background: none; border: 1px solid var(--border-subtle); color: var(--text-secondary); border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.72rem; cursor: pointer; margin-left: 0.3rem; } .admin-feed-empty[b-95fvwn46jc] { text-align: center; color: var(--text-muted); padding: 3rem 0; } @media (max-width: 640px) { .admin-feed-table th:nth-child(3)[b-95fvwn46jc], .admin-feed-table td:nth-child(3)[b-95fvwn46jc] { display: none; } } /* /Pages/Admin/AdminFeedEditor.razor.rz.scp.css */ .editor-container[b-ki1llprubv] { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } .editor-back[b-ki1llprubv] { display: inline-block; color: var(--text-muted); text-decoration: none; font-size: 0.82rem; margin-bottom: 0.5rem; transition: color 0.2s ease; } .editor-back:hover[b-ki1llprubv] { color: var(--color-accent-A); } .editor-container h1[b-ki1llprubv] { margin: 0 0 1.5rem; color: var(--text-primary); font-size: 1.5rem; } .editor-error[b-ki1llprubv] { background: color-mix(in srgb, var(--color-danger) 15%, transparent); color: var(--color-danger); padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; } .editor-grid[b-ki1llprubv] { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .editor-field[b-ki1llprubv] { display: flex; flex-direction: column; gap: 0.35rem; } .editor-field-wide[b-ki1llprubv] { grid-column: 1 / -1; } .editor-field > span[b-ki1llprubv] { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-family: Michroma; } .editor-field input[type="text"][b-ki1llprubv], .editor-field input[type="datetime-local"][b-ki1llprubv], .editor-field select[b-ki1llprubv], .editor-field textarea[b-ki1llprubv], .editor-markdown-source[b-ki1llprubv] { width: 100%; box-sizing: border-box; padding: 0.6rem 0.75rem; background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text-primary); font-family: Michroma; font-size: 0.9rem; } .editor-field input:focus[b-ki1llprubv], .editor-field select:focus[b-ki1llprubv], .editor-field textarea:focus[b-ki1llprubv], .editor-markdown-source:focus[b-ki1llprubv] { outline: none; border-color: var(--color-accent-A); } /* Image upload */ .editor-image-row[b-ki1llprubv] { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .editor-image-preview[b-ki1llprubv] { position: relative; display: inline-flex; flex-direction: column; gap: 0.35rem; } .editor-image-preview img[b-ki1llprubv] { max-width: 260px; max-height: 150px; border-radius: 8px; border: 1px solid var(--border-subtle); object-fit: cover; } .editor-image-remove[b-ki1llprubv] { background: none; border: 1px solid var(--border-subtle); color: var(--text-secondary); border-radius: 6px; padding: 0.25rem 0.5rem; font-size: 0.72rem; cursor: pointer; } .editor-image-remove:hover[b-ki1llprubv] { border-color: var(--color-danger); color: var(--color-danger); } .editor-uploading[b-ki1llprubv] { color: var(--text-muted); font-size: 0.8rem; } /* Markdown split editor */ .editor-markdown[b-ki1llprubv] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .editor-markdown-source[b-ki1llprubv] { resize: vertical; line-height: 1.5; font-family: monospace; } .editor-markdown-preview[b-ki1llprubv] { border: 1px solid var(--border-subtle); border-radius: 8px; padding: 0.75rem 1rem; background: var(--bg-surface); overflow-y: auto; max-height: 32rem; line-height: 1.7; color: var(--text-primary); } .editor-preview-empty[b-ki1llprubv] { color: var(--text-muted); font-style: italic; } /* Style the HTML that Markdig produced inside the live preview. */ .editor-markdown-preview[b-ki1llprubv] h1, .editor-markdown-preview[b-ki1llprubv] h2, .editor-markdown-preview[b-ki1llprubv] h3 { font-family: Michroma; margin-top: 1.25rem; } .editor-markdown-preview[b-ki1llprubv] a { color: var(--color-accent-A); } .editor-markdown-preview[b-ki1llprubv] img { max-width: 100%; border-radius: 6px; } .editor-markdown-preview[b-ki1llprubv] pre { background: var(--bg-subtle); padding: 0.75rem; border-radius: 6px; overflow-x: auto; } .editor-markdown-preview[b-ki1llprubv] code { font-family: monospace; background: var(--bg-subtle); padding: 0.1rem 0.3rem; border-radius: 4px; } .editor-markdown-preview[b-ki1llprubv] pre code { padding: 0; background: none; } .editor-markdown-preview[b-ki1llprubv] blockquote { border-left: 3px solid var(--color-accent-A); margin: 0.75rem 0; padding-left: 0.75rem; color: var(--text-secondary); } .editor-markdown-preview[b-ki1llprubv] table { border-collapse: collapse; width: 100%; } .editor-markdown-preview[b-ki1llprubv] th, .editor-markdown-preview[b-ki1llprubv] td { border: 1px solid var(--border-subtle); padding: 0.4rem 0.6rem; } /* Checkbox + actions */ .editor-checkbox[b-ki1llprubv] { display: flex; align-items: center; gap: 0.5rem; } .editor-checkbox span[b-ki1llprubv] { color: var(--text-secondary); font-size: 0.9rem; } .editor-actions[b-ki1llprubv] { display: flex; gap: 0.75rem; margin-top: 0.5rem; } .editor-save[b-ki1llprubv] { padding: 0.65rem 1.75rem; background: var(--color-accent-A); color: #06231a; border: none; border-radius: 999px; font-family: Michroma; font-size: 0.8rem; cursor: pointer; transition: filter 0.2s ease; } .editor-save:hover:not(:disabled)[b-ki1llprubv] { filter: brightness(1.08); } .editor-save:disabled[b-ki1llprubv] { opacity: 0.6; cursor: default; } .editor-cancel[b-ki1llprubv] { padding: 0.65rem 1.5rem; background: none; border: 1px solid var(--border-strong); color: var(--text-secondary); border-radius: 999px; font-family: Michroma; font-size: 0.8rem; cursor: pointer; } .editor-cancel:hover[b-ki1llprubv] { border-color: var(--color-danger); color: var(--color-danger); } @media (max-width: 820px) { .editor-grid[b-ki1llprubv] { grid-template-columns: 1fr; } .editor-markdown[b-ki1llprubv] { grid-template-columns: 1fr; } } /* /Pages/Admin/AdminLiveries.razor.rz.scp.css */ .admin-liveries-container[b-2u8lik37u7] { max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } .admin-liveries-header[b-2u8lik37u7] { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .admin-liveries-back[b-2u8lik37u7] { display: inline-block; color: var(--text-muted); text-decoration: none; font-size: 0.82rem; margin-bottom: 0.5rem; transition: color 0.2s ease; } .admin-liveries-back:hover[b-2u8lik37u7] { color: var(--color-accent-A); } .admin-liveries-header h1[b-2u8lik37u7] { margin: 0; color: var(--text-primary); font-size: 1.5rem; } .admin-liveries-actions[b-2u8lik37u7] { display: flex; gap: 0.6rem; flex-wrap: wrap; } /* Dev-only affordance (see AdminLiveries.razor's Env.IsDevelopment() check) — styled distinct from the real admin actions so it doesn't read as a normal content action. */ .admin-liveries-seed[b-2u8lik37u7] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 1rem; border-radius: 999px; background: none; border: 1px dashed var(--border-subtle); color: var(--text-muted); font-family: Michroma; font-size: 0.78rem; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .admin-liveries-seed:hover:not(:disabled)[b-2u8lik37u7] { color: var(--text-secondary); border-color: var(--text-muted); } .admin-liveries-seed:disabled[b-2u8lik37u7] { opacity: 0.6; cursor: default; } .admin-liveries-catalog-summary[b-2u8lik37u7] { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 1.5rem; } .admin-liveries-new[b-2u8lik37u7] { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2rem; } .admin-liveries-new input[b-2u8lik37u7] { flex: 1 1 240px; padding: 0.55rem 0.8rem; border-radius: 8px; border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-primary); font-size: 0.85rem; } .admin-liveries-new button[b-2u8lik37u7] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 1rem; border-radius: 999px; border: none; background: var(--color-accent-A); color: #06231a; font-family: Michroma; font-size: 0.78rem; cursor: pointer; transition: filter 0.2s ease; } .admin-liveries-new button:hover:not(:disabled)[b-2u8lik37u7] { filter: brightness(1.08); } .admin-liveries-new button:disabled[b-2u8lik37u7] { opacity: 0.6; cursor: default; } .admin-liveries-new button .iconify[b-2u8lik37u7] { color: #06231a !important; } .admin-liveries-table[b-2u8lik37u7] { width: 100%; border-collapse: collapse; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; } .admin-liveries-table th[b-2u8lik37u7], .admin-liveries-table td[b-2u8lik37u7] { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-subtle); font-size: 0.85rem; } .admin-liveries-table th[b-2u8lik37u7] { font-family: Michroma; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .admin-liveries-table tr:last-child td[b-2u8lik37u7] { border-bottom: none; } .admin-liveries-label-cell[b-2u8lik37u7] { font-weight: 600; color: var(--text-primary); } .admin-liveries-col-actions[b-2u8lik37u7] { text-align: right; white-space: nowrap; } .admin-liveries-status[b-2u8lik37u7] { font-size: 0.72rem; padding: 0.15rem 0.55rem; border-radius: 4px; } .admin-liveries-status.active[b-2u8lik37u7] { background: color-mix(in srgb, var(--color-success) 20%, transparent); color: var(--color-success); } .admin-liveries-status.revoked[b-2u8lik37u7] { background: var(--bg-subtle); color: var(--text-muted); } .admin-liveries-link[b-2u8lik37u7] { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; text-decoration: none; cursor: pointer; color: var(--text-secondary); padding: 0.25rem; transition: color 0.2s ease; } .admin-liveries-link:hover[b-2u8lik37u7] { color: var(--color-accent-A); } .admin-liveries-revoke:hover[b-2u8lik37u7] { color: var(--color-danger); } .admin-liveries-confirm-revoke[b-2u8lik37u7] { background: var(--color-danger); color: #fff; border: none; border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.72rem; cursor: pointer; } .admin-liveries-cancel-revoke[b-2u8lik37u7] { background: none; border: 1px solid var(--border-subtle); color: var(--text-secondary); border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.72rem; cursor: pointer; margin-left: 0.3rem; } .admin-liveries-empty[b-2u8lik37u7] { text-align: center; color: var(--text-muted); padding: 3rem 0; } .admin-liveries-copied[b-2u8lik37u7] { margin-top: 1rem; color: var(--text-muted); font-size: 0.8rem; word-break: break-all; } .admin-liveries-section-title[b-2u8lik37u7] { margin: 2.5rem 0 1rem; color: var(--text-primary); font-size: 1.15rem; } .admin-liveries-add[b-2u8lik37u7] { display: flex; align-items: flex-end; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-surface); } .admin-liveries-add select[b-2u8lik37u7], .admin-liveries-add input[type="text"][b-2u8lik37u7] { flex: 1 1 200px; padding: 0.55rem 0.8rem; border-radius: 8px; border: 1px solid var(--border-subtle); /* "--bg-base" isn't a defined token (typo for one of the real ones below) — it silently dropped this whole background declaration, leaving the field on the browser's default white regardless of theme. --bg-page reads as a subtly recessed "well" against the --bg-surface panel these fields sit inside. */ background: var(--bg-page); color: var(--text-primary); font-size: 0.85rem; } .admin-liveries-add button[b-2u8lik37u7] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.55rem 1rem; border-radius: 999px; border: none; background: var(--color-accent-A); color: #06231a; font-family: Michroma; font-size: 0.78rem; cursor: pointer; transition: filter 0.2s ease; white-space: nowrap; } .admin-liveries-add button:hover:not(:disabled)[b-2u8lik37u7] { filter: brightness(1.08); } .admin-liveries-add button:disabled[b-2u8lik37u7] { opacity: 0.6; cursor: default; } .admin-liveries-add button .iconify[b-2u8lik37u7] { color: #06231a !important; } .admin-liveries-file-field[b-2u8lik37u7] { display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 160px; font-size: 0.75rem; color: var(--text-muted); } .admin-liveries-file-field input[type="file"][b-2u8lik37u7] { font-size: 0.78rem; color: var(--text-secondary); } .admin-liveries-error[b-2u8lik37u7] { color: var(--color-danger); font-size: 0.85rem; margin: 0 0 1rem; } .admin-liveries-catalog[b-2u8lik37u7] { display: flex; flex-direction: column; gap: 1rem; } .admin-liveries-catalog-group[b-2u8lik37u7] { padding: 1rem 1.2rem; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-surface); } .admin-liveries-catalog-group h3[b-2u8lik37u7] { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--text-primary); } .admin-liveries-catalog-list[b-2u8lik37u7] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .admin-liveries-catalog-list li[b-2u8lik37u7] { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border-subtle); font-size: 0.85rem; } .admin-liveries-catalog-list li:last-child[b-2u8lik37u7] { border-bottom: none; } .admin-liveries-catalog-name[b-2u8lik37u7] { color: var(--text-secondary); } /* /Pages/Admin/Login.razor.rz.scp.css */ .login-container[b-9s69621kxw] { display: flex; align-items: center; justify-content: center; flex: 1 0 auto; padding: 3rem 1.5rem 5rem; } .login-card[b-9s69621kxw] { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; max-width: 24rem; padding: 2rem 1.75rem; background-color: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 0.75rem; } .login-card h1[b-9s69621kxw] { margin: 0; text-align: center; color: var(--color-accent-A); font-size: 1.4rem; } .login-error[b-9s69621kxw] { margin: 0; padding: 0.6rem 0.85rem; background-color: color-mix(in srgb, var(--color-danger) 15%, transparent); border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent); border-radius: 0.5rem; color: var(--color-danger); font-size: 0.85rem; } .login-field[b-9s69621kxw] { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; color: var(--text-secondary); } .login-field input[b-9s69621kxw] { padding: 0.6rem 0.75rem; background-color: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 0.5rem; color: var(--text-primary); font-family: inherit; font-size: 0.9rem; } .login-field input:focus-visible[b-9s69621kxw] { outline: 2px solid var(--text-highlight); outline-offset: 1px; } .login-submit[b-9s69621kxw] { margin-top: 0.5rem; padding: 0.7rem 1.5rem; background-color: var(--color-accent-A); color: #04140d; border: none; border-radius: 999px; font-family: Michroma; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .login-submit:hover[b-9s69621kxw] { transform: translateY(-2px); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--color-accent-A) 70%, transparent); } /* /Pages/Feed/Feed.razor.rz.scp.css */ .feed-container[b-91rmmss2fr] { /* Full-width wrapper. The readable content width is set on .feed-layout below (viewport-proportional and centered), so this only provides vertical rhythm and a small side gutter for narrow screens — the centered header/filters line up with the centered layout regardless of this being full width. */ margin: 0 auto; padding: 2.5rem clamp(1rem, 3vw, 2.5rem) 4rem; } .feed-header[b-91rmmss2fr] { text-align: center; margin-bottom: 1.5rem; } .feed-header h1[b-91rmmss2fr] { font-family: Ethnocentric; margin: 0 0 0.5rem; color: var(--text-primary); } .feed-header span[b-91rmmss2fr] { color: var(--text-muted); } /* Filters */ .feed-filters[b-91rmmss2fr] { display: flex; justify-content: center; gap: 0.75rem; margin-bottom: 2.5rem; flex-wrap: wrap; } .feed-filter-chip[b-91rmmss2fr] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-secondary); font-family: Michroma; font-size: 0.85rem; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .feed-filter-chip:hover[b-91rmmss2fr] { border-color: var(--color-accent-A); } .feed-filter-chip.active[b-91rmmss2fr] { background: var(--color-accent-A); border-color: var(--color-accent-A); color: #06231a; } /* Layout: jump rail + timeline. The rail is first in the DOM (announced before the long list for a11y), so the narrow 160px track must come first too — otherwise the rail lands in the wide column and the cards get crammed into 160px, overflowing their fixed-width thumbnail off-screen. */ .feed-layout[b-91rmmss2fr] { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 2rem; align-items: start; /* Viewport-proportional width, centered. margin-inline:auto keeps the left/right gutters symmetric on their own, so there's no fixed margin-right to hand-tune — and because the layout no longer reaches the viewport edge, it can't run under the vertical scrollbar (the clipping you saw comes from the global body being 100vw, which is wider than the visible area by the scrollbar's width). The fraction is aspect-ratio-aware: a ~16:9 screen gives the feed 3/4 of the width; ultrawides drop to 1/2 (below) so line lengths stay sane. max-width caps it on very large panels; the <=820px block further down resets it to full width for mobile. */ width: 75vw; max-width: 2400px; margin-inline: auto; } /* Ultrawide (21:9, 32:9, …): half the viewport is plenty and keeps cards from stretching to unreadable widths. */ @media (min-aspect-ratio: 2 / 1) { .feed-layout[b-91rmmss2fr] { width: 50vw; } } .feed-timeline[b-91rmmss2fr] { display: flex; flex-direction: column; gap: 2.5rem; /* A vertical spine down the left edge, tying the period sections into one timeline. */ border-left: 2px solid var(--border-subtle); padding-left: 1.5rem; } .feed-period[b-91rmmss2fr] { scroll-margin-top: 6rem; } .feed-period-heading[b-91rmmss2fr] { font-family: Michroma; font-size: 1rem; color: var(--text-highlight); margin: 0 0 1rem; position: relative; } /* Node marker on the timeline spine. */ .feed-period-heading[b-91rmmss2fr]::before { content: ""; position: absolute; left: calc(-1.5rem - 1px - 5px); top: 0.4rem; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent-A); } .feed-card[b-91rmmss2fr] { display: flex; gap: 1.25rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; margin-bottom: 1.25rem; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .feed-card:hover[b-91rmmss2fr] { transform: translateY(-2px); border-color: var(--color-accent-A); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); } .feed-card-media[b-91rmmss2fr] { flex: 0 0 260px; max-width: 260px; background: var(--bg-subtle); } .feed-card-media img[b-91rmmss2fr] { width: 100%; height: 100%; object-fit: cover; display: block; } .feed-card-body[b-91rmmss2fr] { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .feed-card-meta[b-91rmmss2fr] { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .feed-card-date[b-91rmmss2fr] { color: var(--text-muted); font-size: 0.78rem; } .feed-upcoming-badge[b-91rmmss2fr] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: 4px; background: color-mix(in srgb, var(--color-warning) 22%, transparent); color: var(--color-warning); } .feed-card-title[b-91rmmss2fr] { margin: 0; font-size: 1.1rem; color: var(--text-primary); } .feed-card-summary[b-91rmmss2fr] { margin: 0; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; /* Keep cards uniform: clamp the blurb to three lines. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Jump rail */ .feed-timeline-rail[b-91rmmss2fr] { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 0.4rem; border-left: 1px solid var(--border-subtle); padding-left: 0.9rem; } .feed-rail-link[b-91rmmss2fr] { color: var(--text-muted); text-decoration: none; font-size: 0.78rem; padding: 0.15rem 0; transition: color 0.2s ease; } .feed-rail-link:hover[b-91rmmss2fr] { color: var(--color-accent-A); } .feed-rail-link.upcoming[b-91rmmss2fr] { color: var(--text-secondary); font-weight: 600; } .feed-loading[b-91rmmss2fr], .feed-empty[b-91rmmss2fr] { text-align: center; color: var(--text-muted); padding: 3rem 0; } @media (max-width: 820px) { .feed-layout[b-91rmmss2fr] { grid-template-columns: 1fr; /* Reset the desktop viewport-fraction — on a phone 75vw/50vw would be uselessly narrow; fill the gutter. */ width: 95%; } /* The sticky rail doesn't earn its space on narrow screens. */ .feed-timeline-rail[b-91rmmss2fr] { display: none; } .feed-card[b-91rmmss2fr] { flex-direction: column; } .feed-card-media[b-91rmmss2fr] { flex-basis: auto; max-width: none; height: 180px; } } /* /Pages/Home/Home.razor.rz.scp.css */ .landing-container[b-c21k9m9rsq] { width: 100vw; height: 92vh; overflow: hidden; } .landing-container .landing-text[b-c21k9m9rsq] { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; position: relative; margin: 20vh 20vh 0; z-index: 2; overflow: hidden; } .landing-container .landing-text h1[b-c21k9m9rsq] { color: var(--color-accent-A); } .landing-container .landing-text span[b-c21k9m9rsq] { color: var(--text-secondary); } .landing-container .landing-img[b-c21k9m9rsq] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; animation: ken-burns-b-c21k9m9rsq 18s ease-in-out infinite alternate; } .landing-container .landing-overlay[b-c21k9m9rsq] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: linear-gradient(180deg, rgb(0 0 0 / 0.15) 0%, rgb(0 0 0 / 0.55) 100%); } /* ========================================== Call to action ========================================== */ .landing-cta[b-c21k9m9rsq] { margin-top: 0.75rem; padding: 0.75rem 1.75rem; border: 2px solid var(--color-accent-A); border-radius: 999px; color: var(--color-accent-A); text-decoration: none; font-family: Michroma; font-size: 0.9rem; letter-spacing: 0.03em; transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .landing-cta:hover[b-c21k9m9rsq] { background-color: var(--color-accent-A); color: var(--bg-page); transform: translateY(-2px); box-shadow: 0 10px 20px -8px var(--color-accent-A); } /* ========================================== Scroll indicator ========================================== */ .scroll-indicator[b-c21k9m9rsq] { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--text-on-brand); font-size: 1.8rem; opacity: 0; animation: fade-in-b-c21k9m9rsq 0.6s ease forwards 1.1s; } .scroll-indicator span[b-c21k9m9rsq] { display: inline-block; animation: bounce-b-c21k9m9rsq 2s ease-in-out infinite 1.1s; } /* ========================================== Entrance animations ========================================== */ .fade-in-up[b-c21k9m9rsq] { opacity: 0; transform: translateY(24px); animation: fade-in-up-b-c21k9m9rsq 0.7s ease forwards; } .delay-1[b-c21k9m9rsq] { animation-delay: 0.15s; } .delay-2[b-c21k9m9rsq] { animation-delay: 0.4s; } .delay-3[b-c21k9m9rsq] { animation-delay: 0.65s; } .delay-4[b-c21k9m9rsq] { animation-delay: 1.1s; } @keyframes fade-in-up-b-c21k9m9rsq { to { opacity: 1; transform: translateY(0); } } @keyframes fade-in-b-c21k9m9rsq { to { opacity: 1; } } @keyframes ken-burns-b-c21k9m9rsq { from { transform: scale(1); } to { transform: scale(1.12); } } @keyframes bounce-b-c21k9m9rsq { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } @media (max-width: 768px) { .landing-container .landing-text[b-c21k9m9rsq] { margin: 12vh 1.5rem 0; } } @media (prefers-reduced-motion: reduce) { .landing-img[b-c21k9m9rsq] { animation: none; } .fade-in-up[b-c21k9m9rsq] { animation: none; opacity: 1; transform: none; } .scroll-indicator[b-c21k9m9rsq] { animation: none; opacity: 1; } .scroll-indicator span[b-c21k9m9rsq] { animation: none; transform: none; } } /* /Pages/Liveries/Liveries.razor.rz.scp.css */ .liveries-container[b-2alnrd9ndn] { max-width: 1400px; margin: 0 auto; padding: 2.5rem clamp(1rem, 3vw, 2.5rem) 4rem; } .liveries-container h1[b-2alnrd9ndn] { font-family: Ethnocentric; text-align: center; color: var(--text-primary); margin: 0 0 1.5rem; } .liveries-loading[b-2alnrd9ndn] { text-align: center; color: var(--text-muted); padding: 3rem 0; } .liveries-denied[b-2alnrd9ndn] { text-align: center; padding: 4rem 0; } .liveries-denied h1[b-2alnrd9ndn] { margin-bottom: 0.75rem; } .liveries-denied p[b-2alnrd9ndn] { color: var(--text-muted); } .liveries-toolbar[b-2alnrd9ndn] { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2rem; } .liveries-search[b-2alnrd9ndn] { flex: 1 1 280px; max-width: 400px; padding: 0.6rem 1rem; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-primary); font-size: 0.85rem; } .liveries-platform-filter[b-2alnrd9ndn] { padding: 0.6rem 1rem; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-primary); font-size: 0.85rem; } .liveries-no-results[b-2alnrd9ndn] { text-align: center; color: var(--text-muted); padding: 3rem 0; } /* Flexbox rather than grid: tiles grow/shrink between the basis and max-width below, so the last (partial) row fills the available width instead of leaving a ragged gap under a fixed column count. */ .liveries-grid[b-2alnrd9ndn] { display: flex; flex-wrap: wrap; gap: 1.5rem; } .liveries-tile[b-2alnrd9ndn] { display: flex; flex-direction: column; flex: 1 1 240px; max-width: 320px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease; } .liveries-tile:hover[b-2alnrd9ndn] { transform: translateY(-2px); border-color: var(--color-accent-A); } /* Large, front-and-center preview — the whole point is to let a user judge the livery at a glance rather than squinting at a tiny thumbnail, so this is a real hero image, not an icon. */ .liveries-tile-preview[b-2alnrd9ndn] { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-subtle); display: block; } .liveries-tile-preview-placeholder[b-2alnrd9ndn] { display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .liveries-tile-preview-placeholder .iconify[b-2alnrd9ndn] { font-size: 2.5rem !important; } .liveries-tile-body[b-2alnrd9ndn] { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1rem 1rem; } .liveries-tile-platform[b-2alnrd9ndn] { font-family: Michroma; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .liveries-tile-car[b-2alnrd9ndn] { color: var(--text-primary); font-weight: 600; word-break: break-word; } .liveries-tile-name[b-2alnrd9ndn] { color: var(--text-secondary); font-size: 0.85rem; word-break: break-word; margin-bottom: 0.5rem; } .liveries-tile-actions[b-2alnrd9ndn] { display: flex; flex-wrap: wrap; gap: 0.4rem; } .liveries-download[b-2alnrd9ndn] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: var(--color-accent-A); color: #06231a; text-decoration: none; font-size: 0.72rem; white-space: nowrap; transition: filter 0.2s ease; } .liveries-download:hover[b-2alnrd9ndn] { filter: brightness(1.08); } .liveries-download .iconify[b-2alnrd9ndn] { color: #06231a !important; } /* /Pages/Team/Team.razor.rz.scp.css */ .team-container[b-89ps2djwvs] { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; max-width: 1200px; margin: 0 auto; padding: 3rem 1.5rem 5rem; box-sizing: border-box; } .team-header[b-89ps2djwvs] { text-align: center; margin-bottom: 3rem; } .team-header h1[b-89ps2djwvs] { color: var(--color-accent-A); } .team-header span[b-89ps2djwvs] { color: var(--text-secondary); } .team-loading[b-89ps2djwvs] { text-align: center; color: var(--text-secondary); } .team-grid[b-89ps2djwvs] { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 1.5rem; flex: 1 0 auto; } .team-card[b-89ps2djwvs] { display: flex; flex-direction: column; align-items: center; gap: 1rem; /* grow/shrink around a natural width so full rows fill evenly, and an incomplete last row centers (via .team-grid's justify-content) instead of leaving dead space next to a left-aligned lone card. */ flex: 1 1 260px; max-width: 320px; padding: 1.75rem 1.25rem; background-color: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 0.75rem; text-align: center; text-decoration: none; color: inherit; cursor: pointer; opacity: 0; transform: translateY(16px); animation: team-card-in-b-89ps2djwvs 0.5s ease forwards; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .team-card:hover[b-89ps2djwvs] { transform: translateY(-6px); border-color: var(--color-accent-A); box-shadow: 0 12px 24px -12px rgb(0 0 0 / 0.35); } .team-card-identity[b-89ps2djwvs] { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .team-avatar[b-89ps2djwvs] { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; margin-bottom: 0.5rem; border: 2px solid var(--color-accent-A); transition: transform 0.25s ease; } .team-card:hover .team-avatar[b-89ps2djwvs] { transform: scale(1.06); } .team-card-identity h3[b-89ps2djwvs] { margin: 0; } .team-role[b-89ps2djwvs] { color: var(--color-accent-A); font-size: 0.85rem; } .team-since[b-89ps2djwvs] { color: var(--text-muted); font-size: 0.8rem; } .team-card-section[b-89ps2djwvs] { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border-subtle); } .team-card-heading[b-89ps2djwvs] { margin: 0; font-size: 0.7rem; font-weight: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .team-track-time[b-89ps2djwvs] { color: var(--text-secondary); font-size: 0.85rem; } .team-favorite-cars[b-89ps2djwvs] { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin: 0 auto; padding: 0; width: fit-content; max-width: 100%; list-style: none; } .team-favorite-cars li[b-89ps2djwvs] { display: grid; grid-template-columns: 1rem 1fr; align-items: center; gap: 0.4rem; color: var(--text-secondary); font-size: 0.8rem; } .team-favorite-car-name[b-89ps2djwvs] { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-trophy.iconify[b-89ps2djwvs] { color: var(--text-muted) !important; font-size: 1rem !important; width: 1rem !important; height: 1rem !important; justify-self: center; } .team-trophy-gold.iconify[b-89ps2djwvs] { color: #d4af37 !important; } .team-trophy-silver.iconify[b-89ps2djwvs] { color: #a8a8ad !important; } .team-trophy-bronze.iconify[b-89ps2djwvs] { color: #ad6f34 !important; } .team-card-hint[b-89ps2djwvs] { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.25rem; color: var(--color-accent-A); font-size: 0.8rem; transition: gap 0.2s ease; } .team-card:hover .team-card-hint[b-89ps2djwvs] { gap: 0.55rem; } .team-card-hint .iconify[b-89ps2djwvs] { font-size: 1rem !important; width: 1rem !important; height: 1rem !important; color: var(--color-accent-A) !important; } @keyframes team-card-in-b-89ps2djwvs { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .team-card[b-89ps2djwvs] { animation: none; opacity: 1; transform: none; } } /* /Pages/Team/UserProfile.razor.rz.scp.css */ .profile-container[b-6vmokx1n1u] { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; max-width: 1000px; margin: 0 auto; padding: 3rem 1.5rem 5rem; box-sizing: border-box; } .profile-not-found[b-6vmokx1n1u] { text-align: center; margin: auto; } .profile-not-found a[b-6vmokx1n1u] { color: var(--color-accent-A); } .profile-back-link[b-6vmokx1n1u] { display: inline-block; margin-bottom: 1.5rem; color: var(--text-secondary); text-decoration: none; font-size: 0.85rem; width: fit-content; } .profile-back-link:hover[b-6vmokx1n1u] { color: var(--color-accent-A); } .profile-grid[b-6vmokx1n1u] { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; grid-template-areas: "identity ratings" "identity stats" "identity cars"; gap: 1.5rem; } .profile-section[b-6vmokx1n1u] { padding: 1.5rem; background-color: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 0.75rem; } .profile-identity[b-6vmokx1n1u] { grid-area: identity; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; } .profile-identity h1[b-6vmokx1n1u] { margin: 0.5rem 0 0; } .profile-avatar[b-6vmokx1n1u] { width: 8rem; height: 8rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-accent-A); } .profile-role[b-6vmokx1n1u] { color: var(--color-accent-A); font-size: 0.95rem; } .profile-since[b-6vmokx1n1u] { color: var(--text-muted); font-size: 0.85rem; } .profile-ratings[b-6vmokx1n1u] { grid-area: ratings; } .profile-stats[b-6vmokx1n1u] { grid-area: stats; } .profile-cars[b-6vmokx1n1u] { grid-area: cars; } .profile-heading[b-6vmokx1n1u] { margin: 0 0 1rem; font-size: 0.8rem; font-weight: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .profile-empty[b-6vmokx1n1u] { color: var(--text-muted); font-size: 0.85rem; } .profile-track-time[b-6vmokx1n1u] { color: var(--text-secondary); font-size: 1rem; } .profile-car-list[b-6vmokx1n1u] { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; } .profile-car-list li[b-6vmokx1n1u] { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-size: 0.9rem; } .profile-car-rank-slot[b-6vmokx1n1u] { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; flex-shrink: 0; } .profile-car-rank[b-6vmokx1n1u] { color: var(--text-muted); text-align: center; } .profile-trophy.iconify[b-6vmokx1n1u] { color: var(--text-muted) !important; font-size: 1.15rem !important; width: 1.15rem !important; height: 1.15rem !important; } .profile-trophy-gold.iconify[b-6vmokx1n1u] { color: #d4af37 !important; } .profile-trophy-silver.iconify[b-6vmokx1n1u] { color: #a8a8ad !important; } .profile-trophy-bronze.iconify[b-6vmokx1n1u] { color: #ad6f34 !important; } @media (max-width: 640px) { .profile-grid[b-6vmokx1n1u] { grid-template-columns: 1fr; grid-template-areas: "identity" "ratings" "stats" "cars"; } }