/* ———————————————————————————————————————————————————————————— majors.css — the admission-requirements register. Loaded AFTER course.css and room.css. course.css brings the masthead, the crumb, the answer-sheet paper, .facts and the footer; room.css brings the register grammar (.reg-head, .lv-step, .si-*, .reg-ask, .title-block). Nothing here restyles any of that. The body carries NO sheet-plan class on purpose: this page keeps the answer-sheet lattice, because its subject is what the answer sheet buys you. ONE IDEA: the same degree is eleven different doors. The signature is the threshold ladder — every psychometric floor as a measured bar on one ruled list — and the three institutions that refuse the scale (a sechem, a per-cycle number, an open door) get rows that SAY so instead of faking a bar. Everything after the ladder is a register: ruled rows that open into the full gate table, one per institution, sources attached. ———————————————————————————————————————————————————————————— */ /* ———————————————————————————————————————————————————————————— THE SLIP course.css prints every page on the answer sheet. Right for a course page; wrong here — this is the densest sheet on the site, and on a phone the bubble marks cross the reading column at half strength, which under a data table reads as dirt. The exam-rooms register re-ruled its paper for the same reason; this page goes further: the stock is CLEAN. Nothing sits behind text, at any width. What identifies the paper instead is the subject's own artifact — the official form with a tear-off stub, the strip the institution keeps when you are admitted. Two layers on the pseudo-elements course.css already owns: ::before is the stub, a whisper of tone at each inline edge, and ::after is the perforation, one column of punched holes where the stub tears. Full height, no fade: a tear line runs the whole slip. The stub never reaches the column — the masthead and every line of text live inside the wrap, so the strips can hold the margins at any viewport. --stub is the tear line's distance from the edge: a 6px breath on a phone, growing into the real margin on a desk. One number drives both layers. */ /* ——— the stock: chart paper ——— A slip with nothing printed on it is a blank field, and this page has a lot of field — wide margins on a desk, long quiet runs between sections. The plate at the top of the degree sheet already establishes what kind of drawing this section is: a shore, and water read as contours. So the paper is the rest of that chart — long, slack contour lines running the whole sheet, each one inked twice the way every line in the plate is, so the texture reads as DRAWN rather than generated. Why contours and not a grid: a ruled grid puts horizontal hairlines behind running text, which the eye catches every time as a second, misaligned leading (room.css makes the same point and confines its horizontals to the margins). A slack curve is never parallel to a baseline for long enough to be mistaken for one, so it can cross the reading column at any width — which matters, because on a phone there IS no margin to hide in. Kept at 3–5% ink: at that weight it is a tone the eye reads before it reads a pattern. The stub strips on ::before sit OVER this, so the margins come out denser than the column for free — no second mask, and the page still opens up exactly where the reading happens. */ body.sheet-majors{ --stub: clamp(6px, calc((100vw - 884px) / 2), 46vw); /* the dawn stays — the brand's one light. What goes is the ≥1024px desk falloff course.css adds: the stub strips already hold the edges, and two tones in the same margin is a smudge. */ background-image: radial-gradient(circle 560px at 88% -130px, rgba(224,86,143,.10), rgba(224,86,143,0) 66%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='320'%3E%3Cg fill='none' stroke='%230c0a09' stroke-linecap='round'%3E%3Cpath d='M0,40 C105,25 315,55 420,40 L420,120 C315,132 105,108 0,120 Z' fill='%230c0a09' fill-opacity='.016' stroke='none'/%3E%3Cpath d='M0,200 C105,190 315,210 420,200 L420,280 C315,293 105,267 0,280 Z' fill='%230c0a09' fill-opacity='.016' stroke='none'/%3E%3Cpath d='M0,42 C105,27 315,57 420,42' stroke-opacity='.03' stroke-width='1'/%3E%3Cpath d='M0,40 C105,25 315,55 420,40' stroke-opacity='.062' stroke-width='1.05'/%3E%3Cpath d='M0,122 C105,110 315,134 420,122' stroke-opacity='.03' stroke-width='1'/%3E%3Cpath d='M0,120 C105,108 315,132 420,120' stroke-opacity='.062' stroke-width='1.05'/%3E%3Cpath d='M0,202 C105,192 315,212 420,202' stroke-opacity='.03' stroke-width='1'/%3E%3Cpath d='M0,200 C105,190 315,210 420,200' stroke-opacity='.062' stroke-width='1.05'/%3E%3Cpath d='M0,282 C105,269 315,295 420,282' stroke-opacity='.03' stroke-width='1'/%3E%3Cpath d='M0,280 C105,267 315,293 420,280' stroke-opacity='.062' stroke-width='1.05'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat, repeat; background-position: center top, center top; background-size: 100% 620px, 420px 320px; } /* ::before — the stub as a PRINTED thing, three plies per side, top first: 1. the crease: a soft fold falling from the tear line into the stub — the strip lifts slightly where it is about to tear. This is the layer a phone keeps: at 6px the stub is all crease, and the edge reads as a bound edge rather than a stripe. 2. the office ruling: the fine writing lines a stub is printed with. Held in --slip-rule, transparent until the stub is wide enough to be written on (≥1024px) — ruling on a 6px strip is lint. 3. the tone: the stub's own stock, a shade heavier than the sheet. */ body.sheet-majors{ --slip-rule: transparent; } body.sheet-majors::before{ background: linear-gradient(to left, rgba(12,10,9,.06), rgba(12,10,9,0) 11px) left top / var(--stub) 100% no-repeat, linear-gradient(to right, rgba(12,10,9,.06), rgba(12,10,9,0) 11px) right top / var(--stub) 100% no-repeat, repeating-linear-gradient(to bottom, var(--slip-rule) 0 1px, transparent 1px 28px) left top / var(--stub) 100% no-repeat, repeating-linear-gradient(to bottom, var(--slip-rule) 0 1px, transparent 1px 28px) right top / var(--stub) 100% no-repeat, linear-gradient(rgba(12,10,9,.04), rgba(12,10,9,.04)) left top / var(--stub) 100% no-repeat, linear-gradient(rgba(12,10,9,.04), rgba(12,10,9,.04)) right top / var(--stub) 100% no-repeat; -webkit-mask-image: none; mask-image: none; } /* ::after — the perforation, and the dawn caught in it: the brand's one light enters at the head of the page, and where it crosses the tear it catches the edge — a 1px warm thread over the first hand of holes, gone by the time the reading starts. The one flourish a phone gets in full. */ body.sheet-majors::after{ background: /* the thread rides the START tear only — the dawn is one light, entering at the start corner; a matching glow on the far edge would be light from nowhere */ linear-gradient(to bottom, rgba(224,86,143,.32), rgba(224,86,143,0)) right var(--stub) top / 1px 340px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='13'%3E%3Ccircle cx='2.5' cy='6.5' r='1.1' fill='%230c0a09' fill-opacity='.16'/%3E%3C/svg%3E") left var(--stub) top / 5px 13px repeat-y, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='13'%3E%3Ccircle cx='2.5' cy='6.5' r='1.1' fill='%230c0a09' fill-opacity='.16'/%3E%3C/svg%3E") right var(--stub) top / 5px 13px repeat-y; opacity: 1; /* course.css halves the marks below 1024px; the perforation is not a mark */ -webkit-mask-image: none; mask-image: none; } /* the ruling arrives with the width to carry it — in both rooms */ @media (min-width: 1024px){ body.sheet-majors{ --slip-rule: rgba(12,10,9,.045); } :root[data-room="dark"] body.sheet-majors{ --slip-rule: rgba(250,248,247,.055); } } /* the slip, in the dark: stub and ruling become paper at low alpha, the crease becomes a scored highlight rather than a shadow (a shadow cannot fall on ink), the holes are scored instead of punched, and the dawn's thread stays — pink-light is the one colour that reads in both rooms. */ :root[data-room="dark"] body.sheet-majors{ background-image: radial-gradient(circle 560px at 88% -130px, rgba(224,86,143,.09), rgba(224,86,143,0) 66%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='320'%3E%3Cg fill='none' stroke='%23faf8f7' stroke-linecap='round'%3E%3Cpath d='M0,40 C105,25 315,55 420,40 L420,120 C315,132 105,108 0,120 Z' fill='%23faf8f7' fill-opacity='.014' stroke='none'/%3E%3Cpath d='M0,200 C105,190 315,210 420,200 L420,280 C315,293 105,267 0,280 Z' fill='%23faf8f7' fill-opacity='.014' stroke='none'/%3E%3Cpath d='M0,42 C105,27 315,57 420,42' stroke-opacity='.026' stroke-width='1'/%3E%3Cpath d='M0,40 C105,25 315,55 420,40' stroke-opacity='.055' stroke-width='1.05'/%3E%3Cpath d='M0,122 C105,110 315,134 420,122' stroke-opacity='.026' stroke-width='1'/%3E%3Cpath d='M0,120 C105,108 315,132 420,120' stroke-opacity='.055' stroke-width='1.05'/%3E%3Cpath d='M0,202 C105,192 315,212 420,202' stroke-opacity='.026' stroke-width='1'/%3E%3Cpath d='M0,200 C105,190 315,210 420,200' stroke-opacity='.055' stroke-width='1.05'/%3E%3Cpath d='M0,282 C105,269 315,295 420,282' stroke-opacity='.026' stroke-width='1'/%3E%3Cpath d='M0,280 C105,267 315,293 420,280' stroke-opacity='.055' stroke-width='1.05'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat, repeat; background-position: center top, center top; background-size: 100% 620px, 420px 320px; } :root[data-room="dark"] body.sheet-majors::before{ background: linear-gradient(to left, rgba(250,248,247,.07), rgba(250,248,247,0) 11px) left top / var(--stub) 100% no-repeat, linear-gradient(to right, rgba(250,248,247,.07), rgba(250,248,247,0) 11px) right top / var(--stub) 100% no-repeat, repeating-linear-gradient(to bottom, var(--slip-rule) 0 1px, transparent 1px 28px) left top / var(--stub) 100% no-repeat, repeating-linear-gradient(to bottom, var(--slip-rule) 0 1px, transparent 1px 28px) right top / var(--stub) 100% no-repeat, linear-gradient(rgba(250,248,247,.05), rgba(250,248,247,.05)) left top / var(--stub) 100% no-repeat, linear-gradient(rgba(250,248,247,.05), rgba(250,248,247,.05)) right top / var(--stub) 100% no-repeat; } :root[data-room="dark"] body.sheet-majors::after{ background: linear-gradient(to bottom, rgba(224,86,143,.4), rgba(224,86,143,0)) right var(--stub) top / 1px 340px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='13'%3E%3Ccircle cx='2.5' cy='6.5' r='1.1' fill='%23faf8f7' fill-opacity='.13'/%3E%3C/svg%3E") left var(--stub) top / 5px 13px repeat-y, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='13'%3E%3Ccircle cx='2.5' cy='6.5' r='1.1' fill='%23faf8f7' fill-opacity='.13'/%3E%3C/svg%3E") right var(--stub) top / 5px 13px repeat-y; } /* ———————————————————————————————————————————————————————————— ONE NAME, TWO SCRIPTS «التخنيون» is what a student calls it at home; «הטכניון» is what the road sign, the registration form, the official page and half their friends call it — and for a lot of our readers the Hebrew is the name they would recognise FIRST. The same is true of the degrees: nobody applies to a «هندسة برمجيات» form, they apply to «הנדסת תוכנה». So the two names are one lockup at one weight, not a name with a translation whispered underneath. The reason it read as subordinate was half typographic and half technical: it was set small and muted, AND neither Baloo nor Readex draws Hebrew at all, so every Hebrew name fell through to whatever system face the device happened to have. Rubik is already loaded on every page here for the numerals, and unlike the other two it is a real Hebrew typeface — so the Hebrew now has a drawn face of its own, in the house's own voice. They stay stacked rather than running inline: institution names get long («המכללה האקדמית להנדסה סמי שמעון»), and two scripts on one line would wrap into a different shape on every row. Stacked and equal, a reader scanning for the Hebrew scans one steady column. Set a hair smaller than the Arabic because Rubik's Hebrew rides taller at the same px — the pair is optically equal, which is what «same level» actually means on the page. */ .sheet-majors .si-name i, .sheet-majors .mj-name i{ font-family:'Rubik', system-ui, sans-serif; font-weight:500; font-size:.88rem; line-height:1.6; color: var(--fg-soft); margin-top: 1px; } .sheet-majors .si-row.on .si-name i, .sheet-majors .si-row > a:hover .si-name i{ color: var(--fg-soft); } /* the display lockups (.mh-he, .ih-he) take the same treatment where they are defined, further down — a co-title, not a caption. */ /* Hebrew loose in Arabic prose. Not a name this time but a TERM — יעלנט, אמירנט, סכם, בסיסי — the string the student will meet on the institution's own site, in a Latin/Hebrew alphabet an Arabic reader can match by shape without reading it. We write the Arabic first and the Hebrew after: the sentence stays Arabic, the term stays findable. Transliterating it into Arabic letters instead («طروم-أساسيّ») helps nobody — it is neither a word they can look up nor a string they can recognise on a page. Rubik is the only Hebrew face the house loads; without this the browser falls back to a system Hebrew and the term reads as a different voice. */ .sheet-majors [lang="he"]{ font-family:'Rubik', system-ui, sans-serif; font-weight:500; font-style:normal; letter-spacing:0; } /* inline, riding inside a heading or a label: a half-step quieter and smaller, so it never competes with the Arabic it glosses. */ .sheet-majors .lv-he, .sheet-majors .gates > li > span i, .sheet-majors .gates em i, .sheet-majors .rung i, .sheet-majors dd i{ font-size:.88em; color: var(--fg-mute); } .sheet-majors .lv-he{ color: var(--fg-soft); } .sheet-majors .lv-note b[lang="he"], .sheet-majors .formula b[lang="he"]{ font-weight:600; color: var(--fg-soft); } /* ———————————————————————————————————————————————————————————— THE PLATE — the doors, plotted A register can tell you eleven institutions teach this degree. It cannot tell you that two of them are within driving distance of home and the rest are a rented room in another city — and for our reader that is often the deciding fact, before any threshold. So it gets drawn. What is drawn is only what the page is about: the Mediterranean as a datum, two inland waters as landmarks, and a pin per place. No borders — partly because a boundary line would be a political claim this page has no business making, and partly because it is simply how someone plots sites: you draw the datum you measure from and the points you are placing, and you leave out everything you are not talking about. The hand is deliberate. Every line is inked twice — a faint first pass and a firmer second one a hair off it — because a drawn line never lands twice in the same place, and that doubling is most of what the eye reads as «by hand». The pins are rings that do not quite close. Nothing here animates. ———————————————————————————————————————————————————————————— */ /* THE LATITUDE STRIP. The plate this replaces drew a whole country — coast, two lakes, seven leader lines, a north arrow, a scale bar — to deliver one sentence: three of the eleven doors are in the north and the rest mean moving out. That is a great deal of drawing for one finding, and on a phone it took a screen to itself. The finding lives on ONE axis. The country is roughly 470km tall and 110km wide, and nobody moves to Tel Aviv because it is west. So the map folds to its latitude: a single rule, a ring per institution at its city's true height. Three rings, a long empty stretch, then eight bunched below — and the emptiness is drawn to scale, which is the one thing a list of eleven names can never show. Beside the caption rather than above it: a narrow column and a paragraph read as an aside. The same drawing full-width would be a plate again. */ .geo{ margin: 30px 0 0; padding: 24px 0; border-block: 1px solid var(--line); display:flex; align-items:center; gap: clamp(18px, 3.4vw, 38px); } .geo svg{ flex:none; width:156px; height:auto; overflow:visible; } .geo figcaption{ margin:0; font-size:.84rem; line-height:1.95; color: var(--fg-mute); max-width: 30em; } .geo figcaption b{ font-weight:600; color: var(--fg-soft); } /* the place name. The RING holds the true latitude; two of these labels are nudged a couple of units apart so Haifa and the Jordan Valley — 10km and 13 units apart — do not set on top of each other. */ .geo-lb{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:11.5px; fill: var(--fg); direction:rtl; } /* the two ends of the axis. They have to be legible or the column is just a line with dots on it — they are the only thing that says «this is a map». */ .geo-mk{ font-family:'Readex Pro', sans-serif; font-weight:500; font-size:9.5px; fill: var(--fg-soft); direction:rtl; } @media (max-width: 620px){ .geo{ flex-direction:column; align-items:center; gap:18px; padding:20px 0; } .geo svg{ width:136px; } .geo figcaption{ text-align:center; max-width:38em; } } /* the second pass, and the first one under it */ .sk-ink{ fill:none; stroke: currentColor; stroke-opacity:.6; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; } .sk-under{ fill:none; stroke: currentColor; stroke-opacity:.22; stroke-width:1.2; stroke-linejoin:round; stroke-linecap:round; } .sk-pin{ color: var(--accent); } /* .sk-sea, .sk-lead, .sk-lb, .sk-sub and .sk-mark went with the map they were drawn for — the coastline's water strokes, the seven leader lines and the two-tier place lettering have no second use. The strip's own type lives up with .geo. What stays here is the HAND — two passes and the pin — because the institution key plans still draw with it. */ /* ———————————————————————————————————————————————————————————— THE PLATE OF INSTRUMENTS — the fourteen degrees A ruled list of fourteen names is a correct register and a poor menu. The student arriving here mostly knows the word already — «طب», «حقوق» — and the job is to let them find it without reading fourteen lines. So the names get faces: each degree drawn as the object its profession actually holds. A resistor zigzag for electrical, a truss for civil, a mortar and pestle for pharmacy, an ink blot for psychology. Not category symbols — TOOLS, which is why none of them needs a legend. Same hand as the map on the degree sheet: currentColor, round terminals, open ends. The map inks twice (a light pass under a firm one) because it is 470px wide and can carry it; at 46px a second pass only muddies, so the hand here has to come from the geometry — a line that stops just short, a symmetry that is not quite a mirror. THE ONE MOVE: thirteen are graphite, and the single degree whose sheet is actually finished is inked in dawn pink. Thirteen ways to say «قريبًا» in small type would be a wall; one coloured drawing in a field of grey is found before it is read. It is a status, not a measurement — the word is under it either way, so the ink is never the only thing carrying the fact. No cell boxes and no vertical rules: 4/5/5 across five columns leaves a ragged tail, and a ruled table with a hole in it reads as broken. A plate has margins, not cells. */ .plate{ margin: 20px 0 0; } /* five across, and the counts are 4/5/5 — so the medical and the social rows fill exactly and only the engineering row ends a cell short. auto-fill was worse: it put a single orphan under every group of five. auto-FIT was worse again — it stretches a four-item group to a different cell width than its neighbours, and the plate stops looking ruled. */ .plate-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 10px; } .plate-cell{ display:flex; flex-direction:column; align-items:center; text-align:center; padding: 16px 7px 14px; border-radius: 11px; text-decoration:none; color: var(--fg-soft); transition: background .18s var(--out); } .pl-ic{ display:block; width:54px; height:54px; color: var(--fg-mute); transition: transform .2s var(--out), color .18s var(--out); } .pl-ic svg{ display:block; width:100%; height:100%; overflow:visible; fill:none; stroke: currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; stroke-opacity:.78; } /* the few marks that are mass rather than line — an ear tip, a scale knob */ .pl-ic .sol{ fill: currentColor; stroke:none; fill-opacity:.78; } /* ink, as ink: the blot inside the head is the one filled shape on the plate */ .pl-ic .blot{ fill: currentColor; stroke:none; fill-opacity:.34; } /* the vertebrae read as stacked blocks only at double weight */ .pl-ic .thick{ stroke-width:3.8; } .pl-n{ display:block; margin-top: 10px; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:.88rem; line-height:1.4; color: var(--fg-soft); } .sheet-majors .pl-he{ display:block; margin-top: 1px; font-size:.71rem; line-height:1.45; color: var(--fg-mute); } .pl-st{ display:block; margin-top: 6px; font-style:normal; font-size:.69rem; line-height:1.5; color: var(--fg-mute); } /* the finished one */ .plate-cell.is-on .pl-ic{ color: var(--accent); } .plate-cell.is-on .pl-n{ font-weight:800; color: var(--fg); } .plate-cell.is-on .pl-st{ font-weight:600; color: var(--accent); } .plate-cell.is-on:hover, .plate-cell.is-on:focus-visible{ background: rgba(var(--accent-rgb),.065); } .plate-cell.is-on:hover .pl-ic{ transform: translateY(-3px); } .plate-cell.is-on:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } @media (max-width: 760px){ .plate-grid{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px){ .plate-grid{ grid-template-columns: repeat(2, 1fr); } .plate-cell{ padding: 14px 8px 13px; } .pl-ic{ width:48px; height:48px; } .pl-n{ margin-top:9px; font-size:.86rem; } } @media (prefers-reduced-motion: reduce){ .plate-cell.is-on:hover .pl-ic{ transform:none; } } /* ———————————————————————————————————————————————————————————— THE TWO DOORS One dataset, two ways to read it. A student either knows what they want to study and asks who will take them — a COMPARISON, eleven doors on a ladder — or knows where they want to go and asks what it costs: a RULEBOOK, one set of gates that holds for every degree the place teaches. Different questions, different page shapes, and both have to be real URLs or the whole section stops being findable. So they are drawn as what the word «tab» has always meant, exactly as the calculator draws its two exams: folder tabs standing on a rule, the open one rising a step and taking the card surface so it opens INTO the sheet below. The difference is that these are , not radios — each tab is a place, not a state. The count under each label is the honest coverage: no tab leads somewhere emptier than it admits. Each tab says the READER'S OWN SENTENCE — «بعرف شو بدّي أدرس» / «بعرف وين بدّي أدرس» — rather than naming a taxonomy. A student deciding between «حسب التخصّص» and «حسب المؤسّسة» has to translate two labels into their own situation before they can choose; a student reading «I know what I want to study» has already chosen by the time they finish the line. That is the whole trick, and it costs one short line per tab. The icons are not decoration and not a set bought off a shelf: each one is the destination page's own signature, drawn small. By-major opens on the threshold ladder, so its mark is three bars of different lengths. By- institution opens on a place, so its mark is the map's own pin — the ring that does not quite close. A reader who takes either door meets the mark again full size a screen later. */ .dir{ display:flex; align-items:flex-end; gap:8px; margin: 26px 0 0; border-bottom: 1px solid var(--line); } .dir a{ display:flex; align-items:flex-start; gap:9px; flex: 0 1 auto; min-width:0; border:1px solid var(--line); border-bottom:0; border-radius:12px 12px 0 0; margin-bottom:-1px; padding: 11px 17px 14px; text-decoration:none; color: var(--fg-mute); background: transparent; transition: color .18s var(--out), background-color .18s var(--out), padding-top .18s var(--out); } .dir a:hover{ color: var(--accent); } .dir a[aria-current="page"]{ background: var(--card); color: var(--fg); padding-top: 15px; } .dir-ic{ flex:none; width:21px; height:19px; margin-top:3px; color: var(--fg-mute); } .dir a:hover .dir-ic, .dir a[aria-current="page"] .dir-ic{ color: var(--accent); } .dir-t{ min-width:0; } .dir b{ display:block; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:1rem; line-height:1.45; color: inherit; } /* the reader's own sentence — the line that does the choosing */ .dir em{ display:block; font-style:normal; font-size:.82rem; line-height:1.55; color: var(--fg-soft); margin-top: 1px; } .dir a[aria-current="page"] em{ color: var(--fg-soft); } .dir i{ display:block; font-style:normal; font-size:.72rem; line-height:1.6; color: var(--fg-mute); margin-top:2px; } @media (max-width: 560px){ .dir{ gap:5px; } .dir a{ padding: 10px 11px 12px; gap:7px; } .dir-ic{ width:18px; height:16px; } .dir b{ font-size:.92rem; } .dir em{ font-size:.75rem; } /* the count is the first thing to go when the door gets narrow: the register below states it in the same breath */ .dir i{ display:none; } } /* ———————————————————————————————————————————————————————————— THE RULEBOOK — one institution, every degree The gates are the page. Yaelnet, the English floor, the bagrut minimums: an institution sets these once and they hold for medicine and law and software alike, which is exactly why nobody writes them down in Arabic — they belong to no single degree's page. Here they get the display scale the major sheets give a threshold, and each one carries the consequence of missing it, because that is the fact a student is actually asking for. A gate a place does not impose says so in words where its number would be — the same inversion the threshold ladder uses. */ /* the head carries a KEY PLAN — the same drawing as the major sheet's plate, zoomed out to one pin. It is the oldest habit in a drawing set: every sheet says where in the whole it belongs. Here it answers the question a student asks before any threshold — «is this near me, or is this rent?» */ .ih{ margin: 30px 0 0; padding-bottom: clamp(16px, 2.4vw, 24px); border-bottom: 1px solid var(--line); display:flex; align-items:flex-start; gap: clamp(14px, 3vw, 32px); } .ih-txt{ flex:1; min-width:0; } .ih-key{ margin:0; flex:none; width: clamp(66px, 10vw, 96px); } .ih-key svg{ display:block; width:100%; height:auto; } /* the key plan is drawn at about half the plate's size on screen, so its lines are set heavier here — a hairline that survives the reduction */ .ih-key .sk-ink{ stroke-width:2.4; stroke-opacity:.5; } .ih-key .sk-under{ stroke-width:1.8; stroke-opacity:.18; } .ih-key figcaption{ margin-top: 7px; text-align:center; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:.74rem; line-height:1.4; color: var(--fg-mute); } .ih-name{ margin:0; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; font-size: clamp(1.9rem, 1.4rem + 2.6vw, 3rem); line-height:1.3; letter-spacing:-.3px; color: var(--fg); } .ih-he{ display:block; margin-top: 4px; font-family:'Rubik', system-ui, sans-serif; font-weight:500; font-style:normal; letter-spacing:-.01em; font-size: clamp(1.05rem, .95rem + .55vw, 1.35rem); line-height:1.5; color: var(--fg-soft); } .ih-meta{ margin: 10px 0 0; display:flex; flex-wrap:wrap; gap: 4px 16px; font-size:.84rem; line-height:1.6; color: var(--fg-mute); } .ih-meta b{ font-weight:600; color: var(--fg-soft); } .ih-lede{ margin: 16px 0 0; max-width: 34em; line-height:1.9; } /* three gates is the shape: every institution's rulebook comes down to a language gate, an English gate and what the bagrut has to carry. The minimum track is sized so three fit the 820px column without wrapping a lone cell onto a row of its own — an orphan gate reads as a mistake. */ .gates{ margin: 26px 0 0; padding:0; list-style:none; display:grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); border-block: 1px solid var(--line); } .gates li{ padding: 20px 16px 22px; border-inline-start: 1px solid var(--line); } .gates li:first-child{ border-inline-start:0; padding-inline-start:0; } .gates b{ display:block; font-family:'Rubik', system-ui, sans-serif; font-weight:500; font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.7rem); line-height:1.15; letter-spacing:-.035em; color: var(--accent); } /* a gate the place does not impose: a word where the numeral was expected */ .gates b.word{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem); line-height:1.4; letter-spacing:0; } /* and the case where the value the place imposes IS a Hebrew term — an English level, «טרום בסיסי». Set in Rubik at 600, a step under the Arabic word: the two scripts have different optical weight at the same size and 800 Rubik would shout. Beats .gates b.word on specificity, which is the point. */ .sheet-majors .gates b.word.he{ font-family:'Rubik', system-ui, sans-serif; font-weight:600; font-size: clamp(1.12rem, .98rem + .7vw, 1.42rem); line-height:1.35; letter-spacing:-.01em; color: var(--accent); } /* the direct child ONLY — this is the label slot. Unscoped it also caught the that sets a numeral inside , turned it into a block and threw the figure onto a line of its own above its own unit. course.css documents the same trap in .facts; it is easy to walk into twice. */ .gates > li > span{ display:block; margin-top: 7px; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:.92rem; line-height:1.5; color: var(--fg); } .gates em{ display:block; margin-top: 4px; font-style:normal; font-size:.8rem; line-height:1.7; color: var(--fg-mute); } @media (max-width: 560px){ .gates li{ padding: 15px 13px 17px; border-inline-start:0; border-top: 1px solid var(--line); } .gates li:first-child{ border-top:0; } } /* the ladder a threshold opens onto: which score obliges which course. Two ruled columns of short rows — a band, then what it costs you. */ .rung{ margin: 20px 0 0; padding:0; list-style:none; max-width: 44em; } .rung li{ display:grid; grid-template-columns: 116px minmax(0,1fr); gap: 14px; padding-block: 9px 10px; border-top: 1px solid var(--line); font-size:.88rem; line-height:1.7; color: var(--fg-soft); } .rung li:first-child{ border-top:0; } .rung b{ font-family:'Rubik', system-ui, sans-serif; font-weight:500; font-size:.98rem; letter-spacing:-.01em; color: var(--fg); white-space:nowrap; } .rung b.word{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:.86rem; } @media (max-width: 460px){ .rung li{ grid-template-columns: 92px minmax(0,1fr); gap: 10px; } } /* the formula, set as a thing rather than said in a sentence */ .formula{ margin: 18px 0 0; padding: 16px 18px; border: 1px solid var(--line); background: var(--card); font-size:.92rem; line-height:2.1; color: var(--fg-soft); } .formula .latin{ color: var(--fg); } .formula em{ display:block; margin-top: 8px; font-style:normal; font-size:.8rem; line-height:1.75; color: var(--fg-mute); } /* ——— the major's own head: kicker, Arabic name at display scale, the Hebrew name it is enrolled under — the same lockup grammar as the room sheet, because both are "one sheet of the register, opened". ——— */ .mh{ margin: 60px 0 0; padding-top: 26px; border-top: 2px solid var(--fg); } /* THE DEGREE'S OWN MARK. The plate on /majors draws this degree as `` and inks it pink because its sheet is the finished one. A student who tapped that mark arrives here and meets it again at full size — the page's face, and a quiet confirmation that they landed where they aimed. Set at 52px and above the kicker rather than beside the title: a mark that competes with the name for the first glance is a logo, and this is a signature. */ .mh-mark{ display:block; width:52px; height:52px; color: var(--accent); margin-bottom: 15px; } .mh-mark svg{ display:block; width:100%; height:100%; overflow:visible; fill:none; stroke: currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } /* wide enough and the mark stops stacking and takes the end of the head instead — the half of the hero that was otherwise dead space. It stands off the title rather than over it, so the name is still the first thing read. */ @media (min-width: 760px){ .mh{ display:grid; grid-template-columns: minmax(0,1fr) auto; column-gap: clamp(24px, 4vw, 56px); } .mh-mark{ grid-column:2; grid-row: 1 / 4; align-self:center; width: 96px; height: 96px; margin:0; } .mh-kicker{ grid-column:1; grid-row:1; } .mh-name{ grid-column:1; grid-row:2; } .mh-lede{ grid-column:1; grid-row:3; } } @media (max-width: 560px){ .mh-mark{ width:44px; height:44px; margin-bottom:12px; } } .mh-kicker{ margin: 0; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:.9rem; line-height:1.6; color: var(--accent); } .mh-name{ margin: 2px 0 0; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem); line-height:1.35; color: var(--fg); } /* the Hebrew half of the title lockup — Rubik, at a size and colour that reads as the same name said the other way, not as a caption. Its own line: two display-size scripts side by side would set the head twice. */ .mh-he{ display:block; margin-top: 3px; font-family:'Rubik', system-ui, sans-serif; font-weight:500; font-style:normal; letter-spacing:-.01em; font-size: clamp(1.02rem, .92rem + .5vw, 1.3rem); line-height:1.5; color: var(--fg-soft); } .mh-lede{ margin: 14px 0 0; max-width: 34em; line-height: 1.9; } /* ——— the ladder ——— One row per threshold, not per institution: three colleges share 550 and that shared bar IS information. The bar is measured on a 500–700 window — the band where every published floor actually lives — and the number is set in Rubik at the start edge, because the number is what a student scans for. The track is the page's hairline; the measure is the accent. No axis, no legend: the numerals are the axis. */ /* ———————————————————————————————————————————————————————————— THE BOARD — eleven institutions, three gates What replaced the ladder. The ladder ranked eleven doors by ONE number and sent you to the register for the other two, so a student comparing places on psychometric AND Hebrew AND English was running thirty-three lookups by hand. The board puts all three where they can be read across and down. Aligned columns, deliberately. For «compare N places on three numbers» there is no shape that beats a column — cards break the alignment that makes the comparison possible, and a chart of three axes needs a legend, which this audience has already rejected once. The invention is not in avoiding the table. It is in what the table does when you give it your own scores. Extras live INSIDE the metric they qualify, never in a column of their own: the quantitative floor sits under the psychometric figure because that is what it is, a part of the same score. Bagrut units and sechem formulas do not appear at all — they qualify admission but they do not discriminate between these eleven, and a column that is mush is worse than a footnote. One measure only. A bar under each psychometric figure, and because the rows are ordered by it the column reads as a staircase — the ladder this replaces survives as the shape of one column. Thirty-three bars would have been noise; the other two metrics are short enough to read as numerals. */ .board{ margin: 22px 0 0; border-block: 1px solid var(--line); } .bd-head, .bd-row{ display:grid; grid-template-columns: minmax(0,1fr) 84px 74px 74px; gap: 10px; align-items:start; } .bd-head{ padding: 9px 0 10px; border-bottom:1px solid var(--line); font-size:.72rem; line-height:1.4; color: var(--fg-mute); } .bd-head span:not(:first-child){ text-align:center; } .bd-row{ padding: 11px 0 12px; text-decoration:none; color: var(--fg-soft); transition: background .16s var(--out); } .bd-row + .bd-row{ border-top: 1px solid var(--line); } .bd-row:hover, .bd-row:focus-visible{ background: rgba(var(--accent-rgb),.045); } .bd-row:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; } .bd-name{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:.95rem; line-height:1.5; color: var(--fg); align-self:center; } .bd-c{ text-align:center; } .bd-v{ display:block; font-family:'Rubik', system-ui, sans-serif; font-weight:500; font-size:1.16rem; line-height:1.15; letter-spacing:-.03em; color: var(--fg); } /* a word where a numeral was expected is exactly the surprise these rows are */ .bd-w{ display:block; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:.8rem; line-height:1.45; color: var(--fg-soft); padding-top:3px; } .sheet-majors .bd-he{ font-weight:600; font-size:.85rem; } /* the second gate the place imposes — a quantitative floor, a bagrut average, a formula. It sits under the NAME, not under a column: it qualifies the place, and stacking it under the psychometric figure put it in the same few pixels as the measure, where the two read as one smudge. */ .bd-q{ display:block; font-style:normal; font-family:'Readex Pro', sans-serif; font-size:.7rem; line-height:1.5; color: var(--fg-mute); margin-top:1px; } /* the measure, directly under the figure it measures. RTL: «to left» puts 0% at the right edge, which is the start edge, so the fill grows the way the page reads. */ .has-bar .bd-psy .bd-v{ position:relative; padding-bottom: 8px; } .has-bar .bd-psy .bd-v::after{ content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width: 46px; height:3px; border-radius:2px; background: linear-gradient(to left, var(--accent) 0 var(--w, 0%), var(--line) var(--w, 0%) 100%); } /* «علاماتك» — optional, and the board is complete without it */ .bd-you{ margin: 22px 0 0; } .bd-fields{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; } .bd-f{ display:flex; flex-direction:column; gap:4px; } .bd-f span{ font-size:.74rem; line-height:1.4; color: var(--fg-mute); } .bd-f input{ width: 94px; padding: 8px 10px; border:1px solid var(--line); border-radius:9px; background: var(--card); color: var(--fg); font-family:'Rubik', system-ui, sans-serif; font-weight:500; font-size:1rem; text-align:center; -moz-appearance:textfield; } .bd-f input::-webkit-outer-spin-button, .bd-f input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .bd-f input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; } .bd-clear{ padding: 8px 14px; border:1px solid var(--line); border-radius:9px; background:transparent; color: var(--fg-mute); cursor:pointer; font-family:'Readex Pro', sans-serif; font-size:.8rem; } .bd-clear:hover{ color: var(--fg); border-color: var(--fg-mute); } .bd-count{ margin: 12px 0 0; font-size:.88rem; line-height:1.6; color: var(--fg-soft); } .bd-count b{ font-weight:700; color: var(--accent); } .bd-count:empty{ display:none; } /* the verdict, printed under the name rather than in a column of its own — an empty status column would reserve width on a phone for nothing */ .bd-st{ display:block; font-style:normal; font-family:'Readex Pro', sans-serif; font-weight:400; font-size:.72rem; line-height:1.5; margin-top:2px; } .bd-st:empty{ display:none; } .is-open .bd-st{ color: var(--accent); font-weight:500; } .is-calc .bd-st, .is-short .bd-st{ color: var(--fg-mute); } .is-partial .bd-st{ color: var(--fg-soft); } /* mark what is open; do NOT dim what is not. Being five points short is the most actionable line on the page and it has to stay readable — fading it would punish exactly the reader the course is for. */ .board.is-filtered .is-open{ background: rgba(var(--accent-rgb),.055); } @media (max-width: 620px){ .bd-head, .bd-row{ grid-template-columns: minmax(0,1fr) 60px 54px 54px; gap:6px; } .bd-head{ font-size:.65rem; } .bd-name{ font-size:.88rem; } .bd-v{ font-size:1rem; } .bd-w{ font-size:.72rem; } .bd-c i{ font-size:.62rem; } .bd-psy::after{ width:40px; } .bd-f input{ width:80px; } } .bd-foot{ margin: 14px 0 0; font-size:.78rem; line-height:1.9; color: var(--fg-mute); max-width: 46em; } .bd-foot b{ font-weight:600; color: var(--fg-soft); } .ladder{ margin: 26px 0 0; padding:0; list-style:none; } .ld-row{ display:grid; grid-template-columns: 84px minmax(0,1fr); gap: 16px; align-items:center; padding-block: 13px 15px; border-top: 1px solid var(--line); } .ladder .ld-row:first-child{ border-top: 0; } .ld-n{ font-family:'Rubik', system-ui, sans-serif; font-weight:500; font-size: clamp(1.35rem, 1.2rem + .7vw, 1.75rem); line-height:1; letter-spacing:-.03em; color: var(--fg); } /* the rows that refuse the scale: the "number" cell carries the reason instead, in the display face, a size down — a word where a numeral was expected is exactly the surprise these three institutions are */ .ld-n.word{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:.92rem; line-height:1.4; letter-spacing:0; color: var(--fg-soft); } .ld-who{ font-size:.93rem; line-height:1.7; color: var(--fg-soft); } .ld-who b{ font-weight:600; color: var(--fg); } .ld-who .sep{ color: var(--fg-mute); padding-inline: 4px; } .ld-note{ display:block; font-size:.8rem; line-height:1.65; color: var(--fg-mute); } /* the measure: a filled span over a hairline track, growing from the start edge. --w is set inline per row — the data lives in the markup. */ .ld-bar{ grid-column: 2; display:block; position:relative; height: 4px; margin-top: 2px; background: var(--line); border-radius: 2px; } .ld-bar i{ position:absolute; inset-block:0; inset-inline-start:0; width: var(--w, 0%); background: var(--accent); border-radius: 2px; } /* a dashed measure for the row whose number changes every cycle — drawn, but honestly provisional */ .ld-bar.dash{ background: transparent; } .ld-bar.dash i{ background: repeating-linear-gradient(to left, var(--accent) 0 8px, transparent 8px 14px); opacity:.6; } @media (max-width: 560px){ .ld-row{ grid-template-columns: 64px minmax(0,1fr); gap: 12px; } } /* ——— the register of institutions ——— Native
: the closed row is a register line — who, and the one-line route — and the open row is the sheet's gate table. Resting state closed; the first sheet ships open so the pattern teaches itself. */ .mj-list{ margin: 34px 0 0; border-top: 2px solid var(--fg); } /* EACH ENTRY IS A CARD, and only the open one is lit. Eleven entries separated by a hairline read as one continuous slab: a student four entries down has no edge telling them where the thing they are reading begins or ends. So every entry gets its own outline, and the outline is where the state lives — closed entries are a quiet rule, the open one takes the accent and lifts onto the card surface. One lit box on a page of eleven is unmissable, which is the whole point: it says READ HERE. Closed entries stay transparent. Eleven white cards would out-shout the board above them; the border alone is enough containment, and keeping the fill for the open state is what makes opening feel like something happened. */ .mj-inst{ border: 1px solid var(--line); border-radius: 14px; background: transparent; transition: border-color .26s var(--out), background-color .26s var(--out), box-shadow .26s var(--out); } .mj-inst + .mj-inst{ margin-top: 8px; } .mj-inst:hover{ border-color: var(--fg-mute); } .mj-inst[open]{ border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.10); } .mj-inst[open]:hover{ border-color: var(--accent); } .mj-sum{ list-style:none; cursor:pointer; user-select:none; -webkit-user-select:none; display:grid; grid-template-columns: 84px minmax(0,1.05fr) minmax(0,1.35fr) 30px; gap: 10px 16px; align-items:center; padding: 13px 16px 14px; border-radius: 13px; transition: background .16s var(--out); } /* THE MARK. Other people's logos, printed the way this house prints them — greyscaled to one ink, inverted in the blackout — so eleven brand palettes never fight the accent the page spends so carefully. Three institutions have a usable logo; the other eight print their Hebrew name in Rubik, which is the substitute the exam-rooms plate already settled on. Either way the mark is a face: a student who scrolled past برّاودة once finds it again by shape instead of re-reading eleven names. */ .mj-mark{ --mk: 42px; display:flex; align-items:center; justify-content:center; height: var(--mk); width:100%; } .mj-mark img{ max-height: var(--mk); max-width:100%; width:auto; height:auto; object-fit:contain; filter: grayscale(1) brightness(0); opacity:.4; transition: opacity .26s var(--out); } :root[data-room="dark"] .mj-mark img{ filter: grayscale(1) brightness(0) invert(1); opacity:.42; } .sheet-majors .mj-mark i{ font-size:.86rem; line-height:1.35; text-align:center; color: var(--fg); opacity:.42; transition: opacity .26s var(--out); } .mj-inst[open] .mj-mark img, .mj-inst[open] .mj-mark i, .mj-sum:hover .mj-mark img, .mj-sum:hover .mj-mark i{ opacity:.92; } .mj-sum::-webkit-details-marker{ display:none; } .mj-sum::marker{ content:''; } .mj-sum:hover, .mj-sum:focus-visible{ background: rgba(var(--accent-rgb),.05); } .mj-name b{ display:block; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:1.02rem; line-height:1.5; color: var(--fg); } .mj-sum:hover .mj-name b{ color: var(--accent); } .mj-name i{ display:block; font-style:normal; font-size:.74rem; line-height:1.5; color: var(--fg-mute); } .mj-route{ font-size:.88rem; line-height:1.75; color: var(--fg-soft); } /* the toggle glyph: the sheet's own bubble, empty when closed, marked when open — the same vocabulary as the paper and the nav dots */ .mj-tick{ justify-self:end; width:11px; height:11px; border-radius:50%; border: 1px solid var(--bub-line); background: transparent; transition: background-color .18s ease, border-color .18s ease; } .mj-inst[open] .mj-tick{ background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 3.5px rgba(var(--accent-rgb),.28); } /* THE COLLAPSE.
has no height of its own to animate, so the panel is a one-row grid and the row is what moves: 0fr → 1fr. The first version measured scrollHeight and transitioned height, and it left a 48px stub on close — the measurement never accounted for the padding and the inner margins, and every panel is a different height so there was no single number to correct by. 0fr is exactly zero with no arithmetic at all, and the padding lives on the inner box where it cannot leak past the collapse. min-height:0 is not optional: without it a grid item refuses to go under its content height and the row never closes. */ .mj-body{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--out); } .mj-inst[open] .mj-body{ grid-template-rows: 1fr; } .mj-inner{ overflow:hidden; min-height:0; padding: 2px 16px 20px; } .mj-inst[open] .mj-inner{ animation: mj-open .32s var(--out) both; } @keyframes mj-open{ from{ opacity:0 } to{ opacity:1 } } /* the browser also tries to hold the page steady when something above the viewport changes size, and it and the pin in gates.js were correcting the same reflow twice — which is what the jumping was. One of them has to yield, and it has to be this one: anchoring cannot know which card was tapped. */ .mj-list{ overflow-anchor: none; } @media (prefers-reduced-motion: reduce){ .mj-inst[open] .mj-inner{ animation: none; } .mj-body, .mj-inst{ transition: none; } } @media (max-width: 620px){ .mj-sum{ padding: 11px 12px 12px; gap: 8px 12px; } .mj-mark{ --mk: 34px; } .sheet-majors .mj-mark i{ font-size:.76rem; } .mj-body{ padding: 2px 12px 18px; } } /* the gate table: every requirement is a cell with its own label, ruled the way the title block is ruled — because that is what these are, the sheet's administrative facts. */ .mj-specs{ margin: 10px 0 0; display:grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); border: 1px solid var(--line); border-inline-start: 0; border-block-end: 0; } .mj-specs > div{ padding: 10px 14px 12px; border-inline-start: 1px solid var(--line); border-block-end: 1px solid var(--line); } .mj-specs dt{ margin:0; font-size:.71rem; line-height:1.5; color: var(--fg-mute); } .mj-specs dd{ margin: 4px 0 0; font-size:.88rem; line-height:1.7; color: var(--fg-soft); } .mj-specs dd b{ font-weight:600; color: var(--fg); } .mj-specs dd .latin{ font-size:.95em; } /* A figure that carries its own «+» or dash is ONE token and must never break across a line — «70+» split by a wrap prints the plus at the start of the next line, where in RTL it reads as a different number entirely. The isolate is in the markup (course.css makes the same point about bidi terminators); this keeps the isolate from being torn in half by a narrow column. */ .sheet-majors .latin[dir="ltr"]{ white-space: nowrap; } /* the sentence-shaped facts that refuse cells: alternatives, the formula */ /* THE FOUR ROWS. Eight label/value cells per institution, eleven institutions, most cells a whole sentence — and a shape that changed from entry to entry, so the reader re-learned the layout eleven times. Now every entry answers the same four questions in the same order. Predictability is the antidote to overwhelm: read one entry and you know the shape of all eleven, which means from the second entry onward you are reading VALUES, not hunting for them. The label column is fixed-width and set quiet, so the four keys stack into a clean rail down the left of every entry and the eye can drop straight to the row it wants. Values run long where they must — this is the layer that holds the detail the board deliberately does not. */ .mj-facts{ margin:0; padding:0; list-style:none; max-width: 54em; } .mj-facts li{ display:grid; grid-template-columns: 84px minmax(0,1fr); gap: 16px; padding: 10px 0 11px; } .mj-facts li + li{ border-top: 1px solid var(--line); } .mj-k{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:.82rem; line-height:1.9; color: var(--fg-mute); } .mj-vv{ font-size:.88rem; line-height:1.9; color: var(--fg-soft); } .mj-vv b{ font-weight:600; color: var(--fg); } .mj-yr{ color: var(--fg-mute); } @media (max-width: 560px){ .mj-facts li{ grid-template-columns: 70px minmax(0,1fr); gap: 11px; } .mj-k{ font-size:.76rem; } .mj-vv{ font-size:.85rem; line-height:1.85; } } /* provenance: the source link, the data year, and the honesty chip. A fact we could not pin to an official page carries «بدّه تأكيد» — the register never silently promotes a rumour to a requirement. */ .mj-src{ margin: 14px 0 0; display:flex; flex-wrap:wrap; gap: 8px 18px; align-items:center; font-size:.79rem; line-height:1.6; color: var(--fg-mute); } .mj-src a{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .mj-src a:hover{ color: var(--pink-hover); } .chip-verify{ display:inline-block; padding: 2px 10px 3px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb),.45); color: var(--accent); font-size:.72rem; line-height:1.5; white-space:nowrap; } /* the route drops to its own line below the name; the mark and the tick keep the top row, so the card still reads as [face] [who] … [state] */ @media (max-width: 700px){ .mj-sum{ grid-template-columns: 62px minmax(0,1fr) 26px; } .mj-mark{ grid-row: 1 / span 2; } .mj-route{ grid-column: 2 / -1; padding-bottom: 2px; } .mj-tick{ grid-row: 1; grid-column: 3; } } /* ——— THE NEAR MISSES ——— This was nineteen institutions listed as absences: «no · no · no», each with a fragment of what they teach instead. It answered «can I study this at Tel Aviv?» and nothing else, and it buried the finding it was sitting on — «هندسة برمجيات» is a NAME, not a wall. Nineteen more places teach the same material under a different title, two of them inside another degree. So it is regrouped by WHAT the degree is, in one order that carries meaning: from «practically the same thing» down to «not a degree at all». The gradient is the device, and the lede says so in words rather than leaving the reader to infer it — a rank nobody is told about is just a list. Each group leads with its COUNT, in the accent, in Rubik like every other figure on these sheets. Four numerals down the start edge (2 · 11 · 4 · 2) give the eye a rail and answer «how many» before any name is read. And each group says what the difference means FOR YOU, which is the only reason a seventeen-year-old needs to know the difference at all. */ .alt-map{ margin: 20px 0 0; } .alt-g{ display:grid; grid-template-columns: 62px minmax(0,1fr); gap: 0 20px; padding: 17px 0 19px; border-top: 1px solid var(--line); } .alt-g:last-child{ border-bottom: 1px solid var(--line); } .alt-n{ margin:0; } .alt-n b{ display:block; font-family:'Rubik', system-ui, sans-serif; font-weight:500; font-size:1.55rem; line-height:1.1; letter-spacing:-.03em; color: var(--accent); } .alt-n em{ display:block; margin-top:2px; font-style:normal; font-size:.66rem; line-height:1.4; color: var(--fg-mute); } .alt-t{ margin:0; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:1.02rem; line-height:1.45; color: var(--fg); } .alt-what{ margin: 4px 0 0; font-size:.86rem; line-height:1.85; color: var(--fg-soft); max-width: 46em; } .alt-what b{ font-weight:600; color: var(--fg); } /* the names run as prose, not as rows: nineteen institutions set one per line is a wall again, and inside a group the individual name is a lookup, not a thing to be scanned in order */ .alt-who{ margin: 9px 0 0; font-size:.83rem; line-height:2; color: var(--fg-mute); max-width: 48em; } .alt-who b{ font-weight:600; color: var(--fg-soft); } .alt-who a{ color: var(--accent); text-decoration:underline; text-underline-offset:3px; } @media (max-width: 560px){ .alt-g{ grid-template-columns: 48px minmax(0,1fr); gap: 0 14px; } .alt-n b{ font-size:1.3rem; } .alt-t{ font-size:.96rem; } } /* ——— the reading instructions: small print that earns its keep ——— */ .mj-note{ margin: 26px 0 0; max-width: 46em; font-size:.85rem; line-height:1.9; color: var(--fg-mute); } .mj-note b{ font-weight:600; color: var(--fg-soft); } @media (prefers-reduced-motion: reduce){ .mj-sum, .mj-tick{ transition: none; } } /* ———————————————————————————————————————————————————————————— بريمو، على حافة السؤال The house owl, carried over from the calculator with his rig intact — same five idle movements on the same unshared periods, same medal. The medal IS the branding: the Infinity lockup in its true daylight inks, on a white ground of its own, so it holds in both rooms without a second version. The perch is what changes. On the calculator he stands on a drawn dimension line, because that page draws one. This section draws no line here — but the ask is a CARD, and a card has a top rule. So he stands on that: the page's own geometry, toes over the edge, no new device invented for him to sit on. He takes the start side, where the heading begins, and the gaze he already carries falls left — into the card, across the words, toward the button. Everything rests at its markup state, so the global reduced-motion kill in course.css leaves him perched and open-eyed rather than mid-hop. He is pointer-transparent and aria-hidden: he is the brand's face, not a control, and to a screen reader he is nothing at all. */ /* the ask names the courses and links them. A student who has just read that the gate is an exam should be able to reach the course from the sentence, not only from a WhatsApp button — the button asks them to start a conversation, the link lets them go look first. */ .sheet-majors .reg-ask p a{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .reg-ask{ position: relative; } /* only where he actually stands: the card has to grow headroom for him, and a card without him should not carry the gap */ .reg-ask:has(.mj-primo){ margin-top: clamp(76px, 9vw, 104px); } .mj-primo{ position:absolute; z-index:1; pointer-events:none; inset-inline-start: clamp(18px, 5vw, 52px); bottom:100%; margin-bottom:-3px; /* toes over the rule */ width: clamp(56px, 7.5vw, 74px); } .mj-primo svg{ display:block; width:100%; height:auto; transform-origin:50% 100%; animation:primo-hop 9s infinite; } @keyframes primo-hop{ 0%, 84%, 100%{ transform:translateY(0) scale(1, 1); } 86.5%{ transform:translateY(1px) scale(1.05, .93); } 89% { transform:translateY(-7px) scale(.98, 1.05); } 91.5%{ transform:translateY(0) scale(1.03, .96); } 94% { transform:translateY(0) scale(1, 1); } } .p-breathe{ transform-origin:60px 121px; animation:primo-breathe 4.6s ease-in-out infinite; } @keyframes primo-breathe{ 0%, 100%{ transform:scale(1, 1) rotate(0deg); } 28%{ transform:scale(1.015, 1.03) rotate(1.4deg); } 50%{ transform:scale(1.02, 1.042) rotate(0deg); } 72%{ transform:scale(1.012, 1.024) rotate(-1.4deg); } } .p-lid{ animation:primo-blink 5.5s infinite; } @keyframes primo-blink{ 0%, 91%, 100%{ transform:translateY(0); } 93.5%, 96.5%{ transform:translateY(27px); } } .p-pupil{ transform:translate(-2.3px, 2.6px); animation:primo-gaze 8s ease-in-out infinite; } @keyframes primo-gaze{ 0%, 26%, 72%, 100%{ transform:translate(-2.3px, 2.6px); } 33%, 44%{ transform:translate(-5px, .4px); } 52%, 62%{ transform:translate(1.2px, -2.2px); } } .p-head{ transform-origin:60px 44px; transform:rotate(-4deg); animation:primo-look 8s ease-in-out infinite; } @keyframes primo-look{ 0%, 26%, 72%, 100%{ transform:rotate(-4deg); } 33%, 44%{ transform:rotate(-8.5deg); } 52%, 62%{ transform:rotate(1.5deg); } } .p-ear-r{ transform-origin:97px 27px; animation:primo-ear 13s infinite; } @keyframes primo-ear{ 0%, 55%, 61.5%, 100%{ transform:rotate(0deg); } 56.5%{ transform:rotate(8deg); } 58% { transform:rotate(0deg); } 59.5%{ transform:rotate(6deg); } } /* the one cued movement, same as the calculator's: hover the WhatsApp button and he turns to it — the mascot pointing at the door the section wants opened */ .reg-ask:has(.btn:hover) .p-pupil{ animation:none; transform:translate(-4.8px, 3.6px); transition:transform .25s var(--out); } .reg-ask:has(.btn:hover) .p-head{ animation:none; transform:rotate(-9deg); transition:transform .25s var(--out); }