/* --------------------------------------------------------------- hero-tones.css — נדגם מקבצי ה-hero האמיתיים, 29 מוצרים. כל גוון הוא הצבע של עמודת הקיר החיצונית באותו צילום, כגרדיאנט אנכי בן 5 נקודות. הפאנלים האלה יושבים מתחת לתצלום, אז הם נראים רק ברצועה שנשארת ריקה — התצלום עצמו לא נצבע. ליצירה מחדש אחרי שינוי בתמונות: hero-tone-sampler.html --------------------------------------------------------------- */ .pr-hero[data-hero="910"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(157,138,124) 10%, rgb(146,126,112) 30%, rgb(135,115,100) 50%, rgb(89,74,60) 70%, rgb(191,173,161) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(138,119,105) 10%, rgb(147,128,113) 30%, rgb(153,132,118) 50%, rgb(151,131,116) 70%, rgb(163,143,129) 90%); } .pr-hero[data-hero="310"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(170,151,137) 10%, rgb(183,166,154) 30%, rgb(146,129,114) 50%, rgb(105,90,75) 70%, rgb(211,196,185) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(134,117,104) 10%, rgb(149,132,120) 30%, rgb(158,140,128) 50%, rgb(163,146,134) 70%, rgb(176,158,146) 90%); } .pr-hero[data-hero="911"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(121,105,92) 10%, rgb(163,145,132) 30%, rgb(156,138,125) 50%, rgb(89,76,65) 70%, rgb(203,186,174) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(115,100,89) 10%, rgb(124,108,96) 30%, rgb(128,112,101) 50%, rgb(126,110,98) 70%, rgb(142,124,112) 90%); } .pr-hero[data-hero="897"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(117,103,89) 10%, rgb(139,122,108) 30%, rgb(171,154,140) 50%, rgb(104,89,76) 70%, rgb(214,200,190) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(109,94,80) 10%, rgb(127,112,99) 30%, rgb(141,127,114) 50%, rgb(143,128,116) 70%, rgb(150,134,123) 90%); } .pr-hero[data-hero="890"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(120,104,92) 10%, rgb(137,119,106) 30%, rgb(131,114,101) 50%, rgb(103,89,77) 70%, rgb(215,202,192) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(116,101,87) 10%, rgb(124,108,94) 30%, rgb(129,112,98) 50%, rgb(132,115,101) 70%, rgb(159,140,126) 90%); } .pr-hero[data-hero="910h"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(124,107,90) 10%, rgb(125,108,91) 30%, rgb(116,99,84) 50%, rgb(107,91,78) 70%, rgb(193,174,160) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(112,98,83) 10%, rgb(116,101,87) 30%, rgb(116,102,87) 50%, rgb(119,103,88) 70%, rgb(138,119,103) 90%); } .pr-hero[data-hero="899"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(135,122,112) 10%, rgb(127,115,105) 30%, rgb(119,107,98) 50%, rgb(131,118,108) 70%, rgb(231,221,216) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(132,117,108) 10%, rgb(158,141,130) 30%, rgb(172,154,144) 50%, rgb(176,159,149) 70%, rgb(182,166,157) 90%); } .pr-hero[data-hero="889-25"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(143,126,116) 10%, rgb(151,132,124) 30%, rgb(128,110,102) 50%, rgb(108,90,83) 70%, rgb(218,204,197) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(107,92,84) 10%, rgb(121,105,98) 30%, rgb(126,110,103) 50%, rgb(132,115,108) 70%, rgb(176,159,148) 90%); } .pr-hero[data-hero="898"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(144,128,117) 10%, rgb(139,124,112) 30%, rgb(133,119,106) 50%, rgb(122,109,97) 70%, rgb(225,212,204) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(161,142,128) 10%, rgb(167,148,135) 30%, rgb(172,153,140) 50%, rgb(177,159,147) 70%, rgb(185,167,155) 90%); } .pr-hero[data-hero="889f"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(131,115,103) 10%, rgb(133,117,105) 30%, rgb(117,100,89) 50%, rgb(103,88,76) 70%, rgb(211,197,186) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(106,91,78) 10%, rgb(122,105,93) 30%, rgb(133,117,105) 50%, rgb(146,129,117) 70%, rgb(177,161,149) 90%); } .pr-hero[data-hero="889a"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(153,136,131) 10%, rgb(149,131,128) 30%, rgb(151,132,127) 50%, rgb(128,112,107) 70%, rgb(220,207,204) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(139,125,118) 10%, rgb(155,138,131) 30%, rgb(169,150,144) 50%, rgb(176,157,151) 70%, rgb(193,173,170) 90%); } .pr-hero[data-hero="882"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(165,142,123) 10%, rgb(189,166,148) 30%, rgb(143,120,100) 50%, rgb(120,102,86) 70%, rgb(231,215,203) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(150,135,124) 10%, rgb(163,147,137) 30%, rgb(169,153,143) 50%, rgb(176,159,149) 70%, rgb(183,166,154) 90%); } .pr-hero[data-hero="899-f25"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(101,86,73) 10%, rgb(106,91,77) 30%, rgb(107,91,78) 50%, rgb(111,96,83) 70%, rgb(229,218,211) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(138,122,108) 10%, rgb(152,136,123) 30%, rgb(160,144,132) 50%, rgb(163,146,134) 70%, rgb(185,169,158) 90%); } .pr-hero[data-hero="444"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(175,155,138) 10%, rgb(173,154,137) 30%, rgb(119,102,86) 50%, rgb(111,96,80) 70%, rgb(217,201,188) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(170,150,132) 10%, rgb(180,159,141) 30%, rgb(187,167,151) 50%, rgb(190,169,153) 70%, rgb(200,181,167) 90%); } .pr-hero[data-hero="883"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(130,113,96) 10%, rgb(137,119,102) 30%, rgb(127,111,94) 50%, rgb(103,89,72) 70%, rgb(212,196,183) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(151,131,113) 10%, rgb(159,139,122) 30%, rgb(168,148,132) 50%, rgb(173,153,137) 70%, rgb(181,161,145) 90%); } .pr-hero[data-hero="1602"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(158,141,127) 10%, rgb(158,142,128) 30%, rgb(143,127,113) 50%, rgb(134,118,104) 70%, rgb(200,186,176) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(101,88,77) 10%, rgb(115,100,88) 30%, rgb(126,110,98) 50%, rgb(133,116,103) 70%, rgb(159,142,130) 90%); } .pr-hero[data-hero="898n"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(142,128,116) 10%, rgb(145,130,119) 30%, rgb(124,113,103) 50%, rgb(118,107,96) 70%, rgb(223,211,203) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(152,134,121) 10%, rgb(157,139,126) 30%, rgb(162,144,131) 50%, rgb(166,148,136) 70%, rgb(183,166,155) 90%); } .pr-hero[data-hero="sgtape"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(193,174,161) 10%, rgb(201,183,170) 30%, rgb(146,127,111) 50%, rgb(118,102,87) 70%, rgb(220,205,194) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(145,129,115) 10%, rgb(151,135,121) 30%, rgb(154,137,124) 50%, rgb(154,137,123) 70%, rgb(184,166,153) 90%); } .pr-hero[data-hero="881-25g"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(230,224,220) 10%, rgb(233,228,224) 30%, rgb(195,189,185) 50%, rgb(152,146,141) 70%, rgb(216,210,207) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(220,213,208) 10%, rgb(222,215,211) 30%, rgb(221,214,211) 50%, rgb(220,213,209) 70%, rgb(221,214,210) 90%); } .pr-hero[data-hero="881-25g"][data-slide="1"] { --pr-tone-l: linear-gradient(to bottom, rgb(228,220,217) 10%, rgb(205,196,191) 30%, rgb(142,131,123) 50%, rgb(139,129,121) 70%, rgb(230,222,219) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(202,192,187) 10%, rgb(206,196,192) 30%, rgb(205,196,192) 50%, rgb(205,195,191) 70%, rgb(204,195,191) 90%); } .pr-hero[data-hero="961"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(179,160,146) 10%, rgb(167,151,139) 30%, rgb(143,126,113) 50%, rgb(116,100,86) 70%, rgb(219,206,198) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(156,140,127) 10%, rgb(161,145,132) 30%, rgb(163,148,135) 50%, rgb(162,146,133) 70%, rgb(182,168,158) 90%); } .pr-hero[data-hero="322"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(122,106,91) 10%, rgb(148,130,114) 30%, rgb(164,146,129) 50%, rgb(105,91,77) 70%, rgb(210,195,183) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(87,76,64) 10%, rgb(103,92,80) 30%, rgb(118,108,97) 50%, rgb(121,110,100) 70%, rgb(125,113,102) 90%); } .pr-hero[data-hero="899t"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(155,138,123) 10%, rgb(194,176,163) 30%, rgb(164,147,133) 50%, rgb(104,90,76) 70%, rgb(207,195,185) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(142,127,114) 10%, rgb(160,144,131) 30%, rgb(168,151,139) 50%, rgb(175,158,146) 70%, rgb(182,165,153) 90%); } .pr-hero[data-hero="881-25hm"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(135,116,101) 10%, rgb(105,89,74) 30%, rgb(96,81,64) 50%, rgb(143,126,113) 70%, rgb(205,189,177) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(132,116,104) 10%, rgb(148,131,118) 30%, rgb(151,133,120) 50%, rgb(160,141,128) 70%, rgb(177,159,146) 90%); } .pr-hero[data-hero="881"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(185,166,151) 10%, rgb(176,155,141) 30%, rgb(141,120,105) 50%, rgb(101,85,71) 70%, rgb(216,203,193) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(120,105,93) 10%, rgb(130,115,103) 30%, rgb(137,122,110) 50%, rgb(141,124,112) 70%, rgb(161,144,130) 90%); } .pr-hero[data-hero="889"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(142,127,121) 10%, rgb(143,128,121) 30%, rgb(132,118,111) 50%, rgb(134,120,113) 70%, rgb(228,217,213) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(164,146,135) 10%, rgb(179,160,149) 30%, rgb(187,167,157) 50%, rgb(191,170,161) 70%, rgb(200,180,173) 90%); } .pr-hero[data-hero="965-f"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(190,174,160) 10%, rgb(157,139,124) 30%, rgb(115,99,85) 50%, rgb(87,73,59) 70%, rgb(211,196,183) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(127,109,93) 10%, rgb(138,119,103) 30%, rgb(145,125,109) 50%, rgb(148,127,111) 70%, rgb(167,147,131) 90%); } .pr-hero[data-hero="930"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(114,98,85) 10%, rgb(118,102,88) 30%, rgb(104,90,78) 50%, rgb(90,78,66) 70%, rgb(210,192,179) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(92,78,65) 10%, rgb(105,89,77) 30%, rgb(116,100,88) 50%, rgb(121,104,92) 70%, rgb(133,116,103) 90%); } .pr-hero[data-hero="936"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(170,148,133) 10%, rgb(191,172,159) 30%, rgb(134,117,103) 50%, rgb(132,117,105) 70%, rgb(228,215,207) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(148,127,111) 10%, rgb(150,130,114) 30%, rgb(154,134,118) 50%, rgb(157,136,121) 70%, rgb(170,149,132) 90%); } .pr-hero[data-hero="3522"][data-slide="0"] { --pr-tone-l: linear-gradient(to bottom, rgb(131,113,98) 10%, rgb(120,104,89) 30%, rgb(112,96,80) 50%, rgb(93,78,61) 70%, rgb(185,169,154) 90%); --pr-tone-r: linear-gradient(to bottom, rgb(107,89,73) 10%, rgb(114,97,83) 30%, rgb(125,108,94) 50%, rgb(132,115,101) 70%, rgb(129,112,97) 90%); } /* --------------------------------------------------------------- A NOTE ON THE SILANDE LABEL -- DELIBERATELY NOT OVERRIDDEN HERE The label is black on every product (--pr-eyebrow, product.css) and stays black, by the designer's decision. Recording the measurement so the decision stays an informed one rather than an oversight. Each wall's right-hand tone was sampled from the gradients above and scored against black and white: product wall L black white 930 0.131 3.6 5.8 322 0.135 3.7 5.7 910h 0.149 4.0 5.3 3522 0.149 4.0 5.3 911 0.169 4.4 4.8 1602 0.174 4.5 4.7 On these six the black label is under -- or exactly on -- the 4.5 the standard asks for. The other 23 walls are pale enough that black clears it comfortably. A white label was tried and rejected on design grounds. If the six are ever to be brought into the standard without changing the ink, the way to do it is to darken the wall behind the label rather than to lighten the label: a small scrim under the text, or a darker sample in the --pr-tone-r gradient. --------------------------------------------------------------- */