/* * Site search overlay — shared by every entry point (v8 header, shopping hero…). * * Self-contained on purpose: it renders on top of both the v2/Bootstrap pages * and the v8 "Border Board" skin, so it defines its own tokens instead of * inheriting --v2-* or --n8-*. Only the theme switch is shared: the whole site * flips on , and so does this. * * Two layouts, one markup: a centred spotlight ≥768px, a full-screen sheet * below it. Neither ever navigates away — results are fetched in place. */ :root { --nkds-bg: #ffffff; --nkds-ink: #0f172a; --nkds-mut: #64748b; --nkds-line: #e2e8f0; --nkds-hover: #f1f5f9; --nkds-field: #f8fafc; --nkds-link: #1a56db; --nkds-visited: #6b21a8; --nkds-chip-bg: #eef2ff; --nkds-chip-ink: #3730a3; --nkds-scrim: rgba(15, 23, 42, .45); --nkds-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 25px 50px -12px rgba(0,0,0,.25); --nkds-mark: #fef08a; --nkds-mark-ink: #111827; } [data-theme="dark"] { --nkds-bg: #0f172a; --nkds-ink: #e2e8f0; --nkds-mut: #94a3b8; --nkds-line: #334155; --nkds-hover: #1e293b; --nkds-field: #1e293b; --nkds-link: #7dabf8; --nkds-visited: #c4a6f5; --nkds-chip-bg: #1e2a4a; --nkds-chip-ink: #a5b4fc; --nkds-scrim: rgba(2, 6, 23, .7); --nkds-shadow: 0 10px 15px -3px rgba(0,0,0,.5), 0 25px 50px -12px rgba(0,0,0,.6); --nkds-mark: #7c5e12; --nkds-mark-ink: #fff7ed; } /* ---------------------------------------------------------------- trigger */ .nkds-trigger { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; background: none; border: 0; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 600; color: currentColor; cursor: pointer; } .nkds-trigger:hover { background: rgba(127, 127, 127, .14); } .nkds-trigger svg { width: 18px; height: 18px; flex: none; } .nkds-trigger__label { display: none; } @media (min-width: 1020px) { .nkds-trigger__label { display: inline; } } /* ------------------------------------------------------------- container */ .nkds { position: fixed; inset: 0; z-index: 12000; display: none; } .nkds.is-open { display: block; } .nkds__scrim { position: absolute; inset: 0; background: var(--nkds-scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .nkds__panel { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--nkds-bg); color: var(--nkds-ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Full-screen sheet on phones: the panel IS the page while it is open. */ padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } @media (min-width: 768px) { /* Spotlight. Anchored near the top so the result list grows downward into stable space instead of the box jumping as results arrive. */ .nkds__panel { inset: auto; top: 7vh; left: 50%; transform: translateX(-50%); width: min(680px, calc(100vw - 32px)); max-height: 80vh; border: 1px solid var(--nkds-line); border-radius: 16px; box-shadow: var(--nkds-shadow); overflow: hidden; } } /* ------------------------------------------------------------------- bar */ .nkds__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--nkds-line); background: var(--nkds-bg); flex: none; } .nkds__ico { width: 20px; height: 20px; flex: none; color: var(--nkds-mut); } .nkds__input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 4px; background: none; border: 0; outline: none; font: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */ color: var(--nkds-ink); } .nkds__input::placeholder { color: var(--nkds-mut); opacity: 1; } .nkds__input::-webkit-search-cancel-button { display: none; } .nkds__btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 34px; padding: 0 10px; background: none; border: 0; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--nkds-mut); cursor: pointer; } .nkds__btn:hover { background: var(--nkds-hover); color: var(--nkds-ink); } .nkds__btn[hidden] { display: none; } .nkds__btn svg { width: 18px; height: 18px; } /* --------------------------------------------------------------- results */ .nkds__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .nkds__list { list-style: none; margin: 0; padding: 6px 0; } .nkds-item { margin: 0; } .nkds-item__link { display: block; padding: 12px 16px; text-decoration: none; color: inherit; border-inline-start: 3px solid transparent; } .nkds-item__link:hover, .nkds-item.is-active .nkds-item__link { background: var(--nkds-hover); border-inline-start-color: var(--nkds-link); } .nkds-item__top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } .nkds-item__chip { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--nkds-chip-bg); color: var(--nkds-chip-ink); font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; } .nkds-item__date { font-size: 11.5px; color: var(--nkds-mut); } .nkds-item__title { font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--nkds-link); /* Two lines max: a SERP row must stay scannable. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nkds-item__link:visited .nkds-item__title { color: var(--nkds-visited); } .nkds-item__url { margin-top: 2px; font-size: 12px; color: var(--nkds-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: start; /* URLs stay LTR even in RTL layouts */ } .nkds-item__snip { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--nkds-mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nkds-item__snip mark, .nkds-item__title mark { background: var(--nkds-mark); color: var(--nkds-mark-ink); padding: 0 1px; border-radius: 2px; } /* ------------------------------------------------------------------- ad */ /* Sits after the 2nd result. Labelled and visually separated so it can never be mistaken for an organic result — that is an AdSense policy requirement, not a style choice. */ .nkds-ad { margin: 8px 12px; padding: 8px 4px 4px; border-top: 1px solid var(--nkds-line); border-bottom: 1px solid var(--nkds-line); } .nkds-ad[hidden] { display: none; } .nkds-ad__label { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nkds-mut); } .nkds-ad__slot { display: block; min-height: 90px; } /* ---------------------------------------------------------------- states */ .nkds__state { padding: 32px 20px; text-align: center; color: var(--nkds-mut); } .nkds__state[hidden] { display: none; } .nkds__state-title { font-size: 15px; font-weight: 600; color: var(--nkds-ink); } .nkds__state-hint { margin-top: 6px; font-size: 13.5px; } .nkds__state-q { color: var(--nkds-ink); font-weight: 600; } /* Skeleton rows: reserving the real row height means no layout shift when the results land, which is most of the perceived speed. */ .nkds__skel { padding: 6px 0; } .nkds__skel-row { padding: 12px 16px; } .nkds__skel-bar { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--nkds-hover) 25%, var(--nkds-line) 37%, var(--nkds-hover) 63%); background-size: 400% 100%; animation: nkds-shimmer 1.2s ease-in-out infinite; } .nkds__skel-bar + .nkds__skel-bar { margin-top: 8px; } .nkds__skel-bar--sm { width: 45%; } .nkds__skel-bar--md { width: 78%; } @keyframes nkds-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .nkds__skel-bar { animation: none; } } /* ------------------------------------------------------- detected-language */ .nkds__note { flex: none; padding: 6px 16px; font-size: 12px; color: var(--nkds-mut); background: var(--nkds-field); border-bottom: 1px solid var(--nkds-line); } .nkds__note[hidden] { display: none; } /* --------------------------------------------------------------- recent */ .nkds-recent[hidden] { display: none; } .nkds-recent__head { padding: 14px 16px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--nkds-mut); } .nkds-recent__list { list-style: none; margin: 0; padding: 0 0 8px; } .nkds-recent__btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; background: none; border: 0; font: inherit; font-size: 14.5px; color: var(--nkds-ink); text-align: start; cursor: pointer; } .nkds-recent__btn:hover { background: var(--nkds-hover); } .nkds-recent__btn svg { width: 16px; height: 16px; flex: none; color: var(--nkds-mut); } .nkds-recent__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* -------------------------------------------------------------- settings */ .nkds-set { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 16px 20px; } .nkds-set[hidden] { display: none; } .nkds-set__head { display: flex; align-items: center; gap: 6px; margin: 0 -8px 12px; font-size: 15px; } .nkds-set__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--nkds-line); } .nkds-set__label { font-size: 14.5px; font-weight: 600; } .nkds-set__select { height: 36px; padding: 0 10px; background: var(--nkds-field); color: var(--nkds-ink); border: 1px solid var(--nkds-line); border-radius: 8px; font: inherit; font-size: 14px; } .nkds-set__note { margin: 10px 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--nkds-mut); } .nkds-set__btn { display: block; width: 100%; margin-bottom: 8px; padding: 11px 14px; background: var(--nkds-field); color: var(--nkds-ink); border: 1px solid var(--nkds-line); border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; text-align: start; cursor: pointer; } .nkds-set__btn:hover { background: var(--nkds-hover); } .nkds-set__btn--danger { color: #b91c1c; border-color: #fca5a5; } [data-theme="dark"] .nkds-set__btn--danger { color: #fca5a5; border-color: #7f1d1d; } /* ----------------------------------------------------------------- toast */ .nkds__toast { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5; padding: 9px 16px; border-radius: 999px; background: var(--nkds-ink); color: var(--nkds-bg); font-size: 13px; font-weight: 600; box-shadow: var(--nkds-shadow); } .nkds__toast[hidden] { display: none; } /* ---------------------------------------------------------------- footer */ .nkds__foot { flex: none; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--nkds-line); font-size: 11.5px; color: var(--nkds-mut); } @media (min-width: 768px) { .nkds__foot { display: flex; } } /* Body scroll lock while the overlay owns the viewport. */ body.nkds-locked { overflow: hidden; }