/* ========================================================================== AM-Reaper project page Depends on base.css. The red accent comes from [data-brand="reaper"] on , so every shared component inherits it automatically. ========================================================================== */ body{ background: radial-gradient(circle at 82% 4%,rgba(227,27,35,.11),transparent 26rem), radial-gradient(circle at 8% 38%,rgba(227,27,35,.05),transparent 30rem), var(--bg); } /* --- Hero ----------------------------------------------------------------- */ .r-hero{padding-block:calc(var(--header-h) + clamp(48px,7vw,84px)) clamp(40px,6vw,64px)} .r-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,56px);align-items:center} .r-hero h1{ margin:16px 0 22px; font-size:clamp(3rem,7.6vw,6.4rem);line-height:.88;letter-spacing:-.07em;font-weight:800; } .r-hero h1 .reaper{display:block;color:#fff;text-shadow:0 0 40px rgba(227,27,35,.16)} .r-hero h1 .firmware{display:block;color:transparent;-webkit-text-stroke:1px var(--text-4)} .r-hero .lede{max-width:66ch;color:var(--text-2);font-size:clamp(1.02rem,1.6vw,1.2rem);margin-bottom:28px} .r-hero .lede strong{color:var(--text);font-weight:600} .r-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px} /* Grid, not flex-wrap: four stats in a narrow column wrapped 3+1 and left the last one orphaned on its own row. */ .r-meta{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 34px;max-width:440px;color:var(--text-3); } .r-meta strong{display:block;color:var(--text);font-size:1.15rem;letter-spacing:-.02em} .r-meta span{font:9px var(--mono);text-transform:uppercase;letter-spacing:.12em} .screen{ position:relative;padding:1px; background:linear-gradient(135deg,rgba(227,27,35,.75),rgba(255,255,255,.1) 30%,rgba(255,255,255,.03) 70%); box-shadow:0 26px 80px rgba(0,0,0,.45); } .screen::before{ content:"";position:absolute;inset:12% 6% -8%;z-index:-1; background:rgba(227,27,35,.16);filter:blur(55px); } .screen-inner{background:#09090b;border:1px solid #111116;overflow:hidden} .screen-inner img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top} .screen-bar{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:12px 14px;border-top:1px solid var(--line);background:#0e0e12; color:var(--text-3);font:10px var(--mono);letter-spacing:.06em; } .live-dot{ width:8px;height:8px;border-radius:50%;background:#39d98a;display:inline-block;margin-right:8px; box-shadow:0 0 14px rgba(57,217,138,.6); } /* --- Release channels ------------------------------------------------------ */ .channels{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px} .channel{padding:22px 24px;border:1px solid var(--line);background:var(--surface-1)} .channel.beta{border-style:dashed;border-color:rgba(255,202,92,.4)} .channel-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin-bottom:10px} .channel-head .tag{ padding:4px 8px;border:1px solid var(--line-strong); font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3); } .channel.beta .channel-head .tag{border-color:rgba(255,202,92,.45);color:var(--amber)} .channel-head strong{font-size:1.25rem;letter-spacing:-.02em} .channel-head span{font:10px var(--mono);letter-spacing:.06em;color:var(--text-4)} .channel p{color:var(--text-2);font-size:.9rem;line-height:1.6} .channel ul{margin:10px 0 0;padding-left:18px;color:var(--text-3);font-size:.86rem;line-height:1.6} .channel .link-row{margin-top:12px} /* --- Proof strip ---------------------------------------------------------- */ .proof-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--line);border:1px solid var(--line); } .proof{background:var(--bg);padding:22px} .proof strong{display:block;font-size:.98rem;margin-bottom:8px;letter-spacing:-.01em} .proof span{color:var(--text-3);font-size:.85rem;line-height:1.6} /* --- Principles ----------------------------------------------------------- */ .principle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .principle{padding:30px;border:1px solid var(--line);background:var(--surface-1);transition:border-color .3s var(--ease)} .principle:hover{border-color:var(--accent-dim)} .principle .icon{ width:42px;height:42px;display:grid;place-items:center;margin-bottom:20px; border:1px solid var(--accent-dim);color:var(--accent);font-size:1.15rem; } .principle h3{font-size:1.15rem;letter-spacing:-.02em;margin-bottom:12px} .principle p{color:var(--text-2);font-size:.93rem} /* --- Feature showcase ----------------------------------------------------- */ .feature-showcase{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start} .feature-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)} .feature-tab{ display:block;width:100%;text-align:left;cursor:pointer; padding:16px 18px;border:0;background:var(--bg); border-left:2px solid transparent; transition:background .2s var(--ease),border-color .2s var(--ease); } .feature-tab:hover{background:var(--surface-2)} .feature-tab b{display:block;font-size:.96rem;font-weight:600;letter-spacing:-.01em} .feature-tab span{display:block;margin-top:5px;color:var(--text-3);font-size:.82rem;line-height:1.55} .feature-tab[aria-selected="true"]{background:var(--surface-2);border-left-color:var(--accent)} .feature-tab[aria-selected="true"] b{color:var(--accent)} .feature-display{border:1px solid var(--line);background:var(--surface-1);overflow:hidden} .feature-display img{ width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top; background:var(--surface-2);cursor:zoom-in; } .feature-copy{padding:24px;border-top:1px solid var(--line)} .feature-copy .tag{ display:inline-block;padding:5px 9px;border:1px solid var(--accent-dim); font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent); } .feature-copy h3{font-size:1.5rem;letter-spacing:-.03em;margin:14px 0 10px} .feature-copy p{color:var(--text-2);font-size:.95rem;max-width:76ch} /* --- Models --------------------------------------------------------------- */ .models{display:grid;grid-template-columns:1.15fr .85fr;gap:20px} .model-panel,.variant-panel{padding:clamp(24px,3vw,34px);border:1px solid var(--line);background:var(--surface-1)} .model-panel h3,.variant-panel h3{font-size:1.2rem;letter-spacing:-.02em;margin-bottom:12px} .model-panel > p,.variant-panel > p{color:var(--text-2);font-size:.92rem;margin-bottom:22px} .chips{display:flex;flex-direction:column;gap:10px} .chip{ display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px; padding:13px 16px;border:1px solid var(--line-strong);background:var(--bg); font:600 .95rem var(--mono);letter-spacing:-.01em; } .chip small{font:9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-4);font-weight:400} .chip.primary{border-color:var(--accent-dim);background:var(--accent-wash);color:var(--accent)} .chip.primary small{color:var(--accent);opacity:.75} .variant{padding:18px 0;border-top:1px solid var(--line)} .variant b{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.98rem;margin-bottom:8px} .variant b span{ padding:3px 8px;border:1px solid var(--line-strong); font:9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:400; } .variant p{color:var(--text-3);font-size:.88rem} /* --- Interface explorer ---------------------------------------------------- A click-through mock of the Reaper shell: our own rail and tab bar drawn around real content captures. Only the current screen is loaded. */ .ui{border:1px solid var(--line);background:#09090c;box-shadow:0 26px 80px rgba(0,0,0,.4)} .ui-head{ display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px; padding:11px 16px;border-bottom:1px solid var(--line);background:#0e0e12; font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3); } .ui-brand{font:800 15px var(--sans);letter-spacing:-.02em;color:#fff;text-transform:none;margin-right:6px} .ui-brand em{color:var(--accent);font-style:italic;font-weight:800} .ui-brand small{display:block;font:9px var(--mono);letter-spacing:.1em;color:var(--text-4);text-transform:uppercase} .ui-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--line-strong);background:#121216;white-space:nowrap} .ui-pill b{color:var(--text);font-weight:600;letter-spacing:.02em;text-transform:none} .ui-pill .live-dot{margin-right:0} .ui-head .ui-note{margin-left:auto;color:var(--text-4)} .ui-body{display:grid;grid-template-columns:236px minmax(0,1fr)} .ui-side{position:relative;border-right:1px solid var(--line);background:#0b0b0e;display:flex;flex-direction:column;min-width:0} .ui-search{ margin:12px 12px 4px;padding:9px 11px; background:#08080a;border:1px solid var(--line-strong);color:var(--text);font-size:.85rem; } .ui-search:focus{outline:none;border-color:var(--accent)} .ui-search::placeholder{color:var(--text-4)} .ui-rail,.ui-results{overflow:auto;padding:4px 8px 14px;max-height:760px;scrollbar-width:thin} .ui-grp{font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-4);margin:14px 10px 6px} .ui-item{ display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px; border:0;border-left:2px solid transparent;background:transparent; color:var(--text-2);font-size:.86rem;text-align:left;cursor:pointer; transition:background .15s var(--ease),color .15s var(--ease); } .ui-item svg{ width:17px;height:17px;flex:none;opacity:.8; fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; } .ui-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ui-item:hover{background:#111116;color:var(--text)} .ui-item.on{color:var(--accent);background:var(--accent-wash);border-left-color:var(--accent)} .ui-item.on svg{opacity:1} .ui-item small{margin-left:auto;font:9px var(--mono);color:var(--text-4)} .ui-empty{padding:18px 12px;color:var(--text-3);font-size:.86rem} .ui-main{display:flex;flex-direction:column;min-width:0} .ui-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px 0} .ui-tab{ padding:8px 12px;border:1px solid var(--line-strong);background:#121216;cursor:pointer; color:var(--text-2);font:600 11px var(--mono);letter-spacing:.05em; transition:color .15s var(--ease),border-color .15s var(--ease); } .ui-tab:hover{color:var(--text);border-color:var(--text-4)} .ui-tab[aria-selected="true"]{color:#fff;border-color:var(--accent);background:linear-gradient(180deg,rgba(227,27,35,.28),#121216)} .ui-crumb{padding:12px 16px 0;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)} .ui-screen{ margin:10px 16px 0;border:1px solid var(--line);background:#0b0b0d; max-height:min(74vh,880px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;cursor:zoom-in; } .ui-screen img{width:100%;height:auto;display:block} .ui-foot{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;align-items:start; padding:14px 16px 16px; } .ui-foot h3{font-size:1rem;letter-spacing:-.01em;margin-bottom:4px} .ui-foot p{color:var(--text-3);font-size:.86rem;line-height:1.55;max-width:80ch} .ui-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:8px;font:9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)} .ui-meta a{color:var(--accent);border-bottom:1px solid var(--accent-dim)} .ui-ctl{display:flex;gap:6px} .ui-btn{ width:38px;height:38px;display:grid;place-items:center;cursor:pointer; background:#121216;border:1px solid var(--line-strong);color:var(--text);font-size:1.1rem;line-height:1; transition:border-color .2s var(--ease),color .2s var(--ease); } .ui-btn:hover{border-color:var(--accent);color:var(--accent)} .ui-btn.wide{width:auto;padding:0 12px;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase} /* --- Lightbox ------------------------------------------------------------- */ .lightbox{ position:fixed;inset:0;z-index:60; display:none;place-items:center; /* Override the UA dialog defaults so it can fill the viewport. */ width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0; padding:clamp(12px,3vw,40px); background:rgba(4,5,7,.94);backdrop-filter:blur(6px); color:var(--text);overscroll-behavior:contain; } .lightbox[open]{display:grid} .lightbox::backdrop{background:transparent} .lb-figure{margin:0;max-width:min(1400px,100%);max-height:100%;display:flex;flex-direction:column;min-height:0} .lb-figure img{ flex:1;min-height:0;width:auto;max-width:100%;object-fit:contain; border:1px solid var(--line-strong);background:var(--surface-1); } .lb-figure figcaption{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px; padding:14px 4px 0;color:var(--text-2);font-size:.9rem; } .lb-figure figcaption b{font-weight:600} .lb-figure figcaption .idx{font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)} .lb-figure figcaption a{color:var(--accent);font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--accent-dim)} .lb-btn{ position:absolute;top:50%;transform:translateY(-50%); width:48px;height:48px;display:grid;place-items:center;cursor:pointer; background:rgba(12,17,21,.9);border:1px solid var(--line-strong);color:var(--text); font-size:1.3rem;line-height:1; transition:border-color .2s var(--ease),background .2s var(--ease); } .lb-btn:hover{border-color:var(--accent);color:var(--accent)} .lb-prev{left:clamp(8px,2vw,24px)} .lb-next{right:clamp(8px,2vw,24px)} .lb-close{ position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px); width:44px;height:44px;transform:none; } /* --- Transparency --------------------------------------------------------- */ .transparency{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .transparency-card{padding:clamp(24px,3vw,34px);border:1px solid var(--line);background:var(--surface-1)} .transparency-card h3{font-size:1.2rem;letter-spacing:-.02em;margin-bottom:12px} .transparency-card p{color:var(--text-2);font-size:.93rem;margin-bottom:22px} .link-row{display:flex;flex-wrap:wrap;gap:14px 22px} /* --- Support callout ------------------------------------------------------ */ .r-support{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px; padding:clamp(26px,4vw,44px); border:1px solid var(--accent-dim);background:var(--accent-wash); } .r-support h2{font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:-.035em;margin-bottom:12px} .r-support p{color:var(--text-2);max-width:60ch;font-size:.96rem} /* --- Closing CTA ---------------------------------------------------------- */ .r-cta{ padding:clamp(32px,5vw,64px); border:1px solid var(--line);background:var(--surface-1);text-align:center; } .r-cta h2{font-size:clamp(1.7rem,4vw,2.9rem);letter-spacing:-.04em;line-height:1.08;margin:14px auto 16px;max-width:22ch} .r-cta > p{color:var(--text-2);max-width:66ch;margin:0 auto 26px} .r-cta .r-actions{justify-content:center;margin-bottom:0} /* --- Responsive ----------------------------------------------------------- */ @media (max-width:1080px){ .r-hero-grid{grid-template-columns:1fr;gap:40px} .channels{grid-template-columns:1fr} .feature-showcase{grid-template-columns:1fr} .feature-list{flex-direction:row;overflow-x:auto;gap:1px;scrollbar-width:thin} .feature-tab{min-width:220px;border-left:0;border-bottom:2px solid transparent} .feature-tab[aria-selected="true"]{border-left-color:transparent;border-bottom-color:var(--accent)} .models{grid-template-columns:1fr} .proof-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .ui-body{grid-template-columns:1fr} .ui-side{border-right:0;border-bottom:1px solid var(--line)} .ui-rail,.ui-results{display:flex;gap:2px;overflow-x:auto;max-height:none;padding:6px 8px 10px} .ui-grp{display:none} .ui-item{width:auto;flex:none;white-space:nowrap;border-left:0;border-bottom:2px solid transparent;padding:8px 10px} .ui-item.on{border-bottom-color:var(--accent)} .ui-item small{display:none} .ui-head .ui-note{display:none} } @media (max-width:760px){ .principle-grid,.transparency{grid-template-columns:1fr} .ui-foot{grid-template-columns:1fr} } @media (max-width:560px){ .proof-grid{grid-template-columns:1fr} .ui-screen{max-height:70vh} .lb-btn{width:40px;height:40px} } /* --- Inline-style replacements ------------------------------------------- */ .proof-strip{margin-top:clamp(32px,5vw,52px)} .band-support{padding-bottom:clamp(60px,8vw,96px)} .band-cta{padding-bottom:clamp(72px,10vw,120px)} .footer-upstream-link{color:var(--text-2);border-bottom:1px solid var(--line-strong)} .legal.is-spaced{margin-top:14px} /* The base `img{height:auto}` rule must not stop the lightbox image from filling its flex track. */ .lb-figure img{height:auto;min-height:0} /* --- Models: platform groups + experimental chip -------------------------- */ .chip-group{display:flex;flex-direction:column;gap:10px} .chip-group + .chip-group{margin-top:20px} .chip-label{font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-4);margin:0} .chip.experimental{border-style:dashed;border-color:rgba(255,202,92,.45);color:var(--amber)} .chip.experimental small{color:var(--amber);opacity:.8} .model-note{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);color:var(--text-3);font-size:.86rem;line-height:1.6} /* --- Owner's guide -------------------------------------------------------- */ .guide{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:start} .guide-card,.guide-side{padding:clamp(24px,3vw,34px);border:1px solid var(--line);background:var(--surface-1)} .guide-card h3,.guide-side h3{font-size:1.2rem;letter-spacing:-.02em;margin-bottom:12px} .guide-side > p{color:var(--text-2);font-size:.92rem;margin-bottom:18px} .guide-toc{list-style:none;counter-reset:guide;margin:0 0 26px;padding:0} .guide-toc li{ counter-increment:guide;display:grid;grid-template-columns:34px 1fr;gap:4px 14px; padding:14px 0;border-top:1px solid var(--line); } .guide-toc li::before{ content:counter(guide,decimal-leading-zero);grid-row:1/3; font:600 11px var(--mono);letter-spacing:.08em;color:var(--accent);padding-top:3px; } .guide-toc b{font-size:.96rem;font-weight:600;letter-spacing:-.01em} .guide-toc span{color:var(--text-3);font-size:.85rem;line-height:1.55} .r-actions.is-tight{margin-bottom:0} .guide-links{display:flex;flex-direction:column} .guide-links a{ display:block;padding:13px 0;border-top:1px solid var(--line); transition:color .2s var(--ease); } .guide-links a:last-child{border-bottom:1px solid var(--line)} .guide-links b{display:block;font-size:.93rem;font-weight:600;letter-spacing:-.01em;color:var(--text)} .guide-links span{display:block;margin-top:3px;color:var(--text-3);font-size:.82rem;line-height:1.5} .guide-links a:hover b{color:var(--accent)} /* --- Open source: pledges + clean room ------------------------------------ */ .pledge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px} .pledge{padding:28px;border:1px solid var(--accent-dim);background:var(--accent-wash)} .pledge-mark{ display:grid;place-items:center;width:42px;height:42px;margin-bottom:18px; border:1px solid var(--accent-dim);color:var(--accent);font:600 1.2rem var(--mono); } .pledge h3{font-size:1.2rem;letter-spacing:-.02em;margin-bottom:10px} .pledge p{color:var(--text-2);font-size:.9rem;line-height:1.6} .cleanroom{ display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,48px); padding:clamp(24px,3vw,34px);margin-bottom:20px; border:1px solid var(--line);background:var(--surface-1); } .cleanroom-copy h3{font-size:1.2rem;letter-spacing:-.02em;margin-bottom:12px} .cleanroom-copy p{color:var(--text-2);font-size:.93rem;margin-bottom:22px} .cleanroom-steps{list-style:none;counter-reset:step;margin:0;padding:0} .cleanroom-steps li{ counter-increment:step;display:grid;grid-template-columns:34px 1fr;gap:4px 14px; padding:14px 0;border-top:1px solid var(--line); } .cleanroom-steps li:last-child{padding-bottom:0} .cleanroom-steps li::before{ content:counter(step,decimal-leading-zero);grid-row:1/3; font:600 11px var(--mono);letter-spacing:.08em;color:var(--accent);padding-top:3px; } .cleanroom-steps b{font-size:.96rem;font-weight:600;letter-spacing:-.01em} .cleanroom-steps span{color:var(--text-3);font-size:.85rem;line-height:1.55} @media (max-width:1080px){ .pledge-grid{grid-template-columns:1fr 1fr} .cleanroom{grid-template-columns:1fr} } @media (max-width:760px){ .guide,.pledge-grid{grid-template-columns:1fr} }