/* Root flag class applied to when banner is visible */
.smartbanner-show {
margin-top: 80px;
}
.smartbanner-show .smartbanner {
display: block;
}
/* Base banner styles */
.smartbanner {
position: absolute;
left: 0;
top: 0;
display: none;
width: 100%;
height: 80px;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
background: #ffffff;
z-index: 9998;
-webkit-font-smoothing: antialiased;
overflow: hidden;
-webkit-text-size-adjust: none;
}
.smartbanner-container {
margin: 0 auto;
max-width: 960px;
height: 100%;
padding: 0 16px;
display: flex;
align-items: center;
gap: 0px;
padding-left: 8px;
white-space: nowrap;
box-sizing: border-box;
}
.smartbanner-close {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin: 0 8px 0 0;
font-size: 16px;
font-weight: 600;
color: #6b7280;
background: rgba(148, 163, 184, 0.15);
border-radius: 999px;
text-decoration: none;
border: 0;
cursor: pointer;
}
.smartbanner-close:active,
.smartbanner-close:hover {
background: rgba(148, 163, 184, 0.3);
color: #4b5563;
}
.smartbanner-icon {
flex: 0 0 auto;
width: 57px;
height: 57px;
margin-right: 12px;
background-size: cover;
border-radius: 14px;
}
/* Set the app icon via CSS so CSP can’t block it */
.smartbanner .smartbanner-icon {
background-image: url("/assets/img/app-icon-256.png");
background-repeat: no-repeat;
background-position: center;
}
.smartbanner-info {
flex: 1 1 auto;
min-width: 0;
font-size: 11px;
line-height: 1.3;
font-weight: 500;
color: #4b5563;
overflow: hidden;
}
.smartbanner-title {
font-size: 13px;
line-height: 1.3;
font-weight: 600;
color: #111827;
margin-bottom: 2px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* "author" (your subtitle) and price line */
.smartbanner-info > div,
.smartbanner-info > span {
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.smartbanner-button {
flex: 0 0 auto;
position: relative;
height: 32px;
padding: 0 14px;
font-size: 14px;
line-height: 32px;
text-align: center;
font-weight: 600;
text-decoration: none;
border-radius: 999px;
box-sizing: border-box;
}
.smartbanner-button-text {
display: inline-block;
}
/* ===== iOS style (modernized) ===== */
.smartbanner-ios {
background: #ffffff;
box-shadow:
0 0 0 1px rgba(15, 23, 42, 0.04),
0 18px 45px rgba(15, 23, 42, 0.16);
}
.smartbanner-ios .smartbanner-close {
background: rgba(148, 163, 184, 0.2);
color: #4b5563;
}
.smartbanner-ios .smartbanner-close:active,
.smartbanner-ios .smartbanner-close:hover {
background: rgba(148, 163, 184, 0.35);
}
.smartbanner-ios .smartbanner-icon {
background-color: #f3f4f6;
box-shadow:
0 0 0 1px rgba(15, 23, 42, 0.06),
0 8px 16px rgba(15, 23, 42, 0.18);
}
.smartbanner-ios .smartbanner-info {
color: #4b5563;
text-shadow: none;
}
.smartbanner-ios .smartbanner-title {
color: #111827;
font-weight: 600;
}
.smartbanner-ios .smartbanner-button {
background: #007aff;
color: #ffffff;
text-transform: none;
text-shadow: none;
/* box-shadow: 0 6px 16px rgba(0, 122, 255, 0.35);*/
border: none;
}
.smartbanner-ios .smartbanner-button:active,
.smartbanner-ios .smartbanner-button:hover {
background: #0060c4;
box-shadow: 0 4px 12px rgba(0, 96, 196, 0.4);
}
/* ===== Android style (lightly cleaned, still dark) ===== */
.smartbanner-android {
background: #1f2933;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.smartbanner-android .smartbanner-close {
background: rgba(55, 65, 81, 0.7);
color: #e5e7eb;
box-shadow: none;
}
.smartbanner-android .smartbanner-close:active,
.smartbanner-android .smartbanner-close:hover {
background: rgba(55, 65, 81, 0.9);
}
.smartbanner-android .smartbanner-icon {
background-color: transparent;
box-shadow: none;
}
.smartbanner-android .smartbanner-info {
color: #d1d5db;
text-shadow: none;
}
.smartbanner-android .smartbanner-title {
color: #ffffff;
font-weight: 600;
}
.smartbanner-android .smartbanner-button {
display: flex;
align-items: center;
justify-content: center;
height: 32px; /* keep it square */
padding: 0 12px;
border-radius: 0px;
border: 2px solid rgba(156, 163, 175, 0.9);
background: #10b981;
line-height: normal; /* override base 32px */
}
.smartbanner-android .smartbanner-button-text {
display: block;
padding: 0px;
line-height: 1px;
text-transform: none;
text-shadow: none;
box-shadow: none;
color: #ffffff;
}
/* ===== Windows (kept simple/neutral) ===== */
.smartbanner-windows {
background: #f9fafb;
box-shadow:
0 0 0 1px rgba(15, 23, 42, 0.04),
0 16px 35px rgba(15, 23, 42, 0.1);
}
.smartbanner-windows .smartbanner-close {
background: rgba(148, 163, 184, 0.2);
color: #4b5563;
}
.smartbanner-windows .smartbanner-close:active,
.smartbanner-windows .smartbanner-close:hover {
background: rgba(148, 163, 184, 0.35);
}
.smartbanner-windows .smartbanner-icon {
background-color: #e5e7eb;
box-shadow:
0 0 0 1px rgba(15, 23, 42, 0.06),
0 8px 16px rgba(15, 23, 42, 0.16);
}
.smartbanner-windows .smartbanner-info {
color: #4b5563;
text-shadow: none;
}
.smartbanner-windows .smartbanner-title {
color: #111827;
font-weight: 600;
}
.smartbanner-windows .smartbanner-button {
background: #2563eb;
color: #ffffff;
border-radius: 999px;
border: none;
text-shadow: none;
}
.smartbanner-windows .smartbanner-button:active,
.smartbanner-windows .smartbanner-button:hover {
background: #1d4ed8;
}