/* ATS RD blog — shared styles * Designed to be embedded in the existing atsresumedesigner.com site * (or stand alone). Uses CSS variables for brand colors. */ :root { --ink: #1A1A1A; --ink-soft: #5C5347; --ink-mute: #6E665A; --bg: #FBFAF7; --bg-soft: #F4F0E8; --bg-card: #FFFFFF; --line: #E4DED2; --line-2: #C8C0B0; --amber: #C8923B; --accent: #2A6B3C; --code-bg: #1A1A1A; --code-fg: #FBFAF7; --radius: 12px; --max-w: 760px; --max-w-wide: 1100px; } /* Dark theme — toggled by adding data-theme="dark" to . * The toggle button (rendered in the head of every page) sets this * attribute and persists the choice in localStorage. */ :root[data-theme="dark"] { --ink: #F0EBE0; --ink-soft: #C8C0B0; --ink-mute: #9C9485; --bg: #1A1814; --bg-soft: #2A2620; --bg-card: #25221C; --line: #3D3830; --line-2: #5C5347; --amber: #E0A858; --accent: #6FBA82; --code-bg: #0E0D0B; --code-fg: #F0EBE0; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif; font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--bg); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .site-head { background: var(--bg-card); border-bottom: 1px solid var(--line); padding: 14px 0; } .site-head .wrap { max-width: var(--max-w-wide); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 24px; } .brand { font-weight: 700; font-size: 1.1rem; color: var(--ink); letter-spacing: -0.01em; } .brand:hover { text-decoration: none; } .site-head nav { margin-left: auto; display: flex; gap: 18px; font-size: 0.92rem; } .site-head nav a { color: var(--ink-soft); } /* Theme toggle button — matches the nav link styling */ .theme-toggle { background: none; border: 1px solid var(--line); border-radius: 999px; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-soft); font-size: 1rem; font-family: inherit; transition: background 0.15s, border-color 0.15s, color 0.15s; } .theme-toggle:hover { background: var(--bg-soft); border-color: var(--line-2); color: var(--ink); } .theme-toggle-icon { display: inline-block; line-height: 1; } .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; } .wrap-wide { max-width: var(--max-w-wide); margin: 0 auto; padding: 0 24px; } .hero { padding: 64px 0 24px; text-align: center; } .hero h1 { font-size: 2.2rem; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; } .hero p { color: var(--ink-soft); margin: 0; font-size: 1.05rem; } /* Category filter pills */ .filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 32px; } .filter-pill { background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-soft); padding: 6px 14px; border-radius: 999px; font-size: 0.88rem; cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s, color 0.15s; } .filter-pill:hover { background: var(--bg-card); } .filter-pill.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); } /* Article cards */ .articles { display: grid; grid-template-columns: 1fr; gap: 18px; padding-bottom: 64px; } .article-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; transition: border-color 0.15s, transform 0.15s; } .article-card:hover { border-color: var(--ink-soft); text-decoration: none; } .article-card .cat { display: inline-block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--amber); font-weight: 600; margin-bottom: 6px; } .article-card h2 { font-size: 1.35rem; line-height: 1.3; margin: 0 0 8px; color: var(--ink); letter-spacing: -0.01em; } .article-card .excerpt { color: var(--ink-soft); margin: 0 0 12px; font-size: 0.98rem; } .article-card .meta { color: var(--ink-mute); font-size: 0.82rem; } /* Featured cards (top of page) */ .articles-featured { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .articles-featured .article-card h2 { font-size: 1.15rem; } .articles-featured .article-card .excerpt { font-size: 0.92rem; } .articles-featured-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); font-weight: 600; margin-bottom: 12px; } @media (max-width: 700px) { .articles-featured { grid-template-columns: 1fr; } } /* Single-article page */ .article { padding: 48px 0 64px; max-width: 720px; margin: 0 auto; } .article .cat { display: inline-block; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--amber); font-weight: 600; margin-bottom: 8px; } .article h1 { font-size: 2.4rem; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; } .article .byline { color: var(--ink-mute); font-size: 0.92rem; margin: 0 0 36px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .article-body h2 { font-size: 1.4rem; letter-spacing: -0.01em; margin: 36px 0 12px; } .article-body h3 { font-size: 1.15rem; margin: 28px 0 8px; } .article-body p { margin: 0 0 18px; } .article-body ul, .article-body ol { margin: 0 0 18px 22px; padding: 0; } .article-body li { margin-bottom: 6px; } .article-body blockquote { margin: 24px 0; padding: 12px 20px; border-left: 3px solid var(--amber); background: var(--bg-soft); color: var(--ink-soft); font-style: italic; } .article-body code { background: var(--bg-soft); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, "SF Mono", monospace; font-size: 0.92em; } .article-body pre { background: var(--ink); color: var(--bg); padding: 16px; border-radius: var(--radius); overflow-x: auto; font-size: 0.88rem; line-height: 1.5; } .article-body pre code { background: transparent; color: inherit; padding: 0; } .article-body a { text-decoration: underline; } .article-body strong { font-weight: 600; } /* Related articles */ .related { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); } .related h2 { font-size: 1.1rem; margin: 0 0 20px; color: var(--ink-soft); letter-spacing: 0; } .related-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .related-item { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; font-size: 0.92rem; } .related-item .cat { font-size: 0.72rem; color: var(--amber); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .related-item .title { display: block; margin-top: 4px; color: var(--ink); font-weight: 600; line-height: 1.3; } .related-item:hover { border-color: var(--ink-soft); text-decoration: none; } @media (max-width: 700px) { .related-list { grid-template-columns: 1fr; } } /* Footer */ .site-foot { border-top: 1px solid var(--line); background: var(--bg-card); padding: 32px 0; margin-top: 64px; font-size: 0.88rem; color: var(--ink-mute); } .site-foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .site-foot a { color: var(--ink-soft); } /* Empty state */ .empty { text-align: center; padding: 80px 0; color: var(--ink-mute); font-style: italic; } .empty .reset { display: inline-block; margin-top: 12px; color: var(--accent); cursor: pointer; text-decoration: underline; font-style: normal; } /* Print-friendly: hide filters/related on print */ @media print { .filters, .related, .site-foot, .site-head { display: none; } }