/* TNN 2026 Cohort Hub — shared styles Design tokens, layout primitives, components used across all pages. Light is default; dark via [data-theme="dark"] on . */ :root { --page: #faf7f1; --card: #ffffff; --card2: #fbf9f3; --line: #e3ddd0; --line2: #cfc7b3; --ink: #0d0f1a; --ink-soft: #2a2f48; --ink-muted: #6a6f80; --ink-faint: #9aa0b0; --amber: #C97300; --teal: #0C7A7A; --indigo: #2825BE; --pill-bg: #ffffff; --pill-border: #cfc7b3; --pill-active: #C97300; --nav-bg: rgba(250, 247, 241, 0.92); --nav-border: #e3ddd0; --tag-bg: #ecebff; --tag-border: #d4d2f5; /* Phase colors — substrate to integration */ --p1: #5A7849; /* Defining */ --p2: #B05E33; /* Systems */ --p3: #9C447A; /* Ecosystem */ --p4: #386F95; /* Integration */ /* Activity accents (used in cards / breadcrumb) */ --c1: #5A7849; --c1t: #e7eee0; --c2: #B47F2D; --c2t: #f3e8d2; --c3: #B05E33; --c3t: #f4e0d2; --c4: #B5402F; --c4t: #f3d8d2; --c5: #9C447A; --c5t: #efd9e6; --c6: #3F3CB5; --c6t: #dedef3; --c7: #386F95; --c7t: #d9e6ef; --c8: #2A5C7D; --c8t: #cfdde7; } [data-theme="dark"] { --page: #0d0f1a; --card: #13162a; --card2: #161929; --line: #1e2235; --line2: #2a2f48; --ink: #ffffff; --ink-soft: #e8eaf0; --ink-muted: rgba(232,234,240,0.6); --ink-faint: rgba(232,234,240,0.28); --amber: #EB9001; --teal: #14B8A6; --indigo: #5B57F2; --pill-bg: #161929; --pill-border: #2a2f48; --pill-active: #EB9001; --nav-bg: rgba(13, 15, 26, 0.92); --nav-border: #1e2235; --tag-bg: rgba(40,37,190,0.18); --tag-border: rgba(91,87,242,0.3); --p1: #6B8E5A; --p2: #C77A4F; --p3: #B85A8C; --p4: #4A8AB8; --c1: #6B8E5A; --c1t: rgba(107,142,90,0.18); --c2: #D4A056; --c2t: rgba(212,160,86,0.18); --c3: #C77A4F; --c3t: rgba(199,122,79,0.18); --c4: #CF4C38; --c4t: rgba(207,76,56,0.18); --c5: #B85A8C; --c5t: rgba(184,90,140,0.18); --c6: #5B57F2; --c6t: rgba(91,87,242,0.18); --c7: #4A8AB8; --c7t: rgba(74,138,184,0.18); --c8: #3E7AA0; --c8t: rgba(62,122,160,0.18); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif; background: var(--page); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background 200ms ease, color 200ms ease; } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } /* ─────────── TOP NAV ─────────── */ .topnav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--nav-border); } .topnav-inner { max-width: 1200px; margin: 0 auto; padding: 0.85rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand-mark { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); } .brand-mark .mark { width: 28px; height: 28px; border-radius: 6px; background: var(--ink); display: grid; grid-template-rows: repeat(7, 1fr); gap: 1px; padding: 4px 6px; flex-shrink: 0; } .brand-mark .mark span { display: block; border-radius: 1px; } .brand-mark .mark span:nth-child(1) { background: var(--c1); } .brand-mark .mark span:nth-child(2) { background: var(--c2); } .brand-mark .mark span:nth-child(3) { background: var(--c3); } .brand-mark .mark span:nth-child(4) { background: var(--c4); } .brand-mark .mark span:nth-child(5) { background: var(--c5); } .brand-mark .mark span:nth-child(6) { background: var(--c6); } .brand-mark .mark span:nth-child(7) { background: var(--c7); } .brand-mark .brand-text { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.82rem; color: var(--ink); line-height: 1; } .brand-mark .brand-text .sub { display: block; color: var(--ink-muted); font-weight: 500; letter-spacing: 0.08em; margin-top: 0.18rem; font-size: 0.7rem; } .nav-links { display: flex; align-items: center; gap: 1.5rem; list-style: none; } .nav-links a { text-decoration: none; color: var(--ink-muted); font-size: 0.85rem; font-weight: 500; transition: color 180ms ease; } .nav-links a:hover, .nav-links a.active { color: var(--ink); } /* Theme toggle */ .theme-toggle { display: inline-flex; padding: 3px; background: var(--pill-bg); border: 1px solid var(--pill-border); border-radius: 999px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; } .theme-toggle button { appearance: none; background: transparent; border: 0; color: var(--ink-muted); padding: 0.3rem 0.7rem; border-radius: 999px; cursor: pointer; font: inherit; text-transform: inherit; letter-spacing: inherit; display: inline-flex; align-items: center; gap: 0.35rem; transition: background 180ms ease, color 180ms ease; } .theme-toggle button:hover { color: var(--ink); } .theme-toggle button[aria-pressed="true"] { background: var(--pill-active); color: var(--page); } .theme-toggle button:focus-visible { outline: 2px solid var(--pill-active); outline-offset: 2px; } .theme-toggle .ico { width: 11px; height: 11px; } @media (max-width: 720px) { .nav-links { display: none; } } /* ─────────── BREADCRUMB NAVIGATOR ─────────── */ .crumb { background: var(--card); border-bottom: 1px solid var(--line); padding: 0.9rem 0; } .crumb-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; gap: 1rem; overflow-x: auto; } .crumb-phases { display: flex; align-items: stretch; gap: 0; flex: 1; min-width: 0; } .crumb-phase { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0 0.6rem; border-right: 1px solid var(--line); flex: 1; min-width: 0; } .crumb-phase:last-child { border-right: 0; } .crumb-phase:first-child { padding-left: 0; } .crumb-phase-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.62rem; color: var(--ink-muted); line-height: 1; white-space: nowrap; } .crumb-phase.active .crumb-phase-label { color: var(--phase-color); } .crumb-nodes { display: flex; gap: 0.35rem; align-items: center; } .crumb-node { display: flex; flex-direction: column; align-items: center; gap: 0.18rem; text-decoration: none; flex-shrink: 0; } .crumb-node .dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line2); background: transparent; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.7rem; color: var(--ink-muted); transition: all 180ms ease; } .crumb-node[data-state="complete"] .dot { background: var(--node-color, var(--ink-soft)); border-color: var(--node-color, var(--ink-soft)); color: var(--page); } .crumb-node[data-state="in-progress"] .dot { background: linear-gradient(135deg, var(--node-color, var(--ink-soft)) 50%, transparent 50%); border-color: var(--node-color, var(--ink-soft)); color: var(--ink); } .crumb-node[data-state="current"] .dot { background: transparent; border: 2.5px solid var(--node-color, var(--ink)); color: var(--ink); box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--node-color); } .crumb-node:hover .dot { transform: translateY(-1px); } .crumb-node .label { font-size: 0.62rem; color: var(--ink-muted); display: none; } .crumb-node[data-state="current"] .label { display: block; color: var(--ink); font-weight: 500; } .crumb-back { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; color: var(--ink-muted); text-decoration: none; white-space: nowrap; padding-right: 0.5rem; border-right: 1px solid var(--line); margin-right: 0.5rem; } .crumb-back:hover { color: var(--ink); } /* Phase color application */ .crumb-phase[data-phase="1"] { --phase-color: var(--p1); } .crumb-phase[data-phase="2"] { --phase-color: var(--p2); } .crumb-phase[data-phase="3"] { --phase-color: var(--p3); } .crumb-phase[data-phase="4"] { --phase-color: var(--p4); } .crumb-node[data-c="1"] { --node-color: var(--c1); } .crumb-node[data-c="2"] { --node-color: var(--c2); } .crumb-node[data-c="3"] { --node-color: var(--c3); } .crumb-node[data-c="4"] { --node-color: var(--c4); } .crumb-node[data-c="5"] { --node-color: var(--c5); } .crumb-node[data-c="6"] { --node-color: var(--c6); } .crumb-node[data-c="7"] { --node-color: var(--c7); } .crumb-node[data-c="8"] { --node-color: var(--c8); } /* ─────────── TYPOGRAPHY HELPERS ─────────── */ .eyebrow { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.78rem; color: var(--amber); margin-bottom: 1rem; } .display { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; line-height: 1; color: var(--ink); } .deck { font-family: 'IBM Plex Serif', serif; font-style: italic; font-weight: 400; color: var(--ink-soft); line-height: 1.55; } .kicker { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: var(--amber); margin-bottom: 0.6rem; } .section-head { margin: 4rem 0 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .section-head h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--ink); line-height: 1.05; } /* ─────────── BUTTONS / LINKS ─────────── */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; background: var(--ink); color: var(--page); border: 1px solid var(--ink); border-radius: 6px; text-decoration: none; font-weight: 500; font-size: 0.88rem; transition: opacity 180ms ease, transform 180ms ease; } .btn:hover { opacity: 0.88; transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--ink); border-color: var(--line2); } .btn-outline:hover { background: var(--card2); } .btn-amber { background: var(--amber); color: var(--page); border-color: var(--amber); } /* ─────────── DOWNLOAD CARDS ─────────── */ .dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.85rem; margin: 1.5rem 0; } .dl-card { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); transition: border-color 180ms ease, transform 180ms ease; } .dl-card:hover { border-color: var(--line2); transform: translateY(-1px); } .dl-card .ico { width: 32px; height: 32px; border-radius: 6px; background: var(--card2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.72rem; color: var(--ink-muted); letter-spacing: 0.04em; } .dl-card .body { flex: 1; min-width: 0; } .dl-card .title { font-weight: 500; font-size: 0.92rem; color: var(--ink); margin-bottom: 0.15rem; line-height: 1.3; } .dl-card .meta { font-size: 0.78rem; color: var(--ink-muted); } /* ─────────── STATUS BADGES ─────────── */ .status { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 999px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; background: var(--card2); border: 1px solid var(--line); color: var(--ink-muted); } .status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status.complete { color: var(--teal); border-color: var(--teal); background: transparent; } .status.in-progress { color: var(--amber); border-color: var(--amber); background: transparent; } .status.upcoming { color: var(--ink-muted); } /* ─────────── FOOTER ─────────── */ .site-footer { margin-top: 6rem; padding: 3rem 0 4rem; border-top: 1px solid var(--line); } .site-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; } .site-footer .brand-text-block { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; color: var(--ink-muted); line-height: 1.6; } .site-footer .meta { font-size: 0.78rem; color: var(--ink-faint); letter-spacing: 0.04em; line-height: 1.6; } .site-footer a { color: var(--ink-muted); }