diff --git a/web-integrations/google-secure-signals/client-side/Dockerfile b/web-integrations/google-secure-signals/client-side/Dockerfile index 1cf6516..2b3bb4e 100644 --- a/web-integrations/google-secure-signals/client-side/Dockerfile +++ b/web-integrations/google-secure-signals/client-side/Dockerfile @@ -6,6 +6,9 @@ RUN apk add --no-cache gettext # Copy static files from client-side directory COPY web-integrations/google-secure-signals/client-side/html /usr/share/nginx/html/ +# Copy shared styles folder +COPY web-integrations/styles /usr/share/nginx/html/styles/ + # Copy config and entrypoint COPY web-integrations/google-secure-signals/client-side/default.conf /etc/nginx/conf.d/default.conf COPY web-integrations/google-secure-signals/client-side/entrypoint.sh /entrypoint.sh diff --git a/web-integrations/google-secure-signals/client-side/html/index.html b/web-integrations/google-secure-signals/client-side/html/index.html index 249a3b4..a287880 100644 --- a/web-integrations/google-secure-signals/client-side/html/index.html +++ b/web-integrations/google-secure-signals/client-side/html/index.html @@ -12,76 +12,199 @@ -

Client-Side ${IDENTITY_NAME} SDK Integration Example with Google Secure Signals

-

- This example demonstrates how a content publisher can follow the - Client-Side Integration Guide for JavaScript to implement ${IDENTITY_NAME} integration and generate ${IDENTITY_NAME} tokens. - Secure Signals is updated when the page is reloaded. - Reload the page in order to update Secure Signals in local storage. - Note: This is a test-only integration environment—not for production use. - It does not perform real user authentication or generate production-level tokens. - Do not use real user data on this page. -

