Feat: Assessment page complete and new Home page layout for marketing phase 1 of the customer acquisition plan and offering a demo and for trainers to join the alpha trials. Reporting images created for radar diagram of Command mastery by Command Category; line graph of single command progress measured by obedience level, response latency, and compliance duration over time; Calendar Entries page filtered to unpaid bill calendary entries created using dummy data created in web server as database implementation not yet started.

static/css/layouts/header.css

@@ -14,16 +14,21 @@
     height: 15vh;
     align-items: flex-start;
 }
-.topnav a, .topnav label, .topnav p, .topnav h1 {
+.topnav a,
+.topnav label,
+.topnav p,
+.topnav h1 {
     float: left;
     display: flex;
     text-align: center;
     text-decoration: none;
     width: 100%;
     max-height: 15vh;
-    font-weight: normal;
     justify-content: center;
 }
+.topnav h1 {
+    color: var(--colour-text-link-visited);
+}
 .topnav a:hover {
     background-color: var(--colour-page-background);
 }
@@ -35,7 +40,7 @@
     align-self: center;
     display: flex;
 }
-.topnav > .container.header-logo {
+.topnav > .container.logo {
     min-width: 15vh;
     max-width: 15vh;
 }

static/css/main.css

@@ -100,11 +100,11 @@ script, link {
 }
 
 /* header image */
-img.header-logo {
+img.logo {
     max-height: 15vh;
     max-width: 15vh;
     cursor: pointer;
-    border-radius: 3vh;
+    /* border-radius: 3vh; */
 }
 
 /* icon images */
@@ -236,10 +236,10 @@ input.dirty, textarea.dirty, select.dirty {
 
 
 @media screen and (max-width: 400px) {
-    img.header-logo {
+    /*
+    img.logo {
         border-radius: 3vh;
     }
-    /*
     .company-name {
         font-size: 14px;
     }

static/css/pages/core/home.css

@@ -15,12 +15,12 @@ ul li {
 }
 
 section.benefits,
-section.solution {
+section.social-proof {
     padding: 4rem 0;
     background: var(--colour-text-background);
 }
 section.benefits .card.benefits,
-section.solution .card.solution {
+section.social-proof .card.social-proof { 
     padding: 2rem;
     background: var(--colour-page-background);
     border-radius: 8px;
@@ -29,12 +29,14 @@ section.solution .card.solution {
 }
 
 section.problem,
-section.early-access {
+section.solution,
+section.testimonial {
     padding: 4rem 0;
     background: var(--colour-page-background-1);
 }
 section.problem .card.problem,
-section.early-access .card.early-access {
+section.solution .card.solution,
+section.testimonial .card.testimonial {
     background: var(--colour-text-background);
     padding: 2rem;
     border-radius: 8px;
@@ -44,9 +46,7 @@ section.early-access .card.early-access {
 }
 
 
-section.benefits ul li,
-section.solution ul li,
-section.early-access ul li {
+section.problem ul li {
     list-style: none;
 }
 
@@ -73,6 +73,10 @@ section.early-access ul li {
     color: var(--colour-secondary);
 }
 
+section.hero .button {
+    margin: 1vh auto;
+    display: block;
+}
 
 
 /* Problem Section */
@@ -87,8 +91,17 @@ section.problem .section-subtitle {
     /* font-size: 18px; */
     font-weight: bold;
 }
+/*
+section.problem ul li::before {
+    content: "😤";
+    position: absolute;
+    left: 0;
+  }
+*/
+section.problem ul li {
+    list-style: none;
+}
 
-/* Solution Section */
 
 /* Benefits Section * /
 section.benefits .section-subtitle {
@@ -97,6 +110,25 @@ section.benefits .section-subtitle {
 }
 */
 
+section.benefits .container .card .container {
+    min-width: 250px;
+}
+/* Solution Section */
+section.solution .container .card {
+    margin-top: 1vh;
+    max-width: min(2000px, 90vw);
+}
+
+section.benefits .card.benefits .container,
+section.solution .container .card .container {
+    padding: 1vh 2vw;
+}
+section.solution .project-thumbnail img {
+    max-width: 500px;
+    max-height: 500px;
+}
+
+
 /* Social Proof Section * /
 section.social-proof {
     padding: 6rem 0;
@@ -121,10 +153,23 @@ section.social-proof ul {
 section.social-proof .section-subtitle {
     font-size: 16px;
 }
-*/
 section.social-proof ul li {
     font-size: 14px;
 }
+*/
+section.benefits .card.benefits,
+section.social-proof .card.social-proof {
+    display: flex;
+}
+section.social-proof .section-title {
+    font-weight: bold;
+    color: var(--colour-text-link-visited);
+    margin-bottom: 0.25vh;
+}
+section.social-proof .container {
+    max-width: min(600px, 90vw);
+    width: fit-content;
+}
 
 /* Early Access Section * /
 section.early-access {
@@ -164,12 +209,32 @@ section.features .button {
     text-align: center;
 }
 
+section.cta-2 .button {
+    margin: 2vh 1vw;
+}
+section.cta-2 .card {
+    background-color: transparent;
+}
+section.cta-2 .card .container {
+    background-color: var(--colour-page-background);
+    color: var(--colour-primary);
+    border-radius: 1vh;
+    padding: 2vh 1vw;
+    margin: 1vh;
+}
+
 /* FAQs * /
 section.faq .button {
     margin-bottom: 0.25rem;
 }
 */
 
+@media screen and (max-width: 640px) {
+    header .navbar .nav-links {
+        display: none;
+    }
+}
+
 /* Animations */
 /* Fallback styles to ensure content is visible without JS */
 .reveal {

static/css/pages/dog/calendar_entries.css

@@ -0,0 +1,40 @@
+
+
+#formFilters .container.save.button-cancel {
+    display: none;
+}
+
+#tableMain tbody > div {
+    width: 49vh;
+}
+
+/*
+#tableMain tbody tr td.date_from.date_to div {
+    height: 3vh;
+}
+*/
+#tableMain thead tr th.name,
+#tableMain tbody tr td.name {
+    min-width: 43vw;
+    max-width: 43vw;
+}
+#tableMain thead tr th.is-calendar-entry-type-bill,
+#tableMain tbody tr td.is-calendar-entry-type-bill {
+    display: none;
+}
+
+@media screen and (max-width: 450px) {
+    #tableMain {
+        max-width: 90vw;
+    }
+    #tableMain thead tr th.date_from,
+    #tableMain tbody tr td.date_from {
+        min-width: 20vw;
+        max-width: 20vw;
+    }
+    #tableMain thead tr th.price,
+    #tableMain tbody tr td.price {
+        min-width: 12vw;
+        max-width: 12vw;
+    }
+}

static/css/sections/dog.css

@@ -56,7 +56,7 @@
 @media screen and (max-width: 400px) {
     .footer  {
         max-height: 8vh;
-        padding: 0 2vw;
+        padding: 0.75vh 2vw;
         font-size: 10px;    
         width: 96vw;
         max-width: 96vw;