.index-page { position: relative; } .is-hidden { display: none !important; } .page-layout { display: flex; align-items: flex-start; gap: 0; } .page-sidebar { width: 56px; flex-shrink: 0; position: sticky; top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 4px; border-right: 1px solid var(--border); align-self: flex-start; } .page-sidebar-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--muted); background: none; border: none; cursor: pointer; transition: color .15s, background .15s; position: relative; } .page-sidebar-icon:hover { color: var(--text); background: var(--surface); } .page-sidebar-icon.active { color: var(--accent); background: rgba(232,176,32,.1); } .page-sidebar-icon.active::before { content: ''; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--accent); border-radius: 0 2px 2px 0; } .page-sidebar-sep { width: 28px; height: 1px; background: var(--border); margin: 6px 0; } .page-main { flex: 1; min-width: 0; padding-left: 28px; } .hero { padding: 32px 0 28px; position: relative; overflow: hidden; border-bottom: 1px solid var(--border); margin-bottom: 22px; } .hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 15% 50%, rgba(232,176,32,.07) 0%, transparent 55%), radial-gradient(ellipse at 75% 30%, rgba(212,90,26,.05) 0%, transparent 45%); pointer-events: none; } .hero-swatches { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; opacity: .22; pointer-events: none; } .hero-swatches-col { display: flex; flex-direction: column; gap: 4px; } .hero-swatch-chip { width: 22px; height: 22px; border-radius: 4px; } .hero-content { position: relative; z-index: 1; max-width: 560px; } .hero-eyebrow { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 10px; } h1 { font-family: var(--display); font-size: clamp(36px, 6vw, 66px); letter-spacing: .03em; line-height: .95; color: var(--text); margin-bottom: 12px; } h1 em { font-style: normal; background: linear-gradient(135deg, var(--accent) 0%, #f5c840 40%, var(--accent2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-proof { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); line-height: 1.6; } .mode-pills { display: none; } .panel { display: none; } .panel.active { display: block; } .panel-intro, .compare-intro { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .panel-intro { margin-bottom: 16px; } .compare-intro { margin-bottom: 20px; } .name-search-experience { position: relative; } .mobile-panel-shortcuts { display: none; } .history-block { margin-top: 20px; } .history-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .history-title { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); display: flex; align-items: center; gap: 6px; } .history-title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .7; flex-shrink: 0; } .history-clear { background: none; border: none; color: var(--muted); font-family: var(--mono); font-size: 10px; cursor: pointer; text-transform: uppercase; letter-spacing: .06em; padding: 3px 6px; border-radius: 3px; transition: color .12s; margin-left: auto; } .history-clear:hover { color: var(--accent); } .history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .history-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; text-decoration: none; color: var(--text); display: block; transition: border-color .2s, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; } .history-card:hover { border-color: var(--border2); transform: translateY(-2px); box-shadow: 0 6px 18px -4px rgba(0,0,0,.5); } .history-swatch { height: 52px; width: 100%; position: relative; } .history-swatch::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.4) 100%); } .history-info { padding: 7px 10px 9px; } .history-name { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .history-type { font-family: var(--mono); font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .history-empty { font-family: var(--mono); font-size: 11px; color: var(--muted); padding: 20px 0; display: flex; align-items: center; gap: 8px; } .search-row { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; align-items: stretch; } .input-wrap { position: relative; } .input-wrap .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 16px; pointer-events: none; } input[type="text"], select { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); color: var(--text); font-family: var(--body); font-size: 14px; padding: 12px 14px 12px 42px; outline: none; transition: border-color .2s; } input[type="text"]:focus, select:focus { border-color: var(--accent); } select { padding-left: 14px; cursor: pointer; } option { background: var(--card); } .hex-form { display: contents; } .hex-row { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: stretch; margin-bottom: 16px; } input[type="color"] { width: 100%; height: 100%; min-height: 46px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); cursor: pointer; padding: 4px; } input[type="color"]:focus { outline: none; border-color: var(--accent); } input[type="text"].hex-text { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; padding-left: 14px; } .btn { padding: 12px 22px; border-radius: var(--r); border: 1px solid var(--border2); background: var(--card); color: var(--text); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: all .15s; white-space: nowrap; } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #0e0e0f; font-weight: 700; } .btn.primary:hover { background: #f5c840; border-color: #f5c840; } .filter-row { display: flex; gap: 10px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; } .filter-label { font-size: 12px; color: var(--muted); font-family: var(--mono); margin-right: 4px; } .filter-chip { font-size: 12px; } .filter-separator { width: 1px; height: 20px; background: var(--border); margin: 0 4px; flex-shrink: 0; } .family-toggle { display: flex; align-items: center; gap: 5px; } .family-toggle-icon { font-size: 11px; } .family-source-badge { font-size: 9px; background: rgba(232,176,32,.15); color: var(--accent); padding: 1px 5px; border-radius: 3px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; } .results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .results-count { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .paint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } @keyframes card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .paint-card { animation: none !important; } } .paint-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; position: relative; animation: card-in .32s cubic-bezier(.22,1,.36,1) both; transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, border-color .25s ease; } .paint-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, var(--border)); box-shadow: 0 14px 40px -10px color-mix(in srgb, var(--c) 50%, rgba(0,0,0,.7)), 0 2px 8px -2px rgba(0,0,0,.4); } .paint-card.selected { border-color: var(--accent); box-shadow: 0 14px 40px -10px color-mix(in srgb, var(--c) 50%, rgba(0,0,0,.7)), 0 2px 8px -2px rgba(0,0,0,.4); } .paint-card.selected::after { content: '▶'; position: absolute; top: 8px; right: 10px; font-size: 9px; color: var(--accent); pointer-events: none; z-index: 3; } .card-swatch { height: 112px; width: 100%; position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.34,1.56,.64,1); transform-origin: bottom; } .paint-card:hover .card-swatch { transform: scaleY(1.06); } .card-swatch::before { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(255,255,255,.10) 0%, transparent 55%); pointer-events: none; z-index: 1; } .card-swatch::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 52px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.38)); pointer-events: none; z-index: 1; } .card-hex-badge { position: absolute; bottom: 8px; left: 10px; font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,.55); letter-spacing: .04em; z-index: 2; pointer-events: none; } .card-body { padding: 12px 14px 14px; } .card-name { font-weight: 600; font-size: 13px; color: var(--text); margin-bottom: 5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .range-tag { font-size: 9px; color: var(--muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; } .card-view-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); text-decoration: none; border: 1px solid rgba(232,176,32,.28); padding: 4px 10px; border-radius: 5px; transition: background .15s, border-color .15s; } .card-view-link:hover { background: rgba(232,176,32,.10); border-color: rgba(232,176,32,.50); } .sim-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 480px) { .sim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .sim-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sim-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .25s, transform .25s cubic-bezier(.34,1.56,.64,1); } .sim-card:hover { border-color: var(--border2); transform: translateY(-3px); box-shadow: 0 10px 28px -8px rgba(0,0,0,.6); } .sim-card-swatch { display: block; height: 112px; position: relative; text-decoration: none; background: var(--border); } .sim-card-swatch::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.1) 0%, transparent 50%); pointer-events: none; } .sim-card-swatch::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 48px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.32)); pointer-events: none; } .sim-card-pct { position: absolute; bottom: 8px; left: 10px; font-family: var(--display); font-size: 28px; line-height: 1; letter-spacing: .02em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.55); pointer-events: none; z-index: 1; } .sim-card-pct small { font-size: .48em; letter-spacing: .04em; opacity: .85; } .sim-card-body { padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 5px; flex: 1; } .sim-card-name { font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sim-card-brand-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sim-card-range { font-family: var(--mono); font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .sim-card-score { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; } .sim-card-score .de-bar-wrap { height: 3px; } .sim-de-meta { display: flex; align-items: center; justify-content: space-between; } .sim-card-footer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); } .sim-card-hex { font-family: var(--mono); font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; flex: 1; } .sim-card-view { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); text-decoration: none; border: 1px solid rgba(232,176,32,.3); padding: 3px 8px; border-radius: 4px; transition: background .15s; white-space: nowrap; } .sim-card-view:hover { background: rgba(232,176,32,.1); } .sim-buy-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 8px 12px; margin-top: 6px; border-radius: var(--r); border: 1px solid var(--border2); background: transparent; color: var(--muted); font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .sim-buy-btn.open { border-color: rgba(232,176,32,.35); color: var(--accent); background: rgba(232,176,32,.05); } .sim-buy-btn:hover { border-color: var(--accent); color: var(--accent); } .sim-shops-list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; } .sim-shop-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--border); text-decoration: none; color: var(--text); font-family: var(--mono); font-size: 9px; transition: border-color .15s; } .sim-shop-row:hover { border-color: var(--accent); } .sim-shop-icon { font-size: 12px; flex-shrink: 0; } .sim-shop-name { flex: 1; letter-spacing: .04em; } .sim-shop-arrow { font-size: 9px; color: var(--muted); } .de-bar-wrap { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; } .de-bar { height: 100%; border-radius: 3px; transition: width .4s; } .de-row { display: flex; justify-content: space-between; align-items: center; } .de-val { font-family: var(--mono); font-size: 10px; color: var(--muted); } .de-label { display: inline-block; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: 3px; } .de-label.identical { background: rgba(74,170,104,.15); color: var(--green); } .de-label.tres-proche { background: rgba(74,138,212,.15); color: var(--blue); } .de-label.proche { background: rgba(154,106,212,.15); color: var(--purple); } .de-label.similaire { background: rgba(212,90,26,.12); color: var(--accent2); } .de-label.different { background: rgba(212,74,74,.12); color: var(--red); } .similar-section { display: block; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); } .source-hero { position: relative; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--border2); height: 88px; margin-bottom: 12px; background: var(--card); } .source-hero-swatch { position: absolute; inset: 0; background: var(--border); } .source-hero-swatch::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,12,18,.85) 0%, rgba(10,12,18,.52) 46%, rgba(10,12,18,.1) 100%); } .source-hero-swatch::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.07) 0%, transparent 45%); } .source-hero-body { position: absolute; inset: 0; padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; gap: 3px; z-index: 1; min-width: 0; padding-right: 80px; } .source-hero-eyebrow { font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .14em; color: rgba(228,230,239,.5); } .source-hero-name { font-family: var(--display); font-size: 30px; line-height: 1; letter-spacing: .03em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .source-hero-meta { font-family: var(--mono); font-size: 9px; color: rgba(228,230,239,.55); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .source-hero-badge { position: absolute; top: 12px; right: 12px; z-index: 2; font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .07em; color: rgba(228,230,239,.65); background: rgba(10,12,18,.55); border: 1px solid var(--border2); padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(4px); white-space: nowrap; } .sim-bar { display: flex; flex-direction: column; gap: 6px; background: rgba(22,25,36,.88); backdrop-filter: blur(14px); border: 1px solid var(--border2); border-radius: 14px; padding: 8px 10px; margin-bottom: 16px; position: sticky; top: 4px; z-index: 10; } .sim-bar-brands { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; } .sim-bar-brands::-webkit-scrollbar { display: none; } .sim-bar-chip { flex-shrink: 0; padding: 4px 11px; border-radius: 20px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; transition: all .15s; white-space: nowrap; } .sim-bar-chip:hover, .sim-bar-chip.active { background: rgba(232,176,32,.1); color: var(--accent); border-color: rgba(232,176,32,.25); } .sim-bar-row2 { display: flex; align-items: center; padding-top: 4px; border-top: 1px solid var(--border); } .sim-bar-family { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 4px 11px 4px 8px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; transition: all .15s; white-space: nowrap; } .sim-bar-family.active { border-color: rgba(74,170,104,.4); color: var(--green); background: rgba(74,170,104,.07); } .sim-bar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border2); flex-shrink: 0; transition: background .2s; } .sim-bar-family.active .sim-bar-dot { background: var(--green); box-shadow: 0 0 6px rgba(74,170,104,.5); } .sim-bar-sep { display: none; } .sim-results-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; } .sim-results-count { font-family: var(--display); font-size: 22px; letter-spacing: .04em; color: var(--text); line-height: 1; } .sim-results-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } @keyframes sim-pulse { 0%, 100% { opacity: .3; } 50% { opacity: .65; } } .sim-skel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; display: flex; flex-direction: column; animation: sim-pulse 1.8s ease-in-out infinite; } .sim-skel-card:nth-child(2) { animation-delay: .25s; } .sim-skel-card:nth-child(3) { animation-delay: .5s; } .sim-skel-card:nth-child(4) { animation-delay: .12s; } .sim-skel-card:nth-child(5) { animation-delay: .37s; } .sim-skel-card:nth-child(6) { animation-delay: .62s; } .sim-skel-swatch { height: 112px; background: var(--card); } .sim-skel-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .sim-skel-line { border-radius: 3px; background: var(--card); } .sim-skel-name { height: 12px; width: 68%; } .sim-skel-sub { height: 9px; width: 44%; } .sim-skel-bar { height: 3px; width: 100%; } .sim-skel-foot { height: 9px; width: 55%; } .shop-aff-tag { font-size: 9px; font-family: var(--mono); opacity: .45; margin-left: 2px; } .shop-aff-note { font-family: var(--mono); font-size: 9px; color: var(--muted); margin-top: 6px; opacity: .6; } .price-btn { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--border2); background: transparent; color: var(--muted); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: all .15s; } .price-btn:hover { border-color: var(--accent); color: var(--accent); } .price-panel { margin-top: 8px; } .shop-links { display: flex; flex-direction: column; gap: 5px; } .shop-link { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: var(--text); font-size: 12px; font-weight: 500; transition: border-color .12s, background .12s; } .shop-link:hover { border-color: var(--border2); background: var(--card); } .shop-link-icon { font-size: 14px; flex-shrink: 0; } .shop-link-name { flex: 1; } .shop-link-arrow { font-size: 11px; color: var(--muted); } .price-error { color: var(--red); font-family: var(--mono); font-size: 11px; } .recipe-import-card { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border: 1px solid var(--border); border-radius: var(--r2); padding: 18px; } .recipe-import-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .recipe-import-title { font-family: var(--display); font-size: 22px; letter-spacing: .03em; } .recipe-import-subtitle, .recipe-import-hint, .recipe-import-label, .recipe-import-summary, .recipe-import-result-sub, .recipe-import-result-note, .recipe-import-alt-label, .recipe-import-alt-brand { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .recipe-import-field { display: block; } .recipe-import-label { display: inline-block; margin-bottom: 8px; } .recipe-import-textarea { width: 100%; min-height: 168px; resize: vertical; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); color: var(--text); font-family: var(--body); font-size: 14px; line-height: 1.5; padding: 14px 16px; outline: none; } .recipe-import-textarea:focus { border-color: var(--accent); } .recipe-import-hint { margin: 10px 0 16px; } .recipe-import-summary { margin-bottom: 14px; } .recipe-import-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .recipe-import-result { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); padding: 14px; } .recipe-import-result-found { border-color: rgba(74,170,104,.3); } .recipe-import-result-discontinued { border-color: rgba(212,112,26,.3); } .recipe-import-result-missing { border-color: rgba(212,74,74,.28); } .recipe-import-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .recipe-import-result-title { font-size: 14px; font-weight: 600; line-height: 1.35; } .recipe-import-link { color: var(--text); text-decoration: none; } .recipe-import-link:hover { color: var(--accent); } .recipe-import-link-missing { color: var(--text); } .recipe-import-result-sub { margin-top: 6px; } .recipe-import-result-note { margin-top: 10px; color: var(--text); opacity: .88; } .recipe-import-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .recipe-import-badge.is-found { background: rgba(74,170,104,.12); color: var(--green); } .recipe-import-badge.is-discontinued { background: rgba(212,112,26,.12); color: var(--accent2); } .recipe-import-badge.is-missing { background: rgba(212,74,74,.12); color: var(--red); } .recipe-import-alt { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .recipe-import-alt-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); margin-top: 8px; } .recipe-import-alt-link:hover .recipe-import-alt-name { color: var(--accent); } .recipe-import-alt-swatch { width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); flex-shrink: 0; } .recipe-import-alt-meta { min-width: 0; } .recipe-import-alt-name { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; } .recipe-import-alt-brand { display: block; margin-top: 3px; } .recipe-import-alt-empty { display: block; margin-top: 8px; color: var(--text); font-size: 12px; } .mix-card { margin-top: 24px; padding: 20px; border: 1px solid var(--border); border-radius: var(--r2); background: radial-gradient(circle at top right, rgba(232,176,32,.12), transparent 30%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--surface); } .mix-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; } .mix-title { font-family: var(--display); font-size: 26px; letter-spacing: .04em; } .mix-subtitle { color: var(--muted); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; } .mix-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; } .mix-input-card { display: block; padding: 14px; border: 1px solid var(--border); border-radius: var(--r); background: rgba(255,255,255,.02); } .mix-input-label { display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .mix-picker-row { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: stretch; } .mix-hex-input { width: 100%; } .mix-ratio-block { margin-bottom: 18px; } .mix-ratio-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; } .mix-ratio-value { font-family: var(--mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; } #mix-ratio { width: 100%; accent-color: var(--accent); } .mix-preview { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: center; margin-bottom: 18px; } .mix-preview-strip { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px; } .mix-preview-swatch { min-height: 88px; border-radius: var(--r); border: 1px solid rgba(255,255,255,.08); } .mix-preview-result { box-shadow: 0 0 0 1px rgba(232,176,32,.35), 0 10px 24px -10px rgba(232,176,32,.45); } .mix-preview-meta { padding: 14px; border: 1px solid var(--border); border-radius: var(--r); background: rgba(255,255,255,.02); } .mix-result-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; } .mix-result-hex { font-family: var(--display); font-size: 28px; letter-spacing: .06em; color: var(--accent); } .compare-search-wrap { padding: 12px 14px; } .compare-input-wrap { position: relative; } .compare-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); } .compare-search-input { width: 100%; padding: 10px 10px 10px 36px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); color: var(--text); font-family: var(--body); font-size: 16px; outline: none; } .compare-search-input:focus { border-color: var(--accent); } .compare-results { margin-top: 8px; max-height: 160px; overflow-y: auto; } .compare-search-result { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r); cursor: pointer; transition: background .1s; } .compare-search-result:hover { background: var(--card); } .compare-search-swatch { width: 28px; height: 28px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.08); } .compare-search-name { font-size: 12px; font-weight: 600; } .compare-search-brand { font-family: var(--mono); font-size: 10px; color: var(--muted); } .compare-no-results { font-family: var(--mono); font-size: 10px; color: var(--muted); padding: 8px; } .compare-result { display: block; } .compare-layout { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; } .compare-slot { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; } .compare-slot-header { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .compare-slot-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .compare-slot-clear { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; transition: color .12s; } .compare-slot-clear:hover { color: var(--red); } .compare-swatch { height: 80px; width: 100%; background: var(--card); } .compare-info { padding: 12px 14px; } .compare-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; } .compare-sub { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; } .compare-hex { font-family: var(--mono); font-size: 12px; color: var(--muted); } .compare-search-row { display: grid; grid-template-columns: 1fr; gap: 8px; } .compare-result-slot { padding: 4px 0; } .compare-vs { display: flex; align-items: center; justify-content: center; } .compare-vs-badge { font-family: var(--display); font-size: 36px; color: var(--muted); letter-spacing: .04em; } .compare-result-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); padding: 20px; text-align: center; } .compare-result-de { font-family: var(--display); font-size: 56px; line-height: 1; margin-bottom: 4px; } .compare-result-label { display: inline-block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 4px 12px; border-radius: 3px; margin-bottom: 12px; } .compare-swatches { display: flex; height: 60px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); } .compare-swatch-half { flex: 1; } .compare-result-note { font-size: 12px; color: var(--muted); margin-top: 10px; } .compare-empty-state { padding: 16px; text-align: center; color: var(--muted); font-size: 12px; } .compare-empty-icon { font-size: 24px; margin-bottom: 8px; display: block; } .cta-section { border-top: 1px solid var(--border); padding: 32px 0 40px; margin-top: 40px; } .cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cta-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); padding: 16px 20px; text-decoration: none; color: var(--text); transition: border-color .2s, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; } .cta-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px -6px rgba(0,0,0,.5); } .cta-card--wide { grid-column: 1 / -1; } .cta-icon { font-size: 24px; flex-shrink: 0; } .cta-title { font-family: var(--display); font-size: 16px; letter-spacing: .04em; margin-bottom: 2px; } .cta-sub { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .cta-arrow { font-size: 16px; color: var(--muted); margin-left: auto; transition: transform .15s, color .15s; flex-shrink: 0; } .cta-card:hover .cta-arrow { transform: translateX(4px); color: var(--accent); } #toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--card); border: 1px solid var(--border2); color: var(--text); padding: 12px 22px; border-radius: var(--r2); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; transition: transform .3s; z-index: 200; pointer-events: none; } #toast.show { transform: translateX(-50%) translateY(0); } @media (min-width: 640px) { .mix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 760px) { .search-row { grid-template-columns: 1fr auto auto; } .hex-row { grid-template-columns: 56px 1fr auto; } .compare-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } .compare-search-row { grid-template-columns: 1fr auto; } .history-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } @media (min-width: 860px) { .mix-preview { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .history-grid { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 759px) { .page-sidebar { display: none; } .page-main { padding-left: 0; } .mode-pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 0 16px; margin-bottom: 6px; border-bottom: 1px solid var(--border); margin-top: 4px; } .mode-pills::-webkit-scrollbar { display: none; } .mode-pill { font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border); color: var(--muted); background: none; cursor: pointer; transition: border-color .15s, color .15s, background .15s; white-space: nowrap; flex-shrink: 0; min-height: 36px; } .mode-pill.active { border-color: var(--accent); color: var(--accent); background: rgba(232,176,32,.08); } .hero { padding: 20px 0 18px; margin-bottom: 0; border-bottom: none; } h1 { font-size: clamp(30px, 8vw, 46px); } .hero-swatches { display: none; } .history-grid { display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; padding-bottom: 4px; } .history-grid::-webkit-scrollbar { display: none; } .history-card { flex-shrink: 0; width: 120px; } .history-swatch { height: 44px; } .cta-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .cta-card { padding: 12px 14px; gap: 10px; } .cta-icon { font-size: 20px; } .cta-title { font-size: 14px; } } @media (max-width: 640px) { .search-row { grid-template-columns: 1fr; } .search-row > * { min-width: 0; } .hex-row { grid-template-columns: 1fr; } #hex-picker-wrap { display: none; } .hex-row .btn { width: 100%; } .panel { padding: 16px; border: 1px solid var(--border); border-radius: var(--r2); background: radial-gradient(circle at top right, rgba(232,176,32,.08), transparent 30%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--surface); } .filter-row { flex-wrap: nowrap; overflow-x: auto; align-items: stretch; padding-bottom: 6px; margin-bottom: 18px; scrollbar-width: none; } .filter-row::-webkit-scrollbar { display: none; } .filter-label, .filter-separator { display: none; } .filter-chip { font-size: 10px; flex: 0 0 auto; } .source-hero { height: 72px; } .source-hero-name { font-size: 22px; } .sim-bar { position: static; border-radius: 10px; } .similar-section { margin-top: 20px; padding-top: 20px; } .paint-grid { grid-template-columns: 1fr; } .paint-grid .paint-card { display: flex; flex-direction: row; } .paint-grid .card-swatch { width: 80px; flex-shrink: 0; height: auto; min-height: 80px; } .sim-grid { grid-template-columns: 1fr; } .sim-card-swatch { height: 96px; } .sim-card-pct { font-size: 24px; } .compare-layout { grid-template-columns: 1fr; gap: 10px; } .compare-sep { display: none; } .compare-slot { min-height: 100px; } .compare-search-wrap { padding: 12px; } .compare-results { max-height: 220px; } .mix-card { padding: 16px; } .mix-header, .recipe-import-header { grid-template-columns: 1fr; display: grid; } .mix-header .btn, .recipe-import-header .btn { width: 100%; } .mix-grid { grid-template-columns: 1fr; } .mix-picker-row { grid-template-columns: 48px 1fr; } .mix-preview { grid-template-columns: 1fr; } .mix-preview-swatch { min-height: 72px; } .card-swatch { height: auto; min-height: 80px; } .recipe-import-results-grid { grid-template-columns: 1fr; } select { width: 100%; box-sizing: border-box; } } @media (max-width: 400px) { .cta-grid { gap: 6px; } } @media (hover: none) and (pointer: coarse) { #index-page input[type="text"], #index-page select, #index-page textarea, #index-page .compare-search-input { font-size: 16px; } #index-page.mobile-name-search-active::before { content: ''; position: fixed; inset: 0 0 0 0; background: rgba(10,10,12,.5); backdrop-filter: blur(8px); z-index: 94; } body.mobile-name-search-mode .nav, body.mobile-name-search-mode .bottom-bar, body.mobile-name-search-mode .site-footer { opacity: 0; pointer-events: none; } .mobile-search-anchor-active { position: relative; z-index: 96; } .name-search-experience.mobile-search-shell-active { position: fixed; top: max(8px, env(safe-area-inset-top, 0px)); left: var(--mobile-results-left, 12px); width: var(--mobile-results-width, calc(100vw - 24px)); height: var(--mobile-results-shell-height, calc(100vh - 16px)); display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; padding: 14px; background: rgba(18,18,22,.98); border: 1px solid var(--border2); border-radius: var(--r2); box-shadow: 0 18px 40px -16px rgba(0,0,0,.65); z-index: 95; } .name-search-experience.mobile-search-shell-active .search-row { margin-bottom: 0; } .name-search-experience.mobile-search-shell-active .search-row .input-wrap input, .name-search-experience.mobile-search-shell-active .search-row select { min-height: 52px; } .name-search-experience.mobile-search-shell-active #name-spinner { padding: 10px 0; } .name-search-experience.mobile-search-shell-active #name-results-wrap { min-height: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-right: 2px; } .name-search-experience.mobile-search-shell-active #name-results-wrap .empty, .name-search-experience.mobile-search-shell-active #name-results-wrap .paint-grid { margin-bottom: 0; } .name-search-experience.mobile-search-shell-active #name-results-wrap .paint-grid { grid-template-columns: 1fr; } .name-search-experience.mobile-search-shell-active #name-results-wrap .card-swatch { height: auto; min-height: 80px; } .name-search-experience.mobile-search-shell-active #name-results-wrap .card-body { padding: 14px 16px 16px; } .name-search-experience.mobile-search-shell-active #name-results-wrap .results-header { position: sticky; top: 0; z-index: 2; background: rgba(18,18,22,.98); padding-bottom: 8px; } #name-results-wrap.mobile-search-results, .compare-results.mobile-search-results { position: fixed; top: var(--mobile-results-top, 120px); left: var(--mobile-results-left, 12px); width: var(--mobile-results-width, calc(100vw - 24px)); max-height: var(--mobile-results-max-height, 42vh); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding: 10px; background: rgba(18,18,22,.98); border: 1px solid var(--border2); border-radius: var(--r2); box-shadow: 0 8px 32px -8px rgba(0,0,0,.7); z-index: 95; } } .match-card { transition: border-color .2s, box-shadow .25s, transform .3s cubic-bezier(.34,1.56,.64,1); cursor: pointer; } .match-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -4px rgba(0,0,0,.5); border-color: var(--border2); } .de-bar { animation: _deBarIn .6s cubic-bezier(.16,1,.3,1) both; } @keyframes _deBarIn { from { width: 0 !important; } }