/* ── Design tokens ──────────────────────────────────────────────────────── */ #tenki-deepdive { --t-blue: #005A9C; --t-blue-light: #E8F0F7; --t-blue-stroke: #B3D4F0; --t-green: #008C45; --t-green-light: #E8F5E9; --t-green-stroke: #A5D6A7; --t-black: #1A1A1A; --t-black-light: #F4F4F4; --t-black-stroke: #CCCCCC; --t-white: #2A2A2A; /* dark text for white-themed page */ --t-white-cream: #FAF6EE; --t-white-stroke: #C0C5CC; --t-text: #1f2937; --t-muted: #6b7280; --t-bg: #ffffff; --t-surface: #F8F9FA; --t-border: #E5E7EB; --t-shadow: 0 4px 16px rgba(0,0,0,.06); --t-shadow-strong: 0 10px 40px rgba(0,0,0,.08); --t-radius: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--t-text); line-height: 1.55; box-sizing: border-box; } #tenki-deepdive *, #tenki-deepdive *::before, #tenki-deepdive *::after { box-sizing: inherit; } /* ── Outer layout ───────────────────────────────────────────────────────── */ .dd-page { max-width: 1200px; margin: 0 auto; padding: 40px 24px 60px; background: var(--t-bg); } .dd-page.theme-white { background: var(--t-white-cream); } /* ── Page header (title + subtitle + description) ──────────────────────── */ .dd-page-header { text-align: center; margin-bottom: 40px; } .dd-page-header h1 { font-size: 2.4rem; margin: 0 0 12px; font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: 1px; color: var(--t-black); } .dd-page-header .dd-page-subtitle { display: block; font-size: 1.1rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; } .theme-blue .dd-page-header .dd-page-subtitle { color: var(--t-blue); } .theme-green .dd-page-header .dd-page-subtitle { color: var(--t-green); } .theme-black .dd-page-header .dd-page-subtitle { color: var(--t-black); } .theme-white .dd-page-header .dd-page-subtitle { color: var(--t-white); } .dd-page-header p { font-size: 1.1rem; color: var(--t-muted); max-width: 720px; margin: 12px auto 0; line-height: 1.55; } .dd-page-header p.quote { font-style: italic; } /* ── Hero card ─────────────────────────────────────────────────────────── */ .dd-card { background: #fff; border-radius: var(--t-radius); padding: 32px; border-top: 5px solid var(--t-black); box-shadow: var(--t-shadow); margin-bottom: 32px; } .theme-blue > .dd-card.dd-hero { border-top-color: var(--t-blue); } .theme-green > .dd-card.dd-hero { border-top-color: var(--t-green); } .theme-black > .dd-card.dd-hero { border-top-color: var(--t-black); } .theme-white > .dd-card.dd-hero { border-top: 5px dashed var(--t-white-stroke); } .dd-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; gap: 16px; } .dd-icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #fff; flex-shrink: 0; overflow: hidden; } .dd-icon.square { border-radius: 10px; } .dd-icon img { width: 100%; height: 100%; object-fit: cover; } .theme-blue .dd-icon { background: var(--t-blue); } .theme-green .dd-icon { background: var(--t-green); } .theme-black .dd-icon { background: var(--t-black); } .theme-white .dd-icon { background: var(--t-white); } .dd-badge { font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 16px; text-transform: uppercase; letter-spacing: .5px; border: 1px solid transparent; white-space: nowrap; } .theme-blue .dd-badge { background: var(--t-blue-light); color: var(--t-blue); border-color: var(--t-blue-stroke); } .theme-green .dd-badge { background: var(--t-green-light); color: var(--t-green); border-color: var(--t-green-stroke); } .theme-black .dd-badge { background: var(--t-black-light); color: var(--t-black); border-color: var(--t-black-stroke); } .theme-white .dd-badge { background: var(--t-white-cream); color: var(--t-white); border-color: var(--t-white-stroke); } .dd-title { font-size: 1.6rem; font-weight: 700; line-height: 1.3; margin: 0 0 18px; color: var(--t-black); } .dd-section-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; margin: 20px 0 8px; } .theme-blue .dd-section-title { color: var(--t-blue); } .theme-green .dd-section-title { color: var(--t-green); } .theme-black .dd-section-title { color: var(--t-black); } .theme-white .dd-section-title { color: var(--t-white); } .dd-text { color: var(--t-text); line-height: 1.65; margin: 0 0 12px; font-size: 1rem; } .dd-text + .dd-text { margin-top: 8px; } /* ── Hero metrics ──────────────────────────────────────────────────────── */ .dd-metrics { display: grid; gap: 16px; margin-top: 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .dd-metric { padding: 18px 16px; border-radius: 10px; text-align: center; background: var(--t-surface); border: 1px solid var(--t-border); } .theme-blue .dd-metric { background: var(--t-blue-light); border-color: var(--t-blue-stroke); } .theme-green .dd-metric { background: var(--t-green-light); border-color: var(--t-green-stroke); } .theme-black .dd-metric { background: var(--t-black-light); border-color: var(--t-black-stroke); } .theme-white .dd-metric { background: #fff; border-color: var(--t-white-stroke); } .dd-metric-prefix { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--t-muted); margin-bottom: 4px; } .dd-metric-big { font-size: 2.2rem; font-weight: 800; line-height: 1.1; color: var(--t-black); } .dd-metric-label { font-size: 13px; color: var(--t-muted); margin-top: 4px; line-height: 1.35; } /* ── Branch connector between hero and sub-cards ───────────────────────── */ .dd-branch { text-align: center; margin: 24px 0; color: var(--t-muted); font-size: 24px; } /* ── Sub-cards grid (adaptive columns based on content) ────────────────── */ .dd-cards-grid { display: grid; gap: 24px; margin-bottom: 40px; } .dd-card.dd-sub { padding: 28px; border-top: 4px solid var(--t-black); background: #fff; /* Springy hover bounce matching the homepage pillar cards. Cubic-bezier values are the same overshoot curve the pillars use, so the deep-dive cards feel identical. */ transition: transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow .4s ease; } .dd-card.dd-sub:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(0,0,0,.10); } /* Inner icon scales on card hover (not just on direct icon hover) so the bounce is felt even when the icon isn't separately linkable. */ .dd-card.dd-sub:hover .dd-icon { transform: scale(1.08); } /* When a Card Link URL is set we add `.has-link` — cursor + slightly stronger hover so users know they CAN click into the card. */ .dd-card.dd-sub.has-link { cursor: pointer; } .dd-card.dd-sub.has-link:hover { box-shadow: 0 14px 36px rgba(0,0,0,.10); } /* Make wrapped media/icon/badge anchors visually transparent — they should look identical to their non-link version, just be clickable. */ .dd-card a.dd-link-wrap { display: inline-block; text-decoration: none; color: inherit; cursor: pointer; } .dd-card a.dd-link-wrap img { transition: transform .25s ease, filter .25s ease; } .dd-card a.dd-link-wrap:hover img { transform: scale(1.02); filter: brightness(1.05); } .dd-card a.dd-link-wrap.dd-icon-link { display: flex; align-items: center; justify-content: center; } .dd-card a.dd-link-wrap.dd-icon-link:hover .dd-icon { transform: scale(1.08); } .dd-card .dd-icon { transition: transform .35s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .theme-blue > .dd-cards-grid .dd-card.dd-sub { border-top-color: var(--t-blue); } .theme-green > .dd-cards-grid .dd-card.dd-sub { border-top-color: var(--t-green); } .theme-black > .dd-cards-grid .dd-card.dd-sub { border-top-color: var(--t-black); } .theme-white > .dd-cards-grid .dd-card.dd-sub { border-top: 4px dashed var(--t-white-stroke); background: #fff; } .dd-card.dd-sub .dd-icon { width: 56px; height: 56px; font-size: 24px; } .dd-card.dd-sub .dd-title { font-size: 1.25rem; } .dd-card.dd-sub.dd-card-full { grid-column: 1 / -1; } /* Stories-split: image and intro side-by-side, stories grid below full-width */ .dd-card.dd-card-stories .dd-stories-layout { display: grid; gap: 24px; margin-top: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-areas: "media intro" "stories stories"; } .dd-stories-media { grid-area: media; } .dd-stories-text { grid-area: intro; } .dd-stories-grid { grid-area: stories; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; } .dd-story { padding: 16px; border-radius: 8px; background: var(--t-surface); border: 1px solid var(--t-border); } /* ── Bullet lists ──────────────────────────────────────────────────────── */ .dd-bullets { margin: 8px 0 12px; padding-left: 22px; } .dd-bullets li { margin: 6px 0; line-height: 1.55; } /* ── Images inside cards ──────────────────────────────────────────────── */ .dd-image { width: 100%; height: auto; border-radius: 8px; margin: 16px 0; display: block; background: var(--t-surface); } /* ── Schedule rows (schedule-alert template) ──────────────────────────── */ .dd-schedule-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; margin: 6px 0; border-radius: 6px; background: var(--t-surface); border-left: 3px solid; font-size: 14px; } .theme-blue .dd-schedule-row { border-left-color: var(--t-blue); } .theme-green .dd-schedule-row { border-left-color: var(--t-green); } .theme-black .dd-schedule-row { border-left-color: var(--t-black); } .theme-white .dd-schedule-row { border-left-color: var(--t-white-stroke); } .dd-schedule-day { font-weight: 700; white-space: nowrap; } /* ── Field-alert callout (warning / important note) ────────────────────── */ .dd-field-alert { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; border-left: 4px solid #D97706; padding: 16px 20px; border-radius: 0 6px 6px 0; margin-top: 20px; font-size: 14px; line-height: 1.55; } /* ── Timeline items inside a sub-card (bullets-timeline template) ──────── */ .dd-timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .dd-timeline-item { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 6px; background: var(--t-surface); border: 1px solid var(--t-border); text-decoration: none; color: inherit; transition: transform .25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow .25s ease, border-color .25s ease; } /* Linked variant — cursor + hover lift to advertise clickability */ .dd-timeline-item-link { cursor: pointer; } .dd-timeline-item-link:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); border-color: var(--t-blue); } .dd-timeline-item-link:hover .dd-timeline-title { color: var(--t-blue); } .dd-timeline-item-link:hover img { transform: scale(1.04); } .dd-timeline-item img { width: 52px; height: 52px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #ddd; transition: transform .25s ease; } .dd-timeline-date { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--t-muted); } .dd-timeline-title { font-size: 14px; font-weight: 600; line-height: 1.3; margin-top: 2px; word-break: normal; overflow-wrap: break-word; hyphens: auto; } /* ── Pricing tiers (pricing-subsections template) ──────────────────────── */ .dd-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0 24px; } .dd-pricing-tier { padding: 16px; border-radius: 8px; text-align: center; background: #fff; border: 2px solid; } .theme-blue .dd-pricing-tier { border-color: var(--t-blue); } .theme-green .dd-pricing-tier { border-color: var(--t-green); } .theme-black .dd-pricing-tier { border-color: var(--t-black); } .theme-white .dd-pricing-tier { border-color: var(--t-white-stroke); } .dd-pricing-amt { font-size: 1.4rem; font-weight: 800; color: var(--t-black); } .dd-pricing-per { font-size: 12px; color: var(--t-muted); margin-top: 2px; } /* ── Sub-sections within pricing-subsections template ──────────────────── */ .dd-subsection { padding: 16px; border-radius: 8px; margin-top: 12px; background: var(--t-surface); border: 1px solid var(--t-border); } .dd-subsection-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; } .dd-subsection-tag { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 12px; text-transform: uppercase; background: #fff; border: 1px solid var(--t-border); } /* ── Bottom notice (rendered above the CTA banner) ─────────────────────── */ .dd-notice { padding: 18px 22px; border-radius: 8px; margin: 24px 0; background: #FEF9C3; border-left: 4px solid #EAB308; font-size: 15px; line-height: 1.6; color: #713F12; } /* ── CTA banner ────────────────────────────────────────────────────────── */ .dd-cta { padding: 40px 32px; border-radius: var(--t-radius); text-align: center; color: #fff; margin: 32px 0 0; box-shadow: var(--t-shadow-strong); } .dd-cta.cta-blue { background: linear-gradient(135deg, var(--t-blue), #003a66); } .dd-cta.cta-green { background: linear-gradient(135deg, var(--t-green), #00592c); } .dd-cta.cta-black { background: linear-gradient(135deg, var(--t-black), #000); } .dd-cta.cta-white { background: linear-gradient(135deg, #2A2A2A, var(--t-black)); } .dd-cta h4 { font-size: 1.5rem; margin: 0 0 10px; font-weight: 800; } .dd-cta p { font-size: 1rem; margin: 0 0 20px; opacity: .92; max-width: 640px; margin-left: auto; margin-right: auto; } .dd-cta-btn { display: inline-block; padding: 12px 28px; background: #fff; color: var(--t-black); text-decoration: none; font-weight: 700; border-radius: 8px; font-size: 1rem; transition: transform .15s, box-shadow .15s; } .dd-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.18); } /* ── Side navigation panels (themed to destination pillar) ─────────────── */ .dd-sidenav { position: fixed; top: 50%; transform: translateY(-50%); width: 72px; padding: 18px 10px; z-index: 40; background: var(--nav-bg, var(--t-surface)); border: 1px solid var(--t-border); box-shadow: var(--t-shadow); color: var(--nav-fg, var(--t-text)); text-decoration: none; transition: all .2s; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; } .dd-sidenav.prev { left: 12px; border-radius: 0 var(--t-radius) var(--t-radius) 0; border-left: 0; } .dd-sidenav.next { right: 12px; border-radius: var(--t-radius) 0 0 var(--t-radius); border-right: 0; } .dd-sidenav:hover { transform: translateY(-50%) scale(1.04); box-shadow: var(--t-shadow-strong); } .dd-sidenav-arrow { font-size: 22px; line-height: 1; opacity: .8; } .dd-sidenav-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; opacity: .7; text-align: center; line-height: 1.2; } .dd-sidenav-title { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2; max-width: 60px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Each sidenav is themed to its DESTINATION pillar's color */ .dd-sidenav.to-blue { --nav-bg: var(--t-blue-light); --nav-fg: var(--t-blue); border-color: var(--t-blue-stroke); } .dd-sidenav.to-green { --nav-bg: var(--t-green-light); --nav-fg: var(--t-green); border-color: var(--t-green-stroke); } .dd-sidenav.to-black { --nav-bg: var(--t-black-light); --nav-fg: var(--t-black); border-color: var(--t-black-stroke); } .dd-sidenav.to-white { --nav-bg: var(--t-white-cream); --nav-fg: var(--t-white); border-color: var(--t-white-stroke); } /* ── Active Projects section (NEW — rolls up timeline events under named ─ */ /* Activity records owned by the deep-dive sheet's Activities tab) ──── */ .dd-projects { margin: 36px 0 0; padding-top: 28px; border-top: 1px solid var(--t-border); } .dd-projects-header { display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px; flex-wrap: wrap; } .dd-projects-header h3 { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--t-black); line-height: 1.2; } .dd-projects-header p { margin: 0; font-size: .95rem; color: var(--t-muted); line-height: 1.4; } .dd-projects-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } .dd-project { padding: 26px 26px 22px; background: #fff; border-radius: var(--t-radius); border: 1px solid var(--t-border); border-top: 4px solid var(--t-black); box-shadow: 0 4px 14px rgba(0,0,0,.04); display: flex; flex-direction: column; transition: transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow .4s ease; } .dd-project:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(0,0,0,.10); } .theme-blue > .dd-projects .dd-project { border-top-color: var(--t-blue); } .theme-green > .dd-projects .dd-project { border-top-color: var(--t-green); } .theme-black > .dd-projects .dd-project { border-top-color: var(--t-black); } .theme-white > .dd-projects .dd-project { border-top: 4px dashed var(--t-white-stroke); } .dd-project-head { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; margin-bottom: 8px; } .dd-project-head h4 { margin: 0; font-size: 1.3rem; font-weight: 800; line-height: 1.3; color: var(--t-black); flex: 1; } .dd-project-status { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; } .dd-project-status-active { background: #e0f4e6; color: #156a30; border-color: #b2dec1; } .dd-project-status-planning { background: #e7ecff; color: #2a3b8a; border-color: #bfcdfa; } .dd-project-status-completed{ background: #f3f4f6; color: #4b5563; border-color: #d1d5db; } .dd-project-status-paused { background: #fff4d6; color: #8a5a00; border-color: #f4d27a; } .dd-project-tagline { font-size: 14px; line-height: 1.5; color: var(--t-muted); font-style: italic; margin: 4px 0 14px; } .dd-project-desc { font-size: 14px; line-height: 1.6; color: var(--t-text); margin: 0 0 16px; } .dd-project-desc a { color: var(--t-blue); } .dd-project-hero { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; margin: 0 0 14px; display: block; background: var(--t-surface); } .dd-project-rollup { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; padding: 12px 14px; border-radius: 8px; background: var(--t-surface); border: 1px solid var(--t-border); } .dd-project-rollup-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--t-text); } .dd-project-rollup-item strong { color: var(--t-black); font-weight: 700; } .dd-project-rollup-emoji { font-size: 14px; opacity: .85; } .dd-project-rollup-empty { font-size: 13px; color: var(--t-muted); font-style: italic; padding: 4px 0; } .dd-project-strip { display: flex; gap: 4px; flex-wrap: wrap; margin: -4px 0 16px; } .dd-project-strip-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--t-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; text-decoration: none; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.08); transition: transform .2s ease; } .dd-project-strip-avatar:hover { transform: translateY(-1px) scale(1.08); } .dd-project-strip-more { font-size: 11px; color: var(--t-muted); align-self: center; padding-left: 4px; } .dd-project-strip-partner { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: #fff; border: 1px solid var(--t-border); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--t-text); text-decoration: none; transition: border-color .2s, transform .2s; } .dd-project-strip-partner:hover { border-color: var(--t-blue); color: var(--t-blue); transform: translateY(-1px); } .dd-project-goal { padding: 14px 16px; border-radius: 8px; margin: 0 0 16px; background: #FFFBEB; border-left: 3px solid #F59E0B; font-size: 14px; line-height: 1.55; color: #713F12; } .dd-project-goal strong { color: #92400E; } .dd-project-goal-label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #92400E; margin-bottom: 4px; } .dd-project-funding { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; padding: 12px 14px; border-radius: 8px; background: linear-gradient(135deg, rgba(73,184,92,.10), rgba(73,184,92,.04)); border: 1px solid rgba(73,184,92,.25); } .dd-project-funding-amt { font-size: 1.3rem; font-weight: 800; color: var(--t-green); line-height: 1; } .dd-project-funding-label { font-size: 12px; color: var(--t-muted); } /* ── Impact metrics strip (big numbers — People Served, etc.) ────────── */ .dd-project-impact { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 0 0 16px; padding: 14px 12px; border-radius: 10px; background: linear-gradient(135deg, rgba(59,169,232,.08), rgba(73,184,92,.06)); border: 1px solid rgba(59,169,232,.18); } .dd-project-impact-cell { text-align: center; padding: 4px 2px; } .dd-project-impact-big { font-size: 1.5rem; font-weight: 800; color: var(--t-black); line-height: 1.1; } .dd-project-impact-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--t-muted); margin-top: 4px; line-height: 1.25; } .dd-project-impact-emoji { font-size: 18px; opacity: .8; margin-bottom: 2px; line-height: 1; } /* ── Unfunded scope section — the urgency / ask block ─────────────────── */ .dd-project-unfunded { padding: 16px 18px; border-radius: 10px; margin: 0 0 16px; background: linear-gradient(135deg, #FEF3C7, #FEF9C3); border: 1px solid #FCD34D; border-left: 4px solid #D97706; } .dd-project-unfunded-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .dd-project-unfunded-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #92400E; margin: 0; } .dd-project-unfunded-amount { font-size: 1.4rem; font-weight: 800; color: #92400E; line-height: 1; } .dd-project-unfunded-progress { height: 10px; border-radius: 5px; background: rgba(146,64,14,.15); overflow: hidden; margin: 8px 0 12px; } .dd-project-unfunded-bar { height: 100%; background: linear-gradient(90deg, #49B85C, #3BA9E8); transition: width .6s ease; } .dd-project-unfunded-progress-label { display: flex; justify-content: space-between; font-size: 11px; color: #713F12; font-weight: 600; margin: -6px 0 10px; } .dd-project-unfunded-bullets { margin: 8px 0 12px; padding-left: 20px; font-size: 13px; line-height: 1.55; color: #713F12; } .dd-project-unfunded-bullets li { margin: 4px 0; } .dd-project-unfunded-bullets small { color: #92400E; font-style: italic; font-weight: 500; } .dd-project-unfunded-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 8px; background: #D97706; color: #fff; text-decoration: none; font-weight: 800; font-size: 14px; transition: transform .15s, box-shadow .15s; } .dd-project-unfunded-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(217,119,6,.36); background: #B45309; } /* ── Givebutter inline embed ──────────────────────────────────────────── */ .dd-project-givebutter { margin: 0 0 16px; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--t-border); background: #fff; } .dd-project-givebutter iframe { display: block; width: 100%; min-height: 480px; border: 0; } .dd-project-cta.is-givebutter { background: #EE5859 !important; color: #fff !important; } .dd-project-cta.is-givebutter:hover { background: #D14A4B !important; } .dd-project-cta-heart { font-size: 14px; line-height: 1; } .dd-project-actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .dd-project-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 8px; background: var(--t-black); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; transition: transform .15s, box-shadow .15s; } .theme-blue > .dd-projects .dd-project-cta { background: var(--t-blue); } .theme-green > .dd-projects .dd-project-cta { background: var(--t-green); } .theme-black > .dd-projects .dd-project-cta { background: var(--t-black); } .theme-white > .dd-projects .dd-project-cta { background: var(--t-black); } .dd-project-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.18); } .dd-project-view { display: inline-flex; align-items: center; gap: 4px; padding: 9px 14px; border-radius: 8px; background: transparent; color: var(--t-muted); text-decoration: none; font-weight: 600; font-size: 13px; border: 1px solid var(--t-border); transition: border-color .2s, color .2s; } .dd-project-view:hover { border-color: var(--t-blue); color: var(--t-blue); } /* ── Closing CTA — pillar-themed slim donate block AFTER the timeline. ── */ /* Catches visitors who scrolled through the whole story and gives ── */ /* them one clear next action: donate now, explore another pillar, ── */ /* or reach out. Pillar-themed background to feel native to the ── */ /* page, not a generic widget bolted on. ── */ .dd-closing { margin: 40px 0 0; padding: 32px 28px; border-radius: var(--t-radius); background: var(--t-surface); border: 1px solid var(--t-border); position: relative; overflow: hidden; } .theme-blue .dd-closing { background: linear-gradient(135deg, var(--t-blue-light), #fff); border-color: var(--t-blue-stroke); } .theme-green .dd-closing { background: linear-gradient(135deg, var(--t-green-light), #fff); border-color: var(--t-green-stroke); } .theme-black .dd-closing { background: linear-gradient(135deg, var(--t-black-light), #fff); border-color: var(--t-black-stroke); } .theme-white .dd-closing { background: linear-gradient(135deg, var(--t-white-cream), #fff); border-color: var(--t-white-stroke); } .dd-closing-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); margin: 0 0 8px; } .dd-closing h3 { font-size: 1.5rem; font-weight: 800; line-height: 1.25; color: var(--t-black); margin: 0 0 8px; } .dd-closing p { font-size: 14px; line-height: 1.6; color: var(--t-text); margin: 0 0 18px; max-width: 640px; } .dd-closing-trust { font-size: 12px; color: var(--t-muted); margin: 0 0 18px; letter-spacing: .02em; } .dd-closing-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 0 0 18px; } .dd-closing-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 999px; background: #008C45; color: #fff; text-decoration: none; font-weight: 800; font-size: 15px; letter-spacing: .02em; transition: transform .15s, box-shadow .15s, background-color .15s; border: 2px solid #008C45; } .dd-closing-cta:hover { transform: translateY(-2px); background: transparent; color: #008C45; box-shadow: 0 6px 18px rgba(0, 140, 69, .22); } .dd-closing-cta-heart { font-size: 16px; line-height: 1; } .dd-closing-secondary { display: inline-flex; align-items: center; padding: 12px 18px; border-radius: 999px; background: transparent; color: var(--t-text); text-decoration: none; font-weight: 600; font-size: 13px; border: 1px solid var(--t-border); transition: border-color .15s, color .15s; } .dd-closing-secondary:hover { border-color: var(--t-blue); color: var(--t-blue); } .dd-closing-cross { padding-top: 18px; border-top: 1px dashed var(--t-border); } .dd-closing-cross-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--t-muted); margin: 0 0 10px; } .dd-closing-chips { display: flex; gap: 10px; flex-wrap: wrap; } .dd-closing-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--t-border); text-decoration: none; color: var(--t-text); font-weight: 600; font-size: 13px; transition: transform .15s, border-color .15s, color .15s; } .dd-closing-chip:hover { transform: translateY(-1px); } .dd-closing-chip.to-blue:hover { border-color: var(--t-blue); color: var(--t-blue); } .dd-closing-chip.to-green:hover { border-color: var(--t-green); color: var(--t-green); } .dd-closing-chip.to-black:hover { border-color: var(--t-black); color: var(--t-black); } .dd-closing-chip.to-white:hover { border-color: var(--t-white-stroke); } /* ── Filtered timeline iframe at bottom ────────────────────────────────── */ /* Compact gap above + tight header/iframe spacing — earlier 60px+40px padding left a huge empty band above the timeline. Subtitle removed (rendered by renderTimelineEmbed) so the header sits flush. */ .dd-timeline-embed { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--t-border); } .dd-timeline-embed h3 { font-size: 1.5rem; margin: 0 0 14px; color: var(--t-black); text-align: center; } /* Inline timeline event cards — replaces the iframe. Server returns events filtered by Pillar; org-wide events get a grey 'Tenki' badge. */ .dd-tl-list { display: grid; gap: 14px; } .dd-tl-event { display: grid; grid-template-columns: 92px 72px 1fr; gap: 14px; align-items: start; background: #fff; border-radius: var(--t-radius); border: 1px solid var(--t-border); padding: 14px 18px; transition: transform .25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow .25s ease; } .dd-tl-event:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.06); } .dd-tl-event.is-org-event { background: #fafafa; border-left: 3px solid #888; } .theme-blue > .dd-timeline-embed .dd-tl-event:not(.is-org-event) { border-left: 3px solid var(--t-blue); } .theme-green > .dd-timeline-embed .dd-tl-event:not(.is-org-event) { border-left: 3px solid var(--t-green); } .theme-black > .dd-timeline-embed .dd-tl-event:not(.is-org-event) { border-left: 3px solid var(--t-black); } .theme-white > .dd-timeline-embed .dd-tl-event:not(.is-org-event) { border-left: 3px dashed var(--t-white-stroke); } .dd-tl-date { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--t-muted); letter-spacing: .04em; padding-top: 2px; } .dd-tl-img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; background: #f3f4f6; } .dd-tl-event:not(:has(.dd-tl-img)) { grid-template-columns: 92px 1fr; } .dd-tl-event:not(:has(.dd-tl-img)) .dd-tl-body { grid-column: 2; } .dd-tl-body { min-width: 0; } .dd-tl-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .dd-tl-title { font-size: 1rem; font-weight: 700; color: var(--t-black); margin: 0 0 4px; line-height: 1.3; } .dd-tl-desc { font-size: 13px; color: var(--t-text); margin: 0; line-height: 1.45; } .dd-tl-desc a { color: var(--t-blue); } .dd-tl-org-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 9px; background: #555; color: #fff; } .dd-tl-phase { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 9px; background: #eef; color: #335; } .dd-tl-phase-accomplished { background: #e0f4e6; color: #156a30; } .dd-tl-phase-execution { background: #fff4d6; color: #8a5a00; } .dd-tl-phase-planning { background: #e7ecff; color: #2a3b8a; } .dd-tl-phase-future { background: #f3e8ff; color: #5b21b6; } .dd-timeline-fallback { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: var(--t-radius); padding: 18px 22px; color: var(--t-text); font-size: 14px; } .dd-timeline-fallback code { background: rgba(0,0,0,.06); padding: 2px 6px; border-radius: 4px; font-size: 12px; } .dd-timeline-fallback a { color: var(--t-blue); font-weight: 600; } /* ── Skeleton loader (shown while fetching) ────────────────────────────── */ .dd-skeleton { padding: 60px 40px; } .dd-skel-bar { background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%); background-size: 200% 100%; animation: dd-shimmer 1.4s infinite linear; border-radius: 6px; margin: 12px 0; } .dd-skel-bar.tall { height: 36px; width: 60%; margin-left: 20%; } .dd-skel-bar.short { height: 16px; width: 80%; margin-left: 10%; } .dd-skel-card { height: 200px; border-radius: var(--t-radius); margin: 18px 0; background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%); background-size: 200% 100%; animation: dd-shimmer 1.4s infinite linear; } @keyframes dd-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Error state ───────────────────────────────────────────────────────── */ .dd-error { padding: 60px 24px; text-align: center; color: #b91c1c; font-size: 1rem; } /* ── Mobile responsive ─────────────────────────────────────────────────── */ @media (max-width: 768px) { .dd-page { padding: 24px 14px 100px; } .dd-page-header h1 { font-size: 1.7rem; } .dd-page-header p { font-size: 1rem; } .dd-card { padding: 22px 18px; } .dd-title { font-size: 1.3rem; } .dd-cta { padding: 28px 20px; } .dd-cta h4 { font-size: 1.2rem; } .dd-cards-grid { grid-template-columns: 1fr !important; } .dd-card.dd-card-stories .dd-stories-layout { grid-template-columns: 1fr; grid-template-areas: "media" "intro" "stories"; } .dd-stories-grid { grid-template-columns: 1fr; } .dd-timeline { grid-template-columns: 1fr; } .dd-projects-grid { grid-template-columns: 1fr !important; gap: 18px; } .dd-project { padding: 22px 18px 18px; } .dd-project-head h4 { font-size: 1.15rem; } .dd-project-hero { height: 140px; } .dd-project-rollup { gap: 6px 12px; padding: 10px 12px; } .dd-project-actions { flex-direction: column; align-items: stretch; gap: 8px; } .dd-project-cta, .dd-project-view { justify-content: center; padding: 12px 18px; } .dd-project-impact { grid-template-columns: repeat(2, 1fr); } .dd-project-impact-big { font-size: 1.3rem; } .dd-project-unfunded { padding: 14px; } .dd-project-unfunded-amount { font-size: 1.2rem; } .dd-project-unfunded-cta { padding: 12px 18px; width: 100%; justify-content: center; } .dd-project-givebutter iframe { min-height: 540px; } /* Closing CTA — full-width buttons, tighter padding on phones */ .dd-closing { padding: 24px 20px; margin-top: 28px; } .dd-closing h3 { font-size: 1.25rem; } .dd-closing-actions { flex-direction: column; align-items: stretch; gap: 10px; } .dd-closing-cta { justify-content: center; padding: 14px 18px; min-height: 48px; } .dd-closing-secondary { justify-content: center; padding: 12px 18px; min-height: 44px; } .dd-closing-chips { gap: 8px; } .dd-closing-chip { padding: 10px 14px; flex: 1 1 calc(50% - 4px); justify-content: center; min-height: 44px; } /* Compact mobile layout for the inline event cards */ .dd-tl-event { grid-template-columns: 72px 1fr; gap: 10px; padding: 12px; } .dd-tl-img { grid-row: 1; grid-column: 1; width: 56px; height: 56px; } .dd-tl-event:not(:has(.dd-tl-img)) { grid-template-columns: 1fr; } .dd-tl-event:not(:has(.dd-tl-img)) .dd-tl-body { grid-column: 1; } .dd-tl-date { grid-column: 1 / -1; } /* Side nav collapses to bottom strip on mobile. We add the iOS safe-area inset as bottom padding so the nav doesn't overlap the bottom toolbar on devices with a home bar (iPhone X+). The fixed height grows to accommodate the padding rather than the chevrons shifting underneath the toolbar. */ .dd-sidenav { position: fixed; top: auto; bottom: 0; width: 50%; height: auto; min-height: 60px; transform: none; padding: 8px 12px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); border-radius: 0; border: 0; border-top: 1px solid var(--t-border); flex-direction: row; justify-content: center; box-shadow: 0 -4px 12px rgba(0,0,0,.06); } .dd-sidenav.prev { left: 0; right: 50%; } .dd-sidenav.next { left: 50%; right: 0; } .dd-sidenav:hover { transform: none; } .dd-sidenav-title { max-width: 100px; -webkit-line-clamp: 1; } .dd-sidenav-arrow { font-size: 18px; } /* Ensure the bottom of the page (CTA + timeline) clears the side-nav strip so visitors can reach the action button. */ .dd-page { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important; } } /* Hide both sidenav pills when scrolled near the bottom of the page — keeps them from covering the SQS site footer + the cross-pillar chips in our closing CTA. JS toggles .dd-near-bottom on within the last ~200 px of scroll. Smooth fade so the disappearance isn't jarring. */ .dd-sidenav { transition: opacity 0.2s ease; } body.dd-near-bottom .dd-sidenav { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .dd-skel-bar, .dd-skel-card { animation: none; } .dd-sidenav:hover { transform: translateY(-50%); } .dd-cta-btn:hover { transform: none; } }