/* ============================================================================= header.css — Top Announcement Strip + Navbar offset ----------------------------------------------------------------------------- Component: .ts ("Top Strip") Single responsibility: this file only styles the fixed announcement bar and the .page-content spacer that offsets the navbar below it. Anatomy (always single-row, every viewport): ┌─────────────────────────────────────────────────────────────────────────┐ │ ● [FLASH SALE] [deal text ................] [→ / Pill] │ 🚚 ▶ │ │ ↑ pulse dot ↑ tag pill (optional) ↑ CTA ↑ utils │ │ └──────── .ts__deal (flex-1, gets per-deal bg) ──────────┘└──utils─┘│ └─────────────────────────────────────────────────────────────────────────┘ Mobile (< 768px): CTA = chevron arrow. Utility labels hidden. Desktop (≥ 768px): CTA = pill button with label. Utility labels visible. JS drives: • deal background → strip.style.background • tag text + href → #dealTag • heading text → #dealText (slide animation via inline style) • button link → #dealBtn (href) • button label → #dealBtnLabel (textContent, shown/hidden) • blink state → .blink-btn toggle on #dealBtnLabel No dual-button DOM hack. No two-row mobile collapse. No !important toggles. ============================================================================= */ /* ─── 1. Strip shell ─────────────────────────────────────────────────────── */ .ts { /* Default bg — overridden per-deal by JS */ background: var(--forest, #00683A); color: #fff; /* Always a single row, vertically centred */ min-height: 42px; display: flex; align-items: stretch; /* Fixed to viewport top */ position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; font-family: var(--font-body, 'DM Sans', system-ui, sans-serif); font-size: .8rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22); /* Subtle shimmer sweep across the deal zone — driven by ::after below */ } /* ─── 2. Deal zone ───────────────────────────────────────────────────────── */ .ts__deal { flex: 1; min-width: 0; /* allow text to truncate */ display: flex; align-items: center; gap: 8px; padding: 0 10px; position: relative; overflow: hidden; /* Strip background is set on .ts — deal zone is fully transparent so it inherits the per-deal colour naturally. */ } /* Light shimmer sweep — GPU-composited, barely perceptible, suggests freshness */ .ts__deal::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 35%, rgba(255, 255, 255, 0.07) 50%, transparent 65% ); background-size: 220% 100%; animation: ts-shimmer 5s ease-in-out infinite; pointer-events: none; } @keyframes ts-shimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } } /* ─── 3. Pulse dot ───────────────────────────────────────────────────────── */ .ts__pulse { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex-shrink: 0; animation: ts-pulse 2.2s ease-in-out infinite; } @keyframes ts-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); } 55% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); } } /* ─── 4. Tag pill (optional, shown when deal.tag is set) ─────────────────── */ .ts__tag { flex-shrink: 0; display: none; /* JS sets display:'inline-flex' when tag exists */ align-items: center; padding: 2px 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.30); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .18s ease; cursor: pointer; } .ts__tag:hover, .ts__tag:focus-visible { background: rgba(255, 255, 255, 0.26); color: #fff; text-decoration: none; } /* ─── 5. Main deal link (text + CTA — the whole mid area is tappable) ───── */ .ts__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; /* Accessible focus ring */ outline-offset: 2px; } .ts__main:hover, .ts__main:focus-visible { color: #fff; text-decoration: none; } /* ─── 6. Deal heading text ───────────────────────────────────────────────── */ .ts__text { flex: 1; min-width: 0; font-size: .8rem; font-weight: 500; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Inline transition driven by JS for slide animation */ will-change: opacity, transform; } /* ─── 7. CTA — pill button (desktop only, hidden on mobile) ─────────────── */ .ts__btn-label { display: none; /* shown at ≥ 768px */ flex-shrink: 0; padding: 4px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.40); background: rgba(255, 255, 255, 0.13); font-size: .72rem; font-weight: 700; letter-spacing: .2px; white-space: nowrap; transition: background .18s ease, border-color .18s ease; } .ts__main:hover .ts__btn-label, .ts__main:focus-visible .ts__btn-label { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.60); } /* Blink animation for urgent/flash deals — toggled by JS */ .blink-btn { animation: ts-blink 1.3s ease infinite; } @keyframes ts-blink { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); } 60% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } /* ─── 8. Chevron arrow (mobile only, hidden on desktop) ─────────────────── */ .ts__arrow { flex-shrink: 0; font-size: .7rem; opacity: 0.70; transition: transform .2s ease, opacity .2s ease; } .ts__main:hover .ts__arrow, .ts__main:focus-visible .ts__arrow { transform: translateX(3px); opacity: 1; } /* ─── 9. Separator — visual divider between deal zone and utility zone ───── */ .ts__sep { width: 1px; background: rgba(255, 255, 255, 0.18); flex-shrink: 0; margin: 8px 0; } /* ─── 10. Utility zone — track order + app download ─────────────────────── */ /* Always dark — uses a semi-transparent black overlay so it reads darker than whatever per-deal background color JS sets on .ts. Gives consistent contrast for the icons regardless of admin-chosen deal colour. */ .ts__utils { display: flex; align-items: center; gap: 0; padding: 0 8px; background: rgba(0, 0, 0, 0.18); flex-shrink: 0; } .ts__util { display: flex; align-items: center; gap: 5px; padding: 0 8px; height: 100%; color: rgba(255, 255, 255, 0.88); text-decoration: none; font-size: .72rem; font-weight: 600; white-space: nowrap; border-radius: 0; transition: background .18s ease, color .18s ease; } .ts__util:hover, .ts__util:focus-visible { background: rgba(255, 255, 255, 0.10); color: #fff; text-decoration: none; } .ts__util i { font-size: .8rem; } /* Labels hidden on mobile — shown on desktop */ .ts__util-label { display: none; } /* ─── 11. Page-content spacer ────────────────────────────────────────────── */ /* .ts is position:fixed so the navbar sits directly behind it. .page-content (an empty div in header.blade.php, above the