Restyle the frontend as an editorial magazine layout

Centred wordmark over a rule of category links, a lead article above a grid of
cards, centred article headers over a narrow reading column, and a footer split
into columns. Neutral warm-grey palette with a serif display face for headings
and small uppercase labels for metadata.

frontend/app/assets/css/main.css

@@ -1,13 +1,20 @@
 :root {
-  --color-text: #16181d;
+  /* Neutral editorial palette: warm off-white paper, near-black ink. */
-  --color-muted: #5b6270;
+  --color-ink: #14130f;
-  --color-bg: #ffffff;
+  --color-body: #3d3a34;
-  --color-surface: #f5f6f8;
+  --color-muted: #857f74;
-  --color-border: #e2e5ea;
+  --color-bg: #fbfaf7;
-  --color-accent: #2f4bd8;
+  --color-surface: #f1efe9;
-  --radius: 10px;
+  --color-border: #e0ddd4;
-  --width: 68rem;
+  --color-rule: #14130f;
-  --space: 1.25rem;
+
+  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
+  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+
+  --width: 76rem;
+  --width-prose: 40rem;
+  --space: 1.5rem;
+  --radius: 2px;
 }
 
 *,
@@ -18,32 +25,38 @@
 
 body {
   margin: 0;
-  color: var(--color-text);
+  color: var(--color-body);
   background: var(--color-bg);
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-family: var(--font-sans);
-  font-size: 1.05rem;
+  font-size: 1rem;
-  line-height: 1.65;
+  line-height: 1.7;
+  -webkit-font-smoothing: antialiased;
 }
 
 img {
+  display: block;
   max-width: 100%;
   height: auto;
 }
 
 a {
-  color: var(--color-accent);
+  color: inherit;
 }
 
 h1,
 h2,
 h3 {
-  line-height: 1.25;
+  margin: 0;
+  color: var(--color-ink);
+  font-family: var(--font-display);
+  font-weight: 400;
+  line-height: 1.2;
   text-wrap: balance;
 }
 
 :focus-visible {
-  outline: 3px solid var(--color-accent);
+  outline: 2px solid var(--color-ink);
-  outline-offset: 2px;
+  outline-offset: 3px;
 }
 
 .container {
@@ -64,52 +77,129 @@ h3 {
   z-index: 10;
   padding: 0.5rem 0.75rem;
   background: var(--color-bg);
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-ink);
-  border-radius: var(--radius);
 }
 
 .muted {
   color: var(--color-muted);
 }
 