-
-
- -
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
Ready for Targeted Advertising:
${IDENTITY_NAME} Advertising Token:
Is ${IDENTITY_NAME} Login Required?
${IDENTITY_NAME} Identity Callback State:
Secure Signals Loaded?
Secure Signals Value:
-
- - - + + + + diff --git a/web-integrations/javascript-sdk/client-side/html/stylesheets/app.css b/web-integrations/javascript-sdk/client-side/html/stylesheets/app.css index f013f06..5d5b2ac 100644 --- a/web-integrations/javascript-sdk/client-side/html/stylesheets/app.css +++ b/web-integrations/javascript-sdk/client-side/html/stylesheets/app.css @@ -1,114 +1,370 @@ +/* Import centralized color variables */ +@import url('../styles/colors.css'); + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + body { - padding: 50px; - font: 14px 'Lucida Grande', Helvetica, Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif; + background: var(--bg-light); + color: var(--text-dark); + line-height: 1.6; + padding: 2rem; +} + +/* Two Column Layout */ +.page-wrapper { + display: flex; + gap: 2rem; + max-width: 1400px; + margin: 0 auto; +} + +/* Main Content Area (75%) */ +.main-content { + flex: 3; + background: var(--bg-white); + border-radius: 12px; + padding: 2.5rem; + box-shadow: var(--shadow-md); +} + +/* Sidebar (25%) */ +.sidebar { + flex: 1; + background: var(--sidebar-bg); + border-radius: 12px; + padding: 2rem; + box-shadow: var(--shadow); + border-left: 4px solid var(--primary-orange); + position: sticky; + top: 2rem; + height: fit-content; + max-height: calc(100vh - 4rem); + overflow-y: auto; +} + +.sidebar h3 { + color: var(--primary-dark); + font-size: 1.1rem; + margin-bottom: 1rem; + padding-bottom: 0.5rem; + border-bottom: 2px solid var(--primary-orange); +} + +.sidebar .section { + margin-bottom: 1.5rem; +} + +.sidebar .section h4 { + color: var(--accent-teal); + font-size: 0.9rem; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.sidebar ul { + margin-left: 1.25rem; + font-size: 0.875rem; + color: var(--text-gray); +} + +.sidebar li { + margin-bottom: 0.5rem; + line-height: 1.6; +} + +.sidebar .note { + background: rgba(255, 107, 53, 0.1); + padding: 0.75rem; + border-radius: 6px; + font-size: 0.85rem; + color: var(--text-dark); + margin-top: 1rem; +} + +.sidebar .note strong { + color: var(--primary-orange); +} + +/* Header */ +h1 { + font-size: 2rem; + font-weight: 800; + color: var(--primary-dark); + margin-bottom: 0.75rem; + line-height: 1.3; +} + +h2 { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary-dark); + margin: 2rem 0 1rem 0; + padding-bottom: 0.5rem; + border-bottom: 3px solid var(--primary-orange); +} + +p { + font-size: 0.95rem; + color: var(--text-gray); + margin-bottom: 2rem; + line-height: 1.8; } a { - color: #00b7ff; + color: var(--link-color); + text-decoration: underline; + font-weight: 500; + transition: opacity 0.2s ease; +} + +a:hover { + opacity: 0.8; +} + +/* State Table */ +#uid2_state { + width: 100%; + border-collapse: collapse; + margin: 2rem 0; + font-size: 0.875rem; + border: 1px solid var(--border-color); + border-radius: 8px; + overflow: hidden; +} + +#uid2_state tr { + border-bottom: 1px solid var(--border-color); +} + +#uid2_state tr:nth-child(even) { + background-color: var(--bg-light); +} + +#uid2_state tr:last-child { + border-bottom: none; +} + +#uid2_state td { + padding: 1rem; + vertical-align: top; +} + +.label { + font-weight: 600; + color: var(--text-dark); + white-space: nowrap; + padding-right: 2rem; + width: 15em; +} + +.value { + color: var(--text-gray); + font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; +} + +.value pre { + white-space: pre-wrap; + word-break: break-all; + margin: 0; +} + +/* Forms */ +.form { + margin-top: 2rem; } +.email_prompt { + display: flex; + gap: 0; + max-width: 600px; + box-shadow: var(--shadow); + border-radius: 8px; + overflow: hidden; +} + +#email { + flex: 1; + padding: 0.875rem 1.25rem; + border: 2px solid var(--border-color); + border-right: none; + font-size: 0.95rem; + color: var(--text-dark); + outline: none; + transition: border-color 0.2s ease; +} + +#email:focus { + border-color: var(--primary-orange); +} + +#email::placeholder { + color: var(--text-gray); +} + +/* Buttons */ .button { - border-style: none; - cursor: pointer; - align-items: center; - height: 40px; - width: 401px; - text-align: center; - position: absolute; - letter-spacing: 0.28px; - box-sizing: border-box; + padding: 0.875rem 2rem; + background: var(--button-navy); color: white; - font-family: 'Raleway', Helvetica, Arial, serif; - font-size: 14px; - font-style: normal; + border: none; + font-size: 0.95rem; font-weight: 700; - text-transform: none; - text-indent: 0; - text-shadow: none; - margin: 0; - padding: 1px 6px; - background-color: rgba(2, 10, 64); - border-image: initial; + cursor: pointer; + transition: all 0.2s ease; + white-space: nowrap; + box-shadow: var(--shadow); } -.form { - margin-top: 40px; +.button:hover { + background: var(--button-navy-hover); + transform: translateY(-2px); + box-shadow: 0 6px 12px rgba(2, 10, 64, 0.3); +} + +.button:active { + transform: translateY(0); +} + +/* Full width button for logout */ +#logout_form .button { + width: 100%; + max-width: 600px; + border-radius: 8px; +} + +/* Success Message */ +.message { + background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%); + border-left: 4px solid #22C55E; + color: #15803D; + padding: 1.25rem; + margin: 1.5rem 0; + font-size: 0.95rem; + font-weight: 600; + border-radius: 6px; } .product-tables { display: flex; flex-direction: row; + gap: 2rem; + margin-top: 2rem; } -.email_prompt { - align-items: center; - align-self: center; - background-color: white; - border: 1px solid rgba(2, 10, 64); - border-radius: 2px; - box-sizing: border-box; +/* Tooltip Styles - Matching Self-Serve Portal */ +.tooltip-wrapper { display: inline-flex; - flex-direction: row; - flex-shrink: 0; - height: 40px; - justify-content: flex-start; - margin-right: 1px; - margin-bottom: 20px; - min-width: 399px; - padding: 0 16px; - position: relative; - width: auto; + align-items: center; + gap: 0.5rem; } -table { - border: 1px solid; - width: 100%; +.tooltip { + position: relative; + display: inline-flex; + align-items: center; + cursor: help; } -#email { - background-color: white; +.tooltip-trigger { + width: 16px; + height: 16px; + border-radius: 50%; + background-color: var(--tooltip-trigger); + color: white; + border: none; + font-size: 0.7rem; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + cursor: help; + transition: all 0.2s ease; flex-shrink: 0; - height: auto; - letter-spacing: 0.12px; - line-height: 16px; - min-height: 16px; - position: relative; - text-align: left; - white-space: nowrap; - width: 351px; - color: rgba(2, 10, 64, 1); - font-family: 'Raleway', Helvetica, Arial, serif; - font-size: 12px; - font-style: normal; - font-weight: 500; - padding: 1px 2px; - outline: none; } -h1 { - padding-bottom: 20px; +.tooltip-trigger:hover { + background-color: var(--tooltip-trigger-hover); + transform: scale(1.05); } -.label { - white-space: nowrap; - padding-right: 20px; - width: 20em; +.tooltip-content { + visibility: hidden; + opacity: 0; + position: absolute; + bottom: calc(100% + 8px); /* Position above with gap */ + left: 50%; + transform: translateX(-50%); + background-color: var(--tooltip-bg); + color: white; + padding: 10px; + border-radius: 4px; + font-size: 0.75rem; + line-height: 1.125; + min-width: 300px; + max-width: 570px; + white-space: normal; + z-index: 10000; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + transition: opacity 0.2s ease, visibility 0.2s ease; + font-weight: 400; + pointer-events: none; } -tr { - margin-top: 10px; + +.tooltip-content::after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + border-width: 6px; + border-style: solid; + border-color: #1F2937 transparent transparent transparent; } -pre { - white-space: pre-wrap; - word-break: break-all; +.tooltip:hover .tooltip-content { + visibility: visible; + opacity: 1; } -.message { - color: green; - padding: 20px; - margin-left: -22px; - font-size: 16px; - font-weight: 500; - border: 2px solid green; - border-radius: 5px; +/* Ensure table doesn't clip tooltips */ +#uid2_state { + position: relative; + overflow: visible; +} + +@media (max-width: 1024px) { + .page-wrapper { + flex-direction: column; + } + + .sidebar { + position: static; + max-height: none; + } + + body { + padding: 1rem; + } + + .main-content { + padding: 1.5rem; + } + + .email_prompt { + flex-direction: column; + } + + #email { + border-right: 2px solid var(--border-color); + border-bottom: none; + } + + .button { + width: 100%; + } } diff --git a/web-integrations/prebid-integrations/client-side/Dockerfile b/web-integrations/prebid-integrations/client-side/Dockerfile index 440b2e2..3b35277 100644 --- a/web-integrations/prebid-integrations/client-side/Dockerfile +++ b/web-integrations/prebid-integrations/client-side/Dockerfile @@ -7,6 +7,9 @@ RUN apk add --no-cache gettext COPY web-integrations/prebid-integrations/client-side/app.css /usr/share/nginx/html/ COPY web-integrations/prebid-integrations/prebid.js /usr/share/nginx/html/ +# Copy shared styles folder +COPY web-integrations/styles /usr/share/nginx/html/styles/ + # Copy config and HTML COPY web-integrations/prebid-integrations/client-side/default.conf /etc/nginx/conf.d/default.conf COPY web-integrations/prebid-integrations/client-side/index.html /usr/share/nginx/html/index.template.html diff --git a/web-integrations/prebid-integrations/client-side/app.css b/web-integrations/prebid-integrations/client-side/app.css index eb4e3cb..a844c99 100644 --- a/web-integrations/prebid-integrations/client-side/app.css +++ b/web-integrations/prebid-integrations/client-side/app.css @@ -1,102 +1,368 @@ +/* Two-Column Layout with Sidebar - Modern Design */ +/* Import centralized color variables */ +@import url('../styles/colors.css'); + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + body { - padding: 50px; - font: - 14px 'Lucida Grande', - Helvetica, - Arial, - sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif; + background: var(--bg-light); + color: var(--text-dark); + line-height: 1.6; + padding: 2rem; } -a { - color: #00b7ff; +/* Two Column Layout */ +.page-wrapper { + display: flex; + gap: 2rem; + max-width: 1400px; + margin: 0 auto; } -.button { - border-style: none; - cursor: pointer; - align-items: center; - height: 40px; - width: 401px; - text-align: center; - position: absolute; - letter-spacing: 0.28px; - box-sizing: border-box; - color: white; - font-family: 'Raleway', Helvetica, Arial, serif; - font-size: 14px; - font-style: normal; +/* Main Content Area (75%) */ +.main-content { + flex: 3; + background: var(--bg-white); + border-radius: 12px; + padding: 2.5rem; + box-shadow: var(--shadow-md); +} + +/* Sidebar (25%) */ +.sidebar { + flex: 1; + background: var(--sidebar-bg); + border-radius: 12px; + padding: 2rem; + box-shadow: var(--shadow); + border-left: 4px solid var(--primary-orange); + position: sticky; + top: 2rem; + height: fit-content; + max-height: calc(100vh - 4rem); + overflow-y: auto; +} + +.sidebar h3 { + color: var(--primary-dark); + font-size: 1.1rem; + margin-bottom: 1rem; + padding-bottom: 0.5rem; + border-bottom: 2px solid var(--primary-orange); +} + +.sidebar .section { + margin-bottom: 1.5rem; +} + +.sidebar .section h4 { + color: var(--accent-teal); + font-size: 0.9rem; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.sidebar ul { + margin-left: 1.25rem; + font-size: 0.875rem; + color: var(--text-gray); +} + +.sidebar li { + margin-bottom: 0.5rem; + line-height: 1.6; +} + +.sidebar .note { + background: rgba(255, 107, 53, 0.1); + padding: 0.75rem; + border-radius: 6px; + font-size: 0.85rem; + color: var(--text-dark); + margin-top: 1rem; +} + +.sidebar .note strong { + color: var(--primary-orange); +} + +/* Header */ +h1 { + font-size: 2rem; + font-weight: 800; + color: var(--primary-dark); + margin-bottom: 0.75rem; + line-height: 1.3; +} + +h2 { + font-size: 1.5rem; font-weight: 700; - text-transform: none; - text-indent: 0; - text-shadow: none; + color: var(--primary-dark); + margin: 2rem 0 1rem 0; + padding-bottom: 0.5rem; + border-bottom: 3px solid var(--primary-orange); +} + +p { + font-size: 0.95rem; + color: var(--text-gray); + margin-bottom: 2rem; + line-height: 1.8; +} + +a { + color: var(--link-color); + text-decoration: underline; + font-weight: 500; + transition: opacity 0.2s ease; +} + +a:hover { + opacity: 0.8; +} + +/* State Table */ +#identity_state { + width: 100%; + border-collapse: separate; + border-spacing: 0; + margin: 2rem 0; + border: 2px solid var(--border-color); + border-radius: 8px; + overflow: hidden; + font-size: 0.875rem; + position: relative; + overflow: visible; +} + +#identity_state tr { + border-bottom: 1px solid var(--border-color); +} + +#identity_state tr:last-child { + border-bottom: none; +} + +#identity_state tr:nth-child(even) { + background-color: var(--bg-light); +} + +#identity_state td { + padding: 1rem; + vertical-align: top; +} + +.label { + font-weight: 600; + color: var(--text-dark); + white-space: nowrap; + padding-right: 2rem; + width: 280px; +} + +.value { + color: var(--text-gray); + font-family: 'Monaco', 'Menlo', 'Courier New', monospace; + word-break: break-all; +} + +.value pre { + white-space: pre-wrap; + word-break: break-all; margin: 0; - padding: 1px 6px; - background-color: rgba(2, 10, 64); - border-image: initial; } +/* Forms */ .form { - margin-top: 40px; + margin-top: 2rem; } .email_prompt { - align-items: center; - align-self: center; - background-color: white; - border: 1px solid rgba(2, 10, 64); - border-radius: 2px; - box-sizing: border-box; - display: inline-flex; - flex-direction: row; - flex-shrink: 0; - height: 40px; - justify-content: flex-start; - margin-right: 1px; - margin-bottom: 20px; - min-width: 399px; - padding: 0 16px; - position: relative; - width: auto; + display: flex; + gap: 0; + max-width: 600px; + box-shadow: var(--shadow); + border-radius: 8px; + overflow: hidden; } #email { - background-color: white; - flex-shrink: 0; - height: auto; - letter-spacing: 0.12px; - line-height: 16px; - min-height: 16px; - position: relative; - text-align: left; - white-space: nowrap; - width: 351px; - color: rgba(2, 10, 64, 1); - font-family: 'Raleway', Helvetica, Arial, serif; - font-size: 12px; - font-style: normal; - font-weight: 500; - padding: 1px 2px; + flex: 1; + padding: 0.875rem 1.25rem; + border: 2px solid var(--border-color); + border-right: none; + font-size: 0.95rem; + color: var(--text-dark); outline: none; + transition: border-color 0.2s ease; } -h1 { - padding-bottom: 20px; +#email:focus { + border-color: var(--primary-orange); } -#identity_state .label { +#email::placeholder { + color: var(--text-gray); +} + +/* Buttons */ +.button { + padding: 0.875rem 2rem; + background: var(--button-navy); + color: white; + border: none; + font-size: 0.95rem; + font-weight: 700; + cursor: pointer; + transition: all 0.2s ease; white-space: nowrap; - padding-right: 20px; + box-shadow: var(--shadow); } -#identity_state tr { - margin-top: 10px; + +.button:hover { + background: var(--button-navy-hover); + transform: translateY(-2px); + box-shadow: 0 6px 12px rgba(2, 10, 64, 0.3); +} + +.button:active { + transform: translateY(0); } +/* Full width button for logout */ +#clear_storage_form .button { + width: 100%; + max-width: 600px; + border-radius: 8px; +} + +/* Success Message */ .message { - color: green; - padding: 20px; - margin-left: -22px; - font-size: 16px; - font-weight: 500; - border: 2px solid green; - border-radius: 5px; + background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%); + border-left: 4px solid #22C55E; + color: #15803D; + padding: 1.25rem; + margin: 1.5rem 0; + font-size: 0.95rem; + font-weight: 600; + border-radius: 6px; +} + +/* Tooltip Styles - Matching Self-Serve Portal */ +.tooltip-wrapper { + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.tooltip { + position: relative; + display: inline-flex; + align-items: center; + cursor: help; +} + +.tooltip-trigger { + width: 16px; + height: 16px; + border-radius: 50%; + background-color: var(--tooltip-trigger); + color: white; + border: none; + font-size: 0.7rem; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + cursor: help; + transition: all 0.2s ease; + flex-shrink: 0; +} + +.tooltip-trigger:hover { + background-color: var(--tooltip-trigger-hover); + transform: scale(1.05); +} + +.tooltip-content { + visibility: hidden; + opacity: 0; + position: absolute; + bottom: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); + background-color: var(--tooltip-bg); + color: white; + padding: 10px; + border-radius: 4px; + font-size: 0.75rem; + line-height: 1.125; + min-width: 300px; + max-width: 570px; + white-space: normal; + z-index: 10000; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + transition: opacity 0.2s ease, visibility 0.2s ease; + font-weight: 400; + pointer-events: none; +} + +.tooltip-content::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: var(--tooltip-bg) transparent transparent transparent; +} + +.tooltip:hover .tooltip-content { + visibility: visible; + opacity: 1; +} + +/* Responsive Design */ +@media (max-width: 1024px) { + .page-wrapper { + flex-direction: column; + } + + .sidebar { + position: static; + max-height: none; + order: -1; + } + + body { + padding: 1rem; + } + + .main-content { + padding: 1.5rem; + } + + h2 { + font-size: 1.25rem; + } + + .email_prompt { + flex-direction: column; + } + + #email { + border-right: 2px solid var(--border-color); + border-bottom: none; + } + + .button { + width: 100%; + } } diff --git a/web-integrations/prebid-integrations/client-side/index.html b/web-integrations/prebid-integrations/client-side/index.html index 81b1896..263ce92 100644 --- a/web-integrations/prebid-integrations/client-side/index.html +++ b/web-integrations/prebid-integrations/client-side/index.html @@ -30,13 +30,33 @@ } $('#targeted_advertising_ready').text(identity ? 'yes' : 'no'); + $('#login_required').text(identity ? 'no' : 'yes'); if (isOptedOut) { $('#advertising_token').text('This email has opted out.'); + $('#prebid_storage').text('N/A (opted out)'); $('#login_form').hide(); $('#clear_storage_form').show(); } else { - $('#advertising_token').text(identity ? String(identity.id) : ''); + $('#advertising_token').text(identity ? String(identity.id) : 'undefined'); + + // Show localStorage content with formatted structure + const localStorageValue = localStorage.getItem('${UID_STORAGE_KEY}'); + if (localStorageValue) { + try { + const parsedToken = JSON.parse(localStorageValue); + const displayObject = { latestToken: parsedToken.latestToken }; + if (parsedToken.originalIdentity) { + displayObject.originalIdentity = parsedToken.originalIdentity; + } + $('#prebid_storage').text(JSON.stringify(displayObject, null, 2)); + } catch (e) { + $('#prebid_storage').text(localStorageValue); + } + } else { + $('#prebid_storage').text('No token stored yet.'); + } + if (!identity) { $('#login_form').show(); $('#clear_storage_form').hide(); @@ -65,7 +85,12 @@ $('#login').click(handleLogin); $('#clear_storage').click(handleClearStorage); - updateGuiElements(); + // Wait for Prebid to load user IDs from storage before updating UI + pbjs.que.push(function() { + pbjs.onEvent('userIds', updateGuiElements); + // Also update immediately in case IDs are already loaded + updateGuiElements(); + }); } function setUidConfig(email) { @@ -172,42 +197,135 @@ -

Client-Side ${IDENTITY_NAME} SDK Integration Example with Prebid.js

-

- This example demonstrates how a content publisher can integrate with ${IDENTITY_NAME} and Prebid.js using the ${IDENTITY_NAME} Client-Side Integration Guide for Prebid.js, which includes generating ${IDENTITY_NAME} tokens within the browser. - Note: This is a test-only integration environment—not for production use. - It does not perform real user authentication or generate production-level tokens. - Do not use real user data on this page. -

- - - - - - - - - -
Ready for Targeted Advertising:
${IDENTITY_NAME} Advertising Token:
-
-
- + + + diff --git a/web-integrations/styles/colors.css b/web-integrations/styles/colors.css new file mode 100644 index 0000000..43b3c9c --- /dev/null +++ b/web-integrations/styles/colors.css @@ -0,0 +1,44 @@ +/* + * Centralized UID2 Examples Color Variables + * + * This file defines all colors used across UID2 example sites. + * Import this file in your CSS: @import url('path/to/colors.css'); + */ + +:root { + /* Brand Colors */ + --primary-orange: #FF6B35; + --primary-dark: #2D3748; + --accent-teal: #0D9488; + --accent-yellow: #FBBF24; + + /* Text Colors */ + --text-dark: #1A202C; + --text-gray: #718096; + + /* Background Colors */ + --bg-white: #FFFFFF; + --bg-light: #F7FAFC; + --sidebar-bg: #FFF7ED; + + /* Border Colors */ + --border-color: #E2E8F0; + + /* Button Colors */ + --button-navy: rgba(2, 10, 64, 1); + --button-navy-hover: rgba(2, 10, 64, 0.9); + + /* Link Colors */ + --link-color: #06B6D4; + --link-hover: #06B6D4; + + /* Tooltip Colors */ + --tooltip-bg: #1F2937; + --tooltip-trigger: #3B82F6; + --tooltip-trigger-hover: #2563EB; + + /* Shadows */ + --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); +} +