SharifandClaude Sonnet 5.5
28a8151cc0
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>
124 lines
2.1 KiB
CSS
124 lines
2.1 KiB
CSS
/* 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);
|
|
}
|