/* Tokens: se docs/DESIGN.md. Hitta inte på nya färger här. */ @font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --bg: #F4F1EA; /* bone */ --surface: #FFFFFF; --surface-2: #EFE9DC; /* cream */ --label: #0E0E0C; /* ink */ --label-2: rgba(14, 14, 12, .62); --label-3: rgba(14, 14, 12, .35); --separator: rgba(14, 14, 12, .12); --tint: #3648C3; /* indigo: text, ikoner, länkar */ --tint-fill: #3648C3; /* indigo: fyllda knappar */ --on-tint: #FFFFFF; --sun: #FFDD6C; /* det enda stora elementet */ --on-sun: #0E0E0C; --danger: #D93A2B; --on-danger: #FFFFFF; --warn: #E9B949; /* amber */ --on-warn: #0E0E0C; --radius: 20px; --radius-row: 14px; --gutter: 16px; --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; --display: "Fraunces", ui-serif, "New York", Georgia, serif; --shadow: 0 12px 40px rgba(14, 14, 12, .18); color-scheme: light dark; } /* Mörkt läge följer systemet, om inte studenten valt själv (data-theme på , se app.js). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0E0E0C; --surface: #1A1A17; /* graphite */ --surface-2: #2A2A26; --label: #F4F1EA; --label-2: rgba(244, 241, 234, .65); --label-3: rgba(244, 241, 234, .35); --separator: rgba(244, 241, 234, .12); --tint: #9AA5FF; --tint-fill: #3648C3; --on-tint: #FFFFFF; --danger: #FF6B5E; --on-danger: #0E0E0C; --shadow: 0 12px 40px rgba(0, 0, 0, .55); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0E0E0C; --surface: #1A1A17; /* graphite */ --surface-2: #2A2A26; --label: #F4F1EA; --label-2: rgba(244, 241, 234, .65); --label-3: rgba(244, 241, 234, .35); --separator: rgba(244, 241, 234, .12); --tint: #9AA5FF; --tint-fill: #3648C3; --on-tint: #FFFFFF; --danger: #FF6B5E; --on-danger: #0E0E0C; --shadow: 0 12px 40px rgba(0, 0, 0, .55); color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* Ökad kontrast (HIG Accessibility): sekundärtext mot primär, tint mot djupare blå. */ @media (prefers-contrast: more) { :root { --label-2: rgba(14, 14, 12, .85); --label-3: rgba(14, 14, 12, .6); --separator: rgba(14, 14, 12, .4); --tint: #2A3A9E; --tint-fill: #2A3A9E; } } @media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --label-2: rgba(244, 241, 234, .85); --label-3: rgba(244, 241, 234, .6); --separator: rgba(244, 241, 234, .4); --tint: #C3CAFF; } } @media (prefers-contrast: more) { :root[data-theme="dark"] { --label-2: rgba(244, 241, 234, .85); --label-3: rgba(244, 241, 234, .6); --separator: rgba(244, 241, 234, .4); --tint: #C3CAFF; } } * { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 1.0625rem; /* 17 */ line-height: 1.3; color: var(--label); background: var(--bg); -webkit-font-smoothing: antialiased; padding-bottom: calc(64px + env(safe-area-inset-bottom)); } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a { color: var(--tint); text-decoration: none; } :focus-visible { outline: 3px solid var(--tint); outline-offset: 2px; border-radius: 8px; } /* Toppraden: ordmärke till vänster, verktyg till höger. Flikarna ligger i botten på mobil och i toppraden från 900 pt. */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(env(safe-area-inset-top) + 14px) var(--gutter) 0; } .brand { min-width: 0; } .wordmark { font-family: var(--display); font-weight: 600; font-size: 1.375rem; letter-spacing: -.01em; margin: 0; font-variation-settings: "opsz" 24; } .pronounce { font-family: var(--display); font-size: .875rem; color: var(--label-2); margin: 2px 0 0; letter-spacing: .02em; font-variation-settings: "opsz" 14; } .pronounce span { color: var(--label-3); margin: 0 .1em; } /* Verktygsrad: fyra ikonknappar, 44 pt, samma linjetjocklek som flikikonerna (HIG Icons). Etiketten är aria-label. */ .toolbar { display: flex; gap: 2px; flex-shrink: 0; } .tool { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: var(--label-2); } .tool svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .tool:hover { background: var(--surface); color: var(--label); } .tool[aria-expanded="true"] { background: var(--surface); color: var(--tint); } .tool .count { position: absolute; top: 4px; left: 22px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--tint-fill); color: var(--on-tint); font-size: .6875rem; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--bg); } .tool .count.is-danger { background: var(--danger); color: var(--on-danger); } /* Temaknappen visar aktuellt läge: sol i ljust, måne i mörkt. Vilket som ska visas avgörs av tokens, inte av JS. */ .tool .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tool .icon-sun { display: none; } :root:not([data-theme="light"]) .tool .icon-moon { display: block; } } :root[data-theme="dark"] .tool .icon-sun { display: none; } :root[data-theme="dark"] .tool .icon-moon { display: block; } @media (prefers-reduced-motion: no-preference) { .tool.is-busy svg { animation: spin 1s linear infinite; } } @keyframes spin { to { transform: rotate(360deg); } } /* Notiser: en popover under klockan. Samma radmått som listorna. */ .popover { position: fixed; z-index: 20; top: calc(env(safe-area-inset-top) + 66px); right: var(--gutter); width: min(380px, calc(100vw - 2 * var(--gutter))); max-height: min(70vh, 560px); overflow: auto; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--separator); } .popover[hidden] { display: none; } .popover .popover-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px var(--gutter) 6px; } .popover h2 { font-size: 1.0625rem; font-weight: 600; margin: 0; } .popover .popover-sub { font-size: .8125rem; color: var(--label-2); } .popover .row { padding-left: var(--gutter); } .popover .empty { padding: 24px var(--gutter) 28px; } .popover .footnote { margin: 4px var(--gutter) 14px; } @media (prefers-reduced-motion: no-preference) { .popover:not([hidden]) { animation: slide-in .2s cubic-bezier(.2, .8, .2, 1) both; } } /* Bekräftelse innan destruktiva handlingar (HIG Modality): systemets dialog, en fråga, två knappar. */ dialog { border: 0; border-radius: var(--radius); padding: 22px 20px 18px; width: min(360px, calc(100vw - 2 * var(--gutter))); background: var(--surface); color: var(--label); box-shadow: var(--shadow); font: inherit; } dialog::backdrop { background: rgba(14, 14, 12, .45); } dialog h2 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 6px; } dialog p { margin: 0 0 16px; color: var(--label-2); font-size: .9375rem; } dialog .actions { justify-content: flex-end; gap: 8px; } .action.is-danger { background: var(--danger); color: var(--on-danger); } main { padding: 0 var(--gutter); } main:focus { outline: none; } .large-title { font-family: var(--display); font-size: 2.375rem; /* 38 */ font-weight: 600; letter-spacing: -.02em; margin: 28px 0 6px; font-variation-settings: "opsz" 48; } .date-line { color: var(--label-2); font-size: .9375rem; margin: 0 0 18px; } /* Det enda stora elementet. All djärvhet spenderas här: solgult när det kostar dig något. */ .top { background: var(--surface); border-radius: var(--radius); padding: 20px 20px 18px; margin-bottom: 20px; } .top.is-danger, .top.is-warn { background: var(--sun); color: var(--on-sun); } .top .kicker { font-size: .8125rem; font-weight: 600; color: var(--label-2); margin: 0 0 8px; letter-spacing: .01em; } .top.is-danger .kicker, .top.is-warn .kicker { color: rgba(14, 14, 12, .7); } .top h2 { font-family: var(--display); font-size: 1.625rem; /* 26 */ font-weight: 600; letter-spacing: -.015em; line-height: 1.15; margin: 0 0 8px; font-variation-settings: "opsz" 32; } .top .why { margin: 0; font-size: 1rem; } .top.is-danger .why, .top.is-warn .why { color: var(--on-sun); } .top .action { margin-top: 14px; } @media (prefers-reduced-motion: no-preference) { .top { animation: slide-in .32s cubic-bezier(.2, .8, .2, 1) both; } } @keyframes slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Knappar: pillerform. Fylld indigo är den primära, en per vy. */ .action { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; background: var(--tint-fill); color: var(--on-tint); border-radius: 999px; font-weight: 600; } .button-text { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--tint); font-weight: 600; } .button-text.is-inline { min-height: 44px; margin: -14px 0; padding: 0 2px; font-size: inherit; font-weight: 500; vertical-align: middle; } .refresh-line { display: inline-block; } .actions { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin-top: 10px; } .actions .action { margin-top: 0; } .status { margin: 6px 0 0; font-size: .9375rem; color: var(--label-2); } .status:empty { display: none; } .status.is-danger { color: var(--danger); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Grupperade listor */ .group-title { font-size: .8125rem; font-weight: 600; color: var(--label-2); margin: 22px var(--gutter) 6px; } .group { background: var(--surface); border-radius: var(--radius); overflow: hidden; margin: 0 0 8px; } .row { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center; min-height: 56px; padding: 12px var(--gutter); position: relative; text-align: left; width: 100%; } .row + .row::before { content: ""; position: absolute; left: calc(62px + 12px + var(--gutter)); right: var(--gutter); top: 0; height: 1px; background: var(--separator); } .row .time { font-size: .9375rem; color: var(--label-2); font-variant-numeric: tabular-nums; } .row .time strong { display: block; color: var(--label); font-weight: 600; } .row .main { min-width: 0; } .row .title { font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; hyphens: auto; } a.row { color: inherit; } .row .sub { font-size: .875rem; color: var(--label-2); margin-top: 1px; } .row .badge { font-size: .8125rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--label-2); white-space: nowrap; } .badge.is-danger { background: var(--danger); color: var(--on-danger); } .badge.is-warn { background: var(--warn); color: var(--on-warn); } .badge.is-ok { background: var(--tint-fill); color: var(--on-tint); } .row-stacked { grid-template-columns: 62px 1fr; } /* Rader utan tidskolumn (Kopplingar): text, badge, knapp. */ .row:has(> .main:first-child) { grid-template-columns: 1fr auto auto; } .row:has(> .main:first-child) + .row::before { left: var(--gutter); } .row-stacked .badge { display: inline-block; margin-top: 6px; } /* Formulär i Kopplingar: en etikett över varje fält, systemets tangentbord, 44 pt höjd. */ .conn-form { padding: 4px var(--gutter) 16px; border-top: 1px solid var(--separator); display: grid; gap: 12px; } .conn-form[hidden] { display: none; } .row .badge.is-inline { display: inline-block; margin-right: 6px; vertical-align: 1px; } .conn-receipt { padding: 0 var(--gutter) 12px; margin: -4px 0 0; } .field { display: grid; gap: 4px; } .field-label { font-size: .8125rem; font-weight: 600; color: var(--label-2); } .field input { font: inherit; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--separator); background: var(--bg); color: var(--label); width: 100%; } .field input::placeholder { color: var(--label-3); } .field input:focus { outline: 3px solid var(--tint); outline-offset: 0; border-color: transparent; } .field-hint { font-size: .8125rem; color: var(--label-2); } .conn-form .actions { margin-top: 2px; } .row .button-text { justify-self: end; } /* Skelett medan svaret hämtas: samma radmått som riktiga rader, inga rörelser. */ .skeleton .row strong, .skeleton .row .title, .skeleton .row .sub { background: var(--surface-2); border-radius: 6px; color: transparent; } .skeleton .row strong { width: 44px; } .skeleton .row .title { width: 60%; } .skeleton .row .sub { width: 40%; } /* Examen */ .progress { height: 10px; border-radius: 5px; background: rgba(14, 14, 12, .12); overflow: hidden; margin: 10px 0 8px; } .top:not(.is-warn):not(.is-danger) .progress { background: var(--surface-2); } .progress > div { height: 100%; background: var(--tint-fill); border-radius: 5px; } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .stat { background: var(--surface); border-radius: var(--radius); padding: 16px var(--gutter); } .stat .value { font-family: var(--display); font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 32; } .stat .value.is-danger { color: var(--danger); } .stat .label { font-size: .8125rem; color: var(--label-2); } .empty { padding: 40px var(--gutter); text-align: center; color: var(--label-2); } .empty strong { display: block; color: var(--label); font-weight: 600; margin-bottom: 4px; } .footnote { font-size: .8125rem; color: var(--label-2); margin: 18px var(--gutter) 0; } /* Bottenflikar på mobil */ .tabbar { z-index: 10; position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--separator); } .tab { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; min-height: 44px; padding: 4px 8px; color: var(--label-2); font-size: .6875rem; /* 11, HIG-minimum */ font-weight: 500; border-radius: 12px; } .tab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .tab.is-active { color: var(--tint); } /* Bredare skärm: bottenflikarna flyttar upp i toppraden mellan ordmärket och verktygen (HIG Layout: convertible tab bar). */ @media (min-width: 900px) { body { padding-bottom: 64px; } .topbar { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 14px 32px 12px; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--separator); } .toolbar { justify-self: end; } .tabbar { position: static; display: flex; gap: 4px; justify-content: center; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } .tab { flex-direction: row; gap: 8px; min-height: 44px; padding: 8px 16px; font-size: .9375rem; font-weight: 500; border-radius: 999px; } .tab svg { width: 20px; height: 20px; } .tab:hover { color: var(--label); } .tab.is-active { background: var(--surface); color: var(--tint); } main { max-width: 680px; margin: 0 auto; padding: 8px 32px 0; box-sizing: content-box; } .large-title { margin-top: 32px; } .popover { top: 78px; right: 32px; } } @media (min-width: 700px) and (max-width: 899px) { .topbar, main { max-width: 600px; margin: 0 auto; } .tabbar { max-width: 600px; margin: 0 auto; } } /* Segmenterad kontroll (Utseende, Nivå): pillerform, valt segment i indigo. Radiogrupp för hjälpmedel. */ .segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); } .segmented button { min-height: 38px; padding: 0 14px; border-radius: 999px; font-size: .9375rem; font-weight: 500; color: var(--label-2); } .segmented button[aria-checked="true"] { background: var(--tint-fill); color: var(--on-tint); font-weight: 600; } .segmented button:hover:not([aria-checked="true"]) { color: var(--label); } button.row { font: inherit; color: inherit; } /* Profil: sökbar lista över lärosäten (combobox + listbox enligt ARIA). Träffarna ligger i ett kort under fältet. */ .row-form { grid-template-columns: 1fr !important; } .combo { position: relative; } .group:has(.combo) { overflow: visible; } /* träfflistan får sticka ut under kortet */ .combo input[type="search"] { -webkit-appearance: none; appearance: none; } .combo-list { list-style: none; margin: 4px 0 0; padding: 6px; position: absolute; left: 0; right: 0; top: calc(100% - 22px); z-index: 5; background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-row); box-shadow: var(--shadow); max-height: 320px; overflow: auto; } .combo-list[hidden] { display: none; } .combo-list li { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 8px 12px; border-radius: 10px; cursor: pointer; } .combo-list li:hover, .combo-list li[aria-selected="true"] { background: var(--surface-2); } .combo-name { font-weight: 500; } .combo-sub { font-size: .8125rem; color: var(--label-2); } .button-text.is-link { justify-self: start; min-height: 32px; } /* Smal skärm: segmentkontrollen får en egen rad under texten och fyller bredden. */ @media (max-width: 699px) { .row:has(> .segmented) { grid-template-columns: 1fr !important; } .segmented { display: flex; width: 100%; } .segmented button { flex: 1; } } .field-static { min-height: 44px; display: flex; align-items: center; padding: 0 14px; border-radius: 12px; background: var(--surface-2); color: var(--label); font-variant-numeric: tabular-nums; }