.gitmodules

@@ -1,3 +1,4 @@
 [submodule "assets_shared"]
 	path = assets_shared
 	url = https://projects.blender.org/infrastructure/web-assets.git
+	branch = v2

assets_shared

@@ -1 +1 @@
-Subproject commit d75598e7c6a5e10d696db7d21641482e23f1318f
+Subproject commit 1a86cfee1229737683232e12cd4c2fdf6a3f5a4b

dist/fonts/OFL.txt

@@ -1,8 +1,8 @@
-Copyright 2014 The Heebo Project Authors (https://github.com/OdedEzer/heebo)
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
+https://openfontlicense.org
 
 
 -----------------------------------------------------------

dist/fonts/fontutti.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2023 by original authors @ fontello.com</metadata>
+<metadata>Copyright (C) 2024 by original authors @ fontello.com</metadata>
 <defs>
 <font id="fontutti" horiz-adv-x="1000" >
 <font-face font-family="fontutti" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
@@ -236,6 +236,14 @@
 
 <glyph glyph-name="graduation-cap" unicode="&#xe872;" d="M0 600q0 33 21 59t51 33l407 94q11 1 21 1t22-1l406-94q31-8 51-33t21-59-21-59-51-33l-84-19 0-264q0-68-84-112t-260-44-260 44-84 112l0 264-84 19q-31 8-51 33t-21 59z m63 0q0-25 23-31l406-94 16 0 406 94q23 6 23 31t-23 31l-406 94-16 0-406-94q-23-6-23-31z m156-375q0-20 29-40t97-37 155-17 155 17 97 37 29 40l0 250-259-61q-12-1-22-1t-21 1l-260 61 0-250z m656-250q0 31 20 78t42 47 43-47 20-78q0-25-19-44t-44-19-43 19-19 44z m31 188l0 281q0 13 9 22t22 9 23-9 9-22l0-281q0-14-9-23t-23-9-22 9-9 23z" horiz-adv-x="1000" />
 
+<glyph glyph-name="adjust" unicode="&#xe873;" d="M429 46v608q-83 0-153-41t-110-111-41-152 41-152 110-111 153-41z m428 304q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="wrench" unicode="&#xe874;" d="M214 29q0 14-10 25t-25 10-25-10-11-25 11-25 25-11 25 11 10 25z m360 234l-381-381q-21-20-50-20-29 0-51 20l-59 61q-21 20-21 50 0 29 21 51l380 380q22-55 64-97t97-64z m354 243q0-22-13-59-27-75-92-122t-144-46q-104 0-177 73t-73 177 73 176 177 74q32 0 67-10t60-26q9-6 9-15t-9-16l-163-94v-125l108-60q2 2 44 27t75 45 40 20q8 0 13-5t5-14z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="user-alt" unicode="&#xe875;" d="M313 793q107 0 183-77t77-183-77-184-183-76-184 76-76 184 76 183 184 77z m-313-782q0 83 86 146t227 63q136 0 224-63t88-146q0-41-89-72t-223-32q-140 0-227 32t-86 72z" horiz-adv-x="625" />
+
+<glyph glyph-name="users-alt" unicode="&#xe876;" d="M860 533q0-108-77-184t-184-76-184 76-76 184 76 183 184 77 184-77 77-183z m286-183q0-54-38-92t-93-38-92 38-38 92 38 92 92 38 93-38 38-92z m-131-161q80 0 131-34t52-79q0-22-53-40t-130-17q-42 0-82 6 0-2 0-7t1-7q0-41-96-72t-239-32q-150 0-242 32t-92 72q0 3 1 8t0 7q-50-7-83-7-82 0-132 17t-51 40q0 45 50 79t133 34q98 0 151-50 99 81 265 81t265-81q52 50 151 50z m-702 161q0-54-38-92t-92-38-93 38-37 92 37 92 93 38q53 0 91-38t39-92z" horiz-adv-x="1198" />
+
 <glyph glyph-name="tv" unicode="&#xe8b2;" d="M167 600c-69 0-125-56-125-125l0-458c0-69 56-125 125-125l666 0c69 0 125 56 125 125l0 458c0 69-56 125-125 125l-666 0z m0-83l666 0c24 0 42-18 42-42l0-458c0-24-18-42-42-42l-666 0c-24 0-42 18-42 42l0 458c0 24 18 42 42 42z m126 291a42 42 0 0 1-31-12 42 42 0 0 1 0-59l209-208a42 42 0 0 1 59 0l208 208a42 42 0 0 1 0 59 42 42 0 0 1-59 0l-179-179-179 179a42 42 0 0 1-28 12z" horiz-adv-x="1000" />
 
 <glyph glyph-name="blender" unicode="&#xe8b7;" d="M642 288a145 145 0 0 0 53 103 176 176 0 0 0 113 40c44 0 84-15 114-40a146 146 0 0 0 52-103c3-42-14-82-44-111a174 174 0 0 0-122-48 174 174 0 0 0-122 48 143 143 0 0 0-44 111z m-265-83c0-16 5-48 13-72a378 378 0 0 1 82-141c39-44 87-78 143-103 58-26 122-39 188-39 65 0 129 13 187 40a425 425 0 0 1 143 103c38 42 66 90 82 141a358 358 0 0 1-39 301 398 398 0 0 1-96 104l-384 296-1 1a86 86 0 0 1-95 0c-28-20-32-53-7-73l161-131-489 0h-1c-40 0-79-27-87-60-8-34 20-63 62-63v0l247 0-442-339-2-1c-41-32-55-85-29-119 27-34 84-34 126 0l241 197s-3-26-3-42z m620-90a272 272 0 0 0-194-79c-76 0-145 28-195 79a232 232 0 0 0-53 83 220 220 0 0 0 14 181c15 26 35 50 59 70a276 276 0 0 0 174 61c65 0 126-21 175-61a240 240 0 0 0 59-70 220 220 0 0 0-39-264z" horiz-adv-x="1231" />
@@ -258,10 +266,14 @@
 
 <glyph glyph-name="ticket" unicode="&#xe8c5;" d="M143 1q-30 0-53 23-23 23-23 53v172q37 8 64 35 26 26 26 66t-26 67q-27 28-64 35v172q0 30 23 53 23 23 53 23h715q31 0 54-23 22-23 22-53v-172q-37-7-63-35-26-27-26-67 0-40 26-66t63-35v-172q0-30-22-53-23-23-54-23z m0 76h715v115q-37 26-63 67-26 41-26 91t25 92q26 41 64 67v115h-715v-115q38-26 64-67t26-92q0-50-26-91t-64-67z m357 171l72-56q10-10 22-1t7 22l-28 88 71 59q10 9 6 21t-17 13h-85l-30 87q-5 13-18 13t-18-13l-30-87h-84q-14 0-18-13-4-12 6-21l71-59-28-88q-4-14 7-22 12-8 23 1z m1 103z" horiz-adv-x="1000" />
 
+<glyph glyph-name="move" unicode="&#xe8d5;" d="M500 808a42 42 0 0 1-14-2 42 42 0 0 1-4-2 42 42 0 0 1-11-8l-125-125a42 42 0 0 1 0-59 42 42 0 0 1 59 0l53 54v-274h-274l54 54a42 42 0 0 1 0 59 42 42 0 0 1-30 12 42 42 0 0 1-29-12l-125-125a42 42 0 0 1-8-12 42 42 0 0 1-2-4 42 42 0 0 1 0-28 42 42 0 0 1 2-4 42 42 0 0 1 8-11l125-125a42 42 0 0 1 59 0 42 42 0 0 1 0 59l-54 53h274v-274l-53 54a42 42 0 0 1-30 12 42 42 0 0 1-29-12 42 42 0 0 1 0-59l125-125a42 42 0 0 1 11-8 42 42 0 0 1 4-2 42 42 0 0 1 14-2 42 42 0 0 1 14 2 42 42 0 0 1 4 2 42 42 0 0 1 12 8l125 125a42 42 0 0 1 0 59 42 42 0 0 1-59 0l-54-54v274h274l-54-53a42 42 0 0 1 0-59 42 42 0 0 1 59 0l125 125a42 42 0 0 1 9 13 42 42 0 0 1 0 0 42 42 0 0 1 3 20 42 42 0 0 1 0 3 42 42 0 0 1 0 1 42 42 0 0 1-2 6 42 42 0 0 1-1 2 42 42 0 0 1 0 1 42 42 0 0 1-5 8 42 42 0 0 1-1 1 42 42 0 0 1-3 4l-125 125a42 42 0 0 1-59 0 42 42 0 0 1 0-59l54-54h-274v274l54-54a42 42 0 0 1 59 0 42 42 0 0 1 0 59l-125 125a42 42 0 0 1-9 7 42 42 0 0 1-21 5z" horiz-adv-x="1000" />
+
 <glyph glyph-name="bcon" unicode="&#xe900;" d="M567 774c-219 0-399-166-422-379 17 5 34 7 52 7 104 0 187-84 187-188 0-76-45-141-110-170 76-73 179-118 293-118 233 0 423 190 423 424 0 234-190 424-423 424m-479-407c-48-34-78-89-78-153 0-104 82-187 187-187 5 0 10 1 15 1-77 85-125 198-125 322 0 6 1 12 1 17" horiz-adv-x="1000" />
 
 <glyph glyph-name="bar-chart" unicode="&#xe901;" d="M500 793a49 49 0 0 1-49-49l0-788a49 49 0 0 1 49-49 49 49 0 0 1 49 49l0 788a49 49 0 0 1-49 49z m295-295a49 49 0 0 1-49-50l0-492a49 49 0 0 1 49-49 49 49 0 0 1 49 49l0 492a49 49 0 0 1-49 50z m-590-197a49 49 0 0 1-49-49l0-296a49 49 0 0 1 49-49 49 49 0 0 1 49 49l0 296a49 49 0 0 1-49 49z" horiz-adv-x="1000" />
 
+<glyph glyph-name="mastodon" unicode="&#xe941;" d="M465 850c-128-1-251-15-323-48 0 0-142-63-142-280 0-50-1-109 1-172 5-212 39-422 235-474 90-23 168-29 231-25 113 6 177 40 177 40l-4 83c0 0-81-26-172-23-90 3-185 10-200 121-1 9-2 20-2 31 0 0 88-22 201-27 68-3 133 4 198 12 125 15 234 92 248 163 22 111 20 271 20 271 0 217-142 280-142 280-72 33-195 47-323 48z m-145-169c54 0 94-21 121-62l25-43 26 43c27 41 67 62 121 62 46 0 83-17 111-48 27-32 41-74 41-128v-263h-104v255c0 54-23 81-68 81-50 0-75-32-75-96v-140h-103v140c0 64-25 96-75 96-46 0-68-27-68-81v-255h-104v263c0 54 13 96 41 128 28 31 65 48 111 48z" horiz-adv-x="933" />
+
 <glyph glyph-name="macos" unicode="&#xf179;" d="M777 172q-21-70-68-139-72-110-144-110-27 0-78 18-48 18-84 18-34 0-79-19-45-19-74-19-85 0-168 145-82 146-82 281 0 127 63 208 63 81 159 81 40 0 98-17 58-17 77-17 25 0 80 19 57 19 97 19 66 0 119-36 29-20 58-56-44-37-64-66-36-52-36-115 0-69 38-125t88-70z m-209 655q0-34-17-76-16-42-52-77-30-30-60-40-20-7-58-10 2 83 44 143 41 60 139 83 1-2 2-6t1-6q0-2 0-6t1-5z" horiz-adv-x="785.7" />
 
 <glyph glyph-name="windows" unicode="&#xf17a;" d="M381 289v-364l-381 53v311h381z m0 414v-367h-381v315z m548-414v-439l-507 70v369h507z m0 490v-443h-507v373z" horiz-adv-x="928.6" />

dist/fonts/fontutti_config.json

@@ -1651,20 +1651,6 @@
         "folder-plus"
       ]
     },
