/* ───────────────────────────────────────────────────────────── Ruma Journal — shared styles for the blog hub + all articles. Fonts are loaded per-page in the . Palette mirrors the main site (index.html :root). Keep this the single source of truth for blog styling; every post links here. ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --pomegranate: #7A1828; --pomegranate-dark: #5C1020; --cream: #F5EFE6; --ink: #0E0B0A; --clay: #C4724F; --vellum: #E5DDD3; --display: 'Big Shoulders Display', Impact, sans-serif; --serif: 'Playfair Display', Georgia, serif; --sans: 'DM Sans', system-ui, sans-serif; --nav-h: 68px; --maxw: 720px; /* article measure */ --wide: 1100px; /* hub + nav measure */ } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { background: var(--cream); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--pomegranate); } /* ─── NAV ─────────────────────────────────────────────────── */ .blog-nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; padding: 0 2rem; background: var(--cream); border-bottom: 1px solid var(--vellum); } .blog-nav-inner { width: 100%; max-width: var(--wide); margin: 0 auto; display: flex; align-items: center; gap: 2rem; } .blog-logo { font-family: var(--display); font-weight: 900; font-size: 1.5rem; letter-spacing: -0.01em; text-transform: uppercase; text-decoration: none; color: var(--pomegranate); line-height: 1; } .blog-nav-links { margin-left: auto; display: flex; gap: 1.75rem; align-items: center; } .blog-nav-links a { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; color: var(--ink); opacity: 0.75; transition: opacity 0.2s; } .blog-nav-links a:hover { opacity: 1; } .blog-nav-cta { background: var(--pomegranate); color: var(--cream) !important; opacity: 1 !important; padding: 0.55rem 1.1rem; border-radius: 100px; } /* ─── BREADCRUMB ──────────────────────────────────────────── */ .breadcrumb { max-width: var(--maxw); margin: 2rem auto 0; padding: 0 1.5rem; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(14,11,10,0.55); } .breadcrumb a { color: rgba(14,11,10,0.55); text-decoration: none; } .breadcrumb a:hover { color: var(--pomegranate); } .breadcrumb span { margin: 0 0.4rem; } /* ─── ARTICLE ─────────────────────────────────────────────── */ .article { max-width: var(--maxw); margin: 0 auto; padding: 2rem 1.5rem 4rem; } .article-eyebrow { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay); margin-bottom: 1rem; } .article h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 1rem; color: var(--ink); } .article-meta { font-size: 0.82rem; color: rgba(14,11,10,0.55); margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; } .article-hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; margin-bottom: 2.5rem; } /* Body typography */ .article-body { font-size: 1.075rem; } .article-body > p, .article-body > ul, .article-body > ol { margin-bottom: 1.4rem; } .article-body h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(1.4rem, 3.5vw, 1.9rem); line-height: 1.15; margin: 2.75rem 0 1rem; color: var(--pomegranate); } .article-body h3 { font-family: var(--sans); font-weight: 600; font-size: 1.2rem; margin: 2rem 0 0.75rem; color: var(--ink); } .article-body a { color: var(--pomegranate); text-decoration: underline; text-underline-offset: 2px; } .article-body a:hover { color: var(--pomegranate-dark); } .article-body ul, .article-body ol { padding-left: 1.4rem; } .article-body li { margin-bottom: 0.5rem; } .article-body strong { font-weight: 600; } .article-body em { font-family: var(--serif); font-style: italic; } .article-body blockquote { border-left: 3px solid var(--clay); padding-left: 1.25rem; margin: 1.75rem 0; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--pomegranate); } .article-body img { border-radius: 4px; margin: 2rem 0; } .article-body figure { margin: 2rem 0; } .article-body figcaption { font-size: 0.82rem; color: rgba(14,11,10,0.55); margin-top: 0.5rem; text-align: center; } /* ─── FAQ ─────────────────────────────────────────────────── */ .faq { max-width: var(--maxw); margin: 3rem auto 0; padding: 0 1.5rem; } .faq h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.4rem, 3.5vw, 1.9rem); color: var(--pomegranate); margin-bottom: 1.25rem; } .faq-item { border-top: 1px solid var(--vellum); padding: 1.25rem 0; } .faq-item:last-child { border-bottom: 1px solid var(--vellum); } .faq-q { font-weight: 600; font-size: 1.08rem; margin-bottom: 0.5rem; color: var(--ink); } .faq-a { color: rgba(14,11,10,0.85); } /* ─── RELATED ─────────────────────────────────────────────── */ .related { max-width: var(--maxw); margin: 3.5rem auto 0; padding: 0 1.5rem; } .related h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; color: var(--ink); margin-bottom: 1rem; } .related ul { list-style: none; } .related li { border-top: 1px solid var(--vellum); } .related li:last-child { border-bottom: 1px solid var(--vellum); } .related a { display: block; padding: 0.9rem 0; text-decoration: none; color: var(--ink); font-weight: 500; transition: color 0.2s, padding-left 0.2s; } .related a:hover { color: var(--pomegranate); padding-left: 0.4rem; } /* ─── CTA BLOCK ───────────────────────────────────────────── */ .cta-block { max-width: var(--maxw); margin: 3.5rem auto 4rem; padding: 2.5rem 1.75rem; background: var(--pomegranate); color: var(--cream); border-radius: 6px; text-align: center; } .cta-block h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.05; margin-bottom: 0.75rem; color: var(--cream); } .cta-block p { opacity: 0.85; margin-bottom: 1.5rem; } .cta-block .cta-addr { font-size: 0.9rem; opacity: 0.8; margin-top: 1.5rem; line-height: 1.5; } .cta-block .cta-addr a { color: var(--cream); } .cta-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .cta-buttons a { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 0.8rem 1.5rem; border-radius: 100px; transition: transform 0.15s, opacity 0.2s; } .cta-buttons a:hover { transform: translateY(-2px); } .cta-primary { background: var(--cream); color: var(--pomegranate); } .cta-outline { border: 1px solid rgba(245,239,230,0.5); color: var(--cream); } /* ─── HUB (blog index) ────────────────────────────────────── */ .hub-hero { background: var(--pomegranate); color: var(--cream); padding: 4.5rem 1.5rem 4rem; text-align: center; } .hub-hero .eyebrow { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; margin-bottom: 1rem; } .hub-hero h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: 0.95; letter-spacing: -0.01em; } .hub-hero p { max-width: 540px; margin: 1.25rem auto 0; font-size: 1.05rem; opacity: 0.85; } .hub-grid { max-width: var(--wide); margin: 0 auto; padding: 3.5rem 1.5rem 5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2.5rem 2rem; } .hub-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); } .hub-card-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; margin-bottom: 1rem; transition: opacity 0.2s; } .hub-card:hover .hub-card-img { opacity: 0.9; } .hub-card .tag { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); margin-bottom: 0.5rem; } .hub-card h2 { font-family: var(--serif); font-weight: 700; font-size: 1.35rem; line-height: 1.2; margin-bottom: 0.5rem; } .hub-card:hover h2 { color: var(--pomegranate); } .hub-card p { font-size: 0.95rem; color: rgba(14,11,10,0.7); } .hub-card .read { margin-top: 0.6rem; font-size: 0.78rem; color: rgba(14,11,10,0.5); } .hub-empty { max-width: var(--wide); margin: 0 auto; padding: 4rem 1.5rem; text-align: center; color: rgba(14,11,10,0.6); } /* ─── FOOTER ──────────────────────────────────────────────── */ .blog-footer { background: var(--ink); color: var(--cream); padding: 3rem 1.5rem; text-align: center; } .blog-footer a { color: var(--cream); text-decoration: none; opacity: 0.8; } .blog-footer a:hover { opacity: 1; } .blog-footer .brand { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.6rem; letter-spacing: -0.01em; margin-bottom: 0.5rem; display: inline-block; } .blog-footer .links { margin: 1.25rem 0; display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; font-size: 0.8rem; } .blog-footer .copy { font-size: 0.78rem; opacity: 0.5; margin-top: 1rem; } /* ─── RESPONSIVE ──────────────────────────────────────────── */ @media (max-width: 640px) { .blog-nav { padding: 0 1.25rem; } .blog-nav-links { gap: 1rem; } .blog-nav-links a:not(.blog-nav-cta) { display: none; } .article { padding-top: 1.5rem; } }