/* Global Typography and Core Brand Overrides */ /* Playfair Display / Inter are loaded via tags in each page's , not @import here — @import is render-blocking and would fetch the font twice. */ :root { --color-surface-dim: #ddd9d8; --color-on-surface: #1c1b1b; --color-primary: #000000; --color-on-primary: #ffffff; --color-secondary: #9f4021; --color-warm-sand: #F4F1EA; --color-deep-charcoal: #1A1A1A; --color-muted-terracotta: #C65D3B; --color-background-off-white: #FAF9F6; } body { background-color: var(--color-background-off-white); color: var(--color-deep-charcoal); font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Typography styles based on Newsroom typographic scale */ /* .font-display-lg and .font-headline-lg are mobile-first: the HTML pairs them with "text-headline-lg-mobile" / "md:text-*" utility classes that Tailwind's CDN build cannot generate (they aren't real Tailwind utilities), so the responsive step-up has to live here instead, keyed to Tailwind's default md breakpoint (768px). */ .font-display-lg { font-family: 'Playfair Display', serif; font-size: 2rem; /* 32px, matches DESIGN.md's headline-lg-mobile token */ font-weight: 700; line-height: 1.2; } @media (min-width: 768px) { .font-display-lg { font-size: 4rem; /* 64px */ line-height: 1.1; letter-spacing: -0.02em; } } .font-headline-lg { font-family: 'Playfair Display', serif; font-size: 2rem; /* 32px, matches DESIGN.md's headline-lg-mobile token */ font-weight: 700; line-height: 1.2; } @media (min-width: 768px) { .font-headline-lg { font-size: 3rem; /* 48px */ } } .font-headline-md { font-family: 'Playfair Display', serif; font-size: 2rem; /* 32px */ font-weight: 600; line-height: 1.3; } .font-headline-sm { font-family: 'Playfair Display', serif; font-size: 1.5rem; /* 24px */ font-weight: 600; line-height: 1.3; } .font-body-lg { font-family: 'Inter', sans-serif; font-size: 1.125rem; /* 18px */ font-weight: 400; line-height: 1.6; } .font-body-md { font-family: 'Inter', sans-serif; font-size: 1rem; /* 16px */ font-weight: 400; line-height: 1.6; } .font-label-caps { font-family: 'Inter', sans-serif; font-size: 0.75rem; /* 12px */ font-weight: 700; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; } .font-label-md { font-family: 'Inter', sans-serif; font-size: 0.875rem; /* 14px */ font-weight: 500; line-height: 1.4; } /* Sharp Corners Rule - Strict 0px Border Radius */ * { border-radius: 0px !important; } /* Exception for small interactive UI inputs focus and checks as specified in DESIGN.md */ input[type="checkbox"], input[type="radio"], input:focus, textarea:focus { border-radius: 0.25rem !important; } /* Keylines */ .keyline-b { border-bottom: 1px solid rgba(26, 26, 26, 0.15); } .keyline-t { border-top: 1px solid rgba(26, 26, 26, 0.15); } .keyline-all { border: 1px solid rgba(26, 26, 26, 0.15); } /* Interactive SVG Map of Turkana styling */ .subcounty-path { fill: #F4F1EA; stroke: #1A1A1A; stroke-width: 1.5; transition: fill 0.3s ease, stroke-width 0.3s ease; cursor: pointer; } .subcounty-path:hover { fill: #C65D3B; stroke-width: 2; } .subcounty-path.active { fill: #9F4021; stroke-width: 2.5; } /* Custom transitions and states */ .hover-editorial { position: relative; } .hover-editorial::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -4px; left: 0; background-color: var(--color-muted-terracotta); transform-origin: bottom right; transition: transform 0.25s ease-out; } .hover-editorial:hover::after { transform: scaleX(1); transform-origin: bottom left; } /* Preferences for reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Homepage editorial direction */ .home-page { --home-ink: #191817; --home-paper: #f5efe4; --home-sand: #e8ddcc; --home-orange: #c65d2d; --home-line: rgba(25, 24, 23, 0.2); background-color: var(--home-paper); background-image: linear-gradient(rgba(255,255,255,0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(125,91,54,0.045) 1px, transparent 1px); background-size: 100% 7px, 7px 100%; color: var(--home-ink); font-family: 'DM Sans', sans-serif; } .home-page .home-nav { background-color: rgba(245, 239, 228, 0.92); border-color: var(--home-line); transition: background-color 0.3s ease, box-shadow 0.3s ease; } .home-page .home-nav.is-scrolled { background-color: rgba(245, 239, 228, 0.98); box-shadow: 0 5px 20px rgba(25, 24, 23, 0.06); } .home-page nav > div > div:nth-child(2), .inner-page nav > div > div:nth-child(2) { transform: translateX(1.5rem); } .home-page .home-nav img { height: 2.5rem; } .home-page .home-nav a { font-family: 'DM Sans', sans-serif; } .home-page .hero-reveal { animation: editorial-rise 0.8s both; } .home-page .hero-reveal:nth-child(2) { animation-delay: 0.12s; } .home-page .hero-reveal:nth-child(3) { animation-delay: 0.2s; } .home-page .hero-reveal:nth-child(4) { animation-delay: 0.28s; } .home-page .hero-reveal:nth-child(5) { animation-delay: 0.36s; } .editorial-hero { min-height: min(860px, calc(100vh - 81px)); position: relative; display: grid; grid-template-columns: minmax(330px, 0.86fr) minmax(540px, 1.14fr); gap: clamp(2rem, 6vw, 7rem); max-width: 1440px; margin: 0 auto; padding: clamp(3.5rem, 7vw, 7rem) clamp(1.5rem, 5vw, 5.5rem) 5rem; overflow: hidden; } .hero-copy { align-self: center; position: relative; z-index: 4; padding-bottom: 2rem; } .editorial-kicker, .photo-caption, .hero-coordinate, .hero-scroll-note, .hero-stats span { font-family: 'DM Sans', sans-serif; font-size: 0.66rem; letter-spacing: 0.15em; line-height: 1.4; text-transform: uppercase; } .editorial-kicker { margin: 0 0 2.4rem; font-weight: 700; } .editorial-kicker span { color: var(--home-orange); padding: 0 0.35rem; } .hero-title { color: var(--home-ink); font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(4.1rem, 7vw, 7.7rem); font-weight: 600; letter-spacing: -0.045em; line-height: 0.78; margin: 0; text-transform: uppercase; } .hero-title em { font-weight: 500; text-transform: none; } .hero-rule { background: var(--home-orange); height: 4px; margin: 2.7rem 0 1.8rem; width: 3rem; } .hero-intro { font-size: 1rem; line-height: 1.75; margin: 0; max-width: 27rem; } .hero-link { border-bottom: 1px solid var(--home-ink); color: var(--home-ink); display: inline-flex; gap: 0.8rem; margin-top: 1.7rem; padding-bottom: 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.25s, border-color 0.25s; } .hero-link:hover { border-color: var(--home-orange); color: var(--home-orange); } .hero-link span { color: var(--home-orange); font-size: 1.1rem; line-height: 0.7; } .hero-stats { border-top: 1px solid var(--home-line); display: flex; gap: clamp(1rem, 3vw, 3rem); margin-top: 4.5rem; max-width: 29rem; padding-top: 1.2rem; } .hero-stats div { display: flex; flex-direction: column; min-width: 4.8rem; } .hero-stats strong { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.45rem; font-weight: 600; line-height: 0.9; } .hero-stats span { margin-top: 0.6rem; letter-spacing: 0.1em; } .hero-collage { min-height: 650px; position: relative; } .hero-collage::before { border: 1px solid var(--home-line); content: ''; inset: 5% 7% 4% 5%; position: absolute; } .hero-collage-art { height: 100%; left: -7%; position: absolute; top: 0; width: 115%; z-index: 2; } .hero-collage-art img { display: block; height: 100%; object-fit: contain; object-position: center; width: 100%; } .hero-grid-mark { background-image: linear-gradient(to right, transparent 49%, rgba(198,93,45,0.18) 50%, transparent 51%), linear-gradient(to bottom, transparent 49%, rgba(198,93,45,0.18) 50%, transparent 51%); background-size: 20px 20px; height: 120px; opacity: 0.45; position: absolute; width: 120px; } .hero-grid-mark-top { right: 2rem; top: 2rem; } .hero-sun { background: var(--home-orange); border-radius: 50% !important; height: 13rem; opacity: 0.92; position: absolute; right: 7%; top: 4%; width: 13rem; } .hero-photo { box-shadow: 0 18px 35px rgba(44, 28, 15, 0.12); overflow: hidden; position: absolute; } .hero-photo img { display: block; filter: saturate(0.72) sepia(0.08) contrast(1.03); height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 0.8s ease; width: 100%; } .hero-photo:hover img { transform: scale(1.09); } .hero-photo-main { height: 76%; left: 10%; top: 13%; width: 51%; z-index: 2; } .hero-photo-main img { object-position: 22% center; } .hero-photo-study { border: 8px solid var(--home-paper); height: 31%; right: 5%; top: 13%; width: 42%; z-index: 3; } .hero-photo-study img { filter: grayscale(1) sepia(0.25) contrast(1.1); object-position: center; } .hero-photo-field { border: 8px solid var(--home-paper); bottom: 10%; height: 29%; right: 3%; width: 48%; z-index: 3; } .hero-photo-field img { filter: grayscale(0.62) sepia(0.2) contrast(1.08); } .hero-photo-detail { bottom: 4%; height: 22%; left: 3%; width: 29%; z-index: 4; } .hero-photo-detail img { filter: grayscale(1) sepia(0.35) contrast(1.2); object-position: 70% center; } .photo-caption { background: var(--home-paper); bottom: 0; left: 0; padding: 0.6rem 0.75rem; position: absolute; } .hero-coordinate { bottom: 2%; color: rgba(25,24,23,0.65); position: absolute; right: 0; transform: rotate(-90deg); transform-origin: right top; } .hero-cross { color: var(--home-orange); font-family: Georgia, serif; font-size: 2rem; position: absolute; } .hero-cross-one { left: 1%; top: 29%; }.hero-cross-two { bottom: 30%; right: 0; } .hero-scroll-note { bottom: 1.7rem; color: rgba(25,24,23,0.68); left: clamp(1.5rem, 5vw, 5.5rem); position: absolute; } .hero-scroll-note span { color: var(--home-orange); margin-right: 0.8rem; } .home-page main > section:not(.editorial-hero) { position: relative; } .home-page .font-headline-lg, .home-page .font-headline-md, .home-page .font-headline-sm { font-family: 'Cormorant Garamond', Georgia, serif; letter-spacing: -0.025em; } .home-page .font-label-caps { font-family: 'DM Sans', sans-serif; } .home-page .bg-background-off-white { background-color: rgba(245, 239, 228, 0.7); } .home-page .bg-warm-sand { background-color: rgba(232, 221, 204, 0.75); } .home-page footer { background-color: rgba(245, 239, 228, 0.8); } .mobile-site-sections { display: none; } /* Internal-page editorial direction */ .inner-page { --inner-paper: #f5efe4; --inner-ink: #191817; --inner-line: rgba(25, 24, 23, 0.18); --inner-orange: #c65d2d; background-color: var(--inner-paper); background-image: linear-gradient(rgba(255,255,255,0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(125,91,54,0.04) 1px, transparent 1px); background-size: 100% 7px, 7px 100%; color: var(--inner-ink); overflow-x: hidden; } .inner-page nav { background-color: rgba(245, 239, 228, 0.92); border-color: var(--inner-line); } .inner-page nav img { height: 2.5rem; } .inner-page main { background: transparent; } .inner-page main > section:first-child { position: relative; } .inner-page main > section:first-child::before { content: none; } .inner-page h1, .inner-page h2, .inner-page h3 { font-family: 'Playfair Display', Georgia, serif; letter-spacing: -0.035em; } .inner-page h1 { font-size: clamp(3.2rem, 7vw, 6.4rem); line-height: 0.92; overflow-wrap: break-word; } .inner-page .font-label-caps { font-family: 'Inter', sans-serif; } .inner-page .font-label-caps.text-muted-terracotta { color: var(--inner-orange); } .inner-page .border-deep-charcoal\/10, .inner-page .border-deep-charcoal\/15 { border-color: var(--inner-line); } .inner-page .bg-warm-sand { background-color: rgba(232, 221, 204, 0.68); } .inner-page .bg-background-off-white { background-color: rgba(245, 239, 228, 0.7); } .inner-page main > section:first-child img { filter: saturate(0.62) sepia(0.12) contrast(1.08); transition: filter 0.5s ease, transform 0.7s ease; } .inner-page main > section:first-child img:hover { filter: saturate(0.85) sepia(0.08) contrast(1.05); transform: scale(1.015); } .inner-page main > section:first-child > div:last-child { border-color: var(--inner-line); } .inner-page main > section:first-child > div:last-child::after { color: rgba(25,24,23,0.58); content: 'TURKANA COUNTY · KENYA'; display: block; font-family: 'Inter', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.15em; padding: 0.9rem 1rem; } .inner-page main > section:not(:first-child) { border-color: var(--inner-line); } .inner-page main > section:not(:first-child) .bg-warm-sand { border-color: var(--inner-line); box-shadow: 0 12px 24px rgba(44, 28, 15, 0.035); } .inner-page main > section:not(:first-child) img { filter: saturate(0.72) sepia(0.08) contrast(1.05); } .inner-page footer { background-color: rgba(245, 239, 228, 0.8); border-color: var(--inner-line); } .stories-page main { max-width: none; padding-left: 0; padding-right: 0; padding-top: 0; } .stories-page main > section:first-child { max-width: 1440px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 4rem) clamp(1.5rem, 5vw, 5.5rem) 0; } .stories-page .stories-hero-art { display: block; width: 100%; } .stories-page .stories-hero-art img { aspect-ratio: 16 / 9; background: var(--inner-paper); display: block; height: auto; object-fit: cover; object-position: center; width: 100%; } .stories-page .stories-featured { border-top: 1px solid var(--inner-line); margin-left: 8%; max-width: 680px; padding-top: 1.5rem; } .stories-page main > hr { margin-left: auto; margin-right: auto; max-width: 1280px; width: calc(100% - 3rem); } .stories-page main > section:not(:first-child) { max-width: 1280px; width: calc(100% - 3rem); } .about-hero { width: 100%; } .about-hero-art { display: block; width: 100%; } .about-hero-art img { aspect-ratio: 16 / 9; background: var(--inner-paper); display: block; height: auto; object-fit: cover; object-position: center; width: 100%; } .about-editorial-hero { color: var(--inner-ink); } .about-editorial-hero .hero-copy { container-type: inline-size; } .about-editorial-hero .hero-title { color: var(--inner-ink); font-size: clamp(2.2rem, 9cqw, 6.4rem); max-width: 100%; overflow-wrap: normal; } .about-editorial-hero .hero-title em { text-transform: uppercase; } .about-editorial-hero .hero-collage-art img { background: transparent; filter: none !important; } .about-principles { border-left: 1px solid var(--inner-line); display: flex; flex-direction: column; gap: 0.7rem; margin-top: 3.5rem; max-width: 17rem; padding-left: 1.2rem; } .about-principles span { color: rgba(25,24,23,0.7); font-family: 'DM Sans', sans-serif; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.35; text-transform: uppercase; } @media (min-width: 768px) { .inner-page main > section:first-child h1 { max-width: 12ch; } .inner-page main > section:first-child > p { max-width: 42rem; } .inner-page main > section:first-child > div:last-child { margin-left: 8%; width: 92%; } } @media (max-width: 767px) { .about-hero { padding-left: 1rem; padding-right: 1rem; } .about-hero-art { aspect-ratio: 4 / 5; overflow: hidden; } .about-hero-art img { height: 100%; max-width: none; object-fit: cover; object-position: left center; width: auto; } .stories-page main > section:first-child { padding: 1rem 1rem 0; } .stories-page .stories-hero-art img { aspect-ratio: 16 / 9; object-position: center; } .stories-page .stories-featured { margin-left: 0; max-width: none; } .stories-page main > hr, .stories-page main > section:not(:first-child) { width: calc(100% - 2rem); } .inner-page h1 { font-size: clamp(2.8rem, 14vw, 5rem); } .home-page .mobile-site-sections { display: block; } .mobile-site-sections-status { color: rgba(25,24,23,0.58); font-family: 'DM Sans', sans-serif; font-size: 0.68rem; letter-spacing: 0.14em; padding: 2rem 1.5rem; text-transform: uppercase; } .mobile-imported-page { border-top: 1px solid var(--home-line); padding: 4.5rem 1.5rem 1rem; position: relative; } .mobile-imported-page::before { background: var(--home-orange); content: ''; height: 4px; left: 1.5rem; position: absolute; top: 2.6rem; width: 2.5rem; } .mobile-section-heading { align-items: baseline; display: flex; gap: 0.9rem; margin-bottom: 2.5rem; } .mobile-section-heading span { color: var(--home-orange); font-family: 'DM Sans', sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; } .mobile-section-heading h2 { color: var(--home-ink); font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2.4rem, 11vw, 4rem); font-weight: 600; letter-spacing: -0.03em; line-height: 0.9; margin: 0; } .mobile-imported-page main { padding-left: 0; padding-right: 0; padding-top: 0; } .mobile-imported-page main > section:first-child { margin-top: 0; } .mobile-imported-page main > section { max-width: none; } .mobile-imported-page nav, .mobile-imported-page footer { display: none; } } @media (min-width: 1024px) and (max-width: 1199px) { .home-page nav > div > div:nth-child(2), .inner-page nav > div > div:nth-child(2) { transform: none; } .home-page nav > div > div:nth-child(2) > * + *, .inner-page nav > div > div:nth-child(2) > * + * { margin-left: 1rem !important; } .home-page nav > div > div:nth-child(3) > * + *, .inner-page nav > div > div:nth-child(3) > * + * { margin-left: 0.75rem !important; } .home-page nav > div > div:nth-child(3) > a:first-child, .inner-page nav > div > div:nth-child(3) > a:first-child { margin-left: 1.25rem !important; } .home-page nav > div > div:nth-child(3) a, .inner-page nav > div > div:nth-child(3) a { font-size: 0.64rem; } .home-page nav > div > div:nth-child(3) a:last-child, .inner-page nav > div > div:nth-child(3) a:last-child { padding-left: 1.15rem; padding-right: 1.15rem; } } @keyframes editorial-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 900px) { .editorial-hero { grid-template-columns: 1fr; min-height: auto; padding-bottom: 6rem; } .hero-copy { padding-top: 1rem; } .hero-collage { min-height: 610px; margin-top: -1rem; } .hero-collage-art { left: -5%; width: 110%; } .hero-title { font-size: clamp(4rem, 13vw, 6.5rem); } } @media (max-width: 560px) { .editorial-hero { padding: 3rem 1.5rem 5rem; } .editorial-kicker { line-height: 1.7; margin-bottom: 2rem; max-width: 100%; } .hero-title { font-size: clamp(2.7rem, 13vw, 5.5rem); letter-spacing: -0.06em; } .hero-intro { font-size: 0.92rem; } .hero-stats { gap: 0.7rem; margin-top: 3.5rem; } .hero-stats strong { font-size: 2rem; } .hero-stats span { font-size: 0.57rem; letter-spacing: 0.06em; } .hero-collage { min-height: 470px; margin: 0 -0.7rem; } .hero-collage::before { inset: 5% 4% 4%; } .hero-collage-art { height: 108%; left: -4%; top: -4%; width: 108%; } .hero-coordinate { display: none; } .hero-scroll-note { bottom: 1.5rem; left: 1.5rem; } .about-principles { margin-top: 3rem; } .about-editorial-hero .hero-title { font-size: clamp(2.2rem, 11cqw, 5.5rem); max-width: 100%; } }