/* Announcement renderers — Phase 2 (scanner toast, dashboard widget, top banner). Landing carousel styles live inline in templates/core/landing.html because the layout there is tightly coupled to the page grid; these three renderers are globally reusable and kept in one file so bumping ?v= covers them all. */ /* ── Shared tokens ───────────────────────────────────────────────── All three renderers share the ribbon, icon, and CTA visuals so the announcement feels like one object across surfaces. */ .ann-ribbon{ display:inline-block; background:linear-gradient(135deg,#FF6B35,#F7A200);color:#fff; font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; padding:.2rem .5rem;border-radius:var(--radius,4px); box-shadow:0 2px 6px rgba(255,107,53,.35); } .ann-icon{ font-size:1.5rem;line-height:1;flex-shrink:0; } .ann-cta{ display:inline-flex;align-items:center;gap:.35rem; padding:.45rem .85rem;border-radius:var(--radius,4px); background:var(--accent,#006D6F);color:#fff!important; font-weight:600;font-size:.85rem;text-decoration:none; transition:background .2s,transform .2s,box-shadow .2s; box-shadow:0 2px 6px rgba(0,109,111,.25); } .ann-cta:hover{ background:var(--accent-hover,#005456); transform:translateX(2px); box-shadow:0 5px 14px rgba(0,109,111,.38); text-decoration:none; } .ann-cta-arrow{display:inline-block;transition:transform .2s} .ann-cta:hover .ann-cta-arrow{transform:translateX(3px)} .ann-close{ appearance:none;background:transparent;border:0;cursor:pointer; color:var(--text-muted,#8a857f);font-size:1.1rem;line-height:1; padding:.25rem .45rem;border-radius:var(--radius,4px); transition:background .15s,color .15s; } .ann-close:hover{background:var(--bg-elevated,rgba(0,0,0,.05));color:var(--text)} .ann-close:focus-visible{outline:2px solid var(--accent,#006D6F);outline-offset:2px} /* ── Top banner ──────────────────────────────────────────────────── Urgent-priority announcements sit above the navbar. We inject at the very top of so it's first to paint and no z-index war with the sticky navbar. Muted red/amber gradient — loud enough to be noticed, not loud enough to feel like an alert spam. */ .ann-top-banner{ position:relative; display:flex;align-items:center;gap:.75rem; padding:.6rem 1rem; background:linear-gradient(90deg,#B3250F 0%,#D95E2F 60%,#E8893A 100%); color:#fff;font-size:.92rem;line-height:1.4; box-shadow:0 1px 3px rgba(0,0,0,.15); z-index:50; } .ann-top-banner .ann-icon{font-size:1.15rem} .ann-top-banner-text{flex:1;min-width:0} .ann-top-banner-title{font-weight:700;margin:0} .ann-top-banner-body{margin:.1rem 0 0;opacity:.95;font-size:.85rem} .ann-top-banner .ann-cta{ background:rgba(255,255,255,.18);color:#fff!important; box-shadow:none;border:1px solid rgba(255,255,255,.35); } .ann-top-banner .ann-cta:hover{ background:rgba(255,255,255,.28); box-shadow:0 2px 8px rgba(0,0,0,.2); } .ann-top-banner .ann-close{color:rgba(255,255,255,.85)} .ann-top-banner .ann-close:hover{background:rgba(255,255,255,.15);color:#fff} @media (max-width:600px){ .ann-top-banner{flex-wrap:wrap;padding:.55rem .75rem} .ann-top-banner-body{display:none} } /* ── Dashboard widget ────────────────────────────────────────────── Card that slots into the dashboard's .sections grid. Styled to match surrounding .section blocks (same radius, same border treatment) but with an accent border to stand out subtly. */ .ann-widget{ position:relative; display:flex;align-items:flex-start;gap:1rem; padding:1.1rem 1.25rem; border-radius:var(--radius,4px); background:var(--bg-card,#fff); border:1px solid var(--border); border-left:3px solid var(--accent,#006D6F); box-shadow:0 2px 6px rgba(0,0,0,.04); margin-bottom:1rem; } .ann-widget-icon-wrap{ flex-shrink:0; width:44px;height:44px; display:flex;align-items:center;justify-content:center; border-radius:var(--radius,4px); background:linear-gradient(135deg,rgba(0,109,111,.08),rgba(255,179,71,.12)); } .ann-widget-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4rem} .ann-widget-head{ display:flex;align-items:center;gap:.55rem;flex-wrap:wrap; } .ann-widget-title{ margin:0;font-size:1rem;font-weight:700;color:var(--text); } .ann-widget-text{ margin:0;font-size:.88rem;line-height:1.5;color:var(--text-mid,#6b6560); } .ann-widget-actions{ display:flex;align-items:center;gap:.5rem;margin-top:.35rem; } .ann-widget .ann-close{ position:absolute;top:.5rem;right:.5rem; } @media (max-width:540px){ .ann-widget{flex-direction:column;gap:.75rem;padding:1rem} .ann-widget .ann-close{top:.35rem;right:.35rem} } /* ── Scanner toast ───────────────────────────────────────────────── Bottom-right floating card that slides in on first visit to /documents/. Fixed position, doesn't affect layout. Auto-dismissible with close. Only one toast at a time — render the first scanner_toast announcement. */ .ann-toast{ position:fixed; bottom:calc(env(safe-area-inset-bottom,0) + 1rem); right:1rem; max-width:360px;width:calc(100vw - 2rem); padding:1rem 1.1rem; background:var(--bg-card,#fff); border:1px solid var(--border); border-radius:var(--radius,4px); box-shadow:0 12px 32px rgba(0,0,0,.15),0 2px 6px rgba(0,0,0,.08); z-index:70; display:flex;gap:.85rem;align-items:flex-start; opacity:0;transform:translateY(20px); animation:ann-toast-in .45s cubic-bezier(.22,1,.36,1) .6s forwards; } @keyframes ann-toast-in{to{opacity:1;transform:translateY(0)}} .ann-toast-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4rem} .ann-toast-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .ann-toast-title{margin:0;font-size:.98rem;font-weight:700;color:var(--text);line-height:1.3} .ann-toast-text{margin:0;font-size:.85rem;line-height:1.5;color:var(--text-mid,#6b6560)} .ann-toast-actions{display:flex;align-items:center;gap:.5rem;margin-top:.2rem} .ann-toast .ann-close{position:absolute;top:.45rem;right:.55rem} @media (max-width:600px){ .ann-toast{ bottom:calc(env(safe-area-inset-bottom,0) + .6rem); right:.6rem;left:.6rem; width:auto;max-width:none; } /* Don't obscure the bottom nav on mobile — sits above it. */ body:has(.bottom-nav) .ann-toast{ bottom:calc(env(safe-area-inset-bottom,0) + 5rem); } } /* ── Motion preference ─────────────────────────────────────────────*/ @media (prefers-reduced-motion:reduce){ .ann-toast,.ann-cta,.ann-cta-arrow,.ann-close{ animation:none!important;transition:none!important; } .ann-toast{opacity:1;transform:none} } /* ── Dark mode ─────────────────────────────────────────────────────*/ @media (prefers-color-scheme:dark){ .ann-widget{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)} .ann-toast{background:rgba(30,28,26,.98);border-color:rgba(255,255,255,.1)} } html.dark-mode .ann-widget{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)} html.dark-mode .ann-toast{background:rgba(30,28,26,.98);border-color:rgba(255,255,255,.1)} /* Hidden until JS decides visibility. */ .ann-hidden{display:none!important}