/* FixDesk — Careem-inspired design system Bright green + deep ink, big radii, pill buttons, generous air. */ :root { --green: #00E783; --green-soft: #7CF3BE; --green-dark: #00B865; --ink: #0B1F15; --ink-2: #3D5A4C; --mint: #E9FBF2; --mint-2: #F5FDF9; --paper: #FFFFFF; --bg: #FAFDFB; --line: #E2F0E8; --amber: #FFC93C; --red: #E5484D; --r-lg: 24px; --r-md: 16px; --shadow: 0 6px 24px rgba(11, 31, 21, 0.07); --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } [hidden] { display: none !important; } /* iOS Safari only honours horizontal clipping when it sits on too — without it, any 1px-too-wide element lets the page pan into blank space. */ html { scroll-behavior: smooth; overflow-x: hidden; } body { overflow-x: hidden; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .wrap-wide { max-width: 1400px; } .ic { width: 20px; height: 20px; flex: 0 0 auto; } .mut { color: var(--ink-2); } .small { font-size: 13px; } .prewrap { white-space: pre-wrap; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; border: 0; cursor: pointer; font: 600 15px/1 var(--font); padding: 12px 22px; border-radius: 999px; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: scale(.97); } .btn-primary { background: var(--green); color: var(--ink); box-shadow: 0 4px 14px rgba(0, 231, 131, .35); } .btn-primary:hover { background: var(--green-dark); color: #fff; } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: #1d3a2b; } .btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); } .btn-ghost:hover { background: var(--mint); } .btn-lg { padding: 16px 30px; font-size: 16px; } .btn-sm { padding: 8px 14px; font-size: 13px; } .btn-block { width: 100%; } .btn .ic { width: 17px; height: 17px; } /* ---------- Cards, badges ---------- */ .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow); } .card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .card-title { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 16px; } .card-title .ic { color: var(--green-dark); } .card-title .mut { font-size: 13px; font-weight: 400; } .badge { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--font); padding: 6px 12px; border-radius: 999px; background: var(--mint); color: var(--ink); } .badge .ic { width: 14px; height: 14px; } .badge.loc { background: #EEF4FF; color: #23408E; } .badge.loc-out { background: #FFF1E0; color: #9A4E12; } .badge.signed { background: var(--mint); color: #056B3F; } .badge.unsigned { background: #FDEEEE; color: #9E2B2F; } .st-received { background: var(--mint); color: #056B3F; } .st-diagnosing { background: #FFF6DE; color: #8A6410; } .st-awaiting_approval { background: #FFF0E4; color: #9A4E12; } .st-awaiting_customer { background: #FFEFF6; color: #A02D62; } .st-awaiting_parts { background: #F1EBFF; color: #5B3AA6; } .st-in_repair { background: #E4F1FF; color: #1D5CA8; } .st-ready { background: #00E783; color: #0B1F15; } .st-delivered { background: #EDF2EF; color: #3D5A4C; } .st-returned { background: #E9EDF5; color: #44507A; } .st-unrepairable { background: #FDEEEE; color: #9E2B2F; } .ok-box, .err-box { display: flex; align-items: center; gap: 10px; border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 18px; font-weight: 500; } .ok-box { background: var(--mint); color: #056B3F; } .err-box { background: #FDEEEE; color: #9E2B2F; } /* ---------- Forms ---------- */ label { display: block; font: 600 13.5px/1.3 var(--font); color: var(--ink); margin-bottom: 14px; } label input, label textarea, select, .flexline input { display: block; width: 100%; margin-top: 6px; font: 400 15px/1.4 var(--font); color: var(--ink); padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper); outline: none; transition: border .12s ease; } label input:focus, label textarea:focus, select:focus { border-color: var(--green); } select { width: auto; padding-right: 34px; } label select, .field select { width: 100%; } /* fill the column like inputs do */ .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field-label { display: block; font: 600 13.5px/1.3 var(--font); margin-bottom: 6px; } .form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 4px; } .seg { display: flex; gap: 8px; } .seg label { flex: 1; margin: 0; cursor: pointer; } .seg input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; padding: 0; border: 0; pointer-events: none; } .seg span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; border-radius: var(--r-md); border: 1.5px solid var(--line); font-weight: 600; font-size: 14px; transition: all .12s ease; } .seg input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); } .seg input:checked + span .ic { color: var(--green); } /* ---------- Public nav ---------- */ .pnav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .pnav-in { display: flex; align-items: center; gap: 28px; height: 68px; } .logo { display: inline-flex; align-items: center; gap: 10px; font: 800 20px/1 var(--font); letter-spacing: -0.02em; } .logo-mark { width: 34px; height: 34px; } .pnav-links { display: flex; gap: 22px; font-weight: 500; color: var(--ink-2); } .pnav-links a:hover { color: var(--ink); } .pnav-cta { margin-left: auto; display: flex; gap: 10px; } /* ---------- Hero ---------- */ .hero { background: linear-gradient(180deg, var(--mint-2), var(--bg)); overflow: hidden; } .hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding-top: 72px; padding-bottom: 80px; } .chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .chip { display: inline-flex; align-items: center; gap: 8px; background: var(--mint); color: #056B3F; font: 600 13px/1 var(--font); padding: 8px 14px; border-radius: 999px; margin-bottom: 22px; } .chip-row .chip { margin-bottom: 0; } .chip .ic { width: 15px; height: 15px; } .chip-se { background: #EAF3FB; color: #06407A; } .chip-se svg { flex: none; border-radius: 2px; } .hero h1 { font-size: clamp(38px, 5.4vw, 62px); font-weight: 800; margin-bottom: 18px; } .hero-copy p { font-size: 18px; color: var(--ink-2); max-width: 34em; margin-bottom: 28px; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; } .hero-ticks { list-style: none; display: flex; gap: 22px; flex-wrap: wrap; color: var(--ink-2); font-size: 14px; font-weight: 500; } .hero-ticks li { display: flex; align-items: center; gap: 7px; } .hero-ticks .ic { width: 15px; height: 15px; color: var(--green-dark); } .hero-art svg { width: 100%; height: auto; } /* ---------- Sections ---------- */ section h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; text-align: center; } .sect-sub { text-align: center; color: var(--ink-2); margin: 12px auto 0; max-width: 44em; font-size: 17px; } .feat { padding: 84px 0; } .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; } .feat-card .ic { width: 28px; height: 28px; color: var(--green-dark); margin-bottom: 14px; } .feat-card h3 { font-size: 17px; margin-bottom: 8px; } .feat-card p { color: var(--ink-2); font-size: 14.5px; } .how { padding: 40px 0 84px; } .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; } .how-step { text-align: center; padding: 10px 18px; } .how-n { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; background: var(--green); color: var(--ink); font: 800 20px/1 var(--font); border-radius: 50%; margin-bottom: 14px; } .how-step h3 { font-size: 17px; margin-bottom: 6px; } .how-step p { color: var(--ink-2); font-size: 14.5px; } /* ---------- Pricing ---------- */ .pricing { padding: 30px 0 90px; } .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; align-items: stretch; } .price-card { display: flex; flex-direction: column; gap: 6px; position: relative; padding: 30px 28px; } .price-hot { border: 2px solid var(--green); box-shadow: 0 14px 40px rgba(0, 231, 131, .22); } .price-flag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--green); font: 700 12px/1 var(--font); padding: 8px 16px; border-radius: 999px; } .price-card h3 { font-size: 18px; } .price-num { font: 800 30px/1.1 var(--font); letter-spacing: -0.02em; margin: 6px 0 2px; } .price-blurb { color: var(--ink-2); font-size: 14px; margin-bottom: 14px; } .price-list { list-style: none; display: grid; gap: 10px; margin-bottom: 22px; flex: 1; } .price-list li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; } .price-list .ic { width: 16px; height: 16px; color: var(--green-dark); } /* ---------- Contact ---------- */ .contact { padding: 0 0 90px; } .contact-in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .contact h2, .contact .sect-sub { text-align: left; } .contact-form { display: grid; gap: 4px; } /* ---------- Footer ---------- */ .pfoot { background: var(--ink); color: #CFE7DA; } .pfoot .logo { color: #fff; } .pfoot-in { display: flex; justify-content: space-between; gap: 40px; padding: 54px 24px 30px; flex-wrap: wrap; } .pfoot-tag { margin-top: 12px; font-size: 14px; color: #8FB8A3; } .pfoot-cols { display: flex; gap: 60px; } .pfoot-cols h4 { color: #fff; font-size: 14px; margin-bottom: 12px; } .pfoot-cols a { display: block; font-size: 14px; color: #8FB8A3; margin-bottom: 8px; } .pfoot-cols a:hover { color: var(--green); } .pfoot-base { padding: 18px 24px 26px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #6E9A85; } /* ---------- Auth pages ---------- */ .auth { padding: 60px 0 90px; background: linear-gradient(180deg, var(--mint-2), var(--bg)); min-height: 60vh; } .auth-in { display: flex; justify-content: center; } .auth-card { width: 100%; max-width: 480px; padding: 36px; } .auth-card h1 { font-size: 28px; margin-bottom: 6px; } .auth-sub { color: var(--ink-2); margin-bottom: 22px; } .auth-alt { margin-top: 18px; font-size: 14px; color: var(--ink-2); text-align: center; } .auth-alt a { color: var(--green-dark); font-weight: 600; } .plan-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; } .plan-opt { position: relative; margin: 0; cursor: pointer; } .plan-opt input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; padding: 0; border: 0; pointer-events: none; } .plan-opt span { display: block; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); font-weight: 400; font-size: 14px; } .plan-opt input:checked + span { border-color: var(--green); background: var(--mint); } /* ---------- Tracking ---------- */ .track-card { max-width: 520px; } .track-status { display: flex; gap: 10px; margin: 4px 0 22px; flex-wrap: wrap; } .timeline { list-style: none; display: grid; gap: 0; margin: 8px 0; } .timeline li { display: flex; gap: 14px; position: relative; padding-bottom: 18px; } .timeline li:last-child { padding-bottom: 0; } .timeline li:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: var(--line); } .tl-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--green); flex: 0 0 auto; margin-top: 3px; } .timeline strong { display: block; font-size: 14.5px; } .timeline small { color: var(--ink-2); font-size: 12.5px; } .track-note { margin-top: 20px; font-size: 14px; color: var(--ink-2); } /* ---------- App shell ---------- */ .shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; } .side { background: var(--paper); border-right: 1px solid var(--line); padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; /* the menu must never clip Kontrollpanel/Admin/footer on short windows */ } .side-nav { display: grid; gap: 2px; } .side-nav a { display: flex; align-items: center; gap: 11px; padding: 8px 14px; border-radius: var(--r-md); font-weight: 600; font-size: 14px; color: var(--ink-2); } .side-nav a { transition: background .12s ease, color .12s ease, transform .12s ease; } .side-nav a:hover { background: var(--mint); color: var(--ink); transform: translateX(2px); } .side-nav a:hover .ic { color: var(--green-dark); } .side-nav a.on { background: var(--mint); color: var(--ink); } .side-nav a.on .ic { color: var(--green-dark); } /* "Nytt ärende" is the start-here action — always green so it can't be missed */ .side-nav a.side-cta, .side-nav a.side-cta.on { background: var(--green); color: #0B1F15; font-weight: 700; } .side-nav a.side-cta:hover { background: var(--green-dark); color: #fff; } .side-nav a.side-cta .ic, .side-nav a.side-cta.on .ic { color: currentColor; } .side-foot { margin-top: auto; display: grid; gap: 12px; } .side-shop { font-size: 13px; } .side-shop strong { display: block; } .side-shop small { color: var(--ink-2); } .main { padding: 30px 34px 60px; max-width: 1280px; width: 100%; margin: 0 auto; overflow-x: clip; } .main-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; padding-right: 56px; /* clear the fixed notification bell */ } .main-head h1 { font-size: 26px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } .stat { display: grid; gap: 2px; padding: 20px 22px; background: linear-gradient(160deg, var(--mint-2) 0%, var(--paper) 55%); border-color: #D4EEDF; transition: transform .14s ease, box-shadow .14s ease; } .stat:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(11, 31, 21, .10); } .stat-n { font: 800 28px/1.1 var(--font); letter-spacing: -0.02em; } .stat-l { color: var(--ink-2); font-size: 13.5px; font-weight: 500; } .stat-link { transition: transform .1s ease; } .stat-link:hover { transform: translateY(-2px); } .stat-green { color: var(--green-dark); } .stat-amber { color: #B47708; } .stat-red { color: #C43C40; } /* Reports */ .bar-list { display: grid; gap: 10px; } .bar-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: center; font-size: 13.5px; } .bar-row .bar { height: 12px; border-radius: 999px; background: var(--mint); overflow: hidden; } .bar-row .bar span { display: block; height: 100%; background: var(--green); border-radius: 999px; } .bar-row strong { font-variant-numeric: tabular-nums; } .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; } .tbl th { text-align: left; font: 600 12.5px/1 var(--font); color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--line); } .tbl td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; } .tbl tr:last-child td { border-bottom: 0; } .tbl tbody tr { transition: background .1s ease; } .tbl tbody tr:hover td { background: var(--mint-2); } .tbl-sticky tbody tr:hover td:last-child { background: var(--mint-2); } .tlink { font-weight: 700; color: var(--green-dark); } .tlink:hover { text-decoration: underline; } .signed-dot .ic { width: 14px; height: 14px; color: var(--green-dark); vertical-align: -2px; } .empty { text-align: center; padding: 40px 20px; color: var(--ink-2); display: grid; gap: 14px; justify-items: center; } .filter-bar { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px; padding: 0 16px; } .search .ic { color: var(--ink-2); width: 17px; height: 17px; } .search input { border: 0; outline: none; flex: 1; padding: 12px 0; font: 400 15px var(--font); background: transparent; } .plan-note { margin-top: 18px; display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13.5px; } .plan-note .ic { width: 15px; height: 15px; color: var(--green-dark); } .plan-note a { color: var(--green-dark); font-weight: 600; } .plan-note-inline { color: var(--ink-2); font-size: 13.5px; align-self: center; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } .stack { display: grid; gap: 18px; } .stack .two-col, .stack .card { margin-bottom: 0; } .ticket-form { display: grid; gap: 18px; } .kv { display: grid; grid-template-columns: 110px 1fr; gap: 10px 12px; font-size: 14.5px; } .kv dt { color: var(--ink-2); font-weight: 500; } .loc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .status-form { display: flex; gap: 10px; margin-bottom: 18px; } .status-form select { flex: 1; } .note-form { display: flex; gap: 10px; margin-bottom: 16px; } .note-form input { flex: 1; margin: 0; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); font: 400 15px var(--font); outline: none; } .note-form input:focus { border-color: var(--green); } .note { padding: 12px 0; border-top: 1px solid var(--line); } .note.n-sms, .note.n-email, .note.n-warn { padding: 12px 14px; margin: 8px 0; border-top: 0; border-radius: var(--r-md); border: 1px solid transparent; } .note.n-sms { background: var(--mint); border-color: var(--green-soft); } .note.n-email { background: #EEF4FF; border-color: #CBDCF6; } .note.n-warn { background: #FFF6DE; border-color: #F2DFA8; } .note-tag { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px/1 var(--font); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; padding: 4px 9px; border-radius: 999px; } .note-tag .ic { width: 13px; height: 13px; } .note-tag.sms { background: var(--green); color: var(--ink); } .note-tag.email { background: #23408E; color: #fff; } .note p { font-size: 14.5px; } /* New-ticket wizard */ .wiz-steps { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .wiz-step { display: flex; align-items: center; gap: 8px; font: 600 13.5px/1 var(--font); color: var(--ink-2); padding: 9px 16px 9px 10px; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--line); opacity: .55; } .wiz-step.on { opacity: 1; border-color: var(--green); } .wiz-dot { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: var(--mint); color: var(--ink); font-weight: 800; font-size: 12px; } .wiz-step.on .wiz-dot { background: var(--green); } .type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; } .type-card { position: relative; margin: 0; cursor: pointer; } .type-card input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; padding: 0; border: 0; pointer-events: none; } .type-card span { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 12px; border: 1.5px solid var(--line); border-radius: var(--r-md); font-weight: 400; transition: all .12s ease; background: var(--paper); } .type-card .ic { width: 30px; height: 30px; color: var(--ink-2); } .type-card input:checked + span { border-color: var(--green); background: var(--mint); } .type-card input:checked + span .ic { color: var(--green-dark); } #brandPick { width: 100%; margin-top: 6px; } .chip-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .chip-item { display: inline-flex; align-items: center; gap: 8px; background: var(--mint); border-radius: 999px; padding: 7px 8px 7px 14px; font: 600 13.5px/1 var(--font); } .chip-item.locked { background: var(--mint-2); color: var(--ink-2); padding-right: 14px; } .chip-x { border: 0; background: none; cursor: pointer; color: var(--ink-2); font: 700 14px/1 var(--font); padding: 2px 6px; border-radius: 50%; } .chip-x:hover { background: #FDEEEE; color: #9E2B2F; } .inline-add { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .inline-add label { flex: 1; min-width: 140px; margin: 0; } /* Control panel tabs */ .tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; } .tab-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 600 14px/1 var(--font); color: var(--ink-2); padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper); transition: all .12s ease; } .tab-btn .ic { width: 16px; height: 16px; } .tab-btn:hover { background: var(--mint-2); } .tab-btn.on { background: var(--ink); color: #fff; border-color: var(--ink); } .tab-btn.on .ic { color: var(--green); } /* Wizard sizing: keep the flow readable, not full-bleed wide */ .ticket-form, .wiz-steps { max-width: 780px; } /* Device builder cards */ .dev-card { margin-bottom: 16px; } .dev-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; } .pill-row { display: flex; gap: 8px; flex-wrap: wrap; } .pill-opt { position: relative; margin: 0; cursor: pointer; } .pill-opt input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; padding: 0; border: 0; pointer-events: none; } .pill-opt span { display: inline-block; padding: 9px 15px; border: 1.5px solid var(--line); border-radius: 999px; font: 600 13.5px/1 var(--font); background: var(--paper); transition: all .1s ease; user-select: none; } .pill-opt input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); } .pill-opt.fault input:checked + span { background: var(--green); color: var(--ink); border-color: var(--green); } .age-line { font-weight: 600; white-space: nowrap; } /* Bare inputs outside