/* ================================================================ SCUDOCAT GHOST THEME v2.1 Palette: Teal #005A61 · Coral #E8563A · Warm off-white #FAF9F5 Ghost Admin: accent color, heading font, body font ================================================================ */ /* ── Variables ─────────────────────────────────────────────────── */ /* Ghost Admin injects into before this stylesheet: */ /* --ghost-accent-color (from Accent color picker) */ /* --gh-font-heading (from Heading font selector) */ /* --gh-font-body (from Body font selector) */ :root { --bg: #FAF9F5; --bg-muted: #F0EDE5; --bg-dark: #002129; --primary: #005A61; --primary-hover: #004A50; --accent: var(--ghost-accent-color, #E8563A); --accent-hover: var(--ghost-accent-color, #d44c31); --text: #002129; --text-muted: #3D5C63; --text-light: #7A9EA5; --border: #D4DFE2; --white: #FFFFFF; --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --radius-pill: 999px; --shadow-sm: 0 1px 3px rgba(0,33,41,.08); --shadow: 0 4px 16px rgba(0,33,41,.10); --shadow-lg: 0 12px 40px rgba(0,33,41,.14); --font-heading: var(--gh-font-heading, 'DM Sans', sans-serif); --font-body: var(--gh-font-body, 'DM Sans', sans-serif); --font: var(--font-body); --content-w: 720px; --site-w: 1200px; } /* ── Reset & Base ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font-family: var(--font); cursor: pointer; } /* ── Layout ─────────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--site-w); margin: 0 auto; padding: 0 24px; } /* ── Typography ─────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; } /* ── Buttons ────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 26px; border-radius: var(--radius-pill); font-size: .9rem; font-weight: 600; letter-spacing: .01em; border: none; transition: all .2s ease; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--primary); color: var(--white); } .btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow); } .btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); } .btn-outline:hover { background: var(--primary); color: var(--white); } .btn-accent { background: var(--accent); color: var(--white); } .btn-accent:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow); } /* ── Header / Nav ───────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(250, 249, 245, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; } .site-logo { display: flex; align-items: center; flex-shrink: 0; } .site-logo img { height: 32px; width: auto; } .site-logo-text { font-size: 1.25rem; font-weight: 700; color: var(--primary); letter-spacing: -0.03em; } .site-logo-text span { color: var(--accent); } .site-nav { display: flex; align-items: center; gap: 4px; } .site-nav a { padding: 6px 14px; border-radius: var(--radius-pill); font-size: .9rem; font-weight: 500; color: var(--text-muted); transition: all .15s; } .site-nav a:hover, .site-nav a.current { color: var(--primary); background: rgba(0,90,97,.07); } .nav-cta { margin-left: 8px; padding: 8px 20px; background: var(--primary); color: var(--white) !important; border-radius: var(--radius-pill); font-size: .875rem; font-weight: 600; } .nav-cta:hover { background: var(--primary-hover) !important; } .nav-mobile-toggle { display: none; background: none; border: none; padding: 8px; color: var(--text); border-radius: var(--radius-sm); } .nav-mobile-toggle:hover { background: var(--bg-muted); } /* ── Hero (index) ───────────────────────────────────────────────── */ .blog-hero { background: var(--bg-dark); padding: 80px 0 72px; position: relative; overflow: hidden; } /* Gradient overlay when no cover image */ .blog-hero:not(.has-cover)::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(0,90,97,.5) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 10% 80%, rgba(232,86,58,.15) 0%, transparent 60%); pointer-events: none; } /* Dark overlay on top of cover image */ .blog-hero-overlay { display: none; } .blog-hero.has-cover .blog-hero-overlay { display: block; position: absolute; inset: 0; background: linear-gradient( to right, rgba(0,33,41,.82) 0%, rgba(0,33,41,.55) 60%, rgba(0,33,41,.2) 100% ); pointer-events: none; } .blog-hero-inner { position: relative; z-index: 1; max-width: 600px; } .blog-hero-label { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.75); font-size: .8rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 24px; } .blog-hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); color: var(--white); margin-bottom: 20px; line-height: 1.15; } .blog-hero p { font-size: 1.1rem; color: rgba(255,255,255,.65); margin-bottom: 32px; max-width: 480px; } /* ── Post Grid ──────────────────────────────────────────────────── */ .posts-section { padding: 64px 0; } .section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 40px; } .section-title { font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); } .section-view-all { font-size: .875rem; font-weight: 500; color: var(--text-muted); display: flex; align-items: center; gap: 4px; transition: color .15s; } .section-view-all:hover { color: var(--primary); } .posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .posts-grid.featured { grid-template-columns: repeat(2, 1fr); gap: 32px; } /* ── Post Card ──────────────────────────────────────────────────── */ .post-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; } .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .post-card-image-wrap { overflow: hidden; aspect-ratio: 16/9; background: var(--bg-muted); flex-shrink: 0; } .post-card-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .post-card:hover .post-card-image-wrap img { transform: scale(1.04); } .post-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%); } .post-card-placeholder svg { width: 40px; height: 40px; color: rgba(255,255,255,.3); stroke: currentColor; } .post-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .post-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .post-card-tag { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); background: rgba(0,90,97,.08); padding: 3px 10px; border-radius: var(--radius-pill); transition: background .15s; } .post-card-tag:hover { background: rgba(0,90,97,.15); } .post-card-title { font-size: 1.05rem; font-weight: 600; line-height: 1.35; margin-bottom: 10px; } .post-card-title a { color: var(--text); } .post-card-title a:hover { color: var(--primary); } .post-card-excerpt { font-size: .9rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-card-meta { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-light); margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); } .post-card-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .post-card-avatar-placeholder { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: var(--white); font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .post-card-dot { color: var(--border); } /* Featured card (larger) */ .posts-grid.featured .post-card-image-wrap { aspect-ratio: 16/10; } .posts-grid.featured .post-card-title { font-size: 1.2rem; } /* ── Pagination ─────────────────────────────────────────────────── */ .pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 48px 0 24px; } .pagination a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: var(--radius-pill); font-size: .875rem; font-weight: 500; color: var(--primary); border: 1.5px solid var(--border); transition: all .15s; } .pagination a:hover { border-color: var(--primary); background: rgba(0,90,97,.05); } .pagination-info { font-size: .875rem; color: var(--text-muted); } /* ── Post Article ───────────────────────────────────────────────── */ .post-header { padding: 64px 0 48px; border-bottom: 1px solid var(--border); } .post-header-inner { max-width: var(--content-w); margin: 0 auto; } .post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .post-tag { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--primary); background: rgba(0,90,97,.08); padding: 4px 12px; border-radius: var(--radius-pill); transition: background .15s; } .post-tag:hover { background: rgba(0,90,97,.15); } .post-title { font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 20px; } .post-excerpt-lead { font-size: 1.2rem; color: var(--text-muted); line-height: 1.6; font-weight: 400; margin-bottom: 28px; } .post-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .post-meta-author { display: flex; align-items: center; gap: 10px; } .post-meta-author img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .post-meta-author a { font-weight: 600; font-size: .9rem; color: var(--text); } .post-meta-author a:hover { color: var(--primary); } .post-meta-details { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--text-muted); } .post-feature-image { max-width: var(--content-w); margin: 48px auto 0; border-radius: var(--radius-lg); overflow: hidden; } .post-feature-image img { width: 100%; } .post-feature-image figcaption { font-size: .8rem; color: var(--text-light); text-align: center; padding: 10px 0 0; font-style: italic; } /* ── Ghost Content (article body) ──────────────────────────────── */ .gh-content { max-width: var(--content-w); margin: 48px auto; padding: 0 24px; } .gh-canvas { padding-left: 0; padding-right: 0; } .gh-content p { font-size: 1.05rem; line-height: 1.8; color: var(--text); margin-bottom: 1.5em; } .gh-content h2 { font-size: 1.6rem; margin: 2.5em 0 .75em; color: var(--text); } .gh-content h3 { font-size: 1.25rem; margin: 2em 0 .6em; } .gh-content h4 { font-size: 1.1rem; margin: 1.5em 0 .5em; } .gh-content ul, .gh-content ol { padding-left: 1.5em; margin-bottom: 1.5em; list-style: revert; } .gh-content li { font-size: 1.05rem; line-height: 1.75; margin-bottom: .4em; } .gh-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .gh-content a:hover { color: var(--primary-hover); } .gh-content blockquote { border-left: 3px solid var(--accent); padding: 16px 0 16px 28px; margin: 2em 0; background: rgba(232,86,58,.04); border-radius: 0 var(--radius) var(--radius) 0; } .gh-content blockquote p { font-size: 1.15rem; font-style: italic; color: var(--text-muted); margin: 0; } .gh-content img { border-radius: var(--radius); margin: 2em auto; } .gh-content figure { margin: 2em 0; } .gh-content figcaption { font-size: .8rem; color: var(--text-light); text-align: center; margin-top: 8px; font-style: italic; } .gh-content hr { border: none; border-top: 1px solid var(--border); margin: 3em 0; } .gh-content code { background: var(--bg-muted); padding: 2px 7px; border-radius: 4px; font-size: .875em; color: var(--accent); } .gh-content pre { background: var(--bg-dark); color: rgba(255,255,255,.85); padding: 24px; border-radius: var(--radius); overflow-x: auto; margin-bottom: 1.5em; } .gh-content pre code { background: none; color: inherit; padding: 0; font-size: .9rem; } .gh-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; font-size: .95rem; } .gh-content th, .gh-content td { padding: 12px 16px; border: 1px solid var(--border); text-align: left; } .gh-content th { background: var(--bg-muted); font-weight: 600; } /* ── Author Box ─────────────────────────────────────────────────── */ .author-box { max-width: var(--content-w); margin: 0 auto 64px; padding: 32px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; align-items: flex-start; gap: 20px; } .author-box-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .author-box-avatar-placeholder { width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: var(--white); font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .author-box-name { font-weight: 700; font-size: 1rem; margin-bottom: 6px; } .author-box-bio { font-size: .9rem; color: var(--text-muted); line-height: 1.6; margin: 0; } /* ── Related Posts ──────────────────────────────────────────────── */ .related-posts { padding: 56px 0; border-top: 1px solid var(--border); background: var(--bg-muted); } .related-posts .posts-grid { grid-template-columns: repeat(3, 1fr); } /* ── Tag / Author archive ───────────────────────────────────────── */ .taxonomy-header { padding: 64px 0 56px; background: var(--bg-dark); text-align: center; position: relative; overflow: hidden; } .taxonomy-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(0,90,97,.6) 0%, transparent 70%); } .taxonomy-header-inner { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; } .taxonomy-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.7); font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--radius-pill); margin-bottom: 20px; } .taxonomy-header h1 { font-size: 2rem; color: var(--white); margin-bottom: 12px; } .taxonomy-header p { font-size: 1rem; color: rgba(255,255,255,.6); } .taxonomy-header img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px; border: 3px solid rgba(255,255,255,.2); } /* ── Newsletter / Footer CTA ────────────────────────────────────── */ .newsletter-section { background: var(--primary); padding: 64px 0; text-align: center; } .newsletter-inner { max-width: 540px; margin: 0 auto; } .newsletter-section h2 { font-size: 1.75rem; color: var(--white); margin-bottom: 12px; } .newsletter-section p { color: rgba(255,255,255,.7); margin-bottom: 32px; font-size: 1rem; } .newsletter-form { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; } .newsletter-form input[type="email"] { flex: 1; padding: 12px 20px; border-radius: var(--radius-pill); border: 1.5px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: var(--white); font-family: var(--font); font-size: .9rem; outline: none; transition: border-color .2s; } .newsletter-form input::placeholder { color: rgba(255,255,255,.45); } .newsletter-form input:focus { border-color: rgba(255,255,255,.5); } .newsletter-form button { background: var(--accent); color: var(--white); border: none; padding: 12px 24px; border-radius: var(--radius-pill); font-family: var(--font); font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .2s; white-space: nowrap; } .newsletter-form button:hover { background: var(--accent-hover); } /* ── Footer ─────────────────────────────────────────────────────── */ .site-footer { background: var(--bg-dark); color: rgba(255,255,255,.6); padding: 56px 0 32px; } .site-footer-inner { display: flex; justify-content: space-between; gap: 48px; margin-bottom: 40px; flex-wrap: wrap; } .site-footer-brand { max-width: 320px; } .footer-logo { font-size: 1.2rem; font-weight: 700; color: var(--white); letter-spacing: -0.02em; margin-bottom: 12px; } .footer-logo span { color: var(--accent); } .site-footer-brand p { font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.5); } .site-footer-nav { display: flex; flex-direction: column; gap: 10px; } .site-footer-nav a { font-size: .875rem; color: rgba(255,255,255,.5); transition: color .15s; } .site-footer-nav a:hover { color: var(--white); } .site-footer-bottom { padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: rgba(255,255,255,.3); } .back-to-top { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all .2s; cursor: pointer; } .back-to-top:hover { background: rgba(255,255,255,.15); color: var(--white); } /* ── Error Page ─────────────────────────────────────────────────── */ .error-template { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; background: var(--bg); } .error-code { font-size: 7rem; font-weight: 800; color: var(--primary); line-height: 1; letter-spacing: -0.04em; margin-bottom: 16px; } .error-message { font-size: 1.1rem; color: var(--text-muted); max-width: 440px; margin: 0 auto 32px; line-height: 1.6; } /* ── Page ───────────────────────────────────────────────────────── */ .page-template .post-header { border-bottom: none; } /* ── Reading progress bar ───────────────────────────────────────── */ .reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); z-index: 9999; width: 0%; transition: width .1s linear; } /* ── Ghost card styles ──────────────────────────────────────────── */ .kg-image-card img { border-radius: var(--radius); } .kg-gallery-container { max-width: 100%; } .kg-gallery-image img { border-radius: var(--radius-sm); } .kg-bookmark-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .kg-callout-card { border-radius: var(--radius); padding: 20px 24px; } .kg-toggle-card { border: 1px solid var(--border); border-radius: var(--radius); } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 900px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } .posts-grid.featured { grid-template-columns: 1fr; } .related-posts .posts-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .site-nav { display: none; } .nav-mobile-toggle { display: flex; } .posts-grid, .related-posts .posts-grid { grid-template-columns: 1fr; } .blog-hero { padding: 56px 0 48px; } .author-box { flex-direction: column; } .newsletter-form { flex-direction: column; } .site-footer-inner { flex-direction: column; gap: 32px; } .site-header-inner { height: 56px; } .post-title { font-size: 1.75rem; } .section-header { flex-direction: column; gap: 12px; } } /* Mobile nav open state */ .site-nav.is-open { display: flex; flex-direction: column; position: absolute; top: 56px; left: 0; right: 0; background: var(--bg); padding: 16px 24px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow); gap: 4px; } /* ── Koenig editor card widths (required by Ghost) ──────────────── */ .gh-content .kg-width-wide { position: relative; width: 85vw; min-width: 100%; margin: 2em calc(50% - 42.5vw); } .gh-content .kg-width-full { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .gh-content .kg-width-wide img, .gh-content .kg-width-full img { width: 100%; }