/* Robinsonklubben app stylesheet — Organic design-system tokens and component classes, ported from epics/archive/Robinsonklubben MVP/design_handoff_robinsonklubben/organic-styles.css per that folder's own README ("don't link it from the PHP app as-is — port the tokens you need"). Retune tokens here if the design system evolves; see organic-design-system-readme.md for the system's own usage guide. A revised handoff (updated admin/profile screens plus brand assets) lives in epics/archive/Refactor UI for admin and profile area/ — port from there for that epic. No build step — plain CSS on plain HTML. */ /* Self-hosted fonts (OFL, licences in fonts/), latin + latin-ext subsets as Google Fonts serves them. Figtree is a variable font: one file covers 400-700. No external origin, so the CSP allows fonts from 'self' only. */ @font-face { font-family: "Caprasimo"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/caprasimo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Caprasimo"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/caprasimo-latin.woff2") format("woff2"); 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; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/figtree-latin.woff2") format("woff2"); 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 { --color-bg: #f5ead8; --color-surface: #ebddc5; --color-text: #201e1d; --color-accent: #c67139; /* Text on an --color-accent fill (primary buttons, the chosen tab), and that fill on hover/press. Dark here: cream on this orange is only 3.0:1, dark is 4.6:1 (WCAG AA). A theme with a dark accent sets cream instead, and darker hover/press shades. */ --color-on-accent: #201e1d; --color-accent-hover: #d67f48; --color-accent-active: #f6a06b; --color-accent-2: #7a8a5e; --color-divider: color-mix(in srgb, #201e1d 16%, transparent); /* MobilePay's own brand blue, the same on every site: deliberately not a --color- variable, so no site theme repaints it. */ --mobilepay-blue: #2f6bff; --mobilepay-blue-600: #295ee0; --mobilepay-blue-700: #2451c2; --mobilepay-text: #ffffff; --color-neutral-100: #f9f4ed; --color-neutral-200: #eee7db; --color-neutral-300: #dcd3c4; --color-neutral-400: #c0b6a5; --color-neutral-500: #a19786; --color-neutral-600: #82796a; --color-neutral-700: #645c50; --color-neutral-800: #474238; --color-neutral-900: #2e2b25; --color-accent-100: #fff2eb; --color-accent-200: #ffe1d0; --color-accent-300: #ffc6a5; --color-accent-400: #f6a06b; --color-accent-500: #d67f48; --color-accent-600: #b2622d; --color-accent-700: #8c491a; --color-accent-800: #643312; --color-accent-900: #402310; --color-accent-2-100: #f0fae1; --color-accent-2-200: #e1eecc; --color-accent-2-300: #ccdbb2; --color-accent-2-400: #aebf92; --color-accent-2-500: #8fa073; --color-accent-2-600: #728157; --color-accent-2-700: #56633f; --color-accent-2-800: #3d472b; --color-accent-2-900: #272e1b; --font-heading: "Caprasimo", system-ui, sans-serif; --font-heading-weight: 400; --font-body: "Figtree", system-ui, sans-serif; --space-1: 4.4px; --space-2: 8.8px; --space-3: 13.2px; --space-4: 17.6px; --space-6: 26.4px; --space-8: 35.2px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent); } *, *::before, *::after { box-sizing: border-box; } /* The browser's own [hidden]{display:none} UA-stylesheet rule has the same specificity as a single class selector — anything here that also carries .card/.btn/etc. (equal specificity, later source order) would otherwise silently stay visible after `el.hidden = true`. Bit us on #pwa-install-card (a .card) not actually hiding on dismiss; !important forces hidden to win regardless of what else the element is styled as. */ [hidden] { display: none !important; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } h1 { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 25px; } h4 { font-size: 20px; } h5 { font-size: 16px; } h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent-700); text-underline-offset: 3px; } a:hover { color: var(--color-accent-900); } img { display: block; max-width: 100%; } figure { margin: 0; } figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 68%, transparent); } /* Read by screen readers, not shown: the name of an icon-only control (nav.php's menu button). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 68%, not lighter: at least 4.5:1 (WCAG AA) on --color-surface, the darkest background it sits on, on both sites. Lighthouse flagged 55% (3.5:1). */ .text-muted { color: color-mix(in srgb, var(--color-text) 68%, transparent); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } /* — layout — */ .container { max-width: 900px; margin: 0 auto; padding: 0 var(--space-4); } /* — rules — */ .hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); } /* — buttons — */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); min-height: 44px; /* touch target — youngest users are children on a phone */ } .btn svg { display: block; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--color-accent); color: var(--color-on-accent); } .btn-primary:hover { background: var(--color-accent-hover); } .btn-primary:active { background: var(--color-accent-active); } .btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } .btn-accent-2 { background: var(--color-accent-2); color: var(--color-bg); } .btn-accent-2:hover { background: var(--color-accent-2-600); } .btn-accent-2:active { background: var(--color-accent-2-700); } .btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); } .btn-icon { width: 44px; height: 44px; padding: 0; } .btn-block { width: 100%; margin-top: var(--space-2); } /* settle.php's "Åbn MobilePay" + "Kopiér beløb" for the owing family's adults. Touch devices only (hover: none + coarse pointer, so a tablet counts and a touch laptop with a mouse doesn't): on a desktop there is no MobilePay app to open. Who gets it at all is decided in settle.php. */ .pay-shortcut { display: none; } @media (hover: none) and (pointer: coarse) { .pay-shortcut { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .pay-shortcut .btn { flex: 1 1 140px; } } /* MobilePay's own blue, the same on every site (it's their brand, not ours). */ .btn-mobilepay { background: var(--mobilepay-blue); color: var(--mobilepay-text); } .btn-mobilepay:hover { background: var(--mobilepay-blue-600); } .btn-mobilepay:active { background: var(--mobilepay-blue-700); } /* — forms — */ .field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .field + .field { margin-top: 10px; } .input { width: 100%; min-height: 44px; padding: 6px 10px; font: inherit; font-size: 16px; /* >=16px avoids iOS auto-zoom on focus */ color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } textarea.input { min-height: 90px; resize: vertical; } /* Some WebViews (e.g. MobilePay's in-app browser) size type="date"'s internal day/month/year segments at an intrinsic width that overrides a plain width: 100%, pushing the field past its container. Resetting appearance forces it back onto the standard box model; the field stays fully tappable to open the native picker either way. */ input[type="date"].input { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; } .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } .radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider); } .radio:hover .dot { border-color: var(--color-accent); } .radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); } .radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; } .seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; min-height: 44px; } .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); } .seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-on-accent); } .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; } .seg-opt svg { flex: none; } /* Same .seg pill shell as above, but for a group of plain nav links (Tur/Saldo) instead of radio-labeled options — there's no single page with both panels to switch via :has(), each tab is a real navigation to its own page, so the "active" signal is aria-current="page" instead of :checked. See docs/patterns.md § Segmented Control Tabs. */ .seg-opt-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; min-height: 44px; text-decoration: none; color: var(--color-neutral-700); } .seg-opt-link + .seg-opt-link { border-left: 1px solid var(--color-divider); } .seg-opt-link[aria-current='page'] { background: var(--color-accent); color: var(--color-on-accent); } .seg-opt-link:not([aria-current='page']):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .seg-opt-link svg { flex: none; } /* — expense form (manual/scan split, mirrors design_handoff_robinsonklubben §05) — */ .expense-form-grid { display: flex; flex-direction: column; gap: var(--space-4); } .expense-form-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; } .expense-scan-subtitle { margin: 4px 0 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); } .expense-scan-body { display: flex; flex-direction: column; gap: 14px; } /* #scanStatus is empty most of the time (idle, or after a fully-successful scan) — collapsing it out of the flex flow then avoids reserving a dead 14px gap + 16px min-height below the last button for a message that isn't showing. */ #scanStatus:empty { display: none; } /* Prominent "Scanner kvittering…" state — the upload+compress+Claude round trip takes a few seconds, so this needs to read as active progress, not blend in with the small muted error/status text #scanStatus otherwise shows. */ #scanStatus.scan-status--busy { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--color-accent-700); } #scanStatus.scan-status--busy::before { content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-accent-700); border-top-color: transparent; animation: scan-status-spin 0.7s linear infinite; } @keyframes scan-status-spin { to { transform: rotate(360deg); } } /* Manuelt/Scan mode switch — same .seg/.seg-opt :has() mechanism as admin.php's tabs (.admin-tabs pattern below), except these two panels are ONLY mutually exclusive on mobile; desktop always shows both regardless of which radio is checked. Each half of the toggle is scoped to the breakpoint it applies to instead of one :has() rule fighting a desktop override over specificity — the two media queries are exact complements of the existing 761px breakpoint, so there's no gap and no double-match at any viewport width. */ .expense-mode-seg { margin-bottom: var(--space-4); } @media (max-width: 760px) { /* Two classes (not one) so this reliably beats .card's own `display: flex` — both panels also carry .card, and a single-class .expense-form-panel--scan would tie .card's specificity and lose to it on source order alone (.card is declared later in this file). */ .expense-form-panel.expense-form-panel--manual, .expense-form-panel.expense-form-panel--scan { display: none; } .expense-mode-seg:has(#tab-manual:checked) ~ .expense-form-grid .expense-form-panel--manual, .expense-mode-seg:has(#tab-scan:checked) ~ .expense-form-grid .expense-form-panel--scan { display: flex; } } @media (min-width: 761px) { .expense-mode-seg { display: none; } /* nothing to switch between once both panels always show */ .expense-form-grid { flex-direction: row; align-items: stretch; } .expense-form-grid .expense-form-panel { flex: 1; } .expense-form-panel--manual { order: 1; } .expense-form-panel--scan { order: 2; } } /* — cards — */ .card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); } .card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); } .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; } .card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; } .card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); } .elev-sm { box-shadow: var(--shadow-sm); } .elev-md { box-shadow: var(--shadow-md); } .elev-lg { box-shadow: var(--shadow-lg); } /* — admin/profile shared utilities — extracted from repeated inline styles (epics/archive/Refactor UI for admin and profile area, Implementation Plan Phases 2-3); declarations matched exactly to what they replaced, no visual change intended. */ .stack-6 { padding-top: var(--space-6); padding-bottom: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); } .stack-4 { display: flex; flex-direction: column; gap: var(--space-4); } .section-heading { font-family: var(--font-heading); font-size: 18px; margin-bottom: 12px; } .subsection-heading { font-family: var(--font-heading); font-size: 20px; } .form-card-narrow { padding: 20px; display: flex; flex-direction: column; gap: 12px; max-width: 420px; } .form-card-heading { font-family: var(--font-heading); font-size: 15px; cursor: pointer; } /* A fold-out card (
, admin.php and profile.php): the same space above and below the heading. Closed, Chrome still lays out the hidden content as a flex item, so the card's gap would add space under the heading; it is dropped while closed. */ details.card { padding: 14px 20px; } details.card:not([open]) { gap: 0; } .radio-row { display: flex; gap: 16px; margin-top: 4px; } .card-pad-16 { padding: 16px; } .msg-success { color: var(--color-accent-2-800); font-size: 13px; } .msg-error { color: var(--color-accent-700); font-size: 13px; } .mt-14 { margin-top: 14px; } .mb-6 { margin-bottom: var(--space-6); } .table-scroll { overflow-x: auto; } .family-edit-details { margin-top: 4px; } .family-edit-summary { cursor: pointer; font-size: 12px; color: var(--color-accent-700); } .legend-details { margin-top: -4px; } .legend-summary { cursor: pointer; font-size: 12px; color: var(--color-accent-700); } /* — profile.php's email, reminder, password and passkey cards: the same fold-out card as admin.php's "Inviter medlem" (.card + .form-card-heading summary), but full width like the cards above them. */ .profile-section { gap: 12px; } .legend-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 10px 0 0; align-items: start; } .legend-list dt { margin: 0; } .legend-list dd { margin: 0; font-size: 13px; } .legend-note { font-size: 12px; color: var(--color-neutral-700); margin: 10px 0 0; } /* — guide.php: plain bullet lists in each card; the status list reuses .legend-list */ .guide-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; } .guide-status dd { font-size: 14px; line-height: 1.5; } /* — trip history (trip.php): the "Ændret" marker is a 44 px hit area around a tag — */ .history-btn { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; flex-shrink: 0; padding: 0 2px; background: none; border: none; cursor: pointer; font: inherit; } .history-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; overflow-wrap: anywhere; } .history-when { font-size: 12px; color: var(--color-neutral-700); } .history-note { font-size: 12px; color: var(--color-neutral-700); margin: 0 0 10px; } /* — family overview (overview.php): one .overview-row per year, a that opens to the year's trips. On a phone the year sits on its own line above three labelled cells; from 761px it is a four-column table with one header row. The summary row is at least 44px, as a touch target. */ .overview-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; } .overview-year-label { grid-column: 1 / -1; font-weight: 600; } .overview-cell-label { display: block; font-size: 11px; color: var(--color-neutral-700); } .overview-head { display: none; } .overview-year > summary { min-height: 44px; cursor: pointer; list-style: none; } .overview-year > summary::-webkit-details-marker { display: none; } .overview-year > summary .overview-year-label::after { content: ' ▾'; font-size: 11px; color: var(--color-accent-700); } .overview-year[open] > summary .overview-year-label::after { content: ' ▴'; } .overview-total { border-bottom: none; font-weight: 600; } .overview-trips { list-style: none; margin: 0; padding: 6px 0 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; overflow-wrap: anywhere; } .overview-trips a { display: inline-flex; align-items: center; min-height: 44px; } .overview-trip-amounts { display: block; color: var(--color-neutral-700); margin-top: -10px; } @media (min-width: 761px) { .overview-row { grid-template-columns: 1.2fr 0.6fr 1fr 1fr; } .overview-year-label { grid-column: auto; } .overview-cell-label { display: none; } .overview-head { display: grid; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); } } /* passwordInput(): the eye sits inside the field's right end, a full 44px tap target. Which icon shows follows aria-pressed, which forms.js flips together with the input's type. */ .password-field { position: relative; } .password-field .input { padding-right: 48px; } .password-toggle { position: absolute; top: 0; right: 2px; width: 44px; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; color: var(--color-neutral-700); cursor: pointer; } .password-toggle:hover { color: var(--color-text); } .password-toggle .icon-eye-off, .password-toggle[aria-pressed="true"] .icon-eye { display: none; } .password-toggle[aria-pressed="true"] .icon-eye-off { display: block; } /* "← Tilbage" at the top of a page the nav doesn't lead back from (overview.php, trip-print.php). The installed app has no browser back button, so these pages need their own. */ .back-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: none; } .back-link:hover { text-decoration: underline; } /* — trip print view (trip-print.php): plain tables that fit a phone, and on paper nothing but the accounts — no nav, no buttons, plain text on the page colour (Canvas). */ .print-expenses .print-amount { text-align: right; white-space: nowrap; } .print-expenses .expense-original { font-size: 12px; } .print-date { white-space: nowrap; font-size: 13px; } .print-expenses td, .print-expenses tfoot th { vertical-align: top; overflow-wrap: anywhere; } .print-expenses tfoot th { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--color-text); border-bottom: none; } .print-settlements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .print-settlements li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-bottom: 8px; border-bottom: 1px solid var(--color-divider); } .print-actions .btn { min-height: 44px; } @media print { .nav, .nav-subnav, .test-banner, #passkeyNudgeCard, .print-actions, .back-link { display: none !important; } body { background: Canvas; color: CanvasText; font-size: 12px; } .print-page { padding: 0; max-width: none; } .print-page .table tr { break-inside: avoid; } .print-page .tag { background: none; color: inherit; padding: 0; } } /* — tags — */ .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); } .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); } .tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); } .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); } /* text -700: 4.5:1 on --color-surface */ /* — navigation — */ /* One shared bar, rendered by includes/nav.php on every authenticated page (see docs/patterns.md → Shared Navigation). Below the mobile breakpoint, .nav-links becomes a fixed slide-out drawer toggled by a hidden checkbox +