diff --git a/components.css b/components.css index e8647f2..78a4bdb 100644 --- a/components.css +++ b/components.css @@ -286,17 +286,28 @@ cursor: not-allowed; } -/* Error / required-but-empty */ +/* Required asterisk — always visible on required fields */ +.input-field:has(:required) .input-field__label::after { + content: '*'; + color: var(--fg-red-bright); + margin-left: 2px; + font-size: 0.65em; + vertical-align: super; +} + +/* Suppress browser default red border on :invalid required fields */ +.input-field__input:invalid { + box-shadow: none; + border-color: var(--bg-secondary); +} + +/* Error / required-but-empty (JS-driven only) */ .input-field__input--error, .input-field__input--error:focus, .input-field__input--error:focus-visible { border-color: var(--fg-red-bright) !important; border-width: 2px; } -.input-field--error .input-field__label::after { - content: ' *'; - color: var(--fg-red-bright); -} /* Textarea variant */ .input-field__input--textarea { @@ -593,7 +604,7 @@ gap: 4px; padding-top: var(--padding-xs); flex-shrink: 0; - border-top: 1px solid var(--bg-tertiary); + border-top: 1px solid var(--border-default); margin-top: var(--padding-xs); } diff --git a/index.html b/index.html index 76f8657..0e0146d 100644 --- a/index.html +++ b/index.html @@ -168,9 +168,9 @@

Leave your mark

- +
- +
@@ -394,104 +394,104 @@

This art inspiration

