/* articles.css — static stylesheet for /artykuly/* pages. Replaces Tailwind CDN (which is not for production and slows LCP). Covers exactly the utility classes used in the article HTML, plus the custom .article-body / .callout / .card-elevated / .btn-gradient rules previously inlined in each article's . */ :root { --c-bg: #FCFDFD; --c-text: #14120F; --c-muted: #6E695F; --c-line: #DEDDD9; --c-line-2: #C2C0BA; --c-primary: #355663; --c-primary-c: #D6E2E8; --c-tertiary: #B88862; --c-tertiary-c:#F1E2CC; --c-surface-2: #F5F5F4; } /* ---------- BASE ---------- */ body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "IBM Plex Sans", system-ui, sans-serif; background-color: var(--c-bg); color: var(--c-text); margin: 0; } /* ---------- TYPOGRAPHY UTILITIES ---------- */ .font-headline { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "IBM Plex Sans", system-ui, sans-serif; } .font-body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "IBM Plex Sans", system-ui, sans-serif; } .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; } .font-semibold { font-weight: 600; } .text-xs { font-size: .75rem; line-height: 1rem; } .text-sm { font-size: .875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-white { color: #ffffff; } .text-center { text-align: center; } .tracking-tight { letter-spacing: -0.025em; } /* ---------- LAYOUT UTILITIES ---------- */ .flex { display: flex; } .inline-flex { display: inline-flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: .5rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .mx-auto { margin-left: auto; margin-right: auto; } .mx-2 { margin-left: .5rem; margin-right: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-10 { margin-bottom: 2.5rem; } .mt-3 { margin-top: .75rem; } .mt-12 { margin-top: 3rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .h-8 { height: 2rem; } .max-w-3xl { max-width: 48rem; } .max-w-6xl { max-width: 72rem; } .rounded-full { border-radius: 9999px; } .space-y-2 > * + * { margin-top: .5rem; } /* ---------- RESPONSIVE (md breakpoint = 768px) ---------- */ @media (min-width: 768px) { .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .md\:flex-row { flex-direction: row; } } /* ---------- COMPONENT CLASSES (previously inline in each article) ---------- */ .btn-gradient { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-c) 100%); transition: box-shadow 0.2s ease, transform 0.2s ease; } .btn-gradient:hover { box-shadow: 0 6px 20px rgba(53, 86, 99, 0.3); transform: translateY(-1px); } .card-elevated { background: #ffffff; box-shadow: 0 12px 32px rgba(20, 18, 15, 0.04); border-radius: 1rem; } /* ---------- ARTICLE BODY ---------- */ .article-body h2 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "IBM Plex Sans", system-ui, sans-serif; font-weight: 700; font-size: 1.75rem; color: var(--c-text); margin: 2.5rem 0 1rem; scroll-margin-top: 80px; } .article-body h3 { font-weight: 700; font-size: 1.25rem; color: var(--c-text); margin: 1.5rem 0 0.5rem; } .article-body p { color: var(--c-muted); line-height: 1.75; margin-bottom: 1rem; } .article-body ul { list-style: disc; padding-left: 1.5rem; color: var(--c-muted); line-height: 1.75; margin-bottom: 1rem; } .article-body ol { list-style: decimal; padding-left: 1.5rem; color: var(--c-muted); line-height: 1.75; margin-bottom: 1rem; } .article-body strong { color: var(--c-text); } .article-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.875rem; } .article-body th, .article-body td { border: 1px solid var(--c-line); padding: 0.75rem; text-align: left; } .article-body th { background-color: var(--c-surface-2); color: var(--c-text); font-weight: 600; } .article-body td { color: var(--c-muted); } .callout { background: var(--c-primary-c); border-left: 4px solid var(--c-primary); padding: 1rem 1.25rem; border-radius: 0.5rem; margin: 1.5rem 0; } .callout p { color: var(--c-text) !important; margin-bottom: 0; } /* ---------- HUB / INDEX PAGE GRID ---------- */ .article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .article-card { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--c-line); border-radius: 20px; padding: 24px; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s; } .article-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(20, 18, 15, 0.08); border-color: var(--c-primary); } .article-card-featured { display: block; text-decoration: none; color: inherit; background: linear-gradient(135deg, #355663 0%, #4a7384 100%); border-radius: 28px; padding: 48px 44px; margin-bottom: 32px; box-shadow: 0 28px 60px rgba(53, 86, 99, 0.18); position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .article-card-featured:hover { transform: translateY(-4px); box-shadow: 0 36px 80px rgba(53, 86, 99, 0.28); } /* ---------- ARTICLE FIGURES ---------- */ .article-body figure { margin: 2.25rem 0; text-align: center; } .article-body figure img { width: 100%; height: auto; border-radius: 1rem; box-shadow: 0 16px 40px rgba(20, 18, 15, 0.06); display: block; } .article-body figcaption { font-size: .8125rem; line-height: 1.5; color: var(--c-line-2); margin-top: .75rem; font-style: italic; } /* ---------- AUTHOR BIO BOX ---------- */ .author-bio { display: flex; gap: 1.25rem; align-items: center; background: var(--c-surface-2); border-radius: 1rem; padding: 1.5rem; margin: 3rem 0 1.5rem; } .author-bio img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .author-mark { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-c) 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; letter-spacing: .02em; flex-shrink: 0; box-shadow: 0 8px 20px rgba(53, 86, 99, .18); } .author-bio .meta { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-primary); font-weight: 600; margin: 0 0 .25rem; } .author-bio h3 { font-size: 1.125rem; font-weight: 700; margin: 0 0 .5rem; color: var(--c-text); } .author-bio p { font-size: .9375rem; line-height: 1.55; margin: 0; color: var(--c-muted); } @media (max-width: 600px) { .author-bio { flex-direction: column; text-align: center; } } /* ---------- COLLAPSIBLE FAQ ---------- */ .article-body details { border: 1px solid var(--c-line); border-radius: .75rem; padding: 1rem 1.25rem; margin: .75rem 0; background: #fff; transition: border-color .15s; } .article-body details[open] { border-color: var(--c-primary); } .article-body details summary { cursor: pointer; font-weight: 600; color: var(--c-text); list-style: none; position: relative; padding-right: 2rem; } .article-body details summary::-webkit-details-marker { display: none; } .article-body details summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 1.25rem; color: var(--c-primary); transition: transform .2s; } .article-body details[open] summary::after { content: "−"; } .article-body details > p { margin-top: .75rem; } /* ---------- BUDGET TABLE (3 example budgets) ---------- */ .budget-example { background: #fff; border: 1px solid var(--c-line); border-radius: 1rem; padding: 1.25rem 1.5rem; margin: 1.25rem 0; } .budget-example h4 { font-size: 1rem; font-weight: 700; margin: 0 0 .25rem; color: var(--c-text); } .budget-example .who { font-size: .8125rem; color: var(--c-muted); margin: 0 0 1rem; } .budget-example table { margin: 0; }