-    {
-      "uid": "b15282f858d493e781f0ce61782f64ab",
-      "css": "folder",
-      "code": 59505,
-      "src": "custom_icons",
-      "selected": true,
-      "svg": {
-        "path": "M150 0C67.7 0 0 67.7 0 150V850C0 932.3 67.7 1000 150 1000H950C1032.3 1000 1100 932.3 1100 850V300C1100 217.7 1032.3 150 950 150H526.8L441.6 22.3A50 50 0 0 0 400 0ZM150 100H373.2L458.4 227.7A50 50 0 0 0 500 250H950C978.2 250 1000 271.8 1000 300V850C1000 878.2 978.2 900 950 900H150C121.8 900 100 878.2 100 850V150C100 121.8 121.8 100 150 100Z",
-        "width": 1100
-      },
-      "search": [
-        "folder"
-      ]
-    },
     {
       "uid": "4a74a0f87d4089efe7aba1825bff4193",
       "css": "copyright",
@@ -1694,6 +1680,72 @@
       "css": "sliders",
       "code": 61918,
       "src": "fontawesome"
+    },
+    {
+      "uid": "a83b3ff5548e07c748f09f46a7bc63d5",
+      "css": "move",
+      "code": 59605,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M500 41.7A41.7 41.7 0 0 0 486.1 44.4 41.7 41.7 0 0 0 482.3 46 41.7 41.7 0 0 0 470.5 53.9L345.5 178.9A41.7 41.7 0 0 0 345.5 237.8 41.7 41.7 0 0 0 404.5 237.8L458.3 183.9V458.3H183.9L237.8 404.5A41.7 41.7 0 0 0 237.8 345.5 41.7 41.7 0 0 0 208.3 333.3 41.7 41.7 0 0 0 178.9 345.5L53.9 470.5A41.7 41.7 0 0 0 46 482.3 41.7 41.7 0 0 0 44.4 486.1 41.7 41.7 0 0 0 44.4 513.9 41.7 41.7 0 0 0 46 517.7 41.7 41.7 0 0 0 53.9 529.5L178.9 654.5A41.7 41.7 0 0 0 237.8 654.5 41.7 41.7 0 0 0 237.8 595.5L183.9 541.7H458.3V816.1L404.5 762.2A41.7 41.7 0 0 0 375 750 41.7 41.7 0 0 0 345.5 762.2 41.7 41.7 0 0 0 345.5 821.1L470.5 946.1A41.7 41.7 0 0 0 482.3 954 41.7 41.7 0 0 0 486.1 955.6 41.7 41.7 0 0 0 500 958.3 41.7 41.7 0 0 0 513.9 955.6 41.7 41.7 0 0 0 517.7 954 41.7 41.7 0 0 0 529.5 946.1L654.5 821.1A41.7 41.7 0 0 0 654.5 762.2 41.7 41.7 0 0 0 595.5 762.2L541.7 816.1V541.7H816.1L762.2 595.5A41.7 41.7 0 0 0 762.2 654.5 41.7 41.7 0 0 0 821.1 654.5L946.1 529.5A41.7 41.7 0 0 0 955.2 516 41.7 41.7 0 0 0 955.2 515.7 41.7 41.7 0 0 0 958.1 495.6 41.7 41.7 0 0 0 957.7 492.8 41.7 41.7 0 0 0 957.5 492 41.7 41.7 0 0 0 955.8 485.8 41.7 41.7 0 0 0 955.2 484 41.7 41.7 0 0 0 954.8 483.4 41.7 41.7 0 0 0 949.7 474.6 41.7 41.7 0 0 0 949.1 474 41.7 41.7 0 0 0 946.1 470.5L821.1 345.5A41.7 41.7 0 0 0 762.2 345.5 41.7 41.7 0 0 0 762.2 404.5L816.1 458.3H541.7V183.9L595.5 237.8A41.7 41.7 0 0 0 654.5 237.8 41.7 41.7 0 0 0 654.5 178.9L529.5 53.9A41.7 41.7 0 0 0 520.8 47.3 41.7 41.7 0 0 0 500 41.7Z",
+        "width": 1000
+      },
+      "search": [
+        "move"
+      ]
+    },
+    {
+      "uid": "b15282f858d493e781f0ce61782f64ab",
+      "css": "folder",
+      "code": 59505,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M150 0C67.7 0 0 67.7 0 150V850C0 932.3 67.7 1000 150 1000H950C1032.3 1000 1100 932.3 1100 850V300C1100 217.7 1032.3 150 950 150H526.8L441.6 22.3A50 50 0 0 0 400 0ZM150 100H373.2L458.4 227.7A50 50 0 0 0 500 250H950C978.2 250 1000 271.8 1000 300V850C1000 878.2 978.2 900 950 900H150C121.8 900 100 878.2 100 850V150C100 121.8 121.8 100 150 100Z",
+        "width": 1100
+      },
+      "search": [
+        "folder"
+      ]
+    },
+    {
+      "uid": "ca90da02d2c6a3183f2458e4dc416285",
+      "css": "adjust",
+      "code": 59507,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "5bb103cd29de77e0e06a52638527b575",
+      "css": "wrench",
+      "code": 59508,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "bczb7qup4axmc490xmuuv8qdhcnbgeyf",
+      "css": "user-alt",
+      "code": 59509,
+      "src": "typicons"
+    },
+    {
+      "uid": "x8m4z7b33cv1h2s784tjlam56uq40wtd",
+      "css": "users-alt",
+      "code": 59510,
+      "src": "typicons"
+    },
+    {
+      "uid": "01460e1f8f991b4a3fb0884f534d6689",
+      "css": "mastodon",
+      "code": 59713,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M464.9 0C337.1 1 214.1 14.9 142.4 47.8 142.4 47.8 0.3 111.4 0.3 328.3 0.3 378-0.7 437.4 0.9 500.4 6.1 712.5 39.8 921.6 235.9 973.5 326.4 997.4 404 1002.5 466.6 999 580 992.7 643.6 958.6 643.6 958.6L639.9 876.3C639.9 876.3 558.8 901.8 467.8 898.7 377.7 895.6 282.5 889 267.9 778.3 266.5 768.6 265.9 758.1 265.9 747.2 265.9 747.2 354.4 768.9 466.6 774 535.2 777.2 599.5 770 664.8 762.2 790.1 747.2 899.2 670 912.9 599.5 934.5 488.4 932.7 328.3 932.7 328.3 932.7 111.4 790.6 47.8 790.6 47.8 719 14.9 595.9 1 468.1 0ZM320.2 169.5C373.5 169.5 413.8 190 440.5 230.9L466.4 274.4 492.3 230.9C519 190 559.3 169.5 612.6 169.5 658.6 169.5 695.7 185.7 724 217.2 751.4 248.8 765.1 291.5 765.1 345.1V607.8H661V352.9C661 299.1 638.4 271.8 593.2 271.8 543.2 271.8 518.1 304.2 518.1 368.2V507.7H414.7V368.2C414.7 304.2 389.6 271.8 339.6 271.8 294.4 271.8 271.8 299.1 271.8 352.9V607.8H167.7V345.1C167.7 291.5 181.4 248.8 208.8 217.2 237.1 185.7 274.2 169.5 320.2 169.5Z",
+        "width": 933
+      },
+      "search": [
+        "mastodon"
+      ]
     }
   ]
 }

