/* ========================================================================== removion.com — site.css The ONE stylesheet for the whole site (see CLAUDE.md → FILE LAYOUT). Everything above "SHARED LAYER" is ported verbatim from the approved design refs/removion-v19-pulse-pro.html — values are exact, do not "improve" them. ========================================================================== */ /* --- DESIGN TOKENS (exact, from the reference) --------------------------- */ :root{--bg:#07060e;--ink:#efedf7;--dim:#837d9c;--pulse:#8f6bff;--hot:#ff5e9c;--cool:#6be0ff;--line:rgba(131,125,156,.18)} *{margin:0;padding:0;box-sizing:border-box} body{background:var(--bg);color:var(--ink);font-family:'Inter Tight',sans-serif;font-weight:300;overflow-x:hidden;line-height:1.68} /* --- BACKGROUND LAYERS --------------------------------------------------- #gl + .fadeb exist on index.html only (pulse.js). Inner pages set .bg-static on for the cheap CSS-only equivalent. */ #gl{position:fixed;inset:0;z-index:0} .fadeb{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(7,6,14,.45),transparent 22%,transparent 68%,var(--bg))} .content{position:relative;z-index:2} .mono{font-family:'Space Mono',monospace} a:focus-visible,button:focus-visible{outline:2px solid var(--pulse);outline-offset:3px} /* --- NAV ----------------------------------------------------------------- */ nav{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center; padding:1.15rem clamp(1.2rem,5vw,4rem);border-bottom:1px solid var(--line);background:rgba(7,6,14,.75);backdrop-filter:blur(12px)} .brand{display:flex;align-items:center;gap:.65rem;font-weight:800;font-size:.92rem;letter-spacing:.2em;color:var(--ink);text-decoration:none} .brand-mark{width:28px;height:28px;display:block} .nav a{color:var(--dim);text-decoration:none;font-family:'Space Mono',monospace;font-size:.72rem;margin-left:2rem;transition:.25s} .nav a:hover{color:var(--hot)} .nav a::before{content:"~ ";color:var(--pulse)} @media(max-width:740px){.nav{display:none}} /* --- HERO ---------------------------------------------------------------- */ .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:7rem clamp(1.2rem,6vw,6rem) 4rem;max-width:1080px} .freq{font-family:'Space Mono',monospace;font-size:.7rem;color:var(--pulse);margin-bottom:1.6rem;letter-spacing:.1em} h1{font-weight:800;font-size:clamp(2.4rem,6.8vw,5.2rem);line-height:1.03;letter-spacing:-.03em;max-width:16ch} h1 span{color:var(--pulse)} h1 .hotc{color:var(--hot)} .hero p{margin-top:1.6rem;max-width:54ch;color:var(--dim);font-weight:500;font-size:clamp(.95rem,1.4vw,1.08rem)} /* --- BUTTONS ------------------------------------------------------------- */ .cta-row{display:flex;gap:1rem;margin-top:2.5rem;flex-wrap:wrap} .btn{font-family:'Space Mono',monospace;font-weight:700;font-size:.8rem;padding:.95rem 1.8rem;border-radius:8px;text-decoration:none;transition:.25s} .btn-a{background:var(--pulse);color:#0d0820;box-shadow:0 10px 32px rgba(143,107,255,.32)} .btn-a:hover{background:#a68aff;transform:translateY(-2px)} .btn-b{border:1px solid var(--line);color:var(--ink)} .btn-b:hover{border-color:var(--hot);color:var(--hot)} /* --- SECTIONS ------------------------------------------------------------ */ section{padding:clamp(4rem,9vw,7.5rem) clamp(1.2rem,6vw,6rem);max-width:1200px;margin:0 auto} .eyeb{font-family:'Space Mono',monospace;font-size:.7rem;color:var(--pulse);margin-bottom:1.2rem;letter-spacing:.1em} h2{font-weight:800;font-size:clamp(1.6rem,3.7vw,2.6rem);letter-spacing:-.02em;line-height:1.14} .sec-head p{color:var(--dim);font-weight:500;margin-top:1rem;max-width:62ch} /* --- PRODUCT CARDS ------------------------------------------------------- */ .waves{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;margin-top:2.9rem} .wavec{border:1px solid var(--line);border-radius:16px;padding:2rem 1.8rem;background:rgba(13,11,24,.65);transition:.3s;position:relative;overflow:hidden} .wavec::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--wc),transparent)} .wavec:hover{transform:translateY(-5px);border-color:var(--wc);box-shadow:0 22px 48px rgba(0,0,0,.45)} .wavec .st{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.12em;color:var(--wc)} .wavec h3{font-weight:800;font-size:1.3rem;margin-top:.7rem;letter-spacing:-.01em} .wavec p{color:var(--dim);font-weight:500;font-size:.9rem;margin-top:.6rem} .w-pulse{--wc:var(--pulse)} .w-hot{--wc:var(--hot)} .w-cool{--wc:var(--cool)} /* --- BAND GRID ----------------------------------------------------------- */ .band{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line); border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:2.8rem} .bcell{background:#0c0a18;padding:1.15rem 1.25rem;transition:.2s} .bcell:hover{background:#151228} .bcell b{font-weight:700;font-size:.88rem;display:block} .bcell span{font-family:'Space Mono',monospace;font-size:.64rem;color:var(--dim)} /* --- SOURCE PANEL -------------------------------------------------------- */ .source{border:1px solid var(--line);border-radius:18px;background:rgba(13,11,24,.65);padding:clamp(2.2rem,5vw,3.6rem);position:relative} .source::before{content:attr(data-label);position:absolute;top:-1px;left:2rem;font-family:'Space Mono',monospace; font-size:.58rem;letter-spacing:.24em;color:var(--hot);background:var(--bg);padding:0 .7rem;transform:translateY(-50%)} .source p{color:var(--dim);font-weight:500;margin-top:1.2rem;max-width:66ch} .freqs{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem} .freqs span{font-family:'Space Mono',monospace;font-size:.66rem;border:1px solid var(--line);border-radius:6px;padding:.5rem .95rem;color:var(--ink)} /* --- REVEAL -------------------------------------------------------------- */ /* --- REVEAL — visible by default, hidden ONLY while JS animates --------- The starting state is scoped to .js-reveal, which assets/js/site.js adds to as its first action. Without that class every .reveal element is fully visible, so a JS failure, a blocked script or a visitor with JavaScript disabled sees the whole page rather than an empty one. Do not move opacity:0 back onto bare .reveal. */ .js-reveal .reveal{opacity:0;transform:translateY(22px)} /* The transition lives on .in, NOT on the hidden state. If it sat on the hidden state, adding .js-reveal would animate already-painted content from opacity 1 down to 0 — a visible fade to blank on any page where site.js runs after first paint (index.html does, behind the Three.js download). Here the hidden state is applied instantly and only the reveal animates. */ .js-reveal .reveal.in{opacity:1;transform:none;transition:.85s ease} /* ========================================================================== SHARED LAYER — additions beyond the reference. Required by CLAUDE.md (statutory footer) and by the mobile-nav brief. Uses only the tokens above. No new colours, no new fonts. ========================================================================== */ /* --- Skip link ----------------------------------------------------------- */ .skip{position:absolute;left:-9999px;top:0;z-index:60;font-family:'Space Mono',monospace;font-size:.72rem; background:var(--pulse);color:#0d0820;padding:.7rem 1.1rem;border-radius:0 0 8px 0;text-decoration:none} .skip:focus{left:0} /* --- Static background for inner pages (no Three.js, no canvas) ---------- */ body.bg-static{background: radial-gradient(1100px 620px at 50% -12%,rgba(143,107,255,.16),transparent 62%), radial-gradient(860px 560px at 88% 14%,rgba(255,94,156,.09),transparent 60%), radial-gradient(760px 560px at 6% 66%,rgba(107,224,255,.07),transparent 60%), var(--bg);background-attachment:fixed;background-repeat:no-repeat} /* --- Hamburger ----------------------------------------------------------- */ .navtoggle{display:none;width:42px;height:42px;align-items:center;justify-content:center; background:transparent;border:1px solid var(--line);border-radius:8px;cursor:pointer;transition:.25s; position:relative} /* The button stays 42x42 visually. This invisible overlay extends the touch target to 44x44 so it meets the minimum without altering the design. */ .navtoggle::after{content:"";position:absolute;top:-1px;left:-1px;width:44px;height:44px} .navtoggle:hover{border-color:var(--hot)} .navtoggle .bars,.navtoggle .bars::before,.navtoggle .bars::after{content:"";display:block;width:17px;height:1.5px; background:var(--ink);border-radius:2px;transition:.25s} .navtoggle .bars{position:relative} .navtoggle .bars::before{position:absolute;top:-6px} .navtoggle .bars::after{position:absolute;top:6px} .navtoggle[aria-expanded="true"] .bars{background:transparent} .navtoggle[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg);background:var(--hot)} .navtoggle[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg);background:var(--hot)} @media(max-width:740px){.navtoggle{display:flex}} /* --- Full-screen overlay menu -------------------------------------------- z-index 9 keeps the overlay ABOVE page content (z-index 2) but BELOW the fixed nav bar (z-index 10), so the toggle stays visible as an X while the menu is open. At z-index 20 the overlay covered its own close button, and a touch user with no Escape key had no way out but to follow a link. */ .navmenu{position:fixed;inset:0;z-index:9;display:flex;flex-direction:column;justify-content:center; padding:6rem clamp(1.2rem,6vw,4rem) 4rem;background:rgba(7,6,14,.97);backdrop-filter:blur(14px); opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s} /* visibility flips INSTANTLY on open (0s, no delay) so the first link can take focus in the same tick; on close it is delayed until the fade has finished, which keeps the links out of the tab order while the overlay is shut. Transitioning visibility itself would leave it computed as "hidden" at the moment openMenu() calls focus(), and a hidden element refuses focus. */ .navmenu.open{opacity:1;visibility:visible;transition:opacity .28s ease,visibility 0s} .navmenu a{display:block;color:var(--ink);text-decoration:none;font-family:'Space Mono',monospace; font-size:1.15rem;padding:.85rem 0;border-bottom:1px solid var(--line); /* NOT the "transition:.25s" shorthand: that transitions ALL properties, including the visibility these links inherit from .navmenu, leaving them computed as hidden — and unfocusable — for 250ms after the overlay opens. */ transition:color .25s ease,padding-left .25s ease} .navmenu a::before{content:"~ ";color:var(--pulse)} .navmenu a:hover,.navmenu a:focus-visible{color:var(--hot);padding-left:.5rem} .navmenu .navmenu-foot{margin-top:2.2rem;font-family:'Space Mono',monospace;font-size:.66rem;color:var(--dim);letter-spacing:.08em} body.nav-open{overflow:hidden} /* --- Footer (statutory — CLAUDE.md HARD RULE 4) -------------------------- */ footer{position:relative;z-index:2;border-top:1px solid var(--line);padding:2.3rem clamp(1.2rem,6vw,6rem); color:var(--dim);font-family:'Space Mono',monospace;font-size:.7rem;background:var(--bg);line-height:2} footer b{color:var(--ink);letter-spacing:.24em} footer p{margin:0} footer a{color:var(--dim);text-decoration:none;transition:.25s;border-bottom:1px solid transparent} footer a:hover{color:var(--hot);border-bottom-color:var(--hot)} .foot-legal{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line)} /* ========================================================================== PAGE COMPONENTS — built on the reference primitives above. Tokens only: no new colours, no new fonts. ========================================================================== */ /* --- inner-page top spacing (clears the fixed nav) ----------------------- */ .page-top{padding-top:calc(clamp(4rem,9vw,7.5rem) + 3.4rem)} .lede{color:var(--dim);font-weight:500;margin-top:1rem;max-width:62ch} /* --- page title: an h1 that LOOKS like an h2 ----------------------------- Every page needs exactly one h1 for document structure, but only the home page and the 404 page carry hero-scale type. This class gives the inner-page h1 the exact h2 metrics from the reference, so the semantics change and the design does not. */ h1.ptitle{font-weight:800;font-size:clamp(1.6rem,3.7vw,2.6rem);letter-spacing:-.02em; line-height:1.14;max-width:none} /* --- AD SLOT — reusable component ---------------------------------------- SIX slots site-wide is a hard cap (CLAUDE.md HARD RULE 6), and it is a revenue decision, not a design one: * AdSense reviews sites for thin content. A page whose ad-to-content ratio looks high is a common reason for rejection or later restriction, and the whole account carries that risk, not the page. * Revenue per visit comes from a small number of well-placed units on pages people actually read. Stacking more units on the same traffic splits the same demand across more impressions and lowers CPM — it does not add income, it dilutes it. * Ads on policy pages (privacy, terms, refund, legal) and on contact read as untrustworthy exactly where a visitor is checking whether the company is legitimate. Those pages carry ZERO, permanently. So: six units on real-content pages, none anywhere else. Adding a seventh requires asking first (HARD RULE 7). Reserved min-height keeps the layout from shifting when an ad loads. */ .ads{padding-top:clamp(1rem,3vw,2rem);padding-bottom:clamp(1rem,3vw,2rem)} .ad-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem; border:1px solid var(--line);border-radius:14px;background:#0c0a18;padding:1rem;overflow:hidden; /* Fallback reserve. The size modifiers below set the real heights; this only guarantees that a slot added WITHOUT a modifier still holds space open, so a future unit cannot shift the page as it loads. It is the smaller of the two modifier values, so it never overrides them. */ min-height:130px} .ad-slot::before{content:"advertisement";font-family:'Space Mono',monospace;font-size:.58rem; letter-spacing:.24em;color:var(--dim)} .ad-leaderboard{min-height:130px} .ad-inline{min-height:290px} .ad-slot>*{width:100%;max-width:100%} /* --- product cards as links --------------------------------------------- */ a.wavec{display:block;text-decoration:none;color:inherit} .wavec .visit{display:inline-block;margin-top:1.15rem;font-family:'Space Mono',monospace;font-size:.7rem; color:var(--wc);text-decoration:none;border-bottom:1px solid transparent;transition:.25s} .wavec .visit:hover,.wavec .visit:focus-visible{border-bottom-color:var(--wc)} .wavec .visit::after{content:" \2197"} /* "coming soon" points inward at our own /soon/ page, not outward. The arrow lives in CSS so the JS label stays plain text. */ .wavec .visit.is-soon::after{content:" \2192"} /* --- richer band cells (services, what-we-build) ------------------------- */ .band-rich .bcell{padding:1.75rem 1.5rem} .bcell p{color:var(--dim);font-weight:500;font-size:.86rem;margin-top:.55rem} /* --- numbered steps ------------------------------------------------------ */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4rem;margin-top:2.6rem} .step{border:1px solid var(--line);border-radius:14px;background:rgba(13,11,24,.65);padding:1.6rem 1.5rem} .step .n{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.14em;color:var(--pulse)} .step h3{font-weight:800;font-size:1.05rem;margin-top:.6rem;letter-spacing:-.01em} .step p{color:var(--dim);font-weight:500;font-size:.88rem;margin-top:.5rem} /* --- pull quote ---------------------------------------------------------- */ .pullq{border:1px solid var(--line);border-left:3px solid var(--pulse);border-radius:14px; background:rgba(13,11,24,.65);padding:clamp(1.6rem,4vw,2.4rem);margin-top:2.6rem} .pullq p{font-weight:800;font-size:clamp(1.15rem,2.6vw,1.75rem);letter-spacing:-.02em;line-height:1.24; color:var(--ink);max-width:28ch} .pullq span{display:block;margin-top:.95rem;font-family:'Space Mono',monospace;font-size:.64rem; letter-spacing:.14em;color:var(--dim)} /* --- the mark, shown ----------------------------------------------------- */ .markshow{display:flex;align-items:center;gap:1.7rem;flex-wrap:wrap;border:1px solid var(--line); border-radius:16px;background:rgba(13,11,24,.65);padding:1.9rem 1.8rem;margin-top:2.4rem} .markshow img{width:86px;height:86px;flex:none} .markshow p{color:var(--dim);font-weight:500;max-width:54ch;margin:0} /* --- contact ------------------------------------------------------------- */ .contact-grid{display:grid; /* min() guard: a bare minmax(310px,1fr) cannot shrink below 310px, so at a 320px viewport the track was wider than the 281px content box and the page scrolled sideways by 9px. Identical rendering wherever 310px fits. */ grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));gap:1.4rem; margin-top:2.6rem;align-items:start} .ccard{border:1px solid var(--line);border-radius:16px;background:rgba(13,11,24,.65);padding:2rem 1.8rem} .ccard h3{font-weight:800;font-size:1.15rem;letter-spacing:-.01em} .ccard p{color:var(--dim);font-weight:500;font-size:.9rem;margin-top:.75rem} .ccard .big{font-family:'Space Mono',monospace;font-size:1rem;color:var(--pulse);text-decoration:none; border-bottom:1px solid transparent;transition:.25s;display:inline-block;margin-top:.5rem} .ccard .big:hover{color:var(--hot);border-bottom-color:var(--hot)} .ccard .label{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.14em;color:var(--dim); margin-top:1.4rem;display:block} .field{display:block;margin-top:1.15rem} .field>span{display:block;font-family:'Space Mono',monospace;font-size:.64rem;letter-spacing:.14em; color:var(--dim);margin-bottom:.45rem} .field input,.field textarea{width:100%;background:#0c0a18;border:1px solid var(--line);border-radius:8px; color:var(--ink);font-family:'Inter Tight',sans-serif;font-weight:300;font-size:.95rem; padding:.75rem .9rem;transition:.25s} .field textarea{min-height:132px;resize:vertical;line-height:1.6} .field input:focus,.field textarea:focus{border-color:var(--pulse)} .field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--pulse);outline-offset:2px} .field input::placeholder,.field textarea::placeholder{color:var(--dim);opacity:.55} button.btn{border:none;cursor:pointer;font:inherit;font-family:'Space Mono',monospace;font-weight:700;font-size:.8rem} .form-note{font-family:'Space Mono',monospace;font-size:.63rem;color:var(--dim);margin-top:1.1rem;line-height:1.85} /* --- long-form legal prose ----------------------------------------------- */ .prose{max-width:74ch} .prose h3{font-weight:800;font-size:1.12rem;letter-spacing:-.01em;margin-top:2.5rem;color:var(--ink)} .prose h3:first-of-type{margin-top:1.9rem} .prose p{color:var(--dim);font-weight:500;margin-top:.9rem} .prose ul{margin:.9rem 0 0 1.15rem;color:var(--dim);font-weight:500} .prose li{margin-top:.5rem} .prose a{color:var(--pulse);text-decoration:none;border-bottom:1px solid transparent;transition:.25s} .prose a:hover{color:var(--hot);border-bottom-color:var(--hot)} .prose strong{color:var(--ink);font-weight:600} .updated{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.14em;color:var(--dim);margin-top:1.3rem} /* --- company fact rows --------------------------------------------------- */ .facts{margin-top:2.5rem;border:1px solid var(--line);border-radius:14px;overflow:hidden} .frow{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:1rem;padding:1.1rem 1.3rem; background:#0c0a18;border-bottom:1px solid var(--line)} .frow:last-child{border-bottom:none} .frow dt{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.14em;color:var(--dim);padding-top:.2rem} .frow dd{margin:0;color:var(--ink);font-weight:500;font-size:.92rem;line-height:1.7} @media(max-width:620px){.frow{grid-template-columns:1fr;gap:.4rem}} /* --- 404 ----------------------------------------------------------------- */ .nf{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:7rem clamp(1.2rem,6vw,6rem) 4rem} .nf img{width:96px;height:96px;margin-bottom:2.1rem} .nf h1{max-width:none} .nf p{color:var(--dim);font-weight:500;margin-top:1.3rem;max-width:46ch} .nf .cta-row{justify-content:center} /* --- /soon/ coming-soon pages ------------------------------------------- Per-product accent. The brand tokens above are UNCHANGED: --accent is a page-scoped variable used only on /soon/ pages, and only for the status chip and the one-line summary. Three of the five reuse existing brand tokens; Chaslee and Funnzoo use the accents already established for their standalone sites under sites/. */ .p-fylengine{--accent:var(--cool)} .p-neuralimo{--accent:var(--pulse)} .p-fuselee{--accent:var(--hot)} .p-chaslee{--accent:#5fe3b4} .p-funnzoo{--accent:#ffb454} .chip{display:inline-block;margin-bottom:1.1rem;font-family:'Space Mono',monospace;font-size:.62rem; letter-spacing:.18em;color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem} .line-accent{color:var(--accent);font-weight:600;font-size:clamp(1.02rem,2.4vw,1.25rem); margin-top:1rem;letter-spacing:-.01em} .p-fylengine .ccard .big,.p-neuralimo .ccard .big,.p-fuselee .ccard .big, .p-chaslee .ccard .big,.p-funnzoo .ccard .big{color:var(--accent)} .ccard h2{font-weight:800;font-size:1.15rem;letter-spacing:-.01em} /* --- REDUCED MOTION (complete block, ported + extended for the new UI) --- */ @media(prefers-reduced-motion:reduce){ .reveal,.js-reveal .reveal{opacity:1;transform:none;transition:none} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} .btn-a:hover{transform:none} .wavec:hover{transform:none} .navmenu{transition:none} }