README / index.html
FenruaLabs's picture
Open mobile organization-card title lockup
f0669dd verified
Raw
History Blame Contribute Delete
15.2 kB
<!doctype html>
<html lang="en-AU">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Fenrua Labs Pty Ltd: public evidence for private AI execution.">
<title>Fenrua Labs Pty Ltd — The BlackBox Protocol</title>
<style>
:root {
color-scheme: dark;
--black: #030306;
--deep: #08091a;
--paper: #f5f3ff;
--soft: #c7c2d8;
--quiet: #89849d;
--hairline: rgba(213, 205, 255, .22);
--violet: #c65cff;
--electric: #00d8ff;
--blue: #4d7cff;
}
* { box-sizing: border-box; }
figure { margin: 0; }
html { background: var(--black); }
body {
min-width: 0;
min-height: 100vh;
margin: 0;
overflow-x: hidden;
color: var(--paper);
background:
radial-gradient(48rem 46rem at 79% 31%, rgba(59, 59, 223, .2), transparent 67%),
radial-gradient(36rem 38rem at 14% 88%, rgba(177, 46, 255, .12), transparent 68%),
var(--black);
font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body::before {
position: fixed;
z-index: -1;
inset: 0;
opacity: .42;
pointer-events: none;
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
radial-gradient(circle at 66% 15%, rgba(91,202,255,.68) 0 1px, transparent 1.5px),
radial-gradient(circle at 93% 72%, rgba(210,87,255,.55) 0 1px, transparent 1.4px);
background-size: 18rem 19rem, 23rem 27rem, 31rem 24rem;
content: "";
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--electric); outline-offset: .3rem; }
.canvas {
width: min(100% - 2rem, 88rem);
margin: 0 auto;
padding: 1.05rem 0 2rem;
}
.campaign {
position: relative;
/* The organization-card sanitizer removes @media rules. This
flex-wrap composition therefore adapts without an at-rule: the
poster is first in the DOM, row-reverse keeps it on the right
beside the copy on desktop, and wrapping makes it poster-first on
a narrow organization card. */
display: flex;
flex-flow: row-reverse wrap;
min-height: min(51rem, calc(100svh - 4rem));
overflow: hidden;
border: 1px solid rgba(220, 211, 255, .26);
background: #05050c;
box-shadow: 0 2.5rem 7rem rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255,255,255,.045);
}
.campaign::after {
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
left: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--violet), var(--electric), transparent);
box-shadow: 0 0 1.15rem rgba(0, 216, 255, .74);
content: "";
}
.copy-rail {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
flex: 0 1 max(19rem, 36.5%);
min-width: 0;
padding: clamp(1.25rem, 3.2vw, 3rem);
background:
linear-gradient(155deg, rgba(18, 10, 40, .96), rgba(4, 5, 14, .98) 59%, rgba(7, 14, 37, .97)),
var(--deep);
}
.copy-rail::before {
position: absolute;
z-index: -1;
width: 32rem;
height: 32rem;
top: -20rem;
left: -21rem;
border: 1px solid rgba(195, 92, 255, .35);
border-radius: 50%;
box-shadow: 0 0 0 4rem rgba(133, 61, 255, .035), 0 0 6rem rgba(126, 47, 255, .26);
content: "";
}
.micro,
.signal,
.status,
.footer-title,
.line-link {
font-family: "Arial Narrow", "Avenir Next Condensed", "Roboto Condensed", ui-sans-serif, sans-serif;
font-size: .62rem;
font-weight: 750;
letter-spacing: .24em;
text-transform: uppercase;
}
.masthead {
display: flex;
align-items: center;
justify-content: space-between;
gap: .8rem;
/* The organization-card sanitizer removes the mobile block below.
This preserves the desktop 10vh gap while using the narrower
viewport dimension to tighten the mobile copy rail. */
margin-bottom: clamp(1.5rem, 7.7778vw, 7.2rem);
}
.masthead a { color: var(--paper); }
.brand { display: inline-flex; align-items: center; gap: .6rem; letter-spacing: .29em; }
.brand::before {
width: .5rem;
height: .5rem;
border-radius: 50%;
background: var(--electric);
box-shadow: 0 0 .9rem var(--electric), 0 0 1.8rem rgba(198, 92, 255, .7);
content: "";
}
.edition { color: var(--violet); font-size: .58rem; letter-spacing: .18em; white-space: nowrap; }
.copy-rail h1 {
max-width: 8.2ch;
margin: 0 0 clamp(1.05rem, 1.6667vw, 1.5rem);
font-family: "Arial Narrow", "Avenir Next Condensed", Inter, ui-sans-serif, sans-serif;
/* The organization-card sanitizer removes @media rules. These
fluid lower bounds enlarge and open the three-line iPhone lockup,
while the 1440px desktop values remain unchanged. */
font-size: clamp(3rem, 4.35vw, 4.85rem);
font-weight: 300;
-webkit-text-stroke-width: clamp(0px, calc(.65px - .0762vw), .35px);
-webkit-text-stroke-color: currentColor;
letter-spacing: clamp(-.075em, calc(-.02em - .24vw), -.04em);
line-height: clamp(3.3rem, 3.828vw, 3.4452rem);
}
.copy-rail h1 em {
display: block;
color: transparent;
background: linear-gradient(116deg, #f2c7ff 4%, #c880ff 54%, #51e8ff 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-stroke-color: rgba(218, 157, 255, .8);
font-style: normal;
}
.story {
max-width: 30rem;
margin: 0 0 clamp(1.1rem, 2.2222vw, 2rem);
color: var(--soft);
font-size: clamp(.9rem, 1.05vw, 1rem);
}
.signal {
display: flex;
align-items: center;
gap: .65rem;
margin: auto 0 1.35rem;
color: #d7b2ff;
letter-spacing: clamp(.10rem, .1653vw, .1488rem);
}
.signal::before {
width: 2.2rem;
height: 1px;
background: linear-gradient(90deg, var(--violet), var(--electric));
box-shadow: 0 0 .8rem rgba(198, 92, 255, .84);
content: "";
}
.boundary-note {
padding-top: 1rem;
border-top: 1px solid var(--hairline);
color: #aaa5bc;
font-size: .79rem;
line-height: 1.55;
}
.boundary-note strong { display: block; margin-bottom: .35rem; color: var(--paper); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.poster-frame {
position: relative;
flex: 1 1 min(27rem, 63.5%);
min-width: 0;
min-height: 0;
aspect-ratio: 1122 / 1402;
overflow: hidden;
background: #04040c;
}
.poster-frame::before {
position: absolute;
z-index: 1;
inset: 0;
background:
linear-gradient(90deg, rgba(3, 4, 11, .5), transparent 22%),
linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .02) 60%, rgba(2, 2, 8, .65));
pointer-events: none;
content: "";
}
.poster-frame::after {
position: absolute;
z-index: 2;
inset: 1.15rem;
border: 1px solid rgba(212, 199, 255, .32);
pointer-events: none;
content: "";
}
.campaign-art {
display: block;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
object-position: center center;
filter: saturate(1.07) contrast(1.04);
transform: scale(1.003);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.evidence-strip {
display: grid;
grid-template-columns: 1.15fr repeat(3, 1fr);
/* The strip stays fully available at desktop widths, but contracts
cleanly on phone-width organization cards without relying on a
sanitizer-stripped @media rule. */
max-height: clamp(0px, calc(100vw - 40rem), 20rem);
overflow: hidden;
border: 1px solid var(--hairline);
border-top: 0;
background: rgba(5, 6, 16, .95);
}
.strip-intro,
.strip-cell { min-height: 8.25rem; padding: 1.25rem 1.4rem; }
.strip-cell { border-left: 1px solid var(--hairline); }
.strip-intro p { max-width: 24rem; margin: .45rem 0 0; color: var(--quiet); font-size: .8rem; }
.status { color: var(--violet); font-size: .6rem; }
.strip-cell h2 { margin: .65rem 0 .3rem; font-size: .98rem; letter-spacing: -.025em; }
.strip-cell p { margin: 0; color: var(--quiet); font-size: .78rem; }
footer {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
padding: 1.35rem .1rem 0;
color: #89849d;
font-size: .75rem;
}
.footer-title { color: #d8d1eb; font-size: .57rem; letter-spacing: .2em; }
.copyright { display: block; margin-top: .35rem; color: #77738a; }
.links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .9rem 1.2rem; }
.links a:hover, .line-link:hover { color: var(--electric); }
.line-link { color: #d1b2ff; font-size: .6rem; letter-spacing: clamp(.094rem, .16vw, .144rem); }
/* Hugging Face can host this card inside a tall, scaled iframe whose
CSS width remains desktop-like on a phone. Aspect ratio is therefore
an intentional second mobile signal; it leaves desktop untouched. */
@media (max-width: 62rem), (max-aspect-ratio: 4 / 5) {
.campaign { grid-template-columns: 1fr; min-height: 0; }
.copy-rail { order: 2; flex: 1 1 100%; min-height: 34rem; }
.poster-frame { order: 1; flex: 1 1 100%; min-height: min(46rem, 128vw); }
.masthead { margin-bottom: 3.5rem; }
.signal { margin-top: 3.5rem; }
.evidence-strip { grid-template-columns: repeat(3, 1fr); }
.strip-intro { grid-column: 1 / -1; min-height: auto; border-bottom: 1px solid var(--hairline); }
}
@media (max-width: 40rem), (max-aspect-ratio: 4 / 5) {
.canvas { width: min(100% - 1rem, 88rem); padding-top: .5rem; }
.copy-rail {
min-height: 0;
padding: 1.45rem 1.25rem 1.55rem;
background: linear-gradient(158deg, #10082b, #050611 64%, #07142d);
}
.copy-rail::before { display: none; }
.masthead { margin-bottom: 1.45rem; }
.brand { font-size: .58rem; letter-spacing: .22em; }
.edition { font-size: .52rem; }
.copy-rail h1 {
max-width: 9ch;
margin-bottom: .9rem;
font-size: clamp(2.2rem, 10.5vw, 2.85rem);
line-height: .92;
}
.story { margin-bottom: 1.15rem; font-size: .86rem; line-height: 1.58; }
.line-link { font-size: .53rem; letter-spacing: .17em; }
.signal { margin: 1.55rem 0 .8rem; font-size: .52rem; letter-spacing: .17em; }
.signal::before { width: 1.55rem; }
.boundary-note { padding-top: .8rem; font-size: .71rem; }
.boundary-note strong { font-size: .61rem; }
.poster-frame {
min-height: 0;
aspect-ratio: 1122 / 1402;
}
.poster-frame::after { inset: .72rem; }
.campaign-art { min-height: 0; transform: none; }
.evidence-strip { display: none; }
footer { align-items: flex-start; flex-direction: column; padding: 1rem .15rem 0; }
.links { justify-content: flex-start; }
}
</style>
</head>
<body>
<main class="canvas">
<section class="campaign" aria-labelledby="page-title">
<figure class="poster-frame">
<img class="campaign-art" src="https://fenrua-labs-readme.static.hf.space/assets/fenrua-blackbox-evidence-gate.png" alt="Fenrua BlackBox Protocol campaign artwork showing a luminous evidence gate above a mountain landscape" loading="eager">
<figcaption class="sr-only">Evidence Gate: public evidence for private execution.</figcaption>
</figure>
<div class="copy-rail">
<header class="masthead micro">
<a class="brand" href="https://fenrua.ai/">Fenrua Labs</a>
<span class="edition">Field record / 001</span>
</header>
<h1 id="page-title">Evidence must be <em>visible.</em></h1>
<p class="story">Fenrua Labs Pty Ltd builds privacy-preserving protocol infrastructure for verifiable AI automation: public claims stay inspectable; confidential execution stays contained.</p>
<a class="line-link" href="https://fenrua.ai/company">Explore the company record ↗</a>
<p class="signal">Public evidence / private execution</p>
<div class="boundary-note">
<strong>Publication boundary</strong>
This is a company record—not a model release. FML Mosaic 527B is an untrained architecture design.
</div>
</div>
</section>
<section class="evidence-strip" aria-label="Fenrua operating principles">
<div class="strip-intro">
<span class="status">The BlackBox Protocol</span>
<p>Company identity and operating boundary—not a product launch or a capability claim.</p>
</div>
<article class="strip-cell">
<span class="status">01 / Evidence</span>
<h2>Claims carry context.</h2>
<p>Sources, maturity labels, and limits make public statements inspectable.</p>
</article>
<article class="strip-cell">
<span class="status">02 / Control</span>
<h2>Authority is explicit.</h2>
<p>Actions and policy decisions should remain reviewable before they are trusted.</p>
</article>
<article class="strip-cell">
<span class="status">03 / Privacy</span>
<h2>Execution stays private.</h2>
<p>Verification exposes bounded evidence, not the confidential machine beneath it.</p>
</article>
</section>
<footer>
<span class="footer-title">Fenrua Labs Pty Ltd<span class="copyright">© 2026 Fenrua Labs Pty Ltd. All rights reserved.</span></span>
<span class="links">
<a href="https://fenrua.ai/">fenrua.ai ↗</a>
<a href="https://x.com/FenruaLabs">X ↗</a>
<a href="mailto:partnerships@fenrua.ai">Contact</a>
<a href="LICENSE.md">License</a>
</span>
</footer>
</main>
</body>
</html>