feat: button hovers, less rounding, full bleed 50/50

app/assets/css/_component.css

@@ -1,17 +1,21 @@
 @utility button {
-  @apply cursor-pointer disabled:cursor-not-allowed bg-action text-white font-semibold rounded-xl no-underline w-fit;
+  @apply cursor-pointer disabled:cursor-not-allowed disabled:bg-gray-500 bg-action text-white hover:bg-accent font-semibold rounded-lg no-underline w-fit transition-colors ease-default duration-default;
+}
+
+@utility button-secondary {
+  @apply cursor-pointer disabled:cursor-not-allowed bg-transparent border-2 border-action text-action font-semibold rounded-lg no-underline w-fit transition-colors duration-default ease-default hover:border-accent hover:text-accent;
 }
 
 @utility button-sm {
-  @apply button px-4 py-2 text-base;
+  @apply px-4 py-2 text-base;
 }
 
 @utility button-md {
-  @apply button px-6 py-3 text-lg;
+  @apply px-6 py-3 text-lg;
 }
 
 @utility button-lg {
-  @apply button px-8 py-4 text-xl;
+  @apply px-8 py-4 text-xl;
 }
 
 @utility divider {

app/assets/css/main.css

@@ -30,8 +30,6 @@
   --spacing-vertical: 50px;
   --spacing-vertical-lg: 100px;
   --spacing-side: 50px;
-  --spacing-side-sm: 10px;
-  --spacing-side-offset: calc(var(--spacing-side) - var(--spacing-side-sm));
   --spacing-side-mobile: 25px;
   --spacing-max-width: 1500px;
 

app/components/base/ContentContainer.vue

@@ -2,25 +2,18 @@
   <component
     :is="as"
     data-name="container"
-    class="mx-auto w-full max-w-max-width"
+    class="mx-auto w-full max-w-max-width px-side-mobile md:px-side"
     :class="{
       'grid-12': grid,
-      'px-side-mobile md:px-side': padding === 'default',
-      'px-0 md:px-side-sm': padding === 'sm',
     }"
   >
     <slot />
   </component>
 </template>
 
 <script setup lang="ts">
-const {
-  as = "div",
-  grid = false,
-  padding = "default",
-} = defineProps<{
+const { as = "div", grid = false } = defineProps<{
   as?: "div" | "section";
   grid?: boolean;
-  padding?: "sm" | "default";
 }>();
 </script>

app/components/base/SkipLink.vue

@@ -2,7 +2,7 @@
   <div class="sr-only focus-within:not-sr-only">
     <button
       type="button"
-      class="button-sm fixed top-1.5 left-1.5 z-1000"
+      class="button button-sm fixed top-1.5 left-1.5 z-1000"
       @click="handleClick"
     >
       <slot />

app/components/modules/FiftyFifty.vue

@@ -1,59 +1,7 @@
 <template>
-  <ContentContainer
-    as="section"
-    :padding="background === 'Tan' ? 'sm' : 'default'"
-    class="mb-vertical md:mb-vertical-lg"
-  >
-    <div
-      class="grid-12 gap-y-7"
-      :class="{
-        'bg-secondary px-side-offset md:rounded-2xl overflow-hidden py-vertical':
-          background === 'Tan',
-      }"
-    >
-      <div
-        class="col-span-12 max-md:order-2 md:col-span-5 max-w-copy flex flex-col justify-center gap-y-6 mb-8 md:mb-0"
-        :class="{
-          'md:order-2 md:col-start-8': align === 'Left',
-        }"
-      >
-        <Heading as="h2">{{ data.heading }}</Heading>
-        <p class="type-eyebrow order-first">{{ data.eyebrow }}</p>
-        <RichTextRenderer :json="data?.copy?.json" />
-        <div class="flex flex-wrap gap-x-5 gap-y-3">
-          <InlineLink
-            v-if="data.callToAction?.url"
-            :href="data.callToAction.url"
-            :external="data.callToAction.external"
-            class="button-md"
-          >
-            {{ data.callToAction.text }}
-          </InlineLink>
-          <InlineLink
-            v-if="data.secondaryCallToAction?.url"
-            :href="data.secondaryCallToAction.url"
-            :external="data.secondaryCallToAction.external"
-            class="button-md"
-          >
-            {{ data.secondaryCallToAction.text }}
-          </InlineLink>
-        </div>
-      </div>
-      <div
-        v-if="data.image?.url"
-        class="col-span-12 max-md:order-1 md:col-span-6 my-auto relative"
-        :class="{
-          'md:col-start-7': align === 'Right',
-        }"
-      >
-        <ContentfulImage
-          :src="data.image.url"
-          :alt="data.image.description ?? ''"
-          sizes="95vw md:50vw lg:730px"
-          class="object-cover aspect-4/3 rounded-xl w-full"
-        />
-      </div>
-    </div>
+  <ContentContainer as="section" class="mb-vertical md:mb-vertical-lg">
+    <FiftyFiftySecondary v-if="background === 'Tan'" :data="data" />
+    <FiftyFiftyWhite v-else :data="data" />
   </ContentContainer>
 </template>
 
