Сайт: единая оболочка — один генератор, один шаблон, один CSS

assets/style.css

@@ -1,3 +1,11 @@
+/*
+ * style.css — оформление всего сайта Эврики.
+ *
+ * Один набор дизайн-токенов и один файл на весь сайт: главная и галерея больше
+ * не имеют каждый своего CSS с разными именами переменных. Ширина текста —
+ * --max (780px), ширина галереи и лент — --max-wide (1200px).
+ */
+
 :root {
   --bg: #0e1013;
   --surface: #16191e;
@@ -8,11 +16,12 @@
   --accent-soft: #f0c877;
   --border: #262b33;
   --max: 780px;
+  --max-wide: 1200px;
 }
 
 * { box-sizing: border-box; }
 
-html { scroll-behavior: smooth; }
+html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
 
 body {
   margin: 0;
@@ -25,12 +34,14 @@ body {
 a { color: var(--accent-soft); text-decoration: none; }
 a:hover { text-decoration: underline; }
 
+/* -- шапка и навигация ---------------------------------------------------- */
+
 .top {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 1rem;
-  max-width: var(--max);
+  max-width: var(--max-wide);
   margin: 0 auto;
   padding: 1.4rem 1.25rem;
   border-bottom: 1px solid var(--border);
@@ -44,9 +55,20 @@ a:hover { text-decoration: underline; }
 }
 .brand:hover { text-decoration: none; color: var(--accent-soft); }
 
-.top nav { display: flex; gap: 1.25rem; }
-.top nav a { color: var(--muted); font-size: 0.95rem; }
-.top nav a:hover { color: var(--accent-soft); }
+.top nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
+.top nav a {
+  color: var(--muted);
+  font-size: 0.95rem;
+  border-bottom: 1px solid transparent;
+  padding-bottom: 2px;
+}
+.top nav a:hover { color: var(--accent-soft); text-decoration: none; }
+.top nav a.active {
+  color: var(--text);
+  border-color: var(--accent);
+}
+
+/* -- основная колонка ----------------------------------------------------- */
 
 main {
   max-width: var(--max);
@@ -54,6 +76,9 @@ main {
   padding: 0 1.25rem 4rem;
 }
 
+/* галерея и другие «широкие» страницы: работы дышат на 1200px */
+main.wide { max-width: var(--max-wide); }
+
 .hero { padding: 3.5rem 0 1rem; }
 .hero h1 {
   font-size: clamp(2rem, 5vw, 2.9rem);
@@ -65,7 +90,7 @@ main {
 .lede {
   font-size: 1.2rem;
   color: var(--muted);
-  max-width: 60ch;
+  max-width: 62ch;
 }
 
 section { padding: 1.75rem 0; border-top: 1px solid var(--border); }
@@ -100,10 +125,7 @@ p { margin: 0 0 1rem; }
 .values li { margin-bottom: 0.6rem; color: var(--muted); }
 .values strong { color: var(--text); }
 
-.cta {
-  text-align: center;
-  padding: 2.5rem 0;
-}
+.cta { text-align: center; padding: 2.5rem 0; }
 .cta .button {
   display: inline-block;
   margin-top: 0.5rem;
@@ -124,12 +146,105 @@ p { margin: 0 0 1rem; }
 }
 .placeholder p:last-child { margin-bottom: 0; }
 
+/* -- подвал --------------------------------------------------------------- */
+
 footer {
-  max-width: var(--max);
+  max-width: var(--max-wide);
   margin: 0 auto;
   padding: 1.5rem 1.25rem 3rem;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
   border-top: 1px solid var(--border);
   color: var(--muted);
   font-size: 0.88rem;
 }
-footer p { margin: 0; }
+footer a { color: var(--muted); border-bottom: 1px solid transparent; }
+footer a:hover { color: var(--accent-soft); border-color: var(--accent); text-decoration: none; }
+
+/* -- галерея: стены музея, свет на работах -------------------------------- */
+
+.sr-only {
+  position: absolute; width: 1px; height: 1px;
+  padding: 0; margin: -1px; overflow: hidden;
+  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+.grid .card {
+  display: block;
+  padding: 0;
+  overflow: hidden;
+  border-radius: 6px;
+  transition: border-color .18s ease, transform .18s ease;
+}
+.grid .card:hover { border-color: var(--accent); transform: translateY(-2px); }
+
+.grid .card img {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  background: #000;
+}
+
+.grid .card-title {
+  display: block;
+  padding: 12px 14px;
+  font-size: 15px;
+  color: var(--text);
+}
+
+/* -- страница одной работы ------------------------------------------------ */
+
+.work {
+  display: grid;
+  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
+  gap: 40px;
+  align-items: start;
+  margin-top: 24px;
+}
+
+.work figure { margin: 0; }
+.work figure img {
+  display: block;
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #000;
+}
+.zoom { display: block; cursor: zoom-in; }
+.zoom img { transition: opacity .18s ease; }
+.zoom:hover img { opacity: .92; }
+
+.work .meta h1 { margin: 0 0 6px; font-size: 26px; font-weight: 600; }
+.work .when { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
+.work .note { margin: 0; font-size: 16px; }
+.work .full { margin: 20px 0 0; font-size: 14px; }
+.work .full a { color: var(--accent); border-bottom: 1px solid transparent; }
+.work .full a:hover { border-color: var(--accent); text-decoration: none; }
+
+.worknav {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 48px;
+  padding-top: 20px;
+  border-top: 1px solid var(--border);
+  font-size: 14px;
+}
+.pager { color: var(--muted); }
+.pager:hover { color: var(--accent-soft); }
+
+/* -- адаптив -------------------------------------------------------------- */
+
+@media (max-width: 780px) {
+  .work { grid-template-columns: 1fr; gap: 24px; }
+  .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
+  .top { padding-top: 20px; }
+}