/* KörkortsUtbildning — designsystem enligt Transportteoris fasta färgstandard (Quiz-grafik 2026-04-07): lugn, mjuk NPF-design utan skarpa kontraster. Bakgrund #F4F6F7 · kort #FFFFFF (skugga 5%) · rubrik #1F2D3D · brödtext #333333 Primär #2E6F64 (hover #255B52) · accent #4A90E2 · sekundär #FFF3B0 · fel #D96C6C Input: bg #F8F9F9, border #D5D8DC, aktiv #4A90E2. Tillgänglighet (dyslexi/NPF) styrs via klasser/vars på , sparas i localStorage. */ /* Displayfont för landningssidan (som kundens sajt transportteori.se). */ @font-face { font-family: 'Anton'; src: url('/fonts/anton.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { --fs: 17px; /* justerbar textstorlek */ --tt-navy: #0E1725; /* kundens sajt: mörk marinblå */ --tt-navy-2: #16263B; --tt-gold: #E9B644; /* kundens logotypguld */ --lh: 1.55; /* justerbart radavstånd */ --bg: #F4F6F7; --card: #FFFFFF; --ink: #1F2D3D; /* rubriker */ --text: #333333; /* brödtext */ --muted: #6b7683; --line: #e3e7ea; --primary: #2E6F64; --primary-hover: #255B52; --accent: #4A90E2; --secondary: #FFF3B0; --err: #D96C6C; --ok: #2E6F64; --input-bg: #F8F9F9; --input-line: #D5D8DC; --shadow: 0 4px 14px rgba(0,0,0,.05); --radius: 16px; /* bakåtkompatibla alias (används i vyerna) */ --brand: #2E6F64; --brand-ink: #ffffff; --cta: #2E6F64; --cta-ink: #ffffff; --bad: #D96C6C; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; } body { background: var(--bg); color: var(--text); font-size: var(--fs); line-height: var(--lh); font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif; } /* Tillgänglighetsläge: Arial (dyslexivänligt). */ body.font-arial, body.font-arial h1, body.font-arial h2, body.font-arial h3, body.font-arial .btn { font-family: Arial, Helvetica, sans-serif; letter-spacing: .01em; } /* Hög kontrast. */ body.contrast { --bg: #000; --card: #0a0a0a; --ink: #fff; --text: #fff; --muted: #cbd5e1; --line: #444; --primary: #ffd400; --primary-hover: #e6c000; --brand-ink: #000; --cta-ink: #000; --accent: #ffd400; --input-bg: #111; --input-line: #666; --secondary: #333; --shadow: none; } h1, h2, h3 { line-height: 1.15; color: var(--ink); } h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; margin: .1em 0 .4em; } h2 { font-size: 1.35em; font-weight: 700; margin: 0 0 .5em; } h3 { font-size: 1.05em; font-weight: 700; margin: 0 0 .35em; } a { color: var(--accent); } .muted { color: var(--muted); } .center { text-align: center; } .mt { margin-top: 14px; } .mt2 { margin-top: 30px; } /* ── Topbar ─────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; gap: 14px; padding: 13px 22px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .brand { font-weight: 700; font-size: 1.14em; color: var(--primary); text-decoration: none; cursor: pointer; letter-spacing: -0.01em; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .whoami { color: var(--muted); font-size: .88em; cursor: pointer; } /* Läsinställningar (dyslexi/NPF). */ .a11y-wrap { position: relative; } .a11y-btn { min-width: 40px; height: 38px; border: 1px solid var(--input-line); background: var(--card); color: var(--ink); border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 700; font-family: inherit; } .a11y-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); } .a11y-btn:focus-visible, .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .a11y-menu { position: absolute; right: 0; top: 46px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: 0 18px 40px -18px rgba(31,45,61,.3); min-width: 250px; z-index: 60; display: grid; gap: 10px; } .a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .a11y-row .lbl { font-size: .92em; } .a11y-row .ctrls { display: flex; gap: 6px; } /* ── Knappar ────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; border: 1px solid var(--primary); background: var(--primary); color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 1em; font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit; transition: background .12s, border-color .12s; } .btn:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); } .btn:disabled { opacity: .5; cursor: default; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--input-line); } .btn-ghost:hover:not(:disabled) { background: var(--input-bg); border-color: var(--input-line); } .btn-cta { background: var(--primary); border-color: var(--primary); color: #fff; } .btn-outline { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; } .btn-outline:hover:not(:disabled) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.55); } .btn-block { width: 100%; } .btn-lg { padding: 15px 28px; font-size: 1.05em; } .btn-sm { padding: 8px 16px; font-size: .9em; } .btn-danger { background: var(--err); border-color: var(--err); color: #fff; } .btn-danger:hover:not(:disabled) { background: #c65b5b; border-color: #c65b5b; } /* ── Ytor & layout ──────────────────────────────────────── */ .view { max-width: 1060px; margin: 26px auto; padding: 0 18px 60px; } .foot { text-align: center; padding: 26px 16px 34px; color: var(--muted); font-size: .9em; } .foot a { color: var(--muted); } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; box-shadow: var(--shadow); } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .grid { display: grid; gap: 14px; } input, select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--input-line); border-radius: 12px; font-size: 1em; background: var(--input-bg); color: var(--text); font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--card); } textarea { resize: vertical; } label { display: block; font-weight: 600; margin: 10px 0 4px; color: var(--ink); font-size: .92em; } .field { margin-bottom: 8px; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); } th { color: var(--muted); font-size: .78em; text-transform: uppercase; letter-spacing: .05em; } .pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .8em; font-weight: 700; } .pill.ok { background: rgba(46,111,100,.12); color: var(--primary); } .pill.warn { background: rgba(217,108,108,.12); color: var(--err); } .pill.mute { background: var(--input-bg); color: var(--muted); border: 1px solid var(--line); } .stat { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .stat .box { flex: 1; min-width: 140px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); } .stat .n { font-size: 1.8em; font-weight: 700; color: var(--ink); } .notice { padding: 12px 15px; border-radius: 12px; margin-bottom: 14px; } .notice.info { background: #eaf2fc; color: #1f4c7d; } .notice.warn { background: rgba(217,108,108,.1); color: #a34040; } .notice.gul { background: var(--secondary); color: #6b5c00; } .badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .78em; background: rgba(46,111,100,.1); color: var(--primary); } .kicker { display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-size: .72em; font-weight: 700; color: var(--accent); margin-bottom: 10px; } /* ── Publik framsida ────────────────────────────────────── */ .hero { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 46px 40px; margin-bottom: 20px; box-shadow: var(--shadow); color: var(--text); } .hero h1 { color: var(--ink); } .hero .lead { font-size: 1.1em; color: var(--muted); max-width: 50ch; margin: 0 0 22px; } .hero .hl { color: var(--primary); } .hero-land { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; } @media (max-width: 880px) { .hero-land { grid-template-columns: 1fr; } .hero { padding: 32px 24px; } } .hero-cta { margin-bottom: 20px; } .hero-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: .92em; } .hero-stats strong { color: var(--ink); } .demo-card { background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 18px; padding: 18px 18px 14px; box-shadow: 0 18px 48px -22px rgba(31,45,61,.28); } .demo-card .demo-head { text-transform: uppercase; letter-spacing: .14em; font-size: .7em; font-weight: 700; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .demo-card .demo-head::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); } .demo-card .demo-q { font-weight: 600; margin: 8px 0 10px; color: var(--ink); } .demo-card .opt { padding: 10px 12px; margin: 6px 0; font-size: .95em; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0; } @media (max-width: 760px) { .steps { grid-template-columns: 1fr; } } .step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .step .num { font-size: 1.4em; font-weight: 700; color: var(--primary); display: inline-block; border-bottom: 3px solid var(--secondary); line-height: 1.2; margin-bottom: 10px; } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; } @media (max-width: 760px) { .features { grid-template-columns: 1fr; } } .feat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .feat .fic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(46,111,100,.08); margin-bottom: 12px; } .feat .fic svg { width: 24px; height: 24px; stroke: var(--primary); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .feat p { margin: 0; color: var(--muted); } .band-dark { background: linear-gradient(135deg, #2E6F64, #235349); color: #fff; border-radius: 20px; padding: 34px 32px; margin-bottom: 18px; } .band-dark .muted { color: rgba(255,255,255,.7); } .band-dark h2, .band-dark h1 { color: #fff; } .band-dark .kicker { color: #cfe6df; } .price-chip { display: inline-flex; align-items: baseline; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); border-radius: 12px; padding: 10px 16px; margin: 8px 0 16px; } .price-chip .pr { font-size: 1.6em; font-weight: 700; color: #fff; } .band-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; } .band-list li { padding-left: 26px; position: relative; color: rgba(255,255,255,.9); } .band-list li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; color: #bfe3d9; } .band-dark .btn { background: #fff; border-color: #fff; color: var(--primary); } .band-dark .btn:hover:not(:disabled) { background: #edf5f2; border-color: #edf5f2; } .cta-band { text-align: center; } /* ── Inloggning (mockup: centrerad box, mjuk bakgrund) ──── */ .loginwrap { max-width: 430px; margin: 30px auto; } .loginwrap .logintitle { text-align: center; margin-bottom: 20px; } .loginwrap .logintitle h1 { color: var(--primary); margin-bottom: 2px; font-size: 1.7em; } .loginwrap .logintitle p { margin: 0; color: var(--muted); } .logincard { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: 0 18px 48px -26px rgba(31,45,61,.3); margin-bottom: 14px; } .loginhelp { text-align: center; background: var(--secondary); border-radius: 12px; padding: 10px 14px; font-size: .9em; color: #6b5c00; } .loginalts { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: .92em; } .loginalts a { text-decoration: none; } .loginalts .kop { border: 1px solid var(--input-line); border-radius: 999px; padding: 7px 16px; color: var(--ink); } details.loginmore { margin-top: 12px; } details.loginmore summary { cursor: pointer; color: var(--muted); font-size: .92em; font-weight: 600; } details.loginmore .inner { padding-top: 10px; } /* ── Quiz-frågor (gammal flervalslista + demo) ──────────── */ .opt { display: flex; align-items: center; gap: 12px; padding: 14px; margin: 8px 0; border: 1.5px solid var(--input-line); border-radius: 14px; cursor: pointer; background: var(--card); } .opt.sel { border-color: var(--accent); background: #f3f8fe; } .opt.correct { border-color: var(--primary); background: rgba(46,111,100,.08); } .opt.wrong { border-color: var(--err); background: rgba(217,108,108,.1); } .scenewrap { margin: 6px 0 14px; } .scene { display: block; width: 100%; max-width: 340px; height: auto; border: 1px solid var(--line); border-radius: 12px; background: #eef1f4; } .demo-card .scene { max-width: 100%; } /* ── Elev: gemensamt skal (flikmeny på alla elevsidor) ──── */ .elevnav { display: flex; gap: 4px; margin: 2px 0 22px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px; width: fit-content; max-width: 100%; overflow-x: auto; } .etab { padding: 8px 18px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .95em; border-radius: 999px; white-space: nowrap; transition: color .12s, background .12s; } .etab:hover { color: var(--ink); } .etab.on { color: var(--primary); background: rgba(46,111,100,.1); } /* ── Elev: översikt per mockup ──────────────────────────── */ .ehello h1 { margin-bottom: 2px; } .ehello p { margin: 0 0 20px; color: var(--muted); max-width: 60ch; } .bigcards { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-bottom: 26px; } @media (max-width: 760px) { .bigcards { grid-template-columns: 1fr; } } .bigcard { border-radius: 20px; padding: 26px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; min-height: 170px; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s; border: 1px solid var(--line); background: var(--card); color: var(--text); position: relative; } .bigcard:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(31,45,61,.35); } .bigcard h3 { font-size: 1.25em; margin: 0; } .bigcard p { margin: 0; font-size: .95em; color: var(--muted); } .bigcard .go { margin-top: auto; font-weight: 700; font-size: .92em; color: var(--primary); } .bigcard.dark { background: linear-gradient(135deg, #33607c, #274a60); border-color: transparent; color: #fff; } .bigcard.dark h3 { color: #fff; } .bigcard.dark p { color: rgba(255,255,255,.75); } .bigcard.dark .go { color: #fff; } .bigcard .bic { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.18); margin-bottom: 4px; } .bigcard:not(.dark) .bic { background: rgba(46,111,100,.1); } .bigcard .bic svg { width: 20px; height: 20px; fill: currentColor; } .bigcard:not(.dark) .bic svg { fill: var(--primary); } .tworow { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; } @media (max-width: 860px) { .tworow { grid-template-columns: 1fr; } } .sechead-h { margin: 0 0 14px; font-size: 1.15em; } .meter { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); } .meter .mtop { display: flex; justify-content: space-between; align-items: baseline; } .meter .mlbl { font-size: .78em; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; } .meter .mval { font-size: 1.5em; font-weight: 700; color: var(--ink); } .statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 520px) { .statgrid { grid-template-columns: 1fr; } } .recobox { background: #e7f1ee; border: 1px solid #cfe3dd; border-radius: 18px; padding: 20px; box-shadow: var(--shadow); } .recobox .ric { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .recobox .ric svg { width: 20px; height: 20px; fill: #fff; } .recobox h3 { margin: 0 0 6px; } .recobox p { margin: 0 0 14px; font-size: .92em; color: #43635b; } .weakband { display: flex; align-items: center; gap: 14px; background: #fdf1e4; border: 1px solid #f3ddc2; border-radius: 14px; padding: 14px 18px; margin-top: 16px; text-decoration: none; color: var(--text); } .weakband .wic { color: #b96b1f; font-weight: 700; font-size: 1.2em; flex: none; } .weakband strong { color: var(--ink); } .weakband .muted { font-size: .88em; } .weakband .go { margin-left: auto; font-weight: 700; color: #b96b1f; } /* ── Elev: områdes-/kapitelval ──────────────────────────── */ .roundpick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pillbtn { padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--input-line); background: var(--card); font-weight: 700; cursor: pointer; font-family: inherit; font-size: .92em; color: var(--text); transition: border-color .12s, background .12s; } .pillbtn:hover { border-color: var(--accent); } .pillbtn.on { background: var(--primary); border-color: var(--primary); color: #fff; } .areagrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .areacard { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s; cursor: pointer; font-family: inherit; text-align: left; font-size: 1em; } .areacard:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(31,45,61,.3); } .areacard .anum { width: 44px; height: 44px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1em; background: rgba(46,111,100,.1); color: var(--primary); } .areacard .amain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .areacard h3 { margin: 0; font-size: 1.02em; } .areacard .ameta { font-size: .82em; color: var(--muted); } .chapgrid2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } @media (max-width: 420px) { .chapgrid2 { grid-template-columns: 1fr; } } .kort2 { display: flex; gap: 14px; align-items: flex-start; position: relative; text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 18px 46px; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s; } .kort2:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(31,45,61,.3); } .kort-num { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05em; flex: none; background: rgba(46,111,100,.1); color: var(--primary); } .kort-num.sm { width: 36px; height: 36px; border-radius: 10px; font-size: .95em; } .kort2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .kort2-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .kort2-head h3 { margin: 0; font-size: 1.02em; line-height: 1.3; } .kort-new { font-size: .72em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--secondary); color: #6b5c00; padding: 3px 9px; border-radius: 999px; } .kort-done { font-size: .78em; font-weight: 700; color: var(--primary); } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { font-size: .74em; font-weight: 600; color: var(--muted); background: var(--input-bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; } .chip.warn { color: #a34040; background: rgba(217,108,108,.1); border-color: rgba(217,108,108,.25); } .kort2-prog { display: flex; flex-direction: column; gap: 5px; } .kort2-prog .muted { font-size: .8em; } .kort2-go { position: absolute; right: 18px; bottom: 14px; font-weight: 700; font-size: .88em; color: var(--primary); } .bar { height: 8px; border-radius: 999px; background: #e8ecef; overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; } .bar.sm { height: 6px; } /* ── Rekommendationsrader ───────────────────────────────── */ .recorow { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .recocard { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 14px; padding: 13px 15px; box-shadow: var(--shadow); transition: transform .12s; } .recocard:hover { transform: translateY(-2px); } .recocard div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .recocard strong { font-size: .95em; line-height: 1.25; color: var(--ink); } .recocard .muted { font-size: .8em; } .reco-go { margin-left: auto; font-weight: 700; color: var(--primary); font-size: 1.05em; } /* ── Statistik ──────────────────────────────────────────── */ .tscroll { overflow-x: auto; } .stattbl { width: 100%; border-collapse: collapse; } .stattbl th { text-align: left; font-size: .76em; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 10px; border-bottom: 1.5px solid var(--line); } .stattbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } .stattbl tr:last-child td { border-bottom: none; } .ringwrap { position: relative; width: 92px; height: 92px; flex: none; } .ringwrap.big { width: 140px; height: 140px; margin: 0 auto 14px; } .ring { width: 100%; height: 100%; display: block; } .ringlbl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; } .ringlbl strong { font-size: 1.15em; color: var(--ink); } .ringwrap.big .ringlbl strong { font-size: 1.7em; } .ringlbl span { font-size: .68em; color: var(--muted); } /* ── Frågespelare (mockup: lugnt kort, lättläst, bild, förklaring) ── */ .player { max-width: 680px; margin: 0 auto; } .player-top { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; } .player-exit { flex: none; padding: 7px 14px; border-radius: 999px; display: flex; align-items: center; text-decoration: none; color: var(--muted); border: 1.5px solid var(--input-line); font-size: .85em; font-weight: 700; background: var(--card); white-space: nowrap; cursor: pointer; font-family: inherit; } .player-exit:hover { color: var(--ink); border-color: var(--muted); } .ptrack { flex: 1; height: 8px; border-radius: 999px; background: #e8ecef; overflow: hidden; } .ptrack > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width .25s; } .pcount { flex: none; font-weight: 700; font-size: .88em; color: var(--muted); } .ptimer { flex: none; font-weight: 700; font-size: .9em; color: var(--primary); background: rgba(46,111,100,.1); border-radius: 999px; padding: 5px 13px; } .ptimer.low { color: var(--err); background: rgba(217,108,108,.12); } .pcard { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: var(--shadow); } .pchap { display: block; font-size: .74em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; } .plabel { display: inline-block; font-size: .68em; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); background: #eaf2fc; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; } .pq { margin: 0 0 12px; font-size: 1.28em; line-height: 1.35; color: var(--ink); } .psimple { display: flex; gap: 10px; align-items: flex-start; background: #eaf2fc; border-radius: 12px; padding: 11px 14px; margin-bottom: 14px; font-size: .95em; color: #1f4c7d; } .psimple .pin { flex: none; font-weight: 700; } .psimple .slbl { display: block; font-size: .68em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .7; } .pimg { margin: 4px 0 14px; } .pimg img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); cursor: zoom-in; } .pimg .zoomhint { font-size: .78em; color: var(--muted); margin-top: 4px; } .imgmodal { position: fixed; inset: 0; background: rgba(31,45,61,.75); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; cursor: zoom-out; } .imgmodal img { max-width: 100%; max-height: 92vh; border-radius: 12px; } .popts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } @media (max-width: 560px) { .popts { grid-template-columns: 1fr; } } .popt { text-align: left; padding: 14px 16px; border: 1.5px solid var(--input-line); border-radius: 999px; background: var(--card); cursor: pointer; font-family: inherit; font-size: .98em; color: var(--text); transition: border-color .12s, background .12s; } .popt:not(:disabled):hover { border-color: var(--accent); background: #f6fafd; } .popt:disabled { cursor: default; } .popt.sel { border-color: var(--accent); background: #eaf2fc; font-weight: 600; } .popt.pending { border-color: var(--accent); } .popt.correct { border-color: var(--primary); background: rgba(46,111,100,.1); font-weight: 700; } .popt.wrong { border-color: var(--err); background: rgba(217,108,108,.1); } .popt.dim { opacity: .5; } .pfeedback { margin-top: 16px; padding: 14px 16px; border-radius: 14px; font-size: .95em; } .pfeedback.ok { background: rgba(46,111,100,.08); border: 1px solid rgba(46,111,100,.25); } .pfeedback.fel { background: rgba(217,108,108,.08); border: 1px solid rgba(217,108,108,.25); } .pfeedback .fhead { font-weight: 700; color: var(--ink); } .pfeedback p { margin: 6px 0 0; } .pnav { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; } .presult { text-align: center; padding: 40px 28px; } .presult h2 { margin: 6px 0 4px; } .presult-prog { max-width: 380px; margin: 6px auto 16px; display: flex; flex-direction: column; gap: 6px; } .presult-prog .muted { font-size: .85em; } .presult-reco { margin-top: 18px; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: .92em; } .presult-reco a { color: var(--primary); font-weight: 700; text-decoration: none; } .presult-reco a:hover { text-decoration: underline; } .pround { text-align: center; font-size: .85em; margin-top: 12px; } /* ── Admin (flikar + mörk sidopanel-känsla per mockup) ──── */ .admnav { display: flex; gap: 4px; margin: 2px 0 20px; background: #1F2D3D; border-radius: 14px; padding: 6px; width: fit-content; max-width: 100%; overflow-x: auto; } .admtab { padding: 9px 18px; text-decoration: none; color: rgba(255,255,255,.65); font-weight: 600; font-size: .93em; border-radius: 10px; white-space: nowrap; cursor: pointer; font-family: inherit; background: none; border: none; } .admtab:hover { color: #fff; } .admtab.on { color: #fff; background: rgba(255,255,255,.14); } body.contrast .admnav { border: 1px solid var(--line); } .tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .tab { padding: 10px 16px; border: 1px solid var(--input-line); border-radius: 999px; background: var(--card); cursor: pointer; font-weight: 600; font-family: inherit; color: var(--text); } .tab.active { background: var(--primary); color: #fff; border-color: var(--primary); } .imp-log { max-height: 220px; overflow: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8em; } .imp-log .err { color: var(--err); } /* Uppmärksamhetskort (org-portalen per mockup) */ .alertrow { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .alertcard { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--err); border-radius: 14px; padding: 13px 15px; box-shadow: var(--shadow); } .alertcard .amsg { flex: 1; min-width: 0; } .alertcard .amsg strong { display: block; color: var(--ink); font-size: .95em; } .alertcard .amsg span { font-size: .8em; color: var(--err); } /* ── Landningssida i Transportteoris formspråk (transportteori.se) ── */ .tth { position: relative; overflow: hidden; color: #fff; background: linear-gradient(180deg, var(--tt-navy), var(--tt-navy-2)); border-radius: 22px; padding: 64px 48px 240px; margin-bottom: 16px; } @media (max-width: 720px) { .tth { padding: 40px 24px 200px; } } /* Hero med flygfoto-scen (fält + motorväg + lastbil) som kundens sajt. */ .tth.foto { padding: 0; min-height: 540px; display: flex; } .tt-scene { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .tt-heroinner { position: relative; z-index: 2; padding: 64px 48px 56px; align-self: stretch; width: 100%; } @media (max-width: 720px) { .tt-heroinner { padding: 40px 24px 40px; } .tth.foto { min-height: 480px; } } /* Motto-sektion (vit): kicker + jätterubrik + vit lastbil med guldlogga. */ .tt-motto { padding: 44px 20px 28px; text-align: center; } .tt-motto-kicker { color: var(--muted); margin: 0 0 10px; } .tt-motto-line { font-family: 'Anton', 'Arial Narrow', sans-serif; font-weight: 400; font-size: clamp(1.9rem, 5vw, 3.1rem); color: var(--ink); letter-spacing: .01em; margin: 0 0 18px; } .tt-motto-text { max-width: 62ch; margin: 0 auto 14px; color: var(--text); } .tt-truck { display: block; max-width: 560px; width: 100%; margin: 26px auto 0; } /* "Våra paket" — kundens kurs-grid: vänsterkolumn + tunna avdelare per post. */ .tt-kurser { display: grid; grid-template-columns: 280px 1fr; gap: 40px; } @media (max-width: 860px) { .tt-kurser { grid-template-columns: 1fr; gap: 24px; } } .tk-left h2 { margin-top: 0; } .tk-left p { color: rgba(255,255,255,.72); margin: 0 0 20px; } .tk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; } @media (max-width: 640px) { .tk-grid { grid-template-columns: 1fr; } } .tk-item { display: block; border-top: 1px solid rgba(255,255,255,.28); padding-top: 14px; text-decoration: none; color: #fff; } .tk-item h3 { font-size: 1.15em; margin: 0 0 6px; color: #fff; } .tk-item p { margin: 0 0 8px; color: rgba(255,255,255,.68); font-size: .92em; } .tk-item .tk-go { color: var(--tt-gold); font-weight: 600; font-size: .9em; opacity: 0; transition: opacity .12s; } .tk-item:hover .tk-go { opacity: 1; } .tk-item:hover h3 { color: var(--tt-gold); } /* Kontaktsektion (mörk): vitt formulärkort + info med understrukna rubriker. */ .tt-kontakt { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 44px; align-items: start; } @media (max-width: 860px) { .tt-kontakt { grid-template-columns: 1fr; gap: 26px; } } .ttk-card { background: var(--card); color: var(--text); border-radius: 16px; padding: 22px 20px; } .ttk-card h3 { color: var(--ink); margin: 0 0 12px; } .ttk-info h2 { margin-top: 0; } .ttk-info h4 { color: #fff; font-size: 1.02em; margin: 22px 0 8px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.35); max-width: 420px; } .ttk-info p { color: rgba(255,255,255,.72); margin: 0; max-width: 52ch; } .ttk-info a { color: var(--tt-gold); } .tt-kicker { display: inline-block; text-transform: uppercase; letter-spacing: .22em; font-size: .72em; font-weight: 600; color: var(--tt-gold); margin-bottom: 18px; } .tt-display { font-family: 'Anton', 'Arial Narrow', sans-serif; font-weight: 400; font-size: clamp(2.6rem, 7.5vw, 5.2rem); line-height: 1.04; letter-spacing: .01em; text-transform: none; color: #fff; margin: 0 0 22px; } .tt-display .ind { display: inline-block; margin-left: clamp(30px, 14vw, 220px); } .tt-lead { max-width: 56ch; color: rgba(255,255,255,.82); font-size: 1.06em; margin: 0 0 26px; } .tt-ctarow { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 2; } .tt-btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border: 1px solid rgba(255,255,255,.45); color: #fff; background: transparent; padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 1em; transition: background .12s, color .12s, border-color .12s; cursor: pointer; font-family: inherit; } .tt-btn:hover { background: rgba(255,255,255,.1); } .tt-btn.gold { background: var(--tt-gold); border-color: var(--tt-gold); color: #1a1400; } .tt-btn.gold:hover { background: #f0c25c; border-color: #f0c25c; } .tt-btn .arr { font-size: 1.1em; } .tt-road { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 220px; pointer-events: none; } .tt-dark { background: var(--tt-navy); color: #fff; border-radius: 22px; padding: 44px 48px; margin-bottom: 16px; } @media (max-width: 720px) { .tt-dark { padding: 32px 24px; } } .tt-dark h2, .tt-dark h3 { color: #fff; } .tt-h2 { font-family: 'Anton', 'Arial Narrow', sans-serif; font-weight: 400; font-size: 2em; letter-spacing: .01em; margin: 14px 0 24px; } .tt-rule { height: 1px; background: rgba(255,255,255,.25); margin-bottom: 8px; } .tt-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; } @media (max-width: 820px) { .tt-cols { grid-template-columns: 1fr; gap: 22px; } } .tt-col { border-top: 1px solid rgba(255,255,255,.25); padding-top: 16px; } .tt-col h3 { font-size: 1.25em; margin-bottom: 8px; } .tt-col p { margin: 0; color: rgba(255,255,255,.72); font-size: .96em; } .tt-demo { padding: 26px 0 10px; } .tt-demo-inner { max-width: 560px; margin: 0 auto; text-align: center; } .tt-demo-inner h2 { margin-bottom: 16px; } .tt-demo-inner .demo-card { text-align: left; } /* ── Prissida (direktförsäljning) ───────────────────────── */ .plangrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 8px; } .plancard { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 18px; text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; } .plancard.pop { border: 2px solid var(--primary); } .poptag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; font-size: .72em; font-weight: 700; padding: 3px 12px; border-radius: 999px; white-space: nowrap; } .plancard h3 { margin: 4px 0 0; } .planpris { font-size: 1.7em; font-weight: 700; color: var(--ink); } .plancard p { flex: 1; font-size: .85em; margin: 0; } /* ── Övningsprov: inställningsrad (omgång/behörighet/språk) ── */ .prefrow { display: flex; gap: 10px 26px; flex-wrap: wrap; margin-bottom: 16px; } .prefgrp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .prefgrp > .muted { font-size: .85em; } /* ── Uppläsning (TTS) ───────────────────────────────────── */ .pchaprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .pchaprow .pchap { margin-bottom: 0; } .ttsbtn { border: 1.5px solid var(--input-line); background: var(--card); color: var(--text); border-radius: 999px; padding: 6px 14px; font-size: .84em; font-weight: 600; cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s; } .ttsbtn:hover { border-color: var(--accent); } .ttsbtn.on { background: var(--accent); border-color: var(--accent); color: #fff; } /* ── Läsinställningar: tydlig knapp + reglage ───────────── */ .a11y-trigger { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--primary); background: var(--card); color: var(--primary); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: .9em; cursor: pointer; font-family: inherit; } .a11y-trigger .aa { font-size: 1.15em; } .a11y-trigger:hover { background: rgba(46,111,100,.08); } .a11y-scale { display: flex; justify-content: space-between; align-items: baseline; color: var(--muted); padding: 0 2px; } #a11y-size { -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px; background: #dfe5e9; padding: 0; border: none; } #a11y-size::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; } #a11y-size::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; } /* ── Källmärkning av frågebankerna (Transportteori vs plattformens egen) ── */ .srcbadge { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 4px 12px; border-radius: 999px; font-size: .5em; font-weight: 600; letter-spacing: .03em; background: #eaf2fc; color: #1f4c7d; white-space: nowrap; } .srcbadge.egen { background: var(--secondary); color: #6b5c00; } .srcbadge.sm { font-size: .78em; margin-left: 0; padding: 3px 10px; font-weight: 500; } /* ── Behörigheter: ett paket per behörighet ─────────────── */ .katgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .katcard { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 14px; text-align: center; box-shadow: var(--shadow); text-decoration: none; color: var(--text); transition: border-color .12s, transform .12s; } .katcard:hover { border-color: var(--primary); transform: translateY(-2px); } .katcard.own { border-color: var(--primary); } .katkod { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 1.9em; color: var(--ink); letter-spacing: .02em; line-height: 1.1; } .katnamn { font-size: .9em; color: var(--muted); } .katgo { font-size: .85em; font-weight: 700; color: var(--primary); margin-top: 4px; } /* Låst behörighet i elevens väljare (kräver eget köp) */ .pillbtn.lock { opacity: .62; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .pillbtn.lock:hover { opacity: 1; border-color: var(--primary); } .pillbtn.lock .lockic { font-size: .85em; } /* Elevens behörighetsmärke på översikten */ .behline { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; } .behtag { display: inline-block; padding: 4px 14px; border-radius: 999px; background: rgba(46,111,100,.12); color: var(--primary); font-size: .78em; font-weight: 600; } /* Behörighetssektion på framsidan */ .tt-beh { padding: 30px 0 22px; } .tt-beh .tt-h2 { text-align: center; margin: 0 0 10px; } .tt-beh-lead { max-width: 560px; margin: 0 auto 22px; text-align: center; color: var(--muted); } /* ── Granskningsmiljön (B): märke i topbaren ─────────────── */ .envtag { background: var(--secondary); color: #6b5c00; font-size: .68em; font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-left: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } /* ── Sandlådan (granska/redigera/aktivera importerade frågor) ── */ .pill.sand { background: var(--secondary); color: #6b5c00; } .sb-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--input-bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 14px 0; } .sb-sep { width: 1px; align-self: stretch; background: var(--line); } .sb-cats { display: inline-flex; gap: 8px; flex-wrap: wrap; } .sb-cats label { display: inline-flex; align-items: center; gap: 4px; font-size: .85em; font-weight: 600; } .sandtbl .sb-q { max-width: 420px; } .sandtbl input[type="checkbox"] { width: auto; } /* Modal för förhandsgranskning/redigering */ .qmodal { position: fixed; inset: 0; z-index: 200; background: rgba(14,23,37,.55); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 4vh 14px; } .qmodal-card { background: var(--bg); border-radius: 18px; padding: 20px 22px; width: 100%; max-width: 680px; box-shadow: 0 18px 60px rgba(0,0,0,.35); } .qmodal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .qmodal .pcard { box-shadow: none; border: 1px solid var(--line); } .qe-optrow input[type="radio"] { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; } .sandtbl .pill { font-size: .7em; padding: 2px 8px; }