/* ============================================================= Wipro Integrated Annual Report 2025-26 — Search UI Command-palette overlay. Fonts + colours inherited from the report theme (Proxima Nova, magenta #be266a). No external deps. ============================================================= */ :root { /* Light theme is the report's default — white cards, ink text, magenta accent */ --rs-bg-soft: #ffffff; --rs-bg-elev: #f7f7f9; --rs-border: #e6e6ea; --rs-border-2: #d2d2d9; --rs-text: #17171c; --rs-text-2: #56565e; --rs-text-3: #8a8a92; --rs-accent: #be266a; /* --primary from the report */ --rs-accent-d: #e0357f; /* hover */ --rs-accent-2: rgba(190,38,106,0.10); --rs-mark-bg: rgba(190,38,106,0.20); --rs-mark-fg: #93144f; --rs-shadow: 0 22px 60px rgba(20,10,30,0.16); --rs-row-hover: rgba(20,10,30,0.04); --rs-row-active:rgba(190,38,106,0.09); --rs-font: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Theme is mirrored from .page[data-theme] onto by search.js (private attr — no collision with the report’s own [data-theme] rules) */ :root[data-rs-theme="dark"] { --rs-bg-soft: #12121c; --rs-bg-elev: #1a1a26; --rs-border: rgba(255,255,255,0.10); --rs-border-2: rgba(255,255,255,0.18); --rs-text: #f2f2f6; --rs-text-2: #b8b8c2; --rs-text-3: #85858f; --rs-accent: #e0357f; --rs-accent-d: #f04d92; --rs-accent-2: rgba(224,53,127,0.16); --rs-mark-bg: rgba(224,53,127,0.28); --rs-mark-fg: #ffd6e7; --rs-shadow: 0 22px 60px rgba(0,0,0,0.55); --rs-row-hover: rgba(255,255,255,0.05); --rs-row-active:rgba(224,53,127,0.14); } /* ============================================================ STICKY-BAR SEARCH TRIGGER ============================================================ */ .site-footer__search { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px 0 14px; margin-left: auto; margin-right: 12px; background: transparent; border: 1px solid rgba(255,255,255,0.30); border-radius: 999px; color: #fff; font-family: var(--rs-font); font-size: 12px; letter-spacing: .02em; cursor: pointer; transition: border-color .2s, background .2s; } .site-footer__search:hover { border-color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.08); } .site-footer__search svg { flex-shrink: 0; } .site-footer__search .rs-kbd { font-size: 10px; line-height: 1; padding: 3px 6px; border: 1px solid rgba(255,255,255,0.35); border-radius: 4px; color: rgba(255,255,255,0.85); display: none; } @media (max-width: 720px) { .site-footer__search .rs-trig-label, .site-footer__search .rs-kbd { display: none; } .site-footer__search { padding: 0; width: 38px; margin-right: 8px; border-radius: 50%; } .site-footer__search { border: none; width: 18px; } } /* ============================================================ FULL RESULTS OVERLAY (command palette) ============================================================ */ .rs-ov { position: fixed; inset: 0; background: rgba(10,8,16,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 9000; display: none; align-items: flex-start; justify-content: center; padding: 72px 20px 40px; overflow-y: auto; } :root[data-rs-theme="dark"] .rs-ov { background: rgba(0,0,0,0.62); } .rs-ov.rs-open { display: flex; animation: rs-ov-in .2s ease-out; } @keyframes rs-ov-in { from { opacity: 0; } to { opacity: 1; } } .rs-ov-inner { width: 100%; max-width: 880px; background: var(--rs-bg-soft); border: 1px solid var(--rs-border); border-radius: 14px; box-shadow: var(--rs-shadow); display: flex; flex-direction: column; max-height: calc(100vh - 112px); overflow: hidden; font-family: var(--rs-font); animation: rs-pop .22s cubic-bezier(.2,.8,.2,1); } @keyframes rs-pop { from { transform: translateY(-8px) scale(.99); } to { transform: none; } } .rs-ov-head { padding: 8px 16px 0; border-bottom: 1px solid var(--rs-border); } .rs-ov-input-wrap { display: flex; align-items: center; gap: 12px; padding: 10px 6px 14px; } .rs-ov-icon { color: var(--rs-accent); flex-shrink: 0; } .rs-ov-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--rs-text); font-family: var(--rs-font); font-size: 22px; font-weight: 400; padding: 6px 2px; letter-spacing: -0.01em; } .rs-ov-input::placeholder { color: var(--rs-text-3); font-weight: 400; } .rs-ov-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--rs-row-hover); border: 1px solid var(--rs-border); border-radius: 8px; color: var(--rs-text-2); cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s; } .rs-ov-close:hover { background: var(--rs-row-active); color: var(--rs-text); } .rs-ov-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 4px 6px 12px; } .rs-ov-count { font-size: 12.5px; letter-spacing: .01em; color: var(--rs-text-2); font-weight: 500; } .rs-ov-chips { display: flex; flex-wrap: wrap; gap: 6px; } .rs-ov-chip { font: inherit; font-size: 11.5px; padding: 5px 11px; border: 1px solid var(--rs-border); background: transparent; color: var(--rs-text-2); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s, border-color .15s; } .rs-ov-chip span { font-size: 10px; font-weight: 700; color: var(--rs-text-3); background: var(--rs-row-hover); padding: 1px 6px; border-radius: 999px; } .rs-ov-chip:hover { background: var(--rs-row-hover); color: var(--rs-text); } .rs-ov-chip.is-on { background: var(--rs-accent-2); border-color: var(--rs-accent); color: var(--rs-accent); } .rs-ov-chip.is-on span { background: var(--rs-accent); color: #fff; } .rs-ov-body { padding: 14px 14px 22px; overflow-y: auto; flex: 1; } .rs-ov-group + .rs-ov-group { margin-top: 24px; } .rs-ov-group-h { display: flex; align-items: center; gap: 10px; padding: 4px 4px 10px; border-bottom: 1px solid var(--rs-border); margin-bottom: 6px; } .rs-ov-group-c { font-size: 11px; letter-spacing: .02em; color: var(--rs-text-3); margin-left: auto; } .rs-ov-list { display: flex; flex-direction: column; gap: 2px; } /* ============================================================ RESULT ROW ============================================================ */ .rs-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: start; width: 100%; text-align: left; background: transparent; color: var(--rs-text); border: 1px solid transparent; border-radius: 8px; padding: 13px 12px; font: inherit; cursor: pointer; transition: background .12s, border-color .12s; } .rs-row:hover, .rs-row.rs-active { background: var(--rs-row-active); border-color: var(--rs-border-2); } .rs-row-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; grid-column: 1; } .rs-row .rs-cat { align-self: flex-start; margin-bottom: 2px; } .rs-row-title { font-size: 14.5px; line-height: 1.35; color: var(--rs-text); font-weight: 600; white-space: normal; } .rs-row-snip { font-size: 12.5px; line-height: 1.5; color: var(--rs-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rs-row mark { background: var(--rs-mark-bg); color: var(--rs-mark-fg); padding: 0 2px; border-radius: 2px; } .rs-row-icon { color: var(--rs-text-3); display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; align-self: center; grid-column: 2; grid-row: 1; } .rs-row.rs-active .rs-row-icon, .rs-row:hover .rs-row-icon { color: var(--rs-accent); } /* Category badges — mapped to the report's multi-colour brand accents */ .rs-cat { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: 3px; white-space: nowrap; flex-shrink: 0; } .rs-cat-overview { color: #be266a; background: rgba(190,38,106,0.09); border: 1px solid rgba(190,38,106,0.26); } .rs-cat-operating { color: #2f8aa0; background: rgba(47,138,160,0.09); border: 1px solid rgba(47,138,160,0.26); } .rs-cat-performance { color: #3a5da8; background: rgba(58,93,168,0.09); border: 1px solid rgba(58,93,168,0.26); } .rs-cat-leadership { color: #6c5ab0; background: rgba(108,90,176,0.09); border: 1px solid rgba(108,90,176,0.26); } .rs-cat-clients { color: #d6197f; background: rgba(214,25,127,0.09); border: 1px solid rgba(214,25,127,0.26); } .rs-cat-sustainability { color: #5a9e3f; background: rgba(90,158,63,0.09); border: 1px solid rgba(90,158,63,0.26); } .rs-cat-valuecreation { color: #e26a1f; background: rgba(226,106,31,0.09); border: 1px solid rgba(226,106,31,0.26); } .rs-cat-downloads { color: #6d6e71; background: rgba(109,110,113,0.09); border: 1px solid rgba(109,110,113,0.26); } :root[data-rs-theme="dark"] .rs-cat-overview { color: #f07db0; background: rgba(224,53,127,0.15); border-color: rgba(224,53,127,0.32); } :root[data-rs-theme="dark"] .rs-cat-operating { color: #6fc6da; background: rgba(47,138,160,0.18); border-color: rgba(47,138,160,0.34); } :root[data-rs-theme="dark"] .rs-cat-performance { color: #8fa9e0; background: rgba(58,93,168,0.20); border-color: rgba(58,93,168,0.36); } :root[data-rs-theme="dark"] .rs-cat-leadership { color: #b0a2e6; background: rgba(108,90,176,0.20); border-color: rgba(108,90,176,0.36); } :root[data-rs-theme="dark"] .rs-cat-clients { color: #f27db5; background: rgba(214,25,127,0.18); border-color: rgba(214,25,127,0.34); } :root[data-rs-theme="dark"] .rs-cat-sustainability { color: #93d178; background: rgba(90,158,63,0.20); border-color: rgba(90,158,63,0.36); } :root[data-rs-theme="dark"] .rs-cat-valuecreation { color: #f0a066; background: rgba(226,106,31,0.20); border-color: rgba(226,106,31,0.36); } :root[data-rs-theme="dark"] .rs-cat-downloads { color: #b6b6bd; background: rgba(160,160,168,0.16); border-color: rgba(160,160,168,0.30); } /* ============================================================ QUICK ANSWER CARD ============================================================ */ .rs-qa { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; width: 100%; text-align: left; background: var(--rs-bg-elev); border: 1px solid var(--rs-accent); border-radius: 10px; padding: 16px 18px; margin: 2px 2px 14px; font-family: var(--rs-font); cursor: pointer; color: var(--rs-text); position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, background .15s; } .rs-qa::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rs-accent); } .rs-qa:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(190,38,106,.14); } .rs-qa-tag { align-self: start; display: inline-flex; align-items: center; height: 20px; padding: 0 10px; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--rs-accent); border-radius: 3px; white-space: nowrap; } .rs-qa-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .rs-qa-label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--rs-text-2); font-weight: 600; } .rs-qa-value { font-size: 23px; line-height: 1.15; color: var(--rs-text); font-weight: 700; letter-spacing: -0.01em; } .rs-qa-note { font-size: 12px; color: var(--rs-text-2); line-height: 1.45; } .rs-qa-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rs-accent); white-space: nowrap; } .rs-qa:hover .rs-qa-cta { color: var(--rs-accent-d); } @media (max-width: 560px) { .rs-qa { grid-template-columns: 1fr; gap: 10px; } .rs-qa-cta { justify-self: flex-start; } } /* ============================================================ EMPTY / DISCOVER STATE ============================================================ */ .rs-section { padding: 4px 2px; } .rs-section + .rs-section { border-top: 1px solid var(--rs-border); margin-top: 8px; padding-top: 12px; } .rs-section-h { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--rs-text-3); padding: 6px 8px 8px; font-weight: 700; } .rs-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 4px; } .rs-chip { font: inherit; font-size: 12px; padding: 6px 12px; border: 1px solid var(--rs-border); background: transparent; color: var(--rs-text-2); border-radius: 999px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .rs-chip:hover { background: var(--rs-row-hover); color: var(--rs-text); border-color: var(--rs-border-2); } .rs-chip-clear { color: var(--rs-text-3); } .rs-empty { padding: 40px 20px; text-align: center; color: var(--rs-text-2); font-family: var(--rs-font); } .rs-empty p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; } .rs-empty p:first-child { font-size: 19px; font-weight: 700; color: var(--rs-text); margin-bottom: 10px; } .rs-empty-sub { color: var(--rs-text-3); } .rs-empty strong { color: var(--rs-accent); font-weight: 700; } .rs-link { background: none; border: none; color: var(--rs-accent); font: inherit; font-size: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 0; } .rs-ov-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--rs-border); font-size: 11px; color: var(--rs-text-3); } .rs-ov-foot kbd { font-family: var(--rs-font); font-size: 10px; padding: 2px 6px; border: 1px solid var(--rs-border-2); border-radius: 4px; color: var(--rs-text-2); } /* ============================================================ BODY LOCK + SECTION PULSE ============================================================ */ body.rs-locked { overflow: hidden; } .rs-pulse { position: relative; animation: rs-pulse-anim 2.1s ease-out forwards; } @keyframes rs-pulse-anim { 0% { box-shadow: 0 0 0 0 rgba(190,38,106,0.55), inset 0 0 0 0 rgba(190,38,106,0); } 20% { box-shadow: 0 0 0 16px rgba(190,38,106,0), inset 0 0 0 3px rgba(190,38,106,0.5); } 100% { box-shadow: 0 0 0 0 rgba(190,38,106,0), inset 0 0 0 0 rgba(190,38,106,0); } } @media (max-width: 640px) { .rs-ov { padding: 0; } .rs-ov-inner { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; } .rs-ov-input { font-size: 18px; } }