diff --git a/conservancy/content/copyleft-compliance/vizio-filing-press-release.html b/conservancy/content/copyleft-compliance/vizio-filing-press-release.html
index d1f4771a..266089ed 100644
--- a/conservancy/content/copyleft-compliance/vizio-filing-press-release.html
+++ b/conservancy/content/copyleft-compliance/vizio-filing-press-release.html
@@ -1,4 +1,4 @@
-{% extends "base_vizio.html" %}
+{% extends "base_vizio_og.html" %}
{% block subtitle %}Copyleft Compliance Projects - {% endblock %}
{% block submenuselection %}VizioMain{% endblock %}
{% block content %}
diff --git a/conservancy/content/copyleft-compliance/vizio.html b/conservancy/content/copyleft-compliance/vizio.html
index 2b901643..7efac6bc 100644
--- a/conservancy/content/copyleft-compliance/vizio.html
+++ b/conservancy/content/copyleft-compliance/vizio.html
@@ -1,71 +1,131 @@
{% extends "base_vizio.html" %}
+{% load static %}
{% block subtitle %}Copyleft Compliance Projects - {% endblock %}
{% block submenuselection %}VizioMain{% endblock %}
-{% block content %}
-Current Status of Vizio Case
-
-The case's expected trial date is in September 2025.
-
-History of Vizio Case
-On October 19, 2021, SFC filed a third-party beneficiary contract lawsuit against Vizio in California State Court in Orange County, CA. Our complaint demands no financial compensation but instead asks for what truly matters with regard to software rights and freedom: the “specific performance” (fulfilling a contract requirement in exactly the way the contract specifies) of production of complete, corresponding source code (CCS) — as defined in the various GPL Agreements (such as GPLv2 and LGPLv2.1).
-
-Vizio has still not provided CCS for their televisions to SFC, and so our lawsuit continues. Instead, Vizio attempted to “remove” the case to federal court (arguing that copyright claims preempted our third-party beneficiary contract claim). We succeeded in our motion to remand the case back to state court ; the federal judge agreed that our case included an “extra element” not covered by copyright.
-
-After several months of litigation back in state court, Vizio filed for summary judgment in the state court again arguing copyright preemption. The state court is not bound by the federal court's ruling against preemption, so Vizio was able to essentially re-argue its motion to dismiss. (Vizio also argued that the GPL Agreements have no third-party beneficiaries — which was the first time Vizio has tried to attack these claims substantively). On 29 December 2023, the judge denied Vizio's motion for summary judgment
-
-Portions of Interest from the Docket in the Vizio Case
-
-Below are documents from the docket(s) in this SFC v. Vizio case of interest,
-provided in (roughly) chronological order:
+{% block case-info %}
+Software Freedom Conservancy v. Vizio Inc.
-SFC's
-Original Complaint (2021-10-19) Removal (to federal court) and Remand (to state court) Vizio's Motion for Summary Judgment SFC's
-First Amended Complaint (2024-01-10) Mediation attempts and procedural matters in discovery
- Linux Foundation (Vizio witness) attempt to limit SFC's questions Modern smart TVs come with software that tracks viewing habits to deliver targeted advertising directly on the TV screen. Software Freedom Conservancy purchased a Vizio TV to develop an open-source version of the operating system that was more customizable and didn't track users to show them ads. This Vizio TV runs on Linux, an operating system that legally requires manufac-turers to share the code that lets users customize their devices. When SFC asked Vizio to provide the source code, they refused. SFC sued Vizio in the Orange County Superior Court to receive this essential information.
+When Vizio chose to use Linux in its TVs, it accepted Linux's reciprocal contract, which gives purchasers all the rights that Vizio had, to modify and install the software onto the Vizio TV. However, when SFC asked Vizio to hold up its end of the bargain, by giving SFC the source code that SFC was owed so SFC could make the TVs better serve their users, Vizio refused. After multiple years of back and forth with Vizio, SFC knew the only way Vizio would comply with the license and give SFC the source code was to sue Vizio. So in October 2021 SFC sued Vizio in California state court.
+The lawsuit is filed as a third-party beneficiary of GPLv2 (the license and contract that Linux and other software uses). This means that, as a purchaser of a Vizio TV, SFC has rights in the contract that Vizio has with the developers of Linux and other software Vizio uses. SFC seeks to confirm in the courts that purchasers of devices running Linux and other software with reciprocal licenses like GPLv2 have a legal right to ask for, and receive, the source code for those devices, so they can adapt the software to their needs, and make practical use of those adaptations by being able to install those changes back onto the devices they purchased.
+We have already seen the huge benefits that GPLv2 provides to device purchasers through projects
+like OpenWrt, which allows owners of broadband routers to customize the functionality and features of these devices to better serve them. As an example, users can install ad-blocking software on their router to keep invasive advertising away from their children. This is just one of many ways that companies complying with the GPL is important, and why SFC wants to confirm this third-party right to source code in the courts.
+{% endblock %}
+
+{% block news-coverage-link %}
+
+{% endblock %}
+
+{% block why-case-matters %}
+This case could help establish whether you, as a consumer, have the right to modify and improve the technology you've purchased rather than being forced to use it exactly as manufacturers dictate.
+{% endblock %}
+
+{% block legal-docs %}
+
+
+ SFC’s Original Complaint [Fall 2021]
+
+
+
+
+
+
+ Removal and Remand (federal to state) [Fall 2021]
+
+
+
+
+
+
+ Vizio's Motion for Summary Judgment [Spring 2023]
+
+
+
+
+
+
+ SFC's First Amended Complaint [Spring 2022]
+
+
+
+
+
+ SFC's Motion for Summary Adjudication [Winter 2024]
+
+
+
+
+
+ Mediation attempts and procedural matters in discovery [Date TBC]
+
+
+
-SFC's Second Motion for Summary Adjudication
- SFC's Second Motion for Summary Adjudication (2025-05-23)
+
+ SFC's Second Motion for Summary Adjudication [Date TBC]
- SFC's motion to set hearing date on its Motion for Summary Adjudication
+
+
+
+
+ SFC's motion to set hearing date on its Motion for Summary Adjudication [Date TBC]
-
-
-
-MEDIA CONTACT
-
-You can reach out media team at <media@sfconservancy.org>
-
+
{% endblock %}
+
+
+
+{% block resources %}
+
+FAQ / Photo Assets / Glossary
+Press Release / Media Contact / Press Kit
+
+{% endblock %}
+
diff --git a/conservancy/content/press/qanda.html b/conservancy/content/press/qanda.html
index 3e0d6aa1..f289448d 100644
--- a/conservancy/content/press/qanda.html
+++ b/conservancy/content/press/qanda.html
@@ -1,4 +1,4 @@
-{% extends "base_vizio.html" %}
+{% extends "base_vizio_og.html" %}
{% block subtitle %}Press - {% endblock %}
{% block submenuselection %}VizioQandA{% endblock %}
{% block content %}
diff --git a/conservancy/static/css/conservancy.css b/conservancy/static/css/conservancy.css
index efd76ea3..0ae3710e 100644
--- a/conservancy/static/css/conservancy.css
+++ b/conservancy/static/css/conservancy.css
@@ -1,6 +1,6 @@
-* { margin: 0; padding: 0; }
+* { margin: 0; padding: 0; box-sizing: border-box;}
img { border: 0; }
-body { margin: 0; padding: 0; }
+body { margin: 0; padding: 0; background: var(--chino); }
.clear { clear: both; }
p, h1, h2, h3, h4, h5, h6, #mainContent ul, #mainContent ol {
@@ -9,20 +9,54 @@ p, h1, h2, h3, h4, h5, h6, #mainContent ul, #mainContent ol {
}
p, li {
- line-height: 1.6;
+ line-height: 1.42;
+}
+
+p {
+ font-size: 1.1rem;
+ font-weight: 375;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-weight: 550;
+}
+
+h1 {
+ font-size: 3rem;
+ line-height: 1.05;
}
html {
- /* Standard colorss. */
- --khaki-green: #587733;
- --light-green: #afe478;
- --washed-green: #daf4be;
- --light-blue: #92d4d1;
- --washed-blue: #ddfbfa;
- --navy: #224c57;
- --orange: #ec6343;
+ /* Standard colors. */
--orange-dim: #e05340;
--orange-dimmer: #ce3520;
+
+ /*MT: Updated in Julu 2025, some duplicated to maximize compatibility with old color variable names.*/
+ --orange: #DB6922;
+ --light-orange: #FAC19E; /* Added for consistency */
+ --washed-orange: #FAC19E;
+ --green:#5E9622;
+ --khaki-green: #5E9622 ;
+ --washed-green:#BCE68F;
+ --light-green: #BCE68F;
+ --navy:#154666;
+ --washed-blue:#8DC4E7;
+ --light-blue:#8DC4E7;
+ --teal:#22967F;
+ --washed-teal:#8FE6D4;
+
+ --black: #292A2E;
+ --grey: #5E616B;
+ --chino:#F3EFE3;
+ --white:#ffffff;
+
+ /* MT: Variables for some other commonly reused styling in the site */
+ --corner: 6px;
+ --border: solid 2px var(--black);
+ --btn-padding: 9px 21px 7px 20px; /* Sets padding for nav touch targets and buttons*/
+ --max-site-width: 1440px; /* This will set the max width for the content on the site*/
+ --sidebar-padding: 42px 40px;
+ --court-case-padding: 37px 35px;
}
/* Some Tachyons-like classes to apply those standard colors. */
@@ -32,9 +66,843 @@ html {
.b--light-blue { border-color: var(--light-blue); }
.navy { color: var(--navy); }
+
+/* ==========================================================================
+Custom Font (MT/2025)
+
+The whole site now ues Atkinson Hyperlegible Next. This is an open-source
+font designed by the Braille Institue to improve legibility and readability
+for individuals with low vision.
+========================================================================== */
+
+@font-face {
+ font-family: 'AtkinsonHyperlegibleNext';
+ src: url('../fonts/AtkinsonHyperlegibleNextVF-Variable.woff2') format('woff2-variations');
+ font-weight: 300 700;
+ font-stretch: 100% 100%;
+ font-display: swap;
+}
+
+/* ==========================================================================
+RESPONSIVE GRID SYSTEM (MT/2025)
+========================================================================== */
+
+.grid {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ grid-gap: 20px;
+}
+
+/* Mobile breakpoint - below 800px */
+@media only screen and (max-width: 66.999em) {
+ .mobi0 { display: none; }
+ .mobi1 { grid-column-end: span 12; }
+ .mobi2 { grid-column-end: span 6; }
+ .mobi3 { grid-column-end: span 4; }
+ .mobi4 { grid-column-end: span 3; }
+ .mobi6 { grid-column-end: span 2; }
+ .mobi12 { grid-column-end: span 1; }
+}
+
+@media only screen and (min-width: 67em) {
+ .desk0 { display: none; }
+ .desk1 { grid-column-end: span 12; }
+ .desk2 { grid-column-end: span 6; }
+ .desk3 { grid-column-end: span 4; }
+ .desk4 { grid-column-end: span 3; }
+ .desk6 { grid-column-end: span 2; }
+ .desk8 { grid-column-end: span 8; }
+ .desk12 { grid-column-end: span 1; }
+}
+
+/* This class is for accessibility: visually hide content but keep for screen readers */
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+/* =============================================================================================
+NOTIFICATION BAR (MT/2025)
+
+Adds a notification bar to the top of the page. This is used to display important information.
+================================================================================================ */
+
+a.notification-bar {
+ display: block;
+ background-color: var(--washed-green);
+ width: 100vw;
+ text-align: center;
+ padding: 10px 0;
+ font-size: 1rem;
+ font-weight: 450;
+ color: var(--black);
+ text-decoration: none;
+ border-top: var(--border);
+ cursor: pointer;
+}
+
+a.notification-bar:hover {
+ text-decoration: underline;
+}
+
+a.notification-bar svg {
+ height: .9rem;
+ width: .9rem;
+ fill: var(--black);
+ transform: translateY(3px);
+}
+
+a.notification-bar:hover svg {
+ transform: translateY(3px);
+}
+
+/* =============================================================================================
+HEADER & PRIMARY NAVIGATION BAR (Desktop First) (MT/2025)
+================================================================================================ */
+
+.header-container {
+ background-color: var(--white);
+ position: relative;
+ z-index: 100;
+ padding: 1.55rem 0;
+ border-top: solid 2px var(--black);
+ border-bottom: solid 2px var(--black);
+ overflow-x: visible;
+ overflow-y: visible;
+}
+
+/* Make header sticky on mobile */
+@media screen and (max-width: 66.999em) {
+ .header-container {
+ position: sticky;
+ top: 0;
+ z-index: 200;
+ }
+}
+
+.header-inner {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0 1rem;
+ max-width: var(--max-site-width);
+ margin: 0 auto;
+}
+
+
+
+#primary-nav-bar {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ align-items: center;
+ width: 100%;
+}
+
+.header-logo {
+ height: 60px;
+ width: auto;
+}
+
+a.header-logo-link:hover {
+ background: var(--white);
+}
+
+/* Desktop Main Menu List */
+#main-desktop-list {
+ list-style: none;
+ text-transform: uppercase;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-wrap: wrap;
+ flex-grow: 1;
+ justify-content: flex-end;
+}
+
+#main-desktop-list li {
+ position: relative;
+ padding-left: 5px;
+ white-space: nowrap;
+}
+
+#main-desktop-list li > a {
+ display: inline-block;
+ color: var(--black);
+ text-decoration: none;
+ text-transform: none;
+ font-size: 1.2rem;
+ font-weight: 550;
+ padding: var(--btn-padding);
+ border-radius: var(--corner);
+ transition: color 0.2s ease-in-out;
+}
+
+#main-desktop-list > li > a:hover,
+#main-desktop-list > li:hover > a {
+ color: var(--grey);
+ background: none;
+}
+
+.menu-arrow {
+ vertical-align: middle;
+ width: 1rem;
+ height: 1rem;
+ transform: translateY(-1px);
+ transition: transform 75ms ease-in-out, fill 0.2s ease-in-out;
+ transform-origin: center center;
+}
+
+
+#main-desktop-list li a:hover .menu-arrow,
+#main-desktop-list li:hover .menu-arrow {
+ transform: rotate(180deg);
+}
+
+#main-desktop-list > li > a:hover .menu-arrow,
+#main-desktop-list > li:hover > a .menu-arrow {
+ fill: var(--grey);
+}
+
+
+/* Submenu styling (desktop) */
+#main-desktop-list li ul.dropdown-menu-list {
+ display: none;
+ z-index: 1000;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-2px);
+ width: 340px;
+ text-transform: none;
+ background: var(--chino);
+ list-style: none;
+ border: var(--border);
+}
+
+
+#main-desktop-list li:hover .dropdown-menu-list {
+ display: block;
+}
+
+#main-desktop-list li ul.dropdown-menu-list li {
+ padding: 0;
+ width: 100%;
+ border-bottom: var(--border);
+}
+
+#main-desktop-list li ul.dropdown-menu-list li:hover {
+ background: var(--washed-green);
+}
+
+
+#main-desktop-list li ul.dropdown-menu-list li:last-child {
+ border-bottom: none;
+}
+
+#main-desktop-list li ul.dropdown-menu-list a {
+ display: block;
+ border: none;
+ padding: 29px 30px 27px;
+}
+
+#main-desktop-list li ul.dropdown-menu-list a h3 {
+ font-size: 1.1rem;
+ margin: 0;
+ padding: 0;
+ font-weight: 550;
+ line-height: 1;
+ margin-bottom: 5px;
+}
+
+#main-desktop-list li ul.dropdown-menu-list p {
+ max-width: 100%;
+ text-wrap: wrap;
+ margin-block-end: 0;
+ color: var(--grey);
+ font-size: 0.88rem;
+ font-weight: 300;
+ line-height: 1.2;
+}
+
+
+#main-desktop-list li a.desktop-donate-btn {
+ background: var(--washed-orange);
+ border: var(--border);
+ transition: all 200ms ease-in-out;
+}
+
+#main-desktop-list li a.desktop-donate-btn:hover {
+ background: var(--orange);
+ color: var(--white) !important;
+}
+
+
+
+/* =============================================================================================
+MOBILE NAVIGATION (Hidden by default, shown via media query/JS) (MT/2025)
+================================================================================================ */
+
+
+/* Mobile Nav Overlay (the full screen menu) */
+#main-mobile-nav {
+ display: flex;
+ position: fixed;
+ top: 0;
+ right: 0;
+ width: 100vw;
+ height: 100%;
+ background-color: var(--chino);
+ color: white;
+ overflow-y: auto;
+ z-index: 300;
+ transform: translateX(100%);
+ transition: transform 0.3s ease-out;
+ -webkit-overflow-scrolling: touch;
+ flex-direction: column;
+ visibility: hidden;
+}
+
+/* Class to apply when the mobile nav is OPEN */
+#main-mobile-nav.is-open {
+ transform: translateX(0);
+ visibility: visible;
+}
+
+/* Mobile Nav Header (logo and close button) */
+.mobile-nav-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.5rem 1.5rem;
+ background-color: var(--white);
+ border-bottom: var(--border);
+ border-top: var(--border);
+ position: sticky;
+ top: 0;
+ z-index: 310;
+}
+
+.mobile-logo-link img {
+ height: 50px; /* Smaller logo for mobile menu */
+ width: auto;
+}
+
+#mobile-nav-close {
+ background: transparent;
+ border: none;
+ color: var(--black);
+ font-size: 2rem; /* Larger 'X' icon */
+ padding: 0.5rem;
+ cursor: pointer;
+ transition: color 0.2s ease-in-out;
+ transform: translateY(5px);
+}
+
+#mobile-nav-close:hover {
+ color: var(--orange);
+}
+
+.mobile-nav-content {
+ flex-grow: 1;
+}
+
+.mobile-main-menu {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.mobile-main-menu > li {
+ border-bottom: var(--border); /* Separator between main items */
+ background-color: var(--white);
+}
+
+.mobile-main-menu > li > a {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 25px 30px 22px 20px;
+ color: var(--black);
+ text-decoration: none;
+ font-size: 1.2rem;
+ font-weight: 550;
+ text-transform: none;
+}
+
+.mobile-main-menu > li > a .menu-arrow {
+ transition: transform 0.3s ease; /* For accordion arrow rotation */
+ transform-origin: center center;
+ fill: var(--black);
+}
+
+/* Mobile Submenu Styling (Accordion style) */
+.mobile-main-menu ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.3s ease-out; /* Smooth expansion */
+}
+
+.mobile-main-menu ul li {
+ border-bottom: none;
+}
+
+.mobile-main-menu ul li a,
+.mobile-main-menu .dropdown-menu-list li a,
+#main-mobile-nav .mobile-main-menu ul li a,
+#main-mobile-nav .mobile-main-menu .dropdown-menu-list li a {
+ display: block;
+ padding: 18px 20px 15px;
+ color: var(--black);
+ text-decoration: none;
+ text-transform: none;
+ background-color: var(--chino);
+ border-top: solid 2px var(--white);
+}
+
+/* Target h3 elements within mobile submenu links */
+.mobile-main-menu ul li a h3,
+.mobile-main-menu .dropdown-menu-list li a h3,
+#main-mobile-nav .mobile-main-menu ul li a h3,
+#main-mobile-nav .mobile-main-menu .dropdown-menu-list li a h3 {
+ font-weight: 450;
+ font-size: 1.1rem;
+ margin: 0;
+ padding: 0;
+}
+
+/* Target p elements within mobile submenu links */
+.mobile-main-menu ul li a p,
+.mobile-main-menu .dropdown-menu-list li a p,
+#main-mobile-nav .mobile-main-menu ul li a p,
+#main-mobile-nav .mobile-main-menu .dropdown-menu-list li a p {
+ color: var(--grey);
+ font-size: 0.88rem;
+ font-weight: 300;
+ line-height: 1.2;
+ margin: 0;
+ padding-bottom: 6px;
+}
+
+.mobile-main-menu ul li:first-child a,
+.mobile-main-menu .dropdown-menu-list li:first-child a,
+#main-mobile-nav .mobile-main-menu ul li:first-child a,
+#main-mobile-nav .mobile-main-menu .dropdown-menu-list li:first-child a {
+ border-top: var(--border); /* First submenu item gets the main border */
+}
+
+/* Mobile Donate Button inside the menu */
+.mobile-main-menu .mobile-donate {
+ padding: 30px 20px 27px;
+}
+.mobile-main-menu .mobile-donate a {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--btn-padding);
+ background-color: var(--washed-orange);
+ transition: background-color 0.2s ease-out;
+ color: var(--black);
+ text-decoration: none;
+ text-transform: none;
+ font-size: 1.2rem;
+ font-weight: 550;
+ border-radius: var(--corner);
+ text-align: center;
+ width: 100%;
+ border: var(--border);
+ margin: 0 auto;
+ justify-content: center;
+}
+.mobile-donate a:hover {
+ background-color: var(--light-orange); /* Lighter orange on hover */
+}
+
+/* =============================================================================================
+RESPONSIVE ADJUSTMENTS (Media Queries) (MT/2025)
+================================================================================================ */
+
+@media screen and (min-width: 67em) { /* Uses existing bigscreen breakpoint */
+ .header-inner {
+ padding: 0 1rem;
+ }
+
+ /* Add specific padding for screens 1440px and wider */
+ @media screen and (min-width: 1440px) {
+ .header-inner {
+ padding: 0;
+ }
+ }
+
+ #mobile-menu-toggle {
+ display: none !important;
+ }
+
+ #primary-nav-bar #main-desktop-list,
+ #primary-nav-bar .desktop-donate-btn {
+ display: flex !important;
+ }
+
+ #main-mobile-nav {
+ visibility: hidden !important;
+ }
+}
+
+@media screen and (max-width: 66.999em) {
+ #primary-nav-bar #main-desktop-list,
+ #primary-nav-bar .desktop-donate-btn {
+ display: none !important;
+ }
+
+ #mobile-menu-toggle {
+ display: block !important;
+ margin-left: auto;
+ background: transparent;
+ border: none;
+ padding: 0.5rem;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ }
+
+ #mobile-menu-toggle:hover {
+ transform: scale(1.1);
+ }
+
+ .header-logo-link {
+ margin-right: 0; /* Remove extra margin on mobile logo */
+ }
+ .header-logo {
+ height: 50px; /* Smaller logo for mobile header */
+ }
+}
+
+
+
+
+/* =============================================================================================
+Site Footer (MT/2025)
+================================================================================================ */
+
+.footer-container {
+ width: 100%;
+ background: var(--white);
+}
+
+/* Decorative line above footer */
+.footer-container::before {
+ content: "";
+ display: block;
+ height: 21px;
+ background-color: var(--green);
+ border-top: var(--border);
+ border-bottom: var(--border);
+}
+
+.footer-inner {
+ max-width: var(--max-site-width);
+ margin: 45px auto 40px;
+ padding: 0;
+ display: grid;
+ grid-template-areas:
+ "logo nav"
+ "social charity";
+ grid-template-columns: 1fr 2fr;
+ grid-template-rows: auto auto;
+ grid-row-gap: 60px
+}
+
+@media screen and (max-width: 1440px) and (min-width: 67em) {
+ .footer-inner {
+ margin-left: 1rem;
+ margin-right: 1rem;
+ }
+}
+
+.footer-inner #footer-logo-link { grid-area: logo;}
+.footer-inner #footer-logo-link:hover { background: var(--white); }
+
+.footer-inner .footer-nav {
+ grid-area: nav;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ align-items: flex-end;
+ text-align: right;
+}
+
+.footer-nav ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ justify-content: flex-end;
+}
+
+.footer-nav li {
+ position: relative;
+ white-space: nowrap;
+}
+
+.footer-nav a {
+ display: inline-block;
+ color: var(--black);
+ text-decoration: none;
+ font-size: 1.2rem;
+ font-weight: 450;
+ padding: var(--btn-padding);
+ border-radius: var(--corner);
+ transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
+}
+
+.footer-nav a:hover,
+.footer-nav a:focus {
+ text-decoration: underline;
+ background: none;
+}
+
+#footer-donate-btn {
+ background: var(--washed-orange);
+ border: var(--border);
+ color: var(--black);
+ text-decoration: none;
+ font-size: 1.2rem;
+ font-weight: 450;
+ padding: var(--btn-padding);
+ border-radius: var(--corner);
+ transition: all 200ms ease-in-out;
+ align-self: flex-end;
+}
+
+#footer-donate-btn:hover,
+#footer-donate-btn:focus {
+ text-decoration: none;
+ background: var(--orange);
+ color: var(--white);
+}
+
+.footer-inner .charity-info {
+ grid-area: charity;
+ text-align: right;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: flex-end;
+}
+
+
+.footer-inner .charity-info {
+ grid-area: charity;
+}
+
+.footer-inner .charity-info p {
+ font-size: 0.9rem;
+ font-weight: 400;
+ margin-bottom: 0;
+}
+
+.footer-inner .social-links { grid-area: social; }
+
+
+.footer-container .social-links a {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 3em;
+ height: 3em;
+ margin: 0 0.25em;
+ border-radius: var(--corner);
+ border: var(--border);
+ box-sizing: border-box;
+}
+.footer-container .social-x { background:#C9CACF }
+.footer-container .social-facebook { background: var(--washed-blue); }
+.footer-container .social-youtube { background: #FA9E9E; }
+.footer-container .social-mastodon { background: var(--washed-green); }
+
+.footer-container .social-x:hover,
+.footer-container .social-x:focus {
+ background: #333333;
+}
+.footer-container .social-facebook:hover,
+.footer-container .social-facebook:focus {
+ background: #187BBA;
+}
+.footer-container .social-youtube:hover,
+.footer-container .social-youtube:focus {
+ background: #CC2929;
+}
+.footer-container .social-mastodon:hover,
+.footer-container .social-mastodon:focus {
+ background: var(--green);
+}
+
+.footer-container .social-links .fa-icon {
+ display: block;
+ width: 1.375em;
+ height: 1.375em;
+ fill: var(--black);
+ transition: color 0.2s, background 0.2s;
+}
+
+.footer-container .social-links a:hover .fa-icon,
+.footer-container .social-links a:focus .fa-icon {
+ transform: scale(0.99);
+ fill: var(--white);
+}
+
+.site-footer-info {
+ display: grid;
+ grid-template-areas: "privacy cc cclogo";
+ grid-template-columns: 4fr 7fr auto;
+ margin-top: 1rem;
+ width: 100%;
+ background: var(--chino);
+ border-top: var(--border);
+ border-bottom: var(--border);
+}
+
+.site-footer-info p {
+ font-size: 0.9rem;
+ line-height: 1.2;
+ margin: 0;
+}
+
+.site-footer-info .privacy-policy {
+ grid-area: privacy;
+ padding: 11px 10px 8px;
+}
+
+.site-footer-info .cc-license {
+ grid-area: cc;
+ text-align: right;
+ border-left: var(--border);
+ border-right: var(--border);
+ height: 100%;
+ padding: 11px 10px 10px;
+}
+
+.site-footer-info a.cc-logo {
+ grid-area: cclogo;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+
+@media screen and (max-width: 66.999em) {
+
+
+ .footer-container .footer-inner {
+ grid-template-areas:
+ "logo"
+ "charity"
+ "social";
+ grid-template-columns: 1fr;
+ grid-template-rows: auto auto auto;
+ grid-row-gap: 20px;
+ padding: 0 80px;
+ text-align: center;
+ align-items: center;
+ justify-items: center;
+ margin-top: 25px;
+ margin-bottom: 20px;
+ }
+
+ .footer-container .footer-inner .footer-nav {
+ display: none;
+ }
+
+ .footer-container .footer-inner .footer-logo {
+ height: 50px;
+ justify-self: center;
+ }
+
+ .footer-container .footer-inner .social-links {
+ justify-self: center;
+ display: flex;
+ justify-content: center;
+ }
+
+ .footer-container .footer-inner .social-links a {
+ width: 2.5rem;
+ height: 2.5rem;
+ }
+
+ .footer-container .footer-inner .charity-info {
+ justify-self: center;
+ text-align: center;
+ align-items: center;
+ padding: 0 px;
+ }
+
+ .footer-container .footer-inner .charity-info p {
+ line-height: 1.2;
+ }
+
+ .footer-container .footer-inner .charity-info p {
+ text-align: center;
+ }
+
+ .site-footer-info {
+ grid-template-areas:
+ "cclogo"
+ "cc"
+ "privacy";
+ grid-template-columns: 1fr;
+ grid-template-rows: auto auto auto;
+ }
+
+ .site-footer-info a.cc-logo:hover {
+ background: none;
+ }
+
+ .site-footer-info img {
+ margin: 10px auto 0;
+ }
+
+ .site-footer-info .cc-license p,
+ .site-footer-info .privacy-policy p {
+ text-align: center !important;
+ }
+
+ .site-footer-info .cc-license {
+ border-left: none;
+ border-right: none;
+ border-bottom: var(--border);
+ padding: 0 20px 20px;
+ }
+
+
+
+
+}
+
+/* =============================================================================================
+end of footer
+================================================================================================ */
+
+
+.icon {
+ width: 40px;
+ height: 40px;
+ color: var(--black);
+}
+
body {
/* Native font stack as per Bootstrap 5.1. */
font-family:
+ 'AtkinsonHyperlegibleNext',
system-ui,
-apple-system,
"Segoe UI",
@@ -44,17 +912,17 @@ body {
"Liberation Sans",
sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
- font-size: .875rem;
- color: #333;
+ font-size: 1.125rem;
+ font-weight: 400;
+ color: var(--black);
}
a {
- text-decoration: none;
- color: var(--navy);
+ text-decoration: underline;
transition: all .1s ease-out;
- font-weight: bold;
+ color: var(--black);
}
-a:hover { text-decoration: underline; }
+a:hover { background: var(--washed-green); }
/* Missing links */
a, form { position: relative; }
@@ -171,6 +1039,9 @@ body > header {
}
}
+
+
+
/* Navigation bar */
#navbar-outer {
background: var(--navy);
@@ -328,94 +1199,128 @@ body > header {
border-radius: 16px;
}
+#container {
+ display: grid;
+ grid-template-areas: "main sidebar";
+ grid-template-columns: 7fr 4fr;
+ grid-gap: 2rem;
+ width: 100%;
+ margin: 0 auto;
+ margin-block-start: 0.83em;
+ margin-block-end: 0.83em;
+ max-width: var(--max-site-width);
+ padding: 60px 0;
+}
+
+@media screen and (max-width: 1440px) and (min-width: 67em) {
+ #container {
+ padding: 0 25px;
+ }
+
+}
+
+@media screen and (max-width: 66.999em) {
+ #container {
+ grid-template-columns: 1fr;
+ grid-template-areas: "main" "sidebar";
+ padding: 60px 20px;
+ }
+}
+
+
#container #mainContent {
- max-width: 50em;
- margin: 0 0 2rem;
- padding: 0;
- background: #ffffff;
- flex: 1 1 auto;
+ grid-area: main;
+ margin: 0 0 2rem;
+ padding: 0;
+ flex: 1 1 auto;
}
#container #sidebar {
- background-color: #e6eae1;
- padding: 1px 0.5rem 2rem;
- margin: 1rem -1rem 0;
+ grid-area: sidebar;
+ background-color: var(--washed-green);
+ border-radius: var(--corner);
+ border: var(--border);
+ padding: var(--sidebar-padding);
+ margin: 1rem 0 0;
}
@media screen and (min-width: 30em) {
- #container {
- display: flex;
- }
- #container #sidebar {
- flex: 1 0 15em;
- margin: 1rem 0rem 1rem 2rem;
- }
+
}
#container #sidebar li {
- text-align: center;
- list-style: none;
- padding: 3px 10px 3px 10px;
- margin: 5px;
- border: 1px solid #CCC;
- background: #eaf1f1;
- background: -moz-linear-gradient(top, #fff, #eaf1f1);
- background: -webkit-linear-gradient(top, #fff, #eaf1f1);
- background: linear-gradient(to bottom, #fff, #eaf1f1);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eaf1f1', GradientType=0);
+ list-style: none;
+ margin-bottom: 0.8rem;
}
-#container #sidebar li a:hover { background: #577632; color: #fff; }
-#container #sidebar.Sponsors ul li.Sponsors,
-#container #sidebar.Directors ul li.Directors,
-#container #sidebar.Eval ul li.Eval,
-#container #sidebar.Overview ul li.Overview,
-#container #sidebar.Contact ul li.Contact,
-#container #sidebar.Staff ul li.Staff,
-#container #sidebar.Outside ul li.Outside,
-#container #sidebar.Transparency ul li.Transparency,
-#container #sidebar.License ul li.License,
-#container #sidebar.Current ul li.Current,
-#container #sidebar.Services ul li.Services,
-#container #sidebar.Applying ul li.Applying,
-#container #sidebar.VizioTopBar ul li.VizioTopBar,
-#container #sidebar.VizioMain ul li.VizioMain,
-#container #sidebar.VizioPressRelease ul li.VizioPressRelase,
-#container #sidebar.VizioComplaint ul li.VizioComplaint,
-#container #sidebar.VizioQandA ul li.VizioQandA,
-#container #sidebar.VizioPressKit ul li.VizioPressKit,
-#container #sidebar.VizioPhotoAssets ul li.VizioPhotoAssets,
-#container #sidebar.VizioPress ul li.VizioPress,
-#container #sidebar.IssuesInTheNews ul li.IssuesInTheNews,
-#container #sidebar.Glossary ul li.Glossary,
-#container #sidebar.CopyleftCompliance ul li.CopyleftCompliance,
-#container #sidebar.HelpComply ul li.HelpComply,
-#container #sidebar.CopyleftPrinciples ul li.CopyleftPrinciples,
-#container #sidebar.EnforcementStrategy ul li.EnforcementStrategy,
-#container #sidebar.CopyleftCompliance ul li.CopyleftCompliance,
-#container #sidebar.LiberateFirmware ul li.LiberateFirmware,
-#container #sidebar.PastLawsuits ul li.PastLawsuits,
-#container #sidebar.CopyleftOrg ul li.CopyleftOrg /* Never put a comma here */
-{
- color: #000033;
- font-weight: bold;
- background: #e3e6e0;
+#container #sidebar li a {
+ padding: var(--btn-padding);
+ background: #eaf1f1;
+ border-radius: var(--corner);
+ color: var(--black);
+ border: var(--border);
+ text-decoration: none;
+ background: var(--white);
+ display: block;
}
+#container #sidebar li a:hover { background: var(--green); color: var(--white); }
+
+#container #sidebar.Sponsors ul li.Sponsors a,
+#container #sidebar.Directors ul li.Directors a,
+#container #sidebar.Eval ul li.Eval a,
+#container #sidebar.Overview ul li.Overview a,
+#container #sidebar.Contact ul li.Contact a,
+#container #sidebar.Staff ul li.Staff a,
+#container #sidebar.Outside ul li.Outside a,
+#container #sidebar.Transparency ul li.Transparency a,
+#container #sidebar.License ul li.License a,
+#container #sidebar.Current ul li.Current a,
+#container #sidebar.Services ul li.Services a,
+#container #sidebar.Applying ul li.Applying a,
+#container #sidebar.VizioTopBar ul li.VizioTopBar a,
+#container #sidebar.VizioMain ul li.VizioMain a,
+#container #sidebar.VizioPressRelease ul li.VizioPressRelase a,
+#container #sidebar.VizioComplaint ul li.VizioComplaint a,
+#container #sidebar.VizioQandA ul li.VizioQandA a,
+#container #sidebar.VizioPressKit ul li.VizioPressKit a,
+#container #sidebar.VizioPhotoAssets ul li.VizioPhotoAssets a,
+#container #sidebar.VizioPress ul li.VizioPress a,
+#container #sidebar.IssuesInTheNews ul li.IssuesInTheNews a,
+#container #sidebar.Glossary ul li.Glossary a,
+#container #sidebar.CopyleftCompliance ul li.CopyleftCompliance a,
+#container #sidebar.HelpComply ul li.HelpComply a,
+#container #sidebar.CopyleftPrinciples ul li.CopyleftPrinciples a,
+#container #sidebar.EnforcementStrategy ul li.EnforcementStrategy a,
+#container #sidebar.CopyleftCompliance ul li.CopyleftCompliance a,
+#container #sidebar.LiberateFirmware ul li.LiberateFirmware a,
+#container #sidebar.PastLawsuits ul li.PastLawsuits a,
+#container #sidebar.CopyleftOrg ul li.CopyleftOrg a /* Never put a comma here */
+{
+ color: var(--white);
+ background: var(--green);
+}
+
#container #sidebar h2 {
- text-align: center;
- font-size: 1.25em;
- margin: 1.5em 0 0.8em 0;
+ font-size: 1.3rem;
+ margin-bottom: 0.8rem;
+ font-weight: 550;
}
#container #sidebar hr {
- width: 75%;
- float: center;
- clear: all;
+ width: 75%;
+ float: center;
+ clear: all;
+}
+
+#container #sidebar ul li:last-child {
+ margin-bottom: 2.5rem;
+}
+
+#container #sidebar ul:last-child li:last-child {
+ margin-bottom: 0;
}
.shaded { background: #F0FFB8; padding: .1em .5em; margin-bottom: .5em; }
-.columns {
-}
.column h2 { font-size: 1.25em; }
.column h3 { font-size: 1.1em; }
@@ -701,3 +1606,256 @@ details summary {
width: auto;
height: auto;
}
+
+/* =============================================================================================
+Court Case Page Styles (MT/2025)
+================================================================================================ */
+
+.case-header {
+ position: relative;
+ overflow: hidden;
+}
+
+.case-header::before {
+ content: "";
+ position: absolute;
+ left: 0; top: 0; bottom: 0; width: 50%;
+ background: var(--washed-green);
+ z-index: 0;
+}
+
+.case-header > * {
+ position: relative;
+ z-index: 1;
+}
+
+.case-bar {
+ width: 100%;
+ height: 25px;
+ background-color: var(--green);
+ border-top: var(--border);
+ border-bottom: var(--border);
+}
+
+.case-info {
+ width: 100%;
+ max-width: var(--max-site-width);
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ margin: 0 auto;
+}
+
+.case-info > * {
+ padding: 100px 0;
+ margin-right: 150px;
+}
+
+.case-info h1 {
+ margin: 0 0 10px;
+ padding: 0;
+ font-size: 3.75rem;
+ line-height: 1.05;
+}
+
+.case-info h4 {
+ font-weight: 400;
+}
+
+.case-info ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.case-info ul li span{
+ font-weight: 600;
+}
+
+@media screen and (max-width: 66.999em) {
+
+ .case-header {
+ background: var(--washed-green) !important;
+ }
+
+ .case-header::before {
+ display: none;
+ }
+
+ .case-info {
+ grid-template-columns: 1fr;
+ text-align: center;
+ padding: 50px 20px 0;
+ }
+
+ .case-info > * {
+ margin: 0;
+ }
+
+}
+
+.case-content {
+ width: 100%;
+ max-width: var(--max-site-width);
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 7fr 5fr;
+ grid-template-rows: auto;
+ grid-column-gap: 20px;
+ padding: 100px 0;
+}
+
+@media screen and (max-width: 1440px) and (min-width: 67em) {
+ .case-content {
+ padding: 100px 20px;
+ }
+
+}
+
+@media screen and (max-width: 66.999em) {
+ .case-content {
+ grid-template-columns: 1fr;
+ padding: 100px 20px;
+ }
+}
+
+.case-content * {
+ margin-block-end: 0;
+}
+
+.case-content .case-content-left > *,
+.case-content .case-content-right > * {
+ padding: var(--court-case-padding);
+ border: var(--border);
+ border-radius: var(--corner);
+ background: var(--white);
+ margin-bottom: 20px;
+}
+
+.case-content h2 {
+ padding: 0;
+ margin: 0;
+ font-size: 1.3rem;
+ font-weight: 550;
+}
+
+.case-content p {
+ font-size: 1.1rem;
+ line-height: 1.42;
+ font-weight: 375;
+ margin-top: 7px;
+}
+
+.case-content p + details > summary {
+ margin-top: 10px;
+}
+
+.case-content summary span.summary-title {
+ font-weight: 550;
+}
+
+.case-content summary .summary-title span {
+ font-weight: 375;
+}
+
+.case-content .legal-documents details li {
+ font-size: 0.95rem;
+ margin-left: 15px;
+ line-height: 1.2;
+ margin-bottom: 5px;
+}
+.case-content .why-case-matters {
+ background: var(--washed-orange);
+}
+
+.case-content .news-coverage-link {
+ background: var(--washed-green);
+ text-align: center;
+}
+
+
+.case-content .news-coverage-link h2 a {
+ text-decoration: none;
+}
+
+.case-content .news-coverage-link h2 a svg {
+ fill: var(--black);
+ height: 0.8em;
+ width: 0.8em;
+}
+
+.case-content .news-coverage-link h2 a:hover {
+ background: none;
+ text-decoration: underline;
+}
+
+.case-content .news-coverage-link h2 a:hover svg {
+ transform: scale(0.95);
+}
+
+.case-content .legal-documents summary {
+ cursor: pointer;
+}
+
+.case-content .legal-documents summary span {
+ transform: translateX(-15px)
+}
+
+.toggle-section summary .toggle-icon.minus { display: none; }
+.toggle-section[open] summary .toggle-icon.plus { display: none; }
+.toggle-section[open] summary .toggle-icon.minus { display: inline-block; }
+
+.toggle-icon {
+ width: 0.8rem;
+ height: 0.8rem;
+ vertical-align: top;
+ margin-right: 0 !important;
+ fill: #71747F;
+}
+
+
+/* Remove default triangle in most browsers */
+.toggle-section summary {
+ list-style: none;
+}
+
+/* Remove default triangle in WebKit browsers (Chrome, Safari, Edge) */
+.toggle-section summary::-webkit-details-marker {
+ display: none;
+}
+
+/* Remove default triangle in Firefox */
+.toggle-section > summary::marker {
+ display: none;
+ font-size: 0;
+ color: transparent;
+}
+
+.toggle-section summary {
+ position: relative;
+ padding-left: 2.5em; /* Adjust to fit icon width + margin */
+ min-height: 1.5em; /* Adjust to fit icon height */
+ display: block; /* Not flex! */
+}
+
+.toggle-section .toggle-icon {
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ /* width and height as needed */
+}
+
+.toggle-section .toggle-icon.plus,
+.toggle-section[open] .toggle-icon.minus,
+.toggle-section[open] .toggle-icon.plus {
+ display: none;
+}
+
+.toggle-section .toggle-icon.plus,
+.toggle-section[open] .toggle-icon.minus {
+ display: inline-block;
+}
+.toggle-section .summary-title {
+ display: block;
+ /* No extra indent needed, padding on summary handles it */
+}
\ No newline at end of file
diff --git a/conservancy/static/fonts/AtkinsonHyperlegibleNextVF-Variable.woff2 b/conservancy/static/fonts/AtkinsonHyperlegibleNextVF-Variable.woff2
new file mode 100644
index 00000000..d65952f3
Binary files /dev/null and b/conservancy/static/fonts/AtkinsonHyperlegibleNextVF-Variable.woff2 differ
diff --git a/conservancy/static/img/conservancy-header-logo.svg b/conservancy/static/img/conservancy-header-logo.svg
new file mode 100644
index 00000000..719e9eb4
--- /dev/null
+++ b/conservancy/static/img/conservancy-header-logo.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/conservancy/static/img/creative-commons-footer-icons.svg b/conservancy/static/img/creative-commons-footer-icons.svg
new file mode 100644
index 00000000..9a5ac529
--- /dev/null
+++ b/conservancy/static/img/creative-commons-footer-icons.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/conservancy/static/img/font_awesome_subset.svg b/conservancy/static/img/font_awesome_subset.svg
index 259a35c8..0852a4d2 100644
--- a/conservancy/static/img/font_awesome_subset.svg
+++ b/conservancy/static/img/font_awesome_subset.svg
@@ -4,18 +4,21 @@ Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
-->
-
-
+
-
diff --git a/conservancy/static/img/vizio-image.webp b/conservancy/static/img/vizio-image.webp
new file mode 100644
index 00000000..de425c84
Binary files /dev/null and b/conservancy/static/img/vizio-image.webp differ
diff --git a/conservancy/static/js/conservancy.js b/conservancy/static/js/conservancy.js
index 06e2ef36..6caf1c48 100644
--- a/conservancy/static/js/conservancy.js
+++ b/conservancy/static/js/conservancy.js
@@ -58,10 +58,10 @@ qsa('.supporter-form').forEach(function(form) {
});
// Open mobile/search menu.
-qs('#menu-icon').addEventListener('click', function(event) {
- qs('#navbar').classList.toggle('mobile');
-});
-qs('#search-icon').addEventListener('click', function(event) {
- qs('#navbar').classList.toggle('mobile');
- qs('#search-query').focus();
-});
+// qs('#menu-icon').addEventListener('click', function(event) {
+// qs('#navbar').classList.toggle('mobile');
+// });
+// qs('#search-icon').addEventListener('click', function(event) {
+// qs('#navbar').classList.toggle('mobile');
+// qs('#search-query').focus();
+// });
diff --git a/conservancy/static/js/mobile-nav.js b/conservancy/static/js/mobile-nav.js
new file mode 100644
index 00000000..fb97c964
--- /dev/null
+++ b/conservancy/static/js/mobile-nav.js
@@ -0,0 +1,89 @@
+// A dedicated script for mobile navigation.
+// It assumes the CSS is correctly set up for the slide-out and accordion behaviors.
+
+document.addEventListener('DOMContentLoaded', function() {
+ // 1. Mobile Menu Open/Close Elements
+ const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
+ const mainMobileNav = document.getElementById('main-mobile-nav');
+ const mobileNavClose = document.getElementById('mobile-nav-close');
+ const body = document.body;
+ // 2. Check if the required elements exist
+ if (mobileMenuToggle && mainMobileNav && mobileNavClose) {
+ // Handle opening the menu
+ mobileMenuToggle.addEventListener('click', function() {
+ mainMobileNav.classList.add('is-open');
+ body.classList.add('nav-open'); // Add class to body to prevent scrolling
+ mainMobileNav.setAttribute('aria-hidden', 'false');
+ mobileMenuToggle.setAttribute('aria-expanded', 'true');
+ });
+ // Handle closing the menu
+ mobileNavClose.addEventListener('click', function() {
+ mainMobileNav.classList.remove('is-open');
+ body.classList.remove('nav-open'); // Remove class from body
+ mainMobileNav.setAttribute('aria-hidden', 'true');
+ mobileMenuToggle.setAttribute('aria-expanded', 'false');
+ });
+
+ } else {
+ console.error("Mobile navigation elements not found. Please ensure IDs 'mobile-menu-toggle', 'main-mobile-nav', and 'mobile-nav-close' are correct in your HTML.");
+ }
+
+ // 3. Accordion Functionality
+ const mobileMainMenuItems = document.querySelectorAll('.mobile-main-menu > li');
+
+ mobileMainMenuItems.forEach(item => {
+ // Find the main link with a submenu indicator (aria-haspopup)
+ const parentLink = item.querySelector('a[aria-haspopup="true"]');
+ // Find the submenu
+ const submenu = item.querySelector('ul');
+
+ if (parentLink && submenu) {
+
+ // Prevent the main link from navigating and toggle the submenu
+ parentLink.addEventListener('click', function(event) {
+ // Check if the screen width is within the mobile range (using a common breakpoint)
+ if (window.matchMedia('(max-width: 66.999em)').matches) {
+ event.preventDefault();
+
+ // Toggle the 'is-expanded' class on the parent
+ item.classList.toggle('is-expanded');
+
+ if (item.classList.contains('is-expanded')) {
+ // Expand the submenu by setting max-height to its scroll height
+ submenu.style.maxHeight = submenu.scrollHeight + 'px';
+ parentLink.setAttribute('aria-expanded', 'true');
+ } else {
+ // Collapse the submenu
+ submenu.style.maxHeight = '0';
+ parentLink.setAttribute('aria-expanded', 'false');
+ }
+
+ // Close other open accordions
+ mobileMainMenuItems.forEach(otherItem => {
+ if (otherItem !== item && otherItem.classList.contains('is-expanded')) {
+ otherItem.classList.remove('is-expanded');
+ const otherSubmenu = otherItem.querySelector('ul');
+ if (otherSubmenu) {
+ otherSubmenu.style.maxHeight = '0';
+ otherItem.querySelector('a[aria-haspopup="true"]').setAttribute('aria-expanded', 'false');
+ }
+ }
+ });
+ }
+ });
+ }
+ });
+
+ // 4. Ensure accordion max-height is recalculated on window resize
+ window.addEventListener('resize', function() {
+ mobileMainMenuItems.forEach(item => {
+ if (item.classList.contains('is-expanded')) {
+ const submenu = item.querySelector('ul');
+ if (submenu) {
+ // Recalculate max-height in case content reflowed
+ submenu.style.maxHeight = submenu.scrollHeight + 'px';
+ }
+ }
+ });
+ });
+});
diff --git a/conservancy/templates/base_compliance.html b/conservancy/templates/base_compliance.html
index 60bf0261..04920c56 100644
--- a/conservancy/templates/base_compliance.html
+++ b/conservancy/templates/base_compliance.html
@@ -9,7 +9,7 @@
{% endblock %}
{% block outercontent %}
- 
-
- 
+ 
+
+