/* =================================================================== GotQuestions.blog — Editorial Redesign Shared stylesheet for the entire prototype. Category accent colors are applied via . =================================================================== */ :root { /* Brand ink palette (preserved) */ --ink-900: #193446; --ink-700: #2C5571; --ink-500: #4C718C; --paper: #FDFDFD; --bone: #F3F3F6; --rule: #C3C3C3; --rule-soft: #E8E8EC; --text: #252525; --text-muted: #6B6B6B; /* Default accent (used on pages without a category) */ --accent: #479CE2; --accent-deep: #2a8cdd; --accent-tint: rgba(71,156,226,0.12); /* Typography */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Source Serif 4", Georgia, "Times New Roman", serif; --font-ui: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; --font-script: "Caveat", "Brush Script MT", cursive; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --measure-prose: 42rem; --measure-wide: 72rem; --measure-full: 90rem; --radius-sm: 2px; --radius-md: 4px; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 180ms; --dur-med: 320ms; } /* ------------------------------------------------------------------- CATEGORY THEMING Change --accent + --accent-deep + --accent-tint based on body attr. Every element that uses --accent picks up the category color automatically (tags, links, blockquote border, drop-cap, nav hover). ------------------------------------------------------------------- */ body[data-category="top20"] { --accent: #F6C214; --accent-deep: #d8a800; --accent-tint: rgba(246,194,20,0.16); } body[data-category="life"] { --accent: #2B9486; --accent-deep: #207568; --accent-tint: rgba(43,148,134,0.14); } body[data-category="insights"] { --accent: #2E9BD2; --accent-deep: #1e7fb2; --accent-tint: rgba(118,196,237,0.18); } body[data-category="about"] { --accent: #2A5672; --accent-deep: #1e4055; --accent-tint: rgba(42,86,114,0.14); } body[data-category="cultural"] { --accent: #E57927; --accent-deep: #c55f15; --accent-tint: rgba(229,121,39,0.14); } body[data-category="musings"] { --accent: #90257C; --accent-deep: #711c61; --accent-tint: rgba(144,37,124,0.14); } body[data-category="new"] { --accent: #5B9544; --accent-deep: #447033; --accent-tint: rgba(118,173,92,0.16); } body[data-category="haters"] { --accent: #2A5672; --accent-deep: #1e4055; --accent-tint: rgba(42,86,114,0.14); } /* Biblical Insights note: the brief color #76C4ED is very light; we darken its functional use slightly to maintain contrast on white while keeping the identity. Tag pills use the original brand color. */ body[data-category="insights"] .tag, body[data-category="insights"] .cat-tile--insights .cat-tile__num { color: #76C4ED; } /* "What's New" uses the lighter green #76AD5C for decoration; link/text color darkens it so small copy remains readable. */ body[data-category="new"] .tag, body[data-category="new"] .cat-tile--new .cat-tile__num { color: #76AD5C; } /* Top 20 gold: darken on text for readability on white. */ body[data-category="top20"] .tag { color: #B78B00; } /* ------------------------------------------------------------------- RESET & BASE ------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--paper); color: var(--text); font-family: var(--font-body); font-size: 1.125rem; line-height: 1.65; font-optical-sizing: auto; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ink-900); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; font-variation-settings: "opsz" 144, "SOFT" 30; } h1 { font-size: clamp(2.25rem, 4.2vw + 1rem, 4.25rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.04; } h2 { font-size: clamp(1.75rem, 2.4vw + 1rem, 2.75rem); letter-spacing: -0.028em; line-height: 1.1; } h3 { font-size: clamp(1.4rem, 1.2vw + 0.9rem, 1.875rem); letter-spacing: -0.02em; font-variation-settings: "opsz" 72; } h4 { font-size: 1.375rem; font-variation-settings: "opsz" 36; } h5 { font-size: 1.125rem; font-variation-settings: "opsz" 24; } p { margin-bottom: 1.25em; } a { color: var(--accent-deep); text-decoration: none; background-image: linear-gradient(to right, var(--accent), var(--accent)); background-position: 0 100%; background-repeat: no-repeat; background-size: 100% 1px; transition: background-size var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } a:hover { color: var(--accent); background-size: 100% 2px; } /* Utility */ .container { width: 100%; max-width: var(--measure-full); margin: 0 auto; padding: 0 var(--space-5); } @media (min-width: 768px) { .container { padding: 0 var(--space-7); } } .script { font-family: var(--font-script); font-weight: 500; font-style: normal; color: var(--accent); letter-spacing: 0; } h1 .script, h2 .script { font-size: 1.1em; line-height: 1; } .flourish { font-family: var(--font-script); font-size: 1.375rem; color: var(--accent); line-height: 1; } .tag { display: inline-block; font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-deep); background-image: none; } .tag--solid { padding: 0.35em 0.75em; background: var(--accent-tint); color: var(--accent-deep); border-radius: 999px; font-size: 0.625rem; } /* Category-colored text tags. Colors mirror the Collections tiles so a post's label on a mixed-category list carries the same hue as its tile. Darkened where needed to keep contrast on white. */ .tag.tag--cat-top20 { color: #B78B00; } .tag.tag--cat-life { color: #207568; } .tag.tag--cat-insights { color: #1E7FB2; } .tag.tag--cat-about { color: #2A5672; } .tag.tag--cat-cultural { color: #C55F15; } .tag.tag--cat-musings { color: #90257C; } .tag.tag--cat-new { color: #5B9544; } .tag.tag--cat-haters { color: #2A5672; } .meta { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--text-muted); letter-spacing: 0.01em; } .meta .dot { display: inline-block; margin: 0 var(--space-2); opacity: 0.5; } .rule { border: 0; border-top: 1px solid var(--rule-soft); margin: var(--space-8) auto; } /* ------------------------------------------------------------------- SITE HEADER ------------------------------------------------------------------- */ .site-header { background: var(--paper); border-bottom: 1px solid var(--rule-soft); position: sticky; top: 0; z-index: 20; } .site-header__strip { height: 5px; background: linear-gradient( to right, #F6C214 0 14.2%, #2B9486 14.2% 28.5%, #76C4ED 28.5% 42.8%, #2A5672 42.8% 57.1%, #E57927 57.1% 71.4%, #90257C 71.4% 85.7%, #76AD5C 85.7% 100% ); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; gap: var(--space-6); } .logo { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; background-image: none; } .logo img { display: block; height: 60px; width: auto; aspect-ratio: 535 / 132; transition: opacity var(--dur-fast) var(--ease); } .logo:hover { background-image: none; } .logo:hover img { opacity: 0.8; } @media (max-width: 540px) { .logo img { height: 40px; } } .nav { display: flex; align-items: center; gap: var(--space-5); } .nav a { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-900); background-image: none; padding: var(--space-2) 0; border-bottom: 2px solid transparent; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .nav a:hover { color: var(--accent); border-bottom-color: var(--accent); } .nav a.is-active { color: var(--accent-deep); border-bottom-color: var(--accent); } .search-form { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--rule-soft); border-radius: var(--radius-md); overflow: hidden; background: var(--paper); max-width: 260px; } .search-form input[type="text"], .search-form input.zoom_searchbox { flex: 1; border: 0; padding: var(--space-2) var(--space-3); font-family: var(--font-ui); font-size: 0.875rem; background: transparent; color: var(--ink-900); min-width: 0; } .search-form input[type="text"]:focus, .search-form input.zoom_searchbox:focus { outline: none; } .search-form button, .search-form input[type="submit"] { border: 0; background: var(--ink-900); color: var(--paper); font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0 var(--space-4); cursor: pointer; transition: background var(--dur-fast) var(--ease); } .search-form button:hover, .search-form input[type="submit"]:hover { background: var(--accent); } @media (max-width: 900px) { .nav a:not(.nav__cta) { display: none; } .search-form { display: none; } } @media (max-width: 540px) { .site-header__inner { flex-wrap: wrap; } .logo { font-size: 1.25rem; } } .nav__cta { padding: var(--space-3) var(--space-5); background: var(--ink-900); color: var(--paper) !important; border: 1px solid var(--ink-900); border-radius: var(--radius-md); font-size: 0.75rem; letter-spacing: 0.14em; transition: background var(--dur-fast) var(--ease); } .nav__cta:hover { background: var(--accent); border-color: var(--accent); color: var(--paper) !important; } /* ------------------------------------------------------------------- PROTOTYPE BANNER Subtle "prototype - not indexed" marker on every page. ------------------------------------------------------------------- */ .proto-banner { background: repeating-linear-gradient( 45deg, #fff8dc, #fff8dc 10px, #fdf3ca 10px, #fdf3ca 20px ); border-bottom: 1px solid var(--rule-soft); padding: var(--space-2) var(--space-5); text-align: center; font-family: var(--font-ui); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #856404; font-weight: 600; } /* ------------------------------------------------------------------- HOMEPAGE — HERO ------------------------------------------------------------------- */ .hero { padding: var(--space-7) 0 var(--space-6); position: relative; overflow: hidden; } .hero__issue { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-500); margin-bottom: var(--space-6); display: flex; align-items: center; gap: var(--space-3); } .hero__issue .flourish { text-transform: none; letter-spacing: 0; font-size: 1.5rem; color: var(--accent); } .hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; } @media (min-width: 900px) { .hero__grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); } } .hero__title { margin-bottom: var(--space-5); } .hero__title .drop { font-family: var(--font-script); font-weight: 500; font-style: normal; color: var(--accent); font-size: 1.15em; letter-spacing: 0; display: inline-block; transform: translateY(0.04em); margin-right: 0.1em; } .hero__dek { font-family: var(--font-body); font-size: 1.25rem; line-height: 1.5; color: var(--text-muted); max-width: 32rem; margin-bottom: var(--space-6); } .hero__media { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-md); background: var(--bone); background-image: none; color: var(--paper); } .hero__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-med) var(--ease); } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 30%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100%); pointer-events: none; } .hero__media:hover img { transform: scale(1.02); } .hero__caption { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); z-index: 1; font-size: inherit; color: var(--paper); text-shadow: none; letter-spacing: normal; font-family: inherit; } .hero__caption-eyebrow { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--paper); opacity: 0.9; display: inline-flex; align-items: center; gap: var(--space-3); } .hero__caption-eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--accent); } .hero__caption-title { font-family: var(--font-display); font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; color: var(--paper); text-shadow: 0 1px 2px rgba(0,0,0,0.35); font-variation-settings: "opsz" 96, "SOFT" 30; max-width: 28rem; margin: 0; } @media (max-width: 600px) { .hero__caption { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); } } /* ------------------------------------------------------------------- SECTIONS ------------------------------------------------------------------- */ .section { padding: var(--space-8) 0; } .section--bone { background: var(--bone); } .section__label { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-700); display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); } .section__label::after { content: ""; flex: 1; height: 1px; background: var(--rule-soft); } /* ------------------------------------------------------------------- HOMEPAGE — CATEGORY TILES Seven gateways rendered as solid-color editorial blocks. Each tile carries its category color, a decorative watermark numeral, a small "№ 01" script mark, a count pill, a large title, and a hover CTA. ------------------------------------------------------------------- */ .cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } @media (min-width: 720px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } } @media (min-width: 1100px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .cat-grid .cat-tile:first-child { grid-column: span 2; } @media (min-width: 720px) { .cat-grid .cat-tile:first-child { aspect-ratio: 8 / 3; } } .cat-tile { --tile-bg: var(--ink-900); --tile-ink: #ffffff; --tile-ink-soft: rgba(255,255,255,0.78); --tile-pill-bg: rgba(255,255,255,0.14); --tile-pill-ink: rgba(255,255,255,0.95); --tile-watermark: rgba(255,255,255,0.11); --tile-shadow-tint: rgba(25,52,70,0.32); position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate; min-width: 0; border-radius: 8px; padding: var(--space-5); aspect-ratio: 4 / 3; text-decoration: none; background: var(--tile-bg); background-image: none; color: var(--tile-ink); box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 12px 28px -14px var(--tile-shadow-tint); transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); } .cat-tile:hover { transform: translateY(-3px); color: var(--tile-ink); box-shadow: 0 2px 4px rgba(15,23,42,0.08), 0 22px 44px -16px var(--tile-shadow-tint); } .cat-tile:focus-visible { outline: 3px solid var(--tile-ink); outline-offset: 3px; } @media (max-width: 719px) { .cat-grid .cat-tile { aspect-ratio: auto; min-height: 190px; } .cat-grid .cat-tile:first-child { aspect-ratio: 4 / 3; min-height: 0; } } .cat-tile__watermark { position: absolute; right: -0.08em; bottom: -0.32em; z-index: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(9rem, 22vw, 18rem); line-height: 0.8; letter-spacing: -0.06em; color: var(--tile-watermark); font-variation-settings: "opsz" 144; pointer-events: none; user-select: none; } .cat-grid .cat-tile:first-child .cat-tile__watermark { font-size: clamp(12rem, 28vw, 26rem); } .cat-tile__head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .cat-tile__num { font-family: var(--font-script); font-size: 1.625rem; line-height: 1; color: var(--tile-ink); opacity: 0.92; } .cat-tile__count { font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tile-pill-ink); background: var(--tile-pill-bg); padding: 0.45em 0.8em; border-radius: 999px; white-space: nowrap; } .cat-tile__body { position: relative; z-index: 1; margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); } .cat-tile__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.375rem, 1.1vw + 1rem, 1.875rem); line-height: 1.05; letter-spacing: -0.025em; color: var(--tile-ink); font-variation-settings: "opsz" 72; } .cat-grid .cat-tile:first-child .cat-tile__title { font-size: clamp(1.875rem, 2.6vw + 1rem, 3rem); letter-spacing: -0.035em; } .cat-tile__cta { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tile-ink); opacity: 0.82; transition: opacity var(--dur-fast) var(--ease); } .cat-tile__cta > span { display: inline-block; transition: transform var(--dur-med) var(--ease); } .cat-tile:hover .cat-tile__cta { opacity: 1; } .cat-tile:hover .cat-tile__cta > span { transform: translateX(5px); } /* Per-category color tokens. Dark-ink tiles (top20, insights, cultural, new) ride on the lighter brand colors; white-ink tiles (life, about, musings) ride on the darker ones. Each tile also gets a tinted drop-shadow that picks up its own hue — subtle warmth rather than flat grey. */ .cat-tile--top20 { --tile-bg: #F6C214; --tile-ink: #3B2800; --tile-ink-soft: rgba(59,40,0,0.66); --tile-pill-bg: rgba(59,40,0,0.1); --tile-pill-ink: #3B2800; --tile-watermark: rgba(59,40,0,0.14); --tile-shadow-tint: rgba(139,101,0,0.35); } .cat-tile--life { --tile-bg: #2B9486; --tile-shadow-tint: rgba(18,80,72,0.4); } .cat-tile--insights { --tile-bg: #76C4ED; --tile-ink: #0B3854; --tile-ink-soft: rgba(11,56,84,0.68); --tile-pill-bg: rgba(11,56,84,0.1); --tile-pill-ink: #0B3854; --tile-watermark: rgba(11,56,84,0.14); --tile-shadow-tint: rgba(30,127,178,0.35); } .cat-tile--about { --tile-bg: #2A5672; --tile-shadow-tint: rgba(13,35,50,0.45); } .cat-tile--cultural { --tile-bg: #E57927; --tile-ink: #3E1C00; --tile-ink-soft: rgba(62,28,0,0.68); --tile-pill-bg: rgba(62,28,0,0.1); --tile-pill-ink: #3E1C00; --tile-watermark: rgba(62,28,0,0.14); --tile-shadow-tint: rgba(138,58,0,0.4); } .cat-tile--musings { --tile-bg: #90257C; --tile-shadow-tint: rgba(63,8,55,0.45); } .cat-tile--new { --tile-bg: #76AD5C; --tile-ink: #1C2E10; --tile-ink-soft: rgba(28,46,16,0.68); --tile-pill-bg: rgba(28,46,16,0.1); --tile-pill-ink: #1C2E10; --tile-watermark: rgba(28,46,16,0.14); --tile-shadow-tint: rgba(53,90,31,0.4); } /* ------------------------------------------------------------------- FEATURED GRID (category pages + homepage) ------------------------------------------------------------------- */ .featured-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); } @media (min-width: 720px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .featured-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } } .post-card { display: flex; flex-direction: column; gap: var(--space-4); } .post-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-sm); background: var(--bone); background-image: none; } .post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); } .post-card:hover .post-card__media img { transform: scale(1.03); } .post-card__title { font-size: 1.5rem; line-height: 1.2; margin-top: var(--space-2); font-family: var(--font-display); font-weight: 500; color: var(--ink-900); letter-spacing: -0.02em; } .post-card__title a { color: var(--ink-900); background-image: none; } .post-card__title a:hover { color: var(--accent-deep); } .post-card__excerpt { color: var(--text-muted); font-size: 1rem; line-height: 1.55; } /* ------------------------------------------------------------------- POST LIST (category pages) ------------------------------------------------------------------- */ .post-list { display: flex; flex-direction: column; max-width: var(--measure-wide); margin: 0 auto; } .post-list__item { display: grid; grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-6) 0; border-bottom: 1px solid var(--rule-soft); } .post-list__item:last-child { border-bottom: 0; } @media (min-width: 720px) { .post-list__item { grid-template-columns: 220px 1fr; gap: var(--space-6); align-items: center; } } .post-list__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); background: var(--bone); background-image: none; } .post-list__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); } .post-list__item:hover .post-list__media img { transform: scale(1.03); } .post-list__title { font-size: 1.625rem; line-height: 1.15; margin: var(--space-2) 0; font-family: var(--font-display); font-weight: 500; color: var(--ink-900); letter-spacing: -0.02em; } .post-list__title a { color: var(--ink-900); background-image: none; } .post-list__title a:hover { color: var(--accent-deep); } .post-list__excerpt { color: var(--text-muted); font-size: 1rem; line-height: 1.5; margin-bottom: var(--space-2); } /* ------------------------------------------------------------------- CATEGORY PAGE HERO ------------------------------------------------------------------- */ .cat-hero { padding: var(--space-9) 0 var(--space-7); border-bottom: 1px solid var(--rule-soft); position: relative; overflow: hidden; } .cat-hero::before { content: ""; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--accent); } .cat-hero__inner { max-width: 50rem; padding-left: var(--space-5); } @media (min-width: 900px) { .cat-hero .container { display: grid; grid-template-columns: 1fr clamp(260px, 32%, 440px); gap: var(--space-7); align-items: stretch; } .cat-hero__inner { max-width: none; } } .cat-hero__eyebrow { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.24em; color: var(--accent-deep); margin-bottom: var(--space-4); } .cat-hero__title { font-size: clamp(2.5rem, 4vw + 1rem, 4rem); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: var(--space-5); } .cat-hero__dek { font-family: var(--font-body); font-size: 1.25rem; font-style: italic; color: var(--ink-500); line-height: 1.5; max-width: 38rem; } .cat-hero__tile { /* RGB triplet of the category color; set per-category below. */ --tile-rgb: 25, 52, 70; display: none; position: relative; overflow: hidden; isolation: isolate; padding: var(--space-6); color: var(--ink-900); background: linear-gradient( 115deg, rgba(var(--tile-rgb), 0) 0%, rgba(var(--tile-rgb), 0.08) 30%, rgba(var(--tile-rgb), 0.22) 60%, rgba(var(--tile-rgb), 0.5) 100% ); min-height: 12rem; } @media (min-width: 900px) { .cat-hero__tile { display: flex; flex-direction: column; justify-content: space-between; } } .cat-hero__tile-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .cat-hero__tile-num { font-family: var(--font-script); font-size: 1.75rem; line-height: 1; color: var(--accent-deep); } .cat-hero__tile-count { font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); background: rgba(255,255,255,0.6); border: 1px solid rgba(var(--tile-rgb), 0.3); padding: 0.45em 0.8em; border-radius: 999px; white-space: nowrap; backdrop-filter: blur(2px); } .cat-hero__tile-watermark { position: absolute; right: -0.04em; bottom: -0.22em; z-index: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(9rem, 16vw, 14rem); line-height: 0.8; letter-spacing: -0.06em; color: rgba(var(--tile-rgb), 0.3); font-variation-settings: "opsz" 144; pointer-events: none; user-select: none; } body[data-category="top20"] .cat-hero__tile { --tile-rgb: 246, 194, 20; } body[data-category="life"] .cat-hero__tile { --tile-rgb: 43, 148, 134; } body[data-category="insights"] .cat-hero__tile { --tile-rgb: 46, 155, 210; } body[data-category="cultural"] .cat-hero__tile { --tile-rgb: 229, 121, 39; } body[data-category="musings"] .cat-hero__tile { --tile-rgb: 144, 37, 124; } body[data-category="about"] .cat-hero__tile, body[data-category="haters"] .cat-hero__tile { --tile-rgb: 42, 86, 114; } body[data-category="new"] .cat-hero__tile { --tile-rgb: 91, 149, 68; } /* ------------------------------------------------------------------- NEWSLETTER BAND (optional — used on homepage) ------------------------------------------------------------------- */ .newsletter { background: var(--ink-700); color: var(--paper); padding: var(--space-9) var(--space-5); background-image: radial-gradient(ellipse 60% 40% at 20% 30%, var(--accent-tint), transparent 60%), radial-gradient(ellipse 40% 60% at 80% 70%, var(--accent-tint), transparent 60%); } .newsletter__inner { max-width: 38rem; margin: 0 auto; text-align: center; } .newsletter__tag { color: var(--accent); font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; margin-bottom: var(--space-4); display: block; } .newsletter h2 { color: var(--paper); margin-bottom: var(--space-4); } .newsletter p { color: rgba(255,255,255,0.75); max-width: 28rem; margin: 0 auto var(--space-5); } /* ------------------------------------------------------------------- ARTICLE PAGE ------------------------------------------------------------------- */ .article-header { padding: var(--space-9) 0 var(--space-6); text-align: center; max-width: 52rem; margin: 0 auto; padding-left: var(--space-5); padding-right: var(--space-5); } .article-header .tag { margin-bottom: var(--space-4); } .article-header h1 { margin-bottom: var(--space-5); font-size: clamp(2.25rem, 4vw + 1rem, 4rem); } .article-header__dek { font-family: var(--font-body); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--ink-500); max-width: 40rem; margin: 0 auto var(--space-5); } .article-header__meta { display: flex; justify-content: center; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .byline { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-ui); font-size: 0.875rem; } .byline__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bone); overflow: hidden; flex-shrink: 0; } .byline__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .byline__name { color: var(--ink-900); font-weight: 600; } .article-hero { max-width: var(--measure-wide); margin: 0 auto var(--space-8); padding: 0 var(--space-5); } .article-hero__media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md); background: var(--bone); position: relative; } .article-hero__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--accent); } .article-hero__media img { width: 100%; height: 100%; object-fit: cover; } .article-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); max-width: var(--measure-wide); margin: 0 auto; padding: 0 var(--space-5); } @media (min-width: 960px) { .article-layout { grid-template-columns: minmax(0, var(--measure-prose)) 18rem; gap: var(--space-9); justify-content: center; } } /* The prose block — editorial typography for article body. */ .prose { font-family: var(--font-body); font-size: 1.1875rem; line-height: 1.7; color: var(--text); } .prose > * + * { margin-top: 1.1em; } .prose p { margin-bottom: 1.1em; } .prose h2 { font-size: 1.875rem; margin-top: 2em; margin-bottom: 0.5em; color: var(--ink-900); } .prose h3 { font-size: 1.5rem; margin-top: 1.8em; margin-bottom: 0.5em; color: var(--ink-900); } .prose p:first-child::first-letter, .prose > p:first-of-type::first-letter { font-family: var(--font-display); font-weight: 500; font-size: 4.5em; float: left; line-height: 0.85; padding: 0.05em 0.08em 0 0; color: var(--accent-deep); font-variation-settings: "opsz" 144; } .prose blockquote { margin: 2em 0; padding-left: var(--space-5); border-left: 3px solid var(--accent); font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.5rem; line-height: 1.35; color: var(--ink-700); letter-spacing: -0.01em; } .prose ul, .prose ol { padding-left: var(--space-6); margin-bottom: 1.1em; } .prose li { margin-bottom: 0.4em; } .prose li::marker { color: var(--accent); } .prose figure { margin: 2em 0; } .prose figure img { border-radius: var(--radius-md); } .prose figcaption { margin-top: var(--space-3); font-family: var(--font-ui); font-size: 0.8125rem; color: var(--text-muted); text-align: center; font-style: italic; } .prose strong, .prose b { color: var(--ink-900); font-weight: 600; } .prose em, .prose i { color: inherit; } .prose a { color: var(--accent-deep); font-weight: 500; } .prose img { margin: 1.5em auto; border-radius: var(--radius-md); } .prose img.responsive { width: 100%; max-width: 800px; } .prose hr { border: 0; text-align: center; margin: 2.5em auto; width: 100%; } .prose hr::before { content: "• • •"; letter-spacing: 0.5em; color: var(--rule); font-size: 0.875rem; } .prose sup { font-size: 0.7em; color: var(--accent-deep); font-weight: 600; } .prose center { display: block; text-align: center; margin: 1.5em 0; } .prose form { text-align: center; margin: 1.5em 0; } /* ------------------------------------------------------------------- ARTICLE SIDEBAR ------------------------------------------------------------------- */ .sidebar { display: flex; flex-direction: column; gap: var(--space-7); } @media (min-width: 960px) { .sidebar { position: sticky; top: calc(var(--space-9) + 20px); align-self: start; } } .sidebar__section { border-top: 1px solid var(--rule-soft); padding-top: var(--space-5); } .sidebar__section:first-child { border-top: 0; padding-top: 0; } .sidebar__label { font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-700); margin-bottom: var(--space-4); } /* Testimony card */ .testimony-card { display: block; position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--bone); background-image: none; border: 1px solid var(--rule-soft); transition: transform var(--dur-med) var(--ease); } .testimony-card:hover { transform: translateY(-2px); color: var(--ink-900); } .testimony-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-700); } .testimony-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 600ms var(--ease); } .testimony-card:hover .testimony-card__media img { transform: scale(1.04); } .testimony-card__body { padding: var(--space-4); } .testimony-card__script { font-family: var(--font-script); font-size: 1.375rem; color: var(--accent); line-height: 1; display: block; margin-bottom: var(--space-2); } .testimony-card__title { font-family: var(--font-display); font-size: 1.125rem; color: var(--ink-900); line-height: 1.2; margin-bottom: var(--space-2); font-weight: 500; } .testimony-card__cta { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); } /* Related posts list */ .related { display: flex; flex-direction: column; gap: var(--space-4); } .related__item { display: flex; gap: var(--space-4); align-items: flex-start; text-decoration: none; background-image: none; color: inherit; } .related__media { width: 72px; height: 72px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--bone); } .related__media img { width: 100%; height: 100%; object-fit: cover; } .related__content { flex: 1; min-width: 0; } .related__title { font-family: var(--font-display); font-size: 1rem; line-height: 1.25; color: var(--ink-900); font-weight: 500; margin-bottom: var(--space-1); background-image: none; display: block; } .related__item:hover .related__title { color: var(--accent-deep); } .related__meta { font-family: var(--font-ui); font-size: 0.75rem; color: var(--text-muted); } /* Category pill links — used in sidebar */ .cat-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); } .cat-pills a { display: inline-block; padding: 0.4em 0.8em; border-radius: 999px; font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background-image: none; border: 1px solid transparent; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .cat-pills a[data-cat="top20"] { background: rgba(246,194,20,0.15); color: #8a6600; } .cat-pills a[data-cat="life"] { background: rgba(43,148,134,0.12); color: #2B9486; } .cat-pills a[data-cat="insights"] { background: rgba(118,196,237,0.20); color: #1e7fb2; } .cat-pills a[data-cat="about"] { background: rgba(42,86,114,0.12); color: #2A5672; } .cat-pills a[data-cat="cultural"] { background: rgba(229,121,39,0.15); color: #c55f15; } .cat-pills a[data-cat="musings"] { background: rgba(144,37,124,0.12); color: #90257C; } .cat-pills a[data-cat="new"] { background: rgba(118,173,92,0.18); color: #447033; } .cat-pills a:hover { background: var(--ink-900); color: var(--paper); } /* ------------------------------------------------------------------- ARTICLE FOOTER (previous/next, return link) ------------------------------------------------------------------- */ .article-foot { max-width: var(--measure-prose); margin: var(--space-9) auto var(--space-8); padding: var(--space-6) var(--space-5) 0; border-top: 1px solid var(--rule-soft); text-align: center; } .article-foot__return { font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-deep); background-image: none; display: inline-flex; align-items: center; gap: var(--space-2); } .article-foot__return:hover { color: var(--accent); } .article-foot__byline { margin-top: var(--space-5); font-family: var(--font-script); font-size: 1.75rem; color: var(--ink-500); line-height: 1; } /* ------------------------------------------------------------------- TESTIMONY PAGE — special layout ------------------------------------------------------------------- */ .testimony-hero { display: grid; grid-template-columns: 1fr; gap: var(--space-7); max-width: var(--measure-wide); margin: 0 auto; padding: var(--space-8) var(--space-5); align-items: center; } @media (min-width: 900px) { .testimony-hero { grid-template-columns: 1fr 1fr; gap: var(--space-9); padding: var(--space-9) var(--space-5); } } .testimony-hero__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-md); background: var(--bone); max-height: 600px; } .testimony-hero__media img { width: 100%; height: 100%; object-fit: cover; } .testimony-hero__title { font-size: clamp(2.5rem, 4.5vw + 1rem, 4.5rem); margin-bottom: var(--space-5); line-height: 0.98; } .testimony-hero__dek { font-family: var(--font-body); font-style: italic; font-size: 1.25rem; color: var(--ink-500); line-height: 1.5; margin-bottom: var(--space-5); } .decision-form { margin: var(--space-6) 0 var(--space-5); text-align: center; } .decision-cta { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); background: var(--ink-900); color: var(--paper); border: 1px solid var(--ink-900); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .decision-cta:hover, .decision-cta:focus-visible { background: var(--accent); border-color: var(--accent); outline: none; } .decision-cta__arrow { font-family: var(--font-body); font-size: 1rem; transition: transform var(--dur-fast) var(--ease); } .decision-cta:hover .decision-cta__arrow { transform: translateX(3px); } /* ------------------------------------------------------------------- FOOTER ------------------------------------------------------------------- */ .site-footer { background: var(--ink-900); color: rgba(255,255,255,0.75); padding: var(--space-9) 0 var(--space-5); margin-top: var(--space-9); } .site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); } @media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--space-6); } } .site-footer h5 { color: var(--paper); font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: var(--space-4); } .site-footer ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); } .site-footer ul a { color: rgba(255,255,255,0.75); background-image: none; font-family: var(--font-ui); font-size: 0.9375rem; transition: color var(--dur-fast) var(--ease); } .site-footer ul a:hover { color: var(--accent); } .site-footer__brand { display: inline-block; line-height: 0; margin-bottom: var(--space-4); background-image: none; } .site-footer__brand img { display: block; height: 48px; width: 195px; /* 535:132 aspect ratio × 48px */ aspect-ratio: 535 / 132; transition: opacity var(--dur-fast) var(--ease); } .site-footer__brand:hover { background-image: none; } .site-footer__brand:hover img { opacity: 0.85; } .site-footer__tagline { font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,0.6); max-width: 22rem; margin-bottom: var(--space-4); } .site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: var(--space-7); padding-top: var(--space-4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-family: var(--font-ui); font-size: 0.8125rem; color: rgba(255,255,255,0.5); } .site-footer__updated { font-family: var(--font-ui); font-size: 0.75rem; color: rgba(255,255,255,0.45); letter-spacing: 0.04em; } /* ------------------------------------------------------------------- SEARCH / 404 small-page styling ------------------------------------------------------------------- */ .simple-page { max-width: var(--measure-prose); margin: 0 auto; padding: var(--space-9) var(--space-5); text-align: center; } .simple-page h1 { margin-bottom: var(--space-5); } .simple-page__search { margin: var(--space-6) auto; max-width: 30rem; } .simple-page__search .search-form { max-width: none; width: 100%; } /* ------------------------------------------------------------------- GOOGLE CSE — restyle to match editorial design Targets the Google Custom Search Engine widget rendered into .gcse-searchresults-only. Uses !important sparingly to beat the inline styles Google injects. ------------------------------------------------------------------- */ .gcse-searchresults-only, .gsc-control-cse { font-family: var(--font-body) !important; background: transparent !important; border: 0 !important; padding: 0 !important; } .gsc-control-cse * { box-sizing: border-box; } /* Results header: "About N results" + sort */ .gsc-above-wrapper-area { border-bottom: 1px solid var(--rule-soft) !important; padding: 0 0 var(--space-4) !important; margin-bottom: var(--space-5) !important; } .gsc-result-info, .gsc-orderby-label, .gsc-selected-option-container { font-family: var(--font-ui) !important; font-size: 0.8125rem !important; letter-spacing: 0.04em; color: var(--text-muted) !important; padding: 0 !important; } .gsc-orderby-container { border: 0 !important; } .gsc-selected-option-container { background: transparent !important; box-shadow: none !important; min-width: 0 !important; } /* Each result */ .gsc-webResult.gsc-result, .gsc-results .gsc-result { border: 0 !important; border-bottom: 1px solid var(--rule-soft) !important; padding: var(--space-5) 0 !important; margin: 0 !important; background: transparent !important; } .gsc-webResult.gsc-result:hover { background: transparent !important; } .gs-result .gs-title, .gs-result .gs-title * { font-family: var(--font-display) !important; font-size: 1.375rem !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: -0.015em !important; color: var(--ink-900) !important; text-decoration: none !important; font-variation-settings: "opsz" 96, "SOFT" 30; } .gs-result a.gs-title, .gs-result a.gs-title:link, .gs-result a.gs-title:visited { color: var(--ink-900) !important; } .gs-result a.gs-title:hover, .gs-result a.gs-title:hover *, .gs-result a.gs-title:hover b { color: var(--accent-deep) !important; } .gs-result a.gs-title b { color: var(--ink-900) !important; font-weight: 600 !important; } /* URL line — small, muted, UI font */ .gsc-url-top, .gs-webResult div.gs-visibleUrl, .gs-webResult div.gs-visibleUrl-long, .gs-webResult div.gs-visibleUrl-short { font-family: var(--font-ui) !important; font-size: 0.8125rem !important; color: var(--text-muted) !important; margin-top: var(--space-2) !important; letter-spacing: 0.01em; word-break: break-word; } /* Snippet body */ .gs-webResult div.gs-snippet, .gs-imageResult div.gs-snippet, .gs-fileFormatType { font-family: var(--font-body) !important; font-size: 1rem !important; line-height: 1.55 !important; color: var(--text) !important; margin-top: var(--space-3) !important; } .gs-webResult div.gs-snippet b, .gs-webResult div.gs-snippet .gs-per-result-labels b, .gs-spelling b { background: var(--accent-tint); color: var(--ink-900) !important; font-weight: 600 !important; padding: 0 0.15em; border-radius: var(--radius-sm); } /* Pagination cursor */ .gsc-cursor-box { margin-top: var(--space-6) !important; border: 0 !important; display: flex; gap: var(--space-2); justify-content: center; } .gsc-cursor-page { font-family: var(--font-ui) !important; font-size: 0.8125rem !important; font-weight: 600 !important; color: var(--ink-700) !important; background: var(--bone) !important; border: 1px solid var(--rule-soft) !important; border-radius: var(--radius-sm) !important; padding: var(--space-2) var(--space-3) !important; text-decoration: none !important; min-width: 2rem; text-align: center; } .gsc-cursor-page:hover { color: var(--accent-deep) !important; border-color: var(--accent) !important; } .gsc-cursor-current-page, .gsc-cursor-page.gsc-cursor-current-page { color: var(--paper) !important; background: var(--ink-900) !important; border-color: var(--ink-900) !important; } /* "Did you mean" / spelling suggestions */ .gs-spelling, .gsc-spelling { font-family: var(--font-body) !important; font-size: 1rem !important; color: var(--text-muted) !important; padding: var(--space-4) 0 !important; } .gs-spelling a { color: var(--accent-deep) !important; } /* Hide the stray image-result thumbnail box CSE sometimes inserts for results without images — it's usually an empty frame. */ .gs-result .gs-image-box { display: none; } /* Remove Google's default table-based layout padding that creates awkward horizontal gaps on narrow screens. */ .gsc-table-result, .gsc-table-cell-thumbnail, .gsc-thumbnail-inside, .gsc-url-top { padding-left: 0 !important; padding-right: 0 !important; } /* ------------------------------------------------------------------- Skip link for accessibility ------------------------------------------------------------------- */ .skip-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { position: fixed; left: var(--space-3); top: var(--space-3); width: auto; height: auto; z-index: 100; padding: var(--space-2) var(--space-3); background: var(--ink-900); color: var(--paper); border-radius: var(--radius-sm); }