/* Modals hidden by default — loaded in to prevent any flash-open (FOUC) */ .sd-modal.hidden { display: none !important; } /* ---- Clinician card editor modal (explicit values — outside .sd scope) ---- */ .sd-cardmodal { background: #fff; border: 1.5px solid #5c5c5c; border-radius: 1.875rem; box-shadow: 6px 6px 0 0 #5c5c5c; width: min(26rem, 100%); padding: 1.75rem; direction: rtl; font-family: 'Heebo', sans-serif; } .sd-cardmodal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; } .sd-cardmodal__head h3 { font-size: clamp(1.05rem,.95rem+.5vw,1.25rem); font-weight: 800; } .sd-cardmodal__close { border: none; background: none; cursor: pointer; font-size: 1.6rem; line-height: 1; } .sd-cardmodal__label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .35rem; } .sd-cardmodal__hint { min-height: 1.1rem; margin: -0.6rem 0 1rem; font-size: .8rem; font-weight: 600; color: #78716c; text-align: right; } /* photo picker inside the identity modal */ .sd-identity-photo { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; } .sd-identity-photo__img, .sd-identity-photo__ph { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; border: 1.5px solid #5c5c5c; flex-shrink: 0; } .sd-identity-photo__ph { display: grid; place-items: center; font-weight: 800; color: #5c5c5c; background: linear-gradient(135deg, #fe8bac, #d9c2f0); } .sd-identity-photo__controls { display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; } .sd-identity-photo__pick { cursor: pointer; border: 1.5px solid #5c5c5c; border-radius: .7rem; background: #fafaf9; padding: .4rem .85rem; font-size: .85rem; font-weight: 700; transition: box-shadow .15s ease, transform .15s ease; } .sd-identity-photo__pick:hover { transform: translate(-1px,-1px); box-shadow: 2px 2px 0 0 #5c5c5c; } .sd-identity-photo__clear { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: #78716c; cursor: pointer; } .sd-identity-photo__clear input { accent-color: #f5837b; } .sd-cardmodal__input { width: 100%; padding: .65rem .9rem; border: 1.5px solid #5c5c5c; border-radius: .9rem; margin-bottom: 1rem; font-family: inherit; font-size: .9rem; outline: none; background: #faf7fe; } .sd-cardmodal__input:focus { background: #fff; box-shadow: 2px 2px 0 0 #5c5c5c; } .sd-cardmodal__range { width: 100%; margin-bottom: .75rem; accent-color: #fe8bac; } .sd-cardmodal__preview { height: .5rem; border-radius: 999px; background: #efeeec; overflow: hidden; margin-bottom: 1rem; border: 1px solid #5c5c5c; } .sd-cardmodal__preview-fill { height: 100%; width: 0; background: #fe8bac; border-radius: 999px; transition: width .2s ease, background .2s ease; } .sd-cardmodal__colors { display: flex; gap: .6rem; margin-bottom: 1.25rem; } .sd-swatch { width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid #5c5c5c; cursor: pointer; transition: transform .15s ease; padding: 0; } .sd-swatch:hover { transform: scale(1.12); } .sd-swatch--active { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #5c5c5c; } .sd-cardmodal__actions { display: flex; gap: .6rem; } .sd-cardmodal__save { flex: 1; background: #fe8bac; border: 1.5px solid #5c5c5c; border-radius: .9rem; box-shadow: 3px 3px 0 0 #5c5c5c; padding: .8rem; font-weight: 800; cursor: pointer; font-family: inherit; font-size: 1rem; transition: transform .15s ease, box-shadow .15s ease; } .sd-cardmodal__save:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 0 #5c5c5c; } .sd-cardmodal__delete { background: #f5837b; color: #fff; border: 1.5px solid #5c5c5c; border-radius: .9rem; padding: .8rem 1.1rem; font-weight: 800; cursor: pointer; font-family: inherit; } .sd-cardmodal__delete.hidden { display: none; } /* ------------------------------------------------------------------------- Break the student page out of base.html's centered/narrow container so it fills the whole viewport width. Scoped: only applies on pages that render .sd (this page), via the body class added below. ------------------------------------------------------------------------- */ body.sd-page main { max-width: none !important; margin: 0 !important; padding: 0 !important; width: 100%; } body.sd-page footer { display: none; } /* page has its own bottom nav */ body.sd-page > nav { display: none; } /* hide base top navbar on this page */ /* ========================================================================= STUDENT DETAIL — Design System (Figma redesign, 2026-08) All spacing/typography in rem or clamp(); px ONLY for borders/hairlines, shadows. Single source of tokens below. Palette = warm Figma set. ========================================================================= */ .sd { /* ---- Color tokens (semantic) — new warm Figma palette ---- */ --color-bg: #f9f5f2; --color-surface: #ffffff; --color-surface-2: #fafaf9; /* off-white: secondary button, icon wells */ --color-ink: #5c5c5c; --color-ink-soft: #78716c; /* meta / secondary text */ --color-ink-mute: #a8a29e; /* field micro-labels */ --color-line: #d6d3d1; /* hairline divider */ --color-danger: #f5837b; --color-pink: #fe8bac; --color-pink-soft: #ffe6ee; --color-coral: #f5837b; /* strong warm accent (= danger hue) */ --color-peach: #ffc9a3; /* warm peach — bridges pink↔yellow */ --color-yellow: #f7c460; --color-yellow-soft: #fff3d6; --color-neutral: #efeeec; /* warm grey chip / card / track */ --color-blue: #bfd9f2; --color-blue-soft: #e4f0fb; --color-green: #bfe3c4; --color-green-soft: #e6f5e8; --color-purple: #d9c2f0; --color-purple-soft: #efe6fa; /* ---- Spacing scale (8px base → rem) ---- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 2.5rem; /* 40 */ /* ---- Type scale (fluid) ---- */ --text-xs: clamp(0.7rem, 0.66rem + 0.2vw, 0.78rem); --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem); --text-base: clamp(0.9rem, 0.85rem + 0.3vw, 1rem); --text-lg: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem); --text-2xl: clamp(1.3rem, 1.15rem + 0.6vw, 1.5rem); /* section + card headings (24px) */ --text-name: clamp(1.5rem, 1.15rem + 1.5vw, 2rem); /* student name (32px) */ /* ---- Radii ---- */ --radius-sm: 0.75rem; /* 12 — bubbles */ --radius-md: 1rem; /* 16 — schedule rows */ --radius-lg: 1.25rem; /* 20 */ --radius-xl: 1.875rem; /* 30 — cards / profile */ --radius-pill: 999px; /* ---- Borders / shadows (px allowed) ---- */ --border-brutal: 1.5px solid #5c5c5c; --shadow-brutal: 4px 4px 0 0 #5c5c5c; --shadow-soft: 0 4px 18px rgba(29, 29, 29, 0.05); /* ---- Numerals ---- */ --font-num: 'Inter', 'Heebo', sans-serif; /* ---- Motion tokens ---- */ --dur-micro: 200ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); direction: rtl; background: var(--color-bg); color: #5c5c5c; font-family: 'Heebo', sans-serif; min-height: 100vh; padding-block: var(--space-4) calc(var(--space-4) + 4.75rem); padding-inline: clamp(var(--space-4), 5vw, 4.25rem); } /* Numerals / dates / times render in Inter (Figma) */ .sd .sd-num { font-family: var(--font-num); font-feature-settings: "tnum" 1; } /* ---- Reveal animation (subtle, once) ---- */ @keyframes sd-reveal { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } } .sd [data-reveal] { animation: sd-reveal 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); } @media (prefers-reduced-motion: reduce) { .sd [data-reveal] { animation: sd-fade 400ms ease both; } @keyframes sd-fade { from { opacity: 0; } to { opacity: 1; } } } /* ========================================================================= TOPBAR ========================================================================= */ .sd__topbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; } .sd__topbar-side { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; } /* Pills */ .sd-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-soft); font-size: var(--text-sm); font-weight: 600; color: #5c5c5c; cursor: pointer; border: none; text-decoration: none; transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); } .sd-pill:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(29,29,29,0.1); } /* Black "critical event" quick pill (topbar) */ .sd-pill--alert { background: #1d1d1d; color: #fff; font-weight: 700; padding-inline: var(--space-3) var(--space-5); } .sd-pill--alert:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(29,29,29,0.25); } /* Date/time pill (Inter numerals) */ .sd-datepill { gap: var(--space-3); font-family: var(--font-num); cursor: default; } .sd-datepill:hover { transform: none; box-shadow: var(--shadow-soft); } .sd-datepill__day { font-weight: 600; color: #5c5c5c; } .sd-datepill__sep { color: var(--color-line); } .sd-datepill__date { font-weight: 600; color: #5c5c5c; } .sd-datepill__time { background: var(--color-surface-2); color: var(--color-ink-soft); font-weight: 700; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); } /* ========================================================================= PROFILE CARD — identity (right) · now-trigger (center) · actions (left) ========================================================================= */ .sd__profile { position: relative; z-index: 30; /* lift the card (and its "מה עכשיו?" dropdown) above the body columns */ direction: rtl; background: var(--color-surface); border: var(--border-brutal); border-radius: var(--radius-xl); padding: clamp(var(--space-3), 1.5vw, var(--space-4)) clamp(var(--space-5), 3vw, var(--space-7)); margin-bottom: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(var(--space-4), 3vw, var(--space-6)); } /* Identity — avatar (right) + text to its left, all lines hugging the right edge next to the photo. NB: in an RTL column, flex-start = the RIGHT side (flex-end pushed short lines like the age to the LEFT). */ .sd__profile-identity { display: flex; align-items: center; gap: var(--space-4); } .sd__identity-text { text-align: right; display: flex; flex-direction: column; align-items: flex-start; } .sd__name { font-size: var(--text-name); font-weight: 800; line-height: 1.1; } .sd__subtitle { font-size: var(--text-sm); color: var(--color-ink-soft); } .sd__subtitle--top { margin-bottom: 0.15rem; } .sd__avatar { width: clamp(4.5rem, 3.5rem + 3vw, 6.5rem); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: var(--border-brutal); flex-shrink: 0; } /* Photo is a click target → opens the identity editor. Small pencil badge is a persistent affordance (visible on touch too), lifts on hover/focus. */ .sd__avatar-btn { position: relative; display: block; padding: 0; border: none; background: none; border-radius: 50%; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .sd__avatar-btn .sd__avatar { transition: transform var(--dur-micro) var(--ease-out); } .sd__avatar-btn:hover .sd__avatar { transform: scale(1.03); } .sd__avatar-btn:focus-visible { outline: none; } .sd__avatar-btn:focus-visible .sd__avatar { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px #5c5c5c; } .sd__avatar-edit { position: absolute; inset-block-end: -0.15rem; inset-inline-start: -0.15rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #fe8bac; border: var(--border-brutal); color: #5c5c5c; display: grid; place-items: center; pointer-events: none; transition: transform var(--dur-micro) var(--ease-out); } .sd__avatar-btn:hover .sd__avatar-edit, .sd__avatar-btn:focus-visible .sd__avatar-edit { transform: scale(1.12); } @media (prefers-reduced-motion: reduce) { .sd__avatar-btn .sd__avatar, .sd__avatar-edit { transition: none; } } /* Action buttons (profile) — brutalist pills */ .sd__profile-actions { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; } .sd-action-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-width: 12rem; padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); border: var(--border-brutal); box-shadow: var(--shadow-brutal); font-size: var(--text-sm); font-weight: 700; color: #5c5c5c; text-decoration: none; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); } .sd-action-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 #5c5c5c; } .sd-action-btn:active { transform: translate(0,0); box-shadow: 2px 2px 0 0 #5c5c5c; } .sd-action-btn--yellow { background: #f7c460; } .sd-action-btn--white { background: var(--color-surface-2); } /* ---- "מה עכשיו?" — collapsed = header + current pill; open = full-day card overlay ---- */ .sd__now { position: relative; } .sd-now { position: relative; width: min(17rem, 100%); display: flex; flex-direction: column; gap: var(--space-2); } .sd-now__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .sd-now__label { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--text-base); } .sd-now__badge { display: inline-flex; align-items: center; gap: var(--space-2); background: #1d1d1d; color: #fff; font-weight: 600; font-size: var(--text-xs); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); } /* collapsed: current-activity pill */ .sd-now__current { cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); background: #fe8bac; border: var(--border-brutal); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); font-size: var(--text-base); transition: transform var(--dur-micro) var(--ease-out); } .sd-now__current:hover { transform: translateY(-1px); } .sd-now__cur-info { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; } .sd-now__cur-info b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sd-now__cur-info time { font-family: var(--font-num); font-weight: 700; flex-shrink: 0; } .sd-now__chev { flex-shrink: 0; } .sd-now__chev--open { transform: rotate(180deg); } /* open: ONE solid off-white card (Figma) — header on top, full day below, current pink in place */ .sd-now__panel { position: absolute; inset-block-start: 0; inset-inline: -3rem; /* a bit wider than the collapsed widget */ z-index: 60; background: var(--color-surface-2); /* #fafaf9 */ border: var(--border-brutal); box-shadow: var(--shadow-brutal); /* 4px 4px 0 black */ border-radius: var(--radius-xl); /* 30px */ padding: var(--space-3) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: 5px; max-height: 24rem; overflow-y: auto; } .sd-now__panel[hidden] { display: none; } .sd-now__panel .sd-now__head { margin-bottom: var(--space-2); } .sd-now__list { display: flex; flex-direction: column; gap: 5px; } .sd-now__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); } .sd-now__row-info { display: inline-flex; align-items: center; gap: var(--space-3); } .sd-now__row time { font-family: var(--font-num); font-weight: 600; color: #5c5c5c; } .sd-now__row--current { background: #fe8bac; border: var(--border-brutal); cursor: pointer; font-weight: 700; } .sd-now__row--current .sd-now__row-name { font-size: var(--text-base); font-weight: 700; } .sd-now__row--current time { font-weight: 700; } .sd-now__empty { text-align: center; color: var(--color-ink-soft); padding: var(--space-3); font-size: var(--text-sm); } /* ========================================================================= BODY — 3 columns: details (right) · goals (middle) · updates (left) ========================================================================= */ .sd__body { direction: rtl; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* equal columns → equal gaps between all three */ grid-template-areas: "info clinician updates"; gap: clamp(var(--space-4), 2.5vw, var(--space-6)); align-items: start; } .sd__col-updates { grid-area: updates; } .sd__col-clinician { grid-area: clinician; } .sd__col-info { grid-area: info; container-type: inline-size; } .sd-col-title { text-align: center; font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--space-3); } /* Tablet: 2 columns — details + goals share the row, updates below */ /* Tablet: 2 columns — clinician + info share the row, updates below */ @media (max-width: 64rem) { .sd__body { grid-template-columns: 1fr 1fr; grid-template-areas: "clinician info" "updates updates"; } } /* Mobile: single column, reordered by IMPORTANCE (protection first) */ @media (max-width: 40rem) { .sd__body { grid-template-columns: 1fr; grid-template-areas: "info" "clinician" "updates"; } .sd__profile { flex-direction: column; text-align: center; } /* two action buttons share one row on phones */ .sd__profile-actions { flex-direction: row; width: 100%; align-items: stretch; gap: var(--space-2); } .sd-action-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: var(--space-3); gap: var(--space-2); text-align: center; } .sd__now { width: 100%; } .sd-now { width: 100%; } .sd { padding-bottom: calc(var(--space-4) + 8.5rem); } /* reserve the top-right corner for the hamburger (RTL: right = inline-start) */ .sd__topbar { padding-inline-start: 5.25rem; } } /* ========================================================================= RIGHT COLUMN — personal details (collapsible) + guardianship cards ========================================================================= */ .sd-details { background: var(--color-surface); border: var(--border-brutal); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); overflow: hidden; margin-bottom: var(--space-5); } .sd-details__summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); } .sd-details__summary::-webkit-details-marker { display: none; } .sd-details__title { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--text-base); } .sd-details__tools { display: inline-flex; align-items: center; gap: var(--space-3); color: #5c5c5c; } .sd-details__chev { transition: transform var(--dur-micro) var(--ease-out); } .sd-details[open] .sd-details__chev { transform: rotate(180deg); } .sd-details__edit { display: inline-grid; place-items: center; color: #5c5c5c; } .sd-details__body { padding: 0 var(--space-5) var(--space-5); display: grid; /* 2 details per row, RTL (right→left) */ grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-3); align-items: center; } /* row-reverse → icon hugs the RIGHT (RTL lead), text to its left; flex-end pins the pair to the cell's right edge */ .sd-datarow { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; } .sd-datarow__text { min-width: 0; } .sd-datarow__text { text-align: right; display: flex; flex-direction: column; } .sd-datarow__label { font-size: var(--text-xs); color: var(--color-ink-mute); line-height: 1.4; } .sd-datarow__value { font-size: var(--text-sm); font-weight: 700; } .sd-datarow__value.sd-num { font-weight: 600; white-space: nowrap; } .sd-datarow__icon { width: 2rem; aspect-ratio: 1; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; } .sd-datarow__icon--pink { background: #fe8bac; } .sd-datarow__icon--neutral { background: var(--color-neutral); } .sd-datarow__icon--yellow { background: #f7c460; } /* Guardianship cards (plan / medication / allergy) */ .sd-guard-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); align-items: start; } @container (max-width: 18rem) { .sd-guard-grid { grid-template-columns: 1fr; } } .sd-guard-card { border: var(--border-brutal); box-shadow: var(--shadow-brutal); border-radius: var(--radius-xl); display: flex; flex-direction: column; overflow: hidden; transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); } .sd-guard-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 #5c5c5c; } .sd-guard-card:active { transform: translate(0,0); box-shadow: 2px 2px 0 0 #5c5c5c; } .sd-guard-card--yellow { background: #f7c460; } .sd-guard-card--neutral { background: var(--color-neutral); } .sd-guard-card--pink { background: #fe8bac; } /* clickable header (the collapsed card face) */ .sd-guard-card__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-4) var(--space-2) var(--space-3); border: none; background: none; cursor: pointer; width: 100%; color: inherit; font: inherit; } .sd-guard-card__icon { width: clamp(2.75rem, 2rem + 2.5vw, 3.5rem); aspect-ratio: 1; border-radius: 50%; background: var(--color-surface-2); display: grid; place-items: center; } .sd-guard-card__icon svg { height: 1.55rem; width: auto; display: block; } /* Fixed to exactly 3 lines' worth of space (title + up to 2 summary lines) so all 3 closed cards always match height, regardless of how short/long each one's actual text is — see .sd-guard-card__short for the matching 2-line clamp that keeps longer text from ever exceeding this reservation. */ .sd-guard-card__label { font-size: var(--text-sm); font-weight: 700; line-height: 1.35; min-height: calc(1.35em * 3); } .sd-guard-card__label b { display: block; } .sd-guard-card__short { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .sd-guard-card__chev { color: #5c5c5c; transition: transform var(--dur-micro) var(--ease-out); } .sd-guard-card.is-open .sd-guard-card__chev { transform: rotate(180deg); } .sd-guard-card.is-open .sd-guard-card__short { display: none; } /* expandable details — desktop accordion (click grows the card in place) */ .sd-guard-card__details { display: none; padding: 0 var(--space-4) var(--space-4); text-align: right; } .sd-guard-card.is-open .sd-guard-card__details { display: block; } .sd-guard-card__dsum { font-size: var(--text-sm); font-weight: 700; color: #5c5c5c; line-height: 1.45; margin-bottom: var(--space-2); } .sd-guard-card__dsec { margin-top: var(--space-2); } .sd-guard-card__dsec h4 { font-size: var(--text-sm); font-weight: 800; color: #5c5c5c; margin-bottom: 0.15rem; } .sd-guard-card__dsec p { font-size: var(--text-xs); line-height: 1.55; color: #5c5c5c; white-space: pre-line; } .sd-guard-card__dempty { text-align: center; color: var(--color-ink-soft); font-size: var(--text-xs); } /* ========================================================================= MIDDLE COLUMN — goal (תל"א) progress cards ========================================================================= */ .sd-goal { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title edit" "progress add"; gap: var(--space-3); align-items: center; } .sd-goal__title { grid-area: title; text-align: right; line-height: 1.2; } .sd-goal__title b { font-size: var(--text-2xl); font-weight: 800; } .sd-goal__title span { font-size: var(--text-sm); font-weight: 600; color: #5c5c5c; margin-inline-start: var(--space-2); } .sd-goal__edit { grid-area: edit; } .sd-goal__progress { grid-area: progress; display: flex; align-items: center; gap: var(--space-3); } .sd-goal__date { font-size: var(--text-sm); font-weight: 700; font-family: var(--font-num); color: #5c5c5c; flex-shrink: 0; } .sd-goal__bar { flex: 1; height: 0.5rem; border-radius: var(--radius-pill); background: var(--color-neutral); overflow: hidden; } .sd-goal__fill { height: 100%; border-radius: var(--radius-pill); transition: width 800ms var(--ease-out); } .sd-goal__add { grid-area: add; } /* color variants — bar fill + plus button share the card colour */ .sd-fill--pink { background: #fe8bac; } .sd-fill--coral { background: var(--color-coral); } .sd-fill--peach { background: var(--color-peach); } .sd-fill--blue { background: var(--color-blue); } .sd-fill--yellow { background: #f7c460; } .sd-fill--green { background: var(--color-green); } .sd-fill--purple { background: var(--color-purple); } .sd-fill--neutral{ background: var(--color-line); } /* Small icon buttons */ .sd-iconbtn { width: 1.85rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: none; cursor: pointer; background: transparent; color: #5c5c5c; transition: transform var(--dur-micro) var(--ease-out), background var(--dur-micro); } .sd-iconbtn:hover { transform: scale(1.1); background: var(--color-neutral); } /* Brutalist "+" button */ .sd-plus { width: 1.9rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: var(--border-brutal); box-shadow: var(--shadow-brutal); color: #5c5c5c; transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); } .sd-plus:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 0 #5c5c5c; } .sd-plus:active { transform: translate(0,0); box-shadow: 2px 2px 0 0 #5c5c5c; } .sd-plus--pink { background: #fe8bac; } .sd-plus--coral { background: var(--color-coral); } .sd-plus--peach { background: var(--color-peach); } .sd-plus--blue { background: var(--color-blue); } .sd-plus--yellow { background: #f7c460; } .sd-plus--green { background: var(--color-green); } .sd-plus--purple { background: var(--color-purple); } .sd-plus--neutral{ background: var(--color-neutral); } .sd-addcard { width: 100%; justify-content: center; margin-top: var(--space-2); background: var(--color-surface); border: var(--border-brutal); } /* ========================================================================= LEFT COLUMN — team updates ========================================================================= */ .sd-chips { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; justify-content: flex-end; } .sd-chip { padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); border: 1px solid transparent; background: var(--color-surface); color: var(--color-ink-mute); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background var(--dur-micro), color var(--dur-micro); } .sd-chip--active { background: #fe8bac; color: #5c5c5c; border-color: #5c5c5c; font-weight: 700; } /* Update bubbles */ /* scrollable feed — bounded, and viewport-responsive so the whole page fits without a page scroll on normal desktop heights */ .sd-updates-scroll { max-height: clamp(8rem, calc(100vh - 30rem), 21rem); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: 3px 6px 2px 2px; /* room for the brutal shadow + scrollbar */ margin-bottom: var(--space-4); scrollbar-width: thin; scrollbar-color: var(--color-line) transparent; } .sd-updates-scroll::-webkit-scrollbar { width: 8px; } .sd-updates-scroll::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 999px; } .sd-update { position: relative; width: 85%; /* same width for everyone — only the side differs */ margin-inline-end: auto; /* others → anchored to the RIGHT (RTL start) */ background: var(--color-surface); border: var(--border-brutal); box-shadow: var(--shadow-brutal); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: calc(var(--space-4) + 0.5rem); } /* my own updates → same width & colour, just anchored to the LEFT */ .sd-update--mine { margin-inline-end: 0; margin-inline-start: auto; } .sd-update::after { /* tail — others: bottom-right */ content: ""; position: absolute; bottom: -0.55rem; right: 1.75rem; left: auto; width: 1rem; height: 1rem; background: var(--color-surface); border-right: 1.5px solid #5c5c5c; border-bottom: 1.5px solid #5c5c5c; transform: rotate(45deg); } .sd-update--mine::after { /* tail — same symmetric chevron, just moved to the left */ right: auto; left: 1.75rem; } .sd-update__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); } .sd-update__author { display: flex; align-items: center; gap: var(--space-2); } .sd-update__avatar { width: 1.95rem; aspect-ratio: 1; border-radius: 50%; object-fit: cover; } .sd-update__name { font-size: var(--text-sm); font-weight: 700; } .sd-update__badge { font-size: var(--text-xs); font-weight: 600; padding: 0.15rem var(--space-2); border-radius: var(--radius-pill); background: var(--color-neutral); color: #5c5c5c; } .sd-update__meta { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-ink-mute); font-family: var(--font-num); } .sd-update__body { font-size: var(--text-sm); line-height: 1.55; text-align: right; } .sd-update--empty { width: 100%; box-shadow: none; border-style: dashed; } /* Voice input — FIXED to the bottom-left, always visible (sits above the bottom nav) */ .sd-voice { position: fixed; inset-block-end: var(--space-4); /* down at the bottom, same level as the nav */ left: clamp(var(--space-4), 5vw, 4.25rem); width: min(20rem, 32vw); z-index: 41; } /* Collapse to ONLY the mic button as soon as the full bar would start crowding the bottom nav — keep the waveform pill only on wide screens (> 1280px) that clearly have room. After the base rule so it wins. */ @media (max-width: 80rem) { .sd-voice { left: var(--space-4); right: auto; width: auto; } .sd-voicebar { background: transparent; border: none; box-shadow: none; padding: 0; gap: 0; } .sd-voicebar__wave { display: none; } /* keep the recording preview usable even though the bar itself collapsed */ .sd-voice-preview { inset-inline-start: 0; inset-inline-end: auto; width: min(15rem, 75vw); } } @media (max-width: 40rem) { /* On phones the nav moves to a top-right hamburger, so the bottom-left is free — drop the mic to the bottom corner so it no longer overlaps the cards above it (was lifted +4.5rem for a bottom nav that isn't here). */ .sd-voice { inset-block-end: var(--space-4); } } .sd-voicebar { display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface); border: var(--border-brutal); border-radius: var(--radius-xl); padding: var(--space-2) var(--space-3); } .sd-voicebar__wave { flex: 1; height: 2rem; color: #5c5c5c; opacity: .85; overflow: hidden; } .sd-voicebar__wave svg { width: 100%; height: 100%; display: block; } .sd-mic { width: clamp(3rem, 2.5rem + 1.5vw, 3.75rem); aspect-ratio: 1; border-radius: 50%; flex-shrink: 0; border: var(--border-brutal); background: #fe8bac; color: #5c5c5c; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-brutal); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); } .sd-mic:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 #5c5c5c; } .sd-mic:active { transform: translate(0, 0); box-shadow: 2px 2px 0 0 #5c5c5c; } .recording-pulse { animation: sd-pulse 1s ease-in-out infinite; } @keyframes sd-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } } .sd-voice-preview { position: absolute; inset-block-end: calc(100% + var(--space-2)); inset-inline: 0; z-index: 31; background: var(--color-surface); border: var(--border-brutal); border-radius: var(--radius-lg); box-shadow: var(--shadow-brutal); padding: var(--space-4); } .sd-voice-preview.hidden { display: none; } /* ========================================================================= BOTTOM FLOATING NAV ========================================================================= */ .sd-nav { position: fixed; inset-block-end: var(--space-4); inset-inline: 0; margin-inline: auto; width: max-content; max-width: calc(100vw - var(--space-5)); display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); background: var(--color-surface); border: var(--border-brutal); border-radius: var(--radius-pill); box-shadow: var(--shadow-brutal); z-index: 20; } /* items: icon on top, label below; muted grey when inactive */ .sd-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-mute); text-decoration: none; border: none; background: none; cursor: pointer; font-family: inherit; min-width: 3.75rem; white-space: nowrap; transition: color var(--dur-micro); } .sd-nav__item svg { height: 1.5rem; width: auto; display: block; } .sd-nav__item--active svg { height: 1.85rem; } /* the graduation cap reads a touch larger in the circle */ .sd-nav__item:hover { color: #5c5c5c; } /* active: pink filled circle, black icon+label, protruding slightly */ .sd-nav__item--active { background: #fe8bac; color: #5c5c5c; border: var(--border-brutal); border-radius: 50%; width: 5.25rem; height: 5.25rem; /* bigger than the bar's frame — bulges out top & bottom */ min-width: 0; margin-block: -0.9rem; /* pulled in so the bar itself doesn't grow taller */ gap: 0.1rem; flex-shrink: 0; } .sd-nav__item--active:hover { color: #5c5c5c; } /* hamburger — hidden on desktop, becomes the mobile nav toggle */ .sd-nav__burger { display: none; width: 3rem; height: 3rem; flex-shrink: 0; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; color: #5c5c5c; border-radius: var(--radius-pill); } .sd-nav__burger-close { display: none; } .sd-nav.is-open .sd-nav__burger-open { display: none; } .sd-nav.is-open .sd-nav__burger-close { display: block; } /* ===== Phone: collapse the whole nav into a hamburger that opens a menu ===== */ @media (max-width: 40rem) { .sd-nav { inset-block-start: var(--space-4); /* top-right corner — where hamburgers live */ inset-block-end: auto; right: var(--space-4); left: auto; transform: none; margin-inline: 0; z-index: 45; /* above the topbar */ flex-direction: column; /* burger on top, menu drops down */ align-items: stretch; gap: var(--space-1); width: max-content; max-width: calc(100vw - var(--space-5)); padding: var(--space-2); border-radius: var(--radius-xl); /* rounded card, not an oval */ } .sd-nav__burger { display: flex; order: -1; align-self: flex-start; } /* collapsed: only the burger shows */ .sd-nav__item { display: none; } /* open: items become full-width horizontal menu rows above the burger */ .sd-nav.is-open { min-width: 12rem; } .sd-nav.is-open .sd-nav__item { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--space-3); width: 100%; height: auto; min-width: 0; aspect-ratio: auto; margin: 0; padding: var(--space-2) var(--space-4); border: none; border-radius: var(--radius-lg); font-size: var(--text-sm); } .sd-nav.is-open .sd-nav__item svg { width: 1.35rem; height: 1.35rem; } .sd-nav.is-open .sd-nav__item--active { background: #fe8bac; color: #5c5c5c; border: var(--border-brutal); } } /* ========================================================================= SCROLLBARS — replace main.css's old purple→pink gradient with the warm palette, scoped to this page (document scrollbar via .sd-html root class, plus the inner scroll containers inside .sd). ========================================================================= */ /* kill the app's light-purple body background on this page (it showed through the scrollbar track) */ body.sd-page { background: #f9f5f2 !important; } html.sd-html { scrollbar-width: thin; scrollbar-color: #d6d3d1 #f9f5f2; } html.sd-html::-webkit-scrollbar { width: 10px; height: 10px; } html.sd-html::-webkit-scrollbar-track { background: #f9f5f2; } html.sd-html::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 999px; border: 2px solid #f9f5f2; background-clip: padding-box; } html.sd-html::-webkit-scrollbar-thumb:hover { background: #a8a29e; } .sd { scrollbar-width: thin; scrollbar-color: #d6d3d1 transparent; } .sd ::-webkit-scrollbar { width: 8px; height: 8px; } .sd ::-webkit-scrollbar-track { background: transparent; } .sd ::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 999px; } .sd ::-webkit-scrollbar-thumb:hover { background: #a8a29e; } /* ========================================================================= GUARDIANSHIP CARD MODALS — colored card per type (Figma), body-level (outside .sd scope, so explicit values). allergy=pink · medication=grey · plan=yellow. ========================================================================= */ .sd-gcard { position: relative; width: min(21rem, 100%); max-height: 86vh; overflow-y: auto; border: 1.5px solid #5c5c5c; box-shadow: 4px 4px 0 0 #5c5c5c; border-radius: 1.875rem; /* 30px */ padding: 1.6rem 1.4rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; direction: rtl; font-family: 'Heebo', sans-serif; scrollbar-width: thin; scrollbar-color: rgba(29,29,29,.25) transparent; } .sd-gcard::-webkit-scrollbar { width: 8px; } .sd-gcard::-webkit-scrollbar-thumb { background: rgba(29,29,29,.25); border-radius: 999px; } .sd-gcard--pink { background: #fe8bac; } .sd-gcard--neutral { background: #efeeec; } .sd-gcard--yellow { background: #f7c460; } .sd-gcard__close { position: absolute; inset-block-start: 0.85rem; inset-inline-start: 1rem; width: 1.75rem; height: 1.75rem; border: none; background: none; cursor: pointer; font-size: 1.5rem; line-height: 1; color: #5c5c5c; } .sd-gcard__icon { width: 3.9rem; height: 3.9rem; border-radius: 50%; flex-shrink: 0; background: #fafaf9; display: grid; place-items: center; } .sd-gcard__icon svg { height: 1.9rem; width: auto; display: block; } .sd-gcard__title { text-align: center; font-size: 1.05rem; font-weight: 800; color: #5c5c5c; line-height: 1.3; } .sd-gcard__body { align-self: stretch; display: flex; flex-direction: column; gap: 0.35rem; } .sd-gcard__summary { text-align: right; font-size: 0.95rem; font-weight: 700; color: #5c5c5c; line-height: 1.4; } .sd-gcard__section { text-align: right; padding: 0.55rem 0.15rem; } .sd-gcard__section h4 { font-size: 0.95rem; font-weight: 800; color: #5c5c5c; margin-bottom: 0.15rem; } .sd-gcard__section p { font-size: 0.85rem; line-height: 1.55; color: #5c5c5c; white-space: pre-line; } .sd-gcard__empty { text-align: center; color: #6b6660; font-size: 0.9rem; padding: 0.4rem 0; } /* inline edit mode */ .sd-gcard__edit-btn { position: absolute; inset-block-start: 0.85rem; inset-inline-end: 1rem; width: 1.9rem; height: 1.9rem; border: none; background: none; cursor: pointer; display: grid; place-items: center; color: #5c5c5c; border-radius: 50%; transition: background .15s ease; } .sd-gcard__edit-btn:hover { background: rgba(29,29,29,.08); } .sd-gcard__edit-btn svg { width: 1.1rem; height: 1.1rem; } .sd-gcard__form { align-self: stretch; display: flex; flex-direction: column; gap: 0.45rem; } .sd-gcard__elabel { text-align: right; font-size: 0.85rem; font-weight: 800; color: #5c5c5c; } .sd-gcard__input { width: 100%; border: 1.5px solid #5c5c5c; border-radius: 0.9rem; padding: 0.55rem 0.75rem; font-family: inherit; font-size: 0.9rem; direction: rtl; text-align: right; background: #fff; resize: vertical; outline: none; line-height: 1.5; } .sd-gcard__input:focus { box-shadow: 2px 2px 0 0 #5c5c5c; } .sd-gcard__eactions { display: flex; gap: 0.5rem; margin-top: 0.35rem; } .sd-gcard__save { flex: 1; border: 1.5px solid #5c5c5c; border-radius: 0.9rem; box-shadow: 3px 3px 0 0 #5c5c5c; background: #fff; padding: 0.6rem; font-weight: 800; cursor: pointer; font-family: inherit; font-size: 0.95rem; transition: transform .15s ease, box-shadow .15s ease; } .sd-gcard__save:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 0 #5c5c5c; } .sd-gcard__cancel { border: 1.5px solid #5c5c5c; border-radius: 0.9rem; background: transparent; padding: 0.6rem 0.9rem; font-weight: 700; cursor: pointer; font-family: inherit; } /* schedule (מה עכשיו) inline edit */ .sd-now__edit-btn { width: 1.6rem; height: 1.6rem; border: none; background: none; cursor: pointer; display: grid; place-items: center; color: #5c5c5c; flex-shrink: 0; } .sd-now__edit-btn svg { width: 1rem; height: 1rem; } .sd-now__form { direction: rtl; display: flex; flex-direction: column; gap: 0.4rem; padding-top: var(--space-1); } /* each row wraps: activity on its own line, then [start] [end] … [delete] */ .sd-sched-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; padding: 0.4rem 0.5rem; border-radius: 0.8rem; background: rgba(29,29,29,.035); } .sd-sched-act { flex: 1 1 100%; min-width: 0; border: 1.5px solid #5c5c5c; border-radius: 0.6rem; padding: 0.4rem 0.55rem; font-family: inherit; font-size: 0.88rem; direction: rtl; text-align: right; background: #fff; outline: none; } .sd-sched-time { flex: 0 0 auto; width: 5rem; border: 1.5px solid #5c5c5c; border-radius: 0.6rem; padding: 0.3rem; font-family: var(--font-num); font-size: 0.8rem; direction: ltr; text-align: center; background: #fff; outline: none; } .sd-sched-del { flex: 0 0 auto; margin-inline-start: auto; width: 1.7rem; height: 1.7rem; border: none; background: none; cursor: pointer; font-size: 1.25rem; line-height: 1; color: #b23b34; } .sd-sched-add { align-self: flex-start; border: 1.5px dashed #5c5c5c; border-radius: 0.7rem; background: transparent; padding: 0.4rem 0.8rem; font-weight: 700; font-size: 0.82rem; cursor: pointer; font-family: inherit; margin-top: 0.1rem; } .sd-now__eactions { display: flex; gap: 0.5rem; margin-top: 0.4rem; } /* personal details — inline contacts edit */ .sd-details__form { padding: 0 var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: 0.4rem; } .sd-details__elabel { text-align: right; font-size: 0.85rem; font-weight: 800; color: #5c5c5c; } .sd-details__select, .sd-details__einput { width: 100%; border: 1.5px solid #5c5c5c; border-radius: 0.7rem; padding: 0.45rem 0.6rem; font-family: inherit; font-size: 0.88rem; direction: rtl; text-align: right; background: #fff; outline: none; } .sd-details__select:focus, .sd-details__einput:focus { box-shadow: 2px 2px 0 0 #5c5c5c; } .sd-details__ehint { text-align: right; font-size: 0.9rem; font-weight: 800; color: #5c5c5c; margin-top: 0.35rem; } .sd-details__ehint span { font-weight: 500; font-size: 0.72rem; color: var(--color-ink-mute); } /* one row per contact: name (right) · phone (left) · delete — no wrapping */ .sd-contact-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.4rem; padding: 0.4rem 0.5rem; border-radius: 0.8rem; background: rgba(29,29,29,.035); } .sd-contact-name { flex: 1.3 1 0; min-width: 0; border: 1.5px solid #5c5c5c; border-radius: 0.6rem; padding: 0.4rem 0.55rem; font-family: inherit; font-size: 0.88rem; direction: rtl; text-align: right; background: #fff; outline: none; } .sd-contact-phone { flex: 1 1 0; min-width: 0; border: 1.5px solid #5c5c5c; border-radius: 0.6rem; padding: 0.35rem 0.5rem; font-family: var(--font-num); font-size: 0.82rem; direction: ltr; text-align: left; background: #fff; outline: none; } /* ========================================================================= LARGE PHONE + TABLET (30–64rem): profile (right) beside the details column (left); goals + updates share the row below → a balanced 2×2. Small phones (<30rem) keep the single column; wide desktop (>64rem) keeps the 3-column layout. Placed last so it overrides the mobile/tablet blocks above in the overlapping range. Uses `display:contents` on .sd__body so its columns join .sd's grid — no HTML change needed. ========================================================================= */ @media (min-width: 30rem) and (max-width: 64rem) { /* Named areas are deterministic (auto-placement fought the columns' leftover grid-area names). In RTL the FIRST area in each row string is the RIGHT one, so "profile info" = profile right, info left. Scoped to .sdp (student_detail.html only, see class on its root .sd div): this grid + these area names are specific to that page's section structure. A bare `.sd` selector here would ALSO hijack every other page that shares the .sd tokens/component class (diary, class board, classroom board, student report all render a plain `.sd` root) — their unrelated content has no grid-area assignment, so it would get silently auto-placed into a single ~half-width cell instead of using the page's full width, at exactly this 480–1024px iPad-portrait range. */ .sd.sdp { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "topbar topbar" "profile info" "guard guard" "clinician updates"; gap: clamp(var(--space-3), 2.5vw, var(--space-5)); align-items: start; } .sd__topbar { grid-area: topbar; } .sd__body { display: contents; } .sd__profile { grid-area: profile; margin-bottom: 0; } /* right */ /* promote the info column's parts into the grid so the guardianship cards can leave the narrow left column and become a full-width band below */ .sd__col-info { display: contents; } .sd-info-main { grid-area: info; } /* left: title + personal details */ .sd-guard-grid { grid-area: guard; } /* full-width row under the two cards */ .sd__col-clinician { grid-area: clinician; } /* right, row below */ .sd__col-updates { grid-area: updates; } /* left, row below */ /* profile is a narrow column now → stack its parts vertically, and put the action buttons back to full-width stacked (a row wouldn't fit here) */ .sd__profile { flex-direction: column; text-align: right; } .sd__profile-identity { justify-content: flex-start; } .sd__now, .sd-now { width: 100%; } .sd__profile-actions { flex-direction: column; width: 100%; align-items: stretch; gap: var(--space-3); } .sd-action-btn { flex: none; width: 100%; justify-content: space-between; padding-inline: var(--space-5); } }