main-donation-box-message.html

@@ -2,13 +2,13 @@
   <div class="bottom-0 box donation-box-message fade h-0 js-donation-box js-donation-box-message overflow-hidden p-0 position-fixed start-0 w-100">
     <div class="container position-relative">
       <div class="justify-content-end justify-content-xs-center mb-4 pe-4 row">
-        <button class="border-0 btn btn-link js-btn-message-dismiss me-3 text-decoration-underline" data-count-expiration-days="7">I already donated</button>
+        <button class="border-0 btn btn-link btn-sm js-btn-message-dismiss me-3 text-decoration-underline" data-count-expiration-days="7">I already donated</button>
-        <button class="btn btn-link js-btn-message-dismiss" data-count-expiration-days="1">Remind me later</button>
+        <button class="btn btn-link btn-sm js-btn-message-dismiss" data-count-expiration-days="1">Remind me later</button>
       </div>
-      <div class="mb-3 mb-sm-5 row">
+      <div class="mb-3 mb-sm-3 row">
         <div class="col-lg-6"></div>
         <div class="col-lg-6 col-12">
-          <div class="btn-row btn-row-tabbed rounded-lg">
+          <div class="btn-row btn-row-tabbed rounded">
             <button class="btn btn-lg btn-tabbed js-btn-tabbed">Monthly</button>
             <button class="active btn btn-lg btn-tabbed js-btn-tabbed">One-time</button>
           </div>
