Basic footer structure and Cookie Consent (#4320)

* Added footer with blank links to be filled 
* Cookie consent to match V1 
* Made scrolling work on tool search results
* Made scrolling the same on tool search, tool picker and workbench 
* Cleaned up height variables, view height only used at workbench level 
<img width="1525" height="1270"
alt="{F3C1B15F-A4BE-4DF0-A5A8-92D2A3B14443}"
src="https://github.com/user-attachments/assets/0c23fe35-9973-45c0-85af-0002c5ff58d2"
/>
<img width="1511" height="1262"
alt="{4DDD51C0-4BC5-4E9F-A4F2-E5F49AF5F5FD}"
src="https://github.com/user-attachments/assets/2596d980-0312-4cd7-ad34-9fd3a8d1869e"
/>

---------

Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
Co-authored-by: James Brunton <jbrunton96@gmail.com>

frontend/public/css/cookieconsentCustomisation.css

@@ -0,0 +1,178 @@
+/* Light theme variables */
+:root {
+    --cc-bg: #ffffff;
+    --cc-primary-color: #1c1c1c;
+    --cc-secondary-color: #666666;
+
+    --cc-btn-primary-bg: #007BFF;
+    --cc-btn-primary-color: #ffffff;
+    --cc-btn-primary-border-color: #007BFF;
+    --cc-btn-primary-hover-bg: #0056b3;
+    --cc-btn-primary-hover-color: #ffffff;
+    --cc-btn-primary-hover-border-color: #0056b3;
+
+    --cc-btn-secondary-bg: #f1f3f4;
+    --cc-btn-secondary-color: #1c1c1c;
+    --cc-btn-secondary-border-color: #f1f3f4;
+    --cc-btn-secondary-hover-bg: #007BFF;
+    --cc-btn-secondary-hover-color: #ffffff;
+    --cc-btn-secondary-hover-border-color: #007BFF;
+
+    --cc-separator-border-color: #e0e0e0;
+
+    --cc-toggle-on-bg: #007BFF;
+    --cc-toggle-off-bg: #667481;
+    --cc-toggle-on-knob-bg: #ffffff;
+    --cc-toggle-off-knob-bg: #ffffff;
+
+    --cc-toggle-enabled-icon-color: #ffffff;   
+    --cc-toggle-disabled-icon-color: #ffffff;  
+
+    --cc-toggle-readonly-bg: #f1f3f4;
+    --cc-toggle-readonly-knob-bg: #79747E;
+    --cc-toggle-readonly-knob-icon-color: #f1f3f4;
+
+    --cc-section-category-border: #e0e0e0;
+
+    --cc-cookie-category-block-bg: #f1f3f4;
+    --cc-cookie-category-block-border: #f1f3f4; 
+    --cc-cookie-category-block-hover-bg: #e9eff4;
+    --cc-cookie-category-block-hover-border: #e9eff4;
+    
+    --cc-cookie-category-expanded-block-bg: #f1f3f4;
+    --cc-cookie-category-expanded-block-hover-bg: #e9eff4;
+
+    --cc-footer-bg: #ffffff;
+    --cc-footer-color: #1c1c1c;
+    --cc-footer-border-color: #ffffff; 
+}
+
+/* Dark theme variables */
+.cc--darkmode{
+    --cc-bg: #2d2d2d;
+    --cc-primary-color: #e5e5e5;
+    --cc-secondary-color: #b0b0b0;
+
+    --cc-btn-primary-bg: #4dabf7;
+    --cc-btn-primary-color: #2d2d2d;
+    --cc-btn-primary-border-color: #4dabf7;
+    --cc-btn-primary-hover-bg: #3d3d3d;
+    --cc-btn-primary-hover-color: #e5e5e5;
+    --cc-btn-primary-hover-border-color: #3d3d3d;
+
+    --cc-btn-secondary-bg: #3d3d3d;
+    --cc-btn-secondary-color: #e5e5e5;
+    --cc-btn-secondary-border-color: #3d3d3d;
+    --cc-btn-secondary-hover-bg: #4dabf7;
+    --cc-btn-secondary-hover-color: #2d2d2d;
+    --cc-btn-secondary-hover-border-color: #4dabf7;
+
+    --cc-separator-border-color: #555555;
+
+    --cc-toggle-on-bg: #4dabf7;
+    --cc-toggle-off-bg: #667481;
+    --cc-toggle-on-knob-bg: #2d2d2d;
+    --cc-toggle-off-knob-bg: #2d2d2d;
+
+    --cc-toggle-enabled-icon-color: #2d2d2d;   
+    --cc-toggle-disabled-icon-color: #2d2d2d;  
+
+    --cc-toggle-readonly-bg: #555555;
+    --cc-toggle-readonly-knob-bg: #8e8e8e;
+    --cc-toggle-readonly-knob-icon-color: #555555;
+
+    --cc-section-category-border: #555555;
+
+    --cc-cookie-category-block-bg: #3d3d3d;
+    --cc-cookie-category-block-border: #3d3d3d; 
+    --cc-cookie-category-block-hover-bg: #4d4d4d;
+    --cc-cookie-category-block-hover-border: #4d4d4d;
+    
+    --cc-cookie-category-expanded-block-bg: #3d3d3d;
+    --cc-cookie-category-expanded-block-hover-bg: #4d4d4d;
+
+    --cc-footer-bg: #2d2d2d;
+    --cc-footer-color: #e5e5e5;
+    --cc-footer-border-color: #2d2d2d; 
+}
+.cm__body{
+    max-width: 90% !important;
+    flex-direction: row !important;
+    align-items: center !important;
+
+}
+
+.cm__desc{
+    max-width: 70rem !important;
+}
+
+.cm__btns{
+    flex-direction: row-reverse !important;
+    gap:10px !important;
+    padding-top: 3.4rem !important;
+}
+
+@media only screen and (max-width: 1400px) {
+    .cm__body{
+        max-width: 90% !important;
+        flex-direction: column !important;
+        align-items: normal !important;
+    }
+
+    .cm__btns{
+        padding-top: 1rem !important;
+    }
+}
+
+/* Toggle visibility fixes */
+#cc-main .section__toggle {
+    opacity: 0 !important; /* Keep invisible but functional */
+}
+
+#cc-main .toggle__icon {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+}
+
+#cc-main .toggle__icon-circle {
+    display: block !important;
+    position: absolute !important;
+    transition: transform 0.25s ease !important;
+}
+
+#cc-main .toggle__icon-on,
+#cc-main .toggle__icon-off {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    position: absolute !important;
+    width: 100% !important;
+    height: 100% !important;
+}
+
+/* Ensure toggles are visible in both themes */
+#cc-main .toggle__icon {
+    background: var(--cc-toggle-off-bg) !important;
+    border: 1px solid var(--cc-toggle-off-bg) !important;
+}
+
+#cc-main .section__toggle:checked ~ .toggle__icon {
+    background: var(--cc-toggle-on-bg) !important;
+    border: 1px solid var(--cc-toggle-on-bg) !important;
+}
+
+/* Ensure toggle text is visible */
+#cc-main .pm__section-title {
+    color: var(--cc-primary-color) !important;
+}
+
+#cc-main .pm__section-desc {
+    color: var(--cc-secondary-color) !important;
+}
+
+/* Make sure the modal has proper contrast */
+#cc-main .pm {
+    background: var(--cc-bg) !important;
+    color: var(--cc-primary-color) !important;
+}