1 files changed, 84 insertions, 36 deletions

diff --git a/web/src/styles.css b/web/src/styles.css
index ee132d9..375f257 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -16,14 +16,15 @@
        header moves down when one is shown. --ad-banner-h is set on the root
        element by mountTopAdBanner and is 0px whenever the banner is hidden,
        so nothing below has to know whether a banner exists. */
-    --ad-banner-height: 6.5rem;
+    --ad-banner-height: 3.75rem;
     --ad-banner-h: 0px;
     /* Set from the measured top rail by renderTopRail, because the rail is
        one row signed in and two signed out. The fallback covers the moment
        before the first measurement lands. */
     --top-rail-h: 2.5rem;
-    /* Where content starts: below the banner, below the rail, plus a gap. */
-    --header-offset: calc(1rem + var(--top-rail-h) + 0.75rem + var(--ad-banner-h));
+    /* Where content starts. The banner sits beside the rail rather than above
+       it, so this clears whichever of the two is taller, not their sum. */
+    --header-offset: calc(1rem + max(var(--top-rail-h), var(--ad-banner-h)) + 0.75rem);
     /* App padding variable so we can compensate where needed */
     --app-padding: 1rem;
     /* Room at the foot of every screen for the fixed footer and the corner
@@ -216,7 +217,7 @@ body {
 /* The mark and wordmark together, fixed at the top-left of every screen. */
 .logo {
     position: fixed;
-    top: calc(1rem + var(--ad-banner-h));
+    top: 1rem;
     left: 1rem;
     display: flex;
     align-items: center;
@@ -236,22 +237,13 @@ body {
     overflow: visible;
 }
 
-.logo-mark-chevron,
-.logo-mark-baseline,
-.logo-mark-cursor {
-    stroke: var(--primary-color);
-    fill: var(--primary-color);
-}
-
 .logo-mark-chevron {
+    stroke: var(--primary-color);
     fill: none;
 }
 
-/* The offset copy underneath. Faint enough to read as a print misregistration
-   rather than a second chevron. */
-.logo-mark-ghost {
-    stroke: var(--secondary-color, var(--primary-color));
-    opacity: 0.55;
+.logo-mark-cursor {
+    fill: var(--primary-color);
 }
 
 /* Plain inline, not a flex container. As inline-flex the two halves became
@@ -282,16 +274,19 @@ body {
 /* The cursor blinks, at the same rate as the typing caret, because it is the
    same idea. Anyone who has asked not to see motion gets it held still. */
 @keyframes logo-cursor-blink {
-    0%, 45% { opacity: 1; }
-    55%, 100% { opacity: 0.15; }
+    0%, 50% { opacity: 1; }
+    50.01%, 100% { opacity: 0; }
 }
 
-.logo-mark-cursor {
-    animation: logo-cursor-blink 1.6s steps(1, end) infinite;
+/* Only the menu's own title blinks. The corner mark is on every screen, and
+   something blinking in the corner of every screen is a distraction rather
+   than a flourish. */
+.logo-hero .logo-mark-cursor {
+    animation: logo-cursor-blink 1.06s steps(1, end) infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .logo-mark-cursor {
+    .logo-hero .logo-mark-cursor {
         animation: none;
     }
 }
@@ -327,12 +322,48 @@ body {
 /* The menu's own title is the full lockup at size. It is not fixed to the
    corner like the one every other screen carries: the menu had both, so the
    name appeared twice on the same screen. */
+.logo-corner {
+    cursor: default;
+    opacity: 0.55;
+}
+
+.logo-corner:hover .logo-word-a {
+    color: var(--text-color);
+}
+
+.logo-corner:hover .logo-word-b {
+    color: var(--primary-color);
+}
+
 .logo-hero {
     position: static;
-    font-size: 3.25rem;
-    gap: 0.75rem;
+    /* Sized to the buttons beneath it rather than to nothing in particular:
+       the menu buttons are 250px wide at 1.2rem, and this sits above them. */
+    font-size: 2.5rem;
+    gap: 0;
     margin-bottom: 2rem;
     cursor: default;
+    /* Three columns, the third empty and the same width as the first. That
+       puts the wordmark in the exact centre of the row with the mark to its
+       left, which is what has to line up with the buttons underneath.
+       Centring the mark and the name together as one flex box put the name
+       16px right of everything below it. */
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    width: 100%;
+}
+
+.logo-hero .logo-mark {
+    grid-column: 1;
+    justify-self: end;
+    margin-right: 0.4em;
+    width: 1.05em;
+    height: 1.05em;
+}
+
+.logo-hero .logo-word {
+    grid-column: 2;
 }
 
 .logo-hero:hover .logo-word-a {
@@ -2495,7 +2526,7 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar {
    themselves into it. */
 .top-rail {
     position: fixed;
-    top: calc(1rem + var(--ad-banner-h));
+    top: 1rem;
     right: 1rem;
     z-index: 100;
     /* Two rows: the icons, and the sign-in links under them. As one row the
@@ -2982,6 +3013,13 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar {
    on :active, so a click on a button that opens a panel elsewhere on screen
    gave no feedback at the point of contact. */
 .menu-button:active:not(:disabled),
+/* A rail control that is switched on. The sound toggle is the only one where
+   the state is not obvious from the icon alone at a glance. */
+.corner-icon-button.active {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
 .corner-icon-button:active,
 .end-screen-button:active {
     transform: translateY(1px);
@@ -3879,19 +3917,19 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar {
     letter-spacing: 1px;
 }
 
+/* The unit itself, centred at the top of the page. Not a full-width bar: as
+   one it read as a second chrome layer stretching past the content on both
+   sides, and it pushed the wordmark and the icon rail down out of the corners
+   they belong in. On a wide window all three share the top line. */
 .ad-banner-top {
     position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: var(--ad-banner-height);
-    z-index: 90;
+    top: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 85;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--background-color);
-    border-bottom: var(--border-width) solid var(--border-color);
-    box-sizing: border-box;
 }
 
 .ad-banner-top[hidden] {
@@ -3902,9 +3940,6 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 100%;
-    padding: 0 1rem;
-    box-sizing: border-box;
 }
 
 /* No top margin in the banner: the bar centres it already. */
@@ -3926,6 +3961,19 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar {
     box-sizing: border-box;
 }
 
+/* Below this the wordmark, the unit and the icon rail do not fit on one line,
+   so the banner drops beneath the header row instead of colliding with it,
+   and the content column clears both. */
+@media (max-width: 980px) {
+    .ad-banner-top {
+        top: calc(1rem + var(--top-rail-h) + 0.5rem);
+    }
+
+    :root {
+        --header-offset: calc(1rem + var(--top-rail-h) + 0.5rem + var(--ad-banner-h) + 0.75rem);
+    }
+}
+
 /* The page margins. Hidden by default and shown only on a window wide enough
    to hold them beside the content without crowding it: the widest content
    column is 1040px, and two 160px rails with gaps need 1424px before they fit
@@ -3977,7 +4025,7 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar {
     }
 
     :root {
-        --ad-banner-height: 7rem;
+        --ad-banner-height: 3.125rem;
     }
 }