@@ -19,9 +19,9 @@
         <div class="fade h-0 js-tabbed-panel mb-0 row">
           <!-- Class 'd-none' is used to hide column while keeping JavaScript coupled with donation-box.html -->
           <div class="col-lg-6 col-12 d-none">
-            <h2 class="mb-5">Become a <strong class="js-monthly-level">Gold</strong> member</h2>
+            <h2 class="mb-4">Become a <strong class="js-monthly-level">Gold</strong> member</h2>
             <div class="col-12 d-flex flex-wrap">
-              <div class="d-flex img-badges mb-5 w-100 w-sm-auto">
+              <div class="d-flex img-badges mb-4 w-100 w-sm-auto">
                 <img alt="" class="img-badge me-3" src="https://fund.blender.org/static/img/badge_devfund_30th_birthday.png?v=1.0.10">
                 <div class="position-relative">
                   <img alt="" class="img-badge" src="https://fund.blender.org/static/img/badge_devfund_bronze.png?v=1.0.10">
@@ -45,7 +45,7 @@
             </div>
           </div>
           <div class="col-lg-6 col-12 col-msg">
-            <h2 class="fs-0 fw-bold mb-3 mb-sm-5">
+            <h2 class="fs-xl fw-title mb-3 mb-sm-3">
               Donate to the Blender project!
             </h2>
             <p class="fs-5">
@@ -57,7 +57,7 @@
             </p>
           </div>
           <div class="col-lg-6 col-12">
