/* ========================================================================== Strandberg Swing Analysis: egen stil ovanpå Bootstrap 5 Temat bygger på varumärkets tre färger: svart, orange och vitt. Mörkt läge är standard. Ljust läge aktiveras genom att data-theme="light" sätts på , vilket servern gör utifrån en kaka (se filters.py). Alla färger går via variabler, så temabytet är bara ett byte av värden. Innehåll 1. Designtoken 2. Bas och typografi 3. Navigation och temaväxlare 4. Knappar och länkar 5. Hero och startsida 6. Sidhuvuden och sektioner 7. Kort och paneler 8. Statusmärken 9. Formulär och dropzone 10. Flerstegsformuläret 11. Video 12. Listor och inkorg 13. Konversationstråd 14. Paketkort och priser 15. Administration 16. Tomma lägen, flash och sidfot 17. Responsivt ========================================================================== */ /* -------------------------------------------------------------------------- 1. Designtoken -------------------------------------------------------------------------- */ :root { /* Varumärkets orange, hämtad ur loggan */ --ss-orange: #f07427; --ss-orange-light: #ff9455; --ss-orange-dark: #d45e14; --ss-orange-soft: rgba(240, 116, 39, .14); /* Mörkt läge, standard */ --ss-bg: #0a0a0b; --ss-bg-alt: #121216; --ss-surface: #16161b; --ss-surface-2: #1e1e25; --ss-surface-3: #26262f; --ss-border: rgba(255, 255, 255, .11); --ss-border-strong: rgba(255, 255, 255, .2); --ss-text: #f4f4f6; --ss-text-muted: #a2a2ae; --ss-text-faint: #78788a; --ss-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --ss-shadow: 0 4px 14px rgba(0, 0, 0, .45); --ss-shadow-lg: 0 18px 50px -18px rgba(0, 0, 0, .8); /* Struktur */ --ss-radius: 12px; --ss-radius-lg: 18px; --ss-radius-sm: 8px; --ss-nav-height: 62px; /* Bootstrap-variabler som ska följa temat */ --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --bs-body-color: var(--ss-text); --bs-body-bg: var(--ss-bg); --bs-emphasis-color: var(--ss-text); --bs-link-color: var(--ss-orange); --bs-link-hover-color: var(--ss-orange-light); --bs-border-color: var(--ss-border); --bs-border-radius: var(--ss-radius); --bs-secondary-color: var(--ss-text-muted); } /* Ljust läge. Bara variablerna byts, ingen komponent behöver veta om det. Värdena är valda för att hålla god kontrast: brödtext mot bakgrund ligger över 15:1, dämpad text över 7:1 och kanter är tydligt synliga. Ett ljust tema som bara speglar det mörka blir annars för blekt. */ [data-theme="light"] { --ss-bg: #f7f7f9; --ss-bg-alt: #ebebf0; --ss-surface: #ffffff; --ss-surface-2: #f2f2f6; --ss-surface-3: #e4e4ea; --ss-border: rgba(10, 10, 11, .18); --ss-border-strong: rgba(10, 10, 11, .38); --ss-text: #0d0d12; --ss-text-muted: #44444e; --ss-text-faint: #5e5e6a; /* Mörkare orange mot vitt, annars blir kontrasten för svag på text */ --ss-orange-text: #b64f0c; --ss-orange-soft: rgba(240, 116, 39, .12); --ss-shadow-sm: 0 1px 3px rgba(10, 10, 11, .1); --ss-shadow: 0 4px 16px rgba(10, 10, 11, .12); --ss-shadow-lg: 0 18px 50px -20px rgba(10, 10, 11, .28); --bs-link-color: #b64f0c; --bs-link-hover-color: var(--ss-orange-dark); } /* Kort och paneler får en tydlig kant i ljust läge, annars flyter de ihop med bakgrunden när ytorna ligger nära varandra i ljushet. */ [data-theme="light"] .ss-card, [data-theme="light"] .ss-package, [data-theme="light"] .ss-step, [data-theme="light"] .ss-stat, [data-theme="light"] .ss-inbox-list, [data-theme="light"] .ss-request-card, [data-theme="light"] .ss-message, [data-theme="light"] .ss-tip-card { box-shadow: var(--ss-shadow-sm); } /* Orange på vitt behöver mörkare ton för att bli läsbar som text, men knappar och ifyllda ytor ska behålla varumärkets ljusare orange. */ [data-theme="light"] .btn-accent, [data-theme="light"] .ss-package-flag, [data-theme="light"] .ss-filter.is-active, [data-theme="light"] .ss-admin-tab.is-active, [data-theme="light"] .ss-step-number, [data-theme="light"] .ss-theme-btn[aria-pressed="true"], [data-theme="light"] .ss-coach-tag, [data-theme="light"] .ss-badge-dot { background: var(--ss-orange-dark); border-color: var(--ss-orange-dark); color: #ffffff; } [data-theme="light"] .btn-accent:hover, [data-theme="light"] .btn-accent:focus { background: var(--ss-orange); border-color: var(--ss-orange); color: #ffffff; } :root { --ss-orange-text: var(--ss-orange); } /* -------------------------------------------------------------------------- 2. Bas och typografi -------------------------------------------------------------------------- */ html { color-scheme: dark; touch-action: manipulation; } [data-theme="light"] { color-scheme: light; } body { background-color: var(--ss-bg); color: var(--ss-text); font-family: var(--bs-body-font-family); -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } h1, h2, h3, .ss-display { font-family: "Barlow Condensed", "Inter", system-ui, sans-serif; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; color: var(--ss-text); } h4, h5, h6 { font-weight: 600; letter-spacing: -.005em; } .ss-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ss-orange-text); } .ss-lead { font-size: 1.09rem; line-height: 1.7; color: var(--ss-text-muted); } .ss-measure-sm { max-width: 34rem; } .ss-measure { max-width: 42rem; } .ss-measure-lg { max-width: 48rem; } .ss-meta-text { color: var(--ss-text-muted); font-size: .85rem; } .ss-note { color: var(--ss-text-muted); font-size: .92rem; line-height: 1.65; } .ss-orange { color: var(--ss-orange-text); } /* Markerad text, orange fält med svart text i båda lägena */ ::selection { background: var(--ss-orange); color: #0a0a0b; text-shadow: none; } ::-moz-selection { background: var(--ss-orange); color: #0a0a0b; text-shadow: none; } :focus-visible { outline: 3px solid var(--ss-orange); outline-offset: 2px; border-radius: 4px; } hr { border-color: var(--ss-border); opacity: 1; } /* -------------------------------------------------------------------------- 3. Navigation och temaväxlare -------------------------------------------------------------------------- */ .ss-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; background: rgba(10, 10, 11, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--ss-border); padding-block: .6rem; box-shadow: 0 8px 32px rgba(0, 0, 0, .35); } [data-theme="light"] .ss-navbar { background: rgba(255, 255, 255, .88); box-shadow: 0 8px 32px rgba(10, 10, 11, .08), 0 0 48px rgba(240, 116, 39, .1); } .ss-navbar .nav-link { color: var(--ss-text-muted); font-weight: 600; font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--ss-radius-sm); padding-inline: .8rem; transition: color .15s ease; } .ss-navbar .nav-link:hover, .ss-navbar .nav-link:focus { color: var(--ss-text); } .ss-navbar .navbar-toggler { border-color: var(--ss-border-strong); padding: .35rem .55rem; } .ss-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f07427' stroke-linecap='round' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .navbar-brand { padding-block: 0; } .ss-brand-logo { height: 38px; width: auto; display: block; } /* Loggan byts med temat, utan att JavaScript behöver röra den. */ .ss-only-dark { display: block; } .ss-only-light { display: none; } [data-theme="light"] .ss-only-dark { display: none; } [data-theme="light"] .ss-only-light { display: block; } /* Temaväxlaren, ett piller med två lägen */ .ss-theme-toggle { display: inline-flex; align-items: center; } .ss-theme-pill { display: inline-flex; align-items: center; gap: .15rem; padding: .2rem; border: 1px solid var(--ss-border); border-radius: 999px; background: var(--ss-surface-2); cursor: pointer; } /* Varianten inuti kontomenyn: etikett till vänster, pillret till höger. */ .ss-theme-toggle-menu { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .35rem 1.1rem; width: 100%; } .ss-theme-label { font-size: .92rem; color: var(--ss-text); } .ss-theme-btn { display: grid; place-items: center; width: 30px; height: 26px; border: 0; border-radius: 999px; background: transparent; color: var(--ss-text-faint); font-size: .8rem; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .ss-theme-btn:hover { color: var(--ss-text); } .ss-theme-btn[aria-pressed="true"] { background: var(--ss-orange); color: #0a0a0b; } .ss-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ss-surface-3); border: 1px solid var(--ss-border); color: var(--ss-text); font-size: .76rem; font-weight: 700; } .ss-avatar-orange { background: var(--ss-orange); color: #0a0a0b; border-color: transparent; } .ss-badge-dot { position: absolute; top: .3rem; right: .35rem; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: 9px; background: var(--ss-orange); color: #0a0a0b; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; } .ss-navbar .nav-link.ss-nav-has-badge { padding-right: 2rem; } .dropdown-menu { background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); padding-block: .4rem; } .dropdown-item { color: var(--ss-text); border-radius: 6px; margin-inline: .4rem; width: auto; } .dropdown-item:hover, .dropdown-item:focus { background: var(--ss-surface-3); color: var(--ss-text); } .dropdown-header { color: var(--ss-text-muted); } .dropdown-divider { border-color: var(--ss-border); } /* -------------------------------------------------------------------------- 4. Knappar och länkar -------------------------------------------------------------------------- */ .btn { --bs-btn-font-weight: 700; border-radius: var(--ss-radius-sm); padding: .62rem 1.3rem; font-size: .92rem; letter-spacing: .03em; transition: transform .12s ease, background-color .15s ease, border-color .15s ease; } .btn:active { transform: translateY(1px); } .btn-accent { background: var(--ss-orange); border: 1px solid var(--ss-orange); color: #0a0a0b; } .btn-accent:hover, .btn-accent:focus { background: var(--ss-orange-light); border-color: var(--ss-orange-light); color: #0a0a0b; } .btn-solid { background: var(--ss-text); border: 1px solid var(--ss-text); color: var(--ss-bg); } .btn-solid:hover, .btn-solid:focus { background: var(--ss-text-muted); border-color: var(--ss-text-muted); color: var(--ss-bg); } .btn-outline-accent { border: 1.5px solid var(--ss-border-strong); color: var(--ss-text); background: transparent; } .btn-outline-accent:hover, .btn-outline-accent:focus { border-color: var(--ss-orange); color: var(--ss-orange-text); background: var(--ss-orange-soft); } .btn-ghost { border: 1.5px solid var(--ss-border-strong); color: var(--ss-text); background: transparent; } .btn-ghost:hover, .btn-ghost:focus { background: var(--ss-surface-2); color: var(--ss-text); } .btn-outline-danger { border-width: 1.5px; } .btn-lg { padding: .85rem 1.8rem; font-size: 1rem; } .btn-sm { padding: .35rem .8rem; font-size: .82rem; } .ss-icon-link { color: var(--ss-text-muted); text-decoration: none; } .ss-icon-link:hover { color: var(--ss-orange-text); } .ss-link-look { color: var(--ss-orange-text); text-decoration: underline; font-weight: 600; } /* -------------------------------------------------------------------------- 5. Hero och startsida -------------------------------------------------------------------------- */ .ss-hero { position: relative; overflow: hidden; background: var(--ss-bg); padding-block: clamp(3rem, 8vw, 6rem); padding-top: calc(clamp(3rem, 8vw, 6rem) + var(--ss-nav-height)); border-bottom: 1px solid var(--ss-border); } /* Diagonal orange glöd, ett eko av pixelupplösningen i loggan */ .ss-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 500px at 88% 0%, rgba(240, 116, 39, .192), transparent 60%), radial-gradient(600px 400px at 0% 100%, rgba(240, 116, 39, .084), transparent 60%); pointer-events: none; } [data-theme="light"] .ss-hero::before { background: radial-gradient(900px 500px at 88% 0%, rgba(240, 116, 39, .28), transparent 58%), radial-gradient(700px 420px at 0% 100%, rgba(240, 116, 39, .16), transparent 58%), radial-gradient(500px 300px at 50% 40%, rgba(240, 116, 39, .08), transparent 65%); } [data-theme="light"] body { background: radial-gradient(1100px 520px at 100% -8%, rgba(240, 116, 39, .12), transparent 55%), radial-gradient(760px 420px at -5% 105%, rgba(240, 116, 39, .07), transparent 52%), var(--ss-bg); } .ss-hero > .container { position: relative; z-index: 1; } .ss-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); line-height: 1.02; margin-bottom: 1.15rem; } .ss-hero h1 em { font-style: normal; color: var(--ss-orange-text); } .ss-hero-lead { font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.7; color: var(--ss-text-muted); max-width: 36rem; } .ss-hero-points { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .65rem; } .ss-hero-points li { display: flex; align-items: flex-start; gap: .65rem; color: var(--ss-text); font-size: .97rem; line-height: 1.55; } .ss-hero-points i { color: var(--ss-orange); margin-top: .2rem; flex: none; } /* Numrerade steg */ .ss-step { position: relative; height: 100%; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius-lg); padding: 1.8rem 1.6rem; transition: border-color .18s ease, transform .18s ease; } .ss-step:hover { border-color: var(--ss-orange); transform: translateY(-3px); } .ss-step-number { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--ss-radius-sm); background: var(--ss-orange); color: #0a0a0b; font-family: "Barlow Condensed", sans-serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 1.1rem; flex: none; } .ss-step h3 { font-size: 1.18rem; margin-bottom: .55rem; } .ss-step p { color: var(--ss-text-muted); margin-bottom: 0; font-size: .94rem; line-height: 1.65; } /* Sektioner */ .ss-section { padding-block: clamp(3rem, 7vw, 5.5rem); } main > .container.ss-section:first-child, main > .ss-section:first-child { padding-top: calc(clamp(3rem, 7vw, 5.5rem) + var(--ss-nav-height)); } .ss-section-alt { background: var(--ss-bg-alt); } .ss-section-title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin-bottom: .8rem; } /* Trygghetsremsa */ .ss-trustbar { background: var(--ss-bg-alt); border-bottom: 1px solid var(--ss-border); padding-block: 1.15rem; } .ss-trustbar-item { display: flex; align-items: center; justify-content: center; gap: .55rem; color: var(--ss-text-muted); font-size: .88rem; font-weight: 500; } .ss-trustbar-item i { color: var(--ss-orange); } /* Punktlista med bock */ .ss-check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; } .ss-check-list li { display: flex; align-items: flex-start; gap: .7rem; font-size: .98rem; line-height: 1.6; color: var(--ss-text); } .ss-check-list i { color: var(--ss-orange); margin-top: .2rem; flex: none; } /* Om tränaren */ .ss-coach-card { background: var(--ss-surface); border: 1px solid var(--ss-border); border-left: 3px solid var(--ss-orange); border-radius: var(--ss-radius-lg); padding: clamp(1.6rem, 4vw, 2.5rem); } .ss-coach-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--ss-radius-lg); border: 1px solid var(--ss-border); } .ss-merit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; } .ss-merit-list li { display: flex; align-items: center; gap: .65rem; font-size: .95rem; color: var(--ss-text); } .ss-merit-list i { color: var(--ss-orange); flex: none; } .ss-quote { border-left: 3px solid var(--ss-orange); padding-left: 1.1rem; font-size: 1.08rem; line-height: 1.6; color: var(--ss-text); font-style: italic; } .ss-hero-coach { max-width: min(360px, 88vw); margin-inline: auto; box-shadow: var(--ss-shadow-lg); } /* -------------------------------------------------------------------------- 6. Sidhuvuden -------------------------------------------------------------------------- */ .ss-page-header { background: var(--ss-bg-alt); border-bottom: 1px solid var(--ss-border); padding-block: clamp(2rem, 5vw, 3rem); padding-top: calc(clamp(2rem, 5vw, 3rem) + var(--ss-nav-height)); margin-bottom: 2rem; } .ss-page-title { font-size: clamp(1.8rem, 3.8vw, 2.7rem); margin-bottom: .4rem; } .ss-page-subtitle { color: var(--ss-text-muted); margin-bottom: 0; max-width: 46rem; } /* -------------------------------------------------------------------------- 7. Kort och paneler -------------------------------------------------------------------------- */ .ss-card { background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius-lg); } .ss-card-body { padding: clamp(1.25rem, 3vw, 1.85rem); } .ss-card-header { padding: 1.05rem clamp(1.25rem, 3vw, 1.85rem); border-bottom: 1px solid var(--ss-border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .ss-card-header h2, .ss-card-header h3 { margin: 0; font-size: 1.02rem; } .ss-card-link { font-size: .86rem; font-weight: 600; color: var(--ss-orange-text); text-decoration: none; } .ss-card-link:hover { text-decoration: underline; } /* Faktarutor */ .ss-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--ss-border); border-radius: var(--ss-radius); overflow: hidden; border: 1px solid var(--ss-border); } .ss-fact { background: var(--ss-surface); padding: .8rem 1rem; } .ss-fact dt { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-text-faint); margin-bottom: .25rem; } .ss-fact dd { margin: 0; font-weight: 600; font-size: .93rem; color: var(--ss-text); } /* Nyckeltal */ .ss-stat { background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius); padding: 1rem 1.15rem; height: 100%; } .ss-stat-value { font-family: "Barlow Condensed", sans-serif; font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--ss-text); } .ss-stat-label { font-size: .72rem; color: var(--ss-text-faint); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-top: .4rem; } .ss-stat.is-highlight { border-color: var(--ss-orange); } .ss-stat.is-highlight .ss-stat-value { color: var(--ss-orange-text); } .ss-stat-link { display: block; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; } .ss-stat-link:hover { color: inherit; border-color: var(--ss-orange); transform: translateY(-2px); } /* -------------------------------------------------------------------------- 8. Statusmärken -------------------------------------------------------------------------- */ .ss-status { display: inline-flex; align-items: center; gap: .4rem; padding: .24rem .68rem; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; } .ss-status-sm { font-size: .72rem; padding: .16rem .55rem; } .ss-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status-draft { background: var(--ss-surface-3); color: var(--ss-text-muted); border-color: var(--ss-border); } /* Väntar på betalning: gult, så att det inte går att förväxla med orange "Ny". */ .status-unpaid { background: rgba(230, 170, 40, .16); color: #e0a92e; border-color: rgba(230, 170, 40, .38); } .status-new { background: rgba(240, 116, 39, .16); color: var(--ss-orange-text); border-color: rgba(240, 116, 39, .4); } .status-review { background: rgba(88, 150, 240, .16); color: #7aaaf5; border-color: rgba(88, 150, 240, .35); } .status-answered { background: rgba(52, 190, 120, .15); color: #48c98a; border-color: rgba(52, 190, 120, .35); } .status-closed { background: var(--ss-surface-3); color: var(--ss-text-faint); border-color: var(--ss-border); } [data-theme="light"] .status-review { color: #1f5fbf; } [data-theme="light"] .status-answered { color: #14804a; } [data-theme="light"] .status-unpaid { color: #8a6100; } .ss-tag { display: inline-flex; align-items: center; background: var(--ss-surface-3); color: var(--ss-text-muted); border-radius: 5px; padding: .16rem .5rem; font-size: .75rem; font-weight: 500; } .ss-tag-strong { background: var(--ss-orange-soft); color: var(--ss-orange-text); font-weight: 600; } .ss-paid { background: rgba(52, 190, 120, .15); color: #48c98a; border: 1px solid rgba(52, 190, 120, .35); } .ss-unpaid { background: rgba(240, 116, 39, .14); color: var(--ss-orange-text); border: 1px solid rgba(240, 116, 39, .4); } [data-theme="light"] .ss-paid { color: #14804a; } /* -------------------------------------------------------------------------- 9. Formulär och dropzone -------------------------------------------------------------------------- */ .form-label { font-weight: 600; font-size: .92rem; margin-bottom: .4rem; color: var(--ss-text); } .form-control, .form-select { background-color: var(--ss-surface-2); border: 1.5px solid var(--ss-border); color: var(--ss-text); border-radius: var(--ss-radius-sm); padding: .62rem .85rem; font-size: .95rem; } .form-control:focus, .form-select:focus { background-color: var(--ss-surface-2); border-color: var(--ss-orange); box-shadow: 0 0 0 .2rem rgba(240, 116, 39, .2); color: var(--ss-text); } .form-control::placeholder { color: var(--ss-text-faint); } .form-text { font-size: .84rem; color: var(--ss-text-muted); } .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a2a2ae' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .input-group-text { background: var(--ss-surface-3); border: 1.5px solid var(--ss-border); border-right: 0; color: var(--ss-text-muted); border-radius: var(--ss-radius-sm) 0 0 var(--ss-radius-sm); } .form-check-input { background-color: var(--ss-surface-2); border-color: var(--ss-border-strong); } .form-check-input:checked { background-color: var(--ss-orange); border-color: var(--ss-orange); } .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(240, 116, 39, .25); } .form-check-label { color: var(--ss-text); } .invalid-feedback { color: #ff6b6b; } .is-invalid { border-color: #ff6b6b !important; } /* Kryssrute- och radiogrupper från CheckboxGroup/RadioField */ .ss-choice-grid ul, ul.ss-choice-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .55rem; } .ss-choice-grid li { margin: 0; } .ss-choice-grid label { display: flex; align-items: center; gap: .6rem; padding: .65rem .85rem; border: 1.5px solid var(--ss-border); border-radius: var(--ss-radius-sm); background: var(--ss-surface-2); cursor: pointer; font-size: .92rem; transition: border-color .15s ease, background-color .15s ease; margin: 0; } .ss-choice-grid label:hover { border-color: var(--ss-border-strong); } .ss-choice-grid input { flex: none; margin: 0; accent-color: var(--ss-orange); width: 1.05rem; height: 1.05rem; } .ss-choice-grid input:checked + label, .ss-choice-grid label:has(input:checked) { border-color: var(--ss-orange); background: var(--ss-orange-soft); } /* En kolumn när alternativen är långa */ .ss-choice-stack ul, ul.ss-choice-stack { grid-template-columns: 1fr; } /* Dropzone */ .ss-dropzone { border: 2px dashed var(--ss-border-strong); border-radius: var(--ss-radius-lg); background: var(--ss-surface); transition: border-color .18s ease, background-color .18s ease; } .ss-dropzone.is-dragover { border-color: var(--ss-orange); background: var(--ss-orange-soft); } .ss-dropzone.is-invalid { border-color: #ff6b6b; } .ss-dropzone.has-files { border-style: solid; border-color: var(--ss-orange); } .ss-dropzone-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; padding: 2.4rem 1.25rem; cursor: pointer; margin: 0; } .ss-dropzone-icon { font-size: 2.3rem; color: var(--ss-orange); } .ss-dropzone-title { font-weight: 700; font-size: 1.05rem; color: var(--ss-text); } .ss-dropzone-hint { font-size: .86rem; color: var(--ss-text-muted); line-height: 1.6; } .ss-dropzone-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ss-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; padding: 0 1.25rem 1.25rem; } .ss-preview { position: relative; border: 1px solid var(--ss-border); border-radius: var(--ss-radius); overflow: hidden; background: var(--ss-surface-2); } .ss-preview-media { position: relative; line-height: 0; background: #000; } .ss-preview-media.is-broken { min-height: 120px; display: grid; place-items: center; color: var(--ss-text-faint); font-size: .82rem; } .ss-preview-media.is-broken::after { content: "Kunde inte visa förhandsvisning"; } .ss-preview-media .ss-media-badge { z-index: 2; } .ss-preview video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #000; display: block; } .ss-preview-image { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: #000; display: block; } .ss-preview-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .65rem; font-size: .78rem; color: var(--ss-text-muted); } .ss-preview-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 600; color: var(--ss-text); } .ss-preview-uploading, .ss-preview-done, .ss-preview-failed { padding: .8rem .9rem; } .ss-preview-done { border-color: rgba(52, 190, 120, .45); } .ss-preview-failed { border-color: rgba(255, 107, 107, .5); } .ss-upload-head { display: flex; align-items: center; gap: .65rem; } .ss-upload-icon { font-size: 1.1rem; color: var(--ss-orange); flex: none; } .ss-preview-done .ss-upload-icon { color: #48c98a; } .ss-preview-done .ss-upload-icon::before { content: "\F26B"; } .ss-preview-failed .ss-upload-icon { color: #ff6b6b; } .ss-preview-failed .ss-upload-icon::before { content: "\F33A"; } .ss-upload-titles { min-width: 0; flex: 1; } .ss-upload-status { font-size: .77rem; color: var(--ss-text-muted); margin-top: .1rem; } .ss-preview-failed .ss-upload-status { color: #ff6b6b; } .ss-upload-remove { flex: none; } .ss-preview-uploading .progress { margin-top: .6rem; } .progress { background: var(--ss-surface-3); } .ss-progress { height: .4rem; } .ss-progress-bar { width: 100%; } .progress-bar.bg-success { background-color: var(--ss-orange) !important; } .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .55; } [data-theme="light"] .btn-close { filter: none; } .btn-close:hover { opacity: 1; } /* -------------------------------------------------------------------------- 10. Flerstegsformuläret -------------------------------------------------------------------------- */ .ss-steps { display: flex; align-items: center; gap: .4rem; list-style: none; padding: 0; margin: 0 0 2rem; } .ss-steps-item { display: flex; align-items: center; gap: .5rem; flex: 1; color: var(--ss-text-faint); font-size: .84rem; font-weight: 600; } .ss-steps-item:not(:last-child)::after { content: ""; flex: 1; height: 2px; background: var(--ss-border); border-radius: 2px; } .ss-steps-num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ss-surface-2); border: 2px solid var(--ss-border); color: var(--ss-text-faint); font-size: .88rem; font-weight: 700; transition: all .2s ease; } .ss-steps-item.is-active { color: var(--ss-text); } .ss-steps-item.is-active .ss-steps-num { background: var(--ss-orange); border-color: var(--ss-orange); color: #0a0a0b; } .ss-steps-item.is-done .ss-steps-num { background: transparent; border-color: var(--ss-orange); color: var(--ss-orange-text); } .ss-steps-item.is-done::after { background: var(--ss-orange); } .ss-step-panel { margin-bottom: 2rem; } .js-wizard .ss-step-panel { display: none; } .js-wizard .ss-step-panel.is-active { display: block; } .ss-step-title { font-size: 1.5rem; margin-bottom: .4rem; } .ss-step-intro { color: var(--ss-text-muted); margin-bottom: 1.4rem; } .ss-step-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1.6rem; } .ss-field-group { margin-bottom: 1.6rem; } .ss-field-group > .form-label, .ss-group-label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .6rem; color: var(--ss-text); } .ss-tips-box { margin-top: 1.25rem; padding: 1.1rem 1.25rem; background: var(--ss-orange-soft); border: 1px solid rgba(240, 116, 39, .3); border-radius: var(--ss-radius); } .ss-tips-title { font-family: var(--bs-body-font-family); text-transform: none; font-size: .95rem; font-weight: 700; color: var(--ss-text); margin-bottom: .6rem; } .ss-tips-list { margin: 0 0 .75rem; padding-left: 1.15rem; color: var(--ss-text-muted); font-size: .88rem; line-height: 1.75; } .ss-upload-summary { display: flex; align-items: flex-start; gap: .85rem; margin-top: 1.25rem; padding: .95rem 1.15rem; border-radius: var(--ss-radius); border: 1px solid; } .ss-upload-summary.is-done { background: rgba(52, 190, 120, .1); border-color: rgba(52, 190, 120, .4); color: #48c98a; } .ss-upload-summary.is-working { background: var(--ss-orange-soft); border-color: rgba(240, 116, 39, .4); color: var(--ss-orange-text); } [data-theme="light"] .ss-upload-summary.is-done { color: #14804a; } .ss-upload-summary-icon { font-size: 1.3rem; line-height: 1.2; } .ss-upload-summary-text { font-size: .87rem; margin-top: .1rem; color: var(--ss-text-muted); } /* Paketval i sista steget */ .ss-package-picker { display: grid; gap: .75rem; } .ss-package-picker ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; } .ss-package-picker li { margin: 0; } .ss-package-picker label { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.15rem; border: 1.5px solid var(--ss-border); border-radius: var(--ss-radius); background: var(--ss-surface-2); cursor: pointer; font-size: 1rem; font-weight: 600; margin: 0; } .ss-package-picker label:has(input:checked) { border-color: var(--ss-orange); background: var(--ss-orange-soft); } .ss-package-picker input { accent-color: var(--ss-orange); width: 1.15rem; height: 1.15rem; flex: none; } /* -------------------------------------------------------------------------- 11. Video -------------------------------------------------------------------------- */ .ss-video { margin: 0; border-radius: var(--ss-radius); overflow: hidden; background: #000; border: 1px solid var(--ss-border); } .ss-video-el { width: 100%; max-height: 70vh; display: block; background: #000; } .ss-video-compact .ss-video-el { max-height: 320px; } /* -------------------------------------------------------------------------- Videospelare för svinganalys Kontrollraden hålls kort med flit. Allt som hör till analysarbetet ligger bakom Redigera, så att den som bara vill titta slipper det. -------------------------------------------------------------------------- */ .ss-video-stage { position: relative; line-height: 0; background: #000; } /* Bilden behåller alltid sina proportioner och beskärs aldrig. En stående film får svarta fält på sidorna i stället för att kapas. */ .ss-video-el { object-fit: contain; } /* Ritytan placeras av skriptet exakt över bildens synliga yta, inte över hela elementet. Den släpper igenom klick tills redigeringsläget slås på, annars gick det inte att pausa genom att klicka på bilden. */ .ss-video-canvas { position: absolute; left: 0; top: 0; pointer-events: none; touch-action: none; } .ss-video.is-editing .ss-video-canvas { pointer-events: auto; cursor: crosshair; } /* Stor spelknapp mitt i bilden, försvinner så fort videon rullar. */ .ss-video-bigplay { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(10, 10, 11, .55); color: #fff; font-size: 1.7rem; cursor: pointer; transition: opacity .15s ease, transform .15s ease; } .ss-video-bigplay:hover { transform: scale(1.06); background: var(--ss-orange); } .ss-video.is-playing .ss-video-bigplay, .ss-video.is-editing .ss-video-bigplay { opacity: 0; pointer-events: none; } .ss-video-controls { display: flex; align-items: center; gap: .4rem; padding: .5rem .6rem; background: var(--ss-surface-2); border-top: 1px solid var(--ss-border); } .ss-video-btn { flex: none; height: 32px; min-width: 32px; padding: 0 .4rem; display: inline-grid; grid-auto-flow: column; align-items: center; gap: .35rem; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--ss-text-muted); cursor: pointer; transition: background .12s ease, color .12s ease; } .ss-video-btn:hover { background: var(--ss-surface-3); color: var(--ss-text); } .ss-video-btn[aria-pressed="true"] { background: var(--ss-orange); color: #fff; } .ss-video-btn-text { font-size: .8rem; font-weight: 600; } .ss-video-seek { flex: 1 1 auto; min-width: 60px; height: 4px; accent-color: var(--ss-orange); cursor: pointer; } .ss-video-time { flex: none; font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--ss-text-muted); } /* En knapp som stegar mellan hastigheterna i stället för tre stycken. */ .ss-video-speed { flex: none; min-width: 34px; height: 28px; padding: 0 .4rem; border: 1px solid var(--ss-border); border-radius: 8px; background: transparent; color: var(--ss-text-muted); font-size: .8rem; font-weight: 600; cursor: pointer; } .ss-video-speed.is-active { background: var(--ss-orange); border-color: var(--ss-orange); color: #fff; } .ss-video-download { margin-left: auto; } /* Laddar första bildrutan — stor spelknapp tonas ned tills preview är redo. */ .ss-video:not(.is-preview-ready):not(.is-playing) .ss-video-bigplay { opacity: .55; } /* -- Redigeringsläget ---------------------------------------------------- */ /* Verktygen svävar över bilden, som i en bildredigerare. */ .ss-edit-bar { position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%); display: flex; align-items: center; gap: .75rem; padding: .4rem .6rem; border-radius: 12px; background: rgba(10, 10, 11, .82); backdrop-filter: blur(6px); line-height: 1; z-index: 2; } .ss-edit-group { display: flex; align-items: center; gap: .3rem; } .ss-edit-bar .ss-video-btn { color: rgba(255, 255, 255, .75); } .ss-edit-bar .ss-video-btn:hover { background: rgba(255, 255, 255, .15); color: #fff; } .ss-video-tool { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; background: transparent; color: rgba(255, 255, 255, .8); cursor: pointer; } .ss-video-tool.is-active { background: var(--ss-orange); border-color: var(--ss-orange); color: #fff; } /* Färgproven får sin färg här i stället för via style-attribut, som sidans CSP inte tillåter. Färgerna står också i _macros.html. */ .ss-video-color { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); cursor: pointer; padding: 0; } .ss-video-color.is-active { border-color: #fff; } .ss-video-color[data-color="#f07427"] { background: #f07427; } .ss-video-color[data-color="#ffffff"] { background: #ffffff; } .ss-video-color[data-color="#39d98a"] { background: #39d98a; } .ss-video-color[data-color="#4aa8ff"] { background: #4aa8ff; } .ss-edit-panel { padding: .7rem .75rem; background: var(--ss-surface-2); border-top: 1px solid var(--ss-border); display: grid; gap: .6rem; } .ss-edit-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .ss-edit-label { font-size: .78rem; font-weight: 600; color: var(--ss-text-faint); flex: none; } .ss-edit-slider { flex: 1 1 90px; min-width: 80px; height: 4px; accent-color: var(--ss-orange); cursor: pointer; } .ss-edit-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .ss-edit-actions .btn { touch-action: manipulation; } /* -- Helskärm ------------------------------------------------------------ */ /* Stående klipp kapades förut uppe och nere i helskärm. Bilden får nu hela ytan att arbeta med och behåller sina proportioner via object-fit, så ingenting beskärs. min-height: 0 behövs för att flexboxen ska krympa scenen i stället för att låta den spilla över. */ .ss-video:fullscreen { display: flex; flex-direction: column; background: #000; } .ss-video:fullscreen .ss-video-stage { flex: 1 1 auto; min-height: 0; } .ss-video:fullscreen .ss-video-el { width: 100%; height: 100%; max-height: none; object-fit: contain; } .ss-video:fullscreen .ss-video-meta { display: none; } /* -- Bildsvar ------------------------------------------------------------ */ /* En bildruta ur svingen med tränarens markeringar. */ .ss-shot { margin: 0; border-radius: var(--ss-radius); overflow: hidden; border: 1px solid var(--ss-border); background: #000; } .ss-shot-link { position: relative; display: block; line-height: 0; } .ss-shot img { width: 100%; height: auto; display: block; } .ss-shot.ss-video-compact img { max-height: 320px; object-fit: contain; } /* Numrerade klipp och bilder i tråden och i förhandsvisningen. */ .ss-media-badge { position: absolute; top: .5rem; left: .5rem; z-index: 3; min-width: 1.65rem; height: 1.65rem; padding: 0 .45rem; display: grid; place-items: center; border-radius: 999px; background: rgba(10, 10, 11, .82); color: #fff; font-size: .82rem; font-weight: 700; line-height: 1; pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); } @media (max-width: 575.98px) { /* På mobil får tiden och hastigheten inte tränga ut spolningen. */ .ss-video-controls { flex-wrap: wrap; } .ss-video-seek { order: 10; flex-basis: 100%; } .ss-video-btn-text { display: none; } .ss-edit-bar { gap: .5rem; bottom: .5rem; } } .ss-video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } /* -------------------------------------------------------------------------- 12. Listor och inkorg -------------------------------------------------------------------------- */ .ss-request-list { display: grid; gap: .8rem; } .ss-request-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius-lg); text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; } .ss-request-card:hover { border-color: var(--ss-orange); transform: translateY(-2px); color: inherit; } .ss-request-card.is-unread { border-left: 3px solid var(--ss-orange); } /* Obetald beställning: gul kant, samma signal som statusmärket. */ .ss-request-card.is-unpaid { border-left: 3px solid #e0a92e; } .ss-request-thumb { position: relative; flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--ss-radius); background: var(--ss-surface-3); color: var(--ss-orange); font-size: 1.4rem; } .ss-request-count { position: absolute; right: -5px; bottom: -5px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--ss-orange); color: #0a0a0b; font-size: .68rem; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid var(--ss-surface); } .ss-request-body { min-width: 0; flex: 1; } /* Rubrik och tidpunkt på samma rad: tiden hör ihop med rubriken, inte med statusen, och sparar en rad höjd per kort. */ .ss-request-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .3rem; } .ss-request-title { font-size: 1.02rem; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-request-when { flex: none; font-size: .78rem; } /* Statusraden bär kortets budskap: vad som händer och vad kunden ska göra. */ .ss-request-state { display: flex; align-items: baseline; gap: .45rem; margin: 0 0 .5rem; font-size: .87rem; color: var(--ss-text-muted); line-height: 1.5; } .ss-request-state i { flex: none; font-size: .85rem; } .ss-request-state strong { color: var(--ss-text); font-weight: 600; } .ss-request-tags { display: flex; flex-wrap: wrap; gap: .35rem; } .ss-request-arrow { flex: none; color: var(--ss-text-faint); font-size: 1.1rem; } .ss-request-card:hover .ss-request-arrow { color: var(--ss-orange); } /* Filter */ .ss-filters { display: flex; flex-wrap: wrap; gap: .4rem; } .ss-filter { padding: .4rem .9rem; border-radius: 999px; border: 1.5px solid var(--ss-border); background: transparent; color: var(--ss-text-muted); font-size: .85rem; font-weight: 600; text-decoration: none; transition: all .15s ease; } .ss-filter:hover { border-color: var(--ss-border-strong); color: var(--ss-text); } .ss-filter.is-active { background: var(--ss-orange); border-color: var(--ss-orange); color: #0a0a0b; } .ss-filter-count { display: inline-block; margin-left: .35rem; opacity: .7; font-weight: 500; } .ss-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; } .ss-toolbar--compact { margin-top: -0.75rem; margin-bottom: 1rem; } .ss-search { max-width: 320px; width: 100%; } /* Inkorgen. Sidhuvudet är numera samma ss-page-header som övriga sidor, så det egna ss-inbox-head behövs inte längre. */ .ss-inbox-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .ss-inbox-list { list-style: none; margin: 0; padding: 0; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius-lg); overflow: hidden; } .ss-inbox-list > li + li { border-top: 1px solid var(--ss-border); } .ss-inbox-row { display: grid; /* Fasta kolumner för meta/status så chevronen linjerar mellan raderna. */ grid-template-columns: 8px minmax(0, 1fr) minmax(9rem, 12rem) 5.75rem 1.25rem; align-items: center; gap: 1rem; width: 100%; padding: .85rem 1.15rem; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background-color .12s ease; } .ss-inbox-row:hover { background: var(--ss-surface-2); } .ss-inbox-row[aria-expanded="true"] { background: var(--ss-surface-2); } .ss-inbox-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; } .ss-inbox-row.is-unread .ss-inbox-dot { background: var(--ss-orange); } .ss-inbox-row.is-unread .ss-inbox-subject { font-weight: 700; } .ss-inbox-row[aria-expanded="true"] .ss-inbox-chevron { transform: rotate(180deg); } .ss-inbox-chevron { color: var(--ss-text-faint); transition: transform .2s ease; } .ss-inbox-main { min-width: 0; } .ss-inbox-subject { display: block; font-size: .96rem; font-weight: 600; color: var(--ss-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-inbox-preview { display: block; font-size: .84rem; color: var(--ss-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-inbox-meta { min-width: 0; } .ss-inbox-player { display: block; font-size: .88rem; font-weight: 600; color: var(--ss-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-inbox-facts { display: block; font-size: .8rem; color: var(--ss-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-inbox-status { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: .25rem; text-align: right; min-width: 0; } .ss-inbox-time { font-size: .76rem; color: var(--ss-text-faint); white-space: nowrap; } .ss-inbox-chevron { display: grid; place-items: center; align-self: center; } .ss-inbox-detail { padding: 1rem 1.15rem 1.25rem 2.3rem; border-top: 1px dashed var(--ss-border); background: var(--ss-bg-alt); } .ss-inbox-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 1fr); gap: 1.25rem 1.75rem; align-items: start; } .ss-inbox-detail-block--message { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--ss-border); } .ss-inbox-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem .85rem; padding: .85rem 1rem; border: 1px solid var(--ss-border); border-radius: var(--ss-radius); background: var(--ss-bg); } .ss-inbox-fact { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .ss-inbox-fact--wide { grid-column: 1 / -1; } .ss-inbox-fact-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-text-faint); } .ss-inbox-fact-value { font-size: .9rem; line-height: 1.45; color: var(--ss-text); overflow-wrap: anywhere; } .ss-help-request { margin-top: 1.25rem; } .ss-help-list { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; } .ss-help-list--compact { margin-top: .35rem; } /* Svingkortet: problem och beskrivning först, inspelning som en rad, övriga svar hopfällda i grupper. */ .ss-swing-scan { margin-top: 1rem; display: grid; gap: .6rem; } .ss-swing-request { display: grid; gap: .5rem; } .ss-swing-problems { margin-top: 0; gap: .4rem; } .ss-swing-problems .ss-tag-strong { font-size: .84rem; padding: .22rem .62rem; } .ss-swing-desc { margin: 0; padding: 0 0 0 .75rem; border-left: 2px solid var(--ss-orange-soft); background: none; border-radius: 0; font-size: .93rem; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; color: var(--ss-text); } .ss-swing-desc--empty { padding: 0; border: 0; background: none; font-size: .86rem; color: var(--ss-text-muted); font-style: italic; } .ss-swing-recording { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; margin: .1rem 0 0; font-size: .82rem; color: var(--ss-text-faint); } .ss-swing-recording-item { font-weight: 500; color: var(--ss-text-muted); } .ss-swing-recording-sep { color: var(--ss-text-faint); opacity: .65; user-select: none; } .ss-swing-extra { display: grid; gap: 1.05rem; padding: .35rem 0 0; } .ss-swing-extra-item { display: grid; gap: .25rem; } .ss-swing-extra-label { margin: 0; font-family: var(--bs-body-font-family); font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ss-text-muted); } .ss-swing-extra-text { margin: 0; font-size: .9rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; color: var(--ss-text); } .ss-swing-extra-note { margin: 0; font-size: .84rem; color: var(--ss-text-faint); } .ss-disclosure-count { margin-left: .25rem; font-size: .78rem; font-weight: 500; color: var(--ss-text-faint); } .ss-disclosure-count::before { content: "("; } .ss-disclosure-count::after { content: ")"; } .ss-detail-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-family: var(--bs-body-font-family); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-text-faint); margin: 1rem 0 .35rem; } .ss-detail-heading .ss-meta-text { text-transform: none; letter-spacing: 0; font-weight: 400; } .ss-detail-text { white-space: pre-line; font-size: .92rem; line-height: 1.65; margin-bottom: 0; overflow-wrap: anywhere; color: var(--ss-text); } .ss-detail-contact { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .87rem; } .ss-detail-contact i { color: var(--ss-text-faint); } .ss-detail-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; margin-top: 1.25rem; } .ss-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--ss-border); } .ss-chip-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; } .ss-chip-row--compact { margin-top: 0; gap: .4rem; } /* Avgränsade block i svingkortet. */ .ss-swing-section { margin-top: .85rem; } /* Rubrik över ett avsnitt i tråden, utanför korten. */ .ss-section-heading { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; font-size: 1.15rem; font-weight: 700; } .ss-section-heading .ss-meta-text { font-size: .8rem; font-weight: 500; padding: .1rem .5rem; border-radius: 999px; background: var(--ss-surface-3); } /* Väntläget medan analysen inte är klar. Ska läsas som ett besked. */ .ss-waiting { display: flex; gap: 1rem; padding: 1.25rem 1.4rem; border: 1px solid var(--ss-border); border-left: 3px solid var(--ss-orange); border-radius: var(--ss-radius-lg); background: var(--ss-surface); } .ss-waiting-icon { flex: none; font-size: 1.4rem; color: var(--ss-orange); line-height: 1.4; } .ss-waiting-title { font-weight: 600; } /* Hopfällbart block för sådant som ska gå att kontrollera men inte behöver ta plats. Används för kundens egna formulärsvar i tråden. */ .ss-disclosure { border-top: 1px solid var(--ss-border); padding-top: .9rem; } .ss-swing-section.ss-disclosure { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--ss-border); } .ss-swing-section.ss-disclosure > summary { font-size: .86rem; font-weight: 500; } .ss-disclosure > summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--ss-orange-text); list-style: none; } .ss-disclosure > summary::-webkit-details-marker { display: none; } .ss-disclosure > summary::before { content: "\F229"; /* bi-chevron-right */ font-family: "bootstrap-icons"; font-size: .75rem; margin-right: .45rem; display: inline-block; transition: transform .15s ease; } .ss-disclosure[open] > summary::before { transform: rotate(90deg); } .ss-disclosure-body { padding-top: .75rem; } /* Formulärsvaren som etikett och svar sida vid sida. Etiketterna är dämpade och lika breda, så att de bildar en kolumn ögat kan skumma. Under 640px läggs de över varandra i stället, annars blir svaret för smalt för att läsa. */ .ss-answers { margin: 0; } .ss-answer { display: grid; grid-template-columns: 1fr; gap: .25rem; padding: .75rem 0; border-top: 1px solid var(--ss-border); } .ss-answer:first-child { border-top: 0; padding-top: 0; } .ss-answer > dt { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-text-faint); line-height: 1.4; } .ss-answer > dd { margin: 0; font-size: .92rem; line-height: 1.6; white-space: pre-line; /* kundens radbrytningar behålls */ } @media (min-width: 640px) { .ss-answer { grid-template-columns: 9.5rem minmax(0, 1fr); gap: .35rem 1rem; padding: .6rem 0; } .ss-answer > dt { font-size: .82rem; font-weight: 500; letter-spacing: 0; text-transform: none; } } /* -------------------------------------------------------------------------- 13. Konversationstråd -------------------------------------------------------------------------- */ .ss-thread { display: grid; gap: 1.25rem; } .ss-message { background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius-lg); overflow: hidden; } .ss-message.is-coach { border-color: rgba(240, 116, 39, .4); } .ss-message-head { display: flex; align-items: center; gap: .7rem; padding: .85rem 1.15rem; background: var(--ss-surface-2); border-bottom: 1px solid var(--ss-border); } .ss-message.is-coach .ss-message-head { background: var(--ss-orange-soft); } .ss-message-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--ss-surface-3); color: var(--ss-text); font-size: .76rem; font-weight: 700; } .ss-message.is-coach .ss-message-avatar { background: var(--ss-orange); color: #0a0a0b; } .ss-message-author { font-weight: 700; font-size: .94rem; line-height: 1.25; } .ss-message-time { font-size: .79rem; color: var(--ss-text-faint); } .ss-coach-tag { background: var(--ss-orange); color: #0a0a0b; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .14rem .45rem; border-radius: 4px; } .ss-message-body { padding: 1.15rem; } .ss-message-text { white-space: pre-line; line-height: 1.7; margin-bottom: 0; overflow-wrap: anywhere; } .ss-message-videos { margin-top: 1.1rem; } .ss-answer-box { background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius-lg); padding: clamp(1.15rem, 3vw, 1.65rem); } .ss-sidebar { position: sticky; top: 5.5rem; } /* -------------------------------------------------------------------------- 14. Paketkort och priser -------------------------------------------------------------------------- */ .ss-package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.5rem; align-items: stretch; } .ss-package { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius-lg); padding: 1.9rem 1.6rem; transition: border-color .18s ease, transform .18s ease; } .ss-package:hover { border-color: var(--ss-border-strong); transform: translateY(-3px); } .ss-package.is-highlighted { border-color: var(--ss-orange); border-width: 2px; } .ss-package-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--ss-orange); color: #0a0a0b; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .85rem; border-radius: 999px; white-space: nowrap; } .ss-package-name { font-size: 1.5rem; margin-bottom: .4rem; } .ss-package-tagline { color: var(--ss-text-muted); font-size: .92rem; line-height: 1.6; margin-bottom: 1.3rem; min-height: 3rem; } .ss-package-price { display: flex; align-items: baseline; gap: .4rem; margin-bottom: 1.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--ss-border); } .ss-package-amount { font-family: "Barlow Condensed", sans-serif; font-size: 3rem; font-weight: 700; line-height: 1; color: var(--ss-orange-text); } .ss-package-period { color: var(--ss-text-faint); font-size: .88rem; } .ss-package-features { list-style: none; padding: 0; margin: 0 0 1.6rem; flex: 1; } .ss-package-features li { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; line-height: 1.55; margin-bottom: .7rem; color: var(--ss-text); } .ss-package-features i { flex: none; margin-top: .18rem; color: var(--ss-orange); } .ss-package-grid--compact { grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .ss-package-grid--compact { grid-template-columns: repeat(3, 1fr); } } .ss-package--pickable { cursor: pointer; margin: 0; position: relative; } /* I väljaren betyder orange ram "det här har du valt". Populärast får därför inte se likadant ut: en rekommendation och ett faktiskt val är skilda saker, och när båda ritades med samma orange ram gick det inte att se vilket paket man kryssat i. Populärast markeras i stället med en dämpad, streckad ram och sin flagga. Valet behåller den fyllda orangea ramen, och får dessutom en bock uppe i hörnet så att det syns även för den som inte skiljer färgerna åt. */ .ss-package--pickable.is-highlighted { border-style: dashed; border-width: 1px; border-color: var(--ss-border-strong, var(--ss-text-faint)); } .ss-package--pickable:has(input:checked) { border-style: solid; border-width: 2px; border-color: var(--ss-orange); box-shadow: 0 0 0 3px rgba(240, 116, 39, .18); } /* Bocken ritas bara när alternativet är valt. */ .ss-package--pickable::after { content: "\F26E"; /* bi-check-lg */ font-family: "bootstrap-icons"; position: absolute; top: .6rem; right: .6rem; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ss-orange); color: #fff; font-size: .7rem; opacity: 0; transform: scale(.7); transition: opacity .12s ease, transform .12s ease; } .ss-package--pickable:has(input:checked)::after { opacity: 1; transform: scale(1); } /* I väljaren är orange reserverat för valet. Populärast-flaggan blir därför en dämpad kontur i stället för en fylld orange bricka, så att blicken hittar det man faktiskt kryssat i. På prissidan, där inget går att välja, får flaggan behålla sin fyllda form. */ .ss-package--pickable .ss-package-flag { background: var(--ss-surface-3); border: 1px solid var(--ss-border); color: var(--ss-text-muted); } .ss-package--pickable:focus-within { outline: 2px solid var(--ss-orange); outline-offset: 2px; } .ss-package--pickable .ss-package-tagline { min-height: auto; } .ss-package--pickable .ss-package-price { margin-bottom: 1rem; padding-bottom: 1rem; } .ss-package--pickable .ss-package-features { margin-bottom: 0; } .ss-price-inline { font-family: "Barlow Condensed", sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--ss-orange-text); white-space: nowrap; } .ss-package-yes { color: var(--ss-orange); } .ss-package-no { color: var(--ss-text-faint); } .ss-tips-link { font-size: .88rem; font-weight: 600; color: var(--ss-orange-text); } /* Korta tipskort på inskickssidan */ .ss-tip-card { display: flex; gap: .8rem; align-items: flex-start; height: 100%; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius); padding: 1rem 1.1rem; } .ss-tip-card i { color: var(--ss-orange); font-size: 1.2rem; line-height: 1.2; flex: none; } .ss-tip-card strong { display: block; font-size: .94rem; margin-bottom: .15rem; } .ss-tip-card span { font-size: .86rem; color: var(--ss-text-muted); line-height: 1.5; } /* -------------------------------------------------------------------------- Inloggning med Google -------------------------------------------------------------------------- */ .ss-google-btn { display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; padding: .68rem 1rem; border: 1.5px solid var(--ss-border-strong); border-radius: var(--ss-radius-sm); background: var(--ss-surface-2); color: var(--ss-text); font-weight: 600; font-size: .95rem; text-decoration: none; } .ss-google-btn:hover { background: var(--ss-surface-3); color: var(--ss-text); } .ss-google-icon { width: 18px; height: 18px; flex: none; } .ss-divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--ss-text-faint); font-size: .82rem; } .ss-divider::before, .ss-divider::after { content: ""; flex: 1; height: 1px; background: var(--ss-border); } /* -------------------------------------------------------------------------- 15. Administration -------------------------------------------------------------------------- */ .ss-admin-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--ss-border); overflow-x: auto; -webkit-overflow-scrolling: touch; } .ss-admin-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border-radius: var(--ss-radius-sm); color: var(--ss-text-muted); font-size: .9rem; font-weight: 600; text-decoration: none; transition: all .15s ease; } .ss-admin-tab:hover { background: var(--ss-surface-2); color: var(--ss-text); } .ss-admin-tab.is-active { background: var(--ss-orange); color: #0a0a0b; } .ss-admin-heading { font-family: var(--bs-body-font-family); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-text-faint); margin-bottom: .75rem; } .ss-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .ss-table th, .ss-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--ss-border); vertical-align: middle; text-align: left; } .ss-table thead th { background: var(--ss-surface-2); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-text-faint); white-space: nowrap; } .ss-table tbody tr:hover { background: var(--ss-surface-2); } .ss-table tbody tr.is-inactive { opacity: .6; } .ss-table tbody tr:last-child td { border-bottom: 0; } .ss-user-cell { display: flex; align-items: center; gap: .7rem; min-width: 0; } .ss-user-name { font-weight: 600; color: var(--ss-text); text-decoration: none; } a.ss-user-name:hover { color: var(--ss-orange-text); } .min-w-0 { min-width: 0; } .ss-you-pill { display: inline-block; margin-left: .35rem; background: var(--ss-orange-soft); color: var(--ss-orange-text); font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .1rem .4rem; border-radius: 4px; vertical-align: middle; } .ss-role { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 600; border: 1px solid var(--ss-border); background: var(--ss-surface-3); color: var(--ss-text-muted); white-space: nowrap; } .role-coach { border-color: rgba(52, 190, 120, .4); color: #48c98a; background: rgba(52, 190, 120, .12); } .role-admin { border-color: var(--ss-orange); color: var(--ss-orange-text); background: var(--ss-orange-soft); } [data-theme="light"] .role-coach { color: #14804a; } .ss-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; justify-content: flex-end; } .ss-row-actions--stack { flex-direction: column; align-items: stretch; min-width: 11rem; } .ss-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } .ss-row-actions .form-select-sm { min-width: 7.5rem; } .ss-row-actions .btn-sm { white-space: nowrap; } .ss-simple-list { list-style: none; margin: 0; padding: 0; } .ss-simple-list li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; } .ss-simple-list li + li { border-top: 1px solid var(--ss-border); } .ss-order-delete { margin-left: auto; flex-shrink: 0; } .ss-order-delete .btn { color: var(--ss-text-muted); padding: .25rem .5rem; } .ss-order-delete .btn:hover { color: #dc2626; } /* Kassan: sammanfattning av beställningen och beloppet att betala. */ .ss-order-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--ss-border); } .ss-order-price { flex: none; font-size: 1.35rem; font-weight: 700; color: var(--ss-orange-text); } .ss-order-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; } .ss-order-total span { color: var(--ss-text-muted); } .ss-order-total strong { font-size: 1.6rem; letter-spacing: -.02em; } .ss-shortcuts { display: grid; gap: .6rem; } .ss-shortcut { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border: 1px solid var(--ss-border); border-radius: var(--ss-radius); text-decoration: none; color: inherit; transition: border-color .15s ease; } .ss-shortcut:hover { border-color: var(--ss-orange); color: inherit; } .ss-shortcut i { font-size: 1.2rem; color: var(--ss-orange); flex: none; } .ss-shortcut strong { display: block; font-size: .93rem; } .ss-shortcut span { font-size: .84rem; color: var(--ss-text-muted); line-height: 1.4; } .ss-purge-box { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; height: 100%; padding: 1.1rem 1.25rem; border: 1px solid var(--ss-border); border-radius: var(--ss-radius); background: var(--ss-surface-2); } .ss-purge-box strong { display: block; margin-bottom: .3rem; font-size: .96rem; } .ss-file-icon { color: var(--ss-orange); font-size: 1.1rem; flex: none; } .ss-orphan-list summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--ss-orange-text); } .ss-orphan-list ul { margin: .75rem 0 0; padding-left: 1.15rem; font-size: .84rem; line-height: 1.8; } .ss-orphan-list code { background: var(--ss-surface-3); padding: .1rem .35rem; border-radius: 4px; color: var(--ss-text-muted); } /* Konton – enhetlig adminvy med modal */ .ss-table-clickable tbody tr[data-account-row] { cursor: pointer; } .ss-account-modal .modal-content { background: var(--ss-surface); border: 1px solid var(--ss-border); color: var(--ss-text); } .ss-account-modal .modal-header { border-bottom-color: var(--ss-border); } .ss-account-panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .ss-account-panel-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .ss-account-panel-title { margin: 0; } .ss-stat-compact { padding: .75rem .85rem; } .ss-stat-compact .ss-stat-value { font-size: 1.15rem; } .ss-stat-compact .ss-stat-label { font-size: .72rem; } .ss-account-action + .ss-account-action { margin-top: .75rem; } /* -------------------------------------------------------------------------- 16. Tomma lägen, flash, accordion och sidfot -------------------------------------------------------------------------- */ .ss-empty { text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1.5rem; background: var(--ss-surface); border: 2px dashed var(--ss-border); border-radius: var(--ss-radius-lg); } .ss-empty-icon { display: block; font-size: 2.5rem; color: var(--ss-orange); margin-bottom: .9rem; } .ss-empty-text { color: var(--ss-text-muted); } .ss-flash-wrap { margin-top: 0; padding-top: calc(var(--ss-nav-height) + .85rem); } /* Toast-meddelanden, flyter ovanpå innehållet */ .ss-toast-stack { position: fixed; top: calc(var(--ss-nav-height) + .75rem); left: 50%; transform: translateX(-50%); width: min(92vw, 480px); z-index: 1045; display: grid; gap: .55rem; pointer-events: none; } .ss-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: .65rem; padding: .85rem 1rem; border-radius: var(--ss-radius); border: 1px solid var(--ss-border); background: var(--ss-surface); box-shadow: var(--ss-shadow-lg); color: var(--ss-text); animation: ss-toast-in .28s ease both; } @keyframes ss-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .ss-toast i:first-child { color: var(--ss-orange); margin-top: .1rem; flex: none; } .ss-toast--success { border-left: 3px solid var(--ss-orange); background: var(--ss-orange-soft); } .ss-toast--danger { border-left: 3px solid #ff6b6b; background: rgba(255, 107, 107, .1); } .ss-toast--warning { border-left: 3px solid var(--ss-orange-dark); background: var(--ss-orange-soft); } .ss-toast--info { border-left: 3px solid var(--ss-border-strong); background: var(--ss-surface-2); } .ss-toast-close { border: 0; background: transparent; color: var(--ss-text-muted); padding: 0; line-height: 1; margin-left: auto; } /* Mobilmeny */ .ss-menu-btn { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--ss-border); border-radius: 12px; background: var(--ss-surface-2); color: var(--ss-orange); font-size: 1.35rem; } .ss-mobile-menu { position: fixed; inset: 0; z-index: 1040; } .ss-mobile-menu[hidden] { display: none !important; } .ss-mobile-menu.is-open { display: block; } .ss-mobile-menu__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px); } .ss-mobile-menu__sheet { position: absolute; top: calc(var(--ss-nav-height) + .5rem); right: max(.75rem, calc(50% - 540px + .75rem)); width: min(calc(100% - 1.5rem), 320px); max-height: calc(100dvh - var(--ss-nav-height) - 1rem); overflow: auto; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius-lg); box-shadow: var(--ss-shadow-lg); padding: .85rem; display: flex; flex-direction: column; gap: .75rem; } .ss-mobile-menu__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .ss-mobile-menu__title { font-family: "Barlow Condensed", sans-serif; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .95rem; } .ss-mobile-menu__close { border: 0; background: var(--ss-surface-2); color: var(--ss-text); width: 34px; height: 34px; border-radius: 10px; } .ss-mobile-profile { display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; border-radius: var(--ss-radius); background: var(--ss-orange-soft); border: 1px solid var(--ss-border); text-decoration: none; color: inherit; } .ss-mobile-profile__text { min-width: 0; flex: 1; } .ss-mobile-menu__links { display: grid; gap: .15rem; } .ss-mobile-link { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem .5rem; border-radius: 10px; text-decoration: none; color: var(--ss-text); font-weight: 600; font-size: .92rem; } .ss-mobile-link:hover { background: var(--ss-surface-2); color: var(--ss-text); } .ss-mobile-link--cta { color: var(--ss-orange-text); } .ss-mobile-link-arrow { color: var(--ss-text-faint); font-size: .85rem; } .ss-mobile-menu__foot { margin-top: auto; padding-top: .35rem; border-top: 1px solid var(--ss-border); } /* Cookie consent modal */ .ss-cookie-modal { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 1.25rem; } .ss-cookie-modal[hidden] { display: none !important; } .ss-cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 11, .55); backdrop-filter: blur(4px); } [data-theme="light"] .ss-cookie-modal__backdrop { background: rgba(20, 20, 24, .35); } .ss-cookie-modal__card { position: relative; width: min(92vw, 420px); padding: 2rem 1.75rem 1.5rem; border-radius: var(--ss-radius-lg); background: #fff; box-shadow: 0 18px 48px rgba(0, 0, 0, .22); text-align: center; color: #2a2a30; } [data-theme="dark"] .ss-cookie-modal__card { background: var(--ss-surface); color: var(--ss-text); border: 1px solid var(--ss-border); } .ss-cookie-modal__icon { font-size: 3.25rem; line-height: 1; margin-bottom: .75rem; } .ss-cookie-modal__title { font-family: var(--ss-font-display, inherit); font-size: 1.35rem; font-weight: 700; margin-bottom: .65rem; color: inherit; } .ss-cookie-modal__text, .ss-cookie-modal__explain { font-size: .92rem; line-height: 1.55; color: #5c5c66; margin-bottom: 1.25rem; } [data-theme="dark"] .ss-cookie-modal__text, [data-theme="dark"] .ss-cookie-modal__explain { color: var(--ss-text-muted); } .ss-cookie-modal__more[hidden] { display: none; } .ss-cookie-modal__more .ss-cookie-modal__explain { margin-bottom: 0; } .ss-cookie-modal__accept { display: block; width: 100%; max-width: 220px; margin: 0 auto .75rem; padding: .65rem 1.25rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--ss-radius); background: #c4956a; border-color: #c4956a; color: #fff; } .ss-cookie-modal__accept:hover, .ss-cookie-modal__accept:focus { background: #b88458; border-color: #b88458; color: #fff; } .ss-cookie-modal__link { display: inline-block; padding: 0; border: 0; background: none; font-size: .85rem; color: #8a8a96; text-decoration: underline; cursor: pointer; } .ss-cookie-modal__link:hover { color: var(--ss-orange-dark); } body.ss-cookie-open { overflow: hidden; } /* Admin loggar / aktivitet */ .ss-log-filters { display: flex; flex-wrap: wrap; gap: .5rem; } .ss-log-filter-count { display: inline-block; min-width: 1.25rem; padding: 0 .35rem; margin-left: .15rem; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .72rem; text-align: center; } [data-theme="light"] .ss-log-filter-count { background: rgba(10, 10, 11, .08); } .ss-activity-list { list-style: none; margin: 0; padding: 0; } .ss-activity-item { display: flex; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ss-border); } .ss-activity-item:last-child { border-bottom: 0; } .ss-activity-icon { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 999px; display: grid; place-items: center; background: var(--ss-orange-soft); color: var(--ss-orange-text); } .ss-activity-item--auth .ss-activity-icon { background: rgba(96, 165, 250, .15); color: #7cb8ff; } .ss-activity-item--booking .ss-activity-icon { background: rgba(52, 190, 120, .12); color: #48c98a; } .ss-activity-item--payment .ss-activity-icon { background: rgba(240, 116, 39, .15); color: var(--ss-orange-text); } .ss-activity-item--profile .ss-activity-icon { background: rgba(167, 139, 250, .15); color: #b49cff; } .ss-activity-item--coach .ss-activity-icon { background: rgba(251, 191, 36, .14); color: #f0b429; } .ss-activity-item--admin .ss-activity-icon { background: rgba(248, 113, 113, .12); color: #ff8080; } .ss-activity-body { min-width: 0; flex: 1; } .ss-activity-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; } .ss-activity-badge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-text-faint); } .ss-activity-time { font-size: .78rem; color: var(--ss-text-faint); white-space: nowrap; } .ss-activity-summary { font-size: .96rem; line-height: 1.5; color: var(--ss-text); } .ss-activity-detail { margin-top: .35rem; font-size: .86rem; line-height: 1.45; color: var(--ss-text-muted); } .ss-activity-meta { margin-top: .45rem; font-size: .76rem; color: var(--ss-text-faint); } .ss-log-list { max-height: 28rem; overflow: auto; font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.45; } .ss-log-line { padding: .45rem 1rem; border-bottom: 1px solid var(--ss-border); word-break: break-word; } .ss-log-line:last-child { border-bottom: 0; } .ss-log-line code { color: inherit; background: none; padding: 0; white-space: pre-wrap; } .ss-log-line--error { background: rgba(255, 107, 107, .08); color: #ff8080; } .ss-log-line--warning { background: var(--ss-orange-soft); color: var(--ss-orange-text); } .ss-log-line--info { color: var(--ss-text-muted); } [data-theme="light"] .ss-log-line--error { color: #b02a37; } [data-theme="light"] .ss-log-line--warning { color: #b64f0c; } .ss-log-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-top: 1px solid var(--ss-border); } .ss-profile-dl dt { margin-bottom: .15rem; } .ss-profile-dl dd { margin-bottom: .85rem; } .ss-badge--muted { display: inline-flex; align-items: center; gap: .2rem; padding: .2rem .55rem; border-radius: 999px; background: var(--ss-surface-2); border: 1px solid var(--ss-border); font-size: .78rem; font-weight: 600; color: var(--ss-text-muted); } .alert { border: 1px solid var(--ss-border); border-radius: var(--ss-radius); background: var(--ss-surface); color: var(--ss-text); } .alert-success { border-color: rgba(52, 190, 120, .4); background: rgba(52, 190, 120, .1); color: #48c98a; } .alert-danger { border-color: rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .1); color: #ff8080; } .alert-warning { border-color: rgba(240, 116, 39, .45); background: var(--ss-orange-soft); color: var(--ss-orange-text); } .alert-info { border-color: var(--ss-border-strong); background: var(--ss-surface-2); color: var(--ss-text); } .alert-secondary { background: var(--ss-surface-2); color: var(--ss-text-muted); } [data-theme="light"] .alert-success { color: #14804a; } [data-theme="light"] .alert-danger { color: #b02a37; } .accordion { --bs-accordion-bg: transparent; } .accordion-item { background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius) !important; margin-bottom: .6rem; overflow: hidden; } .accordion-button { background: var(--ss-surface); color: var(--ss-text); font-weight: 600; font-size: .96rem; box-shadow: none; } .accordion-button:not(.collapsed) { background: var(--ss-orange-soft); color: var(--ss-orange-text); box-shadow: none; } .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(240, 116, 39, .2); } .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.6); } [data-theme="light"] .accordion-button::after { filter: none; } .accordion-body { color: var(--ss-text-muted); } .ss-footer { background: var(--ss-bg-alt); border-top: 1px solid var(--ss-border); padding-block: 3rem 2rem; margin-top: 4rem; } .ss-footer-heading { color: var(--ss-orange-text); font-family: var(--bs-body-font-family); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .85rem; } .ss-footer-text { color: var(--ss-text-muted); } .ss-footer-links li { margin-bottom: .5rem; font-size: .9rem; color: var(--ss-text-muted); } .ss-footer-links a { color: var(--ss-text-muted); text-decoration: none; } .ss-footer-links a:hover { color: var(--ss-orange-text); } .ss-footer-logo { height: 42px; width: auto; } /* Faktapunkter i sidfoten: ikon plus kort text, aldrig hela meningar. */ .ss-footer-facts li { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .5rem; font-size: .9rem; color: var(--ss-text-muted); } .ss-footer-facts i { flex: none; color: var(--ss-orange); font-size: .85rem; } .table-responsive { border-radius: var(--ss-radius-lg); } code { color: var(--ss-orange-text); } /* -------------------------------------------------------------------------- 17. Responsivt -------------------------------------------------------------------------- */ @media (max-width: 1199.98px) { .ss-table .ss-col-optional { display: none; } } @media (max-width: 991.98px) { .ss-sidebar { position: static; } .ss-inbox-row { grid-template-columns: 8px minmax(0, 1fr) auto 1.25rem; grid-template-areas: "dot main status chevron" "dot meta meta meta"; row-gap: .35rem; column-gap: .85rem; } .ss-inbox-dot { grid-area: dot; align-self: start; margin-top: .35rem; } .ss-inbox-main { grid-area: main; min-width: 0; } .ss-inbox-meta { grid-area: meta; min-width: 0; } .ss-inbox-status { grid-area: status; align-self: start; } .ss-inbox-chevron { grid-area: chevron; align-self: start; margin-top: .15rem; } .ss-inbox-preview { display: none; } .ss-inbox-detail { padding-left: 1.15rem; } .ss-inbox-detail-grid { grid-template-columns: 1fr; } .ss-inbox-detail-facts { grid-template-columns: 1fr 1fr; } .ss-theme-toggle { margin-top: .5rem; } } @media (max-width: 767.98px) { .ss-table th, .ss-table td { padding: .65rem .5rem; } .ss-row-actions { justify-content: flex-start; } .ss-row-actions form { width: 100%; } } @media (max-width: 575.98px) { .ss-steps-label { display: none; } .ss-steps { gap: .35rem; } .ss-step-actions { flex-direction: column-reverse; align-items: stretch; } .ss-step-actions .btn { width: 100%; } .ss-package { padding: 1.5rem 1.25rem; } .ss-package-tagline { min-height: 0; } .ss-request-card { padding: .85rem; gap: .8rem; } .ss-request-thumb { width: 46px; height: 46px; font-size: 1.15rem; } .ss-request-arrow { display: none; } .ss-preview-grid { grid-template-columns: 1fr; } .ss-dropzone-inner { padding: 1.9rem 1rem; } .ss-inbox-row { grid-template-columns: 8px minmax(0, 1fr) 1.25rem; grid-template-areas: "dot main chevron" "dot status chevron" "dot meta meta"; } .ss-inbox-status { flex-direction: row; align-items: center; justify-content: flex-start; gap: .5rem; text-align: left; } .ss-edit-actions { flex-direction: column; align-items: stretch; } .ss-edit-actions .btn { width: 100%; justify-content: center; } .ss-edit-actions .ms-auto { margin-left: 0 !important; } .ss-detail-actions .btn { width: 100%; } .ss-choice-grid ul, ul.ss-choice-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .ss-step:hover, .ss-request-card:hover, .ss-package:hover { transform: none; } } @media print { .ss-navbar, .ss-footer, .ss-answer-box, .btn { display: none !important; } body { background: #fff; color: #000; } } /* -------------------------------------------------------------------------- Följdfråga Kunden har oftast ingen fråga. En permanent textruta under analysen blir då bara brus, så den ligger bakom den här raden och öppnas i en dialog. -------------------------------------------------------------------------- */ .ss-followup { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--ss-border); border-radius: var(--ss-radius-lg); background: var(--ss-surface); } .ss-followup-title { font-weight: 600; } /* -------------------------------------------------------------------------- Kassan En smal kolumn med ett enda syfte. Tidigare låg sammanfattningen till vänster och knappen till höger, vilket tvingade blicken fram och tillbaka. -------------------------------------------------------------------------- */ .ss-checkout { max-width: 620px; margin-inline: auto; display: grid; gap: 1.25rem; } /* Betalningen sitter ihop med beställningen, avskild med en linje i stället för med ett eget kort. */ .ss-checkout-pay { padding: 1.25rem; border-top: 1px solid var(--ss-border); background: var(--ss-surface-2); border-radius: 0 0 var(--ss-radius-lg) var(--ss-radius-lg); } .ss-checkout-facts { display: grid; gap: .7rem; } .ss-checkout-facts > div { display: flex; align-items: baseline; gap: .6rem; font-size: .87rem; color: var(--ss-text-muted); line-height: 1.5; } .ss-checkout-facts i { flex: none; color: var(--ss-orange); font-size: .85rem; } /* Submit-rutan i sista steget av bokningen, samma tanke som kassan. */ .ss-submit-card { border-color: var(--ss-orange); } /* -------------------------------------------------------------------------- Ordmärke i text Visas när ingen loggafil är inlagd i static/img/. Ett satt ordmärke ser ut som ett val, en trasig bildikon ser ut som ett fel. -------------------------------------------------------------------------- */ .ss-wordmark { font-family: "Barlow Condensed", sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: var(--ss-text); line-height: 1; } .ss-wordmark::first-letter { color: var(--ss-orange); }