@dta-au/civictheme-twig 1.13.1

package/assets/icons/word-file.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H10V7C10 7.79565 10.3161 8.55871 10.8787 9.12132C11.4413 9.68393 12.2044 10 13 10H16V12C16 12.2652 16.1054 12.5196 16.2929 12.7071C16.4804 12.8946 16.7348 13 17 13C17.2652 13 17.5196 12.8946 17.7071 12.7071C17.8946 12.5196 18 12.2652 18 12V9C18 9 18 9 18 8.94C17.9896 8.84813 17.9695 8.75763 17.94 8.67V8.58C17.8919 8.47718 17.8278 8.38267 17.75 8.3L11.75 2.3C11.6673 2.22222 11.5728 2.15808 11.47 2.11C11.4402 2.10576 11.4099 2.10576 11.38 2.11C11.2784 2.05174 11.1662 2.01434 11.05 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H12C12.2652 22 12.5196 21.8946 12.7071 21.7071C12.8946 21.5196 13 21.2652 13 21C13 20.7348 12.8946 20.4804 12.7071 20.2929C12.5196 20.1054 12.2652 20 12 20ZM12 5.41L14.59 8H13C12.7348 8 12.4804 7.89464 12.2929 7.70711C12.1054 7.51957 12 7.26522 12 7V5.41ZM7 8C6.73478 8 6.48043 8.10536 6.29289 8.29289C6.10536 8.48043 6 8.73478 6 9C6 9.26522 6.10536 9.51957 6.29289 9.70711C6.48043 9.89464 6.73478 10 7 10H8C8.26522 10 8.51957 9.89464 8.70711 9.70711C8.89464 9.51957 9 9.26522 9 9C9 8.73478 8.89464 8.48043 8.70711 8.29289C8.51957 8.10536 8.26522 8 8 8H7ZM13 12H7C6.73478 12 6.48043 12.1054 6.29289 12.2929C6.10536 12.4804 6 12.7348 6 13C6 13.2652 6.10536 13.5196 6.29289 13.7071C6.48043 13.8946 6.73478 14 7 14H13C13.2652 14 13.5196 13.8946 13.7071 13.7071C13.8946 13.5196 14 13.2652 14 13C14 12.7348 13.8946 12.4804 13.7071 12.2929C13.5196 12.1054 13.2652 12 13 12ZM11 18C11.2652 18 11.5196 17.8946 11.7071 17.7071C11.8946 17.5196 12 17.2652 12 17C12 16.7348 11.8946 16.4804 11.7071 16.2929C11.5196 16.1054 11.2652 16 11 16H7C6.73478 16 6.48043 16.1054 6.29289 16.2929C6.10536 16.4804 6 16.7348 6 17C6 17.2652 6.10536 17.5196 6.29289 17.7071C6.48043 17.8946 6.73478 18 7 18H11Z"/>
+<path d="M20.9243 15.0075C20.7034 15.0075 20.5136 15.1575 20.471 15.3637C19.6729 19.0275 19.6807 18.9412 19.6574 19.245C19.6497 19.2 19.6419 19.1475 19.6303 19.0838C19.5993 18.8925 19.6419 19.0913 18.716 15.3525C18.6657 15.15 18.4797 15.0075 18.2628 15.0075H17.7475C17.5345 15.0075 17.3485 15.15 17.2943 15.3487C16.349 19.0612 16.3645 18.9562 16.3335 19.2375C16.3296 19.1962 16.3258 19.1437 16.3141 19.08C16.287 18.885 15.7679 16.3312 15.5742 15.3675C15.5316 15.1575 15.3417 15.0037 15.117 15.0037H14.4662C14.164 15.0037 13.9432 15.2775 14.0129 15.5588C14.3229 16.7813 15.0473 19.665 15.2991 20.6588C15.3495 20.8613 15.5354 21 15.7524 21H16.7287C16.9417 21 17.1277 20.8613 17.178 20.6588L17.8715 17.9813C17.9296 17.7487 17.9684 17.5312 17.9877 17.3325L18.1001 17.9813C18.1039 17.9962 18.5882 19.875 18.7935 20.6588C18.8439 20.8575 19.0298 21 19.2429 21H20.1998C20.4129 21 20.5988 20.8613 20.6492 20.6588C21.455 17.5875 21.8192 16.1963 21.9858 15.5588C22.0594 15.2738 21.8385 15 21.5364 15H20.9243V15.0075Z"/>
+</svg>

package/assets/icons/x.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
+</svg>

package/assets/icons/youtube.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 9.70998C23.0495 8.27864 22.7365 6.858 22.09 5.57998C21.6514 5.05558 21.0427 4.70169 20.37 4.57998C17.5875 4.32751 14.7936 4.22403 12 4.26998C9.21667 4.22194 6.43274 4.32208 3.66003 4.56998C3.11185 4.6697 2.60454 4.92683 2.20003 5.30998C1.30003 6.13998 1.20003 7.55998 1.10003 8.75998C0.954939 10.9175 0.954939 13.0824 1.10003 15.24C1.12896 15.9154 1.22952 16.5858 1.40003 17.24C1.5206 17.745 1.76455 18.2123 2.11003 18.6C2.51729 19.0034 3.03641 19.2752 3.60003 19.38C5.75594 19.6461 7.92824 19.7564 10.1 19.71C13.6 19.76 16.67 19.71 20.3 19.43C20.8775 19.3316 21.4112 19.0595 21.83 18.65C22.11 18.3699 22.3191 18.0271 22.44 17.65C22.7977 16.5526 22.9733 15.4041 22.96 14.25C23 13.69 23 10.31 23 9.70998ZM9.74003 14.85V8.65998L15.66 11.77C14 12.69 11.81 13.73 9.74003 14.85Z" />
+</svg>

package/assets/logos/logo_custom_light_desktop_civictheme.svg

