/* =========================================================================== CORTEX — Diagram / Graphic Family styling SVG diagrams use these custom properties so a single markup set re-colours correctly on light surfaces and on navy panels (boardroom hero / invert sections). Meaning is always duplicated in adjacent HTML text. =========================================================================== */ .dia { --dia-ink: var(--navy); /* primary lines, nodes, labels */ --dia-faint: #9AA7B5; /* secondary connectors */ --dia-fill: var(--pale); /* node / band fills */ --dia-fill-soft: #EAF1FA; --dia-accent: var(--amber); /* stage / decision markers */ --dia-warn: var(--warn); /* ungoverned path emphasis */ --dia-label: var(--navy); /* text colour */ --dia-label-muted: var(--slate); /* secondary text */ display: block; width: 100%; height: auto; font-family: var(--font-sans); } /* On dark panels, flip line + label colours for contrast */ .section--invert .dia, .brief-feature .dia, :root[data-direction="boardroom"] .hero .dia { --dia-ink: #EAF1FA; --dia-faint: #7E93AD; --dia-fill: rgba(255,255,255,.06); --dia-fill-soft: rgba(255,255,255,.10); --dia-label: #EAF1FA; --dia-label-muted: #A9BCD4; } .dia text { fill: var(--dia-label); font-family: var(--font-sans); } .dia .t-label { font-size: 13px; font-weight: 600; } .dia .t-sub { font-size: 11px; font-weight: 500; fill: var(--dia-label-muted); } .dia .t-cap { font-size: 11px; font-weight: 500; fill: var(--dia-label-muted); letter-spacing: .04em; } .dia .t-kick { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; fill: var(--dia-label-muted); text-transform: uppercase; } .dia .stroke { stroke: var(--dia-ink); fill: none; } .dia .stroke-faint { stroke: var(--dia-faint); fill: none; } .dia .fill-pale { fill: var(--dia-fill); } .dia .fill-soft { fill: var(--dia-fill-soft); } .dia .fill-ink { fill: var(--dia-ink); } .dia .fill-accent { fill: var(--dia-accent); } .dia .stroke-accent { stroke: var(--dia-accent); fill: none; } .dia .fill-warn { fill: var(--dia-warn); } .dia .stroke-warn { stroke: var(--dia-warn); fill: none; } .dia .stroke-dash { stroke-dasharray: 4 4; } /* Node box convenience */ .dia .node { fill: var(--dia-fill); stroke: var(--dia-ink); stroke-width: 1; } .dia .node-soft { fill: var(--dia-fill-soft); stroke: var(--dia-faint); stroke-width: 1; } /* Accent-only meaning never stands alone — pair markers with shape/label. The amber stage dots are always accompanied by a numbered/text label. */ /* Hero visual variants — toggled by [data-hero] on */ .hero-fig { display: none; } :root[data-hero="planes"] .hero-fig--planes { display: block; } :root[data-hero="map"] .hero-fig--map { display: block; } :root[data-hero="frame"] .hero-fig--frame { display: block; } /* Fallback: if no/unknown value, show planes */ :root:not([data-hero]) .hero-fig--planes { display: block; } /* Sector motif (used in cards) keeps to navy/pale; abstract geometry only */ .motif-svg { display:block; width:100%; height:100%; } .motif-svg .ln { stroke: var(--navy); stroke-width: 1.25; fill: none; opacity: .55; } .motif-svg .nd { fill: var(--navy); } .motif-svg .ac { fill: var(--amber); } .motif-svg .bg { fill: var(--pale); } :root[data-direction="institute"] .sector-card .motif { background: #fff; border: 1px solid var(--line); }