/* * FabLab design tokens — derived from University of Haifa site palette. * Haifa navy #1f3343 is the primary; cyan #08bbe7 is the accent; the rest * matches their card/border/text conventions. Slot-status colors mirror the * spec's green/yellow/red. * * Hebrew/RTL: the whole document is dir="rtl" (set on ). Layout is * built with CSS logical properties (margin-inline, padding-inline, * text-align: start) so it mirrors automatically. Latin text inside Hebrew * (emails, times, codes) uses and the .ltr utility class for stable * bidi. */ :root { /* Brand palette (from haifa.ac.il) */ --color-navy: #1f3343; --color-navy-700: #2a4257; --color-navy-50: #e9eef3; --color-cyan: #08bbe7; --color-teal: #0892b4; --color-success: #4ad6a4; --color-warning: #f2b339; --color-danger: #d71f1f; --color-focus: #0085f2; /* Surfaces */ --color-bg: #ffffff; --color-surface: #f5f5f9; --color-border: #dbe3f1; --color-border-strong: #c2cee2; --color-mute: #9b9fab; /* Text */ --color-text: #1f3343; --color-text-mute: #5b6573; --color-text-inverse: #ffffff; /* Typography — Heebo carries Hebrew well; system fonts as fallback. */ --font-display: "Heebo", "Open Sans Hebrew", "Arial Hebrew", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-body: "Heebo", "Open Sans Hebrew", "Arial Hebrew", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* Spacing & radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* Shadow */ --shadow-sm: 0 1px 2px rgba(31, 51, 67, 0.06); --shadow-md: 0 4px 12px rgba(31, 51, 67, 0.08); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--color-surface); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-align: start; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-navy); letter-spacing: 0; margin: 0 0 var(--space-4); font-weight: 600; text-align: start; } h1 { font-size: 28px; line-height: 1.3; } h2 { font-size: 22px; } h3 { font-size: 18px; } p, ul, ol { text-align: start; } ol, ul { padding-inline-start: 22px; margin-block: 0 var(--space-3); } ol li, ul li { margin-block: var(--space-1); } a { color: var(--color-teal); text-decoration: none; } a:hover { color: var(--color-navy); text-decoration: underline; } /* Bidi helpers — wrap Latin runs inside Hebrew so they don't drag commas. */ .ltr { direction: ltr; unicode-bidi: isolate; } code, kbd, samp { direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", "Liberation Mono", monospace; font-size: 0.92em; } /* Top bar -------------------------------------------------------------- */ /* Light bar so the official Haifa logo (dark text + red mark) renders in * its real brand colors. Matches the university's own header style. */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-6); background: #ffffff; color: var(--color-navy); position: sticky; inset-block-start: 0; z-index: 10; border-block-end: 1px solid var(--color-border); box-shadow: var(--shadow-sm); gap: var(--space-4); } .topbar .brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-navy); font-family: var(--font-display); font-weight: 600; } .topbar .brand:hover { text-decoration: none; color: var(--color-teal); } .topbar .brand-logo { height: 42px; width: auto; display: block; /* No filter — preserve the official Haifa brand colors. */ } .topbar .brand-text { font-size: 16px; letter-spacing: 0; white-space: nowrap; padding-inline-start: var(--space-3); border-inline-start: 1px solid var(--color-border); } .topbar nav { display: flex; align-items: center; gap: var(--space-5); } .topbar nav a, .topbar nav .link { color: var(--color-navy); font-size: 14px; font-weight: 500; } .topbar nav a:hover, .topbar nav .link:hover { text-decoration: none; color: var(--color-teal); } .topbar nav a[aria-current="page"] { color: var(--color-teal); position: relative; } .topbar nav a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 0; bottom: -6px; height: 2px; background: var(--color-teal); border-radius: 2px; } main { max-width: 1100px; margin: 0 auto; padding: var(--space-6); } /* Flash messages ------------------------------------------------------- */ .flash { max-width: 1100px; margin: var(--space-4) auto 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 14px; text-align: start; } .flash.inline-flash { margin: 0 0 var(--space-4); } .flash-info { background: var(--color-navy-50); color: var(--color-navy); } .flash-success { background: #e6f9f1; color: #0f7a4d; } .flash-error { background: #fde7e7; color: var(--color-danger); } .error-list { margin: 0; padding-inline-start: 18px; } /* Cards ---------------------------------------------------------------- */ .card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); text-align: start; } .card + .card { margin-top: var(--space-4); } .card h2 { margin-top: 0; } .card-title { margin-top: 0; } .card-subtitle { font-weight: normal; font-size: 13px; } .card.no-pad { padding: 0; } .card.narrow { max-width: 460px; margin-inline: auto; } .card.narrow.narrow-wide { max-width: 520px; } .form-foot { margin-top: var(--space-4); } .card-sep { border: 0; border-top: 1px solid var(--color-border); margin: 14px 0; } /* Forms ---------------------------------------------------------------- */ form.stack { display: flex; flex-direction: column; gap: var(--space-4); } label { display: flex; flex-direction: column; gap: var(--space-1); font-size: 13px; color: var(--color-text-mute); text-align: start; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea { font: inherit; padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); width: 100%; text-align: start; } /* Custom RTL-aware chevron for selects so the arrow sits flush on the inline-start (left in RTL) edge. */ select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: left 14px center; background-size: 12px 8px; padding-inline-start: 36px; } [dir="ltr"] select { background-position: right 14px center; padding-inline-end: 36px; padding-inline-start: var(--space-3); } select::-ms-expand { display: none; } input.ltr { direction: ltr; text-align: left; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; } /* Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 18px; border-radius: var(--radius-md); border: 1px solid transparent; background: var(--color-navy); color: var(--color-text-inverse); font: inherit; font-weight: 500; cursor: pointer; transition: background 80ms ease, transform 80ms ease; text-decoration: none; } .btn:hover { background: var(--color-navy-700); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-cyan { background: var(--color-cyan); color: #0a2230; } .btn-cyan:hover { background: #06a3ca; } .btn-ghost { background: transparent; color: var(--color-navy); border-color: var(--color-border-strong); } .btn-ghost:hover { background: var(--color-navy-50); } .btn-on-dark { color: #fff; border-color: rgba(255,255,255,0.4); } .btn-on-dark:hover { background: rgba(255,255,255,0.08); color: #fff; } .btn-danger { background: var(--color-danger); } .btn-danger:hover { background: #b81a1a; } .btn-warn { background: #d97706; color: #fff; } .btn-warn:hover { background: #b45309; } .btn-sm { padding: 6px 12px; font-size: 13px; } .btn-xs { padding: 4px 10px; font-size: 12px; } .btn[disabled] { opacity: .55; cursor: not-allowed; } .link { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; font: inherit; } form.inline { display: inline; margin: 0; } /* Day strip ------------------------------------------------------------ */ .day-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); } .day-pick { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px; min-width: 90px; font-size: 13px; line-height: 1.2; } .day-pick .day-weekday { font-weight: 600; font-size: 13px; } .day-pick .day-date { font-size: 12px; opacity: 0.85; } /* Slot grid ------------------------------------------------------------ */ .slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); } .slot { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); text-align: center; font-size: 14px; cursor: pointer; transition: border-color 80ms ease, background 80ms ease; font: inherit; color: inherit; width: 100%; } .slot:hover { border-color: var(--color-cyan); } .slot[disabled], .slot.taken { background: var(--color-surface); color: var(--color-mute); cursor: not-allowed; } .slot.mine { border-color: var(--color-cyan); background: #e6f8fd; } .slot-tag { font-size: 12px; margin-top: 2px; } .slot-form { margin: 0; } /* Status pills (live map + booking list) ------------------------------ */ .pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .pill-green { background: #e6f9f1; color: #0f7a4d; } .pill-yellow { background: #fff4dc; color: #8a5a00; } .pill-red { background: #fde7e7; color: var(--color-danger); } .pill-grey { background: var(--color-surface); color: var(--color-text-mute); } .pill-blue { background: #e7f1fb; color: #0a4f8a; } .pill-cyan { background: #dff6fc; color: #066a82; } /* Tables --------------------------------------------------------------- */ table { width: 100%; border-collapse: collapse; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } th, td { padding: var(--space-3) var(--space-4); text-align: start; border-bottom: 1px solid var(--color-border); font-size: 14px; vertical-align: middle; } th { background: var(--color-navy-50); font-weight: 600; color: var(--color-navy); } tr:last-child td { border-bottom: 0; } /* Hero / index --------------------------------------------------------- */ .hero { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-7) var(--space-6); background: linear-gradient(135deg, var(--color-navy) 0%, #14202c 100%); color: var(--color-text-inverse); border-radius: var(--radius-lg); margin-bottom: var(--space-6); text-align: start; } .hero h1 { color: var(--color-text-inverse); font-size: 32px; } .hero p { color: rgba(255,255,255,0.88); max-width: 60ch; margin: 0; } .hero .cta { display: flex; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; } .hero .cta .btn-cyan { color: #0a2230; } .muted { color: var(--color-text-mute); font-size: 13px; } /* Admin scaffolding ---------------------------------------------------- */ .admin-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); } .admin-title { margin: 0; } .admin-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; } .search-row { margin: var(--space-4) 0; } .search-input { max-width: 340px; } .live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); align-items: stretch; } /* Live status card — equal-height layout. Flex column with the footer * pinned to the bottom via margin-block-start: auto on the footer, so * cards with and without a "next-up" line are the same height. */ .live-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-4) 0; display: flex; flex-direction: column; min-height: 220px; position: relative; overflow: hidden; transition: box-shadow 120ms ease, transform 120ms ease; } .live-card:hover { box-shadow: var(--shadow-md); } /* Status accent — coloured leading edge that the eye can scan in one pass. */ .live-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 4px; background: var(--color-border); } .live-card--green::before { background: #4ad6a4; } .live-card--cyan::before { background: #14b1cb; } .live-card--yellow::before { background: #f2b339; } .live-card--red::before { background: var(--color-danger); } .live-card--grey::before { background: var(--color-border-strong); } .live-card--blue::before { background: #4a86c8; } .live-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .live-card__title { margin: 0; font-size: 17px; font-weight: 600; color: var(--color-navy); } .live-card__body { margin-bottom: var(--space-3); } .live-card__user { margin: 0 0 2px; font-size: 14px; } .live-card__email { margin: 0 0 var(--space-2); font-size: 12px; } .live-card__time { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: 0.02em; color: var(--color-navy); } .live-card__time .muted { font-size: 12px; font-weight: 400; letter-spacing: 0; } .live-card__empty { margin: var(--space-2) 0 0; padding: var(--space-3); background: var(--color-surface); border-radius: var(--radius-md); text-align: center; font-size: 13px; } .live-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); } .live-card__footer { margin-block-start: auto; padding-block: var(--space-3); border-block-start: 1px solid var(--color-border); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; } /* Legacy admin classes still used by other partials. */ .card-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .booking-user { margin: 12px 0 4px; } .booking-time { margin: 0; } .booking-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; } .booking-next { margin: 0; font-size: 13px; } .audit-details { font-size: 12px; } /* Live LIST view ------------------------------------------------------ */ .live-list { overflow: hidden; } .live-list table { font-size: 14px; } .live-list .resource-cell { font-weight: 600; color: var(--color-navy); } .live-list .actions-col, .live-list .actions-cell { white-space: nowrap; } .live-list .actions-cell .inline + .inline { margin-inline-start: var(--space-1); } /* Status accent on the inline-end edge of each row. */ .live-row { position: relative; } .live-row td:first-child { box-shadow: inset 3px 0 0 0 transparent; } .live-row.pill-green td:first-child { box-shadow: inset 3px 0 0 0 #4ad6a4; } .live-row.pill-cyan td:first-child { box-shadow: inset 3px 0 0 0 #14b1cb; } .live-row.pill-yellow td:first-child { box-shadow: inset 3px 0 0 0 #f2b339; } .live-row.pill-red td:first-child { box-shadow: inset 3px 0 0 0 var(--color-danger); } .live-row.pill-blue td:first-child { box-shadow: inset 3px 0 0 0 #4a86c8; } /* View toggle (segmented control) ------------------------------------- */ .section-tools { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .view-toggle { display: inline-flex; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; padding: 2px; gap: 2px; } .view-toggle__btn { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--color-text-mute); padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .view-toggle__btn:hover { color: var(--color-navy); } .view-toggle__btn.is-active { background: var(--color-navy); color: var(--color-text-inverse); } .stacked-form { margin: 6px 0 0; } .block-status { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; } .block-form { display: flex; gap: var(--space-1); align-items: center; margin: 0; flex-wrap: wrap; } .hours-input { width: 64px; padding: 2px 6px; text-align: center; } .block-unit { font-size: 12px; } .filter-row { display: flex; gap: var(--space-3); align-items: end; flex-wrap: wrap; margin-block: var(--space-3) var(--space-4); } .filter-row label { min-width: 160px; } .filter-row .narrow-field input { width: 110px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-block: var(--space-5) var(--space-3); } .section-title { margin: 0; font-size: 18px; } .section-sub { margin: 0; } .section-tools { margin: 0; } /* Inventory page ------------------------------------------------------- */ .inventory-table { margin-block: var(--space-3); } .inventory-table .actions-cell { white-space: nowrap; display: flex; gap: var(--space-2); align-items: center; } .inventory-table tr.row-editing td { background: var(--color-surface); } .inventory-table tr.row-editing input { inline-size: 100%; } .subhead { margin-block: var(--space-5) var(--space-3); font-size: 16px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); align-items: end; } .form-grid button { grid-column: 1 / -1; justify-self: start; } .inline-edit { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; margin: 0; } .kind-name-input { width: 180px; padding: 4px 8px; } .kind-desc-input { width: 200px; padding: 4px 8px; } .resource-name-input { width: 200px; padding: 4px 8px; } .narrow-field input { width: 100px; } /* Analytics ------------------------------------------------------------ */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); margin-block: var(--space-4); } .kpi { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); } .kpi-label { color: var(--color-text-mute); font-size: 13px; margin: 0 0 var(--space-2); } .kpi-value { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--color-navy); } .kpi-unit { color: var(--color-text-mute); font-size: 13px; margin-inline-start: 4px; font-weight: 400; } .kpi-sub { color: var(--color-text-mute); font-size: 12px; margin-top: var(--space-2); } .chart-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); } .chart-card { padding: var(--space-4); } .chart-title { margin: 0 0 var(--space-3); font-size: 16px; } .bar-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .bar-row { display: grid; grid-template-columns: 110px 1fr 56px; gap: var(--space-2); align-items: center; font-size: 13px; } .bar-row .bar-label { color: var(--color-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-row .bar-track { background: var(--color-surface); border-radius: 999px; height: 10px; position: relative; overflow: hidden; } .bar-row .bar-fill { position: absolute; inset-block: 0; inset-inline-end: 0; background: var(--color-cyan); border-radius: 999px; min-width: 2px; } .bar-row .bar-value { text-align: end; color: var(--color-text-mute); font-variant-numeric: tabular-nums; } .heatmap { display: grid; grid-template-columns: 50px repeat(15, 1fr); gap: 2px; font-size: 11px; } .heatmap .heat-hour { color: var(--color-text-mute); text-align: end; padding-inline-end: 4px; } .heatmap .heat-cell { aspect-ratio: 1; border-radius: 3px; background: var(--color-surface); } .heatmap-legend { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); color: var(--color-text-mute); font-size: 12px; } .heatmap-legend .swatch { width: 14px; height: 14px; border-radius: 3px; } /* Responsive ----------------------------------------------------------- */ /* Tablet — single-column heatmap collapses, padding tightens. */ @media (max-width: 900px) { main { padding: var(--space-4); } .hero { padding: var(--space-6) var(--space-5); } .hero h1 { font-size: 26px; } .heatmap { grid-template-columns: 44px repeat(7, 1fr); } .heatmap > div:nth-child(n+10):nth-child(-n+16) { display: none; } .form-grid { grid-template-columns: 1fr 1fr; } } /* Phone — stack everything, simplify topbar, allow horizontal table scroll. */ @media (max-width: 640px) { main { padding: var(--space-3); } .topbar { flex-wrap: wrap; padding: var(--space-2) var(--space-3); gap: var(--space-2); } .topbar .brand { gap: var(--space-2); } .topbar .brand-logo { height: 32px; } .topbar .brand-text { font-size: 14px; padding-inline-start: var(--space-2); } .topbar nav { gap: var(--space-3); flex-wrap: wrap; width: 100%; justify-content: flex-end; } .topbar nav a, .topbar nav .link { font-size: 13px; } h1 { font-size: 22px; } h2 { font-size: 18px; } .hero { padding: var(--space-5) var(--space-4); } .hero h1 { font-size: 22px; line-height: 1.2; } .hero p { font-size: 14px; } .hero .cta { flex-direction: column; align-items: stretch; gap: var(--space-2); } .hero .cta .btn { width: 100%; } .card { padding: var(--space-4); } .admin-head { flex-direction: column; align-items: flex-start; } .admin-actions { width: 100%; } /* Tables — wrap in a horizontal scroll instead of cramming all columns. */ .card.no-pad, .inventory-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .card.no-pad table, .inventory-table table { min-width: 520px; } th, td { padding: var(--space-2) var(--space-3); font-size: 13px; } .day-strip { gap: var(--space-1); } .day-pick { min-width: 64px; padding: 6px 8px; font-size: 12px; } .slot-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-2); } .slot { padding: var(--space-2); font-size: 13px; min-height: 44px; } .btn { padding: 10px 14px; min-height: 40px; } /* tap target */ .btn-sm { min-height: 36px; } .btn-xs { min-height: 32px; padding: 6px 10px; font-size: 12px; } .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } .kpi { padding: var(--space-3); } .kpi-value { font-size: 22px; } .chart-row { grid-template-columns: 1fr; } .bar-row { grid-template-columns: 90px 1fr 40px; font-size: 12px; } .form-grid { grid-template-columns: 1fr; } .heatmap { grid-template-columns: 38px repeat(7, 1fr); overflow-x: auto; } .inline-edit { gap: var(--space-2); } .kind-name-input, .kind-desc-input, .resource-name-input { width: 100%; max-width: none; } } /* Very small phones — keep one column of KPIs. */ @media (max-width: 380px) { .kpi-grid { grid-template-columns: 1fr; } }