@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/styles/Verify.module.scss

@@ -1,199 +1,76 @@
-.formItem {
-    width: 100%;
-    position: relative;
-    box-sizing: border-box;
-    margin-bottom: 1rem;
-
-    h1 {
-        text-align: center;
-        font-size: 1.5rem;
-        font-weight: 600;
-        color: #111827;
-        margin-bottom: 1.5rem;
-    }
+/**
+ * Set a new password (the link out of the reset email).
+ *
+ * Replaces the pre-6.1 centred card with the two-pane sign-in language, so the
+ * last screen of the reset journey matches the first.
+ *
+ * Everything shared comes from _authShell.scss; only the password-rules list is
+ * particular to this screen.
+ */
+
+@use './authShell' as *;
+
+@include auth-shell;
+
+/* The rules used to arrive as a five-line toast AFTER a rejected submit, built
+   out of `<br />`s. Stating them up front is both kinder and shorter. */
+.rules {
+    margin: 0.2rem 0 0;
+    padding: 0;
+    list-style: none;
+    font-size: 0.8rem;
+    line-height: 1.6;
+    color: var(--muted);
 
-    .fi__label {
-        position: relative;
+    li {
         display: flex;
-        align-items: center;
-    }
-
-    .fi__span {
-        position: absolute;
-        transition: all 200ms;
-        opacity: 0.7;
-        left: 0;
-        transform-origin: top left;
-        cursor: text;
-        padding: 0 1rem;
-        font-size: 0.9rem;
-        color: #6b7280;
+        align-items: baseline;
+        gap: 0.5rem;
     }
 
-    .fi__div {
-        transition: all 200ms;
-        opacity: 0.8;
-        left: 0;
-        padding: 19px 13px;
-        border-radius: 0.5rem;
-        border: 1px solid #e5e7eb;
-        box-shadow: none;
-    }
-
-    .fi__toggle {
-        width: max-content;
-        padding: 0 10px 0 0;
-        box-sizing: border-box;
-        display: inline;
-    }
-
-    .fi__toggletxt {
-        position: relative;
-        left: 5px;
-        font-size: 0.95em;
-        top: -5px;
+    /* A dot per rule rather than a bullet glyph, so the list reads as a
+       checklist and not as prose. */
+    li::before {
+        content: '';
+        flex: none;
+        width: 0.3rem;
+        height: 0.3rem;
+        border-radius: 50%;
+        background: var(--line);
+        transition: background 0.15s ease;
     }
 }
 
-.fwItem,
-.fwBuilderItem {
-    grid-column: 1 / -1;
-    width: 100%;
-}
+/* Satisfied rules mark themselves as the user types — the point of showing the
+   list is that it can answer "what is still missing?". */
+.ruleMet {
+    color: var(--ink);
 
-.lastItem {
-    .btn {
-        width: 100%;
+    &::before {
+        background: var(--navy) !important;
     }
 }
 
-.loginlogo {
-    display: block;
-    width: 100%;
-    max-width: 150px;
-    height: auto;
-    margin: 0 auto;
-    padding-bottom: 1.5rem;
-}
-
-.logincontainer {
-    width: 100%;
-    min-height: 100vh;
-    display: grid;
-    place-items: center;
-    padding: 1rem;
-    background-color: #f9fafb;
-}
-
-.login {
-    width: 28rem;
-    padding: 2rem;
-    margin: 0;
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1rem;
-    background-color: white;
-    border-radius: 0.75rem;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-        0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    > .formItem {
-        padding: 0;
-
-        small {
-            position: absolute;
-            width: 18px;
-            height: 18px;
-            right: 14px;
-            top: 14px;
-            opacity: 0.4;
-            color: #6b7280;
-        }
-    }
-
-    > .loginitem {
-        grid-column: 1 / -1;
-        padding: 0.25em 0;
-
-        label {
-            width: 100%;
-        }
-
-        button {
-            width: 100%;
-        }
-    }
-}
-
-.forgotten span {
-    display: block;
-    text-align: center;
-    color: var(--paragraph-color);
-    padding: 1rem 0;
-
-    a {
-        color: var(--secondary-color);
-        text-decoration: none;
-    }
-}
-
-.lcontainer {
-    min-height: 100vh;
-    display: flex;
+.back {
+    display: inline-flex;
     align-items: center;
-    justify-content: center;
-    background-color: #f9fafb;
-}
-
-.lwrap {
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.aside {
-    opacity: 1;
-    position: fixed;
-    overflow: hidden;
-    height: 101%;
-    width: var(--sidebar-width);
-}
-
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.75rem 1rem;
-    cursor: pointer;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: white;
+    gap: 0.35rem;
+    margin-top: 1.4rem;
+    padding: 0;
+    border: none;
+    background: none;
+    font-family: inherit;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--navy);
     text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color, #4f46e5);
-    border: 1px solid var(--primary-color, #4f46e5);
-    border-radius: 0.5rem;
-    outline: none;
-    transition: all 0.2s ease;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    cursor: pointer;
 
     &:hover {
-        background: var(--secondary-color, #3cbf7d);
-        border-color: var(--secondary-color, #3cbf7d);
+        text-decoration: underline;
     }
 
-    &:focus {
-        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
+    svg {
+        flex: none;
     }
 }
-
-input:not(:placeholder-shown) + .fi__span,
-textarea:not(:placeholder-shown) + .fi__span,
-select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-135%) translateX(10px) scale(0.85);
-    opacity: 1;
-    padding: 0;
-    background: white;
-    font-weight: 500;
-    transition: all 0.3s ease;
-    color: var(--primary-color, #4f46e5) !important;
-}

package/src/components/styles/_authBrandPanel.scss

@@ -0,0 +1,163 @@
+//
+// The brand panel.
+//
+// The company's own work, not decoration: it is the reason the rest of the
+// system exists, so it carries one side of the sign-in screen and the form is
+// left to be a form.
+//
+// Written once here because three screens now render it — the staff Login, the
+// shared AuthShell behind TwoFactorAuth/Reset/Verify, and the client portal's
+// split layout. It had been copied twice before that, which is the arrangement
+// where one copy quietly stops matching the others.
+//
+// REQUIRES the local token aliases to be declared on an ancestor: `--navy-deep`
+// (the ground behind the photograph), `--flag` (the eyebrow's rule). See the
+// block at the top of `.auth` in Login.module.scss for the canonical set.
+//
+// The `$collapse` argument is the one thing that genuinely differs between the
+// consumers, and it is a layout decision rather than an identity one:
+//
+//   `hide` — the staff screens. Under 900px the photograph goes entirely; on a
+//            phone the form is the whole job and a cropped hero is in the way.
+//   `band` — the client split. The panel becomes a compact header strip
+//            instead, because the portal is a public-facing front door and the
+//            brand still has to be present on a phone. The consumer supplies
+//            the rest of the band's treatment after the include.
+
+@mixin auth-brand-panel($collapse: hide) {
+    .brand {
+        position: relative;
+        background-color: var(--navy-deep);
+        background-size: cover;
+        background-position: center 62%;
+        overflow: hidden;
+
+        // A scrim anchored to the bottom-left, where the copy sits — not a flat
+        // wash over the whole image, which would dull the dusk light that makes
+        // the photograph worth using.
+        //
+        // The foot is a near-solid plate rather than a fade. The brand line has
+        // to hold against whatever the photograph is doing behind it, and a
+        // bright patch exactly where the type sits washed it out. Held high —
+        // 0.88 still at 18%, which is where the ink block ends — so the whole
+        // block reads on one ground, then released quickly to 0.06 at the top,
+        // so the sky above is still a photograph and not a tint.
+        &::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background:
+                linear-gradient(
+                    to top,
+                    rgba(16, 25, 42, 0.94) 0%,
+                    rgba(16, 25, 42, 0.88) 18%,
+                    rgba(16, 25, 42, 0.62) 42%,
+                    rgba(16, 25, 42, 0.22) 70%,
+                    rgba(16, 25, 42, 0.06) 100%
+                ),
+                linear-gradient(
+                    to right,
+                    rgba(16, 25, 42, 0.5) 0%,
+                    rgba(16, 25, 42, 0) 55%
+                );
+        }
+
+        @if $collapse == hide {
+            @media (max-width: 900px) {
+                display: none;
+            }
+        } @else if $collapse == band {
+            @media (max-width: 900px) {
+                // Tall enough to read as a band rather than a stripe, short
+                // enough that the form is still the first thing on screen.
+                min-height: 8.5rem;
+                // The crop that worked for a full-height column puts the
+                // horizon in the wrong place in a short one.
+                background-position: center 45%;
+            }
+        }
+    }
+
+    .brandInk {
+        position: absolute;
+        left: clamp(2rem, 4vw, 3.5rem);
+        right: clamp(2rem, 4vw, 3.5rem);
+        bottom: clamp(2rem, 5vh, 3.5rem);
+        z-index: 1;
+        color: #fff;
+        animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
+    }
+
+    .eyebrow {
+        margin: 0 0 0.75rem;
+        font-size: 0.72rem;
+        font-weight: 700;
+        letter-spacing: 0.22em;
+        // Stated, not left to the cascade: global.css sets
+        // `p { line-height: var(--para-height) }`, which is 1.6 here. That put
+        // the kicker on a taller line, so the red dash sat at a different
+        // height and the gap beneath it read as wider.
+        line-height: 1.4;
+        text-transform: uppercase;
+        color: rgba(255, 255, 255, 0.75);
+        // The single use of the accent colour in the whole screen.
+        padding-left: 2.1rem;
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            width: 1.5rem;
+            height: 2px;
+            background: var(--flag);
+        }
+    }
+
+    .brandLine {
+        margin: 0 0 0.6rem;
+        font-size: clamp(2.4rem, 4.2vw, 3.6rem);
+        font-weight: 700;
+        line-height: 1;
+        // Tight tracking at display size — Barlow opens up as it scales.
+        letter-spacing: -0.02em;
+        // Stated rather than inherited from .brandInk: this is the one line on
+        // the screen that has to be white, and finding that out should not mean
+        // reading the parent.
+        color: #fff;
+        text-wrap: balance;
+    }
+
+    .brandSub {
+        margin: 0;
+        max-width: 34ch;
+        font-size: 1rem;
+        font-weight: 300;
+        line-height: 1.5;
+        // No-op against this app's globals, but a consuming app's own `p` rule
+        // may track body copy, so the value is pinned rather than left to
+        // whichever global layer the screen happens to render under.
+        letter-spacing: 0;
+        color: rgba(255, 255, 255, 0.82);
+    }
+}
+
+//
+// One entrance, staggered between the two panels. Anything more would be
+// decoration on a screen people pass through several times a day.
+//
+// Separate from the panel mixin because a module that includes both the shell
+// and the panel must not emit the keyframes twice.
+@mixin auth-rise-keyframes {
+    @keyframes rise {
+        from {
+            opacity: 0;
+            transform: translateY(0.75rem);
+        }
+        to {
+            opacity: 1;
+            transform: none;
+        }
+    }
+}