diff --git a/src/c3nav/site/static/site/css/c3nav.scss b/src/c3nav/site/static/site/css/c3nav.scss
index 0dc2c60b..dd13e31c 100644
--- a/src/c3nav/site/static/site/css/c3nav.scss
+++ b/src/c3nav/site/static/site/css/c3nav.scss
@@ -11,7 +11,7 @@
     --color-control-background: var(--color-initial);
     --color-control-background-hover: var(--color-tertiary);
     --color-control-hover: var(--color-foreground);
-    --color-control-active: var(--color-tertiary);
+    --color-control-active: var(--color-foreground);
     --color-control-divider: var(--color-quaternary);
     --color-control-disabled: var(--color-quaternary);
     --color-icon: var(--color-secondary);
@@ -28,12 +28,12 @@
 
     --color-pin: var(--color-foreground);
     --color-pin-background: transparent;
-    --color-pin-background-active: var(--color-quinary);
+    --color-pin-background-active: var(--color-quaternary);
     --color-pin-active: var(--color-foreground);
     --color-pin-hover: var(--color-foreground);
     --color-pin-background-hover: var(--color-tertiary);
 
-    --color-shadow: var(--color-quaternary);
+    --color-shadow: var(--color-quinary);
 
     --shadow-size: 4px;
 
@@ -1268,7 +1268,7 @@ ul.messages {
 
 ul.messages li {
     padding: 1.0rem;
-    border-radius: var(--border-radius);
+    border-radius: 0.4rem;
     pointer-events: auto;
 
     --message-color-bg: var(--color-background);
@@ -1277,25 +1277,34 @@ ul.messages li {
     --message-color-shadow: var(--message-color-fg);
 
     color: var(--message-color-fg);
-    box-shadow: var(--message-color-shadow) 0 0 calc(var(--shadow-size) * 3), inset var(--message-color-shadow) 0 0 var(--shadow-size);
-    border: 2px solid var(--message-color-border);
+    //box-shadow: var(--message-color-shadow) 0 0 calc(var(--shadow-size) * 3), inset var(--message-color-shadow) 0 0 var(--shadow-size);
+    //border: 2px solid var(--message-color-border);
+    border: 0.1rem solid var(--message-color-border);
     background-color: var(--message-color-bg);
 }
 
 ul.messages li.alert-info {
-    --message-color-fg: #00dbff;
+    --message-color-fg: #006688;
+    --message-color-bg: #DDE4FF;
+    --message-color-border: #006688;
 }
 
 ul.messages li.alert-success {
-    --message-color-fg: #56ff27;
+    --message-color-fg: #338800;
+    --message-color-bg: #E4FFDD;
+    --message-color-border: #339900;
 }
 
 ul.messages li.alert-warning {
-    --message-color-fg: #ff8f3f;
+    --message-color-fg: #CC6600;
+    --message-color-bg: #FFFFDD;
+    --message-color-border: #FF9900;
 }
 
 ul.messages li.alert-danger {
-    --message-color-fg: #ff4677;
+    --message-color-fg: #CC0000;
+    --message-color-bg: #FFEEEE;
+    --message-color-border: #CC0000;
 }
 
 .app-ads {
@@ -1704,14 +1713,13 @@ blink {
         cursor: pointer;
         background: var(--color-pin-background);
         border: 1px solid var(--color-pin-border);
-        box-shadow: inset 0 0 2px black;
+        box-shadow: inset var(--color-shadow) 0 0 var(--shadow-size);
 
 
         &.active {
             background: var(--color-pin-background-active);
             color: var(--color-pin-active);
             border-color: var(--color-pin-border-active);
-            box-shadow: inset var(--color-shadow) 0 0 var(--shadow-size);
         }
 
         &:hover {
@@ -1741,7 +1749,7 @@ blink {
                 border-radius: var(--border-radius-small);
                 width: 2rem;
                 height: 2rem;
-                box-shadow: var(--color-foreground) 0 0 var(var(--shadow-size) / 2), inset var(--color-foreground) 0 0 2px;
+                box-shadow: var(--color-foreground) 0 0 calc(var(--shadow-size) / 2), inset var(--color-foreground) 0 0 2px;
             }
         }
     }