Improve BrainOrdure editorial UI

public/css/site.css

@@ -1,76 +1,97 @@
 :root {
-  --brand-dark: #121826;
-  --brand-accent: #b48a5a;
-  --paper: #fcfbf7;
-  --paper-2: #f4efe7;
-  --ink: #1e2430;
-  --text-muted-soft: #6b7280;
-}
-
-body {
-  background:
-    radial-gradient(circle at top left, rgba(180, 138, 90, 0.09), transparent 28%),
-    radial-gradient(circle at top right, rgba(18, 24, 38, 0.05), transparent 24%),
-    linear-gradient(180deg, #ffffff 0%, var(--paper) 24%, #f8f4ee 100%);
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --brand-dark: #212529;
+  --brand-accent: #0085A1;
+  --paper: #ffffff;
+  --paper-2: #f8f9fa;
+  --ink: #212529;
+  --text-muted-soft: #495057;
+  --border-soft: #e9ecef;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body.clean-blog {
+  background: var(--paper);
   color: var(--ink);
-  line-height: 1.65;
+  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  line-height: 1.7;
+  padding-top: 74px;
 }
 
-/* Navbar */
-.site-topbar {
-  height: 6px;
-  background: linear-gradient(90deg, var(--brand-accent), #d6b186 40%, #7c5c3a 100%);
+a {
+  color: var(--brand-dark);
+  text-decoration: none;
 }
 
-.navbar.bg-dark {
-  background-color: var(--brand-dark) !important;
+a:hover {
+  color: var(--brand-accent);
 }
 
-.navbar {
-  backdrop-filter: blur(8px);
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible,
+.btn:focus-visible {
+  outline: 3px solid rgba(0, 133, 161, 0.45);
+  outline-offset: 2px;
 }
 
-.brand {
-  font-size: 1.35rem;
-  font-weight: 800;
-  letter-spacing: -0.03em;
-  color: #fff !important;
-  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
+.skip-link {
+  position: absolute;
+  left: 1rem;
+  top: -4rem;
+  z-index: 1040;
+  padding: 0.75rem 1rem;
+  background: var(--brand-dark);
+  color: #fff;
+  font-weight: 700;
+  transition: top 0.15s ease;
 }
 
-.brand-tagline {
-  display: inline-block;
-  font-size: 0.72rem;
+.skip-link:focus {
+  top: 0.75rem;
+}
+
+/* Navbar */
+#mainNav {
+  background: rgba(255, 255, 255, 0.98);
+  border-bottom: 1px solid var(--border-soft);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
+  transition: all 0.2s ease-in-out;
+}
+
+.navbar-brand.brand {
+  font-family: "Lora", Georgia, "Times New Roman", serif;
+  font-size: 1.6rem;
   font-weight: 700;
-  color: rgba(255,255,255,0.55);
-  text-transform: uppercase;
-  letter-spacing: 0.18em;
-  margin-left: 0.5rem;
-  vertical-align: middle;
+  letter-spacing: -0.02em;
+  color: var(--brand-dark) !important;
 }
 
-.navbar .nav-link {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: rgba(255,255,255,0.72) !important;
-  padding-left: 1rem !important;
-  padding-right: 1rem !important;
-  transition: color 0.15s;
+#mainNav .nav-link {
+  color: var(--brand-dark) !important;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  font-size: 0.78rem;
+  padding: 0.85rem 0.95rem;
   position: relative;
 }
 
-.navbar .nav-link:hover,
-.navbar .nav-link.active {
-  color: #fff !important;
+#mainNav .nav-link:hover,
+#mainNav .nav-link.active {
+  color: var(--brand-accent) !important;
 }
 
-.navbar .nav-link.active::after {
+#mainNav .nav-link.active::after {
   content: "";
   position: absolute;
-  left: 1rem;
-  right: 1rem;
-  bottom: 0.2rem;
+  left: 0.95rem;
+  right: 0.95rem;
+  bottom: 0.35rem;
   height: 2px;
   background: var(--brand-accent);
   border-radius: 999px;
@@ -78,201 +99,405 @@ body {
 
 /* Main content */
 .site-main {
-  padding-top: 2rem;
-  padding-bottom: 3.5rem;
-  min-height: calc(100vh - 60px);
+  padding: 0 0 4rem;
+  min-height: calc(100vh - 74px);
+}
+
+/* Masthead */
+.masthead {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 22rem;
+  padding: 5rem 0 4rem;
+  margin: 0 0 3rem;
+  color: #fff;
+  background-color: #343a40;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-attachment: scroll;
+  background-size: cover;
 }
 
-/* Hero */
-.hero {
-  border: 1px solid rgba(18, 24, 38, 0.08);
-  border-radius: 1.5rem;
-  background:
-    linear-gradient(135deg, rgba(255,255,255,0.88), rgba(255,255,255,0.72)),
-    radial-gradient(circle at top right, rgba(180, 138, 90, 0.12), transparent 36%);
-  box-shadow: 0 20px 60px rgba(18, 24, 38, 0.08);
-  padding: 3rem 2rem;
+.masthead-home {
+  min-height: 28rem;
 }
 
-.home-sidebar {
-  max-width: 24rem;
-  border-radius: 1.2rem;
+.masthead-page,
+.masthead-post {
+  min-height: 18rem;
 }
 
-.hero .display-5,
+.masthead .overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(33, 37, 41, 0.42), rgba(33, 37, 41, 0.68));
+}
+
+.masthead .container {
+  position: relative;
+  z-index: 2;
+}
+
+.page-heading,
+.post-heading {
+  padding: 1rem 0;
+}
+
+.page-heading h1,
+.post-heading h1 {
+  font-family: "Lora", Georgia, "Times New Roman", serif;
+  font-size: clamp(2.8rem, 6vw, 5rem);
+  font-weight: 700;
+  line-height: 1.1;
+  margin: 0 0 0.75rem;
+}
+
+.page-heading .subheading,
+.post-heading .subheading {
+  display: block;
+  font-family: "Lora", Georgia, "Times New Roman", serif;
+  font-size: clamp(1.05rem, 2vw, 1.5rem);
+  font-weight: 400;
+  line-height: 1.35;
+  margin-top: 0.5rem;
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.post-heading-kicker,
+.post-preview-kicker {
+  display: inline-block;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.35rem;
+  border-bottom: 2px solid rgba(255,255,255,0.45);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.86);
+}
+
+.page-heading.text-center .subheading,
+.post-heading.text-center .subheading {
+  max-width: 42rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Typography */
 .page-title,
+.post-title,
+.hero .display-5,
 .card h1,
 .card h2,
 .card h3 {
-  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
+  font-family: "Lora", Georgia, "Times New Roman", serif;
   letter-spacing: -0.02em;
 }
 
-.eyebrow {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.78rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.18em;
-  color: var(--brand-accent);
+.lede,
+.post-subtitle,
+.prose {
+  max-width: 70ch;
 }
 
-.eyebrow::before {
-  content: "";
-  width: 2rem;
-  height: 1px;
-  background: currentColor;
+.lede {
+  font-size: 1.15rem;
+  color: var(--text-muted-soft);
 }
 
-.lede {
-  max-width: 42rem;
-  font-size: 1.08rem;
+.post-preview {
+  padding: 2rem 0;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.post-preview:first-of-type {
+  padding-top: 0;
+}
+
+.post-preview:last-of-type {
+  border-bottom: 0;
+}
+
+.post-preview .post-title {
+  font-size: clamp(1.8rem, 4vw, 2.35rem);
+  margin-bottom: 0.4rem;
+}
+
+.post-preview .post-subtitle {
+  font-family: "Lora", Georgia, "Times New Roman", serif;
+  font-size: 1.15rem;
+  font-weight: 400;
   color: var(--text-muted-soft);
+  margin-bottom: 0.75rem;
 }
 
-/* Cards */
-.card {
-  border: 1px solid rgba(18, 24, 38, 0.08);
-  border-radius: 1.1rem;
-  background: rgba(255,255,255,0.9);
+.post-meta {
+  font-size: 0.95rem;
+  font-style: italic;
+  color: var(--text-muted-soft);
+  margin-bottom: 0;
+}
+
+.post-meta-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.75rem;
+  align-items: center;
+  margin: 0.75rem 0 0;
+  font-size: 0.92rem;
+  color: var(--text-muted-soft);
+}
+
+.post-meta-inline .meta-sep {
+  color: #adb5bd;
+}
+
+.masthead .post-meta-inline {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.masthead .post-meta-inline .meta-sep {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.post-card {
   overflow: hidden;
+  background: #fff;
 }
 
-.card.shadow-sm {
-  box-shadow: 0 10px 32px rgba(18, 24, 38, 0.07) !important;
+.post-card-featured .card-body {
+  padding: 1.75rem;
 }
 
-.card-body {
-  padding: 1.35rem 1.35rem;
+.post-card-image {
+  display: block;
+  height: 12rem;
+  background: linear-gradient(135deg, rgba(0, 133, 161, 0.22), rgba(33, 37, 41, 0.06));
+  background-size: cover;
+  background-position: center;
 }
 
-/* Alerts (flash messages) */
-.alert {
-  border-radius: 1rem;
-  font-size: 0.9rem;
-  box-shadow: 0 8px 24px rgba(18, 24, 38, 0.04);
+.post-card-featured .post-card-image {
+  height: 16rem;
 }
 
-/* Post/article cards */
-article.card:hover {
-  box-shadow: 0 16px 40px rgba(18, 24, 38, 0.12) !important;
-  transition: box-shadow 0.2s, transform 0.2s;
-  transform: translateY(-1px);
+.post-card .post-title {
+  margin-bottom: 0.5rem;
 }
 
-.article-meta,
-.small.text-muted {
-  color: var(--text-muted-soft) !important;
+.post-card .post-subtitle {
+  margin-bottom: 0.9rem;
 }
 
-.prose {
-  max-width: 70ch;
-  font-size: 1.07rem;
+.story-aside {
+  position: sticky;
+  top: 96px;
 }
 
-.prose p:last-child {
-  margin-bottom: 0;
+.story-aside .card {
+  margin-bottom: 1rem;
 }
 
-.magazine-label {
+.topic-chip-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.topic-chip {
   display: inline-flex;
   align-items: center;
-  padding: 0.25rem 0.7rem;
-  border-radius: 999px;
-  background: rgba(180, 138, 90, 0.12);
-  color: #8b653f;
-  font-size: 0.75rem;
+  padding: 0.35rem 0.7rem;
+  border: 1px solid var(--border-soft);
+  background: #fff;
+  color: var(--ink);
+  font-size: 0.82rem;
   font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
 }
 
-.magazine-list .card {
-  border-left: 4px solid transparent;
+.post-meta a {
+  color: inherit;
+  text-decoration: underline;
 }
 
-.magazine-list .card:hover {
-  border-left-color: var(--brand-accent);
+/* Cards */
+.card {
+  border: 1px solid var(--border-soft);
+  border-radius: 0;
+  background: #fff;
 }
 
-.editorial-list li + li {
-  padding-top: 0.85rem;
-  border-top: 1px solid rgba(18, 24, 38, 0.08);
+.card.shadow-sm {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
 }
 
-.editorial-list a {
-  color: var(--ink);
+.card-body {
+  padding: 1.5rem;
 }
 
-.editorial-list a:hover {
-  color: #8b653f;
+article.card:hover {
+  transform: translateY(-1px);
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
+  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08) !important;
 }
 
-.feature-article {
-  position: relative;
+/* Content */
+.prose {
+  font-size: 1.05rem;
 }
 
-.feature-article::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background: linear-gradient(135deg, rgba(180, 138, 90, 0.06), transparent 35%);
+.prose p:last-child {
+  margin-bottom: 0;
 }
 
 .feature-dropcap:first-letter {
   float: left;
-  font-family: "Cormorant Garamond", Georgia, serif;
-  font-size: 4.2rem;
+  font-family: "Lora", Georgia, serif;
+  font-size: 4.1rem;
   line-height: 0.8;
   padding-right: 0.25rem;
-  padding-top: 0.2rem;
-  color: #8b653f;
+  padding-top: 0.15rem;
+  color: var(--brand-accent);
+}
+
+.post-body-preview {
+  margin-bottom: 2rem;
+}
+
+.post-body-preview .post-preview-content {
+  max-width: 68ch;
+  margin: 0 auto;
+}
+
+.post-card a {
+  color: inherit;
 }
 
+.post-card a:hover {
+  color: var(--brand-accent);
+}
+
+.post-card .card-body {
+  padding-top: 1.45rem;
+}
+
+.post-preview-content img,
+.ql-editor img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.35rem;
+}
+
+/* Comments */
 .comment-card {
-  border-left: 4px solid rgba(180, 138, 90, 0.32);
+  border: 1px solid var(--border-soft);
+  background: #fff;
+}
+
+.comment-card-body {
+  padding: 1.1rem 1.25rem;
 }
 
-.comment-card .small.text-muted {
-  letter-spacing: 0.02em;
+.comment-form-shell {
+  border: 1px solid var(--border-soft);
+  background: var(--paper-2);
 }
 
+.comment-form-inner {
+  padding: 1.4rem 1.4rem 1.1rem;
+}
+
+/* Buttons */
 .btn {
-  border-radius: 999px;
-  font-weight: 600;
+  border-radius: 0;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  font-size: 0.82rem;
 }
 
 .btn-primary {
-  background: linear-gradient(135deg, #27324a, #1b2436);
-  border-color: #1b2436;
+  background: var(--brand-accent);
+  border-color: var(--brand-accent);
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+  background: #00657b;
+  border-color: #00657b;
 }
 
 .btn-outline-primary {
-  border-color: rgba(27, 36, 54, 0.2);
-  color: #1b2436;
+  color: var(--brand-dark);
+  border-color: var(--brand-dark);
 }
 
-.btn-outline-primary:hover {
-  background: #1b2436;
-  border-color: #1b2436;
+.btn-outline-primary:hover,
+.btn-outline-primary:focus {
+  background: var(--brand-dark);
+  border-color: var(--brand-dark);
+  color: #fff;
 }
 
-.btn-outline-secondary {
-  border-color: rgba(18, 24, 38, 0.18);
-  color: var(--ink);
+/* Footer */
+.footer-divider {
+  margin: 3rem 0 2rem;
+  border-color: var(--border-soft);
+  opacity: 1;
+}
+
+.site-footer {
+  padding: 1rem 0 3rem;
+}
+
+/* General utilities used by the current views */
+.eyebrow {
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--brand-accent);
 }
 
-.btn-outline-secondary:hover {
-  background: rgba(18, 24, 38, 0.06);
+.magazine-label {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.7rem;
+  border: 1px solid rgba(0, 133, 161, 0.22);
+  background: rgba(0, 133, 161, 0.06);
+  color: var(--brand-accent);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.editorial-list li + li {
+  border-top: 1px solid var(--border-soft);
+  padding-top: 0.85rem;
+}
+
+.editorial-list a {
   color: var(--ink);
 }
 
+.editorial-list a:hover {
+  color: var(--brand-accent);
+}
+
+.small.text-muted,
+.text-muted {
+  color: var(--text-muted-soft) !important;
+}
+
+.alert {
+  border-radius: 0;
+}
+
+/* Editor */
 .editor-shell {
-  border: 1px solid rgba(18, 24, 38, 0.12);
-  border-radius: 1rem;
+  border: 1px solid var(--border-soft);
   overflow: hidden;
   background: #fff;
 }
@@ -283,14 +508,14 @@ article.card:hover {
 
 .ql-toolbar.ql-snow {
   border: 0;
-  border-bottom: 1px solid rgba(18, 24, 38, 0.10);
+  border-bottom: 1px solid var(--border-soft);
   padding: 0.75rem;
-  background: #fbfaf7;
+  background: #fbfbfb;
 }
 
 .ql-container.ql-snow {
   border: 0;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 16px;
 }
 
@@ -300,14 +525,8 @@ article.card:hover {
   line-height: 1.7;
 }
 
-.ql-editor img {
-  max-width: 100%;
-  border-radius: 0.75rem;
-  box-shadow: 0 12px 30px rgba(18, 24, 38, 0.12);
-}
-
 .ql-toolbar .btn {
-  border-radius: 999px;
+  border-radius: 0;
   padding: 0.35rem 0.8rem;
   font-size: 0.82rem;
 }