+/* Small uppercase label used for categories, dates and section headings. */
+.kicker {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-muted);
+}
+
+.section-heading {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  margin-block: 4rem 2rem;
+}
+
+.section-heading::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--color-border);
+}
+
+/* Centred title block at the top of a listing page. */
+.page-header {
+  margin-bottom: 3.5rem;
+  padding-bottom: 2rem;
+  text-align: center;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.page-header h1 {
+  font-size: clamp(2rem, 5vw, 3rem);
+}
+
+.page-header .kicker {
+  margin-bottom: 0.75rem;
+}
+
 .card-grid {
   display: grid;
-  gap: 1.75rem;
+  gap: 3rem 2.5rem;
-  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
   padding: 0;
   margin: 0;
   list-style: none;
 }
 
+/* Article body */
 .prose {
-  max-width: 44rem;
+  max-width: var(--width-prose);
+  font-size: 1.075rem;
+}
+
+.prose h2,
+.prose h3 {
+  margin-block: 2.5rem 0.75rem;
+}
+
+.prose h2 {
+  font-size: 1.6rem;
+}
+
+.prose h3 {
+  font-size: 1.25rem;
+}
+
+.prose p,
+.prose ul,
+.prose ol {
+  margin-block: 0 1.4rem;
+}
+
+.prose a {
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+.prose blockquote {
+  margin: 2.5rem 0;
+  padding-left: 1.5rem;
+  border-left: 2px solid var(--color-ink);
+  font-family: var(--font-display);
+  font-size: 1.3rem;
+  line-height: 1.45;
+  color: var(--color-ink);
 }
 
 .prose img {
-  border-radius: var(--radius);
+  margin-block: 2rem;
 }
 
 .prose pre {
   overflow-x: auto;
-  padding: 1rem;
+  padding: 1rem 1.25rem;
   background: var(--color-surface);
   border-radius: var(--radius);
+  font-size: 0.9rem;
 }
 
-.tag-list {
+.prose code {
+  font-size: 0.9em;
+}
+
+.pagination {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: 2rem;
-  padding: 0;
+  align-items: center;
-  margin: 2rem 0 0;
+  justify-content: center;
-  list-style: none;
+  margin-top: 4rem;
-}
+  padding-top: 2rem;
-
+  border-top: 1px solid var(--color-border);
-.tag-list a {
+  font-size: 0.85rem;
-  display: inline-block;
+  letter-spacing: 0.06em;
-  padding: 0.15rem 0.6rem;
+  text-transform: uppercase;
-  font-size: 0.9rem;
-  background: var(--color-surface);
-  border-radius: 999px;
-  text-decoration: none;
 }

frontend/app/components/ArticleCard.vue

@@ -9,58 +9,77 @@ const cover = computed(() => mediaUrl(props.article.cover))
 
 <template>
   <article class="card">
-    <img
+    <NuxtLink class="cover-link" :to="`/blog/${article.slug}`" tabindex="-1" aria-hidden="true">
-      v-if="cover"
+      <img
-      class="cover"
+        v-if="cover"
-      :src="cover"
+        class="cover"
-      :alt="article.cover?.alternativeText ?? ''"
+        :src="cover"
-      :width="article.cover?.width ?? undefined"
+        :alt="article.cover?.alternativeText ?? ''"
-      :height="article.cover?.height ?? undefined"
+        :width="article.cover?.width ?? undefined"
-      loading="lazy"
+        :height="article.cover?.height ?? undefined"
-    >
+        loading="lazy"
+      >
+      <span v-else class="cover placeholder" />
+    </NuxtLink>
 
-    <p v-if="article.category" class="muted meta">
+    <p v-if="article.category" class="kicker">{{ article.category.name }}</p>
-      {{ article.category.name }}
-    </p>
 
     <h2>
       <NuxtLink :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLink>
     </h2>
 
-    <p class="muted meta">
+    <p class="kicker date">
       <time :datetime="isoDate(article.publishedAt)">{{ formatDate(article.publishedAt) }}</time>
     </p>
   </article>
 </template>
 
 <style scoped>
-.card h2 {
+.cover-link {
-  margin: 0.35rem 0 0.5rem;
+  display: block;
-  font-size: 1.2rem;
+  overflow: hidden;
-}
-
-.card h2 a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.card h2 a:hover {
-  text-decoration: underline;
-}
-
-.card p {
-  margin: 0 0 0.5rem;
 }
 
 .cover {
   width: 100%;
-  aspect-ratio: 16 / 9;
+  aspect-ratio: 4 / 5;
   object-fit: cover;
-  border-radius: var(--radius);
   background: var(--color-surface);
+  transition: transform 0.4s ease;
 }
 
-.meta {
+.cover-link:hover .cover {
-  font-size: 0.9rem;
+  transform: scale(1.03);
+}
+
+.placeholder {
+  display: block;
+}
+
+.kicker {
+  margin-top: 1.1rem;
+}
+
+h2 {
+  margin-top: 0.5rem;
+  font-size: 1.35rem;
+}
+
+h2 a {
+  text-decoration: none;
+  background-image: linear-gradient(var(--color-ink), var(--color-ink));
+  background-size: 0 1px;
+  background-position: 0 100%;
+  background-repeat: no-repeat;
+  transition: background-size 0.3s ease;
+}
+
+h2 a:hover {
+  background-size: 100% 1px;
+}
+
+.date {
+  margin-top: 0.6rem;
+  font-weight: 400;
 }
 </style>

frontend/app/layouts/default.vue

@@ -12,17 +12,21 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
     <a class="skip-link" href="#main">Skip to content</a>
 
     <header class="site-header">
-      <div class="container header-inner">
+      <div class="container">
-        <NuxtLink to="/" class="brand">{{ SITE_NAME }}</NuxtLink>
+        <p class="wordmark">
-        <nav aria-label="Main navigation">
+          <NuxtLink to="/">{{ SITE_NAME }}</NuxtLink>
-          <ul>
+        </p>
-            <li><NuxtLink to="/blog">Articles</NuxtLink></li>
+        <p class="tagline kicker">{{ SITE_DESCRIPTION }}</p>
-            <li v-for="category in categories" :key="category.slug">
-              <NuxtLink :to="`/category/${category.slug}`">{{ category.name }}</NuxtLink>
-            </li>
-          </ul>
-        </nav>
       </div>
+
+      <nav class="site-nav" aria-label="Main navigation">
+        <ul class="container">
+          <li><NuxtLink to="/blog">All articles</NuxtLink></li>
+          <li v-for="category in categories" :key="category.slug">
+            <NuxtLink :to="`/category/${category.slug}`">{{ category.name }}</NuxtLink>
+          </li>
+        </ul>
+      </nav>
     </header>
 
     <main id="main" class="container site-main">
@@ -30,9 +34,34 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
     </main>
 
     <footer class="site-footer">
-      <div class="container">
+      <div class="container footer-inner">
-        <p class="muted">&copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}</p>
+        <div class="footer-block">
+          <p class="wordmark small">{{ SITE_NAME }}</p>
+          <p class="muted">{{ SITE_DESCRIPTION }}</p>
+        </div>
+
+        <nav class="footer-block" aria-label="Categories">
+          <p class="kicker">Categories</p>
+          <ul>
+            <li v-for="category in categories" :key="category.slug">
+              <NuxtLink :to="`/category/${category.slug}`">{{ category.name }}</NuxtLink>
+            </li>
+            <li v-if="!categories.length" class="muted">Nothing published yet</li>
+          </ul>
+        </nav>
+
+        <nav class="footer-block" aria-label="Sections">
+          <p class="kicker">Browse</p>
+          <ul>
+            <li><NuxtLink to="/">Home</NuxtLink></li>
+            <li><NuxtLink to="/blog">All articles</NuxtLink></li>
+          </ul>
+        </nav>
       </div>
+
+      <p class="container copyright kicker">
+        &copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}. All rights reserved.
+      </p>
     </footer>
   </div>
 </template>
@@ -44,51 +73,111 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
   min-height: 100vh;
 }
 
+/* Header: centred wordmark over a thin rule of links. */
 .site-header {
+  padding-top: 2.5rem;
+  text-align: center;
   border-bottom: 1px solid var(--color-border);
 }
 
-.header-inner {
+.wordmark {
-  display: flex;
+  margin: 0;
-  flex-wrap: wrap;
+  font-family: var(--font-display);
-  align-items: center;
+  font-size: clamp(1.75rem, 5vw, 2.75rem);
-  gap: 1rem 2rem;
+  letter-spacing: 0.02em;
-  padding-block: 1rem;
+  color: var(--color-ink);
 }
 
-.brand {
+.wordmark a {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: inherit;
   text-decoration: none;
 }
 
-nav ul {
+.tagline {
+  margin-top: 0.6rem;
+}
+
+.site-nav {
+  margin-top: 2rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.site-nav ul {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 0.25rem 2rem;
-  padding: 0;
+  justify-content: center;
+  padding-block: 0.9rem;
   margin: 0;
   list-style: none;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
 }
 
-nav a {
+.site-nav a {
-  color: inherit;
   text-decoration: none;
+  color: var(--color-body);
+  padding-block: 0.25rem;
+  border-bottom: 1px solid transparent;
 }
 
-nav a:hover,
+.site-nav a:hover,
-nav a.router-link-active {
+.site-nav a.router-link-active {
-  text-decoration: underline;
+  color: var(--color-ink);
+  border-bottom-color: var(--color-ink);
 }
 
 .site-main {
   flex: 1;
-  padding-block: 2.5rem 4rem;
+  padding-block: 3.5rem 5rem;
 }
 
+/* Footer: columns, then a centred copyright line. */
 .site-footer {
-  padding-block: 1.5rem;
+  padding-block: 3.5rem 2rem;
+  background: var(--color-surface);
+  border-top: 1px solid var(--color-border);
+}
+
+.footer-inner {
+  display: grid;
+  gap: 2.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  padding-bottom: 2.5rem;
+}
+
+.footer-block p:last-of-type {
+  margin-bottom: 0;
+}
+
+.wordmark.small {
+  font-size: 1.4rem;
+}
+
+.footer-block ul {
+  padding: 0;
+  margin: 0.9rem 0 0;
+  list-style: none;
+  font-size: 0.95rem;
+}
+
+.footer-block li + li {
+  margin-top: 0.35rem;
+}
+
+.footer-block a {
+  text-decoration: none;
+}
+
+.footer-block a:hover {
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+.copyright {
+  padding-top: 1.75rem;
+  text-align: center;
   border-top: 1px solid var(--color-border);
 }
 </style>

frontend/app/pages/blog/[slug].vue

@@ -48,19 +48,25 @@ useHead({
 
 <template>
   <article v-if="article">
-    <nav class="breadcrumb muted" aria-label="Breadcrumb">
+    <header class="article-header">
-      <NuxtLink to="/blog">Articles</NuxtLink>
+      <nav class="kicker" aria-label="Breadcrumb">
-      <template v-if="article.category">
+        <NuxtLink to="/blog">Articles</NuxtLink>
-        <span aria-hidden="true"> / </span>
+        <template v-if="article.category">
-        <NuxtLink :to="`/category/${article.category.slug}`">{{ article.category.name }}</NuxtLink>
+          <span aria-hidden="true"> / </span>
-      </template>
+          <NuxtLink :to="`/category/${article.category.slug}`">
-    </nav>
+            {{ article.category.name }}
+          </NuxtLink>
+        </template>
+      </nav>
 
-    <h1>{{ article.title }}</h1>
+      <h1>{{ article.title }}</h1>
 
-    <p class="muted meta">
+      <p class="kicker date">
-      <time :datetime="isoDate(article.publishedAt)">{{ formatDate(article.publishedAt) }}</time>
+        <time :datetime="isoDate(article.publishedAt)">
-    </p>
+          {{ formatDate(article.publishedAt) }}
+        </time>
+      </p>
+    </header>
 
     <img
       v-if="cover"
@@ -73,30 +79,66 @@ useHead({
 
     <!-- eslint-disable-next-line vue/no-v-html -- rendered server-side from editor Markdown -->
     <div class="prose" v-html="article.html" />
+
+    <p class="back">
+      <NuxtLink to="/blog">Back to all articles</NuxtLink>
+    </p>
   </article>
 </template>
 
 <style scoped>
-article {
+.article-header {
-  max-width: 44rem;
+  max-width: 46rem;
+  margin-inline: auto;
+  text-align: center;
 }
 
-.breadcrumb {
+.article-header nav a {
-  font-size: 0.9rem;
+  text-decoration: none;
+}
+
+.article-header nav a:hover {
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
 }
 
 h1 {
-  margin: 0.5rem 0 0.25rem;
+  margin: 1rem 0 0;
-  font-size: clamp(1.8rem, 4vw, 2.6rem);
+  font-size: clamp(2rem, 5vw, 3.2rem);
 }
 
-.meta {
+.date {
-  margin-top: 0;
+  margin-top: 1rem;
+  font-weight: 400;
+}
+
+.prose {
+  margin-inline: auto;
+}
+
+.back {
+  max-width: var(--width-prose);
+  margin: 4rem auto 0;
+  padding-top: 2rem;
+  border-top: 1px solid var(--color-border);
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.back a {
+  text-decoration: none;
+  border-bottom: 1px solid var(--color-ink);
+  padding-bottom: 0.3rem;
 }
 
 .cover {
   width: 100%;
-  margin-block: 1.5rem;
+  aspect-ratio: 3 / 2;
-  border-radius: var(--radius);
+  object-fit: cover;
+  margin-block: 3rem;
+  background: var(--color-surface);
 }
 </style>

frontend/app/pages/blog/index.vue

@@ -27,7 +27,10 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
 
 <template>
   <div>
-    <h1>Articles</h1>
+    <header class="page-header">
+      <p class="kicker">The archive</p>
+      <h1>Articles</h1>
+    </header>
 
     <p v-if="error">Articles could not be loaded. Please try again later.</p>
 
@@ -59,12 +62,3 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
   </div>
 </template>
 
-<style scoped>
-.pagination {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.5rem;
-  align-items: center;
-  margin-top: 3rem;
-}
-</style>

frontend/app/pages/category/[slug].vue

@@ -35,11 +35,10 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
 
 <template>
   <div>
-    <p class="breadcrumb muted">
+    <header class="page-header">
-      <NuxtLink to="/blog">Articles</NuxtLink>
+      <p class="kicker">Category</p>
-    </p>
+      <h1>{{ category?.name }}</h1>
-
+    </header>
-    <h1>{{ category?.name }}</h1>
 
     <p v-if="error">Articles could not be loaded. Please try again later.</p>
 
@@ -69,16 +68,3 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
   </div>
 </template>
 
-<style scoped>
-.breadcrumb {
-  font-size: 0.9rem;
-}
-
-.pagination {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.5rem;
-  align-items: center;
-  margin-top: 3rem;
-}
-</style>

frontend/app/pages/index.vue

@@ -6,7 +6,12 @@ const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles
   query: { page: 1 },
 })
 
-const articles = computed(() => data.value?.items.slice(0, 6) ?? [])
+/** The newest article leads the page; the next six fill the grid below it. */
+const featured = computed(() => data.value?.items[0] ?? null)
+const rest = computed(() => data.value?.items.slice(1, 7) ?? [])
+
+const mediaUrl = useMediaUrl()
+const featuredCover = computed(() => mediaUrl(featured.value?.cover))
 
 const { public: config } = useRuntimeConfig()
 
@@ -25,40 +30,139 @@ useSeoMeta({
 
 <template>
   <div>
-    <section class="hero">
-      <h1>{{ SITE_NAME }}</h1>
-      <p class="muted">{{ SITE_DESCRIPTION }}</p>
-    </section>
-
-    <h2>Latest articles</h2>
-
     <p v-if="error">Articles could not be loaded. Please try again later.</p>
 
-    <p v-else-if="!articles.length">Nothing has been published yet.</p>
+    <p v-else-if="!featured">Nothing has been published yet.</p>
 
-    <ul v-else class="card-grid">
+    <template v-else>
-      <li v-for="article in articles" :key="article.slug">
+      <article class="featured">
-        <ArticleCard :article="article" />
+        <NuxtLink class="featured-cover" :to="`/blog/${featured.slug}`" tabindex="-1" aria-hidden="true">
-      </li>
+          <img
-    </ul>
+            v-if="featuredCover"
+            :src="featuredCover"
+            :alt="featured.cover?.alternativeText ?? ''"
+            :width="featured.cover?.width ?? undefined"
+            :height="featured.cover?.height ?? undefined"
+          >
+          <span v-else class="placeholder" />
+        </NuxtLink>
 
-    <p class="more">
+        <div class="featured-text">
-      <NuxtLink to="/blog">See all articles</NuxtLink>
+          <p class="kicker">
-    </p>
+            {{ featured.category ? featured.category.name : 'Latest' }}
+          </p>
+          <h1>
+            <NuxtLink :to="`/blog/${featured.slug}`">{{ featured.title }}</NuxtLink>
+          </h1>
+          <p class="kicker date">
+            <time :datetime="isoDate(featured.publishedAt)">
+              {{ formatDate(featured.publishedAt) }}
+            </time>
+          </p>
+          <p class="read-more">
+            <NuxtLink :to="`/blog/${featured.slug}`">Read the article</NuxtLink>
+          </p>
+        </div>
+      </article>
+
+      <template v-if="rest.length">
+        <h2 class="section-heading kicker">More stories</h2>
+
+        <ul class="card-grid">
+          <li v-for="article in rest" :key="article.slug">
+            <ArticleCard :article="article" />
+          </li>
+        </ul>
+      </template>
+
+      <p class="more">
+        <NuxtLink to="/blog">View all articles</NuxtLink>
+      </p>
+    </template>
   </div>
 </template>
 
 <style scoped>
-.hero {
+.featured {
-  margin-bottom: 3rem;
+  display: grid;
+  gap: 2.5rem;
+  align-items: center;
+  grid-template-columns: 1fr;
 }
 
-.hero h1 {
+@media (min-width: 52rem) {
-  margin-bottom: 0.25rem;
+  .featured {
-  font-size: clamp(2rem, 5vw, 3rem);
+    grid-template-columns: 1.35fr 1fr;
+    gap: 3.5rem;
+  }
+}
+
+.featured-cover {
+  display: block;
+  overflow: hidden;
+}
+
+.featured-cover img,
+.placeholder {
+  width: 100%;
+  aspect-ratio: 3 / 2;
+  object-fit: cover;
+  background: var(--color-surface);
+}
+
+.featured h1 {
+  margin-top: 0.6rem;
+  font-size: clamp(2rem, 4.5vw, 3.1rem);
+}
+
+.featured h1 a {
+  text-decoration: none;
+}
+
+.featured h1 a:hover {
+  text-decoration: underline;
+  text-underline-offset: 0.12em;
+}
+
+.date {
+  margin-top: 1rem;
+  font-weight: 400;
+}
+
+.read-more {
+  margin-top: 1.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.read-more a {
+  padding-bottom: 0.35rem;
+  text-decoration: none;
+  border-bottom: 1px solid var(--color-ink);
 }
 
 .more {
-  margin-top: 2.5rem;
+  margin-top: 4rem;
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.more a {
+  padding: 0.85rem 2.5rem;
+  text-decoration: none;
+  border: 1px solid var(--color-ink);
+  color: var(--color-ink);
+  display: inline-block;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.more a:hover {
+  background: var(--color-ink);
+  color: var(--color-bg);
 }
 </style>