feat: implement screendesign

assets/styles/components/button.css

@@ -1,7 +1,8 @@
 .button {
-    @apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8 cursor-pointer;
+    @apply inline-flex items-center justify-center space-x-2 h-10 leading-10 px-4 md:px-8 cursor-pointer;
     @apply uppercase leading-none text-center;
     @apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-light;
+    @apply rounded-md;
 }
 
 .button--small {
@@ -12,38 +13,24 @@
     @apply block w-full;
 }
 
-.bg-button {
-    @apply bg-none bg-primary-dark text-white;
-    @apply hover:bg-badge-gradient;
+.button--secondary {
+    @apply bg-none bg-primary-light text-white;
+    @apply hover:bg-primary-light/80;
 }
 
-
-.bg-button--active,
-.bg-button--secondary {
-    @apply bg-badge-gradient text-white;
-    @apply hover:bg-none hover:bg-pink;
+.button--primary {
+    @apply bg-pink text-white;
+    @apply hover:bg-none hover:bg-pink/80;
 }
 
-.bg-button--muted {
+.button--muted {
     @apply bg-zinc-300 hover:bg-zinc-300;
 }
 
-.bg-button--dark {
+.button--dark {
     @apply bg-primary-dark;
 }
 
-.bg-button--light {
-    @apply bg-white border-2;
-    @apply font-bold;
-    @apply border-primary-light text-primary;
-}
-
-.bg-button--light:hover,
-.bg-button--light.button--active {
-    @apply bg-white;
-    @apply border-secondary text-secondary;
-}
-
 .button[disabled] {
     @apply cursor-not-allowed;
 }

assets/styles/components/forms.css

@@ -4,7 +4,13 @@ label.required:after {
 }
 
 .form-field {
-    @apply border-zinc-400 focus:border-zinc-800 ring-0 focus:outline-2 focus:outline-offset-2 focus:outline-primary-light mt-1 block w-full;
+    @apply border-zinc-400 ring-0 mt-1 block w-full rounded-md;
+    @apply focus:outline-primary-light focus:border-zinc-800 focus:outline-2 focus:outline-offset-2;
+}
+
+#participant-form .form-field,
+#form-payment .form-field {
+    @apply bg-primary-bg border-primary-bg;
 }
 
 .form-field--has-error {

assets/styles/components/menu.css

@@ -1,11 +0,0 @@
-.menu--main {
-    @apply flex items-center m-0 divide-x divide-white;
-}
-
-.menu--main a {
-    @apply block py-2 px-4 text-white hover:bg-secondary hover:text-zinc-800 text-sm md:text-base;
-}
-
-.menu--main .current a {
-    @apply bg-secondary text-zinc-800;
-}

assets/styles/components/pagination.css

@@ -0,0 +1,60 @@
+:root {
+    --pagination-skew: 2rem;
+    --pagination-border-width: 1px;
+}
+
+.pagination {
+    @apply flex h-12 lg:h-16 overflow-hidden bg-primary-bg shadow-md;
+}
+
+.pagination-item {
+    flex: 1 1 0;
+    margin-right: calc(-1 * var(--pagination-skew));
+    @apply relative;
+}
+
+.pagination-item:last-child {
+    @apply mr-0;
+}
+
+/* Outer clip-path for button shape */
+.pagination-item:first-child {
+    clip-path: polygon(0 0, calc(100% - var(--pagination-skew)) 0, 100% 100%, 0 100%);
+}
+
+.pagination-item:not(:first-child):not(:last-child) {
+    clip-path: polygon(0 0, calc(100% - var(--pagination-skew)) 0, 100% 100%, var(--pagination-skew) 100%);
+}
+
+.pagination-item:last-child {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pagination-skew) 100%);
+}
+
+/* Border and content wrappers */
+.pagination-item__border {
+    @apply w-full h-full flex items-center justify-center bg-primary-dark/10;
+}
+
+.pagination-item__inner {
+    @apply w-full h-full flex items-center justify-center;
+    @apply lg:text-2xl font-bold;
+}
+
+a.pagination-item__border > .pagination-item__inner:hover {
+    @apply bg-primary-light text-white;
+}
+
+/* Inner clip-path for border effect */
+.pagination-item:first-child .pagination-item__inner {
+    clip-path: polygon(0 0, calc(100% - var(--pagination-skew)) 0, 100% 100%, 0 100%);
+}
+
+.pagination-item:not(:first-child) .pagination-item__inner {
+    /* No left/bottom-left border on overlapping edge to prevent double borders */
+    clip-path: polygon(0 0, calc(100% - var(--pagination-skew) - var(--pagination-border-width)) 0, calc(100% - var(--pagination-border-width)) 100%, var(--pagination-skew) 100%);
+}
+
+.pagination-item:last-child .pagination-item__inner {
+    /* No left/bottom-left border on overlapping edge, no right border */
+    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pagination-skew) 100%);
+}

assets/styles/components/table-responsive.css

@@ -1,20 +0,0 @@
-.responsive {
-    @apply text-sm md:text-base;
-}
-
-.responsive thead {
-    @apply hidden md:table-header-group;
-}
-
-.responsive tbody tr {
-    @apply block mb-2 md:table-row;
-}
-
-.responsive td {
-    @apply grid grid-cols-2 gap-x-2 last:col-span-2 md:table-cell;
-}
-
-.responsive td:before {
-    content: attr(data-label);
-    @apply block font-bold last:hidden md:hidden;
-}