/* =========================================================================== AUDIENCE VIEWS — the investor briefing (Prosus / Naspers / Takealot) --------------------------------------------------------------------------- Everything here applies when . The hide/show rules themselves are NOT in this file. They are inlined in each page's , alongside the OTP pre-check, so that the commercial model, the printable proposal and the agreement are never painted before an external stylesheet arrives. What follows is only the appearance of the blocks that stand in for the withheld material. Uses the eKasi tokens from globals.css throughout, so both themes work. =========================================================================== */ /* --- "You are on the investor view" banner -------------------------------- The navbar is fixed and 80px tall, and .hero clears it with its own padding-top. The banner sits above the hero in normal flow, so it has to carry that clearance instead — and the hero then drops its own, or the two would stack into a band of dead space. */ .audience-banner { margin-top: 80px; background: linear-gradient(135deg, rgba(144, 194, 59, 0.14) 0%, rgba(63, 84, 27, 0.10) 100%); border-bottom: 1px solid var(--glass-border); padding: var(--spacing-md) 0; } html[data-audience="investor"] .hero { padding-top: 0; } .audience-banner-inner { display: flex; align-items: center; gap: var(--spacing-lg); flex-wrap: wrap; } .audience-banner p { flex: 1 1 320px; margin: 0; font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.55; } .audience-banner p strong { color: var(--text-primary); } .audience-chip { flex: 0 0 auto; padding: 5px 12px; border-radius: var(--radius-full); background: var(--brand-lime); color: var(--brand-olive); /* deep olive on lime — white would be 2.1:1 */ font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .audience-banner-btn { flex: 0 0 auto; padding: 10px 18px; border: 1px solid var(--brand-lime); border-radius: var(--radius-md); background: transparent; color: var(--text-primary); font-family: inherit; font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .audience-banner-btn:hover { background: var(--brand-lime); color: var(--brand-olive); } .audience-banner-btn span { margin-left: 6px; } /* --- Where the commercial model would have been --------------------------- */ .nda-card { max-width: 780px; margin: 0 auto; padding: var(--spacing-2xl); text-align: center; background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); } .nda-seal { font-size: 2.5rem; margin-bottom: var(--spacing-md); } .nda-list { margin: var(--spacing-xl) 0; padding: 0; list-style: none; text-align: left; } .nda-list li { padding: var(--spacing-md) 0 var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--glass-border); border-left: 3px solid var(--brand-lime); font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6; } .nda-list li strong { color: var(--text-primary); } /* --- The investment case -------------------------------------------------- */ .investor { padding: var(--spacing-4xl) 0; } .investor-eyebrow { display: inline-block; margin-bottom: var(--spacing-md); padding: 5px 14px; border: 1px solid var(--brand-lime); border-radius: var(--radius-full); color: var(--primary-green); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .investor-subhead { margin: var(--spacing-4xl) 0 var(--spacing-xl); } /* Thesis — the three-beat argument */ .thesis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-lg); } .thesis-card { position: relative; padding: var(--spacing-xl); background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); overflow: hidden; } .thesis-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--gradient-fresh); } .thesis-num { display: block; margin-bottom: var(--spacing-sm); font-size: var(--font-size-sm); font-weight: 800; letter-spacing: 0.1em; color: var(--primary-green); } .thesis-card h3 { margin-bottom: var(--spacing-sm); font-size: var(--font-size-xl); color: var(--text-primary); } .thesis-card p { margin: 0; font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.65; } /* Fit — one card per counterparty */ .fit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-lg); } .fit-card { padding: var(--spacing-xl); background: var(--surface-1); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); } .fit-card-lead { border-color: var(--brand-lime); box-shadow: var(--shadow-glow); } .fit-name { font-size: var(--font-size-2xl); font-weight: 800; color: var(--text-primary); line-height: 1.2; } .fit-role { margin: 2px 0 var(--spacing-md); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-green); } .fit-card p:last-child { margin: 0; font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.65; } /* Status board — built / on the table / what the cohort produces. Three deliberately different labels: an investor has to be able to tell which claims are demonstrable today and which are consequences of the deployment going ahead. */ .status-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-lg); } .status-col { padding: var(--spacing-xl); background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); } .status-head { display: flex; align-items: center; gap: var(--spacing-sm); padding-bottom: var(--spacing-md); margin-bottom: var(--spacing-md); border-bottom: 1px solid var(--glass-border); font-size: var(--font-size-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); } .status-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: var(--radius-full); background: var(--brand-lime); } .status-live .status-dot { background: var(--brand-green-mid); } .status-next .status-dot { background: transparent; border: 2px solid var(--brand-grey); } .status-col ul { margin: 0; padding: 0; list-style: none; } .status-col li { position: relative; padding: 0 0 var(--spacing-md) var(--spacing-lg); font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6; } .status-col li::before { content: "\2192"; position: absolute; left: 0; color: var(--primary-green); } .status-col li:last-child { padding-bottom: 0; } .status-col li em { color: var(--text-muted); } .status-col li a { color: var(--primary-green); font-weight: 600; } /* The measurement asset */ .asset-block { margin: var(--spacing-4xl) 0 0; padding: var(--spacing-2xl); background: var(--gradient-glass); border: 1px solid var(--brand-lime); border-radius: var(--radius-2xl); text-align: center; } .asset-lead { font-size: var(--font-size-lg); color: var(--text-secondary); margin-bottom: var(--spacing-sm); } .asset-strong { max-width: 760px; margin: 0 auto var(--spacing-lg); font-size: var(--font-size-2xl); font-weight: 700; line-height: 1.45; color: var(--text-primary); } .asset-note { max-width: 720px; margin: 0 auto; font-size: var(--font-size-sm); color: var(--text-muted); line-height: 1.65; } /* The ask */ .ask-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-lg); } .ask-card { display: flex; flex-direction: column; padding: var(--spacing-xl); background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); } .ask-card-lead { border-color: var(--brand-lime); } .ask-icon { font-size: 1.75rem; margin-bottom: var(--spacing-sm); } .ask-card h4 { margin-bottom: var(--spacing-sm); font-size: var(--font-size-lg); color: var(--text-primary); } .ask-card p { flex: 1; margin-bottom: var(--spacing-lg); font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.65; } .ask-card button { align-self: flex-start; } /* Who is behind it */ .principals { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-4xl); } .principal-card { padding: var(--spacing-xl); background: var(--surface-1); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); } .principal-org { font-size: var(--font-size-xl); font-weight: 800; color: var(--text-primary); } .principal-org span { font-weight: 400; color: var(--text-muted); } .principal-role { margin: 2px 0 var(--spacing-md); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-green); } .principal-person, .principal-contact { margin: 0 0 4px; font-size: var(--font-size-sm); color: var(--text-secondary); } .principal-contact { color: var(--text-muted); } .investor-confidential { margin: var(--spacing-2xl) 0 0; padding-top: var(--spacing-lg); border-top: 1px solid var(--glass-border); font-size: var(--font-size-xs); color: var(--text-muted); text-align: center; } @media (max-width: 768px) { .audience-banner-inner { flex-direction: column; align-items: flex-start; } .nda-card { padding: var(--spacing-xl); } .asset-block { padding: var(--spacing-xl); } }