/* * GoRoute Blog Stylesheet * Tokens pulled from /css/theme.css (brand primary, midnight, grey, etc.) * Fully light/dark aware via the `.dark` class on . */ /* Offset below fixed homepage navbar */ .blog-page main.blog-content-wrap { padding-top: 6.5rem; padding-bottom: 4rem; max-width: 72rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; } @media (min-width: 768px) { .blog-page main.blog-content-wrap { padding-top: 7.5rem; padding-left: 2rem; padding-right: 2rem; } } /* Inline breadcrumb (top of hero) */ .blog-breadcrumb { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; margin-bottom: 1.5rem; } .blog-breadcrumb a { color: #6b7280; text-decoration: none; transition: color 0.15s; } .blog-breadcrumb a:hover { color: #10588c; } .blog-breadcrumb .breadcrumb-sep { color: #d1d5db; font-size: 0.7rem; } .blog-breadcrumb [aria-current="page"] { color: #374151; font-weight: 500; } html.dark .blog-breadcrumb a { color: #9ca3af; } html.dark .blog-breadcrumb a:hover { color: #7bc8ef; } html.dark .blog-breadcrumb [aria-current="page"] { color: #e5e7eb; } /* Hero (listing page) */ .blog-hero { padding: 2.5rem 0 1.5rem; text-align: left; } .blog-hero .eyebrow { display: inline-block; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: #10588c; font-weight: 600; margin-bottom: 0.75rem; } .blog-hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; font-weight: 800; color: #0f172a; margin-bottom: 1rem; letter-spacing: -0.02em; } html.dark .blog-hero h1 { color: #f9fafb; } .blog-hero p { font-size: 1.05rem; color: #4b5563; max-width: 44rem; line-height: 1.6; } html.dark .blog-hero p { color: #9ca3af; } .blog-hero .meta-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 1.25rem; color: #6b7280; font-size: 0.875rem; } html.dark .blog-hero .meta-row { color: #9ca3af; } .blog-hero .chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .blog-hero .chip { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px; background: rgba(16,88,140,0.08); color: #10588c; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; } html.dark .blog-hero .chip { background: rgba(0,161,223,0.15); color: #7bc8ef; } /* Card grid (3 per page) */ .blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; } @media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .blog-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 1rem; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .blog-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); border-color: var(--brand-primary, #6366f1); } html.dark .blog-card { background: #111827; border-color: #374151; } html.dark .blog-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } .blog-card-top { padding: 1rem 1.25rem 0; } .blog-card-kicker { display: inline-block; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #10588c; background: rgba(16,88,140,0.09); padding: 0.2rem 0.6rem; border-radius: 9999px; } .blog-card-body { padding: 0.75rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; } .blog-card-body h2 { font-size: 1.15rem; line-height: 1.35; font-weight: 700; color: #0f172a; margin: 0.4rem 0 0.6rem; } html.dark .blog-card-body h2 { color: #f3f4f6; } .blog-card-body h2 a { color: inherit; text-decoration: none; } .blog-card-body h2 a:hover { color: var(--brand-primary, #6366f1); } .blog-card-body p { color: #4b5563; font-size: 0.925rem; line-height: 1.55; flex: 1; } html.dark .blog-card-body p { color: #9ca3af; } .blog-card-meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: #6b7280; flex: 1; min-width: 0; flex-wrap: wrap; } html.dark .blog-card-meta { color: #9ca3af; } /* Pagination */ .blog-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; } html.dark .blog-pagination { border-color: #374151; } .blog-pagination .info { color: #6b7280; font-size: 0.875rem; } html.dark .blog-pagination .info { color: #9ca3af; } .blog-pagination .page-links { display: flex; gap: 0.4rem; flex-wrap: wrap; } .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.75rem; border-radius: 0.5rem; border: 1px solid #e5e7eb; background: #ffffff; color: #111827; font-size: 0.875rem; font-weight: 500; transition: all 0.2s ease; } .page-link:hover { background: var(--brand-primary, #6366f1); color: #fff; border-color: transparent; } .page-link.active { background: var(--brand-primary, #6366f1); color: #fff; border-color: transparent; cursor: default; } .page-link.disabled { opacity: 0.45; pointer-events: none; } html.dark .page-link { background: #111827; border-color: #374151; color: #e5e7eb; } /* Article page */ .article-shell { max-width: 46rem; margin: 0 auto; } .article-meta { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; color: #6b7280; font-size: 0.85rem; margin-bottom: 0.75rem; } html.dark .article-meta { color: #9ca3af; } .article-shell h1 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); line-height: 1.15; font-weight: 800; color: #0f172a; margin-bottom: 1rem; letter-spacing: -0.02em; } html.dark .article-shell h1 { color: #f9fafb; } .article-shell .lede { font-size: 1.125rem; color: #374151; line-height: 1.65; border-left: 3px solid var(--brand-primary, #6366f1); padding-left: 1rem; margin: 1.25rem 0 2rem; } html.dark .article-shell .lede { color: #d1d5db; } .article-shell h2 { font-size: 1.45rem; font-weight: 700; color: #0f172a; margin: 2rem 0 0.75rem; letter-spacing: -0.01em; } html.dark .article-shell h2 { color: #f3f4f6; } .article-shell h3 { font-size: 1.1rem; font-weight: 700; color: #1f2937; margin: 1.25rem 0 0.5rem; } html.dark .article-shell h3 { color: #e5e7eb; } .article-shell p { color: #374151; font-size: 1.02rem; line-height: 1.75; margin-bottom: 1rem; } html.dark .article-shell p { color: #d1d5db; } .article-shell ul, .article-shell ol { color: #374151; font-size: 1.02rem; line-height: 1.7; margin: 0.5rem 0 1.25rem 1.25rem; } html.dark .article-shell ul, html.dark .article-shell ol { color: #d1d5db; } .article-shell li { margin-bottom: 0.35rem; list-style: disc; } .article-shell ol li { list-style: decimal; } .article-shell blockquote { border-left: 3px solid var(--brand-primary, #6366f1); padding: 0.5rem 0 0.5rem 1rem; margin: 1.25rem 0; color: #4b5563; font-style: italic; } html.dark .article-shell blockquote { color: #9ca3af; } .article-shell .callout { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem 1.25rem; margin: 1.5rem 0; color: #1f2937; } html.dark .article-shell .callout { background: #1f2937; border-color: #374151; color: #e5e7eb; } .article-shell .footer-note { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; color: #6b7280; font-size: 0.85rem; } html.dark .article-shell .footer-note { border-color: #374151; color: #9ca3af; } /* Article bottom nav */ .article-bottom-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; } html.dark .article-bottom-nav { border-color: #374151; } /* === Card accent bar === */ .blog-card-accent { height: 4px; flex-shrink: 0; background: #10588c; } /* === Card footer (meta + CTA row) === */ .blog-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 0.875rem; border-top: 1px solid #f1f5f9; } html.dark .blog-card-footer { border-top-color: #1f2937; } .blog-card-readtime { display: inline-flex; align-items: center; gap: 0.3rem; } .blog-card-readtime svg { flex-shrink: 0; opacity: 0.75; } /* Read article CTA pill */ .blog-card-cta { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.775rem; font-weight: 600; color: #10588c; padding: 0.28rem 0.7rem; border: 1.5px solid currentColor; border-radius: 9999px; transition: all 0.2s ease; white-space: nowrap; flex-shrink: 0; text-decoration: none; } .blog-card-cta:hover { background: #10588c; color: #fff; border-color: transparent; } html.dark .blog-card-cta { color: #7bc8ef; } html.dark .blog-card-cta:hover { background: #00a1df; color: #fff; border-color: transparent; } /* === Featured card (page 1, latest post) === */ .blog-card--featured { grid-column: 1 / -1; background: linear-gradient(135deg, #10588c 0%, #00a1df 100%); border-color: transparent; } .blog-card--featured:hover { transform: none; border-color: transparent; box-shadow: 0 20px 50px rgba(16,88,140,0.3); } html.dark .blog-card--featured { background: linear-gradient(135deg, #0d4a78 0%, #0089c0 100%); } .blog-card--featured .blog-card-accent { display: none; } .blog-card--featured .blog-card-body { padding: 2rem 2.25rem 1.75rem; } @media (min-width: 768px) { .blog-card--featured .blog-card-body { padding: 2.5rem 3rem 2.25rem; max-width: 56rem; } } .blog-card--featured .blog-card-top { padding: 0 0 0.75rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .blog-card--featured .blog-card-body h2 { font-size: clamp(1.45rem, 3vw, 2rem); color: #fff; margin-top: 0; margin-bottom: 0.75rem; } .blog-card--featured .blog-card-body h2 a { color: inherit; } .blog-card--featured .blog-card-body h2 a:hover { color: rgba(255,255,255,0.85); } .blog-card--featured .blog-card-body > p { color: rgba(255,255,255,0.85); font-size: 1rem; } .blog-card--featured .blog-card-footer { border-top-color: rgba(255,255,255,0.2); } .blog-card--featured .blog-card-meta { color: rgba(255,255,255,0.75); } .blog-card--featured .blog-card-kicker { color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.18); } .blog-card--featured .blog-card-cta { color: #fff; border-color: rgba(255,255,255,0.45); } .blog-card--featured .blog-card-cta:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.7); color: #fff; } /* Latest post badge inside featured card */ .featured-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); padding: 0.22rem 0.65rem; border-radius: 9999px; } /* === Category accent & kicker colours === */ /* Operations (GoRoute dark blue) */ .blog-card--operations .blog-card-accent { background: #10588c; } /* Oman (amber) */ .blog-card--oman .blog-card-accent { background: #d97706; } .blog-card--oman .blog-card-kicker { color: #92400e; background: rgba(217,119,6,0.1); } html.dark .blog-card--oman .blog-card-kicker { color: #fbbf24; background: rgba(251,191,36,0.12); } /* Guides (GoRoute light blue) */ .blog-card--guides .blog-card-accent { background: #00a1df; } .blog-card--guides .blog-card-kicker { color: #0369a1; background: rgba(0,161,223,0.1); } html.dark .blog-card--guides .blog-card-kicker { color: #38bdf8; background: rgba(56,189,248,0.12); } /* Implementation (emerald) */ .blog-card--implementation .blog-card-accent { background: #059669; } .blog-card--implementation .blog-card-kicker { color: #065f46; background: rgba(5,150,105,0.1); } html.dark .blog-card--implementation .blog-card-kicker { color: #34d399; background: rgba(52,211,153,0.12); } /* Validation (teal) */ .blog-card--validation .blog-card-accent { background: #0d9488; } .blog-card--validation .blog-card-kicker { color: #134e4a; background: rgba(13,148,136,0.1); } html.dark .blog-card--validation .blog-card-kicker { color: #2dd4bf; background: rgba(45,212,191,0.12); } /* Architecture (indigo) */ .blog-card--architecture .blog-card-accent { background: #6366f1; } .blog-card--architecture .blog-card-kicker { color: #4338ca; background: rgba(99,102,241,0.1); } html.dark .blog-card--architecture .blog-card-kicker { color: #a5b4fc; background: rgba(165,180,252,0.12); } /* Germany / XRechnung (deep blue) */ .blog-card--germany .blog-card-accent { background: #1d4ed8; } .blog-card--germany .blog-card-kicker { color: #1e3a8a; background: rgba(29,78,216,0.09); } html.dark .blog-card--germany .blog-card-kicker { color: #93c5fd; background: rgba(147,197,253,0.12); } /* CTC (purple) */ .blog-card--ctc .blog-card-accent { background: #7c3aed; } .blog-card--ctc .blog-card-kicker { color: #5b21b6; background: rgba(124,58,237,0.09); } html.dark .blog-card--ctc .blog-card-kicker { color: #c4b5fd; background: rgba(196,181,253,0.12); } /* Strategy / EDI (slate teal) */ .blog-card--strategy .blog-card-accent { background: #0f766e; } .blog-card--strategy .blog-card-kicker { color: #0f766e; background: rgba(15,118,110,0.09); } html.dark .blog-card--strategy .blog-card-kicker { color: #5eead4; background: rgba(94,234,212,0.12); } /* === Blog subnav (in-content toolbar above hero/article) === */ .blog-subnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 0.65rem 1rem; margin-bottom: 1.25rem; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 0.75rem; font-size: 0.875rem; } html.dark .blog-subnav { background: #111827; border-color: #1f2937; } .subnav-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; } .subnav-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #ffffff; color: #1f2937; font-weight: 500; font-size: 0.85rem; line-height: 1.1; text-decoration: none; transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease; } .subnav-btn:hover { border-color: var(--brand-primary, #10588c); color: var(--brand-primary, #10588c); background: #f1f5f9; transform: translateY(-1px); } .subnav-btn[aria-current="page"] { border-color: var(--brand-primary, #10588c); color: #ffffff; background: var(--brand-primary, #10588c); } html.dark .subnav-btn { background: #0f172a; border-color: #374151; color: #e5e7eb; } html.dark .subnav-btn:hover { background: #1e293b; border-color: var(--brand-primary, #10588c); color: var(--brand-primary, #10588c); } html.dark .subnav-btn[aria-current="page"] { color: #ffffff; } .subnav-crumbs { color: #6b7280; font-size: 0.85rem; } .subnav-crumbs a { color: #6b7280; text-decoration: none; border-bottom: 1px dotted #cbd5e1; } .subnav-crumbs a:hover { color: var(--brand-primary, #10588c); border-bottom-color: var(--brand-primary, #10588c); } html.dark .subnav-crumbs, html.dark .subnav-crumbs a { color: #9ca3af; } @media (max-width: 640px) { .blog-subnav { padding: 0.55rem 0.8rem; } .subnav-btn { padding: 0.4rem 0.65rem; font-size: 0.8rem; } } /* === Article bottom nav (Prev / All articles / Next) === */ .article-bottom-nav .subnav-btn { font-size: 0.85rem; } .article-bottom-nav .subnav-btn--center { background: var(--brand-primary, #10588c); color: #fff; border-color: var(--brand-primary, #10588c); } .article-bottom-nav .subnav-btn--center:hover { background: #0c416a; border-color: #0c416a; color: #fff; }