/* ========== Base / Variables ========== */ /* Default = your current look (we’ll call it “light”) */ :root { --bg-start: #0f766e; /* teal/green TL */ --bg-end: #0284c7; /* blue BR */ --text-color: #ffffff; --muted-color: rgba(255,255,255,0.85); --tile-bg: rgba(255,255,255,0.10); --tile-hover-bg: rgba(255,255,255,0.06); --border-color: rgba(255,255,255,0.15); --sidebar-bg: rgba(255,255,255,0.10); --sidebar-width: 220px; --mobile-header-height: 4.2rem; --mobile-nav-bg: rgba(6, 14, 22, 0.62); } /* Darker variant (toggle with .theme-dark on ) */ .theme-dark { --bg-start: #0b5a54; /* deeper teal */ --bg-end: #0b3b78; /* deeper blue */ --text-color: #eef7ff; /* a touch softer than pure white */ --muted-color: rgba(238,247,255,0.75); --tile-bg: rgba(0,0,0,0.35); --tile-hover-bg: rgba(0,0,0,0.28); --border-color: rgba(255,255,255,0.12); --sidebar-bg: rgba(0,0,0,0.35); } /* ========== SEO landing pages ========== */ .seo-landing { gap: 1.2rem; padding-bottom: 2rem; } @media (min-width: 769px) { body.seo-page main.seo-landing { --seo-page-gutter: clamp(1.5rem, 2.4vw, 2.4rem); margin-left: 0; max-width: none; min-height: 100vh; overflow-x: clip; padding: 2rem var(--seo-page-gutter) 0 calc(var(--sidebar-width) + var(--seo-page-gutter)); width: 100%; } } .seo-landing-inner { display: flex; flex-direction: column; gap: 1.2rem; margin: 0 auto; max-width: min(1380px, calc(100vw - var(--sidebar-width) - 4.8rem)); min-width: 0; width: 100%; } .seo-hero, .seo-section, .seo-metric, .seo-link-row { background: radial-gradient(circle at top right, rgba(125,211,252,.10), rgba(125,211,252,0) 42%), linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,.22)), var(--tile-bg); border: 1px solid var(--border-color); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 10px 22px rgba(0,0,0,.12); } .seo-hero, .seo-section { border-radius: 12px; overflow: hidden; padding: clamp(1rem, 2vw, 1.6rem); position: relative; } .seo-kicker { color: #5ff2ba; font-size: 0.82rem; font-weight: 800; letter-spacing: 0; margin-bottom: 0.4rem; text-transform: uppercase; } .seo-hero h1 { font-size: 2.45rem; line-height: 1.08; margin-bottom: 0.7rem; max-width: none; } .seo-hero p, .seo-section p { color: var(--muted-color); line-height: 1.6; max-width: none; } .seo-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.2rem; } .seo-actions a { align-items: center; background: rgba(255,255,255,0.07); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-color); display: inline-flex; gap: .45rem; font-weight: 800; min-height: 2.4rem; padding: 0.65rem 0.9rem; text-decoration: none; } .seo-actions a span { background: currentColor; display: inline-block; flex: 0 0 1rem; height: 1rem; mask-position: center; mask-repeat: no-repeat; mask-size: contain; opacity: .9; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; width: 1rem; } .seo-action-primary span { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h10l3 6h2v6h-2a3 3 0 0 1-6 0h-4a3 3 0 0 1-6 0H2v-6h2zm.25 2l-2 4h13.5l-2-4zM7 18a1 1 0 1 0 0-2a1 1 0 0 0 0 2m10 0a1 1 0 1 0 0-2a1 1 0 0 0 0 2'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h10l3 6h2v6h-2a3 3 0 0 1-6 0h-4a3 3 0 0 1-6 0H2v-6h2zm.25 2l-2 4h13.5l-2-4zM7 18a1 1 0 1 0 0-2a1 1 0 0 0 0 2m10 0a1 1 0 1 0 0-2a1 1 0 0 0 0 2'/%3E%3C/svg%3E"); } .seo-action-search span { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 4a6.5 6.5 0 0 1 5.12 10.51l4.44 4.43l-1.41 1.42l-4.44-4.44A6.5 6.5 0 1 1 10.5 4m0 2a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 4a6.5 6.5 0 0 1 5.12 10.51l4.44 4.43l-1.41 1.42l-4.44-4.44A6.5 6.5 0 1 1 10.5 4m0 2a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9'/%3E%3C/svg%3E"); } .seo-action-fuel span { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h8a2 2 0 0 1 2 2v14h1v2H4v-2h1V5a2 2 0 0 1 1-2m1 2v5h7V5zm11 2l3 3v7a3 3 0 0 1-3 3h-1v-2h1a1 1 0 0 0 1-1v-5h-2V8z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h8a2 2 0 0 1 2 2v14h1v2H4v-2h1V5a2 2 0 0 1 1-2m1 2v5h7V5zm11 2l3 3v7a3 3 0 0 1-3 3h-1v-2h1a1 1 0 0 0 1-1v-5h-2V8z'/%3E%3C/svg%3E"); } .seo-action-journey span { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m0 2v16h10V4zm2 2h6v4H9zm0 6h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m0 2v16h10V4zm2 2h6v4H9zm0 6h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z'/%3E%3C/svg%3E"); } .seo-action-ev span { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L5 13h5l-1 9l10-13h-6z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L5 13h5l-1 9l10-13h-6z'/%3E%3C/svg%3E"); } .seo-actions a:hover { background: rgba(255,255,255,0.11); text-decoration: none; } .seo-metric-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } .seo-metric { border-radius: 8px; display: flex; flex-direction: column; gap: 0.55rem; min-height: 9rem; min-width: 0; padding: 1rem; } .seo-metric.stat-card { overflow: hidden; position: relative; } .seo-metric.stat-card::before { background: radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,0) 70%); border-radius: 50%; content: ""; height: 110px; inset: auto -22% -45% auto; pointer-events: none; position: absolute; width: 110px; } .seo-metric .metric-head { align-items: flex-start; display: flex; gap: .85rem; justify-content: space-between; margin-bottom: .15rem; min-height: 2.1rem; position: relative; z-index: 1; } .seo-metric .metric-head .section-title { font-size: .88rem; line-height: 1.14; margin-bottom: 0; max-width: calc(100% - 44px); white-space: normal; } .seo-metric .metric-icon { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(0,0,0,.14); background-position: center; background-repeat: no-repeat; background-size: 18px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); flex: 0 0 34px; height: 34px; width: 34px; } .seo-metric.stat-miles { --stat-accent: #7dd3fc; } .seo-metric.stat-years { --stat-accent: #34d399; } .seo-metric.stat-rarity { --stat-accent: #f59e0b; } .seo-metric.stat-share { --stat-accent: #60a5fa; } .seo-metric.stat-vehicles { --stat-accent: #2dd4bf; } .seo-metric.stat-tests { --stat-accent: #c084fc; } .seo-metric.stat-miles .metric-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M3 13h2l2-5h10l2 5h2v2h-2a2 2 0 1 1-4 0H9a2 2 0 1 1-4 0H3zm5-7h8l1.2 3H6.8z'/%3E%3C/svg%3E"); } .seo-metric.stat-years .metric-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1m1 11.4l4.1 2.4l-1 1.7L11 13V6h2z'/%3E%3C/svg%3E"); } .seo-metric.stat-rarity .metric-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.92' d='M12 2 22 12 12 22 2 12z'/%3E%3Cpath fill='%23000' fill-opacity='0.16' d='M12 2 16.2 12 12 22 7.8 12z'/%3E%3Cpath fill='none' stroke='white' stroke-opacity='0.38' stroke-width='1.2' d='M2 12h20M12 2l4.2 10L12 22 7.8 12z'/%3E%3C/svg%3E"); background-size: 20px 20px; } .seo-metric.stat-share .metric-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M11 2a10 10 0 1 0 10 10h-8a2 2 0 0 1-2-2zm2 0v8h8A10 10 0 0 0 13 2'/%3E%3C/svg%3E"); } .seo-metric.stat-vehicles .metric-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3s1.34 3 3 3m-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5S5 6.34 5 8s1.34 3 3 3m0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13m8 0c-.29 0-.62.02-.97.05c1.16.84 1.97 1.94 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5'/%3E%3C/svg%3E"); } .seo-metric.stat-tests .metric-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M19 3H5c-1.1 0-2 .9-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5c0-1.1-.9-2-2-2m-7 14H7v-2h5zm5-4H7v-2h10zm0-4H7V7h10z'/%3E%3C/svg%3E"); } .seo-metric-head { align-items: center; display: flex; min-height: 1.6rem; } .seo-metric .section-title, .seo-section h2 { position: relative; } .seo-metric .section-title { display: block; font-size: 0.9rem; font-weight: 800; } .seo-metric .section-title::after, .seo-section h2::after { background: linear-gradient(90deg, rgba(238,247,255,.9), rgba(238,247,255,0)); bottom: -0.45rem; content: ""; height: 1px; left: 0; position: absolute; width: 7rem; } .seo-metric strong { display: block; font-size: 2rem; line-height: 1; margin-top: 0.15rem; overflow-wrap: anywhere; } .seo-metric p { color: var(--muted-color); font-size: 0.88rem; line-height: 1.35; } .seo-metric .metric-big, .seo-metric .metric-big > div { display: flex; flex: 1; flex-direction: column; min-width: 0; position: relative; z-index: 1; } .seo-metric .metric-foot { min-height: 2.45em; } .seo-metric .metric-accent { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.06); border-radius: 999px; height: 6px; margin-top: auto; overflow: hidden; } .seo-metric .metric-accent-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--stat-accent, #7dd3fc) 76%, white 24%), var(--stat-accent, #7dd3fc)); border-radius: inherit; box-shadow: 0 0 12px color-mix(in srgb, var(--stat-accent, #7dd3fc) 38%, transparent); display: block; height: 100%; width: 62%; } .seo-metric-accent { background: rgba(238,247,255,.12); border-radius: 999px; height: 6px; margin-top: auto; overflow: hidden; width: 100%; } .seo-metric-accent i { background: linear-gradient(90deg, #ff6b5f, #ffe174, #37e8a3); display: block; height: 100%; width: 62%; } .seo-metric:nth-child(2) .seo-metric-accent i { background: #86e9ff; width: 44%; } .seo-metric:nth-child(3) .seo-metric-accent i { background: #5eead4; width: 68%; } .seo-metric:nth-child(4) .seo-metric-accent i { background: linear-gradient(90deg, #86e9ff, #37e8a3); width: 56%; } .seo-section h2 { font-size: 1.25rem; margin-bottom: 1.15rem; } .seo-link-list { display: grid; gap: 0.7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .seo-link-row { align-items: center; border-radius: 8px; color: var(--text-color); display: flex; justify-content: space-between; min-height: 3.4rem; min-width: 0; padding: 0.8rem 0.95rem; text-decoration: none; } .seo-link-row:hover { background: radial-gradient(circle at top right, rgba(52,211,153,.16), rgba(52,211,153,0) 42%), rgba(0,0,0,.32); text-decoration: none; } .seo-link-row span, .seo-link-row strong { min-width: 0; } .seo-link-row span { font-weight: 900; } .seo-link-row strong { color: var(--muted-color); font-size: 0.9rem; margin-left: 1rem; white-space: nowrap; } .site-footer.seo-footer { border-top: 1px solid rgba(255,255,255,.12); margin: 0; padding: 1.25rem 0 0; width: 100%; } .seo-footer .footer-socials { margin-right: .2rem; } .seo-footer .footer-social-link { width: 1.05rem; height: 1.05rem; } @media (max-width: 1100px) { .seo-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { body.seo-page main.seo-landing { margin-left: 0; overflow-x: hidden; padding: calc(var(--mobile-header-height) + 1rem) 1rem 2rem; width: 100%; } .seo-landing-inner { max-width: none; } .seo-hero h1 { font-size: 2rem; max-width: none; } .seo-metric-grid, .seo-link-list { grid-template-columns: 1fr; } .seo-link-row { align-items: flex-start; flex-direction: column; gap: 0.35rem; } .seo-link-row strong { margin-left: 0; } } /* ========== Reset / Typography ========== */ * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; } /* Fixed viewport gradient (not content-stretched) */ body { background: transparent; background-color: var(--bg-end); color: var(--text-color); min-height: 100vh; min-height: 100dvh; overflow-x: hidden; } html { background: transparent; overflow-x: hidden; max-width: 100%; min-height: 100vh; min-height: 100dvh; } main { max-width: 100%; min-width: 0; overflow-x: hidden; } .tile, .table-card, .table-wrap, .results-grid, .tables-grid { max-width: 100%; min-width: 0; } .results-grid > *, .tables-grid > * { min-width: 0; } @media (max-width: 768px) { html, body { min-height: 100svh; } } body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100lvh; min-height: 100vh; background: linear-gradient(135deg, var(--bg-start), var(--bg-end)); z-index: 0; pointer-events: none; } body > * { position: relative; z-index: 1; } /* ========== Layout ========== */ /* Desktop: fixed sidebar, scrolling main */ @media (min-width: 769px) { body { display: block; } aside { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); overflow-y: auto; z-index: 10; background: var(--sidebar-bg); padding: 2rem 1rem 1rem; transition: transform 0.3s ease; /* so the theme button can sit at the bottom */ display: flex; flex-direction: column; } main { margin-left: var(--sidebar-width); min-height: 100vh; padding: 2rem 2rem 0; display:flex; flex-direction:column; } } /* Mobile header */ .mobile-logo-bar { display: none; position: fixed; top: 0; left: 0; right: 0; height: var(--mobile-header-height); align-items: center; justify-content: space-between; padding: 0 1rem; border-bottom: 2px solid var(--border-color); backdrop-filter: blur(8px); background-color: var(--sidebar-bg); z-index: 2147483647; } .mobile-logo-bar .logo { margin: 0; text-align: left; } /* Sidebar content */ .logo { font-size: 1.6rem; font-weight: bold; text-align: left; margin-bottom: 1rem; color: var(--text-color); position: relative; } .logo span { font-size: 0.6rem; background: #ff5300; color: var(--text-color); padding: 2px 6px; border-radius: 8px; margin-left: 6px; vertical-align: top; position: relative; top: -2px; } nav a { display: flex; align-items: center; gap: 0.55rem; color: var(--text-color); padding: 0.75rem 0.78rem; text-decoration: none; border-radius: 8px; margin-bottom: 0.5rem; transition: background 0.2s; white-space: nowrap; } nav a:hover, nav a.active { background: rgba(0, 0, 0, 0.29); } .nav-icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; background: currentColor; opacity: .9; -webkit-mask-image: var(--nav-icon); -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-image: var(--nav-icon); mask-position: center; mask-size: contain; mask-repeat: no-repeat; } svg.nav-icon { background: none; fill: currentColor; -webkit-mask-image: none; mask-image: none; } svg.nav-icon path { fill: currentColor; } .nav-icon--overview { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5L12 4l9 7.5l-1.3 1.52L18 11.6V20H6v-8.4l-1.7 1.42zM8 10v8h3v-5h2v5h3v-8l-4-3.33z'/%3E%3C/svg%3E"); } .nav-icon--search { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 4a6.5 6.5 0 0 1 5.12 10.51l4.44 4.43l-1.41 1.42l-4.44-4.44A6.5 6.5 0 1 1 10.5 4m0 2a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9'/%3E%3C/svg%3E"); } .nav-icon--manufacturers { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V9l6 3V8l6 3V5h4v16zm2-2h3v-4H5zm5 0h3v-4h-3zm5 0h3v-4h-3z'/%3E%3C/svg%3E"); } .nav-icon--models { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h10l3 6h2v6h-2a3 3 0 0 1-6 0h-4a3 3 0 0 1-6 0H2v-6h2zm.25 2l-2 4h13.5l-2-4zM7 18a1 1 0 1 0 0-2a1 1 0 0 0 0 2m10 0a1 1 0 1 0 0-2a1 1 0 0 0 0 2'/%3E%3C/svg%3E"); } .nav-icon--trends { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19h16v2H2V3h2zm3-3l4-5l3 3l5-7l1.6 1.2l-6.3 8.8l-3.1-3.1l-3.6 4.5z'/%3E%3C/svg%3E"); } .nav-icon--tops { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4h10v3h4v3a5 5 0 0 1-5 5h-.3A5.98 5.98 0 0 1 13 17.65V20h4v2H7v-2h4v-2.35A5.98 5.98 0 0 1 8.3 15H8a5 5 0 0 1-5-5V7h4zm0 5H5v1a3 3 0 0 0 2.4 2.94A7.8 7.8 0 0 1 7 10.5zm10 1.5c0 3-2.1 5.5-5 5.5s-5-2.5-5-5.5V6h10zM17 9v1.5c0 .84-.14 1.66-.4 2.44A3 3 0 0 0 19 10V9z'/%3E%3C/svg%3E"); } .nav-icon--fuel { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h8a2 2 0 0 1 2 2v14h1v2H4v-2h1V5a2 2 0 0 1 1-2m1 2v5h7V5zm11 2l3 3v7a3 3 0 0 1-3 3h-1v-2h1a1 1 0 0 0 1-1v-5h-2V8z'/%3E%3C/svg%3E"); } .nav-icon--journey { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m0 2v16h10V4zm2 2h6v4H9zm0 6h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z'/%3E%3C/svg%3E"); } .nav-icon--blog { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h11l3 3v15H5zm2 2v14h10V8h-3V5zm2 6h6v2H9zm0 4h6v2H9z'/%3E%3C/svg%3E"); } .nav-icon--feedback { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v12H8l-4 4zm2 2v9.2L7.2 14H18V6zm3 3h6v2H9zm0 3h4v2H9z'/%3E%3C/svg%3E"); } /* ========== Tiles & Grids ========== */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } .tile { background: var(--tile-bg); border-radius: 16px; padding: 1.5rem; backdrop-filter: blur(4px); text-align: center; } .tile:hover { background: var(--tile-hover-bg); } .tile-number { font-size: 2rem; font-weight: bold; color: var(--text-color); margin-bottom: 0.5rem; } .tile-label { font-size: 0.95rem; color: var(--muted-color); } .grid-heading-wrapper { width: 100%; text-align: left; margin-bottom: 1rem; } .grid-heading { font-size: 0.8rem; font-weight: bold; color: var(--text-color); } /* Cards for tables */ .table-card { margin-top: 1.5rem; text-align: left; } .section-title { font-size: 1.1rem; font-weight: bold; margin-bottom: 0.25rem; } .status { font-size: 0.9rem; color: var(--muted-color); margin-bottom: 0.75rem; } /* Tables */ .table-wrap { overflow-x: auto; border-radius: 12px; } table.table { width: 100%; border-collapse: collapse; } .table th, .table td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--border-color); } .table th { text-align: left; font-weight: 600; } .table tbody tr:hover { background: var(--tile-hover-bg); } .num { text-align: right; font-variant-numeric: tabular-nums; } /* Column alignment */ .table th:first-child, .table td:first-child { text-align: left; } .table th:nth-child(2), .table td:nth-child(2) { text-align: right; } .table th.num, .table td.num { text-align: right; } /* Grid wrapper for multiple table cards */ .tables-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } /* ========== Theme Toggle Button ========== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--tile-bg); color: var(--text-color); cursor: pointer; user-select: none; transition: background .2s, transform .05s; text-decoration: none; /* park it at the bottom of the sidebar column */ margin-bottom: 0; } .theme-toggle:hover { background: var(--tile-hover-bg); } .theme-toggle:active { transform: translateY(1px); } .theme-toggle .icon { font-size: 16px; line-height: 0; } .sidebar-actions{ margin-top:auto; display:flex; flex-direction:column; gap:0.6rem; padding:0 0 0.35rem; } .sidebar-actions .theme-toggle, .sidebar-actions .sidebar-update{ width:100%; } .sidebar-actions .theme-toggle{ justify-content:flex-start; gap:0.55rem; padding:0 0.78rem; } /* ========== Mobile ========== */ @media (max-width: 768px) { aside { position: fixed; top: var(--mobile-header-height); bottom: 0; right: 0; left: auto; width: var(--sidebar-width); transform: translate3d(calc(100% + 2px), 0, 0); backdrop-filter: blur(10px); background: var(--mobile-nav-bg); background-color: var(--mobile-nav-bg); box-shadow: none; border-left: 1px solid var(--border-color); z-index: 2147483646; display: flex; flex-direction: column; } aside nav { padding-top: 0.35rem; } aside.show { transform: translate3d(0, 0, 0); } .mobile-logo-bar { display: flex; } .mobile-logo-bar { align-items: center; padding-top: 0; height: var(--mobile-header-height); } .mobile-logo-bar > .logo { align-self: center; margin-top: 0.2em !important; transform: none !important; padding-top: 0 !important; } .hamburger { display: flex; cursor: pointer; width: 30px; height: 22px; flex-direction: column; justify-content: space-between; margin-left: auto; align-self: center; } .hamburger span { display: block; height: 4px; background: white; border-radius: 2px; width: 100%; transition: all 0.3s ease; } .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } aside .logo { display: none; } main { padding: calc(var(--mobile-header-height) + 1rem) 1.5rem 2rem 1.5rem; margin-left: 0; } } /* Sidebar matches tile/card background in DARK mode */ .theme-dark aside { background: var(--sidebar-bg); background-color: var(--sidebar-bg); /* cover both shorthand & explicit */ backdrop-filter: blur(4px); border-right: 1px solid var(--border-color); } /* Ensure mobile slide-in sidebar also matches in dark mode */ @media (max-width: 768px) { .theme-dark aside { background: var(--mobile-nav-bg); background-color: var(--mobile-nav-bg); backdrop-filter: blur(10px); } } /* Remove the extra top margin on table grids */ .tables-grid { margin-top: 0 !important; } .logo { display: inline-block; position: relative; padding-bottom: 12px; /* creates space so it doesn’t overlap logo */ margin-left:0.75rem } .logo::after { content: ""; position: absolute; bottom: 5px; /* move it down relative to logo’s bottom */ left: 0; width: 80%; height: 1px; background: linear-gradient( to right, white 0%, white 20%, transparent 100% ); } /* --- two tiles per row (desktop), one per row (mobile) --- */ .results-grid, #extras.tables-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } @media (max-width: 1024px) { .results-grid, #extras.tables-grid { grid-template-columns: 1fr; } } /* --- search tile layout --- */ .tile.search-tile { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem 1rem; align-items: end; text-align: left; /* override .tile center */ padding: 1rem 1.25rem; } /* --- fading underline for ALL section headings in tiles --- */ .tile .section-title { position: relative; display: inline-block; padding-bottom: 8px; } .tile .section-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 80%; height: 1px; background: linear-gradient(to right, white 0%, white 40%, transparent 100%); } /*03/09/2025/ - search /* Visually hidden helper (optional for the label) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Search layout to the right of the heading on wide screens */ .search-controls { display: flex; align-items: end; justify-content: flex-end; } .tile.search-tile { grid-template-columns: 1fr auto; } /* already present */ /* Feedback */ .feedback-tile{ display:flex; flex-direction:column; gap:1rem; text-align:left; } .feedback-tile .section-title, .feedback-tile .status{ text-align:left; } .feedback-form{ display:flex; flex-direction:column; gap:.75rem; align-items:flex-end; } .feedback-text{ width:100%; min-height:160px; resize:vertical; border-radius:12px; border:1px solid var(--border-color); background:var(--tile-bg); color:var(--text-color); padding:12px; font-size:1rem; line-height:1.4; align-self:stretch; } .feedback-text::placeholder{ color: var(--muted-color); } .feedback-text:focus{ outline:none; box-shadow: 0 0 0 2px rgba(255,255,255,0.15), 0 0 0 4px rgba(255,255,255,0.06); } .feedback-form .btn{ align-self:flex-end; height:42px; border:1px solid var(--border-color); border-left:1px solid var(--border-color); border-radius:10px; padding:0 16px; } .feedback-status-ok{ color:#7ee7c1; } /* Blog */ .blog-hero{ position:relative; overflow:hidden; text-align:left; padding:1.1rem 1.25rem; min-height:180px; } .blog-hero-content{ position:relative; z-index:2; max-width:48%; } .blog-hero .status{ color:var(--text-color); font-size:1.15rem; line-height:1.35; } .blog-hero-art{ position:absolute; inset:0 0 0 auto; width:64%; background-image:url('images/blog-hero-car.jpg'); background-size:130% auto; background-repeat:no-repeat; background-position:right 58%; opacity:0.98; pointer-events:none; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 12%, rgba(0,0,0,0.16) 20%, rgba(0,0,0,0.35) 28%, rgba(0,0,0,0.62) 38%, rgba(0,0,0,0.84) 48%, rgba(0,0,0,0.96) 58%, rgba(0,0,0,1) 68%, rgba(0,0,0,1) 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 12%, rgba(0,0,0,0.16) 20%, rgba(0,0,0,0.35) 28%, rgba(0,0,0,0.62) 38%, rgba(0,0,0,0.84) 48%, rgba(0,0,0,0.96) 58%, rgba(0,0,0,1) 68%, rgba(0,0,0,1) 100%); } .blog-shell{ display:grid; grid-template-columns:minmax(0, 3fr) minmax(220px, 1fr); align-items:stretch; gap:1.25rem; width:100%; margin-left:0; margin-right:auto; } .blog-index-shell{ margin-top:1.5rem; } .blog-article-shell{ margin-top:0; } .blog-list{ display:grid; grid-template-columns:1fr; gap:1.25rem; width:100%; max-width:none; margin:0; } .blog-tile{ text-align:left; display:flex; flex-direction:column; min-height:0; padding:1.25rem; } .blog-thumb{ border-radius:12px; border:1px solid var(--border-color); background-color:rgba(0,0,0,.25); background-size:cover; background-position:center; width:100%; aspect-ratio:1.2 / 1; min-height:0; margin:0; grid-column:1; grid-row:2; } .blog-copy{ grid-column:2; display:flex; flex-direction:column; gap:.28rem; align-self:stretch; min-height:0; height:100%; } .blog-content{ display:grid; grid-template-columns:minmax(180px, 260px) minmax(0, 1fr); column-gap:1.25rem; row-gap:1.25rem; flex:1; min-width:0; } .blog-top{ display:flex; align-items:flex-start; gap:1rem; grid-column:1 / -1; } .blog-title-block{ flex:1 1 auto; min-width:0; } .blog-title-rule{ width:40%; height:1px; background: linear-gradient( to right, white 0%, white 20%, transparent 100% ); margin-top:.35rem; border-radius:1px; } .blog-title{ font-size:1.2rem; margin:0; } .blog-date{ margin-left:auto; font-size:0.8rem; color:var(--muted-color); white-space:nowrap; } .blog-snippet{ color:var(--muted-color); font-size:0.98rem; line-height:1.18; margin:0; } .blog-snippet-muted{ color:rgba(238,247,255,.7); } .blog-read-more{ display:inline-flex; align-items:center; justify-content:center; justify-self:end; align-self:end; margin-top:auto; width:108px; height:34px !important; border-radius:10px; border:1px solid var(--border-color); border-left:1px solid var(--border-color); background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)); padding:0 18px; font-size:.88rem; text-decoration:none; } .blog-tile-linkable{ cursor:pointer; transition:background .15s ease, transform .08s ease, border-color .15s ease; } .blog-tile-linkable:hover{ background:var(--tile-hover-bg); border-color:rgba(255,255,255,.20); } .blog-tile-linkable:focus-visible{ outline:2px solid rgba(255,216,78,.7); outline-offset:3px; } .blog-breadcrumb{ width:75%; max-width:none; margin:1.35rem auto 1.35rem 0; padding-left:1.5rem; box-sizing:border-box; color:var(--muted-color); display:flex; align-items:center; gap:.65rem; font-size:.95rem; line-height:1.2; } .blog-breadcrumb a{ color:var(--text-color); display:inline-flex; align-items:center; margin:0; padding:0; background:transparent; border-radius:0; text-decoration:none; font-weight:700; line-height:inherit; } .blog-breadcrumb span{ line-height:inherit; } .blog-breadcrumb a:hover{ background:transparent; text-decoration:underline; } .blog-breadcrumb a.active{ background:transparent; } .blog-article{ width:100%; max-width:none; margin:0; padding:1.5rem; text-align:left; } .blog-side-placeholder{ position:static; inset:auto; width:auto; overflow:visible; z-index:auto; min-height:100%; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted-color); font-weight:800; letter-spacing:.03em; } .blog-article-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:1.25rem; } .blog-article h1{ margin:0; font-size:clamp(1.2rem, 1.4vw, 1.55rem); line-height:1.12; } .blog-article-hero{ width:100%; min-height:260px; margin:1.25rem 0; border-radius:14px; border:1px solid var(--border-color); background-color:rgba(0,0,0,.25); background-size:cover; background-position:center; } .blog-article-intro{ color:var(--text-color); font-size:.95rem; line-height:1.38; margin:0 0 1.25rem; max-width:850px; } .blog-data-note{ color:rgba(238,247,255,.78); font-size:.84rem; line-height:1.45; margin:-.55rem 0 1.05rem; max-width:850px; } .blog-stat-strip{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.7rem; max-width:850px; margin:0 0 1.35rem; } .blog-stat{ border-top:1px solid rgba(255,255,255,.18); padding-top:.65rem; } .blog-stat strong{ display:block; color:#7ee7c1; font-size:1.2rem; line-height:1.05; } .blog-stat span{ color:var(--muted-color); display:block; font-size:.78rem; line-height:1.28; margin-top:.28rem; } .blog-article-section{ max-width:850px; margin-top:1.25rem; } .blog-article-section h2{ margin:0 0 .5rem; font-size:.94rem; } .blog-article-section p{ color:var(--muted-color); font-size:.95rem; line-height:1.4; margin:.5rem 0 0; } .blog-defect-chart{ display:flex; flex-direction:column; gap:.62rem; margin-top:.85rem; } .blog-chart-row{ align-items:center; display:grid; grid-template-columns:2rem minmax(0, 1fr); gap:.5rem .75rem; } .blog-chart-rank{ align-items:center; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); border-radius:8px; color:#fff; display:flex; font-size:.78rem; font-weight:800; height:2rem; justify-content:center; width:2rem; } .blog-chart-copy{ align-items:baseline; display:flex; gap:.75rem; justify-content:space-between; min-width:0; } .blog-chart-copy span{ color:var(--text-color); font-size:.9rem; min-width:0; } .blog-chart-copy strong{ color:rgba(238,247,255,.82); flex:0 0 auto; font-size:.78rem; font-weight:800; } .blog-chart-track{ background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.10); border-radius:999px; grid-column:2; height:9px; overflow:hidden; } .blog-chart-track span{ background:linear-gradient(90deg, #34d399, #7dd3fc 68%, #fbbf24); border-radius:inherit; display:block; height:100%; } .blog-failure-list{ display:flex; flex-direction:column; gap:0; margin-top:.45rem; } .blog-failure-item{ border-top:1px solid rgba(255,255,255,.13); display:grid; gap:.85rem; grid-template-columns:2.2rem minmax(0, 1fr); padding:1rem 0; } .blog-failure-item:last-child{ border-bottom:1px solid rgba(255,255,255,.13); } .blog-failure-rank{ align-items:center; background:rgba(126,231,193,.12); border:1px solid rgba(126,231,193,.24); border-radius:8px; color:#7ee7c1; display:flex; font-size:.85rem; font-weight:900; height:2.2rem; justify-content:center; width:2.2rem; } .blog-failure-body h3{ color:var(--text-color); font-size:1rem; line-height:1.25; margin:0; } .blog-failure-count{ color:#7dd3fc; display:block; font-size:.78rem; font-weight:800; margin-top:.2rem; } .blog-failure-body p strong{ color:var(--text-color); } .blog-checklist{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.55rem .9rem; list-style:none; margin:.8rem 0 0; padding:0; } .blog-checklist li{ color:var(--muted-color); font-size:.92rem; line-height:1.35; min-width:0; padding-left:1.45rem; position:relative; } .blog-checklist li::before{ background:#7ee7c1; border-radius:50%; box-shadow:0 0 0 4px rgba(126,231,193,.10); content:""; height:.5rem; left:.25rem; position:absolute; top:.45rem; width:.5rem; } .blog-side-note{ align-self:start; min-height:0; padding:1.15rem; text-align:left; } .blog-side-note h2{ font-size:.95rem; margin:0 0 .8rem; } .blog-side-note dl{ display:flex; flex-direction:column; gap:.75rem; margin:0; } .blog-side-note dl div{ border-top:1px solid rgba(255,255,255,.13); padding-top:.65rem; } .blog-side-note dt{ color:var(--muted-color); font-size:.78rem; margin:0; } .blog-side-note dd{ color:#7ee7c1; font-size:1.1rem; font-weight:900; margin:.15rem 0 0; } .blog-side-note p{ color:var(--muted-color); font-size:.9rem; line-height:1.45; margin:.95rem 0 0; } @media (max-width: 1200px){ .blog-shell{ grid-template-columns:1fr; width:86%; margin-left:auto; margin-right:auto; } .blog-list{ width:100%; } .blog-tile{ max-width:760px; margin-inline:auto; } .blog-breadcrumb, .blog-article{ width:86%; margin-left:auto; margin-right:auto; } .blog-breadcrumb{ max-width:760px; } .blog-shell .blog-article{ width:100%; margin:0; } .blog-side-placeholder{ min-height:180px; } .blog-side-note{ min-height:0; } } @media (max-width: 768px){ .blog-hero{ min-height:150px; } .blog-hero-content{ max-width:100%; } .blog-hero-art{ width:100%; opacity:0.28; background-position:right 60%; background-size:135% auto; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.1) 12%, rgba(0,0,0,0.2) 22%, rgba(0,0,0,0.38) 34%, rgba(0,0,0,0.6) 46%, rgba(0,0,0,0.82) 58%, rgba(0,0,0,0.94) 72%, rgba(0,0,0,0.98) 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.1) 12%, rgba(0,0,0,0.2) 22%, rgba(0,0,0,0.38) 34%, rgba(0,0,0,0.6) 46%, rgba(0,0,0,0.82) 58%, rgba(0,0,0,0.94) 72%, rgba(0,0,0,0.98) 100%); } .blog-tile{ min-height:160px; padding:1.1rem; } .blog-content{ grid-template-columns:1fr; } .blog-thumb{ width:100%; max-width:220px; margin:0; grid-column:1; grid-row:auto; } .blog-copy{ grid-column:1; gap:.3rem; } .blog-top{ flex-direction:column; gap:.2rem; grid-column:1; } .blog-date{ margin-left:0; } .blog-snippet{ line-height:1.2; } .blog-read-more{ width:100%; height:36px !important; } .blog-breadcrumb{ width:100%; flex-wrap:wrap; font-size:.88rem; padding-left:0; } .blog-shell{ width:100%; } .blog-article{ width:100%; padding:1.1rem; } .blog-article-header{ flex-direction:column; gap:.4rem; } .blog-article-hero{ min-height:190px; } .blog-article-intro{ font-size:1rem; } .blog-stat-strip, .blog-checklist{ grid-template-columns:1fr; } .blog-chart-copy{ align-items:flex-start; flex-direction:column; gap:.18rem; } .blog-chart-track{ grid-column:1 / -1; } .blog-failure-item{ grid-template-columns:1.95rem minmax(0, 1fr); } .blog-failure-rank{ border-radius:7px; height:1.95rem; width:1.95rem; } } /* Contact */ .contact-tile{ display:flex; flex-direction:column; gap:1rem; text-align:left; } .contact-form{ display:flex; flex-direction:column; gap:.75rem; align-items:flex-end; } .contact-input, .contact-textarea{ width:100%; border-radius:12px; border:1px solid var(--border-color); background:var(--tile-bg); color:var(--text-color); padding:12px; font-size:1rem; line-height:1.4; } .contact-input{ height:42px; } .contact-textarea{ min-height:160px; resize:vertical; } .contact-input::placeholder, .contact-textarea::placeholder{ color: var(--muted-color); } .contact-input:focus, .contact-textarea:focus{ outline:none; box-shadow: 0 0 0 2px rgba(255,255,255,0.15), 0 0 0 4px rgba(255,255,255,0.06); } .contact-meta{ align-self:flex-start; font-size:0.85rem; color:var(--muted-color); } .form-character-counter{ color:var(--muted-color); font-size:.82rem; font-weight:700; text-align:right; opacity:.9; } .contact-send{ align-self:flex-end; height:42px; border-radius:10px; border:1px solid var(--border-color); padding:0 16px; } .contact-status-ok{ color:#7ee7c1; } .contact-hp{ position:absolute; left:-10000px; width:1px; height:1px; opacity:0; } @media (max-width: 768px){ .contact-form{ align-items:stretch; } .contact-send{ align-self:stretch; width:100%; } } /* Treat input + button as one glassy control */ .search-group { position: relative; display: flex; align-items: center; gap: 0; /* seamless join */ height: 42px; border-radius: 12px; border: 1px solid rgba(11,20,30,.38); background: rgba(0,0,0,.12); backdrop-filter: blur(6px); box-shadow: 0 10px 24px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,0.08); overflow: hidden; /* round the inner corners */ } .search-group::before{ content:"UK"; position:absolute; left:4px; top:4px; bottom:4px; width:38px; display:flex; align-items:center; justify-content:center; border-radius:8px 0 0 8px; background:linear-gradient(180deg, #1d4ed8, #1e3a8a); color:#fff; font-family:"Segoe UI", sans-serif; font-size:.7rem; font-weight:800; letter-spacing:.08em; pointer-events:none; z-index:1; } /* Input matches tiles */ .input.reg { appearance: none; border: 0; outline: 0; height: 100%; padding: 0 14px 0 54px; min-width: 260px; color: #111111; caret-color:#111111; background: linear-gradient(180deg, #ffe36d 0%, #ffd439 52%, #f6c700 100%); font-family: "Charles Wright", "Charles Wright 2001", "Mandatory", "UKNumberPlate", "Bahnschrift SemiCondensed", "Bahnschrift Condensed", "Arial Narrow", "Liberation Sans Narrow", "Franklin Gothic Medium", "Segoe UI", sans-serif; font-size: 1.18rem; font-weight: 700; font-stretch: 95%; font-kerning: none; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .12em; line-height: 1; text-align: center; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); } .input.reg::placeholder { color: rgba(17,17,17,.72); font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .input.reg:focus::placeholder{ color: transparent; } .search-group .btn{ border-left: 1px solid rgba(17,17,17,.16); } /* Button matches theme + hover/active */ .btn { height: 100%; padding: 0 14px; border: 0; border-left: 1px solid var(--border-color); color: var(--text-color); background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)); cursor: pointer; font-weight: 600; letter-spacing: 0.2px; transition: filter .15s ease, transform .04s ease, background .15s ease; } .btn:hover { background: var(--tile-hover-bg); filter: brightness(1.05); } .btn:active { transform: translateY(1px); } /* Focus ring for the whole group */ .search-group:focus-within { box-shadow: 0 0 0 2px rgba(255,216,78,.34), 0 0 0 4px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.14); } /* Mobile: stack and fill */ @media (max-width: 768px) { .tile.search-tile { grid-template-columns: 1fr; align-items: stretch; gap: 0.75rem; } .search-controls { display: block; width: 100%; min-width: 0; } .search-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; max-width: 100%; min-width: 0; height: 44px; } .input.reg { width: 100%; min-width: 0; } /* keep the registration field inside the tile on narrow screens */ .search-group .btn { min-width: 0; white-space: nowrap; padding: 0 12px; } .feedback-form .btn{ align-self:stretch; width:100%; } } /* Optional: small “Enter to search” hint under status */ #search-status { margin-top: 0.25rem; } /*search page stuff*/ /* --- CarNerd: Search page polish ---------------------------------------- */ /* Layout */ .search-page-main { row-gap:2rem; } .search-page-main #results, .search-page-main #extras { margin-top:0 !important; } .results-grid { display:grid; gap:2rem; grid-template-columns: 1fr 1fr; align-items:start; } .results-column{ display:grid; gap:2rem; align-content:start; min-width:0; } @media (max-width:1100px){ .results-grid{ grid-template-columns:1fr; } .results-column{ display:contents; } #basic-card{ order:1; } #advanced-card{ order:2; } #emissions-card{ order:3; } .section-stack{ order:4; } } @media (max-width:768px){ .search-page-main #results { margin-top:2rem !important; } .search-page-main #extras { margin-top:2rem !important; } } .tables-grid { display:grid; gap:2rem; grid-template-columns:2fr 1fr; } @media (max-width:1100px){ .tables-grid{ grid-template-columns:1fr; } } #extras.tables-grid { gap:2rem; } .section-stack{ display:grid; gap:1.5rem; grid-template-rows:auto minmax(0, 1fr); align-content:stretch; align-items:stretch; height:100%; min-width:0; } /* Card chrome */ .search-page-main .table-card{ margin-top:0; } .tile.table-card { padding: 1rem 1.2rem; border-radius:14px; border:1px solid rgba(255,255,255,.06); box-shadow: 0 6px 18px rgba(0,0,0,.15) inset; } .search-placeholder-card{ display:flex; flex-direction:column; justify-content:flex-start; min-height:220px; } /* Section header bar */ .table-card .section-title{ margin:-0.25rem -0.25rem 0.75rem; padding:.5rem .75rem; border-radius:10px; padding-left: 0; padding-top: 0; display:inline-block; } .title-with-flag{ display:inline-flex; align-items:flex-start; gap:8px; flex-wrap:wrap; } .title-with-flag .section-title{ margin-right:0; } .section-flag{ display:inline-flex; align-items:center; justify-content:center; min-height:18px; padding:2px 6px; border-radius:8px; background:#dc2626; color:var(--text-color); font-size:.6rem; font-weight:800; letter-spacing:.08em; line-height:1; text-transform:uppercase; position:relative; top:1px; } /* Basic details table */ #basic-card .table-wrap{ margin-top:.25rem; } .basic-table{ width:100%; border-collapse:separate; border-spacing:0; } .basic-table th, .basic-table td{ padding:8px 12px; border:0; border-bottom:1px solid var(--border-color); } .basic-table th{ width:170px; text-align:left; font-weight:700; color:var(--text-color); letter-spacing:.02em; background:rgba(0,0,0,.32); } .basic-table td{ font-weight:600; color:#eaf3ff; background:rgba(255,255,255,.05); } .basic-table tbody tr:first-child th{border-top-left-radius:10px;} .basic-table tbody tr:first-child td{border-top-right-radius:10px;} .basic-table tbody tr:last-child th{border-bottom-left-radius:10px; border-bottom:1px solid var(--border-color);} .basic-table tbody tr:last-child td{border-bottom-right-radius:10px; border-bottom:1px solid var(--border-color);} .basic-table tbody tr:nth-child(odd) td{background:rgba(255,255,255,.05);} .basic-table tbody tr:nth-child(even) td{background:transparent;} #basic-card .metrics-grid{ display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0, 1fr)); } #basic-card{ min-width:0; } #basic-card .metric{ --stat-accent:#7dd3fc; position:relative; overflow:hidden; background: radial-gradient(circle at top right, rgba(255,255,255,.12), rgba(255,255,255,0) 38%), linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12)), var(--tile-bg); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; min-width:0; box-shadow:inset 0 10px 24px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.05); } #basic-card .metric::before{ content:""; position:absolute; inset:auto -22% -45% auto; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,0) 70%); pointer-events:none; } #basic-card .metric-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.85rem; margin-bottom:.45rem; } #basic-card .metric-icon{ width:32px; height:32px; border-radius:11px; flex:0 0 32px; border:1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(0,0,0,.14); background-repeat:no-repeat; background-position:center; background-size:17px 17px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } #basic-card .metric .label{ position:relative; display:inline-block; padding-bottom:7px; margin-bottom:0; color:#fff; font-size:.83rem; font-weight:700; text-transform:none; letter-spacing:.01em; line-height:1.25; } #basic-card .metric .label::after{ content:""; position:absolute; bottom:0; left:0; width:82%; height:1px; background:linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.8) 38%, rgba(255,255,255,0) 100%); } #basic-card .metric-title-with-flag{ display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap; } #basic-card .metric-flag{ display:inline-flex; align-items:center; justify-content:center; min-height:16px; padding:2px 5px; border-radius:999px; background:#dc2626; color:var(--text-color); font-size:.52rem; font-weight:800; letter-spacing:.08em; line-height:1; text-transform:uppercase; position:relative; top:1px; } #basic-card .metric .value{ font-variant-numeric:tabular-nums; font-weight:700; line-height:1.1; font-size:clamp(1.02rem, 1.9vw, 1.45rem); } #basic-card .metric .value-compact{ font-size:clamp(.92rem, 1.2vw, 1.05rem); line-height:1.25; word-break:break-word; } #basic-card .metric-accent{ margin-top:.7rem; height:6px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.06); overflow:hidden; } #basic-card .metric-accent-fill{ display:block; width:var(--pct,42%); height:100%; border-radius:inherit; background:linear-gradient(90deg, color-mix(in srgb, var(--stat-accent) 76%, white 24%), var(--stat-accent)); box-shadow:0 0 12px color-mix(in srgb, var(--stat-accent) 38%, transparent); } #basic-card .stat-bhp{--stat-accent:#7dd3fc;} #basic-card .stat-scrapped{--stat-accent:#34d399;} #basic-card .stat-noise{--stat-accent:#fb923c;} #basic-card .stat-pw{--stat-accent:#c084fc;} #basic-card .stat-bhp .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M7 6h7l3 3v6H7l-2-2H2v-2h2V8a2 2 0 0 1 2-2m3 4a2 2 0 1 0 2 2a2 2 0 0 0-2-2m8-1h2v6h-2z'/%3E%3C/svg%3E"); } #basic-card .stat-scrapped .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M5 16l1.5-4.5L9 9h6l2.5 2.5L19 16v2h-1a2 2 0 1 1-4 0H10a2 2 0 1 1-4 0H5zm3.5-5h7l-1.3-1.3H9.8zm-.5 5a1 1 0 1 0 1 1a1 1 0 0 0-1-1m8 0a1 1 0 1 0 1 1a1 1 0 0 0-1-1'/%3E%3C/svg%3E"); } #basic-card .stat-noise .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M14 3.23v17.54c0 .45-.54.67-.85.35L8.6 16H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h3.6l4.55-5.12c.31-.32.85-.1.85.35M17.5 8.5a5 5 0 0 1 0 7m2.5-10a8.5 8.5 0 0 1 0 13'/%3E%3C/svg%3E"); } #basic-card .stat-pw .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M5 19h14v2H5zm1-2V7h3v10zm5 0V4h3v13zm5 0v-6h3v6z'/%3E%3C/svg%3E"); } /* Metrics */ #advanced-card .metrics-grid{ display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } #advanced-card{ min-width:0; } #advanced-card .metric{ --stat-accent:#7dd3fc; position:relative; overflow:hidden; background: radial-gradient(circle at top right, rgba(255,255,255,.12), rgba(255,255,255,0) 38%), linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12)), var(--tile-bg); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; min-width:0; box-shadow:inset 0 10px 24px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.05); } #advanced-card .metric::before{ content:""; position:absolute; inset:auto -22% -45% auto; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,0) 70%); pointer-events:none; } #advanced-card .metric-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.85rem; margin-bottom:.45rem; } #advanced-card .metric-icon{ width:32px; height:32px; border-radius:11px; flex:0 0 32px; border:1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(0,0,0,.14); background-repeat:no-repeat; background-position:center; background-size:17px 17px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } #advanced-card .metric .label{ position:relative; display:inline-block; padding-bottom:7px; margin-bottom:0; color:#fff; font-size:.78rem; font-weight:700; text-transform:none; letter-spacing:.01em; line-height:1.25; white-space:nowrap; } #advanced-card .metric .label::after{ content:""; position:absolute; bottom:0; left:0; width:82%; height:1px; background:linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.8) 38%, rgba(255,255,255,0) 100%); } #advanced-card .metric .value{ font-variant-numeric: tabular-nums; font-weight:700; line-height:1.1; font-size: clamp(1.02rem, 1.9vw, 1.45rem); } #advanced-card .metric .value-compact{ font-size: clamp(.92rem, 1.2vw, 1.05rem); line-height:1.25; word-break:break-word; } #advanced-card .metric-foot{ margin-top:.45rem; color:var(--muted-color); font-size:.78rem; line-height:1.25; min-height:2.2em; } #advanced-card .metric-foot--band{ min-height:0; margin-top:0; margin-bottom:.45rem; color:#fff; font-size:clamp(1.02rem, 1.9vw, 1.45rem); font-weight:800; line-height:1.1; letter-spacing:.01em; } #advanced-card .metric.metric-span-2{ grid-column: span 2; } #advanced-card .metric.metric-span-full{ grid-column: 1 / -1; } #advanced-card .metric.metric-ncap{ display:flex; flex-direction:column; justify-content:center; gap:.55rem; } #advanced-card .metric-accent{ margin-top:.7rem; height:6px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.06); overflow:hidden; } #advanced-card .metric-accent-fill{ display:block; width:var(--pct,42%); height:100%; border-radius:inherit; background:linear-gradient(90deg, color-mix(in srgb, var(--stat-accent) 76%, white 24%), var(--stat-accent)); box-shadow:0 0 12px color-mix(in srgb, var(--stat-accent) 38%, transparent); } #advanced-card .stat-tests{--stat-accent:#7dd3fc;} #advanced-card .stat-passes{--stat-accent:#34d399;} #advanced-card .stat-fails{--stat-accent:#fb7185;} #advanced-card .stat-health{--stat-accent:#2dd4bf;} #advanced-card .stat-result{--stat-accent:#60a5fa;} #advanced-card .stat-result.is-pass{--stat-accent:#34d399;} #advanced-card .stat-result.is-fail{--stat-accent:#ff2f4f;} #advanced-card .stat-result .value.is-pass{ color:#34d399; text-shadow:0 0 12px rgba(52,211,153,.24); } #advanced-card .stat-result .value.is-fail{ color:#ff2f4f; text-shadow:0 0 12px rgba(255,47,79,.24); } #advanced-card .stat-expiry{--stat-accent:#c084fc;} #advanced-card .stat-current{--stat-accent:#7dd3fc;} #advanced-card .stat-odo{--stat-accent:#22d3ee;} #advanced-card .stat-reliability{--stat-accent:#f59e0b;} #advanced-card .stat-rarity{--stat-accent:#f59e0b;} #advanced-card .stat-miles{--stat-accent:#7dd3fc;} #advanced-card .stat-years{--stat-accent:#34d399;} #advanced-card .stat-ncap{--stat-accent:#f4d03f;} #advanced-card .stat-rarity{ display:flex; flex-direction:column; container: search-rarity / inline-size; } #advanced-card .stat-rarity .metric-head{ margin-bottom:.12rem; } #advanced-card .stat-rarity .rarity-subline{ display:flex; align-items:center; justify-content:space-between; gap:.45rem; width:100%; min-width:0; margin-top:0; } #advanced-card .stat-rarity .metric-big--rarity{ display:block; flex:1 1 auto; min-width:0; width:100%; margin-top:.42rem; } #advanced-card .stat-rarity .rarity-helper{ min-width:0; margin-top:0; margin-bottom:0; color:#34d399; font-size:.45rem; font-weight:700; line-height:1.1; letter-spacing:0; white-space:nowrap; } #advanced-card .stat-rarity .rarity-stack{ display:grid; gap:.22rem; width:100%; } #advanced-card .stat-rarity .rarity-stack--inline{ display:flex; align-items:baseline; gap:.24rem; gap:clamp(.14rem, 2.1cqw, .32rem); width:100%; color:#fff; font-size:1.22rem; font-weight:800; line-height:1.1; letter-spacing:0; flex-wrap:nowrap; } #advanced-card .stat-rarity .rarity-stack--search{ display:flex; flex-direction:row; align-items:baseline; gap:.22rem; gap:clamp(.14rem, 2.1cqw, .32rem); } #advanced-card .stat-rarity .metric-foot--band{ flex:0 0 auto; align-self:center; min-height:0; margin-top:0; margin-bottom:0; padding:.18rem .42rem .2rem; border:1px solid rgba(245,158,11,.32); border-radius:999px; background:rgba(245,158,11,.12); color:#fde68a; font-size:.62rem; line-height:1; letter-spacing:0; font-weight:800; } #advanced-card .stat-tests .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M19 3H5c-1.1 0-2 .9-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5c0-1.1-.9-2-2-2m-7 14H7v-2h5zm5-4H7v-2h10zm0-4H7V7h10z'/%3E%3C/svg%3E"); } #advanced-card .stat-passes .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M9.55 18.54L3.8 12.79l1.41-1.41l4.34 4.34l9.19-9.19l1.41 1.41z'/%3E%3C/svg%3E"); } #advanced-card .stat-fails .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z'/%3E%3C/svg%3E"); } #advanced-card .stat-health .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M13 2v10h8A10 10 0 1 1 11 2z'/%3E%3C/svg%3E"); } #advanced-card .stat-result .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M19 3H5c-1.1 0-2 .9-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5c0-1.1-.9-2-2-2m-7 14H7v-2h5zm5-4H7v-2h10zm0-4H7V7h10z'/%3E%3C/svg%3E"); } #advanced-card .stat-expiry .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 15H5V9h14z'/%3E%3C/svg%3E"); } #advanced-card .stat-current .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m2 4v2h6V7zm0 4v2h5v-2zm0 4v2h4v-2zm10.7-5.7l-3.95 3.95l-1.45-1.45l-1.4 1.4l2.85 2.85l5.35-5.35z'/%3E%3C/svg%3E"); } #advanced-card .stat-odo .metric-icon, #advanced-card .stat-miles .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M12 4a9 9 0 0 0-9 9h2a7 7 0 1 1 14 0h2a9 9 0 0 0-9-9m0 2.5A6.5 6.5 0 0 0 5.5 13h2a4.5 4.5 0 1 1 9 0h2A6.5 6.5 0 0 0 12 6.5m-1 5.5l-3.2 3.2l1.4 1.4L12.4 13H17v-2h-5.6zM4 18h16v2H4z'/%3E%3C/svg%3E"); } #advanced-card .stat-reliability .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='m12 2l7 4v6c0 5-3.4 9.74-7 11c-3.6-1.26-7-6-7-11V6zm-1 13l5-5l-1.41-1.41L11 12.17l-1.59-1.58L8 12z'/%3E%3C/svg%3E"); } #advanced-card .stat-rarity .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M12 2l7 7l-7 13L5 9z'/%3E%3C/svg%3E"); } #advanced-card .stat-years .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1m1 11.4l4.1 2.4l-1 1.7L11 13V6h2z'/%3E%3C/svg%3E"); } #advanced-card .stat-ncap .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='m12 17.27l6.18 3.73l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E"); } #advanced-card .ncap-stars{ display:flex; align-items:center; gap:.28rem; flex-wrap:wrap; margin-top:auto; } #advanced-card .ncap-star{ color:#f4d03f; font-size:1.45rem; line-height:1; text-shadow:0 0 10px rgba(244,208,63,.22); } #advanced-card .stat-rarity .rarity-pill-value{ display:block; font-weight:inherit; line-height:inherit; letter-spacing:0; } #advanced-card .stat-rarity .rarity-pill-value--count{ font-size:1.08rem; font-size:clamp(.92rem, 12cqw, 1.36rem); white-space:nowrap; font-variant-numeric:tabular-nums; } #advanced-card .stat-rarity .rarity-pill-inline-label{ display:block; color:#34d399; font-size:.55rem; font-size:clamp(.46rem, 5.2cqw, .7rem); font-weight:700; line-height:1; letter-spacing:0; text-transform:none; white-space:nowrap; } #advanced-card .stat-rarity .metric-accent{ margin-top:.58rem; } @container search-rarity (max-width: 190px){ #advanced-card .stat-rarity{ padding:10px 12px; } #advanced-card .stat-rarity .metric-head{ gap:.45rem; } #advanced-card .stat-rarity .metric-head .label{ font-size:.72rem; } #advanced-card .stat-rarity .metric-icon{ width:28px; height:28px; flex-basis:28px; border-radius:9px; background-size:15px 15px; } #advanced-card .stat-rarity .rarity-subline{ gap:.18rem; } #advanced-card .stat-rarity .rarity-helper{ font-size:.38rem; } #advanced-card .stat-rarity .metric-foot--band{ padding:.15rem .32rem .17rem; font-size:.5rem; } #advanced-card .stat-rarity .metric-big--rarity{ margin-top:.36rem; } #advanced-card .stat-rarity .metric-accent{ margin-top:.48rem; } } #emissions-card .metrics-grid{ display:grid; gap:12px; grid-template-columns:repeat(4, minmax(0, 1fr)); } #emissions-card{ min-width:0; } #emissions-card .metric{ --stat-accent:#7dd3fc; position:relative; overflow:hidden; background: radial-gradient(circle at top right, rgba(255,255,255,.12), rgba(255,255,255,0) 38%), linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12)), var(--tile-bg); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; min-width:0; box-shadow:inset 0 10px 24px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.05); } #emissions-card .metric::before{ content:""; position:absolute; inset:auto -22% -45% auto; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,0) 70%); pointer-events:none; } #emissions-card .metric-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.85rem; margin-bottom:.45rem; } #emissions-card .metric-icon{ width:32px; height:32px; border-radius:11px; flex:0 0 32px; border:1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(0,0,0,.14); background-repeat:no-repeat; background-position:center; background-size:17px 17px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } #emissions-card .metric .label{ position:relative; display:inline-block; padding-bottom:7px; margin-bottom:0; color:#fff; font-size:.83rem; font-weight:700; text-transform:none; letter-spacing:.01em; line-height:1.25; } #emissions-card .metric .label::after{ content:""; position:absolute; bottom:0; left:0; width:82%; height:1px; background:linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.8) 38%, rgba(255,255,255,0) 100%); } #emissions-card .metric .value{ font-variant-numeric:tabular-nums; font-weight:700; line-height:1.1; font-size:clamp(1.02rem, 1.9vw, 1.45rem); } #emissions-card .metric .value-compact{ font-size:clamp(.92rem, 1.2vw, 1.05rem); line-height:1.25; word-break:break-word; } #emissions-card .metric.metric-span-full{ grid-column:1 / -1; } #emissions-card .metric-accent{ margin-top:.7rem; height:6px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.06); overflow:hidden; } #emissions-card .metric-accent-fill{ display:block; width:var(--pct,42%); height:100%; border-radius:inherit; background:linear-gradient(90deg, color-mix(in srgb, var(--stat-accent) 76%, white 24%), var(--stat-accent)); box-shadow:0 0 12px color-mix(in srgb, var(--stat-accent) 38%, transparent); } #emissions-card .tax-supplement-control{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:.55rem; margin-top:.65rem; padding-top:.58rem; border-top:1px solid rgba(255,255,255,.08); } #emissions-card .tax-supplement-control[hidden]{ display:none !important; } #emissions-card .tax-supplement-label{ min-width:0; color:rgba(255,255,255,.78); font-size:.7rem; font-weight:700; line-height:1.18; } #emissions-card .tax-switch{ position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; width:74px; min-width:74px; height:28px; padding:2px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } #emissions-card .tax-switch-input{ position:absolute; inset:0; z-index:4; margin:0; opacity:0; cursor:pointer; } #emissions-card .tax-switch-input:disabled{ cursor:not-allowed; } #emissions-card .tax-switch-thumb{ position:absolute; top:2px; left:2px; z-index:1; width:calc(50% - 2px); height:calc(100% - 4px); border-radius:999px; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.24); transition:transform .18s ease; } #emissions-card .tax-switch-input:checked ~ .tax-switch-thumb{ transform:translateX(100%); } #emissions-card .tax-switch-text{ position:relative; z-index:2; color:rgba(255,255,255,.72); font-size:.64rem; font-weight:900; text-align:center; line-height:1; pointer-events:none; } #emissions-card .tax-switch-input:not(:checked) ~ .tax-switch-text--no, #emissions-card .tax-switch-input:checked ~ .tax-switch-text--yes{ color:#111827; } #emissions-card .tax-switch:focus-within{ box-shadow:0 0 0 2px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.06); } #emissions-card .stat-value{--stat-accent:#f4d03f;} #emissions-card .stat-co2{--stat-accent:#fb923c;} #emissions-card .stat-euro{--stat-accent:#7dd3fc;} #emissions-card .stat-taxed{--stat-accent:#34d399;} #emissions-card .stat-tax{--stat-accent:#f59e0b;} #emissions-card .stat-ulez{--stat-accent:#34d399;} #emissions-card .stat-lez{--stat-accent:#ff0000;grid-column:span 3;} #emissions-card .stat-value .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M21 11l-8.5 8.5a2.1 2.1 0 0 1-3 0L2.5 12.5a2.1 2.1 0 0 1 0-3L11 1h8a2 2 0 0 1 2 2zM17.5 7A1.5 1.5 0 1 0 16 5.5A1.5 1.5 0 0 0 17.5 7'/%3E%3C/svg%3E"); } #emissions-card .stat-co2 .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='white' stroke-opacity='0.92' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M3 10.5h5.2'/%3E%3Cpath d='M2 13.5h6.4'/%3E%3Cpath d='M4 16.5h4.8'/%3E%3Cpath d='M10 16.8h6.4c2 0 3.6-1.5 3.6-3.5c0-1.6-1.1-3-2.6-3.4c-.3-2.1-2.1-3.7-4.3-3.7c-1.9 0-3.6 1.2-4.1 2.9c-1.7.4-2.9 1.9-2.9 3.7c0 2.2 1.7 4 3.9 4Z'/%3E%3C/g%3E%3C/svg%3E"); } #emissions-card .stat-euro .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2m4.5 13.2a4.9 4.9 0 0 1-3.8 1.8c-2.7 0-4.8-1.9-5.2-4.5H6v-1.1h1.4v-.3c0-.2 0-.5.1-.7H6V9.3h1.8C8.5 6.8 10.4 5 13 5a5 5 0 0 1 3.4 1.3l-1 1.2a3.4 3.4 0 0 0-2.4-.9c-1.6 0-2.9 1-3.4 2.7h4.5v1.1H9.4a5 5 0 0 0-.1.7v.3H14v1.1H9.5c.4 1.6 1.8 2.7 3.5 2.7a3.6 3.6 0 0 0 2.7-1.2z'/%3E%3C/svg%3E"); } #emissions-card .stat-tax .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M3 6h18v12H3zm3 2a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h12a2 2 0 0 1 2-2v-4a2 2 0 0 1-2-2zm6 1.25c1.66 0 2.75 1.1 2.75 2.75s-1.09 2.75-2.75 2.75S9.25 13.65 9.25 12S10.34 9.25 12 9.25'/%3E%3C/svg%3E"); } #emissions-card .stat-taxed .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M17 3H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2m-.41 5.59L11 14.17l-3.09-3.08L9.33 9.67L11 11.34l4.17-4.17z'/%3E%3C/svg%3E"); } #emissions-card .stat-ulez .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M12 2l3.2 4.2h-2.1l3.1 4.1h-2.1l3.4 4.7H13v4h-2v-4H6.5l3.4-4.7H7.8l3.1-4.1H8.8z'/%3E%3C/svg%3E"); } #emissions-card .stat-lez .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M12 2l3.2 4.2h-2.1l3.1 4.1h-2.1l3.4 4.7H13v4h-2v-4H6.5l3.4-4.7H7.8l3.1-4.1H8.8z'/%3E%3C/svg%3E"); } .zone-result{ display:inline-flex; align-items:center; gap:.38rem; max-width:100%; min-width:0; white-space:nowrap; } .zone-result--spread{ display:flex; justify-content:normal; gap:.32rem; width:100%; container-type:inline-size; } .zone-result-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .zone-result-icon{ flex:0 1 auto; min-width:0; text-align:right; white-space:nowrap; } .zone-result--spread .zone-result-label{ flex:0 1 auto; font-size:clamp(.68rem, 9cqw, .95rem); } .zone-result--spread .zone-result-icon{ margin-left:auto; font-size:clamp(.58rem, 7.4cqw, .95rem); } .zone-icon{ font-weight:900; line-height:1; text-shadow:0 0 10px currentColor; } .zone-icon--ok{color:#34d399;} .zone-icon--bad{color:#ff2f4f;} .zone-icon--unknown{color:var(--muted-color);} .status-value.is-good{ color:#34d399; text-shadow:0 0 12px rgba(52,211,153,.24); } .status-value.is-bad{ color:#ff2f4f; text-shadow:0 0 12px rgba(255,47,79,.24); } .status-value.is-warning{ color:#fbbf24; text-shadow:0 0 12px rgba(251,191,36,.24); } .zone-list{ display:flex; flex-direction:column; gap:.34rem; width:100%; font-size:.82rem; line-height:1.18; } .zone-row{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:.45rem; align-items:start; } .zone-row-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:normal; color:rgba(255,255,255,.9); } .zone-row-result{ font-weight:900; white-space:nowrap; text-align:right; } .zone-row-result--ok{color:#34d399;} .zone-row-result--bad{color:#ff2f4f;} .zone-row-result--unknown{color:var(--muted-color);} #emissions-card .valuation-scale{ position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.85rem; margin-top:.9rem; padding-top:.15rem; } #emissions-card .valuation-scale::before{ content:""; position:absolute; left:10%; right:10%; top:16px; height:3px; border-radius:999px; background:linear-gradient(90deg, #34d399 0%, #f4d03f 50%, #ef4444 100%); opacity:.95; } #emissions-card .valuation-point{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center; } #emissions-card .valuation-pin{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:999px; border:1px solid rgba(255,255,255,.18); color:#fff; font-size:.88rem; font-weight:800; box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08); } #emissions-card .valuation-best .valuation-pin{ background:linear-gradient(180deg, rgba(52,211,153,.9), rgba(16,185,129,.9)); } #emissions-card .valuation-avg .valuation-pin{ background:linear-gradient(180deg, rgba(244,208,63,.92), rgba(217,119,6,.88)); } #emissions-card .valuation-worst .valuation-pin{ background:linear-gradient(180deg, rgba(239,68,68,.92), rgba(220,38,38,.92)); } #emissions-card .valuation-name{ color:var(--muted-color); font-size:.75rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; } #emissions-card .valuation-price{ color:var(--text-color); font-size:clamp(.94rem, 1.2vw, 1.08rem); font-weight:800; font-variant-numeric:tabular-nums; } #ncap-card .section-title::after{ width:56%; } #insurance-card .section-title::after{ width:56%; } #insurance-card .insurance-grid{ display:grid; gap:12px; grid-template-columns:repeat(3, minmax(0, 1fr)); margin-top:.5rem; } #insurance-card .insurance-placeholder{ display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background: radial-gradient(circle at top right, rgba(255,255,255,.10), rgba(255,255,255,0) 38%), linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12)), var(--tile-bg); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; min-width:0; box-shadow:inset 0 10px 24px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.05); } #insurance-card .insurance-placeholder::before{ content:"Placeholder"; color:var(--text-color); font-size:clamp(1rem, 1.1vw, 1.18rem); font-weight:800; letter-spacing:.04em; line-height:1.1; text-align:center; } #insurance-card .insurance-placeholder > *{ display:none !important; } #insurance-card .metric-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.85rem; margin-bottom:.45rem; } #insurance-card .metric .label{ position:relative; display:inline-block; padding-bottom:7px; margin-bottom:0; color:#fff; font-size:.83rem; font-weight:700; line-height:1.25; } #insurance-card .metric .label::after{ content:""; position:absolute; bottom:0; left:0; width:82%; height:1px; background:linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.8) 38%, rgba(255,255,255,0) 100%); } #insurance-card .metric .value{ font-variant-numeric:tabular-nums; font-weight:700; line-height:1.1; font-size:clamp(1.02rem, 1.9vw, 1.45rem); } #insurance-card .metric-accent{ margin-top:.7rem; height:6px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.06); overflow:hidden; } #insurance-card .metric-accent-fill{ display:block; width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg, color-mix(in srgb, var(--stat-accent) 76%, white 24%), var(--stat-accent)); } #ncap-card .metrics-grid{ display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0, 1fr)); } #ncap-card .metrics-grid[hidden]{ display:none !important; } #ncap-card.is-empty .metrics-grid{ display:none; } #ncap-card{ min-width:0; display:flex; flex-direction:column; min-height:0; } #ncap-card .metric{ --stat-accent:#f4d03f; position:relative; overflow:hidden; background: radial-gradient(circle at top right, rgba(255,255,255,.12), rgba(255,255,255,0) 38%), linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12)), var(--tile-bg); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; min-width:0; box-shadow:inset 0 10px 24px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.05); } #ncap-card .metric::before{ content:""; position:absolute; inset:auto -22% -45% auto; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,0) 70%); pointer-events:none; } #ncap-card .metric-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.85rem; margin-bottom:.45rem; } #ncap-card .metric-icon{ width:32px; height:32px; border-radius:11px; flex:0 0 32px; border:1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(0,0,0,.14); background-repeat:no-repeat; background-position:center; background-size:17px 17px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } #ncap-card .metric .label{ position:relative; display:inline-block; padding-bottom:7px; margin-bottom:0; color:#fff; font-size:.83rem; font-weight:700; text-transform:none; letter-spacing:.01em; line-height:1.25; } #ncap-card .metric .label::after{ content:""; position:absolute; bottom:0; left:0; width:82%; height:1px; background:linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.8) 38%, rgba(255,255,255,0) 100%); } #ncap-card .metric .value{ font-variant-numeric:tabular-nums; font-weight:700; line-height:1.1; font-size:clamp(1.02rem, 1.9vw, 1.45rem); } #ncap-card .metric.metric-span-full{ grid-column:1 / -1; } #ncap-card .metric-accent{ margin-top:.7rem; height:6px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.06); overflow:hidden; } #ncap-card .metric-accent-fill{ display:block; width:var(--pct,42%); height:100%; border-radius:inherit; background:linear-gradient(90deg, color-mix(in srgb, var(--stat-accent) 76%, white 24%), var(--stat-accent)); box-shadow:0 0 12px color-mix(in srgb, var(--stat-accent) 38%, transparent); } #ncap-card .stat-rating{--stat-accent:#f4d03f;} #ncap-card .stat-adult{--stat-accent:#34d399;} #ncap-card .stat-children{--stat-accent:#7dd3fc;} #ncap-card .stat-pedestrian{--stat-accent:#fb923c;} #ncap-card .stat-systems{--stat-accent:#c084fc;} #ncap-card .stat-rating .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='m12 17.27l6.18 3.73l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E"); } #ncap-card .stat-adult .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M12 12a3 3 0 1 0-3-3a3 3 0 0 0 3 3m-5 8v-1c0-2.67 3.33-4 5-4s5 1.33 5 4v1z'/%3E%3C/svg%3E"); } #ncap-card .stat-children .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M12 11.5a2.5 2.5 0 1 0-2.5-2.5a2.5 2.5 0 0 0 2.5 2.5M8 20v-1c0-2.14 2.67-3.2 4-3.2s4 1.06 4 3.2v1zm7.5-7.5a1.5 1.5 0 1 0-1.5-1.5a1.5 1.5 0 0 0 1.5 1.5'/%3E%3C/svg%3E"); } #ncap-card .stat-pedestrian .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M13.5 5.5a2 2 0 1 0-2-2a2 2 0 0 0 2 2M9.8 22l1.1-5l-2.3-2.3a2 2 0 0 1-.5-2l1.2-4.2a2 2 0 0 1 1.9-1.5h1.8a2 2 0 0 1 1.7.9l1.3 2l2.5 1.4l-1 1.7l-3-1.6l-.9-1.3l-.7 2.5l1.8 1.8a2 2 0 0 1 .5 1.8L14 22h-2l.8-4.6l-1.5-1.5l-.8 3.4z'/%3E%3C/svg%3E"); } #ncap-card .stat-systems .metric-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='m12 2l7 4v6c0 5-3.4 9.74-7 11c-3.6-1.26-7-6-7-11V6zm-1 13l5-5l-1.41-1.41L11 12.17l-1.59-1.58L8 12z'/%3E%3C/svg%3E"); } #ncap-card .ncap-stars{ display:flex; align-items:center; gap:.28rem; flex-wrap:wrap; margin-top:.55rem; } #ncap-card .ncap-star{ color:#f4d03f; font-size:1.45rem; line-height:1; text-shadow:0 0 10px rgba(244,208,63,.22); } #ncap-card .ncap-star.is-empty{ color:rgba(255,255,255,.2); text-shadow:none; } #ncap-card .ncap-empty{ display:flex; align-items:center; justify-content:center; flex:1 1 auto; min-height:clamp(120px, 16vw, 260px); padding:1.25rem 1rem; color:#fff; font-size:clamp(1.1rem, 1.9vw, 1.55rem); font-weight:700; line-height:1.35; text-align:center; } #ncap-card .ncap-empty[hidden]{ display:none !important; } #ncap-card.is-empty{ display:flex; height:100%; } @media (min-width: 1500px){ #advanced-card .metrics-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } #ncap-card .metrics-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } #advanced-card .stat-rarity.metric-span-2{ grid-column: span 2; grid-row: span 2; } #advanced-card .stat-miles.metric-span-2, #advanced-card .stat-years.metric-span-2{ grid-column: span 2; } } @media (min-width: 821px) and (max-width: 1499px){ #advanced-card .stat-rarity.metric-span-2{ grid-column: span 1; grid-row: span 2; } #advanced-card .stat-miles.metric-span-2, #advanced-card .stat-years.metric-span-2{ grid-column: span 1; } } @media (max-width: 820px){ #advanced-card .stat-rarity.metric-span-2{ grid-column: span 1; grid-row: auto; } #advanced-card .metric.metric-span-2, #advanced-card .metric.metric-span-full{ grid-column: span 1; } #ncap-card .metric.metric-span-full{ grid-column: span 1; } #emissions-card .metrics-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } #emissions-card .metric.metric-span-full{ grid-column: 1 / -1; } #emissions-card .stat-lez{ grid-column:span 2; } } @media (max-width: 560px){ #advanced-card .metrics-grid{ grid-template-columns: 1fr; } #emissions-card .metrics-grid{ grid-template-columns: 1fr; } #emissions-card .stat-lez{ grid-column:span 1; } #insurance-card .insurance-grid{ grid-template-columns: 1fr; } #ncap-card .metrics-grid{ grid-template-columns: 1fr; } #emissions-card .valuation-scale{ gap:.55rem; } #emissions-card .valuation-scale::before{ left:8%; right:8%; } #emissions-card .valuation-price{ font-size:.88rem; } } /* Health bar */ #advanced-card .health{ margin-top:.35rem; } #advanced-card .health .bar{ height:10px; border-radius:999px; overflow:hidden; background: rgba(255,255,255,.08); } #advanced-card .health .fill{ height:100%; width:100%; transform-origin:left center; transform:scaleX(var(--health)); /* set in JS 0..1 */ background: linear-gradient(90deg,#ff4d4d 0%, #ffd166 50%, #06d6a0 100%); } .reliability-score-card{ cursor:pointer; transition:transform .15s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; } .reliability-score-line{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-width:0; } .reliability-more-pill{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-height:26px; padding:0 .62rem; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.035)); color:rgba(255,255,255,.78); font-size:.72rem; font-weight:850; letter-spacing:.03em; line-height:1; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; } .reliability-score-card:hover{ transform:translateY(-1px); border-color:rgba(52,211,153,.5); background: radial-gradient(circle at top right, rgba(52,211,153,.17), rgba(52,211,153,0) 42%), linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12)), var(--tile-bg); box-shadow:0 0 0 1px rgba(52,211,153,.22),0 0 24px rgba(52,211,153,.14),inset 0 10px 24px rgba(0,0,0,.14); } .reliability-score-card:hover .reliability-more-pill{ color:#dfffee; border-color:rgba(52,211,153,.54); background:linear-gradient(135deg,rgba(52,211,153,.28),rgba(45,212,191,.14)); box-shadow:0 0 18px rgba(52,211,153,.2),inset 0 1px 0 rgba(255,255,255,.1); } .reliability-score-card:focus-visible{ outline:0; border-color:rgba(52,211,153,.55); box-shadow:0 0 0 2px rgba(52,211,153,.38),0 0 0 5px rgba(52,211,153,.13),0 0 24px rgba(52,211,153,.16),inset 0 10px 24px rgba(0,0,0,.14); } .reliability-score-card:focus-visible .reliability-more-pill{ color:#dfffee; border-color:rgba(52,211,153,.54); background:linear-gradient(135deg,rgba(52,211,153,.28),rgba(45,212,191,.14)); } .reliability-modal-shell[hidden]{display:none;} .reliability-modal-shell{ position:fixed; inset:0; z-index:100000; display:grid; place-items:center; padding:clamp(.8rem,2vw,1.4rem); width:100vw; height:100dvh; min-height:100svh; overflow:hidden; } .reliability-modal-backdrop{ position:absolute; inset:0; background:rgba(2,8,15,.68); backdrop-filter:blur(10px); } .reliability-modal-stack{ position:relative; z-index:1; width:min(920px, calc(100vw - 2.8rem)); max-width:100%; min-width:0; max-height:92vh; display:flex; flex-direction:column; align-items:flex-end; gap:.55rem; } .reliability-modal-panel{ position:relative; width:100%; min-width:0; max-height:calc(92vh - 48px); overflow:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; color:var(--text-color); background: radial-gradient(circle at top right, rgba(245,158,11,.14), rgba(245,158,11,0) 34%), linear-gradient(180deg, rgba(12,28,42,.94), rgba(4,17,30,.94)); border:1px solid rgba(255,255,255,.14); border-radius:14px; box-shadow:0 26px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08); } .reliability-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.15rem 1.2rem; border-bottom:1px solid rgba(255,255,255,.1); } .reliability-modal-kicker{ color:#fbbf24; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .reliability-modal-head h2{ margin:.18rem 0 .28rem; font-size:clamp(1.28rem,2.2vw,1.75rem); line-height:1.1; } .reliability-modal-head p{ color:var(--muted-color); line-height:1.4; max-width:62ch; } .reliability-modal-close{ position:relative; z-index:2; min-height:36px; padding:0 .85rem; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.06)); color:var(--text-color); font-weight:800; cursor:pointer; box-shadow:0 14px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.1); } .reliability-modal-close:hover{ background:linear-gradient(135deg,rgba(52,211,153,.28),rgba(45,212,191,.13)); border-color:rgba(52,211,153,.52); box-shadow:0 0 0 1px rgba(52,211,153,.18),0 16px 36px rgba(0,0,0,.3),0 0 20px rgba(52,211,153,.18),inset 0 1px 0 rgba(255,255,255,.12); } .reliability-modal-close:focus-visible{ outline:0; border-color:rgba(52,211,153,.58); box-shadow:0 0 0 2px rgba(52,211,153,.38),0 0 0 5px rgba(52,211,153,.12),0 16px 36px rgba(0,0,0,.3); } .reliability-modal-content{ padding:1.2rem; min-width:0; } .reliability-hero{ display:grid; grid-template-columns:170px minmax(0,1fr); gap:1rem; align-items:stretch; margin-bottom:1rem; } .reliability-score-plate, .reliability-explain-card, .reliability-stat, .reliability-formula-card, .reliability-band-card, .reliability-empty-card{ min-width:0; background: radial-gradient(circle at top right, rgba(255,255,255,.08), rgba(255,255,255,0) 42%), linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.18)), rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.09); border-radius:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .reliability-score-plate{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:160px; padding:1rem; text-align:center; } .reliability-score-value{ display:flex; align-items:flex-end; justify-content:center; gap:.22rem; font-size:clamp(2.4rem,7vw,4.25rem); font-weight:900; line-height:.9; font-variant-numeric:tabular-nums; color:#fff; text-shadow:0 0 24px rgba(245,158,11,.22); } .reliability-score-value small{ margin-bottom:.22rem; color:var(--muted-color); font-size:1rem; font-weight:800; } .reliability-score-band{ margin-top:.8rem; display:inline-flex; align-items:center; justify-content:center; padding:.32rem .68rem; border-radius:999px; background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.24); color:#f8d57a; font-size:.82rem; font-weight:800; } .reliability-explain-card{ padding:1rem; } .reliability-explain-card h3, .reliability-formula-card h3, .reliability-band-card h3{ margin:0 0 .55rem; font-size:1rem; } .reliability-explain-card p, .reliability-formula-card p, .reliability-empty-card p{ color:var(--muted-color); line-height:1.45; } .reliability-summary-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin-bottom:1rem; } .reliability-stat{ padding:.82rem .9rem; min-width:0; } .reliability-stat-label{ color:var(--muted-color); font-size:.75rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .reliability-stat-value{ margin-top:.3rem; color:#fff; font-size:clamp(1.05rem,2.2vw,1.42rem); font-weight:900; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } .reliability-stat-note{ margin-top:.28rem; color:rgba(255,255,255,.68); font-size:.78rem; line-height:1.3; } .reliability-formula-card, .reliability-band-card, .reliability-empty-card{ padding:1rem; margin-top:1rem; } .reliability-band-card{ overflow:hidden; } .reliability-formula-line{ display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; margin:.7rem 0; color:#fff; font-size:clamp(1rem,2vw,1.26rem); font-weight:900; font-variant-numeric:tabular-nums; } .reliability-formula-chip{ display:inline-flex; align-items:center; justify-content:center; padding:.36rem .62rem; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); } .reliability-band-table-wrap{ margin-top:.8rem; max-width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; } .reliability-band-table{ width:100%; border-collapse:collapse; min-width:660px; } .reliability-band-table th, .reliability-band-table td{ padding:.72rem .68rem; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; vertical-align:top; } .reliability-band-table th{ color:rgba(255,255,255,.74); font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .reliability-band-table td{ color:var(--text-color); font-weight:700; font-variant-numeric:tabular-nums; } .reliability-band-table .num{text-align:right;} .reliability-band-table .delta-positive{color:#34d399;} .reliability-band-table .delta-negative{color:#fb7185;} .reliability-definition-list{ display:grid; gap:.7rem; margin-top:1rem; } .reliability-definition{ display:grid; grid-template-columns:minmax(140px,.42fr) minmax(0,1fr); gap:.8rem; padding:.75rem .85rem; border-radius:10px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07); } .reliability-definition strong{ color:#fff; } .reliability-definition span{ color:var(--muted-color); line-height:1.4; } body.reliability-modal-open{ overflow:hidden; } @media (max-width: 760px){ .reliability-modal-shell{ top:var(--mobile-header-height); height:calc(100dvh - var(--mobile-header-height)); min-height:0; align-items:end; justify-items:center; padding:.55rem; } .reliability-modal-stack{ width:100%; max-width:100%; min-width:0; max-height:calc(100dvh - var(--mobile-header-height) - 1.1rem); gap:.45rem; } .reliability-modal-panel{ max-height:calc(100dvh - var(--mobile-header-height) - 3.9rem); border-radius:12px; } .reliability-modal-head{ padding:1rem; } .reliability-modal-content{ padding:.82rem; } .reliability-hero{ grid-template-columns:1fr; gap:.75rem; margin-bottom:.75rem; } .reliability-score-plate{ min-height:112px; padding:.82rem; } .reliability-summary-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin-bottom:.75rem; } .reliability-stat, .reliability-explain-card, .reliability-formula-card, .reliability-band-card, .reliability-empty-card{ padding:.78rem; } .reliability-formula-card, .reliability-band-card, .reliability-empty-card{ margin-top:.75rem; } .reliability-formula-line{ gap:.35rem; } .reliability-formula-chip{ padding:.32rem .5rem; } .reliability-band-table{ min-width:540px; } .reliability-band-table th, .reliability-band-table td{ padding:.58rem .5rem; } .reliability-definition{ grid-template-columns:1fr; gap:.35rem; } } @media (max-width: 430px){ .reliability-modal-shell{ padding:.4rem; } .reliability-modal-stack{ max-height:calc(100dvh - var(--mobile-header-height) - .8rem); } .reliability-modal-panel{ max-height:calc(100dvh - var(--mobile-header-height) - 3.55rem); } .reliability-modal-close{ min-height:34px; padding:0 .76rem; } .reliability-summary-grid{ grid-template-columns:1fr; } .reliability-score-value{ font-size:clamp(2.2rem,14vw,3.4rem); } .reliability-band-table{ min-width:500px; } } @media print{ .reliability-modal-shell{display:none !important;} } /* Search lower panels */ .search-data-panel .card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.9rem; } .search-data-panel .card-head .section-title{margin-bottom:0;} .search-data-panel .status:empty{display:none;} .view-toggle{ display:inline-flex; align-items:center; gap:.5rem; min-height:36px; padding:0 .85rem; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04)); color:var(--text-color); font-weight:700; font-size:.84rem; letter-spacing:.02em; cursor:pointer; flex:0 0 auto; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); transition:transform .15s ease, background .2s ease, border-color .2s ease; } .view-toggle:hover{ background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.06)); border-color:rgba(255,255,255,.24); transform:translateY(-1px); } .view-toggle:focus-visible{ outline:0; box-shadow:0 0 0 2px rgba(255,255,255,.14),0 0 0 4px rgba(255,255,255,.06); } .view-toggle-icon{ width:16px; height:16px; display:inline-block; flex:0 0 16px; background-repeat:no-repeat; background-position:center; background-size:16px 16px; } .view-toggle.view-toggle-bar[data-view="table"] .view-toggle-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.92' d='M4 19h16v2H4zm1-2V9h3v8zm5 0V5h3v12zm5 0v-6h3v6z'/%3E%3C/svg%3E"); } .view-toggle[data-view="chart"] .view-toggle-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.92' d='M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14H4zm2 0v3h12V5zm0 5v7h12v-7zm0 9v1h12v-1z'/%3E%3C/svg%3E"); } .search-data-panel[data-view="table"] .search-chart-wrap, .search-data-panel[data-view="chart"] .search-table-wrap{display:none;} .search-chart-wrap{ min-height:0; padding:.8rem; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02)); overflow:hidden; } #history-card .search-chart-wrap, #defects-card .search-chart-wrap{ padding:0; border:0; border-radius:0; background:none; overflow:visible; } .ranked-chart-meta{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.9rem; padding:.8rem .95rem; border-radius:12px; background: radial-gradient(circle at top right, rgba(255,255,255,.06), rgba(255,255,255,0) 42%), linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.18)), rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.08); color:var(--muted-color); font-size:.92rem; } .ranked-chart-meta strong{color:var(--text-color);} .ranked-chart-list{ display:flex; flex-direction:column; gap:.75rem; } .ranked-chart-row{ display:grid; grid-template-columns:48px minmax(0,1.6fr) minmax(120px,.95fr) auto; align-items:center; gap:.95rem; padding:.9rem .9rem; border-radius:14px; background: radial-gradient(circle at top right, rgba(255,255,255,.06), rgba(255,255,255,0) 42%), linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.18)), rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.08); } #defects-card .ranked-chart-row{ grid-template-columns:40px minmax(0,1fr) 80px; grid-template-areas: "rank copy value" "rank bar bar"; align-items:start; } #defects-card .ranked-rank{ grid-area:rank; width:34px; height:34px; border-radius:10px; } #defects-card .ranked-chart-copy{grid-area:copy;} #defects-card .ranked-bar-area{ grid-area:bar; margin-top:.35rem; } #defects-card .ranked-chart-value{ grid-area:value; align-self:start; } #defects-card .ranked-chart-name{ overflow-wrap:break-word; word-break:normal; } .ranked-chart-row:hover{ background: radial-gradient(circle at top right, rgba(255,255,255,.08), rgba(255,255,255,0) 42%), linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.14)), rgba(0,0,0,.2); } .ranked-rank{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:11px; background:linear-gradient(180deg,rgba(125,211,252,.24),rgba(96,165,250,.22)); border:1px solid rgba(125,211,252,.22); color:#f4fbff; font-weight:800; font-variant-numeric:tabular-nums; } .ranked-chart-copy{min-width:0;} .ranked-chart-name{ font-weight:700; color:var(--text-color); line-height:1.2; overflow-wrap:anywhere; } .ranked-chart-sub{ margin-top:.28rem; color:var(--muted-color); font-size:.84rem; } .ranked-bar-area{min-width:0;} .ranked-bar-track{ height:14px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.06); overflow:hidden; } .ranked-bar-fill{ display:block; width:calc(var(--pct,0) * 1%); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--bar-start,#ff8a5b),var(--bar-end,#ffca3a)); box-shadow:0 0 14px color-mix(in srgb, var(--bar-end,#ffca3a) 36%, transparent); } .ranked-chart-value{ color:var(--text-color); font-size:1.2rem; font-weight:800; font-variant-numeric:tabular-nums; } .ranked-chart-empty, .history-chart-empty{ display:flex; align-items:center; justify-content:center; min-height:220px; color:var(--muted-color); text-align:center; padding:1rem; } .history-chart-list{ position:relative; display:flex; flex-direction:column; gap:.85rem; padding-left:.25rem; } .history-chart-list::before{ content:""; position:absolute; left:18px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.04)); } .history-chart-list.is-empty::before{display:none;} .history-mileage-chart{ margin-bottom:1rem; padding:.85rem .95rem .55rem; border-radius:14px; background: radial-gradient(circle at 15% 20%, rgba(52,211,153,.16), transparent 36%), linear-gradient(180deg, rgba(3,42,36,.82), rgba(2,22,29,.72)); border:1px solid rgba(52,211,153,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } .history-mileage-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; color:#b9f4d6; font-size:.86rem; font-weight:800; } .history-mileage-head strong{ color:#34d399; font-size:1rem; text-shadow:0 0 12px rgba(52,211,153,.28); } .history-mileage-chart svg{ display:block; width:100%; height:auto; margin-top:.45rem; } .history-mileage-chart .history-mileage-area{ stroke:none; filter:none; } .history-mileage-chart .history-mileage-line{ fill:none; stroke:#34d399; stroke-width:5.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 10px rgba(52,211,153,.45)); } .history-mileage-chart circle{ fill:#031b1f; stroke:#a7f3d0; stroke-width:3.5; filter:drop-shadow(0 0 6px rgba(52,211,153,.35)); } .history-mileage-chart text{ fill:#d1fae5; font-size:13px; font-weight:700; paint-order:stroke; stroke:rgba(1,12,16,.78); stroke-width:3px; stroke-linejoin:round; } .history-mileage-grid{ stroke:rgba(167,243,208,.2); stroke-width:1; } .history-mileage-empty{ color:var(--muted-color); text-align:center; padding:.85rem; } .history-chart-item{ position:relative; } .history-chart-item summary{ list-style:none; cursor:pointer; } .history-chart-item summary::-webkit-details-marker{display:none;} .history-chart-row{ position:relative; display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:.9rem; align-items:start; padding:.9rem .95rem; border-radius:14px; background: radial-gradient(circle at top right, rgba(255,255,255,.06), rgba(255,255,255,0) 42%), linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.18)), rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.08); } .history-chart-dot{ width:14px; height:14px; margin:8px 0 0 11px; border-radius:50%; border:2px solid rgba(255,255,255,.2); background:#6ee7b7; box-shadow:0 0 0 4px rgba(110,231,183,.12); } .history-chart-row.is-fail .history-chart-dot{ background:#fb7185; box-shadow:0 0 0 4px rgba(251,113,133,.12); } .history-chart-main{min-width:0;} .history-chart-date{ font-size:1rem; font-weight:800; color:var(--text-color); } .history-chart-meta-line{ margin-top:.24rem; color:var(--muted-color); font-size:.88rem; display:flex; flex-wrap:wrap; gap:.6rem; } .history-chart-chips{ margin-top:.55rem; display:flex; flex-wrap:wrap; gap:.45rem; } .history-chart-chip, .history-chart-result{ display:inline-flex; align-items:center; justify-content:center; gap:.35rem; padding:.28rem .6rem; border-radius:999px; font-size:.78rem; font-weight:700; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.045); color:var(--text-color); } .history-chart-result{ align-self:center; min-width:76px; } .history-chart-row.is-pass .history-chart-result{ background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.2); color:#34d399; } .history-chart-row.is-fail .history-chart-result{ background:rgba(251,113,133,.14); border-color:rgba(251,113,133,.22); color:#ff2f4f; } .history-chart-expand{ color:#7dd3fc; border-color:rgba(125,211,252,.24); background:rgba(125,211,252,.09); transition:color .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; } .history-chart-row:hover .history-chart-expand, .history-chart-item[open] .history-chart-expand{ color:#34d399; border-color:rgba(52,211,153,.36); background:rgba(52,211,153,.14); box-shadow:0 0 0 1px rgba(52,211,153,.08),0 0 16px rgba(52,211,153,.12); } .history-chart-item[open] .history-chart-row{ border-color:rgba(52,211,153,.22); } .history-chart-details{ margin:.55rem .95rem .15rem 3.35rem; padding:.75rem .85rem; border-radius:12px; background: radial-gradient(circle at top left, rgba(52,211,153,.1), transparent 34%), linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.16)); border:1px solid rgba(52,211,153,.16); color:var(--text-color); font-size:.86rem; } .history-chart-details-title{ color:#b9f4d6; font-weight:800; margin-bottom:.45rem; } .history-chart-note-list{ display:grid; gap:.45rem; } .history-chart-note{ padding:.52rem .62rem; border-radius:10px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); color:#e5f4ff; line-height:1.35; } .history-chart-details.is-empty{ color:var(--muted-color); } @media (max-width: 1100px){ .ranked-chart-row{ grid-template-columns:40px minmax(0,1fr); grid-template-areas: "rank copy" "bar bar" "value value"; gap:.55rem .85rem; } .ranked-rank{grid-area:rank;} .ranked-chart-copy{grid-area:copy;} .ranked-bar-area{grid-area:bar;} .ranked-chart-value{grid-area:value;} } @media (max-width: 640px){ .search-data-panel .card-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:.65rem; } .search-data-panel .card-head .section-title{grid-column:1;grid-row:1;} .search-data-panel .card-head .view-toggle{grid-column:2;grid-row:1;justify-self:end;} .view-toggle{min-height:34px;} .history-chart-row{ grid-template-columns:34px minmax(0,1fr); grid-template-areas: "dot result" "dot main"; } .history-chart-dot{grid-area:dot;} .history-chart-result{grid-area:result;justify-self:start;} .history-chart-main{grid-area:main;} .history-chart-details{ margin:.5rem .2rem .1rem 2.75rem; } } /* Tables */ .table-wrap{ overflow:auto; } .table{ width:100%; border-collapse:separate; border-spacing:0; } .table thead th{ position:sticky; top:0; z-index:1; background: rgba(0,0,0,.32); color: var(--text-color); backdrop-filter: blur(4px); padding:10px 12px; text-transform:uppercase; letter-spacing:.05em; font-size:.82rem; border-bottom:1px solid rgba(255,255,255,.14); } .table tbody td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08); } .table tbody tr:nth-child(odd) td{ background: rgba(255,255,255,.02); } .table tbody tr:hover td{ background: rgba(255,255,255,.05); } .table .num{ text-align:right; font-variant-numeric: tabular-nums; } .table-card.compact .table thead th, .table-card.compact .table tbody td{ padding:8px 10px; } /* Status text inside cards */ .status{ font-size:.85rem; opacity:.82; } #search-status{ margin:0; } #search-status:empty{ display:none; } #search-status.status-error{ color:#ff2f4f; opacity:1; font-weight:800; } /* --- Overview intro + heading --- */ .overview-top-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:1.5rem; margin-bottom:1rem; align-items:stretch; } .overview-panel{ text-align:left; padding:1.1rem 1.25rem; } .overview-intro{ display:flex; flex-direction:column; gap:1rem; } .overview-hero{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:1rem; align-items:stretch; } .overview-hero-copy, .overview-audience-panel, .overview-outcomes-panel{ border:1px solid rgba(255,255,255,.08); border-radius:16px; background: radial-gradient(circle at top right, rgba(255,255,255,.08), rgba(255,255,255,0) 42%), linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.16)), rgba(0,0,0,.18); box-shadow:inset 0 10px 22px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.05); } .overview-hero-copy{ display:flex; flex-direction:column; justify-content:flex-start; padding:1.35rem 1.4rem; min-width:0; overflow:hidden; isolation:isolate; } .overview-hero-headline{ margin-top:0; font-size:clamp(1.05rem,1.35vw,1.45rem); line-height:1.05; letter-spacing:-.02em; color:var(--text-color); } .overview-hero-text{ margin-top:.9rem; max-width:58ch; font-size:1rem; line-height:1.62; color:var(--muted-color); } .overview-cta-row{ display:grid; grid-template-columns:1fr; gap:.75rem; margin-top:1.15rem; overflow:hidden; contain:paint; } .overview-cta{ display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:0; width:100%; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(0,0,0,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); font-weight:700; font-size:.9rem; line-height:1; letter-spacing:.01em; white-space:nowrap; color:var(--text-color); text-decoration:none; padding:0 .95rem; position:relative; z-index:0; filter:none; transform:none; transition:background .18s ease, border-color .18s ease, box-shadow .18s ease; } .overview-cta:hover{ border-color:rgba(255,255,255,.2); background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)), rgba(0,0,0,.2); filter:none; transform:none; } .overview-cta[href="/search"], .overview-cta[href="search.html"]{ border-color:#b7ff2b; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(183,255,43,.28); } .overview-cta[href="/search"]:hover, .overview-cta[href="search.html"]:hover{ border-color:#c7ff5b; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(199,255,91,.34); } .overview-cta-secondary{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), rgba(0,0,0,.24); border-color:#ff5300; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,83,0,.28); } .overview-cta-secondary:hover{ border-color:#ff6a21; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,106,33,.34); } @media (max-width: 1180px){ .overview-cta{ width:100%; min-width:0; } } .overview-feature-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.85rem; } .overview-feature-card{ position:relative; overflow:hidden; min-width:0; padding:.85rem .85rem .82rem; border-radius:16px; border:1px solid rgba(255,255,255,.08); background: radial-gradient(circle at top right, rgba(255,255,255,.08), rgba(255,255,255,0) 42%), linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.16)), rgba(0,0,0,.18); box-shadow:inset 0 10px 22px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.05); } .overview-feature-card::after{ content:""; position:absolute; left:.85rem; right:.85rem; bottom:.72rem; height:4px; border-radius:999px; background:linear-gradient(90deg, color-mix(in srgb, var(--feature-accent) 78%, white 22%), var(--feature-accent)); opacity:.9; } .overview-feature-icon{ width:32px; height:32px; border-radius:10px; flex:0 0 32px; border:1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(0,0,0,.14); background-repeat:no-repeat; background-position:center; background-size:15px 15px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } .overview-feature-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.55rem; } .overview-feature-title{ color:var(--text-color); font-size:.92rem; font-weight:800; line-height:1.18; } .overview-feature-copy{ margin-top:.38rem; padding-bottom:.92rem; color:var(--muted-color); font-size:.74rem; line-height:1.45; } .feature-reliability{--feature-accent:#34d399;} .feature-defects{--feature-accent:#ff5300;} .feature-market{--feature-accent:#60a5fa;} .feature-lifespan{--feature-accent:#22d3ee;} .feature-reliability .overview-feature-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='m12 1l8 4v6c0 5-3.4 9.74-8 11c-4.6-1.26-8-6-8-11V5zm0 5.2A2.8 2.8 0 1 0 12 11.8a2.8 2.8 0 0 0 0-5.6m-1.2 6.6l-2.8 2.8l1.4 1.4l1.4-1.4l4.6-4.6l-1.4-1.4z'/%3E%3C/svg%3E"); } .feature-defects .overview-feature-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2'/%3E%3C/svg%3E"); } .feature-market .overview-feature-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M4 19h16v2H4zM6 10h2v7H6zm5-4h2v11h-2zm5 2h2v9h-2z'/%3E%3C/svg%3E"); } .feature-lifespan .overview-feature-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M12 4a9 9 0 0 0-9 9h2a7 7 0 1 1 14 0h2a9 9 0 0 0-9-9m0 2.5A6.5 6.5 0 0 0 5.5 13h2a4.5 4.5 0 1 1 9 0h2A6.5 6.5 0 0 0 12 6.5m-1 5.5l-3.2 3.2l1.4 1.4L12.4 13H17v-2h-5.6zM4 18h16v2H4z'/%3E%3C/svg%3E"); } @media (max-width: 1280px){ .overview-hero{ grid-template-columns:1fr; } } @media (max-width: 1100px){ .overview-top-grid{ grid-template-columns:1fr; } } @media (max-width: 768px){ .overview-intro{ gap:.85rem; } .overview-panel{ padding:1rem; } .overview-hero-copy, .overview-audience-panel, .overview-outcomes-panel{ padding:1rem; } .overview-hero-headline{ font-size:clamp(1.55rem, 6vw, 2rem); } .overview-hero-text{ font-size:.95rem; } .overview-feature-grid, .overview-cta-row{ grid-template-columns:1fr; } .overview-feature-card{ padding:.95rem .95rem .9rem; } .overview-cta{ width:100%; justify-content:center; } } .overview-title{ margin-bottom:.6rem; display:inline-block; width:fit-content; } .tile .overview-title::after{ width:100%; background:linear-gradient(to right, white 0%, white 40%, transparent 100%); } .overview-walkthrough{ text-align:left; margin-top:.4rem; padding:1.1rem 1.25rem; } .overview-video-wrap{ position:relative; width:100%; padding-top:56.25%; border-radius:12px; overflow:hidden; border:1px solid var(--border-color); background:rgba(0,0,0,.25); } .overview-video-placeholder{ padding-top:0; min-height:340px; display:flex; align-items:center; justify-content:center; background:#fff; border-color:rgba(0, 0, 0, .08); } .overview-video-note{ margin:0; color:#111; font-size:1.15rem; font-weight:700; text-align:center; } .overview-video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* --- Footer --- */ .site-footer{ max-width:none; width:calc(100% - 4rem); margin:0 2rem 0; padding:2rem 0; border-top:0; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; align-items:center; color:var(--muted-color); font-size:.9rem; letter-spacing:.2px; text-align:center; margin-top:auto; } .footer-socials{ display:inline-flex; align-items:center; gap:.55rem; } .footer-social-link{ display:inline-flex; align-items:center; justify-content:center; width:1rem; height:1rem; color:var(--text-color); opacity:.92; transition:opacity .15s ease, transform .15s ease; } .footer-social-link:hover{ opacity:1; transform:translateY(-1px); text-decoration:none; } .footer-social-link svg{ display:block; width:100%; height:100%; fill:currentColor; } .site-footer a{ color:var(--text-color); text-decoration:none; } .site-footer a:hover{ text-decoration:underline; } .cookie-settings-link{ border:0; background:transparent; color:var(--text-color); cursor:pointer; font:inherit; padding:0; } .cookie-settings-link:hover{ text-decoration:underline; } .footer-sep{ color:rgba(255,255,255,.45); } /* Privacy choices */ .cookie-banner{ position:fixed; left:calc(var(--sidebar-width) + 1rem); bottom:1rem; z-index:2147483200; width:min(520px, calc(100vw - var(--sidebar-width) - 2rem)); display:grid; grid-template-columns:1fr; gap:.75rem; align-items:start; padding:.9rem; border:1px solid rgba(255,255,255,.18); border-radius:14px; background: radial-gradient(circle at top right, rgba(255,255,255,.12), rgba(255,255,255,0) 42%), linear-gradient(145deg, rgba(4,24,31,.96), rgba(7,36,58,.94)); box-shadow:0 18px 44px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(14px); color:var(--text-color); } .cookie-banner--settings{ width:min(600px, calc(100vw - var(--sidebar-width) - 2rem)); grid-template-columns:1fr; } .cookie-banner-copy{ min-width:0; } .cookie-banner-title{ font-weight:800; font-size:.96rem; margin-bottom:.2rem; } .cookie-banner p{ color:var(--muted-color); font-size:.86rem; line-height:1.38; margin:0; } .cookie-banner-links{ margin-top:.38rem; } .cookie-banner a{ color:#7dd3fc; font-size:.82rem; font-weight:700; text-decoration:none; } .cookie-banner a:hover{ text-decoration:underline; } .cookie-actions{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:.45rem; width:100%; padding-top:.1rem; } .cookie-btn{ min-height:36px; padding:0 .75rem; border-radius:10px; border:1px solid rgba(255,255,255,.16); color:var(--text-color); background:rgba(255,255,255,.08); font-weight:800; font-size:.78rem; cursor:pointer; white-space:nowrap; } .cookie-btn:hover{ background:rgba(255,255,255,.14); } .cookie-btn-primary{ background:linear-gradient(135deg, rgba(52,211,153,.92), rgba(14,165,233,.82)); border-color:rgba(255,255,255,.24); color:#041018; } .cookie-btn-secondary{ background:rgba(0,0,0,.18); } .cookie-btn-ghost{ background:transparent; } .cookie-options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; } .cookie-option{ display:flex; gap:.55rem; align-items:flex-start; padding:.7rem; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(0,0,0,.16); } .cookie-option input{ width:18px; height:18px; margin-top:.12rem; accent-color:#34d399; } .cookie-option span{ display:grid; gap:.15rem; } .cookie-option strong{ color:var(--text-color); font-size:.86rem; } .cookie-option small{ color:var(--muted-color); font-size:.78rem; line-height:1.3; } @media (max-width: 768px){ .cookie-banner, .cookie-banner--settings{ left:1rem; right:1rem; bottom:1rem; width:auto; grid-template-columns:1fr; } .cookie-actions{ justify-content:stretch; } .cookie-btn{ flex:1 1 9rem; } .cookie-options{ grid-template-columns:1fr; } } /* Report download / print */ .report-download-btn{ position:fixed; top:auto; right:calc(env(safe-area-inset-right, 0px) + 1rem); bottom:calc(env(safe-area-inset-bottom, 0px) + 1rem); z-index:2147483000; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background: radial-gradient(circle at top right, rgba(255,255,255,.16), rgba(255,255,255,0) 42%), rgba(0,0,0,.28); color:var(--text-color); box-shadow:0 10px 26px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(10px); cursor:pointer; } .report-download-btn--labeled{ width:auto; min-width:42px; gap:.45rem; padding:0 .85rem; } .report-download-btn--tile-attached{ position:fixed; top:auto; right:calc(env(safe-area-inset-right, 0px) + 1rem); bottom:calc(env(safe-area-inset-bottom, 0px) + 1rem); z-index:2147483000; height:42px; min-height:42px; border-radius:12px; } .report-download-label{ color:currentColor; font-size:.82rem; font-weight:800; line-height:1; } .report-download-btn:hover{ background:rgba(0,0,0,.38); } .report-download-btn:focus-visible{ outline:none; box-shadow:0 0 0 2px rgba(255,255,255,.22), 0 0 0 5px rgba(125,211,252,.18); } .report-download-icon{ display:block; width:20px; height:20px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v9.17l3.59-3.58L18 10l-6 6l-6-6l1.41-1.41L11 12.17zM5 19h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v9.17l3.59-3.58L18 10l-6 6l-6-6l1.41-1.41L11 12.17zM5 19h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat; } @media (max-width: 768px){ .report-download-btn{ top:auto; right:calc(env(safe-area-inset-right, 0px) + 1rem); bottom:calc(env(safe-area-inset-bottom, 0px) + 1rem); } .report-download-btn--tile-attached{ top:auto; right:calc(env(safe-area-inset-right, 0px) + 1rem); bottom:calc(env(safe-area-inset-bottom, 0px) + 1rem); z-index:2147483000; } } .report-cover{ display:none; } .search-report-head{ display:block; margin-bottom:.5rem; padding-right:7.5rem; } .search-report-head .section-title{ margin-bottom:0; } .search-page-main #advanced-card{ position:relative; overflow:visible; z-index:20; } @media print{ @page{ size:A4 landscape; margin:0; } *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; } html, body{ width:297mm !important; min-width:297mm !important; height:210mm !important; min-height:210mm !important; margin:0 !important; padding:0 !important; background: radial-gradient(circle at 84% 12%, rgba(125,211,252,.42), rgba(125,211,252,0) 30%), radial-gradient(circle at 12% 92%, rgba(52,211,153,.32), rgba(52,211,153,0) 35%), linear-gradient(135deg, #0f766e 0%, #075985 54%, #0b3b78 100%) !important; color:#eef7ff !important; overflow:hidden !important; } body::before, aside, .mobile-logo-bar, .report-download-btn, .cookie-banner, .cookie-settings-link, .cookie-settings-sep, .view-toggle, .menu, .site-footer{ display:none !important; } body > *{ position:static !important; z-index:auto !important; } main{ width:297mm !important; height:210mm !important; max-height:210mm !important; margin:0 !important; padding:6mm 7mm !important; display:grid !important; grid-template-rows:32mm 62mm 1fr !important; gap:4mm !important; overflow:hidden !important; color:#eef7ff !important; background: radial-gradient(circle at 84% 12%, rgba(125,211,252,.42), rgba(125,211,252,0) 30%), radial-gradient(circle at 12% 92%, rgba(52,211,153,.32), rgba(52,211,153,0) 35%), linear-gradient(135deg, #0f766e 0%, #075985 54%, #0b3b78 100%) !important; } .report-cover{ display:grid !important; grid-template-columns:minmax(0, 1fr) minmax(76mm, .42fr); gap:5mm; align-items:stretch; min-height:0; margin:0; padding:4.2mm 5mm; border:0; border-radius:14px; background: radial-gradient(circle at 82% 16%, rgba(125,211,252,.5), rgba(125,211,252,0) 34%), radial-gradient(circle at 12% 82%, rgba(52,211,153,.36), rgba(52,211,153,0) 38%), linear-gradient(135deg, #0f766e 0%, #075985 52%, #0b3b78 100%) !important; box-shadow:0 18px 34px rgba(2,8,23,.28); break-inside:avoid; page-break-inside:avoid; } .report-logo-lockup{ display:inline-grid; gap:2mm; } .report-logo{ display:flex; align-items:flex-start; gap:2mm; } .report-logo-word{ color:#fff; font-size:17pt; font-weight:900; line-height:1; letter-spacing:0; } .report-logo-beta{ display:inline-flex; align-items:center; justify-content:center; margin-top:-.5mm; padding:.7mm 1.4mm; border-radius:999px; background:#ff5a1f; color:#fff; font-size:6pt; font-weight:900; letter-spacing:.08em; } .report-logo-rule{ width:41mm; height:.35mm; background:linear-gradient(to right, rgba(255,255,255,.92), rgba(255,255,255,.24), transparent); } .report-cover h1{ margin:3mm 0 1.4mm; max-width:184mm; color:#fff; font-size:22pt; line-height:1.02; font-weight:900; letter-spacing:0; } .report-cover p{ margin:0; color:rgba(238,247,255,.82); font-size:8.5pt; line-height:1.25; } .report-meta-panel{ display:grid; align-content:center; gap:1.2mm; padding:2.8mm 3.2mm; border-radius:12px; background:rgba(0,0,0,.24); border:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); } .report-meta-panel span{ display:block; padding:1.3mm 0; border-bottom:1px solid rgba(255,255,255,.12); color:#eef7ff; font-size:7.7pt; font-weight:800; line-height:1.25; overflow-wrap:anywhere; } .report-meta-panel span:first-child{ color:#7dd3fc; font-size:9.2pt; } .report-meta-panel span:last-child{ border-bottom:0; color:rgba(238,247,255,.72); font-weight:700; } #select-tile > .section-title, #select-tile > .period-row, #select-tile > .make-search{ display:none !important; } .tile, .table-card, .metric-card, .stat-card, .logo-card{ background: radial-gradient(circle at top right, rgba(255,255,255,.12), rgba(255,255,255,0) 40%), linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.18)), rgba(2,20,35,.58) !important; color:#eef7ff !important; border:0 !important; border-radius:12px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 24px rgba(2,8,23,.18) !important; break-inside:avoid; page-break-inside:avoid; overflow:hidden !important; } .tile, .table-card{ padding:3.2mm !important; } .section-title, .metric-head .section-title, .value, .tile-number, th, td{ color:#eef7ff !important; } .status, .metric-foot, .tile-label{ color:rgba(238,247,255,.74) !important; } .tile .section-title::after, .section-title::after{ background:linear-gradient(to right, rgba(255,255,255,.96), rgba(125,211,252,.65), transparent) !important; } .two-col, .tables-grid, .manufacturer-sections, .mini-metrics, .logo-metrics{ display:grid !important; gap:4mm !important; min-height:0 !important; } .two-col{ grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr) !important; align-items:stretch !important; height:62mm !important; margin:0 !important; } .tables-grid, .manufacturer-sections{ grid-template-columns:minmax(0, .82fr) minmax(0, 1fr) minmax(0, 1fr) !important; height:98mm !important; margin:0 !important; } .logo-metrics, .mini-metrics{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:2.8mm !important; margin-top:2.8mm !important; } .wide{ grid-column:auto !important; } .logo-card{ min-height:31mm !important; max-height:31mm !important; background: radial-gradient(circle at top right, rgba(255,255,255,.18), rgba(255,255,255,0) 44%), rgba(0,0,0,.18) !important; } .logo-card svg, .logo-card img{ max-width:50mm !important; max-height:22mm !important; } .metric-card{ padding:2.8mm !important; } .metric-big .value, .value{ font-size:13.5pt !important; line-height:1.05 !important; } .section-title{ font-size:8.8pt !important; margin-bottom:1.2mm !important; } .metric-foot{ min-height:0 !important; font-size:6.2pt !important; line-height:1.15 !important; margin-top:1.2mm !important; } .metric-icon{ width:7.5mm !important; height:7.5mm !important; flex-basis:7.5mm !important; border-radius:2.4mm !important; background-color:rgba(255,255,255,.08) !important; } .fuel-panel[data-view="chart"] .fuel-table-wrap, .reliable-panel[data-view="chart"] .reliable-table-wrap, .common-panel[data-view="chart"] .common-table-wrap{ display:none !important; } .fuel-chart-wrap, .reliable-chart-wrap, .common-chart-wrap{ background:rgba(0,0,0,.16) !important; border:0 !important; border-radius:10px !important; padding:2mm !important; overflow:hidden !important; max-height:84mm !important; } .fuel-chart-stage{ min-height:45mm !important; height:45mm !important; } .fuel-chart-stage svg{ max-height:45mm !important; } .fuel-chart-legend{ max-height:25mm !important; overflow:hidden !important; } .reliable-chart-meta, .common-chart-meta{ font-size:6.4pt !important; margin-bottom:1.5mm !important; } .reliable-chart-list, .common-chart-list{ gap:1.3mm !important; max-height:74mm !important; overflow:hidden !important; } .reliable-chart-row, .common-chart-row{ min-height:0 !important; padding:1.4mm 1.8mm !important; border:0 !important; border-radius:7px !important; grid-template-columns:7mm minmax(0,1fr) 23mm 13mm !important; gap:1.5mm !important; } .common-chart-row{ grid-template-columns:7mm minmax(0,1fr) 23mm 18mm !important; } .reliable-rank, .common-rank{ width:7mm !important; height:7mm !important; border-radius:2mm !important; font-size:6pt !important; } .reliable-chart-name, .common-chart-name{ font-size:6.9pt !important; } .reliable-chart-tests, .common-chart-share, .reliable-chart-score, .common-chart-volume{ font-size:6.2pt !important; } .reliable-bar, .common-bar{ height:2mm !important; } .table th, .table td{ border-bottom:1px solid rgba(255,255,255,.12) !important; } .table tbody tr:hover{ background:transparent !important; } .table-wrap{ overflow:visible !important; } .metric-accent, .gauge{ border:1px solid rgba(255,255,255,.08) !important; background:rgba(255,255,255,.10) !important; } .metric-accent-fill, .gauge .fill{ box-shadow:0 0 10px rgba(125,211,252,.34) !important; background:linear-gradient(90deg, #34d399, #7dd3fc) !important; } a{ color:#7dd3fc !important; text-decoration:none !important; } } @media print{ @page{ size:A4 portrait; margin:0; background:linear-gradient(135deg, #0b5a54 0%, #075985 56%, #0b3b78 100%); } html, body{ width:210mm !important; min-width:210mm !important; height:auto !important; min-height:297mm !important; overflow:visible !important; background: radial-gradient(circle at 86% 8%, rgba(125,211,252,.38), rgba(125,211,252,0) 28%), radial-gradient(circle at 12% 92%, rgba(52,211,153,.30), rgba(52,211,153,0) 34%), linear-gradient(135deg, #0f766e 0%, #075985 55%, #0b3b78 100%) !important; } main{ width:210mm !important; height:auto !important; max-height:none !important; min-height:297mm !important; padding:0 !important; display:block !important; overflow:visible !important; background: radial-gradient(circle at 86% 8%, rgba(125,211,252,.38), rgba(125,211,252,0) 28%), radial-gradient(circle at 12% 92%, rgba(52,211,153,.30), rgba(52,211,153,0) 34%), linear-gradient(135deg, #0f766e 0%, #075985 55%, #0b3b78 100%) !important; } .report-cover{ grid-template-columns:1fr !important; min-height:74mm !important; margin:0 !important; padding:12mm 12mm 6mm !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; } .report-logo-word{ font-size:19pt !important; } .report-logo-rule{ width:44mm !important; } .report-cover h1{ margin:7mm 0 2mm !important; font-size:25pt !important; line-height:1.02 !important; } .report-cover p{ font-size:9.2pt !important; } .report-meta-panel{ grid-template-columns:1fr 1fr !important; align-content:stretch !important; gap:2mm 5mm !important; margin-top:5mm !important; padding:4mm !important; border-radius:14px !important; } .report-meta-panel span{ padding:1.3mm 0 !important; font-size:8.6pt !important; } .report-meta-panel span:first-child{ font-size:8.6pt !important; } .report-meta-panel span:last-child{ grid-column:1 / -1 !important; } .two-col{ height:223mm !important; grid-template-columns:1fr !important; gap:6mm !important; padding:0 12mm 12mm !important; margin:0 !important; break-after:page; page-break-after:always; } #select-tile, #logo-tile{ padding:5mm !important; border-radius:16px !important; } #select-tile{ min-height:58mm !important; } #logo-tile{ min-height:128mm !important; } #select-tile > .section-title, #select-tile > .period-row, #select-tile > .make-search{ display:none !important; } .mini-metrics, .logo-metrics{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:4mm !important; margin-top:0 !important; } .logo-card{ min-height:66mm !important; max-height:66mm !important; margin-bottom:5mm !important; } .logo-card svg, .logo-card img{ max-width:80mm !important; max-height:40mm !important; } .metric-card{ min-height:36mm !important; padding:5mm !important; } .metric-big .value, .value{ font-size:19pt !important; } .metric-foot{ font-size:8pt !important; line-height:1.25 !important; } .manufacturer-sections{ display:block !important; height:auto !important; margin:0 !important; } .manufacturer-sections > .tile{ width:210mm !important; min-height:297mm !important; height:297mm !important; margin:0 !important; padding:12mm !important; border-radius:0 !important; background: radial-gradient(circle at 86% 8%, rgba(125,211,252,.38), rgba(125,211,252,0) 28%), radial-gradient(circle at 12% 92%, rgba(52,211,153,.30), rgba(52,211,153,0) 34%), linear-gradient(135deg, #0f766e 0%, #075985 55%, #0b3b78 100%) !important; box-shadow:none !important; overflow:hidden !important; break-after:page; page-break-after:always; } .manufacturer-sections > .tile:last-child{ break-after:auto; page-break-after:auto; } .manufacturer-sections > .tile > .card-head{ margin-bottom:6mm !important; } .manufacturer-sections > .tile .section-title{ font-size:15pt !important; margin-bottom:0 !important; } .fuel-chart-wrap, .reliable-chart-wrap, .common-chart-wrap{ max-height:none !important; height:auto !important; padding:4mm !important; border-radius:16px !important; background: radial-gradient(circle at top right, rgba(255,255,255,.12), rgba(255,255,255,0) 42%), linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.18)), rgba(2,20,35,.58) !important; } .fuel-chart-wrap{ display:grid !important; grid-template-columns:1fr !important; gap:5mm !important; } .fuel-chart-stage{ height:116mm !important; min-height:116mm !important; } .fuel-chart-stage svg{ max-height:116mm !important; } .fuel-chart-legend{ max-height:116mm !important; overflow:visible !important; } .fuel-legend-item{ padding:2.2mm 2.6mm !important; border-radius:10px !important; font-size:9pt !important; } .reliable-chart-meta, .common-chart-meta{ margin-bottom:4mm !important; padding:4mm !important; font-size:9pt !important; border:0 !important; } .reliable-chart-list, .common-chart-list{ gap:2mm !important; max-height:none !important; overflow:visible !important; } .reliable-chart-row, .common-chart-row{ min-height:8mm !important; padding:2mm 2.5mm !important; border-radius:10px !important; grid-template-columns:9mm minmax(0,1.2fr) minmax(46mm,1fr) 20mm !important; gap:3mm !important; } .common-chart-row{ grid-template-columns:9mm minmax(0,1.2fr) minmax(46mm,1fr) 27mm !important; } .reliable-rank, .common-rank{ width:8mm !important; height:8mm !important; font-size:7pt !important; } .reliable-chart-name, .common-chart-name{ font-size:8pt !important; } .reliable-chart-tests, .common-chart-share, .reliable-chart-score, .common-chart-volume{ font-size:7.2pt !important; } .reliable-bar, .common-bar, .reliable-bar-track, .common-bar-track{ height:2.8mm !important; } } @media print{ @page{ size:A4 portrait; margin:0; } *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; } html, body{ --report-page-bg:linear-gradient(135deg, #0b5a54 0%, #075985 56%, #0b3b78 100%); width:210mm !important; min-width:210mm !important; height:auto !important; min-height:297mm !important; margin:0 !important; padding:0 !important; overflow:visible !important; color:#eef7ff !important; background:var(--report-page-bg) !important; background-size:210mm 297mm !important; background-repeat:no-repeat !important; background-position:0 0 !important; box-shadow:none !important; } aside, .mobile-logo-bar, .report-download-btn, .cookie-banner, .cookie-settings-link, .cookie-settings-sep, .view-toggle, .menu, .site-footer{ display:none !important; } body::before{ content:"" !important; display:block !important; position:fixed !important; inset:-3mm !important; width:auto !important; height:auto !important; min-height:0 !important; background:var(--report-page-bg) !important; z-index:0 !important; pointer-events:none !important; } body > *{ position:relative !important; z-index:1 !important; } main{ width:210mm !important; height:auto !important; max-height:none !important; min-height:297mm !important; padding:0 !important; display:block !important; overflow:visible !important; color:#eef7ff !important; background:transparent !important; background-size:210mm 297mm !important; background-repeat:no-repeat !important; background-position:0 0 !important; } .report-cover{ display:grid !important; grid-template-columns:minmax(0, 1fr) 76mm !important; gap:8mm !important; align-items:start !important; min-height:50mm !important; margin:0 !important; padding:9mm 12mm 3.5mm 11mm !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } .report-logo-word{ font-size:19pt !important; } .report-logo-rule{ width:44mm !important; } .report-cover h1{ margin:5mm 0 1.8mm !important; max-width:120mm !important; font-size:23pt !important; line-height:1.02 !important; } .report-cover p{ font-size:8.4pt !important; line-height:1.3 !important; } .report-meta-panel{ display:flex !important; flex-direction:column !important; align-content:center !important; justify-content:center !important; align-self:start !important; margin-top:13.8mm !important; gap:.55mm !important; min-height:0 !important; padding:2.6mm 3.3mm !important; border-radius:12px !important; background:rgba(0,0,0,.24) !important; } .report-meta-panel span, .report-meta-panel span:first-child{ padding:.7mm 0 !important; font-size:7.5pt !important; line-height:1.18 !important; white-space:normal !important; } .two-col{ position:relative !important; display:grid !important; grid-template-columns:1fr !important; align-content:start !important; gap:5mm !important; min-height:246mm !important; height:auto !important; padding:0 11mm 10mm !important; margin:0 !important; background:transparent !important; break-after:page; page-break-after:always; } .two-col::before{ content:"" !important; position:absolute !important; inset:-3mm !important; background:var(--report-page-bg) !important; z-index:0 !important; pointer-events:none !important; } .two-col > *, .report-cover{ position:relative !important; z-index:1 !important; } #select-tile, #logo-tile{ padding:4mm !important; border:0 !important; border-radius:16px !important; background: radial-gradient(circle at top right, rgba(255,255,255,.12), rgba(255,255,255,0) 40%), linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.18)), rgba(2,20,35,.58) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 24px rgba(2,8,23,.18) !important; } #select-tile{ min-height:auto !important; } #logo-tile{ min-height:auto !important; } .mini-metrics, .logo-metrics{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:3.4mm !important; margin-top:0 !important; } .logo-card{ min-height:57mm !important; max-height:57mm !important; margin-bottom:4mm !important; } .logo-card svg, .logo-card img{ max-width:80mm !important; max-height:40mm !important; } .metric-card{ min-height:27mm !important; padding:3.6mm !important; } .metric-big .value, .value{ font-size:16pt !important; } .metric-foot{ font-size:7.1pt !important; line-height:1.2 !important; } .manufacturer-sections{ display:block !important; height:auto !important; margin:0 !important; background:transparent !important; } .manufacturer-sections > .tile{ position:relative !important; width:210mm !important; min-height:296.5mm !important; height:296.5mm !important; margin:0 !important; padding:8mm 11mm 7mm !important; border:0 !important; border-radius:0 !important; background:transparent !important; background-size:210mm 297mm !important; background-repeat:no-repeat !important; background-position:0 0 !important; box-shadow:none !important; overflow:visible !important; break-after:page; page-break-after:always; } .manufacturer-sections > .tile::before{ content:"" !important; position:absolute !important; inset:-3mm !important; background:var(--report-page-bg) !important; z-index:0 !important; pointer-events:none !important; } .manufacturer-sections > .tile > *{ position:relative !important; z-index:1 !important; } .manufacturer-sections > .tile:last-child{ break-after:auto; page-break-after:auto; } .manufacturer-sections > .tile > .card-head{ margin-bottom:4mm !important; } .manufacturer-sections > .tile .section-title{ font-size:13pt !important; margin-bottom:0 !important; } .fuel-chart-wrap, .reliable-chart-wrap, .common-chart-wrap{ max-height:none !important; height:auto !important; padding:3mm !important; border:0 !important; border-radius:13px !important; background: radial-gradient(circle at top right, rgba(255,255,255,.12), rgba(255,255,255,0) 42%), linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.18)), rgba(2,20,35,.58) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 24px rgba(2,8,23,.18) !important; } .fuel-chart-wrap{ display:grid !important; grid-template-columns:1fr .82fr !important; gap:5mm !important; align-items:stretch !important; } .fuel-chart-stage{ height:222mm !important; min-height:222mm !important; } .fuel-chart-stage svg{ max-height:222mm !important; } .fuel-chart-legend{ max-height:none !important; overflow:visible !important; } .fuel-legend-item{ padding:2.1mm 2.4mm !important; border-radius:10px !important; font-size:8.7pt !important; } .reliable-chart-meta, .common-chart-meta{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:4mm !important; margin-bottom:2mm !important; padding:2mm 2.4mm !important; font-size:6.8pt !important; line-height:1.2 !important; border:0 !important; } .reliable-panel, .common-panel{ height:calc(100% - 13mm) !important; min-height:0 !important; } .reliable-chart-wrap, .common-chart-wrap{ height:100% !important; display:flex !important; flex-direction:column !important; min-height:0 !important; } .reliable-chart-list, .common-chart-list{ display:flex !important; flex:1 1 auto !important; flex-direction:column !important; gap:.95mm !important; max-height:none !important; overflow:hidden !important; } .reliable-chart-row, .common-chart-row{ flex:0 0 8.15mm !important; min-height:0 !important; height:8.15mm !important; padding:.7mm 1.5mm !important; border:0 !important; border-radius:7px !important; grid-template-columns:7mm minmax(0,1.15fr) minmax(38mm,.95fr) 15mm !important; grid-template-areas:none !important; gap:1.8mm !important; overflow:hidden !important; } .common-chart-row{ grid-template-columns:7mm minmax(0,1.15fr) minmax(38mm,.95fr) 22mm !important; grid-template-areas:none !important; } .reliable-rank, .common-rank{ width:6mm !important; height:6mm !important; border-radius:2mm !important; font-size:5.3pt !important; } .reliable-chart-copy, .common-chart-copy, .reliable-bar-area, .common-bar-area{ grid-area:auto !important; min-width:0 !important; } .reliable-rank, .common-rank, .reliable-chart-score, .common-chart-volume{ grid-area:auto !important; align-self:center !important; } .reliable-chart-name, .common-chart-name{ font-size:5.9pt !important; line-height:1.05 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; word-break:normal !important; } .reliable-chart-tests, .common-chart-share{ margin-top:.25mm !important; font-size:4.8pt !important; line-height:1.05 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .reliable-chart-score, .common-chart-volume{ font-size:5.5pt !important; line-height:1 !important; white-space:nowrap !important; } .reliable-bar, .common-bar, .reliable-bar-track, .common-bar-track{ height:1.55mm !important; } } @media print{ body.model-reporting{ --report-page-bg:linear-gradient(135deg, #0b5a54 0%, #075985 56%, #0b3b78 100%); width:210mm !important; min-width:210mm !important; margin:0 !important; padding:0 !important; color:#eef7ff !important; background:var(--report-page-bg) !important; } body.model-reporting::before{ content:"" !important; display:block !important; position:fixed !important; inset:-3mm !important; width:auto !important; height:auto !important; background:var(--report-page-bg) !important; z-index:0 !important; pointer-events:none !important; } body.model-reporting main{ width:210mm !important; min-height:297mm !important; height:auto !important; margin:0 !important; padding:0 !important; display:block !important; overflow:visible !important; color:#eef7ff !important; background:transparent !important; } body.model-reporting .report-cover{ display:grid !important; grid-template-columns:minmax(0, 1fr) 76mm !important; gap:8mm !important; align-items:start !important; min-height:50mm !important; margin:0 !important; padding:9mm 11mm 3.5mm !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; position:relative !important; z-index:2 !important; } body.model-reporting .report-cover h1{ margin:5mm 0 1.8mm !important; max-width:120mm !important; color:#fff !important; font-size:23pt !important; line-height:1.02 !important; letter-spacing:0 !important; } body.model-reporting .report-cover p{ color:rgba(238,247,255,.86) !important; font-size:8.4pt !important; line-height:1.3 !important; } body.model-reporting .report-meta-panel{ display:flex !important; flex-direction:column !important; justify-content:center !important; align-self:start !important; margin-top:13.8mm !important; gap:.55mm !important; min-height:0 !important; padding:2.6mm 3.3mm !important; border:0 !important; border-radius:12px !important; background:rgba(0,0,0,.24) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important; } body.model-reporting .report-meta-panel span, body.model-reporting .report-meta-panel span:first-child{ display:block !important; padding:.7mm 0 !important; border-bottom:1px solid rgba(255,255,255,.12) !important; color:#eef7ff !important; font-size:7.3pt !important; font-weight:800 !important; line-height:1.18 !important; overflow-wrap:anywhere !important; white-space:normal !important; } body.model-reporting .report-meta-panel span:last-child{ border-bottom:0 !important; color:rgba(238,247,255,.72) !important; } body.model-reporting .two-col{ position:relative !important; display:grid !important; grid-template-columns:.78fr 1.22fr !important; gap:4mm !important; min-height:0 !important; height:auto !important; margin:0 !important; padding:0 11mm 4mm !important; background:transparent !important; break-after:auto !important; page-break-after:auto !important; z-index:1 !important; } body.model-reporting .two-col::before, body.model-reporting .model-snapshot-row::before, body.model-reporting .model-sections > .tile::before, body.model-reporting .model-sections > .section-stack::before{ content:"" !important; position:absolute !important; inset:-3mm !important; background:var(--report-page-bg) !important; z-index:0 !important; pointer-events:none !important; } body.model-reporting .two-col > *, body.model-reporting .model-snapshot-row > *, body.model-reporting .model-sections > .tile > *, body.model-reporting .model-sections > .section-stack > *{ position:relative !important; z-index:1 !important; } body.model-reporting #select-tile > .section-title, body.model-reporting #select-tile > .period-row, body.model-reporting #select-tile > .make-row, body.model-reporting #select-tile > .model-search, body.model-reporting #select-tile > .extra-controls, body.model-reporting #model-status{ display:none !important; } body.model-reporting #select-tile, body.model-reporting #photo-tile, body.model-reporting .model-snapshot-row > .tile, body.model-reporting #ncap-card, body.model-reporting .fuel-chart-wrap, body.model-reporting .defect-chart-wrap{ border:0 !important; border-radius:14px !important; background: radial-gradient(circle at top right, rgba(255,255,255,.12), rgba(255,255,255,0) 40%), linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.18)), rgba(2,20,35,.58) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 24px rgba(2,8,23,.18) !important; overflow:hidden !important; } body.model-reporting #select-tile, body.model-reporting #photo-tile{ padding:3.5mm !important; } body.model-reporting .mini-metrics{ display:grid !important; grid-template-columns:1fr !important; gap:3mm !important; margin:0 !important; } body.model-reporting .logo-metrics{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:3mm !important; margin:0 !important; } body.model-reporting .metric-card, body.model-reporting .metric, body.model-reporting .stat-card{ min-height:0 !important; padding:3mm !important; border:0 !important; border-radius:10px !important; background: radial-gradient(circle at top right, rgba(255,255,255,.10), rgba(255,255,255,0) 40%), linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.14)), rgba(2,20,35,.48) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important; } body.model-reporting .metric-head{ margin-bottom:1mm !important; } body.model-reporting .metric-icon{ width:7mm !important; height:7mm !important; flex-basis:7mm !important; border-radius:2mm !important; } body.model-reporting .section-title, body.model-reporting .metric-head .section-title{ color:#eef7ff !important; font-size:8.2pt !important; line-height:1.15 !important; margin-bottom:0 !important; } body.model-reporting .value, body.model-reporting .metric-big .value, body.model-reporting .tile-number{ color:#eef7ff !important; font-size:13.5pt !important; line-height:1.05 !important; } body.model-reporting .metric-foot, body.model-reporting .status{ min-height:0 !important; color:rgba(238,247,255,.72) !important; font-size:5.8pt !important; line-height:1.16 !important; margin-top:1mm !important; } body.model-reporting .rarity-helper{ min-height:0 !important; color:#ff2f4f !important; font-size:5.8pt !important; line-height:1.16 !important; margin-top:1mm !important; } body.model-reporting .metric-foot--band{ color:#eef7ff !important; font-size:8.6pt !important; font-weight:800 !important; } body.model-reporting .rarity-stack--inline{ gap:1mm !important; font-size:10pt !important; } body.model-reporting .metric-accent, body.model-reporting .gauge{ height:1.7mm !important; margin-top:1.2mm !important; } body.model-reporting .model-snapshot-row{ position:relative !important; display:grid !important; grid-template-columns:1fr !important; align-content:start !important; gap:3mm !important; width:210mm !important; min-height:0 !important; height:auto !important; margin:0 !important; padding:0 11mm 7mm !important; background:transparent !important; break-before:auto !important; page-break-before:auto !important; break-after:page !important; page-break-after:always !important; z-index:1 !important; overflow:visible !important; } body.model-reporting .model-snapshot-row > .tile{ margin:0 !important; padding:3mm !important; width:100% !important; } body.model-reporting .metrics-grid{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:3mm !important; margin-top:3mm !important; } body.model-reporting #basic-card .metrics-grid{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:2mm !important; margin-top:2mm !important; } body.model-reporting #emissions-card .model-emissions-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:2mm !important; margin-top:2mm !important; } body.model-reporting #emissions-card .metric-span-full{ grid-column:1 / -1 !important; } body.model-reporting .valuation-scale{ min-height:20mm !important; height:20mm !important; margin-top:1mm !important; } body.model-reporting .valuation-price{ font-size:9.5pt !important; } body.model-reporting .buy-card, body.model-reporting #insurance-card, body.model-reporting .section-flag, body.model-reporting .view-toggle, body.model-reporting .tax-supplement-control{ display:none !important; } body.model-reporting .model-sections{ display:block !important; height:auto !important; margin:0 !important; background:transparent !important; } body.model-reporting .model-sections > .tile, body.model-reporting .model-sections > .section-stack{ position:relative !important; width:210mm !important; min-height:296.5mm !important; height:296.5mm !important; margin:0 !important; padding:8mm 11mm 7mm !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important; break-after:page !important; page-break-after:always !important; } body.model-reporting .model-sections > .tile:last-child{ break-after:auto !important; page-break-after:auto !important; } body.model-reporting .model-sections > .tile > .card-head, body.model-reporting .model-sections > .section-stack .title-with-flag{ margin-bottom:4mm !important; } body.model-reporting .model-sections > .tile .section-title, body.model-reporting .model-sections > .section-stack .section-title{ font-size:13pt !important; } body.model-reporting .section-stack{ display:block !important; } body.model-reporting.model-reporting-ncap-empty .model-sections > .section-stack{ display:none !important; } body.model-reporting .model-sections > .tile.tight-chart-head{ min-height:186mm !important; height:186mm !important; padding:8mm 11mm 2mm !important; break-after:auto !important; page-break-after:auto !important; } body.model-reporting .model-sections > .section-stack{ min-height:110mm !important; height:110mm !important; padding:0 11mm 7mm !important; break-after:page !important; page-break-after:always !important; } body.model-reporting.model-reporting-ncap-empty .model-sections > .tile.tight-chart-head{ min-height:296.5mm !important; height:296.5mm !important; padding:8mm 11mm 7mm !important; break-after:page !important; page-break-after:always !important; } body.model-reporting .model-sections > .tile.wide{ min-height:296.5mm !important; height:296.5mm !important; padding:8mm 11mm 7mm !important; break-after:auto !important; page-break-after:auto !important; } body.model-reporting #ncap-card{ height:auto !important; margin:0 !important; padding:4mm !important; } body.model-reporting #ncap-card .metrics-grid{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; } body.model-reporting #ncap-card .metric-span-full{ grid-column:1 / -1 !important; } body.model-reporting #ncap-card .ncap-stars{ font-size:17pt !important; letter-spacing:.02em !important; } body.model-reporting .fuel-panel, body.model-reporting .defect-panel{ height:calc(100% - 13mm) !important; min-height:0 !important; } body.model-reporting .fuel-panel[data-view="chart"] .fuel-table-wrap, body.model-reporting .defect-panel[data-view="chart"] .defect-table-wrap{ display:none !important; } body.model-reporting .fuel-chart-wrap{ display:grid !important; grid-template-columns:1fr .78fr !important; gap:5mm !important; align-items:stretch !important; height:100% !important; padding:3mm !important; } body.model-reporting .fuel-chart-stage{ height:139mm !important; min-height:139mm !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:12px !important; } body.model-reporting .fuel-chart-stage svg{ max-height:139mm !important; } body.model-reporting .fuel-chart-legend{ max-height:none !important; padding:3mm !important; overflow:visible !important; background:rgba(0,0,0,.28) !important; } body.model-reporting .fuel-legend-item{ padding:1.8mm 2.2mm !important; font-size:7.5pt !important; border-radius:8px !important; } body.model-reporting .defect-chart-wrap{ height:100% !important; display:flex !important; flex-direction:column !important; min-height:0 !important; padding:3mm !important; } body.model-reporting .defect-chart-meta{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:4mm !important; margin-bottom:2mm !important; padding:2mm 2.4mm !important; border:0 !important; border-radius:10px !important; background:rgba(0,0,0,.28) !important; color:rgba(238,247,255,.78) !important; font-size:6.7pt !important; line-height:1.2 !important; } body.model-reporting .defect-chart-list{ display:flex !important; flex:1 1 auto !important; flex-direction:column !important; gap:.95mm !important; max-height:none !important; overflow:hidden !important; } body.model-reporting .defect-chart-row{ display:grid !important; flex:0 0 8.15mm !important; min-height:0 !important; height:8.15mm !important; padding:.7mm 1.5mm !important; border:0 !important; border-radius:7px !important; grid-template-columns:7mm minmax(0,1.2fr) minmax(38mm,.95fr) 19mm !important; grid-template-areas:none !important; gap:1.8mm !important; overflow:hidden !important; } body.model-reporting .defect-rank{ grid-area:auto !important; align-self:center !important; width:6mm !important; height:6mm !important; border-radius:2mm !important; font-size:5.3pt !important; } body.model-reporting .defect-chart-copy, body.model-reporting .defect-bar-area, body.model-reporting .defect-chart-count{ grid-area:auto !important; align-self:center !important; min-width:0 !important; } body.model-reporting .defect-chart-name{ color:#eef7ff !important; font-size:5.9pt !important; line-height:1.05 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; word-break:normal !important; } body.model-reporting .defect-chart-share{ margin-top:.25mm !important; color:rgba(238,247,255,.72) !important; font-size:4.8pt !important; line-height:1.05 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.model-reporting .defect-chart-count{ color:#eef7ff !important; font-size:5.5pt !important; line-height:1 !important; white-space:nowrap !important; } body.model-reporting .defect-bar-track{ height:1.55mm !important; } } @media print{ body.search-reporting{ --report-page-bg:linear-gradient(135deg, #0b5a54 0%, #075985 56%, #0b3b78 100%); width:210mm !important; min-width:210mm !important; margin:0 !important; padding:0 !important; color:#eef7ff !important; background:var(--report-page-bg) !important; } body.search-reporting::before{ content:"" !important; display:block !important; position:fixed !important; inset:-3mm !important; width:auto !important; height:auto !important; background:var(--report-page-bg) !important; z-index:0 !important; pointer-events:none !important; } body.search-reporting main.search-page-main{ width:210mm !important; min-height:297mm !important; height:auto !important; margin:0 !important; padding:0 !important; display:block !important; overflow:visible !important; color:#eef7ff !important; background:transparent !important; } body.search-reporting .search-tile, body.search-reporting #insurance-card, body.search-reporting .section-flag, body.search-reporting .view-toggle, body.search-reporting .tax-supplement-control{ display:none !important; } body.search-reporting.search-reporting-ncap-empty #ncap-card{ display:none !important; } body.search-reporting .report-cover{ display:grid !important; grid-template-columns:minmax(0, 1fr) 76mm !important; gap:8mm !important; align-items:start !important; min-height:42mm !important; margin:0 !important; padding:8mm 11mm 2mm !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; position:relative !important; z-index:2 !important; } body.search-reporting .report-cover h1{ margin:4mm 0 1.4mm !important; max-width:120mm !important; color:#fff !important; font-size:23pt !important; line-height:1.02 !important; letter-spacing:0 !important; } body.search-reporting .report-cover p{ color:rgba(238,247,255,.86) !important; font-size:8.4pt !important; line-height:1.3 !important; } body.search-reporting .report-meta-panel{ display:flex !important; flex-direction:column !important; justify-content:center !important; align-self:start !important; margin-top:9.6mm !important; gap:.55mm !important; min-height:0 !important; padding:2.6mm 3.3mm !important; border:0 !important; border-radius:12px !important; background:rgba(0,0,0,.24) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important; } body.search-reporting .report-meta-panel span, body.search-reporting .report-meta-panel span:first-child{ display:block !important; padding:.7mm 0 !important; border-bottom:1px solid rgba(255,255,255,.12) !important; color:#eef7ff !important; font-size:7.3pt !important; font-weight:800 !important; line-height:1.18 !important; overflow-wrap:anywhere !important; white-space:normal !important; } body.search-reporting .report-meta-panel span:last-child{ border-bottom:0 !important; color:rgba(238,247,255,.72) !important; } body.search-reporting #results, body.search-reporting #extras{ position:relative !important; width:210mm !important; margin:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important; z-index:1 !important; } body.search-reporting #results::before, body.search-reporting #extras::before{ content:"" !important; position:absolute !important; inset:-3mm !important; background:var(--report-page-bg) !important; z-index:0 !important; pointer-events:none !important; } body.search-reporting #results > *, body.search-reporting #extras > *{ position:relative !important; z-index:1 !important; } body.search-reporting #results{ display:flex !important; flex-direction:column !important; grid-template-columns:none !important; gap:3.2mm !important; align-items:start !important; min-height:0 !important; height:auto !important; padding:0 11mm 7mm !important; break-after:auto !important; page-break-after:auto !important; } body.search-reporting .results-column{ display:contents !important; } body.search-reporting .section-stack{ order:4 !important; display:block !important; grid-template-rows:auto !important; gap:3mm !important; width:100% !important; height:auto !important; margin:0 !important; align-content:start !important; align-items:start !important; break-after:page !important; page-break-after:always !important; } body.search-reporting .tile, body.search-reporting .table-card, body.search-reporting .metric, body.search-reporting .stat-card, body.search-reporting .search-chart-wrap{ border:0 !important; color:#eef7ff !important; background: radial-gradient(circle at top right, rgba(255,255,255,.10), rgba(255,255,255,0) 40%), linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.14)), rgba(2,20,35,.50) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important; break-inside:avoid !important; page-break-inside:avoid !important; overflow:hidden !important; } body.search-reporting .tile, body.search-reporting .table-card{ padding:3mm !important; border-radius:14px !important; } body.search-reporting .metric, body.search-reporting .stat-card{ min-height:0 !important; padding:2.2mm !important; border-radius:9px !important; } body.search-reporting .section-title, body.search-reporting .metric-head .section-title{ color:#eef7ff !important; font-size:8pt !important; line-height:1.15 !important; margin-bottom:0 !important; } body.search-reporting .title-with-flag{ margin-bottom:1.8mm !important; } body.search-reporting .metric-head{ margin-bottom:.8mm !important; } body.search-reporting .metric-icon{ width:6.5mm !important; height:6.5mm !important; flex-basis:6.5mm !important; border-radius:2mm !important; } body.search-reporting .value, body.search-reporting .metric-big .value{ color:#eef7ff !important; font-size:11.5pt !important; line-height:1.04 !important; } body.search-reporting .metric-foot, body.search-reporting .status, body.search-reporting .ranked-chart-sub, body.search-reporting .history-chart-meta-line{ color:rgba(238,247,255,.72) !important; font-size:5.4pt !important; line-height:1.14 !important; margin-top:.6mm !important; } body.search-reporting .rarity-helper{ color:#ff2f4f !important; font-size:5.4pt !important; line-height:1.14 !important; margin-top:.6mm !important; } body.search-reporting .metric-accent, body.search-reporting .gauge, body.search-reporting #advanced-card .health .bar{ height:1.45mm !important; margin-top:.9mm !important; border:1px solid rgba(255,255,255,.08) !important; background:rgba(255,255,255,.10) !important; } body.search-reporting .metric-accent-fill, body.search-reporting .gauge .fill, body.search-reporting #advanced-card .health .fill{ box-shadow:0 0 10px rgba(125,211,252,.34) !important; background:linear-gradient(90deg, #34d399, #7dd3fc) !important; } body.search-reporting #basic-card .table-wrap{ max-height:none !important; overflow:hidden !important; } body.search-reporting #basic-card{ order:1 !important; width:100% !important; display:grid !important; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important; grid-template-areas: "title title" "table metrics" !important; gap:2.2mm 4mm !important; } body.search-reporting #basic-card > .section-title{ grid-area:title !important; } body.search-reporting #basic-card > .table-wrap{ grid-area:table !important; } body.search-reporting #basic-card > .metrics-grid{ grid-area:metrics !important; } body.search-reporting #advanced-card{ order:2 !important; width:100% !important; break-after:page !important; page-break-after:always !important; } body.search-reporting #emissions-card{ order:3 !important; width:100% !important; } body.search-reporting #basic-card .basic-table th, body.search-reporting #basic-card .basic-table td{ padding:.42mm 0 !important; border-bottom:1px solid rgba(255,255,255,.09) !important; color:#eef7ff !important; font-size:5.8pt !important; line-height:1.12 !important; } body.search-reporting #basic-card .metrics-grid, body.search-reporting #advanced-card .metrics-grid, body.search-reporting #ncap-card .metrics-grid{ display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:2mm !important; margin-top:2mm !important; } body.search-reporting #basic-card .metrics-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; margin-top:0 !important; } body.search-reporting #advanced-card .metric-span-2, body.search-reporting #advanced-card .metric-span-full{ grid-column:auto !important; grid-row:auto !important; } body.search-reporting #emissions-card .metrics-grid{ display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:2mm !important; margin-top:1.6mm !important; } body.search-reporting #emissions-card .metric-span-full{ grid-column:1 / -1 !important; } body.search-reporting #emissions-card .stat-lez{ grid-column:span 2 !important; } body.search-reporting #emissions-card .valuation-scale{ min-height:19mm !important; height:19mm !important; margin-top:.5mm !important; } body.search-reporting #emissions-card .valuation-scale::before{ top:7mm !important; } body.search-reporting #emissions-card .valuation-pin{ width:7mm !important; height:7mm !important; font-size:6.2pt !important; } body.search-reporting #emissions-card .valuation-name{ font-size:5.3pt !important; } body.search-reporting #emissions-card .valuation-price{ font-size:7.4pt !important; } body.search-reporting #emissions-card .zone-list{ gap:.55mm !important; font-size:6.2pt !important; line-height:1.08 !important; } body.search-reporting #emissions-card .zone-row{ gap:1mm !important; align-items:center !important; } body.search-reporting #emissions-card .zone-row-name{ white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.search-reporting #ncap-card .metrics-grid{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; } body.search-reporting #ncap-card{ width:100% !important; margin:3.2mm 0 0 !important; } body.search-reporting #ncap-card .metric-span-full{ grid-column:1 / -1 !important; } body.search-reporting #ncap-card .ncap-stars{ margin-top:1mm !important; font-size:13pt !important; letter-spacing:.02em !important; } body.search-reporting #ncap-card .ncap-star{ font-size:13pt !important; } body.search-reporting #ncap-card .ncap-empty{ min-height:24mm !important; padding:2mm !important; font-size:8pt !important; } body.search-reporting #extras{ display:block !important; min-height:0 !important; height:auto !important; padding:0 !important; break-after:auto !important; page-break-after:auto !important; } body.search-reporting #history-card, body.search-reporting #defects-card{ position:relative !important; display:flex !important; flex-direction:column !important; width:210mm !important; min-height:296.5mm !important; height:auto !important; margin:0 !important; padding:8mm 11mm 7mm !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important; } body.search-reporting #history-card{ break-after:page !important; page-break-after:always !important; } body.search-reporting #defects-card{ break-after:auto !important; page-break-after:auto !important; } body.search-reporting #history-card::before, body.search-reporting #defects-card::before{ content:"" !important; position:absolute !important; inset:-3mm !important; background:var(--report-page-bg) !important; z-index:0 !important; pointer-events:none !important; } body.search-reporting #history-card > *, body.search-reporting #defects-card > *{ position:relative !important; z-index:1 !important; } body.search-reporting #history-card .card-head, body.search-reporting #defects-card .card-head{ margin-bottom:2mm !important; } body.search-reporting #history-status, body.search-reporting #defects-status{ min-height:0 !important; margin:0 !important; } body.search-reporting .search-data-panel[data-view="chart"] .search-table-wrap, body.search-reporting .search-data-panel[data-view="table"] .search-chart-wrap{ display:none !important; } body.search-reporting .search-chart-wrap{ display:flex !important; flex:1 1 auto !important; flex-direction:column !important; min-height:252mm !important; height:auto !important; padding:3mm !important; border-radius:14px !important; overflow:visible !important; } body.search-reporting .history-chart-list, body.search-reporting .ranked-chart-list{ display:flex !important; flex:1 1 auto !important; flex-direction:column !important; min-height:0 !important; max-height:none !important; overflow:visible !important; } body.search-reporting .history-chart-list{ gap:1mm !important; padding-left:0 !important; } body.search-reporting .history-chart-list::before{ display:none !important; } body.search-reporting .history-chart-row{ display:grid !important; grid-template-columns:7mm minmax(0,1fr) 22mm !important; gap:2mm !important; align-items:center !important; flex:0 0 8.4mm !important; min-height:0 !important; height:8.4mm !important; padding:.9mm 1.8mm !important; border:0 !important; border-radius:6px !important; overflow:hidden !important; } body.search-reporting .history-chart-dot{ width:3.6mm !important; height:3.6mm !important; margin:0 !important; border-width:.45mm !important; box-shadow:none !important; } body.search-reporting .history-chart-date{ color:#eef7ff !important; font-size:6.4pt !important; line-height:1.05 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.search-reporting .history-chart-meta-line{ display:flex !important; gap:2mm !important; font-size:5.2pt !important; line-height:1.05 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.search-reporting .history-chart-chips{ display:none !important; } body.search-reporting .history-chart-result{ min-width:0 !important; padding:.7mm 1.1mm !important; border-radius:99px !important; font-size:5.1pt !important; line-height:1 !important; white-space:nowrap !important; } body.search-reporting .ranked-chart-meta{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:3mm !important; margin-bottom:3mm !important; padding:2.4mm 2.8mm !important; border:0 !important; border-radius:9px !important; background:rgba(0,0,0,.28) !important; color:rgba(238,247,255,.78) !important; font-size:7.1pt !important; line-height:1.15 !important; } body.search-reporting .ranked-chart-list{ gap:1.15mm !important; } body.search-reporting .ranked-chart-row, body.search-reporting #defects-card .ranked-chart-row{ display:grid !important; grid-template-columns:8mm minmax(0,1.15fr) minmax(58mm,.85fr) 22mm !important; grid-template-areas:none !important; align-items:center !important; flex:0 0 8mm !important; min-height:0 !important; height:8mm !important; gap:2mm !important; padding:.8mm 1.8mm !important; border:0 !important; border-radius:6px !important; overflow:hidden !important; } body.search-reporting .ranked-rank, body.search-reporting #defects-card .ranked-rank{ grid-area:auto !important; align-self:center !important; width:6.6mm !important; height:6.6mm !important; border-radius:2mm !important; font-size:5.3pt !important; } body.search-reporting .ranked-chart-copy, body.search-reporting #defects-card .ranked-chart-copy, body.search-reporting .ranked-bar-area, body.search-reporting #defects-card .ranked-bar-area, body.search-reporting .ranked-chart-value, body.search-reporting #defects-card .ranked-chart-value{ grid-area:auto !important; align-self:center !important; min-width:0 !important; } body.search-reporting .ranked-chart-name{ color:#eef7ff !important; font-size:6.2pt !important; line-height:1.05 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; word-break:normal !important; } body.search-reporting .ranked-chart-sub{ margin-top:.2mm !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.search-reporting .ranked-chart-value{ color:#eef7ff !important; font-size:6pt !important; line-height:1 !important; white-space:nowrap !important; text-align:right !important; } body.search-reporting .ranked-bar-track{ height:1.65mm !important; } } /* Sidebar data update note */ .sidebar-update{ padding:.48rem .54rem; border-radius:10px; background:rgba(0,0,0,.25); border:1px solid #b7ff2b; box-shadow:0 0 14px rgba(183,255,43,.12); color:var(--text-color); font-size:.68rem; letter-spacing:0; text-align:center; width:100%; min-width:0; display:flex; align-items:center; justify-content:center; gap:.28rem; white-space:nowrap; line-height:1.2; } .sidebar-update-label{ display:inline; color:var(--text-color); font-weight:700; } .sidebar-update-date{ display:inline; color:var(--text-color); font-weight:700; } @media (max-width: 768px){ .sidebar-update{ font-size:.66rem; } .sidebar-actions{ padding:0 1.25rem 0.6rem; } } /* --- Legal / placeholder pages --- */ .legal-hero, .legal-tile{ max-width:none; width:100%; text-align:left; padding:1.4rem 1.6rem; margin-bottom:1.2rem; } .legal-hero .status{ margin-top:.5rem; } .legal-updated{ color:var(--muted); font-size:.82rem; font-weight:700; letter-spacing:.04em; margin:.1rem 0 .8rem; text-transform:uppercase; } .legal-note{ background:linear-gradient(135deg, rgba(245,158,11,.14), rgba(251,113,133,.08)); border:1px solid rgba(245,158,11,.28); border-radius:14px; color:var(--text-color); line-height:1.6; margin:1rem 0 0; padding:.9rem 1rem; } .legal-copy{ color:var(--text-color); line-height:1.7; margin:.55rem 0 0; } .legal-copy a, .legal-tile a{ color:#7dd3fc; font-weight:700; text-decoration:none; } .legal-copy a:hover, .legal-tile a:hover{ text-decoration:underline; } .legal-hero .section-title, .legal-tile .section-title{ margin-bottom:.45rem; } .legal-hero .section-title-rule, .legal-tile .section-title-rule{ margin:0 0 .8rem 0; } .legal-list{ margin:.25rem 0 0 0; padding-left:1.1rem; color:var(--text-color); line-height:1.65; } .legal-list li{ margin:.55rem 0; } .legal-list strong{ color:var(--heading-color); } .faq-item{ padding:.85rem 0; border-top:1px solid rgba(255,255,255,0.07); } .faq-item:first-of-type{ border-top:0; padding-top:.25rem; } .faq-item[open]{ padding-bottom:1rem; } .faq-q{ cursor:pointer; list-style:none; font-weight:800; color:var(--heading-color); letter-spacing:.01em; } .faq-q::-webkit-details-marker{ display:none; } .faq-q::after{ content:"+"; float:right; width:1.6rem; height:1.6rem; display:inline-grid; place-items:center; margin-left:1rem; border:1px solid rgba(255,255,255,.12); border-radius:.55rem; color:#7dd3fc; background:rgba(255,255,255,.04); } .faq-item[open] .faq-q::after{ content:"-"; } .faq-a{ margin-top:.45rem; color:var(--muted-color); line-height:1.65; } .faq-a a{ color:#7dd3fc; font-weight:700; text-decoration:none; } .faq-a a:hover{ text-decoration:underline; } @media (max-width: 768px){ body{ display:flex; flex-direction:column; min-height:100vh; } main{ flex:1 0 auto; } .site-footer{ max-width:100%; width:calc(100% - 2.5rem); margin:0 1.25rem 0; row-gap:.4rem; justify-content:center; text-align:center; padding:1.25rem 0; } .footer-socials{ width:100%; justify-content:center; } } /* --- Overview tiles polish --- */ .grid .tile { padding: 1rem 1.1rem; text-align: left; /* read like cards */ } /* --- Overview tiles: number contained + bold labels --- */ .grid .tile{ padding:1rem 1.1rem; text-align:left; } .tile-number{ display:block; width:100%; font-weight:800; font-size: clamp(1.1rem, 3.4vw, 1.8rem); line-height:1.05; font-variant-numeric: tabular-nums; white-space:nowrap; /* keep on one line */ overflow:hidden; /* hide overflow until we auto-shrink */ text-overflow:clip; } .tile-label{ margin-top:6px; font-size:0.95rem; font-weight:700; /* bolder label */ letter-spacing:0.2px; color:var(--text-color); opacity:.95; } .overview-mini-grid .tile{ --stat-accent:#7dd3fc; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:14px; background: radial-gradient(circle at top right, rgba(255,255,255,.12), rgba(255,255,255,0) 38%), linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12)), var(--tile-bg); box-shadow:inset 0 10px 24px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.05); } .overview-mini-grid .tile::before{ content:""; position:absolute; inset:auto -22% -45% auto; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,0) 70%); pointer-events:none; } .overview-stat-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.85rem; margin-bottom:.55rem; } .overview-mini-grid .tile-label{ margin-top:0; display:inline-block; position:relative; width:fit-content; padding-bottom:8px; font-size:.88rem; font-weight:700; color:var(--text-color); opacity:1; text-transform:none; letter-spacing:.01em; line-height:1.2; } .overview-mini-grid .tile-label::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:linear-gradient(to right, white 0%, white 40%, transparent 100%); } .overview-stat-icon{ width:34px; height:34px; border-radius:11px; flex:0 0 34px; border:1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(0,0,0,.14); background-repeat:no-repeat; background-position:center; background-size:18px 18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } .overview-mini-grid .tile-number{ font-size:clamp(1.16rem,1.95vw,1.76rem); line-height:1.02; } .overview-stat-accent{ margin-top:.7rem; height:6px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.06); overflow:hidden; } .overview-stat-accent-fill{ display:block; width:var(--pct,44%); height:100%; border-radius:inherit; background:linear-gradient(90deg, color-mix(in srgb, var(--stat-accent) 76%, white 24%), var(--stat-accent)); box-shadow:0 0 12px color-mix(in srgb, var(--stat-accent) 38%, transparent); } .overview-mini-grid .stat-vehicles{--stat-accent:#2dd4bf;} .overview-mini-grid .stat-tests{--stat-accent:#7dd3fc;} .overview-mini-grid .stat-defects{--stat-accent:#fb7185;} .overview-mini-grid .stat-makes{--stat-accent:#60a5fa;} .overview-mini-grid .stat-models{--stat-accent:#34d399;} .overview-mini-grid .stat-colours{--stat-accent:#c084fc;} .overview-mini-grid .stat-fuel{--stat-accent:#f59e0b;} .overview-mini-grid .stat-miles{--stat-accent:#22d3ee;} .overview-mini-grid .stat-vehicles .overview-stat-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3s1.34 3 3 3m-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5S5 6.34 5 8s1.34 3 3 3m0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13m8 0c-.29 0-.62.02-.97.05c1.16.84 1.97 1.94 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5'/%3E%3C/svg%3E"); } .overview-mini-grid .stat-tests .overview-stat-icon, .overview-mini-grid .stat-models .overview-stat-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M19 3H5c-1.1 0-2 .9-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5c0-1.1-.9-2-2-2m-7 14H7v-2h5zm5-4H7v-2h10zm0-4H7V7h10z'/%3E%3C/svg%3E"); } .overview-mini-grid .stat-defects .overview-stat-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2'/%3E%3C/svg%3E"); } .overview-mini-grid .stat-makes .overview-stat-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M12 2a10 10 0 1 0 10 10h-8a2 2 0 0 1-2-2zm2 0v8h8A10 10 0 0 0 14 2'/%3E%3C/svg%3E"); } .overview-mini-grid .stat-colours .overview-stat-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M12 3C7 3 3 6.58 3 11c0 2.39 1.17 4.47 3 5.82V21l4.16-2.08c.59.05 1.2.08 1.84.08c5 0 9-3.58 9-8s-4-8-9-8'/%3E%3C/svg%3E"); } .overview-mini-grid .stat-fuel .overview-stat-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M12.66 2.58a1 1 0 0 0-1.32 0C9.45 4.24 5 8.57 5 13a7 7 0 0 0 14 0c0-4.43-4.45-8.76-6.34-10.42M12 18a5 5 0 0 1-5-5c0-2.86 2.81-5.98 5-7.99c2.19 2.01 5 5.13 5 7.99a5 5 0 0 1-5 5'/%3E%3C/svg%3E"); } .overview-mini-grid .stat-miles .overview-stat-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.9' d='M12 4a9 9 0 0 0-9 9h2a7 7 0 1 1 14 0h2a9 9 0 0 0-9-9m0 2.5A6.5 6.5 0 0 0 5.5 13h2a4.5 4.5 0 1 1 9 0h2A6.5 6.5 0 0 0 12 6.5m-1 5.5l-3.2 3.2l1.4 1.4L12.4 13H17v-2h-5.6zM4 18h16v2H4z'/%3E%3C/svg%3E"); } /*for timeperoid tops*/ /* Dropdown + Go button in CarNerd glass style */ .jump-group { display: flex; align-items: center; gap: 0; /* seamless join */ height: 42px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--tile-bg); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); overflow: hidden; /* keeps corners clean */ } /* The dropdown itself */ .jump-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 0; outline: 0; height: 100%; padding: 0 44px 0 12px; /* space for arrow */ min-width: 220px; color: var(--text-color); background: transparent; cursor: pointer; } /* Add a custom dropdown arrow */ .jump-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.85' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px; } /* Focus ring like your search-group */ .jump-group:focus-within { box-shadow: 0 0 0 2px rgba(255,255,255,0.15), 0 0 0 4px rgba(255,255,255,0.06); } /* Make the GO button join nicely */ .jump-group .btn { height: 100%; border-left: 1px solid var(--border-color); } /* Mobile: fill width nicely */ @media (max-width: 768px) { .jump-group { width: 100%; height: 44px; } .jump-select { flex: 1 1 auto; min-width: 0; } }