/* ===== Ruya Labs — assembled site ===== */ :root { --display: "Helvetica Neue", Helvetica, Arial, sans-serif; --condensed: "Archivo", "Helvetica Neue", Arial, sans-serif; --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --edge: 40px; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--display); -webkit-font-smoothing: antialiased; overflow: hidden; background: #1a1a1a; } /* theme tokens driven by data-theme on */ body[data-theme="dark"] { --hi: #cfcfcf; --hid: #8c8c8c; --frame: rgba(255,255,255,0.6); } body[data-theme="light"] { --hi: #1a1a1a; --hid: #4a4a4a; --frame: rgba(0,0,0,0.5); } body[data-theme="yellow"] { --hi: #1a1a1a; --hid: #4a4220; --frame: rgba(0,0,0,0.5); } body[data-theme="sand"] { --hi: #241f14; --hid: #6a5f44; --frame: rgba(0,0,0,0.42); } /* ===== scroller / sections ===== */ .scroller { height: 100vh; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: #555 transparent; } .scroller::-webkit-scrollbar { width: 8px; } .scroller::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; } .sec { position: relative; height: 100vh; width: 100vw; overflow: hidden; } #s-hero, #s-grid, #s-footer { background: #1a1a1a; } #s-fork { background: #c9c9c9; } #s-research { background: #e7ddc9; } #s-footer { background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 23px 23px; background-color: #1a1a1a; } .fig { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* ===== fixed chrome ===== */ header { position: fixed; inset: 0 0 auto 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 30px var(--edge); color: var(--hi); transition: color .35s ease; } .logo { display: flex; align-items: center; gap: 11px; color: var(--hi); text-decoration: none; transition: color .35s ease; } .logo svg { width: 26px; height: 26px; display: block; } .logo .wordmark { font-family: var(--mono); font-weight: 700; font-size: 11px; line-height: 1.05; letter-spacing: .04em; } header nav { display: flex; flex-direction: row; gap: 26px; align-items: center; font-size: 19px; color: var(--hid); text-transform: uppercase; justify-self: center; transition: color .35s ease; } header nav a { color: inherit; text-decoration: none; transition: color .2s ease; width: max-content; } header nav a:hover { color: var(--hi); } header nav a.active { color: var(--hi); text-decoration: underline; text-underline-offset: 3px; } .gofast { justify-self: end; font-size: 19px; text-transform: uppercase; color: var(--hi); text-decoration: none; transition: color .35s ease; } #grain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; } body[data-theme="dark"] #grain { mix-blend-mode: screen; opacity: .8; } body[data-theme="light"] #grain { mix-blend-mode: multiply; opacity: .5; } body[data-theme="yellow"] #grain { mix-blend-mode: multiply; opacity: .28; } body[data-theme="sand"] #grain { mix-blend-mode: multiply; opacity: .30; } /* ===== transition: static burst + inset frame ===== */ #transition { position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0; } #staticBurst { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; } .insetframe { position: absolute; inset: 13px; border: 1px solid var(--frame); border-radius: 16px; opacity: 0; } /* ===== hero ===== */ .hero-center { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .hero-h1 { font-family: var(--display); font-weight: 400; font-size: clamp(60px, 13vw, 190px); line-height: .92; letter-spacing: -0.02em; color: #d7d7d7; } .hero-sub { margin-top: 26px; font-family: var(--mono); font-size: 13px; line-height: 1.45; letter-spacing: .02em; color: #8c8c8c; text-transform: uppercase; } .crosshair { position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%); z-index: 3; color: #8c8c8c; font-family: var(--mono); font-size: 20px; } /* ===== grid well ===== */ #well { position: absolute; left: 50%; top: 11%; transform: translateX(-50%); width: min(78vw, 980px); height: 56vh; z-index: 2; } .grid-headline { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); width: 92%; text-align: center; font-family: var(--display); font-weight: 400; font-size: clamp(40px, 7.4vw, 108px); line-height: .95; letter-spacing: -0.01em; color: #d3d3d3; text-transform: uppercase; text-wrap: balance; z-index: 4; } /* ===== hardware fork ===== */ #ribbon { position: absolute; left: -3%; top: -4%; width: 42%; height: 56%; z-index: 2; } .fork-row { position: absolute; left: var(--edge); right: var(--edge); top: 50%; z-index: 4; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr); column-gap: 56px; align-items: start; color: #1a1a1a; } .fork-headline { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4.4vw, 64px); line-height: .98; letter-spacing: -0.01em; text-transform: uppercase; } .fork-col { font-family: var(--mono); font-size: 13px; line-height: 1.5; letter-spacing: .01em; text-transform: uppercase; max-width: 30ch; padding-top: 6px; } /* ===== dipole ===== */ #dipole { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; } /* ===== footer ===== */ #terrain { position: absolute; left: 4%; top: 30%; width: 42%; height: 52%; z-index: 2; } .footer-frame { position: absolute; inset: 13px; border: 1px solid rgba(255,255,255,0.55); border-radius: 16px; pointer-events: none; z-index: 5; } .tagline { position: absolute; left: calc(var(--edge) + 8px); top: 12%; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.1vw, 46px); line-height: 1.04; letter-spacing: -0.005em; text-transform: uppercase; color: #cfcfcf; max-width: 40%; z-index: 4; } .navcluster { position: absolute; left: 52%; top: 30%; display: flex; align-items: flex-start; gap: 56px; z-index: 4; } .footnav { display: flex; flex-direction: column; } .footnav a { font-family: var(--display); font-size: clamp(22px, 2.5vw, 34px); line-height: 1.18; color: #8c8c8c; text-transform: uppercase; text-decoration: none; transition: color .2s ease; width: max-content; } .footnav a:hover { color: #cfcfcf; } .footnav a.active { color: #cfcfcf; text-decoration: underline; text-underline-offset: 4px; margin-bottom: .35em; } .gofast-pill { font-family: var(--display); font-size: clamp(18px, 1.9vw, 26px); text-transform: uppercase; color: #cfcfcf; text-decoration: none; border: 1px solid rgba(255,255,255,0.6); border-radius: 999px; padding: 9px 26px; transition: background .2s ease, color .2s ease; white-space: nowrap; } .gofast-pill:hover { background: #cfcfcf; color: #1a1a1a; } .fineprint { position: absolute; bottom: calc(15.5vw + 22px); font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: .03em; text-transform: uppercase; color: #8c8c8c; z-index: 4; } .fineprint.left { left: calc(var(--edge) + 8px); } .fineprint.mid { left: 52%; } .bigmark { position: absolute; left: 18px; right: 18px; bottom: 4px; z-index: 3; display: block; pointer-events: none; } .bigmark text { font-family: var(--condensed); font-weight: 800; fill: #d2d2d2; letter-spacing: -2px; }