@@ -0,0 +1,32 @@
+<svg width="728" height="156" viewBox="0 0 728 156" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_8405_153614)">
+        <path d="M48.6504 14.835C53.392 6.64186 63.8934 3.83468 72.1061 8.565L141.501 48.535C149.713 53.2653 152.527 63.7418 147.786 71.935L107.721 141.165C102.979 149.358 92.4776 152.165 84.265 147.435L14.8703 107.465C6.65764 102.735 3.84379 92.2582 8.58535 84.065L48.6504 14.835Z" fill="#61DAFF"/>
+        <path d="M12.0783 54.613C9.62385 45.4747 15.0598 36.0817 24.2198 33.6331L101.62 12.9431C110.78 10.4945 120.195 15.9176 122.649 25.0558L143.389 102.272C145.843 111.41 140.407 120.803 131.247 123.252L53.8472 143.942C44.6872 146.39 35.2719 140.967 32.8175 131.829L12.0783 54.613Z" fill="#00698F"/>
+        <g clip-path="url(#clip1_8405_153614)">
+            <path d="M76.3144 68.52C69.8277 68.52 64.8672 63.5713 64.8672 57.1C64.8672 50.6287 69.8277 45.68 76.3144 45.68C82.8011 45.68 87.7615 50.6287 87.7615 57.1C87.7615 63.5713 82.8011 68.52 76.3144 68.52Z" fill="white"/>
+            <path d="M83.9458 106.587H68.683V91.36L61.0515 83.7466V72.3266H91.5773V83.7466L83.9458 91.36V106.587Z" fill="white"/>
+            <path d="M53.4201 64.7133C49.2228 64.7133 45.7886 61.2873 45.7886 57.1C45.7886 52.9127 49.2228 49.4867 53.4201 49.4867C57.6174 49.4867 61.0515 52.9127 61.0515 57.1C61.0515 61.2873 57.6174 64.7133 53.4201 64.7133Z" fill="white"/>
+            <path d="M57.2358 85.2693V68.52H45.7886V79.94L49.6044 83.7466V98.9733H61.0515V89.076L57.2358 85.2693Z" fill="white"/>
+            <path d="M99.2087 64.7133C103.406 64.7133 106.84 61.2873 106.84 57.1C106.84 52.9127 103.406 49.4867 99.2087 49.4867C95.0114 49.4867 91.5773 52.9127 91.5773 57.1C91.5773 61.2873 95.0114 64.7133 99.2087 64.7133Z" fill="white"/>
+            <path d="M95.393 85.2693V68.52H106.84V79.94L103.024 83.7466V98.9733H91.5773V89.076L95.393 85.2693Z" fill="white"/>
+        </g>
+        <path d="M255.025 85.9107C253.259 93.3421 249.216 99.4885 242.897 104.35C236.608 109.18 229.359 111.596 221.15 111.596C211.578 111.596 203.384 108.36 196.569 101.888C189.753 95.4167 186.346 87.6138 186.346 78.4793C186.346 69.3449 189.753 61.5419 196.569 55.0704C203.384 48.5989 211.578 45.3631 221.15 45.3631C229.328 45.3631 236.577 47.7938 242.897 52.6552C249.216 57.5166 253.259 63.6475 255.025 71.0479H237.832C236.376 67.8277 234.145 65.2267 231.14 63.245C228.166 61.2323 224.836 60.226 221.15 60.226C216.069 60.226 211.748 62.0219 208.185 65.6137C204.654 69.1746 202.888 73.4631 202.888 78.4793C202.888 83.4955 204.669 87.7995 208.232 91.3914C211.794 94.9523 216.1 96.7327 221.15 96.7327C224.836 96.7327 228.182 95.7419 231.187 93.7602C234.223 91.7475 236.438 89.131 237.832 85.9107H255.025Z" fill="white"/>
+        <path d="M270.538 57.8572C268.059 57.8572 265.937 56.9902 264.172 55.2562C262.406 53.4912 261.523 51.4012 261.523 48.986C261.523 46.5707 262.406 44.4961 264.172 42.7622C265.937 41.0282 268.059 40.1612 270.538 40.1612C272.954 40.1612 275.061 41.0436 276.857 42.8086C278.685 44.5736 279.599 46.6327 279.599 48.986C279.599 51.4012 278.685 53.4912 276.857 55.2562C275.061 56.9902 272.954 57.8572 270.538 57.8572ZM262.638 110.341V63.1521H278.437V110.341H262.638Z" fill="white"/>
+        <path d="M306.496 110.341L282.24 63.1521H299.341L309.842 86.2823L320.39 63.1521H337.537L313.234 110.341H306.496Z" fill="white"/>
+        <path d="M349.24 57.8572C346.761 57.8572 344.639 56.9902 342.873 55.2562C341.108 53.4912 340.225 51.4012 340.225 48.986C340.225 46.5707 341.108 44.4961 342.873 42.7622C344.639 41.0282 346.761 40.1612 349.24 40.1612C351.656 40.1612 353.762 41.0436 355.559 42.8086C357.387 44.5736 358.301 46.6327 358.301 48.986C358.301 51.4012 357.387 53.4912 355.559 55.2562C353.762 56.9902 351.656 57.8572 349.24 57.8572ZM341.34 110.341V63.1521H357.139V110.341H341.34Z" fill="white"/>
+        <path d="M417.354 91.2985C416.579 97.0578 413.729 101.888 408.804 105.79C403.909 109.66 398.194 111.596 391.657 111.596C384.222 111.596 377.841 109.165 372.513 104.303C367.215 99.4421 364.567 93.5899 364.567 86.7468C364.567 79.9037 367.231 74.0515 372.559 69.1901C377.887 64.2977 384.253 61.8516 391.657 61.8516C398.194 61.8516 403.909 63.8178 408.804 67.7502C413.698 71.6517 416.548 76.4047 417.354 82.0092H401.276C400.564 80.1204 399.309 78.5877 397.512 77.4111C395.715 76.2035 393.671 75.5997 391.378 75.5997C388.343 75.5997 385.756 76.6989 383.618 78.8973C381.512 81.0958 380.459 83.7123 380.459 86.7468C380.459 89.7193 381.512 92.2894 383.618 94.4568C385.756 96.6243 388.343 97.7081 391.378 97.7081C396.149 97.7081 399.448 95.5716 401.276 91.2985H417.354Z" fill="white"/>
+        <path d="M471.992 46.6172V53.4448H450.013V110.341H441.928V53.4448H419.856V46.6172H471.992Z" fill="white"/>
+        <path d="M479.792 110.341V41.8332H487.506V76.1106H487.598C488.869 72.3639 491.022 69.3139 494.057 66.9607C497.124 64.6074 500.516 63.4307 504.234 63.4307C510.398 63.4307 515.386 65.5518 519.196 69.7939C523.007 74.005 524.912 79.3154 524.912 85.7249V110.341H517.198V86.3752C517.198 81.8854 515.804 78.0923 513.016 74.9959C510.228 71.8685 506.681 70.3048 502.375 70.3048C498.317 70.3048 494.816 71.9459 491.873 75.2281C488.962 78.4793 487.506 82.3808 487.506 86.9326V110.341H479.792Z" fill="white"/>
+        <path d="M559.616 104.907C562.993 104.907 566.09 104.211 568.909 102.817C571.729 101.424 573.68 99.6124 574.764 97.383H582.339C580.697 101.563 577.738 104.969 573.463 107.601C569.188 110.202 564.449 111.503 559.244 111.503C552.212 111.503 546.28 109.196 541.447 104.582C536.615 99.9375 534.198 94.1782 534.198 87.3041C534.198 80.6468 536.506 75.0113 541.122 70.3977C545.769 65.7531 551.655 63.4307 558.78 63.4307C566.214 63.4307 572.193 65.9543 576.716 71.0015C581.239 76.0486 583.5 82.3189 583.5 89.8122H541.819C542.377 94.302 544.297 97.9403 547.581 100.727C550.896 103.514 554.907 104.907 559.616 104.907ZM558.78 69.9332C554.226 69.9332 550.431 71.2337 547.395 73.8347C544.39 76.4357 542.562 79.7953 541.912 83.9135H575.601C574.888 79.6715 573.03 76.2809 570.025 73.7418C567.02 71.2028 563.271 69.9332 558.78 69.9332Z" fill="white"/>
+        <path d="M649.523 63.4307C655.409 63.4307 660.195 65.4434 663.882 69.4688C667.568 73.4941 669.412 78.5258 669.412 84.5638V110.341H661.698V84.8425C661.698 80.7862 660.459 77.3491 657.981 74.5314C655.502 71.7137 652.327 70.3048 648.455 70.3048C644.768 70.3048 641.624 71.7756 639.022 74.7172C636.42 77.6588 635.119 81.2197 635.119 85.3998V110.341H627.405V84.8425C627.405 80.7862 626.15 77.3491 623.641 74.5314C621.163 71.7137 617.988 70.3048 614.115 70.3048C610.491 70.3048 607.377 71.7756 604.775 74.7172C602.173 77.6588 600.872 81.2197 600.872 85.3998V110.341H593.158V64.499H600.036L600.407 74.9494H600.5C601.708 71.5124 603.753 68.7411 606.634 66.6355C609.515 64.499 612.675 63.4307 616.113 63.4307C619.924 63.4307 623.254 64.3751 626.104 66.264C628.954 68.1218 631.169 70.6764 632.749 73.9276C634.576 70.4286 636.977 67.8122 639.951 66.0782C642.956 64.3132 646.147 63.4307 649.523 63.4307Z" fill="white"/>
+        <path d="M704.116 104.907C707.492 104.907 710.59 104.211 713.409 102.817C716.228 101.424 718.18 99.6124 719.264 97.383H726.838C725.197 101.563 722.238 104.969 717.963 107.601C713.688 110.202 708.948 111.503 703.744 111.503C696.712 111.503 690.78 109.196 685.947 104.582C681.114 99.9375 678.698 94.1782 678.698 87.3041C678.698 80.6468 681.006 75.0113 685.622 70.3977C690.268 65.7531 696.154 63.4307 703.279 63.4307C710.714 63.4307 716.693 65.9543 721.216 71.0015C725.739 76.0486 728 82.3189 728 89.8122H686.319C686.876 94.302 688.797 97.9403 692.081 100.727C695.395 103.514 699.407 104.907 704.116 104.907ZM703.279 69.9332C698.725 69.9332 694.931 71.2337 691.895 73.8347C688.89 76.4357 687.062 79.7953 686.412 83.9135H720.101C719.388 79.6715 717.529 76.2809 714.524 73.7418C711.52 71.2028 707.771 69.9332 703.279 69.9332Z" fill="white"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_8405_153614">
+            <rect width="728" height="156" fill="white"/>
+        </clipPath>
+        <clipPath id="clip1_8405_153614">
+            <rect width="61.0515" height="60.9066" fill="white" transform="translate(45.7886 45.68)"/>
+        </clipPath>
+    </defs>
+</svg>