@@ -63,6 +11,5 @@ import type { FiftyFiftyFragment } from "~~/shared/types/graphql";
 
 const { data } = defineProps<ModuleProps<FiftyFiftyFragment>>();
 
-const align = computed(() => data.imageAlignment as "Left" | "Right");
 const background = computed(() => data.background as "White" | "Tan");
 </script>

app/components/modules/FiftyFiftySecondary.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    class="grid-12 bg-secondary max-md:-mx-side-mobile md:px-0 md:rounded-2xl overflow-hidden"
+  >
+    <div
+      class="col-span-12 max-md:order-2 md:col-span-5 max-w-copy max-md:mx-side-mobile flex flex-col justify-center gap-y-6 py-10"
+      :class="{
+        'md:order-2 md:col-start-8 md:mr-side': align === 'Left',
+        'md:ml-side': align === 'Right',
+      }"
+    >
+      <Heading as="h2">{{ data.heading }}</Heading>
+      <p class="type-eyebrow order-first">{{ data.eyebrow }}</p>
+      <RichTextRenderer :json="data?.copy?.json" />
+      <div class="flex flex-wrap gap-x-5 gap-y-3">
+        <InlineLink
+          v-if="data.callToAction?.url"
+          :href="data.callToAction.url"
+          :external="data.callToAction.external"
+          class="button button-md"
+        >
+          {{ data.callToAction.text }}
+        </InlineLink>
+        <InlineLink
+          v-if="data.secondaryCallToAction?.url"
+          :href="data.secondaryCallToAction.url"
+          :external="data.secondaryCallToAction.external"
+          class="button-secondary button-md"
+        >
+          {{ data.secondaryCallToAction.text }}
+        </InlineLink>
+      </div>
+    </div>
+    <div
+      v-if="data.image?.url"
+      class="col-span-12 max-md:order-1 md:col-span-7 relative flex items-center justify-center overflow-clip"
+      :class="{
+        'md:col-start-6': align === 'Right',
+      }"
+    >
+      <ContentfulImage
+        :src="data.image.url"
+        :alt="data.image.description ?? ''"
+        sizes="95vw md:50vw lg:730px"
+        class="object-cover aspect-4/3 w-full md:h-full max-w-none"
+      />
+      <div
+        class="absolute from-secondary to-transparent max-md:left-0 max-md:right-0 md:top-0 bottom-0 bg-linear-to-t max-md:h-1/3 md:w-1/3"
+        :class="{
+          'md:left-0 md:bg-linear-to-r': align === 'Right',
+          'md:right-0 md:bg-linear-to-l': align === 'Left',
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ModuleProps } from "~/types/module";
+import type { FiftyFiftyFragment } from "~~/shared/types/graphql";
+
+const { data } = defineProps<ModuleProps<FiftyFiftyFragment>>();
+
+const align = computed(() => data.imageAlignment as "Left" | "Right");
+</script>

