/* ============================================================================ CryptoPoS — showcase template stylesheet Self-contained. NO external fonts, CDNs, analytics, or trackers of any kind (the app's no-telemetry guarantee extends to its website). System fonts only. Dark "Terminal Slate" is the default; a light theme is available via [data-theme="light"] on , toggled by the (local, zero-dependency) JS. ============================================================================ */ /* ---- design tokens : dark (default) ---- */ :root { --bg: #0B0E14; --bg-2: #0E121A; --surface: #151B24; --surface-2: #1A212C; --surface-3: #212a37; --border: #28313d; --border-strong: #3a4654; --text: #EAF0F6; --muted: #A2AEBB; --faint: #6A7682; --emerald: #00E676; --emerald-dim: #00b85f; --blue: #4d8dff; --amber: #FFB020; --red: #FF6B6B; --violet: #b08cff; /* rail brand colors */ --btc: #F7931A; --eth: #8E7BD8; --sol: #14F195; --poly: #8247E5; --xmr: #FF6600; --xtr: #E0489D; --xtm: #9B7BD0; --glow: rgba(0,230,118,0.14); --shadow: 0 18px 50px -24px rgba(0,0,0,0.7); --shadow-sm: 0 6px 18px -10px rgba(0,0,0,0.6); --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --maxw: 1120px; --r: 14px; --r-sm: 10px; --hero-glow: radial-gradient(1200px 620px at 50% -8%, #16263a 0%, rgba(11,14,20,0) 58%); --ease: cubic-bezier(.22,.61,.36,1); } /* ---- design tokens : light ---- */ [data-theme="light"] { --bg: #F6F8FB; --bg-2: #EEF2F7; --surface: #FFFFFF; --surface-2: #F3F6FA; --surface-3: #E9EEF4; --border: #DDE5EE; --border-strong: #C3CEDB; --text: #0C1320; --muted: #51606F; --faint: #8593A2; --emerald: #00955A; --emerald-dim: #007a4a; --blue: #1f6fed; --amber: #B5760A; --red: #D6453F; --violet: #6a45c8; --eth: #6a55c0; --xtm: #7a5bbb; --glow: rgba(0,149,90,0.12); --shadow: 0 18px 44px -26px rgba(20,40,70,0.30); --shadow-sm: 0 8px 20px -14px rgba(20,40,70,0.28); --hero-glow: radial-gradient(1200px 620px at 50% -8%, #dceaff 0%, rgba(246,248,251,0) 60%); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body::before { /* fixed hero glow that lives behind everything */ content: ""; position: fixed; inset: 0; z-index: -1; background: var(--hero-glow); pointer-events: none; } a { color: var(--emerald); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .mono { font-family: var(--mono); } /* ---- scroll progress bar ---- */ .progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--emerald), var(--blue)); z-index: 100; transition: width .08s linear; box-shadow: 0 0 12px var(--glow); } /* ---- top nav ---- */ .nav { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border); } .nav .wrap { display: flex; align-items: center; gap: 18px; height: 60px; } .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -0.3px; font-size: 18px; color: var(--text); } .brand .mark { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(140deg, var(--emerald), var(--emerald-dim)); color: #06120A; font-size: 15px; font-weight: 900; box-shadow: 0 0 16px var(--glow); } .brand .dot { color: var(--emerald); } .nav .links { display: flex; gap: 4px; margin-left: auto; align-items: center; } .nav .links a { color: var(--muted); font-size: 13.5px; font-weight: 600; padding: 7px 11px; border-radius: 8px; } .nav .links a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; } .nav .links a.cta { color: var(--emerald); border: 1px solid color-mix(in srgb, var(--emerald) 40%, transparent); } .nav .links a.cta:hover { background: var(--glow); } .theme-toggle { margin-left: 6px; width: 36px; height: 36px; border-radius: 9px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); display: grid; place-items: center; font-size: 16px; transition: .2s var(--ease); } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); } .nav-burger { display: none; } @media (max-width: 860px) { .nav .links { display: none; } } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 11px; border: 1px solid var(--border-strong); cursor: pointer; transition: transform .15s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); font-family: inherit; color: var(--text); background: transparent; } .btn:hover { transform: translateY(-2px); text-decoration: none; } .btn.primary { background: linear-gradient(140deg, var(--emerald), var(--emerald-dim)); color: #06120A; border-color: transparent; box-shadow: 0 10px 30px -12px var(--glow); } .btn.primary:hover { box-shadow: 0 14px 36px -10px var(--glow); } .btn.ghost { background: var(--surface); color: var(--text); } .btn.ghost:hover { background: var(--surface-2); } /* ---- hero ---- */ .hero { padding: 96px 0 70px; text-align: center; position: relative; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--emerald); border: 1px solid color-mix(in srgb, var(--emerald) 32%, transparent); border-radius: 999px; padding: 6px 14px; margin-bottom: 26px; background: var(--glow); } .eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 0 var(--emerald); animation: pulse 2.4s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,230,118,.5);} 70%{box-shadow:0 0 0 8px rgba(0,230,118,0);} 100%{box-shadow:0 0 0 0 rgba(0,230,118,0);} } .hero h1 { font-size: clamp(36px, 6.4vw, 64px); line-height: 1.04; margin: 0 0 20px; letter-spacing: -1.8px; font-weight: 820; } .hero h1 .accent { color: var(--emerald); position: relative; white-space: nowrap; } .hero h1 .accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 10px; background: var(--glow); border-radius: 6px; z-index: -1; } .hero .tagline { font-size: clamp(17px, 2.4vw, 21px); color: var(--muted); max-width: 720px; margin: 0 auto 32px; } .hero .tagline b { color: var(--text); } .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* claim chips */ .claims { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 44px; } .claim { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 20px; max-width: 340px; text-align: left; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .claim::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; } .claim.cheaper::before { background: var(--blue); } .claim.safer::before { background: var(--emerald); } .claim .h { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; margin-bottom: 4px; } .claim.cheaper .h { color: var(--blue); } .claim.safer .h { color: var(--emerald); } .claim p { margin: 0; font-size: 14px; color: var(--muted); } /* hero stat strip */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 52px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; } .stat { background: var(--surface); padding: 22px 16px; text-align: center; } .stat .num { font-family: var(--mono); font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: var(--text); letter-spacing: -0.5px; } .stat .num .u { color: var(--emerald); } .stat .lab { font-size: 12.5px; color: var(--muted); margin-top: 4px; letter-spacing: .3px; } @media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } } /* ---- generic section ---- */ section { padding: 76px 0; border-top: 1px solid var(--border); position: relative; } .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 8px; } .kicker::before { content: ""; width: 18px; height: 1px; background: var(--blue); } section > .wrap > h2 { font-size: clamp(26px, 4vw, 38px); letter-spacing: -1px; margin: 0 0 12px; font-weight: 800; line-height: 1.1; } .lede { font-size: 18px; color: var(--muted); max-width: 760px; margin: 0 0 36px; } .lede b { color: var(--text); } /* ---- scroll-reveal ---- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================================ WALKTHROUGH — interactive cashier-loop stepper + phone mock ============================================================================ */ .walk { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: start; } @media (max-width: 880px) { .walk { grid-template-columns: 1fr; gap: 30px; } } .steps { display: flex; flex-direction: column; gap: 10px; } .step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: .25s var(--ease); text-align: left; font-family: inherit; color: inherit; width: 100%; } .step:hover { border-color: var(--border-strong); } .step .n { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 16px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); transition: .25s var(--ease); } .step .t { font-weight: 700; font-size: 16px; color: var(--text); } .step .d { font-size: 14px; color: var(--muted); margin-top: 3px; display: none; } .step.active { border-color: color-mix(in srgb, var(--emerald) 55%, transparent); background: var(--surface-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--emerald) 30%, transparent), var(--shadow-sm); } .step.active .n { background: linear-gradient(140deg, var(--emerald), var(--emerald-dim)); color: #06120A; border-color: transparent; } .step.active .d { display: block; } .walk-controls { display: flex; gap: 10px; margin-top: 16px; align-items: center; } .walk-controls .auto { margin-left: auto; font-size: 13px; color: var(--faint); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } .walk-controls .auto .led { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); } .walk-controls .auto.on .led { background: var(--emerald); box-shadow: 0 0 8px var(--emerald); } /* phone mock */ .phone-wrap { display: flex; justify-content: center; position: sticky; top: 86px; } .phone { width: 300px; border-radius: 38px; padding: 12px; background: linear-gradient(160deg, #20262f, #11151c); border: 1px solid var(--border-strong); box-shadow: var(--shadow); position: relative; } [data-theme="light"] .phone { background: linear-gradient(160deg, #cdd6e2, #aab6c6); } .phone .notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 92px; height: 7px; border-radius: 4px; background: rgba(0,0,0,.45); z-index: 3; } .screen { background: #0B0E14; border-radius: 28px; height: 560px; overflow: hidden; position: relative; color: #EAF0F6; font-size: 14px; display: flex; flex-direction: column; } .screen .bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; font-family: var(--mono); font-size: 11px; color: #8a96a2; } .screen .pill { font-family: var(--mono); font-size: 10.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid #2979ff66; color: #4d8dff; } .screen .body { flex: 1; padding: 8px 18px 18px; display: flex; flex-direction: column; min-height: 0; } .screen .stage { display: none; flex: 1; flex-direction: column; animation: fade .45s var(--ease); } .screen .stage.show { display: flex; } @keyframes fade { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform:none;} } .sc-h { font-size: 12px; color: #8a96a2; letter-spacing: .4px; text-transform: uppercase; margin-bottom: 8px; } .sc-total { font-family: var(--mono); font-size: 40px; font-weight: 700; letter-spacing: -1px; } .sc-total .c { color: #00E676; } .sc-line { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 13px; color: #b9c4d0; padding: 5px 0; border-bottom: 1px solid #1c2330; } .sc-line.sub { color: #8a96a2; font-size: 12px; } .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; } .keypad span { background: #161d27; border: 1px solid #232c39; border-radius: 10px; text-align: center; padding: 11px 0; font-family: var(--mono); font-size: 17px; color: #cdd8e3; } .rail-opts { display: grid; gap: 8px; margin-top: 6px; } .rail-opt { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px; border: 1px solid #232c39; background: #131a23; } .rail-opt .glyph { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; font-family: var(--mono); color: #06120A; } .rail-opt b { font-size: 13.5px; } .rail-opt .sub { font-size: 11px; color: #8a96a2; } .rail-opt.sel { border-color: #00E67688; box-shadow: 0 0 0 1px #00E67644; } .qr { width: 168px; height: 168px; margin: 14px auto 10px; border-radius: 14px; background: #fff; padding: 12px; } .qr svg { width: 100%; height: 100%; display: block; } .sc-mid { margin: auto 0; text-align: center; } .sc-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-family: var(--mono); font-size: 13px; font-weight: 700; } .sc-badge.live { color: #FFB020; border: 1px solid #FFB02055; background: #FFB0200f; } .sc-badge.ok { color: #00E676; border: 1px solid #00E67655; background: #00E6760f; } .spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #FFB02055; border-top-color: #FFB020; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg);} } .tick { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; border: 2px solid #00E676; display: grid; place-items: center; color: #00E676; font-size: 30px; box-shadow: 0 0 24px #00E67633; } .receipt-line { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; padding: 4px 0; color: #b9c4d0; } .receipt-line .k { color: #8a96a2; } /* ============================================================================ FEATURES — extensive categorized outline ============================================================================ */ .feat-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; } .feat-tab { font-family: var(--mono); font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; transition: .2s var(--ease); } .feat-tab:hover { border-color: var(--border-strong); color: var(--text); } .feat-tab.active { background: var(--text); color: var(--bg); border-color: var(--text); } .feat-group { display: none; } .feat-group.show { display: block; animation: fade .4s var(--ease); } .feat-group > .head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; } .feat-group > .head h3 { font-size: 21px; margin: 0; letter-spacing: -.4px; } .feat-group > .head .count { font-family: var(--mono); font-size: 12.5px; color: var(--faint); } .feat-group > .blurb { color: var(--muted); font-size: 15px; margin: 0 0 22px; max-width: 720px; } .feat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; } .feat { display: grid; grid-template-columns: 26px 1fr; gap: 13px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); transition: .2s var(--ease); } .feat:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .feat .ic { color: var(--emerald); font-size: 17px; line-height: 1.4; } .feat .ft { font-weight: 700; font-size: 15px; margin-bottom: 2px; } .feat .fd { font-size: 13.5px; color: var(--muted); } .feat .fd code { font-family: var(--mono); font-size: 12px; color: var(--text); background: var(--surface-2); padding: 1px 6px; border-radius: 5px; } .feat .badge { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; margin-left: 6px; vertical-align: middle; border: 1px solid var(--border-strong); color: var(--faint); } .feat .badge.real { color: var(--emerald); border-color: color-mix(in srgb, var(--emerald) 40%, transparent); } .feat .badge.enf { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 40%, transparent); } /* ============================================================================ RAILS — interactive tabs ============================================================================ */ .rail-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .rail-chip { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: .2s var(--ease); font-family: inherit; color: var(--muted); font-weight: 600; font-size: 14px; } .rail-chip .glyph { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; font-family: var(--mono); color: #06120A; background: var(--rc); } .rail-chip:hover { border-color: var(--border-strong); color: var(--text); } .rail-chip.active { color: var(--text); border-color: var(--rc); box-shadow: 0 0 0 1px var(--rc), var(--shadow-sm); background: var(--surface-2); } .rail-panel { display: none; } .rail-panel.show { display: block; animation: fade .4s var(--ease); } .rail-card { border: 1px solid var(--border); border-left: 4px solid var(--rc); border-radius: var(--r); background: var(--surface); padding: 26px 28px; box-shadow: var(--shadow-sm); } .rail-card .top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .rail-card h3 { margin: 0; font-size: 24px; letter-spacing: -.5px; } .rail-card .tok { font-family: var(--mono); font-size: 13px; color: var(--rc); font-weight: 700; padding: 3px 10px; border: 1px solid var(--rc); border-radius: 999px; } .rail-card .tags { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .rail-card .tag { font-family: var(--mono); font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--muted); } .rail-card .tag.real { color: var(--emerald); border-color: color-mix(in srgb, var(--emerald) 40%, transparent); } .rail-card .tag.model { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 40%, transparent); } .rail-card p.desc { color: var(--muted); font-size: 15.5px; margin: 18px 0 0; } .rail-card .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; } @media (max-width: 680px) { .rail-card .row { grid-template-columns: 1fr; } } .rail-card .kv { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 13px 15px; background: var(--bg-2); } .rail-card .kv .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); margin-bottom: 4px; } .rail-card .kv .v { font-size: 14px; color: var(--text); } .rail-card .kv .v code { font-family: var(--mono); font-size: 12.5px; color: var(--emerald); } /* ---- screenshots gallery ---- */ .shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .shot { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: .25s var(--ease); } .shot:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); } .shot img { width: 100%; display: block; background: #000; } .shot .cap { padding: 12px 15px; font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--border); } .shot .cap b { color: var(--text); display: block; font-size: 14px; } /* ---- architecture ascii + diagrams ---- */ .ascii { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--emerald); white-space: pre; margin: 0 0 16px; } [data-theme="light"] .ascii { color: var(--emerald-dim); } .diagram-title { font-weight: 700; margin: 30px 0 12px; font-size: 16px; color: var(--text); display: flex; align-items: center; gap: 10px; } .diagram-title .b { font-family: var(--mono); font-size: 12px; color: #06120A; background: var(--emerald); width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; } .diagram-title:first-child { margin-top: 0; } .diag-img { width: 100%; max-width: 760px; border: 1px solid var(--border); border-radius: var(--r); background: #fff; display: block; margin: 6px 0 4px; } /* ============================================================================ ECONOMICS — interactive fee calculator ============================================================================ */ .calc { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 30px; align-items: stretch; } @media (max-width: 820px) { .calc { grid-template-columns: 1fr; } } .calc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 26px 28px; box-shadow: var(--shadow-sm); } .calc-card h3 { margin: 0 0 4px; font-size: 18px; } .calc-card .sub { font-size: 13.5px; color: var(--muted); margin: 0 0 22px; } .field { margin-bottom: 22px; } .field label { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted); margin-bottom: 8px; } .field label .val { font-family: var(--mono); color: var(--text); font-weight: 700; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 4px; background: var(--surface-3); outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--emerald); cursor: pointer; box-shadow: 0 0 0 4px var(--glow); border: none; } input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--emerald); cursor: pointer; box-shadow: 0 0 0 4px var(--glow); border: none; } .calc-out { display: flex; flex-direction: column; justify-content: center; gap: 18px; } .calc-big { background: linear-gradient(150deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--r); padding: 26px 28px; text-align: center; position: relative; overflow: hidden; } .calc-big::after { content: ""; position: absolute; inset: 0; background: radial-gradient(300px 120px at 50% 0, var(--glow), transparent 70%); pointer-events: none; } .calc-big .lab { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; } .calc-big .money { font-family: var(--mono); font-size: clamp(34px, 6vw, 52px); font-weight: 800; color: var(--emerald); letter-spacing: -1.5px; line-height: 1.1; margin: 6px 0; } .calc-big .per { font-size: 13.5px; color: var(--muted); } .calc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .calc-split .b { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 16px; text-align: center; background: var(--surface); } .calc-split .b .k { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .4px; } .calc-split .b .v { font-family: var(--mono); font-size: 22px; font-weight: 700; margin-top: 4px; } .calc-split .b.cards .v { color: var(--red); } .calc-split .b.crypto .v { color: var(--emerald); } .calc-foot { font-size: 12.5px; color: var(--faint); margin-top: 6px; } .calc-foot code { font-family: var(--mono); color: var(--muted); } /* ---- charter cards ---- */ .grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 22px 24px; transition: .2s var(--ease); } .card:hover { border-color: var(--border-strong); } .card h3 { margin: 0 0 8px; font-size: 17px; display: flex; align-items: center; gap: 9px; } .card h3 .ic { color: var(--emerald); font-size: 18px; } .card p { margin: 0; font-size: 14.5px; color: var(--muted); } .card code, .lede code, p code { font-family: var(--mono); font-size: 13px; color: var(--emerald); background: var(--bg-2); padding: 1px 6px; border-radius: 5px; } /* ---- proofs table ---- */ .tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; overflow: hidden; border-radius: var(--r); border: 1px solid var(--border); } .tbl th, .tbl td { text-align: left; padding: 13px 15px; border-bottom: 1px solid var(--border); } .tbl th { background: var(--surface-2); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); } .tbl td { background: var(--surface); } .tbl tr:hover td { background: var(--surface-2); } .tbl .m { font-family: var(--mono); font-size: 12.5px; color: var(--emerald); } .tbl .net { font-family: var(--mono); font-size: 12px; color: var(--blue); } .tbl tr:last-child td { border-bottom: none; } .note { background: color-mix(in srgb, var(--amber) 8%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); border-radius: var(--r); padding: 17px 21px; color: var(--text); font-size: 14.5px; margin-top: 24px; } .note b { color: var(--amber); } /* ---- code block ---- */ pre.code { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: 20px 22px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.6; color: var(--text); } pre.code .c { color: var(--faint); } pre.code .k { color: var(--emerald); } /* ============================================================================ RESEARCH — the cited finale ============================================================================ */ .research { background: var(--bg-2); } .research-thesis { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.62; color: var(--text); max-width: 920px; margin: 0 0 8px; font-weight: 450; letter-spacing: -.2px; } .research-thesis .cite { font-size: 11px; } .research-thesis .hl { color: var(--emerald); } .research-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 38px; } .rblock { display: grid; grid-template-columns: 220px 1fr; gap: 26px; padding: 26px 0; border-top: 1px solid var(--border); } @media (max-width: 760px) { .rblock { grid-template-columns: 1fr; gap: 12px; } } .rblock .side { position: sticky; top: 86px; align-self: start; } .rblock h3 { font-size: 19px; margin: 0 0 10px; letter-spacing: -.4px; } .rblock .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; margin-top: 8px; } .rblock .stat .v { font-family: var(--mono); font-size: 26px; font-weight: 800; color: var(--emerald); letter-spacing: -.5px; line-height: 1.1; } .rblock .stat .l { font-size: 12.5px; color: var(--muted); margin-top: 4px; } .rblock .body { font-size: 15.5px; color: var(--text); } .rblock .body p { margin: 0 0 14px; color: var(--muted); } .rblock .body strong { color: var(--text); } .cite { font-family: var(--mono); font-size: 11px; vertical-align: super; color: var(--blue); text-decoration: none; padding: 0 1px; } .cite:hover { text-decoration: underline; } .openq { margin-top: 40px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: var(--r); padding: 22px 26px; } .openq h3 { margin: 0 0 12px; font-size: 16px; color: var(--amber); display: flex; align-items: center; gap: 8px; } .openq ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14.5px; } .openq li { margin-bottom: 8px; } .refs { margin-top: 40px; } .refs h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 0 0 16px; font-family: var(--mono); } .refs ol { margin: 0; padding-left: 0; list-style: none; counter-reset: ref; } .refs li { counter-increment: ref; padding: 10px 0 10px 38px; position: relative; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--muted); } .refs li::before { content: "[" counter(ref) "]"; position: absolute; left: 0; font-family: var(--mono); font-size: 12px; color: var(--blue); } .refs li a { color: var(--text); } .refs li .meta { color: var(--faint); font-size: 12.5px; } /* ---- footer ---- */ footer { border-top: 1px solid var(--border); padding: 50px 0 64px; color: var(--faint); font-size: 14px; } footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; margin-bottom: 34px; } @media (max-width: 720px) { footer .top { grid-template-columns: 1fr; gap: 22px; } } footer .col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 0 0 12px; } footer .col a { display: block; color: var(--faint); padding: 4px 0; } footer .col a:hover { color: var(--text); text-decoration: none; } footer .col p { margin: 0 0 8px; } footer .bot { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--border); padding-top: 22px; color: var(--faint); } footer .bot .spacer { margin-left: auto; } footer .badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } footer .badge-row span { font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--border); color: var(--muted); } /* ---- misc reveal helpers, selection ---- */ ::selection { background: color-mix(in srgb, var(--emerald) 30%, transparent); color: var(--text); } .hide-sm { } @media (max-width: 600px) { .hide-sm { display: none; } body { font-size: 16px; } .hero { padding: 60px 0 44px; } section { padding: 56px 0; } } /* ============================================================================ DEV NOTES — the honest Ootle integration story (tag-filterable timeline) ============================================================================ */ :root { --tag-gotcha: var(--amber); --tag-design: var(--blue); --tag-proof: var(--emerald); --tag-security: var(--red); --tag-surprise: var(--violet); } .note-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; } .note-filter { font-family: var(--mono); font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; transition: .2s var(--ease); display: inline-flex; align-items: center; gap: 7px; } .note-filter .swatch { width: 8px; height: 8px; border-radius: 50%; } .note-filter:hover { border-color: var(--border-strong); color: var(--text); } .note-filter.active { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); } .note-list { display: grid; gap: 14px; } .devnote { display: grid; grid-template-columns: 132px 1fr; gap: 22px; padding: 20px 22px; border: 1px solid var(--border); border-left: 3px solid var(--tc, var(--border-strong)); border-radius: var(--r); background: var(--surface); transition: .25s var(--ease); } .devnote:hover { border-color: var(--border-strong); border-left-color: var(--tc); box-shadow: var(--shadow-sm); } .devnote.hidden { display: none; } @media (max-width: 700px) { .devnote { grid-template-columns: 1fr; gap: 10px; } } .devnote .tagcol { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .devnote .tagchip { font-family: var(--mono); font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; color: var(--tc); border: 1px solid var(--tc); background: color-mix(in srgb, var(--tc) 10%, transparent); font-weight: 700; } .devnote h3 { margin: 0 0 7px; font-size: 17px; letter-spacing: -.3px; } .devnote p { margin: 0; font-size: 14.5px; color: var(--muted); } .devnote code { font-family: var(--mono); font-size: 12.5px; color: var(--emerald); background: var(--bg-2); padding: 1px 6px; border-radius: 5px; } /* ============================================================================ CONTRACTS — adoptable smart-contract capabilities (honest status badges) ============================================================================ */ .status-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; font-size: 12.5px; color: var(--muted); } .status-legend .li { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); } .status-legend .li .dot { width: 9px; height: 9px; border-radius: 50%; } .st-proven { color: var(--emerald); } .st-proven-bg { background: var(--emerald); } .st-shipped { color: var(--blue); } .st-shipped-bg { background: var(--blue); } .st-designed { color: var(--amber); } .st-designed-bg { background: var(--amber); } .st-deferred { color: var(--faint); } .st-deferred-bg { background: var(--faint); } .contract-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; } .contract { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: 22px 24px; display: flex; flex-direction: column; transition: .25s var(--ease); position: relative; } .contract:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .contract .stbadge { align-self: flex-start; font-family: var(--mono); font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; font-weight: 700; border: 1px solid currentColor; background: color-mix(in srgb, currentColor 9%, transparent); } .contract h3 { margin: 0 0 9px; font-size: 18px; letter-spacing: -.3px; color: var(--text); } .contract p { margin: 0; font-size: 14.5px; color: var(--muted); } .contract p code { font-family: var(--mono); font-size: 12.5px; color: var(--emerald); background: var(--bg-2); padding: 1px 6px; border-radius: 5px; } .contract .slab { margin-top: auto; } /* ============================================================================ TEMPLATES — adoptable smart-contract ideas → verbatim code → usage ============================================================================ */ .templates { background: var(--bg-2); } .tpl-recipe-title { font-size: 16px; margin: 6px 0 16px; color: var(--text); letter-spacing: -.2px; } .tpl-recipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } @media (max-width: 900px) { .tpl-recipe { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .tpl-recipe { grid-template-columns: 1fr; } } .recipe-step { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: 16px 17px; } .recipe-step h4 { margin: 0 0 9px; font-size: 13px; font-family: var(--mono); letter-spacing: .3px; color: var(--emerald); } .recipe-step .rs-cmd { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--text); background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; margin-bottom: 10px; overflow-x: auto; white-space: nowrap; word-break: normal; } .recipe-step p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; } .recipe-step p code { font-family: var(--mono); font-size: 11px; color: var(--emerald); } .tpl-notes { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 8px; } .tpl-notes li { position: relative; padding-left: 23px; font-size: 12.5px; color: var(--muted); line-height: 1.55; } .tpl-notes li::before { content: "⚠"; position: absolute; left: 1px; top: 0; color: var(--amber); font-size: 12px; } .tpl-notes li code { font-family: var(--mono); font-size: 11px; color: var(--emerald); } .tpl-notes li strong { color: var(--text); } .tpl-gallery { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; } @media (max-width: 900px) { .tpl-gallery { grid-template-columns: 1fr; } } .tpl-index { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 86px; } @media (max-width: 900px) { .tpl-index { position: static; flex-direction: row; flex-wrap: wrap; } } .tpl-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 12px 14px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--muted); transition: .2s var(--ease); } @media (max-width: 900px) { .tpl-item { width: auto; flex: 1 1 240px; } } .tpl-item:hover { border-color: var(--border-strong); color: var(--text); } .tpl-item.active { border-color: var(--emerald); color: var(--text); box-shadow: 0 0 0 1px var(--emerald), var(--shadow-sm); background: var(--bg-2); } .tpl-item .tdot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .tpl-item .tlabel { font-size: 13.5px; font-weight: 600; line-height: 1.3; } .tpl-item .tst { font-family: var(--mono); font-size: 9.5px; letter-spacing: .4px; text-transform: uppercase; opacity: .85; } .tpl-detail { min-width: 0; } .tpl-detail-head .stbadge { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; font-weight: 700; border: 1px solid currentColor; background: color-mix(in srgb, currentColor 9%, transparent); } .tpl-detail-head h3 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.4px; color: var(--text); } .tpl-detail-head .unlocks { margin: 0 0 20px; font-size: 15px; color: var(--muted); line-height: 1.6; } .tpl-detail-head .unlocks code { font-family: var(--mono); font-size: 12.5px; color: var(--emerald); background: var(--bg-2); padding: 1px 6px; border-radius: 5px; } .codecard { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); margin-bottom: 22px; } .codebar { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--bg-2); flex-wrap: wrap; } .codebar .cname { font-family: var(--mono); font-size: 12.5px; color: var(--text); font-weight: 600; word-break: break-all; } .codebar .cacts { margin-left: auto; display: flex; align-items: center; gap: 8px; } .codebar .csrc { font-family: var(--mono); font-size: 11.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px; transition: .2s var(--ease); } .codebar .csrc:hover { color: var(--emerald); border-color: color-mix(in srgb, var(--emerald) 45%, transparent); } .codebar .ccopy { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px; cursor: pointer; transition: .2s var(--ease); } .codebar .ccopy:hover { color: var(--emerald); border-color: color-mix(in srgb, var(--emerald) 45%, transparent); } .codecard .code { margin: 0; padding: 16px 18px; max-height: 460px; overflow: auto; background: var(--bg); font-family: var(--mono); font-size: 12.5px; line-height: 1.62; color: var(--text); tab-size: 4; } .codecard .code code { font-family: inherit; white-space: pre; } .codecard .cfoot { padding: 9px 14px; border-top: 1px solid var(--border); background: var(--bg-2); font-family: var(--mono); font-size: 10.5px; color: var(--muted); word-break: break-all; } .usage { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; } @media (max-width: 640px) { .usage { grid-template-columns: 1fr; } } .usage .ublock:last-child { grid-column: 1 / -1; } .ublock h5 { margin: 0 0 10px; font-size: 11.5px; font-family: var(--mono); letter-spacing: .5px; text-transform: uppercase; color: var(--emerald); } .ublock ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .ublock li { position: relative; padding-left: 16px; font-size: 13.5px; color: var(--muted); line-height: 1.55; } .ublock li::before { content: "›"; position: absolute; left: 2px; top: -1px; color: var(--emerald); font-weight: 700; } .ublock li code { font-family: var(--mono); font-size: 11.5px; color: var(--emerald); background: var(--bg-2); padding: 1px 5px; border-radius: 4px; word-break: break-word; } .ublock li strong { color: var(--text); } .tpl-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 600; padding: 11px 20px; border-radius: 10px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .25s var(--ease); z-index: 200; } .tpl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }