/* * homepage.css — Tigray Insights custom homepage styles (v2 refinement) * Child theme: ashe-pro-child * Loaded only on the front page via tigrayinsights_enqueue_child_theme_styles(). * * Design language: editorial, policy-institute, restrained motion. * Visual reference: Elevara landing (adapted — design discipline only, * not content structure or branding aesthetics). * * CSS custom properties are declared on :root so they cascade to all * homepage sections without repetition. * * Naming convention: .ti-hp-* for homepage layout sections, * .ti-pathway-* for knowledge pathway cards, * .ti-reveal / .ti-revealed for scroll animations. */ /* ───────────────────────────────────────────────────── CSS CUSTOM PROPERTIES ───────────────────────────────────────────────────── */ :root { --ti-red: #c0392b; --ti-red-dark: #a93226; --ti-dark: #1a2330; --ti-slate: #2f3a45; --ti-warm: #f9f8f6; --ti-warm-alt: #f4f1ec; --ti-border: #e8e4df; --ti-muted: #5a6a78; --ti-teal: #16a085; --ti-teal-dark: #138a72; /* shadow scale */ --ti-shadow-sm: 0 2px 8px rgba(26, 35, 48, 0.06); --ti-shadow: 0 4px 20px rgba(26, 35, 48, 0.09); --ti-shadow-md: 0 8px 32px rgba(26, 35, 48, 0.13); --ti-shadow-lg: 0 20px 56px rgba(26, 35, 48, 0.18); /* motion */ --ti-ease: cubic-bezier(0.4, 0, 0.2, 1); --ti-duration: 0.22s; } /* ───────────────────────────────────────────────────── SCROLL REVEAL Requires homepage-reveal.js, which adds .ti-js to before first paint (via inline head script in functions.php). Without JS: all elements visible. No flash. ───────────────────────────────────────────────────── */ .ti-js .ti-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.58s ease-out, transform 0.58s ease-out; will-change: opacity, transform; } .ti-js .ti-reveal.ti-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .ti-js .ti-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ───────────────────────────────────────────────────── LAYOUT SHELL ───────────────────────────────────────────────────── */ .ti-homepage { background: var(--ti-warm); padding: 0; } .ti-hp-container { max-width: 100%; padding: 0 1.75rem; } /* generic section spacing — generous to breathe */ .ti-hp-section { margin-bottom: 4rem; padding-top: 2.25rem; } /* ───────────────────────────────────────────────────── SECTION TITLE (small-caps eyebrow above each section) Uses a flex + extending rule for visual weight ───────────────────────────────────────────────────── */ .ti-hp-section-title { font-size: 0.9rem; /* v3.1: larger — was 0.69rem */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ti-slate); /* v3.1: more visible — was var(--ti-muted) */ margin-bottom: 1.6em; margin-top: 0; display: flex; align-items: center; gap: 1em; } .ti-hp-section-title::after { content: ''; flex: 1; height: 1px; background: var(--ti-border); } /* ───────────────────────────────────────────────────── SECTION 1 — MISSION STRIP ───────────────────────────────────────────────────── */ .ti-hp-mission { border-top: 3px solid var(--ti-red); background: #ffffff; padding: 3.5rem 2.5rem 3.2rem; margin-bottom: 3rem; text-align: center; /* Task B: center everything */ } .ti-hp-mission-inner { max-width: 780px; margin-left: auto; margin-right: auto; } .ti-hp-mission-label { font-size: 0.69rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ti-red); margin: 0 0 1.3em; /* centered — no dash prefix needed */ display: block; } .ti-hp-mission-statement { font-size: 1.55rem; /* Task B: larger */ line-height: 1.56; color: var(--ti-slate); margin: 0 0 1.4em; font-weight: 400; max-width: 680px; margin-left: auto; margin-right: auto; } .ti-hp-mission-divider { width: 36px; height: 2px; background: var(--ti-border); margin: 0 auto 1.1em; /* centered */ } .ti-hp-mission-sub { font-size: 0.88rem; color: var(--ti-muted); letter-spacing: 0.04em; margin: 0; font-style: italic; } /* ───────────────────────────────────────────────────── SECTION 2 — KNOWLEDGE PATHWAYS ───────────────────────────────────────────────────── */ .ti-hp-pathways { padding-top: 0; } .ti-hp-pathways-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } /* individual card */ .ti-hp-pathway-card { display: flex; flex-direction: column; padding: 1.8rem 1.75rem 1.6rem; background: #ffffff; border: 1px solid var(--ti-border); border-top: 3px solid var(--ti-border); /* overridden per card below */ text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: box-shadow var(--ti-duration) var(--ti-ease), transform var(--ti-duration) var(--ti-ease), background var(--ti-duration) var(--ti-ease); } /* * Gradient shimmer underlay — invisible at rest, reveals on hover. * Adapted from Elevara's why-card ::before pattern (gradient line + * background tint), toned down for editorial restraint. */ .ti-hp-pathway-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.55) 0%, transparent 50% ); opacity: 0; transition: opacity 0.28s ease; pointer-events: none; } .ti-hp-pathway-card:hover { box-shadow: 0 14px 44px rgba(26, 35, 48, 0.18); transform: translateY(-6px); background: var(--ti-warm); text-decoration: none; color: inherit; } .ti-hp-pathway-card:hover::before { opacity: 1; } .ti-hp-pathway-card:hover .ti-pathway-title { color: var(--ti-red); } /* per-card accent colors (top border) */ .ti-pathway-red { border-top-color: var(--ti-red); } .ti-pathway-dark { border-top-color: var(--ti-dark); } .ti-pathway-blue { border-top-color: #2980b9; } .ti-pathway-green { border-top-color: #27ae60; } .ti-pathway-amber { border-top-color: #c79c22; } .ti-pathway-teal { border-top-color: var(--ti-teal); } .ti-pathway-tigrinya { display: block; font-size: 0.68rem; /* Task C: slightly larger */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ti-muted); margin-bottom: 0.55em; opacity: 0.85; text-align: center; /* Task C: centered */ } .ti-pathway-title { font-size: 1.14rem; /* Task C: larger */ font-weight: 700; color: var(--ti-dark); margin: 0 0 0.65em; line-height: 1.26; text-align: center; /* Task C: centered */ transition: color var(--ti-duration) var(--ti-ease); } .ti-pathway-desc { font-size: 0.875rem; line-height: 1.6; color: var(--ti-muted); margin: 0 0 1.15em; flex-grow: 1; text-align: center; /* Task C: centered */ } /* CTA arrow shifts on hover for micro-motion feedback */ .ti-pathway-cta { font-size: 0.79rem; font-weight: 700; color: var(--ti-red); letter-spacing: 0.04em; margin-top: auto; display: flex; /* Task C: center CTA */ justify-content: center; align-items: center; gap: 0.3em; transition: gap var(--ti-duration) var(--ti-ease); } .ti-hp-pathway-card:hover .ti-pathway-cta { gap: 0.55em; } /* ───────────────────────────────────────────────────── SECTION 3 — FEATURED ANALYSIS ───────────────────────────────────────────────────── */ /* * Task D: Featured Analysis — full editorial width, two-column feel. * Title left, excerpt + CTA right (via CSS Grid on wide viewports). * Removes the pinched left-border-only box in favour of a headline-first * layout that uses the full container width. */ .ti-hp-featured-inner { background: var(--ti-warm-alt); border: 1px solid var(--ti-border); border-top: 4px solid var(--ti-red); /* top accent rather than left sliver */ padding: 2.8rem 3rem 2.4rem; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; column-gap: 3.5rem; /* meta spans full width as a header row */ grid-template-areas: "meta meta" "title excerpt" "image excerpt" "footer footer"; } /* decorative opening quote in background */ .ti-hp-featured-inner::before { content: '\201C'; position: absolute; top: -0.15em; right: 1.5rem; font-size: 12rem; line-height: 1; color: rgba(192, 57, 43, 0.045); font-family: Georgia, 'Times New Roman', serif; pointer-events: none; user-select: none; } .ti-hp-featured-meta { grid-area: meta; display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4em; } .ti-hp-featured-label { font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; background: var(--ti-red); color: #fff; padding: 0.24em 0.75em; border-radius: 2px; } .ti-hp-featured-date { font-size: 0.8rem; color: var(--ti-muted); font-style: italic; } .ti-hp-featured-title { grid-area: title; margin: 0 0 1.4rem; font-size: 1.9rem; /* Task D: larger, more editorial weight */ line-height: 1.2; font-weight: 700; align-self: start; padding-right: 3rem; border-right: 1px solid var(--ti-border); } .ti-hp-featured-image { grid-area: image; align-self: start; padding-right: 3rem; border-right: 1px solid var(--ti-border); margin: 0; } .ti-hp-featured-image img { width: 100%; height: auto; display: block; border-radius: 2px; } .ti-hp-featured-title a { color: var(--ti-dark); text-decoration: none; transition: color var(--ti-duration); } .ti-hp-featured-title a:hover { color: var(--ti-red); text-decoration: none; } .ti-hp-featured-excerpt { grid-area: excerpt; font-size: 0.97rem; line-height: 1.72; color: var(--ti-slate); margin: 0; align-self: start; } /* Footer row separates CTA from content with a faint rule */ .ti-hp-featured-footer { grid-area: footer; border-top: 1px solid rgba(192, 57, 43, 0.14); padding-top: 1.3em; margin-top: 1.4em; } .ti-hp-read-more { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.86rem; font-weight: 700; color: var(--ti-red); text-decoration: none; letter-spacing: 0.03em; transition: gap var(--ti-duration) var(--ti-ease), color var(--ti-duration); } .ti-hp-read-more:hover { color: var(--ti-red-dark); gap: 0.65em; text-decoration: none; } /* ───────────────────────────────────────────────────── SECTION 4 — GENOCIDE CHRONICLE RESOURCE BLOCK ───────────────────────────────────────────────────── */ .ti-hp-chronicle { padding-top: 0; } /* * v3.2: Chronicle reworked to single-column centered layout. * The two-column flex (body + cta-col) is replaced by a single * centred body column. A thin crimson left-border accent on the * inner container adds editorial gravity without visual noise. */ .ti-hp-chronicle-inner { background: #ffffff; color: var(--ti-slate); padding: 3rem 3.5rem 3rem; display: block; text-align: center; position: relative; overflow: hidden; border: 1px solid var(--ti-border); border-top: 4px solid var(--ti-red); } .ti-hp-chronicle-inner::before { content: ''; position: absolute; top: -55%; right: -8%; width: 520px; height: 520px; background: radial-gradient( circle, rgba(192, 57, 43, 0.04) 0%, transparent 65% ); pointer-events: none; } .ti-hp-chronicle-body { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; /* centre the text block within the full-width card */ } /* .ti-hp-chronicle-cta-col removed — CTA now lives inside .ti-hp-chronicle-body */ /* .ti-hp-chronicle-label removed — label now uses .ti-hp-section-title */ .ti-hp-chronicle-title { font-size: 1.42rem; font-weight: 700; color: var(--ti-dark); margin: 0 0 1em; line-height: 1.3; } /* v3.2: war-counter statement — all crimson, bold dates only */ .ti-hp-chronicle-counter { font-size: 1.25rem; line-height: 1.7; color: var(--ti-red); font-weight: 400; margin: 0 0 1.4em; } .ti-hp-chronicle-counter strong { font-weight: 700; color: var(--ti-red); } .ti-hp-chronicle-desc { font-size: 0.91rem; line-height: 1.68; color: var(--ti-muted); max-width: 560px; margin: 0 auto 1.8em; } .ti-hp-chronicle-link { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.84rem; font-weight: 600; color: var(--ti-red); border: 1px solid rgba(192, 57, 43, 0.35); padding: 0.7em 1.5em; text-decoration: none; letter-spacing: 0.06em; white-space: nowrap; transition: background var(--ti-duration), border-color var(--ti-duration), color var(--ti-duration), gap var(--ti-duration); } .ti-hp-chronicle-link:hover { background: rgba(192, 57, 43, 0.05); border-color: var(--ti-red); color: var(--ti-red-dark); gap: 0.75em; text-decoration: none; } /* ───────────────────────────────────────────────────── SECTION 5 — RECENT WRITING ───────────────────────────────────────────────────── */ .ti-hp-recent-list { list-style: none; margin: 0 0 1.5em; padding: 0; } .ti-hp-recent-item { display: flex; align-items: baseline; gap: 1.2em; padding: 0.95em 0.9em 0.95em 1.1rem; border-bottom: 1px solid var(--ti-border); position: relative; transition: background var(--ti-duration); } .ti-hp-recent-item:first-child { border-top: 1px solid var(--ti-border); } /* * Left-border indicator: a 3px red stripe that scales in from top to bottom * on hover, giving each row a tactile, intentional feel. */ .ti-hp-recent-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ti-red); transform: scaleY(0); transform-origin: top; transition: transform 0.2s ease; } .ti-hp-recent-item:hover::before { transform: scaleY(1); } .ti-hp-recent-item:hover { background: rgba(192, 57, 43, 0.025); } .ti-hp-recent-date { font-size: 0.73rem; color: var(--ti-muted); white-space: nowrap; flex-shrink: 0; min-width: 5.5em; font-variant-numeric: tabular-nums; } .ti-hp-recent-title { font-size: 0.97rem; font-weight: 600; color: var(--ti-dark); text-decoration: none; line-height: 1.42; transition: color var(--ti-duration); } .ti-hp-recent-title:hover { color: var(--ti-red); text-decoration: none; } /* ── Section 5 footer: "View All Essays" CTA ──────────────────── */ .ti-hp-recent-footer { margin-top: 1.4em; } .ti-hp-view-all { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.45em 1.4em 0.45em 0; font-size: 0.82rem; font-weight: 700; color: var(--ti-red); text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 2px solid var(--ti-red); transition: color var(--ti-duration), gap var(--ti-duration), border-color var(--ti-duration); } .ti-hp-view-all:hover { color: var(--ti-dark); border-color: var(--ti-dark); gap: 0.65em; text-decoration: none; } /* ───────────────────────────────────────────────────── SECTION 6 — ATLAS LAB HIGHLIGHT ───────────────────────────────────────────────────── */ .ti-hp-atlas-inner { background: #fff; border: 1px solid var(--ti-border); border-left: 4px solid var(--ti-teal); padding: 2.4rem 2.8rem 2.2rem; display: flex; flex-direction: column; gap: 0.8em; position: relative; overflow: hidden; } /* * Subtle teal radial wash — mirrors the chronicle glow pattern * but in teal, signalling a different section register (data/spatial). */ .ti-hp-atlas-inner::after { content: ''; position: absolute; top: -30%; right: -6%; width: 320px; height: 320px; background: radial-gradient( circle, rgba(22, 160, 133, 0.07) 0%, transparent 65% ); pointer-events: none; } .ti-hp-atlas-badge { display: inline-block; font-size: 0.61rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; background: var(--ti-teal); color: #fff; padding: 0.18em 0.65em; border-radius: 2px; align-self: flex-start; position: relative; z-index: 1; } .ti-hp-atlas-title { font-size: 1.65rem; /* v3.1: larger — was 1.22rem */ font-weight: 700; color: var(--ti-dark); margin: 0; line-height: 1.24; position: relative; z-index: 1; } .ti-hp-atlas-desc { font-size: 0.92rem; line-height: 1.65; color: var(--ti-slate); margin: 0; max-width: 620px; position: relative; z-index: 1; } .ti-hp-atlas-links { display: flex; align-items: center; gap: 1.5em; flex-wrap: wrap; margin-top: 0.55em; position: relative; z-index: 1; } .ti-hp-atlas-cta { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.86rem; font-weight: 700; color: #fff; background: var(--ti-teal); padding: 0.6em 1.35em; text-decoration: none; border-radius: 2px; letter-spacing: 0.03em; transition: background var(--ti-duration), gap var(--ti-duration); } .ti-hp-atlas-cta:hover { background: var(--ti-teal-dark); color: #fff; gap: 0.6em; text-decoration: none; } .ti-hp-atlas-learn { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.83rem; font-weight: 600; color: var(--ti-muted); text-decoration: none; transition: color var(--ti-duration), gap var(--ti-duration); } .ti-hp-atlas-learn:hover { color: var(--ti-teal); gap: 0.55em; text-decoration: none; } /* ───────────────────────────────────────────────────── TASK F — IMAGE-READY HOOKS Sections are prepared to accept background images from the WordPress media library. To apply an image, set a CSS custom property via inline style in front-page.php, e.g. style="--ti-section-bg: url('...')" or via Customizer integration later. Pattern: the section gets a `.ti-hp-has-image` class and the modifier sets up a dark overlay so text stays readable over any photo. The actual or background-image URL is left unset (none) until the user adds media library assets. ───────────────────────────────────────────────────── */ /* Mission section: subtle background image layer */ .ti-hp-mission.ti-hp-has-image { background-image: var(--ti-section-bg, none); background-size: cover; background-position: center; position: relative; } .ti-hp-mission.ti-hp-has-image::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.88); /* light scrim — keeps text readable */ pointer-events: none; } .ti-hp-mission.ti-hp-has-image .ti-hp-mission-inner { position: relative; z-index: 1; } /* Pathway cards: per-card background image */ .ti-hp-pathway-card.ti-hp-has-image { background-image: var(--ti-section-bg, none); background-size: cover; background-position: center; } /* Add a protective overlay so the text accent colours remain legible */ .ti-hp-pathway-card.ti-hp-has-image::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.82); pointer-events: none; } .ti-hp-pathway-card.ti-hp-has-image > * { position: relative; z-index: 1; } /* Chronicle: optional background image — dark scrim over photo */ .ti-hp-chronicle.ti-hp-has-image .ti-hp-chronicle-inner { background-image: var(--ti-section-bg, none); background-size: cover; background-position: center; } .ti-hp-chronicle.ti-hp-has-image .ti-hp-chronicle-inner::after { content: ''; position: absolute; inset: 0; background: rgba(45, 63, 80, 0.82); /* dark navy scrim over image */ pointer-events: none; z-index: 0; } /* ───────────────────────────────────────────────────── RESPONSIVE BREAKPOINTS ───────────────────────────────────────────────────── */ @media (max-width: 960px) { .ti-hp-pathways-grid { grid-template-columns: repeat(2, 1fr); } /* Task D: collapse 2-col featured back to single column at tablet */ .ti-hp-featured-inner { display: block; border-top: 4px solid var(--ti-red); border-left: none; } .ti-hp-featured-title { font-size: 1.5rem; padding-right: 0; border-right: none; margin-bottom: 1em; } .ti-hp-featured-excerpt { margin-bottom: 1.6em; } /* chronicle: no flex to collapse at tablet */ .ti-hp-chronicle-inner { padding: 2.4rem 2rem 2.2rem; } } @media (max-width: 640px) { .ti-hp-container { padding: 0 1.25rem; } .ti-hp-pathways-grid { grid-template-columns: 1fr; } .ti-hp-mission { padding: 2.2rem 1.5rem 2rem; } .ti-hp-mission-statement { font-size: 1.28rem; } .ti-hp-featured-inner { padding: 1.8rem 1.5rem 1.5rem; } .ti-hp-featured-title { font-size: 1.32rem; } .ti-hp-featured-inner::before { font-size: 8rem; } .ti-hp-chronicle-inner { padding: 2rem 1.5rem 1.8rem; } .ti-hp-atlas-inner { padding: 1.8rem 1.5rem 1.6rem; } .ti-hp-atlas-links { flex-direction: column; align-items: flex-start; gap: 0.85em; } .ti-hp-recent-item { flex-direction: column; gap: 0.2em; padding-left: 1rem; } .ti-hp-featured-meta { flex-wrap: wrap; gap: 0.5rem; } }