/* ———————————————————————————————————————————————————————————— course.css — the shared skin for the five course pages. These are NOT the landing. The landing is a stage: a blackout, a light cord, an owl that walks. A course page is the opposite job — someone has already decided to look and now wants facts. So: light paper, no mechanics, nothing that moves, one column, and type that can carry 500 words without tiring. Tokens mirror the landing's inline set on purpose. They are duplicated rather than shared because the landing keeps everything inline by design (it opens in a browser with no build step, and that property is worth more than saving twenty lines here). If a brand colour changes, it changes in both places. ———————————————————————————————————————————————————————————— */ :root{ /* ——— brand constants. These never move, in either room. ——— */ --pink:#c72566; --pink-hover:#b01859; --pink-press:#9c1450; --pink-light:#e0568f; --ink:#0c0a09; --body-c:#44403c; --muted:#78716c; --hair:#e7e5e4; --s1:#faf8f7; --s2:#f5f3f1; --pad: clamp(20px, 5vw, 64px); /* the gutter the course pages' rail lives in — at :root because the masthead has to square up with the column the rail creates, and it sits outside main */ --rail: clamp(26px, 3.2vw, 40px); --out: cubic-bezier(.2,.8,.2,1); /* ——— THE ROOM · daylight ——— Everything below is what the landing calls the room, and it is the only layer that flips. The rule the landing set: brand constants stay put, a semantic layer over them changes. Same names, same job, so a course page and the stage are lit by one switch. */ color-scheme: light; --paper: var(--s2); /* the ground the sheet is printed on */ --fg: var(--ink); /* headings, */ --fg-soft: var(--body-c); /* body copy */ --fg-mute: var(--muted); --line: var(--hair); /* every hairline that is not the rail */ --rail-line: rgba(12,10,9,.145); --card: #ffffff; /* the CTA, the siblings, the menu panel */ --card-solid: #ffffff; /* where a card must be opaque (the menu) */ --card-line: var(--hair); --mark-1: var(--ink); /* the logo's two inks — a fixed brand asset, */ --mark-2: #ae1857; /* so daylight shows its TRUE colours */ /* the accent: pink as line and letter. Kept apart from --pink itself, which stays #c72566 wherever it is a BACKGROUND carrying white type. */ --accent: var(--pink); --accent-rgb: 199,37,102; --cta-shadow: 0 8px 22px rgba(199,37,102,.22); --bub-line: rgba(12,10,9,.28); /* WhatsApp's own green is not ours to redraw, but it has two official ones. Daylight takes the dark green — #25d366 on paper is a neon sticker at 2.1:1 — and the blackout takes the bright one back. The landing settled this; the paper pages now agree with it. */ --wa: #128c7e; --panel-shadow: 0 1px 2px rgba(12,10,9,.05), 0 18px 44px rgba(12,10,9,.13); /* white surfaces sit on a printed sheet, not on flat stone — they need a real contact shadow or they read as holes punched in the paper */ --lift: 0 1px 2px rgba(12,10,9,.04), 0 10px 26px rgba(12,10,9,.05); } /* ——— THE ROOM · blackout ——— Set by the light cord on the landing and carried here; see the inline script in each page's . The values are the landing's own dark room, not a new palette: paper-at-low-alpha for every line and surface, --pink-light for the accent (#c72566 on ink is 3.2:1 and would drown, exactly as the landing's own note says of WhatsApp's dark green), and no shadows, because a drop shadow on ink is a smudge. Cards stop being objects and become keylines — the landing sets --poster-bg: transparent in the dark for the same reason. */ :root[data-room="dark"]{ color-scheme: dark; --paper: var(--ink); --fg: var(--s1); --fg-soft: rgba(250,248,247,.78); --fg-mute: rgba(250,248,247,.62); --line: rgba(250,248,247,.09); --rail-line: rgba(250,248,247,.16); --card: rgba(250,248,247,.035); --card-solid: #17140f; --card-line: rgba(250,248,247,.10); --mark-1: var(--s1); --mark-2: var(--pink-light); --accent: var(--pink-light); --accent-rgb: 224,86,143; /* the CTA keeps its solid #c72566 — white on it is 5.6:1 in any room — but in the dark a shadow cannot fall, so it throws light instead */ --cta-shadow: 0 10px 34px rgba(199,37,102,.5), 0 2px 8px rgba(0,0,0,.4); --bub-line: rgba(250,248,247,.32); --wa: #25d366; --panel-shadow: 0 1px 2px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.55); --lift: none; } *{ box-sizing:border-box; } /* the sheet layers run full-bleed; clip on the ROOT adds no scroll container */ html{ -webkit-text-size-adjust:100%; overflow-x: clip; } body{ position: relative; /* the sheet layers below are absolute to the document */ min-height: 100svh; /* a short page must not run out of sheet mid-screen */ margin:0; color: var(--fg-soft); font-family:'Readex Pro', system-ui, sans-serif; font-weight:300; font-size: clamp(1rem, .96rem + .25vw, 1.09rem); line-height:2; /* the dawn — the brand's one light, entering at the top-start corner (RTL: right) so the title block sits IN it. Document-anchored, not fixed: this lights the head of the page, then the paper settles into plain stock. */ background-color: var(--paper); background-image: radial-gradient(circle 560px at 88% -130px, rgba(224,86,143,.10), rgba(224,86,143,0) 66%); background-repeat: no-repeat; background-size: 100% 620px; } /* ———————————————————————————————————————————————————————————— THE SHEET A course page is read by someone preparing for the psychometric. So the paper under them is the one surface that exam actually has: an answer sheet. Bubbles run in fours — one question, four options — with the wider gutter between questions that a real form prints. A sparse scatter of them is filled in pink: the sheet has been worked, by someone, before you got here. Two layers, two masks, both absolute to the document (so the sheet scrolls WITH the text — it is paper, not a texture behind a window). Pure CSS, no raster, no script, nothing that moves. The rule from v37 holds: this page is for facts. The background may be composed; it may not perform. ———————————————————————————————————————————————————————————— */ /* the lattice — every bubble, unanswered */ body::before{ content:''; position:absolute; inset:0; z-index:-2; pointer-events:none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='95' height='27'%3E%3Cg fill='none' stroke='%230c0a09' stroke-opacity='.105' stroke-width='1'%3E%3Ccircle cx='9.5' cy='13.5' r='3.5'/%3E%3Ccircle cx='28.5' cy='13.5' r='3.5'/%3E%3Ccircle cx='47.5' cy='13.5' r='3.5'/%3E%3Ccircle cx='66.5' cy='13.5' r='3.5'/%3E%3C/g%3E%3C/svg%3E") repeat 0 0 / 95px 27px; /* fades in under the masthead and out before the footer rule, so the sheet never collides with the two elements that have to read as chrome */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 150px, #000 calc(100% - 300px), transparent calc(100% - 130px)); mask-image: linear-gradient(to bottom, transparent 0, #000 150px, #000 calc(100% - 300px), transparent calc(100% - 130px)); } /* the marks — the answered ones. Tiled at 5 questions × 16 rows so the repeat is longer than any viewport; the twelve positions are irregular on purpose, because a real sheet is not a pattern. */ body::after{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='475' height='432'%3E%3Cg fill='%23c72566' fill-opacity='.13'%3E%3Ccircle cx='142.5' cy='13.5' r='4'/%3E%3Ccircle cx='294.5' cy='40.5' r='4'/%3E%3Ccircle cx='66.5' cy='94.5' r='4'/%3E%3Ccircle cx='408.5' cy='121.5' r='4'/%3E%3Ccircle cx='237.5' cy='148.5' r='4'/%3E%3Ccircle cx='9.5' cy='202.5' r='4'/%3E%3Ccircle cx='351.5' cy='229.5' r='4'/%3E%3Ccircle cx='123.5' cy='256.5' r='4'/%3E%3Ccircle cx='427.5' cy='310.5' r='4'/%3E%3Ccircle cx='199.5' cy='337.5' r='4'/%3E%3Ccircle cx='47.5' cy='391.5' r='4'/%3E%3Ccircle cx='313.5' cy='418.5' r='4'/%3E%3C/g%3E%3C/svg%3E") repeat 0 0 / 475px 432px; /* pink is the loud ink on this page — the marks keep to the margins, clear of the reading column, and never sit under a line of body copy */ -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(50% - 470px), transparent calc(50% - 400px), transparent calc(50% + 400px), #000 calc(50% + 470px), #000 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(50% - 470px), transparent calc(50% - 400px), transparent calc(50% + 400px), #000 calc(50% + 470px), #000 100%); } /* Below the width where a margin exists there is nowhere to keep the marks out of the text — so they cross the page instead, at rather less than half strength, fading in below the title block. A phone is where this page is mostly read; the sheet cannot go blank there. */ @media (max-width: 1023px){ body::after{ opacity:.5; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 260px, #000 calc(100% - 300px), transparent calc(100% - 130px)); mask-image: linear-gradient(to bottom, transparent 0, #000 260px, #000 calc(100% - 300px), transparent calc(100% - 130px)); } } /* the desk — the paper reads as a lit column with the room falling off at the inline edges. Desktop only: a narrow viewport has no room to fall off into. */ @media (min-width: 1024px){ body{ background-image: radial-gradient(circle 560px at 88% -130px, rgba(224,86,143,.10), rgba(224,86,143,0) 66%), linear-gradient(90deg, rgba(12,10,9,.05) 0, rgba(12,10,9,0) 22%, rgba(12,10,9,0) 78%, rgba(12,10,9,.05) 100%); background-repeat: no-repeat, repeat-y; background-size: 100% 620px, 100% 100%; } } /* ——— the sheet, in the dark ——— The same form, re-inked: the printed bubble becomes a scored one — paper at 9% on ink instead of ink at 10.5% on paper — and the marks step up to --pink-light, because #c72566 has nothing to sit against down here. The desk's edge falloff is dropped: ink has no edges to fall off into, and darkening black only makes a band. The dawn stays, weaker: it is the one warm thing in the room, and in the dark it reads as a glow rather than a blush, which is what the landing's own blackout does with the same colour. */ :root[data-room="dark"] body{ background-image: radial-gradient(circle 560px at 88% -130px, rgba(224,86,143,.09), rgba(224,86,143,0) 66%); background-size: 100% 620px; } :root[data-room="dark"] body::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='95' height='27'%3E%3Cg fill='none' stroke='%23faf8f7' stroke-opacity='.09' stroke-width='1'%3E%3Ccircle cx='9.5' cy='13.5' r='3.5'/%3E%3Ccircle cx='28.5' cy='13.5' r='3.5'/%3E%3Ccircle cx='47.5' cy='13.5' r='3.5'/%3E%3Ccircle cx='66.5' cy='13.5' r='3.5'/%3E%3C/g%3E%3C/svg%3E"); } :root[data-room="dark"] body::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='475' height='432'%3E%3Cg fill='%23e0568f' fill-opacity='.17'%3E%3Ccircle cx='142.5' cy='13.5' r='4'/%3E%3Ccircle cx='294.5' cy='40.5' r='4'/%3E%3Ccircle cx='66.5' cy='94.5' r='4'/%3E%3Ccircle cx='408.5' cy='121.5' r='4'/%3E%3Ccircle cx='237.5' cy='148.5' r='4'/%3E%3Ccircle cx='9.5' cy='202.5' r='4'/%3E%3Ccircle cx='351.5' cy='229.5' r='4'/%3E%3Ccircle cx='123.5' cy='256.5' r='4'/%3E%3Ccircle cx='427.5' cy='310.5' r='4'/%3E%3Ccircle cx='199.5' cy='337.5' r='4'/%3E%3Ccircle cx='47.5' cy='391.5' r='4'/%3E%3Ccircle cx='313.5' cy='418.5' r='4'/%3E%3C/g%3E%3C/svg%3E"); } @media (min-width: 1024px){ :root[data-room="dark"] body{ background-image: radial-gradient(circle 560px at 88% -130px, rgba(224,86,143,.09), rgba(224,86,143,0) 66%); background-repeat: no-repeat; background-size: 100% 620px; } } .wrap{ max-width: 820px; margin-inline:auto; padding-inline: var(--pad); } /* ———————————————————————————————————————————————————————————— THE RAIL A course page answers one question in order: where you're starting from, what happens, and where it lets you out. v37 built that as five stacked sections and left the reader to infer the thread. So: draw the thread. One hairline runs the length of the document in a gutter of its own, and everything in the page hangs off it — each «شو في…» heading is a station, each programme item is a stop, and the line ends on the mark beside the CTA. It is the same device the landing already owns (a horizon that enters every scene) turned ninety degrees, and it is the slogan — «الطريق للجامعة بتبلّش بخطوة» — made into a thing you can see. The dots came first: the programme list already marked its items with a filled bubble. The whole intervention is connecting them, and then letting the headings join the same line. Nothing indents that did not already. Scoped to `main.track`, because the privacy policy shares this stylesheet, uses the same `.prog` and `.ask`, and is not a story. ———————————————————————————————————————————————————————————— */ /* Where the line stops, measured UP from the end of the document, so that it dissolves exactly at the terminal mark beside the CTA. Everything below that mark — the rest of the ask card, «الدورات التّانية» — is structurally identical on all five pages, so these four numbers are measured, not guessed (they are the same on master · 800 · yael · amirnet · medicine). The bands are where the siblings grid and the CTA buttons re-wrap; the dissolve is 120px long so the ±20px of drift WITHIN a band cannot be seen. If anything below the CTA heading changes, re-measure these. */ main.track{ --rail-end: 640px; } @media (max-width: 719px){ main.track{ --rail-end: 720px; } } @media (max-width: 559px){ main.track{ --rail-end: 940px; } } @media (max-width: 479px){ main.track{ --rail-end: 1020px; } } main.track{ position: relative; max-width: calc(820px + var(--rail)); padding-inline-start: calc(var(--pad) + var(--rail)); view-timeline-name: --course-rail; view-timeline-axis: block; } /* the line itself, and the pink that fills it. Same box, same mask — one is the route, the other is how far along it you are. */ main.track::before, main.track::after{ content:''; position:absolute; top:0; bottom:0; width:1px; inset-inline-start: calc(var(--pad) + var(--rail) / 2); pointer-events:none; z-index:0; /* it fades in beside the lede rather than starting on a measured pixel, and dissolves inside the CTA card, where the terminal mark takes over */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 330px, #000 calc(100% - var(--rail-end)), transparent calc(100% - var(--rail-end) + 120px)); mask-image: linear-gradient(to bottom, transparent 0, #000 330px, #000 calc(100% - var(--rail-end)), transparent calc(100% - var(--rail-end) + 120px)); } /* a shade firmer than --hair: the rail has to be the strongest hairline on the page, and --hair reads FAINTER than the sheet's own bubbles under it */ main.track::before{ background: var(--rail-line); } /* the fill is additive and nothing depends on it: with no scroll-timeline support it never appears, and the page is complete without it */ main.track::after{ background: var(--pink-light); transform: scaleY(0); transform-origin: top; } @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ main.track::after{ animation: rail-fill linear both; animation-timeline: --course-rail; /* `entry X% exit X%` is the one range pair whose start and end are exactly one document-height apart, which makes the lit end of the rail track the viewport at a fixed height instead of drifting down it. X=35% puts it a little below the eye — the route lights up just ahead of the reading. */ animation-range: entry 35% exit 35%; } } } @keyframes rail-fill{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } } /* ———————————————————————————————————————————————————————————— THE MEASURE — so nobody is asked to read a wall These pages are only 250–330 words, and they still READ long, because every line ran the full 820px column at a leading of 2. Three things fix that, and none of them cut a word: 1. A shorter measure. Body copy stops at ~34em (≈60 characters), which is where Arabic stops being comfortable. Headings and the facts band keep the full column, so the page still has a wide skeleton and a narrow text. 2. A lead paragraph. A section's FIRST paragraph is set a size up — it carries the point. Someone who reads only the big lines still leaves knowing what the course is. 3. Names before explanations. In the programme the item's NAME is a headline and its explanation recedes. Six short lines to scan, not twelve long ones. ———————————————————————————————————————————————————————————— */ main.track section > p{ max-width: 34em; line-height: 1.92; } main.track section > p:first-of-type{ font-size: clamp(1.06rem, 1rem + .44vw, 1.2rem); font-weight: 400; line-height: 1.88; max-width: 31em; } main.track .lede{ max-width: 30em; } main.track h2{ margin-bottom: 18px; } main.track section{ margin-block: 74px 0; } /* ——— the stations: every section heading takes its place on the line ——— */ main.track section:not(.ask):not(.also) > h2{ position: relative; } main.track section:not(.ask):not(.also) > h2::before{ content:''; position:absolute; top:.52em; inset-inline-start: calc(var(--rail) / -2 - 5.5px); width:11px; height:11px; border-radius:50%; background: var(--accent); border: 1.5px solid rgba(var(--accent-rgb),.55); box-shadow: 0 0 0 3.5px var(--paper), 0 0 0 4.6px rgba(var(--accent-rgb),.3); } /* ——— the terminal: the last mark on the sheet, beside the ask ——— */ main.track .ask > h2{ position: relative; } main.track .ask > h2::before{ content:''; position:absolute; top:.42em; inset-inline-start: calc(-1 * var(--pad) - 1px - var(--rail) / 2 - 7px); width:14px; height:14px; border-radius:50%; background: var(--accent); border: 1.6px solid rgba(var(--accent-rgb),.55); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5.2px rgba(var(--accent-rgb),.34), 0 0 0 9.5px rgba(var(--accent-rgb),.1); } /* ———————————————————————————————————————————————————————————— THE SHEET FILLS IN Every node on the rail starts as what the paper underneath it already is — an empty bubble — and is answered as you reach it. By the CTA the whole column is marked. Reading the page fills in the sheet; that is the only moving part these pages have, and it is the one the subject earned. Resting state is the FINAL state: with no scroll-timeline support, or with reduced motion, every node is simply filled. Nothing here can leave a mark stuck half-drawn. ———————————————————————————————————————————————————————————— */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ main.track section:not(.ask):not(.also) > h2::before, main.track .prog li::before, main.track .ask > h2::before{ animation: node-mark linear both; animation-timeline: view(); /* answered as it crosses the same height the rail's lit end holds */ animation-range: cover 30% cover 39%; } } } @keyframes node-mark{ from{ background-color: rgba(var(--accent-rgb),0); } to{ background-color: var(--accent); } } /* ——— the bar: the mark walks home, nothing else ——— */ .bar{ padding-block: 26px 0; } /* on a course page the rail pushes the document column over by its own width; the masthead squares up with it, so the page has one start edge, not two */ body:has(main.track) .bar > .wrap{ max-width: calc(820px + var(--rail)); padding-inline-start: calc(var(--pad) + var(--rail)); } .bar-in{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--fg); } .bar-mark{ width:38px; height:38px; flex:none; } /* the mark is a fixed brand asset, so it does not take currentColor — it carries its two inks as variables, the landing's own .im1/.im2 convention, and swaps them per room. Without this the ink half vanishes on ink. */ .bar-mark .im1{ fill: var(--mark-1); } .bar-mark .im2{ fill: var(--mark-2); } .bar-name{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:1rem; line-height:1.5; color:var(--fg); } .bar-in:hover .bar-name{ color: var(--accent); } /* ——— breadcrumb: small, real links, no chevron graphics ——— */ .crumb{ margin-block: 26px 0; font-size:.84rem; color: var(--fg-mute); } .crumb a{ color: var(--fg-mute); text-decoration:none; } .crumb a:hover{ color: var(--accent); text-decoration:underline; } .crumb b{ color: var(--fg-soft); font-weight:500; } /* ——— the title block ——— */ h1{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; color: var(--fg); font-size: clamp(1.95rem, 1.4rem + 3.1vw, 3.05rem); line-height:1.42; margin: 14px 0 0; letter-spacing:-.3px; } h1 .hl{ color: var(--accent); } .lede{ margin: 18px 0 0; font-size: clamp(1.06rem, 1rem + .5vw, 1.24rem); line-height:1.95; color: var(--fg-soft); font-weight:400; } .rule{ width:170px; height:4px; border-radius:3px; background:var(--accent); margin: 30px 0 0; } /* ——— the facts band: the numbers the course actually is. Four cards became one ruled band. A number is worth more read big and bare than boxed and small, and the sheet underneath goes on showing through instead of being covered by four white rectangles. ——— */ .facts{ margin: 42px 0 0; padding: 0; list-style:none; display:grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); } .facts li{ padding-block: 20px 22px; padding-inline: 15px; border-inline-start: 1px solid var(--line); } /* the first cell keeps no rule and no inset, so the band's first numeral sits on the same start edge as the title above it */ .facts li:first-child{ border-inline-start: 0; padding-inline-start: 0; } .facts b{ display:block; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.3rem); line-height:1.28; color: var(--accent); } /* the numerals set in Rubik — tabular, tight, and the only face here that was drawn for digits. The word-valued facts (مور، مقابلات) stay in Baloo, which is the only one of the two that can set Arabic. */ .facts b.latin{ font-weight:500; letter-spacing:-.6px; } .facts span{ display:block; font-size:.83rem; line-height:1.6; color: var(--fg-mute); margin-top:5px; } /* A label that carries its own figure needs a `dir="ltr"` isolate around it, or the bidi algorithm hands «20+» back as «+20» — the plus is a European Terminator and takes the digits' direction. The isolate is a nested span, and the rule above would otherwise turn it into a block and break the line. */ .facts span span{ display:inline; } @media (max-width: 640px){ .facts{ grid-template-columns: repeat(2, 1fr); } .facts li{ padding-block: 15px 17px; padding-inline: 13px; } .facts li:nth-child(odd){ border-inline-start: 0; padding-inline-start: 0; } .facts li:nth-child(n+3){ border-top: 1px solid var(--line); } } /* ——— sections ——— */ section{ margin-block: 62px 0; } h2{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; color: var(--fg); font-size: clamp(1.32rem, 1.15rem + .8vw, 1.72rem); line-height:1.55; margin:0 0 14px; } h3{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; color: var(--fg); font-size:1.06rem; line-height:1.7; margin: 26px 0 6px; } p{ margin: 0 0 16px; } p:last-child{ margin-bottom:0; } strong{ color: var(--fg); font-weight:500; } /* the programme list: a pink tick, then the thing, then what it means */ .prog{ margin:0; padding:0; list-style:none; } .prog li{ position:relative; padding-inline-start:30px; margin-bottom:18px; } /* the marker IS the sheet's bubble, answered: a pink fill, the paper's own gap, then the ring the lattice draws everywhere else. The programme reads as the part of the sheet that has been filled in. */ .prog li::before{ content:''; position:absolute; inset-inline-start:1px; top:.76em; width:8px; height:8px; border-radius:50%; background: var(--accent); border: 1.4px solid rgba(var(--accent-rgb),.55); box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 3.5px rgba(var(--accent-rgb),.28); } /* on a course page the rail already supplies the gutter, so the items give up their own indent and their markers step out onto the line */ main.track .prog li{ padding-inline-start: 0; margin-bottom: 30px; } main.track .prog li:last-child{ margin-bottom: 0; } main.track .prog li::before{ inset-inline-start: calc(var(--rail) / -2 - 4px); top:.82em; } .prog b{ display:block; color: var(--fg); font-weight:600; font-family:'Baloo Bhaijaan 2', sans-serif; } /* the name is the headline; the explanation steps back a size, a shade and a measure, so the six names can be read on their own in a few seconds */ main.track .prog b{ font-size: clamp(1.04rem, 1rem + .3vw, 1.14rem); line-height:1.65; font-weight:700; } main.track .prog > li > span{ font-size:.93rem; line-height:1.86; max-width: 32em; margin-top: 3px; } /* the direct child only — this is the description slot. Unscoped it also caught a nested (a service name, «IP»), turned it into a full-width block and threw it onto its own line. */ .prog > li > span{ display:block; color: var(--fg-soft); font-size:.95rem; line-height:1.9; } /* ——— long-form document (the privacy policy): plain bullets, because a legal page earns nothing from decoration and loses something from it ——— */ .doc{ margin: 0 0 16px; padding-inline-start: 22px; } .doc li{ margin-bottom: 9px; } .doc li:last-child{ margin-bottom: 0; } .doc li::marker{ color: var(--pink-light); } .stamp{ margin: 14px 0 0; font-size:.84rem; color: var(--fg-mute); } /* inline links inside body copy — the house pink, not the browser's blue. The course pages already carry these where they point at each other. */ main p a, .doc a, .prog a{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } main p a:hover, .doc a:hover, .prog a:hover{ color: var(--pink-hover); } .ask .btn, .crumb a{ text-decoration:none; } /* ——— the ask ——— */ .ask{ margin-block: 56px 0; padding: 30px var(--pad) 34px; background:var(--card); border:1px solid var(--card-line); border-radius:20px; text-align:center; box-shadow: var(--lift); } .ask h2{ margin-bottom:8px; } .ask p{ color: var(--fg-mute); font-size:.98rem; } .acts{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:20px; } .btn{ display:inline-flex; align-items:center; gap:9px; min-height:48px; padding: 12px 26px; border-radius:999px; text-decoration:none; font-family:'Readex Pro', sans-serif; font-weight:500; font-size:1rem; transition: background-color .18s ease, color .18s ease, transform .18s var(--out); } .btn:active{ transform: translateY(1px); } /* the CTA is the one place pink is a BACKGROUND under white type, so it keeps the solid brand #c72566 in both rooms: white on it is 5.4:1, white on --pink-light would be 3.6:1. Only its shadow changes room. */ .btn-1{ background: var(--pink); color:#fff; box-shadow: var(--cta-shadow); } .btn-1:hover{ background: var(--pink-hover); } .btn-2{ background:var(--card); color: var(--fg); border:1px solid var(--card-line); } .btn-2:hover{ border-color: var(--pink-light); color: var(--accent); } .btn svg{ flex:none; } .btn .wa{ fill: var(--wa); } .latin{ font-family:'Rubik', system-ui, sans-serif; font-weight:500; letter-spacing:.4px; } /* Hebrew rides with the Latin: every non-Arabic script on this site is Rubik. It has to be. Readex Pro ships arabic·latin·latin-ext·vietnamese and Baloo Bhaijaan ships arabic·latin — neither has a single Hebrew glyph. So every Hebrew name we set, and there are hundreds of them, was falling through to whatever face the machine happened to own: Segoe on one reader's phone, Arial on another's, and a synthesised smear anywhere the element asked for weight the fallback could not supply. Names students are meant to RECOGNISE were the least controlled type on the page. Rubik covers Hebrew properly, is already loaded on every page for the numerals, and its Hebrew and Latin were drawn together. */ [lang="he"]{ font-family:'Rubik', system-ui, sans-serif; } /* ——— siblings: the other four courses, because a course page that dead-ends wastes the visit AND the internal link ——— */ .also{ margin-block: 56px 0; } .also-list{ display:grid; gap:10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin:0; padding:0; list-style:none; } .also-list a{ display:block; padding: 15px 18px; background:var(--card); border:1px solid var(--card-line); border-radius:14px; text-decoration:none; color: var(--fg); font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:600; font-size:.99rem; box-shadow: var(--lift); transition: border-color .18s ease, color .18s ease; } .also-list a:hover{ border-color: var(--pink-light); color: var(--accent); } .also-list em{ display:block; font-family:'Readex Pro', sans-serif; font-style:normal; font-weight:300; font-size:.85rem; color: var(--fg-mute); margin-top:3px; } /* ——— footer ——— */ .foot{ margin-block: 64px 0; padding-block: 26px 40px; border-top:1px solid var(--line); font-size:.85rem; color: var(--fg-mute); text-align:center; } .foot a{ color: var(--fg-mute); text-decoration:none; } .foot a:hover{ color: var(--accent); text-decoration:underline; } .foot p{ margin: 0 0 8px; } a:focus-visible, .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; } /* ———————————————————————————————————————————————————————————— «الدورات» — the programme, in this page's own dialect. The landing's header hangs a lamp-lit board off its marquee; a light-paper page has no lamps — it has THE SHEET. So the same nav speaks answer bubbles here: the trigger's three rings carry one already marked, hovering a row FILLS its bubble the way the sheet's scatter is filled, and the page you are on rests filled-in — the answered question (aria-current="page"). Same
mechanics as the landing (no-JS opens it natively, nav.js adds outside-tap and Esc); quieter motion, because this is a reading room. ———————————————————————————————————————————————————————————— */ .bar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:14px; position:relative; } .pnav{ position:relative; flex:none; } .pnav-t{ list-style:none; cursor:pointer; user-select:none; -webkit-user-select:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:6px 14px; border-radius:12px; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:1rem; line-height:1; color: var(--fg); transition: color .18s ease; } .pnav-t::-webkit-details-marker{ display:none; } .pnav-t::marker{ content:''; } .pnav-t:hover, .pnav[open] .pnav-t{ color: var(--accent); } .pn-dots{ display:flex; gap:6px; } .pn-dots i{ width:7px; height:7px; border-radius:50%; border:1px solid var(--bub-line); background:transparent; transition: background-color .2s ease, border-color .2s ease; } .pn-dots i.on, .pnav-t:hover .pn-dots i, .pnav[open] .pn-dots i{ background: var(--accent); border-color: var(--accent); } /* the marking spreads outward from the answered middle */ .pnav-t:hover .pn-dots i:nth-child(1){ transition-delay:.06s; } .pnav-t:hover .pn-dots i:nth-child(3){ transition-delay:.12s; } .pnav-b{ position:absolute; top:calc(100% + 10px); inset-inline-end:0; z-index:20; width:min(340px, calc(100vw - 2 * var(--pad))); background:var(--card-solid); border:1px solid var(--card-line); border-radius:14px; padding:8px 18px; box-shadow: var(--panel-shadow); } .pnav[open] .pnav-b{ animation: pnav-in .18s var(--out) both; } @keyframes pnav-in{ from{ opacity:0; translate:0 -6px; } } .pnav-b ul{ list-style:none; margin:0; padding:0; } .pnav-b a{ display:flex; align-items:center; gap:12px; padding:12px 2px; text-decoration:none; border-bottom:1px solid var(--line); background-image: linear-gradient(var(--accent), var(--accent)); background-repeat:no-repeat; background-size:0 2px; background-position:100% 100%; transition: background-size .35s var(--out); } .pnav-b li:last-child a{ border-bottom:0; } .pnav-b a:hover, .pnav-b a:focus-visible, .pnav-b a[aria-current="page"]{ background-size:100% 2px; } .pn-bub{ flex:none; width:8px; height:8px; border-radius:50%; border:1px solid var(--bub-line); background:transparent; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; } .pnav-b a:hover .pn-bub, .pnav-b a:focus-visible .pn-bub, .pnav-b a[aria-current="page"] .pn-bub{ background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 2.5px var(--card-solid), 0 0 0 3.5px rgba(var(--accent-rgb),.28); } .pn-name{ display:block; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:600; font-size:.97rem; line-height:1.55; color: var(--fg); transition: color .18s ease; } .pnav-b a:hover .pn-name, .pnav-b a:focus-visible .pn-name, .pnav-b a[aria-current="page"] .pn-name{ color: var(--accent); } .pn-kind{ display:block; font-style:normal; font-size:.8rem; line-height:1.65; color: var(--fg-mute); } /* the narrowest phones: the word yields, the three bubbles carry the door */ @media (max-width:430px){ .pn-word{ display:none; } .pnav-t{ width:44px; padding:0; } .pn-dots{ gap:5px; } .pn-dots i{ width:8px; height:8px; } } @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }