/* ─────────────────────────────────────────────────────────────
SpotOn — tour.css
Stilar för spotlight-guided-tour-systemet.
Placera filen i: webapp/tour.css
Lägg till i index.html (i ):
─────────────────────────────────────────────────────────────*/
/* ── Overlay (bakgrund + spotlight-hål) ─────────────────────── */
#spoton-tour-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9000;
pointer-events: none;
/* Halvtransparent mörk bakgrund via box-shadow på spotlight */
}
#spoton-tour-overlay.tour-active {
pointer-events: auto;
}
/* ── Spotlight-hål ────────────────────────────────────────────
Tekniken: ett med vit bakgrund + outline som är
väldigt stor. outline kan inte klippas av overflow:hidden
och syns alltså utanför viewport. Resultatet är en
mörk skärm med ett utskuret, avrundat hål.
─────────────────────────────────────────────────────────────*/
#spoton-tour-spotlight {
position: fixed;
border-radius: 14px;
box-shadow:
0 0 0 4px rgba(255, 255, 255, .22),
0 0 0 9999px rgba(8, 17, 32, .82);
transition:
top .25s cubic-bezier(.4,0,.2,1),
left .25s cubic-bezier(.4,0,.2,1),
width .25s cubic-bezier(.4,0,.2,1),
height .25s cubic-bezier(.4,0,.2,1);
pointer-events: none;
z-index: 9001;
}
/* ── Förklaringsbubbla ───────────────────────────────────────── */
#spoton-tour-bubble {
position: fixed;
z-index: 9003;
max-width: 300px;
width: 300px;
background: #1a2a45;
border: 1px solid rgba(255,255,255,.14);
border-radius: 18px;
padding: 18px 18px 14px;
box-shadow: 0 12px 40px rgba(0,0,0,.55);
color: #eef3fb;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
transition:
top .22s cubic-bezier(.4,0,.2,1),
left .22s cubic-bezier(.4,0,.2,1);
animation: tour-bubble-in .22s ease forwards;
}
@keyframes tour-bubble-in {
from { opacity: 0; transform: scale(.93); }
to { opacity: 1; transform: scale(1); }
}
/* ── Pil ─────────────────────────────────────────────────────── */
#spoton-tour-arrow {
position: fixed;
z-index: 9002;
width: 16px;
height: 10px;
pointer-events: none;
background: none;
}
#spoton-tour-arrow::before {
content: '';
display: block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #1a2a45;
}
/* ── Bubbelinnehåll ──────────────────────────────────────────── */
.tour-progress {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.tour-step-counter {
font-size: 11px;
font-weight: 600;
color: #60a5fa;
letter-spacing: .04em;
text-transform: uppercase;
}
.tour-skip {
background: none;
border: none;
padding: 2px 6px;
font-size: 11px;
color: #6b7fa3;
cursor: pointer;
border-radius: 6px;
transition: color .15s;
line-height: 1;
}
.tour-skip:hover {
color: #94a3b8;
}
.tour-title {
font-size: 15px;
font-weight: 700;
color: #f1f5f9;
margin-bottom: 6px;
line-height: 1.3;
}
.tour-text {
font-size: 13px;
color: #b8c4d8;
line-height: 1.55;
margin-bottom: 14px;
}
/* ── Navigationsknappar ──────────────────────────────────────── */
.tour-actions {
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
}
.tour-btn {
border: none;
border-radius: 10px;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: opacity .12s, transform .12s;
}
.tour-btn:active {
transform: scale(.97);
}
.tour-btn-next {
background: #3b82f6;
color: #fff;
margin-left: auto;
}
.tour-btn-next:hover {
background: #2563eb;
}
.tour-btn-prev {
background: rgba(255,255,255,.07);
color: #94a3b8;
border: 1px solid rgba(255,255,255,.10);
}
.tour-btn-prev:hover {
background: rgba(255,255,255,.12);
}
/* ── Väntar på element ───────────────────────────────────────── */
#spoton-tour-overlay.tour-waiting #spoton-tour-bubble::after {
content: 'Väntar på element…';
display: block;
font-size: 11px;
color: #60a5fa;
margin-top: 8px;
text-align: center;
}
/* ── Tillgänglighet – fokusring ──────────────────────────────── */
.tour-btn:focus-visible {
outline: 2px solid #60a5fa;
outline-offset: 2px;
}
/* ── Responsiv anpassning ────────────────────────────────────── */
@media (max-width: 360px) {
#spoton-tour-bubble {
max-width: calc(100vw - 32px);
}
.tour-title { font-size: 14px; }
.tour-text { font-size: 12px; }
}