-            <div class="btn-row btn-row-fluid btn-row-grid mb-5">
+            <div class="btn-row btn-row-fluid btn-row-grid mb-4">
               <button class="btn btn-lg btn-link js-btn-monthly-select">
                 <span class="js-value-symbol">€</span> <span class="js-value-amount" data-value-group="monthly">5</span>
               </button>
@@ -85,7 +85,7 @@
         <div class="fade js-tabbed-panel mb-0 row show">
           <!-- Class 'd-none' is used to hide column while keeping JavaScript coupled with donation-box.html -->
           <div class="col-lg-6 col-12 d-none">
-            <h2 class="mb-5">Donate, just <strong>once</strong></h2>
+            <h2 class="mb-4">Donate, just <strong>once</strong></h2>
             <div class="col-12 d-flex">
               <div class="d-flex img-badges">
                 <img alt="" class="img-badge" src="https://fund.blender.org/static/img/badge_devfund_30th_birthday.png?v=1.0.10">
@@ -98,7 +98,7 @@
             </div>
           </div>
           <div class="col-lg-6 col-12 col-msg">
-            <h2 class="fs-0 fw-bold mb-3 mb-sm-5">
+            <h2 class="fs-xl fw-title mb-3 mb-sm-3">
               Donate to the Blender project!
             </h2>
             <p class="fs-5">
@@ -110,7 +110,7 @@
             </p>
           </div>
           <div class="col-lg-6 col-12">
-            <div class="btn-row btn-row-fluid btn-row-grid mb-5">
+            <div class="btn-row btn-row-fluid btn-row-grid mb-4">
               <button class="btn btn-lg btn-link js-btn-one-time-select">
                 <span class="js-value-symbol">€</span> <span class="js-value-amount" data-value-group="one-time">5</span>
               </button>
@@ -130,14 +130,14 @@
                 <span class="js-value-symbol">€</span> <span class="js-value-amount" data-value-group="one-time">500</span>
               </button>
             </div>
-            <div class="row">
+            <div class="donate-row">
-              <div class="col-4 d-flex position-relative">
+              <div class="d-flex position-relative">
-                <div class="align-items-center d-flex h-100 position-absolute ps-5 start-0 top-0 z-2">
+                <div class="align-items-center d-flex h-100 position-absolute ps-3 start-0 top-0 z-2">
                   <span class="fs-4 js-value-symbol text-color-primary">€</span>
                 </div>
-                <input class="form-control fs-4 input-one-time-donate js-input-one-time-donate text-center" min="5" max="999999" type="number">
+                <input class="form-control input-one-time-donate js-input-one-time-donate text-center" min="5" max="999999" type="number">
               </div>
-              <div class="col-8">
+              <div>
                 <a class="btn btn-lg btn-primary js-btn-one-time-donate w-100" href="#">
                   <span class="me-1">Donate</span><i class="i-heart-filled"></i>
                 </a>

main-donation-box.html

@@ -1,11 +1,11 @@
 <div class="dfdb smaller">
   <div class="box js-donation-box">
-    <div class="btn-row btn-row-tabbed mb-5 rounded-lg">
+    <div class="btn-row btn-row-tabbed mb-4 rounded">
       <button class="btn btn-lg btn-tabbed js-btn-tabbed">Monthly</button>
       <button class="active btn btn-lg btn-tabbed js-btn-tabbed">One-time</button>
     </div>
     <div class="fade h-0 js-tabbed-panel">
-      <div class="btn-row btn-row-fluid btn-row-grid mb-5">
+      <div class="btn-row btn-row-fluid btn-row-grid mb-4">
         <button class="btn btn-lg btn-link js-btn-monthly-select">
           <span class="js-value-symbol">€</span> <span class="js-value-amount" data-value-group="monthly">5</span>
         </button>
@@ -25,10 +25,10 @@
           <span class="js-value-symbol">€</span> <span class="js-value-amount" data-value-group="monthly">250</span>
         </button>
       </div>
-      <h2 class="mb-5">Become a <strong class="js-monthly-level">Gold</strong> member</h2>
+      <h2 class="mb-4">Become a <strong class="js-monthly-level">Gold</strong> member</h2>
-      <div class="mb-5 row">
+      <div class="mb-4 row">
         <div class="col-12 d-flex flex-wrap">
-          <div class="d-flex img-badges mb-5 mb-sm-0 w-100 w-sm-auto">
+          <div class="d-flex img-badges mb-4 mb-sm-0 w-100 w-sm-auto">
             <div class="position-relative">
               <img alt="" class="img-badge" src="https://fund.blender.org/static/img/badge_devfund_bronze.png?v=1.0.10">
               <img alt="" class="img-badge js-monthly-img-badge position-absolute start-0 top-0" src="https://fund.blender.org/static/img/badge_devfund_bronze.png?v=1.0.10">
@@ -54,7 +54,7 @@
       </a>
     </div>
     <div class="fade js-tabbed-panel show">
-      <div class="btn-row btn-row-fluid btn-row-grid mb-5">
+      <div class="btn-row btn-row-fluid btn-row-grid mb-4">
         <button class="btn btn-lg btn-link js-btn-one-time-select">
           <span class="js-value-symbol">€</span> <span class="js-value-amount" data-value-group="one-time">5</span>
         </button>
@@ -74,15 +74,15 @@
           <span class="js-value-symbol">€</span> <span class="js-value-amount" data-value-group="one-time">500</span>
         </button>
       </div>
