Consolidate GameFoundryStudio accordion styling and add legal footer navigation - PR_26152_012-accordion-footer-legal-top

Author: ToolboxAid

GameFoundryStudio/assets/css/gamefoundrystudio.css

@@ -304,13 +304,40 @@
   color: var(--muted)
 }
 
-.footer .container {
+.footer__inner {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap
 }
 
+.footer__brand,
+.footer__legal,
+.footer__links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 16px;
+  align-items: center
+}
+
+.footer__legal h2 {
+  margin: 0;
+  color: var(--gold);
+  font-size: 13px;
+  letter-spacing: .16em;
+  text-transform: uppercase
+}
+
+.footer__links a {
+  color: var(--muted);
+  font-size: 14px
+}
+
+.footer__links a:hover,
+.footer__links a:focus-visible {
+  color: var(--gold)
+}
+
 .field {
   display: flex;
   flex-direction: column;
@@ -468,17 +495,28 @@ details.vertical-accordion summary::-webkit-details-marker {
   display: none
 }
 
-details.vertical-accordion summary:after {
-  content: "";
+details.vertical-accordion summary:after,
+.horizontal-accordion-toggle,
+.return-to-top {
+  --accordion-button-border: var(--line);
+  --accordion-button-background: var(--panel-soft);
+  --accordion-button-color: var(--gold);
+  min-width: 20px;
   width: 20px;
   height: 20px;
-  border: 1px solid var(--line);
+  padding: 0;
+  border: 1px solid var(--accordion-button-border);
   border-radius: var(--radius-pill);
-  background: var(--panel-soft);
-  color: var(--gold);
+  background: var(--accordion-button-background);
+  color: var(--accordion-button-color);
+  line-height: 1;
   display: inline-grid;
   place-items: center;
-  flex: 0 0 auto;
+  flex: 0 0 auto
+}
+
+details.vertical-accordion summary:after {
+  content: "";
   background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
   background-position: calc(50% - 3.5px) 50%, calc(50% + 3.5px) 50%;
   background-size: 7px 7px;
@@ -505,14 +543,6 @@ details.vertical-accordion[open] summary:active:after {
 
 .horizontal-accordion-toggle {
   margin-left: auto;
-  min-width: 20px;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  border-radius: var(--radius-pill);
-  background: var(--panel-soft);
-  color: var(--gold);
-  line-height: 1;
   font-size: 0;
   overflow: hidden;
   position: relative
@@ -630,13 +660,47 @@ details.vertical-accordion[open] summary:active:after {
 }
 
 .tool-column[class*="tool-group-"] .horizontal-accordion-toggle {
-  border-color: var(--tool-group-accent);
-  color: var(--tool-group-color)
+  --accordion-button-border: var(--tool-group-accent);
+  --accordion-button-color: var(--tool-group-color)
 }
 
 .tool-column[class*="tool-group-"] details.vertical-accordion summary:after {
-  border-color: var(--tool-group-accent);
-  color: var(--tool-group-color)
+  --accordion-button-border: var(--tool-group-accent);
+  --accordion-button-color: var(--tool-group-color)
+}
+
+.return-to-top {
+  --accordion-button-border: var(--meaning-border, var(--line));
+  --accordion-button-background: var(--meaning-soft, var(--panel-soft));
+  --accordion-button-color: var(--meaning-color, var(--gold));
+  position: fixed;
+  right: 22px;
+  bottom: 22px;
+  z-index: var(--z-index-lg);
+  width: 44px;
+  height: 44px;
+  box-shadow: var(--shadow-md);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(10px);
+  transition: opacity .2s ease, transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease
+}
+
+.return-to-top span {
+  transform: translateY(-1px)
+}
+
+.return-to-top.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0)
+}
+
+.return-to-top:hover,
+.return-to-top:focus-visible {
+  --accordion-button-border: var(--meaning-color, var(--gold));
+  --accordion-button-background: color-mix(in srgb, var(--meaning-color, var(--gold)) 24%, var(--panel));
+  outline: none
 }
 
 .tool-column.is-collapsed .tool-column-header {

GameFoundryStudio/assets/js/gamefoundry-partials.js

@@ -32,6 +32,10 @@
         docs: "docs/index.html",
         about: "about.html",
         faq: "faq.html",
+        "cookie-policy": "cookie-policy.html",
+        disclaimer: "disclaimer.html",
+        "privacy-policy": "privacy-policy.html",
+        "terms-legal": "terms.html",
         account: "account/index.html",
         branding: "account/branding.html",
         controls: "account/controls.html",
@@ -86,6 +90,21 @@
         });
     }
 
+    function wireReturnToTop(root) {
+        const button = root.querySelector("[data-return-to-top]");
+        if (!button) return;
+
+        function updateVisibility() {
+            button.classList.toggle("is-visible", window.scrollY > 280);
+        }
+
+        button.addEventListener("click", function () {
+            window.scrollTo({ top: 0, behavior: "smooth" });
+        });
+        window.addEventListener("scroll", updateVisibility, { passive: true });
+        updateVisibility();
+    }
+
     async function partialElement(partialName) {
         const partialPath = partials[partialName];
         if (!partialPath) return null;
@@ -101,6 +120,8 @@
         rewriteRootedPaths(element);
         if (partialName === "header-nav") {
             markActiveNavigation(element);
+        } else if (partialName === "footer") {
+            wireReturnToTop(element);
         }
         return element;
     }

GameFoundryStudio/assets/partials/footer.html

@@ -1,3 +1,20 @@
 <footer class="footer">
-    <div class="container"><span>© 2026 Game Foundry Studio</span><span>Build · Play · Share</span></div>
-</footer>
+    <div class="container footer__inner">
+        <div class="footer__brand">
+            <span>&copy; 2026 Game Foundry Studio</span>
+            <span>Build &middot; Play &middot; Share</span>
+        </div>
+        <nav class="footer__legal" aria-labelledby="footerLegalHeading">
+            <h2 id="footerLegalHeading">Legal</h2>
+            <div class="footer__links">
+                <a data-route="privacy-policy" href="privacy-policy.html">Privacy Policy</a>
+                <a data-route="terms-legal" href="terms.html">Terms &amp; Legal</a>
+                <a data-route="cookie-policy" href="cookie-policy.html">Cookie Policy</a>
+                <a data-route="disclaimer" href="disclaimer.html">Disclaimer</a>
+            </div>
+        </nav>
+        <button class="return-to-top" type="button" data-return-to-top aria-label="Return to top" title="Return to top">
+            <span aria-hidden="true">^</span>
+        </button>
+    </div>
+</footer>

GameFoundryStudio/cookie-policy.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Cookie Policy - Game Foundry Studio</title>
+    <meta name="description" content="Cookie Policy for Game Foundry Studio.">
+    <link rel="icon" href="assets/images/favicon.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="assets/css/styles.css">
+</head>
+
+<body>
+    <div data-partial="header-nav"></div>
+    <main>
+        <section class="page-title">
+            <div class="container">
+                <div class="kicker">Legal</div>
+                <h1>Cookie Policy</h1>
+                <p class="lede">How Game Foundry Studio may use browser storage, cookies, and similar technologies as
+                    account, creator, and publishing services are introduced.</p>
+            </div>
+        </section>
+        <section class="section">
+            <div class="container account-panel">
+                <aside class="side-menu">
+                    <a href="privacy-policy.html">Privacy Policy</a>
+                    <a href="terms.html">Terms &amp; Legal</a>
+                    <a class="active" href="cookie-policy.html">Cookie Policy</a>
+                    <a href="disclaimer.html">Disclaimer</a>
+                </aside>
+                <article class="card">
+                    <div class="card-body">
+                        <h2>Cookie and Storage Use</h2>
+                        <p>Game Foundry Studio may use cookies or local browser storage to remember site preferences,
+                            maintain account sessions, protect creator workflows, and improve platform reliability.</p>
+                        <p>Tool data should stay within the documented project, workspace, or tool contracts. Browser
+                            storage used by the site should not replace saved project files or publishing records.</p>
+                        <div class="callout"><strong>Current status:</strong> This policy page is a site placeholder
+                            for legal navigation and will be updated as production services are connected.</div>
+                    </div>
+                </article>
+            </div>
+        </section>
+    </main>
+    <div data-partial="footer"></div>
+    <script src="assets/js/gamefoundry-partials.js" defer></script>
+</body>
+
+</html>

GameFoundryStudio/disclaimer.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Disclaimer - Game Foundry Studio</title>
+    <meta name="description" content="Disclaimer for Game Foundry Studio.">
+    <link rel="icon" href="assets/images/favicon.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="assets/css/styles.css">
+</head>
+
+<body>
+    <div data-partial="header-nav"></div>
+    <main>
+        <section class="page-title">
+            <div class="container">
+                <div class="kicker">Legal</div>
+                <h1>Disclaimer</h1>
+                <p class="lede">Important notes about prototype tools, generated content, examples, and creator
+                    responsibility across Game Foundry Studio.</p>
+            </div>
+        </section>
+        <section class="section">
+            <div class="container account-panel">
+                <aside class="side-menu">
+                    <a href="privacy-policy.html">Privacy Policy</a>
+                    <a href="terms.html">Terms &amp; Legal</a>
+                    <a href="cookie-policy.html">Cookie Policy</a>
+                    <a class="active" href="disclaimer.html">Disclaimer</a>
+                </aside>
+                <article class="card">
+                    <div class="card-body">
+                        <h2>Use and Reliance</h2>
+                        <p>Game Foundry Studio pages, tools, examples, and generated outputs are provided for creator
+                            workflow exploration and should be reviewed before production use.</p>
+                        <p>Creators remain responsible for verifying game behavior, asset rights, publishing metadata,
+                            safety requirements, and any third-party integrations before release.</p>
+                        <div class="callout"><strong>Current status:</strong> This disclaimer is a site placeholder
+                            until full production legal terms are finalized.</div>
+                    </div>
+                </article>
+            </div>
+        </section>
+    </main>
+    <div data-partial="footer"></div>
+    <script src="assets/js/gamefoundry-partials.js" defer></script>
+</body>
+
+</html>

GameFoundryStudio/privacy-policy.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Privacy Policy - Game Foundry Studio</title>
+    <meta name="description" content="Privacy Policy for Game Foundry Studio.">
+    <link rel="icon" href="assets/images/favicon.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="assets/css/styles.css">
+</head>
+
+<body>
+    <div data-partial="header-nav"></div>
+    <main>
+        <section class="page-title">
+            <div class="container">
+                <div class="kicker">Legal</div>
+                <h1>Privacy Policy</h1>
+                <p class="lede">How Game Foundry Studio intends to handle account, creator, project, and platform data
+                    as the site grows.</p>
+            </div>
+        </section>
+        <section class="section">
+            <div class="container account-panel">
+                <aside class="side-menu">
+                    <a class="active" href="privacy-policy.html">Privacy Policy</a>
+                    <a href="terms.html">Terms &amp; Legal</a>
+                    <a href="cookie-policy.html">Cookie Policy</a>
+                    <a href="disclaimer.html">Disclaimer</a>
+                </aside>
+                <article class="card">
+                    <div class="card-body">
+                        <h2>Privacy Commitments</h2>
+                        <p>Game Foundry Studio is designed around explicit creator workflows. Project files, manifests,
+                            account data, and publishing details should be handled through documented contracts and
+                            visible user actions.</p>
+                        <p>Future production services may collect account details, project metadata, publishing
+                            settings, marketplace records, support requests, and security logs needed to operate the
+                            platform.</p>
+                        <div class="callout"><strong>Current status:</strong> This policy page is a site placeholder
+                            and should be reviewed by counsel before production launch.</div>
+                    </div>
+                </article>
+            </div>
+        </section>
+    </main>
+    <div data-partial="footer"></div>
+    <script src="assets/js/gamefoundry-partials.js" defer></script>
+</body>
+
+</html>