/* * CCSS brand overlay — loaded after Casper's screen.css. * Palette per the source skeleton (CCSS Website.docx): * white / dark blue / muted gold, Chatham House / ODI inspired. */ :root { --ccss-primary: #0B2545; /* dark blue */ --ccss-accent: #B68D40; /* muted gold */ --ccss-body: #1A1A1A; /* near-black */ --ccss-surface: #F5F3EE; /* warm off-white */ --ccss-rule: #D8D4C7; /* dividers */ } /* Map Casper's CSS variables (where it uses them) to brand. */ body { --ghost-accent-color: var(--ccss-accent); background: #FFFFFF; color: var(--ccss-body); } a, .gh-content a { color: var(--ccss-accent); } a:hover { color: var(--ccss-primary); } .gh-canvas h1, .gh-canvas h2, .gh-canvas h3, .gh-canvas h4 { color: var(--ccss-primary); } .gh-head .gh-head-brand, .gh-head a { color: var(--ccss-primary); } /* Header hairline divider */ .gh-head { border-bottom: 1px solid var(--ccss-rule); } /* Subtle surface for callouts and cards */ .gh-card, .gh-callout { background: var(--ccss-surface); border-color: var(--ccss-rule); } /* ---- RTL support for Arabic posts ---- */ /* Casper applies body classes per Ghost's body_class helper. We toggle direction via [lang] on .gh-content (set by post.hbs + page.hbs). */ .gh-content[lang="ar"] { direction: rtl; text-align: right; font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; line-height: 1.85; /* Arabic needs more leading */ } .gh-content[lang="ar"] h1, .gh-content[lang="ar"] h2, .gh-content[lang="ar"] h3, .gh-content[lang="ar"] h4 { text-align: right; font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; } .gh-content[lang="ar"] ul, .gh-content[lang="ar"] ol { padding-right: 2em; padding-left: 0; } .gh-content[lang="ar"] blockquote { border-right: 4px solid var(--ccss-accent); border-left: none; padding-right: 1.5em; padding-left: 0; } /* ---- IBM Plex Sans Arabic webfont via Google Fonts ---- */ /* Loaded in default.hbs for non-blocking render. */ /* ---- Header language toggle (Arabic / English) ---- Renders {{@site.secondary_navigation}} items as a small inline text link in the top-right of the nav, to the LEFT of Sign in / Subscribe. */ .ccss-lang-toggle { display: inline-flex; align-items: center; gap: 0.5em; margin-right: 0.75em; } .ccss-lang-link { font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1; color: var(--ccss-primary); text-decoration: none; border: none; padding: 0; white-space: nowrap; } .ccss-lang-link:hover { color: var(--ccss-accent); text-decoration: underline; } /* ========================================================================= * CCSS think-tank homepage (home.hbs only) * Chatham House / ODI inspired layout. Scoped under .ccss-home so nothing * here leaks into post / page / tag / author templates. * ====================================================================== */ .ccss-home { color: var(--ccss-body); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .ccss-home a { text-decoration: none; } .ccss-section { padding: 64px 6vmin; border-bottom: 1px solid var(--ccss-rule); } .ccss-section-inner { max-width: 1240px; margin: 0 auto; } .ccss-section-title { font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ccss-primary); margin: 0 0 32px; padding-bottom: 12px; border-bottom: 2px solid var(--ccss-primary); display: inline-block; } /* ---- 1. Hero ---- */ .ccss-hero { background: #FFFFFF; border-top: 4px solid var(--ccss-primary); border-bottom: 1px solid var(--ccss-rule); padding: 88px 6vmin 72px; position: relative; } .ccss-hero::after { content: ""; display: block; height: 8px; background: var(--ccss-surface); position: absolute; left: 0; right: 0; bottom: -1px; } .ccss-hero-inner { max-width: 1100px; margin: 0 auto; text-align: left; } .ccss-hero-title { color: var(--ccss-primary); font-size: clamp(32px, 5vw, 56px); line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 20px; max-width: 22ch; } .ccss-hero-desc { color: var(--ccss-body); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; font-weight: 400; margin: 0 0 32px; max-width: 60ch; opacity: 0.85; } .ccss-btn { display: inline-flex; align-items: center; gap: 0.5em; background: var(--ccss-accent); color: #FFFFFF !important; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; padding: 14px 24px; border-radius: 2px; transition: background 0.15s ease, transform 0.15s ease; } .ccss-btn:hover { background: var(--ccss-primary); color: #FFFFFF !important; transform: translateY(-1px); } /* ---- 2. Featured analysis ---- */ .ccss-featured-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .ccss-fcard { background: #FFFFFF; border: 1px solid var(--ccss-rule); border-top: 3px solid var(--ccss-primary); transition: box-shadow 0.15s ease, transform 0.15s ease; } .ccss-fcard:hover { box-shadow: 0 6px 20px rgba(11, 37, 69, 0.08); transform: translateY(-2px); } .ccss-fcard-link { display: block; padding: 24px 22px 22px; color: inherit !important; height: 100%; } .ccss-chip { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ccss-accent); border: 1px solid var(--ccss-accent); padding: 3px 8px; border-radius: 2px; margin-bottom: 14px; } .ccss-fcard-title { color: var(--ccss-primary) !important; font-size: 19px; line-height: 1.3; font-weight: 600; margin: 0 0 12px; } .ccss-fcard-excerpt { color: var(--ccss-body); font-size: 14px; line-height: 1.55; margin: 0 0 16px; opacity: 0.8; } .ccss-fcard-date { color: var(--ccss-body); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.6; } /* ---- 3. Programmes ---- */ .ccss-programmes { background: #FFFFFF; } .ccss-prog-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .ccss-prog { display: flex; align-items: center; justify-content: flex-start; min-height: 110px; padding: 22px 20px; border: 1px solid var(--ccss-rule); background: #FFFFFF; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .ccss-prog:hover { border-color: var(--ccss-primary); background: var(--ccss-surface); transform: translateY(-2px); } .ccss-prog-name { color: var(--ccss-primary) !important; font-size: 16px; line-height: 1.3; font-weight: 600; margin: 0; } /* ---- 4. Recent publications ---- */ .ccss-recent { background: var(--ccss-surface); } .ccss-recent-list { list-style: none; margin: 0; padding: 0; } .ccss-recent-item { border-top: 1px solid var(--ccss-rule); } .ccss-recent-item:last-child { border-bottom: 1px solid var(--ccss-rule); } .ccss-recent-link { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; color: inherit !important; transition: padding 0.15s ease; } .ccss-recent-link:hover { padding-left: 8px; } .ccss-recent-link:hover .ccss-recent-title { color: var(--ccss-accent); } .ccss-recent-title { color: var(--ccss-primary); font-size: 18px; font-weight: 600; line-height: 1.35; transition: color 0.15s ease; } .ccss-recent-meta { color: var(--ccss-body); font-size: 13px; opacity: 0.7; display: flex; align-items: center; gap: 8px; } .ccss-recent-tag { color: var(--ccss-accent); font-weight: 600; letter-spacing: 0.03em; } .ccss-recent-sep { opacity: 0.5; } .ccss-recent-more { margin: 28px 0 0; font-size: 14px; font-weight: 600; } .ccss-recent-more a { color: var(--ccss-accent); } .ccss-recent-more a:hover { color: var(--ccss-primary); } /* ---- 5. Constructing Sudan callout ---- */ .ccss-callout { background: var(--ccss-surface); border-top: 1px solid var(--ccss-rule); border-bottom: 1px solid var(--ccss-rule); } .ccss-callout-link { display: block; color: inherit !important; transition: background 0.15s ease; } .ccss-callout-link:hover { background: #EDE9DC; } .ccss-callout-inner { max-width: 1240px; margin: 0 auto; padding: 36px 6vmin; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .ccss-callout-copy { display: flex; flex-direction: column; gap: 6px; } .ccss-callout-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ccss-accent); } .ccss-callout-text { font-size: clamp(18px, 2vw, 24px); font-weight: 600; color: var(--ccss-primary); line-height: 1.35; } .ccss-callout-arrow { font-size: 28px; color: var(--ccss-primary); transition: transform 0.15s ease; flex-shrink: 0; } .ccss-callout-link:hover .ccss-callout-arrow { transform: translateX(6px); } /* ---- 6. Subscribe ---- */ .ccss-subscribe { background: #FFFFFF; border-bottom: none; } .ccss-subscribe-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .ccss-subscribe-copy { max-width: 38ch; } .ccss-subscribe-title { color: var(--ccss-primary); font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0 0 10px; } .ccss-subscribe-desc { font-size: 15px; line-height: 1.55; opacity: 0.8; margin: 0; } .ccss-subscribe-form .gh-form { display: flex; gap: 8px; margin: 0; } .ccss-subscribe-form .gh-form-input { flex: 1; border: 1px solid var(--ccss-rule); padding: 12px 14px; background: #FFFFFF; color: var(--ccss-body); border-radius: 2px; font-size: 15px; } .ccss-subscribe-form .gh-button { background: var(--ccss-primary); color: #FFFFFF; border: none; padding: 12px 20px; border-radius: 2px; font-size: 14px; font-weight: 600; cursor: pointer; } .ccss-subscribe-form .gh-button:hover { background: var(--ccss-accent); } /* ---- Responsive ---- */ @media (max-width: 980px) { .ccss-featured-grid { grid-template-columns: repeat(2, 1fr); } .ccss-prog-grid { grid-template-columns: repeat(2, 1fr); } .ccss-subscribe-inner { grid-template-columns: 1fr; gap: 24px; } .ccss-callout-inner { flex-direction: column; align-items: flex-start; } } @media (max-width: 600px) { .ccss-section { padding: 48px 5vmin; } .ccss-hero { padding: 56px 5vmin 48px; } .ccss-featured-grid { grid-template-columns: 1fr; } .ccss-prog-grid { grid-template-columns: 1fr; } .ccss-subscribe-form .gh-form { flex-direction: column; } } /* ========================================================================= * Arabic homepage variant (page-ar-home.hbs) * Applies RTL direction + Arabic font family to .ccss-home.is-ar. All the * existing .ccss-* selectors above are direction-agnostic; this section * only overrides what needs flipping (text-align, border anchors, hover * translate direction, arrow glyphs). * ====================================================================== */ .ccss-home.is-ar, .ccss-home.is-ar h1, .ccss-home.is-ar h2, .ccss-home.is-ar h3, .ccss-home.is-ar h4, .ccss-home.is-ar p, .ccss-home.is-ar a, .ccss-home.is-ar span, .ccss-home.is-ar li { font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; line-height: 1.75; } .ccss-home.is-ar .ccss-hero-inner { text-align: right; } .ccss-home.is-ar .ccss-hero-title { margin-left: auto; margin-right: 0; max-width: 32ch; /* Arabic glyphs are wider — give it more room */ } .ccss-home.is-ar .ccss-hero-desc { margin-left: auto; margin-right: 0; max-width: 70ch; } .ccss-home.is-ar .ccss-section-title { /* The title is display:inline-block with a bottom border, which works fine in RTL — but it floats right naturally now. */ text-align: right; } .ccss-home.is-ar .ccss-fcard { border-top: 3px solid var(--ccss-primary); text-align: right; } .ccss-home.is-ar .ccss-recent-link:hover { /* In LTR the link slid 8px to the right on hover; flip it. */ padding-left: 0; padding-right: 8px; } .ccss-home.is-ar .ccss-recent-link { text-align: right; } .ccss-home.is-ar .ccss-callout-inner { direction: rtl; } .ccss-home.is-ar .ccss-callout-link:hover .ccss-callout-arrow { /* Mirror the arrow hover translation in RTL: slide left instead of right. */ transform: translateX(-6px); } .ccss-home.is-ar .ccss-subscribe-copy { text-align: right; } .ccss-home.is-ar .ccss-subscribe-form .gh-form-input { text-align: right; } /* Arabic navigation header styling — the .is-ar header in navigation.hbs. We rely on the existing .gh-navigation rules for layout; this just sets font + RTL-safe spacing for the nav links and toggle. */ .gh-navigation.is-ar, .gh-navigation.is-ar a, .gh-navigation.is-ar li, .gh-navigation.is-ar span, .gh-navigation.is-ar button { font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; } .gh-navigation.is-ar .nav { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5em; flex-wrap: wrap; } .gh-navigation.is-ar .ccss-lang-toggle { margin-right: 0; margin-left: 0.75em; } /* Logo sizing — the bilingual PNGs are 1320×204 (wide wordmark). Cap height so they fit the header. */ .gh-navigation .gh-navigation-logo img { max-height: 36px; width: auto; } /* ================================================================= * Page & post typography — make sub-pages readable as long-form * documents (constrain width, lift hierarchy, soften line-height). * Applies to /about/, /programmes/, /constructing-sudan/, etc. * Posts inherit via the same .gh-content selector. * =============================================================== */ .gh-content.gh-canvas > *:not(.kg-width-wide):not(.kg-width-full) { max-width: 740px; margin-left: auto; margin-right: auto; } .article-title.gh-canvas { max-width: 740px; margin-left: auto; margin-right: auto; font-size: 44px; line-height: 1.12; color: var(--ccss-primary); margin-bottom: 0.6em; margin-top: 0.6em; } .article-excerpt.gh-canvas { max-width: 740px; margin-left: auto; margin-right: auto; color: #4a4a4a; font-size: 19px; line-height: 1.5; margin-bottom: 2em; } .gh-content > h2 { font-size: 28px; line-height: 1.25; font-weight: 700; color: var(--ccss-primary); margin-top: 2.4em; margin-bottom: 0.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--ccss-rule); } .gh-content > h3 { font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--ccss-primary); margin-top: 2em; margin-bottom: 0.4em; } .gh-content > p, .gh-content > ul, .gh-content > ol, .gh-content > blockquote { font-size: 17.5px; line-height: 1.75; color: #1f1f1f; margin: 0 auto 1.4em; } .gh-content > ul, .gh-content > ol { padding-left: 1.4em; } .gh-content > ul li + li, .gh-content > ol li + li { margin-top: 0.5em; } .gh-content > blockquote { border-left: 3px solid var(--ccss-accent); padding-left: 1.2em; color: #333; font-style: italic; } .gh-content > hr { border: 0; border-top: 1px solid var(--ccss-rule); margin: 3em auto; max-width: 80px; } .gh-content a { color: var(--ccss-primary); text-decoration: underline; text-decoration-color: var(--ccss-accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .gh-content a:hover { color: var(--ccss-accent); } /* RTL versions — Arabic pages need mirrored borders, padding, alignment */ .gh-content[dir="rtl"] > h2 { text-align: right; } .gh-content[dir="rtl"] > h3 { text-align: right; } .gh-content[dir="rtl"] > ul, .gh-content[dir="rtl"] > ol { padding-right: 1.4em; padding-left: 0; } .gh-content[dir="rtl"] > blockquote { border-right: 3px solid var(--ccss-accent); border-left: 0; padding-right: 1.2em; padding-left: 0; } /* Larger header logo so the wordmark actually reads. Source caps logo height; override here. */ .gh-navigation .gh-navigation-logo img, .gh-navigation .ccss-logo img { max-height: 50px; width: auto; } /* Force visible text on the AR subscribe button — Source's stock .gh-button has icon-hiding rules that swallowed our nested structure. */ .ccss-subscribe-form .gh-button, .ccss-subscribe-form .gh-button * { color: #FFFFFF !important; font-size: 14px !important; visibility: visible !important; }