const topDots = [ // Yellow (x 2–44%) {id:'y01',c:'yellow',x:3, y:10,s:false}, - {id:'y02',c:'yellow',x:11, y:10,s:true, f:{n:'Allie Thu', r:'Design Director', rel:'Manager/PM', t:'Devyani was an extraordinary designer who elevated every project she touched.'}}, + {id:'y02',c:'yellow',x:11, y:10,s:false}, {id:'y03',c:'yellow',x:19, y:10,s:false}, {id:'y04',c:'yellow',x:28, y:10,s:false}, {id:'y05',c:'yellow',x:8, y:25,s:false}, - {id:'y06',c:'yellow',x:17, y:25,s:true, f:{n:'Priya K', r:'Senior Designer', rel:'Manager/PM', t:'A joy to collaborate with. Creative, meticulous, and always user-first.'}}, + {id:'y06',c:'yellow',x:17, y:25,s:false}, {id:'y07',c:'yellow',x:27, y:25,s:false}, {id:'y08',c:'yellow',x:36, y:25,s:false}, {id:'y09',c:'yellow',x:43, y:25,s:false}, {id:'y10',c:'yellow',x:3, y:41,s:false}, {id:'y11',c:'yellow',x:12, y:41,s:false}, - {id:'y12',c:'yellow',x:23, y:41,s:true, f:{n:'Marco V', r:'Product Manager', rel:'Manager/PM', t:'Devyani brings incredible cross-functional clarity. A pleasure to work with.'}}, + {id:'y12',c:'yellow',x:23, y:41,s:false}, {id:'y13',c:'yellow',x:33, y:41,s:false}, {id:'y14',c:'yellow',x:8, y:58,s:false}, {id:'y15',c:'yellow',x:18, y:58,s:false}, {id:'y16',c:'yellow',x:29, y:58,s:false}, - {id:'y17',c:'yellow',x:39, y:58,s:true, f:{n:'Jordan L', r:'Engineering Lead', rel:'Manager/PM', t:'Made design handoffs a breeze. Precise, thoughtful, collaborative.'}}, + {id:'y17',c:'yellow',x:39, y:58,s:false}, {id:'y18',c:'yellow',x:4, y:74,s:false}, {id:'y19',c:'yellow',x:14, y:74,s:false}, {id:'y20',c:'yellow',x:25, y:74,s:false}, - {id:'y21',c:'yellow',x:35, y:74,s:true, f:{n:'Sam H', r:'Designer', rel:'Manager/PM', t:'One of the most growth-oriented designers I have worked with.'}}, + {id:'y21',c:'yellow',x:35, y:74,s:false}, {id:'y22',c:'yellow',x:43, y:74,s:false}, // Teal (x 51–96%) {id:'t01',c:'teal',x:53,y:8, s:false}, {id:'t02',c:'teal',x:62,y:8, s:false}, - {id:'t03',c:'teal',x:71,y:8, s:true, f:{n:'Kai M', r:'Design Manager', rel:'Colleague', t:'Outstanding design thinking and execution. A collaborative powerhouse.'}}, + {id:'t03',c:'teal',x:71,y:8,s:false}, {id:'t04',c:'teal',x:81,y:8, s:false}, {id:'t05',c:'teal',x:91,y:8, s:false}, {id:'t06',c:'teal',x:55,y:23,s:false}, {id:'t07',c:'teal',x:65,y:23,s:false}, - {id:'t08',c:'teal',x:75,y:23,s:true, f:{n:'Lin C', r:'Staff Engineer', rel:'Colleague', t:'Devyani bridged design and engineering beautifully. A true systems thinker.'}}, + {id:'t08',c:'teal',x:75,y:23,s:false}, {id:'t09',c:'teal',x:85,y:23,s:false}, {id:'t10',c:'teal',x:93,y:23,s:false}, {id:'t11',c:'teal',x:51,y:39,s:false}, - {id:'t12',c:'teal',x:61,y:39,s:true, f:{n:'Dani P', r:'Product Designer', rel:'Colleague', t:'Creative, articulate, and incredibly fun to collaborate with.'}}, + {id:'t12',c:'teal',x:61,y:39,s:false}, {id:'t13',c:'teal',x:71,y:39,s:false}, {id:'t14',c:'teal',x:81,y:39,s:false}, {id:'t15',c:'teal',x:90,y:39,s:false}, {id:'t16',c:'teal',x:57,y:55,s:false}, - {id:'t17',c:'teal',x:67,y:55,s:true, f:{n:'Alex T', r:'Research Lead', rel:'Colleague', t:'Deep empathy and excellent research skills. Devyani is a thoughtful advocate.'}}, + {id:'t17',c:'teal',x:67,y:55,s:false}, {id:'t18',c:'teal',x:77,y:55,s:false}, {id:'t19',c:'teal',x:88,y:55,s:false}, {id:'t20',c:'teal',x:52,y:70,s:false}, {id:'t21',c:'teal',x:63,y:70,s:false}, {id:'t22',c:'teal',x:73,y:70,s:false}, - {id:'t23',c:'teal',x:84,y:70,s:true, f:{n:'Yuki S', r:'Brand Designer', rel:'Colleague', t:'Inspired me to think more holistically about design systems.'}}, + {id:'t23',c:'teal',x:84,y:70,s:false}, {id:'t24',c:'teal',x:95,y:70,s:false}, ]; const bottomDots = [ // Green (x 0–28%) - {id:'g01',c:'green', x:11,y:8, s:true, f:{n:'Tara N', r:'UX Lead', rel:'Direct Report', t:'Devyani showed remarkable growth. Mentoring her was a highlight.'}}, + {id:'g01',c:'green', x:11,y:8,s:false}, {id:'g02',c:'green', x:21,y:8, s:false}, {id:'g03',c:'green', x:1, y:25,s:false}, - {id:'g04',c:'green', x:9, y:25,s:true, f:{n:'Ben F', r:'Designer', rel:'Direct Report', t:'Creative and meticulous. I learned a lot watching Devyani work.'}}, + {id:'g04',c:'green', x:9, y:25,s:false}, {id:'g05',c:'green', x:18,y:25,s:false}, {id:'g06',c:'green', x:26,y:25,s:false}, {id:'g07',c:'green', x:3, y:42,s:false}, {id:'g08',c:'green', x:13,y:42,s:false}, - {id:'g09',c:'green', x:23,y:42,s:true, f:{n:'Lena W', r:'Content Strategist', rel:'Direct Report', t:'Thoughtful and always user-first. A true collaborator.'}}, + {id:'g09',c:'green', x:23,y:42,s:false}, {id:'g10',c:'green', x:0, y:59,s:false}, {id:'g11',c:'green', x:10,y:59,s:false}, {id:'g12',c:'green', x:20,y:59,s:false}, - {id:'g13',c:'green', x:2, y:75,s:true, f:{n:'Chloe R', r:'Product Manager', rel:'Direct Report', t:'Always asks the right questions. Makes everyone around her better.'}}, + {id:'g13',c:'green', x:2, y:75,s:false}, {id:'g14',c:'green', x:14,y:75,s:false}, {id:'g15',c:'green', x:24,y:75,s:false}, // Red (x 32–59%) {id:'r01',c:'red', x:35,y:10,s:false}, - {id:'r02',c:'red', x:46,y:10,s:true, f:{n:'Omar A', r:'Design Director', rel:'Team/Engineer', t:'Devyani was exceptional. Her cross-functional clarity is rare.'}}, + {id:'r02',c:'red', x:46,y:10,s:false}, {id:'r03',c:'red', x:32,y:27,s:false}, - {id:'r04',c:'red', x:43,y:27,s:true, f:{n:'Ruby S', r:'Senior Designer', rel:'Team/Engineer', t:'Incredibly talented. Her process is as strong as her output.'}}, + {id:'r04',c:'red', x:43,y:27,s:false}, {id:'r05',c:'red', x:54,y:27,s:false}, {id:'r06',c:'red', x:36,y:43,s:false}, {id:'r07',c:'red', x:48,y:43,s:false}, - {id:'r08',c:'red', x:57,y:43,s:true, f:{n:'Felix H', r:'Engineer', rel:'Team/Engineer', t:'Great at translating complex ideas into clear, actionable designs.'}}, + {id:'r08',c:'red', x:57,y:43,s:false}, {id:'r09',c:'red', x:33,y:60,s:false}, {id:'r10',c:'red', x:44,y:60,s:false}, {id:'r11',c:'red', x:56,y:60,s:false}, - {id:'r12',c:'red', x:38,y:76,s:true, f:{n:'Mia T', r:'UX Researcher', rel:'Team/Engineer', t:'Exceptional at synthesizing research insights into design decisions.'}}, + {id:'r12',c:'red', x:38,y:76,s:false}, {id:'r13',c:'red', x:50,y:76,s:false}, // Purple (x 64–98%) {id:'p01',c:'purple',x:66,y:8, s:false}, - {id:'p02',c:'purple',x:77,y:8, s:true, f:{n:'Nora J', r:'Design Ops', rel:'SF office buddy', t:'Devyani elevates everyone around her. She will go very far.'}}, + {id:'p02',c:'purple',x:77,y:8,s:false}, {id:'p03',c:'purple',x:87,y:8, s:false}, {id:'p04',c:'purple',x:96,y:8, s:false}, - {id:'p05',c:'purple',x:70,y:23,s:true, f:{n:'Isaac B', r:'VP of Design', rel:'SF office buddy', t:'A rising star with limitless potential. Incredibly self-aware and driven.'}}, + {id:'p05',c:'purple',x:70,y:23,s:false}, {id:'p06',c:'purple',x:80,y:23,s:false}, {id:'p07',c:'purple',x:90,y:23,s:false}, {id:'p08',c:'purple',x:64,y:39,s:false}, {id:'p09',c:'purple',x:75,y:39,s:false}, - {id:'p10',c:'purple',x:85,y:39,s:true, f:{n:'Zara M', r:'Brand Lead', rel:'SF office buddy', t:'Beautiful work, thoughtful process. Devyani thinks in systems.'}}, + {id:'p10',c:'purple',x:85,y:39,s:false}, {id:'p11',c:'purple',x:93,y:39,s:false}, {id:'p12',c:'purple',x:68,y:56,s:false}, {id:'p13',c:'purple',x:79,y:56,s:false}, {id:'p14',c:'purple',x:89,y:56,s:false}, - {id:'p15',c:'purple',x:97,y:56,s:true, f:{n:'Chris O', r:'Principal Designer', rel:'SF office buddy', t:'Inspiring work ethic and curiosity. Devyani never stops learning.'}}, + {id:'p15',c:'purple',x:97,y:56,s:false}, {id:'p16',c:'purple',x:65,y:72,s:false}, {id:'p17',c:'purple',x:76,y:72,s:false}, - {id:'p18',c:'purple',x:87,y:72,s:true, f:{n:'Leila H', r:'UX Writer', rel:'SF office buddy', t:'Makes every word and pixel count. A joy to mentor.'}}, + {id:'p18',c:'purple',x:87,y:72,s:false}, {id:'p19',c:'purple',x:96,y:72,s:false}, ];