-      <h2 class="mb-5">Donate, just <strong>once</strong></h2>
+      <h2 class="mb-4">Donate, just <strong>once</strong></h2>
-      <div class="pb-4 row">
+      <div class="donate-row pb-4">
-        <div class="col-4 d-flex position-relative">
+        <div class="d-flex position-relative">
-          <div class="align-items-center d-flex h-100 position-absolute ps-5 start-0 top-0 z-2">
+          <div class="align-items-center d-flex h-100 position-absolute ps-3 start-0 top-0 z-2">
             <span class="fs-4 js-value-symbol text-color-primary">€</span>
           </div>
-          <input class="form-control fs-4 input-one-time-donate js-input-one-time-donate text-center" min="5" max="999999" type="number">
+          <input class="form-control input-one-time-donate js-input-one-time-donate text-center" min="5" max="999999" type="number">
         </div>
-        <div class="col-8">
+        <div>
           <a class="btn btn-primary btn-lg js-btn-one-time-donate w-100" href="#">
             <span class="me-1">Donate</span><i class="i-heart-filled"></i>
           </a>

package-lock.json

@@ -10,7 +10,6 @@
       "license": "ISC",
       "devDependencies": {
         "autoprefixer": "^10.4.16",
-        "bootstrap": "^5.3.2",
         "nodemon": "^3.0.1",
         "npm-run-all": "^4.1.5",
         "postcss-cli": "^10.1.0",
@@ -54,17 +53,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.8",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "dev": true,
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -206,25 +194,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/bootstrap": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
-      "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/twbs"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/bootstrap"
-        }
-      ],
-      "peerDependencies": {
-        "@popperjs/core": "^2.11.8"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -19,7 +19,6 @@
   "license": "ISC",
   "devDependencies": {
     "autoprefixer": "^10.4.16",
-    "bootstrap": "^5.3.2",
     "nodemon": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "postcss-cli": "^10.1.0",

sass/custom.sass

@@ -1,171 +1,140 @@
 /* Custom configuration. */
-$font-body: var(--font-family-body)
 $font-path: "https://fund.blender.org/static/fonts"
 
-// Sass variables h*-font-size are needed as are used in Web Assets component rules
+// TODO: fix spacer not prevailing
-$h1-font-size: var(--font-size-h1)
+$spacer: 16px // Sizes are pxs to not clash with root em that might vary
-$h2-font-size: var(--font-size-h2)
-$h3-font-size: var(--font-size-h3)
-$h4-font-size: var(--font-size-h4)
-$h5-font-size: var(--font-size-h5)
-$h6-font-size: var(--font-size-base)
-
-$spacer: 8px // Sizes are pxs to not clash with root em that might vary
-
-/* Bootstrap 5 utilities. */
-@import "../node_modules/bootstrap/scss/bootstrap-utilities.scss"
 
 /* Web Assets. */
 @import "../assets_shared/src/styles/main.sass"
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap')
-
 // TODO: consider changing to npm install
 @import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css')
 
 .dfdb
-  --border-radius: var(--spacer)
+  --border-radius: var(--spacer-2)
-  --border-radius-lg: calc(var(--spacer) * 2)
+  --border-radius-lg: var(--spacer)
 
-  // Map --container-width to $container-width
+  --box-text-color: var(--color-text)
-  --container-width: #{$container-width}
 
-  --font-family-body: 'Inter', sans-serif
+  --input-color-bg: white
+  --input-color-bg-hover: var(--input-color-bg)
+  --input-color-one-time-donate: var(--color-accent)
 
-  +media-lg
+  /* Grid */
-    --font-size-base: 16px
+  --spacer: 16px
+
+  /* Type */
+  --fs-h1: 32px
+  --fs-h2: 28px
+  --fs-h3: 24px
+  --fs-h4: 21px
+  --fs-h5: 18px
+  --fs-h6: var(--fs-base)
+  --fs-lg: 48px
+  --fs-sm: 12px
 
   +media-sm
-    --font-size-small: 14px
+    --fs-sm: 14px
 
-  --font-size-h1: 32px
+  +media-lg
-  --font-size-h2: 28px
+    --fs-base: 16px
-  --font-size-h3: 24px
-  --font-size-h4: 21px
-  --font-size-h5: 18px
-  --font-size-h6: var(--font-size-base)
-  --font-size-large: 48px
-  --font-weight-bold: 700
 
   +media-xs
-    --font-size-large: 32px
+    --fs-lg: 32px
-
-  // Map --spacer to $spacer.
-  --spacer: #{$spacer}
-  --spacer-1: calc(var(--spacer) * 0.25)
-  --spacer-2: calc(var(--spacer) * 0.5)
-  --spacer-3: var(--spacer)
-  --spacer-4: calc(var(--spacer) * 1.5)
-  --spacer-5: calc(var(--spacer) * 3)
-  --spacer-6: calc(var(--spacer) * 6)
-  --spacer-7: calc(var(--spacer) * 12)
-
-  --transition-duration: 0.3s
 
   color: var(--text-color)
   font-family: var(--font-family-body)
-  font-size: var(--font-size-base)
+  font-size: var(--fs-base)
   font-weight: var(--font-weight)
   text-align: left
 
+  // TODO: add backdrop-filter to Web Assets
   &.is-bg-glossy
-    // --background-color, opacity 0.8
+    // --color-bg, opacity 0.8
-    --background-color-primary: rgba(242, 242, 243, 0.8)
+    --color-bg-primary: rgba(242, 242, 243, 0.8)
 
     .box
-      backdrop-filter: blur(calc(var(--spacer) * 4)) saturate(1.3)
+      backdrop-filter: blur(calc(var(--spacer) * 2)) saturate(1.3)
 
     &.is-dark-mode
-      // --background-color, opacity 0.8
+      // --color-bg, opacity 0.8
-      --background-color-primary: rgba(41, 45, 50, 0.8)
+      --color-bg-primary: rgba(41, 45, 50, 0.8)
 
-  // TODO: consider changing to Sass include from Web Assets instead
   &.is-dark-mode
-    --background-color: hsl(213, 10%, 18%)
+    +theme-dark
-    --background-color-primary: hsl(213, 10%, 21%)
-    --background-color-secondary: hsl(213, 10%, 16%)
-    --background-color-tertiary: hsl(213, 10%, 14%)
 
-    --text-color: hsl(213, 10%, 80%)
+    --input-color-bg: var(--btn-color-bg)
-    --text-color-primary: hsl(213, 10%, 98%)
+    --input-color-one-time-donate: white
-    --text-color-secondary: hsl(213, 10%, 58%)
-    --text-color-tertiary: hsl(213, 10%, 48%)
-
-    --code-bg: hsl(297deg, 70%, 50%, .08)
-    --code-color: hsl(297deg, 30%, 78%)
-
-    --color-info: hsl(207deg, 95%, 65%)
-    --color-info-text: hsl(212deg, 85%, 62%)
-    --color-info-bg: hsl(212deg, 85%, 62%, .2)
-    --color-warning-text: hsl(42, 79%, 80%)
-    --color-warning-bg: hsla(42, 79%, 60%, .4)
-
-    --color-admin-text: hsl(285deg 59% 65%)
-    --color-admin-bg: hsla(285deg, 29%, 36%, .6)
-    --color-admin-bg-hover: hsla(285deg, 39%, 32%, .8)
-
-    --box-shadow-card-lg: hsla(210deg, 8%, 2%, .2) 0px 8px 24px
-
-    --btn-bg: hsl(213, 10%, 28%)
-    --btn-bg-hover: hsl(213, 10%, 30%)
-    --btn-color: hsl(213, 16%, 78%)
-
-    --navbar-bg: var(--background-color)
-    --navbar-link-color-active: #fff
 
   &.smaller
+    // TODO: check spacer value
     --spacer: #{$spacer * 0.8}
-    --font-size-base: 14px
+    --fs-base: 14px
-    --font-size-h1: 28px
+    --fs-h1: 28px
-    --font-size-h2: 24px
+    --fs-h2: 24px
-    --font-size-h3: 21px
+    --fs-h3: 21px
-    --font-size-h4: 18px
+    --fs-h4: 18px
-    --font-size-h5: 16px
+    --fs-h5: 16px
-    --font-size-large: 42px
+    --fs-lg: 42px
 
     +media-xs
-      --font-size-large: 28px
+      --fs-lg: 28px
+
+a
+  text-decoration: underline
 
 h2
-  font-variation-settings: "wght" var(--font-weight-normal)
+  +fw-normal
 
 /* Custom utilities. */
 .fade
-  transition-duration: var(--transition-duration)
+  transition-duration: var(--transition-speed-slow)
-
-.fs-0
-  font-size: var(--font-size-large)
-  line-height: calc(var(--spacer) * 7)
-
-+media-xs
-  .fs-0
-    line-height: calc(var(--spacer) * 6)
 
 .fs-1,
 .fs-2
-  line-height: calc(var(--spacer) * 5)
+  line-height: calc(var(--spacer) * 2.5)
 
 .fs-3,
 .fs-4,
 .fs-5
-  line-height: calc(var(--spacer) * 4)
-
-.fs-6
-  line-height: calc(var(--spacer) * 3)
-
-.fs-7
-  font-size: var(--font-size-small)
   line-height: calc(var(--spacer) * 2)
 
+.fs-6
+  line-height: var(--spacer-5)
+
+.fs-7
+  font-size: var(--fs-sm)
+  line-height: var(--spacer)
+
+.fs-xl
+  font-size: var(--fs-lg) !important
+  line-height: calc(var(--spacer) * 3.5)
+
++media-xs
+  .fs-xl
+    line-height: var(--spacer-5)
+
+// TODO: add style utility to Web Assets
 .h-0
   height: 0
 
+.form-control,
+input
+  // Reassign custom properties within scope
+  --border-width: 2px
+
+  --input-color-bg-hover: var(--input-color-bg)
+
+  background-color: var(--input-color-bg)
+  font-size: var(--fs-h4)
+
 +media-xs
   .justify-content-xs-center
     justify-content: center !important
 
-.rounded-lg
+// TODO: add style utility to Web Assets
-  border-radius: var(--border-radius-lg)
+.rounded
+  border-radius: var(--border-radius)
 
 .text-decoration-underline
   text-decoration: underline !important
@@ -176,80 +145,94 @@ h2
 
 /* Custom components. */
 .box
-  padding: calc(var(--spacer) * 4)
+  padding: calc(var(--spacer) * 2)
 
   &.donation-box-message
     border-bottom-left-radius: 0
     border-bottom-right-radius: 0
-    padding-top: var(--spacer-4)
+    padding-top: calc(var(--spacer) * 2)
     z-index: 2147483647 // z-index maximum
 
     // Transform column vertically to improve vertical align, while keeping msg markup and JavaScript coupled with donation-box.html
     +media-lg
       .col-msg
-        margin-top: calc(var(--spacer) * -9)
+        margin-top: calc(var(--spacer) * -4.5)
 
 .btn
-  transition: all var(--transition-duration)
+  transition: all var(--transition-speed-slow)
+
+.btn-lg,
+.form-control
+  padding-bottom: calc(var(--spacer) * .75) !important
+  padding-top: calc(var(--spacer) * .75) !important
 
 .btn-lg
-  @extend .fs-4
+  font-size: var(--fs-h4)
-  line-height: var(--spacer-5)
+  line-height: calc(var(--spacer) * 1.25) !important
-  padding: var(--spacer-4)
 
 .btn-link
-  border: 2px solid var(--btn-color)
+  border: 2px solid var(--btn-color) !important
 
 .btn-link
   &:active,
   &:focus,
   &:hover
-    border-color: var(--color-primary) !important
+    --btn-color: var(--color-accent)
-    --btn-color: var(--color-primary)
+
+    border-color: var(--color-accent) !important
 
   &.active
-    border-color: var(--color-primary) !important
+    --btn-color-bg: var(--color-accent) !important
-    // '!important' is needed for Wiki
-    --btn-bg-color: var(--color-primary) !important
     --btn-color: white !important
 
+    border-color: var(--color-accent) !important
+
 .btn-sm
   @extend .fs-7
-  padding: var(--spacer)
 
-.btn-xl
+  line-height: var(--spacer) !important
-  @extend .fs-2
+  padding-left: var(--spacer-2) !important
-  padding: var(--spacer)
+  padding-right: var(--spacer-2) !important
 
 .btn-row
-  gap: var(--spacer-2)
+  gap: var(--spacer-1)
 
 .btn-row-grid
-  gap: calc(var(--spacer) * 2)
+  gap: var(--spacer)
 
+  // TODO: change to CSS grid definition
   .btn
-    min-width: calc(100% / 3 - var(--spacer) * 2)
+    min-width: calc(100% / 3 - var(--spacer))
 
 .btn-row-tabbed
-  background-color: var(--btn-bg-color)
+  background-color: var(--btn-color-bg)
-  padding: var(--spacer-2)
+  +padding(1)
 
 .btn-primary
-  --btn-bg-color: var(--color-primary)
+  --btn-color-bg: var(--color-accent)
   --btn-color: white
 
+  &:hover
+    --btn-color: var(--color-accent)
+
 .btn-tabbed
   @extend .btn-primary
   @extend .fs-5
-  border-radius: var(--border-radius-lg)
-  --btn-bg-color: transparent
-  --btn-color: var(--color-primary)
-  flex-grow: 1
-  padding: var(--spacer-4) var(--spacer)
 
-  &.active
+  --btn-color-bg: transparent
-    background-color: var(--color-primary)
+  --btn-color: var(--color-accent)
-    color: white
+
+  border-radius: var(--border-radius-lg)
+  flex-grow: 1
+  +padding(2, x)
+  padding-bottom: calc( var(--spacer) * 2)
+  padding-top: calc( var(--spacer) * 2)
+
+  &:active,
+  &.active,
+  &:focus
+    background-color: var(--color-accent) !important
+    color: white !important
 
 +media-sm
   .donation-box-message
@@ -261,29 +244,47 @@ h2
     .container
       max-width: var(--container-width)
 
-.form-control
+// TODO: consider adding style utilities for CSS grid layout to Web Assets
-  height: auto
+.donate-row
+  display: grid
+  gap: var(--spacer)
+  grid-template-columns: 1fr 2fr
 
+.form-control
   &.input-one-time-donate
-    color: var(--color-primary)
+    color: var(--input-color-one-time-donate)
 
     &:focus
-      color: var(--color-primary)
+      color: var(--input-color-one-time-donate)
+
+select
+  &.form-control
+    font-size: var(--fs-sm)
+    height: auto
+    line-height: var(--spacer)
+    padding: var(--spacer-1) var(--spacer-2) !important
+
+    &:hover
+      cursor: pointer
+
+// TODO: move to Web Assets
+.fw-title
+  +fw-title
 
 .img-badge
-  height: calc(var(--spacer) * 8)
+  height: calc(var(--spacer) * 4)
-  min-width: calc(var(--spacer) * 8)
+  min-width: calc(var(--spacer) * 4)
 
 .img-badges
-  margin-right: calc(var(--spacer) * 6)
+  margin-right: var(--spacer-5)
 
 .link-badge-lg-30y
-  bottom: calc(var(--spacer) * -3)
+  bottom: calc(var(--spacer-4) * -1)
   display: none
-  left: calc(var(--spacer) * -7)
+  left: calc(var(--spacer) * -3.5)
 
   img
-    height: calc(var(--spacer) * 44)
+    height: calc(var(--spacer) * 22)
     max-width: none
 
 @media (min-width: 1600px)
@@ -292,11 +293,11 @@ h2
 
 @media (min-width: 1920px)
   .link-badge-lg-30y
-    bottom: calc(var(--spacer) * -4)
+    bottom: calc(var(--spacer) * -2)
-    left: calc(var(--spacer) * -8)
+    left: calc(var(--spacer) * -4)
 
     img
-      height: calc(var(--spacer) * 52)
+      height: calc(var(--spacer) * 26)
       max-width: none
 
 input[type=number]
@@ -307,20 +308,20 @@ input[type=number]::-webkit-outer-spin-button
   -webkit-appearance: none
 
 .input-one-time-donate-value-symbol
-  line-height: calc(var(--spacer) * 7)
+  line-height: calc(var(--spacer) * 3.5)
 
 li
-  line-height: calc(var(--spacer) * 4)
+  line-height: calc(var(--spacer) * 2)
 
 select
   &.form-control
-    background-color: var(--background-color-secondary)
+    background-color: var(--color-bg-secondary)
     color: var(--text-color)
 
     &:active,
     &:focus,
     &:hover
-      background-color: var(--background-color-secondary)
+      background-color: var(--color-bg-secondary)
       color: var(--text-color)
 
 ul