Initial commit: Sunscope UTCI forecast site

assets/about.css

@@ -0,0 +1,154 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: 'Manrope', sans-serif;
+  background: #f5edd6;
+  color: #1e1208;
+  line-height: 1.7;
+  min-height: 100vh;
+}
+
+a { color: #c8922a; text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 18px 32px;
+  gap: 28px;
+  border-bottom: 1px solid #e0d0a8;
+}
+
+header a {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 16px;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: #b09870;
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  padding-bottom: 2px;
+  transition: color 0.2s, border-color 0.2s;
+}
+header a:hover { color: #c8922a; border-bottom-color: rgba(200,146,42,0.5); }
+header a.active { color: #c8922a; }
+
+.logo {
+  margin-right: auto;
+  font-family: 'Fraunces', serif;
+  font-weight: 900;
+  font-size: 1.6rem;
+  color: #1e1208;
+  letter-spacing: -0.02em;
+  text-transform: none;
+}
+.logo-sun { color: #c8922a; font-weight: 900; font-style: normal; }
+.logo-scope { font-style: italic; font-weight: 900; color: #1e1208; }
+
+main {
+  max-width: 780px;
+  margin: 0 auto;
+  padding: 3rem 1.5rem 5rem;
+}
+
+h1 {
+  font-family: 'Fraunces', serif;
+  font-weight: 900;
+  font-size: 2.2rem;
+  color: #1e1208;
+  margin-bottom: 0.3rem;
+  line-height: 1.15;
+}
+
+.tagline {
+  font-family: 'Fraunces', serif;
+  font-style: italic;
+  font-size: 1.05rem;
+  color: #7a5c2a;
+  margin-bottom: 2.5rem;
+}
+
+h2 {
+  font-family: 'Fraunces', serif;
+  font-weight: 900;
+  font-size: 1.2rem;
+  color: #1e1208;
+  margin: 2.5rem 0 0.7rem;
+  padding-bottom: 0.3rem;
+  border-bottom: 2px solid #c9b08a;
+}
+
+p {
+  margin-bottom: 1.1rem;
+  color: #3a2a12;
+  font-size: 0.97rem;
+}
+
+strong { color: #1e1208; font-weight: 600; }
+em { color: #7a5c2a; font-style: italic; }
+
+.faq-block {
+  background: #fef8ea;
+  border: 1px solid #e0d0a8;
+  border-radius: 8px;
+  padding: 1.2rem 1.4rem;
+  margin-bottom: 1rem;
+}
+
+.faq-q {
+  font-weight: 600;
+  color: #1e1208;
+  margin-bottom: 0.4rem;
+  font-size: 0.97rem;
+}
+
+.faq-a {
+  color: #5a3e1a;
+  font-size: 0.93rem;
+  margin: 0;
+}
+
+.stress-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.2rem 0 1.5rem;
+  font-size: 0.9rem;
+}
+
+.stress-table th {
+  background: #ede4cc;
+  color: #5a3e1a;
+  font-weight: 600;
+  padding: 0.5rem 0.8rem;
+  text-align: left;
+  border-bottom: 1px solid #c9b08a;
+}
+
+.stress-table td {
+  padding: 0.45rem 0.8rem;
+  border-bottom: 1px solid #ede4cc;
+  color: #3a2a12;
+}
+
+.swatch {
+  display: inline-block;
+  width: 12px; height: 12px;
+  border-radius: 3px;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+
+footer {
+  text-align: center;
+  padding: 2rem 1.5rem;
+  font-size: 0.82rem;
+  color: #b09870;
+  border-top: 1px solid #e0d0a8;
+}
+
+@media (max-width: 600px) {
+  h1 { font-size: 1.6rem; }
+  main { padding: 2rem 1rem 4rem; }
+  header { padding: 14px 16px; }
+}