/* ================================================ IN PLAIN SIGHT — Ghost Custom CSS Brand system v1.0 Apply in: Settings → Design → Custom CSS ================================================ */ /* --- Brand tokens --- */ :root { --ips-purple: #534AB7; --ips-purple-lt: #EEEDFE; --ips-black: #1A1A1A; --ips-newsprint: #F7F6F3; --ips-red: #D85A30; --ips-teal: #0F6E56; --ips-amber: #BA7517; --ips-gray: #D3D1C7; --ips-gray-mid: #888780; --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Source Serif 4', Georgia, serif; --font-ui: 'Inter', system-ui, sans-serif; } /* --- Page background --- */ body { background-color: var(--ips-newsprint); color: var(--ips-black); font-family: var(--font-ui); } /* --- Site header --- */ .gh-head { background: #ffffff; border-bottom: 1px solid var(--ips-gray); font-family: var(--font-ui); } .gh-head-logo { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--ips-black); letter-spacing: -0.02em; } .gh-head-menu a { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500; color: var(--ips-gray-mid); transition: color 0.15s; } .gh-head-menu a:hover { color: var(--ips-purple); } /* --- Subscribe button --- */ .gh-head-btn { background: var(--ips-purple); color: #ffffff; border-radius: 4px; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500; transition: background 0.15s; } .gh-head-btn:hover { background: #3C3489; } /* --- Article headline --- */ .article-title, .post-card-title, .gh-article-title { font-family: var(--font-display); font-weight: 700; color: var(--ips-black); line-height: 1.15; letter-spacing: -0.01em; } /* --- Article deck/excerpt --- */ .article-excerpt, .gh-article-excerpt { font-family: var(--font-body); font-style: italic; font-size: 1.15rem; color: #555555; line-height: 1.6; } /* --- Article body --- */ .gh-content, .article-content { font-family: var(--font-body); font-size: 1.075rem; line-height: 1.85; color: #222222; max-width: 680px; margin: 0 auto; } /* --- Pull quotes --- */ .gh-content blockquote { border-left: 3px solid var(--ips-purple); padding-left: 1.25rem; font-family: var(--font-display); font-size: 1.25rem; font-style: italic; color: var(--ips-purple); line-height: 1.5; margin: 2rem 0; } /* --- In-body links --- */ .gh-content a { color: var(--ips-purple); text-decoration: underline; text-decoration-color: var(--ips-purple-lt); transition: text-decoration-color 0.15s; } .gh-content a:hover { text-decoration-color: var(--ips-purple); } /* --- Byline + metadata --- */ .article-byline, .gh-article-meta { font-family: var(--font-ui); font-size: 0.8rem; color: var(--ips-gray-mid); } /* --- Post cards (homepage grid) --- */ .post-card { background: #ffffff; border: 1px solid var(--ips-gray); border-radius: 6px; transition: box-shadow 0.2s; } .post-card:hover { box-shadow: 0 4px 16px rgba(83,74,183,0.1); } /* --- Tags --- */ .post-card-tags, .article-tag { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ips-red); } /* --- Footer --- */ .gh-foot { background: #ffffff; border-top: 1px solid var(--ips-gray); font-family: var(--font-ui); font-size: 0.8rem; color: var(--ips-gray-mid); } /* --- Membership portal button --- */ .gh-portal-btn-main { background: var(--ips-purple) !important; border-radius: 4px !important; font-family: var(--font-ui) !important; } /* --- Reading progress indicator (optional) --- */ .reading-progress { background: var(--ips-purple); height: 3px; }
In Plain Sight

Thoughts, stories and ideas.

Latest