app/components/modules/FiftyFiftyWhite.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="grid-12 gap-y-7">
+    <div
+      class="col-span-12 max-md:order-2 md:col-span-5 max-w-copy flex flex-col justify-center gap-y-6 mb-8 md:mb-0"
+      :class="{
+        'md:order-2 md:col-start-8': align === 'Left',
+      }"
+    >
+      <Heading as="h2">{{ data.heading }}</Heading>
+      <p class="type-eyebrow order-first">{{ data.eyebrow }}</p>
+      <RichTextRenderer :json="data?.copy?.json" />
+      <div class="flex flex-wrap gap-x-5 gap-y-3">
+        <InlineLink
+          v-if="data.callToAction?.url"
+          :href="data.callToAction.url"
+          :external="data.callToAction.external"
+          class="button button-md"
+        >
+          {{ data.callToAction.text }}
+        </InlineLink>
+        <InlineLink
+          v-if="data.secondaryCallToAction?.url"
+          :href="data.secondaryCallToAction.url"
+          :external="data.secondaryCallToAction.external"
+          class="button-secondary button-md"
+        >
+          {{ data.secondaryCallToAction.text }}
+        </InlineLink>
+      </div>
+    </div>
+    <div
+      v-if="data.image?.url"
+      class="col-span-12 max-md:order-1 md:col-span-6 my-auto relative flex items-center justify-center overflow-clip"
+      :class="{
+        'md:col-start-7': align === 'Right',
+      }"
+    >
+      <ContentfulImage
+        :src="data.image.url"
+        :alt="data.image.description ?? ''"
+        sizes="95vw md:50vw lg:730px"
+        class="object-cover aspect-4/3 w-full md:h-full rounded-lg"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ModuleProps } from "~/types/module";
+import type { FiftyFiftyFragment } from "~~/shared/types/graphql";
+
+const { data } = defineProps<ModuleProps<FiftyFiftyFragment>>();
+
+const align = computed(() => data.imageAlignment as "Left" | "Right");
+</script>

app/components/modules/HomepageHero.vue

@@ -34,7 +34,7 @@
         :alt="image.description ?? ''"
         sizes="50vw md:200px lg:400px"
         :class="[
-          'col-span-1 w-full aspect-4/3 object-cover rounded-xl',
+          'col-span-1 w-full aspect-4/3 object-cover rounded-lg',
           { 'mt-8': index === 1, '-mt-8': index === 2 },
         ]"
       />

app/components/navigation/MainNavigation.vue

@@ -16,7 +16,7 @@
               :href="link.url"
               :external="link.external"
               :aria-selected="isSelected(link.url)"
-              class="text-lg text-foreground no-underline px-4 py-2 hover:border-foreground border-2 border-transparent rounded-xl aria-selected:border-foreground"
+              class="text-lg text-foreground no-underline px-4 py-2 hover:border-foreground border-2 border-transparent rounded-lg aria-selected:border-foreground"
             >
               {{ link.text }}
             </InlineLink>
@@ -30,7 +30,7 @@
       :to="cta.url"
       :external="cta.external ?? false"
       :aria-selected="isSelected(cta.url)"
-      class="hidden nav:block floating-button border-background border-2 text-lg button-md fixed top-1.5"
+      class="hidden nav:block floating-button border-background border-2 text-lg button button-md fixed top-1.5"
     >
       {{ cta.text }}
     </NuxtLink>

app/components/navigation/MobileMenu.vue

@@ -38,7 +38,7 @@
                 :href="link.url"
                 :external="link.external ?? false"
                 :aria-selected="isSelected(link.url)"
-                class="text-2xl text-white no-underline px-4 py-2 border-2 border-transparent hover:border-white rounded-xl aria-selected:border-white"
+                class="text-2xl text-white no-underline px-4 py-2 border-2 border-transparent hover:border-white rounded-lg aria-selected:border-white"
                 @click="onLinkClick"
               >
                 {{ link.text }}
@@ -50,7 +50,7 @@
                 :href="cta.url"
                 :external="cta.external ?? false"
                 :aria-selected="isSelected(cta.url)"
-                class="text-2xl button-lg"
+                class="text-2xl button button-lg"
               >
                 {{ cta.text }}
               </InlineLink>

app/pages/login.vue

@@ -22,7 +22,11 @@
             </p>
           </div>
         </div>
-        <button type="submit" class="button-md w-full" :disabled="isLoading">
+        <button
+          type="submit"
+          class="button button-md w-full"
+          :disabled="isLoading"
+        >
           {{ isLoading ? "Loading..." : "Enter" }}
         </button>
       </form>