145 lines
2.9 KiB
CSS
145 lines
2.9 KiB
CSS
/**
|
|
* Demo Banner
|
|
*
|
|
* Persistent banner shown at the top of pages when in demo mode.
|
|
* Provides CTA to subscription selection.
|
|
*/
|
|
|
|
/* ===========================================
|
|
DEMO BANNER
|
|
=========================================== */
|
|
swp-demo-banner {
|
|
/* TODO: Remove display:none when demo mode is ready */
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-4);
|
|
padding: var(--spacing-3) var(--spacing-6);
|
|
background: linear-gradient(135deg, var(--color-teal) 0%, #00796b 100%);
|
|
color: white;
|
|
font-size: var(--font-size-sm);
|
|
position: relative;
|
|
z-index: 1000;
|
|
}
|
|
|
|
swp-demo-banner-text {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
|
|
& i {
|
|
font-size: 18px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
& span {
|
|
opacity: 0.95;
|
|
}
|
|
|
|
& strong {
|
|
font-weight: var(--font-weight-semibold);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
swp-demo-banner-cta {
|
|
display: inline-flex;
|
|
|
|
& a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
padding: var(--spacing-2) var(--spacing-4);
|
|
background: white;
|
|
color: var(--color-teal);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
border-radius: var(--radius-pill);
|
|
text-decoration: none;
|
|
transition: all var(--transition-fast);
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
color: #00695c;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
|
|
& i {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
/* Close button (optional) */
|
|
swp-demo-banner-close {
|
|
position: absolute;
|
|
right: var(--spacing-4);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 50%;
|
|
color: white;
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
transition: all var(--transition-fast);
|
|
|
|
& i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
background: rgba(255, 255, 255, 0.25);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
BODY OFFSET (when banner is visible)
|
|
=========================================== */
|
|
body.has-demo-banner swp-app-layout {
|
|
/* Adjust if banner needs to push content down */
|
|
}
|
|
|
|
/* ===========================================
|
|
RESPONSIVE
|
|
=========================================== */
|
|
@media (max-width: 768px) {
|
|
swp-demo-banner {
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-2);
|
|
padding: var(--spacing-3) var(--spacing-4);
|
|
}
|
|
|
|
swp-demo-banner-text {
|
|
flex: 1 1 100%;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
swp-demo-banner-cta {
|
|
flex: 1 1 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
swp-demo-banner-cta a {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
swp-demo-banner-text span {
|
|
display: none;
|
|
}
|
|
|
|
swp-demo-banner-text strong {
|
|
display: inline;
|
|
}
|
|
}
|