/* ========================================================================== Little Firsts Journal — blog stylesheet A warm, near-childish-but-restrained reading surface: cream linen paper, deep-forest ink, a lantern-amber glow in the brand BANDS (hero + footer). Long-form articles sit on a calm, light surface tuned for reading aloud. Kickers are lowercase Gentium italic (never ALL-CAPS tracking). Fonts (Instrument Sans + Newsreader + Gentium Book Plus) load in each . ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } :root { /* Ink — deep forest green, read as warm text */ --ink: oklch(0.33 0.032 156); --ink-2: oklch(0.45 0.030 152); --ink-3: oklch(0.56 0.026 140); /* Paper — warm cream linen, a lamplit page */ --paper: oklch(0.955 0.018 84); --surface: oklch(0.978 0.012 86); --surface-2: oklch(0.930 0.024 82); --line: oklch(0.880 0.024 80); --line-2: oklch(0.830 0.028 76); /* Lantern amber — the accent */ --amber: oklch(0.76 0.128 70); --amber-deep: oklch(0.66 0.125 62); --amber-ink: oklch(0.50 0.098 58); --amber-wash: oklch(0.945 0.040 78); /* Forest + clay secondaries */ --forest: oklch(0.50 0.075 150); --forest-deep:oklch(0.30 0.050 152); --clay: oklch(0.62 0.105 44); --radius: 22px; --radius-sm: 14px; --radius-xs: 9px; --maxw: 1180px; --measure: 66ch; --shadow-sm: 0 1px 2px oklch(0.35 0.04 70 / 0.06); --shadow: 0 1px 2px oklch(0.35 0.04 70 / 0.06), 0 16px 36px -18px oklch(0.32 0.05 80 / 0.30); --shadow-lg: 0 2px 4px oklch(0.35 0.04 70 / 0.07), 0 32px 64px -26px oklch(0.30 0.05 80 / 0.34); /* Dusk-in-the-woods band — forest night warming to lantern amber at the base. Pitched dark enough that cream text holds WCAG AA across the whole face. */ --dusk: linear-gradient(168deg, oklch(0.34 0.055 158) 0%, oklch(0.29 0.050 156) 38%, oklch(0.27 0.050 146) 64%, oklch(0.29 0.062 96) 100%); --ease: cubic-bezier(0.22, 1, 0.36, 1); } html { -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: 'Instrument Sans', 'Helvetica Neue', system-ui, sans-serif; font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: oklch(0.80 0.10 72 / 0.40); } img { max-width: 100%; height: auto; } a { color: inherit; } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--amber-deep); outline-offset: 3px; border-radius: 5px; } .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; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 0 0 8px 0; font-size: 13px; letter-spacing: 0.04em; } .skip-link:focus { left: 0; } .shell { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; } @media (max-width: 760px) { .shell { padding: 0 22px; } } /* Typography primitives ---------------------------------------------------- */ .eyebrow { /* the Little Firsts kicker — lowercase Gentium italic */ font-family: 'Gentium Book Plus', 'Newsreader', Georgia, serif; font-style: italic; font-size: 18px; font-weight: 400; letter-spacing: 0.005em; color: var(--amber-ink); text-transform: none; } .eyebrow--light { color: oklch(0.90 0.06 80); } .display { font-family: 'Newsreader', Georgia, serif; font-weight: 300; line-height: 1.08; letter-spacing: 0.004em; text-wrap: balance; margin: 0; } .display em, .display i { font-style: italic; } .lede { font-family: 'Newsreader', Georgia, serif; font-weight: 300; line-height: 1.5; text-wrap: pretty; } /* ========================================================================== Brand mark — three little ascending lantern dots ("firsts") ========================================================================== */ .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .brand__fox { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; display: block; box-shadow: 0 1px 3px oklch(0.3 0.04 70 / 0.18); } .brand__lf { display: inline-flex; align-items: flex-end; gap: 3.5px; } .brand__lf i { display: block; width: 6px; border-radius: 99px; background: var(--amber); } .brand__lf i:nth-child(1) { height: 8px; opacity: 0.55; } .brand__lf i:nth-child(2) { height: 13px; opacity: 0.78; } .brand__lf i:nth-child(3) { height: 18px; opacity: 1; } .brand__text { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; } .brand__text b { font-weight: 700; } .brand__journal { font-family: 'Newsreader', serif; font-style: italic; font-weight: 400; } /* ========================================================================== Dusk band — the brand background, reused for heroes & footer ========================================================================== */ .band { position: relative; isolation: isolate; background: var(--dusk); color: oklch(0.965 0.012 86); overflow: hidden; } .band::before { /* grain */ content: ""; position: absolute; inset: 0; z-index: -2; background-image: url(/grain.png); background-size: 320px 320px; opacity: 0.18; mix-blend-mode: overlay; animation: band-grain 90s linear infinite; } .band::after { /* lantern glow */ content: ""; position: absolute; z-index: -1; left: 50%; bottom: -30%; width: 80%; height: 90%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, oklch(0.78 0.13 72 / 0.30), transparent 70%); filter: blur(20px); pointer-events: none; } @keyframes band-grain { from { background-position: 0 0; } to { background-position: -320px 320px; } } @media (prefers-reduced-motion: reduce) { .band::before { animation: none; } } /* ========================================================================== Masthead ========================================================================== */ .masthead { position: sticky; top: 0; z-index: 50; background: oklch(0.955 0.018 84 / 0.82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); } .masthead__row { display: flex; align-items: center; justify-content: space-between; height: 66px; } .masthead .brand__text { color: var(--ink); } .masthead__nav { display: flex; align-items: center; gap: 26px; } .masthead__link { text-decoration: none; color: var(--ink-2); font-size: 15px; font-weight: 500; transition: color 0.2s var(--ease); } .masthead__link:hover { color: var(--ink); } .masthead__cta { text-decoration: none; font-size: 14.5px; font-weight: 600; color: var(--ink); background: var(--amber); padding: 9px 16px; border-radius: 99px; box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .masthead__cta:hover { transform: translateY(-1px); box-shadow: var(--shadow); } @media (max-width: 720px) { .masthead__nav { gap: 16px; } .masthead__link { display: none; } .masthead__link:last-of-type { display: none; } } /* ========================================================================== Listing hero ========================================================================== */ .hero { padding: 72px 0 64px; } .hero__inner { max-width: 800px; } .hero .eyebrow { display: block; margin-bottom: 14px; } .hero .display { font-size: clamp(38px, 6vw, 66px); color: oklch(0.97 0.012 86); } .hero .lede { margin: 22px 0 0; font-size: clamp(18px, 2vw, 22px); max-width: 60ch; color: oklch(0.92 0.02 84); } /* ========================================================================== Language bar + category filters ========================================================================== */ .langbar { background: var(--surface); border-bottom: 1px solid var(--line); } .langbar__row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 13px 0; } .langbar__label { font-family: 'Gentium Book Plus', serif; font-style: italic; color: var(--ink-3); font-size: 15px; margin-right: 8px; } .langbar__item { text-decoration: none; color: var(--ink-2); font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: 99px; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .langbar__item:hover { background: var(--amber-wash); color: var(--ink); } .langbar__item.is-active { background: var(--ink); color: var(--paper); } .filters { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 66px; z-index: 40; } .filters__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 0; } .pill { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--ink-2); font-size: 14px; font-weight: 500; padding: 7px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease); } .pill:hover { border-color: var(--line-2); color: var(--ink); } .pill[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } .pill__dot { width: 8px; height: 8px; border-radius: 99px; background: var(--cat, var(--amber)); } @media (max-width: 720px) { .filters { position: static; } } /* ========================================================================== Article grid + cards ========================================================================== */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding: 48px 0 8px; } @media (max-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid { grid-template-columns: 1fr; gap: 20px; } } .card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); } .card__media { aspect-ratio: 1200 / 630; background: var(--amber-wash); overflow: hidden; } .card__media img, .card__media .hero-svg, .card__media .hero-svg svg { width: 100%; height: 100%; object-fit: cover; display: block; } .card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .card__title { font-family: 'Newsreader', serif; font-weight: 400; font-size: 22px; line-height: 1.2; margin: 0; letter-spacing: 0.004em; } .card__excerpt { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; } .card__foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--ink-3); font-size: 13px; } .dot-sep { opacity: 0.5; } .lang-chip { font-family: 'Gentium Book Plus', serif; font-style: italic; } /* featured card spans the row, two-up */ .card--featured { grid-column: 1 / -1; flex-direction: row; } .card--featured .card__media { width: 54%; aspect-ratio: auto; min-height: 320px; } .card--featured .card__body { width: 46%; justify-content: center; padding: 40px; gap: 14px; } .card--featured .card__title { font-size: 32px; } .card--featured .card__excerpt { font-size: 17px; } @media (max-width: 760px) { .card--featured { flex-direction: column; } .card--featured .card__media { width: 100%; aspect-ratio: 1200/630; min-height: 0; } .card--featured .card__body { width: 100%; padding: 22px; } .card--featured .card__title { font-size: 26px; } } .tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--cat-ink, var(--amber-ink)); background: color-mix(in oklch, var(--cat, var(--amber)) 16%, white); padding: 4px 10px; border-radius: 99px; } /* placeholder hero */ .ph { width: 100%; height: 100%; display: grid; place-items: center; padding: 24px; background: linear-gradient(150deg, color-mix(in oklch, var(--cat, var(--amber)) 22%, white), var(--surface)); } .ph__title { font-family: 'Newsreader', serif; font-style: italic; font-size: 20px; color: var(--ink-2); text-align: center; margin: 0; } .hero-svg { width: 100%; height: 100%; } .hero-svg svg { width: 100%; height: 100%; display: block; } /* ========================================================================== Pager + empty ========================================================================== */ .pager { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 40px 0 64px; color: var(--ink-3); font-size: 14px; } .pager__count { font-variant-numeric: tabular-nums; } .btn-ghost { text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; border: 1px solid var(--line-2); padding: 9px 16px; border-radius: 99px; background: var(--surface); transition: background 0.2s var(--ease), border-color 0.2s var(--ease); } .btn-ghost:hover { background: var(--amber-wash); border-color: var(--amber); } .empty { text-align: center; padding: 80px 0 96px; color: var(--ink-2); } .empty .display { font-size: 34px; margin-bottom: 10px; } /* ========================================================================== FAQ ========================================================================== */ .faq { padding: 40px 0 88px; } .faq__head { margin-bottom: 24px; } .faq__head .eyebrow { display: block; margin-bottom: 8px; } .faq__head .display { font-size: clamp(28px, 4vw, 40px); } .faq__list { max-width: 820px; border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__item summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 4px; position: relative; font-family: 'Newsreader', serif; font-size: 20px; color: var(--ink); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; position: absolute; right: 6px; top: 18px; font-size: 24px; color: var(--amber-deep); font-family: 'Instrument Sans', sans-serif; transition: transform 0.25s var(--ease); } .faq__item[open] summary::after { transform: rotate(45deg); } .faq__answer { padding: 0 4px 22px; color: var(--ink-2); max-width: 64ch; } .faq__answer p { margin: 0; } /* ========================================================================== Article page ========================================================================== */ .article-hero { padding: 64px 0 56px; } .article-hero__inner { max-width: 800px; } .article-hero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: oklch(0.88 0.03 84); font-size: 13.5px; margin-bottom: 20px; } .article-hero__title { font-family: 'Newsreader', serif; font-weight: 400; font-style: italic; font-size: clamp(34px, 5.4vw, 58px); line-height: 1.1; letter-spacing: 0.004em; color: oklch(0.97 0.012 86); margin: 0; text-wrap: balance; } .article-hero__sub { font-family: 'Newsreader', serif; font-weight: 300; font-size: clamp(18px, 2.2vw, 23px); color: oklch(0.91 0.02 84); margin: 18px 0 0; max-width: 60ch; text-wrap: pretty; } /* read-in language switcher */ .langsw { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 26px; } .langsw__label { font-family: 'Gentium Book Plus', serif; font-style: italic; color: oklch(0.86 0.03 82); font-size: 15px; margin-right: 8px; } .langsw__item { text-decoration: none; color: oklch(0.92 0.02 84); font-size: 14px; font-weight: 500; padding: 5px 11px; border-radius: 99px; border: 1px solid oklch(0.97 0.01 86 / 0.22); transition: background 0.2s var(--ease); } .langsw__item:hover { background: oklch(0.97 0.01 86 / 0.14); } .langsw__item--cur { background: var(--amber); color: var(--ink); border-color: transparent; } .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; padding: 56px 0 80px; } @media (max-width: 940px) { .article-layout { grid-template-columns: 1fr; gap: 8px; } } .article-body { max-width: var(--measure); } .source-note { color: var(--ink-3); font-size: 14px; margin: 0 0 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } /* prose */ .prose { font-size: 18px; line-height: 1.72; color: var(--ink); } .prose > * + * { margin-top: 1.25em; } .prose h2 { font-family: 'Newsreader', serif; font-weight: 400; font-size: 30px; line-height: 1.18; letter-spacing: 0.004em; margin-top: 2em; } .prose h3 { font-family: 'Newsreader', serif; font-weight: 500; font-size: 23px; margin-top: 1.7em; } .prose h4 { font-weight: 600; font-size: 18px; margin-top: 1.6em; color: var(--ink-2); } .prose p { margin: 0; } .prose a { color: var(--amber-ink); text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--amber) 50%, transparent); text-underline-offset: 3px; } .prose a:hover { text-decoration-color: var(--amber-deep); } .prose strong { font-weight: 600; } .prose mark { background: oklch(0.86 0.10 76 / 0.55); color: inherit; padding: 0.5px 4px; border-radius: 5px; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin: 0.45em 0; } .prose li::marker { color: var(--amber-deep); } .prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--amber); font-family: 'Newsreader', serif; font-style: italic; font-size: 21px; color: var(--ink-2); } .prose blockquote p { margin: 0; } .prose code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.88em; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; } .prose pre { background: var(--forest-deep); color: oklch(0.94 0.02 84); padding: 18px 20px; border-radius: var(--radius-sm); overflow-x: auto; font-size: 14.5px; } .prose pre code { background: none; padding: 0; color: inherit; } .table-wrap { overflow-x: auto; margin: 1.5em 0; border: 1px solid var(--line); border-radius: var(--radius-sm); } .prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; } .prose th, .prose td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); } .prose th { background: var(--surface-2); font-weight: 600; } .prose tr:last-child td { border-bottom: none; } /* in-article CTA */ .cta-card { margin: 48px 0 8px; padding: 32px 34px; border-radius: var(--radius); background: linear-gradient(160deg, var(--amber-wash), var(--surface)); border: 1px solid var(--line); } .cta-card__title { font-family: 'Newsreader', serif; font-weight: 400; font-size: 25px; margin: 0 0 8px; } .cta-card__sub { margin: 0 0 20px; color: var(--ink-2); font-size: 16px; } .btn-primary { display: inline-block; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink); background: var(--amber); padding: 12px 22px; border-radius: 99px; box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 0; } .tags a { text-decoration: none; color: var(--ink-3); font-size: 13px; background: var(--surface-2); padding: 5px 11px; border-radius: 99px; } .tags a:hover { color: var(--ink); } .back-row { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); } .back-link { text-decoration: none; color: var(--amber-ink); font-weight: 600; } /* sidebar */ .sidebar { display: flex; flex-direction: column; gap: 26px; } @media (max-width: 940px) { .sidebar { margin-top: 48px; } } .side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .side-card__h { font-family: 'Gentium Book Plus', serif; font-style: italic; font-size: 18px; color: var(--ink-2); margin: 0 0 14px; } .side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .side-list li { border-top: 1px solid var(--line); } .side-list li:first-child { border-top: none; } .side-list a { display: block; text-decoration: none; padding: 14px 0; } .side-list__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .side-list__date { color: var(--ink-3); font-size: 12px; } .side-list__title { font-family: 'Newsreader', serif; font-size: 17px; line-height: 1.3; color: var(--ink); margin: 0; } .side-list a:hover .side-list__title { color: var(--amber-ink); } .app-card { position: relative; isolation: isolate; border-radius: var(--radius); padding: 26px; overflow: hidden; color: oklch(0.96 0.012 86); } .app-card .band-bg { position: absolute; inset: 0; z-index: -1; } .app-card__h { font-family: 'Newsreader', serif; font-style: italic; font-size: 22px; margin: 0 0 8px; } .app-card__p { font-size: 14.5px; line-height: 1.55; color: oklch(0.91 0.02 84); margin: 0 0 18px; } .app-card__links { display: flex; flex-direction: column; gap: 9px; } .app-card__link { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--amber); padding: 10px 14px; border-radius: 11px; text-align: center; transition: transform 0.2s var(--ease); } .app-card__link:hover { transform: translateY(-1px); } /* ========================================================================== Footer ========================================================================== */ .foot { padding: 64px 0 36px; margin-top: 40px; } .foot__row { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; } .foot__brand .brand__text { color: oklch(0.96 0.012 86); } .foot__tag { font-family: 'Newsreader', serif; font-style: italic; color: oklch(0.88 0.03 82); margin: 16px 0 0; max-width: 30ch; } .foot__cols { display: flex; gap: 64px; flex-wrap: wrap; } .foot__col { display: flex; flex-direction: column; gap: 10px; } .foot__col h2 { font-family: 'Gentium Book Plus', serif; font-style: italic; font-weight: 400; font-size: 16px; color: oklch(0.86 0.04 80); margin: 0 0 6px; } .foot__col a { text-decoration: none; color: oklch(0.93 0.018 84); font-size: 14.5px; transition: color 0.2s var(--ease); } .foot__col a:hover { color: var(--amber); } .foot__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid oklch(0.97 0.01 86 / 0.16); color: oklch(0.84 0.03 82); font-size: 13px; } @media (max-width: 600px) { .foot__cols { gap: 36px; } }