package/assets/logos/logo_custom_light_mobile_civictheme.svg

@@ -0,0 +1,32 @@
+<svg width="728" height="156" viewBox="0 0 728 156" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_8405_153614)">
+        <path d="M48.6504 14.835C53.392 6.64186 63.8934 3.83468 72.1061 8.565L141.501 48.535C149.713 53.2653 152.527 63.7418 147.786 71.935L107.721 141.165C102.979 149.358 92.4776 152.165 84.265 147.435L14.8703 107.465C6.65764 102.735 3.84379 92.2582 8.58535 84.065L48.6504 14.835Z" fill="#61DAFF"/>
+        <path d="M12.0783 54.613C9.62385 45.4747 15.0598 36.0817 24.2198 33.6331L101.62 12.9431C110.78 10.4945 120.195 15.9176 122.649 25.0558L143.389 102.272C145.843 111.41 140.407 120.803 131.247 123.252L53.8472 143.942C44.6872 146.39 35.2719 140.967 32.8175 131.829L12.0783 54.613Z" fill="#00698F"/>
+        <g clip-path="url(#clip1_8405_153614)">
+            <path d="M76.3144 68.52C69.8277 68.52 64.8672 63.5713 64.8672 57.1C64.8672 50.6287 69.8277 45.68 76.3144 45.68C82.8011 45.68 87.7615 50.6287 87.7615 57.1C87.7615 63.5713 82.8011 68.52 76.3144 68.52Z" fill="white"/>
+            <path d="M83.9458 106.587H68.683V91.36L61.0515 83.7466V72.3266H91.5773V83.7466L83.9458 91.36V106.587Z" fill="white"/>
+            <path d="M53.4201 64.7133C49.2228 64.7133 45.7886 61.2873 45.7886 57.1C45.7886 52.9127 49.2228 49.4867 53.4201 49.4867C57.6174 49.4867 61.0515 52.9127 61.0515 57.1C61.0515 61.2873 57.6174 64.7133 53.4201 64.7133Z" fill="white"/>
+            <path d="M57.2358 85.2693V68.52H45.7886V79.94L49.6044 83.7466V98.9733H61.0515V89.076L57.2358 85.2693Z" fill="white"/>
+            <path d="M99.2087 64.7133C103.406 64.7133 106.84 61.2873 106.84 57.1C106.84 52.9127 103.406 49.4867 99.2087 49.4867C95.0114 49.4867 91.5773 52.9127 91.5773 57.1C91.5773 61.2873 95.0114 64.7133 99.2087 64.7133Z" fill="white"/>
+            <path d="M95.393 85.2693V68.52H106.84V79.94L103.024 83.7466V98.9733H91.5773V89.076L95.393 85.2693Z" fill="white"/>
+        </g>
+        <path d="M255.025 85.9107C253.259 93.3421 249.216 99.4885 242.897 104.35C236.608 109.18 229.359 111.596 221.15 111.596C211.578 111.596 203.384 108.36 196.569 101.888C189.753 95.4167 186.346 87.6138 186.346 78.4793C186.346 69.3449 189.753 61.5419 196.569 55.0704C203.384 48.5989 211.578 45.3631 221.15 45.3631C229.328 45.3631 236.577 47.7938 242.897 52.6552C249.216 57.5166 253.259 63.6475 255.025 71.0479H237.832C236.376 67.8277 234.145 65.2267 231.14 63.245C228.166 61.2323 224.836 60.226 221.15 60.226C216.069 60.226 211.748 62.0219 208.185 65.6137C204.654 69.1746 202.888 73.4631 202.888 78.4793C202.888 83.4955 204.669 87.7995 208.232 91.3914C211.794 94.9523 216.1 96.7327 221.15 96.7327C224.836 96.7327 228.182 95.7419 231.187 93.7602C234.223 91.7475 236.438 89.131 237.832 85.9107H255.025Z" fill="white"/>
+        <path d="M270.538 57.8572C268.059 57.8572 265.937 56.9902 264.172 55.2562C262.406 53.4912 261.523 51.4012 261.523 48.986C261.523 46.5707 262.406 44.4961 264.172 42.7622C265.937 41.0282 268.059 40.1612 270.538 40.1612C272.954 40.1612 275.061 41.0436 276.857 42.8086C278.685 44.5736 279.599 46.6327 279.599 48.986C279.599 51.4012 278.685 53.4912 276.857 55.2562C275.061 56.9902 272.954 57.8572 270.538 57.8572ZM262.638 110.341V63.1521H278.437V110.341H262.638Z" fill="white"/>
+        <path d="M306.496 110.341L282.24 63.1521H299.341L309.842 86.2823L320.39 63.1521H337.537L313.234 110.341H306.496Z" fill="white"/>
+        <path d="M349.24 57.8572C346.761 57.8572 344.639 56.9902 342.873 55.2562C341.108 53.4912 340.225 51.4012 340.225 48.986C340.225 46.5707 341.108 44.4961 342.873 42.7622C344.639 41.0282 346.761 40.1612 349.24 40.1612C351.656 40.1612 353.762 41.0436 355.559 42.8086C357.387 44.5736 358.301 46.6327 358.301 48.986C358.301 51.4012 357.387 53.4912 355.559 55.2562C353.762 56.9902 351.656 57.8572 349.24 57.8572ZM341.34 110.341V63.1521H357.139V110.341H341.34Z" fill="white"/>
+        <path d="M417.354 91.2985C416.579 97.0578 413.729 101.888 408.804 105.79C403.909 109.66 398.194 111.596 391.657 111.596C384.222 111.596 377.841 109.165 372.513 104.303C367.215 99.4421 364.567 93.5899 364.567 86.7468C364.567 79.9037 367.231 74.0515 372.559 69.1901C377.887 64.2977 384.253 61.8516 391.657 61.8516C398.194 61.8516 403.909 63.8178 408.804 67.7502C413.698 71.6517 416.548 76.4047 417.354 82.0092H401.276C400.564 80.1204 399.309 78.5877 397.512 77.4111C395.715 76.2035 393.671 75.5997 391.378 75.5997C388.343 75.5997 385.756 76.6989 383.618 78.8973C381.512 81.0958 380.459 83.7123 380.459 86.7468C380.459 89.7193 381.512 92.2894 383.618 94.4568C385.756 96.6243 388.343 97.7081 391.378 97.7081C396.149 97.7081 399.448 95.5716 401.276 91.2985H417.354Z" fill="white"/>
+        <path d="M471.992 46.6172V53.4448H450.013V110.341H441.928V53.4448H419.856V46.6172H471.992Z" fill="white"/>
+        <path d="M479.792 110.341V41.8332H487.506V76.1106H487.598C488.869 72.3639 491.022 69.3139 494.057 66.9607C497.124 64.6074 500.516 63.4307 504.234 63.4307C510.398 63.4307 515.386 65.5518 519.196 69.7939C523.007 74.005 524.912 79.3154 524.912 85.7249V110.341H517.198V86.3752C517.198 81.8854 515.804 78.0923 513.016 74.9959C510.228 71.8685 506.681 70.3048 502.375 70.3048C498.317 70.3048 494.816 71.9459 491.873 75.2281C488.962 78.4793 487.506 82.3808 487.506 86.9326V110.341H479.792Z" fill="white"/>
+        <path d="M559.616 104.907C562.993 104.907 566.09 104.211 568.909 102.817C571.729 101.424 573.68 99.6124 574.764 97.383H582.339C580.697 101.563 577.738 104.969 573.463 107.601C569.188 110.202 564.449 111.503 559.244 111.503C552.212 111.503 546.28 109.196 541.447 104.582C536.615 99.9375 534.198 94.1782 534.198 87.3041C534.198 80.6468 536.506 75.0113 541.122 70.3977C545.769 65.7531 551.655 63.4307 558.78 63.4307C566.214 63.4307 572.193 65.9543 576.716 71.0015C581.239 76.0486 583.5 82.3189 583.5 89.8122H541.819C542.377 94.302 544.297 97.9403 547.581 100.727C550.896 103.514 554.907 104.907 559.616 104.907ZM558.78 69.9332C554.226 69.9332 550.431 71.2337 547.395 73.8347C544.39 76.4357 542.562 79.7953 541.912 83.9135H575.601C574.888 79.6715 573.03 76.2809 570.025 73.7418C567.02 71.2028 563.271 69.9332 558.78 69.9332Z" fill="white"/>
+        <path d="M649.523 63.4307C655.409 63.4307 660.195 65.4434 663.882 69.4688C667.568 73.4941 669.412 78.5258 669.412 84.5638V110.341H661.698V84.8425C661.698 80.7862 660.459 77.3491 657.981 74.5314C655.502 71.7137 652.327 70.3048 648.455 70.3048C644.768 70.3048 641.624 71.7756 639.022 74.7172C636.42 77.6588 635.119 81.2197 635.119 85.3998V110.341H627.405V84.8425C627.405 80.7862 626.15 77.3491 623.641 74.5314C621.163 71.7137 617.988 70.3048 614.115 70.3048C610.491 70.3048 607.377 71.7756 604.775 74.7172C602.173 77.6588 600.872 81.2197 600.872 85.3998V110.341H593.158V64.499H600.036L600.407 74.9494H600.5C601.708 71.5124 603.753 68.7411 606.634 66.6355C609.515 64.499 612.675 63.4307 616.113 63.4307C619.924 63.4307 623.254 64.3751 626.104 66.264C628.954 68.1218 631.169 70.6764 632.749 73.9276C634.576 70.4286 636.977 67.8122 639.951 66.0782C642.956 64.3132 646.147 63.4307 649.523 63.4307Z" fill="white"/>
+        <path d="M704.116 104.907C707.492 104.907 710.59 104.211 713.409 102.817C716.228 101.424 718.18 99.6124 719.264 97.383H726.838C725.197 101.563 722.238 104.969 717.963 107.601C713.688 110.202 708.948 111.503 703.744 111.503C696.712 111.503 690.78 109.196 685.947 104.582C681.114 99.9375 678.698 94.1782 678.698 87.3041C678.698 80.6468 681.006 75.0113 685.622 70.3977C690.268 65.7531 696.154 63.4307 703.279 63.4307C710.714 63.4307 716.693 65.9543 721.216 71.0015C725.739 76.0486 728 82.3189 728 89.8122H686.319C686.876 94.302 688.797 97.9403 692.081 100.727C695.395 103.514 699.407 104.907 704.116 104.907ZM703.279 69.9332C698.725 69.9332 694.931 71.2337 691.895 73.8347C688.89 76.4357 687.062 79.7953 686.412 83.9135H720.101C719.388 79.6715 717.529 76.2809 714.524 73.7418C711.52 71.2028 707.771 69.9332 703.279 69.9332Z" fill="white"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_8405_153614">
+            <rect width="728" height="156" fill="white"/>
+        </clipPath>
+        <clipPath id="clip1_8405_153614">
+            <rect width="61.0515" height="60.9066" fill="white" transform="translate(45.7886 45.68)"/>
+        </clipPath>
+    </defs>
+</svg>

