3 files changed, 85 insertions, 11 deletions

diff --git a/animism-align/frontend/app/views/viewer/sections/footnotes.css b/animism-align/frontend/app/views/viewer/sections/footnotes.css
index 74426c3..7a45e37 100644
--- a/animism-align/frontend/app/views/viewer/sections/footnotes.css
+++ b/animism-align/frontend/app/views/viewer/sections/footnotes.css
@@ -8,7 +8,7 @@
   position: absolute;
   bottom: 0;
   right: -1px;
-  width: 15rem;
+  width: 14rem;
   max-height: 50vh;
   transform: translateY(100vh) translateZ(0);
   transition: opacity 0.01s, transform 0.2s;
diff --git a/animism-align/frontend/app/views/viewer/sections/share.css b/animism-align/frontend/app/views/viewer/sections/share.css
index ae5dd53..fe3aaf7 100644
--- a/animism-align/frontend/app/views/viewer/sections/share.css
+++ b/animism-align/frontend/app/views/viewer/sections/share.css
@@ -10,6 +10,7 @@
   padding: 0.5rem 0.75rem 0 0.75rem;
   background: black;
   border-top: 1px solid white;
+  border-left: 1px solid white;
   border-right: 1px solid white;
   color: white;
   font-size: 18px;
@@ -28,7 +29,7 @@
   z-index: 10;
 }
 
-.nav-share a {
+.viewer-parent .nav-share a {
   color: white;
   text-decoration: none;
 }
diff --git a/animism-align/frontend/app/views/viewer/sections/subscribe.css b/animism-align/frontend/app/views/viewer/sections/subscribe.css
index 9c27614..2b43fe2 100644
--- a/animism-align/frontend/app/views/viewer/sections/subscribe.css
+++ b/animism-align/frontend/app/views/viewer/sections/subscribe.css
@@ -4,7 +4,7 @@
   position: absolute;
   bottom: 0;
   left: -1px;
-  width: 35rem;
+  width: 29.6rem;
   transform: translateY(30rem) translateZ(0);
   transition: opacity 0.01s, transform 0.2s;
   padding: 0.5rem 0.75rem 0 0.75rem;
@@ -36,28 +36,47 @@
   white-space: normal;
   position: relative;
 }
-.nav-subscribe .subscription-form input {
+.nav-subscribe .subscription-form input[type='email'] {
   font-size: 18px;
   background: transparent;
   border: 0;
-  padding: 5px 0;
+  padding: 0.5rem 0;
+  margin-right: 0.5rem;
   width: 100%;
   color: #fff;
+  flex: 1;
 }
-.nav-subscribe .subscription-form input::placeholder {
+.nav-subscribe .subscription-form input[type='email']::placeholder {
   color: #888;
 }
-.nav-subscribe .subscription-form input:focus,
-.nav-subscribe .subscription-form input:focus:invalid {
+.nav-subscribe .subscription-form input[type='email']:focus,
+.nav-subscribe .subscription-form input[type='email']:focus:invalid {
   background: transparent;
   border: 0;
   outline: 0;
   color: #fff;
 }
+.nav-subscribe .subscription-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  padding-right: 0.5rem;
+  margin: 0.25rem 0;
+}
+.nav-subscribe button.subscription-submit {
+  position: relative;
+  background: transparent;
+  border: 0;
+  padding: 0 0.75rem 0 0;
+  overflow: visible;
+  font-family: "Neue Haas Unica", sans-serif;
+  font-size: 18px;
+}
 .nav-subscribe .subscription-form .arrow {
   position: absolute;
-  bottom: -0.25rem;
-  right: -1rem;
+  bottom: -0.5rem;
+  right: -1.25rem;
   width: 2.5rem;
   height: 2.5rem;
 }
@@ -65,5 +84,59 @@
   fill: #666;
 }
 .nav-subscribe .subscription-callout {
-  width: 30rem;
+  width: 100%;
+}
+.nav-subscribe .subscription-privacy {
+  font-size: 0.8rem;
+}
+.viewer-parent .nav-subscribe a {
+  color: #fff;
+  text-decoration: underline;
+}
+.nav-subscribe .checkbox span {
+  text-transform: none;
+}
+.nav-subscribe .subscription-form label {
+  display: block;
+}
+.nav-subscribe form input[type="checkbox"] {
+  display: inline;
+  margin: 0 0.5rem 0 0;
+}
+.nav-subscribe form label span {
+  display: inline;
+}
+.nav-subscribe input[type=checkbox]:focus:after {
+  border-color: #333;
+}
+.nav-subscribe input[type="checkbox"]:checked:after {
+  border-color: #333;
+  background-color: #333;
+}
+
+.nav-subscribe .subscription-thanks {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%;
+  height: 100%;
+  background: black;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+  opacity: 0.0;
+  transition: opacity 0.4s;
+}
+.nav-subscribe .subscribed .subscription-thanks {
+  opacity: 1.0;
+  pointer-events: auto;
+}
+
+.nav-subscribe button.subscription-reset {
+  font-family: "Neue Haas Unica", sans-serif;
+  margin-top: 0.5rem;
+  font-size: 18px;
+  background: black;
+  padding: 0.25rem 0.5rem;
 }
\ No newline at end of file