Add logo, animated explainer, trust section and photo-privacy guides

Reposition around EXIF/GPS/C2PA privacy, replace dead HowTo/FAQ schema, add three guide pages with sitemap and internal links. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-20 07:23:55 +06:00
1 parent 99b4b22352
commit 28a8151cc0
@@ -0,0 +1,123 @@
+/* Guide pages: long-form reading layout on top of the design system. */
+.guide {
+  padding-block: var(--space-7) var(--space-9);
+}
+
+.guide .crumbs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-bottom: var(--space-4);
+  padding-left: 0;
+  color: var(--text-3);
+  font-size: var(--fs-2);
+  line-height: var(--lh-2);
+  list-style: none;
+}
+
+.guide .crumbs li + li::before {
+  content: "/";
+  margin-right: var(--space-2);
+}
+
+.guide article {
+  display: grid;
+  gap: var(--space-4);
+  max-width: calc(var(--space-9) * 6);
+}
+
+.guide h1 {
+  font-size: var(--fs-7);
+  line-height: var(--lh-7);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+.guide h2 {
+  margin-top: var(--space-5);
+  font-size: var(--fs-5);
+  line-height: var(--lh-5);
+  font-weight: 600;
+}
+
+.guide .lead {
+  color: var(--text-2);
+  font-size: var(--fs-4);
+  line-height: var(--lh-4);
+}
+
+.guide p,
+.guide li {
+  font-size: var(--fs-3);
+  line-height: var(--lh-3);
+  color: var(--text-2);
+}
+
+.guide ul,
+.guide ol {
+  display: grid;
+  gap: var(--space-2);
+  padding-left: var(--space-5);
+}
+
+.guide strong {
+  color: var(--text-1);
+  font-weight: 600;
+}
+
+.guide .callout {
+  padding: var(--space-4);
+  border: var(--border-w) solid var(--border);
+  border-left: var(--space-1) solid var(--accent);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+}
+
+.guide .cta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  align-items: center;
+  padding: var(--space-5);
+  border: var(--border-w) solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+}
+
+.guide .cta p {
+  flex: 1 1 calc(var(--space-9) * 3);
+  color: var(--text-1);
+}
+
+.guide .meta {
+  color: var(--text-3);
+  font-size: var(--fs-2);
+  line-height: var(--lh-2);
+}
+
+.guide .related ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.guide .index-list {
+  display: grid;
+  gap: var(--space-3);
+  margin-top: var(--space-5);
+}
+
+.guide .index-list a.card {
+  display: grid;
+  gap: var(--space-1);
+  padding: var(--space-4);
+  color: var(--text-1);
+}
+
+.guide .index-list a.card:hover {
+  text-decoration: none;
+  border-color: var(--accent);
+}
+
+.guide .index-list span {
+  color: var(--text-2);
+}