package/components/00-base/_variables.base.scss

@@ -0,0 +1,482 @@
+//
+// CivicTheme base default variables.
+//
+// Do not copy this file for customisations.
+// Use `components/variables.base.scss` instead.
+//
+// Variables are split into 2 files:
+// - _variables.base.scss - base variables that are used to calculate other
+//   variables' values.
+// - _variables.components.scss - variables that control the look of components.
+//
+// These are split into 2 files to allow changing base variables without the
+// need to provide component variables in custom themes (e.g., to override
+// heading color in child theme and have it propagate to components).
+//
+
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:color';
+@import 'mixins';
+
+//
+// Particle.
+//
+// The most basic unit of measurement.
+// Using pixels to tie to the design grid which is in pixels as well.
+// Depending on the context, most of the values will be using conversion to
+// rem with rem() function.
+//
+// Do not use these directly.
+// Use ct-particle() function instead.
+//
+// Use ct-spacing() function for spacing.
+//
+$ct-particle: 8px !default;
+
+//
+// Assets directory.
+//
+$ct-assets-directory: './assets/' !default;
+
+//
+// Colors.
+//
+// Components are using colors defined in the color palette variables.
+//
+// Color palette variables can have custom color values or can be based on
+// the brand colors to allow quick mapping.
+//
+
+// Use $ct-colors-brands to provide brand color values.
+// It is available (and empty) so that consumer site implementations could
+// specify their custom brand color values an *additional* colors to extend the
+// brand color set.
+$ct-colors-brands: () !default;
+
+// Default CivicTheme colors palette.
+// Use $ct-colors to override and extend color palette values.
+// It is available (and empty) so that consumer site implementations could
+// specify their custom color values (to override defaults) and *additional*
+// colors to extend the color palette set. This allows CivicTheme to make
+// color palette additions without breaking consumer site implementations.
+$ct-colors: () !default;
+$ct-colors-default: (
+  'light': (
+    'heading': ct-color-shade(ct-color-constant-light('brand1'), 60),
+    'body': ct-color-tint(ct-color-shade(ct-color-constant-light('brand1'), 80), 20),
+    'background-light': ct-color-tint(ct-color-constant-light('brand2'), 90),
+    'background': ct-color-constant-light('brand2'),
+    'background-dark': ct-color-shade(ct-color-constant-light('brand2'), 20),
+    'border-light': ct-color-shade(ct-color-constant-light('brand2'), 25),
+    'border': ct-color-shade(ct-color-constant-light('brand2'), 60),
+    'border-dark': ct-color-shade(ct-color-constant-light('brand2'), 90),
+    'interaction-text': ct-color-tint(ct-color-constant-light('brand2'), 80),
+    'interaction-background': ct-color-constant-light('brand1'),
+    'interaction-hover-text': ct-color-tint(ct-color-constant-light('brand2'), 80),
+    'interaction-hover-background': ct-color-shade(ct-color-constant-light('brand1'), 40),
+    'interaction-focus': #8b5cd7,
+    'highlight': ct-color-constant-light('brand3'),
+    'information': #007cbf,
+    'warning': #c95100,
+    'error': #ce3836,
+    'success': #008482,
+  ),
+  'dark': (
+    'heading': ct-color-tint(ct-color-constant-dark('brand1'), 95),
+    'body': ct-color-tint(ct-color-constant-dark('brand1'), 85),
+    'background-light': ct-color-tint(ct-color-constant-dark('brand2'), 5),
+    'background': ct-color-constant-dark('brand2'),
+    'background-dark': ct-color-shade(ct-color-constant-dark('brand2'), 30),
+    'border-light': ct-color-tint(ct-color-constant-dark('brand2'), 65),
+    'border': ct-color-tint(ct-color-constant-dark('brand2'), 10),
+    'border-dark': ct-color-shade(ct-color-constant-dark('brand2'), 30),
+    'interaction-text': ct-color-constant-dark('brand2'),
+    'interaction-background': ct-color-constant-dark('brand1'),
+    'interaction-hover-text': ct-color-shade(ct-color-constant-dark('brand2'), 30),
+    'interaction-hover-background': ct-color-tint(ct-color-constant-dark('brand1'), 40),
+    'interaction-focus': #8b5cd7,
+    'highlight': ct-color-constant-dark('brand3'),
+    'information': #4cc4fc,
+    'warning': #e38444,
+    'error': #e85653,
+    'success': #12b0ae,
+  )
+);
+
+//
+// Fonts.
+//
+
+// Use $ct-fonts to override any font family values. It is available
+// (and empty) so that any consumer sites could specify their fonts in here to
+// override the defaults. This allows CivicTheme to make font additions without
+// breaking consumer sites.
+$ct-fonts: () !default;
+$ct-fonts-default: (
+  'primary': (
+    'family': '"Lexend", sans-serif',
+    'types': (
+      (
+        'uri': 'https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap',
+      ),
+    ),
+  ),
+  'secondary': (
+    'family': '"Public Sans", sans-serif',
+    'types': (
+      (
+        'uri': 'https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600&display=swap',
+      ),
+    ),
+  ),
+);
+
+// Add custom fonts to $ct-fonts with the same key as above to override
+// fonts or with a new key to add a new font kind.
+// 'uri' can be a URL to the external font or a list of local files with
+// extensions to be imported. The font type will be taken from the file
+// extensions.
+// Use $ct-assets-directory to provide a relative path.
+//
+// IMPORTANT: Make sure to put commas at the end of every list or SASS will not
+// be able to distinguish lists and values.
+//
+// Example:
+//
+// $ct-fonts: (
+//   'tertiary': (
+//     'family': 'Roboto',
+//     'types': (
+//       (
+//         'uri': (
+//           '#{$ct-assets-directory}fonts/roboto/Roboto-Regular.ttf',
+//           '#{$ct-assets-directory}fonts/roboto/Roboto-Regular.woff',
+//           '#{$ct-assets-directory}fonts/roboto/Roboto-Regular.eot',
+//         ),
+//       ),
+//       (
+//         'italic': true,
+//         'weight': 'bold',
+//         'uri': (
+//           '#{$ct-assets-directory}fonts/roboto/Roboto-BoldItalic.ttf',
+//           '#{$ct-assets-directory}fonts/roboto/Roboto-BoldItalic.woff',
+//           '#{$ct-assets-directory}fonts/roboto/Roboto-BoldItalic.eot',
+//         ),
+//       ),
+//     ),
+//   ),
+// );
+
+//
+// Font weights.
+//
+
+// These directly correlate with font weight values set in the $ct-fonts-default
+// and $ct-fonts above.
+$ct-font-weights: ();
+$ct-font-weights-default: (
+  'thin': 100,
+  'extralight': 200,
+  'regular': 400,
+  'medium': 500,
+  'semibold': 600,
+  'bold': 700,
+  'extrabold': 800,
+  'black': 900,
+);
+
+// Average character width. Used for calculating spacing based on font size.
+// @todo: This should be calculated based on the font itself and added to the
+// font definition map.
+$ct-font-average-character-width: 0.25 !default;
+
+// Font smoothing.
+$ct-font-smoothing-enable: true !default;
+
+//
+// Typography.
+//
+
+// Base font size.
+$ct-font-base-size: ct-particle-px(2) !default;
+
+// Base font line height.
+$ct-font-base-line-height: $ct-font-base-size !default;
+
+// Use $ct-typography to override any typography values. It is available
+// (and empty) so that any consumer sites could specify their typography in here to
+// override the defaults. This allows CivicTheme to make typography additions
+// without breaking consumer sites.
+$ct-typography: () !default;
+$ct-typography-default: (
+  'display': (
+    'xxs': ($ct-font-base-size * 2, $ct-font-base-line-height * 2.5, 'bold', 'primary', -0.03px),
+    'm': ($ct-font-base-size * 3.5, $ct-font-base-line-height * 3.75, 'bold', 'primary', -1px)
+  ),
+  // Headings.
+  'heading-1': (
+    'xxs': ($ct-font-base-size * 2, $ct-font-base-line-height * 2.5, 'bold', 'primary', -0.6px),
+    'm': ($ct-font-base-size * 3, $ct-font-base-line-height * 3.75, 'bold', 'primary', -1px)
+  ),
+  'heading-2': (
+    'xxs': ($ct-font-base-size * 1.75, $ct-font-base-line-height * 2.25, 'bold', 'primary', -0.5px),
+    'm': ($ct-font-base-size * 2.5, $ct-font-base-line-height * 3, 'bold', 'primary', -0.8px)
+  ),
+  'heading-3': (
+    'xxs': ($ct-font-base-size * 1.5, $ct-font-base-line-height * 2, 'bold', 'primary', -0.35px),
+    'm': ($ct-font-base-size * 2, $ct-font-base-line-height * 2.5, 'bold', 'primary', -0.6px)
+  ),
+  'heading-4': (
+    'xxs': ($ct-font-base-size * 1.25, $ct-font-base-line-height * 1.5, 'bold', 'primary', -0.25px),
+    'm': ($ct-font-base-size * 1.5, $ct-font-base-line-height * 2, 'bold', 'primary', -0.4px)
+  ),
+  'heading-5': (
+    'xxs': ($ct-font-base-size, $ct-font-base-line-height * 1.375, 'bold', 'primary', 0),
+    'm': ($ct-font-base-size * 1.25, $ct-font-base-line-height * 1.5, 'bold', 'primary', -0.2px)
+  ),
+  'heading-6': ($ct-font-base-size, $ct-font-base-line-height * 1.625, 'bold', 'primary', 0),
+  // Text.
+  'text-extra-large': (
+    'xxs': ($ct-font-base-size * 1.25, $ct-font-base-line-height * 1.5, 'regular', 'primary', -0.1px),
+    'm': ($ct-font-base-size * 1.5, $ct-font-base-line-height * 1.5, 'regular', 'primary', 0)
+  ),
+  'text-large': (
+    'xxs': ($ct-font-base-size * 1.125, $ct-font-base-line-height * 1.75, 'regular', 'primary', 0),
+    'm': ($ct-font-base-size * 1.25, $ct-font-base-line-height * 2.125, 'regular', 'primary', 0)
+  ),
+  'text-regular': (
+    'xxs': ($ct-font-base-size * 0.875, $ct-font-base-line-height * 1.5, 'regular', 'primary', 0),
+    'm': ($ct-font-base-size, $ct-font-base-line-height * 1.75, 'regular', 'primary', 0)
+  ),
+  'text-small': (
+    'xxs': ($ct-font-base-size * 0.75, $ct-font-base-line-height * 1.25, 'regular', 'primary', 0),
+    'm': ($ct-font-base-size * 0.875, $ct-font-base-line-height * 1.5, 'regular', 'primary', 0),
+  ),
+  // Labels.
+  'label-extra-large': (
+    'xxs': ($ct-font-base-size * 1.25, $ct-font-base-line-height * 1.5, 'semibold', 'primary', -0.1px),
+    'm': ($ct-font-base-size * 1.5, $ct-font-base-line-height * 1.5, 'semibold', 'primary', 0)
+  ),
+  'label-large': (
+    'xxs': ($ct-font-base-size * 1.125, $ct-font-base-line-height * 1.5, 'semibold', 'primary', -0.1px),
+    'm': ($ct-font-base-size * 1.125, $ct-font-base-line-height * 1.5, 'semibold', 'primary', 0)
+  ),
+  'label-regular': (
+    'xxs': ($ct-font-base-size, $ct-font-base-line-height * 1.25, 'semibold', 'primary', -0.1px),
+    'm': ($ct-font-base-size, $ct-font-base-line-height * 1.25, 'semibold', 'primary', -0.1px)
+  ),
+  'label-small': (
+    'xxs': ($ct-font-base-size, $ct-font-base-line-height * 1.25, 'regular', 'primary', -0.1px),
+    'm': ($ct-font-base-size, $ct-font-base-line-height * 1.25, 'regular', 'primary', -0.1px)
+  ),
+  'label-extra-small': (
+    'xxs': ($ct-font-base-size * 0.875, $ct-font-base-line-height * 1.25, 'regular', 'primary', -0.1px),
+    'm': ($ct-font-base-size * 0.875, $ct-font-base-line-height * 1.125, 'regular', 'primary', 0)
+  ),
+  // Special elements.
+  'quote': (
+    'xxs': ($ct-font-base-size * 1.125, $ct-font-base-line-height * 1.815, 'regular', 'primary', -0.15px),
+    'm': ($ct-font-base-size * 1.5, $ct-font-base-size * 2.5, 'regular', 'primary', -0.35px)
+  ),
+);
+
+//
+// Spacing.
+//
+// Used to control spacing for elements.
+//
+// Do not use these directly.
+// Use ct-spacing() function instead.
+//
+// Use ct-spacing() function for spacing.
+//
+$ct-spacing: ct-particle() !default;
+
+//
+// Breakpoints.
+//
+// The value denotes the "start" of the breakpoint range.
+//
+// Do not use these directly.
+// Use @include ct-breakpoint() mixin instead.
+//
+// We are not basing these on $ct-particle as these are dimensions of the real
+// screens.
+$ct-breakpoints: (
+  'xxs': 0,
+  'xs': 368px,
+  's': 576px,
+  'm': 768px,
+  'l': 992px,
+  'xl': 1280px,
+  'xxl': 1440px,
+) !default;
+
+//
+// Grid.
+//
+
+// Number of grid columns.
+$ct-grid-columns: 12 !default;
+
+// Grid spacing used to calculate gutter spacings. Since the grid is based on
+// pixel values instead of rems (for consistency), the spacing is also based on
+// pixel values.
+$ct-grid-space: ct-particle-px() !default;
+
+// The lowest breakpoint where column classes should start applying.
+$ct-grid-lowest-breakpoint: 'xxs' !default;
+
+// The lowest breakpoint where *responsive* grid classes should start applying.
+// Must align with the value in the auto-generated column_class in
+// the Grid component.
+$ct-grid-responsive-breakpoint: 'm' !default;
+
+// Horizontal spacing between grid items depending on the responsive
+// context.
+$ct-grid-gutters: (
+  'xxs': $ct-grid-space * 2,
+  'xs': $ct-grid-space * 2,
+  's': $ct-grid-space * 3
+) !default;
+
+// Horizontal spacing between grid items depending on the responsive
+// context.
+$ct-grid-vertical-gutters: (
+  'xxs': $ct-grid-space * 2,
+  'xs': $ct-grid-space * 2,
+  's': $ct-grid-space * 3
+) !default;
+
+// Side spacing between the edge of the viewport and a start of the grid.
+$ct-grid-offsets: (
+  'xxs': $ct-grid-space * 3,
+  'xs': $ct-grid-space * 3,
+  's': $ct-grid-space * 3,
+  'm': $ct-grid-space * 3,
+  'l': $ct-grid-space * 6,
+  'xl': $ct-grid-space * 6,
+  'xxl': $ct-grid-space * 12,
+) !default;
+
+//
+// Item list.
+//
+$ct-item-list-horizontal-large-column-gap: ct-spacing(4);
+$ct-item-list-horizontal-large-row-gap: ct-spacing(4);
+$ct-item-list-horizontal-regular-column-gap: ct-spacing(2);
+$ct-item-list-horizontal-regular-row-gap: ct-spacing(2);
+$ct-item-list-horizontal-small-column-gap: ct-spacing(1);
+$ct-item-list-horizontal-small-row-gap: ct-spacing(1);
+$ct-item-list-vertical-large-column-gap: ct-spacing(4);
+$ct-item-list-vertical-large-row-gap: ct-spacing(4);
+$ct-item-list-vertical-regular-column-gap: ct-spacing(2);
+$ct-item-list-vertical-regular-row-gap: ct-spacing(2);
+$ct-item-list-vertical-small-column-gap: ct-spacing(1);
+$ct-item-list-vertical-small-row-gap: ct-spacing(1);
+
+//
+// Visibility.
+//
+
+// The lowest breakpoint where visibility classes should apply.
+$ct-visibility-lowest-breakpoint: 'xxs' !default;
+
+//
+// Icon size.
+//
+
+// Use $ct-icon-sizes to override any icon size values. It is available
+// (and empty) so that any consumer sites could specify their icons sizes here
+// to override the defaults. This allows CivicTheme to make icon sizes additions
+// without breaking consumer sites.
+$ct-icon-sizes: () !default;
+$ct-icon-sizes-default: (
+  'extra-large': (
+    'xxs': (ct-particle-px(6), ct-particle-px(6)),
+    'm': (ct-particle-px(6), ct-particle-px(6)),
+  ),
+  'large': (
+    'xxs': (ct-particle-px(5), ct-particle-px(5)),
+    'm': (ct-particle-px(5), ct-particle-px(5)),
+  ),
+  'regular': (
+    'xxs': (ct-particle-px(2.5), ct-particle-px(2.5)),
+    'm': (ct-particle-px(2.5), ct-particle-px(2.5)),
+  ),
+  'small': (
+    'xxs': (ct-particle-px(2), ct-particle-px(2)),
+    'm': (ct-particle-px(2), ct-particle-px(2)),
+  ),
+  'extra-small': (
+    'xxs': (ct-particle-px(1.75), ct-particle-px(1.75)),
+    'm': (ct-particle-px(1.75), ct-particle-px(1.75)),
+  )
+);
+
+//
+// Elevations.
+//
+$ct-elevations: (
+  0 ct-particle(0.25) ct-particle(1) rgba(0, 0, 0, 25%),
+  0 ct-particle(0.5) ct-particle(2) rgba(0, 0, 0, 20%),
+  0 ct-particle(1) ct-particle(3) rgba(0, 0, 0, 20%),
+  0 ct-particle(2) ct-particle(8) rgba(0, 0, 0, 20%),
+) !default;
+
+//
+// Flyout.
+//
+
+// Flyout animation duration.
+$ct-flyout-duration: 0.5s !default;
+
+// Flyout animation direction.
+$ct-flyout-direction-transforms: (
+  'right': translateX(100%),
+  'left': translateX(-100%),
+  'top': translateY(-100%),
+  'bottom': translateY(100%),
+) !default;
+
+// Flyout z-index.
+$ct-flyout-zindex: 1000 !default;
+
+//
+// Misc Variables.
+//
+
+// Border radius.
+$ct-border-radius: ct-particle(0.5) !default;
+
+// Width or height of the highlight stripe.
+$ct-stripe-size: ct-particle(0.75) !default;
+
+// Background blend modes.
+$ct-background-blend-modes: (
+  normal,
+  color,
+  color-burn,
+  color-dodge,
+  darken,
+  difference,
+  exclusion,
+  hard-light,
+  hue,
+  lighten,
+  luminosity,
+  multiply,
+  overlay,
+  saturation,
+  screen,
+  soft-light,
+) !default;
+
+// Enable CSS animations.
+$ct-animation-enabled: true !default;
+
+// Outline.
+$ct-outline-offset: 0 !default;
+$ct-outline-width: ct-particle(0.375) !default;
+$ct-outline-border-radius: $ct-border-radius !default;