create-smoodly-app 0.0.45 → 0.0.47

package/templates/astro-lorem-intl/src/styles/global.css

@@ -0,0 +1,228 @@
+/* Lorem Co. — the starter's one stylesheet.
+   Tokens from the design, base rules, then one block per section and
+   page in page order. Each section carries its own padding; the editor's
+   Spacing & layout steps (Smoodly's styles set, smoodly/config.ts) render
+   inline through the section wrapper and read the --space-* / --width-*
+   variables below. A section's `background` setting is its own data
+   attribute. The site header and footer are global items rendered by
+   the layout. Photos crop with object-fit: cover at the design's aspect
+   ratios. */
+
+:root {
+  /* Smoodly's styles set reads these (smoodly/config.ts): editor steps become padding, width, alignment. */
+  --space-sm: 24px; --space-md: 48px; --space-lg: 72px;
+  --width-narrow: 640px; --width-wide: 1440px;
+
+  --paper: #faf7f2;
+  --ink: #1f1b17;
+  --accent: #d9653a;
+  --muted: #6b6259;
+  --line: #e8e1d7;
+  --line-strong: #d6cdc1;
+  --body: #3a342e;
+  --radius: 6px;
+  --container: 1200px;
+  /* The custom section's rows share the container's side padding (spec 2026-09-14 §6). */
+  --smd-gutter: 32px;
+  --serif: var(--font-serif), Georgia, serif;
+  --sans: var(--font-sans), Helvetica, Arial, sans-serif;
+}
+@media (min-width: 768px) { :root { --space-sm: 32px; --space-md: 64px; --space-lg: 96px; } }
+
+/* ---------- base ---------- */
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body {
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--sans);
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+main { flex: 1; }
+a { color: inherit; text-decoration: none; }
+a:hover { color: var(--accent); }
+img { display: block; max-width: 100%; }
+h1, h2, h3, p, blockquote, address { margin: 0; }
+address { font-style: normal; }
+
+/* The container reads the editor's width step; without one, the design's width. */
+.container { max-width: var(--smd-width, var(--container)); width: 100%; margin: 0 auto; padding-inline: 32px; }
+
+.kicker { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
+.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.5vw, 44px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
+.link-accent { color: var(--accent); font-weight: 500; font-size: 15px; }
+.link-accent:hover { color: var(--ink); }
+
+.button { display: inline-block; background: var(--ink); color: var(--paper); padding: 14px 24px; border-radius: var(--radius); font-size: 15px; font-weight: 500; }
+.button:hover { background: var(--accent); color: var(--paper); }
+.button--outline { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
+.button--outline:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
+
+/* Richtext (RichText renders bare elements) */
+/* The custom section's columns (.smd-col) read like prose (spec 2026-09-14 §6). */
+.prose, .smd-col{ display: flex; flex-direction: column; gap: 20px; font-size: 17px; line-height: 1.65; color: var(--muted); }
+.prose p, .smd-col p{ text-wrap: pretty; }
+.prose h2, .prose h3, .smd-col h2, .smd-col h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); line-height: 1.2; letter-spacing: -0.01em; }
+.prose h2, .smd-col h2{ font-size: 32px; margin-top: 8px; }
+.prose h3, .smd-col h3{ font-size: 24px; }
+.prose ul, .prose ol, .smd-col ul, .smd-col ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
+.prose blockquote, .smd-col blockquote{ margin: 8px 0; padding-left: 24px; border-left: 2px solid var(--accent); font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.4; color: var(--ink); }
+.prose a, .smd-col a{ color: var(--accent); text-decoration: underline; }
+.prose--lead { gap: 24px; font-size: 18px; line-height: 1.7; color: var(--body); }
+.prose--lead > p:first-child { font-family: var(--serif); font-size: 24px; line-height: 1.45; color: var(--ink); }
+
+/* ---------- richtext block nodes: images, callout, cta ---------- */
+.prose figure, .smd-col figure{ margin: 8px 0; }
+/* Inline, so the section's align step moves an image with the text around it. */
+.prose figure img, .smd-col figure img{ display: inline-block; vertical-align: top; max-width: 100%; height: auto; border-radius: var(--radius); }
+.prose figcaption, .smd-col figcaption{ margin-top: 8px; font-size: 14px; color: var(--muted); }
+.prose .callout, .smd-col .callout{ margin: 8px 0; padding: 20px 24px; border-radius: var(--radius); border-left: 3px solid var(--accent); background: #fff; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.6; }
+.prose .callout[data-tone="success"], .smd-col .callout[data-tone="success"]{ border-left-color: #3a8f5c; }
+.prose .callout[data-tone="warning"], .smd-col .callout[data-tone="warning"]{ border-left-color: #c9962b; background: #fff8e8; }
+.prose .callout__title, .smd-col .callout__title{ color: var(--ink); font-size: 15px; letter-spacing: 0.02em; }
+.prose .callout__body, .smd-col .callout__body{ display: flex; flex-direction: column; gap: 8px; }
+.prose .cta, .smd-col .cta{ margin: 16px 0; padding: 28px 32px; border-radius: var(--radius); background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
+.prose .cta[data-variant="outline"], .smd-col .cta[data-variant="outline"]{ background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
+.prose .cta__heading, .smd-col .cta__heading{ font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.2; display: block; }
+.prose .cta__text, .smd-col .cta__text{ margin: 6px 0 0; font-size: 15px; color: inherit; opacity: 0.8; }
+.prose .cta .button, .smd-col .cta .button{ background: var(--paper); color: var(--ink); flex: none; }
+.prose .cta[data-variant="outline"] .button, .smd-col .cta[data-variant="outline"] .button{ background: var(--ink); color: var(--paper); }
+
+/* ---------- section background: the quote's own `background` setting (Paper / Ink) ---------- */
+
+[data-background="ink"] { background: var(--ink); color: var(--paper); }
+[data-background="ink"] .quote__attribution { color: var(--line); }
+[data-background="ink"].quote { border-color: transparent; }
+
+/* ---------- header ---------- */
+
+.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 28px; }
+.site-header__brand { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; }
+.site-header__nav { display: flex; gap: 32px; font-size: 15px; margin-left: auto; }
+.site-header__locales { display: flex; gap: 12px; font-size: 13px; letter-spacing: 0.08em; color: var(--muted); }
+.site-header__locales a[aria-current] { color: var(--ink); font-weight: 600; }
+
+/* ---------- hero (home) ---------- */
+
+.hero { padding-block: 56px; }
+.hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; }
+.hero__copy { display: flex; flex-direction: column; gap: 24px; }
+.hero__heading { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 68px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
+.hero__text { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 520px; text-wrap: pretty; }
+.hero__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
+.hero__image { width: 100%; border-radius: var(--radius); }
+
+/* ---------- page hero ---------- */
+
+.page-hero { padding-block: 56px; }
+.page-hero__inner { display: flex; flex-direction: column; gap: 40px; }
+.page-hero__copy { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
+.page-hero__heading { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
+.page-hero__text { font-size: 18px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
+.page-hero__image { width: 100%; border-radius: var(--radius); }
+
+/* ---------- image and text ---------- */
+
+.image-text { padding-block: 56px; }
+.image-text__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; }
+.image-text__image { width: 100%; border-radius: var(--radius); }
+[data-image-side="right"] .image-text__image { order: 2; }
+.image-text__copy { display: flex; flex-direction: column; gap: 20px; }
+.image-text__grid > .h2 { align-self: start; }
+
+/* ---------- quote ---------- */
+
+.quote { padding-block: 56px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
+.quote__inner { max-width: 880px; margin: 0 auto; padding-inline: 32px; text-align: center; display: flex; flex-direction: column; gap: 24px; align-items: center; }
+.quote__text { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(26px, 3vw, 38px); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
+.quote__attribution { font-size: 14px; color: var(--muted); letter-spacing: 0.04em; }
+
+/* ---------- points ---------- */
+
+.points { padding-block: 56px; }
+.points .container { display: flex; flex-direction: column; gap: 48px; }
+.points__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; }
+.point { display: flex; flex-direction: column; gap: 16px; }
+.point__icon { color: var(--accent); }
+.point__heading { font-family: var(--serif); font-weight: 500; font-size: 24px; }
+.point__text { font-size: 16px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
+
+/* ---------- article cards (favourites, index, related) ---------- */
+
+.favourites { padding-block: 56px; }
+.favourites .container, .related .container { display: flex; flex-direction: column; gap: 40px; }
+.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px 32px; }
+.card-grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
+.card { display: flex; flex-direction: column; gap: 14px; color: inherit; }
+.card:hover { color: inherit; }
+.card:hover .card__title { color: var(--accent); }
+.card__image { width: 100%; border-radius: var(--radius); }
+.card__meta { display: flex; gap: 10px; font-size: 13px; color: var(--muted); }
+.card__tag { color: var(--accent); font-weight: 600; }
+.card__title { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
+h3.card__title { font-size: 24px; }
+.card__excerpt { font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
+
+/* ---------- people ---------- */
+
+.people { padding-block: 56px; }
+.people .container { display: flex; flex-direction: column; gap: 40px; }
+.people__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px 32px; }
+.person { display: flex; flex-direction: column; gap: 12px; }
+.person__mark { width: 56px; height: 56px; border-radius: 50%; background: var(--line); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 24px; }
+.person__name { font-family: var(--serif); font-size: 22px; font-weight: 500; }
+.person__role { font-size: 14px; color: var(--muted); }
+
+/* ---------- pages ---------- */
+
+.breadcrumb { padding-top: 24px; font-size: 14px; color: var(--muted); }
+.breadcrumb a:hover { color: var(--accent); }
+
+.subnav { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 12px; font-size: 14px; }
+.subnav a { color: var(--muted); }
+.subnav a:hover { color: var(--accent); }
+
+.articles-index { padding-bottom: 96px; }
+
+.news-index { padding-bottom: 96px; }
+.news-list { list-style: none; margin: 0; padding: 0; max-width: 760px; display: flex; flex-direction: column; }
+.news-list__item { display: flex; flex-direction: column; gap: 8px; padding-block: 28px; border-top: 1px solid var(--line); }
+.news-list__item:last-child { border-bottom: 1px solid var(--line); }
+.news-list__date { font-size: 13px; color: var(--muted); }
+.news-list__title { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; color: inherit; text-wrap: balance; }
+.news-list__title:hover { color: var(--accent); }
+.news-list__excerpt { font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
+
+.article { padding-top: 48px; display: flex; flex-direction: column; gap: 40px; }
+.article__back { font-size: 14px; color: var(--muted); }
+.article__head { max-width: 760px; display: flex; flex-direction: column; gap: 20px; }
+.article__tags { display: flex; gap: 10px; flex-wrap: wrap; }
+.tag { font-size: 13px; font-weight: 600; color: var(--muted); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 4px 10px; }
+.tag--accent { color: var(--accent); border-color: var(--accent); }
+.article__title { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4.5vw, 60px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
+.article__byline { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
+.article__byline strong { color: var(--ink); font-weight: 500; }
+.article__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--line); display: inline-block; flex: none; }
+.article__image { width: 100%; border-radius: var(--radius); }
+.article__body { max-width: 720px; margin: 16px auto 0; width: 100%; }
+
+.related { border-top: 1px solid var(--line); margin-top: 88px; padding: 64px 0 96px; }
+.related__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
+
+/* ---------- footer ---------- */
+
+.site-footer { border-top: 1px solid var(--line); margin-top: auto; }
+.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding: 56px 32px 40px; font-size: 14px; }
+@media (max-width: 720px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
+.site-footer__about { display: flex; flex-direction: column; gap: 12px; }
+.site-footer__tagline { color: var(--muted); line-height: 1.6; max-width: 300px; }
+.site-footer__contact { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
+.site-footer__column { display: flex; flex-direction: column; gap: 10px; }
+.site-footer__column a { color: var(--muted); }
+.site-footer__column a:hover { color: var(--accent); }
+.site-footer__title { font-weight: 600; }
+.site-footer__copyright { padding: 0 32px 32px; font-size: 13px; color: var(--muted); }