/* =================================================================== Openly Jewish — TMU-adjacent variant ------------------------------------------------------------------- ADJACENCY, NOT AFFILIATION. TMJew is an independent brand under TMU's own brand architecture. No TMU logo, wordmark, lock-up, brandmark or graphic device appears here, and none may be added. TMU's primary graphic device is a system of overlapping rectangular boxes holding photography, text and colour fields — deliberately not reproduced. Palette and typographic temperature only. Variants, set as attributes on : data-ground="white" | "paper" page ground data-apply="ink" | "blue" the apply field data-body="inter" | "archivo" body face =================================================================== */ /* ---------- fonts ---------- Licensed-face names lead every stack. If Replica Std / Polaris Condensed are ever licensed, adding their @font-face rules is the only change needed — the stacks already prefer them. */ /* Space Grotesk 700 — display. Grid-constructed grotesque with squared terminals, chosen for family resemblance to Replica Std. */ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap; src:url(../fonts/space-grotesk-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap; src:url(../fonts/space-grotesk-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* Inter 400/500/600 — body */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url(../fonts/inter-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url(../fonts/inter-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap; src:url(../fonts/inter-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap; src:url(../fonts/inter-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url(../fonts/inter-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url(../fonts/inter-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* Barlow Condensed 500/600 — the Polaris echo. Spine labels only. */ @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap; src:url(../fonts/barlow-condensed-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap; src:url(../fonts/barlow-condensed-600-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* Archivo — retained as the alternate body face (data-body="archivo") and as the Space Grotesk fallback. */ @font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap; src:url(../fonts/archivo-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap; src:url(../fonts/archivo-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap; src:url(../fonts/archivo-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* Frank Ruhl Libre — Hebrew and Yiddish. UNCHANGED from the base build. The hebrew range U+0590-05FF carries the digraphs װ ױ ײ and the patah. Do not re-subset without it. */ @font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:700;font-display:swap; src:url(../fonts/frank-ruhl-libre-hebrew.woff2) format('woff2'); unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F} @font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:700;font-display:swap; src:url(../fonts/frank-ruhl-libre-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* IBM Plex Mono 400/500 — utility, labels, times */ @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* =================================================================== TOKENS =================================================================== */ :root{ /* --- colour: TMU palette, verified against torontomu.ca/brand --- */ --blue:#004C9B; /* TMU Blue, PMS 2945C — the accent, everywhere */ --blue-deep:#002D72; /* TMU Navy Blue, PMS 288C — hover / pressed. Replaces the briefed #00376F, which is not a TMU colour at any tier. 12.98:1 on white, and a clear 1.55:1 step down from --blue so the hover reads. */ --gold:#FFDC00; /* TMU Gold, PMS 109C. Three appearances, all on an ink or blue field. Never text. Never on white. */ --wash:#B3CBE4; /* light blue for text on blue/ink fields. Not an official TMU value; a custom tint. */ --white:#FFFFFF; --paper:#F4F6F8; /* inset boxes — cool, not warm */ --ink:#101216; --rule:#D4D9DE; --stone:#5C6670; --alert:#C4331D; --chalk:var(--white); /* page ground; see [data-ground] below */ /* --- dark-field tokens, remapped per apply variant --- --field-line is an input's ONLY visual identifier, so WCAG 1.4.11 applies: it needs 3:1 against the field. The base build's #3A3F48 was 1.77:1. #646A75 is 3.45:1 and still reads as a quiet rule. --field-rule is decorative (cell dividers) and exempt, but was raised to stay visible. */ --field-bg:var(--ink); --field-line:#646A75; /* input underline — 3.45:1 on ink */ --field-rule:#33383F; /* dividers, spine on dark */ --field-label:#9BA0A8; --field-text:#B9BDC4; --field-dim:#8A8F98; --field-err:#FF8A73; /* --- type ------------------------------------------------------- Two ratios, deliberately. Body sizes step on a 1.25 minor third from a 17px base — close intervals, so running text and its labels sit in one continuous texture. Display sizes step on 1.414 (√2) from 26.6px, which opens fast enough that the declaration can reach 212px without inventing sizes on the way. Every font-size on the page resolves to one of these. --------- */ --t--2:10.9px; /* 17 / 1.25² — micro labels */ --t--1:13.6px; /* 17 / 1.25 — mono labels, captions */ --t-0:17px; /* body base */ --t-1:21.3px; /* 17 × 1.25 — lead-in, larger body */ --t-2:26.6px; /* 17 × 1.25² — small display / sub-heads */ --d-1:37.6px; /* 26.6 × 1.414 */ --d-2:53.1px; --d-3:75.1px; --d-4:106.2px; --d-5:150.2px; --d-6:212.4px; /* the declaration */ --lh-tight:.92; --lh-head:1.06; --lh-body:1.6; /* one tracking value for every mono label on the page */ --track-label:.14em; --display:'Replica Std','Space Grotesk','Archivo Black',Helvetica,sans-serif; --body:'Inter','Archivo','Helvetica Neue',Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace; --heb:'Frank Ruhl Libre','Times New Roman',serif; --cond:'Polaris Condensed','Barlow Condensed','Archivo Narrow',Arial,sans-serif; /* --- space: 8px scale, no orphan values --------------------- */ --s-1:4px; --s0:8px; --s1:16px; --s2:24px; --s3:32px; --s4:40px; --s5:48px; --s6:64px; --s7:80px; --s8:96px; --s9:128px; --s10:160px; /* band rhythm, ~20% more air than the base build */ --band-y:clamp(var(--s6),8.4vw,var(--s9)); --gut:clamp(var(--s2),4vw,var(--s7)); /* --- motion: one curve, one duration scale ----------------- */ --ease:cubic-bezier(.2,.7,.3,1); --dur-1:.18s; --dur-2:.32s; --dur-3:.6s; --dur-4:.82s; } /* On the paper ground the hairline loses the little contrast it has — 1.31:1 against #F4F6F8. The design of record's spine (#C6C8C1 on #E7E8E3) measures 1.371:1, so --rule darkens here to 1.392:1 and the spine keeps the weight it has always had, on either ground. */ [data-ground="paper"]{--chalk:var(--paper);--rule:#CDD3DA} [data-ground="paper"] .venue .box{background:var(--white)} [data-ground="paper"] .groups li{background:var(--chalk)} /* the apply field: ink (base) or a solid TMU blue field */ [data-apply="blue"]{ --field-bg:var(--blue); --field-line:#86ADD6; /* 3.57:1 on TMU Blue */ --field-rule:#3E7BB5; --field-label:#CFE0F0; --field-text:#DCE8F4; --field-dim:#B3CBE4; --field-err:#FFD9CF; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--chalk);color:var(--ink); font-family:var(--body);font-size:var(--t-0);line-height:var(--lh-body); -webkit-font-smoothing:antialiased; font-feature-settings:"kern" 1; hanging-punctuation:first last; text-wrap:pretty; } ::selection{background:var(--blue);color:var(--white)} a{color:inherit} img{max-width:100%} h1,h2,h3,h4,.lede,.pull{text-wrap:balance} /* every figure and time aligns on the column */ .slot .t,.count,.fact dd,.term dd,time,[data-nums]{font-variant-numeric:tabular-nums} /* ---------- progress + sticky bar ---------- */ /* GOLD 1 of 3 — gold fill on a blue track. Gold on white would be 1.36:1 and fails even non-text contrast; on blue it is 6.17:1. */ #progtrack{position:fixed;top:0;left:0;right:0;height:var(--s-1);background:var(--blue);z-index:60} #prog{position:fixed;top:0;left:0;height:var(--s-1);width:0;background:var(--gold);z-index:61} #bar{ position:fixed;top:0;left:0;right:0;z-index:50; background:color-mix(in srgb,var(--chalk) 92%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule); transform:translateY(-102%);transition:transform var(--dur-2) var(--ease); } #bar.on{transform:none} .bar-in{ max-width:1280px;margin:0 auto;padding:var(--s1) var(--gut); display:flex;align-items:center;gap:var(--s2); } .bar-name{font-family:var(--display);font-weight:700;font-size:var(--t--1);letter-spacing:-.035em} .bar-in .btn{margin-left:auto;padding:var(--s0) var(--s2);font-size:var(--t--2)} /* ---------- buttons ---------- */ .btn{ display:inline-block;border:0;cursor:pointer;text-decoration:none; background:var(--blue);color:var(--white); font-family:var(--mono);font-size:var(--t--1);font-weight:500; letter-spacing:.08em;text-transform:uppercase; padding:var(--s2) var(--s4);border-radius:0; transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease); } .btn:hover{background:var(--blue-deep);transform:translateY(-1px)} .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .btn.ghost:hover{background:var(--ink);color:var(--chalk)} :focus-visible{outline:3px solid var(--blue);outline-offset:3px} /* on the blue field the blue ring would vanish — go to white there */ .apply :focus-visible,[data-apply="blue"] .apply :focus-visible{outline-color:var(--white)} /* ---------- hero ---------- */ .hero{ min-height:100svh; padding:clamp(var(--s9),16vh,var(--s10)) var(--gut) var(--s9); max-width:1280px;margin:0 auto; display:flex;flex-direction:column; } .hero-top{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:baseline; font-family:var(--mono);font-size:var(--t--1);letter-spacing:var(--track-label); text-transform:uppercase;color:var(--stone)} .hero-top .live{color:var(--blue)} .hero-top .live::before{content:"";display:inline-block;width:var(--s0);height:var(--s0); border-radius:50%;background:var(--blue);margin-right:var(--s0);vertical-align:1px} .dec{margin:clamp(var(--s5),6vw,var(--s7)) 0 0;position:relative} .dec-line{ display:block;width:100%;background:none;border:0;padding:0;margin:0;cursor:pointer; color:inherit;text-align:right;font:inherit; transition:opacity var(--dur-2) var(--ease),color var(--dur-2) var(--ease); } .dec-line .glyph{ display:block;font-family:var(--heb);font-weight:700; font-size:clamp(var(--d-3),15.5vw,var(--d-6));line-height:var(--lh-tight); letter-spacing:0;direction:rtl; } .dec-line.en{text-align:left} .dec-line.en .glyph{ font-family:var(--display);direction:ltr;font-weight:700; font-size:clamp(var(--d-2),11.4vw,var(--d-5));line-height:.94; letter-spacing:-.035em;color:var(--blue); /* optical alignment: Space Grotesk 'W' carries a left side bearing that leaves the cap looking indented against the Hebrew above. */ margin-left:-.055em; } .dec-line .tl{ display:block;font-family:var(--mono);font-size:var(--t--1); letter-spacing:var(--track-label);text-transform:uppercase; color:var(--stone);margin-top:var(--s0); } .dec.hovering .dec-line{opacity:.24} .dec.hovering .dec-line.act{opacity:1} .gloss{ min-height:var(--s7);margin-top:var(--s3);padding-top:var(--s2); border-top:2px solid var(--blue); font-family:var(--mono);font-size:var(--t--1);line-height:var(--lh-body); color:var(--stone);max-width:60ch;transition:color var(--dur-1) var(--ease); } .gloss b{color:var(--ink);font-weight:500} .hero-title{margin:clamp(var(--s7),7vw,var(--s8)) 0 0;max-width:1000px} .hero-title h1{ margin:0;font-family:var(--display);font-weight:700; /* min is --d-1, one step above h2's --t-2 min, so the title still outranks the section heads once both bottom out on narrow screens */ font-size:clamp(var(--d-1),4.6vw,var(--d-2));line-height:var(--lh-head); letter-spacing:-.035em; } .hero-title h1 em{font-style:normal;display:block;font-size:.52em;letter-spacing:-.015em; margin-top:var(--s2);color:var(--stone);font-family:var(--body);font-weight:500;line-height:1.25} .hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:var(--s5) 0 0} .hero-cta .note{font-family:var(--mono);font-size:var(--t--1);color:var(--stone);letter-spacing:.04em} .facts{ margin:clamp(var(--s7),8vw,var(--s8)) 0 0;border-top:1px solid var(--ink); display:grid;grid-template-columns:repeat(4,1fr); } .fact{padding:var(--s2) var(--s2) var(--s3) 0;border-right:1px solid var(--rule)} .fact:last-child{border-right:0} .fact dt{font-family:var(--mono);font-size:var(--t--2);letter-spacing:var(--track-label); text-transform:uppercase;color:var(--stone)} .fact dd{margin:var(--s0) 0 0;font-size:var(--t-0);line-height:1.35;font-weight:500} .fact dd a{color:var(--blue)} /* ---------- the spine ---------- */ /* 1px at --rule tested against a 0.5px equivalent (scaleX on a pseudo-element). At --rule #D4D9DE the half-pixel line drops to roughly a 1.5:1 edge against white and disappears at 1x entirely; the full pixel reads sharper. Keeping 1px. */ .band{max-width:1280px;margin:0 auto;padding:0 var(--gut); display:grid;grid-template-columns:200px minmax(0,1fr)} .band .label{ padding:var(--band-y) var(--s3) 0 0;text-align:right; font-family:var(--cond);font-size:var(--t-1);font-weight:600; letter-spacing:.02em;text-transform:uppercase;color:var(--stone); line-height:1.1;position:sticky;top:var(--s9);height:min-content; } .band .label span{display:block;color:var(--ink)} .band .body{ border-left:1px solid var(--rule); padding:var(--band-y) 0 var(--band-y) clamp(var(--s3),3.6vw,var(--s6)); } .band.tight .body{padding-bottom:0} h2{margin:0 0 var(--s4);font-family:var(--display);font-weight:700; font-size:clamp(var(--t-2),3.1vw,var(--d-1));line-height:var(--lh-head); letter-spacing:-.035em;max-width:16ch} .lede{font-size:clamp(var(--t-1),2.1vw,var(--t-2));line-height:1.42; max-width:28ch;letter-spacing:-.012em;margin:0 0 var(--s4)} p{max-width:62ch} .cols{columns:2;column-gap:var(--s6);max-width:900px} .cols p{margin:0 0 var(--s2);break-inside:avoid;max-width:none} .pull{ margin:var(--s5) 0 0;padding:var(--s3) 0 0;border-top:2px solid var(--ink); font-family:var(--display);font-weight:700; font-size:clamp(var(--t-1),2.3vw,var(--t-2));line-height:1.2; letter-spacing:-.03em;max-width:22ch; } /* ---------- questions ---------- */ .qs{border-top:1px solid var(--rule);max-width:900px} .q{border-bottom:1px solid var(--rule)} .q button{ width:100%;background:none;border:0;padding:var(--s3) 0;cursor:pointer;color:inherit; display:flex;gap:var(--s2);align-items:flex-start;text-align:left;font:inherit; } .q .mark{ flex:0 0 auto;width:var(--s2);height:var(--s2);margin-top:var(--s-1);position:relative; border:1px solid var(--ink);border-radius:50%; transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease); } .q .mark::before,.q .mark::after{ content:"";position:absolute;background:var(--ink); transition:transform var(--dur-1) var(--ease),background var(--dur-1) var(--ease); } .q .mark::before{left:5px;right:5px;top:50%;height:1px;margin-top:-.5px} .q .mark::after{top:5px;bottom:5px;left:50%;width:1px;margin-left:-.5px} .q.open .mark{background:var(--blue);border-color:var(--blue)} .q.open .mark::before,.q.open .mark::after{background:var(--white)} .q.open .mark::after{transform:scaleY(0)} .q h3{margin:0;font-family:var(--body);font-weight:500;letter-spacing:-.018em; font-size:clamp(var(--t-0),2.1vw,var(--t-1));line-height:1.28} .q.open h3{color:var(--blue)} .q .ans{max-height:0;overflow:hidden;transition:max-height var(--dur-2) var(--ease)} .q .ans p{margin:0 0 var(--s3);padding-left:var(--s5);color:var(--stone);max-width:58ch} /* ---------- program ---------- */ .prog{max-width:900px} .slot{display:grid;grid-template-columns:150px 1fr;gap:var(--s2); padding:var(--s2) 0;border-bottom:1px solid var(--rule)} .slot:first-child{border-top:1px solid var(--ink)} .slot .t{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.02em; color:var(--blue);padding-top:var(--s-1);white-space:nowrap} .slot h3{margin:0;font-size:var(--t-0);font-weight:600;letter-spacing:-.015em;max-width:44ch} .slot p{margin:var(--s-1) 0 0;color:var(--stone);font-size:var(--t--1);max-width:52ch} .slot .kind{font-family:var(--mono);font-size:var(--t--2);letter-spacing:var(--track-label); text-transform:uppercase;color:var(--stone);display:block;margin:0 0 var(--s-1)} .slot .who{margin:var(--s0) 0 0;font-size:var(--t--1);color:var(--ink);font-weight:500;max-width:52ch} .slot .who span{color:var(--stone);font-weight:400} .slot.rest h3{font-weight:500;color:var(--stone)} .groups{list-style:none;padding:0;margin:var(--s1) 0 0;display:grid; grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule); border:1px solid var(--rule)} .groups li{background:var(--chalk);padding:var(--s1);font-size:var(--t--1);line-height:1.35} .groups li b{display:block;font-family:var(--mono);font-size:var(--t--2); letter-spacing:var(--track-label);text-transform:uppercase;color:var(--blue); font-weight:500;margin-bottom:var(--s-1)} .disclaimer{margin-top:var(--s3);font-family:var(--mono);font-size:var(--t--1); color:var(--stone);line-height:1.7} /* ---------- apply ---------- */ .apply{background:var(--field-bg);color:var(--chalk)} .apply .band .label{color:var(--field-dim)} .apply .band .label span{color:var(--chalk)} .apply .band .body{border-left-color:var(--field-rule)} .apply h2{color:var(--chalk)} .apply .lede{color:var(--wash)} /* GOLD 2 of 3 — a rule opening the form, on the ink or blue field. 13.9:1 on ink, 6.17:1 on blue. */ .apply .form{border-top:3px solid var(--gold);padding-top:var(--s4)} .terms{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--field-rule); border:1px solid var(--field-rule);margin:0 0 var(--s6);max-width:900px} .term{background:var(--field-bg);padding:var(--s2)} .term dt{font-family:var(--mono);font-size:var(--t--2);letter-spacing:var(--track-label); text-transform:uppercase;color:var(--field-dim)} .term dd{margin:var(--s0) 0 0;font-size:var(--t--1);line-height:1.4} #fee{transition:color var(--dur-1) var(--ease)} #fee.hl{color:var(--wash)} .form{max-width:640px} .f{margin:0 0 var(--s3)} .f label,.leg{display:block;font-family:var(--mono);font-size:var(--t--2); letter-spacing:var(--track-label);text-transform:uppercase; color:var(--field-label);margin:0 0 var(--s0)} .f .hint{text-transform:none;letter-spacing:.02em;color:var(--field-dim);font-size:var(--t--2)} input[type=text],input[type=date],input[type=email],textarea,select{ width:100%;background:transparent;color:var(--chalk); border:0;border-bottom:1px solid var(--field-line);padding:var(--s1) 0; font-family:var(--body);font-size:var(--t-0);border-radius:0; transition:border-color var(--dur-1) var(--ease); } input:focus,textarea:focus{outline:0;border-bottom-color:var(--white)} textarea{resize:vertical;min-height:var(--s9);line-height:1.5} .roles{display:flex;flex-wrap:wrap;gap:var(--s0)} .role{ background:transparent;border:1px solid var(--field-line);color:var(--chalk);cursor:pointer; font-family:var(--mono);font-size:var(--t--1);letter-spacing:.04em; padding:var(--s1) var(--s2);border-radius:0; transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .role:hover{border-color:var(--white)} .role.sel{background:var(--white);border-color:var(--white);color:var(--field-bg)} #otherWrap{margin-top:var(--s1);display:none} #otherWrap.show{display:block} .check{display:flex;gap:var(--s1);align-items:flex-start;cursor:pointer; border-top:1px solid var(--field-rule);padding-top:var(--s3);margin:var(--s4) 0 var(--s3)} .check input{margin:3px 0 0;width:18px;height:18px;flex:0 0 auto;accent-color:var(--gold)} .check span{font-size:var(--t--1);line-height:1.55;color:var(--field-text)} .err{display:none;font-family:var(--mono);font-size:var(--t--2);color:var(--field-err); margin-top:var(--s0);letter-spacing:.03em} .err.on{display:block} .done{display:none;border:1px solid var(--wash);padding:var(--s5);max-width:640px} .done.on{display:block} .done h3{margin:0 0 var(--s1);font-family:var(--display);font-weight:700; font-size:var(--t-2);letter-spacing:-.03em;color:var(--wash)} .done p{color:var(--field-text);font-size:var(--t--1);margin:0 0 var(--s1)} /* ---------- convenors ---------- */ .council{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4); max-width:860px;margin:var(--s4) 0 0} .council section{border-top:2px solid var(--ink);padding-top:var(--s2)} .council h3{margin:0 0 var(--s-1);font-size:var(--t-0);font-weight:600;letter-spacing:-.01em} .council .abbr{font-family:var(--mono);font-size:var(--t--2);letter-spacing:var(--track-label); color:var(--blue);text-transform:uppercase} .council p{font-size:var(--t--1);color:var(--stone);margin:var(--s1) 0 0} .names{list-style:none;padding:0;margin:var(--s1) 0 0} .names li{padding:var(--s0) 0;border-bottom:1px solid var(--rule); font-size:var(--t--1);font-weight:500} .venue{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);max-width:900px;align-items:start} .venue .box{border:1px solid var(--rule);padding:var(--s3);background:var(--paper)} .venue .box h3{margin:0 0 var(--s1);font-family:var(--mono);font-size:var(--t--2); letter-spacing:var(--track-label);text-transform:uppercase;color:var(--stone);font-weight:400} .venue .box p{margin:0;font-size:var(--t--1)} .venue .addr{font-family:var(--display);font-weight:700;font-size:var(--t-2); letter-spacing:-.03em;line-height:1.15;margin:0 0 var(--s1)} footer{background:var(--ink);color:var(--field-dim);padding:var(--s8) var(--gut)} /* GOLD 3 of 3 — rule above the footer row, on ink. 13.9:1. */ .foot{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:var(--s4); justify-content:space-between;align-items:flex-end; border-top:3px solid var(--gold);padding-top:var(--s5)} .foot .mark{font-family:var(--heb);font-weight:700;font-size:var(--d-1); color:var(--white);line-height:1;direction:rtl} .foot .mark small{display:block;font-family:var(--display);font-weight:700; font-size:var(--t--1);letter-spacing:-.03em;margin-top:var(--s1);direction:ltr} .foot p{font-family:var(--mono);font-size:var(--t--2);line-height:1.9; letter-spacing:.04em;margin:0;max-width:44ch} .foot a{color:var(--wash);text-decoration:none} .foot a:hover{text-decoration:underline} /* ---------- motion ---------- */ .rise{opacity:0;transform:translateY(16px); transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)} .rise.in{opacity:1;transform:none} .dec-line{opacity:0;transform:translateY(28px)} .loaded .dec-line{opacity:1;transform:none; transition:opacity var(--dur-4) var(--ease),transform var(--dur-4) var(--ease)} .loaded .dec-line:nth-child(2){transition-delay:.13s} .loaded .dec-line:nth-child(3){transition-delay:.26s} @media (max-width:900px){ .cols{columns:1} .facts{grid-template-columns:repeat(2,1fr)} .fact:nth-child(2){border-right:0} .fact:nth-child(-n+2){border-bottom:1px solid var(--rule)} .terms{grid-template-columns:1fr} .council,.venue,.groups{grid-template-columns:1fr} } @media (max-width:820px){ .band{grid-template-columns:1fr} .band .label{position:static;text-align:left;padding:clamp(var(--s5),9vw,var(--s7)) 0 var(--s1); border-top:2px solid var(--ink);margin-top:0} .band .body{border-left:0;padding:0 0 clamp(var(--s5),9vw,var(--s7))} .band.tight .body{padding-bottom:0} .dec-line .tl{margin-top:var(--s-1)} .slot{grid-template-columns:1fr;gap:var(--s-1)} .hero{padding-top:clamp(var(--s7),12vh,var(--s9))} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important} .rise,.dec-line{opacity:1;transform:none} } .after{margin-top:var(--s4);color:var(--stone);font-size:var(--t--1);max-width:52ch} /* --- motion --------------------------------------------------------- --fill runs 0..1 as each band crosses the viewport, set from js/motion.js. The spine is drawn by the act of reading it. */ [data-motion="on"] .band .body{position:relative} [data-motion="on"] .band .body::before{ content:"";position:absolute;left:-1px;top:0;width:1px;height:100%; background:var(--blue);transform:scaleY(var(--fill,0));transform-origin:top; } [data-motion="on"] .dark .band .body::before, [data-motion="on"] .apply .band .body::before{background:var(--wash)} [data-motion="on"] .split .w{display:inline-block;overflow:hidden; vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em} [data-motion="on"] .split .wi{display:inline-block;transform:translateY(108%); transition:transform var(--dur-4) var(--ease)} [data-motion="on"] .split.in .wi{transform:none} /* The active slot gains ground; nothing is dimmed. --stone on the ground is 4.03:1 before any fade, so dimming would break AA. */ [data-motion="on"] .prog.focusing .slot{transition:background var(--dur-3) var(--ease)} [data-motion="on"] .prog.focusing .slot.near{background:var(--paper)} [data-ground="paper"][data-motion="on"] .prog.focusing .slot.near{background:var(--white)} [data-motion="on"] .prog.focusing .slot.near .kind{color:var(--blue)} .bar-mark{display:none} [data-motion="on"] .bar-mark{ display:block;font-family:var(--heb);font-weight:700;font-size:var(--t-1); line-height:1;direction:rtl;color:var(--blue); opacity:0;transform:translateY(4px); transition:opacity var(--dur-3) var(--ease) .12s,transform var(--dur-3) var(--ease) .12s; } #bar.on .bar-mark{opacity:1;transform:none} @media (max-width:820px){ [data-motion="on"] .band .body::before{display:none} } @media (prefers-reduced-motion:reduce){ [data-motion="on"] .split .wi{transform:none} [data-motion="on"] .prog.focusing .slot.near{background:transparent} [data-motion="on"] .bar-mark{opacity:1;transform:none} [data-motion="on"] .band .body::before{display:none} } /* ================================================================== ART LAYER — data-art="on" A hybrid of the plain TMU pass and the C2 merge: the TMU craft and colour discipline, the C2 sense of scale, and a geometry of its own. The geometry is the Magen David taken apart. A hexagram is two equilateral triangles interlocked, so the page is built from triangles rather than boxes — 30/60 angles, slanted colour fields, and a star that assembles itself from two rotating halves instead of being stamped on. That is also why it is triangles. TMU's primary graphic device is "overlapping boxes containing photography, text and brand colours." Rectangular colour blocking behind headlines is precisely their device and precisely what an independent brand may not reproduce. Triangles are not theirs. Colour is a blue ladder, all verified TMU values, because their own guidance says the secondary palette exists to "expand the range of blue and gold, adding tonality and texture." Tints are derived with color-mix() from official values rather than eyeballed, so nothing here is an invented hex. ================================================================== */ [data-art="on"]{ --navy-rule:#2A5490; /* dividers on the navy field */ --navy-label:#9FB6D6; /* 6.26:1 on #002D72 */ --navy:#002D72; /* TMU Navy Blue, PMS 288C */ --blue-mid:#0077C8; /* TMU Medium Blue, PMS 3005C */ --blue-bright:#00A9EF; /* TMU Bright Blue, PMS 2995C */ --blue-light:#5BC2F4; /* TMU Light Blue, PMS 2985C */ --tint:color-mix(in srgb, var(--blue-light) 16%, var(--white)); --tint-deep:color-mix(in srgb, var(--blue-light) 30%, var(--white)); --slant:2.6vw; /* one slant value for every angled field */ } /* --- slanted colour fields --------------------------------------- The colour sits on a pseudo-element behind the content rather than clipping the section itself, so the sticky section labels and the spine are never cut by the angle. */ /* The hexagram bleeds past the right edge on purpose. overflow-x:clip rather than hidden — clip does not create a scroll container, so the sticky section labels keep working. hidden would silently kill them. */ [data-art="on"],[data-art="on"] body{overflow-x:clip} [data-art="on"] .field{position:relative;isolation:isolate} [data-art="on"] .field::before{ content:"";position:absolute;left:0;right:0; top:calc(var(--slant) * -1);bottom:calc(var(--slant) * -1); background:var(--field-colour,transparent);z-index:-1; clip-path:polygon(0 var(--slant),100% 0,100% calc(100% - var(--slant)),0 100%); transform:scaleY(0);transform-origin:top; transition:transform var(--dur-4) var(--ease); } [data-art="on"] .field.in::before{transform:scaleY(1)} [data-art="on"] .field-navy{--field-colour:var(--navy)} [data-art="on"] .field-tint{--field-colour:var(--tint)} [data-art="on"] .field-blue{--field-colour:var(--blue)} /* the apply block's own flat fill steps aside so the angle can show */ [data-art="on"] .apply{background:transparent} /* Questions on navy rather than ink. This carries its own full on-dark treatment rather than leaning on the [data-bands] layer — the hybrid does not set data-bands, and inheriting ink text onto a navy field measures 1.44:1. Every value below is verified against #002D72 further down. */ [data-art="on"] .field-navy{color:var(--chalk)} [data-art="on"] .field-navy h2{color:var(--chalk)} [data-art="on"] .field-navy .lede{color:#CFE0F0} [data-art="on"] .field-navy .band .label{color:var(--navy-label)} [data-art="on"] .field-navy .band .label span{color:var(--chalk)} [data-art="on"] .field-navy .band .body{border-left-color:var(--navy-rule)} [data-art="on"] .field-navy .qs{border-top-color:var(--navy-rule)} [data-art="on"] .field-navy .q{border-bottom-color:var(--navy-rule)} [data-art="on"] .field-navy .q h3{color:var(--chalk)} [data-art="on"] .field-navy .q.open h3{color:var(--gold)} [data-art="on"] .field-navy .q .mark{border-color:var(--chalk)} [data-art="on"] .field-navy .q .mark::before, [data-art="on"] .field-navy .q .mark::after{background:var(--chalk)} [data-art="on"] .field-navy .q.open .mark{background:var(--gold);border-color:var(--gold)} [data-art="on"] .field-navy .q.open .mark::before, [data-art="on"] .field-navy .q.open .mark::after{background:var(--navy)} [data-art="on"] .field-navy .q .ans p, [data-art="on"] .field-navy .after{color:#CFE0F0} [data-art="on"] .field-navy :focus-visible{outline-color:var(--white)} /* venue on the light tint */ [data-art="on"] .field-tint .venue .box{background:var(--white);border-color:var(--tint-deep)} /* --- the hexagram ------------------------------------------------- Gold outline on the blue field: a graphic element on a blue ground, never text, never on white — which is the only place the brief allows gold to go. Two triangles, each drawn by stroke-dashoffset and rotated into register. It assembles; it is not placed. */ .magen{display:none} [data-art="on"] .magen{ display:block;position:absolute;pointer-events:none; top:calc(var(--band-y) * -0.35);right:calc(var(--slant) * -2); width:clamp(220px,30vw,460px);aspect-ratio:1;z-index:-1;opacity:.9; } [data-art="on"] .magen svg{width:100%;height:100%;overflow:visible} /* transform-box:view-box so 50% 50% resolves to the viewBox centre (50,50), which both triangles share. fill-box would rotate each about its own bounding-box centre — and an equilateral triangle's bbox centre is not its centroid, so the two halves would wobble past each other instead of closing into register. */ [data-art="on"] .magen polygon{ fill:none;stroke:var(--gold);stroke-width:1.25;vector-effect:non-scaling-stroke; stroke-dasharray:400;stroke-dashoffset:400; transform-box:view-box;transform-origin:50% 50%; transition:stroke-dashoffset 1.4s var(--ease),transform 1.4s var(--ease); } [data-art="on"] .magen .t-up polygon{transform:rotate(-30deg)} [data-art="on"] .magen .t-dn polygon{transform:rotate(30deg);transition-delay:.22s} [data-art="on"] .magen.in .t-up polygon, [data-art="on"] .magen.in .t-dn polygon{stroke-dashoffset:0;transform:rotate(0deg)} /* --- a little more scale than 04, a little less than 05 ----------- */ [data-art="on"] h2{ font-size:clamp(var(--t-2),5.6vw,var(--d-3)); line-height:var(--lh-tight);letter-spacing:-.038em; text-transform:uppercase;max-width:14ch;margin-bottom:var(--s5); } [data-art="on"] h2.lg{font-size:clamp(var(--d-1),8vw,var(--d-4));max-width:10ch} [data-art="on"] h2.sm{font-size:clamp(var(--t-2),3.6vw,var(--d-2)); line-height:.98;letter-spacing:-.03em;max-width:17ch} @media (max-width:820px){ [data-art="on"]{--slant:5vw} [data-art="on"] .magen{width:190px;top:calc(var(--band-y) * -0.15)} } @media (prefers-reduced-motion:reduce){ [data-art="on"] .field::before{transform:scaleY(1)} [data-art="on"] .magen polygon{stroke-dashoffset:0} [data-art="on"] .magen .t-up,[data-art="on"] .magen .t-dn{transform:none} } /* ================================================================== IDENTITY: THE LATTICE data-pattern="on" ------------------------------------------------------------------ One idea. A Magen David of edge 3 placed on a triangular lattice of edge 1 has all six vertices on lattice nodes and all six edges lying along lattice lines — verified, not asserted. So the star is not drawn onto the grid. It is already in the grid, and the identity is the act of drawing attention to six lines out of seventy-one. That is the same move the symposium is making: naming a structure that was always present and is easier not to see. It gives the page a graphic language that is Jewish without being ornamental, and geometric without being TMU's boxes. The system has two states of the same geometry: .lat-mark an SVG patch — grid plus the six highlighted edges --lat-* a CSS-gradient tiling of the identical lattice, for grounds, at any size, no markup ================================================================== */ [data-pattern="on"]{ --lat-h:38px; /* row height; edge = h / 0.866 */ /* 9%, not 13%. The lattice sits behind text, so the honest contrast test is a glyph landing exactly on a 1px line. At 13% that put --stone at 4.366:1 — a fail. 11% gives 4.505, which is passing by 0.005 and not worth shipping. 9% gives 4.679 with margin, and ink stays at 14.99. On dark grounds white text has headroom (9.03:1) so 13% stays. */ --lat-ink:color-mix(in srgb, var(--blue) 9%, transparent); --lat-on-dark:color-mix(in srgb, var(--white) 13%, transparent); } /* --- the tiling. Three line families at 0/60/120, one spacing. --- */ [data-pattern="on"] .lat-ground{position:relative;isolation:isolate} [data-pattern="on"] .lat-ground::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image: repeating-linear-gradient(0deg, var(--lat-c,var(--lat-ink)) 0 1px, transparent 1px var(--lat-h)), repeating-linear-gradient(60deg, var(--lat-c,var(--lat-ink)) 0 1px, transparent 1px var(--lat-h)), repeating-linear-gradient(120deg, var(--lat-c,var(--lat-ink)) 0 1px, transparent 1px var(--lat-h)); /* fades out before it reaches running text, so nothing sits on a grid */ -webkit-mask-image:linear-gradient(to bottom, #000, transparent 62%); mask-image:linear-gradient(to bottom, #000, transparent 62%); opacity:0;transition:opacity 1.1s var(--ease); } [data-pattern="on"] .lat-ground.in::after{opacity:1} [data-pattern="on"] .field-navy{--lat-c:var(--lat-on-dark)} [data-pattern="on"] .field-blue{--lat-c:var(--lat-on-dark)} /* the mark replaces the standalone hexagram over the apply field */ [data-pattern="on"] .magen{ top:calc(var(--band-y) * -0.5);right:calc(var(--slant) * -3); width:clamp(300px,42vw,660px);aspect-ratio:15 / 10.3923;opacity:1; } [data-pattern="on"] .magen svg{width:100%;height:100%} @media (max-width:820px){ [data-pattern="on"]{--lat-h:26px} [data-pattern="on"] .magen{width:280px;right:calc(var(--slant) * -2)} } @media (prefers-reduced-motion:reduce){ [data-pattern="on"] .lat-ground::after{opacity:1} } /* ================================================================== FULL TMU SECONDARY PALETTE + BANDED HEADER data-hero="bands" ------------------------------------------------------------------ The complete verified palette as tokens. The warm three cannot ever be text: #FFA300 is 2.2:1 on white, #FFC609 1.6:1, #FFEE00 1.2:1. They are graphic fields only, and only in the lattice/mark system. ================================================================== */ [data-pattern="on"]{ --amber:#FFA300; /* PMS 130U/137C */ --straw:#FFC609; /* PMS 109U/123C */ --acid:#FFEE00; /* PMS Yellow U */ --grey:#999999; /* Dark Grey */ } /* Below 820px there is no empty column: the apply heading spans the full measure, and any overlaid field lands on it — measured, 18 filled cells under the heading at 390 even with the mask. Rather than fake it with opacity, the graphic field steps out on small screens and the lattice ground carries the identity there. This is the one part of the system I would want to solve properly rather than sidestep. */ /* --- the stair --------------------------------------------------- */ [data-hero="stair"]{--sl:clamp(10px,1.5vw,26px)} [data-hero="stair"] .dec-line{ --step:0px;position:relative;isolation:isolate; padding:clamp(var(--s2),2.2vw,var(--s4)) 0 clamp(var(--s2),2.2vw,var(--s4)) var(--step); } [data-hero="stair"] .dec-line:nth-child(2){--step:clamp(14px,4.5vw,72px)} [data-hero="stair"] .dec-line:nth-child(3){--step:clamp(28px,9vw,144px)} [data-hero="stair"] .dec-line::before{ content:"";position:absolute;top:0;bottom:0; left:calc(50% - 50vw + var(--step));right:calc(50% - 50vw);width:auto; z-index:-1;background:var(--band); clip-path:polygon(0 var(--sl),100% 0,100% calc(100% - var(--sl)),0 100%); transform:scaleX(0);transform-origin:left; transition:transform .9s var(--ease); } [data-hero="stair"] .dec-line:nth-child(1){--band:var(--blue-deep)} [data-hero="stair"] .dec-line:nth-child(2){--band:var(--blue)} [data-hero="stair"] .dec-line:nth-child(3){--band:var(--ink)} [data-hero="stair"] .dec-line:nth-child(2)::before{transition-delay:.13s} [data-hero="stair"] .dec-line:nth-child(3)::before{transition-delay:.26s} [data-hero="stair"] .loaded .dec-line::before{transform:scaleX(1)} [data-hero="stair"] .dec-line .glyph{color:var(--white)} [data-hero="stair"] .dec-line .tl{color:var(--wash)} [data-hero="stair"] .dec-line.en .glyph{color:var(--gold)} /* entrance along the lattice's own 60deg axis, alternating */ [data-hero="stair"] .dec-line{transform:translate(-24px,-42px)} [data-hero="stair"] .dec-line:nth-child(2){transform:translate(24px,42px)} [data-hero="stair"] .dec-line:nth-child(3){transform:translate(-24px,-42px)} [data-hero="stair"] .loaded .dec-line{transform:none} /* the identity now survives small screens, because nothing overlays type */ @media (prefers-reduced-motion:reduce){ [data-hero="stair"] .dec-line{transform:none} [data-hero="stair"] .dec-line::before{transform:scaleX(1)} } /* ================================================================== HERO COMPACTION + THE THIRD BAND ------------------------------------------------------------------ The hero measured 2097px at 1440 — a full viewport of declaration before the argument starts. The declaration itself is 840px of that and is not negotiable, so every reduction comes from the space around it: padding, gaps and the band's own leading. The third band leaves black. Navy -> TMU Blue -> Medium Blue reads as one descending ladder instead of two blues and a full stop. ================================================================== */ [data-hero="stair"] .hero{ min-height:0; } /* third band: Medium Blue, not ink */ [data-hero="stair"] .dec-line:nth-child(3){--band:var(--blue-mid)} /* Band 3 is now the lightest step (#0077C8), so --wash no longer clears it: the transliteration measured 2.81:1 and gold on it only 3.46:1. Both go white — 4.70:1, and the resolving line reading in plain white against the lightest band is the right end for the ladder anyway. Gold stays in the field, where it has an ink or deep-blue ground under it. */ [data-hero="stair"] .dec-line:nth-child(3) .glyph{color:var(--white)} [data-hero="stair"] .dec-line:nth-child(3) .tl{color:var(--white)} /* ================================================================== HERO COMPACTION, SECOND PASS ------------------------------------------------------------------ At 1714px the declaration bands were 792px of it — 46% — and the declaration's size is fixed by CLAUDE.md. So this pass takes the remaining 922px of scaffolding and roughly halves the parts of it that are pure air: page padding, the gaps between blocks, band leading, and the closing band's own height. Nothing here changes a type size. The declaration is still 212.4px. ================================================================== */ [data-hero="stair"] .hero{ padding-top:clamp(var(--s4),4.5vh,var(--s6)); padding-bottom:var(--s4); } [data-hero="stair"] .dec{margin-top:clamp(var(--s2),2vw,var(--s3))} [data-hero="stair"] .dec-line{ padding-top:clamp(var(--s0),1vw,var(--s2)); padding-bottom:clamp(var(--s0),1vw,var(--s2)); } [data-hero="stair"] .gloss{margin-top:var(--s2);min-height:0} [data-hero="stair"] .hero-title{margin-top:clamp(var(--s3),3vw,var(--s5))} [data-hero="stair"] .hero-cta{margin-top:var(--s2)} [data-hero="stair"] .facts{margin-top:clamp(var(--s3),3vw,var(--s5))} [data-hero="stair"] .fact{padding-top:var(--s1);padding-bottom:var(--s2)} /* The declaration block is 779px of the remaining 1453 — 54%. The only way further down is its leading, so: line-height .92 -> .86. This is a leading change, NOT a size change; the glyphs stay at 212.4px, which is what CLAUDE.md protects. Three stacked lines at .86 also sit as one block rather than three, which suits a declaration. Flagged because it is the one rule here that touches the declaration's setting — revert this block alone to restore .92 and about 38px. */ [data-hero="stair"] .dec-line .glyph{line-height:.86} [data-hero="stair"] .dec-line .tl{margin-top:var(--s-1)} [data-hero="stair"] .facts .fact{padding-bottom:var(--s1)} /* ================================================================== THE DECLARATION FITS THE VIEWPORT ------------------------------------------------------------------ The declaration was sized on width alone, so on any laptop shorter than about 900px the third line and the gloss fell below the fold. That breaks the element rather than protecting it: CLAUDE.md names "the gloss that appears on hover and focus" as part of the signature, and a gloss you hover to compare three lines is useless if you can only ever see two of them at once. So size is now bounded by height as well as width. The vh term is derived, not guessed: above the declaration sits ~91px of padding, meta and margin; below it ~72px of gloss and ~24px of breathing room. Each band costs 0.86S of leading plus ~52px of transliteration and padding. Solving 2.58S + 156 <= vh - 187 gives S <= 0.387vh - 133px, which is the calc below. At 900px tall it resolves to 212.4px — unchanged. It only ever reduces on screens that could not show the whole thing anyway. ================================================================== */ /* One full step down the display scale: the Hebrew ceiling goes --d-6 -> --d-5 (212.4 -> 150.2), the English --d-5 -> --d-4 (150.2 -> 106.2). The 1.414 ratio between the two is preserved, so the pair still reads as one system rather than two arbitrary sizes. The height bound tightens with it — 30svh - 95px for the Hebrew, 21svh - 66px for the English — so on a 900px window the whole declaration, the gloss AND the top of the title now sit above the fold instead of the declaration filling it alone. */ /* Restore the small-screen floor. The step down was aimed at desktop, where the declaration was overflowing the fold; on a phone it always fit, and the new clamp had pulled 390px from 75.1 to 53.1px for no benefit. Floors go back to --d-3 / --d-2 while the ceilings stay one step down at --d-5 / --d-4. The 1.414 ratio between Hebrew and English holds at both ends. */ [data-hero="stair"] .dec-line .glyph{ font-size:max(var(--d-3), min(clamp(var(--d-3),12vw,var(--d-5)), calc(30svh - 95px))); } [data-hero="stair"] .dec-line.en .glyph{ font-size:max(var(--d-2), min(clamp(var(--d-2),8.5vw,var(--d-4)), calc(21svh - 66px))); } @keyframes intf{from{transform:rotate(3.1deg)}to{transform:rotate(6.8deg)}} /* ================================================================== IDENTITY, FIFTH PROPOSAL: THREE BANDS data-identity="bands" ------------------------------------------------------------------ A hexagram is three pairs of parallel lines at 0, 60 and 120 degrees. Give each pair thickness and it becomes a band. Lay the three bands over each other and the region all three share is the star's central hexagon; the six pairwise overlaps are its points. So the figure is produced, not drawn. Three marks instead of twelve — that is the simplification — and it only resolves into a Magen David once you look for it. Until then it is three crossing bands. One hue at partial alpha does the hierarchy: one band light, two mid, three darkest. No gradients, no second accent, no outline. Each band slides in along its own axis and locks. ================================================================== */ [data-identity="bands"]{--bandc:color-mix(in srgb, var(--blue) 42%, transparent)} [data-identity="bands"] .field-blue, [data-identity="bands"] .field-navy{--bandc:color-mix(in srgb, var(--white) 20%, transparent)} [data-identity="bands"] .oj-band{width:100%;height:100%;display:block;overflow:visible} [data-identity="bands"] .oj-band .bd{ fill:var(--bandc); transform-box:view-box;transform:translateX(-130px); transition:transform 1s var(--ease) calc(var(--i,0) * .16s); } [data-identity="bands"] .in .oj-band .bd{transform:none} /* the mark is square now, so the apply placement squares up with it */ [data-identity="bands"] .magen{ top:calc(var(--band-y) * -0.55);right:calc(var(--slant) * -2); width:clamp(300px,34vw,540px);aspect-ratio:1;opacity:1; -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 34%); mask-image:linear-gradient(to right, transparent 0%, #000 34%); } [data-identity="bands"] .field-blue.lat-ground::after{display:none} /* the hero band keeps the slash rule, simplified to seven marks */ [data-identity="bands"]{--f1:var(--blue);--f2:var(--blue-mid);--f3:var(--blue-bright);--f4:var(--gold)} [data-identity="bands"] .oj-slash{width:100%;height:100%;display:block} [data-identity="bands"] .oj-slash rect{ transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%; transition:transform .62s var(--ease) var(--d,0s); } [data-identity="bands"] .in .oj-slash rect{transform:scaleY(1)} [data-identity="bands"] .fld-hero{ position:relative;margin-top:clamp(var(--s2),2.5vw,var(--s4)); height:clamp(26px,3.2vw,44px);overflow:hidden; -webkit-mask-image:linear-gradient(to right,#000 0%,#000 58%,transparent 97%); mask-image:linear-gradient(to right,#000 0%,#000 58%,transparent 97%); } [data-identity="bands"] .fld-hero .oj-slash{position:absolute;inset:0} @media (max-width:820px){ [data-identity="bands"] .fld-hero{height:clamp(22px,6vw,32px)} [data-identity="bands"] .magen{display:none} } @media (prefers-reduced-motion:reduce){ [data-identity="bands"] .oj-band .bd{transform:none;transition:none} [data-identity="bands"] .oj-slash rect{transform:scaleY(1);transition:none} } /* Alpha raised a step. At 42%/20% the jump from two bands to three measured 1.34:1, which left the central hexagon almost invisible; the star has to resolve when you look for it, not stay hidden. 48%/26% widens the steps while keeping the mark quiet. Nothing depends on it for legibility — no text sits on the graphic at any width. */ [data-identity="bands"]{--bandc:color-mix(in srgb, var(--blue) 48%, transparent)} [data-identity="bands"] .field-blue, [data-identity="bands"] .field-navy{--bandc:color-mix(in srgb, var(--white) 26%, transparent)} /* ---------- TMJew lockup --------------------------------------------- The supplied mark replaces the "TMJew" heading. The word is kept in the DOM for screen readers and search, visually hidden — an carries an accessible name but the section still wants a real heading. */ .vis-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0; } .tmjew-lockup{margin:0 0 var(--s3)} .tmjew-mark{display:block;width:clamp(96px,11vw,168px);height:auto} /* The alliance line runs the full measure and breaks over two lines rather than sitting in the 28ch column the other ledes use. text-wrap:balance splits it evenly instead of leaving a short second line. */ .lede-wide{ max-width:none;text-wrap:balance; font-size:clamp(var(--t-1),2.6vw,var(--d-1)); line-height:1.24;letter-spacing:-.02em; } @media (max-width:820px){ .lede-wide{text-wrap:pretty;font-size:clamp(var(--t-1),4.6vw,var(--t-2))} } /* ---------- the alliance line --------------------------------------- One step down the scale (--d-1 -> --t-2) and up two weights. It is a definition, not a lede — it should read as a solid statement rather than as display type competing with the mark beside it. */ .lede-wide{ font-size:clamp(var(--t-1),2.1vw,var(--t-2)); font-weight:600;line-height:1.3;letter-spacing:-.015em; } @media (max-width:820px){ .lede-wide{font-size:clamp(var(--t-0),4.2vw,var(--t-1))} } /* ---------- the mark, assembling ------------------------------------- TMJew's own mark is an upright triangle crossed with an inverted one — the same construction the three-band identity is built from. So it assembles the same way: the two triangles arrive from opposite sides along the 60-degree axes and lock, and the wordmark resolves after them. Nothing is recoloured or redrawn; only the timing is ours. */ .tmjew-mark{overflow:visible} .tmjew-mark .tm-y, .tmjew-mark .tm-b, .tmjew-mark .tm-w{ transform-box:view-box;transform-origin:50% 50%; transition:transform 1.05s var(--ease), opacity .8s var(--ease); } .tmjew-mark .tm-y{transform:translate(190px,150px) rotate(14deg);opacity:0} .tmjew-mark .tm-b{transform:translate(-190px,-150px) rotate(-14deg);opacity:0} .tmjew-mark .tm-w{opacity:0;transition-delay:.62s} .tmjew-lockup.in .tmjew-mark .tm-y, .tmjew-lockup.in .tmjew-mark .tm-b{transform:none;opacity:1} .tmjew-lockup.in .tmjew-mark .tm-b{transition-delay:.16s} .tmjew-lockup.in .tmjew-mark .tm-w{opacity:1} .tmjew-lockup{margin:0 0 var(--s4)} .tmjew-mark{width:clamp(128px,15vw,232px)} @media (prefers-reduced-motion:reduce){ .tmjew-mark .tm-y,.tmjew-mark .tm-b{transform:none;opacity:1} .tmjew-mark .tm-w{opacity:1} } /* balance is wrong here now. At 37px it split a long line evenly and both halves ran near the full measure; at 26.6px it just makes two short lines (651px and 612px in a 913px column) and the line stops spanning the width. Natural wrapping fills line one to the measure and lets line two carry the remainder, which is what "across the width" actually looks like. */ .lede-wide{text-wrap:pretty} /* ---------- the wordmark --------------------------------------------- "Openly Jewish" is the conference's name, not a headline, so it is set as a lockup: one tracking value, one weight, tightened well past the body scale, and identical in the hero and in the docked bar. Setting the two to the same specification is what makes it read as a mark rather than as type that happens to repeat. */ .wm,.bar-name{ font-family:var(--display);font-weight:700; letter-spacing:-.055em;font-feature-settings:"kern" 1; } .wm{display:block;line-height:.94;margin-bottom:var(--s1)} .hero-title h1{letter-spacing:0} /* the span owns the tracking now */ .hero-title h1 em{letter-spacing:-.012em} /* subtitle keeps its own */ /* ---------- the declaration gloss ------------------------------------ The standing instruction is gone. It was an instruction in a hero, which is a tell, and it occupied the one place on the page where the writing should be doing something. The space is still reserved and the rule above it stays, so nothing shifts when a note appears. The affordance moves onto the lines: each transliteration grows a short rule on hover and focus — the same line vocabulary the spine uses — and the other two lines dim, which they already did. The sentence survives visually hidden for assistive tech, which gets nothing from dimming or from a drawn rule. */ .gloss{min-height:3.2em} .gloss:empty{min-height:3.2em} .dec-line .tl::after{ content:"";display:inline-block;vertical-align:.26em; width:0;height:1px;margin-left:0;background:currentColor;opacity:.85; transition:width .34s var(--ease), margin-left .34s var(--ease); } .dec-line:hover .tl::after, .dec-line:focus-visible .tl::after, .dec-line.act .tl::after{width:2.4em;margin-left:.7em} @media (prefers-reduced-motion:reduce){ .dec-line .tl::after{transition:none} } /* Reserve the note's height so nothing moves when one appears. All three notes measure exactly 91px at desktop, so --s8 (96px) clears them with a little air; the earlier [data-hero="stair"] rule had set min-height:0 and the block was jumping 26px -> 91px on every hover. Narrower columns wrap the notes further, hence the taller reserve below 820px. */ [data-hero="stair"] .gloss{min-height:var(--s8)} @media (max-width:820px){ [data-hero="stair"] .gloss{min-height:var(--s9)} } /* ---------- notes and asides ----------------------------------------- These four were inline style attributes carrying literal 11.5 / 12 / 12.5px font sizes — the only type on the page that was off the scale, and invisible to a stylesheet audit because it lived in the markup. */ .err-ck{margin-top:calc(var(--s1) * -1);margin-bottom:var(--s2)} .form-note{font-family:var(--mono);font-size:var(--t--2);color:var(--field-dim); margin-top:var(--s2);letter-spacing:.03em} .done-note{margin-top:var(--s2);font-family:var(--mono);font-size:var(--t--1)} .done-note a{color:var(--wash)} .contact-note{margin-top:var(--s3);font-family:var(--mono);font-size:var(--t--1); letter-spacing:.04em;color:var(--stone)} .contact-note a{color:var(--blue)} .venue .box a{color:var(--blue)} /* ---------- the TMJew wordmark --------------------------------------- Neue Montreal Bold leads the stack. It is a commercial face (Pangram Pangram) and is NOT bundled — there is no licence and no file in /fonts, so it renders only where it is already installed. Everywhere else this falls through to the page's own display face, which is Space Grotesk: self-hosted, and the closest free relative to Neue Montreal's grid-built grotesque. Either way this replaces the Arial in the supplied SVG, which was the real defect — Arial is whatever the viewer's system decides it is. The permanent fix is not a font stack at all: ask TMJew's designer for the wordmark as OUTLINED PATHS. A logo should never be live text. If a licensed woff2 arrives it goes in /fonts and gets an @font-face here, which is a two-line change. */ .tmjew-mark .tm-w{ font-family:'Neue Montreal','PP Neue Montreal',var(--display); font-weight:700; } /* ---------- the mark resolves as you arrive --------------------------- Every graphic on this page except the spine arrived once and then sat still. The mark is the signature, so it is the one that should stay alive — but ambient perpetual motion would be wrong on this subject. So it is driven by position, not by a clock: --mk runs 0..1 as the mark approaches the middle of the viewport, and the three bands counter-rotate by up to 6 degrees against it. The hexagram at the centre is loose as you approach, exact when you are level with it, and loosens again as you leave. The figure resolves at the moment you reach the ask, and nothing moves when you are not scrolling. */ [data-identity="bands"] .oj-band .bd-rot{ transform-box:view-box;transform-origin:50% 50%; transform:rotate(calc((1 - var(--mk,1)) * var(--s,1) * 6deg)); } /* the ground texture drifts, slowly enough to read as depth not motion */ [data-pattern="on"] .lat-ground.in::after{ animation:latdrift 90s linear infinite; } @keyframes latdrift{ from{background-position:0 0,0 0,0 0} to{background-position:0 calc(var(--lat-h) * 4),0 calc(var(--lat-h) * 4),0 calc(var(--lat-h) * -4)} } @media (prefers-reduced-motion:reduce){ [data-identity="bands"] .oj-band .bd-rot{transform:none} [data-pattern="on"] .lat-ground.in::after{animation:none} } /* ================================================================== HERO ON BLUE data-hero-field="blue" ------------------------------------------------------------------ The stair's three bands existed to give the declaration a ground to sit on. If the whole hero is that ground, they are redundant — so they come off, and what is left is one solid TMU Blue field with the declaration stepping across it. Fewer parts, more field. That is the whole move. Everything in the hero inverts with it, and every pair is verified further down rather than assumed: white 8.38:1, gold 6.18:1 on the large display line only, wash 5.02:1. ================================================================== */ [data-hero-field="blue"] .hero{ position:relative;isolation:isolate;color:var(--white); padding-left:var(--gut);padding-right:var(--gut); } [data-hero-field="blue"] .hero::before{ content:"";position:absolute;z-index:-2; top:0;bottom:0;left:calc(50% - 50vw);width:100vw; background:var(--blue); } /* the bands go; the stair survives as the step of the type itself */ [data-hero-field="blue"] .dec-line::before{display:none} [data-hero-field="blue"] .dec-line .glyph{color:var(--white)} [data-hero-field="blue"] .dec-line.en .glyph{color:var(--gold)} [data-hero-field="blue"] .dec-line .tl{color:var(--wash)} [data-hero-field="blue"] .dec-line:nth-child(3) .glyph{color:var(--gold)} [data-hero-field="blue"] .dec-line:nth-child(3) .tl{color:var(--wash)} [data-hero-field="blue"] .hero-top{color:var(--wash)} [data-hero-field="blue"] .hero-top .live{color:var(--gold)} [data-hero-field="blue"] .hero-top .live::before{background:var(--gold)} [data-hero-field="blue"] .gloss{color:var(--wash);border-top-color:#3E7BB5} [data-hero-field="blue"] .gloss b{color:var(--white)} [data-hero-field="blue"] .wm{color:var(--white)} [data-hero-field="blue"] .hero-title h1 em{color:var(--wash)} [data-hero-field="blue"] .hero-cta .note{color:var(--wash)} [data-hero-field="blue"] .facts{border-top-color:var(--white)} [data-hero-field="blue"] .fact{border-right-color:#3E7BB5} [data-hero-field="blue"] .fact dt{color:var(--wash)} [data-hero-field="blue"] .fact dd{color:var(--white)} [data-hero-field="blue"] .fact dd a{color:var(--gold)} /* the buttons invert: solid white, and a white-ruled ghost */ [data-hero-field="blue"] .hero-cta .btn{background:var(--white);color:var(--blue)} [data-hero-field="blue"] .hero-cta .btn:hover{background:var(--wash);color:var(--blue-deep)} [data-hero-field="blue"] .hero-cta .btn.ghost{background:transparent;color:var(--white); box-shadow:inset 0 0 0 1px var(--white)} [data-hero-field="blue"] .hero-cta .btn.ghost:hover{background:var(--white);color:var(--blue)} [data-hero-field="blue"] .hero :focus-visible{outline-color:var(--white)} /* ground texture and the closing rule both lift onto the field */ [data-hero-field="blue"] .hero.lat-ground{--lat-c:color-mix(in srgb, var(--white) 14%, transparent)} [data-hero-field="blue"] .fld-hero{--f1:#5BC2F4;--f2:#00A9EF;--f4:var(--gold)} /* the stair opens a little as you move down the hero — position driven, like the mark, so nothing moves unless you are scrolling */ [data-hero-field="blue"] .dec-line:nth-child(2){--step:calc(clamp(14px,4.5vw,72px) * (1 + var(--hs,0) * .55))} [data-hero-field="blue"] .dec-line:nth-child(3){--step:calc(clamp(28px,9vw,144px) * (1 + var(--hs,0) * .55))} @media (prefers-reduced-motion:reduce){ [data-hero-field="blue"] .dec-line:nth-child(2), [data-hero-field="blue"] .dec-line:nth-child(3){--hs:0} } /* ================================================================== THE LOADING SCREEN ------------------------------------------------------------------ The illustration is a ring of 55 elements, so it is sequenced by the angle each one sits at: they arrive in one sweep around the circle and the figure closes. Nothing fades in as a lump. The field is the same TMU Blue as the hero, so the overlay does not lift like a curtain — it dissolves and the illustration is simply gone, leaving the ground it was already standing on. #load has no styles at all unless .preload is on , and that flag is set by script. No JavaScript, no overlay, page readable immediately. js/load.js holds the hard cap. ================================================================== */ #load{display:none} .preload #load{ display:grid;place-items:center; position:fixed;inset:0;z-index:200; background:var(--blue); opacity:1;transition:opacity .5s var(--ease); } .preload #load.done{opacity:0;pointer-events:none} .load-in{width:min(46vmin,300px);aspect-ratio:1;color:var(--white)} .oj-illus{width:100%;height:100%;display:block;fill:currentColor} .oj-illus .ry{ transform-box:view-box;transform-origin:212.96px 212.91px; opacity:0;transform:scale(.86) rotate(-16deg); animation:rayIn .45s cubic-bezier(.16,.84,.28,1) var(--a,0s) forwards; } @keyframes rayIn{ to{ opacity:1;transform:none } } /* a quiet second beat: once whole, the figure settles by a hair */ .preload #load .load-in{animation:settle 1.1s var(--ease) forwards} @keyframes settle{ from{transform:scale(.985)} to{transform:scale(1)} } @media (prefers-reduced-motion:reduce){ .oj-illus .ry{animation:none;opacity:1;transform:none} .preload #load .load-in{animation:none} .preload #load{transition-duration:.15s} } /* ================================================================== THE BLUE STOPS ABOVE THE TITLE ------------------------------------------------------------------ The field now belongs to .hero-field, which holds the meta line and the declaration and nothing else. It ends where that box ends, so the wordmark, the CTA and the facts sit back on the page's own ground. The declaration gets a field; the conference gets the page. ================================================================== */ [data-hero-field="blue"] .hero{color:inherit;padding-top:0} [data-hero-field="blue"] .hero::before{display:none} [data-hero-field="blue"] .hero-field{ position:relative;isolation:isolate;color:var(--white); padding-top:clamp(var(--s4),4.5vh,var(--s6)); padding-bottom:clamp(var(--s4),4vw,var(--s6)); } [data-hero-field="blue"] .hero-field::before{ content:"";position:absolute;z-index:-2; top:0;bottom:0;left:calc(50% - 50vw);width:100vw; background:var(--blue); } [data-hero-field="blue"] .hero-field.lat-ground{--lat-c:color-mix(in srgb, var(--white) 14%, transparent)} /* below the field everything returns to the page's own palette */ [data-hero-field="blue"] .wm{color:var(--ink)} [data-hero-field="blue"] .hero-title h1 em{color:var(--stone)} [data-hero-field="blue"] .hero-cta .note{color:var(--stone)} [data-hero-field="blue"] .facts{border-top-color:var(--ink)} [data-hero-field="blue"] .fact{border-right-color:var(--rule)} [data-hero-field="blue"] .fact dt{color:var(--stone)} [data-hero-field="blue"] .fact dd{color:var(--ink)} [data-hero-field="blue"] .fact dd a{color:var(--blue)} [data-hero-field="blue"] .hero-cta .btn{background:var(--blue);color:var(--white)} [data-hero-field="blue"] .hero-cta .btn:hover{background:var(--blue-deep);color:var(--white)} [data-hero-field="blue"] .hero-cta .btn.ghost{background:transparent;color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)} [data-hero-field="blue"] .hero-cta .btn.ghost:hover{background:var(--ink);color:var(--white)} [data-hero-field="blue"] .hero :focus-visible{outline-color:var(--blue)} [data-hero-field="blue"] .hero-field :focus-visible{outline-color:var(--white)} [data-hero-field="blue"] .fld-hero{--f1:var(--blue);--f2:var(--blue-mid);--f4:var(--gold)} /* ================================================================== THE WORDMARK ------------------------------------------------------------------ A conference's name is a mark, not a headline, so it stops behaving like a line of prose: two words stacked, uppercase, set solid at .82 leading and tracked to -.06em so the two lines lock into one shape. The subtitle drops to a mono spec line beneath it — the way a programme cover separates the name of the thing from what it is. ================================================================== */ .wm{display:block;line-height:.82;letter-spacing:-.06em;text-transform:uppercase; margin-bottom:var(--s2)} .wm > span{display:block} .hero-title h1{font-size:clamp(var(--d-1),9.4vw,var(--d-4))} .hero-title h1 em{ display:block;font-style:normal;font-family:var(--mono);font-weight:400; font-size:clamp(var(--t--2),1.15vw,var(--t--1));line-height:1.55; letter-spacing:var(--track-label);text-transform:uppercase; max-width:46ch;margin-top:var(--s1); } .bar-name{text-transform:uppercase;letter-spacing:-.045em} @media (max-width:820px){ .hero-title h1 em{font-size:var(--t--2);letter-spacing:.1em} } /* ================================================================== THE TITLE LOCKUP ------------------------------------------------------------------ Measured before changing anything: the title block ran the full 1000px while the wordmark used about 700 of it, the subtitle sat BELOW at 375px wide, and the buttons sat below that again. Three stacked rows in a column that was mostly empty on the right. So they pair. The mark holds the left, and the subtitle and the actions stack in the space beside it, sitting on the mark's own baseline. Same content, one row instead of three, and the empty right side is now doing work. The subtitle leaves

to make that possible. The heading is now the conference's name alone, which is what a wordmark should be — the full title still carries in and the meta description. ================================================================== */ .hero-title{ display:grid;align-items:end; grid-template-columns:minmax(0,auto) minmax(0,1fr); column-gap:clamp(var(--s4),4.5vw,var(--s7)); max-width:none; } .hero-title h1{margin:0} .hero-aside{display:flex;flex-direction:column;gap:var(--s2);padding-bottom:var(--s1)} .subtitle{ margin:0;font-family:var(--mono);font-weight:400; font-size:clamp(var(--t--2),1.15vw,var(--t--1));line-height:1.55; letter-spacing:var(--track-label);text-transform:uppercase; color:var(--stone);max-width:34ch; } .hero-aside .hero-cta{margin-top:0} /* a little air comes back out of the blue box now the lockup is tighter */ [data-hero-field="blue"] .hero-field{padding-bottom:clamp(var(--s3),3vw,var(--s5))} [data-hero-field="blue"] .facts{margin-top:clamp(var(--s3),2.6vw,var(--s4))} @media (max-width:820px){ .hero-title{grid-template-columns:1fr;row-gap:var(--s2)} .hero-aside{padding-bottom:0} .subtitle{max-width:44ch} } /* ================================================================== THE COLOUR BARS, ON BLUE ------------------------------------------------------------------ The bars are back. They could not simply be re-enabled: three blues laid on a blue field do not separate. Measured every TMU blue against every other, and the field has to sit at one end of the value range for bars to read at all — so the field drops to Navy and the bars ascend away from it. field Navy #002D72 bar 1 Blue #004C9B white type 8.38:1 bar 2 Bright #00A9EF ink type 7.07:1 bar 3 Light #5BC2F4 ink type 9.35:1 The type inverts on the way down, and that is the point rather than a compromise: the sentence moves from deep to bright and from white to black as it arrives in English. "We are here" is the plainest and most legible thing on the page. Bar 1 separates from the field by only 1.55:1, which is too little to define an edge on its own, so every bar carries a hairline on its leading edge. The bars read as objects even where the fill barely does — and the hairline is the same device the spine uses. */ [data-hero-field="blue"] .hero-field::before{background:var(--blue-deep)} [data-hero-field="blue"] .dec-line::before{ display:block; border-top:1px solid color-mix(in srgb, var(--white) 34%, transparent); } [data-hero-field="blue"] .dec-line:nth-child(1)::before{background:var(--blue)} [data-hero-field="blue"] .dec-line:nth-child(2)::before{background:var(--blue-bright)} [data-hero-field="blue"] .dec-line:nth-child(3)::before{background:var(--blue-light)} [data-hero-field="blue"] .dec-line:nth-child(1) .glyph{color:var(--white)} [data-hero-field="blue"] .dec-line:nth-child(1) .tl{color:var(--wash)} [data-hero-field="blue"] .dec-line:nth-child(2) .glyph, [data-hero-field="blue"] .dec-line:nth-child(3) .glyph{color:var(--ink)} [data-hero-field="blue"] .dec-line:nth-child(2) .tl, [data-hero-field="blue"] .dec-line:nth-child(3) .tl{color:var(--blue-deep)} /* the meta and the note sit on the navy field now, not on TMU blue */ [data-hero-field="blue"] .hero-top{color:#9FB6D6} [data-hero-field="blue"] .hero-top .live{color:var(--gold)} [data-hero-field="blue"] .gloss{color:#CFE0F0;border-top-color:#2A5490} [data-hero-field="blue"] .gloss b{color:var(--white)} /* ================================================================== THE BARS, SOBERED ------------------------------------------------------------------ The previous pitch ascended into Bright and Light Blue with near-black type. Those are the two most saturated colours in the TMU range and the inversion read loud — a tech conference, not this one. Reaching for brighter blues to win separation was the wrong instinct. The ladder is now three closely related blues, all carrying white: field Navy #002D72 bar 1 TMU Blue #004C9B bar 2 mixed 55/45 between Blue and Medium bar 3 Medium Blue #0077C8 Nothing cyan, no inversion, one type colour throughout. The steps are deliberately close, which means fill alone cannot define an edge — so the hairline on each bar's leading edge does that work instead, the same device the spine uses. Sober bars, legible edges. ================================================================== */ [data-hero-field="blue"] .dec-line:nth-child(1)::before{background:var(--blue)} [data-hero-field="blue"] .dec-line:nth-child(2)::before{ background:color-mix(in srgb, var(--blue) 55%, var(--blue-mid)); } [data-hero-field="blue"] .dec-line:nth-child(3)::before{background:var(--blue-mid)} [data-hero-field="blue"] .dec-line::before{ border-top:1px solid color-mix(in srgb, var(--white) 42%, transparent); } /* one type colour on all three; the inversion is gone */ [data-hero-field="blue"] .dec-line:nth-child(1) .glyph, [data-hero-field="blue"] .dec-line:nth-child(2) .glyph, [data-hero-field="blue"] .dec-line:nth-child(3) .glyph{color:var(--white)} [data-hero-field="blue"] .dec-line:nth-child(1) .tl, [data-hero-field="blue"] .dec-line:nth-child(2) .tl, [data-hero-field="blue"] .dec-line:nth-child(3) .tl{color:var(--white)} /* ================================================================== THE RESTING STATE ------------------------------------------------------------------ Unhovered, the gloss was a 96px box with a rule across the top of it and nothing inside. Reserved space stops the layout jumping, but a ruled empty box does not read as "waiting" — it reads as broken. So the note stops occupying a box at all. It is positioned into the field's own bottom padding, which means the space it needs is already there and costs nothing at rest: unhovered you see field, not a hole. The rule arrives with the text rather than standing there without it. And the lines say they are interactive without being told to. Each transliteration carries a short tick at rest that extends on hover — present enough to read as a control, quiet enough not to be a label. ================================================================== */ [data-hero-field="blue"] .hero-field{padding-bottom:clamp(112px,11vw,148px)} [data-hero-field="blue"] .gloss{ position:absolute;left:0;right:auto; bottom:clamp(var(--s2),2.4vw,var(--s4)); width:min(60ch,100%); min-height:0;margin:0;padding-top:var(--s1); border-top:1px solid transparent; transition:border-color .28s var(--ease); } [data-hero-field="blue"] .dec.hovering .gloss{border-top-color:#2A5490} /* the resting tick: present, not loud */ .dec-line .tl::after{width:.9em;margin-left:.6em;opacity:.42} .dec-line:hover .tl::after, .dec-line:focus-visible .tl::after, .dec-line.act .tl::after{width:2.4em;margin-left:.7em;opacity:.9} @media (max-width:820px){ [data-hero-field="blue"] .hero-field{padding-bottom:clamp(128px,26vw,168px)} } /* The note is a child of .dec, and .dec is position:relative — so absolute positioning resolved against the declaration, not the field, and bottom:24px placed it 24px above the BARS' own bottom edge. Measured 83px and 86px of overlap on lines 2 and 3 at 390. It belongs below the whole declaration, so it anchors to the bottom of .dec and drops from there into the field's padding. */ [data-hero-field="blue"] .gloss{ top:100%;bottom:auto;margin-top:clamp(var(--s1),1.6vw,var(--s3)); } /* ================================================================== MOBILE REVISION ------------------------------------------------------------------ Audited at 390 and fixed what the audit actually found, rather than what looked wrong: 1. The docked "Apply to attend" button was 33px tall. It is the one action the page exists for and it failed WCAG 2.5.8's 24px floor and every practical thumb target. Now 44. 2. The consent checkbox was 18x18 — below the 24px minimum and genuinely hard to hit. Now 24 with the label's own padding widening the hit area further. 3. One 10.9px micro-label. Fine on a desktop rule, too small on a phone. Floored at 12px below 820. 4. The hero ran 1.94 viewports. Trimmed the gaps around the lockup and the facts; the declaration is untouched. The inline links flagged at 14-20px are exempt: 2.5.8 excludes targets whose size is constrained by the line-height of the sentence they sit in. Left alone deliberately. ================================================================== */ @media (max-width:820px){ /* the one action the page is for */ #bar .btn{min-height:44px;display:inline-flex;align-items:center; padding-top:0;padding-bottom:0} /* consent target */ .check input{width:24px;height:24px} .check{padding-top:var(--s2);gap:var(--s1)} /* nothing below 12px on a phone */ .fact dt,.slot .kind,.groups li b,.term dt,.f label,.leg,.count,.err, .form-note,.disclaimer,.foot p,.subtitle,.bar-meta{font-size:12px} /* the hero was 1.94 viewports */ [data-hero-field="blue"] .hero-field{padding-bottom:clamp(120px,30vw,150px)} [data-hero-field="blue"] .hero-title{margin-top:var(--s3)} [data-hero-field="blue"] .facts{margin-top:var(--s3)} .hero-aside{gap:var(--s1)} .fact{padding-top:var(--s1);padding-bottom:var(--s1)} } /* The 12px floor written as a floor rather than a list. The first pass enumerated selectors and missed six — the docked button, the date-of-birth hint, both council abbreviations and both venue sub-heads. A rule that has to be kept in sync with the markup is a rule that will drift. */ @media (max-width:820px){ .hero, footer, .band, #bar{font-size:var(--t-0)} .btn,.hint,.abbr,.venue .box h3,.fact dt,.slot .kind,.groups li b,.term dt, .f label,.leg,.count,.err,.form-note,.disclaimer,.foot p,.subtitle, .bar-meta,.tl,.gloss,.label{font-size:max(12px,var(--t--2))} /* the standalone confirmation link was a 20px target; the inline ones in sentences are exempt under 2.5.8, this one is not */ .done-note a{display:inline-block;padding:var(--s-1) 0;min-height:24px} /* hero trim: the field carries the note, so the saving comes from the blocks under it */ [data-hero-field="blue"] .hero-title{margin-top:var(--s2)} [data-hero-field="blue"] .facts{margin-top:var(--s2)} .fact{padding-top:var(--s0);padding-bottom:var(--s0)} .hero-cta{gap:var(--s1)} [data-identity="bands"] .fld-hero{margin-top:var(--s2)} } /* Four survived the floor because more specific rules outranked it — .bar-in .btn, .f .hint and .council .abbr are all two classes deep while the floor was written one deep. Matched here rather than raised with !important. */ @media (max-width:820px){ .bar-in .btn{font-size:12px} .f .hint{font-size:12px} .council .abbr{font-size:12px} } /* ================================================================== THE FACTS ------------------------------------------------------------------ Two changes, both structural. The block was repeating the meta line. "Tuesday, October 20, 2026" and "POD 250, Toronto Metropolitan University" appeared at the top of the blue field and again in the facts — two screens apart on a phone, saying the same thing. The meta line is the right place for them, so the facts now carry only what it cannot: the times, the room link, the fee, the convenors. Labels change with the content they now hold — Date became Times, Venue became Room. And on a phone it stops being a card grid. Four cards two-up was a desktop pattern in mobile clothes and cost 396px; as label-left, value-right rows it is a list you can scan in one pass. ================================================================== */ @media (max-width:820px){ .facts{grid-template-columns:1fr;border-top:1px solid var(--ink)} .fact{ display:grid;grid-template-columns:minmax(74px,26%) 1fr; column-gap:var(--s1);align-items:baseline; padding:var(--s1) 0;border-right:0; border-bottom:1px solid var(--rule); } .fact:nth-child(2){border-right:0} .fact:nth-child(-n+2){border-bottom:1px solid var(--rule)} .fact:last-child{border-bottom:0} .fact dt{margin:0} .fact dd{margin:0} } /* Reverting the list. I claimed the two-up card grid was "a desktop pattern in mobile clothes" and predicted about 150px; measured, it went 396 -> 407. The reason is simple and I should have checked it first: label-left leaves the value only 237px, so every value wraps to two or three lines, and four single rows are taller than two rows of two. The grid was already the efficient layout at this width. The de-duplication is the real saving. */ @media (max-width:820px){ .facts{grid-template-columns:repeat(2,1fr);border-top:1px solid var(--ink)} .fact{ display:block;padding:var(--s1) var(--s1) var(--s1) 0; border-right:1px solid var(--rule);border-bottom:0; } .fact:nth-child(2n){border-right:0} .fact:nth-child(-n+2){border-bottom:1px solid var(--rule)} .fact:last-child{border-bottom:0} .fact dt{margin:0 0 var(--s-1)} .fact dd{margin:0} } /* ================================================================== THE LOADER, REVISED ------------------------------------------------------------------ 1. Ground corrected. The overlay was still TMU Blue while the hero field became Navy when the bars were re-pitched — so the "it dissolves into the ground it was standing on" claim had quietly stopped being true and the handover jumped a value. Both navy now. 2. The figure turns gold once it is whole. The sweep arrives white; the moment the ring closes, the whole thing shifts to gold. The completion has a colour rather than just an end. Gold on navy is a graphic element on a dark field, which is the only place the brief allows it. 3. The exit stops being a fade. The field leaves upward on a shear, so its bottom edge crosses the screen as a diagonal — the same angle the stair and the slanted fields use. The ring goes slightly ahead of it, opening out as it goes, so the mark leads and the ground follows rather than everything dimming at once. ================================================================== */ .preload #load{ background:var(--blue-deep); opacity:1; transition:transform .78s cubic-bezier(.7,0,.2,1), opacity .5s var(--ease) .12s; will-change:transform; } .preload #load.done{ opacity:0; transform:translateY(-102%) skewY(-3deg); transform-origin:0 0; pointer-events:none; } /* white while it assembles, gold the moment it is whole */ .oj-illus{transition:color .42s var(--ease)} .preload #load.whole .oj-illus{color:var(--gold)} /* the mark leads the exit */ .load-in{transition:transform .66s cubic-bezier(.7,0,.2,1), opacity .42s var(--ease)} .preload #load.done .load-in{transform:scale(1.22);opacity:0} @media (prefers-reduced-motion:reduce){ .preload #load{transition:opacity .15s linear} .preload #load.done{transform:none} .preload #load.done .load-in{transform:none} .oj-illus{transition:none} } /* ================================================================== THE LOADER: GROUND AND DISPERSAL ------------------------------------------------------------------ GROUND. It was flat navy. It now carries the same two things the page's own fields carry — the lattice texture, and one slanted band on the --slant angle. So the holding screen is built from the same parts as the thing it is holding, and when it shears away the hero underneath has the same texture at the same scale. No gradients: the depth is a ruled grid and a flat plane, which is what the rest of the page uses. DISPERSAL. The exit stops being one object leaving. Each of the 55 elements pushes outward from the illustration's own centre and fades, staggered by the same angular delay that brought it in — so the ring disperses in the direction it assembled, and the sweep runs once more on the way out. scale() about a shared centre IS radial motion, which is why one property does the whole burst. It has to be an animation rather than a transition: rayIn holds its end state with fill:forwards, and a forwards-filling animation beats a transition on the same property. A second animation replaces it cleanly and starts exactly where the first one stopped. ================================================================== */ .preload #load{overflow:hidden} .preload #load::before{ content:"";position:absolute;inset:-10%;z-index:0;pointer-events:none; --lat-c:color-mix(in srgb, var(--white) 11%, transparent); background-image: repeating-linear-gradient(0deg, var(--lat-c) 0 1px, transparent 1px 38px), repeating-linear-gradient(60deg, var(--lat-c) 0 1px, transparent 1px 38px), repeating-linear-gradient(120deg, var(--lat-c) 0 1px, transparent 1px 38px); animation:latdrift 90s linear infinite; } .preload #load::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:color-mix(in srgb, var(--blue) 55%, transparent); clip-path:polygon(0 62%, 100% 44%, 100% 100%, 0 100%); } .load-in{position:relative;z-index:1} /* each element pushes out from the shared centre, in sweep order */ .preload #load.done .ry{ animation:rayOut .62s cubic-bezier(.4,0,.25,1) calc(var(--a,0s) * .35) forwards; } @keyframes rayOut{ from{transform:none;opacity:1} to{transform:scale(1.9);opacity:0} } @media (prefers-reduced-motion:reduce){ .preload #load::before{animation:none} .preload #load.done .ry{animation:none;opacity:0} } /* ================================================================== THE LOADER GROUND, QUIETER AND ALWAYS MOVING ------------------------------------------------------------------ The slant was a 55% plane with a hard diagonal edge across the whole screen — the least subtle thing on the page. And the only motion was one lattice drifting, which at that opacity read as a static grid. Both fixed by the same idea. Two lattices, not one, at 7% and 6% instead of 11: the first drifts, the second turns by just over a degree, and what you see is the interference between them. Neither layer is visible on its own at that opacity; the pattern they make together is, and it never repeats to the eye because the two cycles are 90s and 74s and do not divide. The planes drop 55% -> 15% and 10%, and drift laterally at different rates. Soft enough to read as depth rather than as a shape, moving enough that the ground is never still. ================================================================== */ .preload #load::before{ --lat-c:color-mix(in srgb, var(--white) 7%, transparent); inset:-30%; } .preload #load .veil{ content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;display:block; --lat-c:color-mix(in srgb, var(--white) 6%, transparent); background-image: repeating-linear-gradient(0deg, var(--lat-c) 0 1px, transparent 1px 38px), repeating-linear-gradient(60deg, var(--lat-c) 0 1px, transparent 1px 38px), repeating-linear-gradient(120deg, var(--lat-c) 0 1px, transparent 1px 38px); transform-origin:50% 50%; animation:veilTurn 74s ease-in-out infinite alternate; } @keyframes veilTurn{ from{transform:rotate(-.65deg)} to{transform:rotate(.65deg)} } /* the planes: much quieter, and no longer still */ .preload #load::after{ background:color-mix(in srgb, var(--blue) 15%, transparent); clip-path:polygon(0 58%, 100% 41%, 100% 100%, 0 100%); animation:planeA 58s ease-in-out infinite alternate; } .preload #load .plane{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;display:block; background:color-mix(in srgb, var(--blue-light) 10%, transparent); clip-path:polygon(0 26%, 100% 12%, 100% 34%, 0 47%); animation:planeB 46s ease-in-out infinite alternate; } @keyframes planeA{ from{transform:translate3d(-2.5%,0,0)} to{transform:translate3d(2.5%,0,0)} } @keyframes planeB{ from{transform:translate3d(3%,0,0)} to{transform:translate3d(-3%,0,0)} } @media (prefers-reduced-motion:reduce){ .preload #load .veil,.preload #load .plane,.preload #load::after{animation:none} } /* ================================================================== THE LOADER, MINIMAL ------------------------------------------------------------------ It had accumulated five things: two lattices making an interference pattern, two drifting planes, a ray dispersal, a scaling mark and a shearing field — on a screen whose only job is to cover a font swap. Every piece was defensible on its own and the total was not. What is left: a navy field with one static lattice at 4%, the ring assembling, gold when it closes, and the whole thing leaving as one object. One ground, one figure, one exit. Cut: the second lattice and its rotation, both planes and their drifts, the outward ray dispersal, and the mark's scale on the way out. Nothing was replaced — this is subtraction only. The sweep tightens from 0.62s of stagger to 0.42, and the hold drops 1460 -> 980ms. A minimal screen should also be a short one. ================================================================== */ .preload #load::before{ --lat-c:color-mix(in srgb, var(--white) 4%, transparent); inset:0;animation:none; } .preload #load::after{display:none} .load-in{width:min(34vmin,224px)} /* one gesture out: the field goes, and everything on it goes with it */ .preload #load.done .ry{animation:none} .preload #load.done .load-in{transform:none;opacity:1} .preload #load{ transition:transform .62s cubic-bezier(.7,0,.2,1), opacity .34s var(--ease) .2s; } @media (prefers-reduced-motion:reduce){ .preload #load::before{animation:none} } /* The mark's settle was the last thing still moving that did not need to — a 1.1s scale from .985 to 1 that nobody could name if asked what it did. Cut. The ring assembling is the animation; it does not need a second one underneath it. */ .preload #load .load-in{animation:none} /* ================================================================== THE MARK AT SCALE ------------------------------------------------------------------ It was a 540px object sitting in the corner of the apply section. At that size the three bands read as a graphic and the hexagram they make at the centre was almost incidental — you had to look for it. Large, the relationship inverts: the bands become planes crossing the field, and the star is the thing the eye lands on because it is the only place all three overlap and therefore the brightest. The figure stops being a mark on the section and becomes the section's ground. The mask does the real work now. At this size the bands would cross the heading and the form, so the left of the field stays clear and the graphic only exists from 52% rightward — verified against every rendered string rather than assumed. ================================================================== */ [data-identity="bands"] .magen{ top:calc(var(--band-y) * -1.15); right:calc(var(--slant) * -4); width:clamp(520px,82vw,1120px); aspect-ratio:1; -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 52%); mask-image:linear-gradient(to right, transparent 0%, #000 52%); } /* the overlaps have to build far enough apart to read at this scale */ [data-identity="bands"] .field-blue{--bandc:color-mix(in srgb, var(--white) 17%, transparent)} /* Placed by measurement rather than by eye. Sliced the apply section into fourteen horizontal bands and read the rightmost text edge in each: the heading reaches 954, the terms grid reaches 1258, and everything below the terms stops at 1023. So the only region wide enough for the mark at this size begins under the terms row — hence top:39%, and a mask that holds the graphic off until 56% of its own width. Verified zero text over the visible mark rather than assumed. */ [data-identity="bands"] .magen{ top:39%; -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 56%); mask-image:linear-gradient(to right, transparent 0%, #000 56%); } /* ================================================================== THE FOOTER ------------------------------------------------------------------ Three things were wrong with it. The mark was a placeholder. HANDOFF.md said the typographic הננו stood in "until the TMJew logo arrives" — it has arrived, and the footer was still carrying the stand-in. The real mark goes here, and it sits better on ink than anywhere else on the site: its yellow measures 1.4:1 on the page ground and far more than that on this one. The credits were a wall of 10.9px mono broken by <br>, which is not a structure, it is a paragraph pretending to be one. They are now three labelled rows on the same dt/dd pattern the facts use. And the copy repeated itself — "Organized and approved by TMJew…" followed by "Approved and organized in collaboration with…". Making the prefix a label removes the repetition without rewriting TMJew's sentences: Convened by / Security / Contact. The gold rule drops 3px to 1. Gold earns its place at the top of a dark field; it does not need to be a bar. ================================================================== */ .foot{ display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr); align-items:start;column-gap:clamp(var(--s5),7vw,var(--s9));row-gap:var(--s5); border-top:1px solid var(--gold);padding-top:var(--s5); } .foot-id{display:flex;align-items:center;gap:var(--s2)} .foot-logo{width:clamp(56px,7vw,84px);height:auto;flex:0 0 auto} .foot-name{ margin:0;font-family:var(--display);font-weight:700; font-size:var(--t-1);line-height:1.1;letter-spacing:-.04em; text-transform:uppercase;color:var(--white); } .foot-name span{ display:block;margin-top:var(--s0); font-family:var(--mono);font-weight:400;font-size:var(--t--2); line-height:1.6;letter-spacing:var(--track-label); text-transform:uppercase;color:var(--field-dim); } .foot-meta{margin:0;display:grid;gap:var(--s2);align-content:start} .foot-meta > div{display:grid;grid-template-columns:minmax(96px,20%) minmax(0,1fr); column-gap:var(--s2);align-items:baseline} .foot-meta dt{ margin:0;font-family:var(--mono);font-size:var(--t--2); letter-spacing:var(--track-label);text-transform:uppercase;color:var(--field-dim); } .foot-meta dd{margin:0;font-size:var(--t--1);line-height:1.6;color:#B9BDC4;max-width:52ch} .foot-meta a{color:var(--wash);text-decoration:none} .foot-meta a:hover{text-decoration:underline} @media (max-width:820px){ .foot{grid-template-columns:1fr;row-gap:var(--s4)} .foot-meta > div{grid-template-columns:1fr;gap:var(--s-1)} .foot-meta dd{font-size:12px} } /* The rebuilt footer reintroduced 10.9px type — .foot-meta dt and the date line under the name. The floor is a list, and a list drifts the moment new markup lands; third time this has happened. Added, and worth remembering that the durable fix is a floor on the token itself at narrow widths. */ @media (max-width:820px){ .foot-meta dt,.foot-name span{font-size:12px} } /* ================================================================== THE PATTERN, REPEATED ------------------------------------------------------------------ The crossing bands were doing their best work in Attend, so they now open the two fields above it as well — the top of the blue field and the top of the questions field. Same three planes at 0/60/120, same alpha stacking, same hexagram where all three meet. Both are anchored to the top edge and bleed upward and right, so what you get at the start of each field is the lower part of the figure arriving rather than a complete symbol sitting there. The mark in Attend is the only one you see whole. Placement is measured, not guessed: each is masked from the left so it cannot reach its own section's text, and verified against every rendered string at both widths. ================================================================== */ .bandmark{display:none} [data-identity="bands"] .bandmark{ display:block;position:absolute;z-index:-1;pointer-events:none; aspect-ratio:1;opacity:1; } [data-identity="bands"] .bandmark .oj-band{width:100%;height:100%;display:block} /* the two openers share the mark's own colour treatment */ [data-identity="bands"] .bm-hero, [data-identity="bands"] .bm-questions{--bandc:color-mix(in srgb, var(--white) 13%, transparent)} [data-identity="bands"] .bm-hero{ top:calc(var(--band-y) * -1.4);right:calc(var(--slant) * -3); width:clamp(420px,64vw,860px); -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 58%); mask-image:linear-gradient(to right, transparent 0%, #000 58%); } [data-identity="bands"] .bm-questions{ top:calc(var(--band-y) * -1.05);right:calc(var(--slant) * -3); width:clamp(420px,62vw,820px); -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 56%); mask-image:linear-gradient(to right, transparent 0%, #000 56%); } @media (max-width:820px){ [data-identity="bands"] .bandmark{display:none} } /* Sized by the same slice measurement as Attend. In the questions section the accordion questions run out to 1283px between 427 and 855 from the section top, leaving only 142px of clear width there — not enough. Above 427 the text stops at 1064. So the opener is bounded to finish before 427: 520px square from -127 means its bottom lands at 393, and at 56% mask its visible edge starts at 1304, well clear of 1064. In the hero no bounding is needed: the declaration bars are opaque and paint over the pattern, so the only place it shows is the gaps between them and the space above the first bar. Verified — bar fill rgb(0,76,155), and the DOM order puts the pattern before the bars. */ [data-identity="bands"] .bm-questions{ width:clamp(320px,40vw,520px); } /* The triangular lattice comes off the blue field and the questions field — the crossing bands replace it there rather than sitting on top of it. Two patterns doing the same job in the same space was the problem; the bands are the stronger of the two and they carry the same geometry, so the grid underneath was only diluting them. With the lattice gone the bands are the sole texture in those fields, so they come up slightly — 13% to 16% — to hold the space the grid was filling. The lattice stays on the venue field, which has no band mark of its own. */ [data-identity="bands"] .bm-hero, [data-identity="bands"] .bm-questions{--bandc:color-mix(in srgb, var(--white) 16%, transparent)} /* The bands replace the lattice on desktop, but they are hidden below 820 because no clear column exists there — so removing the lattice outright left those two fields with no texture at all on a phone, which is where most people will see them. The class goes back on and the lattice is suppressed only at the widths where the bands actually appear. */ @media (min-width:821px){ [data-identity="bands"] .hero-field.lat-ground::after, [data-identity="bands"] .field-navy.lat-ground::after{display:none} } /* ================================================================== The two openers become live figures ------------------------------------------------------------------ They were arriving and then freezing, which is what made them read as wallpaper rather than as a mark. Two changes. First, they assemble instead of sliding. Each band now sits in its own group inside the rotation, so the entrance travels along that band's own axis — and the three come from different distances and opposite directions, so what you watch is three planes converging on the star rather than three bars sliding in from the left. Second, they never fully settle. --bm is 1 when the mark is level with the upper third of the viewport and falls away either side of it; each band offsets along its axis by its own amount and sign, so the hexagram is exact at exactly one scroll position and scissors open on both sides of it. Mixed signs matter — same signs would read as the whole figure sliding, which is parallax. This is the figure articulating in place. The entrance and the drift are on different elements so they never fight over transform: entrance on .bd-in, drift on the rect. Both sit inside the rotate group, so both run along the band's own axis. The mark in Attend keeps rotation as its articulation. Three different marks doing the same trick would be a tic; shear here, rotation there. ================================================================== */ [data-identity="bands"] .bandmark .bd-in{ transform-box:view-box; transform:translateX(calc(var(--e,0) * 1px)); transition:transform 1.15s var(--ease) calc(var(--i,0) * .13s); } [data-identity="bands"] .in .bandmark .bd-in{transform:none} [data-identity="bands"] .bandmark .bd{ transform-box:view-box; transform:translateX(calc((1 - var(--bm,1)) * var(--o,0) * 1px)); transition:none; } /* Depth across the stack. One flat alpha made the three planes read as one shape with holes in it; stepping them means you can see which band is in front, and the central hexagon still lands darkest because all three overlap there. */ [data-identity="bands"] .bandmark .bd1{fill:color-mix(in srgb, var(--white) 11%, transparent)} [data-identity="bands"] .bandmark .bd2{fill:color-mix(in srgb, var(--white) 16%, transparent)} [data-identity="bands"] .bandmark .bd3{fill:color-mix(in srgb, var(--white) 21%, transparent)} @media (prefers-reduced-motion:reduce){ [data-identity="bands"] .bandmark .bd-in{transform:none;transition:none} [data-identity="bands"] .bandmark .bd{transform:none} } /* The generic band reset — .in .oj-band .bd{transform:none} — is a four-class selector and was outranking the drift at three, so the openers computed to transform:none and sat perfectly still. Matched through .in so it wins on both specificity and order without needing !important. */ [data-identity="bands"] .in .bandmark .oj-band .bd{ transform:translateX(calc((1 - var(--bm,1)) * var(--o,0) * 1px)); } @media (prefers-reduced-motion:reduce){ [data-identity="bands"] .in .bandmark .oj-band .bd{transform:none} } /* ================================================================== The section rail ------------------------------------------------------------------ A fixed index down the right gutter. The left gutter already holds the sticky section labels, so this side is the only one free; the two opener marks bleed right, which means the rail sits over decoration rather than over anything anyone reads. It is an index before it is a menu. The section you are in keeps its name showing; the others are ticks until you point at the rail or tab into it. Tick length carries the state, not colour — so it still reads if colour is unavailable, and it needs no second accent. Colour comes from the field it is currently marking, set by data-on. A fixed element crossing alternating light and dark grounds has no other honest way to stay legible. ================================================================== */ .rail{ position:fixed;z-index:40; right:clamp(var(--s0),1.2vw,var(--s1)); top:50%;transform:translateY(-50%); color:var(--ink); } .rail[data-on="dark"]{color:var(--white)} /* The stack is the width of one tick and nothing more. The names are taken out of the flow entirely — set horizontally they made the rail 155px wide, which put its box over the body column: it overlapped 21 rendered strings and would have swallowed clicks on the links underneath, invisibly, because the names sit at opacity 0 until you point at them. Set vertically they cost 14px instead of 110 and fit the gutter with room to spare. It also stops the rail from repeating the sticky labels on the left in the same orientation. */ /* stretch, not flex-end: flex-end shrank each row to the width of its own tick, so the link resolved width:100% against 12px and stayed a 12x26 target. The ticks are right-aligned inside the row instead. */ .rail ol{ list-style:none;margin:0;padding:0;width:26px; display:flex;flex-direction:column;align-items:stretch; } .rail li{display:block} /* The link fills the stack rather than shrinking to the tick. At 14px wide it was a 14x26 target, under the 24x24 floor in WCAG 2.2 SC 2.5.8 — the tick you aim at is the visible part, not the part you have to hit. */ .rail a{ position:relative;display:flex;align-items:center;justify-content:flex-end; width:100%;height:26px;text-decoration:none;color:inherit; } .rail-t{ position:absolute;right:calc(26px + var(--s-1));top:50%; writing-mode:vertical-rl; transform:translateY(-50%) rotate(180deg); transform-origin:50% 50%; font-family:var(--mono);font-size:var(--t--1);letter-spacing:.08em; text-transform:uppercase;white-space:nowrap;color:inherit; pointer-events:none;opacity:0; transition:opacity .3s var(--ease); } /* 0.34 measured 2.20:1 on paper and 2.28:1 on the blue field. These are links, so the idle state has to meet the 3:1 in SC 1.4.11 — 0.52 is the first step that clears it on all four grounds the rail crosses (paper 3.6, navy 4.5, blue 3.4, tint 3.2). */ .rail-m{ display:block;height:2px;width:12px;flex:none;background:currentColor; opacity:.52; transition:width .32s var(--ease),opacity .32s var(--ease); } /* the section you are in names itself and holds a longer tick */ .rail a[aria-current] .rail-m{width:26px;opacity:1} .rail a[aria-current] .rail-t{opacity:.9} /* Pointing at the rail lifts every tick, but only one name is ever shown: the labels are ~100px tall set vertically and the rows are 26px apart, so two at once would cross each other. The one you are pointing at wins. */ .rail:hover .rail-m, .rail:focus-within .rail-m{opacity:.78} .rail:hover a[aria-current] .rail-m, .rail:focus-within a[aria-current] .rail-m{opacity:1} .rail a:hover .rail-m, .rail a:focus-visible .rail-m{width:26px;opacity:1} .rail a:hover .rail-t, .rail a:focus-visible .rail-t{opacity:.9} .rail:hover a[aria-current]:not(:hover) .rail-t, .rail:focus-within a[aria-current]:not(:hover):not(:focus-visible) .rail-t{opacity:0} .rail a:focus-visible{ outline:3px solid currentColor;outline-offset:6px;border-radius:2px; } /* the anchor targets are focused on click so the next Tab continues from the section, not the rail — that must not paint a ring around a whole section */ #case:focus,#questions:focus,#program:focus,#apply:focus,#tmjew:focus,#venue:focus{outline:none} /* Measured, not guessed. The right gutter runs 44px at 1181, 48 at 1280, 68 at 1320 and 88 at 1360; the rail needs about 72 for offset, tick, gap and label. So 1360 is the first width where it clears the body column, and below it the rail would sit on the text — at 1200 it overlapped 19 rendered strings. The sticky section labels on the left already say where you are at every width, so nothing is lost by dropping it. */ @media (max-width:1359px){ .rail{display:none} } @media (prefers-reduced-motion:reduce){ .rail-t,.rail-m{transition:none} } /* ================================================================== Partnership ------------------------------------------------------------------ The page read as TMJew's event that Hillel was thanked at the end of a sentence in: TMJew had two logo placements, a full section with two councils and seven named people, and the contact address; Hillel TMU had one trailing subordinate clause, twice. This is host-and-partner, not co-billing — TMJew convenes, which is what the copy says — so the fix is a real partner block rather than a split section: its own rule, its own mark, its own paragraphs, at the same measure and the same type as everything above it. The mark is Hillel's own campus lockup, and it is built in #004C9B — the same blue as --blue, because the Hillel TMU campus accent and this page's primary are the same colour. Nothing had to be tinted to make it sit here. Sized against the TMJew mark by weight, not by bounding box. TMJew is a square outline carrying a lot of white space; the Hillel lockup is solid letterforms and far denser, so matching heights would let it dominate. It runs at about half. ================================================================== */ .partner{ margin-top:var(--s6);padding-top:var(--s2); border-top:2px solid var(--ink);max-width:900px; } .partner-eyebrow{ margin:0 0 var(--s2);font-family:var(--mono);font-size:var(--t--2); letter-spacing:var(--track-label);text-transform:uppercase;color:var(--stone); } .partner-mark{ display:block;height:clamp(56px,6.5vw,92px);width:auto; margin:0 0 var(--s2); } .partner-lede{ font-size:var(--t1);line-height:1.35;letter-spacing:-.01em; margin:0 0 var(--s1);max-width:62ch; } .partner p:not(.partner-eyebrow):not(.partner-lede){ margin:0;max-width:62ch;color:var(--stone); } /* Footer: the two marks share a baseline with a hairline between them. The footer ground is --ink, so this is the knockout file rather than the primary — the primary's wordmark is #1E1E1D and would disappear. */ .foot-div{ display:block;flex:0 0 auto;width:1px;align-self:stretch; min-height:var(--s3);background:var(--field-dim);opacity:.5; } .foot-hillel{ display:block;height:clamp(28px,3.4vw,40px);width:auto;flex:0 0 auto; } @media (max-width:560px){ /* the row would otherwise wrap the divider onto its own line */ .foot-div{display:none} .foot-id{flex-wrap:wrap;gap:var(--s1)} } /* ================================================================== The 12px floor, done at the token ------------------------------------------------------------------ Fourth drift. The partner block's eyebrow uses --t--2 and landed at 10.9px on a phone, because the floor has always been an enumerated list of selectors and a list goes stale the moment new markup arrives — it has now missed six selectors, then four to specificity, then two in the rebuilt footer, and now this one. --t--2 and --t--1 are used for nothing but font-size anywhere in this stylesheet, so the floor belongs on the token. Every selector that reads them is covered at once, including markup that does not exist yet, and no specificity contest can outrank it. The enumerated rules above are left in place: they resolve to the same 12px and removing them is a separate change from fixing this. ================================================================== */ @media (max-width:820px){ :root{--t--2:12px} } /* ================================================================== The footer TMJew mark — visible, and knocked out ------------------------------------------------------------------ It had never rendered. The mark's entrance parks all three parts at opacity 0 and offsets them, and the only rule that brings them back is scoped to a .tmjew-lockup.in ancestor. The footer copy is not inside a lockup, so nothing ever set them back: an invisible 84px square has been sitting in the footer since the mark was added. Here it is a static credit, not a reveal, so it opts out of the entrance entirely rather than being wired to an observer. And it goes to a single flat white. On the --ink footer the mark's own #0057B8 and #FFCC00 sat beside a knocked-out Hillel lockup, which read as one partner in brand colour and one in mono. Matching #F8F9FA rather than pure white so the two marks are the same value — the Hillel knockout file is drawn in #F8F9FA, and #FFFFFF beside it would read very slightly brighter. All three parts flat means the two triangle outlines merge where they cross, which is what the hexagram wants anyway. ================================================================== */ .tmjew-mark.foot-logo .tm-y, .tmjew-mark.foot-logo .tm-b, .tmjew-mark.foot-logo .tm-w{ transform:none;opacity:1;transition:none; } .tmjew-mark.foot-logo .tm-y, .tmjew-mark.foot-logo .tm-b, .tmjew-mark.foot-logo .tm-w, .tmjew-mark.foot-logo .tm-w tspan{ fill:#F8F9FA; } /* ================================================================== The case opens at full measure ------------------------------------------------------------------ It was set at 28ch — 470px against a 900px column of body text directly beneath it — so the section's opening statement was the narrowest thing in the section and read as a caption rather than a claim. At full measure it falls from four lines to two. 900px, not the body column's 965: .cols below is capped at 900, and a 65px overhang with nothing else on the page doing the same would read as a mistake rather than a decision. Weight 600 is the ceiling. Inter is self-hosted at 400/500/600 only, so 700 would synthesise — and 500 at 26.6px is not distinguishable enough from 400 to be worth the change. Line-height and tracking come in a step with it, because the values that suit a narrow four-line block are too loose for a wide two-line one. ================================================================== */ #case .lede{ max-width:900px; font-weight:600; line-height:1.3; letter-spacing:-.018em; } @media (max-width:820px){ /* the column is already the full width here; only the weight carries over */ #case .lede{line-height:1.34} } /* ================================================================== The hero strip becomes a slice through the mark ------------------------------------------------------------------ It was seven bars at irregular positions and irregular widths, with jittered heights — deliberately organic on a page where everything else is systematic: an 8px scale, one easing curve, a hexagram built from three exact angles. It was the only hand-placed thing on the page and it read that way. Now it is what it should always have been: a horizontal slice through the identity. Two sets of parallel strokes at the mark's own 60 degrees, evenly spaced, crossing — which is the cross-section you would get by cutting through the crossing bands. Every third stroke takes the heavier blue, so the rhythm is countable rather than random. The reveal changes with it. Seven bars growing individually suited seven bars; a lattice wants a single wipe, so the strip is clipped from the left and opens in one move. Cheaper too — one animated property instead of forty-four. ================================================================== */ [data-identity="bands"] .fld-hero .oj-slash rect{ transform:none;transition:none; } [data-identity="bands"] .fld-hero .oj-slash{ clip-path:inset(0 100% 0 0); transition:clip-path 1.05s var(--ease); } [data-identity="bands"] .fld-hero.in .oj-slash{clip-path:inset(0 0 0 0)} @media (prefers-reduced-motion:reduce){ [data-identity="bands"] .fld-hero .oj-slash{clip-path:none;transition:none} } /* One direction, one colour, even spacing. The crossing set made an X at every intersection and the strip read as stitching rather than as a rule — density was the whole problem, and half of it came from the second angle. The strokes carry no per-stroke fill now, so the colour lives here. */ [data-identity="bands"] .fld-hero .oj-slash rect{fill:var(--blue)} /* ================================================================== The application form, embedded ------------------------------------------------------------------ The hand-built form is gone; JotForm holds the fields and the payment now. What stays is the section's framing — the heading, the lede, and the three terms — because those are the page's voice and should not change just because the inputs moved. 539px is JotForm's own first guess and only ever the fallback: the handler in js/apply-frame.js replaces it as soon as the frame reports its real height. If that message never arrives the frame keeps this height and scrolls, so the form still works. ================================================================== */ .apply-frame{ display:block;width:100%;min-width:100%;max-width:100%; height:539px;border:0; color-scheme:light; /* the form is a light document; don't let a dark UA invert it */ } /* ================================================================== Changes requested by TMJew, 20 August 2026 ================================================================== */ /* 15 — the three items at the top read as one sentence: "Applications open Tuesday, October 20, 2026". A middot between them makes them read as three separate facts. Not on the first item, and the flex gap already spaces them, so this is purely a reading cue. */ .hero-top .sep::before{ content:"·";margin-right:var(--s2);color:currentColor;opacity:.55; } @media (max-width:560px){ /* wrapped onto their own lines, the separators would dangle */ .hero-top{flex-direction:column;gap:var(--s0)} .hero-top .sep::before{display:none} } /* 13 — one list, because they are all TMJew. The two-column split with a lettered abbreviation on each side was the graphic distinction the note asked to soften, so both are gone; what is left is the membership note, in the same quiet grey as every other aside. */ .council-one{grid-template-columns:1fr} .council-one .names{margin-bottom:var(--s2)} /* 7 — the Code of Conduct. A native <details> rather than the scripted accordion above it: this one has to open for a reader who arrives with JavaScript off, since agreeing to it is a condition of registering. */ .coc{ margin:var(--s4) 0 0;border-top:2px solid var(--field-rule); padding-top:var(--s2); } .coc > summary{ cursor:pointer;list-style:none; font-family:var(--mono);font-size:var(--t--1); letter-spacing:var(--track-label);text-transform:uppercase; display:flex;align-items:baseline;gap:var(--s1); padding:var(--s1) 0;min-height:var(--s4); /* 2.5.8 target size */ } .coc > summary::-webkit-details-marker{display:none} .coc > summary::after{ content:"+";margin-left:auto;font-size:var(--t-0);line-height:1; transition:transform var(--dur-1) var(--ease); } .coc[open] > summary::after{content:"–"} .coc > summary:hover{text-decoration:underline} .coc-body{padding:var(--s1) 0 var(--s3);max-width:70ch} .coc-body p{margin:0 0 var(--s2)} .coc-body ul{margin:0 0 var(--s2);padding-left:var(--s3)} .coc-body li{margin:0 0 var(--s0)} .apply .coc{border-top-color:var(--field-rule)} .apply .coc > summary,.apply .coc-body{color:var(--wash)} .apply .coc > summary{color:var(--white)} /* 11 — speakers as discrete elements so bios can be attached one at a time. The bio is display:none until it actually holds text, so a half-populated list never looks broken. */ .who .sp{display:inline} .who .sp + .sp::before{content:", "} .sp-bio{display:none} .sp-bio:not(:empty){ display:block;margin:var(--s0) 0 var(--s1); font-size:var(--t--1);color:var(--stone);max-width:60ch; } /* ================================================================== Five languages, not three ------------------------------------------------------------------ Ladino and Amharic join the declaration, on Aaron Orkin's note that Hebrew / Yiddish / English alone reads as Ashkenazi-centric. Ladino is Sephardi, Amharic is Ethiopian, and the line they carry is the same one. Adding two lines at the old size would have taken the declaration from 513px to about 855, and both notes asked for it to get SMALLER. So the glyphs come down roughly a third and the per-line padding with them; five lines now occupy less than three used to. The stair is driven by :nth-child for its indent, its band colour and its entrance delay, all of which stopped at three. Extended to five, and the ramp stays inside the dark blues — every band still has to carry --wash at 4.5:1 for the transliteration underneath. ================================================================== */ /* Ladino and Amharic are LTR like the English line. .en keeps meaning "the English line, in the display face"; .ltr just means direction. */ .dec-line.ltr{text-align:left} .dec-line.ltr .glyph{direction:ltr} /* Amharic is Ethiopic script and NOT covered by any face in /fonts — measured, the string renders identically under every self-hosted stack and under a deliberately nonexistent family, which means it is falling through to the system. Name the good Ethiopic faces explicitly so it lands on one of them rather than on a default UI font, and see the note in the handoff about self-hosting a subset. */ :root{--eth:'Noto Serif Ethiopic','Noto Sans Ethiopic','Kefa','Nyala','Ebrima',var(--heb)} .dec-line.am .glyph{font-family:var(--eth);font-weight:700} .dec-line.lad .glyph, .dec-line.en .glyph{font-family:var(--display)} /* smaller, so five fit in less room than three took */ .dec-line .glyph{font-size:clamp(var(--d-1),6.6vw,var(--d-3))} .dec-line.ltr .glyph{font-size:clamp(var(--t-2),5.0vw,var(--d-2))} [data-hero="stair"] .dec-line{ padding-top:clamp(var(--s1),1.3vw,var(--s2)); padding-bottom:clamp(var(--s1),1.3vw,var(--s2)); } /* the stair, now five steps deep */ [data-hero="stair"] .dec-line:nth-child(2){--step:clamp(8px,2.6vw,42px)} [data-hero="stair"] .dec-line:nth-child(3){--step:clamp(16px,5.2vw,84px)} [data-hero="stair"] .dec-line:nth-child(4){--step:clamp(24px,7.8vw,126px)} [data-hero="stair"] .dec-line:nth-child(5){--step:clamp(32px,10.4vw,168px)} [data-hero="stair"] .dec-line:nth-child(1){--band:var(--blue)} [data-hero="stair"] .dec-line:nth-child(2){--band:color-mix(in srgb, var(--blue) 55%, var(--blue-deep))} [data-hero="stair"] .dec-line:nth-child(3){--band:var(--blue-deep)} [data-hero="stair"] .dec-line:nth-child(4){--band:color-mix(in srgb, var(--blue-deep) 55%, var(--ink))} [data-hero="stair"] .dec-line:nth-child(5){--band:var(--ink)} [data-hero="stair"] .dec-line:nth-child(4)::before{transition-delay:.39s} [data-hero="stair"] .dec-line:nth-child(5)::before{transition-delay:.52s} .loaded .dec-line:nth-child(4){transition-delay:.39s} .loaded .dec-line:nth-child(5){transition-delay:.52s} /* The size reduction above never landed: the stair layer sizes the glyphs with viewport-height formulas at a higher specificity, and those were budgeted for three lines — two at 30svh and one at 21svh. Five lines need a smaller share each, so the budget is re-cut here at the specificity that actually wins. */ [data-hero="stair"] .dec-line .glyph{ font-size:max(var(--d-1), min(clamp(var(--d-1),8vw,var(--d-3)), calc(18svh - 42px))); } [data-hero="stair"] .dec-line.ltr .glyph{ font-size:max(var(--t-2), min(clamp(var(--t-2),5vw,var(--d-2)), calc(12svh - 30px))); } [data-hero="stair"] .dec-line.en .glyph{ font-size:max(var(--t-2), min(clamp(var(--t-2),6vw,var(--d-2)), calc(14svh - 32px))); } /* The bands were set per :nth-child with direct background declarations that bypass --band, and they stopped at three. With five lines that left the ramp incoherent — blue, bright, mid, then my two — so all five are set here, at the end, as one descent from blue into ink. No bright steps: the transliteration under each line has to hold 4.5:1 in --wash. */ [data-hero-field="blue"] .dec-line:nth-child(1)::before{background:var(--blue)} [data-hero-field="blue"] .dec-line:nth-child(2)::before{background:color-mix(in srgb, var(--blue) 55%, var(--blue-deep))} [data-hero-field="blue"] .dec-line:nth-child(3)::before{background:var(--blue-deep)} [data-hero-field="blue"] .dec-line:nth-child(4)::before{background:color-mix(in srgb, var(--blue-deep) 55%, var(--ink))} [data-hero-field="blue"] .dec-line:nth-child(5)::before{background:var(--ink)} /* and the type on them, for all five rather than the first three */ [data-hero-field="blue"] .dec-line:nth-child(1) .glyph, [data-hero-field="blue"] .dec-line:nth-child(2) .glyph, [data-hero-field="blue"] .dec-line:nth-child(3) .glyph, [data-hero-field="blue"] .dec-line:nth-child(4) .glyph, [data-hero-field="blue"] .dec-line:nth-child(5) .glyph{color:var(--white)} [data-hero-field="blue"] .dec-line:nth-child(1) .tl, [data-hero-field="blue"] .dec-line:nth-child(2) .tl, [data-hero-field="blue"] .dec-line:nth-child(3) .tl, [data-hero-field="blue"] .dec-line:nth-child(4) .tl, [data-hero-field="blue"] .dec-line:nth-child(5) .tl{color:var(--wash)} /* English stays white with the rest. Left to its own rule it would come back gold, which would be a fourth appearance of a colour rationed to three. */ /* Down another step. At five lines the block had grown to 582px — taller than the 513 the note asked to reduce — so the glyph ceilings drop one stop on the scale and the padding tightens. The Hebrew stays the largest thing in the block; the hierarchy survives, the height does not. This overrides "do not shrink it" in CLAUDE.md, at TMJew's request. */ [data-hero="stair"] .dec-line .glyph{ font-size:max(var(--t-2), min(clamp(var(--t-2),6vw,var(--d-2)), calc(13svh - 30px))); } [data-hero="stair"] .dec-line.ltr .glyph{ font-size:max(var(--t-1), min(clamp(var(--t-1),4vw,var(--d-1)), calc(9svh - 22px))); } [data-hero="stair"] .dec-line.en .glyph{ font-size:max(var(--t-2), min(clamp(var(--t-2),4.6vw,var(--d-2)), calc(11svh - 26px))); } [data-hero="stair"] .dec-line{ padding-top:clamp(var(--s0),0.8vw,var(--s1)); padding-bottom:clamp(var(--s0),0.8vw,var(--s1)); } /* ================================================================== Partners ------------------------------------------------------------------ The note asked whether the footer colour could change so the logo colours stay visible. Measured, the answer is that the footer cannot host them at all: of the four supplied files, three are dark artwork on transparency — Wiesenthal averages luminance 32, UJA 82, NECA 111 — and would disappear on --ink, while ALCCA arrives with a solid white background baked in and would show as a white rectangle. So the logos get their own band instead of going in the footer, and the band is pure white rather than paper: ALCCA's baked-in background then has nothing to show against, and the three transparent marks sit on the ground they were drawn for. The footer keeps its dark anchor and its two knocked-out marks. Sizes are per logo, not uniform. The four range from 1.05:1 to 3.66:1, and a square lockup set to the same height as a wide one reads twice as large, so each is capped by height and by width and the vertical NECA lockup is allowed to run taller. ================================================================== */ .partners{background:#FFFFFF;padding:clamp(var(--s4),4.5vw,var(--s6)) var(--gut)} .partners-in{max-width:1280px;margin:0 auto} .partners-h{ margin:0 0 var(--s3);font-family:var(--mono);font-size:var(--t--2); letter-spacing:var(--track-label);text-transform:uppercase; color:var(--stone);font-weight:400; } .partner-row{ list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap;align-items:center; gap:clamp(var(--s4),5vw,var(--s7)); } .partner-row li{margin:0;display:flex;align-items:center} .partner-row img{ display:block;width:auto; height:clamp(30px,3.4vw,44px);max-width:190px;object-fit:contain; } /* the vertical lockup carries two lines of type under its mark, so at a shared height its wordmark would be half the size of everyone else's */ .partner-row li:first-child img{height:clamp(52px,6vw,78px);max-width:110px} @media (max-width:560px){ .partners{padding:var(--s5) var(--gut)} .partner-row{gap:var(--s4) var(--s5);justify-content:flex-start} .partner-row img{height:28px} .partner-row li:first-child img{height:48px} } /* The reduction went too far on a phone. Desktop is capped by the clamp ceiling, but on a 390px screen the vw term was doing the work and it drove הננו from 75px down to 27 — the height problem was that the block did not fit one desktop screen, and a phone scrolls regardless. Raising the vw terms lifts the narrow end and leaves the wide end untouched, because at 1440 all three are still pinned to their ceilings. */ [data-hero="stair"] .dec-line .glyph{ font-size:max(var(--d-1), min(clamp(var(--d-1),9vw,var(--d-2)), calc(13svh - 30px))); } [data-hero="stair"] .dec-line.ltr .glyph{ font-size:max(var(--t-1), min(clamp(var(--t-1),7.5vw,var(--d-1)), calc(9svh - 22px))); } [data-hero="stair"] .dec-line.en .glyph{ font-size:max(var(--t-2), min(clamp(var(--t-2),8vw,var(--d-2)), calc(11svh - 26px))); } /* ================================================================== The top section, condensed ------------------------------------------------------------------ At 1536x864 the hero measured 1294px — one and a half screens before you reach anything. Where it went: 148px of reserve under the declaration, 50px of non-glyph space on every one of five lines, a 106px wordmark, and four generous gaps. The 148px was not padding for its own sake — the gloss is absolutely positioned under the declaration and that reserve is what stops it landing on the wordmark. Measured, the tallest gloss was 104px, and it was the Ladino note because I had written the longest one. Shortened, all five now come in at 82px, so the reserve follows them down rather than being cut blind. Everything else is tightening, not shrinking: the glyphs come down one step, but most of the saving is in the space between things. ================================================================== */ /* the reserve, now sized to the tallest gloss plus a margin */ [data-hero-field="blue"] .hero-field{padding-bottom:clamp(92px,7vw,104px)} [data-hero-field="blue"] .hero-field{padding-top:clamp(var(--s2),2.5vh,var(--s4))} /* five lines were spending 250px between them on padding alone */ [data-hero="stair"] .dec-line{ padding-top:clamp(3px,0.45vw,7px); padding-bottom:clamp(3px,0.45vw,7px); } .dec-line .tl{margin-top:2px} .dec{margin-top:clamp(var(--s1),1.6vw,var(--s3))} /* one step down the scale, and no further — this is still the page */ [data-hero="stair"] .dec-line .glyph{ font-size:max(var(--t-2), min(clamp(var(--t-2),7.6vw,44px), calc(11svh - 24px))); } [data-hero="stair"] .dec-line.ltr .glyph{ font-size:max(var(--t-1), min(clamp(var(--t-1),6.2vw,30px), calc(8svh - 18px))); } [data-hero="stair"] .dec-line.en .glyph{ font-size:max(var(--t-1), min(clamp(var(--t-1),6.8vw,40px), calc(9svh - 20px))); } /* the name, the facts, and the gaps between them */ .hero-title h1{font-size:clamp(var(--d-1),7vw,var(--d-3))} [data-hero="stair"] .hero-title{margin-top:clamp(var(--s2),2vw,var(--s3))} [data-hero="stair"] .facts{margin-top:clamp(var(--s2),2vw,var(--s3))} .fact{padding:var(--s1) var(--s2) var(--s2) 0} [data-identity="bands"] .fld-hero{ margin-top:clamp(var(--s1),1.4vw,var(--s2)); height:clamp(20px,2.2vw,30px); } @media (max-width:820px){ /* the gloss wraps to more lines when the column is narrow, so the reserve has to grow again here even as everything else shrinks */ [data-hero-field="blue"] .hero-field{padding-bottom:clamp(104px,24vw,132px)} } /* The transliteration moves onto the glyph's own baseline instead of sitting under it. Stacked, it cost about 18px a line — 90px across five — for a label that reads perfectly well beside the word. It also puts the roman spelling next to the thing it spells rather than under it. It sits on the outside of each line: to the left of the right-aligned Hebrew and Yiddish, to the right of the left-aligned Latin ones. That is row-reverse for the RTL pair, which lays the glyph against the right edge and the label inboard of it. Only above 820px. On a phone the column is too narrow to carry a glyph and a label on one line, so the stack stays. */ @media (min-width:821px){ [data-hero="stair"] .dec-line{ display:flex;align-items:baseline; gap:clamp(var(--s2),2vw,var(--s4)); } [data-hero="stair"] .dec-line .glyph{flex:0 1 auto;min-width:0} [data-hero="stair"] .dec-line .tl{flex:0 0 auto;margin-top:0;white-space:nowrap} /* RTL: glyph hard right, label inboard */ [data-hero="stair"] .dec-line:not(.ltr){flex-direction:row-reverse;justify-content:flex-start} /* LTR: glyph left, label after it */ [data-hero="stair"] .dec-line.ltr{flex-direction:row;justify-content:flex-start} } /* one more step off the name and the facts */ .hero-title h1{font-size:clamp(var(--t-2),5.6vw,var(--d-2))} .fact dd{line-height:1.35} [data-hero-field="blue"] .hero-field{padding-bottom:clamp(88px,6.4vw,96px)} /* The name goes back up. .hero-title is a two-column grid and its height is set by the aside beside the wordmark, not by the wordmark — measured, the row is 173px while the name only needed 87. Shrinking it bought nothing and cost the conference its own name, so it returns to 75px, which still sits inside the row the aside already occupies. */ .hero-title h1{font-size:clamp(var(--t-2),6.4vw,var(--d-3))} .fact{padding:var(--s0) var(--s2) var(--s1) 0} /* Ordering fix. The narrow-width reserve was written before the base rule that follows it, and a media query adds no specificity — so below 820 the base value was winning and leaving only 13px between the gloss and the wordmark. Restated last, where it actually applies. The gloss wraps to more lines in a narrow column, so this has to be larger than the desktop value, not smaller. */ @media (max-width:820px){ [data-hero-field="blue"] .hero-field{padding-bottom:clamp(104px,22vw,128px)} } /* ================================================================== THE TOP SECTION, REAPPROACHED data-hero="split" ------------------------------------------------------------------ The stack was: meta line, five languages, then the conference's own name, then facts, then a decorative strip. Four zones, 915px, and you were 500px down before you learned what page you were on. The declaration is an epigraph and it was being used as a headline. Three arguments drove the rebuild. The name goes first. Left column: OPENLY JEWISH, what it is, and the two things you can do. Right column: the declaration. Beside, not below — so the composition reads name-then-epigraph in the normal left-to-right order, and the two blocks share one row instead of stacking. That alone halves the height. The stair comes off. Five descending bands put Hebrew brightest at the top and English darkest at the bottom, which is a hierarchy — and the whole reason Ladino and Amharic were added was Aaron's note about not being Ashkenazi-centric. The form was arguing against the content. Now every language gets the same colour, the same weight and the same hairline, and only the glyph size varies, by what each script needs to be equally legible. The colour block survives at a larger scale: the field is the block. One blue plane holds the whole section instead of five stripes holding one sentence each. The gloss stops being absolutely positioned. It ran under the declaration with a hand-tuned reserve above the wordmark, which is where the 83px overlap bug came from and where 148px of padding went. In flow at full width it wraps to two lines instead of five, so it is both shorter and incapable of landing on anything. Switching data-hero from "stair" to "split" retires roughly forty rules at once rather than overriding them one at a time. ================================================================== */ [data-hero="split"] .hero{padding-top:0} [data-hero="split"] .hero-field{ padding-top:clamp(var(--s3),3.5vh,var(--s5)); padding-bottom:clamp(var(--s4),3.5vw,var(--s6)); } /* --- the two columns ------------------------------------------------ */ [data-hero="split"] .hero-grid{ display:grid;align-items:start; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); column-gap:clamp(var(--s5),5vw,var(--s8)); margin-top:clamp(var(--s3),3.5vw,var(--s5)); } /* --- left: the name ------------------------------------------------- */ [data-hero="split"] .hero-lead h1{margin:0} [data-hero="split"] .wm{ display:block;color:var(--white); font-size:clamp(var(--d-1),8.4vw,var(--d-4)); line-height:.84;letter-spacing:-.055em;text-transform:uppercase; margin:0 0 var(--s2); } [data-hero="split"] .wm > span{display:block} [data-hero="split"] .hero-lead .subtitle{ margin:0 0 var(--s3);max-width:34ch;color:var(--wash); font-size:clamp(var(--t-0),1.35vw,var(--t-1));line-height:1.35; } [data-hero="split"] .hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)} [data-hero="split"] .hero-cta .note{ flex:1 0 100%;margin:var(--s0) 0 0;color:var(--wash); font-family:var(--mono);font-size:var(--t--2);letter-spacing:var(--track-label); text-transform:uppercase; } /* --- right: five languages, ranked equally -------------------------- */ [data-hero="split"] .dec{margin:0;position:static} [data-hero="split"] .dec-line{ display:flex;align-items:baseline;gap:var(--s2); width:100%;text-align:left; padding:clamp(var(--s1),1.1vw,var(--s2)) 0; border-top:1px solid color-mix(in srgb, var(--white) 26%, transparent); opacity:1;transform:none; } [data-hero="split"] .dec-line:first-child{border-top:0;padding-top:0} [data-hero="split"] .dec-line .glyph{ flex:0 1 auto;min-width:0;color:var(--white); font-family:var(--heb);font-weight:700;line-height:1; font-size:clamp(var(--t-2),3.1vw,var(--d-1)); } [data-hero="split"] .dec-line.ltr .glyph{ font-family:var(--display);direction:ltr; font-size:clamp(var(--t-1),2.3vw,var(--t-2)); } [data-hero="split"] .dec-line.am .glyph{font-family:var(--eth)} [data-hero="split"] .dec-line .tl{ flex:0 0 auto;margin:0 0 0 auto;color:var(--wash); font-family:var(--mono);font-size:var(--t--2); letter-spacing:var(--track-label);text-transform:uppercase;white-space:nowrap; } [data-hero="split"] .dec.hovering .dec-line{opacity:.42} [data-hero="split"] .dec.hovering .dec-line.act{opacity:1} /* --- the gloss, in flow --------------------------------------------- */ [data-hero="split"] .gloss{ position:static;max-width:88ch;min-height:3.4em; margin:clamp(var(--s3),3vw,var(--s4)) 0 0; padding-top:var(--s1); border-top:1px solid color-mix(in srgb, var(--white) 26%, transparent); color:var(--wash);font-size:var(--t--1);line-height:1.5; } [data-hero="split"] .gloss b{color:var(--white)} /* --- the facts, closing the field ----------------------------------- */ [data-hero="split"] .facts{ margin-top:clamp(var(--s3),3vw,var(--s4)); border-top:1px solid color-mix(in srgb, var(--white) 34%, transparent); } [data-hero="split"] .fact{ padding:var(--s1) var(--s2) 0 0; border-right-color:color-mix(in srgb, var(--white) 22%, transparent); } [data-hero="split"] .fact dt{color:var(--wash)} [data-hero="split"] .fact dd{color:var(--white)} [data-hero="split"] .fact dd a{color:var(--white);text-decoration:underline} @media (max-width:900px){ [data-hero="split"] .hero-grid{grid-template-columns:1fr;row-gap:clamp(var(--s4),6vw,var(--s6))} [data-hero="split"] .dec-line .tl{margin-left:auto} } @media (max-width:560px){ [data-hero="split"] .dec-line{flex-wrap:wrap;gap:var(--s0)} [data-hero="split"] .dec-line .tl{flex:1 0 100%;margin-left:0} [data-hero="split"] .facts{grid-template-columns:1fr} [data-hero="split"] .fact{border-right:0;border-bottom:1px solid color-mix(in srgb, var(--white) 22%, transparent);padding-bottom:var(--s1)} } /* The right column ran 315px against the left's 454, so 139px of the composition was doing nothing. The gloss moves into that slack: the lead spans both rows, the declaration takes the first, the note takes the second. It now costs no height at all, because the row it sits in already existed. */ [data-hero="split"] .hero-grid{grid-template-rows:auto auto;align-items:start} [data-hero="split"] .hero-lead{grid-column:1;grid-row:1 / span 2} [data-hero="split"] .dec{grid-column:2;grid-row:1} [data-hero="split"] .gloss{grid-column:2;grid-row:2;margin-top:clamp(var(--s2),2vw,var(--s3))} /* one rhythm down the list. Hebrew rows ran 72px and Latin 62 because the scripts differ in height; a fixed row makes it a list rather than five different-sized things. */ [data-hero="split"] .dec-line{ min-height:clamp(52px,4.4vw,64px); align-items:center;padding:0; } [data-hero="split"] .dec-line:first-child{border-top:0} /* the name, the line under it, and the buttons */ [data-hero="split"] .wm{font-size:clamp(var(--d-1),6.6vw,92px)} [data-hero="split"] .hero-lead .subtitle{ font-size:clamp(var(--t-0),1.2vw,var(--t-0));max-width:30ch;margin-bottom:var(--s2); } [data-hero="split"] .hero-cta{gap:var(--s1) var(--s2)} [data-hero="split"] .hero-cta .note{margin-top:var(--s0)} /* the facts row closes the field; it does not need to be tall to do it */ [data-hero="split"] .facts{margin-top:clamp(var(--s2),2.4vw,var(--s3))} [data-hero="split"] .fact dd{line-height:1.3} /* The ghost button was inheriting the paper-ground rule — ink type and an ink ring — and the whole hero sits on blue now, so it measured 1.44:1. It was only ever legible because it used to sit below the field. */ [data-hero="split"] .hero-cta .btn.ghost{ background:transparent;color:var(--white); box-shadow:inset 0 0 0 1px var(--white); } [data-hero="split"] .hero-cta .btn.ghost:hover{background:var(--white);color:var(--blue)} [data-hero="split"] .hero-cta .btn{background:var(--white);color:var(--blue)} [data-hero="split"] .hero-cta .btn:hover{background:var(--wash);color:var(--blue-deep)} /* and the last few pixels, to bring the section inside one screen */ [data-hero="split"] .hero-field{padding-bottom:clamp(var(--s3),3vw,var(--s5))} [data-hero="split"] .fact{padding-top:var(--s0)} /* Explicit grid-column on the children outranks the single-column template: setting grid-template-columns:1fr does not stop .dec{grid-column:2} from creating an implicit second track, so below 900 the hero was still two columns, squeezed to 151px and 231px. The placements have to be released as well as the template, and this has to come after them to win. */ @media (max-width:900px){ [data-hero="split"] .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto} [data-hero="split"] .hero-lead, [data-hero="split"] .dec, [data-hero="split"] .gloss{grid-column:1;grid-row:auto} [data-hero="split"] .hero-lead{margin-bottom:clamp(var(--s4),6vw,var(--s6))} /* the name can carry more weight once it has the full width */ [data-hero="split"] .wm{font-size:clamp(var(--d-2),13vw,var(--d-3))} } /* Mobile trim. Stacking the two columns necessarily costs height, and the name going from 26.6px to 53 accounts for some of it and is worth paying — the conference's own name was smaller than its body copy. The rest comes back out of the gaps. The gloss keeps a reserve rather than collapsing to zero: it opens on tap here, and a zero-height box would shove the facts down the page every time someone touched a line. */ @media (max-width:900px){ [data-hero="split"] .hero-lead{margin-bottom:clamp(var(--s3),4.5vw,var(--s4))} [data-hero="split"] .hero-lead .subtitle{margin-bottom:var(--s2);max-width:36ch} [data-hero="split"] .gloss{min-height:4.6em;margin-top:var(--s2)} [data-hero="split"] .dec-line{min-height:clamp(46px,12vw,56px)} [data-hero="split"] .facts{margin-top:var(--s3)} } /* Measured on a phone the two big blocks were the call to action at 213px — two buttons that had wrapped onto separate rows plus a note on a third — and the facts at 415, four stacked cards each carrying desktop padding. Neither needed to be that large. */ @media (max-width:900px){ [data-hero="split"] .hero-cta .btn{ flex:1 1 auto;min-width:0;text-align:center; padding-left:var(--s2);padding-right:var(--s2); } [data-hero="split"] .gloss{min-height:3.4em} [data-hero="split"] .fact{padding:var(--s0) 0 var(--s1)} [data-hero="split"] .fact dd{line-height:1.28} [data-hero="split"] .fact dd br{display:none} [data-hero="split"] .fact dd a{display:inline-block;margin-top:2px} } /* flex:1 1 auto kept the natural widths as the basis, and the two together came to 341px against a 342px column — one pixel from fitting, so both wrapped to full width and the call to action cost 213px. Basis zero makes them share the row and split it evenly. Height comes down too, but stays well over the 44px tap target. */ @media (max-width:900px){ [data-hero="split"] .hero-cta .btn{ flex:1 1 0;padding-top:var(--s1);padding-bottom:var(--s1); min-height:48px;display:inline-flex;align-items:center;justify-content:center; } } /* Sharing the row exposed that they were different heights — one label wraps to two lines at 159px and align-items:center then floated them off each other's baseline. Stretch makes the shorter one match the taller. */ @media (max-width:900px){ [data-hero="split"] .hero-cta{align-items:stretch} [data-hero="split"] .hero-cta .note{align-self:flex-start} } /* ================================================================== MOTION FOR THE SPLIT HERO ------------------------------------------------------------------ The rebuild traded the stair's animation for a static list. This puts movement back, but built for what the composition actually is: five hairline rows, a name in two lines, and a note that changes. The entrance is a sequence, not a fade. Each row draws its own rule left to right, and the language rides in behind its own rule 140ms later — so you watch the list being ruled and then filled, which is how the thing would be set on paper. The hairline is a ::after, not the border and not a ::before. The band colours from the old stair are still bound to .dec-line:nth-child(n)::before and would repaint it. Everything is inside prefers-reduced-motion: no-preference. With reduce set, every row is simply present. ================================================================== */ [data-hero="split"] .dec-line{border-top:0;position:relative} [data-hero="split"] .dec-line::after{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:color-mix(in srgb, var(--white) 26%, transparent); transform-origin:left; } [data-hero="split"] .dec-line:first-child::after{display:none} /* the active row: its rule goes solid and the row steps inboard */ [data-hero="split"] .dec-line.act::after, [data-hero="split"] .dec-line.walk::after, [data-hero="split"] .dec-line:hover::after, [data-hero="split"] .dec-line:focus-visible::after{ background:color-mix(in srgb, var(--white) 80%, transparent); } [data-hero="split"] .dec.walking .dec-line{opacity:.4} [data-hero="split"] .dec.walking .dec-line.walk{opacity:1} @media (prefers-reduced-motion:no-preference){ [data-hero="split"] .dec-line{ transition:opacity .5s var(--ease), transform .5s var(--ease); } [data-hero="split"] .dec-line.act, [data-hero="split"] .dec-line.walk{transform:translateX(clamp(4px,0.5vw,10px))} [data-hero="split"] .dec-line::after{ transition:background .35s var(--ease), transform .7s var(--ease) calc(var(--i,0) * .09s); } /* --- entrance ---------------------------------------------------- */ [data-hero="split"] .dec-line::after{transform:scaleX(0)} [data-hero="split"] .loaded .dec-line::after{transform:scaleX(1)} [data-hero="split"] .dec-line .glyph, [data-hero="split"] .dec-line .tl{ opacity:0;transform:translateY(10px); transition:opacity .62s var(--ease) calc(var(--i,0) * .09s + .14s), transform .62s var(--ease) calc(var(--i,0) * .09s + .14s); } [data-hero="split"] .loaded .dec-line .glyph, [data-hero="split"] .loaded .dec-line .tl{opacity:1;transform:none} /* the name is masked upward, line by line, ahead of the list */ [data-hero="split"] .wm > span{ display:block;clip-path:inset(0 0 110% 0);transform:translateY(.14em); transition:clip-path .82s var(--ease), transform .82s var(--ease); } [data-hero="split"] .wm > span:nth-child(2){transition-delay:.11s} [data-hero="split"] .loaded .wm > span{clip-path:inset(0 0 -10% 0);transform:none} [data-hero="split"] .hero-lead .subtitle, [data-hero="split"] .hero-cta, [data-hero="split"] .hero-top, [data-hero="split"] .facts{ opacity:0;transform:translateY(12px); transition:opacity .6s var(--ease), transform .6s var(--ease); } [data-hero="split"] .hero-top{transition-delay:.05s} [data-hero="split"] .hero-lead .subtitle{transition-delay:.30s} [data-hero="split"] .hero-cta{transition-delay:.40s} [data-hero="split"] .facts{transition-delay:.72s} [data-hero="split"] .loaded .hero-top, [data-hero="split"] .loaded .hero-lead .subtitle, [data-hero="split"] .loaded .hero-cta, [data-hero="split"] .loaded .facts{opacity:1;transform:none} /* the facts rule draws with them */ [data-hero="split"] .facts{ background-image:linear-gradient(to right, color-mix(in srgb, var(--white) 34%, transparent), color-mix(in srgb, var(--white) 34%, transparent)); background-repeat:no-repeat;background-position:left top;background-size:0 1px; border-top-color:transparent; transition:opacity .6s var(--ease), transform .6s var(--ease), background-size .9s var(--ease) .72s; } [data-hero="split"] .loaded .facts{background-size:100% 1px} } /* index each row so the stagger has something to count */ [data-hero="split"] .dec-line:nth-child(1){--i:0} [data-hero="split"] .dec-line:nth-child(2){--i:1} [data-hero="split"] .dec-line:nth-child(3){--i:2} [data-hero="split"] .dec-line:nth-child(4){--i:3} [data-hero="split"] .dec-line:nth-child(5){--i:4} /* The entrance starts everything at opacity 0 and waits for .loaded. If the scripts never run — blocked, failed, disabled — nothing would ever add it and the hero would be a blank blue field. The .js flag is written by the inline script in <head>, so these rules only exist where the JavaScript that clears them exists. Without it every row is simply present. */ [data-hero="split"]:not(.js) .dec-line .glyph, [data-hero="split"]:not(.js) .dec-line .tl, [data-hero="split"]:not(.js) .hero-top, [data-hero="split"]:not(.js) .hero-lead .subtitle, [data-hero="split"]:not(.js) .hero-cta, [data-hero="split"]:not(.js) .facts{opacity:1;transform:none} [data-hero="split"]:not(.js) .dec-line::after{transform:scaleX(1)} [data-hero="split"]:not(.js) .wm > span{clip-path:none;transform:none} [data-hero="split"]:not(.js) .facts{background-size:100% 1px;border-top-color:color-mix(in srgb, var(--white) 34%, transparent)} /* ================================================================== Support ------------------------------------------------------------------ Placed after Convenors rather than beside Attend, and given the ghost button rather than the solid one. CLAUDE.md is explicit that this page has one job — get the right people to apply — so the ask for money sits downstream of the ask for an application and is visibly the quieter of the two. The form is hosted by Hillel Ontario on Little Green Light and is linked rather than embedded. Three reasons. A payment page should show its own secure domain in the address bar — hiding one inside an iframe on another domain is the shape phishing takes. The page already carries a 2286px application frame in a section four times the length of any other, and a second embed compounds that. And an embedded form would give the donation the same visual weight as the application, which is the one thing this section is placed and styled to avoid. It opens in a new tab so the symposium page survives the donation, with the warning carried in the link text for anyone who cannot see a tab open. ================================================================== */ .support-act{ display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap; margin:var(--s4) 0 0; } /* The pending-chip rules that stood here went with the placeholder. */ /* ================================================================== The loader's count ------------------------------------------------------------------ A percentage in the middle of the ring with the word above it. It sits inside .load-in rather than beside it, so it inherits the settle, the gold and the scale-and-fade on exit — the number leaves with the mark instead of being animated separately. currentColor means it turns gold at the same instant the ring does, from the one rule that already does that. The ring's clear middle is about 47% of the figure, so the type is sized against the figure's own width rather than the viewport, and tabular numerals stop the digits shuffling as they climb. ================================================================== */ .load-pct{ position:absolute;inset:0;margin:0;z-index:2; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.5em;color:currentColor;pointer-events:none; font-family:var(--mono);line-height:1; } .load-word{ font-size:clamp(9px,1.6vmin,11px); letter-spacing:var(--track-label);text-transform:uppercase; opacity:.65; } .load-count{ display:flex;align-items:baseline; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; } .load-num{font-size:clamp(24px,4.6vmin,34px);letter-spacing:-.02em} .load-unit{font-size:clamp(11px,2vmin,15px);margin-left:.12em;opacity:.65} @media (prefers-reduced-motion:reduce){ /* nothing counts up; the overlay is gone almost immediately anyway */ .load-pct{display:none} } /* The count was not turning gold with the ring. The gold rule sets colour on .oj-illus, and the counter is its sibling, not its child — so currentColor on .load-pct kept inheriting white from .load-in. Moving the colour up to .load-in turns the ring and the number together from one declaration, which is what the counter was written to assume. */ .load-in{transition:color .42s var(--ease)} .preload #load.whole .load-in{color:var(--gold)} @media (prefers-reduced-motion:reduce){ .load-in{transition:none} } /* Smaller. The count was set to fill the ring's clear middle — 34px for the number against a 105px opening — which made it the loudest thing on the overlay and put it in competition with the mark. It should read as a caption on the figure, not as the figure. Roughly half the size, more air between the word and the number, and both held back in weight: the word is tracked out and dimmed, the unit sits quieter than the digits so "%" does not read as a third element. The ring is the thing you watch; this only tells you how long. */ .load-pct{font-size:10px;gap:1.05em} .load-word{ font-size:clamp(7.5px,1.15vmin,8.5px); letter-spacing:.22em;opacity:.5; } .load-num{font-size:clamp(13px,2.1vmin,15px);letter-spacing:0} .load-unit{font-size:clamp(8px,1.3vmin,9px);margin-left:.16em;opacity:.5} /* ================================================================== THE RAIL, REWORKED — a visible index rather than a set of ticks ------------------------------------------------------------------ Every section's name is now on screen at all times, set vertically down the right edge against a hairline. It reads top to bottom, the same direction you travel, so the order of the names is the order of the page. The colour stops being an opacity. Names that are always visible are text under SC 1.4.3 and owe 4.5:1, not the 3:1 an idle control owes, and the rail crosses four grounds — paper, navy, blue, tint. Dimming by opacity would have had to clear 4.5 on all four at once. Two tokens that already do are simpler and provable: stone on the light grounds, wash on the dark, swapped by the same data-on the scroll spy already sets. Vertical text costs about 30px of width where the horizontal names would have cost 155, which is what made them hide in the first place. ================================================================== */ .rail{ --rail-dim:var(--stone); --rail-on:var(--ink); right:clamp(var(--s1),1.6vw,var(--s3)); } .rail[data-on="dark"]{--rail-dim:var(--wash);--rail-on:var(--white)} /* the bar itself: one hairline the names hang off */ .rail::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:1px; background:var(--rail-dim);opacity:.45; } .rail ol{ width:auto;padding-left:clamp(10px,0.9vw,14px); display:flex;flex-direction:column;align-items:flex-start; gap:clamp(14px,1.9vh,26px); } .rail li{display:block} .rail a{ position:relative;display:inline-flex;align-items:center; writing-mode:vertical-rl; /* reads top to bottom */ width:auto;height:auto;justify-content:flex-start; padding:var(--s0) 5px; /* keeps the 24px cross axis */ color:var(--rail-dim); transition:color .28s var(--ease); } .rail a[aria-current="true"]{color:var(--rail-on)} /* the name, no longer hidden */ .rail-t{ position:static;transform:none;opacity:1; writing-mode:inherit; font-family:var(--mono);font-size:clamp(9.5px,0.72vw,11px); letter-spacing:.16em;text-transform:uppercase;white-space:nowrap; color:inherit;pointer-events:none; transition:none; } /* the tick crosses the hairline, and only for the section you are in */ .rail-m{ position:absolute;left:calc(-1 * clamp(10px,0.9vw,14px));top:50%; width:0;height:1px;margin-top:-0.5px; background:var(--rail-on);opacity:0; transition:width .34s var(--ease), opacity .34s var(--ease); } .rail a[aria-current="true"] .rail-m{width:clamp(10px,0.9vw,14px);opacity:1} .rail a:hover .rail-t, .rail a:focus-visible .rail-t{text-decoration:underline;text-underline-offset:3px} .rail a:hover{color:var(--rail-on)} /* the old behaviour hid the current name while pointing at the rail */ .rail:hover a[aria-current] .rail-t, .rail:focus-within a[aria-current]:not(:hover):not(:focus-visible) .rail-t{opacity:1} .rail a:hover .rail-m, .rail a:focus-visible .rail-m{width:clamp(10px,0.9vw,14px);opacity:1} /* Seven names set vertically need real height. Below this the stack would run past the viewport and the last sections would sit off screen. */ @media (max-height:600px){ .rail{display:none} } @media (prefers-reduced-motion:reduce){ .rail a,.rail-m{transition:none} } /* Tighter, so it clears the content column at more widths. Measured, the rail overlapped by 5px at 1360 and cleared by only 10 at 1440 — the visible names made it wider than the tick-only version the old 1360 breakpoint was tuned for. Pulling in the offset and the padding buys back about 15px without touching the type. The widest thing on the page at these widths is the partner row, not the bands. */ .rail{right:clamp(6px,0.7vw,13px)} .rail ol{padding-left:clamp(8px,0.7vw,11px)} .rail a{padding:var(--s0) 4px} .rail-m{ left:calc(-1 * clamp(8px,0.7vw,11px)); } .rail a[aria-current="true"] .rail-m, .rail a:hover .rail-m, .rail a:focus-visible .rail-m{width:clamp(8px,0.7vw,11px)} /* ================================================================== Sanity check: one right edge, and a legible rail ------------------------------------------------------------------ Measured, the page had three right edges: the sticky labels at 382, every band's content at 1339, and the partner row and footer at 1401. Those last two sat 62px wider than everything above them, so the page's right margin stepped out twice near the bottom. They are the only two blocks that centre a max-width inside a padded parent instead of padding inside a max-width like the bands do. Aligning them does two jobs: the right margin becomes one line down the whole page, and the gutter the rail lives in becomes uniform rather than pinching at the partner band. ================================================================== */ .partners-in,.foot{max-width:calc(1280px - 2 * var(--gut))} /* ------------------------------------------------------------------ The rail, unrotated ------------------------------------------------------------------ It was hard to see and the cause was the rotation, not the colour — contrast measured 5.02:1 at its worst, which passes, but 11px of rotated mono in a 36px strip has no legibility left to spend. Turning type on its side is a styling flourish; wayfinding is the one place that trades badly. Horizontal now, which needs width the names did not have — so the two that carried articles lost them. "The questions" was the longest string on the rail and "Questions" fits the gutter that aligning the footer just freed. The left sticky labels already say which section you are in, in horizontal type at a readable size. This is the thing that lets you jump; it marks the current section as confirmation, not as the primary answer. ================================================================== */ .rail a{ writing-mode:horizontal-tb; justify-content:flex-end;align-items:center; gap:clamp(6px,0.5vw,9px); width:100%;padding:var(--s0) 0; text-align:right; } .rail ol{ width:auto;align-items:stretch; padding-left:0;padding-right:clamp(8px,0.7vw,12px); gap:clamp(6px,0.7vh,11px); } .rail-t{ writing-mode:horizontal-tb; font-size:clamp(10.5px,0.78vw,12px);letter-spacing:.1em; } /* the hairline moves to the outside edge, and the tick grows off it */ .rail::before{left:auto;right:0} .rail-m{ left:auto;right:calc(-1 * clamp(8px,0.7vw,12px));top:50%; } .rail a[aria-current="true"] .rail-m, .rail a:hover .rail-m, .rail a:focus-visible .rail-m{width:clamp(8px,0.7vw,12px)} .rail a[aria-current="true"] .rail-t{font-weight:500} @media (max-height:520px){ .rail{display:none} } /* The breakpoint moves with the rail. Horizontal names need real width: measured, the gap to the content column is 1px at 1360 and 39px at 1440, so the old 1360 cutoff would have put the menu hard against the text. 1440 is where it has room to be a margin rather than a collision. Below it the left sticky labels carry the section on their own, which is the job they were already doing. */ @media (max-width:1439px){ .rail{display:none} } /* ================================================================== THE INDEX PANEL — replacing the side rail ------------------------------------------------------------------ Twice I tried to make a gutter rail legible and twice it was still hard to read, because the pattern was the problem rather than the settings: seven names in a peripheral strip can only ever be about 12px, set in tracked uppercase mono, over four different grounds. And below 1440 it was hidden entirely, which left phones and most laptops with no navigation at all on a thirteen-screen page. The same seven names in a panel can be 40px. That is the whole argument. Legibility is a function of size and position, and a panel gives both where a gutter gives neither. It also carries what a rail could not: a number, a descriptor for each section, the date and place, and the apply action — so it works as an overview of the day rather than only as a set of jump targets. Ink ground, because the panel should read as a different surface from the page rather than as a lightbox over it. ================================================================== */ .bar-index{margin-left:auto} .bar-in .btn.bar-index + .btn{margin-left:0} .index{ position:fixed;inset:0;z-index:120; background:var(--ink);color:var(--white); overflow-y:auto;overscroll-behavior:contain; opacity:0;transition:opacity .34s var(--ease); } .index.on{opacity:1} .index[hidden]{display:none} .index-in{ min-height:100%;max-width:1280px;margin:0 auto; padding:clamp(var(--s3),3vw,var(--s5)) var(--gut) clamp(var(--s4),4vw,var(--s6)); display:flex;flex-direction:column; } .index-head{ display:flex;align-items:baseline;justify-content:space-between; gap:var(--s3);padding-bottom:var(--s2); border-bottom:1px solid color-mix(in srgb, var(--white) 26%, transparent); } .index-h{ margin:0;font-family:var(--mono);font-weight:400; font-size:var(--t--1);letter-spacing:var(--track-label);text-transform:uppercase; color:var(--wash); } .index-close{ background:none;border:0;cursor:pointer;color:var(--white); font-family:var(--mono);font-size:var(--t--1); letter-spacing:var(--track-label);text-transform:uppercase; padding:var(--s0) var(--s1);margin:calc(-1 * var(--s0)) calc(-1 * var(--s1)); min-height:var(--s4); } .index-close:hover{text-decoration:underline;text-underline-offset:4px} .index-list{list-style:none;margin:0;padding:0;flex:1 0 auto} .index-list li{border-bottom:1px solid color-mix(in srgb, var(--white) 16%, transparent)} .index-list a{ display:grid;align-items:baseline; grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(var(--s2),2vw,var(--s4)); padding:clamp(var(--s2),1.9vw,var(--s3)) 0; text-decoration:none;color:var(--white); } .ix-n{ font-family:var(--mono);font-size:var(--t--1);color:var(--wash); letter-spacing:var(--track-label); } .ix-t{ font-family:var(--display);font-weight:700;letter-spacing:-.03em; font-size:clamp(var(--t-2),3.4vw,var(--d-2));line-height:1.02; } .ix-d{ font-family:var(--mono);font-size:var(--t--1);color:var(--wash); letter-spacing:var(--track-label);text-transform:uppercase;text-align:right; } .index-list a:hover .ix-t, .index-list a:focus-visible .ix-t{text-decoration:underline;text-underline-offset:6px} .index-list a[aria-current="true"] .ix-n{color:var(--gold)} .index-list a[aria-current="true"] .ix-t{color:var(--white)} .index-foot{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:var(--s3);padding-top:var(--s3); } .index-foot p{ margin:0;font-family:var(--mono);font-size:var(--t--1); letter-spacing:var(--track-label);text-transform:uppercase;color:var(--wash); line-height:1.6; } .index .btn{background:var(--white);color:var(--ink);border-color:var(--white)} .index .btn:hover{background:var(--wash);color:var(--ink)} .index :focus-visible{outline:3px solid var(--gold);outline-offset:3px} @media (max-width:560px){ .index-list a{grid-template-columns:auto minmax(0,1fr);row-gap:var(--s0)} .ix-d{grid-column:2;text-align:left} .index-foot{flex-direction:column;align-items:flex-start} } @media (prefers-reduced-motion:reduce){ .index{transition:none} } /* Fit all seven without scrolling. At 52px the list ran 276px past an 864px viewport, and a menu you have to scroll to see is not doing the one job a menu has. The names are sized against viewport HEIGHT as well as width — whichever is scarcer wins — so the whole index is visible at once on a laptop and still large on a big display. Still far larger than the 12px the gutter rail could manage, which was the point. */ .ix-t{font-size:clamp(var(--t-1), min(2.7vw, 4.3vh), var(--d-2))} .index-list a{padding:clamp(var(--s0),1.1vh,var(--s2)) 0} .index-head{padding-bottom:var(--s1)} .index-h{line-height:1.2} .index-in{padding-top:clamp(var(--s2),2vh,var(--s4));padding-bottom:clamp(var(--s2),2.4vh,var(--s4))} .index-foot{padding-top:clamp(var(--s2),2vh,var(--s3))} /* The panel title is an h2 so the dialog has an accessible name, which meant it inherited the page's display heading size — 75px on a 14px label. Scoped inside .index so it beats the element rule. */ .index .index-h{ font-size:var(--t--1);font-family:var(--mono);font-weight:400; letter-spacing:var(--track-label);text-transform:uppercase; line-height:1.2;color:var(--wash);margin:0;text-wrap:wrap; } /* ================================================================== Both marks in the header ------------------------------------------------------------------ This is a partnership between Hillel TMU and TMJew, not TMJew's day with Hillel credited underneath it, so both marks sit at the top of the hero at the same weight, before the name of the event. Knockout white for both. The field is TMU Blue and the TMJew mark's own #0057B8 would sink into it, so it takes the same flat #F8F9FA the footer already gives it, and Hillel uses its knockout file. Two marks in one lockup have to be the same value or the pairing reads as one brand and one afterthought. Sized by weight rather than by box, as in the footer: TMJew is a square outline carrying a lot of air, the Hillel lockup is solid letterforms, so matching their heights would let Hillel dominate. ================================================================== */ .presenters{margin:0 0 clamp(var(--s2),2vh,var(--s3))} .presenters-lbl{ margin:0 0 var(--s1);font-family:var(--mono);font-size:var(--t--2); letter-spacing:var(--track-label);text-transform:uppercase;color:var(--wash); } .presenters-marks{ display:flex;align-items:center; gap:clamp(var(--s2),1.8vw,var(--s4)); } .tmjew-mark.hero-logo{ width:clamp(38px,4vw,56px);height:auto;flex:0 0 auto; } .hero-hillel{ display:block;height:clamp(20px,2.1vw,30px);width:auto;flex:0 0 auto; } .presenters-div{ display:block;flex:0 0 auto;width:1px;align-self:stretch; min-height:var(--s3); background:color-mix(in srgb, var(--white) 42%, transparent); } /* the mark opts out of its assembling entrance here, as in the footer: this is a credit, not a reveal */ .tmjew-mark.hero-logo .tm-y, .tmjew-mark.hero-logo .tm-b, .tmjew-mark.hero-logo .tm-w{ transform:none;opacity:1;transition:none; } .tmjew-mark.hero-logo .tm-y, .tmjew-mark.hero-logo .tm-b, .tmjew-mark.hero-logo .tm-w, .tmjew-mark.hero-logo .tm-w tspan{fill:#F8F9FA} @media (max-width:560px){ .presenters-div{display:none} .presenters-marks{gap:var(--s3)} } /* Hillel comes up. At 54% of the TMJew mark's height the two boxes looked balanced, but the ink did not: TMJew is an outline hexagram spanning its whole square while the Hillel lockup is two short lines of solid type, so at that size Hillel was carrying visibly less weight and reading as the junior mark. Co-billing has to look like co-billing. */ .hero-hillel{height:clamp(26px,2.8vw,40px)} /* Back down, and this time measured rather than eyeballed. Rasterising both marks at their rendered sizes and counting opaque pixels: the TMJew mark is 647 ink pixels at 20.6% coverage of its square, because it is an outline. The Hillel lockup at 40px was 1335 at 59.6% — twice the ink, so raising it had not balanced the pairing, it had flipped which mark dominated. Ink parity lands at 27.8px; 30 gives Hillel a ratio of about 1.16, a deliberate slight edge so the partner's name stays comfortably readable. Which is where it started, before I trusted the boxes. */ .hero-hillel{height:clamp(22px,2vw,30px)} /* ================================================================== The TMJew mark keeps its yellow at the top ------------------------------------------------------------------ Flattening it to one white was right for the footer, where it sits beside a knocked-out Hillel lockup on ink and the pair has to match. In the hero it is the brand's own introduction, so only the half that cannot survive the ground is changed: the blue goes to white because #0057B8 on TMU Blue is invisible, and the yellow stays, because it reads perfectly well there and it is half the identity. The yellow is the mark's own #FFCC00, not --gold. It is brand artwork rather than the design system's accent, so it does not spend one of the three gold appearances the page rations. ================================================================== */ .tmjew-mark.hero-logo .tm-b{fill:#F8F9FA} .tmjew-mark.hero-logo .tm-y{fill:#FFCC00} .tmjew-mark.hero-logo .tm-w tspan:nth-child(1){fill:#F8F9FA} .tmjew-mark.hero-logo .tm-w tspan:nth-child(2){fill:#FFCC00} /* ================================================================== The partners in the sticky bar ------------------------------------------------------------------ Same pairing as the hero, on the bar's light ground — so both marks use their primary colours here rather than a knockout. Hillel takes the HORIZONTAL lockup, not the stacked one used in the hero. The stacked mark is two lines of type; at the ~20px a sticky bar allows, the second line would be unreadable. The secondary lockup is one line at 4.8:1, so it stays legible at bar height. They drop below 1100, where the bar needs its width for the two actions and the event's own name. ================================================================== */ .bar-div{ width:1px;align-self:stretch;min-height:var(--s3);flex:0 0 auto; background:var(--rule); } .bar-partners{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto} .tmjew-mark.bar-logo{width:clamp(22px,1.8vw,28px);height:auto;flex:0 0 auto} /* a credit, not a reveal — opt out of the assembling entrance */ .tmjew-mark.bar-logo .tm-y, .tmjew-mark.bar-logo .tm-b, .tmjew-mark.bar-logo .tm-w{transform:none;opacity:1;transition:none} .bar-hillel{display:block;height:clamp(13px,1.15vw,18px);width:auto;flex:0 0 auto} @media (max-width:1100px){ .bar-div,.bar-partners{display:none} } /* Hillel Ontario joins both lockups. Three marks now, so the sizing is done by ink again rather than by box: the Ontario lockup is wider and denser than the TMU one, so matching their heights would let it outweigh both partners. It runs shorter to compensate — measured below, not guessed. In the bar all three take horizontal lockups; in the hero all three are stacked. Mixing orientations inside one lockup reads as three logos that happen to be adjacent rather than as one credit. */ .hero-ontario{height:clamp(20px,1.8vw,27px)} .bar-ontario{height:clamp(11px,1vw,15px)} /* three marks need more room than two, so they go earlier */ @media (max-width:1240px){ .bar-div,.bar-partners{display:none} } /* Ontario down a touch. Measured across the three: TMJew 647 ink pixels, Hillel TMU 759, Hillel Ontario 890 — a 1.38 spread, with the newest mark the heaviest. Scaling Ontario by the square root of the ratio brings the set to about 1.18, which is even enough that no partner reads as the headline. */ .hero-ontario{height:clamp(18px,1.65vw,25px)} /* The beside-the-star wordmark that stood here is gone: TMJew supplied the real lockup, which carries its own outlined wordmark. */ /* ================================================================== THE TMJEW LOGO, INLINE ------------------------------------------------------------------ TMJew re-cut the file with the triangles whole rather than as ring outlines, so the star is two complete polygons and the wordmark is its own group. That is animatable, which the flattened version was not, so the logo is inlined rather than served as an <img>. Inlining also collapses the three colour variants back into one source. The artwork sits on three grounds — light, TMU Blue, ink — and fills are set per placement in CSS instead of by generating a file each time. The file's own <style> block is stripped on the way in: repeated four times in one document it would have applied globally and every copy would have fought the others. ================================================================== */ .tj{display:block;width:auto;height:auto;flex:0 0 auto} .tj .tj-x{fill:none} /* construction shapes, never painted */ /* light grounds: the brand's own colours */ .tj .tj-b{fill:#0057B8} .tj .tj-y{fill:#FC0} /* on TMU Blue the blue would vanish, so it goes white and the yellow stays */ .tj.hero-logo .tj-b{fill:#F8F9FA} .tj.hero-logo .tj-y{fill:#FFCC00} /* on ink, flat white beside the Hillel knockouts */ .tj.foot-logo .tj-b, .tj.foot-logo .tj-y{fill:#F8F9FA} /* sizes, carried over from the measured balance */ .tj.hero-logo{height:clamp(26px,2.6vw,40px)} .tj.bar-logo{height:clamp(24px,2.2vw,32px)} .tj.foot-logo{height:clamp(34px,3.5vw,50px)} .tj.lockup-logo{width:clamp(180px,20vw,300px)} /* ---- the entrance, rebuilt on the whole triangles ------------------ The two halves of the star arrive from opposite corners on their own axes and settle into register; the name fades up once they have landed. Only on the large lockup — at 32px in the sticky bar this would be a twitch, not a reveal. */ @media (prefers-reduced-motion:no-preference){ .tmjew-lockup .tj-star polygon{ transform-box:view-box;transform-origin:50% 50%; transition:transform 1.05s var(--ease), opacity .8s var(--ease); } .tmjew-lockup .tj-star .tj-y{transform:translate(180px,140px) rotate(12deg);opacity:0} .tmjew-lockup .tj-star .tj-b{transform:translate(-180px,-140px) rotate(-12deg);opacity:0} .tmjew-lockup .tj-word{opacity:0;transition:opacity .7s var(--ease) .5s} .tmjew-lockup.in .tj-star .tj-y, .tmjew-lockup.in .tj-star .tj-b{transform:none;opacity:1} .tmjew-lockup.in .tj-word{opacity:1} } /* JMAO. Unlike the other three this file is a solid navy tile rather than transparent artwork — its wordmark is white and would be invisible on the white band without it — so it reads as a block where the others read as marks. Sized down a little to compensate: a filled rectangle carries far more weight than an outline at the same height. */ .partner-row .p-jmao{height:clamp(26px,2.9vw,38px)} /* The bar goes solid. It was chalk at 92% over a backdrop blur, so the blue field read through it and the marks sat on a shifting ground — the one place on the page where a logo could not be trusted to have a fixed background behind it. White, to match the partner band, which is the only other pure-white surface here. The blur goes with it. backdrop-filter on a fixed element repaints the region behind it on every scroll frame, and once the background is opaque there is nothing behind it to blur. */ #bar{ background:#FFFFFF; backdrop-filter:none; -webkit-backdrop-filter:none; } /* Hillel Ontario joins Hillel TMU in both places it was missing — under "Presented with" in Convenors, and in the footer. Both use the stacked lockups so the pair matches, primary on the light section and knockout on the ink footer. Sized by ink as everywhere else: the Ontario lockup is wider and denser than the TMU one, so at a shared height it would outweigh it. It runs shorter to compensate. */ .partner-marks{display:flex;align-items:center;gap:clamp(var(--s3),3vw,var(--s5));flex-wrap:wrap} .partner-mark{margin:0} .partner-ontario{height:clamp(44px,5.2vw,74px)} .foot-ontario{height:clamp(22px,2.6vw,32px)} /* Label headings hold their own size. Both of these are h2 for structure — one names a dialog, one names the partner region — and both were losing to the page's display h2 rule, which is 75px. The index title was fixed by name and the partner heading was not, so it shipped at 75px in stone grey where a 10.9px mono label was intended. One rule for the class now. */ .h-label{ font-family:var(--mono);font-weight:400; font-size:var(--t--2);letter-spacing:var(--track-label); text-transform:uppercase;line-height:1.2;margin:0; text-wrap:wrap; } .partners .h-label{color:var(--stone);margin-bottom:var(--s3)} .index .h-label{color:var(--wash)} /* Specificity: the display size comes from [data-art="on"] h2, which is one class and one element — a bare .h-label ties at one class and loses on order. Qualified with the element it wins cleanly, without !important. */ h2.h-label{ font-family:var(--mono);font-weight:400; font-size:var(--t--2);letter-spacing:var(--track-label); text-transform:uppercase;line-height:1.2;margin:0;text-wrap:wrap; } .partners h2.h-label{color:var(--stone);margin-bottom:var(--s3)} .index h2.h-label{color:var(--wash)} /* ================================================================== SPEAKER BIOGRAPHIES ------------------------------------------------------------------ A name in the programme carrying a small photograph opens a panel with that speaker's picture and bio. Only names that HAVE a bio are buttons. One speaker of thirteen has supplied one, so making every name look clickable would promise twelve things the page cannot deliver — the plain names stay plain, and the interactive one earns its affordance by showing a face. The bios live in the document, not in a script. Hidden here once JavaScript is running, shown in place when it is not, so a reader without JS gets the text rather than a button that does nothing — and a crawler gets it either way. ================================================================== */ .js .sp-store{display:none} .sp-store{margin:var(--s6) 0 0} .sp-store article{margin:0 0 var(--s4);max-width:70ch} .sp-store img{max-width:180px;height:auto;display:block;margin:0 0 var(--s2)} /* the name, with a face on it */ .sp-open{ display:inline-flex;align-items:center;gap:.45em; background:none;border:0;padding:0;margin:0;cursor:pointer; font:inherit;color:inherit; text-underline-offset:3px;text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 45%, transparent); } .sp-open:hover{text-decoration-color:currentColor} .sp-thumb{ width:1.55em;height:1.55em;border-radius:50%;object-fit:cover; flex:0 0 auto;display:block; transition:transform var(--dur-1) var(--ease); } .sp-open:hover .sp-thumb, .sp-open:focus-visible .sp-thumb{transform:scale(1.12)} @media (prefers-reduced-motion:reduce){ .sp-thumb{transition:none} } /* The name button measured 22px tall. Inline targets inside a sentence are exempt from SC 2.5.8, and this one sits in a comma-separated list of names, so it qualifies — but it is two pixels off a floor it could simply meet, and an exemption is a worse answer than clearing the bar. min-height rather than padding, so the line box around it is not disturbed. */ .sp-open{min-height:24px} /* Qualified with the element, for the third time. [data-art="on"] h2 is one class and one element, and it has now silently overridden three scoped headings written as a single class: the index title, the partners label, and this. Any h2 this page styles by class has to carry the element with it or it loses on order without a word. */ h2.speaker-name{ font-size:clamp(var(--t-2),3.4vw,var(--d-1)); line-height:1.04;letter-spacing:-.03em; font-family:var(--display);font-weight:700; margin:0 0 var(--s1); } /* ================================================================== THE SPEAKER PANEL — a card, not a blackout ------------------------------------------------------------------ It filled the viewport with ink, which reads as leaving the page rather than looking at something on it. A card over a dimmed, blurred page keeps the schedule visible behind — you can still see where you were, and closing feels like putting something down instead of coming back from somewhere. The card stays ink. Against a dimmed page it separates cleanly, the photograph sits better on dark than on paper, and it keeps the same surface language as the index. What changed is that it is now bounded. backdrop-filter is fine here where it was not on the sticky bar: this paints once when the panel opens rather than on every scroll frame, and the blur is the effect rather than an accident of translucency. ================================================================== */ .speaker{ position:fixed;inset:0;z-index:130; display:flex;align-items:center;justify-content:center; padding:clamp(var(--s2),4vh,var(--s5)) var(--gut); background:color-mix(in srgb, var(--ink) 58%, transparent); backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px); overflow-y:auto;overscroll-behavior:contain; opacity:0;transition:opacity .28s var(--ease); } .speaker.on{opacity:1} .speaker[hidden]{display:none} .speaker-in{ position:relative; width:100%;max-width:900px;margin:auto; background:var(--ink);color:var(--white); padding:clamp(var(--s3),3.4vw,var(--s5)); border-top:3px solid var(--gold); /* the card's one bright edge */ transform:translateY(14px) scale(.985); transition:transform .34s var(--ease); } .speaker.on .speaker-in{transform:none} /* a real X, big enough to hit, in the one colour that carries on ink */ .speaker-close{ position:absolute;top:clamp(8px,1vw,14px);right:clamp(8px,1vw,14px); width:44px;height:44px;display:grid;place-items:center; background:none;border:1px solid color-mix(in srgb, var(--white) 30%, transparent); border-radius:50%;cursor:pointer;color:var(--gold); padding:0;margin:0; transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .speaker-close svg{width:20px;height:20px;display:block} .speaker-close svg path{stroke:currentColor;stroke-width:2;stroke-linecap:square;fill:none} .speaker-close:hover{background:color-mix(in srgb, var(--white) 12%, transparent); border-color:var(--gold)} .speaker-body{ display:grid;gap:clamp(var(--s3),2.6vw,var(--s5)); grid-template-columns:minmax(0,240px) minmax(0,1fr); align-items:start; } .speaker-photo{width:100%;height:auto;display:block} .speaker-text{padding-right:var(--s5)} /* clear of the close button */ h2.speaker-name{ margin:0 0 var(--s1);font-family:var(--display);font-weight:700; font-size:clamp(var(--t-2),2.6vw,var(--d-1));line-height:1.04;letter-spacing:-.03em; } .speaker-role{ margin:0 0 var(--s2);font-family:var(--mono);font-size:var(--t--2); letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gold); line-height:1.5; } .speaker-text p{margin:0 0 var(--s2);max-width:60ch} .speaker-text #speaker-bio p{color:var(--wash);font-size:var(--t--1);line-height:1.6} .speaker-text #speaker-bio p:last-child{margin-bottom:0} .speaker :focus-visible{outline:3px solid var(--gold);outline-offset:3px} @media (max-width:720px){ .speaker-body{grid-template-columns:1fr} .speaker-photo{max-width:180px} .speaker-text{padding-right:0} } @media (prefers-reduced-motion:reduce){ .speaker,.speaker-in{transition:none} .speaker-in{transform:none} } /* 44px was the intent and 43 was the measurement — the border eats a pixel a side under the page's box-sizing, and a rounded 43 misses the floor it was written to meet. 46 clears it with the border included. */ .speaker-close{width:46px;height:46px} .speaker-close svg{width:21px;height:21px} /* ================================================================== The two Hillel lockups take one height ------------------------------------------------------------------ I had been sizing these by ink, which is right for two unrelated marks and wrong for these. They are one family sharing one word: "Hillel" is drawn identically in both, and only the campus or region name below it differs. Ink parity scaled the wider Ontario lockup down to compensate for having more letters, which rendered the same word at two different sizes side by side — that reads as a mistake, not as balance. Their viewBoxes are 300.6 and 296.9 tall, a 1.2% difference. They were drawn to sit at a matching height, so they get one. TMJew is still balanced against them by ink. It is a different brand with no shared element, so there is nothing to line up. ================================================================== */ .hero-ontario{height:clamp(22px,2vw,30px)} /* = .hero-hillel */ .bar-ontario{height:clamp(13px,1.15vw,18px)} /* = .bar-hillel */ .partner-ontario{height:clamp(56px,6.5vw,92px)} /* = .partner-mark */ .foot-ontario{height:clamp(28px,3.4vw,40px)} /* = .foot-hillel */ /* ================================================================== Speakers in the programme: a row of people, not a sentence ------------------------------------------------------------------ Three things were wrong with the comma-separated line. The underline sat on the button, which is an inline-flex, so it ran under the photograph as well as the name — that long rule under both was a bug, not a style. It belongs on the name. Commas made it a sentence, so a name with a face beside it had a comma hanging off it and the row read as prose interrupted by an image. Speakers are a list; the list is now spaced rather than punctuated. And the photograph was riding the text baseline at 24px, which put it half a line above the names beside it. Centred in a flex row it sits with them. Names without a bio stay plain in the same rhythm. No placeholder circle: an empty avatar implies a photograph that does not exist. ================================================================== */ .who{ display:flex;flex-wrap:wrap;align-items:center; column-gap:clamp(var(--s2),1.6vw,var(--s3));row-gap:var(--s0); margin:var(--s1) 0 0; } .who .sp{display:inline-flex;align-items:center} .who .sp + .sp::before{content:none} /* the commas go */ .sp-open{ display:inline-flex;align-items:center;gap:.5em; background:none;border:0;padding:0;margin:0;cursor:pointer; font:inherit;color:inherit;min-height:24px; text-decoration:none; /* never on the whole button */ } .sp-open .sp-name{ text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent); transition:text-decoration-color var(--dur-1) var(--ease); } .sp-open:hover .sp-name, .sp-open:focus-visible .sp-name{text-decoration-color:currentColor} .sp-thumb{ width:30px;height:30px;border-radius:50%;object-fit:cover; flex:0 0 auto;display:block; box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); transition:transform var(--dur-1) var(--ease); } .sp-open:hover .sp-thumb, .sp-open:focus-visible .sp-thumb{transform:scale(1.08)} @media (prefers-reduced-motion:reduce){ .sp-thumb,.sp-open .sp-name{transition:none} }